/* ijewel3d.com redesign prototype — assets/site.css (revision b: the pitch-library system)
   Tokens marked "deck" come from the customer pitch decks (share.ijewel.info/pitch-*).
   Tokens marked "guide" come from wiki/technical/platform-ui-style-guide.md and are used only
   where the deck system has no answer: focus ring, control sizes, input shape, the warning colour
   of the confirm badges. Light only. */

:root {
  color-scheme: light;
  /* deck */
  --paper: #ffffff; --paper2: #f7f7f7;
  --ink: #0b0b0b; --ink2: #4d4d4d; --ink3: #8f8f8f;
  --line: rgba(0, 0, 0, .14); --line2: rgba(0, 0, 0, .08);
  --plate: #0b0b0b; --plate-ink: #ffffff; --plate-ink2: #a8a8a8; --plate-line: rgba(255, 255, 255, .22);
  --card: #ffffff; --r: 18px;
  --serif: "Literata", Georgia, "Times New Roman", serif;
  --sans: "Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: ui-monospace, Menlo, Consolas, monospace;
  /* guide */
  --focus: #006FEE;
  --warn-text: #664304; --warn-tint: rgba(245, 182, 37, .22); --warn-line: rgba(153, 100, 6, .35);
  --control-md: 40px; --control-lg: 48px; --r-input: 12px; --line-input: #E7E7E7;
  /* site */
  --gutter: clamp(16px, 4vw, 56px);
  --wrap: 1280px;
  --sec: clamp(40px, 6vw, 72px);
  /* the platform's one chromatic accent (wiki/technical/platform-ui-style-guide.md): section labels, step numbers, the flow */
  --accent: #6E72F2; --accent-ink: #5053D0; --accent-50: #EAEBFF; --accent-100: #E2E3FE; --accent-rgb: 110, 114, 242;
  --tint-a: #F1F1F8; --tint-b: #F5F5FA; --tint-c: #FAFAFC;  /* the clean hero's light tint, top to bottom */
  --ease: cubic-bezier(.2, .8, .2, 1);
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 1.0625rem/1.6 var(--sans); -webkit-font-smoothing: antialiased; overflow-x: clip; }
::selection { background: var(--ink); color: var(--paper); }
img, svg, iframe, video { max-width: 100%; }
img { height: auto; display: block; }
a { color: inherit; text-underline-offset: 3px; text-decoration-thickness: 1px; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 4px; }
p { margin: 0 0 1em; }
h1, h2, h3, h4 { font-weight: 400; margin: 0; font-family: var(--serif); }
h1 em, h2 em, .quote em { font-style: italic; font-weight: 300; }
code { font-family: var(--mono); font-size: .875em; background: var(--paper2); padding: .1em .4em; border-radius: 4px; }
strong { font-weight: 600; }
.wrap { width: min(100% - 2 * var(--gutter), var(--wrap)); margin-inline: auto; }
.skip { position: absolute; left: 16px; top: -120px; background: var(--ink); color: var(--paper); padding: 10px 14px; border-radius: 999px; z-index: 100; text-decoration: none; }
.skip:focus { top: 12px; }

/* ---------- type ---------- */
.kicker { font: 600 .8125rem/1.2 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--accent-ink); margin: 0 0 18px; }
h1, .h1 { font-size: clamp(2.375rem, 5.6vw, 4.5rem); line-height: 1.04; letter-spacing: -.02em; text-wrap: balance; max-width: 22ch; }
h2, .h2 { font-size: clamp(1.75rem, 3.4vw, 3.125rem); line-height: 1.08; letter-spacing: -.015em; text-wrap: balance; max-width: 26ch; }
h3, .ct { font-family: var(--serif); font-weight: 500; font-size: 1.375rem; line-height: 1.25; letter-spacing: -.005em; }
.prose > p { color: var(--ink2); max-width: 64ch; }
.prose > p:first-of-type { color: var(--ink); }
.cb, .sb, .dc { color: var(--ink2); }

/* ---------- review draft strip ---------- */
.draft { background: var(--warn-tint); color: var(--warn-text); font-size: .8125rem; line-height: 1.4; padding: 8px 0; border-bottom: 1px solid var(--warn-line); }
.draft strong { font-weight: 600; }

/* ---------- header and navigation ---------- */
.site-header { position: relative; z-index: 30; border-bottom: 1px solid var(--line2); background: var(--paper); }
.bar { display: flex; align-items: center; gap: 16px; min-height: 76px; }
.logo { display: inline-flex; align-items: center; flex: none; }
.logo img { height: 32px; width: auto; }
.nav { margin-left: auto; }
.nav > ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 2px; align-items: center; }
.nav .menu { list-style: none; margin: 0; padding: 8px; }
.nav a, .nav button { font: 500 .9375rem/1 var(--sans); color: var(--ink2); background: none; border: 0; padding: 10px 12px; border-radius: 999px; cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.nav a:hover, .nav button:hover, .nav button[aria-expanded="true"] { background: var(--paper2); color: var(--ink); }
.nav a[aria-current="page"] { color: var(--ink); text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: .45em; }
.nav .chev { width: 12px; height: 12px; transition: transform .2s var(--ease); }
.nav button[aria-expanded="true"] .chev { transform: rotate(180deg); }
.nav .menu { position: absolute; top: calc(100% + 6px); left: 0; min-width: 260px; background: var(--card); border: 1px solid var(--line2); border-radius: var(--r); box-shadow: 0 24px 44px -26px rgba(0, 0, 0, .35); padding: 8px; display: none; flex-direction: column; gap: 2px; z-index: 40; }
.menu a { display: flex; width: 100%; padding: 10px 12px; font-weight: 400; color: var(--ink); border-radius: 10px; }
.sign-in { display: flex; align-items: center; gap: 2px; }
@media (max-width: 1120px) { .nav a, .nav button { padding: 10px 8px; font-size: .875rem; } }
@media (max-width: 980px) {
  .nav { display: none; position: absolute; left: 0; right: 0; top: 100%; margin: 0; background: var(--paper); border-bottom: 1px solid var(--line); padding: 4px var(--gutter) 24px; max-height: calc(100vh - 90px); overflow: auto; box-shadow: 0 20px 30px -20px rgba(0, 0, 0, .25); }
  .nav > ul { flex-direction: column; align-items: stretch; gap: 0; }
  .nav > ul > li { border-top: 1px solid var(--line2); }
  .nav > ul > li > a, .nav > ul > li > button { width: 100%; justify-content: space-between; padding: 14px 4px; font-size: 1rem; border-radius: 0; }
  .nav .menu { position: static; display: flex; box-shadow: none; border: 0; background: transparent; padding: 0 0 10px 12px; min-width: 0; width: 100%; }
  .menu a { padding: 8px 4px; color: var(--ink2); }
  .bar { gap: 10px; }
}

/* ---------- buttons and links (deck pills, guide heights) ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: var(--control-lg); padding: 0 26px; border-radius: 999px; font: 600 .78125rem/1.2 var(--sans); letter-spacing: .1em; text-transform: uppercase; text-decoration: none; border: 1px solid var(--ink); color: var(--ink); background: transparent; cursor: pointer; transition: background .2s var(--ease), color .2s var(--ease), transform .2s var(--ease); }
.btn i { font-style: normal; transition: transform .2s var(--ease); }
.btn:hover { background: var(--ink); color: var(--paper); }
.btn:hover i { transform: translateX(4px); }
.btn--primary { background: var(--ink); color: var(--paper); }
.btn--primary:hover { background: #2a2a2a; border-color: #2a2a2a; }
.link { font: 500 .9375rem/1.3 var(--sans); text-decoration: none; border-bottom: 1px solid var(--ink); padding-bottom: 2px; display: inline-flex; gap: 8px; align-items: center; color: var(--ink); }
.link .icon { width: 16px; height: 16px; transition: transform .2s var(--ease); }
.link:hover .icon { transform: translateX(3px); }
.cta { margin-top: 28px; display: flex; flex-wrap: wrap; gap: 14px 24px; align-items: center; }
.cta .aside { font-size: .9375rem; color: var(--ink2); }
.cover .btn { border-color: var(--plate-ink); color: var(--plate-ink); background: transparent; }

/* ---------- confirm badges (review draft only) ---------- */
.confirm { display: inline-flex; align-items: center; vertical-align: middle; position: relative; margin: 0 3px; background: var(--warn-tint); color: var(--warn-text); border: 1px solid var(--warn-line); border-radius: 999px; font: 600 .625rem/1 var(--sans); letter-spacing: .1em; text-transform: uppercase; padding: 4px 8px; cursor: help; white-space: nowrap; }
.cover .confirm { background: rgba(245, 182, 37, .9); color: #2a1c00; border-color: transparent; }
.confirm::after { content: attr(data-note); position: absolute; left: 0; bottom: calc(100% + 8px); width: max-content; max-width: min(360px, 84vw); background: var(--ink); color: var(--paper); font: 400 .8125rem/1.45 var(--sans); letter-spacing: 0; text-transform: none; padding: 10px 12px; border-radius: 10px; white-space: normal; display: none; z-index: 60; pointer-events: none; text-align: left; animation: tip .2s var(--ease) both; box-shadow: 0 10px 30px -10px rgba(0,0,0,.4); }
.confirm:hover::after, .confirm:focus-visible::after, .confirm.is-open::after { display: block; }
@keyframes tip { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

/* ---------- sections ---------- */
.sec { padding-block: var(--sec); border-top: 1px solid var(--line2); position: relative; background: var(--paper); }
.num { font: 600 .8125rem/1 var(--sans); color: var(--accent); letter-spacing: .12em; display: block; margin-bottom: 12px; }
.sec-body { max-width: 66ch; }
.sec-body > p { color: var(--ink2); }
.sec-body > p:first-of-type { color: var(--ink); font-size: 1.125rem; }
figcaption { margin-top: 12px; font: 300 .9375rem/1.45 var(--serif); color: var(--ink2); }

/* placeholder plate for visuals that need a real asset */
.plate { border: 1px dashed var(--line); border-radius: var(--r); background: var(--paper2); padding: 24px; margin-top: 36px; min-height: 200px; display: flex; flex-direction: column; justify-content: flex-end; gap: 10px; }
.plate .eyebrow { font: 600 .6875rem/1.2 var(--sans); letter-spacing: .22em; text-transform: uppercase; color: var(--ink3); margin: 0; }
.plate p { margin: 0; font: italic 300 1.125rem/1.4 var(--serif); color: var(--ink2); max-width: 44ch; }

/* ---------- hero (light, with an optional visual) ---------- */
.hero { position: relative; padding-block: clamp(40px, 6vw, 88px) clamp(48px, 7vw, 96px); }
.hero .wrap { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); grid-template-areas: "text visual" "more visual"; column-gap: clamp(32px, 5vw, 80px); align-items: center; }
.hero-visual { grid-area: visual; }
.hero h1 { margin: 0; }
.hero .cta { margin-top: 32px; }
@media (max-width: 900px) { .hero .wrap { grid-template-columns: 1fr; grid-template-areas: "text" "visual" "more"; row-gap: 24px; } }

/* ---------- cover hero (home and the audience pages) ---------- */
.aud { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 26px; padding: 0; list-style: none; }
.aud button { font: 600 .6875rem/1.2 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--ink2); background: var(--paper); border: 1px solid var(--line); border-radius: 999px; padding: 0 14px; min-height: 36px; cursor: pointer; transition: background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease); }
.aud button:hover { border-color: var(--ink); color: var(--ink); }
.aud button[aria-checked="true"] { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.cover { background: var(--plate); color: var(--plate-ink); border-radius: var(--r); display: flex; flex-direction: column; padding: 28px 28px 24px; overflow: hidden; box-shadow: 0 30px 60px -25px rgba(0, 0, 0, .4); }
.cover .cm { font-family: var(--serif); font-weight: 500; font-size: 1.5rem; text-align: center; }
.cover .cm span { font-style: italic; font-weight: 300; }
.cover .cart { position: relative; margin: 12px 0; border-radius: calc(var(--r) - 8px); overflow: hidden; background: #0e0e0e; aspect-ratio: 1 / 1.1; }
.cover .big { font-family: var(--serif); font-weight: 300; font-style: italic; font-size: 1.0625rem; line-height: 1.35; }
.cover .credit { margin-top: 8px; font: 400 .5625rem/1.4 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--plate-ink2); }
.cover .credit b { color: var(--plate-ink); font-weight: 600; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(11, 11, 11, .45); } 70% { box-shadow: 0 0 0 10px rgba(11, 11, 11, 0); } 100% { box-shadow: 0 0 0 0 rgba(11, 11, 11, 0); } }

/* live 3D containers */
.live { position: absolute; inset: 0; background: #0e0e0e; }
.live iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; opacity: 0; transition: opacity .6s; background: #0e0e0e; }
.live.crop iframe { left: -22%; top: -24%; width: 144%; height: 148%; }
.live.on iframe { opacity: 1; }
.live .loading { position: absolute; left: 0; right: 0; bottom: 14px; text-align: center; font: italic 300 .875rem/1.3 var(--serif); color: #9a9a9a; }
.live.on .loading { display: none; }
@keyframes orbit { to { transform: rotate(360deg); } }

/* ---------- deck-style lists, cards, tiles ---------- */
.body { list-style: none; margin: 28px 0 0; padding: 0; counter-reset: b; max-width: 60rem; }
.body li { font-size: 1.125rem; line-height: 1.45; padding: 15px 0 15px 52px; position: relative; border-top: 1px solid var(--line2); counter-increment: b; color: var(--ink); }
.body li:first-child { border-top: 0; padding-top: 0; }
.body li::before { content: counter(b, decimal-leading-zero); position: absolute; left: 0; top: 14px; font: 300 1.125rem/1 var(--serif); color: var(--ink3); }
.body li:first-child::before { top: 0; }
.tail { margin-top: 18px; font: 300 1.125rem/1.5 var(--serif); color: var(--ink2); max-width: 60rem; }
.cards { display: grid; gap: 22px 24px; margin: 28px 0 0; padding: 0; list-style: none; }
.card { border-top: 1px solid var(--line); padding: 20px 4px 0; display: flex; flex-direction: column; gap: 9px; }
.card .ct { margin: 0; }
.card .cb { margin: 0; font-size: 1.0625rem; line-height: 1.5; }
a.card { text-decoration: none; color: inherit; transition: border-color .2s var(--ease); }
a.card:hover { border-top-color: var(--ink); }
a.card .ct::after { content: " →"; color: var(--ink3); }
.card .icon { width: 28px; height: 28px; color: var(--ink2); }
.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; margin: 28px 0 0; padding: 0; list-style: none; }
.step .n { font: 600 1.75rem/1 var(--sans); color: var(--accent); margin-bottom: 14px; display: block; }
.step .st { font: 500 1.375rem/1.25 var(--serif); margin-bottom: 10px; }
.step .sb, .step p { font-size: 1.0625rem; line-height: 1.5; color: var(--ink2); margin: 0; }
.tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; margin-top: 28px; }
.tile { display: flex; flex-direction: column; background: var(--card); border: 1px solid var(--line2); border-radius: var(--r); overflow: hidden; text-decoration: none; color: inherit; transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease); }
.tile:hover { transform: translateY(-5px); border-color: var(--line); box-shadow: 0 24px 44px -26px rgba(0, 0, 0, .35); }
.tile .meta { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 7px; flex: 1; }
.tile .dl { font: 500 1.25rem/1.2 var(--serif); }
.tile .dc { font-size: .9375rem; line-height: 1.45; }
.tile .du { margin-top: auto; padding-top: 8px; font: 500 .65625rem/1.3 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--ink3); word-break: break-all; }
.caption { margin-top: 26px; font: 300 1.25rem/1.4 var(--serif); color: var(--ink2); }
@media (max-width: 1000px) { .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; } .cards { gap: 22px 28px; } }
@media (max-width: 640px) { .steps { grid-template-columns: 1fr; gap: 24px; } .tiles { gap: 12px; } .tile .dl { font-size: 1.0625rem; } .tile .dc { font-size: .8125rem; } .tile .meta { padding: 12px 12px 14px; } }

/* ---------- other components (kept from revision a, restyled) ---------- */
.tiers { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); margin-top: 36px; border: 1px solid var(--line2); border-radius: var(--r); overflow: hidden; background: var(--card); }
.tiers > div { padding: 22px; border-left: 1px solid var(--line2); }
.tiers > div:first-child { border-left: 0; }
.tiers h3 { margin-bottom: 6px; }
.tiers p { margin: 0; font-size: .9375rem; color: var(--ink2); }
@media (max-width: 600px) { .tiers > div { border-left: 0; border-top: 1px solid var(--line2); } .tiers > div:first-child { border-top: 0; } }
.names { margin-top: 32px; display: grid; gap: 22px; }
.names .group { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 28px; }
.names .eyebrow { font: 600 .6875rem/1.2 var(--sans); letter-spacing: .22em; text-transform: uppercase; color: var(--ink3); min-width: 130px; }
.names .name { font: 400 clamp(1.375rem, 2.2vw, 1.75rem)/1.2 var(--serif); }
.quote { font: italic 300 clamp(1.625rem, 3vw, 2.75rem)/1.18 var(--serif); letter-spacing: -.01em; margin: 0; max-width: 30ch; }
.quote cite { display: block; font: 600 .9375rem/1.4 var(--sans); font-style: normal; color: var(--ink); margin-top: 24px; }
.plans { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); list-style: none; padding: 0; margin: 36px 0 0; }
.plan { background: var(--card); border: 1px solid var(--line2); border-radius: var(--r); padding: 28px 24px; display: flex; flex-direction: column; gap: 16px; }
.plan.is-rec { border-color: var(--ink); box-shadow: 0 24px 40px -32px rgba(0, 0, 0, .4); }
.plan h3 { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; font-size: 1.5rem; }
.chip { font: 600 .625rem/1 var(--sans); letter-spacing: .12em; text-transform: uppercase; padding: 6px 10px; border-radius: 999px; background: var(--ink); color: var(--paper); }
.price { font: 300 2.5rem/1 var(--serif); }
.price small { display: block; font: 400 .8125rem/1.4 var(--sans); color: var(--ink3); margin-top: 6px; }
.plan dl { margin: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 9px 12px; font-size: .875rem; border-top: 1px solid var(--line2); padding-top: 14px; }
.plan dt { color: var(--ink3); }
.plan dd { margin: 0; text-align: right; }
.seg { display: inline-flex; background: var(--paper2); padding: 4px; border-radius: 999px; margin-top: 28px; }
.seg a { text-decoration: none; padding: 8px 18px; border-radius: 999px; font: 600 .6875rem/1.4 var(--sans); letter-spacing: .1em; text-transform: uppercase; }
.seg a:first-child { background: var(--card); box-shadow: 0 1px 2px rgba(0, 0, 0, .08); }
.tbl-wrap { overflow-x: auto; margin-top: 36px; }
.tbl { width: 100%; border-collapse: collapse; font-size: .9375rem; min-width: 480px; }
.tbl th { text-align: left; font: 600 .6875rem/1.2 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--ink3); padding: 10px 12px; border-bottom: 1px solid var(--ink); }
.tbl td { padding: 14px 12px; border-bottom: 1px solid var(--line2); vertical-align: top; }
.tbl td:first-child { font-weight: 500; }
.faq { margin: 36px 0 0; display: grid; }
.faq div { padding: 20px 0; border-top: 1px solid var(--line2); display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 8px 32px; }
.faq dt { font: 400 1.25rem/1.3 var(--serif); }
.faq dd { margin: 0; color: var(--ink2); }
@media (max-width: 700px) { .faq div { grid-template-columns: 1fr; } }
.sec-body ul.plain { padding-left: 1.2em; color: var(--ink2); margin: 0; display: grid; gap: 6px; }
.emails { list-style: none; margin: 28px 0 0; padding: 0; display: grid; gap: 12px; }
.emails li { display: flex; gap: 12px; align-items: baseline; flex-wrap: wrap; }
.emails a { font: 400 1.25rem/1.3 var(--serif); text-decoration: none; border-bottom: 1px solid var(--ink); }
.emails span { color: var(--ink2); font-size: .9375rem; }
.social { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; list-style: none; padding: 0; }
.social a, .social span { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px 0 12px; border-radius: 999px; border: 1px solid var(--line); background: var(--card); text-decoration: none; font-size: .9375rem; }
.social a:hover { border-color: var(--ink); }
.social .icon { width: 20px; height: 20px; }
.chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }
.chips a, .chips span { display: inline-flex; align-items: center; min-height: 40px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--line); background: var(--card); text-decoration: none; font-size: .9375rem; }
.chips a:hover { border-color: var(--ink); }
.code { margin: 36px 0 0; background: var(--paper2); border: 1px solid var(--line2); color: var(--ink); border-radius: var(--r); padding: 24px 28px; overflow-x: auto; font: 400 .875rem/1.55 var(--mono); white-space: pre; }
.code code { background: none; padding: 0; font-size: inherit; }

/* ---------- forms (draft, never submit) ---------- */
.form { margin-top: 36px; background: var(--card); border: 1px solid var(--line2); border-radius: var(--r); padding: clamp(20px, 3vw, 36px); display: grid; gap: 20px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.field { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.field.wide { grid-column: 1 / -1; }
.field > label, .field > .lbl, legend { font: 600 .875rem/1.3 var(--sans); }
.opt { color: var(--ink3); font-weight: 400; }
.field input, .field select, .field textarea { font: 400 .9375rem/1.4 var(--sans); min-height: 44px; border: 2px solid var(--line-input); border-radius: var(--r-input); padding: 8px 14px; background: var(--card); color: var(--ink); width: 100%; }
.field textarea { min-height: 120px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--ink); outline: 2px solid var(--focus); outline-offset: 2px; }
.field input[type="file"] { padding: 9px 14px; }
.choices { display: flex; flex-wrap: wrap; gap: 8px 18px; }
.choices label { font-weight: 400; display: inline-flex; gap: 8px; align-items: center; font-size: .9375rem; }
.choices input { width: 18px; height: 18px; min-height: 0; margin: 0; accent-color: var(--ink); }
.form .cta { grid-column: 1 / -1; margin-top: 4px; }
fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
legend { margin-bottom: 10px; padding: 0; }
.checklist { display: grid; gap: 8px; }
.checklist h4 { font: 600 .6875rem/1.2 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--ink3); margin: 10px 0 4px; }
@media (max-width: 700px) { .form { grid-template-columns: 1fr; } }
.calendar { margin-top: 36px; border: 1px solid var(--line2); border-radius: var(--r); background: var(--card); padding: 24px; max-width: 560px; }
.calendar .head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; font-weight: 500; }
.calendar .head span:last-child { color: var(--ink3); font-weight: 400; font-size: .875rem; }
.calendar .grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.calendar .grid i { display: block; aspect-ratio: 1; border-radius: 8px; background: var(--paper2); }
.calendar .grid i.on { background: #e9e9e9; }
.calendar .grid i.pick { background: var(--ink); }
.calendar .foot { margin-top: 14px; font-size: .8125rem; color: var(--ink3); display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.tabs { margin-top: 40px; }
.tablist { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 0; padding: 0; }
.tab { background: var(--card); border: 1px solid var(--line2); border-radius: var(--r); padding: 18px 16px; font: 500 1rem/1.3 var(--sans); color: var(--ink2); cursor: pointer; text-align: left; transition: border-color .2s var(--ease); }
.tab:hover { border-color: var(--ink); }
.tab[aria-selected="true"] { border-color: var(--ink); box-shadow: inset 0 -3px 0 var(--ink); color: var(--ink); }
.panel { padding-top: 40px; }
.panel[hidden] { display: none; }
.panel h3 { font-size: clamp(1.625rem, 2.4vw, 2.125rem); font-weight: 400; line-height: 1.15; }
@media (max-width: 800px) { .tablist { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 420px) { .tablist { grid-template-columns: 1fr; } }

/* ---------- footer ---------- */
.site-footer { border-top: 1px solid var(--line2); padding: clamp(48px, 6vw, 80px) 0 32px; background: var(--paper2); }
.site-footer h2 { font: 600 .6875rem/1.2 var(--sans); letter-spacing: .22em; text-transform: uppercase; color: var(--ink3); margin: 0 0 16px; max-width: none; }
.site-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.site-footer li a { text-decoration: none; color: var(--ink2); font-size: .9375rem; }
.site-footer li a:hover { text-decoration: underline; }

/* ---------- the home hero: the bare 3D canvas on the white page, floating controls ---------- */
.hero3d { position: relative; }
.hero3d .ring { position: relative; aspect-ratio: 1 / 1; background: var(--paper); }
.ring-stage { position: absolute; inset: 0; touch-action: none; }
.ring-poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; z-index: 1; background: var(--paper); transition: opacity .8s var(--ease); }
.ring--live .ring-poster { opacity: 0; pointer-events: none; }
.ring-status { position: absolute; left: 0; right: 0; bottom: 12px; margin: 0; z-index: 2; text-align: center; font: italic 300 .8125rem/1.3 var(--serif); color: var(--ink3); opacity: 0; transition: opacity .4s; pointer-events: none; }
.ring--loading .ring-status { opacity: 1; }
.pills { display: flex; gap: 8px; pointer-events: auto; }
.pill { font: 600 .6875rem/1.2 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--ink); background: rgba(255, 255, 255, .92); border: 1px solid var(--line); border-radius: 999px; padding: 0 14px; min-height: 36px; cursor: pointer; backdrop-filter: blur(6px); transition: background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease), opacity .2s; }
.pill:hover { border-color: var(--ink); }
.pill[aria-pressed="false"] { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.pill[disabled] { opacity: .4; cursor: default; }
/* the markers that ride the piece: one on the shank, one on the centre stone */
.spots { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.spots[hidden] { display: none; }
.leads { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.lead { fill: none; stroke: var(--ink); stroke-width: 2.25; stroke-opacity: .7; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 0.1 5; transition: opacity .3s ease; }
.lead-seed { fill: var(--ink); transition: opacity .3s ease; }
.spot { position: absolute; left: 0; top: 0; width: 38px; height: 38px; margin: -19px 0 0 -19px; padding: 0; border: 0; background: none; cursor: pointer; pointer-events: auto; opacity: 0; transition: opacity .35s ease, transform .18s ease; will-change: transform; }
.spot.is-on { opacity: 1; }
.spot:hover, .spot:focus-visible { transform: scale(1.1); }
.spot:focus-visible { outline: 2px solid var(--focus); outline-offset: 4px; border-radius: 50%; }
.spot i { position: absolute; inset: 10px; border-radius: 50%; background: radial-gradient(circle, #fff 0 24%, var(--ink) 29% 100%); border: 1.5px solid #fff; box-shadow: 0 2px 10px rgba(0, 0, 0, .35), 0 0 0 3px rgba(11, 11, 11, .1); }
.spot::before, .spot::after { content: ""; position: absolute; inset: 7px; border-radius: 50%; border: 1.5px solid var(--ink); opacity: 0; animation: spot-pulse 2.6s ease-out infinite; }
.spot::before { animation-delay: 1.3s; }
@keyframes spot-pulse { 0% { transform: scale(.85); opacity: .7; } 70% { transform: scale(2); opacity: 0; } 100% { opacity: 0; } }
.spot.is-open::before, .spot.is-open::after { animation: none; opacity: 0; }
.spot.is-open i { background: radial-gradient(circle, var(--ink) 0 24%, #fff 29% 100%); border-color: var(--ink); }
.pop { position: absolute; left: 0; top: 0; display: none; pointer-events: auto; transform: translate(-50%, -50%) scale(.94); transform-origin: center; padding: 7px 10px 7px 14px; border-radius: 999px; background: rgba(255, 255, 255, .95); border: 1px solid var(--line); box-shadow: 0 16px 36px -16px rgba(0, 0, 0, .4); backdrop-filter: blur(8px); opacity: 0; transition: opacity .18s ease, transform .18s ease; }
.pop.is-open { display: flex; align-items: center; gap: 4px; opacity: 1; transform: translate(-50%, -50%) scale(1); }
.pop-name { display: none; }
.pop-name b { font-weight: 600; color: var(--ink); }
/* a marker with two rows becomes a small card: one labelled row of chips per choice */
.pop { padding: 6px 8px; }
.pop.pop--card { border-radius: 18px; padding: 6px 8px; }
.pop.pop--card.is-open { flex-direction: column; align-items: center; gap: 2px; }
.prow { display: flex; align-items: center; justify-content: center; gap: 2px; }
.hero3d:not(.retail) .prow[data-retail], .hero3d:not(.retail) .spot[data-retail], .hero3d:not(.retail) .pop[data-retail] { display: none; }
.hero3d.retail .prow[data-retail] { border-top: 1px solid var(--line2); padding-top: 4px; width: 100%; }
/* the part icons are pale renders on light grey, so the geometry chips are larger, zoomed in and a touch harder */
.chip3d.chip3d--geo { width: 48px; height: 48px; }
.chip3d.chip3d--geo i { background: var(--paper); border: 1px solid var(--line2); width: 42px; height: 42px; box-shadow: none; display: grid; place-items: center; color: #767676; }
.chip3d.chip3d--geo i svg { width: 44px; height: 44px; display: block; }
.chip3d.chip3d--geo i svg [stroke] { stroke-width: .75; }
.chip3d.chip3d--geo[aria-checked="true"] i { color: var(--ink); }
.chip3d.chip3d--geo[aria-checked="true"] i { box-shadow: 0 0 0 2px #fff, 0 0 0 3.5px var(--ink); }
.chip3d.chip3d--geo[aria-checked="true"] i { box-shadow: 0 0 0 2px #fff, 0 0 0 3.5px var(--ink); }
.hero3d.is-busy .chip3d { opacity: .55; pointer-events: none; }
.hero3d.is-busy .ring-status { opacity: 1; }
.chip3d { width: 32px; height: 32px; padding: 0; border: 0; background: none; border-radius: 50%; display: grid; place-items: center; cursor: pointer; flex: none; }
.chip3d i { display: block; width: 22px; height: 22px; border-radius: 50%;
  background: radial-gradient(circle at 70% 72%, rgba(255, 255, 255, .28) 0, rgba(255, 255, 255, 0) 32%), radial-gradient(circle at 34% 28%, var(--a) 0%, var(--b) 44%, var(--c) 100%);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .08), 0 1px 3px rgba(0, 0, 0, .3); transition: transform .2s var(--ease), box-shadow .2s var(--ease); }
.chip3d:hover i { transform: scale(1.1); }
.chip3d[aria-checked="true"] i { box-shadow: 0 0 0 2px #fff, 0 0 0 3.5px var(--ink), inset 0 0 0 1px rgba(0, 0, 0, .08); }
.chip3d:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; border-radius: 50%; }
/* the swatch rows under the canvas: the state, shown only while the markers are not running */
.ring-ui { display: grid; gap: 4px; padding: 14px 0 0; }
.spots-live .ring-ui { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); padding: 0; margin: -1px; }
.swr { display: flex; flex-wrap: wrap; align-items: center; gap: 0 14px; }
.swh { display: flex; gap: 8px; align-items: baseline; flex: 0 0 auto; min-width: 128px; font: 400 .5625rem/1.3 var(--sans); letter-spacing: .24em; text-transform: uppercase; color: var(--ink3); }
.swh .swv { color: var(--ink); letter-spacing: .12em; }
.sws { display: flex; flex-wrap: wrap; margin-left: -8px; }
.sws button { width: 44px; height: 44px; padding: 0; background: none; border: 0; border-radius: 50%; display: grid; place-items: center; cursor: pointer; color: inherit; }
.sws button i { display: block; width: 26px; height: 26px; border-radius: 50%;
  background: radial-gradient(circle at 70% 72%, rgba(255, 255, 255, .28) 0, rgba(255, 255, 255, 0) 32%), radial-gradient(circle at 34% 28%, var(--a) 0%, var(--b) 44%, var(--c) 100%);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .08), 0 1px 3px rgba(0, 0, 0, .35); transition: transform .2s var(--ease), box-shadow .2s var(--ease); }
.sws button:hover i { transform: scale(1.1); }
.sws button[aria-checked="true"] i { box-shadow: 0 0 0 2.5px var(--paper), 0 0 0 4px var(--ink), inset 0 0 0 1px rgba(0, 0, 0, .08); }
.sws button:focus-visible { outline: 2px solid var(--focus); outline-offset: -3px; border-radius: 50%; }
.hero3d--still .spots { display: none; }
.hero3d--still .sws button { opacity: .45; cursor: default; }
@media (max-width: 400px) { .swh { min-width: 100%; margin-top: 4px; } }

/* ---------- motion ---------- */
html.js .rv { opacity: 0; transform: translateY(16px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
html.js .rv.in { opacity: 1; transform: none; }
@keyframes rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
html.js .hero .rise { animation: rise .7s var(--ease) both; }
html.js .hero .rise:nth-child(2) { animation-delay: .09s; }
html.js .hero .rise:nth-child(3) { animation-delay: .18s; }
html.js .hero .hero-visual.rise { animation-delay: .18s; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  html.js .rv, html.js .hero .rise { opacity: 1; transform: none; transition: none; animation: none; }
  .ring-poster, .sws button i { transition: none; }
  .tile, .btn, .btn i, .link .icon, .nav .chev, .card { transition: none; }
  .confirm::after { animation: none; }
  .spot::before, .spot::after { animation: none; opacity: .5; transform: scale(1.3); }
}
@media print { .draft, .skip { display: none; } .sec { break-inside: avoid; } .live { display: none; } }

/* ---------- revision c, review of 2026-09-25: the logo strip, the buyer flows, the free plan ---------- */
.logos { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 22px 32px; align-items: center; margin: 22px 0 0; padding: 0; list-style: none; }
.logos li { display: grid; place-items: center; min-height: 56px; }
.logos img { height: 34px; width: auto; max-width: 150px; object-fit: contain; filter: grayscale(1); opacity: .78; transition: opacity .3s var(--ease), filter .3s var(--ease); }
.logos li:hover img { filter: none; opacity: 1; }
@media (max-width: 900px) { .logos { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px 20px; } .logos img { max-height: 30px; } }

/* ---------- home, Integrations (2026-10-03): the e-commerce platforms in their own logos ---------- */
.pf { position: relative; display: flex; align-items: center; justify-content: center; padding: 16px; background: var(--card); border: 1px solid var(--line2); border-radius: 14px; text-decoration: none; color: var(--ink); flex: 1; min-width: 0; transition: border-color .2s var(--ease), box-shadow .2s var(--ease), transform .2s var(--ease); }
.pf:hover { border-color: var(--line); box-shadow: 0 16px 32px -20px rgba(0, 0, 0, .28); transform: translateY(-2px); }
.pf:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
.pf img { display: block; max-width: 86%; height: auto; }
.pf-code { flex-shrink: 0; color: var(--accent-ink); margin-bottom: 2px; }
.pf-note { margin: 12px 0 0; font-size: .75rem; color: var(--ink3); }
@media (prefers-reduced-motion: reduce) { .pf { transition: none; } .pf:hover { transform: none; } }

/* ---------- home, review of 2026-10-03: chip tabs (What you get, Who it is for, Configurators) ---------- */
@keyframes tpIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.tp { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(24px, 4vw, 56px); align-items: center; }
.tp h3 { margin: 0 0 14px; font: 500 clamp(1.5rem, 2.4vw, 2rem)/1.15 var(--serif); }
.tp h3 a { text-decoration: none; display: inline-flex; align-items: center; gap: 8px; }
.tp h3 a .icon { width: 18px; height: 18px; color: var(--accent); }
@media (max-width: 900px) {
  .tp { grid-template-columns: 1fr; }
}

/* ---------- home, review of 2026-10-03: the testimonial carousel ---------- */
.tq { margin: 0; flex: 1; display: flex; flex-direction: column; justify-content: space-between; gap: 22px; padding: 28px 28px 22px; background: var(--card); border: 1px solid var(--line2); border-radius: var(--r); }
.tq blockquote { margin: 0; }
.tq blockquote::before { content: "\201C"; display: block; height: 30px; margin-bottom: 6px; font: 400 4rem/1 var(--serif); color: var(--accent); }
.tq p { margin: 0; font: 400 1.0625rem/1.55 var(--serif); color: var(--ink); }
.tq figcaption { display: flex; align-items: center; gap: 12px; padding-top: 16px; border-top: 1px solid var(--line2); }
@media (max-width: 640px) { .tq { padding: 22px 20px 18px; } .tq p { font-size: 1rem; } }

/* ---------- review of 2026-10-03 (3): sticky bar, hero, flow, plates, motion ---------- */
[id] { scroll-margin-top: 84px; }

/* The bar: sticky, translucent, a line and a shadow once the page scrolls; menus centred, one line per page */
.site-header { position: sticky; top: 0; z-index: 60; background: rgba(255, 255, 255, .86); -webkit-backdrop-filter: saturate(180%) blur(14px); backdrop-filter: saturate(180%) blur(14px); border-bottom: 1px solid transparent; transition: border-color .25s var(--ease), box-shadow .25s var(--ease), background .25s var(--ease); }
.bar { min-height: 72px; }  /* one height, scrolled or not: a bar that shrank on scroll moved the page, the browser's scroll anchoring
   pulled the scroll back over the threshold, and the bar flipped many times a second (review of 2026-10-04, twentieth pass) */
.nav { margin-inline: auto; }
.nav > ul { gap: 4px; }
.nav > ul > li > a, .nav > ul > li > button { color: var(--ink); padding: 10px 14px; font-weight: 500; }
.nav > ul > li > button .chev { margin-left: 2px; opacity: .6; }
.nav .menu { min-width: 300px; padding: 10px; gap: 2px; border-radius: 16px; box-shadow: 0 28px 60px -28px rgba(0, 0, 0, .35), 0 2px 8px -4px rgba(0, 0, 0, .08); animation: menuIn .18s var(--ease); }
@keyframes menuIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.nav .menu a { flex-direction: column; align-items: flex-start; gap: 3px; padding: 10px 12px; border-radius: 10px; white-space: normal; }
.nav .menu a:hover { background: var(--paper2); }
@media (max-width: 980px) {
  .nav .menu { animation: none; box-shadow: none; }
  .nav .menu a { padding: 8px 4px; }
}

/* Hero: a light tint of its own under the white bar, and a slow glow */
@keyframes glowDrift { from { transform: translate(0, 0) scale(1); } to { transform: translate(-9%, 7%) scale(1.1); } }

/* The product tour player */
.tour { padding: 0; border: 0; background: transparent; width: min(1100px, 92vw); max-width: none; overflow: visible; }
.tour::backdrop { background: rgba(8, 8, 12, .74); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.tour[open] { animation: tourIn .28s var(--ease); }
@keyframes tourIn { from { opacity: 0; transform: translateY(12px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes nodeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* One product: "Start here" on the two tools a picked buyer starts with */
@keyframes chipIn { from { opacity: 0; transform: translateY(-4px) scale(.96); } to { opacity: 1; transform: none; } }

/* Proof: the client logos as a slow endless row; still and wrapped with reduced motion */
.marquee { overflow: hidden; margin-top: 24px; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
@keyframes marquee { to { transform: translateX(-50%); } }

/* Motion on the home page: section labels draw a line, lists come in one by one */
@keyframes stagIn { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
html.js .is-clean .rv:not(.in) [data-stagger] > * { opacity: 0; }
html.js .is-clean .rv.in [data-stagger] > * { animation: stagIn .65s var(--ease) backwards; animation-delay: calc(var(--i, 0) * 70ms); }
.is-clean .pf:hover .pf-code, .is-clean .pf:hover img { transform: scale(1.04); }
.is-clean .pf img, .is-clean .pf .pf-code { transition: transform .3s var(--ease); }

@media (prefers-reduced-motion: reduce) {
  .nav .menu, .tour[open] { animation: none !important; }
  .marquee { -webkit-mask-image: none; mask-image: none; }
  html.js .is-clean .rv:not(.in) [data-stagger] > * { opacity: 1; }
  html.js .is-clean .rv.in [data-stagger] > * { animation: none; }
  .site-header, .bar { transition: none; }
}

/* ---------- review of 2026-10-03 (5): What you get as one quiet timeline ---------- */
.tl { position: relative; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.tl::before, .tl::after { content: ""; position: absolute; top: 19px; left: 20px; right: calc(25% - 20px); height: 2px; border-radius: 2px; }
.tl::before { background: var(--line2); }
.tl::after { background: var(--accent); transform-origin: left center; }
@keyframes tlFill { from { transform: scaleX(0); } }
@media (max-width: 760px) {  /* top to bottom: the line runs down the markers */
  .tl { grid-template-columns: 1fr; row-gap: 24px; }
  .tl::before, .tl::after { top: 20px; bottom: 20px; left: 19px; right: auto; width: 2px; height: auto; }
  .tl::after { transform-origin: center top; }
}
@keyframes tlFillY { from { transform: scaleY(0); } }

/* ---------- review of 2026-10-03 (7): the tool cards, each with its own link, and the plan strip ---------- */
.tools { list-style: none; margin: 28px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.tool { display: flex; flex-direction: column; height: 100%; background: var(--card); border: 1px solid var(--line2); border-radius: var(--r); overflow: hidden; text-decoration: none; color: var(--ink); transition: border-color .2s var(--ease), box-shadow .25s var(--ease), transform .25s var(--ease); }
.tool:hover { border-color: var(--line); box-shadow: 0 22px 44px -28px rgba(0, 0, 0, .3); transform: translateY(-3px); }
.tool:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
@media (max-width: 1000px) { .tools { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) {
  .tools { grid-template-columns: 1fr; gap: 14px; }
}
@media (prefers-reduced-motion: reduce) { .tool { transition: none; } .tool:hover { transform: none; } }
@media (max-width: 640px) {  /* phone: a compact row per tool, the picture as a thumbnail */
  .tool { flex-direction: row; }
}

/* What it replaces and What we do not do: four cards, a line icon each */
.swaps { list-style: none; margin: 28px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.swap { display: flex; flex-direction: column; gap: 10px; padding: 24px 22px; background: var(--card); border: 1px solid var(--line2); border-radius: var(--r); }
@media (max-width: 1000px) { .swaps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) {  /* phone: a compact row per card, the icon on the left */
  .swaps { grid-template-columns: 1fr; gap: 12px; }
  .swap { display: grid; grid-template-columns: 40px minmax(0, 1fr); column-gap: 14px; row-gap: 4px; padding: 16px 18px; }
}

/* The network and Built to be manufactured: the points with an icon or a check mark beside the picture */
.pts { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; }
.pts li { display: grid; grid-template-columns: 40px minmax(0, 1fr); column-gap: 16px; align-items: start; }

/* ---------- review of 2026-10-03 (9): the menus as panels, in the style of the current site's Products menu ---------- */
.nav .menu.mp { padding: 0; min-width: 0; gap: 0; background: var(--card); border: 1px solid var(--line2); border-radius: 22px; box-shadow: 0 44px 80px -40px rgba(0, 0, 0, .38), 0 2px 10px -4px rgba(0, 0, 0, .08); }
@keyframes mpIn { from { opacity: 0; transform: translate(-50%, -6px); } to { opacity: 1; transform: translate(-50%, 0); } }
@media (min-width: 981px) {  /* one wide panel, centred under the bar */
  .nav .menu.mp { position: absolute; top: calc(100% + 4px); left: 50%; transform: translateX(-50%); width: min(720px, calc(100vw - 48px)); animation: mpIn .2s var(--ease); }
  .nav .menu.mp::before { content: ""; position: absolute; left: 0; right: 0; top: -24px; height: 24px; }
}
@media (max-width: 980px) {  /* phone and tablet: plain lists under their menu */
  .nav .menu.mp { display: block; border: 0; border-radius: 0; box-shadow: none; background: transparent; padding: 0 0 10px; }
}
@media (prefers-reduced-motion: reduce) { .nav .menu.mp { animation: none; } }

/* ---------- review of 2026-10-03 (10): every audience page in the home design, a primary colour each ---------- */
body[data-audience="manufacturer"] { --accent: #2F7DE1; --accent-ink: #1E5CB0; --accent-50: #E6F0FD; --accent-100: #D4E4FB; --accent-rgb: 47, 125, 225; --tint-a: #EDF2FA; --tint-b: #F3F6FC; --tint-c: #FAFBFD; }
body[data-audience="retailer"] { --accent: #D9547E; --accent-ink: #AE3760; --accent-50: #FCE9EF; --accent-100: #F9D8E3; --accent-rgb: 217, 84, 126; --tint-a: #F9EFF2; --tint-b: #FBF4F6; --tint-c: #FDFAFB; }
body[data-audience="wholesaler"] { --accent: #C7871C; --accent-ink: #8E600E; --accent-50: #FBF1DD; --accent-100: #F6E4C1; --accent-rgb: 199, 135, 28; --tint-a: #F9F3E8; --tint-b: #FBF7EF; --tint-c: #FDFBF8; }
body[data-audience="designer"] { --accent: #8F5AE8; --accent-ink: #6C3CC2; --accent-50: #F1EAFD; --accent-100: #E5DAFB; --accent-rgb: 143, 90, 232; --tint-a: #F4EFFB; --tint-b: #F7F4FC; --tint-c: #FBFAFD; }
body[data-audience="agency"] { --accent: #14A085; --accent-ink: #0B7863; --accent-50: #E1F5F1; --accent-100: #CBEDE6; --accent-rgb: 20, 160, 133; --tint-a: #ECF6F4; --tint-b: #F2F9F7; --tint-c: #F9FCFB; }

/* the caption under the piece, and the animation button beside it */
.anim-btn { display: inline-flex; align-items: center; gap: 10px; min-height: 38px; padding: 0 16px 0 6px; border: 1px solid var(--line); border-radius: 999px; background: rgba(255, 255, 255, .7); color: var(--ink); font: 600 .6875rem/1 var(--sans); letter-spacing: .1em; text-transform: uppercase; cursor: pointer; transition: background .2s var(--ease), border-color .2s var(--ease); }
.anim-btn:hover { background: var(--paper); border-color: var(--ink); }
.anim-btn .ai { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--accent); color: #fff; }
.anim-btn[hidden] { display: none; }

/* icon cards with three items */
.swaps + .cta { margin-top: 24px; }

/* a pull quote: the designers page opens with one on a dark plate */
.bq { margin: 0; max-width: 54rem; }
.bq p { text-wrap: balance; }
.bq p { margin: 0; font: 400 clamp(1.875rem, 3.6vw, 3rem)/1.18 var(--serif); letter-spacing: -.01em; color: var(--ink); }
.bq p::before { content: "\201C"; display: block; height: .55em; margin-bottom: 8px; font-size: 1.6em; line-height: 1; color: var(--accent); }
.bq footer { display: flex; align-items: center; gap: 12px; margin-top: 24px; font: 400 .9375rem/1.4 var(--sans); color: var(--ink2); }
.bq + .cta { margin-top: 24px; }

/* ---------- review of 2026-10-03 (11): the retailers page ---------- */
/* The problem: the text beside today's product page, drawn */
.fp { position: relative; margin: 0; display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 16px; padding: 18px; border-radius: var(--r); background: #fff; color: var(--ink); box-shadow: 0 40px 80px -40px rgba(0, 0, 0, .8); }
@media (max-width: 900px) { .fp { margin: 0 8px 18px 18px; } }

/* ---------- review of 2026-10-03 (12): the retailers page ---------- */

/* The problem: the one photo, and three empty tiles for what it cannot show */
.fq { margin: 0; display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 14px; align-items: stretch; }
@media (max-width: 900px) { .fq { max-width: 520px; } }
@media (max-width: 600px) {
  .fq { grid-template-columns: 1fr; }
}

/* ---------- review of 2026-10-03 (13): the retailers' combinations as a sum, and the guide ---------- */
.cx { margin: 32px 0 0; padding: clamp(20px, 3vw, 36px); border-radius: calc(var(--r) + 6px); color: var(--ink);
  background: radial-gradient(700px 320px at 92% 0%, rgba(var(--accent-rgb), .07), transparent 65%), #fff;
  border: 1px solid var(--line2); box-shadow: 0 40px 80px -50px rgba(0, 0, 0, .25); }  /* white, review of 2026-10-03 (14) */
@keyframes cxBump { 40% { transform: scale(1.06); } }
@keyframes dotIn { from { opacity: 0; transform: scale(.4); } }

/* The retailer's workflow beside the guide, drawn as a book */
.book { margin: 0; display: grid; place-items: center; padding: 20px 0 30px; }
.wf { list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 16px; counter-reset: wf; }
.wf li { display: grid; grid-template-columns: 34px minmax(0, 1fr); column-gap: 14px; align-items: start; }

/* ---------- review of 2026-10-03 (15): the manufacturers' sample tray and network ---------- */
.tray { margin: 0; padding: 14px; border-radius: var(--r); background: linear-gradient(160deg, #2b2b30, #1b1b1f); box-shadow: inset 0 2px 10px rgba(0, 0, 0, .6), 0 40px 80px -40px rgba(0, 0, 0, .8); }
@media (max-width: 900px) { .tray { max-width: 520px; } }
@media (max-width: 480px) { .tray { padding: 10px; } }

/* designers: a chat */
.chat { margin: 0; max-width: 400px; justify-self: center; width: 100%; border-radius: 28px; padding: 14px; background: #1c1c20; border: 1px solid rgba(255, 255, 255, .12);
  box-shadow: 0 40px 80px -40px rgba(0, 0, 0, .8); }

/* wholesalers: a memo sheet */
.memo { margin: 0; border-radius: var(--r); background: #fff; padding: 18px 18px 14px; box-shadow: 0 40px 80px -40px rgba(0, 0, 0, .8); color: var(--ink); }
@media (max-width: 900px) { .memo { max-width: 520px; } }

/* developers: the client site's task list */
.todo { margin: 0; border-radius: var(--r); background: #1c1c20; border: 1px solid rgba(255, 255, 255, .12); padding: 18px; box-shadow: 0 40px 80px -40px rgba(0, 0, 0, .8); color: #f2f2f2; }
@media (max-width: 900px) { .todo { max-width: 520px; } }
/* Ring Configurator: a folder of ring files */
.fl { margin: 0; border-radius: var(--r); background: #fff; color: var(--ink); overflow: hidden; box-shadow: 0 40px 80px -40px rgba(0, 0, 0, .8); }
@media (max-width: 900px) { .fl { max-width: 520px; } }
/* Embed: product pages with pasted codes */
.cd { margin: 0; border-radius: var(--r); background: #fff; color: var(--ink); padding: 16px 16px 12px; box-shadow: 0 40px 80px -40px rgba(0, 0, 0, .8); }
@media (max-width: 900px) { .cd { max-width: 520px; } }
/* Embed: the live ring over the code that runs it */
@keyframes emc-hit { from { background: rgba(var(--accent-rgb), .55); } to { background: rgba(var(--accent-rgb), .14); } }
/* the configurator heroes' markers (bubbles.js): named rows, text chips for sizes */
.chip3d:disabled { opacity: .35; cursor: not-allowed; }
.cfgl.is-busy .chip3d { opacity: .55; pointer-events: none; }
.chip3d.chip3d--geo i img { width: 40px; height: 40px; object-fit: contain; display: block; }
.hero3d--cfg .ring { background: transparent; }

/* ---------- eighteenth pass (2026-10-04): the audience pages' FAQ, an accordion beside the heading ---------- */
.qa { border-top: 1px solid var(--line); }
@keyframes qa-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

/* ---------- twentieth pass (2026-10-04): a marker card's rows on one column grid ----------
   The card's rows were centred one by one, and the metal chips (32 px) are narrower than the shank and shape chips
   (48 px), so the columns did not line up. Every row now uses 48 px columns from the card's left edge: a metal sits
   above a shank, a stone above a shape. */
.pop.pop--card:not(.pop--named).is-open { align-items: stretch; gap: 4px; padding: 8px 10px; }
.pop.pop--card:not(.pop--named) .prow { display: grid; grid-auto-flow: column; grid-auto-columns: 48px; justify-content: start; justify-items: center; align-items: center; gap: 4px; width: 100%; }
.pop.pop--card:not(.pop--named) .chip3d:not(.chip3d--geo) { width: 44px; height: 44px; }
.pop.pop--card:not(.pop--named) .chip3d:not(.chip3d--geo) i { width: 28px; height: 28px; }
.pop.pop--card .prow[hidden], .hero3d:not(.retail) .pop.pop--card .prow[data-retail] { display: none; }

/* ---------- twenty-second pass (2026-10-04): the Wedding Band Builder's X-ray markers (xray.js) ----------
   Twenty-seventh pass (2026-10-05): black and white ("make the style Black and white"): black glass at half opacity,
   white lines, no blue; metals as filled discs.
   Prashant: "Let the popup UI be 50% transparent ... Try X ray kind of style", icons instead of words, nothing on the
   band, and motion when it opens. Dark glass at half opacity with a faint film grid; every icon is a bright line on a
   faint body (class xf), as on a radiograph. The card is a narrow rail beside the band (the band slides to make room);
   it opens top to bottom behind a scan line, and its chips come in one after another. While the band rebuilds, the
   scan line runs on. */
.xr { --xr-ink: #ffffff; --xr-dim: rgba(255, 255, 255, .86); --xr-glow: rgba(255, 255, 255, .3); --xr-line: rgba(255, 255, 255, .34); }
.xr svg { display: block; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; overflow: visible; }
.xr svg .xf { fill: currentColor; fill-opacity: .24; }
.xr svg .t { stroke-width: 1; opacity: .85; }
.xr svg .dots circle, .xr svg .dot { fill: currentColor; stroke: none; }
.xr-leads { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.xr-lead { fill: none; stroke: #161616; stroke-opacity: .62; stroke-width: 1.4; stroke-dasharray: 1.5 4; stroke-linecap: round; stroke-linejoin: round; transition: opacity .3s ease; }
.xr-seed { fill: #161616; stroke: rgba(255, 255, 255, .85); stroke-width: 1.2; transition: opacity .3s ease; }

/* the markers: a glass disc with the icon of what it changes */
.xr-spot { position: absolute; left: 0; top: 0; z-index: 3; display: grid; place-items: center; width: 34px; height: 34px; margin: -17px 0 0 -17px; padding: 0; border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .6); background: rgba(0, 0, 0, .5); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); color: var(--xr-ink); cursor: pointer; pointer-events: auto;
  box-shadow: 0 0 0 4px rgba(255, 255, 255, .1), 0 8px 20px -8px rgba(0, 0, 0, .55); opacity: 0; transform: scale(.4);
  transition: opacity .45s ease calc(var(--i, 0) * 90ms), transform .55s cubic-bezier(.2, .9, .25, 1.15) calc(var(--i, 0) * 90ms), box-shadow .2s ease, background-color .2s ease; }
.xr-spot svg { width: 20px; height: 20px; filter: drop-shadow(0 0 2px var(--xr-glow)); }
.xr-spot svg.wide { width: 26px; height: 11px; }
.xr-spot.is-on { opacity: 1; transform: none; }
.xr-spot::after { content: ""; position: absolute; inset: -1px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .7); opacity: 0; animation: xr-ping 2.8s ease-out infinite calc(1.2s + var(--i, 0) * .4s); pointer-events: none; }
.xr-spot:hover, .xr-spot:focus-visible { background: rgba(24, 24, 24, .62); box-shadow: 0 0 0 5px rgba(255, 255, 255, .18), 0 0 18px rgba(255, 255, 255, .45); }
.xr-spot:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
.xr-spot.is-open { background: rgba(255, 255, 255, .28); border-color: var(--xr-ink); box-shadow: 0 0 0 4px rgba(255, 255, 255, .2), 0 0 20px rgba(255, 255, 255, .55); }
.xr-spot.is-open::after, .xr.has-open .xr-spot::after { animation: none; }
.xr-spot.is-dim { opacity: .38; }
.xr-spot.is-dim:hover { opacity: .9; }
@keyframes xr-ping { 0% { transform: scale(1); opacity: .8; } 70%, 100% { transform: scale(1.75); opacity: 0; } }

/* the card */
.xr-card { position: absolute; left: 0; top: 0; z-index: 4; padding: 8px; border-radius: 16px; color: var(--xr-ink); pointer-events: auto;
  background-color: rgba(0, 0, 0, .5);
  background-image: linear-gradient(rgba(255, 255, 255, .055) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .055) 1px, transparent 1px);
  background-size: 8px 8px; -webkit-backdrop-filter: blur(8px) saturate(120%); backdrop-filter: blur(8px) saturate(120%);
  border: 1px solid var(--xr-line);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .04), inset 0 0 26px rgba(255, 255, 255, .1), 0 22px 44px -22px rgba(0, 0, 0, .6);
  visibility: hidden; opacity: 0; transform: translateX(calc(var(--dir, -1) * -10px)) scale(.97); transform-origin: right 22px;
  clip-path: inset(0 0 100% 0);
  transition: opacity .22s ease, transform .3s ease, clip-path .3s ease, visibility 0s linear .3s; }
.xr-card--r { transform-origin: left 22px; }
.xr-card--b { transform-origin: center top; }
/* a phone (twenty-fifth pass): no room beside the band and the canvas stays put, so the rail lies flat under it */
.xr-card--strip { max-width: calc(100vw - 32px); }
.xr-card--strip .xr-body { flex-direction: column; align-items: stretch; gap: 8px; }
.xr-card--strip .xr-rail { flex-direction: row; justify-content: center; padding: 0 0 6px; border-right: 0; border-bottom: 1px solid rgba(255, 255, 255, .16); }
.xr-card--strip .xr-opts { display: flex; justify-content: center; }
.xr-card--strip .xr-col { flex-direction: row; justify-content: flex-start; }
.xr-card--strip .xr-head { width: 150px; min-width: 0; margin: 0 auto 8px; }
.xr-card--strip .xr-chip--wide { width: 68px; }
.xr-card.xr-card--strip .xr-label { position: static; left: auto; right: auto; transform: none; margin: 0 0 8px; padding: 0 0 7px; border: 0; border-bottom: 1px solid rgba(255, 255, 255, .2); border-radius: 0; background: none; -webkit-backdrop-filter: none; backdrop-filter: none; text-align: center; white-space: normal; }
.xr-card.is-open { visibility: visible; opacity: 1; transform: none; clip-path: inset(-48px -320px -48px -320px);  /* open: the label above and the tip below show too */
  transition: opacity .25s ease, transform .5s cubic-bezier(.2, .9, .2, 1), clip-path .6s cubic-bezier(.2, .85, .2, 1), visibility 0s; }
.xr-card::after { content: ""; position: absolute; left: 8px; right: 8px; top: 0; height: 2px; border-radius: 2px; pointer-events: none; opacity: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .95), transparent); box-shadow: 0 0 12px 2px rgba(255, 255, 255, .6); }
.xr-card.is-open::after { animation: xr-scan .7s cubic-bezier(.3, .7, .2, 1) .04s 1 both; }
.xr-card.is-open.is-busy::after { animation: xr-scan 1.05s ease-in-out infinite; }
@keyframes xr-scan { 0% { top: 0; opacity: 0; } 12% { opacity: 1; } 88% { opacity: 1; } 100% { top: calc(100% - 2px); opacity: 0; } }

.xr-body { display: flex; gap: 6px; align-items: flex-start; }
/* twenty-fifth pass: one line naming what the band shows now, in a pill over the rail (the rail stays narrow) */
.xr-label { position: absolute; bottom: calc(100% + 6px); left: 0; margin: 0; padding: 5px 9px; border-radius: 8px; background: rgba(0, 0, 0, .62); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border: 1px solid var(--xr-line); font: 600 .6875rem/1.2 var(--sans); letter-spacing: .02em; color: var(--xr-ink); white-space: nowrap; pointer-events: none; }
.xr-card--r .xr-label { left: auto; right: 0; }
.xr-card--b .xr-label { left: 50%; transform: translateX(-50%); }
.xr-col { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.xr-col[hidden], .xr-tab[hidden], .xr-panel[hidden] { display: none; }
.xr-colh { display: grid; place-items: center; width: 40px; height: 28px; color: var(--xr-dim); }
.xr-colh svg { width: 22px; height: 22px; }
.xr-grid { display: grid; grid-template-columns: repeat(var(--cols, 1), auto); gap: 3px; justify-items: center; }
.xr-rail { display: flex; flex-direction: column; gap: 3px; padding-right: 6px; border-right: 1px solid rgba(255, 255, 255, .16); }
.xr-opts { min-width: 30px; }

.xr-chip, .xr-tab { position: relative; display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 9px; background: transparent; color: var(--xr-dim); cursor: pointer; transition: background-color .2s ease, color .2s ease, box-shadow .2s ease; }
.xr-chip svg, .xr-tab svg { width: 24px; height: 24px; }
.xr-chip--wide { width: 72px; height: 36px; }
.xr-chip--wide svg { width: 60px; height: 23px; }
.xr-chip--txt { width: 40px; height: 30px; font: 600 .8125rem/1 var(--sans); font-variant-numeric: tabular-nums; letter-spacing: .02em; }
.xr-chip:hover, .xr-tab:hover { color: var(--xr-ink); background: rgba(255, 255, 255, .1); }
.xr-chip:hover svg, .xr-tab:hover svg, .xr-chip[aria-checked="true"] svg, .xr-tab[aria-selected="true"] svg { filter: drop-shadow(0 0 2.5px var(--xr-glow)); }
.xr-chip[aria-checked="true"] { color: #fff; background: rgba(255, 255, 255, .17); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .78), 0 0 14px rgba(255, 255, 255, .32); }
.xr-tab[aria-selected="true"] { color: #fff; background: rgba(255, 255, 255, .12); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .4); }
.xr-chip:focus-visible, .xr-tab:focus-visible, .xr-sec:focus-visible { outline: 2px solid var(--xr-ink); outline-offset: 1px; }
.xr-chip:disabled { opacity: .28; cursor: not-allowed; background: none; box-shadow: none; }
.xr-ring { display: block; width: 24px; height: 24px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, var(--a), var(--b) 55%, var(--c)); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .25); opacity: .92; }  /* twenty-seventh pass: a filled disc, not a ring */
.xr-chip--ring[aria-checked="true"] .xr-ring { opacity: 1; }
.cfgl.is-busy .xr-chip, .cfgl.is-busy .xr-sec { pointer-events: none; opacity: .55; }

/* the chips come in one after another: when the card opens, and when a tab changes */
.xr-card.is-open .xr-chip, .xr-card.is-open .xr-tab, .xr-card.is-open .xr-colh { animation: xr-in .42s cubic-bezier(.2, .9, .2, 1) both; animation-delay: calc(110ms + var(--i, 0) * 24ms); }
.xr-card.is-open .xr-panel.is-on .xr-chip { animation-name: xr-in2; }
@keyframes xr-in { from { opacity: 0; transform: translateY(6px) scale(.9); } to { opacity: 1; transform: none; } }
@keyframes xr-in2 { from { opacity: 0; transform: translateX(-5px) scale(.92); } to { opacity: 1; transform: none; } }

/* the head of the metals card: the band's cross-section */
.xr-head { position: relative; box-sizing: border-box; width: 0; min-width: 100%; margin: 0 0 8px; padding: 2px 2px 0; }  /* the body sets the width */
.xr-head svg { width: 100%; height: auto; }
.xr-head .xr-part { fill-opacity: .58; stroke: none; transition: fill-opacity .25s ease; }
.xr-head .xr-part.is-sel { fill-opacity: .92; }
.xr-head .xr-groove { stroke: rgba(0, 0, 0, .9); stroke-width: 1.3; }
.xr-head .xr-outline { stroke: var(--xr-ink); stroke-width: 1; filter: drop-shadow(0 0 2px var(--xr-glow)); }
.xr-head .xr-stone { fill: rgba(255, 255, 255, .5); stroke: #fff; stroke-width: .6; }
.xr-head .xr-seat { stroke: var(--xr-ink); stroke-width: .7; fill: rgba(0, 0, 0, .55); }
.xr-sec { position: absolute; top: 0; bottom: 0; padding: 0; border: 0; border-radius: 6px; background: transparent; cursor: pointer; }
.xr-sec[aria-pressed="true"] { box-shadow: inset 0 -2px 0 var(--xr-ink); }
.xr-sec:hover { background: rgba(255, 255, 255, .1); }

.xr-foot { margin-top: 4px; text-align: center; font: 600 .5625rem/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--xr-dim); }
.xr-tip { position: absolute; left: 50%; top: calc(100% + 6px); padding: 4px 8px; border-radius: 6px; background: rgba(0, 0, 0, .72); color: var(--xr-ink); font: 600 .625rem/1 var(--sans); letter-spacing: .04em; white-space: nowrap; pointer-events: none; opacity: 0; transform: translate(-50%, -3px); transition: opacity .15s ease, transform .15s ease; }
.xr-tip.is-on { opacity: 1; transform: translate(-50%, 0); }
@media (prefers-reduced-motion: reduce) {
  .xr-spot, .xr-card, .xr-card.is-open { transition: none; }
  .xr-spot::after, .xr-card::after, .xr-card.is-open .xr-chip, .xr-card.is-open .xr-tab, .xr-card.is-open .xr-colh { animation: none !important; }
}

/* ---------- twentieth pass (2026-10-04): the live piece's loading bar (loadbar.js) ---------- */
.ldb { position: absolute; left: 50%; bottom: 14px; z-index: 4; width: min(220px, 64%); transform: translateX(-50%); display: grid; justify-items: center; gap: 8px; opacity: 0; transition: opacity .45s var(--ease); pointer-events: none; }
.ldb.is-on { opacity: 1; }
.ldb-t { font: 500 .6875rem/1 var(--sans); letter-spacing: .03em; color: var(--ink2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ldb-track { position: relative; width: 100%; height: 3px; border-radius: 2px; background: rgba(118, 118, 140, .18); overflow: hidden; }
.ldb-track i { position: absolute; inset: 0; background: var(--ink); border-radius: inherit; transform-origin: left center; transform: scaleX(0); transition: transform .35s linear; }
.ring.has-ldb .ring-status { display: none; }
.ring.has-ldb.is-busy .ring-status, .hero3d.is-busy .ring.has-ldb .ring-status { display: block; }
@media (prefers-reduced-motion: reduce) { .ldb, .ldb-track i { transition: none; } }

/* ---------- twentieth pass (2026-10-04): the home hero's main message and its "Made for" panel ----------
   The heading, the sub-line and the buttons never change. A chip switches only the panel's line and links (and the
   caption under the piece). Every variant sits in one grid cell, so the panel keeps its tallest height: no jump. */
/* twenty-fourth pass (2026-10-04): a pick swaps the heading, the sub-line, the line under the tabs and the caption.
   The variants of each share one grid cell (the hero keeps the height of the longest; nothing moves), and one
   attribute on <html> says which shows. The heading sits at the bottom of its cell, so spare height goes above it. */
.hv { grid-area: 1 / 1; opacity: 0; visibility: hidden; transition: opacity .35s var(--ease), visibility 0s linear .35s; }
html:not([data-hero-aud]) :is(.hv, .hfor-v, .cap-v)[data-v="default"],
html[data-hero-aud="manufacturer"] :is(.hv, .hfor-v, .cap-v)[data-v="manufacturer"],
html[data-hero-aud="retailer"] :is(.hv, .hfor-v, .cap-v)[data-v="retailer"],
html[data-hero-aud="wholesaler"] :is(.hv, .hfor-v, .cap-v)[data-v="wholesaler"],
html[data-hero-aud="designer"] :is(.hv, .hfor-v, .cap-v)[data-v="designer"],
html[data-hero-aud="agency"] :is(.hv, .hfor-v, .cap-v)[data-v="agency"] { opacity: 1; visibility: visible; transition: opacity .35s var(--ease), visibility 0s; }
/* The tabs are their own grid item: under the buttons on a wide screen; on a narrow one, right under the heading, so
   the heading a pick changes is in view (twenty-fourth pass; under the buttons it was below the piece, off screen). */
@media (prefers-reduced-motion: reduce) { .hv { transition: none !important; } }

/* ---------- twenty-first pass (2026-10-04): the Ring Configurator page's product tour and rules ---------- */
.tr { display: grid; grid-template-columns: minmax(260px, 4fr) minmax(0, 8fr); gap: 32px; align-items: start; }
@keyframes tr-in { from { opacity: 0; } to { opacity: 1; } }
@media (max-width: 900px) {
  .tr { grid-template-columns: 1fr; gap: 16px; }
}