/* ==========================================================================
   VELTIX — DESIGN SYSTEM · Website 2.0
   1 Tokens · 2 Base · 3 Type · 4 Layout · 5 Primitives · 6 Nav & chrome
   7 Hero · 8 Story · 9 Family Activity View · 10 Sections · 11 Pages
   12 Forms · 13 Consent, market bar, sticky CTA · 14 Motion · 15 Root/404
   ========================================================================== */

/* 1. TOKENS ------------------------------------------------------------- */
:root {
  /* Ink — night, depth, the app's own surfaces */
  --ink-950: #05080F;
  --ink-900: #070B14;
  --ink-850: #0A1020;
  --ink-800: #0E1628;
  --ink-700: #131D33;
  --ink-600: #1B2942;

  /* Bone — warm daylight surfaces. Warm, never grey. */
  --bone-0: #FDFBF7;
  --bone-50: #FAF7F1;
  --bone-100: #F4EFE7;
  --bone-150: #EEE8DE;
  --bone-200: #E4DCCE;
  --bone-300: #D3C9B8;

  /* One blue */
  --blue-800: #173A94;
  --blue-700: #1F49B4;
  --blue-600: #2B5BD7;
  --blue-500: #3D71E8;
  --blue-400: #7BA3FF;
  --blue-300: #A9C4FF;
  --blue-tint: rgba(61, 113, 232, .10);

  /* Signals — used for real states only, never decoration */
  --calm: #7BA3FF;
  --change: #E7B267;         /* "something changed": warm, not alarming */
  --change-ink: #7A5210;
  --ok: #4ECB92;
  --ok-ink: #1C7049;
  --error-ink: #B23A32;

  /* Text on light (all ≥ 4.5:1 on bone-150) */
  --tx-1: #121A2A;
  --tx-2: #434D61;
  --tx-3: #576174;
  /* Text on dark */
  --td-1: #FFFFFF;
  --td-2: #C8D0DE;
  --td-3: #97A3B8;

  --line: #E0D8CA;
  --line-2: #CFC4B2;
  --line-d: rgba(255, 255, 255, .09);
  --line-d2: rgba(255, 255, 255, .17);

  --f-sans: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --f-serif: "Fraunces", "Iowan Old Style", "Palatino Linotype", Georgia, serif;

  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 20px; --s6: 24px;
  --s7: 32px; --s8: 40px; --s9: 48px; --s10: 64px; --s11: 80px; --s12: 112px;

  --r-xs: 8px; --r-sm: 12px; --r-md: 16px; --r-lg: 22px; --r-xl: 30px; --r-full: 999px;

  --e1: 0 1px 2px rgba(18, 26, 42, .05), 0 2px 8px rgba(18, 26, 42, .04);
  --e2: 0 2px 4px rgba(18, 26, 42, .05), 0 14px 32px rgba(18, 26, 42, .09);
  --e3: 0 6px 12px rgba(18, 26, 42, .06), 0 30px 70px rgba(18, 26, 42, .16);
  --e-dark: 0 24px 60px rgba(0, 0, 0, .5);

  /* Motion — one easing family. Slow in, calm out. */
  --ease: cubic-bezier(.16, 1, .3, 1);
  --ease-io: cubic-bezier(.65, 0, .35, 1);
  --t-1: 160ms; --t-2: 260ms; --t-3: 480ms; --t-scene: 900ms;

  --wrap: 1200px;
  --gutter: clamp(20px, 4vw, 32px);
  --nav-h: 72px;
}
@media (max-width: 767px) { :root { --nav-h: 64px; } }

/* 2. BASE ---------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--nav-h) + 16px); }
html:focus-within { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--f-sans);
  font-size: 17px;
  line-height: 1.65;
  color: var(--tx-2);
  background: var(--bone-50);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
  text-rendering: optimizeLegibility;
}
img, svg { display: block; max-width: 100%; }
img { height: auto; }      /* never let a width-only rule distort a photo */
a { color: inherit; text-decoration: none; }
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
p, ul, ol, dl, dd, figure, h1, h2, h3, h4 { margin: 0; }
ul, ol { padding: 0; list-style: none; }
strong { font-weight: 700; color: inherit; }
[hidden] { display: none !important; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

:focus { outline: none; }
:focus-visible { outline: 3px solid var(--blue-600); outline-offset: 3px; border-radius: 6px; }
.on-ink :focus-visible, .cta-final :focus-visible, .footer :focus-visible, .stage :focus-visible { outline-color: var(--blue-300); }

.skip {
  position: fixed; left: 16px; top: -120px; z-index: 400;
  padding: 14px 20px; border-radius: var(--r-sm);
  background: #fff; color: var(--tx-1); font-weight: 700; box-shadow: var(--e3);
  transition: top var(--t-1) var(--ease);
}
.skip:focus { top: 16px; }
.sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
#main:focus { outline: none; }

/* 3. TYPE ---------------------------------------------------------------- */
h1, h2, h3, h4 { color: var(--tx-1); font-weight: 700; letter-spacing: -.015em; line-height: 1.2; }
.display, .h-page, .h-sec, .step-title, .metric-num, .plan-price .num, .root-title {
  font-family: var(--f-serif);
  font-weight: 400;
  font-optical-sizing: auto;
  letter-spacing: -.02em;
}
.display { font-size: clamp(2.6rem, 5.6vw, 5.1rem); line-height: 1.0; color: var(--tx-1); text-wrap: balance; }
.h-page { font-size: clamp(2.3rem, 4.6vw, 3.9rem); line-height: 1.04; }
.h-sec { font-size: clamp(1.95rem, 3.4vw, 3.05rem); line-height: 1.08; }
.h-card { font-size: 1.2rem; font-weight: 700; line-height: 1.3; letter-spacing: -.01em; }
.lead { font-size: clamp(1.08rem, 1.45vw, 1.24rem); line-height: 1.6; color: var(--tx-2); max-width: 62ch; }
.eyebrow {
  display: flex; align-items: center; flex-wrap: wrap; gap: 10px;
  font-size: .8rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; line-height: 1.4;
  color: var(--blue-700);
}
.fineprint { font-size: .9rem; line-height: 1.55; color: var(--tx-3); margin-top: var(--s5); max-width: 80ch; }
.center { text-align: center; margin-left: auto; margin-right: auto; }
.num { font-variant-numeric: tabular-nums; }

.on-ink { background: var(--ink-900); color: var(--td-2); }
.on-ink h1, .on-ink h2, .on-ink h3, .on-ink .h-sec, .on-ink .h-page { color: var(--td-1); }
.on-ink .lead { color: var(--td-2); }
.on-ink .eyebrow { color: var(--blue-300); }
.on-ink .fineprint { color: var(--td-3); }
.on-light { background: var(--bone-50); }
.on-bone { background: var(--bone-100); }

/* 4. LAYOUT -------------------------------------------------------------- */
.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }
.wrap--narrow { max-width: 860px; }
.section { padding: clamp(72px, 9vw, 128px) 0; }
.sec-head { max-width: 760px; margin-bottom: clamp(36px, 5vw, 60px); }
.sec-head .eyebrow { margin-bottom: var(--s4); }
.sec-head .lead { margin-top: var(--s5); }
.sec-head--center { margin-left: auto; margin-right: auto; text-align: center; }
.sec-head--center .eyebrow { justify-content: center; }
.sec-head--center .lead { margin-left: auto; margin-right: auto; }
.grid-2 { display: grid; gap: var(--s5); grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { display: grid; gap: var(--s5); grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 899px) { .grid-3 { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 767px) { .grid-2 { grid-template-columns: minmax(0, 1fr); } }

/* 5. PRIMITIVES ---------------------------------------------------------- */
.i { width: 20px; height: 20px; flex: none; stroke-width: 1.75; }
.i-sm { width: 16px; height: 16px; }
.i-lg { width: 26px; height: 26px; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 12px 22px;
  border-radius: var(--r-sm); border: 1.5px solid transparent;
  font-weight: 700; font-size: 1rem; letter-spacing: -.01em; line-height: 1.2; text-align: center;
  transition: background var(--t-1) var(--ease), color var(--t-1) var(--ease),
              border-color var(--t-1) var(--ease), transform var(--t-1) var(--ease), box-shadow var(--t-2) var(--ease);
}
.btn:active { transform: translateY(1px); }
.btn-lg { min-height: 56px; padding: 15px 28px; font-size: 1.04rem; }
.btn-sm { min-height: 44px; padding: 10px 16px; font-size: .95rem; }
.btn-block { width: 100%; }
.btn-primary { background: var(--blue-600); color: #fff; box-shadow: 0 1px 0 rgba(255,255,255,.18) inset, 0 8px 22px rgba(43, 91, 215, .24); }
.btn-primary:hover { background: var(--blue-700); }
.btn-secondary { background: transparent; color: var(--tx-1); border-color: var(--line-2); }
.btn-secondary:hover { background: #fff; border-color: var(--tx-3); }
.on-ink .btn-secondary, .consent .btn-secondary { color: var(--td-1); border-color: var(--line-d2); }
.on-ink .btn-secondary:hover, .consent .btn-secondary:hover { background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.35); }
.btn-ghost { color: var(--tx-1); padding-left: 10px; padding-right: 10px; }
.btn-ghost:hover { color: var(--blue-700); }
.btn-ghost .i { transition: transform var(--t-2) var(--ease); }
.btn-ghost:hover .i { transform: translateY(3px); }
.btn-white { background: #fff; color: var(--blue-800); }
.btn-white:hover { background: var(--bone-100); }
.btn[disabled] { opacity: .6; cursor: progress; }

.link-quiet {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px;
  font-weight: 700; color: var(--blue-700);
}
.link-quiet .i { transition: transform var(--t-2) var(--ease); }
.link-quiet:hover .i { transform: translateX(3px); }
.on-ink .link-quiet { color: var(--blue-300); }

.badge {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 12px; border-radius: var(--r-full);
  font-size: .8rem; font-weight: 700; letter-spacing: .02em; line-height: 1.3;
  border: 1px solid var(--line-2); color: var(--tx-2);
}
.badge--accent { border-color: rgba(43, 91, 215, .3); background: var(--blue-tint); color: var(--blue-800); }
.on-ink .badge--accent { border-color: rgba(123, 163, 255, .4); color: var(--blue-300); background: rgba(61,113,232,.12); }
.badge--planned { border-style: dashed; color: var(--tx-3); }
.badge-optional {
  display: inline-flex; padding: 3px 10px; border-radius: var(--r-full);
  border: 1px dashed currentColor; letter-spacing: .1em; font-size: .75rem;
}
.dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: none; }
.tag-real {
  display: inline-block; padding: 2px 8px; margin-right: 6px; border-radius: var(--r-full);
  background: var(--ink-800); color: #fff; font-size: .75rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  vertical-align: 1px;
}

.card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: clamp(24px, 3vw, 34px); box-shadow: var(--e1);
}
.card h3 { font-size: 1.2rem; margin-bottom: var(--s3); }
.on-ink .card { background: var(--ink-800); border-color: var(--line-d); box-shadow: none; }
.card-tag {
  display: inline-flex; align-items: center; gap: 8px; margin-bottom: var(--s4);
  font-size: .78rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; color: var(--blue-700);
}

.note {
  display: flex; gap: var(--s4); align-items: flex-start; margin-top: var(--s8);
  padding: var(--s6); border-radius: var(--r-md);
  background: var(--bone-150); border: 1px solid var(--line);
}
.note .i { color: var(--blue-700); margin-top: 3px; }
.note a { color: var(--blue-700); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.on-ink .note { background: rgba(255,255,255,.03); border-color: var(--line-d); }

.ticks { display: grid; gap: 10px; margin: var(--s6) 0; }
.ticks li { display: flex; gap: 10px; align-items: center; font-weight: 600; color: var(--tx-1); }
.ticks .i { color: var(--blue-600); }

/* Phone frame around a real app screen */
.phone {
  position: relative; width: 100%;
  padding: 7px; border-radius: 34px;
  background: linear-gradient(155deg, #2B3652, #0E1628 60%);
  box-shadow: 0 1px 0 rgba(255,255,255,.14) inset, var(--e3);
}
.phone-glass { position: relative; border-radius: 28px; overflow: hidden; background: #0A0E1A; }
.phone-img { width: 100%; height: auto; }
.screen-crop {
  border-radius: 22px; overflow: hidden; background: #0A0E1A;
  border: 1px solid var(--line-d2); box-shadow: var(--e-dark);
}
.screen-crop img { width: 100%; height: auto; }

/* 6. NAV & CHROME -------------------------------------------------------- */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  height: var(--nav-h);
  background: rgba(250, 247, 241, .72);
  -webkit-backdrop-filter: saturate(1.4) blur(16px);
  backdrop-filter: saturate(1.4) blur(16px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--t-2) var(--ease), background var(--t-2) var(--ease);
}
.nav.is-scrolled { background: rgba(250, 247, 241, .9); border-bottom-color: var(--line); }
.nav-in { height: 100%; max-width: 1320px; margin: 0 auto; padding: 0 var(--gutter); display: flex; align-items: center; gap: var(--s6); }
.brand { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; flex: none; }
.brand-mark { width: auto; height: 34px; }
.brand-word { font-weight: 800; font-size: 1.28rem; letter-spacing: -.03em; color: var(--tx-1); }
.brand--light .brand-word { color: #fff; }
.nav-links { display: flex; align-items: center; gap: 2px; margin-left: var(--s4); }
.nav-link {
  position: relative; display: inline-flex; align-items: center; min-height: 44px; padding: 8px 14px;
  border-radius: var(--r-sm); font-size: .96rem; font-weight: 600; color: var(--tx-2);
  transition: color var(--t-1), background var(--t-1);
}
.nav-link:hover { color: var(--tx-1); background: rgba(18, 26, 42, .045); }
.nav-link[aria-current="page"] { color: var(--tx-1); }
.nav-link[aria-current="page"]::after {
  content: ""; position: absolute; left: 50%; bottom: 4px; width: 5px; height: 5px; margin-left: -2.5px;
  border-radius: 50%; background: var(--blue-600);
}
.nav-tools { margin-left: auto; display: flex; align-items: center; gap: var(--s3); }
.nav-cta { min-height: 44px; padding: 10px 18px; font-size: .95rem; box-shadow: none; }
.nav-toggle {
  display: none; width: 46px; height: 46px; align-items: center; justify-content: center;
  border-radius: var(--r-sm); border: 1px solid var(--line-2); color: var(--tx-1);
}
.region { position: relative; }
.region-btn {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 12px;
  border-radius: var(--r-sm); font-size: .9rem; font-weight: 700; color: var(--tx-2);
}
.region-btn:hover { background: rgba(18, 26, 42, .045); color: var(--tx-1); }
.region-menu {
  position: absolute; right: 0; top: calc(100% + 8px); width: 270px;
  padding: 10px; border-radius: var(--r-md); background: #fff;
  border: 1px solid var(--line); box-shadow: var(--e3);
}
.region-title { padding: 6px 10px 8px; font-size: .75rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--tx-3); }
.region-opt, .footer-region-opt {
  display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 8px 10px;
  border-radius: var(--r-sm); font-weight: 600; color: var(--tx-1);
}
.region-opt:hover { background: var(--bone-100); }
.region-opt[aria-current="true"] { background: var(--blue-tint); color: var(--blue-800); }
.region-flag {
  display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 22px;
  border-radius: 5px; background: var(--bone-150); font-size: .75rem; font-weight: 800; letter-spacing: .04em; color: var(--tx-2);
}
@media (max-width: 1060px) {
  .nav-links { display: none; }
  .nav-toggle { display: inline-flex; }
}
@media (max-width: 767px) {
  .nav-cta, .region { display: none; }
  .brand-mark { height: 30px; }
}

.drawer {
  position: fixed; inset: 0; z-index: 300; overflow-y: auto;
  display: flex; flex-direction: column; gap: var(--s6);
  padding: 0 var(--gutter) var(--s8); background: var(--bone-50);
}
.drawer-top { display: flex; align-items: center; justify-content: space-between; height: var(--nav-h); flex: none; }
.drawer-close { width: 46px; height: 46px; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--r-sm); border: 1px solid var(--line-2); color: var(--tx-1); }
.drawer-nav { display: flex; flex-direction: column; }
.drawer-link {
  display: flex; align-items: center; min-height: 58px; border-bottom: 1px solid var(--line);
  font-family: var(--f-serif); font-size: 1.7rem; color: var(--tx-1); letter-spacing: -.01em;
}
.drawer-link[aria-current="page"] { color: var(--blue-700); }
.drawer-region ul { display: grid; gap: 4px; }

.footer { background: var(--ink-950); color: var(--td-3); padding: clamp(64px, 8vw, 96px) 0 var(--s8); }
.footer-grid { display: grid; gap: var(--s8) var(--s6); grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)); padding-bottom: var(--s8); border-bottom: 1px solid var(--line-d); }
@media (max-width: 899px) { .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 539px) { .footer-grid { grid-template-columns: minmax(0, 1fr); } }
.footer-brand p { margin-top: var(--s4); max-width: 34ch; }
.footer-h { font-size: .78rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; color: var(--td-3); margin-bottom: var(--s3); }
.footer-col { display: flex; flex-direction: column; align-items: flex-start; }
.footer-col a, .footer-btn { display: inline-flex; align-items: center; min-height: 44px; color: var(--td-2); font-size: .97rem; text-align: left; }
.footer-col a:hover, .footer-btn:hover { color: #fff; }
.footer-region { margin-top: var(--s4); }
.footer-region .region-title { padding: 0 0 6px; color: var(--td-3); }
.footer-region-opt { color: var(--td-2); padding-left: 0; }
.footer-region-opt .region-flag { background: rgba(255,255,255,.08); color: var(--td-2); }
.footer-region-opt[aria-current="true"] { color: #fff; }
.footer-legal { display: grid; gap: var(--s3); padding-top: var(--s6); font-size: .9rem; line-height: 1.6; }
.footer-legal p { max-width: 90ch; }

/* 7. HERO ---------------------------------------------------------------- */
.hero { position: relative; background: var(--bone-150); overflow: hidden; }
.hero-media { position: relative; container-type: size; overflow: hidden; }
/* "cover" that keeps a known point of the photo (the Patch) addressable in %.
   --ar is the photo's width/height; --fx/--fy the focal point, like object-position. */
.hero-frame, .st-frame, .st-close-frame {
  position: absolute;
  width: max(100cqw, 100cqh * var(--ar));
  aspect-ratio: var(--ar);
  left: calc((100cqw - max(100cqw, 100cqh * var(--ar))) * var(--fx));
  top: calc((100cqh - max(100cqw, 100cqh * var(--ar)) / var(--ar)) * var(--fy));
}
.hero-frame { --fx: .5; --fy: .75; }       /* --ar, --px, --py come inline with the photograph */
.hero-img { width: 100%; height: 100%; }
.patch-halo {
  position: absolute; left: var(--px); top: var(--py); width: 34px; height: 34px; margin: -17px 0 0 -17px;
  border-radius: 50%; border: 1.5px solid rgba(43, 91, 215, .55);
  animation: breathe 4.2s var(--ease-io) infinite;
  pointer-events: none;
}
.hero-copy { position: relative; z-index: 2; }
.hero-copy .eyebrow { margin-bottom: var(--s5); }
.hero-lead { margin-top: var(--s6); }
.hero-ctas { display: flex; flex-wrap: wrap; gap: var(--s3); margin-top: var(--s7); }
.hero-note { margin-top: var(--s4); font-size: .9rem; font-weight: 600; color: var(--tx-3); }
.assurances { display: flex; flex-wrap: wrap; gap: 10px 22px; margin-top: var(--s7); padding-top: var(--s5); border-top: 1px solid var(--line-2); }
.assurances li { display: flex; align-items: center; gap: 8px; font-size: .94rem; font-weight: 600; color: var(--tx-1); }
.assurances .i { color: var(--blue-600); }

/* Ticker — the story in six beats, the "trailer" */
.ticker {
  position: absolute; z-index: 3; display: flex; align-items: center; gap: 6px;
  padding: 8px 8px 8px 16px; border-radius: var(--r-full);
  background: rgba(14, 22, 40, .78); color: #fff;
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  box-shadow: var(--e-dark);
  max-width: calc(100% - 32px);
}
.tk-list { position: relative; height: 1.5em; width: min(25rem, calc(100vw - 110px)); overflow: hidden; font-size: .92rem; line-height: 1.5; }
.tk {
  position: absolute; inset: 0; display: flex; gap: 10px; align-items: center; white-space: nowrap;
  opacity: 0; transform: translateY(70%);
  transition: opacity var(--t-3) var(--ease), transform var(--t-3) var(--ease);
}
.tk.is-on { opacity: 1; transform: none; }
.tk.is-off { opacity: 0; transform: translateY(-70%); }
.tk::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--calm); flex: none; box-shadow: 0 0 0 3px rgba(123,163,255,.22); }
.tk[data-tone="change"]::before { background: var(--change); box-shadow: 0 0 0 3px rgba(231,178,103,.25); }
.tk[data-tone="ok"]::before { background: var(--ok); box-shadow: 0 0 0 3px rgba(78,203,146,.25); }
.tk-time { font-weight: 700; color: var(--td-2); font-variant-numeric: tabular-nums; }
.tk-text { font-weight: 600; overflow: hidden; text-overflow: ellipsis; }
.tk-toggle { position: relative; width: 34px; height: 34px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: var(--td-2); flex: none; }
.tk-toggle::before { content: ""; position: absolute; inset: -5px; border-radius: 50%; } /* 44px hit area, 34px visual */
.tk-toggle:hover { background: rgba(255,255,255,.1); color: #fff; }
.tk-toggle .tk-i-play { display: none; }
.tk-toggle[aria-pressed="true"] .tk-i-play { display: block; }
.tk-toggle[aria-pressed="true"] .tk-i-pause { display: none; }
/* Without JS the six beats read as one static line-up (`is-static` does the
   same for any other fallback). With JS they always play one at a time —
   reduced motion only drops the slide, see the media query at the end. */
.no-js .tk-list, .ticker.is-static .tk-list { height: auto; }
.no-js .tk, .ticker.is-static .tk { position: static; opacity: 1; transform: none; }
.no-js .tk-toggle, .ticker.is-static .tk-toggle { display: none; }
.ticker.is-static { border-radius: var(--r-lg); padding: 12px 16px; }

@media (min-width: 1024px) {
  .hero {
    display: grid; grid-template-columns: minmax(0, 1fr); align-items: center;
    min-height: min(max(680px, 100svh), 940px);
  }
  .hero-media { position: absolute; inset: 0 0 0 34%; }
  .hero-frame { --fx: .17; --fy: .5; }       /* keeps the Patch to the right of the fade and the copy */
  .patch-halo { width: 60px; height: 60px; margin: -30px 0 0 -30px; }
  .hero-media::before {        /* bleed the photograph into the page, no hard edge */
    content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
    background: linear-gradient(90deg, var(--bone-150) 0%, rgba(238,232,222,.86) 10%, rgba(238,232,222,0) 34%);
  }
  .hero-copy {
    width: 100%; max-width: var(--wrap); margin: 0 auto;
    padding: calc(var(--nav-h) + 40px) var(--gutter) 72px;
  }
  .hero-copy > * { max-width: 560px; }
  .hero-copy .display { max-width: 700px; }   /* two-line headline; the extra width sits over the faded wall */
  .ticker { left: 30%; bottom: 40px; }
}
@media (max-width: 1023px) {
  .hero { padding-top: var(--nav-h); }
  .hero-media { height: clamp(250px, 42svh, 420px); }
  .hero-frame { --fx: .5; --fy: .75; }
  .hero-media::after {
    content: ""; position: absolute; inset: auto 0 0 0; height: 30%; z-index: 1; pointer-events: none;
    background: linear-gradient(180deg, rgba(238,232,222,0), var(--bone-150));
  }
  .hero-copy { padding: 18px var(--gutter) 44px; }
  .ticker { left: 16px; bottom: 18px; }
  .display { font-size: clamp(2.2rem, 9.6vw, 3.6rem); }
  .hero-lead { margin-top: var(--s4); font-size: 1.05rem; }
  .hero-ctas { margin-top: var(--s5); }
  .hero-ctas .btn-primary { flex: 1 1 100%; }
  .hero-ctas .btn-ghost { flex: 1 1 100%; }
  .assurances { margin-top: var(--s6); }
}
@media (max-width: 767px) and (orientation: portrait) {
  .hero-media { height: clamp(220px, 36svh, 340px); }   /* tall enough that the Patch clears the ticker */
}
/* Short phones (e.g. 375×667): headline, promise and CTA come first.
   The ticker steps aside; the story right below carries the sequence. */
@media (max-width: 767px) and (max-height: 760px) {
  .hero-media { height: clamp(170px, 30svh, 240px); }
  .hero-frame { --fy: .8; }
  .hero .ticker { display: none; }
  .hero-copy .eyebrow { display: none; }
  .hero-lead { font-size: 1rem; line-height: 1.5; margin-top: 12px; }
  .hero-ctas { margin-top: 16px; }
}

/* 8. STORY — one ordinary day ------------------------------------------ */
/* The whole section follows the day: morning bone → night ink → morning. */
.story { position: relative; background-color: var(--bone-150); transition: background-color 1.1s var(--ease); }
.story.is-dark { background-color: #0B1122; }
.story .step-title, .story .step-body, .story .step-kicker { transition: color 1.1s var(--ease); }
.story.is-dark .step-title { color: #fff; }
.story.is-dark .step-body { color: var(--td-2); }
.story.is-dark .step-kicker { color: var(--blue-300); }
.story-head { padding-top: clamp(72px, 9vw, 120px); padding-bottom: clamp(32px, 4vw, 56px); }
.story-head .eyebrow { margin-bottom: var(--s4); }
.story-head .lead { margin-top: var(--s4); }
.skip-story { margin-top: var(--s4); }
.story-body { position: relative; }
.story-foot {
  display: flex; gap: 10px; align-items: flex-start; padding-top: var(--s6); padding-bottom: clamp(56px, 7vw, 96px);
  font-size: .88rem; line-height: 1.55; color: var(--tx-3);
}
.story-foot .i { margin-top: 3px; flex: none; }

.stage-wrap { position: relative; }
.stage {
  position: relative; overflow: hidden; container-type: size;
  height: 100vh; height: 100svh;
  background: var(--bone-150);
  --dur: var(--t-scene);
  --fx: .49; --fy: .5;         /* focal point of the stage photograph; --ar, --pxf, --pyf come inline */
  /* The photograph's frame: "cover" by default. Phones use a slightly smaller
     frame so her face and the Patch both fit the narrow screen. */
  --fw: max(100cqw, 100cqh * var(--ar)); --fh: calc(var(--fw) / var(--ar));
}
.st-bg { position: absolute; inset: 0; background: radial-gradient(120% 90% at 30% 20%, #F6F1E8, var(--bone-150) 60%); }
.st-photo, .st-close { position: absolute; inset: 0; overflow: hidden; }
.st-frame {
  width: var(--fw); height: var(--fh);
  left: calc((100cqw - var(--fw)) * var(--fx)); top: calc((100cqh - var(--fh)) * var(--fy));
  transform-origin: var(--px) var(--py);
  transition: transform calc(var(--dur) * 1.25) var(--ease), filter var(--dur) var(--ease);
  will-change: transform;
}
.st-img { width: 100%; height: 100%; }
.st-close { opacity: 0; transition: opacity var(--dur) var(--ease); }
.st-close > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--cx) var(--cy); }
/* The morning after: the family, together (the story's last beat). */
.st-end { position: absolute; inset: 0; overflow: hidden; opacity: 0; transition: opacity var(--dur) var(--ease); }
.st-end > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--ex) var(--ey); }
.stage[data-scene="end"] .st-end { opacity: 1; }
.st-close-label {
  position: absolute; left: 50%; top: 66%; transform: translate(-50%, 0);
  display: inline-flex; align-items: center; gap: 10px; padding: 10px 16px; border-radius: var(--r-full);
  background: rgba(255,255,255,.94); color: var(--tx-1); font-weight: 700; font-size: .95rem; white-space: nowrap;
  box-shadow: var(--e2);
}
.st-close-label small { font-weight: 600; color: var(--tx-3); font-size: .85rem; }
.st-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--blue-500); box-shadow: 0 0 0 4px rgba(61,113,232,.18); flex: none; }
.st-dusk {
  position: absolute; inset: 0; opacity: 0; pointer-events: none;
  background:
    radial-gradient(90% 70% at 40% 62%, rgba(16, 26, 52, .45), rgba(7, 11, 20, .92) 70%),
    linear-gradient(180deg, rgba(10, 16, 32, .6), rgba(7, 11, 20, .85));
  transition: opacity var(--dur) var(--ease);
}
.st-patch { position: absolute; left: var(--px); top: var(--py); width: 0; height: 0; }
.st-ring {
  position: absolute; left: -32px; top: -32px; width: 64px; height: 64px; border-radius: 50%;
  border: 2px solid var(--blue-400); opacity: 0;
}
.st-progress { position: absolute; z-index: 4; top: calc(var(--nav-h) + 14px); left: 50%; transform: translateX(-50%); }
.st-progress ol { display: flex; gap: 6px; }
.st-progress li { width: 18px; height: 3px; border-radius: 2px; background: rgba(18,26,42,.18); transition: background var(--t-2), width var(--t-3) var(--ease); }
.st-progress li.is-past { background: rgba(18,26,42,.42); }
.st-progress li.is-now { width: 30px; background: var(--blue-600); }
.st-clock {
  position: absolute; z-index: 4; top: calc(var(--nav-h) + 30px); left: 50%; transform: translateX(-50%);
  display: inline-flex; align-items: center; gap: 8px; margin-top: 6px;
  padding: 6px 14px; border-radius: var(--r-full);
  background: rgba(255,255,255,.9); color: var(--tx-1); font-weight: 700; font-size: .86rem; font-variant-numeric: tabular-nums;
  white-space: nowrap; box-shadow: var(--e1);
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.st-clock-t:empty::before { content: "\00a0"; }

.st-tag {
  /* Sits on the Patch: the same "cover" geometry as .st-frame, in stage units. */
  position: absolute; z-index: 3;
  left: calc((100cqw - var(--fw)) * var(--fx) + var(--fw) * var(--pxf));
  top: calc((100cqh - var(--fh)) * var(--fy) + var(--fh) * var(--pyf));
  display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px; border-radius: var(--r-full);
  background: rgba(255,255,255,.85); color: var(--tx-1); font-size: .84rem; font-weight: 700; white-space: nowrap;
  transform: translate(28px, -50%); opacity: 0; transition: opacity var(--t-3) var(--ease);
}
.st-tag-b { display: none; }

.st-day {
  position: absolute; z-index: 3; left: 6%; top: 24%;
  display: grid; gap: 8px; width: min(46cqw, 290px);
}
.st-day li {
  display: flex; align-items: center; gap: 10px; padding: 9px 14px; border-radius: var(--r-md);
  background: rgba(255,255,255,.93); color: var(--tx-1); font-size: .9rem; font-weight: 600;
  box-shadow: var(--e1);
  opacity: 0; transform: translateX(-12px); white-space: nowrap;
  transition: opacity var(--t-3) var(--ease), transform var(--t-3) var(--ease), background var(--dur), color var(--dur);
  transition-delay: calc(var(--i, 0) * 110ms);
}
.st-day li .i { color: var(--ok-ink); }
.st-day .st-day-change { display: none; background: rgba(40, 30, 12, .72); color: #FBE3BD; border: 1px solid rgba(231,178,103,.5); }
.st-day .st-day-change::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--change); flex: none; }

.st-links { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; overflow: visible; pointer-events: none; }
.st-link { fill: none; stroke: var(--blue-300); stroke-width: 1.5; stroke-dasharray: 3 6; opacity: 0; transition: opacity var(--t-3) var(--ease); }
.st-pulse {
  position: absolute; z-index: 3; left: 0; top: 0; width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: 50%;
  background: #fff; box-shadow: 0 0 0 4px rgba(123,163,255,.35), 0 0 16px rgba(123,163,255,.9);
  offset-rotate: 0deg; opacity: 0; pointer-events: none;
}
.st-ble, .st-cloud, .st-loc {
  position: absolute; z-index: 3; display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px; border-radius: var(--r-full); white-space: nowrap;
  background: rgba(14,22,40,.94); color: #fff; font-size: .85rem; font-weight: 700;
  border: 1px solid var(--line-d2);
  opacity: 0; transition: opacity var(--t-3) var(--ease), transform var(--t-3) var(--ease);
}
.st-ble .i, .st-cloud .i { color: var(--blue-300); }
.st-loc .i { color: var(--ok); }
.st-ble { left: 44%; top: 44%; }
.st-cloud { left: 38%; top: 17%; }

.st-phone {
  position: absolute; z-index: 3; right: 8%; top: 16%; width: clamp(170px, 25cqw, 250px);
  opacity: 0; transform: translate3d(40px, 30px, 0) scale(.96);
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease), right var(--dur) var(--ease),
              left var(--dur) var(--ease), top var(--dur) var(--ease), width var(--dur) var(--ease);
}
.phone--stage { box-shadow: 0 1px 0 rgba(255,255,255,.14) inset, 0 40px 90px rgba(0,0,0,.55); }
.st-scr { transition: opacity var(--t-3) var(--ease); }
.st-scr--alerted { position: absolute; inset: 0; opacity: 0; }
.st-tap {                  /* the real "I'm OK — Cancel" button: 83.6%–91.4% of the screen */
  position: absolute; left: 5.4%; right: 5.4%; top: 83.3%; height: 8.4%;
  border-radius: 12px; border: 2px solid var(--blue-400);
  box-shadow: 0 0 0 6px rgba(123,163,255,.18);
  opacity: 0; transition: opacity var(--t-3) var(--ease);
}

.st-contacts { position: absolute; z-index: 3; left: 6%; top: 28%; display: grid; gap: 10px; width: min(40cqw, 300px); }
.st-contact {
  position: relative; display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 12px; row-gap: 4px;
  align-items: center; padding: 12px 14px; border-radius: var(--r-md);
  background: rgba(14,22,40,.94); color: #fff; border: 1px solid var(--line-d2);
  opacity: 0; transform: translateX(-14px);
  transition: opacity var(--t-3) var(--ease), transform var(--t-3) var(--ease), border-color var(--t-3);
  transition-delay: calc(var(--d, 0) * 1ms);
}
.st-contact[data-c="1"] { --d: 160; }
.st-contact[data-c="2"] { --d: 320; }
.st-avatar {
  grid-row: 1 / 3; width: 38px; height: 38px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--ink-600); color: var(--blue-300); font-weight: 800;
}
.st-who strong { display: block; font-size: .95rem; line-height: 1.2; }
.st-who small { font-size: .78rem; color: var(--td-3); }
.st-states { grid-column: 2; display: flex; flex-direction: column; gap: 3px; }
.st-state { display: none; align-items: center; gap: 6px; font-size: .78rem; font-weight: 700; color: var(--blue-300); white-space: nowrap; }
.st-state--ok, .st-state--loc { color: var(--ok); }
.st-state--text { color: var(--td-2); }
.st-state--miss { color: var(--td-3); }
.st-loc { left: 6%; top: calc(28% + 3 * 74px); }
/* The cascade rule, in words, under the contacts (desktop; on phones the captions say it). */
.st-rule {
  justify-self: start; margin-top: 2px;
  display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: var(--r-full);
  background: rgba(14,22,40,.72); color: var(--td-2); font-size: .8rem; font-weight: 700; white-space: nowrap;
  border: 1px solid var(--line-d2); opacity: 0; transition: opacity var(--t-3) var(--ease);
}
.st-rule .i { color: var(--blue-300); }

/* Scenes --------------------------------------------------------------- */
.stage[data-scene="wear"] .st-frame { transform: scale(2.6); }
.stage[data-scene="wear"] .st-close { opacity: 1; transition-delay: .45s; }
.stage[data-scene="day"] .st-frame { transform: scale(1.04); }
.stage[data-scene="day"] .st-day li:not(.st-day-change) { opacity: 1; transform: none; }
.stage[data-scene="day"] .st-tag--patch { opacity: 1; }
.stage[data-scene="day"] .st-ring--a { animation: breathe 4.2s var(--ease-io) infinite; }

.stage[data-scene="change"] .st-frame { transform: scale(1.1); filter: saturate(.7); }
.stage[data-scene="change"] .st-dusk { opacity: .78; }
.stage[data-scene="change"] .st-day li { opacity: .55; transform: none; background: rgba(255,255,255,.14); color: #E9ECF3; box-shadow: none; }
.stage[data-scene="change"] .st-day li .i { color: var(--td-3); }
.stage[data-scene="change"] .st-day .st-day-change { display: flex; opacity: 1; }

.stage[data-scene="detect"] .st-close { opacity: 1; }
.stage[data-scene="detect"] .st-dusk { opacity: .58; }
.stage[data-scene="detect"] .st-close-label small { display: none; }
.stage[data-scene="detect"] .st-close-label { background: rgba(14,22,40,.86); color: #fff; }
.stage[data-scene="detect"] .st-close-label::after { content: attr(data-detected); }

.stage[data-scene="phone"] .st-frame,
.stage[data-scene="respond"] .st-frame,
.stage[data-scene="family"] .st-frame,
.stage[data-scene="cascade"] .st-frame,
.stage[data-scene="knows"] .st-frame { transform: scale(1.08); filter: saturate(.6); }
.stage[data-scene="phone"] .st-dusk,
.stage[data-scene="respond"] .st-dusk,
.stage[data-scene="family"] .st-dusk,
.stage[data-scene="cascade"] .st-dusk,
.stage[data-scene="knows"] .st-dusk { opacity: .86; }
.stage[data-scene="phone"] .st-phone,
.stage[data-scene="respond"] .st-phone,
.stage[data-scene="family"] .st-phone,
.stage[data-scene="cascade"] .st-phone,
.stage[data-scene="knows"] .st-phone { opacity: 1; transform: none; }
.stage[data-scene="phone"] .st-link--ble,
.stage[data-scene="phone"] .st-ble { opacity: 1; }
.stage[data-scene="phone"] .st-tag--patch,
.stage[data-scene="respond"] .st-tag--patch { opacity: 1; }
.stage[data-scene="phone"] .st-tag--patch .st-tag-a,
.stage[data-scene="respond"] .st-tag--patch .st-tag-a { display: none; }
.stage[data-scene="phone"] .st-tag--patch .st-tag-b,
.stage[data-scene="respond"] .st-tag--patch .st-tag-b { display: inline; }
.stage[data-scene="respond"] .st-phone { transform: scale(1.06); }
.stage[data-scene="respond"] .st-tap { opacity: 1; animation: tap 2.4s var(--ease-io) infinite; }
.stage[data-scene="family"] .st-scr--alerted,
.stage[data-scene="cascade"] .st-scr--alerted,
.stage[data-scene="knows"] .st-scr--alerted { opacity: 1; }
.stage[data-scene="family"] .st-cloud,
.stage[data-scene="cascade"] .st-cloud,
.stage[data-scene="knows"] .st-cloud { opacity: 1; }
.stage[data-scene="family"] .st-contact,
.stage[data-scene="cascade"] .st-contact,
.stage[data-scene="knows"] .st-contact { opacity: 1; transform: none; }
.stage[data-scene="family"] .st-rule,
.stage[data-scene="cascade"] .st-rule,
.stage[data-scene="knows"] .st-rule { opacity: 1; }

/* The cascade — one call at a time. The person being called gets a solid
   line (and, from site.js, the moving pulse); texts with her location are
   dashed and always run one person ahead of the call. */
.stage[data-scene="family"] .st-link--cloud, .stage[data-scene="cascade"] .st-link--cloud,
.stage[data-scene="knows"] .st-link--cloud,
.stage[data-scene="family"] .st-link--c0, .stage[data-scene="family"] .st-link--c1,
.stage[data-scene="cascade"] .st-link--c1, .stage[data-scene="cascade"] .st-link--c2,
.stage[data-scene="knows"] .st-link--c1 { opacity: 1; }
.stage[data-scene="family"] .st-link--c0,
.stage[data-scene="cascade"] .st-link--c1,
.stage[data-scene="knows"] .st-link--c1 { stroke-dasharray: none; stroke-width: 2; stroke: var(--blue-400); }
.stage[data-scene="knows"] .st-link--c1 { stroke: var(--ok); }
/* 1 · Luca is called; Luca and Anna get the text. Marco waits. */
.stage[data-scene="family"] [data-c="0"] .st-state--call,
.stage[data-scene="family"] [data-c="0"] .st-state--text,
.stage[data-scene="family"] [data-c="1"] .st-state--text { display: inline-flex; }
.stage[data-scene="family"] [data-c="0"] { border-color: rgba(123,163,255,.6); }
.stage[data-scene="family"] [data-c="2"] { opacity: .5; }
/* 2 · No answer from Luca: Anna is called, Marco gets the text. */
.stage[data-scene="cascade"] [data-c="0"] .st-state--miss,
.stage[data-scene="cascade"] [data-c="1"] .st-state--call,
.stage[data-scene="cascade"] [data-c="2"] .st-state--text { display: inline-flex; }
.stage[data-scene="cascade"] [data-c="1"] { border-color: rgba(123,163,255,.6); }
.stage[data-scene="cascade"] [data-c="0"] { opacity: .55; }
/* 3 · Anna answers and confirms, with her location. */
.stage[data-scene="knows"] [data-c="0"] .st-state--miss,
.stage[data-scene="knows"] [data-c="1"] .st-state--ok,
.stage[data-scene="knows"] [data-c="1"] .st-state--loc { display: inline-flex; }
.stage[data-scene="knows"] [data-c="1"] { border-color: rgba(78,203,146,.6); }
.stage[data-scene="knows"] [data-c="0"], .stage[data-scene="knows"] [data-c="2"] { opacity: .5; }

.stage[data-scene="phone"] .st-clock, .stage[data-scene="respond"] .st-clock, .stage[data-scene="family"] .st-clock,
.stage[data-scene="cascade"] .st-clock,
.stage[data-scene="knows"] .st-clock, .stage[data-scene="change"] .st-clock, .stage[data-scene="detect"] .st-clock {
  background: rgba(14,22,40,.72); color: #fff;
}
.stage[data-scene="phone"] .st-progress li, .stage[data-scene="respond"] .st-progress li, .stage[data-scene="family"] .st-progress li,
.stage[data-scene="cascade"] .st-progress li,
.stage[data-scene="knows"] .st-progress li, .stage[data-scene="change"] .st-progress li, .stage[data-scene="detect"] .st-progress li { background: rgba(255,255,255,.22); }
.stage[data-scene="phone"] .st-progress li.is-past, .stage[data-scene="respond"] .st-progress li.is-past, .stage[data-scene="family"] .st-progress li.is-past,
.stage[data-scene="cascade"] .st-progress li.is-past,
.stage[data-scene="knows"] .st-progress li.is-past, .stage[data-scene="change"] .st-progress li.is-past, .stage[data-scene="detect"] .st-progress li.is-past { background: rgba(255,255,255,.5); }
.stage[data-scene="phone"] .st-progress li.is-now, .stage[data-scene="respond"] .st-progress li.is-now, .stage[data-scene="family"] .st-progress li.is-now,
.stage[data-scene="cascade"] .st-progress li.is-now,
.stage[data-scene="knows"] .st-progress li.is-now, .stage[data-scene="change"] .st-progress li.is-now, .stage[data-scene="detect"] .st-progress li.is-now { background: var(--blue-400); }

/* The single "noticed" ring: one calm expansion, in Veltix blue. */
.stage[data-scene="detect"] .st-close::after {
  content: ""; position: absolute; left: var(--cx); top: var(--cy); width: 120px; height: 120px; margin: -60px 0 0 -60px;
  border-radius: 50%; border: 2px solid var(--blue-400); animation: notice 2.6s var(--ease) infinite;
}

/* Steps ---------------------------------------------------------------- */
.step-card { position: relative; }
.step-kicker { margin-bottom: var(--s3); font-size: .78rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--blue-700); }
.step-time { font-variant-numeric: tabular-nums; }
.step-title { font-size: clamp(1.7rem, 2.7vw, 2.45rem); line-height: 1.1; margin-bottom: var(--s4); color: var(--tx-1); }
.step-body { font-size: 1.08rem; line-height: 1.62; color: var(--tx-2); }
.step-cta { margin-top: var(--s6); }
.step-media { display: none; margin-top: var(--s5); }
.step-media .phone { max-width: 220px; }
.step-media-img { border-radius: var(--r-md); }
.no-js .step-media { display: block; }
.no-js .stage-wrap { display: none; }

@media (min-width: 1024px) {
  .story-body { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
  .stage-wrap { grid-column: 2; grid-row: 1; }
  .stage { position: sticky; top: 0; }
  .steps { grid-column: 1; grid-row: 1; }
  .step {
    min-height: 92vh; display: flex; align-items: center;
    padding: 0 clamp(24px, 4vw, 56px) 0 max(var(--gutter), calc((100vw - var(--wrap)) / 2 + var(--gutter)));
  }
  .step:first-child { min-height: 70vh; align-items: flex-start; padding-top: 12vh; }
  .step:last-child { min-height: 100vh; }
  .step-card { max-width: 440px; opacity: .22; transform: translateY(12px); transition: opacity var(--t-3) var(--ease), transform var(--t-3) var(--ease); }
  .step.is-active .step-card { opacity: 1; transform: none; }
  /* The note explains the scene, so it lines up with the stage column (the 7fr
     half of the story grid) instead of hanging under the caption column, which
     is empty by then. The percentage resolves against the same width the grid
     splits, so the two edges stay flush at any window size. */
  .story-foot { max-width: none; margin-inline: 0; padding-left: 41.667%; padding-right: max(var(--gutter), calc((100vw - var(--wrap)) / 2 + var(--gutter))); }
  .no-js .step-card { opacity: 1; transform: none; }
  .no-js .story-body { display: block; }
}
@media (max-width: 1023px) {
  .stage-wrap { position: sticky; top: 0; height: 100vh; height: 100svh; z-index: 0; }
  .steps { position: relative; z-index: 1; margin-top: -100vh; margin-top: -100svh; }
  .step { min-height: 100vh; min-height: 100svh; display: flex; align-items: flex-end; padding: 0 12px calc(env(safe-area-inset-bottom) + 18px); }
  .step:first-child { padding-top: 55svh; }
  .step-card {
    width: 100%; max-width: 560px; margin: 0 auto; padding: 20px 20px 22px;
    border-radius: var(--r-lg);
    background: rgba(250, 247, 241, .92); box-shadow: var(--e3);
    -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
    transition: background var(--t-3) var(--ease), color var(--t-3) var(--ease);
  }
  .step-title { font-size: 1.62rem; margin-bottom: var(--s3); }
  .step-body { font-size: 1rem; }
  .story.is-dark .step-card { background: rgba(10, 16, 32, .86); }
  .story.is-dark .step-title { color: #fff; }
  .story.is-dark .step-body { color: var(--td-2); }
  .story.is-dark .step-kicker { color: var(--blue-300); }
  .no-js .steps { margin-top: 0; }
  .no-js .step { min-height: 0; padding: 12px; }

  /* Mobile composition: visuals live in the top ~58%, captions below. */
  .stage { --fx: .43; --fy: 0; --fw: max(100cqw, 82cqh * var(--ar)); }
  .st-end > img { height: 82%; }             /* same frame height, so both faces fit */
  .st-progress { top: calc(var(--nav-h) + 10px); }
  .st-clock { top: calc(var(--nav-h) + 22px); }
  .st-close-label { top: calc(var(--nav-h) + 70px); }   /* above the Patch, which sits mid-frame */
  .st-day { left: 4%; top: calc(var(--nav-h) + 92px); width: auto; gap: 6px; }
  .st-day li { padding: 6px 10px; font-size: .78rem; }
  .st-phone { right: auto; left: 50%; top: calc(var(--nav-h) + 64px); width: min(38cqw, 190px); transform: translate3d(-50%, 30px, 0) scale(.96); }
  .stage[data-scene="phone"] .st-phone, .stage[data-scene="respond"] .st-phone { transform: translate3d(-50%, 0, 0); }
  .stage[data-scene="respond"] .st-phone { transform: translate3d(-50%, 0, 0) scale(1.06); }
  .stage[data-scene="family"] .st-phone, .stage[data-scene="cascade"] .st-phone,
  .stage[data-scene="knows"] .st-phone { left: 5%; width: min(33cqw, 170px); transform: none; }
  .st-rule { display: none; }
  .st-contacts { left: auto; right: 4%; top: calc(var(--nav-h) + 118px); width: 55cqw; gap: 8px; }
  .st-contact { padding: 9px 10px; column-gap: 9px; }
  .st-avatar { width: 30px; height: 30px; font-size: .85rem; }
  .st-cloud { left: auto; right: 4%; top: calc(var(--nav-h) + 64px); }
  .st-loc { left: auto; right: 4%; top: calc(var(--nav-h) + 118px + 3 * 64px); }
  .st-ble { left: 8%; top: 50%; }
  .st-tag { font-size: .78rem; padding: 6px 10px; }
}
@media (max-width: 1023px) and (max-height: 700px) {
  .st-phone { width: min(30cqw, 150px); }
}

/* 9. FAMILY ACTIVITY VIEW ----------------------------------------------- */
.fv { position: relative; overflow: hidden; }
.fv::before {
  content: ""; position: absolute; inset: -20% -10% auto auto; width: 70%; height: 80%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(43,91,215,.22), rgba(43,91,215,0));
}
.fv-head { position: relative; max-width: 760px; margin-bottom: clamp(40px, 5vw, 64px); }
.fv-head .eyebrow { margin-bottom: var(--s4); }
.fv-head .lead { margin-top: var(--s5); }
.fv-flow {
  position: relative; display: grid; gap: clamp(20px, 3vw, 40px);
  grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: start;
  counter-reset: fv;
}
.fv-flow::before {        /* the line that joins the four screens */
  content: ""; position: absolute; left: 8%; right: 8%; top: 118px; height: 0;
  border-top: 1.5px dashed rgba(123,163,255,.35);
}
.fv-step { position: relative; }
.fv-media { display: flex; justify-content: center; align-items: flex-start; min-height: 250px; }
.fv-media .phone { max-width: 210px; }
.fv-media .screen-crop { max-width: 250px; margin-top: 36px; }
.fv-text { margin-top: var(--s5); }
.fv-who { font-size: .76rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--blue-300); margin-bottom: 6px; }
.fv-text h3 { font-size: 1.12rem; margin-bottom: 6px; }
.fv-text p { font-size: .96rem; line-height: 1.55; }
.phone--hl .phone-glass::after {
  content: ""; position: absolute; left: 5%; right: 5%; top: 83%; height: 8.6%;
  border-radius: 12px; border: 2px solid var(--blue-400); box-shadow: 0 0 0 6px rgba(123,163,255,.16), 0 0 30px rgba(123,163,255,.35);
}
.fv-code {
  position: absolute; left: 24%; top: 100px; z-index: 2; pointer-events: none;
}
.fv-code span {
  display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: var(--r-full);
  background: var(--blue-600); color: #fff; font-size: .8rem; font-weight: 700; white-space: nowrap;
  box-shadow: 0 10px 30px rgba(43,91,215,.45);
}
.fv-flow.is-in .fv-code { animation: code-travel 4.8s var(--ease-io) .4s infinite; }
.fv-points { display: grid; gap: var(--s5); grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: clamp(48px, 6vw, 72px); padding-top: var(--s7); border-top: 1px solid var(--line-d); }
.fv-point h3 { font-size: 1.05rem; margin-bottom: 6px; }
.fv-point p { font-size: .95rem; line-height: 1.55; color: var(--td-2); }
.fv-note { margin-top: var(--s6); font-size: .85rem; color: var(--td-3); }
@media (max-width: 1023px) {
  .fv-flow { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fv-flow::before, .fv-code { display: none; }
  .fv-points { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 599px) {
  .fv-flow { grid-template-columns: minmax(0, 1fr); gap: var(--s8); }
  .fv-step { display: grid; grid-template-columns: 42% 1fr; gap: var(--s5); align-items: center; }
  .fv-media { min-height: 0; }
  .fv-media .screen-crop { margin-top: 0; }
  .fv-text { margin-top: 0; }
  .fv-points { grid-template-columns: minmax(0, 1fr); }
}

/* 10. SECTIONS ----------------------------------------------------------- */
.product-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(32px, 6vw, 88px); align-items: center; }
.product-shot { margin: 0; }
.product-img { width: 100%; height: auto; border-radius: var(--r-xl); box-shadow: var(--e2); }
.product-shot figcaption { margin-top: var(--s4); font-size: .86rem; color: var(--tx-3); line-height: 1.5; }
.product-copy .eyebrow { margin-bottom: var(--s4); }
.product-copy .lead { margin-top: var(--s5); }
@media (max-width: 899px) { .product-grid { grid-template-columns: minmax(0, 1fr); } }

.person-card h3 { font-family: var(--f-serif); font-weight: 400; font-size: clamp(1.45rem, 2.2vw, 1.8rem); line-height: 1.15; letter-spacing: -.01em; }
.points { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s6); margin-top: clamp(40px, 5vw, 64px); }
.points li { padding-top: var(--s5); border-top: 2px solid var(--line-2); }
.points h3 { font-size: 1.05rem; margin-bottom: 6px; }
.points p { font-size: .96rem; line-height: 1.55; }
@media (max-width: 1023px) { .points { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 539px) { .points { grid-template-columns: minmax(0, 1fr); } }

.trust-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 80px); align-items: start; }
@media (max-width: 899px) { .trust-grid { grid-template-columns: minmax(0, 1fr); } }
.limits { display: grid; }
.limit { display: flex; gap: var(--s4); align-items: flex-start; padding: var(--s5) 0; border-bottom: 1px solid var(--line); }
.limit:first-child { padding-top: 0; }
.limit:last-child { border-bottom: 0; }
.limit .i { color: var(--tx-3); margin-top: 4px; }
.limit strong { color: var(--tx-1); }
.facts-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s6) var(--s5); }
.facts-list--stack { grid-template-columns: minmax(0, 1fr); margin-bottom: var(--s7); }
.facts-list h3 { font-size: 1.04rem; margin-bottom: 6px; }
.facts-list p { font-size: .96rem; line-height: 1.55; }
@media (max-width: 539px) { .facts-list { grid-template-columns: minmax(0, 1fr); } }
.trust-link { margin-top: var(--s7); }

/* Pricing: the hardware (bought once) and the service plans (monthly or
   yearly) are two visibly separate groups, never one row of equals. */
.price-groups { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: var(--s6); align-items: stretch; }
.price-groups--stack { grid-template-columns: minmax(0, 1fr); gap: var(--s8); }
.price-group { display: flex; flex-direction: column; gap: var(--s4); min-width: 0; }
.price-group-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px var(--s4); padding-bottom: var(--s3); border-bottom: 2px solid var(--line-2); }
.price-group-title { font-size: .8rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--tx-1); }
.price-group-note { font-size: .9rem; font-weight: 600; color: var(--tx-3); }
.price-group .plans { flex: 1; }
.price-group--hw .plans { grid-template-columns: minmax(0, 1fr); }
.price-group--svc .plans, .price-groups--stack .price-group .plans { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 899px) {
  .price-groups { grid-template-columns: minmax(0, 1fr); max-width: 520px; margin: 0 auto; }
  .price-group--svc .plans, .price-groups--stack .price-group .plans { grid-template-columns: minmax(0, 1fr); }
}
.plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s5); align-items: stretch; }
@media (max-width: 899px) { .plans { grid-template-columns: minmax(0, 1fr); max-width: 520px; margin: 0 auto; } }
.plan {
  position: relative;
  display: flex; flex-direction: column; gap: var(--s5); padding: clamp(24px, 3vw, 34px);
  border-radius: var(--r-lg); background: #fff; border: 1px solid var(--line); box-shadow: var(--e1);
}
.plan--hw { background: var(--bone-100); }
/* A card that links to its pricing detail: the plan name is the link, and
   its ::after covers the card, so the whole card is one target. */
.plan--link { transition: transform var(--t-2) var(--ease), box-shadow var(--t-2) var(--ease), border-color var(--t-2) var(--ease); }
.plan--link:hover { transform: translateY(-3px); box-shadow: var(--e3); border-color: var(--blue-300); }
.plan--featured.plan--link:hover { border-color: var(--blue-700); }
.plan-link { color: inherit; text-decoration: none; }
.plan-link::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit; }
.plan-link:focus-visible { outline: none; }
.plan-link:focus-visible::after { box-shadow: 0 0 0 3px var(--bone-50), 0 0 0 6px var(--blue-600); }
.plan-more { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; font-size: .93rem; color: var(--blue-700); }
.plan-more .i { transition: transform var(--t-2) var(--ease); }
.plan--link:hover .plan-more .i { transform: translateX(3px); }
/* Arriving from a card (#plan-core …): the chosen plan is marked. */
.plan[id] { scroll-margin-top: calc(var(--nav-h) + 24px); }
.plan:target { border-color: var(--blue-600); box-shadow: 0 0 0 4px rgba(43,91,215,.2), var(--e2); animation: plan-target 1.4s var(--ease) 1; }
@keyframes plan-target { from { box-shadow: 0 0 0 14px rgba(43,91,215,0), var(--e2); } to { box-shadow: 0 0 0 4px rgba(43,91,215,.2), var(--e2); } }
.plan-price.plan-price--tbd .num { font-size: 1.35rem; letter-spacing: 0; }
.plan-head .badge-optional { align-self: flex-start; }
/* The optional Home Hub, as a quiet companion to the Patch card. */
.hub-mini {
  position: relative; display: flex; gap: var(--s4); align-items: flex-start; padding: 16px 18px;
  border-radius: var(--r-md); border: 1px dashed var(--line-2); background: #fff;
  transition: border-color var(--t-2) var(--ease), box-shadow var(--t-2) var(--ease);
}
.hub-mini:hover { border-color: var(--blue-300); box-shadow: var(--e1); }
.hub-mini > .i { color: var(--blue-700); margin-top: 2px; flex: none; }
.hub-mini p { font-size: .92rem; line-height: 1.5; }
.hub-mini strong { color: var(--tx-1); }
.hub-mini .badge-optional { margin-left: 6px; }
.plan--featured { border: 2px solid var(--blue-600); box-shadow: var(--e2); }
.plan-head { display: flex; flex-direction: column; gap: 8px; }
.plan-head .badge { align-self: flex-start; }
.plan-name { font-size: 1.15rem; font-weight: 800; }
.plan-price { color: var(--tx-1); line-height: 1.1; }
.plan-price .num { font-size: 2.5rem; letter-spacing: -.02em; }
.plan-unit { font-size: 1rem; font-weight: 600; color: var(--tx-3); }
.plan-sub { font-size: .95rem; }
.plan-list { display: grid; gap: 10px; margin-top: auto; }
.plan-list li { display: flex; gap: 10px; align-items: flex-start; font-size: .97rem; line-height: 1.5; }
.plan-list .i { color: var(--blue-600); margin-top: 4px; }
.guardian { margin-top: var(--s8); padding: var(--s6) var(--s7); border-radius: var(--r-lg); border: 1px dashed var(--line-2); background: var(--bone-100); }
.guardian-h { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 8px; color: var(--tx-1); font-size: 1.05rem; }
.guardian p:last-child { font-size: .96rem; max-width: 80ch; }

.faq { border-top: 1px solid var(--line-2); }
.faq-item { border-bottom: 1px solid var(--line-2); }
.faq-h { font-size: inherit; }
.faq-q {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s4);
  width: 100%; min-height: 68px; padding: var(--s5) 0; text-align: left;
  font-size: 1.08rem; font-weight: 700; color: var(--tx-1); letter-spacing: -.01em;
}
.faq-i { color: var(--tx-3); transition: transform var(--t-2) var(--ease); }
.faq-q[aria-expanded="true"] .faq-i { transform: rotate(45deg); color: var(--blue-700); }
.faq-a p { padding: 0 0 var(--s6); max-width: 70ch; }
.faq-a a { color: var(--blue-700); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.faq-a.is-opening { animation: faq-in var(--t-3) var(--ease); }

.cta-final {
  position: relative; overflow: hidden; color: var(--td-2);
  background:
    radial-gradient(80% 120% at 10% 0%, rgba(61,113,232,.34), rgba(61,113,232,0) 60%),
    radial-gradient(60% 90% at 100% 100%, rgba(31,73,180,.35), rgba(31,73,180,0) 60%),
    var(--ink-900);
}
.cta-final .h-sec { color: #fff; }
.cta-final .lead { color: var(--td-2); margin-top: var(--s5); }
.cta-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 480px); gap: clamp(32px, 6vw, 80px); align-items: center; }
.cta-avail { display: flex; gap: 8px; align-items: center; margin-top: var(--s6); font-weight: 600; font-size: .92rem; color: var(--td-3); }
@media (max-width: 899px) { .cta-grid { grid-template-columns: minmax(0, 1fr); } }

.cta-band { padding: clamp(56px, 7vw, 88px) 0; background: radial-gradient(90% 140% at 20% 0%, rgba(61,113,232,.36), rgba(61,113,232,0) 60%), var(--blue-800); color: rgba(255,255,255,.86); }
.cta-band-in { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s6); }
.cta-band .h-sec { color: #fff; max-width: 22ch; margin-bottom: var(--s3); }

/* 11. PAGES -------------------------------------------------------------- */
.page-head { padding: calc(var(--nav-h) + clamp(48px, 7vw, 96px)) 0 clamp(48px, 6vw, 80px); background: var(--bone-100); }
.page-head .eyebrow { margin-bottom: var(--s4); }
.page-head .lead { margin-top: var(--s5); }
.page-head.on-ink { background: radial-gradient(100% 80% at 80% 0%, rgba(43,91,215,.28), rgba(43,91,215,0) 60%), var(--ink-900); }
.page-head.on-light { background: var(--bone-50); }

/* Breadcrumbs (inner pages; mirrored in BreadcrumbList JSON-LD). */
.crumbs { margin-bottom: var(--s4); font-size: .86rem; font-weight: 600; color: var(--tx-3); }
.crumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.crumbs li { display: inline-flex; align-items: center; gap: 8px; }
.crumbs li + li::before { content: "/"; color: var(--line-2); }
.crumbs a { display: inline-flex; align-items: center; min-height: 24px; color: var(--tx-2); text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: 3px; }
.crumbs a:hover { color: var(--blue-700); text-decoration-color: currentColor; }
@media (max-width: 1023px), (pointer: coarse) { .crumbs a { min-height: 44px; } }
.on-ink .crumbs, .on-ink .crumbs a { color: var(--td-3); }
.on-ink .crumbs li + li::before { color: var(--line-d2); }
.sec-head--center .crumbs ol { justify-content: center; }

/* Early Access List: what joining gets you (from [early_access] in the locale file). */
.ea-benefits { display: grid; gap: 10px; margin-top: var(--s6); }
.ea-benefits li { display: flex; gap: 10px; align-items: flex-start; font-weight: 600; color: var(--tx-1); line-height: 1.45; }
.ea-benefits .i { color: var(--blue-600); margin-top: 3px; flex: none; }
.cta-final .ea-benefits li { color: #fff; }
.cta-final .ea-benefits .i { color: var(--blue-300); }
.cta-band .ea-benefits { margin-top: var(--s4); grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px var(--s5); }
.cta-band .ea-benefits li { color: #fff; font-size: .95rem; }
.cta-band .ea-benefits .i { color: var(--blue-300); }
@media (max-width: 599px) { .cta-band .ea-benefits { grid-template-columns: minmax(0, 1fr); } }

.parts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s6); }
.part { display: flex; flex-direction: column; gap: var(--s3); }
.part-media { height: 300px; display: flex; align-items: flex-end; justify-content: center; border-radius: var(--r-lg); background: var(--bone-150); overflow: hidden; margin-bottom: var(--s3); }
.part-media--patch { align-items: center; }
.part-img { width: 100%; height: 100%; object-fit: cover; }
.part-media .phone { width: 58%; max-width: 190px; margin-bottom: -38%; }
@media (max-width: 899px) { .parts { grid-template-columns: minmax(0, 1fr); } }

.timeline { display: grid; gap: var(--s6); margin-top: var(--s8); counter-reset: tl; }
.tl-step { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: clamp(24px, 5vw, 64px); align-items: center; padding: var(--s6); border-radius: var(--r-xl); background: #fff; border: 1px solid var(--line); }
.tl-media { display: flex; justify-content: center; }
.tl-media .phone { max-width: 200px; }
.tl-photo { width: 100%; max-width: 240px; }
.tl-photo img { width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; object-position: 50% 53%; border-radius: var(--r-lg); }
.tl-photo--worn img { object-position: 52% 50%; }   /* the Patch, centred in the square */
.note--hub { margin-top: var(--s7); scroll-margin-top: calc(var(--nav-h) + 24px); }
.note--hub .badge-optional { margin-right: 4px; }
.footer-about { margin-top: 10px; font-size: .88rem; line-height: 1.55; color: var(--td-3); max-width: 46ch; }
.beta-copy .ea-benefits { margin-top: 0; }
.beta-copy .ea-benefits + .facts { margin-top: var(--s7); }
.tl-n { font-family: var(--f-serif); font-size: 2.4rem; line-height: 1; color: var(--blue-700); margin-bottom: var(--s3); }
.tl-text h3 { font-size: 1.35rem; margin-bottom: var(--s3); }
@media (max-width: 767px) { .tl-step { grid-template-columns: minmax(0, 1fr); } .tl-media .phone { max-width: 190px; } }

.design-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s6); }
.design-shot { margin: 0; }
.design-shot img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r-xl); box-shadow: var(--e2); }
.design-shot figcaption { margin-top: var(--s3); font-size: .9rem; color: var(--tx-3); }
@media (max-width: 767px) { .design-pair { grid-template-columns: minmax(0, 1fr); } }
.specs-title { margin: var(--s10) 0 var(--s5); }
.spec-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; border-radius: var(--r-md); overflow: hidden; background: var(--line); border: 1px solid var(--line); }
.spec { background: #fff; padding: var(--s5); }
.spec dt { font-size: .76rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--tx-3); margin-bottom: 6px; }
.spec dd { margin: 0; font-weight: 700; color: var(--tx-1); line-height: 1.4; }
.spec-grid--dark { background: var(--line-d); border-color: var(--line-d); grid-template-columns: repeat(2, minmax(0, 1fr)); }
.spec-grid--dark .spec { background: var(--ink-800); }
.spec-grid--dark dt { color: var(--td-3); }
.spec-grid--dark dd { color: #fff; }
@media (max-width: 899px) { .spec-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 479px) { .spec-grid { grid-template-columns: minmax(0, 1fr); } }
.needs-grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(32px, 6vw, 80px); align-items: start; }
.needs-grid .lead { margin-top: var(--s5); }
@media (max-width: 899px) { .needs-grid { grid-template-columns: minmax(0, 1fr); } }

.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: var(--r-md); }
table.compare { width: 100%; min-width: 560px; border-collapse: collapse; background: #fff; }
table.compare th, table.compare td { padding: 16px; text-align: left; border-bottom: 1px solid var(--line); vertical-align: top; }
table.compare thead th { font-size: .78rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--tx-3); border-bottom: 2px solid var(--line-2); }
table.compare tbody th { font-weight: 600; color: var(--tx-1); }
table.compare .ok { color: var(--blue-600); }
table.compare .off { color: var(--tx-3); }

.beta-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 500px); gap: clamp(40px, 6vw, 88px); align-items: start; }
.beta-copy .lead { margin-bottom: var(--s8); }
.beta-copy .h-card { margin: var(--s8) 0 var(--s4); }
@media (max-width: 899px) { .beta-grid { grid-template-columns: minmax(0, 1fr); } }
.facts { display: grid; gap: var(--s5); }
.fact { display: flex; gap: var(--s4); align-items: flex-start; }
.fact .i { color: var(--blue-700); margin-top: 3px; }
.fact strong { display: block; color: var(--tx-1); margin-bottom: 2px; }
.facts--lg { gap: var(--s7); }

.inv-head .badge { margin-bottom: var(--s6); }
.inv-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s5); margin-top: var(--s7); }
.inv-actions .fineprint { margin: 0; }
.figs-title { margin: var(--s10) 0 var(--s5); }
.metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s5); }
.metric { padding-top: var(--s5); border-top: 2px solid var(--line-2); }
.metric-num { font-size: clamp(2.4rem, 4.2vw, 3.4rem); line-height: 1; color: var(--tx-1); }
.metric-label { margin-top: var(--s3); color: var(--tx-2); }
.metric-src { margin-top: 4px; font-size: .85rem; color: var(--tx-3); }
@media (max-width: 767px) { .metrics { grid-template-columns: minmax(0, 1fr); } }
.inv-traction { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: clamp(32px, 6vw, 80px); align-items: start; }
@media (max-width: 899px) { .inv-traction { grid-template-columns: minmax(0, 1fr); } }
.milestones { display: grid; gap: 10px; }
.milestone { display: flex; align-items: center; gap: var(--s4); padding: 14px 18px; border-radius: var(--r-md); background: #fff; border: 1px solid var(--line); color: var(--tx-1); font-weight: 600; }
.ms-text small { display: block; font-weight: 500; font-size: .86rem; color: var(--tx-3); }
.ms-state { margin-left: auto; font-size: .76rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--tx-3); white-space: nowrap; }
.milestone.is-done .i, .milestone.is-live .i { color: var(--ok-ink); }
.milestone.is-active .i { color: var(--change-ink); }
.milestone.is-next { background: transparent; border-style: dashed; color: var(--tx-2); }
.milestone.is-next .i { color: var(--tx-3); }
.design-stack { position: relative; margin: 0; }
.design-stack .design-a { width: 82%; border-radius: var(--r-xl); box-shadow: var(--e2); }
.design-stack .design-b { position: relative; width: 52%; margin: -30% 0 0 auto; border-radius: var(--r-lg); border: 6px solid var(--bone-100); box-shadow: var(--e3); }
.design-stack figcaption { margin-top: var(--s5); font-size: .92rem; color: var(--tx-2); }
.person { display: flex; flex-direction: column; gap: var(--s4); }
.person-head { display: flex; gap: var(--s5); align-items: center; }
.person-photo { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; flex: none; box-shadow: 0 0 0 3px #fff, 0 0 0 4px var(--line-2); transition: transform var(--t-3) var(--ease); }
.person:hover .person-photo { transform: scale(1.03); }
.person-name { font-size: 1.15rem; margin: 0; }
.person-role { font-weight: 700; color: var(--blue-700); font-size: .95rem; }
.person-cred { font-size: .88rem; color: var(--tx-3); line-height: 1.45; margin-top: 2px; }
.link-out { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; font-weight: 700; font-size: .93rem; color: var(--blue-700); align-self: flex-start; }
.ask-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(32px, 6vw, 80px); align-items: center; }
.ask-grid .lead { margin: var(--s5) 0 var(--s7); }
.ask-grid .eyebrow { margin-bottom: var(--s4); }
@media (max-width: 899px) { .ask-grid { grid-template-columns: minmax(0, 1fr); } }

.thanks .success-mark {
  width: 72px; height: 72px; margin: 0 auto var(--s6); border-radius: 50%;
  display: flex; align-items: center; justify-content: center; background: rgba(28,112,73,.12); color: var(--ok-ink);
}
.thanks .eyebrow { justify-content: center; margin-bottom: var(--s3); }
.thanks .lead { margin: var(--s5) auto var(--s8); }
.thanks-links { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s2) var(--s6); margin-top: var(--s3); }

/* 12. FORMS -------------------------------------------------------------- */
.form-card {
  width: 100%; padding: clamp(24px, 4vw, 40px); border-radius: var(--r-xl);
  background: #fff; border: 1px solid var(--line); box-shadow: var(--e3); color: var(--tx-2);
}
.form-title { font-family: var(--f-serif); font-weight: 400; font-size: 1.75rem; line-height: 1.15; color: var(--tx-1); margin-bottom: var(--s6); }
.field { display: flex; flex-direction: column; gap: 8px; margin-bottom: var(--s5); }
.field label { font-size: .95rem; font-weight: 700; color: var(--tx-1); }
.field input, .field select {
  width: 100%; min-height: 54px; padding: 14px 16px; border-radius: var(--r-sm);
  border: 1.5px solid var(--line-2); background: var(--bone-50); color: var(--tx-1);
  transition: border-color var(--t-1), background var(--t-1), box-shadow var(--t-1);
}
.field input::placeholder { color: #6B7385; }
.field input:hover, .field select:hover { border-color: var(--tx-3); }
.field input:focus, .field select:focus { background: #fff; border-color: var(--blue-600); box-shadow: 0 0 0 4px rgba(43,91,215,.14); }
.field select {
  appearance: none; padding-right: 46px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23576174' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center;
}
.field-hint { font-size: .88rem; color: var(--tx-3); }
.field-error { display: none; align-items: center; gap: 6px; font-size: .9rem; font-weight: 600; color: var(--error-ink); }
.field.has-error .field-error { display: flex; }
.field.has-error input, .field.has-error select { border-color: var(--error-ink); background: #FFF7F6; }
.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-note { margin-top: var(--s4); text-align: center; font-size: .9rem; color: var(--tx-3); }
.form-privacy { margin-top: var(--s2); text-align: center; font-size: .82rem; line-height: 1.5; color: var(--tx-3); }
.form-privacy a { color: var(--blue-700); font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }

/* 13. CONSENT · MARKET BAR · STICKY CTA --------------------------------- */
.consent {
  position: fixed; z-index: 250; left: 16px; right: 16px; bottom: 16px;
  display: flex; justify-content: center; pointer-events: none;
}
.consent-card {
  pointer-events: auto; width: 100%; max-width: 560px; padding: 20px 20px 16px;
  border-radius: var(--r-lg); background: var(--ink-850); color: var(--td-2);
  border: 1px solid var(--line-d2); box-shadow: var(--e-dark);
}
.consent-title { font-size: 1.02rem; color: #fff; margin-bottom: 6px; }
.consent-body { font-size: .9rem; line-height: 1.55; }
.consent-body a { color: var(--blue-300); font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }
.consent-choices { display: grid; gap: 4px; margin-top: var(--s4); }
.switch-row { display: flex; align-items: center; justify-content: space-between; gap: var(--s4); padding: 10px 0; border-top: 1px solid var(--line-d); cursor: pointer; }
.switch-row span { display: flex; flex-direction: column; }
.switch-row strong { color: #fff; font-size: .92rem; }
.switch-row small { font-size: .82rem; color: var(--td-3); line-height: 1.45; }
.switch-row input { width: 22px; height: 22px; accent-color: var(--blue-500); flex: none; }
.consent-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: var(--s4); }
.consent-actions .btn { flex: 1 1 auto; }
@media (min-width: 768px) { .consent { left: auto; right: 24px; bottom: 24px; justify-content: flex-end; } .consent-card { width: 440px; } }
/* Single-column tablets: the primary CTA spans the width there, so the card
   moves up over the photograph, as on phones. */
@media (min-width: 768px) and (max-width: 1023px) { .consent { top: calc(var(--nav-h) + 12px); bottom: auto; } }
@media (max-width: 767px) {
  /* On phones it sits over the photograph, never over the headline and CTA. */
  .consent { left: 10px; right: 10px; top: calc(var(--nav-h) + 8px); bottom: auto; }
  .consent-card { padding: 14px 14px 12px; }
  .consent-title { font-size: .96rem; margin-bottom: 4px; }
  .consent-body { font-size: .82rem; line-height: 1.45; }
  .consent-actions { margin-top: 10px; gap: 6px; }
  .consent-actions .btn { padding: 8px 10px; font-size: .88rem; }
}

/* Market suggestion: a quiet card under the region control, never a redirect. */
.marketbar {
  position: fixed; z-index: 120; top: calc(var(--nav-h) + 10px); right: 16px; width: min(360px, calc(100vw - 24px));
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  padding: 14px 14px 14px 16px; border-radius: var(--r-md);
  background: var(--ink-850); color: var(--td-2); font-size: .92rem; line-height: 1.4;
  border: 1px solid var(--line-d2); box-shadow: var(--e-dark);
  animation: faq-in var(--t-3) var(--ease);
}
.marketbar strong { flex: 1 1 100%; color: #fff; font-weight: 700; }
.marketbar a, .marketbar button { display: inline-flex; align-items: center; min-height: 44px; padding: 8px 14px; border-radius: var(--r-sm); font-weight: 700; }
.marketbar a { background: var(--blue-600); color: #fff; }
.marketbar button { color: var(--td-2); border: 1px solid var(--line-d2); }
@media (max-width: 767px) { .marketbar { top: calc(var(--nav-h) + 8px); right: 12px; left: 12px; width: auto; } }
@media (min-width: 1024px) {
  /* Four screens, one caption baseline. */
  .fv-media { height: 470px; align-items: center; }
  .fv-media .screen-crop { margin-top: 0; }
  .fv-flow::before { top: 235px; }
}
.page-head.on-light + .section.on-light { padding-top: 0; }
.ticker.is-static .tk-list { width: auto; display: grid; gap: 4px; }
.ticker.is-static .tk { white-space: normal; align-items: flex-start; font-size: .84rem; line-height: 1.35; }
.ticker.is-static .tk::before { margin-top: 5px; }
.ticker.is-static .tk-text { overflow: visible; text-overflow: clip; }
.fv-code-pill {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 12px; padding: 7px 12px; border-radius: var(--r-full);
  background: rgba(61,113,232,.16); border: 1px solid rgba(123,163,255,.35); color: var(--blue-300);
  font-size: .8rem; font-weight: 700;
}

.mcta {
  position: fixed; z-index: 90; left: 0; right: 0; bottom: 0;
  padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
  background: rgba(250,247,241,.94); border-top: 1px solid var(--line);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  transform: translateY(110%); transition: transform var(--t-3) var(--ease);
}
.mcta.is-on { transform: none; }
.mcta-note { font-size: .76rem; font-weight: 600; color: var(--tx-3); text-align: center; margin-bottom: 6px; }
@media (min-width: 768px) { .mcta { display: none !important; } }

/* 14. MOTION ------------------------------------------------------------- */
.reveal { opacity: 0; transform: translateY(16px); transition: opacity var(--t-3) var(--ease), transform var(--t-3) var(--ease); }
.reveal.is-in, .no-js .reveal { opacity: 1; transform: none; }
@keyframes breathe { 0%, 100% { transform: scale(1); opacity: .9; } 50% { transform: scale(1.35); opacity: .25; } }
@keyframes notice { 0% { transform: scale(.5); opacity: .9; } 70% { opacity: .15; } 100% { transform: scale(1.9); opacity: 0; } }
@keyframes tap { 0%, 100% { box-shadow: 0 0 0 4px rgba(123,163,255,.14); } 50% { box-shadow: 0 0 0 12px rgba(123,163,255,.02); } }
@keyframes code-travel {
  0% { transform: translateX(0); opacity: 0; } 10% { opacity: 1; }
  55% { transform: translateX(calc(25vw)); opacity: 1; } 70%, 100% { transform: translateX(calc(25vw)); opacity: 0; }
}
@keyframes faq-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
@keyframes travel { from { offset-distance: 0%; opacity: 0; } 12% { opacity: 1; } 88% { opacity: 1; } to { offset-distance: 100%; opacity: 0; } }
.st-pulse.is-on { animation: travel 1.8s var(--ease-io) infinite; }

@media (prefers-reduced-motion: reduce) {
  html:focus-within { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; }
  .reveal { opacity: 1; transform: none; transition: none; }
  /* The story's camera is deliberately not reduced here (owner decision,
     2026-09-18): the scene cross-fades and the zoom run exactly as they do
     with full motion, so the sequence reads the same on every machine.
     Everything else in this block still follows the preference. */
  .st-pulse { display: none; }
  .step-card { transform: none !important; }
  .tk { transition: none; }
  .fv-code { display: none; }
  .patch-halo { display: none; }
}

@media print {
  .nav, .drawer, .consent, .mcta, .marketbar, .stage-wrap, .skip { display: none !important; }
  .step-media { display: block !important; }
  body { background: #fff; }
}

/* 15. ROOT & 404 --------------------------------------------------------- */
.root-page { min-height: 100vh; background: radial-gradient(90% 70% at 70% 0%, #F7F2EA, var(--bone-150) 60%); }
.root { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--s6); padding: var(--s9) var(--gutter); text-align: center; }
.root-mark { width: auto; height: 56px; }
.root-title { font-size: clamp(1.8rem, 4vw, 2.6rem); line-height: 1.15; color: var(--tx-1); }
.root-sep { color: var(--tx-3); }
.root-list { display: grid; gap: 10px; width: 100%; max-width: 420px; }
.root-opt {
  display: flex; align-items: center; gap: 14px; min-height: 60px; padding: 12px 18px;
  border-radius: var(--r-md); background: #fff; border: 1px solid var(--line); box-shadow: var(--e1);
  font-weight: 700; color: var(--tx-1); text-align: left;
}
.root-opt span:nth-child(2) { flex: 1; }
.root-opt:hover { border-color: var(--blue-600); }
.root-opt .i { color: var(--blue-600); }
.root-foot { max-width: 60ch; font-size: .84rem; color: var(--tx-3); }