/* Makings · discovery page (/for-agents/discovery/) · one stylesheet for every width.

   Drawn widths: 390 and 1440 (T-Discovery). Everything in between is fluid.
   Bands (mobile first):
     base        < 600px   the 390 board: compact header (64px), one column, stacked field rows
     600–999px             compact header (72px, full lockup), one column, two-column field rows
     >= 1000px             desktop nav in a two-row header card, file preview beside the intro
     >= 1320px             desktop nav in one row: the 1440 board
   Page inset: 16px at 320, 24px at 390, 48px from 768 to 1024, 68px at 1440, then a centred
   1304px column with full-bleed bands (see --inset).
   The header card follows the landing's header box at every width below 1320: on the inset, except 4px short
   on the right below 375px (T-Landing-320) and 24px from the page edges from 1000 to 1319px (T-Landing-1024).
   No global box-sizing reset: border-box is set only where the boards set it. */

/* ---------- fonts (self-hosted; the builder supplies the files) ---------- */
@font-face {
  font-family: 'Bricolage Grotesque';
  src: url('/assets/fonts/bricolage-grotesque.woff2') format('woff2');
  font-weight: 200 800;
  font-stretch: 75% 100%;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Figtree';
  src: url('/assets/fonts/figtree.woff2') format('woff2');
  font-weight: 300 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Spline Sans Mono';
  src: url('/assets/fonts/spline-sans-mono.woff2') format('woff2');
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}

/* ---------- tokens (names follow design/handoff/tokens/tokens.css) ---------- */
:root {
  --mk-brand-ultramarine: #4436D9;
  --mk-brand-primary-deep: #2B1FA6;
  --mk-brand-cream: #FFF4C7;
  --mk-brand-ink: #202753;
  --mk-surface-canvas: #FFF8E8;
  --mk-surface-facts-panel: #FFFDF6;
  --mk-text-muted: #525777;
  --mk-line-essential: #525777;
  --mk-line-decorative-only: #C7C6BB;
  --mk-font-display: 'Bricolage Grotesque', 'Arial Black', system-ui, sans-serif;
  --mk-font-text: 'Figtree', system-ui, sans-serif;
  --mk-font-mono: 'Spline Sans Mono', ui-monospace, Menlo, monospace;
  --mk-dur-hover: 160ms;
  --mk-dur-overlay: 200ms;
  --mk-ease: cubic-bezier(0.2, 0, 0, 1);

  /* Page inset, applied as padding-inline on the full-width header band, <main> and footer
     (so 100% is the page width): 16px at 320, 24px at 390, 48px from 768 to 1024, 68px at 1440,
     and above 1440 whatever centres a 1304px column. Linear in between. */
  --inset: max(
    16px,
    min(16px + (100% - 320px) * 8 / 70, 24px + (100% - 390px) * 24 / 378, 48px),
    48px + (100% - 1024px) * 20 / 416,
    (100% - 1304px) / 2
  );
}

/* ---------- base ---------- */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
body {
  margin: 0;
  background: var(--mk-surface-canvas);
  color: var(--mk-brand-ink);
  font-family: var(--mk-font-text);
}
a {
  color: var(--mk-brand-ultramarine);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
}
a:hover {
  color: var(--mk-brand-ink);
}
:focus-visible {
  outline: 3px solid var(--mk-brand-ultramarine);
  outline-offset: 3px;
}
.mono {
  font-family: var(--mk-font-mono);
  font-variant-ligatures: none;
  font-feature-settings: "liga" 0, "calt" 0;
}
.tape {
  background-color: var(--mk-brand-cream);
  background-image: repeating-linear-gradient(135deg, rgba(32, 39, 83, .10) 0 2px, transparent 2px 7px);
}
/* Visually hidden but read by screen readers (the section h2s). clip-path hides it while overflow stays
   visible, so it is never "clipped text"; body-size text keeps its invisible one-line run well inside a
   320px page even under WCAG text-spacing overrides. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: visible;
  white-space: nowrap;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  font-size: 16px;
  font-weight: 400;
}

/* Skip link: the first focusable element; visible only on focus (CMP-01). */
.skip-link {
  position: absolute;
  z-index: 30;
  top: 6px;
  left: var(--inset);
  box-sizing: border-box;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: visible;
  white-space: nowrap;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  font-family: var(--mk-font-text);
  font-weight: 700;
  font-size: 16px;
  line-height: 1.2;
  color: var(--mk-brand-ink);
  text-decoration: none;
}
.skip-link:focus {
  width: auto;
  height: auto;
  margin: 0;
  clip: auto;
  clip-path: none;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 18px;
  background: var(--mk-brand-cream);
  border: 2px solid var(--mk-brand-ink);
  border-radius: 12px;
  box-shadow: 4px 4px 0 var(--mk-brand-ink);
}
.skip-link:hover {
  color: var(--mk-brand-ink);
}

/* ---------- shared bits: primary button, RESEARCH pill, "coming" tag ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 52px;
  padding: 0 24px;
  box-sizing: border-box;
  border: 2px solid var(--mk-brand-ink);
  border-radius: 14px;
  font-family: var(--mk-font-text);
  font-weight: 700;
  font-size: 17px;
  line-height: 1.2;
  text-decoration: none;
  transition: transform var(--mk-dur-hover) var(--mk-ease), box-shadow var(--mk-dur-hover) var(--mk-ease);
}
.btn--primary,
.btn--primary:hover {
  background: var(--mk-brand-ultramarine);
  color: var(--mk-brand-cream);
  box-shadow: 4px 4px 0 var(--mk-brand-ink);
}
.btn--primary:hover {
  transform: translate(-2px, -2px);
  box-shadow: 6px 6px 0 var(--mk-brand-ink);
}
.btn--primary:active {
  transform: translate(2px, 2px);
  box-shadow: 2px 2px 0 var(--mk-brand-ink);
}

.pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 24px;
  padding: 0 10px 0 8px;
  border-radius: 999px;
  background: var(--mk-brand-ink);
  color: var(--mk-brand-cream);
  font-family: var(--mk-font-text);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.08em;
  line-height: 1;
}
.pill__icon {
  display: block;
  flex: 0 0 auto;
}

.tag-coming {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 0 7px;
  box-sizing: border-box;
  border: 1.5px dashed currentColor;
  border-radius: 6px;
  font-family: var(--mk-font-text);
  font-weight: 600;
  font-size: 12px;
  line-height: 1;
  letter-spacing: 0.02em;
}

/* ---------- site header ---------- */
/* The blue band is full-bleed; the cream card inside it holds the lockup and the navigation.
   Below 1000px the card is a grid: [lockup | Menu] on the first row, the open menu (#site-menu)
   on the second row, spanning the card (the nav is a subgrid so the menu can sit under the lockup). */
.site-header {
  padding: 12px var(--inset) 18px;
  background: var(--mk-brand-ultramarine);
  border-bottom: 2px solid var(--mk-brand-ink);
}
.site-header__bar {
  box-sizing: border-box;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: minmax(60px, auto) auto;
  column-gap: 12px;
  padding: 0 11px 0 12px;
  background: var(--mk-surface-canvas);
  border: 2px solid var(--mk-brand-ink);
  border-radius: 18px;
  box-shadow: 4px 4px 0 var(--mk-brand-primary-deep);
}
.site-header__home {
  position: relative;
  z-index: 1;
  grid-area: 1 / 1;
  align-self: center;
  justify-self: start;
  display: flex;
  align-items: center;
  min-height: 44px;
}
.site-header__logo {
  display: block;
  flex: 0 0 auto;
  width: 135.75px;
  height: 31.5px;
}
.site-nav {
  grid-area: 1 / 1 / 3 / 3;
  display: grid;
  grid-template-columns: subgrid;
  grid-template-rows: subgrid;
}
.site-nav__list {
  display: none;
}
/* Desktop section links (shown from 1000px). */
.site-nav__link,
.site-nav__soon {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  font-family: var(--mk-font-text);
  font-weight: 600;
  font-size: 16px;
  line-height: 1.2;
  color: var(--mk-brand-ink);
  text-decoration: none;
}
.site-nav__soon {
  color: var(--mk-text-muted);
}
.site-nav__link:hover {
  color: var(--mk-brand-ultramarine);
}
.site-nav__link[aria-current] {
  text-decoration-line: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 7px;
}
.site-header__cta {
  display: none;
}

/* Menu button (compact widths). site.js toggles aria-expanded here and `hidden` on #site-menu. */
.menu-toggle {
  grid-area: 1 / 2;
  align-self: center;
  justify-self: end;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  min-width: 44px;
  margin: 0;
  padding: 0 14px 0 12px;
  box-sizing: border-box;
  border: 2px solid var(--mk-brand-ink);
  border-radius: 12px;
  background: var(--mk-brand-cream);
  color: var(--mk-brand-ink);
  font-family: var(--mk-font-text);
  font-weight: 700;
  font-size: 16px;
  line-height: 1;
  box-shadow: 3px 3px 0 var(--mk-brand-ink);
  cursor: pointer;
  transition: background-color var(--mk-dur-overlay) var(--mk-ease), color var(--mk-dur-overlay) var(--mk-ease), box-shadow var(--mk-dur-overlay) var(--mk-ease), transform var(--mk-dur-overlay) var(--mk-ease);
}
.menu-toggle__icon {
  display: block;
  flex: 0 0 auto;
}
.menu-toggle__icon--close {
  display: none;
}
.menu-toggle[aria-expanded="true"] {
  background: var(--mk-brand-ink);
  color: var(--mk-brand-cream);
  box-shadow: none;
  transform: translate(2px, 2px);
}
.menu-toggle[aria-expanded="true"] .menu-toggle__icon--open {
  display: none;
}
.menu-toggle[aria-expanded="true"] .menu-toggle__icon--close {
  display: block;
}

/* The one compact menu: closed = [hidden] (display:none); open = a panel under the header row,
   inside the card, as drawn on CMP-01 (public, compact, open). Targets are 50px; the last item
   is the "Get your agent ready" button. */
.site-menu {
  display: none;
}
.site-menu:not([hidden]) {
  grid-area: 2 / 1 / 3 / 3;
  display: flex;
  flex-direction: column;
  margin: 2px 0 0;
  padding: 6px 0 16px;
  list-style: none;
  border-top: 1.5px solid var(--mk-line-essential);
  animation: site-menu-in var(--mk-dur-overlay) var(--mk-ease);
}
.site-menu > li {
  border-bottom: 1.5px solid var(--mk-line-decorative-only);
}
.site-menu > .site-menu__action {
  border-bottom: 0;
  padding-top: 16px;
}
.site-menu__link,
.site-menu__soon {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 50px;
  padding: 0 6px;
  font-family: var(--mk-font-text);
  font-weight: 600;
  font-size: 17px;
  line-height: 1.2;
  color: var(--mk-brand-ink);
  text-decoration: none;
}
.site-menu__soon {
  color: var(--mk-text-muted);
}
.site-menu__link:hover {
  color: var(--mk-brand-ultramarine);
}
.site-menu__link[aria-current] {
  padding-left: 14px;
  box-shadow: inset 4px 0 0 var(--mk-brand-ultramarine);
  text-decoration-line: underline;
  text-decoration-color: var(--mk-brand-ultramarine);
  text-decoration-thickness: 3px;
  text-underline-offset: 9px;
}
.site-menu__cta {
  display: flex;
}
@keyframes site-menu-in {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* Below 375px the card stops 4px short of the inset on the right, so card plus shadow span the content
   width, as the landing's 320 board draws it (card 284px wide at 320). */
@media (max-width: 374.98px) {
  .site-header {
    padding-right: calc(var(--inset) + 4px);
  }
}

@media (min-width: 600px) {
  .site-header {
    padding-top: 20px;
    padding-bottom: 26px;
  }
  .site-header__bar {
    grid-template-rows: minmax(68px, auto) auto;
    column-gap: 16px;
    padding: 0 14px 0 20px;
    border-radius: 20px;
    box-shadow: 5px 5px 0 var(--mk-brand-primary-deep);
  }
  .site-header__logo {
    width: 181px;
    height: 42px;
  }
}

/* Desktop navigation from 1000px: first as two rows (lockup + button, then the links),
   the pattern drawn on the landing at 1024. */
@media (min-width: 1000px) {
  .site-header__bar {
    grid-template-rows: minmax(68px, auto) minmax(48px, auto);
    column-gap: 0;
    padding: 0;
  }
  .site-header__home {
    margin-left: 22px;
  }
  .site-nav {
    grid-area: 2 / 1 / 3 / 3;
    display: flex;
    align-items: center;
    box-sizing: border-box;
    padding: 0 22px;
    border-top: 1.5px solid var(--mk-line-essential);
  }
  .site-nav__list {
    display: flex;
    align-items: center;
    gap: 30px;
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .menu-toggle,
  .site-menu,
  .site-menu:not([hidden]) {
    display: none;
  }
  .site-header__cta {
    display: inline-flex;
    grid-area: 1 / 2;
    align-self: center;
    margin-right: 22px;
  }
}

/* 1000–1319: the two-row card also keeps the landing's 1024 geometry, 24px from the page edges (T-Landing-1024),
   so the header doesn't move when a visitor goes between the landing and this page. From 1320px both pages
   put the card on the page inset. */
@media (min-width: 1000px) and (max-width: 1319.98px) {
  .site-header {
    padding-left: 24px;
    padding-right: 24px;
  }
}

/* One row from 1320px: the 1440 board. */
@media (min-width: 1320px) {
  .site-header__bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    min-height: 72px;
    padding: 0 12px 0 22px;
  }
  .site-header__home {
    margin-left: 0;
  }
  .site-nav {
    display: block;
    padding: 0;
    border-top: 0;
  }
  .site-header__cta {
    margin-right: 0;
  }
}

/* ---------- main ---------- */
.page {
  --page-top: 24px;
  padding: var(--page-top) var(--inset) 64px;
}
/* #file is the intro plus the preview, as on the boards. An inbound …/discovery/#file stops with the header
   just out of view and the breadcrumb at its usual distance from the top. */
.intro {
  scroll-margin-top: var(--page-top);
}

.crumbs__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 10px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-family: var(--mk-font-text);
  font-size: 15px;
  line-height: 1.3;
}
.crumbs__link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-weight: 600;
}
.crumbs__sep {
  color: var(--mk-text-muted);
}
.crumbs__here {
  font-weight: 600;
  color: var(--mk-brand-ink);
}

.page-title {
  margin: 8px 0 0;
  font-family: var(--mk-font-display);
  font-variation-settings: 'opsz' 96, 'wdth' 88;
  font-weight: 800;
  letter-spacing: -0.035em;
  font-size: 44px;
  line-height: 1;
  color: var(--mk-brand-ink);
}

/* The two status lines, each with a 2ch hanging indent. */
.facts {
  margin: 22px 0 0;
  box-sizing: border-box;
  padding: 12px 14px;
  background: var(--mk-surface-facts-panel);
  border: 1.5px solid var(--mk-line-essential);
  border-radius: 16px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.7;
  color: var(--mk-brand-ink);
  overflow-wrap: anywhere;
}
.facts__line {
  display: block;
  padding-left: 2ch;
  text-indent: -2ch;
}

.lead {
  margin: 22px 0 0;
  font-family: var(--mk-font-text);
  font-size: 17px;
  line-height: 1.55;
  color: var(--mk-brand-ink);
}

/* ---------- the discovery-file preview (the second half of #file) ---------- */
.file {
  margin-top: 52px;
}
.file__figure {
  position: relative;
  margin: 0;
}
/* The EXAMPLE tape sits on the card's top edge. Two lines below 600px (break after "shape,"). */
.file__tape {
  position: absolute;
  top: -21px;
  left: 12px;
  z-index: 1;
  display: block;
  width: max-content;
  box-sizing: border-box;
  padding: 3px 10px;
  border: 2px dashed var(--mk-brand-ink);
  border-radius: 0;
  color: var(--mk-brand-ink);
  font-size: 12px;
  font-weight: 600;
  line-height: 18px;
}
.tape__word {
  letter-spacing: 0.12em;
}
/* The preview is real JSON text (its textContent is the file, so it copies and reads as JSON). Lines are
   grouped in block spans (.j-lines) so every group starts with an unindented line; long lines wrap with a
   4ch hanging indent; the availability group (.j-mark) carries the marker band. */
.file__code {
  --code-pad: 16px;
  margin: 0;
  box-sizing: border-box;
  padding: 40px var(--code-pad) 22px;
  background: var(--mk-surface-facts-panel);
  border: 1.5px solid var(--mk-line-essential);
  border-radius: 16px;
  font-size: 14px;
  line-height: 24px;
  color: var(--mk-brand-ink);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.file__code code {
  display: block;
  font: inherit;
  text-indent: 4ch hanging each-line;
}
.j-punct,
.j-key {
  color: var(--mk-text-muted);
}
/* Short values never break inside; on a narrow phone the whole value moves to the next line instead.
   URLs break only at their path segments (plain <wbr> in the markup). .j-wbr is kept for older markup. */
.j-val {
  font-weight: 600;
  white-space: nowrap;
}
.j-url {
  white-space: pre-wrap;
}
.j-wbr {
  display: none;
}
@media (max-width: 389.98px) {
  .j-wbr {
    display: inline;
  }
}
.j-lines {
  display: block;
}
.j-mark {
  margin: 0 calc(-1 * var(--code-pad));
  padding: 0 var(--code-pad);
  background: var(--mk-brand-cream);
  box-shadow: inset 4px 0 0 var(--mk-brand-ink);
}

/* ---------- #fields ---------- */
/* An inbound …/discovery/#fields stops 32px above the card. */
.fields {
  margin-top: 48px;
  scroll-margin-top: 32px;
}
.fields__card {
  box-sizing: border-box;
  background: var(--mk-surface-facts-panel);
  border: 1.5px solid var(--mk-line-essential);
  border-radius: 16px;
}
.fields__head {
  display: none;
}
.fields__list {
  margin: 0;
}
.fields__row {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px 18px 15px;
  border-bottom: 1.5px solid var(--mk-line-essential);
}
.fields__row:last-child {
  border-bottom: 0;
}
.fields__row--marked {
  background: var(--mk-brand-cream);
  box-shadow: inset 4px 0 0 var(--mk-brand-ink);
}
.fields__name {
  font-size: 15px;
  font-weight: 600;
  line-height: 1.5;
  color: var(--mk-brand-ink);
}
.fields__meaning {
  margin: 0;
  font-family: var(--mk-font-text);
  font-size: 16px;
  line-height: 1.5;
  color: var(--mk-brand-ink);
}
.fields__meaning code {
  font-size: 15px;
  font-weight: 600;
  color: var(--mk-brand-ink);
}

/* ---------- #note ---------- */
.note {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-top: 40px;
  padding-top: 28px;
  border-top: 1.5px solid var(--mk-line-essential);
}
.note__icon {
  display: block;
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
}
.note__body {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.note__title {
  margin: 0;
  font-family: var(--mk-font-display);
  font-variation-settings: 'opsz' 96, 'wdth' 88;
  font-weight: 700;
  letter-spacing: -0.02em;
  font-size: 24px;
  line-height: 1.15;
  color: var(--mk-brand-ink);
}
.note__text {
  margin: 0;
  font-family: var(--mk-font-text);
  font-size: 17px;
  line-height: 1.5;
  color: var(--mk-brand-ink);
}

/* ---------- main: 600px and up ---------- */
@media (min-width: 600px) {
  .page {
    --page-top: 32px;
    padding-bottom: 88px;
  }
  .intro__text {
    max-width: 600px;
  }
  .page-title {
    margin-top: 10px;
    font-size: 60px;
  }
  .facts {
    margin-top: 24px;
    padding: 16px 20px;
    font-size: 15px;
  }
  .lead {
    margin-top: 24px;
    font-size: 20px;
  }

  .file {
    margin-top: 56px;
  }
  .file__tape {
    top: -13px;
    left: 24px;
    padding: 0 10px;
    line-height: 22px;
  }
  .file__tape-break {
    display: none;
  }
  .file__code {
    --code-pad: 32px;
    padding-top: 38px;
    padding-bottom: 30px;
    font-size: 16px;
    line-height: 28px;
  }

  /* Field rows become two columns that line up across the card (subgrid). The first column is
     27% of the card (352px at 1440) and never narrower than the longest field name. */
  .fields {
    margin-top: 64px;
  }
  .fields__card {
    display: grid;
    grid-template-columns: minmax(max-content, 27.0354%) minmax(0, 1fr);
  }
  .fields__head,
  .fields__list,
  .fields__row {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: subgrid;
  }
  .fields__head {
    border-bottom: 1.5px solid var(--mk-line-essential);
    font-family: var(--mk-font-text);
    font-weight: 700;
    font-size: 12px;
    line-height: 1.3;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--mk-text-muted);
  }
  .fields__head > span:first-child {
    padding: 14px 24px 12px 28px;
  }
  .fields__head > span:last-child {
    padding: 14px 28px 12px 0;
  }
  .fields__row {
    align-items: baseline;
    gap: 0;
    padding: 0;
  }
  .fields__name {
    padding: 17px 24px 17px 28px;
    font-size: 16px;
  }
  .fields__meaning {
    padding: 17px 28px 17px 0;
    font-size: 18px;
  }
  .fields__meaning code {
    font-size: 16px;
  }

  .note {
    gap: 20px;
    margin-top: 48px;
    padding-top: 32px;
  }
  .note__icon {
    width: 40px;
    height: 40px;
  }
  .note__title {
    font-size: 28px;
  }
  .note__text {
    font-size: 18px;
  }
}

/* ---------- main: 1000px and up (the 1440 board) ---------- */
@media (min-width: 1000px) {
  .page {
    --page-top: 40px;
    padding-bottom: 112px;
  }
  /* Intro beside the preview: 540 / 700 with a 64px gap at 1440. */
  .intro {
    display: grid;
    grid-template-columns: minmax(0, 540fr) minmax(0, 700fr);
    gap: 64px;
    align-items: start;
  }
  .intro__text {
    min-width: 0;
    max-width: none;
  }
  .page-title {
    margin-top: 12px;
    font-size: 72px;
  }
  .facts {
    margin-top: 28px;
  }
  .lead {
    margin-top: 28px;
  }
  .file {
    min-width: 0;
    margin-top: 0;
    padding-top: 56px;
  }
  .fields {
    margin-top: 72px;
  }
  .note {
    margin-top: 56px;
    padding-top: 36px;
  }
  .note__title {
    font-size: 30px;
  }
}

/* Line-break polish between the drawn widths: no one-word last lines, and a balanced note title. The boards'
   own breaks (the 390 board ends a meaning on "here." and the note title on "instruct.") are kept at exactly
   390px and from 1440px up, where the layout no longer changes. */
@media (max-width: 389.98px), (min-width: 391px) and (max-width: 1439.98px) {
  .facts__line,
  .lead,
  .fields__meaning,
  .note__text {
    text-wrap: pretty;
  }
  .note__title {
    text-wrap: balance;
  }
}

/* ---------- site footer ---------- */
.site-footer {
  padding: 36px var(--inset) 30px;
  background: var(--mk-brand-ink);
  color: var(--mk-brand-cream);
}
.site-footer a {
  color: var(--mk-brand-cream);
}
.site-footer a:hover {
  color: #FFFFFF;
}
.site-footer :focus-visible {
  outline-color: var(--mk-brand-cream);
}
.site-footer__top {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-bottom: 28px;
}
.site-footer__brand {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}
.site-footer__logo {
  display: block;
  flex: 0 0 auto;
  width: 206.86px;
  height: 48px;
}
.site-footer__tagline {
  margin: 0;
  padding-left: 43.2px;
  font-family: var(--mk-font-text);
  font-weight: 600;
  font-size: 12px;
  line-height: 1.2;
  color: var(--mk-brand-cream);
}
.site-footer__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 24px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.site-footer__link,
.site-footer__soon {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  font-family: var(--mk-font-text);
  font-weight: 600;
  font-size: 16px;
  line-height: 1.2;
  text-decoration: none;
}
.site-footer__soon {
  color: var(--mk-brand-cream);
}
.site-footer__legal {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 12px;
  margin: 0;
  padding-top: 18px;
  border-top: 1.5px solid var(--mk-line-essential);
  font-family: var(--mk-font-text);
  font-size: 14px;
  line-height: 1.4;
  color: var(--mk-brand-cream);
}

@media (min-width: 600px) {
  .site-footer {
    padding-top: 44px;
    padding-bottom: 32px;
  }
  .site-footer__top {
    gap: 24px;
    margin-bottom: 36px;
  }
  .site-footer__logo {
    width: 241.33px;
    height: 56px;
  }
  .site-footer__tagline {
    padding-left: 50.4px;
    font-size: 14px;
  }
  .site-footer__list {
    gap: 4px 32px;
  }
  .site-footer__legal {
    padding-top: 20px;
  }
}

@media (min-width: 1000px) {
  .site-footer {
    padding-top: 52px;
    padding-bottom: 36px;
  }
  .site-footer__top {
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
    gap: 40px;
    margin-bottom: 44px;
  }
  .site-footer__list {
    gap: 4px 36px;
  }
  .site-footer__legal {
    padding-top: 22px;
  }
}

/* ---------- engines without subgrid (before late 2023): same content, simpler alignment ---------- */
@supports not (grid-template-columns: subgrid) {
  @media (max-width: 999.98px) {
    .site-nav {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      align-content: center;
      justify-content: flex-end;
    }
    .site-menu:not([hidden]) {
      flex: 0 0 100%;
    }
  }
  .fields__list {
    display: block;
  }
  .fields__head,
  .fields__row {
    grid-template-columns: minmax(212px, 27.0354%) minmax(0, 1fr);
  }
}

/* ---------- reduced motion: no lift, no slide ---------- */
@media (prefers-reduced-motion: reduce) {
  .btn,
  .menu-toggle {
    transition: none;
  }
  .btn--primary:hover,
  .btn--primary:active,
  .menu-toggle[aria-expanded="true"] {
    transform: none;
  }
  .site-menu:not([hidden]) {
    animation: none;
  }
}