/*
 * ═══════════════════════════════════════════════════════════════
 *  SATURDAY RACING — NAV, MOBILE DRAWER & FOOTER
 *  /static/css/chrome.css
 *
 *  Sections:
 *    1. Site Nav (desktop)
 *    2. Hamburger button
 *    3. Mobile overlay (backdrop)
 *    4. Mobile drawer
 *    5. Site footer
 *    6. Ticker bar
 *    7. Responsive breakpoints
 * ═══════════════════════════════════════════════════════════════
 */

/* ─────────────────────────────────────────────────────────────
   1. SITE NAV (desktop)
───────────────────────────────────────────────────────────── */
.site-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 200;
  height: var(--nav-h);
  background: rgba(8, 8, 12, 0.94);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(212, 175, 55, 0.14);
  transition:
    background 0.3s,
    box-shadow 0.3s;
  /* Prevent nav from being covered by drawer backdrop */
  isolation: isolate;
}

.site-nav.scrolled {
  background: rgba(8, 8, 12, 0.99);
  box-shadow:
    0 4px 30px rgba(0, 0, 0, 0.7),
    0 1px 0 rgba(212, 175, 55, 0.12);
}

.site-nav__inner {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 var(--page-gutter);
  height: 100%;
  display: flex;
  align-items: center;
  gap: var(--space-5);
}

/* Back link */
.site-nav__back {
  font-size: 12px;
  color: var(--c-text-35);
  display: flex;
  align-items: center;
  gap: 5px;
  transition: color 0.2s;
  flex-shrink: 0;
  white-space: nowrap;
}
.site-nav__back:hover {
  color: var(--c-text-75);
}

/* Brand */
.site-nav__brand {
  display: flex;
  align-items: center;
  gap: 11px;
  flex-shrink: 0;
  text-decoration: none;
}

/* SVG mark — sized to nav height */
.sr-mark--nav {
  width: 26px; /* viewBox is 44x72, so 26px wide = ~42px tall, fits 60px nav */
  height: 42px;
  flex-shrink: 0;
}
.sr-mark--drawer {
  width: 30px;
  height: 49px;
  flex-shrink: 0;
}
.sr-mark--footer {
  width: 22px;
  height: 36px;
  flex-shrink: 0;
}

/* Wordmark — two-line stacked */
.site-nav__wordmark {
  display: flex;
  flex-direction: column;
  gap: 1px;
  line-height: 1;
}
.site-nav__wordmark-main {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 900;
  color: var(--c-gold);
  letter-spacing: 0.1em;
  line-height: 1;
}
.site-nav__wordmark-sub {
  font-family: var(--font-display);
  font-size: 9px;
  font-weight: 400;
  color: var(--c-text-35);
  letter-spacing: 0.36em;
  text-transform: uppercase;
  line-height: 1;
}

/* Primary nav links — gold text + underline glow */
.site-nav__links {
  display: flex;
  align-items: center;
  gap: 4px;
  flex: 1;
  min-width: 0;
}

.site-nav__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: rgba(242, 236, 223, 0.72);
  /* 8px each side, not the redesign's 12px: at 12px the seven links ran
     12px past their row and into the Join button on every page. 8px
     leaves 44px to spare in the 1280px nav. The active underline below
     is positioned from this padding. */
  padding: 7px 8px 10px;
  border-radius: 0;
  background: transparent;
  border: 0;
  text-decoration: none;
  box-shadow: none;
  transition: color 0.18s ease;
  white-space: nowrap;
}
.site-nav__link:hover {
  color: #faf7f0;
  background: transparent;
}
.site-nav__link.active {
  color: var(--c-gold);
  background: transparent;
  font-weight: 700;
  box-shadow: none;
}
.site-nav__link.active .site-nav__link-ico,
.site-nav__link.active .site-nav__caret {
  color: var(--c-gold);
  stroke: currentColor;
}
.site-nav__link.active .site-nav__link-portrait {
  border-color: rgba(212, 175, 55, 0.55);
}

/* Exact layout active underline — thicker gold streak, starts under label */
.site-nav__link.active::after {
  content: "";
  position: absolute;
  /* Start after icon (15px) + gap (6px) + left pad (8px) ≈ under "Home" text */
  left: calc(8px + 15px + 6px);
  right: 6px;
  bottom: -1px;
  width: auto;
  height: 14px;
  transform: none;
  background: url("../public/img/nav-active-underline.1b78812d3c4c.webp") center / 100% 100%
    no-repeat;
  pointer-events: none;
  opacity: 1;
  filter: none;
}
.site-nav__dropdown-trigger.site-nav__link.active::after {
  /* dropdown triggers also have caret — keep underline under label only */
  right: 18px;
  bottom: -1px;
}

/* Right actions */
.site-nav__actions {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: auto;
  flex-shrink: 0;
}

/* Pill button */
.site-nav__pill {
  display: flex;
  align-items: center;
  gap: 6px;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: var(--c-text-100);
  font-size: 13px;
  font-weight: 500;
  padding: 6px 14px;
  border-radius: var(--r-pill);
  transition: all 0.2s;
  white-space: nowrap;
}
.site-nav__pill:hover {
  background: rgba(255, 255, 255, 0.11);
  border-color: rgba(255, 255, 255, 0.2);
}

/* Date text */
.site-nav__date {
  font-size: 12px;
  color: var(--c-text-35);
  font-weight: 300;
  white-space: nowrap;
}

/* ── Desktop auth links (Login / Sign out) ── */
.site-nav__auth-link {
  font-size: 13px;
  font-weight: 500;
  color: var(--c-text-55);
  padding: 6px 10px;
  border-radius: var(--r-pill);
  transition:
    color 0.2s,
    background 0.2s;
  white-space: nowrap;
}
.site-nav__auth-link:hover {
  color: var(--c-text-100);
  background: rgba(255, 255, 255, 0.05);
}

/* ── Desktop "Join as Cub" register button ── */
.site-nav__auth-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(200, 169, 81, 0.12);
  border: 1px solid var(--c-border-gold);
  color: var(--c-gold);
  font-size: 13px;
  font-weight: 600;
  padding: 6px 14px;
  border-radius: var(--r-pill);
  transition: all 0.2s;
  white-space: nowrap;
}
.site-nav__auth-btn:hover {
  background: rgba(200, 169, 81, 0.2);
  border-color: var(--c-gold);
}

/* CTA badge */
.site-nav__badge {
  background: var(--c-red);
  color: white;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 6px 14px;
  border-radius: 4px;
  white-space: nowrap;
  transition: all 0.2s;
  box-shadow: 0 2px 8px rgba(192, 57, 43, 0.35);
  /* The badge carries the featured race's name, which is as long as its
     sponsor wants ("Churchill Tyres Supporting Macmillan Sprint
     Handicap" is 416px). A fixed budget keeps the tablet bar in fit;
     the link's title carries the full name. */
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 220px;
  min-width: 0;
}
.site-nav__badge-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Below 1280px the bar holds the race badge, the date and the account
   items beside the hamburger. If they still overflow (a long Cub name,
   signed-in extras), site.js adds these, and the race context gives way
   first: it repeats what the page already shows. */
.site-nav--tight .site-nav__badge {
  display: none;
}
.site-nav--tighter .site-nav__date {
  display: none;
}
.site-nav__badge:hover {
  background: var(--c-red-lt);
  transform: translateY(-1px);
}
/* site-nav__badge--gold replaced by site-nav__join-btn */

/* ─────────────────────────────────────────────────────────────
   2. HAMBURGER BUTTON
   Three-bar → X transform on open
───────────────────────────────────────────────────────────── */
.site-nav__hamburger {
  display: none; /* shown via media query below */
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--r-sm);
  cursor: pointer;
  transition:
    background 0.2s,
    border-color 0.2s;
  padding: 0;
  flex-shrink: 0;
}

.site-nav__hamburger:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(200, 169, 81, 0.3);
}

.site-nav__hamburger[aria-expanded="true"] {
  background: rgba(200, 169, 81, 0.12);
  border-color: rgba(200, 169, 81, 0.4);
}

.hamburger__bar {
  display: block;
  width: 18px;
  height: 2px;
  background: var(--c-text-75);
  border-radius: 2px;
  transform-origin: center;
  transition:
    transform 0.28s cubic-bezier(0.4, 0, 0.2, 1),
    opacity 0.2s ease,
    background 0.2s;
}

/* Animate bars into X when open */
.site-nav__hamburger[aria-expanded="true"] .hamburger__bar:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
  background: var(--c-gold);
}
.site-nav__hamburger[aria-expanded="true"] .hamburger__bar:nth-child(2) {
  opacity: 0;
  transform: scaleX(0);
}
.site-nav__hamburger[aria-expanded="true"] .hamburger__bar:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
  background: var(--c-gold);
}

/* ─────────────────────────────────────────────────────────────
   3. MOBILE OVERLAY (backdrop)
───────────────────────────────────────────────────────────── */
.mob-overlay {
  position: fixed;
  inset: 0;
  z-index: 290;
  background: rgba(5, 8, 18, 0.72);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.32s ease;
}

.mob-overlay.open {
  opacity: 1;
  pointer-events: all;
}

/* ─────────────────────────────────────────────────────────────
   4. MOBILE DRAWER
   Slides in from the right. Full-height panel, branded design.
───────────────────────────────────────────────────────────── */
.mob-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 300;
  width: min(340px, 88vw);
  background: #0e0e16;
  border-left: 1px solid rgba(212, 175, 55, 0.16);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  overflow-x: hidden;

  /* Slide-in from right */
  transform: translateX(100%);
  transition:
    transform 0.32s cubic-bezier(0.4, 0, 0.2, 1),
    box-shadow 0.32s cubic-bezier(0.4, 0, 0.2, 1);

  /* No shadow when closed — `transform: translateX(100%)` moves the
     box off-screen but the box-shadow is rendered relative to that
     transformed position, so a -16px / 70px-blur shadow still leaks
     ~86px back onto the visible page from the right edge. Keep the
     atmospheric glow but only paint it when the drawer is OPEN
     (see `.mob-drawer.open` below). */
  box-shadow: none;
}

/* Subtle vertical grid texture */
.mob-drawer::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 39px,
    rgba(200, 169, 81, 0.03) 39px,
    rgba(200, 169, 81, 0.03) 40px
  );
  pointer-events: none;
}

/* Atmospheric glow blob bottom-right */
.mob-drawer::after {
  content: "";
  position: absolute;
  bottom: -60px;
  right: -60px;
  width: 260px;
  height: 260px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(100, 15, 50, 0.35), transparent 70%);
  pointer-events: none;
}

.mob-drawer.open {
  transform: translateX(0);
  /* Paint the atmospheric glow only when the drawer is on-screen,
     so it shadows the page content the user just covered up — not
     the right edge of every page when the drawer is closed. */
  box-shadow:
    -16px 0 70px rgba(0, 0, 0, 0.55),
    -1px 0 0 rgba(212, 175, 55, 0.15),
    inset 1px 0 0 rgba(255, 255, 255, 0.04);
}

/* ── Drawer: Head ── */
.mob-drawer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px 18px;
  border-bottom: 1px solid rgba(212, 175, 55, 0.12);
  position: relative;
  z-index: 1;
  flex-shrink: 0;
}

.mob-drawer__brand {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
}
.mob-drawer__wordmark {
  display: flex;
  flex-direction: column;
  gap: 2px;
  line-height: 1;
}
.mob-drawer__wordmark-main {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 900;
  color: var(--c-gold);
  letter-spacing: 0.1em;
  line-height: 1;
}
.mob-drawer__wordmark-sub {
  font-family: var(--font-display);
  font-size: 9px;
  font-weight: 400;
  color: var(--c-text-35);
  letter-spacing: 0.36em;
  text-transform: uppercase;
  line-height: 1;
}

.mob-drawer__close {
  width: 36px;
  height: 36px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 50%;
  color: var(--c-text-55);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s;
  flex-shrink: 0;
}
.mob-drawer__close:hover {
  background: rgba(200, 169, 81, 0.12);
  border-color: rgba(200, 169, 81, 0.3);
  color: var(--c-gold);
}

/* ── Drawer: This Week pill ── */
.mob-drawer__race-pill {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px 24px;
  background: rgba(200, 169, 81, 0.06);
  border-bottom: 1px solid rgba(212, 175, 55, 0.12);
  position: relative;
  z-index: 1;
  flex-shrink: 0;
}

.mob-drawer__race-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--c-gold);
  flex-shrink: 0;
  animation: pulseDot 2s ease-in-out infinite;
}

.mob-drawer__race-label {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: var(--c-text-35);
  text-transform: uppercase;
  flex-shrink: 0;
}

.mob-drawer__race-name {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 700;
  color: var(--c-gold);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: color 0.2s;
}
.mob-drawer__race-name:hover {
  color: var(--c-gold-lt);
}

/* ── Drawer: Nav links ── */
.mob-drawer__nav {
  display: flex;
  flex-direction: column;
  padding: 12px 0;
  flex: 1;
  position: relative;
  z-index: 1;
}

.mob-drawer__link {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 15px 24px;
  color: var(--c-text-75);
  text-decoration: none;
  transition:
    background 0.18s,
    color 0.18s;
  position: relative;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.mob-drawer__link:last-child {
  border-bottom: none;
}

.mob-drawer__link:hover,
.mob-drawer__link:focus-visible {
  background: rgba(255, 255, 255, 0.07);
  color: var(--c-text-100);
}

/* Gold left-bar on hover */
.mob-drawer__link::before {
  content: "";
  position: absolute;
  left: 0;
  top: 10%;
  bottom: 10%;
  width: 2px;
  background: var(--c-gold);
  border-radius: 1px;
  transform: scaleY(0);
  transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.mob-drawer__link:hover::before,
.mob-drawer__link:focus-visible::before {
  transform: scaleY(1);
}

/* Featured link (Grand National) gets gold treatment */
.mob-drawer__link--featured {
  background: rgba(212, 175, 55, 0.07);
}
.mob-drawer__link--featured::before {
  background: var(--c-gold);
}
.mob-drawer__link--featured .mob-drawer__link-text {
  color: var(--c-gold-lt);
}
.mob-drawer__link--featured:hover {
  background: rgba(212, 175, 55, 0.12);
}

/* Group-header label inside a mobile accordion body — parallels the
   desktop `.site-nav__dropdown-section` so both surfaces read the
   same taxonomy. Sits between sub-items, no tap target of its own,
   the tiny top-border acts as a divider between groups. */
.mob-drawer__section {
  padding: 12px 20px 4px 52px;
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-text-35);
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  margin-top: 4px;
}
.mob-drawer__section:first-child {
  border-top: 0;
  margin-top: 0;
}

.mob-drawer__link-icon {
  font-size: 20px;
  flex-shrink: 0;
  width: 28px;
  text-align: center;
}

.mob-drawer__link-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 16px;
  font-weight: 500;
  flex: 1;
  line-height: 1.2;
}

/* Sub-label under link text */
.mob-drawer__link-sub {
  font-size: 11px;
  color: var(--c-text-35);
  font-weight: 400;
  line-height: 1;
}

/* Year/edition tag */
.mob-drawer__link-tag {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.1em;
  background: var(--c-gold);
  color: var(--c-midnight);
  padding: 1px 6px;
  border-radius: 2px;
  vertical-align: middle;
  margin-left: 6px;
}

/* Chevron arrow */
.mob-drawer__link-arrow {
  font-size: 20px;
  color: var(--c-text-35);
  flex-shrink: 0;
  transition:
    transform 0.2s,
    color 0.2s;
}
.mob-drawer__link:hover .mob-drawer__link-arrow {
  transform: translateX(3px);
  color: var(--c-text-55);
}

/* ── Drawer: Divider ── */
.mob-drawer__divider {
  height: 1px;
  background: linear-gradient(
    to right,
    transparent,
    rgba(200, 169, 81, 0.2) 30%,
    rgba(200, 169, 81, 0.2) 70%,
    transparent
  );
  margin: 4px 24px;
  flex-shrink: 0;
  position: relative;
  z-index: 1;
}

/* ── Drawer: CTA group ── */
.mob-drawer__cta-group {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px 24px;
  position: relative;
  z-index: 1;
  flex-shrink: 0;
}

.mob-drawer__cta-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: var(--c-gold);
  color: var(--c-midnight);
  font-weight: 700;
  font-size: 14px;
  padding: 13px 20px;
  border-radius: var(--r-sm);
  text-align: center;
  transition:
    background 0.2s,
    transform 0.15s;
}
.mob-drawer__cta-btn:hover {
  background: var(--c-gold-lt);
  transform: translateY(-1px);
}

.mob-drawer__cta-ghost {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--c-text-75);
  font-weight: 500;
  font-size: 14px;
  padding: 12px 20px;
  border-radius: var(--r-sm);
  text-align: center;
  transition: all 0.2s;
}
.mob-drawer__cta-ghost:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.18);
  color: var(--c-text-100);
}

/* ── Drawer: Footer ── */
.mob-drawer__footer {
  padding: 14px 24px 28px;
  position: relative;
  z-index: 1;
  flex-shrink: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}
.mob-drawer__footer p {
  font-size: 11px;
  color: var(--c-text-35);
  line-height: 1.5;
  opacity: 0.55;
}

/* Stagger nav link entrance when drawer opens */
.mob-drawer.open .mob-drawer__link {
  animation: slideInRight 0.3s ease both;
}
.mob-drawer.open .mob-drawer__link:nth-child(1) {
  animation-delay: 0.06s;
}
.mob-drawer.open .mob-drawer__link:nth-child(2) {
  animation-delay: 0.1s;
}
.mob-drawer.open .mob-drawer__link:nth-child(3) {
  animation-delay: 0.14s;
}
.mob-drawer.open .mob-drawer__link:nth-child(4) {
  animation-delay: 0.18s;
}

@keyframes slideInRight {
  from {
    opacity: 0;
    transform: translateX(16px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Prevent body scroll when drawer is open */
body.drawer-open {
  overflow: hidden;
  /* On iOS, prevent rubber-band scroll bleeding through */
  position: fixed;
  width: 100%;
}

/* ─────────────────────────────────────────────────────────────
   5. SITE FOOTER
───────────────────────────────────────────────────────────── */
/* ═══════════════════════════════════════════════════════════
   SITE FOOTER  (.sf prefix — scoped to footer partial)
   Structure:
   sf            → outer <footer>
   sf__shell     → max-width container
   sf__top       → brand · tagline · contact
   sf__nav-grid  → 4-column link columns
   sf__features  → product highlight strip
   sf__base      → legal + gamble aware + copyright
═══════════════════════════════════════════════════════════ */

.sf {
  position: relative;
  background: #060709;
  border-top: 1px solid rgba(212, 175, 55, 0.1);
  margin-top: auto;
  overflow: hidden;
}

/* Ambient background glow */
.sf__aurora {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(
      ellipse 60% 50% at 0% 100%,
      rgba(34, 60, 151, 0.08),
      transparent 60%
    ),
    radial-gradient(
      ellipse 50% 40% at 100% 50%,
      rgba(114, 25, 40, 0.06),
      transparent 55%
    );
  pointer-events: none;
}

.sf__shell {
  position: relative;
  z-index: 1;
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 var(--page-gutter);
}

/* ── TOP ROW ── */
.sf__top {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 32px;
  align-items: center;
  padding: 40px 0 36px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

/* Brand */
.sf__brand {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  flex-shrink: 0;
}

.sf__mark {
  width: 28px;
  height: 46px;
  flex-shrink: 0;
}

.sf__wordmark {
  display: flex;
  flex-direction: column;
  gap: 2px;
  line-height: 1;
}

.sf__wordmark-main {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 700;
  color: var(--c-gold);
  letter-spacing: 0.12em;
  line-height: 1;
}

.sf__wordmark-sub {
  font-family: var(--font-display);
  font-size: 8px;
  font-weight: 400;
  color: var(--c-text-35);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  line-height: 1;
}

/* Tagline */
.sf__tagline {
  font-family: var(--font-display);
  font-size: clamp(14px, 1.6vw, 18px);
  font-weight: 700;
  color: rgba(236, 238, 245, 0.4);
  line-height: 1.45;
  margin: 0;
  letter-spacing: -0.01em;
  text-align: center;
}

.sf__tagline em {
  font-style: italic;
  color: var(--c-gold);
  opacity: 0.7;
}

/* Contact */
.sf__contact {
  display: flex;
  flex-direction: column;
  gap: 4px;
  text-align: right;
  flex-shrink: 0;
}

.sf__contact-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-text-35);
}

.sf__contact-email {
  font-size: 13px;
  font-weight: 600;
  color: var(--c-gold);
  text-decoration: none;
  transition:
    color 0.2s,
    opacity 0.2s;
  opacity: 0.8;
}

.sf__contact-email:hover {
  opacity: 1;
  text-decoration: underline;
}

/* ── Contact channel row — email + social pills inline.
   Order driven by SocialLink.order; rendering driven by the
   site_contact context processor. Right-aligned on desktop to
   match the existing .sf__contact; flips left at <=768px via
   the dedicated breakpoint below. */
.sf__contact-channels {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: baseline;
  gap: 6px 14px;
}
.sf__contact-channel {
  font-size: 13px;
  font-weight: 600;
  color: var(--c-gold);
  text-decoration: none;
  opacity: 0.8;
  transition:
    color 0.2s,
    opacity 0.2s;
  white-space: nowrap;
}
.sf__contact-channel:hover,
.sf__contact-channel:focus-visible {
  opacity: 1;
  text-decoration: underline;
  outline: none;
}
@media (max-width: 768px) {
  .sf__contact-channels {
    justify-content: flex-start;
  }
}

/* ── NAV COLUMNS ── */
.sf__nav-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 32px;
  padding: 36px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.sf__nav-heading {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--c-gold);
  opacity: 0.7;
  margin: 0 0 14px;
}

.sf__nav-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.sf__nav-list a {
  font-size: 13px;
  color: var(--c-text-35);
  text-decoration: none;
  transition: color 0.18s;
  line-height: 1.3;
}

.sf__nav-list a:hover {
  color: var(--c-text-75);
}

/* ── PRODUCT FEATURE STRIP ── */
.sf__features {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  padding: 24px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.sf__feature-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid rgba(255, 255, 255, 0.06);
  text-decoration: none;
  color: inherit;
  transition:
    border-color 0.18s,
    background 0.18s,
    transform 0.15s;
}

.sf__feature-card:hover {
  border-color: rgba(212, 175, 55, 0.22);
  background: rgba(212, 175, 55, 0.04);
  transform: translateY(-2px);
}

.sf__feature-icon {
  font-size: 20px;
  flex-shrink: 0;
  line-height: 1;
}

.sf__feature-card strong {
  display: block;
  font-size: 12px;
  font-weight: 700;
  color: var(--c-text-75);
  margin-bottom: 2px;
  line-height: 1.2;
}

.sf__feature-card span {
  display: block;
  font-size: 11px;
  color: var(--c-text-35);
  line-height: 1.4;
}

/* ── BASE STRIP ── */
.sf__base {
  padding: 20px 0 28px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
  text-align: center;
}

.sf__legal {
  font-size: 11px;
  line-height: 1.65;
  color: rgba(236, 238, 245, 0.18);
  margin: 0;
  max-width: 68ch;
}

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

.sf__gamble-link {
  font-size: 11px;
  font-weight: 600;
  color: var(--c-gold);
  text-decoration: none;
  opacity: 0.6;
  transition: opacity 0.18s;
}

.sf__gamble-link:hover {
  opacity: 1;
  text-decoration: underline;
}

.sf__gamble-link--dim {
  color: var(--c-text-35);
  font-weight: 400;
}

.sf__gamble-sep {
  color: rgba(255, 255, 255, 0.12);
  font-size: 11px;
}

.sf__copyright {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.14);
}

/* ── RESPONSIVE ── */
@media (max-width: 900px) {
  .sf__top {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto;
    gap: 20px;
    padding: 28px 0 24px;
  }

  .sf__tagline {
    grid-column: 1 / -1;
    text-align: left;
    order: 3;
  }

  .sf__contact {
    text-align: left;
  }

  .sf__nav-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
  }

  .sf__features {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 600px) {
  .sf__shell {
    padding: 0 var(--space-5);
  }

  .sf__top {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    gap: 16px;
  }

  .sf__tagline {
    order: unset;
  }
  .sf__contact {
    text-align: left;
  }

  .sf__nav-grid {
    grid-template-columns: 1fr 1fr;
    gap: 20px;
  }

  .sf__features {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .sf__gamble-row {
    flex-direction: column;
    gap: 6px;
  }
}

@media (max-width: 400px) {
  .sf__nav-grid {
    grid-template-columns: 1fr;
  }
}

/* ─────────────────────────────────────────────────────────────
   6. TICKER BAR
───────────────────────────────────────────────────────────── */
.ticker-bar {
  background: #0d0d14;
  border-top: 1px solid rgba(212, 175, 55, 0.1);
  border-bottom: 1px solid rgba(212, 175, 55, 0.1);
  height: 40px;
  display: flex;
  align-items: center;
  overflow: hidden;
}
.ticker-bar__badge {
  display: flex;
  align-items: center;
  gap: 7px;
  background: var(--c-red);
  color: white;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 0 18px;
  height: 100%;
  white-space: nowrap;
  flex-shrink: 0;
  border-right: 1px solid rgba(0, 0, 0, 0.35);
}
.ticker-bar__track {
  flex: 1;
  overflow: hidden;
}
.ticker-bar__inner {
  display: flex;
  align-items: center;
  white-space: nowrap;
  animation: ticker-scroll 55s linear infinite;
}
@keyframes ticker-scroll {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}
.ticker-bar__item {
  font-size: 12px;
  color: rgba(234, 234, 240, 0.5);
  padding: 0 22px;
}
.ticker-bar__item strong {
  color: var(--c-text-100);
  font-weight: 600;
}
.ticker-bar__item--urgent {
  color: rgba(255, 155, 155, 0.88);
}
.ticker-bar__item--urgent strong {
  color: #ffcccc;
}
.ticker-bar__sep {
  color: var(--c-gold);
  opacity: 0.35;
  font-size: 9px;
}

/* ─────────────────────────────────────────────────────────────
   MOBILE DRAWER AUTH SECTION
   Same items as desktop right actions
───────────────────────────────────────────────────────────── */
.mob-drawer__auth {
  display: flex;
  flex-direction: column;
  position: relative;
  z-index: 1;
}

/* Login link — subtle blue tint */
.mob-drawer__link--login .mob-drawer__link-icon {
  opacity: 0.8;
}
.mob-drawer__link--login .mob-drawer__link-text {
  color: var(--c-text-75);
}

/* CORP-10 · Gold-tinted mobile drawer variant for Corporate experience. */
.mob-drawer__link--gold {
  background: linear-gradient(
    to right,
    rgba(212, 175, 55, 0.08),
    transparent 68%
  );
  border-top: 1px solid rgba(212, 175, 55, 0.16);
}
.mob-drawer__link-icon--gold {
  background: rgba(212, 175, 55, 0.16);
  border: 1px solid rgba(212, 175, 55, 0.42);
  color: var(--c-gold);
}

/* Register / Join as Cub — gold highlight */
.mob-drawer__link--register {
  background: rgba(200, 169, 81, 0.07);
}
.mob-drawer__link--register::before {
  background: var(--c-gold);
}
.mob-drawer__link--register .mob-drawer__link-text {
  color: var(--c-gold-lt);
}
.mob-drawer__link--register:hover {
  background: rgba(200, 169, 81, 0.12);
}

/* Cub profile — gold tint */
.mob-drawer__link--auth {
  background: rgba(200, 169, 81, 0.05);
}
.mob-drawer__link--auth .mob-drawer__link-text {
  color: var(--c-gold-lt);
}

/* Sign out — muted red tint on hover */
.mob-drawer__link--signout .mob-drawer__link-text {
  color: var(--c-text-55);
}
.mob-drawer__link--signout:hover {
  background: rgba(200, 0, 30, 0.08);
}
.mob-drawer__link--signout:hover .mob-drawer__link-text {
  color: rgba(255, 130, 130, 0.9);
}
.mob-drawer__link--signout .mob-drawer__link-arrow {
  color: var(--c-text-35);
}

/* Hide desktop-only auth items on mobile */
@media (max-width: 900px) {
  .site-nav__auth-link {
    display: none;
  }
  .site-nav__auth-btn {
    display: none;
  }
}

/* ── Cub profile pill (authenticated state) ── */
.site-nav__pill--cub {
  background: rgba(200, 169, 81, 0.14);
  border-color: var(--c-border-gold);
  color: var(--c-gold);
  font-weight: 600;
  /* A fixed budget, so a long Cub name cannot push the nav out of fit:
     about twelve characters, then an ellipsis. The link's title carries
     the full name. */
  max-width: 150px;
  min-width: 0;
}
.site-nav__pill-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.site-nav__pill--cub:hover {
  background: rgba(200, 169, 81, 0.22);
  border-color: var(--c-gold);
}

/* ─────────────────────────────────────────────────────────────
   7. RESPONSIVE BREAKPOINTS
───────────────────────────────────────────────────────────── */

/* Links or hamburger: one or the other, never neither.
   The full link row needs about 1260px, so below 1280px the hamburger
   stands in for it. This used to switch at two different widths (links
   hidden at 1024px, hamburger shown at 900px), which left 901-1024px with
   no navigation at all, and 1025-1259px with Join / Login pushed off the
   right edge of the screen. */
@media (max-width: 1279px) {
  .site-nav__links {
    display: none;
  }
  .site-nav__hamburger {
    display: flex;
  }
}

/* Hide race badge + date when primary links are visible (they already show it).
   Scoped to .site-nav for weight: the plain .site-nav__date rule in the
   right-actions block further down sets display:flex and, coming later at
   equal specificity, used to win - so the date never actually hid. */
@media (min-width: 1280px) {
  .site-nav .site-nav__badge {
    display: none;
  }
  .site-nav .site-nav__date {
    display: none;
  }
  /* Signed in, the bar is too full for Sign out as well as the links:
     it lives in the footer, the menu and on the profile page instead. */
  .site-nav .site-nav__auth-link {
    display: none;
  }
}

/* The back link ("← Races", "← Cubs", on 22 page types) only shows while
   the hamburger does. On desktop the full link row takes its place: with
   it, the row does not fit the 1280px nav. */
@media (min-width: 1280px) {
  .site-nav__back {
    display: none;
  }
}

/* Wider than that the row usually fits, but not always: signed-in extras
   or an unusually long label can still push Join / Login off screen.
   site.js measures the nav and adds this class when the row does not fit,
   which gives that page the hamburger layout, back link included. */
.site-nav--compact .site-nav__links {
  display: none;
}
.site-nav--compact .site-nav__hamburger {
  display: flex;
}
.site-nav--compact .site-nav__back {
  display: flex;
}

@media (max-width: 900px) {

  /* Hide action pills on small screens — they're in the drawer.
     .site-nav for weight, as above. */
  .site-nav__pill {
    display: none;
  }
  .site-nav .site-nav__badge {
    display: none;
  }
  .site-nav .site-nav__date {
    display: none;
  }
}

/* ── Mobile nav-inner tightening ────────────────────────────────
   The base .site-nav__inner uses 32px horizontal padding (space-6)
   and a 24px gap (space-5). On a 375px phone that eats 64px of
   horizontal real-estate before content even starts, which leaves
   no room for the hamburger after the logo + date + cubs pill +
   admin chip — the hamburger ends up clipped at the right edge.
   This tightens both numbers on mobile and pins the hamburger to
   the right with margin-left:auto so it always survives. */
@media (max-width: 720px) {
  .site-nav__inner {
    padding: 0 14px;
    gap: 10px;
  }
  /* Pin the hamburger to the right edge regardless of what's
     beside it — the auto margin pushes it as far right as the
     14px padding allows. */
  .site-nav__hamburger {
    margin-left: auto;
    width: 38px;
    height: 38px;
  }
}

@media (max-width: 420px) {
  /* Very narrow phones: shave a few more pixels by tightening
     padding and gap further. The 0/6 cubs pill + admin chip
     stay visible; the date is already hidden by the ≤900px rule. */
  .site-nav__inner {
    padding: 0 10px;
    gap: 8px;
  }
}

/* Footer stack on mobile */
@media (max-width: 600px) {
  /* site-footer legacy rules removed — footer now uses .sf partial */
}

/* ── Join Free nav link — highlighted ─────────────────────── */
.site-nav__link--join {
  color: var(--c-gold) !important;
  font-weight: 700 !important;
  border: 1px solid rgba(212, 175, 55, 0.35);
  border-radius: var(--r-pill);
  padding: 5px 14px !important;
  transition:
    background 0.18s,
    border-color 0.18s;
}
.site-nav__link--join:hover {
  background: rgba(212, 175, 55, 0.1);
  border-color: var(--c-gold);
}
.mob-drawer__link--join {
  background: rgba(212, 175, 55, 0.06);
  border: 1px solid rgba(212, 175, 55, 0.2);
  border-radius: var(--r-md);
  margin: 4px 0;
}

/* ── Big Race nav link — gold trophy treatment ───────────── */
.site-nav__link--race {
  color: var(--c-gold) !important;
  font-weight: 600 !important;
}
.site-nav__link--race:hover {
  background: rgba(212, 175, 55, 0.1);
  color: var(--c-gold-lt) !important;
}

/* ── Join Free CTA in mobile auth section ────────────────── */
.mob-drawer__link--join-cta {
  background: rgba(200, 169, 81, 0.1);
  border-left: 2px solid var(--c-gold);
}
.mob-drawer__link--join-cta .mob-drawer__link-text {
  color: var(--c-gold-lt);
}
.mob-drawer__link--join-cta:hover {
  background: rgba(200, 169, 81, 0.16);
}
.mob-drawer__link--join-cta::before {
  background: var(--c-gold);
}

/* ── Gold Join Free badge in desktop right actions ───────── */
.site-nav__badge--gold {
  background: linear-gradient(
    135deg,
    rgba(200, 169, 81, 0.2),
    rgba(200, 169, 81, 0.12)
  );
  border: 1px solid rgba(212, 175, 55, 0.45);
  color: var(--c-gold);
  box-shadow: 0 0 12px rgba(200, 169, 81, 0.15);
}
.site-nav__badge--gold:hover {
  background: rgba(200, 169, 81, 0.28);
  border-color: var(--c-gold);
  transform: translateY(-1px);
}

/* ─────────────────────────────────────────────────────────────
   DESKTOP NAV — RIGHT ACTIONS REFRESH
───────────────────────────────────────────────────────────── */

/* Live dot before date */
.site-nav__date {
  display: flex;
  align-items: center;
  gap: 6px;
}
.site-nav__date-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--c-gold);
  flex-shrink: 0;
  animation: pulseDot 2.4s ease-in-out infinite;
}

/* Vertical separator between race context and auth */
.site-nav__sep {
  display: block;
  width: 1px;
  height: 20px;
  background: rgba(255, 255, 255, 0.1);
  flex-shrink: 0;
}

/* ── Join Free button — outline idle; gold liquid fill on hover ── */
.site-nav__join-btn {
  --liquid: var(--c-gold);
  --ink: #06070d;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  border: 1px solid rgba(212, 175, 55, 0.85);
  color: var(--c-gold);
  font-size: 13px;
  font-weight: 700;
  padding: 7px 16px;
  border-radius: 999px;
  white-space: nowrap;
  transition: color 0.4s, border-color 0.4s;
  box-shadow: none;
  letter-spacing: 0.01em;
}
.site-nav__join-btn::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: -25%;
  width: 150%;
  height: 200%;
  background: var(--liquid);
  border-radius: 45% 55% 0 0 / 25% 25% 0 0;
  transform: translateY(100%);
  transition: transform 0.65s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: -1;
  pointer-events: none;
}
.site-nav__join-btn:hover::before,
.site-nav__join-btn:focus-visible::before {
  transform: translateY(5%);
  animation: sat-btn-liquid-wave 2.5s ease-in-out infinite 0.65s;
}
.site-nav__join-btn:hover,
.site-nav__join-btn:focus-visible {
  background: transparent;
  border-color: var(--c-gold);
  box-shadow: none;
  transform: none;
  color: var(--ink);
  filter: none;
}

/* Login — quiet text pill */
.site-nav__login-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: transparent;
  border: 1px solid transparent;
  color: rgba(242, 236, 223, 0.78);
  font-size: 13px;
  font-weight: 500;
  padding: 7px 12px;
  border-radius: 999px;
  white-space: nowrap;
  transition: all 0.2s;
}
.site-nav__login-btn:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: transparent;
  color: #faf7f0;
}
.site-nav__login-btn .site-nav__auth-icon {
  font-size: 14px;
  opacity: 0.7;
}

/* ── Sign out link — keep it subtle ── */
.site-nav__auth-link .site-nav__auth-icon {
  font-size: 13px;
  opacity: 0.6;
}

/* Hide new auth buttons on mobile — drawer handles it */
@media (max-width: 900px) {
  .site-nav__join-btn {
    display: none;
  }
  .site-nav__login-btn {
    display: none;
  }
  .site-nav__sep {
    display: none;
  }
}

/* ═══════════════════════════════════════════════════════
   VIRTUAL DROPDOWN — desktop nav
═══════════════════════════════════════════════════════ */
.site-nav__dropdown {
  position: relative;
}

.site-nav__dropdown-trigger {
  display: flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--font-body);
}

.site-nav__caret {
  width: 10px;
  height: 6px;
  margin-left: 1px;
  opacity: 0.75;
  transition: transform 0.22s ease;
  flex-shrink: 0;
}

.site-nav__dropdown.open .site-nav__caret {
  transform: rotate(180deg);
}

.site-nav__link.active .site-nav__caret {
  opacity: 0.9;
}

.site-nav__dropdown-menu {
  position: absolute;
  top: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%);
  min-width: 240px;
  background: rgba(8, 10, 18, 0.97);
  border: 1px solid rgba(212, 175, 55, 0.2);
  border-radius: 10px;
  padding: 6px;
  backdrop-filter: blur(20px);
  box-shadow:
    0 16px 48px rgba(0, 0, 0, 0.7),
    0 0 0 1px rgba(255, 255, 255, 0.04) inset;
  opacity: 0;
  pointer-events: none;
  transform: translateX(-50%) translateY(-6px);
  transition:
    opacity 0.2s ease,
    transform 0.2s ease;
  z-index: 200;
}

/* Small triangle pointer */
.site-nav__dropdown-menu::before {
  content: "";
  position: absolute;
  top: -6px;
  left: 50%;
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-top: 0;
  border-bottom-color: rgba(212, 175, 55, 0.2);
}
.site-nav__dropdown-menu::after {
  content: "";
  position: absolute;
  top: -5px;
  left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top: 0;
  border-bottom-color: rgba(8, 10, 18, 0.97);
}

.site-nav__dropdown.open .site-nav__dropdown-menu {
  opacity: 1;
  pointer-events: all;
  transform: translateX(-50%) translateY(0);
}

.site-nav__dropdown-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 7px;
  text-decoration: none;
  color: var(--c-text-75);
  transition:
    background 0.15s,
    color 0.15s;
  font-size: 13px;
}

/* Section header inside the News dropdown — small caps label that
   groups a run of dropdown items ("Today's Edge", "Read"). Not a
   menuitem; purely visual. Kept subtle so the eye still tracks the
   items themselves as the primary content. */
.site-nav__dropdown-section {
  padding: 10px 14px 4px;
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-text-35);
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  margin-top: 2px;
}
.site-nav__dropdown-section:first-child {
  border-top: 0;
  margin-top: 0;
}
/* Kill the item-to-item border above a section header so the header
   itself provides the divider. */
.site-nav__dropdown-section + .site-nav__dropdown-item {
  border-top: 0;
}

/* Sub-section label inside a dropdown menu — small caps eyebrow
 * that groups items visually without adding a click target. Used
 * to slot Ante Post books under the Races dropdown. */
.site-nav__dropdown-subhead {
  padding: 12px 12px 4px;
  margin-top: 6px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  font-family:
    system-ui,
    -apple-system,
    "Segoe UI",
    sans-serif;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--c-gold);
  opacity: 0.75;
}

/* Same treatment inside the mobile drawer accordion body. */
.mob-drawer__subhead {
  padding: 14px 20px 6px;
  margin-top: 8px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  font-family:
    system-ui,
    -apple-system,
    "Segoe UI",
    sans-serif;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--c-gold);
  opacity: 0.75;
}

.site-nav__dropdown-item:hover,
.site-nav__dropdown-item.active {
  background: rgba(212, 175, 55, 0.09);
  color: var(--c-text-100);
}

.site-nav__dropdown-item.active .site-nav__di-name {
  color: var(--c-gold);
}

.site-nav__di-icon {
  font-size: 16px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
}

/* Stroke SVG icons in the top-level nav pills. */
.site-nav__link-ico {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  stroke: currentColor;
  color: inherit;
  margin-right: 0;
  vertical-align: middle;
}

/* Stroke SVG icons inside dropdown rows. */
.site-nav__di-icon-svg {
  width: 18px;
  height: 18px;
  stroke: currentColor;
  color: var(--c-text-70, #a9b0bd);
}
.site-nav__dropdown-item:hover .site-nav__di-icon-svg,
.site-nav__dropdown-item.active .site-nav__di-icon-svg {
  color: var(--c-gold);
}

/* CORP-10 · Gold-tinted dropdown item for the Corporate experience.
   Same shape as siblings, warmer palette so it reads as premium
   without shouting. Subtle top divider signals "different product". */
.site-nav__dropdown-item--gold {
  border-top: 1px solid rgba(212, 175, 55, 0.18);
  background: linear-gradient(
    to right,
    rgba(212, 175, 55, 0.06),
    transparent 62%
  );
}
.site-nav__dropdown-item--gold:hover {
  background: linear-gradient(
    to right,
    rgba(212, 175, 55, 0.14),
    rgba(212, 175, 55, 0.02) 62%
  );
}
.site-nav__di-icon--gold {
  background: rgba(212, 175, 55, 0.14);
  border: 1px solid rgba(212, 175, 55, 0.42);
}
.site-nav__dropdown-item--gold .site-nav__di-icon-svg {
  color: var(--c-gold);
}

/* Character portraits. inline-block pins over global `img { display: block }`. */
.site-nav__portrait,
.site-nav__link-portrait {
  display: inline-block;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
}
.site-nav__link-portrait {
  width: 18px;
  height: 18px;
  vertical-align: -4px;
  margin-right: 6px;
}
.site-nav__dropdown-item:hover .site-nav__portrait,
.site-nav__dropdown-item.active .site-nav__portrait {
  border-color: rgba(212, 175, 55, 0.55);
}

/* Mobile drawer variants. */
.mob-drawer__link-ico {
  width: 20px;
  height: 20px;
  stroke: currentColor;
  color: var(--c-text-70, #a9b0bd);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.mob-drawer__link-portrait {
  display: inline-block;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.site-nav__di-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.site-nav__di-name {
  font-weight: 700;
  font-size: 13px;
  line-height: 1.2;
  color: var(--c-text-100);
}

.site-nav__di-sub {
  font-size: 10px;
  color: var(--c-text-35);
  letter-spacing: 0.03em;
}

/* Divider between items */
.site-nav__dropdown-item + .site-nav__dropdown-item {
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 0;
}
.site-nav__dropdown-item:first-child {
  border-radius: 7px 7px 0 0;
}
.site-nav__dropdown-item:last-child {
  border-radius: 0 0 7px 7px;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}

/* ═══════════════════════════════════════════════════════
   VIRTUAL ACCORDION — mobile drawer
═══════════════════════════════════════════════════════ */
.mob-drawer__accordion-trigger {
  width: 100%;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  font-family: var(--font-body);
  justify-content: flex-start;
}

.mob-drawer__acc-caret {
  width: 10px;
  height: 6px;
  margin-left: auto;
  flex-shrink: 0;
  transition: transform 0.22s ease;
  color: var(--c-text-35);
}

.mob-drawer__accordion.open .mob-drawer__acc-caret {
  transform: rotate(180deg);
}

.mob-drawer__accordion-body {
  max-height: 0;
  overflow: hidden;
  /* max-height driven by JS scrollHeight for reliability */
  transition: max-height 0.32s cubic-bezier(0.4, 0, 0.2, 1);
  background: rgba(212, 175, 55, 0.03);
  border-left: 2px solid rgba(212, 175, 55, 0.2);
  margin-left: 20px;
  border-radius: 0 0 6px 6px;
}

.mob-drawer__link--sub {
  padding-left: 16px;
  font-size: 13px;
}

.mob-drawer__link--sub .mob-drawer__link-icon {
  font-size: 15px;
}

/* ═══════════════════════════════════════════════════════
   NOTIFICATION SYSTEM
   — nav dot on Cubs trigger
   — count badges inside dropdown items
   — global dismissible banner
═══════════════════════════════════════════════════════ */

/* ── Desktop: pulsing dot on Cubs button ── */
.site-nav__notif-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--c-gold);
  margin: 0 2px 5px 3px;
  vertical-align: middle;
  flex-shrink: 0;
  animation: notifPulse 2.4s ease-in-out infinite;
}
@keyframes notifPulse {
  0%,
  100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.5;
    transform: scale(0.75);
  }
}

/* ── Desktop: count badge inside dropdown item name ── */
.site-nav__di-name {
  display: flex;
  align-items: center;
  gap: 6px;
}
.site-nav__di-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 9px;
  background: var(--c-gold);
  color: #03040a;
  font-size: 10px;
  font-weight: 900;
  line-height: 1;
  flex-shrink: 0;
}

/* ── Mobile: dot on Cubs accordion trigger ── */
.mob-drawer__notif-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--c-gold);
  margin-left: 6px;
  vertical-align: middle;
  animation: notifPulse 2.4s ease-in-out infinite;
}

/* ── Mobile: count badge on sub-links ── */
.mob-drawer__notif-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 9px;
  background: var(--c-gold);
  color: #03040a;
  font-size: 10px;
  font-weight: 900;
  margin-left: 6px;
  vertical-align: middle;
  flex-shrink: 0;
}

/* ── Global notification banner ── */
.notif-banner {
  position: relative;
  z-index: 90;
  background: rgba(212, 175, 55, 0.08);
  border-bottom: 1px solid rgba(212, 175, 55, 0.22);
  /* slides down from behind nav */
  animation: notifSlideDown 0.35s cubic-bezier(0.2, 0, 0.2, 1) both;
}
.notif-banner.notif-banner--dismissed {
  display: none;
}
@keyframes notifSlideDown {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.notif-banner__inner {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 var(--page-gutter);
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.notif-banner__content {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  flex: 1;
}
.notif-banner__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--c-gold);
  flex-shrink: 0;
  animation: notifPulse 2.4s ease-in-out infinite;
}
.notif-banner__text {
  font-size: 13px;
  font-weight: 600;
  color: rgba(212, 175, 55, 0.9);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.notif-banner__link {
  color: var(--c-gold);
  text-decoration: none;
  font-weight: 800;
  border-bottom: 1px solid rgba(212, 175, 55, 0.3);
  transition: border-color 0.15s;
}
.notif-banner__link:hover {
  border-color: var(--c-gold);
}
.notif-banner__dismiss {
  background: none;
  border: none;
  cursor: pointer;
  color: rgba(212, 175, 55, 0.5);
  font-size: 12px;
  padding: 6px;
  border-radius: 4px;
  flex-shrink: 0;
  font-family: var(--font-body);
  transition:
    color 0.15s,
    background 0.15s;
}
.notif-banner__dismiss:hover {
  color: var(--c-gold);
  background: rgba(212, 175, 55, 0.1);
}

/* Banner padding compensation — driven by body.has-notif-banner class
   (set server-side in base.html, removed client-side on dismiss via
   site.js). Replaces the earlier :has() rule so older browsers and
   JavaScript-disabled users get the same layout. Primary rule is in
   base.css next to .site-main. */

@media (max-width: 640px) {
  .notif-banner__inner {
    padding: 0 16px;
    height: 40px;
  }
  .notif-banner__text {
    font-size: 12px;
  }
}

/* ══════════════════════════════════════════════════════════════
   v2 POLISH — keyboard focus parity + reduced motion + safe area
   ══════════════════════════════════════════════════════════════
   Shipped on top of the existing nav/drawer/banner rules.       */

/* ── :focus-visible parity for desktop nav + banner ───────────
   Every interactive element on the site nav now signals state
   to keyboard users the same way it does to mouse users (WCAG
   2.1 AA). Mobile drawer links already had paired focus-visible
   rules — this block closes the desktop gap. */
.site-nav__link:focus-visible,
.site-nav__pill:focus-visible,
.site-nav__auth-link:focus-visible,
.site-nav__auth-btn:focus-visible,
.site-nav__back:focus-visible,
.site-nav__badge:focus-visible,
.site-nav__brand:focus-visible,
.site-nav__join-btn:focus-visible,
.site-nav__login-btn:focus-visible,
.site-nav__hamburger:focus-visible,
.site-nav__dropdown-trigger:focus-visible,
.site-nav__dropdown-item:focus-visible,
.notif-banner__link:focus-visible,
.notif-banner__dismiss:focus-visible,
.mob-drawer__cta-btn:focus-visible,
.mob-drawer__cta-ghost:focus-visible {
  outline: 2px solid var(--c-gold);
  outline-offset: 2px;
  border-radius: var(--r-sm, 6px);
}

/* ── Safe-area inset compensation ─────────────────────────────
   Mobile drawer extends under the iOS home-bar when opened in
   fullscreen; notif banner sits above the top notch. env()
   gracefully degrades to the fallback value on older browsers. */
.mob-drawer {
  padding-bottom: max(24px, env(safe-area-inset-bottom, 24px));
}
.notif-banner {
  padding-top: env(safe-area-inset-top, 0);
}

/* ── Global reduced-motion opt-out ────────────────────────────
   Universally honours prefers-reduced-motion: animations run
   ~instant, transitions effectively disabled, smooth-scroll off.
   Matches the pattern recommended by WAI-ARIA + W3C WCAG. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ─────────────────────────────────────────────────────────────
   8. RACES DROPDOWN — Today · Tomorrow · Big race grouped under
   one trigger. Reuses the existing `.site-nav__dropdown` and
   `.mob-drawer__accordion` patterns; only adds two small variants:
     – `.site-nav__dropdown-item--gold` for the big-race row
     – sub-item `.mob-drawer__link--featured` retains its gold tint
       inside the new accordion body.
───────────────────────────────────────────────────────────── */

.site-nav__dropdown-item--gold .site-nav__di-name {
  color: var(--c-gold);
}
.site-nav__dropdown-item--gold:hover .site-nav__di-name {
  color: var(--c-gold-lt);
}
.site-nav__dropdown-item--gold .site-nav__di-icon {
  filter: drop-shadow(0 0 6px rgba(212, 175, 55, 0.25));
}

/* ─────────────────────────────────────────────────────────────
   DEMO BANNER — first-visit onboarding prompt
   ─────────────────────────────────────────────────────────────
   Fixed band that drops below the nav on a visitor's first
   visit, suggesting the 60-second tour. localStorage-persisted
   dismissal means returners never see it. Hidden via [hidden]
   on first paint to avoid a flash before JS decides.
─────────────────────────────────────────────────────────────── */
.demo-banner {
  position: fixed;
  top: var(--nav-h, 60px);
  left: 0;
  right: 0;
  z-index: 90;
  background: linear-gradient(180deg, #f5e49a 0%, var(--c-gold) 70%, #c8a020 100%);
  color: #18120a;
  border-bottom: 1px solid rgba(0, 0, 0, 0.18);
  box-shadow: 0 4px 18px -6px rgba(0, 0, 0, 0.32);
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: 0.005em;
  animation: demoBannerDrop 0.42s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.demo-banner[hidden] {
  display: none !important;
}
.demo-banner.is-dismissing {
  animation: demoBannerLift 0.22s ease-in forwards;
}

@keyframes demoBannerDrop {
  from {
    transform: translateY(-100%);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}
@keyframes demoBannerLift {
  from {
    transform: translateY(0);
    opacity: 1;
  }
  to {
    transform: translateY(-100%);
    opacity: 0;
  }
}

.demo-banner__inner {
  max-width: var(--max-w, 1280px);
  margin: 0 auto;
  padding: 11px var(--space-6, 20px);
  display: flex;
  align-items: center;
  gap: 12px;
}
.demo-banner__icon {
  font-size: 17px;
  line-height: 1;
  filter: drop-shadow(0 1px 0 rgba(255, 255, 255, 0.4));
}
.demo-banner__text {
  flex: 1;
  color: rgba(24, 18, 10, 0.85);
}
.demo-banner__link {
  color: #18120a;
  font-weight: 800;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1.5px;
  text-decoration-color: rgba(24, 18, 10, 0.45);
  margin-left: 6px;
  transition: text-decoration-color 0.16s;
}
.demo-banner__link:hover {
  text-decoration-color: #18120a;
}
.demo-banner__arrow {
  display: inline-block;
  margin-left: 4px;
  transition: transform 0.18s ease;
}
.demo-banner__link:hover .demo-banner__arrow {
  transform: translateX(3px);
}
.demo-banner__dismiss {
  appearance: none;
  -webkit-appearance: none;
  background: rgba(0, 0, 0, 0.14);
  border: 1px solid rgba(0, 0, 0, 0.22);
  color: #18120a;
  font-size: 13px;
  font-weight: 800;
  line-height: 1;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  cursor: pointer;
  flex-shrink: 0;
  transition:
    background 0.15s,
    transform 0.12s;
}
.demo-banner__dismiss:hover {
  background: rgba(0, 0, 0, 0.24);
}
.demo-banner__dismiss:active {
  transform: scale(0.92);
}

/* The banner is fixed, so it covers whatever is beneath it. Publishing
   its height as --banner-h lets everything pinned to the top of the
   viewport clear it from one number: .site-main here, and the
   cinematic's screens and canvases, which are fixed and were being
   overlaid by it. .notif-banner needs none of this — it is in normal
   flow and pushes content down by itself. */
body.has-demo-banner {
  --banner-h: 48px;
}
body.has-demo-banner .site-main {
  padding-top: calc(var(--nav-h, 60px) + var(--banner-h));
}
body.has-demo-banner.has-notif-banner .site-main {
  padding-top: calc(var(--nav-h, 60px) + var(--banner-h) + 44px);
}
@media (max-width: 720px) {
  body.has-demo-banner {
    --banner-h: 56px;
  }
  body.has-demo-banner.has-notif-banner .site-main {
    padding-top: calc(var(--nav-h, 60px) + var(--banner-h) + 40px);
  }
  .demo-banner__inner {
    padding: 10px 14px;
    gap: 8px;
    font-size: 12.5px;
  }
  /* On narrow phones, drop the "New to Saturday Racing?" prefix
     to keep the link readable without truncation. */
  .demo-banner__text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}
@media (max-width: 420px) {
  .demo-banner__text {
    font-size: 12px;
  }
  .demo-banner__icon {
    display: none;
  }
}

/* ── Footer section styles (.sf--branded) ─────────────────────── */

.sf--branded {
  --sf-gold: #d8b14a;
  --sf-gold-soft: #f0ce6b;
  --sf-ink: #f5f2ea;
  background-color: #05070c;
  background-image:
    linear-gradient(
      100deg,
      rgba(5, 7, 12, 0.92) 0%,
      rgba(5, 7, 12, 0.78) 38%,
      rgba(5, 7, 12, 0.28) 72%,
      rgba(5, 7, 12, 0.45) 100%
    ),
    url("../public/img/footer/footer-bg.b4dbad01dfcf.webp");
  background-size: cover, cover;
  background-position:
    center,
    right center;
  background-repeat: no-repeat;
  border-top: 1px solid rgba(216, 177, 74, 0.14);
  /* The footer is shared chrome, so it sets its own type instead of
     inheriting the page's. Left to inherit, it turned serif on Bet of the
     Day (Iowan Old Style) and Learn (IBM Plex Serif), and tightened on the
     racecards (line-height 1.5). These are base.css's body values, restated
     so no page stylesheet can reach them. */
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 400;
  font-style: normal;
  line-height: 1.75;
  letter-spacing: normal;
  text-align: start;
  text-transform: none;
  color: var(--c-text-75);
}

.sf--branded .sf__aurora {
  background:
    radial-gradient(
      ellipse 50% 40% at 80% 70%,
      rgba(216, 177, 74, 0.08),
      transparent 60%
    ),
    radial-gradient(
      ellipse 40% 35% at 20% 20%,
      rgba(40, 70, 140, 0.08),
      transparent 55%
    );
}

.sf--branded .sf__shell {
  max-width: var(--max-w, 1280px);
  margin: 0 auto;
  padding: clamp(40px, 5vw, 64px) var(--page-gutter) 28px;
  box-sizing: border-box;
}

.sf--branded .sf__top {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas: "brand tagline contact";
  gap: 20px 24px;
  align-items: flex-start;
  padding: 0 0 36px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.sf--branded .sf__brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  grid-area: brand;
  align-self: center;
}

.sf--branded .sf__wordmark {
  display: none;
}

.sf--branded .sf__mark {
  width: 36px;
  height: auto;
  display: block;
}

.sf--branded .sf__tagline {
  grid-area: tagline;
  justify-self: start;
  margin: 0;
  font-family: "Playfair Display", Georgia, serif;
  font-size: clamp(28px, 3.4vw, 42px);
  font-weight: 500;
  line-height: 1.18;
  letter-spacing: 0.01em;
  color: #fff;
  text-align: left;
}

.sf--branded .sf__tagline em {
  font-style: normal;
  color: var(--sf-gold);
  opacity: 1;
}

.sf--branded .sf__contact {
  grid-area: contact;
  justify-self: end;
  text-align: right;
}

.sf--branded .sf__at {
  color: var(--sf-gold) !important;
  font-weight: 700;
  padding: 0 !important;
  margin: 0 !important;
  letter-spacing: 0 !important;
  display: inline;
}

.sf--branded .sf__contact-label {
  font-family: ui-monospace, "IBM Plex Mono", Menlo, monospace;
  font-size: 11px;
  letter-spacing: 0.2em;
  color: var(--sf-gold);
  opacity: 1;
  margin-bottom: 10px;
}

.sf--branded .sf__contact-channels {
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
}

.sf--branded .sf__contact-channel {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 500;
  color: rgba(245, 242, 234, 0.9);
  opacity: 1;
}

.sf--branded .sf__contact-channel img {
  display: block;
  flex: 0 0 15px;
  width: 15px;
  height: 15px;
}

.sf--branded .sf__at {
  color: var(--sf-gold) !important;
  font-weight: 700;
  padding: 0 !important;
  margin: 0 !important;
  letter-spacing: 0 !important;
  display: inline;
}

.sf--branded .sf__contact-channel:hover {
  color: var(--sf-gold-soft);
  text-decoration: none;
}

.sf--branded .sf__nav-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 28px 40px;
  padding: 40px 0 36px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.sf--branded .sf__nav-heading {
  font-family: ui-monospace, "IBM Plex Mono", Menlo, monospace;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: var(--sf-gold);
  opacity: 1;
  margin: 0 0 18px;
}

.sf--branded .sf__nav-list {
  gap: 14px;
}

.sf--branded .sf__nav-list a {
  font-size: 15px;
  font-weight: 500;
  color: rgba(245, 242, 234, 0.9);
}

.sf--branded .sf__nav-list a:hover {
  color: var(--sf-gold-soft);
}

.sf--branded .sf__features {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
  padding: 28px 0 32px;
  border-bottom: none;
}

.sf--branded .sf__feature-card {
  align-items: flex-start;
  gap: 12px;
  min-height: 104px;
  padding: 18px 14px;
  border-radius: 14px;
  background: rgba(10, 14, 22, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.22);
}

.sf--branded .sf__feature-card:hover {
  border-color: rgba(216, 177, 74, 0.35);
  background: rgba(216, 177, 74, 0.05);
  transform: translateY(-2px);
  box-shadow: 0 14px 32px rgba(0, 0, 0, 0.28);
}

.sf--branded .sf__feature-card--active {
  border-color: rgba(216, 177, 74, 0.85);
  box-shadow:
    0 0 0 1px rgba(216, 177, 74, 0.22),
    0 0 24px rgba(216, 177, 74, 0.12),
    0 12px 30px rgba(0, 0, 0, 0.28);
}

.sf--branded .sf__feature-icon {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  border-radius: 50%;
  border: 1px solid rgba(216, 177, 74, 0.4);
  background: rgba(216, 177, 74, 0.06);
  font-size: 0;
}

.sf--branded .sf__feature-icon img {
  display: block;
  width: 18px;
  height: 18px;
}

.sf--branded .sf__feature-card strong {
  display: block;
  font-family: "Playfair Display", Georgia, serif;
  font-size: 15px;
  font-weight: 500;
  color: #fff;
  margin-bottom: 4px;
}

.sf--branded .sf__feature-card > div > span {
  display: block;
  font-size: 12px;
  line-height: 1.45;
  color: rgba(245, 242, 234, 0.5);
}

.sf--branded .sf__feature-desc--gold,
.sf--branded .sf__feature-card--active > div > span {
  color: rgba(216, 177, 74, 0.92);
}

.sf--branded .sf__base {
  padding: 28px 0 8px;
  gap: 10px;
}

.sf--branded .sf__legal {
  margin: 0;
  font-size: 12px;
  line-height: 1.7;
  color: rgba(245, 242, 234, 0.55);
  max-width: 68ch;
}

.sf--branded .sf__legal--line2 {
  margin: 2px 0 0;
  font-size: 13px;
  line-height: 1.5;
}

.sf--branded .sf__legal-play {
  color: rgba(245, 242, 234, 0.92);
  font-weight: 600;
}

.sf--branded .sf__legal-accent {
  display: inline;
  color: var(--sf-gold-soft);
  font-weight: 700;
}

.sf--branded .sf__base-rule {
  width: min(420px, 70%);
  height: 1px;
  margin: 12px auto 6px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(216, 177, 74, 0.55),
    transparent
  );
}

.sf--branded .sf__gamble-row {
  gap: 12px;
}

.sf--branded .sf__gamble-link--dim {
  color: rgba(245, 242, 234, 0.45);
  font-size: 12px;
}

.sf--branded .sf__gamble-sep {
  color: rgba(245, 242, 234, 0.2);
}

.sf--branded .sf__copyright {
  margin: 4px 0 0;
  font-size: 11px;
  letter-spacing: 0.04em;
  color: rgba(245, 242, 234, 0.28);
}

@media (max-width: 1100px) {
  .sf--branded .sf__features {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {
  .sf--branded .sf__top {
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas:
      "brand tagline"
      "contact contact";
    gap: 14px 16px;
  }
  .sf--branded .sf__tagline,
  .sf--branded .sf__contact {
    justify-self: start;
    text-align: left;
  }
  .sf--branded .sf__contact-channels {
    align-items: flex-start;
  }
  .sf--branded .sf__nav-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .sf--branded .sf__features {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Mobile TOC: keep 2-col nav, tighten type + padding */
@media (max-width: 700px) {
  .sf--branded .sf__shell {
    padding: 28px var(--page-gutter) 20px;
  }

  .sf--branded .sf__top {
    gap: 16px;
    padding-bottom: 22px;
  }

  .sf--branded .sf__tagline {
    font-size: 24px;
    line-height: 1.2;
  }

  .sf--branded .sf__contact-label {
    font-size: 10px;
    margin-bottom: 8px;
  }

  .sf--branded .sf__contact-channel {
    font-size: 12px;
  }

  .sf--branded .sf__nav-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px 20px;
    padding: 24px 0 22px;
  }

  .sf--branded .sf__nav-heading {
    font-size: 10px;
    letter-spacing: 0.14em;
    margin-bottom: 12px;
  }

  .sf--branded .sf__nav-list {
    gap: 10px;
  }

  .sf--branded .sf__nav-list a {
    font-size: 13px;
  }

  .sf--branded .sf__features {
    grid-template-columns: 1fr;
    gap: 10px;
    padding: 18px 0 20px;
  }

  .sf--branded .sf__feature-card {
    min-height: 0;
    padding: 14px 12px;
  }

  .sf--branded .sf__feature-card strong {
    font-size: 14px;
  }

  .sf--branded .sf__feature-card > div > span {
    font-size: 11px;
  }

  .sf--branded .sf__base {
    text-align: center;
    gap: 10px;
  }

  .sf--branded .sf__legal,
  .sf--branded .sf__legal--line2 {
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    font-size: 11px;
  }

  .sf--branded .sf__legal--line2 {
    font-size: 12px;
  }

  .sf--branded .sf__gamble-row {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
    gap: 8px;
    width: 100%;
  }

  .sf--branded .sf__gamble-sep {
    flex: 0 0 auto;
  }

  .sf--branded .sf__gamble-link--dim {
    font-size: 11px;
    white-space: nowrap;
  }

  .sf--branded .sf__copyright {
    text-align: center;
    font-size: 10px;
  }
}