/* ---- src/styles/tokens/colors.css ---- */
:root{
/* Brand — sampled from logo */
--green-950:#274534; /* deep forest: high-emphasis sections only */
--green-900:#34403A;
--green-800:#414A45; /* canonical brand green */
--green-700:#566059;
--green-600:#6C766F;
--green-500:#8A938C;
--green-400:#A9B0AB;
--green-300:#C7CCC9;
--green-200:#DDE0DE;
--green-100:#EEF0EE;
--green-50:#F6F7F6;
--olive-800:#3F4728;
--olive-700:#4F5832;
--olive-600:#646F40; /* brand olive: fills, active states, large display only — never small text on bone/tan */
--olive-500:#7A8552;
--olive-400:#98A176;
--olive-300:#B8BF9E;
--olive-200:#D3D8C2;
--olive-100:#E9EBDF;
--bone:#ECE6D4;
--bone-light:#F5F2EA;
--tan:#E6E0CE;
--tan-dark:#D6CEB6;
--white:#FFFFFF;
--black:#141816;
/* Semantic: surfaces (white is the default; bone/tan are deliberate accents) */
--surface-page:var(--white);
--surface-card:var(--white);
--surface-sunken:var(--green-50);
--surface-accent:var(--bone);
--surface-accent-2:var(--tan);
--surface-emphasis:var(--green-800);
--surface-emphasis-strong:var(--green-950);
/* Semantic: text */
--text-body:var(--green-800);
--text-heading:var(--green-800);
--text-muted:var(--green-600);
--text-faint:var(--green-500);
--text-on-emphasis:var(--bone);
--text-on-emphasis-muted:var(--green-300);
--text-on-olive:var(--white);
--text-link:var(--green-800);
--text-link-hover:var(--green-950);
/* Semantic: borders */
--border-hairline:var(--green-200);
--border-default:var(--green-300);
--border-strong:var(--green-800);
--border-on-emphasis:rgba(236,230,212,.22);
/* Semantic: interactive */
--action-primary:var(--olive-600);
--action-primary-hover:var(--olive-700);
--action-primary-active:var(--olive-800);
--action-secondary-border:var(--green-800);
--action-secondary-hover-bg:var(--green-50);
--focus-ring:var(--olive-600);
/* Site-native chart status — hue + shape (circle / diamond / triangle), never hue alone. */
--status-within:#4F5832;   /* circle · adequate (olive) */
--status-borderline:#B8781A; /* diamond */
--status-outside:#A4443A;  /* triangle */
--status-within-bg:#E9EBDF;
--status-borderline-bg:#F7EBD6;
--status-outside-bg:#F5E3E0;
/* Data series (site charts) */
--series-1:var(--green-800);
--series-2:var(--olive-500);
--series-3:#B8781A;
--series-4:var(--green-400);
}


/* ---- src/styles/tokens/typography.css ---- */
:root{
--font-heading:"Geist",system-ui,-apple-system,"Helvetica Neue",sans-serif;
--font-text:"IBM Plex Sans",system-ui,-apple-system,"Helvetica Neue",sans-serif;
--font-mono:"IBM Plex Mono",ui-monospace,"SF Mono",Menlo,monospace;
/* Scale (px) — 1.2 ratio below 24, looser above */
--text-2xs:11px;
--text-xs:12px;
--text-sm:14px;
--text-md:16px;
--text-lg:18px;
--text-xl:22px;
--text-2xl:28px;
--text-3xl:36px;
--text-4xl:48px;
--text-5xl:64px;
--text-6xl:88px;
/* Line heights */
--leading-tight:1.05;
--leading-snug:1.2;
--leading-normal:1.5;
--leading-relaxed:1.65;
/* Tracking */
--tracking-display:-0.025em;
--tracking-heading:-0.015em;
--tracking-normal:0;
--tracking-label:0.06em;
--tracking-caps:0.1em;
/* Weights */
--weight-regular:400;
--weight-medium:500;
--weight-semibold:600;
/* Composite roles */
--type-display:var(--weight-medium) var(--text-5xl)/var(--leading-tight) var(--font-heading);
--type-h1:var(--weight-medium) var(--text-4xl)/var(--leading-tight) var(--font-heading);
--type-h2:var(--weight-medium) var(--text-3xl)/var(--leading-snug) var(--font-heading);
--type-h3:var(--weight-medium) var(--text-2xl)/var(--leading-snug) var(--font-heading);
--type-h4:var(--weight-medium) var(--text-xl)/var(--leading-snug) var(--font-heading);
--type-lead:var(--weight-regular) var(--text-lg)/var(--leading-relaxed) var(--font-text);
--type-body:var(--weight-regular) var(--text-md)/var(--leading-relaxed) var(--font-text);
--type-body-sm:var(--weight-regular) var(--text-sm)/var(--leading-normal) var(--font-text);
--type-caption:var(--weight-regular) var(--text-xs)/var(--leading-normal) var(--font-text);
--type-label:var(--weight-medium) var(--text-xs)/1.2 var(--font-mono);
--type-figure:var(--weight-medium) var(--text-4xl)/1 var(--font-heading);
--type-data:var(--weight-regular) var(--text-sm)/1.2 var(--font-mono);
}


/* ---- src/styles/tokens/spacing.css ---- */
:root{
/* 4px base */
--space-0:0;
--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;
--space-32:128px;
/* Section rhythm — fewer, denser sections with generous gaps between */
--section-gap:var(--space-24);
--section-gap-mobile:var(--space-16);
--section-pad-y:var(--space-20);
--section-pad-y-mobile:var(--space-12);
--gutter:var(--space-6);
--gutter-mobile:var(--space-5);
--container-max:1200px;
--container-narrow:760px;
--container-text:640px;
--grid-gap:var(--space-6);
--nav-height:64px;
}


/* ---- src/styles/tokens/shape.css ---- */
:root{
/* Radii — instrument-tight */
--radius-xs:2px;
--radius-sm:4px;
--radius-md:6px;   /* buttons, inputs */
--radius-lg:8px;   /* cards */
--radius-xl:12px;  /* media containers */
--radius-device:44px; /* phone frame outer */
--radius-pill:999px;
/* Borders */
--border-width:1px;
--border-width-strong:1.5px;
/* Shadows — near-none; hairlines carry structure */
--shadow-none:none;
--shadow-sm:0 1px 2px rgba(39,69,52,.06);
--shadow-md:0 2px 8px rgba(39,69,52,.08),0 1px 2px rgba(39,69,52,.06);
--shadow-lg:0 12px 32px rgba(39,69,52,.12),0 2px 6px rgba(39,69,52,.06);
--shadow-report:0 1px 3px rgba(20,24,22,.08),0 8px 24px rgba(20,24,22,.08);
/* Motion */
--ease-out:cubic-bezier(.2,.7,.2,1); /* @kind other */
--ease-in-out:cubic-bezier(.65,0,.35,1); /* @kind other */
--dur-fast:120ms; /* @kind other */
--dur-base:200ms; /* @kind other */
--dur-slow:320ms; /* @kind other */
/* Focus */
--focus-ring-width:2px;
--focus-ring-offset:2px;
}


/* ---- src/styles/tokens/base.css ---- */
/* Minimal base — consumers may opt out by not using these element rules */
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--surface-page);color:var(--text-body);font:var(--type-body);font-feature-settings:"tnum" 1,"ss01" 0;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{margin:0;color:var(--text-heading);font-family:var(--font-heading);font-weight:var(--weight-medium);letter-spacing:var(--tracking-heading);text-wrap:pretty}
p{margin:0;text-wrap:pretty}
a{color:var(--text-link);text-decoration:underline;text-decoration-color:var(--green-400);text-underline-offset:3px;text-decoration-thickness:1px;transition:color var(--dur-fast) var(--ease-out),text-decoration-color var(--dur-fast) var(--ease-out)}
a:hover{color:var(--text-link-hover);text-decoration-color:var(--green-800)}
:focus-visible{outline:var(--focus-ring-width) solid var(--focus-ring);outline-offset:var(--focus-ring-offset)}
button,input,select,textarea{font:inherit;color:inherit}
img,video{display:block;max-width:100%}
.mpx-tnum{font-variant-numeric:tabular-nums}


/* ---- src/styles/components.css ---- */
/* ============================================================================
   MobiPx design-system components, as plain CSS.
   Extracted from the design system's component bundle (mpx-* class names are
   unchanged) so the page ships no React. Values reference tokens/*.css.
   ========================================================================== */

/* ── Button ──────────────────────────────────────────────────────────────── */
.mpx-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:var(--radius-md);font-family:var(--font-text);font-weight:var(--weight-medium);letter-spacing:0;text-decoration:none;cursor:pointer;border:1px solid transparent;transition:background var(--dur-fast) var(--ease-out),border-color var(--dur-fast) var(--ease-out),color var(--dur-fast) var(--ease-out);white-space:nowrap;user-select:none;box-sizing:border-box}
.mpx-btn:focus-visible{outline:var(--focus-ring-width) solid var(--focus-ring);outline-offset:var(--focus-ring-offset)}
.mpx-btn--sm{height:32px;padding:0 12px;font-size:var(--text-sm)}
.mpx-btn--md{height:40px;padding:0 16px;font-size:var(--text-sm)}
.mpx-btn--lg{height:48px;padding:0 20px;font-size:var(--text-md)}
.mpx-btn--primary{background:var(--action-primary);color:var(--text-on-olive);border-color:var(--action-primary)}
.mpx-btn--primary:hover{background:var(--action-primary-hover);border-color:var(--action-primary-hover);color:var(--text-on-olive)}
.mpx-btn--primary:active{background:var(--action-primary-active);border-color:var(--action-primary-active)}
.mpx-btn--secondary{background:transparent;color:var(--text-body);border-color:var(--action-secondary-border)}
.mpx-btn--secondary:hover{background:var(--action-secondary-hover-bg);color:var(--text-body)}
.mpx-btn--secondary:active{background:var(--green-100)}
.mpx-btn__icon{transition:transform var(--dur-fast) var(--ease-out)}
.mpx-btn--full{width:100%}
.mpx-btn[disabled]{opacity:.45;pointer-events:none}

/* ── TextLink ────────────────────────────────────────────────────────────── */
.mpx-link{color:var(--text-link);text-decoration:underline;text-decoration-color:var(--green-400);text-underline-offset:3px;text-decoration-thickness:1px;display:inline-flex;align-items:center;gap:4px;transition:color var(--dur-fast) var(--ease-out),text-decoration-color var(--dur-fast) var(--ease-out)}
.mpx-link:hover{color:var(--text-link-hover);text-decoration-color:var(--green-800)}
.mpx-link--quiet{text-decoration-color:transparent}
.mpx-link--quiet:hover{text-decoration-color:var(--green-800)}
.mpx-link--on-dark{color:var(--text-on-emphasis);text-decoration-color:var(--border-on-emphasis)}
.mpx-link--on-dark:hover{color:var(--white);text-decoration-color:var(--white)}
.mpx-link--on-dark.mpx-link--quiet{text-decoration-color:transparent}

/* ── SectionHeader ───────────────────────────────────────────────────────── */
.mpx-sh{display:flex;flex-direction:column;gap:16px;max-width:var(--container-narrow)}
.mpx-sh__eyebrow{font:var(--type-label);letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--text-muted)}
.mpx-sh__title{font:var(--type-h2);letter-spacing:var(--tracking-heading);color:var(--text-heading)}
.mpx-sh__lead{font:var(--type-lead);color:var(--text-muted);max-width:var(--container-text)}
.mpx-sh--on-dark .mpx-sh__eyebrow{color:var(--text-on-emphasis-muted)}
.mpx-sh--on-dark .mpx-sh__title{color:var(--text-on-emphasis)}
.mpx-sh--on-dark .mpx-sh__lead{color:var(--text-on-emphasis-muted)}

/* ── Card ────────────────────────────────────────────────────────────────── */
.mpx-card{background:var(--surface-card);border:1px solid var(--border-hairline);border-radius:var(--radius-lg);padding:24px;box-sizing:border-box;color:var(--text-body);display:flex;flex-direction:column;gap:12px;transition:border-color var(--dur-fast) var(--ease-out)}
.mpx-card--bone{background:var(--surface-accent);border-color:transparent}
.mpx-card__icon{display:inline-flex;color:var(--green-800);margin-bottom:4px}
.mpx-card__head{display:flex;justify-content:space-between;gap:12px}
.mpx-card__eyebrow{font:var(--type-label);letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--text-muted)}
.mpx-card__title{font:var(--type-h4);color:var(--text-heading);letter-spacing:var(--tracking-heading)}
.mpx-card__body{font:var(--type-body-sm);color:var(--text-muted)}
.mpx-card__index{font:var(--type-data);color:var(--text-faint);font-variant-numeric:tabular-nums}

/* ── ProofBand ───────────────────────────────────────────────────────────── */
.mpx-proof{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:32px 24px;padding:40px 0;border-top:1px solid var(--border-hairline);border-bottom:1px solid var(--border-hairline);font-variant-numeric:tabular-nums}
.mpx-proof__item{display:flex;flex-direction:column;gap:12px}
.mpx-proof__value{font:var(--type-figure);letter-spacing:var(--tracking-display);color:var(--text-heading);white-space:nowrap}
.mpx-proof__value sup{font-size:.5em;vertical-align:top;position:relative;top:.15em;margin-left:.05em}
.mpx-proof__value--long{font-size:var(--text-3xl);white-space:normal;line-height:1.1}
.mpx-proof__label{font:var(--type-body-sm);color:var(--text-muted);max-width:180px}
.mpx-proof--on-dark{border-color:var(--border-on-emphasis)}
.mpx-proof--on-dark .mpx-proof__value{color:var(--text-on-emphasis)}
.mpx-proof--on-dark .mpx-proof__label{color:var(--text-on-emphasis-muted)}
@media(max-width:560px){.mpx-proof{grid-template-columns:1fr 1fr;gap:28px 16px}.mpx-proof__value{font-size:var(--text-3xl)}.mpx-proof__value--long{font-size:var(--text-2xl)}}

/* ── QuoteBlock ──────────────────────────────────────────────────────────── */
.mpx-quote{display:grid;grid-template-columns:32px 1fr;gap:24px;max-width:var(--container-narrow);margin:0}
.mpx-quote__rule{width:1px;background:var(--border-strong);justify-self:center}
.mpx-quote__text{margin:0;font:var(--type-h3);letter-spacing:var(--tracking-heading);color:var(--text-heading);text-wrap:pretty}
.mpx-quote__text::before{content:"\201C"}.mpx-quote__text::after{content:"\201D"}
.mpx-quote__attr{margin-top:20px;display:flex;flex-direction:column;gap:2px;font:var(--type-body-sm)}
.mpx-quote__name{font-weight:var(--weight-medium);color:var(--text-body)}
.mpx-quote__role{color:var(--text-muted)}
.mpx-quote--empty .mpx-quote__text{color:var(--text-faint)}
.mpx-quote--empty .mpx-quote__text::before,.mpx-quote--empty .mpx-quote__text::after{content:none}
.mpx-quote__todo{display:inline-block;font:var(--type-label);letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--text-muted);border:1px dashed var(--border-default);border-radius:var(--radius-xs);padding:4px 8px;margin-bottom:16px}
@media(max-width:560px){.mpx-quote{grid-template-columns:1fr;gap:16px}.mpx-quote__rule{width:32px;height:1px;justify-self:start}.mpx-quote__text{font:var(--type-h4)}}

/* ── Form field ──────────────────────────────────────────────────────────── */
.mpx-field{display:flex;flex-direction:column;gap:6px;font-family:var(--font-text);min-width:0}
.mpx-field__label{font:var(--type-body-sm);font-weight:var(--weight-medium);color:var(--text-body)}
.mpx-field__control{height:40px;padding:0 12px;border:1px solid var(--border-default);border-radius:var(--radius-md);background:var(--white);color:var(--text-body);font:var(--type-body-sm);box-sizing:border-box;width:100%;transition:border-color var(--dur-fast) var(--ease-out);appearance:none}
.mpx-field__control::placeholder{color:var(--text-faint)}
.mpx-field__control:hover{border-color:var(--green-500)}
.mpx-field__control:focus{outline:none;border-color:var(--green-800);box-shadow:0 0 0 1px var(--green-800)}
.mpx-field--lg .mpx-field__control{height:48px;font-size:var(--text-md);padding:0 14px}
.mpx-field--multiline .mpx-field__control{height:auto;min-height:88px;padding:12px 14px;resize:vertical;line-height:1.5;font-family:var(--font-text)}
.mpx-field__optional{font-weight:var(--weight-regular);color:var(--text-muted);margin-left:6px}

/* ── EmailCapture (pilot form) ───────────────────────────────────────────── */
.mpx-ec{display:flex;flex-direction:column;gap:10px;max-width:520px;font-family:var(--font-text);position:relative}
.mpx-ec__fields{display:flex;flex-direction:column;gap:10px}
.mpx-ec__fields .mpx-btn{align-self:flex-start;margin-top:4px}
.mpx-ec__helper{font:var(--type-caption);color:var(--text-muted)}
.mpx-ec__done{display:flex;gap:8px;align-items:center;font:var(--type-body-sm);color:var(--text-body);min-height:40px;outline:none}
.mpx-ec__error{font:var(--type-body-sm);color:var(--status-outside)}
.mpx-ec__hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.mpx-ec [hidden]{display:none}

/* ── Captions + placeholders (shared by media) ───────────────────────────── */
.mpx-cap{display:flex;flex-direction:column;gap:3px;margin-top:12px;font-family:var(--font-text)}
.mpx-cap__label{font:var(--type-label);letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--text-muted)}
.mpx-cap__text{font:var(--type-caption);color:var(--text-muted)}
.mpx-ph{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;background:var(--surface-sunken);color:var(--text-muted);text-align:center;padding:16px;box-sizing:border-box}
.mpx-ph__l{font:var(--type-label);letter-spacing:var(--tracking-label);text-transform:uppercase;border:1px dashed var(--border-default);border-radius:var(--radius-xs);padding:4px 8px}
.mpx-ph__t{font:var(--type-caption)}
.mpx-ph--dark{background:var(--green-900);color:var(--green-300)}
.mpx-ph--dark .mpx-ph__l{border-color:var(--green-700)}
/* In the hero player the play control sits in the centre, so keep the placeholder label clear of it */
.mpx-vp__box .mpx-ph{justify-content:flex-start;padding-top:20px}

/* ── ReportPage ──────────────────────────────────────────────────────────── */
.mpx-rp{display:flex;flex-direction:column;width:100%;max-width:100%;margin:0;font-family:var(--font-text)}
.mpx-rp__paper{position:relative;aspect-ratio:612/420;width:100%;background:var(--white);border:1px solid var(--border-hairline);border-radius:var(--radius-sm);box-shadow:var(--shadow-report);overflow:hidden}
.mpx-rp__paper img{width:100%;height:100%;object-fit:cover;object-position:top;display:block}
.mpx-rp--mid .mpx-rp__paper img{object-position:center 45%}
.mpx-rp--bottom .mpx-rp__paper img{object-position:bottom}
.mpx-rp--band .mpx-rp__paper{aspect-ratio:612/260}
/* An excerpt shown whole, at the crop's own proportions (nothing cut off) */
.mpx-rp--natural .mpx-rp__paper{aspect-ratio:auto}
.mpx-rp--natural .mpx-rp__paper img{height:auto;object-fit:fill;object-position:initial}

/* ── VideoLoop ───────────────────────────────────────────────────────────── */
.mpx-loop{display:flex;flex-direction:column;margin:0;font-family:var(--font-text);min-width:0}
.mpx-loop__box{position:relative;width:100%;aspect-ratio:4/5;border-radius:var(--radius-xl);overflow:hidden;background:var(--green-100)}
.mpx-loop__box video,.mpx-loop__box img{width:100%;height:100%;object-fit:cover;display:block}
.mpx-loop__tag{position:absolute;left:12px;top:12px;font:var(--type-label);letter-spacing:var(--tracking-label);text-transform:uppercase;background:var(--white);color:var(--text-body);padding:5px 8px;border-radius:var(--radius-xs)}
.mpx-loop--compact .mpx-loop__box{border-radius:var(--radius-lg);background:var(--white)}
.mpx-loop--compact .mpx-cap{margin-top:8px}
.mpx-loop--compact .mpx-cap__label{font-size:var(--text-2xs)}

/* ── VideoPlayer ─────────────────────────────────────────────────────────── */
.mpx-vp{display:flex;flex-direction:column;margin:0;font-family:var(--font-text);min-width:0}
.mpx-vp__box{position:relative;width:100%;aspect-ratio:16/9;border-radius:var(--radius-xl);overflow:hidden;background:var(--green-900)}
.mpx-vp__box video,.mpx-vp__box img{width:100%;height:100%;object-fit:cover;display:block}
.mpx-vp__play{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:none;border:0;cursor:pointer;padding:0}
.mpx-vp__play[disabled]{cursor:default}
.mpx-vp__btn{width:64px;height:64px;border-radius:50%;background:var(--action-primary);color:var(--white);display:flex;align-items:center;justify-content:center;transition:background var(--dur-fast) var(--ease-out)}
.mpx-vp__play:hover .mpx-vp__btn{background:var(--action-primary-hover)}
.mpx-vp__btn svg{margin-left:3px}
.mpx-vp__title{position:absolute;left:16px;bottom:14px;right:16px;display:flex;justify-content:space-between;gap:12px;font:var(--type-label);letter-spacing:var(--tracking-label);text-transform:uppercase;color:rgba(255,255,255,.9);pointer-events:none}

/* ── Nav ─────────────────────────────────────────────────────────────────── */
.mpx-nav{position:sticky;top:0;z-index:50;background:var(--white);border-bottom:1px solid var(--border-hairline);height:var(--nav-height);font-family:var(--font-text)}
.mpx-nav__in{height:100%;display:flex;align-items:center;gap:32px}
.mpx-nav__logo{display:flex;align-items:center;text-decoration:none;color:var(--text-heading);height:100%}
.mpx-nav__logo img{height:34px;width:auto;display:block}
.mpx-nav__links{display:flex;gap:28px;margin-left:8px}
.mpx-nav__link{font:var(--weight-medium) var(--text-sm)/1 var(--font-text);color:var(--text-body);text-decoration:none;padding:6px 0;border-bottom:1px solid transparent;transition:border-color var(--dur-fast) var(--ease-out),color var(--dur-fast) var(--ease-out)}
.mpx-nav__link:hover{color:var(--green-950);border-color:var(--green-400)}
.mpx-nav__cta{display:flex;margin-left:auto}
.mpx-nav__burger{display:none;margin-left:auto;background:none;border:0;color:var(--text-body);padding:11px;margin-right:-11px;cursor:pointer;border-radius:var(--radius-sm)}   /* 44px tap target */
.mpx-nav__icon-x{display:none}
.mpx-nav--open .mpx-nav__icon-menu{display:none}
.mpx-nav--open .mpx-nav__icon-x{display:inline-block}
.mpx-nav__sheet{display:none}
@media(max-width:860px){
  .mpx-nav__links,.mpx-nav__cta{display:none}
  .mpx-nav__burger{display:inline-flex}
  .mpx-nav--open .mpx-nav__sheet{display:block;position:absolute;left:0;right:0;top:var(--nav-height);background:var(--white);border-bottom:1px solid var(--border-hairline);padding:16px var(--gutter-mobile) 24px;box-shadow:var(--shadow-lg)}
  .mpx-nav__sheet>a{display:block;padding:14px 0;border-bottom:1px solid var(--border-hairline);font:var(--weight-medium) var(--text-lg)/1.2 var(--font-text);color:var(--text-body);text-decoration:none}   /* the plain links only; the CTA keeps its button styling */
  .mpx-nav__sheet .mpx-nav__cta{display:flex;margin-top:16px}
}

/* ── Footer ──────────────────────────────────────────────────────────────── */
.mpx-footer{background:var(--surface-emphasis);color:var(--text-on-emphasis);font-family:var(--font-text);padding:64px 0 32px}
.mpx-footer__top{display:grid;grid-template-columns:2fr repeat(3,1fr);gap:40px 24px;padding-bottom:48px;border-bottom:1px solid var(--border-on-emphasis)}
.mpx-footer__brand{display:flex;flex-direction:column;gap:16px;max-width:36ch}
.mpx-footer__brand img{height:72px;width:72px;margin:-12px 0 0 -12px;display:block;border-radius:var(--radius-sm)}
.mpx-footer__tag{font:var(--type-body-sm);color:var(--text-on-emphasis-muted)}
.mpx-footer__col h4{font:var(--type-label);letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--text-on-emphasis-muted);margin:0 0 16px}
.mpx-footer__col ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px;font:var(--type-body-sm)}
.mpx-footer__bottom{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;padding-top:24px;font:var(--type-caption);color:var(--text-on-emphasis-muted)}
@media(max-width:760px){.mpx-footer__top{grid-template-columns:1fr 1fr}.mpx-footer__brand{grid-column:span 2}}


/* ---- src/styles/page.css ---- */
/* ============================================================================
   Page layout for the pilot landing page. Section-specific rules only;
   component rules live in components.css, values in tokens/*.css.
   ========================================================================== */

html{scroll-behavior:smooth;scroll-padding-top:calc(var(--nav-height) + 8px)}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{font-feature-settings:"tnum" 1,"ss01" 0;text-wrap:pretty}

/* Every section shares one inner container. box-sizing:border-box is required —
   without it the padding pushes the page past the viewport on phones. */
.container{box-sizing:border-box;width:100%;max-width:var(--container-max);margin-inline:auto;padding-inline:clamp(20px,4vw,40px)}

.section{padding-block:clamp(64px,8vw,96px)}
.section--hero{padding-block:clamp(56px,8vw,96px) clamp(40px,5vw,64px)}
.section--proof{padding-block:0 clamp(64px,8vw,96px)}
.section--accent{background:var(--surface-accent)}
.section--dark{background:var(--surface-emphasis);color:var(--text-on-emphasis)}
.section--sunken{background:var(--surface-sunken);border-top:1px solid var(--border-hairline)}

.stack{display:flex;flex-direction:column;gap:clamp(32px,4vw,48px)}

/* All multi-column grids use auto-fit + min(100%, N) so they collapse to one
   column on narrow phones without media queries and never overflow. */
.grid{display:grid;gap:var(--grid-gap)}
.grid--2{grid-template-columns:repeat(auto-fit,minmax(min(100%,400px),1fr))}
.grid--cards{grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr))}
/* Three equal columns on desktop, one column on phones (no 2 + 1 orphan in between) */
.grid--benefits{grid-template-columns:repeat(3,1fr)}
@media(max-width:760px){.grid--benefits{grid-template-columns:1fr}}
.grid--steps{grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr))}
.grid--loops{grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr))}
.grid--pair{grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr));gap:20px}
.grid--start{align-items:start}

.eyebrow{font:var(--type-label);letter-spacing:var(--tracking-caps);text-transform:uppercase;color:var(--text-muted)}
.text-sm{font:var(--type-body-sm);color:var(--text-muted)}

/* Skip link for keyboard users */
.skip-link{position:absolute;left:8px;top:-100px;z-index:100;padding:8px 12px;background:var(--white);color:var(--text-body);border:1px solid var(--border-strong);border-radius:var(--radius-md);text-decoration:none}
.skip-link:focus{top:8px}

/* 1 · Hero */
.hero__grid{gap:clamp(32px,5vw,64px);align-items:center}
.hero__copy{display:flex;flex-direction:column;gap:24px}
.hero__title{font:var(--weight-medium) clamp(36px,calc(22px + 3vw),64px)/var(--leading-tight) var(--font-heading);letter-spacing:var(--tracking-display);color:var(--text-heading);max-width:16ch}
.hero__lead{font:var(--type-lead);color:var(--text-muted);max-width:46ch}
.hero__actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:8px}

/* 4 · Session steps */
.steps{list-style:none;margin:0;padding:0}
.step{display:flex;flex-direction:column;gap:10px;padding-top:16px;border-top:1px solid var(--border-hairline)}
.step__label{font:var(--type-label);letter-spacing:var(--tracking-label);color:var(--text-muted)}
.step__title{font:var(--type-h4);letter-spacing:var(--tracking-heading);color:var(--text-heading)}

/* 4 · The seven-movement battery under the steps */
.battery{display:flex;flex-direction:column;gap:20px}
.section__note{font:italic var(--type-body);color:var(--text-body);max-width:var(--container-text)}
.battery__note{font:var(--type-caption);color:var(--text-muted);max-width:var(--container-text);margin-top:-4px}
.grid--battery{grid-template-columns:repeat(7,1fr);gap:16px}
@media(max-width:860px){
  /* One swipeable row on phones instead of stacking seven tall tiles */
  .grid--battery{display:flex;overflow-x:auto;gap:12px;padding-bottom:8px;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;scrollbar-width:thin}
  .grid--battery>*{flex:0 0 150px;scroll-snap-align:start}
}

/* 5 · Why testing: sources in a row under the three statistics, then a short limitations note */
.why__sources{display:flex;flex-direction:column;gap:24px;margin-top:-8px}
.grid--sources{grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:24px}
.cite{font:var(--type-body-sm);color:var(--text-on-emphasis-muted)}
.cite__source{font:var(--type-label);letter-spacing:var(--tracking-label);color:var(--text-on-emphasis)}
.cite--limits{max-width:var(--container-text)}
/* Phones only: the three statistics stack full width (number, then its sentence),
   the sources become a compact list, the limitations note keeps a comfortable measure.
   Scoped to this section so the hero proof band and every wider layout are untouched. */
@media(max-width:560px){
  .section--why .mpx-proof{grid-template-columns:1fr;gap:32px;padding:32px 0}
  .section--why .mpx-proof__item{gap:10px}
  .section--why .mpx-proof__value{font-size:var(--text-4xl)}          /* room for the full figure size again */
  .section--why .mpx-proof__value--long{font-size:var(--text-3xl)}
  .section--why .mpx-proof__label{max-width:none}
  .section--why .grid--sources{grid-template-columns:1fr;gap:10px}
  .section--why .why__sources{gap:28px;margin-top:0}
}

/* 6 · Outcomes */
.outcomes__grid{gap:clamp(32px,5vw,64px);align-items:start}
.outcomes__copy{display:flex;flex-direction:column;gap:clamp(28px,3vw,40px)}
.principles{list-style:none;margin:0;padding:28px 0 0;border-top:1px solid var(--border-hairline);display:grid;gap:28px 32px;grid-template-columns:repeat(2,1fr)}   /* a deliberate 2 × 2 */
@media(max-width:480px){.principles{grid-template-columns:1fr}}
.principle__label{font:var(--type-label);letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--text-heading)}
.principle__text{margin:8px 0 0;font:var(--type-body-sm);color:var(--text-muted)}

/* Product previews: real report components in the site's frame, on a soft stage.
   One primary on top, two supporting below; the block ends near the height of the copy. */
.outcomes__previews{background:var(--bone-light);border-radius:var(--radius-xl);padding:20px;display:grid;gap:16px}
.outcomes__previews-row{display:grid;grid-template-columns:2fr 3fr;gap:16px;align-items:start}   /* symmetry smaller, score table larger */
@media(max-width:560px){.outcomes__previews-row{grid-template-columns:1fr}}
.pv{margin:0;background:var(--white);border:1px solid var(--border-hairline);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);overflow:hidden;min-width:0}
.pv img{display:block;width:100%;height:auto}

/* 7 · Pilot: the copy is shorter than the form, so centre it beside the form and keep the section's bottom tight */
.section--pilot{padding-block:clamp(64px,8vw,96px) clamp(40px,5vw,64px)}   /* same top spacing as the sections above; tighter bottom */
.pilot__grid{align-items:start;gap:clamp(32px,5vw,64px)}   /* same gap and top alignment as the outcomes grid, so the card lines up with the stage above */
.section--pilot .mpx-sh{max-width:510px}   /* wraps the heading and lead so their right edge lands where the outcomes text ends */
/* The form sits in a white card on the section's grey ground, filling its column like the stage above */
.pilot__card{background:var(--white);border:1px solid var(--border-hairline);border-radius:var(--radius-lg);padding:20px}
.pilot__card .mpx-ec{max-width:none}
.pilot__card .mpx-ec__fields{gap:8px}
.pilot__card .mpx-field--multiline .mpx-field__control{height:76px;min-height:76px}   /* rows= would otherwise win; resize handle still lets it grow */
.mpx-ec__pair{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media(max-width:480px){.mpx-ec__pair{grid-template-columns:1fr}}
.mpx-ec__actions{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-top:4px}
.mpx-ec__actions .mpx-btn{margin-top:0}
.mpx-ec__actions .mpx-ec__helper{margin:0;flex:1 1 200px}