/* =========================================================================
   VoxDrive design system — vox.css
   CANONICAL SOURCE OF TRUTH for the whole product's look.
   Static pages (index/webcall/privacy/terms/about/security/contact) link this.
   The Python-rendered portal + dashboard inline an identical copy from
   services/api/app/theme.py (VOX_CSS) because the API runs in a separate
   Cloud Run container and can't read this file at runtime.
   ⚠️ If you edit tokens/components here, mirror the change into theme.py.
   ========================================================================= */

/* ----------------------------------------------------------------- tokens */
:root{
  /* surfaces */
  --vd-navy:#0b1220;        /* page background */
  --vd-surface-1:#0d1526;   /* nav, inputs, inset panels */
  --vd-surface-2:#111a2e;
  --vd-surface-3:#141f38;   /* cards */
  --vd-line:#22304d;
  --vd-line-strong:#2c3d5f;
  --vd-field-border:#5a6c8f;   /* form control boundary — 3.45:1 for WCAG 1.4.11 */

  /* brand + semantic (WCAG-corrected — see README of decisions) */
  --vd-blue:#2560ea;        /* primary fill; white text = 4.9:1 (AA) */
  --vd-blue-press:#1a4fd0;  /* hover/active DARKENS, never lightens */
  --vd-blue-soft:#4f83ff;   /* links + focus ring only, never white-on- */
  --vd-orange:#ff7a1a;      /* fill only — its label is navy, never white */
  --vd-orange-hover:#ff8c3a;
  --vd-green:#2fd58a;
  --vd-green-ink:#08301e;
  --vd-danger:#ff5c5c;
  --vd-warn:#ffb86b;

  /* text */
  --vd-ink:#e8edf7;
  --vd-muted:#9fb0cc;        /* AA at >=14px */
  --vd-muted-strong:#b6c4dc; /* required under 14px */

  /* type */
  --font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --text-xs:12px; --text-sm:13px; --text-base:15px; --text-md:17px;
  --text-lg:19px; --text-xl:24px;
  --text-2xl:clamp(26px,3.6vw,38px); --text-hero:clamp(34px,5.2vw,58px);

  /* spacing (8-based) */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px;
  --sp-5:24px; --sp-6:32px; --sp-7:48px; --sp-8:72px;

  /* radius / shadow / motion */
  --r-sm:8px; --r-md:10px; --r-lg:14px; --r-xl:20px; --r-pill:999px;
  --shadow-sm:0 1px 2px rgba(0,0,0,.3);
  --shadow-md:0 4px 16px rgba(0,0,0,.35);
  --shadow-lg:0 12px 40px rgba(0,0,0,.45);
  --card-top:inset 0 1px 0 rgba(255,255,255,.045);
  --t-fast:120ms ease; --t-med:180ms ease;
  --nav-h:64px;
}

/* ------------------------------------------------------------------ reset */
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:var(--font);background:var(--vd-navy);color:var(--vd-ink);line-height:1.6;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:var(--vd-blue-soft);text-decoration:none}
a:hover{text-decoration:underline}
svg{display:block}

/* accessible utilities */
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip-link{position:absolute;left:12px;top:-48px;z-index:200;background:var(--vd-blue);color:#fff;padding:10px 16px;border-radius:var(--r-md);transition:top var(--t-fast)}
.skip-link:focus{top:12px;text-decoration:none}

/* one global focus ring — never removed without a replacement */
:where(a,button,summary,input,select,textarea,[role="button"],[tabindex]):focus-visible{
  outline:3px solid var(--vd-blue-soft);outline-offset:2px;border-radius:4px}

/* --------------------------------------------------------------- headings */
h1{font-size:var(--text-hero);line-height:1.08;letter-spacing:-.02em}
h2{font-size:var(--text-2xl);letter-spacing:-.01em;margin-bottom:var(--sp-3)}
h3{font-size:var(--text-lg);margin-bottom:var(--sp-2)}
p.lead{color:var(--vd-muted);font-size:var(--text-lg);max-width:640px}
.muted{color:var(--vd-muted)}
.muted-sm{color:var(--vd-muted-strong)} /* muted text below 14px */
.accent{color:var(--vd-blue-soft)}

/* ---------------------------------------------------------------- layout */
.wrap{max-width:1100px;margin:0 auto;padding:0 var(--sp-5)}
.wrap-narrow{max-width:760px;margin:0 auto;padding:0 var(--sp-5)}
section{padding:var(--sp-8) 0}
:target{scroll-margin-top:calc(var(--nav-h) + 12px)}
[id]{scroll-margin-top:calc(var(--nav-h) + 12px)}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:36px;align-items:center}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:var(--sp-3)}

/* ---------------------------------------------------------------- buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:14px 26px;border-radius:var(--r-md);font-weight:600;font-size:16px;
  line-height:1.1;cursor:pointer;border:1px solid transparent;font-family:inherit;
  min-height:44px;transition:background var(--t-fast),border-color var(--t-fast),transform var(--t-fast),box-shadow var(--t-fast);text-decoration:none}
.btn:active{transform:translateY(1px)}
.btn[disabled],.btn:disabled{opacity:.55;cursor:not-allowed}
.btn-primary{background:var(--vd-blue);color:#fff}
.btn-primary:hover{background:var(--vd-blue-press);text-decoration:none}
.btn-ghost{background:transparent;color:var(--vd-ink);border-color:var(--vd-line)}
.btn-ghost:hover{border-color:var(--vd-blue-soft);text-decoration:none}
.btn-orange{background:var(--vd-orange);color:var(--vd-navy)}   /* navy label = ~7:1 */
.btn-orange:hover{background:var(--vd-orange-hover);text-decoration:none}
.btn-sm{padding:8px 14px;font-size:14px;min-height:36px}
.btn-lg{padding:16px 32px;font-size:18px}
.btn.is-loading{opacity:.75;pointer-events:none}
.btn.is-loading::before{content:"";width:15px;height:15px;border-radius:50%;
  border:2px solid currentColor;border-top-color:transparent;animation:vd-spin .7s linear infinite}
@keyframes vd-spin{to{transform:rotate(360deg)}}

/* ---------------------------------------------------------- pills & badges */
.pill{display:inline-flex;align-items:center;gap:6px;background:var(--vd-surface-2);
  border:1px solid var(--vd-line);color:var(--vd-muted-strong);border-radius:var(--r-pill);
  padding:6px 14px;font-size:var(--text-sm)}
.badge{display:inline-block;font-size:var(--text-xs);font-weight:700;padding:3px 10px;
  border-radius:var(--r-pill);text-transform:uppercase;letter-spacing:.02em}
.badge-info{background:var(--vd-blue);color:#fff}
.badge-success{background:rgba(47,213,138,.16);color:var(--vd-green);border:1px solid rgba(47,213,138,.4)}
.badge-warn{background:#3a2c10;color:var(--vd-warn);border:1px solid #6b4a1a}
.badge-trial{background:#3a2c10;color:#ffb84d}

/* ----------------------------------------------------------------- cards */
.card{background:var(--vd-surface-3);border:1px solid var(--vd-line);border-radius:var(--r-lg);
  padding:26px;box-shadow:var(--shadow-md),var(--card-top)}
.card .num{display:inline-flex;width:34px;height:34px;border-radius:50%;background:var(--vd-blue);
  color:#fff;font-weight:700;align-items:center;justify-content:center;margin-bottom:var(--sp-3)}
.card.feature svg{width:26px;height:26px;stroke:var(--vd-blue-soft);margin-bottom:var(--sp-3)}
.card.feature p{color:var(--vd-muted);font-size:var(--text-base)}
.card-hover{transition:transform var(--t-med),box-shadow var(--t-med)}
.card-hover:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg),var(--card-top)}

.stat{background:var(--vd-surface-3);border:1px solid var(--vd-line);border-radius:var(--r-lg);
  padding:20px;box-shadow:var(--shadow-md),var(--card-top)}
.stat b{display:block;font-size:32px;color:#fff;font-variant-numeric:tabular-nums}
.stat small{color:var(--vd-muted-strong);font-size:var(--text-sm)}
.statbar{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:var(--sp-7)}

/* ------------------------------------------------------------------ forms */
label{display:block;font-size:13.5px;color:var(--vd-muted-strong);margin:var(--sp-4) 0 6px}
input,textarea,select{width:100%;background:var(--vd-surface-1);border:1px solid var(--vd-field-border);
  border-radius:var(--r-sm);color:var(--vd-ink);padding:11px 12px;font-size:var(--text-base);font-family:inherit}
textarea{min-height:96px;resize:vertical}
input::placeholder,textarea::placeholder{color:#6d7d9c}
input:focus,textarea:focus,select:focus{outline:none;border-color:var(--vd-blue-soft);
  box-shadow:0 0 0 3px rgba(79,131,255,.25)}
select.preset{margin-bottom:var(--sp-2)}

/* ----------------------------------------------------------------- chips */
.chips{display:flex;flex-wrap:wrap;gap:var(--sp-2);margin-top:var(--sp-2)}
.chip{background:var(--vd-surface-1);border:1px solid var(--vd-line);color:var(--vd-muted-strong);
  border-radius:var(--r-pill);padding:7px 13px;font-size:var(--text-sm);cursor:pointer;
  font-family:inherit;line-height:1;min-height:32px;display:inline-flex;align-items:center}
.chip:hover{border-color:var(--vd-blue-soft);color:var(--vd-ink)}
.chip[aria-pressed="true"],.chip.on{background:#12305f;border-color:var(--vd-blue);color:#fff}

/* --------------------------------------------------------------- alerts */
.banner{background:rgba(47,213,138,.1);border:1px solid rgba(47,213,138,.35);color:var(--vd-green);
  border-radius:var(--r-md);padding:12px 16px;font-size:var(--text-base);margin-bottom:var(--sp-4)}
.warn{background:#2a1a0a;border:1px solid #6b4a1a;color:var(--vd-warn);
  border-radius:var(--r-md);padding:12px 16px;font-size:var(--text-base);margin-bottom:var(--sp-4)}
.err{background:#2a0f14;border:1px solid #6b1a2a;color:#ff8f9f;
  border-radius:var(--r-md);padding:12px 16px;font-size:var(--text-base);margin-bottom:var(--sp-4)}

/* ------------------------------------------------------ marketing sections */
nav.vd-nav{position:sticky;top:0;background:rgba(11,18,32,.9);backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--vd-line);z-index:50}
nav.vd-nav .wrap{display:flex;align-items:center;justify-content:space-between;height:var(--nav-h)}
.logo{font-weight:800;font-size:20px;color:#fff;letter-spacing:-.02em}
.logo:hover{text-decoration:none}
.logo span{color:var(--vd-blue-soft)}
nav.vd-nav .links{display:flex;gap:26px;align-items:center}
nav.vd-nav .links a{color:var(--vd-muted);font-size:var(--text-base)}
nav.vd-nav .links a:hover{color:#fff;text-decoration:none}
.nav-toggle{display:none;background:transparent;border:1px solid var(--vd-line);border-radius:var(--r-sm);
  color:var(--vd-ink);width:42px;height:42px;cursor:pointer;font-size:20px;align-items:center;justify-content:center}

.hero{padding:88px 0 64px;background:
  radial-gradient(900px 420px at 75% -10%,rgba(37,96,234,.22),transparent),
  radial-gradient(600px 300px at 10% 110%,rgba(255,122,26,.10),transparent)}
.hero .cta-row{display:flex;gap:var(--sp-3);margin-top:30px;flex-wrap:wrap}

.trust-row{display:flex;flex-wrap:wrap;gap:10px 22px;margin-top:26px;color:var(--vd-muted-strong);font-size:var(--text-sm)}
.trust-row span{display:inline-flex;align-items:center;gap:7px}
.trust-row svg{width:16px;height:16px;stroke:var(--vd-green)}

.cta-banner{background:linear-gradient(90deg,rgba(37,96,234,.16),rgba(255,122,26,.12));
  border:1px solid var(--vd-line);border-radius:var(--r-lg);padding:34px;text-align:center;box-shadow:var(--shadow-md)}

/* demo phone player (shared with webcall live transcript via .msg) */
.phone{background:var(--vd-surface-2);border:1px solid var(--vd-line);border-radius:var(--r-xl);
  overflow:hidden;max-width:460px;margin:0 auto;box-shadow:var(--shadow-lg)}
.phone-top{background:var(--vd-surface-3);padding:14px 18px;display:flex;justify-content:space-between;
  align-items:center;border-bottom:1px solid var(--vd-line)}
.phone-top .callee{font-weight:700}
.phone-top .timer{font-variant-numeric:tabular-nums;color:var(--vd-green);font-size:var(--text-sm)}
.transcript{height:380px;overflow-y:auto;padding:18px;display:flex;flex-direction:column;gap:10px}
.msg{max-width:82%;padding:10px 14px;border-radius:var(--r-lg);font-size:var(--text-base);
  opacity:0;transform:translateY(6px);transition:all .3s ease;overflow-wrap:anywhere}
.msg.show{opacity:1;transform:none}
.msg.caller,.msg.user{align-self:flex-end;background:var(--vd-blue);color:#fff;border-bottom-right-radius:4px}
.msg.ai,.msg.assistant{align-self:flex-start;background:#1c2946;border:1px solid var(--vd-line);border-bottom-left-radius:4px}
.msg.sys{align-self:center;background:transparent;color:var(--vd-green);font-size:var(--text-sm);
  border:1px dashed var(--vd-line);border-radius:var(--r-sm);text-align:center}
.scenarios{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:18px}
.scenarios button{padding:10px 16px;border-radius:var(--r-pill);border:1px solid var(--vd-line);
  background:var(--vd-surface-3);color:var(--vd-muted-strong);cursor:pointer;font-size:var(--text-sm);
  font-family:inherit;min-height:40px}
.scenarios button.active{background:var(--vd-blue);color:#fff;border-color:var(--vd-blue)}

/* ROI */
.roi{background:var(--vd-surface-2);border:1px solid var(--vd-line);border-radius:var(--r-lg);
  padding:30px;box-shadow:var(--shadow-md),var(--card-top)}
.roi .row{display:grid;grid-template-columns:1fr auto;gap:12px;align-items:center;margin-bottom:16px}
.roi label{font-size:var(--text-base);color:var(--vd-muted);margin:0}
.roi output{font-weight:700;min-width:84px;text-align:right;font-variant-numeric:tabular-nums;color:var(--vd-ink)}
.roi input[type=range]{width:100%;grid-column:1/3;accent-color:var(--vd-blue)}
.roi-result{background:var(--vd-surface-3);border:1px solid var(--vd-line);border-radius:var(--r-lg);
  padding:26px;text-align:center;box-shadow:var(--shadow-lg),var(--card-top)}
.roi-result b{font-size:42px;color:var(--vd-green);display:block;font-variant-numeric:tabular-nums}
.roi-result .sub{color:var(--vd-muted-strong);font-size:var(--text-sm);margin-top:6px}
.roi-note{font-size:var(--text-xs);color:var(--vd-muted-strong);margin-top:14px}

/* pricing */
.price-card{position:relative}
.price-card.hot{border-color:var(--vd-blue);box-shadow:var(--shadow-lg),var(--card-top)}
.price-card .tag{position:absolute;top:-12px;left:50%;transform:translateX(-50%);background:var(--vd-blue);
  color:#fff;font-size:var(--text-xs);font-weight:700;padding:4px 12px;border-radius:var(--r-pill)}
.price-card .price{font-size:38px;font-weight:800;margin:8px 0}
.price-card .price small{font-size:var(--text-sm);font-weight:400;color:var(--vd-muted-strong)}
.price-card ul{list-style:none;margin:16px 0 22px}
.price-card li{padding:6px 0;color:var(--vd-muted-strong);font-size:var(--text-base)}
.price-card li::before{content:"✓ ";color:var(--vd-green);font-weight:700}

/* FAQ */
details.faq{border-bottom:1px solid var(--vd-line);padding:18px 0}
details.faq summary{cursor:pointer;font-weight:600;font-size:var(--text-md);list-style:none;
  display:flex;justify-content:space-between;gap:12px}
details.faq summary::-webkit-details-marker{display:none}
details.faq summary::after{content:"+";color:var(--vd-blue-soft);font-size:20px;line-height:1}
details.faq[open] summary::after{content:"–"}
details.faq p{color:var(--vd-muted);margin-top:10px;max-width:720px}

/* footer */
footer.vd-footer{border-top:1px solid var(--vd-line);padding:36px 0;color:var(--vd-muted);font-size:var(--text-sm)}
footer.vd-footer .wrap{display:flex;justify-content:space-between;flex-wrap:wrap;gap:14px;align-items:center}
footer.vd-footer a{color:var(--vd-muted)}
footer.vd-footer a:hover{color:var(--vd-ink)}

/* empty-state (portal zero states) */
.empty{text-align:center;padding:40px 24px;background:var(--vd-surface-3);border:1px dashed var(--vd-line);
  border-radius:var(--r-lg)}
.empty .ico{font-size:40px;margin-bottom:12px;opacity:.9}
.empty h3{font-size:var(--text-lg)}
.empty p{color:var(--vd-muted);font-size:var(--text-base);max-width:420px;margin:8px auto 18px}

/* legal / long-form prose */
.prose{max-width:760px;margin:0 auto}
.prose h2{font-size:var(--text-xl);margin-top:28px}
.prose p,.prose li{color:var(--vd-ink);line-height:1.7}
.prose .note{background:var(--vd-surface-1);border:1px solid var(--vd-line);border-left:3px solid var(--vd-warn);
  border-radius:var(--r-sm);padding:14px 18px;font-size:var(--text-base);color:var(--vd-muted-strong)}

code{background:var(--vd-surface-1);border:1px solid var(--vd-line);border-radius:6px;padding:2px 8px;font-size:var(--text-base)}

/* horizontal-scroll guard for wide embeds (SVG charts, tables) */
.scroll-x{overflow-x:auto;-webkit-overflow-scrolling:touch}

/* --------------------------------------------------------- reduced motion */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important}
}

/* --------------------------------------------------------------- responsive */
@media(max-width:840px){
  .grid3{grid-template-columns:1fr}
  .grid2{grid-template-columns:1fr}
  .statbar{grid-template-columns:1fr}
  section{padding:var(--sp-7) 0}
  .hero{padding:56px 0 40px}
  .cta-row .btn{width:100%}
  .cta-banner{padding:24px 18px}
  .phone{max-width:100%}
  .transcript{height:320px}
  .roi{padding:20px}
  .roi-result b{font-size:34px}
  footer.vd-footer .wrap{flex-direction:column;text-align:center}

  /* mobile nav: hamburger reveals a stacked menu */
  .nav-toggle{display:inline-flex}
  nav.vd-nav .links{position:absolute;top:var(--nav-h);left:0;right:0;flex-direction:column;
    align-items:stretch;gap:0;background:var(--vd-surface-1);border-bottom:1px solid var(--vd-line);
    box-shadow:var(--shadow-lg);max-height:0;overflow:hidden;transition:max-height var(--t-med);padding:0 var(--sp-5)}
  nav.vd-nav .links.open{max-height:80vh;padding:8px var(--sp-5) 16px}
  nav.vd-nav .links a{padding:13px 0;border-bottom:1px solid var(--vd-line)}
  nav.vd-nav .links a.btn{margin-top:12px;justify-content:center}
  nav.vd-nav .links a.btn:last-child{border-bottom:0}
}
@media(max-width:520px){
  .roi .row{grid-template-columns:1fr;gap:2px}
  .roi output{text-align:left}
}