/* Makings landing (makings.lol/) — one responsive DOM for the approved T-Landing boards.
   Drawn widths: 1440, 1024, 768, 390, 320. Layout bands:
     XL  >= 1320px   the 1440 board (one-row nav)
     L   1000–1319   the 1024 board (two-row nav)        full nav from 1000px up
     M   700–999     the 768 board (compact Menu)         compact Menu below 1000px
     S   375–699     the 390 board
     XS  < 375       the 320 board
   Page inset (--inset) is fluid between the drawn widths and exact at each of them:
     16px@320 · 24px@390 · 48px@768 · 48px@1024 · 68px@1440; above 1440 the content is a centred 1304px column.
   Media queries use min-width / max-width (not the level 4 range syntax, which Safari < 16.4 ignores); a band's
   upper bound N is written max-width: N - 0.02px, so adjacent bands never overlap.
   Box model: content-box everywhere except where the boards use border-box (set per rule). No global reset. */

/* ---------------------------------------------------------------- fonts (self-hosted, supplied by the build) */
@font-face {
  font-family: 'Bricolage Grotesque';
  src: url('/assets/fonts/bricolage-grotesque.woff2') format('woff2');
  font-weight: 200 800;
  font-stretch: 75% 100%;
  font-display: swap;
}
@font-face {
  font-family: 'Figtree';
  src: url('/assets/fonts/figtree.woff2') format('woff2');
  font-weight: 300 900;
  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-display: swap;
}

/* ---------------------------------------------------------------- tokens */
:root {
  --ink: #202753;
  --ultra: #4436D9;
  --ultra-deep: #2B1FA6;
  --cream: #FFF4C7;
  --canvas: #FFF8E8;
  --paper: #FFFDF6;
  --pink: #FF9FC8;
  --pink-band: #FFE3EE;
  --green: #93CDA3;
  --muted: #525777;
  --rule-soft: #C7C6BB;
  --unknown: #50406F;
  --unknown-bg: #ECEAFB;
  --hold: #235233;
  --hold-bg: #E4F4E8;
  --f-display: 'Bricolage Grotesque', 'Arial Black', system-ui, sans-serif;
  --f-body: 'Figtree', system-ui, sans-serif;
  --f-mono: 'Spline Sans Mono', ui-monospace, Menlo, monospace;
  --ease: cubic-bezier(0.2, 0, 0, 1);
  --inset: 16px;
}
@media (min-width: 320px) { :root { --inset: calc(16px + (100vw - 320px) * 8 / 70); } }
@media (min-width: 390px) { :root { --inset: calc(24px + (100vw - 390px) * 24 / 378); } }
@media (min-width: 768px) { :root { --inset: 48px; } }
@media (min-width: 1024px) { :root { --inset: calc(48px + (100vw - 1024px) * 20 / 416); } }
@media (min-width: 1440px) { :root { --inset: max(68px, (100vw - 1304px) / 2); } }

/* ---------------------------------------------------------------- base */
body {
  margin: 0;
  background: var(--canvas);
  color: var(--ink);
  font-family: var(--f-body);
}
h1, h2, h3, p, ul, ol, dl, dd, dt, figure, pre { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: var(--ultra); text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
button { font: inherit; cursor: pointer; }
svg { display: block; flex: none; }
:focus-visible { outline: 3px solid var(--ultra); outline-offset: 3px; }
.on-blue :focus-visible { outline-color: var(--cream); }
main:focus { outline: none; }
.mono { font-family: var(--f-mono); font-variant-ligatures: none; font-feature-settings: "liga" 0, "calt" 0; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.nowrap { white-space: nowrap; }

/* skip link: first focusable element, visible only on focus */
.skip-link {
  position: absolute; left: var(--inset); top: 6px; z-index: 30;
  width: 1px; height: 1px; margin: -1px; padding: 0; overflow: visible; white-space: nowrap; clip-path: inset(50%);
  font: 700 16px/1.2 var(--f-body); color: var(--ink); text-decoration: none;
}
.skip-link:focus {
  width: auto; height: auto; margin: 0; clip-path: none;
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px;
  background: var(--cream); border: 2px solid var(--ink); border-radius: 12px; box-shadow: 4px 4px 0 var(--ink);
  outline: 3px solid var(--ultra); outline-offset: 3px;
}

/* ---------------------------------------------------------------- shared components */
.tape {
  display: inline-flex; align-items: center; min-height: 26px; padding: 0 10px;
  border: 2px dashed var(--ink); border-radius: 0; color: var(--ink);
  font-size: 12px; font-weight: 600; letter-spacing: 0.12em; line-height: 1;
  background-color: var(--cream);
  background-image: repeating-linear-gradient(135deg, rgba(32, 39, 83, .10) 0 2px, transparent 2px 7px);
}
.hatch-unknown {
  background-color: var(--unknown-bg);
  background-image: repeating-linear-gradient(135deg, rgba(80, 64, 111, .10) 0 2px, transparent 2px 8px);
}
.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(--ink); border-radius: 14px;
  font: 700 17px/1.2 var(--f-body); text-decoration: none;
}
.btn--primary { background: var(--ultra); color: var(--cream); box-shadow: 4px 4px 0 var(--ink); }
.btn--cream { background: var(--cream); color: var(--ink); box-shadow: 4px 4px 0 var(--ultra-deep); }
.btn--ghost { background: transparent; color: var(--cream); border-color: var(--cream); box-shadow: 4px 4px 0 var(--ultra-deep); }
.btn--paper { background: var(--paper); color: var(--ink); box-shadow: 4px 4px 0 var(--ink); }
.pill {
  display: inline-flex; align-items: center; gap: 6px; min-height: 24px; padding: 0 10px 0 8px;
  border-radius: 999px; background: var(--ink); color: var(--cream);
  font: 700 12px/1 var(--f-body); letter-spacing: 0.08em;
}
.pill--light { background: var(--cream); color: var(--ink); }
.pill--light svg { overflow: visible; }
.soon {
  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: 600 12px/1 var(--f-body); letter-spacing: 0.02em;
}
.eyebrow {
  font: 700 14px/1.3 var(--f-body); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ultra);
}
.h2 {
  font-family: var(--f-display); font-variation-settings: "opsz" 96, "wdth" 88; font-weight: 800;
  letter-spacing: -0.035em; line-height: 1.02; color: var(--ink);
}
.h2 .line { display: block; }
.h2 .accent { color: var(--ultra); }
.lead { font-size: 20px; line-height: 1.5; color: var(--ink); }
.note { display: flex; align-items: center; gap: 8px; font-size: 16px; line-height: 1.4; color: var(--muted); }
.note__icon { display: contents; }
.note--footnote { line-height: 1.5; }

/* section header: eyebrow + H2 with a lead beside (XL) or under (smaller) */
.sec-head__title { display: flex; flex-direction: column; align-items: flex-start; }

@media (min-width: 1320px) {
  .h2 { font-size: 60px; }
  .sec-head { display: grid; grid-template-columns: minmax(0, 860fr) minmax(0, 416fr); column-gap: 28px; align-items: end; }
  .sec-head__title { gap: 18px; }
  .sec-head .lead { margin: 0 0 9px; }
}
@media (min-width: 1000px) and (max-width: 1319.98px) {
  .h2 { font-size: 56px; }
  .sec-head { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
  .sec-head__title { display: contents; }
  .sec-head .lead { margin: 6px 0 0; max-width: 611px; font-size: 19px; line-height: 1.55; }
}
@media (min-width: 700px) and (max-width: 999.98px) {
  .h2 { font-size: 44px; }
  .sec-head { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
  .sec-head__title { display: contents; }
  .sec-head .lead { margin: 6px 0 0; max-width: 585px; font-size: 18px; }
}
@media (max-width: 699.98px) {
  .h2 { font-size: 32px; }
  .h2 .line { white-space: pre-line; }
  .sec-head__title { gap: 14px; }
  .sec-head .lead { margin: 18px 0 0; font-size: 18px; }
}

/* ---------------------------------------------------------------- site header + menu */
.site-header {
  position: absolute; z-index: 5; top: 24px; left: var(--inset); right: var(--inset);
  box-sizing: border-box; background: var(--canvas);
  border: 2px solid var(--ink); border-radius: 20px; box-shadow: 5px 5px 0 var(--ultra-deep);
}
.site-header__home { display: flex; align-items: center; min-height: 44px; }
.site-nav__link {
  display: inline-flex; align-items: center; min-height: 44px;
  font: 600 16px/1.2 var(--f-body); color: var(--ink); text-decoration: none;
}
.site-nav__link--pulse { gap: 8px; }
.site-nav__link--soon { gap: 8px; color: var(--muted); }
.site-nav__list { display: flex; align-items: center; gap: 30px; }
.menu-toggle {
  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(--ink); border-radius: 12px;
  background: var(--cream); color: var(--ink); font: 700 16px/1 var(--f-body); box-shadow: 3px 3px 0 var(--ink);
}
.menu-toggle__icon path { stroke: currentColor; }
.menu-toggle__close { display: none; }
.menu-toggle[aria-expanded="true"] .menu-toggle__bars { display: none; }
.menu-toggle[aria-expanded="true"] .menu-toggle__close { display: inline; }
.site-menu { display: none; }

@media (min-width: 1000px) {
  .menu-toggle, .site-menu, .site-menu:not([hidden]) { display: none; }
}
@media (min-width: 1320px) {
  .site-header {
    display: flex; align-items: center; justify-content: space-between; gap: 24px;
    min-height: 80px; padding: 0 16px 0 22px;
  }
}
@media (min-width: 1000px) and (max-width: 1319.98px) {
  /* the card sits 24px outside the column, so the lockup and the CTA stay on the column's edges (as on the 1024 board) */
  .site-header {
    top: 20px; left: calc(var(--inset) - 24px); right: calc(var(--inset) - 24px);
    display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: minmax(68px, auto) minmax(48px, auto);
  }
  .site-header__home { grid-area: 1 / 1; place-self: center start; margin-left: 22px; }
  .site-nav {
    grid-area: 2 / 1 / auto / span 2; display: flex; align-items: center; box-sizing: border-box;
    padding: 0 22px; border-top: 1.5px solid var(--muted);
  }
  .site-header__cta { grid-area: 1 / 2; align-self: center; margin-right: 22px; }
}

/* compact: lockup + labelled Menu button; the list opens as a panel inside the header card */
@media (max-width: 999.98px) {
  .site-header { display: flex; justify-content: flex-end; }
  .site-header__home { position: absolute; }
  .site-nav { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; flex: 1 1 100%; }
  .site-nav__list, .site-header__cta { display: none; }
  .site-menu:not([hidden]) { display: flex; flex-direction: column; flex: 1 1 100%; margin: 10px 0 0; padding: 6px 0 8px; border-top: 1.5px solid var(--muted);
    animation: menu-in 200ms var(--ease);
  }
  .site-menu li { border-bottom: 1.5px solid var(--rule-soft); }
  .site-menu li:last-child { border-bottom: 0; }
  .site-menu__link {
    display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 50px; padding: 0 6px;
    font: 600 17px/1.2 var(--f-body); color: var(--ink); text-decoration: none;
  }
  .site-menu__link--soon { color: var(--muted); }
  .site-menu__cta {
    margin-top: 16px; min-height: 52px; box-sizing: border-box; border: 2px solid var(--ink); border-radius: 14px;
    background: var(--ultra); color: var(--cream); font-weight: 700; box-shadow: 4px 4px 0 var(--ink);
  }
  .menu-toggle[aria-expanded="true"] { background: var(--ink); color: var(--cream); box-shadow: none; transform: translate(2px, 2px); }
  .menu-toggle { transition: background-color 200ms var(--ease), color 200ms var(--ease), transform 200ms var(--ease); }
}
@keyframes menu-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
/* the compact card takes the 768 board's sizes from 600px (as on the discovery and legacy pages) */
@media (min-width: 600px) and (max-width: 999.98px) {
  .site-header { top: 20px; min-height: 72px; padding: 0 14px 0 20px; }
  .site-header__home { left: 20px; top: 12px; }
  .site-nav { padding: 12px 0; }
}
@media (max-width: 599.98px) {
  .site-header { top: 12px; min-height: 64px; padding: 0 13px 0 12px; border-radius: 18px; box-shadow: 4px 4px 0 var(--ultra-deep); }
  .site-header__home { left: 12px; top: 8px; }
  .site-header__logo { width: 135.75px; height: 31.5px; }
  .site-nav { padding: 8px 0; }
}
@media (max-width: 374.98px) {
  .site-header { right: calc(var(--inset) + 4px); }
}

/* ---------------------------------------------------------------- hero */
.hero {
  position: relative; box-sizing: border-box; padding: 0 var(--inset);
  background: var(--ultra); border-bottom: 2px solid var(--ink);
}
.hero__decor { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.hero__decor svg { position: absolute; overflow: visible; }
.hero__inner { position: relative; }
.hero__copy { position: relative; z-index: 4; display: flex; flex-direction: column; align-items: flex-start; }
.hero__status { display: flex; align-items: center; gap: 12px; font: 700 20px/1.3 var(--f-body); color: var(--cream); }
.hero__status-icon {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 32px; height: 32px; box-sizing: border-box; border-radius: 50%;
  background: var(--cream); border: 2px solid var(--ink); box-shadow: 3px 3px 0 var(--ultra-deep);
}
.hero__status-icon svg { width: 20px; height: 20px; }
.hero__title {
  margin: 20px 0 0; font-family: var(--f-display); font-weight: 800; font-variation-settings: "opsz" 96, "wdth" 88;
  letter-spacing: -0.035em; font-size: 76px; line-height: 0.98; color: var(--cream);
}
.hero__title > span { display: block; }
.hero__title .accent { color: var(--pink); }
.hero__lead { margin: 26px 0 0; max-width: 540px; font-size: 19px; line-height: 1.5; color: var(--cream); }
.hero__tagline { margin: 6px 0 0; font-weight: 700; font-size: 20px; line-height: 1.45; color: var(--cream); }
.chips { display: flex; flex-wrap: wrap; gap: 10px; margin: 24px 0 0; }
.chip {
  display: inline-flex; align-items: center; min-height: 36px; padding: 0 14px; box-sizing: border-box;
  border: 2px solid var(--cream); border-radius: 999px;
  font: 600 15px/1 var(--f-body); color: var(--cream);
}
.hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; margin: 28px 0 0; }
.hero__setup { margin: 22px 0 0; font-size: 16px; line-height: 1.5; color: var(--cream); }
.hero__setup > span { display: block; }
.hero__setup strong { font-weight: 700; }
.hero__fee { font-size: 16px; line-height: 1.5; color: var(--cream); }

/* the EXAMPLE spec card (a figure, not a link) */
.spec-card { z-index: 2; color: var(--ink); }
.spec-card__tape { position: absolute; z-index: 2; top: -15px; left: calc(50% - 60px); transform: rotate(-2deg); }
.spec-card__body {
  box-sizing: border-box; background: var(--paper); border: 2px solid var(--ink); border-radius: 20px;
  box-shadow: 8px 8px 0 var(--ultra-deep); overflow: hidden;
}
.spec-card__cover { border-bottom: 2px solid var(--ink); }
.spec-card__facts { padding: 2px 20px 4px; }
.spec-card__facts > div {
  display: grid; grid-template-columns: 120px 1fr; gap: 12px; align-items: baseline; padding: 10px 0;
  border-bottom: 1.5px solid var(--muted);
}
.spec-card__facts > div:last-child { border-bottom: 0; }
.spec-card__facts dt { font: 600 14px/1.4 var(--f-body); color: var(--muted); }
.spec-card__facts dd.mono { font-size: 15px; font-weight: 600; line-height: 1.4; color: var(--ink); }
.spec-card .price__amount { font-size: 22px; line-height: 1.1; }
.spec-card .cover__title { font-size: 26px; }
.hero__agent { position: absolute; z-index: 3; overflow: visible; }

@media (min-width: 1320px) {
  .hero { min-height: 904px; }
  .hero__inner { padding-top: 142px; }
  .hero__copy { width: min(700px, 100%); }
  .hero__flower { left: calc(100% - var(--inset) - 250px); top: 100px; width: 340px; height: 340px; }
  .hero__orbit { left: calc(100% - var(--inset) - 524px); top: 292px; width: 640px; height: 274.3px; }
  .hero__dot { left: calc(100% - var(--inset) - 70px); top: 588px; width: 110px; height: 110px; }
  .spec-card { position: absolute; right: 0; top: 214px; width: 420px; }
  .hero__agent { left: calc(100% - 476px); top: 660px; width: 220px; height: 220px; }
}
@media (min-width: 1000px) and (max-width: 1319.98px) {
  .hero { min-height: 928px; }
  .hero__inner { padding-top: 164px; }
  .hero__copy { width: min(700px, calc(100% - 397px)); }
  .hero__title { font-size: 58px; }
  .hero__lead { margin-top: 22px; max-width: 520px; font-size: 18px; }
  .hero__tagline { font-size: 19px; }
  .chips { gap: 8px 10px; margin-top: 20px; }
  .hero__actions { gap: 16px; margin-top: 24px; }
  .hero__setup { margin-top: 20px; }
  .hero__fee { max-width: 21em; } /* the 1024 board breaks the fee line after "directly;" */
  .hero__flower { left: calc(100% - var(--inset) - 164px); top: 150px; width: 244px; height: 244px; }
  .hero__orbit { left: calc(100% - var(--inset) - 386px); top: 674px; width: 420px; height: 180px; }
  .hero__dot { left: calc(100% - var(--inset) - 50px); top: 550px; width: 84px; height: 84px; }
  .spec-card { position: absolute; right: 0; top: 182px; width: 372px; }
  .spec-card__tape { left: calc(50% - 53px); }
  .spec-card__body { box-shadow: 7px 7px 0 var(--ultra-deep); }
  .spec-card__facts { padding: 2px 18px 4px; }
  .spec-card__facts > div { grid-template-columns: 114px 1fr; }
  .spec-card .cover__title { font-size: 22px; }
  .hero__agent { left: calc(100% - 360px); top: 610px; width: 196px; height: 196px; }
}
@media (min-width: 1000px) {
  .hero__flower2 { display: none; }
}
@media (min-width: 700px) and (max-width: 999.98px) {
  .hero { padding-bottom: 64px; }
  .hero__inner { padding-top: 128px; }
  .hero__title { font-size: 64px; }
  .hero__lead { margin-top: 24px; max-width: 585px; font-size: 18px; }
  .hero__tagline { font-size: 19px; }
  .hero__flower { left: calc(100% - var(--inset) - 124px); top: 80px; width: 280px; height: 280px; }
  .hero__flower2 { display: none; }
  /* the art group is drawn 672px wide and centred on the column; where the column is narrower (below 768px) the
     group keeps the card's right edge on the column's right edge. The card is in flow, so a taller card (text
     spacing) makes the section taller instead of running into the next one. */
  .hero__orbit { left: min(50% - 360px, 100% - var(--inset) - 696px); bottom: 332.9px; width: 600px; height: 257.1px; }
  .hero__dot { left: min(50% + 270px, 100% - var(--inset) - 66px); bottom: 76px; width: 100px; height: 100px; }
  .hero__art { position: relative; min-height: 490px; margin-top: 56px; padding-top: 20px; }
  .spec-card { position: relative; width: 420px; margin-left: min(50% - 84px, 100% - 420px); }
  .hero__agent { left: min(50% - 274px, 100% - 610px); top: 254px; width: 210px; height: 210px; }
}
@media (max-width: 699.98px) {
  .hero__inner { padding-top: 100px; }
  .hero__copy { width: 100%; align-items: stretch; }
  .hero__status-icon { width: 30px; height: 30px; }
  .hero__status-icon svg { width: 18px; height: 18px; }
  .hero__status-text { white-space: pre-line; }
  .hero__lead { margin-top: 18px; font-size: 16px; }
  .hero__tagline { font-size: 17px; }
  .chips { gap: 8px; }
  .chip { min-height: 32px; padding: 0 10px; font-size: 14px; }
  .hero__actions { flex-direction: column; flex-wrap: nowrap; align-items: stretch; gap: 14px; margin: 22px 4px 0 0; }
  .hero__setup { margin-top: 20px; }
  .hero__setup > span { display: inline; }
  .hero__flower { z-index: 1; width: 160px; height: 160px; }
  .hero__orbit { display: none; }
  .hero__art { position: relative; }
  .spec-card { position: relative; }
  /* the dot sits against the card's right edge (2px in at 390, where the card is the column; the card stops at 420px) */
  .hero__dot { left: calc(var(--inset) + min(100% - 2 * var(--inset), 420px) - 74px); }
}
/* phone card (390 and 320 boards); from 480px the card is 420px wide and takes the 768 board's card */
@media (max-width: 479.98px) {
  .spec-card__body { box-shadow: 6px 6px 0 var(--ultra-deep); }
  .spec-card__facts { padding: 2px 16px 4px; }
  .spec-card__facts > div { grid-template-columns: 70px 1fr; }
  .spec-card .price__amount { font-size: 20px; }
  .spec-card .cover__title { font-size: 22px; }
}
@media (min-width: 375px) and (max-width: 699.98px) {
  .hero__status { font-size: 18px; }
  .hero__title { margin: 18px -16px 0 0; font-size: 42px; }
  .hero__lead { max-width: 480px; }
  .chips { margin-top: 18px; }
  .hero__actions { max-width: 420px; }
  .hero__flower { left: calc(100% - var(--inset) - 26px); top: 96px; }
  .hero__flower2 { left: calc(var(--inset) - 6px); bottom: -15px; width: 190px; height: 190px; }
  .hero__dot { bottom: 42px; width: 72px; height: 72px; }
  .hero__art { padding-bottom: 171px; }
  .spec-card { margin-top: 36px; width: min(100%, 420px); }
  .hero__agent { left: 24px; bottom: 4px; width: 150px; height: 150px; }
}
@media (min-width: 375px) and (max-width: 479.98px) {
  .spec-card__tape { left: calc(50% - 59px); }
}
@media (max-width: 374.98px) {
  .hero__status { font-size: 17px; }
  .hero__title { margin-top: 18px; font-size: 34px; }
  .chips { order: 1; margin-top: 22px; }
  .hero__setup { text-wrap: pretty; }
  .hero__flower { left: calc(100% - var(--inset) - 18px); top: 150px; }
  .hero__flower2 { left: calc(var(--inset) - 2px); bottom: -8px; width: 176px; height: 176px; }
  .hero__dot { bottom: 42px; width: 64px; height: 64px; }
  .hero__art { padding-bottom: 178px; }
  .spec-card { margin-top: 40px; width: calc(100% - 6px); }
  .spec-card__tape { left: calc(50% - 49px); }
  .hero__agent { left: 22px; bottom: 10px; width: 140px; height: 140px; }
}

/* ---------------------------------------------------------------- cover art (kit "Playroom tiles") */
.cover--data { --cover-bg: #93CDA3; --tone-a: #202753; --tone-b: #FFF4C7; }
.cover--workflow { --cover-bg: #FFF4C7; --tone-a: #202753; --tone-b: #FF9FC8; }
.cover--creative { --cover-bg: #202753; --tone-a: #FF9FC8; --tone-b: #FFF4C7; }
.cover--adapter { --cover-bg: #4436D9; --tone-a: #FFF4C7; --tone-b: #FF9FC8; }
.cover {
  /* a 3:2 box whose chips sit at the top and title label at the bottom, both in flow: when text grows (WCAG 1.4.12)
     the cover grows taller instead of clipping the label or laying it over the chips. overflow: clip (not hidden)
     keeps the boards' rounded clip, and so their exact tile rendering, without making the cover a scroll container,
     which would stop the 3:2 box from growing with its content. */
  position: relative; display: flex; flex-direction: column; justify-content: space-between;
  aspect-ratio: 3 / 2; overflow: clip; background: var(--cover-bg);
}
.cover--framed { box-sizing: border-box; border: 2px solid var(--ink); border-radius: 18px; }
.cover__pattern { position: absolute; inset: 12px; }
.cover__pattern > span { position: absolute; box-sizing: border-box; transform: translate(-50%, -50%); }
.cc1 { left: calc(((100% - 30px) / 6) * 0.5 + 0px); }
.cc2 { left: calc(((100% - 30px) / 6) * 1.5 + 6px); }
.cc3 { left: calc(((100% - 30px) / 6) * 2.5 + 12px); }
.cc4 { left: calc(((100% - 30px) / 6) * 3.5 + 18px); }
.cc5 { left: calc(((100% - 30px) / 6) * 4.5 + 24px); }
.cc6 { left: calc(((100% - 30px) / 6) * 5.5 + 30px); }
.cr1 { top: calc(((100% - 18px) / 4) * 0.5 + 0px); }
.cr2 { top: calc(((100% - 18px) / 4) * 1.5 + 6px); }
.cr3 { top: calc(((100% - 18px) / 4) * 2.5 + 12px); }
.cr4 { top: calc(((100% - 18px) / 4) * 3.5 + 18px); }
.cs-circle { width: calc(((100% - 30px) / 6) * 0.74); aspect-ratio: 1 / 1; border-radius: 50%; }
.cs-hpill { width: calc(((100% - 30px) / 6) * 0.92); aspect-ratio: 9 / 4; border-radius: 999px; }
.cs-vpill { height: calc(((100% - 18px) / 4) * 0.92); aspect-ratio: 4 / 9; border-radius: 999px; }
.cs-quarter { width: calc(((100% - 30px) / 6) * 0.8); aspect-ratio: 1 / 1; }
.cs-dot { width: calc(((100% - 30px) / 6) * 0.28); aspect-ratio: 1 / 1; border-radius: 50%; }
.cq-tl { border-top-left-radius: 100%; }
.cq-tr { border-top-right-radius: 100%; }
.cq-br { border-bottom-right-radius: 100%; }
.cq-bl { border-bottom-left-radius: 100%; }
.ct-a { background: var(--tone-a); }
.ct-b { background: var(--tone-b); }
.cover__chips {
  position: relative; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 8px;
  margin: 18px 18px 0;
}
.cover__version {
  display: inline-flex; align-items: center; min-height: 26px; padding: 0 9px;
  border-radius: 7px; background: var(--ink); color: var(--cream); font-size: 13px; font-weight: 600; line-height: 1;
}
.cover__category {
  display: inline-flex; align-items: center; min-height: 26px; padding: 0 11px;
  box-sizing: border-box; border: 2px solid var(--ink); border-radius: 999px; background: var(--cream); color: var(--ink);
  font: 600 13px/1 var(--f-body);
}
.cover__label {
  position: relative; align-self: flex-start; max-width: 70%; margin: 12px 0 18px 16px; padding: 10px 14px 12px;
  border: 2px solid var(--ink); border-radius: 14px; background: var(--cream); box-shadow: 4px 4px 0 var(--ink);
}
.cover__title {
  display: block; font-family: var(--f-display); font-weight: 800; font-variation-settings: "opsz" 96, "wdth" 88;
  letter-spacing: -0.035em; font-size: 26px; line-height: 1.02; color: var(--ink); overflow-wrap: break-word;
}

/* price and seller marker (spec card and product cards) */
.price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; }
.spec-card__facts dd.price { min-width: 0; }
.price__amount {
  font-family: var(--f-display); font-weight: 800; font-variation-settings: "opsz" 96, "wdth" 88;
  letter-spacing: -0.035em; font-size: 26px; line-height: 1.05; color: var(--ink);
}
.price__note { font: 600 14px/1.3 var(--f-body); color: var(--muted); }
.seller { display: inline-flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.first-party {
  display: inline-flex; align-items: center; gap: 7px; min-height: 28px; padding: 0 10px 0 6px; border-radius: 8px;
  background: var(--ultra); color: var(--cream); font: 700 12px/1 var(--f-body); letter-spacing: 0.08em;
}
.seller__name { font-family: var(--f-body); font-weight: 600; font-size: 15px; color: var(--ink); }

/* ---------------------------------------------------------------- #ready */
.ready { padding: 120px var(--inset) 104px; }
.needs { display: flex; flex-direction: column; gap: 24px; }
.need {
  box-sizing: border-box; padding: 28px 28px 30px; background: var(--paper);
  border: 2px solid var(--ink); border-radius: 20px; box-shadow: 5px 5px 0 var(--ink);
}
.need__num {
  display: flex; align-items: center; justify-content: center; min-width: 56px; min-height: 56px; box-sizing: border-box;
  border: 2px solid var(--ink); border-radius: 16px; background: var(--ultra); box-shadow: 3px 3px 0 var(--ink);
  font-family: var(--f-display); font-variation-settings: "opsz" 96, "wdth" 88; font-weight: 800; letter-spacing: -0.035em;
  font-size: 30px; line-height: 1; color: var(--cream);
}
.need__text { display: flex; flex-direction: column; gap: 8px; min-width: 0; padding-top: 2px; }
.need__title {
  font-family: var(--f-display); font-variation-settings: "opsz" 96, "wdth" 88; font-weight: 700; letter-spacing: -0.02em;
  font-size: 26px; line-height: 1.15; color: var(--ink);
}
.need__desc { font-size: 18px; line-height: 1.55; color: var(--ink); }
.instr { position: relative; }
.instr__panel { box-sizing: border-box; background: var(--paper); border: 1.5px solid var(--muted); border-radius: 16px; overflow: hidden; }
.instr__head {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 30px 24px 22px 28px; border-bottom: 1.5px solid var(--muted);
}
.instr__titles { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.instr__title {
  font-family: var(--f-display); font-variation-settings: "opsz" 96, "wdth" 88; font-weight: 700; letter-spacing: -0.02em;
  font-size: 24px; line-height: 1.2; color: var(--ink);
}
.instr__meta { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 8px; font-size: 16px; line-height: 1.5; color: var(--muted); }
.instr__meta code { font-size: 15px; font-weight: 600; color: var(--ink); }
.instr__actions { flex: none; display: flex; align-items: center; }
.copy-btn {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px; box-sizing: border-box;
  border: 2px solid var(--ink); border-radius: 10px; background: var(--paper); color: var(--ink);
  font: 600 15px/1.2 var(--f-body);
}
.instr__text {
  padding: 24px 28px 28px; font-size: 16px; font-weight: 400; line-height: 1.65; color: var(--ink);
  white-space: pre-wrap; overflow-wrap: anywhere; text-indent: 5ch hanging each-line;
}
.instr__tape { position: absolute; top: -13px; left: 24px; }
.docs-soon {
  margin-top: 44px; display: flex; align-items: center; gap: 16px; box-sizing: border-box; min-height: 72px;
  padding: 16px 24px; border: 1.5px dashed var(--muted); border-radius: 16px;
}
.docs-soon__icon { display: contents; }
.docs-soon__text { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; font-size: 18px; line-height: 1.5; color: var(--ink); }
.docs-soon__text strong { font-weight: 700; }
.docs-soon__text span { color: var(--muted); }

@media (min-width: 1320px) {
  .ready__body {
    margin-top: 64px; display: grid; grid-template-columns: minmax(0, 497fr) minmax(0, 779fr);
    gap: 18px 28px; align-items: stretch;
  }
  .need { flex: 1 1 0%; display: grid; grid-template-columns: 56px 1fr; column-gap: 22px; align-items: start; }
  .need:nth-child(2) .need__desc { text-wrap: pretty; }
  .ready__side { display: contents; }
  .instr { display: flex; flex-direction: column; }
  .instr__panel { flex: 1 1 0%; }
  .ready__side .note { grid-column: 2; }
}
@media (min-width: 1000px) and (max-width: 1319.98px) {
  .ready { padding: 104px var(--inset) 96px; }
  .needs { margin-top: 52px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
  .need { display: flex; flex-direction: column; align-items: flex-start; padding: 24px 20px 28px; }
  .need__text { display: contents; }
  .need__title { margin-top: 20px; font-size: 24px; }
  .need__desc { margin-top: 8px; }
  .need:nth-child(2) .need__desc { text-wrap: pretty; }
  .ready__side { margin-top: 56px; display: flex; flex-direction: column; gap: 16px; }
  .docs-soon { margin-top: 40px; }
}
@media (min-width: 700px) and (max-width: 999.98px) {
  .ready { padding: 64px var(--inset); }
  .needs { margin-top: 40px; gap: 20px; }
  .need { display: grid; grid-template-columns: 56px minmax(0, 1fr); column-gap: 22px; align-items: start; padding: 24px 28px 26px 24px; }
  .need__text { gap: 6px; padding-top: 1px; }
  .need__title { font-size: 24px; }
  .need__desc { font-size: 17px; }
  .ready__side { margin-top: 48px; }
  .ready__side .note { margin-top: 16px; }
  .instr__head { padding: 30px 20px 20px 24px; }
  .instr__text { padding: 24px 24px 26px; }
  .docs-soon { margin-top: 40px; }
  .docs-soon__text { font-size: 17px; }
}
@media (max-width: 699.98px) {
  .needs { gap: 16px; margin-top: 28px; }
  .need { padding: 20px 20px 22px; }
  .need__num { min-width: 44px; min-height: 44px; border-radius: 14px; font-size: 24px; }
  .need__text { gap: 6px; padding-top: 1px; }
  .need__title { font-size: 22px; }
  .need__desc { font-size: 16px; }
  .ready__side { margin-top: 44px; }
  .instr__head { flex-direction: column; align-items: flex-start; gap: 14px; padding: 28px 16px 18px; }
  .instr__titles { gap: 4px; }
  .instr__title { font-size: 22px; }
  .instr__text { padding: 18px 16px 22px; }
  .instr__tape { left: 16px; }
  .ready__side .note { margin-top: 16px; align-items: flex-start; line-height: 1.45; }
  .note__icon { display: flex; flex: none; padding-top: 2px; }
  .note--footnote .note__icon { padding-top: 3px; }
  .docs-soon { margin-top: 28px; align-items: flex-start; gap: 14px; min-height: 0; padding: 16px 18px 18px; }
  .docs-soon__icon { display: flex; flex: none; padding-top: 1px; }
  .docs-soon__text { flex-direction: column; flex-wrap: nowrap; align-items: stretch; gap: 2px; font-size: 16px; }
}
@media (min-width: 375px) and (max-width: 699.98px) {
  .ready { padding: 48px var(--inset) 56px; }
  .need { display: grid; grid-template-columns: 44px 1fr; column-gap: 16px; align-items: start; }
}
@media (max-width: 374.98px) {
  .ready { padding: 48px var(--inset); }
  .needs { gap: 18px; margin-top: 32px; }
  .need {
    width: calc(100% - 5px); display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 12px 14px; align-items: center;
    padding: 20px 18px 22px;
  }
  .need__num { border-radius: 13px; }
  .need__text { display: contents; }
  .need__title { min-width: 0; }
  .need__desc { grid-column: 1 / -1; }
  .instr__head { align-items: stretch; gap: 16px; padding: 30px 16px 18px; }
  .instr__titles { gap: 6px; }
  .instr__actions { flex-direction: column; align-items: stretch; }
  .copy-btn { display: flex; justify-content: center; width: 100%; }
  .ready__side .note { margin-top: 14px; line-height: 1.5; }
  .note__icon { display: contents; }
  .note__icon svg { margin-top: 3px; }
  .docs-soon { margin-top: 32px; padding: 16px 16px 18px; }
  .docs-soon__icon { display: contents; }
  .docs-soon__text { min-width: 0; }
}

/* ---------------------------------------------------------------- #examples */
.examples { padding: 0 var(--inset) 120px; }
.examples__inner { padding-top: 104px; border-top: 1.5px solid var(--rule-soft); }
.products { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 52px 28px; margin: 64px 0 0; }
.products > li { display: flex; }
.product {
  display: flex; flex-direction: column; width: 100%; box-sizing: border-box; padding: 14px 14px 24px;
  border: 2px solid var(--ink); border-radius: 20px; background: var(--paper); box-shadow: 5px 5px 0 var(--ink); color: var(--ink);
}
.product__media { position: relative; width: 100%; flex: none; }
.product__tape { position: absolute; top: -13px; left: 34%; }
.product__body { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 22px 6px 0; }
.product__head { display: contents; }
.product__meta { display: flex; align-items: center; gap: 8px; font: 600 14px/1.4 var(--f-body); color: var(--muted); }
.product__title {
  font-family: var(--f-display); font-variation-settings: "opsz" 96, "wdth" 88; font-weight: 800; letter-spacing: -0.035em;
  font-size: 30px; line-height: 1.02; color: var(--ink);
}
.product__foot { align-self: stretch; margin-top: 6px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px; }
.product__seller { display: contents; }
.examples .note--footnote { margin: 44px 0 0; }
/* the H2's two lines come from its width: after "agents" (9.4em) from 480px up, after "thing" (7.8em) below */
.examples__title { max-width: 9.4em; }

@media (min-width: 1000px) and (max-width: 1319.98px) {
  .examples { padding-bottom: 104px; }
  .products { gap: 44px 24px; margin-top: 56px; }
  .product { padding: 12px 12px 24px; }
  .product__body { padding: 20px 6px 0; }
  .product__title { font-size: 28px; }
  .product__foot { margin-top: 4px; flex-direction: column; flex-wrap: nowrap; align-items: flex-start; justify-content: flex-start; gap: 12px; }
  .product .price__amount { font-size: 24px; }
  .examples .note--footnote { margin-top: 40px; }
}
@media (min-width: 700px) and (max-width: 999.98px) {
  .examples { padding-bottom: 64px; }
  .examples__inner { padding-top: 64px; }
  .products { grid-template-columns: minmax(0, 1fr); gap: 32px; margin-top: 44px; }
  .product {
    display: grid; grid-template-columns: minmax(0, 360px) minmax(220px, 1fr); column-gap: 26px; align-items: start; padding: 14px;
  }
  .product .cover__title { font-size: 22px; }
  .product__body {
    align-self: stretch; justify-content: space-between; gap: 18px; min-width: 0; padding: 6px 0 4px;
  }
  .product__head { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
  .product__title { font-size: 28px; }
  .product__foot { align-self: auto; margin-top: 0; flex-direction: column; flex-wrap: nowrap; align-items: flex-start; justify-content: flex-start; gap: 12px; }
  .product .price { gap: 2px 8px; }
  .product .price__amount { font-size: 24px; }
  .examples .note--footnote { margin-top: 36px; }
}
@media (max-width: 699.98px) {
  .examples__inner { padding-top: 48px; }
  .examples__title { max-width: 7.8em; }
  .products { display: flex; flex-direction: column; }
  .product .cover__title { font-size: 22px; }
  .product__body { gap: 8px; }
  .product__title { font-size: 24px; }
  .product .price__amount { font-size: 22px; }
  .examples .note--footnote { align-items: flex-start; }
}
@media (min-width: 375px) and (max-width: 699.98px) {
  .examples { padding-bottom: 56px; }
  .products { gap: 40px; margin-top: 40px; }
  .product { padding: 12px 12px 20px; }
  .product__body { padding: 16px 4px 0; }
  .product__title { line-height: 1.04; text-wrap: balance; }
  .product__foot { display: contents; }
  .product__seller { display: block; margin-top: 4px; }
  .product .price { margin-top: 2px; }
  .examples .note--footnote { margin-top: 32px; }
}
@media (max-width: 374.98px) {
  .examples { padding-bottom: 48px; }
  .products { gap: 32px; margin-top: 32px; }
  .product { width: calc(100% - 5px); padding: 10px 10px 20px; }
  .product__body { padding: 18px 0 0; }
  .product__title { line-height: 1.05; }
  .product__foot { flex-direction: column; flex-wrap: nowrap; align-items: flex-start; justify-content: flex-start; gap: 12px; }
  .product .price__amount { line-height: 1.1; }
  .examples .note--footnote { margin-top: 28px; }
}

/* ---------------------------------------------------------------- #sellers */
.sellers {
  padding: 112px var(--inset) 120px; background: var(--pink-band);
  border-top: 2px solid var(--ink); border-bottom: 2px solid var(--ink);
}
.sellers__intro { display: flex; flex-direction: column; align-items: flex-start; }
.sellers__title {
  margin: 22px 0 0; font-family: var(--f-display); font-variation-settings: "opsz" 96, "wdth" 88; font-weight: 800;
  letter-spacing: -0.035em; font-size: 72px; line-height: 1; color: var(--ink);
}
.sellers__title .line { display: block; }
.sellers__title .accent { color: var(--ultra); }
.sellers__text { margin: 30px 0 0; max-width: 680px; font-size: 20px; line-height: 1.55; color: var(--ink); }
.tickets { position: relative; }
.ticket {
  position: absolute; box-sizing: border-box; display: flex; border: 2px solid var(--ink); border-radius: 18px;
  box-shadow: 6px 6px 0 var(--ink); width: 360px; height: 150px;
}
.ticket--1 { background: var(--green); }
.ticket--2 { background: var(--pink); }
.ticket--3 { background: var(--cream); }
.ticket__stub { flex: none; width: 82px; display: flex; align-items: center; justify-content: center; border-right: 2px dashed var(--ink); }
.ticket__stub svg { width: 40px; height: 84px; }
.ticket__main { flex: 1 1 0%; display: flex; flex-direction: column; justify-content: center; gap: 16px; padding: 0 26px; }
.ticket__version { font-size: 46px; font-weight: 600; line-height: 1; letter-spacing: -0.01em; color: var(--ink); }
.ticket__main svg { width: 176px; height: 10px; }
.points { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 28px; margin: 72px 0 0; }
.point { display: flex; flex-direction: column; gap: 10px; padding-top: 22px; border-top: 2px solid var(--ink); }
.point__title {
  font-family: var(--f-display); font-variation-settings: "opsz" 96, "wdth" 88; font-weight: 700; letter-spacing: -0.02em;
  font-size: 26px; line-height: 1.15; color: var(--ink);
}
.point__desc { font-size: 18px; line-height: 1.55; color: var(--ink); }
.sellers__foot { margin-top: 56px; display: flex; align-items: center; justify-content: space-between; gap: 40px; }
.sellers__print { max-width: 749px; font-size: 16px; line-height: 1.5; color: var(--muted); }
.sellers__print > span { display: block; }
.sellers__cta { display: contents; }

@media (min-width: 1320px) {
  .sellers__top { display: grid; grid-template-columns: minmax(0, 749fr) minmax(0, 527fr); column-gap: 28px; align-items: center; }
  .tickets { height: 452px; }
  .ticket--1 { left: 128px; top: 26px; transform: rotate(-8deg); }
  .ticket--2 { left: 64px; top: 148px; transform: rotate(-2deg); }
  .ticket--3 { left: 136px; top: 272px; transform: rotate(5deg); }
}
@media (min-width: 1000px) and (max-width: 1319.98px) {
  .sellers { padding: 96px var(--inset) 104px; }
  .sellers__top { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; align-items: center; }
  .sellers__intro { grid-column: span 7; }
  .tickets { grid-column: span 5; height: 372px; }
  .sellers__title { margin-top: 20px; font-size: 64px; }
  .sellers__text { margin-top: 26px; max-width: none; font-size: 19px; }
  .ticket { width: 296px; height: 124px; border-radius: 16px; }
  .ticket__stub { width: 68px; }
  .ticket__stub svg { width: 34px; height: 71.4px; }
  .ticket__main { gap: 14px; padding: 0 22px; }
  .ticket__version { font-size: 38px; }
  .ticket__main svg { width: 148px; height: 8.4px; }
  .ticket--1 { left: 56px; top: 22px; transform: rotate(-8deg); }
  .ticket--2 { left: 6px; top: 124px; transform: rotate(-2deg); }
  .ticket--3 { left: 62px; top: 228px; transform: rotate(5deg); }
  .points { column-gap: 24px; margin-top: 60px; }
  .point { padding-top: 20px; }
  .point__title { font-size: 24px; }
  .sellers__foot { margin-top: 52px; gap: 32px; }
  .sellers__print { max-width: 531px; }
  .sellers__foot .btn { flex: none; }
}
@media (min-width: 700px) and (max-width: 999.98px) {
  .sellers { padding: 64px var(--inset); }
  .sellers__title { margin-top: 18px; font-size: 56px; }
  .sellers__text { margin-top: 24px; max-width: 585px; font-size: 18px; }
  /* the three tickets are drawn in a 672px row and stay centred on the column */
  .tickets { height: 168px; margin-top: 32px; }
  .ticket { width: 250px; height: 104px; border-radius: 14px; box-shadow: 5px 5px 0 var(--ink); }
  .ticket__stub { width: 58px; }
  .ticket__stub svg { width: 28px; height: 58.8px; }
  .ticket__main { gap: 12px; padding: 0 20px; }
  .ticket__version { font-size: 32px; }
  .ticket__main svg { width: 123.2px; height: 7px; }
  .ticket--1 { left: calc(50% - 336px); top: 30px; transform: rotate(-6deg); }
  .ticket--2 { left: calc(50% - 128px); top: 50px; transform: rotate(-1deg); }
  .ticket--3 { left: calc(50% + 78px); top: 34px; transform: rotate(4deg); }
  .points { display: flex; flex-direction: column; margin-top: 40px; border-bottom: 2px solid var(--ink); }
  .point { display: grid; grid-template-columns: 237px minmax(0, 1fr); column-gap: 24px; align-items: baseline; padding: 20px 0 22px; }
  .point__title { font-size: 24px; }
  .point__desc { font-size: 17px; }
  .sellers__foot { margin-top: 36px; gap: 32px; }
  .sellers__print { max-width: 381px; }
  .sellers__foot .btn { flex: none; }
}
@media (max-width: 699.98px) {
  .sellers { padding: 48px var(--inset) 52px; }
  .sellers__title { margin-top: 14px; }
  .sellers__text { margin-top: 20px; max-width: none; font-size: 18px; line-height: 1.5; }
  .ticket { border-radius: 14px; box-shadow: 5px 5px 0 var(--ink); }
  .ticket__main { gap: 11px; padding: 0 18px; }
  .ticket__main svg { width: 116px; height: 7px; }
  .points { display: flex; flex-direction: column; gap: 24px; }
  .point { gap: 8px; padding-top: 16px; }
  .point__title { font-size: 22px; }
  .point__desc { font-size: 16px; }
  .sellers__foot { display: block; margin-top: 0; }
  .sellers__print { margin-top: 32px; max-width: none; }
  .sellers__foot .btn { display: flex; }
}
@media (min-width: 375px) and (max-width: 699.98px) {
  .sellers__title { font-size: 40px; }
  .tickets { width: 342px; max-width: 100%; height: 286px; margin: 30px auto 0; }
  .ticket { width: 236px; height: 98px; }
  .ticket__stub { width: 56px; }
  .ticket__stub svg { width: 28px; height: 59px; }
  .ticket__version { font-size: 31px; }
  .ticket--1 { left: 74px; top: 16px; transform: rotate(-8deg); }
  .ticket--2 { left: 22px; top: 96px; transform: rotate(-2deg); }
  .ticket--3 { left: 80px; top: 176px; transform: rotate(5deg); }
  .points { margin-top: 28px; }
  .sellers__cta { display: block; margin: 20px 4px 0 0; }
  .sellers__foot .btn { max-width: 420px; }
}
@media (max-width: 374.98px) {
  .sellers__title { font-size: 36px; }
  .sellers__text { margin-top: 18px; line-height: 1.55; }
  .tickets { height: 292px; margin-top: 32px; }
  .ticket { width: 232px; height: 96px; }
  .ticket__stub { width: 54px; }
  .ticket__stub svg { width: 26px; height: 55px; }
  .ticket__version { font-size: 30px; }
  .ticket--1 { left: 34px; top: 18px; transform: rotate(-8deg); }
  .ticket--2 { left: 8px; top: 96px; transform: rotate(-2deg); }
  .ticket--3 { left: 40px; top: 176px; transform: rotate(5deg); }
  .points { margin-top: 32px; }
  .sellers__cta { display: flex; margin-top: 20px; }
  .sellers__foot .btn { width: calc(100% - 4px); }
}

/* ---------------------------------------------------------------- #how */
.how {
  position: relative; padding: 120px var(--inset); background: var(--ultra); border-bottom: 2px solid var(--ink);
}
.how__decor { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.how__blob { position: absolute; overflow: visible; }
.how__inner { position: relative; }
.how__head { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; }
.how .eyebrow { color: var(--cream); }
.how .h2 { color: var(--cream); }
.how .h2 .accent { color: var(--pink); }
.steps { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 20px; margin: 64px 0 0; }
.step {
  display: flex; flex-direction: column; gap: 12px; box-sizing: border-box; padding: 24px 18px 30px;
  background: var(--cream); border: 2px solid var(--ink); border-radius: 20px; box-shadow: 5px 5px 0 var(--ultra-deep);
}
.step__text { display: contents; }
.step__num {
  font-family: var(--f-display); font-variation-settings: "opsz" 96, "wdth" 88; font-weight: 800; letter-spacing: -0.035em;
  font-size: 56px; line-height: 0.9; color: var(--ultra);
}
.step__title {
  margin: 6px 0 0; font-family: var(--f-display); font-variation-settings: "opsz" 96, "wdth" 88; font-weight: 700;
  letter-spacing: -0.02em; font-size: 22px; line-height: 1.15; color: var(--ink);
}
.step__desc { font-size: 18px; line-height: 1.5; color: var(--ink); }
.rule {
  margin-top: 56px; display: flex; box-sizing: border-box; border: 2px dashed var(--unknown); border-radius: 20px;
  background: var(--unknown-bg); box-shadow: 0 0 0 4px var(--cream); overflow: hidden;
}
.rule__rail { flex: none; width: 64px; display: flex; justify-content: center; padding-top: 32px; border-right: 1.5px dashed var(--unknown); }
.rule__rail svg { width: 28px; height: 28px; }
.rule__body {
  flex: 1 1 0%; min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "label pose" "statement pose" "voice pose"; column-gap: 40px; row-gap: 12px; align-items: center;
  padding: 30px 40px 32px 36px;
}
.rule__label { grid-area: label; font: 700 14px/1.3 var(--f-body); letter-spacing: 0.14em; text-transform: uppercase; color: var(--unknown); }
.rule__statement {
  grid-area: statement; font-family: var(--f-display); font-variation-settings: "opsz" 96, "wdth" 88; font-weight: 700;
  letter-spacing: -0.02em; font-size: 32px; line-height: 1.18; color: var(--unknown);
}
.rule__voice { grid-area: voice; font-size: 18px; line-height: 1.55; color: var(--ink); }
.rule__pose { grid-area: pose; }
.rule__pose svg { width: 96px; height: 96px; overflow: visible; }

@media (min-width: 1320px) {
  .how__blob { left: calc(100% - var(--inset) - 188px); top: -62px; width: 200px; height: 200px; }
}
@media (min-width: 1000px) and (max-width: 1319.98px) {
  .how { padding: 96px var(--inset) 104px; }
  .how__blob { left: calc(100% - var(--inset) - 146px); top: -52px; width: 164px; height: 164px; }
  .how__head { gap: 16px; }
  .steps { display: flex; flex-direction: column; gap: 16px; margin-top: 52px; }
  .step { display: grid; grid-template-columns: 44px 200px minmax(0, 1fr); column-gap: 24px; align-items: baseline; padding: 20px 28px 22px 24px; }
  .step__num { font-size: 48px; }
  .step__title { margin: 0; }
  .rule { margin-top: 40px; }
  .rule__rail { padding-top: 30px; }
  .rule__body { column-gap: 32px; padding: 28px 36px 30px 26.5px; }
  .rule__statement { font-size: 28px; }
}
@media (min-width: 700px) and (max-width: 999.98px) {
  .how { padding: 64px var(--inset); }
  .how__blob { left: calc(100% - var(--inset) - 80px); top: -46px; width: 150px; height: 150px; }
  .how__head { gap: 16px; }
  .steps { display: flex; flex-direction: column; gap: 16px; margin-top: 40px; }
  .step {
    display: grid; grid-template-columns: 48px 212px minmax(0, 1fr); column-gap: 20px; align-items: center;
    min-height: 92px; padding: 18px 24px 20px;
  }
  .step__num { font-size: 52px; }
  .step__title { margin: 0; }
  .step__desc { font-size: 17px; }
  .rule { margin-top: 40px; }
  .rule__rail { width: 56px; padding-top: 28px; }
  .rule__body { column-gap: 24px; padding: 26px 28px 28px; }
  .rule__statement { font-size: 26px; line-height: 1.2; }
  .rule__voice { font-size: 17px; }
}
@media (max-width: 699.98px) {
  .how { padding: 48px var(--inset) 52px; }
  .how__head { gap: 14px; }
  .steps { display: flex; flex-direction: column; }
  .step__num { font-size: 44px; }
  .step__title { margin: 0; }
  .step__desc { font-size: 16px; }
  .rule__statement { font-size: 22px; line-height: 1.2; }
  .rule__voice { font-size: 16px; }
}
@media (min-width: 375px) and (max-width: 699.98px) {
  .how__blob { left: calc(100% - var(--inset) - 66px); top: -44px; width: 112px; height: 112px; }
  .steps { gap: 14px; margin-top: 28px; }
  .step { display: grid; grid-template-columns: 40px 1fr; column-gap: 14px; align-items: start; padding: 18px 18px 20px; }
  .step__text { display: flex; flex-direction: column; gap: 6px; min-width: 0; padding-top: 3px; }
  .rule { margin-top: 36px; }
  .rule__rail { width: 40px; padding-top: 22px; }
  .rule__rail svg { width: 24px; height: 24px; }
  .rule__body {
    grid-template-areas: "label label" "statement statement" "voice pose"; column-gap: 12px; align-items: end;
    padding: 20px 18px 18px;
  }
  .rule__label, .rule__statement { align-self: start; }
  .rule__voice { line-height: 1.5; }
  .rule__pose svg { width: 72px; height: 72px; }
}
@media (max-width: 374.98px) {
  .how__blob { left: calc(100% - var(--inset) - 66px); top: -40px; width: 110px; height: 110px; }
  .steps { gap: 16px; margin-top: 32px; }
  .step { width: calc(100% - 5px); display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 8px 12px; align-items: center; padding: 18px 18px 20px; }
  .step__title { min-width: 0; }
  .step__desc { grid-column: 1 / -1; }
  .rule { display: block; margin: 40px 4px 0; }
  .rule__rail { width: auto; display: flex; justify-content: flex-start; align-items: center; height: 48px; padding: 0 16px; border-right: 0; border-bottom: 1.5px dashed var(--unknown); }
  .rule__body {
    grid-template-areas: "label pose" "statement statement" "voice voice"; column-gap: 12px; align-items: start;
    padding: 16px 18px 22px;
  }
  .rule__label { align-self: end; margin-bottom: 4px; }
  .rule__pose { align-self: end; justify-self: end; }
  .rule__pose svg { width: 80px; height: 80px; }
}

/* ---------------------------------------------------------------- #facts */
.facts { padding: 120px var(--inset) 112px; }
.fact-list { border-top: 2px solid var(--ink); border-bottom: 2px solid var(--ink); }
.fact { display: flex; flex-direction: column; gap: 6px; padding: 20px 0 22px; border-bottom: 1.5px solid var(--muted); }
.fact:last-child { border-bottom: 0; }
.fact__term {
  display: flex; align-items: center; gap: 16px; font-family: var(--f-display); font-variation-settings: "opsz" 96, "wdth" 88;
  font-weight: 700; letter-spacing: -0.02em; font-size: 24px; line-height: 1.2; color: var(--ink);
}
.fact__desc { padding-left: 44px; font-size: 18px; line-height: 1.55; color: var(--ink); }
.receipt {
  position: relative; box-sizing: border-box; background: var(--paper); border: 1.5px solid var(--muted); border-radius: 16px;
}
.receipt__caption { padding: 30px 28px 20px; font-size: 16px; line-height: 1.5; color: var(--muted); }
.receipt__list { border-top: 1.5px solid var(--muted); }
.receipt__row {
  display: grid; grid-template-columns: 84px 1fr; column-gap: 16px; align-items: center; padding: 16px 28px;
  border-bottom: 1.5px solid var(--muted);
}
.receipt__key { font-family: var(--f-body); font-weight: 600; font-size: 14px; color: var(--ink); }
.receipt__val { display: grid; grid-template-columns: 152px 1fr; column-gap: 18px; align-items: center; min-width: 0; }
.receipt__lit { display: flex; }
.literal {
  display: inline-flex; align-items: center; gap: 6px; min-height: 28px; padding: 0 8px; border-radius: 0;
  border: 1.5px solid var(--muted); background: transparent; color: var(--ink); font-size: 14px; font-weight: 600;
}
.literal--hold { border-color: var(--hold); background: var(--hold-bg); color: var(--hold); }
.literal svg { width: 14px; height: 14px; }
.receipt__text { font-size: 16px; line-height: 1.5; color: var(--ink); }
.receipt__observed { padding: 16px 28px 18px; font-size: 14px; line-height: 1.5; color: var(--muted); }
.receipt__tape { position: absolute; top: -13px; right: 24px; }

@media (min-width: 1000px) {
  .facts__body { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; }
  .fact-list { display: flex; flex-direction: column; }
  .fact { flex: 1 1 auto; }
  .receipt { display: flex; flex-direction: column; }
  .receipt__list { flex: 1 1 auto; display: flex; flex-direction: column; }
  .receipt__row { flex: 1 1 auto; }
}
@media (min-width: 1320px) {
  .facts__body { margin-top: 64px; column-gap: 28px; }
}
@media (min-width: 1000px) and (max-width: 1319.98px) {
  .facts { padding: 104px var(--inset) 96px; }
  .facts__body { margin-top: 52px; column-gap: 24px; }
  .fact__term { font-size: 22px; }
  .receipt__caption { padding: 30px 24px 20px; }
  .receipt__row { grid-template-columns: 84px minmax(0, 1fr); align-items: baseline; padding: 16px 24px 18px; }
  .receipt__val { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
  .receipt__observed { padding: 16px 24px 18px; }
}
@media (min-width: 700px) and (max-width: 999.98px) {
  .facts { padding: 64px var(--inset); }
  .fact-list { margin-top: 40px; }
  .fact { display: grid; grid-template-columns: 260px minmax(0, 1fr); column-gap: 24px; align-items: start; padding: 18px 0 20px; }
  .fact__term { gap: 14px; font-size: 22px; }
  .fact__desc { padding: 1px 0 0; font-size: 17px; }
  .receipt { margin-top: 52px; }
  .receipt__row { grid-template-columns: 84px minmax(0, 1fr); }
  .receipt__val { grid-template-columns: 152px minmax(0, 1fr); }
}
@media (max-width: 699.98px) {
  .fact { padding: 16px 0 18px; }
  .fact__term { gap: 14px; font-size: 22px; }
  .fact__desc { padding-left: 42px; font-size: 16px; }
  .receipt { margin-top: 44px; }
  .receipt__caption { padding: 28px 16px 16px; }
  .receipt__row { column-gap: 12px; align-items: start; padding: 14px 16px; }
  .receipt__key { line-height: 28px; }
  .receipt__val { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
  .receipt__observed { padding: 14px 16px 16px; white-space: pre-line; }
  .receipt__tape { right: 16px; }
}
@media (min-width: 375px) and (max-width: 699.98px) {
  .facts { padding: 52px var(--inset) 48px; }
  .fact-list { margin-top: 28px; }
  .receipt__row { grid-template-columns: 70px 1fr; }
  .receipt__text { line-height: 1.45; }
}
@media (min-width: 375px) and (max-width: 479.98px) {
  /* the 390 board sets the "·" 8px after the time (a flex gap, not an 8.4px space): a tab stop puts it there
     without splitting the text node. max-width is a line-break device: the drawn line (tab stop + "·", 34ch) fits,
     but when wider text (text spacing) pushes the tab past its stop, the line breaks after "Observed" instead of
     hanging the tab past the edge and leaving the "·" on a line of its own */
  .receipt__observed { max-width: 35ch; white-space: pre-wrap; tab-size: 276.8125px; }
}
@media (max-width: 374.98px) {
  .facts { padding: 48px var(--inset); }
  .fact-list { margin-top: 32px; }
  .receipt__row { grid-template-columns: 72px minmax(0, 1fr); }
  /* the 320 board's three lines ("Observed" / date, time and "·" / evidence) at every width of the band: at 32ch
     "Observed" would share the first line and the "·" would drop onto a line of its own (340–360px) */
  .receipt__observed { max-width: 31.5ch; }
}

/* ---------------------------------------------------------------- #pulse */
.pulse { padding: 0 var(--inset); }
.pulse__panel {
  box-sizing: border-box; display: grid; grid-template-columns: minmax(0, 471fr) minmax(0, 689fr); column-gap: 28px;
  align-items: center; padding: 52px 56px 56px; background: var(--ink); border: 2px solid var(--ink); border-radius: 20px;
  position: relative; overflow: hidden;
}
.pulse__head { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.pulse__title { color: var(--cream); }
.pulse__text { max-width: 600px; font-size: 20px; line-height: 1.55; color: var(--cream); }

@media (min-width: 1000px) and (max-width: 1319.98px) {
  .pulse__panel { grid-template-columns: 247px minmax(0, 1fr); column-gap: 24px; padding: 44px 44px 48px; }
  .pulse__text { max-width: none; font-size: 19px; }
}
@media (min-width: 700px) and (max-width: 999.98px) {
  .pulse__panel { grid-template-columns: 190px minmax(0, 1fr); column-gap: 28px; padding: 40px 40px 44px; }
  .pulse__head { gap: 14px; }
  .pulse__text { max-width: none; font-size: 18px; }
}
@media (max-width: 699.98px) {
  .pulse__panel { display: flex; flex-direction: column; align-items: flex-start; }
  .pulse__head { display: contents; }
  .pulse__text { max-width: none; font-size: 18px; }
}
@media (min-width: 375px) and (max-width: 699.98px) {
  .pulse__panel { position: static; overflow: visible; gap: 14px; padding: 28px 22px 30px; }
  .pulse__title { font-size: 36px; }
  .pulse__text { margin-top: 2px; line-height: 1.5; }
}
@media (max-width: 374.98px) {
  .pulse__panel { padding: 32px 22px 34px; }
  .pulse__title { margin-top: 14px; }
  .pulse__text { margin-top: 14px; }
}

/* ---------------------------------------------------------------- #agents */
.agents { padding: 120px var(--inset); }
.agents__block { box-sizing: border-box; background: var(--paper); border: 1.5px solid var(--muted); border-radius: 16px; overflow: hidden; }
.agents__status {
  padding: 24px 28px 22px; font-size: 16px; font-weight: 600; line-height: 1.7; color: var(--ink);
  border-bottom: 1.5px solid var(--muted); overflow-wrap: anywhere;
}
.agents__status > span { display: block; }
.agents__text { padding: 22px 28px 28px; font-size: 16px; line-height: 1.75; color: var(--ink); overflow-wrap: anywhere; }

@media (min-width: 1320px) {
  .agents__grid { display: grid; grid-template-columns: minmax(0, 416fr) minmax(0, 860fr); column-gap: 28px; align-items: start; }
}
@media (min-width: 1000px) and (max-width: 1319.98px) {
  .agents { padding: 96px var(--inset); }
  .agents__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; align-items: start; }
  .agents__title { grid-column: span 4; }
  .agents__block { grid-column: span 8; }
}
@media (min-width: 700px) and (max-width: 999.98px) {
  .agents { padding: 64px var(--inset); }
  .agents__block { margin-top: 28px; }
  .agents__status { padding: 22px 24px 20px; }
  .agents__text { padding: 20px 24px 26px; }
}
@media (min-width: 375px) and (max-width: 699.98px) {
  .agents { padding: 52px var(--inset) 48px; }
  .agents__block { margin-top: 20px; }
  .agents__status { padding: 16px 16px 14px; }
  .agents__status > span { padding-left: 2ch; text-indent: -2ch; }
  .agents__text { padding: 14px 16px 20px; line-height: 1.7; }
}
@media (max-width: 374.98px) {
  .agents { padding: 48px var(--inset); }
  .agents__block { margin-top: 20px; }
  .agents__status { padding: 18px 16px 16px; line-height: 1.6; }
  .agents__text { padding: 16px 16px 20px; line-height: 1.7; }
}

/* ---------------------------------------------------------------- #legacy */
.legacy { padding: 56px var(--inset) 64px; border-top: 2px solid var(--ink); }
.legacy__row { display: flex; align-items: flex-end; justify-content: space-between; gap: 40px; }
.legacy__text { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.legacy__title {
  margin: 4px 0 0; font-family: var(--f-display); font-variation-settings: "opsz" 96, "wdth" 88; font-weight: 700;
  letter-spacing: -0.02em; font-size: 36px; line-height: 1.1; color: var(--ink);
}
.legacy__desc { max-width: 749px; font-size: 18px; line-height: 1.55; color: var(--ink); }
.legacy__link { flex: none; display: inline-flex; align-items: center; gap: 10px; min-height: 44px; font: 700 18px/1.3 var(--f-body); color: var(--ultra); }

@media (min-width: 1000px) and (max-width: 1319.98px) {
  .legacy { padding: 52px var(--inset) 60px; }
  .legacy__row { gap: 32px; }
  .legacy__text { min-width: 0; }
  .legacy__title { font-size: 32px; }
  .legacy__desc { max-width: 611px; }
}
@media (min-width: 700px) and (max-width: 999.98px) {
  .legacy { padding: 48px var(--inset) 56px; }
  .legacy__row { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
  .legacy__text { display: contents; }
  .legacy__title { font-size: 32px; }
  .legacy__desc { max-width: 585px; font-size: 17px; }
  .legacy__link { margin-top: 2px; }
}
@media (max-width: 699.98px) {
  .legacy__row { flex-direction: column; align-items: flex-start; gap: 12px; }
  .legacy__text { display: contents; }
  .legacy__title { max-width: 8em; } /* two lines, after "your", as on the 390 and 320 boards */
  .legacy__desc { max-width: none; font-size: 16px; }
  .legacy__link { font-size: 17px; }
}
@media (min-width: 375px) and (max-width: 699.98px) {
  .legacy { padding: 32px var(--inset) 36px; }
  .legacy__title { font-size: 26px; line-height: 1.12; }
}
@media (max-width: 374.98px) {
  .legacy { padding: 40px var(--inset) 44px; }
  .legacy__title { font-size: 24px; line-height: 1.15; }
}

/* ---------------------------------------------------------------- footer */
.site-footer {
  display: flex; flex-direction: column; box-sizing: border-box; padding: 80px var(--inset) 44px; background: var(--ink);
}
.site-footer__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 40px; margin-bottom: 72px; }
.site-footer__brand { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.site-footer__logo { width: 241.33px; height: 56px; }
.site-footer__byline { padding-left: 50.4px; font: 600 14px/1.2 var(--f-body); color: var(--cream); }
.site-footer__list { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 36px; }
.site-footer__link {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px;
  font: 600 16px/1.2 var(--f-body); color: var(--cream); text-decoration: none;
}
.site-footer__bottom {
  margin-top: auto; padding-top: 22px; border-top: 1.5px solid var(--muted); display: flex; align-items: center; gap: 12px;
  font-size: 14px; line-height: 1.4; color: var(--cream);
}

@media (min-width: 1000px) and (max-width: 1319.98px) {
  .site-footer { padding: 72px var(--inset) 40px; }
  .site-footer__top { gap: 32px; margin-bottom: 64px; }
  .site-footer__logo { width: 224.1px; height: 52px; }
  .site-footer__byline { padding-left: 46.8px; }
  .site-footer__list { gap: 4px 28px; justify-content: flex-end; }
}
@media (min-width: 700px) and (max-width: 999.98px) {
  .site-footer { padding: 56px var(--inset) 40px; }
  .site-footer__top { flex-direction: column; justify-content: flex-start; gap: 28px; margin-bottom: 48px; }
  .site-footer__list { gap: 4px 32px; }
  .site-footer__bottom { padding-top: 20px; }
}
@media (max-width: 699.98px) {
  .site-footer__top { display: contents; }
  .site-footer__nav { margin: 28px 0 40px; }
  .site-footer__bottom { flex-wrap: wrap; gap: 4px 12px; padding-top: 18px; }
}
@media (min-width: 375px) and (max-width: 699.98px) {
  .site-footer { padding: 44px var(--inset) 28px; }
  .site-footer__list { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 24px; }
}
@media (max-width: 374.98px) {
  .site-footer { padding: 48px var(--inset) 28px; }
  .site-footer__list { gap: 0 28px; }
}

/* ---------------------------------------------------------------- S band, 480–699: the 390 board's forced line breaks are
   only drawn for phone widths; wider than 480px the headings and the status line run on as they do at 768 */
@media (min-width: 600px) and (max-width: 699.98px) {
  .hero__inner { padding-top: 128px; }
}
@media (min-width: 480px) and (max-width: 699.98px) {
  .h2 .line, .hero__status-text { white-space: normal; }
  .legacy__title { max-width: none; }
  .examples__title { max-width: 9.4em; }
  .site-footer__list { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 32px; }
}

/* ---------------------------------------------------------------- phone and phablet display type: fluid from the
   320 board to the 390 board, then growing towards the 768 sizes (exact at 320 and 390) */
@media (max-width: 374.98px) {
  .hero__title { font-size: calc(34px + (100vw - 320px) * 8 / 70); }
  .sellers__title { font-size: calc(36px + (100vw - 320px) * 4 / 70); }
  .legacy__title { font-size: calc(24px + (100vw - 320px) * 2 / 70); }
}
@media (min-width: 375px) and (max-width: 699.98px) {
  .hero__title { font-size: calc(42px + (100vw - 390px) * 14 / 309); }
  .h2 { font-size: calc(32px + (100vw - 390px) * 8 / 309); }
  .pulse__title { font-size: calc(36px + (100vw - 390px) * 8 / 309); }
  .sellers__title { font-size: calc(40px + (100vw - 390px) * 10 / 309); }
  .legacy__title { font-size: calc(26px + (100vw - 390px) * 4 / 309); }
}

/* ---------------------------------------------------------------- motion: hover lift ≤ 2px, 160ms; none when reduced */
.btn, .copy-btn, .site-menu__cta { transition: transform 160ms var(--ease); }
@media (hover: hover) {
  .btn:hover, .copy-btn:hover { transform: translateY(-2px); }
  a.site-nav__link:hover, a.site-menu__link:not(.site-menu__cta):hover { color: var(--ultra); }
  .site-menu__cta:hover { transform: translateY(-2px); }
  .legacy__link:hover { color: var(--ink); }
  a.site-footer__link:hover { color: #FFFFFF; }
}
@media (prefers-reduced-motion: reduce) {
  .btn, .copy-btn, .site-menu__cta, .menu-toggle { transition: none; }
  .btn:hover, .copy-btn:hover, .site-menu__cta:hover { transform: none; }
  .site-menu:not([hidden]) { animation: none; }
}

/* Open compact menu at the 600–999 header size: same item and button positions as the discovery and legacy pages
   (CMP-01): the first header row is 4px shorter here, so the panel starts 4px lower and ends 4px sooner. */
@media (min-width: 600px) and (max-width: 999px) {
  .site-menu:not([hidden]) { margin-top: 14px; padding-bottom: 4px; }
}