/* LANDING PAGE DESIGN SYSTEM
 *
 * Extracted verbatim from the approved reference build (temp/ handoff) so the
 * shipped pages match the design that was signed off, rather than an
 * approximation of it. Font URLs repointed to /assets/fonts (self-hosted,
 * SIL OFL — see assets/fonts/OFL-LICENSE.txt).
 *
 * Shared by every page in scripts/landing/, so it caches once across the set.
 * Page-specific rules belong in that page module, not here.
 */

/* Self-hosted fonts — SIL Open Font License 1.1. Files in ./fonts/ */
@font-face{font-family:'Instrument Serif';font-style:normal;font-weight:400;font-display:swap;src:url('/assets/fonts/instrument-serif-latin-400-normal.woff2') format('woff2')}
@font-face{font-family:'Instrument Serif';font-style:italic;font-weight:400;font-display:swap;src:url('/assets/fonts/instrument-serif-latin-400-italic.woff2') format('woff2')}
@font-face{font-family:'Manrope';font-style:normal;font-weight:300;font-display:swap;src:url('/assets/fonts/manrope-latin-300-normal.woff2') format('woff2')}
@font-face{font-family:'Manrope';font-style:normal;font-weight:400;font-display:swap;src:url('/assets/fonts/manrope-latin-400-normal.woff2') format('woff2')}
@font-face{font-family:'Manrope';font-style:normal;font-weight:500;font-display:swap;src:url('/assets/fonts/manrope-latin-500-normal.woff2') format('woff2')}
@font-face{font-family:'Manrope';font-style:normal;font-weight:600;font-display:swap;src:url('/assets/fonts/manrope-latin-600-normal.woff2') format('woff2')}
@font-face{font-family:'Outfit';font-style:normal;font-weight:300;font-display:swap;src:url('/assets/fonts/outfit-latin-300-normal.woff2') format('woff2')}
@font-face{font-family:'Outfit';font-style:normal;font-weight:500;font-display:swap;src:url('/assets/fonts/outfit-latin-500-normal.woff2') format('woff2')}
@font-face{font-family:'Outfit';font-style:normal;font-weight:600;font-display:swap;src:url('/assets/fonts/outfit-latin-600-normal.woff2') format('woff2')}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:500;font-display:swap;src:url('/assets/fonts/jetbrains-mono-latin-500-normal.woff2') format('woff2')}
@font-face{font-family:'Noto Serif Devanagari';font-style:normal;font-weight:400;font-display:swap;src:url('/assets/fonts/noto-serif-devanagari-devanagari-400-normal.woff2') format('woff2')}

:root{
  --void:#06081A;--deep:#0A0E24;--slate:#111634;
  --gold:#C9A063;--gold-lt:#F0DAAE;--gold-dp:#8B6D3A;
  --lilac:#A99BD6;--mist:#EDEBF6;--dim:#9AA0C0;--faint:#767DA3;
  --mist-rgb:237,235,246;--gold-rgb:201,160,99;--gold-lt-rgb:240,218,174;
  --line:rgba(var(--mist-rgb),.09);
  --serif:"Instrument Serif",Georgia,serif;--sans:Manrope,system-ui,sans-serif;
  --ui:Outfit,system-ui,sans-serif;--mono:"JetBrains Mono",monospace;--dev:"Noto Serif Devanagari",serif;
  /* in-app palettes */
  --a-blue:#0A84FF;--a-violet:#A855F7;--a-orange:#FF9F0A;--a-green:#30D158;--a-red:#FF453A;--a-gold:#E8C070;
  --b-txt2:#A7A1C6;--b-txt3:#6B6690;--b-gold:#E3C377;--b-fill:#E8CE7A;
  --b-cream:#F7F1E2;--b-amber:#C08F5E;--b-violet:#4E3F96;--b-indigo:#2B2557;
  --ease:cubic-bezier(.22,1,.36,1);
}
*{box-sizing:border-box;margin:0;padding:0}
/* NO overflow-x here: it makes <html> a scroll container and silently
   breaks position:sticky on .seqPhone. The .mesh inset fix below removes
   the real cause of horizontal scroll. */
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{display:block;background:var(--void);color:var(--mist);font-family:var(--sans);font-size:16.5px;font-weight:300;
  line-height:1.68;-webkit-font-smoothing:antialiased;overflow-x:hidden}
h1,h2,h3,.sf{font-family:var(--serif);font-weight:400;line-height:1.08;letter-spacing:-.015em}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--gold);outline-offset:4px;border-radius:5px}
::selection{background:rgba(var(--gold-rgb),.32)}
.wrap{max-width:1160px;margin:0 auto;padding:0 28px}
section{position:relative;padding:140px 0}

/* atmosphere */
/* inset is vertical-only: the original -25% on all sides pushed the mesh
   75px past the viewport on a 390px screen and created horizontal scroll. */
.mesh{position:fixed;inset:-25% 0;z-index:0;pointer-events:none;opacity:.85;
  background:radial-gradient(38% 34% at 74% 12%,rgba(108,95,160,.42),transparent 68%),
             radial-gradient(32% 30% at 18% 34%,rgba(139,109,58,.24),transparent 68%),
             radial-gradient(40% 36% at 60% 78%,rgba(56,48,110,.36),transparent 70%);
  filter:blur(24px);animation:drift 34s ease-in-out infinite alternate}
@keyframes drift{to{transform:translate3d(-3%,3%,0) scale(1.12)}}
#sky{position:fixed;inset:0;z-index:0;pointer-events:none}
.content{position:relative;z-index:2}

#prog{position:fixed;top:0;left:0;height:1.5px;width:0;z-index:60;
  background:linear-gradient(90deg,var(--gold-dp),var(--gold-lt));box-shadow:0 0 12px rgba(var(--gold-rgb),.6)}
/* Scoped to #nav, NOT the bare element: the shared site footer also
   contains a <nav>, which was inheriting position:fixed;top:0 and
   pinning the footer links across the top of the page. */
#nav{position:fixed;top:0;left:0;right:0;z-index:50;padding:20px 0;transition:.5s var(--ease)}
#nav.stuck{background:rgba(6,8,26,.74);backdrop-filter:blur(20px) saturate(140%);border-bottom:1px solid var(--line);padding:13px 0}
.nrow{display:flex;align-items:center;justify-content:space-between;gap:24px}
.brand{display:flex;align-items:center;gap:11px;font-family:var(--serif);font-size:19px}
.brand .g{width:29px;height:29px;display:grid;place-items:center;border-radius:9px;
  background:linear-gradient(140deg,var(--gold),var(--gold-dp));color:var(--void);font-family:var(--dev);font-size:16px;padding-bottom:2px}
.nlinks{display:flex;gap:32px;font-size:14px;color:var(--dim);font-weight:400}
.nlinks a{position:relative;padding:3px 0}
.nlinks a::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:1px;background:var(--gold);transition:right .35s var(--ease)}
.nlinks a:hover{color:var(--mist)}.nlinks a:hover::after{right:0}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;border:0;cursor:pointer;
  font-family:var(--sans);font-size:14.5px;font-weight:600;padding:15px 30px;border-radius:100px;
  position:relative;overflow:hidden;transition:transform .4s var(--ease),box-shadow .4s var(--ease)}
.b-gold{background:linear-gradient(135deg,var(--gold-lt),var(--gold) 52%,var(--gold-dp));color:#22190A;
  box-shadow:0 10px 34px -10px rgba(var(--gold-rgb),.72),inset 0 1px 0 rgba(255,255,255,.35)}
.b-gold:hover{transform:translateY(-2px);box-shadow:0 18px 44px -12px rgba(var(--gold-rgb),.9)}
.b-gold::after{content:"";position:absolute;top:0;left:-120%;width:55%;height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.42),transparent);transition:left .8s var(--ease)}
.b-gold:hover::after{left:150%}
.b-glass{background:rgba(var(--mist-rgb),.05);color:var(--mist);border:1px solid var(--line);backdrop-filter:blur(10px)}
.b-glass:hover{background:rgba(var(--mist-rgb),.09);border-color:rgba(var(--gold-rgb),.45);transform:translateY(-2px)}
.b-sm{padding:11px 21px;font-size:13.5px}
.tlink{font-size:14px;color:var(--dim);border-bottom:1px solid rgba(154,160,192,.28);padding-bottom:3px;transition:.3s}
.tlink:hover{color:var(--gold-lt);border-color:var(--gold)}

.eyebrow{font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--gold);font-weight:600;
  display:flex;align-items:center;gap:11px;margin-bottom:22px}
.eyebrow::before{content:"";width:26px;height:1px;background:linear-gradient(90deg,var(--gold),transparent)}
.eyebrow.ctr{justify-content:center}
.eyebrow.ctr::after{content:"";width:26px;height:1px;background:linear-gradient(270deg,var(--gold),transparent)}
h2{font-size:clamp(35px,4.6vw,58px)}
.lede{color:var(--dim);font-size:17.5px;max-width:560px}
.shead{text-align:center;margin-bottom:70px}
.shead .lede{margin:20px auto 0}
.ital{font-style:italic;color:var(--gold-lt)}
.rv{opacity:0;transform:translateY(30px);transition:opacity 1s var(--ease),transform 1s var(--ease)}
.rv.in{opacity:1;transform:none}

.card{position:relative;border-radius:22px;background:linear-gradient(165deg,rgba(var(--mist-rgb),.055),rgba(var(--mist-rgb),.018));
  backdrop-filter:blur(14px);transition:transform .5s var(--ease),background .5s}
.card::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;pointer-events:none;
  background:linear-gradient(160deg,rgba(var(--mist-rgb),.22),rgba(var(--mist-rgb),.04) 42%,rgba(var(--gold-rgb),.16));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;transition:background .5s}
.card:hover{transform:translateY(-5px);background:linear-gradient(165deg,rgba(var(--mist-rgb),.085),rgba(var(--mist-rgb),.03))}
.card:hover::before{background:linear-gradient(160deg,rgba(var(--gold-lt-rgb),.55),rgba(var(--mist-rgb),.06) 48%,rgba(var(--gold-rgb),.3))}

/* ══ HERO ══ */
.hero{min-height:calc(100svh - 76px);display:flex;align-items:center;padding:70px 0 80px}
.hero h1{font-family:var(--serif);font-weight:400;font-size:clamp(46px,6.4vw,84px);line-height:1.08;letter-spacing:-.025em;color:inherit;margin:0}

.hgrid{display:grid;grid-template-columns:1.06fr .94fr;gap:60px;align-items:center;width:100%}
/* Atmosphere, not a focal point. At 170px / .42 opacity with a hard terminator
   the moon read as a second subject competing with the headline; it is now
   smaller, softer-edged and further into the corner so it sits behind the
   content rather than beside it. */
.moon{position:absolute;top:9%;right:4%;width:104px;height:104px;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle at 38% 34%,rgba(255,248,232,.72),rgba(232,211,164,.4) 46%,rgba(185,154,98,.16) 72%,transparent 84%);
  box-shadow:0 0 90px 26px rgba(var(--gold-lt-rgb),.06);
  filter:blur(.4px);opacity:.2;animation:float 22s ease-in-out infinite}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-22px)}}
.omwm{position:absolute;left:-4%;bottom:-14%;font-family:var(--dev);font-size:min(46vw,540px);line-height:.8;
  color:rgba(var(--gold-rgb),.045);pointer-events:none;user-select:none}
.badge{display:inline-flex;align-items:center;gap:10px;padding:8px 8px 8px 16px;border-radius:100px;
  background:rgba(var(--mist-rgb),.05);border:1px solid var(--line);font-size:13px;color:var(--dim);
  backdrop-filter:blur(10px);margin-bottom:28px}
.badge b{background:rgba(var(--gold-rgb),.16);color:var(--gold-lt);border-radius:100px;padding:4px 12px;
  font-size:11.5px;font-weight:600;letter-spacing:.06em}
h1{font-size:clamp(46px,6.4vw,84px);letter-spacing:-.025em}
h1 span{display:block}
.hero p.lede{margin:26px 0 38px;font-size:18px}
.hcta{display:flex;align-items:center;gap:26px;flex-wrap:wrap}
.trust{margin-top:42px;padding-top:26px;border-top:1px solid var(--line);display:flex;gap:38px;flex-wrap:wrap}
.trust div b{display:block;font-family:var(--serif);font-size:27px;color:var(--gold-lt);line-height:1}
.trust div span{font-size:12px;color:var(--faint);letter-spacing:.09em;text-transform:uppercase}

/* ══ PHONE ══ */
.phone{width:312px;flex:none;border-radius:50px;padding:10px;position:relative;
  background:linear-gradient(155deg,#3A3A40,#0B0B0D 42%,#2A2A30);
  box-shadow:0 70px 120px -34px rgba(0,0,0,.95),0 0 0 1px rgba(255,255,255,.1),inset 0 1px 0 rgba(255,255,255,.22)}
.phone.drift{animation:hover 20s ease-in-out infinite}
@keyframes hover{0%,100%{transform:translateY(0) rotateY(-3deg)}50%{transform:translateY(-16px) rotateY(3deg)}}
.glass{position:relative;border-radius:41px;overflow:hidden;height:632px;font-family:var(--ui);background:#000}
.island{position:absolute;top:11px;left:50%;transform:translateX(-50%);width:90px;height:25px;background:#000;border-radius:100px;z-index:40}
.sbar{display:flex;justify-content:space-between;align-items:center;padding:15px 22px 4px;font-size:12.5px;font-weight:600;color:#fff}
.sbar .rt{display:flex;gap:5px;align-items:center;opacity:.95}
.scr{position:absolute;inset:0;opacity:0;visibility:hidden;transform:translateX(12px) scale(.985);
  transition:opacity .6s var(--ease),transform .6s var(--ease),visibility .6s;display:flex;flex-direction:column}
.scr.on{opacity:1;visibility:visible;transform:none}
.hdr{padding:6px 20px 13px;display:flex;justify-content:space-between;align-items:flex-start;border-bottom:1px solid rgba(255,255,255,.08)}
.hdr .kicker{font-size:9.5px;letter-spacing:.22em;color:#fff;font-weight:500;opacity:.92}
.hdr h3{font-size:28px;font-weight:600;color:#fff;font-family:var(--ui);letter-spacing:-.01em;margin-top:1px}
.hdr .lft{display:flex;gap:11px;align-items:flex-start}
.burger{display:flex;flex-direction:column;gap:4px;padding-top:11px}
.burger i{width:19px;height:1.7px;background:#fff;border-radius:2px}
.pp-pill{border:1.4px solid var(--a-gold);color:var(--a-gold);border-radius:100px;padding:5px 13px;font-size:11px;font-weight:600;letter-spacing:.09em;white-space:nowrap}
.chants{font-size:11px;color:var(--a-blue);text-align:right;margin-top:5px;font-weight:500}
.body{flex:1;overflow:hidden;padding:15px 17px 0}

/* breathwork screen */
.bw{background:linear-gradient(180deg,#0B0D20,#0E1128 55%,#0A0C1E)}
.sess{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;padding:0 20px}
.orbwrap{position:relative;width:250px;height:250px;display:grid;place-items:center}
.ring-dots{position:absolute;inset:0;width:100%;height:100%}
.o{position:absolute;border-radius:50%;transition:transform var(--t,4s) cubic-bezier(.4,0,.3,1)}
.o1{width:202px;height:202px;background:radial-gradient(circle,var(--b-indigo),rgba(43,37,87,.42) 68%,transparent 74%)}
.o2{width:142px;height:142px;background:radial-gradient(circle,var(--b-violet),rgba(78,63,150,.5) 70%,transparent 76%)}
.o3{width:92px;height:92px;background:radial-gradient(circle,var(--b-amber),rgba(192,143,94,.42) 66%,transparent 74%);filter:blur(1px)}
.core{width:58px;height:58px;border-radius:50%;background:radial-gradient(circle at 40% 36%,#FFFDF6,var(--b-cream) 62%,#E4D8BC);
  box-shadow:0 0 50px 14px rgba(247,241,226,.34),0 0 110px 30px rgba(192,143,94,.2);
  transition:transform var(--t,4s) cubic-bezier(.4,0,.3,1);z-index:3}
.phase{margin-top:38px;font-size:15px;letter-spacing:.34em;color:#F1EFF9;font-weight:300}
.cnt{font-size:52px;font-weight:300;color:var(--b-gold);margin-top:8px}
.rem{font-size:12.5px;letter-spacing:.22em;color:var(--b-txt2);margin-top:12px;font-weight:200}
.hp{position:absolute;bottom:24px;left:0;right:0;display:flex;align-items:center;justify-content:center;gap:9px;font-size:12px;color:var(--b-txt2);font-weight:300}
.closeX{position:absolute;top:46px;right:18px;width:36px;height:36px;border-radius:50%;z-index:30;
  background:rgba(255,255,255,.09);display:grid;place-items:center;color:rgba(255,255,255,.72)}

/* library */
.search{background:#151517;border-radius:15px;padding:13px 16px;color:#5A5A60;font-size:13.5px;margin-bottom:13px}
.chips{display:flex;gap:7px;margin-bottom:16px;overflow:hidden}
.chip{padding:7px 15px;border-radius:100px;font-size:12.5px;background:#151517;color:#fff;white-space:nowrap;font-weight:500}
.chip.gold{border:1.3px solid var(--a-gold);color:var(--a-gold);background:transparent}
.chip.blue{background:var(--a-blue)}
.lbl{font-size:21px;font-weight:600;color:#fff;margin-bottom:12px}
.reccard{border:1px solid rgba(255,69,58,.55);background:rgba(255,69,58,.09);border-radius:18px;
  padding:15px 16px;display:flex;justify-content:space-between;align-items:center;margin-bottom:13px}
.rd{display:flex;align-items:center;gap:9px;font-size:15px;font-weight:600;color:#fff}
.blip{width:10px;height:10px;border-radius:50%;background:var(--a-red);animation:blip 1.15s ease-in-out infinite}
@keyframes blip{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.32;transform:scale(.78)}}
.tmr{font-size:26px;font-weight:600;color:#fff;margin-top:3px}
.stop{background:var(--a-red);color:#fff;border-radius:12px;padding:12px 22px;font-size:14.5px;font-weight:600}
.rlevel{display:flex;align-items:flex-end;gap:2px;height:15px;margin-top:5px}
.rlevel i{width:2px;background:var(--a-red);border-radius:2px;animation:lv 1s ease-in-out infinite;opacity:.85}
@keyframes lv{0%,100%{height:16%}50%{height:100%}}
.item{background:#111113;border:1px solid rgba(255,255,255,.08);border-radius:18px;padding:13px;display:flex;gap:12px;margin-bottom:10px}
.thumb{width:56px;height:56px;border-radius:13px;flex:none;position:relative;overflow:hidden;background:radial-gradient(circle at 50% 46%,#3A2568,#150E2C)}
.thumb svg{position:absolute;inset:0;animation:spin 60s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.item .rowt{display:flex;align-items:center;gap:7px}
.item h4{font-size:15px;font-weight:600;color:#fff;font-family:var(--ui);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.badge-g{border:1px solid rgba(48,209,88,.45);color:var(--a-green);border-radius:100px;padding:3px 8px;font-size:8px;letter-spacing:.1em;font-weight:600;white-space:nowrap}
.item .sub{font-size:11.5px;color:var(--a-blue);margin-top:3px;font-weight:500}
.item .desc{font-size:11px;color:#5A5A60;margin-top:3px;line-height:1.4}

/* player */
.art{position:relative;width:100%;aspect-ratio:1.42;border-radius:16px;overflow:hidden;
  background:radial-gradient(circle at 50% 46%,#2E1F52,#16102C 62%,#0A0714);border:1px solid rgba(10,132,255,.34)}
.art svg.petals{position:absolute;inset:0;width:100%;height:100%;animation:spin 90s linear infinite}
.halo{position:absolute;left:50%;top:47%;width:140px;height:140px;margin:-70px 0 0 -70px;border-radius:50%;
  background:radial-gradient(circle,rgba(232,192,112,.34),transparent 66%);animation:glow 5s ease-in-out infinite}
@keyframes glow{0%,100%{opacity:.55;transform:scale(.94)}50%{opacity:1;transform:scale(1.1)}}
.mic{position:absolute;left:50%;top:47%;transform:translate(-50%,-50%)}
.artbar{position:absolute;top:10px;left:10px;right:10px;display:flex;align-items:center;
  justify-content:space-between;gap:8px;z-index:4}
.browse{border:1px solid rgba(255,255,255,.22);border-radius:100px;padding:5px 12px;font-size:10.5px;
  color:#fff;font-weight:500;background:rgba(8,6,20,.5);backdrop-filter:blur(8px);white-space:nowrap}
.rec-chip{background:rgba(168,85,247,.3);border:1px solid rgba(168,85,247,.5);color:#E9D5FF;
  border-radius:100px;padding:4px 11px;font-size:8.5px;letter-spacing:.16em;font-weight:600;
  backdrop-filter:blur(8px);white-space:nowrap;flex:none}
.scrim{position:absolute;left:0;right:0;bottom:0;height:62%;pointer-events:none;z-index:2;
  background:linear-gradient(180deg,transparent,rgba(10,7,20,.5) 46%,rgba(10,7,20,.9))}
.art .ttl{position:absolute;left:15px;right:15px;bottom:42px;font-size:26px;font-weight:600;color:#fff;
  letter-spacing:-.02em;z-index:4;line-height:1.1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.art .by{position:absolute;left:15px;bottom:25px;font-size:11.5px;color:rgba(255,255,255,.78);z-index:4}
.seek{z-index:4}
.seek{position:absolute;left:15px;right:15px;bottom:7px}
.trk{height:3px;border-radius:3px;background:rgba(255,255,255,.24);position:relative}
.fil{position:absolute;left:0;top:0;bottom:0;border-radius:3px;background:var(--a-blue);width:18%}
.knob{position:absolute;top:50%;width:10px;height:10px;border-radius:50%;background:#fff;transform:translate(-50%,-50%);left:18%}
.tm{display:flex;justify-content:space-between;font-size:9.5px;color:rgba(255,255,255,.6);margin-top:4px}
.counter{text-align:center;margin:22px 0 4px}
.counter .big{font-size:50px;font-weight:600;color:var(--a-blue);line-height:1;display:inline-block;min-width:70px;text-shadow:0 0 34px rgba(10,132,255,.55)}
.counter .of{font-size:32px;color:#5A5A60;font-weight:500}
.counter .unit{font-size:9.5px;letter-spacing:.2em;color:var(--a-blue);font-weight:600;margin-left:5px}
.slim{height:2px;border-radius:2px;background:rgba(255,255,255,.13);margin:16px 28px 0;position:relative}
.slim i{position:absolute;left:0;top:-1px;height:4px;border-radius:3px;background:var(--a-blue);width:1%;
  box-shadow:0 0 10px rgba(10,132,255,.9);transition:width .5s linear}
.hint{text-align:center;font-size:12px;color:#8E8E93;margin-top:13px}
.transport{display:flex;align-items:center;justify-content:center;gap:14px;margin:18px 0 16px}
.tbtn{width:42px;height:42px;border-radius:50%;background:#1C1C1E;display:grid;place-items:center;color:var(--a-blue)}
.tbtn.fav{color:#fff;opacity:.6}
.ppb{width:72px;height:72px;border-radius:50%;background:var(--a-blue);display:grid;place-items:center;color:#fff;animation:pulse 2.6s ease-out infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(10,132,255,.55)}70%{box-shadow:0 0 0 24px rgba(10,132,255,0)}100%{box-shadow:0 0 0 0 rgba(10,132,255,0)}}
.seg{display:grid;grid-template-columns:1fr 1fr;background:#141416;border-radius:100px;padding:4px;position:relative}
.seg .th{position:absolute;top:4px;bottom:4px;left:4px;width:calc(50% - 4px);border-radius:100px;background:var(--a-blue);transition:transform .5s var(--ease)}
.seg.timer .th{transform:translateX(100%)}
.seg b{position:relative;z-index:2;padding:10px 0;text-align:center;font-size:13px;font-weight:500;color:#8E8E93;transition:color .4s}
.seg b.on{color:#fff}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:12px}
.stat{background:#111113;border:1px solid rgba(255,255,255,.08);border-radius:12px;padding:12px 5px;text-align:center}
.stat b{display:block;font-size:18px;font-weight:600;color:#fff}
.stat span{font-size:8px;letter-spacing:.13em;color:#5A5A60;font-weight:500}

/* progress */
.pcard{background:#111113;border:1px solid rgba(255,255,255,.08);border-radius:18px;padding:15px;margin-bottom:11px}
.pcard h4{font-size:14.5px;font-weight:600;color:#fff;font-family:var(--ui);margin-bottom:11px}
.tp{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:9px}
.tp span{font-size:10.5px;color:#5A5A60}
.hm{display:grid;grid-template-columns:repeat(7,1fr);gap:4.5px}
.hm i{aspect-ratio:1;border-radius:4px;background:#161618;opacity:0;transform:scale(.5)}
.hm i.in{animation:cell .5s var(--ease) forwards}
@keyframes cell{to{opacity:1;transform:none}}
.legend{display:flex;align-items:center;gap:4px;margin-top:10px;font-size:9px;color:#5A5A60}
.legend i{width:10px;height:10px;border-radius:3px}
.dash{stroke-dasharray:900;stroke-dashoffset:900}
.dash.go{animation:draw 2.4s var(--ease) forwards}
@keyframes draw{to{stroke-dashoffset:0}}
.bar{transform-origin:bottom;transform:scaleY(0)}
.bar.go{animation:grow .8s var(--ease) forwards}
@keyframes grow{to{transform:scaleY(1)}}
.split{height:14px;border-radius:100px;overflow:hidden;display:flex;background:#161618}
.split i{height:100%;width:0;transition:width 1.3s var(--ease)}
.skey{display:flex;gap:15px;margin-top:10px;font-size:12px;color:#fff;font-weight:500}
.skey span{display:flex;align-items:center;gap:6px}
.skey em{width:8px;height:8px;border-radius:50%;font-style:normal}

/* ══ SEQUENCE ══ */
.seq{display:grid;grid-template-columns:.95fr 1.05fr;gap:80px;align-items:start}
.seqPhone{position:sticky;top:110px;display:flex;justify-content:center}
.stepblk{min-height:76vh;display:flex;flex-direction:column;justify-content:center;padding:40px 0;
  opacity:.24;transition:opacity .7s var(--ease)}
.stepblk.act{opacity:1}
.stepno{display:flex;align-items:center;gap:14px;margin-bottom:20px}
.stepno .num{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;font-family:var(--mono);
  font-size:13px;color:var(--gold-lt);border:1px solid rgba(var(--gold-rgb),.36);background:rgba(var(--gold-rgb),.07);transition:.6s var(--ease)}
.stepblk.act .num{background:linear-gradient(140deg,var(--gold-lt),var(--gold));color:#22190A;border-color:transparent;
  box-shadow:0 8px 26px -8px rgba(var(--gold-rgb),.8)}
.stepno .tagline{font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--gold);font-weight:600}
.stepblk h3{font-size:clamp(29px,3.5vw,42px);margin-bottom:18px}
.stepblk p{color:var(--dim);font-size:17px;max-width:460px}
.chiprow{display:flex;gap:9px;flex-wrap:wrap;margin-top:26px}
.mini{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--gold);
  border:1px solid rgba(var(--gold-rgb),.3);background:rgba(var(--gold-rgb),.07);border-radius:100px;padding:7px 15px}
.seqRail{display:none}

/* marquee */
.mq{padding:32px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);overflow:hidden;
  -webkit-mask:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.mqt{display:flex;gap:64px;width:max-content;animation:slide 46s linear infinite}
.mqt span{font-family:var(--dev);font-size:22px;color:rgba(var(--mist-rgb),.34);white-space:nowrap;display:flex;align-items:center;gap:64px}
.mqt span::after{content:"◆";font-family:var(--sans);font-size:6px;color:var(--gold);opacity:.6}
@keyframes slide{to{transform:translateX(-50%)}}

/* problem */
.split2{display:grid;grid-template-columns:.82fr 1.18fr;gap:74px;align-items:start}
.sticky-h{position:sticky;top:120px}
.pgrid{display:grid;grid-template-columns:1fr 1fr;gap:13px}
.pcd{padding:25px 23px}
.pcd .ico{width:36px;height:36px;margin-bottom:15px;color:var(--lilac);opacity:.92}
.pcd b{display:block;font-size:15.5px;font-weight:600;margin-bottom:5px}
.pcd p{font-size:13.5px;color:var(--faint);line-height:1.55}

/* pacer */
.pacer{text-align:center}
.mala{position:relative;width:min(400px,84vw);aspect-ratio:1;margin:48px auto 0}
.mala svg{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg)}
.bead{fill:rgba(var(--mist-rgb),.13);transition:fill .5s var(--ease)}
.bead.lit{fill:var(--gold-lt);filter:drop-shadow(0 0 5px rgba(var(--gold-lt-rgb),.9))}
.orbP{position:absolute;left:50%;top:50%;width:146px;height:146px;margin:-73px 0 0 -73px;border-radius:50%;
  display:grid;place-items:center;
  background:radial-gradient(circle at 38% 33%,rgba(255,248,232,.96),rgba(var(--gold-rgb),.5) 52%,rgba(var(--gold-rgb),0) 74%);
  animation:breathe 10s var(--ease) infinite}
.orbP::after{content:"";position:absolute;inset:-14px;border-radius:50%;border:1px solid rgba(var(--gold-lt-rgb),.24)}
@keyframes breathe{0%{transform:scale(.82)}40%{transform:scale(1.24)}52%{transform:scale(1.24)}100%{transform:scale(.82)}}
#syl{font-family:var(--serif);font-size:35px;color:#22190A}
#cue{font-family:var(--mono);font-size:11.5px;letter-spacing:.26em;text-transform:uppercase;color:var(--gold);margin-top:36px;min-height:18px}
#rounds{font-size:13px;color:var(--faint);margin-top:9px;font-family:var(--mono)}

/* compare */
.cmp{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.cmp .card{padding:36px 32px}
.cmp h3{font-size:24px;margin-bottom:6px}
.cmp .sub{font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--faint);margin-bottom:24px;font-weight:500}
.cmp ul{list-style:none}
.cmp li{display:flex;gap:14px;padding:12px 0;font-size:15.5px;border-top:1px solid var(--line);align-items:center}
.cmp li:first-child{border-top:0}
.dot{flex:0 0 20px;height:20px;border-radius:50%;display:grid;place-items:center;font-size:10px;font-weight:700}
.no .dot{background:rgba(199,110,130,.16);color:#D98CA0}
.yes .dot{background:rgba(var(--gold-rgb),.18);color:var(--gold-lt)}
.no{color:var(--dim)}

/* mantras */
.mgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.mc{padding:28px 28px 22px;cursor:pointer}
.mc .top{display:flex;justify-content:space-between;align-items:flex-start;gap:16px}
.mc h3{font-size:24px}
/* THE MANTRA ITSELF. Always visible — it is what the reader came for, so it
   never sits behind the accordion. Devanagari at a readable size (the serif
   face needs it: matras sit above and below the baseline), with the full
   transliteration under it for anyone who does not read the script. */
.mc .mtext{margin-top:18px;padding-top:16px;border-top:1px solid var(--line)}
.mc .mdev{font-family:var(--dev);font-size:21px;line-height:1.75;color:var(--gold-lt);margin:0}
.mc .mrom{font-family:var(--sans);font-size:14px;line-height:1.6;color:var(--dim);margin:8px 0 0;font-style:italic}
.mc .mdev:empty,.mc .mrom:empty{display:none}
.mc .mtext:has(.mdev:empty):has(.mrom:empty){display:none}
/* Legacy short label, kept for any page still passing `dev` without `full`. */
.mc .dv{font-family:var(--dev);font-size:20px;color:var(--gold);opacity:.72;white-space:nowrap}
.mc .say{font-family:var(--mono);font-size:11px;letter-spacing:.11em;color:var(--faint);text-transform:uppercase;margin-top:7px}
.mc .bd{display:grid;grid-template-rows:0fr;transition:grid-template-rows .55s var(--ease)}
.mc.open .bd{grid-template-rows:1fr}
.mc .inner{overflow:hidden}
.mc .bd .inner > .row:first-child{padding-top:18px}
.mc .row{padding-top:16px;font-size:14.5px;color:var(--dim);line-height:1.6}
.mc .row b{display:block;font-family:var(--mono);font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--gold);margin-bottom:5px;font-weight:500}
.mfoot{display:flex;justify-content:space-between;align-items:center;gap:14px;margin-top:20px;padding-top:16px;border-top:1px solid var(--line)}
.cntl{font-family:var(--mono);font-size:11px;letter-spacing:.11em;color:var(--gold);text-transform:uppercase}
.act{display:inline-flex;align-items:center;gap:6px;padding:7px 14px;border-radius:100px;border:1px solid var(--line);
  background:transparent;color:var(--dim);font-family:var(--sans);font-size:12px;font-weight:500;cursor:pointer;transition:.3s}
.act:hover{border-color:rgba(var(--gold-rgb),.55);color:var(--gold-lt);background:rgba(var(--gold-rgb),.08)}
.mc.own{grid-column:1/-1;cursor:default;background:linear-gradient(140deg,rgba(var(--gold-rgb),.13),rgba(108,95,160,.13))}
.mc.own h3{font-size:30px}.mc.own p{color:var(--dim);max-width:640px;margin-top:13px;font-size:16px}

/* prime + faq */
.pf{display:grid;grid-template-columns:.9fr 1.1fr;gap:24px;align-items:start}
.prime{padding:40px 36px;border-radius:24px;position:relative;overflow:hidden;
  background:linear-gradient(155deg,#1A1440,#2A1D4E 46%,#3C2549)}
.prime::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;pointer-events:none;
  background:linear-gradient(155deg,rgba(var(--gold-lt-rgb),.6),rgba(169,155,214,.2) 55%,rgba(var(--gold-rgb),.35));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude}
.prime .tag{font-family:var(--mono);font-size:10.5px;letter-spacing:.3em;text-transform:uppercase;color:var(--gold-lt)}
.prime h2{font-size:32px;margin:13px 0 0}
.free{margin:20px 0 24px;padding:14px 17px;border-radius:14px;font-size:14.5px;line-height:1.55;
  background:rgba(var(--gold-rgb),.12);border:1px solid rgba(var(--gold-rgb),.25);color:var(--gold-lt)}
.free b{color:#FFF3DC}
.prime ul{list-style:none;margin-bottom:28px}
.prime li{display:flex;gap:12px;padding:8px 0;font-size:15px;color:rgba(var(--mist-rgb),.86)}
.prime li i{color:var(--gold);font-style:normal;font-size:10px;padding-top:5px}
.offer{display:flex;align-items:center;justify-content:center;gap:16px;padding:22px;margin-bottom:17px;
  border-radius:18px;background:rgba(6,8,26,.42);border:1px dashed rgba(var(--gold-rgb),.42)}
.offer .amt{font-family:var(--serif);font-size:52px;color:var(--gold-lt);line-height:.9}
.offer .meta b{display:block;font-size:14px;font-weight:600}
.offer .meta span{font-family:var(--mono);font-size:10px;letter-spacing:.15em;text-transform:uppercase;color:var(--faint)}
.terms{text-align:center;font-size:12.5px;color:var(--faint);margin-top:13px}
.faq{padding:40px 36px}
.faq h2{font-size:32px;margin-bottom:12px}
details{border-top:1px solid var(--line)}
details:first-of-type{border-top:0}
summary{list-style:none;cursor:pointer;padding:18px 40px 18px 0;font-size:15.5px;font-weight:500;position:relative;transition:color .3s}
summary::-webkit-details-marker{display:none}
summary:hover{color:var(--gold-lt)}
summary::after{content:"";position:absolute;right:6px;top:25px;width:10px;height:10px;
  border-right:1.4px solid var(--gold);border-bottom:1.4px solid var(--gold);transform:rotate(45deg);transition:transform .35s var(--ease)}
details[open] summary::after{transform:rotate(-135deg);top:29px}
details p{font-size:14.5px;color:var(--dim);padding:0 34px 21px 0;line-height:1.68}

.closing{text-align:center;padding:165px 0}
.closing h2{font-size:clamp(40px,5.6vw,74px);margin-bottom:24px}
.closing .lede{margin:0 auto 40px;font-size:18px}
.closing .hcta{justify-content:center}
.horizon{position:absolute;left:0;right:0;bottom:0;height:330px;pointer-events:none;
  background:radial-gradient(60% 100% at 50% 122%,rgba(var(--gold-rgb),.3),rgba(108,95,160,.14) 44%,transparent 72%)}
footer{border-top:1px solid var(--line);padding:36px 0;font-size:13px;color:var(--faint);display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap}

.sbar2{position:fixed;left:14px;right:14px;bottom:14px;z-index:55;display:none;align-items:center;gap:12px;
  padding:11px 12px 11px 20px;border-radius:100px;background:rgba(10,14,36,.9);backdrop-filter:blur(22px);
  border:1px solid rgba(var(--gold-rgb),.28);box-shadow:0 20px 50px -12px rgba(0,0,0,.85);
  transform:translateY(140%);transition:transform .55s var(--ease)}
.sbar2.show{transform:none}
.sbar2 p{flex:1;font-size:13.5px;line-height:1.35;color:var(--mist)}
.sbar2 .x{background:none;border:0;color:var(--faint);font-size:20px;cursor:pointer;padding:0 6px}

@media(prefers-reduced-motion:reduce){*{animation:none!important;transition-duration:.01ms!important}.rv{opacity:1;transform:none}.stepblk{opacity:1}}
@media(max-width:1000px){
  .hgrid,.split2,.pf,.cmp,.seq{grid-template-columns:1fr;gap:48px}
  .nlinks{display:none}
  .mgrid{grid-template-columns:1fr}
  .sticky-h{position:static}
  .moon{width:78px;top:7%;right:5%;opacity:.16}
  section{padding:96px 0}
  .hero{padding:114px 0 66px;min-height:auto}
  .sbar2{display:flex}
  .phone.drift{animation:none}
  .seqPhone{position:sticky;top:78px;z-index:3;transform:scale(.8);transform-origin:top center;margin-bottom:-110px}
  .stepblk{min-height:auto;padding:26px 0;opacity:1}
  .seqRail{display:flex;gap:7px;justify-content:center;margin-top:14px}
  .seqRail i{width:26px;height:3px;border-radius:3px;background:rgba(var(--mist-rgb),.16);transition:.4s}
  .seqRail i.on{background:var(--gold)}
}
@media(max-width:560px){
  body{font-size:15.5px}
  .pgrid{grid-template-columns:1fr}
  .hcta{flex-direction:column;align-items:stretch}.hcta .btn{width:100%}
  .prime,.faq{padding:30px 22px}
  .cmp .card{padding:28px 22px}
  .offer{flex-direction:column;gap:8px}
  .seqPhone{transform:scale(.72);margin-bottom:-150px}
}

/* Legal links in the landing footer. */
.lfoot{display:flex;gap:20px;flex-wrap:wrap}
.lfoot a{color:var(--faint);border-bottom:1px solid transparent;transition:.3s}
.lfoot a:hover{color:var(--gold-lt);border-color:var(--gold)}


/* ===========================================================================
   STORE BUTTONS
   These had NO styling, so the Apple mark rendered at its intrinsic size and
   filled the screen.
   =========================================================================== */
.store-row{display:flex;flex-wrap:wrap;gap:12px;justify-content:center}
.store-btn{display:inline-flex;align-items:center;gap:12px;padding:12px 22px;border-radius:14px;
  background:#f4f2fb;color:#0B0B18;font-family:var(--sans);font-weight:600;font-size:15px;
  line-height:1.15;border:1px solid rgba(255,255,255,.5);transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
.store-btn:hover{transform:translateY(-2px);box-shadow:0 16px 36px -10px rgba(0,0,0,.6)}
.store-btn svg{width:22px;height:22px;flex:none}
.store-btn span{display:flex;flex-direction:column;text-align:left}
.store-btn small{font-size:10px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;opacity:.6}

/* Header and footer come from /site-pages.css (the shared chrome); the rules
   that used to live here for #nav/.sitehead/.sfoot are gone with them. */

/* ===========================================================================
   SEQUENCE — MOBILE CAROUSEL
   position:sticky in a single column pins the phone over the text it is meant
   to illustrate. Under 1000px the phone becomes a swipeable carousel instead:
   the reader swipes the screen, and the matching step scrolls into view.
   =========================================================================== */
@media(max-width:1000px){
  .seqPhone{position:static;transform:none;margin-bottom:0;display:block}
  .seqTrack{display:flex;justify-content:center}
  .seqTrack > .phone{transform:scale(.9);transform-origin:top center;margin-bottom:-56px}
  /* The four screens sit side by side INSIDE the phone and snap-scroll, so the
     reader swipes the screen rather than the page. Sticky in a single column
     pinned the phone over the copy it illustrates, which read as broken. */
  #seqGlass{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;scrollbar-width:none}
  #seqGlass::-webkit-scrollbar{display:none}
  #seqGlass > .scr{position:relative;inset:auto;flex:0 0 100%;width:100%;
    opacity:1;visibility:visible;transform:none;scroll-snap-align:start;transition:none}
  #seqGlass > .island{display:none}
  .seqRail{display:flex;gap:8px;justify-content:center;margin-top:10px}
  .seqRail i{width:26px;height:3px;border-radius:3px;background:rgba(var(--mist-rgb),.16);transition:.4s var(--ease)}
  .seqRail i.on{background:var(--gold)}
  .stepblk{min-height:auto;padding:22px 0;opacity:1}
  .swipehint{display:block;text-align:center;font-family:var(--mono);font-size:10.5px;letter-spacing:.18em;
    text-transform:uppercase;color:var(--faint);margin-top:8px}
}
.swipehint{display:none}

/* Mobile header: the brand was wrapping to two lines and blowing the bar up to
   ~310px tall on a 390px screen. */
@media(max-width:900px){
  .sitehead{height:64px;gap:10px}
  .sitehead .hbrand{font-size:14px;letter-spacing:.04em;white-space:nowrap;gap:8px}
  .sitehead .hbrand img{width:30px;height:30px}
  .hbtn{padding:8px 14px;font-size:13.5px}
}
@media(max-width:380px){
  .sitehead .hbrand span{display:none}   /* logo only when there is genuinely no room */
}

/* The hero's decorative layers (.moon, .omwm) are position:absolute, but .hero
   is a <header> so `section{position:relative}` never matched it — they were
   anchoring to .content instead. `.omwm{bottom:-14%}` of a 15,000px container
   added ~2,300px of empty page below the footer. */
.hero{position:relative;overflow:hidden}


/* ══ LIGHT THEME ══
   The reference design is a night sky, and the sleep pages keep it as the
   default (aurora). When the visitor has chosen the light theme in the app
   the same tokens retint to the "Temple at Dawn" palette and the sky goes. */
:root[data-theme="light"]{
  --void:#faf7f0;--deep:#f3eee4;--slate:#ebe4d6;
  --gold:#9d5d0b;--gold-lt:#8a5210;--gold-dp:#c9862a;
  --lilac:#4c2fa0;--mist:#1f1830;--dim:rgba(31,24,48,.72);--faint:rgba(31,24,48,.66);
  --mist-rgb:31,24,48;--gold-rgb:157,93,11;--gold-lt-rgb:138,82,16;
  --line:rgba(31,24,48,.12);
}
:root[data-theme="light"] .mesh,:root[data-theme="light"] #sky,:root[data-theme="light"] .moon,:root[data-theme="light"] .omwm{display:none}
:root[data-theme="light"] .content .card{background:rgba(255,255,255,.82)}
/* THE PRIME PANEL KEEPS ITS DARK GRADIENT IN BOTH THEMES (.prime above sets a
   fixed linear-gradient), but its text pulled the theme tokens — so in light
   mode the heading, the feature list, the "free" note and the price all
   rendered in near-black ink on a near-black panel and were invisible.
   Restoring the DARK ink ON THE PANEL fixes every descendant at once, which is
   why this redeclares the tokens rather than overriding rule by rule: anything
   added inside .prime later inherits the right colours automatically. */
:root[data-theme="light"] .prime{
  --mist:#EDEBF6;--mist-rgb:237,235,246;
  --gold:#C9A063;--gold-lt:#F0DAAE;--gold-rgb:201,160,99;--gold-lt-rgb:240,218,174;
  --dim:#9AA0C0;--faint:#767DA3;--line:rgba(237,235,246,.09);
  color:var(--mist)}
:root[data-theme="light"] .content .card:hover{background:#fff}
:root[data-theme="light"] .content .b-gold,:root[data-theme="light"] .sbar2 .b-gold{background:linear-gradient(135deg,#1d4ed8,#5b21b6);color:#fff;box-shadow:0 10px 30px -10px rgba(76,47,160,.55)}
:root[data-theme="light"] .content .b-glass,:root[data-theme="light"] .badge{background:rgba(255,255,255,.8)}
:root[data-theme="light"] .sbar2{background:rgba(255,255,255,.96);border-color:var(--line)}