/* ── Shared base: design tokens + reset + body background + shared navbar,
   footer and account-menu components. Linked into every (migrated) page via
   <link rel="stylesheet" href="/base.css">. Edit here once.
   Identity: Vercel-inspired — pure-black neutral surfaces, crisp hairline
   borders, one emerald accent, Geist (Vercel's open-source font) everywhere.
   No gloss / chrome / candy gradients / ambient orbs. Legacy token aliases below are kept (and flattened)
   so page-local components that still reference them render in the new flat
   language. ── */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* Links inherit their context colour and never underline by default; components
   that should be coloured/underlined (footer, FAQ answers, etc.) opt in. */
a {
  color: inherit;
  text-decoration: none;
}

/* Make the [hidden] attribute reliable even when a component sets display
   (e.g. grid/flex cards). Toggle visibility in JS via `el.hidden = true/false`. */
[hidden] {
  display: none !important;
}

/* Small shared layout utilities. */
.scroll-x {
  overflow-x: auto;
}
.nowrap {
  white-space: nowrap;
}
.ta-right {
  text-align: right;
}

:root {
  /* Default theme = dark. The light theme overrides the color tokens below in
     the `:root[data-theme='light']` block; theme-gate.js sets data-theme before
     paint. color-scheme keeps native UI (scrollbars, form controls) in sync. */
  color-scheme: dark;

  /* Base — dark theme (secondary; light is the default). Softened near-black,
     not pure #000, with neutral grey borders. */
  --bg: #0e0e11;
  --bg-2: #141418;
  --surface: #16161a;
  --surface-2: #1d1d22;
  --surface-hover: #232329;
  /* Alternating section tint (subtle colour step between landing sections). */
  --sec-alt: #131319;
  --border: #2b2b31; /* neutral grey */
  --border-hover: #454545; /* Geist gray-500 */

  /* Text — Geist greys. */
  --text: #ededed; /* gray-1000 */
  --text-sub: #a1a1a1; /* gray-900 */
  --text-muted: #8f8f8f; /* gray-700 */

  /* Trust-indigo accent (replaces the old neon emerald). Aliases kept so legacy
     token names still resolve to the new brand colour. */
  --emerald: #6366f1;
  --emerald-bright: #818cf8;
  --emerald-deep: #4f46e5;
  --green: #6366f1;
  --accent: #6366f1;
  --accent-hover: #4f46e5;
  --accent-bright: #818cf8;
  --accent-weak: rgb(99, 102, 241, 0.14);
  --accent-ring: rgb(99, 102, 241, 0.32);
  --accent-dim: rgb(99, 102, 241, 0.16);
  --aqua: #8b5cf6;
  --lime: #6366f1;
  /* Signature brand gradient (indigo → violet → warm) — the recurring motif:
     used on the logo orb and brand chips, echoing the hero mesh gradient. */
  --grad-brand: linear-gradient(135deg, #6366f1 0%, #8b5cf6 52%, #f0a878 100%);

  /* ── Buttons ── Primary = brand gradient (indigo→violet) + colour-glow shadow. */
  --btn-green-bg: linear-gradient(120deg, #6366f1 0%, #8b5cf6 55%, #a78bfa 100%);
  --btn-green-bg-hover: linear-gradient(120deg, #6366f1 0%, #8b5cf6 55%, #a78bfa 100%);
  --btn-green-border: rgb(255, 255, 255, 0.16);
  --btn-green-text: #fff;
  /* Colour-glow + inset top highlight for the primary button (both themes). */
  --btn-green-shadow: 0 1px 2px rgb(79, 70, 229, 0.28), 0 8px 20px rgb(99, 102, 241, 0.22),
    inset 0 1px 0 rgb(255, 255, 255, 0.28);
  --btn-green-shadow-hover: 0 2px 5px rgb(79, 70, 229, 0.22), 0 9px 20px rgb(99, 102, 241, 0.24),
    inset 0 1px 0 rgb(255, 255, 255, 0.3);
  --btn-dark-bg: #0a0a0a;
  --btn-dark-bg-hover: #1f1f1f;
  --btn-dark-border: #2e2e2e;
  --btn-dark-border-hover: #454545;
  --btn-dark-text: #ededed;
  --btn-shadow: none;

  /* Legacy gloss/chrome aliases — flattened so old components inherit
         the new flat look without per-rule edits. */
  --chrome: var(--text);
  --metallic: var(--text);
  --ig-gradient: none;
  --gloss-emerald: var(--accent);
  --gloss-aqua: var(--accent);

  /* Subtle glass surfaces (hairline tints, no sheen) */
  --glass: rgb(255, 255, 255, 0.04);
  --glass-hover: rgb(255, 255, 255, 0.06);

  /* Background grid / guide lines — subtler than the structural --border so the
     grid reads as a backdrop (navbar/footer use --border for a crisper line). */
  --guide: #1f1f1f;

  /* ── Theming tokens ──
     Surfaces/overlays/status that used to be hardcoded across the page CSS,
     now tokenized so the light theme can swap them. Dark values here match the
     previous literals (so the dark look is unchanged). The emerald accent is
     intentionally shared by both themes, so accent-* and --text-on-accent
     (dark text on green) are NOT overridden in light. */
  --bg-grad-top: #0e0e11; /* flat (no hero gradient) */
  --bg-grad-bot: #0e0e11;
  --nav-bg: #0e0e11; /* navbar blends with the page, bordered */
  --menu-bg: #16161a; /* account dropdown */
  --input-bg: #16161a; /* form fields, segmented controls, pills */
  --panel-grad-top: #16161a; /* raised mock/preview panels */
  --panel-grad-bot: #16161a;
  --dot-color: rgb(255, 255, 255, 0.07); /* dot-grid background */
  --text-on-accent: #fff; /* white text on the indigo accent (buttons, pills, logo P) */

  /* White-alpha overlays (faint fills / hovers / hairline highlights) grouped
     by intensity; light theme flips them to black-alpha. */
  --ov-soft: rgb(255, 255, 255, 0.03);
  --ov-hover: rgb(255, 255, 255, 0.05);
  --ov-line: rgb(255, 255, 255, 0.06);
  --ov-strong: rgb(255, 255, 255, 0.12);

  /* "Sunken" fill for inputs / segmented-control tracks. Dark = a recessed dark
     well; light = white defined by the border (see light block). */
  --sunken: rgb(0, 0, 0, 0.22);
  --sunken-inset: inset 0 1px 3px rgb(0, 0, 0, 0.32);

  /* Skeleton-loader greys (neutral, Vercel-style — no green tint). */
  --skel-base: #1c1c1c;
  --skel-tint-1: #161616;
  --skel-tint-2: #262626;

  /* Status colours (warning amber / danger red) + their soft tinted bgs. */
  --warn: #f0b429;
  --warn-weak: rgb(255, 188, 60, 0.14);
  --danger: #ff7088;
  --danger-soft: #ff8f9e;
  --danger-weak: rgb(220, 39, 67, 0.12);

  /* Type — Geist (Vercel's open-source font, SIL OFL) everywhere; Geist Mono for
         monospaced bits. --font-hero/display alias Geist so all existing usages
         render in it. */
  --font-hero: 'Geist', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-display: 'Geist', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-sans: 'Geist', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: 'Geist Mono', ui-monospace, 'SF Mono', monospace;
  /* Standard content width — same on every page (matches the landing) so
         the navbar + content frame never shift when navigating. */
  --page-width: 1120px;
  --radius: 14px;
  --r-btn: 8px;
  --r-card: 12px;
}

/* ── Light theme ──
   Only the color tokens that need to flip are overridden here; everything else
   (accent emerald, fonts, radii, layout, dark text-on-accent) is inherited from
   :root. theme-gate.js sets data-theme="light" before paint. */
:root[data-theme='light'] {
  color-scheme: light;

  /* Surfaces — WARM light (the default, trust-building face). Faintly warm
     off-white page so pure-white cards lift off it; warm greys (not cold slate)
     and soft shadows give a friendly, legitimate feel. */
  --bg: #faf9f7;
  --bg-2: #f3f1ed;
  --surface: #fff;
  --surface-2: #f7f5f2;
  --surface-hover: #f1efea;
  /* Alternating section tint — a faint cool lavender step from the warm bg. */
  --sec-alt: #f2f1fa;
  --border: #e8e4de; /* warm hairline */
  --border-hover: #d6d1c8;

  /* Text — warm near-black + warm greys. */
  --text: #1c1a17;
  --text-sub: #5a554d;
  --text-muted: #918b80;

  /* Indigo accent — deeper for text/links/icons on white (good contrast); the
     button fill uses the brighter indigo with white text. */
  --accent: #4f46e5;
  --accent-bright: #4f46e5;
  --accent-hover: #4338ca;
  --accent-weak: rgb(99, 102, 241, 0.1);
  --accent-ring: rgb(99, 102, 241, 0.28);
  --accent-dim: rgb(99, 102, 241, 0.08);
  --text-on-accent: #fff;

  /* Primary button → vivid indigo + white text. */
  --btn-green-bg: linear-gradient(120deg, #6366f1 0%, #8b5cf6 55%, #a78bfa 100%);
  --btn-green-bg-hover: linear-gradient(120deg, #6366f1 0%, #8b5cf6 55%, #a78bfa 100%);
  --btn-green-text: #fff;
  --btn-green-border: rgb(0, 0, 0, 0.06);

  /* Secondary (neutral) button → white with a warm border + soft shadow. */
  --btn-dark-bg: #fff;
  --btn-dark-bg-hover: #f5f3ef;
  --btn-dark-border: #e2ded7;
  --btn-dark-border-hover: #cfc9be;
  --btn-dark-text: #1c1a17;

  /* Soft warm shadows for depth + warmth (friendly, not flat). */
  --btn-shadow: 0 1px 2px rgb(28, 26, 23, 0.07);
  --shadow-card: 0 1px 2px rgb(28, 26, 23, 0.04), 0 6px 22px rgb(28, 26, 23, 0.07);

  --glass: rgb(28, 26, 23, 0.03);
  --glass-hover: rgb(28, 26, 23, 0.05);
  --guide: #ece8e2; /* warm guide / navbar line */

  --bg-grad-top: #fcfbf9;
  --bg-grad-bot: #f6f4f0;
  --nav-bg: #fffefc;
  --menu-bg: #fff;
  --input-bg: #faf9f6;
  --panel-grad-top: #fff;
  --panel-grad-bot: #f7f5f2;
  --dot-color: rgb(28, 26, 23, 0.05);

  --sunken: #fff;
  --sunken-inset: none;

  --ov-soft: rgb(28, 26, 23, 0.03);
  --ov-hover: rgb(28, 26, 23, 0.05);
  --ov-line: rgb(28, 26, 23, 0.07);
  --ov-strong: rgb(28, 26, 23, 0.1);

  --skel-base: #ece8e2;
  --skel-tint-1: #f3f1ec;
  --skel-tint-2: #e4dfd7;

  /* Status colours, readable on the light bg. */
  --warn: #b45309;
  --warn-weak: rgb(245, 158, 11, 0.16);
  --danger: #dc2626;
  --danger-soft: #dc2626;
  --danger-weak: rgb(220, 38, 38, 0.08);
}

/* Soft elevation for card/panel surfaces in light mode only (the dark theme is
   intentionally flat). Keeps cards lifted off the grey page background. */
:root[data-theme='light']
  :is(
    .auth-card,
    .card,
    .status-card,
    .help-card,
    .value-card,
    .services-promo-card,
    .mock-panel,
    .market-block,
    .search-panel
  ) {
  box-shadow: var(--shadow-card);
}

/* Subtle separation for the (now white) navbar against the white content. */
:root[data-theme='light'] .nav-shell {
  box-shadow: 0 1px 0 rgb(15, 23, 42, 0.04);
}

/* Light: the trust chips (landing/services/marketplace) and the landing ticker
   read a touch darker than the default muted slate — they looked washed out on
   the light bg. The green ticks keep their own accent colour. */
:root[data-theme='light'] :is(.trust, .stat-chip, .ticker .ticker-item) {
  color: #64748b; /* slate-500 */
}

/* Light background: the flat grey looked dull, so layer a soft emerald glow at
   the top (brand warmth + depth) over a slate gradient with a bit more range. */
:root[data-theme='light'] body {
  background-image:
    radial-gradient(1200px 600px at 50% -14%, rgb(99, 102, 241, 0.12), transparent 68%),
    linear-gradient(180deg, var(--bg-grad-top) 0%, var(--bg-grad-bot) 100%);
}

body {
  font-family: var(--font-sans);
  background-color: var(--bg);
  background-image: linear-gradient(180deg, var(--bg-grad-top) 0%, var(--bg-grad-bot) 100%);
  background-attachment: fixed;
  color: var(--text);
  min-height: 100vh;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

/* Brand-green text selection (Supabase-style), site-wide. */
::selection {
  background: var(--accent);
  color: var(--text-on-accent);
}

/* Optional Stripe-style vertical guide lines. Inert unless a page adds
       <div class="guides"></div>; sits behind content at the column edges. */

/* ════════════════════════════════════════════════════════════
       SHARED NAVBAR — one component for every page (partials/navbar.html).
       Solid dark bar, hairline bottom border. Sticky so content never
       slides under it (the landing/marketplace re-pin it as fixed).
       Account menu mounts into .site-links.
       ════════════════════════════════════════════════════════════ */
.nav-shell {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  justify-content: center;
  padding: 0;
  background: var(--nav-bg);
  border-bottom: 1px solid var(--border); /* full-width line on purpose */
}
/* Three zones: brand (left) · nav links (centre) · account (right). */
.site-nav {
  display: grid;
  grid-template-columns: auto auto 1fr;
  align-items: center;
  gap: 20px;
  width: 100%;
  max-width: var(--page-width); /* centred within the guides */
  margin-inline: auto;
  height: 64px;
  padding: 0 24px;
  border-radius: 0;
  border: none;
  background: transparent;
  box-shadow: none;
}

.site-nav .brand {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 17px;
  letter-spacing: -0.02em;
  color: var(--text);
  text-decoration: none;
  white-space: nowrap;
}

.nav-right {
  justify-self: end;
  display: inline-flex;
  align-items: center;
}
/* On desktop the collapse wrapper is transparent to layout, so .site-links
       and .nav-right sit directly in the 3-zone grid. The burger is hidden. */
.nav-collapse {
  display: contents;
}

/* Drawer-only blocks (auth buttons + theme row) — mobile hamburger only. */
.nav-drawer-auth,
.nav-drawer-foot {
  display: none;
}

/* Brand chip: squircle carrying the signature gradient + a slow living sheen. */
.site-nav .brand-orb {
  width: 24px;
  height: 24px;
  border-radius: 7px;
  position: relative;
  flex: none;
  display: grid;
  place-items: center;
  background: var(--grad-brand);
  background-size: 200% 200%;
  box-shadow: none;
  animation: orb-shift 9s ease-in-out infinite;
}

/* Shared: slow drift of the brand gradient (the orb "breathes" colour). */
@keyframes orb-shift {
  0% {
    background-position: 0% 50%;
  }

  50% {
    background-position: 100% 50%;
  }

  100% {
    background-position: 0% 50%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .site-nav .brand-orb {
    animation: none;
  }

  .btn-primary {
    animation: none;
  }
}

/* Hero signature: animated mesh gradient (mesh-gradient.js paints the canvas).
   The CSS gradient is the fallback shown before init / without WebGL / with
   reduced motion, so the hero always looks intentional. Shared by the landing,
   services and marketplace heroes. */
.hero-wrap {
  position: relative;
  overflow: hidden;
}

.hero-mesh {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
  display: block;
  background:
    radial-gradient(60% 50% at 18% 0%, rgb(99, 102, 241, 0.16), transparent 70%),
    radial-gradient(55% 50% at 82% 4%, rgb(139, 92, 246, 0.14), transparent 72%),
    radial-gradient(60% 55% at 50% 0%, rgb(251, 191, 156, 0.12), transparent 75%);
}

.site-nav .brand-orb::before {
  display: none;
}

.site-nav .brand-orb::after {
  content: 'P';
  position: relative;
  z-index: 1;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 14px;
  line-height: 1;
  color: #fff;
  -webkit-text-fill-color: #fff;
  background: none;
  text-shadow: none;
}

.site-links {
  justify-self: start;
  display: flex;
  align-items: center;
  gap: 4px;
}

.site-links a {
  color: var(--text-sub);
  text-decoration: none;
  font-size: 14px;
  font-weight: 400;
  padding: 8px 12px;
  border-radius: 6px;
  border: 1px solid transparent;
  transition:
    color 0.15s,
    background 0.15s,
    border-color 0.15s;
}

/* The active page reads as a branded "you are here" chip. Hovering ANY nav item
   (links or the Resources button) shows the SAME chip — and only one at a time:
   while the nav is hovered, the real active tab drops its chip unless it's the
   one under the cursor. On hover-out the chip animates back to the active tab. */
.site-links a.active,
.site-links a:hover,
.nav-mega:hover .nav-mega-btn,
.nav-mega:focus-within .nav-mega-btn {
  color: var(--accent-bright);
  background: var(--accent-weak);
  border-color: transparent;
}
.site-links:hover a.active:not(:hover) {
  color: var(--text-sub);
  background: transparent;
}

/* ── Resources mega-menu (Vercel-style dropdown) ──
   Opens on hover/focus with a zoom-in + fade-in. Pure CSS (no JS): the panel's
   transparent top padding bridges the gap to the trigger so hover is continuous.
   2-column grid for now; add more .nav-mega-item to grow it. */
.nav-mega {
  position: relative;
  display: inline-flex;
}
.nav-mega-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 400;
  color: var(--text-sub);
  cursor: pointer;
  padding: 8px 12px;
  border: 1px solid transparent;
  border-radius: 6px;
  background: none;
  transition:
    color 0.15s,
    background 0.15s;
}
.nav-mega-chev {
  width: 13px;
  height: 13px;
  color: var(--text-muted);
  transition: transform 0.18s;
}
.nav-mega:hover .nav-mega-chev,
.nav-mega:focus-within .nav-mega-chev {
  transform: rotate(180deg);
}
.nav-mega-panel {
  position: absolute;
  top: 100%;
  left: 0;
  padding-top: 11px; /* transparent bridge over the gap to the trigger */
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity 0.16s ease,
    visibility 0.18s;
  z-index: 200;
}
.nav-mega-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  width: 540px;
  max-width: calc(100vw - 32px);
  padding: 12px;
  background: var(--menu-bg);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 18px 50px rgb(0, 0, 0, 0.5);
  transform: scale(0.96);
  transform-origin: top left;
  transition: transform 0.18s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.nav-mega:hover .nav-mega-panel,
.nav-mega:focus-within .nav-mega-panel {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
.nav-mega:hover .nav-mega-inner,
.nav-mega:focus-within .nav-mega-inner {
  transform: scale(1);
}
.nav-mega-item {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 11px 12px;
  border-radius: 9px;
  text-decoration: none;
  transition: background 0.13s;
}
.nav-mega-item:hover {
  background: var(--ov-hover);
}
.nav-mega-ico {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  flex: none;
  border: 1px solid var(--border);
  border-radius: 9px;
  color: var(--text-sub);
}
.nav-mega-ico svg {
  width: 18px;
  height: 18px;
}
.nav-mega-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.nav-mega-text b {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
}
.nav-mega-text small {
  font-size: 12.5px;
  color: var(--text-muted);
}
@media (prefers-reduced-motion: reduce) {
  .nav-mega-panel,
  .nav-mega-inner {
    transition: opacity 0.16s ease;
  }
}

/* ── Mobile navbar: logo + hamburger that opens a drawer ── */
.nav-burger {
  display: none; /* shown (inline-flex) only in the mobile media query below */
  width: 38px;
  height: 38px;
  flex: none;
  padding: 0;
  margin: 0;
  cursor: pointer;
  background: none;
  border: 1px solid var(--border);
  border-radius: 8px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  transition:
    border-color 0.15s,
    background 0.15s;
}

.nav-burger:hover {
  border-color: var(--border-hover);
  background: var(--ov-hover);
}

.nav-burger span {
  width: 17px;
  height: 2px;
  border-radius: 2px;
  background: var(--text-sub);
  transition:
    transform 0.2s ease,
    opacity 0.15s ease;
}

.site-nav.nav-open .nav-burger span:nth-child(1) {
  transform: translateY(6px) rotate(45deg);
}

.site-nav.nav-open .nav-burger span:nth-child(2) {
  opacity: 0;
}

.site-nav.nav-open .nav-burger span:nth-child(3) {
  transform: translateY(-6px) rotate(-45deg);
}

@media (max-width: 640px) {
  .site-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 58px;
    gap: 8px;
    padding: 0 16px;
  }

  .site-nav .brand {
    display: inline-flex;
  } /* logo stays on mobile now */
  .nav-burger {
    display: inline-flex;
  }
  /* Full-height drawer sheet under the bar (auth · links · theme). */
  .nav-collapse {
    display: flex;
    flex-direction: column;
    gap: 0;
    position: fixed;
    top: 58px;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--nav-bg);
    box-shadow: none;
    padding: 22px 18px calc(22px + env(safe-area-inset-bottom, 0px));
    overflow-y: auto;
    transform: translateY(-8px);
    opacity: 0;
    visibility: hidden;
    transition:
      opacity 0.2s ease,
      transform 0.2s ease,
      visibility 0.2s;
  }

  .site-nav.nav-open .nav-collapse {
    transform: none;
    opacity: 1;
    visibility: visible;
  }

  /* Order inside the drawer: auth buttons (top) · links · theme (bottom). */
  .nav-drawer-auth {
    order: 1;
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 24px;
  }

  .site-nav .site-links {
    order: 2;
    justify-self: auto;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }

  .nav-right {
    display: none;
  }

  .nav-drawer-foot {
    order: 3;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: auto;
    padding-top: 18px;
    border-top: 1px solid var(--border);
  }

  /* Auth buttons (top). */
  .drawer-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 15px 16px;
    border-radius: 12px;
    font-family: var(--font-sans);
    font-size: 16px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    border: 1px solid transparent;
  }

  .drawer-btn-primary {
    color: var(--btn-green-text);
    background: var(--btn-green-bg);
    background-size: 200% 200%;
    border-color: var(--btn-green-border);
    box-shadow: var(--btn-green-shadow);
  }

  .drawer-btn-ghost {
    color: var(--text);
    background: var(--btn-dark-bg);
    border-color: var(--btn-dark-border);
  }

  /* Nav link rows (large, airy, no per-row divider). */
  .site-nav .site-links a {
    padding: 15px 4px;
    font-size: 17px;
    border-radius: 0;
    text-align: left;
    color: var(--text-sub);
  }

  .site-nav .site-links a:hover {
    background: none;
    color: var(--text);
  }

  /* Resources group → tap-accordion (overrides the desktop hover dropdown). */
  .nav-mega {
    display: block;
    position: static;
  }

  .nav-mega-btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 15px 4px;
    font-size: 17px;
    color: var(--text-sub);
    background: none;
    border: none;
    cursor: pointer;
    font-family: var(--font-sans);
  }

  .nav-mega-chev {
    width: 20px;
    height: 20px;
    transition: transform 0.2s;
  }

  .nav-mega.open .nav-mega-chev {
    transform: rotate(180deg);
  }

  .nav-mega-panel {
    position: static;
    transform: none;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    padding: 0;
    display: none;
  }

  .nav-mega.open .nav-mega-panel {
    display: block;
  }

  .nav-mega-inner {
    display: block;
    width: auto;
    max-width: none;
    background: none;
    border: none;
    box-shadow: none;
    transform: none;
    padding: 0 0 6px 14px;
  }

  /* Theme segmented control (bottom). */
  .nav-drawer-theme-label {
    font-size: 16px;
    font-weight: 500;
    color: var(--text-sub);
  }

  .nav-theme-seg {
    display: inline-flex;
    gap: 2px;
    padding: 3px;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: var(--surface);
  }

  .nav-theme-seg-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 34px;
    border: none;
    background: none;
    border-radius: 999px;
    color: var(--text-muted);
    cursor: pointer;
    transition:
      background 0.15s,
      color 0.15s;
  }

  .nav-theme-seg-btn svg {
    width: 18px;
    height: 18px;
  }

  .nav-theme-seg-btn.is-active {
    background: var(--surface-2);
    color: var(--text);
  }
}

/* ── Shared footer ── */
footer {
  position: relative;
  z-index: 1; /* sits above the fixed .guides so the vertical lines stop here */
  border-top: 1px solid var(--border); /* full-width line on purpose */
  padding: 28px 20px;
  text-align: center;
  font-size: 13px;
  color: var(--text-muted);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  font-family: var(--font-sans);
  background: var(--bg); /* opaque, covers the guide lines behind it */
}

.footer-main {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
}

.footer-secure {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
}

.footer-secure svg {
  width: 13px;
  height: 13px;
  color: var(--accent);
}

.footer-secure b {
  color: var(--text-sub);
  font-weight: 600;
}

@media (max-width: 580px) {
  footer {
    gap: 10px;
    font-size: 12px;
    padding: 22px 14px;
  }

  .footer-main {
    gap: 8px;
    white-space: nowrap;
  }
}

.footer-sep {
  color: var(--border-hover);
}

.footer-link {
  color: var(--text-muted);
  text-decoration: none;
  transition: color 0.15s;
}

.footer-link:hover {
  color: var(--text);
}

/* ── Account menu (auto-injected into .site-links by account-menu.js) ── */
.nav-account {
  position: relative;
  display: inline-flex;
  align-items: center;
  margin-left: 6px;
}
/* Logged-out: "Sign in" → dark button (login uses the black variant). */
.nav-account-signin {
  font-size: 14px;
  font-weight: 500;
  color: var(--btn-dark-text);
  text-decoration: none;
  padding: 8px 14px;
  border-radius: var(--r-btn);
  border: 1px solid var(--btn-dark-border);
  background: var(--btn-dark-bg);
  box-shadow: var(--btn-shadow);
  transition:
    background 0.15s,
    border-color 0.15s;
}

.nav-account-signin:hover {
  color: var(--btn-dark-text);
  background: var(--btn-dark-bg-hover);
  border-color: var(--btn-dark-border-hover);
}
/* Logged-in: neutral dark button. */
.nav-account-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 600;
  color: var(--btn-dark-text);
  cursor: pointer;
  padding: 7px 12px;
  border-radius: var(--r-btn);
  border: 1px solid var(--btn-dark-border);
  background: var(--btn-dark-bg);
  box-shadow: var(--btn-shadow);
  transition:
    background 0.15s,
    border-color 0.15s;
}

.nav-account-btn:hover {
  background: var(--btn-dark-bg-hover);
  border-color: var(--btn-dark-border-hover);
}

.nav-account-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: none;
  flex: none;
}

.nav-account-name {
  max-width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.nav-account-chev {
  width: 13px;
  height: 13px;
  color: var(--text-muted);
  transition: transform 0.16s;
}

.nav-account.open .nav-account-chev {
  transform: rotate(180deg);
}

.nav-account-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 226px;
  display: none;
  flex-direction: column;
  padding: 5px;
  border: 1px solid var(--border-hover);
  border-radius: 12px;
  background: var(--menu-bg);
  box-shadow: 0 18px 44px rgb(0, 0, 0, 0.5);
  z-index: 200;
}

.nav-account.open .nav-account-menu {
  display: flex;
}

.nav-account-menu a,
.nav-account-menu button {
  font-family: var(--font-sans);
  font-size: 13.5px;
  font-weight: 500;
  text-align: left;
  color: var(--text-sub);
  text-decoration: none;
  cursor: pointer;
  padding: 10px 12px;
  border-radius: 8px;
  border: none;
  background: none;
  width: 100%;
  transition:
    background 0.12s,
    color 0.12s;
}

.nav-account-menu a:hover,
.nav-account-menu button:hover {
  background: var(--ov-hover);
  color: var(--text);
}

.nav-account-menu .nav-account-logout {
  color: var(--danger-soft);
}

.nav-account-menu .nav-account-logout:hover {
  color: var(--danger);
  background: var(--danger-weak);
}

/* ── Account dropdown items: profile · theme picker · logout (minimalist) ── */
/* Profile (top) and logout (bottom): an icon + label row. */
.nav-acct-profile,
.nav-account-menu .nav-account-logout {
  display: flex;
  align-items: center;
  gap: 9px;
}
.nav-acct-ico {
  width: 16px;
  height: 16px;
  flex: none;
}
.nav-acct-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Thin divider between sections. */
.nav-acct-sep {
  height: 1px;
  margin: 5px 6px;
  background: var(--border);
}
/* Greyed "THEME" section label (not interactive). */
.nav-acct-section {
  padding: 7px 12px 4px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-muted);
}
/* Theme options: a radio dot (filled when active) in a 16px column so the
   labels line up with the profile/logout labels above and below. */
.nav-theme-opt {
  display: flex;
  align-items: center;
  gap: 9px;
}
.nav-theme-dot {
  width: 16px;
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.nav-theme-dot::before {
  content: '';
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--text);
  opacity: 0;
  transition: opacity 0.12s;
}
.nav-theme-opt.is-active {
  color: var(--text);
}
.nav-theme-opt.is-active .nav-theme-dot::before {
  opacity: 1;
}