/* =============================================================================
   policyratio — SWISS MODERN DESIGN SYSTEM
   /system.css · the single shared stylesheet for every page on the marketing +
   product shell (index, how-it-works, coverage, login, settings, app).

   Source of truth: designs/landing-18-swiss-modern.html ("Swiss Modern"),
   generated by UI/scripts/build-landing-18.mjs. Spec for consumers:
   designs/system-contract.md.

   -----------------------------------------------------------------------------
   THE THESIS
   International Typographic Style, brought up to date. A rigid 12-column grid
   running edge to edge with NO gutters between planes; flat saturated colour
   planes butting against one another; large confident type; zero ornament, zero
   depth, zero radius. Authority comes from structural rigour — the page must
   read as a SYSTEM, because a system is what the company sells.

   -----------------------------------------------------------------------------
   THE FIVE RULES. A page that breaks any of these is off-system.

   1. NO RADIUS.      `border-radius: 0` everywhere, including focus rings and
                      form controls. This sheet enforces it with `*{border-radius:0!important}`.
   2. NO GRADIENTS.   Not one `-gradient()` function in any sheet, at any instant.
                      Backgrounds are single opaque colours. The ONLY permitted
                      animated background is `.breathe` (flatShift): one flat
                      background-color moved a few percent over 26s. It is never
                      a gradient at any instant.
   3. FLAT.           No box-shadow outside a focus ring. No blur, no glow, no
                      translucency over content, no elevation of any kind.
   4. COLOUR BY JOB.  Three hues, each with ONE fixed job (below). A hue is never
                      used decoratively, never used for a second job, and never
                      used to carry meaning on its own (WCAG 1.4.1) — form and
                      omission carry meaning, hue confirms it.
   5. WCAG-MEASURED.  Every pair below is measured against the ACTUAL PAINTED
                      PIXELS in BOTH themes: text >= 4.5:1 (large text >= 3:1),
                      non-text/boundaries/focus >= 3:1. Do not derive new colours
                      from the token engine — it is APCA-gated only and its
                      defaults fail 4.5:1. If you need a new colour, measure it.

   -----------------------------------------------------------------------------
   THE THREE HUES AND THEIR FIXED JOBS

     --blue     IDENTITY.  Who we are. The hero identity plane, the brand plane
                           in the chrome, and the cell about the RECORD.
     --verm     THE ONE THING / THE REFUSAL. The full-bleed statement band, and
                           any surface whose subject is "we return nothing".
     --ochre    TRACE.     Section marks, numerals, isotype units, the controls
                           plane, the travelling mark. Never a background for
                           long-form reading.
     --neutral  (achromatic, not a hue) carries the "people" moments so the three
                           hues keep their jobs. It INVERTS between themes — slate
                           in light, chalk in dark — so four planes stay four.

   -----------------------------------------------------------------------------
   TOKENS

   Theme-dependent (redeclared in all FOUR theme arms):
     --paper --paper-2          page grounds
     --ink-1 --ink-2            body ink / secondary ink on paper
     --rule                     hairline rule on paper (>=3:1, non-text only)
     --blue     --on-blue     --on-blue-2
     --verm     --on-verm     --on-verm-2
     --ochre    --on-ochre    --on-ochre-2
     --neutral  --on-neutral  --on-neutral-2
   `--on-X` is the primary ink for plane X; `--on-X-2` is its dimmed ink and is
   still >= 4.5:1. There is no third step. Do not invent one.

   Theme-invariant (declared once on :root):
     --ui-sans --ui-mono        system stacks only — ZERO external requests
     --pad --chrome-h           plane padding / chrome height
     --space-0 … --space-24     4px-based space scale
     --text-xs … --text-display type scale
     --dur-* --ease-*           motion
     --z-*                      stacking

   -----------------------------------------------------------------------------
   THE FOUR THEME ARMS — all four are required, in this order. Light is default.
     :root { }                                                    (light default)
     @media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) { } }
     :root[data-theme="dark"] { }
     :root[data-theme="light"] { }                (the arm usually forgotten)
   `data-theme` is set pre-paint from localStorage['theme'] ('dark'|'light') by an
   inline script that MUST be the first thing in <head>, before any style.

   -----------------------------------------------------------------------------
   GRID
   `.g12` = 12 equal columns, full bleed, NO gutters, NO max-width. Every plane
   states its own start and end column so planes BUTT and every horizontal edge
   in the document is shared. Use `.c1-13` / `.span-6` etc. or write the
   grid-column yourself. Never introduce a gap or a centred container.
   ============================================================================= */


/* ===========================================================================
   1. TOKENS — theme arm 1/4: light, the default
   =========================================================================== */
:root {
  --paper: #F1F0EA;        /* ground */
  --paper-2: #E3E2DA;
  --ink-1: #101216;        /* 16.42:1 on paper */
  --ink-2: #4B4E57;        /*  7.28:1 on paper */
  --rule: #7E828C;         /*  3.44:1 on paper — non-text floor only */
  --blue: #0C36A0;         /* white 10.24:1 · --on-blue-2 7.80:1 */
  --on-blue: #FFFFFF;
  --on-blue-2: #D9E0FA;
  --verm: #AE1F0E;         /* white 7.00:1 */
  --on-verm: #FFFFFF;
  --on-verm-2: #F7DAD5;    /*  5.31:1 */
  --ochre: #E8B420;        /* --on-ochre 9.68:1 */
  --on-ochre: #17130A;
  --on-ochre-2: #3D3115;   /*  6.66:1 */
  --neutral: #14161B;      /* paper 15.85:1 */
  --on-neutral: #F1F0EA;
  --on-neutral-2: #B9BCC6; /*  9.54:1 */
}

/* ---- theme arm 2/4: OS dark, unless the user explicitly chose light ---- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #0A0B0E;
    --paper-2: #14161B;
    --ink-1: #EDECE6;      /* 16.63:1 on paper */
    --ink-2: #A9ACB4;      /*  8.67:1 on paper */
    --rule: #666A75;       /*  3.62:1 on paper */
    --blue: #0E3FBE;       /* white 8.06:1 */
    --on-blue: #FFFFFF;
    --on-blue-2: #DCE3FB;
    --verm: #B92311;       /* white 6.34:1 */
    --on-verm: #FFFFFF;
    --on-verm-2: #F9DED9;
    --ochre: #E8B420;      /* ochre is the one plane that never flips */
    --on-ochre: #17130A;
    --on-ochre-2: #3D3115;
    --neutral: #EDECE6;    /* the neutral plane INVERTS so four planes stay four */
    --on-neutral: #14161B; /* 15.29:1 */
    --on-neutral-2: #41444C;
  }
}

/* ---- theme arm 3/4: explicit dark (beats the OS) ---- */
:root[data-theme="dark"] {
  --paper: #0A0B0E;
  --paper-2: #14161B;
  --ink-1: #EDECE6;
  --ink-2: #A9ACB4;
  --rule: #666A75;
  --blue: #0E3FBE;
  --on-blue: #FFFFFF;
  --on-blue-2: #DCE3FB;
  --verm: #B92311;
  --on-verm: #FFFFFF;
  --on-verm-2: #F9DED9;
  --ochre: #E8B420;
  --on-ochre: #17130A;
  --on-ochre-2: #3D3115;
  --neutral: #EDECE6;
  --on-neutral: #14161B;
  --on-neutral-2: #41444C;
}

/* ---- theme arm 4/4: explicit light (beats the OS — the arm usually forgotten) ---- */
:root[data-theme="light"] {
  --paper: #F1F0EA;
  --paper-2: #E3E2DA;
  --ink-1: #101216;
  --ink-2: #4B4E57;
  --rule: #7E828C;
  --blue: #0C36A0;
  --on-blue: #FFFFFF;
  --on-blue-2: #D9E0FA;
  --verm: #AE1F0E;
  --on-verm: #FFFFFF;
  --on-verm-2: #F7DAD5;
  --ochre: #E8B420;
  --on-ochre: #17130A;
  --on-ochre-2: #3D3115;
  --neutral: #14161B;
  --on-neutral: #F1F0EA;
  --on-neutral-2: #B9BCC6;
}

/* ---- theme-invariant tokens ---- */
:root {
  /* System stacks only — no webfont, no external request, ever. */
  --ui-sans: "Helvetica Neue", Helvetica, Inter, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --ui-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;

  --pad: clamp(18px, 1.9vw, 30px);
  --chrome-h: 68px;

  --space-0: 0px;  --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;

  --text-xs: 0.563rem;  --text-sm: 0.750rem;  --text-base: 1.000rem;
  --text-md: 1.333rem;  --text-lg: 1.777rem;  --text-xl: 2.369rem;
  --text-2xl: 3.157rem; --text-3xl: 4.209rem; --text-display: 5.610rem;

  --dur-instant: 80ms; --dur-fast: 160ms; --dur-base: 240ms;
  --dur-slow: 420ms;   --dur-loop: 3200ms;
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --ease-entrance: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-exit: cubic-bezier(0.7, 0, 0.84, 0);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  --z-base: 0; --z-dropdown: 1000; --z-sticky: 1100;
  --z-overlay: 1300; --z-modal: 1400; --z-toast: 1600;
}


/* ===========================================================================
   2. RESET / GROUND
   =========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink-1);
  font-family: var(--ui-sans);
  font-size: 16.5px;
  line-height: 1.5;
  overflow-x: hidden;
  font-synthesis-weight: none;
}
/* RULE 1. ZERO ROUNDED CORNERS. Anywhere. Including focus rings and controls. */
* { border-radius: 0 !important; }
img, svg { max-width: 100%; display: block; }
h1, h2, h3, h4, p, ul, ol, figure, blockquote { margin: 0; }
ul, ol { list-style: none; padding: 0; }
a { color: inherit; }
::selection { background: var(--ochre); color: var(--on-ochre); }


/* ===========================================================================
   3. GRID + PLANE PRIMITIVES
   ONE rule governs a page: twelve equal columns, full bleed, no gutters, no
   max-width. Planes butt; every horizontal edge is shared.
   =========================================================================== */
.g12 { display: grid; grid-template-columns: repeat(12, 1fr); width: 100%; }
.pad { padding: var(--pad); }
.pad-lg { padding: clamp(30px, 3.4vw, 52px) var(--pad); }
.contents { display: contents; }          /* a <ul> that must not become a grid item */
.scroller { overflow-x: auto; max-width: 100%; }  /* wide content scrolls in its own box */

/* explicit column placement — `.c<start>-<end>`, 1-indexed, end exclusive */
.c1-13 { grid-column: 1 / 13; } .c1-7 { grid-column: 1 / 7; }  .c7-13 { grid-column: 7 / 13; }
.c1-6  { grid-column: 1 / 6; }  .c6-13 { grid-column: 6 / 13; } .c1-5 { grid-column: 1 / 5; }
.c5-13 { grid-column: 5 / 13; } .c1-4  { grid-column: 1 / 4; }  .c4-13 { grid-column: 4 / 13; }
.c1-3  { grid-column: 1 / 3; }  .c3-13 { grid-column: 3 / 13; } .c1-10 { grid-column: 1 / 10; }
.c10-13{ grid-column: 10 / 13; }
/* relative spans, for repeated modules */
.span-2 { grid-column: span 2; } .span-3 { grid-column: span 3; }
.span-4 { grid-column: span 4; } .span-6 { grid-column: span 6; }
.span-12 { grid-column: span 12; }
@media (max-width: 1180px) {
  .md-full { grid-column: 1 / 13; }
  .md-span-6 { grid-column: span 6; }
  .md-span-4 { grid-column: span 4; }
}
@media (max-width: 720px) {
  .sm-full, .sm-span-12 { grid-column: 1 / 13; }
}

/* ---- plane colours. Each sets BOTH its ground and its ink. ---- */
.p-blue    { background: var(--blue);    color: var(--on-blue); }
.p-verm    { background: var(--verm);    color: var(--on-verm); }
.p-ochre   { background: var(--ochre);   color: var(--on-ochre); }
.p-neutral { background: var(--neutral); color: var(--on-neutral); }
.p-paper   { background: var(--paper);   color: var(--ink-1); }
.p-paper-2 { background: var(--paper-2); color: var(--ink-1); }
/* `.dim` is the ONE dimmed step available on any plane. Still >= 4.5:1.
   RESOLVED BY INHERITANCE, NOT BY CASCADE ORDER. Each plane declares its own
   --dim-ink; `.dim` just reads it, so the NEAREST plane ancestor always wins.
   The previous form (`.p-blue .dim {…}` … `.p-paper .dim {…}`) had identical
   specificity (0,2,0) on every arm, so source order decided — meaning a blue
   cell nested inside a paper section resolved to the paper rule and painted a
   dimmed label at 1.23:1. Two agents hit that independently on real pages.
   Nesting a plane inside a plane is normal here, so the fix has to be
   nesting-proof rather than an ordering convention someone must remember. */
.p-blue    { --dim-ink: var(--on-blue-2); }
.p-verm    { --dim-ink: var(--on-verm-2); }
.p-ochre   { --dim-ink: var(--on-ochre-2); }
.p-neutral { --dim-ink: var(--on-neutral-2); }
.p-paper,
.p-paper-2 { --dim-ink: var(--ink-2); }
.dim { color: var(--dim-ink, var(--ink-2)); }
/* hairline between two cells on the SAME plane; on a coloured plane it is the
   plane's own ink so it never drops below 3:1. */
.edge-l { border-left: 1px solid var(--rule); }
.edge-t { border-top: 1px solid var(--rule); }
.p-blue > .edge-l, .p-verm > .edge-l, .p-ochre > .edge-l, .p-neutral > .edge-l,
.p-blue .edge-l.on-plane, .p-verm .edge-l.on-plane,
.p-ochre .edge-l.on-plane, .p-neutral .edge-l.on-plane { border-left-color: currentColor; }
.heavy-b { border-bottom: 2px solid var(--ink-1); }
.heavy-t { border-top: 2px solid var(--ink-1); }


/* ===========================================================================
   4. TYPE SCALE
   Headlines are MONOCHROME. Colour emphasis never lands on the last word of a
   headline — that is house style and it is banned.
   =========================================================================== */
.label {
  font-family: var(--ui-mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 500;
}
.mono { font-family: var(--ui-mono); }
h1, .h1 {
  font-size: clamp(38px, 6.67vw, 96px);
  line-height: 0.94;
  letter-spacing: -0.028em;
  font-weight: 700;
  text-wrap: balance;
}
.h2 {
  font-size: clamp(30px, 3.5vw, 50px);
  line-height: 1.02;
  letter-spacing: -0.024em;
  font-weight: 700;
}
.h3 {
  font-size: clamp(18px, 1.45vw, 21px);
  line-height: 1.16;
  letter-spacing: -0.012em;
  font-weight: 700;
}
.body-lg { font-size: clamp(16px, 1.28vw, 18.5px); line-height: 1.45; }
.body-sm { font-size: 15px; line-height: 1.45; }
.measure { max-width: 56ch; }
/* the required disclaimer sits at BODY contrast — never a faint footnote */
.notice { font-size: 14.5px; line-height: 1.45; max-width: 54ch; }
.tagline { font-size: 15.5px; font-weight: 600; }


/* ===========================================================================
   5. CHROME — brand plane + controls plane
   There is NO header band. The chrome RIDES on two planes that the page below
   continues, so a page opens with its grid already established rather than with
   a strip of furniture.
   =========================================================================== */
header.chrome { position: relative; z-index: 2; }
.chrome-brand {
  grid-column: 1 / 12;
  display: flex; align-items: center; gap: clamp(18px, 2.6vw, 46px);
  min-height: var(--chrome-h);
  padding: 0 var(--pad);
}
.chrome-ctrl {
  /* ONE column, not three. This plane holds a single control; at 3 columns it
     claimed a quarter of the masthead for one word. It still fills its cell —
     planes butt, and justify-self would leave the grid showing through. */
  grid-column: 12 / 13;
  display: flex; align-items: stretch; justify-content: flex-end;
  min-height: var(--chrome-h);
  /* the plane still bleeds to the edge; the CONTROL is inset by the width of its
     own focus ring so the ring is never clipped (WCAG 2.2 focus-not-obscured). */
  padding: 6px 6px 6px 0;
}
.mark {
  font-size: 19px; font-weight: 700; letter-spacing: -0.03em;
  text-decoration: none; display: flex; align-items: center;
  min-height: 44px; gap: 10px;
}
/* THE MARK — the notched square. ONE path, fill-rule:evenodd, so the notch is
   genuinely TRANSPARENT and the mark sits on any plane; fill:currentColor so it
   inherits that plane's ink. Never hard-code a hue. See system-contract.md. */
.mark svg { display: block; flex: 0 0 auto; }
.chrome nav ul { display: flex; }
.chrome nav a {
  display: flex; align-items: center;
  min-height: 44px; padding: 0 14px;
  font-size: 13.5px; text-decoration: none;
  border-left: 1px solid currentColor;
}
.chrome nav li:last-child a { border-right: 1px solid currentColor; }
#themeBtn {
  display: flex; align-items: center;
  font: inherit; font-size: 13.5px;
  background: transparent; color: inherit;
  border: 0; border-left: 1px solid currentColor;
  padding: 0 18px; min-height: 44px; min-width: 88px;
  cursor: pointer; letter-spacing: 0.02em;
}
.skip {
  position: absolute; left: 0; top: -200px; z-index: 40;
  background: var(--ink-1); color: var(--paper);
  padding: 14px 20px; min-height: 44px; text-decoration: none;
  font-size: 14px; border: 2px solid var(--ink-1);
}
.skip:focus { top: 0; }


/* ===========================================================================
   6. CONTROLS — buttons and fields

   THE CTA IS A MARKED LINE, NOT A BOX.
   Four bordered rectangles stacked in a hero read as slabs, and the founder
   rejected them twice. So the action takes the form the product itself is about:
   a line of text with a rule struck under it — the same gesture as a cited
   passage, at the scale of a control. No border box, no fill, no cage.

   The rule carries the weight the border used to: 3px on the primary in the
   TRACE channel, 1px in the host plane's own ink on the secondary. The hit area
   is still 48px tall and the full width of the label, so the target is unchanged
   even though the paint is not.
   =========================================================================== */
.cta {
  display: inline-flex; align-items: center; gap: 10px;
  min-height: 48px; padding: 0;
  font-size: 15.5px; font-weight: 600; letter-spacing: -0.005em;
  text-decoration: none;
  border: 0; border-bottom: 3px solid currentColor;
  background: transparent; color: inherit;
  font-family: inherit; cursor: pointer;
}
/* primary: the TRACE channel — the line that leads somewhere */
.cta-1 { color: var(--ochre); border-bottom-color: var(--ochre); }
/* secondary: the host plane's own ink, a hairline — present, not competing */
.cta-2 { color: inherit; border-bottom-width: 1px; border-bottom-color: currentColor; }
.cta:hover { border-bottom-width: 5px; }
.cta-2:hover { border-bottom-width: 3px; }
/* the pair sits apart now that nothing butts */
.cta-stack { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.cta-row { display: flex; flex-wrap: wrap; gap: 0 32px; }

label.lab, .lab {
  display: block; font-family: var(--ui-mono); font-size: 11.5px;
  letter-spacing: 0.14em; text-transform: uppercase; margin-bottom: 8px;
  color: var(--ink-2);
}
.field, input[type="text"].field, input[type="email"].field,
input[type="password"].field, input[type="search"].field, textarea.field, select.field {
  font: inherit; font-size: 15px;
  background: var(--paper); color: var(--ink-1);
  border: 2px solid var(--ink-1); padding: 0 12px;
  min-height: 48px; width: 100%; min-width: 0;
}
textarea.field { padding: 12px; min-height: 96px; line-height: 1.45; }
.field::placeholder { color: var(--ink-2); opacity: 1; }
.go {
  font: inherit; font-size: 15px; font-weight: 600;
  background: var(--ink-1); color: var(--paper); border: 2px solid var(--ink-1);
  padding: 0 20px; min-height: 48px; margin-left: -2px; cursor: pointer;
}
.field-row { display: flex; align-items: flex-end; }
.field-row > .field-grow { flex: 1 1 auto; min-width: 0; }


/* ===========================================================================
   7. REGISTERS — the structural rules and the comb
   Registers are STRUCTURE: the shared edges the composition is built from. They
   never carry travelling passengers. Author them as inline SVG with
   pathLength="1"; the classes below only size them.
   =========================================================================== */
.rule-h { height: 18px; display: block; }
.rule-h svg { width: 100%; height: 18px; }
.rule-h-sm { height: 12px; display: block; }
.rule-h-sm svg { width: 100%; height: 12px; }
.rule-v { position: absolute; top: 0; right: 0; bottom: 0; width: 18px; display: block; }
.rule-v svg { width: 18px; height: 100%; }
.comb { height: 26px; margin-bottom: 16px; }
.comb svg { width: 100%; height: 26px; }


/* ===========================================================================
   8. CELLS, STEPS, BANDS, REGISTERS OF CONTENT
   NOT cards. Cells: they butt, they share edges, there is no shadow, no radius,
   no gap. Flat colour differentiates them BY JOB.
   =========================================================================== */
.sec-head {
  grid-column: 1 / 13;
  padding: clamp(26px, 2.6vw, 42px) var(--pad) clamp(16px, 1.6vw, 24px);
  display: flex; align-items: baseline; justify-content: space-between; gap: 20px;
}
.sec-head.ruled { border-bottom: 2px solid var(--ink-1); }

.cell {
  grid-column: span 3; padding: var(--pad); min-height: 300px;
  display: flex; flex-direction: column;
}
.cell-n {
  font-family: var(--ui-mono); font-size: clamp(30px, 2.9vw, 42px);
  line-height: 1; font-weight: 500; letter-spacing: -0.03em;
}
.cell h3, .cell .h3 { margin-top: clamp(20px, 2.4vw, 34px); }
.cell p { margin-top: 14px; font-size: 15px; line-height: 1.45; }

.band-h { grid-column: 1 / 6; padding: clamp(34px, 4.2vw, 66px) var(--pad); }
.band-b {
  grid-column: 6 / 13; padding: clamp(34px, 4.2vw, 66px) var(--pad);
  border-left: 1px solid currentColor; display: flex; align-items: flex-end;
}
.band-b p { max-width: 56ch; }

.list-l { grid-column: 1 / 3; padding: clamp(26px, 2.8vw, 40px) var(--pad); }
.list-i {
  grid-column: span 2; padding: clamp(26px, 2.8vw, 40px) var(--pad);
  border-left: 1px solid var(--rule); display: flex; flex-direction: column;
}
.list-i .nm { font-size: 15px; font-weight: 600; line-height: 1.25; }

.step {
  grid-column: span 4; padding: var(--pad); min-height: 210px;
  border-top: 2px solid var(--ink-1); display: flex; flex-direction: column;
}
.step + .step { border-left: 1px solid var(--rule); }
.step-n { font-family: var(--ui-mono); font-size: 12px; letter-spacing: 0.14em; }
.step h3 { margin-top: 10px; font-size: clamp(24px, 2.1vw, 30px); letter-spacing: -0.02em; }
.step p { margin-top: 12px; font-size: 15px; max-width: 34ch; }

/* two-up foot register (proof / colophon) */
.foot-l { grid-column: 1 / 7; padding: clamp(30px, 3.4vw, 52px) var(--pad); }
.foot-r {
  grid-column: 7 / 13; padding: clamp(30px, 3.4vw, 52px) var(--pad);
  border-left: 1px solid currentColor;
}
.colo-l { grid-column: 1 / 7; padding: clamp(22px, 2.2vw, 32px) var(--pad); }
.colo-r {
  grid-column: 7 / 13; padding: clamp(22px, 2.2vw, 32px) var(--pad);
  border-left: 1px solid var(--rule);
  display: flex; align-items: center; justify-content: flex-end;
}

/* disclosure register — a question list that stays square and flat */
.qa { grid-column: 1 / 13; }
.qa details { border-top: 1px solid var(--rule); }
.qa details:last-of-type { border-bottom: 1px solid var(--rule); }
.qa summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  min-height: 56px; padding: 14px var(--pad);
  font-size: 15.5px; font-weight: 600;
}
.qa summary::-webkit-details-marker { display: none; }
.qa summary .qx { font-family: var(--ui-mono); font-size: 18px; line-height: 1; }
.qa details[open] summary .qx { visibility: hidden; }
.qa details[open] summary::after {
  content: "–"; font-family: var(--ui-mono); font-size: 18px; line-height: 1;
}
.qa .qa-a { padding: 0 var(--pad) 20px; font-size: 15px; line-height: 1.5; max-width: 74ch; }


/* ===========================================================================
   9. FOCUS + ASSISTIVE
   Square focus ring, TWO BANDS always: 3px ochre directly on the element, 3px
   ink outside it. The two are 9.68:1 against each other, and on every plane the
   system paints, at least one of the two clears 3:1 against that plane.
   =========================================================================== */
a:focus-visible, button:focus-visible, input:focus-visible,
textarea:focus-visible, select:focus-visible, summary:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--ink-1);
  outline-offset: 3px;
  box-shadow: 0 0 0 3px var(--ochre);
}
/* on the ochre plane an ochre band is invisible and, in dark, so is --ink-1 (it
   is chalk there). Both bands invert to the plane's own ink: 9.68:1 on ochre in
   BOTH themes. */
.p-ochre a:focus-visible, .p-ochre button:focus-visible, .p-ochre input:focus-visible,
.p-ochre textarea:focus-visible, .p-ochre select:focus-visible, .p-ochre summary:focus-visible {
  outline-color: var(--on-ochre);
  box-shadow: 0 0 0 3px var(--on-ochre-2);
}
[id] { scroll-margin-top: calc(var(--chrome-h) + 12px); }
.sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}


/* ===========================================================================
   10. MOTION
   The ONLY animated background is `.breathe` (flatShift): one FLAT
   background-color moved a few percent over 26s. No gradient function is
   emitted at any instant, by design.
   Everything else is DEFAULT-VISIBLE: the base rule IS the finished state, the
   animation is only reachable via an ADDED class, so a no-JS load, a print and a
   full-page capture all show the composed page.
   =========================================================================== */
@property --breathe-c { syntax: '<color>'; inherits: false; initial-value: #0C36A0; }
@keyframes breathe-kf {
  0%   { --breathe-c: var(--blue); }
  50%  { --breathe-c: color-mix(in oklab, var(--blue) 94%, var(--verm)); }
  100% { --breathe-c: var(--blue); }
}
.breathe {
  --breathe-c: var(--blue);
  background-color: var(--breathe-c);
  background-image: none !important;   /* it must never be readable as a gradient */
  animation: breathe-kf 26s ease-in-out infinite;
}

/* drawOn — an SVG register rules itself in on load, then parks fully drawn.
   NOTE (both bugs reproduced by pixel test during this build):
   (a) getTotalLength() returns PRE-transform user units, so under
       preserveAspectRatio="none" a dash runs out early — author paths with
       pathLength="1" and dasharray:1 means exactly "the whole path".
   (b) vector-effect:non-scaling-stroke makes Chromium IGNORE pathLength and
       resolve dashes in SCREEN PIXELS — hence the explicit vector-effect:none. */
@property --dr-o { syntax: '<number>'; inherits: false; initial-value: 0; }
@keyframes draw-on-kf { from { --dr-o: 1; } to { --dr-o: 0; } }
.comb path.ct {
  vector-effect: none;
  stroke-dasharray: 1;
  --dr-o: 0;
  stroke-dashoffset: calc(1 * var(--dr-o));
  animation: draw-on-kf 0.9s var(--ease-entrance) both;
}
.comb path.ct:nth-of-type(1)  { animation-delay: 0s; }
.comb path.ct:nth-of-type(2)  { animation-delay: 0.055s; }
.comb path.ct:nth-of-type(3)  { animation-delay: 0.11s; }
.comb path.ct:nth-of-type(4)  { animation-delay: 0.165s; }
.comb path.ct:nth-of-type(5)  { animation-delay: 0.22s; }
.comb path.ct:nth-of-type(6)  { animation-delay: 0.275s; }
.comb path.ct:nth-of-type(7)  { animation-delay: 0.33s; }
.comb path.ct:nth-of-type(8)  { animation-delay: 0.385s; }
.comb path.ct:nth-of-type(9)  { animation-delay: 0.44s; }
.comb path.ct:nth-of-type(10) { animation-delay: 0.495s; }
.comb path.ct:nth-of-type(11) { animation-delay: 0.55s; }
.comb path.ct:nth-of-type(12) { animation-delay: 0.605s; }
.comb path.ct:nth-of-type(13) { animation-delay: 0.66s; }
.comb path.ct:nth-of-type(14) { animation-delay: 0.715s; }
.comb path.ct[style*="--i"]   { animation-delay: calc(var(--i, 0) * 0.055s); }

/* revealOnScroll — DEFAULT-VISIBLE. Never invert this. */
.reveal { opacity: 1; transform: none; }
.reveal.is-in { animation: reveal-kf 0.5s var(--ease-entrance) both; }
@keyframes reveal-kf {
  from { opacity: 0; transform: translate3d(0, 16px, 0); }
  to   { opacity: 1; transform: none; }
}
.reveal.is-in:nth-of-type(1) { animation-delay: 0s; }
.reveal.is-in:nth-of-type(2) { animation-delay: 0.06s; }
.reveal.is-in:nth-of-type(3) { animation-delay: 0.12s; }
.reveal.is-in:nth-of-type(4) { animation-delay: 0.18s; }
.reveal.is-in:nth-of-type(5) { animation-delay: 0.24s; }
.reveal.is-in:nth-of-type(6) { animation-delay: 0.3s; }
.reveal.is-in:nth-of-type(7) { animation-delay: 0.36s; }
.reveal.is-in:nth-of-type(8) { animation-delay: 0.42s; }
.reveal.is-in[style*="--i"]  { animation-delay: calc(var(--i, 0) * 0.06s); }


/* ===========================================================================
   11. REDUCED MOTION — everything parks at its COMPOSED state.
   Nothing is stranded mid-transform, nothing is left hidden.
   =========================================================================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    animation-delay: 0s !important;
    transition-duration: 1ms !important;
    transition-delay: 0s !important;
    scroll-behavior: auto !important;
  }
  .breathe { animation: none !important; background-color: var(--blue) !important; }
  .reveal, .reveal.is-in {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
  .comb path.ct, .comb path.cm {
    animation: none !important;
    stroke-dashoffset: 0 !important;
  }
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) {
    animation: none !important;
  }
}


/* ===========================================================================
   12. RESPONSIVE — the grid never breaks its own rule: it RE-SPANS, it does not
   float, it never becomes a centred column with gutters.
   =========================================================================== */
@media (max-width: 1180px) {
  .chrome-brand { grid-column: 1 / 11; }
  .chrome-ctrl  { grid-column: 11 / 13; }
  .cell { grid-column: span 6; }
  .band-h { grid-column: 1 / 13; }
  .band-b { grid-column: 1 / 13; border-left: 0; border-top: 1px solid currentColor; }
  .list-l { grid-column: 1 / 13; }
  .list-i { grid-column: span 4; border-top: 1px solid var(--rule); }
  .step   { grid-column: span 12; }
  .step + .step { border-left: 0; }
  .foot-l, .foot-r, .colo-l, .colo-r { grid-column: 1 / 13; }
  .foot-r { border-left: 0; border-top: 1px solid currentColor; }
  .colo-r { border-left: 0; justify-content: flex-start; }
}
@media (max-width: 720px) {
  :root { --chrome-h: 60px; }
  /* ONE LINE. The chrome is a single row at every width — mark, then the nav, then
     the control plane. It previously wrapped (`flex-wrap:wrap` + `nav{flex:1 0 100%}`)
     which threw the nav onto its own full-width line and then broke it again into a
     ragged block, and the control plane grew into a tall slab beside it.
     The nav is the only elastic part: it shrinks and scrolls horizontally inside its
     own box. `min-width:0` is what actually permits that — a flex item defaults to
     min-width:auto and would otherwise refuse to shrink below its content and push
     the row wide. */
  .chrome-brand {
    grid-column: 1 / 10;
    flex-wrap: nowrap; align-items: center;
    gap: 0 14px; min-width: 0;
  }
  .mark { flex: 0 0 auto; font-size: 17px; }
  .chrome-brand nav {
    flex: 1 1 auto; min-width: 0;
    overflow-x: auto; overscroll-behavior-x: contain;
    scrollbar-width: none;              /* the rules already read as edges */
  }
  .chrome-brand nav::-webkit-scrollbar { display: none; }
  .chrome-ctrl { grid-column: 10 / 13; align-items: stretch; }
  #themeBtn { flex: 1 1 auto; justify-content: center; min-width: 0; padding: 0 10px; }
  .chrome nav ul { flex-wrap: nowrap; }
  .chrome nav a { padding: 0 10px; font-size: 13px; white-space: nowrap; }
  .cell { grid-column: span 12; min-height: 0; }
  .list-i { grid-column: span 12; }
  .cta { justify-content: flex-start; }
  .cta-row { flex-direction: column; }
  .cta-row .cta + .cta { margin-left: 0; margin-top: -2px; }
}