/* Eclipsis — night-first design system */

/* ── Tokens ───────────────────────────────────────── */
:root,[data-theme="night"]{
--ground:#060910;--ground-2:#060910;--surface:#060910;--umbra:#030508;
--ink:#EFE9DC;--ink-soft:#B9B3A4;--ink-dim:#7F8794;
--rule:rgba(235,229,215,.11);--rule-strong:rgba(235,229,215,.22);
--glow:#E9A94F;--glow-hot:#FBE7C0;--glow-lite:#FDEFD2;--glow-soft:rgba(233,169,79,.13);--glow-text:#E9A94F;
}
[data-theme="day"]{
--ground:#EBE5D7;--ground-2:#EBE5D7;--surface:#EBE5D7;--umbra:#374555;
--ink:#374555;--ink-soft:#5A6472;--ink-dim:#7F8794;
--rule:rgba(55,69,85,.14);--rule-strong:rgba(55,69,85,.3);
--glow:#E9A94F;--glow-hot:#8F6118;--glow-lite:#FBEBCB;--glow-soft:rgba(233,169,79,.16);--glow-text:#8F6118;
}
:root{
--display:'Newsreader','Newsreader Fallback',Georgia,serif;
--sans:'Space Grotesk',system-ui,-apple-system,sans-serif;
--label:'Space Grotesk',system-ui,-apple-system,sans-serif;--mono:ui-monospace,monospace;
--pad:clamp(24px,6vw,88px);
--measure:56ch;
/* Motion tokens (2026-09-03). Every UI transition and one-shot animation
   reads these; only the long ambient loops keep literal seconds. */
--ease-out:cubic-bezier(.2,.8,.2,1);
--ease-in-out:cubic-bezier(.4,0,.2,1);
--ease-drift:cubic-bezier(.24,.58,.32,.97);
--dur-fast:.18s;--dur-base:.3s;--dur-slow:.6s;--dur-reveal:.8s;
}
/* Metrics-matched stand-in for the display face (measured from the
   Newsreader 400 file against local Georgia, 2026-09-03) so the hero
   headline holds its line breaks when the webfont swaps in. */
@font-face{font-family:'Newsreader Fallback';src:local('Georgia');size-adjust:96.07%;ascent-override:76.51%;descent-override:27.58%;line-gap-override:0%}

/* ── Base ─────────────────────────────────────────── */
*{box-sizing:border-box}
html{scroll-behavior:smooth;overflow-x:clip}
/* overflow-x:CLIP, not hidden (2026-08-31): hidden made body a scroll
   container, which silently killed position:sticky on the nav; clip guards
   sideways overflow without breaking sticky. */
body{margin:0;background:var(--ground);color:var(--ink);font-family:var(--sans);font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:clip;transition:background var(--dur-slow) ease,color var(--dur-slow) ease}
h1,h2,h3,h4{font-family:var(--display);font-weight:400;letter-spacing:-.022em;margin:0}
em{font-style:italic;color:var(--glow)}
p{margin:0}
img{max-width:100%;display:block}
a{color:var(--ink);text-decoration:none;transition:color var(--dur-base)}
a:hover{color:var(--glow-text)}
::selection{background:var(--glow-soft);color:var(--ink)}

.wrap{max-width:1240px;margin:0 auto;padding:0 var(--pad);position:relative;z-index:1}
.measure{max-width:var(--measure)}

/* ── Focus ────────────────────────────────────────── */
/* Keyboard focus gets the gold ring everywhere; pointer focus stays quiet. */
:focus-visible{outline:2px solid var(--glow);outline-offset:3px}
.faq-q:focus-visible{outline-offset:2px;border-radius:6px}
.mark:focus-visible,.link:focus-visible,.nav-links a:focus-visible,.foot-links a:focus-visible{outline-offset:5px;border-radius:4px}
.car-slide:focus-visible{outline-offset:8px;border-radius:26px}
.wipe-handle:focus-visible{outline:none}
.wipe-handle:focus-visible .wipe-knob{outline:2px solid var(--glow);outline-offset:3px}

/* ── Type scale ───────────────────────────────────── */
.eyebrow{font-family:var(--label);font-weight:500;font-size:13.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-soft)}
.marg{font-family:var(--label);font-weight:500;font-size:14px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-soft);display:flex;align-items:center;gap:16px}
.marg::after{content:'';height:1px;flex:1;background:var(--rule)}
.d1{font-size:clamp(52px,7.6vw,104px);line-height:.95;letter-spacing:-.038em}
.d2{font-size:clamp(38px,5.2vw,68px);line-height:1.02;letter-spacing:-.03em}
.d3{font-size:clamp(26px,3vw,36px);line-height:1.12;letter-spacing:-.02em}
.lede{font-size:clamp(17px,1.5vw,20px);line-height:1.62;color:var(--ink-soft);font-weight:400;text-wrap:pretty}
.body{font-size:16.5px;line-height:1.68;color:var(--ink-soft);text-wrap:pretty}
.tiny{font-family:var(--label);font-weight:500;font-size:13.5px;letter-spacing:.12em;color:var(--ink-soft)}

/* ── Buttons & links ──────────────────────────────── */
.btn{display:inline-flex;align-items:center;gap:11px;font-family:var(--sans);font-size:14.5px;font-weight:500;letter-spacing:-.005em;padding:13px 24px;border-radius:100px;border:1px solid transparent;cursor:pointer;transition:background var(--dur-base),color var(--dur-base),border-color var(--dur-base),transform var(--dur-base) var(--ease-out)}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(0) scale(.98);transition-duration:var(--dur-fast)}
.btn-primary{background:var(--ink);color:var(--ground);border-color:var(--ink)}
.btn-primary:hover{background:var(--glow);border-color:var(--glow);color:var(--umbra)}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--rule-strong)}
.btn-ghost:hover{border-color:var(--glow);color:var(--glow)}
.btn .phase{width:13px;height:13px;border-radius:50%;flex:none;position:relative;overflow:hidden;background:radial-gradient(circle at 36% 34%, var(--glow-lite), var(--glow) 62%, #8F6118 100%);box-shadow:0 0 7px var(--glow-soft)}
.btn .phase::after{content:'';position:absolute;inset:1.5px;border-radius:50%;background:var(--umbra);transform:translateX(-34%);transition:transform var(--dur-slow) var(--ease-out)}
.btn:hover .phase::after{transform:translateX(0)}
.link{display:inline-flex;align-items:center;gap:8px;font-size:16px;color:var(--ink);border-bottom:1px solid var(--rule-strong);padding-bottom:3px;transition:border-color var(--dur-base),color var(--dur-base)}
.link:hover{color:var(--glow-text);border-color:var(--glow)}
.link::after{content:'→';font-size:13px;opacity:.55;transition:transform var(--dur-base)}
.link:hover::after{transform:translateX(3px)}

/* ── Mark ─────────────────────────────────────────── */
.mark{display:inline-flex;align-items:center;gap:16px;font-family:var(--display);font-size:36px;letter-spacing:-.02em;color:var(--ink)}
.mark:hover{color:var(--ink)}
.mark svg{width:52px;height:52px;flex:none;overflow:visible}
.mark .m-body{fill:var(--ink);transition:fill var(--dur-base)}
.mark .m-orbit{stroke:var(--glow);fill:none}
.mark .m-line{stroke:var(--rule-strong)}
.mark:hover .m-body{fill:var(--glow)}

/* ── Nav ──────────────────────────────────────────── */
/* Sticky bar that melts into a floating pill on scroll (David 2026-08-31).
   Rebuilt 2026-09-03 so nothing in layout moves: the bar keeps one fixed
   geometry and the pill is a pseudo-element that condenses around it with
   transform + opacity only (no padding/margin/max-width transitions). */
.nav{position:sticky;top:0;z-index:40;background:var(--ground);transition:background var(--dur-slow)}
.nav.stuck{background:transparent}
/* The bar shares the page grid (the mark lines up with the hero text) and
   keeps --pad on each side in both states; the pill overhangs the content
   by 22px. --nav-pad is trimmed in a narrow band below, where the links
   would otherwise overflow. */
.nav-in{--nav-pad:var(--pad);display:flex;align-items:center;justify-content:space-between;gap:20px;padding:14px var(--nav-pad);margin:6px auto}
.nav-in::before{content:'';position:absolute;inset:-4px calc(var(--nav-pad) - 22px);z-index:-1;border-radius:999px;border:1px solid var(--rule);
  background:color-mix(in oklab, var(--ground) 80%, transparent);
  box-shadow:0 18px 44px -20px rgba(0,0,0,.6);
  opacity:0;transform:scale(1.04,1.3);pointer-events:none;
  transition:opacity var(--dur-slow) ease,transform var(--dur-slow) var(--ease-out),background-color var(--dur-slow) ease,border-color var(--dur-slow) ease}
.nav.stuck .nav-in::before{opacity:1;transform:none;-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px)}
.nav-links{display:flex;align-items:center;gap:clamp(16px,2vw,28px);list-style:none;margin:0;padding:0;font-size:15px;color:var(--ink-soft);flex-wrap:nowrap;white-space:nowrap}
.nav-links a{color:var(--ink-soft)}
.nav-links a:hover{color:var(--ink)}
.nav-right{display:flex;align-items:center;gap:14px;flex-wrap:nowrap;white-space:nowrap}
.theme-btn{width:30px;height:30px;border-radius:50%;border:1px solid var(--rule-strong);background:transparent;cursor:pointer;position:relative;overflow:hidden;padding:0;flex:none;transition:border-color var(--dur-base)}
.theme-btn:hover{border-color:var(--glow)}
.theme-btn::before{content:'';position:absolute;inset:4px;border-radius:50%;background:var(--glow)}
.theme-btn::after{content:'';position:absolute;inset:4px;border-radius:50%;background:var(--ground);transform:translateX(-58%);transition:transform var(--dur-slow) var(--ease-in-out),background-color var(--dur-slow) ease}
[data-theme="day"] .theme-btn::after{transform:translateX(58%)}

/* ── Mobile menu (homepage nav only; other pages have no burger markup) ── */
.nav-burger{display:none;width:44px;height:44px;flex:none;flex-direction:column;align-items:center;justify-content:center;gap:5px;background:transparent;border:none;border-radius:10px;cursor:pointer;padding:0}
.nav-burger span{display:block;width:20px;height:1.5px;border-radius:1px;background:var(--ink);transition:transform var(--dur-base) var(--ease-out),opacity var(--dur-base)}
.nav-burger[aria-expanded="true"] span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.nav-burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav-burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}
/* Opens with a short fade + drop; JS adds .open a frame after un-hiding and
   restores hidden after the close transition. */
.nav-menu{display:none;position:absolute;left:0;right:0;top:100%;background:var(--ground);border-bottom:1px solid var(--rule);padding:6px var(--pad) 24px;box-shadow:0 30px 60px -30px rgba(0,0,0,.55);opacity:0;transform:translateY(-8px);transition:opacity var(--dur-fast) ease,transform var(--dur-fast) var(--ease-out)}
.nav-menu.open{opacity:1;transform:none}
.nav-menu ul{list-style:none;margin:0;padding:0}
.nav-menu ul a,.nav-menu-auth a{display:block;padding:12px 0;font-size:17px;color:var(--ink);border-bottom:1px solid var(--rule)}
.nav-menu-auth a{color:var(--ink-soft)}
.nav-menu-auth a:hover{color:var(--ink)}
.nav-menu-cta{display:none;margin-top:20px}

/* ── Hero ─────────────────────────────────────────── */
.hero{padding-block:clamp(45px,7.2vw,96px) clamp(58px,8vw,112px)}
.hero-grid{display:grid;grid-template-columns:1.02fr .98fr;gap:clamp(32px,5vw,72px);align-items:center}
.hero h1{margin:26px 0 28px}
.hero-sub{max-width:44ch;margin-bottom:36px}
.hero-actions{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:44px}
.cta-actions{justify-content:center;margin-bottom:26px}
.cta-note{margin:0 auto 18px;max-width:46ch}
.hero-foot{display:flex;align-items:center;gap:12px}
.hero-foot .dot{width:5px;height:5px;border-radius:50%;background:var(--glow);animation:breathe 3.4s ease-in-out infinite}
@keyframes breathe{0%,100%{opacity:1}50%{opacity:.25}}
/* Rotating word: the outgoing word lifts away, the next rises in from below.
   .rw-in is a one-frame parking state (no transition) JS clears right away.
   The visible word comes first so the grid takes its text baseline; the
   hidden measure reserves the longest word's width but no height (clip, not
   hidden: a scroll container would move the baseline), so a word too wide
   for its line never leaves a blank line under the visible one (JS also
   shrinks such a word to fit). */
.rw{display:inline-grid}
.rw>span{grid-area:1/1}
.rw-measure{visibility:hidden;height:0;overflow:clip}
.rw-word{color:var(--glow);transition:opacity var(--dur-slow) ease,transform var(--dur-slow) var(--ease-out)}
.rw-out{opacity:0;transform:translateY(-.32em)}
.rw-in{opacity:0;transform:translateY(.32em);transition:none}

/* ── Eclipse figure ───────────────────────────────── */
/* Timeline, seconds from load: the moon crosses from .3 to 3.9 on a shallow
   arc (X and Y ride different curves), the diamond ring flares 3.3 to 4.15,
   the corona blooms 3.75 to 5.05, then everything breathes. All layers move
   with transform/opacity only; the old box-shadow flare is gone. */
.eclipse{position:relative;aspect-ratio:1;width:100%;max-width:520px;margin:0 auto;display:grid;place-items:center;animation:ecIn 1s var(--ease-out) both}
@keyframes ecIn{from{opacity:0;transform:scale(.97)}to{opacity:1;transform:none}}
.ec-halo{position:absolute;width:100%;height:100%;border-radius:50%;background:radial-gradient(circle at 50% 46%,var(--glow-soft),transparent 62%);opacity:.45;animation:haloSurge 3.9s ease-out .3s forwards,halo 11s ease-in-out 4.2s infinite}
@keyframes haloSurge{0%{opacity:.45;transform:scale(.96)}60%{opacity:.6;transform:scale(1)}100%{opacity:1;transform:scale(1.06)}}
/* halo's 0% equals haloSurge's 100%, so the handoff has no jump */
@keyframes halo{0%,100%{opacity:1;transform:scale(1.06)}50%{opacity:.7;transform:scale(1.01)}}
.ec-stage{position:relative;width:58%;aspect-ratio:1;transform:translateZ(0)}
.ec-corona{position:absolute;inset:-50%;border-radius:50%;opacity:0;pointer-events:none;animation:ecCorona 1.3s var(--ease-out) 3.75s forwards,coronaBreathe 7s ease-in-out 5.05s infinite}
.ec-corona::before,.ec-corona::after{content:'';position:absolute;inset:0;border-radius:50%}
/* inner ring: the sun's edge sits at 50% of closest-side in this box */
.ec-corona::before{background:radial-gradient(circle closest-side,transparent 47%,var(--glow-lite) 49.5%,rgba(233,169,79,.62) 53%,rgba(233,169,79,.2) 62%,transparent 76%)}
/* streamers: two crossed ellipses, tilted */
.ec-corona::after{background:radial-gradient(ellipse 56% 30% at 50% 50%,rgba(233,169,79,.3) 34%,rgba(233,169,79,.1) 64%,transparent 100%),radial-gradient(ellipse 30% 56% at 50% 50%,rgba(233,169,79,.16) 34%,transparent 100%);transform:rotate(-22deg)}
[data-theme="day"] .ec-corona::before{background:radial-gradient(circle closest-side,transparent 47%,var(--glow) 49.5%,rgba(233,169,79,.55) 54%,rgba(233,169,79,.18) 64%,transparent 78%)}
@keyframes ecCorona{from{opacity:0;transform:scale(.86)}to{opacity:1;transform:scale(1)}}
@keyframes coronaBreathe{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.82;transform:scale(1.035)}}
.ec-sun{position:absolute;inset:0;border-radius:50%;background:url("/assets/sun-surface.jpg") center/112% no-repeat,radial-gradient(circle at 44% 40%,var(--glow-lite),var(--glow) 58%,color-mix(in oklab,var(--glow) 70%,var(--umbra)) 100%);box-shadow:0 0 90px -10px var(--glow-soft)}
/* diamond ring: the last bead of light on the top-right limb */
.ec-diamond{position:absolute;left:79%;top:9%;width:12%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,#fff 0,var(--glow-lite) 14%,rgba(233,169,79,.55) 36%,transparent 68%);opacity:0;transform:scale(.3);pointer-events:none;animation:ecDiamond .85s var(--ease-out) 3.3s both}
.ec-diamond::before,.ec-diamond::after{content:'';position:absolute;left:50%;top:50%;width:260%;height:1px;translate:-50% -50%;background:linear-gradient(to right,transparent,var(--glow-lite),transparent);opacity:.9}
.ec-diamond::after{transform:rotate(90deg)}
@keyframes ecDiamond{0%{opacity:0;transform:scale(.3)}40%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(.5)}}
/* the moon rides two nested layers: X drifts in and decelerates, Y eases in
   late, so the path bends into an arc instead of a straight slide */
/* The moon starts 124% left of the sun, which put it over the headline
   column (and the buttons on phones) for the first second. This static
   wrapper masks the approach to the figure: the moon emerges from the
   dark at the stage's left edge instead of ghosting across the copy. */
.ec-moon-clip{position:absolute;left:-30%;right:-30%;top:-40%;bottom:-40%;pointer-events:none;-webkit-mask-image:linear-gradient(to right,transparent 0,#000 22%);mask-image:linear-gradient(to right,transparent 0,#000 22%)}
.ec-moon-x{position:absolute;left:18.75%;right:18.75%;top:22.222%;bottom:22.222%;animation:ecTransitX 3.6s var(--ease-drift) .3s both}
@keyframes ecTransitX{from{transform:translateX(-124%)}to{transform:translateX(1.5%)}}
.ec-moon{position:absolute;inset:0;border-radius:50%;overflow:hidden;background:url("/assets/moon-surface.jpg") center/112% no-repeat,var(--umbra);filter:brightness(.8);opacity:0;animation:ecTransitY 3.6s cubic-bezier(.6,0,.3,1) .3s both,ecMoonIn .5s ease-out .3s both}
[data-theme="day"] .ec-moon{background:url("/assets/moon-surface.jpg") center/112% no-repeat,var(--ink)}
@keyframes ecTransitY{from{transform:translateY(30%) scale(1)}to{transform:translateY(-1%) scale(1.04)}}
@keyframes ecMoonIn{from{opacity:0}to{opacity:1}}
/* night side: an umbra overlay fading up replaces the old filter animation */
.ec-moon::after{content:'';position:absolute;inset:0;border-radius:50%;background:var(--umbra);opacity:.15;animation:ecMoonDark 3.6s ease-in .3s both}
@keyframes ecMoonDark{0%,30%{opacity:.15}100%{opacity:.86}}
.ec-orbit{position:absolute;width:132%;height:132%;animation:spin 40s linear infinite;will-change:transform}
@keyframes spin{to{transform:rotate(360deg)}}
.ec-orbit::before{content:'';position:absolute;inset:0;border-radius:50%;border:1px solid var(--rule)}
.ec-orbit .body{position:absolute;top:-4px;left:50%;width:8px;height:8px;margin-left:-4px;border-radius:50%;background:var(--ink-dim)}
.ec-horizon{position:absolute;left:-14%;right:-14%;top:calc(50% + 29%);height:1px;background:linear-gradient(to right,transparent,var(--rule-strong) 22%,var(--rule-strong) 78%,transparent)}

/* ── Idle budget ──────────────────────────────────── */
/* JS toggles .anim-off on [data-anim] roots when they leave the viewport or
   the tab hides; every loop inside freezes in place. */
.anim-off,.anim-off *,.anim-off ::before,.anim-off ::after{animation-play-state:paused!important}

/* ── Path of totality (divider) ───────────────────── */

/* ── Phase strip ──────────────────────────────────── */

/* ── Orrery (CTA) — top-down sun · moon · earth ───── */
.orrery{position:relative;width:min(680px,100%);height:clamp(240px,34vw,320px);margin:0 auto clamp(48px,6vw,76px);contain:paint}
.orrery>*{position:absolute}
/* ── a mini solar system: the earth orbits the sun (48s year), the moon
   orbits the earth (8s month). Nested rotation makes the syzygy strictly
   periodic: every 8s the moon crosses the sun–earth line on the sun side,
   and the alignment event plays. All hairlines are SOLID — no dashes.
   The halo now runs on the same 8s clock, so the sun itself surges at
   each alignment; the separate corona ring and sun pulse are gone. ── */
.or-halo{left:50%;top:50%;width:clamp(150px,22vw,200px);aspect-ratio:1;translate:-50% -50%;border-radius:50%;background:radial-gradient(circle,var(--glow-soft),transparent 70%);animation:orHalo 8s ease-in-out infinite}
@keyframes orHalo{0%,3%{opacity:1;transform:scale(1.12)}18%{opacity:.7;transform:scale(1)}82%{opacity:.7;transform:scale(1)}97%,100%{opacity:1;transform:scale(1.12)}}
.or-sun{left:50%;top:50%;width:clamp(64px,9.5vw,84px);aspect-ratio:1;translate:-50% -50%;border-radius:50%;background:url("/assets/sun-surface.jpg") center/112% no-repeat,radial-gradient(circle at 44% 42%,var(--glow-lite),var(--glow) 55%,color-mix(in oklab,var(--glow) 72%,var(--umbra)) 92%);box-shadow:0 0 34px -6px var(--glow-soft)}
.or-earth-orbit{left:50%;top:50%;width:clamp(190px,28vw,252px);aspect-ratio:1;translate:-50% -50%;border-radius:50%;border:1px solid var(--rule)}
/* rotating year-frame: carries the earth system + the sun–earth tether */
.or-espin{left:50%;top:50%;width:clamp(190px,28vw,252px);aspect-ratio:1;translate:-50% -50%;animation:spin 48s linear infinite;will-change:transform}
.or-tether{position:absolute;left:50%;top:50%;width:50%;height:1px;transform-origin:left center;background:linear-gradient(to right,transparent 12%,var(--glow) 55%,var(--glow) 92%,transparent);opacity:.07;animation:orTether 8s ease-in-out infinite}
@keyframes orTether{0%,3%{opacity:.5}14%{opacity:.07}86%{opacity:.07}97%,100%{opacity:.5}}
.or-earthsys{position:absolute;left:100%;top:50%;width:0;height:0}
.or-earthsys>*{position:absolute;translate:-50% -50%}
.or-moon-orbit{width:clamp(56px,8.4vw,74px);aspect-ratio:1;border-radius:50%;border:1px solid color-mix(in oklab,var(--rule) 80%,transparent)}
/* gold bloom behind the earth as the moon comes around to the sun side;
   it also swells outward as totality releases (the old corona ring's job) */
.or-bloom{width:clamp(44px,6.6vw,58px);aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,var(--glow-soft),transparent 68%);opacity:0;animation:orBloom 8s ease-in-out infinite}
@keyframes orBloom{0%,3%{opacity:1;transform:scale(1)}16%{opacity:0;transform:scale(1.6)}17%,84%{opacity:0;transform:scale(.8)}97%,100%{opacity:1;transform:scale(1)}}
/* the earth, finally in color: ocean blue with a sun-facing highlight.
   The year-frame rotates the sprite with it, so the lit limb (toward the
   frame's center = the sun) stays sun-facing all orbit long. */
.or-earth{width:20px;height:20px;border-radius:50%;background:url("/assets/earth-surface.jpg") center/112% no-repeat;box-shadow:inset -6px 0 8px -3px color-mix(in oklab,var(--umbra) 92%,transparent),0 0 0 .5px color-mix(in oklab,var(--rule-strong) 60%,transparent)}
/* rotating month-frame: the moon + its cast shadow */
.or-mspin{width:clamp(56px,8.4vw,74px);aspect-ratio:1;animation:spin 8s linear infinite;will-change:transform}
.or-moon{position:absolute;left:0;top:50%;width:8px;height:8px;translate:-50% -50%;border-radius:50%;background:url("/assets/moon-surface.jpg") center/112% no-repeat,color-mix(in oklab,var(--ink) 78%,var(--ink-dim));box-shadow:inset 2px 0 3px -1px var(--umbra)}
/* umbra: soft cone cast from the moon onto the earth at syzygy */
.or-umbra{position:absolute;left:0;top:50%;width:clamp(26px,4vw,35px);height:16px;translate:0 -50%;background:linear-gradient(to right,color-mix(in oklab,var(--umbra) 88%,transparent),color-mix(in oklab,var(--umbra) 26%,transparent));clip-path:polygon(0 40%,0 60%,100% 92%,100% 8%);filter:blur(1.2px);opacity:0;animation:orShadow 8s ease-in-out infinite}
@keyframes orShadow{0%,3%{opacity:.95}14%{opacity:0}86%{opacity:0}97%,100%{opacity:.95}}
/* caption: fades up on every alignment */
.or-cap{right:6%;bottom:8px;white-space:nowrap;letter-spacing:.3em;opacity:0;animation:orCap 8s ease-in-out infinite}
@keyframes orCap{0%,4%{opacity:1;transform:translateY(0)}16%{opacity:0;transform:translateY(4px)}84%{opacity:0;transform:translateY(4px)}96%,100%{opacity:1;transform:translateY(0)}}
.or-baseline{left:0;right:0;bottom:0;height:1px;background:linear-gradient(to right,transparent,var(--rule) 18%,var(--rule) 82%,transparent)}

/* ── Sections ─────────────────────────────────────── */
.sec{padding-block:clamp(58px,8.8vw,134px)}
.pb-half{padding-bottom:clamp(36px,5.5vw,84px)}
.pt-half{padding-top:clamp(36px,5.5vw,84px)}
.sec-head{margin-bottom:clamp(32px,4.8vw,58px)}
.sec-head .marg{margin-bottom:36px}
.sec-head h2{margin-bottom:22px}

/* ── Stats ────────────────────────────────────────── */
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(28px,4vw,56px)}
.stat-n{font-family:var(--display);font-size:clamp(52px,6vw,80px);line-height:1;letter-spacing:-.04em}
.stat-u{font-family:var(--display);font-style:italic;font-size:.35em;color:var(--glow);letter-spacing:0}
.stat-rule{width:28px;height:1px;background:var(--rule-strong);margin:20px 0 16px}
.stat-c{font-size:16px;line-height:1.6;color:var(--ink-soft);max-width:30ch}
/* the hairline draws out as the stat reveals; the number counts up in JS */
.js .reveal .stat-rule{transform:scaleX(0);transform-origin:left center;transition:transform var(--dur-reveal) var(--ease-out) .3s}
.reveal.visible .stat-rule{transform:scaleX(1)}
.counting{font-variant-numeric:tabular-nums}

/* ── Feature cards ────────────────────────────────── */
.cards{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(32px,4.5vw,64px) clamp(40px,6vw,88px)}
.cards-3{grid-template-columns:repeat(3,1fr);gap:clamp(28px,3.5vw,48px) clamp(28px,4vw,56px)}
.cards-3 .card h3{font-size:26px}
.cards-3 .card .body{font-size:15.5px}
.cards-foot{margin-top:clamp(36px,5vw,60px);text-align:center;font-size:clamp(16px,1.4vw,19px);color:var(--ink-soft)}
.cards-foot strong{color:var(--ink);font-weight:600}
.cards-foot a{color:var(--glow-text);border-bottom:1px solid var(--glow);padding-bottom:2px}
.card{padding-top:26px;border-top:1px solid var(--rule)}
.card:hover{border-color:var(--glow)}
.card-top{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:22px}
.card-top svg{width:30px;height:30px;flex:none}
/* icon draw-on: a disc slides across and uncovers the glyph (an eclipse in
   miniature), 750ms, transform + clip-path only */
.js .card.reveal .card-top svg{clip-path:circle(50% at -60% 50%);transform:scale(.86);transition:clip-path .75s var(--ease-out) .18s,transform .75s var(--ease-out) .18s}
.card.reveal.visible .card-top svg{clip-path:circle(75% at 50% 50%);transform:none}
.card h3{font-size:30px;margin-bottom:14px}
.card .body{margin-bottom:20px}
.card .body strong{color:var(--ink);font-weight:500}
.card .body em{color:var(--ink);font-style:italic}
.tag{display:inline-block;font-family:var(--label);font-weight:500;font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft);border:1px solid var(--rule);border-radius:100px;padding:6px 12px}
.tag a{color:var(--ink-soft)}
.tag a:hover{color:var(--glow-text)}

/* ── Product mockup chrome ────────────────────────── */
.ba-row{display:grid;grid-template-columns:.82fr 1.18fr;gap:clamp(32px,5vw,80px);align-items:center;margin-bottom:clamp(56px,8vw,120px)}
.ba-row-flip .ba-copy{order:2}
.ba-copy h3{font-size:clamp(28px,3.4vw,42px);margin:18px 0 20px}
.ba-list{list-style:none;margin:24px 0 0;padding:0;display:flex;flex-direction:column;gap:10px}
.ba-list li{font-size:16px;color:var(--ink-soft);display:flex;align-items:baseline;gap:12px}
.ba-list li::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--rule-strong);flex:none;translate:0 -1px}
.ba-shots{display:flex;flex-direction:column;gap:20px}
.chrome{border:1px solid var(--rule);border-radius:10px;overflow:hidden;background:var(--surface);position:relative;box-shadow:0 40px 90px -50px rgba(0,0,0,.7)}
.chrome-bar{display:flex;align-items:center;gap:12px;padding:9px 12px;border-bottom:1px solid var(--rule);background:var(--ground-2)}
.chrome-dots{display:flex;gap:6px}
.chrome-dots span{width:8px;height:8px;border-radius:50%;background:var(--rule-strong)}
.chrome-url{flex:1;text-align:center;font-family:var(--label);font-weight:500;font-size:13px;color:var(--ink-soft);letter-spacing:.02em}
.chrome-tag{font-family:var(--label);font-weight:500;font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft);border:1px solid var(--rule);border-radius:100px;padding:3px 9px}
.chrome-tag.on{color:var(--glow);border-color:color-mix(in oklab,var(--glow) 45%,transparent)}
.chrome img{width:100%;display:block}
/* ── Before/after wiper (2026-09-03) ──
   Both captures sit in one grid cell at the same aspect (the taller "after"
   is cropped at the bottom, top-aligned, so the page layouts line up); the
   after layer is clipped from the left at --x and the handle is a slider. */
.wipe{position:relative;display:grid;border-radius:10px;box-shadow:0 40px 90px -50px rgba(0,0,0,.7);cursor:ew-resize;touch-action:pan-y;user-select:none;-webkit-user-select:none;--x:50%}
.wipe>.chrome{grid-area:1/1;margin:0;box-shadow:none}
.wipe img{aspect-ratio:var(--ar,1400/751);height:auto;object-fit:cover;object-position:top;-webkit-user-drag:none}
.js .wipe .wipe-over{clip-path:inset(0 0 0 var(--x))}
.wipe-lab{position:absolute;bottom:10px;z-index:2;font-family:var(--label);font-weight:500;font-size:12px;letter-spacing:.14em;text-transform:uppercase;padding:4px 10px;border-radius:100px;color:var(--ink-soft);border:1px solid var(--rule);background:color-mix(in oklab,var(--ground) 82%,transparent);pointer-events:none}
.wipe-lab-b{left:10px}
.wipe-lab-a{right:10px;color:var(--glow-text);border-color:color-mix(in oklab,var(--glow) 45%,transparent)}
.wipe-handle{position:absolute;top:0;bottom:0;left:var(--x);width:44px;margin-left:-22px;z-index:3;display:grid;place-items:center;cursor:ew-resize}
.wipe-handle::before{content:'';position:absolute;top:0;bottom:0;left:50%;width:2px;margin-left:-1px;background:var(--glow);box-shadow:0 0 0 1px rgba(0,0,0,.25)}
.wipe-knob{position:relative;z-index:1;width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:var(--ground);border:1.5px solid var(--glow);color:var(--glow-text);box-shadow:0 8px 24px -8px rgba(0,0,0,.7);transition:transform var(--dur-base) var(--ease-out),background-color var(--dur-slow) ease}
.wipe-knob svg{width:18px;height:18px}
.wipe:hover .wipe-knob,.wipe.dragging .wipe-knob{transform:scale(1.08)}
html:not(.js) .wipe{display:flex;flex-direction:column;gap:20px;box-shadow:none;cursor:auto}
html:not(.js) .wipe>.chrome{box-shadow:0 40px 90px -50px rgba(0,0,0,.7)}
html:not(.js) .wipe img{aspect-ratio:auto}
html:not(.js) .wipe-handle,html:not(.js) .wipe-lab{display:none}
.ba-foot{display:flex;flex-direction:column;align-items:center;text-align:center;gap:26px;padding-top:clamp(56px,8vw,96px);margin-bottom:clamp(-20px,-2vw,-8px)}
.ba-foot p{font-size:clamp(17px,1.5vw,20px);color:var(--ink-soft);line-height:1.6}
.ba-logos{display:flex;gap:clamp(26px,4vw,44px);color:var(--ink-soft)}
/* hidden only when JS runs (the reveal fallback always lands .visible) */
.js .ba-logos svg{opacity:0;transform:translateY(16px) scale(.85);transition:opacity var(--dur-reveal) var(--ease-out),transform var(--dur-reveal) var(--ease-out)}
.ba-foot.visible .ba-logos svg{opacity:1;transform:none}
.ba-foot.visible .ba-logos svg:nth-child(1){transition-delay:.05s}
.ba-foot.visible .ba-logos svg:nth-child(2){transition-delay:.17s}
.ba-foot.visible .ba-logos svg:nth-child(3){transition-delay:.29s}
.ba-foot.visible .ba-logos svg:nth-child(4){transition-delay:.41s}
.ba-foot.visible .ba-logos svg:nth-child(5){transition-delay:.53s}
.ba-foot.visible .ba-logos svg:nth-child(6){transition-delay:.65s}
.ba-logos svg{width:30px;height:30px;fill:currentColor}
.ba-foot p{font-family:var(--display);font-size:clamp(22px,2.6vw,32px);line-height:1.32;letter-spacing:-.02em;color:var(--ink);max-width:26ch}

/* ── FAQ ──────────────────────────────────────────── */
.faq{border-top:1px solid var(--rule)}
.faq-item{border-bottom:1px solid var(--rule)}
.faq-q{width:100%;display:flex;align-items:center;justify-content:space-between;gap:24px;background:none;border:none;cursor:pointer;padding:26px 0;text-align:left;font-family:var(--display);font-size:clamp(19px,2vw,24px);letter-spacing:-.015em;color:var(--ink);transition:color var(--dur-base)}
.faq-q:hover{color:var(--glow-text)}
.faq-mark{width:14px;height:14px;border-radius:50%;border:1px solid var(--rule-strong);flex:none;position:relative;overflow:hidden;transition:border-color var(--dur-base)}
.faq-mark::after{content:'';position:absolute;inset:0;border-radius:50%;background:var(--glow);transform:translateX(-100%);transition:transform var(--dur-slow) var(--ease-out)}
.faq-open .faq-mark::after{transform:translateX(0)}
.faq-open .faq-mark{border-color:var(--glow)}
.faq-a{display:grid;grid-template-rows:0fr;transition:grid-template-rows var(--dur-slow) var(--ease-out)}
.faq-open .faq-a{grid-template-rows:1fr}
.faq-a>div{overflow:hidden}
.faq-a p{font-size:16.5px;line-height:1.7;color:var(--ink-soft);max-width:68ch;padding-bottom:28px}

/* ── CTA ──────────────────────────────────────────── */
.cta{text-align:center;padding-block:clamp(70px,10.4vw,152px);position:relative}
.cta h2{margin-bottom:22px}
.cta .lede{margin:0 auto 40px;max-width:46ch}
.cta-row{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}


/* ── Footer ───────────────────────────────────────── */
.footer{border-top:1px solid var(--rule);padding:44px 0 56px}
.foot-row{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap}
.foot-links{display:flex;gap:22px;font-size:15.5px;color:var(--ink-soft);flex-wrap:wrap}
.foot-links a{color:var(--ink-soft)}
.foot-links a:hover{color:var(--glow-text)}

#science{padding-top:clamp(41px,6.2vw,94px)}
.science-coda{font-size:clamp(30px,3vw,40px);line-height:1.3;color:var(--ink)}
.science-coda em{color:var(--glow)}

/* ── Eclipsis Pro section (orbit diagram + cards) ─── */
.syzygy{position:relative;width:min(640px,94vw);aspect-ratio:1;margin:clamp(20px,3vw,40px) auto}
.sy-ring{position:absolute;left:50%;top:50%;translate:-50% -50%;width:var(--d);aspect-ratio:1;border-radius:50%;border:1px solid var(--rule)}
.sy-center{position:absolute;left:50%;top:50%;translate:-50% -50%;display:grid;justify-items:center;gap:8px}
.sy-center svg{width:72px;height:72px;overflow:visible}
.sy-center .m-body{fill:var(--ink)}
.sy-center .m-orbit{stroke:var(--glow)}
.sy-center .m-line{stroke:var(--rule-strong)}
.sy-center span{font-family:var(--display);font-size:23px;letter-spacing:-.02em;color:var(--ink)}
@keyframes syOrbit{from{transform:rotate(0)}to{transform:rotate(360deg)}}
@keyframes syCounter{from{transform:rotate(0)}to{transform:rotate(-360deg)}}
/* Three layers: the orb spins the whole square, the arm holds the fixed
   radius, the body counter-spins so planets and labels stay upright. */
.sy-orb{position:absolute;inset:0;animation:syOrbit var(--t) linear infinite;animation-delay:calc(var(--t) * var(--k) * -1);pointer-events:none}
.sy-arm{position:absolute;left:50%;top:50%;width:0;height:0;transform:translateX(var(--r))}
.sy-body{position:absolute;translate:-50% -50%;display:flex;align-items:center;gap:9px;white-space:nowrap;animation:syCounter var(--t) linear infinite;animation-delay:calc(var(--t) * var(--k) * -1)}
.sy-planet{width:var(--s);height:var(--s);border-radius:50%;flex:none;position:relative;background:radial-gradient(circle at 34% 32%,var(--c1),var(--c2) 88%);transition:transform var(--dur-slow) var(--ease-out)}
.sy-label{font-family:var(--label);font-weight:500;font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-dim)}
/* Alignment glow (2026-09-03): JS reads each orb's animation progress and
   lights the pairs that line up through the center; the halo's pseudo
   answers from the middle. */
.sy-planet::after{content:'';position:absolute;inset:-8px;border-radius:50%;background:radial-gradient(circle,var(--c1) 0,color-mix(in srgb,var(--c1) 40%,transparent) 40%,transparent 72%);opacity:0;transition:opacity var(--dur-slow) ease}
.sy-lit .sy-planet{transform:scale(1.3)}
.sy-lit .sy-planet::after{opacity:.95}
.pro-what{margin-top:clamp(20px,3vw,36px)}
.pro-what .eyebrow{margin-bottom:16px}
.pro-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:16px 40px}
.pro-list li{font-size:17.5px;line-height:1.65;color:var(--ink-soft)}
.pl-chip{display:inline-block;vertical-align:2px;margin-left:9px;font-family:var(--label);font-weight:500;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;padding:2px 8px;border-radius:999px;border:1px solid var(--rule-strong);color:var(--ink-soft)}
.pl-chip.pro{color:var(--glow-text);border-color:rgba(233,169,79,.5)}
.hero-foot-2{margin-top:8px;opacity:.75}
.pro-list strong{color:var(--ink);font-weight:600;font-size:18px}
.pro-compare{display:grid;grid-template-columns:1fr auto 1fr;align-items:stretch;gap:clamp(16px,3vw,40px);margin-top:clamp(36px,5vw,64px)}
.pc-col{display:grid;align-content:center;justify-items:center;text-align:center;gap:12px;padding:clamp(26px,3.5vw,44px) clamp(18px,2.5vw,36px);border-radius:22px}
.pc-without{background:var(--surface)}
.pc-with{background:var(--glow-soft)}
.pc-label{font-family:var(--label);font-size:clamp(17px,1.8vw,22px);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft);font-weight:600}
.pc-with .pc-label{color:var(--glow-text)}
.pc-amount{font-family:var(--display);font-size:clamp(48px,6.5vw,76px);line-height:1;color:var(--ink-dim)}
.pc-with .pc-amount{color:var(--ink)}
.pc-amount span{font-family:var(--sans);font-size:15px;color:var(--ink-dim);margin-left:6px}
.pc-note{font-size:13.5px;line-height:1.6;color:var(--ink-soft);max-width:34ch}
.pc-vs{align-self:center;font-family:var(--display);font-style:italic;font-size:clamp(20px,2.4vw,28px);color:var(--glow)}
@media(max-width:940px){
.syzygy{aspect-ratio:auto;width:100%;display:flex;flex-direction:column;align-items:center;gap:12px;padding-top:4px}
.sy-ring{display:none}
.sy-orb{position:static;inset:auto;animation:none}
.sy-arm{position:static;transform:none;width:auto;height:auto}
.sy-body{position:static;translate:none;animation:none}
.sy-center{position:static;translate:none;order:-1;margin-bottom:12px}
}
@media(max-width:720px){
.pro-list{grid-template-columns:1fr}
.pro-compare{grid-template-columns:1fr}
.pc-vs{justify-self:center}
}

/* ── Reveal ───────────────────────────────────────── */
.js .reveal{opacity:0;transform:translateY(16px)}
.reveal{transition:opacity var(--dur-reveal) var(--ease-out),transform var(--dur-reveal) var(--ease-out)}
.reveal.visible{opacity:1;transform:none}
.d1x{transition-delay:.09s}.d2x{transition-delay:.18s}.d3x{transition-delay:.27s}

/* ── Theme switch coherence ───────────────────────── */
/* The surfaces that carry a border or fill cross-fade on the same clock as
   the body, so a theme flip reads as one change instead of a cascade. */
.card,.faq,.faq-item,.chrome,.chrome-bar,.chrome-tag,.tag,.pc-col,.shot-pair,.shot-tag,.sy-label,.sy-ring,.or-earth-orbit,.footer,.marg::after,.wipe-lab,.pl-chip{transition-property:background-color,border-color,color;transition-duration:var(--dur-slow);transition-timing-function:ease}

/* ── Responsive ───────────────────────────────────── */
/* The nav links need about 935px of bar. Between 1001 and 1100px the bar
   trims its side padding (never under 24px) so they still fit; from 1000px
   down the burger takes over (was 940px, where they only just squeezed in
   with no side padding at all). */
@media(min-width:1001px) and (max-width:1100px){
.nav-in{--nav-pad:min(var(--pad),max(24px,calc(50vw - 475px)))}
}
@media(max-width:1000px){
.nav-links{display:none}
/* homepage nav collapses into the burger menu; #nav exists only on index */
.nav-burger{display:flex}
#nav .nav-signin{display:none}
.nav-menu:not([hidden]){display:block}
}
@media(max-width:940px){
.hero-grid,.cards,.cards-3,.stats,.ba-row{grid-template-columns:1fr}
.hero-grid{gap:56px}
.ba-row-flip .ba-copy{order:0}
.eclipse{max-width:400px}
.stats{gap:40px}
/* 44px effective tap targets without negative margins */
.theme-btn{width:44px;height:44px;border-color:transparent}
.theme-btn:hover{border-color:transparent}
.theme-btn::before{inset:11px;outline:1px solid var(--rule-strong);outline-offset:3px;transition:outline-color var(--dur-base)}
.theme-btn:hover::before{outline-color:var(--glow)}
.theme-btn::after{inset:11px}
.foot-links{gap:10px 18px}
.foot-links a{display:inline-block;padding:12px 4px}
.tag:has(a){padding-top:0;padding-bottom:0}
.tag a{display:inline-block;padding:13px 2px}
}
@media(max-width:600px){
.nav-in{gap:12px}
.nav-in::before{inset:-4px calc(var(--nav-pad) - 14px)}
.nav-right{gap:8px}
.mark{gap:11px;font-size:27px}
.mark svg{width:38px;height:38px}
#nav .nav-right .btn-primary{display:none}
.nav-menu .nav-menu-cta{display:inline-flex}
.eclipse{max-width:min(400px,72vw)}
}
@media(max-width:430px){
.d1{font-size:clamp(42px,13.2vw,52px)}
}

/* ── App screenshot gallery (04 · Eclipsis Pro) ── */
.app-shots{margin-top:64px}
.shot-phone{position:relative;border-radius:26px;padding:6px;background:#10151d;border:1px solid var(--rule);box-shadow:0 18px 48px rgba(0,0,0,.45)}
.shot-phone img{display:block;width:100%;height:auto;border-radius:21px}
.shot-pairs{display:grid;grid-template-columns:1fr 1fr;gap:26px;margin-top:22px;align-items:start}
.shot-pair{margin:0;border:1px solid var(--rule);border-radius:24px;padding:20px 20px 22px;background:linear-gradient(180deg,rgba(3,5,8,.55),rgba(3,5,8,.2))}
[data-theme="day"] .shot-pair{background:linear-gradient(180deg,rgba(55,69,85,.08),rgba(55,69,85,.02))}
.shot-pair-cap{display:block;margin-bottom:14px;color:var(--ink-dim)}
.shot-duo{display:flex;gap:16px}
.shot-duo .shot-phone{flex:1;min-width:0}
.shot-tags{display:flex;align-items:center;gap:12px;margin-bottom:14px;padding:0 4px}
.shot-tag{font-family:var(--label);font-weight:500;font-size:11px;letter-spacing:.12em;text-transform:uppercase;white-space:nowrap;padding:3px 11px;border-radius:999px;color:var(--ink-soft);border:1px solid var(--rule)}
.shot-tag.on{color:var(--glow-text);border-color:rgba(233,169,79,.55)}
.shot-arrow{flex:1;position:relative;height:1px;background:linear-gradient(to right,var(--rule-strong),rgba(233,169,79,.6))}
.shot-arrow::after{content:"";position:absolute;right:-1px;top:50%;transform:translateY(-50%);border-left:6px solid rgba(233,169,79,.75);border-top:4px solid transparent;border-bottom:4px solid transparent}
/* one gentle light sweep along the arrow when the gallery reveals */
.shot-arrow::before{content:"";position:absolute;left:0;top:-1px;height:3px;width:34%;background:linear-gradient(to right,transparent,var(--glow-lite),transparent);opacity:0;transform:translateX(-60%)}
.app-shots.visible .shot-arrow::before{animation:arrowSweep 1.2s var(--ease-out) .5s both}
@keyframes arrowSweep{0%{opacity:0;transform:translateX(-60%)}15%{opacity:1}100%{opacity:0;transform:translateX(300%)}}
.shot-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;margin-top:26px}
.shot-grid .shot{margin:0}
.shot-cap{display:block;margin-top:11px;text-align:center;color:var(--ink-dim)}
@media (max-width:900px){.shot-pairs{grid-template-columns:1fr}.shot-grid{grid-template-columns:repeat(2,1fr)}}


/* ── Night-sky starfield (dark mode only) ── */
[data-theme="night"] body::after{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
background-image:
radial-gradient(2px 2px at 12% 22%, rgba(235,229,215,.9), transparent 60%),
radial-gradient(1.5px 1.5px at 68% 12%, rgba(235,229,215,.7), transparent 60%),
radial-gradient(2.5px 2.5px at 84% 64%, rgba(235,229,215,.6), transparent 60%),
radial-gradient(1.5px 1.5px at 33% 78%, rgba(235,229,215,.75), transparent 60%),
radial-gradient(2px 2px at 55% 40%, rgba(235,229,215,.5), transparent 60%),
radial-gradient(1.5px 1.5px at 90% 88%, rgba(235,229,215,.65), transparent 60%),
radial-gradient(1.5px 1.5px at 8% 55%, rgba(235,229,215,.55), transparent 60%),
radial-gradient(2px 2px at 42% 8%, rgba(251,231,192,.8), transparent 60%),
radial-gradient(1.5px 1.5px at 76% 34%, rgba(235,229,215,.6), transparent 60%),
radial-gradient(1px 1px at 22% 44%, rgba(235,229,215,.65), transparent 60%),
radial-gradient(2.5px 2.5px at 62% 82%, rgba(251,231,192,.55), transparent 60%),
radial-gradient(1px 1px at 48% 62%, rgba(235,229,215,.55), transparent 60%),
radial-gradient(1.5px 1.5px at 95% 18%, rgba(235,229,215,.7), transparent 60%),
radial-gradient(1px 1px at 5% 92%, rgba(235,229,215,.6), transparent 60%);
background-size:960px 960px,700px 700px,1120px 1120px,820px 820px,640px 640px,1000px 1000px,760px 760px,880px 880px,720px 720px,560px 560px,1060px 1060px,600px 600px,900px 900px,680px 680px}

/* Day keeps the sky (2026-08-30, David): the same starfield, recolored —
   ink specks with the gold accents — so light mode still reads celestial
   instead of blank. */
[data-theme="day"] body::after{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
background-image:
radial-gradient(2px 2px at 12% 22%, rgba(20,24,31,.5), transparent 60%),
radial-gradient(1.5px 1.5px at 68% 12%, rgba(20,24,31,.38), transparent 60%),
radial-gradient(2.5px 2.5px at 84% 64%, rgba(176,112,26,.5), transparent 60%),
radial-gradient(1.5px 1.5px at 33% 78%, rgba(20,24,31,.42), transparent 60%),
radial-gradient(2px 2px at 55% 40%, rgba(20,24,31,.3), transparent 60%),
radial-gradient(1.5px 1.5px at 90% 88%, rgba(20,24,31,.36), transparent 60%),
radial-gradient(1.5px 1.5px at 8% 55%, rgba(176,112,26,.42), transparent 60%),
radial-gradient(2px 2px at 42% 8%, rgba(176,112,26,.6), transparent 60%),
radial-gradient(1.5px 1.5px at 76% 34%, rgba(20,24,31,.34), transparent 60%),
radial-gradient(1px 1px at 22% 44%, rgba(20,24,31,.38), transparent 60%),
radial-gradient(2.5px 2.5px at 62% 82%, rgba(176,112,26,.45), transparent 60%),
radial-gradient(1px 1px at 48% 62%, rgba(20,24,31,.32), transparent 60%),
radial-gradient(1.5px 1.5px at 95% 18%, rgba(20,24,31,.4), transparent 60%),
radial-gradient(1px 1px at 5% 92%, rgba(176,112,26,.38), transparent 60%),
radial-gradient(1px 1px at 5% 92%, rgba(20,24,31,.34), transparent 60%);
background-size:960px 960px,700px 700px,1120px 1120px,820px 820px,640px 640px,1000px 1000px,760px 760px,880px 880px,720px 720px,560px 560px,1060px 1060px,600px 600px,900px 900px,680px 680px,680px 680px}

/* ── Syzygy upgrade: breathing halo, glowing planets, label chips ── */
.sy-halo{position:absolute;left:50%;top:50%;width:44%;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(circle,var(--glow-soft),transparent 62%);animation:syBreath 9s ease-in-out infinite;pointer-events:none}
@keyframes syBreath{0%,100%{opacity:.5;transform:translate(-50%,-50%) scale(1)}50%{opacity:1;transform:translate(-50%,-50%) scale(1.14)}}
/* the center answers an alignment with a hotter core (replaces the old
   drop-shadow filter on the wordmark) */
.sy-halo::after{content:"";position:absolute;inset:-10%;border-radius:50%;background:radial-gradient(circle,var(--glow) 0,var(--glow-soft) 32%,transparent 70%);opacity:0;transition:opacity var(--dur-slow) ease}
.syzygy.sy-align .sy-halo::after{opacity:.5}
.sy-planet{box-shadow:0 0 16px 2px color-mix(in srgb, var(--c1) 45%, transparent)}
.sy-label{display:inline-flex;align-items:center;gap:7px;padding:4px 11px 4px 9px;border-radius:999px;border:1px solid var(--rule);background:color-mix(in srgb, var(--ground) 84%, transparent);backdrop-filter:blur(2px)}
.sy-label::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--c1);box-shadow:0 0 8px color-mix(in srgb, var(--c1) 60%, transparent);flex:none}
.sy-lit .sy-label{border-color:color-mix(in srgb,var(--c1) 55%,transparent);color:var(--ink-soft)}

/* ── Pro section: planets beside the benefit list ── */
.pro-cols{display:grid;grid-template-columns:1.08fr 1fr;gap:clamp(48px,8vw,128px);align-items:center;margin-top:clamp(20px,3vw,36px)}
.shots-title{font-family:var(--display);font-weight:400;color:var(--ink);margin-bottom:6px}
.shots-title em{font-style:italic;color:var(--glow-text)}
.pro-cols .syzygy{width:min(560px,100%);margin:0 auto;transform:scale(.94)}
.pro-cols .pro-what{margin-top:0}
.pro-cols .pro-list{grid-template-columns:1fr;gap:14px}
@media (max-width:980px){.pro-cols{grid-template-columns:1fr}.pro-cols .syzygy{transform:none}.pro-cols .pro-list{gap:12px}}

/* ── Screenshot carousel: circular ring, depth fade toward the back ── */
.carousel{position:relative;margin-top:26px}
/* Height is reserved from the slide geometry (the tallest pair at 600px is
   ~684px; the tallest single phone at 280px is ~622px) so the pricing block
   below never gets shoved when JS measures; JS then sets the exact height
   with no transition. */
.car-track{position:relative;perspective:1500px;transform-style:preserve-3d;min-height:max(calc(min(600px,86vw) * 1.084 + 33px),calc(min(280px,64vw) * 2.168 + 15px))}
.car-slide{position:absolute;left:50%;top:0;transform:translateX(-50%);opacity:var(--o,1);will-change:transform,opacity;transition:transform var(--dur-reveal) var(--ease-out),opacity var(--dur-reveal) ease;cursor:pointer;border-radius:24px}
.car-slide.front{cursor:default}
/* back slides brighten on hover by lifting their own opacity (no filter) */
.car-slide:not(.front):hover,.car-slide:not(.front):focus-visible{opacity:calc(var(--o,1) * 1.7)}
.car-slide .shot-pair{width:min(600px,86vw)}
.car-slide .shot.single{margin:0;width:min(280px,64vw)}
.car-dots{display:flex;justify-content:center;gap:10px;margin-top:22px}
.car-dots button{width:8px;height:8px;border-radius:50%;border:1px solid var(--rule-strong);background:transparent;padding:0;cursor:pointer;transition:background var(--dur-base),transform var(--dur-base)}
.car-dots button.on{background:var(--glow);border-color:var(--glow);transform:scale(1.25)}


/* ── Mobile pass (2026-08-30, David) ─────────────────────────────────
   Hero art moves BEHIND the text (bottom-left, same render box) instead
   of stacking after it; the store button appears. (The before/after proof
   section is back on phones as of 2026-09-03: the wiper works by touch.) */
.store-btn{display:none}
@media(max-width:720px){
  .hero{position:relative;overflow:clip;padding-bottom:56px}
  .hero-grid{display:block}
  .hero-grid>div:first-child{position:relative;z-index:1}
  /* Bottom-RIGHT, raised 10% (David 2026-08-31; was left:-8%;bottom:-6%). */
  .eclipse{position:absolute;z-index:0;right:-8%;bottom:4%;width:min(330px,68vw);max-width:none;margin:0;opacity:.9;pointer-events:none}
  .store-btn{display:inline-flex}
  /* Scoped to .hero (2026-08-30): the bare selector also hid the primary
     create-account button in every cta-actions row on phones. */
  .hero .hero-actions>a.btn-primary:not(.store-btn){display:none}
}

/* ── Reduced motion: the one authoritative block ─────────────────────
   Loops stop, one-shots land on their posed end state (the eclipse at
   totality, the orrery at alignment), reveals are simply visible, and
   hover lifts stay put. */
@media(prefers-reduced-motion:reduce){
html{scroll-behavior:auto}
.eclipse,.ec-halo,.ec-corona,.ec-diamond,.ec-moon-x,.ec-moon,.ec-moon::after,.ec-orbit,.hero-foot .dot,
.or-halo,.or-espin,.or-tether,.or-bloom,.or-mspin,.or-umbra,.or-cap,
.sy-orb,.sy-body,.sy-halo,.shot-arrow::before{animation:none!important}
.eclipse{opacity:1;transform:none}
.ec-halo{opacity:1;transform:scale(1.06)}
.ec-moon-x{transform:translateX(1.5%)}
.ec-moon{opacity:1;transform:translateY(-1%) scale(1.04)}
.ec-moon::after{opacity:.86}
.ec-corona{opacity:1}
.ec-diamond{opacity:0}
.or-bloom,.or-umbra,.or-cap{opacity:1}
.or-tether{opacity:.3}
.reveal,.js .reveal{opacity:1;transform:none;transition:none}
.ba-logos svg,.js .ba-logos svg{opacity:1;transform:none;transition:none}
.js .card.reveal .card-top svg{clip-path:none;transform:none;transition:none}
.js .reveal .stat-rule{transform:none;transition:none}
.btn:hover,.btn:active,.link:hover::after,.wipe:hover .wipe-knob,.sy-lit .sy-planet{transform:none}
.rw-word,.rw-out,.rw-in{transition:none;opacity:1;transform:none}
.nav-in::before,.nav-menu,.faq-a,.faq-mark::after,.btn .phase::after,.theme-btn::after,.car-slide,.car-dots button,.sy-planet::after,.sy-halo::after{transition-duration:.01ms}
}

[hidden] { display: none !important; }