/* =========================================================================
   Anvil PEO Partners — app.css
   Demo B "The Field Operator". Strict industrial dark theme.
   Token block first, then base, template (header/footer), then home page.
   ========================================================================= */

/* ---- Tokens ---------------------------------------------------------- */
:root{
  /* backgrounds */
  --bg-0:   #0A0A0A;   /* hero, header, footer */
  --bg-1:   #121212;   /* content bands */
  --bg-2:   #1A1A1A;   /* cards, panels, the console */
  /* text */
  --head:   #FFFFFF;   /* headlines */
  --body:   #CFCFCF;   /* primary body */
  --muted:  #888888;   /* labels, eyebrows, captions */
  /* accent: key numbers, active borders, results, the one CTA */
  --amber:     #E67E22;
  --amber-ink: #0A0A0A; /* text on amber fills */
  /* rules and dividers */
  --rule-1: #333333;   /* hairlines, table rules */
  --rule-2: #444444;   /* heavy dividers */
  --wrap:   1200px;
  --header-h: 64px;

  --font-display: "Saira Condensed", "Arial Narrow", system-ui, sans-serif;
  --font-data:    "Saira", system-ui, -apple-system, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, "SFMono-Regular", monospace;
}

/* ---- Reset / base ---------------------------------------------------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--bg-0);
  color:var(--body);
  font-family:var(--font-data);
  font-size:18px;
  line-height:1.55;
  font-feature-settings:"tnum" 1, "lnum" 1;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img,svg{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; cursor:pointer; }
h1,h2,h3,h4{ margin:0; color:var(--head); font-family:var(--font-display); font-weight:700; line-height:0.98; letter-spacing:-0.01em; }
p{ margin:0; text-wrap:pretty; }
::selection{ background:var(--amber); color:var(--amber-ink); }
:focus-visible{ outline:2px solid var(--amber); outline-offset:3px; }

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

/* shared helpers */
.eyebrow{
  font-family:var(--font-mono);
  font-size:12px;
  font-weight:500;
  letter-spacing:0.22em;
  text-transform:uppercase;
  color:var(--muted);
}
.eyebrow.amber{ color:var(--amber); }
.lede{ color:var(--body); font-size:21px; line-height:1.5; max-width:62ch; }

/* the only primary action style sitewide */
.btn-cta{
  display:inline-flex; align-items:center; gap:10px;
  background:var(--amber); color:var(--amber-ink);
  font-family:var(--font-display); font-weight:700;
  font-size:18px; letter-spacing:0.01em;
  padding:15px 26px; border:1px solid var(--amber);
  border-radius:2px; white-space:nowrap;
  transition:transform 140ms linear, box-shadow 140ms linear, background 140ms linear;
}
.btn-cta:hover{ transform:translateY(-1px); box-shadow:0 0 0 3px rgba(230,126,34,0.22); }
.btn-cta:active{ transform:translateY(0); }
.btn-cta .arr{ font-family:var(--font-mono); font-weight:700; }

.btn-ghost{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--font-mono); font-size:13px; letter-spacing:0.04em;
  color:var(--body); border-bottom:1px solid var(--rule-2);
  padding-bottom:3px; transition:color 140ms linear, border-color 140ms linear;
}
.btn-ghost:hover{ color:var(--amber); border-color:var(--amber); }

/* dummy annotation chip — the honest "this is placeholder body" tell */
.anno{
  display:inline-block;
  font-family:var(--font-mono); font-size:10px; font-weight:700;
  letter-spacing:0.18em; text-transform:uppercase;
  color:var(--muted);
  border:1px solid var(--rule-1);
  padding:2px 7px; border-radius:2px;
  margin-bottom:14px;
}
.anno::before{ content:"// "; color:var(--amber); }
.dummy{ color:var(--muted); }
.dummy strong{ color:var(--body); font-weight:600; }

/* section scaffolding */
.band{ border-top:4px solid var(--rule-2); position:relative; }
.band::before{ /* left tick mark */
  content:""; position:absolute; top:-4px; left:0; width:64px; height:4px; background:var(--amber);
}
.band-pad{ padding-block:84px; }
.section-head{ max-width:none; margin-bottom:44px; }
.section-head h2{
  font-size:clamp(34px, 4.4vw, 56px);
  font-weight:700;
  max-width:20ch;
}
.section-head .eyebrow{ display:block; margin-bottom:16px; }

/* reveal */
.reveal{ opacity:0; transform:translateY(14px); transition:opacity 200ms ease-out, transform 200ms ease-out; }
.reveal.in{ opacity:1; transform:none; }

/* big tabular figures */
.figure{
  font-family:var(--font-display); font-weight:700;
  font-feature-settings:"tnum" 1; letter-spacing:-0.02em;
  color:var(--amber); line-height:0.9;
}

/* =========================================================================
   HEADER
   ========================================================================= */
.site-header{
  position:sticky; top:0; z-index:60;
  height:var(--header-h);
  background:var(--bg-0);
  border-bottom:1px solid var(--rule-1);
}
.site-header .wrap{ height:100%; display:flex; align-items:center; gap:28px; }
.brand{ display:flex; align-items:center; gap:11px; flex:0 0 auto; }
.brand-mark{ width:22px; height:22px; background:var(--amber); border-radius:1px; flex:0 0 auto; }
.brand-name{
  font-family:var(--font-display); font-weight:700; color:var(--head);
  font-size:21px; letter-spacing:0.01em; line-height:1; white-space:nowrap;
}
.nav-primary{ display:flex; align-items:center; gap:26px; margin-left:auto; }
.nav-primary a{
  font-family:var(--font-data); font-weight:500; font-size:15px;
  color:var(--body); letter-spacing:0.01em;
  transition:color 140ms linear;
}
.nav-primary a:hover{ color:var(--head); }
.header-cta{ flex:0 0 auto; }
.header-cta .btn-cta{ padding:11px 20px; font-size:16px; }

.nav-toggle{ display:none; }
.nav-toggle{
  margin-left:auto; background:transparent; border:1px solid var(--rule-2);
  border-radius:2px; width:44px; height:44px; color:var(--head);
  align-items:center; justify-content:center;
}
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after{
  content:""; display:block; width:18px; height:2px; background:var(--head); position:relative;
}
.nav-toggle span::before{ position:absolute; top:-6px; }
.nav-toggle span::after{ position:absolute; top:6px; }

/* mobile top-sheet drawer */
.drawer{
  position:fixed; left:0; right:0; top:var(--header-h); z-index:55;
  background:var(--bg-0); border-bottom:1px solid var(--rule-2);
  transform:translateY(-110%); transition:transform 180ms ease-out;
  padding:8px 0 22px;
}
.drawer.open{ transform:translateY(0); }
.drawer a{
  display:block; font-family:var(--font-display); font-weight:600; font-size:24px;
  color:var(--body); padding:13px 0; border-bottom:1px solid var(--rule-1);
}
.drawer a:last-of-type{ border-bottom:0; }
.drawer .btn-cta{ margin-top:18px; width:100%; justify-content:center; }

/* =========================================================================
   HERO
   ========================================================================= */
.hero{
  background:var(--bg-0);
  position:relative; overflow:hidden;
  padding-block:96px 88px;
}
.hero::before{ /* faint technical grid */
  content:""; position:absolute; inset:0; pointer-events:none;
  background-image:
    repeating-linear-gradient(0deg, rgba(255,255,255,0.028) 0 1px, transparent 1px 64px),
    repeating-linear-gradient(90deg, rgba(255,255,255,0.028) 0 1px, transparent 1px 64px);
  -webkit-mask-image:radial-gradient(120% 100% at 70% 0%, #000 45%, transparent 100%);
          mask-image:radial-gradient(120% 100% at 70% 0%, #000 45%, transparent 100%);
}
.hero .wrap{ position:relative; }
.hero .eyebrow{ display:block; margin-bottom:22px; }
.hero h1{
  font-size:clamp(46px, 7.4vw, 104px);
  font-weight:700; letter-spacing:-0.02em; color:var(--head);
  max-width:none;
}
.hero h1 .amber-line{ color:var(--amber); }
.hero-rule{ height:3px; width:100%; background:var(--rule-1); margin:36px 0 40px; position:relative; }
.hero-rule::before{ content:""; position:absolute; left:0; top:0; height:3px; width:200px; background:var(--amber); }
.hero-grid{ display:grid; grid-template-columns:1.05fr 0.95fr; gap:56px; align-items:start; }
.hero-lead .lede{ max-width:46ch; margin-bottom:30px; }
.hero-actions{ display:flex; align-items:center; gap:24px; flex-wrap:wrap; }
.hero-trust{
  margin-top:26px; font-family:var(--font-mono); font-size:12.5px; letter-spacing:0.04em;
  color:var(--muted); display:flex; align-items:center; gap:10px;
}
.hero-trust::before{ content:""; width:8px; height:8px; background:var(--amber); border-radius:1px; flex:0 0 auto; }

/* hero spec panel */
.spec-panel{
  background:var(--bg-2); border:1px solid var(--rule-2); border-radius:3px;
  position:relative;
}
.spec-panel .spec-top{
  display:flex; align-items:center; justify-content:space-between;
  padding:13px 18px; border-bottom:1px solid var(--rule-1);
}
.spec-panel .spec-top .tag{
  font-family:var(--font-mono); font-size:11px; letter-spacing:0.16em; text-transform:uppercase; color:var(--muted);
}
.spec-panel .spec-top .sample{
  font-family:var(--font-mono); font-size:10px; letter-spacing:0.18em; text-transform:uppercase;
  color:var(--amber); border:1px solid var(--amber); padding:2px 8px; border-radius:2px;
}
.spec-body{ padding:22px 18px 8px; }
.spec-headline{ display:flex; align-items:flex-end; gap:14px; margin-bottom:6px; }
.spec-headline .figure{ font-size:78px; }
.spec-headline .unit{ font-family:var(--font-mono); font-size:13px; color:var(--muted); padding-bottom:14px; letter-spacing:0.04em; }
.spec-caption{ font-family:var(--font-mono); font-size:11.5px; color:var(--muted); letter-spacing:0.05em; margin-bottom:18px; }
.spec-rows{ border-top:1px solid var(--rule-1); }
.spec-row{
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 0; border-bottom:1px solid var(--rule-1);
  font-family:var(--font-data); font-size:15px;
}
.spec-row .k{ color:var(--body); display:flex; gap:10px; align-items:center; }
.spec-row .code{ font-family:var(--font-mono); font-size:12px; color:var(--muted); }
.spec-row .v{ font-family:var(--font-mono); color:var(--head); font-feature-settings:"tnum" 1; }
.spec-row .v.amber{ color:var(--amber); }
.spec-foot{
  padding:14px 0 2px; font-family:var(--font-mono); font-size:10.5px; color:var(--muted);
  letter-spacing:0.04em; line-height:1.5;
}

/* =========================================================================
   ROUTER CARDS (section 1) & VALUE CARDS (section 5)
   ========================================================================= */
.cards-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:0; border:1px solid var(--rule-1); }
.card{
  background:var(--bg-2); padding:30px 26px 28px; position:relative;
  border-right:1px solid var(--rule-1);
  transition:background 140ms linear, border-color 140ms linear;
}
.cards-3 .card:last-child{ border-right:0; }
.card:hover{ background:#1d1d1d; }
.card:hover .card-arrow{ color:var(--amber); transform:translateX(3px); }
.card .idx{ font-family:var(--font-mono); font-size:12px; color:var(--amber); letter-spacing:0.12em; }
.card h3{ font-size:27px; margin:14px 0 14px; max-width:16ch; }
.card .card-body{ font-size:15.5px; }
.card-arrow{ margin-top:20px; font-family:var(--font-mono); font-size:13px; color:var(--body); letter-spacing:0.04em; transition:transform 140ms linear, color 140ms linear; display:inline-flex; gap:8px; }

/* =========================================================================
   PROBLEM (section 2)
   ========================================================================= */
.problem-grid{ display:grid; grid-template-columns:1.1fr 0.9fr; gap:60px; align-items:start; }
.problem-grid h2{ font-size:clamp(32px,4vw,52px); max-width:16ch; }
.problem-grid .col-body{ padding-top:8px; }
.problem-grid .col-body p{ margin-bottom:18px; font-size:16.5px; }

/* =========================================================================
   REPORT PREVIEW (section 3)
   ========================================================================= */
.report{ background:var(--bg-2); border:1px solid var(--rule-2); border-radius:3px; overflow:hidden; }
.report-head{ display:flex; align-items:center; justify-content:space-between; padding:18px 22px; border-bottom:1px solid var(--rule-1); }
.report-head .t{ font-family:var(--font-mono); font-size:12px; letter-spacing:0.14em; text-transform:uppercase; color:var(--muted); }
.report-head .sample{ font-family:var(--font-mono); font-size:10px; letter-spacing:0.18em; text-transform:uppercase; color:var(--amber); border:1px solid var(--amber); padding:2px 8px; border-radius:2px; }
table.spec-table{ width:100%; border-collapse:collapse; }
.spec-table th, .spec-table td{ text-align:left; padding:14px 22px; border-bottom:1px solid var(--rule-1); font-size:15px; }
.spec-table th{ font-family:var(--font-mono); font-size:11px; letter-spacing:0.1em; text-transform:uppercase; color:var(--muted); font-weight:500; }
.spec-table td.num, .spec-table th.num{ text-align:right; font-family:var(--font-mono); font-feature-settings:"tnum" 1; color:var(--head); }
.spec-table .code{ font-family:var(--font-mono); font-size:12px; color:var(--muted); }
.spec-table tr.total td{ border-bottom:0; color:var(--head); font-weight:600; }
.spec-table tr.total td.num{ color:var(--amber); font-size:18px; }
.report-foot{ padding:14px 22px; border-top:1px solid var(--rule-1); display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px; }

/* =========================================================================
   EMBED BAND (section 4)
   ========================================================================= */
.embed-band{ background:var(--bg-1); }
.console{
  background:var(--bg-2); border:1px solid var(--rule-2); border-radius:3px; margin-top:30px;
}
.console-top{ display:flex; align-items:center; gap:14px; padding:13px 18px; border-bottom:1px solid var(--rule-1); }
.console-top .dot{ width:9px; height:9px; border-radius:50%; background:var(--rule-2); }
.console-top .dot.live{ background:var(--amber); }
.console-top .label{ font-family:var(--font-mono); font-size:11.5px; letter-spacing:0.14em; text-transform:uppercase; color:var(--muted); }
.console-mount{ min-height:120px; padding:22px 18px; }
/* The SavingsProof embed injects a cross-origin iframe sized by iframe-resizer.
   If the resizer handshake does not complete the iframe collapses to its
   default height; force a usable size so the analysis is always visible. */
.console-mount iframe{ width:100% !important; min-height:520px !important; border:0; display:block; background:var(--bg-0); }
.console-foot{ padding:12px 18px; border-top:1px solid var(--rule-1); font-family:var(--font-mono); font-size:11px; color:var(--muted); letter-spacing:0.04em; }

/* =========================================================================
   STEPS (section 6)
   ========================================================================= */
.steps{ display:grid; grid-template-columns:repeat(5,1fr); border:1px solid var(--rule-1); }
.step{ padding:26px 20px 30px; border-right:1px solid var(--rule-1); position:relative; }
.steps .step:last-child{ border-right:0; }
.step .n{ font-family:var(--font-display); font-weight:700; font-size:40px; color:var(--rule-2); line-height:1; }
.step:hover .n{ color:var(--amber); }
.step h3{ font-size:20px; margin:16px 0 12px; }
.step .step-body{ font-size:14.5px; }

/* =========================================================================
   PEO DELIVERS GRID (section 7)
   ========================================================================= */
.deliver{ display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid var(--rule-1); border-left:1px solid var(--rule-1); }
.deliver .cell{ padding:28px 24px 30px; border-right:1px solid var(--rule-1); border-bottom:1px solid var(--rule-1); }
.deliver .cell .ico{ width:14px; height:14px; background:var(--amber); border-radius:1px; margin-bottom:18px; }
.deliver .cell h3{ font-size:21px; margin-bottom:12px; }
.deliver .cell p{ font-size:15px; color:var(--muted); }

/* =========================================================================
   STATS BAND (section 8)
   ========================================================================= */
.stats-band{ background:var(--bg-0); border-top:6px solid var(--rule-2); }
.stats{ display:grid; grid-template-columns:repeat(3,1fr); gap:0; }
.stat{ padding:8px 28px; border-left:1px solid var(--rule-1); }
.stat:first-child{ border-left:0; padding-left:0; }
.stat .figure{ font-size:clamp(54px,7vw,92px); display:block; }
.stat .stat-label{ font-family:var(--font-mono); font-size:12px; letter-spacing:0.1em; text-transform:uppercase; color:var(--muted); margin-top:14px; max-width:24ch; line-height:1.5; }
.stat .stat-label strong{ color:var(--body); font-weight:600; }

/* =========================================================================
   CLOSING CTA (section 9 — MINI) — high contrast, confident
   ========================================================================= */
.closing{ background:var(--bg-0); border-top:6px solid var(--amber); }
.closing .wrap{ display:flex; align-items:center; justify-content:space-between; gap:48px; flex-wrap:wrap; padding-block:76px; }
.closing .eyebrow{ display:block; margin-bottom:18px; }
.closing h2{ font-size:clamp(40px,5.4vw,72px); max-width:18ch; color:var(--head); }
.closing .closing-sub{ color:var(--body); font-size:18px; margin-top:18px; max-width:48ch; }
.closing .closing-action{ flex:0 0 auto; display:flex; flex-direction:column; gap:14px; align-items:flex-start; }
.closing .closing-action .note{ font-family:var(--font-mono); font-size:11.5px; color:var(--muted); letter-spacing:0.04em; }

/* =========================================================================
   FOOTER
   ========================================================================= */
.site-footer{ background:var(--bg-0); border-top:1px solid var(--rule-1); padding-block:62px 34px; }
.footer-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:40px; }
.footer-brand .brand{ margin-bottom:18px; }
.footer-brand p{ font-size:14.5px; color:var(--muted); max-width:34ch; }
.footer-col h3{ font-family:var(--font-mono); font-weight:500; font-size:11px; letter-spacing:0.16em; text-transform:uppercase; color:var(--muted); margin-bottom:18px; }
.footer-col ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:11px; }
.footer-col a{ font-size:14.5px; color:var(--body); transition:color 140ms linear; }
.footer-col a:hover{ color:var(--amber); }
.footer-legal{ margin-top:48px; padding-top:26px; border-top:1px solid var(--rule-1); display:flex; flex-wrap:wrap; align-items:center; gap:10px 22px; }
.footer-legal a{ font-family:var(--font-mono); font-size:12px; color:var(--muted); letter-spacing:0.03em; }
.footer-legal a:hover{ color:var(--body); }
.footer-legal .sep{ color:var(--rule-2); }
.footer-legal .disclosure{ font-family:var(--font-mono); font-size:12px; color:var(--body); letter-spacing:0.03em; }
.footer-legal .credit{ font-family:var(--font-mono); font-size:12px; color:var(--muted); letter-spacing:0.03em; margin-left:auto; }
.footer-legal .credit strong{ color:var(--body); font-weight:600; }

/* =========================================================================
   EXIT-INTENT
   ========================================================================= */
.exit-overlay{
  position:fixed; inset:0; z-index:90; background:rgba(0,0,0,0.74);
  display:flex; align-items:center; justify-content:center; padding:24px;
  opacity:0; visibility:hidden; transition:opacity 160ms linear, visibility 160ms linear;
}
.exit-overlay.open{ opacity:1; visibility:visible; }
.exit-modal{
  background:var(--bg-2); border:1px solid var(--rule-2); border-top:4px solid var(--amber);
  max-width:520px; width:100%; padding:40px 38px 34px; position:relative; border-radius:3px;
}
.exit-modal .eyebrow{ display:block; margin-bottom:16px; }
.exit-modal h3{ font-size:38px; margin-bottom:14px; max-width:16ch; }
.exit-modal p{ font-size:16px; color:var(--body); margin-bottom:24px; }
.exit-modal .btn-cta{ width:100%; justify-content:center; }
.exit-close{
  position:absolute; top:14px; right:14px; width:36px; height:36px;
  background:transparent; border:1px solid var(--rule-2); border-radius:2px; color:var(--muted);
  font-family:var(--font-mono); font-size:16px; line-height:1;
}
.exit-close:hover{ color:var(--head); border-color:var(--rule-1); }
.demo-note{
  margin-top:22px; padding:14px 16px; background:var(--bg-1); border:1px dashed var(--rule-2); border-radius:2px;
  font-family:var(--font-mono); font-size:11.5px; line-height:1.65; color:var(--muted); letter-spacing:0.02em;
}
.demo-note b{ color:var(--amber); font-weight:700; }

/* =========================================================================
   INTERIOR PAGES (generated): hero, prose, cards, mini, forms, stubs
   ========================================================================= */
.hero-interior{ padding-block:88px 64px; }
.hero-interior h1{ font-size:clamp(40px,6vw,84px); max-width:18ch; }
.hero-interior .lede{ max-width:60ch; margin-top:0; }
.hero-interior .hero-lead .lede{ margin-bottom:30px; }

.prose{ max-width:70ch; }
.prose p{ margin-bottom:18px; font-size:17px; color:var(--body); }
.prose p.dummy{ color:var(--muted); }
.prose ul{ margin:0 0 20px; padding:0; list-style:none; display:flex; flex-direction:column; gap:13px; }
.prose li{ position:relative; padding-left:24px; color:var(--muted); font-size:16px; }
.prose li::before{ content:""; position:absolute; left:0; top:11px; width:9px; height:2px; background:var(--amber); }

.grid-auto{ display:grid; gap:16px; grid-template-columns:repeat(auto-fit,minmax(258px,1fr)); }
.gcard{ background:var(--bg-2); border:1px solid var(--rule-1); padding:26px 24px 28px; border-radius:2px; transition:border-color 140ms linear, background 140ms linear; }
.gcard:hover{ border-color:var(--rule-2); background:#1d1d1d; }
.gcard .idx{ font-family:var(--font-mono); font-size:12px; color:var(--amber); letter-spacing:0.12em; }
.gcard .ico{ width:14px; height:14px; background:var(--amber); border-radius:1px; margin-bottom:16px; }
.gcard h3{ font-size:23px; margin:12px 0 12px; max-width:18ch; }
.gcard p{ font-size:15px; color:var(--muted); }

.spec-table.mini-table tr.total td.num{ font-size:15px; }

/* MINI conversion card */
.mini{ background:var(--bg-2); border:1px solid var(--rule-2); border-left:4px solid var(--amber); border-radius:2px; padding:32px 34px; display:flex; align-items:center; justify-content:space-between; gap:32px; flex-wrap:wrap; }
.mini .mini-text .eyebrow{ display:block; margin-bottom:10px; }
.mini .mini-text h3{ font-size:30px; max-width:24ch; }
.mini .mini-text p{ color:var(--body); margin-top:10px; font-size:15.5px; max-width:48ch; }
.mini .btn-cta{ flex:0 0 auto; }

/* FORM blocks */
.lead-block{ background:var(--bg-2); border:1px solid var(--rule-2); border-radius:3px; padding:36px 34px; max-width:760px; }
.lead-block .eyebrow{ display:block; margin-bottom:14px; }
.lead-block h3{ font-size:32px; margin-bottom:8px; max-width:24ch; }
.lead-block .form-intro{ color:var(--muted); margin-bottom:26px; max-width:52ch; font-size:15.5px; }
.form-row{ display:grid; gap:16px; grid-template-columns:1fr 1fr; }
.field{ display:flex; flex-direction:column; gap:7px; margin-bottom:16px; }
.field.full{ grid-column:1 / -1; }
.field label{ font-family:var(--font-mono); font-size:11px; letter-spacing:0.1em; text-transform:uppercase; color:var(--muted); }
.field input, .field select, .field textarea{
  background:var(--bg-0); border:1px solid var(--rule-2); border-radius:2px; color:var(--head);
  font-family:var(--font-data); font-size:16px; padding:12px 14px; width:100%;
}
.field input:focus, .field select:focus, .field textarea:focus{ outline:none; border-color:var(--amber); }
.field input[aria-invalid="true"], .field textarea[aria-invalid="true"], .field select[aria-invalid="true"]{ border-color:#c0392b; }
.field textarea{ min-height:120px; resize:vertical; }
.field .hint{ font-family:var(--font-mono); font-size:11px; color:var(--muted); }
.hp{ position:absolute !important; left:-9999px; top:-9999px; height:0; width:0; overflow:hidden; }
.form-foot{ display:flex; align-items:center; gap:20px; margin-top:8px; flex-wrap:wrap; }
.form-status{ font-family:var(--font-mono); font-size:12px; color:var(--muted); letter-spacing:0.02em; }
.form-thanks .eyebrow{ display:block; margin-bottom:12px; }
.form-thanks p{ color:var(--body); font-size:18px; max-width:50ch; }
.conditional{ display:none; }
.conditional.show{ display:block; }

/* stub pages (thank-you, legal, 404) */
.stub{ padding-block:120px 96px; }
.stub .eyebrow{ display:block; margin-bottom:20px; }
.stub h1{ font-size:clamp(44px,6.4vw,88px); max-width:18ch; }
.stub .lede{ margin-top:24px; }
.stub .hero-actions{ margin-top:34px; display:flex; gap:22px; align-items:center; flex-wrap:wrap; }
.legal-body{ max-width:72ch; margin-top:14px; }
.legal-body h2{ font-size:26px; margin:38px 0 14px; }
.legal-body p{ color:var(--muted); margin-bottom:16px; font-size:16px; }

/* FAQ */
.faq-item{ border-top:1px solid var(--rule-1); padding:26px 0; }
.faq-item:last-child{ border-bottom:1px solid var(--rule-1); }
.faq-item h3{ font-size:23px; margin-bottom:12px; max-width:48ch; }
.faq-item p{ color:var(--muted); max-width:66ch; font-size:16px; }

/* =========================================================================
   RESPONSIVE
   ========================================================================= */
@media (max-width:1024px){
  .hero-grid{ grid-template-columns:1fr; gap:40px; }
  .problem-grid{ grid-template-columns:1fr; gap:34px; }
  .deliver{ grid-template-columns:repeat(2,1fr); }
  .steps{ grid-template-columns:repeat(2,1fr); }
  .steps .step{ border-bottom:1px solid var(--rule-1); }
}
@media (max-width:860px){
  .nav-primary, .header-cta{ display:none; }
  .nav-toggle{ display:inline-flex; }
  .cards-3{ grid-template-columns:1fr; }
  .cards-3 .card{ border-right:0; border-bottom:1px solid var(--rule-1); }
  .cards-3 .card:last-child{ border-bottom:0; }
  .stats{ grid-template-columns:1fr; }
  .stat{ border-left:0; padding-left:0; border-top:1px solid var(--rule-1); padding-top:28px; padding-bottom:8px; }
  .stat:first-child{ border-top:0; }
  .footer-grid{ grid-template-columns:1fr 1fr; gap:32px; }
  .footer-brand{ grid-column:1 / -1; }
  .footer-legal .credit{ margin-left:0; width:100%; margin-top:6px; }
}
@media (max-width:560px){
  .wrap{ padding-inline:20px; }
  .band-pad{ padding-block:60px; }
  .deliver, .steps{ grid-template-columns:1fr; }
  .spec-headline .figure{ font-size:60px; }
  .closing .wrap{ flex-direction:column; align-items:flex-start; }
  .form-row{ grid-template-columns:1fr; }
  .mini{ padding:24px 22px; }
  .lead-block{ padding:28px 22px; }
}

/* reduced motion */
@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; transition:none !important; scroll-behavior:auto !important; }
  .reveal{ opacity:1; transform:none; }
}