/* ═══════════════════════════════════════════════════════════════
   RollForge Design System v3 — Premium PE Operations
   Editorial finance product feel. Carta / Ramp / Mercury tier.
   ═══════════════════════════════════════════════════════════════ */

/* Typography: Space Grotesk (display headlines + UI) + Geist Mono (financial data)
   Space Grotesk: clean geometric grotesk — authoritative without being generic
   Geist Mono: tabular-nums support built-in for financial figures */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&family=Geist+Mono:wght@400;500;600&display=block');
/* Fallback: JetBrains Mono for envs where Geist Mono unavailable */
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600&display=block');

/* ── CSS Variables ── */
:root {
    /* Typography — Space Grotesk for all display + UI text */
    --display: 'Space Grotesk', sans-serif;

    /* Backgrounds */
    --rf-bg: #faf9f7;
    --rf-bg-pure: #ffffff;
    --rf-bg-dashboard: #f5f6fa;  /* dashboard app shell — slightly cooler for data density */
    --rf-surface: #ffffff;
    --rf-surface-alt: #f3f2ef;
    --rf-surface-raised: #ffffff;

    /* Borders */
    --rf-border: rgba(0, 0, 0, 0.08);
    --rf-border-hover: rgba(0, 0, 0, 0.15);
    --rf-border-strong: rgba(0, 0, 0, 0.12);

    /* Text */
    --rf-text: #1a1a1a;
    --rf-text-secondary: #525252;
    --rf-text-muted: #8a8a8a;
    --rf-text-inverse: #ffffff;

    /* Accent — steel blue, brand primary */
    --rf-accent: #6D8196;
    --rf-accent-hover: #5A7A9B;
    --rf-accent-light: #7A92A6;
    --rf-accent-subtle: rgba(109, 129, 150, 0.07);
    --rf-accent-muted: rgba(109, 129, 150, 0.12);

    /* Electric blue — micro-accent for CTAs, step labels, active indicators */
    --rf-electric: #0088FF;
    --rf-electric-glow: rgba(0, 136, 255, 0.18);
    --rf-electric-subtle: rgba(0, 136, 255, 0.08);
    --rf-electric-border: rgba(0, 136, 255, 0.35);

    /* Status */
    --rf-green: #16A34A;
    --rf-yellow: #D97706;
    --rf-red: #DC2626;
    --rf-blue: #2563EB;
    --rf-green-subtle: rgba(22, 163, 74, 0.08);
    --rf-yellow-subtle: rgba(217, 119, 6, 0.08);
    --rf-red-subtle: rgba(220, 38, 38, 0.08);
    --rf-blue-subtle: rgba(37, 99, 235, 0.08);

    /* ── Legacy Variable Aliases ──
       Many pages still reference old variable names from pre-design-system era.
       These aliases map them to correct design-system values so ALL pages render
       consistently without needing to edit 90+ HTML files individually.
       DO NOT add new code using these — use --rf-* variables instead. */

    /* --forge-* pattern (used by ~16 pages incl. dashboard, pricing, index) */
    --forge-orange: #6D8196;
    --forge-dark: #ffffff;
    --forge-charcoal: #f8f9fb;
    --forge-steel: #f0f2f5;
    --forge-light: #1a1a1a;
    --forge-muted: #525252;
    --forge-accent: #6D8196;

    /* Short-name pattern (used by ~70 pages incl. webhooks, exports, docs) */
    --orange: #6D8196;
    --dark: #faf9f7;
    --charcoal: #f8f9fb;
    --steel: #f0f2f5;
    --light: #1a1a1a;
    --muted: #525252;
    --green: #22C55E;
    --yellow: #F59E0B;
    --red: #EF4444;
    --green-dim: rgba(34, 197, 94, 0.12);
    --yellow-dim: rgba(245, 158, 11, 0.12);
    --red-dim: rgba(239, 68, 68, 0.12);

    /* Spacing (8px grid) */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 24px;
    --space-6: 32px;
    --space-7: 40px;
    --space-8: 48px;
    --space-9: 64px;
    --space-10: 80px;

    /* ── Typography ──
       Display/UI: Space Grotesk (geometric grotesk — headlines, nav, buttons, labels)
       Mono: Geist Mono with tabular-nums (financial figures) */
    --font-display: 'Space Grotesk', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
    --font-body: 'Space Grotesk', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
    --font-mono: 'Geist Mono', 'JetBrains Mono', 'SF Mono', 'Fira Code', monospace;

    /* Legacy aliases (keep for compatibility — point to new stack) */
    --font: var(--font-body);
    --font-heading: var(--font-display);

    /* Type scale — proper line-height + tracking per size */
    --text-xs: 0.6875rem;     /* 11px — labels, pills */
    --text-sm: 0.8125rem;     /* 13px — secondary text, nav */
    --text-base: 0.875rem;    /* 14px — body copy, table cells */
    --text-md: 1rem;          /* 16px — prominent body, form inputs */
    --text-lg: 1.125rem;      /* 18px — card titles, section labels */
    --text-xl: 1.375rem;      /* 22px — section headings */
    --text-2xl: 1.75rem;      /* 28px — page headings */
    --text-3xl: 2.25rem;      /* 36px — hero sub-headings */
    --text-4xl: 3rem;         /* 48px — large hero headings */
    --text-5xl: 3.75rem;      /* 60px — display headlines */
    --text-6xl: 4.5rem;       /* 72px — oversized display */
    --text-7xl: 5.5rem;       /* 88px — editorial hero */

    /* Legacy size aliases */
    --font-size-xs: var(--text-xs);
    --font-size-sm: var(--text-sm);
    --font-size-base: var(--text-base);
    --font-size-md: var(--text-md);
    --font-size-lg: var(--text-lg);
    --font-size-xl: var(--text-xl);
    --font-size-2xl: var(--text-2xl);
    --font-size-3xl: var(--text-3xl);
    --font-size-4xl: var(--text-4xl);

    /* Line heights — per size range */
    --leading-tight: 0.95;     /* display headlines */
    --leading-snug: 1.1;       /* large headings */
    --leading-normal: 1.35;    /* h3-h4, compact labels */
    --leading-relaxed: 1.5;    /* body default */
    --leading-loose: 1.65;     /* long-form paragraphs */

    /* Letter spacing — tighter at larger sizes */
    --tracking-display: -0.04em;   /* hero headlines */
    --tracking-heading: -0.03em;   /* section headings */
    --tracking-subheading: -0.02em; /* h4, card titles */
    --tracking-body: -0.01em;      /* body text */
    --tracking-label: 0em;         /* labels, UI text */
    --tracking-caps: 0.06em;       /* uppercase labels */

    /* Radius — consistent 4-step scale */
    --radius-xs: 3px;
    --radius-sm: 4px;
    --radius: 6px;
    --radius-lg: 10px;
    --radius-xl: 14px;
    --radius-2xl: 20px;

    /* Shadows — multi-layer, Linear/Mercury style */
    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.04);
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04), 0 1px 4px rgba(0, 0, 0, 0.03);
    --shadow-md: 0 2px 4px rgba(0, 0, 0, 0.04), 0 4px 12px rgba(0, 0, 0, 0.06);
    --shadow-lg: 0 4px 8px rgba(0, 0, 0, 0.04), 0 8px 24px rgba(0, 0, 0, 0.08);
    --shadow-xl: 0 8px 16px rgba(0, 0, 0, 0.04), 0 16px 48px rgba(0, 0, 0, 0.10);
    --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.04), 0 0 0 1px rgba(0, 0, 0, 0.04);
    --shadow-card-hover: 0 2px 8px rgba(0, 0, 0, 0.06), 0 0 0 1px rgba(0, 0, 0, 0.06);
}

/* ── Base Reset ── */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

html {
    /* Optical text rendering */
    text-rendering: optimizeLegibility;
    -webkit-text-size-adjust: 100%;
}

body {
    font-family: var(--font-body) !important;
    background: var(--rf-bg);
    color: var(--rf-text);
    line-height: var(--leading-relaxed);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    /* Refined character variants for Geist */
    font-feature-settings: 'ss01' on, 'ss02' on, 'cv01' on, 'cv02' on;
    /* Disable Fraunces WONK axis globally — prevents squiggly/hand-drawn strokes.
       Inherits to all descendants; no-op on non-Fraunces fonts. */
    font-variation-settings: 'WONK' 0;
}

/* Logo — Space Grotesk, authoritative brand mark */
.logo {
    font-family: 'Space Grotesk', -apple-system, BlinkMacSystemFont, system-ui, sans-serif !important;
    font-size: 1.125rem !important;
    font-weight: 700 !important;
    color: var(--rf-text) !important;
    letter-spacing: -0.03em !important;
    text-decoration: none !important;
}
/* logo span color removed — single-color wordmark */

/* ── Typography — editorial financial product hierarchy ── */

/* Display headlines: Space Grotesk, tight tracking */
h1, h2 {
    font-family: var(--font-display);
    font-weight: 600;
    line-height: var(--leading-snug);
    letter-spacing: var(--tracking-heading);
    color: var(--rf-text);
}

/* Section headings: Space Grotesk */
h3 {
    font-family: var(--font-display);
    font-weight: 500;
    line-height: 1.25;
    letter-spacing: var(--tracking-subheading);
    color: var(--rf-text);
}

/* UI headings: Geist, bold, tight */
h4, h5, h6 {
    font-family: var(--font-body);
    font-weight: 700;
    line-height: var(--leading-normal);
    letter-spacing: var(--tracking-subheading);
    color: var(--rf-text);
}

h1 { font-size: var(--text-3xl); }
h2 { font-size: var(--text-2xl); }
h3 { font-size: var(--text-xl); }
h4 { font-size: var(--text-lg); }
h5 { font-size: var(--text-md); }
h6 { font-size: var(--text-base); }

a {
    color: var(--rf-accent);
    text-decoration: none;
    transition: color 0.15s ease;
}

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

p {
    color: var(--rf-text-secondary);
    line-height: var(--leading-loose);
    font-feature-settings: 'kern' on, 'liga' on;
}

code, pre, .mono {
    font-family: var(--font-mono);
    font-feature-settings: 'tnum' on, 'lnum' on; /* tabular, lining numerals */
}

/* ── Global tabular-nums for financial figures ──
   Every element showing money, percentages, or KPI numbers
   MUST render tabular numerals so columns align properly. */
.kpi-value, .stat-value, .metric-value,
[class*="kpi"][class*="value"],
[class*="stat"][class*="number"],
[class*="metric"][class*="value"],
[class*="amount"], [class*="balance"], [class*="revenue"],
[class*="profit"], [class*="margin"], [class*="growth"],
td.num, td.amount, td.value, td.metric,
.tabular, .money, .percentage, .financial-num {
    font-family: var(--font-mono);
    font-feature-settings: 'tnum' on, 'lnum' on, 'zero' on;
    font-variant-numeric: tabular-nums lining-nums;
    letter-spacing: 0;
}

/* ── Navigation ── */
.nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    padding: 0.875rem 2rem !important;
    display: flex;
    align-items: center;
    justify-content: space-between;
    z-index: 100;
    background: rgba(250, 249, 247, 0.95) !important;
    border-bottom: 1px solid var(--rf-border) !important;
    backdrop-filter: blur(4px) saturate(120%);
    -webkit-backdrop-filter: blur(4px) saturate(120%);
}

/* .logo is defined above with !important to override page-level inline styles */

.nav-links {
    display: flex;
    align-items: center;
    gap: 2rem;
}

.nav-links a {
    font-size: var(--font-size-sm);
    font-weight: 500;
    color: var(--rf-text-secondary);
    text-decoration: none;
    transition: color 0.15s ease;
}

.nav-links a:hover { color: var(--rf-text); }

.nav-links .nav-signin {
    color: var(--rf-text-secondary);
    border: 1px solid var(--rf-border);
    padding: 0.4rem 0.875rem;
    border-radius: var(--radius);
    transition: color 0.15s, border-color 0.15s;
}
.nav-links .nav-signin:hover {
    color: var(--rf-text);
    border-color: var(--rf-border-hover);
}

/* ── Buttons ── */
.btn-primary, .nav-cta {
    font-family: var(--font);
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--rf-text-inverse);
    background: var(--rf-accent);
    border: none;
    padding: 0.5rem 1.25rem;
    border-radius: var(--radius);
    cursor: pointer;
    transition: background 0.15s ease, transform 0.1s ease;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    letter-spacing: -0.01em;
}

.btn-primary:hover, .nav-cta:hover {
    background: var(--rf-accent-hover);
}

.btn-primary:active, .nav-cta:active {
    transform: scale(0.98);
}

.btn-secondary, .btn-ghost {
    font-family: var(--font);
    font-size: var(--font-size-sm);
    font-weight: 500;
    color: var(--rf-text-secondary);
    background: transparent;
    border: 1px solid var(--rf-border);
    padding: 0.5rem 1.25rem;
    border-radius: var(--radius);
    cursor: pointer;
    transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.btn-secondary:hover, .btn-ghost:hover {
    color: var(--rf-text);
    border-color: var(--rf-border-hover);
    background: rgba(0, 0, 0, 0.02);
}

/* ── Cards ── */
.card {
    background: var(--rf-surface);
    border: 1px solid var(--rf-border);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    box-shadow: var(--shadow-card);
    transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

.card:hover {
    box-shadow: var(--shadow-card-hover);
    border-color: var(--rf-border-hover);
}

/* ── KPI Cards (canonical — shared by dashboard.html + dashboard/portfolio.html) ── */
.rf-kpi-card {
    background: var(--rf-surface);
    border: 1px solid var(--rf-border);
    border-radius: var(--radius);
    padding: 16px 16px 14px;
    box-shadow: var(--shadow-card);
    position: relative;
    overflow: hidden;
    transition: border-color 0.2s, box-shadow 0.2s;
    /* accent color via inline border-top */
}
.rf-kpi-card:hover {
    border-color: var(--rf-border-hover);
    box-shadow: var(--shadow-card-hover);
}
/* bottom-gradient reveal on hover */
.rf-kpi-card::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--rf-accent), var(--rf-accent-blue));
    opacity: 0;
    transition: opacity 0.2s;
}
.rf-kpi-card:hover::after { opacity: 1; }

.rf-kpi-card.highlight {
    background: var(--rf-surface-alt);
    border-color: rgba(109, 129, 150, 0.3);
}

/* KPI label */
.kpi-label {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--rf-text-dim);
    margin-bottom: 8px;
    display: block;
    line-height: 1;
}
/* KPI value — large mono number */
.kpi-value {
    font-size: 22px;
    font-weight: 800;
    line-height: 1;
    color: var(--rf-text);
    font-family: var(--font-mono);
    letter-spacing: -0.02em;
    margin-bottom: 6px;
    font-variant-numeric: tabular-nums;
}
/* KPI sub-label / delta */
.kpi-sub, .kpi-delta {
    font-size: 11px;
    font-weight: 500;
    color: var(--rf-text-muted);
    display: flex;
    align-items: center;
    gap: 3px;
}
.kpi-delta.pos { color: #16a34a; }
.kpi-delta.neg { color: #dc2626; }
.kpi-delta.neutral { color: var(--rf-text-dim); }

/* ── Forms ── */
input, select, textarea {
    width: 100%;
    padding: 0.625rem 0.875rem;
    background: var(--rf-bg-pure);
    border: 1px solid var(--rf-border);
    border-radius: var(--radius);
    color: var(--rf-text);
    font-family: var(--font);
    font-size: var(--font-size-base);
    outline: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

input:focus, select:focus, textarea:focus {
    border-color: var(--rf-accent);
    box-shadow: 0 0 0 3px var(--rf-accent-subtle);
}

input::placeholder, textarea::placeholder {
    color: var(--rf-text-muted);
}

label {
    display: block;
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--rf-text-secondary);
    margin-bottom: 0.375rem;
    letter-spacing: -0.01em;
}

/* ── Tables ── */
table {
    width: 100%;
    border-collapse: collapse;
}

thead th {
    padding: 0.75rem 1rem;
    font-family: var(--font);
    font-size: var(--font-size-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--rf-text-muted);
    text-align: left;
    border-bottom: 1px solid var(--rf-border-strong);
}

tbody td {
    padding: 0.875rem 1rem;
    font-size: var(--font-size-base);
    border-bottom: 1px solid var(--rf-border);
    vertical-align: middle;
    color: var(--rf-text);
}

tbody tr:last-child td { border-bottom: none; }

tbody tr {
    transition: background 0.12s ease;
}

tbody tr:hover {
    background: rgba(0, 0, 0, 0.015);
}

/* ── Status Pills ── */
.status-pill {
    font-size: var(--font-size-xs);
    font-weight: 600;
    padding: 0.2rem 0.6rem;
    border-radius: var(--radius-sm);
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    letter-spacing: 0.01em;
}

.status-pill.green { background: var(--rf-green-subtle); color: var(--rf-green); }
.status-pill.yellow { background: var(--rf-yellow-subtle); color: var(--rf-yellow); }
.status-pill.red { background: var(--rf-red-subtle); color: var(--rf-red); }

/* ── Section spacing ── */
.section {
    padding: var(--space-10) 2rem;
}

/* ── Footer ── */
.footer {
    padding: 2rem;
    border-top: 1px solid var(--rf-border);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.footer a,
footer a {
    color: var(--rf-text-secondary);
    text-decoration: none;
    transition: color 0.15s ease;
}

.footer a:hover,
footer a:hover {
    color: var(--rf-text);
}

.footer a:visited,
footer a:visited {
    color: var(--rf-text-secondary);
}

.footer-links {
    display: flex;
    gap: 1.25rem;
    font-size: var(--font-size-sm);
    flex-wrap: wrap;
}

.footer-links a {
    color: var(--rf-text-secondary);
    text-decoration: none;
    transition: color 0.15s ease;
}

.footer-links a:hover {
    color: var(--rf-text);
}

.footer-links a:visited {
    color: var(--rf-text-secondary);
}

.footer-text {
    font-size: var(--font-size-xs);
    color: var(--rf-text-muted);
}

.footer-logo {
    font-family: 'Space Grotesk', -apple-system, BlinkMacSystemFont, system-ui, sans-serif !important;
    font-size: 1rem;
    font-weight: 700;
    color: inherit;
    letter-spacing: -0.03em;
}
/* logo span color removed — single-color wordmark */

/* ── Utility ── */
.text-accent { color: var(--rf-accent); }
.text-muted { color: var(--rf-text-secondary); }
.text-dim { color: var(--rf-text-muted); }
.text-mono { font-family: var(--font-mono); }

/* ── App / Dashboard heading override ──
   Dashboard pages use sans-serif headings (data-dense context).
   Any .page-header h1/h2 gets Plus Jakarta Sans, not Instrument Serif. */
.page-header h1, .page-header h2 {
    font-family: var(--font) !important;
}

/* ── KPI Number Styling ──
   Geist Mono + tabular-nums = financial figures that actually align.
   -0.02em tracking because mono is slightly wider than body. */
.kpi-value, .stat-value, [class*="kpi"] [class*="value"],
[class*="stat"] [class*="number"], [class*="metric"] [class*="value"] {
    font-family: var(--font-mono);
    font-weight: 600;
    letter-spacing: -0.02em;
    font-feature-settings: 'tnum' on, 'lnum' on, 'zero' on;
    font-variant-numeric: tabular-nums lining-nums;
}

/* ── Hamburger Button ── */
.nav-hamburger {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 7px;
    border-radius: var(--radius-sm);
    transition: background 0.15s ease;
    flex-shrink: 0;
    margin-left: 0.5rem;
}
.nav-hamburger:hover { background: rgba(0,0,0,0.04); }
.nav-hamburger span {
    display: block;
    width: 22px;
    height: 2px;
    background: var(--rf-text-secondary);
    border-radius: 2px;
    transition: transform 0.22s ease, opacity 0.15s ease;
    transform-origin: center;
}
body.nav-open .nav-hamburger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
body.nav-open .nav-hamburger span:nth-child(2) { opacity: 0; transform: scaleX(0); }
body.nav-open .nav-hamburger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ── Mobile Nav Overlay ── */
.nav-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.3);
    z-index: 998;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    animation: navOverlayIn 0.2s ease;
}
@keyframes navOverlayIn { from { opacity: 0; } to { opacity: 1; } }
body.nav-open .nav-overlay { display: block; }

/* ── Mobile Nav Drawer ── */
.nav-drawer {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(300px, 88vw);
    background: var(--rf-bg-pure);
    border-left: 1px solid var(--rf-border);
    z-index: 999;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    transform: translateX(100%);
    transition: transform 0.27s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: -8px 0 40px rgba(0,0,0,0.12);
}
body.nav-open .nav-drawer { transform: translateX(0); }

.nav-drawer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.2rem 1.5rem;
    border-bottom: 1px solid var(--rf-border);
    flex-shrink: 0;
}
.nav-drawer-close {
    background: none;
    border: none;
    color: var(--rf-text-secondary);
    font-size: 1.1rem;
    cursor: pointer;
    padding: 0.25rem 0.4rem;
    border-radius: var(--radius-sm);
    transition: color 0.15s, background 0.15s;
    line-height: 1;
}
.nav-drawer-close:hover { color: var(--rf-text); background: rgba(0,0,0,0.04); }

.nav-drawer-links {
    display: flex !important;
    flex-direction: column;
    padding: 0.75rem 0 1.5rem;
}
.nav-drawer-links a {
    display: flex !important;
    align-items: center;
    padding: 0.8rem 1.5rem !important;
    font-size: 0.9375rem !important;
    color: var(--rf-text-secondary) !important;
    text-decoration: none;
    transition: color 0.15s, background 0.15s;
    border-radius: 0;
    font-weight: 400 !important;
}
.nav-drawer-links a:hover {
    color: var(--rf-text) !important;
    background: rgba(0,0,0,0.03);
}
.nav-drawer-links .nav-cta,
.nav-drawer-links [class*="nav-cta"] {
    margin: 0.5rem 1.25rem !important;
    padding: 0.75rem 1.25rem !important;
    background: var(--rf-accent) !important;
    color: var(--rf-text-inverse) !important;
    border-radius: var(--radius) !important;
    text-align: center;
    font-weight: 600 !important;
    justify-content: center;
    border: none !important;
}
.nav-drawer-links .nav-cta:hover,
.nav-drawer-links [class*="nav-cta"]:hover {
    background: var(--rf-accent-hover) !important;
}

/* ── Scrollbar Styling ── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(0, 0, 0, 0.12); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: rgba(0, 0, 0, 0.2); }

/* ── Selection ── */
::selection {
    background: var(--rf-accent-muted);
    color: var(--rf-text);
}

/* ── Mobile ── */
@media (max-width: 768px) {
    .nav { padding: 0.875rem 1.25rem !important; }
    .section { padding: var(--space-9) 1rem; }
    .nav-links a:not(.nav-cta) { display: none; }
    .nav-hamburger { display: flex !important; }
    .nav-links .nav-cta { display: none; }
    .nav-links .nav-signin { display: none; }
}

/* ═══════════════════════════════════════════════════════════════
   §21 — Settings / Billing / Account / Onboarding page system
   Shared component rules for operator-facing surfaces.
   ═══════════════════════════════════════════════════════════════ */

/* ── §21.1 Inner cards (settings sections, billing cards) ── */
.rf-card {
    background: var(--rf-surface-alt);
    border: 1px solid var(--rf-border);
    border-radius: var(--radius-xl); /* 14px — matches dashboard pattern */
    overflow: hidden;
    margin-bottom: 1.5rem;
}
.rf-card-head {
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid var(--rf-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.rf-card-title {
    font-family: var(--font);
    font-weight: 700;
    font-size: 0.9375rem;
    color: var(--rf-text);
    letter-spacing: -0.01em;
}
.rf-card-sub {
    font-size: 0.8125rem;
    color: var(--rf-text-secondary);
    margin-top: 0.2rem;
}
.rf-card-body {
    padding: 1.5rem;
}

/* ── §21.2 Form fields — 16px font-size prevents iOS zoom ── */
.rf-input, .rf-select, .rf-textarea {
    width: 100%;
    padding: 0.625rem 0.875rem;
    background: var(--rf-bg-pure);
    border: 1px solid var(--rf-border);
    border-radius: var(--radius);
    color: var(--rf-text);
    font-family: var(--font);
    font-size: 1rem; /* 16px — critical: prevents iOS zoom on focus */
    outline: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.rf-input:focus, .rf-select:focus, .rf-textarea:focus {
    border-color: var(--rf-accent);
    box-shadow: 0 0 0 3px var(--rf-accent-subtle);
}
.rf-label {
    display: block;
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--rf-text-secondary);
    margin-bottom: 0.375rem;
    letter-spacing: -0.01em;
}
.rf-form-row {
    margin-bottom: 1rem;
}
.rf-helper {
    font-size: var(--font-size-xs);
    color: var(--rf-text-muted);
    margin-top: 0.3rem;
    line-height: 1.5;
}

/* ── §21.3 Toast — above bottom nav on mobile ── */
.rf-toast {
    position: fixed;
    bottom: 1.5rem;
    right: 1.5rem;
    background: var(--rf-green);
    color: #fff;
    padding: 0.75rem 1.25rem;
    border-radius: var(--radius-lg);
    font-weight: 600;
    font-size: 0.875rem;
    font-family: var(--font);
    opacity: 0;
    transition: opacity 0.2s, transform 0.2s;
    pointer-events: none;
    z-index: 500;
    transform: translateY(6px);
    box-shadow: var(--shadow-lg);
    max-width: calc(100vw - 3rem);
}
.rf-toast.show {
    opacity: 1;
    transform: translateY(0);
}
.rf-toast.error {
    background: var(--rf-red);
}
@media (max-width: 768px) {
    /* Lift above the 68px glassmorphic bottom nav */
    .rf-toast {
        bottom: calc(68px + 1rem);
        right: 1rem;
        left: 1rem;
        max-width: none;
        text-align: center;
    }
}

/* ── §21.4 Modal / bottom-sheet ── */
.rf-modal-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    z-index: 300;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}
.rf-modal-overlay.open {
    display: flex;
}
.rf-modal {
    background: var(--rf-surface);
    border: 1px solid var(--rf-border);
    border-radius: var(--radius-xl); /* 14px */
    padding: 2rem;
    max-width: 460px;
    width: 90%;
    box-shadow: var(--shadow-lg);
}
.rf-modal h3 {
    font-family: var(--font);
    font-size: 1.0625rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
    color: var(--rf-text);
}
.rf-modal-sub {
    font-size: 0.875rem;
    color: var(--rf-text-secondary);
    margin-bottom: 1.5rem;
    line-height: 1.6;
}
.rf-modal-actions {
    display: flex;
    gap: 0.75rem;
    margin-top: 1.5rem;
    justify-content: flex-end;
}
/* Bottom-sheet on mobile */
@media (max-width: 600px) {
    .rf-modal-overlay {
        align-items: flex-end;
    }
    .rf-modal {
        width: 100%;
        max-width: 100%;
        border-radius: var(--radius-xl) var(--radius-xl) 0 0;
        padding: 1.5rem 1.25rem calc(1.5rem + env(safe-area-inset-bottom));
        margin: 0;
    }
}

/* ── §21.5 Danger zone ── */
.rf-danger-section {
    margin-top: 2.5rem;
}
.rf-danger-label {
    font-size: var(--font-size-xs);
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--rf-red);
    margin-bottom: 1rem;
}
.rf-danger-card {
    background: var(--rf-surface-alt);
    border: 1px solid rgba(220, 38, 38, 0.15);
    border-radius: var(--radius-xl);
    padding: 1.5rem;
}

/* ── §21.6 Save-bar (sticky footer for long forms) ── */
.rf-save-bar {
    position: sticky;
    bottom: 0;
    background: rgba(250, 249, 247, 0.95);
    border-top: 1px solid var(--rf-border);
    padding: 0.875rem 1.5rem;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.75rem;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    z-index: 10;
}
@media (max-width: 768px) {
    /* Clear bottom nav */
    .rf-save-bar {
        padding-bottom: calc(0.875rem + env(safe-area-inset-bottom));
    }
}

/* ── §21.7 Page header ── */
.rf-page-header {
    margin-bottom: 2rem;
    padding-top: 1.5rem;
}
.rf-page-header h1 {
    font-family: var(--font) !important;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--rf-text);
    margin-bottom: 0.25rem;
    letter-spacing: -0.02em;
}
.rf-page-header p {
    color: var(--rf-text-secondary);
    font-size: 0.9rem;
    margin: 0;
}

/* ── §21.8 Touch targets ── */
@media (max-width: 768px) {
    /* 44px min touch target on mobile */
    .rf-btn-touch {
        min-height: 44px;
        min-width: 44px;
    }
    /* 16px form inputs — critical for iOS no-zoom */
    input:not([type=checkbox]):not([type=radio]):not([type=range]),
    select,
    textarea {
        font-size: 1rem !important; /* 16px — prevents iOS keyboard zoom */
    }
}

/* ── §21.9 Onboarding wizard ── */
.rf-wizard-card {
    background: var(--rf-surface);
    border: 1px solid var(--rf-border);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-md);
    width: 100%;
    max-width: 640px;
    padding: 2.5rem 2.75rem;
}
@media (max-width: 375px) {
    /* iPhone SE — single column, smaller padding */
    .rf-wizard-card {
        padding: 1.5rem 1rem;
    }
}

/* ═══════════════════════════════════════════════════════════════
   §22 — Premium Display Typography
   Editorial headline system for marketing / demo surfaces.
   Reference bar: Carta, Ramp, Mercury, Pilot, Linear.
   ═══════════════════════════════════════════════════════════════ */

/* Hero headline: Space Grotesk, very tight */
.display-headline {
    font-family: var(--font-display);
    font-weight: 700;
    letter-spacing: var(--tracking-display);
    line-height: var(--leading-tight);
    color: var(--rf-text);
    font-feature-settings: 'kern' on, 'liga' on, 'dlig' on;
}

/* Large display — hero h1 equivalent */
.display-xl {
    font-size: clamp(2.5rem, 6vw, var(--text-6xl));
    font-family: var(--font-display);
    font-weight: 700;
    letter-spacing: -0.04em;
    line-height: 0.97;
    color: var(--rf-text);
}

/* Medium display — section intro h2 */
.display-lg {
    font-size: clamp(1.875rem, 4vw, var(--text-4xl));
    font-family: var(--font-display);
    font-weight: 600;
    letter-spacing: -0.03em;
    line-height: 1.05;
    color: var(--rf-text);
}

/* Section label / eyebrow — uppercase spaced Geist */
.eyebrow {
    font-family: var(--font-body);
    font-size: var(--text-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: var(--tracking-caps);
    color: var(--rf-accent);
}

/* Marketing body copy — slightly larger, more line-height */
.body-marketing {
    font-family: var(--font-body);
    font-size: var(--text-md);
    line-height: var(--leading-loose);
    color: var(--rf-text-secondary);
    font-feature-settings: 'kern' on, 'liga' on;
}

/* Financial figure display — large KPI in reports / demo */
.financial-display {
    font-family: var(--font-mono);
    font-feature-settings: 'tnum' on, 'lnum' on, 'zero' on;
    font-variant-numeric: tabular-nums lining-nums;
    letter-spacing: -0.03em;
    font-weight: 700;
}

/* Report body — clean prose for shareable reports */
.report-body {
    font-family: var(--font-body);
    font-size: 0.9375rem;
    line-height: var(--leading-loose);
    color: var(--rf-text);
    font-feature-settings: 'kern' on, 'liga' on;
}

/* ── §22.1 Demo page specific — highest operator visibility ── */

/* Demo headline: Space Grotesk */
.demo-hero-title {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(1.75rem, 3.5vw, 2.75rem);
    letter-spacing: -0.035em;
    line-height: 1.05;
}

/* Demo KPI cards: mono numbers that actually align */
.demo-kpi-value,
.kpi-card .value,
.kpi-card .kpi-number,
.insight-number,
.report-kpi-value {
    font-family: var(--font-mono) !important;
    font-feature-settings: 'tnum' on, 'lnum' on, 'zero' on !important;
    font-variant-numeric: tabular-nums lining-nums !important;
    letter-spacing: -0.02em !important;
}

/* ── §22.2 Share Report page ── */
.share-report-title {
    font-family: var(--font-display);
    font-weight: 600;
    letter-spacing: -0.03em;
    line-height: 1.1;
}

/* ═══════════════════════════════════════════════════════════════
   §23 — Mobile Responsive Audit Fixes (320–768px)
   All authenticated dashboard pages.
   Fixes: horizontal table overflow, sidebar collapse, chart scale,
   form stacking, modal bottom-sheet, export button accessibility.
   ═══════════════════════════════════════════════════════════════ */

/* ── §23.1 Core page wrappers: kill horizontal overflow ── */
@media (max-width: 600px) {
    .page, .rf-page, .pf-page, .settings-layout,
    [class*="page"][class*="wrapper"], [class*="container"] {
        overflow-x: hidden;
        padding-left: 12px !important;
        padding-right: 12px !important;
    }
    .page-header, .pf-header {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 8px !important;
    }
}

/* ── §23.2 Tables — horizontal scroll container ── */
@media (max-width: 768px) {
    .table-scroll-wrap {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        border-radius: 8px;
        margin-bottom: 16px;
    }
    .table-scroll-wrap::-webkit-scrollbar { height: 4px; }
    .table-scroll-wrap::-webkit-scrollbar-thumb {
        background: rgba(0,0,0,0.15);
        border-radius: 2px;
    }
    .table-scroll-wrap table {
        width: max-content;
        min-width: 100%;
    }

    /* Grids: single column on mobile */
    .cards-grid, .kpi-strip, .goals-grid, .drip-grid,
    [class*="grid"][class*="auto-fill"] {
        grid-template-columns: 1fr !important;
    }

    /* AR / dispatch tables: hide low-priority columns on mobile */
    table.ar-table thead th:nth-child(n+4),
    table.ar-table td:nth-child(n+4),
    table.risk-table thead th:nth-child(n+4),
    table.risk-table td:nth-child(n+4) {
        display: none;
    }
}

/* ── §23.3 Chat page — sidebar collapse on mobile ── */
@media (max-width: 600px) {
    .app-body {
        flex-direction: column !important;
    }
    .sidebar {
        position: fixed !important;
        left: 0; top: 0; bottom: 0;
        width: var(--sidebar-w, 280px) !important;
        z-index: 1000;
        transform: translateX(-100%);
        transition: transform 0.25s ease;
        box-shadow: none;
    }
    .sidebar.mobile-open {
        transform: translateX(0) !important;
        box-shadow: 4px 0 24px rgba(0,0,0,0.15);
    }

    /* Message bubbles: near-full width */
    .msg { max-width: 96% !important; }
    .msg-bubble { font-size: 14px !important; }

    /* Input area: full width, no zoom */
    .chat-input-area {
        padding: 12px !important;
        gap: 8px !important;
    }
    .chat-input-area textarea {
        font-size: 16px !important;
    }
    .toolbar-btn {
        padding: 5px 8px !important;
        font-size: 11px !important;
    }
    .empty-chips { max-width: 100% !important; }

    /* Bottom clearance for mobile nav */
    .page, .rf-page, .pf-page {
        padding-bottom: calc(80px + env(safe-area-inset-bottom, 0px)) !important;
    }
    .chat-input-area {
        padding-bottom: calc(12px + 68px) !important;
    }
}

/* ── §23.4 Bottom nav (shared mobile nav) ── */
@media (max-width: 768px) {
    .rf-mobile-nav {
        display: flex !important;
    }
}

/* ── §23.5 Forms — stack and full-width at 320px ── */
@media (max-width: 480px) {
    .form-grid-2, .form-row-duo, .form-row-pair {
        grid-template-columns: 1fr !important;
    }
    .btn:not(.btn-sm):not(.btn-xs):not([class*="toolbar"]) {
        width: 100%;
        justify-content: center;
    }
    /* Modal: full-width bottom-sheet */
    .rf-modal, .modal {
        width: 100% !important;
        max-width: 100% !important;
        border-radius: 14px 14px 0 0 !important;
        margin: 0 !important;
    }
}

/* ── §23.6 Charts — responsive sizing ── */
@media (max-width: 600px) {
    .chart-wrap, [class*="chart"][class*="container"] {
        max-width: 100% !important;
        height: auto !important;
    }
}

/* ── §23.7 Export buttons — accessible on mobile ── */
@media (max-width: 600px) {
    .export-actions, .action-row {
        flex-wrap: wrap !important;
        gap: 8px !important;
    }
    .export-actions .btn {
        flex: 1 1 auto !important;
        min-width: 120px !important;
    }
}

/* ── §23.8 Settings — stacked sidebar tabs at 320px ── */
@media (max-width: 600px) {
    .settings-layout {
        flex-direction: column !important;
        padding: 16px 12px 80px !important;
    }
    .settings-sidebar {
        width: 100% !important;
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 6px !important;
        padding-bottom: 16px !important;
        border-bottom: 1px solid var(--rf-border, #e5e7eb) !important;
        margin-bottom: 16px !important;
    }
    .tab-btn {
        flex: 0 0 auto !important;
        padding: 7px 12px !important;
        font-size: 12px !important;
    }
}

/* ── §23.9 320px-specific tweaks (iPhone SE) ── */
@media (max-width: 375px) {
    .kpi-strip, .cards-grid, .goals-grid {
        gap: 10px !important;
    }
    .kpi-card, .rf-kpi-card, .goal-card, .card {
        padding: 12px !important;
    }
    h1, h2, .page-title, .pf-title { font-size: 20px !important; }
    .kpi-value { font-size: 18px !important; }
    .kpi-label { font-size: 9px !important; }
    tbody td, thead th { padding: 8px 10px !important; }
    .chat-toolbar { flex-wrap: wrap !important; padding: 8px 12px !important; }
}

/* ── §23.10 KPI Builder modal: bottom-sheet on mobile ── */
@media (max-width: 600px) {
    .modal-backdrop.open {
        align-items: flex-end !important;
    }
    .modal-backdrop.open .modal {
        width: 100% !important;
        max-height: 85vh !important;
        border-radius: 14px 14px 0 0 !important;
    }
    .modal-body { padding: 16px !important; }
}

/* ── §22.3 Responsive display scale ── */
@media (max-width: 768px) {
    .display-xl {
        font-size: clamp(2rem, 8vw, 2.75rem);
        line-height: 1.0;
    }
    .display-lg {
        font-size: clamp(1.5rem, 6vw, 2rem);
        line-height: 1.1;
    }
}

/* ═══════════════════════════════════════════════════════════════
   §24 — Electric Blue Micro-Accent System
   Subtle neon accent on CTAs, step labels, active indicators.
   NOT for body text, backgrounds, or large fills.
   ═══════════════════════════════════════════════════════════════ */

/* ── §24.1 Primary CTA — electric blue border + hover glow ── */
.btn-primary, .nav-cta {
    border: 1px solid var(--rf-electric-border);
}
.btn-primary:hover, .nav-cta:hover {
    box-shadow: 0 0 12px var(--rf-electric-glow), 0 2px 8px rgba(0, 0, 0, 0.06);
}

/* ── §24.2 Secondary / ghost button — electric blue text + border on hover ── */
.btn-secondary:hover, .btn-ghost:hover {
    color: var(--rf-electric);
    border-color: var(--rf-electric-border);
}

/* ── §24.3 Step numbers / labels — electric blue accent ── */
.journey-num, .step-num-label {
    color: var(--rf-electric) !important;
}

/* ── §24.4 Eyebrow labels — electric blue ── */
.eyebrow {
    color: var(--rf-electric);
}

/* ── §24.5 Link hover — electric blue shift ── */
a:hover {
    color: var(--rf-electric);
}
.nav-links a:hover {
    color: var(--rf-electric);
}
.footer-links a:hover {
    color: var(--rf-electric);
}

/* ── §24.6 Active nav indicator — electric blue underline ── */
.nav-links a.active,
.nav-link.active {
    color: var(--rf-electric);
    position: relative;
}
.nav-links a.active::after,
.nav-link.active::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--rf-electric);
    border-radius: 1px;
}

/* ── §24.7 Form focus — electric blue ring ── */
input:focus, select:focus, textarea:focus,
.rf-input:focus, .rf-select:focus, .rf-textarea:focus {
    border-color: var(--rf-electric);
    box-shadow: 0 0 0 3px var(--rf-electric-subtle);
}

/* ── §24.8 KPI card hover gradient — uses electric blue ── */
.rf-kpi-card::after {
    background: linear-gradient(90deg, var(--rf-accent), var(--rf-electric));
}

/* ── §24.9 Nav drawer CTA — match electric border ── */
.nav-drawer-links .nav-cta,
.nav-drawer-links [class*="nav-cta"] {
    border: 1px solid var(--rf-electric-border) !important;
}
.nav-drawer-links .nav-cta:hover,
.nav-drawer-links [class*="nav-cta"]:hover {
    box-shadow: 0 0 12px var(--rf-electric-glow) !important;
}