/* ============================================================================
   chrome-v2.css — the marketing site's shared chrome, 2026-09-26 (site/homepage).
   Loaded by all six marketing pages (/, /how-it-works, /platform, /pricing,
   /get, /faq). Holds: the self-hosted Sora faces, the dark-first design
   tokens of the owner's approved redesign, the skip link, the "Already with
   us?" bar, the sticky nav, the phone menu (<dialog id="hq-menu">) and the
   footer. The markup lives ONCE in src/worker/site-chrome/{header,footer}.html
   and is stamped into every page by scripts/sync-marketing-assets.mjs.

   IMMUTABLE. /vendor/site/* is cached for a year (public/_headers). Never edit
   this file in place: copy it to chrome-v2.css, change the copy, and point the
   six pages at it. site-homepage-2026-09-26-smoke pins this file's sha256 so an
   in-place edit is a red gate, not a stale stylesheet in every browser.
   (The review of 2026-09-26 changed v1 in place before its first deploy, when
   no browser could hold it; from the first deploy on, the rule above holds.)

   SCOPE. Every rule here is class-scoped (hq-*): the five other pages still
   load site.css for their own content, and nothing below may restyle it.

   THEME. Dark first: the marketing pages ship <html data-theme="dark"> and the
   pre-paint snippet switches to light only when the visitor chose light with
   the nav's toggle (localStorage 'haul.theme.v1', haul-palette.js). The light
   values below are the same components, re-pointed; every text pair in both is
   measured (AA) by site-homepage-2026-09-26-smoke.
   ============================================================================ */

/* Sora 400–800, self-hosted (moved here from site-css.txt; files and ranges
   unchanged — public/vendor/fonts/sora/README.txt has their provenance). */
@font-face{font-family:'Sora';font-weight:400;font-display:swap;src:url('/vendor/fonts/sora/sora-latin-400.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Sora';font-weight:500;font-display:swap;src:url('/vendor/fonts/sora/sora-latin-500.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Sora';font-weight:600;font-display:swap;src:url('/vendor/fonts/sora/sora-latin-600.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Sora';font-weight:700;font-display:swap;src:url('/vendor/fonts/sora/sora-latin-700.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Sora';font-weight:800;font-display:swap;src:url('/vendor/fonts/sora/sora-latin-800.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

/* ---------- tokens: dark (the default) ---------- */
:root{
  --hq-bg:#07090d; --hq-bg-2:#0b1018; --hq-panel:#111823; --hq-panel-2:#151e2b;
  --hq-chrome:#05070a; --hq-nav:rgba(7,9,13,.86); --hq-hair:#151c27; --hq-sep:#121821;
  --hq-line:#243041; --hq-line-2:#2f3c50;
  --hq-text:#eef2f7; --hq-text-2:#b4c0cf; --hq-text-3:#8d9bb0;
  --hq-blue:#2da8ff;      /* fills: buttons, hot nodes */
  --hq-accent:#2da8ff;    /* blue as TEXT: the headline accent, the IQ */
  --hq-blue-ink:#7cc4ff;  /* links and small blue text */
  --hq-on-blue:#04111c;   /* a label on a blue fill */
  --hq-amber:#f0a83c; --hq-amber-ink:#f5b95a;
  --hq-red:#ff8a7e; --hq-green:#5fd89a;
  --hq-shadow:rgba(0,0,0,.8);
  --hq-font:'Sora',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --hq-mono:ui-monospace,'SF Mono','JetBrains Mono','DejaVu Sans Mono',Menlo,Consolas,monospace;
}
/* ---------- tokens: light (only when the visitor picked it) ---------- */
:root[data-theme="light"]{
  --hq-bg:#f7f9fc; --hq-bg-2:#eef3f9; --hq-panel:#ffffff; --hq-panel-2:#f1f5fa;
  --hq-chrome:#eef2f7; --hq-nav:rgba(247,249,252,.9); --hq-hair:#dde5ef; --hq-sep:#e3e9f1;
  --hq-line:#dde5ef; --hq-line-2:#c3d0e0;
  --hq-text:#0d1520; --hq-text-2:#4a5a6f; --hq-text-3:#5c6f88;
  --hq-blue:#2da8ff; --hq-accent:#0a66c2; --hq-blue-ink:#0a66c2; --hq-on-blue:#04111c;
  --hq-amber:#f0a83c; --hq-amber-ink:#a84d08;
  --hq-red:#c9271b; --hq-green:#147a46;
  --hq-shadow:rgba(16,24,40,.18);
}

/* ---------- skip link ---------- */
.hq-skip{position:absolute;left:12px;top:-80px;z-index:60;padding:14px 18px;border-radius:10px;background:var(--hq-blue);color:var(--hq-on-blue);font:700 15px/1.2 var(--hq-font);text-decoration:none}
.hq-skip:focus{top:12px}

/* ---------- layout ---------- */
.hq-wrap{box-sizing:border-box;max-width:1200px;margin:0 auto;padding:0 32px}
/* The nav sticks (72 px; 64 on a phone). A link reached with Shift+Tab, the skip
   link's #main and every in-page jump stop BELOW it, never under it (review
   2026-09-26: Shift+Tab left footer links and FAQ questions hidden under the nav
   on all six pages, both engines - WCAG 2.4.11). */
html{scroll-padding-top:88px}
.hq-ico{display:block;width:24px;height:24px;flex:none}

/* ---------- buttons (the nav, the menu and the homepage share them) ---------- */
.hq-btn{box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;gap:10px;height:56px;padding:0 28px;border-radius:14px;font:700 17px/1 var(--hq-font);white-space:nowrap;text-decoration:none;cursor:pointer;transition:transform .15s,box-shadow .15s,border-color .15s}
.hq-btn .hq-ico{width:20px;height:20px}
.hq-primary{background:var(--hq-blue);color:var(--hq-on-blue);box-shadow:0 10px 30px -10px rgba(45,168,255,.7)}
.hq-primary:hover{transform:translateY(-1px);box-shadow:0 14px 36px -10px rgba(45,168,255,.85)}
.hq-ghost{border:1.5px solid var(--hq-line-2);color:var(--hq-text);background:rgba(255,255,255,.02)}
.hq-ghost:hover{border-color:var(--hq-blue-ink)}
.hq-sm{height:42px;padding:0 18px;font-size:15px;border-radius:11px}

/* ---------- "Already with us?" bar ---------- */
.hq-util{background:var(--hq-chrome);border-bottom:1px solid var(--hq-hair);color:var(--hq-text-3);font:500 13.5px/1.2 var(--hq-font)}
.hq-util .hq-wrap{display:flex;justify-content:flex-end;align-items:center;gap:22px;height:36px}
.hq-util a{color:var(--hq-text);font-weight:600;text-decoration:none}
.hq-util a:hover{color:var(--hq-blue-ink)}
.hq-short{display:none}

/* ---------- nav ---------- */
.hq-nav{position:sticky;top:0;z-index:40;background:var(--hq-nav);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-bottom:1px solid var(--hq-hair)}
.hq-nav .hq-wrap{display:flex;align-items:center;height:72px;gap:36px}
.hq-brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--hq-text)}
.hq-mark{display:block;width:38px;height:38px;flex:none}
.hq-name{font:800 17px/1 var(--hq-font);letter-spacing:.09em;text-transform:uppercase;white-space:nowrap;color:var(--hq-text)}
.hq-name b{font-weight:800;color:var(--hq-accent)}
.hq-links{display:flex;align-items:center;gap:28px;margin-left:auto;font:500 15px/1.2 var(--hq-font)}
.hq-links a{color:var(--hq-text-2);text-decoration:none}
.hq-links a:hover,.hq-links a[aria-current="page"]{color:var(--hq-text)}
.hq-actions{display:flex;align-items:center;gap:12px}
/* The palette's toggle (haul-palette.css §4) sized and coloured for this nav. */
.hq-nav .haul-theme-toggle{width:42px;height:42px;border-radius:11px;border:1px solid var(--hq-line-2);background:transparent;color:var(--hq-text-2)}
.hq-nav .haul-theme-toggle:hover{background:transparent;color:var(--hq-text);border-color:var(--hq-blue-ink)}
.hq-menu-btn{display:none;align-items:center;justify-content:center;width:48px;height:48px;padding:0;border:1px solid var(--hq-line-2);border-radius:12px;background:transparent;color:var(--hq-text);cursor:pointer}
.hq-menu-btn:hover{border-color:var(--hq-blue-ink)}

/* ---------- the phone menu: a modal <dialog> (menu-v1.js opens it) ---------- */
.hq-drawer{box-sizing:border-box;position:fixed;inset:0 0 0 auto;width:min(420px,100%);height:100%;max-width:100%;max-height:100%;margin:0 0 0 auto;padding:0;border:0;border-left:1px solid var(--hq-line);background:var(--hq-bg);color:var(--hq-text);font-family:var(--hq-font);overflow-y:auto;overscroll-behavior:contain}
.hq-drawer::backdrop{background:rgba(3,5,8,.62)}
.hq-drawer-in{box-sizing:border-box;display:flex;flex-direction:column;min-height:100%;padding:8px 20px 24px}
.hq-drawer-top{display:flex;align-items:center;justify-content:space-between;min-height:64px;margin-bottom:6px}
.hq-drawer-top .hq-mark{width:32px;height:32px}
.hq-drawer-top .hq-name{font-size:15px}
.hq-drawer .hq-menu-close{display:flex}
.hq-drawer-links a,.hq-drawer-signin a{display:flex;align-items:center;min-height:56px;border-bottom:1px solid var(--hq-line);color:var(--hq-text);text-decoration:none;font:600 20px/1.25 var(--hq-font)}
.hq-drawer-links a[aria-current="page"]{color:var(--hq-blue-ink)}
.hq-drawer-lbl{margin:26px 0 2px;font:600 12.5px/1.3 var(--hq-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--hq-amber-ink)}
.hq-drawer-signin a{min-height:52px;font-size:17px;color:var(--hq-text-2)}
.hq-drawer-cta{width:100%;margin-top:28px}
html.hq-menu-open{overflow:hidden}
@media (max-width:420px){.hq-drawer{border-left:0}} /* full width: no edge to draw */

/* ---------- footer ---------- */
.hq-foot{background:var(--hq-chrome);border-top:1px solid var(--hq-hair);padding:64px 0 36px;color:var(--hq-text-2);font:400 14.5px/1.55 var(--hq-font)}
.hq-fgrid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr 1.3fr;gap:32px}
.hq-foot .hq-name{color:var(--hq-text-2)}
.hq-ftag{margin:16px 0 0;max-width:260px}
.hq-fcol h3{margin:0 0 14px;font:700 13px/1.2 var(--hq-font);letter-spacing:.1em;text-transform:uppercase;color:var(--hq-text)}
.hq-fcol ul{display:flex;flex-direction:column;gap:10px;margin:0;padding:0;list-style:none}
.hq-foot a{color:var(--hq-text-2);text-decoration:none}
.hq-foot a:hover{color:var(--hq-text)}
.hq-fcontact a{overflow-wrap:anywhere}
.hq-fbot{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;margin-top:48px;padding-top:24px;border-top:1px solid var(--hq-hair);font-size:13.5px}
.hq-flegal a{margin-left:18px}

/* ---------- keyboard focus: one visible ring everywhere in the chrome ---------- */
.hq-skip:focus-visible,.hq-util a:focus-visible,.hq-nav a:focus-visible,.hq-nav button:focus-visible,.hq-drawer a:focus-visible,.hq-drawer button:focus-visible,.hq-foot a:focus-visible,.hq-btn:focus-visible{outline:2px solid var(--hq-blue-ink);outline-offset:3px}
.hq-nav .haul-theme-toggle:focus-visible{box-shadow:none}

/* ---------- responsive ---------- */
@media (max-width:1100px){
  .hq-fgrid{grid-template-columns:1fr 1fr 1fr}
}
/* Below 1080 px the four nav links no longer fit beside the brand and the
   actions (measured: 939 px of content at 1024), so they move into the menu. */
@media (max-width:1080px){
  .hq-links{display:none}
  .hq-actions{margin-left:auto}
  .hq-menu-btn{display:flex}
}
@media (max-width:760px){
  html{scroll-padding-top:72px}
  .hq-wrap{padding:0 20px}
  .hq-util .hq-wrap{justify-content:flex-start;gap:0;height:44px;padding-left:12px;overflow-x:auto;white-space:nowrap;font-size:13px}
  .hq-util a{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;padding:0 8px}
  .hq-util-lbl,.hq-long{display:none}
  .hq-short{display:inline}
  .hq-nav .hq-wrap{height:56px;gap:12px}
  .hq-brand{min-height:44px}
  .hq-nav-cta{display:none}
  .hq-mark{width:32px;height:32px}
  .hq-name{font-size:15px}
  .hq-nav .haul-theme-toggle{width:44px;height:44px;border-radius:11px}
  .hq-menu-btn{width:44px;height:44px;border-radius:11px}
  /* PHONE SCALE (owner 2026-10-01: "all of the clickable buttons are huge"): 48 → 44 px, Apple's own minimum; the CTA 56 → 48 px, 17 → 16 px. */
  .hq-btn{height:48px;padding:0 22px;border-radius:12px;font-size:16px}
  .hq-drawer-links a{min-height:48px;font-size:17px}
  .hq-drawer-signin a{min-height:48px;font-size:16px}
  .hq-fgrid{grid-template-columns:1fr 1fr;gap:28px}
  .hq-fbrand,.hq-fcontact{grid-column:1/-1}
  .hq-fcol ul{gap:0}
  .hq-fcol li a{display:flex;align-items:center;min-height:44px}
  .hq-fbot{flex-direction:column;align-items:flex-start;gap:8px}
  .hq-flegal{display:flex;flex-wrap:wrap;gap:0 2px;margin-left:-8px}
  .hq-flegal a{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;padding:0 8px;margin:0}
}
/* A touch screen wider than a phone (a tablet) still needs finger-sized targets. */
@media (pointer:coarse) and (min-width:761px){
  .hq-util .hq-wrap{height:48px}
  .hq-util a{display:inline-flex;align-items:center;min-height:48px}
  .hq-nav .haul-theme-toggle,.hq-sm{height:48px}
  .hq-nav .haul-theme-toggle{width:48px}
}
@media (prefers-reduced-motion:reduce){
  .hq-btn{transition:none}
  .hq-primary:hover{transform:none}
}