/* ============================================================
   FleetEdge Marketing Website — Global Stylesheet
   FleetEdge by SailrScience
   Epic 0: Brand Adaptation — "Mediterranean Professional"
   Brand Guide: docs/DESIGN/DESIGN-FleetEdge_Web_Brand_Guide_v1_0.md
   ============================================================ */

/* ------------------------------------------------------------
   1. DESIGN TOKENS
   Palette, typography, spacing, and semantic accents.
   Finalized in Epic 0 (Brand Adaptation).
   ------------------------------------------------------------ */

:root {
  /* --- Base palette (unchanged from FleetEdge app) --- */
  --color-bg:               #0c1117;
  --color-surface:          #141b22;
  --color-surface-raised:   #1a2330;
  --color-border:           #2a3544;
  --color-text-primary:     #e8ecf1;
  --color-text-secondary:   #8a95a5;
  --color-text-muted:       #5a6577;

  /* --- Marketing accent palette (Brand Guide §2.3) --- */
  --accent-primary:         #5B9EC9;   /* Steel-cyan — CTA, links, emphasis */
  --accent-ice:             #8AB4D0;   /* Muted cyan — hover, secondary interactive */
  --accent-warm:            #C4956A;   /* Bronze-sand — editorial warmth, supplementary only */

  /* --- Semantic accents (passthrough from FleetEdge app, Brand Guide §2.4) --- */
  --semantic-blue:          #4a8fe7;   /* Interactive, focus */
  --semantic-teal:          #2ec4a2;   /* Positive, high confidence */
  --semantic-amber:         #e4a832;   /* Warning, moderate confidence */
  --semantic-red:           #e05252;   /* Negative, error */
  --semantic-purple:        #9b72cf;   /* Derived, computed */
  --semantic-slate:         #627a95;   /* Neutral indicator */

  /* --- Typography (Brand Guide §3) --- */
  --font-display:           'Source Serif 4', Georgia, serif;
  --font-body:              'Inter', system-ui, -apple-system, sans-serif;
  --font-mono:              'JetBrains Mono', 'Fira Code', monospace;

  --font-size-base:         1rem;        /* 16px */
  --font-size-sm:           0.875rem;    /* 14px */
  --font-size-lg:           1.125rem;    /* 18px */
  --font-size-xl:           1.5rem;      /* 24px */
  --font-size-2xl:          2rem;        /* 32px */
  --font-size-3xl:          2.5rem;      /* 40px */
  --font-size-hero:         3.5rem;      /* 56px */

  --line-height-tight:      1.2;
  --line-height-base:       1.6;
  --line-height-loose:      1.8;

  /* --- Spacing scale (Brand Guide §6) --- */
  --space-xs:   0.25rem;   /* 4px  */
  --space-sm:   0.5rem;    /* 8px  */
  --space-md:   1rem;      /* 16px */
  --space-lg:   1.5rem;    /* 24px */
  --space-xl:   2rem;      /* 32px */
  --space-2xl:  3rem;      /* 48px */
  --space-3xl:  4rem;      /* 64px */
  --space-4xl:  6rem;      /* 96px */

  /* --- Layout --- */
  --content-max-width:      1200px;
  --content-narrow-width:   800px;
  --content-wide-width:     1400px;
  --content-padding:        var(--space-lg);
  --border-radius:          0.5rem;
  --border-radius-lg:       1rem;

  /* --- Transitions --- */
  --transition-fast:        150ms ease;
  --transition-base:        250ms ease;

  /* --- Archetype colors (locked — archetypeRegistry.json v2.0) --- */
  --arch-aeromax:           #5AACFF;
  --arch-keelflex:          #FFB833;
  --arch-glideform:         #00D4D4;
  --arch-ironwind:          #8898A8;
  --arch-balancecore:       #A0B0C0;
  --arch-stormline:         #E84848;
  --arch-steelform:         #6B8CB5;
  --arch-gravityrun:        #F08030;
  --arch-aeroblade:         #8FD3FF;
  --arch-headforce:         #D870B0;
  --arch-deepframe:         #30B0A0;

  /* --- Dimension family accents (story-type color bucketing, DOC-2 §4) ---
     9 buckets map the 13 publishable story types (DECIDE D-27).
     Boat Maintenance is defined but unused in v1 (no story types emit to it). */
  --family-rating:          #9b72cf;  /* Rating (Tradeoff Escape, Rating Correction) */
  --family-hull:            #4fb8ae;  /* Hull Efficiency (Hull Edge/Under-Conversion) */
  --family-sail:            #e4a832;  /* Sail Performance (Performance Verdict) */
  --family-crew:            #e0796e;  /* Crew (Crew-Carried) */
  --family-condition:       #4a8fe7;  /* Condition & Tactical (Archetype-Conditions Dominance) */
  --family-comparative:     #a87ae0;  /* Comparative & Time (Cross-Family Contrast, Magnitude Gap) */
  --family-opponent:        #6ec297;  /* Opponent Modeling (Multi-Dimension Presence) */
  --family-fleet-archetype: #f08c4c;  /* Fleet Archetype (Championship Citation, Multi-Champion Cluster, Nat/Class/Designer Cluster, Composition Shift) */
  --family-structural:      #6b7a8f;  /* Structural Analysis (Physics Ceiling, Structural Extremum, Designer-Structural Anchor, Archetype Platform Preference, Archetype Self-Selection) — added v2b B5/B6 2026-04-15 */
  --family-boat-maintenance:#5a6577;  /* Boat Maintenance — unused in v1 */
}


/* ------------------------------------------------------------
   2. RESET & BASE
   ------------------------------------------------------------ */

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 100%;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-body);
  font-size: var(--font-size-base);
  line-height: var(--line-height-base);
  color: var(--color-text-primary);
  background-color: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: var(--accent-primary);
  text-decoration: none;
  transition: color var(--transition-fast);
}

a:hover {
  color: var(--accent-ice);
}


/* ------------------------------------------------------------
   2A. ACCESSIBILITY PRIMITIVES
   Skip link, focus indicators. WCAG 2.1 AA baseline.
   ------------------------------------------------------------ */

.skip-link {
  position: absolute;
  top: -100%;
  left: 1rem;
  z-index: 9999;
  padding: 0.75rem 1.5rem;
  background: var(--accent-primary);
  color: var(--color-bg);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--font-size-sm);
  border-radius: 0 0 var(--border-radius) var(--border-radius);
  text-decoration: none;
  transition: top 0.2s;
}

.skip-link:focus {
  top: 0;
  outline: none;
  color: var(--color-bg);
}

:focus-visible {
  outline: 2px solid var(--accent-primary);
  outline-offset: 2px;
}

a:focus-visible,
button:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--accent-primary);
  outline-offset: 2px;
  border-radius: 4px;
}


/* ------------------------------------------------------------
   3. LAYOUT PRIMITIVES (Brand Guide §6.2)
   ------------------------------------------------------------ */

.content-wrap {
  max-width: var(--content-max-width);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--content-padding);
  padding-right: var(--content-padding);
}

.content-narrow {
  max-width: var(--content-narrow-width);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--content-padding);
  padding-right: var(--content-padding);
}

.content-wide {
  max-width: var(--content-wide-width);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--content-padding);
  padding-right: var(--content-padding);
}

.section {
  padding-top: var(--space-3xl);
  padding-bottom: var(--space-3xl);
}

.section--hero {
  padding-top: var(--space-4xl);
  padding-bottom: var(--space-4xl);
}

/* Hero with background photography — Epic 7 (AD-E7-01, AD-E7-02, AD-E7-03) */
.section--hero-photo {
  position: relative;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.section--hero-photo::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(12, 17, 23, 0.78) 0%,
    rgba(12, 17, 23, 0.62) 50%,
    rgba(12, 17, 23, 0.82) 100%
  );
  z-index: 1;
}

.section--hero-photo .hero {
  position: relative;
  z-index: 2;
}

/* Regional sunlight filter overlays — DESIGN-FleetEdge_Web_Image_System §3.2
   Each ::after layer applies a region-correct color cast over the hero photo,
   so a single non-identifiable racing image can serve multiple geographies
   simply by changing its filter class. Five classes total: cool, warm,
   tropical, atlantic, overhead. */

/* Cool — Northern Europe / Baltic / N. Sea / alpine
   Desaturating blue-grey tint shifts Mediterranean-blue gallery photos
   toward grey North Sea / Baltic mood. (E16 — AD-E16-12) */
.section--hero-cool::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(20, 30, 45, 0.35);
  mix-blend-mode: color;
  z-index: 1;
}

/* Warm — Mediterranean / Aegean / Adriatic — soft amber tint */
.section--hero-warm::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(255, 195, 130, 0.18);
  mix-blend-mode: color;
  z-index: 1;
}

/* Tropical — Caribbean / Pacific / equatorial — saturated cyan-blue */
.section--hero-tropical::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(40, 175, 220, 0.16);
  mix-blend-mode: color;
  z-index: 1;
}

/* Atlantic — open ocean / Southern Hemisphere / transatlantic — steel-blue weight */
.section--hero-atlantic::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(40, 60, 90, 0.30);
  mix-blend-mode: color;
  z-index: 1;
}

/* Overhead — analytics / abstract / marketing — neutral desaturate, high contrast */
.section--hero-overhead::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(15, 25, 40, 0.28);
  mix-blend-mode: color;
  z-index: 1;
}
.section--hero-overhead {
  filter: saturate(0.85);
}

.section--hero-contact {
  background-image: url('/images/photos/hero-racing-yacht-aerial-crew.jpg');
  background-position: center 68%;
}

/* 404 error page title (AD-E9-04) */
.error-title {
  font-family: var(--font-body);
  font-size: var(--font-size-3xl);
  color: var(--color-text-muted);
}

.section--hero-photo .photo-credit {
  position: relative;
  z-index: 2;
  font-size: 0.65rem;
  color: rgba(232, 236, 241, 0.3);
  margin-top: var(--space-lg);
  text-align: center;
}

.section--hero-photo .photo-credit a {
  color: rgba(232, 236, 241, 0.4);
  text-decoration: none;
}

.section--hero-photo .photo-credit a:hover {
  color: rgba(232, 236, 241, 0.65);
}

.section--surface {
  background-color: var(--color-surface);
  padding: var(--space-3xl) 0;
}

.section--raised {
  background-color: var(--color-surface-raised);
}

/* Result divider — separates macro fleet identity from micro race-result lens */
.section--result-divider {
  border-top: 3px solid var(--accent-primary);
  padding: var(--space-xl) 0 var(--space-md) 0;
  margin-top: var(--space-xl);
}

.section--result-divider h2 {
  color: var(--accent-primary);
}


/* ------------------------------------------------------------
   4. HEADER & NAVIGATION
   ------------------------------------------------------------ */

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(26, 35, 48, 0.96);
  background-color: var(--color-surface-raised);
  border-bottom: 1px solid var(--color-border);
}

.nav-container {
  max-width: var(--content-max-width);
  margin-left: auto;
  margin-right: auto;
  min-height: 64px;
  padding: 1rem var(--content-padding);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
}

.nav-logo {
  font-family: var(--font-mono);
  font-size: 1.05rem;
  font-weight: 500;
  color: var(--color-text-primary);
  text-decoration: none;
  letter-spacing: -0.02em;
}

.nav-logo:hover {
  color: var(--color-text-primary);
  text-decoration: none;
}

.nav-sub {
  font-family: var(--font-mono);
  font-size: var(--font-size-sm);
  font-weight: 500;
  color: var(--accent-primary);
  margin-left: 0.25rem;
  letter-spacing: 0.02em;
}

/* Desktop nav layout */
.nav-desktop {
  display: flex;
  gap: 1.75rem;
  align-items: center;
}

/* Dropdown group */
.nav-dropdown {
  position: relative;
}

.nav-dropdown-toggle {
  background: none;
  border: none;
  appearance: none;
  cursor: pointer;
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--color-text-secondary);
  display: flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0;
  line-height: 1;
  transition: color var(--transition-fast);
}

.nav-dropdown-toggle:hover {
  color: var(--color-text-primary);
}

.nav-chevron {
  font-size: 0.65rem;
  opacity: 0.6;
  transition: transform var(--transition-fast);
}

.nav-dropdown:hover .nav-chevron,
.nav-dropdown.open .nav-chevron {
  transform: rotate(180deg);
}

/* Dropdown menu (hidden by default, shown by hover or .open state) */
.nav-dropdown-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  padding-top: 0.5rem;
  z-index: 100;
}

.nav-dropdown-menu-inner {
  background: var(--color-surface-raised);
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius);
  padding: 0.5rem 0;
  min-width: 180px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
}

.nav-dropdown-menu a {
  display: block;
  padding: 0.5rem 1rem;
  font-size: 0.83rem;
  color: var(--color-text-secondary);
  white-space: nowrap;
  transition: color var(--transition-fast), background var(--transition-fast);
}

.nav-dropdown-menu a:hover {
  color: var(--color-text-primary);
  background: rgba(91, 158, 201, 0.06);
}

.nav-dropdown:hover .nav-dropdown-menu,
.nav-dropdown.open .nav-dropdown-menu {
  display: block;
}

/* Nav direct link (e.g. "How It Works") */
.nav-link {
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--color-text-secondary);
  text-decoration: none;
  padding: 0.4rem 0;
  transition: color var(--transition-fast);
}

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

/* Mega-menu (multi-column dropdown, used for Explore Fleets) */
.nav-dropdown--mega .nav-mega-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  padding-top: 0.5rem;
  z-index: 100;
  background: var(--color-surface-raised);
  border-radius: var(--border-radius);
}

.nav-dropdown--mega:hover .nav-mega-menu,
.nav-dropdown--mega.open .nav-mega-menu {
  display: block;
}

.nav-mega-menu-inner {
  display: flex;
  gap: 2rem;
  background: var(--color-surface-raised);
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius);
  padding: 1rem 1.25rem;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
  min-width: 600px;
}

.nav-mega-col {
  flex: 1;
  min-width: 160px;
}

.nav-mega-col a {
  display: block;
  padding: 0.35rem 0;
  font-size: 0.83rem;
  color: var(--color-text-secondary);
  white-space: nowrap;
  transition: color var(--transition-fast);
  text-decoration: none;
}

.nav-mega-col a:hover {
  color: var(--color-text-primary);
}

.nav-mega-heading {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-text-muted);
  margin: 0 0 0.4rem 0;
  padding-top: 0.25rem;
}

.nav-mega-col .nav-mega-heading:not(:first-child) {
  margin-top: 0.75rem;
}

/* Nav section headings (non-clickable labels within standard dropdowns) */
.nav-section-heading {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-text-muted);
  margin: 0;
  padding: 0.6rem 1rem 0.25rem 1rem;
}

.nav-dropdown-menu-inner .nav-section-heading:first-child {
  padding-top: 0.35rem;
}

/* Nav CTA button */
.nav-cta {
  display: inline-block;
  background: var(--accent-primary);
  color: var(--color-bg);
  padding: 0.4rem 1rem;
  border-radius: 6px;
  font-weight: 600;
  font-size: 0.82rem;
  letter-spacing: 0.01em;
  transition: opacity var(--transition-fast);
  text-decoration: none;
}

.nav-cta:hover {
  opacity: 0.88;
  color: var(--color-bg);
}

/* Mobile toggle (hidden on desktop, shown at ≤768px via responsive) */
.nav-mobile-toggle {
  display: none;
  position: relative;
  width: 38px;
  height: 38px;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  color: transparent;
  font-size: 0;
  cursor: pointer;
  line-height: 1;
  box-shadow: none;
  -webkit-appearance: none;
  appearance: none;
}

.nav-mobile-toggle::before,
.nav-mobile-toggle::after {
  content: '';
  position: absolute;
  left: 8px;
  right: 8px;
  height: 2px;
  background: var(--color-text-primary);
  transition: transform 0.3s ease, top 0.3s ease, box-shadow 0.3s ease;
}

.nav-mobile-toggle::before {
  top: 12px;
  box-shadow: 0 6px 0 var(--color-text-primary);
}

.nav-mobile-toggle::after {
  top: 24px;
}

.nav-mobile-toggle[aria-expanded="true"]::before {
  top: 18px;
  transform: rotate(45deg);
  box-shadow: none;
}

.nav-mobile-toggle[aria-expanded="true"]::after {
  top: 18px;
  transform: rotate(-45deg);
}

/* Mobile nav overlay */
.nav-mobile {
  display: none;
  position: fixed;
  top: 64px;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(12, 17, 23, 0.98);
  flex-direction: column;
  z-index: 99;
  padding: 2rem var(--content-padding);
  gap: 1.5rem;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.nav-mobile.active {
  display: flex !important;
}

.nav-mobile-inner {
  max-width: var(--content-max-width);
  width: 100%;
  margin: 0 auto;
}

.nav-mobile-group {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-text-muted);
  padding: 0.5rem 0 0.25rem;
  margin-top: 0.5rem;
}

.nav-mobile-group:first-child {
  margin-top: 0;
}

.nav-mobile-link,
.nav-mobile-cta {
  display: block;
  font-size: 1rem;
  color: var(--color-text-primary);
  text-decoration: none;
  padding: 0.6rem 0;
  border-bottom: 1px solid var(--color-border);
  transition: color var(--transition-fast);
  font-weight: 500;
}

.nav-mobile-link:hover,
.nav-mobile-cta:hover {
  color: var(--accent-primary);
}

body.nav-mobile-open {
  overflow: hidden;
}


/* ------------------------------------------------------------
   5. HERO (Brand Guide §3.3)
   ------------------------------------------------------------ */

.hero {
  text-align: center;
  max-width: var(--content-narrow-width);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--content-padding);
  padding-right: var(--content-padding);
}

.hero h1 {
  font-family: var(--font-display);
  font-size: var(--font-size-hero);
  font-weight: 700;
  line-height: var(--line-height-tight);
  color: var(--color-text-primary);
  margin-bottom: var(--space-lg);
  letter-spacing: -0.02em;
}

.hero .hero-subtitle {
  font-family: var(--font-body);
  font-size: var(--font-size-xl);
  font-weight: 400;
  line-height: var(--line-height-base);
  color: var(--color-text-secondary);
  margin-bottom: var(--space-xl);
}

.hero .hero-rule {
  width: 80px;
  height: 2px;
  background-color: var(--accent-primary);
  border: none;
  margin: var(--space-xl) auto;
}

.hero .hero-byline {
  font-family: var(--font-body);
  font-size: var(--font-size-base);
  font-weight: 400;
  color: var(--color-text-muted);
}

/* --- Hero metadata: tags + stat bar --- */

.hero-tags {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-xs);
  margin-top: var(--space-lg);
}

.hero-tags span {
  font-family: var(--font-mono);
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  border: 1px solid var(--color-border);
  border-radius: 4px;
  padding: var(--space-xs) var(--space-sm);
  line-height: 1;
}

.hero-stats {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-md);
  margin-top: var(--space-lg);
}

.hero-stats .hero-stat {
  font-family: var(--font-mono);
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  text-align: center;
}

.hero-stats .hero-stat strong {
  font-weight: 600;
  color: var(--accent-primary);
}


/* ------------------------------------------------------------
   6. CONTENT SECTIONS
   Cards, content rows, feature grids, buttons, CTA bands.
   Component Map: docs/DESIGN/DESIGN-FleetEdge_Web_CSS_Component_Map_v1_0.md
   ------------------------------------------------------------ */

/* --- Section structure --- */
.content-section {
  padding: var(--space-2xl) 0;
  max-width: var(--content-max-width);
  margin: 0 auto;
  padding-left: var(--content-padding);
  padding-right: var(--content-padding);
}

/* Text-focused sections — narrower container (AD-E10-02) */
.content-section--narrow {
  max-width: var(--content-narrow-width);
}

.section-label {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--accent-primary);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 0.5rem;
}

.content-section h2 {
  font-family: var(--font-display);
  font-size: var(--font-size-2xl);
  margin-bottom: 1rem;
}

.content-section > p {
  color: var(--color-text-secondary);
  margin-bottom: var(--space-xl);
}

.lead {
  font-size: var(--font-size-lg);
  color: var(--color-text-secondary);
  line-height: var(--line-height-loose);
  margin-bottom: var(--space-lg);
  max-width: 680px;  /* AD-E10-01: match .prose reading measure */
}

.prose {
  max-width: 680px;
}

.prose p {
  line-height: 1.7;
}

.prose p + p {
  margin-top: var(--space-md);
}

/* Scope caption on archetype pages — factual one-liner under the lead,
 * binding text from Dict v1.2 §3.7 scope_caption_for_archetype_pages.
 * Narrower reading measure + reduced prominence vs .lead; muted colour. */
.data-summary {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted, var(--color-text-secondary));
  line-height: var(--line-height-loose);
  margin-top: calc(var(--space-lg) * -0.5);
  margin-bottom: var(--space-lg);
  max-width: 680px;
  font-style: italic;
}

/* --- Grid system --- */
.detail-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.5rem;
  margin-top: var(--space-xl);
  width: 100%;
}

.detail-grid--2col {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
  margin-top: var(--space-xl);
  width: 100%;
}

.detail-grid--3col {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  margin-top: var(--space-xl);
  width: 100%;
}

.detail-grid--4col {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
  margin-top: var(--space-xl);
  width: 100%;
}

.detail-grid--2x2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
  margin-top: var(--space-xl);
  width: 100%;
}

/* --- Icon box (AD-E9-03) --- */
.icon-box {
  width: 48px;
  height: 48px;
  margin: 0 auto 1rem;
  border-radius: 10px;
  background: rgba(91, 158, 201, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* --- Card system --- */
.detail-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius);
  padding: var(--space-lg);
}

.detail-card h3 {
  font-size: var(--font-size-lg);
  font-weight: 600;
  margin: 1rem 0 0.5rem;
}

.detail-card h4 {
  font-size: 1.05rem;
  font-weight: 600;
  margin: 0 0 0.75rem 0;
}

.detail-card p {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  line-height: 1.6;
}

.detail-card p + a {
  display: inline-block;
  margin-top: 0.5rem;
}

.detail-card--clickable {
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
  transition: border-color var(--transition-base), transform var(--transition-base);
}

.detail-card--clickable:hover {
  border-color: var(--accent-primary);
  transform: translateY(-2px);
}

.detail-card--centered {
  text-align: center;
}

.detail-card--gradient {
  background: linear-gradient(135deg, var(--color-surface) 0%, var(--color-bg) 100%);
}

.detail-card--muted {
  opacity: 0.5;
  pointer-events: none;
}

/* --- Archetype percentage bar (E16) --- */
.arch-bar {
  height: 6px;
  border-radius: 3px;
  margin-top: var(--space-xs);
  width: var(--arch-width);
  background-color: var(--archetype-color);
}

/* --- ORC Authority metadata line (E16) --- */
.authority-line {
  font-size: 0.85rem;
  color: var(--color-text-muted);
  margin-top: var(--space-sm);
  text-align: center;
}

/* --- Content row (text + image side-by-side) --- */
.content-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2.5rem;
  align-items: center;
  margin-top: var(--space-lg);
}

.content-row--reverse {
  direction: rtl;
}

.content-row--reverse > * {
  direction: ltr;
}

.content-row-text h2 {
  margin-top: 0;
}

.content-row-text > p + p,
.content-row-text > p + .prose,
.content-row-text > .prose + p,
.content-row-text > .prose + .prose {
  margin-top: var(--space-md);
}

.content-row-visual img {
  display: block;
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
  border-radius: var(--border-radius);
  border: 1px solid var(--color-border);
}

/* --- Callout --- */
.callout {
  background: var(--color-surface);
  border-left: 3px solid var(--accent-primary);
  padding: 1rem 1.25rem;
  border-radius: 0 var(--border-radius) var(--border-radius) 0;
  margin: var(--space-lg) 0;
}

.callout p {
  margin: 0;
  font-size: 0.95rem;
}

.callout p + p {
  margin-top: 0.75rem;
}

/* --- Independence disclosure (Voice Guide v1.3 §2.6.3 BINDING canonical) --- */
.independence-disclosure {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--accent-primary);
  padding: 1rem 1.25rem;
  border-radius: 0 var(--border-radius) var(--border-radius) 0;
  margin: var(--space-md) 0;
}

.independence-disclosure p {
  margin: 0;
  font-size: 0.95rem;
  font-style: normal;
}

/* --- Credibility strip (Voice Guide v1.3 §2.6.5 short-form homepage exception) --- */
.credibility-strip {
  padding: 1rem 0;
  background: var(--color-surface);
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}

.credibility-strip-content {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem 1rem;
  font-size: 0.9rem;
  line-height: 1.4;
}

.credibility-strip-label {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--accent-primary);
  white-space: nowrap;
}

.credibility-strip-body {
  flex: 1 1 auto;
}

.credibility-strip-body a {
  color: var(--accent-primary);
  text-decoration: none;
  white-space: nowrap;
}

.credibility-strip-body a:hover {
  text-decoration: underline;
}

.credibility-strip-disclosure {
  flex: 1 0 100%;
  margin: 0;
  font-size: 0.8rem;
  color: var(--color-text-secondary);
  font-style: italic;
}

/* --- Partner card (Voice Guide v1.3 §2.6.6 structural template) --- */
.partner-card {
  padding: 1.25rem 1.5rem;
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius);
  background: var(--color-bg);
  margin: var(--space-md) 0;
}

.partner-card h3 {
  margin: 0 0 0.5rem;
  font-size: 1.15rem;
}

.partner-card p {
  margin: 0;
  line-height: 1.55;
}

.partner-card p + p {
  margin-top: 0.75rem;
}

/* --- Buttons --- */
.btn-cta {
  display: inline-block;
  background: var(--accent-primary);
  color: var(--color-bg);
  padding: 0.65rem 1.5rem;
  border-radius: var(--border-radius);
  font-weight: 600;
  font-size: var(--font-size-sm);
  text-decoration: none;
  transition: opacity var(--transition-fast);
}

.btn-cta:hover {
  opacity: 0.88;
  color: var(--color-bg);
}

.btn-secondary {
  display: inline-block;
  color: var(--color-text-secondary);
  padding: 0.65rem 1.25rem;
  font-size: var(--font-size-sm);
  font-weight: 500;
  text-decoration: none;
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius);
  transition: color var(--transition-fast), border-color var(--transition-fast);
}

.btn-secondary:hover {
  color: var(--color-text-primary);
  border-color: var(--color-text-muted);
}

.btn-tertiary {
  display: inline-block;
  color: var(--color-text-muted);
  padding: 0.65rem 1.25rem;
  font-size: 0.8rem;
  font-weight: 400;
  text-decoration: none;
  transition: color var(--transition-fast);
}

.btn-tertiary:hover {
  color: var(--accent-primary);
}

/* --- CTA band --- */
.cta-band {
  background: linear-gradient(135deg, var(--color-surface) 0%, var(--color-bg) 100%);
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  padding: var(--space-3xl) var(--content-padding);
  text-align: center;
}

.cta-band h2 {
  font-family: var(--font-display);
  font-size: var(--font-size-2xl);
  margin-bottom: 0.75rem;
}

.cta-band p {
  color: var(--color-text-secondary);
  margin-bottom: var(--space-lg);
}

.cta-band-buttons {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
}

/* --- Proof bar / stat showcase --- */
.proof-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2.5rem;
  flex-wrap: wrap;
  padding: var(--space-lg) 0;
}

.proof-item {
  text-align: center;
}

.proof-num {
  font-family: var(--font-mono);
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--accent-primary);
}

.proof-label {
  font-size: 0.72rem;
  color: var(--color-text-muted);
  font-weight: 500;
  margin-top: 0.15rem;
}

/* Proof-bar caption — maturity-posture short-form line under the stat showcase.
   Added under SS2 of DECIDE-FleetEdge_Web_Commercial_Positioning_Realignment_v1_0
   (Voice Guide v1.3 §1.ter, SPEC v1.1 §POS-01). */
.proof-bar-caption {
  text-align: center;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--color-text-muted);
  letter-spacing: 0.5px;
  margin: 0.25rem 0 var(--space-md) 0;
}

/* Scope-grammar caption under every metrics block (proof-bar, hero-stats,
   analytic-summary). Added under External Review Remediation v1.2 Phase A-2
   per Voice Guide v1.3 §2.8.3 BINDING + Dict §3.10 scope_label_canonical.
   Rendered at 12px muted, directly below the numeric grouping; alignment
   inherits from the parent block. */
.metric-scope {
  display: block;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--color-text-muted);
  letter-spacing: 0.3px;
  margin-top: 0.5rem;
}

/* Privacy-policy meta strip — effective date + controller block. Mirrors
   .metric-scope styling (mono, muted, 12px). Added v1.3 P1-5 per DECIDE
   §2.2 Q-7. */
.privacy-meta {
  display: block;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--color-text-muted);
  letter-spacing: 0.3px;
  margin-bottom: 1.5rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

/* Contact-page intake lists — subject-line taxonomy + please-include
   checklist. Added v1.3 P1-6 per DECIDE §2.2 Q-10. Mono code spans for
   the subject tokens to make them visually scannable. */
.contact-subject-list,
.contact-include-list {
  list-style: none;
  padding-left: 0;
  margin: 0.75rem 0 1.25rem;
}
.contact-subject-list li,
.contact-include-list li {
  padding: 0.25rem 0;
  line-height: 1.6;
}
.contact-subject-list code {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.9em;
  background: rgba(0, 0, 0, 0.04);
  padding: 2px 8px;
  border-radius: 4px;
  margin-right: 0.5rem;
  letter-spacing: 0.5px;
}

/* Methodology pipeline one-liner surface under proof bar on homepage.
   Added under External Review Remediation v1.2 Phase B-3 per Voice Guide
   v1.3 §2.9.3 BINDING. Reviewer D3 — proof above narrative. Renders as a
   short technical band in mono font, centered, muted background for
   surface distinction from the proof bar above and the narrative below. */
.methodology-pipeline {
  background: var(--color-surface-alt, var(--color-surface));
  padding: var(--space-md) 0;
  border-top: 1px solid var(--color-border-subtle, rgba(0,0,0,0.06));
  border-bottom: 1px solid var(--color-border-subtle, rgba(0,0,0,0.06));
}

.methodology-pipeline-body {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  line-height: 1.6;
  color: var(--color-text-primary);
  letter-spacing: 0.2px;
  text-align: center;
  max-width: 88ch;
  margin: 0 auto;
}

.methodology-pipeline-body a {
  color: var(--accent-primary);
  text-decoration: underline;
}

/* Audience-lane strip under methodology pipeline on homepage. Added under
   External Review Remediation v1.2 Phase B-4 per Voice Guide v1.3 §2.10
   BINDING. Reviewer D5 — five lanes deep-linking to pages/contact.html
   anchors. Responsive: 5-across desktop → 3+2 tablet → vertical mobile. */
.audience-lanes {
  padding: var(--space-xl) 0;
}

.audience-lanes-heading {
  text-align: center;
  margin-bottom: var(--space-lg);
  font-size: 1.5rem;
}

.audience-lanes-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-md);
  max-width: 1200px;
  margin: 0 auto;
}

.audience-lane-card {
  display: flex;
  flex-direction: column;
  padding: var(--space-lg);
  background: var(--color-surface-alt, var(--color-surface));
  border: 1px solid var(--color-border-subtle, rgba(0,0,0,0.08));
  border-radius: 8px;
  text-decoration: none;
  color: inherit;
  min-height: 44px;
  transition: border-color 120ms ease, transform 120ms ease;
}

.audience-lane-card:hover,
.audience-lane-card:focus-visible {
  border-color: var(--accent-primary);
  transform: translateY(-2px);
  outline: none;
}

.audience-lane-card h3 {
  margin: 0 0 var(--space-sm) 0;
  font-size: 1.05rem;
  color: var(--color-text-primary);
}

.audience-lane-card p {
  margin: 0 0 var(--space-md) 0;
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--color-text-muted);
  flex-grow: 1;
}

.audience-lane-cta {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--accent-primary);
  letter-spacing: 0.3px;
  margin-top: auto;
}

/* Analytic-summary block on country + fleet pages — structural snapshot
   above the interpretive essay. Added under External Review Remediation
   v1.2 Phase C-1 per Voice Guide §2.8 caption + DESIGN §2.4. Reviewer D4
   remediation. Three-cell grid: Scope / Top archetypes / Top designer;
   historical-vs-speculative boundary line + scope caption at the foot.
   Responsive grid stacks on mobile. */
.analytic-summary {
  padding: var(--space-xl) 0;
  background: var(--color-surface-alt, var(--color-surface));
  border-top: 1px solid var(--color-border-subtle, rgba(0,0,0,0.06));
  border-bottom: 1px solid var(--color-border-subtle, rgba(0,0,0,0.06));
}

.analytic-summary .section-label {
  margin-bottom: var(--space-sm);
}

.analytic-summary h2 {
  margin-bottom: var(--space-lg);
}

.analytic-summary-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--space-lg);
  max-width: 1100px;
  margin: 0 auto;
}

.analytic-summary-cell {
  padding: var(--space-md);
  background: var(--color-surface);
  border: 1px solid var(--color-border-subtle, rgba(0,0,0,0.08));
  border-radius: 6px;
}

.analytic-summary-label {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: var(--space-xs);
}

.analytic-summary-value {
  font-family: var(--font-mono);
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--color-text-primary);
  margin-bottom: var(--space-xs);
}

.analytic-summary-detail {
  font-size: 0.88rem;
  color: var(--color-text-muted);
  line-height: 1.45;
}

.analytic-summary-detail a {
  color: var(--accent-primary);
}

.analytic-summary-list {
  margin: 0 0 var(--space-sm) 0;
  padding-left: 1.25em;
  list-style: decimal;
  font-size: 0.95rem;
  line-height: 1.6;
}

.analytic-summary-list li strong {
  font-family: var(--font-mono);
  font-size: 0.92rem;
  letter-spacing: 0.5px;
  color: var(--color-text-primary);
}

.analytic-summary-boundary {
  margin-top: var(--space-lg);
  padding-top: var(--space-md);
  border-top: 1px dashed var(--color-border-subtle, rgba(0,0,0,0.2));
  font-size: 0.82rem;
  font-style: italic;
  color: var(--color-text-muted);
  text-align: center;
  max-width: 80ch;
  margin-left: auto;
  margin-right: auto;
}

/* Partners page band divider between Strategic Partners (Band 1) and Data
   Sources & Technology (Band 2). Added under External Review Remediation
   v1.2 Phase C-3 per DESIGN §2.7 + DECIDE DQ-4. Reviewer D7 remediation:
   visual separator so partnership material reads as disclosed/framed,
   distinct from posture-neutral analytical-foundation content. */
.partners-band-divider {
  border: none;
  height: 3px;
  background: linear-gradient(90deg,
    transparent 0%,
    var(--color-border-subtle, rgba(0,0,0,0.12)) 20%,
    var(--color-border-subtle, rgba(0,0,0,0.12)) 80%,
    transparent 100%);
  margin: 0;
  padding: 0;
}

/* Partnership FAQ on partners.html Band 1 — plain-language Q/A pairs
   explaining the shape of strategic design partnerships. Added under
   External Review Remediation v1.2 Phase C-4 per DESIGN §2.6 step 1.
   Reviewer D6.a remediation. Embargo-safe: pre-embargo copy is generic;
   partner-named Q/A reserved in HTML-commented block. Accordion via
   <details>/<summary>. */
.partnership-faq {
  margin-top: var(--space-xl);
  padding-top: var(--space-lg);
  border-top: 1px solid var(--color-border-subtle, rgba(0,0,0,0.1));
}

.partnership-faq > h3 {
  font-size: 1.2rem;
  margin-bottom: var(--space-md);
}

.partnership-faq-item {
  border-bottom: 1px solid var(--color-border-subtle, rgba(0,0,0,0.08));
  padding: var(--space-sm) 0;
}

.partnership-faq-item > summary {
  cursor: pointer;
  font-weight: 600;
  padding: var(--space-sm) 0;
  list-style: none;
  position: relative;
  padding-right: 1.5em;
  color: var(--color-text-primary);
}

.partnership-faq-item > summary::-webkit-details-marker {
  display: none;
}

.partnership-faq-item > summary::after {
  content: "+";
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--font-mono);
  font-size: 1.1rem;
  color: var(--accent-primary);
  transition: transform 150ms ease;
}

.partnership-faq-item[open] > summary::after {
  content: "−";
}

.partnership-faq-item > summary:hover,
.partnership-faq-item > summary:focus-visible {
  color: var(--accent-primary);
  outline: none;
}

.partnership-faq-body {
  padding: var(--space-sm) 0 var(--space-md) 0;
}

.partnership-faq-body p {
  margin: 0;
  line-height: 1.6;
  color: var(--color-text-muted);
}

.stat {
  font-family: var(--font-mono);
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--accent-primary);
}

/* --- Badge --- */
.badge {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  font-weight: 600;
  padding: 0.2rem 0.5rem;
  border-radius: 4px;
  display: inline-block;
}

.badge--primary {
  background: rgba(91, 158, 201, 0.08);
  border: 1px solid rgba(91, 158, 201, 0.25);
  color: var(--accent-primary);
}

.badge--confidence-high {
  background: rgba(46, 196, 162, 0.08);
  border: 1px solid rgba(46, 196, 162, 0.25);
  color: var(--semantic-teal);
}

.badge--confidence-mid {
  background: rgba(228, 168, 50, 0.08);
  border: 1px solid rgba(228, 168, 50, 0.25);
  color: var(--semantic-amber);
}

.badge--confidence-low {
  background: rgba(224, 82, 82, 0.08);
  border: 1px solid rgba(224, 82, 82, 0.25);
  color: var(--semantic-red);
}

/* --- Screenshot display --- */
.screenshot-figure {
  margin: 2.5rem auto 0;
  max-width: 520px;
  text-align: center;
}

.screenshot-figure img {
  max-width: 100%;
  width: auto;
  height: auto;
  border-radius: var(--border-radius-lg);
  border: 1px solid var(--color-border);
}

.screenshot-figure figcaption {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--color-text-muted);
  margin-top: 0.75rem;
  line-height: 1.5;
}

/* Wide variant — full-width screenshots inside content rows (AD-E9-01) */
.screenshot-figure--wide {
  max-width: 100%;
}

.screenshot-inline {
  display: table;
  max-width: 100%;
  margin: 2rem auto 0;
}

.screenshot-inline img {
  display: block;
  max-width: 100%;
  width: auto;
  height: auto;
  border-radius: var(--border-radius-lg);
  border: 1px solid var(--color-border);
}

.screenshot-inline figcaption {
  display: table-caption;
  caption-side: bottom;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--color-text-muted);
  margin-top: 0.6rem;
  line-height: 1.5;
  text-align: left;
}

/* --- Data table --- */
.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--font-size-sm);
}

.data-table th {
  text-align: left;
  padding: 0.6rem 0.75rem;
  border-bottom: 2px solid var(--color-border);
  color: var(--color-text-muted);
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 0.72rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.data-table td {
  padding: 0.5rem 0.75rem;
  color: var(--color-text-secondary);
  border-bottom: 1px solid var(--color-border);
  vertical-align: top;
}

.data-table td:first-child {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--color-text-primary);
  white-space: nowrap;
}

.data-table tr:hover td {
  background: rgba(91, 158, 201, 0.03);
}

/* --- Image feature --- */
.img-feature {
  display: block;
  width: auto;
  max-width: 600px;
  margin: 1.5rem auto 0;
  border-radius: var(--border-radius);
  border: 1px solid var(--color-border);
}

.img-feature--wide {
  max-width: 700px;
}

/* --- Diagram containers --- */
.diagram-sm { max-width: 400px; margin: 0 auto; }
.diagram-md { max-width: 420px; margin: 0 auto; }
.diagram-lg { max-width: 680px; margin: 0 auto; }


/* ------------------------------------------------------------
   7. ARCHETYPE SYSTEM
   Archetype cards, color tokens, constellation visuals.
   ------------------------------------------------------------ */

/* --- Archetype card (uses --archetype-color inline custom property) --- */
.archetype-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-top: 3px solid var(--archetype-color, var(--accent-primary));
  border-radius: var(--border-radius);
  padding: 1.5rem;
}

.archetype-card-icon {
  width: 2.5rem;
  height: 2.5rem;
  margin-bottom: 0.75rem;
}

.archetype-card-icon svg {
  width: 100%;
  height: 100%;
  fill: var(--archetype-color, var(--accent-primary));
}

.archetype-card h3 {
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 700;
  color: var(--archetype-color, var(--accent-primary));
  margin: 0 0 0.25rem;
}

.archetype-card-tagline {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  margin-bottom: 0.75rem;
}

.archetype-card-traits {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-bottom: 0.75rem;
}

.trait-chip {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  font-weight: 500;
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--color-border);
  color: var(--color-text-muted);
  white-space: nowrap;
}

.archetype-card-metrics {
  display: flex;
  align-items: baseline;
  gap: var(--space-sm);
  flex-wrap: wrap;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--color-text-muted);
  margin-top: var(--space-sm);
  line-height: 1.6;
}

.archetype-card-metrics .data-label {
  font-size: 0.68rem;
  min-width: 1.8em;
}

.archetype-card-metrics .data-value {
  color: var(--color-text-primary);
}

/* Headline/story card values match the label size inside metrics rows */
.archetype-card-metrics .data-value--sm {
  font-size: 0.68rem;
}

/* Ranking/fleet separator: border between ranked items and fleet summary */
.archetype-card-metrics.mt-lg {
  border-top: 1px solid var(--color-border);
  padding-top: var(--space-sm);
}

.archetype-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--archetype-color, var(--accent-primary));
  vertical-align: middle;
  margin-right: 0.35rem;
}


/* --- Archetype color modifiers (agent-driven fleet pages) --- */
/* Maps archetype name suffix → canonical --archetype-color token.
   Agent emits: <div class="archetype-card archetype-card--aeroblade">
   Existing .archetype-card uses var(--archetype-color) for border-top + h3 color. */
.archetype-card--aeromax     { --archetype-color: var(--arch-aeromax); }
.archetype-card--aeroblade   { --archetype-color: var(--arch-aeroblade); }
.archetype-card--balancecore { --archetype-color: var(--arch-balancecore); }
.archetype-card--deepframe   { --archetype-color: var(--arch-deepframe); }
.archetype-card--glideform   { --archetype-color: var(--arch-glideform); }
.archetype-card--gravityrun  { --archetype-color: var(--arch-gravityrun); }
.archetype-card--headforce   { --archetype-color: var(--arch-headforce); }
.archetype-card--ironwind    { --archetype-color: var(--arch-ironwind); }
.archetype-card--keelflex    { --archetype-color: var(--arch-keelflex); }
.archetype-card--steelform   { --archetype-color: var(--arch-steelform); }
.archetype-card--stormline   { --archetype-color: var(--arch-stormline); }

/* --- Story/headline card heading refinement (agent-driven fleet pages) --- */
/* Story type names and dimension headers in centered detail-cards
   get accent color + underline for visual categorization. */
.detail-card--centered h3 {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.92rem;
  color: var(--accent-primary);
  margin-bottom: var(--space-sm);
  padding-bottom: var(--space-xs);
  border-bottom: 1px solid var(--color-border);
}


/* ------------------------------------------------------------
   8. DATA VISUALISATION
   Dimension charts, radar plots, comparison tables.
   ------------------------------------------------------------ */

/* --- Confidence chip (inline semantic indicator) --- */
.confidence-chip {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  font-weight: 600;
  padding: 0.2rem 0.55rem;
  border-radius: 4px;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}

.confidence-chip::before {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
}

.confidence-chip--high {
  background: rgba(46, 196, 162, 0.08);
  border: 1px solid rgba(46, 196, 162, 0.25);
  color: var(--semantic-teal);
}

.confidence-chip--high::before {
  background: var(--semantic-teal);
}

.confidence-chip--mid {
  background: rgba(228, 168, 50, 0.08);
  border: 1px solid rgba(228, 168, 50, 0.25);
  color: var(--semantic-amber);
}

.confidence-chip--mid::before {
  background: var(--semantic-amber);
}

.confidence-chip--low {
  background: rgba(224, 82, 82, 0.08);
  border: 1px solid rgba(224, 82, 82, 0.25);
  color: var(--semantic-red);
}

.confidence-chip--low::before {
  background: var(--semantic-red);
}

/* --- Formula block --- */
.formula-block {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius);
  padding: 1.25rem 1.5rem;
  margin: var(--space-lg) 0;
  overflow-x: auto;
}

.formula-block code {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  color: var(--accent-primary);
  display: block;
  white-space: pre;
  line-height: 1.7;
}

.formula-block-label {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-text-muted);
  margin-bottom: 0.5rem;
}

.formula-block-note {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  margin-top: 0.75rem;
  font-style: italic;
}


/* ------------------------------------------------------------
   9. FOOTER
   Site Map: docs/DESIGN/DESIGN-FleetEdge_Web_Site_Map_v1_0.md §3
   5-column grid: brand-col (1.5fr) + 4 link-cols (1fr each)
   ------------------------------------------------------------ */

.site-footer {
  border-top: 1px solid var(--color-border);
  padding: var(--space-2xl) 0;
  margin-top: var(--space-3xl);
}

.site-footer p {
  font-family: var(--font-body);
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  line-height: var(--line-height-base);
}

.site-footer a {
  color: var(--color-text-secondary);
  transition: color var(--transition-fast);
  text-decoration: none;
}

.site-footer a:hover {
  color: var(--accent-primary);
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.5fr repeat(4, 1fr);
  gap: 2rem;
  margin-bottom: var(--space-xl);
}

.footer-divider {
  display: block;
  height: 1px;
  background: var(--color-border);
  margin: 0.5rem 0;
  opacity: 0.5;
}

.footer-brand {
  font-family: var(--font-body);
  font-size: var(--font-size-lg);
  font-weight: 700;
  color: var(--color-text-primary);
  text-decoration: none;
  display: block;
  margin-bottom: var(--space-sm);
}

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

.footer-brand span {
  color: var(--color-text-muted);
}

.footer-col h4,
.footer-col .footer-heading {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-text-muted);
  margin-bottom: 0.75rem;
}

.footer-col a {
  display: block;
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  text-decoration: none;
  padding: 0.25rem 0;
  transition: color var(--transition-fast);
}

.footer-col a:hover {
  color: var(--accent-primary);
}

.footer-bottom {
  text-align: center;
  padding-top: var(--space-lg);
  border-top: 1px solid var(--color-border);
}

.footer-copyright {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

.footer-utility {
  margin-top: var(--space-sm);
}

.footer-utility a {
  color: var(--color-text-secondary);
  text-decoration: none;
  transition: color var(--transition-fast);
}

.footer-utility a:hover {
  color: var(--accent-primary);
}

.footer-utility span {
  color: var(--color-text-muted);
  margin: 0 var(--space-xs);
}


/* ------------------------------------------------------------
   10. UTILITY CLASSES
   ------------------------------------------------------------ */

/* Typography shortcuts */
.text-display  { font-family: var(--font-display); }
.text-mono     { font-family: var(--font-mono); }
.text-muted    { color: var(--color-text-muted); }
.text-xs       { font-size: 0.75rem; }             /* AD-E9-05 */
.text-secondary { color: var(--color-text-secondary); }
.text-center   { text-align: center; }

/* Accent color application */
.accent-primary { color: var(--accent-primary); }
.accent-warm    { color: var(--accent-warm); }
.accent-ice     { color: var(--accent-ice); }

/* Data label pattern (from app: mono + uppercase + bold + letter-spacing) */
.data-label {
  font-family: var(--font-mono);
  font-size: var(--font-size-sm);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-muted);
}

/* Data value pattern */
.data-value {
  font-family: var(--font-mono);
  font-size: var(--font-size-lg);
  font-weight: 500;
  color: var(--color-text-primary);
}

/* Small variant for compact stat cards (AD-E9-02) */
.data-value--sm {
  font-size: var(--font-size-sm);
}

/* Pull quote (Source Serif 4 italic, warm accent border) */
.pull-quote {
  font-family: var(--font-display);
  font-size: var(--font-size-xl);
  font-weight: 600;
  font-style: italic;
  line-height: var(--line-height-base);
  color: var(--color-text-primary);
  border-left: 3px solid var(--accent-warm);
  padding-left: var(--space-lg);
  margin: var(--space-2xl) 0;
}

/* Spacing utilities */
.mt-sm  { margin-top: var(--space-sm); }
.mt-md  { margin-top: var(--space-md); }
.mt-lg  { margin-top: var(--space-lg); }
.mt-xl  { margin-top: var(--space-xl); }
.mb-lg  { margin-bottom: var(--space-lg); }
.mt-0   { margin-top: 0; }

/* Text size utilities */
.text-sm { font-size: var(--font-size-sm); }
.text-xs { font-size: 0.72rem; }

/* Section closer (extra bottom margin before next section) */
.section-closer {
  margin-bottom: var(--space-3xl);
}

/* Accent link */
.link-accent {
  color: var(--accent-primary);
  text-decoration: none;
  font-weight: 500;
  transition: opacity var(--transition-fast);
}

.link-accent:hover {
  opacity: 0.8;
}


/* ------------------------------------------------------------
   11. STORYTELLING CONTENT OBJECTS (v1a — DECIDE 2026-04-14)
   Fleet Signature Card, Archetype Exemplar Card, Race Story Card,
   Cross-Edition Continuity Card, Hero Chip Strip, Provenance Badge,
   plus section-label chip modifiers for Kinship / Hidden Shape / What we saw.
   See: docs/DESIGN/DESIGN-FleetEdge_Web_Style_Guide_v1_0.md
   ------------------------------------------------------------ */

/* --- Section label chip modifiers (country/fleet/race section grammar) --- */
.section-label--kinship       { color: var(--accent-warm); }
.section-label--hidden-shape  { color: var(--accent-primary); }
.section-label--what-we-saw   { color: var(--semantic-teal); }
.section-label--the-race      { color: var(--accent-primary); }
.section-label--the-fleet     { color: var(--accent-primary); }
.section-label--continue      { color: var(--color-text-muted); }

/* §11.v2b — Fleet Hub Template section-label modifiers (DECIDE D-34, 2026-04-14).
   Color tokens reused from v1a country-template labels so the semantic rhyme
   (warm / primary / teal) carries across both page families. */
.section-label--character     { color: var(--accent-warm); }
.section-label--fleet-dna     { color: var(--accent-primary); }
.section-label--latest-story  { color: var(--semantic-teal); }

/* Section wrappers — used on country/race pages to bracket each grammar block */
.section--kinship,
.section--hidden-shape,
.section--what-we-saw {
  padding: var(--space-2xl) 0;
}

.section--hidden-shape {
  background: rgba(91, 158, 201, 0.025);
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}

/* §11.v2b — Fleet Hub section wrappers (DECIDE D-34). Fleet DNA gets the
   same subtle tint as Hidden Shape to signal the analytical section; Character
   and Latest story stay untinted like Kinship / What we saw. */
.section--character,
.section--fleet-dna,
.section--latest-story {
  padding: var(--space-2xl) 0;
}

.section--fleet-dna {
  background: rgba(91, 158, 201, 0.025);
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}


/* --- Generic arch-chip (reusable archetype label with locked color) --- */
/* Distinct from .trait-chip (neutral) — this one carries the archetype's canonical color. */
.arch-chip {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 0.18rem 0.55rem;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--archetype-color, var(--color-border));
  color: var(--archetype-color, var(--accent-primary));
  white-space: nowrap;
  display: inline-block;
}

.arch-chip--aeromax     { --archetype-color: var(--arch-aeromax); }
.arch-chip--aeroblade   { --archetype-color: var(--arch-aeroblade); }
.arch-chip--balancecore { --archetype-color: var(--arch-balancecore); }
.arch-chip--deepframe   { --archetype-color: var(--arch-deepframe); }
.arch-chip--glideform   { --archetype-color: var(--arch-glideform); }
.arch-chip--gravityrun  { --archetype-color: var(--arch-gravityrun); }
.arch-chip--headforce   { --archetype-color: var(--arch-headforce); }
.arch-chip--ironwind    { --archetype-color: var(--arch-ironwind); }
.arch-chip--keelflex    { --archetype-color: var(--arch-keelflex); }
.arch-chip--steelform   { --archetype-color: var(--arch-steelform); }
.arch-chip--stormline   { --archetype-color: var(--arch-stormline); }


/* --- Provenance Badge (source-language indicator) --- */
.provenance-badge {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  font-weight: 500;
  padding: 0.2rem 0.5rem;
  border-radius: 4px;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  border: 1px solid var(--color-border);
  background: rgba(255, 255, 255, 0.02);
  color: var(--color-text-secondary);
}

.provenance-badge abbr {
  font-weight: 700;
  text-decoration: none;
}

.provenance-badge--orc-certificate {
  color: var(--semantic-blue);
  border-color: rgba(74, 143, 231, 0.3);
  background: rgba(74, 143, 231, 0.06);
}

.provenance-badge--sailedge-model {
  color: var(--semantic-teal);
  border-color: rgba(46, 196, 162, 0.3);
  background: rgba(46, 196, 162, 0.06);
}

.provenance-badge--race-result {
  color: var(--semantic-amber);
  border-color: rgba(228, 168, 50, 0.3);
  background: rgba(228, 168, 50, 0.06);
}

.provenance-badge--fleetedge-derived {
  color: var(--semantic-purple);
  border-color: rgba(155, 114, 207, 0.3);
  background: rgba(155, 114, 207, 0.06);
}

/* HYCOM GLBy 93.0 reanalysis — ocean-current source chip (flagship-scoped).
   Added 2026-04-19 per DECIDE-FleetEdge_Web_HYCOM_Integration_v1_0 §R4. */
.provenance-badge--hycom {
  color: var(--semantic-teal);
  border-color: rgba(46, 196, 162, 0.3);
  background: rgba(46, 196, 162, 0.06);
}

/* ECMWF ERA5 reanalysis — atmospheric source chip.
   Added 2026-04-19 per DECIDE-FleetEdge_Web_HYCOM_Integration_v1_0 §R4. */
.provenance-badge--era5 {
  color: var(--semantic-slate);
  border-color: rgba(98, 122, 149, 0.3);
  background: rgba(98, 122, 149, 0.06);
}

/* ============================================================
   Evidence badges — public 5-value claim-kind lexicon.
   Added 2026-04-21 per DECIDE-FleetEdge_Web_External_Review_Remediation_v1_4
   D-v1.4-05 / D-v1.4-06. Orthogonal axis to .confidence-chip (tier) and
   .provenance-badge (source). Answers "what kind of claim is this?"
   Closed vocabulary: Production / Validation / Structural-only /
   Low-sample / Pre-race scenario. Every badge links to the legend anchor
   on how-it-works.html or methodology.html.
   ============================================================ */
.evidence-badge {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  padding: 0.2rem 0.55rem;
  border-radius: 2px;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  border: 1px solid currentColor;
  background: transparent;
  text-transform: none;
}
.evidence-badge a,
a .evidence-badge {
  color: inherit;
  text-decoration: none;
}
.evidence-badge a:hover,
a:hover .evidence-badge {
  text-decoration: underline;
}

.evidence-badge--production {
  color: var(--semantic-teal);
  border-color: rgba(46, 196, 162, 0.4);
  background: rgba(46, 196, 162, 0.05);
}

.evidence-badge--validation {
  color: var(--semantic-blue);
  border-color: rgba(74, 143, 231, 0.4);
  background: rgba(74, 143, 231, 0.05);
}

.evidence-badge--structural-only {
  color: var(--semantic-slate);
  border-color: rgba(98, 122, 149, 0.4);
  background: rgba(98, 122, 149, 0.05);
}

.evidence-badge--low-sample {
  color: var(--semantic-amber);
  border-color: rgba(228, 168, 50, 0.4);
  background: rgba(228, 168, 50, 0.05);
}

.evidence-badge--pre-race-scenario {
  color: var(--semantic-purple);
  border-color: rgba(155, 114, 207, 0.4);
  background: rgba(155, 114, 207, 0.05);
}

/* Badge legend two-column grid — hosted on how-it-works + methodology. */
.badge-legend-anchor {
  /* Semantic anchor class — #badge-legend target. Inherits section styles. */
}

/* ============================================================
   Absolute-claim adjacency links (v1.4 S8): subtle tertiary links
   next to absolute claims ("only", "first") so the reader can
   audit the claim at point-of-contact.
   ============================================================ */
.hero-subtitle-methods-link,
.pull-quote-methods-link {
  margin-top: 0.4rem;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  color: var(--color-text-secondary);
}
.hero-subtitle-methods-link a,
.pull-quote-methods-link a {
  color: var(--semantic-blue);
  text-decoration: none;
}
.hero-subtitle-methods-link a:hover,
.pull-quote-methods-link a:hover {
  text-decoration: underline;
}

/* ============================================================
   Neutrality anchor (v1.4 S4): permanent #neutrality-policy section
   on partners.html. Every partner-branded surface links here.
   ============================================================ */
.neutrality-anchor {
  /* Semantic anchor class — #neutrality-policy target. Inherits section styles. */
}
.neutrality-permalink {
  margin-top: 1rem;
  font-size: 0.85rem;
  color: var(--color-text-secondary);
}
.neutrality-permalink a {
  color: var(--semantic-blue);
  text-decoration: none;
}
.neutrality-permalink a:hover {
  text-decoration: underline;
}
.badge-legend-grid {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 0.75rem 1.25rem;
  margin-top: 1rem;
}
.badge-legend-grid dt {
  align-self: start;
}
.badge-legend-grid dd {
  margin: 0;
  color: var(--color-text-secondary);
  line-height: 1.5;
}


/* --- W2-2: Fleet Signature Card --- */
.fleet-signature-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--archetype-color, var(--accent-primary));
  border-radius: var(--border-radius);
  padding: var(--space-lg) var(--space-xl);
  margin-bottom: var(--space-lg);
  max-width: 760px;
}

.fleet-signature-card .card-header {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-bottom: var(--space-md);
}

.fleet-signature-card .signature-accent {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--archetype-color, var(--accent-primary));
  flex-shrink: 0;
}

.fleet-signature-card .card-title {
  font-family: var(--font-display);
  font-size: var(--font-size-xl);
  font-weight: 600;
  margin: 0;
  color: var(--color-text-primary);
}

.fleet-signature-card .signature-paragraph {
  font-size: var(--font-size-base);
  line-height: 1.7;
  color: var(--color-text-primary);
  margin: 0 0 var(--space-md) 0;
}

.fleet-signature-card .top-archetypes {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--space-md) 0;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.fleet-signature-card .top-archetypes li {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--color-text-secondary);
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.fleet-signature-card .dimension-emphasis {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--color-text-muted);
  margin: 0 0 var(--space-md) 0;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.fleet-signature-card .strategy-bridge {
  font-size: var(--font-size-base);
  line-height: 1.6;
  color: var(--color-text-primary);
  font-style: italic;
  margin: 0 0 var(--space-md) 0;
  padding-left: var(--space-md);
  border-left: 2px solid var(--archetype-color, var(--accent-primary));
}

.fleet-signature-card .card-footer {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  flex-wrap: wrap;
  padding-top: var(--space-sm);
  border-top: 1px solid var(--color-border);
}

/* Archetype color modifiers — card border and accent dot pick up archetype color */
.fleet-signature-card--aeromax     { --archetype-color: var(--arch-aeromax); }
.fleet-signature-card--aeroblade   { --archetype-color: var(--arch-aeroblade); }
.fleet-signature-card--balancecore { --archetype-color: var(--arch-balancecore); }
.fleet-signature-card--deepframe   { --archetype-color: var(--arch-deepframe); }
.fleet-signature-card--glideform   { --archetype-color: var(--arch-glideform); }
.fleet-signature-card--gravityrun  { --archetype-color: var(--arch-gravityrun); }
.fleet-signature-card--headforce   { --archetype-color: var(--arch-headforce); }
.fleet-signature-card--ironwind    { --archetype-color: var(--arch-ironwind); }
.fleet-signature-card--keelflex    { --archetype-color: var(--arch-keelflex); }
.fleet-signature-card--steelform   { --archetype-color: var(--arch-steelform); }
.fleet-signature-card--stormline   { --archetype-color: var(--arch-stormline); }


/* --- W2-3: Archetype Exemplar Card --- */
.archetype-exemplar-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--archetype-color, var(--accent-primary));
  border-radius: var(--border-radius);
  padding: var(--space-lg);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.archetype-exemplar-card .exemplar-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-sm);
  margin-bottom: var(--space-xs);
}

.archetype-exemplar-card .exemplar-name {
  font-family: var(--font-mono);
  font-size: var(--font-size-base);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--archetype-color, var(--accent-primary));
  margin: 0;
}

.archetype-exemplar-card .exemplar-share {
  font-family: var(--font-mono);
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

.archetype-exemplar-card .exemplar-description {
  font-size: var(--font-size-sm);
  line-height: 1.6;
  color: var(--color-text-secondary);
  margin: 0 0 var(--space-sm) 0;
}

.archetype-exemplar-card .exemplar-boats {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.archetype-exemplar-card .exemplar-boats li {
  font-size: var(--font-size-sm);
  color: var(--color-text-primary);
}

.archetype-exemplar-card .boat-name {
  font-weight: 600;
}

.archetype-exemplar-card .boat-class {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--color-text-muted);
  margin-left: var(--space-xs);
}

.archetype-exemplar-card .exemplar-recognition {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  font-style: italic;
  margin: var(--space-sm) 0 0 0;
  padding-top: var(--space-sm);
  border-top: 1px solid var(--color-border);
}

.archetype-exemplar-card--aeromax     { --archetype-color: var(--arch-aeromax); }
.archetype-exemplar-card--aeroblade   { --archetype-color: var(--arch-aeroblade); }
.archetype-exemplar-card--balancecore { --archetype-color: var(--arch-balancecore); }
.archetype-exemplar-card--deepframe   { --archetype-color: var(--arch-deepframe); }
.archetype-exemplar-card--glideform   { --archetype-color: var(--arch-glideform); }
.archetype-exemplar-card--gravityrun  { --archetype-color: var(--arch-gravityrun); }
.archetype-exemplar-card--headforce   { --archetype-color: var(--arch-headforce); }
.archetype-exemplar-card--ironwind    { --archetype-color: var(--arch-ironwind); }
.archetype-exemplar-card--keelflex    { --archetype-color: var(--arch-keelflex); }
.archetype-exemplar-card--steelform   { --archetype-color: var(--arch-steelform); }
.archetype-exemplar-card--stormline   { --archetype-color: var(--arch-stormline); }


/* --- W2-4: Race Story Card --- */
.race-story-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--family-color, var(--accent-primary));
  border-radius: var(--border-radius);
  padding: var(--space-lg);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.race-story-card .story-type-label {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--family-color, var(--accent-primary));
}

.race-story-card .card-headline {
  font-family: var(--font-display);
  font-size: var(--font-size-xl);
  font-weight: 600;
  line-height: 1.3;
  color: var(--color-text-primary);
  margin: 0;
}

.race-story-card .card-body {
  font-size: var(--font-size-base);
  line-height: 1.7;
  color: var(--color-text-primary);
  margin: 0;
}

.race-story-card .card-evidence-list {
  list-style: none;
  padding: 0;
  margin: var(--space-sm) 0 0 0;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.race-story-card .card-evidence-list li {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--color-text-secondary);
}

.race-story-card .evidence-metric {
  color: var(--color-text-primary);
  font-weight: 600;
}

.race-story-card .card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  flex-wrap: wrap;
  margin-top: var(--space-md);
  padding-top: var(--space-sm);
  border-top: 1px solid var(--color-border);
}

/* Story-type family color modifiers — 9-bucket mapping per DOC-2 §4 */
.race-story-card--rating             { --family-color: var(--family-rating); }
.race-story-card--hull-efficiency    { --family-color: var(--family-hull); }
.race-story-card--sail-performance   { --family-color: var(--family-sail); }
.race-story-card--crew               { --family-color: var(--family-crew); }
.race-story-card--condition-tactical { --family-color: var(--family-condition); }
.race-story-card--comparative-time   { --family-color: var(--family-comparative); }
.race-story-card--opponent-modeling  { --family-color: var(--family-opponent); }
.race-story-card--fleet-archetype    { --family-color: var(--family-fleet-archetype); }
.race-story-card--structural         { --family-color: var(--family-structural); }
.race-story-card--boat-maintenance   { --family-color: var(--family-boat-maintenance); }

/* Methodology framing for FE-REL-C confidence-gated stories (D-26) */
.race-story-card.methodology-framing {
  background: rgba(155, 114, 207, 0.04);
}

.race-story-card.methodology-framing .provenance-badge {
  font-weight: 700;
}


/* --- W2-5: Cross-Edition Continuity Card --- */
.continuity-card {
  background: var(--color-surface-raised);
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius);
  padding: var(--space-lg);
  display: flex;
  align-items: center;
  gap: var(--space-lg);
  margin: var(--space-lg) 0;
  max-width: 760px;
}

.continuity-card--incoming {
  flex-direction: row;
}

.continuity-card--outgoing {
  flex-direction: row-reverse;
}

.continuity-card .continuity-arrow {
  font-family: var(--font-mono);
  font-size: 1.75rem;
  color: var(--accent-primary);
  flex-shrink: 0;
  line-height: 1;
}

.continuity-card .continuity-body {
  flex: 1;
  min-width: 0;
}

.continuity-card .continuity-chip {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--accent-warm);
  margin-bottom: var(--space-xs);
}

.continuity-card .continuity-insight {
  font-size: var(--font-size-base);
  line-height: 1.6;
  color: var(--color-text-primary);
  margin: 0 0 var(--space-sm) 0;
}

.continuity-card .continuity-question {
  font-size: var(--font-size-sm);
  font-style: italic;
  color: var(--color-text-secondary);
  margin: 0 0 var(--space-sm) 0;
}

.continuity-card .continuity-link {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--accent-primary);
  text-decoration: none;
  transition: opacity var(--transition-fast);
}

.continuity-card .continuity-link:hover {
  opacity: 0.75;
}


/* --- W2-6: Hero Chip Strip (homepage Option C hybrid hero per D-13; chip-count-invariant per DECIDE Amendment 2 §A2.2/§A2.3 + SPEC §CHIP-01) --- */
.hero-chip-strip {
  display: flex;
  gap: var(--space-md);
  margin-top: var(--space-xl);
  flex-wrap: wrap;
}

/* 2-chip strip — narrower max-width keeps each chip at a comfortable width
   without flex-grow stretching the .hero-chip-micro copy to 3 lines. */
.hero-chip-strip--2 {
  max-width: 720px;
}

/* 3-chip strip — original geometry. */
.hero-chip-strip--3 {
  max-width: 960px;
}

.hero-chip-strip .hero-chip {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  padding: var(--space-md) var(--space-lg);
  background: rgba(91, 158, 201, 0.05);
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius);
  text-decoration: none;
  color: var(--color-text-primary);
  transition: background var(--transition-fast), border-color var(--transition-fast);
  flex: 1 1 0;
  min-width: 280px;
}

.hero-chip-strip .hero-chip:hover {
  background: rgba(91, 158, 201, 0.1);
  border-color: var(--accent-primary);
}

.hero-chip-strip .hero-chip-label {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--accent-primary);
  margin: 0;
}

.hero-chip-strip .hero-chip-headline {
  font-family: var(--font-display);
  font-size: var(--font-size-lg);
  font-weight: 600;
  color: var(--color-text-primary);
  margin: 0;
  line-height: 1.3;
}

.hero-chip-strip .hero-chip-micro {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  margin: 0;
  line-height: 1.4;
}

/* Hero sections carrying a chip strip need extra bottom padding to absorb
   the chip block without clipping into the next section. :has() baseline:
   Chrome 105+, Safari 15.4+, Firefox 121+ — all within the evergreen+1
   browser-support floor. */
.section--hero:has(.hero-chip-strip) {
  padding-bottom: calc(var(--space-4xl) + var(--space-xl));
}

/* Chip type modifiers — each chip carries its own section-label color */
.hero-chip--kinship .hero-chip-label      { color: var(--accent-warm); }
.hero-chip--hidden-shape .hero-chip-label { color: var(--accent-primary); }
.hero-chip--what-we-saw .hero-chip-label  { color: var(--semantic-teal); }


/* --- Featured Fleet callout (dimension / methodology / product-capability pages) --- */
/* Mid-page exit ramp per DECIDE-FleetEdge_Web_Engagement_Refinement_v1_0 §D8.
   Invites the reader to see the current dimension demonstrated in a specific
   fleet — closes the Lateral-Chain gap (G-A2) by adding a forward exit that
   does not require reaching the bottom CTA band. */
.featured-fleet-callout {
  margin: var(--space-2xl) auto;
  max-width: 720px;
  padding: var(--space-xl) var(--space-2xl);
  background: var(--color-surface-raised);
  border-left: 3px solid var(--accent-primary);
  border-radius: 4px;
}
.featured-fleet-callout h3 {
  font-family: var(--font-display);
  font-size: var(--font-size-lg);
  color: var(--color-text-primary);
  margin: 0 0 var(--space-sm);
}
.featured-fleet-callout p {
  color: var(--color-text-secondary);
  margin: 0 0 var(--space-md);
  line-height: 1.55;
}
.featured-fleet-callout .btn-secondary {
  display: inline-block;
}


/* --- Subsection title (Hidden Shape intra-section heading, country pages) --- */
/* Used between Fleet DNA grid and Archetype Exemplar Cards to signal a
   subsection within Hidden Shape without introducing a new section wrapper. */
.subsection-title {
  font-family: var(--font-display);
  font-size: var(--font-size-xl);
  font-weight: 600;
  color: var(--color-text-primary);
  margin-top: var(--space-2xl);
  margin-bottom: var(--space-md);
}


/* --- Semantic marker classes (DECIDE-FleetEdge_Web_Audit_Rules_v1_1, 2026-04-15) --- */
/* These classes are governance/semantic hooks referenced from HTML but
   inherit their rendering from default paragraph styles + element-level
   inline styles. Declared here so Rule 13 (CSS class coherence) passes
   without a visual change. Do NOT add styling here without a scoped
   editorial ADRD — these paragraphs currently ship in their inherited
   form by operator intent. */
.insufficient-data-declaration { /* intentionally empty — semantic marker */ }
.proof-provenance { /* intentionally empty — semantic marker */ }


/* ------------------------------------------------------------
   12. RESPONSIVE BREAKPOINTS (Brand Guide §6.3)
   ------------------------------------------------------------ */

/* -- 960px: mid-width grid adjustments -- */
@media (max-width: 960px) {
  .detail-grid--4col {
    grid-template-columns: repeat(2, 1fr);
  }

  /* 2-chip hero strip stacks at 960px — one breakpoint earlier than the
     3-chip strip (SPEC §CHIP-01). Prevents the "flex-grow stretches 2 chips
     across the full 960px width" overflow the prior mechanism produced. */
  .hero-chip-strip--2 {
    flex-direction: column;
  }

  /* Mega-menu: collapse from 3-col to single-col at narrow desktop.
     Matches the background/border treatment of The Analytics dropdown. */
  .nav-dropdown--mega .nav-mega-menu {
    left: auto;
    right: 0;
    transform: none;
    padding-top: 0;
  }

  .nav-mega-menu-inner {
    flex-direction: column;
    gap: 0;
    min-width: 220px;
    padding: 0.5rem 0;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6);
  }

  .nav-mega-col {
    min-width: 0;
    padding: 0;
  }

  .nav-mega-col a {
    padding: 0.5rem 1rem;
    white-space: normal;
  }

  .nav-mega-col a:hover {
    background: rgba(91, 158, 201, 0.06);
  }

  .nav-mega-heading {
    padding: 0.6rem 1rem 0.25rem 1rem;
    margin: 0;
  }

  .nav-mega-col .nav-mega-heading:not(:first-child) {
    margin-top: 0.25rem;
    border-top: 1px solid var(--color-border);
    padding-top: 0.6rem;
  }
}

/* -- 768px: tablet / small desktop -- */
@media (max-width: 768px) {
  :root {
    --font-size-hero:   2.5rem;    /* 40px */
    --font-size-3xl:    2rem;      /* 32px */
    --font-size-2xl:    1.75rem;   /* 28px */
    --font-size-xl:     1.25rem;   /* 20px */
    --content-padding:  var(--space-md);
  }

  .section {
    padding-top: var(--space-2xl);
    padding-bottom: var(--space-2xl);
  }

  .section--hero {
    padding-top: var(--space-3xl);
    padding-bottom: var(--space-3xl);
  }

  /* Nav: hide desktop, show mobile toggle */
  .nav-container {
    padding: 0 1rem;
  }

  .nav-desktop {
    display: none;
  }

  .nav-mobile-toggle {
    display: flex;
  }

  /* Footer: brand spans full, links 2×2 */
  .footer-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .footer-brand-col {
    grid-column: 1 / -1;
    margin-bottom: var(--space-sm);
  }

  /* Content grids: stack to single column */
  .detail-grid--2col,
  .detail-grid--3col,
  .detail-grid--2x2 {
    grid-template-columns: 1fr;
  }

  /* Content row: stack vertically */
  .content-row,
  .content-row--reverse {
    grid-template-columns: 1fr;
    direction: ltr;
  }

  /* Content section: tighter padding */
  .content-section {
    padding-left: var(--space-md);
    padding-right: var(--space-md);
  }

  /* Screenshot: full width */
  .screenshot-figure {
    max-width: 100%;
  }

  /* Proof bar: tighter gap */
  .proof-bar {
    gap: 1.5rem;
  }

  /* Storytelling content objects (§11) — narrow viewport stacking for 3-chip strip.
     The 2-chip strip stacks earlier (at 960px) per SPEC §CHIP-01 — see the 960px media block. */
  .hero-chip-strip--3 {
    flex-direction: column;
  }

  .continuity-card,
  .continuity-card--incoming,
  .continuity-card--outgoing {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-md);
  }

  .fleet-signature-card .card-header {
    flex-wrap: wrap;
  }

  .race-story-card .card-footer {
    flex-direction: column;
    align-items: flex-start;
  }

  .archetype-exemplar-card .exemplar-header {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-xs);
  }
}

/* -- 480px: mobile -- */
@media (max-width: 480px) {
  /* Footer: single column */
  .footer-grid {
    grid-template-columns: 1fr;
  }

  /* 4-col grid: single column */
  .detail-grid--4col {
    grid-templa