/* ============================================================
   BEE HIVE — marketing landing. Fraunces (display) + DM Sans.
   Charcoal & lime. Premium-by-restraint. Real UI recreated in-page.
   ============================================================ */
:root{
  --ink:#1b1b1a; --charcoal:#292928; --charcoal-2:#3a3a38;
  --lime:#c3f832; --lime-deep:#9bd000; --lime-ink:#5f7d00; --lime-tint:#eefbc7;
  --canvas:#f4f5f0; --surface:#ffffff;
  --body:#4a4a47; --muted:#6a6a66; --faint:#6c6c68; --task-muted:#b7bab2; --line:#ebede7;
  --on-dark-muted:#cbccc6; --on-dark-faint:#b0b1aa; --lime-glow:rgba(195,248,50,.16);
  --violet:#6f57ff; --violet-tint:#ebe7ff; --coral:#ff5a5a; --coral-tint:#ffe6e4; --amber:#f5a623; --amber-tint:#fff0d6;
  --serif:'Fraunces', Georgia, 'Times New Roman', serif;
  --sans:'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --shadow-card:0 20px 48px -26px rgba(34,31,24,.22), 0 2px 6px rgba(34,31,24,.045);
  --shadow-phone:0 30px 60px -20px rgba(41,41,40,.35);
  --r-lg:22px; --r-md:16px; --r-sm:11px; --r-pill:999px;
  --wrap:1120px;
}
*{box-sizing:border-box; -webkit-tap-highlight-color:transparent}
html{scroll-behavior:smooth}
body{margin:0; font-family:var(--sans); color:var(--ink); background:var(--canvas); -webkit-font-smoothing:antialiased; line-height:1.5; overflow-x:hidden}
a{color:inherit; text-decoration:none}
img,svg{max-width:100%}
.wrap{max-width:var(--wrap); margin:0 auto; padding:0 24px}
section{position:relative}
.serif{font-family:var(--serif); font-weight:500; letter-spacing:-.01em}
.eyebrow{font-family:var(--sans); font-weight:600; font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:#527000}
.eyebrow.on-dark{color:var(--lime)}
.center{text-align:center}

/* ---------- Headlines ---------- */
h1,h2{font-family:var(--serif); font-weight:600; letter-spacing:-.02em; color:var(--ink); margin:0}
h3{margin:0}
.h1{font-size:clamp(40px,6vw,76px); line-height:1.06; font-weight:600}
.h2{font-size:clamp(30px,4.2vw,50px); line-height:1.06}
.lead{font-size:clamp(17px,1.4vw,20px); line-height:1.55; color:var(--body)}

/* swash underline — used exactly twice (hero "itself", pricing "$9 a month") */
.swash{position:relative; white-space:nowrap}
.swash svg{position:absolute; left:-2%; bottom:-.42em; width:104%; height:.5em; overflow:visible; pointer-events:none}
.swash path{fill:none; stroke:var(--lime); stroke-width:7; stroke-linecap:round; stroke-dasharray:340; stroke-dashoffset:340; transition:stroke-dashoffset 1s ease .25s}
.swash.drawn path{stroke-dashoffset:0}

/* ---------- Buttons ---------- */
.btn{font-family:var(--sans); font-weight:700; font-size:15.5px; border:none; border-radius:var(--r-pill); padding:15px 26px; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; gap:9px; transition:transform .15s ease, box-shadow .2s ease, background .2s ease}
.btn--lime{background:var(--lime); color:var(--charcoal)}
.btn--lime:hover{transform:translateY(-1px); box-shadow:0 12px 28px -10px rgba(155,208,0,.7)}
.btn--ink{background:var(--charcoal); color:#fff}
.btn--ink:hover{transform:translateY(-1px)}
.btn--ghost{background:transparent; color:var(--ink); border:1px solid var(--line)}
.btn--ghost:hover{border-color:var(--ink)}
/* final CTA — a calm resting depth, lift on hover (no permanent attention-seeking ring) */
.btn--glow{box-shadow:0 16px 36px -18px rgba(155,208,0,.5)}
.btn--glow:hover{box-shadow:0 22px 48px -18px rgba(155,208,0,.62); transform:translateY(-1px)}
.btn.lg{padding:17px 32px; font-size:16.5px}
.btn.sm{padding:11px 18px; font-size:14px}
/* hero CTA — still and confident; a single sheen sweeps once when it first appears, then never again */
.btn--cta{position:relative; overflow:hidden}
.btn--cta.swept::after{content:""; position:absolute; top:0; left:-65%; width:45%; height:100%; background:linear-gradient(100deg, transparent, rgba(255,255,255,.5), transparent); transform:skewX(-18deg); animation:ctaShine 1.15s ease-in-out 1}
@keyframes ctaShine{0%{left:-65%} 100%{left:130%}}
.cta-sub{font-size:14px; color:var(--body); margin-top:13px; font-weight:500}
.cta-sub.on-dark{color:var(--on-dark-muted)}
.link-arrow{font-weight:600; color:var(--ink); display:inline-flex; align-items:center; gap:6px; text-decoration:underline; text-decoration-color:var(--lime-ink); text-underline-offset:5px}
.link-arrow:hover{text-decoration-color:var(--lime-deep)}
.link-arrow svg{width:16px; height:16px; transition:transform .2s}
.link-arrow:hover svg{transform:translateY(3px)}

/* ---------- Honeycomb lattice ---------- */
.lattice{position:absolute; inset:0; width:100%; height:100%; pointer-events:none; z-index:0}
.lattice.light{opacity:.035}
.lattice.dark{opacity:.06}
.lattice rect{width:100%; height:100%}

/* ---------- Nav ---------- */
.nav{position:sticky; top:0; z-index:50; height:64px; display:flex; align-items:center; background:rgba(244,245,240,.86); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); transition:border-color .25s, box-shadow .25s; border-bottom:1px solid transparent}
.nav.scrolled{border-bottom:1px solid var(--line); box-shadow:0 2px 16px rgba(20,20,19,.03)}
.nav .wrap{display:flex; align-items:center; gap:20px; width:100%}
.brand{display:flex; align-items:center; gap:7px; font-weight:700; font-size:20px; letter-spacing:-.01em}
.brand svg{width:44px; height:44px}
.nav-links{display:flex; gap:26px; margin-left:auto; font-size:14.5px; font-weight:500; color:var(--body)}
.nav-links a:hover{color:var(--ink)}
.nav-actions{display:flex; align-items:center; gap:14px; margin-left:26px}
.nav-actions .login{font-size:14.5px; font-weight:600}
.nav-menu{display:contents}
.nav-menu-bee{display:none}
.nav-toggle{display:none; margin-left:auto; background:none; border:none; cursor:pointer; padding:12px; position:relative; z-index:51}
.nav-toggle .ham{display:block; width:24px; height:16px; position:relative}
.nav-toggle .ham i{position:absolute; left:0; width:100%; height:2.5px; background:var(--ink); border-radius:2px; transition:transform .26s ease, opacity .18s ease, top .26s ease, bottom .26s ease}
.nav-toggle .ham i:nth-child(1){top:0}
.nav-toggle .ham i:nth-child(2){top:50%; margin-top:-1.25px}
.nav-toggle .ham i:nth-child(3){bottom:0}
.nav.open .nav-toggle .ham i:nth-child(1){top:50%; margin-top:-1.25px; transform:rotate(45deg)}
.nav.open .nav-toggle .ham i:nth-child(2){opacity:0}
.nav.open .nav-toggle .ham i:nth-child(3){bottom:50%; margin-bottom:-1.25px; transform:rotate(-45deg)}

/* Keyboard focus visibility */
a:focus-visible, button:focus-visible{outline:2px solid var(--ink); outline-offset:2px; box-shadow:0 0 0 4px var(--lime-glow); border-radius:6px}
.btn:focus-visible{outline-offset:3px}
.qa button:focus-visible, .nav-toggle:focus-visible, .link-arrow:focus-visible{outline:2px solid var(--ink); outline-offset:2px; border-radius:8px}
.dark a:focus-visible, .dark button:focus-visible, .final a:focus-visible{outline-color:var(--lime); box-shadow:none}

/* ---------- Hero ---------- */
.hero{padding:clamp(40px,5vw,72px) 0 clamp(56px,7vw,96px); overflow:hidden}
.hero .grid{display:grid; grid-template-columns:1fr; gap:48px; align-items:center}
.hero-copy .eyebrow{margin-bottom:18px; display:block}
.hero h1{margin:0 0 22px}
.hero .lead{max-width:52ch; margin:0 0 14px}
.hero .felt{font-weight:500; color:#2e2e2b}
.hero-cta{display:flex; align-items:center; gap:18px; flex-wrap:wrap; margin-top:26px}
.hero-cta .col{display:flex; flex-direction:column}

/* phone frame (shared) */
.phone{width:300px; max-width:84vw; aspect-ratio:300/620; background:#0e0e10; border-radius:38px; padding:9px; box-shadow:var(--shadow-phone); position:relative; margin:0 auto}
.phone .screen{width:100%; height:100%; background:var(--canvas); border-radius:30px; overflow:hidden; display:flex; flex-direction:column}
.phone .notch{position:absolute; top:9px; left:50%; transform:translateX(-50%); width:110px; height:22px; background:#0e0e10; border-radius:0 0 14px 14px; z-index:5}
.phone-stage{position:relative; display:flex; justify-content:center}
.phone-stage .glow{position:absolute; width:80%; height:80%; max-width:520px; max-height:560px; top:10%; left:50%; transform:translateX(-50%); background:radial-gradient(circle, rgba(195,248,50,.22), transparent 65%); filter:blur(40px); z-index:-1}
.scr-pad{padding:16px 14px}
.scr-h{font-family:var(--serif); font-weight:600; font-size:18px; letter-spacing:-.01em; margin:6px 2px 2px}
.scr-sub{font-size:11.5px; color:var(--muted); margin:0 2px 12px}
/* recreated bottom nav (hero phone) — mirrors the real app */
.scr-nav{margin-top:auto; display:flex; align-items:center; justify-content:space-around; padding:7px 6px 9px; border-top:1px solid var(--line); background:var(--surface)}
.scr-tab{display:flex; flex-direction:column; align-items:center; gap:3px; font-size:7.5px; font-weight:600; color:var(--faint); text-align:center}
.scr-tab.on{color:var(--charcoal)}
.scr-tab svg{width:16px; height:16px}
.scr-fab{flex:0 0 auto; width:32px; height:32px; border-radius:50%; background:var(--lime); color:var(--charcoal); display:grid; place-items:center; font-size:20px; font-weight:500; line-height:1; box-shadow:0 5px 14px -3px rgba(155,208,0,.55); transform:translateY(-6px)}

/* recreated app UI atoms (app-faithful) */
.card-ui{background:var(--surface); border:1px solid var(--line); border-radius:14px; box-shadow:var(--shadow-card)}
.l-task{display:flex; align-items:center; gap:11px; padding:11px 12px}
.l-task + .l-task{border-top:1px solid var(--line)}
.l-check{width:23px; height:23px; border-radius:50%; border:2px solid var(--task-muted); flex:0 0 auto; display:grid; place-items:center; background:#fff; transition:.25s}
.l-check svg{width:12px; height:12px; color:#fff; opacity:0; transform:scale(.4); transition:.25s}
.l-task.done .l-check{background:var(--lime-deep); border-color:var(--lime-deep)}
.l-task.done .l-check svg{opacity:1; transform:none}
.l-task.done .l-tt{color:var(--task-muted); text-decoration:line-through}
.l-tb{flex:1; min-width:0}
.l-tt{font-size:13.5px; font-weight:600; letter-spacing:-.01em}
.l-tm{display:flex; align-items:center; gap:7px; margin-top:5px; font-size:11px; color:var(--muted)}
.l-av{width:22px; height:22px; border-radius:50%; display:grid; place-items:center; font-size:10px; font-weight:700; color:#fff; flex:0 0 auto; box-shadow:0 0 0 2px #fff}
.l-av.lg{width:30px; height:30px; font-size:13px}
.l-pill{display:inline-flex; align-items:center; gap:4px; font-size:9.5px; font-weight:700; padding:3px 8px; border-radius:var(--r-pill); text-transform:uppercase; letter-spacing:.02em}
.l-pill.lime{background:var(--lime-tint); color:var(--lime-ink)}
.l-pill.violet{background:var(--violet-tint); color:var(--violet)}
.l-pill.coral{background:var(--coral-tint); color:#d33}
.l-pill.amber{background:var(--amber-tint); color:#b9760a}
.l-pill.ink{background:#efefec; color:var(--ink)}
.l-pts{font-weight:700; font-size:13px; color:var(--lime-ink); flex:0 0 auto}
.l-bar{height:7px; border-radius:var(--r-pill); background:var(--line); overflow:hidden}
.l-bar > i{display:block; height:100%; width:0; background:linear-gradient(90deg,var(--lime-deep),var(--lime)); border-radius:var(--r-pill); transition:width 1s cubic-bezier(.2,.7,.2,1)}
.l-load{background:var(--charcoal); color:#fff; border-radius:16px; padding:15px; position:relative; overflow:hidden}
.l-load-glow{position:absolute; top:-30%; right:-12%; width:58%; height:140%; background:radial-gradient(circle, rgba(195,248,50,.18), transparent 68%); pointer-events:none}
.l-load .lbl{font-size:9.5px; text-transform:uppercase; letter-spacing:.05em; color:#b9bbb4; font-weight:600; position:relative}
.l-load .big{font-size:21px; font-weight:700; letter-spacing:-.02em; margin:5px 0 9px; font-family:var(--sans); position:relative}
.l-load .big b{color:var(--lime)}
.l-stats{display:flex; gap:8px; margin:0 0 11px; position:relative}
.l-stats > div{flex:1}
.l-stats b{display:block; font-family:var(--sans); font-size:17px; font-weight:700; line-height:1; color:#fff}
.l-stats b.g{color:var(--lime)}
.l-stats b.r{color:#ff6b6b}
.l-stats span{display:block; font-size:8.5px; color:#b9bbb4; margin-top:3px}
.reminder-pill{display:inline-flex; align-items:center; gap:7px; background:var(--charcoal); color:#fff; font-size:11px; font-weight:600; padding:8px 13px; border-radius:var(--r-pill); box-shadow:0 8px 20px rgba(0,0,0,.25)}
.reminder-pill .dot{width:7px; height:7px; border-radius:50%; background:var(--lime)}

/* rotation chip flip (hero choreography) */
.rotchip{display:inline-flex; align-items:center; gap:5px}
.rotname{display:inline-flex; align-items:center; gap:6px; transition:opacity .3s ease}
.rotarrow{color:var(--lime-deep); display:inline-flex; transition:transform .55s ease}
.rotchip.spin .rotarrow{transform:rotate(360deg)}

/* ---------- Trust strip ---------- */
.trust{padding:6px 0 34px}
.trust .row{display:flex; flex-wrap:wrap; gap:14px; align-items:center}
.chip{display:flex; align-items:center; gap:10px; background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:13px 16px; box-shadow:var(--shadow-card)}
.chip .dot{width:8px; height:8px; border-radius:50%; background:var(--lime-deep); flex:0 0 auto}
.chip b{font-size:14px; font-weight:700}
.chip span{font-size:12.5px; color:var(--muted); display:block; margin-top:1px}
.trust .by{margin-left:auto; font-style:italic; font-size:13.5px; color:var(--muted); max-width:30ch; text-align:right}

/* ---------- Section base ---------- */
.sec{padding:clamp(76px,9vw,136px) 0}
.sec-narrow{max-width:760px; margin:0 auto; text-align:center}
.sec-narrow .eyebrow{display:block; margin-bottom:14px}
.sec .h2{margin-bottom:22px}
/* The problem → how → engine trio reads as one continuous story, not three islands */
#problem{padding-bottom:clamp(34px,4.5vw,58px)}
#how{padding-bottom:clamp(38px,5vw,62px)}
#system{padding-top:clamp(46px,6vw,74px)}

/* ---------- Problem ---------- */
.problem{max-width:62ch; margin:0 auto}
.problem .h2{font-size:clamp(32px,4.6vw,54px); line-height:1.04; margin-bottom:26px}
.problem p{font-size:clamp(16px,1.25vw,18.5px); line-height:1.62; color:var(--body); margin:0 0 18px}
/* the gut-punch, rendered dark + lime so it carries real brand weight in the cream */
.you-stack{margin:36px 0; font-family:var(--sans); background:var(--charcoal); border-radius:var(--r-lg); box-shadow:0 22px 48px -20px rgba(41,41,40,.5); overflow:hidden}
.you-stack .line{font-size:clamp(16px,1.5vw,20px); font-weight:600; color:#eef0ea; line-height:1.5; padding:18px 26px}
.you-stack .line + .line{border-top:1px solid rgba(255,255,255,.08)}
.you-stack .line em{font-style:normal; color:var(--lime); font-weight:700}
.turn{margin-top:38px; padding-top:34px; border-top:1px solid var(--line)}
.turn p{font-family:var(--serif); font-weight:500; font-size:clamp(22px,2.6vw,30px); line-height:1.25; color:var(--ink); margin:0}

/* ---------- How it runs (flow) ---------- */
.flow{display:grid; grid-template-columns:1fr; gap:18px; margin-top:46px; position:relative}
.node{background:var(--surface); border:1px solid var(--line); border-radius:20px; padding:26px 24px; box-shadow:var(--shadow-card); position:relative; z-index:1}
.node .badge{width:48px; height:48px; margin-bottom:18px; display:grid; place-items:center; position:relative}
.node .badge svg{position:absolute; inset:0; width:48px; height:48px}
.node .badge svg path{fill:var(--lime); stroke:var(--lime-deep); stroke-width:1}
.node .badge b{position:relative; font-family:var(--serif); font-weight:600; font-size:20px; color:var(--charcoal)}
.node h3{font-family:var(--sans); font-weight:700; font-size:17px; letter-spacing:-.01em; margin:0 0 8px}
.node p{font-size:14.5px; line-height:1.55; color:var(--body); margin:0}
.node .couch{font-style:italic; font-weight:500; color:var(--ink)}
.flow-soft{margin-top:30px; display:flex; align-items:center; gap:16px; flex-wrap:wrap}
.flow-soft .note{font-size:13.5px; color:var(--muted)}

/* ---------- Engine room ---------- */
.engine .head{text-align:center; max-width:680px; margin:0 auto 42px}
.engine .head .lead{margin:14px auto 0; max-width:54ch}
.cards{display:grid; grid-template-columns:1fr; gap:20px}
.feat{background:var(--surface); border:1px solid var(--line); border-radius:20px; padding:22px 20px; box-shadow:var(--shadow-card); position:relative}
.feat .live{position:absolute; top:18px; right:18px; width:8px; height:8px; border-radius:50%; background:var(--lime-deep); opacity:.25}
.feat.pulse .live{animation:pulseDot 1.1s ease}
.feat .hex{width:46px; height:46px; margin-bottom:16px; position:relative; display:grid; place-items:center}
.feat .hex svg.frame{position:absolute; inset:0; width:46px; height:46px}
.feat .hex svg.frame path{fill:var(--lime-tint); stroke:#cfe88f}
.feat .hex svg.ic{position:relative; width:22px; height:22px; color:var(--charcoal)}
.feat h3{font-family:var(--sans); font-weight:700; font-size:17px; letter-spacing:-.01em; margin:0 0 7px}
.feat p{font-size:14px; line-height:1.55; color:var(--body); margin:0}
.engine-cta{text-align:center; margin-top:38px}
.engine-cta .link-arrow:hover svg{transform:translateX(3px)}

/* ---------- Dark tentpoles ---------- */
.dark{background:var(--charcoal); color:#fff; position:relative; overflow:hidden}
.dark .h2{color:#fff}
.dark .lead{color:var(--on-dark-muted)}
.mirror{display:grid; grid-template-columns:1fr; gap:46px; align-items:center; position:relative; z-index:1}
.mirror .copy .lead{max-width:46ch; margin-top:18px}
.two-sided{font-family:var(--serif); font-weight:500; font-size:clamp(19px,2.1vw,25px); line-height:1.4; color:#f1f1ec; margin:26px 0 30px; border-left:2px solid var(--lime); padding-left:20px}
.two-sided em{font-style:normal; color:var(--lime)}
.two-sided .aside{display:block; font-size:.7em; color:#a7a8a2; margin-top:10px; font-style:italic}

/* honest-mirror readout */
.readout{background:var(--charcoal-2); border:1px solid #4a4a47; border-radius:20px; padding:24px; box-shadow:0 20px 50px -20px rgba(0,0,0,.6)}
.readout .cap{font-size:11px; color:var(--on-dark-faint); font-weight:600; text-transform:uppercase; letter-spacing:.04em; margin-bottom:18px; display:flex; justify-content:space-between}
.readout .cap .sample{background:#454541; color:#cfd0c8; padding:2px 8px; border-radius:var(--r-pill); font-size:9.5px; letter-spacing:.02em}
.fair{display:flex; align-items:center; gap:12px; padding:11px 0}
.fair + .fair{border-top:1px solid #46463f}
.fair .who{width:78px; display:flex; align-items:center; gap:8px; flex:0 0 auto; font-size:13px; font-weight:600; color:#eceee7}
.fair .track{flex:1; height:9px; background:#46463f; border-radius:var(--r-pill); overflow:hidden}
.fair .track > i{display:block; height:100%; width:0; background:linear-gradient(90deg,var(--lime-deep),var(--lime)); border-radius:var(--r-pill); transition:width 1.1s cubic-bezier(.2,.7,.2,1)}
.fair .pct{width:42px; text-align:right; font-size:13px; font-weight:700; color:#fff; flex:0 0 auto}
.rings{display:flex; gap:18px; margin-top:22px; padding-top:20px; border-top:1px solid #46463f}
.ring{display:flex; flex-direction:column; align-items:center; gap:7px; flex:1}
.ring svg{width:54px; height:54px}
.ring .track-c{stroke:#46463f}
.ring .val-c{stroke:var(--lime); stroke-linecap:round; transition:stroke-dashoffset 1.1s cubic-bezier(.2,.7,.2,1)}
.ring .num{font-size:12.5px; font-weight:700; fill:#fff; font-family:var(--sans)}
.ring small{font-size:10.5px; color:var(--on-dark-faint)}

/* ---------- Capable kids ---------- */
.kids{display:grid; grid-template-columns:1fr; gap:46px; align-items:center}
.kids .copy p{font-size:clamp(15.5px,1.2vw,17.5px); line-height:1.6; color:var(--body); margin:0 0 16px}
.kids .copy .punch{font-family:var(--serif); font-weight:500; font-size:clamp(18px,1.8vw,22px); line-height:1.35; color:var(--ink)}
.kidcard{background:var(--surface); border:1px solid var(--line); border-radius:20px; box-shadow:var(--shadow-card); padding:20px; max-width:360px; margin:0 auto; width:100%}
.kidcard .top{display:flex; align-items:center; gap:11px; margin-bottom:6px}
.kidcard .top .nm{font-weight:700; font-size:15px}
.kidcard .top .bal{margin-left:auto; background:var(--charcoal); color:#fff; font-weight:700; font-size:13px; padding:6px 12px; border-radius:var(--r-pill)}
.kidcard .top .bal b{color:var(--lime)}

/* ---------- Location ---------- */
.loc{display:grid; grid-template-columns:1fr; gap:46px; align-items:center}
.loc .copy .scenario{font-weight:500; color:var(--ink); font-size:16px; margin:18px 0 14px; padding-left:16px; border-left:2px solid var(--lime)}
.loc .copy .honest{font-size:13px; color:var(--muted); font-style:italic}
.map{height:170px; border-radius:16px; position:relative; overflow:hidden; background:linear-gradient(160deg,#eef0e9,#e2e5db); border:1px solid var(--line); margin:14px}
.map .road{position:absolute; background:#daddd2}
.map .pin{position:absolute; width:26px; height:26px; border-radius:50% 50% 50% 0; background:var(--charcoal); transform:translate(-50%,-100%) rotate(-45deg); box-shadow:0 6px 12px rgba(0,0,0,.25)}
.map .pin:after{content:""; position:absolute; inset:7px; background:var(--lime); border-radius:50%}
.geo-ring{position:absolute; width:14px; height:14px; border-radius:50%; border:2px solid var(--lime); transform:translate(-50%,-50%)}
.geo-ring.pulse{animation:geoPulse 1.6s ease}
.surfaced{display:flex; align-items:center; gap:10px; padding:11px 13px; margin:0 14px 14px}
.surfaced .gic{width:34px; height:34px; border-radius:11px; background:var(--charcoal); color:var(--lime); display:grid; place-items:center; flex:0 0 auto}
.surfaced .gt{font-size:13px; font-weight:600}
.surfaced .gc{font-size:11px; color:var(--muted); margin-top:2px}

/* ---------- What changes ---------- */
.changes .row{display:grid; grid-template-columns:1fr; gap:6px; padding:24px 0; align-items:center}
.changes .row + .row{border-top:1px solid var(--line)}
.changes .before{color:var(--faint); font-size:16px}
.changes .before b{font-weight:600}
.changes .arrow{display:none; color:var(--lime-deep)}
.changes .after{color:var(--ink); font-weight:600; font-size:17px}
.changes .close{margin-top:40px; padding-top:40px; border-top:1px solid var(--line); text-align:center}
.changes .close p{font-family:var(--serif); font-weight:500; font-size:clamp(22px,2.8vw,32px); line-height:1.25; color:var(--ink); max-width:20ch; margin:0 auto}
/* dark variant — a tinted band to re-energize attention before pricing */
.changes.dark .row + .row{border-top-color:rgba(255,255,255,.1)}
.changes.dark .before{color:var(--on-dark-faint)}
.changes.dark .arrow{color:var(--lime)}
.changes.dark .after{color:#fff}
.changes.dark .close{border-top-color:rgba(255,255,255,.12)}
.changes.dark .close p{color:#f4f5f0}

/* ---------- Pricing ---------- */
.pricing .anchor{font-family:var(--serif); font-weight:500; font-size:clamp(24px,3.2vw,38px); line-height:1.25; text-align:center; max-width:20ch; margin:0 auto 44px; color:var(--ink)}
.price-card{background:var(--surface); border:1px solid var(--line); border-radius:24px; box-shadow:var(--shadow-card); padding:40px 34px; max-width:480px; margin:0 auto; text-align:center}
.price-card .num{font-family:var(--serif); font-weight:600; font-size:64px; line-height:1; color:var(--ink)}
.price-card .num span{font-family:var(--sans); font-size:20px; font-weight:600; color:var(--muted)}
.price-card .desc{font-size:15.5px; line-height:1.55; color:var(--body); margin:16px auto 6px; max-width:34ch}
.price-card .nofees{font-size:13px; color:var(--muted); font-style:italic; margin-bottom:24px}
.price-card .btn{width:100%}
.risk{display:flex; flex-wrap:wrap; justify-content:center; gap:10px; margin-top:26px}
.risk .pill{display:inline-flex; align-items:center; gap:7px; font-size:13px; font-weight:600; color:var(--body); background:var(--surface); border:1px solid var(--line); padding:9px 14px; border-radius:var(--r-pill)}
.risk .pill svg{width:14px; height:14px; color:var(--lime-deep)}

/* ---------- FAQ ---------- */
.faq{max-width:760px; margin:0 auto}
.qa{border-top:1px solid var(--line)}
.qa:last-child{border-bottom:1px solid var(--line)}
.qa button{width:100%; background:none; border:none; cursor:pointer; display:flex; align-items:center; justify-content:space-between; gap:16px; padding:22px 4px; text-align:left; font-family:var(--sans); font-weight:600; font-size:17px; color:var(--ink)}
.qa .tog{flex:0 0 auto; width:24px; height:24px; display:grid; place-items:center; color:var(--lime-deep); font-size:22px; transition:transform .25s}
.qa.open .tog{transform:rotate(45deg)}
.qa .a{max-height:0; overflow:hidden; transition:max-height .3s ease}
.qa .a p{font-size:15px; line-height:1.6; color:var(--body); margin:0 4px 22px; max-width:62ch}

/* ---------- Founder ---------- */
.founder{max-width:720px; margin:0 auto; text-align:center}
.founder .quote{font-family:var(--serif); font-style:italic; font-weight:500; font-size:clamp(20px,2.4vw,27px); line-height:1.4; color:var(--ink); margin:0 0 26px}
.founder .mark{width:60px; height:60px; margin:0 auto 22px}
.badges{display:flex; flex-wrap:wrap; justify-content:center; gap:10px}
.badges .b{display:inline-flex; align-items:center; gap:7px; font-size:13px; font-weight:600; color:var(--body); background:var(--surface); border:1px solid var(--line); padding:9px 14px; border-radius:var(--r-pill)}
.badges .b svg{width:14px; height:14px; color:var(--lime-deep)}

/* ---------- Final CTA ---------- */
.final{text-align:center; position:relative; overflow:hidden; padding-top:clamp(52px,6vw,84px)}
.final .h2{font-size:clamp(34px,5vw,60px); margin-bottom:18px}
.final .lead{max-width:40ch; margin:0 auto 34px}

/* ---------- Footer ---------- */
.foot{background:var(--canvas); border-top:1px solid var(--line); padding:48px 0 40px}
.foot .top{display:flex; flex-wrap:wrap; gap:24px; align-items:baseline; justify-content:space-between}
.foot .brand{font-size:18px}
.foot .brand svg{width:38px; height:38px}
.foot .tag{font-family:var(--serif); font-style:italic; color:var(--muted); font-size:15px; margin-left:8px}
.foot nav{display:flex; flex-wrap:wrap; gap:18px; font-size:13.5px; color:var(--muted)}
.foot nav a:hover{color:var(--ink)}
.foot .privacy{font-weight:700; color:var(--ink)}
.foot .fine{margin-top:26px; font-size:12.5px; color:var(--faint); display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px}

/* ---------- Showcase (dark product gallery) ---------- */
.showcase{overflow:hidden}
.showcase .sx-head{text-align:center; max-width:680px; margin:0 auto}
.showcase .sx-head .eyebrow{display:block}
.showcase .sx-head .lead{margin:14px auto 0; max-width:44ch}
.showcase .sx-head .lead em{font-style:normal; color:var(--lime); font-weight:600}
.sx-glow{position:absolute; top:36%; left:50%; width:58%; height:54%; max-width:720px; transform:translateX(-50%); background:radial-gradient(circle, var(--lime-glow), transparent 66%); filter:blur(46px); z-index:0; pointer-events:none}
.sx-stage{--sxw:188px; position:relative; margin-top:40px; padding-top:30px}
.sx-track{display:flex; justify-content:center; align-items:flex-end}
.sx-phone{width:var(--sxw); flex:0 0 auto; background:#0e0e10; border-radius:28px; padding:7px; box-shadow:0 26px 50px -18px rgba(0,0,0,.72)}
.sx-phone .sx-s{background:var(--canvas); border-radius:21px; overflow:hidden; padding:13px 12px; min-height:248px}
.sx-phone.l{transform:rotate(-7deg) translateX(34px) translateY(14px); z-index:1}
.sx-phone.r{transform:rotate(7deg) translateX(-34px) translateY(14px); z-index:1}
.sx-phone.c{z-index:3; transform:translateY(-18px); box-shadow:0 36px 64px -16px rgba(0,0,0,.82)}
.sx-bee{position:absolute; top:-6px; left:calc(50% + var(--sxw) / 2); z-index:6}
.sx-cap{text-align:center; margin-top:26px; font-size:12px; color:var(--on-dark-faint); letter-spacing:.01em}
.sx-tag{font-size:11px; font-weight:700; color:var(--lime-ink); background:var(--lime-tint); display:inline-block; padding:3px 10px; border-radius:var(--r-pill)}
.sx-tag.amber{background:var(--amber-tint); color:#b9760a}
.sx-lh{font-family:var(--serif); font-size:15px; font-weight:600; color:var(--ink); margin:8px 0 1px; letter-spacing:-.01em}
.sx-lsub{font-size:10.5px; color:var(--muted); margin-bottom:10px}
.sx-load{background:var(--charcoal); border-radius:13px; padding:12px; margin-bottom:2px}
.sx-dl{font-size:8px; text-transform:uppercase; letter-spacing:.05em; color:#b9bbb4; font-weight:600}
.sx-db{font-size:17px; font-weight:700; color:#fff; margin:3px 0 8px; letter-spacing:-.02em}
.sx-db b{color:var(--lime)}
.sx-bar{height:6px; border-radius:var(--r-pill); background:rgba(255,255,255,.16); overflow:hidden}
.sx-bar i{display:block; height:100%; width:67%; background:linear-gradient(90deg,var(--lime-deep),var(--lime)); border-radius:var(--r-pill)}
.sx-row{display:flex; align-items:center; gap:8px; background:var(--surface); border:1px solid var(--line); border-radius:11px; padding:9px 10px; margin-top:8px; box-shadow:0 6px 16px rgba(20,20,19,.05)}
.sx-ck{width:18px; height:18px; border-radius:50%; border:2px solid var(--task-muted); flex:0 0 auto; display:grid; place-items:center}
.sx-ck.on{background:var(--lime-deep); border-color:var(--lime-deep)}
.sx-ck svg{width:9px; height:9px}
.sx-av{width:19px; height:19px; border-radius:50%; display:grid; place-items:center; font-size:9px; font-weight:700; color:#fff; flex:0 0 auto}
.sx-tt{font-size:11.5px; font-weight:600; color:var(--ink); flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.sx-tt.done{color:var(--task-muted); text-decoration:line-through}
.sx-pts{font-size:11.5px; font-weight:700; color:var(--lime-ink); flex:0 0 auto}
.sx-rings{display:flex; justify-content:space-around; margin-top:14px}
.sx-ring{display:flex; flex-direction:column; align-items:center; gap:5px}
.sx-ring svg{width:50px; height:50px}
.sx-ring text{font-size:13px; font-weight:700; fill:var(--ink); font-family:var(--sans)}
.sx-ring small{font-size:9.5px; color:var(--muted)}

/* ---------- Bee mascot ---------- */
.bee{display:inline-block; vertical-align:middle}
.bee--float{animation:beeFloat 3.6s ease-in-out infinite}
@keyframes beeFloat{0%,100%{transform:translateY(0)} 50%{transform:translateY(-7px)}}
.final-bee{margin-bottom:14px}

/* ---------- Reveal animation ---------- */
.reveal{opacity:0; transform:translateY(22px); transition:opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1)}
.reveal.in{opacity:1; transform:none}
.stagger > *{opacity:0; transform:translateY(20px); transition:opacity .6s ease, transform .6s cubic-bezier(.2,.7,.2,1)}
.stagger.in > *{opacity:1; transform:none}

@keyframes pulseDot{0%{box-shadow:0 0 0 0 rgba(155,208,0,.5); opacity:1}100%{box-shadow:0 0 0 9px rgba(155,208,0,0); opacity:.25}}
@keyframes geoPulse{0%{box-shadow:0 0 0 0 rgba(195,248,50,.5)}100%{box-shadow:0 0 0 26px rgba(195,248,50,0)}}

/* ---------- Responsive ---------- */
@media (min-width:600px){
  .cards{grid-template-columns:1fr 1fr}
}
@media (min-width:720px){
  .changes .row{grid-template-columns:1fr auto 1fr; gap:18px; align-items:start}
  .changes .before{text-align:right}
  .changes .arrow{display:block; margin-top:1px}
  .rings{gap:14px}
}
@media (min-width:820px){
  .flow{grid-template-columns:1fr 1fr 1fr}
}
@media (min-width:960px){
  .hero .grid{grid-template-columns:1.05fr .95fr; gap:40px}
  .hero-copy{order:0} .phone-stage{order:1}
  .mirror{grid-template-columns:1.05fr .95fr; gap:54px}
  .kids{grid-template-columns:1fr 1fr; gap:54px}
  .loc{grid-template-columns:.95fr 1.05fr; gap:54px}
}
@media (min-width:1000px){
  .cards{grid-template-columns:repeat(4,1fr)}
  .sx-stage{--sxw:228px}
  .sx-phone .sx-s{min-height:286px}
}
@media (min-width:1180px){
  .hero .phone{width:340px}
  .sx-stage{--sxw:240px}
}
@media (max-width:1000px){
  .trust .by{flex-basis:100%; margin-left:0; text-align:left; max-width:none; order:9}
}
@media (max-width:840px){
  .nav-toggle{display:block}
  /* backdrop-filter would make .nav the containing block for the fixed sheet — drop it on mobile so the sheet anchors to the viewport */
  .nav{background:var(--canvas); backdrop-filter:none; -webkit-backdrop-filter:none}
  .nav-menu{display:block; position:fixed; top:64px; left:0; right:0; bottom:0; background:var(--surface);
    padding:6px 0 calc(30px + env(safe-area-inset-bottom)); overflow-y:auto; z-index:48;
    opacity:0; visibility:hidden; pointer-events:none; transform:translateY(-10px);
    transition:opacity .24s ease, transform .26s cubic-bezier(.2,.7,.2,1), visibility .24s}
  .nav.open .nav-menu{opacity:1; visibility:visible; pointer-events:auto; transform:none}
  .nav-menu .nav-links{display:flex; flex-direction:column; gap:0; margin:0; font-size:17px; color:var(--ink)}
  .nav-menu .nav-links a{padding:17px 26px; border-bottom:1px solid var(--line); font-weight:600}
  .nav-menu .nav-links a:active{background:var(--canvas)}
  .nav-menu .nav-actions{display:flex; flex-direction:column; align-items:stretch; gap:14px; margin:0; padding:24px 26px 6px}
  .nav-menu .nav-actions .login{font-size:16px; font-weight:600; padding:6px 2px}
  .nav-menu .nav-actions .btn{width:100%; padding:15px 26px; font-size:16px}
  .nav-menu-bee{display:block; text-align:center; margin-top:10px; opacity:.85}
  body.nav-lock{overflow:hidden}
  .trust .by{margin-left:0; text-align:left; max-width:none}
}
@media (max-width:640px){
  .hero{padding:36px 0 46px}
  .hero h1{margin-bottom:16px}
  .hero .lead{margin-bottom:12px}
  .lead-more{display:none}
  .hero-cta{margin-top:20px}
}
@media (max-width:680px){
  .sx-stage{margin-top:22px; padding-top:30px}
  .sx-track{overflow-x:auto; scroll-snap-type:x mandatory; justify-content:flex-start; gap:14px; padding:6px 20px 14px; -webkit-overflow-scrolling:touch; scrollbar-width:none}
  .sx-track::-webkit-scrollbar{display:none}
  .sx-phone{width:212px; scroll-snap-align:center}
  .sx-phone.l,.sx-phone.c,.sx-phone.r{transform:none}
  .sx-bee{left:50%; transform:translateX(-50%); top:-6px}
}

/* ---------- Trust & safety ---------- */
.safety .head{text-align:center; max-width:660px; margin:0 auto 44px}
.safety .head .lead{margin:14px auto 0; max-width:52ch}
.pledges{display:grid; grid-template-columns:1fr; gap:18px; max-width:920px; margin:0 auto}
.pledge{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); padding:26px; box-shadow:var(--shadow-card)}
.pledge .pic{display:inline-flex; width:44px; height:44px; border-radius:13px; background:var(--lime-tint); color:#3f5400; align-items:center; justify-content:center; margin-bottom:15px}
.pledge .pic svg{width:23px; height:23px}
.pledge h3{font-family:var(--sans); font-weight:700; font-size:16.5px; letter-spacing:-.01em; margin:0 0 8px; color:var(--ink)}
.pledge p{font-size:14.5px; line-height:1.6; color:var(--body); margin:0}
.safety-note{max-width:740px; margin:34px auto 0; text-align:center; font-size:15px; line-height:1.62; color:var(--muted)}
.safety-note a{color:var(--ink); font-weight:600; text-decoration:underline; text-decoration-color:var(--lime-deep); text-underline-offset:3px}
@media (min-width:760px){ .pledges{grid-template-columns:1fr 1fr; gap:20px} }

/* ---------- Pricing guarantee + footer trust + founder signature ---------- */
.guarantee{max-width:580px; margin:22px auto -4px; text-align:center; font-size:14.5px; line-height:1.62; color:var(--muted)}
.guarantee a{color:var(--ink); font-weight:600; white-space:nowrap; text-decoration:underline; text-decoration-color:var(--lime-deep); text-underline-offset:3px}
.founder .sign{font-size:15px; color:var(--body); margin:16px 0 0; line-height:1.55}
.founder .sign a{color:var(--ink); font-weight:600; text-decoration:underline; text-decoration-color:var(--lime-deep); text-underline-offset:3px}
.foot-trust{display:block; font-size:12.5px; color:var(--muted); margin-top:9px; max-width:320px}
.foot-trust a{color:var(--body); text-decoration:underline; text-decoration-color:var(--task-muted); text-underline-offset:2px}

/* ---------- Sticky mobile CTA (surfaces after the hero) ---------- */
.sticky-cta{display:none}
@media (max-width:840px){
  .sticky-cta{display:flex; align-items:center; gap:12px; position:fixed; left:12px; right:12px; bottom:calc(12px + env(safe-area-inset-bottom)); z-index:45;
    background:var(--charcoal); color:#fff; border-radius:var(--r-pill); padding:11px 12px 11px 20px;
    box-shadow:0 14px 36px -10px rgba(20,20,19,.5); transform:translateY(150%); opacity:0;
    transition:transform .36s cubic-bezier(.2,.7,.2,1), opacity .3s ease; pointer-events:none}
  .sticky-cta.show{transform:none; opacity:1; pointer-events:auto}
  .sticky-cta .sc-copy{display:flex; flex-direction:column; line-height:1.18; margin-right:auto}
  .sticky-cta .sc-copy b{font-size:15px; font-weight:700}
  .sticky-cta .sc-copy span{font-size:11px; color:var(--on-dark-muted); margin-top:2px}
  .sticky-cta .sc-go{display:inline-flex; width:40px; height:40px; border-radius:50%; background:var(--lime); color:var(--charcoal); align-items:center; justify-content:center; flex:0 0 auto}
  .sticky-cta .sc-go svg{width:20px; height:20px}
}

/* ---------- Single point of failure — interactive hub diagram ---------- */
.spof-grid{display:grid; grid-template-columns:1fr; gap:40px; align-items:center}
.spof-grid .problem{max-width:none; margin:0}
@media (min-width:980px){ .spof-grid{grid-template-columns:1fr 1.04fr; gap:60px} }
.spof-stage{position:relative; width:min(100%,470px); aspect-ratio:1; margin:8px auto 0; overflow:visible}
@media (min-width:980px){ .spof-stage{margin-top:0} }
.spof-lines{position:absolute; inset:0; width:100%; height:100%; overflow:visible; z-index:1}
.spof-lines .lk{stroke:var(--task-muted); stroke-width:1.4; vector-effect:non-scaling-stroke; opacity:0;
  transition:opacity .55s ease calc(var(--i)*55ms), stroke .45s ease}
#spof.shown .spof-lines .lk{opacity:.5}
#spof.flowing .spof-lines .lk{stroke:var(--lime-deep); stroke-dasharray:4 7; animation:spofFlow .95s linear infinite calc(var(--i)*-80ms)}
#spof.offline .spof-lines .lk{stroke:var(--coral); opacity:.16; stroke-dasharray:0; transition-delay:calc(var(--i)*105ms + .35s)}
@keyframes spofFlow{from{stroke-dashoffset:11}to{stroke-dashoffset:0}}
.spof-chip{position:absolute; transform:translate(-50%,-50%) scale(.8); z-index:2; display:inline-flex; align-items:center; gap:7px; white-space:nowrap;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-pill); padding:7px 13px; box-shadow:var(--shadow-card);
  font-size:clamp(10.5px,1.05vw,12.5px); font-weight:600; color:var(--ink); opacity:0;
  transition:opacity .45s ease, transform .5s cubic-bezier(.2,.8,.3,1.3), background .4s ease, border-color .4s ease, color .4s ease}
#spof.shown .spof-chip{opacity:1; transform:translate(-50%,-50%) scale(1); transition-delay:calc(var(--i)*70ms + .12s)}
.spof-chip .cd{width:7px; height:7px; border-radius:50%; background:var(--lime-deep); flex:0 0 auto; transition:background .35s ease}
.spof-chip .miss{display:none; font-size:.82em; font-weight:700; color:#b23b32; letter-spacing:.02em}
#spof.offline .spof-chip{background:var(--coral-tint); border-color:#f3b7af; color:#b23b32; transition-delay:calc(var(--i)*105ms + .35s)}
#spof.offline .spof-chip .cd{background:var(--coral)}
#spof.offline .spof-chip .cl{text-decoration:line-through; text-decoration-color:#d98a82}
#spof.offline .spof-chip .miss{display:inline}
.spof-you{position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); z-index:3; display:grid; place-items:center}
.spof-halo{position:absolute; left:50%; top:50%; width:clamp(80px,18vw,98px); height:clamp(80px,18vw,98px); border-radius:50%; border:2px solid var(--lime); transform:translate(-50%,-50%); opacity:0; pointer-events:none}
#spof.flowing .spof-halo{animation:spofBreathe 2.1s ease-out infinite}
#spof.strain .spof-halo{border-color:var(--amber); animation-duration:1.15s}
.spof-core{position:relative; width:clamp(80px,18vw,98px); height:clamp(80px,18vw,98px); border-radius:50%; background:var(--charcoal); color:#fff; display:grid; place-items:center; box-shadow:0 16px 32px -12px rgba(41,41,40,.55); transition:background .6s ease, box-shadow .6s ease, transform .45s ease}
.spof-core b{font-family:var(--serif); font-weight:600; font-size:clamp(20px,3.6vw,24px); line-height:1}
.spof-off{position:absolute; bottom:-10px; left:50%; transform:translateX(-50%); background:#6c6c68; color:#fff; font-size:9px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; padding:3px 9px; border-radius:999px; white-space:nowrap; opacity:0; transition:opacity .4s ease .45s}
#spof.strain .spof-core{transform:scale(1.05)}
#spof.offline .spof-core{background:#9c9c97; box-shadow:0 8px 18px -10px rgba(41,41,40,.3); transform:scale(.95)}
#spof.offline .spof-off{opacity:1}
@keyframes spofBreathe{0%{transform:translate(-50%,-50%) scale(1); opacity:.6} 70%{opacity:0} 100%{transform:translate(-50%,-50%) scale(1.5); opacity:0}}
.spof-cap{text-align:center; margin-top:30px; min-height:64px}
.spof-cap .cap-txt{font-family:var(--serif); font-weight:500; font-size:clamp(17px,1.9vw,21px); line-height:1.3; color:var(--ink); margin:0; transition:color .4s ease}
.spof-cap .cap-txt.fail{color:#c0392b}
@media (max-width:600px){
  .spof-chip{font-size:10px; padding:5px 9px; gap:5px}
  .spof-chip .cd{width:6px; height:6px}
  #spof.offline .spof-chip .miss{display:none} /* red + strike-through already reads as "missed" */
}

/* ---------- Reduced motion: resolve to settled truth ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{animation:none !important; transition:none !important}
  .reveal,.stagger > *{opacity:1 !important; transform:none !important}
  .swash path{stroke-dashoffset:0 !important}
  .l-bar > i, .fair .track > i{width:var(--final,0) !important}
  .sticky-cta.show{transform:none; opacity:1}
  #spof .spof-chip{opacity:1 !important; transform:translate(-50%,-50%) !important}
  #spof .spof-lines .lk{opacity:.5 !important}
}