/* ============ bdibranding site — Consolas monospace, official brand tokens v1.1.0 ============ */

:root{
  /* bdibranding brand tokens v1.1.0 (official) */
  --bdi-color-background:#0B0B0B;
  --bdi-color-surface:#141413;
  --bdi-color-surface-raised:#1B1A18;
  --bdi-color-text:#F2E8D6;
  --bdi-color-text-muted:#B8B0A3;
  --bdi-color-border:#3B3731;
  --bdi-font-display:Consolas,monospace;
  --bdi-font-body:Consolas,monospace;

  /* site aliases (kept so the rest of this file didn't need a full rewrite) */
  --bg:var(--bdi-color-background);
  --amber:var(--bdi-color-text);
  --amber-b:var(--bdi-color-text);
  --amber-d:var(--bdi-color-text-muted);
  --ink:var(--bdi-color-text);
  --ink-d:var(--bdi-color-text-muted);
  --line:var(--bdi-color-border);
  --panel:var(--bdi-color-surface);
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
html,body{ margin:0; padding:0; background:var(--bg); }
body{
  -webkit-font-smoothing:antialiased;
  color:var(--bdi-color-text);
  font-family:var(--bdi-font-body);
  overflow-x:hidden;
  min-height:100vh;
}
::selection{ background:rgba(242,232,214,.25); color:var(--bdi-color-text); }
a{ color:var(--bdi-color-text); }
a:hover{ color:var(--bdi-color-text-muted); }

/* ---------- keyframes ---------- */
@keyframes sc-blink{ 0%,49%{opacity:1} 50%,100%{opacity:0} }
@keyframes sc-float{ 0%,100%{transform:translateY(0)} 50%{transform:translateY(-7px)} }
@keyframes sc-twinkle{ 0%,100%{opacity:.25} 50%{opacity:.9} }
@media (prefers-reduced-motion: reduce){ *{ animation:none !important } html{ scroll-behavior:auto } }

/* ---------- topbar ---------- */
.topbar{
  position:relative; z-index:10;
  display:flex; align-items:center; justify-content:space-between; gap:18px; flex-wrap:wrap;
  padding:20px clamp(22px,5vw,52px) 0;
  font-size:17px; letter-spacing:2px; color:var(--amber-d);
}
.brand{ color:var(--amber-d); text-decoration:none; white-space:nowrap; }
.brand:hover{ color:var(--amber-b); }
.topnav{ display:flex; gap:clamp(12px,2.5vw,28px); flex-wrap:wrap; }
.topnav a{ color:var(--amber-d); text-decoration:none; font-size:16px; letter-spacing:1.5px; }
.topnav a:hover{ color:var(--amber-b); }
@media (max-width:620px){
  .topbar{ justify-content:center; text-align:center; gap:10px 16px; padding-top:14px; }
  .topnav{ justify-content:center; gap:10px 16px; }
  .topnav a{ font-size:15px; letter-spacing:1px; }
  .topbar-right{ width:100%; justify-content:center; }
}
.live-dot{ display:flex; align-items:center; gap:8px; white-space:nowrap; }
.live-dot .dot{ width:7px; height:7px; background:var(--amber); animation:sc-twinkle 2s ease-in-out infinite; }

/* ---------- hero ---------- */
.hero{
  position:relative; z-index:5;
  display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center;
  min-height:56vh;
  padding:clamp(70px,14vh,140px) clamp(20px,5vw,56px) clamp(60px,10vh,100px);
}
.hero-inner{ position:relative; z-index:2; width:100%; max-width:720px; display:flex; flex-direction:column; align-items:center; }
.tagline{
  margin:clamp(22px,4vh,36px) auto 0; max-width:520px;
  font-size:clamp(20px,2.8vw,27px); line-height:1.3; letter-spacing:.5px;
  color:var(--amber-b);
}
.subline{
  margin:12px auto 0; max-width:520px;
  font-size:clamp(16px,2vw,19px); line-height:1.5; letter-spacing:.4px; color:var(--ink-d);
}
.cta-row{ display:flex; gap:14px; flex-wrap:wrap; justify-content:center; margin-top:clamp(24px,4vh,34px); }
.hero-meta{ margin-top:16px; font-size:15px; letter-spacing:1px; color:rgba(236,224,207,.38); }

/* ---------- buttons ---------- */
.btn{
  display:inline-block; cursor:pointer; text-decoration:none;
  font-family:var(--bdi-font-body); font-size:21px; letter-spacing:1.5px;
  color:var(--amber-b); background:transparent; border:1px solid var(--amber);
  padding:12px 22px;
}
.btn:hover{ background:var(--amber); color:#1a0f04;  }
.btn:active{ transform:translateY(1px); }
.btn-primary{ background:rgba(242,232,214,.12); }
.btn-small{ font-size:17px; padding:7px 14px; }

/* ---------- sections ---------- */
.section{
  position:relative; z-index:5;
  max-width:1060px; margin:0 auto;
  padding:clamp(48px,9vh,110px) clamp(20px,5vw,56px) 0;
}
.section-head{
  display:flex; align-items:baseline; gap:16px;
  border-bottom:1px solid var(--line); padding-bottom:12px; margin-bottom:clamp(26px,4vh,44px);
}
.section-no{ font-size:17px; letter-spacing:2px; color:var(--amber-d); }
.section-head h2{
  margin:0; font-weight:400;
  font-size:clamp(24px,3.4vw,34px); letter-spacing:2px;
  color:var(--amber-b);
}

/* station split */
.split{ display:grid; grid-template-columns:1.1fr 1fr; gap:clamp(24px,4vw,48px); align-items:center; }
/* the live-preview split gives the station the bigger column so the room reads at near-app size */
.split.station{ grid-template-columns:1fr 1.5fr; }
/* .split.station beats the plain .split reset on specificity — name it here too,
   or the section-01 grid stays two-column and crushes the copy on phones. */
@media (max-width:860px){ .split, .split.station{ grid-template-columns:1fr; } }
.split-copy .lead{ font-size:clamp(19px,2.3vw,23px); line-height:1.45; color:var(--ink); margin:0 0 18px; }
.split-copy p{ font-size:18px; line-height:1.55; color:var(--ink-d); }
.contract{ list-style:none; margin:0 0 18px; padding:0; }
.contract li{
  font-size:18px; line-height:1.5; color:var(--ink-d);
  padding:9px 0 9px 18px; border-left:2px solid var(--line);
  margin-bottom:8px;
}
.contract li b{ color:var(--amber-b); font-weight:400; }
.bezel{
  margin:0; border:1px solid var(--line); background:var(--panel); padding:10px;
  box-shadow:inset 0 0 24px rgba(0, 0, 0, .5);
}
.bezel img{ width:100%; height:auto; display:block; image-rendering:auto; }
.bezel canvas{ width:100%; height:auto; display:block; }
.bezel figcaption{ padding:9px 4px 2px; font-size:14px; letter-spacing:1px; color:rgba(236,224,207,.35); }
/* the live preview IS the app (website/app, a verbatim frontend copy booted from a seeded
   save) — an iframe at the app's fixed 1380x900 layout, clipped to the station-camera panel
   and scaled to the column. live-preview.js measures the current panel rectangle. */
.bezel.live{ border:0; background:transparent; padding:0; box-shadow:none; }
.app-clip{ position:relative; overflow:hidden; width:100%; aspect-ratio:var(--app-aspect,666 / 744); }
.app-clip iframe{
  position:absolute; left:0; top:0; width:1380px; height:900px; border:0;
  pointer-events:none;                       /* a preview, not a control surface */
  transform-origin:0 0;
  transform:scale(var(--appk,1)) translate(var(--appx,-283px),var(--appy,-88px));
}

/* feature cards */
.cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
@media (max-width:960px){ .cards{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:620px){ .cards{ grid-template-columns:1fr; } }
.card{
  border:1px solid var(--line); background:var(--panel); padding:16px 16px 18px;
  display:flex; flex-direction:column; gap:10px;
  transition:border-color .15s, box-shadow .15s;
}
.card:hover{ border-color:var(--amber-d);  }
.card img{ width:100%; height:auto; display:block; border:1px solid rgba(242,232,214,.15); }
.card h3{
  margin:2px 0 0; font-weight:400; font-size:20px; letter-spacing:1.5px;
  color:var(--amber-b);
}
.card p{ margin:0; font-size:17px; line-height:1.5; color:var(--ink-d); }

/* live feed */
.feed-bezel canvas{ width:100%; height:auto; display:block; image-rendering:pixelated; }
.shots{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:16px; }
@media (max-width:860px){ .shots{ grid-template-columns:1fr; } }
.shots .bezel img{ width:100%; height:auto; display:block; }
.shots .bezel a{ display:block; }

/* topbar social */
.topbar-right{ display:flex; align-items:center; gap:18px; }
.topbar .social-link{ color:var(--amber-d); text-decoration:none; font-size:16px; letter-spacing:1.5px; }
.topbar .social-link:hover{ color:var(--amber-b); }

/* deep dives */
.dive{
  display:grid; grid-template-columns:1.15fr .85fr; gap:clamp(22px,4vw,46px);
  align-items:center; padding:clamp(22px,4vh,38px) 0;
  border-bottom:1px dashed rgba(242,232,214,.14);
}
.dive:last-child{ border-bottom:none; }
.dive-flip .dive-copy{ order:2; }
.dive-flip .dive-panel{ order:1; }
@media (max-width:860px){
  .dive{ grid-template-columns:1fr; }
  .dive-flip .dive-copy{ order:1; }
  .dive-flip .dive-panel{ order:2; }
}
.dive-no{ font-size:15px; letter-spacing:2px; color:var(--amber-d); }
.dive-copy h3{
  margin:6px 0 10px; font-weight:400; font-size:clamp(21px,2.6vw,26px);
  letter-spacing:1.5px; color:var(--amber-b);
}
.dive-copy p{ margin:0 0 12px; font-size:17.5px; line-height:1.55; color:var(--ink-d); }
.dive-copy p b{ color:var(--ink); font-weight:400; }
.dive-link{ font-size:16px; letter-spacing:1px; color:var(--amber-d); text-decoration:none; }
.dive-link:hover{ color:var(--amber-b); }
.dive-panel{
  border:1px solid var(--line); background:rgba(0,0,0,.4); padding:14px 18px;
  box-shadow:inset 0 0 24px rgba(0, 0, 0, .5);
}
.dive-panel pre{
  margin:0; overflow-x:auto;
  font-family:var(--bdi-font-body); font-size:18px; letter-spacing:.5px; line-height:1.65;
  color:var(--amber-b);
}

/* stack chips */
.chips{ display:flex; flex-wrap:wrap; gap:10px; }
.chip{
  border:1px solid var(--line); background:var(--panel);
  padding:8px 14px; font-size:16px; letter-spacing:1.5px; color:var(--ink-d);
  transition:border-color .15s, color .15s;
}
.chip:hover{ border-color:var(--amber-d); color:var(--amber-b); }

/* docs teaser */
.docs-teaser{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
@media (max-width:960px){ .docs-teaser{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .docs-teaser{ grid-template-columns:1fr; } }
.teaser-card{
  display:flex; flex-direction:column; gap:6px; text-decoration:none;
  border:1px solid var(--line); background:var(--panel); padding:14px 16px;
  transition:border-color .15s, box-shadow .15s;
}
.teaser-card:hover{ border-color:var(--amber-d);  }
.tc-title{ font-size:18px; letter-spacing:1.5px; color:var(--amber-b); }
.tc-sub{ font-size:15px; letter-spacing:.5px; color:rgba(236,224,207,.42); line-height:1.35; }

/* steps */
.steps{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(3,1fr); gap:18px;
}
@media (max-width:860px){ .steps{ grid-template-columns:1fr; } }
.steps li{ border:1px solid var(--line); background:var(--panel); padding:18px; }
.step-no{ font-size:15px; letter-spacing:2px; color:var(--amber-d); }
.steps h3{ margin:8px 0 10px; font-weight:400; font-size:21px; letter-spacing:1.5px; color:var(--amber-b); }
.steps p{ margin:0; font-size:17px; line-height:1.5; color:var(--ink-d); }

/* distinctions */
.distinctions li{ margin-bottom:12px; padding:10px 0 10px 18px; }
.distinctions li a{ color:var(--amber-d); }
.distinctions li a:hover{ color:var(--amber-b); }

/* docs link row */
.docs-links{ display:flex; flex-wrap:wrap; gap:12px 26px; margin:0; }
.docs-links a{
  font-size:18px; letter-spacing:1.5px; text-decoration:none; color:var(--amber-d);
}
.docs-links a:hover{ color:var(--amber-b); }

/* shared prose helpers (pricing page) */
.dl-sub{ font-size:18px; line-height:1.5; color:var(--ink-d); margin:0 0 22px; }
.dl-honesty{
  margin-top:24px; font-size:16px; line-height:1.55; color:rgba(236,224,207,.45);
  border-left:2px solid var(--line); padding-left:14px;
}

/* FAQ */
.faq details{ border:1px solid var(--line); background:var(--panel); margin-bottom:10px; }
.faq summary{
  cursor:pointer; list-style:none; padding:14px 18px;
  font-size:20px; letter-spacing:1px; color:var(--amber-b);
}
.faq summary::before{ content:'> '; color:var(--amber-d); }
.faq details[open] summary::before{ content:'v '; }
.faq summary::-webkit-details-marker{ display:none; }
.faq details p{ margin:0; padding:0 18px 16px; font-size:17px; line-height:1.55; color:var(--ink-d); }

/* footer */
.footer{
  position:relative; z-index:5; text-align:center;
  margin-top:clamp(60px,10vh,120px);
  padding:26px 20px clamp(26px,4vh,38px);
  border-top:1px solid var(--line);
  font-size:15px; letter-spacing:1.5px; color:rgba(236,224,207,.34);
}
.footer-line{ margin-bottom:12px; }
.footer-links{ display:flex; gap:22px; justify-content:center; flex-wrap:wrap; margin-bottom:12px; }
.footer-links a{ color:var(--amber-d); text-decoration:none; }
.footer-links a:hover{ color:var(--amber-b); }
.footer-fine{ color:rgba(236,224,207,.28); }

/* ============ pricing page ============ */
/* Subpages skip the 92vh hero: a compact banner, then straight into sections. */
.page-hero{
  position:relative; z-index:5; text-align:center;
  max-width:760px; margin:0 auto;
  padding:clamp(38px,8vh,80px) clamp(20px,5vw,56px) 0;
}
.page-title{
  margin:0; font-weight:400;
  font-size:clamp(34px,6vw,58px); letter-spacing:6px;
  color:var(--amber-b);
}
.page-lede{
  margin:14px auto 0; max-width:560px;
  font-size:clamp(19px,2.4vw,24px); line-height:1.4; letter-spacing:.5px; color:var(--ink);
}
.page-sub{
  margin:10px auto 0; max-width:560px;
  font-size:clamp(16px,2vw,19px); line-height:1.5; color:var(--ink-d);
}

/* two ways to run */
.ways{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
@media (max-width:860px){ .ways{ grid-template-columns:1fr; } }
.way{
  position:relative; border:1px solid var(--line); background:var(--panel);
  padding:22px 20px 24px; display:flex; flex-direction:column;
}
.way-managed{ border-color:var(--amber-d);  }
.way-tag{
  position:absolute; top:-9px; left:16px; background:var(--bg); padding:0 8px;
  font-size:14px; letter-spacing:2px; color:var(--amber-d);
}
.way-managed .way-tag{ color:var(--amber); }
.way h3{
  margin:4px 0 0; font-weight:400; font-size:23px; letter-spacing:1.5px;
  color:var(--amber-b);
}
.way-price{ margin:6px 0 16px; font-size:34px; letter-spacing:1px; color:var(--ink); }
.way-per{ font-size:18px; letter-spacing:1.5px; color:rgba(236,224,207,.4); }
.way .contract{ flex:1; }
.way .btn{ align-self:flex-start; }
.ways-note{
  margin:22px 0 0; font-size:17px; line-height:1.55; color:rgba(236,224,207,.45);
  border-left:2px solid var(--line); padding-left:14px;
}

/* tier grid */
.ver-hl{ color:var(--amber-b); }
.tiers{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
@media (max-width:1000px){ .tiers{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .tiers{ grid-template-columns:1fr; } }
.tier{
  border:1px solid var(--line); background:var(--panel); padding:18px 16px 20px;
  display:flex; flex-direction:column; gap:6px;
  transition:border-color .15s, box-shadow .15s;
}
.tier:hover{ border-color:var(--amber-d);  }
.tier-top{ border-color:rgba(242,232,214,.4); }
.tier-price{ font-size:32px; letter-spacing:1px; color:var(--amber-b); }
.tier-per{ font-size:17px; letter-spacing:1.5px; color:rgba(236,224,207,.4); }
.tier-grant{ font-size:21px; letter-spacing:1px; color:var(--ink); }
.tier-grant span{ font-size:16px; color:rgba(236,224,207,.42); }
.tier-bonus{ font-size:15px; letter-spacing:2px; color:var(--amber); }
.tier-note{ margin:6px 0 12px; flex:1; font-size:16px; line-height:1.45; color:var(--ink-d); }
.tier .btn{ align-self:flex-start; }

/* top-up strip */
.topup{
  margin-top:20px; border:1px solid var(--line); background:rgba(0,0,0,.35);
  padding:18px 20px; display:flex; flex-wrap:wrap; align-items:center; gap:10px 22px;
}
.topup-head{ font-size:15px; letter-spacing:2px; color:var(--amber-d); width:100%; }
.topup p{ margin:0; flex:1; min-width:260px; font-size:17px; line-height:1.5; color:var(--ink-d); }
.topup p b{ color:var(--amber-b); font-weight:400; }

.rules{ margin-top:24px; }
.rules li b{ color:var(--amber-b); font-weight:400; }

/* credits CTA row — revealed by site.js only once the billing service is live.
   An author `display` rule beats the UA stylesheet's [hidden]{display:none}, so the
   gate MUST re-assert it or the buy buttons render on a page that says credits are
   not open yet. */
.get-cta{ display:flex; flex-wrap:wrap; gap:14px; margin-top:26px; }
.get-cta[hidden], .dl-honesty[hidden]{ display:none; }
.steps code{
  font-family:var(--bdi-font-body); font-size:18px; letter-spacing:1px; color:var(--amber-b);
}

/* Real not-found surface. Cloudflare Pages serves /404.html with an actual 404 status,
   so missing routes never masquerade as a second copy of the homepage. */
.not-found-page{ min-height:100vh; }
.not-found{
  min-height:100vh; padding:150px 24px 90px; display:flex; flex-direction:column;
  align-items:center; justify-content:center; text-align:center;
}
.not-found-code{
  font-size:clamp(86px,18vw,180px); line-height:.78; letter-spacing:10px;
  color:rgba(242,232,214,.13);
}
.not-found h1{
  margin:26px 0 6px; font-weight:400; font-size:clamp(27px,5vw,48px);
  letter-spacing:4px; color:var(--amber-b);
}
.not-found p{ margin:0 0 28px; color:var(--ink-d); font-size:18px; letter-spacing:1px; }
.not-found .cta-row{ justify-content:center; }
.signal-lost{ color:#ff6b4d; }
.signal-lost .dot{ background:#ff6b4d; }

/* ============ 2026-09 polish pass: motion, cards, how-it-works, field-manual teaser ============
   Motion rules: every entrance is opacity+transform only (compositor-cheap), every loop is a
   transform loop, and everything collapses to a still frame under prefers-reduced-motion.
   Reveal classes (.rv) are added by site.js, so with scripts off nothing is hidden. */

/* ---------- topbar: sticky + active link underline ---------- */
.topbar{ position:sticky; top:0; z-index:40; padding-bottom:12px; transition:background .25s, box-shadow .25s, backdrop-filter .25s; }
.topbar.scrolled{ background:rgba(10,8,6,.86); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); box-shadow:0 1px 0 var(--line), 0 10px 30px rgba(0, 0, 0, .45); }
/* on a phone the wrapped nav is three rows tall — pinning it would eat a sixth of the screen */
@media (max-width:620px){ .topbar{ position:relative; } .topbar.scrolled{ background:transparent; backdrop-filter:none; -webkit-backdrop-filter:none; box-shadow:none; } }
.topnav a{ position:relative; padding:2px 0; transition:color .15s; }
.topnav a::after{ content:''; position:absolute; left:0; right:0; bottom:-3px; height:1px; background:var(--amber); transform:scaleX(0); transform-origin:0 50%; transition:transform .22s ease;  }
.topnav a:hover::after, .topnav a.on::after{ transform:scaleX(1); }
.topnav a.on{ color:var(--amber-b); }
.topbar-right a{ color:var(--amber-d); text-decoration:none; font-size:16px; letter-spacing:1.5px; }
.topbar-right a:hover{ color:var(--amber-b); }
.topnav a[data-pricing-link][hidden], .footer-links a[data-pricing-link][hidden]{ display:none; }

/* ---------- reveal on scroll ---------- */
.rv{ opacity:0; transform:translateY(16px); transition:opacity .6s cubic-bezier(.2,.7,.2,1), transform .6s cubic-bezier(.2,.7,.2,1); }
.rv.in{ opacity:1; transform:none; }
.rv-stagger > *{ opacity:0; transform:translateY(14px); transition:opacity .55s cubic-bezier(.2,.7,.2,1), transform .55s cubic-bezier(.2,.7,.2,1); }
.rv-stagger.in > *{ opacity:1; transform:none; }
.rv-stagger.in > *:nth-child(1){ transition-delay:.02s } .rv-stagger.in > *:nth-child(2){ transition-delay:.08s }
.rv-stagger.in > *:nth-child(3){ transition-delay:.14s } .rv-stagger.in > *:nth-child(4){ transition-delay:.20s }
.rv-stagger.in > *:nth-child(5){ transition-delay:.26s } .rv-stagger.in > *:nth-child(6){ transition-delay:.32s }
.rv-stagger.in > *:nth-child(7){ transition-delay:.38s } .rv-stagger.in > *:nth-child(8){ transition-delay:.44s }
.rv-stagger.in > *:nth-child(9){ transition-delay:.50s } .rv-stagger.in > *:nth-child(n+10){ transition-delay:.56s }
.section-head{ position:relative; }
.section-head::after{ content:''; position:absolute; left:0; bottom:-1px; height:1px; width:0; background:var(--amber);  transition:width .9s cubic-bezier(.2,.7,.2,1) .1s; }
.section-head.in::after{ width:120px; }
@media (prefers-reduced-motion: reduce){ .rv, .rv-stagger > *{ opacity:1 !important; transform:none !important; transition:none !important; } .section-head::after{ width:120px; } }

/* ---------- hero extras ---------- */
.hero-scroll{ position:absolute; bottom:22px; left:50%; transform:translateX(-50%); font-size:14px; letter-spacing:3px; color:rgba(242,232,214,.45); text-decoration:none; display:flex; flex-direction:column; align-items:center; gap:6px; z-index:3; }
.hero-scroll span{ display:block; width:1px; height:26px; background:linear-gradient(to bottom, var(--amber), transparent); animation:sc-drop 1.8s ease-in-out infinite; }
@keyframes sc-drop{ 0%{ transform:scaleY(0); transform-origin:top; opacity:0 } 30%{ opacity:1 } 100%{ transform:scaleY(1); transform-origin:top; opacity:0 } }
.hero-scroll:hover{ color:var(--amber-b); }
.btn{ position:relative; overflow:hidden; transition:color .15s, background .15s, box-shadow .15s, transform .1s; }
.btn::before{ content:''; position:absolute; top:0; bottom:0; left:-40%; width:30%; background:linear-gradient(90deg, transparent, rgba(242,232,214,.28), transparent); transform:skewX(-20deg); transition:left .45s ease; pointer-events:none; }
.btn:hover::before{ left:120%; }

/* ---------- how work flows (homepage belt) ---------- */
.flow-wrap{ border:1px solid var(--line); background:rgba(0,0,0,.4); padding:clamp(12px,2.5vw,22px) clamp(12px,2.5vw,22px) 8px; box-shadow:inset 0 0 30px rgba(0, 0, 0, .5); overflow:hidden; position:relative; }
.flow-wrap svg{ display:block; width:100%; height:auto; }
.flow-cap{ text-align:center; font-size:14px; letter-spacing:1.5px; color:rgba(236,224,207,.38); margin-top:8px; }
.hb-machine{ fill:rgba(242,232,214,.07); stroke:var(--amber-d); stroke-width:1.5; }
.hb-machine.lit{ fill:rgba(242,232,214,.16); stroke:var(--amber); }
.hb-inner{ fill:rgba(0,0,0,.6); }
.hb-belt{ fill:rgba(0,0,0,.6); }
.hb-rail{ stroke:var(--amber-d); stroke-width:1.5; }
.hb-chev{ fill:none; stroke:var(--amber); stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round; }
.hb-label{ fill:var(--amber-b); font-family:var(--bdi-font-body); font-size:15px; letter-spacing:1.5px; text-anchor:middle; }
.hb-sub{ fill:rgba(236,224,207,.5); font-family:var(--bdi-font-body); font-size:13px; letter-spacing:.5px; text-anchor:middle; }
.hb-led{ fill:var(--amber); animation:sc-blink 1.1s steps(1,end) infinite; }
.hb-crate{ fill:#8a5a25; stroke:#d99a3e; stroke-width:1.2; }
.hb-crate-top{ fill:#d99a3e; }
.hb-march{ animation:sc-march .9s linear infinite; }
@keyframes sc-march{ from{ transform:translateX(0) } to{ transform:translateX(30px) } }
.hb-ride{ animation:sc-ride 9s linear infinite; }
.hb-ride.d2{ animation-delay:-4.5s; }
@keyframes sc-ride{
  0%{ transform:translateX(0); opacity:0 }
  3%{ opacity:1 }
  25%{ opacity:1 } 28%{ opacity:0 }               /* into bay 1 */
  42%{ opacity:0 } 45%{ opacity:1 }               /* out of bay 1 */
  63%{ opacity:1 } 66%{ opacity:0 }               /* into bay 2 */
  80%{ opacity:0 } 83%{ opacity:1 }               /* out of bay 2 */
  97%{ opacity:1 }
  100%{ transform:translateX(680px); opacity:0 }
}
.hb-work{ animation:sc-work 9s linear infinite; opacity:0; }
.hb-work.w2{ animation-delay:-4.5s; }
@keyframes sc-work{ 0%,27%{ opacity:0 } 29%,42%{ opacity:1 } 44%,100%{ opacity:0 } }
.hb-work2{ animation:sc-work2 9s linear infinite; opacity:0; }
.hb-work2.w2{ animation-delay:-4.5s; }
@keyframes sc-work2{ 0%,65%{ opacity:0 } 67%,80%{ opacity:1 } 82%,100%{ opacity:0 } }
@media (prefers-reduced-motion: reduce){ .hb-ride{ transform:translateX(150px); opacity:1 } .hb-ride.d2{ display:none } .hb-work, .hb-work2{ opacity:0 } }
.flow-story{ display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-top:18px; }
@media (max-width:900px){ .flow-story{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:480px){ .flow-story{ grid-template-columns:1fr; } }
.fs{ border:1px solid var(--line); background:var(--panel); padding:13px 14px 14px; position:relative; transition:border-color .18s, transform .18s; }
.fs:hover{ border-color:var(--amber-d); transform:translateY(-2px); }
.fs .fs-n{ display:inline-flex; align-items:center; justify-content:center; width:26px; height:26px; margin-bottom:8px; background:var(--amber); color:#120a02; font-size:16px; }
.fs p{ margin:0; font-size:16.5px; line-height:1.5; color:var(--ink-d); }
.fs b{ color:var(--amber-b); font-weight:400; }
.flow-cta{ display:flex; flex-wrap:wrap; gap:12px 18px; align-items:center; margin-top:18px; }
.flow-cta .btn{ font-size:18px; padding:9px 16px; }
.flow-cta .fine{ font-size:15px; letter-spacing:.5px; color:rgba(236,224,207,.42); }

/* ---------- features as a card grid ---------- */
.feat-grid{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
@media (max-width:960px){ .feat-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:600px){ .feat-grid{ grid-template-columns:1fr; } }
.feat{
  position:relative; border:1px solid var(--line); background:var(--panel); padding:16px 16px 17px;
  display:flex; flex-direction:column; gap:8px; overflow:hidden;
  transition:border-color .2s, box-shadow .2s, transform .2s;
}
.feat:hover{ border-color:var(--amber-d); transform:translateY(-3px); }
.feat .f-glyph{ font-size:22px; line-height:1; color:var(--amber); }
.feat h3{ margin:0; font-weight:400; font-size:20px; letter-spacing:1.5px; color:var(--amber-b); }
.feat p{ margin:0; font-size:16.5px; line-height:1.5; color:var(--ink-d); }
.feat p a{ color:var(--amber-d); }
.feat p a:hover{ color:var(--amber-b); }
.feat.wide{ grid-column:span 2; }
@media (max-width:600px){ .feat.wide{ grid-column:span 1; } }

/* ---------- field manual teaser ---------- */
.fm-teaser{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
@media (max-width:960px){ .fm-teaser{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:520px){ .fm-teaser{ grid-template-columns:1fr; } }
.fmq{
  display:flex; flex-direction:column; text-decoration:none; border:1px solid var(--line); background:var(--panel);
  transition:border-color .2s, box-shadow .2s, transform .2s;
}
.fmq:hover{ border-color:var(--amber);  transform:translateY(-3px); }
.fmq .q-art{ height:110px; border-bottom:1px solid var(--line); background:rgba(0,0,0,.42); display:flex; align-items:center; justify-content:center; padding:10px; }
.fmq .q-art svg{ max-height:86px; width:auto; max-width:100%; }
.fmq .q-art img{ image-rendering:pixelated; height:84px; width:auto; }
.fmq .q-body{ padding:11px 13px 13px; display:flex; flex-direction:column; gap:5px; flex:1; }
.fmq .q-title{ font-size:19px; letter-spacing:1.5px; color:var(--amber-b); }
.fmq .q-blurb{ margin:0; font-size:15.5px; line-height:1.45; color:var(--ink-d); flex:1; }
.fmq .q-meta{ font-size:13.5px; letter-spacing:2px; color:var(--amber-d); }
.fm-more{ display:flex; flex-wrap:wrap; gap:12px 18px; align-items:center; margin-top:18px; }
.fm-more .btn{ font-size:18px; padding:9px 16px; }
.fm-more .fine{ font-size:15px; color:rgba(236,224,207,.42); }
.q-glyph{ font-size:40px; color:var(--amber); line-height:1; }

/* ---------- docs section as grouped cards ---------- */
.docs-groups{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
@media (max-width:960px){ .docs-groups{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:520px){ .docs-groups{ grid-template-columns:1fr; } }
.dg{ border:1px solid var(--line); background:var(--panel); padding:14px 16px 12px; transition:border-color .18s; }
.dg:hover{ border-color:var(--amber-d); }
.dg .dg-title{ font-size:14px; letter-spacing:2.5px; color:var(--amber-d); border-bottom:1px solid var(--line); padding-bottom:7px; margin-bottom:8px; }
.dg a{ display:block; text-decoration:none; color:var(--ink-d); font-size:16.5px; letter-spacing:.5px; padding:4px 0; transition:color .15s, padding-left .15s; }
.dg a:hover{ color:var(--amber-b); padding-left:6px; }
.dg a::before{ content:'> '; color:rgba(242,232,214,.35); }

/* ---------- section spacing tune ---------- */
.section + .section{ padding-top:clamp(56px,9vh,110px); }
.faq details{ transition:border-color .15s; }
.faq details[open]{ border-color:var(--amber-d); }
.faq summary::before{ display:inline-block; transition:transform .2s; }
.faq details[open] summary::before{ content:'> '; transform:rotate(90deg); }
.faq details > p{ animation:sc-fade-in .25s ease; }
@keyframes sc-fade-in{ from{ opacity:0; transform:translateY(-4px) } to{ opacity:1; transform:none } }

/* back to top */
.to-top{
  position:fixed; right:22px; bottom:22px; z-index:50; text-decoration:none;
  font-family:var(--bdi-font-body); font-size:15px; letter-spacing:2px; color:var(--amber-d);
  border:1px solid var(--line); background:rgba(10,8,6,.85); padding:7px 11px;
  opacity:0; transform:translateY(10px); pointer-events:none; transition:opacity .25s, transform .25s, color .15s, border-color .15s;
}
.to-top.show{ opacity:1; transform:none; pointer-events:auto; }
.to-top:hover{ color:var(--amber-b); border-color:var(--amber-d); }

/* Shared site navigation and the quieter product / handbook entry points. */
.section{scroll-margin-top:90px}
.topbar{position:sticky;top:0;z-index:50;min-height:72px;padding:14px clamp(20px,4vw,52px);gap:20px;border-bottom:1px solid var(--line);background:var(--bg);font:17px var(--bdi-font-body);letter-spacing:2px;flex-wrap:nowrap}
.brand{display:flex;align-items:center;flex:none;line-height:1}
.brand img{display:block;width:176px;height:auto}
.topnav{align-items:center;gap:24px;flex-wrap:nowrap}.topnav a{display:inline-flex;align-items:center;gap:6px;font:16px/1 var(--bdi-font-body);letter-spacing:1.5px;color:var(--amber-d);text-shadow:none;text-transform:uppercase;white-space:nowrap}
.nav-external{display:block;flex:none;width:12px;height:12px}
.topnav a:hover,.topnav a.on{color:var(--amber-b);text-shadow:none}
.topbar-right{display:flex;align-items:center;gap:20px;width:auto;font:16px var(--bdi-font-body);letter-spacing:1.5px}
.topbar-right a{font:inherit;letter-spacing:inherit;color:var(--amber-d);text-decoration:none;text-shadow:none;text-transform:uppercase;white-space:nowrap}
.subline,.split-copy p,.contract li,.feat p,.dl-sub,.dl-honesty,.faq details p{font-family:system-ui,sans-serif;font-size:15px;line-height:1.8;letter-spacing:0;color:#bfc1b6}
.subline{max-width:590px;margin-top:20px}.hero-meta{color:#b0ac9c}
.feat-grid{gap:18px}.feat{padding:28px}.feat h3{font:600 19px/1.35 system-ui,sans-serif;letter-spacing:-.025em;color:#eeeadd;margin-bottom:12px}.feat .f-glyph{font:12px ui-monospace,monospace;color:var(--amber-d);margin-bottom:22px}.feat p{font-size:14px}.feature-link{display:inline-block;margin-top:12px;font:12px system-ui,sans-serif;text-underline-offset:4px}
.site-doc-paths{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}.site-doc-paths>a{display:flex;flex-direction:column;padding:28px;border:1px solid var(--line);background:var(--panel);text-decoration:none;border-radius:6px}.site-doc-paths>a:hover{border-color:var(--amber-d)}
.eyebrow{font:10px/1.5 ui-monospace,monospace;letter-spacing:.14em;color:var(--amber-d)}.site-doc-paths h3{font:600 22px/1.3 system-ui,sans-serif;letter-spacing:-.03em;color:var(--ink);margin:22px 0 12px}.site-doc-paths p{font:14px/1.8 system-ui,sans-serif;color:#bfc1b6;margin:0 0 24px}.site-doc-paths>a>span:last-child{font:12px system-ui,sans-serif;margin-top:auto}
.footer{border-top:1px solid var(--line);padding:36px 28px;text-shadow:none}.footer-line{font:12px/1.7 system-ui,sans-serif;letter-spacing:0;color:#a8ad9f}.footer-links{gap:18px;margin-top:20px}.footer-links a{font:10px/1.5 system-ui,sans-serif;letter-spacing:.035em;color:#a9b39c}.footer-fine{font:10px/1.7 system-ui,sans-serif;letter-spacing:0;color:#909b83}
@media(max-width:760px){.topbar{display:grid;grid-template-columns:1fr auto;gap:14px 10px;padding:14px 20px;text-align:left}.brand img{width:144px}.topnav{grid-row:2;grid-column:1/-1;justify-content:flex-start;gap:22px}.topnav a{font-size:15px;letter-spacing:1px}.topbar-right{grid-column:2;grid-row:1;justify-content:flex-end;gap:10px;letter-spacing:1px}.site-doc-paths{grid-template-columns:1fr}.feat{padding:24px}.site-doc-paths>a{padding:24px}.footer-links{gap:14px}}