/* tidy-one — Sage Minimal, light and dark
   mist #CAD2C5 · sage #84A98C · deep #52796F · pine #354F52 · slate #2F3E46
   Every colour is a custom property. The light theme is the default; the dark theme applies
   when the system asks for it (unless the reader picked light) or when the reader picks it with
   the header toggle (site.js stores the choice; an inline script in <head> applies it before
   the first paint). */

:root {
  /* palette */
  --mist: #CAD2C5;
  --sage: #84A98C;
  --deep: #52796F;
  --pine: #354F52;
  --slate: #2F3E46;

  /* surfaces and text (light) */
  --bg: #F8F9F7;           /* mist at ~14% on white */
  --bg-2: #EEF1EC;         /* chips, badge, hover */
  --bg-3: #E2E8DF;
  --ink: #2F3E46;          /* 10.9:1 on --bg */
  --ink-soft: #354F52;     /* 9.4:1 */
  --label: #52796F;        /* 4.6:1 on --bg; small text on --bg-2 uses --ink */
  --line: #CAD2C5;
  --line-strong: #BCC6B6;
  --icon-accent: #84A98C;
  --btn-1-bg: #2F3E46;
  --btn-1-fg: #FFFFFF;
  --btn-1-hover: #354F52;
  --btn-2-bg: #CAD2C5;
  --btn-2-fg: #2F3E46;
  --btn-2-hover: #BCC6B6;
  --focus: #2F3E46;
  --selection: #CAD2C5;
  --tt-moon: block;        /* the theme toggle shows where it goes */
  --tt-sun: none;

  /* privacy band: a dark surface in both themes */
  --band: #2F3E46;
  --band-ink: #F1F4EF;
  --band-soft: #CAD2C5;
  --band-line: rgba(202, 210, 197, .22);

  /* footer band and its aura */
  --fband: #2F3E46;
  --fband-ink: #CAD2C5;
  --aura-1: #CAD2C5;
  --aura-2: #84A98C;
  --aura-3: #52796F;
  --aura-1-o: .9;

  /* how-it-works pixel art */
  --art-line: #2F3E46;
  --art-fill: #CAD2C5;
  --art-a1: #84A98C;
  --art-a2: #52796F;
  --art-a3: #354F52;
  --wire: #84A98C;
  --packet: #52796F;

  /* mascot (light) */
  --m-line: #2F3E46;
  --m-body: #CAD2C5;
  --m-shade: #84A98C;
  --m-screen: #354F52;
  --m-eye: #CAD2C5;
  --m-glint: #FFFFFF;
  --m-smile: #84A98C;
  --m-cheek: #52796F;
  --m-card: #84A98C;
  --m-card2: #52796F;

  /* hero field (read by site.js, redrawn when the theme changes) */
  --px-0: #2F3E46;
  --px-1: #354F52;
  --px-2: #52796F;
  --px-3: #84A98C;
  --px-4: #CAD2C5;
  --px-empty: rgba(202, 210, 197, .32);
  --px-glow-alpha: 0;         /* no bloom on paper: it could only darken the gutters */

  /* footer game: piece tones (darkest to sage), slot outline, field dots */
  --g0: #2F3E46;
  --g1: #354F52;
  --g2: #52796F;
  --g3: #84A98C;
  --slot: #52796F;           /* 4.6:1 on --bg: the only cue for a target */
  --dots: rgba(132, 169, 140, .35);

  /* type */
  --font: "Inter Tight", "Helvetica Neue", Helvetica, Arial, system-ui, sans-serif;
  --lh-text: 1.62;
  --lh-head: 1.06;
  --lh-h1: 0.96;
  --track-head: -0.015em;
  --track-h1: -0.022em;
  --track-label: 0.14em;

  --gutter: clamp(16px, 4.2vw, 64px);
  --maxw: 1360px;
  --step: 3px;
  --px-clip: polygon(
    0 calc(var(--step) * 2), var(--step) calc(var(--step) * 2), var(--step) var(--step),
    calc(var(--step) * 2) var(--step), calc(var(--step) * 2) 0,
    calc(100% - var(--step) * 2) 0, calc(100% - var(--step) * 2) var(--step),
    calc(100% - var(--step)) var(--step), calc(100% - var(--step)) calc(var(--step) * 2),
    100% calc(var(--step) * 2), 100% calc(100% - var(--step) * 2),
    calc(100% - var(--step)) calc(100% - var(--step) * 2), calc(100% - var(--step)) calc(100% - var(--step)),
    calc(100% - var(--step) * 2) calc(100% - var(--step)), calc(100% - var(--step) * 2) 100%,
    calc(var(--step) * 2) 100%, calc(var(--step) * 2) calc(100% - var(--step)),
    var(--step) calc(100% - var(--step)), var(--step) calc(100% - var(--step) * 2),
    0 calc(100% - var(--step) * 2)
  );
  color-scheme: light;
}

/* ------------------------------------------------------------- dark theme
   The same declarations twice: once for the system preference, once for the toggle. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #1E2A2F;
    --bg-2: #243238;
    --bg-3: #2F3E46;
    --ink: #E6ECE8;          /* 12.6:1 on --bg */
    --ink-soft: #CAD2C5;     /* 9.5:1 */
    --label: #84A98C;        /* 5.6:1 on --bg, 5.1:1 on --bg-2 */
    --line: #34474E;
    --line-strong: #46595F;
    --icon-accent: #52796F;
    --btn-1-bg: #CAD2C5;
    --btn-1-fg: #1E2A2F;
    --btn-1-hover: #E6ECE8;
    --btn-2-bg: #2F3E46;
    --btn-2-fg: #E6ECE8;
    --btn-2-hover: #354F52;
    --focus: #CAD2C5;
    --selection: #52796F;
    --tt-moon: none;
    --tt-sun: block;
    --fband: #131B1F;
    --aura-1-o: .55;
    --art-line: #CAD2C5;
    --art-fill: #2F3E46;
    --art-a1: #84A98C;
    --art-a2: #52796F;
    --art-a3: #52796F;
    --wire: #52796F;
    --packet: #84A98C;
    --m-line: #84A98C;
    --m-body: #CAD2C5;
    --m-shade: #52796F;
    --m-screen: #1E2A2F;
    --m-card: #CAD2C5;
    --m-card2: #52796F;
    --px-0: #354F52;
    --px-1: #52796F;
    --px-2: #84A98C;
    --px-3: #A9BBA6;
    --px-4: #CAD2C5;
    --px-empty: rgba(202, 210, 197, .055);
    --px-glow-alpha: .34;     /* each pixel blooms in its own tone (site.js) */
    --g0: #E6ECE8;
    --g1: #CAD2C5;
    --g2: #A9BBA6;
    --g3: #84A98C;
    --slot: #84A98C;
    --dots: rgba(132, 169, 140, .22);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #1E2A2F;
  --bg-2: #243238;
  --bg-3: #2F3E46;
  --ink: #E6ECE8;
  --ink-soft: #CAD2C5;
  --label: #84A98C;
  --line: #34474E;
  --line-strong: #46595F;
  --icon-accent: #52796F;
  --btn-1-bg: #CAD2C5;
  --btn-1-fg: #1E2A2F;
  --btn-1-hover: #E6ECE8;
  --btn-2-bg: #2F3E46;
  --btn-2-fg: #E6ECE8;
  --btn-2-hover: #354F52;
  --focus: #CAD2C5;
  --selection: #52796F;
  --tt-moon: none;
  --tt-sun: block;
  --fband: #131B1F;
  --aura-1-o: .55;
  --art-line: #CAD2C5;
  --art-fill: #2F3E46;
  --art-a1: #84A98C;
  --art-a2: #52796F;
  --art-a3: #52796F;
  --wire: #52796F;
  --packet: #84A98C;
  --m-line: #84A98C;
  --m-body: #CAD2C5;
  --m-shade: #52796F;
  --m-screen: #1E2A2F;
  --m-card: #CAD2C5;
  --m-card2: #52796F;
  --px-0: #354F52;
  --px-1: #52796F;
  --px-2: #84A98C;
  --px-3: #A9BBA6;
  --px-4: #CAD2C5;
  --px-empty: rgba(202, 210, 197, .055);
  --px-glow-alpha: .34;
  --g0: #E6ECE8;
  --g1: #CAD2C5;
  --g2: #A9BBA6;
  --g3: #84A98C;
  --slot: #84A98C;
  --dots: rgba(132, 169, 140, .22);
  color-scheme: dark;
}

/* dark surfaces in both themes: the mascot and icons switch to their light-on-dark inks */
.section-dark, .footer-band {
  --m-line: #84A98C;
  --m-body: #CAD2C5;
  --m-shade: #52796F;
  --m-screen: #1E2A2F;
  --m-card: #CAD2C5;
  --m-card2: #52796F;
  --icon-accent: #52796F;
  --focus: #CAD2C5;
}

/* ------------------------------------------------------------- base */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 24px;
  background: var(--bg);
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: 1.0625rem;
  line-height: var(--lh-text);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  overflow-wrap: break-word;
}

/* Line-break hints from the copy (build.py phrase_html): a phrase moves to the next line as a
   whole, and wraps inside only when it alone is wider than the line; a sentence stays whole
   when it fits, otherwise it wraps inside and the next sentence starts a new line. */
.ph { display: inline-block; }
.sen { display: inline-block; }

h1, h2, h3 { margin: 0; font-family: var(--font); font-weight: 500; color: var(--ink); text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
ul, ol { margin: 0; padding: 0; list-style: none; }
a { color: inherit; }
img, canvas { display: block; max-width: 100%; }

::selection { background: var(--selection); color: var(--ink); }

:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
}
main:focus { outline: none; }

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.skip-link {
  position: absolute;
  left: 16px; top: 12px;
  z-index: 100;
  padding: 10px 16px;
  background: var(--btn-1-bg);
  color: var(--btn-1-fg);
  font-size: .875rem;
  text-decoration: none;
  transform: translateY(-160%);
  transition: transform .2s ease;
}
.skip-link:focus-visible { transform: none; }

/* ------------------------------------------------------------- pixel icons and the mascot
   16 x 16 icons and the 40 x 36 mascot are drawn at whole multiples of their grid only. */
.ic {
  display: block;
  flex: none;
  width: 16px;
  height: 16px;
  overflow: visible;
}
.mascot {
  --mpx: 4px;               /* screen pixels per art pixel: 2, 3, 4 or 6 */
  display: block;
  flex: none;
  width: calc(40 * var(--mpx));
  height: calc(32 * var(--mpx));
  overflow: visible;        /* the broom's bristles reach one pixel below the feet */
}
.head { display: block; flex: none; width: 32px; height: 32px; }

/* small uppercase labels: the sans, never a monospace */
.label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font);
  font-size: .75rem;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--label);
}

.num {
  font-family: var(--font);
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .12em;
  font-variant-numeric: tabular-nums;
  color: var(--label);
}

.arrow {
  display: inline-block;
  font-family: var(--font);
  margin-left: .45em;
  transition: transform .25s ease;
}

/* ------------------------------------------------------------- buttons (pixel-stepped corners) */
.btn {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 50px;
  padding: 0 22px;
  border: 0;
  background: none;
  font: 500 .9375rem/1.2 var(--font);
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
}
.btn::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--btn-bg);
  clip-path: var(--px-clip);
  transition: background-color .2s ease;
}
.btn .arrow { margin-left: -2px; }
.btn-primary { --btn-bg: var(--btn-1-bg); color: var(--btn-1-fg); --icon-accent: var(--sage); }
.btn-primary:hover { --btn-bg: var(--btn-1-hover); }
.btn-secondary { --btn-bg: var(--btn-2-bg); color: var(--btn-2-fg); }
.btn-secondary:hover { --btn-bg: var(--btn-2-hover); }
.btn:hover .arrow { transform: translate(2px, -2px); }
.btn-sm { min-height: 40px; padding: 0 14px; gap: 8px; font-size: .875rem; }

.icon-btn {
  position: relative;
  isolation: isolate;
  display: inline-grid;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--ink);
  cursor: pointer;
}
.icon-btn::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: transparent;
  clip-path: var(--px-clip);
  --step: 2px;
  transition: background-color .2s ease;
}
.icon-btn:hover::before { background: var(--bg-2); }

/* ------------------------------------------------------------- header */
.site-header { position: relative; z-index: 30; }
.header-row {
  display: flex;
  align-items: center;
  gap: 20px;
  min-height: 76px;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font: 600 1.1875rem/1 var(--font);
  letter-spacing: -0.025em;
  color: var(--ink);
  text-decoration: none;
  padding: 6px 0;
  margin-right: auto;
}

.primary-nav ul { display: flex; align-items: center; gap: 2px; }
.primary-nav a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 10px;
  font-size: .9375rem;
  color: var(--ink);
  text-decoration: none;
  background-image: linear-gradient(var(--ink), var(--ink));
  background-size: 0 1px;
  background-repeat: no-repeat;
  background-position: 34px calc(100% - 8px);
  transition: background-size .25s ease;
}
.primary-nav a .ic { color: var(--label); }
.primary-nav a:hover { background-size: calc(100% - 44px) 1px; }
.nav-gh .arrow { margin-left: -4px; }

.theme-toggle { display: none; }
.js .theme-toggle { display: inline-grid; }
.theme-toggle { margin-left: 4px; }
.tt-icon { display: block; }
.tt-moon { display: var(--tt-moon); }
.tt-sun { display: var(--tt-sun); }

.menu-btn {
  display: none;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 0 10px;
  border: 0;
  background: none;
  font: 500 .875rem/1 var(--font);
  color: var(--ink);
  cursor: pointer;
}
.menu-icon { display: grid; gap: 3px; }
.menu-icon i { display: block; width: 14px; height: 2px; background: var(--ink); transition: transform .2s ease, opacity .2s ease; }
.menu-icon i:nth-child(2) { width: 10px; }
.menu-btn[aria-expanded="true"] .menu-icon i:nth-child(1) { transform: translateY(5px) rotate(45deg); }
.menu-btn[aria-expanded="true"] .menu-icon i:nth-child(2) { opacity: 0; }
.menu-btn[aria-expanded="true"] .menu-icon i:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }

@media (min-width: 901px) {
  /* a hairline between the sections and the theme switch */
  .theme-toggle { position: relative; margin-left: 10px; }
  .theme-toggle::after {
    content: "";
    position: absolute;
    left: -11px;
    top: 8px;
    bottom: 8px;
    width: 1px;
    background: var(--line);
  }
}

@media (max-width: 900px) {
  /* brand | Menu | theme on the first row; the menu opens below as a full-width row. The row
     has padding rather than a min-height, so opening the menu never moves the first line, and
     site.js moves the theme toggle in front of the menu here, so focus follows what is drawn. */
  .header-row { gap: 6px; min-height: 0; padding-block: 10px; flex-wrap: wrap; }
  .js .menu-btn { display: inline-flex; }
  .site-menu { width: 100%; }
  .js .site-menu { display: none; }
  .js .site-menu.is-open { display: block; }
  .primary-nav ul {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 4px 0 16px;
    border-top: 1px solid var(--line);
  }
  .primary-nav li + li { border-top: 1px solid var(--line); }
  .primary-nav a {
    display: flex;
    gap: 12px;
    padding: 14px 2px;
    font-size: 1.0625rem;
    background: none;
  }
}
@media (max-width: 359px) {
  .menu-label {
    position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
  }
  .menu-btn { min-width: 40px; justify-content: center; }
}

/* ------------------------------------------------------------- hero */
.hero { --tidy: 0; }
.hero-grid {
  --hero-pt: clamp(24px, 3.4vw, 52px);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 28px;
  padding-top: var(--hero-pt);
}
/* the headline sizes itself to this column (container units), so it never wraps a line */
.hero-main { container-type: inline-size; }

.badge {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: clamp(20px, 3vw, 36px);
  padding: 7px 12px 7px 9px;
  font: 600 .75rem/1.2 var(--font);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink);
}
.badge::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--bg-2);
  clip-path: var(--px-clip);
  --step: 2px;
}

.hero-title {
  --h1-fit: 12.2;   /* 100 / (widest line in em) with a little room */
  --h1-max: 7rem;
  font-weight: 400;
  font-size: clamp(2.25rem, 0.4rem + 6vw, 6rem);
  line-height: var(--lh-h1);
  letter-spacing: var(--track-h1);
}
@supports (width: 1cqi) {
  .hero-title { font-size: min(calc(var(--h1-fit) * 1cqi), var(--h1-max)); }
}
.hero-title > span { display: block; }

.cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.statement {
  font: 500 1.0625rem/1.4 var(--font);
  letter-spacing: -0.005em;
  text-wrap: balance;
  color: var(--ink);
}
@media (min-width: 620px) { .statement { font-size: 1.1875rem; } }

/* The mascot stands on the field's hairline: its feet touch the line, and while the field
   tidies it sweeps (site.js swaps the poses and slides it a few art pixels). */
.hero-mascot {
  position: relative;
  z-index: 2;
  line-height: 0;
  --mpx: 3px;
}
.hero-mascot .mascot {
  --mpx: inherit;
  /* the art leaves seven empty columns right of the body: hang them past the edge, so the
     body lines up with the buttons above (the broom and the wave reach into the gutter) */
  margin-right: calc(-7 * var(--mpx));
  transform: translateX(var(--sweep, 0px));
  cursor: default;
}

/* phones and tablets: headline, then the calls to action, then the statement beside the
   mascot, which stands on the field's hairline */
.hero-aside {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "cta cta" "statement mascot";
  align-items: end;
  column-gap: 16px;
  row-gap: 22px;
}
.hero-aside .cta-row { grid-area: cta; }
.hero-aside .statement { grid-area: statement; padding-bottom: 18px; max-width: 22em; }
.hero-aside .hero-mascot { grid-area: mascot; }

@media (max-width: 480px) {
  .cta-row .btn { flex: 1 1 0; padding: 0 14px; }
}
@media (max-width: 400px) {
  .hero-grid { --hero-pt: 16px; gap: 22px; }
  .badge { margin-bottom: 16px; }
  .hero-mascot { --mpx: 2px; }
}

@media (min-width: 960px) {
  /* the padding lives in the columns, so the column rule runs from the header to the field */
  .hero-grid {
    grid-template-columns: minmax(0, 1fr) clamp(320px, 29vw, 420px);
    gap: 0;
    padding-top: 0;
  }
  .hero-main { padding: var(--hero-pt) clamp(32px, 4vw, 64px) clamp(40px, 4vw, 60px) 0; }
  /* the statement at the top (level with the badge), the calls to action below it, and the
     mascot at the foot, standing on the field's hairline. Until the two buttons fit side by
     side (1440px) they stack, and the mascot stands beside them instead of below, so the right
     column never ends up taller than the headline. */
  .hero-aside {
    --sweep-art: 3;            /* site.js: how far the mascot slides while it sweeps (art px) */
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: auto auto minmax(0, 1fr);
    grid-template-areas: "statement statement" "cta mascot" ". mascot";
    align-items: start;
    column-gap: 16px;
    row-gap: 0;
    padding: calc(var(--hero-pt) + 6px) 0 0 clamp(24px, 2.4vw, 36px);
    border-left: 1px solid var(--line);
  }
  .hero-aside .statement { padding: 0; max-width: none; }
  .hero-aside .cta-row { flex-direction: column; margin-top: 24px; }
  .hero-aside .cta-row .btn { justify-content: flex-start; padding: 0 16px; gap: 8px; }
  .hero-aside .hero-mascot { --mpx: 3px; align-self: end; justify-self: end; padding-top: 8px; }
}
@media (min-width: 1440px) {
  .hero-aside {
    --sweep-art: 10;
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "statement" "cta" "mascot";
  }
  /* natural widths sharing the slack: with a wider fallback font they still fit */
  .hero-aside .cta-row { flex-direction: row; }
  .hero-aside .cta-row .btn { flex: 1 1 auto; justify-content: center; padding: 0 18px; gap: 10px; }
  .hero-aside .hero-mascot { --mpx: 4px; }
}

.hero-field { --field-h: clamp(220px, 31vw, 480px); position: relative; border-top: 1px solid var(--line); }
.tidy-grid {
  position: relative;          /* above the glow */
  width: 100%;
  height: var(--field-h);
}
/* the bloom under the pixels: a canvas at a fifth of the size, scaled up by the browser */
.tidy-glow {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: var(--field-h);
  pointer-events: none;
}
.scroll-hint {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 6px;
  font-family: var(--font);
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--label);
  opacity: calc(1 - var(--tidy) * 1.25); /* gone once the field is tidy; back when it scatters */
}
.hint-arrow { display: block; width: 10px; height: 10px; }
/* every loop stops within 5 seconds (WCAG 2.2.2) */
.js .hint-arrow { animation: nudge 1.8s steps(2, end) 2; }
@keyframes nudge { 50% { transform: translateY(2px); } }

/* ------------------------------------------------------------- sections */
.section { padding-block: clamp(88px, 12vw, 184px); }
.section-tight-top { padding-top: clamp(24px, 4vw, 56px); }
.section-flush-top { padding-top: 0; }
.section-flush-bottom { padding-bottom: 0; }

.editorial {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 32px;
}
@media (min-width: 900px) {
  .editorial {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 64px;
    align-items: start;
  }
}

.ed-head h2 {
  font-size: clamp(1.75rem, 0.95rem + 2.3vw, 3rem);
  line-height: var(--lh-head);
  letter-spacing: var(--track-head);
  text-wrap: balance;
  max-width: 13em;
}
.ed-head .label { margin-top: 18px; }
.ed-head-wide h2 { max-width: 16em; }
.ed-head.has-mascot {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
}
.section-mascot { line-height: 0; }
.section-mascot .mascot { --mpx: 3px; }
.privacy-mascot .mascot { margin-left: calc(-7 * var(--mpx)); }
@media (max-width: 619px) {
  .section-mascot .mascot { --mpx: 2px; }
}

.prose p { max-width: 36em; }
.prose p + p { margin-top: 1.1em; color: var(--ink-soft); }
.ed-body { padding-top: 6px; }

/* problem: a few of the places memory ends up, scattered under the label */
.scattered {
  display: flex;
  align-items: flex-start;
  gap: 18px;
  margin-top: 32px;
  color: var(--ink-soft);
}
.scattered .ic { width: 32px; height: 32px; }
.scattered .ic:nth-child(2) { margin-top: 18px; }
.scattered .ic:nth-child(3) { margin-top: 6px; }
.scattered .ic:nth-child(4) { margin-top: 24px; }
.scattered .ic:nth-child(5) { margin-top: 2px; }
.scattered .ic:nth-child(6) { margin-top: 14px; }

/* ------------------------------------------------------------- features */
.feature-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  column-gap: clamp(24px, 3vw, 48px);
  margin-top: clamp(40px, 6vw, 80px);
  margin-bottom: -44px; /* cancels the last row's spacing; the next section sets the gap */
}
@media (min-width: 620px) { .feature-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1120px) { .feature-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.feature {
  display: flex;
  flex-direction: column;
  padding: 24px 0 44px;
  border-top: 1px solid var(--line);
}
@supports (grid-template-rows: subgrid) {
  .feature { display: grid; grid-row: span 3; grid-template-rows: subgrid; row-gap: 0; }
}
.feature-icon { padding-bottom: clamp(24px, 3vw, 40px); color: var(--ink); }
.feature-icon .ic { width: 48px; height: 48px; }
.feature h3 {
  --title-lh: calc(1.25rem * 1.3);
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 1.25rem;
  line-height: var(--title-lh);
  letter-spacing: -0.01em;
}
.num-badge {
  position: relative;
  isolation: isolate;
  flex: none;
  display: inline-grid;
  place-items: center;
  min-width: 24px;
  height: 22px;
  margin-top: calc((var(--title-lh, 22px) - 22px) / 2);
  padding: 0 5px;
  font: 600 .6875rem/1 var(--font);
  letter-spacing: .04em;
  font-variant-numeric: tabular-nums;
  color: var(--btn-1-fg);
}
.num-badge::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--btn-1-bg);
  clip-path: var(--px-clip);
  --step: 2px;
}
.feature-body { margin-top: 12px; }
.feature p { font-size: .9375rem; line-height: 1.65; color: var(--ink-soft); max-width: 30em; }

.chips {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  gap: 6px;
  margin-top: 16px;
}
.chip {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 28px;
  padding: 4px 9px 4px 6px;
  font-size: .8125rem;
  font-weight: 500;
  line-height: 1.2;
  color: var(--ink);
}
.chip::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--bg-2);
  clip-path: var(--px-clip);
  --step: 2px;
}
.chip .ic { color: var(--ink-soft); }

/* ------------------------------------------------------------- how it works */
.steps {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  margin-top: clamp(48px, 7vw, 96px);
}
.step {
  position: relative;
  display: grid;
  align-content: start;
  grid-template-columns: 84px minmax(0, 1fr);
  gap: 0 20px;
  padding-bottom: 40px;
}
.step:last-child { padding-bottom: 0; }
.step-art {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: flex-start;
}
.step-art .node { width: auto; height: 60px; }
.step-text h3 {
  margin-top: 8px;
  text-wrap: balance;
  font-size: 1.25rem;
  line-height: 1.3;
  letter-spacing: -0.015em;
}
.step-text p { margin-top: 10px; max-width: 26em; font-size: .9375rem; color: var(--ink-soft); }

/* dotted wire between nodes: vertical on small screens, horizontal on wide ones */
.wire {
  position: absolute;
  left: 41px;
  top: 72px;
  bottom: -36px;
  width: 3px;
  background: linear-gradient(var(--wire) 0 3px, transparent 3px 7px) 0 0 / 3px 7px repeat-y;
}
.packet {
  position: absolute;
  left: -1.5px;
  top: 0;
  width: 6px;
  height: 6px;
  background: var(--packet);
}
/* one trip down each wire, in order (device > server > agents), each time the steps come
   into view (site.js toggles .is-live), so the motion lasts 4.4s and then rests */
.js .packet { opacity: 0; }
.js .steps.is-live .packet { animation: packet-down 2.2s steps(14, end) both; }
.js .steps.is-live .step:nth-child(2) .packet { animation-delay: 2.2s; }
@keyframes packet-down {
  0% { top: 0; opacity: 0; }
  8% { opacity: 1; }
  92% { opacity: 1; }
  100% { top: calc(100% - 6px); opacity: 0; }
}

@media (min-width: 820px) {
  .steps { --col-gap: clamp(24px, 3vw, 48px); grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 var(--col-gap); }
  .step { grid-template-columns: minmax(0, 1fr); padding-bottom: 0; }
  .step-art { justify-content: flex-start; align-items: center; gap: 20px; height: 80px; margin-bottom: 28px; }
  .step-art .node { height: 80px; }
  .wire {
    position: relative;
    left: auto;
    top: auto;
    bottom: auto;
    flex: 1 1 auto;
    width: auto;
    height: 3px;
    margin-right: calc(20px - var(--col-gap));
    background: linear-gradient(90deg, var(--wire) 0 3px, transparent 3px 7px) 0 0 / 7px 3px repeat-x;
  }
  .packet { left: 0; top: -1.5px; }
  .js .steps.is-live .packet { animation-name: packet-right; animation-timing-function: steps(18, end); }
  @keyframes packet-right {
    0% { left: 0; opacity: 0; }
    8% { opacity: 1; }
    92% { opacity: 1; }
    100% { left: calc(100% - 6px); opacity: 0; }
  }
}

/* ------------------------------------------------------------- privacy (dark band) */
.section-dark {
  background: var(--band);
  color: var(--band-ink);
}
.section-dark h2, .section-dark h3 { color: #fff; }
.section-dark .label { color: var(--band-soft); }
.privacy-mascot { margin-top: 36px; }
.privacy-list { display: grid; }
.privacy-list li {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  gap: 20px;
  padding: 28px 0;
  border-top: 1px solid var(--band-line);
}
.privacy-list li:last-child { border-bottom: 1px solid var(--band-line); }
.privacy-icon { color: var(--band-soft); padding-top: 2px; }
.privacy-icon .ic { width: 32px; height: 32px; }
.privacy-list h3 { font-size: 1.1875rem; line-height: 1.35; letter-spacing: -0.01em; }
.privacy-list p { margin-top: 8px; font-size: .9375rem; color: var(--band-soft); max-width: 34em; }
.section-dark .ed-head h2 { max-width: 11em; }

/* ------------------------------------------------------------- works with */
.works { padding-bottom: clamp(64px, 8vw, 120px); }
.label-heading { font-weight: 600; }
.client-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));   /* 20 tiles: full rows at 4, 5 and 10 */
  gap: 4px;
  margin-top: 28px;
}
@media (min-width: 760px) { .client-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .client-grid { grid-template-columns: repeat(10, minmax(0, 1fr)); } }
.client a, .client-tile {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-rows: 32px auto;
  justify-items: center;
  align-content: start;
  gap: 12px;
  height: 100%;
  padding: 20px 6px 16px;
  color: var(--ink);
  text-align: center;
  text-decoration: none;
}
.client a::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: transparent;
  clip-path: var(--px-clip);
  transition: background-color .2s ease;
}
.client a:hover::before { background: var(--bg-2); }
.client-mark { display: grid; place-items: center; height: 32px; }
/* logos at 26px; a solid mark (lots of ink) sets --logo smaller in clients.json */
.logo { display: block; width: var(--logo, 26px); height: var(--logo, 26px); }
.client-name { font-size: .8125rem; font-weight: 500; line-height: 1.3; color: var(--ink-soft); }
.client a:hover .client-name { color: var(--ink); }
/* no logo file: the name is set as a wordmark, centred across the logo and caption rows,
   and not repeated below */
.client-text a { grid-template-rows: minmax(0, 1fr); align-content: stretch; }
.client-word {
  height: auto;
  align-self: center;
  font-size: .9375rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.2;
  color: var(--ink-soft);
}
.client-text a:hover .client-word { color: var(--ink); }
.client-text .client-name {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
/* the last tile: every other MCP client */
.client-more .client-mark { color: var(--label); }
.client-more .ic { width: 32px; height: 32px; }
.fineprint { margin-top: 8px; font-size: .8125rem; line-height: 1.6; color: var(--ink-soft); max-width: 52em; }

/* ------------------------------------------------------------- roadmap */
.roadmap {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 40px;
}
@media (min-width: 560px) { .roadmap { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; } }
.road-title {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
  font-family: var(--font);
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--label);
}
.road-title .ic { color: var(--ink); }
.road-list li {
  display: grid;
  grid-template-columns: 16px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  padding: 13px 0;
  border-bottom: 1px solid var(--line);
  font-size: 1rem;
  line-height: 1.5;
}
.road-topic { color: var(--ink-soft); }
.is-next .road-topic { color: var(--label); --icon-accent: var(--line-strong); }
.is-next li { color: var(--ink-soft); }
.road-note { margin-top: 24px; }

/* ------------------------------------------------------------- game (above the footer) */
.section-game { display: none; padding: 0 0 clamp(72px, 9vw, 128px); }
.js .section-game { display: block; }
.game { padding-top: clamp(40px, 5vw, 64px); border-top: 1px solid var(--line); }
.game:focus { outline: none; } /* holds focus for a moment after the last piece (site.js) */
.game-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.game-tools { display: flex; align-items: center; gap: 14px; }
.tool-btn {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  background: none;
  font: 500 .875rem/1 var(--font);
  color: var(--ink);
  cursor: pointer;
}
.tool-btn::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--bg-2);
  clip-path: var(--px-clip);
  --step: 2px;
  transition: background-color .2s ease;
}
.tool-btn:hover::before { background: var(--bg-3); }
.tool-label { display: none; }
@media (min-width: 640px) {
  .tool-btn { width: auto; padding: 0 14px 0 12px; }
  .tool-label { display: inline; }
}
.game-score {
  font-family: var(--font);
  font-size: 1.5rem;
  font-weight: 500;
  letter-spacing: .02em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.game-score .slash { margin: 0 .2em; color: var(--label); }

.game-stage {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-content: center;
  gap: 24px;
  margin-top: 16px;
}
/* finished: the empty field steps aside and the board settles in the middle
   (site.js keeps the stage height, so nothing below moves) */
.game.is-done .game-stage { grid-template-columns: minmax(0, 1fr); justify-items: center; }
.game.is-done .game-field { display: none; }
@media (min-width: 720px) {
  .game-stage { grid-template-columns: minmax(0, 1fr) auto; gap: 48px; align-items: center; }
}
.game-field {
  position: relative;
  height: 200px;
  background-image: radial-gradient(circle at 1px 1px, var(--dots) 1px, transparent 1.5px);
  background-size: 16px 16px;
}
.game-board { display: flex; align-items: flex-end; justify-content: center; gap: 20px; }
.game-host { line-height: 0; }
.game-host .mascot { --mpx: 3px; }
.game-goal { display: grid; justify-items: center; gap: 16px; }
.game-slots {
  display: grid;
  grid-template-columns: repeat(4, 34px);
  grid-auto-rows: 34px;
  gap: 4px;
}
.slot {
  position: relative;
  display: grid;
  place-items: center;
}
.slot::before {
  content: "";
  position: absolute;
  inset: 3px;
  border: 1px dashed var(--slot);
}

.gpx {
  position: absolute;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.gpx[data-t="0"] { --c: var(--g0); }
.gpx[data-t="1"] { --c: var(--g1); }
.gpx[data-t="2"] { --c: var(--g2); }
.gpx[data-t="3"] { --c: var(--g3); }
.gpx::before {
  content: "";
  position: absolute;
  inset: 3px;
  background: var(--c, var(--ink));
  transition: transform .18s ease;
}
.gpx[data-t="3"]::before { box-shadow: inset 0 0 0 1px var(--slot); } /* sage alone is 2.5:1 on paper */
.gpx:hover::before { transform: scale(1.12); }
.gpx:focus-visible { outline-offset: 0; }
.gpx.is-placed { position: relative; cursor: default; pointer-events: none; } /* a piece on its way never blocks a tap */
.gpx.is-placed::before { transform: none; }
.game.is-done .gpx.is-placed::before { animation: wave .6s steps(3, end) both; animation-delay: calc(var(--i) * 45ms); }
@keyframes wave {
  50% { transform: translateY(-4px); }
}
.game-done { display: grid; justify-items: center; gap: 10px; text-align: center; }
.game-done[hidden] { display: none; }
.game-done p { font-size: .9375rem; color: var(--ink); }
@media (max-width: 400px) {
  .game-host .mascot { --mpx: 2px; }
  .game-board { gap: 12px; }
}

/* ------------------------------------------------------------- footer */
.site-footer { padding-top: clamp(56px, 7vw, 96px); border-top: 1px solid var(--line); }
.footer-top {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
  gap: 32px 48px;
}
.footer-brand { display: grid; justify-items: start; gap: 10px; }
.footer-brand .brand { margin: 0 0 4px; }
.brand-text { padding: 0; }
.footer-tagline { max-width: 22em; font-size: .9375rem; color: var(--ink-soft); }
.footer-made { font-size: .875rem; color: var(--ink-soft); }
.footer-links { display: grid; justify-items: end; gap: 2px; }
.footer-links a {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 6px 0;
  font-size: .9375rem;
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--line);
  text-underline-offset: 4px;
  text-decoration-thickness: 1px;
  transition: text-decoration-color .2s ease;
}
.footer-links a .ic { color: var(--label); }
.footer-links a:hover { text-decoration-color: var(--ink); }
@media (max-width: 619px) {
  .footer-top { flex-direction: column; }
  .footer-links { justify-items: start; }
}

/* the band: a soft sage aura on a wavy edge, then the large wordmark next to the mascot */
.footer-band { position: relative; margin-top: clamp(24px, 4vw, 56px); color: var(--fband-ink); }
.band-edge {
  display: block;
  width: 100%;
  height: clamp(120px, 17vw, 250px);
}
.band-edge .aura-1 { fill: var(--aura-1); opacity: var(--aura-1-o); }
.band-edge .aura-2 { fill: var(--aura-2); opacity: .9; }
.band-edge .aura-3 { fill: var(--aura-3); }
.band-edge .band-fill { fill: var(--fband); }
.band-body { margin-top: -2px; background: var(--fband); overflow: hidden; } /* the word's box reaches past its descender */
.band-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 30px;                   /* room for the descender of the 'y' above the hairline */
  padding-top: 4px;
  padding-bottom: clamp(28px, 4vw, 48px);
}
/* the mascot's feet stand on the word's baseline (an svg's baseline is its bottom edge) */
.band-mark {
  --gap: clamp(12px, 2vw, 28px);
  display: flex;
  align-items: baseline;
  gap: var(--gap);
  min-width: 0;
  container-type: inline-size;
}
.band-mark { --mpx: 2px; }
.band-mark .mascot { --mpx: inherit; margin-inline: calc(-7 * var(--mpx)); } /* body on the text edge */
.band-word {
  display: block;
  font-family: var(--font);
  font-weight: 600;
  font-size: clamp(3.5rem, 1rem + 11.5vw, 12.5rem);
  /* as large as the column allows next to the mascot ("tidy-one" is about 3.5em wide) */
  font-size: min(12.5rem, calc((100cqi - 26 * var(--mpx) - var(--gap)) / 3.6));
  line-height: .78;
  letter-spacing: -0.045em;
  /* the gradient is clipped to the text inside this box, so the box reaches below the 'y';
     the negative margin takes that room back out of the layout */
  padding: .06em .04em .3em 0;
  margin-bottom: -.3em;
  white-space: nowrap;
  color: var(--mist);
  background: linear-gradient(180deg, #F7F9F6 0%, #DCE3D8 26%, #A9BBA6 58%, #6E957D 82%, #52796F 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.band-legal {
  padding-top: 14px;
  border-top: 1px solid rgba(202, 210, 197, .3);
  font-size: .875rem;
  color: var(--fband-ink);
}
@media (min-width: 620px) {
  .band-mark { --mpx: 3px; }
}
@media (min-width: 900px) {
  .band-row { grid-template-columns: minmax(0, 1fr) minmax(240px, 34%); align-items: end; gap: 48px; }
  .band-mark { --mpx: 4px; }
  .band-legal { margin-bottom: .6em; }
}

/* ------------------------------------------------------------- forced colours */
@media (forced-colors: active) {
  .gpx::before { forced-color-adjust: none; background: ButtonText; box-shadow: none; }
  .gpx[data-t="3"]::before { box-shadow: none; }
  .slot::before { border-color: ButtonText; }
  .btn, .tool-btn { border: 1px solid ButtonText; }
  .tidy-glow { display: none; }
}

/* ------------------------------------------------------------- motion */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .js .packet, .js .steps.is-live .packet { animation: none; display: none; }
  .js .hint-arrow { animation: none; }
  .hero-mascot .mascot { transform: none; }
  /* the field is drawn already tidy, so there is nothing to scroll for */
  .scroll-hint { visibility: hidden; }
}