/* ── tokens (Firecrawl scale) ─────────────────────────────────────── */
:root{
  color-scheme:light;
  --heat-4:#dd6d210a; --heat-8:#dd6d2114; --heat-12:#dd6d211f; --heat-16:#dd6d2129;
  --heat-20:#dd6d2133; --heat-40:#dd6d2166; --heat-90:#dd6d21e6; --heat-100:#dd6d21;
  --accent-black:#262626; --accent-white:#fff;
  --surface:#fff; --surface-raised:#fff;
  --accent-amethyst:#9061ff; --accent-bluetron:#2a6dfb; --accent-crimson:#eb3424;
  --accent-forest:#42c366; --accent-honey:#ecb730;
  --black-alpha-4:#0000000a; --black-alpha-5:#0000000d; --black-alpha-8:#00000014;
  --black-alpha-12:#0000001f; --black-alpha-16:#00000029; --black-alpha-20:#00000033;
  --black-alpha-32:#26262652; --black-alpha-48:#2626267a; --black-alpha-56:#2626268f;
  --black-alpha-64:#262626a3; --black-alpha-72:#262626b8; --black-alpha-88:#262626e0;
  --border-faint:#ededed; --border-muted:#e8e8e8; --border-loud:#e6e6e6;
  --ill-faint:#ededed; --ill-muted:#e6e6e6; --ill-default:#dbdbdb;
  --background-base:#f9f9f9; --background-lighter:#fbfbfb;
  --container:1112px;
  --font:"Inter",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --mono:"Geist Mono","Roboto Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --ease:cubic-bezier(.22,.61,.36,1);
}
@supports (color:color(display-p3 1 1 1)){
  :root{ --heat-100:color(display-p3 .866667 .427451 .129412/1); }
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:90px}
body{margin:0;font-family:var(--font);background:var(--background-base);color:var(--accent-black);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  font-size:16px;line-height:24px;letter-spacing:.16px;overflow-x:clip}
a{color:inherit}
img{max-width:100%}
::selection{background:var(--heat-20);color:var(--heat-100)}
:focus-visible{outline:2px solid var(--heat-100);outline-offset:2px;border-radius:6px}

/* ── type scale ───────────────────────────────────────────────────── */
h1,h2,h3,h4{font-weight:500;margin:0}
h1{font-size:44px;line-height:48px;letter-spacing:-.22px}
h2{font-size:36px;line-height:40px;letter-spacing:-.36px}
h3{font-size:20px;line-height:26px;letter-spacing:-.1px}
@media(min-width:1024px){
  h1{font-size:60px;line-height:64px;letter-spacing:-.3px}
  h2{font-size:44px;line-height:48px;letter-spacing:-.44px}
}
p{margin:0 0 16px}
.body-l{font-size:18px;line-height:26px;letter-spacing:-.09px}
.body-s{font-size:14px;line-height:20px;letter-spacing:.14px}
.muted{color:var(--black-alpha-64)}
.faint{color:var(--black-alpha-48)}
.mono{font-family:var(--mono);font-size:13px;line-height:20px;font-weight:500;letter-spacing:0}
.label{font-family:var(--mono);font-size:12px;line-height:16px;text-transform:uppercase;
  letter-spacing:.02em;color:var(--black-alpha-48)}
.label .b{color:var(--heat-100)}

/* ── page background: fixed grid + heat glow + drift ──────────────── */
.bg-layer{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.bg-grid{position:absolute;inset:-2px;
  background-image:linear-gradient(var(--border-faint) 1px,transparent 1px),
    linear-gradient(90deg,var(--border-faint) 1px,transparent 1px);
  background-size:56px 56px;
  -webkit-mask-image:radial-gradient(120% 80% at 50% 0%,#000 0%,#0009 38%,transparent 78%);
  mask-image:radial-gradient(120% 80% at 50% 0%,#000 0%,#0009 38%,transparent 78%);opacity:.9}
.bg-dots{position:absolute;inset:0;
  background-image:radial-gradient(var(--ill-default) 1px,transparent 1px);background-size:28px 28px;
  -webkit-mask-image:radial-gradient(80% 50% at 50% 100%,#0000008a,transparent 70%);
  mask-image:radial-gradient(80% 50% at 50% 100%,#0000008a,transparent 70%);opacity:.5}
.bg-glow{position:absolute;left:50%;top:-380px;width:1200px;height:820px;transform:translateX(-50%);
  background:radial-gradient(closest-side,var(--heat-16),var(--heat-4) 55%,transparent 78%);
  animation:glow-drift 22s var(--ease) infinite alternate}
.bg-glow-2{position:absolute;right:-260px;top:38%;width:760px;height:760px;
  background:radial-gradient(closest-side,var(--heat-8),transparent 72%);
  animation:glow-drift-2 28s var(--ease) infinite alternate}
@keyframes glow-drift{from{transform:translateX(-50%) translateY(0) scale(1)}
  to{transform:translateX(-46%) translateY(46px) scale(1.08)}}
@keyframes glow-drift-2{from{transform:translateY(0)}to{transform:translateY(-70px)}}

/* ── the hero's search field, under the three buttons ───────────────── */
.hero-search{display:flex;justify-content:center;margin-top:18px}
.wsearch{width:100%;max-width:560px;display:flex;align-items:center;gap:12px;
  padding:14px 18px;border-radius:14px;background:var(--surface);cursor:text;
  box-shadow:0 0 0 1px var(--border-muted),0 14px 34px -26px #26262666;
  transition:box-shadow .2s ease,transform .2s var(--ease)}
.wsearch:hover{box-shadow:0 0 0 1px var(--heat-40),0 18px 40px -24px #26262666;
  transform:translateY(-1px)}
/* Without this the icon renders at its intrinsic SVG size and fills the field.
   The width and height have to be explicit: the svg carries a viewBox and no
   dimensions, so it has no size of its own to fall back to. */
.wsearch .ico{width:18px;height:18px;flex:none;color:var(--heat-100)}
.wsearch .ph{flex:1;text-align:left;color:var(--black-alpha-48);font-size:16px}
.wsearch .kbd{font-family:var(--mono);font-size:11px;padding:3px 8px;border-radius:6px;
  background:var(--background-base);box-shadow:inset 0 0 0 1px var(--border-muted);
  color:var(--black-alpha-48)}
@media(max-width:720px){
  .wsearch{padding:13px 15px}
  .wsearch .kbd{display:none}
  .wsearch .ph{font-size:15px}
}

/* ── the workflow detail panel (client-side, no new URLs) ───────────── */
.wfp{position:fixed;inset:0;z-index:100;display:none;padding:8vh 20px 20px;
  background:#26262640;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
.wfp.on{display:block}
.wfp-box{max-width:720px;margin:0 auto;background:var(--surface);border-radius:18px;
  overflow:hidden;display:flex;flex-direction:column;max-height:84vh;
  box-shadow:0 0 0 1px var(--border-muted),0 40px 90px -30px #262626a6;
  animation:pal-in .18s ease-out both}
.wfp-head{display:flex;align-items:flex-start;gap:12px;padding:20px 22px 16px;
  border-bottom:1px solid var(--border-faint);background:var(--background-base);flex:none}
.wfp-head h3{margin:8px 0 0;font-size:22px;line-height:28px;letter-spacing:-.01em}
.wfp-body{padding:20px 22px 24px;overflow-y:auto;-webkit-overflow-scrolling:touch;
  overscroll-behavior:contain}
.wfp-big{font-size:26px;line-height:32px;font-weight:500;letter-spacing:-.3px;margin:8px 0 4px}
/* the cards are buttons now, so they need the anchor's affordances back */
button.card{width:100%;text-align:left;border:0;font:inherit;cursor:pointer;
  background:var(--surface);transition:box-shadow .2s ease,transform .2s var(--ease)}
button.card:hover{transform:translateY(-3px);
  box-shadow:0 0 0 1px var(--heat-20),0 10px 30px -18px #26262666}
button.card:hover .card-t{color:var(--heat-100)}
@media(max-width:720px){
  .wfp{padding:0}
  .wfp-box{max-width:none;max-height:none;height:100dvh;border-radius:0}
  .wfp-head{padding:16px 16px 12px}
  .wfp-head h3{font-size:19px;line-height:25px}
  .wfp-body{padding:16px 16px calc(24px + env(safe-area-inset-bottom))}
}
@supports not (height:100dvh){@media(max-width:720px){.wfp-box{height:100vh}}}

/* the two vertical container rails, the signature technical frame */
.rails{position:fixed;inset:0;z-index:1;pointer-events:none;display:flex;justify-content:center}
.rails span{width:var(--container);max-width:calc(100% - 40px);height:100%;
  border-left:1px solid var(--border-faint);border-right:1px solid var(--border-faint)}
@media(max-width:900px){.rails{display:none}}

.page{position:relative;z-index:2}
.wrap{max-width:var(--container);margin:0 auto;padding:0 28px}
.narrow{max-width:720px;margin:0 auto;padding:0 28px}

/* ── header ───────────────────────────────────────────────────────── */
header.top{position:sticky;top:0;z-index:50;border-bottom:1px solid transparent;
  transition:background .25s var(--ease),border-color .25s var(--ease),backdrop-filter .25s}
header.top.scrolled{background:#f9f9f9d9;backdrop-filter:blur(14px) saturate(1.3);
  border-bottom-color:var(--border-faint)}
header.top .row{display:flex;align-items:center;gap:24px;height:68px}
/* the header mark and wordmark were removed by request. `.home` keeps the
   left edge held and the site logo's job of getting you home, without drawing
   anything: a header with no route home is a navigation dead end. */
.home{margin-right:auto;display:block;width:120px;height:34px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;margin-right:auto;
  font-weight:500;font-size:17px;letter-spacing:-.2px}
.brand .mark{width:28px;height:28px;border-radius:8px;background:var(--heat-100);color:#fff;
  display:grid;place-items:center;font-family:var(--mono);font-size:13px;font-weight:500;
  box-shadow:0 0 0 1px var(--heat-20),0 6px 16px -8px var(--heat-90)}
.brand .mark::after{content:"";position:absolute;width:28px;height:28px;border-radius:8px;
  box-shadow:0 0 0 0 var(--heat-40);animation:markpulse 3.6s var(--ease) infinite}
@keyframes markpulse{0%{box-shadow:0 0 0 0 var(--heat-40)}70%{box-shadow:0 0 0 10px transparent}
  100%{box-shadow:0 0 0 0 transparent}}
header.top .row{position:relative}
.nav{display:flex;gap:4px;align-items:center}
.nav>a,.nav-trigger{display:inline-flex;align-items:center;gap:5px;text-decoration:none;
  font-family:var(--font);font-size:14px;line-height:20px;color:var(--black-alpha-64);
  background:none;border:0;padding:8px 10px;border-radius:9px;cursor:pointer;
  transition:color .15s ease,background .15s ease}
.nav>a:hover,.nav-trigger:hover,.nav-item.open .nav-trigger{color:var(--heat-100);background:var(--heat-4)}
.nav-trigger svg{width:11px;height:11px;transition:transform .2s var(--ease);opacity:.7}
.nav-item.open .nav-trigger svg{transform:rotate(180deg)}
.nav-item{position:static}

/* mega panel */
.mega{position:absolute;top:calc(100% + 6px);left:50%;transform:translateX(-50%) translateY(-6px);
  width:min(920px,calc(100vw - 40px));background:var(--surface);border-radius:16px;
  box-shadow:0 0 0 1px var(--border-muted),0 30px 70px -32px #26262666;
  opacity:0;visibility:hidden;pointer-events:none;z-index:60;
  transition:opacity .18s var(--ease),transform .18s var(--ease),visibility .18s}
.mega.narrow{width:min(620px,calc(100vw - 40px))}
.nav-item.open .mega{opacity:1;visibility:visible;pointer-events:auto;transform:translateX(-50%) translateY(0)}
.mega-inner{display:grid;grid-template-columns:1fr 1fr 1fr;gap:0}
.mega.narrow .mega-inner{grid-template-columns:1fr 1fr}
.mega-col{padding:20px}
.mega-col+.mega-col{border-left:1px solid var(--border-faint)}
.mega-col .label{margin-bottom:12px}
.mi{display:block;text-decoration:none;padding:8px 10px;border-radius:9px;margin:0 -10px;
  transition:background .14s ease}
.mi:hover{background:var(--heat-4)}
.mi b{display:block;font-size:14px;font-weight:450;color:var(--accent-black);line-height:20px}
.mi:hover b{color:var(--heat-100)}
.mi span{display:block;font-size:12.5px;line-height:17px;color:var(--black-alpha-48);margin-top:1px}
.mi em{float:right;font-family:var(--mono);font-style:normal;font-size:11px;color:var(--black-alpha-32)}
.mega-feat{background:var(--background-lighter);border-radius:0 16px 16px 0}
.mega-feat .fcard{display:block;text-decoration:none;background:var(--surface);border-radius:12px;
  padding:14px;box-shadow:0 0 0 1px var(--heat-20);margin-bottom:12px}
.mega-feat .fcard:hover{box-shadow:0 0 0 1px var(--heat-40)}
.mega-feat .fcard .t{font-size:14px;font-weight:450;color:var(--heat-100);line-height:20px}
.mega-feat .fcard .d{font-size:12.5px;line-height:17px;color:var(--black-alpha-56);margin-top:4px}

/* mobile sheet */
.burger{display:none;align-items:center;justify-content:center;width:38px;height:38px;
  border-radius:10px;background:var(--surface);box-shadow:0 0 0 1px var(--border-muted);
  border:0;cursor:pointer;color:var(--accent-black)}
.burger svg{width:17px;height:17px}
.sheet{position:fixed;inset:0;z-index:90;display:none;background:var(--background-base);
  overflow-y:auto;padding:76px 20px 40px}
.sheet.on{display:block}
.sheet details{margin:8px 0}
.sheet .mi{margin:0}
.sheet .direct{display:block;padding:14px 16px;margin:8px 0;border-radius:12px;background:var(--surface);
  box-shadow:0 0 0 1px var(--border-muted);text-decoration:none;font-size:16px}
@media(max-width:980px){
  .nav{display:none}
  .burger{display:inline-flex}
}
@media(min-width:981px){.sheet{display:none!important}}

/* ── search ───────────────────────────────────────────────────────── */
.search-open{display:flex;align-items:center;gap:9px;min-width:236px;height:38px;padding:0 12px;
  border-radius:10px;background:var(--surface);box-shadow:0 0 0 1px var(--border-muted);
  color:var(--black-alpha-48);font-size:14px;cursor:text;transition:box-shadow .18s ease,color .18s ease}
.search-open:hover{box-shadow:0 0 0 1px var(--heat-40);color:var(--black-alpha-64)}
.search-open .ico{width:15px;height:15px;flex:none;opacity:.7}
.search-open .kbd{margin-left:auto;font-family:var(--mono);font-size:11px;line-height:16px;
  padding:1px 6px;border-radius:5px;background:var(--black-alpha-4);color:var(--black-alpha-48)}
@media(max-width:1180px){.search-open{min-width:38px;padding:0 11px}
  .search-open .txt,.search-open .kbd{display:none}}

.pal{position:fixed;inset:0;z-index:100;display:none;padding:10vh 20px 20px;
  background:#26262640;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
.pal.on{display:block}
.pal-box{max-width:660px;margin:0 auto;background:var(--surface);border-radius:18px;
  overflow:hidden;display:flex;flex-direction:column;max-height:80vh;
  box-shadow:0 0 0 1px var(--border-muted),0 40px 90px -30px #262626a6;
  animation:pal-in .18s ease-out both}
@keyframes pal-in{from{opacity:0;transform:translateY(-10px) scale(.99)}to{opacity:1;transform:none}}

.pal-head{display:flex;align-items:flex-start;gap:12px;padding:18px 18px 14px;
  border-bottom:1px solid var(--border-faint);background:var(--background-base)}
.pal-head .t{font-size:16px;font-weight:500;color:var(--accent-black)}
.pal-head .s{font-size:13px;line-height:19px;color:var(--black-alpha-64);margin-top:3px}
/* The card opens on its own, so leaving it needs to be as obvious as entering it.
   Escape is not available on a phone and tapping the scrim announces nothing. */
.pal-x{margin-left:auto;flex:none;width:34px;height:34px;border-radius:10px;border:0;
  cursor:pointer;background:var(--black-alpha-4);color:var(--black-alpha-64);
  display:flex;align-items:center;justify-content:center;font-size:18px;line-height:1;
  transition:background .15s ease,color .15s ease}
.pal-x:hover{background:var(--heat-8);color:var(--heat-100)}

.pal-in{display:flex;align-items:center;gap:11px;padding:14px 18px;
  border-bottom:1px solid var(--border-faint);flex:none}
.pal-in .ico{width:18px;height:18px;flex:none;color:var(--heat-100)}
.pal-in input{flex:1;min-width:0;border:0;outline:0;background:none;font-family:var(--font);
  font-size:17px;color:var(--accent-black)}
.pal-in input::placeholder{color:var(--black-alpha-32)}
.pal-count{font-family:var(--mono);font-size:11px;color:var(--black-alpha-48);
  white-space:nowrap;flex:none}

.pal-res{flex:1 1 auto;min-height:0;overflow-y:auto;padding:8px;
  -webkit-overflow-scrolling:touch;overscroll-behavior:contain}
.r-sec{display:flex;align-items:center;gap:8px;font-family:var(--mono);font-size:10px;
  letter-spacing:.06em;text-transform:uppercase;color:var(--black-alpha-32);
  padding:12px 12px 6px}
.r-sec span{margin-left:auto;color:var(--black-alpha-32)}
.r-sec:first-child{padding-top:6px}

.r{position:relative;border-radius:12px}
.r.sel,.r:hover{background:var(--heat-4);box-shadow:inset 0 0 0 1px var(--heat-16)}
.r-main{display:flex;align-items:flex-start;gap:12px;text-decoration:none;padding:11px 12px}
/* A letter, not an icon set. It gives every row a fixed left edge to scan down
   and colours by outcome, without shipping 198 pictures nobody would look at. */
.r-badge{flex:none;width:30px;height:30px;border-radius:9px;display:flex;align-items:center;
  justify-content:center;font-family:var(--mono);font-size:13px;
  background:var(--heat-8);color:var(--heat-100);margin-top:1px}
.r.sel .r-badge,.r:hover .r-badge{background:var(--heat-100);color:#fff}
.r-txt{min-width:0;flex:1}
.rt{display:block;font-size:15px;font-weight:450;color:var(--accent-black);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.r.sel .rt,.r:hover .rt{color:var(--heat-100)}
.r-flag{display:inline-block;margin-left:8px;font-family:var(--mono);font-size:9px;
  letter-spacing:.06em;text-transform:uppercase;color:var(--heat-100);
  background:var(--heat-8);border-radius:5px;padding:2px 6px;vertical-align:middle}
.rd{display:block;font-size:13px;line-height:19px;color:var(--black-alpha-64);margin-top:2px;
  overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.rm{display:flex;gap:8px;align-items:center;margin-top:4px;font-family:var(--mono);
  font-size:10px;text-transform:uppercase;color:var(--black-alpha-32);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rm b{color:var(--black-alpha-48);font-weight:400}
.r-num{flex:none;display:flex;flex-direction:column;align-items:flex-end;gap:4px;
  padding-left:6px;text-align:right}
.rp{font-family:var(--mono);font-size:12px;color:var(--accent-black);white-space:nowrap;
  padding:5px 9px;border-radius:7px;background:var(--background-base);
  box-shadow:inset 0 0 0 1px var(--border-faint)}
.r.sel .rp{background:var(--surface);box-shadow:inset 0 0 0 1px var(--heat-20)}
.rdy{font-family:var(--mono);font-size:10px;color:var(--black-alpha-32);white-space:nowrap}
/* The write-up was reachable only by a shift-click nobody discovers. */
.r-alt{position:absolute;right:12px;bottom:10px;font-size:11px;text-decoration:none;
  color:var(--heat-100);opacity:0;transition:opacity .15s ease;padding:3px 8px;
  border-radius:6px;background:var(--surface);box-shadow:0 0 0 1px var(--heat-20)}
.r:hover .r-alt,.r.sel .r-alt,.r-alt:focus{opacity:1}
.pal-res mark{background:var(--heat-16);color:inherit;border-radius:3px;padding:0 1px}

.pal-start{padding:12px 12px 4px}
.pal-sec{display:flex;align-items:center;gap:8px;font-family:var(--mono);font-size:11px;
  letter-spacing:.04em;text-transform:uppercase;color:var(--black-alpha-48);margin:4px 4px 9px}
.pal-sec a{margin-left:auto;color:var(--heat-100);text-decoration:none;text-transform:none;
  font-family:var(--font);font-size:12px;cursor:pointer}
.pal-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:16px}
.pal-grid a{display:block;text-decoration:none;padding:11px 13px;border-radius:12px;
  background:var(--background-base);box-shadow:inset 0 0 0 1px var(--border-faint);
  transition:background .15s ease,box-shadow .15s ease}
.pal-grid a:hover{background:var(--heat-4);box-shadow:inset 0 0 0 1px var(--heat-16)}
.pal-grid .t{font-size:14px;font-weight:450;color:var(--accent-black)}
.pal-grid .p{font-size:12px;line-height:17px;color:var(--black-alpha-48);margin-top:2px}
.pal-grid a:hover .t{color:var(--heat-100)}
.pal-chips{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:14px}
.pal-chips a{cursor:pointer}

.pal-none{padding:24px 18px 20px;text-align:center}
.pal-none h4{font-size:16px;font-weight:500;margin:0 0 6px}
.pal-none p{font-size:14px;line-height:21px;color:var(--black-alpha-64);margin:0 auto 14px;
  max-width:42ch}
.pal-skel{padding:14px}
.pal-skel i{display:block;height:44px;border-radius:10px;margin-bottom:8px;
  background:linear-gradient(90deg,var(--black-alpha-4),var(--black-alpha-8),var(--black-alpha-4));
  background-size:200% 100%;animation:skel 1.1s linear infinite}
@keyframes skel{from{background-position:200% 0}to{background-position:-200% 0}}
@media(prefers-reduced-motion:reduce){.pal-skel i{animation:none}}

.pal-foot{display:flex;gap:14px;align-items:center;padding:11px 18px;flex:none;
  border-top:1px solid var(--border-faint);font-family:var(--mono);font-size:11px;
  text-transform:uppercase;color:var(--black-alpha-32);background:var(--background-lighter)}
.pal-foot a{margin-left:auto;text-decoration:none;color:var(--heat-100)}

/* Phones get a bottom sheet. The old card floated at 12vh with a 52vh result
   window, which showed about four results between two dead bands; this uses the
   whole screen, keeps the input pinned, and clears the home indicator. */
@media(max-width:720px){
  .pal{padding:0;background:#26262659}
  .pal-box{max-width:none;max-height:none;height:100dvh;border-radius:0;
    animation:sheet-in .2s ease-out both}
  .pal-head{padding:14px 16px 12px}
  .pal-in{padding:13px 16px}
  .pal-in input{font-size:16px}          /* 16px or iOS zooms the page on focus */
  .pal-count{display:none}
  .r-main{padding:13px 12px;flex-wrap:wrap}
  .r-num{width:100%;flex-direction:row;align-items:center;justify-content:flex-start;
    gap:8px;padding:8px 0 0 42px}
  .rd{-webkit-line-clamp:3}
  .r-alt{position:static;opacity:1;margin:0 12px 12px 54px;display:inline-block}
  .pal-grid{grid-template-columns:1fr}
  .pal-foot{padding-bottom:calc(11px + env(safe-area-inset-bottom))}
  .pal-x{width:40px;height:40px}
}
@keyframes sheet-in{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@supports not (height:100dvh){@media(max-width:720px){.pal-box{height:100vh}}}
/* The search glyph carries a viewBox and no width or height, so it has no
   intrinsic size to fall back on: any container that forgets to size it renders
   it at full height and it swallows the field. This is the floor, and every
   specific rule below only adjusts it. Getting this wrong is invisible in review
   and obvious to every visitor, so it is defined once, globally. */
.ico{width:18px;height:18px;flex:none}

.search-big{display:flex;align-items:center;gap:12px;background:var(--surface);
  border-radius:14px;padding:15px 18px;box-shadow:0 0 0 1px var(--border-muted);
  transition:box-shadow .2s ease}
.search-big:focus-within{box-shadow:0 0 0 1px var(--heat-40),0 0 0 4px var(--heat-8)}
.search-big .ico{width:19px;height:19px;color:var(--heat-100)}
.search-big input{flex:1;min-width:0;border:0;outline:0;background:none;
  font-family:var(--font);font-size:17px;color:var(--accent-black)}
.search-big input::placeholder{color:var(--black-alpha-32)}
@media(max-width:720px){
  .search-big{padding:13px 15px}
  .search-big input{font-size:16px}      /* 16px or iOS zooms the page on focus */
}

/* ── buttons ──────────────────────────────────────────────────────── */
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:8px;
  text-decoration:none;font-size:14px;line-height:20px;font-weight:450;padding:11px 18px;
  border-radius:10px;border:1px solid transparent;transition:all .2s ease;white-space:nowrap}
.btn .arw{transition:transform .2s var(--ease)}
.btn:hover .arw{transform:translateX(3px)}
.btn-primary{background:var(--heat-100);color:#fff;
  box-shadow:0 0 0 1px var(--heat-20),0 1px 2px #26262614,0 8px 22px -12px var(--heat-90)}
.btn-primary:hover{filter:brightness(1.05);box-shadow:0 0 0 1px var(--heat-40),0 2px 4px #26262614,0 12px 28px -12px var(--heat-90);transform:translateY(-1px)}
.btn-ghost{background:var(--surface);color:var(--accent-black);border-color:var(--border-muted);
  box-shadow:0 1px 2px #26262608}
.btn-ghost:hover{border-color:var(--heat-40);color:var(--heat-100);transform:translateY(-1px)}
.btn-lg{padding:13px 22px;font-size:15px}
.btn-block{width:100%}

/* ── section chrome: hairline rules + corner fillets ──────────────── */
section{position:relative;padding:72px 0}
.ruled{border-top:1px solid var(--border-faint)}
.tick{position:relative}
.tick::before,.tick::after{content:"";position:absolute;top:-4px;width:9px;height:9px;
  background:
    linear-gradient(var(--ill-default),var(--ill-default)) center/9px 1px no-repeat,
    linear-gradient(var(--ill-default),var(--ill-default)) center/1px 9px no-repeat}
.tick::before{left:-4px}.tick::after{right:-4px}
.sec-head{max-width:660px;margin-bottom:36px}
.sec-head.center{margin-left:auto;margin-right:auto;text-align:center}
.sec-head h2{margin:14px 0 12px}
.sec-head p{color:var(--black-alpha-64);font-size:18px;line-height:26px;letter-spacing:-.09px;margin:0}

/* ── pills / chips ────────────────────────────────────────────────── */
.chip{display:inline-flex;align-items:center;gap:7px;font-family:var(--mono);font-size:12px;
  line-height:16px;text-transform:uppercase;padding:5px 10px;border-radius:999px;
  border:1px solid var(--border-muted);background:var(--surface);color:var(--black-alpha-64)}
.chip.heat{border-color:var(--heat-20);background:var(--heat-4);color:var(--heat-100)}
.chip .dot{width:6px;height:6px;border-radius:50%;background:var(--heat-100);
  box-shadow:0 0 0 3px var(--heat-16);animation:blip 2.4s ease-in-out infinite}
@keyframes blip{0%,100%{opacity:1}50%{opacity:.35}}
.tag{display:inline-flex;align-items:center;font-size:12px;line-height:16px;padding:4px 8px;
  border-radius:6px;background:var(--black-alpha-4);color:var(--black-alpha-64);
  font-family:var(--mono)}

/* ── cards ────────────────────────────────────────────────────────── */
.grid{display:grid;gap:16px}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
@media(max-width:1000px){.g3,.g4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:680px){.g2,.g3,.g4{grid-template-columns:1fr}}

.card{position:relative;background:var(--surface);border-radius:14px;padding:22px;
  box-shadow:0 0 0 1px var(--border-muted),0 1px 2px #26262605;
  transition:box-shadow .2s ease,transform .2s var(--ease)}

/* ── liquid glass ────────────────────────────────────────────────────
   Written natively rather than ported. The raymarched reference is a Three.js
   demo with no licence file, which means all rights reserved and nothing to
   copy from, and vendoring a WebGL renderer to frost eight cards would cost
   more than the whole rest of the page. This is the same read - refraction,
   saturation, a specular edge - from compositor primitives that are already
   hardware-accelerated, and it genuinely refracts the video moving behind the
   card rather than simulating one.

   Gated behind @supports: without backdrop-filter the card stays opaque, which
   is the correct fallback because legibility must not depend on the effect. */
@supports (backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px)){
  .glass-scope .card{
    /* translucent enough to refract, opaque enough to read black text on */
    background:color-mix(in srgb,var(--surface) 72%,transparent);
    -webkit-backdrop-filter:blur(16px) saturate(1.85);
    backdrop-filter:blur(16px) saturate(1.85);
    box-shadow:
      0 0 0 1px #ffffff9e,                     /* the lit rim */
      inset 0 1px 0 #ffffffe6,                 /* specular top edge */
      inset 0 -1px 0 #26262610,                /* the shadowed underside */
      0 1px 2px #26262608,
      0 18px 40px -30px #2626263d}
  .glass-scope .card::before{
    content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
    /* the thickness: light gathering at the top edge and pooling at the bottom */
    background:linear-gradient(160deg,#ffffffa8 0%,#ffffff1a 26%,transparent 52%),
      radial-gradient(120% 80% at 50% 118%,var(--heat-8),transparent 62%)}
  .glass-scope a.card:hover{
    background:color-mix(in srgb,var(--surface) 66%,transparent);
    box-shadow:
      0 0 0 1px var(--heat-40),
      inset 0 1px 0 #fff,
      inset 0 -1px 0 #26262614,
      0 22px 46px -28px #26262652}
}
.card::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  box-shadow:inset 0 0 0 1px transparent;transition:box-shadow .2s ease}
a.card{display:block;text-decoration:none}
a.card:hover{transform:translateY(-3px);
  box-shadow:0 0 0 1px var(--heat-20),0 10px 30px -18px #26262666}
a.card:hover .card-t{color:var(--heat-100)}
a.card:hover .arw{transform:translateX(3px)}
.card h3{margin:8px 0 8px}
.card p{color:var(--black-alpha-64);font-size:14px;line-height:20px;letter-spacing:.14px;margin:0}
.card .meta{margin-top:16px;display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.card-t{transition:color .18s ease}
.card .arw{display:inline-block;transition:transform .2s var(--ease);color:var(--heat-100)}
.card .n{font-family:var(--mono);font-size:12px;color:var(--black-alpha-32)}

/* ── the stacking process cards ───────────────────────────────────────
   Cloned from explee.com's use-case section. Each card sits in its own
   sticky wrapper; giving every wrapper a slightly larger `top` than the
   one before it is the entire trick, no scroll listener required, since
   a sticky element stops at its own offset and the next one lands a few
   pixels lower, so the earlier card's edge stays visible as a "lip"
   underneath. z-index climbs the same way so later cards sit on top.
   The scale step per card is the other half: a card permanently a touch
   smaller than the one in front of it is what reads as a physical deck
   rather than a pile of identical rectangles. --i is set inline per card
   (0, 1, 2 ...) so both top and z-index derive from one number. */
.use-stack{position:relative}
.use-stack-wrap{position:sticky;z-index:calc(var(--i) + 1);
  top:calc(88px + var(--i) * 14px);padding-bottom:20px}
.use-stack-card{border-radius:14px;padding:26px 28px;background:var(--surface);
  box-shadow:0 0 0 1px var(--border-muted),0 18px 40px -28px #26262640;
  transform:scale(calc(0.9 + var(--i) * 0.025));transform-origin:top center}
.use-stack-card .label{margin-bottom:10px}
.use-stack-card h3{margin:0 0 8px}
.use-stack-card p{color:var(--black-alpha-64);font-size:15px;line-height:22px;
  max-width:64ch;margin:0}
@media(max-width:680px){
  .use-stack-wrap{top:calc(68px + var(--i) * 10px)}
  .use-stack-card{transform:none}
}

/* ── lists ────────────────────────────────────────────────────────── */
ul.ticks{list-style:none;padding:0;margin:16px 0}
ul.ticks li{position:relative;padding-left:24px;margin:9px 0;color:var(--black-alpha-72);
  font-size:15px;line-height:23px}
ul.ticks li::before{content:"";position:absolute;left:2px;top:9px;width:7px;height:7px;
  border-radius:2px;background:var(--heat-100);box-shadow:0 0 0 3px var(--heat-12)}
ol.steps{counter-reset:s;list-style:none;padding:0;margin:18px 0}
ol.steps li{counter-increment:s;position:relative;padding-left:48px;margin:16px 0;
  color:var(--black-alpha-72);font-size:15px;line-height:23px}
ol.steps li::before{content:"0" counter(s);position:absolute;left:0;top:1px;font-family:var(--mono);
  font-size:12px;line-height:16px;color:var(--heat-100);background:var(--heat-4);
  border:1px solid var(--heat-16);border-radius:6px;padding:3px 7px}
ol.steps li b{color:var(--accent-black);font-weight:500}

/* ── table ────────────────────────────────────────────────────────── */
.table-wrap{overflow-x:auto;border-radius:14px;box-shadow:0 0 0 1px var(--border-muted)}
table.spec{width:100%;border-collapse:collapse;background:var(--surface);font-size:14px;
  line-height:20px;min-width:520px}
table.spec th,table.spec td{text-align:left;padding:14px 18px;border-bottom:1px solid var(--border-faint);
  vertical-align:top}
table.spec th{width:210px;color:var(--black-alpha-56);font-weight:450;font-family:var(--mono);
  font-size:12px;text-transform:uppercase;letter-spacing:.02em;background:var(--background-lighter)}
table.spec td{color:var(--black-alpha-72)}
table.spec tr:last-child th,table.spec tr:last-child td{border-bottom:0}

/* ── hero ─────────────────────────────────────────────────────────── */
.hero{padding:84px 0 64px;text-align:center}
.hero h1{margin:22px 0 20px}
.hero .lead{color:var(--black-alpha-64);font-size:18px;line-height:26px;letter-spacing:-.09px;
  max-width:640px;margin:0 auto 30px}
.cta-row{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.hero-note{margin-top:20px;font-family:var(--mono);font-size:12px;color:var(--black-alpha-48);
  text-transform:uppercase}

/* terminal */
.term{margin:44px auto 0;max-width:820px;background:var(--surface);border-radius:14px;
  box-shadow:0 0 0 1px var(--border-muted),0 28px 60px -34px #26262666;overflow:hidden;text-align:left}
.term-bar{display:flex;align-items:center;gap:8px;padding:11px 14px;
  border-bottom:1px solid var(--border-faint);background:var(--background-lighter)}
.term-bar i{width:9px;height:9px;border-radius:50%;background:var(--ill-default);display:block}
.term-bar i:first-child{background:var(--heat-40)}
.term-bar .t{margin-left:8px;font-family:var(--mono);font-size:12px;color:var(--black-alpha-48)}
.term-body{padding:18px;font-family:var(--mono);font-size:13px;line-height:22px;min-height:196px}
.term-body .ln{display:block;white-space:pre-wrap;color:var(--black-alpha-72)}
.term-body .ln .k{color:var(--heat-100)}
.term-body .ln .g{color:var(--accent-forest)}
.term-body .ln .c{color:var(--black-alpha-32)}
.cursor{display:inline-block;width:7px;height:14px;vertical-align:-2px;background:var(--heat-100);
  animation:cursor-blink .7s infinite}
@keyframes cursor-blink{0%,100%{opacity:0}50%{opacity:1}}

/* pipeline strip */
.pipe{display:flex;align-items:center;gap:0;margin:34px auto 0;max-width:820px;
  border-radius:12px;background:var(--surface);box-shadow:0 0 0 1px var(--border-muted);overflow:hidden}
.pipe .node{flex:1;padding:16px 14px;text-align:center;font-family:var(--mono);font-size:12px;
  text-transform:uppercase;color:var(--black-alpha-56);position:relative}
.pipe .node+.node{border-left:1px solid var(--border-faint)}
.pipe .node b{display:block;font-family:var(--font);font-size:14px;font-weight:450;
  color:var(--accent-black);text-transform:none;letter-spacing:.14px;margin-top:5px}
.pipe .node::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;
  background:linear-gradient(90deg,transparent,var(--heat-100),transparent);
  transform:scaleX(0);animation:pipeflow 4.8s var(--ease) infinite}
.pipe .node:nth-child(1)::after{animation-delay:0s}
.pipe .node:nth-child(2)::after{animation-delay:.5s}
.pipe .node:nth-child(3)::after{animation-delay:1s}
.pipe .node:nth-child(4)::after{animation-delay:1.5s}
@keyframes pipeflow{0%,60%,100%{transform:scaleX(0);opacity:0}
  12%,45%{transform:scaleX(1);opacity:1}}

/* marquee */
.marquee{position:relative;overflow:hidden;padding:18px 0;
  border-top:1px solid var(--border-faint);border-bottom:1px solid var(--border-faint);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.marquee .track{display:flex;gap:12px;width:max-content;animation:marquee 46s linear infinite}
.marquee:hover .track{animation-play-state:paused}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* stats */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:0;background:var(--surface);
  border-radius:14px;box-shadow:0 0 0 1px var(--border-muted);overflow:hidden}
@media(max-width:680px){.stats{grid-template-columns:repeat(2,1fr)}}
.stat{padding:24px 20px;text-align:center}
.stat+.stat{border-left:1px solid var(--border-faint)}
@media(max-width:680px){.stat:nth-child(3){border-left:0}
  .stat:nth-child(n+3){border-top:1px solid var(--border-faint)}}
.stat .v{font-size:34px;line-height:38px;font-weight:500;letter-spacing:-.4px}
.stat .l{font-family:var(--mono);font-size:12px;text-transform:uppercase;color:var(--black-alpha-48);
  margin-top:6px}

/* ── reveal motion ────────────────────────────────────────────────── */
[data-reveal]{opacity:0;transform:translateY(10px);
  transition:opacity .5s ease-out var(--d,0ms),transform .5s ease-out var(--d,0ms)}
[data-reveal].in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important}
  [data-reveal]{opacity:1;transform:none}
  .use-stack-wrap{position:static;top:auto}
  .use-stack-card{transform:none}
}

/* ── article ──────────────────────────────────────────────────────── */
article{padding:8px 0 32px}
article h1{font-size:38px;line-height:44px;letter-spacing:-.38px;margin:0 0 20px}
@media(min-width:1024px){article h1{font-size:44px;line-height:50px}}
article h2{font-size:26px;line-height:32px;letter-spacing:-.26px;margin:44px 0 14px}
article h3{margin:28px 0 10px}
article p{color:var(--black-alpha-72);font-size:17px;line-height:28px;letter-spacing:0}
article .lead{font-size:19px;line-height:30px;color:var(--black-alpha-64)}
article ul.ticks li{font-size:17px;line-height:27px}
article ol.steps li{font-size:17px;line-height:27px}
.byline{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin:0 0 26px}
.byline .r{font-family:var(--mono);font-size:12px;color:var(--black-alpha-48);text-transform:uppercase}
.callout{position:relative;background:var(--heat-4);border-radius:12px;padding:18px 20px;margin:30px 0;
  box-shadow:0 0 0 1px var(--heat-16);font-size:16px;line-height:26px;color:var(--black-alpha-72)}
.callout b{color:var(--heat-100);font-weight:500}
.quiet{background:var(--background-lighter);border-radius:12px;padding:18px 20px;margin:30px 0;
  box-shadow:0 0 0 1px var(--border-muted);font-size:15px;line-height:24px;color:var(--black-alpha-64)}
.crumbs{font-family:var(--mono);font-size:12px;text-transform:uppercase;color:var(--black-alpha-32);
  padding:26px 0 4px}
.crumbs a{text-decoration:none}
.crumbs a:hover{color:var(--heat-100)}
details{background:var(--surface);border-radius:12px;padding:16px 18px;margin:10px 0;
  box-shadow:0 0 0 1px var(--border-muted);transition:box-shadow .2s ease}
details:hover{box-shadow:0 0 0 1px var(--heat-20)}
details summary{cursor:pointer;font-size:16px;font-weight:450;list-style:none;display:flex;
  justify-content:space-between;gap:14px;align-items:center}
details summary::-webkit-details-marker{display:none}
details summary::after{content:"+";font-family:var(--mono);color:var(--heat-100);font-size:18px;
  transition:transform .2s var(--ease)}
details[open] summary::after{transform:rotate(45deg)}
details p{margin:12px 0 0;color:var(--black-alpha-64);font-size:15px;line-height:24px}
code{font-family:var(--mono);font-size:13px;background:var(--black-alpha-4);border-radius:5px;padding:2px 6px}

/* ── proof demos (one per pattern, shown on every solution page) ──── */
.demo{background:var(--surface);border-radius:14px;overflow:hidden;
  box-shadow:0 0 0 1px var(--border-muted),0 18px 44px -30px #26262666}
.demo-bar{display:flex;align-items:center;gap:8px;padding:11px 14px;
  border-bottom:1px solid var(--border-faint);background:var(--background-lighter);
  font-family:var(--mono);font-size:11.5px;text-transform:uppercase;color:var(--black-alpha-48)}
.demo-bar .live{display:inline-flex;align-items:center;gap:6px;color:var(--heat-100)}
.demo-bar .live i{width:6px;height:6px;border-radius:50%;background:var(--heat-100);
  box-shadow:0 0 0 3px var(--heat-16);animation:blip 1.8s ease-in-out infinite}
.demo-body{padding:16px}

/* timeline demo */
.tl{list-style:none;margin:0;padding:0;position:relative}
.tl::before{content:"";position:absolute;left:7px;top:6px;bottom:6px;width:1px;background:var(--border-muted)}
.tl li{position:relative;padding:0 0 14px 30px;font-size:14px;line-height:20px;color:var(--black-alpha-72);
  opacity:0;animation:tl-in .45s ease-out forwards}
.tl li:last-child{padding-bottom:0}
.tl li::before{content:"";position:absolute;left:3px;top:6px;width:9px;height:9px;border-radius:50%;
  background:var(--surface);box-shadow:0 0 0 1px var(--border-loud)}
.tl li.hot::before{background:var(--heat-100);box-shadow:0 0 0 3px var(--heat-16)}
.tl li.ok::before{background:var(--accent-forest);box-shadow:0 0 0 3px #42c36629}
.tl li b{color:var(--accent-black);font-weight:450}
.tl li .t{font-family:var(--mono);font-size:11px;color:var(--black-alpha-32);margin-right:8px}
.tl li:nth-child(1){animation-delay:.05s}.tl li:nth-child(2){animation-delay:.5s}
.tl li:nth-child(3){animation-delay:.95s}.tl li:nth-child(4){animation-delay:1.4s}
.tl li:nth-child(5){animation-delay:1.85s}.tl li:nth-child(6){animation-delay:2.3s}
@keyframes tl-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* two-panel sync demo */
.sync{display:grid;grid-template-columns:1fr 34px 1fr;align-items:center;gap:0}
@media(max-width:560px){.sync{grid-template-columns:1fr}}
.sync .pane{background:var(--background-lighter);border-radius:10px;padding:12px;
  box-shadow:0 0 0 1px var(--border-faint)}
.sync .pane h4{margin:0 0 8px;font-family:var(--mono);font-size:11px;text-transform:uppercase;
  color:var(--black-alpha-48);font-weight:400}
.sync .row{display:flex;justify-content:space-between;gap:10px;font-size:13px;padding:5px 0;
  border-bottom:1px solid var(--border-faint);color:var(--black-alpha-72)}
.sync .row:last-child{border-bottom:0}
.sync .row b{font-weight:450;color:var(--accent-black)}
.sync .arrows{display:grid;place-items:center;color:var(--heat-100);font-family:var(--mono);font-size:15px}
.sync .arrows span{animation:pulse-x 2.4s ease-in-out infinite}
@keyframes pulse-x{0%,100%{opacity:.25;transform:translateX(-3px)}50%{opacity:1;transform:translateX(3px)}}

/* handset demo (sender id before/after) */
.phones{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:560px){.phones{grid-template-columns:1fr}}
.phone{border-radius:14px;padding:12px;background:var(--background-lighter);
  box-shadow:0 0 0 1px var(--border-faint)}
.phone .from{font-size:12px;font-family:var(--mono);color:var(--black-alpha-48);margin-bottom:6px}
.phone .bub{background:var(--surface);border-radius:12px 12px 12px 4px;padding:10px 12px;font-size:13.5px;
  line-height:19px;box-shadow:0 0 0 1px var(--border-faint);color:var(--black-alpha-72)}
.phone .tagbad{display:inline-block;margin-bottom:6px;font-family:var(--mono);font-size:10.5px;
  text-transform:uppercase;padding:2px 7px;border-radius:5px;background:#eb34241f;color:var(--accent-crimson)}
.phone .taggood{display:inline-block;margin-bottom:6px;font-family:var(--mono);font-size:10.5px;
  text-transform:uppercase;padding:2px 7px;border-radius:5px;background:#42c3661f;color:var(--accent-forest)}

/* extraction demo */
.extract{display:grid;grid-template-columns:1fr 30px 1fr;align-items:center}
@media(max-width:560px){.extract{grid-template-columns:1fr}}
.doc{background:var(--background-lighter);border-radius:10px;padding:12px;font-family:var(--mono);
  font-size:11.5px;line-height:18px;color:var(--black-alpha-56);box-shadow:0 0 0 1px var(--border-faint)}
.doc .l{height:7px;border-radius:3px;background:var(--ill-muted);margin:5px 0}
.doc .l.s{width:52%}.doc .l.m{width:76%}
.fields .row{display:flex;justify-content:space-between;font-size:13px;padding:6px 0;
  border-bottom:1px solid var(--border-faint)}
.fields .row:last-child{border-bottom:0}
.fields .row span{color:var(--black-alpha-48);font-family:var(--mono);font-size:11px;text-transform:uppercase}
.fields .row b{font-weight:450;color:var(--accent-black)}
.conf{font-family:var(--mono);font-size:10.5px;color:var(--accent-forest)}

/* meter demo (cost / monitoring) */
.meter{display:flex;flex-direction:column;gap:10px}
.meter .m{display:grid;grid-template-columns:120px 1fr auto;align-items:center;gap:10px;font-size:13px}
.meter .m .lab{font-family:var(--mono);font-size:11px;text-transform:uppercase;color:var(--black-alpha-48)}
.meter .m .bar{height:9px;border-radius:5px;background:var(--black-alpha-4);overflow:hidden}
.meter .m .bar i{display:block;height:100%;border-radius:5px;background:var(--heat-100);
  animation:grow 1.1s var(--ease) both}
.meter .m .bar i.alt{background:var(--ill-default)}
@keyframes grow{from{width:0}}
.meter .m .v{font-family:var(--mono);font-size:12px;color:var(--accent-black)}
.beat{display:flex;gap:4px;align-items:flex-end;height:36px}
.beat i{flex:1;background:var(--accent-forest);border-radius:2px;opacity:.75;
  animation:beat 1.6s ease-in-out infinite}
.beat i.bad{background:var(--accent-crimson)}
@keyframes beat{0%,100%{height:30%}50%{height:100%}}

/* chat demo */
.chat .q{background:var(--heat-4);box-shadow:0 0 0 1px var(--heat-16);border-radius:12px 12px 4px 12px;
  padding:10px 12px;font-size:13.5px;margin:0 0 10px auto;max-width:78%;color:var(--black-alpha-72)}
.chat .a{background:var(--background-lighter);box-shadow:0 0 0 1px var(--border-faint);
  border-radius:12px 12px 12px 4px;padding:10px 12px;font-size:13.5px;max-width:88%;
  color:var(--black-alpha-72)}
.chat .cite{display:block;margin-top:7px;font-family:var(--mono);font-size:10.5px;color:var(--heat-100)}

/* ── quote builder ────────────────────────────────────────────────── */
.q-wrap{display:grid;grid-template-columns:1fr 340px;gap:20px;align-items:start}
@media(max-width:900px){.q-wrap{grid-template-columns:1fr}}
.q-side{position:sticky;top:88px}
@media(max-width:900px){.q-side{position:static}}
.q-pick{display:flex;flex-wrap:wrap;gap:8px}
.q-pick label{display:inline-flex;align-items:center;gap:7px;font-size:13.5px;padding:7px 12px;
  border-radius:999px;background:var(--surface);box-shadow:0 0 0 1px var(--border-muted);cursor:pointer;
  transition:box-shadow .15s ease,background .15s ease}
.q-pick label:hover{box-shadow:0 0 0 1px var(--heat-40)}
.q-pick input{position:absolute;opacity:0;width:0;height:0}
.q-pick input:checked+label,.q-pick label.on{background:var(--heat-4);box-shadow:0 0 0 1px var(--heat-100);
  color:var(--heat-100)}
.q-pick label .tick{width:14px;height:14px;border-radius:4px;box-shadow:0 0 0 1px var(--border-loud);
  display:grid;place-items:center;font-size:10px;color:transparent}
.q-pick label.on .tick{background:var(--heat-100);box-shadow:none;color:#fff}
.q-total{font-size:34px;line-height:38px;font-weight:500;letter-spacing:-.5px}
.q-line{display:flex;justify-content:space-between;font-size:14px;padding:9px 0;
  border-bottom:1px solid var(--border-faint);color:var(--black-alpha-64)}
.q-line b{color:var(--accent-black);font-weight:450}
.q-line:last-of-type{border-bottom:0}
.q-sel{max-height:190px;overflow-y:auto;margin:6px 0}
.q-sel div{display:flex;justify-content:space-between;gap:10px;font-size:13px;padding:5px 0;
  color:var(--black-alpha-64)}
.q-sel div b{font-weight:450;color:var(--accent-black)}
.q-empty{font-size:13.5px;color:var(--black-alpha-48)}
.q-in{display:grid;grid-template-columns:1fr auto;gap:10px;align-items:center;margin:8px 0;font-size:13.5px}
.q-in input{width:110px;padding:7px 10px;border:0;border-radius:8px;background:var(--surface);
  box-shadow:0 0 0 1px var(--border-muted);font-family:var(--mono);font-size:13px;text-align:right;
  color:var(--accent-black)}
.q-in input:focus{outline:0;box-shadow:0 0 0 1px var(--heat-100)}

/* ── comparison table ─────────────────────────────────────────────── */
.cmp{width:100%;border-collapse:collapse;background:var(--surface);font-size:14.5px;min-width:560px}
.cmp th,.cmp td{padding:14px 16px;border-bottom:1px solid var(--border-faint);text-align:left;
  vertical-align:top}
.cmp thead th{background:var(--background-lighter);font-family:var(--mono);font-size:11.5px;
  text-transform:uppercase;color:var(--black-alpha-48);font-weight:400}
.cmp thead th.us{color:var(--heat-100);background:var(--heat-4)}
.cmp td.us{background:var(--heat-4);color:var(--accent-black)}
.cmp tbody th{width:200px;font-weight:450;color:var(--black-alpha-56);font-size:13.5px}
.cmp tr:last-child th,.cmp tr:last-child td{border-bottom:0}

/* ── cta band ─────────────────────────────────────────────────────── */
.band{position:relative;overflow:hidden;background:var(--accent-black);color:#fff;border-radius:18px;
  padding:56px 32px;text-align:center;margin:48px 0}
.band::before{content:"";position:absolute;inset:0;
  background:radial-gradient(60% 120% at 50% 0%,var(--heat-40),transparent 70%);opacity:.7}
.band::after{content:"";position:absolute;inset:0;
  background-image:linear-gradient(#ffffff0d 1px,transparent 1px),
    linear-gradient(90deg,#ffffff0d 1px,transparent 1px);background-size:44px 44px;
  -webkit-mask-image:radial-gradient(70% 90% at 50% 40%,#000,transparent 75%);
  mask-image:radial-gradient(70% 90% at 50% 40%,#000,transparent 75%)}
.band>*{position:relative;z-index:1}
.band h2{color:#fff;margin-bottom:14px}
.band p{color:#ffffffa3;max-width:520px;margin:0 auto 26px;font-size:17px;line-height:26px}
.band .btn-ghost{background:#ffffff14;color:#fff;border-color:#ffffff29}
.band .btn-ghost:hover{background:#ffffff1f;color:#fff;border-color:#ffffff52}

/* ── footer ───────────────────────────────────────────────────────── */
footer{border-top:1px solid var(--border-faint);margin-top:40px;padding:52px 0 64px;
  color:var(--black-alpha-64);font-size:14px;line-height:20px}
footer .cols{display:grid;grid-template-columns:1.5fr repeat(3,1fr);gap:28px}
@media(max-width:820px){footer .cols{grid-template-columns:1fr 1fr}}
footer a{text-decoration:none;color:var(--black-alpha-64);display:block;margin:8px 0;
  transition:color .15s ease}
footer a:hover{color:var(--heat-100)}
footer .fine{margin-top:36px;padding-top:22px;border-top:1px solid var(--border-faint);
  font-size:12px;line-height:18px;color:var(--black-alpha-32);font-family:var(--mono)}
.jump{display:flex;gap:8px;flex-wrap:wrap;margin-top:22px}
.jump a{text-decoration:none}
.jump a:hover{border-color:var(--heat-40);color:var(--heat-100)}