/* ─────────────────────────────────────────────────────────────
   Cevran — site.css (2026 rebrand)
   Launch-UI-derived language: near-black canvas, gradient display
   type, glass chrome, one warm brand glow. Static recreation — no
   Tailwind, no build step; this file is the whole system.

   Structural class names are shared with scripts/studio-page.js and
   scripts/check-chrome.mjs (cvx-header, cvx-burger, cvx-mobilenav,
   cvx-footer, cvx-reveal, data-cv-book). Rename nothing without
   updating both.

   CONTENTS
     1  Tokens
     2  Base + layout
     3  Buttons, links, pills
     4  Header / mobile nav
     5  Hero (home + page)
     6  Section scaffolding
     7  Cards: tile, bento, feature row, spotlight
     8  Process: steps, timeline
     9  Data: stats, compare, table, checklist
    10  Mock panels (run log, approval, wiring)
    11  Providers + logo marquee
    12  Callout, pull quote, inline CTA
    13  FAQ, prose, long-document layout
    14  Products
    15  CTA band, footer, book page, 404
    16  Reveals + motion
   ───────────────────────────────────────────────────────────── */

/* ══ 1 · TOKENS ═══════════════════════════════════════════════ */

:root {
  /* Canvas — near-black, warmed a hair so the glow sits in it. */
  --bg:          #0A0A0B;
  --bg-raise:    #101012;
  --bg-sunk:     #080809;
  --fg:          #FAFAFA;
  --muted:       #A1A1AA;   /* 7.7:1 on --bg */
  /* 4.8:1 on --bg. It was #71717A, which measured 4.1:1 and failed WCAG AA
     for normal-size text — and this token carries notes, eyebrow labels,
     table headers and the run-log timestamps, not just decoration. */
  --muted-2:     #7C7C85;

  /* Hairlines */
  --line:        rgba(255, 255, 255, 0.10);
  --line-soft:   rgba(255, 255, 255, 0.06);
  --line-hard:   rgba(255, 255, 255, 0.16);

  /* Brand — Cevran rust, stepped for a dark canvas.
     --rust is the canonical mark color (the inline logo SVG reads it). */
  --rust:        #C95828;
  --brand:       #E8763B;
  --brand-bright:#F0A470;
  --brand-tint:  rgba(232, 118, 59, 0.14);
  --brand-glow:  rgba(232, 118, 59, 0.26);

  /* State */
  --ok:          #6FA98A;
  --wait:        #D4A347;

  /* Type */
  --font-sans:   "Geist", ui-sans-serif, system-ui, sans-serif;
  --font-mono:   "Geist Mono", ui-monospace, "SF Mono", monospace;

  /* Shape */
  --r-sm:  8px;
  --r-md:  14px;
  --r-lg:  18px;

  --header-h: 64px;
  --wrap: 1120px;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ══ 2 · BASE + LAYOUT ════════════════════════════════════════ */

*, *::before, *::after { box-sizing: border-box; }

/* `[hidden]` is only `display: none` at user-agent weight, so any component
   rule that sets a display (`.cvx-btn` is inline-flex) silently beats it and
   the element stays on screen. The wizard hides its Back/Send buttons this
   way, so this has to win. */
[hidden] { display: none !important; }

html { scroll-behavior: smooth; scroll-padding-top: 84px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(90rem 40rem at 50% -20rem, rgba(232, 118, 59, 0.07), transparent 60%);
  z-index: -1;
}

h1, h2, h3, h4, p, ul, ol, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
img, svg { display: block; max-width: 100%; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
table { border-collapse: collapse; width: 100%; }

::selection { background: var(--brand-tint); color: var(--fg); }
a:focus-visible, button:focus-visible, summary:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
  border-radius: 4px;
}

.cvx-wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 24px; }

.cvx-skip {
  position: absolute;
  left: -9999px;
  top: 12px;
  z-index: 100;
  padding: 10px 16px;
  background: var(--fg);
  color: var(--bg);
  border-radius: var(--r-sm);
  font-size: 14px;
  font-weight: 500;
}
.cvx-skip:focus { left: 12px; }

/* Gradient display type — the Launch UI signature. */
.cvx-grad {
  background: linear-gradient(to right, var(--fg) 0%, var(--muted) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* Texture — a section sets one of these on itself. */
.cvx-dotted, .cvx-gridlines { position: relative; }
.cvx-dotted > *, .cvx-gridlines > * { position: relative; z-index: 1; }
.cvx-dotted::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: radial-gradient(rgba(255, 255, 255, 0.10) 1px, transparent 1px);
  background-size: 26px 26px;
  -webkit-mask-image: radial-gradient(70% 60% at 50% 40%, #000, transparent 75%);
  mask-image: radial-gradient(70% 60% at 50% 40%, #000, transparent 75%);
  opacity: 0.5;
}
.cvx-gridlines::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(to right, rgba(255, 255, 255, 0.045) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.045) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(80% 70% at 50% 30%, #000, transparent 80%);
  mask-image: radial-gradient(80% 70% at 50% 30%, #000, transparent 80%);
}

/* ══ 3 · BUTTONS, LINKS, PILLS ════════════════════════════════ */

.cvx-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 40px;
  padding: 0 20px;
  border-radius: var(--r-sm);
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  transition: background-color 0.15s ease, border-color 0.15s ease, transform 0.15s ease, color 0.15s ease;
}
.cvx-btn:active { transform: translateY(1px); }
.cvx-btn--primary { background: var(--fg); color: #0B0B0C; }
.cvx-btn--primary:hover { background: #E4E4E7; }
.cvx-btn--ghost {
  border: 1px solid var(--line-hard);
  background: rgba(255, 255, 255, 0.03);
  color: var(--fg);
}
.cvx-btn--ghost:hover { background: rgba(255, 255, 255, 0.07); }
.cvx-btn--lg { height: 46px; padding: 0 26px; font-size: 15px; }

.cvx-arrow {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 14.5px;
  font-weight: 500;
  color: var(--brand-bright);
}
.cvx-arrow span { transition: transform 0.18s var(--ease); }
.cvx-arrow:hover span { transform: translateX(3px); }

.cvx-link {
  color: var(--fg);
  text-decoration: underline;
  text-decoration-color: var(--line-hard);
  text-underline-offset: 3px;
  transition: text-decoration-color 0.15s ease;
}
.cvx-link:hover { text-decoration-color: var(--brand); }

.cvx-chip {
  display: inline-flex;
  align-items: center;
  padding: 7px 14px;
  border: 1px solid var(--line-soft);
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: var(--muted);
}
.cvx-chip--more {
  border-color: rgba(232, 118, 59, 0.35);
  background: var(--brand-tint);
  color: var(--brand-bright);
}

/* ══ 4 · HEADER / MOBILE NAV ══════════════════════════════════ */

.cvx-header {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  gap: 24px;
  height: var(--header-h);
  padding: 0 24px;
  border-bottom: 1px solid transparent;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}
.cvx-header.is-stuck {
  background: rgba(10, 10, 11, 0.72);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  border-bottom-color: var(--line-soft);
}

.cvx-brand { display: inline-flex; align-items: center; gap: 10px; }
.cvx-brand__name { font-size: 16px; font-weight: 600; letter-spacing: -0.01em; }

.cvx-nav { display: flex; gap: 2px; }
.cvx-nav a {
  padding: 8px 11px;
  border-radius: var(--r-sm);
  font-size: 14px;
  font-weight: 500;
  color: var(--muted);
  transition: color 0.15s ease, background-color 0.15s ease;
}
.cvx-nav a:hover { color: var(--fg); background: rgba(255, 255, 255, 0.05); }
.cvx-nav a.is-current { color: var(--fg); }

.cvx-header__spacer { flex: 1; }

.cvx-burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  padding: 8px;
  border-radius: var(--r-sm);
}
.cvx-burger span {
  display: block;
  height: 1.5px;
  width: 100%;
  background: var(--fg);
  border-radius: 2px;
  transition: transform 0.2s ease, opacity 0.2s ease;
}
.cvx-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.cvx-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.cvx-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

.cvx-mobilenav {
  display: none;
  position: fixed;
  top: var(--header-h);
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 40;
  flex-direction: column;
  gap: 2px;
  padding: 20px 24px 32px;
  overflow-y: auto;
  background: rgba(10, 10, 11, 0.97);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
}
.cvx-mobilenav.is-open { display: flex; }
.cvx-mobilenav a {
  padding: 14px 12px;
  border-radius: var(--r-sm);
  font-size: 17px;
  font-weight: 500;
  color: var(--muted);
  border-bottom: 1px solid var(--line-soft);
}
.cvx-mobilenav a:hover, .cvx-mobilenav a.is-current { color: var(--fg); }
.cvx-mobilenav .cvx-btn {
  margin-top: 20px;
  border-bottom: 0;
  color: #0B0B0C;
  font-size: 15px;
  height: 46px;
}

@media (max-width: 1040px) {
  .cvx-nav { display: none; }
  .cvx-burger { display: flex; }
}
/* The header button is the only conversion control that follows the reader
   down the page, so it survives well past the nav — folding it into the
   burger at 1040px hid it on tablets and on any laptop window that was not
   maximised. It only goes when there is genuinely no room beside the mark. */
@media (max-width: 560px) {
  .cvx-header > .cvx-btn { display: none; }
}

/* ══ 5 · HERO ═════════════════════════════════════════════════ */

.cvx-hero { position: relative; overflow: clip; padding: 88px 0 0; text-align: center; }

.cvx-hero__badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 13px;
  font-weight: 500;
  color: var(--muted);
}
.cvx-hero__badge::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--brand);
  box-shadow: 0 0 12px 2px var(--brand-glow);
}
.cvx-hero__badge span { color: var(--brand-bright); }
a.cvx-hero__badge { transition: border-color 0.15s ease, color 0.15s ease; }
a.cvx-hero__badge:hover { border-color: var(--line-hard); color: var(--fg); }

.cvx-hero__title {
  margin: 24px auto 0;
  max-width: 17ch;
  font-size: clamp(40px, 7.2vw, 68px);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -0.025em;
}

.cvx-hero__lede {
  margin: 22px auto 0;
  max-width: 34em;
  font-size: clamp(16px, 2.2vw, 19px);
  line-height: 1.55;
  color: var(--muted);
}

.cvx-hero__cta { display: flex; justify-content: center; gap: 12px; margin-top: 32px; flex-wrap: wrap; }
.cvx-hero__reassure { margin-top: 16px; font-size: 13.5px; color: var(--muted-2); }

.cvx-hero__visual { position: relative; margin-top: 60px; padding-bottom: 88px; }
.cvx-hero__visual::before {
  content: "";
  position: absolute;
  left: 50%;
  top: -40px;
  transform: translateX(-50%);
  width: min(1200px, 140vw);
  height: 340px;
  background: radial-gradient(closest-side, var(--brand-glow), transparent 72%);
  filter: blur(48px);
  pointer-events: none;
}
.cvx-hero__arc {
  position: relative;
  height: 1px;
  max-width: 880px;
  margin: 0 auto 56px;
  background: linear-gradient(to right, transparent, var(--brand-bright) 30%, #FFD9BC 50%, var(--brand-bright) 70%, transparent);
  opacity: 0.75;
}
.cvx-hero__arc::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
  width: 60%;
  height: 80px;
  background: radial-gradient(50% 100% at 50% 0%, var(--brand-glow), transparent 75%);
  pointer-events: none;
}

.cvx-page-hero {
  position: relative;
  overflow: clip;
  padding: 80px 0 56px;
  text-align: center;
  border-bottom: 1px solid var(--line-soft);
}
.cvx-page-hero .cvx-hero__title { font-size: clamp(34px, 5.6vw, 54px); max-width: 20ch; }
.cvx-page-hero__eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--brand-bright);
}

@keyframes cvx-enter {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: none; }
}
[data-enter] { animation: cvx-enter 0.8s var(--ease) both; }
[data-enter="2"] { animation-delay: 0.08s; }
[data-enter="3"] { animation-delay: 0.16s; }
[data-enter="4"] { animation-delay: 0.24s; }
[data-enter="5"] { animation-delay: 0.36s; }

/* ══ 6 · SECTION SCAFFOLDING ══════════════════════════════════ */

.cvx-section { position: relative; padding: 100px 0; }
.cvx-section--tight { padding: 72px 0; }
.cvx-section--hairline { border-top: 1px solid var(--line-soft); }
.cvx-section--sunk {
  background: var(--bg-sunk);
  border-top: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
}

.cvx-head { max-width: 660px; margin: 0 auto 56px; text-align: center; }

.cvx-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--brand-bright);
}
.cvx-eyebrow::before { content: ""; width: 18px; height: 1px; background: var(--brand); }
.cvx-head .cvx-eyebrow::after { content: ""; width: 18px; height: 1px; background: var(--brand); }

.cvx-h2 {
  margin-top: 14px;
  font-size: clamp(28px, 4.4vw, 40px);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.02em;
}
.cvx-h3 {
  font-size: clamp(21px, 3vw, 26px);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.015em;
}
.cvx-lede { margin-top: 16px; font-size: 16.5px; line-height: 1.6; color: var(--muted); }

/* ══ 7 · CARDS ════════════════════════════════════════════════ */

.cvx-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.cvx-grid--2 { grid-template-columns: repeat(2, 1fr); }
.cvx-grid--4 { grid-template-columns: repeat(4, 1fr); }

.cvx-tile {
  position: relative;
  padding: 26px 24px;
  border: 1px solid var(--line-soft);
  border-radius: var(--r-md);
  background: rgba(255, 255, 255, 0.02);
  overflow: hidden;
  transition: border-color 0.2s ease, background-color 0.2s ease;
}
/* Spotlight: a warm bloom that fades in from the card's top-left on hover. */
.cvx-tile::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(60% 60% at 20% 0%, var(--brand-tint), transparent 70%);
  transition: opacity 0.25s ease;
}
.cvx-tile:hover { border-color: var(--line); background: rgba(255, 255, 255, 0.04); }
.cvx-tile:hover::after { opacity: 1; }
.cvx-tile > * { position: relative; z-index: 1; }

.cvx-tile__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 1px solid var(--line-soft);
  border-radius: 10px;
  background: rgba(232, 118, 59, 0.08);
}
.cvx-tile__icon svg {
  width: 20px;
  height: 20px;
  stroke: var(--brand-bright);
  stroke-width: 1.6;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.cvx-tile h3 { margin-top: 16px; font-size: 16.5px; font-weight: 600; letter-spacing: -0.01em; }
.cvx-tile p { margin-top: 8px; font-size: 14.5px; line-height: 1.6; color: var(--muted); }
.cvx-tile p + p { margin-top: 12px; }
.cvx-tile .cvx-arrow { margin-top: 14px; font-size: 13.5px; }

/* Feature row — text beside a visual panel, alternating. */
.cvx-feature { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.cvx-feature + .cvx-feature { margin-top: 96px; }
.cvx-feature--flip .cvx-feature__text { order: 2; }
.cvx-feature__text .cvx-h3 { margin-top: 14px; }
.cvx-feature__text p { margin-top: 16px; font-size: 16px; line-height: 1.65; color: var(--muted); }
.cvx-feature__list { margin-top: 22px; }
.cvx-feature__list li {
  position: relative;
  padding-left: 26px;
  font-size: 15px;
  line-height: 1.55;
  color: var(--muted);
}
.cvx-feature__list li + li { margin-top: 12px; }
.cvx-feature__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 7px;
  width: 14px;
  height: 8px;
  border-left: 1.5px solid var(--brand-bright);
  border-bottom: 1.5px solid var(--brand-bright);
  transform: rotate(-45deg);
}
.cvx-feature__text .cvx-btn, .cvx-feature__text .cvx-arrow { margin-top: 26px; }

@media (max-width: 900px) {
  .cvx-grid, .cvx-grid--4 { grid-template-columns: repeat(2, 1fr); }
  .cvx-feature { grid-template-columns: 1fr; gap: 32px; }
  .cvx-feature--flip .cvx-feature__text { order: 0; }
  .cvx-feature + .cvx-feature { margin-top: 64px; }
}
@media (max-width: 600px) {
  .cvx-grid, .cvx-grid--2, .cvx-grid--4 { grid-template-columns: 1fr; }
}

/* ══ 8 · PROCESS ══════════════════════════════════════════════ */

.cvx-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.cvx-step {
  position: relative;
  padding: 28px 24px 26px;
  border: 1px solid var(--line-soft);
  border-radius: var(--r-md);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.01));
}
.cvx-step__num { font-family: var(--font-mono); font-size: 12px; color: var(--brand-bright); }
.cvx-step h3 { margin-top: 12px; font-size: 18px; font-weight: 600; letter-spacing: -0.01em; }
.cvx-step p { margin-top: 10px; font-size: 14.5px; line-height: 1.6; color: var(--muted); }
.cvx-step__meta {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--line-soft);
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.06em;
  color: var(--muted-2);
}
@media (max-width: 780px) { .cvx-steps { grid-template-columns: 1fr; } }

.cvx-timeline { position: relative; max-width: 760px; margin: 0 auto; padding-left: 42px; }
.cvx-timeline::before {
  content: "";
  position: absolute;
  left: 11px;
  top: 8px;
  bottom: 8px;
  width: 1px;
  background: linear-gradient(to bottom, var(--brand), var(--line-soft) 70%, transparent);
}
.cvx-timeline__item { position: relative; padding-bottom: 40px; }
.cvx-timeline__item:last-child { padding-bottom: 0; }
.cvx-timeline__item::before {
  content: "";
  position: absolute;
  left: -36px;
  top: 6px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--brand);
  box-shadow: 0 0 0 4px rgba(232, 118, 59, 0.14);
}
.cvx-timeline__label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted-2);
}
.cvx-timeline__item h3 { margin-top: 8px; font-size: 18.5px; font-weight: 600; letter-spacing: -0.01em; }
.cvx-timeline__item p { margin-top: 8px; font-size: 15px; line-height: 1.65; color: var(--muted); }

/* ══ 9 · DATA ═════════════════════════════════════════════════ */

.cvx-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  padding: 40px 0;
  border-top: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
  text-align: center;
}
.cvx-stat__n {
  font-size: clamp(30px, 4.5vw, 44px);
  font-weight: 600;
  letter-spacing: -0.02em;
  background: linear-gradient(to right, var(--fg), var(--brand-bright));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.cvx-stat__l { margin-top: 6px; font-size: 13.5px; color: var(--muted); }
@media (max-width: 640px) { .cvx-stats { grid-template-columns: 1fr; gap: 28px; } }

.cvx-compare { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.cvx-compare__col { padding: 26px 24px; border: 1px solid var(--line-soft); border-radius: var(--r-md); }
.cvx-compare__col--after {
  border-color: rgba(232, 118, 59, 0.28);
  background: linear-gradient(180deg, rgba(232, 118, 59, 0.06), transparent 60%);
}
.cvx-compare__label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted-2);
}
.cvx-compare__col--after .cvx-compare__label { color: var(--brand-bright); }
.cvx-compare ul { margin-top: 18px; }
.cvx-compare li {
  position: relative;
  padding-left: 24px;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--muted);
}
.cvx-compare li + li { margin-top: 13px; }
.cvx-compare__col li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 9px;
  width: 10px;
  height: 1.5px;
  background: var(--muted-2);
}
.cvx-compare__col--after li::before {
  top: 6px;
  width: 12px;
  height: 7px;
  background: none;
  border-left: 1.5px solid var(--brand-bright);
  border-bottom: 1.5px solid var(--brand-bright);
  transform: rotate(-45deg);
}
@media (max-width: 760px) { .cvx-compare { grid-template-columns: 1fr; } }

.cvx-check li {
  position: relative;
  padding-left: 28px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--muted);
}
.cvx-check li + li { margin-top: 14px; }
.cvx-check li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 6px;
  width: 13px;
  height: 7px;
  border-left: 1.5px solid var(--brand-bright);
  border-bottom: 1.5px solid var(--brand-bright);
  transform: rotate(-45deg);
}
.cvx-check strong { color: var(--fg); font-weight: 500; }

.cvx-tablewrap { overflow-x: auto; border: 1px solid var(--line-soft); border-radius: var(--r-md); }
.cvx-table th, .cvx-table td {
  padding: 16px 18px;
  text-align: left;
  font-size: 14.5px;
  line-height: 1.55;
  border-bottom: 1px solid var(--line-soft);
  vertical-align: top;
}
.cvx-table th {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted-2);
  white-space: nowrap;
}
.cvx-table td { color: var(--muted); }
.cvx-table td:first-child { color: var(--fg); font-weight: 500; }
.cvx-table tr:last-child td { border-bottom: 0; }

/* On a phone a three-column table of prose is unreadable — the last column
   falls off the edge and every row grows to the height of its longest cell.
   Below 700px each row becomes a card and each cell is labelled with its
   column heading (the data-label attributes carry it). */
@media (max-width: 700px) {
  .cvx-tablewrap { border: 0; overflow: visible; }
  .cvx-table, .cvx-table tbody, .cvx-table tr, .cvx-table td { display: block; width: 100%; }
  .cvx-table thead { display: none; }
  .cvx-table tr {
    padding: 4px 0 12px;
    border: 1px solid var(--line-soft);
    border-radius: var(--r-md);
    background: rgba(255, 255, 255, 0.02);
  }
  .cvx-table tr + tr { margin-top: 12px; }
  .cvx-table td { border-bottom: 0; padding: 10px 18px; }
  .cvx-table td:first-child { padding-top: 16px; font-size: 16.5px; }
  .cvx-table td[data-label]::before {
    content: attr(data-label);
    display: block;
    margin-bottom: 5px;
    font-family: var(--font-mono);
    font-size: 10.5px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--muted-2);
  }
}

/* ══ 10 · MOCK PANELS ═════════════════════════════════════════ */

.cvx-shot {
  position: relative;
  max-width: 720px;
  margin: 0 auto;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.02));
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.4),
    0 24px 80px rgba(0, 0, 0, 0.55),
    0 0 80px rgba(232, 118, 59, 0.10);
  text-align: left;
}
.cvx-shot--flush { max-width: none; margin: 0; }
.cvx-shot__bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 13px 18px;
  border-bottom: 1px solid var(--line-soft);
}
.cvx-shot__dot { width: 10px; height: 10px; border-radius: 50%; background: rgba(255, 255, 255, 0.14); }
.cvx-shot__name { margin-left: 8px; font-family: var(--font-mono); font-size: 12px; color: var(--muted-2); }
.cvx-shot__rows { padding: 6px 0 10px; }
.cvx-shot__row { display: flex; align-items: baseline; gap: 14px; padding: 12px 20px; }
.cvx-shot__row + .cvx-shot__row { border-top: 1px solid var(--line-soft); }
.cvx-shot__state {
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  align-self: center;
  background: var(--ok);
  box-shadow: 0 0 10px rgba(111, 169, 138, 0.5);
}
.cvx-shot__state--wait { background: var(--wait); box-shadow: 0 0 10px rgba(212, 163, 71, 0.5); }
.cvx-shot__time { flex: none; font-family: var(--font-mono); font-size: 12px; color: var(--muted-2); }
.cvx-shot__job { font-size: 14px; line-height: 1.5; color: var(--muted); }
.cvx-shot__job strong { color: var(--fg); font-weight: 500; }
.cvx-shot__caption {
  max-width: 720px;
  margin: 18px auto 0;
  text-align: center;
  font-size: 14px;
  line-height: 1.6;
  color: var(--muted-2);
}
.cvx-shot-trio {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  align-items: stretch;
}
.cvx-shot-trio .cvx-shot { max-width: none; margin: 0; }
.cvx-shot--mini .cvx-shot__bar { padding: 11px 16px; }
.cvx-shot--mini .cvx-shot__row { padding: 11px 16px; gap: 10px; }
.cvx-shot--mini .cvx-shot__job { font-size: 13px; }
@media (max-width: 900px) {
  .cvx-shot-trio { grid-template-columns: 1fr; max-width: 480px; margin: 0 auto; }
}

.cvx-approve {
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.015));
  padding: 22px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.45);
}
.cvx-approve__head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--line-soft);
}
.cvx-approve__avatar {
  width: 26px;
  height: 26px;
  border-radius: 7px;
  background: var(--brand-tint);
  border: 1px solid rgba(232, 118, 59, 0.3);
  display: grid;
  place-items: center;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--brand-bright);
}
.cvx-approve__who { font-size: 13.5px; font-weight: 500; }
.cvx-approve__when { margin-left: auto; font-family: var(--font-mono); font-size: 11.5px; color: var(--muted-2); }
.cvx-approve__body { padding: 18px 2px; font-size: 14.5px; line-height: 1.6; color: var(--muted); }
.cvx-approve__body strong { color: var(--fg); font-weight: 500; }
.cvx-approve__quote {
  margin-top: 14px;
  padding: 14px 16px;
  border-left: 2px solid var(--line-hard);
  background: rgba(255, 255, 255, 0.025);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  font-size: 13.5px;
  color: var(--muted);
}
.cvx-approve__actions { display: flex; gap: 10px; padding-top: 16px; border-top: 1px solid var(--line-soft); }
.cvx-approve__btn {
  padding: 8px 16px;
  border-radius: var(--r-sm);
  font-size: 13px;
  font-weight: 500;
  border: 1px solid var(--line-hard);
  color: var(--muted);
}
.cvx-approve__btn--go { background: var(--fg); color: #0B0B0C; border-color: transparent; }

.cvx-wiring {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 18px;
  align-items: center;
  padding: 28px 24px;
  border: 1px solid var(--line-soft);
  border-radius: var(--r-lg);
  background: rgba(255, 255, 255, 0.02);
}
.cvx-wiring__col { display: grid; gap: 10px; }
.cvx-wiring__node {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 14px;
  border: 1px solid var(--line-soft);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.03);
  font-size: 13.5px;
  color: var(--muted);
}
.cvx-wiring__node img { width: 18px; height: 18px; opacity: 0.85; }
.cvx-wiring__core {
  display: grid;
  place-items: center;
  gap: 6px;
  padding: 22px 18px;
  border: 1px solid rgba(232, 118, 59, 0.35);
  border-radius: var(--r-md);
  background: linear-gradient(180deg, rgba(232, 118, 59, 0.14), rgba(232, 118, 59, 0.04));
  box-shadow: 0 0 46px var(--brand-glow);
  text-align: center;
}
.cvx-wiring__core strong { font-size: 14.5px; font-weight: 600; }
.cvx-wiring__core span { font-family: var(--font-mono); font-size: 11px; color: var(--brand-bright); }
@media (max-width: 700px) {
  .cvx-wiring { grid-template-columns: 1fr; }
  .cvx-wiring__core { padding: 16px; }
}

/* ══ 11 · PROVIDERS + MARQUEE ═════════════════════════════════ */

.cvx-provider {
  display: flex;
  flex-direction: column;
  padding: 24px 22px;
  border: 1px solid var(--line-soft);
  border-radius: var(--r-md);
  background: rgba(255, 255, 255, 0.02);
  transition: border-color 0.2s ease, background-color 0.2s ease;
}
.cvx-provider:hover { border-color: var(--line); background: rgba(255, 255, 255, 0.035); }
.cvx-provider__head { display: flex; align-items: center; gap: 12px; }
.cvx-provider__head img { width: 26px; height: 26px; object-fit: contain; opacity: 0.9; }
.cvx-provider__name { font-size: 16px; font-weight: 600; letter-spacing: -0.01em; }
.cvx-provider__models { margin-top: 4px; font-family: var(--font-mono); font-size: 11.5px; color: var(--muted-2); }
.cvx-provider p { margin-top: 16px; font-size: 14.5px; line-height: 1.6; color: var(--muted); flex: 1; }
.cvx-provider__tag {
  align-self: flex-start;
  margin-top: 18px;
  padding: 5px 11px;
  border-radius: 999px;
  border: 1px solid var(--line-soft);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--muted-2);
}
.cvx-provider__tag--live { border-color: rgba(111, 169, 138, 0.4); color: var(--ok); }

.cvx-tools { padding: 8px 0 44px; text-align: center; }
.cvx-tools__label {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted-2);
}
.cvx-marquee {
  overflow: hidden;
  margin-top: 26px;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 14%, #000 86%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 14%, #000 86%, transparent);
}
.cvx-marquee__track { display: flex; width: max-content; animation: cvx-marquee 36s linear infinite; }
.cvx-marquee:hover .cvx-marquee__track { animation-play-state: paused; }
.cvx-marquee__set { display: flex; align-items: center; gap: 56px; padding-right: 56px; }
.cvx-marquee__set li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  font-weight: 500;
  color: var(--muted);
  white-space: nowrap;
}
.cvx-marquee__set img { width: 22px; height: 22px; object-fit: contain; opacity: 0.85; }
@keyframes cvx-marquee { to { transform: translateX(var(--cvx-marquee-shift, -50%)); } }
.cvx-tools__more { margin-top: 26px; }

/* ══ 12 · CALLOUT, PULL QUOTE, INLINE CTA ═════════════════════ */

.cvx-callout {
  position: relative;
  max-width: 820px;
  margin: 0 auto;
  padding: 30px 32px;
  border: 1px solid var(--line-soft);
  border-left: 2px solid var(--brand);
  border-radius: 0 var(--r-md) var(--r-md) 0;
  background: linear-gradient(90deg, rgba(232, 118, 59, 0.07), transparent 70%);
}
.cvx-callout p { font-size: 16.5px; line-height: 1.65; color: var(--muted); }
.cvx-callout p + p { margin-top: 14px; }
.cvx-callout strong { color: var(--fg); font-weight: 500; }

.cvx-pull {
  max-width: 820px;
  margin: 0 auto;
  text-align: center;
  font-size: clamp(20px, 3.2vw, 28px);
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: -0.015em;
  color: var(--fg);
}
.cvx-pull span { color: var(--brand-bright); }

.cvx-inline-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  flex-wrap: wrap;
  padding: 30px 32px;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: linear-gradient(120deg, rgba(232, 118, 59, 0.10), rgba(255, 255, 255, 0.02) 55%);
}
.cvx-inline-cta h3 { font-size: 20px; font-weight: 600; letter-spacing: -0.015em; }
.cvx-inline-cta p { margin-top: 6px; font-size: 14.5px; color: var(--muted); }

/* ══ 13 · FAQ, PROSE, LONG DOCUMENT ═══════════════════════════ */

.cvx-faq { max-width: 760px; margin: 0 auto; border-top: 1px solid var(--line-soft); }
.cvx-faq details { border-bottom: 1px solid var(--line-soft); }
.cvx-faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 4px;
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
  list-style: none;
}
.cvx-faq summary::-webkit-details-marker { display: none; }
.cvx-faq summary::after {
  content: "+";
  flex: none;
  font-size: 20px;
  font-weight: 400;
  color: var(--muted-2);
  transition: transform 0.2s ease;
}
.cvx-faq details[open] summary::after { transform: rotate(45deg); color: var(--brand-bright); }
.cvx-faq details p {
  padding: 0 4px 22px;
  font-size: 15px;
  line-height: 1.65;
  color: var(--muted);
  max-width: 62ch;
}

/* Sticky contents beside prose — the privacy policy. */
.cvx-doc { display: grid; grid-template-columns: 220px 1fr; gap: 56px; align-items: start; }
.cvx-toc { position: sticky; top: 96px; }
.cvx-toc__title {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted-2);
  margin-bottom: 14px;
}
.cvx-toc ol { counter-reset: toc; }
.cvx-toc li { counter-increment: toc; }
.cvx-toc li + li { margin-top: 9px; }
.cvx-toc a {
  display: flex;
  gap: 10px;
  font-size: 13.5px;
  line-height: 1.4;
  color: var(--muted-2);
  transition: color 0.15s ease;
}
.cvx-toc a::before {
  content: counter(toc, decimal-leading-zero);
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--muted-2);
}
.cvx-toc a:hover { color: var(--fg); }

.cvx-doc__section + .cvx-doc__section { margin-top: 44px; }
.cvx-doc__section h2 {
  display: flex;
  gap: 12px;
  font-size: 21px;
  font-weight: 600;
  letter-spacing: -0.015em;
  scroll-margin-top: 90px;
}
.cvx-doc__section h2 .num {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--brand-bright);
  padding-top: 7px;
}
.cvx-doc__section > * + * { margin-top: 16px; }
.cvx-doc__section p, .cvx-doc__section li { font-size: 15.5px; line-height: 1.7; color: var(--muted); }
.cvx-doc__section li { position: relative; padding-left: 22px; }
.cvx-doc__section li + li { margin-top: 10px; }
.cvx-doc__section li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 11px;
  width: 8px;
  height: 1.5px;
  background: var(--brand);
}
.cvx-doc__section strong { color: var(--fg); font-weight: 500; }
.cvx-doc__section a { color: var(--fg); text-decoration: underline; text-underline-offset: 3px; }
.cvx-doc__section code {
  font-family: var(--font-mono);
  font-size: 13px;
  padding: 2px 6px;
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.06);
  color: var(--fg);
}
@media (max-width: 860px) {
  .cvx-doc { grid-template-columns: 1fr; gap: 36px; }
  .cvx-toc { position: static; }
}

/* ══ 14 · PRODUCTS ════════════════════════════════════════════ */

.cvx-products { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.cvx-product {
  display: flex;
  flex-direction: column;
  padding: 28px 26px;
  border: 1px solid var(--line-soft);
  border-radius: var(--r-lg);
  background: rgba(255, 255, 255, 0.02);
  transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.cvx-product:hover {
  border-color: var(--line);
  transform: translateY(-2px);
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.45);
}
.cvx-product__tag {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted-2);
}
.cvx-product h3 { margin-top: 14px; font-size: 19px; font-weight: 600; letter-spacing: -0.015em; }
.cvx-product p { margin-top: 10px; font-size: 14.5px; line-height: 1.6; color: var(--muted); flex: 1; }
.cvx-product__link { margin-top: 18px; font-family: var(--font-mono); font-size: 13px; color: var(--brand-bright); }
.cvx-product__link:hover { text-decoration: underline; text-underline-offset: 3px; }
.cvx-product__status { margin-top: 18px; font-family: var(--font-mono); font-size: 11.5px; color: var(--muted-2); }
@media (max-width: 900px) { .cvx-products { grid-template-columns: 1fr; } }

/* ══ 15 · CTA BAND, FOOTER, BOOK, 404 ═════════════════════════ */

.cvx-cta {
  position: relative;
  overflow: clip;
  padding: 120px 0 128px;
  text-align: center;
  border-top: 1px solid var(--line-soft);
}
.cvx-cta::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -180px;
  transform: translateX(-50%);
  width: min(1000px, 130vw);
  height: 360px;
  background: radial-gradient(closest-side, var(--brand-glow), transparent 72%);
  filter: blur(48px);
  pointer-events: none;
}
.cvx-cta > * { position: relative; z-index: 1; }
.cvx-cta .cvx-h2 { max-width: 16ch; margin-left: auto; margin-right: auto; }
.cvx-cta .cvx-lede { max-width: 36em; margin-left: auto; margin-right: auto; }
.cvx-cta__actions {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 18px;
  margin-top: 32px;
  flex-wrap: wrap;
}
.cvx-cta__alt { font-size: 14px; color: var(--muted-2); }
.cvx-cta__alt a { color: var(--muted); text-decoration: underline; text-underline-offset: 3px; }
.cvx-cta__alt a:hover { color: var(--fg); }

.cvx-footer { border-top: 1px solid var(--line-soft); padding: 64px 0 40px; }
.cvx-footer__grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 32px; }
.cvx-footer__blurb { margin-top: 16px; max-width: 30em; font-size: 14px; line-height: 1.6; color: var(--muted-2); }
.cvx-footer__col-title { font-size: 13px; font-weight: 600; color: var(--fg); margin: 0 0 14px; }
.cvx-footer__col li + li { margin-top: 10px; }
.cvx-footer__col a { font-size: 14px; color: var(--muted); }
.cvx-footer__col a:hover { color: var(--fg); }
.cvx-footer__meta {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  margin-top: 56px;
  padding-top: 24px;
  border-top: 1px solid var(--line-soft);
  font-size: 13px;
  color: var(--muted-2);
}
@media (max-width: 780px) { .cvx-footer__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .cvx-footer__grid { grid-template-columns: 1fr; } }

.cvx-book-card {
  max-width: 760px;
  margin: 44px auto 0;
  padding: 32px;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.015));
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.45), 0 0 64px rgba(232, 118, 59, 0.07);
  text-align: left;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
}
.cvx-book-card__label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted-2);
  margin-bottom: 14px;
}
.cvx-book-card__alt { margin-top: 14px; font-size: 14px; color: var(--muted-2); }
.cvx-book-card__alt a { color: var(--muted); text-decoration: underline; text-underline-offset: 3px; }
.cvx-book-card__alt a:hover { color: var(--fg); }
.cvx-book-card li { position: relative; padding-left: 18px; font-size: 14px; line-height: 1.55; color: var(--muted); }
.cvx-book-card li + li { margin-top: 9px; }
.cvx-book-card li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 9px;
  width: 6px;
  height: 1.5px;
  background: var(--brand-bright);
}
@media (max-width: 680px) { .cvx-book-card { grid-template-columns: 1fr; padding: 26px 22px; } }

/* ── Intake wizard ─────────────────────────────────────────────────
   A six-step form on /book. The panels are plain fieldsets that JS
   shows one at a time; with JS off every panel stays visible and the
   mailto beside it still works. */

.cvx-wiz {
  max-width: 760px;
  margin: 40px auto 0;
  padding: 32px;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.015));
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.45), 0 0 64px rgba(232, 118, 59, 0.06);
  text-align: left;
}
@media (max-width: 620px) { .cvx-wiz { padding: 24px 20px; } }

.cvx-wiz__bar {
  display: flex;
  gap: 6px;
  margin-bottom: 8px;
}
.cvx-wiz__bar span {
  flex: 1;
  height: 3px;
  border-radius: 2px;
  background: var(--line);
  transition: background-color 0.3s var(--ease);
}
.cvx-wiz__bar span.is-done { background: var(--brand); }

.cvx-wiz__legend {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted-2);
  margin-bottom: 4px;
}
.cvx-wiz__panel { border: 0; padding: 0; margin: 0; min-width: 0; }
.cvx-wiz__panel h2 {
  font-size: 21px;
  font-weight: 600;
  letter-spacing: -0.015em;
  margin-bottom: 4px;
}
.cvx-wiz__hint { font-size: 14px; color: var(--muted); margin-bottom: 22px; }

.cvx-field { margin-top: 18px; }
.cvx-field > label,
.cvx-field__label {
  display: block;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--fg);
  margin-bottom: 7px;
}
.cvx-field__opt { color: var(--muted-2); font-weight: 400; }
.cvx-field input[type="text"],
.cvx-field input[type="email"],
.cvx-field input[type="tel"],
.cvx-field input[type="url"],
.cvx-field select,
.cvx-field textarea {
  width: 100%;
  padding: 11px 13px;
  border: 1px solid var(--line-hard);
  border-radius: var(--r-sm);
  background: rgba(0, 0, 0, 0.25);
  color: var(--fg);
  font-family: inherit;
  font-size: 15px;
  line-height: 1.45;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}
.cvx-field textarea { min-height: 118px; resize: vertical; }
.cvx-field select {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position: calc(100% - 19px) calc(50% + 2px), calc(100% - 13px) calc(50% + 2px);
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 40px;
}
.cvx-field select option { background: #17171a; color: var(--fg); }
.cvx-field input:focus, .cvx-field select:focus, .cvx-field textarea:focus {
  outline: none;
  border-color: var(--brand);
  background: rgba(0, 0, 0, 0.4);
}
.cvx-field input::placeholder, .cvx-field textarea::placeholder { color: var(--muted-2); }
.cvx-field.is-bad input, .cvx-field.is-bad select, .cvx-field.is-bad textarea { border-color: #D6736E; }
.cvx-field__err { margin-top: 6px; font-size: 13px; color: #D6736E; }

.cvx-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 560px) { .cvx-row { grid-template-columns: 1fr; gap: 0; } }

/* Checkbox grid */
.cvx-checks { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
@media (max-width: 560px) { .cvx-checks { grid-template-columns: 1fr; } }
.cvx-check-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 13px;
  border: 1px solid var(--line-soft);
  border-radius: var(--r-sm);
  background: rgba(255, 255, 255, 0.02);
  font-size: 14px;
  color: var(--muted);
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease, background-color 0.15s ease;
}
.cvx-check-item:hover { border-color: var(--line-hard); color: var(--fg); }
.cvx-check-item input { accent-color: var(--brand); width: 15px; height: 15px; flex: none; }
.cvx-check-item:has(input:checked) {
  border-color: rgba(232, 118, 59, 0.45);
  background: var(--brand-tint);
  color: var(--fg);
}
.cvx-check-item:has(input:focus-visible) { outline: 2px solid var(--brand); outline-offset: 2px; }

/* Step 0 — what kind of enquiry this is. Radio cards, not a select: the
   choice changes the rest of the form, so it should read as a fork. */
.cvx-picks { display: grid; gap: 10px; }
.cvx-pick {
  display: flex;
  align-items: flex-start;
  gap: 13px;
  padding: 16px 18px;
  border: 1px solid var(--line-soft);
  border-radius: var(--r-md);
  background: rgba(255, 255, 255, 0.02);
  cursor: pointer;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}
.cvx-pick:hover { border-color: var(--line-hard); }
.cvx-pick input { accent-color: var(--brand); width: 17px; height: 17px; margin-top: 2px; flex: none; }
.cvx-pick strong { display: block; font-size: 15.5px; font-weight: 600; color: var(--fg); }
.cvx-pick span { display: block; margin-top: 4px; font-size: 14px; line-height: 1.5; color: var(--muted); }
.cvx-pick:has(input:checked) {
  border-color: rgba(232, 118, 59, 0.5);
  background: var(--brand-tint);
}
.cvx-pick:has(input:focus-visible) { outline: 2px solid var(--brand); outline-offset: 2px; }
.cvx-picks.is-bad .cvx-pick { border-color: #D6736E; }

.cvx-consent {
  display: flex;
  gap: 11px;
  align-items: flex-start;
  margin-top: 22px;
  font-size: 14px;
  line-height: 1.55;
  color: var(--muted);
}
.cvx-consent input { accent-color: var(--brand); width: 16px; height: 16px; margin-top: 2px; flex: none; }
.cvx-consent a { color: var(--fg); text-decoration: underline; text-underline-offset: 3px; }

.cvx-wiz__nav {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 28px;
  padding-top: 22px;
  border-top: 1px solid var(--line-soft);
}
.cvx-wiz__nav .cvx-spacer { flex: 1; }
.cvx-wiz__status { font-size: 13.5px; color: var(--muted-2); }
.cvx-wiz__status.is-bad { color: #D6736E; }

.cvx-wiz__done { text-align: center; padding: 20px 0 8px; }
.cvx-wiz__done h2 { font-size: 24px; font-weight: 600; letter-spacing: -0.015em; }
.cvx-wiz__done p { margin-top: 12px; font-size: 15.5px; line-height: 1.6; color: var(--muted); }
.cvx-wiz__tick {
  width: 46px;
  height: 46px;
  margin: 0 auto 18px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--brand-tint);
  border: 1px solid rgba(232, 118, 59, 0.4);
}
.cvx-wiz__tick svg { width: 22px; height: 22px; stroke: var(--brand-bright); stroke-width: 2; fill: none; }

/* Off-screen but focusable / submittable — the honeypot. */
.cvx-hp {
  position: absolute !important;
  left: -9999px !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.cvx-note { margin-top: 28px; text-align: center; font-size: 14px; line-height: 1.6; color: var(--muted-2); }
.cvx-note a { color: var(--muted); text-decoration: underline; text-underline-offset: 3px; }
.cvx-note a:hover { color: var(--fg); }
.cvx-note .cvx-arrow { text-decoration: none; }

.cvx-404 {
  min-height: calc(100vh - var(--header-h) - 240px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 96px 24px;
}

/* ══ 16 · REVEALS + MOTION ════════════════════════════════════ */

html.cvx-anim .cvx-reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}
html.cvx-anim .cvx-reveal.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  [data-enter] { animation: none; }
  html.cvx-anim .cvx-reveal { opacity: 1; transform: none; transition: none; }
  .cvx-btn, .cvx-product, .cvx-tile, .cvx-provider { transition: none; }
  .cvx-marquee { mask-image: none; -webkit-mask-image: none; }
  .cvx-marquee__track { animation: none; width: auto; flex-wrap: wrap; justify-content: center; }
  .cvx-marquee__set { flex-wrap: wrap; justify-content: center; padding-right: 0; }
  .cvx-marquee__set[aria-hidden="true"] { display: none; }
}