/* Player One: the one stylesheet for every page on 1p.dev (and the Sidekick page).

   Every design value lives in the tokens below: font families, the type scale, line heights, letter spacing,
   colours, spacing, radii, shadows and motion. Nothing else in this file, in any page or in any script sets a
   literal font size, font family or colour: use a token. The village engine reads the tokens it needs (the
   title face and size, the hand-drawn face) from here too.

   Layers, lowest first:
     reset       browser defaults evened out
     base        type and links on the plain elements
     layout      page shell, containers, sections
     components  menu, buttons, footer, FAQ, quotes, HUD labels, prose, tables, forms, page header
     home        the homepage (expressive: giant type, the level trail, the scenes)
     pages       the other pages (formal: the same families at a calmer scale)
     utilities   small helpers that must win

   Two characters share these tokens. The homepage is expressive. Every other page is the formal version: the
   same families and colours, a calmer type scale, no display type and no level trail, with small engine-drawn
   touches here and there. */

@layer reset, base, layout, components, home, pages, utilities;

/* ------------------------------------------------------------------------------------------------ tokens */
:root {
  /* colour: page and ink */
  --c-page: #fcfcfa;
  --c-surface: #ffffff;
  --c-surface-2: #f5f4f0;
  --c-ink: #1b1f27;
  --c-ink-2: #3d4150;
  --c-muted: #5d6170;
  --c-faint: #8a8f9c;
  --c-line: rgba(27, 31, 39, .09);
  --c-line-2: rgba(27, 31, 39, .16);
  --c-wash: rgba(252, 252, 250, .9);
  --c-page-glass: rgba(252, 252, 250, .86);   /* the menu once the page has scrolled */
  --c-page-frost: rgba(252, 252, 250, .72);   /* the menu over the village */
  --c-page-clear: rgba(252, 252, 250, 0);     /* the page colour, see-through: the end of a fade */

  /* colour: the village palette */
  --c-purple: #653cee;
  --c-purple-2: #7f56d9;
  --c-purple-ink: #4a26c9;
  --c-lav: #c2b0ff;
  --c-lav-2: #d9ceff;
  --c-lav-soft: #f1ecff;
  --c-coral: #ff7a6b;
  --c-coral-ink: #c4412f;                  /* coral as small text: 4.9:1 on the page */
  --c-coral-text: #e5604f;                 /* coral as large display text: 3.9:1 */
  --c-mint: #3fb987;
  --c-mint-ink: #1d7a54;                   /* mint as small text: 5.1:1 on the page, 5.3:1 on white */
  --c-amber: #f5b942;
  --c-sky: #007aff;
  --c-navy: #222831;
  --c-hero-tag: color-mix(in srgb, var(--c-purple-ink) 40%, var(--c-ink));   /* the small tag under the homepage's title */
  --c-on-dark: #ffffff;

  /* colour: the footer (dark, as it has always been) */
  --c-foot-bg: #1f1e1c;
  --c-foot-ink: #f4f2eb;
  --c-foot-text: #b8b6ae;
  --c-foot-head: #8d8b84;
  --c-foot-link: #e1dfd8;
  --c-foot-meta: #93918a;
  --c-foot-rule: rgba(244, 242, 235, .15);

  /* colour: states, dark surfaces (the dark plan card, the close band) and modal backdrops */
  --c-heart: #e5484d;                      /* the little heart by Being good in the menu */
  --c-danger: #b93a2b;                     /* error text: a deeper coral that passes 4.5:1 on the page */
  --c-dark-muted: rgba(255, 255, 255, .72);
  --c-dark-line: rgba(255, 255, 255, .14);
  --c-dark-track: rgba(255, 255, 255, .22);
  --c-dark-wash: rgba(255, 255, 255, .07);
  --c-scrim: rgba(27, 31, 39, .56);

  /* colour: the village's own HUD (caption, counters, help line, info card), dark pills over the scene */
  --c-hud-bg: rgba(27, 32, 41, .94);
  --c-hud-bg-2: rgba(27, 32, 41, .9);
  --c-hud-text-2: rgba(255, 255, 255, .82);
  --c-hud-muted: #b9c0cc;

  /* fonts */
  --f-display: 'Geologica', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --f-body: 'Hanken Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --f-mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', Consolas, monospace;
  --f-hand: 'Caveat', 'Segoe Print', 'Bradley Hand', cursive;
  /* an experiment: the homepage's subtitles (the hero's line, and the line under each section's heading) in a
     plain console face. To go back, set --f-sub to var(--f-body), --sub-size to 1 and --sub-measure to 32ch */
  --f-sub: var(--f-mono);
  --sub-size: .88;          /* a monospace face sets large: a step down keeps the line's weight on the page */
  --sub-measure: 40ch;      /* every character is a full ch wide, so the same line needs more of them */

  --w-regular: 400;
  --w-medium: 500;
  --w-semibold: 600;
  --w-bold: 700;

  /* type scale: the homepage (expressive) */
  --t-display: clamp(56px, 13vw, 210px);      /* the hero title (drawn by the engine) */
  --t-stage: clamp(46px, 7.6vw, 124px);       /* a homepage section heading */
  --t-finale: clamp(56px, 10vw, 168px);       /* "Your game. Your team." */
  --t-lead: clamp(17px, 1.35vw, 20px);
  --t-line: clamp(18px, 1.6vw, 22px);          /* the homepage scenes' subtitles and its purpose line (the lead size before the other pages' stepped down) */
  --t-hand: clamp(22px, 2vw, 30px);           /* the pencil notes ("click me") */

  /* type scale: every other page (formal) */
  --t-h1: clamp(40px, 5.4vw, 76px);
  --t-h2: clamp(28px, 3.2vw, 44px);
  --t-h3: clamp(20px, 1.7vw, 24px);
  --t-h4: 18px;
  --t-body: 17px;
  --t-body-lg: 18px;
  --t-small: 15px;
  --t-xs: 13px;
  --t-micro: 11px;
  --t-hud: 12px;
  --t-item: clamp(22px, 2vw, 28px);           /* the heading of an item in a list: a release, a news item, a call */
  --t-quote: clamp(19px, 1.5vw, 23px);
  --t-nav: clamp(14px, 1.05vw, 16px);         /* the menu's links and its Login button */
  --t-price: clamp(34px, 3vw, 44px);

  --lh-display: .9;
  --lh-heading: 1.06;
  --lh-snug: 1.25;
  --lh-body: 1.6;
  --lh-tight: 1.15;
  --lh-ui: 1.4;          /* small interface text: menus, labels, captions */
  --lh-lede: 1.5;        /* a lede or lead line */
  --lh-prose: 1.7;       /* long-form reading */

  --ls-display: -.065em;
  --ls-stage: -.055em;
  --ls-heading: -.035em;
  --ls-snug: -.015em;
  --ls-hud: .14em;
  --ls-caps: .18em;
  --ls-label: .04em;     /* numbers in the level markers */
  --ls-figure: -.02em;   /* large figures (the village's counters) */

  /* space */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;
  --s-8: 64px;
  --s-9: 96px;
  --s-10: 128px;
  --s-11: 160px;
  --s-12: 220px;
  --gutter: clamp(22px, 7vw, 120px);
  --section-y: clamp(140px, 22vh, 260px);    /* the homepage breathes: generous space between scenes */
  --section-y-formal: clamp(64px, 8vw, 96px); /* the space between sections on every other page */
  --container-narrow: 600px;                 /* the single open column of a form page (Help) */
  --container: 1140px;
  --container-wide: 1240px;
  --measure: 66ch;
  --nav-h: 80px;
  --hero-inset: 12px;                       /* how far the homepage's village screen sits in from the page's edges: a whole
                                               number of pixels, so its canvas is never stretched by a fraction and blurred */
  --nav-glass: color-mix(in srgb, var(--c-page) 74%, transparent);   /* the frosted pill behind the menu and the logo */
  --nav-blur: 12px;
  --nav-pill-h: 52px;

  /* radii */
  --r-xs: 6px;
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 22px;
  --r-screen: 32px;                          /* the homepage's village, framed as a game screen */
  --r-pill: 999px;
  --r-round: 50%;

  /* shadows */
  --sh-1: 0 1px 2px rgba(27, 31, 39, .05), 0 6px 18px rgba(27, 31, 39, .06);
  --sh-2: 0 3px 16px rgba(27, 31, 39, .1), 0 0 40px rgba(27, 31, 39, .06);
  --sh-focus: 0 0 0 3px rgba(101, 60, 238, .35);

  /* motion */
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --d-fast: .18s;
  --d-med: .35s;
  --d-slow: .6s;
  --d-reveal: .9s;
  --ease-pop: cubic-bezier(.34, 1.56, .64, 1);   /* overshoots a little, for things that pop in */
  --nav-dropdown-close-dur: .18s;   /* read by the Community and account dropdown scripts */
}

::backdrop { --c-scrim: rgba(27, 31, 39, .56); }

/* ------------------------------------------------------------------------------------------------ reset */
@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; }
  body, h1, h2, h3, h4, h5, p, figure, blockquote, dl, dd, ol, ul { margin: 0; }
  ol, ul { padding: 0; }
  img, svg, video, canvas { display: block; max-width: 100%; }
  img { height: auto; }
  input, button, textarea, select { font: inherit; color: inherit; }
  button { cursor: pointer; }
  [hidden] { display: none !important; }
  @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
}

/* ------------------------------------------------------------------------------------------------ base */
@layer base {
  html { background: var(--c-page); }
  body {
    background: var(--c-page);
    color: var(--c-ink);
    font-family: var(--f-body);
    font-size: var(--t-body);
    line-height: var(--lh-body);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    overflow-x: clip;
  }
  h1, h2, h3, h4 { font-family: var(--f-display); font-weight: var(--w-bold); line-height: var(--lh-heading); letter-spacing: var(--ls-heading); text-wrap: balance; }
  h1 { font-size: var(--t-h1); }
  h2 { font-size: var(--t-h2); }
  h3 { font-size: var(--t-h3); letter-spacing: var(--ls-snug); font-weight: var(--w-semibold); }
  h4 { font-size: var(--t-h4); letter-spacing: var(--ls-snug); font-weight: var(--w-semibold); }
  p { text-wrap: pretty; }
  a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: .18em; }
  strong, b { font-weight: var(--w-semibold); }
  small { font-size: var(--t-xs); }
  code, kbd, samp { font-family: var(--f-mono); font-size: .9em; }
  hr { border: 0; border-top: 1px solid var(--c-line); margin: var(--s-7) 0; }
  ::selection { background: var(--c-lav-2); color: var(--c-ink); }
  :focus-visible { outline: 2px solid var(--c-purple); outline-offset: 3px; border-radius: var(--r-xs); }
}

/* ------------------------------------------------------------------------------------------------ layout */
@layer layout {
  .wrap { width: min(100% - 2 * var(--gutter), var(--container)); margin-inline: auto; }
  .wrap-wide { width: min(100% - 2 * var(--gutter), var(--container-wide)); margin-inline: auto; }
  .wrap-text { width: min(100% - 2 * var(--gutter), var(--measure)); margin-inline: auto; }
  main { display: block; position: relative; }
  .skip-link { position: absolute; left: var(--s-4); top: -100px; z-index: 100; padding: var(--s-2) var(--s-4); border-radius: var(--r-pill); background: var(--c-ink); color: var(--c-on-dark); font-size: var(--t-small); text-decoration: none; }
  .skip-link:focus { top: var(--s-3); }
  .skip-link.motion-skip { border: 0; font-family: var(--f-body); cursor: pointer; }
  /* paused by the visitor: CSS animations hold too (the village and the scenes listen for p1:motion) */
  .p1-paused *, .p1-paused *::before, .p1-paused *::after { animation-play-state: paused !important; }
  .visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
}

/* ------------------------------------------------------------------------------------------------ components */
@layer components {

  /* ---------- HUD labels: the small game-style mono labels ("1P · Ready", "Game saved · Slot 01") */
  .hud { font-family: var(--f-mono); font-size: var(--t-hud); font-weight: var(--w-medium); line-height: var(--lh-tight); letter-spacing: var(--ls-hud); text-transform: uppercase; color: var(--c-purple); }
  .hud.is-coral { color: var(--c-coral-ink); }
  .hud.is-mint { color: var(--c-mint-ink); }
  .hud.is-quiet { color: var(--c-faint); }
  .kicker { font-family: var(--f-mono); font-size: var(--t-hud); font-weight: var(--w-medium); letter-spacing: var(--ls-hud); text-transform: uppercase; color: var(--c-purple); }

  /* ---------- buttons */
  .btn, .btn-primary, .btn-secondary, .btn-ghost {
    display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
    min-height: 40px; padding: 0 var(--s-5); border-radius: var(--r-pill); border: 1px solid transparent;
    font-family: var(--f-body); font-size: var(--t-small); font-weight: var(--w-semibold); line-height: 1; letter-spacing: 0;
    text-decoration: none; white-space: nowrap; cursor: pointer;
    transition: background-color var(--d-fast) ease, color var(--d-fast) ease, border-color var(--d-fast) ease, transform var(--d-fast) ease;
  }
  .btn-primary { background: var(--c-ink); color: var(--c-on-dark); }
  .btn-primary:hover { background: var(--c-purple); }
  /* signed in, the menu's button reads Dashboard, in purple; Login stays black */
  .nav-cta .account-menu > summary.btn-primary { background: var(--c-purple); }
  .nav-cta .account-menu > summary.btn-primary:hover, .nav-cta .account-menu[open] > summary.btn-primary { background: var(--c-purple-ink); }
  .btn-secondary { background: transparent; color: var(--c-ink); border-color: var(--c-line-2); }
  .btn-secondary:hover { border-color: var(--c-ink); }
  .btn-ghost { background: transparent; color: var(--c-ink); padding-inline: var(--s-2); }
  .btn-ghost:hover { color: var(--c-purple); }
  .btn-lg { min-height: 48px; padding-inline: var(--s-6); font-size: var(--t-body); }
  .btn-block { display: flex; width: 100%; }
  .btn-primary:active, .btn-secondary:active { transform: translateY(1px); }
  /* (not the menu's Login or Dashboard: there the press reads as the header twitching) */
  .nav-cta .btn-primary:active, .nav-cta .account-menu > summary:active { transform: none; }
  :is(.btn, .btn-primary, .btn-secondary, .btn-ghost):is(:disabled, [aria-disabled="true"]) { opacity: .55; cursor: not-allowed; }
  .text-link { color: var(--c-purple); font-weight: var(--w-semibold); text-decoration: none; }
  .text-link:hover { text-decoration: underline; }
  .quiet-link { color: inherit; text-decoration: underline; text-decoration-color: var(--c-line-2); }
  .quiet-link:hover { text-decoration-color: currentColor; }

  /* ---------- the menu: the same items on every page, light and quiet */
  /* the header of the new design: no bar, no rule and no band across the page. The menu floats on one frosted pill
     (the page colour, see-through, over a blur of whatever scrolls under it), so it stays readable and everything
     else (the village, a page heading) shows through. The pill (.nav-menu) holds the links and the Login button, with
     no border, only the shadow the site's panels have. The logo stands on its own */
  .nav { position: sticky; top: 0; z-index: 50; }
  .nav-menu { background: var(--nav-glass); -webkit-backdrop-filter: blur(var(--nav-blur)) saturate(1.4); backdrop-filter: blur(var(--nav-blur)) saturate(1.4); box-shadow: var(--sh-2); }
  /* squircle corners on the menu's pieces (where the browser has corner-shape; plain round elsewhere) */
  .nav-menu, .nav-menu .nav-panel, .nav-cta .btn-primary, .nav-cta .account-menu > summary { corner-shape: squircle; }
  /* on the homepage the menu's logo starts off stage, from the first paint, while the title holds the screen. The
     village engine brings it in with a bounce (.p1-logo-shown, .p1-logo-arrive) as the title breaks up on the click,
     or as the visitor scrolls on; without the engine it appears after four seconds, with the title's own letters */
  .nav .logo { transition: opacity var(--d-fast) ease, transform var(--d-fast) ease; }
  .homepage .nav .logo { opacity: 0; transform: scale(.4); pointer-events: none; animation: logo-fallback 0s 4s forwards; }
  .p1-engine-logo .homepage .nav .logo { animation: none; }
  .p1-logo-shown .homepage .nav .logo { opacity: 1; transform: none; pointer-events: auto; }
  .p1-logo-arrive .homepage .nav .logo { animation: logo-bounce .6s var(--ease-pop); }
  @keyframes logo-fallback { to { opacity: 1; transform: none; pointer-events: auto; } }
  @keyframes logo-bounce { from { opacity: 0; transform: translateY(-14px) scale(.4); } }
  @media (prefers-reduced-motion: reduce) { .p1-logo-arrive .homepage .nav .logo { animation: none; } }
  .nav-menu { display: flex; align-items: center; gap: var(--s-6); height: var(--nav-pill-h); margin-left: auto; padding: 0 5px 0 var(--s-6); border-radius: var(--r-pill); }
  .nav-inner { display: flex; align-items: center; gap: var(--s-6); width: 100%; height: var(--nav-h); padding-inline: clamp(22px, 5vw, 72px); }
  .nav .logo { display: inline-flex; flex: none; margin-left: -10px; border-radius: var(--r-xs); }
  .nav .logo-img { width: 40px; height: auto; }
  .nav-links { display: flex; align-items: center; gap: clamp(18px, 2vw, 28px); }
  .nav-links > a, .nav-links .nav-group > summary {
    display: inline-flex; align-items: center; gap: var(--s-1);
    font-size: var(--t-nav); font-weight: var(--w-medium); color: var(--c-ink); text-decoration: none;
    transition: color var(--d-fast) ease;
  }
  .nav-links > a:hover, .nav-links .nav-group > summary:hover { color: var(--c-purple); }
  /* the current page's link is bold. Every link keeps room for its bold self (a hidden bold copy of its label, with no
     height, under the label), so marking one never nudges the others along */
  @media (min-width: 769px) {
    .nav-links > a[data-label], .nav-links .nav-group-text[data-label] { display: inline-flex; flex-direction: column; align-items: center; gap: 0; }
    .nav-links > a[data-label]::after, .nav-links .nav-group-text[data-label]::after { content: attr(data-label) / ""; height: 0; overflow: hidden; visibility: hidden; font-weight: var(--w-bold); pointer-events: none; user-select: none; }
  }
  .nav-links > a[aria-current], .nav-links .nav-group.has-current > summary { color: var(--c-ink); font-weight: var(--w-bold); }
  .nav-links .nav-group-label { display: inline-flex; align-items: center; gap: var(--s-1); }
  .nav-links .nav-chev { display: inline-block; }
  /* a small red heart before Being good, beating softly now and then (two quick beats, then a rest). It hangs in the
     gap before the link, so it adds no width to the label's own box */
  .nav-links > a[data-label="Being good"] { position: relative; margin-left: 1.15em; }
  .nav-links > a[data-label="Being good"]::before { content: "\2764\FE0E"; position: absolute; left: -1.55em; top: 50%; margin-top: -.5em; line-height: 1; font-size: .78em; color: var(--c-heart); animation: heart-beat 4.5s ease-in-out infinite; transform-origin: 50% 60%; }
  @keyframes heart-beat { 0%, 20%, 100% { transform: scale(1); } 5% { transform: scale(1.18); } 10% { transform: scale(1); } 15% { transform: scale(1.12); } }
  @media (prefers-reduced-motion: reduce) { .nav-links > a[data-label="Being good"]::before { animation: none; } }
  @media (max-width: 768px) {
    .nav-links > a[data-label="Being good"] { margin-left: 0; }
    .nav-links > a[data-label="Being good"]::before { position: static; margin: 0 .5em 0 0; }
  }
  .nav-links .mobile-login { display: none; }
  .nav-cta { flex: none; display: flex; align-items: center; }
  .nav-cta .btn-primary, .nav-cta .account-menu > summary { min-height: 42px; padding: 0 18px; font-size: var(--t-nav); font-weight: var(--w-medium); }
  .nav-user { flex: none; }
  /* while a stored sign-in waits to be drawn, the header button stays hidden so "Login" never flashes first */
  .p1-signed-in .nav-cta { visibility: hidden; }
  /* the header button keeps one width whatever it says, so the pill never grows or shrinks when account-nav.js
     swaps it, in a new tab, after a sign-in or between 1p.dev and the docs. "Login" holds a hidden, zero-height
     "Dashboard" with room for the icon (16 px and the 8 px gap) and the chevron (the 8 px gap and 12 px) beside
     it: the width of the signed-in menu button. A signed-in "Dashboard" link with no menu, so no chevron, takes
     the chevron's room as padding, half each side */
  .nav-cta a.btn-primary:not(:has(.nav-user)) { flex-direction: column; gap: 0; }
  .nav-cta a.btn-primary:not(:has(.nav-user))::after { content: "Dashboard" / ""; height: 0; overflow: hidden; visibility: hidden; padding: 0 20px 0 24px; }
  .nav-cta a.btn-primary:has(.nav-user) { padding-inline: 28px; }

  /* the Community dropdown (a <details>; the page script adds Escape, click-outside and the transition) */
  .nav-group { position: relative; }
  .nav-group > summary { list-style: none; cursor: pointer; }
  .nav-group > summary::-webkit-details-marker { display: none; }
  .nav-group > summary::marker { content: ""; }
  .nav-chev { flex: none; opacity: .7; transition: transform var(--d-med) var(--ease-out); }
  .nav-group[open] .nav-chev, .account-menu[open] .nav-chev { transform: rotate(180deg); opacity: 1; }
  .nav-panel, .account-panel {
    position: absolute; top: calc(100% + 12px); z-index: 60; min-width: 200px; padding: var(--s-2);
    background: var(--c-surface); border-radius: var(--r-md); box-shadow: var(--sh-2);
  }
  .nav-panel { left: 50%; translate: -50% 0; }
  /* the dropdowns, Information's and Dashboard's alike, float under the pill as panels of their own: white, rounded,
     with the panels' shadow, a small gap under the pill, and a small nub on top pointing up at their button */
  @media (min-width: 769px) {
    /* (the links' row fills the pill's height, and Information's group fills the row, so its panel hangs from the
       pill's lower edge, as Dashboard's does) */
    .nav-menu .nav-links { align-self: stretch; }
    .nav-menu .nav-group { align-self: stretch; display: flex; align-items: center; }
    .nav-menu .nav-panel { top: calc(100% + 10px); }
    .nav-cta .account-panel { top: calc(100% + 15px); }   /* (its button is 42 px tall in the 52 px pill) */
    .nav-menu .nav-panel::before, .nav-cta .account-panel::before { top: -16px; height: 16px; }
    .nav-menu .nav-panel::after, .nav-cta .account-panel::after { content: ""; position: absolute; top: -5px; width: 10px; height: 10px; border-radius: 2px 0 0 0; background: inherit; rotate: 45deg; box-shadow: -2px -2px 4px -2px rgba(27, 31, 39, .12); }
    .nav-menu .nav-panel::after { left: calc(50% - 5px); }
    .nav-cta .account-panel::after { right: 30px; }
  }
  .nav-panel::before, .account-panel::before { content: ""; position: absolute; left: 0; right: 0; top: -12px; height: 12px; }
  .nav-group:not([open]) .nav-panel, .account-menu:not([open]) .account-panel { display: none; }
  .nav-panel a { display: block; padding: var(--s-2) var(--s-3); border-radius: var(--r-sm); font-size: var(--t-small); color: var(--c-ink-2); text-decoration: none; }
  .nav-panel a:hover, .nav-panel a[aria-current] { background: var(--c-lav-soft); color: var(--c-ink); }
  .nav-group.t-anim .nav-panel, .account-menu.t-anim .account-panel { opacity: 0; transform: translateY(-4px) scale(.98); transform-origin: top center; pointer-events: none; transition: opacity var(--d-fast) ease, transform var(--d-fast) var(--ease-out); }
  .nav-group.t-anim.is-open .nav-panel, .account-menu.t-anim.is-open .account-panel { opacity: 1; transform: none; pointer-events: auto; }
  .nav-group.t-anim.is-closing .nav-panel, .account-menu.t-anim.is-closing .account-panel { opacity: 0; transform: translateY(-4px) scale(.98); }

  /* the signed-in account menu that replaces "Login" (built by account-nav.js) */
  .account-menu { position: relative; }
  .account-menu > summary { list-style: none; cursor: pointer; }
  .account-menu > summary::-webkit-details-marker { display: none; }
  .account-menu > summary::marker { content: ""; }
  .account-panel { right: 0; width: min(320px, 86vw); }
  .account-list { max-height: min(22rem, 60vh); overflow-y: auto; }
  .account-row { display: block; padding: var(--s-2) var(--s-3); border-radius: var(--r-sm); font-size: var(--t-small); color: var(--c-ink); text-decoration: none; }
  a.account-row:hover, a.account-row:focus-visible { background: var(--c-lav-soft); }
  .account-row.is-unavailable { cursor: default; color: var(--c-faint); }
  .account-row-line { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-4); }
  .account-row-name { overflow-wrap: anywhere; font-weight: var(--w-medium); }
  .account-row-status, .account-row-org { font-size: var(--t-xs); color: var(--c-faint); }
  .account-row-org { display: block; margin-top: 2px; }
  .account-open { margin-top: var(--s-1); border-top: 1px solid var(--c-line); border-radius: 0 0 var(--r-sm) var(--r-sm); color: var(--c-purple); font-weight: var(--w-semibold); }
  .mobile-instances { display: none; }

  /* the phone menu (mobile-nav.js toggles .nav-menu-open) */
  .mobile-nav-toggle { display: none; align-items: center; gap: var(--s-2); margin-left: auto; padding: var(--s-2) var(--s-3); border: 1px solid var(--c-line-2); border-radius: var(--r-pill); background: var(--c-surface); font-size: var(--t-small); font-weight: var(--w-semibold); color: var(--c-ink); }
  .menu-icon { width: 16px; height: 16px; }
  .menu-icon .close-icon { display: none; }
  .nav-menu-open .menu-icon path:not(.close-icon) { display: none; }
  .nav-menu-open .menu-icon .close-icon { display: inline; }
  @media (max-width: 768px) {
    .nav-inner { gap: var(--s-3); }
    .mobile-nav-toggle { display: inline-flex; }
    .nav-cta { margin-left: 0; }
    .nav-links {
      display: none; position: absolute; left: var(--s-3); right: var(--s-3); top: calc(var(--nav-h) - 4px);
      flex-direction: column; align-items: stretch; gap: 0; margin: 0; padding: var(--s-2);
      background: var(--c-surface); border-radius: var(--r-md); box-shadow: var(--sh-2);
    }
    /* on a phone there is no pill: the Menu and Login buttons stand on their own, and the links open as a card of
       their own (placed against the header, so the pill must not be a containing block: no backdrop filter) */
    .nav-menu { gap: var(--s-3); height: auto; padding: 0; border-radius: 0; background: none; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
    .nav.nav-menu-open .nav-links { display: flex; }
    .nav-links > a, .nav-links .nav-group > summary { padding: var(--s-3) var(--s-3); border-radius: var(--r-sm); font-size: var(--t-body); }
    .nav-links > a:hover { background: var(--c-lav-soft); }
    .nav-links .nav-group > summary .nav-group-label { flex: 1; justify-content: space-between; }
    .nav-links .mobile-login { display: flex; margin-top: var(--s-2); justify-content: center; background: var(--c-ink); color: var(--c-on-dark); border-radius: var(--r-pill); }
    .nav-links .nav-group > summary { width: 100%; justify-content: space-between; }
    .nav-links .nav-panel { position: static; translate: none; box-shadow: none; padding: 0 0 0 var(--s-4); min-width: 0; background: transparent; }
    .nav-links .nav-panel::before { display: none; }
    .nav.nav-menu-open .mobile-instances { display: block; padding: var(--s-2) 0; }
    .nav.nav-menu-open .mobile-instances .account-row { padding: var(--s-2) var(--s-3); }
    .nav-cta .btn-primary, .nav-cta .account-menu > summary { min-height: 36px; padding: 0 var(--s-3); }
    .nav-cta a.btn-primary:has(.nav-user) { padding-inline: calc(var(--s-3) + 10px); }
  }

  /* ---------- the footer: its long-standing dark look, rebuilt on the tokens */
  .footer { background: var(--c-foot-bg); color: var(--c-foot-ink); font-family: var(--f-body); }
  .footer--site { padding: clamp(96px, 11vw, 158px) 0 var(--s-5); }
  .footer-shell { display: grid; grid-template-columns: minmax(0, 384px) minmax(0, 1fr); gap: clamp(48px, 9vw, 128px); width: min(100% - 2 * var(--gutter), 1216px); margin-inline: auto; }
  .footer-intro .logo { display: inline-block; }
  .footer-wordmark { width: 339px; max-width: 100%; height: auto; }
  .footer-intro p { margin-top: var(--s-5); color: var(--c-foot-text); font-family: var(--f-sub); font-size: calc(var(--t-body) * var(--sub-size)); letter-spacing: -.01em; line-height: var(--lh-body); }
  .footer-start { display: inline-flex; align-items: center; gap: 10px; margin-top: var(--s-6); color: var(--c-foot-ink); font-size: var(--t-small); font-weight: var(--w-semibold); text-decoration: none; }
  .footer-start:hover span { translate: 3px 0; }
  .footer-start span { transition: translate var(--d-fast) ease; }
  .footer-nav { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: clamp(24px, 4vw, 58px); padding-top: 14px; }
  .footer-group h2 { margin: 0 0 20px; font-family: var(--f-body); font-size: var(--t-micro); font-weight: var(--w-medium); line-height: 1; letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--c-foot-head); }
  .footer-group a { display: block; margin-bottom: 13px; color: var(--c-foot-link); font-size: var(--t-small); line-height: var(--lh-ui); text-decoration: none; }
  .footer-group a:hover { color: var(--c-foot-ink); text-decoration: underline; text-decoration-color: var(--c-foot-rule); }
  .footer-meta { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s-4); width: min(100% - 2 * var(--gutter), 1216px); margin: clamp(72px, 10vw, 144px) auto 0; padding-top: 19px; border-top: 1px solid var(--c-foot-rule); }
  .footer-meta p { color: var(--c-foot-meta); font-size: var(--t-xs); line-height: var(--lh-ui); }
  .footer-meta a { color: var(--c-foot-meta); text-decoration: underline; text-decoration-color: var(--c-foot-rule); }
  .footer-meta a:hover { color: var(--c-foot-ink); }
  .footer-motion { padding: 0; border: 0; background: none; font-family: var(--f-body); font-size: var(--t-xs); color: var(--c-foot-meta); text-decoration: underline; text-decoration-color: var(--c-foot-rule); cursor: pointer; }
  .footer-motion:hover { color: var(--c-foot-ink); }
  .footer :focus-visible { outline-color: var(--c-lav); }
  @media (max-width: 960px) {
    .footer-shell { grid-template-columns: 1fr; }
    .footer-nav { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: var(--s-6); }
  }
  @media (max-width: 560px) {
    .footer-nav { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .footer-meta { flex-direction: column; gap: var(--s-2); }
  }

  /* ---------- FAQ: open questions on the page, no boxes */
  .faq { width: min(100% - 2 * var(--gutter), 860px); margin-inline: auto; }
  .faq > h2 { margin-bottom: var(--s-6); }
  .faq details { border-top: 1px solid var(--c-line-2); }
  .faq details:last-of-type { border-bottom: 1px solid var(--c-line-2); }
  .faq summary { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-5); padding: var(--s-5) 0; list-style: none; cursor: pointer; font-family: var(--f-display); font-size: var(--t-h4); font-weight: var(--w-semibold); letter-spacing: var(--ls-snug); line-height: var(--lh-snug); }
  /* the questions in the console face of the homepage's subtitles (--f-sub) */
  .faq summary { font-family: var(--f-sub); font-size: calc(var(--t-h4) * var(--sub-size)); font-weight: var(--w-medium); letter-spacing: -.01em; }
  .faq summary::-webkit-details-marker { display: none; }
  .faq summary::marker { content: ""; }
  .faq summary::after { content: "+"; flex: none; font-family: var(--f-mono); font-size: var(--t-h4); font-weight: var(--w-medium); color: var(--c-purple); transition: transform var(--d-med) var(--ease-out); }
  .faq details[open] summary::after { transform: rotate(45deg); }
  .faq summary:hover { color: var(--c-purple-ink); }
  .faq details > :not(summary) { max-width: var(--measure); padding-bottom: var(--s-5); color: var(--c-muted); }
  .faq details p + p { margin-top: var(--s-3); }

  /* ---------- quotes: short words from people, set in the margins, appearing as you scroll */
  .quote { position: relative; max-width: 300px; margin: 0; font-family: var(--f-display); font-size: var(--t-quote); font-weight: var(--w-medium); line-height: var(--lh-ui); letter-spacing: var(--ls-snug); color: var(--c-ink); }
  .quote::before { content: "\201C"; position: absolute; left: -.08em; top: -.62em; font-size: 3.2em; line-height: 1; color: var(--c-lav); pointer-events: none; }
  .quote p { position: relative; }
  .quote footer, .quote figcaption { margin-top: var(--s-3); font-family: var(--f-mono); font-size: var(--t-hud); font-weight: var(--w-medium); letter-spacing: var(--ls-hud); text-transform: uppercase; color: var(--c-faint); line-height: var(--lh-ui); }
  .quote.reveal { opacity: 0; translate: 0 18px; transition: opacity var(--d-reveal) ease, translate var(--d-reveal) var(--ease-out); }
  .quote.reveal.is-in { opacity: 1; translate: 0 0; }
  @media (prefers-reduced-motion: reduce) { .quote.reveal { opacity: 1; translate: none; transition: none; } }

  /* ---------- the formal page header */
  .page-head { padding: clamp(56px, 9vw, 120px) 0 clamp(32px, 5vw, 64px); }
  .page-head .kicker { display: block; margin-bottom: var(--s-4); }
  .page-head h1 { max-width: 18ch; }
  .page-head .lede { max-width: 56ch; margin-top: var(--s-5); color: var(--c-muted); line-height: var(--lh-lede); }
  .page-head.is-centred { text-align: center; }
  .page-head.is-centred h1, .page-head.is-centred .lede { margin-inline: auto; }
  /* a lede (the line under a page's title or a section's heading) is set in the console face of the homepage's
     subtitles (--f-sub), a step smaller as a monospace face sets large */
  .lede { font-family: var(--f-sub); font-size: calc(var(--t-lead) * var(--sub-size)); letter-spacing: -.01em; color: var(--c-muted); line-height: var(--lh-lede); }

  /* ---------- prose: long-form text (legal pages, about, updates entries) */
  .prose { max-width: var(--measure); font-size: var(--t-body); line-height: var(--lh-prose); color: var(--c-ink-2); }
  .prose > * + * { margin-top: 1em; }
  .prose h2 { margin-top: 2.2em; font-size: var(--t-h3); letter-spacing: var(--ls-snug); color: var(--c-ink); }
  .prose h3 { margin-top: 1.8em; font-size: var(--t-h4); color: var(--c-ink); }
  .prose h4 { margin-top: 1.6em; font-size: var(--t-body); color: var(--c-ink); }
  .prose ul, .prose ol { padding-left: 1.3em; }
  .prose li + li { margin-top: .4em; }
  .prose li::marker { color: var(--c-purple); }
  .prose a { color: var(--c-purple-ink); }
  .prose strong { color: var(--c-ink); }
  .prose blockquote { padding-left: var(--s-4); border-left: 2px solid var(--c-lav); color: var(--c-muted); }
  .prose table { width: 100%; border-collapse: collapse; font-size: var(--t-small); }
  .prose th, .prose td { padding: var(--s-2) var(--s-3); border-bottom: 1px solid var(--c-line); text-align: left; vertical-align: top; }
  .prose th { font-weight: var(--w-semibold); color: var(--c-ink); }

  /* ---------- tables outside prose */
  .table { width: 100%; border-collapse: collapse; font-size: var(--t-small); }
  .table th, .table td { padding: var(--s-3) var(--s-3); border-bottom: 1px solid var(--c-line); text-align: left; vertical-align: top; }
  .table th { font-family: var(--f-mono); font-size: var(--t-hud); font-weight: var(--w-medium); letter-spacing: var(--ls-hud); text-transform: uppercase; color: var(--c-faint); }
  .table-scroll { overflow-x: auto; }

  /* ---------- forms */
  .field { display: grid; gap: var(--s-2); }
  .field + .field { margin-top: var(--s-4); }
  .field label, .label { font-size: var(--t-small); font-weight: var(--w-semibold); color: var(--c-ink); }
  .input, .field input, .field select, .field textarea {
    width: 100%; padding: var(--s-3) var(--s-4); border: 1px solid var(--c-line-2); border-radius: var(--r-sm);
    background: var(--c-surface); font-size: var(--t-body); line-height: var(--lh-ui); color: var(--c-ink);
    transition: border-color var(--d-fast) ease, box-shadow var(--d-fast) ease;
  }
  .input:focus, .field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--c-purple); box-shadow: var(--sh-focus); }
  .field textarea { min-height: 140px; resize: vertical; }
  .hint { font-size: var(--t-xs); color: var(--c-faint); }

  /* ---------- small shared pieces */
  .check-list { list-style: none; display: grid; gap: var(--s-3); }
  .check-list li { position: relative; padding-left: 28px; }
  .check-list li::before { content: ""; position: absolute; left: 2px; top: .45em; width: 12px; height: 7px; border-left: 2px solid var(--c-mint); border-bottom: 2px solid var(--c-mint); rotate: -45deg; }
  .tag-chip { display: inline-flex; align-items: center; gap: var(--s-2); padding: 3px var(--s-3); border-radius: var(--r-pill); background: var(--c-lav-soft); color: var(--c-purple-ink); font-family: var(--f-mono); font-size: var(--t-micro); font-weight: var(--w-medium); letter-spacing: var(--ls-hud); text-transform: uppercase; }
  .rule-dots { height: 2px; background-image: radial-gradient(circle, var(--c-lav) 1.2px, transparent 1.6px); background-size: 12px 2px; opacity: .8; }

  /* ---------- scenes: small stages played by the village's own characters (village.js, VScenes). The canvas fills
     its stage exactly; the stage is the scene's keyboard control */
  [data-scene] { position: relative; }
  .scene-canvas { max-width: none; position: absolute; inset: 0; width: 100%; height: 100%; touch-action: pan-y; -webkit-tap-highlight-color: transparent; }
  [data-scene][role="button"]:focus-visible { outline: 2px dashed var(--c-purple); outline-offset: 6px; border-radius: var(--r-md); }
  /* a scene's keyboard controls: real buttons, out of sight until one of them has focus */
  .scene-controls { position: absolute; left: 50%; bottom: var(--s-2); z-index: 4; display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s-2); translate: -50% 0; width: max-content; max-width: 100%; opacity: 0; pointer-events: none; }
  .scene-controls:focus-within { opacity: 1; pointer-events: auto; }
  .scene-controls button { padding: 6px 12px; border: 1px solid var(--c-line-2); border-radius: var(--r-pill); background: var(--c-surface); font-size: var(--t-xs); font-weight: var(--w-semibold); color: var(--c-ink); }
  /* a character on a page heading: the scene wraps it to find where it sits */
  .vg-ch { display: inline; }
  /* an engine-drawn touch on a formal page: a small stage. Its size comes from --touch-w and --touch-h (set on the
     element, or one of the presets), and where it sits from a placement class */
  .touch { position: relative; display: block; width: min(100%, var(--touch-w, 260px)); height: var(--touch-h, 190px); }
  .touch.is-s { --touch-w: 200px; --touch-h: 150px; }
  .touch.is-m { --touch-w: 280px; --touch-h: 200px; }
  .touch.is-l { --touch-w: 420px; --touch-h: 260px; }
  .touch.is-wide { --touch-w: 100%; }
  .touch.is-centre { margin-inline: auto; }
  .touch.is-right { float: right; margin: 0 0 var(--s-4) var(--s-6); shape-outside: inset(0); }
  .touch.is-left { float: left; margin: 0 var(--s-6) var(--s-4) 0; }
  /* beside a page heading on wide screens, under it on phones */
  .page-head:has(.touch.is-head) { position: relative; }
  .touch.is-head { margin-top: var(--s-5); }
  @media (min-width: 900px) {
    .touch.is-head { position: absolute; right: 0; bottom: var(--s-5); margin: 0; }
    .page-head:has(.touch.is-head) h1, .page-head:has(.touch.is-head) .lede { max-width: min(18ch, 60%); }
    .page-head:has(.touch.is-head) .lede { max-width: min(56ch, 60%); }
  }
  /* in the right margin beside a text column on wide screens (the column needs room: About, Help), under its
     heading on narrower ones */
  .touch.is-margin { margin-block: var(--s-4); }
  @media (min-width: 1100px) {
    .page-about .about-section:has(> .touch.is-margin), .page-help .ask-p1-bubble > div:has(> .touch.is-margin) { position: relative; }
    .touch.is-margin { position: absolute; top: 0; left: calc(100% + var(--s-6)); margin: 0; }
    .page-about .touch.is-margin { top: var(--s-7); }
  }
  /* beside a centred card (Enterprise's Sovereign card) where the screen is wide enough, centred under it otherwise */
  @media (min-width: 1200px) {
    .page-enterprise .plans:has(> .touch.is-aside) { position: relative; }
    .page-enterprise .touch.is-aside { position: absolute; top: 50%; left: calc(50% + 320px + var(--s-6)); translate: 0 -50%; margin: 0; }
  }
  @media (max-width: 640px) {
    .touch.is-right, .touch.is-left { float: none; margin: var(--s-4) auto; }
    /* a touch may ask for a smaller box on phones */
    .touch { width: min(100%, var(--touch-w-sm, var(--touch-w, 260px))); height: var(--touch-h-sm, var(--touch-h, 190px)); }
  }
}

/* ------------------------------------------------------------------------------------------------ home */
/* The homepage: boxless, big type, open space, the village's characters living on the page. A dotted level trail
   winds down through numbered markers. Scenes are drawn by the village engine into their [data-scene] anchors. */
@layer home {
  .homepage { font-size: var(--t-body-lg); }
  .homepage main { overflow-x: clip; }

  /* the plain statement of what Player One is, under the village (it also serves Google's sign-in review) */
  /* under the village screen, one block the width of the figures: a HUD label, what Player One is in the console face
     the sections' subtitles use, with the level trail's start marker in the margin beside it, and three figures that
     matter in the stat strip the product pages use (a figure over a line, under a rule) */
  .homepage .hero-intro { position: relative; z-index: 3; width: min(100% - 2 * var(--gutter), 960px); margin: var(--s-7) auto 0; }
  .homepage .hero-purpose-kicker { margin: 0; }
  .homepage .hero-purpose-row { position: relative; margin-top: var(--s-3); }
  .homepage .hero-intro .start { position: absolute; top: -8px; left: -78px; margin: 0; }
  .homepage .hero-purpose { max-width: 56ch; margin: 0; font-family: var(--f-sub); font-size: calc(var(--t-line) * var(--sub-size)); line-height: var(--lh-lede); letter-spacing: -.01em; color: var(--c-muted); text-wrap: pretty; }
  .homepage .hero-purpose strong { font-weight: var(--w-bold); color: var(--c-ink); }
  .homepage .hero-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-6); margin: var(--s-7) 0 0; padding: 0; list-style: none; }
  .homepage .hero-stats li { padding-top: var(--s-4); border-top: 1px solid var(--c-line-2); }
  .homepage .hero-stats .stat-n { display: block; font-family: var(--f-display); font-size: var(--t-h2); font-weight: var(--w-bold); line-height: var(--lh-heading); letter-spacing: var(--ls-heading); color: var(--c-ink); }
  .homepage .hero-stats .stat-l { display: block; margin-top: var(--s-2); font-size: var(--t-small); line-height: var(--lh-snug); color: var(--c-muted); }
  /* without room in the page's margin the block makes a margin of its own for the marker, so the trail runs down
     beside the text, never through it; where the trail is gone (phones) the marker sits over the label instead */
  @media (max-width: 1180px) { .homepage .hero-intro { padding-left: 72px; } .homepage .hero-intro .start { left: -72px; } }
  @media (max-width: 820px) { .homepage .hero-intro { display: flex; flex-direction: column; padding-left: 0; } .homepage .hero-purpose-row { display: contents; }
    .homepage .hero-intro .start { position: static; order: -1; align-items: flex-start; margin: 0 0 var(--s-4); } .homepage .hero-purpose { margin-top: var(--s-3); } }
  @media (max-width: 700px) { .homepage .hero-stats { grid-template-columns: 1fr; gap: var(--s-5); } }

  /* the level trail through the markers (drawn by stage.js) */
  .homepage .trail { position: absolute; left: 0; top: 0; z-index: 0; pointer-events: none; }
  .homepage .trail path { fill: none; stroke: var(--c-lav); stroke-width: 2.4; stroke-linecap: round; stroke-dasharray: .5 12; opacity: .6; }
  .homepage .node { z-index: 2; display: grid; place-items: center; width: 46px; height: 46px; border: 2px solid var(--c-lav); border-radius: var(--r-round); background: var(--c-page); }
  .homepage .node .hud { font-size: var(--t-micro); letter-spacing: var(--ls-label); }
  .homepage .start { position: relative; z-index: 3; display: flex; flex-direction: column; align-items: center; gap: var(--s-3); margin-top: var(--s-6); }

  /* sections: big type, open space, the scene beside or under it. No cards */
  .homepage .s { position: relative; z-index: 1; padding: var(--section-y) var(--gutter) clamp(60px, 9vh, 120px); }
  .homepage .s .node { position: absolute; top: clamp(48px, 8vh, 88px); }
  /* the first level follows the start marker closely, so the caption, the marker and 01 read as one opening move */
  .homepage #why { padding-top: clamp(110px, 15vh, 170px); }
  .homepage .s.left .node { left: var(--gutter); }
  .homepage .s.right .node { right: var(--gutter); }
  .homepage .s.center .node, .homepage .s.duo .node, .homepage .end .node { left: 50%; translate: -50% 0; }
  .homepage .anchor { position: absolute; top: 0; }
  .homepage .s h2, .homepage .end h2 { position: relative; margin: 0; font-family: var(--f-display); font-size: var(--t-stage); font-weight: var(--w-bold); line-height: var(--lh-display); letter-spacing: var(--ls-stage); text-wrap: balance; }
  .homepage .s h2 { max-width: 11ch; }
  .homepage .line { max-width: var(--sub-measure); margin: var(--s-5) 0 0; font-family: var(--f-sub); font-size: calc(var(--t-line) * var(--sub-size)); font-weight: var(--w-regular); line-height: var(--lh-lede); letter-spacing: -.01em; color: var(--c-muted); text-wrap: balance; }
  .homepage .s.left, .homepage .s.right { display: flex; align-items: center; gap: 5vw; }
  .homepage .s.right { flex-direction: row-reverse; text-align: right; }
  .homepage .s .txt { flex: 1.15; min-width: 0; }
  .homepage .s.right h2, .homepage .s.right .line { margin-left: auto; }
  .homepage .s .art { position: relative; flex: 1; height: clamp(280px, 30vw, 420px); }
  .homepage .s.center { text-align: center; }
  .homepage .s.center h2, .homepage .s.center .line, .homepage .line.c { margin-inline: auto; }
  .homepage .line.c { text-align: center; }
  .homepage [data-scene] { position: relative; }

  .homepage .select { height: clamp(260px, 24vw, 340px); max-width: 980px; margin: var(--s-6) auto 0; }
  .homepage .forge { margin-top: var(--s-3); color: var(--c-muted); }

  .homepage .split { position: relative; display: grid; grid-template-columns: 1fr 1fr; margin-top: var(--s-3); }
  .homepage .split::after { content: ""; position: absolute; left: 50%; top: -6px; bottom: -30px; border-left: 2px dashed var(--c-lav); }
  .homepage .side { padding: 0 clamp(16px, 4vw, 64px); }
  .homepage .side.l { text-align: right; }
  .homepage .side.l h2 { margin-left: auto; }
  .homepage .side.r h2 { color: var(--c-coral-text); }
  .homepage .p1, .homepage .p2 { margin-bottom: var(--s-4); }
  .homepage .gate { height: clamp(320px, 31vw, 460px); max-width: 1080px; margin: 0 auto; }
  /* the scene's canvas runs on below the stage (data-pad), so its shadows fade out under the line, which sits over it */
  .homepage .gate + .line { position: relative; z-index: 1; }

  .homepage .work-wrap { position: relative; max-width: var(--container-wide); margin: var(--s-6) auto 0; }
  .homepage .office { height: clamp(320px, 32vw, 450px); width: min(880px, 100%); margin: 0 auto; }
  .homepage .tags { margin: 0; padding: 0; }
  .homepage .tag { padding: 0; border: 0; background: none; color: var(--c-ink); font-family: var(--f-body); cursor: pointer; }
  .homepage .tag:hover, .homepage .tag.is-on { color: var(--c-purple-ink); }
  .homepage .tag.is-on::before { box-shadow: 0 0 0 4px color-mix(in srgb, var(--c) 25%, transparent); }
  .homepage .tag { position: absolute; left: var(--x); top: var(--y); display: inline-flex; align-items: center; gap: 9px; font-size: var(--t-small); font-weight: var(--w-semibold); line-height: 1; white-space: nowrap; opacity: 0; transform: translateY(12px) rotate(var(--r, 0deg)); transition: opacity var(--d-slow) ease var(--d, 0s), transform var(--d-slow) ease var(--d, 0s); }
  .homepage .tag.is-right { left: auto; right: var(--x); }
  .homepage .tag::before { content: ""; width: 9px; height: 9px; border-radius: var(--r-round); background: var(--c); }
  .homepage .work-wrap.on .tag { opacity: 1; transform: rotate(var(--r, 0deg)); }

  .homepage .chat-s { padding-bottom: clamp(20px, 4vh, 50px); }
  .homepage .chat { height: clamp(300px, 29vw, 420px); max-width: 1040px; margin: 0 auto; }
  .homepage .chans { margin-top: var(--s-4); color: var(--c-muted); }
  .homepage .chat-s .line + .chat { margin-top: var(--s-6); }
  /* the scene's canvas runs on below its stage (data-pad), so the island's shadow fades out under the line, which sits over it */
  .homepage .chat + .chans { position: relative; z-index: 1; }

  .homepage .saved-hud { margin-bottom: var(--s-4); }
  .homepage .saved-title { display: inline-block; }
  .homepage #saved .txt { position: relative; }
  .homepage .stage-over { position: absolute; inset: 0; z-index: 3; }
  .homepage .end-title { position: relative; display: inline-block; }

  .homepage .end { position: relative; z-index: 1; padding: var(--section-y) var(--gutter) var(--s-8); text-align: center; }
  .homepage .end .node { position: absolute; top: 60px; }
  .homepage .end h2 { font-size: var(--t-finale); max-width: none; }
  .homepage .end h2 .two { color: var(--c-coral-text); }
  /* under the finale, the player count, as a game shows who is online: a mint dot that breathes */
  /* (below the row of the team the finale scene draws under the title) */
  .homepage .end-players { max-width: 64ch; margin: var(--s-9) auto 0; line-height: var(--lh-ui); text-wrap: balance; }
  .homepage .end-players .live { display: inline-block; width: 8px; height: 8px; margin-right: var(--s-2); vertical-align: 1px; border-radius: var(--r-round); background: currentColor; animation: live-breathe 2.4s ease-in-out infinite; }
  @keyframes live-breathe { 0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, currentColor 45%, transparent); } 50% { box-shadow: 0 0 0 6px color-mix(in srgb, currentColor 0%, transparent); } }
  @media (prefers-reduced-motion: reduce) { .homepage .end-players .live { animation: none; } }
  .homepage .node.played { border-color: var(--c-mint); }
  .homepage .node.played .hud { color: var(--c-mint-ink); }

  /* ---------- being good: the promises in the company's agreement, in plain words. Calm after the finale: the
     purpose, then six promises that fade in as they come into view, one after another along each row */
  .homepage .good { position: relative; z-index: 1; width: min(100% - 2 * var(--gutter), var(--container)); margin-inline: auto; padding: var(--s-9) 0 var(--s-4); scroll-margin-top: calc(var(--nav-h) + var(--s-4)); }
  /* behind it, on the right, a seed of life in faint thin lines: seven circles drawing themselves in one after
     another as the section comes into view */
  /* (placed from the top of the section's padding, above the label; its circles fill only the middle of its box, so
     they stay clear of the line over the promises) */
  .homepage .good-head { position: relative; }
  .homepage .good-head > h2 { margin: var(--s-2) 0 0; font-size: var(--t-h2); }
  .homepage .good-seed { position: absolute; z-index: -1; top: calc(var(--s-7) - var(--s-9)); right: 1%; width: min(370px, 30vw); height: auto; pointer-events: none; }
  .homepage .good-seed circle { fill: none; stroke: var(--c-ink); stroke-width: .8; opacity: .11; stroke-dasharray: 1; stroke-dashoffset: 0; vector-effect: non-scaling-stroke; }
  .homepage .good-seed.reveal circle { stroke-dashoffset: 1; transition: stroke-dashoffset 1.8s var(--ease-out) calc(var(--d) * .2s); }
  .homepage .good-seed.reveal.is-in circle { stroke-dashoffset: 0; }
  @media (prefers-reduced-motion: reduce) { .homepage .good-seed.reveal circle { stroke-dashoffset: 0; transition: none; } }
  @media (max-width: 700px) { .homepage .good-seed { top: calc(-1 * var(--s-7)); right: -14vw; width: 72vw; } }
  /* under it, a light note in pencil, in the hand of the hero's "click me" */
  .homepage .good-note { margin: var(--s-7) 0 0; font-family: var(--f-hand); font-size: calc(var(--t-hand) * .75); font-weight: var(--w-regular); line-height: 1.3; color: color-mix(in srgb, var(--c-muted) 60%, var(--c-faint)); }
  .homepage .good-note a { color: var(--c-purple-ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
  .homepage .good-note a:hover { color: var(--c-purple); }
  .homepage .good-lede { max-width: var(--measure); margin: var(--s-5) 0 0; font-family: var(--f-sub); font-size: calc(var(--t-lead) * var(--sub-size)); letter-spacing: -.01em; line-height: var(--lh-lede); color: var(--c-muted); text-wrap: pretty; }
  .homepage .good-lede strong { font-weight: var(--w-bold); color: var(--c-ink); }
  .homepage .good-rules { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-7) var(--s-6); margin: var(--s-8) 0 0; padding: 0; list-style: none; }
  .homepage .good-rules li { padding-top: var(--s-4); border-top: 1px solid var(--c-line-2); }
  .homepage .good-rules .hud { display: block; margin-bottom: var(--s-3); }
  .homepage .good-rules h3 { margin: 0; font-size: var(--t-h4); font-weight: var(--w-semibold); line-height: var(--lh-snug); letter-spacing: var(--ls-snug); }
  .homepage .good-rules p { margin: var(--s-2) 0 0; color: var(--c-muted); }
  .homepage .good-rules .reveal { opacity: 0; translate: 0 14px; transition: opacity var(--d-reveal) ease, translate var(--d-reveal) var(--ease-out); }
  .homepage .good-rules .reveal.is-in { opacity: 1; translate: 0 0; }
  .homepage .good-rules li:nth-child(3n + 2) { transition-delay: .12s; }
  .homepage .good-rules li:nth-child(3n) { transition-delay: .24s; }
  @media (max-width: 960px) { .homepage .good-rules { grid-template-columns: repeat(2, minmax(0, 1fr)); } .homepage .good-rules li:nth-child(n) { transition-delay: 0s; } }
  @media (max-width: 600px) { .homepage .good-rules { grid-template-columns: 1fr; gap: var(--s-6); } }
  @media (prefers-reduced-motion: reduce) { .homepage .good-rules .reveal { opacity: 1; translate: none; transition: none; } }
  .homepage .home-faq { position: relative; z-index: 1; padding: var(--s-9) 0 var(--s-10); }
  .homepage .home-faq > h2 { font-size: var(--t-h2); }

  /* quotes: short words from people, set in the side margins between sections, fading in as you scroll */
  .homepage .quote-slot { position: relative; z-index: 2; display: flex; padding: var(--s-6) var(--gutter); pointer-events: none; }
  .homepage .quote-slot.left { justify-content: flex-start; }
  .homepage .quote-slot.right { justify-content: flex-end; }
  .homepage .quote-slot .quote { pointer-events: auto; }
  .homepage .quote-slot.left .quote { rotate: -1.2deg; }
  .homepage .quote-slot.right .quote { rotate: 1.2deg; }
  @media (min-width: 1100px) {
    .homepage .quote-slot { height: 0; padding: 0; overflow: visible; }
    /* in the next section's open top, clear of the stage above and of the trail and its marker in the gutter */
    .homepage .quote-slot .quote { position: absolute; top: var(--s-4); }
    .homepage .quote-slot.left .quote { left: calc(var(--gutter) * .42 + var(--s-7)); }
    .homepage .quote-slot.right .quote { right: calc(var(--gutter) * .42 + var(--s-7)); }
  }

  /* wide screens: each marker sits in the gutter the trail runs down, outside the section's padding */
  @media (min-width: 821px) {
    .homepage { --gut: calc(var(--gutter) * .42); }
    .homepage .s.g-l .node { left: calc(var(--gut) - 23px); right: auto; translate: none; }
    .homepage .s.g-r .node { right: calc(var(--gut) - 23px); left: auto; translate: none; }
    .homepage .work-wrap { max-width: min(var(--container-wide), calc(100vw - 4 * var(--gut) - 40px)); }
  }
  @media (max-width: 1180px) {
    .homepage .work-wrap { display: flex; flex-wrap: wrap; justify-content: center; }
    .homepage .work-wrap .office { flex: 0 0 100%; }
    .homepage .tags { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s-2) var(--s-4); margin-top: var(--s-4); }
    .homepage .tag, .homepage .tag.is-right { position: static; opacity: 1; transform: none; }
  }
  @media (max-width: 820px) {
    .homepage .s.left, .homepage .s.right { flex-direction: column; align-items: stretch; text-align: left; }
    .homepage .s.right h2, .homepage .s.right .line { margin-left: 0; }
    .homepage .s .art { width: 100%; flex: none; height: clamp(240px, 70vw, 320px); }
    .homepage .trail { display: none; }
    .homepage .s { padding-top: 120px; }
    .homepage .chat { height: 300px; margin-top: 28px; }
    .homepage .office { height: clamp(240px, 64vw, 320px); }
    .homepage .work-wrap { display: flex; flex-wrap: wrap; justify-content: center; }
    .homepage .work-wrap .office { flex: 0 0 100%; }
    .homepage .tags { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s-2) var(--s-4); margin-top: var(--s-4); }
    .homepage .tag, .homepage .tag.is-right { position: static; opacity: 1; transform: none; }
    .homepage .select { height: 260px; margin-inline: -12px; }
    .homepage .split { grid-template-columns: 1fr; gap: 28px; }
    .homepage .split::after { display: none; }
    .homepage .side.l { text-align: left; }
    .homepage .side.l h2 { margin-left: 0; }
    .homepage .s.right .node { right: auto; left: var(--gutter); }
    .homepage .quote-slot { padding-block: var(--s-7) 0; }
  }
  @media (prefers-reduced-motion: reduce) { .homepage .tag { transition: none; } }
}

/* ---------------------------------------------------------------- pages: Prices */
/* Prices (site/prices/index.html, body .page-prices): the plans page in the formal character.

   The same blocks in the same order: plans, toggles, cards, meters, explanation rows, link cards, add-ons, bands,
   questions and dialog, in the tokens' look (Geologica headings, Hanken text, mono labels, the purple accent).
   Plan cards stay cards (they are the page's purpose) and the dark pieces stay dark: the offer banner, the Surge
   card, the Enterprise link card, "Bring your own AI", the close band and the winning column of the trial dialog.
   Below the plans the page is laid out like the rest of the site: sections a formal section's space apart, each
   under a plain heading, with what every plan includes as an open list and the add-ons as ruled columns rather
   than boxes.

   The plan cards, add-on tiles and questions are built by the page's own script, so the class names it writes
   (card, pop, p2-badge, p2-tag, price, was, cents, nmtag, billed, vC-*, vy, vn, chev, ipanel, cta, addon,
   p2-faq-item, faq-mark) are kept as they were. Teams and Enterprise use the same components under the same names
   (product.css); the values here follow that file except where this page's three-button toggle and wider price
   line need otherwise (card padding, toggle padding, a price line that may wrap). */

/* TOKEN REQUESTS (from here to @layer pages) */
/* ::backdrop did not inherit from :root in older browsers, so the scrim is declared on it too. A separate rule, so a
   browser that does not know ::backdrop drops only this one. The four dark-surface tokens, --c-scrim and --t-item
   are the same names and values as in product.css (Teams, Enterprise) and company.css, so they merge as one. */
@layer pages {

  /* ---------- shell */
  .page-prices #top, .page-prices #plans { scroll-margin-top: calc(var(--nav-h) + var(--s-3)); }
  .page-prices .deal :focus-visible, .page-prices .card.pop :focus-visible { outline-color: var(--c-lav); }

  /* ---------- the offer banner: 10% off for life and the 30-day guarantee (dark, as it was) */
  .page-prices .top-offer { padding-top: var(--s-6); }
  .page-prices .offers { display: grid; gap: var(--s-5); }
  .page-prices .deal {
    position: relative; isolation: isolate; overflow: hidden;
    display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--s-5) var(--s-6);
    padding: var(--s-5) var(--s-6); border-radius: var(--r-lg);
    background: var(--c-ink); color: var(--c-on-dark);
  }
  .page-prices .deal::before {
    content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background:
      radial-gradient(120% 140% at 0% 0%, color-mix(in srgb, var(--c-purple) 38%, transparent), transparent 55%),
      repeating-linear-gradient(135deg, transparent 0 14px, color-mix(in srgb, var(--c-on-dark) 5%, transparent) 14px 15px);
  }
  .page-prices .deal-left { display: grid; justify-items: center; gap: var(--s-2); }
  .page-prices .deal-pct { display: flex; align-items: flex-start; gap: var(--s-1); font-family: var(--f-display); font-weight: var(--w-bold); line-height: var(--lh-display); color: var(--c-lav); }
  .page-prices .deal-pct span { font-size: var(--t-h1); letter-spacing: var(--ls-heading); font-variant-numeric: tabular-nums; }
  .page-prices .deal-pct em { padding-top: var(--s-1); font-size: var(--t-h3); font-style: normal; line-height: var(--lh-display); text-transform: uppercase; }
  .page-prices .deal-copy { min-width: 0; }
  .page-prices .deal-h { margin: 2px 0 var(--s-1); font-family: var(--f-display); font-size: var(--t-h3); font-weight: var(--w-bold); line-height: var(--lh-snug); letter-spacing: var(--ls-snug); }
  .page-prices .deal-s { color: var(--c-dark-muted); }
  .page-prices .deal-nm { color: var(--c-on-dark); font-weight: var(--w-bold); }
  .page-prices .deal-right { display: grid; justify-items: center; gap: var(--s-3); }
  .page-prices .deal-seal {
    display: grid; align-content: center; justify-items: center; gap: 1px; width: 88px; height: 88px;
    border: 1.5px dashed color-mix(in srgb, var(--c-on-dark) 45%, transparent); border-radius: var(--r-round);
    transform: rotate(-8deg); text-align: center; font-size: var(--t-micro); line-height: var(--lh-tight);
  }
  .page-prices .deal-seal svg { width: 16px; height: 16px; color: var(--c-lav); }
  .page-prices .deal-seal b { font-family: var(--f-display); font-size: var(--t-small); font-weight: var(--w-bold); }
  .page-prices .deal-seal span { max-width: 62px; }
  .page-prices .deal-cta {
    min-height: 44px; padding: 0 var(--s-5); border: 0; border-radius: var(--r-pill);
    background: var(--c-lav); color: var(--c-ink); font-size: var(--t-small); font-weight: var(--w-bold);
    transition: background-color var(--d-fast) ease;
  }
  .page-prices .deal-cta:hover { background: var(--c-lav-2); }
  @media (max-width: 760px) {
    .page-prices .deal { grid-template-columns: auto minmax(0, 1fr); }
    .page-prices .deal-right { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-3); }
    .page-prices .deal-seal { display: flex; align-items: center; justify-content: center; gap: var(--s-2); width: auto; height: auto; padding: var(--s-2) var(--s-4); border-radius: var(--r-pill); transform: none; font-size: var(--t-xs); }
    .page-prices .deal-seal span { max-width: none; white-space: nowrap; }
  }
  @media (max-width: 420px) {
    .page-prices .deal { grid-template-columns: 1fr; padding: var(--s-5); text-align: left; }
    .page-prices .deal-left { justify-items: start; }
    .page-prices .deal-right { flex-direction: column; align-items: stretch; }
    .page-prices .deal-cta { width: 100%; }
  }

  /* ---------- the header: kicker, h1 and lede, centred (shared .page-head), closer to the banner than elsewhere */
  .page-prices .page-head { padding: var(--s-8) 0 var(--s-6); }
  @media (max-width: 520px) { .page-prices .page-head { padding: var(--s-6) 0 var(--s-5); } }

  /* ---------- the plans */
  .page-prices .view { display: flex; flex-direction: column; gap: var(--s-6); padding: var(--s-2) 0 0; }

  /* the Monthly / Annual / Start free control */
  .page-prices .bill { display: flex; justify-content: center; }
  .page-prices .seg { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s-1); padding: var(--s-1); border: 1px solid var(--c-line-2); border-radius: var(--r-pill); background: var(--c-surface); }
  .page-prices .seg button {
    display: inline-flex; align-items: center; gap: var(--s-2); min-height: 40px; padding: 0 var(--s-4);
    border: 0; border-radius: var(--r-pill); background: transparent; color: var(--c-ink);
    font-size: var(--t-small); font-weight: var(--w-semibold);
    transition: background-color var(--d-fast) ease, color var(--d-fast) ease;
  }
  .page-prices .seg button[aria-pressed="false"]:hover { color: var(--c-purple); }
  .page-prices .seg button[aria-pressed="true"] { background: var(--c-purple); color: var(--c-on-dark); }
  .page-prices .save { font-family: var(--f-mono); font-size: var(--t-micro); font-weight: var(--w-medium); letter-spacing: var(--ls-hud); text-transform: uppercase; color: var(--c-purple); }
  .page-prices .seg button[aria-pressed="true"] .save { color: var(--c-lav-2); }
  @media (max-width: 430px) {
    .page-prices .seg button { padding: 0 var(--s-3); }
    .page-prices .seg .save { display: none; }
  }

  .page-prices .thesis { text-align: center; font-family: var(--f-display); font-size: var(--t-h3); font-weight: var(--w-semibold); line-height: var(--lh-snug); letter-spacing: var(--ls-snug); text-wrap: balance; }

  /* ---------- plan cards (built by the page script); .pop is Surge, the dark card. Each card carries its own
     muted, rule, accent, soft-panel and track colours, so the dark card only swaps those. */
  .page-prices .grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: var(--s-5); align-items: stretch; }
  .page-prices .card {
    --pc-muted: var(--c-muted); --pc-line: var(--c-line); --pc-accent: var(--c-purple); --pc-accent-ink: var(--c-on-dark); --pc-soft: var(--c-lav-soft); --pc-track: var(--c-line-2);
    display: flex; flex-direction: column; gap: var(--s-5); min-width: 0; padding: var(--s-5);  /* not --s-6 as on Teams: the price line needs the room */
    border: 1px solid var(--c-line); border-radius: var(--r-lg); background: var(--c-surface); color: var(--c-ink);
  }
  .page-prices .card.pop {
    --pc-muted: var(--c-dark-muted); --pc-line: var(--c-dark-line); --pc-accent: var(--c-lav); --pc-accent-ink: var(--c-ink); --pc-soft: var(--c-dark-wash); --pc-track: var(--c-dark-track);
    border-color: var(--c-ink); background: var(--c-ink); color: var(--c-on-dark);
  }
  /* the three cards line up row by row: each spans the rows its script writes (head, line, price, the billed line on
     Annual, the power panel, the button) and shares them with its neighbours, so a price line that wraps in one card
     moves that row in all three and the power panels and buttons stay level. Without subgrid or :has() the cards
     stay flex columns, as above */
  @supports (grid-template-rows: subgrid) and selector(:has(a)) {
    .page-prices .grid > .card { display: grid; grid-row: span 5; grid-template-rows: subgrid; row-gap: var(--s-5); }
    .page-prices .grid > .card:has(> .billed) { grid-row: span 6; }
    .page-prices .grid > .card > .vC { align-self: start; } /* an open explanation in one card leaves the others' panels as they are */
  }
  @media (prefers-reduced-motion: no-preference) {
    .page-prices .card { transition: transform var(--d-fast) ease; }
    .page-prices .card:hover { transform: translateY(-3px); }
  }
  .page-prices .card-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); min-height: 28px; }
  .page-prices .card h2 { font-size: var(--t-h3); font-weight: var(--w-bold); letter-spacing: var(--ls-snug); }

  /* "Most popular" and "10% OFF": mono chips in the card's accent (purple on a light card, lavender on the dark one) */
  .page-prices .p2-badge, .page-prices .nmtag {
    display: inline-flex; align-items: center; padding: 3px var(--s-2); border-radius: var(--r-pill);
    background: var(--pc-accent); color: var(--pc-accent-ink);
    font-family: var(--f-mono); font-size: var(--t-micro); font-weight: var(--w-medium); line-height: var(--lh-snug);
    letter-spacing: var(--ls-hud); text-transform: uppercase; white-space: nowrap;
  }
  .page-prices .p2-badge { padding-inline: var(--s-3); }

  .page-prices .p2-tag { min-height: calc(var(--lh-body) * 3em); color: var(--pc-muted); }

  /* the price line: struck regular price, new-member price, "/ month" and the chip; it wraps rather than overflow */
  .page-prices .price { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s-1) var(--s-2); }
  .page-prices .price strong { font-family: var(--f-display); font-size: var(--t-price); font-weight: var(--w-bold); line-height: var(--lh-tight); letter-spacing: var(--ls-snug); font-variant-numeric: tabular-nums; white-space: nowrap; }
  .page-prices .price > span:not(.nmtag) { font-size: var(--t-small); color: var(--pc-muted); white-space: nowrap; }
  .page-prices .was { font-size: var(--t-body-lg); font-weight: var(--w-semibold); color: var(--pc-muted); text-decoration: line-through; text-decoration-thickness: 2px; font-variant-numeric: tabular-nums; white-space: nowrap; }
  .page-prices .price .cents { margin-left: 1px; font-size: var(--t-small); font-weight: var(--w-bold); letter-spacing: 0; vertical-align: .95em; }
  .page-prices .was .cents { font-size: var(--t-micro); vertical-align: .5em; }
  .page-prices .nmtag { margin-left: auto; align-self: center; }
  .page-prices .billed { margin-top: calc(-1 * var(--s-3)); font-size: var(--t-small); color: var(--pc-muted); }

  /* the power panel: the "x" badge, the 8-segment meter and the price per 1x */
  .page-prices .vC { display: grid; overflow: hidden; border: 1px solid var(--pc-line); border-radius: var(--r-md); }
  .page-prices .vC-pwr { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; align-items: center; gap: var(--s-2) var(--s-3); padding: var(--s-3) var(--s-4); background: var(--pc-soft); }
  .page-prices .vC-badge { grid-row: 1 / span 2; padding-right: var(--s-1); font-family: var(--f-display); font-size: var(--t-h2); font-weight: var(--w-bold); line-height: var(--lh-tight); letter-spacing: var(--ls-heading); color: var(--pc-accent); font-variant-numeric: tabular-nums; }
  .page-prices .vC-pt { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--s-2); }
  .page-prices .vC-pt b { font-family: var(--f-display); font-size: var(--t-body); font-weight: var(--w-semibold); }
  .page-prices .vC-pt span { font-size: var(--t-xs); font-weight: var(--w-semibold); color: var(--pc-muted); }
  .page-prices .vC-seg { display: grid; grid-template-columns: repeat(8, 1fr); gap: 3px; }
  .page-prices .vC-seg i { display: block; height: 6px; border-radius: var(--r-pill); background: var(--pc-track); }
  .page-prices .vC-seg i.on { background: var(--pc-accent); }

  /* the four spec rows: each a button that opens its explanation */
  .page-prices .vC-row {
    display: grid; gap: var(--s-2); width: 100%; padding: var(--s-3) var(--s-4);
    border: 0; border-top: 1px solid var(--pc-line); background: transparent; color: inherit;
    font-size: var(--t-small); text-align: left; cursor: pointer;
  }
  .page-prices .vC-top { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); }
  .page-prices .vC-k { font-weight: var(--w-medium); transition: color var(--d-fast) ease; }
  .page-prices .vC-row:hover .vC-k { color: var(--pc-accent); }
  .page-prices .vC-v { display: inline-flex; align-items: center; gap: var(--s-2); font-weight: var(--w-semibold); }
  .page-prices .vn { font-weight: var(--w-medium); color: var(--pc-muted); }
  .page-prices .vC-bar { display: block; height: 6px; overflow: hidden; border-radius: var(--r-pill); background: var(--pc-track); }
  .page-prices .vC-bar span { display: block; height: 100%; border-radius: var(--r-pill); background: var(--pc-accent); }
  .page-prices .chev { flex: none; color: var(--pc-muted); transition: transform var(--d-fast) ease, color var(--d-fast) ease; }
  .page-prices .vC-row[aria-expanded="true"] .chev { transform: rotate(180deg); color: var(--pc-accent); }
  .page-prices .ipanel {
    margin: 0 var(--s-3) var(--s-3); padding: var(--s-3) var(--s-4); border-left: 2px solid var(--pc-accent); border-radius: var(--r-xs);
    background: var(--pc-soft); color: inherit; font-size: var(--t-small); line-height: var(--lh-body);
    animation: prices-panel-in var(--d-fast) var(--ease-out);
  }
  @keyframes prices-panel-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

  /* "Get started" */
  .page-prices .cta {
    display: flex; align-items: center; justify-content: center; min-height: 48px; margin-top: auto;
    border-radius: var(--r-pill); background: var(--c-ink); color: var(--c-on-dark);
    font-size: var(--t-body); font-weight: var(--w-semibold); text-decoration: none;
    transition: background-color var(--d-fast) ease;
  }
  .page-prices .cta:hover { background: var(--c-purple); }
  .page-prices .card.pop .cta { background: var(--c-lav); color: var(--c-ink); }
  .page-prices .card.pop .cta:hover { background: var(--c-lav-2); }

  /* ---------- the free-trial panel that "Start free" shows in place of the cards */
  .page-prices .free { display: grid; grid-template-columns: 1fr; }
  .page-prices .free-main { display: flex; flex-direction: column; gap: var(--s-3); min-width: 0; padding: var(--s-6); border: 2px solid var(--c-purple); border-radius: var(--r-lg); background: var(--c-surface); }
  .page-prices .free-k, .page-prices .tdlg-k, .page-prices .bey-k { font-family: var(--f-mono); font-size: var(--t-hud); font-weight: var(--w-medium); line-height: var(--lh-tight); letter-spacing: var(--ls-hud); text-transform: uppercase; color: var(--c-muted); }
  .page-prices .tdlg-hl { color: var(--c-purple); }
  .page-prices .free-s { max-width: var(--measure); color: var(--c-muted); }
  .page-prices .free-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); gap: var(--s-4) var(--s-5); margin: var(--s-2) 0 var(--s-1); list-style: none; }
  .page-prices .free-list li { position: relative; display: grid; align-content: start; gap: 2px; padding-left: 28px; }
  .page-prices .free-list li::before {
    content: "\2713"; position: absolute; left: 0; top: 2px; display: grid; place-items: center; width: 20px; height: 20px;
    border-radius: var(--r-round); background: var(--c-purple); color: var(--c-on-dark);
    font-size: var(--t-micro); font-weight: var(--w-bold); line-height: var(--lh-tight);
  }
  .page-prices .free-list b { font-family: var(--f-display); font-weight: var(--w-semibold); }
  .page-prices .free-list span { font-size: var(--t-small); color: var(--c-muted); }
  .page-prices .free-cta {
    align-self: flex-start; margin-top: auto; min-height: 48px; padding: 0 var(--s-6);
    border: 0; border-radius: var(--r-pill); background: var(--c-purple); color: var(--c-on-dark);
    font-size: var(--t-body); font-weight: var(--w-bold);
    transition: background-color var(--d-fast) ease;
  }
  .page-prices .free-cta:hover { background: var(--c-purple-ink); }
  @media (max-width: 820px) { .page-prices .free-main { padding: var(--s-5); } }

  /* ---------- the Teams and Enterprise link cards (Enterprise dark, as it was) */
  .page-prices .beyond { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: var(--s-4); margin-top: var(--s-4); }
  .page-prices .bey {
    display: flex; flex-direction: column; gap: var(--s-2); min-width: 0; padding: var(--s-5);
    border: 1px solid var(--c-line); border-radius: var(--r-lg); background: var(--c-surface); color: var(--c-ink); text-decoration: none;
    transition: border-color var(--d-fast) ease, transform var(--d-fast) ease;
  }
  .page-prices .bey:hover { border-color: var(--c-purple); transform: translateY(-2px); }
  .page-prices .bey b { font-family: var(--f-display); font-size: var(--t-h3); font-weight: var(--w-bold); line-height: var(--lh-snug); letter-spacing: var(--ls-snug); }
  .page-prices .bey span:not(.bey-k) { color: var(--c-muted); }
  .page-prices .bey em { margin-top: var(--s-1); font-style: normal; font-weight: var(--w-bold); color: var(--c-purple); }
  .page-prices .bey-ent { border-color: var(--c-ink); background: var(--c-ink); color: var(--c-on-dark); }
  .page-prices .bey-ent .bey-k, .page-prices .bey-ent span:not(.bey-k) { color: var(--c-dark-muted); }
  .page-prices .bey-ent em { color: var(--c-lav); }
  .page-prices .bey-ent:hover { border-color: var(--c-lav); }
  @media (prefers-reduced-motion: reduce) {
    .page-prices .bey { transition: none; }
    .page-prices .bey:hover { transform: none; }
  }

  /* ---------- what every plan includes, growing, add-ons and "Bring your own AI": two sections a formal section's
     space apart. What every plan includes is an open list under a hairline, and the add-ons are ruled columns, like
     the promises on the homepage */
  .page-prices .p2-sec { padding-top: var(--section-y-formal); }
  .page-prices .p2-sec h2 { font-size: var(--t-h2); text-wrap: balance; }
  .page-prices .feat { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); gap: var(--s-4) var(--s-6); margin-top: var(--s-6); padding-top: var(--s-6); border-top: 1px solid var(--c-line); list-style: none; }
  .page-prices .feat li { display: flex; gap: var(--s-3); }
  .page-prices .feat svg { flex-shrink: 0; margin-top: 5px; color: var(--c-purple); }
  .page-prices .grow { display: flow-root; }
  .page-prices .grow p { max-width: var(--measure); margin-top: var(--s-4); color: var(--c-muted); }
  .page-prices .addons { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); gap: var(--s-6); margin-top: var(--s-6); }
  .page-prices .addon { display: flex; flex-direction: column; gap: var(--s-2); padding-top: var(--s-5); border-top: 1px solid var(--c-line); }
  .page-prices .addon b { font-size: var(--t-body); font-weight: var(--w-semibold); }
  .page-prices .addon span { flex-grow: 1; font-size: var(--t-small); color: var(--c-muted); }
  .page-prices .addon strong { font-family: var(--f-display); font-size: var(--t-h3); font-weight: var(--w-bold); letter-spacing: var(--ls-snug); }
  .page-prices .byo { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3) var(--s-5); margin-top: var(--s-8); padding: var(--s-5) var(--s-6); border-radius: var(--r-lg); background: var(--c-ink); color: var(--c-on-dark); }
  .page-prices .byo b { font-family: var(--f-display); font-size: var(--t-h3); font-weight: var(--w-bold); letter-spacing: var(--ls-snug); }
  .page-prices .byo span { flex: 1 1 380px; min-width: 0; color: var(--c-dark-muted); }
  @media (max-width: 520px) {
    .page-prices .p2-tag { min-height: 0; }
  }

  /* ---------- questions: the page script's button accordion, in the shared FAQ look (hairlines, a mono sign in purple) */
  .page-prices .faq { padding: var(--section-y-formal) 0; }
  .page-prices .faq > h2 { font-size: var(--t-h2); margin-bottom: var(--s-6); }
  .page-prices .p2-faq-list { border-top: 1px solid var(--c-line-2); }
  .page-prices .p2-faq-item { border-bottom: 1px solid var(--c-line-2); }
  .page-prices .p2-faq-item button {
    display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-5); width: 100%; min-height: 60px; padding: var(--s-5) 0;
    border: 0; background: transparent; color: var(--c-ink); text-align: left;
    /* (its questions in the console face, as every FAQ's are) */
    font-family: var(--f-sub); font-size: calc(var(--t-h4) * var(--sub-size)); font-weight: var(--w-medium); line-height: var(--lh-snug); letter-spacing: -.01em;
    transition: color var(--d-fast) ease;
  }
  .page-prices .p2-faq-item button:hover { color: var(--c-purple-ink); }
  .page-prices .faq-mark { flex: none; font-family: var(--f-mono); font-size: var(--t-h4); font-weight: var(--w-medium); color: var(--c-purple); }
  .page-prices .p2-faq-item p { max-width: var(--measure); padding-bottom: var(--s-5); color: var(--c-muted); }

  /* ---------- the close band (dark, as it was; the same class names as on Teams) */
  .page-prices .close-band { padding-block: 0 var(--section-y-formal); text-align: center; }  /* (the questions above leave the space) */
  .page-prices .close-band .wrap { display: flex; flex-direction: column; align-items: center; gap: var(--s-3); }
  .page-prices .close-title { font-family: var(--f-display); font-size: var(--t-h2); font-weight: var(--w-bold); line-height: var(--lh-heading); letter-spacing: var(--ls-heading); text-wrap: balance; }
  .page-prices .close-sub { color: var(--c-muted); }
  .page-prices .close-cta { margin-top: var(--s-4); background: var(--c-purple); color: #fff; }
  .page-prices .close-cta:hover { background: var(--c-purple-ink); }

  /* ---------- the trial dialog ("Before you start free") */
  .page-prices .tdlg {
    position: fixed; inset: 0; width: min(560px, 100% - 2 * var(--s-4)); height: fit-content; max-height: calc(100% - 2 * var(--s-4)); margin: auto;
    padding: var(--s-6) var(--s-6) var(--s-5); overflow: auto;
    border: 0; border-radius: var(--r-lg); background: var(--c-surface); color: var(--c-ink); box-shadow: var(--sh-2);
  }
  .page-prices .tdlg::backdrop { background: var(--c-scrim); }
  .page-prices .tdlg[open] { animation: prices-dialog-in var(--d-med) var(--ease-out); }
  @keyframes prices-dialog-in { from { opacity: 0; transform: translateY(12px) scale(.98); } to { opacity: 1; transform: none; } }
  @media (prefers-reduced-motion: reduce) { .page-prices .tdlg[open], .page-prices .ipanel { animation: none; } }
  .page-prices .tdlg-x {
    position: absolute; top: var(--s-3); right: var(--s-4); display: grid; place-items: center; width: 40px; height: 40px;
    border: 0; border-radius: var(--r-round); background: var(--c-surface-2); color: var(--c-ink);
    font-size: var(--t-h3); line-height: var(--lh-tight);
    transition: background-color var(--d-fast) ease;
  }
  .page-prices .tdlg-x:hover { background: var(--c-lav-soft); }
  .page-prices .tdlg h2 { margin: var(--s-2) var(--s-6) var(--s-3) 0; font-size: var(--t-item); line-height: var(--lh-snug); letter-spacing: var(--ls-snug); }
  .page-prices .tdlg-lede { font-family: var(--f-sub); letter-spacing: -.01em; color: var(--c-muted); }
  .page-prices .tdlg-cmp { display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--s-3); margin: var(--s-5) 0 var(--s-3); }
  .page-prices .tc-h, .page-prices .tc { min-width: 0; padding: var(--s-3) var(--s-4); }
  .page-prices .tc-h { padding-top: var(--s-4); border-radius: var(--r-md) var(--r-md) 0 0; font-family: var(--f-display); font-size: var(--t-h4); font-weight: var(--w-bold); }
  .page-prices .tc { position: relative; padding-left: calc(var(--s-4) + var(--s-5)); border-top: 1px solid var(--c-line); font-size: var(--t-small); }
  .page-prices .tc::before { content: "\2013"; position: absolute; left: var(--s-4); color: var(--c-muted); }
  .page-prices .tc-h:not(.win), .page-prices .tc:not(.win) { border-left: 1px solid var(--c-line); border-right: 1px solid var(--c-line); }
  .page-prices .tc-h.win, .page-prices .tc.win { border-color: var(--c-dark-line); background: var(--c-ink); color: var(--c-on-dark); }
  .page-prices .tc.win::before { content: "\2713"; color: var(--c-lav); font-weight: var(--w-bold); }
  .page-prices .tc.both::before { content: "\2713"; color: var(--c-purple); font-weight: var(--w-bold); }
  .page-prices .tc.win.both::before { color: var(--c-lav); }
  .page-prices .tc:nth-last-child(-n+2) { padding-bottom: var(--s-4); border-radius: 0 0 var(--r-md) var(--r-md); }
  .page-prices .tc:nth-last-child(2):not(.win) { border-bottom: 1px solid var(--c-line); }
  .page-prices .tdlg-save { padding: var(--s-3); border-radius: var(--r-sm); background: var(--c-surface-2); font-size: var(--t-small); font-weight: var(--w-semibold); }
  .page-prices .tdlg-act { display: grid; justify-items: center; gap: var(--s-2); margin-top: var(--s-5); }
  .page-prices .tdlg-yes {
    display: flex; align-items: center; justify-content: center; width: 100%; min-height: 52px; padding: 0 var(--s-5);
    border-radius: var(--r-pill); background: var(--c-purple); color: var(--c-on-dark);
    font-size: var(--t-body); font-weight: var(--w-bold); text-decoration: none;
    transition: background-color var(--d-fast) ease;
  }
  .page-prices .tdlg-yes:hover { background: var(--c-purple-ink); }
  .page-prices .tdlg-no { padding: var(--s-2); border: 0; background: none; color: var(--c-muted); font-size: var(--t-small); font-weight: var(--w-semibold); text-decoration: underline; text-underline-offset: 3px; }
  .page-prices .tdlg-no:hover { color: var(--c-ink); }
  @media (max-width: 440px) {
    .page-prices .tdlg { padding: var(--s-5); }
    .page-prices .tc, .page-prices .tc-h { padding-inline: var(--s-3); }
    .page-prices .tc { padding-left: calc(var(--s-3) + var(--s-4)); font-size: var(--t-xs); }
    .page-prices .tc::before { left: var(--s-3); }
  }
}

/* ---------------------------------------------------------------- pages: Teams, Enterprise, Models and Fold */
/* Product pages: Teams, Enterprise, Models and Fold memory. The formal character: the shared families at the calm
   scale, open and light, rules and space by default, boxes only where something is chosen or typed (the plan cards,
   the enquiry dialog, form fields, the provider logo tiles). Work file: the lead merges it into site.css.

   Teams and Enterprise share the plan components with Prices (the same class names, written by each page's own
   script): .seg, .card and .card.pop, .price, .vC (power and spec rows), .ipanel, .ticks, .cta, the button FAQ and
   the dark close band. They are scoped to the two pages here; widen the scope to .page-prices when merging. */

@layer pages {

  /* ============================================================================================ shared by the four */
  :is(.page-teams, .page-enterprise, .page-models, .page-fold) .section { padding-top: var(--section-y-formal); }
  /* a jump to a section or to the plans lands below the sticky menu */
  :is(.page-teams, .page-enterprise, .page-models, .page-fold) :is(.section, .plans, .page-head, .provider) { scroll-margin-top: calc(var(--nav-h) + var(--s-4)); }
  :is(.page-models, .page-fold) main { padding-bottom: var(--section-y-formal); }


  /* ============================================================================================ plans: Teams, Enterprise */
  :is(.page-teams, .page-enterprise) .plans { display: grid; gap: var(--s-6); }

  /* the Monthly / Annual control: a segmented pill, the pressed half in purple */
  :is(.page-teams, .page-enterprise) .bill { display: flex; justify-content: center; }
  :is(.page-teams, .page-enterprise) .seg {
    display: inline-flex; flex-wrap: wrap; justify-content: center; gap: var(--s-1); padding: var(--s-1);
    border: 1px solid var(--c-line-2); border-radius: var(--r-pill); background: var(--c-surface);
  }
  :is(.page-teams, .page-enterprise) .seg button {
    display: inline-flex; align-items: center; gap: var(--s-2); min-height: 40px; padding: 0 var(--s-5);
    border: 0; border-radius: var(--r-pill); background: transparent; color: var(--c-ink);
    font-size: var(--t-small); font-weight: var(--w-semibold); line-height: var(--lh-tight);
    transition: background-color var(--d-fast) ease, color var(--d-fast) ease;
  }
  :is(.page-teams, .page-enterprise) .seg button:hover { color: var(--c-purple-ink); }
  :is(.page-teams, .page-enterprise) .seg button[aria-pressed="true"] { background: var(--c-purple); color: var(--c-on-dark); }
  :is(.page-teams, .page-enterprise) .seg .save {
    font-family: var(--f-mono); font-size: var(--t-micro); font-weight: var(--w-medium); letter-spacing: var(--ls-hud);
    text-transform: uppercase; color: var(--c-purple);
  }
  :is(.page-teams, .page-enterprise) .seg button[aria-pressed="true"] .save { color: inherit; }

  :is(.page-teams, .page-enterprise) .thesis {
    max-width: 40ch; margin-inline: auto; text-align: center;
    font-family: var(--f-display); font-size: var(--t-h3); font-weight: var(--w-semibold);
    line-height: var(--lh-snug); letter-spacing: var(--ls-snug); text-wrap: balance;
  }

  :is(.page-teams, .page-enterprise) .grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: var(--s-5); align-items: stretch; }
  :is(.page-teams, .page-enterprise) .grid.one { grid-template-columns: minmax(0, 640px); justify-content: center; }

  /* the plan card; .pop is the dark one (Team Surge, Sovereign). The local properties carry the two looks */
  :is(.page-teams, .page-enterprise) .card {
    --card-muted: var(--c-muted); --card-line: var(--c-line); --card-track: var(--c-line-2);
    --card-accent: var(--c-purple); --card-accent-ink: var(--c-on-dark); --card-wash: var(--c-lav-soft); --card-tick: var(--c-mint-ink);
    display: flex; flex-direction: column; gap: var(--s-5); min-width: 0; padding: var(--s-5);  /* as on Prices: the price line needs the room */
    border: 1px solid var(--c-line); border-radius: var(--r-lg); background: var(--c-surface); color: var(--c-ink);
  }
  :is(.page-teams, .page-enterprise) .card.pop {
    --card-muted: var(--c-dark-muted); --card-line: var(--c-dark-line); --card-track: var(--c-dark-track);
    --card-accent: var(--c-lav); --card-accent-ink: var(--c-ink); --card-wash: var(--c-dark-wash); --card-tick: var(--c-mint);
    border-color: var(--c-ink); background: var(--c-ink); color: var(--c-on-dark);
  }
  /* the three Teams cards line up row by row: each spans the seven rows its script writes (head, line, price, billed
     line, power, perks, button) and shares them with its neighbours, so a price or billed line that wraps in one card
     moves that row in all three and the power panels and buttons stay level. Without subgrid the cards stay flex
     columns, as above */
  @supports (grid-template-rows: subgrid) {
    .page-teams .grid:not(.one) > .card { display: grid; grid-row: span 7; grid-template-rows: subgrid; row-gap: var(--s-5); }
    .page-teams .grid:not(.one) > .card > .vC { align-self: start; } /* an open explanation in one card leaves the others' panels as they are */
  }
  :is(.page-teams, .page-enterprise) .card.pop :focus-visible { outline-color: var(--c-lav); }
  :is(.page-teams, .page-enterprise) .card-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-2) var(--s-3); min-height: 28px; }
  :is(.page-teams, .page-enterprise) .card h2 { font-size: var(--t-h3); letter-spacing: var(--ls-snug); }
  :is(.page-teams, .page-enterprise) :is(.p2-badge, .p2-chip) {
    display: inline-flex; align-items: center; padding: 3px var(--s-3); border-radius: var(--r-pill); white-space: nowrap;
    font-family: var(--f-mono); font-size: var(--t-micro); font-weight: var(--w-medium); line-height: var(--lh-snug);
    letter-spacing: var(--ls-hud); text-transform: uppercase;
  }
  :is(.page-teams, .page-enterprise) .p2-badge { background: var(--card-accent); color: var(--card-accent-ink); }
  :is(.page-teams, .page-enterprise) .p2-chip { border: 1px solid var(--card-line); color: var(--card-accent); }
  :is(.page-teams, .page-enterprise) .p2-tag { min-height: calc(var(--lh-body) * 3em); color: var(--card-muted); }
  :is(.page-teams, .page-enterprise) .grid.one .p2-tag { min-height: 0; }

  /* the price: the struck full price, the price on --t-price, the saving tag */
  /* the line may wrap: at the narrowest three-column width (about 300px cards) the struck price, the price,
     "/ month" and the tag do not fit on one line */
  :is(.page-teams, .page-enterprise) .price { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s-1) var(--s-2); }
  :is(.page-teams, .page-enterprise) .price strong {
    font-family: var(--f-display); font-size: var(--t-price); font-weight: var(--w-bold);
    line-height: var(--lh-tight); letter-spacing: var(--ls-heading); font-variant-numeric: tabular-nums; white-space: nowrap;
  }
  :is(.page-teams, .page-enterprise) .price > span { color: var(--card-muted); }
  :is(.page-teams, .page-enterprise) .price > span:not(.nmtag) { font-size: var(--t-small); white-space: nowrap; }
  :is(.page-teams, .page-enterprise) .price .cents { margin-left: 1px; font-size: var(--t-body); font-weight: var(--w-bold); letter-spacing: normal; vertical-align: .95em; }
  :is(.page-teams, .page-enterprise) .price .was {
    font-size: var(--t-h4); font-weight: var(--w-semibold); color: var(--card-muted);
    text-decoration: line-through; text-decoration-thickness: 2px; font-variant-numeric: tabular-nums;
  }
  :is(.page-teams, .page-enterprise) .price .was .cents { font-size: var(--t-micro); font-weight: var(--w-semibold); vertical-align: .6em; }
  :is(.page-teams, .page-enterprise) .price .nmtag {
    align-self: center; margin-left: auto; padding: 3px var(--s-2); border-radius: var(--r-pill);
    background: var(--card-accent); color: var(--card-accent-ink); white-space: nowrap;
    font-family: var(--f-mono); font-size: var(--t-micro); font-weight: var(--w-bold); letter-spacing: var(--ls-hud); text-transform: uppercase;
  }
  :is(.page-teams, .page-enterprise) .billed { margin-top: calc(-1 * var(--s-3)); font-size: var(--t-small); color: var(--card-muted); }

  /* power per seat and the spec rows: one quiet panel, each row a button that opens its explanation */
  :is(.page-teams, .page-enterprise) .vC { display: grid; overflow: hidden; border: 1px solid var(--card-line); border-radius: var(--r-md); }
  :is(.page-teams, .page-enterprise) .vC-pwr {
    display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; align-items: center; gap: var(--s-2) var(--s-3);
    padding: var(--s-3) var(--s-4); background: var(--card-wash);
  }
  :is(.page-teams, .page-enterprise) .vC-badge {
    grid-row: 1 / span 2; padding-right: var(--s-1);
    font-family: var(--f-display); font-size: var(--t-h2); font-weight: var(--w-bold); line-height: var(--lh-tight);
    letter-spacing: var(--ls-heading); color: var(--card-accent);
  }
  :is(.page-teams, .page-enterprise) .vC-pt { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--s-2); }
  /* on Teams the label and the price per 1x always stack, so the three power panels are the same height whether or
     not the price fits beside "Power per seat"; raised cents never make a line taller than its neighbours */
  .page-teams .vC-pt { flex-direction: column; align-items: flex-start; gap: var(--s-1); }
  .page-teams :is(.vC-pt, .billed) .cents { line-height: 0; }
  :is(.page-teams, .page-enterprise) .vC-pt b { font-family: var(--f-display); font-size: var(--t-body); font-weight: var(--w-semibold); }
  :is(.page-teams, .page-enterprise) .vC-pt span { font-size: var(--t-xs); font-weight: var(--w-semibold); color: var(--card-muted); }
  :is(.page-teams, .page-enterprise) .vC-seg { display: grid; grid-template-columns: repeat(8, 1fr); gap: 3px; }
  :is(.page-teams, .page-enterprise) .vC-seg i { height: 6px; border-radius: var(--r-pill); background: var(--card-track); }
  :is(.page-teams, .page-enterprise) .vC-seg i.on { background: var(--card-accent); }
  :is(.page-teams, .page-enterprise) .vC-row {
    display: grid; gap: var(--s-2); width: 100%; padding: var(--s-3) var(--s-4);
    border: 0; border-top: 1px solid var(--card-line); background: transparent; color: inherit; font-size: var(--t-small); text-align: left; cursor: pointer;
  }
  :is(.page-teams, .page-enterprise) .vC-top { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); }
  :is(.page-teams, .page-enterprise) .vC-k { font-weight: var(--w-medium); transition: color var(--d-fast) ease; }
  :is(.page-teams, .page-enterprise) .vC-row:hover .vC-k { color: var(--card-accent); }
  :is(.page-teams, .page-enterprise) .vC-v { display: inline-flex; align-items: center; gap: var(--s-2); font-weight: var(--w-semibold); }
  :is(.page-teams, .page-enterprise) .vy { font-weight: var(--w-semibold); }                          /* "✓ Included" */
  :is(.page-teams, .page-enterprise) .vn { font-weight: var(--w-medium); color: var(--card-muted); } /* "✕ Not included" */
  :is(.page-teams, .page-enterprise) .chev { flex: none; color: var(--card-muted); transition: transform var(--d-fast) ease, color var(--d-fast) ease; }
  :is(.page-teams, .page-enterprise) .vC-row[aria-expanded="true"] .chev { transform: rotate(180deg); color: var(--card-accent); }
  :is(.page-teams, .page-enterprise) .vC-bar { display: block; height: 6px; overflow: hidden; border-radius: var(--r-pill); background: var(--card-track); }
  :is(.page-teams, .page-enterprise) .vC-bar span { display: block; height: 100%; border-radius: var(--r-pill); background: var(--card-accent); } /* its width is set by the page script */
  :is(.page-teams, .page-enterprise) .ipanel {
    margin: 0 var(--s-3) var(--s-3); padding: var(--s-3) var(--s-4);
    border-left: 2px solid var(--card-accent); border-radius: var(--r-xs); background: var(--card-wash);
    font-size: var(--t-small); line-height: var(--lh-body);
    animation: product-ipanel-in var(--d-fast) var(--ease-out);
  }
  @keyframes product-ipanel-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

  /* rows of a tier list (the Enterprise script can draw one; no plan uses it today) */
  :is(.page-teams, .page-enterprise) .rows { border-top: 1px solid var(--card-line); }
  :is(.page-teams, .page-enterprise) .row { display: flex; justify-content: space-between; gap: var(--s-3); padding: var(--s-3) 0; border-bottom: 1px solid var(--card-line); font-size: var(--t-small); }
  :is(.page-teams, .page-enterprise) .row dt { color: var(--card-muted); }
  :is(.page-teams, .page-enterprise) .row dd { font-weight: var(--w-semibold); text-align: right; }
  :is(.page-teams, .page-enterprise) .row-note { font-weight: var(--w-medium); color: var(--card-muted); }

  :is(.page-teams, .page-enterprise) .ticks { display: flex; flex-direction: column; flex-grow: 1; gap: var(--s-2); list-style: none; font-size: var(--t-small); }
  :is(.page-teams, .page-enterprise) .ticks li { display: flex; align-items: flex-start; gap: var(--s-3); }
  :is(.page-teams, .page-enterprise) .ticks svg { flex: none; margin-top: 2px; color: var(--card-tick); }
  .page-enterprise .ticks { padding-top: var(--s-5); border-top: 1px solid var(--card-line); }

  :is(.page-teams, .page-enterprise) .cta {
    display: flex; align-items: center; justify-content: center; width: 100%; min-height: 48px; padding: 0 var(--s-5);
    border: 0; border-radius: var(--r-pill); background: var(--c-ink); color: var(--c-on-dark);
    font-weight: var(--w-semibold); text-decoration: none; cursor: pointer;
    transition: background-color var(--d-fast) ease, color var(--d-fast) ease;
  }
  :is(.page-teams, .page-enterprise) .cta:hover { background: var(--c-purple); }
  :is(.page-teams, .page-enterprise) .card.pop .cta { background: var(--c-lav); color: var(--c-ink); }
  :is(.page-teams, .page-enterprise) .card.pop .cta:hover { background: var(--c-on-dark); }

  :is(.page-teams, .page-enterprise) .partner-link { text-align: center; font-size: var(--t-small); color: var(--c-muted); }
  :is(.page-teams, .page-enterprise) .back { text-align: center; font-size: var(--t-small); }

  /* the questions: a button accordion drawn by the page script, the same look as .faq on <details> */
  :is(.page-teams, .page-enterprise) .faq { padding-bottom: var(--section-y-formal); }
  :is(.page-teams, .page-enterprise) .faq > h2 { text-align: center; }
  :is(.page-teams, .page-enterprise) .p2-faq-item { border-top: 1px solid var(--c-line-2); }
  :is(.page-teams, .page-enterprise) .p2-faq-item:last-child { border-bottom: 1px solid var(--c-line-2); }
  :is(.page-teams, .page-enterprise) .p2-faq-item > button {
    display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-5); width: 100%; padding: var(--s-5) 0;
    border: 0; background: transparent; color: var(--c-ink); text-align: left; cursor: pointer;
    font-family: var(--f-display); font-size: var(--t-h4); font-weight: var(--w-semibold); line-height: var(--lh-snug); letter-spacing: var(--ls-snug);
    transition: color var(--d-fast) ease;
  }
  :is(.page-teams, .page-enterprise) .p2-faq-item > button:hover { color: var(--c-purple-ink); }
  :is(.page-teams, .page-enterprise) .faq-mark { flex: none; font-family: var(--f-mono); font-size: var(--t-h4); font-weight: var(--w-medium); color: var(--c-purple); }
  :is(.page-teams, .page-enterprise) .p2-faq-item > p { max-width: var(--measure); padding-bottom: var(--s-5); color: var(--c-muted); }

  /* the dark close band: one of the two dark surfaces kept on the plans pages */
  :is(.page-teams, .page-enterprise) .close-band { padding-block: 0 var(--section-y-formal); text-align: center; }  /* (the questions above leave the space) */
  :is(.page-teams, .page-enterprise) .close-band .wrap { display: flex; flex-direction: column; align-items: center; gap: var(--s-3); }
  :is(.page-teams, .page-enterprise) .close-title {
    font-family: var(--f-display); font-size: var(--t-h2); font-weight: var(--w-bold);
    line-height: var(--lh-heading); letter-spacing: var(--ls-heading); text-wrap: balance;
  }
  :is(.page-teams, .page-enterprise) .close-sub { color: var(--c-muted); }
  :is(.page-teams, .page-enterprise) .close-cta { margin-top: var(--s-4); background: var(--c-purple); color: #fff; }
  :is(.page-teams, .page-enterprise) .close-cta:hover { background: var(--c-purple-ink); }

  @media (max-width: 520px) {
    :is(.page-teams, .page-enterprise) .card { padding: var(--s-5); }
    :is(.page-teams, .page-enterprise) .p2-tag { min-height: 0; }
  }
  @media (max-width: 430px) {
    :is(.page-teams, .page-enterprise) .seg button { padding: 0 var(--s-3); }
    :is(.page-teams, .page-enterprise) .seg .save { display: none; }
  }
  @media (prefers-reduced-motion: reduce) {
    :is(.page-teams, .page-enterprise) .ipanel { animation: none; }
    :is(.page-teams, .page-enterprise) .chev { transition: none; }
  }


  /* ============================================================================================ Enterprise: the enquiry dialog */
  .page-enterprise .enterprise-modal {
    position: fixed; inset: 0; z-index: 200; display: none; align-items: center; justify-content: center;
    padding: var(--s-5); background: var(--c-scrim);
  }
  .page-enterprise .enterprise-modal.active { display: flex; }
  .page-enterprise .enterprise-dialog {
    position: relative; width: min(44rem, 100%); max-height: 92vh; overflow: auto; padding: var(--s-6);
    border-radius: var(--r-lg); background: var(--c-surface); box-shadow: var(--sh-2);
    animation: product-dialog-in var(--d-med) var(--ease-out);
  }
  @keyframes product-dialog-in { from { opacity: 0; transform: translateY(12px) scale(.98); } to { opacity: 1; transform: none; } }
  .page-enterprise .enterprise-close {
    position: absolute; top: var(--s-4); right: var(--s-4); display: grid; place-items: center; width: 40px; height: 40px;
    border: 0; border-radius: var(--r-pill); background: var(--c-surface-2); color: var(--c-ink);
    font-size: var(--t-h3); line-height: var(--lh-tight);
    transition: background-color var(--d-fast) ease, color var(--d-fast) ease;
  }
  .page-enterprise .enterprise-close:hover { background: var(--c-lav-soft); color: var(--c-purple-ink); }
  .page-enterprise .enterprise-form-head { margin-bottom: var(--s-6); padding-right: var(--s-7); }
  .page-enterprise .enterprise-form-head .kicker { display: block; }
  .page-enterprise .enterprise-form-head h3 { margin-top: var(--s-3); font-weight: var(--w-bold); letter-spacing: var(--ls-heading); }
  .page-enterprise .enterprise-form-head p { margin-top: var(--s-3); color: var(--c-muted); }
  .page-enterprise .enterprise-form > * + * { margin-top: var(--s-4); }
  .page-enterprise .enterprise-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-4); }
  .page-enterprise .enterprise-grid > .field + .field { margin-top: 0; }
  .page-enterprise .enterprise-hp { position: absolute; left: -9999px; } /* the honeypot: off screen, never shown */
  .page-enterprise .enterprise-needs { min-width: 0; margin-inline: 0; margin-bottom: 0; padding: 0; border: 0; } /* the top margin comes from the form's rhythm */
  .page-enterprise .enterprise-needs legend { margin-bottom: var(--s-2); padding: 0; }
  .page-enterprise .enterprise-checks { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-2) var(--s-4); }
  .page-enterprise .enterprise-checks label { display: flex; align-items: center; gap: var(--s-2); font-size: var(--t-small); cursor: pointer; }
  .page-enterprise .enterprise-checks input { flex: none; width: 18px; height: 18px; margin: 0; accent-color: var(--c-purple); }
  .page-enterprise .enterprise-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-4); padding-top: var(--s-2); }
  .page-enterprise .enterprise-actions .btn-primary { min-height: 48px; padding-inline: var(--s-6); }
  .page-enterprise .enterprise-actions .btn-primary:disabled { opacity: .6; cursor: progress; }
  .page-enterprise .enterprise-status { font-size: var(--t-small); color: var(--c-purple-ink); } /* "Sending..." */
  .page-enterprise .enterprise-status.success { color: var(--c-mint-ink); }
  .page-enterprise .enterprise-status.error { color: var(--c-danger); }
  @media (max-width: 640px) {
    .page-enterprise .enterprise-grid, .page-enterprise .enterprise-checks { grid-template-columns: 1fr; }
    .page-enterprise .enterprise-dialog { padding: var(--s-5); }
  }
  @media (prefers-reduced-motion: reduce) { .page-enterprise .enterprise-dialog { animation: none; } }


  /* ============================================================================================ Models */
  .page-models .page-head + .section { padding-top: var(--s-4); }
  .page-models .section > h2 + * { margin-top: var(--s-5); }
  .page-models .section > p { max-width: var(--measure); color: var(--c-ink-2); }
  .page-models .section > p + p { margin-top: var(--s-3); }
  .page-models .section > p + div { margin-top: var(--s-5); }

  /* the finder: the shared field, an inline Clear, and four checkbox pills */
  .page-models .finder { display: grid; gap: var(--s-5); }
  .page-models .finder-row { display: flex; align-items: center; gap: var(--s-3); }
  .page-models .finder-row input { flex: 1 1 auto; min-width: 0; }
  .page-models .finder-row .btn-secondary { flex: none; min-height: 48px; }
  .page-models .finder-filters { min-width: 0; margin: 0; padding: 0; border: 0; }
  .page-models .finder-filters legend { margin-bottom: var(--s-2); padding: 0; }
  .page-models .chips { display: flex; flex-wrap: wrap; gap: var(--s-2); }
  .page-models .filter-chip { position: relative; display: inline-flex; }
  .page-models .filter-chip input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
  .page-models .filter-chip span {
    display: inline-flex; align-items: center; gap: var(--s-2); padding: var(--s-2) var(--s-4);
    border: 1px solid var(--c-line-2); border-radius: var(--r-pill); background: var(--c-surface); color: var(--c-ink-2);
    font-size: var(--t-small); font-weight: var(--w-medium); white-space: nowrap;
    transition: background-color var(--d-fast) ease, border-color var(--d-fast) ease, color var(--d-fast) ease;
  }
  .page-models .filter-chip span::before { content: ""; flex: none; width: 9px; height: 9px; border: 1.5px solid currentColor; border-radius: var(--r-pill); }
  .page-models .filter-chip:hover input:not(:checked) + span { border-color: var(--c-ink); color: var(--c-ink); }
  .page-models .filter-chip input:checked + span { border-color: var(--c-purple); background: var(--c-purple); color: var(--c-on-dark); }
  .page-models .filter-chip input:checked + span::before { background: currentColor; }
  .page-models .filter-chip input:focus-visible + span { outline: 2px solid var(--c-purple); outline-offset: 3px; }

  /* the status line (role=status); without JavaScript it has nothing to say, so it goes */
  .page-models .section > .finder-status { margin-block: var(--s-5) var(--s-6); font-size: var(--t-small); color: var(--c-muted); font-variant-numeric: tabular-nums; }
  @media (scripting: none) { .page-models .section > .finder-status { display: none; } }

  /* providers (built by models.js): open blocks on a hairline, the logo tile and name on one line */
  .page-models .providers { display: grid; gap: var(--s-7); }
  .page-models .provider { padding-top: var(--s-6); border-top: 1px solid var(--c-line-2); }
  .page-models .provider-head { display: flex; align-items: center; gap: var(--s-4); }
  .page-models .provider-logo {
    flex: none; display: grid; place-items: center; width: 48px; height: 48px; overflow: hidden;
    border: 1px solid var(--c-line); border-radius: var(--r-sm); background: var(--c-surface);
  }
  .page-models .provider-logo img { width: 36px; height: 36px; object-fit: contain; }
  .page-models .provider-logo.is-dark { border-color: var(--c-ink); background: var(--c-ink); }
  .page-models .provider-logo.is-initial { background: var(--c-surface-2); font-family: var(--f-display); font-size: var(--t-h3); font-weight: var(--w-semibold); color: var(--c-purple-ink); }
  .page-models .provider-title { min-width: 0; }
  .page-models .provider-title h3 { overflow-wrap: anywhere; }
  .page-models .provider-billing { margin-top: 2px; font-size: var(--t-small); font-weight: var(--w-medium); color: var(--c-purple-ink); }
  .page-models .provider-note {
    max-width: var(--measure); margin-top: var(--s-4); padding-left: var(--s-4); border-left: 2px solid var(--c-lav);
    font-size: var(--t-small); line-height: var(--lh-body); color: var(--c-ink-2);
  }
  .page-models .provider-note + .provider-note { margin-top: var(--s-3); }
  .page-models .provider-note strong { color: var(--c-ink); }
  .page-models .models { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 248px), 1fr)); gap: var(--s-3); margin-top: var(--s-5); list-style: none; }
  .page-models .model { padding: var(--s-4); border-radius: var(--r-md); background: var(--c-surface-2); font-size: var(--t-small); }
  .page-models .model-head { margin-bottom: var(--s-2); font-size: var(--t-body); line-height: var(--lh-snug); }
  .page-models .model-name { font-weight: var(--w-semibold); color: var(--c-ink); overflow-wrap: anywhere; }
  .page-models .model-rec {
    display: inline-block; margin-left: 2px; padding: 1px var(--s-2); border-radius: var(--r-pill); vertical-align: .1em; white-space: nowrap;
    background: var(--c-purple); color: var(--c-on-dark); font-size: var(--t-micro); font-weight: var(--w-semibold); line-height: var(--lh-body);
  }
  .page-models .model-tags { display: flex; flex-wrap: wrap; gap: var(--s-1); margin-bottom: var(--s-3); list-style: none; }
  .page-models .model-tags li {
    padding: 1px var(--s-2); border: 1px solid var(--c-line); border-radius: var(--r-pill); background: var(--c-surface);
    font-size: var(--t-xs); line-height: var(--lh-body); color: var(--c-ink-2);
  }
  .page-models .model-fact { line-height: var(--lh-snug); color: var(--c-ink-2); }
  .page-models .model-fact + .model-fact { margin-top: var(--s-1); }
  .page-models .model-date { margin-top: var(--s-2); font-size: var(--t-xs); color: var(--c-muted); }
  .page-models .models-missing { margin-top: var(--s-2); font-size: var(--t-small); color: var(--c-muted); }
  .page-models .models-error { display: grid; justify-items: start; gap: var(--s-4); max-width: var(--measure); padding: var(--s-5); border: 1px dashed var(--c-line-2); border-radius: var(--r-md); }

  /* what's new (markdown from the catalogue, built by models.js) */
  .page-models .news-item { max-width: var(--measure); padding-block: var(--s-5); border-top: 1px solid var(--c-line); }
  .page-models .news-item:first-child { padding-top: 0; border-top: 0; }
  .page-models .news-item > * + * { margin-top: var(--s-3); }
  .page-models .news-item :is(h3, h4) { font-size: var(--t-h4); }
  .page-models .news-item :is(p, li) { color: var(--c-ink-2); }
  .page-models .news-item :is(ul, ol) { padding-left: 1.3em; }
  .page-models .news-item li + li { margin-top: var(--s-1); }
  .page-models .news-item li::marker { color: var(--c-purple); }

  /* retired models: one disclosure, the old ids in mono */
  .page-models .retired-list { border-block: 1px solid var(--c-line-2); }
  .page-models .retired-list > summary {
    display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-4); padding: var(--s-4) 0;
    list-style: none; cursor: pointer; font-weight: var(--w-semibold); color: var(--c-purple-ink);
  }
  .page-models .retired-list > summary::-webkit-details-marker { display: none; }
  .page-models .retired-list > summary::marker { content: ""; }
  .page-models .retired-list > summary::after { content: "+"; flex: none; font-family: var(--f-mono); font-size: var(--t-h4); font-weight: var(--w-medium); color: var(--c-purple); transition: transform var(--d-med) var(--ease-out); }
  .page-models .retired-list[open] > summary::after { transform: rotate(45deg); }
  .page-models .retired-group { padding-bottom: var(--s-5); }
  .page-models .retired-group h3 { margin-bottom: var(--s-3); font-size: var(--t-h4); }
  .page-models .retired-group ul { columns: 2 17rem; column-gap: var(--s-6); list-style: none; }
  .page-models .retired-group li { margin-bottom: var(--s-1); break-inside: avoid; font-size: var(--t-small); line-height: var(--lh-snug); color: var(--c-ink-2); }
  .page-models .retired-old { font-family: var(--f-mono); font-size: var(--t-xs); color: var(--c-ink); overflow-wrap: anywhere; }

  /* how to read this page */
  .page-models .footnote > p { font-size: var(--t-small); color: var(--c-muted); }
  .page-models #catalogue-stamp { font-size: var(--t-xs); color: var(--c-muted); font-variant-numeric: tabular-nums; }

  @media (max-width: 560px) {
    .page-models .models { grid-template-columns: 1fr; }
    .page-models .filter-chip span { padding: var(--s-2) var(--s-3); }
  }
  @media (prefers-reduced-motion: reduce) { .page-models .retired-list > summary::after { transition: none; } }


  /* ============================================================================================ Fold memory */
  .page-fold .section > * + * { margin-top: var(--s-4); }
  .page-fold .section > h2 { max-width: 24ch; }
  .page-fold .section > h2 + * { margin-top: var(--s-5); }
  .page-fold .section > :is(p, .callout, .prompt-list, .spec-list, .quiet-links) { max-width: var(--measure); }
  .page-fold .section > p { color: var(--c-ink-2); }

  /* the paintings: the full column, rounded, no frame; a blur-up while the real file loads */
  .page-fold .art-figure.wrap { margin-bottom: var(--s-4); }
  .page-fold .section > :is(.art-figure, .blurup) { margin-top: var(--s-7); }
  .page-fold .blurup { position: relative; display: block; overflow: hidden; border-radius: var(--r-lg); background: var(--c-surface-2); }
  /* the paintings have transparent, torn-paper edges: once the real file is in, the page shows through them */
  .page-fold .blurup.is-done { background: transparent; }
  .page-fold :is(.hero-art, .how-art) { width: 100%; height: auto; }
  /* a painting never takes more than most of a screen: past that it keeps its shape and centres in the column */
  .page-fold :is(.hero-art, .how-art) { max-height: min(78vh, 680px); width: auto; max-width: 100%; margin-inline: auto; }
  .page-fold img.blur-target { filter: blur(16px); transform: scale(1.04); transition: filter var(--d-slow) ease, transform var(--d-slow) ease; }
  .page-fold img.blur-target.is-loaded { filter: none; transform: none; }
  .page-fold .art-figure figcaption { max-width: var(--measure); margin-top: var(--s-3); font-size: var(--t-small); line-height: var(--lh-body); color: var(--c-muted); }

  /* the stat strip: four open figures on a hairline */
  .page-fold .stat-strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-6) var(--s-5); list-style: none; }
  .page-fold .section > .stat-strip { margin-top: var(--s-7); }
  .page-fold .stat-strip li { padding-top: var(--s-4); border-top: 1px solid var(--c-line-2); }
  .page-fold .stat-n {
    display: block; font-family: var(--f-display); font-size: var(--t-h2); font-weight: var(--w-bold);
    line-height: var(--lh-heading); letter-spacing: var(--ls-heading); color: var(--c-ink);
  }
  .page-fold .stat-l { display: block; margin-top: var(--s-2); font-size: var(--t-small); line-height: var(--lh-snug); color: var(--c-muted); }

  /* doc links: the page icon, in purple */
  .page-fold .doc-link {
    display: inline-flex; align-items: center; gap: var(--s-1); white-space: nowrap;
    color: var(--c-purple-ink); font-weight: var(--w-medium); text-decoration: underline; text-decoration-color: var(--c-lav);
    transition: text-decoration-color var(--d-fast) ease;
  }
  .page-fold .doc-link:hover { text-decoration-color: currentColor; }
  .page-fold .doc-icon { flex: none; opacity: .8; }

  /* the callout: no box, a lavender rule and a mono kicker */
  .page-fold .section > .callout { margin-top: var(--s-6); }
  .page-fold .callout { padding-left: var(--s-5); border-left: 2px solid var(--c-lav); }
  .page-fold .callout > * + * { margin-top: var(--s-4); }
  .page-fold .callout-k { display: block; }
  .page-fold .callout p { color: var(--c-ink-2); }

  /* the prompt chip: a button that copies its quote; a mono Copy, and a mint Copied */
  .page-fold .prompt-box {
    display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s-4); width: 100%; padding: var(--s-4) var(--s-5);
    border: 1px solid var(--c-line-2); border-radius: var(--r-md); background: var(--c-surface); color: var(--c-ink);
    text-align: left; font-size: var(--t-body); line-height: var(--lh-snug); cursor: pointer;
    transition: border-color var(--d-fast) ease;
  }
  .page-fold .prompt-box:hover { border-color: var(--c-purple); }
  .page-fold .pb-quote { flex: 1 1 auto; font-weight: var(--w-medium); }
  .page-fold .pb-act {
    flex: none; display: inline-flex; align-items: center; gap: var(--s-1); padding-top: 3px; white-space: nowrap;
    font-family: var(--f-mono); font-size: var(--t-hud); font-weight: var(--w-medium); letter-spacing: var(--ls-hud); text-transform: uppercase;
    color: var(--c-purple); transition: color var(--d-fast) ease;
  }
  .page-fold .prompt-box.is-copied { border-color: var(--c-mint); }
  .page-fold .prompt-box.is-copied .pb-act { color: var(--c-mint-ink); }
  .page-fold .prompt-list { display: grid; gap: var(--s-3); list-style: none; }
  .page-fold .section > .prompt-list { margin-top: var(--s-5); }

  /* the signals: a two-column list of h3 and paragraph, each on a lavender rule */
  .page-fold .signals { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-6) var(--s-7); list-style: none; }
  .page-fold .section > .signals { margin-top: var(--s-6); }
  .page-fold .signals li { padding-top: var(--s-4); border-top: 2px solid var(--c-lav); }
  .page-fold .signals h3 { font-size: var(--t-h4); }
  .page-fold .signals p { margin-top: var(--s-2); color: var(--c-muted); }

  /* the spec list: key and value, the keys in mono */
  .page-fold .spec-list { list-style: none; border-top: 1px solid var(--c-line-2); }
  .page-fold .section > .spec-list { margin-top: var(--s-6); }
  .page-fold .spec-list li { display: grid; grid-template-columns: minmax(0, 15rem) minmax(0, 1fr); align-items: baseline; gap: var(--s-1) var(--s-5); padding: var(--s-3) 0; border-bottom: 1px solid var(--c-line); }
  .page-fold .spec-k { font-family: var(--f-mono); font-size: var(--t-hud); font-weight: var(--w-medium); letter-spacing: var(--ls-hud); text-transform: uppercase; color: var(--c-muted); }
  .page-fold .spec-v { font-weight: var(--w-medium); color: var(--c-ink); }

  .page-fold .section > .quiet-links { margin-top: var(--s-7); font-size: var(--t-small); color: var(--c-muted); }

  @media (max-width: 900px) { .page-fold .stat-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  @media (max-width: 760px) { .page-fold .signals { grid-template-columns: 1fr; } }
  @media (max-width: 560px) {
    .page-fold .stat-strip { grid-template-columns: 1fr; }
    .page-fold .spec-list li { grid-template-columns: 1fr; }
    .page-fold .prompt-box { padding: var(--s-3) var(--s-4); }
  }
  @media (prefers-reduced-motion: reduce) {
    .page-fold img.blur-target { transform: none; transition: none; }
  }
}

/* ---------------------------------------------------------------- pages: About, Help, News and 404 */
/* Company pages: About, Help, News and the 404. The formal character: the shared families at the calm scale,
   open and light, rules and space in place of cards. Work file: the lead merges it into site.css. */

@layer pages {

  /* ---------------------------------------------------------------------------------------------- About */
  .page-about .about-body { padding-bottom: var(--section-y-formal); }
  .page-about .about-section { padding-top: var(--s-7); border-top: 1px solid var(--c-line); }
  .page-about .about-section + .about-section { margin-top: var(--section-y-formal); }
  .page-about .about-section h2 {
    margin-top: 0;
    font-size: var(--t-h2); font-weight: var(--w-bold); line-height: var(--lh-heading); letter-spacing: var(--ls-heading);
    color: var(--c-ink);
  }
  .page-about .about-section h2 + p { margin-top: var(--s-4); }
  .page-about .closing { margin-top: var(--section-y-formal); padding-top: var(--s-6); border-top: 1px solid var(--c-line); }
  .page-about .quiet-links { margin-top: var(--s-5); font-size: var(--t-small); font-weight: var(--w-medium); color: var(--c-faint); }
  .page-about .quiet-link { color: var(--c-purple-ink); text-decoration-color: var(--c-lav); }
  .page-about .quiet-link:hover { text-decoration-color: currentColor; }

  /* ---------------------------------------------------------------------------------------------- Help */
  .page-help .help-wrap { width: min(100% - 2 * var(--gutter), var(--container-narrow)); margin-inline: auto; padding-bottom: var(--section-y-formal); }
  .page-help .hidden { display: none; }

  /* 'Ask Player One first': an open aside on a lavender rule, the chat icon as a small purple glyph */
  .page-help .ask-p1-bubble { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--s-4); padding-left: var(--s-5); border-left: 2px solid var(--c-lav); }
  .page-help .ask-p1-icon { padding-top: var(--s-1); color: var(--c-purple); }
  .page-help .ask-p1-bubble h2 { font-size: var(--t-h3); font-weight: var(--w-semibold); letter-spacing: var(--ls-snug); line-height: var(--lh-snug); }
  .page-help .ask-p1-bubble p { margin-top: var(--s-3); color: var(--c-ink-2); }
  .page-help .ask-p1-bubble h2 + p { margin-top: var(--s-4); }
  .page-help .ask-p1-examples { display: grid; gap: var(--s-2); margin-top: var(--s-3); list-style: none; }
  .page-help .ask-p1-example { font-weight: var(--w-medium); color: var(--c-ink); }
  .page-help .ask-p1-bubble .ask-p1-close { margin-top: var(--s-4); }

  /* the ticket form: only the controls keep outlines */
  .page-help .ticket-step-title { margin-top: var(--section-y-formal); font-size: var(--t-h2); }
  .page-help .ticket-step-sub { margin-top: var(--s-4); color: var(--c-muted); }
  .page-help .help-form { display: grid; gap: var(--s-5); margin-top: var(--s-6); }
  .page-help .help-form .field + .field { margin-top: 0; }
  .page-help .field ::placeholder { color: var(--c-faint); opacity: 1; }

  .page-help .permission-toggle { display: flex; align-items: flex-start; gap: var(--s-3); cursor: pointer; }
  .page-help .permission-toggle input { flex: none; width: 18px; height: 18px; margin: 3px 0 0; accent-color: var(--c-purple); }
  .page-help .permission-toggle span { font-size: var(--t-small); font-weight: var(--w-semibold); line-height: var(--lh-snug); color: var(--c-ink); }
  .page-help .permission-toggle small { display: block; margin-top: var(--s-1); font-size: var(--t-xs); font-weight: var(--w-regular); line-height: var(--lh-body); color: var(--c-muted); }

  /* the screenshot drop: a dashed lavender control; its file input stays focusable, only visually hidden */
  .page-help .file-drop {
    position: relative; display: flex; align-items: center; justify-content: center; min-height: 88px;
    padding: var(--s-5) var(--s-4); border: 1px dashed var(--c-lav); border-radius: var(--r-sm); background: var(--c-surface);
    text-align: center; cursor: pointer;
    transition: border-color var(--d-fast) ease, background-color var(--d-fast) ease, box-shadow var(--d-fast) ease;
  }
  .page-help .file-drop:hover, .page-help .file-drop.drag-over { border-color: var(--c-purple); background: var(--c-lav-soft); }
  .page-help .file-drop.has-file { border-style: solid; border-color: var(--c-purple); }
  .page-help .file-drop:focus-within { border-color: var(--c-purple); box-shadow: var(--sh-focus); }
  .page-help .file-drop input[type="file"] {
    position: absolute; width: 1px; height: 1px; min-height: 0; padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap; border: 0; opacity: 0;
  }
  .page-help .file-drop-text { font-size: var(--t-small); font-weight: var(--w-regular); line-height: var(--lh-body); color: var(--c-muted); }
  .page-help .file-drop.has-file .file-drop-text { color: var(--c-purple-ink); font-weight: var(--w-medium); }

  /* the attached files (rows built by the page script) */
  .page-help .file-list { display: grid; }
  .page-help .file-list:empty { display: none; }
  .page-help .file-item { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-1) 0 var(--s-1) var(--s-1); border-bottom: 1px solid var(--c-line); font-size: var(--t-small); }
  .page-help .file-item-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--c-ink); }
  .page-help .file-item-size { flex: none; font-family: var(--f-mono); font-size: var(--t-xs); font-weight: var(--w-medium); color: var(--c-faint); }
  .page-help .file-item-remove {
    flex: none; display: inline-grid; place-items: center; width: 36px; height: 36px; padding: 0;
    border: 0; border-radius: var(--r-pill); background: transparent; color: var(--c-muted);
    font-size: var(--t-body-lg); line-height: var(--lh-tight);
    transition: color var(--d-fast) ease, background-color var(--d-fast) ease;
  }
  .page-help .file-item-remove:hover { color: var(--c-coral-ink); background: var(--c-surface-2); }

  /* error lines: hidden until the script shows them (it sets display inline) */
  .page-help .file-error, .page-help .form-error { display: none; font-size: var(--t-small); line-height: var(--lh-snug); color: var(--c-danger); }
  .page-help .screencast-tip { font-size: var(--t-small); line-height: var(--lh-body); color: var(--c-muted); }
  .page-help .screencast-tip a { color: var(--c-purple-ink); }

  .page-help .form-submit { justify-self: start; margin-top: var(--s-2); }
  .page-help .form-submit:disabled { opacity: .55; cursor: not-allowed; }
  .page-help .form-submit:disabled:hover { background: var(--c-ink); }
  .page-help .form-submit .arrow { transition: translate var(--d-fast) ease; }
  .page-help .form-submit:hover:not(:disabled) .arrow { translate: 3px 0; }

  /* sent: an open, centred note with a mint tick */
  .page-help .form-success { display: none; padding-block: var(--s-8) var(--s-6); text-align: center; }
  .page-help .form-success.show { display: block; }
  .page-help .form-success .check {
    display: grid; place-items: center; width: 56px; height: 56px; margin: 0 auto var(--s-5);
    border: 1px solid var(--c-mint); border-radius: var(--r-pill); color: var(--c-mint-ink);
    font-size: var(--t-h3); font-weight: var(--w-semibold); line-height: var(--lh-tight);
  }
  .page-help .form-success p { max-width: 44ch; margin: var(--s-4) auto 0; color: var(--c-muted); }

  @media (max-width: 560px) {
    .page-help .ask-p1-bubble { grid-template-columns: minmax(0, 1fr); gap: var(--s-3); padding-left: var(--s-4); }
    .page-help .form-submit { justify-self: stretch; }
  }
  @media (prefers-reduced-motion: reduce) {
    .page-help .form-submit .arrow { transition: none; }
  }

  /* ---------------------------------------------------------------------------------------------- News */
  .page-news .page-head .quiet-link { color: var(--c-purple-ink); text-decoration-color: var(--c-lav); }
  .page-news .page-head .quiet-link:hover { text-decoration-color: currentColor; }
  .page-news .news-list { padding-bottom: var(--section-y-formal); }
  .page-news .news-item { display: grid; gap: var(--s-3); padding-block: var(--s-7); border-top: 1px solid var(--c-line); }
  .page-news .news-item:last-child { border-bottom: 1px solid var(--c-line); }
  .page-news .news-meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3); }
  .page-news .news-meta time {
    font-family: var(--f-mono); font-size: var(--t-hud); font-weight: var(--w-medium); line-height: var(--lh-tight);
    letter-spacing: var(--ls-hud); text-transform: uppercase; color: var(--c-muted);
  }
  .page-news .news-body h2 { font-size: var(--t-item); font-weight: var(--w-semibold); line-height: var(--lh-snug); letter-spacing: var(--ls-snug); }
  .page-news .news-body p { max-width: var(--measure); margin-top: var(--s-3); color: var(--c-muted); }
  .page-news .news-media { width: min(100%, 640px); margin-top: var(--s-2); }
  .page-news .news-media img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--r-md); background: var(--c-surface-2); }
  @media (min-width: 900px) {
    .page-news .news-item { grid-template-columns: 160px minmax(0, 1fr) 320px; gap: var(--s-6); align-items: start; }
    .page-news .news-meta { flex-direction: column; align-items: flex-start; gap: var(--s-3); padding-top: var(--s-2); }
    .page-news .news-media { width: auto; margin-top: 0; }
  }

  /* ---------------------------------------------------------------------------------------------- 404 */
  .page-404 .notfound { padding-bottom: var(--section-y-formal); }
  .page-404 .page-head { padding-bottom: 0; }
  .page-404 .actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s-3); margin-top: var(--s-6); }
  .page-404 .note {
    max-width: 56ch; margin: var(--s-7) auto 0; padding-top: var(--s-4); border-top: 1px solid var(--c-line);
    text-align: center; font-size: var(--t-small); line-height: var(--lh-body); color: var(--c-muted);
  }
  @media (max-width: 480px) {
    .page-404 .actions { display: grid; }
    .page-404 .actions a { width: 100%; }
  }
}

/* ---------------------------------------------------------------- pages: the updates pages and Fixes */
/* Updates (/updates/ and its archive pages, generated by build-updates.py from updates-src/) and Fixes
   (/updates/fixes/, written by hand). Work file for the redesign: the lead merges it into site.css.

   The formal character: open and light, hairlines in place of cards, one left-aligned column at the text
   measure. The timeline has three columns on wide screens (date, rail, release); on phones the date sits above
   each release and the rail runs down the left edge. */

@layer pages {

  /* ---------- shared by Updates and Fixes */
  :is(.page-updates, .page-fixes) main > .wrap { padding-bottom: var(--section-y-formal); }
  .page-updates .page-head h1 em { font-style: normal; color: var(--c-purple); }
  .page-fixes .page-head .kicker a { color: inherit; text-decoration: none; }
  .page-fixes .page-head .kicker a:hover { text-decoration: underline; }

  /* the link row to the companion page: an icon, a bold line, a sentence and an arrow, between hairlines */
  :is(.page-updates, .page-fixes) .page-switch {
    display: flex; align-items: flex-start; gap: var(--s-4);
    max-width: var(--measure); margin-top: var(--s-6); padding: var(--s-5) 0;
    border-block: 1px solid var(--c-line-2);
    color: var(--c-ink); text-decoration: none;
  }
  :is(.page-updates, .page-fixes) .page-switch .ps-icon {
    flex: none; display: grid; place-items: center; width: 40px; height: 40px;
    border-radius: var(--r-pill); background: var(--c-lav-soft); color: var(--c-purple-ink);
  }
  :is(.page-updates, .page-fixes) .page-switch .ps-body { flex: 1; min-width: 0; }
  :is(.page-updates, .page-fixes) .page-switch b {
    display: block; font-family: var(--f-display); font-size: var(--t-h4); font-weight: var(--w-semibold);
    line-height: var(--lh-snug); letter-spacing: var(--ls-snug); color: var(--c-ink);
    transition: color var(--d-fast) ease;
  }
  :is(.page-updates, .page-fixes) .page-switch .ps-body > span {
    display: block; margin-top: var(--s-1); font-size: var(--t-small); line-height: var(--lh-body); color: var(--c-muted);
  }
  :is(.page-updates, .page-fixes) .page-switch .ps-go {
    flex: none; align-self: center; font-size: var(--t-small); font-weight: var(--w-semibold);
    color: var(--c-purple); white-space: nowrap;
  }
  :is(.page-updates, .page-fixes) .page-switch:hover b { color: var(--c-purple-ink); }
  :is(.page-updates, .page-fixes) .page-switch:hover .ps-go { text-decoration: underline; }
  @media (max-width: 640px) {
    :is(.page-updates, .page-fixes) .page-switch { flex-wrap: wrap; }
    /* the text takes the rest of the first row, so "Fix log" drops to its own row under it */
    :is(.page-updates, .page-fixes) .page-switch .ps-body { flex-basis: calc(100% - 40px - var(--s-4)); }
    :is(.page-updates, .page-fixes) .page-switch .ps-go { margin-left: calc(40px + var(--s-4)); }
  }

  /* the meta chips: the product beside a date, a release's version, a fix release's version */
  .page-updates .timeline-date .product,
  .page-updates .release-version,
  .page-fixes .release-meta .badge {
    display: inline-flex; align-items: center; padding: 3px var(--s-3); border-radius: var(--r-pill);
    background: var(--c-lav-soft); color: var(--c-purple-ink);
    font-family: var(--f-mono); font-size: var(--t-micro); font-weight: var(--w-medium);
    line-height: var(--lh-tight); letter-spacing: var(--ls-hud); text-transform: uppercase;
  }
  .page-updates .release-version, .page-fixes .release-meta .badge { text-transform: none; }
  .page-updates .timeline-date .product.admin { background: var(--c-surface-2); color: var(--c-ink-2); }

  /* the mono labels: kickers, dates and section labels (:where keeps this rule at one class, so the colour
     overrides below win) */
  .page-updates :where(.release-kicker, .featured-label, .sneak-peek-label, .timeline-date .date),
  .page-fixes :where(.release-label, .release-meta .date, .anchor-nav h3) {
    font-family: var(--f-mono); font-size: var(--t-hud); font-weight: var(--w-medium);
    line-height: var(--lh-snug); letter-spacing: var(--ls-hud); text-transform: uppercase; color: var(--c-purple);
  }
  .page-updates .timeline-date .date, .page-fixes .release-meta .date { color: var(--c-ink-2); }
  .page-fixes .anchor-nav h3 { color: var(--c-muted); }

  /* ---------- Updates: the timeline */
  .page-updates .timeline {
    --tl-date: 160px;   /* the date column */
    --tl-rail: 32px;    /* the rail column */
    --tl-gap: var(--s-5);
    --tl-node: 11px;
    --tl-node-y: 2px;   /* lines the node up with the date's first line */
  }
  .page-updates .timeline-item {
    --tl-top: var(--s-7);
    position: relative; display: grid;
    grid-template-columns: var(--tl-date) var(--tl-rail) minmax(0, var(--measure));
    column-gap: var(--tl-gap);
    padding: var(--tl-top) 0 var(--s-7);
  }
  .page-updates .timeline-item:first-child { --tl-top: var(--s-6); }
  /* the rail: a lavender line through every item, from the first node down, fading out after the last */
  .page-updates .timeline-item::before {
    content: ""; position: absolute; top: 0; bottom: 0;
    left: calc(var(--tl-date) + var(--tl-gap) + var(--tl-rail) / 2);
    width: 1px; background: var(--c-lav);
  }
  .page-updates .timeline-item:first-child::before { top: calc(var(--tl-top) + var(--tl-node-y)); }
  .page-updates .timeline-item:last-child::before { background: linear-gradient(var(--c-lav) 60%, transparent); }

  .page-updates .timeline-date {
    grid-column: 1; grid-row: 1; align-self: start;
    position: sticky; top: calc(var(--nav-h) + var(--s-5));
    display: grid; justify-items: start; gap: var(--s-2);
  }
  .page-updates .timeline-node {
    grid-column: 2; grid-row: 1; align-self: start; justify-self: center;
    position: relative; z-index: 1;
    width: var(--tl-node); height: var(--tl-node); margin-top: var(--tl-node-y);
    border: 2px solid var(--c-purple); border-radius: var(--r-pill); background: var(--c-page);
  }
  .page-updates .timeline-node.admin { border-color: var(--c-ink-2); }

  /* a release */
  .page-updates .release-card { grid-column: 3; grid-row: 1; min-width: 0; }
  .page-updates .release-kicker { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); }
  .page-updates .release-title { margin-top: var(--s-3); font-size: var(--t-item); line-height: var(--lh-tight); }
  .page-updates .release-summary { margin-top: var(--s-4); color: var(--c-ink-2); }

  /* the featured block: a lavender rule on its left, no box */
  .page-updates .featured-update { margin-top: var(--s-6); padding: var(--s-1) 0 var(--s-1) var(--s-5); border-left: 2px solid var(--c-lav); }
  .page-updates .featured-title {
    margin-top: var(--s-2); font-family: var(--f-display); font-size: var(--t-h4); font-weight: var(--w-semibold);
    line-height: var(--lh-snug); letter-spacing: var(--ls-snug); color: var(--c-ink);
  }
  .page-updates .featured-copy { margin-top: var(--s-2); color: var(--c-muted); }
  .page-updates .fix-log-cta {
    display: inline-block; margin-top: var(--s-3);
    font-size: var(--t-small); font-weight: var(--w-semibold); color: var(--c-purple); text-decoration: none;
  }
  .page-updates .fix-log-cta:hover { text-decoration: underline; }

  /* the smaller changes, and the items of a preview: a list split by hairlines, two columns where there is room */
  .page-updates :is(.update-grid, .sneak-peek-grid) { display: grid; grid-template-columns: minmax(0, 1fr); column-gap: var(--s-6); margin-top: var(--s-6); }
  .page-updates :is(.update-mini, .sneak-peek-item) { padding: var(--s-4) 0 var(--s-5); border-top: 1px solid var(--c-line); }
  .page-updates .mini-top { display: flex; }
  .page-updates :is(.mini-title, .sneak-peek-item strong) {
    display: block; font-family: var(--f-display); font-size: var(--t-body); font-weight: var(--w-semibold);
    line-height: var(--lh-snug); letter-spacing: var(--ls-snug); color: var(--c-ink);
  }
  .page-updates .mini-title { margin-top: var(--s-3); }
  .page-updates :is(.mini-copy, .sneak-peek-item span) {
    display: block; margin-top: var(--s-1); font-size: var(--t-small); line-height: var(--lh-body); color: var(--c-muted);
  }
  @media (min-width: 1000px) { .page-updates .update-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  @media (min-width: 640px) { .page-updates .sneak-peek-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

  /* the kind of a change: a quiet outlined chip whose dot carries the colour (new mint, improvement purple,
     quality lavender, fix coral, security navy), so the label stays legible at chip size */
  .page-updates .mini-badge {
    --kind: var(--c-purple);
    display: inline-flex; align-items: center; gap: var(--s-2); padding: 2px var(--s-2);
    border: 1px solid var(--c-line-2); border-radius: var(--r-pill);
    font-family: var(--f-mono); font-size: var(--t-micro); font-weight: var(--w-medium);
    line-height: var(--lh-snug); letter-spacing: var(--ls-hud); text-transform: uppercase; color: var(--c-ink-2);
  }
  .page-updates .mini-badge::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: var(--r-pill); background: var(--kind); }
  .page-updates .mini-badge.new { --kind: var(--c-mint); }
  .page-updates .mini-badge.improvement { --kind: var(--c-purple); }
  .page-updates .mini-badge.quality { --kind: var(--c-lav); }
  .page-updates .mini-badge.fix { --kind: var(--c-coral); }
  .page-updates .mini-badge.security { --kind: var(--c-navy); }

  @media (max-width: 760px) {
    .page-updates .timeline { --tl-rail: 16px; --tl-gap: var(--s-3); --tl-node-y: 0px; }
    .page-updates .timeline-item { --tl-top: var(--s-6); grid-template-columns: var(--tl-rail) minmax(0, 1fr); padding-bottom: var(--s-6); }
    .page-updates .timeline-item:first-child { --tl-top: var(--s-5); }
    .page-updates .timeline-item::before { left: calc(var(--tl-rail) / 2); }
    .page-updates .timeline-item:first-child::before { top: calc(var(--tl-top) + var(--s-2)); }
    .page-updates .timeline-date { grid-column: 2; position: static; display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-3); }
    .page-updates .timeline-node { grid-column: 1; align-self: center; }
    .page-updates .release-card { grid-column: 2; grid-row: 2; margin-top: var(--s-4); }
  }

  /* ---------- Updates: the sections after the timeline (the opt-in on the front page, the previews on the oldest) */
  .page-updates :is(.updates-optin, .sneak-peek-update) {
    max-width: var(--measure); margin-top: var(--section-y-formal); padding-top: var(--s-7); border-top: 1px solid var(--c-line-2);
  }
  .page-updates .updates-optin h2, .page-updates .sneak-peek-title { font-size: var(--t-item); line-height: var(--lh-tight); }
  .page-updates .sneak-peek-title { margin-top: var(--s-3); }
  .page-updates .updates-optin > p:first-of-type, .page-updates .sneak-peek-copy { margin-top: var(--s-4); color: var(--c-ink-2); }
  .page-updates .sneak-peek-note { margin-top: var(--s-5); font-size: var(--t-small); color: var(--c-muted); }

  /* the opt-in: name, email and the button on one row, labels above; the honeypot stays hidden */
  .page-updates .updates-optin-form {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; grid-template-rows: auto auto;
    column-gap: var(--s-3); row-gap: var(--s-2); margin-top: var(--s-5);
  }
  .page-updates .updates-optin-form .field { grid-row: span 2; grid-template-rows: subgrid; }
  .page-updates .updates-optin-form .field + .field { margin-top: 0; }
  .page-updates .updates-optin-form .btn-primary { grid-column: 3; grid-row: 2; }
  .page-updates .updates-optin-form .btn-primary[disabled] { opacity: .55; cursor: wait; }
  .page-updates .updates-hp { display: none; }
  .page-updates .updates-optin-note { margin-top: var(--s-3); font-size: var(--t-small); color: var(--c-muted); }
  .page-updates .updates-optin-status {
    min-height: calc(var(--t-small) * var(--lh-body)); margin-top: var(--s-2);
    font-size: var(--t-small); font-weight: var(--w-medium); line-height: var(--lh-body); color: var(--c-ink-2);
  }
  .page-updates .updates-optin-status.error { color: var(--c-danger); }
  @media (max-width: 640px) {
    .page-updates .updates-optin-form { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; row-gap: var(--s-4); }
    .page-updates .updates-optin-form .field { grid-row: auto; grid-template-rows: none; }
    .page-updates .updates-optin-form .btn-primary { grid-column: auto; grid-row: auto; width: 100%; }
  }

  /* ---------- Updates: the pager, two link rows between hairlines */
  .page-updates .updates-pager { display: grid; max-width: var(--measure); margin-top: var(--section-y-formal); border-bottom: 1px solid var(--c-line-2); }
  .page-updates .updates-pager a {
    display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s-1) var(--s-3);
    padding: var(--s-5) 0; border-top: 1px solid var(--c-line-2); color: var(--c-ink); text-decoration: none;
  }
  .page-updates .updates-pager span {
    font-family: var(--f-mono); font-size: var(--t-hud); font-weight: var(--w-medium);
    line-height: var(--lh-snug); letter-spacing: var(--ls-hud); text-transform: uppercase; color: var(--c-purple);
  }
  .page-updates .updates-pager b {
    font-family: var(--f-display); font-size: var(--t-h4); font-weight: var(--w-semibold);
    line-height: var(--lh-snug); letter-spacing: var(--ls-snug); transition: color var(--d-fast) ease;
  }
  .page-updates .updates-pager .updates-pager-arrow { font-family: var(--f-body); font-size: var(--t-h4); letter-spacing: normal; }
  .page-updates .updates-more .updates-pager-arrow { margin-left: auto; }
  .page-updates .updates-pager a:hover b { color: var(--c-purple-ink); }

  /* ---------- Fixes: a release block (label, title, count, version and date), its categories and their fixes */
  .page-fixes :is(.release-block, .category-card) { scroll-margin-top: calc(var(--nav-h) + var(--s-5)); }
  .page-fixes .release-block { max-width: var(--measure); margin-top: var(--s-6); }
  .page-fixes .release-block + .release-block { margin-top: var(--section-y-formal); padding-top: var(--s-7); border-top: 1px solid var(--c-line-2); }
  .page-fixes .release-block-heading { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--s-4) var(--s-6); }
  .page-fixes .release-block-heading h2 { margin-top: var(--s-2); font-size: var(--t-item); line-height: var(--lh-tight); }
  .page-fixes .count-copy { margin-top: var(--s-2); font-size: var(--t-small); color: var(--c-muted); }
  .page-fixes .release-meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3); }

  /* the category list: two columns of numbered links */
  .page-fixes .anchor-nav { margin-top: var(--s-6); }
  .page-fixes .anchor-nav ol { margin-top: var(--s-3); list-style: none; columns: 2; column-gap: var(--s-6); counter-reset: fixes-cat; }
  .page-fixes .anchor-nav li { break-inside: avoid; counter-increment: fixes-cat; border-top: 1px solid var(--c-line); }
  .page-fixes .anchor-nav a {
    display: flex; align-items: baseline; gap: var(--s-3); padding: var(--s-2) 0;
    font-size: var(--t-small); line-height: var(--lh-snug); color: var(--c-ink-2); text-decoration: none;
  }
  .page-fixes .anchor-nav a::before {
    content: counter(fixes-cat, decimal-leading-zero); flex: none;
    font-family: var(--f-mono); font-size: var(--t-xs); font-weight: var(--w-medium); color: var(--c-purple);
  }
  .page-fixes .anchor-nav a:hover { color: var(--c-purple-ink); text-decoration: underline; }
  @media (max-width: 560px) { .page-fixes .anchor-nav ol { columns: 1; } }

  .page-fixes .categories { margin-top: var(--s-7); }
  .page-fixes .category-card + .category-card { margin-top: var(--s-7); }
  .page-fixes .category-heading { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s-1) var(--s-3); padding-bottom: var(--s-3); }
  .page-fixes .category-number { font-family: var(--f-mono); font-size: var(--t-hud); font-weight: var(--w-medium); letter-spacing: var(--ls-hud); color: var(--c-purple); }
  .page-fixes .category-heading h3 { font-size: var(--t-h3); line-height: var(--lh-snug); }
  .page-fixes .category-count { margin-left: auto; font-size: var(--t-xs); color: var(--c-muted); }

  /* each fix is a row between hairlines, its version in mono in a narrow first column */
  .page-fixes .fix-list { list-style: none; border-bottom: 1px solid var(--c-line); }
  .page-fixes .fix-list li {
    display: grid; grid-template-columns: 10ch minmax(0, 1fr); align-items: baseline; column-gap: var(--s-4);
    padding: var(--s-3) 0; border-top: 1px solid var(--c-line);
    font-size: var(--t-small); line-height: var(--lh-body); color: var(--c-ink-2);
  }
  .page-fixes .fix-list strong { font-family: var(--f-mono); font-size: var(--t-xs); font-weight: var(--w-medium); color: var(--c-purple-ink); }
}

/* ---------------------------------------------------------------- pages: the legal pages and the Sidekick pages */
/* Legal pages and the Sidekick site, in the formal character. Work file: the lead merges it into site.css.

   Legal (Privacy, Terms, Cookies, GDPR, Extension privacy; body .page-legal plus .page-privacy and so on): one
   left-aligned reading column. A compact head (the h1 at the h2 step, the date or version line small and muted),
   the document in .prose, the contact details as an open block on a lavender rule, tables in the shared .table
   style scrolling sideways on phones, and the registered address as a closing line under the document. The site
   menu and footer replace the old back-link header and legal footer. A print style drops the menu and footer.

   Sidekick (sidekick.1p.dev, body .page-sidekick): the formal page with the product's own parts. Light download
   cards with the OS marks, the access ladder on tokens (purple, and coral ink for Full access), open signals and
   figures, numbered steps with mono numbers, the prompt chips in an open callout, and the shared FAQ.

   The Sidekick 404 (body .page-404) uses the same markup as the 1p.dev 404, so its layout is the .page-404 rules
   in company.css; only its brand line ("sidekick.1p.dev") is styled here. */

@layer pages {

  /* ============================================================================================== Legal */
  .page-legal .legal { padding-bottom: var(--section-y-formal); }

  /* the compact head: the title at the h2 step, then the date or version line, over a hairline */
  .page-legal .legal-head { max-width: var(--measure); padding-bottom: var(--s-6); border-bottom: 1px solid var(--c-line); }
  .page-legal .legal-head h1 { font-size: var(--t-h2); }
  .page-legal .legal-meta { margin-top: var(--s-3); font-size: var(--t-small); line-height: var(--lh-snug); color: var(--c-muted); }

  /* the document: .prose sets the measure, 17px at 1.7, numbered h2s at the h3 step and h3s at the h4 step */
  .page-legal .legal-body { margin-top: var(--s-7); }
  .page-legal .legal-body > :first-child { margin-top: 0; }
  .page-legal .legal-body h2, .page-legal .legal-body h3 { scroll-margin-top: calc(var(--nav-h) + var(--s-4)); }

  /* the contact details: an open block on a lavender rule, no box */
  .page-legal .contact-box { padding: var(--s-1) 0 var(--s-1) var(--s-5); border-left: 2px solid var(--c-lav); }
  .page-legal .contact-box p + p { margin-top: var(--s-1); }

  /* tables: the shared .table look; the first column names the thing, so it takes the ink */
  .page-legal .table td:first-child { color: var(--c-ink); }
  .page-cookies .table { min-width: 40rem; }

  /* the registered address, moved here from the old legal footer: a short closing line under the document */
  .page-legal .legal-address {
    max-width: var(--measure); margin-top: var(--s-8); padding-top: var(--s-4); border-top: 1px solid var(--c-line);
    font-size: var(--t-xs); line-height: var(--lh-body); color: var(--c-muted);
  }

  @media print {
    .page-legal .skip-link, .page-legal .nav, .page-legal .footer { display: none; }
    .page-legal .legal-head { padding-top: 0; }
    .page-legal .prose, .page-legal .prose a, .page-legal .legal-meta, .page-legal .legal-address { color: var(--c-ink); }
  }

  /* ============================================================================================== Sidekick */
  .page-sidekick main { padding-bottom: var(--section-y-formal); }

  /* ---------- the head: title, lede, the two actions and the meta line under them */
  .page-sidekick .sk-head { padding-bottom: var(--s-7); }
  .page-sidekick .hero-actions { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-6); }
  .page-sidekick .hero-meta { margin-top: var(--s-4); font-size: var(--t-small); line-height: var(--lh-snug); color: var(--c-muted); }

  /* ---------- the village at work (the engine's sidekick-village scene), in a panel the size the painting before it
     was: its shape (1600 by 1269), never taller than most of a screen, centred in the column. Framed as the homepage's
     village is, but as a plain panel: squircle corners, the panels' shadow, the page's own ground. The caption keeps
     the measure */
  .page-sidekick .sk-village { width: min(100%, calc(min(70vh, 620px) * 1600 / 1269)); aspect-ratio: 1600 / 1269; }
  /* the hero: the words on the left and the village at work on the right, straight on the page, with a small white
     card under it saying what it shows and that it can be played. On narrower screens the two stack */
  .page-sidekick .sk-hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); align-items: center; gap: var(--s-7); }
  .page-sidekick .sk-hero .page-head { padding-bottom: clamp(32px, 5vw, 64px); }
  .page-sidekick .sk-head .lede + .lede { margin-top: var(--s-3); }
  .page-sidekick .art-figure { display: flex; flex-direction: column; align-items: center; gap: var(--s-4); margin: 0; }
  .page-sidekick .art-figure figcaption { display: grid; gap: var(--s-2); max-width: 380px; padding: var(--s-4) var(--s-5); border-radius: var(--r-md); corner-shape: squircle; background: var(--c-surface); box-shadow: var(--sh-2); font-size: var(--t-small); line-height: var(--lh-snug); color: var(--c-ink-2); }
  .page-sidekick .art-figure figcaption .sk-hint { font-family: var(--f-sub); font-size: calc(var(--t-xs) * var(--sub-size)); letter-spacing: -.01em; color: var(--c-muted); }
  @media (max-width: 960px) {
    .page-sidekick .sk-hero { grid-template-columns: 1fr; gap: 0; }
    .page-sidekick .sk-hero .page-head { padding-bottom: var(--s-5); }
    .page-sidekick .art-figure figcaption { text-align: center; }
  }

  /* ---------- sections: open, at the formal spacing (as on Fold); text keeps the measure */
  /* (a little more room between its sections than the other formal pages: it is a long page of different things) */
  .page-sidekick .section { padding-top: calc(var(--section-y-formal) * 1.4); scroll-margin-top: calc(var(--nav-h) + var(--s-4)); }
  .page-sidekick .section > h2 { max-width: 24ch; }
  .page-sidekick .section > h2 + p, .page-sidekick .section > h2 + .lede { margin-top: var(--s-5); }
  .page-sidekick .section > p { max-width: var(--measure); }
  .page-sidekick .section > p:not(.lede) { color: var(--c-ink-2); }
  .page-sidekick .section > .lede { max-width: 56ch; }
  /* the notes under the access table, in two columns the text flows across (one on a narrow screen) */
  .page-sidekick .sk-access-notes { columns: 2 320px; column-gap: var(--s-7); margin-top: var(--s-6); color: var(--c-ink-2); }
  .page-sidekick .sk-access-notes p { margin: 0 0 var(--s-4); }
  .page-sidekick .section > p + p { margin-top: var(--s-4); }

  /* ---------- download groups: the platform and its line on the left, the cards on the right (stacked below 900px).
     A group can be linked to by name ("Windows and Mac"), so it clears the sticky menu */
  .page-sidekick .dl-group {
    display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-2) var(--s-7);
    padding-block: var(--s-6); border-top: 1px solid var(--c-line);
    scroll-margin-top: calc(var(--nav-h) + var(--s-4));
  }
  .page-sidekick .section > h2 + .dl-group { margin-top: var(--s-6); }
  .page-sidekick .dl-group > h3 { font-size: var(--t-h3); }
  .page-sidekick .dl-group > .sub { font-size: var(--t-small); line-height: var(--lh-snug); color: var(--c-muted); }
  .page-sidekick .dl-group > .dl-cards, .page-sidekick .dl-group > .platforms { margin-top: var(--s-3); }
  @media (min-width: 900px) {
    .page-sidekick .dl-group { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); grid-template-rows: auto 1fr; align-items: start; }
    .page-sidekick .dl-group > h3, .page-sidekick .dl-group > .sub { grid-column: 1; }
    .page-sidekick .dl-group > .dl-cards, .page-sidekick .dl-group > .platforms { grid-column: 2; grid-row: 1 / span 2; margin-top: 0; }
  }

  /* a light action card: the OS marks, the name, one line, a note, one button */
  .page-sidekick .dl-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: var(--s-4); }
  .page-sidekick .dl-card {
    display: flex; flex-direction: column; gap: var(--s-2); padding: var(--s-5);
    border: 1px solid var(--c-line); border-radius: var(--r-md); background: var(--c-surface);
  }
  .page-sidekick .dl-card .head { display: flex; align-items: center; gap: var(--s-3); margin-bottom: var(--s-1); }
  .page-sidekick .dl-card .mark { flex: none; width: 32px; height: 32px; color: var(--c-ink); }
  .page-sidekick .dl-card .mark svg { width: 100%; height: 100%; fill: currentColor; }
  .page-sidekick .dl-card h4 { font-size: var(--t-h4); }
  .page-sidekick .dl-card .arch { font-size: var(--t-xs); line-height: var(--lh-snug); color: var(--c-muted); }
  .page-sidekick .dl-card .note { margin-bottom: var(--s-3); font-size: var(--t-small); line-height: var(--lh-body); color: var(--c-ink-2); }
  .page-sidekick .dl-card > .btn-primary, .page-sidekick .dl-card > .btn-secondary { align-self: flex-start; margin-top: auto; }

  /* the macOS button until a signed build exists: it stays a link with aria-disabled and tabindex=-1, and looks off */
  .page-sidekick .btn-primary.is-disabled {
    background: var(--c-surface-2); color: var(--c-faint); border-color: var(--c-line);
    cursor: not-allowed; pointer-events: none;
  }

  /* a platform that is not built yet: a muted line with a mono chip */
  .page-sidekick .platforms { list-style: none; }
  .page-sidekick .platforms li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-3); color: var(--c-muted); }
  .page-sidekick .platforms small { margin-left: var(--s-1); color: var(--c-faint); }

  /* ---------- signals: two open columns of a heading and a sentence, each under a lavender rule */
  .page-sidekick .signals { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-6) var(--s-7); margin-top: var(--s-6); list-style: none; }
  .page-sidekick .signals li { padding-top: var(--s-4); border-top: 2px solid var(--c-lav); }
  .page-sidekick .signals h3 { font-size: var(--t-h4); }
  .page-sidekick .signals p { margin-top: var(--s-2); color: var(--c-muted); }

  /* ---------- the stat strip: four open figures, a large number over a short muted label */
  .page-sidekick .stat-strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-6) var(--s-5); margin-top: var(--s-7); list-style: none; }
  .page-sidekick .stat-strip li { padding-top: var(--s-4); border-top: 1px solid var(--c-line-2); }
  .page-sidekick .stat-n {
    display: block; font-family: var(--f-display); font-size: var(--t-h2); font-weight: var(--w-bold);
    line-height: var(--lh-heading); letter-spacing: var(--ls-heading); color: var(--c-ink);
  }
  .page-sidekick .stat-l { display: block; margin-top: var(--s-2); font-size: var(--t-small); line-height: var(--lh-snug); color: var(--c-muted); }

  /* ---------- the access ladder: a real table that scrolls sideways on a narrow screen, row names held in place.
     The meters fill level by level the first time it is in view (the page script adds .is-armed, then .is-in) */
  .page-sidekick .access-ladder { margin-top: var(--s-7); overflow-x: auto; }
  .page-sidekick .access-ladder table { width: 100%; min-width: 40rem; border-collapse: collapse; }
  .page-sidekick .access-ladder caption {
    caption-side: top; padding-bottom: var(--s-4); text-align: left;
    font-family: var(--f-mono); font-size: var(--t-hud); font-weight: var(--w-medium); line-height: var(--lh-snug);
    letter-spacing: var(--ls-hud); text-transform: uppercase; color: var(--c-faint);
  }
  .page-sidekick .access-ladder thead td, .page-sidekick .access-ladder thead th { border-bottom: 1px solid var(--c-line-2); }
  .page-sidekick .access-ladder thead td { width: 22%; }
  .page-sidekick .access-ladder thead th { width: 19.5%; padding: var(--s-4) var(--s-4) var(--s-5); vertical-align: top; text-align: left; font-weight: var(--w-regular); }
  .page-sidekick .lvl-meter { display: flex; gap: 3px; margin-bottom: var(--s-3); }
  .page-sidekick .lvl-meter i { flex: 1; height: 4px; border-radius: var(--r-pill); background: var(--c-line-2); transition: background-color var(--d-med) ease; }
  .page-sidekick .lvl-meter[data-n="1"] i:nth-child(-n+1),
  .page-sidekick .lvl-meter[data-n="2"] i:nth-child(-n+2),
  .page-sidekick .lvl-meter[data-n="3"] i { background: var(--c-purple); }
  .page-sidekick .access-ladder .lvl-full .lvl-meter i { background: var(--c-coral-ink); }
  .page-sidekick .lvl-name {
    display: block; font-family: var(--f-display); font-size: var(--t-h4); font-weight: var(--w-semibold);
    line-height: var(--lh-snug); letter-spacing: var(--ls-snug); color: var(--c-ink);
  }
  .page-sidekick .lvl-desc { display: block; margin-top: var(--s-1); font-size: var(--t-xs); line-height: var(--lh-snug); color: var(--c-muted); }
  .page-sidekick .access-ladder tr > :last-child { background: var(--c-surface-2); }
  .page-sidekick .access-ladder tbody th { padding: var(--s-3) var(--s-4) var(--s-3) 0; text-align: left; font-size: var(--t-small); font-weight: var(--w-medium); color: var(--c-ink-2); }
  .page-sidekick .access-ladder tbody td { padding: var(--s-3) var(--s-4); }
  .page-sidekick .access-ladder tbody tr + tr > * { border-top: 1px solid var(--c-line); }
  .page-sidekick .access-ladder tbody th, .page-sidekick .access-ladder thead td { position: sticky; left: 0; z-index: 1; background: var(--c-page); }

  .page-sidekick .access-ladder.is-armed:not(.is-in) .lvl-meter i { background: var(--c-line-2); }
  .page-sidekick .access-ladder thead th:nth-of-type(2) { --lvl-delay: var(--d-fast); }
  .page-sidekick .access-ladder thead th:nth-of-type(3) { --lvl-delay: calc(var(--d-fast) * 2); }
  .page-sidekick .access-ladder thead th:nth-of-type(4) { --lvl-delay: calc(var(--d-fast) * 3); }
  .page-sidekick .lvl-meter i:nth-child(1) { transition-delay: var(--lvl-delay, 0s); }
  .page-sidekick .lvl-meter i:nth-child(2) { transition-delay: calc(var(--lvl-delay, 0s) + var(--d-fast) / 2); }
  .page-sidekick .lvl-meter i:nth-child(3) { transition-delay: calc(var(--lvl-delay, 0s) + var(--d-fast)); }

  /* the marks: filled is always, a ring is "if you tick it", a dash is never; Full access takes the coral ink */
  .page-sidekick .cap { position: relative; display: inline-block; width: 12px; height: 12px; border-radius: var(--r-pill); vertical-align: middle; }
  .page-sidekick .cap-yes { background: var(--c-purple); }
  .page-sidekick .cap-opt { border: 1.5px solid var(--c-purple); }
  .page-sidekick .cap-no { height: 2px; background: var(--c-line-2); }
  .page-sidekick .access-ladder tbody td:last-child .cap-yes { background: var(--c-coral-ink); }
  .page-sidekick .ladder-key { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5); margin-top: var(--s-4); font-size: var(--t-xs); line-height: var(--lh-snug); color: var(--c-muted); }
  .page-sidekick .ladder-key .cap { margin-right: var(--s-2); }
  .page-sidekick .section > .ladder-key + p { margin-top: var(--s-6); }

  /* ---------- the steps: four short moves, each under a hairline with a mono number */
  .page-sidekick .sk-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-6); margin-top: var(--s-7); list-style: none; counter-reset: sk; }
  .page-sidekick .sk-steps li { counter-increment: sk; padding-top: var(--s-4); border-top: 1px solid var(--c-line-2); }
  .page-sidekick .sk-steps li::before {
    content: counter(sk, decimal-leading-zero); display: block; margin-bottom: var(--s-4);
    font-family: var(--f-mono); font-size: var(--t-hud); font-weight: var(--w-medium); line-height: var(--lh-tight);
    letter-spacing: var(--ls-hud); color: var(--c-purple);
  }
  .page-sidekick .sk-steps h3 { font-size: var(--t-h4); }
  .page-sidekick .sk-steps p { margin-top: var(--s-2); font-size: var(--t-small); line-height: var(--lh-body); color: var(--c-muted); }

  /* ---------- the callout, as on Fold: no box, a lavender rule on its left, the mono kicker (.callout-k.kicker);
     the prompts are copy chips: the quote in Hanken, a mono Copy, a mint Copied */
  .page-sidekick .callout { max-width: var(--measure); margin-top: var(--s-7); padding-left: var(--s-5); border-left: 2px solid var(--c-lav); }
  .page-sidekick .callout > * + * { margin-top: var(--s-4); }
  .page-sidekick .callout-k { display: block; }
  .page-sidekick .callout p { color: var(--c-ink-2); }
  .page-sidekick .prompt-list { display: grid; gap: var(--s-3); list-style: none; }
  .page-sidekick .prompt-box {
    display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s-4); width: 100%;
    padding: var(--s-4) var(--s-5); border: 1px solid var(--c-line-2); border-radius: var(--r-md); background: var(--c-surface);
    font-family: var(--f-body); font-size: var(--t-body); line-height: var(--lh-snug); color: var(--c-ink); text-align: left;
    transition: border-color var(--d-fast) ease;
  }
  .page-sidekick .prompt-box:hover { border-color: var(--c-purple); }
  .page-sidekick .pb-quote { flex: 1 1 auto; font-weight: var(--w-medium); }
  .page-sidekick .pb-act {
    flex: none; display: inline-flex; align-items: center; gap: var(--s-1); padding-top: 3px; white-space: nowrap;
    font-family: var(--f-mono); font-size: var(--t-hud); font-weight: var(--w-medium); line-height: var(--lh-tight);
    letter-spacing: var(--ls-hud); text-transform: uppercase; color: var(--c-purple);
    transition: color var(--d-fast) ease;
  }
  .page-sidekick .prompt-box.is-copied { border-color: var(--c-mint); }
  .page-sidekick .prompt-box.is-copied .pb-act { color: var(--c-mint-ink); }

  /* ---------- questions: the shared .faq, held to the left column like the rest of the page; a question can be
     linked to by name ("Read the Mac notes"), so it clears the sticky menu */
  /* the questions in a centred column, as on the homepage */
  .page-sidekick .faq { width: auto; max-width: 860px; margin-inline: auto; }
  .page-sidekick .faq > h2 { font-size: var(--t-h2); }
  /* and the last word, centred under them */
  .page-sidekick #cta { text-align: center; }
  .page-sidekick #cta > h2, .page-sidekick #cta > p { margin-inline: auto; }
  .page-sidekick #cta > p { max-width: 56ch; }
  .page-sidekick #cta .hero-actions { justify-content: center; }
  .page-sidekick .faq details { scroll-margin-top: calc(var(--nav-h) + var(--s-4)); }

  /* ---------- narrower screens */
  @media (max-width: 900px) {
    .page-sidekick .stat-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--s-6); }
    .page-sidekick .sk-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  }
  @media (max-width: 760px) {
    .page-sidekick .signals { grid-template-columns: minmax(0, 1fr); gap: var(--s-5); }
  }
  @media (max-width: 560px) {
    .page-sidekick .stat-strip { grid-template-columns: minmax(0, 1fr); }
    .page-sidekick .sk-steps { grid-template-columns: minmax(0, 1fr); gap: var(--s-5); }
    .page-sidekick .prompt-box { padding: var(--s-3) var(--s-4); }
    .page-sidekick .hero-actions .btn-primary, .page-sidekick .hero-actions .btn-secondary { flex: 1 1 100%; }
  }
  @media (prefers-reduced-motion: reduce) {
    .page-sidekick .lvl-meter i, .page-sidekick .prompt-box, .page-sidekick .pb-act { transition: none; }
  }

  /* ============================================================================================== Sidekick 404 */
  /* the layout is the 1p.dev 404's (.page-404 in company.css); this is only the "sidekick.1p.dev" brand line */
  .page-404 .brand {
    display: inline-flex; align-items: center; gap: var(--s-2); margin-bottom: var(--s-6);
    font-size: var(--t-small); font-weight: var(--w-semibold); letter-spacing: var(--ls-snug); color: var(--c-ink); text-decoration: none;
  }
  .page-404 .brand:hover { color: var(--c-purple-ink); }
  .page-404 .brand-mark { width: 26px; height: 26px; padding: 5px; border: 1px solid var(--c-lav); border-radius: var(--r-xs); }
  .page-404 .brand-mark path { fill: none; stroke: var(--c-purple); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
}

/* ------------------------------------------------------------------------------------------------ utilities */
@layer utilities {
  .centre { text-align: center; }
  .muted { color: var(--c-muted); }
  .mt-0 { margin-top: 0 !important; }
  .nowrap { white-space: nowrap; }
}

/* ------------------------------------------------------------------------------------------------ page to page */
/* Moving between pages, the docs at /docs/ included (one origin, so the browser can): the page cross-fades while
   the logo and the menu pill stay exactly where they are, so the header never seems to reload. The docs' header
   gives the same two names to its own logo and pill (docs-build/assets/p1-footer.css). Browsers without
   cross-document view transitions load pages as before. None for reduced motion, or with animations paused */
@view-transition { navigation: auto; }
/* (the page's scrollbar is the docs' thin, faint one, and its room is kept even on a page too short to scroll: the
   page is then the same width everywhere, so the menu, which hangs from the right, never shifts between pages.
   overflow-y: auto, as the docs have it) */
html { overflow-y: auto; scrollbar-width: thin; scrollbar-color: rgba(8, 9, 11, .28) transparent; scrollbar-gutter: stable; }
/* (and the docs' -webkit- rules for it too: Chrome measures a viewport unit without the page's scrollbar unless the
   bar is styled this way, so without them 1vw here was a little smaller than in the docs, and with it the menu) */
html::-webkit-scrollbar { width: 11px; height: 11px; background: transparent; }
html::-webkit-scrollbar-track { background: transparent; }
html::-webkit-scrollbar-thumb { background-color: rgba(8, 9, 11, .28); border-radius: 999px; border: 3px solid transparent; background-clip: content-box; }
.nav .logo { view-transition-name: p1-logo; }
.nav-menu { view-transition-name: p1-menu; }
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}
html.p1-paused::view-transition-group(*), html.p1-paused::view-transition-old(*), html.p1-paused::view-transition-new(*) { animation: none !important; }