/* Narrly marketing site — shared stylesheet (night theme, matches the app). */
:root {
  /* warm Narrly brand: coral + grape + sun on cream. Variable NAMES are kept (night/mist/gold)
     so every page's markup is unchanged; only the values flip to the warm palette. */
  --night:#FFF8F0; --night-deep:#FFEDE0; --surface:#FFFFFF; --surface-line:#EDD8C5;
  --gold:#E8953B; --gold-deep:#C47520; --gold-soft:#FAD89A; --gold-text:#9E5E0A;
  --grape:#7C5CC4; --grape-deep:#5E3FA0; --sun:#FAD89A;
  --paper:#FFFFFF; --ink:#2E2247; --mist:#2E2247; --mist-dim:#5D4F78;
  --r-lg:28px; --r-md:18px; --r-pill:999px;
  --shadow:0 24px 50px -14px rgba(61,43,86,.16); --shadow-sm:0 12px 26px -8px rgba(61,43,86,.10);
  --ease:cubic-bezier(.32,.72,0,1);
  --maxw:1140px;
}
* { box-sizing:border-box; }
html { scroll-behavior:smooth; background:var(--night); overflow-x:hidden; }
/* Stars + comets — fixed layers, only opacity/transform animate (GPU). No scroll-pan,
   no filter, no parallax — so nothing repaints while scrolling. */
body::before { content:""; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background-image:
    radial-gradient(1.5px 1.5px at 20% 8%, rgba(155,109,214,.5), transparent),
    radial-gradient(1.5px 1.5px at 70% 18%, rgba(243,184,94,.55), transparent),
    radial-gradient(1px 1px at 40% 30%, rgba(242,103,90,.45), transparent),
    radial-gradient(1.5px 1.5px at 86% 12%, rgba(251,192,45,.5), transparent),
    radial-gradient(1px 1px at 10% 44%, rgba(243,184,94,.5), transparent),
    radial-gradient(1.5px 1.5px at 58% 52%, rgba(155,109,214,.45), transparent),
    radial-gradient(1px 1px at 32% 66%, rgba(243,184,94,.45), transparent),
    radial-gradient(1.5px 1.5px at 95% 40%, rgba(242,103,90,.45), transparent),
    radial-gradient(1px 1px at 16% 80%, rgba(243,184,94,.4), transparent),
    radial-gradient(1.5px 1.5px at 78% 74%, rgba(251,192,45,.45), transparent),
    radial-gradient(1px 1px at 48% 88%, rgba(155,109,214,.4), transparent),
    radial-gradient(1.5px 1.5px at 4% 62%, rgba(243,184,94,.45), transparent),
    radial-gradient(1px 1px at 66% 6%, rgba(242,103,90,.4), transparent),
    radial-gradient(1.5px 1.5px at 28% 16%, rgba(251,192,45,.45), transparent),
    radial-gradient(1px 1px at 90% 70%, rgba(243,184,94,.4), transparent),
    radial-gradient(1.5px 1.5px at 50% 38%, rgba(155,109,214,.4), transparent),
    radial-gradient(1px 1px at 74% 60%, rgba(243,184,94,.45), transparent),
    radial-gradient(1.5px 1.5px at 36% 94%, rgba(251,192,45,.4), transparent),
    radial-gradient(1px 1px at 8% 26%, rgba(242,103,90,.4), transparent),
    radial-gradient(1.5px 1.5px at 62% 82%, rgba(243,184,94,.45), transparent),
    radial-gradient(1px 1px at 24% 48%, rgba(155,109,214,.4), transparent),
    radial-gradient(1.5px 1.5px at 82% 32%, rgba(243,184,94,.45), transparent);
  animation:twinkleB 7.5s ease-in-out infinite; }
html::before { content:""; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background-image:
    radial-gradient(2px 2px at 12% 14%, rgba(243,184,94,.9), transparent),
    radial-gradient(2px 2px at 78% 10%, rgba(242,103,90,.7), transparent),
    radial-gradient(1.5px 1.5px at 33% 24%, rgba(243,184,94,.8), transparent),
    radial-gradient(2px 2px at 90% 28%, rgba(251,192,45,.8), transparent),
    radial-gradient(1.5px 1.5px at 6% 36%, rgba(242,103,90,.6), transparent),
    radial-gradient(2px 2px at 54% 12%, rgba(243,184,94,.7), transparent),
    radial-gradient(1.5px 1.5px at 64% 42%, rgba(155,109,214,.6), transparent),
    radial-gradient(2px 2px at 26% 56%, rgba(243,184,94,.65), transparent),
    radial-gradient(1.5px 1.5px at 92% 58%, rgba(243,184,94,.6), transparent),
    radial-gradient(2px 2px at 44% 72%, rgba(251,192,45,.6), transparent),
    radial-gradient(1.5px 1.5px at 84% 86%, rgba(242,103,90,.5), transparent),
    radial-gradient(2px 2px at 14% 90%, rgba(243,184,94,.55), transparent),
    radial-gradient(2.5px 2.5px at 70% 66%, rgba(251,192,45,.8), transparent),
    radial-gradient(1.5px 1.5px at 38% 46%, rgba(243,184,94,.6), transparent),
    radial-gradient(2px 2px at 22% 34%, rgba(242,103,90,.55), transparent),
    radial-gradient(1.5px 1.5px at 50% 84%, rgba(155,109,214,.55), transparent),
    radial-gradient(2px 2px at 96% 16%, rgba(243,184,94,.6), transparent),
    radial-gradient(1.5px 1.5px at 4% 70%, rgba(251,192,45,.55), transparent),
    radial-gradient(2.5px 2.5px at 60% 26%, rgba(243,184,94,.75), transparent),
    radial-gradient(1.5px 1.5px at 30% 78%, rgba(242,103,90,.5), transparent),
    radial-gradient(2px 2px at 80% 48%, rgba(243,184,94,.6), transparent),
    radial-gradient(1.5px 1.5px at 18% 52%, rgba(155,109,214,.5), transparent),
    radial-gradient(2px 2px at 46% 62%, rgba(243,184,94,.6), transparent),
    radial-gradient(2.5px 2.5px at 88% 76%, rgba(251,192,45,.7), transparent);
  animation:twinkleA 5.5s ease-in-out infinite; }
@keyframes twinkleA { 0%,100%{ opacity:.55; } 50%{ opacity:1; } }
@keyframes twinkleB { 0%,100%{ opacity:.4; } 50%{ opacity:.8; } }
/* a shooting star streaks across now and then */
main::before { content:""; position:fixed; top:13%; left:-9%; z-index:5; pointer-events:none;
  width:108px; height:2px; border-radius:2px; transform:rotate(15deg); opacity:0;
  background:linear-gradient(90deg, transparent, rgba(251,192,45,.95) 72%, #fff);
  box-shadow:0 0 12px 2px rgba(251,192,45,.55);
  animation:shoot 9s cubic-bezier(.45,0,.25,1) 1; } /* one comet, only at the start */
@keyframes shoot {
  0%{ opacity:0; transform:translate(0,0) rotate(15deg); }
  3%{ opacity:1; } 11%{ opacity:1; }
  15%,100%{ opacity:0; transform:translate(82vw,24vh) rotate(15deg); }
}
/* a second comet — different angle, colour, rhythm */
main::after { content:""; position:fixed; top:8%; left:36%; z-index:5; pointer-events:none;
  width:84px; height:2px; border-radius:2px; transform:rotate(27deg); opacity:0;
  background:linear-gradient(90deg, transparent, rgba(242,103,90,.9) 72%, #fff);
  box-shadow:0 0 11px 2px rgba(242,103,90,.5);
  animation:none; } /* comet removed — calmer sky */
@keyframes shoot2 {
  0%{ opacity:0; transform:translate(0,0) rotate(27deg); }
  4%{ opacity:1; } 11%{ opacity:1; }
  16%,100%{ opacity:0; transform:translate(52vw,30vh) rotate(27deg); }
}
/* a third comet — steeper, grape */
body::after { content:""; position:fixed; top:4%; left:9%; z-index:5; pointer-events:none;
  width:92px; height:2px; border-radius:2px; transform:rotate(42deg); opacity:0;
  background:linear-gradient(90deg, transparent, rgba(155,109,214,.9) 72%, #fff);
  box-shadow:0 0 11px 2px rgba(155,109,214,.45);
  animation:none; } /* comet removed — calmer sky */
@keyframes shoot3 {
  0%{ opacity:0; transform:translate(0,0) rotate(42deg); }
  4%{ opacity:1; } 10%{ opacity:1; }
  15%,100%{ opacity:0; transform:translate(40vw,48vh) rotate(42deg); }
}
/* a fourth comet — shallow, sun, entering from the right */
html::after { content:""; position:fixed; top:20%; right:-7%; z-index:5; pointer-events:none;
  width:96px; height:2px; border-radius:2px; transform:rotate(-13deg); opacity:0;
  background:linear-gradient(270deg, transparent, rgba(251,192,45,.92) 72%, #fff);
  box-shadow:0 0 11px 2px rgba(251,192,45,.5);
  animation:shoot4 11s cubic-bezier(.45,0,.25,1) 1; animation-delay:3.5s; } /* second comet, once, near the start */
@keyframes shoot4 {
  0%{ opacity:0; transform:translate(0,0) rotate(-13deg); }
  4%{ opacity:1; } 10%{ opacity:1; }
  15%,100%{ opacity:0; transform:translate(-48vw,22vh) rotate(-13deg); }
}
body {
  margin:0; overflow-x:hidden; max-width:100%; background:linear-gradient(180deg,#EDE0FF 0%,#FFE8D6 38%,var(--night) 780px); color:var(--mist);
  font-family:'Manrope',system-ui,sans-serif; font-size:18px; line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4 { font-family:'Literata',Georgia,serif; line-height:1.18; margin:0; font-weight:700; text-wrap:balance; }
.lead, .price__sub, .hero__sub { text-wrap:pretty; }
a { color:inherit; text-decoration:none; }
img { max-width:100%; }
.wrap { max-width:var(--maxw); margin:0 auto; padding:0 24px; }
.pop { color:var(--gold-text); }
.center { text-align:center; }

/* buttons */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:10px; font-family:'Manrope'; font-weight:800;
  font-size:19px; padding:17px 30px; border-radius:var(--r-pill); border:none; cursor:pointer;
  background:var(--gold); color:#fff; box-shadow:0 10px 30px rgba(232,149,59,.36); transition:transform .28s var(--ease), box-shadow .28s var(--ease); }
.btn:hover { transform:translateY(-2px); box-shadow:0 18px 40px rgba(232,149,59,.52); }
.btn:active { transform:translateY(0) scale(.97); }
.btn--sm { font-size:15px; padding:11px 18px; background:var(--gold-text); color:#fff; }
.btn--ghost { background:transparent; color:var(--gold-text); box-shadow:none; border:2px solid var(--gold); padding:15px 26px; }
/* button-in-button: trailing arrow nested in its own circle, magnetic on hover */
.btn--cta { padding-right:9px; gap:13px; }
.btn--cta::after { content:"\2192"; display:grid; place-items:center; width:30px; height:30px; border-radius:50%;
  background:rgba(255,255,255,.22); font-size:16px; line-height:1; transition:transform .28s var(--ease), background .28s var(--ease); }
.btn--cta:hover::after { transform:translate(3px,-1px) scale(1.06); background:rgba(255,255,255,.34); }
.btn:focus-visible, .btn--ghost:focus-visible, a:focus-visible, [tabindex]:focus-visible, summary:focus-visible,
.toggle button:focus-visible, .vtab:focus-visible, .vchip:focus-visible, .langs a:focus-visible {
  outline:none; box-shadow:0 0 0 3px rgba(242,103,90,.55); }

/* skip link */
.skip { position:absolute; left:8px; top:-200px; z-index:200; background:var(--gold); color:#fff;
  font-weight:800; padding:12px 18px; border-radius:0 0 var(--r-md) var(--r-md); transition:top .15s ease; }
.skip:focus { top:8px; }

/* nav */
.nav { position:sticky; top:0; z-index:50; background:var(--night); border-bottom:1px solid var(--surface-line); }
.nav__row { display:flex; align-items:center; gap:20px; height:74px; }
.brand { display:flex; align-items:center; gap:12px; font-family:'Literata'; font-weight:700; font-size:23px; color:var(--mist); }
.brand img { width:40px; height:40px; }
.nav__links { display:flex; gap:24px; margin:0 auto; font-weight:700; font-size:16px; }
.nav__links a { color:var(--mist-dim); }
.nav__links a:hover, .nav__links a[aria-current="page"] { color:var(--mist); }
.nav__right { display:flex; align-items:center; gap:16px; }
.langs { display:flex; gap:4px; font-weight:800; font-size:13px; letter-spacing:.03em; }
.langs a { padding:5px 9px; border-radius:var(--r-pill); color:var(--mist-dim); }
.langs a.on { color:#fff; background:var(--gold); }
.nav__signin { font-weight:700; font-size:15px; color:var(--mist-dim); }
.nav__signin:hover { color:var(--gold-text); }

/* page header (sub-pages) */
.page-head { position:relative; overflow:hidden; padding:72px 0 40px; text-align:center; }
.page-head::before { content:""; position:absolute; inset:0;
  background:radial-gradient(60% 70% at 50% -10%, rgba(242,103,90,.13) 0%, transparent 62%); z-index:0; }
.page-head > .wrap { position:relative; z-index:1; }
.eyebrow { display:inline-flex; align-items:center; gap:8px; font-weight:800; font-size:13px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--gold-text); background:rgba(242,103,90,.14); padding:8px 14px; border-radius:var(--r-pill); }
.page-head h1 { font-size:clamp(32px,4.4vw,50px); color:var(--mist); margin:18px 0 14px; }
.page-head p { color:var(--mist-dim); font-size:20px; max-width:60ch; margin:0 auto; }

/* sections */
section { padding:96px 0; }
.alt { background:var(--night-deep); }
/* premium: soft floating lift on cards */
.step,.feat,.stat,.card,.price{ transition:transform .35s var(--ease), box-shadow .35s var(--ease); }
.step:hover,.feat:hover,.stat:hover,.card:hover{ transform:translateY(-4px); box-shadow:var(--shadow); }
.sec-head { text-align:center; max-width:660px; margin:0 auto 48px; }
.sec-head h2 { font-size:clamp(28px,3.6vw,40px); color:var(--mist); }
.sec-head p { color:var(--mist-dim); font-size:19px; margin-top:12px; }

/* hero (home) */
.hero { position:relative; overflow:hidden; }
.hero::before { content:""; position:absolute; inset:0;
  background:radial-gradient(60% 50% at 82% -5%, rgba(242,103,90,.16) 0%, transparent 60%),
             radial-gradient(55% 50% at 0% 35%, rgba(124,99,193,.22) 0%, transparent 55%); z-index:0; }
.hero__grid { position:relative; z-index:1; display:grid; grid-template-columns:1.05fr .95fr; gap:48px;
  align-items:center; padding:60px 0 76px; }
.hero h1 { font-size:clamp(34px,4.8vw,56px); margin:18px 0 16px; color:var(--mist); }
.hero p.lead { font-size:20px; color:var(--mist-dim); max-width:34ch; margin:0 0 28px; }
.form__note { margin-top:10px; font-size:14px; color:var(--mist-dim); }
.trust { margin-top:18px; color:var(--mist-dim); font-size:15px; display:flex; gap:18px; flex-wrap:wrap; }
.trust b { color:var(--mist); }

/* phone mockup */
.phone { justify-self:center; width:300px; height:600px; border-radius:46px; background:#15112A;
  padding:14px; box-shadow:var(--shadow); transform:rotate(2deg); animation:float 6s ease-in-out infinite; }
.phone__screen { width:100%; height:100%; border-radius:34px; background:linear-gradient(#2A2350,#181232);
  overflow:hidden; display:flex; flex-direction:column; }
.pcover { padding:22px 18px 10px; text-align:center; }
.pcover .ded { font-family:'Caveat',cursive; color:var(--gold-text); font-weight:700; font-size:22px; }
.pcover h4 { font-family:'Literata'; font-weight:700; font-size:22px; color:var(--mist); margin:2px 0 0; }
.ptag { display:inline-block; margin-top:8px; font-family:'Manrope'; font-weight:800; font-size:11px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--gold-text); background:rgba(242,103,90,.14); padding:5px 14px; border-radius:var(--r-pill); }
.ppanel { margin:10px 16px; border-radius:24px; height:206px; background:
    radial-gradient(120% 90% at 30% 20%, var(--gold-soft), #E89B6A 75%); position:relative; box-shadow:var(--shadow-sm);
    display:flex; align-items:center; justify-content:center; font-size:84px; }
.ppanel .sticker { position:absolute; left:14px; bottom:14px; width:42px; height:42px; border-radius:50%;
  background:#fff; display:flex; align-items:center; justify-content:center; font-size:22px; box-shadow:var(--shadow-sm); }
.pnarr { margin:12px 16px 0; background:var(--paper); border-radius:18px; padding:14px 16px; font-family:'Literata',serif;
  font-size:14px; color:var(--ink); box-shadow:var(--shadow-sm); }
.pplay { margin:14px auto 18px; width:64px; height:64px; border-radius:50%; background:var(--gold); color:#fff;
  display:flex; align-items:center; justify-content:center; font-size:26px; box-shadow:0 8px 20px rgba(242,103,90,.4); }

/* book hero — the signature: tap a value, the storybook re-titles itself */
.hero--book { text-align:center; position:relative; overflow:hidden; }
.hero--book::before { content:""; position:absolute; inset:0; z-index:0;
  background:radial-gradient(60% 50% at 50% -8%, rgba(242,103,90,.14) 0%, transparent 60%); }
.hero--book > .wrap { position:relative; z-index:1; padding:58px 24px 76px; }
.hero--book h1 { font-size:clamp(32px,4.6vw,52px); color:var(--mist); max-width:20ch; margin:16px auto 10px; line-height:1.14; }
.hero--book .hero__sub { color:var(--mist-dim); font-size:18px; max-width:42ch; margin:0 auto 30px; }
.book { max-width:520px; margin:0 auto 24px; padding:36px 34px 30px;
  background:linear-gradient(180deg,#FBF1DD,#F1E2C4); border-radius:22px;
  box-shadow:0 34px 64px rgba(0,0,0,.55), inset 0 0 0 1px rgba(42,34,71,.07); }
.book__ded { font-family:'Caveat',cursive; font-size:27px; color:var(--gold-deep); margin:0 0 16px; }
.book__seal { width:88px; height:88px; border-radius:50%; margin:0 auto 18px; font-size:42px;
  background:radial-gradient(circle at 36% 30%, var(--gold-soft), var(--gold-deep));
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 10px 24px rgba(210,145,61,.5), inset 0 0 0 3px rgba(255,255,255,.4);
  transition:transform .28s var(--ease); }
.book__title { font-family:'Literata',serif; font-size:clamp(26px,3.6vw,38px); color:var(--ink); line-height:1.18; margin:0 0 12px; }
.book__title b { color:var(--gold-deep); font-style:italic; font-weight:700; transition:opacity .2s ease; }
.book__teaser { font-family:'Literata',serif; font-style:italic; font-size:17px; line-height:1.5; color:#6B5B7E; margin:0; min-height:51px; transition:opacity .2s ease; }
.book.is-swapping .book__seal { transform:scale(.82) rotate(-7deg); }
.book.is-swapping .book__title b, .book.is-swapping .book__teaser { opacity:0; }
.vrail { display:flex; flex-wrap:wrap; gap:10px; justify-content:center; max-width:660px; margin:0 auto 28px; }
.vrail__label { width:100%; color:var(--mist-dim); font-size:14px; font-weight:700; letter-spacing:.02em; margin-bottom:4px; }
.vchip { font-family:'Manrope'; font-weight:700; font-size:15px; cursor:pointer; border:1px solid var(--surface-line);
  background:var(--surface); color:var(--mist); padding:9px 16px; border-radius:var(--r-pill); transition:background .15s ease, color .15s ease, border-color .15s ease; }
.vchip:hover { border-color:var(--gold-text); }
.vchip[aria-pressed="true"] { background:var(--gold); color:#fff; border-color:var(--gold-text); }
@media (prefers-reduced-motion:reduce){ .book__seal,.book__title b,.book__teaser{ transition:none; } .book.is-swapping .book__seal{ transform:none; } }

/* warm EdTech hero — text left, cozy night-scene right */
.ehero__grid { display:grid; grid-template-columns:1.05fr .95fr; gap:48px; align-items:center; padding:52px 0 26px; }
.badge { display:inline-flex; align-items:center; gap:8px; font-weight:800; font-size:13px; letter-spacing:.01em; color:var(--grape-deep);
  background:rgba(124,92,196,.1); border:1px solid rgba(124,92,196,.25); padding:8px 16px; border-radius:var(--r-pill);
  box-shadow:0 2px 8px rgba(124,92,196,.12); }
.ehero h1 { font-size:clamp(34px,4.8vw,56px); color:var(--ink); margin:18px 0 14px; line-height:1.12; max-width:14ch; }
.ehero h1 b { color:var(--gold); font-weight:700; }
.ehero .lead { font-size:19px; color:var(--mist-dim); max-width:46ch; margin:0 0 26px; line-height:1.6; }
.ehero__cta { display:flex; gap:12px; flex-wrap:wrap; align-items:center; }
.ehero__note { margin-top:14px; font-size:14px; color:var(--mist-dim); }
.stats { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; max-width:560px; margin:28px 0 0; }
.stat { background:#fff; border:1px solid var(--surface-line); border-radius:18px; padding:16px 14px; box-shadow:var(--shadow-sm); }
.stat b { font-family:'Literata',serif; font-size:23px; color:var(--gold); display:block; line-height:1; font-variant-numeric:tabular-nums; }
.stat span { color:var(--mist-dim); font-size:13px; display:block; margin-top:6px; line-height:1.35; }

/* the cozy night scene (illustration) */
.scene { position:relative; aspect-ratio:1/1; width:100%; max-width:440px; justify-self:center; border-radius:36px; overflow:hidden;
  background:radial-gradient(140% 115% at 75% 5%, #FFF0E2 0%, #E8D5FF 40%, #C4AEF0 72%, #B8A0E8 100%);
  box-shadow:0 40px 80px rgba(90,60,160,.22), inset 0 1px 1px rgba(255,255,255,.7), inset 0 0 0 1px rgba(255,255,255,.3); }
.scene__moon { position:absolute; top:28px; right:36px; width:72px; height:72px; border-radius:50%;
  background:radial-gradient(circle at 35% 32%, #FFF7D4, #FAE47A);
  box-shadow:14px 8px 0 -2px #EDD86A inset, 0 0 0 10px rgba(251,220,40,.07), 0 0 52px rgba(251,192,45,.6); }
.scene__star { position:absolute; width:5px; height:5px; border-radius:50%; background:#fff; opacity:.85; box-shadow:0 0 6px rgba(255,255,255,.8); }
.scene__card { position:absolute; left:50%; bottom:36px; transform:translateX(-50%) rotate(-2.5deg); width:66%;
  background:#fff; border-radius:22px; padding:18px 18px 16px; text-align:center;
  box-shadow:0 22px 44px rgba(61,43,86,.28), 0 4px 12px rgba(61,43,86,.1), inset 0 1px 0 rgba(255,255,255,.98); }
.scene__ded { font-family:'Caveat',cursive; color:var(--gold-deep); font-size:19px; margin:0 0 10px; letter-spacing:.02em; }
.scene__art { width:80px; height:80px; border-radius:18px; margin:0 auto 12px; display:flex; align-items:center; justify-content:center;
  font-size:42px; background:radial-gradient(120% 90% at 30% 20%, #FFE3C4, #EF9A60);
  box-shadow:0 8px 20px rgba(210,145,61,.28); position:relative; overflow:hidden; }
.scene__art::after { content:""; position:absolute; inset:0; background:linear-gradient(135deg,rgba(255,255,255,.25) 0%,transparent 60%); }
.scene__title { font-family:'Literata',serif; font-weight:700; color:var(--ink); font-size:16.5px; margin:0; line-height:1.3; }
.scene__float { position:absolute; line-height:1; filter:drop-shadow(0 6px 12px rgba(61,43,86,.3)); animation:bob 5s ease-in-out infinite; }
.scene__dragon { top:28%; left:8%; font-size:40px; }
.scene__spark { top:14%; left:56%; font-size:26px; animation-duration:4s; animation-delay:.6s; }
@keyframes bob { 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(-12px) } }

/* voice player (the UTP) */
.player { max-width:540px; margin:0 auto; background:#fff; border:1px solid var(--surface-line); border-radius:24px;
  padding:26px 26px 22px; box-shadow:var(--shadow); }
.player__tabs { display:flex; gap:8px; justify-content:center; flex-wrap:wrap; margin-bottom:20px; }
.vtab { font-family:'Manrope'; font-weight:700; font-size:14px; cursor:pointer; border:1px solid var(--surface-line);
  background:#FFF7EF; color:var(--ink); padding:8px 15px; border-radius:var(--r-pill); transition:background .15s ease,color .15s ease; }
.vtab[aria-pressed="true"] { background:var(--grape); color:#fff; border-color:var(--grape); }
.player__row { display:flex; align-items:center; gap:18px; }
.player__play { width:60px; height:60px; flex:none; border-radius:50%; background:var(--gold); color:#fff; font-size:20px;
  display:flex; align-items:center; justify-content:center; box-shadow:0 10px 24px rgba(242,103,90,.42); }
.wave { display:flex; align-items:flex-end; gap:4px; height:44px; flex:1; }
.wave i { flex:1; background:linear-gradient(var(--grape),var(--gold)); border-radius:4px; opacity:.5; height:30%; }
.wave i:nth-child(odd){ height:62% } .wave i:nth-child(3n){ height:88% } .wave i:nth-child(4n){ height:44% } .wave i:nth-child(5n){ height:72% } .wave i:nth-child(7n){ height:34% }
.player__cap { text-align:center; color:var(--mist-dim); font-size:14px; margin:16px 0 0; }
@media (max-width:860px){ .ehero__grid{ grid-template-columns:1fr; gap:30px; padding:34px 0 20px; } .scene{ order:-1; } .stats{ max-width:none; } }
@media (prefers-reduced-motion:reduce){ .scene__float{ animation:none; } }

/* problem strip */
.problem { background:var(--surface); border-top:1px solid var(--surface-line); border-bottom:1px solid var(--surface-line); }
.problem .wrap { padding:30px 24px; text-align:center; }
.problem p { margin:0; font-family:'Literata',serif; font-size:clamp(20px,2.6vw,26px); color:var(--mist); }
.problem b { color:var(--gold-text); }

/* steps */
.steps { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.step { background:var(--surface); border:1px solid var(--surface-line); border-radius:var(--r-lg); padding:30px 26px; }
.step__n { font-family:'Manrope'; font-weight:800; color:var(--gold-text); font-size:14px; letter-spacing:.04em; }
.step h3 { font-size:21px; margin:8px 0 8px; color:var(--mist); }
.step p { color:var(--mist-dim); font-size:16px; margin:0; }

/* features */
.features { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.feat { background:linear-gradient(160deg,#fff 0%,#FFF6EE 100%); border:1px solid var(--surface-line);
  border-radius:var(--r-lg); padding:30px 26px; box-shadow:var(--shadow-sm); }
.feat .ico { width:52px; height:52px; border-radius:16px; background:rgba(232,149,59,.12); display:grid; place-items:center;
  font-size:26px; color:var(--gold-text); margin-bottom:16px; }
.feat h3 { font-size:19px; margin:0 0 8px; color:var(--ink); font-weight:700; }
.feat p { color:var(--mist-dim); font-size:15.5px; margin:0; line-height:1.55; }
.feat--hero { border-color:var(--gold); box-shadow:0 0 0 1.5px var(--gold) inset, var(--shadow-sm); background:linear-gradient(160deg,#FFFAF4,#FFF3E4); }

/* value chips */
.chips { display:flex; flex-wrap:wrap; gap:12px; justify-content:center; max-width:920px; margin:0 auto; }
.chip { background:var(--surface); border:1px solid var(--surface-line); border-radius:var(--r-pill); padding:10px 18px;
  font-weight:700; font-size:16px; color:var(--mist); display:inline-flex; gap:8px; align-items:center; }

/* pricing — founding banner + toggle */
.founding { max-width:720px; margin:0 auto 28px; text-align:center; background:var(--surface);
  border:1px solid var(--surface-line); border-radius:var(--r-pill); padding:13px 24px; color:var(--mist-dim); font-weight:600; font-size:15px; box-shadow:var(--shadow-sm); }
.founding b { color:var(--ink); font-weight:800; }
.founding .ic { color:var(--gold-text); }
.toggle { position:relative; display:inline-flex; align-items:center; gap:4px; background:var(--surface); border:1px solid var(--surface-line);
  border-radius:var(--r-pill); padding:5px; }
.toggle button { position:relative; z-index:1; border:none; cursor:pointer; font-family:'Manrope'; font-weight:800; font-size:15px; color:var(--mist-dim);
  background:transparent; padding:10px 18px; border-radius:var(--r-pill); transition:color .25s var(--ease); }
.toggle button[aria-pressed="true"] { color:#fff; background:var(--gold); } /* no-JS fallback */
.toggle .save { font-weight:800; font-size:12px; padding-left:6px; opacity:.9; }
/* JS-enhanced sliding thumb (pricing.js adds .has-thumb + the .toggle__thumb element). */
.toggle__thumb { position:absolute; top:5px; left:0; height:calc(100% - 10px); border-radius:var(--r-pill);
  background:var(--gold); box-shadow:0 6px 16px rgba(232,149,59,.42); z-index:0;
  transition:transform .34s var(--ease), width .34s var(--ease); }
.toggle.has-thumb button[aria-pressed="true"] { background:transparent; }
@media (prefers-reduced-motion:reduce){ .toggle__thumb{ transition:none; } }

/* pricing cards (3-tier, center-staged) */
.prices { display:grid; grid-template-columns:repeat(3,1fr); gap:22px; align-items:start; max-width:1080px; margin:0 auto; }
.price { background:var(--surface); border:1px solid var(--surface-line); border-radius:var(--r-lg); padding:36px 30px; position:relative; display:flex; flex-direction:column; }
/* the popular card is lifted above the others (taller, stronger shadow) — the 21st.dev "Popular" move */
.price--mid { margin-top:-22px; padding:48px 32px 38px; border-color:var(--gold);
  box-shadow:0 0 0 2px var(--gold) inset, 0 36px 74px -16px rgba(232,149,59,.42), inset 0 1px 0 rgba(255,255,255,.92);
  background:linear-gradient(160deg,#FFFBF5,#FFF6E8); }
.price__badge { position:absolute; top:14px; right:14px; left:auto; transform:none; display:inline-flex; align-items:center; gap:6px;
  background:var(--gold-deep); color:#fff; font-weight:800; font-size:12px; letter-spacing:.02em; padding:6px 13px;
  border-radius:var(--r-pill); white-space:nowrap; box-shadow:0 6px 16px rgba(196,117,32,.4); }
.price__tag { font-weight:800; font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--gold-text); }
.price h3 { font-size:24px; margin:10px 0 6px; color:var(--mist); }
.price__amt { font-family:'Literata',serif; font-size:clamp(38px,4.4vw,46px); font-weight:700; color:var(--ink); margin:8px 0 2px; line-height:1.08; letter-spacing:-.01em; font-variant-numeric:tabular-nums; }
.price__amt small { font-family:'Manrope'; font-size:15px; color:var(--mist-dim); font-weight:700; letter-spacing:0; }
.price__old { color:var(--mist-dim); text-decoration:line-through; font-size:16px; margin-right:6px; }
.price__save { display:inline-block; background:rgba(242,103,90,.16); color:var(--gold-text); font-weight:800; font-size:12px;
  padding:3px 10px; border-radius:var(--r-pill); margin-left:2px; vertical-align:middle; }
.price__sub { color:var(--mist-dim); font-size:15px; margin:6px 0 20px; min-height:40px; }
.price ul { list-style:none; padding:0; margin:0 0 22px; display:grid; gap:11px; align-content:start; flex:1 1 auto; }
.price li { display:flex; gap:10px; color:var(--mist); font-size:15px; line-height:1.45; }
.price li::before { content:"✓"; color:var(--gold-text); font-weight:800; flex:none; }
.price li.muted { color:var(--mist-dim); } .price li.muted::before { content:"✕"; color:var(--mist-dim); }
.price .btn, .price .btn--ghost { width:100%; }
.price__fine { color:var(--mist-dim); font-size:13px; margin-top:12px; text-align:center; }
/* lift the pricing cards on hover (they had the .price transition but no :hover transform) */
.price:hover { transform:translateY(-6px); }
.price:not(.price--mid):hover { box-shadow:0 26px 56px -18px rgba(61,43,86,.28); }
.price--mid:hover { transform:translateY(-6px); box-shadow:0 0 0 2px var(--gold) inset, 0 46px 90px -14px rgba(232,149,59,.52), inset 0 1px 0 rgba(255,255,255,.92); }

/* trust band + differentiator */
.trust-band { display:flex; flex-wrap:wrap; gap:10px 20px; justify-content:center; max-width:980px; margin:40px auto 0;
  color:var(--mist-dim); font-size:14px; font-weight:600; }
.trust-band span { display:inline-flex; gap:7px; align-items:center; }
.diff-line { text-align:center; font-family:'Literata',serif; font-size:clamp(20px,2.6vw,26px); color:var(--mist); max-width:780px; margin:0 auto; }
.diff-line b { color:var(--gold-text); }

/* comparison matrix */
.matrix { max-width:880px; margin:0 auto; border:1px solid var(--surface-line); border-radius:var(--r-lg); overflow:hidden; }
.matrix table { width:100%; border-collapse:collapse; }
.matrix th, .matrix td { padding:13px 16px; text-align:left; border-bottom:1px solid var(--surface-line); font-size:15px; }
.matrix tbody tr:last-child th, .matrix tbody tr:last-child td { border-bottom:none; }
.matrix thead th { background:var(--night-deep); font-family:'Literata',serif; font-size:16px; color:var(--mist); text-align:center; }
.matrix thead th:first-child { text-align:left; }
.matrix thead th.hi { color:var(--gold-text); }
.matrix tbody th { font-weight:600; color:var(--mist); }
.matrix tbody td { color:var(--mist-dim); text-align:center; }
.matrix td.y { color:var(--gold-text); font-weight:800; }

/* locked-values grid */
.vgrid { display:flex; flex-wrap:wrap; gap:12px; justify-content:center; max-width:920px; margin:0 auto; }
.vgrid .chip.lock { opacity:.6; }
.vgrid .chip .pro { margin-left:8px; font-size:11px; font-weight:800; letter-spacing:.03em; color:var(--gold-text);
  background:rgba(242,103,90,.16); padding:2px 8px; border-radius:var(--r-pill); }

/* FAQ */
.faq { max-width:760px; margin:0 auto; display:grid; gap:14px; }
.faq details { background:var(--surface); border:1px solid var(--surface-line); border-radius:var(--r-md); padding:4px 22px; }
.faq summary { cursor:pointer; list-style:none; padding:18px 0; font-family:'Literata',serif; font-weight:700; font-size:18px; color:var(--mist);
  display:flex; justify-content:space-between; align-items:center; gap:16px; }
.faq summary::-webkit-details-marker { display:none; }
.faq summary::after { content:"+"; color:var(--gold-text); font-weight:800; font-size:22px; }
.faq details[open] summary::after { content:"–"; }
.faq p { color:var(--mist-dim); font-size:16px; margin:0 0 18px; }

/* prose (legal / about) */
.prose { max-width:760px; margin:0 auto; }
.prose h2 { font-size:26px; color:var(--mist); margin:38px 0 12px; }
.prose h3 { font-size:20px; color:var(--mist); margin:26px 0 8px; }
.prose p, .prose li { color:var(--mist-dim); font-size:17px; line-height:1.7; }
.prose ul { padding-left:22px; display:grid; gap:8px; }
.prose a { color:var(--gold-text); text-decoration:underline; }
.prose .muted { font-size:14px; color:var(--mist-dim); }
.lede { font-size:20px; color:var(--mist); }

/* contact cards */
.cards { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:22px; max-width:860px; margin:0 auto; }
.card { background:var(--surface); border:1px solid var(--surface-line); border-radius:var(--r-lg); padding:30px 26px; }
.card .ico { font-size:30px; }
.card h3 { font-size:19px; margin:12px 0 6px; color:var(--mist); }
.card p { color:var(--mist-dim); font-size:16px; margin:0 0 10px; }
.card a { color:var(--gold-text); font-weight:700; }

/* cta band — dark night teaser, matches the app interior */
.cta { background:linear-gradient(140deg,#1E1836 0%,#2A2350 55%,#1C2148 100%); border:none; color:#fff;
  border-radius:40px; text-align:center; padding:68px 32px; margin:0 24px;
  box-shadow:0 28px 60px rgba(30,24,54,.4), inset 0 1px 0 rgba(255,255,255,.08); position:relative; overflow:hidden; }
.cta::before { content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(70% 70% at 50% 0%, rgba(232,149,59,.18) 0%, transparent 60%); }
.cta h2 { color:#fff; font-size:clamp(26px,3.4vw,40px); position:relative; z-index:1; }
.cta p { color:rgba(237,233,251,.82); font-size:19px; margin:14px auto 28px; max-width:48ch; position:relative; z-index:1; }
.cta .btn { background:var(--gold); color:#fff; box-shadow:0 10px 28px rgba(232,149,59,.42); position:relative; z-index:1; }
.cta .btn:hover { box-shadow:0 16px 38px rgba(232,149,59,.60); }
.cta .form__note { color:rgba(237,233,251,.6); position:relative; z-index:1; }

/* footer */
.foot { border-top:1px solid var(--surface-line); padding:60px 0 44px; background:#1E1836; color:rgba(237,233,251,.8); }
.foot .brand { color:rgba(237,233,251,.9); }
.foot__brand p { color:rgba(237,233,251,.55); }
.foot__col .foot__h { color:rgba(237,233,251,.4); }
.foot__col a { color:rgba(237,233,251,.75); }
.foot__col a:hover { color:var(--gold); }
.foot__bar { color:rgba(237,233,251,.4); border-color:rgba(237,233,251,.1); }
.foot__social a { color:rgba(237,233,251,.6); }
.foot__social a:hover { color:var(--gold); }
.foot__social svg { color:var(--gold); }
.foot__grid { display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:32px; }
.foot__brand p { color:rgba(237,233,251,.68); font-size:15px; max-width:30ch; margin:14px 0 0; }
.foot__col h4 { font-family:'Manrope'; font-weight:800; font-size:13px; letter-spacing:.08em; text-transform:uppercase;
  color:rgba(237,233,251,.55); margin:0 0 14px; }
.foot__col a { display:block; color:rgba(237,233,251,.88); font-size:16px; margin-bottom:10px; }
.foot__col a:hover { color:var(--gold); }
.foot__social { display:flex; flex-direction:column; gap:9px; margin-top:16px; }
.foot__social a { display:inline-flex; align-items:center; gap:8px; width:max-content; color:rgba(237,233,251,.72); font-size:14px; font-weight:700; transition:color .2s var(--ease); }
.foot__social a:hover { color:var(--gold); }
.foot__social svg { color:var(--gold-soft); flex:none; }

/* contact page */
.contact-grid { display:grid; grid-template-columns:1fr 1fr; gap:22px; }
.contact-card { background:var(--surface); border:1px solid var(--surface-line); border-radius:var(--r-lg);
  padding:34px 30px; box-shadow:var(--shadow-sm), inset 0 1px 0 rgba(255,255,255,.9); display:flex; flex-direction:column; }
.contact-card .ico2 { width:60px; height:60px; border-radius:18px; display:grid; place-items:center; font-size:28px; margin-bottom:18px; color:#fff;
  background:radial-gradient(120% 90% at 30% 20%, #FFD8A8, #F4946A); }
.contact-card--ig .ico2 { background:linear-gradient(135deg,var(--grape),var(--gold)); }
.contact-card .lbl { font-family:'Manrope'; font-weight:800; font-size:13px; letter-spacing:.12em; text-transform:uppercase; color:var(--mist-dim); margin:0 0 6px; }
.contact-card .val { font-family:'Literata',serif; font-size:25px; color:var(--ink); margin:0 0 10px; word-break:break-word; line-height:1.2; }
.contact-card p { color:var(--mist-dim); font-size:16px; margin:0 0 22px; }
.contact-card .btn { margin-top:auto; }
.topics { display:grid; grid-template-columns:repeat(auto-fit,minmax(195px,1fr)); gap:14px; }
.topic { background:var(--surface); border:1px solid var(--surface-line); border-radius:var(--r-md); padding:18px 20px; box-shadow:var(--shadow-sm); }
.topic b { display:block; color:var(--ink); margin-bottom:4px; font-family:'Manrope'; font-weight:800; }
.topic span { color:var(--mist-dim); font-size:14px; line-height:1.45; }
.signoff { text-align:center; max-width:46ch; margin:0 auto; color:var(--mist-dim); }
.signoff b { color:var(--ink); }

/* a11y utility + footer label (replaces skipped-level <h4>) */
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.foot__col .foot__h { font-family:'Manrope'; font-weight:800; font-size:13px; letter-spacing:.08em; text-transform:uppercase; color:rgba(237,233,251,.55); margin:0 0 14px; }

/* sample story — a real finished story, the trust-builder */
.story-demo { background:linear-gradient(180deg,#fff 0%,#FFF9F3 100%); border:1px solid var(--surface-line); border-radius:var(--r-lg); padding:38px 36px 32px;
  box-shadow:var(--shadow), inset 0 1px 0 rgba(255,255,255,.98); max-width:980px; margin:0 auto; }
.story-demo__head { text-align:center; margin-bottom:26px; }
.story-demo__badge { display:inline-block; font-weight:800; font-size:13px; letter-spacing:.04em; color:var(--gold-text);
  background:rgba(242,103,90,.12); padding:6px 14px; border-radius:var(--r-pill); }
.story-demo__title { font-family:'Literata',serif; font-size:clamp(22px,3vw,30px); color:var(--ink); margin:12px 0 4px; }
.story-demo__by { font-family:'Caveat',cursive; font-size:20px; color:var(--gold-deep); }
.story-demo__panels { display:grid; grid-template-columns:repeat(5,1fr); gap:14px; }
.panel { margin:0; }
.panel__art { aspect-ratio:1/1; border-radius:18px; display:grid; place-items:center; font-size:0;
  background:radial-gradient(120% 90% at 30% 20%, #FFE3D3, #EAD8FB); box-shadow:inset 0 0 0 1px rgba(255,255,255,.5); position:relative; overflow:hidden; }
.panel__art::before { display:none; }
.story-demo__panels .panel:nth-child(1) .panel__art { background:url('./p1.png') center/cover no-repeat; }
.story-demo__panels .panel:nth-child(2) .panel__art { background:url('./p2.png') center/cover no-repeat; }
.story-demo__panels .panel:nth-child(3) .panel__art { background:url('./p3.png') center/cover no-repeat; }
.story-demo__panels .panel:nth-child(4) .panel__art { background:url('./p4.png') center/cover no-repeat; }
.story-demo__panels .panel:nth-child(5) .panel__art { background:url('./p5.png') center/cover no-repeat; }
.panel__art .ic { font-size:30px; color:var(--gold-deep); }
.panel figcaption { font-family:'Literata',serif; font-size:13.5px; line-height:1.45; color:var(--mist-dim); margin-top:10px; }
.panel b { color:var(--ink); }
.story-demo__foot { display:flex; flex-wrap:wrap; gap:14px; align-items:center; justify-content:center; margin-top:26px;
  padding-top:22px; border-top:1px solid var(--surface-line); }
.story-demo__voice { display:inline-flex; align-items:center; gap:8px; color:var(--mist-dim); font-size:14px; font-weight:700; }
.story-demo__voice .dot { width:30px; height:30px; border-radius:50%; background:var(--gold); color:#fff; display:grid; place-items:center; font-size:13px; }
/* live demo: real audio controls (play/pause keeps position, restart starts over) */
.demo-listen { border:none; background:transparent; font:inherit; cursor:pointer; }
.demo-listen.is-playing .dot { background:var(--gold-deep); }
.demo-restart { border:1px solid var(--surface-line); background:#fff; color:var(--mist-dim); font-family:'Manrope'; font-weight:700;
  font-size:14px; padding:9px 16px; border-radius:var(--r-pill); cursor:pointer; transition:color .2s var(--ease), border-color .2s var(--ease); }
.demo-restart:hover { color:var(--gold-text); border-color:var(--gold); }
.ic-pause{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Crect x='6' y='5' width='4' height='14' rx='1'/%3E%3Crect x='14' y='5' width='4' height='14' rx='1'/%3E%3C/svg%3E")}
@media (max-width:780px){ .story-demo__panels{ grid-auto-flow:column; grid-template-columns:none; grid-auto-columns:60%; overflow-x:auto; scroll-snap-type:x mandatory; padding-bottom:8px; } .panel{ scroll-snap-align:start; } }
@media (max-width:760px){ .contact-grid{ grid-template-columns:1fr; } }
.foot__bar { display:flex; justify-content:space-between; color:rgba(237,233,251,.5); font-size:14px;
  margin-top:40px; padding-top:22px; border-top:1px solid rgba(237,233,251,.15); }

/* reveal — progressive enhancement: hidden ONLY when JS is on */
.reveal { transition:opacity .6s var(--ease), transform .6s var(--ease); }
.js .reveal { opacity:0; transform:translateY(16px); }
.js .reveal.in { opacity:1; transform:none; }

@keyframes float { 0%,100%{transform:rotate(2deg) translateY(0);} 50%{transform:rotate(2deg) translateY(-12px);} }

@media (max-width:920px){ .nav__links{ display:none; } }
@media (max-width:860px){
  .hero__grid{grid-template-columns:1fr; gap:36px; padding:36px 0 52px;}
  .phone{order:-1; transform:none; animation:none;}
  .steps,.features{grid-template-columns:1fr;}
  .prices{grid-template-columns:minmax(0,460px);}
  .price--mid{margin-top:0; padding:36px 30px;}
  .foot__grid{grid-template-columns:1fr 1fr; gap:28px;}
}
@media (max-width:520px){ .foot__grid{grid-template-columns:1fr;} .nav__signin{display:none;} }
/* ── icon system: clean line icons via CSS mask (replaces emoji) ── */
.ic { display:inline-block; width:1em; height:1em; flex:none; background:currentColor; vertical-align:-.14em;
  -webkit-mask:var(--i) center/contain no-repeat; mask:var(--i) center/contain no-repeat; }
.ic-target{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Ccircle cx='12' cy='12' r='4.5'/%3E%3Ccircle cx='12' cy='12' r='1'/%3E%3C/svg%3E")}
.ic-mic{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='9' y='2.5' width='6' height='11' rx='3'/%3E%3Cpath d='M5 11a7 7 0 0 0 14 0'/%3E%3Cpath d='M12 18v3'/%3E%3C/svg%3E")}
.ic-star{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3.5l2.5 5.4 5.9.7-4.4 4 1.2 5.8L12 16.6 6.8 19.4 8 13.6 3.6 9.6l5.9-.7z'/%3E%3C/svg%3E")}
.ic-pen{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 20h4L19 9l-4-4L4 16z'/%3E%3Cpath d='M13.5 6.5l4 4'/%3E%3C/svg%3E")}
.ic-globe{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M3 12h18'/%3E%3Cpath d='M12 3a15 15 0 0 1 0 18 15 15 0 0 1 0-18z'/%3E%3C/svg%3E")}
.ic-shield{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l7 3v5c0 4.8-3 8-7 10-4-2-7-5.2-7-10V6z'/%3E%3Cpath d='M9 12l2 2 4-4'/%3E%3C/svg%3E")}
.ic-heart{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20S4 14.5 4 9a3.6 3.6 0 0 1 8-2.3A3.6 3.6 0 0 1 20 9c0 5.5-8 11-8 11z'/%3E%3C/svg%3E")}
.ic-mail{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2.5'/%3E%3Cpath d='M3.5 7l8.5 5.5L20.5 7'/%3E%3C/svg%3E")}
.ic-book{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 5v15'/%3E%3Cpath d='M12 5C10 3.7 7.5 3.5 4 4v14c3.5-.5 6 0 8 1.2 2-1.2 4.5-1.7 8-1.2V4c-3.5-.5-6-.3-8 1z'/%3E%3C/svg%3E")}
.ic-moon{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.5 14.5A8.5 8.5 0 1 1 10 3.5a6.6 6.6 0 0 0 10.5 11z'/%3E%3C/svg%3E")}
.ic-spark{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3c.6 4.6 1.4 5.4 6 6-4.6.6-5.4 1.4-6 6-.6-4.6-1.4-5.4-6-6 4.6-.6 5.4-1.4 6-6z'/%3E%3C/svg%3E")}
.ic-wave{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 9v6'/%3E%3Cpath d='M11 5.5v13'/%3E%3Cpath d='M15 8.5v7'/%3E%3Cpath d='M19 11v2'/%3E%3Cpath d='M3 11v2'/%3E%3C/svg%3E")}
.ic-play{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='M8 5.5v13l11-6.5z'/%3E%3C/svg%3E")}

/* ── floating accent orbs (warm, on cream they read; behind hero content) ── */
.orbs{ position:absolute; inset:0; z-index:0; pointer-events:none; overflow:hidden; }
.orbs i{ position:absolute; border-radius:50%; filter:blur(1px); opacity:.5; animation:drift 18s ease-in-out infinite; }
.orbs i:nth-child(1){ width:10px;height:10px; left:12%; top:30%; background:var(--gold-soft); animation-duration:20s; }
.orbs i:nth-child(2){ width:7px;height:7px; left:30%; top:62%; background:var(--gold); animation-duration:24s; animation-delay:-4s; }
.orbs i:nth-child(3){ width:9px;height:9px; left:78%; top:24%; background:var(--grape); opacity:.4; animation-duration:22s; animation-delay:-8s; }
.orbs i:nth-child(4){ width:6px;height:6px; left:62%; top:70%; background:var(--gold-soft); animation-duration:26s; animation-delay:-2s; }
.orbs i:nth-child(5){ width:8px;height:8px; left:46%; top:18%; background:var(--gold); opacity:.35; animation-duration:19s; animation-delay:-10s; }
@keyframes drift{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-26px); } }

/* ── flow diagram (How it works) ── */
.flow{ display:grid; grid-template-columns:1fr auto 1fr auto 1fr; align-items:start; gap:0; max-width:920px; margin:0 auto; }
.flow-step{ text-align:center; padding:0 14px; }
.flow-step__node{ width:86px; height:86px; margin:0 auto 20px; border-radius:26px; display:grid; place-items:center;
  background:linear-gradient(160deg,#fff 0%,#FFF6EE 100%); border:1px solid var(--surface-line);
  box-shadow:var(--shadow-sm), 0 0 0 1px rgba(255,255,255,.7) inset;
  position:relative; color:var(--gold-text); font-size:34px; }
.flow-step__n{ position:absolute; top:-11px; right:-11px; width:28px; height:28px; border-radius:50%; background:var(--gold); color:#fff;
  font-family:'Manrope'; font-weight:800; font-size:13px; display:grid; place-items:center; box-shadow:0 6px 16px rgba(232,149,59,.45); }
.flow-step h3{ font-size:19px; margin:0 0 7px; color:var(--ink); font-weight:700; }
.flow-step p{ font-size:15.5px; color:var(--mist-dim); margin:0; max-width:24ch; margin-inline:auto; line-height:1.5; }
.flow-arrow{ align-self:start; margin-top:42px; height:2px; min-width:40px; background:linear-gradient(90deg,var(--gold),var(--grape)); position:relative;
  transform:scaleX(0); transform-origin:left; transition:transform .8s var(--ease) .2s; }
.flow.in .flow-arrow{ transform:scaleX(1); }
.flow-arrow::after{ content:""; position:absolute; right:-1px; top:50%; width:9px; height:9px; border-top:2px solid var(--grape); border-right:2px solid var(--grape); transform:translateY(-50%) rotate(45deg); }
@media (max-width:760px){ .flow{ grid-template-columns:1fr; gap:8px; } .flow-arrow{ width:2px; min-width:0; height:34px; margin:4px auto; transform:scaleY(0); transform-origin:top; background:linear-gradient(180deg,var(--gold),var(--grape)); } .flow.in .flow-arrow{ transform:scaleY(1);} .flow-arrow::after{ right:50%; top:auto; bottom:-1px; transform:translateX(50%) rotate(135deg);} }

/* ── values constellation / orbit diagram ── */
.constel{ position:relative; width:min(600px,92vw); aspect-ratio:1/1; margin:18px auto 0; }
.constel__center{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); z-index:2; text-align:center;
  width:128px; height:128px; border-radius:50%; display:grid; place-content:center; gap:2px;
  background:radial-gradient(circle at 38% 32%, var(--gold-soft), var(--gold-deep)); color:#fff; box-shadow:0 14px 34px rgba(210,145,61,.45), inset 0 0 0 4px rgba(255,255,255,.35); }
.constel__center b{ font-family:'Literata',serif; font-size:18px; line-height:1.1; }
.constel__center span{ font-size:11px; opacity:.9; letter-spacing:.04em; text-transform:uppercase; }
.constel__node{ position:absolute; left:50%; top:50%; display:inline-flex; align-items:center; gap:6px; white-space:nowrap;
  background:var(--surface); border:1px solid var(--surface-line); border-radius:var(--r-pill); padding:6px 12px;
  font-family:'Manrope'; font-weight:700; font-size:12.5px; color:var(--ink); box-shadow:var(--shadow-sm); z-index:2; }
.constel__node .ic{ color:var(--gold-text); font-size:13px; }
.constel__line{ position:absolute; left:50%; top:50%; height:1px; background:linear-gradient(90deg,rgba(242,103,90,.5),rgba(242,103,90,0)); transform-origin:left center; z-index:1; }
/* On phones the absolute orbit can't fit 20 labels — fall back to a centered, wrapped
   pill cloud with the child banner on top. Reads cleanly, nothing clipped. */
@media (max-width:620px){
  .constel{ width:auto; aspect-ratio:auto; margin:18px 0 0; display:flex; flex-wrap:wrap; gap:8px; justify-content:center; }
  .constel__center{ position:static; transform:none; width:100%; height:auto; aspect-ratio:auto; border-radius:18px; padding:14px 16px; margin-bottom:6px; }
  .constel__node{ position:static; transform:none !important; font-size:11px; padding:6px 11px; }
  .constel__node .ic{ display:none; }
}

/* ── Accessibility & UX (ui-ux-pro-max checklist) ── */
[role="button"], button { cursor:pointer; }
.vtab, .vchip, .toggle button, .faq summary, .player__play, .scene__float { cursor:pointer; }
a, [tabindex="0"] { cursor:pointer; }
/* 44×44 touch targets for small interactive elements */
.vtab, .vchip { min-height:44px; display:inline-flex; align-items:center; }
/* ensure images don't cause layout shift */
img { display:block; }

/* QR / app download hint strip */
.qr-strip { display:flex; align-items:center; gap:16px; margin-top:22px; padding:14px 18px;
  background:rgba(232,149,59,.1); border:1px solid rgba(232,149,59,.22); border-radius:var(--r-lg); max-width:360px; }
.qr-strip img { width:72px; height:72px; border-radius:10px; flex:none; }
.qr-strip p { margin:0; font-size:14px; color:var(--mist-dim); line-height:1.45; }
.qr-strip strong { display:block; color:var(--gold-text); font-weight:800; margin-bottom:2px; }

/* ── mobile fixes (≤ 640px) ── */
@media (max-width:640px) {
  /* scene: kill the square aspect-ratio so it doesn't swallow the full viewport */
  .scene { max-width:100%; height:220px; aspect-ratio:unset; border-radius:24px; }
  .scene__card { bottom:18px; }
  /* hero text tighter */
  .ehero h1 { font-size:clamp(28px,8vw,38px); margin:12px 0 10px; }
  .ehero .lead { font-size:16px; margin:0 0 18px; }
  .ehero__cta { flex-direction:column; }
  .ehero__cta .btn, .ehero__cta .btn--ghost { width:100%; text-align:center; justify-content:center; }
  /* stats: 2 columns instead of 3 */
  .stats { grid-template-columns:1fr 1fr; gap:10px; max-width:none; }
  /* QR strip: pointless on a phone that IS the phone */
  .qr-strip { display:none; }
  /* prices: full-width cards */
  .prices { grid-template-columns:1fr; }
  /* trust band wrap */
  .trust-band { gap:8px 14px; font-size:14px; }
}

/* ── pricing page: make it fit on phones ── */
@media (max-width:640px){
  /* the 4-column comparison table can't fit 360px — let it scroll inside its card
     instead of overflowing/squishing the whole page */
  .matrix { overflow-x:auto; -webkit-overflow-scrolling:touch; }
  .matrix table { min-width:480px; }
  .matrix th, .matrix td { padding:10px 12px; font-size:13px; }
  .matrix thead th { font-size:14px; }
  /* tighter page head + smaller intro so it doesn't dominate the fold */
  .page-head { padding:52px 0 28px; }
  .page-head p { font-size:16px; }
  /* currency/period toggles: shrink so all three buttons fit one row */
  .toggle button { font-size:13px; padding:9px 12px; }
  .toggle .save { font-size:10px; padding-left:4px; }
  /* founding-price banner: smaller on phones */
  .founding { font-size:14px; padding:14px 16px; }
}
@media (max-width:380px){
  .toggle button { font-size:12px; padding:8px 9px; }
  .toggle .save { display:none; } /* drop the −20%/−50% badge text on tiny screens */
  .price__amt { font-size:34px; }
}

/* ── nav: fix overflow at ≤ 480px ── */
@media (max-width:480px) {
  .nav__row { gap:8px; }
  /* hide language switcher — user can find it on-page */
  .nav .langs { display:none; }
  /* shrink CTA button so it fits */
  .nav .btn--sm { font-size:13px; padding:9px 14px; white-space:nowrap; }
  /* hide sign-in text link to save space */
  .nav__signin { display:none; }
}

@media (prefers-reduced-motion:reduce){ *{animation:none !important; scroll-behavior:auto;} .reveal{transition:none;} }


/* Hero illustration (replaces the CSS storybook-card mockup on the home). */
.scene--photo{ aspect-ratio:auto; height:auto; min-height:0; background:none; display:flex; align-items:center; justify-content:center; padding:0; }
.scene--photo img{ width:100%; max-width:340px; aspect-ratio:686 / 726; object-fit:cover; object-position:center; border-radius:28px;
  box-shadow:0 32px 64px rgba(61,43,86,.22), 0 8px 18px rgba(61,43,86,.10); }
@media (max-width:860px){ .scene--photo{ order:-1; } .scene--photo img{ max-width:300px; } }

/* thin underline beneath the accent phrase in the hero headline */
.ehero h1 .u-line{ text-decoration:underline; text-decoration-color:var(--gold); text-decoration-thickness:2px; text-underline-offset:9px; text-decoration-skip-ink:none; }