/* ============================================================
   TYPEFACES — self-hosted, SIL Open Font License
   Hanken Grotesk carries display and reading text.
   ============================================================ */
@font-face{
  font-family:'Hanken Grotesk'; font-style:normal; font-weight:300 900; font-display:swap;
  src:url('/fonts/HankenGrotesk-300900-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Hanken Grotesk'; font-style:normal; font-weight:300 900; font-display:swap;
  src:url('/fonts/HankenGrotesk-300900-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* ============================================================
   TOKENS
   Single-theme by intent: the brand is a night sky.
   ============================================================ */
:root{
  color-scheme: dark;

  --void:        #0B0710;
  --plum-900:    #14091C;
  --plum-800:    #1A0F24;
  --plum-700:    #241333;
  --plum-600:    #321B45;

  --violet:      #9B5CFF;
  --violet-deep: #6B2FD6;
  --orchid:      #C77DFF;
  --pink:        #F0A5C6;

  --ivory:       #F7F0E8;
  --ivory-soft:  #E4D9E0;
  --mauve:       #C4B6C8;
  --mauve-dim:   #9C8CA6;

  --line:        rgba(199,125,255,.16);
  --line-strong: rgba(199,125,255,.30);
  --surface:     rgba(255,255,255,.038);
  --surface-2:   rgba(255,255,255,.062);

  --grad-cta:    linear-gradient(103deg, #7B36F0 0%, #9B5CFF 42%, #C77DFF 74%, #F0A5C6 100%);
  --grad-rule:   linear-gradient(90deg, transparent, rgba(199,125,255,.45), transparent);

  --shadow-sm:   0 1px 2px rgba(0,0,0,.5);
  --shadow-md:   0 18px 40px -22px rgba(0,0,0,.9);
  --shadow-lg:   0 48px 100px -40px rgba(0,0,0,.95);
  --glow-violet: 0 0 0 1px rgba(155,92,255,.28), 0 16px 44px -20px rgba(155,92,255,.7);
  --glow-soft:   0 24px 90px -30px rgba(155,92,255,.5);

  --r-sm: 10px; --r-md: 16px; --r-lg: 24px; --r-xl: 32px; --r-pill: 999px;

  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px; --s-5: 24px;
  --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px; --s-10: 128px;

  --font-display: 'Hanken Grotesk', "Segoe UI", sans-serif;
  --font-body: 'Hanken Grotesk', "Segoe UI Variable Text", "Segoe UI", -apple-system, BlinkMacSystemFont, sans-serif;

  /* The ceiling is set by what fits the hero column at
     a comfortable 3-4 lines, not by how big the face can go. */
  /* The floor is set so "Stop second-guessing" holds one line at 390px. */
  --t-display: clamp(2.1rem, 4.4vw, 3.5rem);
  --t-h2:      clamp(1.95rem, 4vw, 2.95rem);
  --t-h3:      clamp(1.3rem, 1.9vw, 1.5rem);
  --t-body:    1.125rem;
  --t-lead:    clamp(1.125rem, 1.6vw, 1.26rem);
  --t-small:   1.0325rem;
  --t-label:   .765rem;

  --wrap: 1120px;
  --measure: 68ch;
  --ease: cubic-bezier(.2,.72,.2,1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--void);
  color:var(--ivory-soft);
  font-family:var(--font-body);
  font-size:var(--t-body);
  font-weight:380;
  line-height:1.66;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,svg,canvas{ max-width:100%; display:block; }
a{ color:inherit; }

/* ---------- ambient field ---------- */
.field{ position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden; }
.field::after{
  content:""; position:absolute; inset:-50%;
  background-image:radial-gradient(rgba(255,255,255,.5) .5px, transparent .5px);
  background-size:3px 3px; opacity:.022;
}
.aurora{ position:absolute; border-radius:50%; filter:blur(90px); will-change:transform; }
.aurora--a{
  width:min(78vw,900px); aspect-ratio:1; top:-26vh; left:-14vw;
  background:radial-gradient(circle at 40% 40%, rgba(123,54,240,.55), rgba(123,54,240,0) 62%);
  animation:driftA 46s var(--ease) infinite alternate;
}
.aurora--b{
  width:min(66vw,760px); aspect-ratio:1; top:6vh; right:-20vw;
  background:radial-gradient(circle at 55% 45%, rgba(199,125,255,.38), rgba(199,125,255,0) 64%);
  animation:driftB 61s var(--ease) infinite alternate;
}
.aurora--c{
  width:min(60vw,700px); aspect-ratio:1; top:150vh; left:34vw;
  background:radial-gradient(circle at 50% 50%, rgba(240,165,198,.20), rgba(240,165,198,0) 66%);
  animation:driftA 74s var(--ease) infinite alternate-reverse;
}
@keyframes driftA{ from{ transform:translate3d(0,0,0) scale(1);} to{ transform:translate3d(6vw,7vh,0) scale(1.14);} }
@keyframes driftB{ from{ transform:translate3d(0,0,0) scale(1.06);} to{ transform:translate3d(-7vw,10vh,0) scale(.92);} }
#stars{ position:absolute; inset:0; width:100%; height:100%; opacity:.85; }

/* ---------- layout ---------- */
.wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:clamp(20px,5vw,40px); }
main{ position:relative; z-index:1; }
section{ padding-block:clamp(76px,10vw,var(--s-10)); position:relative; }

/* ---------- type ---------- */
h1,h2,h3{
  font-family:var(--font-display); font-weight:400; text-wrap:balance; margin:0;
  color:var(--ivory); letter-spacing:-.018em;
}
/* Each sentence is its own block, so the browser has nothing to balance
   across; greedy filling gives the tighter, less ragged setting. */
h1{ font-size:var(--t-display); line-height:1.14; text-wrap:normal; }
h2{ font-size:var(--t-h2); line-height:1.14; max-width:22ch; }
h2.wide{ max-width:30ch; }
h3{ font-size:var(--t-h3); line-height:1.26; letter-spacing:-.012em; }
p{ margin:0; max-width:var(--measure); }
.lead{ font-size:var(--t-lead); color:var(--mauve); line-height:1.6; }
.muted{ color:var(--mauve); }
.dim{ color:var(--mauve-dim); font-size:var(--t-small); }
.label{
  font-size:var(--t-label); letter-spacing:.19em; text-transform:uppercase;
  font-weight:600; color:var(--orchid);
}
.rule{ height:1px; background:var(--grad-rule); border:0; margin:0; }

/* The one emphasised phrase in the headline. Emphasis is drawn, not
   colored: a constellation line resolves under it at the end of the
   hero sequence. */
/* The headline is three sentences, so it is set as three lines. Letting
   the browser balance them broke "Stop" onto a line of its own. */
.ln{ display:block; }
.mark{ position:relative; display:inline-block; white-space:nowrap; }
.mark::after{
  content:""; position:absolute; left:0; right:.06em; bottom:-.02em; height:1px;
  background:linear-gradient(90deg, rgba(199,125,255,.15), var(--orchid) 20%, var(--orchid) 80%, rgba(199,125,255,.15));
  transform:scaleX(0); transform-origin:left center;
  transition:transform 900ms var(--ease-out) 700ms;
}
.mark .node{
  position:absolute; bottom:calc(-.02em - 2px); width:5px; height:5px; border-radius:50%;
  background:var(--orchid); box-shadow:0 0 8px rgba(199,125,255,.9);
  opacity:0; transition:opacity 420ms var(--ease-out);
}
.mark .node:nth-of-type(1){ left:31%; transition-delay:1180ms; }
.mark .node:nth-of-type(2){ left:73%; transition-delay:1320ms; }
.is-lit .mark::after{ transform:scaleX(1); }
.is-lit .mark .node{ opacity:1; }

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  min-height:52px; padding:0 26px; border-radius:var(--r-pill);
  font:inherit; font-size:var(--t-small); font-weight:600; letter-spacing:.01em;
  text-decoration:none; cursor:pointer; border:0; position:relative; isolation:isolate;
  background:var(--grad-cta); color:#170922;
  box-shadow:var(--glow-violet);
  transition:transform .3s var(--ease-out), box-shadow .3s var(--ease-out), filter .3s var(--ease-out);
}
.btn::after{
  content:""; position:absolute; inset:0; border-radius:inherit; z-index:-1;
  background:var(--grad-cta); filter:blur(16px); opacity:.45; transform:translateY(6px);
  transition:opacity .3s var(--ease-out), transform .3s var(--ease-out);
}
.btn--ghost{ background:transparent; color:var(--ivory); box-shadow:inset 0 0 0 1px var(--line-strong); }
.btn--ghost::after{ opacity:0; }
.btn--sm{ min-height:44px; padding:0 18px; font-size:.95rem; }
@media (hover:hover){
  .btn:hover{ transform:translateY(-2px); filter:saturate(1.06); }
  .btn:hover::after{ opacity:.75; transform:translateY(10px); }
  .btn--ghost:hover{ box-shadow:inset 0 0 0 1px rgba(199,125,255,.6); background:rgba(199,125,255,.07); }
}
.btn:active{ transform:translateY(0) scale(.985); }
:where(a,button,summary,input,textarea):focus-visible{
  outline:2px solid var(--orchid); outline-offset:3px; border-radius:6px;
}
.skip-link{
  background:var(--ivory); border-radius:0 0 var(--r-sm) 0; color:var(--void);
  left:0; padding:12px 16px; position:fixed; top:0; transform:translateY(-120%);
  transition:transform .2s var(--ease); z-index:100;
}
.skip-link:focus{ transform:translateY(0); }

/* ---------- header ---------- */
.header{
  position:sticky; top:0; z-index:40;
  backdrop-filter:blur(14px) saturate(1.2); -webkit-backdrop-filter:blur(14px) saturate(1.2);
  background:linear-gradient(180deg, rgba(11,7,16,.86), rgba(11,7,16,.55));
  border-bottom:1px solid transparent;
  transition:border-color .4s var(--ease), background .4s var(--ease);
}
.header.is-stuck{ border-bottom-color:var(--line); background:rgba(11,7,16,.93); }
.header__in{ display:flex; align-items:center; justify-content:space-between; gap:var(--s-5); min-height:74px; }
.logo{
  font-family:var(--font-display); font-size:1.02rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--ivory); text-decoration:none; white-space:nowrap;
  display:inline-flex; align-items:center; gap:10px; min-height:44px;
}
.logo__mark{
  width:9px; height:9px; border-radius:50%;
  background:var(--grad-cta); box-shadow:0 0 14px 2px rgba(199,125,255,.75); flex:none;
}
.nav{ display:flex; align-items:center; gap:var(--s-2); }
.nav a{
  display:inline-flex; align-items:center; min-height:44px; padding:0 14px;
  font-size:.985rem; color:var(--mauve); text-decoration:none; border-radius:var(--r-pill);
  transition:color .25s var(--ease), background .25s var(--ease);
}
@media (hover:hover){ .nav a:hover{ color:var(--ivory); background:rgba(199,125,255,.08); } }
.header .btn{ margin-left:var(--s-3); }
.menu-btn{
  display:none; width:46px; height:46px; align-items:center; justify-content:center;
  background:transparent; border:1px solid var(--line); border-radius:14px; cursor:pointer;
}
.menu-btn span{ display:block; width:18px; height:1.5px; background:var(--ivory); position:relative; transition:transform .3s var(--ease); }
.menu-btn span::before,.menu-btn span::after{
  content:""; position:absolute; left:0; width:18px; height:1.5px; background:var(--ivory);
  transition:transform .3s var(--ease), opacity .2s var(--ease);
}
.menu-btn span::before{ top:-6px; } .menu-btn span::after{ top:6px; }
.menu-btn[aria-expanded="true"] span{ transform:rotate(45deg); }
.menu-btn[aria-expanded="true"] span::before{ transform:translateY(6px) rotate(-90deg); }
.menu-btn[aria-expanded="true"] span::after{ opacity:0; }
.sheet{ display:none; border-top:1px solid var(--line); background:linear-gradient(180deg, rgba(26,15,36,.98), rgba(11,7,16,.98)); }
.sheet[data-open="true"]{ display:block; }
.sheet .wrap{ display:flex; flex-direction:column; padding-block:var(--s-4) var(--s-6); gap:2px; }
.sheet a{
  display:flex; align-items:center; min-height:52px; text-decoration:none;
  color:var(--ivory-soft); border-bottom:1px solid rgba(255,255,255,.05); font-size:1.06rem;
}
.sheet .btn{ margin-top:var(--s-4); }

/* ---------- hero ---------- */
.hero{ padding-top:clamp(44px,7vw,80px); padding-bottom:clamp(56px,7vw,92px); }
.hero__grid{ display:grid; gap:clamp(44px,6vw,64px); align-items:center; }
.hero__copy{ display:flex; flex-direction:column; gap:var(--s-5); }
.hero__cta{ display:flex; flex-wrap:wrap; gap:var(--s-3); margin-top:var(--s-2); }
.hero__cta .btn{ flex:1 1 auto; min-width:min(100%,232px); }
.trust{ font-size:.985rem; color:var(--mauve-dim); max-width:46ch; line-height:1.55; }

/* Motion enhances an already-complete page; it never gates the offer. */
.is-lit .hero__copy > *{
  opacity:1; transform:none;
  transition:opacity .62s var(--ease-out), transform .62s var(--ease-out);
  transition-delay:calc(var(--i,0) * 80ms);
}

/* ---------- clarity read card ---------- */
.preview{ position:relative; justify-self:center; width:min(100%,392px); }
.preview::before{
  content:""; position:absolute; inset:-14% -10%;
  background:radial-gradient(60% 55% at 50% 42%, rgba(155,92,255,.5), rgba(155,92,255,0) 70%);
  filter:blur(30px); z-index:-1; opacity:0; transition:opacity 1.1s var(--ease-out) .5s;
}
.is-lit .preview::before{ opacity:1; }
.compose{
  position:absolute; inset:0; z-index:2; pointer-events:none;
  transition:opacity .5s var(--ease-out);
}
.compose.is-done{ opacity:0; }

.card{
  position:relative;
  border-radius:var(--r-xl);
  background:linear-gradient(168deg, rgba(50,27,69,.9), rgba(20,9,28,.94));
  box-shadow:var(--shadow-lg), inset 0 1px 0 rgba(255,255,255,.09);
  border:1px solid var(--line);
  padding:clamp(20px,4vw,26px);
  display:flex; flex-direction:column; gap:var(--s-4);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
}
.preview .card{ transform:rotate(-1.6deg); }

/* Compose states add visual texture without hiding the read if JS fails. */
.card--compose.is-surfaced{
  background:linear-gradient(168deg, rgba(50,27,69,.9), rgba(20,9,28,.94));
  border-color:var(--line);
  box-shadow:var(--shadow-lg), inset 0 1px 0 rgba(255,255,255,.09);
  transition:background .7s var(--ease-out), border-color .7s var(--ease-out), box-shadow .7s var(--ease-out);
}
.card--compose.is-composed > *{
  opacity:1; transform:none;
  transition:opacity .5s var(--ease-out), transform .5s var(--ease-out);
  transition-delay:calc(var(--i,0) * 95ms);
}

.card__top{ display:flex; align-items:center; justify-content:space-between; gap:var(--s-3); }
.card__title{ font-family:var(--font-display); font-size:1.2rem; color:var(--ivory); }
.chip{
  display:inline-flex; align-items:center; gap:7px; padding:5px 12px; border-radius:var(--r-pill);
  font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; font-weight:600;
  color:var(--orchid); background:rgba(199,125,255,.1); border:1px solid var(--line);
  white-space:nowrap;
}
.bubble{
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.07);
  border-radius:18px 18px 18px 6px; padding:14px 16px;
  font-size:var(--t-small); color:var(--ivory-soft); line-height:1.55;
}
.read__block{ position:relative; display:flex; flex-direction:column; gap:8px; }
.read__block + .read__block{ padding-top:var(--s-4); }
/* Dividers draw rather than appear — the read assembles line by line. */
.read__block + .read__block::before{
  content:""; position:absolute; top:0; left:0; right:0; height:1px;
  background:rgba(255,255,255,.09);
  transform:scaleX(0); transform-origin:left center;
}
.card--compose.is-composed .read__block + .read__block::before{
  transform:scaleX(1);
  transition:transform .6s var(--ease-out);
  transition-delay:calc(var(--i,0) * 95ms);
}
html:not(.js) .read__block + .read__block::before{ transform:scaleX(1); }
.read__block p{ font-size:var(--t-small); line-height:1.62; color:var(--ivory-soft); }
.lens{
  display:flex; gap:12px; align-items:flex-start;
  background:linear-gradient(120deg, rgba(155,92,255,.14), rgba(240,165,198,.08));
  border:1px solid var(--line); border-radius:var(--r-md); padding:14px 16px;
}
.lens svg{ flex:none; margin-top:3px; }
.lens p{ font-size:.965rem; color:var(--mauve); line-height:1.55; }

/* ---------- section furniture ---------- */
.sec-lead{ font-size:var(--t-lead); color:var(--mauve); max-width:60ch; line-height:1.6; margin-top:var(--s-5); }

/* ---------- recognition cards ---------- */
.thoughts{ display:grid; gap:var(--s-4); margin-top:var(--s-7); grid-template-columns:1fr; }
.thought{
  border:1px solid var(--line); border-radius:var(--r-lg);
  background:var(--surface); padding:clamp(20px,3vw,28px);
  font-family:var(--font-display); font-size:clamp(1.16rem,2vw,1.36rem); line-height:1.38;
  color:var(--ivory);
  box-shadow:var(--shadow-md);
  transition:border-color .4s var(--ease), background .4s var(--ease), transform .4s var(--ease);
}
@media (hover:hover){ .thought:hover{ border-color:var(--line-strong); background:var(--surface-2); transform:translateY(-3px); } }

/* ---------- sample ---------- */
.sample__grid{ display:grid; gap:clamp(32px,5vw,56px); align-items:start; }
.sample .card{ max-width:560px; width:100%; }
.sample__cta{ display:flex; flex-direction:column; gap:var(--s-4); align-items:flex-start; margin-top:var(--s-6); }

/* ---------- steps ---------- */
.steps{ margin-top:var(--s-7); padding:0; list-style:none; counter-reset:step; }
.step{
  display:grid; grid-template-columns:auto 1fr; gap:var(--s-5);
  padding-block:var(--s-5); border-top:1px solid var(--line);
}
.step__n{
  counter-increment:step; font-family:var(--font-display); font-size:1.75rem; line-height:1;
  color:var(--orchid); font-variant-numeric:tabular-nums; min-width:2.4ch;
}
.step__n::before{ content:counter(step,decimal-leading-zero); }
.step__body{ display:flex; flex-direction:column; gap:var(--s-2); }

/* ---------- benefits: an editorial ledger, not a card grid ---------- */
.ledger{ margin-top:var(--s-7); display:grid; grid-template-columns:1fr; }
.ledger__item{
  padding-block:var(--s-6); border-top:1px solid var(--line);
  display:flex; flex-direction:column; gap:var(--s-3);
}
.ledger__item p{ font-size:var(--t-small); color:var(--mauve); }

/* ---------- lenses ---------- */
.lenses{
  border:1px solid var(--line); border-radius:var(--r-xl); padding:clamp(28px,5vw,56px);
  background:
    radial-gradient(120% 130% at 88% 0%, rgba(155,92,255,.2), transparent 58%),
    radial-gradient(90% 100% at 0% 100%, rgba(240,165,198,.12), transparent 60%),
    rgba(255,255,255,.028);
  display:flex; flex-direction:column; gap:var(--s-5);
}
.lenses .sec-lead{ margin-top:0; }
.pills{ display:flex; flex-wrap:wrap; gap:10px; }
.pill{
  display:inline-flex; align-items:center; min-height:40px; padding:0 18px; border-radius:var(--r-pill);
  border:1px solid var(--line-strong); background:rgba(255,255,255,.045);
  font-size:.94rem; color:var(--ivory-soft);
}

/* ---------- comparison ---------- */
.compare{ margin-top:var(--s-7); display:flex; flex-direction:column; }
.row{ display:grid; grid-template-columns:1fr; gap:6px; padding-block:var(--s-6); border-top:1px solid var(--line); }
.row__k{ font-weight:600; color:var(--ivory); font-size:1.06rem; }
.row__v{ font-size:var(--t-small); color:var(--mauve); }
.row--ours{ border-top-color:var(--line-strong); }
.row--ours .row__k{
  font-family:var(--font-display); font-weight:400; font-size:1.32rem;
  display:flex; align-items:center; gap:12px;
}
.row--ours .row__k::before{
  content:""; width:7px; height:7px; border-radius:50%; flex:none;
  background:var(--grad-cta); box-shadow:0 0 12px 1px rgba(199,125,255,.7);
}
.row--ours .row__v{ color:var(--ivory-soft); }

/* ---------- privacy ---------- */
.boundaries{ display:flex; flex-direction:column; margin-top:var(--s-6); padding:0; list-style:none; }
.boundary{
  display:grid; grid-template-columns:auto 1fr; gap:var(--s-4); align-items:start;
  padding-block:var(--s-4); border-bottom:1px solid rgba(255,255,255,.06);
  font-size:var(--t-small); color:var(--ivory-soft); line-height:1.6;
}
.boundary svg{ margin-top:4px; flex:none; }

/* ---------- optional membership bridge ---------- */
.membership-bridge > div{
  padding:clamp(28px,5vw,56px);
  border:1px solid var(--line-strong);
  background:var(--surface-1);
}
.membership-bridge .sec-lead{ margin-bottom:var(--s-6); }

/* ---------- faq ---------- */
.faq{ margin-top:var(--s-6); }
details{ border-bottom:1px solid var(--line); }
summary{
  display:flex; align-items:center; justify-content:space-between; gap:var(--s-4);
  min-height:64px; padding-block:var(--s-4); cursor:pointer; list-style:none;
  font-size:clamp(1.06rem,1.6vw,1.16rem); font-weight:600; color:var(--ivory);
  transition:color .25s var(--ease);
}
summary::-webkit-details-marker{ display:none; }
.summary__icon{
  width:26px; height:26px; flex:none; border-radius:50%; border:1px solid var(--line-strong);
  display:grid; place-items:center; position:relative;
  transition:transform .35s var(--ease-out), background .35s var(--ease-out);
}
.summary__icon::before,.summary__icon::after{ content:""; position:absolute; background:var(--orchid); border-radius:2px; }
.summary__icon::before{ width:11px; height:1.5px; }
.summary__icon::after{ width:1.5px; height:11px; transition:transform .35s var(--ease-out), opacity .35s var(--ease-out); }
details[open] .summary__icon{ transform:rotate(180deg); background:rgba(199,125,255,.12); }
details[open] .summary__icon::after{ transform:scaleY(0); opacity:0; }
@media (hover:hover){ summary:hover{ color:var(--orchid); } }
.answer{ padding-bottom:var(--s-5); }
.answer p{ font-size:var(--t-small); color:var(--mauve); max-width:66ch; }

/* ---------- final ---------- */
.final{ text-align:center; display:flex; flex-direction:column; align-items:center; gap:var(--s-5); padding-top:clamp(56px,8vw,88px); }
.final h2{ max-width:18ch; }
.final p{ margin-inline:auto; }
.final .btn{ min-width:min(100%,288px); }

/* ---------- footer ---------- */
.footer{ border-top:1px solid var(--line); padding-block:var(--s-7); position:relative; z-index:1; }
.footer__in{ display:flex; flex-direction:column; gap:var(--s-5); }
.footer__links{ display:flex; flex-wrap:wrap; gap:var(--s-2) var(--s-5); }
.footer__links a{ display:inline-flex; align-items:center; min-height:44px; color:var(--mauve); text-decoration:none; font-size:var(--t-small); }
@media (hover:hover){ .footer__links a:hover{ color:var(--ivory); } }
.footer .dim{ max-width:var(--measure); }

/* ---------- sticky mobile cta ---------- */
.dock{
  position:fixed; left:0; right:0; bottom:0; z-index:50; display:none;
  padding:12px clamp(16px,4vw,20px) calc(12px + env(safe-area-inset-bottom));
  background:linear-gradient(180deg, rgba(11,7,16,0), rgba(11,7,16,.94) 34%);
  transform:translateY(120%); transition:transform .45s var(--ease-out);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
}
.dock[data-show="true"]{ transform:translateY(0); }
.dock .btn{ width:100%; }
.dock__note{ text-align:center; font-size:.8rem; color:var(--mauve-dim); margin-top:8px; }

/* ---------- staggered lists ----------
   Motion is additive: static, no-JS, and reader-mode content stays visible. */
.stagger.in > *{
  opacity:1; transform:none;
  transition:opacity .55s var(--ease-out), transform .55s var(--ease-out);
  transition-delay:calc(var(--i,0) * 90ms);
}

/* ============================================================
   BREAKPOINTS
   ============================================================ */
@media (min-width:768px){
  .thoughts{ grid-template-columns:repeat(3,1fr); }
  .ledger{ grid-template-columns:repeat(2,1fr); column-gap:var(--s-8); }
  .row{ grid-template-columns:minmax(190px,.8fr) 1.7fr; gap:var(--s-6); align-items:baseline; }
  .footer__in{ flex-direction:row; align-items:center; justify-content:space-between; }
  .final .btn{ min-width:288px; }
}
@media (min-width:1024px){
  .hero__grid{ grid-template-columns:1.18fr .82fr; gap:clamp(48px,5vw,72px); }
  .sample__grid{ grid-template-columns:.9fr 1.1fr; }
  .sample .card{ max-width:none; }
  .sample__cta{ margin-top:0; }
  .hero__cta .btn{ flex:0 1 auto; min-width:0; }
}
@media (max-width:900px){
  /* scoped to the header bar only — the sheet keeps its own CTA */
  .js .nav,.js .header__in .btn{ display:none; }
  .js .menu-btn{ display:flex; }
  .js .dock{ display:block; }
  html:not(.js) .menu-btn,html:not(.js) .nav{ display:none; }
  html:not(.js) .sheet{ display:block; }
}
@media (max-width:640px){
  .hero{ padding-top:26px; }
  .hero__grid{ gap:36px; }
  .hero__copy{ gap:var(--s-4); }
  .hero .lead{ font-size:1.075rem; }
  main > section:last-of-type{ padding-bottom:calc(var(--s-9) + 40px); }
}

/* ---------- reduced motion ----------
   The sequence is an entrance, never a gate: every element is already in
   its final state, so nothing here has to be undone to be readable. */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important; transition-delay:0ms !important;
  }
  .stagger > *,.hero__copy > *,.card--compose > *{ opacity:1; transform:none; }
  .mark::after{ transform:scaleX(1); }
  .mark .node{ opacity:1; }
  .preview::before{ opacity:1; }
  .compose{ display:none; }
  .dock{ transform:translateY(0); }
  .read__block + .read__block::before{ transform:scaleX(1); }
}

/* The ghost button drew its outline with an inset box-shadow. The flat-ink pass
   sets box-shadow:none to remove glows, which took the outline with it, so the
   secondary CTA rendered identical to the primary and the page offered two
   equally weighted choices. Restated as a real border, which nothing strips. */
.btn--ghost{
  background:transparent !important;
  background-image:none !important;
  color:var(--ivory) !important;
  border:1px solid rgba(155,109,232,.55) !important;
}
@media (hover:hover){
  .btn--ghost:hover{
    border-color:rgba(155,109,232,.9) !important;
    background:rgba(155,109,232,.08) !important;
  }
}

/* ============================================================
   FLAT INK PASS
   Production serves this file: Caddy rewrites / to
   /landing/index.html. The React landing route is what runs on a
   local dev server, so a redesign applied only there never
   reaches a visitor. Both surfaces now carry the same treatment.

   The look this replaces was measured against the category:
   CHANI ships 0 gradients, Sanctuary 1, The Pattern 1,
   Co-Star 5. This page shipped 16, plus glow and blur. Flat
   pigment, one violet accent, drawn ornament, nothing looping.
   ============================================================ */
@font-face{
  font-family:'Marcellus YE'; font-style:normal; font-weight:400; font-display:swap;
  src:url('/fonts/Marcellus-400-latin.woff2') format('woff2');
}

:root{
  /* Neutral ground. The old #0B0710 carried a plum cast that did
     much of the work of making the page read as generated. */
  --void:        #0D0D0F;
  --plum-900:    #101014;
  --plum-800:    #141419;
  --plum-700:    #1A1A21;
  --plum-600:    #23232B;

  --violet:      #9B6DE8;
  --violet-deep: #7B52C4;
  --orchid:      #9B6DE8;
  --pink:        #9B6DE8;

  --ivory:       #F2F2F4;
  --ivory-soft:  #DCDCE2;
  --mauve:       #A9A9B4;
  --mauve-dim:   #8A8A95;

  --line:        rgba(155,109,232,.20);
  --line-strong: rgba(155,109,232,.42);
  --surface:     rgba(255,255,255,.03);
  --surface-2:   rgba(255,255,255,.05);

  /* Flat, not gradients. Kept as tokens so every existing
     background:var(--grad-cta) resolves without edits. */
  --grad-cta:    none;
  --grad-rule:   none;

  --shadow-sm:   none;
  --shadow-md:   none;
  --shadow-lg:   none;
  --glow-violet: none;
  --glow-soft:   none;

  --r-sm: 2px; --r-md: 3px; --r-lg: 4px; --r-xl: 4px; --r-pill: 3px;

  --font-display: 'Marcellus YE', Georgia, serif;
}

/* Nothing glows, gradients, blurs or loops on this surface. The earlier
   version of this rule listed element selectors and missed body, html and
   every ::before/::after, which is where the page-level violet washes and
   the hero bloom actually live. */
html, body, html::before, html::after, body::before, body::after,
*, *::before, *::after{
  background-image:none !important;
  box-shadow:none !important;
  filter:none !important;
  backdrop-filter:none !important;
  text-shadow:none !important;
  animation:none !important;
}

/* The primary action stays solid violet; the secondary is an outline,
   so the free chart and the paid tier are not offered at equal weight. */
.btn{
  background:var(--violet) !important;
  color:#0D0D0F !important;
  border:1px solid var(--violet) !important;
  border-radius:3px !important;
}
.btn::after{ display:none !important; }
.btn--ghost{
  background:transparent !important;
  color:var(--ivory) !important;
  border:1px solid rgba(155,109,232,.55) !important;
}
@media (hover:hover){
  .btn:hover{ transform:none !important; filter:none !important; }
  .btn--ghost:hover{ background:rgba(155,109,232,.08) !important; }
}

/* The flat pass removes these decorative layers visually; removing their boxes
   too prevents the old rotated-card halo from widening the mobile document. */
.field::after,.preview::before{display:none !important}
.preview .card{transform:none !important}