/* HO-39 — shared chrome for every customer-facing page in /site.
   Lives at /assets/ho-common.css via SITE_ASSETS_DIR (see router.py
   /assets/<path:filename> handler). Owns ONLY cross-page primitives
   (brand, nav, hamburger, btn, badge, footer) so the three pages stop
   diverging on header/footer details. Page-specific layout stays in
   each page's own inline <style>. Tokens duplicate the inline :root
   block on purpose — the inline copy is what test_contrast_a11y
   asserts on, and external CSS lets every page render correctly
   before the inline tokens are even parsed. */

:root{
  --bg:#06070d; --ink:#ffffff; --mut:#b6bdd0; --line:#1b1f31;
  --gold:#f5c451; --amber:#f0a13b; --indigo:#7c5cff; --cyan:#5fd0ff;
  --panel:rgba(255,255,255,.035); --glass:rgba(255,255,255,.06);
  /* HO-52: single vertical spacing scale, shared across every chrome
     surface. Before this lived inline in index.html / ceo-report.html
     only — gallery.html and onboarding.html had no scale at all and used
     ad-hoc px (54, 32, 30, 26, 22) which is what QA reported as
     "inconsistent spacing". Each page may still re-declare these in its
     own inline :root (some do, for AAA-contrast test pinning), but the
     authoritative copy lives here. */
  --s-1:8px; --s-2:16px; --s-3:24px; --s-4:32px;
  --s-5:48px; --s-6:64px; --s-7:80px;
}

/* ── Base ──────────────────────────────────────────────────────────── */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);
  font-family:Inter,system-ui,Arial,sans-serif;line-height:1.6;
  overflow-x:hidden;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}

/* ── Shared header / brand / nav ──────────────────────────────────── */
.ho-header{display:flex;align-items:center;justify-content:space-between;
  padding:22px 0;gap:16px}
.ho-brand{display:flex;align-items:center;gap:11px;font-weight:700;
  letter-spacing:.01em;color:var(--ink)}
.ho-brand:hover{color:var(--ink)}
.ho-logo{width:34px;height:34px;flex:0 0 auto}
.ho-nav{display:flex;align-items:center;gap:0}
.ho-nav a{color:var(--mut);margin-left:24px;font-size:14px;
  transition:color .2s}
.ho-nav a:hover{color:var(--ink)}
.ho-nav a.cta{color:#1a1405;
  background:linear-gradient(160deg,var(--gold),var(--amber));
  padding:7px 14px;border-radius:8px;font-weight:700}
.ho-nav a.cta:hover{color:#1a1405;filter:brightness(1.05)}
.ho-nav a.ghost{border:1px solid var(--line);padding:6px 12px;border-radius:8px}
.ho-nav a.ghost:hover{border-color:#33405e;color:var(--ink)}

/* Hamburger — JS-free, checkbox-driven */
.ho-nav-toggle{display:none}
.ho-hamburger{display:none;cursor:pointer;width:38px;height:38px;
  border:1px solid var(--line);border-radius:10px;background:var(--glass);
  align-items:center;justify-content:center}
.ho-hamburger span{display:block;width:18px;height:2px;background:var(--ink);position:relative}
.ho-hamburger span::before,.ho-hamburger span::after{content:"";position:absolute;
  left:0;width:18px;height:2px;background:var(--ink)}
.ho-hamburger span::before{top:-6px}
.ho-hamburger span::after{top:6px}

/* ── Shared buttons ───────────────────────────────────────────────── */
/* HO-52: .ho-btn and the legacy .btn shim resolve to the same selectors.
   Before this, every page (index/gallery/onboarding) shipped its own
   parallel copy of .btn / .btn.p / .btn.s with subtle differences —
   index used :hover, onboarding used :hover:not(:disabled), gallery
   used a different transition list — and QA flagged the resulting
   visual drift as "inconsistent layout". One canonical definition now,
   used by every customer-facing surface. */
.ho-btn,.btn{padding:14px 24px;border-radius:12px;font-weight:700;font-size:15px;
  transition:transform .15s,box-shadow .2s,border-color .2s;
  border:1px solid transparent;cursor:pointer;font-family:inherit;
  pointer-events:auto;position:relative;z-index:2;display:inline-flex;
  align-items:center;justify-content:center;line-height:1}
.ho-btn.p,.btn.p{background:linear-gradient(160deg,var(--gold),var(--amber));
  color:#1a1405;box-shadow:0 10px 30px -10px var(--amber)}
.ho-btn.p:hover:not(:disabled),.btn.p:hover:not(:disabled){transform:translateY(-2px)}
.ho-btn.s,.btn.s{border-color:var(--line);background:var(--glass);color:var(--ink)}
.ho-btn.s:hover:not(:disabled),.btn.s:hover:not(:disabled){border-color:#33405e}
.ho-btn:disabled,.btn:disabled{opacity:.55;cursor:not-allowed}

/* ── Reduced-motion catch-all ─────────────────────────────────────
   HO-64: the decorative ambient backdrop layer (the old radial-blur
   pseudo-element pair plus its grid overlay) and the opt-in toggle UI
   are fully retired. QA kept flagging the layer as potentially
   distracting / seizure-triggering even after it was made opt-in and
   the drift animation was removed. With the layer gone there is
   nothing decorative to strobe or move on any customer-facing page.
   HO-60: the W3C-recommended universal-selector reduced-motion
   override below zeroes every animation-duration and transition-
   duration in one rule, so the OS reduced-motion preference is honored
   for every present and future selector. The named-selector list is
   kept for auditability and as belt-and-braces for browsers that
   mishandle !important on shorthand animation. */
@media (prefers-reduced-motion:reduce){
  .pulse,.edge,.track{animation:none}
  *,*::before,*::after{
    animation-duration:0.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:0.001ms !important;
    scroll-behavior:auto !important;
  }
}

/* ── Shared heading typography ────────────────────────────────────── */
/* HO-53: Every customer-facing page (index, gallery, onboarding,
   ceo-report) shipped its own inline `h1{font-family:Fraunces,Georgia,
   serif;font-weight:600;letter-spacing:-.015em}` and `h2{font-family:
   Fraunces,serif;font-weight:600;letter-spacing:-.01em}` block. The
   font-family / weight / tracking trio is brand chrome — identical on
   every page — but each page redeclared it, so a tweak on one surface
   silently diverged from the others. QA caught the drift as
   "inconsistent layout and spacing due to parallel copies of chrome
   rules." Canonical copy lives here; pages keep only their page-
   specific font-size, line-height and margin (the landing hero wants
   72px, ceo-report wants 60px, onboarding wants 46px — that variation
   is intentional). */
h1{font-family:Fraunces,Georgia,serif;font-weight:600;letter-spacing:-.015em}
h2,h3{font-family:Fraunces,serif;font-weight:600;letter-spacing:-.01em}

/* ── Shared status badge / pill ───────────────────────────────────── */
.ho-badge{display:inline-flex;align-items:center;gap:8px;
  border:1px solid var(--line);background:var(--glass);
  border-radius:999px;padding:7px 14px;font-size:12.5px;
  color:#cdd2e6;letter-spacing:.04em}
.ho-dot{width:7px;height:7px;border-radius:50%;background:var(--gold);
  box-shadow:0 0 10px var(--gold)}

/* ── Shared footer ────────────────────────────────────────────────── */
.ho-footer{border-top:1px solid var(--line);padding:36px 0 28px;
  color:var(--mut);font-size:13px;display:flex;justify-content:space-between;
  flex-wrap:wrap;gap:10px;margin-top:48px}

/* ── Mobile breakpoints (mirrors index.html's hamburger contract) ─── */
@media(max-width:860px){
  .ho-header{position:relative;flex-wrap:wrap}
  .ho-hamburger{display:flex}
  .ho-nav{position:absolute;top:72px;right:0;left:0;flex-direction:column;
    align-items:stretch;gap:8px;background:#0e1020;border:1px solid var(--line);
    border-radius:14px;padding:14px;display:none;z-index:20;
    box-shadow:0 12px 30px rgba(0,0,0,.4)}
  .ho-nav a{margin-left:0;padding:10px 12px;border-radius:8px;font-size:15px}
  .ho-nav a:hover{background:var(--glass);color:var(--ink)}
  .ho-nav-toggle:checked ~ .ho-nav{display:flex}
}
@media(max-width:480px){
  .ho-header{padding:18px 0}
  .ho-nav{top:68px;right:0;left:0}
}
@media (prefers-reduced-motion:reduce){
  .ho-btn,.ho-nav a{transition:none}
}