/* HOT PAGES NOW — design system
 * Canonical brand per the April 2026 Strategic Audit: neon sign + diner,
 * NOT the retired Looka mark. Locked palette: #d9440d / #ffffff.
 * Night base (roadside after dark) + cream diner surfaces for menu moments.
 */

:root{
  /* base — warm near-black, asphalt at night. never navy. */
  --ink:#0c0a09; --ink-2:#141010; --ink-3:#1e1815; --ink-4:#2a211c;
  /* brand */
  --hot:#d9440d; --hot-2:#ff6a1f; --glow:#ffb066; --ember:#8f2a06;
  /* diner surfaces */
  --cream:#f7f1e4; --cream-2:#ece2cf; --cream-ink:#241a12;
  /* text */
  --white:#fff; --muted:#b6a99e; --muted-2:#8a7c71;
  --line:#ffffff14; --line-2:#ffffff26;
  /* type */
  --display:"Anton",Impact,sans-serif;
  --body:"Red Hat Display",system-ui,sans-serif;
  --mono:"Space Mono",ui-monospace,monospace;
  --r:10px; --r-lg:16px;
  --wrap:1280px;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;overflow-x:hidden}
body{
  margin:0;background:var(--ink);color:var(--white);
  font-family:var(--body);font-size:1.0625rem;line-height:1.65;font-weight:400;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--hot-2);text-decoration:none}
[hidden]{display:none!important}
:focus-visible{outline:2px solid var(--hot-2);outline-offset:3px}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 clamp(1.1rem,4vw,2.5rem)}
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---------- type ---------- */
h1,h2,h3{margin:0 0 .4em;font-family:var(--display);font-weight:400;
  line-height:.92;letter-spacing:.005em;text-transform:uppercase;
  overflow-wrap:break-word;hyphens:auto}
h1{font-size:clamp(2.7rem,1.4rem + 5.4vw,6.4rem)}
h2{font-size:clamp(2.05rem,1.3rem + 3.5vw,4.5rem)}
h3{font-size:clamp(1.35rem,1.1rem + 1vw,2rem)}
p{margin:0 0 1.1em}
.kicker{font-family:var(--mono);font-size:.72rem;font-weight:700;letter-spacing:.22em;
  text-transform:uppercase;color:var(--hot-2);margin:0 0 1.4em;display:flex;
  align-items:center;gap:.7em}
.kicker::before{content:"";width:26px;height:1px;background:var(--hot);flex:none}
.lede{font-size:clamp(1.1rem,1rem + .5vw,1.375rem);color:var(--muted);
  max-width:60ch;line-height:1.55}
.big{font-size:clamp(1.3rem,1.1rem + 1vw,1.9rem);line-height:1.35;font-weight:500;
  color:var(--white);max-width:24ch}

/* neon: layered glow, the whole point of the brand */
.neon{color:#fff;text-shadow:
  0 0 5px #fff,0 0 12px var(--glow),0 0 26px var(--hot-2),
  0 0 52px var(--hot),0 0 88px var(--ember)}
.neon-hot{color:var(--hot-2);text-shadow:
  0 0 6px var(--glow),0 0 20px var(--hot-2),0 0 46px var(--hot),0 0 80px var(--ember)}
.flicker{animation:flick 7s linear infinite}
@keyframes flick{
  0%,17%,19%,21%,55%,57%,100%{opacity:1}
  18%,20%,56%{opacity:.62}
}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:.6em;font-family:var(--body);
  font-weight:700;font-size:1rem;letter-spacing:.01em;padding:.95em 1.7em;
  border-radius:var(--r);border:0;cursor:pointer;white-space:nowrap;
  transition:transform .18s cubic-bezier(.2,.8,.3,1),box-shadow .18s,background .18s,color .18s}
.btn-hot{background:var(--hot);color:#fff;box-shadow:0 0 0 0 #d9440d66}
.btn-hot:hover{background:var(--hot-2);transform:translateY(-2px);
  box-shadow:0 10px 34px -8px #d9440dcc,0 0 22px #ff6a1f55}
.btn-ghost{background:transparent;color:#fff;border:1px solid var(--line-2)}
.btn-ghost:hover{border-color:var(--hot-2);color:var(--hot-2);transform:translateY(-2px)}
.btn-cream{background:var(--cream-ink);color:var(--cream)}
.btn-cream:hover{background:var(--hot);color:#fff;transform:translateY(-2px)}
.btn-lg{font-size:1.0625rem;padding:1.05em 2em}

/* ---------- texture ---------- */
.grain::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.05;
  mix-blend-mode:overlay;z-index:3;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

/* diner checkerboard — lifted from the Order Up menu border */
.checks{height:20px;background-image:repeating-conic-gradient(var(--hot) 0 25%,#fff 0 50%);
  background-size:20px 20px}
.checks-sm{height:12px;background-size:12px 12px}

/* ---------- header ---------- */
.top{position:fixed;inset:0 0 auto 0;z-index:60;transition:background .3s,backdrop-filter .3s,border-color .3s;
  border-bottom:1px solid transparent}
.top.stuck{background:#0c0a09e8;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  border-bottom-color:var(--line)}
.top-in{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;
  max-width:var(--wrap);margin:0 auto;padding:.9rem clamp(1.1rem,4vw,2.5rem)}
.brandmark{display:flex;align-items:center;gap:.7rem}
.brandmark img{height:58px;width:auto;filter:drop-shadow(0 0 16px #d9440dbb)}
.nav{display:flex;align-items:center;gap:2rem}
.nav a:not(.btn){color:var(--muted);font-weight:600;font-size:.95rem;letter-spacing:.01em}
.nav a:not(.btn):hover{color:#fff}
.navtoggle{display:none;background:none;border:0;color:#fff;cursor:pointer;padding:.4rem}

/* ---------- hero ---------- */
.hero{position:relative;min-height:100svh;display:flex;align-items:flex-end;
  padding:8rem 0 4.5rem;overflow:hidden;isolation:isolate}
.hero-bg{position:absolute;inset:0;z-index:-2}
.hero-bg img{width:100%;height:100%;object-fit:cover;object-position:42% 42%}
.hero-bg::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,#0c0a09cc 0%,#0c0a0966 24%,#0c0a09d9 70%,var(--ink) 100%),
             linear-gradient(90deg,#0c0a09f2 0%,#0c0a09cc 34%,#0c0a0955 58%,transparent 78%),
             radial-gradient(90% 70% at 18% 78%,#0c0a09e6,transparent 68%)}
.hero > .wrap{width:100%}
.hero h1{margin-bottom:.3em;max-width:15ch}
.hero .lede{max-width:46ch}
.hero h1 .l2{display:block}
.hero .lede{margin-bottom:2.2rem}
.hero-cta{display:flex;gap:.9rem;flex-wrap:wrap;align-items:center}
.hero-note{font-family:var(--mono);font-size:.76rem;color:var(--muted-2);
  letter-spacing:.06em;margin:1.6rem 0 0}
.scrollcue{position:absolute;right:clamp(1.1rem,4vw,2.5rem);bottom:2rem;
  font-family:var(--mono);font-size:.66rem;letter-spacing:.24em;color:var(--muted-2);
  text-transform:uppercase;display:flex;flex-direction:column;align-items:center;gap:.6rem}
.scrollcue i{display:block;width:1px;height:34px;background:linear-gradient(var(--hot-2),transparent);
  animation:cue 2.2s ease-in-out infinite}
@keyframes cue{0%,100%{opacity:.25;transform:scaleY(.6)}50%{opacity:1;transform:scaleY(1)}}

/* ---------- sections ---------- */
.sec{position:relative;padding:clamp(5rem,10vw,9rem) 0}
.sec-dark{background:var(--ink)}
.sec-raised{background:var(--ink-2)}
.sec-cream{background:var(--cream);color:var(--cream-ink)}
.sec-cream h2,.sec-cream h3{color:var(--cream-ink)}
.sec-cream .lede{color:#5c4a3c}
.sec-cream .kicker{color:var(--hot)}
.sec-head{max-width:64ch;margin-bottom:clamp(2.5rem,5vw,4rem)}

/* problem / split statement */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,5rem);align-items:center}
.split-media{position:relative;border-radius:var(--r-lg);overflow:hidden;
  box-shadow:0 30px 80px -30px #000}
.split-media img{width:100%;aspect-ratio:4/3;object-fit:cover}
.statement{font-family:var(--display);text-transform:uppercase;line-height:.94;
  overflow-wrap:break-word;font-size:clamp(1.9rem,1.2rem + 3.1vw,4rem)}
.statement .off{color:var(--muted-2)}

/* ---------- proof ---------- */
.credits{display:flex;flex-wrap:wrap;gap:.5rem 2.2rem;padding:1.6rem 0;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.credits span{font-family:var(--display);text-transform:uppercase;font-size:clamp(1rem,.9rem + .5vw,1.5rem);
  color:var(--muted-2);letter-spacing:.02em;transition:color .2s}
.credits span:hover{color:var(--white)}
.awards{display:flex;flex-wrap:wrap;gap:.5rem .9rem;margin-top:1.4rem}
.awards b{font-family:var(--mono);font-weight:400;font-size:.72rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted-2);border:1px solid var(--line);
  border-radius:999px;padding:.35em .85em}

.cases{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:1.4rem;margin-top:3rem}
.case{position:relative;border-radius:var(--r-lg);overflow:hidden;background:var(--ink-3);
  border:1px solid var(--line);transition:transform .25s cubic-bezier(.2,.8,.3,1),border-color .25s}
.case:hover{transform:translateY(-5px);border-color:var(--hot)}
.case-img{aspect-ratio:16/10;overflow:hidden}
.case-img img{width:100%;height:100%;object-fit:cover;transition:transform .5s cubic-bezier(.2,.8,.3,1)}
.case:hover .case-img img{transform:scale(1.05)}
.case-body{padding:1.5rem 1.6rem 1.7rem}
.case h3{font-size:1.35rem;margin-bottom:.35em}
.case p{color:var(--muted);font-size:.95rem;margin:0}
.case .tag{font-family:var(--mono);font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--hot-2);margin-bottom:.7em;display:block}

/* ---------- menu (diner) ---------- */
/* checkered diner frame: padding reveals the checker background behind the
   cream panel. border-image + conic-gradient renders inconsistently, so the
   frame is built from a real background instead. */
.menu-frame{padding:14px;border-radius:6px;
  background-image:repeating-conic-gradient(var(--hot) 0 25%,#fff 0 50%);
  background-size:20px 20px;
  box-shadow:0 30px 90px -40px #00000088}
.menu-in{background:var(--cream);border-radius:3px;padding:clamp(1.8rem,4vw,3.2rem)}
.menu-banner{background:var(--hot);color:#fff;text-align:center;padding:.7rem 1rem;
  font-family:var(--display);text-transform:uppercase;letter-spacing:.06em;
  overflow-wrap:break-word;
  font-size:clamp(1.2rem,.9rem + 1.6vw,2.4rem);line-height:1.05;border-radius:3px}
.menu-sub{text-align:center;font-style:italic;color:var(--hot);margin:.9rem 0 2.2rem;
  font-size:clamp(.95rem,.9rem + .3vw,1.15rem)}
.tiers{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1.2rem}
.tier{position:relative;background:#fffdf7;border:2px solid #e3d9c2;border-radius:8px;
  padding:1.6rem 1.5rem;display:flex;flex-direction:column;transition:border-color .2s,transform .2s}
.tier:hover{border-color:var(--hot);transform:translateY(-3px)}
.tier.pop{border-color:var(--hot);border-width:3px;box-shadow:0 18px 44px -22px #d9440d88}
.tier-badge{position:absolute;top:-13px;left:50%;transform:translateX(-50%);background:var(--hot);
  color:#fff;font-family:var(--mono);font-size:.64rem;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;padding:.35em 1em;border-radius:999px;white-space:nowrap}
.tier-name{font-family:var(--display);text-transform:uppercase;font-size:1.65rem;
  color:var(--cream-ink);line-height:1;margin-bottom:.15em}
.tier-price{font-family:var(--display);color:var(--hot);font-size:2.1rem;line-height:1;margin:.3rem 0 .8rem}
.tier-desc{font-style:italic;color:#6b5a4a;font-size:.95rem;margin-bottom:1rem;line-height:1.45}
.tier ul{list-style:none;margin:0 0 1.4rem;padding:0;border-top:1px dashed #d9c9ad;padding-top:1rem}
.tier li{position:relative;padding-left:1.1rem;margin-bottom:.45rem;font-size:.94rem;color:#3d3128}
.tier li::before{content:"•";position:absolute;left:0;color:var(--hot);font-weight:700}
.tier .btn{margin-top:auto;justify-content:center}
.flames{display:flex;gap:.3rem;margin:0 0 .6rem}
.flames .nicon{--isz:23px}

/* boost grid */
.boosts{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1rem;margin-top:1.4rem}
.boost{background:#fffdf7;border:2px solid #e3d9c2;border-radius:8px;padding:1.2rem 1.3rem}
.boost h4{font-family:var(--display);text-transform:uppercase;font-size:1.05rem;
  color:#fff;background:var(--hot);display:inline-block;padding:.25em .7em;border-radius:999px;
  margin:0 0 .9rem;letter-spacing:.04em}
.boost ul{list-style:none;margin:0;padding:0}
.boost li{display:flex;justify-content:space-between;gap:1rem;font-size:.88rem;
  padding:.3rem 0;border-bottom:1px dotted #ddd0b6;color:#3d3128}
.boost li:last-child{border-bottom:0}
.boost li b{font-weight:700;color:var(--hot);white-space:nowrap;font-family:var(--mono);font-size:.8rem}

/* ---------- burn ---------- */
.burn{display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:1.2rem}
.burncard{position:relative;border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--line);
  min-height:400px;display:flex;flex-direction:column;justify-content:flex-end;
  transition:transform .25s cubic-bezier(.2,.8,.3,1),border-color .25s}
.burncard:hover{transform:translateY(-5px);border-color:var(--hot)}
.burncard img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.burncard::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,#0c0a0933 0%,#0c0a09cc 55%,#0c0a09fa 100%)}
.burn-body{padding:1.7rem 1.6rem}
.burn-body h3{margin-bottom:.2em}
.burn-price{font-family:var(--display);color:var(--hot-2);font-size:1.8rem;line-height:1;margin:.2rem 0 .8rem}
.burn-body p{color:var(--muted);font-size:.93rem;margin:0}

/* ---------- process ---------- */
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1.5rem;counter-reset:s}
/* the counter is absolutely positioned, so the heading needs enough top
   padding to clear it even when Anton hasn't loaded and a taller fallback
   font is standing in. 2.6rem was ~3px short and collapsed on slow loads. */
.step{counter-increment:s;position:relative;padding-top:3.3rem;border-top:1px solid var(--line)}
.step::before{content:counter(s,decimal-leading-zero);position:absolute;top:.7rem;left:0;
  line-height:1;font-family:var(--display);font-size:1.5rem;color:var(--hot)}
.step h3{font-size:1.3rem;margin-bottom:.3em}
.step p{color:var(--muted);font-size:.96rem;margin:0}

/* ---------- ask teaser ---------- */
.ask-teaser{position:relative;border-radius:var(--r-lg);overflow:hidden;
  border:1px solid var(--line-2);background:
   radial-gradient(120% 140% at 12% 12%,#2a150a,transparent 62%),var(--ink-3);
  padding:clamp(2rem,5vw,4rem)}
.ask-demo{background:#0c0a09;border:1px solid var(--line-2);border-radius:var(--r);
  padding:1.1rem 1.2rem;display:flex;align-items:center;gap:.8rem;max-width:560px;margin:1.8rem 0 1.5rem;
  box-shadow:0 0 0 1px #d9440d22,0 20px 50px -25px #000}
.ask-demo .caret{width:2px;height:1.2em;background:var(--hot-2);animation:blink 1.1s steps(1) infinite;flex:none}
@keyframes blink{50%{opacity:0}}
.ask-demo span{color:var(--muted);font-size:1.02rem}

/* ---------- faq ---------- */
.faq{max-width:860px}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;padding:1.3rem 2.5rem 1.3rem 0;position:relative;
  font-weight:700;font-size:1.08rem;transition:color .2s}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--hot-2)}
.faq summary::after{content:"+";position:absolute;right:.3rem;top:1.05rem;font-family:var(--display);
  font-size:1.5rem;color:var(--hot);transition:transform .25s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{color:var(--muted);padding-right:2.5rem;margin:0 0 1.4rem}

/* ---------- bio ---------- */
.bio{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(2rem,5vw,4.5rem);align-items:center}
.bio-media{border-radius:var(--r-lg);overflow:hidden;box-shadow:0 30px 80px -30px #000}
.bio-media img{width:100%;aspect-ratio:4/5;object-fit:cover}

/* ---------- final cta ---------- */
.finale{position:relative;text-align:center;padding:clamp(5rem,11vw,10rem) 0;overflow:hidden}
.finale-bg{position:absolute;inset:0;z-index:-2}
.finale-bg img{width:100%;height:100%;object-fit:cover}
.finale-bg::after{content:"";position:absolute;inset:0;background:#0c0a09d4}
.finale .kicker{justify-content:center}
.finale .kicker::before{display:none}
.finale h2{margin-bottom:.35em}
.finale .lede{margin:0 auto 2.2rem}
.finale-cta{display:flex;gap:.9rem;justify-content:center;flex-wrap:wrap}

/* ---------- footer ---------- */
.foot{background:#080606;border-top:1px solid var(--line);padding:3.5rem 0 2.5rem}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:2.5rem;margin-bottom:2.5rem}
.foot img.mark{height:76px;width:auto;filter:drop-shadow(0 0 18px #d9440d66);margin-bottom:1rem}
.foot h4{font-family:var(--mono);font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--muted-2);margin:0 0 1rem}
.foot ul{list-style:none;margin:0;padding:0}
.foot li{margin-bottom:.6rem}
.foot a{color:var(--muted);font-size:.95rem}
.foot a:hover{color:var(--hot-2)}
.foot-base{border-top:1px solid var(--line);padding-top:1.6rem;display:flex;
  justify-content:space-between;gap:1rem;flex-wrap:wrap;
  font-family:var(--mono);font-size:.7rem;letter-spacing:.06em;color:var(--muted-2)}

/* ---------- reveal ---------- */
.rv{animation:rise .7s cubic-bezier(.2,.8,.3,1) both}
@keyframes rise{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
.rv-2{animation-delay:.08s}.rv-3{animation-delay:.16s}.rv-4{animation-delay:.24s}

/* ---------- responsive ---------- */
@media(max-width:900px){
  .split,.bio{grid-template-columns:1fr}
  .bio-media{order:-1;max-width:340px}
  .foot-grid{grid-template-columns:1fr 1fr}
  .nav a:not(.btn){display:none}
}
@media(max-width:560px){
  .top-in{padding:.6rem 1.1rem;gap:.6rem}
  .brandmark img{height:44px}
  .nav .btn{font-size:.85rem;padding:.7em 1em}
  .hero{min-height:92svh;padding-top:7rem}
  .foot-grid{grid-template-columns:1fr}
  .btn{width:100%;justify-content:center}
  .hero-cta,.finale-cta{flex-direction:column;align-items:stretch}
  .credits{gap:.3rem 1.2rem}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .rv{animation:none}
  .flicker,.scrollcue i,.ask-demo .caret{animation:none}
  .case:hover,.burncard:hover,.tier:hover,.btn:hover{transform:none}
}

/* ---------- live demo strip ---------- */
.demo-sec{background:
  radial-gradient(120% 100% at 15% 0%,#20120b,transparent 62%),var(--ink);
  border-top:1px solid var(--line)}
.demo-head{max-width:60ch;margin-bottom:2.2rem}
.demo-prompt{max-width:700px;margin:0 0 1.3rem}
.prompt{position:relative;display:flex;gap:.5rem;width:100%;
  background:#140f0ecc;border:1px solid var(--line-2);border-radius:var(--r-lg);padding:.55rem;
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  box-shadow:0 26px 70px -28px #000,0 0 0 1px #d9440d1a;
  transition:border-color .2s,box-shadow .2s}
.prompt:focus-within{border-color:var(--hot);
  box-shadow:0 0 0 1px var(--hot),0 0 34px -6px #d9440d88,0 26px 70px -28px #000}
.prompt-input{flex:1;min-width:0;background:none;border:0;outline:none;color:var(--white);
  font-family:var(--body);font-size:1.0625rem;padding:.75em .9em}
.prompt-input::placeholder{color:var(--muted-2)}
.demo-chips{display:flex;flex-wrap:wrap;gap:.55rem;max-width:820px}
.chip{font-family:var(--body);font-size:.86rem;color:var(--muted);background:transparent;
  border:1px solid var(--line);border-radius:999px;padding:.42em 1em;cursor:pointer;
  text-decoration:none;transition:color .15s,border-color .15s,background .15s}
.chip:hover{color:var(--white);border-color:var(--hot)}
.chip-accent{border-color:var(--hot);color:var(--hot-2)}
.chip-accent:hover{background:var(--hot);color:#fff}

/* ---------- definition ---------- */
.definition{max-width:68ch}
.def-line{font-family:var(--display);text-transform:uppercase;line-height:1.02;
  font-size:clamp(1.5rem,1.1rem + 2.2vw,2.9rem);margin:0 0 1rem;color:var(--muted-2)}
.def-line strong{color:var(--white);font-weight:400}

/* ---------- measurement ---------- */
.split-rev .split-media{order:-1}
@media(max-width:900px){.split-rev .split-media{order:0}}
.metrics{margin:1.8rem 0;display:grid;gap:.2rem}
.metric{padding:.9rem 0;border-top:1px solid var(--line)}
.metric b{display:block;font-family:var(--display);text-transform:uppercase;
  font-size:1rem;letter-spacing:.03em;color:var(--hot-2);margin-bottom:.2em}
.metric span{color:var(--muted);font-size:.96rem;line-height:1.5}

/* ---------- question ticker ---------- */
.ticker{padding:3.2rem 0;background:var(--ink);border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);overflow:hidden}
.tick-label{font-family:var(--mono);font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--muted-2);text-align:center;margin:0 0 1.6rem}
.tick-label span{color:var(--hot-2)}
.tick-row{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.tick-track{display:flex;width:max-content;gap:.8rem;padding:.4rem 0}
.tick-row.a .tick-track{animation:tick 58s linear infinite}
.tick-row.b .tick-track{animation:tick 74s linear infinite reverse}
.tick-row:hover .tick-track{animation-play-state:paused}
.tick-track span{flex:none;font-size:.94rem;color:var(--muted);white-space:nowrap;
  border:1px solid var(--line);border-radius:999px;padding:.5em 1.15em;background:var(--ink-2)}
.tick-track span::before{content:"“";color:var(--hot);margin-right:.15em}
.tick-track span::after{content:"”";color:var(--hot);margin-left:.15em}
@keyframes tick{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ---------- the brief artifact ---------- */
.brief-demo-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(1.5rem,4vw,3.5rem);
  align-items:start}
.brief-paper{background:linear-gradient(160deg,var(--ink-3),var(--ink-2));
  border:1px solid var(--line-2);border-radius:var(--r-lg);padding:clamp(1.5rem,3vw,2.4rem);
  box-shadow:0 40px 90px -40px #000,0 0 0 1px #d9440d14;position:relative;overflow:hidden}
.brief-paper::before{content:"";position:absolute;inset:0 0 auto 0;height:3px;
  background:linear-gradient(90deg,var(--hot),var(--glow),var(--hot))}
.bp-label{font-family:var(--mono);font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--hot-2);margin:0 0 1.9rem;padding-bottom:1.1rem;border-bottom:1px solid var(--line)}
.brief-paper h3{font-family:var(--display);text-transform:uppercase;font-size:1rem;
  letter-spacing:.04em;color:var(--white);margin:1.5rem 0 .4em}
.brief-paper h3:first-of-type{margin-top:0}
.brief-paper p{color:var(--muted);font-size:.97rem;margin:0 0 .3em;line-height:1.55}
.bp-quote{color:var(--white)!important;font-style:italic;font-size:1.05rem!important}
.bp-read{font-family:var(--mono);font-size:.78rem;color:var(--hot-2)!important;letter-spacing:.04em}
.bp-moves{margin:.6rem 0 0;padding:0;list-style:none;counter-reset:bm}
.bp-moves li{counter-increment:bm;position:relative;padding:.55rem 0 .55rem 2.2rem;
  border-top:1px solid var(--line);color:var(--muted);font-size:.94rem}
.bp-moves li::before{content:counter(bm,decimal-leading-zero);position:absolute;left:0;top:.55rem;
  font-family:var(--mono);font-size:.75rem;color:var(--hot)}
.brief-notes{display:grid;gap:.2rem;padding-top:.5rem}
.bnote{padding:1rem 0;border-top:1px solid var(--line)}
.bnote b{display:block;font-family:var(--display);text-transform:uppercase;font-size:.95rem;
  letter-spacing:.03em;color:var(--hot-2);margin-bottom:.25em}
.bnote span{color:var(--muted);font-size:.92rem;line-height:1.5}
@media(max-width:900px){.brief-demo-grid{grid-template-columns:1fr}}

/* ---------- comparison ---------- */
.cmp-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r-lg);
  background:var(--ink)}
.cmp{width:100%;border-collapse:collapse;min-width:640px}
.cmp th,.cmp td{padding:1rem 1.1rem;text-align:left;border-bottom:1px solid var(--line);
  font-size:.95rem}
.cmp thead th{font-family:var(--mono);font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--muted-2);font-weight:400;border-bottom:1px solid var(--line-2);white-space:nowrap}
.cmp thead th.is-hot{color:var(--hot-2)}
.cmp tbody th{font-weight:500;color:var(--white);width:38%}
.cmp td{text-align:center;color:var(--muted-2);font-family:var(--mono);font-size:.82rem;width:20.6%}
.cmp td.yes{color:#7bd39a}
.cmp td.no{color:#e0736a}
.cmp td.mid{color:#e0b070}
.cmp td.is-hot,.cmp thead th.is-hot{background:#d9440d12}
.cmp tbody tr:last-child th,.cmp tbody tr:last-child td{border-bottom:0}
.cmp tbody tr:hover th,.cmp tbody tr:hover td{background:#ffffff06}
.cmp tbody tr:hover td.is-hot{background:#d9440d1f}

@media(prefers-reduced-motion:reduce){
  .tick-row.a .tick-track,.tick-row.b .tick-track{animation:none}
  .tick-row{-webkit-mask-image:none;mask-image:none;overflow-x:auto}
}

/* ---------- a11y ---------- */
.skip{position:absolute;left:-9999px;top:0;z-index:100;background:var(--hot);color:#fff;
  font-family:var(--body);font-weight:700;padding:.85em 1.4em;border-radius:0 0 10px 0}
.skip:focus{left:0}
#main:focus{outline:none}
/* visible focus that survives the dark palette */
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,
summary:focus-visible,[tabindex]:focus-visible{
  outline:2px solid var(--glow);outline-offset:3px;border-radius:4px}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important}}

/* ---------- scroll progress ---------- */
.progress{position:fixed;top:0;left:0;right:0;height:2px;z-index:80;transform-origin:0 50%;
  transform:scaleX(0);background:linear-gradient(90deg,var(--ember),var(--hot),var(--glow));
  box-shadow:0 0 12px #d9440daa;pointer-events:none}

/* ---------- neon power-on ---------- */
.striking .brandmark img{animation:strike 1.5s steps(1) 1}
.striking .neon,.striking .neon-hot{animation:strike 1.5s steps(1) 1}
@keyframes strike{
  0%,8%{opacity:.12}9%,13%{opacity:1}14%,20%{opacity:.12}
  21%,26%{opacity:1}27%,31%{opacity:.2}32%,100%{opacity:1}}
@media(prefers-reduced-motion:reduce){
  .progress{display:none}
  .striking .brandmark img,.striking .neon,.striking .neon-hot{animation:none}
}

/* ---------- print: briefs and answers get printed and forwarded ---------- */
@media print{
  *{background:transparent!important;color:#000!important;box-shadow:none!important;
    text-shadow:none!important}
  body{font-size:11pt;line-height:1.45}
  .top,.foot,.checks,.progress,.scrollcue,.skip,.share,.hero-cta,.finale-cta,
  .demo-chips,.prompt,.ticker,.answer-cta,.readout-cta,.brief-actions,.check-exit,
  .suggests,.ac{display:none!important}
  .hero-bg,.askhero-bg,.finale-bg,.burncard img{display:none!important}
  a[href^="http"]::after{content:" (" attr(href) ")";font-size:9pt;color:#555!important}
  h1,h2,h3{page-break-after:avoid}
  .brief-card,.brief-paper,.readout-item,.moves li{page-break-inside:avoid}
  .sec,.answer,.check{padding:0 0 1.2rem!important}
  .brief-paper{border:1px solid #999!important;padding:1rem!important}
}

/* founding-client note under the anchor tier */
.founding{font-size:.82rem;line-height:1.4;color:#6b5a4a;font-style:italic;
  margin:0 0 .9rem;padding-top:.7rem;border-top:1px dashed #d9c9ad}
.founding b{color:var(--hot);font-style:normal}

/* ============ NEON TUBE ICON SYSTEM ============
   Icons are drawn as bent neon tubing, not flat glyphs with a glow bolted on.
   Fail-safe by design: with no JS they render fully lit and static. Only when
   js-neon is set does the tube start dark and strike on, so a failed script
   can never leave a page full of invisible icons. */
.nicon{width:var(--isz,34px);height:var(--isz,34px);display:block;flex:none;
  color:var(--hot-2)}
.nicon use,.nicon symbol{color:inherit}
.nicon svg,.nicon{overflow:visible}
/* stroke scales WITH the icon (no non-scaling-stroke) so large icons read as
   thick glass tubing rather than hairlines */
.nicon *{fill:none;stroke:currentColor;stroke-width:1.75;
  stroke-linecap:round;stroke-linejoin:round}
.nicon{filter:drop-shadow(0 0 1px #fff8) drop-shadow(0 0 4px var(--hot-2))
  drop-shadow(0 0 10px var(--hot)) drop-shadow(0 0 24px var(--ember))}
.nicon-lg{--isz:58px}
.nicon-sm{--isz:26px}
.nicon-xs{--isz:19px}

/* Strike-on, made frozen-clock-safe.
   Hard rule learned twice on this build: the RESTING state must be the
   FINISHED state. A stalled animation clock (background-tab restore, print,
   headless capture) holds a keyframe's from-state forever, so anything that
   rests dark rests dark permanently. Icons therefore sit fully lit, and .lit
   runs a one-shot flicker with fill-mode none that returns to that same lit
   base. Worst case the flicker is skipped; the icon is never invisible.
   The stroke-dash draw-on was cut for exactly this reason. */
.js-neon .nicon.lit{animation:nstrike .85s steps(1) 1,
  nbreathe 4.5s ease-in-out 1s infinite}
@keyframes nstrike{
  0%{filter:drop-shadow(0 0 1px var(--ember))}
  14%{filter:drop-shadow(0 0 2px var(--hot-2)) drop-shadow(0 0 9px var(--hot))}
  22%{filter:drop-shadow(0 0 1px var(--ember))}
  36%{filter:drop-shadow(0 0 3px var(--hot-2)) drop-shadow(0 0 11px var(--hot))}
  46%{filter:drop-shadow(0 0 1px var(--ember))}
  60%,100%{filter:drop-shadow(0 0 1px #fff8) drop-shadow(0 0 4px var(--hot-2))
    drop-shadow(0 0 10px var(--hot)) drop-shadow(0 0 24px var(--ember))}
}
@keyframes nbreathe{
  0%,100%{filter:drop-shadow(0 0 2px var(--hot-2)) drop-shadow(0 0 7px var(--hot)) drop-shadow(0 0 15px var(--ember))}
  50%{filter:drop-shadow(0 0 3px var(--hot-2)) drop-shadow(0 0 11px var(--hot)) drop-shadow(0 0 22px var(--ember))}
}

/* icon + text rows */
.iconrow{display:flex;gap:1rem;align-items:flex-start}
.iconrow .nicon{margin-top:.15rem}

/* step / metric / note headers get an inline tube icon */
.step-ico{display:flex;align-items:center;gap:.7rem;margin:.2rem 0 .9rem}
.metric b,.bnote b{display:flex;align-items:center;gap:.55rem}

/* ---------- ember divider: a live coal travelling the seam ---------- */
.ember{position:relative;height:1px;background:var(--line);overflow:visible;
  margin:0;border:0}
.ember::after{content:"";position:absolute;top:-1.5px;left:0;width:130px;height:4px;
  border-radius:4px;
  background:linear-gradient(90deg,transparent,var(--hot),var(--glow),var(--hot),transparent);
  filter:blur(1px) drop-shadow(0 0 8px var(--hot));
  animation:emberrun 7s linear infinite}
@keyframes emberrun{from{transform:translateX(-140px)}to{transform:translateX(calc(100vw + 140px))}}

@media(prefers-reduced-motion:reduce){
    .js-neon .nicon.lit{animation:none}
  .ember::after{animation:none;opacity:.5}
}

/* ---------- generative engine optimization ---------- */
.geo-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:1.1rem}
.geo-card{background:var(--ink-2);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:1.5rem 1.6rem;transition:border-color .2s,transform .2s}
.geo-card:hover{border-color:var(--hot);transform:translateY(-3px)}
.geo-card .nicon{margin-bottom:.9rem}
.geo-card h3{font-size:1.08rem;margin-bottom:.4em}
.geo-card p{color:var(--muted);font-size:.94rem;margin:0;line-height:1.55}
@media(prefers-reduced-motion:reduce){.geo-card:hover{transform:none}}