:root {
  --bg: #000000;
  --text: #ffffff;
  --text-muted: rgba(255, 255, 255, 0.55);
  --text-faint: rgba(255, 255, 255, 0.35);
  --accent: #7ee8fa;
  /* Thin outline on the hex tiles and, when unfolded, continued down the
     panel. Checked every logo asset on the live site (header SVG, footer
     full-color SVG, favicon): all use the icon gradient #8DCD8B -> #488995,
     neither a bright blue. The brand's bright blue is this one — the CTA
     button color, used 259x on the live page and already the hex icon color.
     Change this single value if a different reference blue is intended. */
  --outline: #7ee8fa;
  --ease-open: cubic-bezier(0.22, 1, 0.36, 1);
  /* Hard ceiling for an unfolded tile panel (desktop). See .hex-tile-expand-inner. */
  --panel-max: 400px;
  --accent-text: #04141a;
  --border: rgba(255, 255, 255, 0.08);
  --border-soft: rgba(255, 255, 255, 0.04);
  --card-bg: rgba(255, 255, 255, 0.03);
  --card-bg-hover: rgba(255, 255, 255, 0.06);
  --radius-lg: 20px;
  --radius-md: 12px;
  --radius-sm: 8px;
  --font-body: 'Inter', -apple-system, sans-serif;
  --font-display: 'Funnel Display', 'Inter', sans-serif;
  --max-width: 960px;
}

* { box-sizing: border-box; }

html { background: var(--bg); scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }

.announcement-bar {
  background: #16181a;
  color: rgba(255, 200, 120, 0.95);
  text-align: center;
  font-size: 13px;
  font-weight: 500;
  padding: 8px 16px;
  letter-spacing: 0.01em;
  border-bottom: 1px solid var(--border-soft);
}

/* ---------- Header ---------- */
.site-header {
  background: #000;
  border-bottom: 1px solid var(--border-soft);
  position: sticky;
  top: 0;
  z-index: 50;
}

.header-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 18px 32px;
  display: flex;
  align-items: center;
  gap: 32px;
}

.logo img { height: 26px; display: block; }

.main-nav {
  display: flex;
  gap: 28px;
  flex: 1;
  font-size: 15px;
}

.nav-link { color: var(--text); opacity: 0.85; transition: opacity 0.15s; }
.nav-link:hover { opacity: 1; }
.nav-link.is-active { color: var(--accent); opacity: 1; font-weight: 500; }

.cta-button {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--accent);
  color: var(--accent-text);
  font-weight: 500;
  font-size: 15px;
  padding: 12px 24px 12px 14px;
  border-radius: 100px;
  white-space: nowrap;
}

.cta-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.12);
  font-size: 13px;
}

/* ---------- Hero / Search ---------- */
.hero {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 72px 24px 40px;
  text-align: center;
}

.hero h1 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 52px;
  line-height: 1.08;
  margin: 0 0 18px;
}

.hero-sub {
  color: var(--text-muted);
  font-size: 18px;
  max-width: 620px;
  margin: 0 auto 40px;
}

.search-wrap { max-width: 640px; margin: 0 auto; position: relative; }

.search-box {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 100px;
  padding: 16px 22px;
  transition: border-color 0.15s, background 0.15s;
}

.search-box:focus-within {
  border-color: var(--accent);
  background: rgba(126, 232, 250, 0.05);
}

.search-icon { color: var(--text-faint); flex-shrink: 0; }

#search-input {
  flex: 1;
  background: none;
  border: none;
  outline: none;
  color: var(--text);
  font-family: var(--font-body);
  font-size: 16px;
}

#search-input::placeholder { color: var(--text-faint); }

.search-clear {
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  padding: 0 2px;
}
.search-clear:hover { color: var(--text); }

.search-results {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  background: #0a0a0a;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  max-height: 420px;
  overflow-y: auto;
  z-index: 40;
  text-align: left;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
}

.search-result-item {
  display: block;
  padding: 14px 20px;
  border-bottom: 1px solid var(--border-soft);
  cursor: pointer;
}
.search-result-item:last-child { border-bottom: none; }
.search-result-item:hover, .search-result-item.is-highlighted { background: var(--card-bg-hover); }

.search-result-title { font-size: 15px; font-weight: 500; margin-bottom: 3px; }
.search-result-category { font-size: 12px; color: var(--text-faint); }
.search-result-empty { padding: 20px; color: var(--text-muted); font-size: 14px; text-align: center; }

mark {
  background: rgba(126, 232, 250, 0.35);
  color: var(--text);
  border-radius: 3px;
  padding: 0 1px;
}

/* ---------- Hexagon honeycomb category grid ---------- */
.browse-section {
  max-width: 1200px;
  margin: 0 auto;
  padding: 8px 24px 56px;
}

.hex-grid-wrap {
  display: flex;
  justify-content: center;
}

.hex-grid {
  position: relative;
  /* width/height are set inline by JS once tile positions are computed */
}

.hex-tile {
  position: absolute;
  display: flex;
  flex-direction: column;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  /* No explicit height: it's auto, sized to its children (the fixed-height
     hex shape, plus the panel below). Blooming open is entirely the panel's
     own height transition (see .hex-tile-expand) — nothing here animates,
     it just naturally grows/shrinks to fit. Nothing else on the grid ever
     moves. It's lifted above neighboring tiles (see .is-expanded) so the
     part of it that visually overlaps them still receives the hover/click
     instead of the tile underneath.
     The hover tilt/lift transform is applied HERE, to the whole tile, never
     to the hex shape alone: transforming only the top half would shift and
     scale it relative to the panel and break the single continuous shape. */
  transition: transform 0.18s ease;
  will-change: transform;
}

.hex-tile-shape {
  /* height is set inline by JS (the hex's own fixed height, independent of
     the tile's overall height, which grows for the expand panel below) */
  position: relative;
  width: 100%;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  /* OUTLINE, via a nested clip: this box is filled with the outline color and
     clipped to the hexagon; the ::before below is the same hexagon inset by
     1px carrying the real fill. The 1px ring left between them is a true
     outline that follows the slanted edges (a CSS `border` is rectangular and
     just gets cut by clip-path — it never traces a hexagon). */
  background: var(--outline);
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  /* clip-path animates on the same curve/duration as the panel's height so
     the bottom point fills in *as* the panel drops down — one unfolding. */
  transition: clip-path 0.32s var(--ease-open);
}

.hex-tile-shape::before {
  content: "";
  position: absolute;
  inset: 1px; /* = outline thickness */
  /* Opaque fill (the old translucent gradient over solid black), otherwise
     the outline color behind would tint through. */
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.015)), #000;
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  /* The fill switches to the flat expanded color instantly on open (see the
     .is-expanded rule) and only fades back to this gradient AFTER the panel
     has finished closing (0.32s delay): the panel overlaps the face, so any
     moment where the two fills differ would show as a line across the hex. */
  transition: clip-path 0.32s var(--ease-open), bottom 0.32s var(--ease-open), background 0.18s 0.32s;
  z-index: 0;
}

.hex-tile-icon {
  width: 30px;
  height: 30px;
  color: var(--accent);
  flex-shrink: 0;
  position: relative;
  z-index: 1; /* above the ::before fill layer */
}

.hex-tile-icon svg { width: 100%; height: 100%; }

.hex-tile-name {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 14.5px;
  line-height: 1.25;
  text-align: center;
  padding: 0 22px;
  color: var(--text);
  position: relative;
  z-index: 1; /* above the ::before fill layer */
}

/* Hover / lift (fine pointer + hover-capable devices only) */
@media (hover: hover) and (pointer: fine) {
  .hex-tile:hover .hex-tile-shape::before {
    background: #0a1416;
  }
}

.hex-tile.is-expanded .hex-tile-shape {
  /* No border here — see .hex-tile-expand's comment: a 1px solid border at
     an acute clip-path vertex anti-aliases into a small visible smudge, and
     with a second independently-bordered shape (the panel) converging on
     that exact same point, the two AA blends compound into a clearly
     visible mark right at the seam. Confirmed by A/B testing with borders
     removed: the vertex renders as a perfectly clean point. The flat
     background fill alone (matching .hex-tile-expand exactly) still reads
     as "active" against the resting tiles' subtle default background. */
  /* Fill the bottom point in: the two lower corners slide from 75% down to
     100%, so the hex's straight sides continue straight down into the
     full-width panel below. Same 6 vertices as the resting hexagon, so CSS
     interpolates it smoothly (the 50% 100% vertex just becomes collinear).
     This is what removes the two triangular voids either side of the pinch. */
  clip-path: polygon(50% 0%, 100% 25%, 100% 100%, 50% 100%, 0% 100%, 0% 25%);
}

.hex-tile.is-expanded .hex-tile-shape::before {
  background: #0a1416;
  transition: clip-path 0.32s var(--ease-open), bottom 0.32s var(--ease-open), background 0s;
  clip-path: polygon(50% 0%, 100% 25%, 100% 100%, 50% 100%, 0% 100%, 0% 25%);
  /* Push the fill layer out past the bottom edge so no outline band is drawn
     across the hex/panel join — the panel's own side outlines continue the
     ring straight down instead. */
  bottom: -2px;
}

/* In-place expand panel: lives INSIDE the same tile, directly below the hex
   shape, rather than floating elsewhere. It visually overlaps whatever tiles
   happen to sit beneath it (nothing else on the grid ever moves — see
   .hex-tile's z-index handling in JS). It is a plain full-width rectangle,
   deliberately NOT tapered/flared: while expanded the hex above fills its
   own bottom point in to full width (see .is-expanded .hex-tile-shape), so
   hex sides run straight down into this panel as one shield-shaped
   silhouette. An earlier version mirrored the hex's taper here instead,
   which left two triangular voids either side of the pinch point. */
.hex-tile-expand {
  /* Height is driven directly by JS (0 <-> content height) and transitions
     on its own — deliberately NOT flex-grow inside a parent whose height is
     also animating. Layering clip-path on top of that emergent, recomputed-
     every-frame flex size proved unreliable (rendered as a jump rather than
     a smooth reveal, and full width was momentarily open to overlapping a
     same-row neighbor). One element owning one directly-animated height
     that clip-path references is predictable. */
  width: 100%;
  height: 0;
  flex-shrink: 0;
  overflow: hidden;
  /* Where the panel starts is set inline by JS (measurePanelStart): inside
     the hex body, a fixed gap below the label block, never lower than the
     hex's lower corners. -1px is only the no-JS fallback. Because the panel
     overlaps the face it must paint ABOVE the shape - which is positioned and
     would otherwise paint over a static sibling - hence the z-index. */
  margin-top: -1px;
  position: relative;
  z-index: 2;
  /* Same flat color as .hex-tile.is-expanded .hex-tile-shape — deliberately
     not a gradient, and deliberately no border. See that rule's comment:
     verified by direct A/B test that a 1px border at this element's acute
     top vertex (compounding with the hex shape's own border at the same
     point) is what was causing the visible seam smudge, not a geometry gap
     or a fill-color mismatch — the two coordinates are pixel-identical. */
  background: #0a1416;
  /* Outline continued from the hex: inset shadows (not `border`) so that at
     rest, with height 0, nothing is drawn — a border-bottom on a 0-height box
     would still paint a stray 1px line under every hexagon. The left/right
     lines sit at the same x as the hex's 1px outline ring, so they read as
     one continuous stroke around the whole unfolded shape. */
  box-shadow:
    inset 1px 0 0 var(--outline),
    inset -1px 0 0 var(--outline),
    inset 0 -1px 0 var(--outline);
  /* Only geometry animates here. The panel body is always opaque so it is
     visibly part of the shape as it grows; the CONTENT fades in separately
     (see .hex-tile-expand-inner), only after the geometry has finished. */
  transition: height 0.32s var(--ease-open);
  text-align: left;
}

/* Choreography: one continuous opening. Geometry (hex morph + panel height,
   both 0.32s on the same curve) runs first; the content is held invisible
   and only fades in once that has fully landed (0.32s delay), as the tail
   end of the same motion — not a simultaneous, overlapping second animation.
   On collapse the content drops out immediately (no delay) so the shrinking
   panel is a plain body, never text sliding under a closing shape. */
.hex-tile-expand-inner {
  padding: 14px 18px 16px;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.1s ease, transform 0.1s ease;
}

.hex-tile.is-expanded .hex-tile-expand-inner {
  opacity: 1;
  transform: none;
  transition: opacity 0.22s ease 0.32s, transform 0.22s ease 0.32s;
}

.hex-preview-desc {
  color: var(--text-muted);
  font-size: 13px;
  line-height: 1.5;
  margin-bottom: 14px;
}

.hex-preview-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-faint);
  margin-bottom: 8px;
}

.hex-preview-articles { display: flex; flex-direction: column; gap: 6px; margin-bottom: 4px; }

.hex-preview-article {
  font-size: 13px;
  color: var(--text-muted);
  padding: 6px 8px;
  border-radius: 6px;
  transition: background 0.12s, color 0.12s;
}
.hex-preview-article:hover { background: var(--card-bg-hover); color: var(--text); }

.hex-preview-viewall {
  display: block;
  margin-top: 10px;
  font-size: 12.5px;
  color: var(--accent);
  font-weight: 500;
}

/* Panel height cap (desktop honeycomb only — the mobile stack is in normal
   flow and simply pushes content down). The unfolded panel never grows past
   --panel-max: title, label and "view all" stay put and the article LIST
   scrolls inside the panel, so the shape's reach is bounded regardless of how
   many articles a category has. JS measures the inner's height for the
   open animation, so the cap is also what the panel animates to. */
.hex-grid:not(.is-mobile) .hex-tile-expand-inner {
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  max-height: var(--panel-max);
}
.hex-grid:not(.is-mobile) .hex-tile-expand-inner > * { flex-shrink: 0; }
.hex-grid:not(.is-mobile) .hex-preview-articles {
  flex: 0 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain; /* wheel at the list's end doesn't scroll the page */
  scrollbar-width: thin;
  scrollbar-color: rgba(126, 232, 250, 0.35) transparent;
}
.hex-grid:not(.is-mobile) .hex-preview-articles::-webkit-scrollbar { width: 6px; }
.hex-grid:not(.is-mobile) .hex-preview-articles::-webkit-scrollbar-thumb {
  background: rgba(126, 232, 250, 0.35);
  border-radius: 3px;
}

/* Footer guard (see syncGridHeight in app.js): while a panel is open the grid
   grows to contain it, on the same curve and duration as the panel's own
   height, so the footer below is pushed down rather than covered. */
.hex-grid:not(.is-mobile) { transition: height 0.32s var(--ease-open); }
/* Keep the viewport scrollbar's gutter reserved so the page growing while a
   panel is open can never toggle a scrollbar into existence and shift the
   layout (which would re-run the grid layout under the pointer). */
html { scrollbar-gutter: stable; }

/* Mobile fallback: rounded rectangular tiles, stacked, full width, no hex/stagger.
   Tiles are position: static here, so an expanding tile naturally pushes the
   ones below it down through normal document flow — no JS reflow needed. */
.hex-grid.is-mobile {
  position: static;
  width: 100% !important;
  height: auto !important;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.hex-grid.is-mobile .hex-tile {
  position: static;
  width: 100% !important;
  height: auto !important;
}

.hex-grid.is-mobile .hex-tile-shape {
  height: auto !important;
  clip-path: none;
  border-radius: var(--radius-md);
  flex-direction: row;
  justify-content: flex-start;
  padding: 16px 18px;
  gap: 14px;
}

/* Mobile outline: same nested-fill technique, just with rounded corners and
   no clip-path. Squared off at the bottom while unfolded so the panel below
   continues the ring. */
.hex-grid.is-mobile .hex-tile-shape::before {
  clip-path: none;
  border-radius: calc(var(--radius-md) - 1px);
}
.hex-grid.is-mobile .hex-tile.is-expanded .hex-tile-shape {
  border-radius: var(--radius-md) var(--radius-md) 0 0;
}
.hex-grid.is-mobile .hex-tile.is-expanded .hex-tile-shape::before {
  border-radius: calc(var(--radius-md) - 1px) calc(var(--radius-md) - 1px) 0 0;
  bottom: -2px;
}

.hex-grid.is-mobile .hex-tile-icon { width: 26px; height: 26px; }

.hex-grid.is-mobile .hex-tile-name {
  text-align: left;
  padding: 0;
  font-size: 15.5px;
}

.hex-grid.is-mobile .hex-tile-expand {
  /* Mobile still uses the older max-height approach, not the desktop's
     direct-height transition, since JS clears its inline height here (see
     layoutGrid) and lets this take over. */
  height: auto;
  margin-top: 0;
  border-radius: 0;
  max-height: 0;
  transition: max-height 0.25s ease;
}

.hex-grid.is-mobile .hex-tile-expand-inner { padding: 0 18px; }

.hex-grid.is-mobile .hex-tile.is-expanded .hex-tile-expand {
  max-height: 600px;
  border-radius: 0 0 var(--radius-md) var(--radius-md); /* inset shadows follow it */
}

.hex-grid.is-mobile .hex-tile.is-expanded .hex-tile-expand-inner {
  padding: 12px 18px 18px;
}

/* ---------- Category detail (drill-in) view ---------- */
.category-detail {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 24px;
}

.back-to-grid {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: none;
  border: 1px solid var(--border);
  color: var(--text-muted);
  font-family: var(--font-body);
  font-size: 13px;
  padding: 9px 16px 9px 12px;
  border-radius: 100px;
  cursor: pointer;
  margin-bottom: 24px;
  transition: color 0.15s, border-color 0.15s;
}
.back-to-grid:hover { color: var(--text); border-color: rgba(255, 255, 255, 0.25); }

/* ---------- Categories (article accordions; shown one at a time in detail view) ---------- */
.categories {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 24px 40px;
}

.categories.is-browsing .category-block { display: none; }
.categories.is-browsing .category-block.is-active { display: block; }

.category-block { margin-bottom: 56px; scroll-margin-top: 90px; }

.category-header {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border-soft);
}

.category-header h2 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 26px;
  margin: 0;
}

.category-count { color: var(--text-faint); font-size: 14px; }

.article-list { display: flex; flex-direction: column; gap: 10px; }

.article-item {
  border: 1px solid var(--border);
  background: var(--card-bg);
  border-radius: var(--radius-md);
  overflow: hidden;
  scroll-margin-top: 90px;
  transition: border-color 0.15s;
}

.article-item.is-open { border-color: rgba(126, 232, 250, 0.35); }

.article-question {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 22px;
  background: none;
  border: none;
  color: var(--text);
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
}

.article-question:hover { background: var(--card-bg-hover); }

.article-chevron {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  color: var(--text-muted);
  transition: transform 0.2s;
}

.article-item.is-open .article-chevron { transform: rotate(180deg); color: var(--accent); }

.article-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.25s ease;
}

.article-answer-inner {
  padding: 0 22px 24px;
  color: var(--text-muted);
  font-size: 15px;
}

.article-answer-inner p { margin: 0 0 14px; }
.article-answer-inner p.no-margin { margin: 0 0 14px; }
.article-answer-inner h1,
.article-answer-inner h2,
.article-answer-inner h3,
.article-answer-inner h4 {
  font-family: var(--font-display);
  font-weight: 500;
  color: var(--text);
  margin: 22px 0 10px;
  line-height: 1.3;
}
.article-answer-inner h1 { font-size: 20px; }
.article-answer-inner h2 { font-size: 18px; }
.article-answer-inner h3, .article-answer-inner h4 { font-size: 16px; }
.article-answer-inner ul, .article-answer-inner ol { padding-left: 22px; margin: 0 0 14px; }
.article-answer-inner li { margin-bottom: 6px; }
.article-answer-inner strong { color: var(--text); font-weight: 600; }
.article-answer-inner a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
.article-answer-inner hr { border: none; border-top: 1px solid var(--border); margin: 20px 0; }
.article-answer-inner img { max-width: 100%; border-radius: var(--radius-sm); margin: 10px 0; }

/* Embedded video (Loom etc.) — responsive 16:9 player, no default iframe border. */
.video-embed {
  position: relative;
  aspect-ratio: 16 / 9;
  margin: 12px 0 18px;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: #000;
  border: 1px solid var(--border);
}
.video-embed iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

.article-answer-inner table {
  width: 100%;
  border-collapse: collapse;
  margin: 12px 0 18px;
  font-size: 14px;
  overflow-x: auto;
  display: block;
}
.article-answer-inner table thead { display: table-header-group; }
.article-answer-inner table tbody { display: table-row-group; }
.article-answer-inner table tr { display: table-row; }
.article-answer-inner table th,
.article-answer-inner table td {
  display: table-cell;
  border: 1px solid var(--border);
  padding: 10px 12px;
  text-align: left;
  color: var(--text-muted);
}
.article-answer-inner table th { color: var(--text); font-weight: 600; background: var(--card-bg-hover); }

.article-source-link {
  display: inline-block;
  margin-top: 4px;
  font-size: 13px;
  color: var(--text-faint);
}
.article-source-link:hover { color: var(--accent); }

/* ---------- Legacy (Discontinued Plans) tile ---------- */
/* Same hex, hover and unfold as the live categories; distinguished at rest by
   a small badge on the face and a muted icon, since it behaves differently
   (browse-only, excluded from search, no "recently updated" list). */
.hex-tile-badge {
  position: relative;
  z-index: 1; /* above the ::before fill layer */
  margin-top: -2px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 100px;
  padding: 3px 8px;
  line-height: 1;
}
.hex-tile.is-legacy .hex-tile-icon { color: var(--text-muted); }
.hex-grid.is-mobile .hex-tile-badge { margin-top: 0; margin-left: auto; }

.category-note {
  color: var(--text-faint);
  font-size: 14px;
  margin: -6px 0 18px;
}

/* ---------- Footer ---------- */
.site-footer {
  background: #000;
  border-top: 1px solid var(--border-soft);
  padding: 60px 24px 30px;
}

.footer-inner { max-width: 1200px; margin: 0 auto; }

.footer-top {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 44px;
}
.footer-logo { height: 24px; }
.footer-news { color: var(--text); font-size: 18px; margin: 0; max-width: 480px; }

.footer-columns {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
  margin-bottom: 40px;
}

.footer-col h4 {
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-faint);
  margin: 0 0 14px;
}

.footer-col a, .footer-col p {
  display: block;
  color: var(--text-muted);
  font-size: 14px;
  margin-bottom: 10px;
  line-height: 1.5;
}
.footer-col a:hover { color: var(--text); }

.footer-bottom {
  border-top: 1px solid var(--border-soft);
  padding-top: 24px;
}
.footer-bottom p { color: var(--text-faint); font-size: 12px; margin: 0 0 10px; }
.footer-disclaimer { max-width: 900px; line-height: 1.6; }

@media (max-width: 720px) {
  .header-inner { flex-wrap: wrap; padding: 14px 18px; }
  .main-nav { order: 3; width: 100%; justify-content: center; gap: 20px; }
  .hero h1 { font-size: 36px; }
  .hero { padding: 44px 18px 28px; }
  .footer-columns { grid-template-columns: repeat(2, 1fr); }
}