/* ══════════════════════════════════════════════════════════════
   CarryParcels marketing site — carryparcels.com
   Every value below comes from design_system_CP_v3.md.
   Tokens: §3 color · §4 type · §5 geometry/elevation · §7 components
   ══════════════════════════════════════════════════════════════ */

/* Self-hosted variable fonts (latin is preloaded in each page's <head>;
   latin-ext — which carries the ₹ sign — loads only where it's used). */
@font-face { font-family: 'Plus Jakarta Sans'; font-style: normal; font-weight: 500 800; font-display: swap;
  src: url('../fonts/jakarta-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Plus Jakarta Sans'; font-style: normal; font-weight: 500 800; font-display: swap;
  src: url('../fonts/jakarta-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400 600; font-display: swap;
  src: url('../fonts/inter-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400 600; font-display: swap;
  src: url('../fonts/inter-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }

:root {
  /* §3.1 Brand — Emerald */
  --brand-50:  #ECFDF5; --brand-100: #D1FAE5; --brand-200: #A7F3D0;
  --brand-400: #34D399; --brand-500: #10B981; --brand-600: #059669;
  --brand-700: #047857; --brand-800: #065F46; --brand-900: #064E3B;

  /* §3.2 Neutrals — Ink */
  --ink-50:  #F6F7F9; --ink-100: #ECEEF2; --ink-200: #D8DCE4; --ink-300: #B4BAC7;
  --ink-400: #808A9D; --ink-500: #5A6478; --ink-600: #3E4759; --ink-700: #2A3141;
  --ink-800: #1C2230; --ink-900: #0F172A; --ink-950: #080C15;

  /* §3.3 Surfaces */
  --surface: #FFFFFF; --surface-canvas: #F8FAFC; --surface-subtle: #F1F5F9; --surface-inverse: #0F172A;

  /* §3.4 Semantic */
  --success: #059669; --success-bg: #ECFDF5;
  --warning: #D97706; --warning-bg: #FFFBEB;
  --danger:  #DC2626; --danger-bg:  #FEF2F2;
  --info:    #0284C7; --info-bg:    #EFF6FF;

  /* §3.5 Parcel lifecycle (closed set) */
  --status-booked: #475569; --status-pickup: #4F46E5; --status-transit: #D97706;
  --status-ofd: #0284C7; --status-delivered: #059669; --status-failed: #DC2626;

  /* §4 Typography */
  --font-display: "Plus Jakarta Sans", ui-sans-serif, system-ui, "Segoe UI", Roboto, sans-serif;
  --font-sans: Inter, ui-sans-serif, system-ui, "Segoe UI", Roboto, sans-serif;

  /* §5.1 Radius */
  --radius-sm: 6px; --radius-md: 8px; --radius-lg: 12px; --radius-xl: 16px; --radius-2xl: 24px; --radius-full: 9999px;

  /* §5.3 Elevation */
  --shadow-xs: 0 1px 2px rgba(15,23,42,.06);
  --shadow-sm: 0 2px 8px rgba(15,23,42,.06);
  --shadow-md: 0 8px 24px rgba(15,23,42,.08);
  --shadow-lg: 0 20px 48px rgba(15,23,42,.12);
  --ring: 0 0 0 3px rgba(5,150,105,.35);

  /* Theme-specific roles (light values) */
  --on-brand: #FFFFFF;                       /* text/icon on a solid --brand-600 fill */
  --wash-strong: rgba(255,255,255,.96);      /* hero scrim over photography */
  --wash-mid: rgba(255,255,255,.88);
  --wash-soft: rgba(236,253,245,.55);
  --wash-none: rgba(236,253,245,0);
  --hero-photo-opacity: .9;
  --band-bg: #0F172A;                        /* footer + CTA band: always a dark block */
  --band-text: #FFFFFF;
  --band-muted: #B4BAC7;
  --band-faint: #808A9D;
  --band-line: #1C2230;
  --band-accent: #34D399;

  --container: 1200px;
  color-scheme: light;
}

/* ── Dark theme (§10) — .dark on <html>, set from the saved preference ── */
html.dark {
  color-scheme: dark;
  --brand-50: #0C2A20; --brand-100: #10372A; --brand-200: #1A5240;
  --brand-400: #34D399; --brand-500: #34D399; --brand-600: #34D399;
  --brand-700: #6EE7B7; --brand-800: #A7F3D0; --brand-900: #D1FAE5;

  --ink-50: #1B2230;  --ink-100: #2A313E; --ink-200: #3A4252; --ink-300: #5A6478;
  --ink-400: #808A9D; --ink-500: #9AA3B2; --ink-600: #B4BAC7; --ink-700: #C7CDD9;
  --ink-800: #DDE1E8; --ink-900: #F1F4F9; --ink-950: #FFFFFF;

  --surface: #131926; --surface-canvas: #0B111C; --surface-subtle: #1B2230; --surface-inverse: #F1F4F9;

  --success: #34D399; --success-bg: #0C2A20;
  --warning: #FBBF24; --warning-bg: #2E2410;
  --danger:  #F87171; --danger-bg:  #2E1414;
  --info:    #38BDF8; --info-bg:    #0C2436;

  /* Lifecycle pills keep their hue, ~8% darker, still solid + white (§10) */
  --status-booked: #3F4A5C; --status-pickup: #4338CA; --status-transit: #B45309;
  --status-ofd: #0369A1; --status-delivered: #047857; --status-failed: #B91C1C;

  /* Dark elevation: higher-alpha shadow; borders do the rest */
  --shadow-xs: 0 1px 2px rgba(0,0,0,.40);
  --shadow-sm: 0 2px 8px rgba(0,0,0,.35);
  --shadow-md: 0 8px 24px rgba(0,0,0,.45);
  --shadow-lg: 0 20px 48px rgba(0,0,0,.55);
  --ring: 0 0 0 3px rgba(52,211,153,.40);

  --on-brand: #052E1F;
  --wash-strong: rgba(11,17,28,.94);
  --wash-mid: rgba(11,17,28,.84);
  --wash-soft: rgba(11,17,28,.55);
  --wash-none: rgba(11,17,28,0);
  --hero-photo-opacity: .45;
  --band-bg: #080C15;
  --band-line: #2A313E;
}
html.dark .cta-band { border: 1px solid var(--ink-100); }
html.dark .footer { border-top: 1px solid var(--ink-100); }
html.dark .feature-card, html.dark .audience-card, html.dark .step-card, html.dark .platform-card:not(.is-current),
html.dark .kpi-tile, html.dark .panel, html.dark .preview, html.dark .table-wrap, html.dark .faq details { border-color: var(--ink-200); }

/* Logo swap: white wordmark on dark (§2) */
.logo-dark { display: none !important; }
html.dark .logo-light { display: none !important; }
html.dark .logo-dark { display: block !important; }

/* Smooth theme switch — enabled by JS after first paint, so page load never animates */
html.theme-ready body, html.theme-ready .topnav, html.theme-ready .mobile-menu,
html.theme-ready .feature-card, html.theme-ready .audience-card, html.theme-ready .step-card,
html.theme-ready .panel, html.theme-ready .footer, html.theme-ready .page-hero {
  transition: background-color 200ms, color 200ms, border-color 200ms;
}

/* ── Page-to-page navigation ─────────────────────────────────────
   Every page opts in to cross-document view transitions, so moving between
   pages no longer tears down and repaints the whole screen (the "jump" the
   header showed on every click). The header is its own transition layer
   with no animation — it stays perfectly still while the content below
   cross-fades. Browsers without support just navigate normally. */
@view-transition { navigation: auto; }
.topnav { view-transition-name: topnav; }
::view-transition-group(topnav),
::view-transition-old(topnav),
::view-transition-new(topnav) { animation: none; }
::view-transition-old(topnav) { display: none; } /* swap the header instantly, no double-image */
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 160ms; }
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
}

/* ── Base ─────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
/* scrollbar-gutter: the scrollbar always has its space reserved, so the header
   doesn't shift sideways between short and long pages */
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; scrollbar-gutter: stable; }
body {
  margin: 0; background: var(--surface); color: var(--ink-900);
  font: 400 0.9375rem/1.6 var(--font-sans);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: var(--brand-700); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3, h4, h5 { font-family: var(--font-display); color: var(--ink-900); margin: 0; }
p { margin: 0; }
:focus-visible { outline: none; box-shadow: var(--ring); border-radius: var(--radius-md); }
/* In-page anchors land below the sticky top bar, not under it */
section[id] { scroll-margin-top: 76px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.num { font-variant-numeric: tabular-nums; }

/* Icons — Lucide sprite (§6). Color via currentColor only. */
.icon { width: 20px; height: 20px; flex-shrink: 0; stroke-width: 2; }
.icon-16 { width: 16px; height: 16px; stroke-width: 2.25; }
.icon-24 { width: 24px; height: 24px; }
.icon-32 { width: 32px; height: 32px; stroke-width: 1.75; }

.container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 24px; }
.section { padding: 64px 0; }
.section-canvas { background: var(--surface-canvas); }
@media (min-width: 1024px) { .section { padding: 96px 0; } }

/* §4.1 type scale */
.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font: 700 0.75rem/1.3 var(--font-display); text-transform: uppercase; letter-spacing: .08em;
  color: var(--brand-700);
}
.eyebrow::before { content: ""; width: 20px; height: 2px; background: var(--brand-600); }
.display { font-size: clamp(2rem, 1.3rem + 3.4vw, 3.5rem); line-height: 1.05; font-weight: 800; letter-spacing: -0.02em; }
.h1 { font-size: clamp(1.75rem, 1.4rem + 1.7vw, 2.5rem); line-height: 1.1; font-weight: 800; letter-spacing: -0.02em; }
.h2 { font-size: clamp(1.5rem, 1.3rem + 1vw, 2rem); line-height: 1.15; font-weight: 700; letter-spacing: -0.01em; }
.h4 { font-size: 1.25rem; line-height: 1.25; font-weight: 700; }
.h5 { font-size: 1.125rem; line-height: 1.3; font-weight: 600; }
.lead { font-size: 1.0625rem; line-height: 1.6; color: var(--ink-600); }
.muted { color: var(--ink-500); }
.accent { color: var(--brand-600); }

.section-head { max-width: 680px; margin-bottom: 48px; }
.section-head.center { margin-left: auto; margin-right: auto; text-align: center; }
.section-head.center .eyebrow { justify-content: center; }
.section-head .h2 { margin: 12px 0 12px; }

/* ── §7.1 Buttons ─────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 44px; padding: 0 20px;
  font: 600 0.9375rem/1 var(--font-display);
  border-radius: var(--radius-md); border: 1px solid transparent; cursor: pointer;
  transition: background 150ms, box-shadow 150ms, border-color 150ms, color 150ms;
  text-decoration: none; white-space: nowrap;
}
.btn:hover { text-decoration: none; }
.btn:focus-visible { box-shadow: var(--ring); }
.btn-lg { height: 48px; padding: 0 24px; font-size: 1rem; }
.btn-sm { height: 36px; padding: 0 12px; font-size: 0.875rem; }
.btn-block { width: 100%; }
.btn-primary { background: var(--brand-600); color: var(--on-brand); }
.btn-primary:hover { background: var(--brand-700); }
.btn-secondary { background: var(--ink-900); color: #fff; }
.btn-secondary:hover { background: var(--ink-800); }
.btn-outline { background: transparent; color: var(--ink-800); border-color: var(--ink-200); }
.btn-outline:hover { background: var(--ink-50); border-color: var(--ink-300); }
.btn-outline-inverse { background: transparent; color: #fff; border-color: rgba(255,255,255,.4); }
.btn-outline-inverse:hover { border-color: #fff; background: rgba(255,255,255,.08); }
.btn-ghost { background: transparent; color: var(--ink-600); }
.btn-ghost:hover { background: var(--ink-50); color: var(--ink-900); }

/* ── Top nav — mirrors the agent portal .cp-topnav ───────────── */
.topnav {
  position: sticky; top: 0; z-index: 50;
  background: var(--surface); border-bottom: 1px solid var(--ink-100);
}
.topnav-inner { height: 68px; display: flex; align-items: center; gap: 24px; }
.logo { display: flex; align-items: center; flex-shrink: 0; }
/* width/height attributes on the <img> reserve the logo's space before it loads, so
   the nav links don't jump right when it appears; CSS sets the displayed size */
.logo img { height: 40px; width: auto; aspect-ratio: 640 / 155; }
.nav-links { display: flex; gap: 8px; flex: 1; margin-left: 16px; }
.nav-link {
  white-space: nowrap;
  padding: 8px 14px; border-radius: var(--radius-md);
  font: 600 0.875rem var(--font-display); color: var(--ink-600);
  transition: background 150ms, color 150ms;
}
.nav-link:hover { background: var(--brand-50); color: var(--ink-900); text-decoration: none; }
.nav-link.active { background: var(--brand-600); color: var(--on-brand); }
.nav-end { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.nav-toggle {
  display: none; width: 44px; height: 44px; border-radius: var(--radius-full);
  border: 1px solid var(--ink-200); background: transparent; color: var(--ink-700);
  align-items: center; justify-content: center; cursor: pointer;
}
.mobile-menu { display: none; border-top: 1px solid var(--ink-100); background: var(--surface); padding: 8px 16px 16px; }
.mobile-menu a.nav-link { display: flex; align-items: center; gap: 10px; padding: 12px; }
.mobile-menu .btn { margin-top: 8px; }
.mobile-menu.open { display: block; }

/* Theme toggle — mirrors the agent portal's .cp-icon-btn */
.theme-toggle {
  width: 40px; height: 40px; border-radius: var(--radius-full); flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
  background: transparent; border: 1px solid var(--ink-200); color: var(--ink-500);
  transition: background 150ms, color 150ms, border-color 150ms;
}
.theme-toggle:hover { background: var(--ink-50); color: var(--ink-900); }

@media (max-width: 1140px) {
  .theme-toggle { width: 44px; height: 44px; }
  .nav-links, .nav-end .btn-outline { display: none; }
  .nav-toggle { display: inline-flex; }
  .nav-end { margin-left: auto; }
  .topnav-inner { height: 64px; }
  .logo img { height: 34px; }
}
@media (max-width: 480px) {
  .container { padding: 0 16px; }
  .nav-end .btn-primary { display: none; }
}

/* ── Hero ────────────────────────────────────────────────────── */
.hero {
  position: relative; overflow: hidden;
  background-color: var(--brand-50);
  padding: 80px 0 96px;
}
.hero::before, .hero::after { content: ""; position: absolute; inset: 0; pointer-events: none; }
.hero::before {
  background: url('../img/hero-rail.jpg') center bottom / cover no-repeat;
  opacity: var(--hero-photo-opacity);
}
/* Same radial white/mint wash as the login page — strongest behind the copy */
.hero::after {
  background: radial-gradient(ellipse 70% 85% at 22% 45%,
    var(--wash-strong) 0%, var(--wash-mid) 38%,
    var(--wash-soft) 62%, var(--wash-none) 85%);
}
.hero .container { position: relative; z-index: 1; }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 48px; align-items: center; }
.hero-copy .display { margin: 16px 0 20px; }
.hero-copy .lead { max-width: 540px; color: var(--ink-700); }
.hero-ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.hero-points { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-top: 28px; }
.hero-points span { display: inline-flex; align-items: center; gap: 6px; font: 600 0.875rem var(--font-display); color: var(--ink-700); }
.hero-points .icon-16 { color: var(--brand-600); }
@media (min-width: 1024px) { .hero { padding: 128px 0 128px; } }
@media (max-width: 960px) {
  .hero-grid { grid-template-columns: minmax(0, 1fr); }
  .hero::before { background-image: url('../img/hero-rail-mobile.jpg'); background-position: center bottom; opacity: .55; }
  .hero::after { background: linear-gradient(180deg, var(--wash-strong) 0%, var(--wash-mid) 60%, var(--wash-soft) 100%); }
}

/* Page hero (inner pages) */
/* Same height on every inner page, so the art (scaled to the hero's height)
   keeps the same size and position, and the copy stays top-aligned and
   doesn't jump when moving between pages. */
.page-hero { position: relative; background: var(--brand-50); border-bottom: 1px solid var(--ink-100); overflow: hidden; min-height: 400px; }
.page-hero::before {
  content: ""; position: absolute; inset: 0;
  background: url('../img/route-band.png') right bottom / auto 100% no-repeat;
  /* Never stretch the art past its native 368px height — upscaling is what made it look soft */
  background-size: auto min(100%, 368px);
}
.page-hero .container { position: relative; padding-top: 64px; padding-bottom: 64px; }
.page-hero .breadcrumb { font-size: 0.875rem; color: var(--ink-500); margin-bottom: 16px; }
.page-hero .breadcrumb a { color: var(--ink-600); }
.page-hero .h1 { max-width: 640px; margin: 12px 0 12px; }
.page-hero .lead { max-width: 560px; }
@media (max-width: 900px) { .page-hero::before { opacity: .25; } }

/* ── Dashboard preview (mirrors agent dashboard, §9) ─────────── */
.preview {
  background: var(--surface); border: 1px solid var(--ink-100);
  border-radius: var(--radius-xl); box-shadow: var(--shadow-lg); overflow: hidden;
}
.preview-bar {
  display: flex; align-items: center; gap: 12px; height: 48px; padding: 0 16px;
  border-bottom: 1px solid var(--ink-100); background: var(--surface);
}
.preview-bar img { height: 22px; }
.preview-tabs { display: flex; gap: 4px; margin-left: 8px; }
.preview-tabs span { padding: 4px 10px; border-radius: var(--radius-md); font: 600 0.75rem var(--font-display); color: var(--ink-500); }
.preview-tabs span.on { background: var(--brand-600); color: var(--on-brand); }
.preview-avatar { margin-left: auto; width: 28px; height: 28px; border-radius: var(--radius-full); background: var(--brand-600); color: var(--on-brand); display: flex; align-items: center; justify-content: center; font: 700 0.6875rem var(--font-display); }
.preview-body { padding: 16px; background: var(--surface-canvas); }
.kpi-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-bottom: 12px; }
.kpi-tile {
  background: var(--surface); border: 1px solid var(--ink-100); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm); padding: 14px; display: flex; flex-direction: column; gap: 8px;
}
.kpi-icon { width: 32px; height: 32px; border-radius: var(--radius-md); background: var(--brand-50); color: var(--brand-700); display: flex; align-items: center; justify-content: center; }
.kpi-icon.tone-warning { background: var(--warning-bg); color: var(--warning); }
.kpi-icon.tone-info { background: var(--info-bg); color: var(--info); }
.kpi-value { font: 700 1.375rem/1.1 var(--font-display); color: var(--ink-900); font-variant-numeric: tabular-nums; }
.kpi-label { font: 700 0.6875rem/1.3 var(--font-display); text-transform: uppercase; letter-spacing: .06em; color: var(--ink-500); }

/* §8 tables */
.table-wrap { background: var(--surface); border: 1px solid var(--ink-100); border-radius: var(--radius-lg); overflow-x: auto; box-shadow: var(--shadow-sm); }
table.cp-table { width: 100%; border-collapse: collapse; }
.cp-table th {
  text-align: left; font: 700 0.6875rem/1.3 var(--font-display); text-transform: uppercase; letter-spacing: .06em;
  color: var(--ink-500); padding: 10px 12px; background: var(--surface-subtle); border-bottom: 1.5px solid var(--ink-100);
}
.cp-table td { padding: 12px; font-size: 0.8125rem; color: var(--ink-700); border-bottom: 1px solid var(--ink-100); white-space: nowrap; }
.cp-table tr:last-child td { border-bottom: 0; }
.cp-table tbody tr:hover { background: var(--surface-canvas); }
.cp-table .r { text-align: right; font-variant-numeric: tabular-nums; }
.cp-table .id { font-weight: 600; color: var(--ink-900); font-variant-numeric: tabular-nums; }

/* §7.5 status pills — closed set */
.status-pill {
  display: inline-flex; align-items: center; height: 24px; padding: 0 10px;
  border-radius: var(--radius-full); font: 700 0.75rem var(--font-display); color: #fff; white-space: nowrap;
}
.status-booked { background: var(--status-booked); }
.status-pickup { background: var(--status-pickup); }
.status-transit { background: var(--status-transit); }
.status-ofd { background: var(--status-ofd); }
.status-delivered { background: var(--status-delivered); }
.status-failed { background: var(--status-failed); }

.badge {
  display: inline-flex; align-items: center; height: 20px; padding: 0 8px; border-radius: var(--radius-full);
  font: 700 0.6875rem var(--font-display); text-transform: uppercase; letter-spacing: .04em;
  background: var(--brand-50); color: var(--brand-800);
}

/* ── Cards (§7.3) ─────────────────────────────────────────────── */
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
@media (max-width: 1024px) {
  .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* 3 cards in a 2-column row: let the odd one out span the row instead of sitting half-width */
  .grid-3 > :last-child:nth-child(odd) { grid-column: 1 / -1; }
}
@media (max-width: 640px) { .grid-2, .grid-3, .grid-4 { grid-template-columns: minmax(0, 1fr); } }

.feature-card, .audience-card, .step-card, .platform-card, .contact-card {
  background: var(--surface); border: 1px solid var(--ink-100); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm); padding: 24px;
  transition: box-shadow 150ms, transform 150ms, border-color 150ms;
}
.feature-card:hover, .audience-card:hover, .platform-card:hover {
  border-color: var(--ink-200); box-shadow: var(--shadow-md); transform: translateY(-2px);
}
.card-icon {
  width: 44px; height: 44px; border-radius: var(--radius-md); margin-bottom: 16px;
  background: var(--brand-50); color: var(--brand-700); display: flex; align-items: center; justify-content: center;
}
.feature-card h3, .audience-card h3, .step-card h3, .contact-card h3 { font-size: 1.125rem; font-weight: 700; margin-bottom: 8px; }
.feature-card p, .audience-card p, .step-card p, .contact-card p { font-size: 0.875rem; color: var(--ink-500); line-height: 1.55; }

.check-list { list-style: none; padding: 0; margin: 16px 0 0; display: grid; gap: 10px; }
.check-list li { display: flex; gap: 10px; font-size: 0.875rem; color: var(--ink-700); }
.check-list .icon-16 { color: var(--brand-600); margin-top: 3px; }

/* Steps */
.steps { counter-reset: step; }
.step-card { position: relative; }
.step-num {
  width: 32px; height: 32px; border-radius: var(--radius-full); background: var(--brand-600); color: var(--on-brand);
  font: 700 0.875rem var(--font-display); display: flex; align-items: center; justify-content: center; margin-bottom: 16px;
}

/* Split feature rows */
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: center; }
.split + .split { margin-top: 80px; }
.split.reverse .split-media { order: -1; }
.split-copy .h2 { margin: 12px 0 12px; }
@media (max-width: 900px) { .split { grid-template-columns: minmax(0, 1fr); gap: 32px; } .split.reverse .split-media { order: 0; } .split + .split { margin-top: 56px; } }

.panel { background: var(--surface); border: 1px solid var(--ink-100); border-radius: var(--radius-xl); box-shadow: var(--shadow-md); padding: 20px; }
.panel-title { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.panel-title h4 { font-size: 1rem; font-weight: 700; }

/* Form fields (§7.2) used in mock panels and contact form */
.field { margin-bottom: 16px; }
.field label { display: block; font: 600 0.875rem var(--font-display); color: var(--ink-700); margin-bottom: 6px; }
.field .req { color: var(--danger); }
.input, select.input, textarea.input {
  width: 100%; height: 44px; padding: 0 14px; font: 400 0.9375rem var(--font-sans); color: var(--ink-900);
  background: var(--surface); border: 1.5px solid var(--ink-200); border-radius: var(--radius-md);
  transition: border-color 150ms, box-shadow 150ms;
}
textarea.input { height: auto; min-height: 120px; padding: 12px 14px; resize: vertical; }
.input::placeholder { color: var(--ink-300); }
.input:focus { outline: none; border-color: var(--brand-600); box-shadow: var(--ring); }
.field.field-error .input { border-color: var(--danger); background: var(--danger-bg); }
.field-msg { display: none; font-size: 0.8125rem; color: var(--danger); margin-top: 6px; }
.field.field-error .field-msg { display: block; }
.input-wrap { position: relative; }
.input-wrap .icon { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--ink-400); }
.input-wrap .input { padding-left: 40px; }
.mock-field { height: 40px; display: flex; align-items: center; gap: 8px; padding: 0 12px; border: 1.5px solid var(--ink-200); border-radius: var(--radius-md); font-size: 0.875rem; color: var(--ink-800); background: var(--surface); }
.mock-field .icon-16 { color: var(--ink-400); }
.mock-label { font: 600 0.75rem var(--font-display); color: var(--ink-500); margin-bottom: 4px; }
.mock-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 10px; }

/* Commission breakdown */
.ledger { display: grid; gap: 0; }
.ledger div { display: flex; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid var(--ink-100); font-size: 0.875rem; color: var(--ink-600); }
.ledger div span:last-child { font-variant-numeric: tabular-nums; color: var(--ink-900); font-weight: 600; }
.ledger div.total { border-bottom: 0; font-weight: 700; }
.ledger div.total span { color: var(--brand-700); font-family: var(--font-display); font-size: 1rem; }

/* Tracking timeline */
.timeline { list-style: none; margin: 0; padding: 0; }
.timeline li { position: relative; display: flex; gap: 14px; padding-bottom: 18px; }
.timeline li:last-child { padding-bottom: 0; }
.timeline li::before { content: ""; position: absolute; left: 13px; top: 28px; bottom: 0; width: 2px; background: var(--ink-100); }
.timeline li:last-child::before { display: none; }
.tl-dot { width: 28px; height: 28px; border-radius: var(--radius-full); display: flex; align-items: center; justify-content: center; color: #fff; flex-shrink: 0; position: relative; z-index: 1; }
.tl-dot.pending { background: var(--surface); border: 2px solid var(--ink-200); color: var(--ink-300); }
.tl-title { font: 600 0.875rem var(--font-display); color: var(--ink-900); }
.tl-meta { font-size: 0.75rem; color: var(--ink-500); font-variant-numeric: tabular-nums; }

/* Ecosystem */
.platform-card { display: flex; flex-direction: column; }
.platform-card .badge { align-self: flex-start; margin-bottom: 16px; }
.platform-card h3 { font-size: 1.25rem; font-weight: 700; margin-bottom: 4px; }
.platform-card .for { font: 600 0.875rem var(--font-display); color: var(--ink-500); margin-bottom: 12px; }
.platform-card p { font-size: 0.875rem; color: var(--ink-600); }
.platform-card .check-list { margin-bottom: 20px; }
.platform-card .platform-link { margin-top: auto; display: inline-flex; align-items: center; gap: 6px; font: 600 0.875rem var(--font-display); }
.platform-card.is-current { border: 1.5px solid var(--brand-600); box-shadow: var(--shadow-md); }

.flow { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; gap: 16px; align-items: center; }
.flow-node { background: var(--surface); border: 1px solid var(--ink-100); border-radius: var(--radius-lg); padding: 20px; text-align: center; box-shadow: var(--shadow-sm); }
.flow-node .card-icon { margin: 0 auto 12px; }
.flow-node h4 { font-size: 1rem; font-weight: 700; margin-bottom: 4px; }
.flow-node p { font-size: 0.8125rem; color: var(--ink-500); }
.flow-node.is-current { border-color: var(--brand-600); background: var(--brand-50); }
.flow-arrow { color: var(--ink-300); }
@media (max-width: 900px) { .flow { grid-template-columns: 1fr; } .flow-arrow { justify-self: center; transform: rotate(90deg); } }

/* FAQ */
.faq { max-width: 820px; margin: 0 auto; display: grid; gap: 12px; }
.faq details { background: var(--surface); border: 1px solid var(--ink-100); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); }
.faq summary {
  list-style: none; cursor: pointer; padding: 18px 20px; display: flex; align-items: center; justify-content: space-between; gap: 16px;
  font: 600 1rem var(--font-display); color: var(--ink-900);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary .icon { color: var(--ink-400); transition: transform 150ms; }
.faq details[open] summary .icon { transform: rotate(90deg); color: var(--brand-600); }
.faq .answer { padding: 0 20px 20px; font-size: 0.9375rem; color: var(--ink-600); }

/* CTA band */
.cta-band { background: var(--band-bg); color: var(--band-text); border-radius: var(--radius-2xl); padding: 56px; display: grid; grid-template-columns: 1fr auto; gap: 32px; align-items: center; }
.cta-band .h2 { color: var(--band-text); }
.cta-band p { color: var(--band-muted); margin-top: 10px; max-width: 560px; }
.cta-band .eyebrow { color: var(--band-accent); }
.cta-band .eyebrow::before { background: var(--band-accent); }
.cta-actions { display: flex; gap: 12px; flex-wrap: wrap; }
@media (max-width: 900px) { .cta-band { grid-template-columns: 1fr; padding: 32px 24px; } }

/* Strip of facts */
.fact-strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border: 1px solid var(--ink-100); border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow-sm); }
.fact { padding: 24px; display: flex; gap: 14px; align-items: flex-start; }
.fact + .fact { border-left: 1px solid var(--ink-100); }
.fact .icon-24 { color: var(--brand-600); margin-top: 2px; }
.fact strong { display: block; font: 700 0.9375rem var(--font-display); color: var(--ink-900); }
.fact span { font-size: 0.8125rem; color: var(--ink-500); }
@media (max-width: 1100px) { .fact-strip { grid-template-columns: 1fr 1fr; } .fact:nth-child(3) { border-left: 0; } .fact:nth-child(n+3) { border-top: 1px solid var(--ink-100); } }
@media (max-width: 560px) { .fact-strip { grid-template-columns: 1fr; } .fact + .fact { border-left: 0; border-top: 1px solid var(--ink-100); } }

/* Lifecycle row */
.lifecycle { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.lifecycle .icon-16 { color: var(--ink-300); }

/* Track page */
.track-card { max-width: 560px; margin: -48px auto 0; position: relative; z-index: 2; background: var(--surface); border: 1px solid var(--ink-100); border-radius: var(--radius-xl); box-shadow: var(--shadow-lg); padding: 32px; }
.track-row { display: flex; gap: 12px; }
.track-row .input-wrap { flex: 1; }
@media (max-width: 560px) { .track-row { flex-direction: column; } .track-card { padding: 24px 20px; } }

/* Contact */
.contact-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: 32px; align-items: start; }
@media (max-width: 900px) { .contact-grid { grid-template-columns: minmax(0, 1fr); } }
.contact-list { display: grid; gap: 16px; }
.contact-card { display: flex; gap: 16px; align-items: flex-start; padding: 20px; }
.contact-card .card-icon { margin-bottom: 0; }
.form-note { font-size: 0.8125rem; color: var(--ink-500); margin-top: 12px; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
@media (max-width: 560px) { .form-grid { grid-template-columns: 1fr; } }
.notice { display: none; gap: 10px; align-items: flex-start; background: var(--success-bg); color: var(--brand-800); border-radius: var(--radius-lg); padding: 14px 16px; font-size: 0.875rem; margin-top: 16px; }
.notice.show { display: flex; }

/* ── Footer ──────────────────────────────────────────────────── */
.footer { background: var(--band-bg); color: var(--band-muted); padding: 64px 0 32px; margin-top: 0; }
.footer-grid { display: grid; gap: 32px; }
.footer-logo { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 16px; }
.footer-logo img { height: 36px; width: 36px; border-radius: var(--radius-md); background: #fff; padding: 4px; }
.footer-logo span { font: 800 1.25rem var(--font-display); color: var(--band-text); }
.footer-logo span em { font-style: normal; color: var(--brand-400); }
.footer p { font-size: 0.875rem; color: var(--band-muted); max-width: 320px; }
.footer h4 { font: 700 0.75rem var(--font-display); text-transform: uppercase; letter-spacing: .08em; color: var(--band-text); margin-bottom: 16px; }
.footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.footer a { color: var(--band-muted); font-size: 0.875rem; }
.footer a:hover { color: var(--band-text); }
.footer-bottom { border-top: 1px solid var(--band-line); margin-top: 48px; padding-top: 24px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; font-size: 0.8125rem; color: var(--band-faint); }

/* Mobile spacing */
@media (max-width: 640px) {
  .section { padding: 56px 0; }
  .section-head { margin-bottom: 32px; }
  .hero { padding: 48px 0 64px; }
  .hero-ctas .btn { flex: 1 1 100%; }
  .kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kpi-grid .kpi-tile:nth-child(3) { display: none; }
  .page-hero { min-height: 0; }
  .page-hero .container { padding-top: 40px; padding-bottom: 136px; } /* room for the art band below the copy */
}

/* ── Legal pages (Terms, Privacy) ────────────────────────────── */
.legal-grid { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 48px; align-items: start; }
.legal-toc {
  position: sticky; top: 92px; background: var(--surface); border: 1px solid var(--ink-100);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); padding: 16px;
}
.legal-toc h2 { font: 700 0.75rem/1.3 var(--font-display); text-transform: uppercase; letter-spacing: .08em; color: var(--ink-500); margin-bottom: 10px; }
.legal-toc ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.legal-toc a { display: block; padding: 6px 10px; border-radius: var(--radius-md); font: 600 0.8125rem/1.4 var(--font-display); color: var(--ink-600); }
.legal-toc a:hover { background: var(--brand-50); color: var(--ink-900); text-decoration: none; }
.legal-toc a.active { background: var(--brand-50); color: var(--brand-700); box-shadow: inset 3px 0 0 var(--brand-600); }
.legal-switch { display: flex; gap: 8px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--ink-100); }
.legal-body { max-width: 760px; }
.legal-body .intro { font-size: 1.0625rem; color: var(--ink-700); }
.legal-body section { padding-top: 32px; scroll-margin-top: 84px; }
.legal-body h2 { font-size: 1.25rem; font-weight: 700; line-height: 1.25; margin-bottom: 12px; }
.legal-body h3 { font-size: 1rem; font-weight: 700; margin: 20px 0 8px; color: var(--ink-800); }
.legal-body p, .legal-body li { font-size: 0.9375rem; color: var(--ink-600); }
.legal-body p + p { margin-top: 12px; }
.legal-body ul { margin: 10px 0 0; padding-left: 20px; display: grid; gap: 8px; }
.legal-body li::marker { color: var(--brand-600); }
.legal-body strong { color: var(--ink-800); }
.legal-meta { display: inline-flex; align-items: center; gap: 6px; margin-top: 16px; font-size: 0.875rem; color: var(--ink-500); }
.legal-callout { margin-top: 24px; background: var(--brand-50); border: 1px solid var(--brand-200); border-radius: var(--radius-lg); padding: 16px 20px; font-size: 0.875rem; color: var(--brand-800); }
.legal-address { margin-top: 12px; background: var(--surface-canvas); border: 1px solid var(--ink-100); border-radius: var(--radius-lg); padding: 16px 20px; font-style: normal; font-size: 0.9375rem; color: var(--ink-700); }
@media (max-width: 960px) {
  .legal-grid { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .legal-toc { position: static; }
}
.footer-bottom nav { display: flex; gap: 16px; flex-wrap: wrap; }
.footer-bottom nav a { font-size: 0.8125rem; color: var(--band-faint); }
.footer-grid { grid-template-columns: 1.6fr 1fr 1fr 1fr; }
@media (max-width: 1024px) { .footer-grid { grid-template-columns: 1fr 1fr 1fr; } .footer-grid > div:first-child { grid-column: 1 / -1; } }
@media (max-width: 560px) { .footer-grid { grid-template-columns: 1fr 1fr; } }

/* ── Responsive refinements ──────────────────────────────────── */
.panel-lg { padding: 32px; }
/* Inner-page hero art: fade it out behind the copy once the art and the text start to overlap */
@media (max-width: 1140px) {
  .page-hero::before {
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, transparent 35%, #000 80%);
            mask-image: linear-gradient(90deg, transparent 0%, transparent 35%, #000 80%);
  }
}
@media (max-width: 640px) {
  /* Phones: art becomes a band along the bottom, below the copy instead of behind it */
  .page-hero::before {
    background-position: right bottom; background-size: auto 120px;
    opacity: .6; -webkit-mask-image: none; mask-image: none;
  }

  /* Tables inside mock panels: fit the screen instead of scrolling sideways */
  table.cp-table { min-width: 0; }
  .cp-table th, .cp-table td { padding: 10px 8px; }
  .cp-table th:first-child, .cp-table td:first-child { padding-left: 12px; }
  .cp-table th:last-child, .cp-table td:last-child { padding-right: 12px; }
  .cp-table .hide-sm { display: none; }
  .preview-body { padding: 12px; }
  .preview-tabs { margin-left: 4px; }
  .panel, .panel-lg { padding: 16px; }
}
@media (max-width: 480px) {
  .preview-tabs span:not(.on) { display: none; }
  .mock-row { grid-template-columns: minmax(0, 1fr); }
  .cp-table td { font-size: 0.75rem; }
  .cp-table .hide-xs { display: none; }
  .status-pill { height: 22px; padding: 0 8px; font-size: 0.6875rem; }
  .cta-actions .btn { flex: 1 1 100%; }
  .footer-grid { gap: 28px 16px; }
  .footer a[href^="mailto:"] { word-break: break-all; }
}
/* Hero preview sits in a narrow column just before the grid stacks */
@media (min-width: 961px) and (max-width: 1180px) {
  .hero .cp-table .hide-sm { display: none; }
  .hero .cp-table th, .hero .cp-table td { padding-left: 10px; padding-right: 10px; }
}
@media (max-width: 400px) {
  .cp-table th, .cp-table td { padding: 8px 6px; }
  .cp-table th:first-child, .cp-table td:first-child { padding-left: 10px; }
  .cp-table th:last-child, .cp-table td:last-child { padding-right: 10px; }
  .cp-table td { white-space: normal; }
  .cp-table th { font-size: 0.625rem; }
}

/* ── Inner-page hero in dark mode ────────────────────────────────
   The route-band art is a light image; just fading it on a dark hero left a
   muddy grey-green block (a hard-edged box on phones). Instead, invert it
   (light paper → near-black, green → green) and screen-blend it, so its
   background disappears and only the pins, route and lettering glow. */
html.dark .page-hero {
  background: linear-gradient(115deg, var(--surface-canvas) 0%, var(--surface) 45%, var(--brand-50) 100%);
}
html.dark .page-hero::before {
  filter: invert(1) hue-rotate(180deg) saturate(1.3);
  mix-blend-mode: screen;
  opacity: .55;
}
@media (max-width: 900px) { html.dark .page-hero::before { opacity: .4; } }
@media (max-width: 640px) { html.dark .page-hero::before { opacity: .6; } }
/* The art stops at its native 368px height, so on a taller hero its top edge
   would show as a faint band against the dark gradient — fade it in instead. */
html.dark .page-hero::before {
  -webkit-mask-image: linear-gradient(180deg, transparent 32px, #000 120px);
          mask-image: linear-gradient(180deg, transparent 32px, #000 120px);
}
@media (max-width: 1140px) {
  html.dark .page-hero::before {
    -webkit-mask-image: linear-gradient(90deg, transparent 35%, #000 80%), linear-gradient(180deg, transparent 32px, #000 120px);
    -webkit-mask-composite: source-in;
            mask-image: linear-gradient(90deg, transparent 35%, #000 80%), linear-gradient(180deg, transparent 32px, #000 120px);
            mask-composite: intersect;
  }
}
@media (max-width: 640px) {
  html.dark .page-hero::before {
    -webkit-mask-image: linear-gradient(180deg, transparent calc(100% - 124px), #000 calc(100% - 64px));
            mask-image: linear-gradient(180deg, transparent calc(100% - 124px), #000 calc(100% - 64px));
  }
}