/* coldloads.com/van — Shared Design System CSS v1.0
   F.R.I.D.A.Y design · NEON implementation · 2026-05-13 */

/* ── 1. CSS Custom Properties ── */
:root {
  --cl-blue:        #2563eb;
  --cl-blue-dark:   #1d4ed8;
  --cl-blue-dim:    rgba(37,99,235,0.12);
  --cl-blue-glow:   0 0 0 3px rgba(37,99,235,0.30);
  --warning:        #f59e0b;
  --warning-dim:    rgba(245,158,11,0.12);
  --danger:         #ef4444;
  --danger-dim:     rgba(239,68,68,0.10);
  --success:        #10b981;
  --success-dim:    rgba(16,185,129,0.10);
  --info:           #6366f1;
  --info-dim:       rgba(99,102,241,0.12);

  --font:      'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Mono', 'Courier New', monospace;

  --space-1:  4px;  --space-2:  8px;  --space-3:  12px; --space-4:  16px;
  --space-5:  20px; --space-6:  24px; --space-8:  32px; --space-10: 40px;
  --space-12: 48px; --space-16: 64px; --space-20: 80px; --space-24: 96px;

  --radius-sm:  6px;  --radius-md:  10px; --radius-lg:  16px;
  --radius-xl:  24px; --radius-pill:999px;

  --ease-out: cubic-bezier(0.0,0.0,0.2,1);
  --ease-io:  cubic-bezier(0.4,0.0,0.2,1);
  --dur-fast: 120ms; --dur-base: 200ms; --dur-slow: 350ms;

  --nav-h: 56px;
  --section-nav-h: 52px;
}

/* Dark default */
[data-theme="dark"], :root {
  --bg-base:      #080c14;
  --bg-surface:   #0d1524;
  --bg-elevated:  #131e32;
  --bg-subtle:    #1a2540;
  --border:       rgba(255,255,255,0.08);
  --border-strong:rgba(255,255,255,0.15);
  --text-primary: #f1f5f9;
  --text-secondary:#94a3b8;
  --text-muted:   #64748b;
  --text-inverse: #0f172a;
  --shadow-sm:    0 1px 3px rgba(0,0,0,0.40);
  --shadow-md:    0 4px 16px rgba(0,0,0,0.50);
  --shadow-lg:    0 8px 40px rgba(0,0,0,0.60);
}

[data-theme="light"] {
  --bg-base:      #f8fafc;
  --bg-surface:   #ffffff;
  --bg-elevated:  #ffffff;
  --bg-subtle:    #f1f5f9;
  --border:       #e2e8f0;
  --border-strong:#cbd5e1;
  --text-primary: #0f172a;
  --text-secondary:#475569;
  --text-muted:   #94a3b8;
  --text-inverse: #ffffff;
  --shadow-sm:    0 1px 3px rgba(0,0,0,0.08);
  --shadow-md:    0 4px 16px rgba(0,0,0,0.10);
  --shadow-lg:    0 8px 40px rgba(0,0,0,0.14);
}

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

html {
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.65;
  color: var(--text-primary);
  background: var(--bg-base);
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
}

body {
  min-height: 100vh;
  overflow-x: hidden;
}

body[data-theme="dark"] {
  background-image: url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 40L40 0' stroke='rgba(255,255,255,0.02)' stroke-width='1'/%3E%3C/svg%3E");
  background-size: 40px 40px;
}

a { color: var(--cl-blue); text-decoration: none; }
a:hover { text-decoration: underline; }
img, svg { display: block; max-width: 100%; }

/* ── 3. Layout ── */
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 40px;
}
@media(max-width:768px) { .container { padding: 0 20px; } }

/* ── 4. Typography Scale ── */
.text-xs   { font-size:11px; font-weight:500; letter-spacing:0.04em; }
.text-sm   { font-size:13px; }
.text-base { font-size:15px; }
.text-md   { font-size:17px; }
.text-lg   { font-size:20px; font-weight:600; letter-spacing:-0.01em; }
.text-xl   { font-size:24px; font-weight:700; letter-spacing:-0.02em; }
.text-2xl  { font-size:32px; font-weight:700; letter-spacing:-0.025em; }
.text-3xl  { font-size:48px; font-weight:800; letter-spacing:-0.03em; }
.text-display { font-size:80px; font-weight:900; letter-spacing:-0.05em; line-height:0.95; }

/* ── 5. Buttons ── */
.btn-primary {
  display: inline-flex; align-items: center; gap: var(--space-2);
  background: var(--cl-blue); color: #fff;
  padding: 12px 28px; border-radius: var(--radius-pill);
  font-size:15px; font-weight:700; letter-spacing:0.01em;
  border: none; cursor: pointer;
  transition: background var(--dur-base), transform var(--dur-fast), box-shadow var(--dur-base);
  text-decoration: none;
}
.btn-primary:hover { background:var(--cl-blue-dark); transform:translateY(-1px); box-shadow:var(--shadow-md); text-decoration:none; }
.btn-primary:active { transform:translateY(0); box-shadow:none; }

.btn-ghost {
  display: inline-flex; align-items: center; gap: var(--space-2);
  background: transparent; color: var(--text-secondary);
  border: 1px solid var(--border);
  padding: 11px 24px; border-radius: var(--radius-pill);
  font-size:15px; font-weight:600;
  cursor: pointer; transition: border-color var(--dur-base), color var(--dur-base);
  text-decoration: none;
}
.btn-ghost:hover { border-color: var(--cl-blue); color: var(--cl-blue); text-decoration:none; }

/* ── 6. Site Header ── */
.site-header {
  position: sticky; top: 0; z-index: 1010;
  height: var(--nav-h);
  background: var(--bg-surface);
  border-bottom: 1px solid var(--border);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.site-header .container {
  height: 100%;
  display: flex; align-items: center; justify-content: space-between;
}
.site-logo {
  font-size:17px; font-weight:700; color:var(--text-primary);
  text-decoration:none; letter-spacing:-0.01em;
}
.site-logo:hover { text-decoration:none; color:var(--cl-blue); }
.site-logo span { color:var(--cl-blue); }
.site-nav-links { display:flex; align-items:center; gap:var(--space-6); }
.site-nav-links a { font-size:14px; font-weight:500; color:var(--text-secondary); }
.site-nav-links a:hover { color:var(--text-primary); text-decoration:none; }

.theme-toggle, .lang-toggle {
  background:none; border:1px solid var(--border); border-radius:var(--radius-pill);
  padding: 6px 12px; cursor:pointer; font-size:14px; color:var(--text-secondary);
  transition: border-color var(--dur-base), color var(--dur-base);
}
.theme-toggle:hover, .lang-toggle:hover { border-color:var(--border-strong); color:var(--text-primary); }
.lang-toggle { border-color:var(--cl-blue); color:var(--cl-blue); font-weight:700; letter-spacing:0.04em; }
.lang-toggle:hover { background:var(--cl-blue); color:#fff; }

/* ── 7. Sticky Section Nav ── */
.section-nav {
  position: sticky; top: var(--nav-h); z-index: 1000;
  background: var(--bg-surface);
  border-bottom: 1px solid var(--border);
  overflow-x: auto; overflow-y: hidden;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.section-nav::-webkit-scrollbar { display:none; }
.section-nav-inner {
  display: flex; align-items: center; gap: var(--space-2);
  padding: 8px var(--space-10);
  white-space: nowrap;
  min-height: var(--section-nav-h);
}
.section-nav-pill {
  display: inline-flex; align-items: center; gap: var(--space-1);
  padding: 6px 16px; border-radius: var(--radius-pill);
  font-size: 13px; font-weight: 600;
  color: var(--text-secondary); background: transparent;
  border: 1px solid transparent;
  cursor: pointer; text-decoration: none;
  transition: all var(--dur-base);
  white-space: nowrap;
}
.section-nav-pill:hover { border-color: var(--border-strong); color:var(--text-primary); text-decoration:none; }
.section-nav-pill.active { background:var(--cl-blue); color:#fff; border-color:var(--cl-blue); }
.section-nav-pill .warn-dot {
  width:6px; height:6px; border-radius:50%; background:var(--warning);
  display:inline-block;
}

/* ── 8. Hero ── */
.hero {
  padding: 80px 0 60px;
  background: var(--bg-base);
}
.hero-inner {
  display: grid; grid-template-columns: 1fr auto; gap: var(--space-16); align-items: center;
}
.hero-eyebrow {
  font-size:12px; font-weight:700; letter-spacing:0.12em; text-transform:uppercase;
  color: #60a5fa; margin-bottom: var(--space-4);
}
[data-theme="light"] .hero-eyebrow { color: var(--cl-blue); }
.hero-h1 {
  font-size: clamp(48px, 6vw, 80px);
  font-weight: 900;
  line-height: 0.95;
  letter-spacing: -0.04em;
  color: var(--text-primary);
  margin-bottom: var(--space-6);
  animation: fadeInUp var(--dur-slow) var(--ease-out) 200ms both;
}
.hero-subhead {
  font-size: 17px; font-weight: 400; line-height: 1.65;
  color: var(--text-secondary);
  max-width: 520px;
  margin-bottom: var(--space-8);
}
.hero-ctas { display:flex; gap:var(--space-4); flex-wrap:wrap; margin-bottom:var(--space-12); }
.hero-icon-wrap {
  width: 120px; height: 120px;
  display: flex; align-items: center; justify-content: center;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  padding: var(--space-6);
}
.hero-icon-wrap svg { width:80px; height:80px; color:var(--cl-blue); }

/* Stats bar */
.hero-stats {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 1px; background: var(--border);
  border: 1px solid var(--border); border-radius: var(--radius-md);
  overflow: hidden;
}
.hero-stat {
  background: var(--bg-surface);
  padding: var(--space-5) var(--space-6);
  text-align: center;
}
.hero-stat-value {
  font-family: var(--font-mono);
  font-size: 28px; font-weight: 900;
  letter-spacing: -0.02em;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}
.hero-stat-label {
  font-size: 11px; font-weight: 500; color: #94a3b8;
  margin-top: var(--space-1); line-height: 1.4;
}

/* ── 9. Equipment Icon Cards ── */
.equipment-grid {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--space-4);
  padding: var(--space-10) 0;
}
.equipment-card {
  background: var(--bg-surface);
  border: 2px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-6) var(--space-4);
  text-align: center; cursor: pointer;
  transition: border-color var(--dur-base), transform var(--dur-base), box-shadow var(--dur-base);
  position: relative;
}
.equipment-card:hover { border-color: var(--border-strong); transform: translateY(-2px); box-shadow: var(--shadow-md); }
.equipment-card.active { border-color: var(--cl-blue); box-shadow: var(--cl-blue-glow); }
.equipment-card.placeholder { opacity: 0.5; cursor: default; }
.equipment-card.placeholder:hover { transform: none; box-shadow: none; border-color: var(--border); }
.equipment-card-icon {
  width: 48px; height: 48px; margin: 0 auto var(--space-3);
  color: var(--text-secondary);
}
.equipment-card.active .equipment-card-icon { color: var(--cl-blue); }
.equipment-card-label { font-size:13px; font-weight:700; letter-spacing:0.04em; text-transform:uppercase; color:var(--text-primary); }
.equipment-card-tagline { font-size:11px; color:var(--text-muted); margin-top:var(--space-1); }
.equipment-card-badge {
  position: absolute; top:-8px; left:50%; transform:translateX(-50%);
  background: var(--cl-blue); color:#fff;
  font-size:10px; font-weight:700; letter-spacing:0.05em;
  padding:2px 8px; border-radius:var(--radius-pill);
  white-space:nowrap;
}
.equipment-card-badge.soon { background:var(--bg-subtle); color:var(--text-muted); border:1px solid var(--border); }

/* Expanded drawer */
.equipment-drawer {
  display: none; grid-column: 1 / -1;
  background: var(--bg-elevated);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  padding: var(--space-8);
  margin-top: var(--space-2);
  animation: fadeInUp var(--dur-base) var(--ease-out);
}
.equipment-drawer.open { display: block; }
.drawer-header {
  display: flex; align-items: center; gap: var(--space-4);
  margin-bottom: var(--space-6);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--border);
}
.drawer-header svg { width:48px; height:48px; color:var(--cl-blue); }
.drawer-title { font-size:20px; font-weight:700; }
.drawer-subtitle { font-size:14px; color:var(--text-secondary); margin-top:2px; }
.drawer-close {
  margin-left: auto; background:none; border:none; cursor:pointer;
  color:var(--text-muted); font-size:20px; padding:var(--space-2);
  border-radius:var(--radius-sm); transition:color var(--dur-base);
}
.drawer-close:hover { color:var(--text-primary); }
.drawer-specs {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4);
  margin-bottom: var(--space-6);
}
.drawer-spec { text-align:center; }
.drawer-spec-val { font-family:var(--font-mono); font-size:20px; font-weight:700; color:var(--text-primary); }
.drawer-spec-key { font-size:11px; color:var(--text-muted); text-transform:uppercase; letter-spacing:0.08em; margin-top:2px; }
.drawer-meta { display:flex; gap:var(--space-8); flex-wrap:wrap; margin-bottom:var(--space-4); }
.drawer-meta-item { font-size:13px; color:var(--text-secondary); }
.drawer-meta-item strong { color:var(--text-primary); }

/* ── 10. Stat Counters ── */
.stat-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-8);
  padding: var(--space-12) 0;
}
.stat-counter { text-align:center; }
.stat-counter-value {
  font-family: var(--font-mono);
  font-size: 48px; font-weight: 900;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  color: var(--text-primary);
  line-height: 1;
  opacity: 0; transform: translateY(8px);
  transition: opacity 0.6s var(--ease-out), transform 0.6s var(--ease-out);
}
.stat-counter-value.counted { opacity:1; transform:translateY(0); }
.stat-counter-label {
  font-size: 13px; color: var(--text-secondary);
  margin-top: var(--space-2); line-height: 1.4;
  max-width: 160px; margin-left: auto; margin-right: auto;
}
.stat-counter-prefix { color:var(--text-muted); }
.stat-counter-suffix { color:var(--text-muted); }

/* ── 11. Callouts ── */
.callout {
  border-radius: var(--radius-md);
  padding: var(--space-6) var(--space-6) var(--space-6) var(--space-8);
  margin: var(--space-8) 0;
  position: relative;
}
.callout::before {
  content:''; position:absolute; left:0; top:0; bottom:0;
  width:4px; border-radius:4px 0 0 4px;
}
.callout-header {
  display:flex; align-items:center; gap:var(--space-3);
  font-size:13px; font-weight:700; letter-spacing:0.06em; text-transform:uppercase;
  margin-bottom:var(--space-3);
}
.callout-header svg { flex-shrink:0; }
.callout-body { font-size:15px; line-height:1.65; }
.callout-source { font-size:12px; color:var(--text-muted); margin-top:var(--space-3); font-style:italic; }

.callout-warning { background:var(--warning-dim); }
.callout-warning::before { background:var(--warning); }
.callout-warning .callout-header { color:var(--warning); }

.callout-danger { background:var(--danger-dim); }
.callout-danger::before { background:var(--danger); }
.callout-danger .callout-header { color:var(--danger); }

.callout-info { background:var(--info-dim); }
.callout-info::before { background:var(--info); }
.callout-info .callout-header { color:var(--info); }

.callout-success { background:var(--success-dim); }
.callout-success::before { background:var(--success); }
.callout-success .callout-header { color:var(--success); }

/* ── 12. Tables ── */
.table-wrap {
  overflow-x: auto; border-radius: var(--radius-md);
  border: 1px solid var(--border); margin: var(--space-6) 0;
}
.table-caption { font-size:12px; color:var(--text-muted); padding:var(--space-3) var(--space-4) 0; }
table {
  width:100%; border-collapse:collapse;
  font-size:14px;
}
th {
  background:var(--bg-subtle); color:var(--text-secondary);
  font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:0.07em;
  padding:10px var(--space-4); text-align:left;
  border-bottom:1px solid var(--border);
  white-space:nowrap;
}
td {
  padding: 10px var(--space-4);
  border-bottom:1px solid var(--border);
  color:var(--text-primary);
}
tr:last-child td { border-bottom:none; }
tr:nth-child(odd)  td { background:var(--bg-surface); }
tr:nth-child(even) td { background:var(--bg-subtle); }
tr:hover td { background:var(--bg-subtle); }
td.num { font-family:var(--font-mono); font-variant-numeric:tabular-nums; }
tr.highlight td { background:var(--cl-blue-dim) !important; }
tr.highlight td:first-child { font-weight:700; }

/* ── 13. Calculator Panel ── */
.calc-panel {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  padding: var(--space-8);
  margin: var(--space-8) 0;
}
.calc-tabs {
  display: flex; gap: var(--space-2); margin-bottom:var(--space-8);
}
.calc-tab {
  padding:8px 20px; border-radius:var(--radius-pill);
  font-size:14px; font-weight:600;
  cursor:pointer; border:1px solid var(--border);
  background:none; color:var(--text-secondary);
  transition: all var(--dur-base);
}
.calc-tab.active { background:var(--cl-blue); color:#fff; border-color:var(--cl-blue); }
.calc-pane { display:none; }
.calc-pane.active { display:block; }
.calc-title {
  font-size:18px; font-weight:700; margin-bottom:var(--space-6);
  display:flex; align-items:center; gap:var(--space-3);
}
.calc-field { margin-bottom:var(--space-6); }
.calc-label { font-size:13px; font-weight:600; color:var(--text-secondary); margin-bottom:var(--space-2); display:block; }
.calc-input {
  width:100%; padding:10px var(--space-4);
  background:var(--bg-base); border:1px solid var(--border);
  border-radius:var(--radius-md); color:var(--text-primary);
  font-size:16px; font-family:var(--font);
  transition:border-color var(--dur-base);
}
.calc-input:focus { outline:none; border-color:var(--cl-blue); box-shadow:var(--cl-blue-glow); }
.calc-slider-wrap { position:relative; }
.calc-slider {
  width:100%; -webkit-appearance:none; appearance:none;
  height:6px; border-radius:3px;
  background:var(--bg-subtle); cursor:pointer;
  outline:none;
}
.calc-slider::-webkit-slider-thumb {
  -webkit-appearance:none; width:20px; height:20px;
  border-radius:50%; background:var(--cl-blue);
  box-shadow: 0 0 0 3px rgba(37,99,235,0.2);
  cursor:pointer;
}
.calc-slider::-moz-range-thumb {
  width:20px; height:20px; border-radius:50%;
  background:var(--cl-blue); border:none; cursor:pointer;
}
.calc-slider-labels {
  display:flex; justify-content:space-between;
  font-size:11px; color:var(--text-muted); margin-top:var(--space-2);
}
.calc-fico-display {
  text-align:center; font-family:var(--font-mono);
  font-size:32px; font-weight:900;
  color:var(--text-primary); margin-bottom:var(--space-2);
}
.calc-radios { display:flex; gap:var(--space-4); margin-top:var(--space-2); }
.calc-radio {
  display:flex; align-items:center; gap:var(--space-2);
  cursor:pointer; font-size:14px; color:var(--text-secondary);
}
.calc-radio input { accent-color:var(--cl-blue); cursor:pointer; }
.calc-divider { border:none; border-top:1px solid var(--border); margin:var(--space-6) 0; }
.calc-result-row {
  display:flex; justify-content:space-between; align-items:baseline;
  padding:var(--space-3) 0; border-bottom:1px solid var(--border);
}
.calc-result-row:last-child { border-bottom:none; }
.calc-result-label { font-size:14px; color:var(--text-secondary); }
.calc-result-value {
  font-family:var(--font-mono); font-size:22px; font-weight:700;
  color:var(--text-primary);
}
.calc-result-value.green { color:var(--success); }
.calc-result-value.red { color:var(--danger); }
.calc-result-sub { font-size:12px; color:var(--text-muted); margin-top:2px; text-align:right; }
.calc-bmc85-note {
  display:none; text-align:center; padding:var(--space-8);
  color:var(--text-secondary); font-size:14px; line-height:1.6;
}
.calc-bmc85-note strong { color:var(--text-primary); display:block; font-size:24px; margin-bottom:var(--space-2); }
.calc-row-2col { display:grid; grid-template-columns:1fr 1fr; gap:var(--space-4); }
.calc-status {
  padding:var(--space-3) var(--space-4); border-radius:var(--radius-md);
  font-size:14px; font-weight:600; margin-top:var(--space-4);
  display:flex; align-items:center; gap:var(--space-2);
}
.calc-status.above { background:var(--success-dim); color:var(--success); }
.calc-status.below { background:var(--danger-dim); color:var(--danger); }

/* ── 14. Glossary ── */
.glossary-search-wrap {
  position:relative; margin-bottom:var(--space-6);
}
.glossary-search {
  width:100%; padding:14px 20px 14px 48px;
  background:var(--bg-surface); border:1px solid var(--border);
  border-radius:var(--radius-pill); color:var(--text-primary);
  font-size:16px; font-family:var(--font);
  transition:border-color var(--dur-base);
}
.glossary-search:focus { outline:none; border-color:var(--cl-blue); box-shadow:var(--cl-blue-glow); }
.glossary-search-icon {
  position:absolute; left:16px; top:50%; transform:translateY(-50%);
  color:var(--text-muted); pointer-events:none;
}
.glossary-filters {
  display:flex; gap:var(--space-2); flex-wrap:wrap; margin-bottom:var(--space-8);
}
.filter-chip {
  padding:6px 16px; border-radius:var(--radius-pill);
  font-size:13px; font-weight:600; cursor:pointer;
  border:1px solid var(--border); background:none; color:var(--text-secondary);
  transition:all var(--dur-base);
}
.filter-chip:hover { border-color:var(--border-strong); color:var(--text-primary); }
.filter-chip.active { background:var(--cl-blue); color:#fff; border-color:var(--cl-blue); }
.glossary-list { }
.glossary-group-header {
  font-size:12px; font-weight:700; letter-spacing:0.1em; text-transform:uppercase;
  color:var(--text-muted); padding:var(--space-4) 0 var(--space-2);
  border-bottom:1px solid var(--border); margin-bottom:var(--space-4);
}
.glossary-item {
  padding:var(--space-4) 0;
  border-bottom:1px solid var(--border);
  display:flex; gap:var(--space-4); align-items:flex-start;
}
.glossary-item:last-child { border-bottom:none; }
.glossary-term {
  font-size:15px; font-weight:700; color:var(--text-primary);
  min-width:200px; flex-shrink:0;
}
.glossary-cat {
  display:inline-block; padding:2px 8px; border-radius:var(--radius-pill);
  font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:0.06em;
  margin-top:3px;
}
.cat-equipment  { background:var(--info-dim);    color:var(--info);    }
.cat-regulatory { background:var(--warning-dim); color:var(--warning); }
.cat-operations { background:var(--cl-blue-dim); color:var(--cl-blue); }
.cat-money      { background:var(--success-dim); color:var(--success); }
.cat-risk       { background:var(--danger-dim);  color:var(--danger);  }
.glossary-def { font-size:14px; color:var(--text-secondary); line-height:1.6; }
.glossary-empty { text-align:center; padding:var(--space-16); color:var(--text-muted); font-size:15px; }

/* Tooltip */
.gl-term {
  text-decoration: underline dotted var(--info);
  cursor: help; color: inherit;
}
.gl-tooltip {
  position:absolute; z-index:500;
  background:var(--bg-elevated); border:1px solid var(--border-strong);
  border-radius:var(--radius-md); padding:var(--space-4);
  max-width:300px; box-shadow:var(--shadow-lg);
  font-size:13px; line-height:1.5;
  pointer-events:none; opacity:0; transition:opacity var(--dur-base);
}
.gl-tooltip.visible { opacity:1; pointer-events:auto; }
.gl-tooltip-term { font-weight:700; margin-bottom:4px; color:var(--text-primary); }
.gl-tooltip-def { color:var(--text-secondary); }

/* ── 15. Content Sections ── */
.content-section {
  padding: 80px 0;
  border-top: 1px solid var(--border);
}
.content-section:nth-child(even) { background:var(--bg-surface); }
.section-eyebrow {
  font-size:11px; font-weight:700; letter-spacing:0.12em; text-transform:uppercase;
  color:var(--cl-blue); margin-bottom:var(--space-3);
}
.section-h2 {
  font-size:clamp(28px,4vw,40px); font-weight:800;
  letter-spacing:-0.025em; line-height:1.15;
  color:var(--text-primary); margin-bottom:var(--space-6);
}
.section-h3 {
  font-size:22px; font-weight:700; letter-spacing:-0.01em;
  color:var(--text-primary); margin:var(--space-10) 0 var(--space-4);
}
.section-h4 {
  font-size:16px; font-weight:700;
  color:var(--text-primary); margin:var(--space-6) 0 var(--space-3);
}
.lead { font-size:17px; line-height:1.7; color:var(--text-secondary); margin-bottom:var(--space-8); }
p { margin-bottom:var(--space-4); }
ul, ol { padding-left:var(--space-6); margin-bottom:var(--space-4); }
li { margin-bottom:var(--space-2); }
strong { color:var(--text-primary); font-weight:700; }

/* Who's-who cards */
.who-grid {
  display:grid; grid-template-columns:repeat(5,1fr); gap:var(--space-4);
  margin:var(--space-8) 0;
}
.who-card {
  background:var(--bg-surface); border:1px solid var(--border);
  border-radius:var(--radius-lg); padding:var(--space-6) var(--space-4);
  text-align:center;
}
.who-card.you { border-color:var(--cl-blue); background:var(--cl-blue-dim); }
.who-card-label {
  font-size:11px; font-weight:700; letter-spacing:0.08em; text-transform:uppercase;
  color:var(--text-muted); margin-bottom:var(--space-2);
}
.who-card.you .who-card-label { color:var(--cl-blue); }
.who-card-title { font-size:15px; font-weight:700; color:var(--text-primary); margin-bottom:var(--space-2); }
.who-card-body { font-size:12px; color:var(--text-secondary); line-height:1.5; }

/* Margin math block */
.margin-math {
  background:var(--bg-elevated); border:1px solid var(--border);
  border-radius:var(--radius-lg); padding:var(--space-8);
  font-family:var(--font-mono); margin:var(--space-8) 0;
}
.margin-math-row {
  display:flex; justify-content:space-between; align-items:baseline;
  padding:var(--space-2) 0; font-size:18px;
}
.margin-math-row.total {
  border-top:2px solid var(--border-strong); padding-top:var(--space-4); margin-top:var(--space-2);
  font-weight:700; font-size:22px;
}
.margin-math-row .label { color:var(--text-secondary); }
.margin-math-row .value { color:var(--text-primary); }
.margin-math-row.total .value { color:var(--success); }

/* Where money goes / comes */
.money-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:var(--space-4); margin:var(--space-8) 0; }
.money-card {
  background:var(--bg-surface); border:1px solid var(--border);
  border-radius:var(--radius-lg); padding:var(--space-6);
}
.money-card-header {
  font-size:11px; font-weight:700; letter-spacing:0.08em; text-transform:uppercase;
  color:var(--text-muted); margin-bottom:var(--space-4);
}
.money-card.good { border-color:var(--success); }
.money-card.bad  { border-color:var(--danger); }
.money-card.good .money-card-header { color:var(--success); }
.money-card.bad  .money-card-header { color:var(--danger); }

/* 3-tier revenue cards */
.tier-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:var(--space-6); margin:var(--space-8) 0; }
.tier-card {
  background:var(--bg-surface); border:1px solid var(--border);
  border-radius:var(--radius-lg); padding:var(--space-8);
}
.tier-card-tier { font-size:11px; font-weight:700; letter-spacing:0.08em; text-transform:uppercase; color:var(--text-muted); margin-bottom:var(--space-2); }
.tier-card-title { font-size:17px; font-weight:700; color:var(--text-primary); margin-bottom:var(--space-4); }
.tier-card-revenue { font-family:var(--font-mono); font-size:24px; font-weight:900; color:var(--cl-blue); margin-bottom:var(--space-2); }
.tier-card-sub { font-size:13px; color:var(--text-secondary); }

/* Workflow steps */
.workflow-steps { margin:var(--space-8) 0; }
.workflow-step {
  display:flex; gap:var(--space-6);
  padding:var(--space-6) 0; border-bottom:1px solid var(--border);
}
.workflow-step:last-child { border-bottom:none; }
.workflow-step-num {
  flex-shrink:0; width:40px; height:40px; border-radius:50%;
  background:var(--cl-blue-dim); border:1px solid var(--cl-blue);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-mono); font-size:15px; font-weight:700; color:var(--cl-blue);
}
.workflow-step-content { flex:1; }
.workflow-step-title { font-size:17px; font-weight:700; color:var(--text-primary); margin-bottom:var(--space-3); }
.workflow-step-title .badge-important {
  display:inline-block; background:var(--cl-blue); color:#fff;
  font-size:10px; font-weight:700; padding:2px 8px;
  border-radius:var(--radius-pill); letter-spacing:0.05em;
  vertical-align:middle; margin-left:var(--space-2);
}

/* Checklist */
.checklist { list-style:none; padding:0; }
.checklist li { display:flex; gap:var(--space-3); align-items:flex-start; padding:var(--space-2) 0; font-size:14px; }
.checklist li::before { content:'✅'; flex-shrink:0; }
.checklist-red li::before { content:'🚨'; }

/* Pitfalls */
.pitfall-card {
  background:var(--bg-surface); border:1px solid var(--border);
  border-radius:var(--radius-lg); padding:var(--space-6);
  margin-bottom:var(--space-4);
}
.pitfall-card-head {
  display:flex; align-items:center; gap:var(--space-3);
  font-size:17px; font-weight:700; color:var(--text-primary);
  margin-bottom:var(--space-4);
}
.pitfall-letter {
  width:32px; height:32px; border-radius:50%;
  background:var(--danger-dim); color:var(--danger);
  font-weight:900; font-size:16px;
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
}
.stat-highlight {
  font-family:var(--font-mono); font-size:28px; font-weight:900;
  color:var(--danger); margin-bottom:var(--space-2);
}

/* Next steps */
.next-steps-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:var(--space-6); margin:var(--space-8) 0; }
.next-step-card {
  background:var(--bg-surface); border:1px solid var(--border);
  border-radius:var(--radius-lg); padding:var(--space-6);
}
.next-step-week {
  font-size:11px; font-weight:700; letter-spacing:0.1em; text-transform:uppercase;
  color:var(--cl-blue); margin-bottom:var(--space-2);
}
.next-step-title { font-size:17px; font-weight:700; margin-bottom:var(--space-4); }
.next-step-list { list-style:none; padding:0; }
.next-step-list li {
  padding:var(--space-2) 0; font-size:14px; color:var(--text-secondary);
  border-bottom:1px solid var(--border); display:flex; gap:var(--space-2);
}
.next-step-list li:last-child { border-bottom:none; }
.next-step-list li::before { content:'→'; color:var(--cl-blue); flex-shrink:0; }

/* CTA block */
.cta-block {
  background:var(--bg-elevated); border:1px solid var(--border-strong);
  border-radius:var(--radius-xl); padding:var(--space-12);
  text-align:center; margin:var(--space-12) 0;
}
.cta-block-title { font-size:28px; font-weight:800; margin-bottom:var(--space-4); }
.cta-block-body { font-size:16px; color:var(--text-secondary); margin-bottom:var(--space-8); max-width:500px; margin-left:auto; margin-right:auto; }
.cta-block-actions { display:flex; justify-content:center; gap:var(--space-4); flex-wrap:wrap; }

/* Specs box */
.specs-grid {
  display:grid; grid-template-columns:repeat(2,1fr); gap:var(--space-4);
  background:var(--bg-surface); border:1px solid var(--border);
  border-radius:var(--radius-lg); padding:var(--space-6); margin:var(--space-6) 0;
}
.spec-row { display:flex; justify-content:space-between; align-items:baseline; padding:var(--space-2) 0; border-bottom:1px solid var(--border); font-size:14px; }
.spec-row:last-child { border-bottom:none; }
.spec-key { color:var(--text-secondary); }
.spec-val { font-family:var(--font-mono); font-weight:700; color:var(--text-primary); }

/* ── 16. Footer ── */
.site-footer {
  background:var(--bg-surface);
  border-top:1px solid var(--border);
  padding:var(--space-16) 0 var(--space-10);
  margin-top:var(--space-20);
}
.footer-top {
  display:flex; justify-content:space-between; gap:var(--space-12);
  margin-bottom:var(--space-10);
}
.footer-brand { font-size:17px; font-weight:700; color:var(--text-primary); }
.footer-brand span { color:var(--cl-blue); }
.footer-tagline { font-size:13px; color:var(--text-muted); margin-top:var(--space-2); }
.footer-nav { display:flex; flex-wrap:wrap; gap:var(--space-2) var(--space-4); max-width:480px; }
.footer-nav a { font-size:13px; color:var(--text-secondary); }
.footer-nav a:hover { color:var(--text-primary); text-decoration:none; }
.footer-divider { border:none; border-top:1px solid var(--border); margin:var(--space-8) 0; }
.footer-disclaimer {
  display:flex; gap:var(--space-4); align-items:flex-start;
  background:var(--warning-dim); border:1px solid rgba(245,158,11,0.2);
  border-radius:var(--radius-md); padding:var(--space-4) var(--space-6);
  margin-bottom:var(--space-8);
}
.footer-disclaimer-icon { color:var(--warning); flex-shrink:0; margin-top:2px; }
.footer-disclaimer p { font-size:13px; color:var(--text-secondary); margin:0; line-height:1.5; }
.footer-bottom {
  display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:var(--space-4);
  font-size:12px; color:var(--text-muted);
}
.footer-sources { display:flex; gap:var(--space-4); flex-wrap:wrap; }
.footer-sources a { color:var(--text-muted); }
.footer-sources a:hover { color:var(--text-secondary); text-decoration:none; }

/* ── 17. Animations ── */
@keyframes fadeInUp {
  from { opacity:0; transform:translateY(20px); }
  to   { opacity:1; transform:translateY(0); }
}
@keyframes countUp {
  from { opacity:0; transform:translateY(8px); }
  to   { opacity:1; transform:translateY(0); }
}

.fade-in-up {
  opacity:0; transform:translateY(20px);
  transition: opacity 0.5s var(--ease-out), transform 0.5s var(--ease-out);
}
.fade-in-up.visible { opacity:1; transform:translateY(0); }

/* ── 18. Responsive ── */
@media(max-width:1024px) {
  .who-grid { grid-template-columns:repeat(3,1fr); }
  .stat-grid { grid-template-columns:repeat(2,1fr); }
  .hero-stats { grid-template-columns:repeat(2,1fr); }
  .equipment-grid { grid-template-columns:repeat(3,1fr); }
  .money-grid { grid-template-columns:1fr; }
  .tier-grid { grid-template-columns:1fr; }
}
@media(max-width:768px) {
  .hero-inner { grid-template-columns:1fr; }
  .hero-icon-wrap { width:80px; height:80px; }
  .hero-icon-wrap svg { width:56px; height:56px; }
  .hero-stats { grid-template-columns:repeat(2,1fr); }
  .equipment-grid { grid-template-columns:repeat(2,1fr); }
  .who-grid { grid-template-columns:repeat(2,1fr); }
  .drawer-specs { grid-template-columns:repeat(2,1fr); }
  .next-steps-grid { grid-template-columns:1fr; }
  .calc-row-2col { grid-template-columns:1fr; }
  .specs-grid { grid-template-columns:1fr; }
  .footer-top { flex-direction:column; }
  .footer-bottom { flex-direction:column; align-items:flex-start; }
  .site-nav-links { display:none; }
  .glossary-item { flex-direction:column; gap:var(--space-2); }
  .glossary-term { min-width:unset; }
  .section-nav-inner { padding: 8px var(--space-4); }
}
@media(max-width:480px) {
  .equipment-grid { grid-template-columns:repeat(2,1fr); }
  .hero-stats { grid-template-columns:1fr 1fr; }
  .who-grid { grid-template-columns:1fr; }
  .cta-block-actions { flex-direction:column; align-items:center; }
}

/* Reduce motion */
@media(prefers-reduced-motion:reduce) {
  *, *::before, *::after { animation:none !important; transition-duration:0.01ms !important; }
}

/* Focus */
:focus-visible {
  outline:2px solid var(--cl-blue);
  outline-offset:2px;
  border-radius:var(--radius-sm);
}

/* Freight Hub specific */
.freight-hero { padding:80px 0 60px; text-align:center; }
.freight-card {
  background:var(--bg-surface); border:2px solid var(--border);
  border-radius:var(--radius-xl); padding:var(--space-8);
  transition:all var(--dur-base); text-decoration:none;
  display:block; position:relative; overflow:hidden;
}
.freight-card:hover { border-color:var(--border-strong); transform:translateY(-3px); box-shadow:var(--shadow-lg); text-decoration:none; }
.freight-card.active-card { border-color:var(--cl-blue); box-shadow:var(--cl-blue-glow); }
.freight-card-grid { display:grid; grid-template-columns:repeat(5,1fr); gap:var(--space-6); margin:var(--space-12) 0; }
.freight-card-icon { width:56px; height:56px; color:var(--text-secondary); margin-bottom:var(--space-4); }
.freight-card.active-card .freight-card-icon { color:var(--cl-blue); }
.freight-card-title { font-size:22px; font-weight:800; color:var(--text-primary); margin-bottom:var(--space-1); }
.freight-card-sub { font-size:13px; color:var(--text-muted); margin-bottom:var(--space-4); font-weight:600; text-transform:uppercase; letter-spacing:0.06em; }
.freight-card-desc { font-size:14px; color:var(--text-secondary); line-height:1.6; margin-bottom:var(--space-6); }
.freight-card-status {
  display:inline-flex; align-items:center; gap:var(--space-2);
  font-size:12px; font-weight:700; padding:4px 12px;
  border-radius:var(--radius-pill);
}
.freight-card-status.available { background:var(--cl-blue); color:#fff; }
.freight-card-status.soon { background:var(--bg-subtle); color:var(--text-muted); border:1px solid var(--border); }
@media(max-width:1024px) { .freight-card-grid { grid-template-columns:repeat(3,1fr); } }
@media(max-width:640px)  { .freight-card-grid { grid-template-columns:1fr 1fr; } }