/* ============================================================
   HGM REFINED — minimal design system v1
   Blended from the jasongibson.dev conversion: same structure,
   refined minimal aesthetic. Sans-only (Inter, self-hosted),
   Font Awesome icons (self-hosted), Light / Dark / Agentic themes
   with accent + density customization.
   Loaded AFTER the legacy stylesheets; wins by source order.
   ============================================================ */
@import url('/assets/fonts/inter.css');
@import url('/assets/fontawesome/css/all.min.css');

/* ---------- Sans-only font stacks ---------- */
:root {
  --sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "Inter", ui-sans-serif, system-ui, sans-serif; /* sans-only: labels use Inter */
  --radius: 10px;
  --radius-sm: 8px;
  --shadow-sm: 0 1px 2px rgba(16, 18, 16, 0.05);
  --shadow-md: 0 4px 16px rgba(16, 18, 16, 0.07);
  --shadow-lg: 0 12px 40px rgba(16, 18, 16, 0.10);
  --font-feature: "cv11", "ss01";
}

/* ============================================================
   THEME TOKENS
   ============================================================ */
/* ---------- Light (default) : refined paper minimal ---------- */
:root,
[data-theme="light"] {
  --paper: #fbfbfa;
  --ink: #161616;
  --muted: #62666a;
  --faint: #9aa0a8;
  --soft: #f4f4f2;
  --warm: #f4f4f2;
  --card: #ffffff;
  --line: #e0e1df;
  --line-soft: #eceeed;
  --accent: #2f73cf;
  --accent-deep: #245ea9;
  --accent-wash: #eef4fd;
  --accent-ink: #ffffff;
  --green: #5aab7d;
  --green-deep: #3f8a5f;
  --gold: #a97c1f;
  --glow: none;
  --grid-line: rgba(22, 22, 22, 0.035);
  color-scheme: light;
}

/* ---------- Dark : deep neutral ---------- */
[data-theme="dark"] {
  --paper: #0e0f0e;
  --ink: #ececea;
  --muted: #a3a8a3;
  --faint: #6f746f;
  --soft: #151715;
  --warm: #151715;
  --card: #171918;
  --line: #262826;
  --line-soft: #1e201e;
  --accent: #6ea8ff;
  --accent-deep: #9cc2ff;
  --accent-wash: #16233a;
  --accent-ink: #0b1220;
  --green: #6fc493;
  --green-deep: #8fd6ab;
  --gold: #d3a94f;
  --glow: none;
  --grid-line: rgba(236, 236, 234, 0.04);
  color-scheme: dark;
}

/* ---------- Agentic : terminal intelligence ---------- */
[data-theme="agentic"] {
  --paper: #060907;
  --ink: #d9ffe4;
  --muted: #8fae97;
  --faint: #5a7261;
  --soft: #0b100c;
  --warm: #0b100c;
  --card: #0c120d;
  --line: #1c2b1f;
  --line-soft: #14201a;
  --accent: #00e676;
  --accent-deep: #4dff9d;
  --accent-wash: #0a1f14;
  --accent-ink: #04120a;
  --green: #00e676;
  --green-deep: #4dff9d;
  --gold: #ffd166;
  --glow: 0 0 24px rgba(0, 230, 118, 0.18);
  --grid-line: rgba(0, 230, 118, 0.05);
  color-scheme: dark;
}

/* ---------- Accent customizations (any theme) ---------- */
[data-accent="green"]  { --accent: #3fa968; --accent-deep: #2f8a53; --accent-wash: #ebf7f0; --accent-ink: #ffffff; }
[data-theme="dark"][data-accent="green"],
[data-theme="agentic"][data-accent="green"] { --accent: #4ade80; --accent-deep: #86efac; --accent-wash: #0d2117; --accent-ink: #04120a; }
[data-accent="violet"] { --accent: #7c5cff; --accent-deep: #6440e8; --accent-wash: #f1edff; --accent-ink: #ffffff; }
[data-theme="dark"][data-accent="violet"],
[data-theme="agentic"][data-accent="violet"] { --accent: #a78bfa; --accent-deep: #c4b5fd; --accent-wash: #1d1640; --accent-ink: #120c2e; }
[data-accent="amber"]  { --accent: #c47b12; --accent-deep: #a3650e; --accent-wash: #fdf3e3; --accent-ink: #ffffff; }
[data-theme="dark"][data-accent="amber"],
[data-theme="agentic"][data-accent="amber"] { --accent: #fbbf24; --accent-deep: #fcd34d; --accent-wash: #2a1f08; --accent-ink: #1d1404; }
/* keep legacy accent aliases in sync */
:root, [data-theme="light"], [data-theme="dark"], [data-theme="agentic"] {
  --blue: var(--accent);
  --blue-deep: var(--accent-deep);
  --blue-wash: var(--accent-wash);
  --green-deep: var(--accent-deep);
}

/* ---------- Density ---------- */
[data-density="compact"] { --pad-card: 16px; --pad-section: 48px; --gap: 10px; }
:root { --pad-card: 24px; --pad-section: 84px; --gap: 16px; }

/* ============================================================
   REFINED BASE
   ============================================================ */
html { font-feature-settings: var(--font-feature); }
body {
  font-family: var(--sans);
  background: var(--paper);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
}
/* agentic grid backdrop */
[data-theme="agentic"] body {
  background-image:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: 44px 44px;
}
::selection { background: var(--accent); color: var(--accent-ink); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }

h1, h2, h3, h4 { font-family: var(--sans); letter-spacing: -0.022em; text-wrap: balance; }
h1 { font-weight: 750; }
h2, h3 { font-weight: 700; }

/* kickers / eyebrows: refined sans labels (was mono) */
.section-kicker, .eyebrow, .reviews-label, .mega-menu__heading,
.graph-card__flag, .graph-card__number, .product-nav__series, .product-footer {
  font-family: var(--sans) !important;
  font-size: 11.5px !important;
  font-weight: 650;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--muted);
}
[data-theme="agentic"] .section-kicker::before,
[data-theme="agentic"] .eyebrow::before { content: "▸ "; color: var(--accent); }

/* links */
a { text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--accent-deep); }

/* ============================================================
   FONT AWESOME INTEGRATION
   ============================================================ */
.fa-solid, .fa-regular, .fa-brands { font-size: 0.92em; line-height: 1; vertical-align: -0.06em; }
.menu-button .fa-solid, .booking-button .fa-solid, .modal-close .fa-solid { font-size: 0.85em; }
.graph-card .fa-solid { margin-left: auto; color: var(--faint); transition: transform 0.18s ease, color 0.18s ease; }
.graph-card:hover .fa-solid { transform: translate(2px, -2px); color: var(--accent); }

/* ============================================================
   REFINED COMPONENTS
   ============================================================ */
/* topbar */
.topbar {
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  background: color-mix(in srgb, var(--paper) 82%, transparent);
  border-bottom: 1px solid var(--line-soft);
}
.site-shell { border-top: 0; }
.wordmark__img { border-radius: var(--radius-sm); }
.desktop-nav a, .desktop-nav .nav-drop > a {
  font-weight: 550; font-size: 14.5px; color: var(--muted);
  padding: 8px 10px; border-radius: var(--radius-sm);
}
.desktop-nav a:hover { color: var(--ink); background: var(--soft); text-decoration: none; }
.nav-drop button { color: var(--faint); }
.nav-drop button:hover { color: var(--accent); }

/* buttons */
.menu-button, .booking-button, .light-cta, .btn, .mobile-drawer__cta {
  border-radius: var(--radius-sm);
  font-weight: 600;
  transition: transform 0.15s ease, box-shadow 0.2s ease, background 0.2s ease;
}
.booking-button, .light-cta, .btn--primary {
  background: var(--ink); color: var(--paper);
  box-shadow: var(--shadow-sm);
}
.booking-button:hover, .light-cta:hover, .btn--primary:hover {
  transform: translateY(-1px); box-shadow: var(--shadow-md); color: var(--paper); text-decoration: none;
}
[data-theme="agentic"] .booking-button,
[data-theme="agentic"] .light-cta { background: var(--accent); color: var(--accent-ink); box-shadow: var(--glow); }
.menu-button { border: 1px solid var(--line); background: var(--card); }
.menu-button:hover { border-color: var(--accent); color: var(--accent-deep); }

/* cards */
.graph-card, .quote-card, .tool-card, .feature-card {
  border-radius: var(--radius);
  background: var(--card);
  box-shadow: var(--shadow-sm);
  transition: transform 0.18s ease, box-shadow 0.22s ease, border-color 0.18s ease;
}
.graph-card:hover, .quote-card:hover {
  transform: translateY(-2px); box-shadow: var(--shadow-md); border-color: var(--accent);
}
[data-theme="agentic"] .graph-card:hover { box-shadow: var(--glow); }

/* forms */
input, textarea, select {
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  background: var(--card); color: var(--ink);
  padding: 12px 14px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
input:focus, textarea:focus, select:focus {
  border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-wash); outline: none;
}
button[type="submit"], input[type="submit"] {
  background: var(--accent); color: var(--accent-ink);
  border-radius: var(--radius-sm); font-weight: 650; padding: 13px 22px; border: 0;
}
button[type="submit"]:hover, input[type="submit"]:hover { filter: brightness(1.06); transform: translateY(-1px); }

/* overlays */
.mega-menu__panel, .graph-menu {
  border-radius: calc(var(--radius) + 4px);
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--line);
  background: var(--card);
}
[data-theme="agentic"] .mega-menu__panel, [data-theme="agentic"] .graph-menu { box-shadow: var(--glow), var(--shadow-lg); }
.modal-close, .mobile-drawer__close { border-radius: var(--radius-sm); }
.mobile-drawer { border-radius: 0 var(--radius) var(--radius) 0; }

/* footer */
footer, .site-footer { border-top: 1px solid var(--line-soft); }
footer a:hover { color: var(--accent-deep); }

/* tables */
.compare-table { border-radius: var(--radius); overflow: hidden; }

/* images */
img { border-radius: 2px; }
.graph-card__img { border-radius: 0; }

/* ============================================================
   THEME SWITCHER (injected by theme.js)
   ============================================================ */
.hgm-theme {
  display: inline-flex; align-items: center; gap: 2px;
  border: 1px solid var(--line); border-radius: 999px;
  background: var(--card); padding: 3px;
  box-shadow: var(--shadow-sm);
}
.hgm-theme button {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 999px;
  color: var(--muted); font-size: 13px;
}
.hgm-theme button:hover { color: var(--ink); background: var(--soft); }
.hgm-theme button[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
[data-theme="agentic"] .hgm-theme button[aria-pressed="true"] { background: var(--accent); color: var(--accent-ink); }
.hgm-theme__pop {
  position: absolute; top: calc(100% + 10px); right: 0; z-index: 90;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow-lg); padding: 16px; width: 230px;
}
.hgm-theme__pop p { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); margin: 0 0 10px; }
.hgm-theme__swatches { display: flex; gap: 8px; margin-bottom: 14px; }
.hgm-theme__swatches button {
  width: 28px; height: 28px; border-radius: 999px; border: 2px solid transparent;
  box-shadow: inset 0 0 0 1px var(--line);
}
.hgm-theme__swatches button[aria-pressed="true"] { border-color: var(--ink); }
.hgm-theme__density { display: flex; gap: 8px; }
.hgm-theme__density button {
  flex: 1; font-size: 12.5px; font-weight: 600; padding: 8px;
  border: 1px solid var(--line); border-radius: var(--radius-sm); color: var(--muted);
}
.hgm-theme__density button[aria-pressed="true"] { border-color: var(--accent); color: var(--accent-deep); background: var(--accent-wash); }
.hgm-theme__wrap { position: relative; }

/* compact density */
[data-density="compact"] .graph-card, [data-density="compact"] .quote-card { padding: 16px; }
[data-density="compact"] section, [data-density="compact"] .compare-section { padding-top: 48px; padding-bottom: 48px; }

/* reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* ==========================================================================
   Signal House borrow — brass/ink console language (2026-10-02)
   Borrowed patterns: ink bands, brass accent, console-card consent,
   trust strip, numbered eyebrows, audience cards, CTA glow,
   full-width mega menu dropdown.
   ========================================================================== */

/* ---------- Brass accent (5th accent) ---------- */
[data-accent="brass"] {
  --accent: #b58a50;
  --accent-deep: #8f6b3a;
  --accent-ink: #fffdf8;
  --accent-wash: rgba(181, 138, 80, 0.12);
}
[data-theme="dark"][data-accent="brass"],
[data-theme="agentic"][data-accent="brass"] {
  --accent: #d3a86a;
  --accent-deep: #e0bc80;
  --accent-ink: #171206;
  --accent-wash: rgba(211, 168, 106, 0.14);
}

/* ---------- Ink band: full-bleed dark sections ---------- */
.ink-band {
  background: #1f201d;
  color: #f3efe6;
}
.ink-band h1, .ink-band h2, .ink-band h3 { color: #f3efe6; }
.ink-band .lede { color: rgba(243, 239, 230, 0.72); }
.ink-band .section-kicker { color: rgba(243, 239, 230, 0.6); }
.ink-band .kicker-num { color: #b58a50; }
.ink-band .text-link { color: #f3efe6; }
.ink-band .console { background: rgba(243, 239, 230, 0.05); border-color: rgba(243, 239, 230, 0.18); }
.ink-band .console__head { background: transparent; color: rgba(243, 239, 230, 0.55); border-color: rgba(243, 239, 230, 0.14); }
.ink-band .console__col h3 { color: #f3efe6; }
.ink-band .console__col p, .ink-band .console__list li { color: rgba(243, 239, 230, 0.68); }
.ink-band .console__list .mono { color: #b58a50; }
.ink-band .light-cta { background: #f3efe6; color: #1f201d; }
.ink-band .light-cta:hover { background: #b58a50; color: #1f201d; }
.console-section.ink-band { max-width: none; border-top: none; padding: 0; }
.console-band__inner { max-width: var(--maxw, 1200px); margin: 0 auto; padding: 100px 30px; }
@media (max-width: 700px) { .console-band__inner { padding: 64px 24px; } }
[data-theme="dark"] .ink-band { background: #131412; }
[data-theme="agentic"] .ink-band { background: #15161a; }

/* ---------- Numbered eyebrows ---------- */
.section-kicker {
  display: flex; align-items: center; gap: 10px; margin-bottom: 18px;
  font-family: var(--mono); font-size: 11px; font-weight: 500;
  letter-spacing: 0.1em; text-transform: uppercase; line-height: 1.5;
  color: var(--muted);
}
.kicker-num { color: var(--accent-deep, var(--accent)); font-weight: 600; }
.kicker-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); display: inline-block; }

/* ---------- Trust strip ---------- */
.trust-strip { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 22px 0; }
.trust-strip__inner {
  max-width: var(--page-width, 1200px); margin: 0 auto; padding: 0 30px;
  display: flex; align-items: center; gap: 28px; flex-wrap: wrap;
}
.trust-strip__label {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--muted); white-space: nowrap;
}
.trust-strip__logos { display: flex; align-items: center; gap: 26px; flex-wrap: wrap; }
.trust-strip__logos span {
  font-size: 15px; font-weight: 600; letter-spacing: -0.02em; color: var(--ink);
  opacity: 0.62; transition: opacity 0.2s ease;
}
.trust-strip__logos span:hover { opacity: 1; }
.trust-strip__logos .logo-spaced { font-size: 11px; letter-spacing: 0.14em; font-weight: 500; }

/* ---------- Audience section (who it's for) ---------- */
.audience-section { max-width: var(--maxw, 1200px); margin: 0 auto; padding: 84px 0; border-top: 1px solid var(--line); }
.audience-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 40px; }
.audience-card {
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--card); padding: 26px 24px; display: flex;
  flex-direction: column; gap: 10px; min-height: 210px;
}
.audience-card .mono { font-family: var(--mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent-deep, var(--accent)); }
.audience-card h3 { margin: 0; font-size: 20px; letter-spacing: -0.02em; }
.audience-card p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.6; }
.audience-card:nth-child(1) { border-top: 3px solid #b58a50; }
.audience-card:nth-child(2) { border-top: 3px solid var(--ink); }
.audience-card:nth-child(3) { border-top: 3px solid #d8c8ae; }
[data-theme="dark"] .audience-card:nth-child(2), [data-theme="agentic"] .audience-card:nth-child(2) { border-top-color: #f3efe6; }
@media (max-width: 860px) { .audience-grid { grid-template-columns: 1fr; } .audience-card { min-height: 0; } }

/* ---------- Quote card color variants ---------- */
.quote-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.quote-card--brass { background: #b58a50; color: #1f201d; }
.quote-card--brass .quote-mark, .quote-card--brass .quote-name, .quote-card--brass blockquote { color: #1f201d; }
.quote-card--brass blockquote, .quote-card--ink blockquote { background: transparent; }
.quote-card--brass .quote-role { color: rgba(31, 32, 29, 0.72); }
.quote-card--ink { background: var(--ink); color: var(--paper); }
.quote-card--ink .quote-mark, .quote-card--ink .quote-name, .quote-card--ink blockquote { color: var(--paper); }
.quote-card--ink .quote-role { color: var(--muted); }
@media (max-width: 860px) { .quote-grid { grid-template-columns: 1fr; } }

/* ---------- CTA glow ---------- */
.contact-strip.ink-band { position: relative; overflow: hidden; max-width: none; border-top: none; padding: 0; }
.contact-strip.ink-band::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(600px 320px at 50% 110%, rgba(181, 138, 80, 0.28), transparent 70%);
}
.contact-strip__inner {
  max-width: var(--maxw, 1200px); margin: 0 auto; padding: 88px 30px;
  display: grid; grid-template-columns: 1fr auto; gap: 32px; align-items: center;
  position: relative; z-index: 1;
}
.contact-strip__inner > a {
  display: inline-flex; align-items: center; gap: 8px; min-height: 52px;
  padding: 0 24px; background: #b58a50; color: #1f201d; border-radius: var(--radius-sm);
  font-size: 15px; font-weight: 600; text-decoration: none; white-space: nowrap;
}
.contact-strip__inner > a:hover { background: #f3efe6; color: #1f201d; }
.contact-strip.ink-band .contact-note { color: rgba(243, 239, 230, 0.55); }
@media (max-width: 700px) { .contact-strip__inner { grid-template-columns: 1fr; padding: 64px 24px; } }

/* ---------- Console-card cookie consent ---------- */
.cookie-bar {
  left: auto; right: 20px; bottom: 20px; max-width: 430px;
  background: var(--card); color: var(--ink);
  border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow-lg, 0 18px 48px rgba(0,0,0,0.18));
  padding: 0; flex-direction: column; align-items: stretch; gap: 0;
  font-size: 13.5px;
}
.cookie-copy { flex-direction: column; align-items: stretch; gap: 8px; padding: 18px 18px 0; }
.cookie-label {
  font-family: var(--mono); font-size: 10px; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--accent-deep, var(--accent)); margin: 0;
  display: flex; align-items: center; gap: 8px;
}
.cookie-label::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); display: inline-block; }
.cookie-copy p { margin: 0; line-height: 1.55; color: var(--ink); font-size: 13.5px; }
.cookie-copy a { color: var(--accent-deep, var(--accent)); font-weight: 600; }
.cookie-bar .cookie-actions { display: contents; }
.cookie-bar > button[data-consent] { margin: 0 18px; }
.cookie-bar > button[data-consent="reject"] { margin-bottom: 10px; }
.cookie-bar > button[data-consent="accept"] { margin-bottom: 18px; }
.cookie-bar button, .cookie-bar .cookie-btn {
  flex: 1; border-radius: var(--radius-sm); font-size: 13.5px; font-weight: 600;
  padding: 11px 14px; min-height: 46px; transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}
.cookie-bar [data-consent="accept"] { background: var(--accent); color: var(--accent-ink); border-color: transparent; }
.cookie-bar [data-consent="accept"]:hover { background: var(--accent-deep); }
.cookie-bar [data-consent="reject"] { background: transparent; color: var(--ink); border-color: var(--line); }
.cookie-bar [data-consent="reject"]:hover { border-color: var(--accent); color: var(--accent-deep, var(--accent)); }
.cookie-bar button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (max-width: 520px) {
  .cookie-bar { left: 12px; right: 12px; bottom: 12px; max-width: none; }
}

/* ---------- Full-width mega menu dropdown overlay ---------- */
body.modal-open { overflow: hidden; }
.mega-menu {
  inset: auto 0 0 0; top: 0; bottom: auto;
  background: transparent; border-top: none; overflow: visible;
}
.mega-menu::before {
  content: ""; position: fixed; inset: 0; z-index: -1;
  background: rgba(18, 19, 17, 0.45); backdrop-filter: blur(2px);
  animation: overlay-in 0.18s ease-out;
}
.mega-menu__panel {
  max-width: none; margin: 0; padding: 0;
  background: #1f201d; color: #f3efe6;
  border-bottom: 1px solid rgba(243, 239, 230, 0.16);
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.35);
  padding-top: var(--header-h, 76px);
}
[data-theme="dark"] .mega-menu__panel { background: #131412; }
[data-theme="agentic"] .mega-menu__panel { background: #15161a; }
.mega-menu__inner { max-width: 1200px; margin: 0 auto; padding: 34px 30px 44px; }
.mega-menu__top { border-bottom: 1px solid rgba(243, 239, 230, 0.14); padding-bottom: 22px; }
.mega-menu__top h2 { color: #f3efe6; font-size: clamp(28px, 3.4vw, 42px); }
.mega-menu__top .section-kicker { color: rgba(243, 239, 230, 0.6); }
.mega-menu__intro { color: rgba(243, 239, 230, 0.66) !important; }
.mega-menu__heading { color: #b58a50 !important; }
.modal-close { color: #f3efe6 !important; }
.mega-menu__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 26px; padding-top: 28px; }
.mega-menu__col { border-top: 1px solid rgba(243, 239, 230, 0.2) !important; padding-top: 18px; }
.mega-menu__icon { display: block; font-size: 20px; color: #b58a50; margin-bottom: 12px; }
.mega-menu__grid a { color: rgba(243, 239, 230, 0.8); border-top-color: rgba(243, 239, 230, 0.12); font-size: 14.5px; }
.mega-menu__grid a:hover { color: #f3efe6; }
.mega-menu__grid a .fa-solid, .mega-menu__grid a i { color: #b58a50; font-size: 12px; }
.mega-menu__quicklinks { display: flex; gap: 10px; flex-wrap: wrap; padding-top: 22px; }
.mega-menu__col a { color: rgba(243, 239, 230, 0.78); }
.mega-menu__col a:hover { color: #f3efe6; }
.mega-menu__col a strong { color: #f3efe6; }
.mega-menu__col .mega-menu__icon { color: #b58a50; }
.mega-menu__quicklink { background: rgba(243, 239, 230, 0.06) !important; border-color: rgba(243, 239, 230, 0.18) !important; }
.mega-menu__quicklink small { color: rgba(243, 239, 230, 0.55) !important; }
.mega-menu__quicklink strong { color: #f3efe6 !important; }
.mega-menu__quicklink:hover { border-color: #b58a50 !important; background: rgba(181, 138, 80, 0.12) !important; }
.mega-menu__cta {
  margin-top: 28px; padding-top: 24px; border-top: 1px solid rgba(243, 239, 230, 0.14);
  display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap;
}
.mega-menu__cta p { margin: 0; color: rgba(243, 239, 230, 0.7); font-size: 14px; }
.mega-menu__cta .light-cta { background: #b58a50; color: #1f201d; border-radius: var(--radius-sm); }
.mega-menu__cta .light-cta:hover { background: #f3efe6; }
@media (max-width: 900px) { .mega-menu__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .mega-menu__grid { grid-template-columns: 1fr; } }

/* ==========================================================================
   Borrowed from the ultra-clean concept (2026-10-03)
   Floating pill header, hero entrance choreography, series/vault hovers.
   Adapted to staged tokens: Inter, var(--accent) system, theme-aware.
   ========================================================================== */

/* ---------- Floating glass pill topbar ---------- */
.topbar, .topbar--page {
  position: sticky;
  top: 12px;
  z-index: 90;
  width: min(1440px, calc(100% - 32px));
  height: 68px;
  margin: 12px auto 0;
  padding: 0 24px 0 28px;
  border: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
  border-radius: 999px;
  box-shadow: 0 8px 32px rgba(11, 14, 19, 0.06);
  transition: box-shadow .4s ease;
}
.topbar:hover, .topbar--page:hover { box-shadow: 0 12px 40px rgba(11, 14, 19, 0.10); }
@media (max-width: 760px) {
  .topbar, .topbar--page {
    top: 8px;
    width: calc(100% - 24px);
    height: 60px;
    margin-top: 8px;
    padding: 0 16px;
    border-radius: 18px;
  }
}

/* ---------- Hero entrance choreography ---------- */
@keyframes hgm-fadeUp {
  from { opacity: 0; transform: translateY(24px); }
  to { opacity: 1; transform: translateY(0); }
}
.home-hero .eyebrow { animation: hgm-fadeUp .8s cubic-bezier(.16, 1, .3, 1) .1s both; }
.home-hero h1 { animation: hgm-fadeUp 1s cubic-bezier(.16, 1, .3, 1) .2s both; }
.home-hero .lede { animation: hgm-fadeUp 1s cubic-bezier(.16, 1, .3, 1) .35s both; }
.home-hero .hero-actions { animation: hgm-fadeUp 1s cubic-bezier(.16, 1, .3, 1) .5s both; }
.home-hero .home-status { animation: hgm-fadeUp 1s cubic-bezier(.16, 1, .3, 1) .55s both; }
.home-hero .audit-shell { animation: hgm-fadeUp 1.1s cubic-bezier(.16, 1, .3, 1) .65s both; }
@media (prefers-reduced-motion: reduce) {
  .home-hero .eyebrow, .home-hero h1, .home-hero .lede,
  .home-hero .hero-actions, .home-hero .home-status, .home-hero .audit-shell {
    animation: none;
  }
}

/* ---------- Series row hover microinteractions ---------- */
.series-row { position: relative; overflow: hidden; transition: padding-left .5s cubic-bezier(.16, 1, .3, 1); }
.series-row::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--accent);
  transform: scaleY(0);
  transition: transform .5s cubic-bezier(.16, 1, .3, 1);
}
.series-row:hover { padding-left: 28px; }
.series-row:hover::before { transform: scaleY(1); }
.series-row:hover .series-row__name { color: var(--accent-deep); }
.series-row__arrow { transition: transform .4s cubic-bezier(.16, 1, .3, 1), color .3s ease; }
.series-row:hover .series-row__arrow { color: var(--accent); transform: translate(6px, -6px); }

/* ---------- Vault card glow ---------- */
.vault-card { position: relative; overflow: hidden; }
.vault-card::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--accent) 10%, transparent), transparent 55%);
  opacity: 0;
  transition: opacity .5s ease;
  pointer-events: none;
}
.vault-card:hover::after { opacity: 1; }

/* ---------- Tools mega menu: split layout + marketplace banners ---------- */
.mega-menu__panel { max-height: calc(100vh - 48px); overflow-y: auto; }
.mega-menu__split { display: grid; grid-template-columns: 1fr 1fr; padding-top: 28px; }
.mega-menu__side { padding: 22px 32px 10px; border-top: 1px solid rgba(243, 239, 230, 0.2); }
.mega-menu__side + .mega-menu__side { border-left: 1px solid rgba(243, 239, 230, 0.14); }
.mega-menu__side .mega-menu__intro { margin: 6px 0 0; }
.mega-menu__side nav { display: grid; margin-top: 12px; }
.mega-menu__side nav a {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 0;
  border-top: 1px solid rgba(243, 239, 230, 0.08);
  color: rgba(243, 239, 230, 0.82);
  text-decoration: none;
  transition: color .2s ease, padding-left .25s ease;
}
.mega-menu__side nav a:first-child { border-top: 0; }
.mega-menu__side nav a:hover { color: #f3efe6; padding-left: 6px; }
.mega-menu__side nav a > i { color: #b58a50; font-size: 14px; width: 20px; text-align: center; flex: none; }
.mega-menu__side nav a span { display: grid; gap: 2px; flex: 1; }
.mega-menu__side nav a strong { font-size: 14.5px; font-weight: 600; }
.mega-menu__side nav a small { font-size: 12.5px; color: rgba(243, 239, 230, 0.55); }
.mega-menu__side nav a > .fa-solid:last-child,
.mega-menu__side nav a > i:last-child { color: #b58a50; font-size: 12px; width: auto; }
.mega-menu__banner {
  margin-top: 18px;
  padding: 18px 20px;
  border: 1px solid rgba(181, 138, 80, 0.45);
  border-radius: 12px;
  background: rgba(181, 138, 80, 0.08);
}
.mega-menu__banner p { margin: 0 0 10px; color: rgba(243, 239, 230, 0.78); font-size: 13.5px; }
.mega-menu__banner a {
  display: inline-flex; align-items: center; gap: 8px;
  color: #d3a86a; font-weight: 600; font-size: 14px; text-decoration: none;
}
.mega-menu__banner a:hover { color: #f3efe6; }
@media (max-width: 760px) {
  .mega-menu__split { grid-template-columns: 1fr; }
  .mega-menu__side { padding-left: 0; padding-right: 0; }
  .mega-menu__side + .mega-menu__side { border-left: 0; border-top: 1px solid rgba(243, 239, 230, 0.14); margin-top: 26px; }
}

/* ---------- Footer signup gleam card ---------- */
@property --gleam-angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}
.footer-signup {
  position: relative;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--card);
  padding: 30px 28px;
  transition: transform .55s cubic-bezier(.16, 1, .3, 1),
              box-shadow .55s cubic-bezier(.16, 1, .3, 1),
              border-color .4s ease;
}
/* shiny gleam traveling around the border */
.footer-signup::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 2px;
  background: conic-gradient(from var(--gleam-angle),
    transparent 0deg, transparent 248deg,
    color-mix(in srgb, var(--accent) 60%, transparent) 298deg,
    #ffffff 328deg,
    color-mix(in srgb, var(--accent) 60%, transparent) 352deg,
    transparent 360deg);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
  opacity: 0;
  transition: opacity .45s ease;
  pointer-events: none;
}
/* warm wash lighting the card interior */
.footer-signup::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(120% 90% at 50% 0%,
    color-mix(in srgb, var(--accent) 16%, transparent), transparent 62%);
  opacity: 0;
  transition: opacity .55s ease;
  pointer-events: none;
}
.footer-signup:hover {
  transform: translateY(-5px);
  border-color: color-mix(in srgb, var(--accent) 45%, var(--line));
  box-shadow: 0 28px 64px rgba(11, 14, 19, 0.14),
              0 0 56px color-mix(in srgb, var(--accent) 22%, transparent);
}
.footer-signup:hover::before { opacity: 1; animation: gleam-spin 2.8s linear infinite; }
.footer-signup:hover::after { opacity: 1; }
@keyframes gleam-spin { to { --gleam-angle: 360deg; } }
@media (prefers-reduced-motion: reduce) {
  .footer-signup { transition: none; }
  .footer-signup:hover { transform: none; }
  .footer-signup:hover::before { animation: none; opacity: 1; }
}

/* ==========================================================================
   Nav elevation + traveling border light, menu hovers, mega menu easing
   ========================================================================== */

/* ---------- Raised nav with traveling border light ---------- */
.topbar, .topbar--page {
  box-shadow: 0 18px 50px rgba(11, 14, 19, 0.13), 0 2px 6px rgba(11, 14, 19, 0.06);
}
.topbar:hover, .topbar--page:hover {
  box-shadow: 0 26px 70px rgba(11, 14, 19, 0.18),
              0 0 44px color-mix(in srgb, var(--accent) 14%, transparent);
}
.topbar::before, .topbar--page::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1.5px;
  background: conic-gradient(from var(--gleam-angle),
    transparent 0deg, transparent 312deg,
    color-mix(in srgb, var(--accent) 70%, transparent) 334deg,
    #ffffff 346deg,
    transparent 360deg);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
  opacity: .5;
  animation: gleam-spin 9s linear infinite;
  pointer-events: none;
  transition: opacity .4s ease;
}
.topbar:hover::before, .topbar--page:hover::before { opacity: 1; animation-duration: 4s; }

/* ---------- Menu item hover: accent underline sweep ---------- */
.desktop-nav a, .desktop-nav .nav-drop > a {
  position: relative;
  transition: color .3s cubic-bezier(.16, 1, .3, 1), background .3s ease;
}
.desktop-nav a::after, .desktop-nav .nav-drop > a::after {
  content: '';
  position: absolute;
  left: 10px; right: 10px; bottom: 5px;
  height: 2px;
  border-radius: 2px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .45s cubic-bezier(.16, 1, .3, 1);
}
.desktop-nav a:hover, .desktop-nav .nav-drop > a:hover {
  color: var(--accent-deep);
  background: transparent;
}
.desktop-nav a:hover::after, .desktop-nav .nav-drop > a:hover::after { transform: scaleX(1); }
.nav-drop button { transition: color .3s ease; }
.nav-drop button small { display: inline-block; transition: transform .4s cubic-bezier(.16, 1, .3, 1); }
.nav-drop button:hover { color: var(--accent); }
.nav-drop button:hover small { transform: rotate(90deg); }

/* ---------- Mega menu eased open / close ---------- */
.mega-menu, .graph-menu {
  animation: mega-in .5s cubic-bezier(.16, 1, .3, 1) both;
}
@keyframes mega-in {
  from { opacity: 0; transform: translateY(-18px); }
  to { opacity: 1; transform: translateY(0); }
}
.mega-menu.is-closing, .graph-menu.is-closing {
  animation: none;
  transition: opacity .28s ease, transform .28s cubic-bezier(.4, 0, 1, 1);
  opacity: 0;
  transform: translateY(-12px);
  pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
  .mega-menu, .graph-menu { animation: none; }
  .topbar::before, .topbar--page::before { animation: none; }
  .desktop-nav a::after, .desktop-nav .nav-drop > a::after { transition: none; }
}

/* ==========================================================================
   Ultra-clean micro-interactions (borrowed from the HGM concept, 2026-10-03)
   Adapted to staged tokens: Inter, theme-aware vars, accent (brass in brass mode)
   ========================================================================== */

/* ---------- Status card: lift on hover, row nudge ---------- */
.home-status {
  transition: transform .5s cubic-bezier(.16, 1, .3, 1),
              box-shadow .5s cubic-bezier(.16, 1, .3, 1),
              border-color .5s ease;
}
.home-status:hover {
  transform: translateY(-4px);
  box-shadow: 0 24px 64px rgba(11, 14, 19, 0.10);
  border-color: color-mix(in srgb, var(--accent) 40%, var(--line));
}
.home-status__row { transition: padding-left .35s cubic-bezier(.16, 1, .3, 1); }
.home-status__row:hover { padding-left: 6px; }
.home-status__row:hover span:last-child { color: var(--accent-deep); }

/* ---------- Audit shell: lift on hover, dots brighten ---------- */
.audit-shell {
  transition: transform .6s cubic-bezier(.16, 1, .3, 1),
              box-shadow .6s cubic-bezier(.16, 1, .3, 1);
}
.audit-shell:hover {
  transform: translateY(-3px);
  box-shadow: 0 36px 88px rgba(11, 14, 19, 0.12);
}
.audit-dot { transition: transform .3s cubic-bezier(.16, 1, .3, 1), background .3s ease; }
.audit-shell:hover .audit-dot { transform: scale(1.25); background: var(--accent); }

/* ---------- Audit status pills with pulsing dot ---------- */
.audit-status {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 13px;
  border-radius: 999px;
  font-family: var(--font-sans, Inter, system-ui, sans-serif);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  white-space: nowrap;
}
.audit-status::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  flex: none;
  animation: pulseDot 2.2s ease-in-out infinite;
}
@keyframes pulseDot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: .45; transform: scale(.72); }
}
.audit-status.is-good {
  background: color-mix(in srgb, var(--green) 15%, transparent);
  color: var(--green-deep);
}
.audit-status.is-warn {
  background: color-mix(in srgb, var(--accent) 16%, transparent);
  color: var(--accent-deep);
}
.audit-status.is-bad {
  background: color-mix(in srgb, #c0492f 13%, transparent);
  color: #c0492f;
}

/* ---------- Audit grid cell hover wash ---------- */
.audit-grid > div:not(.audit-head) {
  transition: background .3s ease;
}
.audit-grid > div:not(.audit-head):hover {
  background: color-mix(in srgb, var(--accent) 7%, transparent);
}

/* ---------- Console list: row nudge + status pill highlight ---------- */
.console__list li {
  transition: padding-left .35s cubic-bezier(.16, 1, .3, 1), color .35s ease;
}
.console__list li:hover { padding-left: 8px; }
.console__list .mono {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  transition: background .35s ease, color .35s ease;
}
.console__list li:hover .mono {
  background: color-mix(in srgb, var(--accent) 20%, transparent);
  color: var(--accent-deep);
}

/* ---------- FAQ: row nudge, gold summary, eased plus rotation ---------- */
.faq-section details {
  transition: padding-left .4s cubic-bezier(.16, 1, .3, 1);
}
.faq-section details:hover { padding-left: 8px; }
.faq-section summary { transition: color .3s ease; }
.faq-section details:hover summary { color: var(--accent-deep); }
.faq-section summary > span:last-child {
  transition: transform .4s cubic-bezier(.16, 1, .3, 1);
}

/* ---------- Text links: underline sweeps out on hover ---------- */
.text-link { position: relative; }
.text-link::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -3px;
  height: 1px;
  background: currentColor;
  transform: scaleX(1);
  transform-origin: right;
  transition: transform .35s cubic-bezier(.16, 1, .3, 1);
}
.text-link:hover::after { transform: scaleX(0); }

/* ---------- Cookie bar entrance ---------- */
.cookie-bar { animation: cookieIn .55s cubic-bezier(.16, 1, .3, 1) both; }
@keyframes cookieIn {
  from { opacity: 0; transform: translateY(24px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .audit-status::before { animation: none; }
  .home-status, .audit-shell,
  .home-status__row, .console__list li,
  .faq-section details { transition: none; }
  .home-status:hover, .audit-shell:hover { transform: none; }
  .cookie-bar { animation: none; }
}