/* Layout: a quiet review shell (tabs, tags) around the brand's own surfaces, which stay in the decided light palette whatever the viewer's theme. */
:root {
  /* Shell: the review frame */
  --shell-bg: #E8E6E1;
  --shell-panel: #F3F2EE;
  --shell-fg: #2C2C2C;
  --shell-muted: #64615C;
  --shell-line: #D2CFC9;
  --shell-shadow: rgba(30, 28, 25, 0.28);

  /* NINE BEFORE: the palette decided 2026-09-27 */
  --nb-ground: #F6F5F2;
  --nb-ink: #2C2C2C;
  --nb-ink2: #5E5C59;
  --nb-stone: #CFCCC6;
  --nb-brick: #EE7828;
  --nb-line: #DEDBD5;
  --nb-field: #FCFBF9;
  --nb-field-line: #B8B5AF;
  --nb-on-ink2: #A9A6A0;
  --nb-ph-a: #ECEAE5;
  --nb-ph-b: #F3F1ED;
  --nb-ph-line: #BDB9B2;

  /* A generic phone profile, for the grid */
  --ig-bg: #FFFFFF;
  --ig-fg: #151515;
  --ig-muted: #6F6F6F;
  --ig-line: #DCDCDC;
  --ig-btn: #EFEFEF;

  /* Review tags: annotation colours, never brand colours */
  --t-real: #2E6A4E;
  --t-gen: #5A4AA5;
  --t-des: #3B5878;
  --t-miss: #8A5A0B;
  --t-on: #FFFFFF;
  --fold: #3B5878;

  --f: "Archivo", "Helvetica Neue", Arial, sans-serif;
  /* The display face: headlines, the big lines, the captions. Swapped by the Type switch. */
  --fd: var(--f);
  --fd-wdth: 100%;
  --fd-wght: 500;
  --fd-track: 0em;
  --ds: 1;
  --nb-dark-ph-a: #343433;
  --nb-dark-ph-b: #3A3A39;
  --nb-dark-ph-line: #5B5A57;
  /* Section 2's notification cards, on Graphite */
  --nz-card: rgba(255, 255, 255, 0.10);
  --nz-line: rgba(255, 255, 255, 0.10);
  --nz-fg: #F3F2EF;
  --nz-muted: rgba(243, 242, 239, 0.55);
  --nz-thumb: rgba(207, 204, 198, 0.28);
  --f-sys: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
body.type-wide { --fd-wdth: 118%; --fd-track: 0.012em; --ds: 0.86; }
body.type-news { --fd: "Newsreader", Georgia, "Times New Roman", serif; --fd-wght: 400; --fd-track: 0.008em; --ds: 1.08; }
body.type-caslon { --fd: "Libre Caslon Display", "Libre Caslon Text", Georgia, serif; --fd-wght: 400; --fd-track: 0.012em; --ds: 1.1; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --shell-bg: #171716;
    --shell-panel: #222220;
    --shell-fg: #ECEAE5;
    --shell-muted: #A6A39D;
    --shell-line: #3A3936;
    --shell-shadow: rgba(0, 0, 0, 0.6);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --shell-bg: #171716;
  --shell-panel: #222220;
  --shell-fg: #ECEAE5;
  --shell-muted: #A6A39D;
  --shell-line: #3A3936;
  --shell-shadow: rgba(0, 0, 0, 0.6);
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; background: var(--shell-bg); color: var(--shell-fg); font-family: var(--f); font-size: 15px; line-height: 1.5; -webkit-font-smoothing: antialiased; }
button { font-family: inherit; }
:focus-visible { outline: 2px solid var(--fold); outline-offset: 2px; }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- Shell ---------- */
.shell-head { max-width: 1480px; margin: 0 auto; padding-inline: 16px; padding-block: 22px 14px; display: grid; gap: 14px; }
.shell-row { display: flex; flex-wrap: wrap; gap: 14px 28px; align-items: flex-end; justify-content: space-between; }
.shell-title { display: grid; gap: 8px; }
.shell-title svg { width: 158px; height: auto; display: block; color: var(--shell-fg); }
.shell-title h1 { margin: 0; font-size: 12px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--shell-muted); }
.shell-intro { margin: 0; max-width: 62ch; color: var(--shell-muted); font-size: 14px; }
.controls { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; }
.ctl { display: inline-flex; align-items: center; gap: 8px; }
.ctl-label { font-size: 12px; color: var(--shell-muted); }
.seg { display: inline-flex; border: 1px solid var(--shell-line); border-radius: 999px; padding: 2px; background: var(--shell-panel); }
.seg button, .pill-btn { border: 0; background: none; cursor: pointer; font: 500 13px/1 var(--f); padding: 8px 12px; border-radius: 999px; color: var(--shell-muted); }
.seg button[aria-pressed="true"] { background: var(--shell-fg); color: var(--shell-bg); }
.pill-btn { border: 1px solid var(--shell-line); background: var(--shell-panel); color: var(--shell-fg); padding: 9px 14px; }
.legend { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; font-size: 12.5px; color: var(--shell-muted); }
.legend > span { display: inline-flex; align-items: center; gap: 6px; }

.tabs-wrap { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 30; background: var(--shell-bg); border-bottom: 1px solid var(--shell-line); padding-inline: 16px; padding-block: 8px; }
.tabs { max-width: 1480px; margin: 0 auto; display: flex; gap: 4px; }
.tabs button { flex: 1 1 0; border: 1px solid transparent; background: none; cursor: pointer; font: 500 14px/1 var(--f); padding: 10px 8px; border-radius: 999px; color: var(--shell-muted); }
.tabs button[aria-selected="true"] { background: var(--shell-fg); color: var(--shell-bg); }
@media (min-width: 700px) { .tabs button { flex: 0 0 auto; padding: 10px 18px; } }

main { max-width: 1480px; margin: 0 auto; padding-inline: 16px; padding-block: 24px 80px; }
.panel-note { margin: 0 0 18px; color: var(--shell-muted); font-size: 13.5px; max-width: 70ch; }

/* Tags */
.tag { display: inline-flex; align-items: center; gap: 4px; font: 600 9.5px/1 var(--f); letter-spacing: 0.07em; text-transform: uppercase; padding: 5px 7px 4px; border-radius: 3px; color: var(--t-on); white-space: nowrap; }
.tag.real { background: var(--t-real); }
.tag.gen { background: var(--t-gen); }
.tag.des { background: var(--t-des); }
.tag.miss { background: var(--t-miss); }
.tag.note { background: rgba(28, 28, 28, 0.72); text-transform: none; letter-spacing: 0.01em; font-weight: 500; font-size: 10.5px; white-space: normal; line-height: 1.25; }
.ctag { display: inline-block; font: 600 9px/1 var(--f); letter-spacing: 0.07em; text-transform: uppercase; padding: 4px 6px 3px; border-radius: 3px; border: 1px solid currentColor; background: var(--nb-ground); vertical-align: 0.3em; margin-left: 6px; white-space: nowrap; }
.ctag.ok { color: var(--t-real); }
.ctag.new { color: var(--t-des); }
.ctag.test { color: var(--t-miss); }
.tagset { position: absolute; top: 8px; left: 8px; right: 8px; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; z-index: 3; pointer-events: none; }
body.tags-off .tag, body.tags-off .ctag, body.tags-off .tagset, body.tags-off .fold { display: none; }

/* ---------- Phone tab ---------- */
.phone-layout { display: grid; gap: 24px; justify-content: center; grid-template-columns: minmax(0, 390px); }
.phone-aside { display: none; }
@media (min-width: 960px) {
  .phone-layout { grid-template-columns: 250px 390px; align-items: start; gap: 40px; }
  .phone-aside { display: grid; gap: 14px; position: sticky; top: 76px; font-size: 13.5px; color: var(--shell-muted); }
  .phone-aside h2 { margin: 0; font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--shell-fg); font-weight: 600; }
  .phone-aside ol { margin: 0; padding: 0; list-style: none; display: grid; gap: 2px; }
  .phone-aside a { display: grid; grid-template-columns: 22px 1fr; padding: 6px 0; color: var(--shell-fg); text-decoration: none; border-top: 1px solid var(--shell-line); }
  .phone-aside a span { color: var(--shell-muted); font-variant-numeric: tabular-nums; }
  .phone-aside a:hover { color: var(--shell-muted); }
}
.device { position: relative; width: 100%; background: var(--nb-ground); border-radius: 28px; overflow: hidden; overflow: clip; box-shadow: 0 0 0 1px var(--shell-line), 0 30px 60px -34px var(--shell-shadow); }
@media (max-width: 480px) {
  .phone-layout { grid-template-columns: minmax(0, 1fr); }
  .device { margin-inline: -16px; width: calc(100% + 32px); border-radius: 0; box-shadow: none; }
}
.fold { position: absolute; left: 0; right: 0; height: 0; border-top: 1.5px dashed var(--fold); z-index: 6; pointer-events: none; }
.fold span { position: absolute; right: 8px; top: 4px; font: 600 9.5px/1 var(--f); letter-spacing: 0.06em; text-transform: uppercase; color: var(--t-on); background: var(--fold); padding: 5px 7px 4px; border-radius: 3px; }

/* ---------- Desktop tab ---------- */
.scale-box { position: relative; overflow: hidden; border-radius: 10px; box-shadow: 0 0 0 1px var(--shell-line), 0 30px 60px -34px var(--shell-shadow); background: var(--nb-ground); }
.scale-in { position: absolute; top: 0; left: 0; width: 1440px; transform-origin: 0 0; }
.scale-in .fold span { font-size: 13px; padding: 7px 10px 6px; }

/* ---------- The landing page (one markup, two widths, by container query) ---------- */
.lp { container: lp / inline-size; position: relative; background: var(--nb-ground); color: var(--nb-ink); font-family: var(--f); font-size: 16px; line-height: 1.55; }
.lp h1, .lp h2, .lp p, .lp figure, .lp ol, .lp dl, .lp dd, .lp blockquote { margin: 0; }
.lp img { display: block; width: 100%; height: 100%; object-fit: cover; }
.lp-page { position: relative; }
.lp-page > [id] { scroll-margin-top: 64px; }
.lp-head { height: 56px; display: flex; align-items: center; padding-inline: 20px; }
.lp-wm { display: block; width: 148px; color: var(--nb-ink); }
.lp-wm svg, .lp-close svg { display: block; width: 100%; height: auto; }

.lp-hero-img { position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: var(--nb-stone); }
.lp-hero-img img { object-position: 50% 66%; }
.lp-hero-copy { padding: 24px 20px 34px; display: flex; flex-direction: column; gap: 14px; }
.lp-h1, .lp-h2, .lp-big, .lp-card figcaption, .ig-dark span, .ig-stone span { font-family: var(--fd); font-stretch: var(--fd-wdth); font-weight: var(--fd-wght); }
.lp-h1 { font-size: calc(32px * var(--ds)); line-height: 1.06; letter-spacing: calc(-0.022em + var(--fd-track)); text-wrap: balance; }
.lp-h1 .hB { display: none; }
body.hero-b .lp-h1 .hA { display: none; }
body.hero-b .lp-h1 .hB { display: inline; }
body.hero-b .lp-h1 { font-size: calc(76px * var(--ds)); line-height: 0.95; letter-spacing: calc(-0.045em + var(--fd-track)); }
.lp-sub { color: var(--nb-ink2); font-size: 16px; max-width: 32em; text-wrap: pretty; }
.lp-sub.lp-claim { color: var(--nb-ink); }
.lp-form { display: flex; gap: 8px; margin-top: 4px; }
.lp-form input { flex: 1 1 auto; min-width: 0; height: 50px; padding: 0 14px; border: 1px solid var(--nb-field-line); border-radius: 2px; background: var(--nb-field); color: var(--nb-ink); font: 400 16px var(--f); }
.lp-form input::placeholder { color: var(--nb-ink2); }
.lp-form button { flex: 0 0 auto; height: 50px; padding: 0 18px; border: 0; border-radius: 2px; background: var(--nb-ink); color: var(--nb-ground); font: 500 15px var(--f); cursor: pointer; white-space: nowrap; }
.lp-form button:hover { background: #1F1F1F; }
.lp-form :focus-visible { outline: 2px solid var(--nb-ink); outline-offset: 2px; }
.lp-fine { font-size: 12.5px; color: var(--nb-ink2); }
.lp-fine.flash { color: var(--nb-ink); }

.lp-sec { padding: 76px 20px; display: grid; gap: 28px; border-top: 1px solid var(--nb-line); }
.lp-a, .lp-b, .lp-full { display: grid; gap: 18px; align-content: start; min-width: 0; }
.lp-h2 { font-size: calc(28px * var(--ds)); line-height: 1.1; letter-spacing: calc(-0.018em + var(--fd-track)); text-wrap: balance; max-width: 19ch; }
.lp-body { font-size: 17px; max-width: 34em; text-wrap: pretty; }
.lp-media2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.lp-fig { position: relative; aspect-ratio: 3 / 4; overflow: hidden; background: var(--nb-stone); }

.ph { position: relative; aspect-ratio: 3 / 4; display: flex; flex-direction: column; justify-content: flex-end; gap: 4px; padding: 14px; background: repeating-linear-gradient(135deg, var(--nb-ph-a) 0 9px, var(--nb-ph-b) 9px 18px); outline: 1px dashed var(--nb-ph-line); outline-offset: -1px; color: var(--nb-ink2); font-size: 13px; line-height: 1.35; }
.ph b { color: var(--nb-ink); font-weight: 600; font-size: 13.5px; }
.ph small { font-size: 11.5px; }
.ph.play::after { content: ""; position: absolute; left: 50%; top: 42%; width: 0; height: 0; transform: translate(-30%, -50%); border-style: solid; border-width: 13px 0 13px 22px; border-color: transparent transparent transparent var(--nb-ink2); opacity: 0.55; }
.ph.wide { aspect-ratio: 4 / 5; }

.lp-rail { display: grid; grid-auto-flow: column; grid-auto-columns: 72%; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; margin-inline: -20px; padding-inline: 20px; scroll-padding-inline: 20px; padding-bottom: 10px; scrollbar-width: thin; }
.lp-card { scroll-snap-align: start; display: grid; gap: 10px; align-content: start; }
.lp-card .lp-fig, .lp-card .ph { aspect-ratio: 3 / 4; }
.lp-card figcaption { display: flex; gap: 10px; align-items: baseline; font-size: calc(15.5px * var(--ds)); letter-spacing: calc(-0.005em + var(--fd-track)); }
.lp-card .n { font-family: var(--f); font-stretch: 100%; font-size: 11.5px; font-weight: 500; color: var(--nb-ink2); font-variant-numeric: tabular-nums; letter-spacing: 0.06em; }

.lp-steps { list-style: none; padding: 0; counter-reset: step; display: grid; }
.lp-steps li { counter-increment: step; display: grid; grid-template-columns: 30px 1fr; padding: 14px 0; border-top: 1px solid var(--nb-line); font-size: 17px; }
.lp-steps li:last-child { border-bottom: 1px solid var(--nb-line); }
.lp-steps li::before { content: counter(step); color: var(--nb-ink2); font-size: 12.5px; font-variant-numeric: tabular-nums; padding-top: 4px; }
.lp-safe { font-size: 13.5px; color: var(--nb-ink2); max-width: 34em; }

.lp-why { background: var(--nb-stone); border-top: 0; }
.lp-why + .lp-sec { border-top: 0; }
.lp-big { font-size: calc(30px * var(--ds)); line-height: 1.12; letter-spacing: calc(-0.02em + var(--fd-track)); max-width: 15ch; text-wrap: balance; }
.lp-qa { font-size: 17px; max-width: 24em; }
.lp-analog { font-weight: 500; }

/* Section 2, the full head: a phone-style notification stack (no app names or icons), cleared by the ring's nine clicks. */
.lp-noise { background: var(--nb-ink); color: var(--nb-ground); border-top: 0; }
.lp-noise + .lp-sec { border-top: 0; }
.nz-wrap { display: grid; gap: 30px; }
.nz-a, .nz-b { display: grid; gap: 14px; align-content: start; min-width: 0; }
.nz-b { justify-items: center; text-align: center; }
.nz-tags { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.nz-stack { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.nz-card { background: var(--nz-card); border: 1px solid var(--nz-line); border-radius: 18px; padding: 11px 14px 12px; font-family: var(--f-sys); color: var(--nz-fg); transition: opacity 320ms ease, transform 320ms ease; }
.nz-card.gone { opacity: 0; transform: translateX(28px) scale(0.98); visibility: hidden; transition: opacity 320ms ease, transform 320ms ease, visibility 0s 320ms; }
.nz-top { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; }
.nz-top b { font-weight: 600; font-size: 13px; letter-spacing: 0.01em; }
.nz-top span { font-size: 12px; color: var(--nz-muted); white-space: nowrap; }
.nz-card p { margin: 3px 0 0; font-size: 15px; line-height: 1.35; }
.nz-dial { border: 0; background: none; padding: 6px; cursor: pointer; width: 172px; height: 172px; border-radius: 50%; color: var(--nb-ground); }
.nz-dial svg { width: 100%; height: 100%; display: block; overflow: visible; }
.nz-dial:focus-visible { outline: 2px solid var(--nb-ground); outline-offset: 4px; }
.nz-pos circle { fill: var(--nz-muted); }
.nz-band { fill: none; stroke: currentColor; stroke-width: 7; }
.nz-dot { fill: currentColor; stroke: var(--nb-ink); stroke-width: 2; }
.nz-rot { transform-box: view-box; transform-origin: 60px 60px; transition: transform 260ms cubic-bezier(.2,.7,.2,1); }
.nz-thumb { fill: var(--nz-thumb); }
.nz-hint { margin: 0; font-size: 14px; color: var(--nb-on-ink2); }
.nz-end { margin: 0; font-family: var(--fd); font-stretch: var(--fd-wdth); font-weight: var(--fd-wght); font-size: calc(28px * var(--ds)); line-height: 1.1; letter-spacing: calc(-0.018em + var(--fd-track)); }
.nz-again { border: 1px solid var(--nz-line); background: none; color: var(--nb-ground); font: 500 13px var(--f); padding: 8px 14px; border-radius: 999px; cursor: pointer; }
@media (prefers-reduced-motion: reduce) { .nz-card, .nz-card.gone, .nz-rot { transition: none; } }
/* Motion mock: a blurred wallpaper behind the stack, so the cards read as glass on a phone. */
.nz-a { position: relative; isolation: isolate; }
.nz-wall { position: absolute; inset: 34px -8px -8px; z-index: -1; border-radius: 26px; overflow: hidden; background: #3a3734; }
.nz-wall img { width: 100%; height: 100%; object-fit: cover; filter: blur(28px) saturate(1.15) brightness(0.62); transform: scale(1.2); }
.nz-card { background: rgba(255, 255, 255, 0.15); border: 1px solid rgba(255, 255, 255, 0.18); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 6px 18px -10px rgba(0, 0, 0, 0.5); -webkit-backdrop-filter: blur(18px) saturate(1.4); backdrop-filter: blur(18px) saturate(1.4); }
.nz-stack { padding: 8px; }

/* Section 2, scroll-driven (motion mock): the section is a tall track; the scene stays on screen while you scroll through it. */
.lp-noise.scrolly { display: block; height: calc(100vh - var(--stick-top) + 1300px); height: calc(100svh - var(--stick-top) + 1300px); padding-block: 0; padding-inline: 0; }
.lp-noise .nz-a { position: relative; }
.lp-noise .nz-end { position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); margin: 0; text-align: center; z-index: 2; pointer-events: none; }
.lp-noise:not(.scrolly) .nz-end { position: static; transform: none; margin-top: 14px; }
/* --stick-top makes room for the mock's own tab bar; on the real page it's 0. */
:root { --stick-top: 52px; }
body.visitor { --stick-top: 0px; }
.lp-noise.scrolly .nz-sticky { position: sticky; top: var(--stick-top); height: calc(100vh - var(--stick-top)); height: calc(100svh - var(--stick-top)); display: grid; align-content: center; gap: 10px; padding-block: 14px; padding-inline: 20px; }
.lp-noise .nz-end { opacity: 1; }
.lp-noise.scrolly .nz-end { opacity: 0; }
.nz-sound { border: 1px solid var(--nz-line); background: none; color: var(--nb-on-ink2); font: 500 12px var(--f); padding: 6px 12px; border-radius: 999px; cursor: pointer; }
.nz-sound[aria-pressed="true"] { color: var(--nb-ground); }
.nz-card { will-change: transform, opacity; }

/* Round 3: the hero's words and signup over the image. */
.lp-hero.over { position: relative; display: block; height: 100vh; height: 100svh; min-height: 600px; max-height: 844px; overflow: hidden; color: var(--nb-ground); }
.lp-hero.over .lp-hero-img { position: absolute; inset: 0; aspect-ratio: auto; height: 100%; }
.lp-hero.over .lp-hero-img img { object-position: 50% 58%; }
.lp-hero .hero-wide { display: none; }
.lp-hero-shade { position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(18,18,18,0.5) 0%, rgba(18,18,18,0) 20%, rgba(18,18,18,0) 40%, rgba(24,25,26,0.78) 78%, rgba(28,29,30,0.94) 92%, #1C1D1E 100%); }
.lp-hero.over .lp-head { position: absolute; top: 0; left: 0; right: 0; z-index: 3; }
.lp-hero.over .lp-wm { color: var(--nb-ground); }
.lp-hero .lp-hero-tags { top: 60px; }
body.visitor button.exit-visitor { top: calc(10px + env(safe-area-inset-top, 0px)); bottom: auto; left: auto; right: 10px; transform: none; padding: 8px 12px; font-size: 12px; height: auto; }
.lp-hero.over .lp-hero-copy { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; padding: 0 20px 26px; }
.lp-hero.over .lp-h1 { color: var(--nb-ground); }
.lp-hero.over .lp-claim { color: rgba(246, 245, 242, 0.9); }
.lp-hero.over .lp-fine { color: rgba(246, 245, 242, 0.72); }
.lp-hero.over .lp-form input { background: rgba(246, 245, 242, 0.96); border-color: transparent; }
.lp-hero.over .lp-form button { box-shadow: inset 0 0 0 1px rgba(246, 245, 242, 0.85); }

/* Round 3: the ring and the steps in one section; the steps light up as you scroll past them. */
.lp-ring .lp-how-a { margin-top: 18px; }
.lp-ring.live .lp-steps li { opacity: 0.32; transition: opacity 0.35s ease; }
.lp-ring.live .lp-steps li.on { opacity: 1; }

/* Round 3: the mid-page signup, and the final one with what removes the risk. */
.lp-mid .lp-full, .lp-final { justify-items: center; text-align: center; width: 100%; max-width: 480px; margin-inline: auto; }
.lp-mid .lp-form, .lp-final .lp-form { width: 100%; }
.lp-mid-line { font-family: var(--fd); font-stretch: var(--fd-wdth); font-weight: var(--fd-wght); font-size: calc(22px * var(--ds)); line-height: 1.2; letter-spacing: calc(-0.01em + var(--fd-track)); }
.lp-final { margin-top: 26px; padding-top: 40px; border-top: 1px solid var(--nb-line); }
.lp-assure { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 16px; justify-content: center; font-size: 14px; color: var(--nb-ink2); }

/* Round 3: on a phone, a slim signup bar once the hero is gone (hidden while a form is on screen). */
.lp-bar { position: sticky; bottom: 0; z-index: 20; margin-top: -60px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px)); background: rgba(246, 245, 242, 0.95); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-top: 1px solid var(--nb-line); transform: translateY(110%); transition: transform 0.3s ease; }
.lp-bar.show { transform: none; }
.lp-bar span { font-size: 13px; color: var(--nb-ink2); }
.lp-bar-btn { height: 40px; padding: 0 16px; border: 0; border-radius: 2px; background: var(--nb-ink); color: var(--nb-ground); font: 500 14px var(--f); cursor: pointer; }
@container lp (min-width: 1000px) {
  .lp-hero.over { height: 900px; max-height: none; }
  .lp-hero.over .lp-hero-img { height: 900px; }
  .lp-hero.over .lp-hero-img img { object-position: 50% 50%; }
  .lp-hero .hero-tall { display: none; }
  .lp-hero .hero-wide { display: block; }
  .lp-hero.over .lp-hero-copy { left: 64px; right: auto; bottom: 76px; max-width: 640px; padding: 0; }
  .lp-hero .lp-hero-tags { top: 120px; left: 64px; }
  .lp-ring .lp-how-b .lp-how-media { position: sticky; top: 90px; }
  .lp-mid-line { font-size: calc(30px * var(--ds)); }
  .lp-bar { display: none; }
  .lp-noise.scrolly { height: 2980px; }
  .lp-noise.scrolly .nz-sticky { top: 56px; height: 860px; padding-block: 30px; padding-inline: 64px; }
  .lp-noise .nz-sticky { grid-template-columns: minmax(0, 560px) minmax(0, 1fr); column-gap: 96px; align-items: center; }
  .lp-noise .nz-b { gap: 16px; }
  .lp-footer { padding-top: 120px; }
  .lp-footer .lp-final { max-width: 540px; }
  .lp-footer-sign { margin-top: 96px; }
}

/* Round 5: the notifications float on a light ground, like cut-outs; no panel behind them. */
.lp-noise { background: linear-gradient(to bottom, var(--nb-ground) 0%, #E4E1DB 55%, #DAD6CF 100%); color: var(--nb-ink); }
.lp-noise .nz-stack { padding: 0; }
.lp-noise .nz-card { background: rgba(255, 255, 255, 0.78); border: 1px solid rgba(255, 255, 255, 0.9); color: var(--nb-ink); box-shadow: 0 1px 2px rgba(44, 44, 44, 0.06), 0 14px 34px -14px rgba(44, 44, 44, 0.32); -webkit-backdrop-filter: blur(14px) saturate(1.2); backdrop-filter: blur(14px) saturate(1.2); }
.lp-noise .nz-top span { color: var(--nb-ink2); }
.lp-noise .nz-dial { color: var(--nb-ink); }
.lp-noise .nz-dot { stroke: #E4E1DB; }
.lp-noise .nz-pos circle { fill: rgba(44, 44, 44, 0.35); }
.lp-noise .nz-thumb { fill: rgba(44, 44, 44, 0.12); }
.lp-noise .nz-hint { color: var(--nb-ink2); }
.lp-noise .nz-sound { color: var(--nb-ink2); border-color: rgba(44, 44, 44, 0.25); }
.lp-noise .nz-sound[aria-pressed="true"] { color: var(--nb-ink); }
.lp-noise + .lp-sec { border-top: 0; }
/* Round 6: iPhone-style glass notifications (the look, never a maker's icons or names), on a slightly darker warm grey. */
.lp-noise { background:
  linear-gradient(to bottom, rgba(44, 44, 44, 0) 0%, rgba(44, 44, 44, 0) 72%, rgba(44, 44, 44, 0.55) 88%, #2C2C2C 100%),
  radial-gradient(60% 38% at 22% 18%, rgba(246, 245, 242, 0.55), rgba(246, 245, 242, 0) 70%),
  radial-gradient(55% 40% at 82% 78%, rgba(44, 44, 44, 0.16), rgba(44, 44, 44, 0) 70%),
  linear-gradient(165deg, #CBC7C0 0%, #B9B4AC 55%, #ABA69E 100%); }
.lp-noise .nz-card { background: rgba(246, 246, 244, 0.58); border: 0.5px solid rgba(255, 255, 255, 0.55); border-radius: 22px; box-shadow: 0 8px 26px -12px rgba(30, 30, 30, 0.35); -webkit-backdrop-filter: blur(30px) saturate(1.8); backdrop-filter: blur(30px) saturate(1.8); padding: 12px 16px 13px; }
.lp-noise .nz-top b { font-size: 14px; font-weight: 600; letter-spacing: 0; }
.lp-noise .nz-top span { font-size: 13px; color: rgba(44, 44, 44, 0.55); }
.lp-noise .nz-card p { font-size: 15px; line-height: 1.32; margin-top: 2px; }
.lp-noise .nz-dot { stroke: #BDB8B0; }

/* In the desktop preview the page is scaled, which stops CSS sticky; the scene is pinned by script there instead. */
.lp-noise.manual-pin .nz-sticky { position: relative !important; top: 0 !important; will-change: transform; }

/* Round 5: the details as a spec sheet. */
.spec { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; margin: 0; border-top: 1px solid var(--nb-line); }
.spec > div { padding: 16px 14px 18px 0; border-bottom: 1px solid var(--nb-line); display: grid; gap: 6px; align-content: start; }
.spec > div:nth-child(odd) { border-right: 1px solid var(--nb-line); }
.spec > div:nth-child(even) { padding-left: 16px; padding-right: 0; }
.spec dt { font-size: 11px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--nb-ink2); }
.spec dd { margin: 0; font-family: var(--fd); font-stretch: var(--fd-wdth); font-weight: var(--fd-wght); font-size: calc(17px * var(--ds)); line-height: 1.3; letter-spacing: calc(-0.005em + var(--fd-track)); }
.spec-hear { margin-left: 4px; border: 1px solid var(--nb-field-line); background: none; border-radius: 999px; padding: 3px 10px; font: 500 12px var(--f); color: var(--nb-ink); cursor: pointer; vertical-align: 1px; }
.lp-spec .lp-b { gap: 22px; }
@container lp (min-width: 1000px) {
  .lp-spec .lp-a { grid-column: 1 / span 5; align-self: start; }
  .lp-spec .lp-b { grid-column: 7 / span 6; align-self: center; }
  .spec dd { font-size: calc(21px * var(--ds)); }
  .spec > div { padding: 22px 18px 24px 0; }
  .spec > div:nth-child(even) { padding-left: 22px; }
}

/* Round 8: section 3, dark. At rest (no script, reduced motion) everything simply shows, stacked. */
.lp-ring2 { background: var(--nb-ink); color: var(--nb-ground); border-top: 0; }
.lp-ring2 + .lp-sec { border-top: 0; }
.r2-stage { display: grid; }
.r2-inner { display: grid; gap: 20px; justify-items: center; text-align: center; }
.r2-head { display: grid; gap: 10px; justify-items: center; }
.r2-h { color: var(--nb-ground); max-width: 17ch; }
.r2-sub { font-size: 16px; font-weight: 500; color: var(--nb-on-ink2); }
.r2-center { display: grid; gap: 22px; justify-items: center; width: 100%; }
.r2-media { position: relative; display: grid; gap: 18px; justify-items: center; }
.r2-photo { position: relative; margin: 0; width: 200px; aspect-ratio: 3 / 4; border-radius: 18px; overflow: hidden; background: #3a3936; }
.r2-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.r2-dial { display: block; width: 180px; height: 180px; color: var(--nb-ground); overflow: visible; }
.r2-dial .nz-pos circle { fill: rgba(243, 242, 239, 0.45); }
.r2-dial .nz-dot { stroke: var(--nb-ink); }
.r2-dial .nz-thumb { fill: rgba(207, 204, 198, 0.24); }
.r2-steps { list-style: none; margin: 0; padding: 0; counter-reset: r2; display: grid; gap: 10px; width: 100%; max-width: 360px; text-align: left; }
.r2-steps li { counter-increment: r2; display: grid; grid-template-columns: 26px 1fr; font-size: 16px; line-height: 1.38; color: var(--nb-ground); transition: opacity 0.35s ease, color 0.35s ease; }
.r2-steps li::before { content: counter(r2); font-size: 12px; color: var(--nb-on-ink2); padding-top: 3px; font-variant-numeric: tabular-nums; }
.r2-safe { margin: 0; font-size: 13px; color: var(--nb-on-ink2); max-width: 30em; }
.lp-ring2 .tag.note { background: rgba(246, 245, 242, 0.16); }

/* With script: one pinned scene. */
.lp-ring2.scrolly2 { display: block; height: calc(100vh - var(--stick-top) + 1300px); height: calc(100svh - var(--stick-top) + 1300px); padding-block: 0; }
.scrolly2 .r2-stage { position: sticky; top: var(--stick-top); height: calc(100vh - var(--stick-top)); height: calc(100svh - var(--stick-top)); align-content: center; padding-block: 16px; overflow: hidden; }
.scrolly2 .r2-media { display: block; width: 100%; height: 250px; }
.scrolly2 .r2-photo, .scrolly2 .r2-dial { position: absolute; left: 50%; top: 50%; }
.scrolly2 .r2-photo { width: 180px; }
.scrolly2 .r2-steps li { opacity: 0.26; }
.scrolly2:not(.r2-show) .r2-steps li { opacity: 0; }
.scrolly2 .r2-steps li.on { opacity: 1; }
.lp-ring2.manual-pin .r2-stage { position: relative !important; top: 0 !important; will-change: transform; }
@container lp (min-width: 1000px) {
  .r2-inner { gap: 28px; }
  .r2-sub { font-size: 19px; }
  .r2-photo { width: 300px; }
  .r2-dial { width: 300px; height: 300px; }
  .r2-steps li { font-size: 19px; }
  .r2-center { grid-template-columns: minmax(0, 1fr) 420px minmax(0, 1fr); grid-template-areas: "s1 media s2" "s4 media s3" "s5 s5 s5"; column-gap: 48px; row-gap: 26px; align-items: center; max-width: 1200px; }
  .r2-media { grid-area: media; }
  .r2-steps { display: contents; }
  .r2-steps li { max-width: 320px; }
  .r2-steps li:nth-child(1) { grid-area: s1; justify-self: end; align-self: end; }
  .r2-steps li:nth-child(2) { grid-area: s2; justify-self: start; align-self: end; }
  .r2-steps li:nth-child(3) { grid-area: s3; justify-self: start; align-self: start; }
  .r2-steps li:nth-child(4) { grid-area: s4; justify-self: end; align-self: start; }
  .r2-steps li:nth-child(5) { grid-area: s5; justify-self: center; }
  .lp-ring2.scrolly2 { height: 2500px; }
  .scrolly2 .r2-stage { top: 56px; height: 860px; padding-block: 24px; }
  .scrolly2 .r2-media { height: 440px; }
  .scrolly2 .r2-photo { width: 300px; }
}

/* Round 9: section 2 over a blurred photo. */
.lp-noise { background: #2C2C2C; }
.nz-sticky { isolation: isolate; }
.lp-noise:not(.scrolly) { position: relative; isolation: isolate; }
.nz-photo { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
.nz-photo img { width: 100%; height: 100%; object-fit: cover; filter: blur(34px) saturate(1.15) brightness(0.86); transform: scale(1.25); }
.nz-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(44, 44, 44, 0.1) 0%, rgba(44, 44, 44, 0) 30%, rgba(44, 44, 44, 0.35) 80%, rgba(44, 44, 44, 0.9) 100%); }
.lp-noise .nz-dial, .lp-noise .nz-end { color: var(--nb-ground); }
.lp-noise .nz-dot { stroke: #6b6560; }
.lp-noise .nz-pos circle { fill: rgba(246, 245, 242, 0.55); }
.lp-noise .nz-thumb { fill: rgba(246, 245, 242, 0.22); }
.lp-noise .nz-hint { color: rgba(246, 245, 242, 0.85); }
.lp-noise .nz-sound { color: rgba(246, 245, 242, 0.85); border-color: rgba(246, 245, 242, 0.4); }
.lp-noise .nz-sound[aria-pressed="true"] { color: var(--nb-ground); }
.lp-noise .tag.des { box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.25); }

/* Round 10: section 2 picks up where the hero ends. The hero's bottom measures about rgb(28, 29, 30), so the section starts on that near-black,
   and its blurred ground is the dark lower part of the hero image (the navy chinos and the street), desaturated so it reads grey to blue-black, not blue. */
.lp-noise { background: #1C1D1E; position: relative; z-index: 7; }
.nz-photo img { object-position: 50% 82%; filter: blur(42px) saturate(0.5) brightness(0.62); transform: scale(1.6); transform-origin: 50% 82%; }
.nz-photo::after { background: linear-gradient(to bottom, #1C1D1E 0%, rgba(28, 29, 30, 0.72) 10%, rgba(28, 29, 30, 0.28) 28%, rgba(28, 29, 30, 0.22) 68%, rgba(24, 22, 20, 0.92) 100%); }

/* Round 10: section 2's headline, over the stack; it fades as the clicks begin. */
.nz-head { display: grid; gap: 6px; margin-bottom: 14px; text-align: center; justify-items: center; }
.nz-h { margin: 0; font-family: var(--fd); font-stretch: var(--fd-wdth); font-weight: var(--fd-wght); font-size: calc(24px * var(--ds)); line-height: 1.12; letter-spacing: calc(-0.015em + var(--fd-track)); color: var(--nb-ground); text-wrap: balance; }
.nz-sub { margin: 0; font-size: 15px; line-height: 1.4; color: rgba(246, 245, 242, 0.78); }
@container lp (min-width: 1000px) {
  .nz-head { margin-bottom: 22px; gap: 10px; }
  .nz-h { font-size: calc(38px * var(--ds)); }
  .nz-sub { font-size: 18px; }
}

/* Round 10: the dial as a watch bezel: nine engraved places turn under a fixed marker; the concave dot is one of them. */
.bz-ring { fill: none; stroke: #4A4845; stroke-width: 12; }
.bz-edge { fill: none; stroke: rgba(246, 245, 242, 0.32); stroke-width: 0.8; }
.bz-ticks line { stroke: rgba(246, 245, 242, 0.85); stroke-width: 2; stroke-linecap: round; }
.bz-dot { fill: #1C1D1E; stroke: #F6F5F2; stroke-width: 1.6; }
.bz-mark { fill: #F6F5F2; }
/* Small phones: the small line steps aside and the headline tightens, so the cards stay readable. */
.lp-noise.nz-tight .nz-sub { display: none; }
.lp-noise.nz-tight .nz-h { font-size: calc(20px * var(--ds)); }
.lp-noise.nz-tight .nz-head { margin-bottom: 8px; }
.lp .lp-noise.scrolly.nz-tight .nz-stack { gap: 4px; }
.lp .lp-noise.scrolly.nz-tight .nz-card { padding: 5px 11px 6px; border-radius: 15px; }
.lp .lp-noise.scrolly.nz-tight .nz-card p { margin-top: 0; line-height: 1.22; }
.lp-noise.scrolly.nz-tight .nz-sticky { padding-block: 8px; gap: 6px; }

/* Round 9: section 3 on the ring-on-oak still. At rest: the image, then the words, stacked. */
.lp-ring3 { background: var(--nb-ink); color: var(--nb-ground); border-top: 0; padding: 0; display: block; }
.lp-ring3 + .lp-sec { border-top: 0; }
.r3-stage { position: relative; overflow: hidden; min-height: 640px; display: grid; align-content: space-between; }
.r3-media { position: absolute; inset: 0; overflow: hidden; }
.r3-img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 58%; }
.r3-wide { display: none; }
.r3-shade { position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(24, 22, 20, 0.62) 0%, rgba(24, 22, 20, 0) 30%, rgba(24, 22, 20, 0) 50%, rgba(24, 22, 20, 0.78) 100%); }
.r3-tags { top: auto; bottom: 10px; }
.r3-head { position: relative; z-index: 2; display: grid; gap: 8px; justify-items: center; text-align: center; padding: 34px 20px 0; }
.r3-h { color: var(--nb-ground); max-width: 15ch; }
.r3-sub { font-size: 15.5px; font-weight: 500; color: rgba(246, 245, 242, 0.88); }
.r3-steps-wrap { position: relative; z-index: 2; display: grid; gap: 10px; padding: 0 22px 46px; }
.r3-steps-h { font-family: var(--fd); font-stretch: var(--fd-wdth); font-weight: var(--fd-wght); font-size: calc(22px * var(--ds)); }
.r3-steps { list-style: none; margin: 0; padding: 0; counter-reset: r3; display: grid; gap: 8px; }
.r3-steps li { counter-increment: r3; display: grid; grid-template-columns: 24px 1fr; font-size: 15px; line-height: 1.36; transition: opacity 0.35s ease; }
.r3-steps li::before { content: counter(r3); font-size: 12px; color: rgba(246, 245, 242, 0.65); padding-top: 3px; }
.r3-safe { margin: 4px 0 0; font-size: 12.5px; color: rgba(246, 245, 242, 0.7); }
/* With script: pinned; the image pushes in, the steps light up one by one. */
.lp-ring3.scrolly3 { height: calc(100vh - var(--stick-top) + 1100px); height: calc(100svh - var(--stick-top) + 1100px); }
.scrolly3 .r3-stage { position: sticky; top: var(--stick-top); height: calc(100vh - var(--stick-top)); height: calc(100svh - var(--stick-top)); min-height: 0; }
.scrolly3 .r3-steps li { opacity: 0.3; }
.scrolly3 .r3-steps li.on { opacity: 1; }
.lp-ring3.manual-pin .r3-stage { position: relative !important; top: 0 !important; will-change: transform; }

/* Round 9: "why a ring" over hand frame 4. */
.lp-why-img { position: relative; isolation: isolate; overflow: hidden; background: var(--nb-ink); color: var(--nb-ground); min-height: 560px; align-content: end; }
.why-bg { position: absolute; inset: 0; z-index: -1; }
.why-bg img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; }
.why-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(24, 22, 20, 0) 35%, rgba(24, 22, 20, 0.72) 100%); }
.lp-why-img .lp-big { color: var(--nb-ground); }

/* Round 9: the footer over the macro render. */
.lp-footer { position: relative; isolation: isolate; overflow: hidden; }
.foot-bg { position: absolute; inset: 0; z-index: -1; }
.foot-bg img { width: 100%; height: 100%; object-fit: cover; opacity: 0.32; }
.foot-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(44, 44, 44, 0.92) 0%, rgba(44, 44, 44, 0.55) 45%, rgba(44, 44, 44, 0.92) 100%); }
.lp-fig-render { background: #8f8f8f; }

@container lp (min-width: 1000px) {
  .r3-tall { display: none; }
  .r3-wide { display: block; object-position: 50% 52%; }
  .r3-stage { min-height: 860px; grid-template-columns: minmax(0, 1fr) 460px; align-content: stretch; }
  .r3-shade { background: linear-gradient(to right, rgba(24, 22, 20, 0.5) 0%, rgba(24, 22, 20, 0) 35%, rgba(24, 22, 20, 0.1) 55%, rgba(24, 22, 20, 0.82) 78%), linear-gradient(to bottom, rgba(24, 22, 20, 0.4), rgba(24, 22, 20, 0) 30%); }
  .r3-head { grid-column: 1; align-self: start; justify-items: start; text-align: left; padding: 72px 64px 0; }
  .r3-sub { font-size: 19px; }
  .r3-steps-wrap { grid-column: 2; align-self: center; padding: 0 64px 0 0; gap: 14px; }
  .r3-steps-h { font-size: calc(30px * var(--ds)); }
  .r3-steps li { font-size: 18px; }
  .lp-ring3.scrolly3 { height: 2300px; }
  .scrolly3 .r3-stage { top: 56px; height: 860px; }
  .lp-why-img { min-height: 760px; }
}

/* Phone: the dial rides along at the bottom of the screen while the stack is in view. */
@container lp (max-width: 999px) {
  .scrolly .nz-b { position: static; background: none; padding: 4px 0 0; gap: 6px; }
  .scrolly .nz-dial { width: 72px; height: 72px; }
  .scrolly .nz-stack { gap: 5px; padding: 6px; }
  .scrolly .nz-card { padding: 7px 12px 8px; border-radius: 17px; }
  .scrolly .nz-top b { font-size: 11.5px; }
  .scrolly .nz-top span { font-size: 10.5px; }
  .scrolly .nz-card p { font-size: 13px; line-height: 1.28; margin-top: 1px; }
  .scrolly .nz-hint { font-size: 12px; }
  .scrolly .nz-wall { inset: 0 -6px -6px; }
  .scrolly .nz-tags { display: none; }
  .scrolly .nz-end { font-size: calc(22px * var(--ds)); }
  .nz-b { position: sticky; bottom: 0; z-index: 2; gap: 8px; padding: 18px 0 calc(14px + env(safe-area-inset-bottom, 0px)); background: linear-gradient(to top, var(--nb-ink) 72%, rgba(44, 44, 44, 0)); }
  .nz-dial { width: 118px; height: 118px; }
  .nz-b .nz-tags { display: none; }
}
@container lp (min-width: 1000px) {
  .nz-wrap { grid-column: 1 / -1; grid-template-columns: minmax(0, 520px) minmax(0, 1fr); column-gap: 96px; align-items: center; }
  .nz-card p { font-size: 16px; }
  .nz-dial { width: 260px; height: 260px; }
  .nz-end { font-size: calc(44px * var(--ds)); }
  .nz-hint { font-size: 15px; }
}

.lp-quote { display: grid; gap: 14px; font-size: 17px; max-width: 34em; }
.lp-belief { font-weight: 500; }
.lp-sign { font-size: 14px; color: var(--nb-ink2); }

.lp-dl { display: grid; }
.lp-dl > div { display: grid; grid-template-columns: 38% 1fr; gap: 12px; padding: 14px 0; border-top: 1px solid var(--nb-line); }
.lp-dl > div:last-child { border-bottom: 1px solid var(--nb-line); }
.lp-dl dt { font-size: 14px; color: var(--nb-ink2); }
.lp-dl dd { font-size: 16px; }

.lp-wait { justify-items: center; text-align: center; }
.lp-wait .lp-full { justify-items: center; width: 100%; max-width: 480px; }
.lp-wait .lp-form { width: 100%; }

.lp-close { background: var(--nb-ink); color: var(--nb-ground); padding: 84px 20px 52px; display: grid; gap: 16px; justify-items: center; text-align: center; }
.lp-close .lp-wm { width: 250px; color: var(--nb-ground); }
.lp-signoff { color: var(--nb-brick); font-size: 14px; font-weight: 500; letter-spacing: 0.01em; }
.lp-foot { margin-top: 40px; font-size: 12.5px; color: var(--nb-on-ink2); }
.lp-close .ctag { background: var(--nb-ink); }

/* Desktop: 1440 wide */
@container lp (min-width: 1000px) {
  .lp { font-size: 18px; }
  .lp-head { position: absolute; top: 0; left: 0; z-index: 4; height: auto; padding: 46px 64px; }
  .lp-head .lp-wm { width: 224px; }
  .lp-hero { display: grid; grid-template-columns: 1fr 675px; height: 900px; }
  .lp-hero-img { order: 2; aspect-ratio: auto; height: 900px; }
  .lp-hero-img img { object-position: 50% 50%; }
  .lp-hero-copy { order: 1; justify-content: center; padding: 0 72px 0 64px; gap: 24px; }
  .lp-h1 { font-size: calc(70px * var(--ds)); line-height: 1.02; max-width: 10.5ch; }
  body.hero-b .lp-h1 { font-size: calc(184px * var(--ds)); }
  .lp-sub { font-size: 19px; max-width: 25em; }
  .lp-form { max-width: 500px; }
  .lp-form input, .lp-form button { height: 54px; }
  .lp-fine { font-size: 13.5px; }
  .lp-sec { padding: 132px 64px; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 32px; row-gap: 44px; }
  .lp-a { grid-column: 1 / span 5; align-self: center; gap: 24px; }
  .lp-b { grid-column: 7 / span 6; }
  .lp-full { grid-column: 1 / -1; }
  .lp-h2 { font-size: calc(50px * var(--ds)); line-height: 1.04; }
  .lp-body, .lp-quote { font-size: 19px; }
  .lp-media2 { gap: 16px; }
  .lp-rail { grid-auto-columns: 300px; gap: 16px; margin-inline: -64px; padding-inline: 64px; scroll-padding-inline: 64px; }
  .lp-steps li { font-size: 19px; padding: 18px 0; }
  .lp-big { font-size: calc(58px * var(--ds)); max-width: 16ch; }
  .lp-qa { font-size: 21px; }
  .lp-dl dd { font-size: 18px; }
  .lp-dl dt { font-size: 15px; }
  .lp-wait .lp-full { max-width: 560px; }
  .lp-close { padding: 150px 64px 64px; gap: 20px; }
  .lp-close .lp-wm { width: 540px; }
  .lp-signoff { font-size: 16px; }
  .tagset { top: 14px; left: 14px; }
  .tag { font-size: 11px; }
  .tag.note { font-size: 12px; }
  .ctag { font-size: 10px; }
  .ph { font-size: 15px; padding: 20px; }
  .ph b { font-size: 16px; }
  .ph small { font-size: 13px; }
}

/* ---------- Instagram tab ---------- */
.ig-layout { display: grid; gap: 32px; justify-content: center; grid-template-columns: minmax(0, 420px); }
@media (min-width: 960px) { .ig-layout { grid-template-columns: 420px minmax(0, 440px); align-items: start; gap: 48px; } }
.ig { background: var(--ig-bg); color: var(--ig-fg); border-radius: 28px; overflow: hidden; box-shadow: 0 0 0 1px var(--shell-line), 0 30px 60px -34px var(--shell-shadow); font-size: 14px; line-height: 1.4; }
@media (max-width: 480px) { .ig-layout { grid-template-columns: minmax(0, 1fr); } .ig { margin-inline: -16px; border-radius: 0; box-shadow: none; } }
.ig-top { padding: 16px 16px 10px; font-weight: 600; font-size: 17px; }
.ig-head { display: grid; grid-template-columns: 86px 1fr; gap: 18px; align-items: center; padding: 4px 16px 12px; }
.ig-av { width: 86px; height: 86px; border-radius: 50%; background: var(--nb-ground); display: grid; place-items: center; box-shadow: inset 0 0 0 1px var(--ig-line); color: var(--nb-ink); }
.ig-av svg { width: 50px; height: 50px; display: block; }
.ig-stats { display: grid; grid-template-columns: repeat(3, 1fr); text-align: center; }
.ig-stats b { display: block; font-size: 17px; font-weight: 600; font-variant-numeric: tabular-nums; }
.ig-stats span { font-size: 13px; color: var(--ig-muted); }
.ig-bio { padding: 0 16px 12px; display: grid; gap: 2px; }
.ig-bio b { font-weight: 600; letter-spacing: 0.02em; }
.ig-bio .link { font-weight: 500; }
.ig-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 2px 16px 16px; }
.ig-btns span { background: var(--ig-btn); border-radius: 8px; text-align: center; padding: 8px; font-weight: 600; font-size: 14px; }
.ig-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2px; }
.ig-tile { position: relative; aspect-ratio: 3 / 4; overflow: hidden; background: var(--nb-stone); container-type: inline-size; }
.ig-tile img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ig-tile .tagset { top: 5px; left: 5px; }
.ig-tile .tag { font-size: 8.5px; padding: 4px 5px 3px; }
.ig-in { position: absolute; inset: 0; padding: 10cqw; display: flex; flex-direction: column; justify-content: flex-end; }
.ig-dark { background: var(--nb-ink); color: var(--nb-ground); }
.ig-dark span { font-size: calc(25cqw * var(--ds)); letter-spacing: calc(-0.045em + var(--fd-track)); line-height: 0.9; }
.ig-stone { background: var(--nb-stone); color: var(--nb-ink); }
.ig-stone .ig-in { gap: 7cqw; }
.ig-stone span { font-size: calc(15cqw * var(--ds)); letter-spacing: calc(-0.03em + var(--fd-track)); line-height: 0.98; }

/* Page tone B: the nine befores on Graphite, for rhythm; their numbers in Bright Brick (small subtext, 4.9:1 on Graphite). */
body.tone-b .lp-nine { background: var(--nb-ink); color: var(--nb-ground); border-top: 0; }
body.tone-b .lp-nine + .lp-sec { border-top: 0; }
body.tone-b .lp-nine .n { color: var(--nb-brick); }
body.tone-b .lp-nine .ph { background: repeating-linear-gradient(135deg, var(--nb-dark-ph-a) 0 9px, var(--nb-dark-ph-b) 9px 18px); outline-color: var(--nb-dark-ph-line); color: var(--nb-on-ink2); }
body.tone-b .lp-nine .ph b { color: var(--nb-ground); }
body.tone-b .lp-nine .lp-fig { background: var(--nb-dark-ph-a); }
.ig-stone small { font-size: 7cqw; line-height: 1.3; color: var(--nb-ink); }
.ig-tile .ph { aspect-ratio: auto; height: 100%; padding: 8cqw; font-size: 7.5cqw; gap: 2cqw; }
.ig-tile .ph b { font-size: 8.5cqw; }
.ig-tile .ph small { font-size: 6.5cqw; }
.ig-tile .ph.play::after { border-width: 8cqw 0 8cqw 13cqw; }
.ig-play { position: absolute; right: 7px; top: 7px; width: 0; height: 0; border-style: solid; border-width: 6px 0 6px 10px; border-color: transparent transparent transparent var(--nb-ink); opacity: 0.7; }

.notes { display: grid; gap: 18px; font-size: 14px; }
.notes h2, .missing h2 { margin: 0; font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 600; }
.notes ol { margin: 0; padding: 0; list-style: none; display: grid; }
.notes li { display: grid; grid-template-columns: 28px 1fr auto; gap: 10px; padding: 11px 0; border-top: 1px solid var(--shell-line); align-items: baseline; }
.notes li:last-child { border-bottom: 1px solid var(--shell-line); }
.notes li > span:first-child { color: var(--shell-muted); font-variant-numeric: tabular-nums; }
.notes li small { display: block; color: var(--shell-muted); font-size: 12.5px; margin-top: 2px; }
.notes p { margin: 0; color: var(--shell-muted); }
code { font-family: ui-monospace, "SF Mono", Consolas, monospace; font-size: 0.88em; overflow-wrap: anywhere; }

/* ---------- Missing tab ---------- */
.missing { max-width: 780px; margin: 0 auto; display: grid; gap: 28px; }
.missing > p { margin: 0; color: var(--shell-muted); }
.mlist { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.mlist li { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 4px 12px; padding: 18px; background: var(--shell-panel); border: 1px solid var(--shell-line); border-radius: 10px; }
.mlist .rank { font-size: 20px; font-weight: 500; font-variant-numeric: tabular-nums; color: var(--shell-muted); line-height: 1.2; }
.mlist h3 { margin: 0; font-size: 16.5px; font-weight: 600; line-height: 1.3; }
.mlist dl { margin: 8px 0 0; display: grid; gap: 6px; font-size: 14px; }
.mlist dl > div { display: grid; grid-template-columns: 78px minmax(0, 1fr); gap: 10px; }
.mlist dt { color: var(--shell-muted); }
.mlist dd { margin: 0; }
.plain { margin: 0; padding-left: 18px; display: grid; gap: 6px; font-size: 14px; }

/* ---------- Motion tab ---------- */
/* Round 4: the waitlist as the footer, on Graphite. */
.lp-footer { gap: 0; padding-top: 72px; }
.lp-footer .lp-final { display: grid; gap: 14px; justify-items: center; text-align: center; width: 100%; max-width: 460px; margin: 0 auto; padding-top: 0; border-top: 0; }
.lp-footer .lp-h2 { color: var(--nb-ground); max-width: none; }
.lp-footer .lp-body { color: var(--nb-on-ink2); }
.lp-footer .lp-form { width: 100%; }
.lp-footer .lp-form input { background: var(--nb-ground); border-color: transparent; }
.lp-footer .lp-form button { box-shadow: inset 0 0 0 1px rgba(246, 245, 242, 0.85); }
.lp-footer .lp-fine, .lp-footer .lp-assure { color: var(--nb-on-ink2); }
.lp-footer-sign { display: grid; gap: 12px; justify-items: center; margin-top: 64px; padding-top: 48px; border-top: 1px solid rgba(246, 245, 242, 0.14); width: 100%; }
.lp-footer .lp-foot { margin-top: 28px; }

.mo { max-width: 980px; margin: 0 auto; display: grid; gap: 18px; }
.mo-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px; align-items: start; }
.mo-fig { margin: 0; display: grid; gap: 8px; }
.mo-fig video { width: 100%; height: auto; border-radius: 12px; background: #000; display: block; }
.mo-fig figcaption { font-size: 13px; color: var(--shell-muted); }

/* ---------- Visitor view ---------- */
.exit-visitor { display: none; }
body.visitor .shell-head, body.visitor .tabs-wrap, body.visitor .phone-aside, body.visitor .fold { display: none; }
body.visitor main { padding-block: 0; }
body.visitor .exit-visitor { display: block; position: fixed; z-index: 40; left: 50%; transform: translateX(-50%); bottom: calc(14px + env(safe-area-inset-bottom, 0px)); border: 0; border-radius: 999px; background: rgba(28, 28, 28, 0.86); color: #F6F5F2; font: 500 13px/1 var(--f); padding: 11px 16px; cursor: pointer; }
@media (min-width: 481px) { body.visitor main { padding-block: 24px; } }

@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
/* Round 7: phone sizes for the glass cards. */
@container lp (max-width: 999px) {
  .lp .lp-noise.scrolly .nz-card { padding: 8px 12px 9px; border-radius: 17px; }
  .lp .lp-noise.scrolly .nz-top b { font-size: 12.5px; }
  .lp .lp-noise.scrolly .nz-top span { font-size: 11.5px; }
  .lp .lp-noise.scrolly .nz-card p { font-size: 13.5px; line-height: 1.3; margin-top: 1px; }
  .lp .lp-noise.scrolly .nz-stack { gap: 6px; }
  /* The ring and its hint side by side, so the cards get the height. */
  .lp .lp-noise.scrolly .nz-b { display: flex; flex-direction: row; align-items: center; justify-content: center; gap: 14px; text-align: left; padding-top: 2px; }
  .lp .lp-noise.scrolly .nz-b .nz-hint { max-width: 180px; margin: 0; }
  .lp .lp-noise.scrolly .nz-dial { width: 64px; height: 64px; flex: 0 0 auto; }
  .lp .lp-noise.scrolly .nz-sound { flex: 0 0 auto; }
}

/* Round 12 (2026-10-02): section 3 is the ring itself, a 3D render floating upright in window light, turning its nine
   clicks as you scroll (frames drawn to a canvas, cropped in on the ring). Light, after section 2's dark: a fade carries
   the near-black into the page's ground. The steps light up on the clicks. At rest it simply shows the first frame. */
.t3-fade { height: 180px; background: linear-gradient(to bottom, #1A1918 0%, #2B2A28 18%, #8D8A85 62%, var(--nb-ground) 100%); }
.lp-turn { background: var(--nb-ground); color: var(--nb-ink); border-top: 0; padding: 0; display: block; position: relative; }
.lp-turn + .lp-sec { border-top: 0; }
.t3-stage { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; gap: 10px; padding: 18px 20px 22px; min-height: 640px; }
.t3-head { display: grid; gap: 6px; justify-items: center; text-align: center; }
.t3-h { max-width: 16ch; }
.t3-sub { margin: 0; font-size: 15px; font-weight: 500; color: var(--nb-ink2); }
.t3-media { position: relative; min-height: 0; }
.t3-canvas { display: block; width: 100%; height: 100%; min-height: 240px;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 12%, #000 86%, transparent 100%), linear-gradient(to right, transparent 0, #000 8%, #000 92%, transparent 100%);
  -webkit-mask-composite: source-in; mask-image: linear-gradient(to bottom, transparent 0, #000 12%, #000 86%, transparent 100%), linear-gradient(to right, transparent 0, #000 8%, #000 92%, transparent 100%); mask-composite: intersect; }
.t3-media noscript img { width: 100%; height: auto; }
.t3-tags { top: auto; bottom: 6px; }
.t3-steps-wrap { display: grid; gap: 8px; }
.t3-steps-top { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.t3-steps-h { margin: 0; font-family: var(--fd); font-stretch: var(--fd-wdth); font-weight: var(--fd-wght); font-size: calc(21px * var(--ds)); }
.t3-sound { border: 1px solid rgba(44, 44, 44, 0.28); background: none; color: var(--nb-ink2); font: 500 12px var(--f); padding: 6px 12px; border-radius: 999px; cursor: pointer; white-space: nowrap; }
.t3-sound[aria-pressed="true"] { color: var(--nb-ink); }
.t3-steps { list-style: none; margin: 0; padding: 0; counter-reset: t3; display: grid; gap: 7px; }
.t3-steps li { counter-increment: t3; display: grid; grid-template-columns: 22px 1fr; font-size: 15px; line-height: 1.34; transition: opacity 0.3s ease; }
.t3-steps li::before { content: counter(t3); font-size: 12px; color: var(--nb-ink2); padding-top: 3px; font-variant-numeric: tabular-nums; }
/* With script: pinned; the frames follow the scroll. */
.lp-turn.scrolly4 { height: calc(100vh - var(--stick-top) + 1000px); height: calc(100svh - var(--stick-top) + 1000px); }
.scrolly4 .t3-stage { position: sticky; top: var(--stick-top); height: calc(100vh - var(--stick-top)); height: calc(100svh - var(--stick-top)); min-height: 0; }
.scrolly4 .t3-steps li { opacity: 0.3; }
.scrolly4 .t3-steps li.on { opacity: 1; }
.lp-turn.manual-pin .t3-stage { position: relative !important; top: 0 !important; will-change: transform; }
/* Short phones (an iPhone SE with Safari's bars): tighter type so the ring keeps its room. */
.lp-turn.t3-tight .t3-steps li { font-size: 13.5px; line-height: 1.28; }
.lp-turn.t3-tight .t3-steps { gap: 4px; }
.lp-turn.t3-tight .t3-stage { padding-block: 10px 12px; gap: 6px; }
.lp-turn.t3-tight .t3-h { font-size: calc(22px * var(--ds)); }
@container lp (min-width: 1000px) {
  .t3-fade { height: 240px; }
  .t3-stage { grid-template-columns: minmax(0, 1fr) 440px; grid-template-rows: 1fr auto auto 1fr; column-gap: 64px; padding: 40px 64px; min-height: 860px; }
  .t3-media { grid-column: 1; grid-row: 1 / span 4; }
  .t3-head { grid-column: 2; grid-row: 2; justify-items: start; text-align: left; padding-bottom: 22px; }
  .t3-steps-wrap { grid-column: 2; grid-row: 3; gap: 12px; }
  .t3-sub { font-size: 19px; }
  .t3-steps-h { font-size: calc(28px * var(--ds)); }
  .t3-steps li { font-size: 18px; }
  .lp-turn.scrolly4 { height: 2200px; }
  .scrolly4 .t3-stage { top: 56px; height: 860px; }
}
/* Round 12, then (Sherman: "match the background color of the actual render … the best way to overlay the text"): the
   section takes the render's own wall tone (its top band averages rgb(195, 194, 190)), the render fills the stage behind
   the words with its edges melting into that tone (drawn in the canvas), and a soft wash of the same tone sits behind the
   headline and the steps so they stay crisp over the light. */
:root { --t3-bg: #C3C1BC; --t3-ink2: #45433F; }
/* The fades are eased (cubic in-out, 17 stops), not straight ramps: a straight ramp starts and stops climbing abruptly,
   and the eye sees each of those two places as a line (Sherman: "a harsh line or two harsh lines … between section two
   and section three"). The fade starts on section 2's measured bottom, rgb(24, 23, 22). */
.t3-fade { height: 340px; background: linear-gradient(to bottom, rgb(24, 23, 22) 0%, rgb(24, 23, 22) 6.25%, rgb(25, 24, 23) 12.5%, rgb(29, 27, 26) 18.75%, rgb(35, 34, 32) 25%, rgb(45, 44, 42) 31.25%, rgb(60, 59, 57) 37.5%, rgb(81, 80, 78) 43.75%, rgb(110, 108, 105) 50%, rgb(138, 136, 132) 56.25%, rgb(159, 157, 153) 62.5%, rgb(174, 172, 168) 68.75%, rgb(184, 182, 178) 75%, rgb(190, 189, 184) 81.25%, rgb(194, 192, 187) 87.5%, rgb(195, 193, 188) 93.75%, rgb(195, 193, 188) 100%); }
/* Section 2's blurred photo let a little light through at its very bottom (its shade stopped at 92%), so its last row
   varied across the width while the fade below is one tone: an edge at the sides. Its last stretch is now solid. */
.nz-photo::after { background: linear-gradient(to bottom, #1C1D1E 0%, rgba(28, 29, 30, 0.72) 10%, rgba(28, 29, 30, 0.28) 28%, rgba(28, 29, 30, 0.22) 64%, rgba(24, 23, 22, 0.94) 88%, rgb(24, 23, 22) 97%, rgb(24, 23, 22) 100%); }
.t3-fade-out { height: 200px; background: linear-gradient(to bottom, rgb(195, 193, 188) 0%, rgb(195, 193, 188) 12.5%, rgb(196, 194, 189) 18.75%, rgb(198, 196, 191) 25%, rgb(201, 199, 195) 31.25%, rgb(206, 204, 199) 37.5%, rgb(212, 210, 206) 43.75%, rgb(221, 219, 215) 50%, rgb(229, 228, 224) 56.25%, rgb(235, 234, 231) 62.5%, rgb(240, 239, 235) 68.75%, rgb(243, 242, 239) 75%, rgb(245, 244, 241) 81.25%, rgb(246, 245, 242) 87.5%, rgb(246, 245, 242) 100%); }
.lp-turn { background: var(--t3-bg); }
.t3-stage { position: relative; isolation: isolate; grid-template-rows: auto minmax(0, 1fr) auto; }
.t3-media { position: absolute; inset: 0; z-index: -2; }
.t3-canvas { min-height: 0; -webkit-mask-image: none; mask-image: none; }
.t3-stage::before, .t3-stage::after { content: ""; position: absolute; left: 0; right: 0; z-index: -1; pointer-events: none; }
.t3-stage::before { top: 0; height: 30%; background: linear-gradient(to bottom, var(--t3-bg) 0%, rgba(195, 193, 188, 0.88) 45%, rgba(195, 193, 188, 0) 100%); }
.t3-stage::after { bottom: 0; height: 46%; background: linear-gradient(to top, var(--t3-bg) 0%, rgba(195, 193, 188, 0.94) 55%, rgba(195, 193, 188, 0) 100%); }
.t3-head { grid-row: 1; }
.t3-steps-wrap { grid-row: 3; }
.t3-sub, .t3-steps li::before { color: var(--t3-ink2); }
/* Heavier, so it reads as the brand's voice rather than slide bullets (Sherman: "too light and it looks like a presentation"). */
.t3-steps-h { font-weight: 600; letter-spacing: -0.01em; }
.t3-steps li { font-weight: 500; color: var(--nb-ink); }
.t3-steps li::before { font-weight: 600; }
/* Then (Sherman chose 1 and 3, with 2 as a switch): with script, the five steps narrate the turn one line at a time
   under the ring, changing on the clicks, with nine ticks filling in ("Lines"; Sherman picked it over "Count", a large
   01 to 09, on 2026-10-02).
   The list stays in the page for screen readers and for reduced motion. The headline builds in word by word, holds over
   the dimmed ring, then rises to the top as the ring comes up and starts to turn. */
.t3-live { display: none; }
.scrolly4 .t3-steps { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.scrolly4 .t3-live { display: grid; gap: 12px; }
.t3-line { margin: 0; font-family: var(--fd); font-stretch: var(--fd-wdth); font-weight: 600; font-size: calc(23px * var(--ds)); line-height: 1.18; letter-spacing: calc(-0.014em + var(--fd-track)); color: var(--nb-ink); min-height: 3.54em; text-wrap: balance; transition: opacity 0.18s ease, transform 0.18s ease; }
.t3-line.swap { opacity: 0; transform: translateY(-6px); }
.t3-line.enter { opacity: 0; transform: translateY(8px); transition: none; }
.t3-ticks { display: flex; gap: 6px; }
.t3-ticks i { flex: 0 0 auto; width: 22px; height: 3px; border-radius: 2px; background: rgba(44, 44, 44, 0.2); transition: background 0.2s ease; }
.t3-ticks i.on { background: var(--nb-ink); }
.t3-h .w { display: inline-block; }
.lp-turn.t3-tight .t3-line { font-size: calc(20px * var(--ds)); }
@container lp (min-width: 1000px) {
  .t3-line { font-size: calc(34px * var(--ds)); }
  .t3-ticks i { width: 30px; }
  .lp .lp-turn.scrolly4 { height: 2600px; }
}
.lp-turn.scrolly4 { height: calc(100vh - var(--stick-top) + 1600px); height: calc(100svh - var(--stick-top) + 1600px); }
@container lp (min-width: 1000px) { .lp .lp-turn.scrolly4 { height: 2600px; } }
.t3-sound { color: var(--t3-ink2); border-color: rgba(44, 44, 44, 0.35); }
.t3-tags { bottom: auto; top: 50%; }
@container lp (min-width: 1000px) {
  .t3-stage { grid-template-rows: 1fr auto auto 1fr; }
  .t3-head { grid-row: 2; }
  .t3-steps-wrap { grid-row: 3; }
  .t3-stage::before { top: 0; bottom: 0; left: auto; right: 0; width: 58%; height: auto; background: linear-gradient(to left, var(--t3-bg) 0%, rgba(195, 193, 188, 0.92) 55%, rgba(195, 193, 188, 0) 100%); }
  .t3-stage::after { display: none; }
  .t3-tags { top: auto; bottom: 14px; left: 64px; }
  .t3-fade { height: 440px; }
  .t3-fade-out { height: 260px; }
}
/* Round 12, then (Sherman: "switch the order … the render should be right under the main hero and then the
   notifications should be under the ring render … make sure the transition colors gradually change"): hero, the ring,
   the notifications, the befores. Each join is an eased fade from the colour above to the colour below. */
.t3-fade { height: 240px; background: linear-gradient(to bottom, rgb(28, 29, 30) 0%, rgb(28, 29, 30) 6.25%, rgb(29, 30, 31) 12.5%, rgb(32, 33, 34) 18.75%, rgb(38, 39, 40) 25%, rgb(48, 49, 49) 31.25%, rgb(63, 64, 63) 37.5%, rgb(84, 84, 83) 43.75%, rgb(112, 111, 109) 50%, rgb(139, 138, 135) 56.25%, rgb(160, 158, 155) 62.5%, rgb(175, 173, 169) 68.75%, rgb(185, 183, 178) 75%, rgb(191, 189, 184) 81.25%, rgb(194, 192, 187) 87.5%, rgb(195, 193, 188) 93.75%, rgb(195, 193, 188) 100%); }
.t3-fade-out { height: 340px; background: linear-gradient(to bottom, rgb(195, 193, 188) 0%, rgb(195, 193, 188) 6.25%, rgb(194, 192, 187) 12.5%, rgb(191, 189, 184) 18.75%, rgb(185, 183, 178) 25%, rgb(175, 173, 169) 31.25%, rgb(160, 158, 155) 37.5%, rgb(139, 138, 135) 43.75%, rgb(112, 111, 109) 50%, rgb(84, 84, 83) 56.25%, rgb(63, 64, 63) 62.5%, rgb(48, 49, 49) 68.75%, rgb(38, 39, 40) 75%, rgb(32, 33, 34) 81.25%, rgb(29, 30, 31) 87.5%, rgb(28, 29, 30) 93.75%, rgb(28, 29, 30) 100%); }
.nz-fade-out { height: 300px; background: linear-gradient(to bottom, rgb(24, 23, 22) 0%, rgb(24, 23, 22) 6.25%, rgb(26, 25, 24) 12.5%, rgb(30, 29, 28) 18.75%, rgb(38, 37, 36) 25%, rgb(51, 50, 49) 31.25%, rgb(71, 70, 68) 37.5%, rgb(98, 97, 96) 43.75%, rgb(135, 134, 132) 50%, rgb(172, 171, 168) 56.25%, rgb(199, 198, 196) 62.5%, rgb(219, 218, 215) 68.75%, rgb(232, 231, 228) 75%, rgb(240, 239, 236) 81.25%, rgb(244, 243, 240) 87.5%, rgb(246, 245, 242) 93.75%, rgb(246, 245, 242) 100%); }
.nz-fade-out + .lp-sec { border-top: 0; }
@container lp (min-width: 1000px) {
  .t3-fade, .t3-fade-out { height: 440px; }
  .nz-fade-out { height: 380px; }
}
/* Round 13 (Sherman: "it turns like the bezel on a watch … no opacity and then once you scroll … no battery, no app,
   analog on purpose shows up … as they scroll, it slowly fades … then the ring shows up … the do your nine … should move up
   a little bit more … it can almost overlay the bottom of the ring"): with script, the headline holds the empty stage on
   its own, centred; it gives way to the ring, and the steps sit just over the ring's lower edge (placed by script). */
/* Then (Sherman: "instead of it fading away, I want it to slowly slide or glide up to the top of the rendered ring"): the
   headline's resting place is the top of the stage on a phone and its place beside the ring on desktop; script starts it
   at the centre and glides it there. grid-area: auto, so the stage itself (not a grid row) is what they're placed in. */
.scrolly4 .t3-head { grid-area: auto; position: absolute; left: 0; right: 0; top: 0; z-index: 2; padding: 22px 24px 0; pointer-events: none; will-change: transform; }
.scrolly4 .t3-h { font-size: calc(30px * var(--ds)); max-width: 14ch; }
/* Once it's up, a wash of the wall tone behind it, so it reads over the render's blind shadows (script sets --wash). */
.scrolly4 .t3-head::before { content: ""; position: absolute; left: 0; right: 0; top: 0; bottom: -48px; z-index: -1; pointer-events: none; opacity: var(--wash, 0);
  background: linear-gradient(to bottom, var(--t3-bg) 0, var(--t3-bg) 62%, rgba(195, 193, 188, 0) 100%); }
.scrolly4 .t3-sub { margin-top: 4px; }
.scrolly4 .t3-steps-wrap { grid-area: auto; position: absolute; left: 20px; right: 20px; top: 58%; z-index: 1; }
.scrolly4 .t3-tags { top: 46%; bottom: auto; }
/* No headline over the ring any more, so the top wash comes off. */
.scrolly4 .t3-stage::before { display: none; }
/* A soft wash of the wall tone behind the steps, so they read over the ring's lower edge. */
.scrolly4 .t3-steps-wrap::before { content: ""; position: absolute; left: -20px; right: -20px; top: -46px; bottom: -400px; z-index: -1; pointer-events: none;
  background: linear-gradient(to bottom, rgba(195, 193, 188, 0) 0, rgba(195, 193, 188, 0.72) 46px, rgba(195, 193, 188, 0.9) 96px, var(--t3-bg) 150px); }
@container lp (min-width: 1000px) {
  .scrolly4 .t3-head { position: relative; left: auto; right: auto; top: auto; grid-column: 2; grid-row: 2; padding: 0 0 22px; }
  .scrolly4 .t3-h { font-size: calc(50px * var(--ds)); max-width: 16ch; }
  .scrolly4 .t3-steps-wrap { position: relative; left: auto; right: auto; top: auto; grid-column: 2; grid-row: 3; }
  .scrolly4 .t3-tags { top: auto; bottom: 14px; }
  .scrolly4 .t3-head::before { display: none; }
  .scrolly4 .t3-steps-wrap::before { display: none; }
}
/* Round 13c (Sherman: "it just looks too gadgety … make it more elegant and premium"; he picked F of four): with script,
   no heading, ticks or pill. "Do your nine" is a small label in spaced capitals above the ring (it arrives with the ring);
   the step is set like the headline, centred; nine small dots, like the bezel's nine places, keep the count; each step
   crossfades slowly; sound is a quiet text link. Without script, the plain list and its heading stay. */
.t3-label { display: none; }
.scrolly4 .t3-label { display: block; margin: 18px 0 0; font-family: var(--f); font-size: 11px; font-weight: 600; letter-spacing: 0.24em; text-transform: uppercase; color: var(--t3-ink2); opacity: var(--wash, 0); }
.scrolly4 .t3-label .ctag { letter-spacing: 0.07em; }
.scrolly4 .t3-steps-top { display: none; }
.scrolly4 .t3-steps-wrap { gap: 10px; justify-items: center; text-align: center; }
.scrolly4 .t3-steps-wrap::before { top: -30px; }
.scrolly4 .t3-live { gap: 14px; justify-items: center; }
.scrolly4 .t3-line { font-weight: var(--fd-wght); font-size: calc(25px * var(--ds)); line-height: 1.18; letter-spacing: calc(-0.015em + var(--fd-track)); text-align: center; max-width: 15ch; min-height: 4.72em; display: flex; align-items: center; justify-content: center;
  transition: opacity 0.32s ease, filter 0.32s ease; }
.scrolly4 .t3-line.swap { opacity: 0; transform: none; filter: blur(2px); }
.scrolly4 .t3-line.enter { opacity: 0; transform: none; filter: blur(2px); transition: none; }
.scrolly4 .t3-line:not(.swap):not(.enter) { transition: opacity 0.55s ease, filter 0.55s ease; }
.scrolly4 .t3-ticks { justify-content: center; gap: 11px; }
.scrolly4 .t3-ticks i { width: 5px; height: 5px; border-radius: 50%; background: rgba(44, 44, 44, 0.22); transition: background 0.4s ease; }
.scrolly4 .t3-ticks i.on { background: var(--nb-ink); }
.t3-sound { justify-self: start; }
.scrolly4 .t3-sound { justify-self: center; border: 0; padding: 4px 2px; background: none; font-size: 12px; letter-spacing: 0.02em; color: var(--t3-ink2); text-decoration: underline; text-decoration-color: rgba(44, 44, 44, 0.3); text-underline-offset: 3px; }
.lp-turn.t3-tight .t3-line { font-size: calc(21px * var(--ds)); }
@container lp (min-width: 1000px) {
  .scrolly4 .t3-label { margin-top: 26px; font-size: 12px; }
  .scrolly4 .t3-steps-wrap, .scrolly4 .t3-live { justify-items: start; text-align: left; }
  .scrolly4 .t3-line { font-size: calc(34px * var(--ds)); text-align: left; justify-content: flex-start; max-width: 16ch; }
  .scrolly4 .t3-ticks { justify-content: flex-start; }
  .scrolly4 .t3-ticks i { width: 6px; height: 6px; }
  .scrolly4 .t3-sound { justify-self: start; }
}
/* Round 14 (Sherman: "perfectly centered … drop that down a little bit … on the left and right side … there shouldn't be
   any gradient where the picture is … shift the ring up a little bit … the nine steps a little bit farther up without
   fading out the bottom of the ring … the gradient between section two and section three needs to be much smoother"). */
/* The copy tags come off inside this scene (they pushed the centred lines off centre); the lines' status is unchanged:
   the headline and "Do your nine" approved, the small line new. */
.scrolly4 .t3-head .ctag { display: none; }
.scrolly4 .t3-head { padding-top: 46px; }
.scrolly4 .t3-tags { top: 12px; }
/* A slightly smaller ring on a phone, so it can sit higher and the steps come up under it; the step box holds three lines. */
.lp-turn { --t3-ring: 0.56; }
.scrolly4 .t3-line { max-width: 17ch; min-height: 3.6em; }
/* The ring's lower edge stays clear: no wash from the bottom of the stage, and the steps' own wash starts at their top. */
.scrolly4 .t3-stage::after { display: none; }
.scrolly4 .t3-steps-wrap::before { top: 0; bottom: -400px; background: linear-gradient(to bottom, rgba(195, 193, 188, 0) 0, rgba(195, 193, 188, 0.45) 22px, rgba(195, 193, 188, 0.85) 54px, var(--t3-bg) 96px); }
/* The stage clips what it holds: the steps' wash ran 400px past its foot and painted over the fade into section 3. */
.scrolly4 .t3-stage { overflow: clip; }
/* Section 2 into section 3: longer, and eased in perceived lightness (OKLab, smootherstep, 33 stops), so no band shows. */
.t3-fade-out { height: 560px; background: linear-gradient(to bottom, rgb(195, 193, 188) 0%, rgb(195, 193, 188) 3.13%, rgb(195, 193, 188) 6.25%, rgb(194, 192, 187) 9.38%, rgb(192, 190, 185) 12.50%, rgb(189, 188, 183) 15.63%, rgb(186, 184, 179) 18.75%, rgb(181, 180, 175) 21.88%, rgb(176, 174, 170) 25%, rgb(169, 168, 164) 28.13%, rgb(162, 160, 157) 31.25%, rgb(153, 152, 149) 34.38%, rgb(144, 143, 140) 37.50%, rgb(135, 134, 131) 40.63%, rgb(125, 125, 122) 43.75%, rgb(115, 115, 113) 46.88%, rgb(105, 105, 103) 50%, rgb(96, 95, 94) 53.13%, rgb(86, 86, 85) 56.25%, rgb(77, 77, 77) 59.38%, rgb(69, 69, 69) 62.50%, rgb(61, 61, 61) 65.63%, rgb(54, 55, 55) 68.75%, rgb(48, 49, 49) 71.88%, rgb(43, 43, 44) 75%, rgb(38, 39, 40) 78.13%, rgb(35, 36, 36) 81.25%, rgb(32, 33, 34) 84.38%, rgb(30, 31, 32) 87.50%, rgb(29, 30, 31) 90.63%, rgb(28, 29, 30) 93.75%, rgb(28, 29, 30) 96.88%, rgb(28, 29, 30) 100%); }
@container lp (min-width: 1000px) {
  .scrolly4 .t3-head { padding-top: 0; }
  .t3-fade-out { height: 720px; }
}
/* Round 15 (Sherman: "drop down the nine steps further down … make it bigger, like the font and everything … more
   prominent … make do your nine the font a little bit bigger"). */
.scrolly4 .t3-line { font-size: calc(30px * var(--ds)); line-height: 1.14; max-width: min(21ch, 100%); min-height: 3.42em; }
.lp-turn.t3-tight .t3-line { font-size: calc(24px * var(--ds)); }
.scrolly4 .t3-live { gap: 18px; }
.scrolly4 .t3-ticks { gap: 13px; }
.scrolly4 .t3-ticks i { width: 7px; height: 7px; }
.scrolly4 .t3-sound { font-size: 13px; }
.scrolly4 .t3-label { font-size: 13px; letter-spacing: 0.22em; margin-top: 20px; }
@container lp (min-width: 1000px) {
  .scrolly4 .t3-line { font-size: calc(40px * var(--ds)); max-width: 15ch; }
  .scrolly4 .t3-ticks i { width: 7px; height: 7px; }
  .scrolly4 .t3-label { font-size: 14px; }
}
/* Round 16 (Sherman: "can it already start some of the fade into section three … not such a big gap of nothing … the
   top of section three … a little bit of fade … make the scroll in between section two and three even smaller"): one
   ramp in three pieces (OKLab, smootherstep): the foot of section 2 as it leaves, a short strip, the top of section 3. */
.scrolly4 .t3-stage::after { display: block; top: auto; bottom: 0; height: 15%; z-index: 3; opacity: var(--end, 0); background: linear-gradient(to bottom, rgba(195, 193, 188, 0) 0%, rgba(195, 193, 188, 0.7) 22%, rgb(195, 193, 188) 40.0%, rgb(195, 193, 188) 46.0%, rgb(195, 193, 188) 52.0%, rgb(195, 193, 188) 58.0%, rgb(195, 193, 188) 64.0%, rgb(194, 192, 187) 70.0%, rgb(194, 192, 187) 76.0%, rgb(193, 191, 186) 82.0%, rgb(192, 190, 185) 88.0%, rgb(191, 189, 184) 94.0%, rgb(189, 187, 182) 100.0%); }
.t3-fade-out { height: 220px; background: linear-gradient(to bottom, rgb(189, 187, 182) 0.0%, rgb(187, 185, 180) 5.6%, rgb(183, 182, 177) 11.1%, rgb(180, 178, 174) 16.7%, rgb(176, 174, 170) 22.2%, rgb(171, 170, 166) 27.8%, rgb(166, 165, 161) 33.3%, rgb(161, 159, 156) 38.9%, rgb(155, 154, 150) 44.4%, rgb(149, 148, 144) 50.0%, rgb(142, 141, 138) 55.6%, rgb(136, 135, 132) 61.1%, rgb(129, 128, 125) 66.7%, rgb(122, 121, 119) 72.2%, rgb(114, 114, 112) 77.8%, rgb(107, 107, 105) 83.3%, rgb(100, 100, 99) 88.9%, rgb(94, 93, 92) 94.4%, rgb(87, 87, 86) 100.0%); }
.nz-topfade { position: absolute; left: 0; right: 0; top: 0; height: 260px; z-index: -1; pointer-events: none; background: linear-gradient(to bottom, rgb(87, 87, 86) 0.0%, rgba(79, 79, 78, 0.989) 6.3%, rgba(71, 72, 71, 0.957) 12.5%, rgba(64, 65, 65, 0.908) 18.8%, rgba(58, 58, 58, 0.844) 25.0%, rgba(52, 53, 53, 0.768) 31.3%, rgba(47, 47, 48, 0.684) 37.5%, rgba(42, 43, 44, 0.593) 43.8%, rgba(38, 39, 40, 0.500) 50.0%, rgba(35, 36, 37, 0.407) 56.3%, rgba(33, 34, 35, 0.316) 62.5%, rgba(31, 32, 33, 0.232) 68.8%, rgba(30, 31, 31, 0.156) 75.0%, rgba(29, 30, 31, 0.092) 81.3%, rgba(28, 29, 30, 0.043) 87.5%, rgba(28, 29, 30, 0.011) 93.8%, rgba(28, 29, 30, 0.000) 100.0%); }
/* The section's own last pixels take the strip's first tone, so no lighter hairline shows where the stage meets the strip
   (it showed in the scaled desktop preview). */
.lp-turn.scrolly4 { background: linear-gradient(to bottom, var(--t3-bg) calc(100% - 4px), rgb(189, 187, 182) calc(100% - 4px)); }
/* And each join overlaps by a pixel, so the scaled desktop preview can't open a hairline between them. */
.lp-turn + .t3-fade-out { position: relative; z-index: 1; margin-top: -1px; }
.t3-fade-out + .lp-noise { margin-top: -1px; background: linear-gradient(to bottom, rgb(87, 87, 86) 0, rgb(87, 87, 86) 4px, #1C1D1E 4px); }
@container lp (min-width: 1000px) {
  .scrolly4 .t3-stage::after { display: block; left: 0; right: 0; width: auto; height: 14%; }
  .t3-fade-out { height: 260px; }
  .nz-topfade { height: 320px; }
}
/* Round 17 (Sherman: "the top section already kind of does … the nine clicks … remove … the ring and the sound on the
   notification one"; the ending "And then, the moment."; the cards fall in one at a time, timed): no dial, hint or sound
   here (the audio element stays, section 2's clicks use it); one centred column; a longer track on a phone, about a short
   swipe per card. */
.lp .lp-noise .nz-b, .lp .lp-noise.scrolly .nz-b { display: none !important; }
.lp-noise.scrolly { height: calc(100vh - var(--stick-top) + 1500px); height: calc(100svh - var(--stick-top) + 1500px); }
.lp-noise .nz-card { will-change: transform, opacity; }
/* The ending is the section's last word, so it's set like a headline. */
.lp .lp-noise.scrolly .nz-end { font-size: calc(32px * var(--ds)); line-height: 1.08; padding-inline: 20px; }
@container lp (min-width: 1000px) {
  .lp .lp-noise.scrolly .nz-end { font-size: calc(56px * var(--ds)); }
  .lp-noise .nz-sticky { grid-template-columns: minmax(0, 600px); justify-content: center; }
  .lp-noise.scrolly { height: 2980px; }
}
/* Round 19 (Sherman: "having it full size like that is nice … but I want it to be a slide where people swipe … let's try
   the light stone having it slide … make sure it fades well … between the two sections, seamlessly"): the befores as a
   slider of big frames on Stone. One ramp from section 3's near-black to Stone (OKLab, smootherstep): its first piece
   lightens section 3's foot as it leaves, the rest is the strip. Bright Brick stays off light grounds, so the numbers
   are the darker grey. */
.lp-noise.scrolly .nz-sticky::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 14%; z-index: 5; pointer-events: none; opacity: var(--end, 0);
  background: linear-gradient(to bottom, rgba(24, 23, 22, 0) 0%, rgba(24, 23, 22, 0.7) 22%, rgb(24, 23, 22) 40.0%, rgb(24, 23, 22) 47.5%, rgb(24, 23, 22) 55.0%, rgb(24, 23, 22) 62.5%, rgb(24, 23, 22) 70.0%, rgb(25, 24, 23) 77.5%, rgb(25, 24, 23) 85.0%, rgb(25, 24, 23) 92.5%, rgb(26, 25, 24) 100.0%); }
.nz-fade-out { height: 400px; background: linear-gradient(to bottom, rgb(26, 25, 24) 0.0%, rgb(28, 27, 26) 4.2%, rgb(32, 31, 30) 8.3%, rgb(37, 35, 34) 12.5%, rgb(43, 41, 40) 16.7%, rgb(50, 49, 47) 20.8%, rgb(59, 57, 55) 25.0%, rgb(68, 67, 65) 29.2%, rgb(79, 78, 75) 33.3%, rgb(91, 89, 87) 37.5%, rgb(104, 102, 98) 41.7%, rgb(116, 114, 111) 45.8%, rgb(129, 127, 123) 50.0%, rgb(142, 139, 135) 54.2%, rgb(154, 151, 147) 58.3%, rgb(165, 163, 158) 62.5%, rgb(175, 173, 167) 66.7%, rgb(184, 181, 176) 70.8%, rgb(192, 189, 183) 75.0%, rgb(197, 195, 189) 79.2%, rgb(202, 199, 193) 83.3%, rgb(205, 202, 196) 87.5%, rgb(206, 203, 197) 91.7%, rgb(207, 204, 198) 95.8%, rgb(207, 204, 198) 100.0%); }
/* Each join overlaps by a pixel, and the section's last pixels take the strip's first tone (no hairline when scaled). */
.lp-noise + .nz-fade-out { position: relative; z-index: 8; margin-top: -1px; }
.t3-fade-out + .lp-noise.scrolly { background: linear-gradient(to bottom, rgb(87, 87, 86) 0, rgb(87, 87, 86) 4px, #1C1D1E 4px, #1C1D1E calc(100% - 4px), rgb(26, 25, 24) calc(100% - 4px)); }
.lp-nine { background: var(--nb-stone); color: var(--nb-ink); border-top: 0; padding-block: 56px 72px; gap: 32px; }
.lp-nine + .lp-sec { border-top: 0; }
.lp-nine .lp-h2 { font-size: calc(34px * var(--ds)); line-height: 1.06; max-width: 12ch; }
.lp-nine .lp-rail { grid-auto-flow: column; grid-auto-columns: 88%; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; margin-inline: -20px; padding: 0 20px 4px; scroll-padding-inline: 20px; scrollbar-width: none; }
.lp-nine .lp-rail::-webkit-scrollbar { display: none; }
.lp-nine .lp-card { gap: 16px; scroll-snap-align: start; }
/* On a phone, a frame is as big as the screen allows with its line and the count still in view. */
@container lp (max-width: 999px) { .lp-nine .lp-rail { grid-auto-columns: min(88%, calc((100svh - 220px) * 0.75)); } }
/* Round 20 (Sherman picked B, 2026-10-03): section 5, why a ring, is the line alone on Stone, the stillest beat on the
   page, straight on from the slider; then an eased fade from Stone into the founder section's off-white. Hand frame 4
   is off it (it repeated card 04). */
.lp-why-line { background: var(--nb-stone); color: var(--nb-ink); border-top: 0; padding: 104px 20px 120px; align-content: center; }
.lp-why-line .lp-big { color: var(--nb-ink); font-size: calc(36px * var(--ds)); line-height: 1.08; letter-spacing: calc(-0.022em + var(--fd-track)); max-width: 12ch; }
.lp-why-line .ctag { background: var(--nb-stone); }
.lp-nine + .lp-why-line { margin-top: -1px; }
.why-fade-out { position: relative; z-index: 1; height: 220px; margin-top: -1px; background: linear-gradient(to bottom, rgb(207, 204, 198) 0%, rgb(207, 204, 198) 8.33%, rgb(208, 205, 200) 16.67%, rgb(211, 208, 202) 25%, rgb(215, 212, 207) 33.33%, rgb(220, 218, 213) 41.67%, rgb(226, 224, 220) 50%, rgb(232, 231, 227) 58.33%, rgb(238, 236, 233) 66.67%, rgb(242, 241, 237) 75%, rgb(245, 244, 240) 83.33%, rgb(246, 245, 242) 91.67%, rgb(246, 245, 242) 100%); }
.why-fade-out + .lp-sec { border-top: 0; margin-top: -1px; }
@container lp (min-width: 1000px) {
  .lp-why-line { padding: 176px 64px 200px; }
  .lp-why-line .lp-big { font-size: calc(76px * var(--ds)); max-width: 15ch; }
  .why-fade-out { height: 280px; }
}
.lp-nine .lp-card .lp-fig, .lp-nine .lp-card .ph { aspect-ratio: 3 / 4; }
.lp-nine .lp-fig { background: #BDBAB4; }
.lp-nine .lp-card figcaption { display: block; font-size: calc(26px * var(--ds)); line-height: 1.1; letter-spacing: calc(-0.016em + var(--fd-track)); }
.lp-nine .lp-card .n { display: block; margin-bottom: 8px; color: #45433F; font-size: 12px; font-weight: 600; letter-spacing: 0.16em; }
.lp-nine .ctag { background: var(--nb-stone); }
.nine-nav { display: flex; align-items: center; gap: 14px; margin-top: 6px; }
.nine-count { font-size: 12px; font-weight: 600; letter-spacing: 0.16em; color: #45433F; font-variant-numeric: tabular-nums; }
.nine-bar { position: relative; flex: 1 1 auto; height: 1px; background: rgba(44, 44, 44, 0.22); overflow: hidden; }
.nine-bar i { position: absolute; left: 0; top: 0; bottom: 0; width: 20%; background: var(--nb-ink); transition: transform 0.15s linear; }
.nine-arrow { display: none; width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(44, 44, 44, 0.3); background: none; color: var(--nb-ink); cursor: pointer; padding: 0; }
.nine-arrow svg { width: 18px; height: 18px; display: block; margin: auto; fill: none; stroke: currentColor; stroke-width: 1.5; }
.nine-arrow:disabled { opacity: 0.3; cursor: default; }
@container lp (min-width: 1000px) {
  .lp-noise.scrolly .nz-sticky::after { height: 12%; }
  .nz-fade-out { height: 480px; }
  .lp-nine { padding: 112px 64px 128px; row-gap: 48px; }
  .lp-nine .lp-h2 { font-size: calc(64px * var(--ds)); max-width: 14ch; }
  .lp-nine .lp-rail { grid-auto-columns: 420px; gap: 20px; margin-inline: -64px; padding-inline: 64px; scroll-padding-inline: 64px; }
  .lp-nine .lp-card figcaption { font-size: calc(26px * var(--ds)); }
  .nine-arrow { display: block; }
}
/* Round 21 (Sherman: "I don't want to use just like a 3D render like that … pointing things out on the image … so
   people really understand the ring"; he picked B): the window-light render from section 2, cropped in on the ring, with
   four numbered points; the legend under it on a phone, beside it on desktop. Only what the files confirm. */
.lp-anat { gap: 24px; }
.lp .anat-fig { position: relative; margin: 0 -20px; aspect-ratio: 4 / 5; overflow: hidden; background: #9C8676; }
.lp .anat-fig img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.anat-pt { position: absolute; width: 28px; height: 28px; margin: -14px 0 0 -14px; padding: 0; border: 0; border-radius: 50%; background: var(--nb-ground); color: var(--nb-ink); font: 600 12px/28px var(--f); text-align: center; cursor: pointer; box-shadow: 0 1px 8px rgba(0, 0, 0, 0.28); transition: transform 0.25s ease, background 0.25s ease, color 0.25s ease; }
.anat-pt::after { content: ""; position: absolute; inset: -7px; border-radius: 50%; border: 1px solid rgba(246, 245, 242, 0.7); opacity: 0; transition: opacity 0.25s ease; }
.anat-pt.on { background: var(--nb-ink); color: var(--nb-ground); transform: scale(1.12); }
.anat-pt.on::after { opacity: 1; }
.anat-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
.anat-list li { display: grid; grid-template-columns: 30px 1fr; gap: 2px 12px; font-size: 15.5px; line-height: 1.4; color: var(--nb-ink2); cursor: pointer; transition: opacity 0.25s ease; }
.anat-list li b { display: block; color: var(--nb-ink); font-family: var(--fd); font-stretch: var(--fd-wdth); font-weight: 600; font-size: calc(17px * var(--ds)); }
.anat-n { grid-row: span 2; width: 24px; height: 24px; border-radius: 50%; border: 1px solid var(--nb-ink); font: 600 11px/23px var(--f); text-align: center; color: var(--nb-ink); transition: background 0.25s ease, color 0.25s ease; }
.anat-list li.on .anat-n { background: var(--nb-ink); color: var(--nb-ground); }
.lp-anat.picking .anat-list li:not(.on) { opacity: 0.45; }
.anat-sound { margin: 4px 0 0; font-size: 14px; color: var(--nb-ink2); }
@container lp (min-width: 1000px) {
  .lp-anat .lp-a { grid-column: 1 / span 6; align-self: start; }
  .lp-anat .lp-b { grid-column: 8 / span 5; align-self: center; gap: 28px; }
  .lp .anat-fig { margin: 0; }
  .anat-list { gap: 22px; }
  .anat-list li { font-size: 17px; }
  .anat-list li b { font-size: calc(20px * var(--ds)); }
}
/* Round 23 (Sherman: "I like the clean graphite … what different variations"; he picked B4 + B3): the footer on plain
   Graphite, no image. "Drop 001." large; an underlined field with a full-width light button under it (one big tap on a
   phone); the reassurances; then "Claim your moment." in Bright Brick above the name, set across the full width. An
   eased fade (OKLab) carries section 7's off-white into the Graphite. */
.foot-fade { position: relative; z-index: 1; height: 260px; margin-bottom: -1px; background: linear-gradient(to bottom, rgb(246, 245, 242) 0%, rgb(246, 245, 242) 4.17%, rgb(245, 244, 241) 8.33%, rgb(242, 241, 238) 12.50%, rgb(238, 237, 234) 16.67%, rgb(231, 231, 228) 20.83%, rgb(223, 222, 219) 25%, rgb(212, 211, 209) 29.17%, rgb(199, 198, 196) 33.33%, rgb(185, 184, 182) 37.50%, rgb(170, 169, 167) 41.67%, rgb(154, 153, 152) 45.83%, rgb(138, 137, 136) 50%, rgb(122, 122, 121) 54.17%, rgb(107, 107, 106) 58.33%, rgb(94, 93, 93) 62.50%, rgb(81, 81, 81) 66.67%, rgb(71, 71, 70) 70.83%, rgb(62, 62, 62) 75%, rgb(55, 55, 55) 79.17%, rgb(50, 50, 50) 83.33%, rgb(47, 47, 47) 87.50%, rgb(45, 45, 45) 91.67%, rgb(44, 44, 44) 95.83%, rgb(44, 44, 44) 100%); }
.lp-footer-b { background: var(--nb-ink); padding: 72px 20px 36px; }
.lp-footer-b .lp-h2 { font-size: calc(46px * var(--ds)); line-height: 1.02; letter-spacing: calc(-0.03em + var(--fd-track)); }
.lp-footer-b .lp-form { flex-direction: column; gap: 14px; margin-top: 10px; }
.lp-footer-b .lp-form input { height: 52px; padding: 0 2px; background: transparent; border: 0; border-bottom: 1px solid rgba(246, 245, 242, 0.55); border-radius: 0; color: var(--nb-ground); text-align: center; }
.lp-footer-b .lp-form input::placeholder { color: rgba(246, 245, 242, 0.6); }
.lp-footer-b .lp-form input:focus-visible { outline: none; border-bottom-color: var(--nb-ground); }
.lp-footer-b .lp-form button { width: 100%; height: 52px; background: var(--nb-ground); color: var(--nb-ink); box-shadow: none; }
.lp-footer-b .lp-form button:hover { background: #FFFFFF; }
.lp-footer-b .lp-form button:focus-visible { outline: 2px solid var(--nb-ground); outline-offset: 3px; }
.lp-footer-b .lp-footer-sign { display: flex; flex-direction: column-reverse; align-items: center; gap: 14px; margin-top: 72px; padding-top: 0; border-top: 0; }
.lp-footer-b .lp-footer-sign .lp-wm { width: 100%; }
.lp-footer-b .lp-signoff { font-size: 15px; }
.lp-footer-b .lp-foot { margin-top: 24px; }
@container lp (min-width: 1000px) {
  .foot-fade { height: 340px; }
  .lp-footer-b { padding: 140px 64px 56px; }
  .lp-footer-b .lp-final { max-width: 520px; }
  .lp-footer-b .lp-h2 { font-size: calc(88px * var(--ds)); }
  .lp-footer-b .lp-footer-sign { margin-top: 120px; gap: 22px; }
  .lp-footer-b .lp-footer-sign .lp-wm { width: 100%; max-width: 1312px; }
  .lp-footer-b .lp-signoff { font-size: 18px; }
}
/* Round 25 (Sherman, 2026-10-03: "I couldn't switch off." as the header, his story in beats 2, 3, 4, 7 and 9, then
   "I built the thing I wish I'd had."; about 120 words): a small label so the voice is clear before the name, the header
   at the page's headline size, the story at reading size, the close a touch heavier. A stand-in photo of him holds the slot until his shoot (R4). */
.lp-founder .fd-copy { gap: 0; align-self: center; }
/* The stand-in photo (2026-10-05): his own photo, upscaled, background cleaned, face unchanged; 4:5 like the shoot. */
.lp-founder .fd-photo { aspect-ratio: 4 / 5; background: var(--nb-stone); }
.fd-eye { margin: 0 0 14px; font-size: 13px; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: var(--nb-ink2); }
.lp-founder .fd-h { font-size: calc(34px * var(--ds)); line-height: 1.06; letter-spacing: calc(-0.022em + var(--fd-track)); max-width: 14ch; }
.fd-story { margin-top: 22px; gap: 16px; }
.fd-story p { text-wrap: pretty; }
.fd-close { font-weight: 500; }
.lp-founder .lp-sign { margin-top: 22px; }
/* Then (Sherman: "add back the train your mind the way you train your body"): the belief under his story, set apart by a
   hairline and a step up in size, before his name. */
.lp-founder .fd-belief { margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--nb-line); font-family: var(--fd); font-stretch: var(--fd-wdth); font-weight: var(--fd-wght); font-size: calc(22px * var(--ds)); line-height: 1.18; letter-spacing: calc(-0.012em + var(--fd-track)); text-wrap: balance; }
.lp-founder .fd-belief + .lp-sign { margin-top: 14px; }
@container lp (min-width: 1000px) {
  .lp-founder .fd-belief { margin-top: 36px; padding-top: 30px; font-size: calc(30px * var(--ds)); max-width: min(100%, 570px); }
  .fd-eye { font-size: 14px; margin-bottom: 18px; }
  .lp-founder .fd-h { font-size: calc(58px * var(--ds)); }
  .fd-story { margin-top: 30px; gap: 18px; max-width: 30em; }
  .lp-founder .lp-sign { margin-top: 28px; }
}
/* Round 24 (Sherman: "switches to a dark version over the dark sections"; he picked A): the sticky waitlist bar turns
   near-black over the dark sections and the dark half of each fade, off-white text and a light button like the footer's,
   with a short fade between the two. */
.lp-bar { transition: transform 0.3s ease, background-color 0.35s ease, border-color 0.35s ease; }
.lp-bar span, .lp-bar-btn { transition: color 0.35s ease, background-color 0.35s ease; }
.lp-bar.bar-dark { background: rgba(30, 30, 30, 0.9); border-top-color: rgba(246, 245, 242, 0.12); }
.lp-bar.bar-dark span { color: rgba(246, 245, 242, 0.75); }
.lp-bar.bar-dark .lp-bar-btn { background: var(--nb-ground); color: var(--nb-ink); }
/* Round 26 (Sherman: "yes, Stone"): the details on Stone, so the founder's letter and the object read as two moments and
   the walnut render's pale top sits close to the ground; eased fades (OKLab) in from the founder's off-white and out into
   the footer's Graphite replace the thin rule. */
.det-fade { position: relative; z-index: 1; height: 200px; margin-bottom: -1px; background: linear-gradient(to bottom, rgb(246, 245, 242) 0%, rgb(246, 245, 242) 8.33%, rgb(245, 244, 240) 16.67%, rgb(242, 241, 237) 25%, rgb(238, 236, 233) 33.33%, rgb(232, 231, 227) 41.67%, rgb(226, 224, 220) 50%, rgb(220, 218, 213) 58.33%, rgb(215, 212, 207) 66.67%, rgb(211, 208, 202) 75%, rgb(208, 205, 200) 83.33%, rgb(207, 204, 198) 91.67%, rgb(207, 204, 198) 100%); }
.det-fade + .lp-sec { border-top: 0; }
.lp-anat { background: var(--nb-stone); }
.lp-anat .ctag { background: var(--nb-stone); }
.foot-fade { background: linear-gradient(to bottom, rgb(207, 204, 198) 0%, rgb(207, 204, 198) 4.17%, rgb(206, 203, 197) 8.33%, rgb(204, 201, 195) 12.50%, rgb(201, 198, 192) 16.67%, rgb(195, 193, 187) 20.83%, rgb(188, 186, 180) 25%, rgb(180, 177, 172) 29.17%, rgb(170, 167, 163) 33.33%, rgb(158, 156, 152) 37.50%, rgb(146, 144, 140) 41.67%, rgb(133, 132, 128) 45.83%, rgb(120, 119, 116) 50%, rgb(108, 107, 104) 54.17%, rgb(96, 95, 93) 58.33%, rgb(84, 84, 82) 62.50%, rgb(74, 74, 73) 66.67%, rgb(66, 65, 65) 70.83%, rgb(59, 58, 58) 75%, rgb(53, 53, 53) 79.17%, rgb(49, 49, 49) 83.33%, rgb(46, 46, 46) 87.50%, rgb(45, 45, 45) 91.67%, rgb(44, 44, 44) 95.83%, rgb(44, 44, 44) 100%); }
.foot-fade { margin-top: -1px; }
@container lp (min-width: 1000px) { .det-fade { height: 260px; } }
/* 2026-10-05, from the desktop chat (Sherman: "publish it, and do the phone version too"): Old Gold on the phone. The
   accent is Old Gold, replacing Bright Brick (company decision, company/decisions/2026-10.md): the light gold as text on
   dark grounds, the mid gold as marks on light grounds, the text gold only in "THE FOUNDER". Section 5 goes on Graphite
   with "your hand." in gold; its two joins are OKLab smootherstep ramps from the befores' slider to the line and from
   the line to the founder's photo (generated, measured at 390 px). The desktop has the same in desktop.css. */
.lp-page { --nb-gold: #CFA74E; --nb-gold-mark: #B08A32; --nb-gold-text: #A6822C; }
@container lp (max-width: 999px) {
  .lp-hero.over .lp-claim { color: var(--nb-gold); }
  .lp-noise .nz-end .nz-moment { color: var(--nb-gold); }
  .scrolly4 .t3-ticks i.on { background: var(--nb-gold-mark); }
  .lp-nine .nine-bar i { background: var(--nb-gold-mark); }
  .lp-signoff { color: var(--nb-gold); }
  .lp-founder .fd-eye { color: var(--nb-gold-text); }
  .lp-why-line .lp-big { color: var(--nb-ground); }
  .lp-why .why-hand { color: var(--nb-gold); }
  .lp-why-line .ctag { background: var(--nb-ink); }
  /* The befores into section 5: one ramp on one layer (2026-10-05, like desktop), from tools/gen-phone-joins.cjs. */
  .lp-nine { background: var(--nb-stone); }
  .lp-why-line { position: relative; background: linear-gradient(to bottom, rgb(44, 44, 44) 0.00%, rgb(44, 44, 44) 3.57%, rgb(44, 44, 44) 7.14%, rgb(44, 44, 44) 10.71%, rgb(44, 44, 44) 14.29%, rgb(45, 45, 45) 17.86%, rgb(46, 46, 46) 21.43%, rgb(46, 46, 46) 25.00%, rgb(48, 48, 47) 28.57%, rgb(49, 49, 49) 32.14%, rgb(51, 51, 50) 35.71%, rgb(53, 52, 52) 39.29%, rgb(55, 55, 55) 42.86%, rgb(57, 57, 57) 46.43%, rgb(60, 60, 60) 50.00%, rgb(63, 63, 63) 53.57%, rgb(67, 67, 67) 57.14%, rgb(71, 71, 70) 60.71%, rgb(75, 75, 74) 64.29%, rgb(79, 79, 79) 67.86%, rgb(84, 84, 83) 71.43%, rgb(89, 89, 88) 75.00%, rgb(95, 94, 94) 78.57%, rgb(100, 100, 99) 82.14%, rgb(106, 106, 105) 85.71%, rgb(112, 112, 111) 89.29%, rgb(118, 118, 117) 92.86%, rgb(124, 124, 123) 96.43%, rgb(131, 131, 129) 100.00%) bottom / 100% calc((100svh - var(--stick-top)) / 2 - 105px) no-repeat, var(--nb-ink); }
  .lp-why-line::before { content: ""; position: absolute; left: 0; right: 0; top: -71px; height: calc(71px + (100svh - var(--stick-top)) / 2 - 105px); pointer-events: none; background: linear-gradient(to bottom, rgb(207, 204, 198) 0.00%, rgb(207, 204, 198) 2.86%, rgb(207, 204, 198) 5.71%, rgb(206, 203, 197) 8.57%, rgb(205, 202, 196) 11.43%, rgb(203, 200, 194) 14.29%, rgb(200, 197, 191) 17.14%, rgb(197, 194, 188) 20.00%, rgb(192, 189, 184) 22.86%, rgb(187, 184, 179) 25.71%, rgb(181, 179, 174) 28.57%, rgb(174, 172, 167) 31.43%, rgb(167, 165, 160) 34.29%, rgb(159, 157, 153) 37.14%, rgb(151, 149, 145) 40.00%, rgb(142, 141, 137) 42.86%, rgb(134, 132, 129) 45.71%, rgb(125, 123, 120) 48.57%, rgb(116, 115, 112) 51.43%, rgb(107, 106, 104) 54.29%, rgb(99, 98, 96) 57.14%, rgb(91, 90, 89) 60.00%, rgb(84, 83, 82) 62.86%, rgb(77, 76, 75) 65.71%, rgb(70, 70, 69) 68.57%, rgb(65, 64, 64) 71.43%, rgb(60, 60, 59) 74.29%, rgb(56, 55, 55) 77.14%, rgb(52, 52, 52) 80.00%, rgb(49, 49, 49) 82.86%, rgb(47, 47, 47) 85.71%, rgb(46, 46, 46) 88.57%, rgb(45, 45, 45) 91.43%, rgb(44, 44, 44) 94.29%, rgb(44, 44, 44) 97.14%, rgb(44, 44, 44) 100.00%); }
  .why-fade-out { background: linear-gradient(to bottom, rgb(131, 131, 129) 0.0px, rgb(138, 137, 136) 10.0px, rgb(144, 144, 142) 20.0px, rgb(151, 151, 149) 30.0px, rgb(158, 157, 156) 40.0px, rgb(164, 164, 162) 50.0px, rgb(171, 170, 169) 60.0px, rgb(178, 177, 175) 70.0px, rgb(184, 183, 181) 80.0px, rgb(190, 189, 187) 90.0px, rgb(196, 195, 193) 100.0px, rgb(202, 201, 199) 110.0px, rgb(207, 206, 204) 120.0px, rgb(212, 211, 209) 130.0px, rgb(217, 216, 214) 140.0px, rgb(221, 220, 218) 150.0px, rgb(225, 225, 222) 160.0px, rgb(229, 228, 225) 170.0px, rgb(232, 231, 229) 180.0px, rgb(235, 234, 231) 190.0px, rgb(238, 237, 234) 200.0px, rgb(240, 239, 236) 210.0px, rgb(242, 241, 238) 220.0px); }
  .lp-founder { background: linear-gradient(to bottom, rgb(242, 241, 238) 0.0px, rgb(243, 242, 239) 9.5px, rgb(244, 243, 240) 19.0px, rgb(245, 244, 241) 28.5px, rgb(245, 244, 241) 38.0px, rgb(246, 245, 242) 47.5px, rgb(246, 245, 242) 57.0px, rgb(246, 245, 242) 66.5px, rgb(246, 245, 242) 76.0px) top / 100% 76px no-repeat; }
  /* The two entrances, played once as each line arrives (desktop.js adds .mo-ready only when motion is allowed). On a
     phone the befores' headline keeps its natural wrap (a lift would make "a before." one unbreakable piece): it fades in
     and "a before." fades in last, after a beat. */
  .mo-ready .mo-l { opacity: 0; transition: opacity 0.9s cubic-bezier(0.2, 0.7, 0.2, 1); }
  .mo-ready .mo-l.mo-last { transition: opacity 1.1s cubic-bezier(0.2, 0.7, 0.2, 1); }
  .mo-ready.mo-in .mo-l { opacity: 1; transform: none; }
  .mo-ready.mo-in .mo-l:nth-child(2) { transition-delay: 0.15s; }
  .mo-ready.mo-in .mo-l.mo-last { transition-delay: 0.95s; }
  /* Section 5 holds and follows the scroll, like the desktop (Sherman, 2026-10-05: "do the same on the phone for section 5:
     hold the line on screen and have the reveal follow the scroll"): desktop.js adds .why-pin when motion is allowed; the
     section is a screen plus 700 px tall, its line sticks centred on screen, and the screen line comes in and dims back, the
     hand line comes in and "your hand." warms into gold as you scroll. Without script or with reduced motion it reads as
     before. Its fades above are spread from its edges to the line. */
  .lp-why-line.why-pin { display: block; align-content: start; height: calc(100vh - var(--stick-top) + 450px); height: calc(100svh - var(--stick-top) + 450px); padding: 0; }
  .why-pin .lp-full { position: sticky; top: var(--stick-top); height: calc(100vh - var(--stick-top)); height: calc(100svh - var(--stick-top)); display: grid; align-content: center; padding: 0 20px; }
  .why-pin .mo-s { display: block; }
  /* Section 3 on a phone (Sherman: "hold 'And then, the moment.' longer before the fade into the befores, and make that
     fade rise gradually like desktop"): a 2000 px track (it was 1500); the page's script keeps the thoughts' pace, then
     holds the ending, then eases the fade in over the last 400 px. */
  .lp-noise.scrolly { height: calc(100vh - var(--stick-top) + 2000px); height: calc(100svh - var(--stick-top) + 2000px); }
  /* The details on a phone (Sherman, 2026-10-05: "do the phone version of the details too: off-white with the image to
     the edge, like desktop"): off-white instead of Stone (the image already runs edge to edge here). The founder above is
     off-white too, so the strip between them closes; the fade into the footer is one OKLab smootherstep ramp from the
     details' last line to "Drop 001.", generated by tools/gen-phone-joins.cjs. */
  .lp-anat { background: linear-gradient(to bottom, rgb(246, 245, 242) 0.0px, rgb(246, 245, 242) 9.5px, rgb(246, 245, 242) 19.0px, rgb(245, 244, 241) 28.5px, rgb(244, 243, 240) 38.0px, rgb(243, 242, 239) 47.5px, rgb(241, 240, 237) 57.0px, rgb(238, 237, 235) 66.5px, rgb(235, 234, 231) 76.0px) bottom / 100% 76px no-repeat, var(--nb-ground); }
  .lp-anat .ctag { background: var(--nb-ground); }
  .det-fade { height: 0; }
  .foot-fade { background: linear-gradient(to bottom, rgb(235, 234, 231) 0.0px, rgb(231, 230, 227) 10.0px, rgb(226, 225, 222) 20.0px, rgb(220, 219, 217) 30.0px, rgb(214, 213, 211) 40.0px, rgb(207, 206, 204) 50.0px, rgb(199, 198, 196) 60.0px, rgb(191, 190, 188) 70.0px, rgb(182, 182, 180) 80.0px, rgb(173, 173, 171) 90.0px, rgb(164, 164, 162) 100.0px, rgb(155, 154, 153) 110.0px, rgb(145, 145, 143) 120.0px, rgb(136, 136, 134) 130.0px, rgb(127, 126, 125) 140.0px, rgb(118, 117, 116) 150.0px, rgb(109, 109, 108) 160.0px, rgb(101, 100, 100) 170.0px, rgb(93, 93, 92) 180.0px, rgb(85, 85, 85) 190.0px, rgb(79, 78, 78) 200.0px, rgb(72, 72, 72) 210.0px, rgb(67, 67, 66) 220.0px, rgb(62, 62, 62) 230.0px, rgb(58, 58, 57) 240.0px, rgb(54, 54, 54) 250.0px, rgb(51, 51, 51) 260.0px); }
  .lp-footer-b { background: linear-gradient(to bottom, rgb(51, 51, 51) 0.0px, rgb(49, 49, 49) 10.3px, rgb(47, 47, 47) 20.6px, rgb(45, 45, 45) 30.9px, rgb(45, 45, 45) 41.1px, rgb(44, 44, 44) 51.4px, rgb(44, 44, 44) 61.7px, rgb(44, 44, 44) 72.0px) top / 100% 72px no-repeat, var(--nb-ink); }
  /* The name at the top of the hero on a phone, a fifth bigger (Sherman, 2026-10-05: B of three previews; it was 148 px), like
     the desktop (desktop.css, 272 px). */
  .lp-head .lp-wm { width: 172px; }
}
/* The FAQ (Sherman, 2026-10-05: layout C, "Before you ask."): above the footer waitlist, after the details, on the same
   off-white. The first three answers are open (what it is, and the two things it isn't); the rest fold. Native <details>,
   so it works without script and with a keyboard. The details' foot ramp into the footer moves to the FAQ's foot. */
.lp-faq { border-top: 0; padding-top: 36px; gap: 26px; }
.lp-faq .fd-eye { margin-bottom: 12px; }
.faq-h { font-size: calc(34px * var(--ds)); line-height: 1.06; letter-spacing: calc(-0.022em + var(--fd-track)); max-width: 14ch; }
.faq-list { border-top: 1px solid var(--nb-line); }
.faq-row { border-bottom: 1px solid var(--nb-line); }
.faq-row summary { list-style: none; display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 18px 0; cursor: pointer; font-family: var(--fd); font-stretch: var(--fd-wdth); font-weight: var(--fd-wght); font-size: calc(18px * var(--ds)); line-height: 1.3; letter-spacing: calc(-0.008em + var(--fd-track)); color: var(--nb-ink); }
.faq-row summary::-webkit-details-marker { display: none; }
.faq-row summary:focus-visible { outline: 2px solid var(--nb-ink); outline-offset: 4px; }
.faq-row.lead summary { font-size: calc(20px * var(--ds)); }
.faq-pl { flex: 0 0 auto; width: 15px; height: 15px; fill: none; stroke: var(--nb-ink); stroke-width: 1.4; transform: translateY(2px); transition: transform 0.25s ease; }
.faq-row[open] .faq-pl { transform: translateY(2px) rotate(45deg); }
.faq-row p { margin: -6px 0 0; padding-bottom: 20px; font-size: 16px; line-height: 1.55; color: var(--nb-ink2); max-width: 34em; text-wrap: pretty; }
@media (prefers-reduced-motion: reduce) { .faq-pl { transition: none; } }
@container lp (max-width: 999px) {
  .lp-anat { background: var(--nb-ground); }
  .lp-faq { background: linear-gradient(to bottom, rgb(246, 245, 242) 0.0px, rgb(246, 245, 242) 9.5px, rgb(246, 245, 242) 19.0px, rgb(245, 244, 241) 28.5px, rgb(244, 243, 240) 38.0px, rgb(243, 242, 239) 47.5px, rgb(241, 240, 237) 57.0px, rgb(238, 237, 235) 66.5px, rgb(235, 234, 231) 76.0px) bottom / 100% 76px no-repeat, var(--nb-ground); }
  .lp-faq .ctag { background: var(--nb-ground); }
}
@container lp (min-width: 1000px) {
  .lp .lp-page .lp-anat { background: var(--nb-ground); }
  .lp .lp-page .lp-faq { padding: 40px 64px 140px; row-gap: 0; background: linear-gradient(to bottom, rgb(246, 245, 242) 0.0px, rgb(246, 245, 242) 10.0px, rgb(246, 245, 242) 20.0px, rgb(245, 244, 241) 30.0px, rgb(244, 243, 240) 40.0px, rgb(243, 242, 239) 50.0px, rgb(241, 240, 237) 60.0px, rgb(238, 237, 234) 70.0px, rgb(234, 233, 230) 80.0px, rgb(230, 229, 226) 90.0px, rgb(225, 224, 221) 100.0px, rgb(219, 218, 216) 110.0px, rgb(213, 212, 209) 120.0px) bottom / 100% 120px no-repeat, var(--nb-ground); }
  .lp .lp-faq .faq-head { grid-column: 1 / span 5; align-self: start; position: sticky; top: 96px; }
  .lp .lp-faq .faq-body { grid-column: 7 / span 6; }
  .lp .lp-faq .faq-h { font-size: calc(58px * var(--ds)); }
  .lp .lp-faq .fd-eye { font-size: 14px; margin-bottom: 18px; }
  .faq-row summary { font-size: calc(22px * var(--ds)); padding: 22px 0; }
  .faq-row.lead summary { font-size: calc(24px * var(--ds)); }
  .faq-row p { font-size: 18px; padding-bottom: 24px; }
  .faq-pl { width: 17px; height: 17px; }
}
/* The hero as a slideshow (a test, 2026-10-07; Sherman: "maybe the hero image a slideshow … the men and then the
   woman's"): his hand, then a woman's, the befores' 01, crossfading slowly. On desktop her frame is mirrored, so the ring
   sits right as his does (the brand allows either hand; the ring stays on the index finger beside the thumb). Only with the
   shell's Hero switch on; the live build leaves it off until it's approved. With reduced motion, his hand only. */
.lp-hero .hero-alt { display: none; }
body.hero-slides .lp-hero.over .lp-hero-img .hero-alt { display: block; position: absolute; inset: 0; opacity: 0; object-position: 50% 50%; animation: nb-hero-alt 16s ease-in-out infinite; }
@keyframes nb-hero-alt { 0%, 38% { opacity: 0; } 50%, 88% { opacity: 1; } 100% { opacity: 0; } }
@container lp (min-width: 1000px) { body.hero-slides .lp-hero.over .lp-hero-img .hero-alt { transform: scaleX(-1); object-position: 50% 36%; } }
@media (prefers-reduced-motion: reduce) { body.hero-slides .lp-hero.over .lp-hero-img .hero-alt { animation: none; } }

/* The live site (build.mjs): the brand's ground instead of the review shell's, whatever the viewer's theme. */
html, body { background: var(--nb-ground); color: var(--nb-ink); }
main { max-width: none; margin: 0; padding: 0 !important; }
/* Clipped like the mock's phone frame: the hidden waitlist bar slides below the page's end and must not add scroll. */
#nb-frame:not(.scale-box) { overflow: clip; }
.scale-box { border-radius: 0; box-shadow: none; }
.lp .lp-fine a, .lp .lp-foot a { color: inherit; text-decoration: underline; text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
.lp .lp-form button:disabled { opacity: 0.6; cursor: progress; }