/*
Theme Name: ROAM MGMT
Theme URI: https://roammgmt.com
Author: ROAM Management
Author URI: https://roammgmt.com
Description: Custom theme for ROAM MGMT — Michigan Vacation Rental Management. Pixel-perfect migration from Base44 SPA.
Version: 2.1.541
License: Proprietary
Text Domain: roam-mgmt
Requires at least: 6.0
Tested up to: 6.8
Requires PHP: 8.0
*/

/* Google Fonts moved to header.php as preconnected <link> tags in v2.1.534
   to break the serial download chain (style.css → @import → fonts CSS → woff2).
   Italic 300 dropped — unused per design system. */

/* Global: suppress mobile tap highlight flash on all interactive elements */
*, *::before, *::after {
  -webkit-tap-highlight-color: transparent;
}

/* ═══════════════════════════════════════════════════════
   ROAM Management Design System v1.1.0
   Source of truth: roam-brand-standards.md
   ═══════════════════════════════════════════════════════ */

:root {

  /* ═══════════════════════════════════════════════════════════
     TIER 1: REFERENCE TOKENS (--roam-ref-*)
     Raw primitive values. Swap these to rebrand.
     ═══════════════════════════════════════════════════════════ */

  /* ── Palette: Core Colors ── */
  --roam-ref-palette-forest: #1B2B27;
  --roam-ref-palette-forest-light: #2a4a40;
  --roam-ref-palette-forest-soft: #3d6858;
  --roam-ref-palette-teal: #5B8FA8;
  --roam-ref-palette-gold: #C6975B;
  --roam-ref-palette-sage: #A89E7B;
  --roam-ref-palette-cream: #FAF6F1;
  --roam-ref-palette-white: #FFFFFF;
  --roam-ref-palette-error: #A33030;
  --roam-ref-palette-error-light: #e57373;

  /* ── Palette: State Colors ── */
  --roam-ref-palette-gold-active: #B8893F;
  --roam-ref-palette-gold-hover: #b8893f;
  --roam-ref-palette-teal-active: #4A7D95;
  --roam-ref-palette-sage-active: #968C6B;
  --roam-ref-palette-cream-active: #E5E1DB;
  --roam-ref-palette-neutral-light: #EDEDEA;
  --roam-ref-palette-forest-active: #0F1A16;
  --roam-ref-palette-error-active: #8C2424;

  /* ── Palette: Alpha Variants ──
     Opacity variants of base colors for hover, border, tint, and bg states.
     Naming: --roam-ref-palette-{color}-a{opacity_percent} */

  /* Forest alphas */
  --roam-ref-palette-forest-a6: rgba(27, 43, 39, 0.06);
  --roam-ref-palette-forest-a8: rgba(27, 43, 39, 0.08);
  --roam-ref-palette-forest-a12: rgba(27, 43, 39, 0.12);
  --roam-ref-palette-forest-a15: rgba(27, 43, 39, 0.15);
  --roam-ref-palette-forest-a30: rgba(27, 43, 39, 0.3);
  --roam-ref-palette-forest-a40: rgba(27, 43, 39, 0.4);
  --roam-ref-palette-forest-a50: rgba(27, 43, 39, 0.5);
  --roam-ref-palette-forest-a98: rgba(27, 43, 39, 0.98);

  /* Teal alphas */
  --roam-ref-palette-teal-a0: rgba(91, 143, 168, 0);
  --roam-ref-palette-teal-a2: rgba(91, 143, 168, 0.02);
  --roam-ref-palette-teal-a3: rgba(91, 143, 168, 0.03);
  --roam-ref-palette-teal-a5: rgba(91, 143, 168, 0.05);
  --roam-ref-palette-teal-a10: rgba(91, 143, 168, 0.1);
  --roam-ref-palette-teal-a12: rgba(91, 143, 168, 0.12);
  --roam-ref-palette-teal-a13: rgba(91, 143, 168, 0.13);
  --roam-ref-palette-teal-a15: rgba(91, 143, 168, 0.15);
  --roam-ref-palette-teal-a20: rgba(91, 143, 168, 0.2);
  --roam-ref-palette-teal-a25: rgba(91, 143, 168, 0.25);
  --roam-ref-palette-teal-a30: rgba(91, 143, 168, 0.3);
  --roam-ref-palette-teal-a40: rgba(91, 143, 168, 0.4);
  --roam-ref-palette-teal-a60: rgba(91, 143, 168, 0.6);

  /* Gold alphas */
  --roam-ref-palette-gold-a10: rgba(198, 151, 91, 0.1);
  --roam-ref-palette-gold-a13: rgba(198, 151, 91, 0.13);
  --roam-ref-palette-gold-a15: rgba(198, 151, 91, 0.15);
  --roam-ref-palette-gold-a25: rgba(198, 151, 91, 0.25);
  --roam-ref-palette-gold-a30: rgba(198, 151, 91, 0.3);
  --roam-ref-palette-gold-a40: rgba(198, 151, 91, 0.4);

  /* Sage alphas */
  --roam-ref-palette-sage-a13: rgba(168, 158, 123, 0.13);
  --roam-ref-palette-sage-a15: rgba(168, 158, 123, 0.15);
  --roam-ref-palette-sage-a25: rgba(168, 158, 123, 0.25);
  --roam-ref-palette-sage-a30: rgba(168, 158, 123, 0.3);
  --roam-ref-palette-sage-a40: rgba(168, 158, 123, 0.4);

  /* Cream alphas */
  --roam-ref-palette-cream-a1: rgba(250, 246, 241, 0.01);
  --roam-ref-palette-cream-a2: rgba(250, 246, 241, 0.02);
  --roam-ref-palette-cream-a5: rgba(250, 246, 241, 0.05);
  --roam-ref-palette-cream-a6: rgba(250, 246, 241, 0.06);
  --roam-ref-palette-cream-a8: rgba(250, 246, 241, 0.08);
  --roam-ref-palette-cream-a10: rgba(250, 246, 241, 0.1);
  --roam-ref-palette-cream-a15: rgba(250, 246, 241, 0.15);
  --roam-ref-palette-cream-a20: rgba(250, 246, 241, 0.2);
  --roam-ref-palette-cream-a30: rgba(250, 246, 241, 0.3);
  --roam-ref-palette-cream-a40: rgba(250, 246, 241, 0.4);

  /* Error alphas */
  --roam-ref-palette-error-a15: rgba(163, 48, 48, 0.15);
  --roam-ref-palette-error-a30: rgba(163, 48, 48, 0.3);
  --roam-ref-palette-error-a40: rgba(163, 48, 48, 0.4);

  /* White alphas */
  --roam-ref-palette-white-a20: rgba(255, 255, 255, 0.2);
  --roam-ref-palette-white-a80: rgba(255, 255, 255, 0.8);

  /* ── Palette: Specialty ── */
  --roam-ref-palette-tier-local: #2D6A4F;
  --roam-ref-palette-tier-regional: #8B6914;
  --roam-ref-palette-tier-daytrip: #8B4513;
  --roam-ref-palette-star-filled: #C6975B;
  --roam-ref-palette-star-empty: #DDDDDD;
  --roam-ref-palette-mark-top: #5B8FA8;
  --roam-ref-palette-mark-mid: #8DA88A;
  --roam-ref-palette-mark-bottom: #A89E7B;

  /* ── Palette: Dashboard-specific (v1.3.0, WEB-DASH-001 spec v0.3) ──
   * Bronze is the muted National benchmark tier on comparison cards and
   * the border for the "Challenging" score range. Greige is the neutral
   * "Rest of 1hr region" fill on the density card. Success is the positive
   * delta indicator used on Occupancy and Revenue Trend cards.
   */
  --roam-ref-palette-bronze: #866D4B;
  --roam-ref-palette-bronze-a30: rgba(134, 109, 75, 0.3);
  --roam-ref-palette-bronze-a40: rgba(134, 109, 75, 0.4);
  --roam-ref-palette-greige: #B4C2BB;
  --roam-ref-palette-success: #3A7D52;

  /* ── Palette: Light Theme Text ── */
  --roam-ref-palette-text-primary: #1B2B27;
  --roam-ref-palette-text-body: #444444;
  --roam-ref-palette-text-secondary: #555555;
  --roam-ref-palette-text-muted: rgba(27, 43, 39, 0.6);
  --roam-ref-palette-text-light: #999999;
  --roam-ref-palette-text-faint: #AAAAAA;
  --roam-ref-palette-text-ghost: #BBBBBB;
  --roam-ref-palette-text-warm: #AD9B84;

  /* ── Palette: Light Theme Border ── */
  --roam-ref-palette-border-warm: #3A342B;
  --roam-ref-palette-border-cream: #F0EDE8;
  --roam-ref-palette-border-tag: #E0DCD7;
  --roam-ref-palette-light-text-primary: #1B2B27;
  --roam-ref-palette-light-text-body: #444444;
  --roam-ref-palette-light-text-muted: #999999;
  --roam-ref-palette-light-text-ghost: #BBBBBB;
  --roam-ref-palette-light-border: #F0EDE8;

  /* ── Palette: Dark Theme Text ── */
  --roam-ref-palette-dark-text-primary: #FAF6F1;
  --roam-ref-palette-dark-text-body: rgba(250,246,241,0.6);
  --roam-ref-palette-dark-text-muted: rgba(250,246,241,0.5);
  --roam-ref-palette-dark-text-ghost: rgba(250,246,241,0.35);
  --roam-ref-palette-dark-text-faint: rgba(250,246,241,0.4);
  --roam-ref-palette-dark-text-whisper: rgba(250,246,241,0.3);
  --roam-ref-palette-dark-text-soft: rgba(250,246,241,0.55);

  /* ── Palette: Dark Theme Border ── */
  --roam-ref-palette-dark-border-light: rgba(250,246,241,0.06);
  --roam-ref-palette-dark-border-medium: rgba(250,246,241,0.08);
  --roam-ref-palette-dark-border-visible: rgba(250,246,241,0.12);
  --roam-ref-palette-dark-border-subtle: rgba(250,246,241,0.1);
  --roam-ref-palette-dark-border-teal: rgba(91,143,168,0.4);

  /* ── Palette: Filter UI ── */
  --roam-ref-palette-filter-active-bg: #1B2B27;
  --roam-ref-palette-filter-active-text: #FFFFFF;
  --roam-ref-palette-filter-inactive-bg: rgba(27,43,39,0.06);
  --roam-ref-palette-filter-inactive-text: #999999;
  --roam-ref-palette-nav-inactive-icon: #BBBBBB;

  /* ── Type Scale (Tier 1: Reference) ──
     Numeric scale. Named by px value. */
  --roam-ref-typescale-9: 9px;
  --roam-ref-typescale-10: 10px;
  --roam-ref-typescale-11: 11px;
  --roam-ref-typescale-12: 12px;
  --roam-ref-typescale-13: 13px;
  --roam-ref-typescale-14: 14px;
  --roam-ref-typescale-15: 15px;
  --roam-ref-typescale-16: 16px;
  --roam-ref-typescale-18: 18px;
  --roam-ref-typescale-20: 20px;
  --roam-ref-typescale-22: 22px;
  --roam-ref-typescale-24: 24px;
  --roam-ref-typescale-28: 28px;
  --roam-ref-typescale-32: 32px;
  --roam-ref-typescale-36: 36px;
  --roam-ref-typescale-40: 40px;
  --roam-ref-typescale-56: 56px; /* secondary hero / content-page H1 (static) */
  --roam-ref-typescale-80: 80px;
  --roam-ref-typescale-display: clamp(40px, 10vw, 72px);
  /* Responsive headline — mirrors display pattern with 56 ceiling.
     Mobile ≤400px lands at 40px floor; tablet/desktop 560px+ caps at 56. */
  --roam-ref-typescale-headline: clamp(40px, 10vw, 56px);
  /* Responsive section title — H2 default. Smaller scale than headline.
     Mobile ≤457px lands at 32px floor; tablet/desktop 572px+ caps at 40. */
  --roam-ref-typescale-section: clamp(32px, 7vw, 40px);
  /* Responsive card title — H3/H4 cards. Tighter range.
     Mobile ≤400px lands at 20px floor; tablet 480px+ caps at 24. */
  --roam-ref-typescale-card: clamp(20px, 5vw, 24px);

  /* ── Typeface ── */
  --roam-ref-typeface-display: 'Playfair Display', Georgia, serif;
  --roam-ref-typeface-body: 'DM Sans', sans-serif;

  /* ── Type Scale (14 unique sizes) ── */
  --roam-ref-typescale-display: clamp(40px, 10vw, 72px);

  /* ── Type Scale: Guide Product ── */

  /* ── Font Weight ── */
  --roam-ref-weight-normal: 400;
  --roam-ref-weight-medium: 500;
  --roam-ref-weight-semibold: 600;
  --roam-ref-weight-bold: 700;

  /* ── Line Height ── */
  --roam-ref-leading-none: 1;
  --roam-ref-leading-tight: 1.05;
  --roam-ref-leading-heading: 1.1;
  --roam-ref-leading-card: 1.2;
  --roam-ref-leading-snug: 1.6;
  --roam-ref-leading-body: 1.7;

  /* ── Letter Spacing (8 unique values) ── */
  --roam-ref-tracking-tight: -0.3px;
  --roam-ref-tracking-xs: 0.05em;
  --roam-ref-tracking-xs-px: 0.5px;
  --roam-ref-tracking-sm: 0.08em;
  --roam-ref-tracking-md: 0.1em;
  --roam-ref-tracking-lg: 0.12em;
  --roam-ref-tracking-xl: 0.15em;
  --roam-ref-tracking-2xl: 1.2px;
  --roam-ref-tracking-3xl: 1.5px;
  --roam-ref-tracking-4xl: 2px;

  /* ── Spacing Scale (Tier 1: Reference) ──
     Complete numeric scale. All spacing values flow through here.
     Named by px value: --roam-ref-spacing-{px} */
  --roam-ref-spacing-0: 0;
  --roam-ref-spacing-1: 1px;
  --roam-ref-spacing-2: 2px;
  --roam-ref-spacing-3: 3px;
  --roam-ref-spacing-4: 4px;
  --roam-ref-spacing-5: 5px;
  --roam-ref-spacing-6: 6px;
  --roam-ref-spacing-8: 8px;
  --roam-ref-spacing-10: 10px;
  --roam-ref-spacing-12: 12px;
  --roam-ref-spacing-14: 14px;
  --roam-ref-spacing-16: 16px;
  --roam-ref-spacing-18: 18px;
  --roam-ref-spacing-20: 20px;
  --roam-ref-spacing-22: 22px;
  --roam-ref-spacing-24: 24px;
  --roam-ref-spacing-25: 25px;
  --roam-ref-spacing-26: 26px;
  --roam-ref-spacing-28: 28px;
  --roam-ref-spacing-32: 32px;
  --roam-ref-spacing-36: 36px;
  --roam-ref-spacing-40: 40px;
  --roam-ref-spacing-44: 44px;
  --roam-ref-spacing-48: 48px;
  --roam-ref-spacing-56: 56px;
  --roam-ref-spacing-60: 60px;
  --roam-ref-spacing-64: 64px;
  --roam-ref-spacing-80: 80px;
  --roam-ref-spacing-112: 112px;

  /* ── Layout Widths (Tier 1: Reference) ──
     Numeric scale. Named by px value. */
  --roam-ref-layout-288: 288px;
  --roam-ref-layout-320: 320px;
  --roam-ref-layout-420: 420px;
  --roam-ref-layout-480: 480px;
  --roam-ref-layout-580: 580px;
  --roam-ref-layout-600: 600px;
  --roam-ref-layout-640: 640px;
  --roam-ref-layout-720: 720px;
  --roam-ref-layout-768: 768px;
  --roam-ref-layout-840: 840px;
  --roam-ref-layout-1024: 1024px;
  --roam-ref-layout-1200: 1200px;
  --roam-ref-layout-1280: 1280px;

  /* ── Shape (6 unique radii) ── */
  --roam-ref-shape-full: 9999px;
  --roam-ref-shape-xl: 20px;
  --roam-ref-shape-lg: 12px;
  --roam-ref-shape-md: 10px;
  --roam-ref-shape-sm: 8px;
  --roam-ref-shape-xs: 2px;

  /* ── Elevation ── */
  --roam-ref-elevation-1: 0 2px 16px rgba(27, 43, 39, 0.06);
  --roam-ref-elevation-2: 0 20px 60px rgba(27, 43, 39, 0.12);
  --roam-ref-elevation-lift: translateY(-4px);

  /* ── Motion ── */
  --roam-ref-motion-standard: color 0.2s ease;
  --roam-ref-motion-emphasized-short: background-color 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94), color 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94), border-color 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --roam-ref-motion-emphasized: color 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --roam-ref-motion-emphasized-long: color 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --roam-ref-motion-fade-duration: 0.5s;
  --roam-ref-motion-fade-stagger: 0.08s;
  --roam-ref-motion-fade-cap: 8;
  --roam-ref-motion-hero-duration: 0.6s;

  /* ── Visual Effects: Gradients ── */
  --roam-ref-gradient-brand: linear-gradient(to right, #5B8FA8, #A89E7B, #C6975B);
  --roam-ref-gradient-brand-simple: linear-gradient(to right, #5B8FA8, #C6975B);
  --roam-ref-gradient-accent-bar: linear-gradient(to bottom, #5B8FA8, #C6975B);
  --roam-ref-gradient-surface-hero: linear-gradient(145deg, var(--roam-ref-palette-forest) 0%, var(--roam-ref-palette-forest-light) 40%, var(--roam-ref-palette-forest-soft) 100%);
  --roam-ref-gradient-surface-stat: linear-gradient(145deg, var(--roam-ref-palette-forest) 0%, var(--roam-ref-palette-forest-light) 100%);
  --roam-ref-gradient-surface-content: linear-gradient(145deg, var(--roam-ref-palette-forest-light) 0%, var(--roam-ref-palette-forest-soft) 100%);
  --roam-ref-glow-primary: radial-gradient(ellipse at 30% 20%, rgba(91,143,168,0.15) 0%, transparent 60%);
  --roam-ref-glow-accent: radial-gradient(ellipse at 70% 80%, rgba(198,151,91,0.10) 0%, transparent 50%);

  /* ── Visual Effects: Photo ── */
  --roam-ref-photo-overlay: linear-gradient(180deg, rgba(27,43,39,0.2) 0%, transparent 40%, transparent 60%, rgba(27,43,39,0.8) 100%);
  --roam-ref-photo-tint: rgba(91,143,168,0.07);
  --roam-ref-photo-filter: saturate(0.8) contrast(1.05) brightness(0.95);
  --roam-ref-photo-tint-color: #5B8FA812;
  --roam-ref-photo-tint-blend: multiply;

  /* ── Visual Effects: Topographic Texture ── */
  --roam-ref-topo-frequency: 0.015;
  --roam-ref-topo-octaves: 3;
  --roam-ref-topo-seed: 2;
  --roam-ref-topo-opacity-hero: 0.4;
  --roam-ref-topo-opacity-placeholder: 0.5;
  --roam-ref-topo-opacity-footer: 0.3;

  /* ── Layout ── */

  /* ═══════════════════════════════════════════════════════════
     TIER 2: SYSTEM TOKENS (--roam-sys-*)
     Semantic roles. Map to reference tokens.
     Structurally consistent across brands.
     ═══════════════════════════════════════════════════════════ */

  /* ── Color Roles ── */
  --roam-sys-color-primary: var(--roam-ref-palette-teal);
  --roam-sys-color-primary-active: var(--roam-ref-palette-teal-active);
  --roam-sys-color-accent: var(--roam-ref-palette-gold);
  --roam-sys-color-accent-active: var(--roam-ref-palette-gold-active);
  --roam-sys-color-accent-hover: var(--roam-ref-palette-gold-hover);
  --roam-sys-color-surface: var(--roam-ref-palette-forest);
  --roam-sys-color-surface-active: var(--roam-ref-palette-forest-active);
  --roam-sys-color-on-surface: var(--roam-ref-palette-dark-text-primary);
  --roam-sys-color-on-surface-body: var(--roam-ref-palette-dark-text-body);
  --roam-sys-color-on-surface-muted: var(--roam-ref-palette-dark-text-muted);
  --roam-sys-color-on-surface-ghost: var(--roam-ref-palette-dark-text-ghost);
  --roam-sys-color-on-surface-faint: var(--roam-ref-palette-dark-text-faint);
  --roam-sys-color-on-surface-whisper: var(--roam-ref-palette-dark-text-whisper);
  --roam-sys-color-on-surface-soft: var(--roam-ref-palette-dark-text-soft);
  --roam-sys-color-error: var(--roam-ref-palette-error);
  --roam-sys-color-error-active: var(--roam-ref-palette-error-active);
  --roam-sys-color-tertiary: var(--roam-ref-palette-sage);
  --roam-sys-color-tertiary-active: var(--roam-ref-palette-sage-active);
  --roam-sys-color-neutral: var(--roam-ref-palette-cream);
  --roam-sys-color-neutral-active: var(--roam-ref-palette-cream-active);
  --roam-sys-color-outline-light: var(--roam-ref-palette-dark-border-light);
  --roam-sys-color-outline-medium: var(--roam-ref-palette-dark-border-medium);
  --roam-sys-color-outline-visible: var(--roam-ref-palette-dark-border-visible);
  --roam-sys-color-outline-subtle: var(--roam-ref-palette-dark-border-subtle);
  --roam-sys-color-outline-primary: var(--roam-ref-palette-dark-border-teal);

  /* ── Typography Roles ── */
  --roam-sys-typescale-display: var(--roam-ref-typescale-display);
  --roam-sys-typescale-display-font: var(--roam-ref-typeface-display);
  --roam-sys-typescale-headline: var(--roam-ref-typescale-36);
  --roam-sys-typescale-headline-font: var(--roam-ref-typeface-display);
  --roam-sys-typescale-title-lg: var(--roam-ref-typescale-28);
  --roam-sys-typescale-title-md: var(--roam-ref-typescale-24);
  --roam-sys-typescale-title-sm: var(--roam-ref-typescale-18);
  --roam-sys-typescale-title-font: var(--roam-ref-typeface-display);
  --roam-sys-typescale-body-lg: var(--roam-ref-typescale-15);
  --roam-sys-typescale-body-md: var(--roam-ref-typescale-14);
  --roam-sys-typescale-body-sm: var(--roam-ref-typescale-13);
  --roam-sys-typescale-body-font: var(--roam-ref-typeface-body);
  --roam-sys-typescale-label-lg: var(--roam-ref-typescale-14);
  --roam-sys-typescale-label-md: var(--roam-ref-typescale-12);
  --roam-sys-typescale-label-sm: var(--roam-ref-typescale-10);
  --roam-sys-typescale-label-font: var(--roam-ref-typeface-body);

  /* ── Spacing Scale (Tier 1: Reference) ──
     Complete numeric scale. All spacing values flow through here.
     Named by px value: --roam-ref-spacing-{px} */

  /* ── Spacing Roles (maps semantic names to scale) ── */
  --roam-sys-spacing-page-x: var(--roam-ref-spacing-25);
  --roam-sys-spacing-section-top: var(--roam-ref-spacing-48);
  --roam-sys-spacing-section-bottom: var(--roam-ref-spacing-60);
  --roam-sys-spacing-section-y-md: var(--roam-ref-spacing-112);
  --roam-sys-spacing-section-header-mb: var(--roam-ref-spacing-48);
  --roam-sys-spacing-hero-y: var(--roam-ref-spacing-32);
  --roam-sys-spacing-card: var(--roam-ref-spacing-18);
  --roam-sys-spacing-card-sm: var(--roam-ref-spacing-16);
  --roam-sys-spacing-card-xs: var(--roam-ref-spacing-12);

  /* ── Spacing Flow (container-based vertical rhythm) ── */
  --roam-sys-flow-coupled: var(--roam-ref-spacing-8);     /* 8px — single unit (eyebrow+heading, icon+title, stat+label) */
  --roam-sys-flow-related: var(--roam-ref-spacing-16);    /* 16px — same context (heading→body, divider gaps, body→button) */
  --roam-sys-flow-separated: var(--roam-ref-spacing-24);  /* 24px — content type shift (header→grid, body→grid, subsections) */


    /* ── Shape Roles ── */
  --roam-sys-shape-full: var(--roam-ref-shape-full);
  --roam-sys-shape-xl: var(--roam-ref-shape-xl);
  --roam-sys-shape-lg: var(--roam-ref-shape-lg);
  --roam-sys-shape-md: var(--roam-ref-shape-md);
  --roam-sys-shape-sm: var(--roam-ref-shape-sm);
  --roam-sys-shape-xs: var(--roam-ref-shape-xs);

  /* ── Elevation Roles ── */
  --roam-sys-elevation-none: none;
  --roam-sys-elevation-low: var(--roam-ref-elevation-1);
  --roam-sys-elevation-high: var(--roam-ref-elevation-2);

  /* ── Motion Roles ── */
  --roam-sys-motion-standard: var(--roam-ref-motion-standard);
  --roam-sys-motion-emphasized: var(--roam-ref-motion-emphasized);

  /* ── Surface Roles ── */
  --roam-sys-surface-hero: var(--roam-ref-gradient-surface-hero);
  --roam-sys-surface-stat: var(--roam-ref-gradient-surface-stat);
  --roam-sys-surface-content: var(--roam-ref-gradient-surface-content);

  /* ── Layout Roles ── */
  --roam-sys-layout-max-width: var(--roam-ref-layout-1280);
  --roam-sys-layout-page-padding: var(--roam-sys-spacing-page-x);

  /* ═══════════════════════════════════════════════════════════
     TIER 3: COMPONENT TOKENS (--roam-comp-*)
     Specific UI element configurations.
     ═══════════════════════════════════════════════════════════ */

  /* ── Header ── */
  --roam-comp-header-height: 72px;
  --roam-comp-header-logo-size: 24px;
  --roam-comp-hero-content-height: calc(100vh - var(--roam-comp-header-height) - var(--roam-sys-flow-separated) - 1px);

  /* ── Footer ── */
  --roam-comp-footer-logo-size: 21px;
  --roam-comp-footer-social-size: 36px;
  --roam-comp-footer-color-heading: rgba(255,255,255,0.6);
  --roam-comp-footer-color-body: rgba(255,255,255,0.4);
  --roam-comp-footer-color-muted: rgba(255,255,255,0.35);
  --roam-comp-footer-color-link: rgba(255,255,255,0.35);
  --roam-comp-footer-color-copyright: rgba(255,255,255,0.2);
  --roam-comp-footer-color-disclaimer: rgba(255,255,255,0.15);
  --roam-comp-footer-social-bg: rgba(255,255,255,0.08);
  --roam-comp-footer-social-icon: rgba(255,255,255,0.4);

  /* ── Icon Box ── */
  --roam-comp-icon-box-size: 40px;
  --roam-comp-icon-box-border-width: 1.5px;
  --roam-comp-icon-box-border-primary: rgba(91,143,168,0.4);
  --roam-comp-icon-box-border-tertiary: rgba(168,158,123,0.4);
  --roam-comp-icon-box-border-accent: rgba(198,151,91,0.4);

  /* ── Divider ── */
  --roam-comp-divider-width: max(80px, 15%);
  --roam-comp-divider-height: 2px;
  --roam-comp-divider-bar-width: 3px;

  /* ── Card ── */
  --roam-comp-card-stat-bg: rgba(250,246,241,0.03);
  --roam-comp-card-stat-border: rgba(250,246,241,0.06);
  --roam-comp-card-content-bg: rgba(250,246,241,0.07);
  --roam-comp-card-content-border: rgba(250,246,241,0.12);

  /* ── Stat ── */
  --roam-comp-stat-row-bg: rgba(250,246,241,0.04);
  --roam-comp-dropdown-min-width: 260px;
  --roam-comp-tactic-header-min-width: 200px;
  --roam-comp-fact-label-min-width: 120px;

  --roam-comp-stat-badge-bg: rgba(27,43,39,0.3);

  /* ═══════════════════════════════════════════════════════════
     BACKWARD COMPATIBILITY ALIASES
     Maps old variable names to new names.
     Used by page content blocks stored in WordPress database.
     Remove after page content is migrated to new names.
     ═══════════════════════════════════════════════════════════ */
  --roam-accent-bar-width: var(--roam-comp-divider-bar-width);
  --roam-anim-fade-slide-cap: var(--roam-ref-motion-fade-cap);
  --roam-anim-fade-slide-duration: var(--roam-ref-motion-fade-duration);
  --roam-anim-fade-slide-stagger: var(--roam-ref-motion-fade-stagger);
  --roam-anim-hero-duration: var(--roam-ref-motion-hero-duration);
  --roam-bg-content: var(--roam-ref-gradient-surface-content);
  --roam-bg-hero: var(--roam-ref-gradient-surface-hero);
  --roam-bg-stat: var(--roam-ref-gradient-surface-stat);
  --roam-border-cream: var(--roam-ref-palette-border-cream);
  --roam-border-tag: var(--roam-ref-palette-border-tag);
  --roam-border-warm: var(--roam-ref-palette-border-warm);
  --roam-card-content-bg: var(--roam-comp-card-content-bg);
  --roam-card-content-border: var(--roam-comp-card-content-border);
  --roam-card-padding: var(--roam-sys-spacing-card);
  --roam-card-padding-sm: var(--roam-sys-spacing-card-sm);
  --roam-card-padding-xs: var(--roam-sys-spacing-card-xs);
  --roam-card-stat-bg: var(--roam-comp-card-stat-bg);
  --roam-card-stat-border: var(--roam-comp-card-stat-border);
  --roam-cream: var(--roam-ref-palette-cream);
  --roam-cream-active: var(--roam-ref-palette-cream-active);
  --roam-dark-badge-bg: var(--roam-comp-stat-badge-bg);
  --roam-dark-border-light: var(--roam-ref-palette-dark-border-light);
  --roam-dark-border-medium: var(--roam-ref-palette-dark-border-medium);
  --roam-dark-border-subtle: var(--roam-ref-palette-dark-border-subtle);
  --roam-dark-border-teal: var(--roam-ref-palette-dark-border-teal);
  --roam-dark-border-visible: var(--roam-ref-palette-dark-border-visible);
  --roam-dark-card-row-bg: var(--roam-comp-stat-row-bg);
  --roam-dark-text-body: var(--roam-ref-palette-dark-text-body);
  --roam-dark-text-faint: var(--roam-ref-palette-dark-text-faint);
  --roam-dark-text-ghost: var(--roam-ref-palette-dark-text-ghost);
  --roam-dark-text-muted: var(--roam-ref-palette-dark-text-muted);
  --roam-dark-text-primary: var(--roam-ref-palette-dark-text-primary);
  --roam-dark-text-soft: var(--roam-ref-palette-dark-text-soft);
  --roam-dark-text-whisper: var(--roam-ref-palette-dark-text-whisper);
  --roam-destruct: var(--roam-ref-palette-error);
  --roam-destruct-active: var(--roam-ref-palette-error-active);
  --roam-divider-height: var(--roam-comp-divider-height);
  --roam-divider-width: var(--roam-comp-divider-width);
  --roam-filter-active-bg: var(--roam-ref-palette-filter-active-bg);
  --roam-filter-active-text: var(--roam-ref-palette-filter-active-text);
  --roam-filter-inactive-bg: var(--roam-ref-palette-filter-inactive-bg);
  --roam-filter-inactive-text: var(--roam-ref-palette-filter-inactive-text);
  --roam-font-body: var(--roam-ref-typeface-body);
  --roam-font-display: var(--roam-ref-typeface-display);
  --roam-footer-body: var(--roam-comp-footer-color-body);
  --roam-footer-copyright: var(--roam-comp-footer-color-copyright);
  --roam-footer-disclaimer: var(--roam-comp-footer-color-disclaimer);
  --roam-footer-heading: var(--roam-comp-footer-color-heading);
  --roam-footer-link: var(--roam-comp-footer-color-link);
  --roam-footer-muted: var(--roam-comp-footer-color-muted);
  --roam-footer-social-bg: var(--roam-comp-footer-social-bg);

  --roam-footer-social-icon: var(--roam-comp-footer-social-icon);
  --roam-forest: var(--roam-ref-palette-forest);
  --roam-forest-active: var(--roam-ref-palette-forest-active);
  --roam-forest-light: var(--roam-ref-palette-forest-light);
  --roam-forest-soft: var(--roam-ref-palette-forest-soft);
  --roam-glow-gold: var(--roam-ref-glow-accent);
  --roam-glow-teal: var(--roam-ref-glow-primary);
  --roam-gold: var(--roam-ref-palette-gold);
  --roam-gold-active: var(--roam-ref-palette-gold-active);
  --roam-gradient-2color: var(--roam-ref-gradient-brand-simple);
  --roam-gradient-3color: var(--roam-ref-gradient-brand);
  --roam-gradient-accent-bar: var(--roam-ref-gradient-accent-bar);
  --roam-guide-body: var(--roam-ref-typescale-14);
  --roam-guide-btn: var(--roam-ref-typescale-11);
  --roam-guide-card-title: var(--roam-ref-typescale-20);
  --roam-guide-detail: var(--roam-ref-typescale-12);
  --roam-guide-footer-body: var(--roam-ref-typescale-13);
  --roam-guide-hero: var(--roam-ref-typescale-40);
  --roam-guide-label: var(--roam-ref-typescale-10);
  --roam-guide-section: var(--roam-ref-typescale-24);
  --roam-guide-section-print: var(--roam-ref-typescale-22);
  --roam-header-height: var(--roam-comp-header-height);
  --roam-hero-py: var(--roam-sys-spacing-hero-y);
  --roam-icon-box: var(--roam-comp-icon-box-size);
  --roam-icon-box-border: var(--roam-comp-icon-box-border-width);
  --roam-icon-box-border-gold: var(--roam-comp-icon-box-border-accent);
  --roam-icon-box-border-sage: var(--roam-comp-icon-box-border-tertiary);
  --roam-icon-box-border-teal: var(--roam-comp-icon-box-border-primary);
  --roam-leading-body: var(--roam-ref-leading-body);
  --roam-leading-card: var(--roam-ref-leading-card);
  --roam-leading-heading: var(--roam-ref-leading-heading);
  --roam-leading-none: var(--roam-ref-leading-none);
  --roam-leading-snug: var(--roam-ref-leading-snug);
  --roam-leading-tight: var(--roam-ref-leading-tight);
  --roam-light-border: var(--roam-ref-palette-light-border);
  --roam-light-text-body: var(--roam-ref-palette-light-text-body);
  --roam-light-text-ghost: var(--roam-ref-palette-light-text-ghost);
  --roam-light-text-muted: var(--roam-ref-palette-light-text-muted);
  --roam-light-text-primary: var(--roam-ref-palette-light-text-primary);
  --roam-logo-footer: var(--roam-comp-footer-logo-size);
  --roam-logo-hero: var(--roam-comp-header-logo-size);
  --roam-mark-bottom: var(--roam-ref-palette-mark-bottom);
  --roam-mark-mid: var(--roam-ref-palette-mark-mid);
  --roam-mark-top: var(--roam-ref-palette-mark-top);
  --roam-max-width: var(--roam-ref-layout-1280);
  --roam-nav-inactive-icon: var(--roam-ref-palette-nav-inactive-icon);
  --roam-photo-filter: var(--roam-ref-photo-filter);
  --roam-photo-overlay: var(--roam-ref-photo-overlay);
  --roam-photo-tint: var(--roam-ref-photo-tint);
  --roam-photo-tint-blend: var(--roam-ref-photo-tint-blend);
  --roam-photo-tint-color: var(--roam-ref-photo-tint-color);
  --roam-radius-accent-bar: var(--roam-ref-shape-xs);
  --roam-radius-badge: var(--roam-ref-shape-xl);
  --roam-radius-card: var(--roam-ref-shape-xl);
  --roam-radius-filter: var(--roam-ref-shape-xl);
  --roam-radius-icon-box: var(--roam-ref-shape-md);
  --roam-radius-nav-icon: var(--roam-ref-shape-xl);
  --roam-radius-pill: var(--roam-ref-shape-full);
  --roam-radius-quote: var(--roam-ref-shape-sm);
  --roam-radius-row: var(--roam-ref-shape-lg);
  --roam-radius-social: var(--roam-ref-shape-xl);
  --roam-radius-tag: var(--roam-ref-shape-xl);
  --roam-sage: var(--roam-ref-palette-sage);
  --roam-sage-active: var(--roam-ref-palette-sage-active);
  --roam-section-header-mb: var(--roam-sys-spacing-section-header-mb);
  --roam-section-pb: var(--roam-sys-spacing-section-bottom);
  --roam-section-pt: var(--roam-sys-spacing-section-top);
  --roam-section-px: var(--roam-sys-spacing-page-x);
  --roam-section-py-md: var(--roam-sys-spacing-section-y-md);
  --roam-shadow-hover: var(--roam-ref-elevation-2);
  --roam-shadow-hover-lift: var(--roam-ref-elevation-lift);
  --roam-shadow-rest: var(--roam-ref-elevation-1);
  --roam-social-circle: var(--roam-comp-footer-social-size);
  --roam-star-empty: var(--roam-ref-palette-star-empty);
  --roam-star-filled: var(--roam-ref-palette-star-filled);
  --roam-teal: var(--roam-ref-palette-teal);
  --roam-teal-active: var(--roam-ref-palette-teal-active);
  --roam-text-badge: var(--roam-ref-typescale-10);
  --roam-text-badge-lg: var(--roam-ref-typescale-12);
  --roam-text-body-lg: var(--roam-ref-typescale-15);
  --roam-text-btn: var(--roam-ref-typescale-12);
  --roam-text-card-quote: var(--roam-ref-typescale-18);
  --roam-text-card-title: var(--roam-ref-typescale-24);
  --roam-text-eyebrow: var(--roam-ref-typescale-14);
  --roam-text-faint: var(--roam-ref-palette-text-faint);
  --roam-text-footer-body: var(--roam-ref-typescale-13);
  --roam-text-footer-head: var(--roam-ref-typescale-11);
  --roam-text-footer-link: var(--roam-ref-typescale-12);
  --roam-text-ghost: var(--roam-ref-palette-text-ghost);
  --roam-text-hero: var(--roam-ref-typescale-display);
  --roam-text-hero-stat: var(--roam-ref-typescale-32);
  --roam-text-label: var(--roam-ref-typescale-10);
  --roam-text-light: var(--roam-ref-palette-text-light);
  --roam-text-link: var(--roam-ref-typescale-13);
  --roam-text-mega: var(--roam-ref-typescale-80);
  --roam-text-micro: var(--roam-ref-typescale-9);
  --roam-text-muted: var(--roam-ref-palette-text-muted);
  --roam-text-nav: var(--roam-ref-typescale-14);
  --roam-text-primary: var(--roam-ref-palette-text-primary);
  --roam-text-secondary: var(--roam-ref-palette-text-secondary);
  --roam-text-section-title: var(--roam-ref-typescale-36);
  --roam-text-stat-number: var(--roam-ref-typescale-28);
  --roam-text-stat-subtitle: var(--roam-ref-typescale-14);
  --roam-text-stat-title: var(--roam-ref-typescale-28);
  --roam-text-stat-title-sm: var(--roam-ref-typescale-24);
  --roam-text-warm-muted: var(--roam-ref-palette-text-warm);
  --roam-tier-daytrip: var(--roam-ref-palette-tier-daytrip);
  --roam-tier-local: var(--roam-ref-palette-tier-local);
  --roam-tier-regional: var(--roam-ref-palette-tier-regional);
  --roam-topo-frequency: var(--roam-ref-topo-frequency);
  --roam-topo-octaves: var(--roam-ref-topo-octaves);
  --roam-topo-opacity-footer: var(--roam-ref-topo-opacity-footer);
  --roam-topo-opacity-hero: var(--roam-ref-topo-opacity-hero);
  --roam-topo-opacity-placeholder: var(--roam-ref-topo-opacity-placeholder);
  --roam-topo-seed: var(--roam-ref-topo-seed);
  --roam-tracking-badge: var(--roam-ref-tracking-md);
  --roam-tracking-btn: var(--roam-ref-tracking-md);
  --roam-tracking-category: var(--roam-ref-tracking-2xl);
  --roam-tracking-eyebrow: var(--roam-ref-tracking-lg);
  --roam-tracking-filter: var(--roam-ref-tracking-xs);
  --roam-tracking-footer: var(--roam-ref-tracking-xl);
  --roam-tracking-footer-h3: var(--roam-ref-tracking-xs-px);
  --roam-tracking-nav: var(--roam-ref-tracking-sm);
  --roam-tracking-section-label: var(--roam-ref-tracking-4xl);
  --roam-tracking-tier: var(--roam-ref-tracking-3xl);
  --roam-tracking-tight: var(--roam-ref-tracking-tight);
  --roam-transition-btn: var(--roam-ref-motion-emphasized-short);
  --roam-transition-card: var(--roam-ref-motion-emphasized-long);
  --roam-transition-nav: var(--roam-ref-motion-emphasized);
  --roam-transition-ui: var(--roam-ref-motion-standard);
  --roam-weight-bold: var(--roam-ref-weight-bold);
  --roam-weight-medium: var(--roam-ref-weight-medium);
  --roam-weight-normal: var(--roam-ref-weight-normal);
  --roam-weight-semibold: var(--roam-ref-weight-semibold);
  --roam-white: var(--roam-ref-palette-white);
  --roam-text-body: var(--roam-ref-typescale-14);
}

/* ═══════════════════════════════════════════════════════
   17. BUTTON SYSTEM
   6 colors × 2 styles × 4 sizes × 4 states × 2 icon variants
   ═══════════════════════════════════════════════════════ */

/* ── Base ── */

.roam-btn {
  display: inline-flex;
  border: none;
  background: transparent;
  padding: 0;
  cursor: pointer;
}

/* ── Sizes ── */

/* Sizing rules apply to direct <button> elements and wrapper > a children.
   Wrapper <div> with button classes stays unstyled — only the <a> inside
   gets sizing. This preserves the original Gutenberg wrapper pattern.
   Direct <button> elements get sizing via the button.X selector. */

/* .roam-btn-xl */
.roam-btn-xl > a,
button.roam-btn-xl {
  height: var(--roam-ref-spacing-56);
  font-size: var(--roam-ref-typescale-16);
  line-height: var(--roam-ref-spacing-24);
  padding: 0 var(--roam-ref-spacing-24);
}

/* .roam-btn-lg */
.roam-btn-lg > a,
button.roam-btn-lg {
  height: var(--roam-ref-spacing-48);
  font-size: var(--roam-ref-typescale-16);
  line-height: var(--roam-ref-spacing-24);
  padding: 0 var(--roam-ref-spacing-22);
}

/* .roam-btn-md */
.roam-btn-md > a,
button.roam-btn-md {
  height: var(--roam-ref-spacing-40);
  font-size: var(--roam-ref-typescale-14);
  line-height: var(--roam-ref-spacing-20);
  padding: 0 var(--roam-ref-spacing-20);
}

/* .roam-btn-xs */
.roam-btn-xs > a,
button.roam-btn-xs {
  height: var(--roam-ref-spacing-28);
  font-size: var(--roam-ref-typescale-11);
  line-height: var(--roam-ref-spacing-16);
  padding: 0 var(--roam-ref-spacing-12);
  gap: var(--roam-ref-spacing-4);
}
/* .roam-btn-sm */
.roam-btn-sm > a,
button.roam-btn-sm {
  height: var(--roam-ref-spacing-32);
  font-size: var(--roam-ref-typescale-12);
  line-height: var(--roam-ref-spacing-16);
  padding: 0 var(--roam-ref-spacing-16);
  gap: var(--roam-ref-spacing-6);
}

/* ── Icon sizing ── */

.roam-btn-xl .roam-btn-icon { width: var(--roam-ref-spacing-24); height: var(--roam-ref-spacing-24); flex-shrink: 0; }
.roam-btn-lg .roam-btn-icon { width: var(--roam-ref-spacing-20); height: var(--roam-ref-spacing-20); flex-shrink: 0; }
.roam-btn-md .roam-btn-icon { width: var(--roam-ref-spacing-18); height: var(--roam-ref-spacing-18); flex-shrink: 0; }
.roam-btn-sm .roam-btn-icon { width: var(--roam-ref-spacing-14); height: var(--roam-ref-spacing-14); flex-shrink: 0; }
.roam-btn-xs .roam-btn-icon { width: var(--roam-ref-spacing-12); height: var(--roam-ref-spacing-12); flex-shrink: 0; }

/* ── Spinner ── */

@keyframes roam-spin {
  to { transform: rotate(360deg); }
}

.roam-btn-spinner {
  width: var(--roam-ref-spacing-14);
  height: var(--roam-ref-spacing-14);
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  animation: roam-spin 0.6s linear infinite;
  flex-shrink: 0;
}

.roam-btn-sm .roam-btn-spinner {
  width: var(--roam-ref-spacing-12);
  height: var(--roam-ref-spacing-12);
}

/* ── Disabled (shared) ── */

.roam-btn-disabled,
.roam-btn:disabled {
  cursor: not-allowed;
  pointer-events: none;
}

/* ── Filled Gold ── */
/* ── Filled Gold ── */
.roam-btn-filled-gold {
  color: var(--roam-ref-palette-forest);
}
.roam-btn-filled-gold > a:hover,
.roam-btn-filled-gold > a:active,
button.roam-btn-filled-gold:hover,
button.roam-btn-filled-gold:active {
  background: var(--roam-ref-palette-gold-hover);
}
.roam-btn-filled-gold.roam-btn-disabled,
.roam-btn-filled-gold:disabled {
  background: var(--roam-ref-palette-gold-a30);
  color: var(--roam-ref-palette-forest-a50);
}

/* ── Filled Teal ── */
.roam-btn-filled-teal {
  color: var(--roam-ref-palette-forest);
}
.roam-btn-filled-teal > a:hover,
.roam-btn-filled-teal > a:active,
button.roam-btn-filled-teal:hover,
button.roam-btn-filled-teal:active {
  background: var(--roam-ref-palette-teal-active);
}
.roam-btn-filled-teal.roam-btn-disabled,
.roam-btn-filled-teal:disabled {
  background: var(--roam-ref-palette-teal-a30);
  color: var(--roam-ref-palette-forest-a50);
}

/* ── Filled Sage ── */
.roam-btn-filled-sage {
  color: var(--roam-ref-palette-forest);
}
.roam-btn-filled-sage > a:hover,
.roam-btn-filled-sage > a:active,
button.roam-btn-filled-sage:hover,
button.roam-btn-filled-sage:active {
  background: var(--roam-ref-palette-sage-active);
}
.roam-btn-filled-sage.roam-btn-disabled,
.roam-btn-filled-sage:disabled {
  background: var(--roam-ref-palette-sage-a30);
  color: var(--roam-ref-palette-forest-a50);
}

/* ── Filled Cream ── */
.roam-btn-filled-cream {
  color: var(--roam-ref-palette-forest);
}
.roam-btn-filled-cream > a:hover,
.roam-btn-filled-cream > a:active,
button.roam-btn-filled-cream:hover,
button.roam-btn-filled-cream:active {
  background: var(--roam-ref-palette-cream-active);
}
.roam-btn-filled-cream.roam-btn-disabled,
.roam-btn-filled-cream:disabled {
  background: var(--roam-ref-palette-cream-a30);
  color: var(--roam-ref-palette-forest-a50);
}

/* ── Filled Forest ── */
.roam-btn-filled-forest {
  color: var(--roam-ref-palette-cream);
}
.roam-btn-filled-forest > a:hover,
.roam-btn-filled-forest > a:active,
button.roam-btn-filled-forest:hover,
button.roam-btn-filled-forest:active {
  background: var(--roam-ref-palette-forest-active);
}
.roam-btn-filled-forest.roam-btn-disabled,
.roam-btn-filled-forest:disabled {
  background: var(--roam-ref-palette-forest-a30);
  color: var(--roam-ref-palette-cream-a40);
}

/* ── Filled Destructive ── */
.roam-btn-filled-destruct {
  color: var(--roam-ref-palette-cream);
}
.roam-btn-filled-destruct > a:hover,
.roam-btn-filled-destruct > a:active,
button.roam-btn-filled-destruct:hover,
button.roam-btn-filled-destruct:active {
  background: var(--roam-ref-palette-error-active);
}
.roam-btn-filled-destruct.roam-btn-disabled,
.roam-btn-filled-destruct:disabled {
  background: var(--roam-ref-palette-error-a30);
  color: var(--roam-ref-palette-cream-a40);
}

/* ── Ghost Gold ── */
.roam-btn-ghost-gold {
  color: var(--roam-ref-palette-gold);
  background: transparent;
}
.roam-btn-ghost-gold > a:hover,
.roam-btn-ghost-gold > a:active,
button.roam-btn-ghost-gold:hover,
button.roam-btn-ghost-gold:active {
  background: var(--roam-ref-palette-gold);
  color: var(--roam-ref-palette-forest);
}
.roam-btn-ghost-gold.roam-btn-disabled,
.roam-btn-ghost-gold:disabled {
  color: var(--roam-ref-palette-gold-a30);
  background: transparent;
  border-color: var(--roam-ref-palette-gold-a15);
}

/* ── Ghost Teal ── */
.roam-btn-ghost-teal {
  color: var(--roam-ref-palette-teal);
  background: transparent;
}
.roam-btn-ghost-teal > a:hover,
.roam-btn-ghost-teal > a:active,
button.roam-btn-ghost-teal:hover,
button.roam-btn-ghost-teal:active {
  background: var(--roam-ref-palette-teal);
  color: var(--roam-ref-palette-forest);
}
.roam-btn-ghost-teal.roam-btn-disabled,
.roam-btn-ghost-teal:disabled {
  color: var(--roam-ref-palette-teal-a30);
  background: transparent;
  border-color: var(--roam-ref-palette-teal-a15);
}

/* ── Ghost Grey (dark surface) ── */
.roam-btn-ghost-grey {
  color: var(--roam-ref-palette-text-muted);
  background: transparent;
}
.roam-btn-ghost-grey > a,
button.roam-btn-ghost-grey {
  background: rgba(250, 246, 241, 0.06);
  color: var(--roam-ref-palette-text-muted);
  border: 1px solid var(--roam-ref-palette-dark-border-visible);
}
.roam-btn-ghost-grey > a:hover,
.roam-btn-ghost-grey > a:active,
button.roam-btn-ghost-grey:hover,
button.roam-btn-ghost-grey:active {
  background: rgba(250, 246, 241, 0.12);
  color: var(--roam-ref-palette-dark-text-primary);
  border-color: var(--roam-ref-palette-dark-border-visible);
}

/* ── Ghost Sage ── */
.roam-btn-ghost-sage {
  color: var(--roam-ref-palette-sage);
  background: transparent;
}
.roam-btn-ghost-sage > a,
button.roam-btn-ghost-sage {
  background: transparent;
  color: var(--roam-ref-palette-sage);
  border: 1.5px solid var(--roam-ref-palette-sage-a40);
}
.roam-btn-ghost-sage > a:hover,
.roam-btn-ghost-sage > a:active,
button.roam-btn-ghost-sage:hover,
button.roam-btn-ghost-sage:active {
  background: var(--roam-ref-palette-sage);
  color: var(--roam-ref-palette-forest);
}
.roam-btn-ghost-sage.roam-btn-disabled,
.roam-btn-ghost-sage:disabled {
  color: var(--roam-ref-palette-sage-a30);
  background: transparent;
  border-color: var(--roam-ref-palette-sage-a15);
}

/* ── Ghost Cream ── */
.roam-btn-ghost-cream {
  color: var(--roam-ref-palette-cream);
  background: transparent;
}
.roam-btn-ghost-cream > a,
button.roam-btn-ghost-cream {
  background: transparent;
  color: var(--roam-ref-palette-cream);
  border: 1.5px solid var(--roam-ref-palette-cream-a40);
}
.roam-btn-ghost-cream > a:hover,
.roam-btn-ghost-cream > a:active,
button.roam-btn-ghost-cream:hover,
button.roam-btn-ghost-cream:active {
  background: var(--roam-ref-palette-cream);
  color: var(--roam-ref-palette-forest);
}
.roam-btn-ghost-cream.roam-btn-disabled,
.roam-btn-ghost-cream:disabled {
  color: var(--roam-ref-palette-cream-a20);
  background: transparent;
  border-color: var(--roam-ref-palette-cream-a15);
}

/* ── Ghost Forest ── */
.roam-btn-ghost-forest {
  color: var(--roam-ref-palette-forest);
  background: transparent;
}
.roam-btn-ghost-forest > a,
button.roam-btn-ghost-forest {
  background: transparent;
  color: var(--roam-ref-palette-forest);
  border: 1.5px solid var(--roam-ref-palette-forest-a40);
}
.roam-btn-ghost-forest > a:hover,
.roam-btn-ghost-forest > a:active,
button.roam-btn-ghost-forest:hover,
button.roam-btn-ghost-forest:active {
  background: var(--roam-ref-palette-forest);
  color: var(--roam-ref-palette-cream);
}
.roam-btn-ghost-forest.roam-btn-disabled,
.roam-btn-ghost-forest:disabled {
  color: var(--roam-ref-palette-forest-a30);
  background: transparent;
  border-color: var(--roam-ref-palette-forest-a15);
}

/* ── Ghost Destructive ── */
.roam-btn-ghost-destruct {
  color: var(--roam-ref-palette-error);
  background: transparent;
}
.roam-btn-ghost-destruct > a,
button.roam-btn-ghost-destruct {
  background: transparent;
  color: var(--roam-ref-palette-error);
  border: 1.5px solid var(--roam-ref-palette-error-a40);
}
.roam-btn-ghost-destruct > a:hover,
.roam-btn-ghost-destruct > a:active,
button.roam-btn-ghost-destruct:hover,
button.roam-btn-ghost-destruct:active {
  background: var(--roam-ref-palette-error);
  color: var(--roam-ref-palette-cream);
}
.roam-btn-ghost-destruct.roam-btn-disabled,
.roam-btn-ghost-destruct:disabled {
  color: var(--roam-ref-palette-error-a30);
  background: transparent;
  border-color: var(--roam-ref-palette-error-a15);
}

/* ═══════════════════════════════════════════════════════
   RESPONSIVE OVERRIDES (outside @layer for full specificity)
   ═══════════════════════════════════════════════════════ */

/* ── Button: sm on mobile, lg on tablet+ ── */


/* ── Responsive button modifiers ── */
/* MD on mobile → LG at tablet (768px) */
@media (min-width: 768px) {
  .roam-btn-lg-tablet > a {
    height: var(--roam-ref-spacing-48);
    font-size: var(--roam-ref-typescale-16);
    line-height: var(--roam-ref-spacing-24);
    padding: 0 var(--roam-ref-spacing-22);
  }
  
  
}

/* MD on mobile+tablet → LG at desktop (1024px) */
@media (min-width: 1024px) {
  .roam-btn-lg-desktop > a {
    height: var(--roam-ref-spacing-48);
    font-size: var(--roam-ref-typescale-16);
    line-height: var(--roam-ref-spacing-24);
    padding: 0 var(--roam-ref-spacing-22);
  }
  
  
}

/* SM on mobile, LG on desktop — sizing on > a only */
.roam-btn-sm-lg > a {
  height: var(--roam-ref-spacing-32);
  font-size: var(--roam-ref-typescale-12);
  line-height: var(--roam-ref-spacing-16);
  padding: 0 var(--roam-ref-spacing-16);
  gap: var(--roam-ref-spacing-6);
}

@media (min-width: 768px) {
  .roam-btn-sm-lg > a {
    height: var(--roam-ref-spacing-48);
    font-size: var(--roam-ref-typescale-16);
    line-height: var(--roam-ref-spacing-24);
    padding: 0 var(--roam-ref-spacing-22);
    gap: var(--roam-ref-spacing-8);
  }
}

/* ═══════════════════════════════════════════════════════
   18. FILTER SYSTEM
   Two-layer chip filters for category + sub-filter UI
   ═══════════════════════════════════════════════════════ */

/* ── Layer 1 Base (48px, 24px radius) ── */

.roam-filter-l1 {
  display: inline-flex;
  align-items: center;
  gap: var(--roam-ref-spacing-8);
  height: var(--roam-ref-spacing-48);
  border-radius: var(--roam-ref-spacing-24);
  font-family: var(--roam-ref-typeface-body);
  font-size: var(--roam-ref-typescale-12);
  font-weight: var(--roam-ref-weight-semibold);
  letter-spacing: 0.05em;
  cursor: pointer;
  border: none;
  white-space: nowrap;
  transition: var(--roam-ref-motion-emphasized-short);
}

.roam-filter-l1 .roam-filter-icon {
  width: var(--roam-ref-spacing-18);
  height: var(--roam-ref-spacing-18);
  flex-shrink: 0;
}

/* Layer 1 Active — forest bg, white text, icon + text, stroke 2 */
.roam-filter-l1-active {
  background: var(--roam-ref-palette-forest);
  color: var(--roam-ref-palette-white);
  padding: 0 var(--roam-ref-spacing-20);
}

.roam-filter-l1-active .roam-filter-icon {
  stroke-width: 2;
}

/* Layer 1 Inactive — 6% forest bg, icon only, stroke 1.5 */
.roam-filter-l1-inactive {
  background: var(--roam-ref-palette-forest-a6);
  color: var(--roam-ref-palette-text-muted);
  padding: 0 var(--roam-ref-spacing-14);
}

.roam-filter-l1-inactive .roam-filter-icon {
  stroke-width: 1.5;
}

.roam-filter-l1-inactive:hover {
  background: var(--roam-ref-palette-forest-a12);
}

/* Layer 1 text visibility */
.roam-filter-l1-active .roam-filter-label {
  display: inline;
}

.roam-filter-l1-inactive .roam-filter-label {
  display: none;
}

/* ── Layer 2 Base (40px, 20px radius) ── */

.roam-filter-l2 {
  display: inline-flex;
  align-items: center;
  gap: var(--roam-ref-spacing-6);
  height: var(--roam-ref-spacing-40);
  border-radius: var(--roam-ref-shape-xl);
  font-family: var(--roam-ref-typeface-body);
  font-size: var(--roam-ref-typescale-11);
  font-weight: var(--roam-ref-weight-medium);
  letter-spacing: 0.04em;
  cursor: pointer;
  border: none;
  white-space: nowrap;
  transition: var(--roam-ref-motion-emphasized-short);
}

/* Layer 2 Active — forest bg, white text + count */
.roam-filter-l2-active {
  background: var(--roam-ref-palette-forest);
  color: var(--roam-ref-palette-white);
  padding: 0 var(--roam-ref-spacing-16);
}

/* Layer 2 Inactive — 6% forest bg, #999 text + count */
.roam-filter-l2-inactive {
  background: var(--roam-ref-palette-forest-a6);
  color: var(--roam-ref-palette-text-muted);
  padding: 0 var(--roam-ref-spacing-16);
}

.roam-filter-l2-inactive:hover {
  background: var(--roam-ref-palette-forest-a12);
}

/* ── Filter Count Badge ── */

.roam-filter-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--roam-ref-spacing-20);
  height: var(--roam-ref-spacing-20);
  border-radius: var(--roam-ref-shape-md);
  font-size: var(--roam-ref-typescale-10);
  font-weight: var(--roam-ref-weight-semibold);
  padding: 0 var(--roam-ref-spacing-6);
}

.roam-filter-l2-active .roam-filter-count {
  background: var(--roam-ref-palette-white-a20);
  color: var(--roam-ref-palette-white);
}

.roam-filter-l2-inactive .roam-filter-count {
  background: var(--roam-ref-palette-forest-a8);
  color: var(--roam-ref-palette-text-muted);
}

/* ═══════════════════════════════════════════════════════
   19. ICON SYSTEM
   Standardized sizing, stroke, and fill by context.
   Icons are Lucide React components; these classes
   control their visual treatment.

   ICON REGISTRY:
   ─────────────────────────────────────────────────────
   Category Nav (Layer 1 filters):
     Waves         Roam the Waters
     TreePine      Roam the Land
     Snowflake     Roam the Snow
     UtensilsCrossed  Roam the Table
     ShoppingBag   Roam the Shops
     Landmark      Roam the Town
     Sparkles      Roam with Ease

   Card Detail Row:
     MapPin        Address (13px)
     Phone         Phone (13px)
     Clock         Hours (13px)

   Card Indicators:
     MapPin        Tier/distance (12px)
     Star          Rating stars (13px, gold fill or none)
     Heart         "What We Love" (11px, filled teal)

   Card Decorative:
     FileText      Listing Gap card (20px)
     DollarSign    Pricing Gap card (20px)
     Star          Consistency Gap card (20px)
     TrendingUp    Revenue Optimization (20px)
     Search        Listing Optimization (20px)
     MessageSquare Guest Experience (20px)
     Wrench        Property Care (20px)
     Shield        Regulatory Compliance (20px)
     Workflow      How It Works nav card (20px)
     Layers        ROAM Method nav card (20px)
     BarChart3     Results nav card (20px)
     MessageCircle Guest Experience hub card (20px)
     Rocket        Onboarding hub card (20px)
     BookOpen      Financial Reporting hub card (20px)
     ShieldCheck   Compliance hub card (20px)
     Layers        White-Label / Operations (20px)

   Decorative:
     Quote         Guest quote small (18px, gold 0.3 opacity)
     Quote         Testimonial card (40px, gold 0.3 opacity)
     Camera        Fallback placeholder (48px)

   Button Icons:
     ArrowRight    CTA buttons (14px)
     ExternalLink  Website button (12px)
     Navigation    Directions button (12px)

   Footer:
     Instagram     Social link (16px)
     Facebook      Social link (16px)
     Twitter       Social link (16px)
     Mail          Contact email (13px)
     Globe         Contact website (13px)
     Phone         Contact phone (13px)

   Navigation Chrome:
     Hamburger     Mobile menu open (20px + 14px bars)
     Close (X)     Mobile menu close (20px + 20px bars, rotated)
     ChevronDown   Dropdown indicator (12px)
     ChevronsDown  Expand more indicator (12px)
     ChevronDownCircle  Enclosed dropdown (12px)
   ─────────────────────────────────────────────────────
   ═══════════════════════════════════════════════════════ */

.roam-tier-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--roam-ref-spacing-6);
  padding: var(--roam-ref-spacing-3) var(--roam-ref-spacing-10);
  border-radius: var(--roam-ref-shape-full);
  font-family: var(--roam-ref-typeface-body);
  font-size: var(--roam-ref-typescale-10);
  font-weight: var(--roam-ref-weight-semibold);
  text-transform: uppercase;
  letter-spacing: var(--roam-ref-tracking-3xl);
}

.roam-tier-badge-dot {
  width: var(--roam-ref-spacing-5);
  height: var(--roam-ref-spacing-5);
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
}

.roam-tier-badge-intelligence {
  color: var(--roam-ref-palette-teal);
  background: var(--roam-ref-palette-teal-a13);
}

.roam-tier-badge-stakeholder {
  color: var(--roam-ref-palette-gold);
  background: var(--roam-ref-palette-gold-a13);
}

.roam-tier-badge-operations {
  color: var(--roam-ref-palette-sage);
  background: var(--roam-ref-palette-sage-a13);
}

.roam-tier-badge-content {
  color: var(--roam-ref-palette-cream);
  background: var(--roam-ref-palette-cream-a8);
}

/* ── Tier accent bar (vertical, used in product detail cards) ── */

.roam-tier-bar-intelligence {
  background: linear-gradient(to bottom, var(--roam-ref-palette-teal), var(--roam-ref-palette-sage));
}

.roam-tier-bar-stakeholder {
  background: linear-gradient(to bottom, var(--roam-ref-palette-gold), var(--roam-ref-palette-sage));
}

.roam-tier-bar-operations {
  background: linear-gradient(to bottom, var(--roam-ref-palette-sage), var(--roam-ref-palette-teal));
}

.roam-tier-bar-content {
  background: linear-gradient(to bottom, var(--roam-ref-palette-cream), var(--roam-ref-palette-gold));
}

/* ── Tier glow (box-shadow for hover/emphasis states) ── */

.roam-tier-glow-intelligence {
  box-shadow: 0 0 12px var(--roam-ref-palette-teal-a25);
}

.roam-tier-glow-stakeholder {
  box-shadow: 0 0 12px var(--roam-ref-palette-gold-a25);
}

.roam-tier-glow-operations {
  box-shadow: 0 0 12px var(--roam-ref-palette-sage-a25);
}

.roam-tier-glow-content {
  box-shadow: 0 0 12px var(--roam-ref-palette-cream-a15);
}

/* ═══════════════════════════════════════════════════════
   22. ECOSYSTEM PRODUCT ICON REGISTRY
   ─────────────────────────────────────────────────────
   Product        Icon Description              Tier
   ─────────────────────────────────────────────────────
   Signal         Concentric rings + crosshairs Intelligence
   Echo           Layered waves                 Intelligence
   Beacon         Radiating sun burst           Intelligence
   Thread         Chat bubble                   Intelligence
   Stays          House with door               Stakeholder
   Summit         Mountain peak                 Stakeholder
   Trailhead      Open book                     Stakeholder
   Camp           Bunk shelving / staging       Operations
   Shield         Shield with checkmark         Operations
   Journal        Pen writing                   Content
   Field Notes    Open book spread with lines   Content
   ─────────────────────────────────────────────────────
   Note: Signal icon has a filled center dot.
   Apply via: <circle fill="currentColor" stroke="none"/>
   inside the SVG alongside the .roam-icon-product class.
   ═══════════════════════════════════════════════════════ */

/* ── Category Nav Icons (17px, stroke varies by state) ── */

.roam-icon-nav {
  width: 17px;
  height: var(--roam-ref-spacing-16);
  flex-shrink: 0;
  fill: none;
  stroke: currentColor;
}

.roam-filter-l1-active .roam-icon-nav {
  stroke-width: 2;
}

.roam-filter-l1-inactive .roam-icon-nav {
  stroke-width: 1.5;
}

/* ── Card Detail Row Icons (13px, stroke 1.5) ── */

.roam-icon-detail {
  width: var(--roam-ref-spacing-14);
  height: var(--roam-ref-spacing-14);
  flex-shrink: 0;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
}

/* ── Tier/Distance Indicator (12px, stroke 2) ── */

.roam-icon-tier {
  width: var(--roam-ref-spacing-12);
  height: var(--roam-ref-spacing-12);
  flex-shrink: 0;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
}

/* ── Rating Stars (13px, stroke 1.5) ── */

.roam-icon-star {
  width: var(--roam-ref-spacing-14);
  height: var(--roam-ref-spacing-14);
  flex-shrink: 0;
  stroke: var(--roam-ref-palette-border-tag);
  stroke-width: 1.5;
  stroke-linejoin: round;
  fill: none;
}

.roam-icon-star.is-filled {
  fill: var(--roam-ref-palette-gold);
  stroke: var(--roam-ref-palette-gold);
}

.roam-icon-star-filled {
  fill: var(--roam-ref-palette-gold);
  stroke: var(--roam-ref-palette-gold);
}

.roam-icon-star-empty {
  fill: none;
}

/* ── Heart / "What We Love" (11px, filled teal, no stroke) ── */

.roam-icon-heart {
  width: var(--roam-ref-spacing-12);
  height: var(--roam-ref-spacing-12);
  flex-shrink: 0;
  fill: var(--roam-ref-palette-teal);
  stroke: none;
}

/* ── Quote Decoration (18px, gold 0.3 opacity) ── */

.roam-icon-quote {
  width: var(--roam-ref-spacing-18);
  height: var(--roam-ref-spacing-18);
  flex-shrink: 0;
  fill: none;
  stroke: var(--roam-ref-palette-gold);
  stroke-width: 1.5;
  opacity: 0.3;
}

/* ── Quote Card Icon (40px, gold 0.3 opacity) ── */

.roam-icon-quote-card {
  width: var(--roam-ref-spacing-40);
  height: var(--roam-ref-spacing-40);
  flex-shrink: 0;
  fill: none;
  stroke: var(--roam-ref-palette-gold);
  stroke-width: 1;
  opacity: 0.3;
}

/* ── Fallback Placeholder (48px, stroke 1) ── */

.roam-icon-placeholder {
  width: var(--roam-ref-spacing-48);
  height: var(--roam-ref-spacing-48);
  flex-shrink: 0;
  fill: none;
  stroke: currentColor;
  stroke-width: 1;
  opacity: 0.4;
}

/* ── CTA Button Icon (14px, default stroke) ── */

.roam-icon-cta {
  width: var(--roam-ref-spacing-14);
  height: var(--roam-ref-spacing-14);
  flex-shrink: 0;
  fill: none;
  stroke: currentColor;
}

/* ── Card Decorative Icon (20px, stroke 1.5) ── */

.roam-icon-card {
  width: var(--roam-ref-spacing-20);
  height: var(--roam-ref-spacing-20);
  flex-shrink: 0;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
}

/* ── Inline Button Icon (12px, default stroke) ── */

.roam-icon-inline {
  width: var(--roam-ref-spacing-12);
  height: var(--roam-ref-spacing-12);
  flex-shrink: 0;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
}

/* ── Footer Social Icons (16px, stroke 1.5) ── */

.roam-icon-social {
  width: var(--roam-ref-spacing-16);
  height: var(--roam-ref-spacing-16);
  flex-shrink: 0;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
}
/* Filled variant — brand logos that render as solid shapes (e.g. X logo). */
.roam-icon-social--filled {
  fill: currentColor;
  stroke: none;
}

/* ── Footer Contact Icons (13px, stroke 1.5) ── */

.roam-icon-contact {
  width: var(--roam-ref-spacing-14);
  height: var(--roam-ref-spacing-14);
  flex-shrink: 0;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
}

/* ── Hamburger Menu (asymmetric bars) ── */

.roam-hamburger-bar {
  height: var(--roam-ref-spacing-2);
  background: var(--roam-ref-palette-cream);
  border-radius: var(--roam-ref-spacing-1);
  transition: var(--roam-ref-motion-standard);
}

.roam-hamburger-bar-long {
  width: var(--roam-ref-spacing-20);
}

.roam-hamburger-bar-short {
  width: var(--roam-ref-spacing-14);
  height: var(--roam-ref-spacing-1);
}

/* Close state — both bars 20px, rotated to form X */
.roam-hamburger-close .roam-hamburger-bar {
  width: var(--roam-ref-spacing-20);
}

.roam-hamburger-close .roam-hamburger-bar:first-child {
  transform: rotate(45deg) translateY(4px);
}

.roam-hamburger-close .roam-hamburger-bar:last-child {
  transform: rotate(-45deg) translateY(-4px);
}

/* ── Dropdown Chevrons (12px, stroke 2) ── */

.roam-icon-chevron {
  width: var(--roam-ref-spacing-16);
  height: var(--roam-ref-spacing-16);
  flex-shrink: 0;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: var(--roam-ref-motion-standard);
}

.roam-icon-chevron-open {
  transform: rotate(180deg);
}

/* ── Status Beacon (teal dot with glow) ── */

.roam-beacon {
  width: var(--roam-ref-spacing-6);
  height: var(--roam-ref-spacing-6);
  border-radius: 50%;
  background: var(--roam-ref-palette-teal);
  box-shadow: 0 0 8px 2px var(--roam-ref-palette-teal-a60), 0 0 16px 4px var(--roam-ref-palette-teal-a30);
  flex-shrink: 0;
}

/* ── Badge Pill (with beacon — tighter left padding) ── */

.roam-badge-pill {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: var(--roam-ref-spacing-16);
  padding: var(--roam-ref-spacing-8) var(--roam-ref-spacing-20) var(--roam-ref-spacing-8) var(--roam-ref-spacing-14);
  border: 1px solid var(--roam-ref-palette-dark-border-teal);
  background: var(--roam-comp-stat-badge-bg);
  border-radius: var(--roam-ref-shape-full);
}

.roam-badge-pill-text {
  font-family: var(--roam-ref-typeface-body);
  font-size: var(--roam-ref-typescale-12);
  font-weight: var(--roam-ref-weight-bold);
  letter-spacing: var(--roam-ref-tracking-lg);
  text-transform: uppercase;
  color: var(--roam-ref-palette-gold);
}

/* ── Responsive Section Subtitle (36px desktop, 24px mobile) ── */

.roam-title-section-sub {
  font-size: var(--roam-ref-typescale-24);
}

@media (min-width: 768px) {
  .roam-title-section-sub {
    font-size: var(--roam-ref-typescale-36);
  }
}

/* ── Responsive Stat Title (28px desktop, 22px tablet) ── */

.roam-title-stat {
  font-family: var(--roam-ref-typeface-display);
  font-size: var(--roam-ref-typescale-28);
  line-height: var(--roam-ref-leading-none);
}

@media (min-width: 768px) and (max-width: 1024px) {
  .roam-title-stat {
    font-size: var(--roam-ref-typescale-22);
  }
}

/* ── Eyebrow / Overline Labels ──
 * Small uppercase labels that sit above section headings and on stat cards.
 * Extracted in v2.1.459 from repeated inline styles across 15+ pattern files.
 * See also --roam-ref-tracking-lg and --roam-ref-typescale-*.
 */

.roam-eyebrow {
  color: var(--roam-ref-palette-teal);
  font-family: var(--roam-ref-typeface-body);
  font-size: var(--roam-ref-typescale-14);
  letter-spacing: var(--roam-ref-tracking-lg);
  margin-bottom: var(--roam-ref-spacing-12);
  text-transform: uppercase;
}

.roam-label-xs-upper {
  color: var(--roam-ref-palette-dark-text-whisper);
  font-family: var(--roam-ref-typeface-body);
  font-size: var(--roam-ref-typescale-9);
  margin-bottom: var(--roam-ref-spacing-4);
  text-transform: uppercase;
}

.roam-label-sm-upper {
  color: var(--roam-ref-palette-dark-text-faint);
  font-family: var(--roam-ref-typeface-body);
  font-size: var(--roam-ref-typescale-10);
  letter-spacing: var(--roam-ref-tracking-lg);
  text-transform: uppercase;
}

/* ── Gradient Divider — 1px brand gradient horizontal rule ──
 * Used as a subtle section divider. 16px bottom spacing built in.
 */

.roam-divider-gradient {
  background: var(--roam-ref-gradient-brand);
  border-radius: var(--roam-ref-shape-xs);
  height: 1px;
  margin-bottom: var(--roam-ref-spacing-16);
}

/* ═══════════════════════════════════════════════════════
   ANIMATIONS
   ═══════════════════════════════════════════════════════ */

@keyframes fadeSlideUp {
  from { opacity: 0; transform: translateY(24px); }
  to { opacity: 1; transform: translateY(0); }
}

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

/* ═══════════════════════════════════════════════════════
   BASE STYLES
   ═══════════════════════════════════════════════════════ */

/* ── Base Resets ── */

* {
  border-color: transparent;
  outline-color: transparent;
}

html {
  overflow-x: hidden;
}

body {
  margin: 0;
  padding: 0;
  background-color: var(--roam-ref-palette-forest);
  color: var(--roam-ref-palette-cream);
  font-family: var(--roam-ref-typeface-body);
  font-size: var(--roam-ref-typescale-16);
  overflow-x: hidden;
}

a {
  color: var(--roam-ref-palette-teal);
  text-decoration: none;
  transition: var(--roam-ref-motion-standard);
}

a:hover {
  color: var(--roam-ref-palette-gold);
}

/* Base heading styles (previously from theme.json global-styles) */
h1, h2, h3, h4, h5, h6 {
  color: var(--roam-ref-palette-cream);
  font-family: var(--roam-ref-typeface-display);
  font-weight: var(--roam-ref-weight-normal, 400);
  margin-top: 0;
  margin-bottom: 0;
}
p {
  margin-top: 0;
  margin-bottom: 0;
}

/* WP button container layout (replaces dequeued WP button container CSS) */
.roam-btn-group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--roam-ref-spacing-8);
}


/* Fix white dropdown options on dark backgrounds */
select option {
  background-color: var(--roam-ref-palette-forest);
  color: var(--roam-ref-palette-cream);
}
/* ═══════════════════════════════════════════════════════
   UTILITY CLASSES
   Compiled from site markup. Organized by function.
   ═══════════════════════════════════════════════════════ */

/* ── Layout (position, display, flexbox, grid) ───────── */

.fixed{
  position: fixed;
}

/* ═══════════════════════════════════════════════════════
   LAYOUT UTILITIES
   Replaces Tailwind utility classes. Only the classes
   actually used in PHP templates are defined here.
   ═══════════════════════════════════════════════════════ */

/* ── Box Sizing (replaces Tailwind global reset) ── */
*, *::before, *::after { box-sizing: border-box; }

/* ── Display ── */
.block { display: block; }
.hidden { display: none; }
.inline-block { display: inline-block; }

/* ── Flexbox ── */
.flex { display: flex; }
.inline-flex { display: inline-flex; }
.flex-row { flex-direction: row; }
.flex-col { flex-direction: column; }
.flex-wrap { flex-wrap: wrap; }
.flex-1 { flex: 1 1 0%; }
.flex-grow { flex-grow: 1; }
.flex-shrink-0 { flex-shrink: 0; }
.roam-flex-col-coupled { display: flex; flex-direction: column; gap: var(--roam-sys-flow-coupled); }
.items-center { align-items: center; }
.items-start { align-items: start; }
.items-stretch { align-items: stretch; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }

/* ── Grid ── */
.grid { display: grid; }
.grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
.grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* ── Gap ── */
.gap-0 { gap: var(--roam-ref-spacing-0); }
.gap-2 { gap: var(--roam-ref-spacing-8); }
.gap-2\.5 { gap: var(--roam-ref-spacing-16); }
.gap-3 { gap: var(--roam-ref-spacing-12); }
.gap-3\.5 { gap: var(--roam-ref-spacing-14); }
.gap-4 { gap: var(--roam-ref-spacing-16); }
.gap-6 { gap: var(--roam-ref-spacing-24); }
.gap-8 { gap: var(--roam-ref-spacing-32); }
.gap-12 { gap: var(--roam-ref-spacing-48); }

/* ── Spacing: Padding ── */
.py-5 { padding-top: var(--roam-ref-spacing-20); padding-bottom: var(--roam-ref-spacing-20); }
.pr-3 { padding-right: var(--roam-ref-spacing-12); }
.pt-5 { padding-top: var(--roam-ref-spacing-20); }
.pt-10 { padding-top: var(--roam-ref-spacing-40); }
.pt-16 { padding-top: var(--roam-ref-spacing-64); }
.pb-8 { padding-bottom: var(--roam-ref-spacing-32); }

/* ── Spacing: Margin ── */
.mt-5 { margin-top: var(--roam-ref-spacing-20); }
.mb-3 { margin-bottom: var(--roam-ref-spacing-12); }
.mb-12 { margin-bottom: var(--roam-ref-spacing-48); }
.mx-auto { margin-left: auto; margin-right: auto; }

/* ── Section Header Gap — spacing below section eyebrow/title block ── */
.roam-section-header-gap { margin-bottom: var(--roam-sys-spacing-section-header-mb); }

/* ── Container-X — horizontal page padding (left + right) ──
 * Typically paired with .max-w-7xl .mx-auto for centered page content.
 */
.roam-container-x {
  padding-left: var(--roam-sys-spacing-page-x);
  padding-right: var(--roam-sys-spacing-page-x);
}

/* ── Link Reset — removes default anchor underline ──
 * Used on anchor elements inside buttons, cards, and nav items.
 */
.roam-link-reset { text-decoration: none; }

/* ── Sizing ── */
.w-full { width: 100%; }
.min-w-0 { min-width: 0; }
.max-w-3xl { max-width: var(--roam-ref-layout-768); }
.max-w-4xl { max-width: var(--roam-ref-layout-768); }
.max-w-7xl { max-width: var(--roam-ref-layout-1280); }

/* ── Positioning ── */
.relative { position: relative; }
.absolute { position: absolute; }
.inset-0 { inset: 0; }
.z-10 { z-index: 10; }

/* ── Typography ── */
.text-center { text-align: center; }
.text-left { text-align: left; }

/* ── Overflow ── */
.overflow-hidden { overflow: hidden; }
.pointer-events-none { pointer-events: none; }

/* ── Responsive: sm (min-width: 768px) ── */
@media (min-width: 768px) {
  .sm\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sm\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .sm\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .sm\:flex-row { flex-direction: row; }
  .sm\:text-left { text-align: left; }
  .sm\:col-span-2 { grid-column: span 2 / span 2; }
}

/* ── Responsive: lg (min-width: 1024px) ── */
@media (min-width: 1024px) {
  .lg\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .lg\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .lg\:flex-row { flex-direction: row; }
  .lg\:w-72 { width: var(--roam-ref-layout-288); }
  .lg\:col-span-3 { grid-column: span 3 / span 3; }
}

/* Fix 2: Sidebar card CTA containment */
.roam-sidebar-card {
  overflow: hidden;
}

.roam-sidebar-card .roam-btn {
  box-sizing: border-box;
  max-width: 100%;
}

/* ═══════════════════════════════════════════════════════
   NAVIGATION — CSS-only dropdowns, no JS
   Desktop: hover/focus-within reveals sub-menu
   Mobile: sub-menus visible when parent has :focus-within
   ═══════════════════════════════════════════════════════ */

/* Desktop nav list */
.roam-nav-list {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--roam-ref-spacing-2);
  list-style: none;
  padding: 0;
  margin: 0;
}

/* Top-level nav item */
.roam-nav-item {
  position: relative;
  list-style: none;
}

.roam-nav-item > a:hover {
  color: var(--roam-ref-palette-teal);
}

/* Dropdown panel — hidden by default */
.roam-dropdown {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  min-width: var(--roam-comp-dropdown-min-width);
  background: var(--roam-ref-palette-forest-a98);
  border-left: 1px solid var(--roam-ref-palette-dark-border-medium);
  border-right: 1px solid var(--roam-ref-palette-dark-border-medium);
  border-bottom: 1px solid var(--roam-ref-palette-dark-border-medium);
  backdrop-filter: blur(var(--roam-ref-spacing-20));
  border-radius: 0 0 var(--roam-ref-shape-md) var(--roam-ref-shape-md);
  list-style: none;
  padding: var(--roam-ref-spacing-8) 0;
  margin: 0;
  z-index: 100;
}

/* CSS-only reveal — hover and focus-within (keyboard accessible) */
.roam-nav-item:hover > .roam-dropdown,
.roam-nav-item:focus-within > .roam-dropdown {
  display: block;
}

/* Dropdown items */
.roam-dropdown-item {
  list-style: none;
}

.roam-dd-link:hover,
.roam-dd-link:focus {
  color: var(--roam-ref-palette-cream);
  background: var(--roam-ref-palette-teal-a10);
}

/* ── Mobile nav ── */
.roam-mobile-nav-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.roam-mobile-nav-item {
  list-style: none;
  border-bottom: 1px solid var(--roam-ref-palette-cream-a5);
}

/* Mobile sub-menus — hidden by default, revealed on focus-within */
.roam-mobile-sub {
  display: none;
  list-style: none;
  padding: 0 0 var(--roam-ref-spacing-8) 0;
  margin: 0;
}

/* Submenu visibility controlled by JS toggle (.roam-mobile-sub-open) */

.roam-mobile-sub li {
  list-style: none;
}

/* ═══════════════════════════════════════════════════════════
   BLOCK EDITOR CLASS MAPPINGS
   Maps native WP block classes to the ROAM design system.
   Added v2.1.11 for block-based page content.
   ═══════════════════════════════════════════════════════════ */

/* ── Layout ── */
.roam-dark-section {
  background: var(--roam-ref-gradient-surface-hero);
  min-height: 100vh;
}
.roam-dark-section > div {
  max-width: var(--roam-ref-layout-1280);
  margin-left: auto;
  margin-right: auto;
}
.roam-section-header {
  margin-bottom: 0;
}
.roam-center-content {
  text-align: center;
}

/* ── Typography ── */
.roam-block-heading {
  font-family: var(--roam-ref-typeface-display);
  font-size: var(--roam-ref-typescale-24);
  color: var(--roam-ref-palette-dark-text-primary);
  line-height: var(--roam-ref-leading-heading);
  font-weight: var(--roam-ref-weight-normal);
  margin-bottom: 0;
}
@media (min-width: 768px) {
  .roam-block-heading {
    font-size: var(--roam-ref-typescale-36);
  }
}
.roam-block-heading em {
  color: var(--roam-ref-palette-gold);
  font-style: italic;
}
.roam-block-eyebrow {
  font-family: var(--roam-ref-typeface-body);
  font-size: var(--roam-ref-typescale-12);
  letter-spacing: var(--roam-ref-tracking-lg);
  text-transform: uppercase;
  color: var(--roam-ref-palette-teal);
  margin-bottom: 0;
  margin-bottom: 0;
}
@media (min-width: 768px) {
  .roam-block-eyebrow,
  .roam-block-eyebrow-gold,
  .roam-block-eyebrow-faint {
    font-size: var(--roam-ref-typescale-14);
  }
}
.roam-block-eyebrow-gold {
  font-family: var(--roam-ref-typeface-body);
  font-size: var(--roam-ref-typescale-12);
  letter-spacing: var(--roam-ref-tracking-lg);
  text-transform: uppercase;
  color: var(--roam-ref-palette-gold);
  margin-bottom: 0;
}
.roam-block-eyebrow-faint {
  font-family: var(--roam-ref-typeface-body);
  font-size: var(--roam-ref-typescale-12);
  letter-spacing: var(--roam-ref-tracking-lg);
  text-transform: uppercase;
  color: var(--roam-ref-palette-dark-text-faint);
  margin-bottom: 0;
}
.roam-body {
  font-family: var(--roam-ref-typeface-body);
  font-size: var(--roam-ref-typescale-16);
  color: var(--roam-ref-palette-dark-text-body);
  line-height: var(--roam-ref-leading-body);
  margin-top: 0;
  margin-bottom: 0;
}
.roam-card-body {
  font-family: var(--roam-ref-typeface-body);
  font-size: var(--roam-ref-typescale-16);
  color: var(--roam-ref-palette-dark-text-body);
  line-height: var(--roam-ref-leading-body);
  margin-top: 0;
  margin-bottom: 0;
}
.roam-block-body {
  font-family: var(--roam-ref-typeface-body);
  font-size: var(--roam-ref-typescale-16);
  color: var(--roam-ref-palette-dark-text-body);
  line-height: var(--roam-ref-leading-body);
  margin-top: 0;
  margin-bottom: 0;
}

.roam-body-lg {
  font-family: var(--roam-ref-typeface-body);
  font-size: var(--roam-ref-typescale-18);
  color: var(--roam-ref-palette-dark-text-body);
  line-height: var(--roam-ref-leading-body);
  max-width: var(--roam-ref-layout-640);
  margin-top: 0;
  margin-bottom: 0;
}
.roam-body-faint {
  font-family: var(--roam-ref-typeface-body);
  font-size: var(--roam-ref-typescale-16);
  color: var(--roam-ref-palette-dark-text-faint);
  line-height: var(--roam-ref-leading-body);
  margin-top: 0;
  margin-bottom: 0;
}
.roam-italic {
  font-style: italic;
}
.roam-card-title {
  font-family: var(--roam-ref-typeface-display);
  font-size: var(--roam-ref-typescale-20);
  color: var(--roam-ref-palette-dark-text-primary);
  line-height: var(--roam-ref-leading-card);
  margin-bottom: 0;
}
.roam-card-simple-title {
  font-family: var(--roam-ref-typeface-display);
  font-size: var(--roam-ref-typescale-20);
  color: var(--roam-ref-palette-dark-text-primary);
  line-height: var(--roam-ref-leading-card);
  margin-bottom: 0;
}
.roam-card-pill-title {
  font-family: var(--roam-ref-typeface-display);
  font-size: var(--roam-ref-typescale-20);
  color: var(--roam-ref-palette-dark-text-primary);
  line-height: var(--roam-ref-leading-card);
  margin-bottom: 0;
}
.roam-card-icon-title {
  font-family: var(--roam-ref-typeface-display);
  font-size: var(--roam-ref-typescale-20);
  color: var(--roam-ref-palette-dark-text-primary);
  line-height: var(--roam-ref-leading-card);
  margin-bottom: 0;
}
@media (min-width: 768px) {
  .roam-card-title {
    font-size: var(--roam-ref-typescale-24);
  }
}
@media (min-width: 768px) {
  .roam-card-simple-title {
    font-size: var(--roam-ref-typescale-24);
  }
}
@media (min-width: 768px) {
  .roam-card-pill-title {
    font-size: var(--roam-ref-typescale-24);
  }
}
.roam-card-quote-body {
  font-family: var(--roam-ref-typeface-display);
  font-size: var(--roam-ref-typescale-18);
  color: var(--roam-ref-palette-dark-text-primary);
  line-height: var(--roam-ref-leading-card);
  font-weight: var(--roam-ref-weight-semibold);
  margin-top: 0;
  margin-bottom: 0;
}
.roam-body-quote {
  font-family: var(--roam-ref-typeface-display);
  font-size: var(--roam-ref-typescale-18);
  color: var(--roam-ref-palette-dark-text-primary);
  line-height: var(--roam-ref-leading-card);
  font-weight: var(--roam-ref-weight-semibold);
  margin-top: 0;
  margin-bottom: 0;
}
/* Performance section — heading max-width */
.roam-hp-performance .roam-block-heading {
  max-width: var(--roam-ref-layout-720);
}
/* Performance section — tight spacing between quote and CTA */

/* Performance section — 2-column body text on desktop */
@media (min-width: 1024px) {
  .roam-hp-performance .roam-hp-performance-body {
    column-count: 2;
    column-gap: var(--roam-ref-spacing-32);
  }
}
/* Performance section — paragraph formatting */
.roam-hp-performance-body .roam-block-body {
  text-indent: 1.5em;
  margin-bottom: var(--roam-ref-spacing-12);
}
.roam-hp-performance-body .roam-block-body:first-child {
  text-indent: 0;
}
.roam-hp-performance .roam-body-quote {
  margin-bottom: 0;
}
.roam-hp-performance .roam-btn-group {
  margin-top: 0;
}


/* ── Navigation ── */
.roam-back-link {
  margin-bottom: var(--roam-sys-flow-separated);
}
.roam-back-link a {
  font-family: var(--roam-ref-typeface-body);
  font-size: var(--roam-ref-typescale-12);
  letter-spacing: var(--roam-ref-tracking-lg);
  text-transform: uppercase;
  color: var(--roam-ref-palette-teal);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: var(--roam-ref-spacing-8);
  height: var(--roam-ref-spacing-20);
}
.roam-back-link a:hover {
  opacity: 0.8;
}

/* ── Dividers ── */
.roam-gradient-divider {
  width: var(--roam-comp-divider-width);
  height: var(--roam-comp-divider-height);
  border-top: none;
  border: none;
  border-radius: var(--roam-ref-shape-xs);
  background: var(--roam-ref-gradient-brand-simple);
  opacity: 1;
  margin-bottom: 0;
}
/* Card dividers: full width, use section divider height */
hr.roam-gradient-divider {
  border: none;
  width: 100%;
  height: var(--roam-comp-divider-height);
  border-radius: var(--roam-ref-shape-xs);
  background: var(--roam-ref-gradient-brand-simple);
  margin-left: 0;
  margin-right: 0;
}
.roam-section-border {
  border: none;
  height: var(--roam-ref-spacing-1);
  background: var(--roam-ref-palette-dark-border-visible);
  opacity: 1;
  margin-bottom: 0;
}

/* ── Badge Pills ── */
.roam-badge-pill-inline {
  display: inline-block;
  width: fit-content;
  font-family: var(--roam-ref-typeface-body);
  font-size: var(--roam-ref-typescale-10);
  font-weight: var(--roam-ref-weight-semibold);
  letter-spacing: var(--roam-ref-tracking-md);
  text-transform: uppercase;
  color: var(--roam-ref-palette-forest);
  background: var(--roam-ref-gradient-brand);
  border-radius: var(--roam-ref-shape-full);
  padding: var(--roam-ref-spacing-5) var(--roam-ref-spacing-14);
  margin: 0;
}
.roam-badge-pill-subheader {
  font-family: var(--roam-ref-typeface-body);
  font-size: var(--roam-ref-typescale-12);
  color: var(--roam-ref-palette-dark-text-faint);
}


/* ── Cards ── */
.roam-card-pill-three {
  padding: var(--roam-sys-spacing-card);
  border-radius: var(--roam-ref-shape-xl);
  border: 1px solid var(--roam-comp-card-content-border);
  background: var(--roam-comp-card-content-bg);
  display: flex;
  flex-direction: column;
}
.roam-card-pill-three .roam-btn-group {
  margin-top: auto;
  padding-top: var(--roam-ref-spacing-16);
}
.roam-card-content {
  padding: var(--roam-sys-spacing-card);
  border-radius: var(--roam-ref-shape-xl);
  border: 1px solid var(--roam-comp-card-content-border);
  background: var(--roam-comp-card-content-bg);
}
.roam-card-stat-std {
  padding: var(--roam-sys-spacing-card-xs, 20px);
  border-radius: var(--roam-ref-shape-xl);
  border: 1px solid var(--roam-comp-card-content-border);
  background: var(--roam-comp-card-content-bg);
}
.roam-card-stat-std-bordered {
  border: 1px solid var(--roam-comp-card-content-border);
}
.roam-outcome-card {
  padding: var(--roam-sys-spacing-card);
  border-radius: var(--roam-ref-shape-xl);
  border: 1px solid var(--roam-comp-card-stat-border);
  background: var(--roam-comp-card-stat-bg);
}
.roam-differentiator-card {
  padding: var(--roam-sys-spacing-card);
  border-radius: var(--roam-ref-shape-xl);
  border: 1px solid var(--roam-comp-card-stat-border);
  background: var(--roam-comp-card-stat-bg);
}

/* ── Grids ── */
@media (min-width: 1024px) {
  }
/* Six-card grid: mobile 1-col, tablet 2-col, desktop 3-col */
.roam-six-card-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--roam-ref-spacing-16);
  margin-bottom: 0;
}
.roam-outcome-grid {
  gap: var(--roam-ref-spacing-16);
}
.roam-diff-grid {
  gap: var(--roam-ref-spacing-16);
}
.roam-tier-grid {
  gap: var(--roam-ref-spacing-16);
  align-items: stretch;
}

/* ── CTA Row ── */
.roam-cta-row {
  padding-top: var(--roam-ref-spacing-40);
  gap: var(--roam-ref-spacing-24);
}

/* ── Stat Numbers ── */
.roam-card-stat-num {
  font-family: var(--roam-ref-typeface-display);
  font-size: var(--roam-ref-typescale-36);
  color: var(--roam-ref-palette-teal);
  line-height: var(--roam-ref-leading-none);
  margin-top: 0;
  margin-bottom: 0;
}
.roam-card-stat-label {
  font-family: var(--roam-ref-typeface-body);
  font-size: var(--roam-ref-typescale-12);
  letter-spacing: var(--roam-ref-tracking-lg);
  text-transform: uppercase;
  color: var(--roam-ref-palette-dark-text-primary);
  margin-bottom: 0;
}
.roam-block-stat-mega {
  font-family: var(--roam-ref-typeface-display);
  font-size: var(--roam-ref-typescale-80);
  color: var(--roam-ref-palette-cream);
  line-height: var(--roam-ref-leading-none);
  margin-bottom: 0;
}

/* ── Callout Cards ── */
.roam-callout-gold {
  padding: var(--roam-sys-spacing-card);
  border-radius: var(--roam-ref-shape-xl);
  border: 1px solid var(--roam-comp-card-stat-border);
  background: var(--roam-comp-card-stat-bg);
  border-left: var(--roam-comp-divider-bar-width) solid var(--roam-ref-palette-gold);
}
.roam-callout-label {
  font-family: var(--roam-ref-typeface-body);
  font-size: var(--roam-ref-typescale-10);
  font-weight: var(--roam-ref-weight-semibold);
  letter-spacing: var(--roam-ref-tracking-md);
  text-transform: uppercase;
  color: var(--roam-ref-palette-gold);
  margin-bottom: var(--roam-ref-spacing-8);
}
.roam-callout-teal {
  padding: var(--roam-sys-spacing-card);
  border-radius: var(--roam-ref-shape-xl);
  border: 1px solid var(--roam-ref-palette-teal-a15);
  background: var(--roam-ref-palette-teal-a2);
}

/* ── Check / X Items ── */
.roam-grid-blog-check,
.roam-check-item {
  gap: var(--roam-ref-spacing-12);
  padding: var(--roam-sys-spacing-card-sm, 12px 16px);
  border-radius: var(--roam-ref-shape-lg);
  border: 1px solid var(--roam-ref-palette-dark-border-medium);
  background: var(--roam-comp-stat-row-bg);
  margin-bottom: var(--roam-ref-spacing-8);
  align-items: flex-start;
}
.roam-x-item {
  gap: var(--roam-ref-spacing-12);
  padding: var(--roam-sys-spacing-card-sm, 12px 16px);
  margin-bottom: var(--roam-ref-spacing-8);
  align-items: flex-start;
}
.roam-icon-x {
  color: var(--roam-ref-palette-gold);
  font-size: var(--roam-ref-typescale-14);
  line-height: 1.5;
  flex-shrink: 0;
  min-width: var(--roam-ref-spacing-14);
  margin: 0;
}

/* ── Color Utility Classes ── */
.roam-color-teal { color: var(--roam-ref-palette-teal); }
.roam-color-sage { color: var(--roam-ref-palette-sage); }
.roam-color-gold { color: var(--roam-ref-palette-gold); }

/* ── Performance Layers ── */
.roam-layer-card {
  padding: var(--roam-sys-spacing-card);
  border-radius: var(--roam-ref-shape-xl);
  border: 1px solid var(--roam-comp-card-stat-border);
  background: var(--roam-comp-card-stat-bg);
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  column-gap: var(--roam-ref-spacing-12);
}
.roam-layer-card .roam-layer-number {
  grid-column: 1;
  grid-row: 1;
}
.roam-layer-card .roam-layer-title {
  grid-column: 2;
  grid-row: 1;
}
.roam-layer-card .roam-gradient-divider,
.roam-layer-card .roam-card-body,
.roam-layer-card .roam-optimize-callout {
  grid-column: 1 / -1;
}
/* Layer card flow — per-element (grid layout) */
.roam-layer-card .roam-gradient-divider { margin-top: var(--roam-sys-flow-related); }
.roam-layer-card .roam-card-body { margin-top: var(--roam-sys-flow-related); }
.roam-layer-card .roam-optimize-callout { margin-top: var(--roam-sys-flow-related); }
.roam-layer-number {
  font-family: var(--roam-ref-typeface-display);
  font-size: var(--roam-ref-typescale-24);
  color: var(--roam-ref-palette-teal);
  margin-bottom: 0;
}
.roam-layer-title {
  font-family: var(--roam-ref-typeface-display);
  font-size: var(--roam-ref-typescale-18);
  color: var(--roam-ref-palette-dark-text-primary);
  line-height: var(--roam-ref-leading-card);
  margin: 0;
}
.roam-optimize-callout {
  padding: var(--roam-ref-spacing-16);
  border-radius: var(--roam-ref-shape-lg);
  background: var(--roam-ref-palette-teal-a5);
  border-left: var(--roam-comp-divider-bar-width) solid var(--roam-ref-palette-teal);
  margin-top: var(--roam-ref-spacing-16);
}

/* ── Case Study ── */
.roam-card-results {
  padding: var(--roam-sys-spacing-card);
  border-radius: var(--roam-ref-shape-xl);
  border: 1px solid var(--roam-ref-palette-dark-border-teal, var(--roam-ref-palette-teal-a30));
  background: var(--roam-comp-card-stat-bg);
}
.roam-card-results .roam-card-results-header {
  text-align: left;
}
.roam-card-results .roam-ba-values {
  text-align: center;
}
.roam-card-results .roam-gradient-divider,
.roam-card-results .roam-case-metrics,
.roam-card-results .roam-card-body {
  width: 100%;
}
/* Case study card flow — per-element */
.roam-card-results .roam-case-metrics { margin-top: var(--roam-sys-flow-related); }
.roam-card-results .roam-ba-values { margin-top: var(--roam-sys-flow-related); }
.roam-card-results .roam-gradient-divider { margin-top: var(--roam-sys-flow-related); }
.roam-card-results .roam-card-body { margin-top: var(--roam-sys-flow-related); }
.roam-card-results-header {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--roam-ref-spacing-8);
}
.roam-metric-label {
  font-family: var(--roam-ref-typeface-body);
  font-size: var(--roam-ref-typescale-9);
  text-transform: uppercase;
  color: var(--roam-ref-palette-dark-text-whisper, var(--roam-ref-palette-cream-a30));
  margin-bottom: var(--roam-ref-spacing-4);
}
.roam-metric-before {
  font-family: var(--roam-ref-typeface-body);
  font-size: var(--roam-ref-typescale-14);
  color: var(--roam-ref-palette-dark-text-faint);
}
.roam-metric-before s {
  text-decoration: line-through;
}
.roam-metric-after {
  font-family: var(--roam-ref-typeface-body);
  font-size: var(--roam-ref-typescale-14);
  color: var(--roam-ref-palette-cream);
}

/* ── Case study compare block (results page) ──
 * A single 4-col grid that contains BOTH the Before and After rows.
 * Putting them in one grid is what makes the ADR / Occ.Rate / Revenue
 * columns auto-align between the two rows — separate per-row grids
 * would size their columns independently.
 * Cols: label | ADR | Occ. Rate | Revenue. The label col is auto so
 * it sizes to the longer of 'Before:' / 'After:'. The 3 metric cols
 * share equal fractions. */
.roam-results-compare {
  display: grid;
  grid-template-columns: auto 1fr 1fr 1fr;
  column-gap: var(--roam-ref-spacing-16);
  row-gap: var(--roam-ref-spacing-8);
  align-items: baseline;
}
.roam-results-metric-label {
  font-family: var(--roam-ref-typeface-body);
  font-size: var(--roam-ref-typescale-14);
  color: var(--roam-ref-palette-dark-text-faint);
}
.roam-results-metric {
  font-family: var(--roam-ref-typeface-body);
  font-size: var(--roam-ref-typescale-14);
  color: var(--roam-ref-palette-dark-text-faint);
}
/* After row: bold + cream to contrast with the muted Before row */
.roam-results-metric-label--after,
.roam-results-metric--after {
  font-weight: var(--roam-ref-weight-semibold);
  color: var(--roam-ref-palette-cream);
}
.roam-metric-delta {
  font-family: var(--roam-ref-typeface-display);
  font-size: var(--roam-ref-typescale-18);
  color: var(--roam-ref-palette-teal);
}

/* ── Service Tactics ── */
.roam-tactic-row {
  padding: var(--roam-sys-spacing-card);
  border-radius: var(--roam-ref-shape-xl);
  border: 1px solid var(--roam-comp-card-stat-border);
  background: var(--roam-comp-card-stat-bg);
  margin-bottom: var(--roam-ref-spacing-16);
  gap: var(--roam-ref-spacing-24);
  align-items: flex-start;
}
.roam-tactic-header {
  min-width: var(--roam-comp-tactic-header-min-width);
  gap: var(--roam-ref-spacing-12);
}
.roam-tactic-number {
  font-family: var(--roam-ref-typeface-body);
  font-size: var(--roam-ref-typescale-12);
  font-weight: var(--roam-ref-weight-bold);
  color: var(--roam-ref-palette-teal);
  opacity: 0.5;
  margin: 0;
}
.roam-tactic-body {
  flex: 1;
}

/* ── Market Quick Facts ── */
.roam-fact-row {
  gap: var(--roam-ref-spacing-12);
  padding: var(--roam-sys-spacing-card-sm, 12px 16px);
  border-radius: var(--roam-ref-shape-lg);
  border: 1px solid var(--roam-ref-palette-dark-border-medium);
  background: var(--roam-comp-stat-row-bg);
  margin-bottom: var(--roam-ref-spacing-8);
  align-items: flex-start;
}
.roam-fact-label {
  font-family: var(--roam-ref-typeface-body);
  font-size: var(--roam-ref-typescale-12);
  font-weight: var(--roam-ref-weight-semibold);
  color: var(--roam-ref-palette-teal);
  white-space: nowrap;
  min-width: var(--roam-comp-fact-label-min-width);
  margin: 0;
}

/* ── Compare Table ── */
.roam-compare-table {
  overflow-x: auto;
}
.roam-compare-header {
  gap: 0;
}
.roam-compare-row {
  gap: 0;
  border-bottom: 1px solid var(--roam-ref-palette-cream-a5);
}
.roam-compare-dim {
  flex: 0 0 25%;
  padding: var(--roam-ref-spacing-16);
}
.roam-dim-label {
  font-family: var(--roam-ref-typeface-display);
  font-size: var(--roam-ref-typescale-14);
  color: var(--roam-ref-palette-dark-text-muted, rgba(250,246,241,0.5));
  margin: 0;
}
.roam-compare-local,
.roam-compare-local-header {
  flex: 0 0 37.5%;
  padding: var(--roam-ref-spacing-16);
  background: var(--roam-ref-palette-teal-a3);
  border-left: 1px solid var(--roam-ref-palette-teal-a10);
}
.roam-compare-local-header {
  background: var(--roam-ref-palette-teal-a5);
  border-bottom: 1px solid var(--roam-ref-palette-teal-a20);
  text-align: center;
}
.roam-compare-national,
.roam-compare-national-header {
  flex: 0 0 37.5%;
  padding: var(--roam-ref-spacing-16);
  background: var(--roam-ref-palette-cream-a1);
  border-left: 1px solid var(--roam-ref-palette-cream-a6);
}
.roam-compare-national-header {
  background: var(--roam-ref-palette-cream-a2);
  border-bottom: 1px solid var(--roam-ref-palette-dark-border-visible);
  text-align: center;
}
.roam-compare-grid {
  gap: var(--roam-ref-spacing-16);
}
.roam-strengths-card {
  padding: var(--roam-sys-spacing-card);
  border-radius: var(--roam-ref-shape-xl);
  border: 1px solid var(--roam-comp-card-content-border);
  background: var(--roam-comp-card-content-bg);
}
.roam-gaps-card {
  padding: var(--roam-sys-spacing-card);
  border-radius: var(--roam-ref-shape-xl);
  border: 1px solid var(--roam-comp-icon-box-border-accent, var(--roam-ref-palette-gold-a30));
  background: var(--roam-comp-card-stat-bg);
}
.roam-diff-number {
  font-family: var(--roam-ref-typeface-display);
  font-size: var(--roam-ref-typescale-24);
  color: var(--roam-ref-palette-teal);
  margin: 0 0 var(--roam-ref-spacing-8) 0;
}

/* ── Pricing Tiers ── */
/* Tier card wrapper — holds pill above card */
.roam-tier-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.roam-tier-wrapper .roam-badge-pill-gold,
.roam-tier-wrapper .roam-badge-pill-neutral {
  margin-bottom: 0;
}
.roam-tier-wrapper .roam-tier-card {
  width: 100%;
  flex: 1;
}
/* When pill is present, flatten the card's top corners */
.roam-tier-wrapper .roam-badge-pill-gold + .roam-tier-card,
.roam-tier-wrapper .roam-badge-pill-gold + .roam-tier-card-recommended,
.roam-tier-wrapper .roam-badge-pill-neutral + .roam-tier-card,
.roam-tier-wrapper .roam-badge-pill-neutral + .roam-tier-card-recommended {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}
/* Solid gold pill — attached to card top */
.roam-badge-pill-gold {
  display: block;
  width: 100%;
  text-align: center;
  font-family: var(--roam-ref-typeface-body);
  font-size: var(--roam-ref-typescale-10);
  font-weight: var(--roam-ref-weight-semibold);
  letter-spacing: var(--roam-ref-tracking-md);
  text-transform: uppercase;
  color: var(--roam-ref-palette-forest);
  background: var(--roam-ref-palette-gold);
  border-radius: var(--roam-ref-shape-xl) var(--roam-ref-shape-xl) 0 0;
  padding: var(--roam-ref-spacing-8) var(--roam-ref-spacing-14);
  margin: 0;
}
/* Solid teal pill — attached to card top. Used for non-recommended
   tier bands (Self-Directed / Managed / Optimized). White text on
   teal fill mirrors the gold pill's solid-fill structure used by
   the Performance tier — same visual weight, distinct color so
   Performance still stands out. */
.roam-badge-pill-neutral {
  display: block;
  width: 100%;
  text-align: center;
  font-family: var(--roam-ref-typeface-body);
  font-size: var(--roam-ref-typescale-10);
  font-weight: var(--roam-ref-weight-semibold);
  letter-spacing: var(--roam-ref-tracking-md);
  text-transform: uppercase;
  color: var(--roam-ref-palette-white);
  background: var(--roam-ref-palette-teal);
  border-radius: var(--roam-ref-shape-xl) var(--roam-ref-shape-xl) 0 0;
  padding: var(--roam-ref-spacing-8) var(--roam-ref-spacing-14);
  margin: 0;
}
.roam-tier-card {
  padding: var(--roam-sys-spacing-card);
  border-radius: var(--roam-ref-shape-xl);
  border: 1px solid var(--roam-comp-card-stat-border);
  background: var(--roam-comp-card-stat-bg);
  display: flex;
  flex-direction: column;
}
.roam-tier-card-recommended {
  padding: var(--roam-sys-spacing-card);
  border-radius: var(--roam-ref-shape-xl);
  border: 1px solid var(--roam-ref-palette-dark-border-teal, var(--roam-ref-palette-teal-a30));
  background: var(--roam-comp-card-content-bg);
  display: flex;
  flex-direction: column;
}
/* Tier card flow tokens */
.roam-tier-card .roam-card-title + .roam-body-faint { margin-top: var(--roam-sys-flow-coupled); }
.roam-tier-card .roam-body-faint + .roam-card-stat-num { margin-top: var(--roam-sys-flow-coupled); }
.roam-tier-card .roam-card-stat-num + .roam-gradient-divider { margin-top: var(--roam-sys-flow-related); }
.roam-tier-card .roam-gradient-divider + .roam-body-faint { margin-top: var(--roam-sys-flow-related); }
.roam-tier-card .roam-gradient-divider + .roam-card-body { margin-top: var(--roam-sys-flow-related); }
.roam-tier-card .roam-body-faint + .roam-card-body { margin-top: var(--roam-sys-flow-related); }
.roam-tier-card .roam-card-body + .roam-card-body { margin-top: var(--roam-sys-flow-coupled); }
.roam-tier-card .roam-btn-group { margin-top: auto; padding-top: var(--roam-sys-flow-separated); }
/* Tier card buttons — full width on mobile */
.roam-tier-basis {
  font-family: var(--roam-ref-typeface-body);
  font-size: var(--roam-ref-typescale-12);
  letter-spacing: var(--roam-ref-tracking-lg);
  text-transform: uppercase;
  color: var(--roam-ref-palette-dark-text-faint);
  margin-bottom: var(--roam-ref-spacing-20);
}
.roam-tier-price {
  font-family: var(--roam-ref-typeface-display);
  font-size: var(--roam-ref-typescale-36);
  color: var(--roam-ref-palette-dark-text-primary);
  line-height: var(--roam-ref-leading-none);
  margin-top: 0;
  margin-bottom: var(--roam-ref-spacing-4);
}
.roam-tier-price-teal {
  font-family: var(--roam-ref-typeface-display);
  font-size: var(--roam-ref-typescale-36);
  color: var(--roam-ref-palette-teal);
  line-height: var(--roam-ref-leading-none);
  margin-top: 0;
  margin-bottom: var(--roam-ref-spacing-4);
}
.roam-tier-inherits {
  font-family: var(--roam-ref-typeface-body);
  font-size: var(--roam-ref-typescale-12);
  color: var(--roam-ref-palette-dark-text-faint);
  line-height: var(--roam-ref-leading-snug);
  margin-bottom: var(--roam-ref-spacing-12);
}

/* ── Add-on cards ── */
.roam-card-addon {
  padding: var(--roam-sys-spacing-card);
  border-radius: var(--roam-ref-shape-xl);
  border: 1px solid var(--roam-comp-card-stat-border);
  background: var(--roam-comp-card-stat-bg);
  display: flex;
  flex-direction: column;
}
.roam-card-addon-title {
  font-family: var(--roam-ref-typeface-display);
  font-size: var(--roam-ref-typescale-18);
  color: var(--roam-ref-palette-dark-text-primary);
  line-height: var(--roam-ref-leading-card);
  margin: 0;
}
/* Add-on card flow tokens */
.roam-card-addon .roam-badge-pill-inline { margin-top: var(--roam-sys-flow-related); }
.roam-card-addon .roam-gradient-divider { margin-top: var(--roam-sys-flow-related); }
.roam-card-addon .roam-card-body { margin-top: var(--roam-sys-flow-related); }
/* Performance badge variant */
.roam-badge-performance {
  color: var(--roam-ref-palette-forest);
  background: var(--roam-ref-gradient-brand);
}

/* ── FAQ (details block) ── */
.roam-card-faq {
  border-bottom: 1px solid var(--roam-ref-palette-dark-border-medium);
}
.roam-card-faq summary {
  font-family: var(--roam-ref-typeface-body);
  font-size: var(--roam-ref-typescale-15);
  font-weight: var(--roam-ref-weight-medium);
  color: var(--roam-ref-palette-dark-text-primary);
  cursor: pointer;
  padding: var(--roam-ref-spacing-20) 0;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--roam-ref-spacing-16);
}
.roam-card-faq summary::-webkit-details-marker {
  display: none;
}
/* FAQ chevron: SVG version below, border version removed */

/* ── Glossary ── */
.roam-glossary {
  max-width: var(--roam-ref-layout-768);
}
.roam-glossary-letter {
  font-family: var(--roam-ref-typeface-display);
  font-size: var(--roam-ref-typescale-24);
  color: var(--roam-ref-palette-teal);
  margin-top: var(--roam-ref-spacing-32);
  margin-bottom: var(--roam-ref-spacing-16);
  padding-bottom: var(--roam-ref-spacing-8);
  border-bottom: 1px solid var(--roam-ref-palette-dark-border-medium);
}
.roam-glossary .roam-body strong {
  color: var(--roam-ref-palette-dark-text-primary);
}

/* ── Homepage Section Wrappers (v2.1.11) ── */
.roam-homepage-section {
  width: 100%;
}
/* Homepage background assignments moved to .roam-surface-stat / .roam-surface-content
   classes on section elements. See page content for assignments. */
.roam-hp-cta {
  text-align: center;
}
.roam-hp-cta > * {
  margin-left: auto;
  margin-right: auto;
}
.roam-hp-cta .roam-cta-heading {
  text-align: center;
  max-width: var(--roam-ref-layout-600);
  margin-left: auto;
  margin-right: auto;
}
.roam-hp-cta .roam-gradient-divider {
  margin-left: auto;
  margin-right: auto;
}
.roam-hp-cta .roam-body-lg {
  text-align: center;
  max-width: var(--roam-ref-layout-640);
  margin-left: auto;
  margin-right: auto;
}
.roam-hp-cta .roam-btn-group {
  display: flex;
  justify-content: center;
  gap: var(--roam-ref-spacing-16);
}
/* CTA section flow — inside the wrapper div */
.roam-hp-cta > div > * + * {
  margin-top: var(--roam-sys-flow-related);
}
.roam-hp-cta .roam-badge-pill-inline + .roam-cta-heading {
  margin-top: var(--roam-sys-flow-coupled);
}
.roam-hp-cta .roam-cta-heading + .roam-gradient-divider {
  margin-top: var(--roam-sys-flow-related);
}
.roam-hp-cta .roam-body-lg + .roam-btn-group {
  margin-top: var(--roam-sys-flow-separated);
}

/* ═══════════════════════════════════════════════════════════
   ROAM HEADING SYSTEM v2 (added v2.1.525, Phase 0)

   Tag → Class → Size mapping. Use the semantic HTML tag for
   document outline & accessibility; the class controls visual
   treatment.

     h1 → .roam-display          Hero pages — clamp(40, 10vw, 72)
     h1 → .roam-title-headline   Secondary hero / content H1 — 56
     h2 → .roam-title-section    Section divider — 40
     h3 → .roam-title-subsection Subsection within a section — 32
     h4 → .roam-title-card       Card title (dominant unit) — 24
     h5 → .roam-title-inline     Inline title within prose — 18
     h6 → .roam-title-subheading Body-aligned subheading — 16

   Migration plan (Phase 1, tier-by-tier H1 → H6):
     - PHP files swap legacy heading classes for these new ones.
     - Legacy classes stay in CSS until Phase 2 cleanup.
     - .roam-title-card and .roam-title-section have existing PHP
       uses with smaller sizes; their definitions are commented
       below until the relevant migration runs (otherwise the
       cascade would visually mutate existing instances).

   Weights: h1–h5 use --roam-ref-weight-bold (700) per the v2 spec.
   This is intentionally heavier than legacy .roam-hero-heading
   (which used weight-normal / 400). H1 migration will introduce
   visibly bolder hero text — see Phase 1 H1 audit.

   Line-height: all heading classes use --roam-ref-leading-heading
   (1.1) except .roam-display, which uses --roam-ref-leading-tight
   (1.05) for hero scale.
   ═══════════════════════════════════════════════════════════ */

/* h1 — Hero. Used on landing-page heroes only. The display
   typescale is responsive via clamp; em children get gold + light.
   Weight is normal (400), not bold — Playfair Display at clamp
   40-72px reads with editorial weight at 400. */
.roam-display {
  font-family: var(--roam-ref-typeface-display);
  font-size: var(--roam-ref-typescale-display);
  font-weight: var(--roam-ref-weight-normal);
  line-height: var(--roam-ref-leading-tight);
  letter-spacing: var(--roam-ref-tracking-tight);
  color: var(--roam-ref-palette-dark-text-primary);
  margin: 0 0 var(--roam-ref-spacing-24) 0;
  max-width: var(--roam-ref-layout-1024);
}
.roam-display em {
  color: var(--roam-ref-palette-gold);
  font-weight: var(--roam-ref-weight-normal);
  font-style: italic;
}

/* h1 — Secondary hero / content-page H1. Used when the page
   isn't a marketing hero but still needs a top-of-document
   title (e.g., FAQ, packages page, results page, blog index).
   Weight is normal (400), not bold — Playfair Display at this
   size reads as editorial / magazine-style with 400 weight.
   Size uses a responsive clamp so mobile lands at 40px instead
   of an overwhelming 56. */
.roam-title-headline {
  font-family: var(--roam-ref-typeface-display);
  font-size: var(--roam-ref-typescale-headline);
  font-weight: var(--roam-ref-weight-normal);
  line-height: var(--roam-ref-leading-heading);
  letter-spacing: var(--roam-ref-tracking-tight);
  color: var(--roam-ref-palette-dark-text-primary);
  margin: 0 0 var(--roam-ref-spacing-24) 0;
}

/* h2 — Section divider. The major H2 on a content page that
   separates one major section from the next (above a content grid
   or feature row). Activated v2.1.531 (Phase 1 H2 migration).
   Weight is normal (400) per Robert's pattern from H1 migration;
   size uses responsive clamp so mobile lands at 32px instead of
   an overwhelming 40. */
.roam-title-section {
  font-family: var(--roam-ref-typeface-display);
  font-size: var(--roam-ref-typescale-section);
  font-weight: var(--roam-ref-weight-normal);
  line-height: var(--roam-ref-leading-heading);
  letter-spacing: var(--roam-ref-tracking-tight);
  color: var(--roam-ref-palette-dark-text-primary);
  margin: 0 0 var(--roam-ref-spacing-16) 0;
}

/* h3 — Subsection within a section. */
.roam-title-subsection {
  font-family: var(--roam-ref-typeface-display);
  font-size: var(--roam-ref-typescale-32);
  font-weight: var(--roam-ref-weight-bold);
  line-height: var(--roam-ref-leading-heading);
  color: var(--roam-ref-palette-dark-text-primary);
  margin: 0 0 var(--roam-ref-spacing-16) 0;
}

/* h3/h4 — Card title (dominant card unit). The visual class for any
   card title regardless of whether the card sits at h3 or h4 depth.
   Activated v2.1.532 (Phase 1 H3+H4 migration). Weight is normal (400)
   per the v2 pattern from display/headline/section; size uses
   responsive clamp 20-24 so phones get a tighter card title. */
.roam-title-card {
  font-family: var(--roam-ref-typeface-display);
  font-size: var(--roam-ref-typescale-card);
  font-weight: var(--roam-ref-weight-normal);
  line-height: var(--roam-ref-leading-heading);
  color: var(--roam-ref-palette-dark-text-primary);
  margin: 0 0 var(--roam-ref-spacing-8) 0;
}

/* h5 — Inline title within prose, or minor card title. */
.roam-title-inline {
  font-family: var(--roam-ref-typeface-display);
  font-size: var(--roam-ref-typescale-18);
  font-weight: var(--roam-ref-weight-bold);
  line-height: var(--roam-ref-leading-heading);
  color: var(--roam-ref-palette-dark-text-primary);
  margin: 0 0 var(--roam-ref-spacing-8) 0;
}

/* h6 — Body-aligned subheading. Drops to body typeface because at
   16px the heading is no longer architectural; it functions as
   inline emphasis within body copy. */
.roam-title-subheading {
  font-family: var(--roam-ref-typeface-body);
  font-size: var(--roam-ref-typescale-16);
  font-weight: var(--roam-ref-weight-semibold);
  line-height: var(--roam-ref-leading-heading);
  color: var(--roam-ref-palette-dark-text-primary);
  margin: 0 0 var(--roam-ref-spacing-8) 0;
}

/* ── Light-surface heading color override (v2.1.528, expanded v2.1.530) ──
   The body default background is forest (dark green); v2 heading
   colors above use cream (--dark-text-primary) which reads correctly
   on dark surfaces. But pages that wrap content in a cream/light
   surface need dark text on the light background, otherwise headings
   render invisibly.

   Light-surface wrapper classes covered:
     .roam-market-page         (markets hub, dynamic market pages)
     .roam-surface-cream       (privacy, terms, sitemap, market-report,
                                cream sections of homepage)
     .roam-fg-detail-body      (single blog posts, field guide detail)
     .roam-fg-hub-section      (field guides hub)
     .roam-fg-listing-section  (field guide listings hub)
     .roam-sec-hero-market     (market hero sections)
     .roam-bg-cream            (generic cream-bg utility)

   Color treatment on light surfaces:
     Heading main text → forest (#1B2B27)
     em italic accent  → teal (#5B8FA8)

   On dark surfaces (default), the em accent stays gold (set in
   .roam-display em above). The forest+teal pairing on light surfaces
   matches the brand accent system: gold reads on dark, teal reads
   on light. Covers all 5 active v2 heading classes so future H-tier
   migrations don't re-introduce the bug. */
.roam-market-page :where(.roam-display, .roam-title-headline, .roam-title-section, .roam-title-subsection, .roam-title-card, .roam-title-inline, .roam-title-subheading),
.roam-surface-cream :where(.roam-display, .roam-title-headline, .roam-title-section, .roam-title-subsection, .roam-title-card, .roam-title-inline, .roam-title-subheading),
.roam-fg-detail-body :where(.roam-display, .roam-title-headline, .roam-title-section, .roam-title-subsection, .roam-title-card, .roam-title-inline, .roam-title-subheading),
.roam-fg-hub-section :where(.roam-display, .roam-title-headline, .roam-title-section, .roam-title-subsection, .roam-title-card, .roam-title-inline, .roam-title-subheading),
.roam-fg-listing-section :where(.roam-display, .roam-title-headline, .roam-title-section, .roam-title-subsection, .roam-title-card, .roam-title-inline, .roam-title-subheading),
.roam-sec-hero-market :where(.roam-display, .roam-title-headline, .roam-title-section, .roam-title-subsection, .roam-title-card, .roam-title-inline, .roam-title-subheading),
.roam-bg-cream :where(.roam-display, .roam-title-headline, .roam-title-section, .roam-title-subsection, .roam-title-card, .roam-title-inline, .roam-title-subheading) {
  color: var(--roam-ref-palette-forest);
}

/* em italic accent on light surfaces — teal instead of the default gold.
   Applies to any v2 heading class that contains an em element while
   inside a light-surface wrapper. */
.roam-market-page :where(.roam-display, .roam-title-headline) em,
.roam-surface-cream :where(.roam-display, .roam-title-headline) em,
.roam-fg-detail-body :where(.roam-display, .roam-title-headline) em,
.roam-fg-hub-section :where(.roam-display, .roam-title-headline) em,
.roam-fg-listing-section :where(.roam-display, .roam-title-headline) em,
.roam-sec-hero-market :where(.roam-display, .roam-title-headline) em,
.roam-bg-cream :where(.roam-display, .roam-title-headline) em {
  color: var(--roam-ref-palette-teal);
}

/* ═══════════════════════════════════════════════════════════
   END HEADING SYSTEM v2
   ═══════════════════════════════════════════════════════════ */

/* ── Homepage Block Classes (v2.1.12) ── */

/* Hero */
/* (styles in responsive controller section below) */
.roam-hero-heading {
  font-family: var(--roam-ref-typeface-display);
  font-size: var(--roam-ref-typescale-display);
  color: var(--roam-ref-palette-dark-text-primary);
  line-height: var(--roam-ref-leading-tight);
  font-weight: var(--roam-ref-weight-normal);
  letter-spacing: var(--roam-ref-tracking-tight);
  max-width: var(--roam-ref-layout-1024);
  margin: 0 0 var(--roam-ref-spacing-24) 0;
}
.roam-hero-heading em {
  color: var(--roam-ref-palette-gold);
  font-weight: 300;
}
.roam-beacon-badge {
  margin-bottom: var(--roam-ref-spacing-32);
}
.roam-beacon-badge .roam-badge-pill-inline::before {
  content: '';
  display: inline-block;
  width: var(--roam-ref-spacing-8);
  height: var(--roam-ref-spacing-8);
  border-radius: 50%;
  background: var(--roam-ref-palette-teal);
  margin-right: var(--roam-ref-spacing-10);
  animation: roam-beacon-pulse 2s ease-in-out infinite;
}
@keyframes roam-beacon-pulse {
  0%, 100% { opacity: 1; box-shadow: 0 0 0 0 var(--roam-ref-palette-teal-a40); }
  50% { opacity: 0.7; box-shadow: 0 0 0 6px var(--roam-ref-palette-teal-a0); }
}
.roam-btn-text-link > a {
  font-family: var(--roam-ref-typeface-body);
  font-size: var(--roam-ref-typescale-12);
  font-weight: var(--roam-ref-weight-medium);
  letter-spacing: var(--roam-ref-tracking-md);
  text-transform: uppercase;
  color: var(--roam-ref-palette-dark-text-muted, rgba(250,246,241,0.5));
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--roam-ref-palette-dark-border-subtle);
  border-radius: 0;
  padding: var(--roam-ref-spacing-2) 0;
  text-decoration: none;
}

/* Problem Cards */

/* One-card grid: single column at all viewports */
.roam-grid-card-1 {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--roam-ref-spacing-16);
  margin-bottom: 0;
}
/* Two-card grid: 1-col mobile, 2-col tablet+ */
.roam-grid-card-2 {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--roam-ref-spacing-16);
  margin-bottom: 0;
}
.roam-grid-card-3-133 {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--roam-ref-spacing-16);
  margin-bottom: 0;
}
.roam-grid-3-113 {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--roam-ref-spacing-16);
}
.roam-grid-card-6-233 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--roam-ref-spacing-16);
}
@media (min-width: 1024px) {
  .roam-grid-3-113 {
    grid-template-columns: repeat(3, 1fr);
  }
  /* Subgrid — aligns badge, title, divider, body, buttons across cards */
  .roam-grid-3-113 > .roam-card-pill-three {
    display: grid;
    grid-row: span 5;
    grid-template-rows: subgrid;
    row-gap: 0;
    align-items: start;
  }
  .roam-grid-3-113 > .roam-card-pill-three .roam-badge-pill-inline { grid-row: 1; }
  .roam-grid-3-113 > .roam-card-pill-three .roam-card-pill-title { grid-row: 2; }
  .roam-grid-3-113 > .roam-card-pill-three .roam-gradient-divider { grid-row: 3; }
  .roam-grid-3-113 > .roam-card-pill-three .roam-card-body { grid-row: 4; }
  .roam-grid-3-113 > .roam-card-pill-three .roam-btn-group { grid-row: 5; align-self: end; }
  /* Subgrid — aligns property info and values across results cards */
  .roam-grid-3-113 > .roam-card-results {
    display: grid;
    grid-row: span 2;
    grid-template-rows: subgrid;
    grid-template-columns: 1fr;
    row-gap: 0;
  }
  .roam-grid-3-113 > .roam-card-results .roam-card-results-header { grid-row: 1; text-align: left; }
  .roam-grid-3-113 > .roam-card-results .roam-ba-values { grid-row: 2; text-align: center; }
}
@media (min-width: 768px) {
  .roam-grid-card-3-133 {
    grid-template-columns: repeat(3, 1fr);
  }
  .roam-grid-card-6-233 {
    grid-template-columns: repeat(3, 1fr);
  }
  /* Subgrid — aligns icon/title, subtitle, divider, body, buttons across cards */
  /* Subgrid — only on cards with full structure (divider present) */
  .roam-grid-card-3-133 > .roam-card-icon-three:has(.roam-gradient-divider) {
    grid-row: span 5;
    grid-template-rows: subgrid;
    row-gap: 0;
    align-items: start;
  }
  .roam-grid-card-3-133 > .roam-card-icon-three:has(.roam-gradient-divider) .roam-card-icon-subtitle { grid-row: 2; }
  .roam-grid-card-3-133 > .roam-card-icon-three:has(.roam-gradient-divider) .roam-gradient-divider { grid-row: 3; }
  .roam-grid-card-3-133 > .roam-card-icon-three:has(.roam-gradient-divider) .roam-card-body { grid-row: 4; }
  .roam-grid-card-3-133 > .roam-card-icon-three:has(.roam-gradient-divider) .roam-btn-group { grid-row: 5; align-self: end; }
  .roam-grid-card-3-133 > .roam-card-icon-three .roam-icon-box,
  .roam-grid-card-3-133 > .roam-card-icon-three .roam-step-number,
  .roam-grid-card-3-133 > .roam-card-icon-three .roam-card-icon-title { align-self: center; }
  /* Subgrid — aligns stat number, label, and body-faint description across
     cards in a 3-col benefits row (e.g. realtor-referral benefits grid).
     Each card carries exactly 3 elements (num / label / faint body); subgrid
     keeps their baselines aligned across all cards regardless of label length. */
  .roam-grid-card-3-133 > .roam-card-stat-std {
    grid-row: span 3;
    grid-template-rows: subgrid;
    row-gap: 0;
    align-items: start;
  }
  .roam-grid-card-3-133 > .roam-card-stat-std .roam-card-stat-num { grid-row: 1; }
  .roam-grid-card-3-133 > .roam-card-stat-std .roam-card-stat-label { grid-row: 2; }
  .roam-grid-card-3-133 > .roam-card-stat-std .roam-body-faint { grid-row: 3; }
  /* Subgrid — 4-row case-study variant for results page cards.
     Aligns header / compare-block / delta / body horizontally across
     all cards in the 3-up row. The compare block is internally a
     2-row × 4-col grid that keeps Before/After columns aligned.
     Modifier (--case) keeps this variant opt-in so the base
     .roam-card-results used elsewhere (home) remains unaffected. */
  .roam-grid-card-3-133 > .roam-card-results.roam-card-results--case {
    display: grid;
    grid-row: span 4;
    grid-template-rows: subgrid;
    grid-template-columns: 1fr;
    row-gap: 0;
  }
  .roam-grid-card-3-133 > .roam-card-results.roam-card-results--case .roam-card-results-header { grid-row: 1; }
  .roam-grid-card-3-133 > .roam-card-results.roam-card-results--case .roam-results-compare { grid-row: 2; }
  .roam-grid-card-3-133 > .roam-card-results.roam-card-results--case .roam-card-stat-num { grid-row: 3; text-align: center; }
  .roam-grid-card-3-133 > .roam-card-results.roam-card-results--case .roam-card-body { grid-row: 4; align-self: start; }
  /* Subgrid — aligns quote icon, text, divider, name, location across cards */
  .roam-grid-card-3-133 > .roam-card-quote {
    grid-row: span 5;
    grid-template-rows: subgrid;
    row-gap: 0;
    align-items: start;
  }
  .roam-grid-card-3-133 > .roam-card-quote .roam-quote-icon { grid-row: 1; }
  .roam-grid-card-3-133 > .roam-card-quote .roam-quote-text { grid-row: 1 / span 2; }
  .roam-grid-card-3-133 > .roam-card-quote .roam-gradient-divider { grid-row: 3; }
  .roam-grid-card-3-133 > .roam-card-quote .roam-quote-name { grid-row: 4; }
  .roam-grid-card-3-133 > .roam-card-quote .roam-quote-location { grid-row: 5; }
}
@media (min-width: 1024px) {
  .roam-card-icon-title {
    font-size: var(--roam-ref-typescale-28);
  }
  .roam-card-icon-subtitle {
    font-size: var(--roam-ref-typescale-16);
  }
}
.roam-card-icon-three {
  padding: var(--roam-sys-spacing-card);
  border-radius: var(--roam-ref-shape-xl);
  border: 1px solid var(--roam-comp-card-stat-border);
  background: var(--roam-comp-card-stat-bg);
}
/* Icon card grid layout — icon + title on row 1, everything else full-width */
.roam-card-icon-three {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  column-gap: var(--roam-ref-spacing-14);
}
.roam-card-icon-three .roam-icon-box {
  grid-column: 1;
  grid-row: 1;
  margin: 0;
}
.roam-card-icon-three .roam-card-icon-title,
.roam-card-icon-three .roam-card-title {
  grid-column: 2;
  grid-row: 1;
  margin-bottom: 0;
  line-height: var(--roam-ref-leading-none);
}
.roam-card-icon-three .roam-card-icon-subtitle,
.roam-card-icon-three .roam-gradient-divider,
.roam-card-icon-three .roam-card-body,
.roam-card-icon-three .roam-btn-group,
.roam-card-icon-three .roam-ecosystem-group {
  grid-column: 1 / -1;
}
/* Title color inherits from icon color */
.roam-card-icon-three .roam-icon-box-teal ~ .roam-card-icon-title { color: var(--roam-ref-palette-teal); }
.roam-card-icon-three .roam-icon-box-sage ~ .roam-card-icon-title { color: var(--roam-ref-palette-sage); }
.roam-card-icon-three .roam-icon-box-gold ~ .roam-card-icon-title { color: var(--roam-ref-palette-gold); }

.roam-card-icon-subtitle {
  font-family: var(--roam-ref-typeface-body);
  font-size: var(--roam-ref-typescale-12);
  letter-spacing: var(--roam-ref-tracking-lg);
  text-transform: uppercase;
  color: var(--roam-ref-palette-dark-text-faint);
  margin-bottom: 0;
}
/* In-card gradient dividers — full width, 1px height (0-3-0 beats base 0-2-1) */
.roam-card-icon-three .roam-gradient-divider,
.roam-card-pill-three .roam-gradient-divider,
.roam-card-quote .roam-gradient-divider,
.roam-card-timeline .roam-gradient-divider,
.roam-layer-card .roam-gradient-divider,
.roam-card-results .roam-gradient-divider {
  width: 100%;
  height: var(--roam-comp-divider-height);
}

/* Service Cards */

/* Market Button Grid */

@media (min-width: 768px) {
  .roam-grid-card-2 {
    grid-template-columns: repeat(2, 1fr);
  }
  .roam-six-card-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 1024px) {
  .roam-six-card-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}
/* 6-stat grid — 2 col all breakpoints, 3 col desktop */
.roam-six-stat-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--roam-ref-spacing-16);
  margin-bottom: 0;
}
@media (min-width: 1024px) {
  .roam-six-stat-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}
/* 3-pill grid — 1 col mobile, 1 col tablet, 3 col desktop */
.roam-three-pill-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--roam-ref-spacing-16);
  margin-bottom: 0;
}
@media (min-width: 1024px) {
  .roam-three-pill-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}


.roam-grid-card-12-234 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--roam-ref-spacing-16);
  margin-bottom: 0;
}
/* Market buttons: XS on mobile via roam-btn-xs class, MD on tablet via responsive override */
@media (min-width: 768px) {
  .roam-market-btn > a {
    height: var(--roam-ref-spacing-40);
    font-size: var(--roam-ref-typescale-14);
    line-height: var(--roam-ref-spacing-20);
    padding: 0 var(--roam-ref-spacing-20);
  }
}
@media (min-width: 768px) {
  .roam-grid-card-12-234 {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (min-width: 1024px) {
  .roam-grid-card-12-234 {
    grid-template-columns: repeat(4, 1fr);
  }
}
.roam-market-btn {
  width: 100%;
}
.roam-market-btn > a {
  width: 100%;
  justify-content: space-between;
  display: flex;
}

/* Testimonial Cards */

/* ── Three Quote Card ── */
.roam-three-quote-card {
  padding: var(--roam-sys-spacing-card);
  border-radius: var(--roam-ref-shape-xl);
  border: 1px solid var(--roam-comp-card-content-border);
  background: var(--roam-comp-card-content-bg);
}

.roam-card-quote-quote {
  font-family: var(--roam-ref-typeface-display);
  font-size: var(--roam-ref-typescale-18);
  font-style: italic;
  color: var(--roam-ref-palette-dark-text-primary);
  line-height: var(--roam-ref-leading-snug);
  opacity: 0.8;
  margin-bottom: 0;
}
.roam-card-quote-owner {
  font-family: var(--roam-ref-typeface-body);
  font-size: var(--roam-ref-typescale-13);
  color: var(--roam-ref-palette-gold);
  margin-bottom: 0;
}
.roam-card-quote-city {
  font-family: var(--roam-ref-typeface-body);
  font-size: var(--roam-ref-typescale-13);
  color: var(--roam-ref-palette-dark-text-ghost);
  margin-bottom: 0;
}
.roam-card-quote {
  padding: var(--roam-sys-spacing-card);
  border-radius: var(--roam-ref-shape-xl);
  border: 1px solid var(--roam-comp-card-content-border);
  background: var(--roam-comp-card-content-bg);
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: start;
  column-gap: var(--roam-ref-spacing-14);
}
.roam-card-quote .roam-quote-icon {
  grid-column: 1;
  grid-row: 1;
  margin: 0;
}
.roam-card-quote .roam-quote-text {
  grid-column: 2;
  grid-row: 1;
}
.roam-card-quote .roam-gradient-divider,
.roam-card-quote .roam-quote-name,
.roam-card-quote .roam-quote-location {
  grid-column: 1 / -1;
}
.roam-quote-text {
  font-family: var(--roam-ref-typeface-display);
  font-size: var(--roam-ref-typescale-18);
  font-style: italic;
  color: var(--roam-ref-palette-dark-text-primary);
  line-height: var(--roam-ref-leading-snug);
  opacity: 0.8;
  margin-bottom: 0;
}

.roam-quote-name {
  font-family: var(--roam-ref-typeface-body);
  font-size: var(--roam-ref-typescale-13);
  color: var(--roam-ref-palette-gold);
  margin-bottom: 0;
}
.roam-quote-location {
  font-family: var(--roam-ref-typeface-body);
  font-size: var(--roam-ref-typescale-13);
  color: var(--roam-ref-palette-dark-text-ghost, var(--roam-ref-palette-cream-a30));
  margin-bottom: 0;
}

/* CTA Section */
.roam-hp-cta {
  background: var(--roam-ref-palette-forest);
  position: relative;
}
.roam-hp-cta::before,
.roam-hp-cta::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.roam-hp-cta::before { background: var(--roam-ref-glow-primary); }
.roam-hp-cta::after { background: var(--roam-ref-glow-accent); }
.roam-hp-cta > div {
  position: relative;
  z-index: 1;
  max-width: var(--roam-ref-layout-768);
  margin: 0 auto;
  text-align: center;
}
.roam-cta-heading {
  font-family: var(--roam-ref-typeface-display);
  font-size: var(--roam-ref-typescale-36);
  color: var(--roam-ref-palette-dark-text-primary);
  line-height: var(--roam-ref-leading-heading);
  margin-bottom: 0;
}
.roam-cta-heading em {
  color: var(--roam-ref-palette-gold);
  font-weight: 300;
  display: block;
}

/* Timeline step number text positioned inside the node */

/* ═══════════════════════════════════════════════════════════
   ICON SYSTEM — core/icon block styling
   Real SVG DOM elements via wp:icon blocks.
   CSS targets .roam-icon-box for sizing, borders,
   and color theming. Icons are accessible, crawlable,
   inspectable, and editable in the block editor.
   ═══════════════════════════════════════════════════════════ */

/* Base icon block reset */
.roam-icon-box {
  margin: 0;
  padding: 0;
  line-height: 0;
}
.roam-icon-box svg {
  display: block;
}

/* Icon box — the bordered circle container */
.roam-icon-box {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--roam-comp-icon-box-size);
  height: var(--roam-comp-icon-box-size);
  border-radius: var(--roam-ref-shape-md);
  flex-shrink: 0;
  margin-bottom: 0;
}
.roam-icon-box svg {
  width: var(--roam-ref-spacing-20);
  height: var(--roam-ref-spacing-20);
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Icon box border colors by tier */
.roam-icon-box-teal  { border: var(--roam-comp-icon-box-border-width) solid var(--roam-comp-icon-box-border-primary); }
.roam-icon-box-sage  { border: var(--roam-comp-icon-box-border-width) solid var(--roam-comp-icon-box-border-tertiary); }
.roam-icon-box-gold  { border: var(--roam-comp-icon-box-border-width) solid var(--roam-comp-icon-box-border-accent); }

/* Icon stroke colors */
.roam-icon-box-teal svg  { stroke: var(--roam-ref-palette-teal); color: var(--roam-ref-palette-teal); }
.roam-icon-box-sage svg  { stroke: var(--roam-ref-palette-sage); color: var(--roam-ref-palette-sage); }
.roam-icon-box-gold svg  { stroke: var(--roam-ref-palette-gold); color: var(--roam-ref-palette-gold); }
.roam-icon-box-cream { border: var(--roam-comp-icon-box-border-width) solid var(--roam-ref-palette-dark-border-medium); }
.roam-icon-box-cream svg { stroke: var(--roam-ref-palette-cream); color: var(--roam-ref-palette-cream); }

/* Quote icon — larger, no box, gold stroke */
.roam-quote-icon {
  margin-bottom: 0;
  border: none;
  border-radius: 0;
  background: none;
}
.roam-quote-icon svg {
  width: var(--roam-comp-icon-box-size);
  height: var(--roam-comp-icon-box-size);
  fill: none;
  stroke: var(--roam-ref-palette-gold);
  stroke-width: 1;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Timeline — real elements, not pseudo */
.roam-timeline {
  position: relative;
}
.roam-timeline::before {
  content: '';
  position: absolute;
  left: var(--roam-ref-spacing-20);
  top: 0;
  bottom: 0;
  width: var(--roam-comp-divider-bar-width, 2px);
  border-radius: var(--roam-ref-shape-xs);
  background: var(--roam-ref-gradient-accent-bar);
  z-index: 0;
}
.roam-card-timeline {
  display: grid;
  grid-template-columns: var(--roam-comp-icon-box-size) 1fr;
  align-items: center;
  column-gap: var(--roam-ref-spacing-14);
}
.roam-card-timeline .roam-gradient-divider {
  width: 100%;
}
.roam-card-timeline .roam-timeline-node {
  grid-column: 1;
  grid-row: 1;
  width: var(--roam-comp-icon-box-size);
  height: var(--roam-comp-icon-box-size);
  border-radius: var(--roam-ref-shape-md);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 1;
}
.roam-timeline-node-teal { border: var(--roam-comp-icon-box-border-width) solid var(--roam-comp-icon-box-border-primary); background: linear-gradient(var(--roam-ref-palette-teal-a15), var(--roam-ref-palette-teal-a15)), var(--roam-ref-palette-forest-light); }
.roam-timeline-node-sage { border: var(--roam-comp-icon-box-border-width) solid var(--roam-comp-icon-box-border-tertiary); background: linear-gradient(var(--roam-ref-palette-sage-a15), var(--roam-ref-palette-sage-a15)), var(--roam-ref-palette-forest-light); }
.roam-timeline-node-gold { border: var(--roam-comp-icon-box-border-width) solid var(--roam-comp-icon-box-border-accent); background: linear-gradient(var(--roam-ref-palette-gold-a15), var(--roam-ref-palette-gold-a15)), var(--roam-ref-palette-forest-light); }

.roam-card-timeline .roam-step-number {
  font-family: var(--roam-ref-typeface-body);
  font-size: var(--roam-ref-typescale-14);
  font-weight: var(--roam-ref-weight-semibold);
  margin: 0;
}
.roam-card-timeline .roam-step-title {
  grid-column: 2;
  grid-row: 1;
  font-family: var(--roam-ref-typeface-display);
  font-size: var(--roam-ref-typescale-18);
  line-height: var(--roam-ref-leading-card);
  margin: 0;
}
.roam-card-timeline .roam-card-body,
.roam-card-timeline .roam-btn-group,
.roam-card-timeline .roam-gradient-divider {
  grid-column: 2;
}

/* Timeline phase — spacing and alignment for step cards */
.roam-timeline-phase .roam-grid-card-3-133 {
  margin-top: var(--roam-sys-flow-separated);
  margin-left: calc(var(--roam-comp-icon-box-size) + var(--roam-ref-spacing-14));
}

/* ═══════════════════════════════════════════════════════════
   FORM SYSTEM — Pill-shaped fields
   Applies to all Jetpack contact form fields site-wide.
   Matches the ROAM design system input styling from Base44.
   ═══════════════════════════════════════════════════════════ */

/* Jetpack contact form CSS removed — replaced by HubSpot */

.roam-job-card {
  padding: var(--roam-sys-spacing-card);
  border-radius: var(--roam-ref-shape-xl);
  border: 1px solid var(--roam-comp-card-stat-border);
  background: var(--roam-comp-card-stat-bg);
}
.roam-job-meta {
  gap: var(--roam-ref-spacing-12);
  margin-bottom: var(--roam-ref-spacing-16);
  flex-wrap: wrap;
}
.roam-job-tag {
  font-family: var(--roam-ref-typeface-body);
  font-size: var(--roam-ref-typescale-10);
  letter-spacing: var(--roam-ref-tracking-md);
  text-transform: uppercase;
  color: var(--roam-ref-palette-dark-text-faint);
  background: var(--roam-ref-palette-cream-a6);
  border-radius: var(--roam-ref-shape-full);
  padding: var(--roam-ref-spacing-3) var(--roam-ref-spacing-10);
  margin: 0;
}

/* ═══════════════════════════════════════════════════════════
   HEADER LAYOUT SYSTEM
   Complete header — fixed, responsive, no Tailwind dependencies.
   ═══════════════════════════════════════════════════════════ */
.roam-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  background: var(--roam-ref-gradient-surface-stat);
  border-bottom: 1px solid var(--roam-ref-palette-dark-border-light);
  height: var(--roam-comp-header-height);
}
.roam-header-inner {
  max-width: var(--roam-ref-layout-1280);
  margin: 0 auto;
  height: 100%;
  display: flex;
  align-items: center;
  gap: var(--roam-ref-spacing-8);
  padding-left: var(--roam-sys-spacing-page-x);
  padding-right: var(--roam-sys-spacing-page-x);
}
.roam-header-logo {
  flex-shrink: 0;
  text-decoration: none;
}
.roam-header-logo img {
  width: auto;
  display: block;
  height: var(--roam-comp-header-logo-size);
}
@media (min-width: 768px) {
  .roam-header-logo img {
    height: var(--roam-ref-spacing-32);
  }
}
.roam-header-wordmark {
  font-family: var(--roam-ref-typeface-display);
  font-size: var(--roam-comp-header-logo-size);
  color: var(--roam-ref-palette-cream);
  letter-spacing: 2px;
  text-transform: uppercase;
}
/* Header actions wrapper removed — CTA and hamburger are direct flex children */
/* ── First-section offset for fixed header ──
   With no spacer div, first content element starts at viewport top.
   Negative margin pulls section up (behind where spacer was).
   Padding-top pushes content below the fixed header.
   Section's own background fills the header area — no body bleed. */

header.roam-header + section.roam-section {
  padding-top: calc(var(--roam-comp-header-height) + var(--roam-sys-spacing-section-top));
}

/* Hero family header clearance — hub gets full section-top breathing room;
   compensated classes (subpage/leaf/specialty/ecosystem) use their reduced
   16px value so the eyebrow aligns with hub eyebrow at Y = 60px from
   section-padding start. Market pages use the article wrapper clearance
   rule below (article.roam-market-page), so they're NOT included here. */
header.roam-header + section.roam-sec-hero-hub {
  padding-top: calc(var(--roam-comp-header-height) + var(--roam-ref-spacing-48));
}
header.roam-header + section.roam-sec-hero-subpage,
header.roam-header + section.roam-sec-hero-leaf,
header.roam-header + section.roam-sec-hero-packages,
header.roam-header + section.roam-sec-hero-owners,
header.roam-header + section.roam-sec-hero-calculator,
header.roam-header + section.roam-sec-hero-ecosystem {
  padding-top: calc(var(--roam-comp-header-height) + var(--roam-ref-spacing-4));
}

/* Market hero — header clearance + content-top spacing unified on the hero
   section itself, matching the pattern used by .roam-sec-hero-hub at L3448.
   Targets only the hero section (first child of article), so subsequent
   content sections inside the article are unaffected.
   120px total = 72px header clearance + 48px content-top spacing.
   v2.1.541 — extended to cover .roam-markets-hub-hero (archive-roam_market.php)
   which uses the same article wrapper pattern but a different hero class. */
header.roam-header + article.roam-market-page > section.roam-sec-hero-market,
header.roam-header + article.roam-market-page > section.roam-markets-hub-hero {
  padding-top: calc(var(--roam-comp-header-height) + var(--roam-ref-spacing-48));
}

header.roam-header + section.roam-fg-detail-body {
  padding-top: var(--roam-comp-header-height);
}

header.roam-header + .roam-sec-hero-listing {
  margin-top: 0;
}

/* ── Header CTA — responsive sizing ── */
.roam-header-cta {
  flex-shrink: 0;
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--roam-ref-typeface-body);
  font-weight: var(--roam-ref-weight-semibold);
  letter-spacing: var(--roam-ref-tracking-sm);
  text-transform: uppercase;
  text-decoration: none;
  line-height: 1;
  background: var(--roam-ref-palette-gold);
  color: var(--roam-ref-palette-forest);
  border-radius: var(--roam-ref-shape-full);
  border: none;
  box-sizing: border-box;
  transition: background 0.2s;
  /* SM: mobile */
  height: var(--roam-ref-spacing-32);
  font-size: var(--roam-ref-typescale-10);
  padding: 0 var(--roam-ref-spacing-16);
}
@media (min-width: 768px) {
  .roam-header-cta {
    /* MD: tablet + desktop */
    height: var(--roam-ref-spacing-40);
    font-size: var(--roam-ref-typescale-11);
    padding: 0 var(--roam-ref-spacing-20);
  }
}

/* ── Footer container ── */

.roam-header-cta:hover {
  background: var(--roam-ref-palette-gold-active);
  color: var(--roam-ref-palette-forest);
}

/* ── Desktop Nav — hidden on mobile ── */
.roam-desktop-nav {
  display: none;
  flex: 1;
  justify-content: center;
  align-items: center;
}
@media (min-width: 1024px) {
  .roam-desktop-nav { display: flex; }
}

/* ── Desktop Nav Links ── */
.roam-nav-link {
  display: flex;
  align-items: center;
  gap: var(--roam-ref-spacing-4);
  padding: var(--roam-ref-spacing-8) var(--roam-ref-spacing-12);
  font-family: var(--roam-ref-typeface-body);
  font-size: var(--roam-ref-typescale-14);
  font-weight: var(--roam-ref-weight-medium);
  letter-spacing: var(--roam-ref-tracking-sm);
  text-transform: uppercase;
  color: var(--roam-ref-palette-dark-text-primary);
  text-decoration: none;
  text-align: center;
  transition: var(--roam-ref-motion-standard);
}
.roam-nav-link:hover { color: var(--roam-ref-palette-teal); }
.roam-nav-link.roam-nav-active { color: var(--roam-ref-palette-teal); }

/* ── Nav Chevron ── */
svg.roam-icon-chevron {
  display: inline-block;
  width: var(--roam-ref-spacing-16);
  height: var(--roam-ref-spacing-16);
  flex-shrink: 0;
  color: var(--roam-ref-palette-teal);
  transition: transform 0.2s;
}

/* ── Dropdown Menu ── */
.roam-dd-link {
  display: block;
  padding: var(--roam-ref-spacing-10) var(--roam-ref-spacing-20);
  font-family: var(--roam-ref-typeface-body);
  font-size: var(--roam-ref-typescale-13);
  color: var(--roam-ref-palette-dark-text-faint);
  text-decoration: none;
  transition: var(--roam-ref-motion-standard);
}
.roam-dd-link:hover {
  color: var(--roam-ref-palette-teal);
}

/* ── Hamburger — visible on mobile only ── */
.roam-hamburger {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-end;
  gap: var(--roam-ref-spacing-6);
  min-width: var(--roam-ref-spacing-44);
  min-height: var(--roam-ref-spacing-44);
  padding: var(--roam-ref-spacing-8);
  cursor: pointer;
  background: none;
  border: none;
}
@media (min-width: 1024px) {
  .roam-hamburger { display: none; }
}

/* ── Mobile Nav — hidden by default, toggled by JS ── */
.roam-mobile-nav {
  display: none;
  background: var(--roam-ref-palette-forest-a98);
  border-top: 1px solid var(--roam-ref-palette-dark-border-light);
  overflow-y: auto;
  max-height: 80vh;
}
.roam-mobile-nav.roam-mobile-nav-open {
  display: block;
}
.roam-mobile-nav-inner {
  padding: var(--roam-ref-spacing-16) var(--roam-ref-spacing-24);
}
/* Mobile nav link row: link on left, toggle button on right */
.roam-mobile-link-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--roam-ref-palette-dark-border-light);
}
.roam-mobile-link {
  flex: 1;
  padding: var(--roam-ref-spacing-14) 0;
  font-family: var(--roam-ref-typeface-body);
  font-size: var(--roam-ref-typescale-13);
  font-weight: var(--roam-ref-weight-medium);
  letter-spacing: var(--roam-ref-tracking-sm);
  text-transform: uppercase;
  color: var(--roam-ref-palette-cream);
  text-decoration: none;
}
/* Chevron toggle button — separate from the link */
.roam-mobile-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--roam-ref-spacing-44);
  height: var(--roam-ref-spacing-44);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0 var(--roam-ref-spacing-4) 0 0;
}
.roam-mobile-toggle .roam-icon-chevron {
  color: var(--roam-ref-palette-teal);
  transition: transform 0.2s;
}
/* Submenu hidden by default, shown when parent has open class */
.roam-mobile-has-children .roam-mobile-sub {
  display: none;
}
.roam-mobile-has-children.roam-mobile-sub-open .roam-mobile-sub {
  display: block;
}
.roam-mobile-has-children.roam-mobile-sub-open .roam-mobile-toggle .roam-icon-chevron {
  transform: rotate(180deg);
}
.roam-mobile-sub-link {
  display: block;
  padding: var(--roam-ref-spacing-4) 0 var(--roam-ref-spacing-4) var(--roam-ref-spacing-16);
  font-family: var(--roam-ref-typeface-body);
  font-size: var(--roam-ref-typescale-13);
  color: var(--roam-ref-palette-dark-text-ghost);
  text-decoration: none;
}

/* ═══════════════════════════════════════════════════════════
   BODY CONTENT WIDTH
   Sections keep full-width backgrounds.
   Content constrained via responsive padding.
   On wide viewports (>1280px), padding grows to center content.
   ═══════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════
   FLOW SYSTEM — Container-Based Vertical Rhythm
   Buttons carry zero margin. Containers control all spacing.
   Three tokens: coupled (8px), related (16px), separated (24px).
   Browser defaults reset on all elements inside containers.
   ═══════════════════════════════════════════════════════════ */

/* Browser <p> reset moved to base rules (lower specificity, flow can override) */

/* ── Section Default Flow ──
   Every adjacent child in a section gets "related" spacing.
   Specific pairs override to "coupled" or "separated".

   .roam-subsection is the inner content container used inside
   patterns. It receives the same flow rules as .roam-section so
   that direct children of the subsection flow together. This lets
   patterns that wrap content in <section> + <div class="max-w-7xl …">
   get proper spacing without inline margins on each child. */
.roam-section > * + *,
.roam-subsection > * + * {
  margin-top: var(--roam-sys-flow-related);
}

/* ── Coupled: elements that form a single unit (8px) ── */
.roam-block-eyebrow + .roam-block-heading,
.roam-block-eyebrow-gold + .roam-block-heading,
.roam-block-eyebrow-faint + .roam-block-heading,
.roam-block-stat-mega + .roam-card-stat-label,
.roam-card-stat-num + .roam-card-stat-label {
  margin-top: var(--roam-sys-flow-coupled);
}

/* ── Separated: content type transitions (24px) ── */
.roam-block-heading + .roam-grid-card-3-133,
.roam-block-heading + .roam-grid-card-4,
.roam-block-heading + .roam-six-card-grid,
.roam-block-heading + .roam-grid-card-12-234,
.roam-block-heading + .roam-grid-card-1,
.roam-block-heading + .roam-grid-card-2,
.roam-block-body + .roam-grid-card-3-133,
.roam-block-body + .roam-grid-card-4,
.roam-block-body + .roam-six-card-grid,
.roam-block-body + .roam-grid-card-12-234,
.roam-block-body + .roam-grid-card-1,
.roam-block-body + .roam-grid-card-2,
.roam-block-body + .roam-btn-group,
.roam-body-lg + .roam-grid-card-1,
.roam-body-lg + .roam-grid-card-2,
.roam-body-lg + .roam-grid-card-3-133,
.roam-body-lg + .roam-grid-card-4,
.roam-body-lg + .roam-product-grid,
.roam-body-quote + .roam-btn-group,
.roam-section-border + .roam-block-subtitle {
  margin-top: var(--roam-sys-flow-separated);
}

/* ── Card Internal Flow ──
   Each card type defines spacing between its children. */

/* Icon cards (Problem, Services) */
/* Icon cards use flex-wrap — flow controlled per-element, not > * + * */
.roam-card-icon-three .roam-card-icon-subtitle { margin-top: var(--roam-sys-flow-coupled); }
.roam-card-icon-three .roam-gradient-divider { margin-top: var(--roam-sys-flow-related); }
.roam-card-icon-three .roam-card-body { margin-top: var(--roam-sys-flow-related); }
.roam-card-icon-three .roam-btn-group { margin-top: var(--roam-sys-flow-related); }

/* Pill cards (Audience) */
.roam-card-pill-three > * + * { margin-top: var(--roam-sys-flow-related); }
.roam-card-pill-three .roam-badge-pill-inline + .roam-card-pill-title { margin-top: var(--roam-sys-flow-coupled); }

/* Simple cards (Why ROAM) */
.roam-card-simple > * + * { margin-top: var(--roam-sys-flow-related); }
.roam-card-simple .roam-card-simple-title + .roam-card-body { margin-top: var(--roam-sys-flow-coupled); }

/* Proof cards (Before/After) */
/* Proof cards use grid — flow controlled per-element */
.roam-three-proof-card .roam-ba-values { margin-top: var(--roam-sys-flow-related); }

/* Stat cards */
.roam-card-stat-std > * + * { margin-top: var(--roam-sys-flow-coupled); }

/* Testimonial cards */
/* Testimonial cards use grid — flow controlled per-element */
.roam-card-quote .roam-gradient-divider { margin-top: var(--roam-sys-flow-related); }
.roam-card-quote .roam-quote-name { margin-top: var(--roam-sys-flow-related); }
.roam-card-quote .roam-quote-location { margin-top: var(--roam-sys-flow-coupled); }

/* Timeline cards */
.roam-card-timeline > * + * { margin-top: var(--roam-sys-flow-related); }
.roam-card-timeline .roam-step-number + .roam-step-title { margin-top: var(--roam-sys-flow-coupled); }

/* FAQ cards — handled by details/summary, no flow needed */

/* ═══════════════════════════════════════════════════════════
   BASE SECTION — carries ALL section behavior.
   Every section on every page uses this class.
   Page-specific classes (roam-hp-*) are optional overrides only.
   ═══════════════════════════════════════════════════════════ */
.roam-section {
  padding-top: var(--roam-sys-spacing-section-top);
  padding-bottom: var(--roam-sys-spacing-section-bottom);
  padding-left: max(var(--roam-sys-spacing-page-x), calc((100vw - var(--roam-ref-layout-1280)) / 2 + var(--roam-sys-spacing-page-x)));
  padding-right: max(var(--roam-sys-spacing-page-x), calc((100vw - var(--roam-ref-layout-1280)) / 2 + var(--roam-sys-spacing-page-x)));
}

/* ── Surface variants — background gradient alternation ── */
.roam-surface-hero { background: var(--roam-ref-gradient-surface-hero); }
.roam-surface-stat { background: var(--roam-ref-gradient-surface-stat); }
.roam-surface-content { background: var(--roam-ref-gradient-surface-content); }
.roam-surface-cream { background: var(--roam-ref-palette-cream); }
.roam-surface-forest {
  background: var(--roam-ref-palette-forest);
  color: var(--roam-ref-palette-cream);
}

/* ═══════════════════════════════════════════════════════════
   BLOCK BUTTON SYSTEM — Per-Type Control
   Button structure: <div class="roam-btn roam-btn-lg roam-btn-filled-gold">
     <a>Text →</a>
   </div>
   Our rules target the inner <a> through the wrapper class.
   ═══════════════════════════════════════════════════════════ */

/* Shared: vertical centering of text + arrow */
/* Button link — this IS the visual button */
.roam-btn > a,
button.roam-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 1;
  font-family: var(--roam-ref-typeface-body);
  font-weight: var(--roam-ref-weight-semibold);
  letter-spacing: var(--roam-ref-tracking-sm);
  text-transform: uppercase;
  border-radius: var(--roam-ref-shape-full);
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: var(--roam-ref-motion-emphasized-short);
  box-sizing: border-box;
}
.roam-btn > a:focus,
.roam-btn > a:focus-visible,
button.roam-btn:focus,
button.roam-btn:focus-visible {
  outline: none;
  box-shadow: none;
}
.roam-btn:focus,
.roam-btn:focus-visible {
  outline: none;
  box-shadow: none;
}


/* Button arrow icon — replaces inline styles on SVG */
/* Button arrow — scales per tier */
.roam-btn-arrow,
.roam-btn-icon {
  display: inline-block;
  flex-shrink: 0;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.roam-btn-xl .roam-btn-arrow { width: var(--roam-ref-spacing-24); height: var(--roam-ref-spacing-24); }
.roam-btn-lg .roam-btn-arrow { width: var(--roam-ref-spacing-20); height: var(--roam-ref-spacing-20); }
.roam-btn-md .roam-btn-arrow { width: var(--roam-ref-spacing-18); height: var(--roam-ref-spacing-18); }
.roam-btn-sm .roam-btn-arrow { width: var(--roam-ref-spacing-14); height: var(--roam-ref-spacing-14); }
.roam-btn-xs .roam-btn-arrow { width: var(--roam-ref-spacing-12); height: var(--roam-ref-spacing-12); }
/* ── Icon padding — reduces padding on the icon side ── */
.roam-btn-xl.roam-btn-icon-left > a,
button.roam-btn-xl.roam-btn-icon-left  { padding-left: var(--roam-ref-spacing-18); }
.roam-btn-xl.roam-btn-icon-right > a,
button.roam-btn-xl.roam-btn-icon-right { padding-right: var(--roam-ref-spacing-18); }
.roam-btn-lg.roam-btn-icon-left > a,
button.roam-btn-lg.roam-btn-icon-left  { padding-left: var(--roam-ref-spacing-16); }
.roam-btn-lg.roam-btn-icon-right > a,
button.roam-btn-lg.roam-btn-icon-right { padding-right: var(--roam-ref-spacing-16); }
.roam-btn-md.roam-btn-icon-left > a,
button.roam-btn-md.roam-btn-icon-left  { padding-left: var(--roam-ref-spacing-14); }
.roam-btn-md.roam-btn-icon-right > a,
button.roam-btn-md.roam-btn-icon-right { padding-right: var(--roam-ref-spacing-14); }
.roam-btn-sm.roam-btn-icon-left > a,
button.roam-btn-sm.roam-btn-icon-left  { padding-left: var(--roam-ref-spacing-12); }
.roam-btn-sm.roam-btn-icon-right > a,
button.roam-btn-sm.roam-btn-icon-right { padding-right: var(--roam-ref-spacing-12); }
.roam-btn-xs.roam-btn-icon-left > a,
button.roam-btn-xs.roam-btn-icon-left  { padding-left: var(--roam-ref-spacing-10); }
.roam-btn-xs.roam-btn-icon-right > a,
button.roam-btn-xs.roam-btn-icon-right { padding-right: var(--roam-ref-spacing-10); }

/* Responsive icon padding — triple-class specificity beats tier icon rules */
@media (min-width: 768px) {
  .roam-btn-lg-tablet.roam-btn-icon-right.roam-btn-icon-right > a { padding-right: var(--roam-ref-spacing-16); }
  .roam-btn-lg-tablet.roam-btn-icon-left.roam-btn-icon-left > a { padding-left: var(--roam-ref-spacing-16); }
}
@media (min-width: 1024px) {
  .roam-btn-lg-desktop.roam-btn-icon-right.roam-btn-icon-right > a { padding-right: var(--roam-ref-spacing-16); }
  .roam-btn-lg-desktop.roam-btn-icon-left.roam-btn-icon-left > a { padding-left: var(--roam-ref-spacing-16); }
}
/* Market button icon padding — override XS icon padding at MD responsive */
@media (min-width: 768px) {
  .roam-market-btn.roam-btn-icon-right.roam-btn-icon-right > a { padding-right: var(--roam-ref-spacing-14); }
  .roam-market-btn.roam-btn-icon-left.roam-btn-icon-left > a { padding-left: var(--roam-ref-spacing-14); }
}

/* ── WP Block Button Sizes ──
   Size and color are separate concerns.
   Wrapper gets: roam-btn-{size} roam-btn-{variant}
   Size sets height/font/padding. Variant sets colors only. */
/* Link size rules removed — inherited from parent tier */

/* ── Filled Gold ── */
.roam-btn-filled-gold > a,
button.roam-btn-filled-gold {
  background: var(--roam-ref-palette-gold);
  color: var(--roam-ref-palette-forest);
  border: none;
}
.roam-btn-filled-destruct > a,
button.roam-btn-filled-destruct {
  background: var(--roam-ref-palette-error);
  color: var(--roam-ref-palette-cream);
  border: none;
}
.roam-btn-filled-forest > a,
button.roam-btn-filled-forest {
  background: var(--roam-ref-palette-forest);
  color: var(--roam-ref-palette-cream);
  border: none;
}
.roam-btn-filled-cream > a,
button.roam-btn-filled-cream {
  background: var(--roam-ref-palette-cream);
  color: var(--roam-ref-palette-forest);
  border: none;
}
.roam-btn-filled-sage > a,
button.roam-btn-filled-sage {
  background: var(--roam-ref-palette-sage);
  color: var(--roam-ref-palette-forest);
  border: none;
}
.roam-btn-filled-teal > a,
button.roam-btn-filled-teal {
  background: var(--roam-ref-palette-teal);
  color: var(--roam-ref-palette-forest);
  border: none;
}

/* ── Ghost Teal ── */
.roam-btn-ghost-teal > a,
button.roam-btn-ghost-teal {
  background: transparent;
  color: var(--roam-ref-palette-teal);
  border: 1.5px solid var(--roam-ref-palette-teal-a40);
}
/* ghost-teal hover merged into unified rule above */

/* ── Ghost Gold ── */
.roam-btn-ghost-gold > a,
button.roam-btn-ghost-gold {
  background: transparent;
  color: var(--roam-ref-palette-gold);
  border: 1.5px solid var(--roam-ref-palette-gold-a40);
}
/* ghost-gold hover merged into unified rule above */

/* ── Text Link ── */
.roam-btn-text-link > a {
  background: transparent;
  color: var(--roam-ref-palette-dark-text-muted, rgba(250,246,241,0.5));
  border: none;
  border-bottom: 1px solid var(--roam-ref-palette-dark-border-subtle);
  border-radius: 0;
  padding: var(--roam-ref-spacing-2) 0;
  font-family: var(--roam-ref-typeface-body);
  font-size: var(--roam-ref-typescale-12);
  font-weight: var(--roam-ref-weight-medium);
  letter-spacing: var(--roam-ref-tracking-md);
  text-transform: uppercase;
}
.roam-btn-text-link > a:hover {
  color: var(--roam-ref-palette-dark-text-primary);
  border-bottom-color: var(--roam-ref-palette-dark-border-visible);
}

/* ── Market Grid Button ── */
.roam-market-btn > a {
  width: 100%;
  justify-content: space-between;
}

/* ═══════════════════════════════════════════════════════════
   SEPARATOR OVERRIDES
   Override WP separator defaults
   Our rules need to override that.
   ═══════════════════════════════════════════════════════════ */
hr.roam-section-border {
  border: none;
  background: var(--roam-ref-palette-dark-border-visible);
  width: 100%;
  height: var(--roam-ref-spacing-1);
  max-width: none;
  opacity: 1;
  margin-bottom: 0;
}

/* ═══════════════════════════════════════════════════════════
   CARD SYSTEM — WordPress columns as styled cards
   ═══════════════════════════════════════════════════════════ */
.roam-card-icon-three,
.roam-card-pill-three,
.roam-card-quote {
  padding: var(--roam-sys-spacing-card);
  border-radius: var(--roam-ref-shape-xl);
  border: 1px solid var(--roam-comp-card-content-border);
  background: var(--roam-comp-card-content-bg);
}
.roam-card-stat-std {
  text-align: center;
}
.roam-job-card {
  padding: var(--roam-sys-spacing-card);
  border-radius: var(--roam-ref-shape-xl);
  border: 1px solid var(--roam-comp-card-stat-border);
  background: var(--roam-comp-card-stat-bg);
  margin-bottom: var(--roam-ref-spacing-16);
}

/* ═══════════════════════════════════════════════════════════
   HERO STATS — 2-col mobile, 4-col desktop
   ═══════════════════════════════════════════════════════════ */


/* ── Before & After Revenue Cards ── */
.roam-block-subtitle {
  font-family: var(--roam-ref-typeface-body);
  font-size: var(--roam-ref-typescale-11);
  letter-spacing: var(--roam-ref-tracking-lg);
  text-transform: uppercase;
  color: var(--roam-ref-palette-dark-text-faint);
  margin-bottom: 0;
}
@media (min-width: 1024px) {
  }
.roam-three-proof-card {
  padding: var(--roam-sys-spacing-card);
  border-radius: var(--roam-ref-shape-xl);
  border: 1px solid var(--roam-comp-card-stat-border);
  background: var(--roam-comp-card-stat-bg);
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  column-gap: var(--roam-ref-spacing-16);
}
.roam-three-proof-card .roam-badge-pill-inline {
  grid-column: 1;
  grid-row: 1;
}
.roam-three-proof-card .roam-badge-pill-subheader {
  grid-column: 2;
  grid-row: 1;
}
.roam-three-proof-card .roam-ba-values {
  grid-column: 1 / -1;
}
.roam-ba-values {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--roam-ref-spacing-16);
}
.roam-ba-micro {
  font-family: var(--roam-ref-typeface-body);
  font-size: var(--roam-ref-typescale-9);
  text-transform: uppercase;
  color: var(--roam-ref-palette-dark-text-ghost);
  margin-bottom: 0;
}
.roam-ba-before {
  font-family: var(--roam-ref-typeface-display);
  font-size: var(--roam-ref-typescale-18);
  color: var(--roam-ref-palette-dark-text-faint);
  text-decoration: line-through;
}
.roam-ba-after {
  font-family: var(--roam-ref-typeface-display);
  font-size: var(--roam-ref-typescale-18);
  color: var(--roam-ref-palette-cream);
}
.roam-ba-delta {
  font-family: var(--roam-ref-typeface-display);
  font-size: var(--roam-ref-typescale-18);
  color: var(--roam-ref-palette-teal);
}

/* ── Why Cards (Proof section) ── */
.roam-grid-card-4 {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--roam-ref-spacing-16);
  margin-bottom: 0;
}
@media (min-width: 768px) {
  .roam-grid-card-4 {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 1024px) {
  .roam-grid-card-4 {
    grid-template-columns: repeat(4, 1fr);
  }
}
.roam-card-simple {
  padding: var(--roam-sys-spacing-card);
  border-radius: var(--roam-ref-shape-xl);
  border: 1px solid var(--roam-comp-card-content-border);
  background: var(--roam-comp-card-content-bg);
}
.roam-card-simple .roam-card-title {
  font-size: var(--roam-ref-typescale-18);
  margin-bottom: 0;
}
.roam-card-simple .roam-body {
  font-size: var(--roam-ref-typescale-12);
  color: var(--roam-ref-palette-dark-text-body);
}
/* ═══════════════════════════════════════════════════════════
   FAQ — Custom chevron, replaces browser disclosure triangle
   ═══════════════════════════════════════════════════════════ */
.roam-card-faq {
  border-bottom: 1px solid var(--roam-ref-palette-dark-border-medium);
}
.roam-card-faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--roam-ref-spacing-16);
  padding: var(--roam-ref-spacing-20) 0;
  font-family: var(--roam-ref-typeface-body);
  font-size: var(--roam-ref-typescale-15);
  font-weight: var(--roam-ref-weight-medium);
  color: var(--roam-ref-palette-dark-text-primary);
  cursor: pointer;
  list-style: none;
}
.roam-card-faq summary::-webkit-details-marker { display: none; }
.roam-card-faq summary::after {
  content: '';
  display: inline-block;
  width: var(--roam-ref-spacing-16);
  height: var(--roam-ref-spacing-16);
  flex-shrink: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235B8FA8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  transition: transform 0.2s;
}
.roam-card-faq[open] summary { color: var(--roam-ref-palette-teal); }
.roam-card-faq[open] summary::after { transform: rotate(180deg); }

/* ═══════════════════════════════════════════════════════════
   ICON BLOCK — roam/icon rendered figures
   ═══════════════════════════════════════════════════════════ */
.roam-icon-box {
  margin: 0;
  padding: 0;
  line-height: 0;
}
/* Footer version number */
.roam-footer-version {
  font-family: var(--roam-ref-typeface-body);
  font-size: var(--roam-ref-typescale-10);
  color: var(--roam-ref-palette-dark-text-ghost, var(--roam-ref-palette-cream-a20));
  letter-spacing: 0.1em;
}


/* ═══════════════════════════════════════════════════════════
   FOOTER
   ═══════════════════════════════════════════════════════════ */
.roam-footer {
  background: var(--roam-ref-palette-forest);
  border-top: 1px solid var(--roam-ref-palette-dark-border-light);
}
.roam-footer-inner {
  max-width: var(--roam-ref-layout-1280);
  margin: 0 auto;
  padding: var(--roam-ref-spacing-64) var(--roam-sys-spacing-page-x) var(--roam-ref-spacing-32);
}
/* Footer links default to cream */
.roam-footer a {
  color: var(--roam-ref-palette-dark-text-muted);
}
.roam-footer a:hover {
  color: var(--roam-ref-palette-cream);
}

.roam-footer-top {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--roam-ref-spacing-32);
  margin-bottom: var(--roam-ref-spacing-48);
}
@media (min-width: 768px) {
  .roam-footer-top { grid-template-columns: 1fr 1fr; }
}
.roam-footer-brand { max-width: var(--roam-ref-layout-320); }
.roam-footer-logo-link {
  color: var(--roam-ref-palette-cream); display: inline-block; margin-bottom: var(--roam-ref-spacing-16); }
.roam-footer-logo-img { height: var(--roam-comp-footer-logo-size); width: auto; }
.roam-footer-tagline {
  font-family: var(--roam-ref-typeface-body);
  font-size: var(--roam-ref-typescale-13);
  color: var(--roam-comp-footer-color-body);
  line-height: var(--roam-ref-leading-body);
  margin: 0 0 var(--roam-ref-spacing-24) 0;
}
.roam-footer-socials { display: flex; gap: var(--roam-ref-spacing-10); }
.roam-footer-social-link {
  color: var(--roam-ref-palette-cream);
  width: var(--roam-comp-footer-social-size);
  height: var(--roam-comp-footer-social-size);
  border-radius: var(--roam-ref-shape-full);
  background: var(--roam-comp-footer-social-bg);
  display: flex;
  align-items: center;
  justify-content: center;
}
.roam-icon-social,
.roam-icon-contact { stroke: var(--roam-comp-footer-social-icon); }
.roam-icon-social--filled { fill: var(--roam-comp-footer-social-icon); stroke: none; }
.roam-footer-contact-label {
  font-family: var(--roam-ref-typeface-body);
  font-size: var(--roam-ref-typescale-11);
  letter-spacing: var(--roam-ref-tracking-xl);
  text-transform: uppercase;
  color: var(--roam-ref-palette-teal);
  margin-bottom: var(--roam-ref-spacing-16);
}
.roam-footer-contact-list { display: flex; flex-direction: column; gap: var(--roam-ref-spacing-12); }
.roam-footer-contact-item { display: flex; align-items: center; gap: var(--roam-ref-spacing-12); }
.roam-footer-contact-link {
  font-family: var(--roam-ref-typeface-body);
  font-size: var(--roam-ref-typescale-13);
  color: var(--roam-comp-footer-color-body);
  text-decoration: none;
}
.roam-footer-section-divider {
  height: var(--roam-comp-divider-height);
  border-radius: var(--roam-ref-shape-xs);
  background: var(--roam-ref-gradient-brand);
  margin-bottom: var(--roam-ref-spacing-20);
}
.roam-footer-section-group { margin-bottom: var(--roam-ref-spacing-20); }
.roam-footer-section-title {
  font-family: var(--roam-ref-typeface-body);
  font-size: var(--roam-ref-typescale-11);
  letter-spacing: var(--roam-ref-tracking-xl);
  text-transform: uppercase;
  color: var(--roam-ref-palette-teal);
  margin: 0 0 var(--roam-ref-spacing-12) 0;
}
.roam-footer-section-title-link {
  color: inherit;
  text-decoration: none;
  transition: var(--roam-ref-motion-standard);
}
.roam-footer-section-title-link:hover,
.roam-footer-section-title-link:focus-visible {
  color: var(--roam-ref-palette-cream);
}
.roam-footer-link-grid { display: flex; flex-wrap: wrap; gap: var(--roam-ref-spacing-6) var(--roam-ref-spacing-24); }
.roam-footer-link {
  font-family: var(--roam-ref-typeface-body);
  font-size: var(--roam-ref-typescale-12);
  color: var(--roam-comp-footer-color-link);
  text-decoration: none;
  transition: var(--roam-ref-motion-standard);
}
.roam-footer-link:hover { color: var(--roam-ref-palette-cream); }
.roam-footer-bottom {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  gap: var(--roam-ref-spacing-16);
  padding-top: var(--roam-ref-spacing-20);
  margin-top: var(--roam-ref-spacing-20);
  border-top: 1px solid var(--roam-ref-palette-dark-border-light);
}
@media (min-width: 768px) {
  .roam-footer-bottom { flex-direction: row; }
}
.roam-footer-brand-mark { display: flex; align-items: center; gap: var(--roam-ref-spacing-16); }
.roam-footer-brand-name {
  font-family: var(--roam-ref-typeface-body);
  font-size: var(--roam-ref-typescale-12);
  font-weight: var(--roam-ref-weight-semibold);
  letter-spacing: var(--roam-ref-tracking-xl);
  text-transform: uppercase;
  color: var(--roam-ref-palette-gold);
}
.roam-footer-copyright {
  font-family: var(--roam-ref-typeface-body);
  font-size: var(--roam-ref-typescale-10);
  color: var(--roam-comp-footer-color-copyright);
}

/* ═══════════════════════════════════════════════════════════
   HERO BLOCK — Block-Level Responsive System
   .roam-sec-hero is the responsive controller.
   ALL children respond through the parent at each breakpoint.
   Mobile-first: base styles are mobile, breakpoints scale up.
   ═══════════════════════════════════════════════════════════ */

/* ── Mobile (base) ── */
.roam-sec-hero {
  padding-top: var(--roam-comp-header-height);
  padding-bottom: var(--roam-ref-spacing-32);
  padding-left: max(var(--roam-sys-spacing-page-x), calc((100vw - var(--roam-ref-layout-1280)) / 2 + var(--roam-sys-spacing-page-x)));
  padding-right: max(var(--roam-sys-spacing-page-x), calc((100vw - var(--roam-ref-layout-1280)) / 2 + var(--roam-sys-spacing-page-x)));
  background: var(--roam-ref-gradient-surface-hero);
  display: flex;
  flex-direction: column;
  position: relative;
}
.roam-sec-hero-content {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  min-height: var(--roam-comp-hero-content-height);
  position: relative;
  z-index: 1;
}
.roam-sec-hero::before,
.roam-sec-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.roam-sec-hero::before { background: var(--roam-ref-glow-primary); }
.roam-sec-hero::after { background: var(--roam-ref-glow-accent); }

/* All direct children sit above the glow pseudo-elements */
.roam-sec-hero > * {
  position: relative;
  z-index: 1;
}

/* Hero heading — mobile */
.roam-sec-hero .roam-hero-heading {
  font-family: var(--roam-ref-typeface-display);
  color: var(--roam-ref-palette-dark-text-primary);
  line-height: var(--roam-ref-leading-tight);
  font-weight: var(--roam-ref-weight-normal);
  letter-spacing: var(--roam-ref-tracking-tight);
  font-size: clamp(var(--roam-ref-typescale-36), 9.5vw, 48px);
  margin: 0 0 var(--roam-ref-spacing-20) 0;
}
.roam-sec-hero .roam-hero-heading em {
  color: var(--roam-ref-palette-gold);
  font-weight: 300;
  display: block;
}
.roam-sec-hero .roam-hero-heading-break {
  display: block;
}

/* Hero divider — always the gradient bar, never a thin line */
.roam-sec-hero hr.roam-gradient-divider {
  border: none;
  border-top: none;
  background: var(--roam-ref-gradient-brand-simple);
  width: var(--roam-comp-divider-width);
  height: var(--roam-comp-divider-height);
  border-radius: var(--roam-ref-spacing-2);
  max-width: none;
  opacity: 1;
  margin: 0 0 var(--roam-ref-spacing-20) 0;
}

/* Hero body text — mobile */
.roam-sec-hero .roam-body-lg {
  font-family: var(--roam-ref-typeface-body);
  color: var(--roam-ref-palette-dark-text-body);
  line-height: var(--roam-ref-leading-body);
  font-size: var(--roam-ref-typescale-14);
  max-width: var(--roam-ref-layout-580);
  margin: 0 0 var(--roam-ref-spacing-32) 0;
}
.roam-sec-hero .roam-body-lg a {
  color: var(--roam-ref-palette-gold);
  font-weight: var(--roam-ref-weight-semibold);
  text-decoration: none;
}

/* Hero section border (before stats) — thin full-width line */


/* Hero review badge — stars + text */
.roam-hero-review {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--roam-ref-spacing-4);
  margin-top: var(--roam-ref-spacing-24);
  margin-bottom: var(--roam-ref-spacing-20);
}
.roam-hero-review-stars {
  display: flex;
  align-items: center;
  gap: var(--roam-ref-spacing-2);
}
.roam-hero-review-text {
  font-family: var(--roam-ref-typeface-body);
  font-size: var(--roam-ref-typescale-14);
  font-weight: var(--roam-ref-weight-semibold);
  letter-spacing: var(--roam-ref-tracking-sm);
  text-transform: uppercase;
  color: var(--roam-ref-palette-dark-text-ghost);
}
@media (min-width: 768px) {
  .roam-hero-review-text {
    font-size: var(--roam-ref-typescale-16);
  }
}
/* Hero stats — 2 col mobile */
.roam-sec-hero .roam-grid-stat-hero {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--roam-ref-spacing-20);
  text-align: center;
  margin-top: var(--roam-sys-flow-separated);
  padding-top: var(--roam-sys-flow-separated);
  border-top: 1px solid var(--roam-ref-palette-dark-border-visible);
  position: relative;
  z-index: 1;
}
.roam-sec-hero .roam-card-stat-hero {
  font-family: var(--roam-ref-typeface-display);
  color: var(--roam-ref-palette-dark-text-primary);
  font-size: var(--roam-ref-typescale-28);
  margin: 0 0 var(--roam-ref-spacing-4) 0;
}
.roam-sec-hero .roam-card-stat-label {
  font-family: var(--roam-ref-typeface-body);
  font-size: var(--roam-ref-typescale-9);
  font-weight: var(--roam-ref-weight-medium);
  letter-spacing: var(--roam-ref-tracking-lg);
  text-transform: uppercase;
  color: var(--roam-ref-palette-dark-text-faint);
  margin-bottom: 0;
}

/* Hero beacon badge — mobile */
.roam-sec-hero .roam-beacon-badge {
  margin-top: var(--roam-ref-spacing-24);
  margin-bottom: var(--roam-sys-flow-separated);
}
.roam-sec-hero .roam-badge-pill-inline {
  display: inline-flex;
  align-items: center;
  background: var(--roam-ref-palette-forest-a30);
  color: var(--roam-ref-palette-gold);
  border: 1px solid var(--roam-ref-palette-teal-a40);
  border-radius: var(--roam-ref-shape-full);
  padding: var(--roam-ref-spacing-8) var(--roam-ref-spacing-20) var(--roam-ref-spacing-8) var(--roam-ref-spacing-14);
  font-family: var(--roam-ref-typeface-body);
  font-size: var(--roam-ref-typescale-10);
  font-weight: var(--roam-ref-weight-bold);
  letter-spacing: var(--roam-ref-tracking-lg);
  text-transform: uppercase;
  margin: 0;
}
.roam-sec-hero .roam-badge-pill-inline::before {
  content: '';
  width: var(--roam-ref-spacing-6);
  height: var(--roam-ref-spacing-6);
  border-radius: 50%;
  background: var(--roam-ref-palette-teal);
  margin-right: var(--roam-ref-spacing-8);
  flex-shrink: 0;
  animation: roam-beacon-pulse 2s ease-in-out infinite;
}

/* Hero buttons — mobile */
.roam-sec-hero .roam-btn-group {
  align-items: baseline;
  margin-bottom: var(--roam-ref-spacing-32);
}
.roam-sec-hero .roam-btn-text-link {
  margin-top: 0;
}

/* ── Tablet (768px) ── */
@media (min-width: 768px) {
  .roam-sec-hero {
    min-height: 100vh;
  }
  .roam-sec-hero-content {
    flex: 1;
    min-height: 0;
  }

  .roam-sec-hero .roam-hero-heading {
    font-size: clamp(54px, 8vw, 82px);
    max-width: 80vw;
    margin-bottom: var(--roam-sys-flow-separated);
  }
  .roam-sec-hero .roam-grid-stat-hero {
    grid-template-columns: repeat(4, 1fr);
    gap: var(--roam-ref-spacing-32);
    margin-top: auto;
  }
  .roam-sec-hero .roam-card-stat-label {
    font-size: var(--roam-ref-typescale-12);
  }
  .roam-sec-hero .roam-hero-review-text {
    font-size: var(--roam-ref-typescale-12);
  }
  .roam-sec-hero hr.roam-gradient-divider {
    width: var(--roam-comp-divider-width);
    margin-bottom: var(--roam-sys-flow-separated);
  }
  .roam-sec-hero .roam-body-lg {
    font-size: var(--roam-ref-typescale-16);
    margin-bottom: var(--roam-ref-spacing-40);
  }
  .roam-sec-hero .roam-card-stat-hero {
    font-size: var(--roam-ref-typescale-32);
  }
  .roam-sec-hero .roam-beacon-badge {
    margin-top: var(--roam-ref-spacing-32);
    margin-bottom: var(--roam-ref-spacing-32);
  }
  .roam-sec-hero .roam-beacon-badge .roam-badge-pill-inline {
    font-size: var(--roam-ref-typescale-12);
    padding: var(--roam-ref-spacing-8) var(--roam-ref-spacing-20) var(--roam-ref-spacing-8) var(--roam-ref-spacing-14);
  }
  .roam-sec-hero .roam-btn-group {
    margin-bottom: var(--roam-ref-spacing-40);
  }
}

/* ── Desktop (1024px) ── */
@media (min-width: 1024px) {
  .roam-sec-hero .roam-hero-heading {
    font-size: clamp(54px, 8vw, 82px);
    max-width: var(--roam-ref-layout-1024);
  }
  .roam-sec-hero hr.roam-gradient-divider {
    width: var(--roam-comp-divider-width);
  }

}

/* ═══════════════════════════════════════════════════════════
   HERO SECTION FAMILY — Hub / Subpage / Leaf + Specialties
   Standalone classes parallel to .roam-sec-hero (homepage)
   and .roam-sec-hero-market. Each class is self-contained.
   Shared properties grouped for DRY authoring only.
   ═══════════════════════════════════════════════════════════ */

/* ── Shared base — Hub + Subpage + Leaf + Specialties ── */
.roam-sec-hero-hub,
.roam-sec-hero-subpage,
.roam-sec-hero-leaf,
.roam-sec-hero-packages,
.roam-sec-hero-owners,
.roam-sec-hero-calculator,
.roam-sec-hero-ecosystem {
  padding-top: var(--roam-ref-spacing-48);
  padding-bottom: var(--roam-sys-spacing-section-bottom);
  padding-left: max(var(--roam-sys-spacing-page-x), calc((100vw - var(--roam-ref-layout-1280)) / 2 + var(--roam-sys-spacing-page-x)));
  padding-right: max(var(--roam-sys-spacing-page-x), calc((100vw - var(--roam-ref-layout-1280)) / 2 + var(--roam-sys-spacing-page-x)));
  background: var(--roam-ref-gradient-surface-stat);
  position: relative;
}

/* ── Child flow — default related spacing between siblings ── */
.roam-sec-hero-hub > * + *,
.roam-sec-hero-subpage > * + *,
.roam-sec-hero-leaf > * + *,
.roam-sec-hero-packages > * + *,
.roam-sec-hero-owners > * + *,
.roam-sec-hero-calculator > * + * {
  margin-top: var(--roam-sys-flow-related);
}

/* ── Flow override — back-link to eyebrow is a content-type shift ── */
.roam-sec-hero-hub > .roam-back-link + .roam-block-eyebrow,
.roam-sec-hero-subpage > .roam-back-link + .roam-block-eyebrow,
.roam-sec-hero-leaf > .roam-back-link + .roam-block-eyebrow,
.roam-sec-hero-packages > .roam-back-link + .roam-block-eyebrow,
.roam-sec-hero-owners > .roam-back-link + .roam-block-eyebrow,
.roam-sec-hero-calculator > .roam-back-link + .roam-block-eyebrow {
  margin-top: var(--roam-sys-flow-separated);
}

/* ── Flow override — eyebrow to heading is a coupled pair ── */
.roam-sec-hero-hub > .roam-block-eyebrow + .roam-block-heading,
.roam-sec-hero-subpage > .roam-block-eyebrow + .roam-block-heading,
.roam-sec-hero-leaf > .roam-block-eyebrow + .roam-block-heading,
.roam-sec-hero-packages > .roam-block-eyebrow + .roam-block-heading,
.roam-sec-hero-owners > .roam-block-eyebrow + .roam-block-heading,
.roam-sec-hero-calculator > .roam-block-eyebrow + .roam-block-heading {
  margin-top: var(--roam-sys-flow-coupled);
}

/* ── Ecosystem hero — unique icon-box layout preserved ──
   Base (padding/surface/position) inherited from grouped selector above.
   Unique children (.roam-product-hero-header, .roam-proof-callout, etc.)
   continue to use their existing rules elsewhere in this stylesheet. */

/* ── Eyebrow alignment compensation ──
   Pages with a back-link or breadcrumb get reduced section padding-top
   so the eyebrow lands at the same Y position as a hub page (where the
   eyebrow is the first child at 48px from section top).
   Math: 4 (padding) + 20 (back-link/breadcrumb slot) + 24 (flow-separated)
         = 48px to content heading. */
.roam-sec-hero-subpage,
.roam-sec-hero-leaf,
.roam-sec-hero-packages,
.roam-sec-hero-owners,
.roam-sec-hero-calculator,
.roam-sec-hero-ecosystem,
.roam-sec-hero-market {
  padding-top: var(--roam-ref-spacing-4);
}

/* Market hero — default flow between direct children (matches the pattern on
   .roam-sec-hero-hub at L4508). Specific pairs like breadcrumb → hero-grid
   override this default via their own adjacency rules below. */
.roam-sec-hero-market > * + * {
  margin-top: var(--roam-sys-flow-related);
}

/* Market breadcrumb → hero-grid flow (matches the back-link → eyebrow
   flow-separated rule on hub/subpage/leaf/specialty). */
.roam-sec-hero-market > .roam-market-breadcrumb + .roam-market-hero-grid {
  margin-top: var(--roam-sys-flow-separated);
}


/* ═══════════════════════════════════════════════════════════
   DRAFT HOMEPAGE — Hero Split + Contact Form
   ═══════════════════════════════════════════════════════════ */

/* Mobile: stacked, form below content */
.roam-hero-split {
  position: relative;
  z-index: 1;
}

/* Form card */
.roam-hero-form-card {
  padding: var(--roam-ref-spacing-24);
  border-radius: var(--roam-ref-shape-xl);
  border: 1px solid var(--roam-ref-palette-teal-a30);
  background: var(--roam-ref-palette-forest-a30);
  backdrop-filter: blur(var(--roam-ref-spacing-12));
  margin-top: var(--roam-sys-flow-separated);
}
.roam-hero-form-heading {
  font-family: var(--roam-ref-typeface-display);
  font-size: var(--roam-ref-typescale-24);
  color: var(--roam-ref-palette-dark-text-primary);
  line-height: var(--roam-ref-leading-heading);
  margin: 0 0 var(--roam-sys-flow-coupled) 0;
}
.roam-hero-form-subtext {
  font-family: var(--roam-ref-typeface-body);
  font-size: var(--roam-ref-typescale-14);
  color: var(--roam-ref-palette-dark-text-body);
  margin: 0 0 var(--roam-sys-flow-related) 0;
}
.roam-hero-form-card .roam-gradient-divider {
  margin-bottom: var(--roam-sys-flow-related);
}

/* Form fields */
.roam-hero-form {
  display: flex;
  flex-direction: column;
}
/* Form flow tokens */
.roam-hero-form .roam-form-field + .roam-form-field { margin-top: var(--roam-sys-flow-related); }
.roam-hero-form .roam-hero-form-submit { margin-top: var(--roam-sys-flow-separated); }
.roam-hero-form .roam-hero-form-disclaimer { margin-top: var(--roam-sys-flow-coupled); }
.roam-form-field {
  display: flex;
  flex-direction: column;
  gap: var(--roam-ref-spacing-4);
}
.roam-form-label {
  font-family: var(--roam-ref-typeface-body);
  font-size: var(--roam-ref-typescale-11);
  font-weight: var(--roam-ref-weight-semibold);
  letter-spacing: var(--roam-ref-tracking-md);
  text-transform: uppercase;
  color: var(--roam-ref-palette-dark-text-faint);
}
.roam-form-optional {
  font-weight: var(--roam-ref-weight-normal);
  text-transform: none;
  letter-spacing: 0;
  color: var(--roam-ref-palette-dark-text-ghost);
}
.roam-form-input {
  font-family: var(--roam-ref-typeface-body);
  font-size: var(--roam-ref-typescale-14);
  color: var(--roam-ref-palette-dark-text-primary);
  background: var(--roam-ref-palette-forest);
  border: 1px solid var(--roam-ref-palette-teal-a30);
  border-radius: var(--roam-ref-shape-md);
  padding: var(--roam-ref-spacing-12) var(--roam-ref-spacing-14);
  transition: var(--roam-ref-motion-standard);
}
.roam-form-input::placeholder {
  color: var(--roam-ref-palette-dark-text-ghost);
}
.roam-form-input:focus {
  outline: none;
  border-color: var(--roam-ref-palette-teal);
}
.roam-hero-form-submit {
  width: 100%;
}
.roam-hero-form-disclaimer {
  font-family: var(--roam-ref-typeface-body);
  font-size: var(--roam-ref-typescale-11);
  color: var(--roam-ref-palette-dark-text-ghost);
  text-align: center;
  margin: 0;
}

/* Tablet+: 60/40 side by side */
@media (min-width: 768px) {
  .roam-sec-hero-draft .roam-hero-split {
    display: grid;
    grid-template-columns: 3fr 2fr;
    align-items: start;
    gap: var(--roam-ref-spacing-40);
  }
  .roam-sec-hero-draft .roam-sec-hero-content {
    min-height: 0;
  }
  .roam-hero-form-card {
    margin-top: 0;
    position: sticky;
    top: calc(var(--roam-comp-header-height) + var(--roam-ref-spacing-24));
  }
}

/* ═══════════════════════════════════════════════════════════
   RECOVERED RULES — Missing from v2.1.18 base
   Added back in v2.1.26 with new token names.
   ═══════════════════════════════════════════════════════════ */

/* Card standalone selectors (compound rules exist but these ensure specificity) */
.roam-card-pill-three {
  padding: var(--roam-sys-spacing-card);
  border-radius: var(--roam-ref-shape-xl);
  border: 1px solid var(--roam-comp-card-content-border);
  background: var(--roam-comp-card-content-bg);
}
.roam-card-quote {
  padding: var(--roam-sys-spacing-card);
  border-radius: var(--roam-ref-shape-xl);
  border: 1px solid var(--roam-comp-card-content-border);
  background: var(--roam-comp-card-content-bg);
}
.roam-card-stat-std {
  padding: var(--roam-sys-spacing-card);
  border-radius: var(--roam-ref-shape-xl);
  border: 1px solid var(--roam-comp-card-stat-border);
  background: var(--roam-comp-card-stat-bg);
  text-align: center;
}

/* Beacon badge pill — was missing compound selector */

/* Market button display */
.roam-market-btn > a {
  display: flex;
  width: 100%;
  justify-content: space-between;
  align-items: center;
}

/* Separator border-top override — WP adds border-top, we need to kill it */
hr.roam-section-border {
  border: none;
  border-top: none;
}

/* Old transparent wrapper system removed — wrapper now carries base + size + color via inheritance */


/* Results cards — 1 column on tablet (too much data per card) */
@media (min-width: 768px) and (max-width: 1023px) {
  .roam-hp-performance .roam-grid-card-3-133 {
    grid-template-columns: 1fr;
  }
}




/* ═══════════════════════════════════════════════════════
   BLOG COMPONENTS — single post + index (cream surface)
   ═══════════════════════════════════════════════════════ */

/* Layout — 2-column on desktop */
.roam-blog-layout {
  display: flex;
  flex-direction: column;
  gap: var(--roam-sys-flow-related);
  max-width: var(--roam-ref-layout-1280);
  margin: 0 auto;
}

/* Remove content card margin-top inside blog — flex gap handles spacing */
.roam-blog-main .roam-card-fg-content,
.roam-blog-sidebar .roam-card-fg-content {
  margin-top: 0;
}

@media (min-width: 768px) {
  .roam-blog-layout {
    flex-direction: row;
    gap: var(--roam-sys-flow-separated);
  }
}

.roam-blog-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--roam-sys-flow-related);
}

.roam-blog-sidebar {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: var(--roam-sys-flow-related);
}

@media (min-width: 768px) {
  .roam-blog-sidebar { width: var(--roam-ref-layout-288); }
}

/* ── Info Card — overlaps hero image ── */
.roam-blog-info-card {
  margin-top: calc(-1 * var(--roam-ref-spacing-48));
  position: relative;
  z-index: 3;
}

/* Info card content flow — flex column for consistent spacing */
.roam-blog-main > .roam-card-fg-content:first-child,
.roam-blog-main > .roam-back-link + .roam-card-fg-content {
  display: flex;
  flex-direction: column;
  gap: var(--roam-sys-flow-coupled);
}

/* ── Meta row ── */
.roam-blog-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--roam-sys-flow-related);
}

.roam-blog-category-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--roam-ref-spacing-6);
  font-family: var(--roam-ref-typeface-body);
  font-size: var(--roam-ref-typescale-10);
  font-weight: var(--roam-ref-weight-semibold);
  letter-spacing: var(--roam-ref-tracking-md);
  text-transform: uppercase;
  color: var(--roam-ref-palette-teal);
}

.roam-blog-category-icon {
  width: var(--roam-ref-spacing-14);
  height: var(--roam-ref-spacing-14);
  stroke: var(--roam-ref-palette-teal);
  stroke-width: 1.5;
  fill: none;
}

.roam-blog-date {
  font-family: var(--roam-ref-typeface-body);
  font-size: var(--roam-ref-typescale-12);
  color: var(--roam-ref-palette-text-muted);
}

/* ── Title ── */
.roam-blog-title {
  font-family: var(--roam-ref-typeface-display);
  font-size: var(--roam-ref-typescale-32);
  font-weight: 400;
  color: var(--roam-ref-palette-forest);
  line-height: 1.15;
  letter-spacing: -0.3px;
  margin: 0;
}

/* ── Author row ── */
.roam-grid-blog-author {
  display: flex;
  align-items: center;
  gap: var(--roam-sys-flow-related);
}

.roam-blog-author-name {
  font-family: var(--roam-ref-typeface-body);
  font-size: var(--roam-ref-typescale-14);
  font-weight: var(--roam-ref-weight-semibold);
  color: var(--roam-ref-palette-forest);
  margin: 0;
}

.roam-blog-author-role {
  font-family: var(--roam-ref-typeface-body);
  font-size: var(--roam-ref-typescale-12);
  color: var(--roam-ref-palette-text-muted);
  margin: 0;
}

.roam-blog-avatar {
  width: var(--roam-ref-spacing-36);
  height: var(--roam-ref-spacing-36);
  border-radius: var(--roam-ref-shape-full);
  background: var(--roam-ref-palette-cream);
  border: 1px solid var(--roam-ref-palette-border-cream);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--roam-ref-typeface-body);
  font-size: var(--roam-ref-typescale-14);
  color: var(--roam-ref-palette-teal);
  flex-shrink: 0;
}

.roam-blog-avatar-lg {
  width: var(--roam-ref-spacing-48);
  height: var(--roam-ref-spacing-48);
  font-size: var(--roam-ref-typescale-15);
  margin-bottom: var(--roam-sys-flow-coupled);
}

/* ── Title card additions ── */
.roam-blog-subtitle {
  font-family: var(--roam-ref-typeface-display);
  font-size: var(--roam-ref-typescale-18);
  font-weight: 400;
  color: var(--roam-ref-palette-text-body);
  line-height: var(--roam-ref-leading-card);
  margin: 0;
}

.roam-blog-introduction {
  font-family: var(--roam-ref-typeface-body);
  font-size: var(--roam-ref-typescale-15);
  color: var(--roam-ref-palette-text-body);
  line-height: var(--roam-ref-leading-body);
  margin: 0;
}

/* ── Callout body text — light surface ── */
.roam-blog-callout-body {
  font-family: var(--roam-ref-typeface-body);
  font-size: var(--roam-ref-typescale-14);
  color: var(--roam-ref-palette-text-body);
  line-height: var(--roam-ref-leading-body);
  margin: 0;
}

.roam-blog-callout-forest .roam-blog-callout-body {
  color: var(--roam-ref-palette-dark-text-body);
}

.roam-blog-callout-forest .roam-blog-callout-label-gold {
  color: var(--roam-ref-palette-gold);
}

/* ── Stat numbers/labels — light surface ── */
.roam-blog-stat-num {
  font-family: var(--roam-ref-typeface-display);
  font-size: var(--roam-ref-typescale-36);
  color: var(--roam-ref-palette-teal);
  line-height: var(--roam-ref-leading-none);
  margin: 0;
}

.roam-blog-stat-label {
  font-family: var(--roam-ref-typeface-body);
  font-size: var(--roam-ref-typescale-12);
  letter-spacing: var(--roam-ref-tracking-lg);
  text-transform: uppercase;
  color: var(--roam-ref-palette-text-muted);
  margin: 0;
}

/* ── Case snapshot type — light surface ── */
.roam-blog-case-type {
  font-family: var(--roam-ref-typeface-display);
  font-size: var(--roam-ref-typescale-20);
  color: var(--roam-ref-palette-forest);
  line-height: var(--roam-ref-leading-card);
  margin: 0;
}

/* ── Bottom line — light surface ── */
.roam-blog-bottom-line {
  font-family: var(--roam-ref-typeface-body);
  font-size: var(--roam-ref-typescale-15);
  color: var(--roam-ref-palette-dark-text-body);
  line-height: var(--roam-ref-leading-body);
  margin: 0;
}

/* ── Author photo ── */
.roam-blog-avatar-photo {
  width: var(--roam-ref-spacing-48);
  height: var(--roam-ref-spacing-48);
  border-radius: var(--roam-ref-shape-full);
  object-fit: cover;
}

/* ── Prose — article body content ── */
.roam-blog-prose h2 {
  font-family: var(--roam-ref-typeface-display);
  font-size: var(--roam-ref-typescale-24);
  color: var(--roam-ref-palette-forest);
  line-height: var(--roam-ref-leading-heading);
  margin: var(--roam-sys-flow-separated) 0 var(--roam-sys-flow-coupled) 0;
}

.roam-blog-prose h3 {
  font-family: var(--roam-ref-typeface-display);
  font-size: var(--roam-ref-typescale-18);
  color: var(--roam-ref-palette-forest);
  line-height: var(--roam-ref-leading-card);
  margin: var(--roam-sys-flow-related) 0 var(--roam-sys-flow-coupled) 0;
}

.roam-blog-prose p {
  font-family: var(--roam-ref-typeface-body);
  font-size: var(--roam-ref-typescale-14);
  color: var(--roam-ref-palette-text-body);
  line-height: var(--roam-ref-leading-body);
  margin: 0 0 var(--roam-sys-flow-related) 0;
}

.roam-blog-prose a {
  color: var(--roam-ref-palette-teal);
  text-decoration: none;
}

.roam-blog-prose strong {
  color: var(--roam-ref-palette-forest);
  font-weight: var(--roam-ref-weight-semibold);
}

.roam-blog-prose ul,
.roam-blog-prose ol {
  padding-left: var(--roam-sys-spacing-page-x);
  margin: 0 0 var(--roam-sys-flow-related) 0;
}

.roam-blog-prose li {
  font-family: var(--roam-ref-typeface-body);
  font-size: var(--roam-ref-typescale-14);
  color: var(--roam-ref-palette-text-body);
  line-height: var(--roam-ref-leading-body);
  margin-bottom: var(--roam-sys-flow-coupled);
}

/* ── Callout accents (applied on roam-card-fg-content) ── */
.roam-blog-callout-gold { border-left: var(--roam-comp-divider-bar-width) solid var(--roam-ref-palette-gold); }
.roam-blog-callout-teal { border-left: var(--roam-comp-divider-bar-width) solid var(--roam-ref-palette-teal); }
.roam-blog-callout-error { border-left: var(--roam-comp-divider-bar-width) solid var(--roam-ref-palette-error); }

.roam-blog-callout-forest {
  background: var(--roam-ref-palette-forest);
  border-color: transparent;
}

.roam-blog-callout-label {
  font-family: var(--roam-ref-typeface-body);
  font-size: var(--roam-ref-typescale-10);
  font-weight: var(--roam-ref-weight-semibold);
  letter-spacing: var(--roam-ref-tracking-md);
  text-transform: uppercase;
  margin-bottom: var(--roam-sys-flow-coupled);
}

.roam-blog-callout-label-gold { color: var(--roam-ref-palette-gold); }
.roam-blog-callout-label-teal { color: var(--roam-ref-palette-teal); }
.roam-blog-callout-label-error { color: var(--roam-ref-palette-error); }

/* ── Quote attribution ── */
.roam-blog-quote-attr {
  font-family: var(--roam-ref-typeface-body);
  font-size: var(--roam-ref-typescale-12);
  font-weight: var(--roam-ref-weight-semibold);
  color: var(--roam-ref-palette-text-muted);
  margin: var(--roam-sys-flow-related) 0 0 0;
}

/* ── Key Takeaways — flat 2-col grid (inside roam-card-fg-content) ── */
.roam-blog-takeaways {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: var(--roam-sys-flow-related);
  row-gap: var(--roam-sys-flow-related);
  align-items: baseline;
}

.roam-blog-takeaways-label {
  grid-column: 1 / -1;
  font-family: var(--roam-ref-typeface-body);
  font-size: var(--roam-ref-typescale-10);
  font-weight: var(--roam-ref-weight-semibold);
  letter-spacing: var(--roam-ref-tracking-md);
  text-transform: uppercase;
  color: var(--roam-ref-palette-gold);
  margin: 0 0 var(--roam-sys-flow-coupled) 0;
}

.roam-blog-takeaways-num {
  font-family: var(--roam-ref-typeface-display);
  font-size: var(--roam-ref-typescale-14);
  font-weight: 400;
  color: var(--roam-ref-palette-gold);
  line-height: var(--roam-ref-leading-body);
}

.roam-blog-takeaways-text {
  font-family: var(--roam-ref-typeface-body);
  font-size: var(--roam-ref-typescale-14);
  color: var(--roam-ref-palette-text-body);
  line-height: var(--roam-ref-leading-body);
  margin: 0;
}

/* ── Sidebar cards ── */

.roam-blog-sidebar-label {
  font-family: var(--roam-ref-typeface-body);
  font-size: var(--roam-ref-typescale-10);
  font-weight: var(--roam-ref-weight-semibold);
  letter-spacing: var(--roam-ref-tracking-md);
  text-transform: uppercase;
  color: var(--roam-ref-palette-teal);
  margin: 0;
}

.roam-blog-sidebar-title {
  font-family: var(--roam-ref-typeface-display);
  font-size: var(--roam-ref-typescale-16);
  font-weight: 400;
  color: var(--roam-ref-palette-forest);
  margin: 0;
}

.roam-blog-sidebar-body {
  font-family: var(--roam-ref-typeface-body);
  font-size: var(--roam-ref-typescale-14);
  color: var(--roam-ref-palette-text-body);
  line-height: var(--roam-ref-leading-body);
  margin: 0;
}

.roam-blog-sidebar-faint {
  font-family: var(--roam-ref-typeface-body);
  font-size: var(--roam-ref-typescale-12);
  color: var(--roam-ref-palette-text-muted);
  margin: 0;
}

/* ── Share row ── */
.roam-blog-share-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--roam-sys-flow-coupled);
}

/* ── Subscribe form ── */
/* Subscribe form — layout via roam-flex-col-coupled */

.roam-blog-subscribe-input {
  width: 100%;
  height: var(--roam-ref-spacing-40);
  padding: 0 var(--roam-ref-spacing-14);
  border-radius: var(--roam-ref-shape-full);
  border: 1px solid var(--roam-ref-palette-border-cream);
  background: var(--roam-ref-palette-cream);
  font-family: var(--roam-ref-typeface-body);
  font-size: var(--roam-ref-typescale-14);
  color: var(--roam-ref-palette-forest);
  -webkit-appearance: none;
  appearance: none;
  outline: none;
  transition: border-color 0.2s ease;
}

.roam-blog-subscribe-input:focus {
  border-color: var(--roam-ref-palette-teal);
}

.roam-blog-subscribe-input::placeholder {
  color: var(--roam-ref-palette-text-ghost);
}

/* ── Sidebar related articles (stacked) ── */
/* Sidebar related — layout via roam-flex-col-coupled */

/* ── Related Articles ── */
.roam-blog-related {
  max-width: var(--roam-ref-layout-1280);
  margin: 0 auto;
}

.roam-blog-related .roam-blog-sidebar-label {
  margin-bottom: var(--roam-sys-flow-related);
}

.roam-grid-blog-related {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--roam-sys-flow-related);
}

/* ── Journal Card Small (on cream surface) ── */
.roam-card-journal-small {
  display: grid;
  grid-template-rows: auto 1fr auto;
  padding: var(--roam-sys-spacing-card);
  border-radius: var(--roam-ref-shape-xl);
  background: var(--roam-ref-palette-white);
  box-shadow: var(--roam-ref-elevation-1);
  text-decoration: none;
  transition: box-shadow var(--roam-ref-motion-standard), transform var(--roam-ref-motion-standard);
}

.roam-card-journal-small:hover {
  box-shadow: var(--roam-ref-elevation-2);
  transform: var(--roam-ref-elevation-lift);
}

/* Sidebar context: no shadow, cream bg, no hover lift */
.roam-blog-sidebar .roam-card-journal-small {
  background: var(--roam-ref-palette-cream);
  box-shadow: none;
  border: 1px solid var(--roam-ref-palette-border-cream);
}

.roam-blog-sidebar .roam-card-journal-small:hover {
  box-shadow: none;
  transform: none;
}

.roam-card-journal-small-top {
  display: flex;
  align-items: center;
  gap: var(--roam-sys-flow-coupled);
  margin-bottom: var(--roam-sys-flow-related);
}

.roam-card-journal-small-icon {
  width: var(--roam-ref-spacing-16);
  height: var(--roam-ref-spacing-16);
  stroke: var(--roam-ref-palette-teal);
  stroke-width: 1.5;
  fill: none;
  flex-shrink: 0;
}

.roam-card-journal-small-cat {
  font-family: var(--roam-ref-typeface-body);
  font-size: var(--roam-ref-typescale-10);
  font-weight: var(--roam-ref-weight-semibold);
  letter-spacing: var(--roam-ref-tracking-md);
  text-transform: uppercase;
  color: var(--roam-ref-palette-teal);
}

.roam-card-journal-small-date {
  font-family: var(--roam-ref-typeface-body);
  font-size: var(--roam-ref-typescale-10);
  color: var(--roam-ref-palette-text-ghost);
  margin-left: auto;
}

.roam-card-journal-small-title {
  font-family: var(--roam-ref-typeface-display);
  font-size: var(--roam-ref-typescale-16);
  font-weight: 400;
  color: var(--roam-ref-palette-forest);
  line-height: var(--roam-ref-leading-card);
  margin: 0;
}

.roam-card-journal-small-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--roam-ref-spacing-6);
  margin-top: var(--roam-sys-flow-related);
  font-family: var(--roam-ref-typeface-body);
  font-size: var(--roam-ref-typescale-12);
  font-weight: var(--roam-ref-weight-semibold);
  color: var(--roam-ref-palette-gold);
}

.roam-card-journal-small-btn .roam-icon-inline {
  width: var(--roam-ref-spacing-12);
  height: var(--roam-ref-spacing-12);
  stroke: var(--roam-ref-palette-gold);
}

/* ═══════════════════════════════════════════════════════
   FORM COMPONENTS — inputs, selects, labels, groups
   ═══════════════════════════════════════════════════════ */

.roam-form-group {
  margin-bottom: var(--roam-sys-flow-related);
}

.roam-form-label {
  display: block;
  font-family: var(--roam-ref-typeface-body);
  font-size: var(--roam-ref-typescale-14);
  color: var(--roam-ref-palette-dark-text-primary);
  margin-bottom: var(--roam-ref-spacing-6);
}

.roam-form-label .roam-icon-inline {
  width: var(--roam-ref-spacing-14);
  height: var(--roam-ref-spacing-14);
  vertical-align: middle;
  margin-right: var(--roam-ref-spacing-6);
  stroke: var(--roam-ref-palette-teal);
}

.roam-form-input,
.roam-form-select {
  width: 100%;
  background: var(--roam-comp-card-stat-bg);
  border: 1px solid var(--roam-ref-palette-dark-border-medium);
  border-radius: var(--roam-ref-shape-sm);
  color: var(--roam-ref-palette-dark-text-primary);
  font-family: var(--roam-ref-typeface-body);
  font-size: var(--roam-ref-typescale-14);
  padding: var(--roam-ref-spacing-12) var(--roam-ref-spacing-14);
  outline: none;
  box-sizing: border-box;
  transition: var(--roam-ref-motion-standard);
}

.roam-form-input:focus,
.roam-form-select:focus {
  border-color: var(--roam-ref-palette-teal);
}

.roam-form-select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%235B8FA8' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--roam-ref-spacing-12) center;
  padding-right: var(--roam-ref-spacing-36);
}

.roam-form-search {
  padding-left: var(--roam-ref-spacing-36);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%235B8FA8' stroke-width='2'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: left var(--roam-ref-spacing-12) center;
}

.roam-grid-tag-cloud {
  display: flex;
  flex-wrap: wrap;
  gap: var(--roam-sys-flow-coupled);
}

.roam-badge-tag-dark {
  display: inline-flex;
  align-items: center;
  padding: var(--roam-ref-spacing-6) var(--roam-ref-spacing-14);
  border-radius: var(--roam-ref-shape-full);
  border: 1px solid var(--roam-ref-palette-dark-border-medium);
  background: transparent;
  color: var(--roam-ref-palette-dark-text-body);
  font-family: var(--roam-ref-typeface-body);
  font-size: var(--roam-ref-typescale-12);
  cursor: pointer;
  transition: var(--roam-ref-motion-standard);
}

.roam-badge-tag-dark.is-active {
  border-color: var(--roam-ref-palette-teal);
  background: var(--roam-ref-palette-teal-a10);
  color: var(--roam-ref-palette-teal);
}

/* ═══════════════════════════════════════════════════════
   GLOSSARY COMPONENTS — term definitions
   ═══════════════════════════════════════════════════════ */

.roam-glossary-entry {
  padding: var(--roam-sys-spacing-card) 0;
  border-bottom: 1px solid var(--roam-ref-palette-dark-border-medium);
}

.roam-glossary-term {
  font-family: var(--roam-ref-typeface-display);
  font-size: var(--roam-ref-typescale-18);
  color: var(--roam-ref-palette-dark-text-primary);
  line-height: var(--roam-ref-leading-card);
  margin-bottom: var(--roam-sys-flow-coupled);
}

.roam-glossary-def {
  font-family: var(--roam-ref-typeface-body);
  font-size: var(--roam-ref-typescale-14);
  color: var(--roam-ref-palette-dark-text-body);
  line-height: var(--roam-ref-leading-body);
}

.roam-glossary-rel {
  font-family: var(--roam-ref-typeface-body);
  font-size: var(--roam-ref-typescale-12);
  color: var(--roam-ref-palette-dark-text-faint);
  font-style: italic;
  margin-top: var(--roam-sys-flow-coupled);
}

/* ═══════════════════════════════════════════════════════════════
   FIELD GUIDES — Listing, Detail, and Hub pages
   All values reference existing --roam-* tokens.
   Buttons use theme .roam-btn system (PHP outputs wrapper pattern).
   Stars use theme .roam-icon-star system.
   Icons use theme .roam-icon-* classes.
   ═══════════════════════════════════════════════════════════════ */

/* ── FG Shared Utilities ── */

/* Image treatment — desaturated editorial look (uses ref token) */
.roam-fg-card-image img,
.roam-sec-hero-listing img {
  filter: var(--roam-ref-photo-filter);
}

/* Card elevation hover — shadow lift on interactive cards */
.roam-fg-card:hover {
  box-shadow: var(--roam-ref-elevation-1);
}

/* ── FG Container ── */

.roam-fg {
  max-width: var(--roam-ref-layout-1280);
  margin: 0 auto;
  padding: 0 var(--roam-sys-spacing-page-x);
}

/* ── FG L1 Filter: Category Row ── */

.roam-fg-nav {
  background: var(--roam-ref-palette-white);
  border-bottom: 1px solid var(--roam-ref-palette-border-cream);
  position: sticky;
  top: var(--roam-comp-header-height);
  z-index: 10;
}

.roam-fg-nav-inner {
  max-width: var(--roam-ref-layout-1200);
  margin: 0 auto;
  padding: 0 var(--roam-sys-spacing-page-x);
}

.roam-fg-l1 {
  display: flex;
  align-items: center;
  border-bottom: 1px solid var(--roam-ref-palette-border-cream);
  padding: var(--roam-ref-spacing-12) 0;
  gap: var(--roam-sys-flow-coupled);
}

.roam-fg-l1-scroll-wrap {
  position: relative;
  flex: 1;
  overflow: hidden;
}

.roam-fg-l1-scroll {
  display: flex;
  gap: var(--roam-sys-flow-coupled);
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  padding: 0 2px;
  justify-content: center;
}

.roam-fg-l1-scroll::-webkit-scrollbar { display: none; }

.roam-fg-l1-arrow {
  position: absolute;
  top: 0;
  bottom: 0;
  width: var(--roam-ref-spacing-36);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  transition: opacity 0.2s ease;
}

.roam-fg-l1-arrow[hidden] { display: none; }

/* Desktop: show all L1 filters, centered, no scroll */
@media (min-width: 1024px) {
  .roam-fg-l1 {
    justify-content: center;
  }
  .roam-fg-l1-scroll-wrap {
    flex: none;
    overflow: visible;
  }
  .roam-fg-l1-scroll {
    flex-wrap: wrap;
    justify-content: center;
    overflow-x: visible;
    padding: 0;
  }
  .roam-fg-l1-arrow {
    display: none;
  }
}

.roam-fg-l1-arrow--left {
  left: 0;
  background: linear-gradient(to right, var(--roam-ref-palette-white) 60%, transparent);
}

.roam-fg-l1-arrow--right {
  right: 0;
  background: linear-gradient(to left, var(--roam-ref-palette-white) 60%, transparent);
}

.roam-fg-l1-arrow-icon {
  width: var(--roam-ref-spacing-18);
  height: var(--roam-ref-spacing-18);
  stroke: var(--roam-ref-palette-text-muted);
  fill: none;
}

/* Category button: circle (closed) → pill (open) */
.roam-fg-cat-btn {
  height: var(--roam-ref-spacing-40);
  width: var(--roam-ref-spacing-40);
  min-width: var(--roam-ref-spacing-40);
  padding: 0;
  border-radius: var(--roam-ref-shape-full);
  -webkit-appearance: none;
  appearance: none;
  border: none;
  background: var(--roam-ref-palette-neutral-light);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  flex-shrink: 0;
  overflow: hidden;
  white-space: nowrap;
  transition: background-color 0.25s ease, width 0.25s ease, padding 0.25s ease;
}

.roam-fg-cat-btn.is-active {
  width: auto;
  padding: 0 var(--roam-ref-spacing-20);
  background: var(--roam-ref-palette-forest);
  gap: var(--roam-sys-flow-coupled);
}

.roam-fg-cat-icon {
  width: var(--roam-ref-spacing-16);
  height: var(--roam-ref-spacing-16);
  stroke: var(--roam-ref-palette-text-muted);
  stroke-width: 1.5;
  fill: none;
  flex-shrink: 0;
}

.roam-fg-cat-btn.is-active .roam-fg-cat-icon {
  stroke: var(--roam-ref-palette-white);
  stroke-width: 2;
}

.roam-fg-cat-label {
  display: none;
  font-family: var(--roam-ref-typeface-body);
  font-size: var(--roam-ref-typescale-11);
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--roam-ref-palette-white);
}

.roam-fg-cat-btn.is-active .roam-fg-cat-label {
  display: inline;
}

/* Pipe divider */
.roam-fg-l1-pipe {
  width: 1px;
  height: var(--roam-ref-spacing-24);
  background: var(--roam-ref-palette-border-cream);
  flex-shrink: 0;
}

/* Shield+ partner button */
.roam-fg-partner-btn {
  width: var(--roam-ref-spacing-40);
  height: var(--roam-ref-spacing-40);
  border-radius: var(--roam-ref-shape-full);
  border: none;
  background: var(--roam-ref-palette-neutral-light);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background-color 0.25s ease;
}

.roam-fg-partner-btn.is-active {
  background: var(--roam-ref-palette-gold);
}

.roam-fg-partner-btn .roam-fg-shield-body {
  fill: var(--roam-ref-palette-gold);
}

.roam-fg-partner-btn .roam-fg-shield-plus {
  stroke: var(--roam-ref-palette-neutral-light);
  stroke-width: 2;
}

.roam-fg-partner-btn.is-active .roam-fg-shield-body {
  fill: var(--roam-ref-palette-white);
}

.roam-fg-partner-btn.is-active .roam-fg-shield-plus {
  stroke: var(--roam-ref-palette-gold);
}

/* ── FG L2 Filter: Tier Pills ── */

.roam-fg-l2 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--roam-sys-flow-coupled);
  padding: var(--roam-ref-spacing-12) 0;
  max-width: var(--roam-ref-layout-480);
  margin: 0 auto;
}

.roam-fg-tier-btn {
  height: var(--roam-ref-spacing-36);
  padding: 0 var(--roam-ref-spacing-14);
  border-radius: var(--roam-ref-shape-full);
  border: none;
  -webkit-appearance: none;
  appearance: none;
  background: var(--roam-ref-palette-neutral-light);
  color: var(--roam-ref-palette-text-ghost);
  font-family: var(--roam-ref-typeface-body);
  font-size: var(--roam-ref-typescale-11);
  font-weight: 600;
  letter-spacing: 0.05em;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--roam-ref-spacing-6);
  transition: background-color 0.25s ease, color 0.25s ease;
}

.roam-fg-tier-btn.is-active {
  background: var(--roam-ref-palette-forest);
  color: var(--roam-ref-palette-white);
}

.roam-fg-tier-count {
  font-weight: 600;
}

/* ── FG Card Grid ── */

.roam-grid-fg {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--roam-ref-spacing-28);
}

@media (min-width: 768px) {
  .roam-grid-fg {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .roam-grid-fg {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ── FG Listing Card ── */

.roam-fg-card {
  background: var(--roam-ref-palette-white);
  border-radius: var(--roam-ref-shape-xl);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: var(--roam-ref-elevation-1);
  transition: var(--roam-ref-motion-emphasized-short);
}


.roam-fg-card[hidden] { display: none; }

/* FG Card Image */

.roam-fg-card-image {
  width: 100%;
  aspect-ratio: 3 / 2;
  flex-shrink: 0;
  position: relative;
  overflow: hidden;
  background: linear-gradient(145deg, var(--roam-ref-palette-forest) 0%, var(--roam-ref-palette-forest-light) 40%, var(--roam-ref-palette-forest-soft) 100%);
}

.roam-fg-card-image img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.roam-fg-card-placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--roam-ref-palette-white);
}

.roam-badge-tag-category {
  position: absolute;
  top: var(--roam-ref-spacing-14);
  left: var(--roam-ref-spacing-14);
  background: var(--roam-ref-palette-white-a20);
  backdrop-filter: blur(var(--roam-ref-spacing-12));
  padding: var(--roam-ref-spacing-5) var(--roam-ref-spacing-12);
  border-radius: var(--roam-ref-shape-xl);
  font-family: var(--roam-ref-typeface-body);
  font-size: var(--roam-ref-typescale-10);
  font-weight: 600;
  color: var(--roam-ref-palette-white);
  letter-spacing: 1.2px;
  text-transform: uppercase;
}

.roam-fg-card-heart-badge {
  position: absolute;
  top: var(--roam-ref-spacing-14);
  right: calc(var(--roam-ref-spacing-14) + var(--roam-ref-spacing-40));
  filter: drop-shadow(0 1px var(--roam-ref-spacing-3) rgba(0,0,0,0.3));
}

/* When heart appears without partner badge, move it to the right edge */
.roam-fg-card-image:not(:has(.roam-fg-card-partner-badge)) .roam-fg-card-heart-badge {
  right: var(--roam-ref-spacing-14);
}

.roam-fg-card-partner-badge {
  position: absolute;
  top: var(--roam-ref-spacing-14);
  right: var(--roam-ref-spacing-14);
}

/* FG Card Body — Flow Spacing */

.roam-fg-card-body {
  padding: var(--roam-sys-spacing-card);
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.roam-fg-card-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--roam-sys-flow-coupled);
}

.roam-fg-card-meta + .roam-fg-card-title {
  margin-top: var(--roam-sys-flow-coupled);
}

.roam-fg-card-title + .roam-fg-card-price {
  margin-top: var(--roam-sys-flow-coupled);
}

.roam-fg-card-tier {
  display: flex;
  align-items: center;
  gap: var(--roam-ref-spacing-6);
  font-family: var(--roam-ref-typeface-body);
  font-size: var(--roam-ref-typescale-10);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1.5px;
}

.roam-fg-meta-icon {
  width: var(--roam-ref-spacing-12);
  height: var(--roam-ref-spacing-12);
  fill: none;
  stroke-width: 2;
}

/* Tier colors */
.roam-tier-local { color: var(--roam-ref-palette-tier-local); }
.roam-tier-local .roam-fg-meta-icon { stroke: var(--roam-ref-palette-tier-local); }
.roam-tier-regional { color: var(--roam-ref-palette-tier-regional); }
.roam-tier-regional .roam-fg-meta-icon { stroke: var(--roam-ref-palette-tier-regional); }
.roam-tier-daytrip { color: var(--roam-ref-palette-tier-daytrip); }
.roam-tier-daytrip .roam-fg-meta-icon { stroke: var(--roam-ref-palette-tier-daytrip); }

/* Rating container (stars use theme .roam-icon-star system) */
.roam-fg-card-rating {
  display: flex;
  align-items: center;
  gap: var(--roam-ref-spacing-4);
}

.roam-fg-rating-num {
  font-family: var(--roam-ref-typeface-body);
  font-size: var(--roam-ref-typescale-12);
  color: var(--roam-ref-palette-text-light);
  margin-left: var(--roam-ref-spacing-2);
}

.roam-fg-rating-count {
  font-family: var(--roam-ref-typeface-body);
  font-size: var(--roam-ref-typescale-11);
  color: var(--roam-ref-palette-text-ghost);
}

/* FG Card Title */
.roam-fg-card-title {
  font-family: var(--roam-ref-typeface-display);
  font-size: var(--roam-ref-typescale-20);
  font-weight: 400;
  color: var(--roam-ref-palette-forest);
  line-height: var(--roam-ref-leading-card);
  letter-spacing: -0.3px;
}

/* FG Card Price */
.roam-fg-card-price {
  font-family: var(--roam-ref-typeface-body);
  font-size: var(--roam-ref-typescale-14);
  font-weight: 600;
  color: var(--roam-ref-palette-gold);
}

/* FG Card Excerpt */
.roam-fg-card-excerpt {
  margin-top: var(--roam-sys-flow-related);
  font-family: var(--roam-ref-typeface-body);
  font-size: var(--roam-ref-typescale-14);
  color: var(--roam-ref-palette-text-secondary);
  line-height: var(--roam-ref-leading-body);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* FG Progressive Disclosure */

.roam-fg-card-expand[hidden] { display: none; }
.roam-fg-card-expand { display: flex; flex-direction: column; margin-top: var(--roam-sys-flow-related); }
.roam-fg-card-expand > * + * { margin-top: var(--roam-sys-flow-related); }

/* What We Love — icon uses theme .roam-icon-heart */
.roam-fg-card-love {
  position: relative;
  padding-left: var(--roam-ref-spacing-20);
}

.roam-fg-accent-bar {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: var(--roam-comp-divider-bar-width);
  border-radius: var(--roam-ref-shape-xs);
  background: var(--roam-ref-gradient-accent-bar);
}

.roam-fg-love-header {
  display: flex;
  align-items: center;
  gap: var(--roam-ref-spacing-5);
  margin-bottom: var(--roam-sys-flow-coupled);
}

.roam-fg-love-header span {
  font-family: var(--roam-ref-typeface-body);
  font-size: var(--roam-ref-typescale-10);
  font-weight: 600;
  color: var(--roam-ref-palette-teal);
  text-transform: uppercase;
  letter-spacing: 2px;
}

.roam-fg-love-content p {
  font-family: var(--roam-ref-typeface-body);
  font-size: var(--roam-ref-typescale-14);
  color: var(--roam-ref-palette-text-body);
  line-height: 1.6;
  margin: 0;
}

/* FG Quote — icon uses theme .roam-icon-quote */
.roam-fg-card-quote {
  background: var(--roam-ref-palette-cream);
  border-radius: var(--roam-ref-shape-sm);
  padding: var(--roam-ref-spacing-14) var(--roam-sys-spacing-card);
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  gap: var(--roam-sys-flow-coupled) var(--roam-sys-flow-coupled);
}

.roam-fg-card-quote .roam-icon-quote {
  grid-column: 1;
  grid-row: 1;
  align-self: start;
  margin-top: var(--roam-ref-spacing-2);
}

.roam-fg-quote-text {
  grid-column: 2;
  grid-row: 1;
  font-family: var(--roam-ref-typeface-body);
  font-size: var(--roam-ref-typescale-14);
  color: var(--roam-ref-palette-text-secondary);
  line-height: 1.6;
  font-style: italic;
  margin: 0;
}

.roam-fg-quote-attr {
  grid-column: 1 / -1;
  grid-row: 2;
  font-family: var(--roam-ref-typeface-body);
  font-size: var(--roam-ref-typescale-12);
  color: var(--roam-ref-palette-text-light);
  font-weight: 600;
  margin: 0;
}

/* FG Tags */
.roam-fg-card-tags {
  display: flex;
  gap: var(--roam-ref-spacing-6);
  overflow: hidden;
  flex-wrap: nowrap;
}

.roam-fg-tags-wrap { flex-wrap: wrap; overflow: visible; }

.roam-badge-tag-fg {
  font-family: var(--roam-ref-typeface-body);
  font-size: var(--roam-ref-typescale-10);
  color: var(--roam-ref-palette-text-muted);
  border: 1px solid var(--roam-ref-palette-border-tag);
  border-radius: var(--roam-ref-shape-full);
  padding: var(--roam-ref-spacing-3) var(--roam-ref-spacing-10);
  font-weight: 500;
  line-height: var(--roam-ref-spacing-18);
  white-space: nowrap;
  flex-shrink: 0;
}

/* FG Contact Rows */
.roam-fg-card-contact {
  margin-top: var(--roam-sys-flow-related);
  border-top: 1px solid var(--roam-ref-palette-border-cream);
  padding-top: var(--roam-sys-flow-related);
  display: flex;
  flex-direction: column;
  gap: var(--roam-sys-flow-coupled);
}

.roam-fg-contact-row {
  display: flex;
  align-items: center;
  gap: var(--roam-sys-flow-coupled);
  font-family: var(--roam-ref-typeface-body);
  font-size: var(--roam-ref-typescale-14);
  color: var(--roam-ref-palette-text-body);
}

a.roam-fg-contact-link {
  text-decoration: none;
  color: var(--roam-ref-palette-text-light);
  transition: color var(--roam-ref-motion-standard);
}

a.roam-fg-contact-link:hover,
a.roam-fg-contact-link:focus {
  color: var(--roam-ref-palette-teal);
}

.roam-fg-contact-icon {
  width: var(--roam-ref-spacing-14);
  height: var(--roam-ref-spacing-14);
  stroke: var(--roam-ref-palette-text-ghost);
  fill: none;
  stroke-width: 1.5;
  flex-shrink: 0;
}

/* FG Card Action Layout — buttons use theme .roam-btn system */

.roam-fg-card-actions {
  display: flex;
  flex-direction: column;
  gap: var(--roam-sys-flow-coupled);
  margin-top: auto;
  padding-top: var(--roam-sys-flow-related);
}

.roam-fg-btn-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--roam-sys-flow-coupled);
}

.roam-fg-btn-row .roam-btn {
  display: flex;
}

.roam-fg-btn-row .roam-btn > a {
  flex: 1;
}

.roam-fg-btn-full { width: 100%; }
.roam-fg-btn-full > a { width: 100%; }


/* ═══════════════════════════════════════════════════════════════
   FIELD GUIDE — DETAIL PAGE
   ═══════════════════════════════════════════════════════════════ */

/* Detail Hero — full bleed image */
.roam-sec-hero-listing {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  max-height: var(--roam-ref-layout-480);
  overflow: hidden;
  background: linear-gradient(145deg, var(--roam-ref-palette-forest) 0%, var(--roam-ref-palette-forest-light) 40%, var(--roam-ref-palette-forest-soft) 100%);
}

.roam-sec-hero-listing img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: var(--roam-ref-photo-filter);
}

.roam-sec-hero-listing-gradient {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(27,43,39,0.4) 0%, rgba(27,43,39,0) 40%, rgba(27,43,39,0.15) 100%);
  pointer-events: none;
}

/* Back Nav — overlaid top left */
.roam-fg-detail-nav {
  position: absolute;
  top: calc(var(--roam-comp-header-height) + var(--roam-ref-spacing-20));
  left: var(--roam-sys-spacing-page-x);
  z-index: 2;
}


.roam-fg-back-link {
  display: inline-flex;
  align-items: center;
  gap: var(--roam-ref-spacing-6);
  font-family: var(--roam-ref-typeface-body);
  font-size: var(--roam-ref-typescale-12);
  font-weight: 600;
  color: var(--roam-ref-palette-teal);
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.roam-fg-back-link .roam-icon-inline {
  transform: scaleX(-1);
  stroke: var(--roam-ref-palette-teal);
}

/* Detail Body — cream background */
.roam-fg-detail-body {
  background: var(--roam-ref-palette-cream);
  padding-top: 0;
  padding-bottom: var(--roam-ref-spacing-80);
}

.roam-fg-detail-body .roam-fg-detail {
  padding-left: 0;
  padding-right: 0;
}

.roam-fg-detail {
  max-width: var(--roam-ref-layout-840);
  margin: 0 auto;
  padding: 0 var(--roam-sys-spacing-page-x);
}

/* ── Overlapping Info Card ── */
.roam-fg-detail-info-card {
  background: var(--roam-ref-palette-white);
  border-radius: var(--roam-ref-shape-xl);
  box-shadow: var(--roam-ref-elevation-1);
  padding: var(--roam-ref-spacing-28) var(--roam-sys-spacing-card);
  margin-top: calc(-1 * var(--roam-ref-spacing-48));
  position: relative;
  z-index: 3;
  display: flex;
  flex-direction: column;
  gap: var(--roam-sys-flow-coupled);
}

.roam-fg-detail-title {
  font-family: var(--roam-ref-typeface-display);
  font-size: var(--roam-ref-typescale-32);
  font-weight: 400;
  color: var(--roam-ref-palette-forest);
  line-height: 1.15;
  letter-spacing: -0.3px;
}

.roam-fg-detail-price-sub {
  font-family: var(--roam-ref-typeface-body);
  font-size: var(--roam-ref-typescale-14);
  font-weight: 500;
  color: var(--roam-ref-palette-text-secondary);
}

.roam-fg-partner-inline {
  display: inline-flex;
  align-items: center;
  gap: var(--roam-ref-spacing-6);
  font-family: var(--roam-ref-typeface-body);
  font-size: var(--roam-ref-typescale-10);
  font-weight: 600;
  color: var(--roam-ref-palette-gold);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.roam-fg-partner-inline .roam-fg-shield-body {
  fill: var(--roam-ref-palette-gold);
}

.roam-fg-partner-inline .roam-fg-shield-plus {
  stroke: var(--roam-ref-palette-white);
  stroke-width: 2;
}

/* ── White Content Cards ── */
.roam-card-fg-content {
  background: var(--roam-ref-palette-white);
  border-radius: var(--roam-ref-shape-xl);
  box-shadow: var(--roam-ref-elevation-1);
  padding: var(--roam-sys-spacing-card);
  margin-top: var(--roam-sys-flow-related);
}

/* ── Review Section ── */
.roam-fg-detail-reviews {
  margin-top: var(--roam-sys-flow-related);
}

.roam-fg-review-scroll {
  display: flex;
  gap: var(--roam-ref-spacing-12);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -ms-overflow-style: none;
  -webkit-overflow-scrolling: touch;
  padding-bottom: var(--roam-ref-spacing-4);
}

.roam-fg-review-scroll::-webkit-scrollbar { display: none; }

.roam-fg-review-card {
  min-width: 66%;
  flex: 0 0 66%;
  scroll-snap-align: start;
  background: var(--roam-ref-palette-white);
  border-radius: var(--roam-ref-shape-xl);
  padding: var(--roam-sys-spacing-card);
  box-shadow: var(--roam-ref-elevation-1);
  display: flex;
  flex-direction: column;
  gap: var(--roam-sys-flow-coupled);
}

.roam-fg-review-card-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.roam-fg-review-source {
  font-family: var(--roam-ref-typeface-body);
  font-size: var(--roam-ref-typescale-10);
  font-weight: 600;
  color: var(--roam-ref-palette-text-ghost);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.roam-fg-review-text {
  font-family: var(--roam-ref-typeface-body);
  font-size: var(--roam-ref-typescale-13);
  color: var(--roam-ref-palette-text-secondary);
  line-height: 1.6;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.roam-fg-review-footer {
  margin-top: auto;
  padding-top: var(--roam-sys-flow-coupled);
  border-top: 1px solid var(--roam-ref-palette-border-cream);
}

.roam-fg-review-author {
  font-family: var(--roam-ref-typeface-body);
  font-size: var(--roam-ref-typescale-12);
  font-weight: 600;
  color: var(--roam-ref-palette-text-body);
}

.roam-fg-review-date {
  font-family: var(--roam-ref-typeface-body);
  font-size: var(--roam-ref-typescale-11);
  color: var(--roam-ref-palette-text-ghost);
  margin-left: var(--roam-sys-flow-coupled);
}

/* ── Detail Map ── */
.roam-fg-detail-map {
  margin-top: var(--roam-sys-flow-related);
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: var(--roam-ref-shape-xl);
  overflow: hidden;
  border: 1px solid var(--roam-ref-palette-border-cream);
}

.roam-fg-detail-map iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: none;
}

/* ── Detail Action Buttons ── */
.roam-fg-detail-actions {
  margin-top: var(--roam-sys-flow-related);
}

.roam-fg-detail-actions .roam-fg-btn-row .roam-btn {
  display: flex;
}

.roam-fg-detail-actions .roam-fg-btn-row .roam-btn > a {
  flex: 1;
}

/* ── Detail Block Spacing ── */
.roam-fg-detail-block {
  margin-top: var(--roam-sys-flow-related);
}

/* ── Content card internal spacing ── */
.roam-card-fg-content .roam-fg-detail-glance { margin-top: 0; }
.roam-card-fg-content .roam-fg-detail-socials { margin-top: var(--roam-sys-flow-related); }
.roam-card-fg-content .roam-fg-card-love { margin-top: var(--roam-sys-flow-related); }

@media (max-width: 767px) {
  .roam-sec-hero-listing {
    aspect-ratio: 3 / 2;
  }
  .roam-fg-detail-title {
    font-size: var(--roam-ref-typescale-24);
  }
  .roam-fg-detail-info-card {
    margin-top: calc(-1 * var(--roam-ref-spacing-36));
    padding: var(--roam-ref-spacing-20) var(--roam-sys-spacing-card);
  }
}


/* ── Hours section (no top border) ── */
.roam-fg-detail-hours {
  margin-top: var(--roam-sys-flow-related);
}

/* ── Gradient horizontal divider (teal → gold) ── */
.roam-fg-accent-bar-horizontal {
  height: 2px;
  border-radius: 1px;
  background: linear-gradient(to right, var(--roam-ref-palette-teal), var(--roam-ref-palette-gold));
  margin: var(--roam-sys-flow-related) 0;
}

/* ── Contact section ── */
.roam-fg-detail-contact {
  margin-top: 0;
}

/* ── Website button in contact section ── */
.roam-fg-detail-website-btn {
  margin-top: var(--roam-sys-flow-related);
}

/* ── Map card ── */
.roam-fg-map-card {
  padding: 0;
  overflow: hidden;
}

.roam-fg-map-card .roam-fg-detail-map {
  margin-top: 0;
  border-radius: 0;
  border: none;
}

.roam-fg-map-directions {
  padding: var(--roam-sys-spacing-card);
}


/* ── Detail Quote Card — white card, no inner cream box ── */
.roam-fg-detail-quote-card {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  gap: var(--roam-sys-flow-coupled) var(--roam-sys-flow-coupled);
}

.roam-fg-detail-quote-card .roam-icon-quote {
  grid-column: 1;
  grid-row: 1;
  align-self: start;
  margin-top: var(--roam-ref-spacing-2);
}

.roam-fg-detail-quote-card .roam-fg-quote-text {
  grid-column: 2;
  grid-row: 1;
  font-size: var(--roam-ref-typescale-15);
  margin: 0;
}

.roam-fg-detail-quote-card .roam-fg-quote-attr {
  grid-column: 1 / -1;
  grid-row: 2;
}


/* ── Partner Detail Card ── */
.roam-fg-partner-detail-card {
  border: 1.5px solid var(--roam-ref-palette-gold-a25);
}


.roam-fg-partner-shield {
  width: var(--roam-ref-spacing-40);
  height: var(--roam-ref-spacing-40);
  flex-shrink: 0;
}

.roam-fg-partner-detail-header {
  display: flex;
  align-items: flex-start;
  gap: var(--roam-ref-spacing-12);
}

.roam-fg-partner-detail-header .roam-fg-shield-body {
  fill: var(--roam-ref-palette-gold);
}

.roam-fg-partner-detail-header .roam-fg-shield-plus {
  stroke: var(--roam-ref-palette-white);
  stroke-width: 2;
}

.roam-fg-partner-title {
  display: block;
  font-family: var(--roam-ref-typeface-body);
  font-size: var(--roam-ref-typescale-15);
  font-weight: 600;
  color: var(--roam-ref-palette-forest);
  line-height: 1.3;
}

.roam-fg-partner-excerpt {
  font-family: var(--roam-ref-typeface-body);
  font-size: var(--roam-ref-typescale-14);
  color: var(--roam-ref-palette-text-body);
  line-height: 1.6;
  margin-top: var(--roam-sys-flow-coupled);
}

.roam-fg-partner-expand[hidden] { display: none; }

.roam-fg-partner-full {
  font-family: var(--roam-ref-typeface-body);
  font-size: var(--roam-ref-typescale-14);
  color: var(--roam-ref-palette-text-body);
  line-height: 1.6;
}

/* ── Quote on cream (no card wrapper) ── */
.roam-fg-detail-quote {
  margin-top: var(--roam-sys-flow-related);
}

/* ── Plain info sections (Hours, Contact) ── */
.roam-fg-detail-info-section {
  padding-top: var(--roam-sys-flow-related);
  border-top: 1px solid var(--roam-ref-palette-border-cream);
}

.roam-fg-detail-info-section + .roam-fg-detail-info-section {
  margin-top: var(--roam-sys-flow-coupled);
}

.roam-fg-detail-info-label {
  font-family: var(--roam-ref-typeface-body);
  font-size: var(--roam-ref-typescale-14);
  font-weight: 600;
  color: var(--roam-ref-palette-forest);
  letter-spacing: 0.02em;
  margin-bottom: var(--roam-sys-flow-coupled);
}

.roam-fg-partner-card {
  margin-top: var(--roam-sys-flow-related);
  display: flex;
  align-items: flex-start;
  gap: var(--roam-ref-spacing-12);
  background: var(--roam-ref-palette-white);
  border: 1.5px solid var(--roam-ref-palette-gold-a25);
  border-radius: var(--roam-ref-spacing-12);
  padding: var(--roam-ref-spacing-12) var(--roam-ref-spacing-16);
}

.roam-fg-partner-card-icon {
  width: var(--roam-ref-spacing-24);
  height: var(--roam-ref-spacing-24);
  fill: var(--roam-ref-palette-gold);
  stroke: none;
  flex-shrink: 0;
}

.roam-fg-partner-card-body {
  flex: 1;
  min-width: 0;
}

.roam-fg-partner-label {
  display: block;
  font-family: var(--roam-ref-typeface-body);
  font-size: var(--roam-ref-typescale-10);
  font-weight: 600;
  color: var(--roam-ref-palette-gold);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: var(--roam-ref-spacing-2);
}

.roam-fg-partner-discount {
  font-family: var(--roam-ref-typeface-body);
  font-size: var(--roam-ref-typescale-13);
  color: var(--roam-ref-palette-text-body);
  line-height: 1.4;
}

/* At a Glance + Feature Pills */
.roam-fg-detail-glance {
  margin-top: var(--roam-sys-flow-separated);
  display: flex;
  flex-wrap: wrap;
  gap: var(--roam-sys-flow-coupled);
}

.roam-badge-tag-light {
  display: inline-flex;
  align-items: center;
  font-family: var(--roam-ref-typeface-body);
  font-size: var(--roam-ref-typescale-12);
  font-weight: 500;
  color: var(--roam-ref-palette-text-body);
  border: 1px solid var(--roam-ref-palette-border-tag);
  border-radius: var(--roam-ref-shape-full);
  padding: var(--roam-ref-spacing-6) var(--roam-ref-spacing-14);
}

/* Social Circles */
.roam-fg-detail-socials {
  margin-top: var(--roam-sys-flow-related);
  display: flex;
  gap: var(--roam-sys-flow-coupled);
}

.roam-fg-social-circle {
  width: var(--roam-ref-spacing-36);
  height: var(--roam-ref-spacing-36);
  border-radius: var(--roam-ref-shape-full);
  background: var(--roam-ref-palette-cream);
  border: 1px solid var(--roam-ref-palette-border-tag);
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  transition: var(--roam-ref-motion-standard);
}

.roam-fg-social-circle:hover,
.roam-fg-social-circle:focus {
  border-color: var(--roam-ref-palette-teal);
}

.roam-fg-social-icon {
  width: var(--roam-ref-spacing-16);
  height: var(--roam-ref-spacing-16);
  stroke: var(--roam-ref-palette-teal);
  fill: none;
  stroke-width: 1.5;
}

/* Brand social icons (TripAdvisor, Yelp) use fill, not stroke — class-based */
.roam-fg-social-tripadvisor .roam-fg-social-icon,
.roam-fg-social-yelp .roam-fg-social-icon {
  stroke: none;
  fill: var(--roam-ref-palette-teal);
  stroke-width: 0;
}

/* FG Divider */
.roam-fg-divider {
  border: none;
  height: 1px;
  background: var(--roam-ref-palette-border-cream);
  margin: var(--roam-sys-flow-separated) 0;
}

/* FG Section Labels */
.roam-fg-section-label {
  font-family: var(--roam-ref-typeface-body);
  font-size: var(--roam-ref-typescale-11);
  font-weight: 600;
  color: var(--roam-ref-palette-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin-bottom: var(--roam-sys-flow-related);
}

.roam-fg-section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--roam-sys-flow-related);
}

.roam-fg-section-header .roam-fg-section-label { margin-bottom: 0; }

.roam-fg-review-total {
  font-family: var(--roam-ref-typeface-body);
  font-size: var(--roam-ref-typescale-12);
  color: var(--roam-ref-palette-text-light);
}

/* Detail Excerpt */
.roam-fg-detail-excerpt {
  font-family: var(--roam-ref-typeface-body);
  font-size: var(--roam-ref-typescale-15);
  color: var(--roam-ref-palette-text-body);
  line-height: var(--roam-ref-leading-body);
  margin-bottom: var(--roam-sys-flow-related);
}

/* FG Section Divider — gradient bar between detail sections */
.roam-fg-section-divider {
  margin: var(--roam-sys-flow-related) 0;
  height: 2px;
}

/* FG Detail Section */
.roam-fg-detail-section {
  font-family: var(--roam-ref-typeface-body);
  font-size: var(--roam-ref-typescale-14);
  color: var(--roam-ref-palette-text-body);
  line-height: 1.6;
}

.roam-fg-hours-list,
/* FG contact list — layout via roam-flex-col-coupled */

/* Map Placeholder */



.roam-fg-back-link-light {
  color: var(--roam-ref-palette-white);
  text-shadow: 0 1px 3px rgba(0,0,0,0.3);
}

.roam-fg-back-link-light .roam-icon-inline {
  stroke: var(--roam-ref-palette-white);
}

.roam-fg-detail-section {
  margin-top: var(--roam-sys-flow-separated);
}

.roam-fg-detail-section > * + * {
  margin-top: var(--roam-sys-flow-related);
}

.roam-fg-map-placeholder {
  margin-top: var(--roam-sys-flow-related);
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: var(--roam-ref-spacing-12);
  overflow: hidden;
  background: linear-gradient(145deg, var(--roam-ref-palette-forest-a6), var(--roam-ref-palette-teal-a5));
  border: 1px solid var(--roam-ref-palette-border-cream);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--roam-ref-typeface-body);
  font-size: var(--roam-ref-typescale-12);
  color: var(--roam-ref-palette-text-ghost);
}

/* Detail Action Layout — buttons use theme system */
.roam-fg-detail-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--roam-sys-flow-coupled);
  margin-top: var(--roam-sys-flow-separated);
}

/* Review placeholder */
.roam-fg-review-placeholder {
  font-family: var(--roam-ref-typeface-body);
  font-size: var(--roam-ref-typescale-13);
  color: var(--roam-ref-palette-text-ghost);
}

/* Disclaimer */
.roam-fg-disclaimer {
  margin-top: var(--roam-sys-flow-separated);
  font-family: var(--roam-ref-typeface-body);
  font-size: var(--roam-ref-typescale-11);
  color: var(--roam-ref-palette-text-ghost);
  line-height: 1.6;
}


/* ═══════════════════════════════════════════════════════════════
   FIELD GUIDE — HUB PAGE
   ═══════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════
   FIELD GUIDE — SHARED HERO GRID
   Used by both hub and listing pages.
   Row 1: nav slot (40px) — empty on hub, back arrow on listing
   Row 2: content — icon, eyebrow, heading, body, divider
   ═══════════════════════════════════════════════════════════════ */

.roam-fg-hero {
  display: grid;
  grid-template-rows: var(--roam-ref-spacing-20) 1fr auto;
  padding-top: var(--roam-ref-spacing-20);
  text-align: center;
}

/* Row 1: nav slot */
.roam-fg-hero-nav {
  display: flex;
  align-items: flex-start;
}

/* Row 2: content column, centered */
.roam-fg-hero-content {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Row 3: hero footer — divider, scales with content */
.roam-fg-hero-footer {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding-top: var(--roam-ref-spacing-10);
}

/* Gradient divider inside hero footer */
.roam-fg-hero-footer .roam-gradient-divider {
  margin: 0;
}

/* Hero icon — shared between hub and listing */
.roam-fg-hub-hero-icon {
  display: block;
  margin: 0 auto var(--roam-ref-spacing-4);
  width: var(--roam-ref-spacing-56, 56px);
  height: var(--roam-ref-spacing-56, 56px);
  stroke: var(--roam-ref-palette-cream);
  stroke-width: 1;
  fill: none;
  opacity: 0.6;
}

/* State subheader — below market name on listing hero */
.roam-fg-hero-state {
  font-family: var(--roam-ref-typeface-body);
  font-size: var(--roam-ref-typescale-14);
  font-weight: 600;
  color: rgba(250, 246, 241, 0.6);
  text-transform: uppercase;
  letter-spacing: 2px;
  margin-top: var(--roam-ref-spacing-4);
}

/* Hub section — cream background */
.roam-fg-hub-section {
  background: var(--roam-ref-palette-cream);
}

/* Listing section — cream background */
.roam-fg-listing-section {
  background: var(--roam-ref-palette-cream);
  padding-top: var(--roam-ref-spacing-36);
  padding-bottom: var(--roam-ref-spacing-80);
}

.roam-fg-listing-section .roam-fg {
  padding-left: 0;
  padding-right: 0;
}

/* Hub grid — 3 up */
.roam-grid-fg-hub {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: var(--roam-ref-spacing-20);
  max-width: var(--roam-ref-layout-1280);
  margin: 0 auto;
}

/* Market card — link wrapper */
.roam-fg-market-card {
  display: flex;
  flex-direction: column;
  border-radius: var(--roam-ref-shape-xl);
  overflow: hidden;
  background: var(--roam-ref-palette-white);
  text-decoration: none;
  box-shadow: var(--roam-ref-elevation-1);
  transition: box-shadow var(--roam-ref-motion-standard), transform var(--roam-ref-motion-standard);
}

.roam-fg-market-card:hover {
  box-shadow: var(--roam-ref-elevation-2);
  transform: var(--roam-ref-elevation-lift);
}

/* Market card image — 3:2 with 3 absolute-positioned layers */
.roam-fg-market-image {
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 2;
  background: var(--roam-ref-gradient-surface-hero);
  overflow: hidden;
}

/* Layer 1: City + State — upper portion */
.roam-fg-market-header {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 14%;
  z-index: 3;
}

.roam-fg-market-title {
  font-family: var(--roam-ref-typeface-display);
  font-size: var(--roam-ref-typescale-32);
  font-weight: 400;
  color: var(--roam-ref-palette-cream);
  line-height: 1.15;
  letter-spacing: -0.3px;
}

.roam-fg-market-state {
  font-family: var(--roam-ref-typeface-body);
  font-size: var(--roam-ref-typescale-12);
  font-weight: 600;
  color: rgba(250, 246, 241, 0.6);
  text-transform: uppercase;
  letter-spacing: 2px;
  margin-top: var(--roam-ref-spacing-4);
}

/* ── Journal Tag (index card variant) ── */

.roam-badge-tag-journal {
  display: inline-flex;
  align-items: center;
  padding: var(--roam-ref-spacing-3) var(--roam-ref-spacing-10);
  border-radius: var(--roam-ref-shape-full);
  border: 1px solid var(--roam-ref-palette-teal-a60);
  background: transparent;
  font-family: var(--roam-ref-typeface-body);
  font-size: var(--roam-ref-typescale-10);
  font-weight: 500;
  color: var(--roam-ref-palette-text-muted);
  line-height: var(--roam-ref-spacing-18);
  white-space: nowrap;
  flex-shrink: 0;
}

/* ── Journal Search Bar (L2) ── */

.roam-journal-search {
  display: flex;
  justify-content: center;
  padding: var(--roam-ref-spacing-12) 0;
  max-width: var(--roam-ref-layout-480);
  margin: 0 auto;
}

.roam-journal-search-wrap {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
}

.roam-journal-search-icon {
  position: absolute;
  left: var(--roam-ref-spacing-12);
  width: var(--roam-ref-spacing-16);
  height: var(--roam-ref-spacing-16);
  stroke: var(--roam-ref-palette-text-ghost);
  stroke-width: 1.5;
  fill: none;
  pointer-events: none;
}

.roam-journal-search-input {
  width: 100%;
  height: var(--roam-ref-spacing-40);
  padding: 0 var(--roam-ref-spacing-14) 0 var(--roam-ref-spacing-36);
  border-radius: var(--roam-ref-shape-full);
  border: 1px solid var(--roam-ref-palette-border-cream);
  background: var(--roam-ref-palette-white);
  font-family: var(--roam-ref-typeface-body);
  font-size: var(--roam-ref-typescale-14);
  color: var(--roam-ref-palette-text-body);
  -webkit-appearance: none;
  appearance: none;
  outline: none;
  transition: border-color 0.2s ease;
}

.roam-journal-search-input:focus {
  border-color: var(--roam-ref-palette-teal);
}

.roam-journal-search-input::placeholder {
  color: var(--roam-ref-palette-text-ghost);
}

/* Journal cards — smaller title for longer blog post names */
.roam-journal-card .roam-fg-market-title {
  font-size: var(--roam-ref-typescale-24);
}

/* Journal cards — 2-row grid on image: title centered, footer at bottom */
.roam-journal-card .roam-fg-market-image {
  display: grid;
  grid-template-rows: 1fr auto;
}

.roam-journal-card .roam-fg-market-header {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--roam-sys-spacing-card);
  z-index: 3;
}

.roam-journal-card .roam-fg-market-footer {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 var(--roam-sys-spacing-card) var(--roam-sys-spacing-card);
  z-index: 3;
}

/* Icon — inside footer, above divider */
.roam-fg-market-icon {
  width: var(--roam-ref-spacing-24);
  height: var(--roam-ref-spacing-24);
  stroke: var(--roam-ref-palette-cream);
  stroke-width: 1;
  fill: none;
  opacity: 0.35;
  margin-bottom: var(--roam-ref-spacing-14);
}

/* Layer 2: Icon + Bar + label — lower portion */
.roam-fg-market-footer {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-bottom: 10%;
  z-index: 3;
}

.roam-fg-market-image .roam-gradient-divider {
  width: var(--roam-ref-spacing-48);
}

.roam-fg-market-label {
  font-family: var(--roam-ref-typeface-body);
  font-size: var(--roam-ref-typescale-10);
  font-weight: 600;
  color: rgba(250, 246, 241, 0.38);
  text-transform: uppercase;
  letter-spacing: 1.5px;
  margin-top: var(--roam-ref-spacing-6);
  position: relative;
  z-index: 2;
}

/* Card body */
.roam-fg-market-body {
  padding: var(--roam-sys-spacing-card);
  display: flex;
  flex-direction: column;
  gap: var(--roam-sys-flow-related);
  flex: 1;
}

.roam-fg-market-excerpt {
  font-family: var(--roam-ref-typeface-body);
  font-size: var(--roam-ref-typescale-14);
  color: var(--roam-ref-palette-text-secondary);
  line-height: var(--roam-ref-leading-body);
  margin: 0;
}

/* Photo — fill the image container */
.roam-fg-market-photo {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
  filter: saturate(0.8) contrast(1.05) brightness(0.85);
}

/* Explore button — styled inline to match filled-gold */
.roam-fg-market-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--roam-sys-flow-coupled);
  height: var(--roam-ref-spacing-40);
  padding: 0 var(--roam-ref-spacing-14);
  border-radius: var(--roam-ref-shape-full);
  background: var(--roam-ref-palette-gold);
  color: var(--roam-ref-palette-forest);
  font-family: var(--roam-ref-typeface-body);
  font-size: var(--roam-ref-typescale-14);
  font-weight: 600;
  line-height: var(--roam-ref-spacing-20);
  text-decoration: none;
  border: none;
  cursor: pointer;
  margin-top: auto;
}

.roam-fg-market-btn .roam-icon-inline {
  stroke: var(--roam-ref-palette-forest);
}

/* ── Progressive Expand Button ── */

.roam-fg-expand-btn {
  height: var(--roam-ref-spacing-32);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--roam-ref-spacing-6);
  background: transparent;
  border: 1.5px solid var(--roam-ref-palette-gold-a40);
  border-radius: var(--roam-ref-shape-full);
  padding: 0 var(--roam-ref-spacing-16);
  cursor: pointer;
  font-family: var(--roam-ref-typeface-body);
  font-size: var(--roam-ref-typescale-12);
  font-weight: 600;
  color: var(--roam-ref-palette-gold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  width: 100%;
  transition: background-color var(--roam-ref-motion-standard), border-color var(--roam-ref-motion-standard);
  margin-top: var(--roam-sys-flow-related);
}

.roam-fg-expand-chevron {
  width: var(--roam-ref-spacing-14);
  height: var(--roam-ref-spacing-14);
  stroke: var(--roam-ref-palette-gold);
  fill: none;
  stroke-width: 2;
  transition: transform var(--roam-ref-motion-standard);
}

.roam-fg-expand-btn.is-expanded .roam-fg-expand-chevron {
  transform: rotate(180deg);
}

/* ── Partner Shield Badge — card image (inline SVG) ── */

.roam-fg-card-partner-badge .roam-fg-shield-body {
  fill: var(--roam-ref-palette-gold);
}

.roam-fg-card-partner-badge .roam-fg-shield-plus {
  stroke: var(--roam-ref-palette-white);
  stroke-width: 2;
}


/* ═══════════════════════════════════════════════════════════════
   FIELD GUIDE — ERROR / EMPTY STATES
   ═══════════════════════════════════════════════════════════════ */

.roam-fg-error,
.roam-fg-empty {
  font-family: var(--roam-ref-typeface-body);
  font-size: var(--roam-ref-typescale-14);
  color: var(--roam-ref-palette-text-muted);
  text-align: center;
  padding: var(--roam-ref-spacing-48) var(--roam-ref-spacing-24);
}


/* ═══════════════════════════════════════════════════════════════
   FIELD GUIDE — RESPONSIVE (< 768px)
   ═══════════════════════════════════════════════════════════════ */

@media (max-width: 767px) {

  .roam-grid-fg {
    gap: var(--roam-ref-spacing-20);
  }

  .roam-fg-detail-title {
    font-size: var(--roam-ref-typescale-24);
  }

  .roam-fg-detail-actions {
    grid-template-columns: 1fr;
  }

  /* Phone link — teal call button on mobile */
  a.roam-fg-contact-link {
    color: var(--roam-ref-palette-teal);
    font-weight: 600;
  }
}


/* ═══════════════════════════════════════════════════════════
   ARCHIVED MARGIN RULES (pre-flow-system, v2.1.106)
   Replaced by container-based flow system.
   Kept for rollback reference — delete after flow system verified.
   ═══════════════════════════════════════════════════════════ */
/*
  BUTTON SIZE MARGINS (moved to zero):
  .roam-btn-xl { margin-top: 24px; margin-bottom: 24px; }
  .roam-btn-lg { margin-top: 20px; margin-bottom: 20px; }
  .roam-btn-md { margin-top: 16px; margin-bottom: 16px; }
  .roam-btn-sm { margin-top: 12px; margin-bottom: 12px; }
  .roam-btn-xs { margin-top: 8px; margin-bottom: 8px; }

  SECTION HEADER MARGINS:
  .roam-block-heading { margin-bottom: 16px; }
  .roam-block-eyebrow { margin: browser-default (14px/12px); }
  .roam-block-eyebrow-gold { margin-bottom: 16px; }
  .roam-block-subtitle { margin-bottom: 16px; }
  .roam-section-header { margin-bottom: 48px; }
  .roam-block-stat-mega { margin-bottom: 8px; }
  .roam-card-stat-label { margin-bottom: 6px; }

  CARD INTERNAL MARGINS:
  .roam-card-title { margin-bottom: 10px; }
  .roam-card-icon-title { margin-bottom: 10px; }
  .roam-card-pill-title { margin-bottom: 10px; }
  .roam-card-simple-title { margin-bottom: 10px; }
  .roam-badge-pill-inline { margin-bottom: 14px; }
  .roam-three-proof-card-header { margin-bottom: 14px; }
  .roam-card-icon-three .roam-card-icon-subtitle { margin-top: 8px; }

  DIVIDER MARGINS:
  .roam-gradient-divider { margin: 24px 0; }

  CONTEXT-SPECIFIC:
  .roam-hp-performance .roam-btn-group { margin-top: 8px; }
*/

/* Journal footer — category label spacing above icon group */
.roam-journal-card .roam-fg-market-state {
  margin-bottom: var(--roam-sys-flow-coupled);
}

/* ═══════════════════════════════════════════════════════════
   GLOSSARY
   ═══════════════════════════════════════════════════════════ */

.roam-glossary-controls {
  margin-bottom: var(--roam-sys-flow-separated);
}

.roam-glossary-alpha {
  display: flex;
  flex-wrap: wrap;
  gap: var(--roam-ref-spacing-6);
  margin-top: var(--roam-sys-flow-related);
}

.roam-glossary-alpha-link {
  font-family: var(--roam-ref-typeface-body);
  font-size: var(--roam-ref-typescale-10);
  font-weight: var(--roam-ref-weight-semibold);
  color: var(--roam-ref-palette-dark-text-faint);
  width: var(--roam-ref-spacing-28);
  height: var(--roam-ref-spacing-28);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--roam-ref-shape-full);
  border: 1px solid var(--roam-ref-palette-dark-border-medium);
  transition: var(--roam-ref-motion-standard);
  text-decoration: none;
}

.roam-glossary-alpha-link:hover,
.roam-glossary-alpha-link:focus {
  color: var(--roam-ref-palette-teal);
  border-color: var(--roam-ref-palette-teal);
}

.roam-glossary-letter-group {
  margin-bottom: var(--roam-sys-flow-separated);
}

.roam-glossary-letter {
  font-family: var(--roam-ref-typeface-display);
  font-size: var(--roam-ref-typescale-18);
  color: var(--roam-ref-palette-teal);
  border-bottom: 1px solid var(--roam-ref-palette-dark-border-medium);
  padding-bottom: var(--roam-ref-spacing-8);
  margin-bottom: var(--roam-sys-flow-related);
}

.roam-glossary-entry {
  padding: var(--roam-sys-flow-related) 0;
  border-bottom: 1px solid var(--roam-ref-palette-dark-border-light);
}

.roam-glossary-term {
  font-family: var(--roam-ref-typeface-body);
  font-size: var(--roam-ref-typescale-15);
  font-weight: var(--roam-ref-weight-semibold);
  color: var(--roam-ref-palette-dark-text-primary);
  margin: 0 0 var(--roam-sys-flow-coupled) 0;
}

.roam-glossary-def {
  font-family: var(--roam-ref-typeface-body);
  font-size: var(--roam-ref-typescale-14);
  color: var(--roam-ref-palette-dark-text-body);
  line-height: var(--roam-ref-leading-body);
  margin: 0 0 var(--roam-sys-flow-coupled) 0;
}

.roam-glossary-rel {
  font-family: var(--roam-ref-typeface-body);
  font-size: var(--roam-ref-typescale-12);
  color: var(--roam-ref-palette-dark-text-faint);
  font-style: italic;
  margin: 0;
}

/* ═══════════════════════════════════════════════════════════
   FAQ GROUPS
   ═══════════════════════════════════════════════════════════ */

.roam-faq-nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--roam-ref-spacing-6);
  margin-bottom: var(--roam-sys-spacing-section-top);
}

.roam-faq-group {
  margin-bottom: var(--roam-sys-spacing-section-top);
}

.roam-faq-group-title {
  font-family: var(--roam-ref-typeface-display);
  font-size: var(--roam-ref-typescale-20);
  color: var(--roam-ref-palette-dark-text-primary);
  line-height: var(--roam-ref-leading-card);
  margin: 0 0 var(--roam-sys-flow-related) 0;
}

/* ═══════════════════════════════════════════════════════════
   MICHIGAN GUIDE
   ═══════════════════════════════════════════════════════════ */

.roam-guide-chapter-row {
  display: flex;
  align-items: flex-start;
  gap: var(--roam-ref-spacing-14);
  padding: var(--roam-sys-flow-related) 0;
  border-bottom: 1px solid var(--roam-ref-palette-dark-border-light);
}

.roam-guide-chapter-num {
  font-family: var(--roam-ref-typeface-body);
  font-size: var(--roam-ref-typescale-11);
  font-weight: var(--roam-ref-weight-bold);
  color: var(--roam-ref-palette-teal);
  flex-shrink: 0;
}

.roam-guide-chapter-title {
  font-family: var(--roam-ref-typeface-body);
  font-size: var(--roam-ref-typescale-14);
  color: var(--roam-ref-palette-dark-text-body);
  line-height: var(--roam-ref-leading-body);
}

/* ═══════════════════════════════════════════════════════════
   ECOSYSTEM
   ═══════════════════════════════════════════════════════════ */

.roam-ecosystem-category-header {
  display: flex;
  align-items: flex-start;
  gap: var(--roam-ref-spacing-14);
  margin-bottom: var(--roam-sys-flow-separated);
}

.roam-ecosystem-dot {
  width: var(--roam-ref-spacing-12);
  height: var(--roam-ref-spacing-12);
  border-radius: var(--roam-ref-shape-full);
  flex-shrink: 0;
  margin-top: var(--roam-ref-spacing-6);
}

.roam-ecosystem-product-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--roam-sys-flow-coupled);
}

.roam-badge-status {
  font-family: var(--roam-ref-typeface-body);
  font-size: var(--roam-ref-typescale-10);
  font-weight: var(--roam-ref-weight-semibold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--roam-ref-palette-sage);
  border: 1px solid var(--roam-ref-palette-sage-a15);
  border-radius: var(--roam-ref-shape-full);
  padding: 2px var(--roam-ref-spacing-10);
  white-space: nowrap;
}

/* ── Product landing page ── */

.roam-product-hero-header {
  display: flex;
  align-items: center;
  gap: var(--roam-ref-spacing-14);
  margin-bottom: var(--roam-sys-flow-related);
}

.roam-step-number {
  font-family: var(--roam-ref-typeface-body);
  font-size: var(--roam-ref-typescale-11);
  font-weight: var(--roam-ref-weight-bold);
  display: block;
  margin-bottom: var(--roam-sys-flow-coupled);
}

/* Step numbers inside icon cards — match layer-number style */
.roam-card-icon-three .roam-step-number {
  grid-column: 1;
  grid-row: 1;
  font-family: var(--roam-ref-typeface-display);
  font-size: var(--roam-ref-typescale-24);
  font-weight: var(--roam-ref-weight-normal);
  margin: 0;
}
.roam-card-icon-three .roam-step-number + .roam-card-icon-title {
  align-self: center;
}

/* ═══════════════════════════════════════════════════════════
   SERVICE SUBPAGES — Process + Included + Related
   ═══════════════════════════════════════════════════════════ */

.roam-process-header {
  display: flex;
  align-items: baseline;
  gap: var(--roam-ref-spacing-12);
}

.roam-included-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--roam-sys-flow-coupled) var(--roam-sys-flow-separated);
  padding: var(--roam-sys-spacing-card);
  border-radius: var(--roam-ref-shape-xl);
  border: 1px solid var(--roam-comp-card-stat-border);
  background: var(--roam-comp-card-stat-bg);
}
@media (max-width: 640px) {
  .roam-included-grid { grid-template-columns: 1fr; }
}

.roam-included-item {
  display: flex;
  align-items: flex-start;
  gap: var(--roam-sys-flow-coupled);
}

.roam-icon-check {
  width: var(--roam-ref-spacing-16);
  height: var(--roam-ref-spacing-16);
  flex-shrink: 0;
  margin-top: var(--roam-ref-spacing-3);
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  color: var(--roam-ref-palette-teal);
}
}

.roam-btn-group-wrap {
  flex-wrap: wrap;
}

/* ── Pricing page card fixes ── */

/* Card dividers: full width inside tier + addon cards */

/* Feature list items: flex row for icon + text alignment */
.roam-tier-card .roam-card-body {
  display: flex;
  align-items: center;
  gap: var(--roam-sys-flow-coupled);
}

/* ═══════════════════════════════════════════════════════════
   UTILITY CLASSES (replace inline styles)
   ═══════════════════════════════════════════════════════════ */

.roam-mt-section { margin-top: var(--roam-sys-spacing-section-top); }
.roam-mt-separated { margin-top: var(--roam-sys-flow-separated); }
.roam-mt-related { margin-top: var(--roam-sys-flow-related); }
.roam-mt-coupled { margin-top: var(--roam-sys-flow-coupled); }
.roam-mb-coupled { margin-bottom: var(--roam-sys-flow-coupled); }
.roam-mt-auto { margin-top: auto; }
.roam-pt-related { padding-top: var(--roam-sys-flow-related); }

.roam-btn-full { width: 100%; justify-content: center; }
.roam-text-center { text-align: center; }

/* Product page icon size (48px box with 24px icon) */
.roam-icon-box-lg { width: var(--roam-ref-spacing-48); height: var(--roam-ref-spacing-48); }
.roam-icon-box-lg svg { width: var(--roam-ref-spacing-24); height: var(--roam-ref-spacing-24); }

/* Proof callout */
.roam-proof-callout { font-weight: var(--roam-ref-weight-semibold); }

/* Category-colored eyebrow (set via data-color attribute) */
.roam-color-dynamic[data-color="teal"] { color: var(--roam-ref-palette-teal); }
.roam-color-dynamic[data-color="gold"] { color: var(--roam-ref-palette-gold); }
.roam-color-dynamic[data-color="sage"] { color: var(--roam-ref-palette-sage); }
.roam-color-dynamic[data-color="cream"] { color: var(--roam-ref-palette-cream); }

/* Step numbers colored by tier */
.roam-step-number[data-color="teal"] { color: var(--roam-ref-palette-teal); }
.roam-step-number[data-color="gold"] { color: var(--roam-ref-palette-gold); }
.roam-step-number[data-color="sage"] { color: var(--roam-ref-palette-sage); }

/* Guide success state */
.roam-guide-success { display: none; text-align: center; padding: var(--roam-ref-spacing-32); }
.roam-guide-success svg { margin: 0 auto var(--roam-ref-spacing-16); }
.roam-guide-success.roam-visible { display: block; }

/* Guide form disclaimer */
.roam-form-disclaimer { text-align: center; margin-top: var(--roam-ref-spacing-12); }

/* ── Form shared states ── */
.roam-form-success { display: none; text-align: center; padding: var(--roam-ref-spacing-32); }
.roam-form-error {
    color: var(--roam-ref-palette-error-light);
    font-family: var(--roam-ref-typeface-body);
    font-size: var(--roam-ref-typescale-12);
    margin-top: var(--roam-sys-flow-coupled);
    min-height: 1.2em;
}
.roam-form-error:empty { display: none; }
.roam-form-textarea {
    resize: vertical;
    min-height: var(--roam-ref-spacing-80);
    font-family: var(--roam-ref-typeface-body);
}
.roam-form-footer {
    text-align: center;
    margin-top: var(--roam-ref-spacing-12);
}
.roam-form-footer a {
    color: var(--roam-ref-palette-teal);
    text-decoration: none;
}
.roam-form-footer a:hover { text-decoration: underline; }
.roam-btn-full { width: 100%; justify-content: center; }

/* ── Dynamic color classes (tier-based) ── */
.roam-color-teal { color: var(--roam-ref-palette-teal); }
.roam-color-gold { color: var(--roam-ref-palette-gold); }
.roam-color-sage { color: var(--roam-ref-palette-sage); }
.roam-color-cream { color: var(--roam-ref-palette-cream); }

.roam-bg-teal { background: var(--roam-ref-palette-teal); }
.roam-bg-gold { background: var(--roam-ref-palette-gold); }
.roam-bg-sage { background: var(--roam-ref-palette-sage); }
.roam-bg-cream { background: var(--roam-ref-palette-cream); }

}

/* ── Card icon row (production pattern: icon + title in horizontal row) ── */

.roam-card-icon-row {
  display: flex;
  align-items: center;
  gap: var(--roam-ref-spacing-14);
}
/* Flow inside icon-row text wrapper */
.roam-card-icon-row .roam-badge-pill-inline + .roam-card-pill-title { margin-top: var(--roam-sys-flow-coupled); }
.roam-card-icon-row .roam-card-pill-title + .roam-card-body { margin-top: var(--roam-sys-flow-coupled); }

.roam-pt-separated { padding-top: var(--roam-sys-flow-separated); }

/* ── Card stat (tools stack, ecosystem audience) ── */

.roam-card-stat {
  padding: var(--roam-sys-spacing-card);
  border-radius: var(--roam-ref-shape-xl);
  border: 1px solid var(--roam-comp-card-stat-border);
  background: var(--roam-comp-card-stat-bg);
  display: flex;
  flex-direction: column;
}

/* Card stat flow tokens */
.roam-card-stat > * + * { margin-top: var(--roam-sys-flow-related); }
.roam-card-stat .roam-card-icon-row + .roam-gradient-divider { margin-top: var(--roam-sys-flow-related); }
.roam-card-stat .roam-gradient-divider + .roam-card-body { margin-top: var(--roam-sys-flow-related); }
.roam-card-stat .roam-card-pill-title + .roam-gradient-divider { margin-top: var(--roam-sys-flow-related); }

/* ── Stack tool cards (grouped tools per category) ── */

.roam-stack-tools {
  display: flex;
  flex-direction: column;
  gap: var(--roam-sys-flow-separated);
}

.roam-stack-tool-row {
  display: flex;
  align-items: flex-start;
  gap: var(--roam-ref-spacing-14);
}

.roam-stack-tool-name {
  font-family: var(--roam-ref-typeface-body);
  font-size: var(--roam-ref-typescale-15);
  font-weight: var(--roam-ref-weight-semibold);
  color: var(--roam-ref-palette-dark-text-primary);
  line-height: var(--roam-ref-leading-card);
  margin: 0 0 var(--roam-sys-flow-coupled) 0;
}

/* ── Gradient tagline (divider + category label) ── */

.roam-gradient-tagline {
  display: flex;
  align-items: center;
  gap: var(--roam-ref-spacing-12);
}

.roam-gradient-tagline .roam-gradient-divider {
  flex: 1;
  min-width: 0;
}

.roam-gradient-tagline-text {
  font-family: var(--roam-ref-typeface-body);
  font-size: var(--roam-ref-typescale-10);
  font-weight: var(--roam-ref-weight-semibold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--roam-ref-palette-dark-text-faint);
  white-space: nowrap;
  flex-shrink: 0;
}


/* ── Ecosystem product cards (CSS Grid) ── */

.roam-eco-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--roam-sys-flow-related);
}
@media (max-width: 768px) {
  .roam-eco-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  .roam-eco-grid { grid-template-columns: 1fr; }
}

.roam-eco-card {
  display: grid;
  grid-template-columns: var(--roam-comp-icon-box-size) 1fr;
  grid-template-rows: auto auto auto auto;
  column-gap: var(--roam-ref-spacing-14);
  row-gap: var(--roam-sys-flow-related);
  padding: var(--roam-sys-spacing-card);
  border-radius: var(--roam-ref-shape-xl);
  border: 1px solid var(--roam-comp-card-stat-border);
  background: var(--roam-comp-card-stat-bg);
}

.roam-eco-icon {
  grid-column: 1;
  grid-row: 1;
  align-self: center;
}

.roam-eco-name {
  grid-column: 2;
  grid-row: 1;
  align-self: center;
  font-family: var(--roam-ref-typeface-display);
  font-size: var(--roam-ref-typescale-20);
  line-height: var(--roam-ref-leading-card);
  margin: 0;
}

.roam-eco-divider {
  grid-column: 1 / -1;
  grid-row: 2;
  display: flex;
  align-items: center;
  gap: var(--roam-ref-spacing-12);
}

.roam-eco-divider .roam-gradient-divider {
  flex: 1;
  min-width: 0;
}

.roam-eco-desc {
  grid-column: 1 / -1;
  grid-row: 3;
  font-family: var(--roam-ref-typeface-body);
  font-size: var(--roam-ref-typescale-14);
  color: var(--roam-ref-palette-dark-text-body);
  line-height: var(--roam-ref-leading-body);
  margin: 0;
}

.roam-eco-btn {
  grid-column: 1 / -1;
  grid-row: 4;
  margin-top: auto;
}
/* ── Product tile grid (tools page ecosystem) ── */

.roam-product-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--roam-ref-spacing-12);
}
@media (max-width: 900px) {
  .roam-product-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 640px) {
  .roam-product-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 400px) {
  .roam-product-grid { grid-template-columns: 1fr; }
}

.roam-product-tile {
  display: grid;
  grid-template-columns: var(--roam-comp-icon-box-size) 1fr;
  column-gap: var(--roam-ref-spacing-12);
  align-items: center;
  padding: var(--roam-ref-spacing-16);
  border-radius: var(--roam-ref-shape-xl);
  border: 1px solid var(--roam-comp-card-stat-border);
  background: var(--roam-comp-card-stat-bg);
  text-decoration: none;
  transition: border-color 0.2s ease, transform 0.2s ease;
}

.roam-product-tile:hover,
.roam-product-tile:focus {
  border-color: var(--roam-ref-palette-dark-border-visible);
  transform: translateY(-1px);
}

.roam-product-tile-icon {
  grid-column: 1;
  grid-row: 1;
}

.roam-product-tile-info {
  grid-column: 2;
  grid-row: 1;
  display: flex;
  flex-direction: column;
  gap: var(--roam-ref-spacing-2);
  min-width: 0;
}

.roam-product-tile-name {
  font-family: var(--roam-ref-typeface-display);
  font-size: var(--roam-ref-typescale-16);
  font-weight: var(--roam-ref-weight-semibold);
  line-height: var(--roam-ref-leading-card);
}

.roam-product-tile-tag {
  font-family: var(--roam-ref-typeface-body);
  font-size: var(--roam-ref-typescale-11);
  font-weight: var(--roam-ref-weight-medium);
  letter-spacing: var(--roam-ref-tracking-xs);
  text-transform: uppercase;
  color: var(--roam-ref-palette-dark-text-faint);
  line-height: var(--roam-ref-leading-body);
}

/* ── Ecosystem groups (inside expanded card) ── */
.roam-ecosystem-group {
  margin-top: var(--roam-sys-flow-separated);
}
.roam-ecosystem-group-header {
  font-family: var(--roam-ref-typeface-body);
  font-size: var(--roam-ref-typescale-11);
  font-weight: var(--roam-ref-weight-semibold);
  letter-spacing: var(--roam-ref-tracking-md);
  text-transform: uppercase;
  margin: 0 0 var(--roam-sys-flow-related) 0;
}
.roam-product-grid-inline {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--roam-ref-spacing-12);
}
@media (min-width: 768px) {
  .roam-product-grid-inline { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 400px) {
  .roam-product-grid-inline { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════════════════
   PAGE FOOTER CTA — Left Gradient Bar
   ═══════════════════════════════════════════════════════════ */

.roam-cta-left {
  display: grid;
  grid-template-columns: var(--roam-comp-divider-bar-width) 1fr;
  border-radius: var(--roam-ref-shape-xl);
  border: 1px solid var(--roam-comp-card-stat-border);
  background: var(--roam-comp-card-stat-bg);
  overflow: hidden;
}

.roam-cta-left-bar {
  background: linear-gradient(to bottom, var(--roam-ref-palette-teal), var(--roam-ref-palette-sage), var(--roam-ref-palette-gold));
}

.roam-cta-left-inner {
  padding: var(--roam-sys-spacing-card);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--roam-sys-flow-separated);
}

.roam-cta-left-text {
  flex: 1;
  min-width: 0;
}

.roam-cta-left-heading {
  font-family: var(--roam-ref-typeface-display);
  font-size: var(--roam-ref-typescale-20);
  font-weight: var(--roam-ref-weight-semibold);
  color: var(--roam-ref-palette-dark-text-primary);
  line-height: var(--roam-ref-leading-card);
  margin: var(--roam-sys-flow-coupled) 0;
}

.roam-cta-left-body {
  font-family: var(--roam-ref-typeface-body);
  font-size: var(--roam-ref-typescale-14);
  color: var(--roam-ref-palette-dark-text-body);
  line-height: var(--roam-ref-leading-body);
  margin: 0;
}

@media (max-width: 640px) {
  .roam-cta-left-inner {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--roam-sys-flow-related);
  }
}

/* ── Light-surface CTA (v2.1.467) ──
 * The .roam-cta-left component ships dark-themed (3% cream tint, cream
 * text) for the forest-default body background. When rendered inside a
 * cream/white surface (blog hub, any .roam-surface-cream section), the
 * dark-theme styling becomes invisible. These overrides flip the card to
 * a solid white background with forest text + border so the CTA stays
 * visible on light surfaces. Same structure, same layout — just recolored.
 * Automatic via DOM context — no template changes, no modifier class. */
.roam-fg-hub-section .roam-cta-left,
.roam-surface-cream .roam-cta-left {
  background: var(--roam-ref-palette-white);
  border-color: var(--roam-ref-palette-forest-a12);
}
.roam-fg-hub-section .roam-cta-left .roam-cta-left-heading,
.roam-surface-cream .roam-cta-left .roam-cta-left-heading {
  color: var(--roam-ref-palette-forest);
}
.roam-fg-hub-section .roam-cta-left .roam-cta-left-body,
.roam-surface-cream .roam-cta-left .roam-cta-left-body {
  color: var(--roam-ref-palette-forest);
  opacity: 0.8;
}

/* ── Results page flow tokens ── */

.roam-card-stat-label + .roam-body-faint { margin-top: var(--roam-sys-flow-coupled); }
.roam-grid-card-1 + .roam-body-faint { margin-top: var(--roam-sys-flow-separated); }

/* Case study card — gradient-tagline at top */
.roam-card-results {
  display: flex;
  flex-direction: column;
}

.roam-card-results > * + * { margin-top: var(--roam-sys-flow-related); }
.roam-card-results .roam-badge-pill-inline { margin-top: 0; }
.roam-card-results .roam-card-stat-num { margin-top: var(--roam-sys-flow-coupled); }

/* ── Resource page flow tokens ── */

.roam-body-lg + .roam-faq-nav { margin-top: var(--roam-sys-flow-separated); }
.roam-block-eyebrow + .roam-grid-card-1 { margin-top: var(--roam-sys-flow-separated); }

/* Card content flow tokens */
.roam-card-content > * + * { margin-top: var(--roam-sys-flow-related); }
.roam-card-content .roam-badge-pill-inline + .roam-card-pill-title { margin-top: var(--roam-sys-flow-coupled); }

/* Card CTA — horizontal layout on tablet+ */
.roam-card-cta {
  display: flex;
  flex-direction: column;
}
@media (min-width: 768px) {
  .roam-card-cta {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: var(--roam-sys-flow-separated);
  }
  .roam-card-cta > * + * { margin-top: 0; }
}
.roam-btn-nowrap { flex-shrink: 0; white-space: nowrap; }

/* ── Section-level flow refinements ── */

/* Section border needs more breathing room than the default 16px */
.roam-section > .roam-section-border { margin-top: var(--roam-sys-spacing-section-top); }

/* Eyebrow → grid variants not yet covered */
.roam-block-eyebrow + .roam-grid-card-2 { margin-top: var(--roam-sys-flow-separated); }

/* Card-body → card-quote (standalone quote following body text) */
.roam-section > .roam-card-body + .roam-card-quote { margin-top: var(--roam-sys-flow-separated); }

/* ── QA audit: missing transition flow tokens ── */

/* Heading → body-lg (intro paragraph after heading — 54 occurrences) */
.roam-block-heading + .roam-body-lg { margin-top: var(--roam-sys-flow-related); }

/* Heading → card-body (standalone body text after heading — market report) */
.roam-block-heading + .roam-card-body { margin-top: var(--roam-sys-flow-related); }

/* Outcome card children */
.roam-outcome-card > * + * { margin-top: var(--roam-sys-flow-related); }

/* Layer card: when title is first child (no number), span full width */
.roam-layer-card > .roam-layer-title:first-child {
  grid-column: 1 / -1;
}

/* ── Block subheading (section H2 after eyebrow) ── */
.roam-block-subheading {
  font-family: var(--roam-ref-typeface-display);
  font-size: var(--roam-ref-typescale-24);
  color: var(--roam-ref-palette-dark-text-primary);
  line-height: var(--roam-ref-leading-heading);
  font-weight: var(--roam-ref-weight-normal);
  margin-bottom: 0;
}

.roam-block-eyebrow + .roam-block-subheading { margin-top: var(--roam-sys-flow-coupled); }

.roam-block-subheading + .roam-grid-card-1,
.roam-block-subheading + .roam-grid-card-2,
.roam-block-subheading + .roam-grid-card-3-133,
.roam-block-subheading + .roam-grid-card-4 {
  margin-top: var(--roam-sys-flow-separated);
}

/* ── Card body faint (inline span within headings) ── */
.roam-card-body-faint {
  color: var(--roam-ref-palette-dark-text-faint);
  font-weight: var(--roam-ref-weight-normal);
}

/* ── Ecosystem category wrapper ── */
.roam-ecosystem-category {
  /* Layout wrapper — no visual styling needed */
}

/* ── Job card flow tokens ── */
.roam-job-card > * + * { margin-top: var(--roam-sys-flow-related); }
.roam-job-card .roam-card-title + .roam-body-faint { margin-top: var(--roam-sys-flow-coupled); }
.roam-job-card .roam-btn-group { margin-top: auto; padding-top: var(--roam-sys-flow-related); }


/* ═══════════════════════════════════════════════════════════════
   MARKET PAGES — CPT roam_market
   ═══════════════════════════════════════════════════════════════ */

/*
 * Light-theme context override.
 * The body default is forest bg + cream text (homepage dark theme).
 * Market pages use a cream bg with forest text. Sections that need
 * dark backgrounds explicitly use .roam-surface-forest.
 */
.roam-market-page {
  background: var(--roam-ref-palette-cream);
  color: var(--roam-ref-palette-forest);
}

/* Override card tokens for light background context. */
.roam-market-page .roam-card-stat-std,
.roam-market-page .roam-dashboard-card,
.roam-market-page .roam-neighborhood-card,
.roam-market-page .roam-advantage-card,
.roam-market-page .roam-testimonial-card,
.roam-market-page .roam-revenue-calculator,
.roam-market-page .roam-market-form-card,
.roam-market-page .roam-bed-stat-card {
  background: var(--roam-ref-palette-white);
  border-color: var(--roam-ref-palette-forest-a12);
}

/* Headings in light context. */
.roam-market-page .roam-section-heading,
.roam-market-page .roam-block-heading,
.roam-market-page .roam-block-eyebrow {
  color: var(--roam-ref-palette-forest);
}
.roam-market-page .roam-block-eyebrow {
  color: var(--roam-ref-palette-teal);
}

/* Body text in light context. */
.roam-market-page .roam-body-lg,
.roam-market-page .roam-body-sm,
.roam-market-page p {
  color: var(--roam-ref-palette-forest);
}

/* Forest surface sections: restore cream text. */
.roam-market-page .roam-surface-forest {
  color: var(--roam-ref-palette-cream);
}
.roam-market-page .roam-surface-forest .roam-block-heading,
.roam-market-page .roam-surface-forest .roam-body-lg,
.roam-market-page .roam-surface-forest .roam-body-sm,
.roam-market-page .roam-surface-forest p {
  color: var(--roam-ref-palette-cream);
}

/* Stat card text overrides for light bg. */
.roam-market-page .roam-card-stat-num {
  color: var(--roam-ref-palette-teal);
}
.roam-market-page .roam-card-stat-label {
  color: var(--roam-ref-palette-forest);
}
.roam-market-page .roam-dashboard-value {
  color: var(--roam-ref-palette-teal);
}
.roam-market-page .roam-dashboard-label,
.roam-market-page .roam-dashboard-context {
  color: var(--roam-ref-palette-forest);
}
.roam-market-page .roam-dashboard-context {
  opacity: 0.5;
}

/* Breadcrumb separator on light bg. */
.roam-market-page .roam-breadcrumb-item + .roam-breadcrumb-item::before {
  color: var(--roam-ref-palette-forest-a30);
}

/* Form inputs on light bg — override dark-theme tokens. */
.roam-market-page .roam-form-input,
.roam-market-page .roam-form-select {
  background: var(--roam-ref-palette-white);
  border-color: var(--roam-ref-palette-forest-a15);
  color: var(--roam-ref-palette-forest);
}
.roam-market-page .roam-form-input::placeholder {
  color: var(--roam-ref-palette-forest-a30);
}
.roam-market-page .roam-form-input:focus,
.roam-market-page .roam-form-select:focus {
  border-color: var(--roam-ref-palette-teal);
}
.roam-market-page .roam-form-label {
  color: var(--roam-ref-palette-forest);
}
.roam-market-page .roam-form-disclaimer {
  color: var(--roam-ref-palette-forest-a40);
}

/* Calculator label visibility on light bg. */
.roam-market-page .roam-calc-baseline {
  background: var(--roam-ref-palette-forest-a6);
}
.roam-market-page .roam-calc-baseline-label {
  color: var(--roam-ref-palette-forest-a50);
}
.roam-market-page .roam-calc-baseline-value {
  color: var(--roam-ref-palette-forest);
}
.roam-market-page .roam-calc-lever {
  border-color: var(--roam-ref-palette-forest-a8);
}
.roam-market-page .roam-calc-lever-name {
  color: var(--roam-ref-palette-forest);
}
.roam-market-page .roam-calc-lever-result {
  color: var(--roam-ref-palette-forest-a40);
}
.roam-market-page .roam-calc-group-label {
  color: var(--roam-ref-palette-forest-a40);
}

/* FAQ chevrons instead of +/− */
.roam-market-page .roam-faq-question::after {
  content: "";
  float: right;
  width: var(--roam-ref-spacing-20);
  height: var(--roam-ref-spacing-20);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%235B8FA8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  transition: transform 0.2s;
}
.roam-market-page .roam-faq-item[open] .roam-faq-question::after {
  content: "";
  transform: rotate(180deg);
}
.roam-market-page .roam-faq-question {
  color: var(--roam-ref-palette-forest);
}
.roam-market-page .roam-faq-answer p {
  color: var(--roam-ref-palette-forest-a50);
}
.roam-market-page .roam-faq-item {
  border-color: var(--roam-ref-palette-forest-a8);
}

/*
 * Market page buttons — direct-element styling.
 * The site-wide button system uses wrappers: <div class="roam-btn"><a>Text</a></div>
 * Market templates apply .roam-btn classes directly on <a> and <button> elements.
 */
.roam-market-page a.roam-btn,
.roam-market-page button.roam-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--roam-ref-typeface-body);
  font-weight: var(--roam-ref-weight-semibold);
  letter-spacing: var(--roam-ref-tracking-sm);
  text-transform: uppercase;
  border-radius: var(--roam-ref-shape-full);
  text-decoration: none;
  cursor: pointer;
  transition: opacity 0.15s, background-color 0.15s;
  border: none;
}
.roam-market-page a.roam-btn:hover,
.roam-market-page button.roam-btn:hover {
  opacity: 0.85;
}

/* Sizes */
.roam-market-page .roam-btn-md {
  height: var(--roam-ref-spacing-40);
  font-size: var(--roam-ref-typescale-14);
  padding: 0 var(--roam-ref-spacing-20);
}
.roam-market-page .roam-btn-sm {
  height: var(--roam-ref-spacing-32);
  font-size: var(--roam-ref-typescale-12);
  padding: 0 var(--roam-ref-spacing-16);
}
.roam-market-page .roam-btn-xs {
  height: var(--roam-ref-spacing-28);
  font-size: var(--roam-ref-typescale-11);
  padding: 0 var(--roam-ref-spacing-12);
}

/* Variants */
.roam-market-page .roam-btn-gold {
  background: var(--roam-ref-palette-gold);
  color: var(--roam-ref-palette-white);
}
.roam-market-page .roam-btn-gold:hover {
  background: var(--roam-ref-palette-gold-hover);
}
.roam-market-page .roam-btn-outline-teal {
  background: transparent;
  border: 1.5px solid var(--roam-ref-palette-teal);
  color: var(--roam-ref-palette-teal);
}
.roam-market-page .roam-btn-outline-teal:hover {
  background: var(--roam-ref-palette-teal-a5);
}
.roam-market-page .roam-btn-ghost-cream {
  background: transparent;
  border: 1.5px solid var(--roam-ref-palette-cream-a40);
  color: var(--roam-ref-palette-cream);
}
.roam-market-page .roam-btn-ghost-gold {
  background: transparent;
  border: 1.5px solid var(--roam-ref-palette-gold-a40);
  color: var(--roam-ref-palette-gold);
}
.roam-market-page .roam-btn-full {
  width: 100%;
}

/* Hero gap fix — trust bar to stats bar had 297px gap. */
.roam-sec-hero-market .roam-market-hero-content {
  display: flex;
  flex-direction: column;
}
.roam-sec-hero-market .roam-market-stats-bar {
  margin-top: var(--roam-sys-flow-separated);
}

/* Form card — add subtle shadow for contrast on cream bg. */
.roam-market-page .roam-market-form-card {
  box-shadow: 0 2px 12px rgba(27, 43, 39, 0.08);
}

/* ── Breadcrumb ── */
.roam-breadcrumb-list {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--roam-ref-spacing-6);
  padding: 0;
  margin: 0;
  min-height: var(--roam-ref-spacing-20);
  align-items: center;
}
.roam-breadcrumb-item {
  font-family: var(--roam-ref-typeface-body);
  font-size: var(--roam-ref-typescale-12);
  letter-spacing: var(--roam-ref-tracking-lg);
  text-transform: uppercase;
  color: var(--roam-ref-palette-teal);
}
.roam-breadcrumb-item + .roam-breadcrumb-item::before {
  content: "›";
  margin-right: var(--roam-ref-spacing-6);
  color: var(--roam-ref-palette-forest-a30);
}
.roam-breadcrumb-item a {
  color: var(--roam-ref-palette-teal);
  text-decoration: none;
}
.roam-breadcrumb-item a:hover {
  text-decoration: underline;
}
.roam-breadcrumb-current {
  color: var(--roam-ref-palette-forest-a50);
}

/* ── Mobile: truncate middle items — show only first + last with ellipsis separator ── */
@media (max-width: 767px) {
  /* Hide any item that has at least one before AND at least one after */
  .roam-breadcrumb-item:not(:first-child):not(:last-child) {
    display: none;
  }
  /* If the list has 3+ items, replace the last item's separator with "… ›" */
  .roam-breadcrumb-list:has(.roam-breadcrumb-item:nth-child(3)) .roam-breadcrumb-item:last-child::before {
    content: "… ›";
  }
}

/* ── Market Hero Section (standalone) ── */
.roam-sec-hero-market {
  padding-top: var(--roam-sys-spacing-section-top);
  padding-bottom: var(--roam-ref-spacing-40);
  padding-left: max(var(--roam-sys-spacing-page-x), calc((100vw - var(--roam-ref-layout-1280)) / 2 + var(--roam-sys-spacing-page-x)));
  padding-right: max(var(--roam-sys-spacing-page-x), calc((100vw - var(--roam-ref-layout-1280)) / 2 + var(--roam-sys-spacing-page-x)));
  background: var(--roam-ref-palette-cream);
  position: relative;
}
.roam-market-hero-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--roam-sys-flow-separated);
}
@media (min-width: 768px) {
  .roam-market-hero-grid {
    grid-template-columns: 1fr 380px;
    gap: var(--roam-ref-spacing-48);
    align-items: start;
  }
}

/* Hero content flow */
.roam-market-hero-content > * + * {
  margin-top: var(--roam-sys-flow-related);
}
.roam-market-hero-content .roam-block-eyebrow + .roam-block-heading {
  margin-top: var(--roam-sys-flow-coupled);
}
.roam-market-hero-content .roam-block-heading + .roam-body-lg {
  margin-top: var(--roam-sys-flow-related);
}

/* Trust bar */
.roam-market-trust-bar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--roam-sys-flow-related);
  padding-top: var(--roam-sys-flow-related);
}
.roam-trust-item {
  font-family: var(--roam-ref-typeface-body);
  font-size: var(--roam-ref-typescale-12);
  color: var(--roam-ref-palette-forest-a50);
  display: flex;
  align-items: center;
  gap: var(--roam-ref-spacing-4);
}
.roam-trust-item strong {
  color: var(--roam-ref-palette-teal);
}
.roam-trust-vs {
  font-size: var(--roam-ref-typescale-10);
  opacity: 0.7;
}

/* Hero form card */
.roam-market-form-card {
  padding: var(--roam-sys-spacing-card);
  border-radius: var(--roam-ref-shape-xl);
  border: 1px solid var(--roam-ref-palette-forest-a12);
  background: var(--roam-ref-palette-white);
}
.roam-market-form-heading {
  font-family: var(--roam-ref-typeface-display);
  font-size: var(--roam-ref-typescale-18);
  color: var(--roam-ref-palette-forest);
  margin-bottom: var(--roam-sys-flow-related);
}
.roam-market-form .roam-form-group + .roam-form-group {
  margin-top: var(--roam-sys-flow-coupled);
}
.roam-market-form .roam-btn-full {
  margin-top: var(--roam-sys-flow-related);
}
.roam-form-disclaimer {
  font-family: var(--roam-ref-typeface-body);
  font-size: var(--roam-ref-typescale-10);
  color: var(--roam-ref-palette-forest-a40);
  text-align: center;
  margin-top: var(--roam-sys-flow-coupled);
}

/* ── Stats Bar ── */
.roam-market-stats-bar {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--roam-sys-flow-related);
  margin-top: var(--roam-sys-flow-separated);
}
@media (min-width: 768px) {
  .roam-market-stats-bar {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* ── ROAM vs Market Comparison ── */
.roam-market-comparison {
  color: var(--roam-ref-palette-cream);
}
.roam-market-comparison-card {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--roam-sys-flow-related);
}
.roam-market-comparison-card strong {
  color: var(--roam-ref-palette-gold);
}

/* ── Section headings for market pages ── */
.roam-section-heading {
  font-family: var(--roam-ref-typeface-display);
  font-size: var(--roam-ref-typescale-24);
  color: var(--roam-ref-palette-forest);
  margin-bottom: var(--roam-sys-flow-separated);
}
@media (min-width: 768px) {
  .roam-section-heading {
    font-size: var(--roam-ref-typescale-28);
  }
}

/* ── Market Score Dashboard (WEB-DASH-001 spec v0.3, v2.1.410) ──
 * 9-card grid. All tokens reference --roam-ref-palette-* and
 * --roam-ref-spacing-*. No hardcoded raw values. No Tailwind. No WP classes.
 * Skeleton shimmer renders for NULL score/data; em-dash for NULL comparisons.
 */

/* ── Section wrapper ── */
.roam-market-dashboard-section {
  padding-top: var(--roam-sys-spacing-section-top);
  padding-bottom: var(--roam-sys-spacing-section-bottom);
}
.roam-dash-heading {
  font-family: var(--roam-ref-typeface-display);
  font-size: clamp(var(--roam-ref-typescale-28), 4vw, var(--roam-ref-typescale-36));
  line-height: var(--roam-ref-leading-tight);
  color: var(--roam-ref-palette-forest);
  margin: 0 0 var(--roam-ref-spacing-32) 0;
  max-width: var(--roam-ref-layout-840);
}

/* ── Grid ──
 * The dashboard is a flex column of card-row groups. Each card-row
 * is itself a responsive grid.
 *
 * Mobile (<640px):  row = single flex column, all cards stack
 * Tablet (640-1023): row = 2-col grid, span-1 cards share, span-2/4 full-width
 * Desktop (>=1024): row = 4-col × 5-subrow grid. Standard cards use subgrid
 *                    so their title/subtitle/graph/legend/caption align
 *                    horizontally across all cards in the same card-row.
 *
 * The 5 sub-rows at desktop (auto auto minmax(100px,1fr) auto auto) give:
 *   sub-row 1 — Title        (auto — sized to tallest title in the row)
 *   sub-row 2 — Subtitle     (auto — sized to tallest subtitle in the row)
 *   sub-row 3 — Graph        (1fr — absorbs extra height, minmax guards 100px)
 *   sub-row 4 — Legend       (auto)
 *   sub-row 5 — Caption      (auto — sized to tallest caption in the row)
 */
.roam-dash-grid {
  display: flex;
  flex-direction: column;
  gap: var(--roam-sys-flow-related);
}
.roam-dash-row {
  display: flex;
  flex-direction: column;
  gap: var(--roam-sys-flow-related);
}
.roam-dash-card-span-1,
.roam-dash-card-span-2,
.roam-dash-card-span-4 {
  grid-column: 1 / -1;
}
@media (min-width: 640px) {
  .roam-dash-row {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--roam-sys-flow-related);
  }
  .roam-dash-card-span-1 { grid-column: span 1; }
  .roam-dash-card-span-2 { grid-column: 1 / -1; }
  .roam-dash-card-span-4 { grid-column: 1 / -1; }
}
@media (min-width: 1024px) {
  .roam-dash-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: auto auto minmax(100px, 1fr) auto auto;
    column-gap: var(--roam-sys-flow-related);
    row-gap: var(--roam-ref-spacing-12);
  }
  .roam-dash-card-span-1 { grid-column: span 1; grid-row: 1 / -1; }
  .roam-dash-card-span-2 { grid-column: span 2; grid-row: 1 / -1; }
  .roam-dash-card-span-4 { grid-column: span 4; grid-row: 1 / -1; }
}

/* ── Card base ── */
.roam-dash-card {
  position: relative;
  background: var(--roam-ref-palette-white);
  border: 1px solid var(--roam-ref-palette-forest-a12);
  border-radius: var(--roam-ref-shape-xl);
  padding: var(--roam-ref-spacing-24);
  overflow: hidden;
}

/* ── Standard card internal layout ──
 * Applied to Yield, Pop, Occupancy, Regulations, Density, Trend,
 * and Seasonality cards. Hero and Proof keep custom layouts.
 *
 * Mobile/Tablet: flex column, Graph row = flex:1 absorbs extra height.
 * Desktop: subgrid — the card inherits its parent row's 5 tracks so
 *   titles, subtitles, graphs, legends, and captions all align
 *   horizontally across cards in the same card-row.
 *
 * Row 1: Title         (.roam-dash-card-title)
 * Row 2: Subtitle      (.roam-dash-card-subtitle)
 * Row 3: Graph         (.roam-dash-card-visual — fills remaining height)
 * Row 4: Legend        (card-specific legend class)
 * Row 5: Caption       (.roam-dash-card-caption — centered at the bottom)
 *
 * At desktop the card-header wrapper uses display:contents so its
 * children (h3 + p) participate directly in the card's subgrid as
 * rows 1 and 2 instead of being a single wrapped row.
 */
.roam-dash-card-standard {
  display: flex;
  flex-direction: column;
  gap: var(--roam-ref-spacing-12);
}
.roam-dash-card-standard > .roam-dash-card-header {
  margin-bottom: 0;
}
.roam-dash-card-standard > .roam-dash-card-visual {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--roam-sys-flow-coupled);
  min-height: 0;
}
.roam-dash-card-standard > .roam-dash-card-visual > * {
  margin: 0;
}
.roam-dash-card-standard > .roam-dash-card-caption {
  margin-top: 0;
}
@media (min-width: 1024px) {
  .roam-dash-card-standard {
    display: grid;
    grid-template-rows: subgrid;
    grid-row: 1 / -1;
    gap: 0;
  }
  .roam-dash-card-standard > .roam-dash-card-header {
    display: contents;
  }
  .roam-dash-card-standard > .roam-dash-card-visual {
    flex: unset;
    height: auto;
    width: 100%;
  }
}
.roam-dash-card-header {
  margin-bottom: var(--roam-sys-flow-related);
  text-align: center;
}
.roam-dash-card-title {
  font-family: var(--roam-ref-typeface-display);
  font-size: var(--roam-ref-typescale-20);
  color: var(--roam-ref-palette-forest);
  margin: 0 0 var(--roam-ref-spacing-4) 0;
  line-height: var(--roam-ref-leading-tight);
  text-align: center;
}
.roam-dash-card-subtitle {
  font-family: var(--roam-ref-typeface-body);
  font-size: var(--roam-ref-typescale-12);
  color: var(--roam-ref-palette-forest-a50);
  margin: 0;
  text-align: center;
}
.roam-dash-card-caption {
  font-family: var(--roam-ref-typeface-body);
  font-size: var(--roam-ref-typescale-11);
  color: var(--roam-ref-palette-forest-a50);
  margin: var(--roam-ref-spacing-12) 0 0 0;
  line-height: var(--roam-ref-leading-normal);
  text-align: center;
}
.roam-dash-card-context {
  font-family: var(--roam-ref-typeface-body);
  font-size: var(--roam-ref-typescale-13);
  color: var(--roam-ref-palette-forest);
  margin: var(--roam-ref-spacing-12) 0 0 0;
}
.roam-dash-text-center { text-align: center; }
.roam-dash-card-eyebrow {
  font-family: var(--roam-ref-typeface-body);
  font-size: var(--roam-ref-typescale-10);
  font-weight: 600;
  letter-spacing: var(--roam-ref-tracking-lg);
  text-transform: uppercase;
  color: var(--roam-ref-palette-forest-a50);
  margin: 0 0 var(--roam-ref-spacing-16) 0;
  text-align: center;
}

/* ── Score badge (top-right of each non-hero card) ── */
.roam-dash-badge-wrap {
  position: absolute;
  top: var(--roam-ref-spacing-16);
  right: var(--roam-ref-spacing-16);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--roam-ref-spacing-3);
  z-index: 1;
}
.roam-dash-badge {
  width: var(--roam-ref-spacing-36);
  height: var(--roam-ref-spacing-36);
  border-radius: var(--roam-ref-shape-full);
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--roam-ref-palette-forest-a12);
  background: var(--roam-ref-palette-white);
}
.roam-dash-badge-num {
  font-family: var(--roam-ref-typeface-display);
  font-size: var(--roam-ref-typescale-14);
  line-height: 1;
}
.roam-dash-badge-tier {
  font-family: var(--roam-ref-typeface-body);
  font-size: var(--roam-ref-typescale-9);
  font-weight: 600;
  letter-spacing: var(--roam-ref-tracking-md);
  text-transform: uppercase;
}
.roam-dash-badge-wrap--exceptional .roam-dash-badge { border-color: var(--roam-ref-palette-gold); background: var(--roam-ref-palette-gold-a30); }
.roam-dash-badge-wrap--exceptional .roam-dash-badge-num { color: var(--roam-ref-palette-gold); }
.roam-dash-badge-wrap--exceptional .roam-dash-badge-tier { color: var(--roam-ref-palette-gold); }
.roam-dash-badge-wrap--strong .roam-dash-badge { border-color: var(--roam-ref-palette-teal); background: var(--roam-ref-palette-teal-a30); }
.roam-dash-badge-wrap--strong .roam-dash-badge-num { color: var(--roam-ref-palette-teal); }
.roam-dash-badge-wrap--strong .roam-dash-badge-tier { color: var(--roam-ref-palette-teal); }
.roam-dash-badge-wrap--solid .roam-dash-badge { border-color: var(--roam-ref-palette-sage); background: var(--roam-ref-palette-sage-a30); }
.roam-dash-badge-wrap--solid .roam-dash-badge-num { color: var(--roam-ref-palette-sage); }
.roam-dash-badge-wrap--solid .roam-dash-badge-tier { color: var(--roam-ref-palette-sage); }
.roam-dash-badge-wrap--challenging .roam-dash-badge { border-color: var(--roam-ref-palette-bronze); background: var(--roam-ref-palette-bronze-a30); }
.roam-dash-badge-wrap--challenging .roam-dash-badge-num { color: var(--roam-ref-palette-bronze); }
.roam-dash-badge-wrap--challenging .roam-dash-badge-tier { color: var(--roam-ref-palette-bronze); }
.roam-dash-badge-wrap--poor .roam-dash-badge { border-color: var(--roam-ref-palette-forest-a50); background: var(--roam-ref-palette-forest-a8); }
.roam-dash-badge-wrap--poor .roam-dash-badge-num { color: var(--roam-ref-palette-forest-a50); }
.roam-dash-badge-wrap--poor .roam-dash-badge-tier { color: var(--roam-ref-palette-forest-a50); }
.roam-dash-badge-wrap--skeleton .roam-dash-badge-tier { color: var(--roam-ref-palette-forest-a40); }

/* ── Card 0 — Market Score Hero ── */
.roam-dash-card-hero {
  background: var(--roam-ref-palette-white);
  padding: var(--roam-ref-spacing-32);
}
.roam-dash-score-watermark {
  position: absolute;
  top: var(--roam-ref-spacing-20);
  right: var(--roam-ref-spacing-20);
  width: 96px;
  height: auto;
  opacity: 0.08;
  pointer-events: none;
}
.roam-dash-score-hero {
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: var(--roam-ref-spacing-32);
  align-items: start;
}
@media (max-width: 640px) {
  .roam-dash-score-hero {
    grid-template-columns: 1fr;
    justify-items: center;
  }
}
.roam-dash-score-circle {
  width: 180px;
  height: 180px;
  border-radius: var(--roam-ref-shape-full);
  border: var(--roam-ref-spacing-8) solid var(--roam-ref-palette-forest-a12);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--roam-ref-spacing-4);
  background: var(--roam-ref-palette-white);
}
.roam-dash-score-number {
  font-family: var(--roam-ref-typeface-display);
  font-size: 72px;
  line-height: 0.85;
  color: var(--roam-ref-palette-forest);
  margin-top: calc(var(--roam-ref-spacing-8) * -1);
}
.roam-dash-score-tier-inline {
  font-family: var(--roam-ref-typeface-body);
  font-size: var(--roam-ref-typescale-12);
  font-weight: 600;
  letter-spacing: var(--roam-ref-tracking-lg);
  text-transform: uppercase;
  margin-top: var(--roam-sys-flow-coupled);
}
.roam-dash-score-circle--exceptional { border-color: var(--roam-ref-palette-gold); }
.roam-dash-score-circle--exceptional .roam-dash-score-tier-inline { color: var(--roam-ref-palette-gold); }
.roam-dash-score-circle--strong { border-color: var(--roam-ref-palette-teal); }
.roam-dash-score-circle--strong .roam-dash-score-tier-inline { color: var(--roam-ref-palette-teal); }
.roam-dash-score-circle--solid { border-color: var(--roam-ref-palette-sage); }
.roam-dash-score-circle--solid .roam-dash-score-tier-inline { color: var(--roam-ref-palette-sage); }
.roam-dash-score-circle--challenging { border-color: var(--roam-ref-palette-bronze); }
.roam-dash-score-circle--challenging .roam-dash-score-tier-inline { color: var(--roam-ref-palette-bronze); }
.roam-dash-score-circle--poor { border-color: var(--roam-ref-palette-forest-a50); }
.roam-dash-score-circle--poor .roam-dash-score-tier-inline { color: var(--roam-ref-palette-forest-a50); }
.roam-dash-score-circle--skeleton {
  border-color: var(--roam-ref-palette-forest-a12);
  justify-content: center;
}

.roam-dash-score-tier-label {
  font-family: var(--roam-ref-typeface-display);
  font-size: var(--roam-ref-typescale-28);
  margin: 0 0 var(--roam-ref-spacing-4) 0;
  line-height: var(--roam-ref-leading-tight);
}
.roam-dash-score-tier-label--exceptional { color: var(--roam-ref-palette-gold); }
.roam-dash-score-tier-label--strong { color: var(--roam-ref-palette-teal); }
.roam-dash-score-tier-label--solid { color: var(--roam-ref-palette-sage); }
.roam-dash-score-tier-label--challenging { color: var(--roam-ref-palette-bronze); }
.roam-dash-score-tier-label--poor { color: var(--roam-ref-palette-forest-a50); }
.roam-dash-score-tier-label--pending { color: var(--roam-ref-palette-forest-a40); }
.roam-dash-score-market-name {
  font-family: var(--roam-ref-typeface-body);
  font-size: var(--roam-ref-typescale-13);
  color: var(--roam-ref-palette-forest-a50);
  margin: 0 0 var(--roam-ref-spacing-16) 0;
}

.roam-dash-score-rail {
  position: relative;
  height: var(--roam-ref-spacing-8);
  background: var(--roam-ref-palette-forest-a6);
  border-radius: var(--roam-ref-shape-full);
  margin-bottom: var(--roam-ref-spacing-6);
  overflow: visible;
}
.roam-dash-score-rail-fill {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  background: linear-gradient(90deg, var(--roam-ref-palette-bronze), var(--roam-ref-palette-sage), var(--roam-ref-palette-teal), var(--roam-ref-palette-gold));
  border-radius: var(--roam-ref-shape-full);
}
.roam-dash-score-rail-marker {
  position: absolute;
  top: -4px;
  width: var(--roam-ref-spacing-16);
  height: var(--roam-ref-spacing-16);
  border-radius: var(--roam-ref-shape-full);
  background: var(--roam-ref-palette-white);
  border: var(--roam-ref-spacing-3) solid var(--roam-ref-palette-forest-a50);
  transform: translateX(-50%);
}
.roam-dash-score-rail-marker--exceptional { border-color: var(--roam-ref-palette-gold); }
.roam-dash-score-rail-marker--strong { border-color: var(--roam-ref-palette-teal); }
.roam-dash-score-rail-marker--solid { border-color: var(--roam-ref-palette-sage); }
.roam-dash-score-rail-marker--challenging { border-color: var(--roam-ref-palette-bronze); }
.roam-dash-score-rail-marker--poor { border-color: var(--roam-ref-palette-forest-a50); }
.roam-dash-score-rail-labels {
  display: flex;
  justify-content: space-between;
  font-family: var(--roam-ref-typeface-body);
  font-size: var(--roam-ref-typescale-9);
  color: var(--roam-ref-palette-forest-a40);
  letter-spacing: var(--roam-ref-tracking-md);
  margin-bottom: var(--roam-sys-flow-separated);
}

.roam-dash-score-inputs {
  display: flex;
  flex-direction: column;
  gap: var(--roam-sys-flow-coupled);
  margin-bottom: var(--roam-ref-spacing-20);
}
.roam-dash-score-input-row {
  display: grid;
  grid-template-columns: 100px 1fr var(--roam-ref-spacing-36);
  gap: var(--roam-ref-spacing-12);
  align-items: center;
}
.roam-dash-score-input-label {
  font-family: var(--roam-ref-typeface-body);
  font-size: var(--roam-ref-typescale-12);
  color: var(--roam-ref-palette-forest);
}
.roam-dash-score-input-bar {
  height: var(--roam-ref-spacing-8);
  background: var(--roam-ref-palette-forest-a6);
  border-radius: var(--roam-ref-shape-full);
  position: relative;
  overflow: hidden;
}
.roam-dash-score-input-bar-fill {
  height: 100%;
  border-radius: var(--roam-ref-shape-full);
  transition: width 0.6s ease;
}
.roam-dash-score-input-bar-fill--exceptional { background: var(--roam-ref-palette-gold); }
.roam-dash-score-input-bar-fill--strong { background: var(--roam-ref-palette-teal); }
.roam-dash-score-input-bar-fill--solid { background: var(--roam-ref-palette-sage); }
.roam-dash-score-input-bar-fill--challenging { background: var(--roam-ref-palette-bronze); }
.roam-dash-score-input-bar-fill--poor { background: var(--roam-ref-palette-forest-a50); }
.roam-dash-score-input-value {
  font-family: var(--roam-ref-typeface-display);
  font-size: var(--roam-ref-typescale-16);
  color: var(--roam-ref-palette-forest);
  text-align: right;
  line-height: 1;
}

/* Methodology toggle/panel */
.roam-dash-methodology-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--roam-ref-spacing-6);
  background: transparent;
  border: 1.5px solid var(--roam-ref-palette-gold-a40);
  color: var(--roam-ref-palette-gold);
  font-family: var(--roam-ref-typeface-body);
  font-size: var(--roam-ref-typescale-12);
  font-weight: 600;
  letter-spacing: var(--roam-ref-tracking-md);
  text-transform: uppercase;
  padding: var(--roam-ref-spacing-8) var(--roam-ref-spacing-16);
  border-radius: var(--roam-ref-shape-full);
  cursor: pointer;
  transition: transform 0.2s ease, opacity 0.2s ease;
}
.roam-dash-methodology-toggle:hover,
.roam-dash-methodology-toggle:focus-visible {
  background: var(--roam-ref-palette-gold);
  color: var(--roam-ref-palette-white);
  outline: none;
  transform: translateY(-1px);
}
.roam-dash-methodology-chevron {
  width: var(--roam-ref-spacing-14);
  height: var(--roam-ref-spacing-14);
  transition: transform 0.2s ease;
}
.roam-dash-methodology-toggle[aria-expanded="true"] .roam-dash-methodology-chevron {
  transform: rotate(180deg);
}
.roam-dash-methodology-panel {
  margin-top: var(--roam-sys-flow-separated);
  padding: var(--roam-ref-spacing-20);
  background: var(--roam-ref-palette-cream);
  border-radius: var(--roam-ref-shape-lg);
}
.roam-dash-methodology-panel h4 {
  font-family: var(--roam-ref-typeface-display);
  font-size: var(--roam-ref-typescale-18);
  margin: 0 0 var(--roam-ref-spacing-8) 0;
  color: var(--roam-ref-palette-forest);
}
.roam-dash-methodology-panel p {
  font-family: var(--roam-ref-typeface-body);
  font-size: var(--roam-ref-typescale-13);
  color: var(--roam-ref-palette-forest);
  line-height: var(--roam-ref-leading-normal);
  margin: 0 0 var(--roam-ref-spacing-12) 0;
}
.roam-dash-methodology-panel .roam-dash-methodology-note {
  font-size: var(--roam-ref-typescale-12);
  color: var(--roam-ref-palette-forest-a50);
  margin-top: var(--roam-ref-spacing-12);
  margin-bottom: 0;
}
.roam-dash-methodology-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--roam-ref-typeface-body);
  font-size: var(--roam-ref-typescale-12);
  margin: var(--roam-ref-spacing-8) 0;
}
.roam-dash-methodology-table th,
.roam-dash-methodology-table td {
  padding: var(--roam-ref-spacing-6) var(--roam-ref-spacing-8);
  text-align: left;
  border-bottom: 1px solid var(--roam-ref-palette-forest-a6);
}
@media (max-width: 640px) {
  .roam-dash-methodology-table {
    font-size: var(--roam-ref-typescale-10);
  }
  .roam-dash-methodology-table th,
  .roam-dash-methodology-table td {
    padding: var(--roam-ref-spacing-4) var(--roam-ref-spacing-6);
  }
  .roam-dash-methodology-table th {
    font-size: var(--roam-ref-typescale-9);
  }
}
.roam-dash-methodology-table th {
  font-weight: 600;
  color: var(--roam-ref-palette-forest-a50);
  letter-spacing: var(--roam-ref-tracking-md);
  text-transform: uppercase;
  font-size: var(--roam-ref-typescale-10);
}
.roam-dash-methodology-table tfoot td {
  font-weight: 600;
  color: var(--roam-ref-palette-forest);
  border-bottom: none;
}

/* ── Card 1 — Yield ── */
.roam-dash-yield-wrap {
  display: flex;
  justify-content: center;
  margin: var(--roam-ref-spacing-8) 0 var(--roam-ref-spacing-4);
}
.roam-dash-yield-arcs {
  width: 100%;
  max-width: var(--roam-ref-layout-420);
  height: auto;
  display: block;
  aspect-ratio: 200 / 130;
  max-height: 220px;
}
.roam-dash-yield-big-value {
  font-family: var(--roam-ref-typeface-display);
  font-size: var(--roam-ref-typescale-36);
  color: var(--roam-ref-palette-teal);
  text-align: center;
  margin: 0 0 var(--roam-ref-spacing-12) 0;
  line-height: 1;
}
.roam-dash-yield-legend {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--roam-ref-spacing-6) var(--roam-ref-spacing-16);
  justify-content: center;
  justify-items: center;
  max-width: var(--roam-ref-layout-420);
  margin: 0 auto var(--roam-ref-spacing-8);
}
.roam-dash-legend-item {
  display: inline-flex;
  align-items: center;
  gap: var(--roam-ref-spacing-6);
  font-family: var(--roam-ref-typeface-body);
  font-size: var(--roam-ref-typescale-12);
  color: var(--roam-ref-palette-forest);
}
.roam-dash-legend-dot {
  width: var(--roam-ref-spacing-10);
  height: var(--roam-ref-spacing-10);
  border-radius: var(--roam-ref-shape-full);
  flex-shrink: 0;
}

/* ── Card 2 — Population ── */
.roam-dash-pop-wrap {
  display: flex;
  justify-content: center;
  margin: var(--roam-ref-spacing-8) 0 var(--roam-ref-spacing-16);
}
.roam-dash-pop-stack {
  position: relative;
  width: 100%;
  max-width: 180px;
  aspect-ratio: 1 / 1;
}
.roam-dash-pop-stack svg {
  width: 100%;
  height: 100%;
}
.roam-dash-pop-center {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.roam-dash-pop-center-num {
  font-family: var(--roam-ref-typeface-display);
  font-size: var(--roam-ref-typescale-20);
  color: var(--roam-ref-palette-cream);
  line-height: 1;
}
.roam-dash-pop-legend {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--roam-sys-flow-related);
  margin: 0 auto var(--roam-ref-spacing-8);
}

/* ── Card 3 — Density ── */
.roam-dash-density-rows {
  display: flex;
  flex-direction: column;
  gap: var(--roam-ref-spacing-10);
  margin: var(--roam-ref-spacing-16) 0;
  width: 100%;
}
.roam-dash-density-row {
  display: grid;
  grid-template-columns: 120px 1fr var(--roam-ref-spacing-60);
  gap: var(--roam-ref-spacing-12);
  align-items: center;
}
.roam-dash-density-row-name {
  font-family: var(--roam-ref-typeface-body);
  font-size: var(--roam-ref-typescale-13);
  color: var(--roam-ref-palette-forest);
}
.roam-dash-density-row--subject .roam-dash-density-row-name {
  font-weight: 600;
}
.roam-dash-density-row-track {
  height: var(--roam-ref-spacing-20);
  background: var(--roam-ref-palette-forest-a6);
  border-radius: var(--roam-ref-shape-xs);
  display: flex;
  overflow: hidden;
}
.roam-dash-density-seg {
  height: 100%;
}
.roam-dash-density-seg--local { background: var(--roam-ref-palette-teal); }
.roam-dash-density-seg--county { background: var(--roam-ref-palette-sage); }
.roam-dash-density-seg--region { background: var(--roam-ref-palette-greige); }
.roam-dash-density-row-total {
  font-family: var(--roam-ref-typeface-body);
  font-size: var(--roam-ref-typescale-13);
  color: var(--roam-ref-palette-forest);
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* ── Card 4 — Occupancy bars ── */
.roam-dash-occ-bars {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--roam-ref-spacing-12);
  height: 140px;
  margin: var(--roam-ref-spacing-16) 0 var(--roam-ref-spacing-8);
  width: 100%;
}
.roam-dash-occ-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  height: 100%;
  gap: var(--roam-ref-spacing-4);
  position: relative;
}
.roam-dash-occ-fill {
  width: 100%;
  max-width: var(--roam-ref-spacing-48);
  border-radius: var(--roam-ref-shape-xs) var(--roam-ref-shape-xs) 0 0;
  min-height: var(--roam-ref-spacing-8);
  order: 2;
}
.roam-dash-occ-fill--bronze { background: var(--roam-ref-palette-bronze); }
.roam-dash-occ-fill--sage { background: var(--roam-ref-palette-sage); }
.roam-dash-occ-fill--gold { background: var(--roam-ref-palette-gold); }
.roam-dash-occ-fill--teal { background: var(--roam-ref-palette-teal); }
.roam-dash-occ-num {
  font-family: var(--roam-ref-typeface-display);
  font-size: var(--roam-ref-typescale-16);
  color: var(--roam-ref-palette-forest);
  order: 1;
  line-height: 1;
}
.roam-dash-occ-col-hl .roam-dash-occ-num { color: var(--roam-ref-palette-teal); font-weight: 600; }
.roam-dash-occ-label {
  font-family: var(--roam-ref-typeface-body);
  font-size: var(--roam-ref-typescale-10);
  color: var(--roam-ref-palette-forest-a50);
  letter-spacing: var(--roam-ref-tracking-md);
  text-transform: uppercase;
  order: 3;
  line-height: 1.2;
  min-height: 2.4em;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  text-align: center;
  width: 100%;
}
.roam-dash-delta-pos {
  color: var(--roam-ref-palette-success);
  font-weight: 600;
  margin-right: var(--roam-ref-spacing-4);
}

/* ── Card 5 — Regulations (5 horizontal pills, binary on/off at 60% threshold) ── */
.roam-dash-reg-dashes {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--roam-ref-spacing-6);
  margin: var(--roam-ref-spacing-20) 0 var(--roam-ref-spacing-16);
  width: 100%;
}
.roam-dash-reg-dash-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--roam-sys-flow-coupled);
  min-width: 0;
}
.roam-dash-reg-dash {
  width: 100%;
  max-width: var(--roam-ref-spacing-48);
  height: var(--roam-ref-spacing-10);
  border-radius: var(--roam-ref-shape-full);
  background: var(--roam-ref-palette-forest-a12);
  transition: opacity 0.2s ease;
}
.roam-dash-reg-dash--on { background: var(--roam-ref-palette-gold); }
.roam-dash-reg-dash--off { background: var(--roam-ref-palette-forest-a12); }
.roam-dash-reg-dash--skeleton {
  background: linear-gradient(
    90deg,
    var(--roam-ref-palette-forest-a6) 0%,
    var(--roam-ref-palette-forest-a12) 50%,
    var(--roam-ref-palette-forest-a6) 100%
  );
  background-size: 200% 100%;
  animation: roam-dash-shimmer 1.6s ease-in-out infinite;
}

/* ── 5-band meter (v2.1.467) ──
 * Each pill carries a positional tier class (--poor through --exceptional)
 * and a state class (--filled, --empty, or --skeleton). Empty pills show
 * the neutral faint background; filled pills take their positional tier
 * color. Compound selectors keep position and state orthogonal. */
.roam-dash-reg-dash--empty { background: var(--roam-ref-palette-forest-a12); }

.roam-dash-reg-dash--filled.roam-dash-reg-dash--poor        { background: var(--roam-ref-palette-forest-a50); }
.roam-dash-reg-dash--filled.roam-dash-reg-dash--challenging { background: var(--roam-ref-palette-bronze); }
.roam-dash-reg-dash--filled.roam-dash-reg-dash--solid       { background: var(--roam-ref-palette-sage); }
.roam-dash-reg-dash--filled.roam-dash-reg-dash--strong      { background: var(--roam-ref-palette-teal); }
.roam-dash-reg-dash--filled.roam-dash-reg-dash--exceptional { background: var(--roam-ref-palette-gold); }

/* Grade label under the pills — matches .roam-dash-score-tier-label
 * pattern at L8577 (display typeface, colored by tier). Centered via
 * text-align on .roam-dash-card-standard > .roam-dash-card-visual which
 * already sets align-items: center for pill row. */
.roam-dash-reg-grade {
  font-family: var(--roam-ref-typeface-display);
  font-size: var(--roam-ref-typescale-18);
  font-weight: var(--roam-ref-weight-normal);
  line-height: var(--roam-ref-leading-tight);
  text-align: center;
  margin: var(--roam-sys-flow-coupled) 0 0 0;
}
.roam-dash-reg-grade--exceptional { color: var(--roam-ref-palette-gold); }
.roam-dash-reg-grade--strong      { color: var(--roam-ref-palette-teal); }
.roam-dash-reg-grade--solid       { color: var(--roam-ref-palette-sage); }
.roam-dash-reg-grade--challenging { color: var(--roam-ref-palette-bronze); }
.roam-dash-reg-grade--poor        { color: var(--roam-ref-palette-forest-a50); }

.roam-dash-reg-dash-label {
  font-family: var(--roam-ref-typeface-body);
  font-size: var(--roam-ref-typescale-10);
  color: var(--roam-ref-palette-forest-a50);
  letter-spacing: var(--roam-ref-tracking-md);
  text-transform: uppercase;
  text-align: center;
  line-height: var(--roam-ref-leading-tight);
}
@media (max-width: 640px) {
  .roam-dash-reg-dash-label {
    display: none;
  }
}

/* ── Card 6 — Seasonality ── */
.roam-dash-season-bars {
  position: relative;
  display: flex;
  align-items: flex-end;
  gap: var(--roam-ref-spacing-4);
  height: 140px;
  margin: var(--roam-ref-spacing-16) 0 var(--roam-ref-spacing-8);
}
.roam-dash-season-median-line {
  position: absolute;
  left: 0;
  right: 0;
  border-top: 1.5px dashed var(--roam-ref-palette-sage);
  z-index: 1;
  pointer-events: none;
}
.roam-dash-season-median-label {
  position: absolute;
  right: 0;
  top: -18px;
  font-family: var(--roam-ref-typeface-body);
  font-size: var(--roam-ref-typescale-9);
  color: var(--roam-ref-palette-sage);
  letter-spacing: var(--roam-ref-tracking-md);
  text-transform: uppercase;
  background: var(--roam-ref-palette-white);
  padding: 0 var(--roam-ref-spacing-4);
}
.roam-dash-season-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  height: 100%;
  gap: var(--roam-ref-spacing-4);
}
.roam-dash-season-bar {
  width: 100%;
  max-width: var(--roam-ref-spacing-28);
  border-radius: var(--roam-ref-shape-xs) var(--roam-ref-shape-xs) 0 0;
  min-height: var(--roam-ref-spacing-4);
}
.roam-dash-season-bar--peak { background: var(--roam-ref-palette-gold); }
.roam-dash-season-bar--shoulder { background: var(--roam-ref-palette-teal); }
.roam-dash-season-bar--off { background: var(--roam-ref-palette-teal-a30); }
.roam-dash-season-label {
  font-family: var(--roam-ref-typeface-body);
  font-size: var(--roam-ref-typescale-9);
  color: var(--roam-ref-palette-forest-a50);
  letter-spacing: var(--roam-ref-tracking-md);
  text-transform: uppercase;
}

/* ── Card 7 — Revenue Trend ── */
.roam-dash-trend-toggle-wrap {
  display: flex;
  justify-content: flex-end;
  margin-bottom: var(--roam-sys-flow-coupled);
}
.roam-dash-trend-toggle {
  display: inline-flex;
  background: var(--roam-ref-palette-forest-a6);
  border-radius: var(--roam-ref-shape-full);
  padding: var(--roam-ref-spacing-3);
  gap: var(--roam-ref-spacing-3);
}
.roam-dash-trend-toggle-option {
  background: transparent;
  border: none;
  padding: var(--roam-ref-spacing-6) var(--roam-ref-spacing-16);
  font-family: var(--roam-ref-typeface-body);
  font-size: var(--roam-ref-typescale-12);
  font-weight: 600;
  letter-spacing: var(--roam-ref-tracking-md);
  text-transform: uppercase;
  color: var(--roam-ref-palette-forest-a50);
  border-radius: var(--roam-ref-shape-full);
  cursor: pointer;
  transition: opacity 0.2s ease;
}
.roam-dash-trend-toggle-option:hover,
.roam-dash-trend-toggle-option:focus-visible {
  color: var(--roam-ref-palette-forest);
  outline: none;
}
.roam-dash-trend-toggle-option--active {
  background: var(--roam-ref-palette-white);
  color: var(--roam-ref-palette-forest);
  box-shadow: 0 1px 2px var(--roam-ref-palette-forest-a12);
}
.roam-dash-trend-layout {
  display: grid;
  grid-template-columns: var(--roam-ref-spacing-48) 1fr;
  grid-template-rows: 200px auto;
  gap: var(--roam-ref-spacing-4);
  margin-bottom: var(--roam-ref-spacing-12);
  width: 100%;
}
.roam-dash-trend-y-axis {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 200px;
  font-family: var(--roam-ref-typeface-body);
  font-size: var(--roam-ref-typescale-10);
  color: var(--roam-ref-palette-forest-a50);
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.roam-dash-trend-chart {
  height: 200px;
  background: var(--roam-ref-palette-forest-a6);
  border-radius: var(--roam-ref-shape-sm);
  position: relative;
  overflow: hidden;
}
.roam-dash-trend-chart .roam-dash-skel-trend {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--roam-ref-spacing-8);
}
.roam-dash-trend-svg {
  display: block;
  width: 100%;
  height: 100%;
}
.roam-dash-trend-x-axis-spacer {
  grid-column: 1;
}
.roam-dash-trend-x-axis {
  grid-column: 2;
  display: flex;
  justify-content: space-between;
  font-family: var(--roam-ref-typeface-body);
  font-size: var(--roam-ref-typescale-10);
  color: var(--roam-ref-palette-forest-a50);
  letter-spacing: var(--roam-ref-tracking-md);
  font-variant-numeric: tabular-nums;
}

/* ── Card 8 — What ROAM Can Do (proof strip) ── */
.roam-dash-proof {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: var(--roam-sys-flow-separated);
  align-items: stretch;
  margin: var(--roam-ref-spacing-16) 0;
}
@media (max-width: 900px) {
  .roam-dash-proof {
    grid-template-columns: 1fr;
  }
}
.roam-dash-proof-lift {
  display: flex;
  flex-direction: column;
  gap: var(--roam-sys-flow-coupled);
}
.roam-dash-proof-lift-label {
  font-family: var(--roam-ref-typeface-body);
  font-size: var(--roam-ref-typescale-11);
  color: var(--roam-ref-palette-forest-a50);
  letter-spacing: var(--roam-ref-tracking-md);
  text-transform: uppercase;
  margin: 0 0 var(--roam-ref-spacing-4) 0;
}
.roam-dash-proof-row {
  display: grid;
  grid-template-columns: var(--roam-ref-spacing-80) 1fr var(--roam-ref-spacing-60);
  gap: var(--roam-ref-spacing-10);
  align-items: center;
}
.roam-dash-proof-row-label {
  font-family: var(--roam-ref-typeface-body);
  font-size: var(--roam-ref-typescale-12);
  color: var(--roam-ref-palette-forest);
}
.roam-dash-proof-row--roam .roam-dash-proof-row-label { font-weight: 600; color: var(--roam-ref-palette-teal); }
.roam-dash-proof-track {
  height: var(--roam-ref-spacing-16);
  background: var(--roam-ref-palette-forest-a6);
  border-radius: var(--roam-ref-shape-xs);
  overflow: hidden;
}
.roam-dash-proof-fill {
  height: 100%;
  background: var(--roam-ref-palette-sage);
  border-radius: var(--roam-ref-shape-xs);
}
.roam-dash-proof-fill--roam { background: var(--roam-ref-palette-teal); }
.roam-dash-proof-value {
  font-family: var(--roam-ref-typeface-display);
  font-size: var(--roam-ref-typescale-14);
  text-align: right;
  font-variant-numeric: tabular-nums;
  color: var(--roam-ref-palette-forest);
}
.roam-dash-proof-row--roam .roam-dash-proof-value { color: var(--roam-ref-palette-teal); font-weight: 600; }
.roam-dash-proof-delta {
  margin-top: var(--roam-sys-flow-coupled);
  padding: var(--roam-ref-spacing-12) var(--roam-ref-spacing-16);
  background: var(--roam-ref-palette-teal-a10);
  border-radius: var(--roam-ref-shape-sm);
  text-align: center;
}
.roam-dash-proof-delta-num {
  font-family: var(--roam-ref-typeface-display);
  font-size: var(--roam-ref-typescale-24);
  color: var(--roam-ref-palette-teal);
  line-height: 1;
}
.roam-dash-proof-delta-desc {
  font-family: var(--roam-ref-typeface-body);
  font-size: var(--roam-ref-typescale-11);
  color: var(--roam-ref-palette-forest-a50);
  margin-top: var(--roam-ref-spacing-4);
}
.roam-dash-proof-stats {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--roam-ref-spacing-20);
}
.roam-dash-proof-stat {
  text-align: center;
}
.roam-dash-proof-stat-num {
  font-family: var(--roam-ref-typeface-display);
  font-size: var(--roam-ref-typescale-32);
  color: var(--roam-ref-palette-gold);
  margin: 0;
  line-height: 1;
}
.roam-dash-proof-stat-desc {
  font-family: var(--roam-ref-typeface-body);
  font-size: var(--roam-ref-typescale-12);
  color: var(--roam-ref-palette-forest);
  margin: var(--roam-ref-spacing-6) 0 0 0;
  line-height: var(--roam-ref-leading-normal);
}
.roam-dash-proof-cta {
  background: var(--roam-ref-palette-teal);
  color: var(--roam-ref-palette-cream);
  padding: var(--roam-ref-spacing-20);
  border-radius: var(--roam-ref-shape-lg);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--roam-sys-flow-coupled);
  text-align: center;
}
.roam-dash-proof-cta-eyebrow {
  font-family: var(--roam-ref-typeface-body);
  font-size: var(--roam-ref-typescale-10);
  letter-spacing: var(--roam-ref-tracking-lg);
  text-transform: uppercase;
  color: var(--roam-ref-palette-cream-a80, var(--roam-ref-palette-cream));
  opacity: 0.9;
  margin: 0;
}
.roam-dash-proof-cta-headline {
  font-family: var(--roam-ref-typeface-display);
  font-size: var(--roam-ref-typescale-18);
  color: var(--roam-ref-palette-cream);
  margin: 0 0 var(--roam-ref-spacing-4) 0;
  line-height: var(--roam-ref-leading-tight);
}
.roam-dash-proof-cta-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--roam-sys-flow-coupled);
  background: var(--roam-ref-palette-gold);
  color: var(--roam-ref-palette-forest);
  padding: var(--roam-ref-spacing-12) var(--roam-ref-spacing-20);
  border-radius: var(--roam-ref-shape-full);
  text-decoration: none;
  font-family: var(--roam-ref-typeface-body);
  font-size: var(--roam-ref-typescale-12);
  font-weight: 600;
  letter-spacing: var(--roam-ref-tracking-lg);
  text-transform: uppercase;
  transition: transform 0.2s ease, opacity 0.2s ease;
}
.roam-dash-proof-cta-btn:hover,
.roam-dash-proof-cta-btn:focus-visible {
  transform: translateY(-1px);
  opacity: 0.95;
  outline: none;
}
.roam-dash-proof-cta-btn svg {
  width: var(--roam-ref-spacing-14);
  height: var(--roam-ref-spacing-14);
}
.roam-dash-proof-cta-subtext {
  font-family: var(--roam-ref-typeface-body);
  font-size: var(--roam-ref-typescale-10);
  color: var(--roam-ref-palette-cream);
  opacity: 0.75;
  margin: 0;
}

/* ── Chart legend (shared across cards) ── */
.roam-dash-chart-legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--roam-ref-spacing-12);
  justify-content: center;
  margin-top: var(--roam-ref-spacing-12);
  padding-top: var(--roam-ref-spacing-12);
  border-top: 1px solid var(--roam-ref-palette-forest-a6);
}

/* ── Skeleton shimmer (all NULL placeholders) ── */
.roam-dash-skel {
  background: linear-gradient(
    90deg,
    var(--roam-ref-palette-forest-a6) 0%,
    var(--roam-ref-palette-forest-a12) 50%,
    var(--roam-ref-palette-forest-a6) 100%
  );
  background-size: 200% 100%;
  animation: roam-dash-shimmer 1.6s ease-in-out infinite;
  border-radius: var(--roam-ref-shape-xs);
  display: block;
}
@keyframes roam-dash-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
.roam-dash-skel-bar-sm { height: var(--roam-ref-spacing-8); width: 100%; border-radius: var(--roam-ref-shape-full); }
.roam-dash-skel-bar-lg { height: var(--roam-ref-spacing-16); width: 100%; border-radius: var(--roam-ref-shape-xs); }
.roam-dash-skel-text-sm { height: var(--roam-ref-spacing-12); display: inline-block; border-radius: var(--roam-ref-shape-xs); vertical-align: middle; }
.roam-dash-skel-badge { width: var(--roam-ref-spacing-24); height: var(--roam-ref-spacing-16); border-radius: var(--roam-ref-shape-xs); }
.roam-dash-skel-circle-num { width: 60%; height: 60%; border-radius: var(--roam-ref-shape-full); }
.roam-dash-skel-pop-rings { width: 140px; height: 140px; border-radius: var(--roam-ref-shape-full); }
.roam-dash-skel-occ-fill { width: 100%; max-width: var(--roam-ref-spacing-48); height: 60%; min-height: var(--roam-ref-spacing-8); order: 2; border-radius: var(--roam-ref-shape-xs) var(--roam-ref-shape-xs) 0 0; }
.roam-dash-skel-season-bar { width: 100%; max-width: var(--roam-ref-spacing-28); height: 60%; border-radius: var(--roam-ref-shape-xs) var(--roam-ref-shape-xs) 0 0; }
.roam-dash-skel-trend {
  text-align: center;
  font-family: var(--roam-ref-typeface-body);
  font-size: var(--roam-ref-typescale-12);
  color: var(--roam-ref-palette-forest-a50);
  animation: none;
  background: none;
  padding: var(--roam-ref-spacing-16);
  max-width: 400px;
}

/* ── Revenue Advantage Calculator ── */
.roam-revenue-calculator {
  padding: var(--roam-sys-spacing-card);
  border-radius: var(--roam-ref-shape-xl);
  border: 1px solid var(--roam-ref-palette-forest-a12);
  background: var(--roam-ref-palette-white);
}

/* Already renting toggle */
.roam-calc-existing {
  margin-bottom: var(--roam-sys-flow-separated);
}
.roam-calc-toggle-row {
  display: flex;
  gap: var(--roam-sys-flow-coupled);
  margin-top: var(--roam-sys-flow-coupled);
}
.roam-calc-toggle {
  font-family: var(--roam-ref-typeface-body);
  font-size: var(--roam-ref-typescale-12);
  padding: var(--roam-ref-spacing-8) var(--roam-ref-spacing-16);
  border-radius: var(--roam-ref-shape-sm);
  border: 1px solid var(--roam-ref-palette-forest-a15);
  background: transparent;
  cursor: pointer;
  color: var(--roam-ref-palette-forest);
  transition: background-color 0.15s, border-color 0.15s;
}
.roam-calc-toggle[aria-pressed="true"] {
  background: var(--roam-ref-palette-forest);
  color: var(--roam-ref-palette-cream);
  border-color: var(--roam-ref-palette-forest);
}
.roam-calc-toggle:hover {
  border-color: var(--roam-ref-palette-teal);
}
.roam-calc-existing-input {
  margin-top: var(--roam-sys-flow-related);
}

/* Waterfall */
.roam-calc-waterfall {
  display: flex;
  flex-direction: column;
  gap: var(--roam-sys-flow-related);
}

.roam-calc-baseline {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--roam-ref-spacing-12) var(--roam-ref-spacing-16);
  border-radius: var(--roam-ref-shape-sm);
  background: var(--roam-ref-palette-forest-a6);
}
.roam-calc-baseline-label {
  font-family: var(--roam-ref-typeface-body);
  font-size: var(--roam-ref-typescale-12);
  color: var(--roam-ref-palette-forest-a50);
}
.roam-calc-baseline-value {
  font-family: var(--roam-ref-typeface-display);
  font-size: var(--roam-ref-typescale-18);
  color: var(--roam-ref-palette-forest);
}

/* Levers */
.roam-calc-levers {
  display: flex;
  flex-direction: column;
  gap: var(--roam-ref-spacing-8);
}
.roam-calc-lever {
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  align-items: center;
  gap: var(--roam-ref-spacing-12);
  padding: var(--roam-ref-spacing-10) var(--roam-ref-spacing-16);
  border-radius: var(--roam-ref-shape-sm);
  border: 1px solid var(--roam-ref-palette-forest-a8);
  cursor: pointer;
  transition: border-color 0.15s, background-color 0.15s;
}
.roam-calc-lever:hover {
  border-color: var(--roam-ref-palette-teal-a30);
  background: var(--roam-ref-palette-teal-a3);
}
.roam-calc-lever-check {
  accent-color: var(--roam-ref-palette-teal);
  width: var(--roam-ref-spacing-16);
  height: var(--roam-ref-spacing-16);
}
.roam-calc-lever-name {
  font-family: var(--roam-ref-typeface-body);
  font-size: var(--roam-ref-typescale-14);
  color: var(--roam-ref-palette-forest);
  font-weight: 500;
}
.roam-calc-lever-pct {
  font-family: var(--roam-ref-typeface-display);
  font-size: var(--roam-ref-typescale-14);
  color: var(--roam-ref-palette-teal);
  white-space: nowrap;
}
.roam-calc-lever-result {
  font-family: var(--roam-ref-typeface-body);
  font-size: var(--roam-ref-typescale-12);
  color: var(--roam-ref-palette-forest-a40);
  white-space: nowrap;
}
.roam-calc-lever-desc {
  grid-column: 2 / -1;
  font-family: var(--roam-ref-typeface-body);
  font-size: var(--roam-ref-typescale-10);
  color: var(--roam-ref-palette-forest-a40);
  display: block;
}

/* Mobile: stack lever layout */
@media (max-width: 767px) {
  .roam-calc-lever {
    grid-template-columns: auto 1fr auto;
  }
  .roam-calc-lever-result {
    grid-column: 2 / -1;
  }
  .roam-calc-lever-desc {
    grid-column: 2 / -1;
  }
}

/* Calculator group labels */
.roam-calc-group-label {
  font-family: var(--roam-ref-typeface-body);
  font-size: var(--roam-ref-typescale-10);
  letter-spacing: var(--roam-ref-tracking-lg);
  text-transform: uppercase;
  color: var(--roam-ref-palette-forest-a40);
  margin-top: var(--roam-sys-flow-related);
  margin-bottom: var(--roam-ref-spacing-4);
  padding-left: var(--roam-ref-spacing-16);
}
.roam-calc-group-label:first-of-type {
  margin-top: 0;
}

/* Lever group accent lines */
.roam-calc-lever-included { border-left: var(--roam-ref-spacing-3) solid var(--roam-ref-palette-teal); }
.roam-calc-lever-addons { border-left: var(--roam-ref-spacing-3) solid var(--roam-ref-palette-gold); }
.roam-calc-lever-amenity { border-left: var(--roam-ref-spacing-3) solid var(--roam-ref-palette-sage); }

/* Total */
.roam-calc-total {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--roam-ref-spacing-8);
  padding: var(--roam-ref-spacing-16);
  border-radius: var(--roam-ref-shape-sm);
  background: var(--roam-ref-palette-forest);
}
.roam-calc-total-label {
  font-family: var(--roam-ref-typeface-body);
  font-size: var(--roam-ref-typescale-12);
  color: var(--roam-ref-palette-cream);
  text-transform: uppercase;
  letter-spacing: var(--roam-ref-tracking-lg);
}
.roam-calc-total-value {
  font-family: var(--roam-ref-typeface-display);
  font-size: var(--roam-ref-typescale-28);
  color: var(--roam-ref-palette-gold);
  line-height: var(--roam-ref-leading-none);
}
.roam-calc-total-delta {
  font-family: var(--roam-ref-typeface-body);
  font-size: var(--roam-ref-typescale-14);
  color: var(--roam-ref-palette-teal);
}
.roam-calc-cta {
  margin-top: var(--roam-sys-flow-separated);
  display: block;
  text-align: center;
}

/* ═══════════════════════════════════════════════════════
 * Calculator v2.1.431 — bedroom pills, reference panel,
 * grade slider. Layered on top of the existing calc CSS.
 * ═══════════════════════════════════════════════════ */

/* Numbered step label (1. Bedroom count / 2. Property grade) */
.roam-calc-step {
  margin-bottom: var(--roam-ref-spacing-20);
}
.roam-calc-step-label {
  font-family: var(--roam-ref-typeface-body);
  font-size: var(--roam-ref-typescale-10);
  letter-spacing: var(--roam-ref-tracking-lg);
  text-transform: uppercase;
  color: var(--roam-ref-palette-forest-a50);
  margin: 0 0 var(--roam-ref-spacing-12) 0;
  font-weight: 600;
}

/* Bedroom pill row */
.roam-calc-bed-pills {
  display: flex;
  flex-wrap: wrap;
  gap: var(--roam-ref-spacing-8);
}
.roam-calc-bed-pill {
  background: var(--roam-ref-palette-white);
  border: 1.5px solid var(--roam-ref-palette-forest-a15);
  border-radius: var(--roam-ref-shape-full);
  padding: var(--roam-ref-spacing-10) var(--roam-ref-spacing-16);
  font-family: var(--roam-ref-typeface-body);
  font-size: var(--roam-ref-typescale-13);
  color: var(--roam-ref-palette-forest);
  cursor: pointer;
  transition: transform 0.2s ease, opacity 0.2s ease;
  min-width: var(--roam-ref-spacing-64);
  text-align: center;
}
.roam-calc-bed-pill:hover:not([disabled]),
.roam-calc-bed-pill:focus-visible:not([disabled]) {
  transform: translateY(-1px);
  border-color: var(--roam-ref-palette-teal);
  color: var(--roam-ref-palette-teal);
}
.roam-calc-bed-pill--active {
  background: var(--roam-ref-palette-teal);
  border-color: var(--roam-ref-palette-teal);
  color: var(--roam-ref-palette-white);
  font-weight: 600;
}
.roam-calc-bed-pill--active:hover {
  color: var(--roam-ref-palette-white);
}
.roam-calc-bed-pill-disabled,
.roam-calc-bed-pill[disabled] {
  opacity: 0.35;
  cursor: not-allowed;
}

/* Pre-bedroom prompt */
.roam-calc-prompt {
  padding: var(--roam-ref-spacing-20);
  background: var(--roam-ref-palette-forest-a6);
  border-radius: var(--roam-ref-shape-sm);
  text-align: center;
  margin-bottom: var(--roam-ref-spacing-16);
}
.roam-calc-prompt p {
  margin: 0;
  font-family: var(--roam-ref-typeface-body);
  font-size: var(--roam-ref-typescale-13);
  color: var(--roam-ref-palette-forest-a50);
}

/* Reference panel — reveals after bedroom picked */
.roam-calc-reference {
  margin-bottom: var(--roam-ref-spacing-20);
  padding: var(--roam-ref-spacing-20);
  background: var(--roam-ref-palette-forest-a6);
  border-radius: var(--roam-ref-shape-sm);
}
.roam-calc-reference-metrics {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--roam-ref-spacing-12);
  margin-bottom: var(--roam-ref-spacing-20);
}
.roam-calc-ref-metric {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--roam-ref-spacing-4);
}
.roam-calc-ref-metric-label {
  font-family: var(--roam-ref-typeface-body);
  font-size: var(--roam-ref-typescale-10);
  letter-spacing: var(--roam-ref-tracking-md);
  text-transform: uppercase;
  color: var(--roam-ref-palette-forest-a50);
}
.roam-calc-ref-metric-value {
  font-family: var(--roam-ref-typeface-display);
  font-size: var(--roam-ref-typescale-20);
  color: var(--roam-ref-palette-forest);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

/* Grade slider */
.roam-calc-step-grade {
  margin-top: var(--roam-ref-spacing-12);
  margin-bottom: 0;
}
.roam-calc-grade-slider {
  display: block;
  width: 100%;
  height: var(--roam-ref-spacing-28);
  background: transparent;
  -webkit-appearance: none;
  appearance: none;
  margin: 0;
  cursor: pointer;
}
.roam-calc-grade-slider:focus {
  outline: none;
}
.roam-calc-grade-slider:focus-visible {
  outline: 2px solid var(--roam-ref-palette-teal);
  outline-offset: var(--roam-ref-spacing-4);
  border-radius: var(--roam-ref-shape-full);
}
/* WebKit track */
.roam-calc-grade-slider::-webkit-slider-runnable-track {
  height: var(--roam-ref-spacing-6);
  background: linear-gradient(
    90deg,
    var(--roam-ref-palette-sage) 0%,
    var(--roam-ref-palette-teal) 50%,
    var(--roam-ref-palette-gold) 100%
  );
  border-radius: var(--roam-ref-shape-full);
}
.roam-calc-grade-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: var(--roam-ref-spacing-22);
  height: var(--roam-ref-spacing-22);
  border-radius: var(--roam-ref-shape-full);
  background: var(--roam-ref-palette-white);
  border: 2px solid var(--roam-ref-palette-forest);
  margin-top: -8px;
  cursor: pointer;
  transition: transform 0.15s ease;
}
.roam-calc-grade-slider::-webkit-slider-thumb:hover {
  transform: scale(1.1);
}
/* Firefox track */
.roam-calc-grade-slider::-moz-range-track {
  height: var(--roam-ref-spacing-6);
  background: linear-gradient(
    90deg,
    var(--roam-ref-palette-sage) 0%,
    var(--roam-ref-palette-teal) 50%,
    var(--roam-ref-palette-gold) 100%
  );
  border-radius: var(--roam-ref-shape-full);
  border: none;
}
.roam-calc-grade-slider::-moz-range-thumb {
  width: var(--roam-ref-spacing-22);
  height: var(--roam-ref-spacing-22);
  border-radius: var(--roam-ref-shape-full);
  background: var(--roam-ref-palette-white);
  border: 2px solid var(--roam-ref-palette-forest);
  cursor: pointer;
  transition: transform 0.15s ease;
}
.roam-calc-grade-slider::-moz-range-thumb:hover {
  transform: scale(1.1);
}
.roam-calc-grade-endpoints {
  display: flex;
  justify-content: space-between;
  margin-top: var(--roam-ref-spacing-8);
  font-family: var(--roam-ref-typeface-body);
  font-size: var(--roam-ref-typescale-11);
  letter-spacing: var(--roam-ref-tracking-md);
  text-transform: uppercase;
  color: var(--roam-ref-palette-forest-a50);
  font-weight: 600;
}

/* Mobile: stack reference metrics vertically if the 3-col grid crowds */
@media (max-width: 480px) {
  .roam-calc-reference-metrics {
    grid-template-columns: 1fr;
    gap: var(--roam-ref-spacing-8);
  }
  .roam-calc-ref-metric {
    flex-direction: row;
    justify-content: space-between;
  }
  .roam-calc-bed-pill {
    padding: var(--roam-ref-spacing-8) var(--roam-ref-spacing-12);
    font-size: var(--roam-ref-typescale-12);
    min-width: 52px;
  }
}

/* ── Regulation Card ── */
.roam-regulation-card {
  padding: var(--roam-sys-spacing-card);
  border-radius: var(--roam-ref-shape-xl);
  border: 1px solid var(--roam-comp-card-content-border);
  background: var(--roam-comp-card-content-bg);
  margin-bottom: var(--roam-sys-flow-related);
}
.roam-regulation-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
}
.roam-reg-row {
  display: flex;
  justify-content: space-between;
  padding: var(--roam-ref-spacing-8) 0;
  border-bottom: 1px solid var(--roam-ref-palette-forest-a6);
}
.roam-reg-row:last-child {
  border-bottom: none;
}
.roam-reg-row dt {
  font-family: var(--roam-ref-typeface-body);
  font-size: var(--roam-ref-typescale-12);
  color: var(--roam-ref-palette-forest-a50);
}
.roam-reg-row dd {
  font-family: var(--roam-ref-typeface-body);
  font-size: var(--roam-ref-typescale-14);
  color: var(--roam-ref-palette-forest);
  font-weight: 500;
  text-align: right;
}
.roam-reg-status-friendly { color: var(--roam-ref-palette-teal); }
.roam-reg-status-moderate { color: var(--roam-ref-palette-gold); }
.roam-reg-status-strict { color: var(--roam-ref-palette-error); }
.roam-reg-status-banned { color: var(--roam-ref-palette-error); }

.roam-market-reg-cta {
  margin-top: var(--roam-sys-flow-separated);
  padding: var(--roam-ref-spacing-16);
  border-radius: var(--roam-ref-shape-sm);
  background: var(--roam-ref-palette-teal-a5);
  text-align: center;
}
.roam-market-reg-cta p {
  font-family: var(--roam-ref-typeface-body);
  font-size: var(--roam-ref-typescale-14);
  color: var(--roam-ref-palette-forest);
  margin-bottom: var(--roam-sys-flow-coupled);
}

/* ── FAQ Accordion ── */
.roam-faq-list {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.roam-faq-item {
  border-bottom: 1px solid var(--roam-ref-palette-forest-a8);
}
.roam-faq-item:first-child {
  border-top: 1px solid var(--roam-ref-palette-forest-a8);
}
.roam-faq-question {
  font-family: var(--roam-ref-typeface-body);
  font-size: var(--roam-ref-typescale-16);
  color: var(--roam-ref-palette-forest);
  font-weight: 500;
  padding: var(--roam-ref-spacing-16) 0;
  cursor: pointer;
  list-style: none;
}
.roam-faq-question::-webkit-details-marker {
  display: none;
}
.roam-faq-question::after {
  content: "+";
  float: right;
  font-family: var(--roam-ref-typeface-body);
  font-size: var(--roam-ref-typescale-18);
  color: var(--roam-ref-palette-teal);
  transition: transform 0.15s;
}
.roam-faq-item[open] .roam-faq-question::after {
  content: "−";
}
.roam-faq-answer {
  padding-bottom: var(--roam-ref-spacing-16);
}
.roam-faq-answer p {
  font-family: var(--roam-ref-typeface-body);
  font-size: var(--roam-ref-typescale-14);
  color: var(--roam-ref-palette-forest-a50);
  line-height: var(--roam-ref-leading-relaxed);
}

/* ── Neighborhood Grid ── */
.roam-neighborhood-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--roam-ref-spacing-16);
}
@media (min-width: 768px) {
  .roam-neighborhood-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 1024px) {
  .roam-neighborhood-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}
.roam-neighborhood-card {
  padding: var(--roam-sys-spacing-card);
  border-radius: var(--roam-ref-shape-xl);
  border: 1px solid var(--roam-comp-card-content-border);
  background: var(--roam-comp-card-content-bg);
}
.roam-neighborhood-name {
  font-family: var(--roam-ref-typeface-display);
  font-size: var(--roam-ref-typescale-16);
  color: var(--roam-ref-palette-forest);
  margin-bottom: var(--roam-sys-flow-coupled);
}
.roam-neighborhood-desc {
  font-family: var(--roam-ref-typeface-body);
  font-size: var(--roam-ref-typescale-14);
  color: var(--roam-ref-palette-forest-a50);
  margin-bottom: var(--roam-sys-flow-coupled);
}

/* ── Bedroom Stats Grid ── */
.roam-bed-stats-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--roam-ref-spacing-12);
  margin-top: var(--roam-sys-flow-related);
}
@media (min-width: 768px) {
  .roam-bed-stats-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}
.roam-bed-stat-card {
  text-align: center;
  padding: var(--roam-sys-spacing-card-xs);
  border-radius: var(--roam-ref-shape-sm);
  border: 1px solid var(--roam-ref-palette-forest-a8);
}
.roam-bed-count {
  font-family: var(--roam-ref-typeface-body);
  font-size: var(--roam-ref-typescale-10);
  text-transform: uppercase;
  letter-spacing: var(--roam-ref-tracking-lg);
  color: var(--roam-ref-palette-forest-a40);
}
.roam-bed-revenue {
  font-family: var(--roam-ref-typeface-display);
  font-size: var(--roam-ref-typescale-18);
  color: var(--roam-ref-palette-teal);
}
.roam-bed-adr {
  font-family: var(--roam-ref-typeface-body);
  font-size: var(--roam-ref-typescale-10);
  color: var(--roam-ref-palette-forest-a40);
}

/* ── Testimonials ── */
.roam-testimonial-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--roam-ref-spacing-16);
}
@media (min-width: 768px) {
  .roam-testimonial-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 1024px) {
  .roam-testimonial-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}
.roam-testimonial-card {
  padding: var(--roam-sys-spacing-card);
  border-radius: var(--roam-ref-shape-xl);
  border: 1px solid var(--roam-ref-palette-forest-a12);
  background: var(--roam-ref-palette-white);
}
.roam-testimonial-quote {
  font-family: var(--roam-ref-typeface-body);
  font-size: var(--roam-ref-typescale-14);
  color: var(--roam-ref-palette-forest);
  line-height: var(--roam-ref-leading-relaxed);
  font-style: italic;
  margin-bottom: var(--roam-sys-flow-related);
}
.roam-testimonial-footer {
  display: flex;
  flex-direction: column;
  gap: var(--roam-ref-spacing-2);
}
.roam-testimonial-name {
  font-family: var(--roam-ref-typeface-body);
  font-size: var(--roam-ref-typescale-14);
  font-weight: 600;
  font-style: normal;
  color: var(--roam-ref-palette-forest);
}
.roam-testimonial-property,
.roam-testimonial-metric {
  font-family: var(--roam-ref-typeface-body);
  font-size: var(--roam-ref-typescale-12);
  color: var(--roam-ref-palette-forest-a40);
}
.roam-testimonial-metric {
  color: var(--roam-ref-palette-teal);
  font-weight: 500;
}

/* ── ROAM Advantage Grid ── */
.roam-advantage-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--roam-ref-spacing-16);
}
@media (min-width: 768px) {
  .roam-advantage-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
.roam-advantage-card {
  padding: var(--roam-sys-spacing-card);
  border-radius: var(--roam-ref-shape-xl);
  border: 1px solid var(--roam-comp-card-content-border);
  background: var(--roam-comp-card-content-bg);
}
.roam-advantage-card h3 {
  font-family: var(--roam-ref-typeface-display);
  font-size: var(--roam-ref-typescale-16);
  color: var(--roam-ref-palette-forest);
  margin-bottom: var(--roam-sys-flow-coupled);
}
.roam-advantage-card p {
  font-family: var(--roam-ref-typeface-body);
  font-size: var(--roam-ref-typescale-14);
  color: var(--roam-ref-palette-forest-a50);
  margin-bottom: var(--roam-sys-flow-coupled);
}
.roam-link-arrow {
  font-family: var(--roam-ref-typeface-body);
  font-size: var(--roam-ref-typescale-12);
  color: var(--roam-ref-palette-teal);
  text-decoration: none;
  letter-spacing: var(--roam-ref-tracking-lg);
  text-transform: uppercase;
}
.roam-link-arrow::after {
  content: " →";
}
.roam-link-arrow:hover {
  text-decoration: underline;
}
.roam-advantage-packages-link {
  text-align: center;
  margin-top: var(--roam-sys-flow-separated);
}

/* ── Children Grid (county/region child market cards) ── */
.roam-market-children-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--roam-ref-spacing-16);
}
@media (min-width: 768px) {
  .roam-market-children-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (min-width: 1024px) {
  .roam-market-children-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}
.roam-market-child-card {
  display: flex;
  flex-direction: column;
  gap: var(--roam-ref-spacing-4);
  padding: var(--roam-sys-spacing-card);
  border-radius: var(--roam-ref-shape-xl);
  border: 1px solid var(--roam-comp-card-content-border);
  background: var(--roam-comp-card-content-bg);
  text-decoration: none;
  transition: border-color 0.15s;
}
.roam-market-child-card:hover {
  border-color: var(--roam-ref-palette-teal-a30);
}
.roam-market-child-name {
  font-family: var(--roam-ref-typeface-display);
  font-size: var(--roam-ref-typescale-14);
  color: var(--roam-ref-palette-forest);
}
.roam-market-child-stat {
  font-family: var(--roam-ref-typeface-body);
  font-size: var(--roam-ref-typescale-10);
  color: var(--roam-ref-palette-forest-a40);
}

/* ── Final CTA ── */
.roam-market-final-cta {
  text-align: center;
  color: var(--roam-ref-palette-cream);
}
.roam-market-final-cta .roam-block-heading {
  color: var(--roam-ref-palette-cream);
}
.roam-market-final-cta .roam-body-lg {
  color: var(--roam-ref-palette-cream);
  opacity: 0.8;
  margin-top: var(--roam-sys-flow-coupled);
  margin-left: auto;
  margin-right: auto;
}
.roam-market-cta-buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--roam-ref-spacing-16);
  margin-top: var(--roam-sys-flow-separated);
}
.roam-market-cta-trust {
  font-family: var(--roam-ref-typeface-body);
  font-size: var(--roam-ref-typescale-12);
  color: var(--roam-ref-palette-cream);
  opacity: 0.5;
  margin-top: var(--roam-sys-flow-related);
}

/* ── Market CTA — homepage-patterned styling (v2.1.463+) ──
 * Inner <div> wrapper mirrors .roam-hp-cta > div at L3200 exactly:
 * constrains content to 768px, centers horizontally, provides the
 * text-align: center inheritance for all descendants. The gradient
 * divider's width: 100% (from hr.roam-gradient-divider at L2211)
 * naturally becomes 768px within this wrapper on desktop. */
.roam-market-final-cta > div {
  position: relative;
  z-index: 1;
  max-width: var(--roam-ref-layout-768);
  margin: 0 auto;
  text-align: center;
}

/* Inner wrapper flow default — replaces .roam-section > * + * which
 * no longer applies to these elements now that they live one level
 * deeper inside the wrapper <div>. Mirrors .roam-hp-cta > div > * + *. */
.roam-market-final-cta > div > * + * {
  margin-top: var(--roam-sys-flow-related);
}

/* Coupled override — badge-pill eyebrow → heading is a single visual unit
 * (8px, not 16px). Mirrors .roam-hp-cta .roam-badge-pill-inline +
 * .roam-cta-heading at L2812. */
.roam-market-final-cta .roam-badge-pill-inline + .roam-block-heading {
  margin-top: var(--roam-sys-flow-coupled);
}

/* Button group centered with 16px gap matching homepage CTA. Explicit
 * adjacency rules override the class-level .roam-market-final-cta
 * .roam-body-lg margin at L10085 (which was designed for the old
 * heading→body structure, before the gradient divider was added). */
.roam-market-final-cta .roam-btn-group {
  justify-content: center;
  gap: var(--roam-ref-spacing-16);
}
.roam-market-final-cta .roam-body-lg + .roam-btn-group {
  margin-top: var(--roam-sys-flow-separated);
}
.roam-market-final-cta .roam-gradient-divider + .roam-body-lg {
  margin-top: var(--roam-sys-flow-related);
}

/* ── Body Content (prose sections) ── */
.roam-body-content p {
  font-family: var(--roam-ref-typeface-body);
  font-size: var(--roam-ref-typescale-16);
  color: var(--roam-ref-palette-forest);
  line-height: var(--roam-ref-leading-relaxed);
}
.roam-body-content p + p {
  margin-top: var(--roam-sys-flow-related);
}

/* ── Market page flow (section spacing) ── */
.roam-market-page > .roam-section + .roam-section {
  /* Sections use their own padding; no extra margin needed */
}

/* ── Seasonality Chart placeholder ── */
.roam-market-season-chart {
  min-height: 200px;
  border-radius: var(--roam-ref-shape-sm);
  background: var(--roam-ref-palette-forest-a6);
  margin-bottom: var(--roam-sys-flow-related);
  padding: var(--roam-ref-spacing-16);
}

/* Seasonality bar chart (rendered by JS) */
.roam-season-bars {
  display: flex;
  align-items: flex-end;
  gap: var(--roam-ref-spacing-4);
  height: 160px;
}
.roam-season-bar-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100%;
  justify-content: flex-end;
  gap: var(--roam-ref-spacing-4);
}
.roam-season-bar {
  width: 100%;
  background: var(--roam-ref-palette-teal);
  border-radius: var(--roam-ref-spacing-2) var(--roam-ref-spacing-2) 0 0;
  min-height: var(--roam-ref-spacing-4);
  transition: height 0.3s;
}
.roam-season-label {
  font-family: var(--roam-ref-typeface-body);
  font-size: var(--roam-ref-typescale-9);
  color: var(--roam-ref-palette-forest-a50);
  text-transform: uppercase;
}
.roam-season-value {
  font-family: var(--roam-ref-typeface-body);
  font-size: var(--roam-ref-typescale-9);
  color: var(--roam-ref-palette-forest-a40);
  display: none;
}
.roam-season-bar-col:hover .roam-season-value {
  display: block;
}
.roam-season-bar-col:hover .roam-season-bar {
  background: var(--roam-ref-palette-gold);
}

/* ═══════════════════════════════════════════════════════
 * Rollup Dashboards (county + region tier pages)
 * v2.1.432 — hero score card + stat tiles + child grid
 * ═══════════════════════════════════════════════════ */

.roam-rollup-dash {
  display: grid;
  gap: var(--roam-sys-flow-related);
}

/* Hero card reuses .roam-dash-card-hero base styling; this just
   adjusts the context-specific copy typography. */
.roam-rollup-hero {
  margin-bottom: 0;
}
.roam-rollup-score-method {
  font-family: var(--roam-ref-typeface-body);
  font-size: var(--roam-ref-typescale-11);
  color: var(--roam-ref-palette-forest-a50);
  margin-top: var(--roam-ref-spacing-12);
  margin-bottom: 0;
  line-height: var(--roam-ref-leading-relaxed);
}

/* ── 4-tile stat grid under hero ── */
.roam-rollup-stat-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--roam-sys-flow-related);
}
.roam-rollup-stat-tile {
  background: var(--roam-ref-palette-white);
  border: 1px solid var(--roam-ref-palette-forest-a12);
  border-radius: var(--roam-ref-shape-xl);
  padding: var(--roam-ref-spacing-20);
  display: flex;
  flex-direction: column;
  gap: var(--roam-ref-spacing-4);
}
.roam-rollup-stat-label {
  font-family: var(--roam-ref-typeface-body);
  font-size: var(--roam-ref-typescale-10);
  letter-spacing: var(--roam-ref-tracking-md);
  text-transform: uppercase;
  color: var(--roam-ref-palette-forest-a50);
  font-weight: 600;
}
.roam-rollup-stat-value {
  font-family: var(--roam-ref-typeface-display);
  font-size: var(--roam-ref-typescale-28);
  color: var(--roam-ref-palette-forest);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.roam-rollup-stat-sub {
  font-family: var(--roam-ref-typeface-body);
  font-size: var(--roam-ref-typescale-11);
  color: var(--roam-ref-palette-forest-a40);
}

@media (max-width: 900px) {
  .roam-rollup-stat-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 480px) {
  .roam-rollup-stat-grid {
    grid-template-columns: 1fr;
  }
}

/* ═══════════════════════════════════════════════════════
 * Child grid — header + sort toggle
 * ═══════════════════════════════════════════════════ */

.roam-rollup-children-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--roam-sys-flow-related);
  margin-bottom: var(--roam-sys-flow-separated);
}
.roam-rollup-children-heading {
  margin: 0;
  flex: 1 1 auto;
}
.roam-rollup-sort {
  display: inline-flex;
  gap: var(--roam-ref-spacing-4);
  padding: var(--roam-ref-spacing-4);
  background: var(--roam-ref-palette-forest-a6);
  border-radius: var(--roam-ref-shape-full);
}
.roam-rollup-sort-btn {
  background: transparent;
  border: none;
  padding: var(--roam-ref-spacing-6) var(--roam-ref-spacing-14);
  border-radius: var(--roam-ref-shape-full);
  font-family: var(--roam-ref-typeface-body);
  font-size: var(--roam-ref-typescale-12);
  color: var(--roam-ref-palette-forest-a50);
  cursor: pointer;
  font-weight: 500;
  transition: opacity 0.2s ease;
}
.roam-rollup-sort-btn:hover,
.roam-rollup-sort-btn:focus-visible {
  color: var(--roam-ref-palette-forest);
}
.roam-rollup-sort-btn--active {
  background: var(--roam-ref-palette-white);
  color: var(--roam-ref-palette-forest);
  font-weight: 600;
  box-shadow: 0 1px 3px var(--roam-ref-palette-forest-a12);
}

/* ═══════════════════════════════════════════════════════
 * Child cards — 3/2/1 grid, score badge, stats, sparkline
 * ═══════════════════════════════════════════════════ */

.roam-rollup-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--roam-sys-flow-related);
}
@media (max-width: 900px) {
  .roam-rollup-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 600px) {
  .roam-rollup-grid {
    grid-template-columns: 1fr;
  }
}

.roam-rollup-child-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--roam-sys-flow-coupled);
  padding: var(--roam-ref-spacing-16);
  background: var(--roam-ref-palette-white);
  border: 1px solid var(--roam-ref-palette-forest-a12);
  border-radius: var(--roam-ref-shape-xl);
  text-decoration: none;
  color: inherit;
  transition: transform 0.2s ease, opacity 0.2s ease;
  min-height: 140px;
}
.roam-rollup-child-card:hover,
.roam-rollup-child-card:focus-visible {
  transform: translateY(-2px);
  border-color: var(--roam-ref-palette-teal-a30);
}

/* Score badge (top-right corner) — ghost pill style, 30% alpha per tier */
.roam-rollup-card-badge {
  position: absolute;
  top: var(--roam-ref-spacing-8);
  right: var(--roam-ref-spacing-8);
  width: var(--roam-ref-spacing-36);
  height: var(--roam-ref-spacing-36);
  border-radius: var(--roam-ref-shape-full);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--roam-ref-typeface-display);
  font-size: var(--roam-ref-typescale-14);
  border: 2px solid var(--roam-ref-palette-forest-a12);
  background: var(--roam-ref-palette-white);
  line-height: 1;
}
.roam-rollup-card-badge--exceptional { border-color: var(--roam-ref-palette-gold); background: var(--roam-ref-palette-gold-a30); color: var(--roam-ref-palette-gold); }
.roam-rollup-card-badge--strong { border-color: var(--roam-ref-palette-teal); background: var(--roam-ref-palette-teal-a30); color: var(--roam-ref-palette-teal); }
.roam-rollup-card-badge--solid { border-color: var(--roam-ref-palette-sage); background: var(--roam-ref-palette-sage-a30); color: var(--roam-ref-palette-sage); }
.roam-rollup-card-badge--challenging { border-color: var(--roam-ref-palette-bronze); background: var(--roam-ref-palette-forest-a6); color: var(--roam-ref-palette-bronze); }
.roam-rollup-card-badge--poor { border-color: var(--roam-ref-palette-forest-a50); background: var(--roam-ref-palette-forest-a8); color: var(--roam-ref-palette-forest-a50); }

.roam-rollup-card-name {
  font-family: var(--roam-ref-typeface-display);
  font-size: var(--roam-ref-typescale-24);
  color: var(--roam-ref-palette-forest);
  margin: 0;
  padding-right: var(--roam-ref-spacing-40);
  line-height: var(--roam-ref-leading-tight);
}
.roam-rollup-card-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--roam-sys-flow-coupled);
  margin: 0;
}
.roam-rollup-card-stat {
  display: flex;
  flex-direction: column;
  gap: var(--roam-ref-spacing-2);
}
.roam-rollup-card-stat dt {
  font-family: var(--roam-ref-typeface-body);
  font-size: var(--roam-ref-typescale-14);
  letter-spacing: var(--roam-ref-tracking-md);
  text-transform: uppercase;
  color: var(--roam-ref-palette-gold);
  font-weight: 600;
  margin: 0;
}
.roam-rollup-card-stat dd {
  font-family: var(--roam-ref-typeface-display);
  font-size: var(--roam-ref-typescale-14);
  color: var(--roam-ref-palette-forest);
  line-height: 1;
  margin: 0;
  font-variant-numeric: tabular-nums;
}
.roam-rollup-card-spark {
  width: 100%;
  height: var(--roam-ref-spacing-24);
  margin-top: auto;
  display: block;
}
.roam-rollup-card-empty {
  font-family: var(--roam-ref-typeface-body);
  font-size: var(--roam-ref-typescale-12);
  color: var(--roam-ref-palette-forest-a40);
  margin: 0;
  font-style: italic;
}

/* ═══════════════════════════════════════════════════════
 * Markets hub (archive-roam_market.php)
 * v2.1.435 — 3-tier index with filterable cities section
 * ═══════════════════════════════════════════════════ */

.roam-markets-hub-hero {
  padding: var(--roam-sys-flow-separated) var(--roam-ref-spacing-20);
  text-align: center;
}
.roam-markets-hub-hero-content {
  max-width: var(--roam-ref-layout-720);
  margin: 0 auto;
}
.roam-markets-hub-title {
  font-family: var(--roam-ref-typeface-display);
  font-size: var(--roam-ref-typescale-36);
  color: var(--roam-ref-palette-forest);
  margin: var(--roam-ref-spacing-8) 0 var(--roam-ref-spacing-16) 0;
  line-height: var(--roam-ref-leading-tight);
}
.roam-markets-hub-subtitle {
  font-family: var(--roam-ref-typeface-body);
  font-size: var(--roam-ref-typescale-14);
  color: var(--roam-ref-palette-forest-a50);
  margin: 0;
  line-height: var(--roam-ref-leading-relaxed);
}

.roam-markets-hub-section {
  margin-bottom: var(--roam-sys-flow-separated);
}
.roam-markets-hub-section-desc {
  font-family: var(--roam-ref-typeface-body);
  font-size: var(--roam-ref-typescale-20);
  color: var(--roam-ref-palette-forest-a50);
  margin: 0 0 var(--roam-ref-spacing-20) 0;
  max-width: var(--roam-ref-layout-720);
  line-height: var(--roam-ref-leading-relaxed);
}

/* Hub-scoped section headings (Regions / Counties / Cities & Townships) — 32px */
.roam-markets-hub-section .roam-section-heading {
  font-size: var(--roam-ref-typescale-32);
}

/* Filter bar for cities section */
.roam-markets-filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--roam-sys-flow-related);
  align-items: end;
  margin-bottom: var(--roam-ref-spacing-20);
  padding: var(--roam-ref-spacing-16);
  background: var(--roam-ref-palette-forest-a6);
  border-radius: var(--roam-ref-shape-sm);
}
.roam-markets-filter-label {
  display: flex;
  flex-direction: column;
  gap: var(--roam-ref-spacing-4);
  font-family: var(--roam-ref-typeface-body);
  font-size: var(--roam-ref-typescale-10);
  color: var(--roam-ref-palette-forest-a50);
  letter-spacing: var(--roam-ref-tracking-md);
  text-transform: uppercase;
  font-weight: 600;
  min-width: 180px;
  flex: 1 1 180px;
}
.roam-markets-filter-select {
  font-family: var(--roam-ref-typeface-body);
  font-size: var(--roam-ref-typescale-13);
  color: var(--roam-ref-palette-forest);
  background: var(--roam-ref-palette-white);
  border: 1px solid var(--roam-ref-palette-forest-a15);
  border-radius: var(--roam-ref-shape-xs);
  padding: var(--roam-ref-spacing-8) var(--roam-ref-spacing-12);
  letter-spacing: normal;
  text-transform: none;
  font-weight: 400;
  cursor: pointer;
  transition: opacity 0.2s ease;
}
.roam-markets-filter-select:focus-visible {
  outline: 2px solid var(--roam-ref-palette-teal);
  outline-offset: 2px;
}
.roam-markets-filter-clear {
  background: transparent;
  border: 1px solid var(--roam-ref-palette-forest-a15);
  border-radius: var(--roam-ref-shape-full);
  padding: var(--roam-ref-spacing-8) var(--roam-ref-spacing-16);
  font-family: var(--roam-ref-typeface-body);
  font-size: var(--roam-ref-typescale-12);
  color: var(--roam-ref-palette-forest-a50);
  cursor: pointer;
  transition: opacity 0.2s ease;
  align-self: end;
  height: 38px;
}
.roam-markets-filter-clear:hover,
.roam-markets-filter-clear:focus-visible {
  color: var(--roam-ref-palette-forest);
  border-color: var(--roam-ref-palette-teal-a30);
}

/* Show-all button for hidden overflow cards */
.roam-markets-cities-showall {
  margin-top: var(--roam-ref-spacing-20);
  display: block;
  margin-left: auto;
  margin-right: auto;
}

/* Hidden cards (beyond default limit or filtered out) */
.roam-rollup-child-card[hidden] {
  display: none;
}

/* ═══════════════════════════════════════════════════════
 * Market Hero v2.1.438 — tier-aware two-column layout
 *
 * Left col (roam-hero-main-col): loads full score card partial
 *   - City: template-parts/market-hero-cards.php (CARDS 0/1/2/4)
 *   - Rollup: template-parts/market-rollup-dashboard.php
 * Right col (roam-hero-form-col): Free Revenue Estimate form,
 *   spans the full hero height via align-self: stretch.
 * ═══════════════════════════════════════════════════ */

.roam-hero-lead {
  max-width: var(--roam-ref-layout-840);
  margin-top: var(--roam-sys-flow-coupled);
  margin-bottom: var(--roam-sys-flow-separated);
}

.roam-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(var(--roam-ref-layout-320), 2fr);
  gap: var(--roam-sys-flow-separated);
  align-items: start;
}

@media (max-width: 1024px) {
  .roam-hero-grid {
    grid-template-columns: 1fr;
  }
}

.roam-hero-main-col,
.roam-hero-form-col {
  min-width: 0;
}

/* v2.1.461 deploy trigger — added to wake up Atomic auto-deploy after 503 edge flap */

/* ═══════════════════════════════════════════════════════════════
   CAREERS — CPT roam_career (v2.1.493)
   Reuses existing tokens and component classes:
   - .roam-badge-pill-inline (gradient pill — meta text)
   - .roam-body-faint (department subheader under title)
   - .roam-btn-filled-gold (solid gold Apply button)
   - .roam-btn-text-link (Learn More link)
   - .roam-card-pill-three (application form card wrapper)

   Layout:
   - Mobile (<768px):       cards stacked 1-col, form below full-width
   - Tablet (≥768px):       3-col layout — cards 2-col in left area (1.5fr each),
                            form in right column (2fr, sticky)
   - Desktop (≥1024px):     same 3-col, sticky form
   ═══════════════════════════════════════════════════════════════ */

/* Root layout: cards column + form column */
.roam-careers-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--roam-ref-spacing-24);
  margin-bottom: 0;
}
@media (min-width: 768px) {
  .roam-careers-layout {
    grid-template-columns: 3fr 2fr;
    gap: var(--roam-ref-spacing-32);
    align-items: start;
  }
}

/* Cards column — internal 2-col grid on tablet+desktop (1.5fr each), 1-col on mobile */
.roam-grid-careers-inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--roam-ref-spacing-16);
}
@media (min-width: 768px) {
  .roam-grid-careers-inner {
    grid-template-columns: 1fr 1fr;
  }
}

/* Card flex column so the Apply/Learn More row sits at the bottom
   consistently across the row. */
.roam-grid-careers-inner .roam-job-card {
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* Actions row: primary Apply + secondary text-link "Learn More" */
.roam-job-card .roam-job-card-actions {
  margin-top: auto;
  padding-top: var(--roam-sys-flow-related);
  display: flex;
  flex-wrap: wrap;
  gap: var(--roam-ref-spacing-16);
  align-items: center;
}

/* Form column — sticky on tablet+desktop so form stays in view while cards scroll */
.roam-careers-form-col {
  min-width: 0;
}
@media (min-width: 768px) {
  .roam-careers-form-col {
    position: sticky;
    top: var(--roam-ref-spacing-24);
    align-self: start;
  }
}

/* Application form section spacing — tight on tablet/desktop since form is in its own column */
.roam-sec-careers-apply {
  margin-top: 0;
}
@media (max-width: 767px) {
  .roam-sec-careers-apply {
    margin-top: var(--roam-sys-flow-major, var(--roam-ref-spacing-48));
  }
}
.roam-sec-careers-apply .roam-form {
  display: flex;
  flex-direction: column;
  gap: var(--roam-ref-spacing-16);
}

/* Select dropdown matches .roam-form-input styling */
select.roam-form-input {
  appearance: none;
  -webkit-appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
                    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 20px) center, calc(100% - 14px) center;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: var(--roam-ref-spacing-40, 40px);
}

/* ═══════════════════════════════════════════════════════════════
   LAYOUT — SPLIT 1:1  (generic 2-col content/form pattern)
   Used on: /investment-fund (and future content-left/form-right pages).

   Mobile (<768px):  stacks 1-col
   Tablet+desktop:   side-by-side 1fr 1fr
   ═══════════════════════════════════════════════════════════════ */

.roam-layout-split-1-1 {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--roam-ref-spacing-32);
  margin-bottom: 0;
}
@media (min-width: 768px) {
  .roam-layout-split-1-1 {
    grid-template-columns: 1fr 1fr;
    align-items: start;
  }
}

/* Each split column: children stack with consistent rhythm */
.roam-layout-split-col {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--roam-ref-spacing-16);
}

/* ═══════════════════════════════════════════════════════════════
   CAREERS — Single job description content styling
   Normalizes weight on Gutenberg list items inside the description card
   and provides consistent spacing between h2/ul blocks.
   ═══════════════════════════════════════════════════════════════ */

.roam-career-content h2,
.roam-career-content .wp-block-heading {
  font-family: var(--roam-ref-typeface-display);
  font-size: var(--roam-ref-typescale-24);
  font-weight: var(--roam-ref-weight-normal, 400);
  color: var(--roam-ref-palette-dark-text-primary);
  margin: 0;
}
.roam-career-content h2 + ul,
.roam-career-content .wp-block-heading + .wp-block-list,
.roam-career-content .wp-block-heading + ul {
  margin-top: var(--roam-sys-flow-coupled);
}
.roam-career-content .wp-block-list,
.roam-career-content ul {
  list-style: disc;
  padding-left: var(--roam-ref-spacing-24);
  margin: 0;
}
.roam-career-content .wp-block-list li,
.roam-career-content ul li {
  font-family: var(--roam-ref-typeface-body);
  font-size: var(--roam-ref-typescale-16);
  font-weight: var(--roam-ref-weight-normal, 400);
  color: var(--roam-ref-palette-dark-text-body);
  line-height: var(--roam-ref-leading-body);
  margin: 0;
  padding: var(--roam-ref-spacing-4) 0;
}
/* Spacing between an <ul> and the next <h2> */
.roam-career-content ul + h2,
.roam-career-content .wp-block-list + .wp-block-heading {
  margin-top: var(--roam-sys-flow-separated);
}