/* Addo Fleet marketing site — design system.
   Palette matches the real Addo Fleet product app: near-black charcoal,
   sky-cyan accent (#70CFF0), off-white background, Inter, 0.5rem radius.
   Amber is layered on ONLY for plow/snow-mode content — a nod to plow
   beacons, never the primary brand color. */

:root {
  color-scheme: light;
  --background: 248 250 251;
  --foreground: 35 31 32;
  --card: 255 255 255;
  --card-foreground: 35 31 32;
  --primary: 35 31 32;
  --primary-foreground: 255 255 255;
  --secondary: 232 246 251;
  --secondary-foreground: 35 31 32;
  --muted: 241 245 246;
  --muted-foreground: 91 98 101;
  --accent: 112 207 240;
  --accent-foreground: 35 31 32;
  --amber: 217 119 6;
  --amber-foreground: 255 255 255;
  /* Darker, WCAG-AA-safe variants of accent/amber for use as TEXT on light
     surfaces — the raw --accent (~1.8:1 on white) and --amber (~3.2:1) both
     fail AA for text. Use --accent/--amber for fills/borders/icons only. */
  --accent-text: 3 105 161;
  --amber-text: 180 83 9;
  /* Chart marks (validated: node dataviz/scripts/validate_palette.js) — an
     "emphasis" pair (1 accent hue + neutral gray), not full categorical.
     Raw --accent is too light (OKLCH L 0.81) to pass as a chart mark against
     either surface, so these are separate from --accent-text. */
  --chart-accent: 3 105 161;
  --chart-gray: 124 135 140;
  --success: 22 163 74;
  --destructive: 180 35 24;
  --border: 214 224 227;
  --input: 214 224 227;
  --ring: 112 207 240;
  --radius: 0.5rem;
  /* Fixed "emphasis band" pair — deliberately NOT redefined in dark mode.
     Sections using .band-dark stay charcoal/white in both themes, so a
     cyan --accent button on top never collides with a cyan --primary band
     (which is what happens in the product app's own dark palette, where
     --primary and --accent are the same cyan). */
  --band-bg: 35 31 32;
  --band-fg: 255 255 255;
  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --shadow-md: 0 4px 16px -4px rgb(35 31 32 / 0.12);
  --font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --container: 1120px;
}

@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --background: 14 18 19;
    --foreground: 235 242 243;
    --card: 22 28 29;
    --card-foreground: 235 242 243;
    --primary: 112 207 240;
    --primary-foreground: 12 24 28;
    --secondary: 24 51 57;
    --secondary-foreground: 225 244 248;
    --muted: 32 39 41;
    --muted-foreground: 160 173 176;
    --accent: 112 207 240;
    --accent-foreground: 12 24 28;
    --amber: 245 158 11;
    --amber-foreground: 24 16 2;
    /* Already legible on the dark surfaces they appear against — reuse. */
    --accent-text: 112 207 240;
    --amber-text: 245 158 11;
    --chart-accent: 46 155 196;
    --chart-gray: 90 98 102;
    --success: 74 222 128;
    --destructive: 248 113 113;
    --border: 55 67 70;
    --input: 63 76 80;
    --ring: 112 207 240;
    --shadow-md: 0 4px 20px -4px rgb(0 0 0 / 0.5);
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

body {
  margin: 0;
  background: rgb(var(--background));
  color: rgb(var(--foreground));
  font-family: var(--font-sans);
  font-feature-settings: "tnum" 1, "cv11" 1;
  font-variant-numeric: tabular-nums;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

img, svg { max-width: 100%; display: block; }
a { color: inherit; }

h1, h2, h3, h4 { margin: 0 0 0.5em; line-height: 1.15; letter-spacing: -0.02em; font-weight: 700; }
h1 { font-size: clamp(2rem, 1.5rem + 2.2vw, 3.25rem); }
h2 { font-size: clamp(1.5rem, 1.3rem + 1vw, 2.25rem); }
h3 { font-size: 1.25rem; }
p { margin: 0 0 1em; color: rgb(var(--foreground) / 0.86); }
.lede { font-size: 1.2rem; color: rgb(var(--foreground) / 0.75); }

.container { max-width: var(--container); margin: 0 auto; padding: 0 1.5rem; }
.section { padding: clamp(2.5rem, 2rem + 3vw, 5.5rem) 0; }
.section-tight { padding: clamp(1.5rem, 1.25rem + 1vw, 2.5rem) 0; }
.stack { display: flex; flex-direction: column; }
.center { text-align: center; }
.hidden { display: none !important; }

/* ---------- Skip link ---------- */
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: rgb(var(--primary)); color: rgb(var(--primary-foreground));
  padding: 0.75rem 1.25rem; border-radius: 0 0 var(--radius) 0;
}
.skip-link:focus { left: 0; }

/* ---------- Top bar: price is never more than one click away ---------- */
.topbar {
  background: rgb(var(--band-bg)); color: rgb(var(--band-fg));
  font-size: 0.82rem;
}
.topbar .container { display: flex; align-items: center; justify-content: center; gap: 1.5rem; padding-top: 0.5rem; padding-bottom: 0.5rem; flex-wrap: wrap; }
.topbar a { text-decoration: none; opacity: 0.92; }
.topbar a:hover { opacity: 1; text-decoration: underline; }
.topbar strong { font-weight: 700; }

/* ---------- Header ---------- */
header.site {
  position: sticky; top: 0; z-index: 100;
  background: rgb(var(--card) / 0.92);
  backdrop-filter: saturate(180%) blur(8px);
  border-bottom: 1px solid rgb(var(--border));
}
.nav-row { display: flex; align-items: center; justify-content: space-between; padding: 0.85rem 0; gap: 1rem; }
.brand { display: flex; align-items: center; gap: 0.55rem; font-weight: 800; font-size: 1.1rem; text-decoration: none; color: rgb(var(--foreground)); flex-shrink: 0; }
.brand-mark { width: 34px; height: 34px; display: block; }
nav.primary { display: flex; align-items: center; gap: 1.5rem; }
nav.primary a { text-decoration: none; font-weight: 600; font-size: 0.92rem; color: rgb(var(--foreground) / 0.75); white-space: nowrap; }
nav.primary a:hover, nav.primary a[aria-current="page"] { color: rgb(var(--foreground)); }
.nav-actions { display: flex; align-items: center; gap: 0.75rem; }
.nav-phone { display: inline-flex; align-items: center; gap: 0.4rem; font-weight: 700; font-size: 0.88rem; text-decoration: none; color: rgb(var(--foreground)); }
.nav-toggle { display: none; }

@media (max-width: 860px) {
  nav.primary { display: none; }
  nav.primary.nav-open {
    display: flex; flex-direction: column; align-items: flex-start; gap: 0;
    position: absolute; top: 100%; left: 0; right: 0;
    background: rgb(var(--card)); border-bottom: 1px solid rgb(var(--border));
    padding: 0.5rem 1.5rem 1rem;
  }
  nav.primary.nav-open a { padding: 0.6rem 0; width: 100%; }
  .nav-toggle { display: inline-flex; }
  header.site { position: sticky; }
  .nav-row { position: relative; }
}
@media (max-width: 560px) {
  .phone-text { display: none; }
  .nav-actions { gap: 0.5rem; }
  .nav-actions .btn { padding: 0.6rem 0.9rem; font-size: 0.85rem; }
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  border-radius: var(--radius); font-weight: 700; font-size: 0.95rem;
  padding: 0.72rem 1.35rem; text-decoration: none; border: 1px solid transparent;
  cursor: pointer; transition: transform 0.06s ease, opacity 0.15s ease;
  line-height: 1.1;
}
.btn:active { transform: translateY(1px); }
.btn-primary { background: rgb(var(--primary)); color: rgb(var(--primary-foreground)); }
.btn-primary:hover { opacity: 0.88; }
.btn-accent { background: rgb(var(--accent)); color: rgb(var(--accent-foreground)); }
.btn-accent:hover { opacity: 0.88; }
.btn-amber { background: rgb(var(--amber)); color: rgb(var(--amber-foreground)); }
.btn-amber:hover { opacity: 0.88; }
.btn-outline { background: transparent; color: rgb(var(--foreground)); border-color: rgb(var(--border)); }
.btn-outline:hover { background: rgb(var(--muted)); }
.btn-lg { padding: 0.9rem 1.7rem; font-size: 1.02rem; }
.btn-block { width: 100%; }

/* ---------- Cards ---------- */
.card {
  background: rgb(var(--card)); border: 1px solid rgb(var(--border));
  border-radius: calc(var(--radius) * 1.5); padding: 1.5rem;
  box-shadow: var(--shadow-sm);
}
.card-hover { transition: box-shadow 0.15s ease, border-color 0.15s ease; }
.card-hover:hover { box-shadow: var(--shadow-md); border-color: rgb(var(--accent) / 0.5); }

/* ---------- Badges / pills ---------- */
.badge {
  display: inline-flex; align-items: center; gap: 0.35rem;
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
  padding: 0.28rem 0.6rem; border-radius: 999px;
  background: rgb(var(--secondary)); color: rgb(var(--secondary-foreground));
}
.badge-amber { background: rgb(var(--amber) / 0.14); color: rgb(var(--amber-text)); }
.badge-success { background: rgb(var(--success) / 0.14); color: rgb(var(--success)); }
.badge-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

/* ---------- Hero ---------- */
.hero { padding: clamp(2.5rem, 2rem + 4vw, 6rem) 0 clamp(2rem, 1.5rem + 2vw, 4rem); }
.hero-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 3rem; align-items: center; }
@media (max-width: 900px) { .hero-grid { grid-template-columns: 1fr; gap: 2.25rem; } }
.price-hero { display: inline-flex; align-items: baseline; gap: 0.4rem; margin: 0.25rem 0 1rem; }
.price-hero .amount { font-size: clamp(2.75rem, 2.2rem + 2vw, 4rem); font-weight: 800; letter-spacing: -0.03em; }
.price-hero .unit { font-size: 1.05rem; color: rgb(var(--muted-foreground)); font-weight: 600; }
.hero-facts { display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; margin: 1.25rem 0; padding: 0; list-style: none; font-size: 0.9rem; font-weight: 600; color: rgb(var(--foreground) / 0.8); }
.hero-facts li { display: flex; align-items: center; gap: 0.4rem; }
.hero-facts li::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: rgb(var(--success)); flex-shrink: 0; }
.hero-ctas { display: flex; gap: 0.75rem; flex-wrap: wrap; margin-top: 1.5rem; }

/* ---------- Fork cards (audience split) ---------- */
.fork-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
@media (max-width: 760px) { .fork-grid { grid-template-columns: 1fr; } }
.fork-card {
  padding: 2rem; border-radius: calc(var(--radius) * 1.5);
  border: 1px solid rgb(var(--border)); background: rgb(var(--card));
  text-decoration: none; color: rgb(var(--foreground));
  display: flex; flex-direction: column; gap: 0.75rem;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.fork-card:hover { border-color: rgb(var(--accent)); box-shadow: var(--shadow-md); }
.fork-card .fork-icon { width: 42px; height: 42px; border-radius: var(--radius); display: flex; align-items: center; justify-content: center; background: rgb(var(--secondary)); }
.fork-card.amber .fork-icon { background: rgb(var(--amber) / 0.14); }
.fork-card .go { font-weight: 700; color: rgb(var(--accent-text)); display: inline-flex; align-items: center; gap: 0.35rem; margin-top: auto; }
.fork-card.amber .go { color: rgb(var(--amber-text)); }

/* ---------- Stat tiles (matches product app's DEVICES/LOCATED/MOVING style) ---------- */
.stat-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1rem; }
.stat-tile { border: 1px solid rgb(var(--border)); border-radius: var(--radius); padding: 1rem 1.1rem; background: rgb(var(--card)); }
.stat-tile .label { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: rgb(var(--muted-foreground)); margin-bottom: 0.35rem; }
.stat-tile .value { font-size: 1.6rem; font-weight: 800; letter-spacing: -0.02em; }
.stat-tile .sub { font-size: 0.78rem; color: rgb(var(--muted-foreground)); }

/* ---------- Feature grid ---------- */
.feature-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 1.25rem; }
.feature-card { padding: 1.5rem; }
.feature-card .icon { width: 40px; height: 40px; border-radius: var(--radius); background: rgb(var(--secondary)); display: flex; align-items: center; justify-content: center; margin-bottom: 0.9rem; }

/* ---------- Comparison tables ---------- */
.table-scroll { overflow-x: auto; border: 1px solid rgb(var(--border)); border-radius: calc(var(--radius) * 1.5); }
table.compare { width: 100%; border-collapse: collapse; min-width: 640px; font-size: 0.92rem; }
table.compare th, table.compare td { text-align: left; padding: 0.85rem 1rem; border-bottom: 1px solid rgb(var(--border)); vertical-align: top; }
table.compare thead th { background: rgb(var(--muted)); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.05em; color: rgb(var(--muted-foreground)); font-weight: 700; }
table.compare tbody tr:last-child td { border-bottom: none; }
table.compare td.us { background: rgb(var(--accent) / 0.08); font-weight: 600; border-left: 2px solid rgb(var(--accent)); border-right: 2px solid rgb(var(--accent)); }
table.compare th.us { background: rgb(var(--accent) / 0.18); border-left: 2px solid rgb(var(--accent)); border-right: 2px solid rgb(var(--accent)); }
.cite { display: block; margin-top: 0.3rem; font-size: 0.72rem; color: rgb(var(--muted-foreground)); }
.cite a { color: rgb(var(--muted-foreground)); text-decoration: underline; }

/* ---------- Pricing itemization ---------- */
.itemize { display: grid; gap: 0; border: 1px solid rgb(var(--border)); border-radius: calc(var(--radius) * 1.5); overflow: hidden; }
.itemize > div { display: grid; grid-template-columns: 1fr 2fr; gap: 1rem; padding: 1.1rem 1.25rem; border-bottom: 1px solid rgb(var(--border)); }
.itemize > div:last-child { border-bottom: none; }
.itemize > div:nth-child(odd) { background: rgb(var(--muted) / 0.5); }
.itemize dt { font-weight: 700; }
.itemize dd { margin: 0; color: rgb(var(--foreground) / 0.82); }
@media (max-width: 640px) { .itemize > div { grid-template-columns: 1fr; gap: 0.25rem; } }

/* ---------- Calculator ---------- */
.calc-box { padding: 1.75rem; }
.calc-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 0.75rem; }
input[type="range"] { width: 100%; accent-color: rgb(var(--accent)); }
.calc-output { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-top: 1.25rem; }
/* Always 2x2, not 4-across — the calculator card lives in a half-width
   column on /pricing, too narrow for four "$1,823"-sized numbers in a row. */
.calc-output-4 { grid-template-columns: 1fr 1fr; }
.calc-output-4 .box .num { font-size: 1.5rem; }
.calc-output .box { background: rgb(var(--muted)); border-radius: var(--radius); padding: 1rem; text-align: center; }
.calc-output .box .num { font-size: 1.75rem; font-weight: 800; }
.calc-output .box .lbl { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em; color: rgb(var(--muted-foreground)); font-weight: 700; }
.calc-output .box-savings { background: rgb(var(--chart-accent) / 0.1); }
.calc-output .box-savings .num { color: rgb(var(--chart-accent)); }
.calc-note { font-size: 0.85rem; color: rgb(var(--muted-foreground)); margin-top: 0.75rem; }

/* ---------- Price bar chart: emphasis pattern (1 accent hue + gray) ---------- */
.price-bars { display: flex; flex-direction: column; gap: 0.65rem; }
.price-bar-row { display: grid; grid-template-columns: 128px 1fr 68px; align-items: center; gap: 0.75rem; }
@media (max-width: 480px) { .price-bar-row { grid-template-columns: 92px 1fr 60px; gap: 0.5rem; } }
.pbar-label { font-size: 0.85rem; font-weight: 600; color: rgb(var(--foreground)); display: flex; align-items: center; gap: 0.4rem; }
.price-bar-row.is-us .pbar-label { font-weight: 800; }
.pbar-dot { width: 8px; height: 8px; border-radius: 50%; background: rgb(var(--chart-accent)); flex-shrink: 0; }
.pbar-track { position: relative; height: 20px; background: rgb(var(--muted)); border-radius: 4px; overflow: hidden; }
.pbar-fill { height: 100%; border-radius: 0 4px 4px 0; background: rgb(var(--chart-gray)); }
.price-bar-row.is-us .pbar-fill { background: rgb(var(--chart-accent)); }
.pbar-value { font-size: 0.85rem; font-weight: 700; color: rgb(var(--foreground)); font-variant-numeric: tabular-nums; text-align: right; }

/* ---------- FAQ (pure CSS <details>) ---------- */
.faq-item { border-bottom: 1px solid rgb(var(--border)); }
.faq-item:first-child { border-top: 1px solid rgb(var(--border)); }
.faq-item summary {
  cursor: pointer; padding: 1.1rem 0.25rem; font-weight: 700; list-style: none;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; font-size: 1.3rem; font-weight: 400; color: rgb(var(--muted-foreground)); flex-shrink: 0; }
.faq-item[open] summary::after { content: "\2212"; }
.faq-item .faq-a { padding: 0 0.25rem 1.1rem; color: rgb(var(--foreground) / 0.82); }

/* ---------- Snow-mode visual: real Cleveland street map + animated trails ---------- */
.snow-visual {
  position: relative; border-radius: calc(var(--radius) * 1.5); overflow: hidden;
  border: 1px solid rgb(var(--border)); background: #0f1b26; aspect-ratio: 4 / 3;
  box-shadow: var(--shadow-md);
}
.snow-visual .snow-map {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 40% 45%;
  filter: grayscale(0.25) brightness(0.45) contrast(1.15) saturate(0.9);
}
.snow-visual .snow-tint { position: absolute; inset: 0; background: linear-gradient(160deg, rgb(15 27 38 / 0.55), rgb(15 27 38 / 0.78)); z-index: 1; }
.snow-visual svg { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; }
.snow-visual .street-label { fill: #dce8f0; font-size: 11px; font-weight: 600; paint-order: stroke; stroke: rgb(15 27 38 / 0.7); stroke-width: 3px; }
/* pathLength="100" on each <path> normalizes real street lengths to one shared
   0-100 unit scale, so a single draw-in animation works across streets of
   very different real-world pixel length. */
.snow-visual .trail { fill: none; stroke: #ffb020; stroke-width: 4; stroke-linecap: round; filter: drop-shadow(0 0 4px rgb(255 176 32 / 0.5)); stroke-dasharray: 100; stroke-dashoffset: 65; animation: draw 7s ease-in-out infinite; }
/* Trail-draw and truck-position delays must match the truck's own SMIL
   <animateMotion begin="{i*0.9}s"> in components.js (0s/0.9s/1.8s/2.7s for
   t1-t4) — and the trail must take the FULL 7s to draw, same as the truck
   takes the full 7s to traverse the path. Previously these were on two
   different timers (trail delays of 1.1/2.3/0.5s, draw finishing at 55% of
   the duration) so the "plowed" trail visibly finished well before the
   truck that's supposed to be plowing it — that mismatch is the bug, not
   a style choice. */
.snow-visual .trail.t2 { animation-delay: 0.9s; stroke: #ffcf6b; }
.snow-visual .trail.t3 { animation-delay: 1.8s; }
.snow-visual .trail.t4 { animation-delay: 2.7s; stroke: #ffcf6b; }
@keyframes draw { 0% { stroke-dashoffset: 65; opacity: 0.9; } 100% { stroke-dashoffset: 0; opacity: 1; } }
.snow-visual .truck { animation: move 7s ease-in-out infinite; }
.snow-visual .truck.t2 { animation-delay: 0.9s; }
.snow-visual .truck.t3 { animation-delay: 1.8s; }
.snow-visual .truck.t4 { animation-delay: 2.7s; }
@keyframes move { 0% { opacity: 0; } 4% { opacity: 1; } 100% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .snow-visual .trail, .snow-visual .truck { animation: none; stroke-dashoffset: 0; opacity: 1; }
}
.snow-caption { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; padding: 0.85rem 0.95rem; background: linear-gradient(to top, rgb(10 18 26 / 0.92), transparent); color: #dce8f0; font-size: 0.78rem; display: flex; justify-content: space-between; align-items: flex-end; gap: 0.75rem; }
.snow-caption .map-attr { flex-shrink: 0; font-size: 0.68rem; color: rgb(220 232 240 / 0.55); }

/* ---------- Live map visual (simpler, for commercial page) ---------- */
.map-visual { position: relative; border-radius: calc(var(--radius) * 1.5); overflow: hidden; border: 1px solid rgb(var(--border)); background: rgb(var(--muted)); aspect-ratio: 4 / 3; box-shadow: var(--shadow-md); }
.map-visual svg { width: 100%; height: 100%; }
.map-visual .road { stroke: rgb(var(--border)); stroke-width: 3; fill: none; }
.map-visual .pin { animation: bob 2.4s ease-in-out infinite; }
@keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }

/* ---------- Footer ---------- */
footer.site { border-top: 1px solid rgb(var(--border)); background: rgb(var(--card)); margin-top: 4rem; }
.footer-grid { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 2rem; padding: 3rem 0 2rem; }
@media (max-width: 760px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
.footer-col h4 { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.06em; color: rgb(var(--muted-foreground)); margin-bottom: 0.9rem; }
.footer-col a { display: block; text-decoration: none; color: rgb(var(--foreground) / 0.82); font-size: 0.9rem; padding: 0.25rem 0; }
.footer-col a:hover { color: rgb(var(--accent-text)); text-decoration: underline; }
.footer-bottom { border-top: 1px solid rgb(var(--border)); padding: 1.25rem 0; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 0.75rem; font-size: 0.8rem; color: rgb(var(--muted-foreground)); }
.footer-honesty { font-size: 0.8rem; color: rgb(var(--muted-foreground)); max-width: 620px; }

/* ---------- Emphasis band (fixed charcoal/white, theme-independent) ---------- */
.band-dark { background: rgb(var(--band-bg)); color: rgb(var(--band-fg)); }
.band-dark p, .band-dark .lede { color: rgb(var(--band-fg) / 0.8); }
.band-dark .small { color: rgb(var(--band-fg) / 0.6); }
.band-dark .card { color: rgb(var(--foreground)); }

/* ---------- Utility ---------- */
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
@media (max-width: 760px) { .grid-2 { grid-template-columns: 1fr; } }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
@media (max-width: 900px) { .grid-3 { grid-template-columns: 1fr; } }
.eyebrow { display: inline-block; font-size: 0.75rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em; color: rgb(var(--secondary-foreground)); background: rgb(var(--secondary)); padding: 0.3rem 0.7rem; border-radius: 999px; margin-bottom: 1rem; }
.eyebrow.amber { background: rgb(var(--amber) / 0.14); color: rgb(var(--amber-text)); }
.muted { color: rgb(var(--muted-foreground)); }
.small { font-size: 0.85rem; }
.callout { border: 1px solid rgb(var(--border)); border-left: 3px solid rgb(var(--amber)); border-radius: var(--radius); padding: 1.1rem 1.35rem; background: rgb(var(--amber) / 0.06); }
.callout.accent { border-left-color: rgb(var(--accent)); background: rgb(var(--accent) / 0.06); }
.divider { border: none; border-top: 1px solid rgb(var(--border)); margin: 2.5rem 0; }
.phone-cta { display: inline-flex; align-items: center; gap: 0.5rem; font-weight: 700; }

/* ---------- Form ---------- */
form.demo-form { display: grid; gap: 1rem; }
.form-row { display: grid; gap: 1rem; grid-template-columns: 1fr 1fr; }
@media (max-width: 560px) { .form-row { grid-template-columns: 1fr; } }
.field { display: flex; flex-direction: column; gap: 0.35rem; }
.field label { font-size: 0.82rem; font-weight: 700; }
.field input, .field select, .field textarea {
  border: 1px solid rgb(var(--input)); border-radius: var(--radius);
  padding: 0.65rem 0.8rem; font: inherit; background: rgb(var(--card)); color: rgb(var(--foreground));
}
.field input:focus, .field select:focus, .field textarea:focus { outline: 2px solid rgb(var(--ring)); outline-offset: 1px; }
.form-status { font-size: 0.9rem; padding: 0.75rem 1rem; border-radius: var(--radius); display: none; }
.form-status.ok { display: block; background: rgb(var(--success) / 0.12); color: rgb(var(--success)); }
.form-status.err { display: block; background: rgb(var(--destructive) / 0.12); color: rgb(var(--destructive)); }
.form-fine { font-size: 0.78rem; color: rgb(var(--muted-foreground)); }

/* ---------- Self-serve order form ---------- */
form.order-form { display: grid; gap: 1rem; }
.order-toggle { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; }
.order-toggle .toggle-btn {
  border: 1px solid rgb(var(--input)); border-radius: var(--radius); background: rgb(var(--card));
  color: rgb(var(--foreground)); padding: 0.65rem 0.8rem; font: inherit; font-weight: 700; cursor: pointer;
}
.order-toggle .toggle-btn.is-active { border-color: rgb(var(--accent)); background: rgb(var(--accent) / 0.12); color: rgb(var(--accent-text)); }
.order-toggle .toggle-btn:focus-visible,
.qty-stepper .qty-btn:focus-visible { outline: 2px solid rgb(var(--ring)); outline-offset: 1px; }
.order-qty-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1rem; }
.order-qty-row label { font-weight: 700; font-size: 0.82rem; }
.qty-stepper { display: inline-flex; align-items: center; border: 1px solid rgb(var(--input)); border-radius: var(--radius); overflow: hidden; }
.qty-stepper .qty-btn { border: none; background: rgb(var(--muted)); width: 2.25rem; height: 2.25rem; font-size: 1.1rem; font-weight: 700; cursor: pointer; color: rgb(var(--foreground)); }
.qty-stepper input {
  width: 3.5rem; text-align: center; border: none; border-left: 1px solid rgb(var(--input)); border-right: 1px solid rgb(var(--input));
  height: 2.25rem; font: inherit; font-weight: 700; background: rgb(var(--card)); color: rgb(var(--foreground));
}
.qty-stepper input::-webkit-inner-spin-button,
.qty-stepper input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.qty-stepper input[type="number"] { -moz-appearance: textfield; appearance: textfield; }
.qty-stepper input:focus-visible { outline: 2px solid rgb(var(--ring)); outline-offset: -2px; }
.qty-min-note { font-size: 0.78rem; color: rgb(var(--muted-foreground)); flex-basis: 100%; }
.order-price-preview { display: grid; gap: 0.5rem; background: rgb(var(--muted)); border-radius: var(--radius); padding: 0.85rem 1rem; }
.opp-row { display: flex; justify-content: space-between; font-size: 0.9rem; }
.opp-row strong { font-size: 1.05rem; }
.order-steps { display: grid; gap: 0.85rem; padding-left: 1.25rem; }
.order-steps li { line-height: 1.5; }

/* ---------- No-dark-patterns strip ---------- */
.honesty-strip { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; justify-content: center; font-size: 0.85rem; color: rgb(var(--muted-foreground)); }
.honesty-strip span { display: inline-flex; align-items: center; gap: 0.4rem; }
.honesty-strip span::before { content: "\2713"; color: rgb(var(--success)); font-weight: 700; }