/* Zenith home — the "one line" journey (2026-07-11 redesign, ported faithfully
   from the owner's Claude Design concept). This sheet is HOME-ONLY: the home
   layout loads fonts.css + home.css and never global.css, so nothing here can
   leak into the subpages (they keep global.css until their own redesign).
   Same-name variables (--hair, --ink, --accent…) intentionally re-map the
   shared waitlist modal partial onto this page's palette — see the bridge
   block at the end of the sheet. */

/* ============ TOKENS ============ */
:root{
  --bg:#F2F1EC;
  --bg-2:#ECEBE4;
  --bg-3:#E7E6DE;
  --ink:#232833;
  --ink-dim:#4A5160;
  --slate:#7C8394;
  --slate-dim:#A2A7B2;
  --hair:rgba(35,45,62,.15);
  --hair-soft:rgba(35,45,62,.07);
  --accent:#3F6A8C;
  --accent-bright:#2C5878;
  --accent-dim:rgba(63,106,140,.34);
  /* Brand faces (self-hosted, see fonts.css) in place of the concept's
     Google-CDN Inter / system mono — same roles, zero third-party requests. */
  --serif:'Source Serif 4', Georgia, serif;
  --sans:'Hanken Grotesk', -apple-system, 'Helvetica Neue', sans-serif;
  --mono:'JetBrains Mono', ui-monospace, 'SF Mono', 'SFMono-Regular', Menlo, Consolas, monospace;
  --ease-out:cubic-bezier(.16,1,.3,1);
  --ease-in-out:cubic-bezier(.65,.05,.1,1);
}
*{margin:0;padding:0;box-sizing:border-box}
html{background:var(--bg)}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
body{
  background:linear-gradient(180deg, #EDF0F5 0%, #F2F1EC 34%, #F5EEE3 100%);
  background-attachment:fixed;
  color:var(--ink);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
::selection{background:rgba(63,106,140,.22);color:var(--accent-bright)}
a{color:var(--slate);text-decoration:none;transition:color .35s var(--ease-out)}
a:hover{color:var(--accent)}

/* ============ FIXED LAYERS ============ */
#stars{position:fixed;inset:0;z-index:0;pointer-events:none}
#grain{position:fixed;inset:-50%;width:200%;height:200%;z-index:60;pointer-events:none;opacity:.045;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain 9s steps(6) infinite;
}
@keyframes grain{
  0%,100%{transform:translate(0,0)} 17%{transform:translate(-2%,1%)} 34%{transform:translate(1%,-2%)}
  51%{transform:translate(-1%,2%)} 68%{transform:translate(2%,1%)} 85%{transform:translate(-2%,-1%)}
}
#cursor-glow{position:fixed;left:0;top:0;width:640px;height:640px;margin:-320px 0 0 -320px;z-index:1;pointer-events:none;
  background:radial-gradient(circle, rgba(63,106,140,.05) 0%, rgba(63,106,140,.018) 34%, transparent 68%);
  opacity:0;transition:opacity .8s var(--ease-out);
}
@media (hover:none){#cursor-glow{display:none}}

/* ============ THE THREAD ============ */
#thread-wrap{position:absolute;top:0;left:0;width:100%;z-index:1;pointer-events:none;overflow:visible}
#thread-wrap svg{display:block;width:100%;overflow:visible}
#thread-main{fill:none;stroke:url(#threadGrad);stroke-width:1.75;stroke-linecap:round;
  filter:drop-shadow(0 0 6px rgba(63,106,140,.35))}
.thread-ghost{fill:none;stroke:var(--slate);stroke-width:1;stroke-linecap:round;opacity:.22;stroke-dasharray:1 6}
#thread-tip{fill:var(--accent-bright);filter:drop-shadow(0 0 9px rgba(44,88,120,.9))}

/* ============ SHARED ============ */
.scene{position:relative;z-index:2}
.wrap{max-width:1240px;margin:0 auto;padding:0 clamp(24px,6vw,88px)}
.label{
  font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.3em;
  text-transform:uppercase;color:var(--accent);display:flex;align-items:center;gap:16px;
}
.label::before{content:'';display:block;width:36px;height:1px;background:var(--accent-dim)}
.label.bare::before{display:none}
h1,h2,h3{font-family:var(--serif);font-weight:400;color:var(--ink)}
.rl{display:block;overflow:hidden;padding-bottom:.14em;margin-bottom:-.14em}
.rl-in{display:block}

.fineprint{font-family:var(--mono);font-size:11.5px;letter-spacing:.1em;color:var(--slate)}

/* buttons */
.btn{
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-family:var(--sans);font-size:14.5px;font-weight:500;letter-spacing:0;
  color:var(--ink);background:rgba(255,255,255,.85);border:1px solid var(--hair);border-radius:999px;
  padding:16px 30px;cursor:pointer;white-space:nowrap;
  transition:border-color .5s var(--ease-out), color .5s var(--ease-out), box-shadow .6s var(--ease-out), background .5s var(--ease-out);
  will-change:transform;
}
.btn:hover{border-color:var(--accent-dim);color:var(--accent-bright);box-shadow:0 6px 24px rgba(35,45,62,.08)}
.btn.solid{background:#4A708C;border-color:#4A708C;color:#FBFAF6}
.btn.solid:hover{background:#3E6280;border-color:#3E6280;color:#fff;box-shadow:0 10px 30px rgba(62,98,128,.28)}
.btn.quiet{border-color:transparent;background:transparent;color:var(--slate)}
.btn.quiet:hover{color:var(--ink)}

/* ============ NAV ============ */
#nav{position:fixed;top:16px;left:0;right:0;margin:0 auto;z-index:50;display:flex;justify-content:space-between;align-items:center;gap:clamp(24px,4vw,56px);
  width:min(1080px, calc(100% - 32px));
  padding:10px 12px 10px 24px;border-radius:999px;
  background:rgba(252,251,247,.55);
  border:1px solid rgba(255,255,255,.75);
  box-shadow:0 8px 32px rgba(35,45,62,.08), inset 0 1px 0 rgba(255,255,255,.9);
  -webkit-backdrop-filter:blur(18px) saturate(1.4);backdrop-filter:blur(18px) saturate(1.4);
  transition:background .5s var(--ease-out), box-shadow .5s var(--ease-out);
}
#nav.scrolled{background:rgba(252,251,247,.78);box-shadow:0 12px 40px rgba(35,45,62,.12), inset 0 1px 0 rgba(255,255,255,.95)}
#nav .mark{font-family:var(--serif);font-size:20px;letter-spacing:.02em;color:var(--ink);display:flex;align-items:center;gap:9px}
#nav .mark svg{display:block;color:#4A708C}
#nav .nav-links{display:flex;gap:6px;font-size:14px;font-weight:500}
#nav .nav-links a{color:var(--ink-dim);padding:9px 15px;border-radius:999px;transition:color .35s var(--ease-out), background .35s var(--ease-out)}
#nav .nav-links a:hover{color:var(--ink);background:rgba(74,112,140,.08)}
#nav .nav-right{display:flex;align-items:center;gap:20px}
#nav .nav-cta{font-size:13.5px;padding:11px 22px}
@media (max-width:900px){#nav .nav-links{display:none}#nav{padding-left:20px}}
/* mobile menu: hamburger + glass dropdown under the pill (zenith.js wires
   #nav-toggle/#nav-menu on every page) */
.nav-toggle{display:none}
.nav-menu{display:none}
@media (max-width:900px){
  .nav-toggle{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:5px;
    width:40px;height:40px;flex:none;border:0;background:transparent;cursor:pointer;border-radius:50%;padding:0}
  .nav-toggle span{display:block;width:16px;height:1.5px;background:var(--ink);border-radius:2px;
    transition:transform .35s var(--ease-out)}
  .nav-toggle[aria-expanded="true"] span:first-child{transform:translateY(3.25px) rotate(45deg)}
  .nav-toggle[aria-expanded="true"] span:last-child{transform:translateY(-3.25px) rotate(-45deg)}
  .nav-menu{position:absolute;top:calc(100% + 10px);left:0;right:0;display:flex;flex-direction:column;gap:2px;
    padding:12px;border-radius:26px;
    background:rgba(252,251,247,.92);border:1px solid rgba(255,255,255,.85);
    box-shadow:0 18px 44px rgba(35,45,62,.14), inset 0 1px 0 rgba(255,255,255,.9);
    -webkit-backdrop-filter:blur(18px) saturate(1.4);backdrop-filter:blur(18px) saturate(1.4);
    opacity:0;transform:translateY(-8px);pointer-events:none;
    transition:opacity .35s var(--ease-out), transform .35s var(--ease-out)}
  .nav-menu.is-open{opacity:1;transform:none;pointer-events:auto}
  .nav-menu a{display:block;font-size:15px;font-weight:500;color:var(--ink-dim);padding:13px 18px;border-radius:16px}
  .nav-menu a:hover,.nav-menu a[aria-current="page"]{background:rgba(74,112,140,.08);color:var(--ink)}
}

/* ============ HERO ============ */
#hero{min-height:100vh;min-height:100svh;display:flex;flex-direction:column;justify-content:center;padding-top:12vh}
#hero h1{
  font-size:clamp(42px,7.6vw,112px);line-height:1.08;letter-spacing:-.015em;font-weight:400;
  max-width:14em;
}
#hero h1 .opt{font-style:italic;color:var(--accent);text-shadow:0 0 30px rgba(63,106,140,.12)}
#hero h1 .shows{color:var(--ink-dim)}
#hero .hero-label{margin-bottom:clamp(28px,4vh,48px)}
#hero .hero-foot{display:flex;align-items:center;gap:28px;margin-top:clamp(36px,6vh,72px);flex-wrap:wrap}
#hero .hero-sub{max-width:340px;color:var(--slate);font-size:14px;line-height:1.7}
/* the ghost arc behind the headline: dotted like the "current path" line in
   the touch chart, ending on the day the page exists to find. The chip's
   figure (52) is the same calibrated crossing the touch scene makes
   draggable — one numeric story. */
#hero .wrap{position:relative;z-index:1}
#hero-arc{position:absolute;inset:0;z-index:0;pointer-events:none}
#hero-arc svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
#hero-arc path{fill:none;stroke:var(--slate);stroke-width:1.25;stroke-linecap:round;stroke-dasharray:2 7;opacity:.4}
@media (max-width:900px){#hero-arc{display:none}}

/* the hero's quiet metadata: the store line and the compliance line stack
   as typography, not chrome — nothing competes with the two real buttons */
.hero-meta{display:flex;flex-direction:column;gap:12px;margin-top:34px}
.hero-stores{font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.18em;
  text-transform:uppercase;color:var(--ink-dim)}
#scroll-hint{position:absolute;bottom:36px;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:12px;color:var(--slate-dim);font-size:10px;letter-spacing:.3em;text-transform:uppercase}
#scroll-hint .stem{width:1px;height:44px;background:linear-gradient(to bottom,transparent,var(--slate-dim));overflow:hidden;position:relative}
#scroll-hint .stem::after{content:'';position:absolute;left:0;top:-40%;width:1px;height:40%;background:var(--accent);animation:stem 2.6s cubic-bezier(.65,.05,.1,1) infinite}
@keyframes stem{0%{top:-40%}60%,100%{top:110%}}
html.reduced #scroll-hint .stem::after{animation:none}

/* ============ QUESTION ============ */
#question{padding:32vh 0 30vh;text-align:left}
#question .q-small{color:var(--slate);font-size:clamp(15px,1.4vw,19px);max-width:30em;font-weight:400;margin-bottom:9vh}
#question .q-big{font-size:clamp(38px,6.2vw,96px);line-height:1.08;letter-spacing:-.012em;max-width:13em}
#question .q-big em{font-style:italic;color:var(--slate)}
#question .q-big .bright{color:var(--accent);text-shadow:0 0 30px rgba(63,106,140,.12)}
#question .q-resolve{margin-top:9vh;color:var(--ink-dim);font-size:clamp(16px,1.5vw,20px);max-width:31em;line-height:1.75}
#question .q-resolve strong{color:var(--ink);font-weight:500}

/* ============ TOUCH THE LINE ============ */
#touch{padding:16vh 0 20vh}
#touch .t-head{display:grid;grid-template-columns:1fr auto;gap:40px;align-items:end;margin-bottom:7vh}
#touch h2{font-size:clamp(36px,4.6vw,72px);line-height:1.06;letter-spacing:-.012em;max-width:11em;margin-top:26px}
#touch .readout{text-align:right}
.readout .ro-label{font-size:11px;letter-spacing:.3em;text-transform:uppercase;color:var(--slate);margin-bottom:10px}
.readout .ro-age{font-family:var(--serif);font-size:clamp(72px,8vw,128px);line-height:.95;letter-spacing:-.02em;color:var(--accent-bright);
  font-variant-numeric:tabular-nums;text-shadow:0 0 30px rgba(63,106,140,.1)}
.readout .ro-sub{font-size:13px;color:var(--slate);margin-top:12px;font-variant-numeric:tabular-nums}
.readout .ro-sub b{color:var(--ink-dim);font-weight:500}
#chart-shell{position:relative;border-radius:24px;border:1px solid rgba(255,255,255,.9);background:rgba(255,255,255,.6);box-shadow:0 18px 44px rgba(35,45,62,.05);
  padding:40px 28px 14px;cursor:grab;touch-action:pan-y;user-select:none;-webkit-user-select:none}
/* tap-to-arm: the page scrolls straight past the chart until a deliberate
   tap (or grabbing the star, which is always live) arms the drag */
#chart-shell.armed{touch-action:none}
#chart-shell.dragging{cursor:grabbing}
/* the frame is aspect-locked to the baked 900x460 viewBox (capped via
   max-width so height never passes ~480px), so the no-JS render never
   letterboxes and the star overlay shares the SVG's coordinate space */
#chart-frame{position:relative;aspect-ratio:900/460;max-width:939px;margin:0 auto}
/* phones: a fixed height, NOT min-height — a min-height on an aspect-ratio
   box transfers back into a ~587px min-WIDTH (CSS transferred sizing) and
   blows the chart out of the viewport. The JS render re-measures the box,
   so only the no-JS mobile render letterboxes. */
@media (max-width:640px){#chart-frame{aspect-ratio:auto;height:300px}}
#chart{display:block;width:100%;height:100%;overflow:visible}
#chart .grid-line{stroke:var(--hair-soft);stroke-width:1;stroke-dasharray:2 6}
#chart .grid-t{fill:var(--slate-dim);font-family:var(--mono);font-size:10px;letter-spacing:.06em}
#chart .axis-t{fill:var(--slate-dim);font-family:var(--sans);font-size:11px;letter-spacing:.18em}
#chart #c-base{fill:none;stroke:var(--slate-dim);stroke-width:1.25;stroke-dasharray:2 7;opacity:.7}
#chart #c-live{fill:none;stroke:var(--accent);stroke-width:2}
#chart #c-fill{opacity:.5}
#chart #c-thresh{stroke:var(--slate-dim);stroke-width:1;stroke-dasharray:6 8;opacity:.55}
#chart .thresh-t{fill:var(--slate-dim);font-family:var(--sans);font-size:10px;letter-spacing:.28em;text-transform:uppercase}
#c-fan{opacity:0;transition:opacity .9s var(--ease-out)}
#c-fan.on{opacity:1}
#c-fan.on.dim{opacity:.55}
html.reduced #c-fan{opacity:.5;transition:none}
#c-edge-lo,#c-edge-hi{fill:none;stroke:var(--accent-dim);stroke-width:1;stroke-dasharray:3 4}
#c-samples path{fill:none;stroke:var(--accent);stroke-width:1;opacity:.13}
.c-star{position:absolute;width:44px;height:44px;margin:-22px 0 0 -22px;display:grid;place-items:center;cursor:grab;touch-action:none}
.c-star::before{content:'';position:absolute;inset:9px;border-radius:50%;background:#fff;border:1.5px solid var(--accent);box-shadow:0 2px 10px rgba(35,45,62,.16)}
.c-star svg{position:relative;width:13px;height:13px}
.c-star svg path{fill:var(--accent-bright)}
#chart-shell.dragging .c-star{cursor:grabbing}
#touch .t-foot{display:flex;justify-content:space-between;gap:24px;margin-top:22px;color:var(--slate-dim);font-size:12px;letter-spacing:.14em;text-transform:uppercase}

/* ============ TIMELINE ============ */
#timeline{position:relative}
#tl-pin{height:100vh;display:flex;flex-direction:column;justify-content:center;overflow:hidden}
#tl-head{margin-bottom:6vh}
#tl-head h2{font-size:clamp(34px,4.2vw,64px);letter-spacing:-.012em;margin-top:24px;max-width:13em}
#tl-track{display:flex;gap:clamp(20px,2.6vw,40px);padding:0 clamp(24px,6vw,88px);will-change:transform;width:max-content}
.tl-card{
  flex:none;width:clamp(300px,30vw,430px);min-height:clamp(320px,42vh,430px);
  border:1px solid rgba(255,255,255,.9);border-radius:22px;padding:34px 34px 30px;
  background:linear-gradient(160deg, rgba(255,255,255,.85), rgba(252,251,247,.55));
  box-shadow:0 18px 44px rgba(35,45,62,.06);
  backdrop-filter:blur(6px);display:flex;flex-direction:column;
}
.tl-card .tl-age{font-family:var(--serif);font-size:clamp(56px,5vw,84px);line-height:1;color:var(--ink);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.tl-card .tl-kicker{font-size:10px;letter-spacing:.3em;text-transform:uppercase;color:var(--slate);margin-bottom:22px;display:flex;justify-content:space-between}
.tl-card .tl-art{margin-top:30px;height:64px;display:flex;align-items:center}
.tl-card .tl-art svg{display:block;overflow:visible}
.tl-card .tl-art .a1{stroke:#4A708C;stroke-width:1.5;fill:none;stroke-linecap:round;stroke-linejoin:round}
.tl-card .tl-art .a2{stroke:rgba(74,112,140,.35);stroke-width:1.2;fill:none;stroke-linecap:round;stroke-dasharray:2 5}
.tl-card .tl-art .af{fill:rgba(74,112,140,.12)}
.tl-card h3{font-size:clamp(22px,1.9vw,29px);margin-top:auto;padding-top:34px;letter-spacing:-.005em}
.tl-card p{color:var(--slate);font-size:14px;line-height:1.7;margin-top:10px}
.tl-card .tl-line{height:1px;background:var(--hair);margin-top:24px;position:relative}
.tl-card .tl-line::after{content:'';position:absolute;left:0;top:-1.5px;height:3px;width:34%;background:var(--slate-dim);border-radius:2px}
.tl-card.star{border-color:var(--accent-dim);background:linear-gradient(160deg, rgba(63,106,140,.08), rgba(255,255,255,.6));
  box-shadow:0 0 90px rgba(63,106,140,.06), inset 0 0 60px rgba(63,106,140,.03)}
.tl-card.star .tl-age{color:var(--accent-bright);text-shadow:0 0 30px rgba(63,106,140,.14)}
.tl-card.star .tl-line::after{background:var(--accent);width:100%;box-shadow:0 0 10px rgba(63,106,140,.6)}
.tl-card.star .tl-kicker{color:var(--accent-dim)}
#tl-progress{margin-top:6vh;padding:0 clamp(24px,6vw,88px);display:flex;align-items:center;gap:20px;color:var(--slate-dim);font-size:11px;letter-spacing:.26em;text-transform:uppercase}
#tl-progress .bar{flex:1;height:1px;background:var(--hair);position:relative}
#tl-progress .bar i{position:absolute;left:0;top:-.5px;height:2px;width:100%;background:var(--accent);transform-origin:0 50%;transform:scaleX(0);display:block}

/* ============ CONFIDENCE ============ */
#confidence{padding:24vh 0 22vh}
#confidence .c-grid{display:grid;grid-template-columns:minmax(280px,5fr) 7fr;gap:clamp(40px,6vw,100px);align-items:center}
#confidence h2{font-size:clamp(34px,4.2vw,64px);line-height:1.08;letter-spacing:-.012em;margin-top:26px}
#confidence .c-copy{color:var(--slate);margin-top:28px;max-width:26em;line-height:1.75;font-size:15px}
#confidence .c-copy strong{color:var(--ink-dim);font-weight:500}
#confidence .c-claude{margin-top:36px;padding-top:28px;border-top:1px solid var(--hair);display:flex;gap:18px;align-items:flex-start}
#confidence .c-claude .spark{flex:none;width:34px;height:34px;border:1px solid var(--accent-dim);border-radius:50%;display:grid;place-items:center;color:var(--accent);font-size:14px}
#confidence .c-claude p{color:var(--slate);font-size:14px;line-height:1.7}
#confidence .c-claude p b{color:var(--ink-dim);font-weight:500}
#mc-wrap{position:relative;border-radius:24px;border:1px solid rgba(255,255,255,.9);
  background:rgba(255,255,255,.6);box-shadow:0 18px 44px rgba(35,45,62,.05);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  padding:clamp(20px,2.4vw,32px) clamp(20px,2.4vw,32px) 18px}
#mc{display:block;width:100%;height:clamp(320px,52vh,540px)}
#mc-cap{display:flex;justify-content:space-between;margin-top:18px;color:var(--slate-dim);font-size:11px;letter-spacing:.24em;text-transform:uppercase}
#mc-cap b{color:var(--accent);font-weight:600}

/* ============ PRIVACY ============ */
#privacy{padding:22vh 0;position:relative}
#privacy::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 70% 55% at 50% 42%, rgba(221,227,231,.85), transparent 70%);pointer-events:none}
#privacy .wrap{position:relative}
#privacy .p-center{text-align:center;max-width:760px;margin:0 auto}
#privacy h2{font-size:clamp(36px,4.6vw,72px);letter-spacing:-.012em;line-height:1.06;margin-top:28px}
#privacy .p-sub{color:var(--slate);margin-top:26px;font-size:15px;line-height:1.75;max-width:30em;margin-left:auto;margin-right:auto}
#privacy .label{justify-content:center}
#privacy .label::before{display:none}
.vault{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2vw,28px);margin-top:10vh}
.vault .v-cell{background:rgba(255,255,255,.7);border:1px solid rgba(255,255,255,.9);border-radius:22px;box-shadow:0 18px 44px rgba(35,45,62,.05);padding:clamp(30px,3.4vw,52px) clamp(24px,2.6vw,44px);min-height:220px;display:flex;flex-direction:column;justify-content:space-between;gap:36px;transition:box-shadow .7s var(--ease-out), transform .7s var(--ease-out)}
.vault .v-cell:hover{box-shadow:0 26px 60px rgba(35,45,62,.09);transform:translateY(-3px)}
.vault .v-icon{width:46px;height:46px;border-radius:14px;background:rgba(74,112,140,.08);display:grid;place-items:center}
.vault .v-icon svg{display:block;stroke:#4A708C;stroke-width:1.5;fill:none;stroke-linecap:round;stroke-linejoin:round}
.vault h3{font-size:clamp(19px,1.6vw,24px);letter-spacing:-.005em}
.vault p{color:var(--slate);font-size:13.5px;line-height:1.7;margin-top:10px}

/* ============ PRICING ============ */
#pricing{padding:14vh 0 24vh}
#pricing .pr-head{max-width:640px;margin-bottom:9vh}
#pricing h2{font-size:clamp(34px,4.2vw,64px);letter-spacing:-.012em;margin-top:26px}
.plans{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,2.4vw,36px);align-items:stretch}
.plan{border:1px solid rgba(255,255,255,.9);border-radius:24px;padding:clamp(34px,3.4vw,52px);display:flex;flex-direction:column;background:rgba(255,255,255,.72);box-shadow:0 18px 44px rgba(35,45,62,.05)}
.plan .pl-name{font-family:var(--mono);font-size:11px;letter-spacing:.3em;text-transform:uppercase;color:var(--slate);display:flex;justify-content:space-between;align-items:center}
.plan .pl-price{font-family:var(--serif);font-size:clamp(44px,4vw,64px);letter-spacing:-.02em;line-height:1;margin-top:30px;font-variant-numeric:tabular-nums}
.plan .pl-price small{font-family:var(--mono);font-size:15px;color:var(--slate);letter-spacing:0}
.plan .pl-alt{font-family:var(--mono);color:var(--slate);font-size:13px;margin-top:14px;letter-spacing:.02em}
.plan ul{list-style:none;margin-top:38px;display:flex;flex-direction:column;gap:20px}
.plan li{color:var(--slate);font-size:14.5px;line-height:1.7;display:flex;gap:14px;align-items:baseline}
.plan li::before{content:'';flex:none;width:7px;height:7px;border-radius:50%;background:#4A708C;opacity:.75;transform:translateY(-1px)}
.plan li b{color:var(--ink);font-weight:600}
.plan .pl-cta{margin-top:auto;padding-top:44px}
.plan .btn{width:100%;justify-content:center}
.plan.plus{border-color:var(--accent-dim);background:linear-gradient(165deg, rgba(63,106,140,.07), rgba(255,255,255,.78));
  box-shadow:0 0 110px rgba(63,106,140,.07), inset 0 0 80px rgba(63,106,140,.025)}
.plan.plus .pl-name{color:var(--accent)}
.plan.plus .pl-price{color:var(--accent-bright)}
.plan .pl-badge{font-size:10px;letter-spacing:.22em;color:var(--accent);border:1px solid var(--accent-dim);border-radius:999px;padding:6px 12px}
/* Free and Plus are not equals; the layout says so. Plus takes the wider,
   fuller card; Free top-aligns, sizes to its content, and speaks quietly. */
.plans--tiered{grid-template-columns:minmax(0,5fr) minmax(0,7fr);align-items:start}
.plans--tiered .plan:not(.plus){
  background:rgba(255,255,255,.48);
  box-shadow:0 12px 30px rgba(35,45,62,.04);
  padding:clamp(28px,2.8vw,42px);
}
.plans--tiered .plan:not(.plus) .pl-price{font-size:clamp(36px,3.2vw,50px)}
.plans--tiered .plan:not(.plus) ul{margin-top:30px;gap:16px}
.plans--tiered .plan:not(.plus) li{font-size:13.5px}
.plans--tiered .plan:not(.plus) .pl-cta{padding-top:34px}
.plans--tiered .plan.plus{padding:clamp(38px,3.8vw,58px)}
@media (max-width:900px){.plans--tiered{grid-template-columns:1fr}}

/* ============ FINALE ============ */
#finale{min-height:110vh;display:flex;flex-direction:column;justify-content:center;text-align:center;position:relative;padding:20vh 0 0}
#finale h2{font-size:clamp(42px,7vw,112px);line-height:1.04;letter-spacing:-.015em}
#finale h2 .lum{font-style:italic;color:var(--accent);text-shadow:0 0 30px rgba(63,106,140,.12)}
#finale .f-sub{color:var(--slate);margin:34px auto 0;max-width:26em;font-size:15px;line-height:1.75}
#finale .f-cta{margin-top:48px;display:flex;justify-content:center;gap:20px;flex-wrap:wrap}
/* the waitlist ask sits on its own glass card, separated from the sky.
   Inside the card the display type steps down to card scale — billboard
   sizes belong to the open page, not a box. */
.cta-card{max-width:780px;margin:0 auto;padding:clamp(40px,4.6vw,60px) clamp(28px,4vw,56px);
  border-radius:28px;border:1px solid rgba(255,255,255,.9);background:rgba(255,255,255,.6);
  box-shadow:0 24px 60px rgba(35,45,62,.07);
  -webkit-backdrop-filter:blur(14px) saturate(1.15);backdrop-filter:blur(14px) saturate(1.15)}
#finale .cta-card h2{font-size:clamp(32px,3.9vw,56px);line-height:1.1}
#finale .cta-card .f-sub{margin:18px auto 0;font-size:14.5px;max-width:32em}
#finale .cta-card .f-cta{margin-top:32px}
#f-star{width:120px;height:120px;margin:0 auto 6vh;position:relative}
#f-star .core{position:absolute;left:50%;top:50%;width:7px;height:7px;margin:-3.5px;border-radius:50%;background:var(--accent-bright);
  box-shadow:0 0 18px 5px rgba(44,88,120,.85), 0 0 80px 30px rgba(63,106,140,.22)}
#f-star .ray{position:absolute;left:50%;top:50%;background:linear-gradient(to bottom,transparent, rgba(44,88,120,.75), transparent);width:1px;height:120px;margin:-60px 0 0 -.5px}
#f-star .ray.h{transform:rotate(90deg)}
#f-star .ring{position:absolute;inset:14px;border:1px solid rgba(63,106,140,.18);border-radius:50%}
/* ============ SCREENS ============ */
#screens{padding:20vh 0 6vh}
#screens .s-head{text-align:center;max-width:720px;margin:0 auto 8vh}
#screens .label{justify-content:center}
#screens .label::before{display:none}
#screens h2{font-size:clamp(34px,4.6vw,68px);letter-spacing:-.012em;margin-top:26px}
#screens .s-sub{color:var(--slate);margin-top:24px;font-size:15.5px;line-height:1.75;max-width:34em;margin-left:auto;margin-right:auto}
.sc-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:clamp(16px,1.8vw,26px)}
.sc-card{grid-column:span 2;background:rgba(255,255,255,.8);border:1px solid rgba(255,255,255,.9);border-radius:22px;box-shadow:0 18px 44px rgba(35,45,62,.05);padding:clamp(26px,2.4vw,38px);display:flex;flex-direction:column;gap:14px;transition:box-shadow .7s var(--ease-out), transform .7s var(--ease-out)}
.sc-card:hover{box-shadow:0 26px 60px rgba(35,45,62,.09);transform:translateY(-3px)}
.sc-card:nth-child(4){grid-column:2 / span 2}
.sc-card h3{font-size:clamp(20px,1.7vw,26px);display:flex;align-items:center;gap:12px;letter-spacing:-.005em}
.sc-card h3 .glyph{flex:none;width:30px;height:30px;border-radius:10px;background:rgba(63,106,140,.1);display:grid;place-items:center;color:var(--accent)}
.sc-card p{color:var(--slate);font-size:14px;line-height:1.7}
.sc-card .sc-stat{margin-top:auto;background:rgba(63,106,140,.06);border:1px solid rgba(63,106,140,.12);border-radius:14px;padding:14px 18px;display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.sc-card .sc-stat .k{font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--slate)}
.sc-card .sc-stat .v{font-family:var(--serif);font-size:19px;color:var(--accent-bright);font-variant-numeric:tabular-nums;white-space:nowrap}
@media (max-width:900px){.sc-grid{grid-template-columns:1fr}.sc-card,.sc-card:nth-child(4){grid-column:auto}}

/* ============ FAQ ============ */
#faq{padding:6vh 0 18vh}
#faq .f-head{text-align:center;max-width:640px;margin:0 auto 7vh}
#faq .label{justify-content:center}
#faq .label::before{display:none}
#faq h2{font-size:clamp(34px,4.6vw,68px);letter-spacing:-.012em;margin-top:26px}
.faq-list{max-width:860px;margin:0 auto;display:flex;flex-direction:column;gap:14px}
.faq-item{background:rgba(255,255,255,.85);border:1px solid rgba(255,255,255,.9);border-radius:18px;box-shadow:0 12px 30px rgba(35,45,62,.04);overflow:hidden}
.faq-item summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:20px;padding:24px 28px;font-size:16.5px;font-weight:500;color:var(--ink)}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary .plus{flex:none;width:22px;height:22px;position:relative;color:var(--accent)}
.faq-item summary .plus::before,.faq-item summary .plus::after{content:'';position:absolute;left:50%;top:50%;background:currentColor;transition:transform .45s var(--ease-out)}
.faq-item summary .plus::before{width:14px;height:1.5px;margin:-.75px 0 0 -7px}
.faq-item summary .plus::after{width:1.5px;height:14px;margin:-7px 0 0 -.75px}
.faq-item[open] summary .plus::after{transform:rotate(90deg)}
.faq-item .faq-a{padding:0 28px 26px;color:var(--slate);font-size:14.5px;line-height:1.75;max-width:44em}

/* ============ FOOTER ============ */
footer{position:relative;z-index:2;margin-top:22vh;padding:0 clamp(24px,6vw,88px)}
.foot-card{text-align:left;max-width:1240px;margin:0 auto;background:rgba(255,255,255,.6);border:1px solid rgba(255,255,255,.9);border-radius:26px 26px 0 0;box-shadow:0 -12px 44px rgba(35,45,62,.04);padding:clamp(36px,4vw,60px) clamp(28px,3.4vw,56px) 0}
.foot-top{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:clamp(28px,3vw,48px);padding-bottom:clamp(32px,3.6vw,52px)}
.foot-brand .f-mark{font-family:var(--serif);font-size:22px;color:var(--ink);display:flex;align-items:center;gap:10px}
.f-mark svg{color:#4A708C}
.foot-badges{display:flex;gap:12px;margin-top:30px;flex-wrap:wrap}
.badge{background:rgba(255,255,255,.9);border:1px solid var(--hair);border-radius:14px;padding:10px 16px;display:flex;align-items:center;gap:10px;cursor:default}
.badge-glyph{width:20px;height:20px;flex:0 0 auto;color:var(--ink)}
.badge-text{display:flex;flex-direction:column;gap:2px}
.badge .b-soon{font-family:var(--mono);font-size:9px;letter-spacing:.22em;text-transform:uppercase;color:var(--accent)}
.badge .b-store{font-size:14.5px;font-weight:600;color:var(--ink);line-height:1.1}
.foot-col h4{font-family:var(--mono);font-size:10.5px;letter-spacing:.26em;text-transform:uppercase;color:var(--slate);font-weight:500;margin-bottom:20px}
.foot-col ul{list-style:none;display:flex;flex-direction:column;gap:13px;font-size:14px}
.foot-col a{color:var(--ink-dim)}
.foot-col a:hover{color:var(--accent-bright)}
.foot-bottom{border-top:1px solid var(--hair);padding:22px 0 28px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}
.foot-bottom .fineprint a{color:var(--slate)}
@media (max-width:900px){.foot-top{grid-template-columns:1fr 1fr}.foot-brand{grid-column:1 / -1}}

/* ============ RESPONSIVE ============ */
@media (max-height:760px){#scroll-hint{display:none}}
@media (max-width:900px){
  #touch .t-head{grid-template-columns:1fr;align-items:start}
  #touch .readout{text-align:left}
  #confidence .c-grid{grid-template-columns:1fr}
  .vault{grid-template-columns:1fr}
  .vault .v-cell{min-height:0;gap:22px}
  .plans{grid-template-columns:1fr}
  #tl-track{overflow-x:auto;width:auto;scroll-snap-type:x mandatory;padding-bottom:12px;
    scrollbar-width:none}
  #tl-track::-webkit-scrollbar{display:none}
  .tl-card{scroll-snap-align:center;width:78vw}
  #question{padding:22vh 0}
}

/* ============ SITE ADDITIONS (not in the design concept) ============ */
/* Accessibility: skip link + visible keyboard focus. */
.skip-link{position:fixed;top:-48px;left:16px;z-index:100;background:var(--ink);color:#FBFAF6;
  padding:10px 18px;border-radius:999px;font-size:13.5px;transition:top .25s var(--ease-out)}
.skip-link:focus{top:14px;color:#FBFAF6}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}
.btn:focus-visible,#nav a:focus-visible{outline-offset:2px}

/* Compliance fineprint under projection scenes (CLAUDE.md non-negotiable). */
.fine-note{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;color:var(--slate-dim);margin-top:16px}

/* ============ MODAL BRIDGE ============ */
/* The shared waitlist modal partial (waitlist-modal.njk) styles itself with
   global.css token names. global.css is not loaded here, so map those names
   onto this page's palette. Scoped to :root — the modal is the only consumer
   of the names that don't already exist above. */
:root{
  --font-serif:var(--serif);
  --font-sans:var(--sans);
  --font-mono:var(--mono);
  --ink2:var(--ink-dim);
  --ink3:var(--slate);
  --accent-cta:#4A708C;
  --accent-deep:var(--accent-bright);
  --on-accent:#FBFAF6;
  --chip-bg:rgba(255,255,255,.85);
  --chip-bg-soft:rgba(255,255,255,.6);
  --field-bg:rgba(255,255,255,.9);
}
#z-modal-card{background:linear-gradient(180deg,#FCFBF7,#F2F1EC) !important;}
/* the modal's anti-spam honeypot (hidden by global.css on other pages) */
.wl-hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}

/* ============ QUESTION PHONE + EVENT CHIPS (2026-07-11 additions) ============ */
/* The question scene: copy left, the app in a phone right. */
#question .q-grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(40px,6vw,96px);align-items:center}
/* margin (not transform) drops the phone below center — gsap owns the
   transform channel during the fade-in */
.q-phone{display:flex;flex-direction:column;align-items:center;gap:18px;margin-top:clamp(24px,6vh,64px)}
/* the recording carries its own status bar + dynamic island, so the frame is
   just a slim bezel — no overlay chrome */
.phone{position:relative;margin:0;width:clamp(216px,19vw,268px);border-radius:clamp(36px,3.4vw,44px);padding:9px;
  background:linear-gradient(160deg,#3A3F47,#14171B 55%,#2A2F36);
  box-shadow:0 30px 70px rgba(35,45,62,.26), 0 6px 16px rgba(35,45,62,.14), inset 0 1px 1px rgba(255,255,255,.22)}
.phone video{display:block;width:100%;aspect-ratio:9/19.5;object-fit:cover;border-radius:clamp(28px,2.7vw,36px);background:#0E1318}
/* caption tracks the phone's width exactly, so it can never jut past it */
.q-phone .fine-note{width:clamp(216px,19vw,268px);text-align:center;line-height:1.7;margin-top:0}
@media (max-width:900px){
  #question .q-grid{grid-template-columns:1fr}
  .q-phone{margin-top:9vh}
}

/* Life-event chips over the touch-the-line chart (Scenario Studio lite). */
#touch .t-chips{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:24px}
#touch .t-chips-label{font-family:var(--mono);font-size:10px;letter-spacing:.26em;text-transform:uppercase;color:var(--slate);margin-right:8px}
.chip{font-family:var(--sans);font-size:13.5px;font-weight:500;color:var(--ink-dim);
  background:rgba(255,255,255,.85);border:1px solid var(--hair);border-radius:999px;padding:9px 18px;cursor:pointer;
  transition:border-color .4s var(--ease-out), color .4s var(--ease-out), background .4s var(--ease-out), box-shadow .5s var(--ease-out)}
.chip:hover{border-color:var(--accent-dim);color:var(--accent-bright)}
.chip[aria-pressed="true"]{background:#4A708C;border-color:#4A708C;color:#FBFAF6;box-shadow:0 6px 18px rgba(62,98,128,.25)}

/* Event markers on the curve: dot, dotted stem to the axis, mono label. */
#chart .mark-stem{stroke:var(--slate-dim);stroke-width:1;stroke-dasharray:2 5;opacity:.8}
#chart .mark-dot{fill:var(--accent-bright)}
#chart .mark-t{fill:var(--slate);font-family:var(--mono);font-size:9.5px;letter-spacing:.24em}

/* ============ SHARED CARD FROST ============ */
/* One frost for every translucent card, stronger than the original 6px:
   the thread and stars pass behind these surfaces and were cutting through
   the lighter fills razor-sharp. Declared last so it wins the per-card
   backdrop-filter values above. */
#chart-shell, .tl-card, #mc-wrap, .sc-card, .vault .v-cell, .plan,
.faq-item, .foot-card, .badge {
  -webkit-backdrop-filter: blur(14px) saturate(1.15);
  backdrop-filter: blur(14px) saturate(1.15);
}