/* ===== MARROW LOCKED DESIGN SYSTEM v1.3 ===== */
:root {
  --bone-black: #0A0908;
  --bone-white: #EFE9DC;
  --bone-cream: #EFE9DC;
  --marrow-red: #6B0F1A;
  --marrow-red-glow: #8B1828;
  /* Functional accessibility token (NOT a new brand color). Brighter ember
     red for red TEXT that sits on a dark surface, where solid marrow-red
     fails WCAG AA. ~7.6:1 on bone-black. Same value the Forge console uses
     for status-err. Solid --marrow-red stays for fills, borders, dots, glow,
     and red text on light backgrounds. */
  --marrow-ember-text: #E08894;
  --steel: #475569;
  --steel-light: #B8C5D6;       /* bumped from #94A3B8 for better contrast on dark surfaces */
  --steel-mid: #94A3B8;          /* old steel-light, kept for use on light backgrounds where subtle is wanted */
  --ash: #2A2A28;
  --line: rgba(10, 9, 8, 0.08);
  --line-dark: rgba(239, 233, 220, 0.1);
  --display: 'Switzer', -apple-system, system-ui, sans-serif;
  --sans: 'Inter', -apple-system, system-ui, sans-serif;
  --mono: 'JetBrains Mono', 'SF Mono', Menlo, monospace;

  /* Internal spacing scale. Spacing only, no color or font identity.
     Approved by Edwin 2026-05-21 for the homepage rebuild. Used to give
     the page a single consistent vertical and internal rhythm. */
  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 32px;
  --space-5: 48px;
  --space-6: 64px;
  --space-7: 96px;
  --space-8: 128px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

body {
  background: var(--bone-white);
  color: var(--bone-black);
  font-family: var(--sans);
  font-weight: 400;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

a { color: inherit; text-decoration: none; }
button { border: none; cursor: pointer; font-family: inherit; }
::selection { background: var(--marrow-red); color: var(--bone-white); }

/* ===== ACCESSIBILITY ===== */
.skip-link {
  position: absolute;
  top: -200px;
  left: 0;
  background: var(--bone-black);
  color: var(--bone-white);
  padding: 12px 20px;
  z-index: 200;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  border-radius: 0 0 4px 0;
  transition: top 0.2s ease;
}
.skip-link:focus {
  top: 0;
  outline: 2px solid var(--marrow-red);
  outline-offset: 2px;
}

a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--marrow-red);
  outline-offset: 3px;
  border-radius: 2px;
}

/* Hover only on devices that actually have hover */
@media (hover: none) {
  .pillar:hover { transform: none; border-color: var(--line); }
  .nav-cta:hover { background: var(--marrow-red); }
  .btn-primary:hover { background: var(--marrow-red); transform: none; }
  .btn-primary-light:hover { background: var(--bone-black); transform: none; }
  .cta-strip-btn:hover { transform: none; }
}

/* ===== CONSENT CHECKBOX ===== */
.consent { margin-top: 8px; margin-bottom: 28px; }
.consent-label {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  cursor: pointer;
  font-family: var(--sans);
  font-size: 13px;
  line-height: 1.5;
  color: var(--steel);
}
.consent-label input[type="checkbox"] {
  width: 18px;
  height: 18px;
  margin: 2px 0 0 0;
  cursor: pointer;
  accent-color: var(--marrow-red);
  flex-shrink: 0;
}
.consent-label a {
  color: var(--marrow-red);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}
.consent-label a:hover { color: var(--marrow-red-glow); }

/* ===== STATUS BADGE — for "preview" labels on mocks ===== */
.preview-badge {
  display: inline-block;
  background: rgba(107, 15, 26, 0.12);
  color: var(--marrow-red);
  padding: 6px 14px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  border-radius: 2px;
  margin-bottom: 16px;
  font-weight: 500;
  border: 1px solid var(--marrow-red);
}
.preview-badge::before { content: "● "; color: var(--marrow-red); }
.preview-badge.dark { background: rgba(139, 24, 40, 0.18); color: var(--marrow-red-glow); border-color: var(--marrow-red-glow); }

/* ===== LAYOUT ===== */
.container { max-width: 1280px; margin: 0 auto; padding: 0 32px; }
@media (max-width: 720px) { .container { padding: 0 20px; } }

/* Line break that only applies on desktop. Heroes use
   <br class="desktop-break"> to control headline wrapping. */
@media (max-width: 720px) { .desktop-break { display: none; } }

.logo-svg { width: 32px; height: 32px; flex-shrink: 0; }

/* ===== NAV ===== */
.nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(239, 233, 220, 0.85);
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--line);
}
.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 0;
}
.nav-brand { display: flex; align-items: center; gap: 12px; }
.nav-wordmark {
  font-family: var(--display);
  font-weight: 800;
  font-size: 18px;
  letter-spacing: 0.04em;
  color: var(--bone-black);
  text-transform: uppercase;
  line-height: 1;
}
.nav-links { display: flex; gap: 32px; }
.nav-links a {
  font-family: var(--sans);
  font-weight: 500;
  font-size: 14px;
  color: var(--steel);
  transition: color 0.15s ease;
}
.nav-links a:hover { color: var(--bone-black); }

/* ===== MOBILE NAV (hamburger) ===== */
/* Toggle button hidden on desktop, shown at 720px and below. */
.nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-left: 8px;
  padding: 0;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 2px;
  color: var(--bone-black);
  cursor: pointer;
}
.nav-toggle:hover { border-color: var(--marrow-red); }
.nav-toggle-bars {
  position: relative;
  display: block;
  width: 18px;
  height: 12px;
}
.nav-toggle-bars span {
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  background: currentColor;
  transition: transform 0.2s ease, opacity 0.2s ease;
}
.nav-toggle-bars span:nth-child(1) { top: 0; }
.nav-toggle-bars span:nth-child(2) { top: 5px; }
.nav-toggle-bars span:nth-child(3) { top: 10px; }
/* Bars morph into an X when the menu is open. */
.nav-toggle[aria-expanded="true"] .nav-toggle-bars span:nth-child(1) {
  transform: translateY(5px) rotate(45deg);
}
.nav-toggle[aria-expanded="true"] .nav-toggle-bars span:nth-child(2) {
  opacity: 0;
}
.nav-toggle[aria-expanded="true"] .nav-toggle-bars span:nth-child(3) {
  transform: translateY(-5px) rotate(-45deg);
}

@media (max-width: 720px) {
  /* Below the desktop max-width, the nav bar spans the full viewport, so it
     needs the same side inset the .container gives every other section.
     Without this the brand sits flush left and the CTA flush right at 390px. */
  .nav-inner { padding-left: 20px; padding-right: 20px; }
  .nav-toggle { display: inline-flex; flex-shrink: 0; }
  /* Slide-down panel anchored under the sticky nav bar. */
  .nav-links {
    display: flex;
    flex-direction: column;
    gap: 0;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--bone-white);
    border-bottom: 1px solid var(--line);
    padding: 8px 0;
    max-height: 0;
    overflow: hidden;
    visibility: hidden;
    transition: max-height 0.25s ease, visibility 0s linear 0.25s;
  }
  .nav-links.nav-links-open {
    max-height: 80vh;
    visibility: visible;
    overflow-y: auto;
    transition: max-height 0.25s ease, visibility 0s linear 0s;
  }
  .nav-links a {
    padding: 14px 24px;
    font-size: 16px;
    border-bottom: 1px solid var(--line);
  }
  .nav-links a:last-child { border-bottom: none; }
  /* Keep the nav CTA on one line on small screens, clear of the hamburger.
     Scoped to .nav so this beats the base .nav-cta rule that appears LATER
     in this file. The bare .nav-cta form had equal specificity and lost on
     source order, so the mobile sizing never applied and the CTA overflowed
     the viewport at 390px (horizontal scroll on every page). QA 2026-06-10. */
  .nav .nav-cta {
    font-size: 12px;
    padding: 10px 14px;
    white-space: nowrap;
    margin-left: 10px;
  }
}

/* Narrow widths (480 and below): with the toggle held at its full 44px tap
   size (flex-shrink: 0), the brand + toggle + CTA row ran past a 390px
   viewport. Tighten type so the bar fits with no horizontal scroll at
   390 and 360. QA 2026-06-10. */
@media (max-width: 480px) {
  .nav .nav-cta {
    font-size: 11px;
    padding: 9px 8px;
    letter-spacing: 0.03em;
    margin-left: 8px;
  }
}

/* Narrow Android widths (374 and below): same row, one step tighter, so the
   bar still fits with the toggle held at 44px. QA 2026-06-10. */
@media (max-width: 374px) {
  .nav-inner { padding-left: 12px; padding-right: 12px; }
  .nav .nav-cta {
    font-size: 10px;
    padding: 9px 6px;
    margin-left: 6px;
  }
}

/* No motion when the visitor asks for reduced motion. */
@media (prefers-reduced-motion: reduce) {
  .nav-toggle-bars span,
  .nav-links { transition: none; }
}

.nav-cta {
  background: var(--marrow-red);
  color: var(--bone-white);
  padding: 10px 22px;
  font-family: var(--sans);
  font-weight: 500;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  border-radius: 2px;
  transition: background 0.15s ease;
}
.nav-cta:hover { background: var(--marrow-red-glow); }

/* ===== NAV: SOLUTIONS DROPDOWN ===== */
/* The Solutions item is a button trigger plus a submenu list. CSS handles
   hover-open for mouse users; mobile-nav.js handles click and keyboard and
   keeps aria-expanded in sync. The whole group sits inline in .nav-links. */
.nav-dropdown {
  position: relative;
  display: flex;
  align-items: center;
}
.nav-dropdown-trigger {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  padding: 0;
  background: transparent;
  border: 0;
  cursor: pointer;
  font-family: var(--sans);
  font-weight: 500;
  font-size: 14px;
  color: var(--steel);
  transition: color 0.15s ease;
}
.nav-dropdown-trigger:hover,
.nav-dropdown-trigger[aria-expanded="true"] { color: var(--bone-black); }
.nav-dropdown-caret {
  width: 9px;
  height: 9px;
  flex: none;
  transition: transform 0.15s ease;
}
.nav-dropdown-trigger[aria-expanded="true"] .nav-dropdown-caret {
  transform: rotate(180deg);
}
/* Submenu panel. Hidden by default; shown on hover or when the trigger
   reports aria-expanded="true". */
.nav-dropdown-menu {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  margin: 0;
  padding: 8px 0;
  min-width: 210px;
  list-style: none;
  background: var(--bone-white);
  border: 1px solid var(--line);
  border-radius: 4px;
  box-shadow: 0 12px 28px rgba(10, 9, 8, 0.12);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.15s ease, visibility 0s linear 0.15s;
  z-index: 110;
}
/* Small gap bridge so the pointer can travel from trigger to menu. */
.nav-dropdown-menu::before {
  content: "";
  position: absolute;
  top: -10px;
  left: 0;
  right: 0;
  height: 10px;
}
.nav-dropdown:hover .nav-dropdown-menu,
.nav-dropdown:focus-within .nav-dropdown-menu,
.nav-dropdown-menu[data-open="true"] {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.15s ease, visibility 0s linear 0s;
}
.nav-dropdown-menu li { margin: 0; }
.nav-dropdown-menu a {
  display: block;
  padding: 10px 20px;
  font-family: var(--sans);
  font-weight: 500;
  font-size: 14px;
  color: var(--steel);
  white-space: nowrap;
  transition: color 0.15s ease, background 0.15s ease;
}
.nav-dropdown-menu a:hover,
.nav-dropdown-menu a:focus-visible {
  color: var(--bone-black);
  background: var(--bone-cream);
}

/* Mobile: inside the hamburger panel the Solutions group is a plain inline
   subsection. The trigger becomes a static label, the submenu is always
   visible, and the 5 links are indented under it. */
@media (max-width: 720px) {
  .nav-dropdown {
    display: block;
    width: 100%;
  }
  .nav-dropdown-trigger {
    width: 100%;
    box-sizing: border-box;
    min-height: 44px;
    padding: 10px 24px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--steel);
    cursor: default;
    border-bottom: 1px solid var(--line);
  }
  .nav-dropdown-trigger:hover,
  .nav-dropdown-trigger[aria-expanded="true"] { color: var(--steel); }
  .nav-dropdown-caret { display: none; }
  .nav-dropdown-menu {
    position: static;
    transform: none;
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    opacity: 1;
    visibility: visible;
    background: transparent;
    transition: none;
  }
  .nav-dropdown-menu::before { display: none; }
  .nav-dropdown-menu a {
    padding: 14px 24px 14px 38px;
    font-size: 16px;
    border-bottom: 1px solid var(--line);
  }
}

@media (prefers-reduced-motion: reduce) {
  .nav-dropdown-trigger,
  .nav-dropdown-caret,
  .nav-dropdown-menu,
  .nav-dropdown-menu a { transition: none; }
}

/* ===== ENTERPRISE NAV: SOLUTIONS DROPDOWN ===== */
/* The enterprise pages use .ent-nav-links with their own per-page styling.
   This block adds the Solutions dropdown to that nav. The enterprise nav has
   no hamburger; it hides entirely below 880px, which is the existing
   behavior and is left unchanged. */
.ent-nav-links .nav-dropdown { position: relative; display: flex; align-items: center; }
.ent-nav-links .nav-dropdown-trigger {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  padding: 0;
  background: transparent;
  border: 0;
  cursor: pointer;
  font-family: var(--sans);
  font-weight: 500;
  font-size: 14px;
  color: var(--bone-black);
  transition: color 120ms;
}
.ent-nav-links .nav-dropdown-trigger:hover,
.ent-nav-links .nav-dropdown-trigger:focus-visible,
.ent-nav-links .nav-dropdown-trigger[aria-expanded="true"] { color: var(--marrow-red); }
.ent-nav-links .nav-dropdown-caret {
  width: 9px;
  height: 9px;
  flex: none;
  transition: transform 120ms;
}
.ent-nav-links .nav-dropdown-trigger[aria-expanded="true"] .nav-dropdown-caret {
  transform: rotate(180deg);
}
.ent-nav-links .nav-dropdown-menu {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  margin: 0;
  padding: 8px 0;
  min-width: 210px;
  list-style: none;
  background: var(--bone-white);
  border: 1px solid var(--line);
  border-radius: 4px;
  box-shadow: 0 12px 28px rgba(10, 9, 8, 0.12);
  opacity: 0;
  visibility: hidden;
  transition: opacity 120ms, visibility 0s linear 120ms;
  z-index: 110;
}
.ent-nav-links .nav-dropdown-menu::before {
  content: "";
  position: absolute;
  top: -14px;
  left: 0;
  right: 0;
  height: 14px;
}
.ent-nav-links .nav-dropdown:hover .nav-dropdown-menu,
.ent-nav-links .nav-dropdown:focus-within .nav-dropdown-menu,
.ent-nav-links .nav-dropdown-menu[data-open="true"] {
  opacity: 1;
  visibility: visible;
  transition: opacity 120ms, visibility 0s linear 0s;
}
.ent-nav-links .nav-dropdown-menu li { margin: 0; }
.ent-nav-links .nav-dropdown-menu a {
  display: block;
  padding: 10px 20px;
  font-family: var(--sans);
  font-weight: 500;
  font-size: 14px;
  color: var(--bone-black);
  white-space: nowrap;
  transition: color 120ms, background 120ms;
}
.ent-nav-links .nav-dropdown-menu a:hover,
.ent-nav-links .nav-dropdown-menu a:focus-visible {
  color: var(--marrow-red);
  background: var(--bone-cream);
}
@media (prefers-reduced-motion: reduce) {
  .ent-nav-links .nav-dropdown-trigger,
  .ent-nav-links .nav-dropdown-caret,
  .ent-nav-links .nav-dropdown-menu,
  .ent-nav-links .nav-dropdown-menu a { transition: none; }
}

/* ===== HERO — CINEMATIC ===== */
.hero {
  background: var(--bone-black);
  color: var(--bone-white);
  min-height: 100vh;
  padding: 100px 0 160px;
  text-align: center;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Layered background system */
.hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
.hero-bg-radial {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 80% 60% at 50% 35%, rgba(107, 15, 26, 0.18) 0%, transparent 60%),
    radial-gradient(ellipse 100% 100% at 50% 100%, rgba(10, 9, 8, 0.95) 0%, var(--bone-black) 70%);
}
.hero-bg-grain {
  position: absolute;
  inset: 0;
  opacity: 0.18;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.6 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
  background-size: 200px 200px;
}
.hero-bg-vignette {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 50%, transparent 50%, rgba(10, 9, 8, 0.6) 100%);
}

.hero-content {
  position: relative;
  z-index: 1;
}

/* Animated lattice mark stage */
.hero-mark-stage {
  position: relative;
  width: 200px;
  height: 200px;
  margin: 0 auto 48px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.hero-mark-glow { display: none; }
.hero-mark-spin {
  position: absolute;
  width: 200px;
  height: 200px;
  animation: hero-rotate 80s linear infinite;
  z-index: 1;
}
.hero-mark-core {
  position: absolute;
  width: 200px;
  height: 200px;
  z-index: 2;
}

@keyframes hero-rotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* Hero typography */
.hero-eyebrow {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.32em;
  color: var(--steel-light);
  text-transform: uppercase;
  margin-bottom: 32px;
  font-weight: 500;
}
.hero-headline {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(64px, 12vw, 168px);
  letter-spacing: -0.005em;
  line-height: 0.92;
  text-transform: uppercase;
  margin-bottom: 40px;
}
.hero-headline em {
  font-style: normal;
  background: linear-gradient(180deg, #EFE9DC 0%, var(--marrow-ember-text) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline-block;
}
.hero-tagline {
  font-family: var(--sans);
  font-weight: 400;
  font-size: clamp(17px, 1.8vw, 20px);
  line-height: 1.6;
  color: var(--steel-light);
  max-width: 660px;
  margin: 0 auto 48px;
}
.hero-tagline strong { color: var(--bone-white); font-weight: 600; }
.hero-proof {
  font-family: var(--sans);
  font-size: 13px;
  line-height: 1.55;
  color: var(--steel-mid);
  max-width: 580px;
  margin: -24px auto 36px;
  letter-spacing: 0.005em;
}
.hero-ctas {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 36px;
}
.hero-trust {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.28em;
  color: var(--steel);
  text-transform: uppercase;
  font-weight: 500;
}

/* Quiet hero link into the public platform preview. */
.hero-preview-link {
  margin: 14px 0 0;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.hero-preview-link a {
  color: var(--steel);
  text-decoration: none;
  border-bottom: 1px solid var(--line);
  padding-bottom: 2px;
  transition: color 120ms ease, border-color 120ms ease;
}
.hero-preview-link a:hover,
.hero-preview-link a:focus-visible {
  color: var(--marrow-red);
  border-color: var(--marrow-red);
}

/* Scroll cue */
.hero-scroll-cue {
  position: absolute;
  bottom: 28px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  color: var(--steel-light);
  text-decoration: none;
  z-index: 3;
  opacity: 0.55;
  transition: opacity 0.25s ease, transform 0.25s ease;
}
.hero-scroll-cue:hover {
  opacity: 0.95;
  transform: translateX(-50%) translateY(2px);
}
.hero-scroll-cue span {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  font-weight: 500;
}
.hero-scroll-cue svg {
  width: 18px;
  height: 30px;
}
@media (max-height: 720px) { .hero-scroll-cue { display: none; } }
@media (max-width: 720px) { .hero-scroll-cue { display: none; } }

/* ===== HERO DASHBOARD MOCK =====
   Replaces the rotating hex visual. Pure HTML/CSS, no images, no JS.
   Editorial coach dashboard preview. 12 rows visible, "28 more on track"
   indicator carries the rest of the 40 athlete roster. Three rows are
   flagged red with "Needs you today". The mock is wrapped with aria-label
   and the list itself is aria-hidden because the surrounding label already
   describes what the picture shows. */
.hero-dash {
  width: min(720px, 100%);
  margin: 0 auto 56px;
  position: relative;
  z-index: 2;
  text-align: left;
}
.hero-dash-frame {
  background: linear-gradient(180deg, rgba(239, 233, 220, 0.05) 0%, rgba(239, 233, 220, 0.025) 100%);
  border: 1px solid rgba(239, 233, 220, 0.12);
  border-radius: 6px;
  padding: 22px 24px 12px;
  box-shadow:
    0 30px 80px rgba(0, 0, 0, 0.55),
    0 0 0 1px rgba(139, 24, 40, 0.06) inset;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.hero-dash-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 16px;
  margin-bottom: 8px;
  border-bottom: 1px solid rgba(239, 233, 220, 0.08);
}
.hero-dash-head-left { display: flex; flex-direction: column; gap: 4px; }
.hero-dash-head-title {
  font-family: var(--display);
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--bone-white);
}
.hero-dash-head-sub {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 400;
  color: var(--steel-light);
  letter-spacing: 0.01em;
}
.hero-dash-head-right { display: flex; gap: 8px; flex-shrink: 0; }
.hero-dash-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--steel-light);
  padding: 5px 9px;
  border: 1px solid rgba(239, 233, 220, 0.1);
  border-radius: 2px;
  background: rgba(10, 9, 8, 0.5);
}
.hero-dash-chip-red {
  color: var(--marrow-red-glow);
  border-color: rgba(139, 24, 40, 0.45);
  background: rgba(107, 15, 26, 0.18);
}
.hero-dash-chip-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--marrow-red);
  box-shadow: 0 0 0 2px rgba(139, 24, 40, 0.15);
}
.hero-dash-chip-dot-green {
  background: #6FBF74;
  box-shadow: 0 0 0 2px rgba(111, 191, 116, 0.15);
}

.hero-dash-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.hero-dash-row {
  display: grid;
  grid-template-columns: 14px 130px 92px 1fr auto;
  align-items: center;
  gap: 14px;
  padding: 11px 6px;
  border-bottom: 1px solid rgba(239, 233, 220, 0.05);
  font-family: var(--sans);
  font-size: 13px;
  line-height: 1.35;
  color: var(--steel-light);
}
.hero-dash-row:last-child { border-bottom: none; }
.hero-dash-row-flag {
  background: linear-gradient(90deg, rgba(107, 15, 26, 0.16) 0%, rgba(107, 15, 26, 0.04) 100%);
  border-left: 2px solid var(--marrow-red);
  padding-left: 10px;
  margin-left: -4px;
}
.hero-dash-row-flag .hero-dash-name { color: var(--bone-white); }
.hero-dash-row-fade { opacity: 0.55; }

.hero-dash-dot {
  width: 9px; height: 9px; border-radius: 50%;
  background: #6FBF74;
  flex-shrink: 0;
}
.hero-dash-dot-red {
  background: var(--marrow-red);
  box-shadow: 0 0 0 3px rgba(139, 24, 40, 0.18);
}
.hero-dash-dot-green { background: #6FBF74; }

.hero-dash-name {
  font-weight: 600;
  color: var(--bone-white);
  font-size: 13.5px;
  letter-spacing: 0.005em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hero-dash-sleep {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--steel-light);
  white-space: nowrap;
}
.hero-dash-status {
  font-size: 12.5px;
  color: var(--steel-light);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.hero-dash-flag {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--bone-white);
  background: var(--marrow-red);
  padding: 4px 8px;
  border-radius: 2px;
  font-weight: 600;
  white-space: nowrap;
}

.hero-dash-more {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 6px 6px;
}
.hero-dash-more-line {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(239, 233, 220, 0.18) 50%, transparent 100%);
}
.hero-dash-more-label {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--steel-mid);
  font-weight: 500;
}
.hero-dash-more-mob { display: none; }
.hero-dash-more-desk { display: inline; }

.hero-dash-caption {
  text-align: center;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--steel-light);
  margin: 22px auto 6px;
  max-width: 580px;
  line-height: 1.55;
}
.hero-dash-disclosure {
  text-align: center;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--steel);
  margin: 0 auto;
}

/* Mobile: shorten the visible list, tighten the row layout */
@media (max-width: 720px) {
  .hero-dash { margin-bottom: 40px; }
  .hero-dash-frame { padding: 16px 14px 8px; border-radius: 4px; }
  .hero-dash-head { gap: 10px; padding-bottom: 12px; }
  .hero-dash-head-title { font-size: 14px; }
  .hero-dash-head-sub { font-size: 11px; }
  .hero-dash-head-right { gap: 6px; flex-wrap: wrap; }
  .hero-dash-chip { font-size: 9px; padding: 4px 7px; }
  .hero-dash-row {
    grid-template-columns: 12px 1fr auto;
    grid-template-rows: auto auto;
    grid-template-areas:
      "dot name flag"
      ".   status status";
    gap: 4px 10px;
    padding: 10px 4px;
    font-size: 12.5px;
  }
  .hero-dash-row .hero-dash-dot { grid-area: dot; align-self: start; margin-top: 6px; }
  .hero-dash-row .hero-dash-name { grid-area: name; font-size: 13px; }
  .hero-dash-row .hero-dash-sleep { display: none; }
  .hero-dash-row .hero-dash-status { grid-area: status; font-size: 12px; white-space: normal; }
  .hero-dash-row .hero-dash-flag { grid-area: flag; font-size: 8px; letter-spacing: 0.14em; padding: 3px 6px; }
  /* Show first 10 rows on mobile, hide the last two visible-on-desktop fade rows */
  .hero-dash-row-fade { display: none; }
  .hero-dash-more-label { font-size: 9px; letter-spacing: 0.18em; }
  .hero-dash-more-desk { display: none; }
  .hero-dash-more-mob { display: inline; }
  .hero-dash-caption { font-size: 11px; letter-spacing: 0.14em; margin: 18px auto 4px; }
  .hero-dash-disclosure { font-size: 9px; letter-spacing: 0.18em; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-dash-frame { backdrop-filter: none; -webkit-backdrop-filter: none; }
}

/* ===== SCROLL REVEAL ANIMATIONS ===== */
/* Progressive enhancement: reveal targets default to fully visible. The hidden
   start state only engages once JS has confirmed it is live (html.mz-js, set in
   the document head before this sheet loads) AND the visitor allows motion. If
   the IntersectionObserver never fires for a tall section, or JS is off, or the
   visitor prefers reduced motion, content always ends visible. */
.reveal-up {
  opacity: 1;
  transform: none;
  transition: opacity 0.45s cubic-bezier(0.2, 0.8, 0.2, 1), transform 0.45s cubic-bezier(0.2, 0.8, 0.2, 1);
}
html.mz-js .reveal-up {
  opacity: 0;
  transform: translateY(24px);
}
html.mz-js .reveal-up.in-view { opacity: 1; transform: translateY(0); }
.reveal-delay-1 { transition-delay: 0.04s; }
.reveal-delay-2 { transition-delay: 0.08s; }
.reveal-delay-3 { transition-delay: 0.12s; }
.reveal-delay-4 { transition-delay: 0.16s; }
@media (prefers-reduced-motion: reduce) {
  .reveal-up,
  html.mz-js .reveal-up { opacity: 1; transform: none; transition: none; }
  .hero-mark-spin, .hero-mark-glow, .hero-mark-core { animation: none; }
}

/* ===== BUTTONS ===== */
/* Primary CTA microstates. Stripe-grade polish: a deliberate hover lift with
   a color settle and a soft shadow, a clear focus-visible ring, and a real
   pressed-down active state. All motion honors prefers-reduced-motion. */
.btn-primary {
  background: var(--marrow-red);
  color: var(--bone-white);
  padding: 16px 32px;
  font-family: var(--sans);
  font-weight: 500;
  font-size: 14px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-radius: 2px;
  transition: background 0.22s cubic-bezier(0.2, 0.8, 0.2, 1),
              transform 0.22s cubic-bezier(0.2, 0.8, 0.2, 1),
              box-shadow 0.22s cubic-bezier(0.2, 0.8, 0.2, 1);
  display: inline-block;
  box-shadow: 0 1px 2px rgba(10, 9, 8, 0.18);
}
.btn-primary:hover {
  background: var(--marrow-red-glow);
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(107, 15, 26, 0.32);
}
.btn-primary:focus-visible {
  outline: 2px solid var(--marrow-red);
  outline-offset: 3px;
}
.btn-primary:active {
  transform: translateY(0);
  background: var(--marrow-red);
  box-shadow: 0 1px 2px rgba(10, 9, 8, 0.24);
}
@media (prefers-reduced-motion: reduce) {
  .btn-primary { transition: background 0.15s ease; }
  .btn-primary:hover, .btn-primary:active { transform: none; }
}
/* On-dark variant: cream button with black text for CTAs that sit on the
   black hero and other dark surfaces. Brightens to bone white on hover. */
.btn-primary--on-dark {
  background: var(--bone-cream);
  color: var(--bone-black);
  box-shadow: 0 1px 2px rgba(10, 9, 8, 0.3);
}
.btn-primary--on-dark:hover {
  background: var(--bone-white);
  box-shadow: 0 10px 24px rgba(10, 9, 8, 0.35);
}
.btn-primary--on-dark:active {
  background: var(--bone-cream);
}
@media (hover: none) {
  .btn-primary--on-dark:hover { background: var(--bone-cream); }
}
.btn-primary-light {
  background: var(--bone-black);
  color: var(--bone-white);
  padding: 16px 32px;
  font-family: var(--sans);
  font-weight: 500;
  font-size: 14px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-radius: 2px;
  transition: background 0.15s ease, transform 0.15s ease;
  display: inline-block;
}
.btn-primary-light:hover { background: var(--marrow-red); transform: translateY(-1px); }
/* Secondary button, reworked 2026-07-07 (V3.1 item 9, button audit).
   Edwin: grey/secondary buttons "do not look clickable." The old rule was a
   ghost: transparent fill, thin steel border, bone-white ink. On the many
   LIGHT surfaces where it is used it read as invisible dead grey (authors had
   to hand patch color and border-color inline on nearly every instance, and a
   few unpatched ones rendered near invisible text). The new base is a defined,
   filled-on-hover, lifting control that reads as obviously clickable on the
   light surfaces that are the common case. Dark marketing surfaces (hero,
   proof, network, mission, featured wall card) and the dark dashboard theme
   keep light ink through the scoped overrides in the button-audit section
   appended at the end of this file. Ink and border key off --bone-black, which
   the dashboard theme remaps, so the dark app theme adapts automatically. */
.btn-secondary {
  background: color-mix(in srgb, var(--bone-black) 4%, transparent);
  color: var(--bone-black);
  padding: 16px 32px;
  font-family: var(--sans);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border: 1.5px solid color-mix(in srgb, var(--bone-black) 42%, transparent);
  border-radius: 2px;
  transition: border-color 0.18s ease, background 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease, color 0.18s ease;
  display: inline-block;
  box-shadow: 0 1px 2px rgba(10, 9, 8, 0.06);
}
.btn-secondary:hover {
  border-color: var(--bone-black);
  background: color-mix(in srgb, var(--bone-black) 10%, transparent);
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(10, 9, 8, 0.14);
}
.btn-secondary:focus-visible {
  outline: 2px solid var(--marrow-red);
  outline-offset: 3px;
}
.btn-secondary:active {
  transform: translateY(0);
  background: color-mix(in srgb, var(--bone-black) 14%, transparent);
  box-shadow: 0 1px 2px rgba(10, 9, 8, 0.12);
}
/* Older engines without color-mix keep a solid, visible treatment. */
@supports not (background: color-mix(in srgb, red, blue)) {
  .btn-secondary { background: transparent; border-color: var(--bone-black); }
  .btn-secondary:hover { background: rgba(10, 9, 8, 0.06); }
}
@media (prefers-reduced-motion: reduce) {
  .btn-secondary { transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease; }
  .btn-secondary:hover, .btn-secondary:active { transform: none; }
}
@media (hover: none) {
  .btn-secondary:hover { transform: none; box-shadow: 0 1px 2px rgba(10, 9, 8, 0.06); }
}

/* ===== SECTION SCAFFOLD ===== */
/* Desktop section padding lifted for more breathing room. Linear and Stripe
   both breathe more than the old 120px. The --space-8 scale enforces it. */
/* Intentional sitewide spacing lift, approved 2026-05-21, applies to all plain-section pages. */
section { padding: var(--space-8) 0; }
@media (max-width: 720px) { section { padding: var(--space-7) 0; } }

/* Authenticated app surfaces (dashboards, console, revenue, community)
   manage their own section spacing. The marketing-site 120px section
   padding must not leak into them. */
body.dash section,
body.programs-body section,
body.revenue-body section,
body.mr-comm-body section { padding: 0; }

.section-eyebrow {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.3em;
  color: var(--marrow-red);
  text-transform: uppercase;
  margin-bottom: 20px;
  font-weight: 500;
}
.section-title {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(36px, 5vw, 64px);
  letter-spacing: 0.005em;
  line-height: 1.1;
  text-transform: uppercase;
  margin-bottom: 28px;
}
.section-lede {
  font-family: var(--sans);
  font-weight: 400;
  font-size: 19px;
  line-height: 1.65;
  color: var(--steel);
  max-width: 680px;
  margin-bottom: 64px;
}
.section-lede strong { color: var(--bone-black); font-weight: 600; }

/* ===== MANIFESTO ===== */
.manifesto { background: var(--bone-cream); text-align: center; }
.manifesto-line {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(28px, 4.4vw, 48px);
  letter-spacing: 0.005em;
  line-height: 1.2;
  color: var(--bone-black);
  max-width: 920px;
  margin: 0 auto;
}
.manifesto-line em {
  color: var(--marrow-red);
  font-style: normal;
  font-weight: 800;
}

/* ===== THE WALL (3-card before/during/after) ===== */
.wall { background: var(--bone-cream); text-align: center; }
.wall .section-title { max-width: 880px; margin: 0 auto 28px; }
.wall .section-lede { max-width: 720px; margin: 0 auto 64px; text-align: center; }

.wall-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.wall-grid-3 {
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  max-width: 1120px;
  margin: 0 auto;
}
.wall-cards-tag {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(20px, 2.6vw, 28px);
  line-height: 1.3;
  letter-spacing: 0.005em;
  color: var(--bone-black);
  text-align: center;
  max-width: 920px;
  margin: 0 auto 48px;
  padding-bottom: 32px;
  border-bottom: 1px solid var(--line);
}
.wall-cards-tag em {
  color: var(--marrow-red);
  font-style: normal;
  font-weight: 800;
}
@media (max-width: 920px) { .wall-grid, .wall-grid-3 { grid-template-columns: 1fr; max-width: 560px; } }

.wall-card {
  background: var(--bone-white);
  padding: 56px 40px;
  border: 1px solid var(--line);
  text-align: left;
  border-radius: 6px;
  display: flex;
  flex-direction: column;
  transition: border-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
  min-height: 380px;
}
.wall-card:hover { transform: translateY(-4px); box-shadow: 0 24px 48px rgba(10, 9, 8, 0.06); border-color: var(--bone-black); }
.wall-card.featured {
  background: var(--bone-black);
  color: var(--bone-white);
  border-color: var(--bone-black);
}
.wall-card.featured:hover { border-color: var(--marrow-red); box-shadow: 0 24px 48px rgba(107, 15, 26, 0.25); }

.wall-num {
  font-family: var(--display);
  font-weight: 800;
  font-size: 96px;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--bone-black);
  margin-bottom: 32px;
}
.wall-mark {
  width: 88px;
  height: 88px;
  margin-bottom: 28px;
}
.wall-eyebrow {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.28em;
  color: var(--marrow-red);
  text-transform: uppercase;
  font-weight: 500;
  margin-bottom: 16px;
}
.wall-card.featured .wall-eyebrow { color: var(--steel-light); }
.wall-headline {
  font-family: var(--display);
  font-weight: 800;
  font-size: 26px;
  line-height: 1.15;
  letter-spacing: 0.005em;
  color: var(--bone-black);
  margin-bottom: 20px;
}
.wall-card.featured .wall-headline { color: var(--bone-white); }
.wall-body {
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.7;
  color: var(--steel);
  flex: 1;
}
.wall-card.featured .wall-body { color: var(--bone-cream); }

/* ===== NETWORK + EVENTS ===== */
.network-events { background: var(--bone-black); color: var(--bone-white); }
.network-events .section-title { color: var(--bone-white); }
.network-events .section-eyebrow { color: var(--steel-light); }
.network-events .section-lede { color: var(--steel-light); }
.network-events .section-lede strong { color: var(--bone-white); font-weight: 600; }
.network-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
@media (max-width: 920px) { .network-grid { grid-template-columns: 1fr; } }
.network-card {
  background: rgba(239, 233, 220, 0.04);
  padding: 40px 32px;
  border: 1px solid var(--line-dark);
  border-radius: 4px;
  transition: border-color 0.2s ease, transform 0.2s ease;
}
.network-card.featured {
  background: var(--marrow-red);
  border-color: var(--marrow-red);
}
.network-card.featured .network-eyebrow { color: var(--bone-cream); }
.network-eyebrow {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  color: var(--steel-light);
  text-transform: uppercase;
  font-weight: 500;
  margin-bottom: 20px;
}
.network-card-title {
  font-family: var(--display);
  font-weight: 800;
  font-size: 24px;
  letter-spacing: 0.005em;
  text-transform: uppercase;
  margin-bottom: 16px;
  line-height: 1.1;
  color: var(--bone-white);
}
.network-card-desc {
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.7;
  color: var(--bone-cream);
  opacity: 0.85;
}
.network-card.featured .network-card-desc { color: var(--bone-white); opacity: 1; }

/* ===== ATHLETES PAGE COMPONENTS ===== */
.athlete-benefits {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}
@media (max-width: 720px) { .athlete-benefits { grid-template-columns: 1fr; } }
.athlete-benefit {
  background: var(--bone-cream);
  padding: 40px;
  border: 1px solid var(--line);
}
.athlete-benefit-num {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.25em;
  color: var(--marrow-red);
  text-transform: uppercase;
  font-weight: 500;
  margin-bottom: 24px;
}
.athlete-benefit-title {
  font-family: var(--display);
  font-weight: 800;
  font-size: 22px;
  letter-spacing: 0.005em;
  text-transform: uppercase;
  margin-bottom: 16px;
  line-height: 1.2;
}
.athlete-benefit-desc {
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.7;
  color: var(--steel);
}

.why-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}
@media (max-width: 720px) { .why-grid { grid-template-columns: 1fr; } }
.why-card {
  background: var(--bone-white);
  padding: 32px;
  border: 1px solid var(--line);
}
.why-card-eyebrow {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  color: var(--marrow-red);
  text-transform: uppercase;
  font-weight: 500;
  margin-bottom: 16px;
}
.why-card-text {
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.7;
  color: var(--steel);
}

.pricing-honest {
  background: var(--bone-cream);
  padding: 40px;
  border: 1px solid var(--line);
  border-radius: 4px;
  max-width: 720px;
}
.pricing-honest-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 18px 0;
  border-bottom: 1px solid var(--line);
  font-family: var(--sans);
  gap: 20px;
}
.pricing-honest-row:last-child { border-bottom: none; }
.pricing-honest-label {
  font-size: 14px;
  color: var(--steel);
  font-weight: 500;
}
.pricing-honest-value {
  font-family: var(--display);
  font-weight: 700;
  font-size: 18px;
  color: var(--bone-black);
  letter-spacing: 0.005em;
  text-align: right;
}

/* ===== MISSION PAGE ===== */
.mission-hero {
  background: var(--bone-black);
  color: var(--bone-white);
  padding: 140px 0 100px;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.mission-hero-bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 50% 30%, rgba(107, 15, 26, 0.18) 0%, transparent 60%),
    radial-gradient(circle at 50% 100%, rgba(10, 9, 8, 1) 0%, transparent 60%);
  z-index: 0;
}
.mission-hero .container { position: relative; z-index: 1; }
.mission-hero .page-hero-eyebrow { color: var(--steel-light); margin-bottom: 32px; }
.mission-hero-title {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(40px, 7vw, 88px);
  letter-spacing: -0.005em;
  line-height: 1.02;
  text-transform: uppercase;
  color: var(--bone-white);
  max-width: 1100px;
  margin: 0 auto;
}

.mission-block {
  margin-bottom: 80px;
  padding-bottom: 80px;
  border-bottom: 1px solid var(--line);
}
.mission-block:last-child { border-bottom: none; padding-bottom: 0; margin-bottom: 0; }
.mission-block-title {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(28px, 4vw, 40px);
  letter-spacing: 0.005em;
  line-height: 1.1;
  text-transform: uppercase;
  margin-bottom: 28px;
  color: var(--bone-black);
}
.mission-block-body {
  font-family: var(--sans);
  font-weight: 400;
  font-size: 18px;
  line-height: 1.75;
  color: var(--steel);
  margin-bottom: 20px;
}
.mission-block-body strong { color: var(--bone-black); font-weight: 600; }

.values-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}
@media (max-width: 720px) { .values-grid { grid-template-columns: 1fr; } }
.value-card {
  background: var(--bone-cream);
  padding: 36px 32px;
  border: 1px solid var(--line);
  border-radius: 4px;
}
.value-card-num {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.28em;
  color: var(--marrow-red);
  text-transform: uppercase;
  font-weight: 500;
  margin-bottom: 20px;
}
.value-card-title {
  font-family: var(--display);
  font-weight: 800;
  font-size: 22px;
  letter-spacing: 0.005em;
  text-transform: uppercase;
  margin-bottom: 14px;
  line-height: 1.1;
}
.value-card-desc {
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.7;
  color: var(--steel);
}

/* ===== MISSION SECTION (homepage) ===== */
.mission { background: var(--bone-white); padding: 120px 0; }
.mission-inner { max-width: 880px; margin: 0 auto; text-align: center; }
.mission-eyebrow {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.32em;
  color: var(--marrow-red);
  text-transform: uppercase;
  margin-bottom: 28px;
  font-weight: 500;
}
.mission-headline {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(36px, 5vw, 56px);
  letter-spacing: 0.005em;
  line-height: 1.05;
  color: var(--bone-black);
  margin-bottom: 32px;
  text-transform: uppercase;
}
.mission-body {
  font-family: var(--sans);
  font-weight: 400;
  font-size: clamp(17px, 1.6vw, 19px);
  line-height: 1.7;
  color: var(--steel);
  max-width: 720px;
  margin: 0 auto;
}
.mission-body strong { color: var(--bone-black); font-weight: 600; }

/* ===== FOUNDER SECTION ===== */
.founder { background: var(--bone-cream); padding: var(--space-8) 0; }
@media (max-width: 720px) { .founder { padding: var(--space-7) 0; } }
.founder-grid {
  display: grid;
  grid-template-columns: 420px 1fr;
  gap: 80px;
  align-items: center;
  max-width: 1180px;
  margin: 0 auto;
}
@media (max-width: 920px) { .founder-grid { grid-template-columns: 1fr; gap: 48px; max-width: 560px; } }

/* === LIVING LATTICE VISUAL (frameless) === */
.founder-visual {
  position: relative;
  aspect-ratio: 1;
  overflow: visible;
}
.founder-visual-svg { width: 100%; height: 100%; display: block; }

/* Pulse rings (heartbeat) */
.founder-pulse {
  fill: none;
  transform-origin: 200px 200px;
  animation: founder-pulse-out 5s cubic-bezier(0.4, 0, 0.2, 1) infinite;
  opacity: 0;
}
.founder-pulse-1 { animation-delay: 0s; }
.founder-pulse-2 { animation-delay: 1.6s; }
.founder-pulse-3 { animation-delay: 3.2s; }

@keyframes founder-pulse-out {
  0% { transform: scale(0.5); opacity: 0; }
  15% { opacity: 0.65; }
  100% { transform: scale(3.2); opacity: 0; }
}

/* Slow rotation (cortical + trabecular) */
.founder-rotate-slow {
  transform-origin: 200px 200px;
  animation: founder-rotate 90s linear infinite;
}
@keyframes founder-rotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* Floating particles */
.founder-particle {
  animation: founder-drift 14s ease-in-out infinite;
  transform-origin: center;
}
.founder-particle.p1 { animation-delay: 0s; }
.founder-particle.p2 { animation-delay: 2s; animation-duration: 18s; }
.founder-particle.p3 { animation-delay: 4s; animation-duration: 16s; }
.founder-particle.p4 { animation-delay: 6s; animation-duration: 20s; }
.founder-particle.p5 { animation-delay: 1s; animation-duration: 17s; }
.founder-particle.p6 { animation-delay: 3s; animation-duration: 15s; }

@keyframes founder-drift {
  0%, 100% { transform: translate(0, 0); opacity: 0.4; }
  25% { transform: translate(8px, -6px); opacity: 0.8; }
  50% { transform: translate(-4px, -10px); opacity: 0.5; }
  75% { transform: translate(-10px, 4px); opacity: 0.7; }
}

@media (prefers-reduced-motion: reduce) {
  .founder-pulse, .founder-rotate-slow, .founder-particle { animation: none; }
  .founder-pulse { opacity: 0.4; }
}

/* === FOUNDER CONTENT === */
.founder-content {}
.founder-name {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(44px, 5.6vw, 64px);
  letter-spacing: -0.005em;
  line-height: 0.95;
  margin-bottom: 14px;
  text-transform: none;
  color: var(--bone-black);
}
.founder-title {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.28em;
  color: var(--marrow-red);
  text-transform: uppercase;
  font-weight: 500;
  margin-bottom: 36px;
}
.founder-bio {
  font-family: var(--sans);
  font-size: 18px;
  line-height: 1.7;
  color: var(--steel);
  margin-bottom: 24px;
}
.founder-bio strong { color: var(--bone-black); font-weight: 600; }
.founder-bio-close {
  font-family: var(--display);
  font-weight: 700;
  font-size: 22px;
  line-height: 1.4;
  color: var(--bone-black);
  margin-top: 8px;
  margin-bottom: 40px;
  letter-spacing: 0.002em;
}
.founder-signature {
  display: flex;
  align-items: center;
  gap: 16px;
  padding-top: 28px;
  border-top: 1px solid var(--line);
  flex-wrap: wrap;
}
.founder-signature-name {
  font-family: var(--display);
  font-weight: 700;
  font-size: 22px;
  letter-spacing: -0.005em;
  color: var(--bone-black);
  font-style: italic;
}
.founder-signature-arrow {
  font-family: var(--display);
  font-size: 20px;
  color: var(--marrow-red);
  font-weight: 600;
}
.founder-signature-cta {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  color: var(--marrow-red);
  text-transform: uppercase;
  font-weight: 500;
  text-decoration: none;
  border-bottom: 1px solid var(--marrow-red);
  padding-bottom: 2px;
  transition: color 0.2s ease;
}
.founder-signature-cta:hover { color: var(--marrow-red-glow); }

/* ===== TOOLKIT ===== */
.toolkit { background: var(--bone-white); padding: 120px 0; }
.toolkit-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-top: 32px;
}
@media (max-width: 920px) { .toolkit-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .toolkit-grid { grid-template-columns: 1fr; } }
.toolkit-item {
  padding: 28px 24px;
  background: var(--bone-cream);
  border-radius: 4px;
  border: 1px solid var(--line);
  position: relative;
  transition: transform 0.3s ease, border-color 0.3s ease;
}
.toolkit-item:hover {
  transform: translateY(-3px);
  border-color: var(--marrow-red);
}
.toolkit-dot {
  width: 8px;
  height: 8px;
  background: var(--marrow-red);
  border-radius: 50%;
  margin-bottom: 16px;
}
.toolkit-name {
  font-family: var(--display);
  font-weight: 800;
  font-size: 16px;
  letter-spacing: 0.005em;
  text-transform: uppercase;
  margin-bottom: 8px;
  color: var(--bone-black);
  line-height: 1.1;
}
.toolkit-desc {
  font-family: var(--sans);
  font-size: 13px;
  line-height: 1.5;
  color: var(--steel);
}

/* ===== TESTIMONIAL ===== */
.testimonial { background: var(--bone-black); color: var(--bone-white); padding: 140px 0; position: relative; overflow: hidden; }
.testimonial::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 50%, rgba(107, 15, 26, 0.12) 0%, transparent 60%);
  pointer-events: none;
}
.testimonial-inner {
  max-width: 880px;
  margin: 0 auto;
  text-align: center;
  position: relative;
}
.testimonial-quote-mark {
  font-family: var(--display);
  font-weight: 800;
  font-size: 120px;
  line-height: 1;
  color: var(--marrow-red-glow);
  margin-bottom: 16px;
}
.testimonial-quote {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(24px, 3.6vw, 36px);
  line-height: 1.35;
  letter-spacing: 0.005em;
  color: var(--bone-white);
  margin-bottom: 48px;
}
.testimonial-quote strong { color: var(--marrow-red-glow); font-weight: 800; }
.testimonial-attr {}
.testimonial-name {
  font-family: var(--display);
  font-weight: 800;
  font-size: 18px;
  letter-spacing: 0.005em;
  color: var(--bone-white);
  margin-bottom: 6px;
}
.testimonial-role {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  color: var(--steel-light);
  text-transform: uppercase;
}

/* ===== TUESDAY CALLOUT (between Wall and Mission) ===== */
.tuesday-callout {
  background: var(--bone-black);
  color: var(--bone-white);
  padding: 96px 0;
  text-align: center;
}
.tuesday-callout-inner {
  max-width: 920px;
  margin: 0 auto;
}
.tuesday-callout-eyebrow {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.3em;
  color: var(--marrow-red-glow);
  text-transform: uppercase;
  margin-bottom: 32px;
  font-weight: 500;
}
.tuesday-callout-line {
  font-family: var(--display);
  font-weight: 800;
  font-style: italic;
  font-size: clamp(28px, 4.4vw, 48px);
  line-height: 1.25;
  letter-spacing: 0.005em;
  color: var(--bone-white);
  max-width: 880px;
  margin: 0 auto;
}

/* ===== REFUSALS (between Mission and Founder) ===== */
.refusals {
  background: var(--bone-white);
  padding: var(--space-8) 0;
}
@media (max-width: 720px) { .refusals { padding: var(--space-7) 0; } }
.refusals-header {
  max-width: 880px;
  margin: 0 auto 64px;
  text-align: center;
}
.refusals-header .section-title { margin-bottom: 28px; }
.refusals-header .section-lede { margin: 0 auto; }

.refusals-list {
  max-width: 920px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.refusal-row {
  background: var(--bone-cream);
  border: 1px solid var(--line);
  border-left: 12px solid var(--marrow-red);
  border-radius: 6px;
  padding: 32px 36px;
  transition: transform 0.3s ease, border-color 0.3s ease;
}
.refusal-row:hover {
  transform: translateX(2px);
  border-left-color: var(--marrow-red-glow);
}
.refusal-headline {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(20px, 2.4vw, 26px);
  line-height: 1.25;
  letter-spacing: 0.005em;
  color: var(--bone-black);
  margin-bottom: 12px;
}
.refusal-body {
  font-family: var(--sans);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.6;
  color: var(--steel);
}
@media (max-width: 640px) {
  .refusal-row { padding: 24px 24px; border-left-width: 8px; }
}

/* ===== TOOLKIT GROUPS (cut to 6, 3 headers) ===== */
.toolkit-groups {
  display: flex;
  flex-direction: column;
  gap: 48px;
  margin-top: 32px;
}
.toolkit-group-eyebrow {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.3em;
  color: var(--marrow-red);
  text-transform: uppercase;
  margin-bottom: 16px;
  font-weight: 500;
}
.toolkit-grid-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  margin-top: 0;
}
@media (max-width: 640px) {
  .toolkit-grid-2 { grid-template-columns: 1fr; }
}

/* ===== PRICING TEASE MISSION REPRISE ===== */
.pricing-tease-mission {
  font-family: var(--display);
  font-weight: 700;
  font-style: italic;
  font-size: clamp(20px, 2.4vw, 26px);
  line-height: 1.3;
  color: var(--marrow-red);
  text-align: center;
  margin: 0 auto 28px;
  max-width: 720px;
}

/* ===== FOUNDER FEATURE (replaces homepage testimonial) ===== */
.founder-feature {
  background: var(--bone-black);
  color: var(--bone-white);
  padding: 140px 0;
  position: relative;
  overflow: hidden;
}
.founder-feature::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 50%, rgba(107, 15, 26, 0.12) 0%, transparent 60%);
  pointer-events: none;
}
.founder-feature-grid {
  display: grid;
  grid-template-columns: 360px 1fr;
  gap: 72px;
  align-items: start;
  max-width: 1120px;
  margin: 0 auto;
  position: relative;
}
@media (max-width: 920px) {
  .founder-feature-grid { grid-template-columns: 1fr; gap: 40px; max-width: 560px; }
}
.founder-feature-visual {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.founder-feature-photo {
  width: 100%;
  aspect-ratio: 3 / 4;
  background: linear-gradient(180deg, #1a1817 0%, #0A0908 100%);
  border: 1px solid var(--steel);
  border-radius: 6px;
  position: relative;
  overflow: hidden;
}
.founder-feature-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 35%;
  display: block;
}
.founder-feature-photo:empty::after {
  content: "PHOTO TO COME";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.32em;
  color: var(--steel);
  text-transform: uppercase;
}
.founder-feature-caption {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  color: var(--steel-light);
  text-transform: uppercase;
  font-weight: 500;
}
.founder-feature-eyebrow {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.32em;
  color: var(--marrow-red-glow);
  text-transform: uppercase;
  font-weight: 500;
  margin-bottom: 24px;
}
.founder-feature-headline {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(36px, 5vw, 56px);
  line-height: 1.05;
  letter-spacing: 0.005em;
  color: var(--bone-white);
  margin-bottom: 36px;
  text-transform: none;
}
.founder-feature-body {
  font-family: var(--sans);
  font-weight: 400;
  font-size: 18px;
  line-height: 1.7;
  color: var(--steel-light);
  margin-bottom: 22px;
}
.founder-feature-close {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(20px, 2.4vw, 26px);
  line-height: 1.4;
  color: var(--bone-white);
  margin-top: 12px;
}
.founder-feature-close em {
  color: var(--marrow-red-glow);
  font-style: italic;
  font-weight: 800;
}

/* ===== SCARCITY COUNTER ===== */
.scarcity {
  background: rgba(139, 24, 40, 0.12);
  border: 1px solid var(--marrow-red-glow);
  padding: 16px 20px;
  border-radius: 4px;
  margin-bottom: 16px;
}
.scarcity-label {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  color: var(--marrow-red-glow);
  text-transform: uppercase;
  font-weight: 500;
  margin-bottom: 12px;
}
.scarcity-bar {
  width: 100%;
  height: 6px;
  background: rgba(239, 233, 220, 0.08);
  border-radius: 100px;
  overflow: hidden;
  margin-bottom: 12px;
}
.scarcity-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--marrow-red) 0%, var(--marrow-red-glow) 100%);
  border-radius: 100px;
  transition: width 1.2s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.scarcity-numbers {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.18em;
  color: var(--bone-cream);
  text-transform: uppercase;
}
.scarcity-numbers strong {
  color: var(--marrow-red-glow);
  font-weight: 700;
  font-size: 14px;
}

/* ===== 14-DAY GUARANTEE ===== */
.pricing-guarantee {
  margin-top: 16px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  color: var(--steel-light);
  text-transform: uppercase;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.guarantee-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  background: var(--marrow-red);
  color: var(--bone-white);
  border-radius: 50%;
  font-size: 10px;
  font-weight: 700;
  font-family: var(--sans);
}

.apply-trust-row {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 20px;
  padding: 16px 20px;
  background: var(--bone-white);
  border: 1px solid var(--line);
  border-radius: 4px;
}
.apply-trust-item {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  color: var(--steel);
  text-transform: uppercase;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 6px;
}
.apply-trust-item span {
  color: var(--marrow-red);
  font-family: var(--sans);
  font-weight: 700;
}

/* ===== ATHLETES THREE PATHS ===== */
.paths-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
@media (max-width: 920px) { .paths-grid { grid-template-columns: 1fr; } }

.path-card {
  background: var(--bone-cream);
  padding: 48px 36px;
  border-radius: 6px;
  border: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  position: relative;
}
.path-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 24px 48px rgba(10, 9, 8, 0.08);
}
.path-card-featured {
  background: var(--bone-black);
  color: var(--bone-white);
  border-color: var(--bone-black);
}
.path-card-featured .path-eyebrow { color: var(--steel-light); }
.path-card-featured .path-title { color: var(--bone-white); }
.path-card-featured .path-body { color: var(--bone-cream); }
.path-card-featured .path-price { color: var(--marrow-red-glow); border-top-color: var(--line-dark); }
.path-card-featured .path-cta { background: var(--marrow-red); color: var(--bone-white); }

.path-card-founder {
  background: linear-gradient(180deg, var(--bone-black) 0%, #1a0d0f 100%);
  color: var(--bone-white);
  border-color: var(--marrow-red);
  position: relative;
}
.path-card-founder::before {
  content: "FOUNDER ACCESS";
  position: absolute;
  top: -10px;
  right: 24px;
  background: var(--marrow-red);
  color: var(--bone-white);
  padding: 5px 12px;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.22em;
  font-weight: 500;
  border-radius: 2px;
}
.path-card-founder .path-eyebrow { color: var(--steel-light); }
.path-card-founder .path-title { color: var(--bone-white); }
.path-card-founder .path-body { color: var(--bone-cream); }
.path-card-founder .path-price { color: var(--marrow-red-glow); border-top-color: var(--line-dark); }
.path-card-founder .path-cta { background: var(--marrow-red); color: var(--bone-white); }

.path-eyebrow {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  color: var(--marrow-red);
  text-transform: uppercase;
  font-weight: 500;
  margin-bottom: 24px;
}
.path-title {
  font-family: var(--display);
  font-weight: 800;
  font-size: 28px;
  letter-spacing: 0.005em;
  text-transform: uppercase;
  margin-bottom: 20px;
  color: var(--bone-black);
  line-height: 1;
}
.path-body {
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.7;
  color: var(--steel);
  margin-bottom: 28px;
  flex: 1;
}
.path-price {
  font-family: var(--display);
  font-weight: 700;
  font-size: 18px;
  color: var(--marrow-red);
  padding-top: 20px;
  border-top: 1px solid var(--line);
  margin-bottom: 20px;
  letter-spacing: 0.005em;
}
.path-cta {
  display: inline-block;
  background: var(--bone-black);
  color: var(--bone-white);
  padding: 14px 24px;
  font-family: var(--sans);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  border-radius: 2px;
  text-align: center;
  text-decoration: none;
  transition: background 0.2s ease;
}
.path-cta:hover { background: var(--marrow-red); }

/* ===== HOMEPAGE THREE-DOOR AUDIENCE SELECTOR (editorial v3) ===== */
.three-doors {
  background: var(--bone-cream);
  padding: var(--space-8) 0;
}
@media (max-width: 720px) { .three-doors { padding: var(--space-7) 0; } }

.three-doors-header {
  max-width: 880px;
  margin: 0 auto 80px;
  text-align: center;
}
.three-doors-eyebrow {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.32em;
  color: var(--marrow-red);
  text-transform: uppercase;
  margin-bottom: 24px;
  font-weight: 500;
}
.three-doors-h2 {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(40px, 5.6vw, 64px);
  letter-spacing: 0.002em;
  line-height: 1;
  color: var(--bone-black);
  text-transform: uppercase;
  margin-bottom: 32px;
}
.three-doors-sub {
  font-family: var(--sans);
  font-weight: 400;
  font-size: clamp(16px, 1.6vw, 18px);
  line-height: 1.7;
  color: var(--steel);
  max-width: 640px;
  margin: 0 auto;
}

.doors-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  align-items: stretch;
}
@media (max-width: 980px) { .doors-grid { grid-template-columns: 1fr; gap: 20px; max-width: 560px; margin-left: auto; margin-right: auto; } }

.door {
  display: flex !important;
  flex-direction: column;
  text-decoration: none;
  color: var(--bone-black);
  background: var(--bone-white);
  border: 1px solid transparent;
  border-radius: 6px;
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
  min-height: 540px;
  box-shadow: 0 1px 0 rgba(10, 9, 8, 0.04);
}
.door:hover {
  transform: translateY(-6px);
  border-color: var(--bone-black);
  box-shadow: 0 32px 64px rgba(10, 9, 8, 0.1);
}
.door-dark {
  background: var(--bone-black);
  color: var(--bone-white);
}
.door-dark:hover {
  border-color: var(--marrow-red);
  box-shadow: 0 32px 64px rgba(107, 15, 26, 0.3);
}

.door-top {
  padding: 56px 40px 40px;
  flex: 1;
}

.door-mark-svg {
  width: 56px;
  height: 56px;
  display: block;
  margin-bottom: 36px;
  color: var(--bone-black);
}
.door-dark .door-mark-svg { color: var(--bone-white); }

.door-eyebrow {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.28em;
  color: var(--marrow-red);
  text-transform: uppercase;
  font-weight: 500;
  margin-bottom: 20px;
}
.door-dark .door-eyebrow { color: var(--steel-light); }

.door-h3 {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(40px, 4vw, 52px);
  letter-spacing: -0.01em;
  line-height: 1;
  margin-bottom: 20px;
  color: inherit;
  text-transform: none;
}

.door-tagline {
  font-family: var(--display);
  font-weight: 600;
  font-size: 19px;
  line-height: 1.35;
  letter-spacing: 0.002em;
  color: var(--bone-black);
  max-width: 320px;
}
.door-dark .door-tagline { color: var(--bone-white); }

.door-bottom {
  padding: 32px 40px 40px;
  border-top: 1px solid var(--line);
}
.door-dark .door-bottom { border-top-color: var(--line-dark); }

.door-list-label {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.28em;
  color: var(--steel);
  text-transform: uppercase;
  font-weight: 500;
  margin-bottom: 18px;
}
.door-dark .door-list-label { color: var(--steel-light); }

.door-list {
  list-style: none;
  margin: 0 0 32px 0;
  padding: 0;
}
.door-list li {
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.55;
  color: var(--steel);
  padding: 7px 0;
  display: flex;
  gap: 10px;
}
.door-list li::before {
  content: "—";
  font-family: var(--mono);
  color: var(--marrow-red);
  font-weight: 500;
  flex-shrink: 0;
}
.door-dark .door-list li { color: var(--bone-cream); }

.door-cta-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 20px;
  background: var(--bone-black);
  color: var(--bone-white);
  border-radius: 4px;
  transition: background 0.25s ease, transform 0.25s ease;
}
.door:hover .door-cta-row {
  background: var(--marrow-red);
  transform: translateX(2px);
}
.door-dark .door-cta-row { background: var(--marrow-red); color: var(--bone-white); }
.door-dark:hover .door-cta-row { background: var(--marrow-red-glow); }

.door-cta-text {
  font-family: var(--sans);
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.door-cta-arrow {
  font-family: var(--display);
  font-size: 20px;
  font-weight: 600;
  transition: transform 0.25s ease;
}
.door:hover .door-cta-arrow { transform: translateX(4px); }

/* ===== Bumped who-tags to 3 columns to fit 6 ===== */
.who-tags {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  max-width: 1080px;
  margin: 0 auto;
}
@media (max-width: 920px) { .who-tags { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .who-tags { grid-template-columns: 1fr; } }

/* ===== WHO IT'S FOR (tag styling — grid is defined above for 6-tag layout) ===== */
.who-for { background: var(--bone-cream); }
.who-tag {
  background: var(--bone-white);
  padding: 32px 32px 32px 56px;
  border: 1px solid var(--line);
  border-radius: 4px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  position: relative;
  transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
  cursor: default;
}
.who-tag::before {
  content: "";
  position: absolute;
  top: 38px;
  left: 28px;
  width: 10px;
  height: 10px;
  background: var(--marrow-red);
  border-radius: 50%;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.who-tag:hover {
  transform: translateY(-3px);
  border-color: var(--marrow-red);
  box-shadow: 0 16px 32px rgba(10, 9, 8, 0.06);
}
.who-tag:hover::before {
  transform: scale(1.4);
  box-shadow: 0 0 0 4px rgba(107, 15, 26, 0.15);
}
.who-tag-strong {
  font-family: var(--display);
  font-weight: 800;
  font-size: 18px;
  letter-spacing: 0.005em;
  text-transform: uppercase;
  color: var(--bone-black);
  line-height: 1;
}
.who-tag span:not(.who-tag-strong) {
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.55;
  color: var(--steel);
}

/* ===== HOW IT WORKS (visual upgrade) ===== */
.how { background: var(--bone-cream); }
.how-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
@media (max-width: 920px) { .how-steps { grid-template-columns: 1fr; } }

.how-step {
  background: linear-gradient(180deg, var(--bone-white) 0%, #F7F1E5 100%);
  padding: 56px 40px 48px;
  border-radius: 6px;
  position: relative;
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  border: 1px solid var(--line);
}
.how-step::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 4px;
  background: linear-gradient(180deg, var(--marrow-red) 0%, var(--marrow-red-glow) 100%);
}
.how-step:hover {
  transform: translateY(-6px);
  box-shadow: 0 24px 48px rgba(10, 9, 8, 0.08);
}
.how-num {
  font-family: var(--display);
  font-weight: 800;
  font-size: 64px;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--marrow-red);
  margin-bottom: 28px;
  display: block;
}
.how-step-title {
  font-family: var(--display);
  font-weight: 800;
  font-size: 22px;
  letter-spacing: 0.002em;
  line-height: 1.15;
  margin-bottom: 20px;
  text-transform: uppercase;
  color: var(--bone-black);
}
.how-step-desc {
  font-family: var(--sans);
  font-weight: 400;
  font-size: 15px;
  line-height: 1.7;
  color: var(--steel);
}

/* ===== HOW IT WORKS: ROSTER DASHBOARD FIGURE =====
   The roster dashboard recovered from the earlier hero build, restyled as a
   mid-page figure that illustrates Step 01. The app screen itself stays dark
   because it depicts the product UI. The figure wrapper, tie line, caption,
   and disclosure are restyled for the light bone-cream How section. Pure
   HTML and CSS, no images, no JS. The list is aria-hidden because the
   figure's aria-label already describes the picture. */
.howit-dash {
  width: min(820px, 100%);
  margin: var(--space-7) auto 0;
  position: relative;
}
.howit-dash-tie {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--marrow-red);
  font-weight: 500;
  text-align: center;
  margin-bottom: var(--space-3);
}
.howit-dash-frame {
  background: var(--bone-black);
  border: 1px solid rgba(10, 9, 8, 0.1);
  border-radius: 6px;
  padding: 22px 24px 12px;
  box-shadow: 0 24px 56px rgba(10, 9, 8, 0.14);
  text-align: left;
}
.howit-dash-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 16px;
  margin-bottom: 8px;
  border-bottom: 1px solid rgba(239, 233, 220, 0.08);
}
.howit-dash-head-left { display: flex; flex-direction: column; gap: 4px; }
.howit-dash-head-title {
  font-family: var(--display);
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--bone-white);
}
.howit-dash-head-sub {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 400;
  color: var(--steel-light);
  letter-spacing: 0.01em;
}
.howit-dash-head-right { display: flex; gap: 8px; flex-shrink: 0; }
.howit-dash-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--steel-light);
  padding: 5px 9px;
  border: 1px solid rgba(239, 233, 220, 0.1);
  border-radius: 2px;
  background: rgba(10, 9, 8, 0.5);
}
.howit-dash-chip-red {
  color: var(--steel-light);
  border-color: rgba(139, 24, 40, 0.55);
  background: rgba(107, 15, 26, 0.3);
}
.howit-dash-chip-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--marrow-red-glow);
  box-shadow: 0 0 0 2px rgba(139, 24, 40, 0.18);
}
.howit-dash-chip-dot-green {
  background: #6FBF74;
  box-shadow: 0 0 0 2px rgba(111, 191, 116, 0.15);
}

.howit-dash-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.howit-dash-row {
  display: grid;
  grid-template-columns: 14px 130px 92px 1fr auto;
  align-items: center;
  gap: 14px;
  padding: 11px 6px;
  border-bottom: 1px solid rgba(239, 233, 220, 0.05);
  font-family: var(--sans);
  font-size: 13px;
  line-height: 1.35;
  color: var(--steel-light);
}
.howit-dash-row:last-child { border-bottom: none; }
.howit-dash-row-flag {
  background: linear-gradient(90deg, rgba(107, 15, 26, 0.22) 0%, rgba(107, 15, 26, 0.06) 100%);
  border-left: 2px solid var(--marrow-red-glow);
  padding-left: 10px;
  margin-left: -4px;
}
.howit-dash-row-flag .howit-dash-name { color: var(--bone-white); }
.howit-dash-row-fade { opacity: 0.55; }

.howit-dash-dot {
  width: 9px; height: 9px; border-radius: 50%;
  background: #6FBF74;
  flex-shrink: 0;
}
.howit-dash-dot-red {
  background: var(--marrow-red-glow);
  box-shadow: 0 0 0 3px rgba(139, 24, 40, 0.22);
}
.howit-dash-dot-green { background: #6FBF74; }

.howit-dash-name {
  font-weight: 600;
  color: var(--bone-white);
  font-size: 13.5px;
  letter-spacing: 0.005em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.howit-dash-sleep {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--steel-light);
  white-space: nowrap;
}
.howit-dash-status {
  font-size: 12.5px;
  color: var(--steel-light);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.howit-dash-flag {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--bone-white);
  background: var(--marrow-red);
  padding: 4px 8px;
  border-radius: 2px;
  font-weight: 600;
  white-space: nowrap;
}

.howit-dash-more {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 6px 6px;
}
.howit-dash-more-line {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(239, 233, 220, 0.18) 50%, transparent 100%);
}
.howit-dash-more-label {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--steel-mid);
  font-weight: 500;
}
.howit-dash-more-mob { display: none; }
.howit-dash-more-desk { display: inline; }

.howit-dash-caption {
  text-align: center;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--steel);
  margin: 22px auto 6px;
  max-width: 580px;
  line-height: 1.55;
}
.howit-dash-disclosure {
  text-align: center;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--steel-mid);
  margin: 0 auto;
}

/* Mobile: collapse the row to a stacked layout so it never overflows.
   Tested down to a 320px viewport. */
@media (max-width: 720px) {
  .howit-dash { margin-top: var(--space-6); }
  .howit-dash-frame { padding: 16px 14px 8px; border-radius: 4px; }
  .howit-dash-head { gap: 10px; padding-bottom: 12px; }
  .howit-dash-head-title { font-size: 14px; }
  .howit-dash-head-sub { font-size: 11px; }
  .howit-dash-head-right { gap: 6px; flex-wrap: wrap; }
  .howit-dash-chip { font-size: 9px; padding: 4px 7px; }
  .howit-dash-row {
    grid-template-columns: 12px 1fr auto;
    grid-template-rows: auto auto;
    grid-template-areas:
      "dot name flag"
      ".   status status";
    gap: 4px 10px;
    padding: 10px 4px;
    font-size: 12.5px;
  }
  .howit-dash-row .howit-dash-dot { grid-area: dot; align-self: start; margin-top: 6px; }
  .howit-dash-row .howit-dash-name { grid-area: name; font-size: 13px; }
  .howit-dash-row .howit-dash-sleep { display: none; }
  .howit-dash-row .howit-dash-status { grid-area: status; font-size: 12px; white-space: normal; }
  .howit-dash-row .howit-dash-flag { grid-area: flag; font-size: 8px; letter-spacing: 0.14em; padding: 3px 6px; }
  .howit-dash-row-fade { display: none; }
  .howit-dash-more-label { font-size: 9px; letter-spacing: 0.18em; }
  .howit-dash-more-desk { display: none; }
  .howit-dash-more-mob { display: inline; }
  .howit-dash-caption { font-size: 11px; letter-spacing: 0.14em; margin: 18px auto 4px; }
  .howit-dash-disclosure { font-size: 9px; letter-spacing: 0.18em; }
}

/* ===== PILLARS (each with unique visual identity) ===== */
.pillars-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
@media (max-width: 920px) { .pillars-grid { grid-template-columns: 1fr; } }

.pillar {
  background: var(--bone-white);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 56px 40px 40px;
  position: relative;
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}
.pillar::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--marrow-red);
  transition: height 0.3s ease;
}
/* Each pillar gets a unique radial accent in the upper-right */
.pillar::after {
  content: "";
  position: absolute;
  top: -100px;
  right: -100px;
  width: 280px;
  height: 280px;
  border-radius: 50%;
  opacity: 0.06;
  pointer-events: none;
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.pillar:nth-child(1)::after {
  background: radial-gradient(circle, var(--marrow-red) 0%, transparent 70%);
}
.pillar:nth-child(2)::after {
  background: radial-gradient(circle, var(--bone-black) 0%, transparent 70%);
}
.pillar:nth-child(3)::after {
  background: radial-gradient(circle, var(--steel) 0%, transparent 70%);
}
.pillar:hover {
  transform: translateY(-6px);
  box-shadow: 0 32px 64px rgba(10, 9, 8, 0.1);
  border-color: var(--bone-black);
}
.pillar:hover::before { height: 6px; }
.pillar:hover::after { opacity: 0.12; transform: scale(1.1); }

.pillar-num {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.28em;
  color: var(--marrow-red);
  text-transform: uppercase;
  font-weight: 500;
  margin-bottom: 32px;
  position: relative;
}
.pillar-name {
  font-family: var(--display);
  font-weight: 800;
  font-size: 28px;
  letter-spacing: 0.005em;
  text-transform: uppercase;
  margin-bottom: 24px;
  line-height: 1;
  position: relative;
}
.pillar-name span { color: var(--marrow-red); }
.pillar-desc {
  font-family: var(--sans);
  font-weight: 400;
  font-size: 15px;
  line-height: 1.7;
  color: var(--steel);
  margin-bottom: 32px;
  position: relative;
}
.pillar-desc strong { color: var(--bone-black); font-weight: 600; }
.pillar-detail {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  color: var(--steel);
  text-transform: uppercase;
  border-top: 1px solid var(--line);
  padding-top: 20px;
  line-height: 1.8;
  font-weight: 500;
  position: relative;
}

/* ===== PRICING TEASE — Three Founding Offers ===== */
.pricing-tease { background: var(--bone-cream); }
.pricing-tease-header { text-align: center; max-width: 880px; margin: 0 auto 64px; }
.pricing-tease-header .section-title { margin-bottom: 24px; }
.pricing-tease-header .section-lede { margin: 0 auto; }

.founding-offers {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-bottom: 56px;
}
@media (max-width: 920px) {
  .founding-offers { grid-template-columns: 1fr; max-width: 560px; margin-left: auto; margin-right: auto; }
}

.offer-card {
  background: var(--bone-white);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 40px 32px;
  display: flex;
  flex-direction: column;
  position: relative;
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}
.offer-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 24px 48px rgba(10, 9, 8, 0.08);
  border-color: var(--bone-black);
}
.offer-card-featured {
  background: var(--bone-black);
  color: var(--bone-white);
  border-color: var(--bone-black);
}
.offer-card-featured::before {
  content: "FOUNDER ACCESS";
  position: absolute;
  top: -10px;
  left: 32px;
  background: var(--marrow-red);
  color: var(--bone-white);
  padding: 5px 12px;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.22em;
  font-weight: 500;
  border-radius: 2px;
}
.offer-card-featured:hover {
  border-color: var(--marrow-red);
  box-shadow: 0 24px 48px rgba(107, 15, 26, 0.25);
}

.offer-eyebrow {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  color: var(--marrow-red);
  text-transform: uppercase;
  font-weight: 500;
  margin-bottom: 16px;
}
.offer-card-featured .offer-eyebrow { color: var(--steel-light); }

.offer-name {
  font-family: var(--display);
  font-weight: 800;
  font-size: 22px;
  letter-spacing: 0.005em;
  text-transform: uppercase;
  margin-bottom: 16px;
  color: var(--bone-black);
  line-height: 1.1;
}
.offer-card-featured .offer-name { color: var(--bone-white); }

.offer-price {
  font-family: var(--display);
  font-weight: 800;
  font-size: 56px;
  line-height: 1;
  letter-spacing: -0.025em;
  color: var(--bone-black);
  margin-bottom: 6px;
}
.offer-card-featured .offer-price { color: var(--bone-white); }
.offer-price span {
  font-size: 16px;
  color: var(--steel);
  font-weight: 600;
}
.offer-card-featured .offer-price span { color: var(--steel-light); }

.offer-plus {
  font-family: var(--sans);
  font-weight: 500;
  font-size: 13px;
  color: var(--marrow-red);
  margin-bottom: 28px;
  padding-bottom: 28px;
  border-bottom: 1px solid var(--line);
  line-height: 1.5;
}
.offer-card-featured .offer-plus {
  color: var(--marrow-red-glow);
  border-bottom-color: var(--line-dark);
}

.offer-features {
  list-style: none;
  margin-bottom: 28px;
  flex: 1;
}
.offer-features li {
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.6;
  color: var(--steel);
  padding: 6px 0 6px 22px;
  position: relative;
}
.offer-features li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 14px;
  width: 8px;
  height: 8px;
  background: var(--marrow-red);
  border-radius: 50%;
}
.offer-card-featured .offer-features li { color: var(--bone-cream); }

.offer-scarcity {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  color: var(--marrow-red);
  text-transform: uppercase;
  font-weight: 500;
  text-align: center;
  margin-bottom: 20px;
  padding: 10px;
  border: 1px solid var(--marrow-red);
  border-radius: 2px;
}
.offer-card-featured .offer-scarcity {
  color: var(--marrow-red-glow);
  border-color: var(--marrow-red);
}

.offer-cta {
  display: block;
  background: var(--bone-black);
  color: var(--bone-white);
  padding: 14px;
  font-family: var(--sans);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  border-radius: 2px;
  text-align: center;
  text-decoration: none;
  transition: background 0.2s ease;
}
.offer-cta:hover { background: var(--marrow-red); }
.offer-card-featured .offer-cta { background: var(--marrow-red); }
.offer-card-featured .offer-cta:hover { background: var(--marrow-red-glow); }

.pricing-tease-footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  text-align: center;
}
.pricing-tease-trust {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  color: var(--steel);
  text-transform: uppercase;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 8px;
}

.pricing-card {
  background: var(--bone-black);
  color: var(--bone-white);
  padding: 56px 48px;
  border-radius: 4px;
}
.pricing-tier {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.3em;
  color: var(--marrow-red-glow);
  text-transform: uppercase;
  font-weight: 500;
  margin-bottom: 16px;
}
.pricing-price {
  font-family: var(--display);
  font-weight: 800;
  font-size: 80px;
  line-height: 1;
  letter-spacing: -0.02em;
  margin-bottom: 8px;
  color: var(--bone-white);
}
.pricing-price span {
  font-size: 24px;
  color: var(--steel-light);
  font-weight: 600;
}
.pricing-plus {
  font-family: var(--sans);
  font-weight: 500;
  font-size: 15px;
  color: var(--bone-cream);
  margin-bottom: 32px;
  padding-bottom: 32px;
  border-bottom: 1px solid var(--line-dark);
  line-height: 1.5;
}
.pricing-features {
  list-style: none;
  margin-bottom: 32px;
}
.pricing-features li {
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.5;
  color: var(--bone-cream);
  padding: 10px 0;
  padding-left: 28px;
  position: relative;
}
.pricing-features li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 17px;
  width: 10px;
  height: 10px;
  background: var(--marrow-red);
  border-radius: 50%;
}
.pricing-founding {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  color: var(--marrow-red-glow);
  text-transform: uppercase;
  text-align: center;
  padding: 16px;
  border: 1px solid var(--marrow-red);
  border-radius: 2px;
  line-height: 1.6;
}

/* ===== POSITIONING ===== */
.positioning-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: var(--bone-white);
  border: 1px solid var(--line);
}
.positioning-table th, .positioning-table td {
  padding: 22px 28px;
  text-align: left;
  border-bottom: 1px solid var(--line);
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.55;
  color: var(--steel);
}
.positioning-table th {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  color: var(--steel);
  text-transform: uppercase;
  font-weight: 500;
  background: var(--bone-cream);
}
.positioning-table td.brand-cell {
  font-family: var(--display);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.02em;
  color: var(--bone-black);
  text-transform: uppercase;
  width: 22%;
}
.positioning-table tr.marrow-row { background: var(--bone-black); }
.positioning-table tr.marrow-row td { color: var(--bone-white); border-bottom-color: var(--ash); }
.positioning-table tr.marrow-row td.brand-cell { color: var(--marrow-red-glow); }
@media (max-width: 720px) {
  .positioning-table th:nth-child(4), .positioning-table td:nth-child(4) { display: none; }
}

/* ===== WHO IT'S FOR ===== */
.who-for { background: var(--bone-cream); }
.who-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}
@media (max-width: 720px) { .who-grid { grid-template-columns: 1fr; } }
.who-card {
  background: var(--bone-white);
  padding: 40px;
  border: 1px solid var(--line);
}
.who-title {
  font-family: var(--display);
  font-weight: 700;
  font-size: 20px;
  letter-spacing: 0.005em;
  line-height: 1.2;
  margin-bottom: 12px;
}
.who-desc {
  font-family: var(--sans);
  font-weight: 400;
  font-size: 15px;
  line-height: 1.7;
  color: var(--steel);
}

/* ===== APPLY ===== */
.apply { background: var(--bone-cream); }
.apply-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 96px;
  align-items: start;
}
@media (max-width: 920px) { .apply-grid { grid-template-columns: 1fr; gap: 56px; } }

.apply-detail {
  font-family: var(--sans);
  font-weight: 400;
  font-size: 15px;
  line-height: 1.7;
  color: var(--steel);
  max-width: 460px;
  margin-bottom: 40px;
}

.apply-receipts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  padding: 32px;
  background: var(--bone-black);
  color: var(--bone-white);
  border-radius: 4px;
}
@media (max-width: 720px) { .apply-receipts { grid-template-columns: 1fr; gap: 16px; } }
.apply-receipt-num {
  font-family: var(--display);
  font-weight: 800;
  font-size: 36px;
  letter-spacing: -0.01em;
  line-height: 1;
  color: var(--marrow-red-glow);
  margin-bottom: 8px;
}
.apply-receipt-label {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  color: var(--steel-light);
  text-transform: uppercase;
  line-height: 1.6;
}

.apply-form {
  background: var(--bone-white);
  border: 1px solid var(--line);
  padding: 48px;
  border-radius: 4px;
}
@media (max-width: 720px) { .apply-form { padding: 32px 24px; } }

.apply-form-eyebrow {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.25em;
  color: var(--marrow-red);
  text-transform: uppercase;
  font-weight: 500;
  margin-bottom: 16px;
}
.apply-form-title {
  font-family: var(--display);
  font-weight: 800;
  font-size: 28px;
  letter-spacing: 0.005em;
  text-transform: uppercase;
  margin-bottom: 32px;
  line-height: 1.1;
}
.field { margin-bottom: 24px; }
.field-label {
  display: block;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  color: var(--steel);
  text-transform: uppercase;
  font-weight: 500;
  margin-bottom: 8px;
}
.field-input,
.field-textarea {
  width: 100%;
  /* bone-white is aliased to bone-cream by the locked signature palette, so
     the input surface can sit on a same-color card. The visible box comes
     from the border, never from a background difference. Found 2026-06-09
     when /coach/onboarding/ rendered with invisible inputs. */
  background: var(--bone-cream);
  border: 1px solid rgba(10, 9, 8, 0.18);
  padding: 14px 16px;
  font-family: var(--sans);
  font-size: 15px;
  color: var(--bone-black);
  border-radius: 2px;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.field-input:focus,
.field-textarea:focus {
  outline: 2px solid var(--marrow-red);
  outline-offset: 2px;
  border-color: var(--marrow-red);
  background: var(--bone-white);
}
.field-textarea { resize: vertical; min-height: 120px; line-height: 1.5; }
.field-help {
  font-family: var(--sans);
  font-size: 12px;
  color: var(--steel);
  margin-top: 6px;
  line-height: 1.5;
}
.submit-btn {
  width: 100%;
  background: var(--bone-black);
  color: var(--bone-white);
  padding: 18px;
  font-family: var(--sans);
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  border-radius: 2px;
  transition: background 0.15s ease;
}
.submit-btn:hover { background: var(--marrow-red); }
.submit-disclaimer {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  color: var(--steel);
  text-transform: uppercase;
  text-align: center;
  margin-top: 20px;
  line-height: 1.7;
}

/* ===== CTA STRIP ===== */
.cta-strip {
  background: var(--marrow-red);
  color: var(--bone-white);
  text-align: center;
  padding: 80px 0;
}
.cta-strip-line {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(28px, 4vw, 48px);
  letter-spacing: 0.02em;
  line-height: 1.15;
  text-transform: uppercase;
  margin-bottom: 32px;
}
.cta-strip-btn {
  background: var(--bone-white);
  color: var(--marrow-red);
  padding: 18px 40px;
  font-family: var(--sans);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border-radius: 2px;
  display: inline-block;
  transition: transform 0.15s ease;
}
.cta-strip-btn:hover { transform: translateY(-1px); }

/* ===== FOOTER ===== */
footer {
  background: var(--bone-black);
  color: var(--steel-light);
  padding: 80px 0 40px;
}
.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 64px;
  margin-bottom: 64px;
}
@media (max-width: 920px) { .footer-grid { grid-template-columns: 1fr 1fr; gap: 48px; } }
@media (max-width: 480px) { .footer-grid { grid-template-columns: 1fr; gap: 40px; } }

.footer-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
}
.footer-wordmark {
  font-family: var(--display);
  font-weight: 800;
  font-size: 22px;
  letter-spacing: 0.04em;
  color: var(--bone-white);
  text-transform: uppercase;
}
.footer-bio {
  font-family: var(--sans);
  font-weight: 400;
  font-size: 14px;
  line-height: 1.7;
  color: var(--steel-light);
  max-width: 360px;
}
.footer-col-title {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  color: var(--steel);
  text-transform: uppercase;
  font-weight: 500;
  margin-bottom: 20px;
}
.footer-col ul { list-style: none; }
.footer-col li {
  font-family: var(--sans);
  font-size: 14px;
  line-height: 2;
}
.footer-col a {
  color: var(--steel-light);
  transition: color 0.15s ease;
}
.footer-col a:hover { color: var(--bone-white); }
.footer-bottom {
  padding-top: 32px;
  border-top: 1px solid var(--line-dark);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  color: var(--steel);
  text-transform: uppercase;
}

/* ===== INTERIOR PAGE STYLES ===== */
.page-hero {
  background: var(--bone-cream);
  padding: 100px 0 80px;
  text-align: center;
}
.page-hero-eyebrow {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.3em;
  color: var(--marrow-red);
  text-transform: uppercase;
  margin-bottom: 24px;
  font-weight: 500;
}
.page-hero-title {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(40px, 6vw, 80px);
  letter-spacing: 0.005em;
  line-height: 1.05;
  text-transform: uppercase;
  max-width: 1100px;
  margin: 0 auto 24px;
}
.page-hero-lede {
  font-family: var(--sans);
  font-weight: 400;
  font-size: 19px;
  line-height: 1.6;
  color: var(--steel);
  max-width: 680px;
  margin: 0 auto;
}
.page-hero-lede strong { color: var(--bone-black); font-weight: 600; }

/* Pricing page */
.pricing-comparison {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 64px;
}
@media (max-width: 920px) { .pricing-comparison { grid-template-columns: 1fr; } }
.pricing-tier-card {
  background: var(--bone-white);
  padding: 48px;
  border: 1px solid var(--line);
}
.pricing-tier-card.featured {
  background: var(--bone-black);
  color: var(--bone-white);
  border-color: var(--bone-black);
  position: relative;
}
.pricing-tier-card.featured::before {
  content: "FOUNDER COHORT";
  position: absolute;
  top: -12px;
  left: 32px;
  background: var(--marrow-red);
  color: var(--bone-white);
  padding: 6px 14px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  font-weight: 500;
  border-radius: 2px;
}
.pricing-tier-card-name {
  font-family: var(--display);
  font-weight: 800;
  font-size: 24px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  margin-bottom: 12px;
}
.pricing-tier-card.featured .pricing-tier-card-name { color: var(--marrow-red-glow); }
.pricing-tier-card-tagline {
  font-family: var(--sans);
  font-size: 14px;
  color: var(--steel);
  margin-bottom: 32px;
  line-height: 1.5;
}
.pricing-tier-card.featured .pricing-tier-card-tagline { color: var(--steel-light); }
.pricing-tier-card-price {
  font-family: var(--display);
  font-weight: 800;
  font-size: 56px;
  line-height: 1;
  letter-spacing: -0.02em;
  margin-bottom: 4px;
}
.pricing-tier-card-price span {
  font-size: 18px;
  color: var(--steel);
  font-weight: 500;
}
.pricing-tier-card.featured .pricing-tier-card-price span { color: var(--steel-light); }
.pricing-tier-card-plus {
  font-family: var(--sans);
  font-weight: 500;
  font-size: 14px;
  color: var(--marrow-red);
  margin-bottom: 32px;
  padding-bottom: 32px;
  border-bottom: 1px solid var(--line);
}
.pricing-tier-card.featured .pricing-tier-card-plus {
  color: var(--marrow-red-glow);
  border-bottom-color: var(--line-dark);
}
.pricing-tier-card-features {
  list-style: none;
  margin-bottom: 32px;
}
.pricing-tier-card-features li {
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.5;
  color: var(--steel);
  padding: 10px 0;
  padding-left: 26px;
  position: relative;
}
.pricing-tier-card.featured .pricing-tier-card-features li { color: var(--steel-light); }
.pricing-tier-card-features li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 17px;
  width: 10px;
  height: 10px;
  background: var(--marrow-red);
  border-radius: 50%;
}

/* Math example */
.math-example {
  background: var(--bone-white);
  padding: 48px;
  border: 1px solid var(--line);
  border-radius: 4px;
  margin-top: 48px;
}
.math-example-title {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.3em;
  color: var(--marrow-red);
  text-transform: uppercase;
  margin-bottom: 24px;
  font-weight: 500;
}
.math-example-rows {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
@media (max-width: 920px) { .math-example-rows { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .math-example-rows { grid-template-columns: 1fr; } }
.math-row {
  padding: 24px;
  background: var(--bone-cream);
  border-radius: 2px;
}
.math-row.featured { background: var(--bone-black); color: var(--bone-white); }
.math-row-label {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  color: var(--steel);
  text-transform: uppercase;
  margin-bottom: 12px;
}
.math-row.featured .math-row-label { color: var(--steel-light); }
.math-row-value {
  font-family: var(--display);
  font-weight: 800;
  font-size: 28px;
  line-height: 1;
  letter-spacing: -0.01em;
}
.math-row.featured .math-row-value { color: var(--marrow-red-glow); }

/* ===== METHOD page ===== */
.method-deep { background: var(--bone-black); color: var(--bone-white); }
.method-deep .section-eyebrow { color: var(--steel-light); }
.method-deep .section-title { color: var(--bone-white); }
.method-deep .section-lede { color: var(--steel-light); }

.deep-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 96px;
  align-items: start;
}
@media (max-width: 920px) { .deep-grid { grid-template-columns: 1fr; gap: 56px; } }
.deep-content p {
  font-family: var(--sans);
  font-weight: 400;
  font-size: 18px;
  line-height: 1.75;
  color: var(--steel-light);
  margin-bottom: 24px;
}
.deep-content p strong { color: var(--bone-white); font-weight: 600; }
.deep-tagline {
  font-family: var(--display);
  font-weight: 800;
  font-size: 32px;
  letter-spacing: 0.005em;
  line-height: 1.2;
  color: var(--bone-white);
  text-transform: uppercase;
  margin-top: 32px;
  padding-top: 32px;
  border-top: 1px solid var(--line-dark);
}
.deep-tagline em { color: var(--marrow-red-glow); font-style: normal; }

/* Coach dashboard preview */
.dash-preview {
  background: var(--bone-black);
  border-radius: 8px;
  padding: 24px;
  box-shadow: 0 40px 80px rgba(10, 9, 8, 0.2);
  margin-top: 48px;
}
.dash-preview-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--line-dark);
  margin-bottom: 24px;
}
.dash-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--ash);
}
.dash-dot.red { background: #FF5F57; }
.dash-dot.yellow { background: #FEBC2E; }
.dash-dot.green { background: #28C840; }

.dash-content {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 24px;
  min-height: 500px;
  color: var(--bone-white);
}
@media (max-width: 720px) { .dash-content { grid-template-columns: 1fr; } }

.dash-sidebar {
  background: rgba(239, 233, 220, 0.03);
  border-radius: 4px;
  padding: 24px 0;
}
.dash-sidebar-section {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.22em;
  color: var(--steel);
  text-transform: uppercase;
  padding: 0 24px;
  margin-bottom: 12px;
  margin-top: 16px;
}
.dash-sidebar-section:first-child { margin-top: 0; }
.dash-sidebar-item {
  padding: 10px 24px;
  font-family: var(--sans);
  font-size: 14px;
  color: var(--steel-light);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.dash-sidebar-item:hover { background: rgba(239, 233, 220, 0.05); color: var(--bone-white); }
.dash-sidebar-item.active {
  background: rgba(107, 15, 26, 0.2);
  color: var(--bone-white);
  border-left: 2px solid var(--marrow-red);
}

.dash-main { padding: 8px 16px; }
.dash-greeting {
  font-family: var(--display);
  font-weight: 800;
  font-size: 32px;
  letter-spacing: 0.005em;
  text-transform: uppercase;
  margin-bottom: 8px;
}
.dash-subtitle {
  font-family: var(--sans);
  font-size: 14px;
  color: var(--steel-light);
  margin-bottom: 32px;
}
.dash-alert {
  background: rgba(107, 15, 26, 0.15);
  border: 1px solid var(--marrow-red);
  padding: 20px;
  border-radius: 4px;
  margin-bottom: 24px;
}
.dash-alert-eyebrow {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  color: var(--marrow-red-glow);
  text-transform: uppercase;
  margin-bottom: 8px;
  font-weight: 500;
}
.dash-alert-title {
  font-family: var(--display);
  font-weight: 700;
  font-size: 18px;
  margin-bottom: 4px;
}
.dash-alert-detail {
  font-family: var(--sans);
  font-size: 13px;
  color: var(--steel-light);
  line-height: 1.6;
}

.dash-metrics {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 24px;
}
.dash-metric {
  background: rgba(239, 233, 220, 0.03);
  padding: 16px;
  border-radius: 4px;
}
.dash-metric-label {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.2em;
  color: var(--steel);
  text-transform: uppercase;
  margin-bottom: 6px;
}
.dash-metric-value {
  font-family: var(--display);
  font-weight: 800;
  font-size: 28px;
  line-height: 1;
  letter-spacing: -0.01em;
}
.dash-metric.featured .dash-metric-value { color: var(--marrow-red-glow); }

.dash-table {
  background: rgba(239, 233, 220, 0.02);
  border-radius: 4px;
  overflow: hidden;
}
.dash-table-row {
  display: grid;
  grid-template-columns: 1fr 80px 80px 100px;
  gap: 16px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--line-dark);
  font-family: var(--sans);
  font-size: 13px;
  color: var(--steel-light);
  align-items: center;
}
.dash-table-row:last-child { border-bottom: none; }
.dash-table-row.header {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  color: var(--steel);
  text-transform: uppercase;
  background: rgba(239, 233, 220, 0.04);
}
.dash-table-row.flagged { background: rgba(107, 15, 26, 0.08); color: var(--bone-white); }

/* Mobile: the demo dashboard mockup must never push the page past the
   viewport. The fixed 80px/80px/100px columns plus gaps exceed a 375px phone
   viewport once preview and main padding are accounted for, so on small
   screens the table columns become flexible and the dash mockup is allowed
   to scroll inside itself instead of widening the page. */
@media (max-width: 720px) {
  .dash-preview { padding: 16px; }
  .dash-main { padding: 8px 0; }
  .dash-content { overflow-x: hidden; }
  .dash-table { overflow-x: auto; }
  .dash-table-row {
    grid-template-columns: 1.4fr 0.8fr 0.8fr 1fr;
    gap: 8px;
    padding: 12px 12px;
  }
}

/* Generic page section overrides */
.page-section { padding: 80px 0; }

/* Thank you page */
.thank-you-page {
  min-height: 80vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: var(--bone-cream);
}
.thank-you-content {
  max-width: 600px;
  padding: 0 32px;
}
.thank-you-mark {
  width: 100px;
  height: 100px;
  margin: 0 auto 40px;
  display: block;
}
.thank-you-title {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(36px, 5vw, 56px);
  letter-spacing: 0.005em;
  line-height: 1.1;
  text-transform: uppercase;
  margin-bottom: 24px;
}
.thank-you-message {
  font-family: var(--sans);
  font-weight: 400;
  font-size: 18px;
  line-height: 1.7;
  color: var(--steel);
  margin-bottom: 40px;
}
.thank-you-message strong { color: var(--bone-black); font-weight: 600; }

/* Accessibility helper: visible to assistive tech, hidden visually. */
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

/* ===== LOOK INSIDE TILES (homepage) =====
   Three tiles below the toolkit, pointing into /look-inside/. Pure CSS
   thumbnails, no images. Each tile is a real link the prospect can walk
   into without filling out a form. */
.look-inside-tiles {
  background: var(--bone-white);
  padding: 120px 0 140px;
  border-top: 1px solid var(--line);
}
.look-inside-header {
  text-align: center;
  max-width: 720px;
  margin: 0 auto 64px;
}
.look-inside-header .section-eyebrow { color: var(--marrow-red); }
.look-inside-header .section-title { color: var(--bone-black); margin-bottom: 24px; }
.look-inside-header .section-lede {
  color: var(--steel);
  font-size: 18px;
  margin: 0 auto;
  text-align: center;
}
.look-inside-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.look-tile {
  display: flex;
  flex-direction: column;
  background: var(--bone-cream);
  border: 1px solid var(--line);
  border-radius: 4px;
  overflow: hidden;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
  color: var(--bone-black);
}
.look-tile:hover {
  transform: translateY(-3px);
  border-color: var(--marrow-red);
  box-shadow: 0 24px 60px rgba(10, 9, 8, 0.12);
}
.look-tile-thumb {
  position: relative;
  aspect-ratio: 16 / 10;
  background: var(--bone-black);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.look-tile-thumb::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 80% 60% at 50% 40%, rgba(107, 15, 26, 0.12) 0%, transparent 60%);
  pointer-events: none;
}

/* Coach dashboard thumb: tiny dashboard-style preview */
.look-thumb-frame {
  width: 100%;
  background: rgba(239, 233, 220, 0.04);
  border: 1px solid rgba(239, 233, 220, 0.12);
  border-radius: 3px;
  padding: 14px;
  position: relative;
  z-index: 1;
}
.look-thumb-bar {
  display: flex;
  gap: 6px;
  margin-bottom: 12px;
}
.look-thumb-bar span {
  width: 8px; height: 8px; border-radius: 50%;
  background: rgba(239, 233, 220, 0.18);
}
.look-thumb-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 0;
  border-bottom: 1px solid rgba(239, 233, 220, 0.06);
}
.look-thumb-row:last-child { border-bottom: none; }
.look-thumb-row-flag {
  background: linear-gradient(90deg, rgba(107, 15, 26, 0.2) 0%, rgba(107, 15, 26, 0.04) 100%);
  margin: 0 -4px;
  padding: 8px 4px;
  border-left: 2px solid var(--marrow-red);
  border-bottom-color: transparent;
}
.look-thumb-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: #6FBF74;
  flex-shrink: 0;
}
.look-thumb-dot-red { background: var(--marrow-red); }
.look-thumb-line {
  height: 6px;
  background: rgba(239, 233, 220, 0.22);
  border-radius: 2px;
}
.look-thumb-line-name { width: 80px; }
.look-thumb-line-meta { flex: 1; background: rgba(239, 233, 220, 0.1); }
.look-thumb-row-flag .look-thumb-line-name { background: rgba(239, 233, 220, 0.55); }
.look-thumb-row-flag .look-thumb-line-meta { background: rgba(239, 233, 220, 0.3); }

/* Athlete view thumb: phone shape */
.look-tile-thumb-athlete { background: var(--bone-black); }
.look-thumb-phone {
  width: 130px;
  aspect-ratio: 9 / 18;
  background: rgba(239, 233, 220, 0.06);
  border: 1px solid rgba(239, 233, 220, 0.18);
  border-radius: 14px;
  position: relative;
  padding: 18px 10px 14px;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.look-thumb-phone-notch {
  position: absolute;
  top: 6px;
  left: 50%;
  transform: translateX(-50%);
  width: 38px;
  height: 4px;
  background: rgba(239, 233, 220, 0.25);
  border-radius: 3px;
}
.look-thumb-phone-eyebrow {
  width: 50px;
  height: 5px;
  background: var(--marrow-red-glow);
  border-radius: 1px;
  margin-top: 8px;
}
.look-thumb-phone-title {
  width: 86%;
  height: 10px;
  background: rgba(239, 233, 220, 0.55);
  border-radius: 2px;
}
.look-thumb-phone-block {
  width: 100%;
  height: 26px;
  background: rgba(239, 233, 220, 0.08);
  border-radius: 3px;
}
.look-thumb-phone-block-short { width: 70%; height: 18px; }
.look-thumb-phone-meta {
  display: flex;
  gap: 6px;
  margin-top: auto;
}
.look-thumb-phone-meta span {
  flex: 1;
  height: 14px;
  background: rgba(239, 233, 220, 0.1);
  border-radius: 2px;
}
.look-thumb-phone-meta span:first-child { background: rgba(107, 15, 26, 0.5); }

/* Founder feature thumb: hex mark on warm gradient */
.look-tile-thumb-founder {
  background:
    radial-gradient(ellipse 70% 60% at 50% 50%, rgba(107, 15, 26, 0.35) 0%, var(--bone-black) 70%);
}
.look-thumb-portrait {
  width: 140px;
  height: 140px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 1;
}
.look-thumb-portrait-inner {
  width: 100%;
  height: 100%;
}
.look-thumb-portrait-inner svg { width: 100%; height: 100%; }

.look-tile-body {
  padding: 24px 22px 26px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
}
.look-tile-eyebrow {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--marrow-red);
  font-weight: 500;
}
.look-tile-title {
  font-family: var(--display);
  font-weight: 800;
  font-size: 22px;
  letter-spacing: 0.005em;
  line-height: 1.15;
  color: var(--bone-black);
  text-transform: uppercase;
  margin: 0;
}
.look-tile-desc {
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.55;
  color: var(--steel);
  margin: 0;
}
.look-tile-cta {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--marrow-red);
  font-weight: 500;
  margin-top: auto;
  padding-top: 12px;
}
.look-tile:hover .look-tile-cta { color: var(--marrow-red-deep, var(--bone-black)); }

@media (max-width: 960px) {
  .look-inside-grid { grid-template-columns: 1fr; gap: 18px; }
  .look-tile-thumb { aspect-ratio: 16 / 9; }
  .look-tile-body { padding: 22px 20px 24px; }
}
@media (max-width: 720px) {
  .look-inside-tiles { padding: 80px 0 100px; }
  .look-inside-header { margin-bottom: 48px; }
  .look-tile-title { font-size: 20px; }
}

/* ===== LOOK INSIDE PUBLIC DEMO PAGES =====
   /look-inside/, /look-inside/coach/, /look-inside/athlete/
   Standalone public surfaces. Reuse hero-dash visual language. */
.look-page { background: var(--bone-white); color: var(--bone-black); }
.look-banner {
  background: var(--bone-black);
  color: var(--bone-white);
  padding: 14px 0;
  text-align: center;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  border-bottom: 1px solid rgba(239, 233, 220, 0.08);
}
.look-banner strong { color: var(--marrow-red-glow); font-weight: 600; }

.look-hub-hero {
  background: var(--bone-cream);
  padding: 100px 0 80px;
  text-align: center;
}
.look-hub-hero .section-title { margin-bottom: 24px; }
.look-hub-hero .section-lede { margin: 0 auto; text-align: center; }

.look-page-hero {
  background: var(--bone-black);
  color: var(--bone-white);
  padding: 80px 0 60px;
  text-align: center;
}
.look-page-hero .look-page-eyebrow {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--marrow-red-glow);
  margin-bottom: 22px;
  font-weight: 500;
}
.look-page-hero .look-page-title {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(40px, 7vw, 84px);
  letter-spacing: 0.005em;
  line-height: 0.96;
  text-transform: uppercase;
  margin-bottom: 28px;
}
.look-page-hero .look-page-lede {
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.65;
  color: var(--steel-light);
  max-width: 640px;
  margin: 0 auto;
}

.look-page-body {
  background: var(--bone-black);
  padding: 40px 0 100px;
}

/* Expanded coach dashboard demo */
.look-coach-dash {
  background: linear-gradient(180deg, rgba(239, 233, 220, 0.05) 0%, rgba(239, 233, 220, 0.025) 100%);
  border: 1px solid rgba(239, 233, 220, 0.12);
  border-radius: 6px;
  padding: 28px 30px;
  max-width: 900px;
  margin: 0 auto;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.45);
}
.look-coach-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 18px;
  margin-bottom: 14px;
  border-bottom: 1px solid rgba(239, 233, 220, 0.08);
  flex-wrap: wrap;
}
.look-coach-toolbar-left { display: flex; flex-direction: column; gap: 4px; }
.look-coach-toolbar-title {
  font-family: var(--display);
  font-weight: 700;
  font-size: 18px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--bone-white);
}
.look-coach-toolbar-sub {
  font-family: var(--sans);
  font-size: 13px;
  color: var(--steel-light);
}
.look-coach-toolbar-right { display: flex; gap: 10px; flex-wrap: wrap; }
.look-coach-tab {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--steel-light);
  padding: 7px 11px;
  border: 1px solid rgba(239, 233, 220, 0.12);
  border-radius: 2px;
  background: rgba(10, 9, 8, 0.5);
}
.look-coach-tab-active {
  color: var(--bone-white);
  background: var(--marrow-red);
  border-color: var(--marrow-red);
}

.look-coach-quickactions {
  background: rgba(10, 9, 8, 0.55);
  border: 1px solid rgba(139, 24, 40, 0.35);
  border-radius: 4px;
  padding: 18px 20px;
  margin-bottom: 22px;
}
.look-coach-quickactions-title {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--marrow-red-glow);
  margin-bottom: 14px;
  font-weight: 500;
}
.look-coach-quickactions-list {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  list-style: none;
  padding: 0;
  margin: 0;
}
.look-coach-quickactions-list li {
  font-family: var(--sans);
  font-size: 13px;
  color: var(--bone-white);
  padding: 8px 14px;
  border: 1px solid rgba(239, 233, 220, 0.16);
  border-radius: 2px;
  background: rgba(239, 233, 220, 0.04);
}

.look-coach-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.look-coach-row {
  display: grid;
  grid-template-columns: 14px 150px 110px 1fr auto;
  align-items: center;
  gap: 14px;
  padding: 13px 6px;
  border-bottom: 1px solid rgba(239, 233, 220, 0.05);
  font-family: var(--sans);
  font-size: 13.5px;
  color: var(--steel-light);
}
.look-coach-row-flag {
  background: linear-gradient(90deg, rgba(107, 15, 26, 0.18) 0%, rgba(107, 15, 26, 0.04) 100%);
  border-left: 2px solid var(--marrow-red);
  padding-left: 10px;
  margin-left: -4px;
}
.look-coach-row-flag .look-coach-name { color: var(--bone-white); }
.look-coach-dot {
  width: 9px; height: 9px; border-radius: 50%;
  background: #6FBF74;
}
.look-coach-dot-red {
  background: var(--marrow-red);
  box-shadow: 0 0 0 3px rgba(139, 24, 40, 0.18);
}
.look-coach-name {
  font-weight: 600;
  color: var(--bone-white);
  font-size: 14px;
}
.look-coach-sleep {
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.04em;
  color: var(--steel-light);
}
.look-coach-status { font-size: 13px; color: var(--steel-light); }
.look-coach-flag {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--bone-white);
  background: var(--marrow-red);
  padding: 4px 9px;
  border-radius: 2px;
  font-weight: 600;
}

@media (max-width: 720px) {
  .look-page-hero { padding: 60px 0 40px; }
  .look-coach-dash { padding: 18px 16px; border-radius: 4px; }
  .look-coach-toolbar { gap: 10px; padding-bottom: 14px; }
  .look-coach-row {
    grid-template-columns: 12px 1fr auto;
    grid-template-rows: auto auto;
    grid-template-areas:
      "dot name flag"
      ".   status status";
    gap: 4px 10px;
    font-size: 13px;
  }
  .look-coach-row .look-coach-dot { grid-area: dot; align-self: start; margin-top: 6px; }
  .look-coach-row .look-coach-name { grid-area: name; }
  .look-coach-row .look-coach-sleep { display: none; }
  .look-coach-row .look-coach-status { grid-area: status; white-space: normal; }
  .look-coach-row .look-coach-flag { grid-area: flag; font-size: 8px; padding: 3px 7px; }
}

/* Athlete view layout */
.look-athlete-stack {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
  max-width: 480px;
  margin: 0 auto;
}
.look-athlete-card {
  background: var(--bone-white);
  color: var(--bone-black);
  border-radius: 8px;
  padding: 24px 22px;
  border: 1px solid var(--line);
}
.look-athlete-card-eyebrow {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--marrow-red);
  margin-bottom: 10px;
  font-weight: 500;
}
.look-athlete-card-title {
  font-family: var(--display);
  font-weight: 700;
  font-size: 22px;
  letter-spacing: 0.005em;
  line-height: 1.15;
  margin-bottom: 12px;
  text-transform: uppercase;
}
.look-athlete-card-body {
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.55;
  color: var(--steel);
}
.look-athlete-card-body strong { color: var(--bone-black); font-weight: 600; }

.look-athlete-workout-list {
  list-style: none;
  padding: 0;
  margin: 14px 0 0;
  display: grid;
  gap: 10px;
}
.look-athlete-workout-list li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
  font-size: 13.5px;
  color: var(--bone-black);
}
.look-athlete-workout-list li:last-child { border-bottom: none; }
.look-athlete-workout-list .reps {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--steel);
}

.look-athlete-coach-note {
  background: var(--bone-cream);
  border-left: 3px solid var(--marrow-red);
  padding: 14px 16px;
  margin-top: 14px;
  border-radius: 0 4px 4px 0;
}
.look-athlete-coach-note-from {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--steel);
  margin-bottom: 8px;
  font-weight: 500;
}
.look-athlete-coach-note-body {
  font-family: var(--sans);
  font-style: italic;
  font-size: 14px;
  line-height: 1.55;
  color: var(--bone-black);
}

.look-athlete-week {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 14px;
}
.look-athlete-week-bar {
  flex: 1;
  height: 10px;
  background: var(--bone-cream);
  border-radius: 5px;
  overflow: hidden;
  border: 1px solid var(--line);
}
.look-athlete-week-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--marrow-red) 0%, var(--marrow-red-glow) 100%);
  border-radius: 5px;
}
.look-athlete-week-label {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  color: var(--steel);
  text-transform: uppercase;
}

.look-athlete-score {
  display: flex;
  align-items: baseline;
  gap: 12px;
}
.look-athlete-score-num {
  font-family: var(--display);
  font-weight: 800;
  font-size: 64px;
  color: var(--marrow-red);
  line-height: 0.9;
}
.look-athlete-score-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.look-athlete-score-meta-label {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--steel);
}
.look-athlete-score-meta-value {
  font-family: var(--sans);
  font-size: 13px;
  color: var(--bone-black);
  font-weight: 500;
}

.look-footer-cta {
  background: var(--bone-cream);
  padding: 80px 0;
  text-align: center;
}
.look-footer-cta-line {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(32px, 5vw, 52px);
  letter-spacing: 0.005em;
  line-height: 1.05;
  text-transform: uppercase;
  margin-bottom: 32px;
  color: var(--bone-black);
}
.look-footer-cta-line em {
  font-family: var(--display);
  font-style: italic;
  color: var(--marrow-red);
  font-weight: 800;
}

/* The [hidden] attribute must always win over component display rules.
   Without this, a component that sets display:flex/grid keeps showing
   even when JS sets the hidden attribute. */
[hidden] { display: none !important; }

/* ===== HOMEPAGE REBUILD 2026-05-21 =====
   Phase 2 of the homepage rebuild. New classes only. No brand tokens added,
   no color or font tokens changed. Uses the approved --space-* scale for
   internal rhythm. */

/* --- Section 3. Early credibility band (verification beat) --- */
.credibility {
  background: var(--bone-black);
  color: var(--bone-white);
  text-align: center;
}
.credibility-inner {
  max-width: 880px;
  margin: 0 auto;
}
/* The dark credibility section runs on --bone-black. --marrow-red-glow only
   computes to 2.14:1 there and fails WCAG AA, so the eyebrow, the headline
   accent, and the link all use light in-palette tokens that clear contrast.
   --steel-light clears 11.36:1, --bone-white clears 18.77:1. */
.credibility .section-eyebrow { color: var(--steel-light); }
/* Same contrast fix for the homepage two-layer dark card. Its eyebrow color
   is set in an inline style block in index.html that loads after this file,
   so this selector carries one extra class to win regardless of order. */
.two-layer-card.two-layer-card-dark .two-layer-eyebrow { color: var(--steel-light); }
.credibility-headline {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(36px, 5vw, 60px);
  letter-spacing: 0.005em;
  line-height: 1.08;
  text-transform: uppercase;
  color: var(--bone-white);
  margin-bottom: var(--space-4);
}
.credibility-headline em {
  font-family: var(--display);
  font-style: normal;
  color: var(--bone-white);
  font-weight: 800;
}
.credibility-body {
  font-family: var(--sans);
  font-weight: 400;
  font-size: clamp(17px, 1.7vw, 19px);
  line-height: 1.7;
  color: var(--steel-light);
  max-width: 660px;
  margin: 0 auto var(--space-5);
}
.credibility-checks {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  flex-wrap: wrap;
}
.credibility-check {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--steel-light);
  font-weight: 500;
}
.credibility-check-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  background: var(--marrow-red);
  color: var(--bone-white);
  border-radius: 50%;
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 700;
  flex-shrink: 0;
}
/* The only interactive element in this dark section. --bone-white text with
   a visible underline so it clears AA and reads as obviously clickable. */
.credibility-link {
  display: inline-block;
  margin-top: var(--space-5);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--bone-white);
  font-weight: 500;
  border-bottom: 1px solid var(--bone-white);
  padding-bottom: 2px;
  transition: color 0.2s ease, border-color 0.2s ease;
}
.credibility-link:hover {
  color: var(--steel-light);
  border-bottom-color: var(--steel-light);
}

/* --- Section 7. "What is inside" supporting line out to /features/ --- */
.pillars-more {
  max-width: 720px;
  margin: var(--space-6) auto 0;
  text-align: center;
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.7;
  color: var(--steel);
}
.pillars-more a {
  color: var(--marrow-red);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.pillars-more a:hover { color: var(--marrow-red-glow); }

/* --- Section 10. Pricing single fee fork --- */
.fee-fork {
  max-width: 880px;
  margin: 0 auto var(--space-6);
  background: var(--bone-white);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: var(--space-5);
}
.fee-fork-title {
  font-family: var(--display);
  font-weight: 800;
  font-size: 22px;
  letter-spacing: 0.005em;
  text-transform: uppercase;
  color: var(--bone-black);
  margin-bottom: var(--space-2);
  text-align: center;
}
/* Reassurance line under the fee fork title. Leads with safety so a
   money-anxious coach is not made to do arithmetic to feel calm. */
.fee-fork-reassure {
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.6;
  color: var(--steel);
  text-align: center;
  max-width: 560px;
  margin: 0 auto var(--space-4);
}
.fee-fork-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
}
@media (max-width: 720px) { .fee-fork-grid { grid-template-columns: 1fr; } }
.fee-fork-option {
  background: var(--bone-cream);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: var(--space-4);
}
.fee-fork-option-label {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--marrow-red);
  font-weight: 500;
  margin-bottom: var(--space-2);
}
.fee-fork-option-price {
  font-family: var(--display);
  font-weight: 800;
  font-size: 28px;
  letter-spacing: 0.005em;
  color: var(--bone-black);
  margin-bottom: var(--space-2);
  line-height: 1.1;
}
.fee-fork-option-body {
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.65;
  color: var(--steel);
}
/* Pay-when-paid aside. A short confident line under the Marrow-handles-money
   option. Marrow red, quiet, not a billboard. Reuses the fee-fork option box. */
.fee-fork-aside {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 14px;
  line-height: 1.6;
  color: var(--marrow-red);
  margin-top: var(--space-2);
}

/* --- Risk reversal section (between Pricing and Apply) ---
   Reuses the refusal-row pattern: bone-cream rows, marrow-red left rule.
   No new tokens. Just a structural sibling of the refusals list. */
.risk-reversal {
  background: var(--bone-cream);
  padding: var(--space-8) 0;
}
@media (max-width: 720px) { .risk-reversal { padding: var(--space-7) 0; } }
.risk-reversal-header {
  max-width: 880px;
  margin: 0 auto 64px;
  text-align: center;
}
.risk-reversal-header .section-title { margin-bottom: 28px; }
.risk-reversal-header .section-lede { margin: 0 auto; }
.risk-reversal-list {
  max-width: 920px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.risk-row {
  background: var(--bone-white);
  border: 1px solid var(--line);
  border-left: 12px solid var(--marrow-red);
  border-radius: 6px;
  padding: 32px 36px;
  transition: transform 0.3s ease, border-color 0.3s ease;
}
.risk-row:hover {
  transform: translateX(2px);
  border-left-color: var(--marrow-red-glow);
}
.risk-headline {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(20px, 2.4vw, 26px);
  line-height: 1.25;
  letter-spacing: 0.005em;
  color: var(--bone-black);
  margin-bottom: 12px;
}
.risk-body {
  font-family: var(--sans);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.6;
  color: var(--steel);
}
@media (max-width: 640px) {
  .risk-row { padding: 24px 24px; border-left-width: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  .risk-row { transition: none; }
  .risk-row:hover { transform: none; }
}

/* Live founding-seat counter line, sits inside the Coach Founder offer card
   above the CTA. Hidden by default. JS reveals it only on a successful fetch
   so a broken or zero state never shows. */
.offer-seatline {
  display: none;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--marrow-red);
  font-weight: 500;
  margin-bottom: var(--space-2);
}
.offer-seatline.is-visible { display: block; }

/* --- Train-with-Edwin link inside the athletes door card --- */
.door-founder-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: var(--space-2);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--marrow-red);
  font-weight: 500;
}
.door-founder-link span { text-decoration: underline; text-underline-offset: 2px; }

/* ===== OPERATING PARTNERS WEAVE BAND (consulting touchpoint, sitewide) ===== */
/* A consistent, supporting "we can build it for you" band woven across public
   pages. Operating Partners (done-for-you build + retainer) feeds the platform,
   it is never the headline. Self-contained, token-fallbacks so it renders on any
   page. Added 2026-06-02. */
.opweave {
  background: var(--bone-white, #EFE9DC);
  border-top: 1px solid var(--steel-light, #D9D5CD);
  padding: 84px 24px;
}
.opweave-inner { max-width: 760px; margin: 0 auto; text-align: center; }
.opweave-eyebrow {
  font-family: var(--mono, "JetBrains Mono", monospace);
  font-size: 12px; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--marrow-red, #6B0F1A); margin: 0 0 18px;
}
.opweave-h {
  font-family: var(--display, "Switzer", -apple-system, sans-serif);
  font-weight: 800; font-size: clamp(28px, 4vw, 42px); line-height: 1.08;
  letter-spacing: -0.01em; text-transform: uppercase;
  color: var(--bone-black, #0A0908); margin: 0 0 22px;
}
.opweave-h em { font-style: normal; color: var(--marrow-red, #6B0F1A); }
.opweave-lede {
  font-family: var(--sans, "Inter", -apple-system, sans-serif);
  font-size: 17px; line-height: 1.62; color: var(--steel, #475569); margin: 0 0 26px;
}
.opweave-chips { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin: 0 0 26px; }
.opweave-chip {
  font-family: var(--mono, "JetBrains Mono", monospace);
  font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--bone-black, #0A0908);
  border: 1px solid var(--steel-light, #D9D5CD); border-radius: 999px; padding: 8px 16px;
}
.opweave-note {
  font-family: var(--sans, "Inter", -apple-system, sans-serif);
  font-size: 14px; line-height: 1.6; color: var(--steel, #475569);
  max-width: 620px; margin: 0 auto 30px;
}
.opweave-ctas { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.opweave-btn-primary {
  background: var(--marrow-red, #6B0F1A); color: var(--bone-white, #EFE9DC);
  padding: 16px 32px; font-family: var(--sans, "Inter", sans-serif); font-weight: 600;
  font-size: 14px; letter-spacing: 0.08em; text-transform: uppercase; border-radius: 2px;
  text-decoration: none; display: inline-block;
  transition: background 0.15s ease, transform 0.15s ease;
}
.opweave-btn-primary:hover { background: var(--marrow-red-glow, #8B1828); transform: translateY(-1px); }
.opweave-btn-secondary {
  background: transparent; color: var(--bone-black, #0A0908);
  padding: 16px 32px; font-family: var(--sans, "Inter", sans-serif); font-weight: 500;
  font-size: 14px; letter-spacing: 0.08em; text-transform: uppercase;
  border: 1px solid var(--bone-black, #0A0908); border-radius: 2px;
  text-decoration: none; display: inline-block; transition: background 0.15s ease;
}
.opweave-btn-secondary:hover { background: rgba(10, 9, 8, 0.04); }
@media (max-width: 640px) { .opweave { padding: 60px 20px; } }
@media (prefers-reduced-motion: reduce) {
  .opweave-btn-primary, .opweave-btn-primary:hover { transition: none; transform: none; }
}

/* =====================================================================
   R2 REFINEMENT LAYER
   Round 2 of the coach dashboard upgrade, driven by Edwin's 2026-07-06
   screenshot review memo. Every dashboard builder applies these
   utilities instead of inventing local fixes for the recurring
   complaints: unreadable red mono kickers, faint red dots, thin
   gray-blue body text, invisible footers, text hugging card edges,
   cheap gray buttons.

   These are FUNCTIONAL accessibility and refinement tokens, following
   the --marrow-ember-text precedent above. No new brand identity.

   Theming: /assets/js/theme-toggle.js stamps data-mz-theme="dark" or
   "light" on the html element and /assets/css/dashboard-theme.css
   remaps the core tokens. The :root defaults below are the LIGHT theme
   values, tuned for bone surfaces (#EFE9DC). The
   :root[data-mz-theme="dark"] block remaps them for the black theme
   (page #0A0908, cards #171411). Pages that never load the toggle
   simply get the light values, which are AA on bone.

   Contrast, computed with the WCAG 2.1 relative luminance formula.
   Every text pairing here is 4.5:1 or better on its worst surface:
     light kicker  #6B0F1A on #EFE9DC  10.16:1
     dark  kicker  #E08894 on #171411   7.09:1 (7.69:1 on #0A0908)
     light muted   #4E4942 on #EFE9DC   7.37:1
     dark  muted   #C9C2B4 on #171411  10.36:1
     light footer  #55504A on #EFE9DC   6.59:1
     dark  footer  #AFA697 on #171411   7.62:1
     btn accent    #FBF8F2 on #6B0F1A  11.60:1 (8.77:1 on #8B1828)
     training      #9E2B18 light 6.17:1, #FF9E8A dark 9.18:1
     nutrition     #0C632C light 6.12:1, #3ECF74 dark 9.07:1
     mindbodyspirit #5B21B6 light 7.43:1, #C3A6FF dark 8.93:1
     soft-chip worst case: nutrition light 5.29:1, all others higher
   ===================================================================== */

:root {
  /* Kicker labels. Deep brand red on bone. */
  --r2-kicker-color: var(--marrow-red);
  --r2-kicker-size: 12px;
  --r2-kicker-weight: 600;
  --r2-kicker-tracking: 0.16em;

  /* Readable muted body text. Warm gray, never thin blue-gray. */
  --r2-muted-color: #4E4942;

  /* Footer and legal lines. Visible trust text. */
  --r2-footer-color: #55504A;

  /* Bullet and status dots. */
  --r2-dot-color: var(--marrow-red);
  --r2-dot-halo: rgba(107, 15, 26, 0.14);

  /* Card breathing room. Consumed by .r2-card-pad and available to
     corner-positioned kickers and dots via var(--r2-inset). */
  --r2-card-pad: 32px;
  --r2-card-pad-mobile: 20px;

  /* Category accents. Vibrant, distinct, AA-paired per theme.
     Training leans brand red ember, nutrition vivid green,
     mind body spirit violet. The -soft variant is the chip and
     module-header background tint for the SAME category text color. */
  --r2-cat-training: #9E2B18;
  --r2-cat-training-soft: rgba(158, 43, 24, 0.10);
  --r2-cat-nutrition: #0C632C;
  --r2-cat-nutrition-soft: rgba(12, 99, 44, 0.10);
  --r2-cat-mindbodyspirit: #5B21B6;
  --r2-cat-mindbodyspirit-soft: rgba(91, 33, 182, 0.09);

  /* Updated-at stamp. */
  --r2-stamp-color: var(--ash);
  --r2-stamp-line: rgba(10, 9, 8, 0.16);
  --r2-stamp-glow: rgba(107, 15, 26, 0.14);
}

:root[data-mz-theme="dark"] {
  --r2-kicker-color: var(--marrow-ember-text);
  --r2-muted-color: #C9C2B4;
  --r2-footer-color: #AFA697;
  --r2-dot-color: #E08894;
  --r2-dot-halo: rgba(224, 136, 148, 0.18);
  --r2-cat-training: #FF9E8A;
  --r2-cat-training-soft: rgba(255, 122, 102, 0.16);
  --r2-cat-nutrition: #3ECF74;
  --r2-cat-nutrition-soft: rgba(62, 207, 116, 0.14);
  --r2-cat-mindbodyspirit: #C3A6FF;
  --r2-cat-mindbodyspirit-soft: rgba(183, 156, 255, 0.16);
  --r2-stamp-color: #E8DFCE;
  --r2-stamp-line: rgba(242, 237, 227, 0.18);
  --r2-stamp-glow: rgba(224, 136, 148, 0.25);
}

/* ----- Kicker. Replaces the small faint red mono eyebrows. ----- */
.r2-kicker {
  font-family: var(--mono);
  font-size: var(--r2-kicker-size);
  font-weight: var(--r2-kicker-weight);
  letter-spacing: var(--r2-kicker-tracking);
  text-transform: uppercase;
  color: var(--r2-kicker-color);
  line-height: 1.4;
}

/* ----- Readable muted body text. Replaces thin gray-blue steel. ----- */
.r2-muted {
  font-family: var(--sans);
  font-size: 14.5px;
  font-weight: 500;
  line-height: 1.65;
  color: var(--r2-muted-color);
}
.r2-muted strong { color: var(--bone-black); font-weight: 650; }

/* ----- Card breathing room. Text never hugs the card border. ----- */
.r2-card-pad {
  padding: var(--r2-card-pad);
  --r2-inset: var(--r2-card-pad);
}
@media (max-width: 640px) {
  .r2-card-pad {
    padding: var(--r2-card-pad-mobile);
    --r2-inset: var(--r2-card-pad-mobile);
  }
}
/* Corner-positioned kickers, stamps, and dots inside an .r2-card-pad
   parent should position with the shared inset so they match the
   text edge: top: var(--r2-inset); right: var(--r2-inset); */

/* ----- Visible bullet dot with inset spacing. ----- */
.r2-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--r2-dot-color);
  box-shadow: 0 0 0 3px var(--r2-dot-halo);
  margin-right: 12px;
  flex-shrink: 0;
  vertical-align: middle;
}
/* List form: put .r2-dot-list on the ul, dots render inset from the
   card edge with clear space before the text. */
.r2-dot-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.r2-dot-list li {
  position: relative;
  padding-left: 24px;
  line-height: 1.6;
}
.r2-dot-list li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 0.62em;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--r2-dot-color);
  box-shadow: 0 0 0 3px var(--r2-dot-halo);
}

/* ----- Legible footer and legal lines. ----- */
.r2-footer-trust {
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.7;
  color: var(--r2-footer-color);
}
.r2-footer-trust a {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}
.r2-footer-trust a:hover { color: var(--bone-black); }

/* ----- Premium accent button. Replaces cheap flat gray boxes. ----- */
.r2-btn-accent {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: linear-gradient(135deg, var(--marrow-red) 0%, var(--marrow-red-glow) 100%);
  color: #FBF8F2;
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 14px 26px;
  border: 1px solid rgba(251, 248, 242, 0.14);
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(107, 15, 26, 0.32), inset 0 1px 0 rgba(251, 248, 242, 0.14);
  cursor: pointer;
  text-decoration: none;
  transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
}
.r2-btn-accent:hover {
  filter: brightness(1.1);
  transform: translateY(-1px);
  box-shadow: 0 4px 18px rgba(107, 15, 26, 0.42), inset 0 1px 0 rgba(251, 248, 242, 0.18);
}
.r2-btn-accent:active { transform: translateY(0); filter: brightness(1); }
.r2-btn-accent:focus-visible {
  outline: 2px solid var(--r2-kicker-color);
  outline-offset: 3px;
}
@media (hover: none) {
  .r2-btn-accent:hover { filter: none; transform: none; }
}

/* ----- Futuristic updated-at stamp. Mono, glow, pulsing dot. ----- */
.r2-stamp {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--r2-stamp-color);
  padding: 6px 14px;
  border: 1px solid var(--r2-stamp-line);
  border-radius: 999px;
  background: linear-gradient(135deg, var(--r2-stamp-glow), transparent 60%);
  box-shadow: 0 0 14px var(--r2-stamp-glow);
}
.r2-stamp::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--r2-dot-color);
  box-shadow: 0 0 6px var(--r2-dot-color);
  animation: r2-pulse 2.4s ease-in-out infinite;
}
@keyframes r2-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.45; transform: scale(0.75); }
}

/* ----- Category accent helpers. Set the category on a container,
   then .r2-chip and any color: var(--r2-cat) usage inherit it. ----- */
.r2-cat-training {
  --r2-cat: var(--r2-cat-training);
  --r2-cat-soft: var(--r2-cat-training-soft);
}
.r2-cat-nutrition {
  --r2-cat: var(--r2-cat-nutrition);
  --r2-cat-soft: var(--r2-cat-nutrition-soft);
}
.r2-cat-mindbodyspirit {
  --r2-cat: var(--r2-cat-mindbodyspirit);
  --r2-cat-soft: var(--r2-cat-mindbodyspirit-soft);
}
.r2-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--r2-cat, var(--r2-kicker-color));
  background: var(--r2-cat-soft, transparent);
  border: 1px solid var(--r2-cat-soft, var(--r2-stamp-line));
  border-radius: 999px;
  padding: 4px 12px;
}
.r2-cat-text { color: var(--r2-cat, var(--r2-kicker-color)); }
.r2-cat-bg { background: var(--r2-cat-soft, transparent); }

/* ----- Reduced motion. Stamp dot stays lit, nothing animates. ----- */
@media (prefers-reduced-motion: reduce) {
  .r2-stamp::before { animation: none; }
  .r2-btn-accent,
  .r2-btn-accent:hover { transition: none; transform: none; }
}

/* =====================================================================
   V3.1 BUTTON AUDIT  (appended 2026-07-07, item 9 + red CTA item)
   ---------------------------------------------------------------------
   Goal: zero grey dead-looking buttons. Every active button reads as
   obviously clickable and premium, with visible hover, active, and
   focus-visible states and a touch of depth, all inside existing tokens.
   No new brand tokens, no new fonts. The canonical button classes are
   left in place; this section only strengthens affordance and adds two
   composable helpers.

   Contents:
     A. Secondary button on DARK surfaces (light ink, keeps hero look)
     B. .btn-red   red primary CTA alias on the locked marrow-red token
     C. .btn-clickable-cue   layerable lift-on-hover, press-on-active cue
   ===================================================================== */

/* A. Dark-surface adaptation for the reworked secondary button. The base
   rule above is tuned for light surfaces. These always-dark marketing
   sections (and any element carrying the .btn-secondary--on-dark modifier)
   flip the ink and border to bone light so the button stays legible and
   clearly interactive on black. Higher specificity than the base, so it
   wins; inline color patches on light instances still win over both. */
.hero .btn-secondary,
.proof-hero .btn-secondary,
.proof-cta .btn-secondary,
.network-events .btn-secondary,
.mission-hero .btn-secondary,
.wall-card.featured .btn-secondary,
.proof-section--dark .btn-secondary,
.featured .btn-secondary,
.cta-strip .btn-secondary,
.btn-secondary--on-dark {
  color: var(--bone-white);
  background: rgba(239, 233, 220, 0.05);
  border-color: color-mix(in srgb, var(--bone-white) 40%, transparent);
}
.hero .btn-secondary:hover,
.proof-hero .btn-secondary:hover,
.proof-cta .btn-secondary:hover,
.network-events .btn-secondary:hover,
.mission-hero .btn-secondary:hover,
.wall-card.featured .btn-secondary:hover,
.proof-section--dark .btn-secondary:hover,
.featured .btn-secondary:hover,
.cta-strip .btn-secondary:hover,
.btn-secondary--on-dark:hover {
  color: var(--bone-white);
  border-color: var(--bone-white);
  background: rgba(239, 233, 220, 0.12);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.35);
}
.hero .btn-secondary:active,
.proof-hero .btn-secondary:active,
.proof-cta .btn-secondary:active,
.network-events .btn-secondary:active,
.mission-hero .btn-secondary:active,
.wall-card.featured .btn-secondary:active,
.proof-section--dark .btn-secondary:active,
.featured .btn-secondary:active,
.cta-strip .btn-secondary:active,
.btn-secondary--on-dark:active {
  background: rgba(239, 233, 220, 0.18);
}
.hero .btn-secondary:focus-visible,
.proof-hero .btn-secondary:focus-visible,
.proof-cta .btn-secondary:focus-visible,
.network-events .btn-secondary:focus-visible,
.mission-hero .btn-secondary:focus-visible,
.wall-card.featured .btn-secondary:focus-visible,
.proof-section--dark .btn-secondary:focus-visible,
.featured .btn-secondary:focus-visible,
.cta-strip .btn-secondary:focus-visible,
.btn-secondary--on-dark:focus-visible {
  outline-color: var(--marrow-ember-text);
}
@supports not (background: color-mix(in srgb, red, blue)) {
  .hero .btn-secondary,
  .proof-hero .btn-secondary,
  .proof-cta .btn-secondary,
  .network-events .btn-secondary,
  .mission-hero .btn-secondary,
  .wall-card.featured .btn-secondary,
  .proof-section--dark .btn-secondary,
  .featured .btn-secondary,
  .cta-strip .btn-secondary,
  .btn-secondary--on-dark { border-color: var(--steel-light); }
}

/* B. Red primary CTA. .btn-primary is already the marrow-red button, so
   .btn-red is a named alias on the SAME locked red token for Settings and
   Site-Builder to apply to "Your plan", "See the full pricing", and the
   resized Your-Website button. Full standalone treatment (fill, hover glow,
   depth, press, focus) so it reads as the one clear red call to action
   whatever base class it is dropped onto. Text is bone light on red,
   11.6:1, well past WCAG AA. */
.btn-red {
  background: var(--marrow-red);
  color: var(--bone-white);
  padding: 16px 32px;
  font-family: var(--sans);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border: none;
  border-radius: 2px;
  cursor: pointer;
  display: inline-block;
  box-shadow: 0 1px 2px rgba(10, 9, 8, 0.18);
  transition: background 0.22s cubic-bezier(0.2, 0.8, 0.2, 1),
              transform 0.22s cubic-bezier(0.2, 0.8, 0.2, 1),
              box-shadow 0.22s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.btn-red:hover {
  background: var(--marrow-red-glow);
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(107, 15, 26, 0.32);
}
.btn-red:focus-visible { outline: 2px solid var(--marrow-red); outline-offset: 3px; }
.btn-red:active {
  transform: translateY(0);
  background: var(--marrow-red);
  box-shadow: 0 1px 2px rgba(10, 9, 8, 0.24);
}
@media (prefers-reduced-motion: reduce) {
  .btn-red { transition: background 0.15s ease; }
  .btn-red:hover, .btn-red:active { transform: none; }
}
@media (hover: none) {
  .btn-red:hover { background: var(--marrow-red); transform: none; box-shadow: 0 1px 2px rgba(10, 9, 8, 0.18); }
}

/* C. Clickable cue. A layerable utility any surface can add to any button
   for a subtle lift on hover and a real press-down on active. Depth and
   motion only, no color, so it composes with any button class without
   fighting its fill. */
.btn-clickable-cue {
  transition: transform 0.18s cubic-bezier(0.2, 0.8, 0.2, 1),
              box-shadow 0.18s cubic-bezier(0.2, 0.8, 0.2, 1),
              filter 0.18s ease;
}
.btn-clickable-cue:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 22px rgba(10, 9, 8, 0.18);
  filter: brightness(1.02);
}
.btn-clickable-cue:active {
  transform: translateY(0) scale(0.985);
  box-shadow: 0 1px 2px rgba(10, 9, 8, 0.2);
  filter: brightness(0.98);
}
@media (prefers-reduced-motion: reduce) {
  .btn-clickable-cue,
  .btn-clickable-cue:hover,
  .btn-clickable-cue:active { transition: none; transform: none; filter: none; }
}
@media (hover: none) {
  .btn-clickable-cue:hover { transform: none; box-shadow: none; filter: none; }
}