/*
  MoGility design system, copied from design batch 1 (26 Sep 2026) for the AI On-Ramp pages.
  Source: ds/mogility-design-system-22c4c03b-51f9-4276-ae58-90d0c54c437d, files tokens/colors.css,
  tokens/typography.css, tokens/spacing.css, tokens/base.css and components/mogility.css, in that order.
  tokens/fonts.css was not copied: it imports IBM Plex from Google Fonts, and the site keeps its own fonts.
  Every edit against the delivered files is marked with a comment starting "Edited:".
  Everything else is verbatim. Page styles live in ai.css, not here.
*/

/* ---- tokens/colors.css ---- */
/* MoGility color tokens. Base ramps first, then semantic aliases for light (default) and dark. */
:root{
/* Green ramp. 800 is the brand green. Edited: 800 and --brand-green are #1d4d3c, not the delivered #17392d, because the code spec says the brand is moving to #1d4d3c. */
--green-950:#0b1d16;--green-900:#0f271e;--green-800:#1d4d3c;--green-700:#1f4a3b;--green-600:#2a5f4c;--green-500:#3b7a63;--green-400:#5c9a81;--green-300:#8cc2aa;--green-200:#bddacb;--green-100:#dfece5;--green-50:#eff5f1;
--brand-green:#1d4d3c;
/* Neutrals, faintly green-tinted so they sit with the brand green. */
--gray-0:#ffffff;--gray-25:#fafaf7;--gray-50:#f3f3ef;--gray-100:#e7e7e2;--gray-150:#dcddd6;--gray-200:#cfd0c9;--gray-300:#b3b5ae;--gray-400:#8b8e87;--gray-500:#686b65;--gray-600:#4d504b;--gray-700:#363935;--gray-800:#232622;--gray-850:#1c1f1b;--gray-900:#181b17;--gray-950:#141713;--gray-1000:#0f110e;
/* Status. Desaturated on purpose. Use only for status markers. */
--status-green:#4f7d5c;--status-green-tint:#e3ece4;
--status-yellow:#b38a34;--status-yellow-tint:#f3ecda;
--status-red:#a8544b;--status-red-tint:#f3e2df;
--status-neutral:#8b8e87;--status-neutral-tint:#ecece7;

/* Semantic: light */
--bg:var(--gray-25);
--surface:var(--gray-0);
--surface-sunken:var(--gray-50);
--surface-inverse:var(--gray-950);
--text-1:var(--gray-800);
--text-2:var(--gray-600);
--text-3:var(--gray-500);
--text-heading:var(--green-800);
--text-inverse:var(--gray-25);
--accent:var(--green-800);
--accent-hover:var(--green-700);
--accent-solid:var(--green-800);
--accent-solid-hover:var(--green-700);
--on-accent-solid:var(--gray-25);
--accent-tint:var(--green-50);
--band-bg:var(--green-800);
--band-fg:var(--gray-25);
--band-muted:var(--green-200);
--border:var(--gray-150);
--border-strong:var(--gray-300);
--rule-accent:var(--green-800);
--callout-bg:var(--gray-50);
--callout-border:var(--gray-150);
--table-head-fg:var(--green-800);
--table-row-alt:var(--gray-50);
--table-row-highlight:var(--green-50);
--focus:var(--green-500);
--overlay:rgba(20,23,19,.48);
--status-green-fg:var(--status-green);--status-yellow-fg:#8d6a22;--status-red-fg:#8f433b;
}
/* Semantic: dark. Edited: the delivered file switched on [data-theme="dark"] only. The site also follows the OS setting unless data-theme="light" is set, so the same block is applied under both selectors, matching the rest of the site. */
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
--bg:var(--gray-950);
--surface:var(--gray-900);
--surface-sunken:var(--gray-1000);
--surface-inverse:var(--gray-25);
--text-1:var(--gray-100);
--text-2:var(--gray-300);
--text-3:var(--gray-400);
--text-heading:var(--gray-50);
--text-inverse:var(--gray-950);
--accent:var(--green-300);
--accent-hover:var(--green-200);
--accent-solid:var(--green-600);
--accent-solid-hover:var(--green-500);
--on-accent-solid:var(--gray-25);
--accent-tint:#1a2a22;
--band-bg:var(--green-800);
--band-fg:var(--gray-25);
--band-muted:var(--green-200);
--border:#2b2f2a;
--border-strong:var(--gray-600);
--rule-accent:var(--green-300);
--callout-bg:var(--gray-850);
--callout-border:#2b2f2a;
--table-head-fg:var(--green-300);
--table-row-alt:var(--gray-850);
--table-row-highlight:#1a2a22;
--focus:var(--green-300);
--overlay:rgba(0,0,0,.62);
--status-green-tint:#1e2c21;--status-yellow-tint:#2e2818;--status-red-tint:#2f1f1c;--status-neutral-tint:#262924;
--status-green-fg:#8fbf9b;--status-yellow-fg:#d8b46a;--status-red-fg:#d98d84;
}}
:root[data-theme="dark"]{
--bg:var(--gray-950);
--surface:var(--gray-900);
--surface-sunken:var(--gray-1000);
--surface-inverse:var(--gray-25);
--text-1:var(--gray-100);
--text-2:var(--gray-300);
--text-3:var(--gray-400);
--text-heading:var(--gray-50);
--text-inverse:var(--gray-950);
--accent:var(--green-300);
--accent-hover:var(--green-200);
--accent-solid:var(--green-600);
--accent-solid-hover:var(--green-500);
--on-accent-solid:var(--gray-25);
--accent-tint:#1a2a22;
--band-bg:var(--green-800);
--band-fg:var(--gray-25);
--band-muted:var(--green-200);
--border:#2b2f2a;
--border-strong:var(--gray-600);
--rule-accent:var(--green-300);
--callout-bg:var(--gray-850);
--callout-border:#2b2f2a;
--table-head-fg:var(--green-300);
--table-row-alt:var(--gray-850);
--table-row-highlight:#1a2a22;
--focus:var(--green-300);
--overlay:rgba(0,0,0,.62);
--status-green-tint:#1e2c21;--status-yellow-tint:#2e2818;--status-red-tint:#2f1f1c;--status-neutral-tint:#262924;
--status-green-fg:#8fbf9b;--status-yellow-fg:#d8b46a;--status-red-fg:#d98d84;
}

/* ---- tokens/typography.css ---- */
:root{
/* Edited: the site loads Archivo, Figtree and DM Mono. The build rules say match the site fonts, so the design system faces map onto them. Sizes, weights and line heights are unchanged. */
--font-sans:"Figtree",system-ui,-apple-system,"Segoe UI",sans-serif;
--font-mono:"DM Mono",ui-monospace,"SF Mono",Menlo,monospace;
--font-display:"Archivo",system-ui,-apple-system,sans-serif;
--fw-regular:400; /* @kind font */
--fw-medium:500; /* @kind font */
--fw-semibold:600; /* @kind font */
--fw-bold:700; /* @kind font */

--fs-display:60px;--fs-h1:44px;--fs-h2:32px;--fs-h3:24px;--fs-h4:19px;
--fs-lead:19px;--fs-body:16px;--fs-small:14px;--fs-caption:13px;--fs-eyebrow:12px;
--lh-tight:1.06; /* @kind font */
--lh-heading:1.18; /* @kind font */
--lh-snug:1.35; /* @kind font */
--lh-body:1.62; /* @kind font */
--lh-dense:1.5; /* @kind font */

--tracking-display:-0.022em;--tracking-heading:-0.012em;--tracking-body:0;--tracking-eyebrow:0.12em;
/* Semantic */
--type-heading-weight:var(--fw-semibold); /* @kind font */
--type-body-weight:var(--fw-regular); /* @kind font */
--type-eyebrow-font:var(--font-mono);
--measure:68ch; /* @kind spacing */
}

/* ---- 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-7:32px;--space-8:40px;--space-9:56px;--space-10:72px;--space-11:96px;--space-12:128px;
/* Semantic spacing */
--gap-inline:var(--space-2);--gap-stack:var(--space-4);--pad-card:var(--space-7);--pad-section:var(--space-11);--gutter:var(--space-6);
--container:1160px;--container-narrow:760px;
/* Radii: crisp, never bubbly */
--radius-0:0;--radius-sm:2px;--radius-md:4px;--radius-lg:6px;--radius-pill:999px;
/* Borders */
--border-hair:1px;--border-rule:2px;--border-bar:4px;
/* Elevation: almost flat. Borders do the work. */
--shadow-0:none;
--shadow-1:0 1px 2px rgba(20,23,19,.06);
--shadow-2:0 2px 6px rgba(20,23,19,.06),0 12px 32px rgba(20,23,19,.10);
/* Motion */
--ease:cubic-bezier(.2,.6,.2,1); /* @kind other */
--dur-fast:120ms; /* @kind other */
--dur-base:200ms; /* @kind other */
--dur-slow:320ms; /* @kind other */

}

/* ---- tokens/base.css ---- */
/* Edited: base element rules are scoped under .ai-page so they cannot leak into the rest of the site if this file is ever loaded elsewhere. The .mg- type classes are unchanged. */
*,*::before,*::after{box-sizing:border-box}
html.ai-page{-webkit-text-size-adjust:100%;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased}
.ai-page body{margin:0;font-family:var(--font-sans);font-size:var(--fs-body);line-height:var(--lh-body);color:var(--text-1);background:var(--bg)}
.ai-page h1,.ai-page h2,.ai-page h3,.ai-page h4{font-family:var(--font-display);font-weight:var(--type-heading-weight);color:var(--text-heading);margin:0;text-wrap:balance}
.ai-page p{margin:0;text-wrap:pretty}
.ai-page a{color:var(--accent);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.ai-page a:hover{color:var(--accent-hover);text-decoration-thickness:2px}
::selection{background:var(--green-200);color:var(--green-900)}
:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.mg-display{font-size:var(--fs-display);line-height:var(--lh-tight);letter-spacing:var(--tracking-display);font-weight:var(--fw-semibold);color:var(--text-heading)}
.mg-h1{font-size:var(--fs-h1);line-height:var(--lh-heading);letter-spacing:var(--tracking-heading);font-weight:var(--fw-semibold);color:var(--text-heading)}
.mg-h2{font-size:var(--fs-h2);line-height:var(--lh-heading);letter-spacing:var(--tracking-heading);font-weight:var(--fw-semibold);color:var(--text-heading)}
.mg-h3{font-size:var(--fs-h3);line-height:var(--lh-snug);font-weight:var(--fw-semibold);color:var(--text-heading)}
.mg-h4{font-size:var(--fs-h4);line-height:var(--lh-snug);font-weight:var(--fw-semibold);color:var(--text-heading)}
.mg-lead{font-size:var(--fs-lead);line-height:var(--lh-body);color:var(--text-2)}
.mg-body{font-size:var(--fs-body);line-height:var(--lh-body);color:var(--text-1)}
.mg-small{font-size:var(--fs-small);line-height:var(--lh-dense);color:var(--text-2)}
.mg-caption{font-size:var(--fs-caption);line-height:var(--lh-dense);color:var(--text-3)}
.mg-eyebrow{font-family:var(--type-eyebrow-font);font-size:var(--fs-eyebrow);line-height:1.2;letter-spacing:var(--tracking-eyebrow);text-transform:uppercase;font-weight:var(--fw-medium);color:var(--accent)}
.mg-mono{font-family:var(--font-mono);font-variant-numeric:tabular-nums}
.mg-num{font-variant-numeric:tabular-nums}

/* ---- components/mogility.css ---- */
/* MoGility component styles. Classes are prefixed mg- and read only from tokens. */
/* Wordmark */
.mg-wordmark{display:inline-flex;align-items:center;gap:.5em;font-family:var(--font-sans);font-weight:var(--fw-regular);letter-spacing:-0.01em;line-height:1;color:var(--text-heading);text-decoration:none;white-space:nowrap}
.mg-wordmark b{font-weight:var(--fw-bold)}
.mg-wordmark:hover{color:var(--text-heading);text-decoration:none}
.mg-zigzag{display:inline-block;vertical-align:middle;flex:none}
/* Button */
.mg-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-family:var(--font-sans);font-weight:var(--fw-semibold);font-size:15px;line-height:1;padding:13px 20px;border-radius:var(--radius-md);border:1px solid transparent;cursor:pointer;text-decoration:none;white-space:nowrap;transition:background var(--dur-fast) var(--ease),border-color var(--dur-fast) var(--ease),color var(--dur-fast) var(--ease)}
.mg-btn:hover{text-decoration:none}
.mg-btn:active:not(:disabled){transform:translateY(1px)}
.mg-btn:disabled{opacity:.45;cursor:not-allowed}
.mg-btn--sm{font-size:13px;padding:9px 14px}
.mg-btn--lg{font-size:16px;padding:16px 26px}
.mg-btn--primary{background:var(--accent-solid);color:var(--on-accent-solid)}
.mg-btn--primary:hover:not(:disabled){background:var(--accent-solid-hover);color:var(--on-accent-solid)}
.mg-btn--secondary{background:transparent;color:var(--text-heading);border-color:var(--border-strong)}
.mg-btn--secondary:hover:not(:disabled){border-color:var(--text-heading);color:var(--text-heading)}
.mg-btn--ghost{background:transparent;color:var(--accent);padding-left:0;padding-right:0}
.mg-btn--ghost:hover:not(:disabled){color:var(--accent-hover)}
.mg-btn--ghost .mg-btn__arrow{transition:transform var(--dur-base) var(--ease)}
.mg-btn--ghost:hover .mg-btn__arrow{transform:translateX(3px)}
.mg-btn--block{width:100%}
/* Tag */
.mg-tag{display:inline-flex;align-items:center;gap:6px;font-family:var(--font-mono);font-size:11px;font-weight:var(--fw-medium);letter-spacing:.08em;text-transform:uppercase;line-height:1;padding:6px 8px;border-radius:var(--radius-sm);border:1px solid var(--border-strong);color:var(--text-2);background:transparent;white-space:nowrap}
.mg-tag--accent{border-color:transparent;background:var(--accent-tint);color:var(--accent)}
.mg-tag--solid{border-color:transparent;background:var(--accent-solid);color:var(--on-accent-solid)}
/* Status */
.mg-status{display:inline-flex;align-items:center;gap:8px;font-size:var(--fs-small);line-height:1.2;color:var(--text-1);white-space:nowrap}
.mg-status__dot{width:9px;height:9px;border-radius:50%;flex:none;background:var(--status-neutral)}
.mg-status--green .mg-status__dot{background:var(--status-green)}
.mg-status--yellow .mg-status__dot{background:var(--status-yellow)}
.mg-status--red .mg-status__dot{background:var(--status-red)}
.mg-status--tag{font-family:var(--font-mono);font-size:11px;font-weight:var(--fw-medium);letter-spacing:.08em;text-transform:uppercase;padding:5px 9px 5px 8px;border-radius:var(--radius-sm);background:var(--status-neutral-tint);color:var(--text-2)}
.mg-status--tag .mg-status__dot{width:7px;height:7px}
.mg-status--tag.mg-status--green{background:var(--status-green-tint);color:var(--status-green-fg)}
.mg-status--tag.mg-status--yellow{background:var(--status-yellow-tint);color:var(--status-yellow-fg)}
.mg-status--tag.mg-status--red{background:var(--status-red-tint);color:var(--status-red-fg)}
/* Section header */
.mg-section-head{display:grid;gap:14px;max-width:var(--container-narrow)}
.mg-section-head__eyebrow{display:flex;align-items:center;gap:12px}
.mg-section-head__num{font-family:var(--font-mono);font-size:var(--fs-eyebrow);color:var(--text-3);letter-spacing:.06em}
.mg-section-head__lede{font-size:var(--fs-lead);line-height:var(--lh-body);color:var(--text-2);max-width:var(--measure)}
.mg-section-head--rule{padding-top:20px;border-top:var(--border-rule) solid var(--rule-accent);max-width:none}
.mg-section-head--rule .mg-section-head__inner{max-width:var(--container-narrow);display:grid;gap:14px}
.mg-section-head--bar::before{content:"";display:block;width:40px;height:var(--border-bar);background:var(--rule-accent);margin-bottom:6px}
.mg-section-head--band{max-width:none;background:var(--band-bg);color:var(--band-fg);padding:48px 48px 44px;border-radius:var(--radius-0)}
.mg-section-head--band .mg-eyebrow{color:var(--band-muted)}
.mg-section-head--band .mg-section-head__num{color:var(--band-muted)}
.mg-section-head--band h2,.mg-section-head--band h1{color:var(--band-fg)}
.mg-section-head--band .mg-section-head__lede{color:var(--green-100)}
.mg-section-head--center{justify-items:center;text-align:center;margin-inline:auto}
/* Data table */
.mg-table-wrap{width:100%;overflow-x:auto}
.mg-table{width:100%;border-collapse:collapse;font-size:var(--fs-small);line-height:var(--lh-dense);color:var(--text-1)}
.mg-table caption{caption-side:top;text-align:left;padding-bottom:12px;font-family:var(--font-mono);font-size:var(--fs-eyebrow);letter-spacing:var(--tracking-eyebrow);text-transform:uppercase;color:var(--accent);font-weight:var(--fw-medium)}
.mg-table th{text-align:left;font-family:var(--font-mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;font-weight:var(--fw-medium);color:var(--table-head-fg);padding:10px 16px 10px 0;border-bottom:var(--border-rule) solid var(--rule-accent);vertical-align:bottom}
.mg-table td{padding:14px 16px 14px 0;border-bottom:1px solid var(--border);vertical-align:top}
.mg-table th:last-child,.mg-table td:last-child{padding-right:0}
.mg-table td.mg-table__key{font-weight:var(--fw-semibold);color:var(--text-heading);white-space:nowrap}
.mg-table .mg-table__num{text-align:right;font-family:var(--font-mono);font-variant-numeric:tabular-nums;white-space:nowrap}
.mg-table .mg-table__center{text-align:center}
.mg-table--compact td{padding-top:8px;padding-bottom:8px}
.mg-table--striped tbody tr:nth-child(even) td{background:var(--table-row-alt)}
.mg-table--striped td:first-child,.mg-table--striped th:first-child{padding-left:12px}
.mg-table--striped td:last-child,.mg-table--striped th:last-child{padding-right:12px}
.mg-table tr.is-highlight td{background:var(--table-row-highlight)}
.mg-table tr.is-highlight td:first-child{box-shadow:inset 3px 0 0 var(--rule-accent)}
.mg-table--striped tr.is-highlight td:first-child,.mg-table tr.is-highlight td:first-child{padding-left:12px}
.mg-table tfoot td{border-bottom:0;padding-top:12px;font-size:var(--fs-caption);color:var(--text-3)}
/* Callout / field note */
.mg-callout{display:grid;gap:10px;padding:20px 24px 22px;background:var(--callout-bg);border:1px solid var(--callout-border);border-radius:var(--radius-md);color:var(--text-1);font-size:var(--fs-small);line-height:var(--lh-body)}
.mg-callout__label{display:flex;align-items:center;gap:10px;font-family:var(--font-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;font-weight:var(--fw-medium);color:var(--accent)}
.mg-callout__title{font-size:var(--fs-body);font-weight:var(--fw-semibold);color:var(--text-heading);line-height:var(--lh-snug)}
.mg-callout--flag .mg-callout__label{color:var(--status-yellow-fg)}
.mg-callout--risk .mg-callout__label{color:var(--status-red-fg)}
.mg-callout--inverse{background:var(--band-bg);border-color:var(--band-bg);color:var(--green-100)}
.mg-callout--inverse .mg-callout__label{color:var(--band-muted)}
.mg-callout--inverse .mg-callout__title{color:var(--band-fg)}
/* Card */
.mg-card{display:flex;flex-direction:column;gap:14px;padding:var(--pad-card);background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);color:var(--text-1);text-decoration:none;transition:border-color var(--dur-base) var(--ease)}
a.mg-card:hover{border-color:var(--border-strong);color:var(--text-1);text-decoration:none}
.mg-card--sunken{background:var(--surface-sunken)}
.mg-card--accent{border-top:var(--border-bar) solid var(--rule-accent)}
.mg-card__title{font-size:var(--fs-h4);line-height:var(--lh-snug);font-weight:var(--fw-semibold);color:var(--text-heading)}
.mg-card__body{font-size:var(--fs-small);line-height:var(--lh-body);color:var(--text-2)}
.mg-card__footer{margin-top:auto;padding-top:8px}
.mg-list{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.mg-list li{position:relative;padding-left:20px;font-size:var(--fs-small);line-height:var(--lh-dense);color:var(--text-1)}
.mg-list li::before{content:"";position:absolute;left:0;top:.62em;width:10px;height:2px;background:var(--rule-accent)}
/* Forms */
.mg-field{display:grid;gap:7px;font-size:var(--fs-small)}
.mg-field__label{font-weight:var(--fw-medium);color:var(--text-1)}
.mg-field__hint{font-size:var(--fs-caption);color:var(--text-3)}
.mg-field__error{font-size:var(--fs-caption);color:var(--status-red-fg)}
.mg-input,.mg-select{width:100%;font-family:var(--font-sans);font-size:15px;line-height:1.4;color:var(--text-1);background:var(--surface);border:1px solid var(--border-strong);border-radius:var(--radius-md);padding:11px 13px;transition:border-color var(--dur-fast) var(--ease),box-shadow var(--dur-fast) var(--ease)}
.mg-input::placeholder{color:var(--text-3)}
.mg-input:hover,.mg-select:hover{border-color:var(--text-3)}
.mg-input:focus,.mg-select:focus{outline:none;border-color:var(--focus);box-shadow:0 0 0 3px color-mix(in oklab,var(--focus) 22%,transparent)}
.mg-input:disabled,.mg-select:disabled{opacity:.5;cursor:not-allowed}
.mg-field.is-error .mg-input,.mg-field.is-error .mg-select{border-color:var(--status-red)}
textarea.mg-input{min-height:112px;resize:vertical;line-height:var(--lh-dense)}
.mg-select{appearance:none;padding-right:38px;background-image:linear-gradient(45deg,transparent 50%,var(--text-2) 50%),linear-gradient(135deg,var(--text-2) 50%,transparent 50%);background-position:calc(100% - 19px) 52%,calc(100% - 14px) 52%;background-size:5px 5px,5px 5px;background-repeat:no-repeat}
.mg-check{display:inline-flex;align-items:flex-start;gap:10px;font-size:var(--fs-small);line-height:1.4;color:var(--text-1);cursor:pointer}
.mg-check input{appearance:none;margin:1px 0 0;width:18px;height:18px;flex:none;border:1px solid var(--border-strong);border-radius:var(--radius-sm);background:var(--surface);display:grid;place-content:center;cursor:pointer;transition:background var(--dur-fast) var(--ease),border-color var(--dur-fast) var(--ease)}
.mg-check input[type="radio"]{border-radius:50%}
.mg-check input::before{content:"";width:10px;height:6px;border-left:2px solid var(--on-accent-solid);border-bottom:2px solid var(--on-accent-solid);transform:translateY(-1px) rotate(-45deg);opacity:0}
.mg-check input[type="radio"]::before{width:8px;height:8px;border:0;border-radius:50%;background:var(--on-accent-solid);transform:none}
.mg-check input:checked{background:var(--accent-solid);border-color:var(--accent-solid)}
.mg-check input:checked::before{opacity:1}
.mg-check input:disabled{opacity:.45;cursor:not-allowed}
.mg-chip{display:inline-flex;align-items:center;justify-content:center;min-width:56px;padding:9px 14px;font-size:var(--fs-small);font-weight:var(--fw-medium);color:var(--text-1);background:var(--surface);border:1px solid var(--border-strong);border-radius:var(--radius-md);cursor:pointer;user-select:none;transition:all var(--dur-fast) var(--ease)}
.mg-chip:hover{border-color:var(--text-3)}
.mg-chip input{position:absolute;opacity:0;pointer-events:none}
.mg-chip.is-on{background:var(--accent-solid);border-color:var(--accent-solid);color:var(--on-accent-solid)}
.mg-switch{display:inline-flex;align-items:center;gap:10px;font-size:var(--fs-small);color:var(--text-1);cursor:pointer;background:none;border:0;padding:0;font-family:var(--font-sans)}
.mg-switch__track{position:relative;width:36px;height:20px;border-radius:var(--radius-pill);background:var(--gray-300);transition:background var(--dur-base) var(--ease);flex:none}
.mg-switch__thumb{position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:var(--gray-0);box-shadow:var(--shadow-1);transition:transform var(--dur-base) var(--ease)}
.mg-switch.is-on .mg-switch__track{background:var(--accent-solid)}
.mg-switch.is-on .mg-switch__thumb{transform:translateX(16px)}
.mg-switch:disabled{opacity:.45;cursor:not-allowed}
/* Tabs (numbered stage tabs) */
.mg-tabs{display:flex;gap:0;border-bottom:1px solid var(--border);overflow-x:auto}
.mg-tab{display:flex;align-items:baseline;gap:8px;padding:14px 18px 13px;background:none;border:0;border-bottom:2px solid transparent;margin-bottom:-1px;font-family:var(--font-sans);font-size:var(--fs-small);font-weight:var(--fw-medium);color:var(--text-2);cursor:pointer;white-space:nowrap;transition:color var(--dur-fast) var(--ease),border-color var(--dur-fast) var(--ease)}
.mg-tab:hover{color:var(--text-heading)}
.mg-tab__num{font-family:var(--font-mono);font-size:11px;color:var(--text-3)}
.mg-tab.is-active{color:var(--text-heading);border-bottom-color:var(--rule-accent)}
.mg-tab.is-active .mg-tab__num{color:var(--accent)}
/* Dialog */
.mg-dialog-overlay{position:fixed;inset:0;background:var(--overlay);display:grid;place-items:center;padding:24px;z-index:100}
.mg-dialog{position:relative;width:100%;max-width:520px;background:var(--surface);color:var(--text-1);border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow-2);padding:32px;display:grid;gap:16px}
.mg-dialog__close{position:absolute;top:14px;right:14px;width:32px;height:32px;display:grid;place-items:center;background:none;border:0;border-radius:var(--radius-md);color:var(--text-2);font-size:20px;line-height:1;cursor:pointer}
.mg-dialog__close:hover{background:var(--surface-sunken);color:var(--text-heading)}
.mg-dialog__title{font-size:var(--fs-h3);line-height:var(--lh-heading);font-weight:var(--fw-semibold);color:var(--text-heading)}
.mg-dialog__body{font-size:var(--fs-small);line-height:var(--lh-body);color:var(--text-2)}
.mg-dialog__actions{display:flex;gap:12px;justify-content:flex-start;padding-top:8px}
/* Cover page */
.mg-cover{position:relative;display:grid;grid-template-rows:auto 1fr auto;gap:0;width:100%;aspect-ratio:8.5/11;padding:7% 8%;background:var(--bg);color:var(--text-1);overflow:hidden}
.mg-cover--slide{aspect-ratio:16/9;padding:5.5% 6%}
.mg-cover__top{display:flex;justify-content:space-between;align-items:center}
.mg-cover__main{align-self:end;display:grid;gap:18px;padding-bottom:9%;max-width:84%}
.mg-cover__title{font-size:clamp(28px,5.4cqw,64px);line-height:var(--lh-tight);letter-spacing:var(--tracking-display);font-weight:var(--fw-semibold);color:var(--text-heading)}
.mg-cover__subtitle{font-size:clamp(14px,1.9cqw,22px);line-height:var(--lh-snug);color:var(--text-2);max-width:40ch}
.mg-cover__meta{display:grid;grid-template-columns:repeat(auto-fit,minmax(0,1fr));gap:24px;padding-top:16px;border-top:var(--border-rule) solid var(--rule-accent)}
.mg-cover__meta dt{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--text-3);margin-bottom:6px}
.mg-cover__meta dd{margin:0;font-size:13px;line-height:1.4;color:var(--text-1);font-weight:var(--fw-medium)}
.mg-cover__motif{position:absolute;right:-4%;top:34%;color:var(--accent);opacity:.9;pointer-events:none}
.mg-cover-wrap{container-type:inline-size;width:100%}
.mg-cover--green{background:var(--band-bg);color:var(--band-fg)}
.mg-cover--green .mg-cover__title,.mg-cover--green .mg-wordmark{color:var(--band-fg)}
.mg-cover--green .mg-cover__subtitle{color:var(--green-100)}
.mg-cover--green .mg-eyebrow{color:var(--band-muted)}
.mg-cover--green .mg-cover__meta{border-top-color:var(--green-300)}
.mg-cover--green .mg-cover__meta dt{color:var(--green-300)}
.mg-cover--green .mg-cover__meta dd{color:var(--gray-25)}
.mg-cover--green .mg-cover__motif{color:var(--green-600);opacity:1}