/* Site-wide base layer — shared tokens, reset, primitives, buttons, nav, footer.
 * Loaded BEFORE page-specific CSS so pages can override per their needs.
 */

/* ===================================================================
   SELF-HOSTED DISPLAY FONT — Oswald (variable, latin)
   Served from /fonts so the display headlines never depend on Google
   Fonts reaching the browser. When fonts.googleapis.com is blocked
   (corporate network, privacy extension, offline), the Google <link>
   simply fails and this local face provides Oswald instead — keeping
   the condensed metrics that keep the hero's nowrap "FAVORITE PLATFORM"
   line + fly within the viewport. (A wide sans-serif fallback overflows
   and clips the fly on the right edge.) URL is relative to /css.
   =================================================================== */
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 200 700;
  font-display: swap;
  src: url('../fonts/oswald-variable.woff2') format('woff2');
}

/* ===================================================================
   TOKENS — dark default, .section-light flips locally
   =================================================================== */
:root {
  --bg:           #050607;
  --bg-2:         #0b0d0f;
  --bg-3:         #101214;
  --text:         #f4f5f6;
  --dim:          rgba(255,255,255,.64);
  --dim-2:        rgba(255,255,255,.46);
  --hair:         rgba(255,255,255,.10);
  --hair-strong:  rgba(255,255,255,.20);
  --accent:       #B6F500;
  --accent-dim:   #8bc000;
  /* --accent as TEXT. On dark it IS the accent: #B6F500 on #050607 is 14.65:1,
     so eyebrows and mono labels can use the brand green directly. Written as
     var(--accent) rather than the literal so the two cannot drift apart —
     the whole point of the token is that switching to it is a no-op on dark. */
  --accent-ink:   var(--accent);
  --mono:         ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  /* Type system: Barlow for body copy; Barlow Condensed for numbers,
     labels, nav, and buttons; Oswald for display headlines. See #35. */
  --body:         'Barlow', system-ui, sans-serif;
  --condensed:    'Barlow Condensed', system-ui, sans-serif;
  --ease:         cubic-bezier(.22,.61,.36,1);
  --ease-out:     cubic-bezier(.16,1,.3,1);
  --max:          1440px;
}

/* The light theme, owned here and only here. Ten page sheets used to carry a
   byte-identical copy of this block, so the two contrast fixes above had to be
   typed eleven times and the reasoning survived in exactly one of them. Page
   sheets load after this file — a copy wins on cascade order and silently
   pins whatever values it was written with. Don't re-declare it; override a
   single token on a single selector if a page genuinely needs to. */
.section-light {
  --bg:           #EEEEE8;
  --bg-2:         #E6E6DE;
  --bg-3:         #D9D9CE;
  --text:         #0F0F0F;
  --dim:          rgba(15,15,15,.62);
  --dim-2:        rgba(15,15,15,.59);
  --hair:         rgba(15,15,15,.14);
  --hair-strong:  rgba(15,15,15,.26);
  --accent:       #75932C;
  /* Button hover, and only that. Field green on cream is boxed in from both
     sides, so this value has less room than it looks:
       darker -> #0F0F0F on it drops under 4.5:1 (1.4.3). #62801F was 4.22 and
                 failed; the floor is about #698427.
       lighter -> the fill IS the button's edge (.btn has no border), and
                 --accent is already only 3.02:1 against --bg, so anything
                 brighter breaks 1.4.11's 3:1 and the button dissolves into
                 the page on hover. #8AAD34 measured 2.22:1.
     #6F8C2A sits in the narrow band that clears both: text 4.98:1, edge
     3.30:1 — a crisper edge than at rest. Re-measure both if you touch it. */
  --accent-dim:   #6F8C2A;
  /* On cream, field green as SMALL text is 3.02:1 and misses AA — it is sized
     for fills and large display type, not 11px eyebrows. green-900 is 7.26:1
     and is already the colour of legal and story prose links, so this adds no
     new value to the palette. Large accent text (the green word in a heading)
     keeps --accent: at 24px+ the 3:1 threshold applies and 3.02 clears it. */
  --accent-ink:   #335614;

  background: var(--bg);
  color: var(--text);
}
/* When two light sections stack directly, the dark default body (--bg) can
   bleed through the sub-pixel seam where they meet at a fractional-pixel
   boundary — a faint full-width hairline (most visible at fractional zoom /
   on retina). Overlap the lower one by 1px (cream-on-cream, invisible) so
   there's no gap for the body to show through. Doesn't affect dark sections. */
.section-light + .section-light { margin-top: -1px; }

/* ===================================================================
   RESET / BASE
   =================================================================== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; scroll-padding-top: 96px; /* keep focused/anchored content clear of the 72px sticky nav (WCAG 2.4.11 Focus Not Obscured) */ }
html, body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--body);
  font-weight: 400;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-wrap: break-word;   /* long tokens (URLs, etc.) break instead of overflowing */
}
body { overflow-x: hidden; }
img, svg, video, canvas { display: block; max-width: 100%; }  /* never overflow the viewport */
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
::selection { background: var(--accent); color: #000; }
em, i { font-style: normal; }   /* no italics anywhere */

/* ===================================================================
   PRIMITIVES
   =================================================================== */
/* THE page frame — every section's content should sit in `.wrap` (or replicate
   its three declarations on the section's inner). It tracks the nav frame:
   content lands at 252..1548 @1800 and 5vw below 1440. Don't put the page
   gutter only on the outer section — that drifts ~72px wide past 1440. */
.wrap { max-width: var(--max); margin: 0 auto; padding: 0 min(5vw, 72px); }

/* Multi-column section grid. `min-width: 0` lets columns shrink below their
   content's intrinsic width — the #1 cause of mobile horizontal overflow
   (images/cards that won't shrink). Set grid-template-columns + gap per
   section and stack to 1fr at your mobile breakpoint (≤900; 3-up → also ≤600).*/
.cols { display: grid; }
.cols > * { min-width: 0; }

.display {
  font-family: 'Oswald', sans-serif;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: -0.014em;
  line-height: 0.98;
}

.mono {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
}

.label-lime { color: var(--accent-ink); }
.label-dim  { color: var(--dim); }
.label-dim2 { color: var(--dim-2); }

.article {
  display: block;
  font-family: 'Oswald', sans-serif;
  text-transform: lowercase;
  letter-spacing: 0.02em;
  color: var(--dim);
  font-size: .22em;
  margin-bottom: .14em;
}

em.thin, .thin {
  color: var(--dim);
  letter-spacing: -0.01em;
}

.period { color: var(--accent); }

/* pulsing dot --------------------------------------------------------- */
.dot {
  display: inline-block;
  width: 7px; height: 7px;
  background: var(--accent);
  border-radius: 50%;
  box-shadow: 0 0 0 0 rgba(182,245,0,.55);
  animation: pulse 1.8s cubic-bezier(.4,0,.6,1) infinite;
}
.section-light .dot { box-shadow: 0 0 0 0 rgba(121,152,45,.55); }
@keyframes pulse {
  0%   { box-shadow: 0 0 0 0 rgba(182,245,0,.55); }
  70%  { box-shadow: 0 0 0 10px rgba(182,245,0,0); }
  100% { box-shadow: 0 0 0 0 rgba(182,245,0,0); }
}

/* ===================================================================
   BUTTONS
   =================================================================== */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 22px;
  font-family: var(--condensed);
  font-weight: 500;
  font-size: 14px;
  letter-spacing: .04em;
  text-transform: uppercase;
  border: 1px solid transparent;
  border-radius: 5px;                /* matches app + hex corner proportion; intentionally not pill */
  transition: background .28s var(--ease), color .28s var(--ease), border-color .28s var(--ease), transform .28s var(--ease);
  cursor: pointer;
}
.btn .arrow { transition: transform .28s var(--ease); }
.btn:hover .arrow { transform: translateX(4px); }

/* Motion on buttons is decoration — the colour change carries the hover state
   on its own. base.css had no reduced-motion block at all before this; the 36
   that exist are scattered across page sheets, so a shared primitive had no
   shared guard. */
@media (prefers-reduced-motion: reduce) {
  .btn,
  .btn .arrow { transition: none; }
  .btn:hover .arrow { transform: none; }
  .btn-primary:hover { transform: none; }
}

.btn-primary { background: var(--accent); color: #000; }
/* The 1px lift used to live only in the nine page sheets that carried a private
   copy of .btn, alongside a hardcoded #c8ff1a that shadowed --accent-dim. It is
   promoted here rather than deleted: .btn already transitions `transform`, so
   without it that transition was doing nothing at all. */
.btn-primary:hover { background: var(--accent-dim); transform: translateY(-1px); }
/* On .section-light the bg is Field Green (#75932C); near-black text gives 6.5:1 (AA).
   Previously #fff here was 3.2:1 and failed WCAG 1.4.3. */
.section-light .btn-primary { color: #0F0F0F; }
.section-light .btn-primary:hover { background: var(--accent-dim); color: #0F0F0F; }

/* Ghost borders need 3:1 against bg (WCAG 1.4.11 Non-text Contrast).
   Hair-strong tokens at .20 / .26 opacity don't reach that, so set explicit
   border-colors on the ghost button without changing the token (which is also
   used for hairlines where 3:1 isn't required). */
.btn-ghost { border-color: rgba(255,255,255,.45); color: var(--text); }
.btn-ghost:hover { border-color: var(--accent); color: var(--accent); }
.section-light .btn-ghost { border-color: rgba(15,15,15,.55); }
.section-light .btn-ghost:hover { border-color: var(--accent); color: var(--accent); }

/* Focus ring — WCAG 2.4.7 Focus Visible. --accent auto-flips to field green
   on .section-light, so the ring follows the surrounding palette. */
.btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

/* ===================================================================
   NAV
   =================================================================== */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  /* Bar background stays full-bleed; contents align to the same --max page
     frame as .wrap (frame edge + 72px, the 1440-viewport value of 5vw). */
  padding: 16px max(5vw, calc((100vw - var(--max)) / 2 + 72px));
  display: flex; align-items: center; justify-content: space-between;
  /* Pin the nav typography so it stays identical across pages, even if a
     page sets its own body font (e.g. the springboard uses plain Barlow). */
  font-family: var(--condensed);
  background-color: transparent;
  border-bottom: 1px solid transparent;
  transform: translateY(0);
  transition:
    transform .38s var(--ease),
    background-color .35s var(--ease),
    backdrop-filter .35s var(--ease),
    -webkit-backdrop-filter .35s var(--ease),
    border-color .35s var(--ease),
    color .35s var(--ease);
  will-change: transform;
}
/* .nav-hidden retired — nav stays sticky on all breakpoints (editorial pattern).
   Class is left untouched so any leftover page-JS handler adding it is a no-op. */
.nav.is-scrolled {
  background-color: rgba(10,11,13,.62);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  border-bottom-color: rgba(255,255,255,.06);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .nav.is-scrolled { background-color: rgba(5,6,7,.92); }
}

.nav-left, .nav-right { display: flex; align-items: center; gap: 22px; }
.nav-logo { display: inline-flex; align-items: center; height: 36px; }
.nav-logo img { height: 30px; }

.nav-links { display: flex; align-items: center; gap: 22px; }
.nav-link {
  font-size: 16px;
  letter-spacing: .03em;
  color: var(--dim);
  position: relative;
  padding: 8px 2px;
  transition: color .25s var(--ease);
}
.nav-link:hover, .nav-link.active { color: var(--text); }
.nav-link:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
  border-radius: 2px;
}
.nav-link.active::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0;
  height: 1px; background: var(--accent);
}

.nav-utility {
  font-size: 16px;
  letter-spacing: .03em;
  color: var(--dim-2);
  padding-left: 18px;
  border-left: 1px solid var(--hair);
}
.nav-utility:hover { color: var(--text); }
.nav-utility:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
  border-radius: 2px;
}

.nav-cta {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 14px; letter-spacing: .04em; text-transform: uppercase;
  padding: 9px 16px;
  color: var(--text);
  /* Explicit border-color (not --hair-strong) so we hit 3:1 against bg
     for WCAG 1.4.11 — token stays available for hairlines elsewhere. */
  border: 1px solid rgba(255,255,255,.45);
  border-radius: 5px;                /* matches .btn — unified corner language */
  transition: background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease);
}
.nav-cta:hover { background: var(--accent); color: #000; border-color: var(--accent); }
.nav-cta:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

/* On a light section: swap --accent locally to Field Green so the active
   underline + nav-cta hover both flip to the field-green palette without
   any per-rule overrides. */
.nav.nav-on-light { --accent: #75932C; }

.nav.nav-on-light .nav-link    { color: rgba(15,15,15,.72); }
.nav.nav-on-light .nav-link:hover,
.nav.nav-on-light .nav-link.active { color: #0F0F0F; }
.nav.nav-on-light .nav-utility { color: rgba(15,15,15,.64); border-left-color: rgba(15,15,15,.18); }
.nav.nav-on-light .nav-utility:hover { color: #0F0F0F; }
/* Utility TEXT at .64, not .55. At .55 it was 4.08:1 on the cream --bg and
   worse on the other two light surfaces (3.96 on --bg-2, 3.82 on --bg-3),
   failing 1.4.3 everywhere — 10 instances, one per page carrying the nav, and
   the last shared-layer contrast failure on the site.
   The floor across all three surfaces is .61; .64 takes the worst case to
   5.02:1 for a little headroom. Sized against --bg-3 on purpose: the nav is
   transparent until it scrolls, so on a page whose first light block is
   --bg-2 or --bg-3 that is the ground the text actually sits on, and when it
   does scroll its own background is only rgba(238,238,232,.68) — still
   partly whatever is passing beneath.
   Deliberately NOT raised to the .72 of the adjacent .nav-link: Login is
   meant to read quieter than the primary nav items, and .64 keeps that
   hierarchy while clearing AA.
   The BORDER stays at .18/.55 — non-text, judged against 1.4.11's 3:1, which
   it already meets.
   Hover: text stays #0F0F0F on field-green for 6.5:1 (WCAG 1.4.3). */
.nav.nav-on-light .nav-cta     { color: #0F0F0F; border-color: rgba(15,15,15,.55); }
.nav.nav-on-light .nav-cta:hover { background: var(--accent); color: #0F0F0F; border-color: var(--accent); }
.nav.nav-on-light.is-scrolled {
  background-color: rgba(238,238,232,.68);
  border-bottom-color: rgba(15,15,15,.10);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .nav.nav-on-light.is-scrolled { background-color: rgba(238,238,232,.94); }
}

.nav.nav-on-light .nav-logo {
  /* base.css lives in /css/ — paths are relative to this file, so prepend ../ */
  background-image: url('../images/brand/wordmark/gf-wordmark-field-green.svg');
  background-size: auto 30px;        /* match the dark-mode <img> height exactly */
  background-repeat: no-repeat;
  background-position: left center;
  width: 150px;                      /* bumped to keep aspect for the larger logo */
}
.nav.nav-on-light .nav-logo img { visibility: hidden; }

/* ─── Solutions dropdown ─────────────────────────────────────────── */
.nav-link-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
}
.nav-link-wrap > .nav-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.nav-chevron {
  width: 10px; height: 10px;
  display: inline-block;
  flex-shrink: 0;
  transition: transform .22s var(--ease);
  position: relative; top: 1px;       /* nudge to optical-center with text */
}
.nav-link-wrap:hover .nav-chevron,
.nav-link-wrap:focus-within .nav-chevron {
  transform: rotate(180deg);
}
.nav-dropdown {
  position: absolute;
  top: 100%; left: 0;                  /* left-align under "Solutions" — no longer covers the Platform active line */
  transform: translateY(8px);
  display: flex; flex-direction: column;
  gap: 2px;
  padding: 10px;                       /* roomier inside but still tidy */
  min-width: 160px;                    /* slimmer (Live Events is the widest item) */
  background: rgba(10,11,13,.92);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  border: 1px solid var(--hair);
  border-radius: 5px;                  /* matches button corner language */
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity .22s var(--ease),
    transform .22s var(--ease),
    visibility .22s;
}
.nav-link-wrap:hover .nav-dropdown,
.nav-link-wrap:focus-within .nav-dropdown {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
}
.nav-dd-item {
  display: block;
  padding: 10px 16px;
  font-size: 14px;
  letter-spacing: .03em;
  color: var(--dim);
  white-space: nowrap;
  border-radius: 3px;
  transition: color .2s var(--ease), background .2s var(--ease);
}
.nav-dd-item:hover { color: var(--text); background: rgba(255,255,255,.05); }
.nav.nav-on-light .nav-dropdown {
  background: rgba(238,238,232,.92);
  border-color: rgba(15,15,15,.10);
}
.nav.nav-on-light .nav-dd-item { color: rgba(15,15,15,.62); }
.nav.nav-on-light .nav-dd-item:hover { color: #0F0F0F; background: rgba(0,0,0,.04); }

/* ─── Hamburger toggle (hidden by default, shown ≤768) ───────────── */
.nav-toggle {
  display: none;                       /* desktop hides it */
  width: 36px; height: 36px;
  padding: 0;
  background: transparent;
  border: 0;
  cursor: pointer;
  position: relative;
}
.nav-toggle:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}
.nav-toggle-bar {
  position: absolute;
  left: 7px; right: 7px;
  height: 1.5px;
  background: var(--text);
  border-radius: 2px;
  transition: transform .25s var(--ease), opacity .2s var(--ease), top .25s var(--ease);
}
.nav-toggle-bar:nth-child(1) { top: 11px; }
.nav-toggle-bar:nth-child(2) { top: 17px; }
.nav-toggle-bar:nth-child(3) { top: 23px; }
/* turn into an X when expanded */
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(1) { top: 17px; transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(3) { top: 17px; transform: rotate(-45deg); }
.nav.nav-on-light .nav-toggle-bar { background: #0F0F0F; }

/* ===================================================================
   NAV RESPONSIVE BREAKPOINTS
   =================================================================== */

/* Tablet landscape: tighten gaps, slightly trim the CTA */
@media (max-width: 1024px) {
  .nav { padding: 14px 4vw; }
  .nav-left, .nav-right { gap: 18px; }
  .nav-links { gap: 18px; }
  .nav-link { font-size: 15px; }
  .nav-utility { padding-left: 14px; }
  .nav-cta { padding: 8px 14px; font-size: 13px; }
}

/* Tablet portrait + mobile: hamburger, slide-down panel */
@media (max-width: 768px) {
  .nav { padding: 12px 5vw; }

  /* Reveal the hamburger */
  .nav-toggle { display: block; }

  /* Collapse the right side into a slide-down panel */
  .nav-right {
    position: absolute;
    top: 100%; left: 0; right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 18px 5vw 28px;
    background: rgba(10,11,13,.96);
    backdrop-filter: blur(20px) saturate(160%);
    -webkit-backdrop-filter: blur(20px) saturate(160%);
    border-bottom: 1px solid var(--hair);
    transform: translateY(-12px);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition:
      transform .25s var(--ease),
      opacity .25s var(--ease),
      visibility .25s;
  }
  .nav-right.is-open {
    transform: translateY(0);
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }
  .nav.nav-on-light .nav-right {
    background: rgba(238,238,232,.96);
    border-bottom-color: rgba(15,15,15,.10);
  }

  /* Stack links vertically as full-width tap targets */
  .nav-links {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    width: 100%;
  }
  .nav-link {
    font-size: 18px;
    padding: 14px 0;
    border-bottom: 1px solid var(--hair);
  }
  .nav-link.active::after { display: none; }
  .nav.nav-on-light .nav-link { border-bottom-color: rgba(15,15,15,.08); }

  /* Solutions dropdown expanded inline (no hover/dropdown on mobile) */
  .nav-link-wrap { display: block; width: 100%; }
  .nav-link-wrap > .nav-link { width: 100%; justify-content: space-between; }
  .nav-chevron,
  .nav-link-wrap:hover .nav-chevron { transform: none; }
  .nav-dropdown {
    position: static;
    transform: none;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border: 0;
    padding: 4px 0 12px 14px;          /* indented under "Solutions" */
    min-width: 0;
  }
  .nav-dd-item { font-size: 15px; padding: 8px 10px; }

  /* Utility + CTA stack at the bottom */
  .nav-utility {
    border-left: 0; padding-left: 0;
    padding: 14px 0;
    font-size: 16px;
    border-bottom: 1px solid var(--hair);
  }
  .nav.nav-on-light .nav-utility { border-bottom-color: rgba(15,15,15,.08); }
  .nav-cta {
    margin-top: 18px;
    align-self: flex-start;
    font-size: 14px;
  }
}

/* Small mobile: tighter padding, slightly smaller link sizes */
@media (max-width: 480px) {
  .nav { padding: 10px 5vw; }
  .nav-logo { height: 32px; }
  .nav-logo img { height: 26px; }
  .nav.nav-on-light .nav-logo { background-size: auto 26px; width: 128px; }
  .nav-right { padding: 14px 5vw 24px; }
  .nav-link { font-size: 16px; padding: 12px 0; }
  .nav-dd-item { font-size: 14px; }
}

/* ===================================================================
   RUNNERTAG TEASER — shared callout (partials/runnertag-teaser.html)

   Lives here rather than in a page CSS file because it mounts on several
   pages (platform.html, solutions-live-events.html, solutions-sports.html)
   and those entry points must not drift. Owns its own dark surface so it
   reads the same whichever section it follows — it lands after a
   .section-light block on platform and live-events, but after a dark one
   (.voices) on sports, which is why the card carries its own slightly
   raised background rather than relying on contrast with the section above.
   =================================================================== */
.rt-teaser {
  padding: 12vh 0;
  background: #050607;
  color: #f4f5f6;
}

/* Compact band, not a second hero — on both hosts this sits immediately
   above the page's own closing CTA, so it has to read as a sideways glance
   rather than compete for the same attention. Hence align-items:center (the
   CTA tracks the text block instead of being stranded at the bottom of a
   tall card) and a copy measure short enough to wrap at two lines. */
.rt-teaser-card {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: clamp(28px, 5vw, 64px);
  align-items: center;
  padding: clamp(30px, 3.2vw, 44px) clamp(30px, 3.6vw, 52px);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 10px;
  background: #0b0d0f;
  transition: border-color .28s var(--ease), background .28s var(--ease), transform .28s var(--ease);
}
.rt-teaser-card > * { min-width: 0; }
.rt-teaser-card:hover {
  border-color: var(--accent);
  background: #101214;
  transform: translateY(-3px);
}
.rt-teaser-card:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

.rt-teaser-logo {
  display: block;
  width: clamp(132px, 12vw, 168px);
  height: auto;
  margin: 14px 0 16px;
}
/* No measure cap on the title — it's one short line, and capping it forced a
   break that left a dead half-band to the right of the text. */
.rt-teaser-title { font-size: clamp(24px, 2.4vw, 32px); }
.rt-teaser-copy {
  margin-top: 12px;
  max-width: 68ch;
  color: rgba(255,255,255,.64);
  font-size: 16px;
  line-height: 1.5;
}

.rt-teaser-go {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 22px;
  border: 1px solid rgba(255,255,255,.45);
  border-radius: 5px;
  font-family: var(--condensed);
  font-weight: 500;
  font-size: 14px;
  letter-spacing: .04em;
  text-transform: uppercase;
  white-space: nowrap;
  color: #f4f5f6;
  transition: border-color .28s var(--ease), color .28s var(--ease);
}
.rt-teaser-card:hover .rt-teaser-go { border-color: var(--accent); color: var(--accent); }
.rt-teaser-card:hover .arrow { transform: translateX(4px); }

@media (max-width: 900px) {
  .rt-teaser { padding: 10vh 0; }
  .rt-teaser-card {
    grid-template-columns: 1fr;
    align-items: start;
    gap: 32px;
  }
  .rt-teaser-go { justify-self: start; }
}

/* ===================================================================
   FOOTER — homepage style
   =================================================================== */
.footer {
  position: relative;
  overflow: hidden;
  /* Own dark surface so the footer is never dependent on the page body
     background (a light-body page must not make the footer light). --bg here
     resolves to the root dark; the footer is never inside a .section-light. */
  background: var(--bg);
  color: var(--text);
  border-top: 1px solid var(--hair);
  /* Content aligns to the same --max page frame as the nav/.wrap (frame edge
     + 72px). The hex background is position:absolute inset:0, so it stays
     full-bleed regardless. Below 1440 this equals 5vw — unchanged. */
  padding: 56px max(5vw, calc((100vw - var(--max)) / 2 + 72px)) 44px;
  isolation: isolate;
}
.footer-hex {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  mask-image: linear-gradient(to bottom,
                              black 0%,
                              black 18%,
                              rgba(0,0,0,.44) 44%,
                              transparent 70%);
  -webkit-mask-image: linear-gradient(to bottom,
                                      black 0%,
                                      black 18%,
                                      rgba(0,0,0,.44) 44%,
                                      transparent 70%);
}
.footer-hex-svg {
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: auto;
}
.hex-cell-shape {
  fill: transparent;
  stroke: var(--accent);
  stroke-opacity: .13;
  stroke-width: 1;
  transition: stroke-opacity .25s var(--ease), fill .25s var(--ease);
  cursor: pointer;
  pointer-events: all;
}
.hex-fly {
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s var(--ease-out), transform .35s var(--ease-out);
  transform-origin: center;
  transform: scale(.75);
}
.hex-cell:hover .hex-cell-shape {
  fill: var(--accent);
  stroke-opacity: 1;
}
.hex-cell:hover .hex-fly {
  opacity: 1;
  transform: scale(1);
}

.footer-stage,
.footer-wordmark,
.footer-legal {
  pointer-events: none;
}
/* The link columns intercept pointer events so the (visually faded-out)
   interactive hex cells behind them don't flicker / steal the cursor when
   you move between links. Hex hover stays live up top where it's visible. */
.footer-inner { pointer-events: auto; }
.footer-wordmark img,
.footer-inner a,
.footer-inner h5,
.footer-legal a,
.footer-legal span {
  pointer-events: auto;
}

.footer-stage {
  position: relative;
  z-index: 2;
  max-width: var(--max);
  margin: 0 auto;
  padding: 40px 0 48px;
  text-align: center;
}
.footer-wordmark {
  display: flex;
  justify-content: center;
  padding: 40px 0;
}
.footer-wordmark img {
  width: min(52%, 460px);
  height: auto;
  filter: brightness(0) invert(1);
}

.footer-inner {
  position: relative;
  z-index: 2;
  margin: 0 auto;
  padding: 56px 0 52px;
  display: grid;
  grid-template-columns: repeat(5, minmax(140px, auto));
  justify-content: center;
  gap: 56px;
  border-bottom: 1px solid var(--hair);
}
/* Get-the-App column: "Get started" link + stacked store badges */
.footer-app { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
.footer-app a { pointer-events: auto; display: inline-block; opacity: .92; transition: opacity .2s var(--ease); }
.footer-app a:hover { opacity: 1; }
.footer-app img { height: 40px; width: auto; display: block; }
/* Cookie consent banner (Silktide) — brand theming. The library scopes its
   tokens to #stcm-wrapper and is injected after base.css, so we override at
   higher specificity (html #stcm-wrapper) to win regardless of load order.
   See #21. */
html #stcm-wrapper {
  --primaryColor: #B6F500;
  --backgroundColor: #0b0d0f;
  --textColor: #f4f5f6;
  --fontFamily: var(--body);
  --iconBackgroundColor: #B6F500;
  --iconColor: #0F0F0F;
}
/* Hide Silktide's floating cookie icon — we reopen preferences via a discreet
   "Cookie settings" link in the footer instead (see consent.js + footer.html). #21 */
#stcm-icon { display: none !important; }

.footer-app-link {
  display: inline-block;
  margin-bottom: 16px;
  color: var(--dim);
  font-size: 13px;
  border-bottom: 1px solid var(--hair);
  transition: color .2s var(--ease), border-color .2s var(--ease);
}
.footer-app-link:hover { color: var(--text); border-bottom-color: var(--accent); }
/* Contact column: social icon badges */
.footer-social-head { margin-top: 26px; }
.footer-social { display: flex; flex-wrap: wrap; gap: 10px; }
.footer-social a {
  pointer-events: auto;
  width: 38px; height: 38px;
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--hair);
  color: var(--dim);
  transition: color .2s var(--ease), background .2s var(--ease), border-color .2s var(--ease);
}
.footer-social a:hover { color: #000; background: var(--accent); border-color: var(--accent); }
.footer-social svg { width: 16px; height: 16px; fill: currentColor; display: block; }
@media (max-width: 1100px) {
  .footer-inner { grid-template-columns: repeat(3, minmax(140px, auto)); gap: 48px 56px; }
}
@media (max-width: 760px) {
  .footer-inner { grid-template-columns: repeat(2, minmax(140px, auto)); gap: 40px 48px; }
}
@media (max-width: 480px) {
  .footer-inner { grid-template-columns: 1fr; gap: 36px; }
}
.footer h5 {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 22px;
  font-weight: 500;
}
.footer ul { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.footer li a {
  color: var(--dim);
  font-size: 14px;
  transition: color .2s var(--ease);
  position: relative;
  display: inline-block;
}
.footer li a::after {
  content: "";
  position: absolute;
  left: 0; right: 100%;
  bottom: -3px;
  height: 1px;
  background: var(--accent);
  transition: right .35s var(--ease-out);
}
.footer li a:hover { color: var(--text); }
.footer li a:hover::after { right: 0; }

.footer-legal {
  position: relative;
  z-index: 2;
  max-width: var(--max);
  margin: 28px auto 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px 24px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--dim);
}
.footer-legal a { color: var(--dim); transition: color .2s var(--ease); }
.footer-legal a:hover { color: var(--accent); }
.footer-status { display: inline-flex; align-items: center; gap: 10px; }
.footer-status b { color: var(--text); font-weight: 500; }
.footer-status-dot {
  width: 7px;
  height: 7px;
  background: var(--accent);
  border-radius: 50%;
  flex-shrink: 0;
  animation: footer-status-pulse 2.4s ease-in-out infinite;
}
@keyframes footer-status-pulse {
  0%, 100% { opacity: 1;  box-shadow: 0 0 0 0 rgba(182,245,0,.5); }
  50%      { opacity: .55; box-shadow: 0 0 0 6px rgba(182,245,0,0); }
}