/* ============================================================
   LUNA — design system
   ------------------------------------------------------------
   The page is a day. It opens in morning sky, runs through
   daylight paper, drops into one dark beat at "the one rule",
   returns to daylight, and closes in evening. That value rhythm
   (light / light / DARK / light / light / DARK) is the whole
   structure — there is no decorative illustration doing this
   job, because illustration is what made the old page read as
   stock. Every surface transition is a crisp edge, never a
   blurred band.
   ============================================================ */

/* ---------- tokens ---------- */
:root{
  /* grounds */
  --paper:#f4f7fa;          /* daylight ground */
  --paper-raised:#ffffff;
  --navy:#0b1720;           /* evening ground */
  --navy-raised:#12222e;

  /* ink ramp (measured against --paper) */
  --ink-1:#0e1b26;          /* 15.1:1  headings */
  --ink-2:#35505f;          /*  7.9:1  body */
  --ink-3:#5b7688;          /*  4.6:1  meta, smallest legible */

  /* amber — split by ROLE, which is the bug the old palette had.
     One value was used both as a button ground and as small text,
     so whichever won, the other was unreadable. */
  --amber:#e2a857;          /* SURFACE only — pair with --on-amber */
  --amber-hi:#f0c186;       /* surface, hover */
  --on-amber:#241503;       /*  8.1:1 on --amber */
  --amber-text:#8f5a1e;     /*  5.4:1 on --paper — small text on light */
  --amber-glow:#ffca85;     /* light, for dark grounds only */

  --terracotta:#bf5035;

  /* semantic surface set — flipped wholesale by .dark */
  --surface:var(--paper);
  --fg-1:var(--ink-1);
  --fg-2:var(--ink-2);
  --fg-3:var(--ink-3);
  --accent:var(--amber-text);
  --line:rgba(14,27,38,.10);
  --line-strong:rgba(14,27,38,.18);
  --fill:rgba(14,27,38,.035);
  --fill-hover:rgba(14,27,38,.06);

  /* type */
  --sans:'Inter',system-ui,-apple-system,sans-serif;
  --serif:'Fraunces',Georgia,serif;
  --mono:'JetBrains Mono',ui-monospace,monospace;

  /* motion — one expo-out curve everywhere, so nothing feels
     like it came from a different page */
  --ease:cubic-bezier(.16,1,.3,1);
  --ease-soft:cubic-bezier(.4,0,.2,1);
  --t-fast:180ms; --t-mid:340ms; --t-slow:640ms; --t-reveal:900ms;

  /* rhythm */
  --gutter:clamp(20px,5vw,64px);
  --measure:1180px;
  --bay:clamp(80px,11vh,140px);   /* vertical section padding */
  --r-sm:10px; --r-md:14px; --r-lg:20px; --r-xl:28px;
}

.dark + .dark{box-shadow:0 -1px 0 rgba(255,255,255,.06)}
.dark{
  --surface:var(--navy);
  --fg-1:#eaf1f6;
  --fg-2:#a7bcc9;           /*  8.4:1 on --navy */
  --fg-3:#7b94a3;           /*  5.4:1 on --navy */
  --accent:var(--amber-glow);
  --line:rgba(255,255,255,.10);
  --line-strong:rgba(255,255,255,.20);
  --fill:rgba(255,255,255,.04);
  --fill-hover:rgba(255,255,255,.08);
}

/* ---------- reset ---------- */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:auto}
body{
  font-family:var(--sans);
  background:var(--paper);
  color:var(--ink-1);
  line-height:1.55;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  font-synthesis-weight:none;
  text-rendering:optimizeLegibility;
  font-feature-settings:'cv05' 1,'cv09' 1,'ss03' 1;   /* single-storey g, curved l, rounded quotes */
}
img,svg{display:block;max-width:100%}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}
a{color:inherit}
::selection{background:var(--amber);color:var(--on-amber)}

/* one focus ring for the whole page */
:where(a,button,input,[tabindex]):focus-visible{
  outline:2px solid var(--accent);
  outline-offset:3px;
  border-radius:4px;
}

/* ---------- type scale ----------
   Weight 460–520 with real negative tracking. The old page set
   display type at weight 200, which is why it read as a default
   rather than a decision. */
.t-display{
  font-size:clamp(38px,6.6vw,82px);
  font-weight:500;
  line-height:1.02;
  letter-spacing:-.035em;
  text-wrap:balance;
}
.t-h2{
  font-size:clamp(29px,4.3vw,54px);
  font-weight:500;
  line-height:1.06;
  letter-spacing:-.03em;
  text-wrap:balance;
}
.t-h3{
  font-size:clamp(18px,1.5vw,21px);
  font-weight:560;
  line-height:1.3;
  letter-spacing:-.015em;
}
.t-lead{
  font-size:clamp(16px,1.45vw,19.5px);
  font-weight:400;
  line-height:1.6;
  color:var(--fg-2);
  text-wrap:pretty;
}
.t-body{font-size:15.5px;line-height:1.62;color:var(--fg-2);text-wrap:pretty}
.t-micro{
  font-family:var(--mono);
  font-size:11px;
  font-weight:500;
  letter-spacing:.2em;
  text-transform:uppercase;
}
.t-num{font-variant-numeric:tabular-nums;font-feature-settings:'tnum' 1}

/* ---------- layout ---------- */
.section{
  position:relative;
  padding:var(--bay) var(--gutter);
  background:var(--surface);
  color:var(--fg-1);
  scroll-margin-top:76px;
  isolation:isolate;
}
.wrap{width:100%;max-width:var(--measure);margin-inline:auto;position:relative}
.wrap-narrow{max-width:760px}

/* section header — one pattern, used everywhere, so every
   section opens with the same cadence */
.s-head{max-width:720px;margin-bottom:clamp(38px,6vh,68px)}
.s-head.center{margin-inline:auto;text-align:center}
.eyebrow{
  font-family:var(--mono);font-size:11px;font-weight:500;
  letter-spacing:.22em;text-transform:uppercase;
  color:var(--accent);
  display:inline-flex;align-items:center;gap:9px;
  margin-bottom:18px;
}
.eyebrow::before{
  content:'';width:16px;height:1px;background:currentColor;opacity:.55;flex:0 0 auto;
}
.s-head.center .eyebrow::before{display:none}
.s-head .t-lead{margin-top:18px;max-width:600px}
.s-head.center .t-lead{margin-inline:auto}

/* the sun mark, drawn once, reused at every scale */
.sundot{
  border-radius:50%;flex:0 0 auto;
  background:radial-gradient(circle at 40% 36%,#fff9ee 0%,#ffdca6 26%,var(--amber) 52%,#c9702f 82%,#a3512a 100%);
  box-shadow:0 0 0 .5px rgba(160,84,32,.18), 0 0 10px rgba(226,168,87,.5);
}

/* film grain — kills the flatness of large gradient fields */
.grain{
  position:fixed;inset:0;z-index:200;pointer-events:none;
  opacity:.035;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ============================================================
   CURSOR
   A dot that sits exactly on the pointer and a ring that chases
   it with easing, so the pointer has weight. The ring changes
   size — never scale — because size is what the browser can
   transition while JS owns the transform every frame.
   Gated to real pointers: touch and reduced-motion keep the
   system cursor and never load any of this behaviour.
   ============================================================ */
.cur{position:fixed;top:0;left:0;z-index:300;pointer-events:none;display:none}
.cur-dot,.cur-ring{position:absolute;top:0;left:0;border-radius:50%;will-change:transform}
.cur-dot{
  width:7px;height:7px;
  background:radial-gradient(circle at 40% 36%,#fff9ee 0%,#ffdca6 28%,var(--amber) 62%,#c9702f 100%);
  box-shadow:0 0 10px rgba(226,168,87,.7);
  transition:width var(--t-fast) var(--ease),height var(--t-fast) var(--ease),opacity var(--t-fast) linear;
}
.cur-ring{
  width:32px;height:32px;
  border:1px solid rgba(226,168,87,.6);
  background:rgba(226,168,87,0);
  transition:width .42s var(--ease),height .42s var(--ease),
             background-color .42s var(--ease-soft),
             border-color .42s var(--ease-soft),
             opacity .28s linear;
  animation:curBreathe 3.6s var(--ease-soft) infinite;
}
@keyframes curBreathe{0%,100%{opacity:.95}50%{opacity:.55}}

/* over anything clickable the ring opens and takes on a tint,
   and the dot recedes so the target stays readable */
.cur.hot .cur-ring{width:54px;height:54px;background:rgba(226,168,87,.14);border-color:rgba(226,168,87,.85);animation:none;opacity:1}
.cur.hot .cur-dot{width:4px;height:4px}
.cur.down .cur-ring{width:26px;height:26px;background:rgba(226,168,87,.3)}
.cur.down .cur-dot{width:11px;height:11px}
.cur.idle .cur-ring{width:22px;height:22px;opacity:.35}
.cur.gone .cur-ring,.cur.gone .cur-dot{opacity:0}
/* over a text field the system caret has to win */
.cur.text .cur-ring{width:0;height:0;opacity:0}
.cur.text .cur-dot{opacity:0}
/* dark grounds get the light-on-dark amber */
.cur.on-dark .cur-ring{border-color:rgba(255,202,133,.72)}
.cur.on-dark.hot .cur-ring{background:rgba(255,202,133,.16);border-color:rgba(255,202,133,.95)}

/* a ring thrown off on every click */
.cur-ripple{
  position:fixed;z-index:299;pointer-events:none;
  width:16px;height:16px;border-radius:50%;
  border:1px solid rgba(226,168,87,.85);
  transform:translate(-50%,-50%) scale(.35);
  animation:curRipple .68s var(--ease) forwards;
}
@keyframes curRipple{to{transform:translate(-50%,-50%) scale(4.4);opacity:0}}

@media (hover:hover) and (pointer:fine){
  html.cur-on,
  html.cur-on a,html.cur-on button,html.cur-on [tabindex],html.cur-on label{cursor:none}
  html.cur-on input,html.cur-on textarea,html.cur-on select{cursor:auto}
  html.cur-on .cur{display:block}
}
@media (prefers-reduced-motion:reduce){
  .cur,.cur-ripple{display:none!important}
  html.cur-on{cursor:auto}
}

/* ---------- buttons ---------- */
.btn{
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-family:var(--mono);font-size:11.5px;font-weight:500;
  letter-spacing:.16em;text-transform:uppercase;text-decoration:none;white-space:nowrap;
  padding:15px 26px;border-radius:var(--r-md);
  border:1px solid transparent;
  transition:background var(--t-mid) var(--ease-soft),
             border-color var(--t-mid) var(--ease-soft),
             color var(--t-mid) var(--ease-soft),
             box-shadow var(--t-mid) var(--ease-soft),
             transform var(--t-fast) var(--ease-soft);
  will-change:transform;
}
.btn:active{transform:scale(.978)}

.btn--primary{
  background:var(--amber);color:var(--on-amber);
  box-shadow:0 1px 0 rgba(255,255,255,.4) inset, 0 6px 20px -6px rgba(180,115,44,.5);
}
.btn--primary:hover{background:var(--amber-hi);box-shadow:0 1px 0 rgba(255,255,255,.5) inset,0 10px 28px -8px rgba(180,115,44,.55)}

.btn--ghost{border-color:var(--line-strong);color:var(--fg-1);background:var(--fill)}
.btn--ghost:hover{border-color:var(--fg-3);background:var(--fill-hover)}

.btn--ink{background:var(--ink-1);color:#eef5fa}
.btn--ink:hover{background:#04101a}

/* the shine that crosses a primary button on hover — 1 pass, no loop */
.btn--primary::after{
  content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.55) 50%,transparent 65%);
  transform:translateX(-120%);opacity:0;
}
.btn--primary:hover::after{animation:sheen .85s var(--ease) forwards}
@keyframes sheen{0%{transform:translateX(-120%);opacity:1}100%{transform:translateX(120%);opacity:0}}
/* ============================================================
   REVEAL — one motion vocabulary
   ============================================================ */
[data-reveal]{
  opacity:0;
  transform:translate3d(0,var(--rv-y,18px),0);
  transition:opacity var(--t-reveal) var(--ease),transform var(--t-reveal) var(--ease);
  transition-delay:var(--rv-d,0ms);
}
[data-reveal].in{opacity:1;transform:none}
[data-reveal="fade"]{--rv-y:0px}

/* headline lines rise out of their own clip box — the single most
   effective "designed" cue on the page. Lines are wrapped by JS. */
.ln{display:block;overflow:hidden}
.ln > i{
  display:block;font-style:inherit;
  transform:translate3d(0,110%,0);
  transition:transform 1s var(--ease);
  transition-delay:var(--ln-d,0ms);
}
.split.in .ln > i{transform:none}
/* pre-JS and no-JS: never leave a headline invisible */
.split:not(.split-ready){opacity:1}

/* ============================================================
   TOPBAR
   Auto-hides on scroll-down, returns on scroll-up. That is what
   fixes the old bug where an opaque pod sat permanently on top
   of the body copy of every single section.
   ============================================================ */
.topbar{
  position:fixed;top:0;left:0;right:0;z-index:100;
  display:flex;align-items:center;justify-content:space-between;gap:24px;
  padding:16px var(--gutter);
  pointer-events:none;
  opacity:0;
  transform:translate3d(0,-8px,0);
  transition:opacity var(--t-slow) var(--ease) .2s,
             transform var(--t-slow) var(--ease);
}
.topbar.ready{opacity:1;transform:none}
.topbar.hidden{transform:translate3d(0,-118%,0);transition-delay:0s}
.topbar > *{pointer-events:auto}

.tb-brand{
  display:inline-flex;align-items:center;gap:.5em;
  font-family:var(--serif);font-weight:600;font-size:18px;
  letter-spacing:.3em;text-decoration:none;white-space:nowrap;
  color:var(--ink-1);
  transition:color var(--t-mid) var(--ease-soft);
}
.tb-brand .sundot{width:.56em;height:.56em}
.topbar.on-dark .tb-brand{color:#eaf1f6}

.tb-pod{
  display:flex;align-items:center;gap:6px;
  padding:5px;border-radius:16px;
  background:rgba(255,255,255,.62);
  border:1px solid rgba(14,27,38,.08);
  box-shadow:0 1px 0 rgba(255,255,255,.7) inset, 0 8px 26px -10px rgba(15,40,60,.28);
  backdrop-filter:blur(20px) saturate(1.6);
  -webkit-backdrop-filter:blur(20px) saturate(1.6);
  transition:background var(--t-slow) var(--ease-soft),
             border-color var(--t-slow) var(--ease-soft),
             box-shadow var(--t-slow) var(--ease-soft);
}
.topbar.on-dark .tb-pod{
  background:rgba(255,255,255,.07);
  border-color:rgba(255,255,255,.14);
  box-shadow:0 1px 0 rgba(255,255,255,.10) inset, 0 8px 26px -10px rgba(0,0,0,.5);
}

.tb-nav{display:flex;align-items:center}
.tb-link{
  position:relative;
  font-family:var(--mono);font-size:10.5px;font-weight:500;
  letter-spacing:.16em;text-transform:uppercase;
  text-decoration:none;white-space:nowrap;
  color:var(--ink-2);
  padding:11px 14px;border-radius:11px;
  transition:color var(--t-fast) var(--ease-soft),background var(--t-fast) var(--ease-soft);
}
.tb-link:hover{color:var(--ink-1);background:rgba(14,27,38,.05)}
.topbar.on-dark .tb-link{color:#b7c9d4}
.topbar.on-dark .tb-link:hover{color:#fff;background:rgba(255,255,255,.08)}

.tb-sep{width:1px;height:18px;background:var(--line);margin:0 4px;flex:0 0 auto}
.topbar.on-dark .tb-sep{background:rgba(255,255,255,.14)}

.tb-cta{
  font-family:var(--mono);font-size:10.5px;font-weight:500;
  letter-spacing:.16em;text-transform:uppercase;text-decoration:none;white-space:nowrap;
  padding:11px 18px;border-radius:11px;
  background:var(--ink-1);color:#eef5fa;
  transition:background var(--t-mid) var(--ease-soft),transform var(--t-fast) var(--ease-soft);
}
.tb-cta:hover{background:#04101a}
.tb-cta:active{transform:scale(.97)}
.topbar.on-dark .tb-cta{background:var(--amber);color:var(--on-amber)}
.topbar.on-dark .tb-cta:hover{background:var(--amber-hi)}

.tb-avatar{
  display:inline-flex;align-items:center;justify-content:center;
  width:34px;height:34px;border-radius:11px;overflow:hidden;margin-left:2px;
  font-family:var(--mono);font-size:11.5px;letter-spacing:.02em;
  color:var(--ink-1);text-decoration:none;
  background:rgba(14,27,38,.07);border:1px solid rgba(14,27,38,.14);
  transition:border-color var(--t-fast) var(--ease-soft);
}
.tb-avatar:hover{border-color:var(--amber-text)}
.tb-avatar img{width:100%;height:100%;object-fit:cover}
.topbar.on-dark .tb-avatar{color:#eaf1f6;background:rgba(255,255,255,.09);border-color:rgba(255,255,255,.18)}

@media(max-width:940px){.tb-nav{display:none}.tb-sep{display:none}}
@media(max-width:520px){
  .tb-brand{font-size:16px;letter-spacing:.26em}
  .tb-link{padding:10px 10px}
  .tb-cta{padding:10px 14px}
}

/* ============================================================
   LOADER
   ============================================================ */
#loader{
  position:fixed;inset:0;z-index:1000;
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(180deg,#8fbde8 0%,#c2dff5 52%,var(--paper) 100%);
  transition:opacity .6s var(--ease-soft),visibility .6s var(--ease-soft);
}
#loader.done{opacity:0;visibility:hidden;pointer-events:none}
.loader-mark{
  display:flex;align-items:center;gap:.3em;
  font-family:var(--serif);font-weight:500;
  font-size:clamp(32px,6.5vw,62px);letter-spacing:.34em;
  color:var(--ink-1);padding-left:.34em;
  transition:transform .6s var(--ease),filter .6s var(--ease),opacity .6s var(--ease);
}
#loader.done .loader-mark{transform:scale(1.06);filter:blur(5px);opacity:0}
.loader-mark span{
  display:inline-block;opacity:0;transform:translate3d(0,.45em,0);
  animation:letterIn .9s var(--ease) forwards;
}
.loader-dot{
  width:.46em;height:.46em;opacity:0;transform:scale(.2);
  animation:ignite 1.1s var(--ease) .78s forwards;
}
@keyframes letterIn{to{opacity:1;transform:none}}
@keyframes ignite{
  0%{opacity:0;transform:scale(.2);box-shadow:0 0 0 rgba(226,168,87,0)}
  62%{opacity:1;transform:scale(1.16);box-shadow:0 0 30px rgba(226,168,87,.75),0 0 66px rgba(226,168,87,.4)}
  100%{opacity:1;transform:scale(1);box-shadow:0 0 16px rgba(226,168,87,.55)}
}

/* ============================================================
   HERO — procedural sky
   The sky is a fragment shader (clouds advected through a
   domain-warped fbm, dithered to kill banding). The CSS
   gradient underneath is the fallback and the first paint.
   The sun disc is a DOM element so it stays razor sharp while
   the shader renders at a fraction of device resolution.
   ============================================================ */
#hero{
  position:relative;min-height:100svh;
  display:flex;flex-direction:column;justify-content:center;
  padding:calc(92px + 3vh) var(--gutter) clamp(74px,10vh,112px);
  overflow:hidden;isolation:isolate;
  background:linear-gradient(180deg,#83b6e6 0%,#a9cfef 24%,#c9e2f6 48%,#e2eef8 72%,#eef4fa 88%,var(--paper) 100%);
  color:var(--ink-1);
}
#skyGL{
  position:absolute;inset:0;width:100%;height:100%;z-index:0;
  opacity:0;transition:opacity 1.2s var(--ease-soft);
}
#skyGL.on{opacity:1}

/* the sun — crisp DOM disc, matched to the shader's glow centre */
.sun{
  position:absolute;top:16%;left:79%;z-index:1;
  width:clamp(64px,7vw,104px);aspect-ratio:1;
  transform:translate(-50%,-50%);
  pointer-events:none;
}
.sun i{
  position:absolute;inset:0;border-radius:50%;
  background:radial-gradient(circle at 42% 36%,#fffdf7 0%,#fff2d8 30%,#ffd79b 55%,#f0ab5a 78%,#d4813c 100%);
  box-shadow:0 0 26px rgba(255,214,150,.85),0 0 70px rgba(255,196,120,.45),0 0 150px rgba(255,190,110,.28);
  animation:sunBreathe 9s var(--ease-soft) infinite;
}
.sun i::after{
  content:'';position:absolute;inset:-40%;border-radius:50%;
  border:1px solid rgba(255,232,196,.32);
  animation:halo 10s var(--ease-soft) infinite;
}
@keyframes sunBreathe{0%,100%{transform:scale(1)}50%{transform:scale(1.035)}}
@keyframes halo{
  0%{transform:scale(.72);opacity:.55}
  70%{opacity:0}
  100%{transform:scale(1.5);opacity:0}
}

.hero-inner{position:relative;z-index:3;width:100%;max-width:1100px;margin-inline:auto;text-align:center}

/* THE LOCKUP.
   Three authored lines — "AI Chief of Staff / for / <flip> Founders" —
   that must hold at every viewport. Wrapping is therefore switched off
   entirely and the size is driven by vw, so the lines shrink to fit
   rather than re-flowing into a different shape. 8.1vw keeps the two
   long lines (17 characters each, ~8.4em at this tracking) inside the
   90vw the gutters leave, all the way down to a 320px phone. */
#hero .t-display{
  margin-bottom:0;
  text-wrap:normal;
  font-size:clamp(30px,8.1vw,84px);
  line-height:1.04;
}
#hero .t-display .ln > i{white-space:nowrap}

/* the hinge word, set in the serif so a single short line reads as a
   deliberate beat instead of an accident of wrapping */
.hero-for{
  font-family:var(--serif);
  font-style:italic;
  font-weight:400;
  font-size:.62em;
  /* the short line carries a full line box at the display size, which
     opens a hole above and below it — pulled back in so the three
     lines read as one lockup rather than three stacked headings */
  line-height:.92;
  letter-spacing:-.01em;
  color:#3d5567;
}
#hero .hero-sub{
  margin:26px auto 0;max-width:540px;
  font-size:clamp(15.5px,1.4vw,19px);color:#31485c;font-weight:400;
}
.hero-cta{display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap;margin-top:34px}
#hero .btn--ghost{
  border-color:rgba(14,27,38,.2);
  background:rgba(255,255,255,.42);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  color:#22384a;
}
#hero .btn--ghost:hover{border-color:rgba(14,27,38,.4);background:rgba(255,255,255,.62)}

/* the flipping word.
   An inline-grid STACK (both words share one cell) so the two
   can never collide, plus a width measured off-document and
   animated, so the trailing word glides instead of sitting
   after a hole. The old version measured inside the clipped
   box, guessed low, and permanently sliced the last letter off
   "Pre-Seed". The vertical padding/margin pair widens the clip
   region without moving the baseline, so tall caps can't crop. */
.flip{
  display:inline-grid;
  vertical-align:top;
  text-align:left;
  color:var(--amber-text);
  overflow:hidden;
  padding-block:.1em;margin-block:-.1em;
  transition:width .58s var(--ease);
}
.flip > span{
  grid-area:1/1;
  white-space:nowrap;
  opacity:0;
  transform:translate3d(0,.5em,0);
  filter:blur(6px);
  transition:opacity .5s var(--ease),transform .6s var(--ease),filter .5s var(--ease);
}
.flip > span.on{opacity:1;transform:none;filter:blur(0)}
.flip > span.out{opacity:0;transform:translate3d(0,-.5em,0);filter:blur(6px)}

.scroll-cue{
  position:absolute;left:50%;bottom:26px;z-index:3;
  transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;gap:10px;
  font-family:var(--mono);font-size:9.5px;font-weight:500;
  letter-spacing:.26em;text-transform:uppercase;color:#5c7386;
}
.scroll-cue i{
  width:1px;height:38px;overflow:hidden;position:relative;
  background:rgba(14,27,38,.14);
}
.scroll-cue i::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(180deg,transparent,var(--amber-text));
  animation:cue 2.6s var(--ease-soft) infinite;
}
@keyframes cue{
  0%{transform:translateY(-100%)}
  55%,100%{transform:translateY(100%)}
}
@media(max-height:720px){.scroll-cue{display:none}}
/* ============================================================
   THINKS AHEAD
   The headline used to sit alone against half a screen of empty
   paper. It now runs as a pair: copy on the left, a scrubbed
   film of the same morning on the right, with the three beats
   as cards beneath instead of bare columns in a rule grid.
   ============================================================ */
.how-top{
  display:grid;grid-template-columns:1.02fr .98fr;
  gap:clamp(30px,4.6vw,68px);align-items:center;
  margin-bottom:clamp(44px,7vh,82px);
}
.how-top .s-head{margin-bottom:0;max-width:none}
.how-top .s-head .t-lead{max-width:46ch}

.film{position:relative;margin:0}
.film-frame{
  position:relative;overflow:hidden;
  aspect-ratio:16/11;
  border-radius:var(--r-xl);
  background:radial-gradient(120% 100% at 68% 8%,#16202a 0%,#0a1119 46%,#070c12 100%);
  border:1px solid rgba(14,27,38,.10);
  box-shadow:0 2px 4px rgba(15,40,60,.05),
             0 34px 68px -34px rgba(15,40,60,.62);
  /* every size inside .ui is expressed in cqw, so the whole dashboard
     scales with the card instead of needing a JS-computed transform */
  container-type:inline-size;
}

/* ---------- the miniature product ----------
   A crop of the real dashboard — sidebar, greeting, composer, the
   Need-to-know rail — rather than a photograph of a desk. Nothing
   here is an image; it is the same parts the app is built from, at
   1/3 scale, so the section shows the product it is describing. */
.ui{
  position:absolute;inset:0;display:grid;
  grid-template-columns:17.5cqw 1fr 30cqw;
  font-size:2.2cqw;line-height:1.4;color:#dce6ee;
  letter-spacing:-.005em;
}
.ui svg{width:2.2cqw;height:2.2cqw;stroke-width:1.7;flex:0 0 auto;opacity:.75}

/* staged items rise in as the scroll passes their threshold */
.ui [data-stage]{
  opacity:0;transform:translate3d(0,1.6cqw,0);
  transition:opacity .5s var(--ease),transform .6s var(--ease);
}
.ui [data-stage].on{opacity:1;transform:none}

/* sidebar */
.ui-side{
  display:flex;flex-direction:column;gap:2cqw;
  padding:3cqw 1.8cqw;
  border-right:1px solid rgba(255,255,255,.06);
  background:rgba(255,255,255,.014);
}
.ui-brand{display:flex;align-items:center;gap:1.2cqw;font-size:2.6cqw;font-weight:560;letter-spacing:-.02em;padding-left:.4cqw}
.ui-brand .sundot{width:2.1cqw;height:2.1cqw}
.ui-new{
  display:flex;align-items:center;gap:1cqw;
  padding:1.3cqw 1.3cqw;border-radius:1.4cqw;
  background:rgba(226,168,87,.11);border:1px solid rgba(226,168,87,.24);
  color:var(--amber-glow);font-weight:500;white-space:nowrap;font-size:2.05cqw;
}
.ui-new span{font-size:2.7cqw;line-height:0;opacity:.9}
.ui-nav{display:flex;flex-direction:column;gap:.3cqw}
.ui-navi{
  display:flex;align-items:center;gap:1.2cqw;font-size:2.05cqw;
  padding:1.2cqw 1.2cqw;border-radius:1.1cqw;color:#8ba0af;
}
.ui-navi.is-on{background:rgba(255,255,255,.06);color:#eaf1f6}
.ui-navi.is-on svg{opacity:1;color:var(--amber-glow)}
/* one row only. "your chief of staff" wrapped to three lines in a
   column this narrow, which made the calmest part of the app look
   cramped — the live dot carries the same "she is on" meaning. */
.ui-me{
  margin-top:auto;display:flex;align-items:center;gap:1.2cqw;
  padding:1.3cqw;border-radius:1.4cqw;background:rgba(255,255,255,.05);
}
.ui-face{
  flex:0 0 auto;width:3.2cqw;height:3.2cqw;border-radius:50%;
  background:radial-gradient(circle at 38% 34%,#fff4e0,#e2a857 52%,#a3512a 100%);
}
.ui-me b{font-weight:560;font-size:2.05cqw;line-height:1.2}
.ui-live{
  margin-left:auto;flex:0 0 auto;width:1.3cqw;height:1.3cqw;border-radius:50%;
  background:#6fbf73;box-shadow:0 0 0 .35cqw rgba(111,191,115,.18);
}

/* main column */
.ui-main{padding:3cqw 2.6cqw;display:flex;flex-direction:column;min-width:0}
.ui-day{
  font-family:var(--mono);font-size:1.8cqw;font-weight:500;
  letter-spacing:.18em;text-transform:uppercase;color:#7d94a4;
}
.ui-greet{
  font-family:var(--serif);font-size:3.9cqw;line-height:1.26;
  font-weight:400;letter-spacing:-.015em;color:#f0f5f9;
  margin-top:1.8cqw;text-wrap:balance;
}
.ui-greet span{display:block}
.ui-greet em{font-style:normal;color:var(--amber-glow)}
.ui-greet u{
  text-decoration:none;
  box-shadow:inset 0 -.14em 0 rgba(226,168,87,.55);
}
.ui-composer{
  margin-top:2.6cqw;padding:2.1cqw 2.1cqw 3.6cqw;
  border-radius:1.8cqw;border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.035);
}
.ui-ph{display:inline-flex;align-items:center;color:#7d94a4}
.ui-caret{
  display:inline-block;width:.16em;height:1.05em;margin-left:.28em;
  background:var(--amber-glow);vertical-align:-.16em;
  animation:uiCaret 1.15s steps(1) infinite;
}
@keyframes uiCaret{0%,50%{opacity:1}51%,100%{opacity:0}}
/* placed in flow after the composer, not pinned to the bottom: pinned,
   it ran under whatever the tallest neighbouring panel was */
.ui-tasksline{margin-top:2.6cqw;display:flex;flex-direction:column;gap:.7cqw;font-size:2.05cqw}
.ui-tasksline b{font-weight:560;color:#e6eef4}
.ui-tasksline span{color:#7d94a4}

/* right rail */
.ui-rail{display:flex;flex-direction:column;gap:1.7cqw;padding:3cqw 2.2cqw;min-width:0}
.ui-card{
  border-radius:1.8cqw;padding:1.9cqw 1.9cqw 2cqw;
  background:rgba(255,255,255,.045);
  border:1px solid rgba(255,255,255,.075);
}
.ui-card-h{
  display:flex;align-items:center;gap:1.1cqw;
  font-size:2.1cqw;font-weight:560;color:#eaf1f6;
  padding-bottom:1.2cqw;
}
.ui-card-h .livedot{width:1.4cqw;height:1.4cqw}
.ui-card-h--alt{color:var(--amber-glow)}
.ui-card p{
  font-size:1.95cqw;line-height:1.4;color:#9db1bf;
  padding:1.2cqw 0;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06);
}
.ui-card p:last-child{padding-bottom:0}
/* the suggestion spark */
.ui-card-h--alt ~ p{display:flex;gap:1.2cqw;align-items:flex-start;color:#c3d2dc}
.ui-card-h--alt ~ p > i{
  flex:0 0 auto;width:2.4cqw;height:2.4cqw;margin-top:.15em;border-radius:.7cqw;
  background:radial-gradient(circle at 40% 36%,#fff4e0,#e2a857 60%,#a3512a 100%);
  opacity:.85;
}

/* below the two-column break the card gets wider relative to the page,
   so the rail would dominate — drop it and let the morning read as
   greeting + composer, which is the part that carries the point */
@container (max-width: 420px){
  .ui{grid-template-columns:22cqw 1fr}
  .ui-rail{display:none}
}
.film-vignette{
  position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(120% 90% at 70% 10%,rgba(255,206,140,.16),transparent 58%),
    radial-gradient(100% 100% at 50% 50%,transparent 46%,rgba(4,12,18,.5) 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07);
}
/* the timestamp lives under the frame, not inside it: floated over the
   screen it landed on whichever panel happened to be tallest */
.film-cap{
  display:flex;align-items:center;gap:9px;margin:11px 2px 0;
  font-family:var(--mono);font-size:10.5px;font-weight:500;
  letter-spacing:.16em;text-transform:uppercase;color:var(--fg-3);
}
/* the scrub position, drawn as a hairline under the frame */
.film-rail{
  display:block;position:relative;height:1px;margin:16px 2px 0;
  background:var(--line);overflow:hidden;
}
.film-rail > i{
  position:absolute;inset:0 auto 0 0;width:0;
  background:linear-gradient(90deg,transparent,var(--amber));
}
@media(max-width:900px){
  .how-top{grid-template-columns:1fr;gap:34px}
  .film-frame{aspect-ratio:16/10}
}

/* ---------- the three beats ---------- */
.beats{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:clamp(12px,1.5vw,20px);
  list-style:none;
}
.beat{
  position:relative;overflow:hidden;
  padding:28px 26px 30px;
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  background:linear-gradient(180deg,var(--paper-raised) 0%,rgba(255,255,255,.5) 100%);
  transition:transform var(--t-mid) var(--ease),
             box-shadow var(--t-mid) var(--ease),
             border-color var(--t-mid) var(--ease-soft);
}
.beat:hover{
  transform:translateY(-4px);
  border-color:rgba(14,27,38,.16);
  box-shadow:0 1px 2px rgba(15,40,60,.05),0 24px 46px -28px rgba(15,40,60,.55);
}
/* the accent rule draws itself across the card top as the beat lands */
.beat::before{
  content:'';position:absolute;left:0;top:0;height:2px;width:0;
  background:linear-gradient(90deg,var(--amber),rgba(226,168,87,0));
  transition:width 1.2s var(--ease) var(--rv-d,0ms);
}
.beat.in::before{width:100%}
/* a warmth that only arrives on hover */
.beat::after{
  content:'';position:absolute;right:-30%;top:-60%;width:70%;aspect-ratio:1;
  border-radius:50%;pointer-events:none;opacity:0;
  background:radial-gradient(circle,rgba(226,168,87,.22),transparent 68%);
  transition:opacity var(--t-slow) var(--ease-soft);
}
.beat:hover::after{opacity:1}
.beat-i{
  font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.16em;
  color:var(--accent);margin-bottom:22px;display:block;
}
.beat h3{margin-bottom:10px;position:relative}
.beat p{font-size:15px;line-height:1.6;color:var(--fg-2);position:relative}
@media(max-width:820px){
  .beats{grid-template-columns:1fr}
  .beat{padding:24px 22px 26px}
  .beat-i{margin-bottom:16px}
}

/* ============================================================
   DEMO PANEL — the one product moment on the page.
   A dark instrument sitting on the daylight ground: this is
   where the value contrast comes from, instead of from art.
   ============================================================ */
.panel{
  position:relative;max-width:660px;margin:0 auto;
  border-radius:var(--r-xl);
  background:linear-gradient(180deg,#132430 0%,#0c1a24 100%);
  border:1px solid rgba(255,255,255,.08);
  box-shadow:
    0 1px 0 rgba(255,255,255,.09) inset,
    0 2px 6px -2px rgba(11,23,32,.3),
    0 24px 60px -22px rgba(11,23,32,.55),
    0 60px 120px -50px rgba(11,23,32,.45);
  overflow:hidden;
  color:#eaf1f6;
}
/* a soft light source inside the panel, top-left, so it reads
   as a lit object rather than a flat dark rectangle */
.panel::before{
  content:'';position:absolute;left:-10%;top:-40%;width:70%;height:110%;
  background:radial-gradient(ellipse at 40% 50%,rgba(255,206,140,.10),transparent 68%);
  pointer-events:none;
}
.panel-bar{
  position:relative;display:flex;align-items:center;gap:11px;
  padding:15px 20px;border-bottom:1px solid rgba(255,255,255,.07);
}
.panel-bar .sundot{width:11px;height:11px}
.panel-title{
  font-family:var(--mono);font-size:10.5px;font-weight:500;
  letter-spacing:.2em;text-transform:uppercase;color:#c3d4de;
}
.panel-time{
  margin-left:auto;font-family:var(--mono);font-size:10.5px;
  letter-spacing:.12em;color:#6d8494;font-variant-numeric:tabular-nums;
}
.panel-body{position:relative;padding:8px 0}

.row{
  display:flex;align-items:center;gap:14px;
  padding:14px 20px;
  opacity:0;transform:translate3d(0,14px,0);
  transition:opacity .7s var(--ease),transform .7s var(--ease),background .3s var(--ease-soft);
}
.row.show{opacity:1;transform:none}
.row + .row{box-shadow:0 -1px 0 rgba(255,255,255,.05)}
.row-ic{
  flex:0 0 auto;width:34px;height:34px;border-radius:11px;
  display:grid;place-items:center;
  background:rgba(255,206,140,.10);
  border:1px solid rgba(255,206,140,.18);
  color:var(--amber-glow);
}
.row-ic svg{width:17px;height:17px}
.row-txt{flex:1;font-size:14.5px;line-height:1.45;color:#dbe6ee}
.row-act{
  flex:0 0 auto;
  font-family:var(--mono);font-size:9.5px;font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;
  padding:8px 14px;border-radius:999px;
  background:var(--amber);color:var(--on-amber);
  display:inline-flex;align-items:center;gap:6px;
  transition:background var(--t-mid) var(--ease-soft),color var(--t-mid) var(--ease-soft),
             transform var(--t-fast) var(--ease-soft);
}
.row-act:hover{background:var(--amber-hi)}
.row-act svg{width:12px;height:12px;stroke-width:2.4}
/* the approved state — one row per loop resolves, which is the
   whole product promise acted out rather than described */
.row.done .row-act{
  background:transparent;color:#7fae7a;
  box-shadow:inset 0 0 0 1px rgba(127,174,122,.45);
}
.row.done .row-txt{color:#8ba1b0}
.row.done .row-ic{background:rgba(127,174,122,.10);border-color:rgba(127,174,122,.22);color:#8ec288}

.panel-foot{
  position:relative;display:flex;align-items:center;gap:10px;
  padding:14px 20px;border-top:1px solid rgba(255,255,255,.07);
  font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;color:#7b94a3;
}
.livedot{
  width:7px;height:7px;border-radius:50%;background:var(--amber-glow);flex:0 0 auto;
  box-shadow:0 0 9px rgba(255,202,133,.8);
  animation:live 1.9s var(--ease-soft) infinite;
}
@keyframes live{0%,100%{opacity:.35;transform:scale(.78)}50%{opacity:1;transform:scale(1.12)}}
.panel-foot .count{margin-left:auto;font-variant-numeric:tabular-nums}

@media(max-width:560px){
  .row{padding:13px 15px;gap:11px}
  .row-txt{font-size:13.5px}
  .row-act{padding:7px 11px;font-size:9px}
}

/* ============================================================
   THE RULE — the dark beat
   ============================================================ */
#rule{overflow:hidden}
#rule::before{
  content:'';position:absolute;left:50%;top:-10%;width:min(900px,110%);height:80%;
  transform:translateX(-50%);pointer-events:none;z-index:0;
  background:radial-gradient(ellipse 50% 50% at 50% 50%,rgba(255,196,120,.13),transparent 70%);
}
#rule .wrap{z-index:1}
.rule-grid{
  display:grid;grid-template-columns:1.15fr .85fr;
  gap:clamp(32px,6vw,84px);align-items:center;
}
@media(max-width:900px){.rule-grid{grid-template-columns:1fr;gap:44px}}

/* the approval control, drawn as an object — states the rule
   instead of only asserting it in prose */
.gate{
  position:relative;padding:30px;border-radius:var(--r-xl);
  background:rgba(255,255,255,.035);
  border:1px solid rgba(255,255,255,.10);
  box-shadow:0 1px 0 rgba(255,255,255,.07) inset;
}
.gate-label{
  font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;
  color:#7b94a3;margin-bottom:14px;
}
.gate-task{font-size:16px;line-height:1.45;color:#e3edf3;margin-bottom:22px;font-weight:450}
.gate-track{
  position:relative;height:52px;border-radius:14px;overflow:hidden;
  background:rgba(0,0,0,.28);border:1px solid rgba(255,255,255,.09);
}
/* The fill sweeps with clip-path, not width, so a SECOND copy of
   the label can live inside it at full width. The letters invert
   exactly as the amber passes under them — instead of the label
   spending a second as light-grey-on-amber, which was
   unreadable at every frame in between. */
.gate-fill{
  position:absolute;inset:0;
  background:linear-gradient(90deg,var(--amber),var(--amber-hi));
  clip-path:inset(0 100% 0 0);
  transition:clip-path 1.5s var(--ease);
}
.gate.armed .gate-fill{clip-path:inset(0 0 0 0)}
.gate-txt{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-family:var(--mono);font-size:10.5px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;
  color:#9fb4c2;
}
.gate-txt--on{color:var(--on-amber)}
.gate-note{
  margin-top:16px;font-family:var(--mono);font-size:10px;letter-spacing:.06em;
  color:#6d8494;text-align:center;
}

/* ============================================================
   CONSTELLATION — precise SVG orbital diagram.
   Replaces the old version, where every node animated to
   opacity 0 and the section spent half its life empty.
   ============================================================ */
.orbit-wrap{
  position:relative;width:min(100%,560px);margin:clamp(16px,3vh,36px) auto 0;
  aspect-ratio:1;
}
.orbit{width:100%;height:100%;overflow:visible}
.orbit .ring{fill:none;stroke:var(--line-strong);stroke-width:1;stroke-dasharray:2 7;opacity:.7}
.orbit .spoke{stroke:var(--line-strong);stroke-width:1;opacity:.5}
/* light travelling inward along each spoke */
.orbit .pulse{
  stroke:var(--amber);stroke-width:1.6;stroke-linecap:round;
  stroke-dasharray:16 260;
  animation:travel 4.6s linear infinite;
}
@keyframes travel{
  0%{stroke-dashoffset:0;opacity:0}
  8%{opacity:.9}
  70%{opacity:.9}
  100%{stroke-dashoffset:-276;opacity:0}
}
.orbit .node-bg{
  fill:var(--paper-raised);
  stroke:var(--line-strong);stroke-width:1;
}
.orbit .node-ic{color:var(--amber-text)}
.orbit .node{
  transform-box:fill-box;transform-origin:center;
  animation:nodeBob 7s var(--ease-soft) infinite;
}
@keyframes nodeBob{0%,100%{opacity:.86}50%{opacity:1}}
.orbit-sun{filter:drop-shadow(0 0 22px rgba(226,168,87,.55))}

.orbit-caption{
  text-align:center;font-family:var(--serif);font-style:italic;font-weight:400;
  font-size:clamp(18px,2.2vw,27px);line-height:1.34;letter-spacing:-.01em;
  color:var(--fg-1);max-width:620px;margin:clamp(18px,3vh,34px) auto 0;
}
/* ============================================================
   PRICING
   Two fixes the old grid needed:
   1. CONTRAST. Amber is a SURFACE token now (--amber, light)
      and is only ever paired with --on-amber (8.1:1). Small
      amber TEXT uses --amber-text (5.4:1). The old page used
      one dark amber for both, so labels on buttons vanished.
   2. ALIGNMENT. Every card is the same grid with named rows,
      so price, capacity, features and CTA sit on shared
      baselines no matter how the copy wraps.
   ============================================================ */
.price-toggle{
  display:inline-flex;align-items:center;gap:3px;
  padding:4px;border-radius:999px;
  background:var(--fill);border:1px solid var(--line);
  margin-bottom:clamp(28px,4.5vh,44px);
}
.price-toggle button{
  position:relative;
  font-family:var(--mono);font-size:10.5px;font-weight:500;
  letter-spacing:.15em;text-transform:uppercase;
  color:var(--fg-2);
  padding:9px 18px;border-radius:999px;
  display:inline-flex;align-items:center;gap:7px;
  transition:color var(--t-mid) var(--ease-soft),background var(--t-mid) var(--ease-soft);
}
.price-toggle button:hover{color:var(--fg-1)}
.price-toggle button[aria-pressed="true"]{
  background:var(--ink-1);color:#eef5fa;
}
.price-toggle .save{
  font-size:9.5px;letter-spacing:.1em;
  padding:3px 7px;border-radius:999px;
  background:rgba(226,168,87,.22);color:var(--amber-text);
}
.price-toggle button[aria-pressed="true"] .save{background:var(--amber);color:var(--on-amber)}

.tier-grid{
  display:grid;grid-template-columns:repeat(4,1fr);
  gap:14px;align-items:stretch;
}
.tier{
  display:grid;
  grid-template-rows:auto auto auto auto 1fr auto;   /* name / price / note / cap / feats / cta */
  padding:24px 22px;border-radius:var(--r-lg);
  background:var(--paper-raised);
  border:1px solid var(--line);
  box-shadow:0 1px 2px rgba(15,40,60,.04),0 10px 26px -18px rgba(15,40,60,.3);
  text-align:left;
  transition:transform var(--t-mid) var(--ease-soft),box-shadow var(--t-mid) var(--ease-soft),border-color var(--t-mid) var(--ease-soft);
}
.tier:hover{transform:translateY(-3px);box-shadow:0 1px 2px rgba(15,40,60,.05),0 20px 40px -22px rgba(15,40,60,.4)}
.tier.featured{
  border-color:rgba(226,168,87,.6);
  box-shadow:0 0 0 1px rgba(226,168,87,.35),0 14px 40px -20px rgba(180,115,44,.45);
  background:linear-gradient(180deg,#fffaf2 0%,var(--paper-raised) 46%);
}
.tier-badge{
  position:absolute;top:-11px;left:22px;
  font-family:var(--mono);font-size:9.5px;font-weight:500;
  letter-spacing:.16em;text-transform:uppercase;
  background:var(--amber);color:var(--on-amber);
  border-radius:999px;padding:5px 11px;white-space:nowrap;
  box-shadow:0 4px 12px -4px rgba(180,115,44,.6);
}
/* The volume-discount badge (Power): outlined, not filled, so only ONE plan
   reads as the steer. Mirrors PlanBadge tone="value" in the React card. */
.tier-badge.value{
  background:var(--paper-raised);color:var(--amber-text);
  border:1px solid rgba(226,168,87,.7);box-shadow:none;
}
.tier{position:relative}

.tier-name{font-size:17px;font-weight:600;letter-spacing:-.015em;color:var(--fg-1)}
.tier-tag{font-size:13.5px;line-height:1.4;color:var(--fg-3);margin-top:4px;min-height:2.8em}

.tier-price{display:flex;align-items:baseline;gap:6px;margin-top:16px}
.tier-price .amt{
  font-size:36px;font-weight:600;letter-spacing:-.035em;color:var(--fg-1);
  font-variant-numeric:tabular-nums;line-height:1;
}
.tier-price .per{font-size:13px;color:var(--fg-3)}
.tier-note{
  margin-top:8px;font-family:var(--mono);font-size:10px;letter-spacing:.05em;
  color:var(--fg-3);min-height:1.5em;
}

.tier-cap{
  margin-top:18px;padding:9px 12px;border-radius:9px;
  background:rgba(226,168,87,.13);
  font-family:var(--mono);font-size:10px;font-weight:500;letter-spacing:.05em;
  color:var(--amber-text);
  min-height:3.2em;display:flex;align-items:center;
}
.tier-feats{list-style:none;margin:18px 0 22px;display:flex;flex-direction:column;gap:9px}
.tier-feats li{display:flex;align-items:flex-start;gap:9px;font-size:13px;line-height:1.4;color:var(--fg-2)}
.tier-feats li.off{color:var(--fg-3)}
.tf-ic{flex:0 0 auto;width:14px;height:14px;margin-top:2px;color:#4f8248}
.tier-feats li.off .tf-ic{color:var(--fg-3);opacity:.6}

.tier-cta{
  display:flex;align-items:center;justify-content:center;
  font-family:var(--mono);font-size:10.5px;font-weight:500;
  letter-spacing:.15em;text-transform:uppercase;text-decoration:none;
  padding:13px 16px;border-radius:11px;
  border:1px solid var(--line-strong);color:var(--fg-1);
  transition:background var(--t-mid) var(--ease-soft),border-color var(--t-mid) var(--ease-soft),
             color var(--t-mid) var(--ease-soft),transform var(--t-fast) var(--ease-soft);
}
.tier-cta:hover{background:var(--ink-1);border-color:var(--ink-1);color:#eef5fa}
.tier-cta:active{transform:scale(.98)}
/* featured CTA: amber SURFACE + near-black ink = 8.1:1 */
.tier.featured .tier-cta{background:var(--amber);border-color:var(--amber);color:var(--on-amber);
  box-shadow:0 1px 0 rgba(255,255,255,.45) inset,0 6px 18px -8px rgba(180,115,44,.6)}
.tier.featured .tier-cta:hover{background:var(--amber-hi);border-color:var(--amber-hi);color:var(--on-amber)}

.pricing-note{
  max-width:620px;margin:clamp(24px,4vh,40px) auto 0;text-align:center;
  font-size:12.5px;line-height:1.6;color:var(--fg-3);
}
@media(max-width:1060px){.tier-grid{grid-template-columns:repeat(2,1fr);max-width:640px;margin-inline:auto}}
@media(max-width:600px){.tier-grid{grid-template-columns:1fr;max-width:380px}.tier-tag{min-height:0}.tier-cap{min-height:0}}

/* ============================================================
   HUB — evening
   ============================================================ */
.hub-grid{display:grid;grid-template-columns:.95fr 1.05fr;gap:clamp(32px,6vw,80px);align-items:center}
@media(max-width:900px){.hub-grid{grid-template-columns:1fr;gap:40px}}
.hub-orb{
  position:relative;width:min(100%,400px);aspect-ratio:1;margin-inline:auto;
  border-radius:50%;overflow:hidden;
  animation:hubFloat 9s var(--ease-soft) infinite;
  -webkit-mask:radial-gradient(circle at 50% 50%,#000 56%,rgba(0,0,0,.55) 74%,transparent 88%);
  mask:radial-gradient(circle at 50% 50%,#000 56%,rgba(0,0,0,.55) 74%,transparent 88%);
}
/* the device now moves: rings turning, core breathing. The clip is
   already cropped square to the device, so it just fills the circle —
   none of the offset gymnastics the wide annotated render needed. */
.hub-orb .hub-vid{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;display:block;
  opacity:0;transition:opacity 1.2s var(--ease-soft);
}
.hub-orb .hub-vid.on{opacity:1}
.hub-orb::after{
  content:'';position:absolute;inset:0;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle at 50% 50%,transparent 52%,rgba(11,23,32,.5) 84%);
}
.hub-halo{
  position:absolute;inset:-14%;border-radius:50%;z-index:-1;pointer-events:none;
  background:radial-gradient(circle,rgba(255,196,120,.2),rgba(191,80,53,.07) 46%,transparent 70%);
  filter:blur(28px);animation:hubFloat 9s var(--ease-soft) infinite;
}
@keyframes hubFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
.hub-figure{position:relative}
.pill{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--mono);font-size:10px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;
  color:var(--accent);border:1px solid var(--line-strong);border-radius:999px;padding:8px 15px;
  margin-top:26px;
}
.pill::before{content:'';width:5px;height:5px;border-radius:50%;background:currentColor}
.hub-scene{margin-top:22px}
.hub-scene em{font-family:var(--serif);font-style:italic;color:var(--accent)}

/* ============================================================
   CTA + FOOTER — the close, still in evening
   ============================================================ */
#cta{text-align:center;padding-bottom:clamp(64px,9vh,110px);overflow:hidden}
#cta::before{
  content:'';position:absolute;left:50%;top:0;width:min(760px,100%);height:64%;
  transform:translateX(-50%);pointer-events:none;z-index:0;
  background:radial-gradient(ellipse 50% 50% at 50% 40%,rgba(255,196,120,.11),transparent 70%);
}
/* the orb, running behind the close. Masked to a soft disc and held
   well under the copy — it is atmosphere, not an image to look at.
   Parallax + scale are driven by scroll (see luna.js). */
.cta-vid{
  position:absolute;left:50%;top:50%;z-index:0;
  width:min(1240px,150%);aspect-ratio:16/9;height:auto;
  transform:translate3d(-50%,-50%,0);
  object-fit:cover;pointer-events:none;
  opacity:0;transition:opacity 1.6s var(--ease-soft);
  mix-blend-mode:screen;
  /* blurred past legibility on purpose. Read sharp it is a photograph
     of a sphere sitting behind the headline and fighting it; blurred
     it is the light the headline sits in. */
  filter:blur(34px) saturate(1.15);
  /* a CIRCLE mask (radius = half the height) finishes its fade inside
     the element's own box, so the section's overflow clip never shows
     as a hard horizontal cut across the glow */
  -webkit-mask-image:radial-gradient(closest-side circle at 50% 50%,#000 12%,rgba(0,0,0,.4) 46%,transparent 74%);
          mask-image:radial-gradient(closest-side circle at 50% 50%,#000 12%,rgba(0,0,0,.4) 46%,transparent 74%);
}
.cta-vid.on{opacity:.38}
#cta .wrap{z-index:1}
#cta .t-lead{margin:20px auto 0;max-width:520px}
.actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:32px}

footer{
  background:var(--navy);color:#a7bcc9;
  padding:clamp(44px,6vh,64px) var(--gutter) 36px;
  border-top:1px solid rgba(255,255,255,.08);
}
.foot-grid{
  max-width:var(--measure);margin-inline:auto;
  display:flex;align-items:flex-start;justify-content:space-between;gap:32px;flex-wrap:wrap;
}
.foot-brand{
  display:inline-flex;align-items:center;gap:.44em;
  font-family:var(--serif);font-weight:600;font-size:20px;letter-spacing:.3em;color:#eaf1f6;
}
.foot-brand .sundot{width:.5em;height:.5em}
.foot-creds{
  margin-top:14px;font-family:var(--mono);font-size:10.5px;letter-spacing:.13em;
  text-transform:uppercase;color:#7b94a3;line-height:1.9;max-width:52ch;
}
.foot-links{display:flex;gap:clamp(28px,5vw,64px);flex-wrap:wrap}
.foot-col{display:flex;flex-direction:column;gap:11px}
.foot-col h4{
  font-family:var(--mono);font-size:9.5px;font-weight:500;letter-spacing:.2em;
  text-transform:uppercase;color:#7b94a3;margin-bottom:3px;
}
.foot-col a{
  font-size:13.5px;color:#a7bcc9;text-decoration:none;width:fit-content;
  transition:color var(--t-fast) var(--ease-soft);
}
.foot-col a:hover{color:var(--amber-glow)}
.foot-base{
  max-width:var(--measure);margin:clamp(32px,5vh,52px) auto 0;
  padding-top:22px;border-top:1px solid rgba(255,255,255,.08);
  display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
  font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:#7b94a3;
}
/* ============================================================
   ACCESS PAGE — full-screen view, hash-routed
   ============================================================ */
#accessPage{
  position:fixed;inset:0;z-index:500;
  display:flex;align-items:center;justify-content:center;
  padding:9vh var(--gutter);overflow-y:auto;
  background:var(--navy);color:#eaf1f6;
  opacity:0;visibility:hidden;transform:scale(1.02);
  transition:opacity .5s var(--ease),visibility .5s var(--ease),transform .6s var(--ease);
}
#accessPage.open{opacity:1;visibility:visible;transform:none}
#accessPage::before{
  content:'';position:absolute;left:50%;top:-6%;width:min(720px,110%);height:70%;
  transform:translateX(-50%);pointer-events:none;
  background:radial-gradient(ellipse 50% 50% at 50% 50%,rgba(255,196,120,.14),transparent 70%);
}
.ap-inner{position:relative;width:100%;max-width:420px;margin:auto;text-align:center}
.ap-back{
  position:fixed;top:22px;left:var(--gutter);z-index:2;
  display:inline-flex;align-items:center;gap:9px;padding:10px 0;
  font-family:var(--mono);font-size:10.5px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;
  color:#7b94a3;transition:color var(--t-fast) var(--ease-soft);
}
.ap-back:hover{color:var(--amber-glow)}
.ap-head{transition:opacity .45s var(--ease),transform .45s var(--ease)}
#accessPage.celebrating .ap-head{opacity:0;transform:translateY(-14px);pointer-events:none}
.ap-orb{
  position:relative;width:76px;height:76px;margin:0 auto 26px;border-radius:50%;
  background:radial-gradient(circle at 42% 36%,#fffdf7,#ffd79b 46%,#d4813c 92%);
  box-shadow:0 0 34px rgba(255,196,120,.55),0 0 90px rgba(255,196,120,.28);
  animation:sunBreathe 8s var(--ease-soft) infinite;
}
#accessPage h2{font-size:clamp(28px,4.6vw,42px);font-weight:500;letter-spacing:-.03em;line-height:1.06;margin-bottom:12px}
.ap-sub{color:#a7bcc9;font-size:15px;line-height:1.6;max-width:360px;margin:0 auto 32px}

.access{position:relative;min-height:300px}
.access-form{display:flex;flex-direction:column;gap:12px;text-align:left;
  transition:opacity .5s var(--ease),transform .5s var(--ease),filter .5s var(--ease)}
.access.sent .access-form{opacity:0;transform:scale(.97) translateY(-8px);filter:blur(6px);pointer-events:none}
.hidden-bot{position:absolute;left:-9999px;top:-9999px}
.field{position:relative}
.field input{
  width:100%;padding:24px 16px 10px;
  font-family:var(--sans);font-size:15.5px;color:#eaf1f6;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.14);border-radius:var(--r-md);
  outline:none;
  transition:border-color var(--t-mid) var(--ease-soft),background var(--t-mid) var(--ease-soft),
             box-shadow var(--t-mid) var(--ease-soft);
}
.field input:focus{border-color:var(--amber);background:rgba(255,196,120,.07);box-shadow:0 0 0 3px rgba(226,168,87,.16)}
.field label{
  position:absolute;left:16px;top:17px;pointer-events:none;
  font-size:15px;color:#7b94a3;
  transition:top .22s var(--ease-soft),font-size .22s var(--ease-soft),
             letter-spacing .22s var(--ease-soft),color .22s var(--ease-soft);
}
.field input:focus + label,
.field input:not(:placeholder-shown) + label{
  top:8px;font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--amber-glow);
}
.field input.err{border-color:var(--terracotta);background:rgba(191,80,53,.1)}
.access-btn{
  margin-top:6px;width:100%;
  font-family:var(--mono);font-size:11.5px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;
  background:var(--amber);color:var(--on-amber);
  border-radius:var(--r-md);padding:17px 24px;
  box-shadow:0 1px 0 rgba(255,255,255,.4) inset,0 8px 24px -8px rgba(180,115,44,.6);
  transition:background var(--t-mid) var(--ease-soft),transform var(--t-fast) var(--ease-soft);
}
.access-btn:hover{background:var(--amber-hi)}
.access-btn:active{transform:scale(.985)}
.access-note{
  margin-top:6px;text-align:center;
  font-family:var(--mono);font-size:10px;letter-spacing:.03em;color:#6d8494;
}
.access-note a{color:var(--amber-glow);text-decoration:none}
.access-note a:hover{text-decoration:underline}

.access-done{
  position:absolute;inset:0;
  display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;
  opacity:0;transform:translateY(10px);pointer-events:none;
  transition:opacity .8s var(--ease) .3s,transform .8s var(--ease) .3s;
}
.access.sent .access-done{opacity:1;transform:none;pointer-events:auto}
.done-orb{
  position:relative;width:70px;height:70px;margin-bottom:20px;border-radius:50%;
  background:radial-gradient(circle at 42% 36%,#fffdf7,#ffd79b 44%,#d4813c 90%);
  transform:scale(.2);opacity:0;
}
.access.sent .done-orb{animation:doneIgnite .95s var(--ease) .28s forwards}
@keyframes doneIgnite{
  0%{transform:scale(.2);opacity:0;box-shadow:0 0 0 rgba(226,168,87,0)}
  58%{transform:scale(1.1);opacity:1;box-shadow:0 0 46px rgba(226,168,87,.65),0 0 96px rgba(226,168,87,.32)}
  100%{transform:scale(1);opacity:1;box-shadow:0 0 28px rgba(226,168,87,.45)}
}
.done-check{
  position:absolute;top:50%;left:50%;width:32px;height:32px;transform:translate(-50%,-50%);
  fill:none;stroke:var(--on-amber);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;
}
.done-check path{stroke-dasharray:34;stroke-dashoffset:34}
.access.sent .done-check path{animation:drawCheck .5s var(--ease-soft) .98s forwards}
@keyframes drawCheck{to{stroke-dashoffset:0}}
.done-spark{position:absolute;top:50%;left:50%;width:0;height:0;pointer-events:none}
.done-spark i{
  position:absolute;left:0;top:0;width:5px;height:5px;border-radius:50%;
  background:var(--amber-glow);box-shadow:0 0 12px rgba(255,202,133,.9);opacity:0;
}
.access.sent .done-spark i{animation:spark 1.2s var(--ease) .46s forwards}
@keyframes spark{
  0%{opacity:0;transform:translate(-2.5px,-2.5px) scale(.3)}
  18%{opacity:1}
  70%{opacity:.9}
  100%{opacity:0;transform:translate(calc(var(--dx) - 2.5px),calc(var(--dy) - 2.5px)) scale(1)}
}
.done-tag{
  display:inline-flex;align-items:center;gap:8px;margin-bottom:14px;
  font-family:var(--mono);font-size:9.5px;font-weight:500;letter-spacing:.22em;text-transform:uppercase;
  color:var(--amber-glow);
}
.done-tag i{width:6px;height:6px;border-radius:50%;background:var(--amber-glow);
  box-shadow:0 0 10px rgba(255,202,133,.9);animation:live 1.8s var(--ease-soft) infinite}
.done-title{font-size:clamp(28px,4.6vw,40px);font-weight:500;letter-spacing:-.03em;line-height:1.08;
  color:#eaf1f6;margin-bottom:12px}
.done-sub{font-size:14.5px;line-height:1.6;color:#a7bcc9;max-width:340px}

/* ============================================================
   REDUCED MOTION
   Everything degrades to a legible static page. Nothing here
   is load-bearing for comprehension.
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
  [data-reveal]{opacity:1;transform:none}
  .ln > i{transform:none}
  .row{opacity:1;transform:none}
  .beat::before{width:100%}
  .sun i::after{display:none}
}

/* ============================================================
   MAGNETIC TARGETS
   Last in the file on purpose: every one of these elements sets
   its own `transition` shorthand earlier, which would drop the
   `translate` longhand the cursor writes. Declared here, it wins.
   ============================================================ */
.btn,.tb-cta,.tier-cta,.access-btn{
  transition:
    background   var(--t-mid)  var(--ease-soft),
    border-color var(--t-mid)  var(--ease-soft),
    color        var(--t-mid)  var(--ease-soft),
    box-shadow   var(--t-mid)  var(--ease-soft),
    transform    var(--t-fast) var(--ease-soft),
    translate    .5s           var(--ease);
  will-change:translate;
}
/* while the pointer is inside, the pull has to be immediate; the
   half-second easing above exists only to carry it home on leave.
   The duration list mirrors the property order above it. */
.magnet{transition-duration:var(--t-mid),var(--t-mid),var(--t-mid),var(--t-mid),var(--t-fast),0s}

/* ============================================================
   NARROW
   ============================================================ */
@media(max-width:640px){
  :root{--bay:clamp(64px,9vh,96px)}
  .rule-grid,.hub-grid{gap:34px}
  .foot-grid{flex-direction:column;gap:34px}
  .foot-base{flex-direction:column;align-items:flex-start;gap:10px}
  .film-stamp{left:12px;bottom:11px;font-size:9.5px;padding:6px 10px}
}