/* Generated by scripts/sync-ds.js. Do not edit — edit _ds/tokens/*.css
   and re-run `npm run sync:ds`. Source order is Base.astro's cascade order. */
@import url("https://fonts.googleapis.com/css2?family=Archivo:ital,wdth,wght@0,62..125,100..900;1,62..125,100..900&family=Inter:wght@400;500;600;700;800&family=IBM+Plex+Mono:wght@400;500;600;700&family=Roboto:wght@400;500&family=Flow+Circular&display=swap");

/* --- _ds/tokens/fonts.css --- */
/* Webfonts.
   The app loads Inter and IBM Plex Mono via next/font (--font-inter,
   --font-plex-mono). Here they come from the Google CDN so the
   specimen cards and kits render standalone.
   Archivo is a SUBSTITUTION — see readme.md "Font substitution". */

/* --- _ds/tokens/colors.css --- */
/* ============================================================
   MANUVA — BASE PALETTE (raw values, theme-independent)
   Semantic tokens live in themes.css and use the SHIPPED token
   names from src/app/globals.css (--bg-card, --ink-strong, …).
   ============================================================ */
:root{
  /* --- Graphite: warm neutral ramp, anchored on the logo ink #141413.
         Replaces the shipped slate ramp (#0F172A / #F8FAFC / #475569). --- */
  --graphite-0:#FFFFFF;
  --graphite-25:#FAFAF9;
  --graphite-50:#F5F5F3;
  --graphite-100:#EBEBE8;
  --graphite-150:#DEDEDA;
  --graphite-200:#CFCFC9;
  --graphite-300:#B4B4AD;
  --graphite-400:#92928A;
  --graphite-500:#74746C;
  --graphite-600:#5A5A53;
  --graphite-700:#42423C;
  --graphite-800:#2C2C28;
  --graphite-900:#1E1E1B;
  --graphite-950:#141413;
  --graphite-1000:#0A0A09;

  /* --- Navy: the logo's own colour, #15314D. Adopted at the DARK END only
         (sidebar, ink surfaces, inverted panels). Mid and light greys stay
         warm graphite — see readme.md "The colour argument". --- */
  --navy-950:#08121E;
  --navy-900:#0E1B2C;
  --navy-800:#15314D;   /* the logo navy */
  --navy-700:#1E4066;
  --navy-600:#2A5580;

  /* --- Cobalt: the brand hue, pushed brighter so it separates from the
         navy substrate. --brand-2 (#1E36DB) remains the AA-safe text value. --- */
  --cobalt-50:#EDF0FF;
  --cobalt-100:#DBE1FF;
  --cobalt-200:#B8C3FF;
  --cobalt-300:#8B9BFF;
  --cobalt-400:#6A83FF;
  --cobalt-500:#3A5EFF;
  --cobalt-600:#1E36DB;
  --cobalt-700:#1728A8;
  --cobalt-800:#131F7A;
  --cobalt-900:#101A55;

  /* --- Substrates for the Ocean and Ember themes --- */
  --sea-700:#122536;  --sea-800:#0E1C2B;  --sea-900:#0A1521;  --sea-950:#060E17;
  --forge-700:#332017;--forge-800:#26170F;--forge-900:#1B0F0A;--forge-950:#120907;

  /* ============================================================
     DOMAIN ACCENTS — ADDITION to the shipped token set.
     One accent per product module, matched chroma, evenly spaced
     hues. Three values each: -loud (fill), -text (AA on light),
     -dark (AA on dark).
     ============================================================ */
  --domain-inventory-loud:#3A5EFF;  --domain-inventory-text:#1E36DB;  --domain-inventory-dark:#8B9BFF;
  --domain-production-loud:#FF4D00; --domain-production-text:#C43900; --domain-production-dark:#FF8A4D;
  --domain-purchasing-loud:#FFB300; --domain-purchasing-text:#8A5A00; --domain-purchasing-dark:#FFC94D;
  --domain-products-loud:#B026FF;   --domain-products-text:#8B1BCC;   --domain-products-dark:#D08CFF;
  --domain-logistics-loud:#00C271;  --domain-logistics-text:#00794A;  --domain-logistics-dark:#3EE39B;
  --domain-audit-loud:#00B9D6;      --domain-audit-text:#00707F;      --domain-audit-dark:#4FDDF2;
}

/* Scope a subtree to a module: <div data-domain="production">.
   Components read --accent-loud / --accent-text / --accent-dim / --accent-on.
   --accent-on is the ink that clears AA on a solid --accent-loud fill:
   white on the blues/orange/violet, #141413 on amber, mint and aqua. */
[data-domain]{--accent-loud:var(--brand-1);--accent-text:light-dark(var(--cobalt-600),var(--cobalt-300));--accent-dim:var(--brand-dim);--accent-on:#FFFFFF}
[data-domain="inventory"]{--accent-loud:var(--domain-inventory-loud);--accent-text:light-dark(var(--domain-inventory-text),var(--domain-inventory-dark));--accent-dim:rgb(58 94 255/.12);--accent-on:#FFFFFF}
[data-domain="production"]{--accent-loud:var(--domain-production-loud);--accent-text:light-dark(var(--domain-production-text),var(--domain-production-dark));--accent-dim:rgb(255 77 0/.12);--accent-on:#FFFFFF}
[data-domain="purchasing"]{--accent-loud:var(--domain-purchasing-loud);--accent-text:light-dark(var(--domain-purchasing-text),var(--domain-purchasing-dark));--accent-dim:rgb(255 179 0/.14);--accent-on:#141413}
[data-domain="products"]{--accent-loud:var(--domain-products-loud);--accent-text:light-dark(var(--domain-products-text),var(--domain-products-dark));--accent-dim:rgb(176 38 255/.12);--accent-on:#FFFFFF}
[data-domain="logistics"]{--accent-loud:var(--domain-logistics-loud);--accent-text:light-dark(var(--domain-logistics-text),var(--domain-logistics-dark));--accent-dim:rgb(0 194 113/.12);--accent-on:#141413}
[data-domain="audit"]{--accent-loud:var(--domain-audit-loud);--accent-text:light-dark(var(--domain-audit-text),var(--domain-audit-dark));--accent-dim:rgb(0 185 214/.12);--accent-on:#141413}

/* --- _ds/tokens/themes.css --- */
/* ============================================================
   SEMANTIC TOKENS — token NAMES are the shipped ones from
   src/app/globals.css. Only the VALUES have moved: slate → warm
   graphite, indigo → cobalt.
   Four themes: Daylight (default), Midnight, Ocean, Ember.
   Apply with <html data-theme="midnight">.
   ============================================================ */

/* ── Theme: Daylight (default) ───────── */
:root,
[data-theme="daylight"]{
  --bg-page:     #F5F5F3;   /* was #F8FAFC */
  --bg-sidebar:  #0E1B2C;   /* navy — matches the shipped app */
  --bg-card:     #FFFFFF;
  --bg-card-2:   #DEDEDA;   /* was #E2E8F0 */
  --bg-card-alt: #FAFAF9;   /* was #F1F5F9 */
  --bg-input:    #F5F5F3;   /* was #F1F5F9 */
  --bg-ink:      #15314D;   /* the logo navy — inverted panels, toasts, floor board */

  --ink-strong:   #141413;  /* was #0F172A */
  --ink-muted:    #5A5A53;  /* was #475569 — 6.6:1 on --bg-card */
  --ink-faint:    #74746C;  /* was #64748B — 4.9:1 on --bg-card, AA */
  --ink-on-brand: #FFFFFF;

  --stroke:        rgba(20,20,19,0.08);
  --stroke-card:   rgba(20,20,19,0.07);
  --stroke-strong: rgba(20,20,19,0.14);

  --surface-0:     #FFFFFF;
  --surface-1:     #F5F5F3;
  --surface-hover: rgba(20,20,19,0.04);
  --surface-active:rgba(20,20,19,0.08);  /* ADDITION */

  --brand-1:    #3A5EFF;   /* brighter, so it separates from the navy substrate */
  --brand-2:    #1E36DB;   /* AA-safe with white type on top */
  --brand-dim:  rgba(58,94,255,0.10);
  --brand-dark: #1728A8;   /* was #4338CA */

  --ok:          #12A150;  --ok-dim:      rgba(18,161,80,0.10);
  --danger:      #C81E1E;  --danger-dim:  rgba(200,30,30,0.08);
  --warning:     #8A5200;  --warning-dim: rgba(224,134,0,0.12);
  --info:        var(--brand-1);
  --info-dim:    var(--brand-dim);

  --ok-dot:#12A150; --warning-dot:#E08600; --danger-dot:#DC2626; --info-dot:#3A5EFF;

  --focus-ring:   rgba(58,94,255,0.18);
  --focus-border: rgba(58,94,255,0.55);

  --shadow-sm:    0 1px 2px rgba(20,20,19,0.06);
  --shadow-card:  0 1px 3px rgba(20,20,19,0.07), 0 4px 12px rgba(20,20,19,0.05);
  --shadow-md:    0 4px 16px rgba(20,20,19,0.10);
  --shadow-lg:    0 12px 32px rgba(20,20,19,0.14);
  --shadow-focus: 0 0 0 3px rgba(58,94,255,0.18);

  --scrollbar-thumb:       rgba(20,20,19,0.14);
  --scrollbar-thumb-hover: rgba(20,20,19,0.24);
  --logo-filter: none; /* @kind other */

  --accent-loud:var(--brand-1);
  --accent-text:var(--brand-2);
  --accent-dim:var(--brand-dim);
  color-scheme:light;
}

/* ── Theme: Midnight ─────────────────── */
[data-theme="midnight"]{
  --bg-page:     #0A0A09;   /* was #0D1117 */
  --bg-sidebar:  #0F0F0E;   /* was #10161F */
  --bg-card:     #1B1B18;   /* was #161D2D */
  --bg-card-2:   #2C2C28;   /* was #1C253A */
  --bg-card-alt: #151513;   /* was #131929 */
  --bg-input:    #2C2C28;
  --bg-ink:      #FAFAF9;

  --ink-strong:   #F2F1EE;  /* was #E8ECF0 */
  --ink-muted:    #A8A79E;  /* was #8496AA */
  --ink-faint:    #8A897F;  /* was #6E7E94 */
  --ink-on-brand: #FFFFFF;

  --stroke:        rgba(255,255,255,0.09);
  --stroke-card:   rgba(255,255,255,0.07);
  --stroke-strong: rgba(255,255,255,0.16);

  --surface-0:     #1B1B18;
  --surface-1:     #2C2C28;
  --surface-hover: rgba(255,255,255,0.05);
  --surface-active:rgba(255,255,255,0.10);

  --brand-1:    #8B9BFF;   /* was #818CF8 */
  --brand-2:    #B8C3FF;   /* was #A5B4FC */
  --brand-dim:  rgba(139,155,255,0.14);
  --brand-dark: #3A5EFF;

  --ok:          #3ED77F;  --ok-dim:      rgba(62,215,127,0.14);
  --danger:      #FF7A7A;  --danger-dim:  rgba(255,122,122,0.14);
  --warning:     #FFB84D;  --warning-dim: rgba(255,184,77,0.13);
  --info:        var(--brand-1);
  --info-dim:    var(--brand-dim);

  --ok-dot:#3ED77F; --warning-dot:#FFB84D; --danger-dot:#FF7A7A; --info-dot:#8B9BFF;

  --focus-ring:   rgba(139,155,255,0.25);
  --focus-border: rgba(139,155,255,0.50);

  --shadow-sm:    0 1px 3px rgba(0,0,0,0.35);
  --shadow-card:  0 1px 3px rgba(0,0,0,0.40), 0 4px 12px rgba(0,0,0,0.30);
  --shadow-md:    0 4px 16px rgba(0,0,0,0.45);
  --shadow-lg:    0 12px 36px rgba(0,0,0,0.55);
  --shadow-focus: 0 0 0 3px rgba(139,155,255,0.25);

  --scrollbar-thumb:       rgba(255,255,255,0.10);
  --scrollbar-thumb-hover: rgba(255,255,255,0.18);
  --logo-filter: brightness(0) invert(1); /* @kind other */

  --accent-loud:var(--brand-1);
  --accent-text:var(--cobalt-300);
  --accent-dim:var(--brand-dim);
  color-scheme:dark;
}

/* ── Theme: Ocean ─────────────────────── */
[data-theme="ocean"]{
  --bg-page:     #060E17;
  --bg-sidebar:  #081220;
  --bg-card:     #0E1C2B;
  --bg-card-2:   #1D3A52;
  --bg-card-alt: #0A1521;
  --bg-input:    #122536;
  --bg-ink:      #F2F6FA;

  --ink-strong:   #F2F6FA;
  --ink-muted:    #A8B8C7;
  --ink-faint:    #8496A6;
  --ink-on-brand: #FFFFFF;

  --stroke:        rgba(120,175,255,0.12);
  --stroke-card:   rgba(120,175,255,0.09);
  --stroke-strong: rgba(120,175,255,0.20);

  --surface-0:     #0E1C2B;
  --surface-1:     #122536;
  --surface-hover: rgba(139,155,255,0.08);
  --surface-active:rgba(139,155,255,0.14);

  --brand-1:    #8B9BFF;
  --brand-2:    #B8C3FF;
  --brand-dim:  rgba(139,155,255,0.14);
  --brand-dark: #3A5EFF;

  --ok:          #3ED77F;  --ok-dim:      rgba(62,215,127,0.14);
  --danger:      #FF7A7A;  --danger-dim:  rgba(255,122,122,0.14);
  --warning:     #FFB84D;  --warning-dim: rgba(255,184,77,0.13);
  --info:        var(--brand-1);
  --info-dim:    var(--brand-dim);

  --ok-dot:#3ED77F; --warning-dot:#FFB84D; --danger-dot:#FF7A7A; --info-dot:#8B9BFF;

  --focus-ring:   rgba(139,155,255,0.24);
  --focus-border: rgba(139,155,255,0.45);

  --shadow-sm:    0 1px 3px rgba(2,8,16,0.40);
  --shadow-card:  0 1px 3px rgba(2,8,16,0.45), 0 4px 12px rgba(2,8,16,0.32);
  --shadow-md:    0 4px 16px rgba(2,8,16,0.48);
  --shadow-lg:    0 12px 36px rgba(2,8,16,0.58);
  --shadow-focus: 0 0 0 3px rgba(139,155,255,0.24);

  --scrollbar-thumb:       rgba(255,255,255,0.10);
  --scrollbar-thumb-hover: rgba(255,255,255,0.18);
  --logo-filter: brightness(0) invert(1); /* @kind other */

  --accent-loud:var(--brand-1);
  --accent-text:var(--cobalt-300);
  --accent-dim:var(--brand-dim);
  color-scheme:dark;
}

/* ── Theme: Ember ─────────────────────── */
[data-theme="ember"]{
  --bg-page:     #120907;
  --bg-sidebar:  #180D09;
  --bg-card:     #26170F;
  --bg-card-2:   #3D2617;
  --bg-card-alt: #1B0F0A;
  --bg-input:    #332017;
  --bg-ink:      #F7F1EC;

  --ink-strong:   #F7F1EC;
  --ink-muted:    #B9A695;
  --ink-faint:    #93816F;
  --ink-on-brand: #FFFFFF;

  --stroke:        rgba(255,180,100,0.12);
  --stroke-card:   rgba(255,180,100,0.09);
  --stroke-strong: rgba(255,180,100,0.20);

  --surface-0:     #26170F;
  --surface-1:     #332017;
  --surface-hover: rgba(255,180,100,0.07);
  --surface-active:rgba(255,180,100,0.13);

  --brand-1:    #FF8A4D;
  --brand-2:    #FFB38A;
  --brand-dim:  rgba(255,138,77,0.14);
  --brand-dark: #FF4D00;

  --ok:          #4ADE80;  --ok-dim:      rgba(74,222,128,0.14);
  --danger:      #FF7A7A;  --danger-dim:  rgba(255,122,122,0.14);
  --warning:     #FFC94D;  --warning-dim: rgba(255,201,77,0.14);
  --info:        #8B9BFF;
  --info-dim:    rgba(139,155,255,0.14);

  --ok-dot:#4ADE80; --warning-dot:#FFC94D; --danger-dot:#FF7A7A; --info-dot:#8B9BFF;

  --focus-ring:   rgba(255,138,77,0.24);
  --focus-border: rgba(255,138,77,0.45);

  --shadow-sm:    0 1px 3px rgba(0,0,0,0.40);
  --shadow-card:  0 1px 3px rgba(0,0,0,0.45), 0 4px 12px rgba(0,0,0,0.32);
  --shadow-md:    0 4px 16px rgba(0,0,0,0.48);
  --shadow-lg:    0 12px 36px rgba(0,0,0,0.58);
  --shadow-focus: 0 0 0 3px rgba(255,138,77,0.24);

  --scrollbar-thumb:       rgba(255,255,255,0.10);
  --scrollbar-thumb-hover: rgba(255,255,255,0.18);
  --logo-filter: brightness(0) invert(1); /* @kind other */

  --accent-loud:var(--brand-1);
  --accent-text:#FFB38A;
  --accent-dim:var(--brand-dim);
  color-scheme:dark;
}

/* Monochrome fallback — printed POs, packing slips, faxes. */
@media print{
  :root{
    --bg-page:#FFF;--bg-card:#FFF;--bg-card-alt:#FFF;--bg-card-2:#FFF;--bg-input:#FFF;
    --bg-sidebar:#FFF;--bg-ink:#141413;--surface-0:#FFF;--surface-1:#FFF;
    --ink-strong:#000;--ink-muted:#42423C;--ink-faint:#5A5A53;--ink-on-brand:#FFF;
    --stroke:#CFCFC9;--stroke-card:#92928A;--stroke-strong:#5A5A53;
    --brand-1:#000;--brand-2:#000;--brand-dim:#FFF;--brand-dark:#000;
    --ok:#000;--warning:#000;--danger:#000;--info:#000;
    --ok-dim:#FFF;--warning-dim:#FFF;--danger-dim:#FFF;--info-dim:#FFF;
    --ok-dot:#000;--warning-dot:#000;--danger-dot:#000;--info-dot:#000;
    --shadow-sm:none;--shadow-card:none;--shadow-md:none;--shadow-lg:none;
    --accent-loud:#141413;--accent-text:#000;--accent-dim:#FFF;
  }
}

/* --- _ds/tokens/typography.css --- */
/* ============================================================
   TYPE — three voices. Token names are the shipped ones
   (--fs-*, --fw-*, --lh-*, --ls-*); the display face and the
   numeral role are ADDITIONS.
   ============================================================ */
:root{
  --font-body:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-mono:"IBM Plex Mono",ui-monospace,"SF Mono",Menlo,monospace;
  --font-display:"Archivo","Archivo Expanded",system-ui,sans-serif;   /* ADDITION */
  --font-numeral:"Archivo",system-ui,sans-serif;                       /* ADDITION */

  /* Width axis presets for Archivo (ADDITION) */
  --wdth-condensed:78; /* @kind other */
  --wdth-normal:100; /* @kind other */
  --wdth-expanded:118; /* @kind other */

  /* --- SHIPPED UI SCALE — the app. Do not grow these. --- */
  --fs-xs:   11px;
  --fs-sm:   12px;
  --fs-base: 13px;
  --fs-md:   14px;
  --fs-lg:   16px;
  --fs-xl:   20px;
  --fs-2xl:  26px;

  /* --- DISPLAY SCALE (ADDITION) — marketing, decks, metrics, empty states. --- */
  --fs-display-1:32px;
  --fs-display-2:40px;
  --fs-display-3:52px;
  --fs-display-4:68px;
  --fs-display-5:88px;
  --fs-display-6:120px;
  --fs-display-7:168px;
  --fs-display-8:240px;   /* hero numeral — crop it, don't shrink it */

  --fw-regular:  400; /* @kind other */
  --fw-medium:   500; /* @kind other */
  --fw-semibold: 600; /* @kind other */
  --fw-bold:     700; /* @kind other */
  --fw-black:    800; /* @kind other */

  --lh-display:1.02; /* @kind other */
  --lh-tight:  1.2; /* @kind other */
  --lh-snug:   1.4; /* @kind other */
  --lh-normal: 1.6; /* @kind other */

  --ls-mega:    -0.035em;  /* ADDITION — display 5-8 */
  --ls-display: -0.022em;  /* ADDITION — display 1-4 */
  --ls-tight:   -0.015em;
  --ls-normal:  0; /* @kind other */
  --ls-caps:    0.08em;
  --ls-key:     0.14em;    /* ADDITION — sidebar section labels, eyebrows */
}

/* --- Reusable type roles --------------------------------- */
.mv-display{font-family:var(--font-display);font-variation-settings:"wdth" var(--wdth-expanded),"wght" 800;font-weight:800;line-height:var(--lh-display);letter-spacing:var(--ls-mega);text-wrap:balance}
.mv-headline{font-family:var(--font-display);font-variation-settings:"wdth" var(--wdth-normal),"wght" 700;font-weight:700;line-height:var(--lh-tight);letter-spacing:var(--ls-display)}
.mv-numeral{font-family:var(--font-numeral);font-variation-settings:"wdth" var(--wdth-expanded),"wght" 800;font-weight:800;line-height:.86;letter-spacing:var(--ls-mega);font-variant-numeric:tabular-nums lining-nums;font-feature-settings:"tnum" 1}
.mv-eyebrow{font-family:var(--font-body);font-size:var(--fs-xs);font-weight:var(--fw-bold);letter-spacing:var(--ls-key);text-transform:uppercase;line-height:1.2}
.mv-body{font-family:var(--font-body);font-size:var(--fs-lg);line-height:var(--lh-normal);text-wrap:pretty}
.mv-ui{font-family:var(--font-body);font-size:var(--fs-md);line-height:var(--lh-snug)}
.mv-cell{font-family:var(--font-body);font-size:var(--fs-base);line-height:1.35}
.mv-key{font-family:var(--font-body);font-size:var(--fs-xs);font-weight:var(--fw-semibold);letter-spacing:var(--ls-caps);text-transform:uppercase;color:var(--ink-muted)}
.mv-mono{font-family:var(--font-mono);font-size:var(--fs-sm);font-variant-numeric:tabular-nums}
.mv-tnum{font-variant-numeric:tabular-nums lining-nums;font-feature-settings:"tnum" 1}

/* --- _ds/tokens/spacing.css --- */
/* ============================================================
   SPACE — shipped 4px scale (--space-1..12), extended upward
   for poster and marketing surfaces.
   ============================================================ */
:root{
  --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;   /* ADDITION */
  --space-20: 80px;   /* ADDITION */
  --space-24: 96px;   /* ADDITION */
  --space-32: 128px;  /* ADDITION */

  /* Density presets — table row heights (ADDITION) */
  --row-compact:32px;
  --row-default:38px;
  --row-comfy:48px;

  --control-sm:28px;
  --control-md:34px;
  --control-lg:40px;
  --control-xl:52px;   /* marketing CTA */

  --tap-min:44px;      /* floor for anything touched on the shop floor */

  /* Layout — from src/app/app/shell.module.css */
  --grid-columns:12; /* @kind other */
  --grid-gutter:24px;
  --page-max:1320px;
  --prose-max:72ch;
  --sidebar-w:240px;
  --content-pad:24px;
}

/* --- _ds/tokens/shape.css --- */
/* ============================================================
   SHAPE — shipped radius, border and shadow scales.
   Posters are the one place radius drops to 0.
   ============================================================ */
:root{
  --radius-0:   0px;    /* ADDITION — posters, full-bleed panels */
  --radius-2:   2px;    /* ADDITION — progress bars, rules */
  --radius-xs:   4px;
  --radius-sm:   6px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   16px;
  --radius-pill: 999px;

  /* Role aliases (ADDITION) — what to reach for */
  --radius-control:var(--radius-lg);   /* buttons, inputs, selects */
  --radius-badge:var(--radius-xs);     /* status badges */
  --radius-card:var(--radius-xl);      /* cards, tableCard, panels */
  --radius-poster:var(--radius-0);     /* posters, OG, ads */

  --border-xs: 1px;
  --border-sm: 2px;
  --border-md: 4px;
  --border-rule: 3px;   /* ADDITION — the Manuva rule above section heads */

  --shadow-sm:    0 1px 2px rgba(20,20,19,0.06);
  --shadow-card:  0 1px 3px rgba(20,20,19,0.07), 0 4px 12px rgba(20,20,19,0.05);
  --shadow-md:    0 4px 16px rgba(20,20,19,0.10);
  --shadow-lg:    0 12px 32px rgba(20,20,19,0.14);
  --shadow-focus: 0 0 0 3px rgba(58,94,255,0.18);
}

/* --- _ds/tokens/marketing.css --- */
/* ============================================================
   MARKETING FIELDS — the loud layer.
   These are ADDITIONS scoped to marketing surfaces only. The app
   never reads them. They are not re-inventions: every field is a
   domain accent (colors.css) promoted to a full-bleed background,
   so the site and the product share one palette — the site just
   turns it up.

   Rule: a field is a BACKGROUND. Always pair it with its --on-*
   ink. Never use a field as small text on white.
   ============================================================ */
:root{
  --field-cobalt:#3A5EFF;  --on-cobalt:#FFFFFF;
  --field-flare:#FF4D00;   --on-flare:#FFFFFF;
  --field-amber:#FFB300;   --on-amber:#141413;
  --field-violet:#B026FF;  --on-violet:#FFFFFF;
  --field-mint:#00C271;    --on-mint:#141413;
  --field-aqua:#00B9D6;    --on-aqua:#141413;
  --field-lime:#C8FF2E;    --on-lime:#141413;   /* ADDITION — the one accent. Backgrounds only. */
  --field-ink:#15314D;     --on-ink:#FFFFFF;    /* the logo navy, adopted at the dark end */
  --field-paper:#FAFAF9;   --on-paper:#141413;

  /* Tints — bedding between fields, so a page can breathe without
     dropping to white. Body copy at --ink-strong clears AA on all. */
  --tint-cobalt:#E4E9FF;
  --tint-flare:#FFE7DC;
  --tint-amber:#FFF2D1;
  --tint-violet:#F5E4FF;
  --tint-mint:#DAF6EA;
  --tint-aqua:#D7F2F8;
  --tint-lime:#F0FFD1;

  /* Marketing shape — rounder and softer than the app's 6/8px.
     The app stays sharp; the site is friendly. */
  --radius-panel:32px;
  --radius-tile:20px;
  --radius-pill:999px;

  /* Rotation order. Sections cycle this so no two adjacent
     fields collide and the sequence is reproducible. */
  --field-rotation:cobalt flare amber violet mint aqua; /* @kind other */
}

/* Field helpers — set background + ink in one class. */
.mv-field-cobalt{background:var(--field-cobalt);color:var(--on-cobalt)}
.mv-field-flare{background:var(--field-flare);color:var(--on-flare)}
.mv-field-amber{background:var(--field-amber);color:var(--on-amber)}
.mv-field-violet{background:var(--field-violet);color:var(--on-violet)}
.mv-field-mint{background:var(--field-mint);color:var(--on-mint)}
.mv-field-aqua{background:var(--field-aqua);color:var(--on-aqua)}
.mv-field-lime{background:var(--field-lime);color:var(--on-lime)}
.mv-field-ink{background:var(--field-ink);color:var(--on-ink)}

/* Ultra-condensed scoreboard numerals — stat bands, fixture rows. */
.mv-score{font-family:var(--font-numeral);font-variation-settings:"wdth" 78,"wght" 800;font-weight:800;line-height:.82;letter-spacing:-.02em;font-variant-numeric:tabular-nums lining-nums}

@keyframes mv-marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.mv-marquee-track{display:flex;width:max-content;animation:mv-marquee 26s linear infinite}
@media (prefers-reduced-motion:reduce){.mv-marquee-track{animation:none}}

/* --- Marketing motion. The app's motion is mechanical (120–180ms,
   no overshoot). The site is allowed to be slower and softer, because
   it is read, not operated. Nothing here is load-bearing: every
   element is fully legible with motion disabled. --- */
/* Reveals are opt-in at runtime: the hidden state only applies once JS has
   armed the root. With JS broken, slow, or blocked, every section is simply
   visible — motion here is decoration and must never gate content. */
.mv-reveal{transition:opacity 620ms var(--ease-out),transform 620ms var(--ease-out)}
[data-reveal-armed="1"] .mv-reveal{opacity:0;transform:translateY(20px)}
[data-reveal-armed="1"] .mv-reveal[data-in="1"]{opacity:1;transform:none}
.mv-lift{transition:transform 240ms var(--ease-out),box-shadow 240ms var(--ease-out)}
.mv-lift:hover{transform:translateY(-5px)}
.mv-press{transition:transform 160ms var(--ease-snap),filter 160ms var(--ease-out)}
.mv-press:hover{transform:translateY(-2px);filter:brightness(1.07)}
.mv-press:active{transform:translateY(0)}
@media (prefers-reduced-motion:reduce){
  [data-reveal-armed="1"] .mv-reveal{opacity:1;transform:none}
  .mv-lift:hover,.mv-press:hover{transform:none}
}

/* --- _ds/tokens/responsive.css --- */
/* ============================================================
   RESPONSIVE — the layer the reference layouts don't have.

   The ui_kits/marketing/*.jsx files are desktop preview art built
   at 1440×900 with inline styles, which cannot express a media
   query. This file is the real contract, and it is what a
   production build should consume.

   Breakpoints match the SHIPPED marketing site so behaviour
   carries across rather than being reinvented:
     480px  tight phone   — type steps down, CTAs go full width
     720px  tablet / mid  — multi-column grids stack
     960px  desktop       — nav links give way to a drawer

   Values are hardcoded in @media conditions because custom
   properties can't be used there. Changing a breakpoint means
   changing it in both places.
   ============================================================ */

/* --- Fluid display scale ---------------------------------
   Same ceilings as tokens/typography.css — these only bite
   below roughly 960px, so app and floor surfaces are unchanged
   while marketing headlines survive a phone. */
:root{
  --fs-display-1:clamp(24px, 3.5vw, 32px); /* @kind font */
  --fs-display-2:clamp(26px, 4.5vw, 40px); /* @kind font */
  --fs-display-3:clamp(28px, 6vw, 52px); /* @kind font */
  --fs-display-4:clamp(32px, 8vw, 68px); /* @kind font */
  --fs-display-5:clamp(38px, 10vw, 88px); /* @kind font */
  --fs-display-6:clamp(44px, 13vw, 120px); /* @kind font */
  --fs-display-7:clamp(56px, 17vw, 168px); /* @kind font */
  --fs-display-8:clamp(72px, 24vw, 240px); /* @kind font */

  /* Section rhythm and gutters shrink with the viewport so a
     phone isn't 96px of empty field between every band. */
  --section-y:clamp(48px, 7vw, 112px); /* @kind spacing */
  --gutter:clamp(16px, 4vw, 32px); /* @kind spacing */
  --panel-pad:clamp(24px, 5vw, 64px); /* @kind spacing */
}

/* Panels lose their generous radius on small screens — a 32px
   round on a 340px-wide card reads as a pill, not a panel. */
@media (max-width:720px){
  :root{ --radius-panel:20px; --radius-tile:14px; }
}

/* --- Grid collapse utilities ------------------------------
   Use these instead of a fixed repeat(N,1fr). The number is the
   DESKTOP column count; the steps down are built in. */
.mv-cols-2,.mv-cols-3,.mv-cols-4,.mv-cols-6{display:grid;gap:var(--space-4)}
.mv-cols-2{grid-template-columns:repeat(2,1fr)}
.mv-cols-3{grid-template-columns:repeat(3,1fr)}
.mv-cols-4{grid-template-columns:repeat(4,1fr)}
.mv-cols-6{grid-template-columns:repeat(6,1fr)}

@media (max-width:960px){
  .mv-cols-3{grid-template-columns:repeat(2,1fr)}
  .mv-cols-4{grid-template-columns:repeat(2,1fr)}
  .mv-cols-6{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:720px){
  .mv-cols-2,.mv-cols-3{grid-template-columns:1fr}
  .mv-cols-6{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:480px){
  .mv-cols-4,.mv-cols-6{grid-template-columns:1fr}
}

/* Asymmetric two-column bands (hero splits, FAQ, comparison).
   Stacks earlier than an even grid because the narrow column
   becomes unreadable first. */
.mv-split{display:grid;grid-template-columns:var(--split,1fr 1fr);gap:var(--space-10)}
@media (max-width:860px){
  .mv-split{grid-template-columns:1fr;gap:var(--space-8)}
  .mv-split>.mv-split-media{order:-1}
}

/* --- Section and panel shells ----------------------------- */
.mv-section{padding-block:var(--section-y)}
.mv-wrap{max-width:var(--page-max);margin-inline:auto;padding-inline:var(--gutter)}
.mv-panel{border-radius:var(--radius-panel);padding:var(--panel-pad)}

/* --- Navigation ------------------------------------------
   Below 960px the inline links are replaced by a drawer. The
   shipped site already has one with a focus trap, Escape
   handling and reduced-motion support — carry that behaviour
   across rather than rebuilding it. */
@media (max-width:960px){
  .mv-nav-links{display:none}
  .mv-nav-burger{display:inline-flex}
}
@media (min-width:961px){
  .mv-nav-burger{display:none}
}

/* --- Touch targets ---------------------------------------
   Anything tappable clears 44px on coarse pointers, whatever
   the control size token says. */
@media (pointer:coarse){
  a,button,summary,[role="button"]{min-height:44px}
  .mv-cta-stack{display:grid;gap:var(--space-3)}
  .mv-cta-stack>*{width:100%}
}

/* --- Data tables -----------------------------------------
   A wide table on a phone scrolls horizontally rather than
   crushing its columns. Pair with a visible affordance. */
@media (max-width:720px){
  .mv-table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .mv-table-scroll>table,.mv-table-scroll>*{min-width:600px}
}

/* The pricing feature matrix is the one table that must NOT
   scroll — below 720px it is replaced by per-plan bullet lists.
   Both exist in the markup; this switches between them. */
@media (max-width:720px){
  .mv-matrix{display:none}
  .mv-matrix-cards{display:grid}
}
@media (min-width:721px){
  .mv-matrix-cards{display:none}
}

/* --- Motion ----------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  .mv-reveal{opacity:1!important;transform:none!important}
  .mv-marquee-track{animation:none}
}

/* --- _ds/tokens/motion.css --- */
/* ============================================================
   MOTION — shipped durations and easings. Mechanical, not
   playful: fast start, firm stop, no overshoot, no bounce.
   ============================================================ */
:root{
  --dur-instant:80ms; /* @kind other */
  --dur-fast:  120ms; /* @kind other */
  --dur-base:  180ms; /* @kind other */
  --dur-slow:  280ms; /* @kind other */
  --dur-live: 1600ms; /* @kind other */

  --ease-out:  cubic-bezier(0.2,0.7,0.2,1); /* @kind other */
  --ease-inout:cubic-bezier(0.4,0,0.2,1); /* @kind other */
  --ease-snap: cubic-bezier(0.1,0.9,0.2,1); /* @kind other */

  --transition-control:background-color var(--dur-fast) var(--ease-out),border-color var(--dur-fast) var(--ease-out),color var(--dur-fast) var(--ease-out),box-shadow var(--dur-fast) var(--ease-out); /* @kind other */
}
@media (prefers-reduced-motion:reduce){
  :root{
    --dur-instant:0ms; /* @kind other */
    --dur-fast:0ms; /* @kind other */
    --dur-base:0ms; /* @kind other */
    --dur-slow:0ms; /* @kind other */
    --dur-live:0ms; /* @kind other */
  }
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
}
@keyframes mv-pulse{0%,100%{opacity:1}50%{opacity:.35}}
@keyframes mv-rise{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@keyframes mv-spin{to{transform:rotate(360deg)}}

/* --- _ds/tokens/base.css --- */
/* Element defaults — mirrors src/app/globals.css. */
*,*::before,*::after{box-sizing:border-box}
body{margin:0;min-height:100vh;font-family:var(--font-body);font-size:var(--fs-md);line-height:var(--lh-snug);color:var(--ink-strong);background:var(--bg-page);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
body,h1,h2,h3,p,ul,li{margin:0;padding:0}
a{color:var(--brand-1);text-decoration:none;transition:color var(--dur-fast) var(--ease-out)}
a:hover{color:var(--brand-dark)}
button,input,select,textarea{font-family:inherit}
:focus-visible{outline:2px solid var(--focus-border);outline-offset:2px}
::selection{background:var(--brand-1);color:var(--ink-on-brand)}
::-webkit-scrollbar{width:6px;height:6px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--scrollbar-thumb);border-radius:3px}
::-webkit-scrollbar-thumb:hover{background:var(--scrollbar-thumb-hover)}
hr{border:0;border-top:1px solid var(--stroke);margin:var(--space-8) 0}