/* =========================================================
   9CLI — landing page
   Ultra Black. Neon magenta. Terminal energy.
   ========================================================= */

/* ---------- tokens ---------- */
:root{
  --bg:#000000;
  --panel:#0B0B0C;
  --panel-2:#101013;
  --panel-3:#15151A;
  --line:#1C1C21;
  --line-2:#26262E;

  --text:#F4F4F7;
  --text-2:#B9B9C4;
  --dim:#7E7E8C;
  --faint:#55555F;

  --mag:#FF3DBE;
  --mag-2:#FF5FC8;
  --mag-dim:rgba(255,61,190,.16);
  --cyan:#2BE8FF;
  --cyan-dim:rgba(43,232,255,.14);
  --green:#3DDC97;
  --amber:#FFB84D;
  --red:#FF4D5E;

  --sans:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --mono:ui-monospace,"Cascadia Mono","JetBrains Mono","SF Mono",Menlo,Consolas,monospace;

  --r-sm:6px; --r:10px; --r-lg:14px; --r-xl:20px;
  --wrap:1120px; --wrap-wide:1360px;
  --ease:cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; scroll-padding-top:88px; -webkit-text-size-adjust:100%; }

body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; }
h1,h2,h3,h4{ margin:0; line-height:1.12; letter-spacing:-0.02em; font-weight:700; }
p{ margin:0; }
ul,ol{ margin:0; padding:0; list-style:none; }
button{ font:inherit; color:inherit; }

::selection{ background:var(--mag); color:#000; }

:focus-visible{
  outline:2px solid var(--mag-2);
  outline-offset:3px;
  border-radius:4px;
}

.wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:24px; }
.wrap--wide{ max-width:var(--wrap-wide); }

.visually-hidden{
  position:absolute!important; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

.skip-link{
  position:fixed; top:-100px; left:16px; z-index:200;
  background:var(--mag); color:#000; font-weight:700;
  padding:10px 16px; border-radius:var(--r-sm); text-decoration:none;
  transition:top .18s var(--ease);
}
.skip-link:focus{ top:16px; }

kbd{
  font-family:var(--mono); font-size:.78em;
  background:var(--panel-3); border:1px solid var(--line-2);
  border-bottom-width:2px; border-radius:5px;
  padding:1px 6px; color:var(--text-2);
}

.grad{
  background:linear-gradient(96deg,var(--mag-2) 0%,var(--mag) 42%,var(--cyan) 130%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}

.tok-dim{ color:var(--dim); }
.tok-acc{ color:var(--cyan); }
.tok-red{ color:var(--red); }
.ok{ color:var(--green); }

/* ---------- global scanlines ---------- */
.scanlines{
  position:fixed; inset:0; z-index:150; pointer-events:none;
  background:repeating-linear-gradient(to bottom,
    rgba(255,255,255,.022) 0px, rgba(255,255,255,.022) 1px,
    transparent 1px, transparent 3px);
  mix-blend-mode:overlay; opacity:.65;
}

/* =========================================================
   SPLASH
   ========================================================= */
.splash{
  position:fixed; inset:0; z-index:300;
  display:grid; place-items:center;
  background:#000;
  overflow:hidden;
}
.splash[hidden]{ display:none; }
.splash.is-out{
  animation:splashOut .55s var(--ease) forwards;
}
@keyframes splashOut{
  0%{ opacity:1; }
  55%{ opacity:1; filter:brightness(1.9) saturate(1.4); }
  100%{ opacity:0; visibility:hidden; }
}
.splash__inner{
  display:grid; justify-items:center; gap:26px;
  padding:24px; width:min(320px,72vw);
  animation:splashIn .5s var(--ease) both;
}
@keyframes splashIn{ from{ opacity:0; transform:scale(.94);} to{ opacity:1; transform:none;} }

.splash__logo{ width:min(220px,52vw); }
.splash__status{
  font-family:var(--mono); font-size:12px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--dim);
}
.splash__caret{ color:var(--mag); }
.splash__dots::after{
  content:""; animation:dots 1.2s steps(4,end) infinite;
}
@keyframes dots{ 0%{content:"";} 25%{content:".";} 50%{content:"..";} 75%{content:"...";} }

.splash__bar{
  width:100%; height:2px; background:var(--panel-3);
  border-radius:2px; overflow:hidden;
}
.splash__bar i{
  display:block; height:100%; width:0;
  background:linear-gradient(90deg,var(--mag),var(--cyan));
  box-shadow:0 0 12px var(--mag);
  animation:load 1.5s var(--ease) forwards;
}
@keyframes load{ 0%{width:4%;} 40%{width:52%;} 70%{width:71%;} 100%{width:100%;} }

.splash__scan{
  position:absolute; inset:0; pointer-events:none;
  background:
    repeating-linear-gradient(to bottom, rgba(255,255,255,.045) 0 1px, transparent 1px 3px),
    radial-gradient(ellipse at center, rgba(255,61,190,.14), transparent 62%);
}
.splash__scan::after{
  content:""; position:absolute; left:0; right:0; height:28%;
  background:linear-gradient(to bottom,transparent,rgba(255,61,190,.10),transparent);
  animation:sweep 1.8s linear infinite;
}
@keyframes sweep{ from{ top:-30%; } to{ top:110%; } }

/* ---------- glitch stack (logo) ---------- */
.glitch-stack{ position:relative; display:block; }
.glitch-stack__layer{ display:block; width:100%; }
.glitch-stack__layer--m,
.glitch-stack__layer--c{ position:absolute; inset:0; mix-blend-mode:screen; }
.glitch-stack__layer--m{
  filter:brightness(0) saturate(100%) invert(41%) sepia(93%) saturate(3500%) hue-rotate(300deg);
  animation:glitchM 2.6s steps(1,end) infinite;
}
.glitch-stack__layer--c{
  filter:brightness(0) saturate(100%) invert(74%) sepia(60%) saturate(2000%) hue-rotate(140deg);
  animation:glitchC 2.6s steps(1,end) infinite;
}
.glitch-stack__layer--base{
  position:relative;
  filter:drop-shadow(0 0 18px rgba(255,61,190,.7)) drop-shadow(0 0 60px rgba(255,61,190,.35)) brightness(1.12) saturate(1.1);
  animation:glitchBase 2.6s steps(1,end) infinite;
}
@keyframes glitchM{
  0%,7%,100%{ transform:none; clip-path:none; opacity:0; }
  8%{ transform:translate(-4px,1px); clip-path:inset(12% 0 62% 0); opacity:.85; }
  10%{ transform:translate(3px,-2px); clip-path:inset(58% 0 18% 0); opacity:.85; }
  12%{ opacity:0; }
  46%{ transform:translate(-6px,0); clip-path:inset(30% 0 44% 0); opacity:.8; }
  48%{ opacity:0; }
  77%{ transform:translate(4px,2px); clip-path:inset(70% 0 8% 0); opacity:.8; }
  79%{ opacity:0; }
}
@keyframes glitchC{
  0%,7%,100%{ transform:none; clip-path:none; opacity:0; }
  8%{ transform:translate(4px,-1px); clip-path:inset(12% 0 62% 0); opacity:.7; }
  10%{ transform:translate(-3px,2px); clip-path:inset(58% 0 18% 0); opacity:.7; }
  12%{ opacity:0; }
  46%{ transform:translate(6px,0); clip-path:inset(30% 0 44% 0); opacity:.65; }
  48%{ opacity:0; }
  77%{ transform:translate(-4px,-2px); clip-path:inset(70% 0 8% 0); opacity:.65; }
  79%{ opacity:0; }
}
@keyframes glitchBase{
  0%,7%,13%,45%,49%,76%,80%,100%{ transform:none; }
  9%{ transform:translate(1px,-1px); }
  11%{ transform:translate(-1px,1px); }
  47%{ transform:translate(-2px,0); }
  78%{ transform:translate(1px,1px); }
}

/* =========================================================
   NAV
   ========================================================= */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:120;
  transition:background .25s var(--ease), border-color .25s var(--ease), backdrop-filter .25s;
  border-bottom:1px solid transparent;
}
.nav.is-open{
  background:rgba(0,0,0,.94);
  backdrop-filter:blur(14px) saturate(140%);
  -webkit-backdrop-filter:blur(14px) saturate(140%);
}
.nav.is-stuck{
  background:rgba(0,0,0,.72);
  backdrop-filter:blur(14px) saturate(140%);
  -webkit-backdrop-filter:blur(14px) saturate(140%);
  border-bottom-color:var(--line);
}
.nav__inner{
  display:flex; align-items:center; gap:24px;
  height:68px;
}
.nav__brand{ flex:0 0 auto; display:flex; align-items:center; }
/* The bar is 68px tall; the mark fills all but a 6px gap top and bottom.
   Narrow screens step it down so it never crowds the copy chip. */
.nav__brand img{
  height:56px; width:auto;
  filter:drop-shadow(0 0 10px rgba(255,61,190,.45));
  transition:filter .25s var(--ease);
}
.nav__brand:hover img{ filter:drop-shadow(0 0 16px rgba(255,61,190,.85)); }

.nav__links{ display:flex; gap:26px; margin-left:auto; }
.nav__links a{
  font-size:13.5px; color:var(--text-2); text-decoration:none;
  font-family:var(--mono); letter-spacing:.01em;
  position:relative; padding:4px 0;
  transition:color .18s var(--ease);
}
.nav__links a::after{
  content:""; position:absolute; left:0; right:100%; bottom:0; height:1px;
  background:var(--mag); transition:right .25s var(--ease);
}
.nav__links a:hover{ color:var(--text); }
.nav__links a:hover::after{ right:0; }

.nav__actions{ display:flex; align-items:center; gap:12px; margin-left:auto; }
.nav__links + .nav__actions{ margin-left:0; }

.nav__toggle{
  display:none; width:40px; height:36px; padding:8px;
  background:var(--panel); border:1px solid var(--line); border-radius:var(--r-sm);
  cursor:pointer;
}
.nav__toggle span{
  display:block; height:1.5px; background:var(--text); border-radius:2px;
  transition:transform .22s var(--ease), opacity .18s;
}
.nav__toggle span + span{ margin-top:4px; }
.nav__toggle[aria-expanded="true"] span:nth-child(1){ transform:translateY(5.5px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.nav__toggle[aria-expanded="true"] span:nth-child(3){ transform:translateY(-5.5px) rotate(-45deg); }

.nav__mobile{
  display:none; flex-direction:column; gap:2px;
  background:rgba(0,0,0,.94); border-top:1px solid var(--line);
  backdrop-filter:blur(14px); padding:10px 24px 20px;
}
.nav__mobile a{
  font-family:var(--mono); font-size:15px; text-decoration:none;
  color:var(--text-2); padding:15px 0; border-bottom:1px solid var(--line);
}
.nav__mobile-cta{ color:var(--mag-2)!important; border-bottom:0!important; }

/* =========================================================
   AUTH — Google sign-in / account chip
   Account sign-in only. Nothing here gates a feature.
   ========================================================= */

/* `pending` is the boot state: Firebase has not yet said whether a session
   was restored, so neither control is shown. Without it the page would
   flash "Sign in" at an already signed-in visitor on every load. */
.auth[data-state="pending"] .auth__signin,
.auth[data-state="pending"] .auth__account,
.auth[data-state="out"] .auth__account,
.auth[data-state="in"] .auth__signin{ display:none; }

.auth{ display:flex; align-items:center; }

.auth__signin{
  display:inline-flex; align-items:center; gap:9px;
  padding:9px 14px;
  background:var(--panel); border:1px solid var(--line-2);
  border-radius:var(--r); cursor:pointer;
  font-family:var(--mono); font-size:13px; color:var(--text);
  letter-spacing:.01em; white-space:nowrap;
  transition:border-color .2s var(--ease), background .2s var(--ease), box-shadow .25s var(--ease), transform .2s var(--ease);
}
.auth__signin:hover:not(:disabled){
  border-color:var(--mag); background:#0F0A0E;
  box-shadow:0 0 0 1px rgba(255,61,190,.25), 0 8px 30px -12px rgba(255,61,190,.7);
  transform:translateY(-1px);
}
.auth__signin:disabled{ opacity:.55; cursor:progress; }
.auth__g{ display:inline-flex; flex:0 0 auto; }

.auth__account{ position:relative; }

.auth__chip{
  display:inline-flex; align-items:center; gap:7px;
  padding:4px 9px 4px 4px;
  background:var(--panel); border:1px solid var(--line-2);
  border-radius:999px; cursor:pointer;
  transition:border-color .2s var(--ease), box-shadow .25s var(--ease);
}
.auth__chip:hover,
.auth__chip[aria-expanded="true"]{
  border-color:var(--mag);
  box-shadow:0 0 0 1px rgba(255,61,190,.22);
}
.auth__avatar{
  width:26px; height:26px; border-radius:50%;
  border:1px solid var(--line-2); object-fit:cover; display:block;
}
/* `display:block` above outranks the UA rule for the hidden attribute, so the
   no-photo case needs saying explicitly or an empty box sits beside the initial */
.auth__avatar[hidden]{ display:none; }
.auth__initial{
  width:26px; height:26px; border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--mag-dim); border:1px solid rgba(255,61,190,.35);
  color:var(--mag-2); font-family:var(--mono); font-size:12.5px; font-weight:600;
}
/* the photo wins whenever Google gave us one that loaded */
.auth__avatar:not([hidden]) + .auth__initial{ display:none; }
.auth__caret{
  width:0; height:0; margin-right:1px;
  border-left:4px solid transparent; border-right:4px solid transparent;
  border-top:4.5px solid var(--dim);
  transition:transform .2s var(--ease), border-top-color .2s var(--ease);
}
.auth__chip[aria-expanded="true"] .auth__caret{ transform:rotate(180deg); border-top-color:var(--mag-2); }

/* --- plan / admin badges ---------------------------------
   Status display only. Nothing on the page is gated on these, and the
   client cannot write the fields behind them — the rules deny it.
   Everything is hidden until the Firestore read resolves, so a wrong
   badge never flashes on the way in. */
.auth__badges{ display:inline-flex; align-items:center; gap:5px; }
.auth__badges .auth__badge,
.auth__badges .auth__skeleton{ display:none; }
.auth__badges[data-state="loading"] .auth__skeleton{ display:inline-block; }
.auth__badges[data-state="ready"] .auth__badge--plan{ display:inline-flex; }
.auth__badges[data-state="ready"][data-admin="true"] .auth__badge--admin{ display:inline-flex; }

.auth__badge{
  align-items:center;
  padding:2.5px 7px; border-radius:999px;
  border:1px solid transparent;
  font-family:var(--mono); font-size:9.5px; font-weight:600;
  letter-spacing:.09em; text-transform:uppercase; white-space:nowrap;
}
/* Free is deliberately quiet — it is the default, not an achievement. */
.auth__badge--plan{
  background:var(--panel-3); border-color:var(--line-2); color:var(--dim);
}
/* Pro takes the page's accent, the same magenta the CTAs run on. */
.auth__badge--plan[data-plan="pro"]{
  background:var(--mag-dim); border-color:rgba(255,61,190,.45); color:var(--mag-2);
  box-shadow:0 0 14px -4px rgba(255,61,190,.65);
}
/* Admin is cyan so it never reads as a tier. */
.auth__badge--admin{
  background:var(--cyan-dim); border-color:rgba(43,232,255,.4); color:var(--cyan);
}

/* Holds the plan badge's footprint while the read is in flight, so the
   chip does not jump sideways when the answer lands. */
.auth__skeleton{
  width:36px; height:16px; border-radius:999px;
  background:var(--panel-3); border:1px solid var(--line);
  animation:auth-pulse 1.4s var(--ease) infinite;
}
@keyframes auth-pulse{ 0%,100%{ opacity:.4 } 50%{ opacity:.85 } }

.auth__menu{
  position:absolute; top:calc(100% + 10px); right:0; z-index:130;
  min-width:236px; max-width:290px; padding:14px;
  background:rgba(11,11,12,.97); border:1px solid var(--line-2);
  border-radius:var(--r); text-align:left;
  backdrop-filter:blur(14px) saturate(140%);
  -webkit-backdrop-filter:blur(14px) saturate(140%);
  box-shadow:0 24px 60px -20px rgba(0,0,0,.95), 0 0 0 1px rgba(255,61,190,.08);
}
.auth__menu[hidden]{ display:none; }
.auth__menu-name{
  margin:0; font-size:13.5px; font-weight:600; color:var(--text);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.auth__menu-email{
  margin:2px 0 0; font-family:var(--mono); font-size:11.5px; color:var(--dim);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.auth__menu-note{
  margin:11px 0 0; padding-top:11px; border-top:1px solid var(--line);
  font-size:11.5px; line-height:1.5; color:var(--faint);
}
.auth__signout{
  display:block; width:100%; margin-top:12px; padding:9px 12px;
  background:var(--panel-3); border:1px solid var(--line-2); border-radius:var(--r-sm);
  color:var(--text-2); font-family:var(--mono); font-size:12.5px; cursor:pointer;
  transition:border-color .2s var(--ease), color .2s var(--ease), background .2s var(--ease);
}
.auth__signout:hover{ border-color:var(--red); color:var(--red); background:#120A0C; }

/* --- the in-menu copy for phones --- */
.auth-m{ display:none; padding-top:14px; margin-top:6px; border-top:1px solid var(--line); }
.auth-m[data-state="out"] .auth-m__user,
.auth-m[data-state="in"] .auth-m__signin{ display:none; }

.auth-m__signin{
  display:inline-flex; align-items:center; gap:10px; width:100%;
  padding:13px 16px; justify-content:center;
  background:var(--panel); border:1px solid var(--line-2); border-radius:var(--r);
  color:var(--text); font-family:var(--mono); font-size:14px; cursor:pointer;
}
.auth-m__signin:disabled{ opacity:.55; cursor:progress; }
.auth-m__user{ display:flex; align-items:center; gap:12px; justify-content:space-between; }
.auth-m__id{ display:flex; flex-direction:column; gap:7px; min-width:0; }
.auth-m__email{
  font-family:var(--mono); font-size:12.5px; color:var(--text-2);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.auth-m__signout{
  flex:0 0 auto; padding:10px 14px;
  background:var(--panel-3); border:1px solid var(--line-2); border-radius:var(--r-sm);
  color:var(--text-2); font-family:var(--mono); font-size:12.5px; cursor:pointer;
}

/* =========================================================
   BUTTONS / COPY CHIP
   ========================================================= */
.btn{
  display:inline-flex; align-items:center; gap:8px;
  padding:13px 22px; border-radius:var(--r);
  font-size:14.5px; font-weight:600; text-decoration:none;
  border:1px solid var(--line-2); background:var(--panel);
  color:var(--text);
  transition:border-color .2s var(--ease), background .2s var(--ease), transform .2s var(--ease);
}
.btn--ghost:hover{ border-color:var(--mag); background:var(--mag-dim); transform:translateY(-1px); }

.copy-chip{
  display:inline-flex; align-items:center; gap:10px;
  padding:11px 14px 11px 16px;
  background:var(--panel); border:1px solid var(--line-2);
  border-radius:var(--r); cursor:pointer; position:relative;
  font-family:var(--mono); font-size:13.5px;
  transition:border-color .2s var(--ease), background .2s var(--ease), box-shadow .25s var(--ease), transform .2s var(--ease);
}
.copy-chip code{ font-family:var(--mono); color:var(--text); letter-spacing:.01em; white-space:nowrap; }
.copy-chip__prompt{ color:var(--mag); }
.copy-chip__icon{
  width:14px; height:14px; margin-left:2px; flex:0 0 auto; opacity:.6;
  background:currentColor;
  -webkit-mask:var(--icon-copy) center/contain no-repeat;
  mask:var(--icon-copy) center/contain no-repeat;
  transition:opacity .2s;
}
:root{
  --icon-copy:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='9' y='9' width='13' height='13' rx='2'/%3E%3Cpath d='M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1'/%3E%3C/svg%3E");
  --icon-check:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
}
.copy-chip:hover{
  border-color:var(--mag); background:#0F0A0E;
  box-shadow:0 0 0 1px rgba(255,61,190,.25), 0 8px 30px -12px rgba(255,61,190,.7);
  transform:translateY(-1px);
}
.copy-chip:hover .copy-chip__icon{ opacity:1; }
.copy-chip.is-copied{
  border-color:var(--green);
  box-shadow:0 0 0 1px rgba(61,220,151,.3), 0 8px 30px -14px rgba(61,220,151,.6);
}
.copy-chip.is-copied .copy-chip__icon{
  opacity:1; color:var(--green);
  -webkit-mask-image:var(--icon-check); mask-image:var(--icon-check);
}
.copy-chip.is-copied .copy-chip__prompt{ color:var(--green); }

.copy-chip--sm{ padding:8px 11px 8px 13px; font-size:12.5px; }
.copy-chip--lg{ padding:15px 18px 15px 20px; font-size:16px; }
.copy-chip--hero{ background:#08080A; }

/* =========================================================
   HERO
   ========================================================= */
/* The 40px this used to carry sat under the hero screenshot, which was a big
   enough block to close the section on its own. With the shot moved into
   #showcase the hero ends on the three small meta bullets, and 40px let the
   trust band crowd them. */
.hero{ position:relative; padding:150px 0 72px; }
.hero__bg{ position:absolute; inset:0; overflow:hidden; pointer-events:none; }
.hero__grid{
  position:absolute; inset:-2px;
  background-image:
    linear-gradient(to right, rgba(255,255,255,.035) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(ellipse 80% 60% at 50% 0%, #000 20%, transparent 78%);
  -webkit-mask-image:radial-gradient(ellipse 80% 60% at 50% 0%, #000 20%, transparent 78%);
}
.hero__glow{ position:absolute; border-radius:50%; filter:blur(110px); }
.hero__glow--mag{
  width:760px; height:520px; left:50%; top:-190px; transform:translateX(-50%);
  background:radial-gradient(closest-side, rgba(255,61,190,.30), transparent);
}
.hero__glow--cyan{
  width:520px; height:400px; right:-120px; top:120px;
  background:radial-gradient(closest-side, rgba(43,232,255,.16), transparent);
}

.hero__inner{ position:relative; text-align:center; }

.eyebrow{
  display:inline-flex; align-items:center; gap:9px;
  font-family:var(--mono); font-size:11.5px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--text-2);
  background:var(--panel); border:1px solid var(--line-2);
  padding:7px 14px; border-radius:999px;
}
.eyebrow .dot{
  width:6px; height:6px; border-radius:50%; background:var(--mag);
  box-shadow:0 0 10px var(--mag);
  animation:pulse 2.2s ease-in-out infinite;
}
@keyframes pulse{ 0%,100%{ opacity:1; } 50%{ opacity:.35; } }

.hero__title{
  margin:26px auto 0;
  font-size:clamp(2.2rem, 5.4vw, 4.2rem);
  letter-spacing:-0.035em; max-width:24ch;
}
.hero__sub{
  margin:22px auto 0; max-width:60ch;
  font-size:clamp(1.02rem,1.6vw,1.22rem); color:var(--text-2);
}
.hero__sub strong{ color:var(--text); font-weight:600; }

/* who this is for — understated line under the sub */
.hero__who{
  margin:16px auto 0; max-width:72ch;
  font-family:var(--mono); font-size:12.5px; line-height:1.7;
  color:var(--dim); text-wrap:balance;
}

.hero__cta{
  margin-top:34px; display:flex; gap:14px;
  justify-content:center; flex-wrap:wrap;
}
.hero__meta{
  margin:26px 0 0; display:flex; gap:8px 26px;
  justify-content:center; flex-wrap:wrap;
  font-family:var(--mono); font-size:12px; color:var(--dim);
}
.hero__meta li{ display:flex; align-items:center; gap:8px; }
.hero__meta li::before{ content:"◆"; color:var(--mag); font-size:8px; }

.hero__shot{ margin-top:64px; }

/* ---------- headline glitch ---------- */
.glitch{ position:relative; }
.glitch::before,
.glitch::after{
  content:attr(data-text);
  position:absolute; inset:0;
  pointer-events:none; opacity:0;
}
.glitch::before{ color:var(--mag); }
.glitch::after{ color:var(--cyan); }
.hero__title.glitch::before,
.hero__title.glitch::after{ display:none; } /* h1 uses markup line-breaks; glitch via filter instead */

.hero__title{ animation:titleFlicker 9s steps(1,end) infinite; }
@keyframes titleFlicker{
  0%,3.6%,100%{ text-shadow:none; transform:none; }
  3.8%{ text-shadow:-3px 0 var(--mag), 3px 0 var(--cyan); transform:translateX(1px); }
  4.1%{ text-shadow:3px 0 var(--mag), -2px 0 var(--cyan); transform:translateX(-1px); }
  4.4%{ text-shadow:none; transform:none; }
  38%{ text-shadow:none; }
  38.3%{ text-shadow:-2px 1px var(--mag), 2px -1px var(--cyan); }
  38.6%{ text-shadow:none; }
}

h2.glitch::before,
h2.glitch::after,
h3.glitch::before,
h3.glitch::after{ opacity:0; }
h2.glitch:hover::before,
h3.glitch::before{ animation:gA 3.4s steps(1,end) infinite; }
h2.glitch:hover::after,
h3.glitch::after{ animation:gB 3.4s steps(1,end) infinite; }
@keyframes gA{
  0%,90%,100%{ opacity:0; transform:none; clip-path:inset(0 0 100% 0); }
  91%{ opacity:.9; transform:translate(-3px,1px); clip-path:inset(10% 0 55% 0); }
  93%{ opacity:.9; transform:translate(2px,-1px); clip-path:inset(60% 0 20% 0); }
  95%{ opacity:0; }
}
@keyframes gB{
  0%,90%,100%{ opacity:0; transform:none; clip-path:inset(0 0 100% 0); }
  91%{ opacity:.75; transform:translate(3px,-1px); clip-path:inset(10% 0 55% 0); }
  93%{ opacity:.75; transform:translate(-2px,1px); clip-path:inset(60% 0 20% 0); }
  95%{ opacity:0; }
}

/* =========================================================
   TRUST BAND — honest credibility signals under the hero.
   Room here for an npm-downloads badge once there are real
   numbers to show. Nothing invented until then.
   ========================================================= */
.trust{ padding:34px 0 0; }
.trust__grid{
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr));
  gap:1px; background:var(--line);
  border:1px solid var(--line-2); border-radius:var(--r-lg);
  overflow:hidden;
}
.trust__item{
  display:flex; align-items:flex-start; gap:11px;
  padding:16px 18px; background:var(--panel);
}
.trust__mark{
  flex:0 0 auto; margin-top:5px;
  font-size:8px; color:var(--mag);
  text-shadow:0 0 10px var(--mag);
}
.trust__item:nth-child(even) .trust__mark{ color:var(--cyan); text-shadow:0 0 10px var(--cyan); }
.trust__label{
  font-family:var(--mono); font-size:11.5px; letter-spacing:.11em;
  text-transform:uppercase; color:var(--text);
}
.trust__sub{ margin-top:5px; font-size:12.5px; line-height:1.5; color:var(--dim); }
.trust__sub code{ font-family:var(--mono); font-size:.94em; color:var(--cyan); }

/* =========================================================
   FRAME (product shot chrome)
   ========================================================= */
.frame{
  margin:0; position:relative;
  background:linear-gradient(180deg,#0E0E11,#050506);
  border:1px solid var(--line-2);
  border-radius:var(--r-xl);
  overflow:hidden;
  box-shadow:
    0 0 0 1px rgba(255,61,190,.10),
    0 40px 120px -40px rgba(255,61,190,.35),
    0 30px 80px -30px rgba(0,0,0,.9);
}
.frame::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  border-radius:inherit;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06);
}
.frame__chrome{
  display:flex; align-items:center; gap:8px;
  padding:11px 16px;
  background:linear-gradient(180deg,#121216,#0B0B0E);
  border-bottom:1px solid var(--line);
}
.frame__dot{
  width:9px; height:9px; border-radius:50%;
  background:var(--panel-3); border:1px solid var(--line-2);
}
.frame__dot:nth-child(1){ background:#2A1520; border-color:#4A2033; }
.frame__url{
  margin-left:14px; font-family:var(--mono); font-size:11.5px;
  color:var(--faint); letter-spacing:.02em;
}
.frame__cap{
  padding:12px 18px; font-family:var(--mono); font-size:11.5px;
  color:var(--faint); border-top:1px solid var(--line);
  background:#070708;
}

/* =========================================================
   SHOT — real app screenshot inside a frame
   2x captures, so they stay crisp on retina. The scanline
   overlay is the same one .app-mock carries, so a real
   screenshot and a hand-built mock sit on the page alike.
   ========================================================= */
.shot{
  position:relative; display:block;
  background:#000; line-height:0; isolation:isolate;
}
.shot img{ width:100%; height:auto; }
.shot::after{
  content:""; position:absolute; inset:0; pointer-events:none; z-index:5;
  background:repeating-linear-gradient(to bottom,
    rgba(255,255,255,.02) 0 1px, transparent 1px 3px);
}

/* real terminal transcript, styled like the rest of the terminal furniture */
.term-out{
  margin:0; padding:20px 22px; overflow-x:auto;
  background:#050506; color:var(--text-2);
  font-family:var(--mono); font-size:12.5px; line-height:1.75;
  white-space:pre; -webkit-overflow-scrolling:touch;
}
.term-out code{ font:inherit; color:inherit; }
.frame__cap code{ font-family:var(--mono); color:var(--text-2); }

/* the blinking block cursor — used by the step-02 path vis */
.caret{
  display:inline-block; width:6px; height:11px; margin-left:3px;
  background:var(--mag); vertical-align:-1px;
  animation:blink 1.05s steps(2,end) infinite;
}
@keyframes blink{ 0%,50%{opacity:1;} 51%,100%{opacity:0;} }

/* =========================================================
   WALK — the explained first-run sequence under #how.
   Heading + explanation, then the real capture full width,
   so the screenshots stay legible instead of being squeezed
   into a column beside the text.
   ========================================================= */
.walk{ display:grid; gap:56px; margin-top:56px; }
.walk__step{ display:grid; gap:20px; }
.walk__text{ position:relative; max-width:74ch; padding-left:20px; }
.walk__text::before{
  content:""; position:absolute; left:0; top:5px; bottom:5px; width:2px;
  border-radius:2px;
  background:linear-gradient(180deg, var(--mag), rgba(255,61,190,0));
}
.walk__text h3{
  font-size:clamp(1.15rem,2.1vw,1.5rem);
  margin-bottom:10px;
}
.walk__text p{ color:var(--text-2); font-size:15px; }
.walk__text p b{ color:var(--text); font-weight:600; }
.walk__text code{
  font-family:var(--mono); font-size:.92em; color:var(--cyan);
}
/* =========================================================
   SECTIONS
   ========================================================= */
.section{ padding:120px 0; position:relative; }
.section--tight{ padding:96px 0; }
.section--alt{
  background:
    linear-gradient(180deg, transparent, rgba(255,61,190,.035) 40%, transparent),
    var(--bg);
  border-block:1px solid var(--line);
}
.section__head{ text-align:center; max-width:760px; margin:0 auto 56px; }
/* a head that is the whole section — nothing follows it to space away from */
.section__head--solo{ margin-bottom:0; max-width:900px; }
.section__head h2, .split__lead h2{
  font-size:clamp(1.9rem,4vw,3rem); letter-spacing:-0.03em;
}
.kicker{
  font-family:var(--mono); font-size:11px; letter-spacing:.2em;
  text-transform:uppercase; color:var(--mag); margin-bottom:14px;
}
.lede{ margin-top:18px; color:var(--text-2); font-size:1.05rem; max-width:62ch; }
.lede--center{ margin-inline:auto; text-align:center; }
.lede + .lede{ margin-top:14px; }

/* problem split */
.split{ display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:center; }
.compare{ display:grid; gap:14px; }
.compare__col{
  border:1px solid var(--line); border-radius:var(--r-lg);
  background:var(--panel); padding:20px 22px;
}
.compare__col--good{
  border-color:rgba(255,61,190,.35);
  background:linear-gradient(180deg, rgba(255,61,190,.07), var(--panel));
  box-shadow:0 20px 60px -40px var(--mag);
}
.compare__label{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--dim); margin-bottom:12px;
}
.compare__col--good .compare__label{ color:var(--mag-2); }
.compare__col ul{ display:grid; gap:9px; }
.compare__col li{
  position:relative; padding-left:22px;
  font-size:14px; color:var(--text-2); line-height:1.5;
}
.compare__col li::before{
  content:"✕"; position:absolute; left:0; top:2px;
  color:var(--faint); font-size:11px;
}
.compare__col--good li::before{ content:"✓"; color:var(--mag); }
.compare__col--good li{ color:var(--text); }

.promise{
  margin-top:64px; text-align:center;
  font-size:clamp(1.05rem,2.2vw,1.45rem); color:var(--text-2);
  padding:26px 24px; border-radius:var(--r-lg);
  border:1px solid var(--line);
  background:linear-gradient(180deg, rgba(255,61,190,.06), transparent);
}
.promise strong{ color:var(--text); }
.promise__mark{ color:var(--mag); margin-right:10px; font-size:.7em; vertical-align:middle; }

/* =========================================================
   FEATURES
   ========================================================= */
.feat-grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:16px;
}
.feat{
  position:relative; overflow:hidden;
  border:1px solid var(--line); border-radius:var(--r-lg);
  background:linear-gradient(180deg,var(--panel),#08080A);
  padding:26px 24px;
  transition:border-color .28s var(--ease), transform .28s var(--ease), box-shadow .28s var(--ease);
}
.feat::before{
  content:""; position:absolute; inset:0; pointer-events:none; opacity:0;
  background:radial-gradient(500px 220px at var(--mx,50%) var(--my,0%), rgba(255,61,190,.10), transparent 70%);
  transition:opacity .3s var(--ease);
}
.feat:hover{
  border-color:rgba(255,61,190,.4);
  transform:translateY(-3px);
  box-shadow:0 30px 70px -50px var(--mag);
}
.feat:hover::before{ opacity:1; }
.feat h3{ font-size:1.22rem; margin-bottom:11px; letter-spacing:-0.015em; }
.feat p{ color:var(--text-2); font-size:14.5px; }
.feat p b{ color:var(--text); font-weight:600; }
.feat__tag{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--mag); margin-bottom:14px!important;
}
.feat__pro{
  margin-left:8px; padding:2px 7px; border-radius:4px;
  font-size:9.5px; letter-spacing:.12em;
  color:var(--mag-2); border:1px solid rgba(255,61,190,.5);
  background:rgba(255,61,190,.1);
}
.feat__link{ color:var(--mag-2); text-decoration:underline; text-underline-offset:3px; }
.feat--wide{
  grid-column:span 3; display:grid; grid-template-columns:1.1fr 1fr;
  gap:40px; align-items:center; padding:34px 32px;
}
.feat--install .feat__vis{ display:flex; justify-content:flex-end; }

.lane-strip{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.lane-strip__item{
  font-family:var(--mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase;
  padding:8px 12px; border-radius:8px;
  border:1px solid var(--line-2); background:var(--panel-2); color:var(--text-2);
}
.lane-strip__item--work{ color:var(--cyan); border-color:rgba(43,232,255,.4); }
.lane-strip__item--need{
  color:var(--mag-2); border-color:rgba(255,61,190,.55);
  background:rgba(255,61,190,.1); box-shadow:0 0 24px -10px var(--mag);
}
.lane-strip__item--done{ color:var(--green); border-color:rgba(61,220,151,.35); }
.lane-strip__arrow{ color:var(--faint); font-size:12px; }

.key-row{
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  margin-top:18px; font-family:var(--mono); font-size:11.5px; color:var(--dim);
}
.perm-row{ display:flex; gap:8px; flex-wrap:wrap; margin-top:18px; }
.perm{
  font-family:var(--mono); font-size:11px; padding:5px 10px; border-radius:6px;
  border:1px solid var(--line-2); background:var(--panel-2); color:var(--text-2);
}
.perm--ro{ color:var(--cyan); border-color:rgba(43,232,255,.35); }
.perm--std{ color:var(--green); border-color:rgba(61,220,151,.35); }
.perm--tru{ color:var(--amber); border-color:rgba(255,184,77,.35); }
.perm--full{ color:var(--mag-2); border-color:rgba(255,61,190,.5); background:rgba(255,61,190,.08); }

.doctor{
  margin-top:18px; padding:14px; border-radius:var(--r);
  background:#050506; border:1px solid var(--line);
  font-family:var(--mono); font-size:12px; color:var(--text-2);
  display:grid; gap:5px;
}
.doctor p{ display:flex; gap:9px; }

.wiz-bar{ margin-top:20px; display:grid; gap:9px; }
.wiz-bar__label{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.2em;
  text-transform:uppercase; color:var(--mag);
}
.wiz-bar__track{
  display:block; height:3px; border-radius:3px; background:var(--panel-3); overflow:hidden;
}
.wiz-bar__track i{
  display:block; height:100%; width:66%;
  background:linear-gradient(90deg,var(--mag),var(--cyan));
  box-shadow:0 0 14px var(--mag);
}

/* =========================================================
   SHOWCASE
   ========================================================= */
.showcase-pair{
  display:grid; grid-template-columns:1fr 1fr; gap:24px; margin-top:24px;
  align-items:start; /* real captures differ in aspect — don't stretch a frame past its shot */
}

/* =========================================================
   STEPS
   ========================================================= */
.steps{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; counter-reset:step; }
.step{
  position:relative; padding:30px 26px;
  border:1px solid var(--line); border-radius:var(--r-lg);
  background:linear-gradient(180deg,var(--panel),#08080A);
}
.step__n{
  display:block; font-family:var(--mono); font-size:12px;
  letter-spacing:.2em; color:var(--mag); margin-bottom:16px;
}
.step h3{ font-size:1.18rem; margin-bottom:10px; }
.step p{ color:var(--text-2); font-size:14.5px; }
.step p b{ color:var(--text); }
.step .copy-chip{ margin-top:18px; }
.step__vis{
  margin-top:18px; padding:11px 13px; border-radius:var(--r);
  background:#050506; border:1px solid var(--line);
  font-family:var(--mono); font-size:12.5px; color:var(--text);
}
.step__vis--lanes{ display:flex; gap:8px; flex-wrap:wrap; background:transparent; border:0; padding:0; }
.step__vis .caret{ background:var(--mag); }

/* =========================================================
   PRICING
   ========================================================= */
.tiers{
  display:grid; grid-template-columns:repeat(2,1fr); gap:20px;
  align-items:start;
}
.tier{
  position:relative; overflow:hidden;
  display:flex; flex-direction:column;
  border:1px solid var(--line); border-radius:var(--r-lg);
  background:linear-gradient(180deg,var(--panel),#08080A);
  padding:32px 30px;
}
.tier--pro{
  border-color:rgba(255,61,190,.42);
  background:
    radial-gradient(700px 300px at 50% -20%, rgba(255,61,190,.13), transparent 70%),
    linear-gradient(180deg,var(--panel),#08080A);
  box-shadow:0 40px 90px -60px var(--mag);
}
.tier--pro::before{
  content:""; position:absolute; inset:0 0 auto 0; height:1px;
  background:linear-gradient(90deg,transparent,var(--mag),var(--cyan),transparent);
}

.tier__head{ padding-bottom:22px; border-bottom:1px solid var(--line); }
.tier__title{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.tier__title h3{ font-size:1.5rem; letter-spacing:-0.02em; }
.tier__badge{
  display:inline-flex; align-items:center; gap:7px;
  font-family:var(--mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase;
  padding:5px 11px; border-radius:999px;
  border:1px solid var(--line-2); background:var(--panel-2); color:var(--dim);
}
.tier__badge--live{ color:var(--green); border-color:rgba(61,220,151,.4); }
.tier__badge--live .dot{
  width:6px; height:6px; border-radius:50%; background:var(--green);
  box-shadow:0 0 9px var(--green); animation:pulse 2.2s ease-in-out infinite;
}
.tier__badge--soon{
  color:var(--mag-2); border-color:rgba(255,61,190,.5); background:rgba(255,61,190,.1);
}
.tier__price{ margin-top:18px; display:flex; align-items:baseline; gap:8px; flex-wrap:wrap; }
.tier__amount{ font-size:clamp(2.1rem,4.4vw,2.9rem); font-weight:700; letter-spacing:-0.04em; }
.tier--pro .tier__amount{
  background:linear-gradient(96deg,var(--mag-2),var(--mag) 55%,var(--cyan) 130%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.tier__per{ font-family:var(--mono); font-size:13px; color:var(--dim); }
.tier__sub{ margin-top:8px; font-size:13.5px; color:var(--dim); }

.tier__cap{
  display:flex; align-items:center; gap:16px;
  margin:24px 0; padding:18px 20px; border-radius:var(--r);
  background:#050506; border:1px solid var(--line);
}
.tier__cap--pro{
  border-color:rgba(255,61,190,.35);
  background:linear-gradient(180deg,rgba(255,61,190,.08),#050506);
}
.tier__cap-n{
  font-family:var(--mono); font-size:2.6rem; line-height:1; font-weight:700;
  color:var(--text); min-width:1.4ch; text-align:center;
}
.tier--pro .tier__cap-n{
  color:var(--mag-2); text-shadow:0 0 26px rgba(255,61,190,.75);
  font-size:3.4rem; line-height:.76;
}
.tier__cap-l{
  font-family:var(--mono); font-size:12px; letter-spacing:.06em;
  text-transform:uppercase; color:var(--text-2); line-height:1.6;
}
.tier__cap-l em{
  display:block; font-style:normal; text-transform:none;
  letter-spacing:0; color:var(--dim); font-size:11.5px;
}

.tier__list{ display:grid; gap:11px; margin-bottom:28px; }
.tier__list li{
  position:relative; padding-left:23px;
  font-size:14.5px; color:var(--text-2); line-height:1.55;
}
.tier__list li::before{
  content:"✓"; position:absolute; left:0; top:1px;
  color:var(--mag); font-size:12px;
}
.tier__list b{ color:var(--text); font-weight:600; }
.tier__list code{
  font-family:var(--mono); font-size:13px; color:var(--cyan);
  background:var(--panel-2); border:1px solid var(--line-2);
  border-radius:5px; padding:1px 6px;
}
.tier__cta{ margin-top:auto; }

/* ---------- waitlist ---------- */
.btn--primary{
  background:linear-gradient(180deg,var(--mag-2),var(--mag));
  border-color:var(--mag); color:#12000B; font-weight:700;
  box-shadow:0 10px 34px -16px var(--mag);
}
.btn--primary:hover{ filter:brightness(1.1); transform:translateY(-1px); }

.waitlist__label{
  display:block; font-family:var(--mono); font-size:11px;
  letter-spacing:.14em; text-transform:uppercase; color:var(--mag-2);
  margin-bottom:11px;
}
.waitlist__row{ display:flex; gap:10px; flex-wrap:wrap; }
.waitlist__input{
  flex:1 1 200px; min-width:0;
  padding:13px 15px; border-radius:var(--r);
  background:#050506; border:1px solid var(--line-2); color:var(--text);
  font-family:var(--mono); font-size:14px;
  transition:border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.waitlist__input::placeholder{ color:var(--faint); }
.waitlist__input:hover{ border-color:var(--line-2); }
.waitlist__input:focus{
  outline:none; border-color:var(--mag);
  box-shadow:0 0 0 3px rgba(255,61,190,.16);
}
.waitlist__input:disabled{ opacity:.5; cursor:not-allowed; }
.waitlist__btn{ flex:0 0 auto; cursor:pointer; }
.waitlist__btn[disabled]{ opacity:.65; cursor:progress; }

/* nothing is wired up yet — look inert, never look clickable */
.waitlist.is-off .waitlist__input,
.waitlist.is-off .waitlist__btn{ cursor:not-allowed; }
.waitlist.is-off .waitlist__btn{
  background:var(--panel-2); border-color:var(--line-2);
  color:var(--dim); font-weight:600; box-shadow:none; opacity:1;
}
.waitlist.is-off .waitlist__label{ color:var(--dim); }
.waitlist.is-invalid .waitlist__input{
  border-color:var(--red); box-shadow:0 0 0 3px rgba(255,77,94,.14);
}
.waitlist__note{
  margin-top:12px; font-family:var(--mono); font-size:11.5px;
  line-height:1.6; color:var(--faint);
}
.waitlist__note.is-ok{ color:var(--green); }
.waitlist__note.is-err{ color:var(--red); }

.pricing__honest{
  margin-top:28px; padding:20px 24px; border-radius:var(--r-lg);
  border:1px dashed var(--line-2); background:rgba(255,255,255,.012);
  font-size:14.5px; color:var(--text-2); line-height:1.65;
}
.pricing__honest b{ color:var(--text); }
.pricing__honest-mark{ color:var(--mag); margin-right:10px; font-size:.75em; }

/* =========================================================
   FINAL CTA
   ========================================================= */
.cta{ position:relative; padding:130px 0 140px; overflow:hidden; text-align:center; }
.cta__bg{ position:absolute; inset:0; pointer-events:none; }
.cta__bg .hero__glow--mag{ top:auto; bottom:-260px; width:900px; height:560px; opacity:.85; }
.cta__inner{ position:relative; display:grid; justify-items:center; }
.cta__logo{
  width:86px; height:auto; margin-bottom:26px;
  filter:drop-shadow(0 0 30px rgba(255,61,190,.6));
}
.cta h2{ font-size:clamp(2rem,5vw,3.4rem); letter-spacing:-0.035em; }
.cta .copy-chip{ margin-top:32px; }
.cta__note{
  margin-top:20px; font-family:var(--mono); font-size:11.5px; color:var(--faint);
  max-width:52ch;
}

/* =========================================================
   FOOTER
   ========================================================= */
.footer{ border-top:1px solid var(--line); background:#040405; padding:64px 0 34px; }
.footer__inner{ display:grid; grid-template-columns:1.2fr 2fr; gap:56px; }
.footer__brand img{ height:24px; width:auto; margin-bottom:18px; opacity:.9; }
.footer__brand p{ color:var(--dim); font-size:13.5px; line-height:1.7; }
.footer__links{ display:grid; grid-template-columns:repeat(4,1fr); gap:28px; }
.footer__links h3{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--text); margin-bottom:14px;
}
.footer__links a, .footer__soon{
  display:block; font-size:13.5px; color:var(--dim);
  text-decoration:none; padding:5px 0;
  transition:color .18s var(--ease);
}
.footer__links a:hover{ color:var(--mag-2); }
.footer__draft{
  margin-top:10px; font-family:var(--mono); font-size:10.5px;
  line-height:1.6; color:var(--faint); max-width:22ch;
}
.footer__soon em{
  font-style:normal; font-family:var(--mono); font-size:9.5px;
  letter-spacing:.12em; text-transform:uppercase;
  border:1px solid var(--line-2); border-radius:4px;
  padding:1px 5px; margin-left:8px; color:var(--faint);
}
.footer__bottom{
  margin-top:56px; padding-top:22px; border-top:1px solid var(--line);
  display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap;
  font-family:var(--mono); font-size:11.5px; color:var(--faint);
}
.footer__glyph{ color:var(--mag); margin-right:8px; }
.footer__caret{
  display:inline-block; width:6px; height:11px; background:var(--mag);
  vertical-align:-1px; margin-left:4px;
  animation:blink 1.05s steps(2,end) infinite;
}

/* =========================================================
   LEGAL PAGES
   ========================================================= */
.legal{ position:relative; padding:140px 0 40px; }
.legal__bg{ position:absolute; inset:0 0 auto 0; height:520px; overflow:hidden; pointer-events:none; }
.legal .wrap{ max-width:820px; }

.legal__eyebrow{
  font-family:var(--mono); font-size:11px; letter-spacing:.2em;
  text-transform:uppercase; color:var(--mag); margin-bottom:14px;
}
.legal h1{
  font-size:clamp(2rem,5vw,3.1rem); letter-spacing:-0.035em; margin-bottom:14px;
}
.legal__meta{
  font-family:var(--mono); font-size:12px; color:var(--faint);
  display:flex; gap:8px 20px; flex-wrap:wrap;
}

.draft-note{
  display:flex; gap:16px; align-items:flex-start;
  margin:32px 0 44px; padding:20px 22px;
  border:1px solid rgba(255,184,77,.42); border-radius:var(--r-lg);
  background:linear-gradient(180deg, rgba(255,184,77,.09), rgba(255,184,77,.02));
}
.draft-note__mark{
  font-family:var(--mono); font-size:20px; line-height:1.2; color:var(--amber);
  flex:0 0 auto;
}
.draft-note__title{
  font-family:var(--mono); font-size:12px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--amber); margin-bottom:8px;
}
.draft-note p{ font-size:14px; color:var(--text-2); line-height:1.65; }

.legal__toc{
  margin-bottom:52px; padding:22px 24px;
  border:1px solid var(--line); border-radius:var(--r-lg); background:var(--panel);
}
.legal__toc h2{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--dim); margin-bottom:14px; font-weight:600;
}
.legal__toc ol{ display:grid; gap:7px; counter-reset:toc; }
.legal__toc li{ counter-increment:toc; display:flex; gap:12px; align-items:baseline; }
.legal__toc li::before{
  content:counter(toc,decimal-leading-zero);
  font-family:var(--mono); font-size:11px; color:var(--mag); flex:0 0 auto;
}
.legal__toc a{
  font-size:14px; color:var(--text-2); text-decoration:none;
  transition:color .18s var(--ease);
}
.legal__toc a:hover{ color:var(--mag-2); }

.legal__body{ display:grid; gap:44px; }
.legal__body section{ scroll-margin-top:96px; }
.legal__body h2{
  font-size:1.35rem; letter-spacing:-0.015em; margin-bottom:16px;
  display:flex; gap:14px; align-items:baseline;
}
.legal__body h2::before{
  content:attr(data-n);
  font-family:var(--mono); font-size:12px; color:var(--mag);
  flex:0 0 auto; padding-top:2px;
}
.legal__body h3{
  font-size:1rem; margin:24px 0 10px; color:var(--text);
}
.legal__body p{ color:var(--text-2); font-size:15px; line-height:1.75; }
.legal__body p + p{ margin-top:14px; }
.legal__body strong{ color:var(--text); font-weight:600; }
.legal__body a{ color:var(--mag-2); text-decoration:underline; text-underline-offset:3px; }
.legal__body ul{ display:grid; gap:10px; margin-top:14px; }
.legal__body ul li{
  position:relative; padding-left:24px;
  font-size:15px; color:var(--text-2); line-height:1.65;
}
.legal__body ul li::before{
  content:"◆"; position:absolute; left:2px; top:8px;
  color:var(--mag); font-size:8px;
}
.legal__body code{
  font-family:var(--mono); font-size:13.5px; color:var(--cyan);
  background:var(--panel-2); border:1px solid var(--line-2);
  border-radius:5px; padding:1px 6px;
}

.callout{
  margin:20px 0 4px; padding:20px 22px; border-radius:var(--r-lg);
  border:1px solid rgba(255,61,190,.35);
  background:linear-gradient(180deg, rgba(255,61,190,.07), transparent);
}
.callout p{ color:var(--text); font-size:15.5px; }
.callout .kicker{ margin-bottom:10px; }

.tbd{
  font-family:var(--mono); font-size:12.5px; color:var(--amber);
  border:1px dashed rgba(255,184,77,.5); border-radius:5px;
  padding:1px 8px; white-space:nowrap;
}

/* Preamble that sits above the table of contents on a legal page. */
.legal__intro{ margin:30px 0 40px; }
.legal__intro p{ color:var(--text-2); font-size:15.5px; line-height:1.8; }
.legal__intro p + p{ margin-top:14px; }
.legal__intro strong{ color:var(--text); font-weight:600; }

/* All-caps statutory blocks (warranty, liability). Loosened so a wall of
   capitals stays readable, and dropped a touch in size to match x-height. */
.legal__body p.legal__caps{
  font-size:13.5px; line-height:1.85;
  letter-spacing:.012em; color:var(--dim);
}

/* Numbered lists inside the body — the bullet list uses ◆, these use digits. */
.legal__body ol{ display:grid; gap:10px; margin-top:14px; counter-reset:legal-ol; }
.legal__body ol li{
  counter-increment:legal-ol; position:relative; padding-left:28px;
  font-size:15px; color:var(--text-2); line-height:1.65;
}
.legal__body ol li::before{
  content:counter(legal-ol) "."; position:absolute; left:2px; top:0;
  font-family:var(--mono); font-size:12px; color:var(--mag);
}

.legal__body p.legal__address{
  font-family:var(--mono); font-size:13.5px; line-height:2;
}

.legal__foot{
  margin-top:56px; padding-top:26px; border-top:1px solid var(--line);
  display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap;
  font-family:var(--mono); font-size:12px; color:var(--faint);
}
.legal__foot a{ color:var(--text-2); text-decoration:none; }
.legal__foot a:hover{ color:var(--mag-2); }

/* =========================================================
   TOAST
   ========================================================= */
.toast{
  position:fixed; left:50%; bottom:28px; z-index:160;
  transform:translate(-50%,20px); opacity:0; pointer-events:none;
  background:var(--panel); border:1px solid var(--mag);
  color:var(--text); font-family:var(--mono); font-size:12.5px;
  padding:10px 18px; border-radius:999px;
  box-shadow:0 12px 40px -18px var(--mag);
  transition:opacity .22s var(--ease), transform .22s var(--ease);
}
.toast.is-on{ opacity:1; transform:translate(-50%,0); }

/* =========================================================
   REVEAL
   ========================================================= */
.reveal{ opacity:0; transform:translateY(18px); }
.reveal.is-in{
  opacity:1; transform:none;
  transition:opacity .7s var(--ease), transform .7s var(--ease);
}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width:1080px){
  .split{ grid-template-columns:1fr; gap:40px; }
  .feat-grid{ grid-template-columns:repeat(2,1fr); }
  .feat--wide{ grid-column:span 2; }
  .showcase-pair{ grid-template-columns:1fr; }
  .steps{ grid-template-columns:1fr; }
  /* the bar gets crowded before the hamburger appears — the Google mark
     still says what the button does */
  .auth__signin-long{ display:none; }
}

@media (max-width:900px){
  .nav__links{ display:none; }
  .nav__toggle{ display:block; }
  /* legal pages have no hamburger — keep their short link row visible */
  .nav__links--legal{ display:flex; gap:16px; margin-left:auto; }
  .nav__links--legal a{ font-size:12.5px; }
  .nav.is-open .nav__mobile{ display:flex; }
  /* the link row is hidden here, so the actions have to reclaim the auto margin
     the `.nav__links + .nav__actions` rule takes away */
  .nav__links + .nav__actions{ margin-left:auto; }
  .footer__inner{ grid-template-columns:1fr; gap:36px; }
  .tiers{ grid-template-columns:1fr; }
  .trust__grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }

  /* below the hamburger breakpoint the auth control moves into the menu,
     so the bar keeps just the mark, the copy chip and the toggle */
  .auth{ display:none; }
  .auth-m[data-state="out"],
  .auth-m[data-state="in"]{ display:block; }
}

@media (max-width:720px){
  html{ scroll-padding-top:76px; }
  .wrap{ padding-inline:20px; }

  /* the mark scales with the viewport so it stays as large as the copy chip
     and the hamburger leave room for — never taller than the desktop 56px */
  .nav__inner{ gap:12px; }
  .nav__brand img{ height:clamp(30px, 10.5vw, 48px); }

  .hero{ padding-top:120px; padding-bottom:56px; }
  .hero__shot{ margin-top:44px; }
  .hero__who{ font-size:12px; }
  .trust{ padding-top:26px; }
  .trust__grid{ grid-template-columns:1fr; }
  .section{ padding:84px 0; }
  .section--tight{ padding:72px 0; }
  .feat-grid{ grid-template-columns:1fr; }
  .feat--wide{ grid-column:span 1; grid-template-columns:1fr; gap:24px; padding:26px 24px; }
  .feat--install .feat__vis{ justify-content:flex-start; }
  .footer__links{ grid-template-columns:1fr 1fr; }
  .frame{ border-radius:var(--r-lg); }

  .walk{ gap:44px; margin-top:44px; }
  .walk__text{ padding-left:14px; }
  .walk__text p{ font-size:14.5px; }
  .term-out{ padding:16px; font-size:11px; }

  .cta{ padding:96px 0 104px; }
  .footer__bottom{ flex-direction:column; gap:8px; }

  .tier{ padding:26px 22px; }
  .tier__cap{ padding:16px; gap:14px; }
  .tier__cap-n{ font-size:2.1rem; }
  .waitlist__btn{ width:100%; justify-content:center; }
  .legal{ padding-top:112px; }
  .draft-note{ flex-direction:column; gap:10px; }
  .legal__foot{ flex-direction:column; gap:8px; }
}

@media (max-width:520px){
  .nav__inner{ gap:10px; }
  .copy-chip--sm{ padding:8px 10px 8px 11px; font-size:12px; gap:8px; }
  .frame__url{ margin-left:10px; }
}

@media (max-width:420px){
  .wrap{ padding-inline:16px; }
  .nav__inner{ gap:8px; }
  .copy-chip--sm{ padding:7px 9px 7px 10px; font-size:11.5px; gap:7px; }
  /* narrow, but kept a comfortable 40px tall for thumbs */
  .nav__toggle{ width:36px; height:40px; padding:11px 7px; }
  .hero__meta{ flex-direction:column; align-items:center; gap:6px; }
  .copy-chip--lg{ font-size:14px; }
  .hero__cta{ gap:10px; }
  .hero__cta .copy-chip--lg,
  .hero__cta .btn{ width:100%; justify-content:center; }
  .trust__item{ padding:14px 15px; }
  .term-out{ font-size:10.5px; padding:14px; }
  .footer__links{ grid-template-columns:1fr; }
}

/* =========================================================
   REDUCED MOTION — kill the glitch, keep the layout
   ========================================================= */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.001ms!important;
    animation-iteration-count:1!important;
    transition-duration:.001ms!important;
  }
  .reveal{ opacity:1!important; transform:none!important; }
  .glitch-stack__layer--m,
  .glitch-stack__layer--c{ display:none; }
  .splash__scan::after{ display:none; }
  .caret, .footer__caret{ animation:none; opacity:1; }
  .hero__title{ text-shadow:none; }
  /* the blanket rule above would freeze the pulse mid-fade — pin it flat */
  .auth__skeleton{ animation:none; opacity:.6; }
}