@import url("https://fonts.googleapis.com/css2?family=Instrument+Sans:ital,wght@0,400..700;1,400..700&family=Instrument+Serif:ital@0;1&family=Archivo:ital,wdth,wght@0,62..125,100..900;1,62..125,100..900&family=Geist:wght@100..900&family=Geist+Mono:wght@100..900&display=swap");
/* GENERATED by finish-templates.py. Do not edit.
   Flattened from the design system's own @import chain, source order
   preserved exactly: tokens/fonts.css -> tokens/colors.css -> tokens/typography.css -> tokens/spacing.css -> tokens/borders.css -> tokens/motion.css -> tokens/semantic.css -> tokens/fig-tokens.css -> tokens/fig-typography.css -> tokens/base.css -> styles.css -> tokens/a11y-corrections.css
   a11y-corrections.css is LAST on purpose - it re-points the two
   semantic text roles that fail WCAG AA. See CONTRAST-FIX-2026-08-04.md. */

/* ---- tokens/fonts.css ---- */
/* Jellytot webfonts.
   Instrument Sans, Instrument Serif, Archivo, Geist Mono and Geist are Google
   Fonts, loaded from the Google CDN. PP Right Grotesk is the licensed Pangram
   Pangram display face and is self-hosted from assets/fonts/. */


@font-face {
  font-family: "PP Right Grotesk";
  src: url("assets/fonts/PPRightGrotesk-Light.otf") format("opentype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "PP Right Grotesk";
  src: url("assets/fonts/PPRightGrotesk-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "PP Right Grotesk";
  src: url("assets/fonts/PPRightGrotesk-Bold.otf") format("opentype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Core families */
  --font-display: "PP Right Grotesk", "Archivo", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-heading: "Archivo", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-sans: "Instrument Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-serif: "Instrument Serif", ui-serif, Georgia, "Times New Roman", serif;
  --font-mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --font-ui: "Geist", "Instrument Sans", -apple-system, sans-serif;
}

/* ---- tokens/colors.css ---- */
/* Jellytot colour primitives — values transcribed verbatim from the
   "01 · Foundations" specimen sheet and the canonical site frames. */
:root {
  /* Brand palette — plum */
  --plum-900: #341B55;
  --plum-800: #563E77;
  --plum-700: #4A3861;
  --plum-500: #6B4C9A;
  --plum-400: #7A7286;
  --plum-300: #998FAD;
  --plum-200: #CFC7DC;
  --plum-100: #C9C2D4;

  /* Grounds */
  --cream: #FDFAF3;
  --sand: #F4F1E9;
  --stone: #E0DCD3;
  --parchment: #E7E3DA;
  --white: #FFFFFF;
  --near-black: #1C0D30;

  /* Accents */
  --gold: #F5B731;
  --orange: #E8752A;
  --teal: #4DB6AC;

  /* Rules */
  --rule-hairline: #E0DCD3;
  --rule-warm: #E4DCC6;
  --rule-plate: #F2E9DD;
  --rule-dark: #3A2F52;
  --rule-on-plum: #563E77;

  /* Ink */
  --ink-900: #341B55;
  --ink-700: #4A3861;
  --ink-600: #3A3140;
  --ink-500: #7A7286;
  --ink-400: #998FAD;

  /* Annotation only — spec-sheet measurement chips, never product UI */
  --spec-blue: #3F8CFF;
}

/* ---- tokens/typography.css ---- */
/* Jellytot type scale — exact values from "Typography Scale" in 01 · Foundations
   plus the label/mono roles used on the canonical site. */
:root {
  /* Display & headings (display family) */
  --type-display-l-size: 72px;   --type-display-l-lh: 1.05;  --type-display-l-ls: -0.03em;  --type-display-l-weight: 600;
  --type-h1-size: 56px;          --type-h1-lh: 1.1;          --type-h1-ls: 0.005em;         --type-h1-weight: 600;
  --type-h2-size: 50px;          --type-h2-lh: 1.15;         --type-h2-ls: -0.01em;         --type-h2-weight: 600;
  --type-h3-size: 40px;          --type-h3-lh: 1.2;          --type-h3-ls: 0em;             --type-h3-weight: 600;
  --type-h4-size: 24px;          --type-h4-lh: 1.25;         --type-h4-ls: 0em;             --type-h4-weight: 600;
  --type-kicker-size: 13px;      --type-kicker-lh: 1.4;      --type-kicker-ls: 0.08em;      --type-kicker-weight: 600;

  /* Editorial (serif) */
  --type-editorial-l-size: 34px; --type-editorial-l-lh: 1.45;
  --type-editorial-m-size: 30px; --type-editorial-m-lh: 1.40;
  --type-pullquote-size: 32px;   --type-pullquote-lh: 1.40;

  /* Prose & interface (sans) */
  --type-body-l-size: 20px;      --type-body-l-lh: 1.75;
  --type-body-m-size: 19px;      --type-body-m-lh: 1.70;
  --type-body-s-size: 16px;      --type-body-s-lh: 1.60;
  --type-body-xs-size: 15px;     --type-body-xs-lh: 1.60;
  --type-emphasis-weight: 500;
  --type-caption-size: 19px;     --type-caption-lh: 1.60;    --type-caption-weight: 500;
  --type-meta-size: 14px;        --type-meta-lh: 1.60;
  --type-micro-size: 11px;       --type-micro-lh: 1.65;      --type-micro-ls: 0.16em;

  /* Section labels (site) — sans, 12px, wide caps */
  --type-label-size: 12px;       --type-label-lh: 1.65;      --type-label-ls: 0.16em;       --type-label-weight: 500;

  /* Mono system labels (diagnostic, figure captions) */
  --type-mono-size: 12px;        --type-mono-lh: 16px;       --type-mono-ls: 0.14em;        --type-mono-weight: 500;
  --type-mono-s-size: 11px;      --type-mono-s-lh: 14px;     --type-mono-s-ls: 0.10em;

  /* Wordmark set as type */
  --type-wordmark-ls: 0.04em;

  /* Statistic numeral */
  --type-stat-size: 104px;       --type-stat-lh: 1;          --type-stat-ls: -0.02em;
}

/* ---- tokens/spacing.css ---- */
/* Spacing scale — the ten steps shown in "Spacing Scale", plus page-grid rules. */
:root {
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 80px;
  --space-10: 120px;

  /* Page grid */
  --page-width: 1440px;
  --grid-columns: 12; /* @kind other */
  --grid-gap: 16px;
  --grid-margin: 120px;

  /* Section rhythm used on the canonical site */
  --section-pad-y: 120px;
  --section-pad-x: 64px;
  --section-pad-x-narrow: 115px;
  --footer-pad-top: 76px;
  --footer-pad-bottom: 56px;
}

/* ---- tokens/borders.css ---- */
/* Radii and rule weights. The system is deliberately low-radius:
   plates and cards sit at 4–8px, only pills go fully round. */
:root {
  --radius-0: 0px;
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-plate: 8px;
  --radius-lg: 24px;
  --radius-full: 9999px;

  --rule-1: 1px;
  --rule-2: 2px;

  /* Jellytot uses inset hairlines, not drop shadows. */
  --border-hairline: inset 0 0 0 1px var(--rule-hairline);
  --border-hairline-on-plum: inset 0 0 0 1px var(--rule-on-plum);
  --border-radio: inset 0 0 0 1px var(--ink-500);
}

/* ---- tokens/motion.css ---- */
/* Motion. The source file specifies no animation; the system is static and
   print-derived. These are the only transitions sanctioned for prototypes:
   short, linear-ish colour/opacity crossfades. Never bounce, never scale-in. */
:root {
  --ease-standard: cubic-bezier(0.22, 0.61, 0.36, 1); /* @kind other */
  --duration-fast: 120ms; /* @kind other */
  --duration-base: 180ms; /* @kind other */
  --opacity-disabled: 0.4; /* @kind other */
}

/* ---- tokens/semantic.css ---- */
/* Semantic aliases — always prefer these over the raw primitives. */
:root {
  /* Text */
  --text-heading: var(--plum-900);
  --text-body: var(--plum-700);
  --text-muted: var(--plum-400);
  --text-link: var(--plum-500);
  --text-accent: var(--orange);
  --text-stat: var(--plum-500);
  --text-on-dark: var(--cream);
  --text-on-dark-muted: var(--plum-200);
  --text-on-dark-faint: var(--plum-300);

  /* Surfaces */
  --surface-page: var(--cream);
  --surface-raised: var(--white);
  --surface-sunken: var(--sand);
  --surface-plate: var(--parchment);
  --surface-dark: var(--plum-900);
  --surface-dark-deep: var(--near-black);

  /* Lines */
  --line-default: var(--rule-hairline);
  --line-heavy: var(--plum-900);
  --line-accent: var(--gold);
  --line-on-dark: var(--rule-on-plum);

  /* Controls */
  --control-primary-bg: var(--gold);
  --control-primary-fg: var(--plum-900);
  --control-secondary-border: var(--plum-900);
  --control-secondary-fg: var(--plum-900);
  --control-secondary-border-on-dark: var(--rule-on-plum);
  --control-secondary-fg-on-dark: var(--cream);
  --control-ghost-fg: var(--plum-500);
  --control-h-lg: 56px;
  --control-h-md: 44px;
  --control-h-sm: 36px;

}

/* ---- tokens/fig-tokens.css ---- */
/* Generated from Figma Variables. First mode = :root default.
   FLOAT tokens are unitless — multiply by 1px in calc() where a length is needed. */

:root {
  --accent-gold: rgb(245,183,49); /* @kind color */
  --accent-orange: rgb(232,117,42); /* @kind color */
  --accent-purple: rgb(107,76,154); /* @kind color */
  --accent-teal: rgb(77,182,172); /* @kind color */
  --alterego-ink: rgb(26,24,22); /* @kind color */
  --alterego-oxblood: rgb(110,60,50); /* @kind color */
  --alterego-paper: rgb(252,250,243); /* @kind color */
  --alterego-periwinkle: rgb(170,175,235); /* @kind color */
  --alterego-warm-grey: rgb(139,137,132); /* @kind color */
  --geist-grey-300: rgb(204,204,204); /* @kind color */
  --geist-grey-400: rgb(169,169,169); /* @kind color */
  --geist-grey-500: rgb(128,128,128); /* @kind color */
  --geist-grey-800: rgb(51,51,51); /* @kind color */
  --geist-ink: rgb(0,0,0); /* @kind color */
  --geist-paper: rgb(255,255,255); /* @kind color */
  --ground-cream: rgb(255,248,231); /* @kind color */
  --ground-near-black: rgb(28,13,48); /* @kind color */
  --ground-sand: rgb(232,223,201); /* @kind color */
  --ground-warm-cream: rgb(245,239,224); /* @kind color */
  --ink-default: rgb(28,13,48); /* @kind color */
  --ink-muted: rgb(122,114,134); /* @kind color */
  --ink-on-dark-muted: rgb(201,194,212); /* @kind color */
  --ink-on-dark: rgb(255,248,231); /* @kind color */
  --ink-plum: rgb(52,27,85); /* @kind color */
  --ink-secondary: rgb(58,49,64); /* @kind color */
  --karsten-ink: rgb(0,0,0); /* @kind color */
  --karsten-link-blue: rgb(0,0,255); /* @kind color */
  --karsten-paper: rgb(255,255,255); /* @kind color */
  --karsten-row-hover: rgb(245,245,245); /* @kind color */
  --karsten-rule: rgb(156,163,175); /* @kind color */
  --line-rule-dark: rgb(58,47,82); /* @kind color */
  --line-rule: rgb(228,220,198); /* @kind color */
}

/* ---- tokens/fig-typography.css ---- */
/* No TEXT/EFFECT styles in this file. */

/* ---- tokens/base.css ---- */
/* Minimal global base. Jellytot pages sit on cream with plum ink. */
body { margin: 0; background: var(--surface-page); color: var(--text-body); font-family: var(--font-sans); -webkit-font-smoothing: antialiased; text-wrap: pretty; }
a { color: var(--text-link); text-decoration: underline; text-underline-offset: 2px; }
a:hover { color: var(--plum-900); }
::selection { background: var(--gold); color: var(--plum-900); }

/* ---- styles.css ---- */
/* LAST on purpose: this re-points the two semantic text roles that fail WCAG AA
   (--text-muted, --text-accent) and must win over both semantic.css and
   fig-tokens.css. See CONTRAST-FIX-2026-08-04.md. */

/* ---- tokens/a11y-corrections.css ---- */
/* ACCESSIBILITY CORRECTIONS. Load LAST, after colors.css and fig-tokens.css.
 *
 * Measured 2026-08-04. Seven of the design system's semantic text/surface pairs
 * failed WCAG 2.2 SC 1.4.3 (4.5:1 for body text). Two values caused all seven.
 *
 * WHY THIS IS ITS OWN FILE, and not an edit to the two files that hold the values:
 *
 *   tokens/colors.css says its values are "transcribed verbatim from the
 *   01 · Foundations specimen sheet". Editing it would make that sentence false,
 *   and the record of what the specimen sheet says is worth keeping.
 *
 *   tokens/fig-tokens.css says "Generated from Figma Variables". An edit there is
 *   overwritten by the next generation, silently, and the fix would look present
 *   in the repo while being absent from the build.
 *
 * So the brand primitives stay exactly as both sources declare them and remain the
 * FILLS. Only the semantic TEXT roles move, and they move here where the change is
 * visible as a correction rather than smuggled into a file that claims to be a
 * transcript.
 *
 * THE METHOD: lightness lowered in HLS, hue and saturation untouched, until the
 * value clears 4.6:1 against the DARKEST light ground either source declares
 * (--stone #E0DCD3). Not against the page ground: a token that passes on cream and
 * fails on stone is a token that fails wherever someone puts it on stone.
 */
:root {
  /* --plum-400 / --ink-500 / --ink-muted, all #7A7286, all the same failure.
     Was 4.40:1 on --cream and 3.35:1 on --stone. Now 6.04 and 4.60.
     Hue 264.0deg held to 262.5deg; saturation 0.081 held to 0.081. */
  --ink-muted-safe: #645D6E;

  /* --orange / --accent-orange #E8752A. The worst pair in the system: it failed
     on ALL FOUR light surfaces, at 2.87:1 on the page ground and 2.19:1 on stone.
     Now 6.10 and 4.65. Hue 23.7deg held exactly; saturation 0.805 -> 0.804.
     The brand orange is UNCHANGED and stays the fill: this is its text sibling,
     the same separation the live site uses (--orange-ink). */
  --orange-ink: #9B4711;

  /* The two semantic roles that were failing, re-pointed. Everything else in
     semantic.css was already clear and is deliberately not touched here. */
  --text-muted: var(--ink-muted-safe);
  --text-accent: var(--orange-ink);
}

/* WHAT THIS DOES NOT FIX, recorded so the gap is not mistaken for coverage:
 *
 * THE PLUM RAMP INVERTS TWICE. A ramp is a promise that the number tracks
 * lightness, and this one breaks it in two places:
 *     plum-100 #C9C2D4  luminance 0.5575
 *     plum-200 #CFC7DC  luminance 0.5928   <- LIGHTER than 100
 *     plum-700 #4A3861  luminance 0.0515
 *     plum-800 #563E77  luminance 0.0676   <- LIGHTER than 700
 * Not corrected here because renumbering a ramp renames tokens, and every
 * consumer of --plum-200 and --plum-800 would move with it. That is a breaking
 * amendment and belongs to whoever owns the brand, not to a contrast fix.
 *
 * THE TWO SOURCES DISAGREE ABOUT THE GROUNDS. colors.css and fig-tokens.css
 * agree on ink, gold, orange and near-black, and disagree on the grounds:
 *     --cream #FDFAF3   vs   --ground-cream #FFF8E7
 *     --sand  #F4F1E9   vs   --ground-sand  #E8DFC9
 * --ground-sand is markedly darker, which is why it is in the measurement set
 * above. Which of the two is the real page ground is a decision, not a defect to
 * patch: picking one here would make this file the third source.
 */

/* hover states, hoisted from the style-hover attributes in templates/*.dc.html */
.dch-1:hover { background-color:#E8752A; }
.dch-2:hover { box-shadow:inset 0 0 0 1px #6B4C9A; }
.dch-3:hover { color:#341B55; }
.dch-4:hover { background-color:#341B55;color:#FDFAF3; }

/* The revealed state of the reveal-on-scroll elements. The markup carries
   `opacity:0;transform:translateY(Npx)` inline and the script adds this class, so
   these need !important to win. Kept in CSS rather than written back onto
   element.style because mutating element.style re-serialises the whole attribute
   and breaks the [style*="..."] selectors the responsive layer depends on. */
[data-reveal].is-revealed { opacity: 1 !important; transform: translateY(0) !important; }
/* Nothing reveals without JavaScript otherwise, and the content would be invisible
   rather than merely unanimated. */
@media (scripting: none) {
  [data-reveal] { opacity: 1 !important; transform: none !important; }
}

/* Keyboard focus. The templates declare hover and no focus, so this is added
   rather than transcribed: WCAG 2.2 SC 2.4.7 needs a visible focus indicator and
   :focus-visible keeps it off mouse clicks. */
:where(a, button, [tabindex]):focus-visible {
  outline: 3px solid #6B4C9A;
  outline-offset: 3px;
  border-radius: 2px;
}
footer :where(a):focus-visible { outline-color: #F5B731; }
@media (prefers-reduced-motion: reduce) {
  /* The reveal-on-scroll transitions and every hover transition in the templates.
     The reveal script sets opacity/transform inline, so the end state still
     applies - only the animating is switched off. */
  *, *::before, *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}

/* Plate resolution. Each plate is encoded at the width the design
   actually paints it (measured from the live DC runtime, see
   optimise-plates-2x.py) and again at twice that. The 1x file is named
   inline in the markup; these rules swap in the 2x on a display that
   can resolve it. !important because the markup sets `background`
   inline as a shorthand.
   Overriding background-image alone keeps the position, size and repeat
   the shorthand established - only the image source moves. */
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 1.5dppx) {
  [style*="art-kernel-1x.4b892e16.webp"] { background-image: url("assets/plates/art-kernel-2x.2be6e85c.webp") !important; }
  [style*="art-taxonomy-1x.8c5779a9.webp"] { background-image: url("assets/plates/art-taxonomy-2x.77ecbf4c.webp") !important; }
  [style*="b-case-3-branching-1x.109c4d95.webp"] { background-image: url("assets/plates/b-case-3-branching-2x.6c496cb9.webp") !important; }
  [style*="case-art-2-1x.98b0421d.webp"] { background-image: url("assets/plates/case-art-2-2x.ca301b23.webp") !important; }
  [style*="case-art-3-1x.1c01497e.webp"] { background-image: url("assets/plates/case-art-3-2x.2fe965be.webp") !important; }
  /* cb-reflex-chain.png: source is 1926px, 1x already at the native ceiling - no 2x exists to swap in */
  [style*="hero-sankey-1x.70d6a3ce.webp"] { background-image: url("assets/plates/hero-sankey-2x.b1cc4bcf.webp") !important; }
  [style*="mark-part-10-1x.ae98d386.webp"] { background-image: url("assets/plates/mark-part-10-2x.4befa168.webp") !important; }
  [style*="mark-part-3-4-1x.d0917d91.webp"] { background-image: url("assets/plates/mark-part-3-4-2x.70932f9d.webp") !important; }
  [style*="mark-part-5-6-1x.425fb081.webp"] { background-image: url("assets/plates/mark-part-5-6-2x.09d7851a.webp") !important; }
  [style*="plate-hero-rose-1x.eb692d5f.webp"] { background-image: url("assets/plates/plate-hero-rose-2x.42c0d220.webp") !important; }
  [style*="wash-right-1x.00445b45.webp"] { background-image: url("assets/plates/wash-right-2x.11e031fd.webp") !important; }
}

/* ------------------------------------------------------------------ responsive
   The templates set `min-width:1440px` on the page wrapper: the design as
   authored is a fixed 1440 desktop layout. Every rule below is inside a
   max-width query, so at 1440 and above the rendering is the template's.
   ---------------------------------------------------------------------------- */
@media (max-width: 1439px) {
  body > div[style*="min-width:1440px"] { min-width: 0 !important; }
  /* Percentage gutters (`padding: 80px 16%`) are 230px at 1440 and far too much
     of a narrow viewport. Clamp keeps the designed proportion until it would eat
     the content, then holds a floor. */
  [style*="16%"] {
    padding-left: clamp(24px, 8%, 16%) !important;
    padding-right: clamp(24px, 8%, 16%) !important;
  }

  /* THE HERO'S GUTTER. Every section below the hero uses 16%, which clamps to 8% on a
     narrower canvas - but the hero's frame is written out as a flat 177px, so at 1366 the
     hero sat 68px INSIDE a page whose sections had moved out to 109px. Worse, its two
     columns total exactly 1440 with that frame, so below 1440 they had nowhere to go: the
     headline wrapped to two lines and the subtitle shrank to 274px, dropped to four lines
     and slid left to 915. Measured at 1366, 1280, 1200 and 1100 before and after.
     Same clamp as the sections, and space-between keeps the subtitle pinned right rather
     than letting the gap drag it inward. */
  div[style*="padding:163px"] {
    padding-left: clamp(24px, 8%, 177px) !important;
    padding-right: clamp(24px, 8%, 177px) !important;
    justify-content: space-between !important;
    gap: 48px !important;
  }

  /* THE WRITING-POST EDITORIAL INSET, collapsed for every canvas narrower than the
     one it was drawn for. Its body sections hold the text column off the left edge
     to open a margin-note gutter, and they do it three ways at once:
       margin-left:210px                        on the column itself
       padding: ... calc(<gutter> + 260px) ...   on the section
       right:-260px / left:210px                 on the absolutely positioned notes
     All three collapse together - miss one and the column is pushed off-screen by
     whichever survives.

     WHY 1439 AND NOT 1100. The gutter is sized `max(40px, (100% - 1200px) / 2)`,
     which only reaches 260px once the viewport is around 1460 wide. At 1200 it is
     40px, so a note pinned at right:-260px landed 40px past the viewport edge -
     measured, at exactly that width, after the phone widths were already clean.
     A margin note is a 1440-canvas affordance; below that it belongs in the flow. */
  section[style*="calc((100% - 1200px)"] {
    padding-left: 24px !important;
    padding-right: 24px !important;
  }
  [style*="margin-left:210px"] { margin-left: 0 !important; }
  [style*="right:-260px"],
  [style*="left:210px"][style*="position:absolute"] {
    position: static !important;
    left: auto !important;
    right: auto !important;
    width: auto !important;
    max-width: 100% !important;
    margin: 8px 0 24px !important;
  }

  /* THE DIAGNOSTIC CARD'S QUESTION COLUMN. It is `height:247px` with the timing
     label pinned inside it at `top:234px`, which is exact for one row of four
     option pills on a 1440 canvas. On anything narrower the pills wrap, so they
     spilled out through the bottom of the white card and landed on top of
     "About 1 minute". The height becomes content-driven and the label rejoins the
     flow, in that order - releasing only one of the two leaves the collision. */
  div[style*="height:247px"] { height: auto !important; }
  span[style*="top:234px"] {
    position: static !important;
    left: auto !important;
    top: auto !important;
    margin-top: 4px !important;
  }}
@media (max-width: 1100px) {
  /* Two-column feature rows: image beside prose becomes image above prose.
     Ordered so the prose leads on a phone, where the plate is decorative. */
  section[style*="display:flex"][style*="gap:64px"],
  section[style*="display:flex"][style*="gap:120px"] {
    flex-direction: column !important;
    gap: 40px !important;
  }
  section[style*="display:flex"] > div[style*="flex:0 0 44%"] {
    flex-basis: auto !important;
    width: 100% !important;
    order: 2;
  }
  /* The three-up story grid, and the writing-post's 170/1fr/220 sidebar grid. */
  div[style*="grid-template-columns:repeat(3"] { grid-template-columns: 1fr !important; }
  div[style*="grid-template-columns:repeat(2"] { grid-template-columns: 1fr !important; }
  section[style*="grid-template-columns:170px"] {
    grid-template-columns: 1fr !important;
    padding-left: 24px !important;
    padding-right: 24px !important;
  }
  section[style*="grid-template-columns:170px"] > aside { display: none !important; }

  /* THE WRITING-POST FIGURE ROWS. Each is `display:flex;gap:36px` holding a
     `figure` of fixed width with flex-shrink:0 beside a prose column at
     `flex:1;min-width:0`. Because the figure refuses to shrink, the prose column
     is the only thing that can give, and below about 1100 it gives all the way
     down to 95px and then its own text overflows it. Measured, not guessed: the
     prose column reported scrollWidth 131 in a clientWidth of 95.
     Stacking is the fix, and the figure has to be allowed to shrink as well or it
     alone still exceeds a phone. */
  div[style*="gap:36px"][style*="align-items:flex-start"] {
    flex-direction: column !important;
    gap: 20px !important;
  }
  figure[style*="flex-shrink:0"] {
    flex-shrink: 1 !important;
    width: auto !important;
    max-width: 100% !important;
  }
  /* The numbered discipline rows, `position:relative;display:flex`. */
  div[style*="position:relative;display:flex"] {
    flex-wrap: wrap !important;
    gap: 16px !important;
  }
  /* The 730px body column: its width override lands at 900, but the rows above
     start failing at 1100, so it has to become fluid at the same breakpoint or the
     stacking has nothing to stack inside. */
  div[style*="width:730px"] {
    width: auto !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }
  /* The sticky on-page nav: four section links plus SHARE/PRINT in a
     space-between row. Wrapping is the only thing that fits. */
  nav[style*="position:sticky"] {
    flex-wrap: wrap !important;
    gap: 12px 20px !important;
    justify-content: flex-start !important;
  }
  nav[style*="position:sticky"] > div { flex-wrap: wrap !important; gap: 12px 20px !important; }
}
@media (max-width: 900px) {
  header { padding-left: 24px !important; padding-right: 24px !important; }
  /* The diagnostic card is absolutely positioned and hangs below the plate band.
     In a stacked layout there is nothing to hang off, so it rejoins the flow. */
  div[style*="position:absolute"][style*="bottom:-72px"] {
    position: static !important;
    left: auto !important;
    bottom: auto !important;
    width: auto !important;
    margin: 24px !important;
    flex-direction: column !important;
    gap: 28px !important;
    padding: 32px 24px !important;
  }
  /* The footer card's 40px side margin is most of a phone screen. */
  footer[style*="border-radius:24px"] {
    width: calc(100% - 32px) !important;
    margin: 24px auto !important;
    padding: 36px 24px !important;
  }
  footer > div[style*="justify-content:space-between"] {
    flex-direction: column !important;
    gap: 32px !important;
  }
  /* The footer's two-column link grid: 72px between columns is set for a 420px
     block on a 1440 canvas. */
  footer div[style*="grid-template-columns:auto auto"] {
    column-gap: 32px !important;
    row-gap: 12px !important;
  }
  /* The five-decision definition list, and the evidence stats. */
  dl > div > div[style*="gap:64px"] { flex-direction: column !important; gap: 8px !important; }
  div[style*="gap:80px"][style*="align-items:flex-start"] { flex-direction: column !important; gap: 40px !important; }
  div[style*="display:flex"][style*="gap:40px"] { flex-wrap: wrap !important; }
  /* Type scale. The display sizes are set for a 1440 canvas; these hold the
     designed ratios while letting the largest headings fit a phone. */
  h1 { font-size: clamp(34px, 8.5vw, 69px) !important; }
  h2 { font-size: clamp(26px, 5.6vw, 50px) !important; }
  h3 { font-size: clamp(21px, 4.4vw, 30px) !important; }
  span[style*="font-size:104px"] { font-size: clamp(56px, 14vw, 104px) !important; }
}

/* The diagnostic's two screens are drawn 1440x940 - a fixed full-bleed app screen,
   not a scrolling page - so none of the section rules above reach them. */
@media (max-width: 1439px) {
  [data-screen] { width: 100% !important; }
}
@media (max-width: 1300px) {
  /* 115px padding either side plus a 980px question needs 1210px. Below that the
     question, the finding body (820) and the hint (760) all have to become fluid, or
     the screen scrolls sideways - which it did at 1024. */
  [data-screen] h1,
  [data-screen] p,
  [data-screen] > span {
    width: auto !important;
    max-width: 100% !important;
  }
}
@media (max-width: 1140px) {
  /* THE MARKETING HERO, stacked. Derived, not picked: the columns need
     620 + 40 + 298 = 958px and the clamped gutter takes 8% a side, so the row fits
     only while 0.84 x viewport >= 958 - that is 1141px. At 1100 this rule left a
     1101-1140 band where the row did not fit and shrank instead, wrapping the
     headline to two lines. Re-derive this number if any of the three widths change. */
  div[style*="padding:163px"] {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 28px !important;
  }
  div[style*="padding:163px"] > * {
    width: auto !important;
    max-width: 100% !important;
  }
}
@media (max-width: 900px) {
  [data-screen] {
    padding: 40px 24px !important;
    min-height: 0 !important;
  }
  /* 44/52 and 72/1.02 are set for a 1440 canvas. */
  [data-screen="question"] h1 { font-size: clamp(26px, 6vw, 44px) !important; line-height: 1.25 !important; }
  [data-screen="finding"] h1 { font-size: clamp(34px, 9vw, 72px) !important; }
  [data-screen] [data-opt] { padding: 16px 18px !important; }
  [data-screen] [data-opt] > span:last-child { font-size: 17px !important; line-height: 25px !important; }
}

@media (max-width: 900px) {
  /* 24 fixed widths found in the built markup: 220, 298, 300, 320, 330, 340, 360, 420, 466, 520, 560, 620, 640, 700, 730, 760, 774, 780, 800, 820, 830, 900, 980, 1440 */
  [style*="width:220px"],
  [style*="width:298px"],
  [style*="width:300px"],
  [style*="width:320px"],
  [style*="width:330px"],
  [style*="width:340px"],
  [style*="width:360px"],
  [style*="width:420px"],
  [style*="width:466px"],
  [style*="width:520px"],
  [style*="width:560px"],
  [style*="width:620px"],
  [style*="width:640px"],
  [style*="width:700px"],
  [style*="width:730px"],
  [style*="width:760px"],
  [style*="width:774px"],
  [style*="width:780px"],
  [style*="width:800px"],
  [style*="width:820px"],
  [style*="width:830px"],
  [style*="width:900px"],
  [style*="width:980px"],
  [style*="width:1440px"] {
    width: auto !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
}