/* =========================================================================
   lumelume — launch design system (ll.css), v2, 7 Oct 2026
   -------------------------------------------------------------------------
   Replaces the "Said twice" editorial v1 (rejected: text-only, monotone cream,
   hairlines and a serif-italic device read as AI-made). v2 follows how the
   category's working brands build trust: show the real things (the care team,
   the app, the parcel, the price), use bold colour blocks, keep sections dense
   and scannable. Palette and Lino logo unchanged (signed off).

   Pages opt in with front matter `system: "ll"`.

   Colour rules (brand.md):
     · Terracotta (--terra) is a field. Text on it is gesso and 24px+ only.
       Never a button, never small text.
     · Buttons are espresso on light grounds, gesso on dark grounds.
     · Pistachio is for small chips and highlights only.
   ========================================================================= */

:root {
  --gesso:      #F6EEE3;
  --cream-2:    #FBF7F1;   /* lifted gesso for cards on gesso */
  --sand:       #EAD9C3;
  --sand-2:     #E1CBAF;   /* parcel, deeper sand */
  --espresso:   #33241C;
  --espresso-2: #241912;
  --terra:      #C0643F;
  --terra-ink:  #8E4226;
  --pist:       #BCC79C;
  --pist-2:     #DCE3C4;
  --muted:      #6B5647;
  --line:       #E2D3C0;
  --white:      #FFFFFF;
  --on-dark:    #F6EEE3;
  --on-dark-2:  #C9B6A0;

  --display: "Bricolage Grotesque", "Work Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --body:    "Work Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --t-hero: clamp(2.5rem, 1.5rem + 3.4vw, 4.1rem);
  --t-h2:   clamp(2rem, 1.3rem + 2.4vw, 3.1rem);
  --t-h3:   clamp(1.15rem, 1.05rem + .4vw, 1.35rem);

  --maxw: 1240px;
  --gutter: clamp(20px, 4vw, 40px);
  --section: clamp(64px, 8vw, 112px);
  --r-card: 20px;
  --r-panel: 32px;
  --r-btn: 12px;
}

/* ---- reset ---- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: var(--gesso); color: var(--espresso); font: 400 1.0625rem/1.6 var(--body); -webkit-font-smoothing: antialiased; }
img, svg { display: block; max-width: 100%; }
h1, h2, h3, h4, p, ol, ul, figure, dl, dd { margin: 0; }
ol, ul { padding: 0; list-style: none; }
a { color: inherit; text-underline-offset: .2em; }
button { font: inherit; }
:focus-visible { outline: 3px solid var(--terra-ink); outline-offset: 3px; }
.on-dark :focus-visible { outline-color: var(--pist); }
.ll-skip { position: absolute; left: 12px; top: 12px; transform: translateY(-200%); background: var(--espresso); color: var(--gesso); padding: 10px 14px; border-radius: 8px; z-index: 50; }
.ll-skip:focus { transform: none; }

.svgi { width: 1.3em; height: 1.3em; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

.ll-wrap { max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
.sec { padding-block: var(--section); }
.sec--sand { background: var(--sand); }
.sec--dark { background: var(--espresso); color: var(--on-dark); }

/* ---- type ---- */
.h-hero, .h2 { font-family: var(--display); font-weight: 700; font-variation-settings: "opsz" 96; letter-spacing: -.03em; text-wrap: balance; }
.h-hero { font-size: var(--t-hero); line-height: 1; }
.h2 { font-size: var(--t-h2); line-height: 1.04; }
.h3 { font: 650 var(--t-h3)/1.25 var(--display); letter-spacing: -.01em; }
.hl { color: var(--terra-ink); }
.on-dark .hl { color: var(--pist); }
.lead { font-size: clamp(1.1rem, 1rem + .35vw, 1.25rem); line-height: 1.55; }
.muted { color: var(--muted); }
.on-dark .muted { color: var(--on-dark-2); }
.small { font-size: .875rem; line-height: 1.5; }
.sec-head { display: grid; gap: 14px; max-width: 760px; }
.sec-head--c { margin-inline: auto; text-align: center; justify-items: center; }

/* ---- buttons ---- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 56px; padding: 0 28px; border-radius: var(--r-btn); background: var(--espresso); color: var(--gesso); font: 600 1.0625rem/1 var(--body); text-decoration: none; border: 2px solid var(--espresso); white-space: nowrap; }
.btn:hover { background: var(--espresso-2); border-color: var(--espresso-2); }
.btn--light { background: var(--gesso); color: var(--espresso); border-color: var(--gesso); }
.btn--light:hover { background: var(--white); border-color: var(--white); }
.btn--ghost { background: transparent; color: var(--espresso); }
.btn--ghost:hover { background: var(--espresso); color: var(--gesso); }
.btn--sm { min-height: 44px; padding: 0 18px; font-size: .9688rem; }
.btn--wide { width: 100%; max-width: 420px; }

/* ---- chips and ticks ---- */
.chip { display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px; border-radius: 999px; background: var(--white); color: var(--espresso); font: 600 .875rem/1.2 var(--body); box-shadow: 0 1px 0 rgba(51,36,28,.06); }
.chip--pist { background: var(--pist-2); }
.chip svg { width: 16px; height: 16px; }
.ticks { display: grid; gap: 12px; }
.ticks li { display: grid; grid-template-columns: 26px 1fr; gap: 12px; align-items: start; font-size: 1.0625rem; }
.ticks .tk { width: 26px; height: 26px; border-radius: 50%; background: var(--pist-2); display: grid; place-items: center; }
.ticks .tk svg { width: 15px; height: 15px; color: var(--espresso); }
.tbc { display: inline-block; padding: 0 .35em; border: 1.5px dashed currentColor; border-radius: 6px; font-variant-numeric: tabular-nums; }

/* ---- announcement + header ---- */
.ann { background: var(--espresso); color: var(--on-dark); font: 500 .875rem/1.3 var(--body); }
.ann__in { display: flex; justify-content: center; flex-wrap: wrap; gap: 6px 22px; padding-block: 10px; text-align: center; }
.ann span { display: inline-flex; align-items: center; gap: 7px; }
.ann svg { width: 15px; height: 15px; color: var(--pist); }
.hd { background: var(--gesso); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 30; }
.hd__in { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 76px; }
.hd__logo img { height: 30px; width: auto; }
.hd__nav { display: flex; gap: clamp(16px, 2.2vw, 30px); font-weight: 500; font-size: .9688rem; }
.hd__nav a { text-decoration: none; padding-block: 8px; }
.hd__nav a:hover { text-decoration: underline; }
.hd__end { display: flex; align-items: center; gap: 10px; }
.menu { display: none; position: relative; }
.menu summary { list-style: none; cursor: pointer; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 10px; border: 1.5px solid var(--espresso); }
.menu summary::-webkit-details-marker { display: none; }
.menu summary svg { width: 20px; height: 20px; }
.menu nav { position: absolute; right: 0; top: calc(100% + 10px); min-width: 240px; display: grid; background: var(--white); border-radius: 14px; padding: 8px; box-shadow: 0 18px 40px -16px rgba(36,25,18,.35); }
.menu nav a { padding: 12px 14px; border-radius: 8px; text-decoration: none; font-weight: 500; }
.menu nav a:hover { background: var(--gesso); }
.hd__short { display: none; }
@media (max-width: 960px) { .hd__nav, .hd__login { display: none; } .menu { display: block; } .hd__logo img { height: 26px; } }
@media (max-width: 520px) { .hd__long { display: none; } .hd__short { display: inline; } }

/* ---- hero ---- */
.hero { padding-block: clamp(36px, 6vw, 72px) var(--section); }
.hero__in { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.hero__copy { display: grid; gap: 26px; align-content: center; }
.hero__copy .lead { max-width: 34em; }
.hero__cta { display: grid; gap: 12px; justify-items: start; }
.hero__fine { font-size: .875rem; color: var(--muted); }

/* the composed product panel */
.stage { position: relative; background: var(--sand); border-radius: var(--r-panel); min-height: 640px; overflow: hidden; isolation: isolate; }
.stage::before { content: ""; position: absolute; right: -12%; top: -18%; width: 70%; aspect-ratio: 1; border-radius: 50%; background: var(--terra); z-index: -1; }
.stage__badge { position: absolute; left: 26px; top: 26px; width: 132px; height: 132px; border-radius: 50%; background: var(--espresso); color: var(--gesso); display: grid; place-content: center; text-align: center; transform: rotate(-8deg); z-index: 2; }
.stage__badge small { font: 600 .8125rem/1.2 var(--body); }
.stage__badge b { font: 700 2rem/1 var(--display); letter-spacing: -.02em; margin-block: 2px; }

/* phone */
.phone { position: absolute; left: 50%; top: 50%; width: 262px; transform: translate(-42%, -52%) rotate(-3deg); background: var(--espresso-2); border-radius: 40px; padding: 11px; box-shadow: 0 40px 70px -30px rgba(36,25,18,.6); }
.phone__screen { background: var(--cream-2); border-radius: 30px; overflow: hidden; height: 500px; display: grid; grid-template-rows: auto 1fr auto; }
.phone__bar { display: flex; align-items: center; gap: 10px; padding: 26px 16px 12px; background: var(--white); border-bottom: 1px solid var(--line); }
.phone__av { width: 34px; height: 34px; border-radius: 50%; background: var(--pist); display: grid; place-items: center; font: 700 .8rem/1 var(--display); color: var(--espresso); }
.phone__who b { display: block; font: 650 .8125rem/1.2 var(--display); }
.phone__who span { font-size: .6875rem; color: var(--muted); }
.phone__msgs { padding: 14px 12px; display: grid; gap: 10px; align-content: start; font-size: .75rem; line-height: 1.45; }
.msg { max-width: 86%; padding: 9px 12px; border-radius: 14px; }
.msg--in { background: var(--white); border-bottom-left-radius: 4px; }
.msg--out { background: var(--espresso); color: var(--gesso); justify-self: end; border-bottom-right-radius: 4px; }
.msg--card { background: var(--pist-2); justify-self: start; border-radius: 12px; display: grid; gap: 2px; }
.msg--card b { font: 650 .75rem/1.3 var(--display); }
.msg time { display: block; font-size: .625rem; color: var(--muted); margin-top: 3px; }
.msg--out time { color: var(--on-dark-2); }
.phone__input { margin: 10px; padding: 10px 14px; border-radius: 999px; background: var(--white); border: 1px solid var(--line); font-size: .6875rem; color: var(--muted); }

/* plain parcel */
.parcel { position: absolute; right: 22px; bottom: 30px; width: 170px; z-index: 1; }
.parcel .parcel__box { height: 122px; }
.parcel__box { position: relative; height: 150px; border-radius: 10px; background: linear-gradient(160deg, #E8D5BB, var(--sand-2)); box-shadow: inset 0 -10px 0 rgba(51,36,28,.06), 0 30px 40px -24px rgba(36,25,18,.55); }
.parcel__box::before { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 34px; transform: translateX(-50%); background: rgba(255,255,255,.35); }
.parcel__box::after { content: ""; position: absolute; left: 14px; top: 18px; width: 64px; height: 38px; border-radius: 4px; background: var(--white); box-shadow: 0 1px 0 rgba(51,36,28,.08); }
.parcel .chip { position: absolute; left: -36px; bottom: -14px; }

/* clinician card */
.cl-card { position: absolute; left: 22px; bottom: 30px; width: 236px; background: var(--white); border-radius: 16px; padding: 14px; display: grid; grid-template-columns: 48px 1fr; gap: 12px; align-items: center; box-shadow: 0 24px 40px -24px rgba(36,25,18,.45); z-index: 2; }
.cl-card__ph { width: 48px; height: 48px; border-radius: 50%; background: var(--sand-2); display: grid; place-items: center; overflow: hidden; }
.cl-card__ph svg { width: 26px; height: 26px; color: var(--muted); }
.cl-card b { display: block; font: 650 .9375rem/1.25 var(--display); }
.cl-card span { font-size: .78rem; color: var(--muted); line-height: 1.35; display: block; }
.stage__tag { position: absolute; right: 26px; top: 30px; z-index: 2; }

/* ---- trust bar ---- */
.trust { background: var(--espresso); color: var(--on-dark); }
.trust__in { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; padding-block: 22px; }
.trust__in div { display: flex; align-items: center; gap: 12px; font: 500 .9688rem/1.3 var(--body); }
.trust svg { width: 26px; height: 26px; flex: none; color: var(--pist); }

/* ---- price comparison ---- */
.cmp { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.cmp__copy { display: grid; gap: 22px; align-content: center; }
.cmp__table { background: var(--white); border-radius: var(--r-panel); padding: 10px 18px 18px; box-shadow: 0 30px 60px -40px rgba(36,25,18,.45); overflow-x: auto; }
.cmp table { width: 100%; border-collapse: separate; border-spacing: 0; min-width: 470px; }
.cmp th, .cmp td { padding: 13px 12px; text-align: center; font-size: .9375rem; border-bottom: 1px solid var(--line); }
.cmp th:first-child, .cmp td:first-child { text-align: left; }
.cmp thead th { border-bottom: 0; vertical-align: bottom; padding-top: 20px; }
.cmp .us { background: var(--espresso); color: var(--gesso); border-bottom-color: rgba(246,238,227,.14); }
.cmp thead .us { border-radius: 16px 16px 0 0; }
.cmp tbody tr:last-child .us { border-radius: 0 0 16px 16px; border-bottom: 0; }
.cmp tbody tr:last-child td { border-bottom: 0; }
.cmp__name { display: grid; gap: 4px; justify-items: center; }
.cmp__name img { height: 20px; width: auto; }
.cmp__price { font: 700 1.75rem/1 var(--display); letter-spacing: -.02em; }
.cmp__per { font-size: .75rem; font-weight: 500; }
.cmp .yes svg, .cmp .no svg { width: 20px; height: 20px; margin-inline: auto; }
.cmp .us .yes svg { color: var(--pist); }
.cmp .no svg { color: #8A7766; }

/* ---- steps ---- */
.steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; margin-top: clamp(36px, 5vw, 56px); }
.step { background: var(--white); border-radius: var(--r-card); padding: 14px 14px 24px; display: grid; gap: 14px; align-content: start; }
.step__vis { background: var(--gesso); border-radius: 14px; height: 172px; padding: 16px; display: grid; align-content: center; gap: 8px; overflow: hidden; }
.step__n { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; background: var(--espresso); color: var(--gesso); font: 700 .875rem/1 var(--display); }
.step__t { display: grid; gap: 8px; padding-inline: 8px; }
.step p { font-size: .9688rem; color: var(--muted); line-height: 1.55; }
.mq { background: var(--white); border-radius: 10px; padding: 10px 12px; font-size: .75rem; display: grid; gap: 8px; }
.mq b { font: 650 .8125rem/1.3 var(--display); }
.mq__opt { border: 1.5px solid var(--line); border-radius: 8px; padding: 7px 10px; }
.mq__opt--on { border-color: var(--espresso); background: var(--gesso); font-weight: 600; }
.mv { background: var(--espresso); border-radius: 12px; height: 100%; position: relative; display: grid; place-items: center; color: var(--gesso); }
.mv__av { width: 64px; height: 64px; border-radius: 50%; background: var(--pist); display: grid; place-items: center; color: var(--espresso); font: 700 1.1rem/1 var(--display); }
.mv__self { position: absolute; right: 10px; bottom: 10px; width: 46px; height: 58px; border-radius: 8px; background: var(--sand-2); }
.mv__live { position: absolute; left: 10px; top: 10px; font: 600 .6875rem/1 var(--body); background: rgba(246,238,227,.16); padding: 5px 8px; border-radius: 999px; }
.mp { display: grid; place-items: center; height: 100%; }
.mp .parcel__box { width: 150px; height: 104px; }
.mt { display: grid; gap: 8px; }
.mt__row { background: var(--white); border-radius: 10px; padding: 9px 12px; display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: .75rem; }
.mt__row b { font-family: var(--display); font-weight: 650; }
.mt__dot { width: 9px; height: 9px; border-radius: 50%; background: var(--pist); flex: none; }
.steps__cta { margin-top: 36px; display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }

/* ---- clinical lead ---- */
.lead-doc { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
.portrait { aspect-ratio: 4 / 5; border-radius: var(--r-panel); background: linear-gradient(170deg, #4A3427, var(--espresso-2)); position: relative; overflow: hidden; display: grid; place-items: center; border: 1.5px solid rgba(246,238,227,.16); }
.portrait__ph { display: grid; justify-items: center; gap: 10px; color: var(--on-dark-2); text-align: center; padding: 24px 24px 120px; }
.portrait__ph svg { width: 64px; height: 64px; }
.portrait__name { position: absolute; left: 18px; right: 18px; bottom: 18px; background: var(--gesso); color: var(--espresso); border-radius: 14px; padding: 14px 16px; display: grid; gap: 2px; }
.portrait__name b { font: 700 1.125rem/1.2 var(--display); }
.portrait__name span { font-size: .875rem; color: var(--muted); }
.doc-copy { display: grid; gap: 22px; }
.facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.fact { border: 1.5px solid rgba(246,238,227,.22); border-radius: 16px; padding: 16px 18px; display: grid; gap: 6px; align-content: start; }
.fact svg { width: 24px; height: 24px; color: var(--pist); }
.fact b { font: 650 1rem/1.3 var(--display); }
.fact span { font-size: .9375rem; color: var(--on-dark-2); line-height: 1.5; }

/* ---- included grid ---- */
.inc { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-top: clamp(36px, 5vw, 56px); }
.inc__i { background: var(--white); border-radius: var(--r-card); padding: 26px; display: grid; gap: 10px; align-content: start; }
.inc__ic { width: 48px; height: 48px; border-radius: 14px; background: var(--pist-2); display: grid; place-items: center; }
.inc__ic svg { width: 24px; height: 24px; color: var(--espresso); }
.inc__i p { color: var(--muted); font-size: .9688rem; }

/* ---- stopping field ---- */
.field { background: var(--terra); color: var(--gesso); border-radius: var(--r-panel); padding: clamp(36px, 6vw, 80px); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 64px); align-items: end; }
.field .h2 { color: var(--gesso); }
.field__body { display: grid; gap: 18px; font-size: 1.5rem; line-height: 1.42; }
.field__src { margin-top: 14px; padding-inline: clamp(8px, 2vw, 24px); }

/* ---- standards ---- */
.std { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: clamp(32px, 4vw, 48px); }
.std__i { background: var(--white); border-radius: var(--r-card); padding: 22px 24px; display: grid; grid-template-columns: 52px 1fr; gap: 16px; align-items: start; }
.std__ic { width: 52px; height: 52px; border-radius: 14px; background: var(--gesso); display: grid; place-items: center; }
.std__ic svg { width: 26px; height: 26px; color: var(--terra-ink); }
.std__i p { font-size: .9688rem; color: var(--muted); }
.std__i b { display: block; color: var(--espresso); font: 650 1.0625rem/1.3 var(--display); margin-bottom: 4px; }

/* ---- FAQ ---- */
.faq { max-width: 860px; margin: clamp(32px, 4vw, 48px) auto 0; display: grid; gap: 12px; }
.faq details { background: var(--white); border-radius: 16px; padding: 0 22px; }
.faq summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 20px 0; font: 650 1.0625rem/1.35 var(--display); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font: 400 1.6rem/1 var(--body); color: var(--terra-ink); }
.faq details[open] summary::after { content: "–"; }
.faq details p { padding-bottom: 20px; color: var(--muted); max-width: 68ch; }

/* ---- closing band ---- */
.close { background: var(--espresso); color: var(--on-dark); border-radius: var(--r-panel); padding: clamp(40px, 6vw, 80px); display: grid; grid-template-columns: minmax(0, 1.2fr) auto; gap: 28px; align-items: center; position: relative; overflow: hidden; isolation: isolate; }
.close::after { content: ""; position: absolute; right: -80px; bottom: -120px; width: 320px; height: 320px; border-radius: 50%; background: var(--terra); z-index: -1; }
.close .h2 { color: var(--on-dark); }
.notice { margin-top: 28px; font-size: .875rem; line-height: 1.6; color: var(--muted); max-width: 100ch; }
.notice b { color: var(--espresso); }

/* ---- footer ---- */
.ft { background: var(--espresso-2); color: var(--on-dark); padding-block: clamp(56px, 7vw, 80px) 36px; }
.ft__grid { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 32px; }
.ft__about { display: grid; gap: 16px; align-content: start; color: var(--on-dark-2); font-size: .9688rem; max-width: 34ch; }
.ft__about img { height: 30px; width: auto; }
.ft__col { display: grid; gap: 10px; align-content: start; font-size: .9688rem; }
.ft__col h2 { font: 600 .875rem/1.4 var(--body); color: var(--on-dark-2); margin-bottom: 4px; }
.ft__col a { text-decoration: none; }
.ft__col a:hover { text-decoration: underline; }
.ft__legal { margin-top: 48px; padding-top: 20px; border-top: 1px solid rgba(246,238,227,.14); display: grid; gap: 8px; font-size: .8438rem; color: var(--on-dark-2); }

/* ---- responsive ---- */
@media (max-width: 1080px) {
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .inc { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .trust__in { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .hero__in, .cmp, .lead-doc, .field, .close { grid-template-columns: 1fr; }
  .stage { min-height: 560px; }
  .portrait { max-width: 420px; }
}
@media (max-width: 600px) {
  .steps, .inc, .std, .facts { grid-template-columns: 1fr; }
  .trust__in { grid-template-columns: 1fr 1fr; gap: 14px; }
  .trust__in div { font-size: .875rem; }
  .ft__grid { grid-template-columns: 1fr 1fr; }
  .ft__about { grid-column: 1 / -1; }
  .stage { min-height: 540px; border-radius: 24px; }
  .cmp__table { padding: 6px 8px 10px; border-radius: 24px; }
  .cmp table { min-width: 0; }
  .cmp th, .cmp td { padding: 11px 6px; font-size: .8438rem; }
  .cmp td.small { font-size: .78rem; }
  .cmp__price { font-size: 1.25rem; }
  .cmp__name img { height: 16px; }
  .phone { width: 228px; transform: translate(-50%, -56%) rotate(-3deg); }
  .phone__screen { height: 430px; }
  .stage__badge { width: 100px; height: 100px; left: 12px; top: 12px; }
  .stage__badge b { font-size: 1.4rem; }
  .cl-card { left: 12px; right: 12px; width: auto; bottom: 12px; }
  .parcel { display: none; }
  .stage__tag { right: 12px; top: 16px; }
  .btn--wide { max-width: none; }
  .hero__cta { justify-items: stretch; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* =========================================================================
   Apple-design pass, 9 Oct 2026 (.claude/skills/apple-design). The site is
   static, so no gesture physics; this is response, spatial consistency,
   materials, typography and accessibility. All motion is transform/opacity,
   short, and switched off under reduced motion.
   ========================================================================= */
:root { interpolate-size: allow-keywords; }
html { touch-action: manipulation; -webkit-tap-highlight-color: transparent; } /* §1 kill the double-tap delay; we draw our own press state */
[id] { scroll-margin-top: 96px; }                       /* §16 anchors land below the sticky header, not under it */

/* §1 Response: feedback on press, instantly */
.btn { transition: transform 100ms ease-out, background-color 150ms ease-out, border-color 150ms ease-out, color 150ms ease-out; }
.btn:active { transform: scale(.97); }
.menu summary { transition: transform 100ms ease-out, background-color 150ms ease-out; }
.menu summary:active { transform: scale(.94); }
.menu nav a:active, .faq summary:active { background-color: var(--gesso); }

/* §12 Materials: a translucent header that content scrolls under */
.hd { background: rgba(246, 238, 227, .82); -webkit-backdrop-filter: blur(18px) saturate(160%); backdrop-filter: blur(18px) saturate(160%); }
/* §12 Scroll edge: the hairline appears only once content is actually under the header */
@supports (animation-timeline: scroll()) {
  .hd { border-bottom-color: transparent; animation: hd-edge linear both; animation-timeline: scroll(root); animation-range: 0 72px; }
  @keyframes hd-edge { to { border-bottom-color: var(--line); box-shadow: 0 10px 24px -20px rgba(36,25,18,.45); } }
}

/* §7 Spatial consistency: the phone menu grows out of its trigger */
.menu nav { transform-origin: top right; }
.menu[open] nav { animation: menu-in 180ms cubic-bezier(.2, .8, .2, 1); }
@keyframes menu-in { from { opacity: 0; transform: translateY(-6px) scale(.96); } }

/* §8 Hint direction: a chevron that turns, and an answer that opens */
.faq summary::after { content: ""; width: 10px; height: 10px; flex: none; margin-right: 4px; border-right: 2px solid var(--terra-ink); border-bottom: 2px solid var(--terra-ink); transform: translateY(-3px) rotate(45deg); transition: transform 200ms cubic-bezier(.2, .8, .2, 1); }
.faq details[open] summary::after { content: ""; transform: translateY(2px) rotate(-135deg); }
.faq details::details-content { block-size: 0; overflow: hidden; transition: block-size 260ms cubic-bezier(.2, .8, .2, 1), content-visibility 260ms allow-discrete; }
.faq details[open]::details-content { block-size: auto; }

/* §15 Typography: tracking by size. Large display stays tight; small text opens up */
.small, .chip, .cmp__per, .ann, .hero__fine, .notice, .ft__legal, .mq, .mt__row, .msg { letter-spacing: .01em; }
.h3 { font-optical-sizing: auto; }

/* §16 Wayfinding: show where you are */
.hd__nav a[aria-current="page"], .menu nav a[aria-current="page"] { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .4em; }

/* §14 Accessibility signals beyond reduced motion */
@media (prefers-reduced-transparency: reduce) {
  .hd { background: var(--gesso); -webkit-backdrop-filter: none; backdrop-filter: none; border-bottom-color: var(--line); }
}
@media (prefers-contrast: more) {
  .hd { background: var(--gesso); -webkit-backdrop-filter: none; backdrop-filter: none; border-bottom: 1px solid var(--espresso); }
  .muted, .small, .hero__fine { color: var(--espresso); }
  .step, .inc__i, .std__i, .faq details, .cmp__table { outline: 1px solid var(--espresso); }
}
@media (prefers-reduced-motion: reduce) {
  .btn:active, .menu summary:active { transform: none; }
  .menu[open] nav { animation: none; }
  .faq details::details-content { transition: none; }
  .hd { animation: none; border-bottom-color: var(--line); }
}

/* =========================================================================
   Launch rework, 9 Oct 2026 — the homepage starts the assessment.
   ========================================================================= */
/* the first question, live in the hero */
.start { background: var(--white); border-radius: var(--r-card); padding: 22px; display: grid; gap: 14px; box-shadow: 0 24px 50px -36px rgba(36,25,18,.5); max-width: 520px; }
.start__meta { display: flex; justify-content: space-between; gap: 12px; font-size: .8125rem; font-weight: 600; color: var(--muted); letter-spacing: .01em; }
.start__q { font: 650 1.375rem/1.25 var(--display); letter-spacing: -.01em; }
.start__opts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.start__opt { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 56px; padding: 0 18px; border-radius: var(--r-btn); background: var(--espresso); color: var(--gesso); font-weight: 600; text-decoration: none; border: 2px solid var(--espresso); transition: transform 100ms ease-out, background-color 150ms ease-out; }
.start__opt:hover { background: var(--espresso-2); }
.start__opt:active { transform: scale(.97); }
.start__opt--quiet { background: transparent; color: var(--espresso); border-color: var(--line); justify-content: center; }
.start__opt--quiet:hover { background: var(--gesso); border-color: var(--espresso); }
.start__fine { font-size: .875rem; color: var(--muted); }
.next { display: grid; gap: 12px; }
.next__h { font: 600 .875rem/1.4 var(--body); color: var(--muted); letter-spacing: .01em; }
.ticks--sm li { font-size: 1rem; }
.ticks--sm .tk { width: 22px; height: 22px; }
.ticks--sm { gap: 9px; }

/* phone-first sticky action: phones only, appears once the hero has gone */
.mbar { display: none; }
@media (max-width: 760px) {
  .mbar { display: flex; align-items: center; gap: 14px; position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
    background: rgba(246, 238, 227, .9); -webkit-backdrop-filter: blur(18px) saturate(160%); backdrop-filter: blur(18px) saturate(160%);
    border-top: 1px solid var(--line); }
  .mbar .btn { flex: 1; min-height: 52px; }
  .mbar span { font-size: .8125rem; color: var(--muted); white-space: nowrap; }
  .ft { padding-bottom: calc(36px + 84px); }               /* the bar never covers the last footer line */
  @supports (animation-timeline: scroll()) {
    .mbar { animation: mbar-in linear both; animation-timeline: scroll(root); animation-range: 560px 680px; }
    @keyframes mbar-in { from { opacity: 0; transform: translateY(100%); visibility: hidden; } to { opacity: 1; transform: none; visibility: visible; } }
  }
  /* phone hero: the question sits above the fold; the product scene follows */
  .hero { padding-top: 20px; }
  .hero__copy { gap: 18px; }
  .start { padding: 18px; }
  .start__opts { grid-template-columns: 1fr; }
  /* one-line top bar on phones */
}
@media (prefers-reduced-transparency: reduce) { .mbar { background: var(--gesso); -webkit-backdrop-filter: none; backdrop-filter: none; } }
@media (prefers-reduced-motion: reduce) { .mbar { animation: none; } .start__opt:active { transform: none; } }
@media (max-width: 760px) {
  body:has(.mbar) .hd .btn:not(.hd__login) { display: none; }   /* one action on screen: the hero card, then the sticky bar */
}

/* top bar: three items on desktop, one short line on phones */
.ann .ann__m { display: none; }
@media (max-width: 760px) { .ann .ann__m { display: inline-flex; } .ann .ann__in > span:not(.ann__m) { display: none; } }

/* =========================================================================
   HOMEPAGE v3 — "the product is the hero" (9 Oct 2026, apple-design skill)
   One idea per section. Big, tight display type; generous space; the phone
   as the product; motion only where it explains (the story screens, the
   hero rising into place). Everything is complete at rest without JS.
   ========================================================================= */
.v3-h1 { font-family: var(--display); font-weight: 700; font-variation-settings: "opsz" 96; font-size: clamp(2.75rem, 1rem + 6vw, 5.75rem); line-height: .98; letter-spacing: -.04em; text-wrap: balance; }
.v3-h2 { font-family: var(--display); font-weight: 700; font-variation-settings: "opsz" 96; font-size: clamp(2.2rem, 1.2rem + 3.4vw, 3.75rem); line-height: 1.02; letter-spacing: -.035em; text-wrap: balance; }
.v3-sub { font-size: clamp(1.125rem, 1rem + .5vw, 1.375rem); line-height: 1.5; color: var(--muted); max-width: 38ch; }
.on-dark .v3-sub { color: var(--on-dark-2); }
.v3-fine { font-size: .875rem; color: var(--muted); letter-spacing: .01em; }
.v3-center { text-align: center; margin-top: 48px; }
.v3-cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 14px 26px; }
.v3-link { color: var(--terra-ink); font-weight: 600; font-size: 1.0625rem; text-decoration: none; }
.v3-link:hover { text-decoration: underline; }
.v3-head { display: grid; gap: 16px; margin-bottom: clamp(36px, 5vw, 64px); }
.v3-head--c { justify-items: center; text-align: center; }
.v3-head--c .v3-sub { margin-inline: auto; }
.v3-head--row { display: flex; align-items: end; justify-content: space-between; gap: 20px; }
.v3-sec { padding-block: var(--section); }
.v3-sec--sand { background: var(--sand); }
.v3-sec--dark { background: var(--espresso); color: var(--on-dark); }

/* ---- hero ---- */
.v3-hero { padding-top: clamp(48px, 7vw, 96px); overflow: hidden; }
.v3-hero__copy { display: grid; justify-items: center; text-align: center; gap: 22px; }
.v3-hero .v3-h1 { max-width: 14ch; }
.v3-hero .v3-sub { margin-inline: auto; }
.v3-stage { position: relative; height: clamp(560px, 58vw, 720px); max-width: 1180px; margin: clamp(40px, 5vw, 64px) auto 0; }
.v3-stage__glow { position: absolute; left: 50%; top: 4%; width: min(92vw, 900px); aspect-ratio: 1; transform: translateX(-50%); border-radius: 50%; background: radial-gradient(closest-side, var(--sand) 0%, rgba(234,217,195,.55) 55%, rgba(246,238,227,0) 100%); }
.v3-stage__glow::after { content: ""; position: absolute; left: 50%; top: 22%; width: 46%; aspect-ratio: 1; transform: translateX(-50%); border-radius: 50%; background: var(--terra); }

/* the device */
.device { background: var(--espresso-2); border-radius: 50px; padding: 12px; box-shadow: 0 60px 90px -40px rgba(36,25,18,.55), inset 0 0 0 1.5px rgba(246,238,227,.08); }
.device__screen { position: relative; background: var(--cream-2); border-radius: 39px; overflow: hidden; height: 100%; }
.device__screen::before { content: ""; position: absolute; top: 10px; left: 50%; width: 96px; height: 26px; transform: translateX(-50%); border-radius: 20px; background: var(--espresso-2); z-index: 3; }
.device--hero { position: absolute; left: 50%; top: 0; width: 300px; height: 620px; transform: translateX(-50%); z-index: 2; }
.device--story { width: 320px; height: 660px; margin-inline: auto; }
/* (scroll-linked rise removed 9 Oct: Lighthouse counted it as layout shift; decorative, so it went) */

/* screens (all five live in each device; data-active picks one) */
.scr { position: absolute; inset: 0; display: grid; grid-template-rows: auto 1fr; opacity: 0; transition: opacity 320ms cubic-bezier(.2,.8,.2,1); font-size: .8125rem; line-height: 1.45; }
.device__screen[data-active="1"] .scr--1, .device__screen[data-active="2"] .scr--2, .device__screen[data-active="3"] .scr--3,
.device__screen[data-active="4"] .scr--4, .device__screen[data-active="5"] .scr--5 { opacity: 1; }
.scr__bar { display: flex; justify-content: space-between; align-items: center; padding: 48px 18px 12px; background: var(--white); border-bottom: 1px solid var(--line); font-weight: 600; font-size: .75rem; letter-spacing: .01em; }
.scr__bar span:last-child { color: var(--muted); font-weight: 500; }
.scr__body { padding: 18px 16px; display: grid; gap: 10px; align-content: start; }
.scr__q { font: 650 1.0625rem/1.3 var(--display); margin-bottom: 4px; }
.scr__opt { border: 1.5px solid var(--line); border-radius: 14px; padding: 12px 14px; background: var(--white); }
.scr__opt--on { border-color: var(--espresso); background: var(--gesso); font-weight: 600; }
.scr__days { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-bottom: 6px; }
.scr__days span { display: grid; justify-items: center; gap: 2px; padding: 10px 0; border-radius: 12px; background: var(--white); border: 1px solid var(--line); font-size: .6875rem; color: var(--muted); }
.scr__days b { font: 700 1rem/1 var(--display); color: var(--espresso); }
.scr__days .on { background: var(--espresso); border-color: var(--espresso); color: var(--on-dark-2); }
.scr__days .on b { color: var(--gesso); }
.scr__slot { padding: 12px 14px; border-radius: 12px; background: var(--white); border: 1px solid var(--line); font-weight: 500; }
.scr__slot--on { border: 1.5px solid var(--espresso); font-weight: 650; }
.scr__cta { margin-top: 8px; text-align: center; padding: 13px; border-radius: 12px; background: var(--espresso); color: var(--gesso); font-weight: 600; }
.scr--dark { background: var(--espresso); color: var(--gesso); grid-template-rows: 1fr auto; }
.scr__call { display: grid; justify-items: center; align-content: center; gap: 6px; text-align: center; padding: 40px 18px 0; }
.scr__av { width: 108px; height: 108px; border-radius: 50%; background: var(--pist); color: var(--espresso); display: grid; place-items: center; font: 700 2rem/1 var(--display); margin-bottom: 12px; }
.scr__call b { font: 650 1.25rem/1.2 var(--display); }
.scr__call span { color: var(--on-dark-2); font-size: .8125rem; }
.scr__call .scr__av { color: var(--espresso); font-size: 2rem; }
.device--story .scr__call .scr__av { font-size: 1.25rem; }
.scr__timer { margin-top: 10px; padding: 6px 12px; border-radius: 999px; background: rgba(246,238,227,.12); }
.scr__keys { display: flex; justify-content: center; gap: 18px; padding: 0 18px 44px; }
.scr__keys span { width: 58px; height: 58px; border-radius: 50%; background: rgba(246,238,227,.14); display: grid; place-items: center; font-size: .6875rem; }
.scr__keys .end { background: var(--terra); }
.scr__box { height: 120px; border-radius: 14px; background: linear-gradient(160deg, #E8D5BB, var(--sand-2)); position: relative; margin-bottom: 4px; }
.scr__box::before { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 30px; transform: translateX(-50%); background: rgba(255,255,255,.35); }
.scr__track { list-style: none; display: grid; gap: 0; }
.scr__track li { position: relative; padding: 9px 0 9px 26px; border-left: 2px solid var(--line); margin-left: 7px; }
.scr__track li::before { content: ""; position: absolute; left: -8px; top: 12px; width: 14px; height: 14px; border-radius: 50%; background: var(--white); border: 2px solid var(--line); }
.scr__track .done::before { background: var(--pist); border-color: var(--pist); }
.scr__track .now { font-weight: 650; }
.scr__track .now::before { background: var(--espresso); border-color: var(--espresso); }
.scr__note { font-size: .75rem; color: var(--muted); }
.scr__chat { gap: 9px; }
.bub { max-width: 86%; padding: 10px 13px; border-radius: 16px; }
.bub--in { background: var(--white); border-bottom-left-radius: 5px; justify-self: start; }
.bub--out { background: var(--espresso); color: var(--gesso); border-bottom-right-radius: 5px; justify-self: end; }
.bub--card { background: var(--pist-2); display: grid; justify-self: start; }
.bub--card b { font: 650 .8125rem/1.3 var(--display); }

/* floats around the hero device */
.float { position: absolute; z-index: 3; background: var(--white); border-radius: 18px; box-shadow: 0 28px 50px -30px rgba(36,25,18,.5); }
.float--doc { left: calc(50% - 470px); top: 52%; display: grid; grid-template-columns: 44px 1fr; gap: 12px; align-items: center; padding: 14px 18px 14px 14px; width: 270px; font-size: .8125rem; color: var(--muted); line-height: 1.35; }
.float--doc b { display: block; font: 650 .9375rem/1.3 var(--display); color: var(--espresso); }
.float__av { width: 44px; height: 44px; border-radius: 50%; background: var(--sand); display: grid; place-items: center; }
.float__av .svgi { width: 22px; height: 22px; color: var(--muted); }
.float--price { right: calc(50% - 420px); top: 14%; width: 148px; height: 148px; border-radius: 50%; background: var(--espresso); color: var(--gesso); display: grid; place-content: center; text-align: center; transform: rotate(-8deg); }
.float--price small { font-size: .8125rem; font-weight: 600; }
.float--price b { font: 700 2rem/1.05 var(--display); letter-spacing: -.02em; }
.float--box { right: calc(50% - 440px); top: 66%; display: flex; align-items: center; gap: 10px; padding: 12px 18px; border-radius: 999px; font-weight: 600; font-size: .9375rem; }
.float--box .svgi { width: 18px; height: 18px; }

/* ---- story ---- */
.v3-story { padding-block: var(--section); }
.story { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 420px); gap: clamp(32px, 6vw, 96px); }
.story__sticky { order: 2; position: sticky; top: 110px; align-self: start; }
.story__steps { list-style: none; display: grid; }
.story__step { min-height: min(62vh, 620px); display: grid; align-content: center; gap: 14px; padding-block: 40px; max-width: 34em; }
.story__step h3 { font: 700 clamp(1.75rem, 1.2rem + 1.8vw, 2.5rem)/1.08 var(--display); letter-spacing: -.03em; }
.story__step p { font-size: 1.125rem; color: var(--muted); line-height: 1.55; }
.story__n { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--espresso); color: var(--gesso); font: 700 .9375rem/1 var(--display); }
.js-story .story__step h3 { color: var(--muted); transition: color 300ms ease-out; }   /* dim by colour, not opacity: stays 6:1 */
.js-story .story__step.is-active h3 { color: var(--espresso); }
.js-story .story__step .story__n { background: var(--muted); transition: background-color 300ms ease-out; }
.js-story .story__step.is-active .story__n { background: var(--espresso); }

/* ---- bento ---- */
.bento { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px; }
.tile { grid-column: span 2; border-radius: 28px; padding: clamp(24px, 3vw, 36px); min-height: 280px; display: grid; align-content: end; gap: 10px; position: relative; overflow: hidden; }
.tile--wide { grid-column: span 4; }
.tile--full { grid-column: span 6; min-height: 0; display: flex; align-items: center; gap: 22px; }
.tile--dark { background: var(--espresso); color: var(--on-dark); }
.tile--terra { background: var(--terra); color: var(--gesso); align-content: center; }
.tile--sand { background: var(--sand); }
.tile--white { background: var(--white); }
.tile--pist { background: var(--pist-2); }
.tile__ic { width: 52px; height: 52px; border-radius: 16px; background: rgba(188,199,156,.22); display: grid; place-items: center; align-self: start; flex: none; }
.tile--dark .tile__ic { position: absolute; top: clamp(24px, 3vw, 36px); left: clamp(24px, 3vw, 36px); }
.tile__ic .svgi { width: 26px; height: 26px; color: var(--pist); }
.tile--white .tile__ic { background: var(--gesso); }
.tile--white .tile__ic .svgi { color: var(--terra-ink); }
.tile__h { font: 700 clamp(1.4rem, 1.1rem + 1vw, 1.875rem)/1.1 var(--display); letter-spacing: -.025em; }
.tile p { color: var(--muted); font-size: 1rem; max-width: 34ch; }
.tile--dark p { color: var(--on-dark-2); }
.tile__big { font: 700 clamp(3rem, 2rem + 3vw, 4.5rem)/.95 var(--display); letter-spacing: -.04em; color: var(--gesso); }
.tile--terra .tile__large { font-size: 1.5rem; color: var(--gesso); }      /* 24px: large text, so gesso on terracotta passes (3.55:1) */
.tile__box { position: absolute; top: 28px; right: 28px; width: 120px; height: 86px; border-radius: 10px; background: linear-gradient(160deg, #E8D5BB, var(--sand-2)); box-shadow: 0 20px 30px -18px rgba(36,25,18,.45); }
.tile__box::before { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 24px; transform: translateX(-50%); background: rgba(255,255,255,.35); }
.tile__price { font: 700 clamp(2.5rem, 1.8rem + 2vw, 3.5rem)/1 var(--display); letter-spacing: -.035em; align-self: start; }
.tile__bubbles { display: grid; gap: 8px; align-self: start; font-size: .8125rem; margin-bottom: auto; }
.tile__bubbles span { background: var(--white); padding: 9px 12px; border-radius: 14px 14px 14px 4px; justify-self: start; max-width: 90%; }
.tile__bubbles .out { background: var(--espresso); color: var(--gesso); border-radius: 14px 14px 4px 14px; justify-self: end; }

/* ---- gallery ---- */
.gallery { --inset: max(var(--gutter), calc((100vw - var(--maxw)) / 2 + var(--gutter)));
  display: grid; grid-auto-flow: column; grid-auto-columns: min(78vw, 320px); gap: 16px;
  overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--inset); padding: 4px var(--inset) 12px;
  scrollbar-width: none; overscroll-behavior-x: contain; }
.gallery::-webkit-scrollbar { display: none; }
.gallery:focus-visible { outline-offset: -3px; }
.card { scroll-snap-align: start; background: var(--white); border-radius: 26px; padding: 30px 28px; min-height: 260px; display: grid; gap: 12px; align-content: start; }
.card__ic { width: 52px; height: 52px; border-radius: 16px; background: var(--pist-2); display: grid; place-items: center; margin-bottom: 18px; }
.card__ic .svgi { width: 26px; height: 26px; color: var(--espresso); }
.card h3 { font: 700 1.5rem/1.15 var(--display); letter-spacing: -.02em; }
.card p { color: var(--muted); }
.paddles { display: flex; gap: 10px; }
.paddle { width: 46px; height: 46px; border-radius: 50%; border: 1.5px solid var(--espresso); background: transparent; color: var(--espresso); font-size: 1.5rem; line-height: 1; cursor: pointer; transition: transform 100ms ease-out, background-color 150ms; }
.paddle:hover:not(:disabled) { background: var(--espresso); color: var(--gesso); }
.paddle:active:not(:disabled) { transform: scale(.94); }
.paddle:disabled { opacity: .3; cursor: default; }

/* ---- doctor ---- */
.v3-doc { display: grid; justify-items: center; }
.v3-portrait { width: min(100%, 420px); aspect-ratio: 4 / 5; border-radius: 32px; background: linear-gradient(170deg, #4A3427, var(--espresso-2)); border: 1.5px solid rgba(246,238,227,.16); position: relative; overflow: hidden; display: grid; place-items: center; }
.v3-portrait img { width: 100%; height: 100%; object-fit: cover; }
.v3-portrait__ph { display: grid; justify-items: center; gap: 10px; color: var(--on-dark-2); padding-bottom: 90px; }
.v3-portrait__ph .svgi { width: 64px; height: 64px; }
.v3-portrait figcaption { position: absolute; left: 16px; right: 16px; bottom: 16px; background: rgba(246,238,227,.92); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); color: var(--espresso); border-radius: 16px; padding: 14px 16px; display: grid; gap: 2px; }
.v3-portrait figcaption b { font: 700 1.125rem/1.2 var(--display); }
.v3-portrait figcaption span { font-size: .875rem; color: var(--muted); }

/* ---- compare ---- */
.v3-compare { display: grid; grid-template-columns: 1.15fr 1fr; gap: 18px; max-width: 920px; margin-inline: auto; align-items: stretch; }
.col { border-radius: 32px; padding: clamp(28px, 4vw, 44px); background: var(--white); display: grid; gap: 22px; align-content: start; }
.col--us { background: var(--espresso); color: var(--on-dark); }
.col__name { font: 700 1.25rem/1.2 var(--display); height: 26px; display: flex; align-items: center; }
.col__price { display: grid; gap: 2px; font: 700 2.75rem/1 var(--display); letter-spacing: -.03em; }
.col__price small { font: 600 .875rem/1.3 var(--body); letter-spacing: .01em; color: var(--on-dark-2); }
.col__price--muted { color: var(--muted); font-size: 2rem; }
.col__price--muted small { color: var(--muted); }
.col ul { list-style: none; display: grid; }
.col li { display: flex; align-items: center; gap: 12px; padding: 13px 0; border-bottom: 1px solid var(--line); min-height: 50px; }
.col--us li { border-bottom-color: rgba(246,238,227,.14); }
.col li:last-child { border-bottom: 0; }
.col li .svgi { width: 20px; height: 20px; color: var(--pist); }
.col .btn { justify-self: start; }

/* ---- close ---- */
.v3-close { padding-block: var(--section) 0; }
.v3-close .v3-head { gap: 26px; margin-bottom: 0; }
.v3-h1--close { font-size: clamp(2.4rem, 1.2rem + 4.4vw, 4.75rem); max-width: 16ch; }
.v3-close .notice { margin-top: clamp(56px, 7vw, 96px); padding-bottom: 40px; }

/* ---- responsive ---- */
@media (max-width: 1100px) {
  .float--doc { left: 16px; top: auto; bottom: 40px; }
  .float--price { right: 16px; }
  .float--box { right: 16px; top: auto; bottom: 120px; }
}
@media (max-width: 900px) {
  .story { grid-template-columns: 1fr; gap: 0; }
  .story__sticky { order: 0; top: 76px; z-index: 2; padding: 8px 0 22px; background: linear-gradient(var(--gesso) 82%, rgba(246,238,227,0)); }
  .device--story { width: 190px; height: 390px; border-radius: 36px; padding: 8px; }
  .device--story .device__screen { border-radius: 29px; }
  .device--story .scr { font-size: .5625rem; }
  .device--story .scr__bar { padding: 30px 12px 8px; font-size: .5rem; }
  .device--story .scr__body { padding: 10px; gap: 6px; }
  .device--story .scr__q { font-size: .75rem; }
  .device--story .scr__opt, .device--story .scr__slot { padding: 7px 9px; border-radius: 9px; }
  .device--story .scr__av { width: 64px; height: 64px; font-size: 1.25rem; }
  .device--story .scr__keys span { width: 38px; height: 38px; }
  .device--story .device__screen::before { width: 60px; height: 18px; top: 7px; }
  .story__step { min-height: min(46vh, 400px); padding-block: 24px; }
  .bento { grid-template-columns: 1fr; }
  .tile, .tile--wide, .tile--full { grid-column: auto; }
  .tile { min-height: 220px; }
  .tile--full { flex-direction: column; align-items: start; }
  .v3-compare { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .v3-hero { padding-top: 32px; }
  .v3-stage { height: 560px; }
  .device--hero { width: 250px; height: 516px; }
  .float--doc { left: 12px; right: 12px; width: auto; bottom: 16px; }
  .float--price { width: 112px; height: 112px; right: 10px; top: 6px; }
  .float--price b { font-size: 1.4rem; }
  .float--box { display: none; }
  .v3-head--row { flex-direction: column; align-items: start; }
  .paddles { display: none; }
  .v3-cta .btn { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .device--hero { animation: none; }
  .scr, .js-story .story__step h3, .js-story .story__step .story__n { transition: none; }
}

.col__price .tbc, .tile__price .tbc { justify-self: start; }
.tile--full p { max-width: 70ch; }

/* ---- clinical lead without names (founders 10 Oct 2026: don't lead with the doctor's identity) ---- */
.v3-lead { display: flex; align-items: center; gap: 16px; background: var(--gesso); color: var(--espresso); border-radius: 22px; padding: 18px 24px 18px 18px; margin-bottom: 28px; }
.v3-lead__ic { width: 56px; height: 56px; border-radius: 50%; background: var(--pist); display: grid; place-items: center; }
.v3-lead__ic .svgi { width: 28px; height: 28px; color: var(--espresso); }
.v3-lead b { display: block; font: 700 1.25rem/1.2 var(--display); }
.v3-lead span { color: var(--muted); font-size: .9375rem; }
.v3-facts { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; width: 100%; max-width: 1000px; }
.v3-facts li { border: 1.5px solid rgba(246,238,227,.22); border-radius: 18px; padding: 20px; display: grid; gap: 6px; align-content: start; }
.v3-facts .svgi { width: 24px; height: 24px; color: var(--pist); }
.v3-facts b { font: 650 1.0625rem/1.3 var(--display); }
.v3-facts span { color: var(--on-dark-2); font-size: .9375rem; line-height: 1.5; }
@media (max-width: 760px) { .v3-facts { grid-template-columns: 1fr; } }