/* ============================================================================
   Neurobird Search, landing page
   Brand: lime #F5FFAB on deep navy, Satoshi, flat surfaces, no glass.
   ========================================================================== */

@font-face { font-family:"Satoshi"; src:url("/assets/fonts/satoshi-400.woff2") format("woff2"); font-weight:400; font-display:swap; }
@font-face { font-family:"Satoshi"; src:url("/assets/fonts/satoshi-500.woff2") format("woff2"); font-weight:500; font-display:swap; }
@font-face { font-family:"Satoshi"; src:url("/assets/fonts/satoshi-700.woff2") format("woff2"); font-weight:700; font-display:swap; }
@font-face { font-family:"Satoshi"; src:url("/assets/fonts/satoshi-900.woff2") format("woff2"); font-weight:900; font-display:swap; }

:root{
  --lime:#F5FFAB;
  --lime-dim:#d9e88a;
  --white:#fff;
  --navy:#17172B;
  --blue:#3431A5;
  --ink:#05050f;
  --ink-2:#0b0b1a;
  --panel:#101024;
  --panel-2:#15152c;
  --muted:rgba(255,255,255,.60);
  --muted-2:rgba(255,255,255,.40);
  --rule:rgba(255,255,255,.10);
  --rule-2:rgba(255,255,255,.18);
  --max:1200px;               /* steel.dev holds 1168px */
  --pad:clamp(18px,3.4vw,44px);
  --r:12px;
  --mono:"SF Mono",SFMono-Regular,ui-monospace,"JetBrains Mono",Menlo,Consolas,monospace;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--ink); color:var(--white);
  font-family:"Satoshi",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  font-size:16px; line-height:1.6; -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font-family:inherit}
::selection{background:var(--lime);color:var(--navy)}

.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--pad)}

/* ── typography ─────────────────────────────────────────────────────────────
   Scale measured against steel.dev, which runs H1 56 / H2 32 / H3 24 over a
   16px body and never exceeds nine distinct sizes on the page. Ours sits a
   step above that because Satoshi at weight 800 sets tighter than Geist 500,
   but the ratios (H1 3.1x body, H2 2.1x, H3 1.15x) are the same restraint.
   ────────────────────────────────────────────────────────────────────────── */
h1,h2,h3{margin:0;line-height:1.06;letter-spacing:-.03em;font-weight:800}
h1{font-size:clamp(30px,4vw,50px)}
h2{font-size:clamp(24px,2.7vw,34px);line-height:1.12}
h3{font-size:clamp(15.5px,1.35vw,18px);letter-spacing:-.015em;line-height:1.3;font-weight:700}
p{margin:0}
.eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  font-size:10px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;
  color:var(--lime);
}
.eyebrow::before{content:"";width:18px;height:1px;background:var(--lime);opacity:.7}
/* 52ch tracks steel's 400px hero measure at a 16px base. */
.lead{color:var(--muted);font-size:clamp(14.5px,1.15vw,16.5px);line-height:1.58;max-width:52ch}
.dim{color:var(--muted)}

/* ── buttons ────────────────────────────────────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-weight:700;font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;
  padding:12px 22px;border-radius:8px;border:none;cursor:pointer;
  transition:transform .16s ease,background .2s ease,color .2s ease,border-color .2s ease;
}
.btn--lime{background:var(--lime);color:var(--navy)}
.btn--lime:hover{background:#eaff8a;transform:translateY(-2px)}
.btn--ghost{background:transparent;color:var(--white);border:1px solid var(--rule-2)}
.btn--ghost:hover{border-color:var(--lime);color:var(--lime)}
.btn--sm{padding:9px 16px;font-size:10.5px}

/* ── hero ───────────────────────────────────────────────────────────────── */
.hero{position:relative;overflow:hidden;background:var(--ink);padding-bottom:clamp(34px,4.4vw,62px)}
.hero__canvas{position:absolute;inset:0;width:100%;height:100%;z-index:0}
.hero__glow{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    radial-gradient(90% 60% at 50% 22%,rgba(52,49,165,.30),transparent 62%),
    radial-gradient(60% 40% at 78% 8%,rgba(245,255,171,.09),transparent 60%),
    linear-gradient(180deg,rgba(5,5,15,.20),rgba(5,5,15,0) 34%,var(--ink) 96%);
}
.hero__inner{position:relative;z-index:2}

.nav{display:flex;align-items:center;gap:24px;padding:20px 0 0}
.nav__logo{display:flex;align-items:center;gap:10px;font-weight:800;letter-spacing:-.02em;font-size:15.5px}
.nav__mark{width:26px;height:26px;flex:none;
  filter:brightness(0) saturate(100%) invert(96%) sepia(28%) saturate(640%) hue-rotate(8deg) brightness(104%) contrast(101%);}
.nav__tag{
  font-size:9px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;
  color:var(--lime);border:1px solid rgba(245,255,171,.34);border-radius:4px;padding:2px 6px;
}
.nav__links{margin-left:auto;display:flex;align-items:center;gap:22px}
.nav__links a{font-size:13px;color:var(--muted);font-weight:500;letter-spacing:-.01em;transition:color .2s}
.nav__links a:hover{color:var(--white)}
/* The link rule above would otherwise win over .btn--lime and paint the label
   the same colour as the button, so the CTA states its own colours. */
.nav__links a.nav__cta{color:var(--navy);font-weight:700}
.nav__links a.nav__cta:hover{color:var(--navy)}

.hero__head{padding:clamp(34px,4.4vw,60px) 0 clamp(18px,2.2vw,26px);max-width:760px}
.hero__head h1{margin:12px 0 10px}
.hero__head h1 em{font-style:normal;color:var(--lime)}
/* The price used to sit inside the H1 and cost it a whole extra line. It reads
   as a fact rather than a claim on its own line, and the H1 stays one phrase. */
.subline{font-size:clamp(15px,1.3vw,18px);font-weight:700;letter-spacing:-.02em;
  color:rgba(255,255,255,.88);margin-bottom:14px}
.subline em{font-style:normal;color:var(--lime)}

/* ── the search field ───────────────────────────────────────────────────── */
.search{position:relative;z-index:3;max-width:860px}
.search__box{
  display:flex;align-items:center;gap:11px;
  background:rgba(13,13,30,.82);
  border:1px solid var(--rule-2);border-radius:12px;
  padding:6px 6px 6px 16px;
  transition:border-color .25s ease,box-shadow .35s ease,background .25s ease;
}
.search__box:focus-within{
  border-color:var(--lime);background:rgba(13,13,30,.95);
  box-shadow:0 0 0 4px rgba(245,255,171,.10),0 20px 60px -22px rgba(245,255,171,.30);
}
.search__icon{flex:none;color:var(--muted-2);display:flex;transition:color .25s}
.search__box:focus-within .search__icon{color:var(--lime)}
.search__input{
  flex:1;min-width:0;background:transparent;border:none;outline:none;color:var(--white);
  font-family:inherit;font-size:clamp(15px,1.2vw,16px);font-weight:500;padding:13px 0;
}
.search__input::placeholder{color:var(--muted-2)}
.search__go{
  flex:none;background:var(--lime);color:var(--navy);border:none;cursor:pointer;
  border-radius:8px;padding:12px 20px;font-weight:700;font-size:11.5px;
  letter-spacing:.05em;text-transform:uppercase;
  transition:transform .16s ease,background .2s ease,opacity .2s;
}
.search__go:hover:not(:disabled){background:#eaff8a;transform:translateY(-1px)}
/* Dimming lime toward the dark panel turns it olive. Keep the brand colour and
   signal the wait with a pulse instead. */
.search__go:disabled{cursor:progress;background:var(--lime);color:var(--navy);
  animation:btnPulse 1.4s ease-in-out infinite}
@keyframes btnPulse{0%,100%{opacity:1}50%{opacity:.62}}

.chips{display:flex;flex-wrap:wrap;gap:7px;margin-top:12px}
.chip{
  background:rgba(255,255,255,.04);border:1px solid var(--rule);
  color:var(--muted);border-radius:100px;padding:6px 13px;font-size:12px;font-weight:500;
  cursor:pointer;transition:all .2s ease;
}
.chip:hover{border-color:var(--lime);color:var(--lime);background:rgba(245,255,171,.06)}

.opts{display:flex;flex-wrap:wrap;align-items:center;gap:15px;margin-top:12px;font-size:12px;color:var(--muted-2)}
.opts label{display:inline-flex;align-items:center;gap:7px;cursor:pointer;transition:color .2s}
.opts label:hover{color:var(--muted)}
.opts input{accent-color:var(--lime);width:14px;height:14px;cursor:pointer}
.opts select{
  background:rgba(255,255,255,.05);border:1px solid var(--rule);color:var(--white);
  border-radius:7px;padding:6px 10px;font-family:inherit;font-size:12.5px;cursor:pointer;
}

/* ── live results ───────────────────────────────────────────────────────── */
.live{position:relative;z-index:3;margin-top:20px;display:none}
.live.on{display:block;animation:riseIn .5s cubic-bezier(.2,.7,.3,1) both}

/* stage rail */
.rail{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:14px}
.stg{
  display:inline-flex;align-items:center;gap:7px;
  font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted-2);background:rgba(255,255,255,.03);
  border:1px solid var(--rule);border-radius:100px;padding:6px 12px;
  transition:all .35s ease;
}
.stg__dot{width:6px;height:6px;border-radius:50%;background:var(--muted-2);transition:all .35s ease}
.stg.run{color:var(--lime);border-color:rgba(245,255,171,.42);background:rgba(245,255,171,.07)}
.stg.run .stg__dot{background:var(--lime);animation:pulse 1.1s ease-in-out infinite}
.stg.ok{color:rgba(255,255,255,.80);border-color:var(--rule-2)}
.stg.ok .stg__dot{background:var(--lime)}

@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(1.55)}}
@keyframes riseIn{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes cardIn{from{opacity:0;transform:translateY(18px) scale(.985)}to{opacity:1;transform:none}}
@keyframes shimmer{0%{background-position:-460px 0}100%{background-position:460px 0}}
@keyframes growBar{from{width:0}}

/* answer */
.answer{
  position:relative;background:var(--panel);border:1px solid var(--rule);
  border-left:3px solid var(--lime);border-radius:var(--r);
  padding:19px 21px;margin-bottom:14px;animation:cardIn .5s cubic-bezier(.2,.7,.3,1) both;
}
.answer__label{
  font-size:10.5px;font-weight:700;letter-spacing:.17em;text-transform:uppercase;
  color:var(--lime);margin-bottom:11px;display:flex;align-items:center;gap:9px;
}
.answer__text{font-size:14.5px;line-height:1.62;color:rgba(255,255,255,.93);max-width:74ch}
.answer__text b{color:var(--lime);font-weight:700}
.caret{display:inline-block;width:2px;height:1.02em;background:var(--lime);margin-left:2px;
  vertical-align:-2px;animation:blink 1s steps(2,start) infinite}
@keyframes blink{0%,100%{opacity:1}50%{opacity:0}}
.cite{
  display:inline-block;font-size:11px;font-weight:700;color:var(--lime);
  background:rgba(245,255,171,.13);border-radius:4px;padding:1px 5px;margin:0 1px;
  vertical-align:1px;
}
.quotes{margin-top:18px;padding-top:16px;border-top:1px solid var(--rule);display:grid;gap:9px}
.quote{display:flex;gap:11px;font-size:13px;line-height:1.55;color:var(--muted)}
.quote__mark{flex:none;font-size:10px;font-weight:700;letter-spacing:.06em;padding:2px 7px;border-radius:4px;height:fit-content}
.quote__mark.ok{background:rgba(245,255,171,.15);color:var(--lime)}
.quote__mark.no{background:rgba(255,255,255,.07);color:var(--muted-2)}
.quote em{font-style:normal;color:rgba(255,255,255,.82)}

/* result cards */
.results{display:grid;gap:9px}
.res{
  background:var(--panel);border:1px solid var(--rule);border-radius:var(--r);
  padding:15px 17px;animation:cardIn .5s cubic-bezier(.2,.7,.3,1) both;
  transition:border-color .25s ease,transform .25s ease,background .25s ease;
}
.res:hover{border-color:var(--rule-2);background:var(--panel-2);transform:translateY(-2px)}
.res__top{display:flex;align-items:center;gap:11px;margin-bottom:9px;flex-wrap:wrap}
.res__n{
  font-family:var(--mono);font-size:11px;font-weight:700;color:var(--navy);background:var(--lime);
  border-radius:5px;padding:2px 7px;flex:none;
}
.res__dom{font-size:12.5px;color:var(--muted);font-weight:500}
.res__badges{margin-left:auto;display:flex;gap:6px;flex-wrap:wrap}
.bdg{
  font-size:9.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  color:var(--muted-2);border:1px solid var(--rule);border-radius:4px;padding:2px 7px;
}
.bdg--lime{color:var(--lime);border-color:rgba(245,255,171,.34)}
.res__title{font-size:14.5px;font-weight:700;line-height:1.3;margin-bottom:5px;letter-spacing:-.015em}
.res__title a:hover{color:var(--lime)}
.res__snip{font-size:12.5px;line-height:1.55;color:var(--muted);
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.res__foot{display:flex;align-items:center;gap:12px;margin-top:13px}
.res__bar{flex:1;height:2px;background:rgba(255,255,255,.07);border-radius:2px;overflow:hidden}
.res__fill{height:100%;background:linear-gradient(90deg,var(--blue),var(--lime));border-radius:2px;
  animation:growBar .9s cubic-bezier(.2,.7,.3,1) both}
.res__score{font-family:var(--mono);font-size:11px;color:var(--muted-2);flex:none}

/* skeleton */
.skel{background:var(--panel);border:1px solid var(--rule);border-radius:var(--r);padding:19px 21px}
.skel__l{height:11px;border-radius:4px;margin-bottom:10px;
  background:linear-gradient(90deg,rgba(255,255,255,.05) 8%,rgba(255,255,255,.11) 20%,rgba(255,255,255,.05) 33%);
  background-size:920px 100%;animation:shimmer 1.5s linear infinite}

.meta{
  display:flex;flex-wrap:wrap;gap:16px;margin-top:16px;font-family:var(--mono);
  font-size:11.5px;color:var(--muted-2);
}
.meta b{color:var(--lime);font-weight:700}
.err{border-left:3px solid #ff8a8a;background:var(--panel);border-radius:var(--r);
  padding:18px 22px;font-size:14px;color:var(--muted)}

/* ── generic section ──────────────────────────────────────────────────────
   steel.dev separates its major blocks with a 64px flex gap, not with 120px of
   padding on each side. Full-bleed colour blocks need a little more air than a
   single-surface page does, so we land at 66px a side rather than matching it. */
.sec{padding:clamp(44px,4.6vw,66px) 0;position:relative}
.sec--rule{border-top:1px solid var(--rule)}
.sec__head{max-width:640px;margin-bottom:clamp(22px,2.4vw,32px)}
.sec__head h2{margin:11px 0 12px}
.sec__head .display{margin:11px 0 14px}

/* pipeline: six stages, held to a 3x2 block so the last one is never orphaned */
.pipe{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
@media (max-width:900px){ .pipe{grid-template-columns:repeat(2,1fr)} }
@media (max-width:560px){ .pipe{grid-template-columns:1fr} }
.pipe__s{
  background:var(--panel);border:1px solid var(--rule);border-radius:var(--r);padding:18px 17px;
  position:relative;overflow:hidden;transition:border-color .3s ease,transform .3s ease;
}
.pipe__s:hover{border-color:rgba(245,255,171,.34);transform:translateY(-3px)}
.pipe__s::after{content:"";position:absolute;left:0;top:0;height:2px;width:0;background:var(--lime);transition:width .5s ease}
.pipe__s:hover::after{width:100%}
.pipe__n{font-family:var(--mono);font-size:10.5px;color:var(--lime);font-weight:700;letter-spacing:.1em}
.pipe__t{font-size:15px;font-weight:700;margin:9px 0 6px;letter-spacing:-.015em}
.pipe__d{font-size:12.5px;line-height:1.55;color:var(--muted)}

/* feature grid */
.feats{display:grid;grid-template-columns:repeat(auto-fit,minmax(272px,1fr));gap:10px}
.feat{background:var(--panel);border:1px solid var(--rule);border-radius:var(--r);padding:21px 19px;
  transition:border-color .3s ease,transform .3s ease}
.feat:hover{border-color:rgba(245,255,171,.30);transform:translateY(-3px)}
.feat__i{width:29px;height:29px;border-radius:7px;background:rgba(245,255,171,.11);
  display:flex;align-items:center;justify-content:center;color:var(--lime);margin-bottom:13px}
.feat h3{margin-bottom:7px}
.feat p{font-size:13px;line-height:1.58;color:var(--muted)}

/* code tabs */
.code{background:var(--panel);border:1px solid var(--rule);border-radius:var(--r);overflow:hidden}
.code__tabs{display:flex;overflow-x:auto;border-bottom:1px solid var(--rule);scrollbar-width:none}
.code__tabs::-webkit-scrollbar{display:none}
.code__tab{
  background:none;border:none;cursor:pointer;white-space:nowrap;
  color:var(--muted-2);font-size:12px;font-weight:600;padding:12px 17px;
  border-bottom:2px solid transparent;transition:all .2s ease;
}
.code__tab:hover{color:var(--white)}
.code__tab.on{color:var(--lime);border-bottom-color:var(--lime)}
.code__body{position:relative}
.code__copy{
  position:absolute;top:13px;right:13px;z-index:2;
  background:rgba(255,255,255,.06);border:1px solid var(--rule);color:var(--muted);
  border-radius:7px;padding:6px 12px;font-size:11px;font-weight:700;cursor:pointer;
  letter-spacing:.06em;text-transform:uppercase;transition:all .2s;
}
.code__copy:hover{border-color:var(--lime);color:var(--lime)}
.code pre{
  margin:0;padding:19px 18px;overflow-x:auto;
  font-family:var(--mono);font-size:12.5px;line-height:1.66;color:rgba(255,255,255,.86);
}
.code pre .k{color:var(--lime)}
.code pre .s{color:#a8d8ff}
.code pre .c{color:var(--muted-2)}

/* pricing */
.tiers{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:10px;margin-bottom:30px}
.tier{background:var(--panel);border:1px solid var(--rule);border-radius:var(--r);padding:22px 20px;
  display:flex;flex-direction:column;transition:border-color .3s ease,transform .3s ease}
.tier:hover{transform:translateY(-3px)}
.tier--hero{border-color:rgba(245,255,171,.44);background:linear-gradient(180deg,rgba(245,255,171,.055),var(--panel) 60%)}
.tier__n{font-size:10px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:var(--lime)}
.tier__p{display:flex;align-items:baseline;gap:6px;margin:12px 0 4px}
.tier__p b{font-size:34px;font-weight:800;letter-spacing:-.035em;line-height:1}
.tier__p span{font-size:12px;color:var(--muted)}
.tier__sub{font-size:12.5px;color:var(--muted);margin-bottom:15px}
.tier ul{list-style:none;margin:0 0 17px;padding:0;display:grid;gap:8px}
.tier li{font-size:12.5px;color:var(--muted);display:flex;gap:9px;line-height:1.48}
.tier li::before{content:"";flex:none;width:4px;height:4px;border-radius:50%;background:var(--lime);margin-top:7px}
.tier .btn{margin-top:auto;width:100%}

.tblwrap{overflow-x:auto;border:1px solid var(--rule);border-radius:var(--r);background:var(--panel)}
table{width:100%;border-collapse:collapse;min-width:620px}
th,td{text-align:left;padding:11px 16px;font-size:12.5px;border-bottom:1px solid var(--rule)}
th{font-size:9.5px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--muted-2)}
td{color:var(--muted)}
td:first-child{color:var(--white);font-weight:600}
tr:last-child td{border-bottom:none}
tr.us td{background:rgba(245,255,171,.06)}
tr.us td:first-child{color:var(--lime)}
.tbl__note{font-size:11.5px;color:var(--muted-2);margin-top:11px;line-height:1.55;max-width:78ch}
.tbl__h{margin:0 0 12px}

/* key box */
.keybox{background:var(--panel);border:1px solid var(--rule);border-radius:var(--r);padding:clamp(26px,4vw,42px)}
.keyout{
  display:none;margin-top:16px;background:var(--ink-2);border:1px solid rgba(245,255,171,.34);
  border-radius:9px;padding:15px 17px;
}
.keyout.on{display:block;animation:riseIn .4s ease both}
.keyout__k{font-family:var(--mono);font-size:13px;color:var(--lime);word-break:break-all;margin:7px 0 12px}
.keyout__h{font-size:9.5px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:var(--muted-2)}

/* footer */
.foot{border-top:1px solid var(--rule);padding:30px 0;color:var(--muted-2);font-size:12.5px}
.foot__in{display:flex;flex-wrap:wrap;gap:16px;align-items:center;justify-content:space-between}
.foot a{color:var(--muted)}
.foot a:hover{color:var(--lime)}

/* reveal on scroll */
.rv{opacity:0;transform:translateY(24px);transition:opacity .7s cubic-bezier(.2,.7,.3,1),transform .7s cubic-bezier(.2,.7,.3,1)}
.rv.in{opacity:1;transform:none}

/* ── responsive ─────────────────────────────────────────────────────────── */
@media (max-width:900px){
  .nav__links a:not(.nav__cta){display:none}
}
@media (max-width:640px){
  .hero__head{padding-top:26px}
  .search__box{padding:5px 5px 5px 13px;border-radius:11px;gap:8px}
  .search__input{padding:12px 0;font-size:16px}   /* 16px stops iOS zoom on focus */
  .search__go{padding:11px 14px;font-size:10.5px;letter-spacing:.04em}
  .search__icon{display:none}
  /* A 22ch measure that reads well at 44px turns into a one-word-per-line
     column once the heading drops to 27px, so the cap comes off on a phone. */
  .display{max-width:none}
  /* Four suggestion chips wrap to four rows on a phone and push the demo off
     screen. Two is enough to show what the field is for. */
  .chips .chip:nth-child(n+3){display:none}
  .opts{gap:12px;font-size:12px}
  .nav__tag{display:none}
  .nav__links a.nav__cta{padding:10px 15px;font-size:10.5px}
  .res__badges{margin-left:0;width:100%}
  th,td{padding:10px 12px;font-size:12px}
  .code pre{font-size:11.5px;padding:15px 14px}
  .code__tab{padding:11px 14px;font-size:11.5px}
  .tier__p b{font-size:29px}
  .faq__i{padding:13px 15px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important}
  .rv{opacity:1;transform:none}
}

/* ── legal pages ─────────────────────────────────────────────────────────── */
.legal{max-width:800px;padding-top:clamp(34px,6vw,64px);padding-bottom:clamp(56px,8vw,110px)}
.legal__back{
  display:inline-block;font-size:12px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted);margin-bottom:34px;
}
.legal__back:hover{color:var(--lime)}
.legal h1{font-size:clamp(30px,5vw,50px);margin:16px 0 10px}
.legal__date{color:var(--muted-2);font-size:13px;margin-bottom:34px}
.legal h2{font-size:clamp(19px,2.4vw,25px);margin:38px 0 13px}
.legal h3{font-size:16px;margin:24px 0 9px;color:var(--lime)}
.legal p,.legal li{color:var(--muted);font-size:15px;line-height:1.72}
.legal p{margin-bottom:14px}
.legal ul{margin:0 0 16px;padding-left:20px}
.legal li{margin-bottom:8px}
.legal strong{color:rgba(255,255,255,.92)}
.legal a{color:var(--lime);text-decoration:underline;text-underline-offset:3px}
.legal a:hover{color:#fff}
.legal table{margin:18px 0 22px;border:1px solid var(--rule);border-radius:10px;overflow:hidden}
.legal th,.legal td{font-size:13.5px;padding:12px 15px}
.legal code{font-family:var(--mono);font-size:13px;background:rgba(255,255,255,.06);
  border-radius:4px;padding:2px 6px;color:var(--lime)}
.legal__nav{display:flex;flex-wrap:wrap;gap:22px;margin-top:48px;padding-top:26px;
  border-top:1px solid var(--rule);font-size:13.5px}
.legal__nav a{color:var(--muted);text-decoration:none}
.legal__nav a:hover{color:var(--lime)}

/* ══════════════════════════════════════════════════════════════════════════
   BRIGHT SECTIONS
   The main Neurobird site alternates deep navy with full lime panels carrying
   navy text. Rather than restyle every component twice, each bright section
   re-points the same design tokens the dark components already read, so cards,
   rules, tables and muted text re-theme themselves.
   ══════════════════════════════════════════════════════════════════════════ */
.sec--lime,.sec--paper{
  --panel:#ffffff;
  --panel-2:#ffffff;
  --muted:rgba(23,23,43,.74);
  --muted-2:rgba(23,23,43,.52);
  --rule:rgba(23,23,43,.14);
  --rule-2:rgba(23,23,43,.28);
  color:var(--navy);
}
.sec--lime{background:var(--lime)}
.sec--paper{background:#f6f7f4}

.sec--lime h1,.sec--lime h2,.sec--lime h3,
.sec--paper h1,.sec--paper h2,.sec--paper h3{color:var(--navy)}
.sec--lime .lead,.sec--paper .lead{color:rgba(23,23,43,.76)}
.sec--lime .eyebrow,.sec--paper .eyebrow{color:var(--navy);opacity:.62}
.sec--lime .eyebrow::before,.sec--paper .eyebrow::before{background:var(--navy);opacity:.5}

/* Buttons invert: filled navy reads as the primary action on a lime field. */
.sec--lime .btn--lime,.sec--paper .btn--lime{background:var(--navy);color:var(--lime)}
.sec--lime .btn--lime:hover,.sec--paper .btn--lime:hover{background:#26264a}
.sec--lime .btn--ghost,.sec--paper .btn--ghost{color:var(--navy);border-color:rgba(23,23,43,.34)}
.sec--lime .btn--ghost:hover,.sec--paper .btn--ghost:hover{background:var(--navy);color:var(--lime);border-color:var(--navy)}

/* The heavy navy rule under a section head, straight from the main site. */
.rule-hard{height:2px;background:var(--navy);margin:0 0 clamp(18px,2vw,26px)}

/* The bright-section heading, set to sit hard against the rule above it. It
   used to run to 124px, which cost 456px of page height per section for three
   words. It is now one notch above h2, which is all the hierarchy it needs. */
.display{font-size:clamp(27px,3.4vw,44px);line-height:1.02;letter-spacing:-.035em;
  font-weight:800;margin:12px 0 16px;max-width:22ch}

/* Stat block: the quotable numbers. Statistics are one of the few things
   measurably worth putting on a page for AI answer engines. */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(178px,1fr));
  gap:clamp(18px,2.2vw,30px);margin:clamp(26px,3vw,38px) 0}
.stat__n{font-size:clamp(27px,2.9vw,38px);font-weight:800;letter-spacing:-.035em;line-height:1;color:var(--navy)}
.stat__l{font-size:12.5px;line-height:1.48;color:rgba(23,23,43,.72);margin-top:7px;max-width:26ch}
.stat__l b{color:var(--navy);font-weight:700}

/* Cards on a bright field: white, hairline navy border, no shadow. */
.sec--lime .pipe__s,.sec--paper .pipe__s,
.sec--lime .feat,.sec--paper .feat,
.sec--lime .tier,.sec--paper .tier{
  background:#fff;border:1px solid rgba(23,23,43,.13);
}
.sec--lime .pipe__s:hover,.sec--paper .pipe__s:hover,
.sec--lime .feat:hover,.sec--paper .feat:hover{border-color:var(--navy)}
.sec--lime .pipe__n,.sec--paper .pipe__n{color:rgba(23,23,43,.55)}
.sec--lime .pipe__s::after,.sec--paper .pipe__s::after{background:var(--navy)}
.sec--lime .feat__i,.sec--paper .feat__i{background:var(--lime);color:var(--navy)}
.sec--paper .feat__i{background:#eef3d8}

/* Pricing on lime: the recommended tier goes navy so it wins the page. */
.sec--lime .tier--hero,.sec--paper .tier--hero{
  background:var(--navy);border-color:var(--navy);
}
.sec--lime .tier--hero *,.sec--paper .tier--hero *{color:rgba(255,255,255,.78)}
.sec--lime .tier--hero .tier__n,.sec--paper .tier--hero .tier__n,
.sec--lime .tier--hero .tier__p b,.sec--paper .tier--hero .tier__p b{color:var(--lime)}
.sec--lime .tier--hero li::before,.sec--paper .tier--hero li::before{background:var(--lime)}
.sec--lime .tier--hero .btn--lime,.sec--paper .tier--hero .btn--lime{background:var(--lime);color:var(--navy)}
.sec--lime .tier--hero .btn--lime:hover{background:#fff}
.sec--lime .tier__n,.sec--paper .tier__n{color:rgba(23,23,43,.6)}

/* Comparison table on a bright field. */
.sec--lime .tblwrap,.sec--paper .tblwrap{background:#fff;border-color:rgba(23,23,43,.15)}
.sec--lime th,.sec--paper th{color:rgba(23,23,43,.55);border-bottom-color:rgba(23,23,43,.15)}
.sec--lime td,.sec--paper td{border-bottom-color:rgba(23,23,43,.10)}
.sec--lime td:first-child,.sec--paper td:first-child{color:var(--navy)}
.sec--lime tr.us td,.sec--paper tr.us td{background:var(--lime)}
.sec--lime tr.us td:first-child,.sec--paper tr.us td:first-child{color:var(--navy);font-weight:900}
.sec--lime .tbl__note,.sec--paper .tbl__note{color:rgba(23,23,43,.58)}

/* A dark card deliberately dropped into a bright section, the way the main
   site anchors its lime panels. Code and terminal output belong on dark. */
.darkcard{background:var(--ink-2);color:#fff;border-radius:var(--r);overflow:hidden;
  border:1px solid rgba(23,23,43,.2)}
.darkcard .code{background:transparent;border:none;border-radius:0}

/* Buy buttons inside a pricing tier. */
.buy{width:100%;margin-top:auto}
.buy[disabled]{opacity:.5;cursor:not-allowed}
.buy__note{font-size:12px;color:var(--muted-2);margin-top:10px;text-align:center}

/* Five tiers (free plus four packs) must fit one row on a wide screen, or the
   last one orphans. A tighter track minimum is enough at the 1200px canvas. */
.tiers{grid-template-columns:repeat(auto-fit,minmax(206px,1fr))}
@media (max-width:1100px){ .tiers{grid-template-columns:repeat(auto-fit,minmax(238px,1fr))} }
.tier{padding:20px 18px}
.tier__p b{font-size:clamp(26px,2.5vw,32px)}

/* A greyed button on lime or on navy reads as muddy. Keep the surface and drop
   the weight instead, and say why it is inactive rather than just dimming it. */
.sec--lime .buy[disabled],.sec--paper .buy[disabled]{
  background:transparent;color:rgba(23,23,43,.55);
  border:1.5px dashed rgba(23,23,43,.3);opacity:1;
}
.sec--lime .tier--hero .buy[disabled],.sec--paper .tier--hero .buy[disabled]{
  background:transparent;color:rgba(245,255,171,.72);
  border:1.5px dashed rgba(245,255,171,.42);opacity:1;
}

/* ── FAQ ─────────────────────────────────────────────────────────────────── */
.faq{display:grid;gap:8px;max-width:860px}
.faq__i{background:#fff;border:1px solid rgba(23,23,43,.13);border-radius:var(--r);
  padding:14px 18px;transition:border-color .25s ease}
.faq__i[open]{border-color:var(--navy)}
.faq__i summary{cursor:pointer;font-weight:700;font-size:14px;letter-spacing:-.015em;
  color:var(--navy);list-style:none;display:flex;align-items:flex-start;gap:10px}
.faq__i summary::-webkit-details-marker{display:none}
.faq__i summary::before{content:"+";flex:none;font-weight:700;color:var(--navy);opacity:.5;
  font-size:16px;line-height:1.25}
.faq__i[open] summary::before{content:"\2013"}
.faq__i p{margin:10px 0 0 22px;font-size:13px;line-height:1.62;color:rgba(23,23,43,.74);max-width:76ch}

/* ── hero: globe backdrop + cinematic title ──────────────────────────────
   The globe canvas sits at z-index 0 and bleeds off the right edge on wide
   screens. The scrim is what makes the copy legible over it: without a left
   to right wash the land dots run straight under the first column of text. */
.hero__scrim{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(180deg,rgba(5,5,15,.88) 0%,rgba(5,5,15,.55) 6%,rgba(5,5,15,0) 13%),
    linear-gradient(90deg,var(--ink) 0%,rgba(5,5,15,.90) 26%,rgba(5,5,15,.42) 46%,rgba(5,5,15,0) 62%),
    linear-gradient(0deg,var(--ink) 1%,rgba(5,5,15,0) 20%);
}
.hero__head{padding:clamp(48px,6.4vw,104px) 0 clamp(20px,2.4vw,30px)}

.hero__h1{
  font-size:clamp(38px,5.8vw,74px);
  line-height:.98;
  letter-spacing:-.045em;
  font-weight:800;
  margin:14px 0 16px;
  text-wrap:balance;
}
/* Gradient text needs a painted colour first: if background-clip is not
   supported the declaration below is ignored and the lime still shows. */
.hero__grad{
  color:var(--lime);
  background:linear-gradient(96deg,#F5FFAB 0%,#ffffff 44%,#BFC8FF 100%);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;
}
@supports not ((-webkit-background-clip:text) or (background-clip:text)){
  .hero__grad{-webkit-text-fill-color:currentColor;background:none;color:var(--lime)}
}

.hero__kicker{
  font-size:clamp(16px,1.62vw,21px);
  line-height:1.34;letter-spacing:-.022em;font-weight:600;
  color:rgba(255,255,255,.92);
  max-width:30ch;margin:0 0 14px;
}

/* Hero reveal is pure CSS on purpose. The scroll reveal used elsewhere waits
   for an observer, and anything above the fold that depends on JS to become
   visible is one script error away from an empty page. */
@keyframes hrv-in{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
.hrv{opacity:0;animation:hrv-in .82s cubic-bezier(.2,.7,.3,1) forwards;animation-delay:var(--d,0ms)}
@media (prefers-reduced-motion:reduce){
  .hrv{opacity:1;animation:none;transform:none}
}

@media (max-width:900px){
  /* Globe moves behind the copy and drops back so the type stays first. */
  .hero__canvas{opacity:.46}
  .hero__scrim{background:
    linear-gradient(180deg,rgba(5,5,15,.30) 0%,rgba(5,5,15,.74) 46%,var(--ink) 88%)}
  .hero__kicker{max-width:none}
}