/* ========================================================================== Slotwise marketing site — hand-written CSS, no build step. Palette inherits apps/web/src/styles/tokens.css (same RGB triplets, same names) so the site stays a visual match for the real product; a few brand-only extensions (deeper indigo band, lighter tints) are added below and clearly separated. --sw-muted is intentionally darker than the app's token (slate-600, not slate-500) — marketing body copy needs the AA contrast margin more than dense app chrome does. Contents, in file order. The order is the cascade: a later section can win over an earlier one, so move a rule between sections only after checking computed styles. Tokens ............................ fallback font; colour, type, space, shadow, motion, stacking Reset + base ...................... [hidden], headings and the small heading, prose links, small print, focus, forced-colour icons, anchors, sections Buttons + pills Nav ............................... sticky bar; the drawer below 860px Home hero ......................... the copy beside the board demo from 1024px Product tour ...................... the chaptered film on the dark band Problem strip ..................... spreadsheet illustration and sourced facts Point list ........................ .pillar-list, on every page Industries ........................ the home page's four boards Dark band ......................... the tour's and the partner form's indigo ground Final call to action + footer Formula ........................... the calc-transparency 
     Hierarchy flow .................... TPM page: mechanic, promo type, scheduled promotion
     Angle cards ....................... TPM page: manufacturers and retailers
     Breadcrumb + sub-page hero
     Pricing: plans and value .......... tier cards, pilot, calculator, tables, commitment, FAQ
     Mid-band density .................. 900-1279px rhythm
     Screenshot figure ................. .shot and its caption: the hero's no-JS fallback,
                                         the problem illustration's caption
     Product visual frame .............. .shot-frame: a film still in a browser-window chrome,
                                         every page
     Board demo ........................ hero and concept boards (assets/js/board-demo.js)
     Pricing: hero and plans bar ....... H1, billing toggle, compare plans
     Home: loop to trust ............... loop, chapters, split pattern, forecast, AI, fit tiles, trust
     Mobile action bar ................. every page, below 860px
     Partner pages ..................... design partners, rostering, maintenance
     Trade promotion page .............. verticals/trade-promotion-management.html
   ========================================================================== */

/* ==========================================================================
   Tokens
   ========================================================================== */

/* Metric-matched stand-in for Archivo while the web font loads (display=swap): a local
   Arial scaled to Archivo's measured widths (400: 98.2%, 800 vs Arial Bold: 101.7%) and
   given its ascent/descent, so text wraps the same before and after the swap and the
   stacked hero doesn't reflow. */
@font-face {
  font-family: 'Archivo Fallback';
  src: local('Arial'), local('ArialMT'), local('Liberation Sans'), local('Helvetica');
  font-weight: 100 549;
  size-adjust: 98.2%;
  ascent-override: 88%;
  descent-override: 21%;
  line-gap-override: 0%;
}
@font-face {
  font-family: 'Archivo Fallback';
  src: local('Arial Bold'), local('Arial-BoldMT'), local('Liberation Sans Bold'), local('Helvetica Bold');
  font-weight: 550 900;
  size-adjust: 101.7%;
  ascent-override: 88%;
  descent-override: 21%;
  line-gap-override: 0%;
}

:root {
  /* ---- color: shared with the product (apps/web/src/styles/tokens.css) --- */
  --sw-accent: 79 70 229;          /* indigo-600 */
  --sw-canvas: 248 250 252;        /* slate-50 */
  --sw-surface: 255 255 255;       /* white */
  --sw-hairline: 226 232 240;      /* slate-200 */
  --sw-grid: 241 245 249;          /* slate-100 */
  --sw-grid-strong: 203 213 225;   /* slate-300 */
  --sw-ink: 15 23 42;              /* slate-900 */
  --sw-muted: 71 85 105;           /* slate-600 (AA-safe variant of the app's slate-500) */
  --sw-faint: 148 163 184;         /* slate-400 */
  --sw-status-draft: 148 163 184;
  --sw-status-planned: 14 165 233; /* sky-500 */
  --sw-status-approved: 5 150 105; /* emerald-600 */
  --sw-tone-good: 16 185 129;      /* emerald-500 */
  --sw-tone-warn: 245 158 11;      /* amber-500 */
  --sw-tone-bad: 244 63 94;        /* rose-500 */

  /* ---- color: brand-only extensions (same indigo hue, wider ramp) -------- */
  --sw-accent-700: 67 56 202;
  --sw-accent-800: 55 48 163;
  --sw-accent-900: 49 46 129;
  --sw-accent-950: 30 27 75;
  --sw-accent-light: 238 242 255;
  --sw-accent-200: 199 210 254;
  --sw-accent-925: 35 30 100;      /* the dark band's far corner */

  /* ---- color: status shades (the tone hues at the weights text and tints need) */
  --sw-tone-good-200: 167 243 208; /* on dark */
  --sw-tone-good-400: 52 211 153;  /* on dark */
  --sw-tone-good-700: 4 120 87;    /* text on light and on good tints */
  --sw-tone-warn-700: 180 83 9;
  --sw-tone-warn-800: 146 64 14;   /* text on warn tints */
  --sw-tone-bad-100: 255 228 230;  /* bad tint */
  --sw-tone-bad-600: 225 29 72;    /* invalid field edge */
  --sw-tone-bad-700: 190 18 60;    /* error text */
  --sw-tone-bad-800: 159 18 57;    /* text on the bad tint */

  /* ---- type ---------------------------------------------------------- */
  --font-sans: 'Archivo', 'Archivo Fallback', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  --fs-xs: 0.8125rem;              /* small print: captions, sources, notes (never below 13px) */
  --fs-sm: clamp(0.875rem, 0.84rem + 0.15vw, 0.9375rem);
  --fs-base: 1rem;
  --fs-md: clamp(1.125rem, 1.06rem + 0.3vw, 1.25rem);
  --fs-lg: clamp(1.375rem, 1.25rem + 0.6vw, 1.75rem);
  --fs-xl: clamp(1.75rem, 1.45rem + 1.4vw, 2.5rem);
  --fs-2xl: clamp(2.125rem, 1.6rem + 2.4vw, 3.25rem);
  --fs-3xl: clamp(2.5rem, 1.7rem + 3.8vw, 4.5rem);

  /* ---- space / radius / shadow ---------------------------------------- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;
  --space-10: 8rem;

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

  --shadow-sm: 0 1px 2px rgb(15 23 42 / 0.06);
  --shadow-md: 0 1px 2px rgb(15 23 42 / 0.06), 0 4px 12px -4px rgb(15 23 42 / 0.12);
  --shadow-lg: 0 1px 2px rgb(15 23 42 / 0.06), 0 8px 24px -8px rgb(15 23 42 / 0.16);
  --shadow-lg-up: 0 -1px 2px rgb(15 23 42 / 0.06), 0 -8px 24px -8px rgb(15 23 42 / 0.16); /* a bar docked at the bottom */

  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 150ms;
  --dur-base: 320ms;
  --dur-slow: 640ms;

  --z-mobile-cta: 80;              /* under the scrim and the header */
  --z-scrim: 90;                   /* under the header, so the drawer and its toggle stay live */
  --z-sticky: 100;
  --z-mobile-menu: 200;            /* inside the header's stacking context */
  --z-skip-link: 999;

  --container-w: 1240px;
}

/* ==========================================================================
   Reset + base
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: 1.55;
  color: rgb(var(--sw-ink));
  background: rgb(var(--sw-surface));
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, picture, svg { display: block; max-width: 100%; }
img { height: auto; }

a { color: inherit; text-decoration: none; }

button, input, textarea { font: inherit; color: inherit; }

ul, ol { list-style: none; padding: 0; }

/* hidden means hidden, whatever display a component gives the element */
[hidden] { display: none !important; }

h1, h2, h3, h4 {
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.08;
  text-wrap: balance;
}

/* Section headings sit a clear step below every page's H1, including the home hero's
   (32px at 1024 beside the demo, 44.8px from ~1380): 28px up to ~1050, 38px from ~1380.
   Headings carry their own gap to the lead beneath them. */
h2 { font-size: clamp(1.75rem, 3.06vw - 0.255rem, 2.375rem); margin-bottom: var(--space-4); }
h3 { font-size: clamp(1.25rem, 1.1rem + 0.45vw, 1.5rem); }
/* The small heading, one step below h3: the title of a step, a tile, a list item or a panel,
   whatever its level in the outline. One definition; each place sets only its spacing. */
h4,
.flow-step h3, .tpm-prices h3, .fit-tile h3, .fit-list h3, .ai-steps h3, .step h3, .ask-get h3, .tpm-next-list h3,
.pilot-band h2, .pains dt, .program-name {
  font-size: var(--fs-md);
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.3;
}

p { text-wrap: pretty; }

/* Links inside running text are underlined, not told apart by colour alone (WCAG 1.4.1).
   Prose links only: plain-text links with no class, outside any