/* Corpus site: brand direction A ("Signal"). One stylesheet, no inline styles (CSP style-src 'self').
   Mobile first: the base rules are the 360px layout; min-width queries add columns. */

@font-face {
  font-family: "Inter";
  src: url("/fonts/InterVariable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --ink: #0E1A2B;
  --paper: #F6F5F1;
  --white: #FFFFFF;
  --teal: #0B6E70;
  --teal-mark: #0F8B8D;
  --pulse: #3FC1C3;
  --amber: #E8A33D;
  --amber-edge: #B57A22;
  --text-2: #3A4556;
  --muted: #4A5566;
  --faint: #6B7480;
  --line: #E3E0D6;
  --line-soft: #ECE9E1;
  --line-card: #E6E3DA;
  --line-faq: #DAD6CB;
  --tint: #E2EFEF;
  --tag-bg: #F0EEE7;
  --footer-bg: #EEECE5;
  --dark-card: #16243A;
  --dark-line: #24344D;
  --on-dark-2: #C9CFD8;
  --radius-s: 12px;
  --radius: 18px;
  --radius-l: 20px;
  --gutter: clamp(16px, 4vw, 32px);
  --section: clamp(56px, 9vw, 104px);
  --font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --shadow-card: 0 0 0 1px var(--line);
  --shadow-figure: 0 0 0 1px var(--line-card), 0 28px 56px -28px rgba(14, 26, 43, 0.22);
}

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: 88px; /* the sticky header (at most 72px) never covers a focused or anchored element */
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.55;
  font-optical-sizing: auto;
  overflow-wrap: break-word;
}

h1, h2, h3, p, ul, ol, dl, dd, figure, blockquote { margin: 0; }
ul, ol { padding: 0; }
img, svg { max-width: 100%; }

a { color: var(--teal); text-underline-offset: 3px; }
a:hover { color: var(--ink); }

:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px var(--paper);
  border-radius: 4px;
}
.section-dark :focus-visible, .cta-box :focus-visible, .card-ink :focus-visible {
  outline-color: var(--pulse);
  box-shadow: none;
}

.skip {
  position: absolute;
  left: 8px;
  top: -100px;
  z-index: 10;
  padding: 12px 16px;
  background: var(--ink);
  color: var(--paper);
  border-radius: 8px;
  font-weight: 600;
}
.skip:focus { top: 8px; }

.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

mark { background: #FFE58A; color: var(--ink); padding: 0 2px; border-radius: 2px; }

/* ------------------------------------------------------------------ type */

.display, .h2, .h3, .brand-word, .eyebrow, .kicker, .step-num, .faq dt, .quote, .q {
  font-family: var(--font);
  font-variation-settings: "opsz" 32;
}
.display {
  font-size: clamp(36px, 4.8vw + 12px, 64px);
  line-height: 1.06;
  font-weight: 700;
  letter-spacing: -0.03em;
  text-wrap: balance;
}
.display-doc { font-size: clamp(32px, 3vw + 16px, 48px); }
.h2 {
  font-size: clamp(28px, 2.4vw + 16px, 40px);
  line-height: 1.12;
  font-weight: 600;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
.h2-sm { font-size: clamp(26px, 1.6vw + 18px, 34px); }
.h2-xl { font-size: clamp(30px, 2.8vw + 16px, 44px); }
.h3 { font-size: 20px; line-height: 1.25; font-weight: 600; letter-spacing: -0.01em; }
.h3-lg { font-size: 22px; }
.h3-xl { font-size: 26px; letter-spacing: -0.02em; }
.eyebrow, .kicker {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}
.kicker { font-size: 13px; letter-spacing: 0.1em; }
/* hinting at 13px/600 opened a gap inside letter-spaced words in Chromium on Linux ("HEALT H") */
.eyebrow, .kicker, .tag { text-rendering: geometricPrecision; }
.kicker-icon { display: inline-flex; align-items: center; gap: 8px; }
.lede { font-size: clamp(18px, 0.6vw + 15px, 20px); color: var(--text-2); max-width: 36em; }
.lede-dark { font-size: 18px; color: var(--on-dark-2); max-width: 38em; }
.muted { font-size: 16px; color: var(--muted); max-width: 30em; }
.muted-text { font-size: 16px; color: var(--text-2); }
.fine { font-size: 14px; color: var(--muted); }
.fine-dark { font-size: 14px; color: var(--on-dark-2); }
.measure { max-width: 760px; }
.measure-wide { max-width: 860px; }
.center { text-align: center; align-items: center; }
.pre { white-space: pre-line; }

/* ------------------------------------------------------------------ layout */

.wrap { max-width: 1200px; margin: 0 auto; padding: 0 var(--gutter); }
.stack, .stack-sm, .stack-xs, .stack-lg { display: flex; flex-direction: column; }
.stack { gap: 20px; }
.stack-sm { gap: 12px; }
.stack-xs { gap: 4px; }
.stack-lg { gap: clamp(28px, 3vw, 40px); }

.section { padding: var(--section) 0; }
.section-flush-top { padding-top: 0; }
.section-flush-bottom { padding-bottom: 0; }
.section-tight-top { padding-top: 8px; }
.section-white { background: var(--white); border-top: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft); }
.section-dark { background: var(--ink); color: var(--paper); }
.section-dark .eyebrow, .section-dark .kicker { color: var(--on-dark-2); }
.section-dark .text-link, .section-dark a { color: var(--pulse); }
.section-dark .step-num { background: var(--pulse); color: var(--ink); }

.hero { padding-top: clamp(48px, 7vw, 88px); padding-bottom: clamp(48px, 7vw, 88px); }
.hero-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 440px), 1fr));
  gap: clamp(40px, 5vw, 64px);
  align-items: center;
}
.hero-narrow { padding-bottom: clamp(40px, 5vw, 64px); }

/* home: the hero, the audience chooser, then the assistant example (HomeMobile); from 1000px
   the example sits beside the hero again */
.home-top { display: grid; grid-template-columns: minmax(0, 1fr); column-gap: clamp(40px, 5vw, 64px); }
.home-aud { padding: 8px 0 48px; }
.home-example { margin-bottom: var(--section); }
@media (min-width: 1000px) {
  .home-top { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-areas: "hero example" "aud aud"; }
  .home-hero { grid-area: hero; }
  .home-example { grid-area: example; align-self: center; margin-bottom: 0; }
  .home-aud { grid-area: aud; padding-bottom: var(--section); }
}

.two-col { display: flex; flex-wrap: wrap; gap: 40px 64px; align-items: flex-start; }
.col-narrow { flex: 1 1 min(100%, 340px); min-width: 0; }
.col-wide { flex: 2 1 min(100%, 480px); min-width: 0; }

.split-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 12px 16px; }

.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.center .actions { justify-content: center; }
.link-row { display: flex; flex-wrap: wrap; gap: 4px 24px; }

/* ------------------------------------------------------------------ buttons and links */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 10px 26px;
  border-radius: 999px;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
}
.btn-sm { min-height: 44px; padding: 8px 18px; font-size: 15px; }
.btn-primary { background: var(--teal); color: var(--white); }
.btn-primary:hover { background: #095B5D; color: var(--white); }
.btn-secondary { box-shadow: inset 0 0 0 1.5px var(--ink); color: var(--ink); background: transparent; }
.btn-secondary:hover { background: var(--ink); color: var(--paper); }
.btn-on-dark { background: var(--paper); color: var(--ink); }
.btn-on-dark:hover { background: var(--white); color: var(--ink); }
.btn-ghost-dark { box-shadow: inset 0 0 0 1.5px var(--paper); color: var(--paper); }
.btn-ghost-dark:hover { background: var(--paper); color: var(--ink); }
.push { margin-top: auto; align-self: flex-start; }

.text-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  align-self: flex-start;
  min-height: 44px;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 4px;
}
.cross { margin-top: 32px; font-size: 16px; color: var(--text-2); }

/* ------------------------------------------------------------------ tags and pills */

.tag {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--tag-bg);
  color: var(--text-2);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0;
  text-transform: none;
  white-space: nowrap;
  vertical-align: middle;
}
.tag-beta { background: var(--amber); color: var(--ink); }
.tag-soon { background: var(--amber); color: var(--ink); white-space: normal; }
.tag-real { background: var(--tint); color: var(--teal); }
.tag-dark { background: var(--dark-line); color: var(--paper); }

.pills { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; }
.pills li { padding: 6px 12px; border-radius: 999px; background: var(--tint); color: var(--teal); font-size: 14px; font-weight: 600; }
.pills-plain li { background: var(--white); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line); }
.works-with { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }

.beta-line {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
  font-size: 15px;
  color: var(--text-2);
}
.beta-line strong { font-weight: 600; color: var(--ink); }
.dot {
  flex: none;
  margin-top: 7px;
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: var(--amber);
  box-shadow: 0 0 0 1px var(--amber-edge);
}
.request-note { max-width: 36em; }

/* ------------------------------------------------------------------ header */

/* Sticky (ux.md 6.1), on the page colour so content never shows through, and at most 72px tall
   on any phone: the brand word, the long CTA label and the secondary button drop out first. */
.site-header { position: sticky; top: 0; z-index: 5; background: var(--paper); border-bottom: 1px solid var(--line); }
.header-bar {
  position: relative;
  flex-wrap: wrap;
  min-height: 64px;
  padding-top: 10px;
  padding-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 8px 12px;
}
.brand-group { display: flex; align-items: center; gap: 12px; min-width: 0; }
.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  min-width: 44px;
  color: var(--ink);
  text-decoration: none;
}
.brand:hover { color: var(--ink); }
.brand-mark { flex: none; }
.brand-word { font-size: 23px; font-weight: 600; letter-spacing: -0.02em; }
.site-header .tag-beta { display: none; align-self: center; }

.nav-desktop { display: none; }
.nav-list { list-style: none; display: flex; flex-wrap: wrap; align-items: center; }
.nav-list a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 10px;
  color: var(--ink);
  font-size: 15px;
  font-weight: 500;
  text-decoration: none;
}
.nav-list a:hover { text-decoration: underline; text-underline-offset: 6px; }
.nav-list a[aria-current="page"] { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px; }
.nav-list .nav-quiet { color: var(--muted); }
.nav-list .nav-desc { display: none; }
.nav-sep { width: 1px; height: 20px; background: #D9D6CC; margin: 0 6px; }

.header-actions { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.header-actions > .btn-secondary, .header-actions > .signin { display: none; }
.header-actions > .btn-sm { padding: 8px 14px; font-size: 14px; white-space: nowrap; }
.cta-short { display: none; }
.signin { display: inline-flex; align-items: center; min-height: 44px; padding: 0 8px; color: var(--ink); font-size: 15px; font-weight: 500; text-decoration: none; }

/* The mobile menu: a native <details> disclosure that needs no script. Below
   1080px .header-actions is display: contents, so the open <details> becomes a full-width
   second row of the header bar: the panel sits in the header, in flow, under the bar. The
   summary is pinned to the bar's right edge (the bar keeps room for it), so it does not move
   when the menu opens. While the menu is open the page behind it is visibility: hidden, which
   takes it out of the tab order: focus can never land on something the panel covers (WCAG
   2.4.11). static/menu.js only adds closing (Escape, tap outside, a link) via details.open. */
.menu-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border-radius: 12px;
  background: var(--white);
  box-shadow: inset 0 0 0 1px #D9D6CC;
  color: var(--ink);
  cursor: pointer;
  list-style: none;
}
.menu-button > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.menu-button::-webkit-details-marker { display: none; }
.menu-button::marker { content: ""; }
.menu[open] .menu-button { background: var(--ink); color: var(--paper); box-shadow: none; }
/* a closed panel takes no room: a long word in it once widened the page */
.menu:not([open]) > .menu-panel { display: none; }
.menu-panel {
  max-height: calc(100vh - 72px);
  max-height: calc(100dvh - 72px);
  overflow-y: auto;
  overscroll-behavior: contain;
  margin: 2px calc(-1 * var(--gutter)) -10px;
  padding: 8px var(--gutter) 24px;
  border-top: 1px solid var(--line);
  background: var(--paper);
}
.menu-list { list-style: none; }
.menu-list a {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 56px;
  padding: 8px 0;
  border-bottom: 1px solid var(--line);
  color: var(--ink);
  text-decoration: none;
}
.menu-list .nav-name { font-size: 18px; font-weight: 600; }
.menu-list .nav-desc { font-size: 14px; color: var(--muted); }
.menu-list a[aria-current="page"] .nav-name { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 5px; }
.menu-list .nav-sep { display: none; }
.menu-ctas { display: flex; flex-direction: column; gap: 10px; padding: 20px 0 8px; }
.menu-ctas .btn { width: 100%; }
.menu-extra { list-style: none; display: flex; flex-wrap: wrap; gap: 0 20px; }
.menu-extra a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; }

.lang { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: 14px; color: var(--muted); }
.lang-sep { color: var(--faint); }
.lang [aria-current] { color: var(--ink); font-weight: 600; }

@media (max-width: 1079px) {
  .header-bar { padding-right: calc(var(--gutter) + 52px); }
  .brand-group { margin-right: auto; }
  .header-actions { display: contents; }
  .menu-button { position: absolute; top: 10px; right: var(--gutter); }
  .menu[open] { order: 10; flex: 0 0 calc(100% + 52px); margin-right: -52px; }
  body:has(.menu[open]) > main, body:has(.menu[open]) > .site-footer { visibility: hidden; }
  /* iOS fires the click menu.js closes on only over a pointer cursor: the page behind, not the panel. */
  body:has(.menu[open]) { cursor: pointer; -webkit-tap-highlight-color: transparent; }
  .menu-panel { cursor: auto; }
}
@media (max-width: 419px) {
  .header-bar { column-gap: 8px; }
  .site-header .brand-word { font-size: 21px; }
  .header-actions > .btn .cta-long { display: none; }
  .header-actions > .btn .cta-short { display: inline; }
}
@media (max-width: 359px) {
  .site-header .brand-word { display: none; }
}
@media (min-width: 480px) {
  .site-header .tag-beta { display: inline-flex; }
}
@media (min-width: 860px) {
  .header-actions > .btn-secondary { display: inline-flex; }
}
@media (min-width: 1080px) {
  .header-bar { min-height: 72px; flex-wrap: wrap; gap: 12px 16px; }
  .nav-desktop { display: block; flex: 1 1 auto; }
  .menu { display: none; }
  .header-actions > .signin { display: inline-flex; }
}
/* the full desktop row needs about 1200px: below that the beta tag gives way, so it stays one row */
@media (min-width: 1080px) and (max-width: 1199px) {
  .site-header .tag-beta { display: none; }
}

/* ------------------------------------------------------------------ cards */

.cards {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: 20px;
}
.cards-2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); }
.cards-plain { gap: 28px 40px; }
@media (min-width: 1120px) {
  .cards-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.card {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: clamp(22px, 3vw, 32px);
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
}
.card-tall { min-height: 300px; }
.card-paper { background: var(--paper); box-shadow: none; }
.card-line { background: transparent; box-shadow: none; padding: 20px 0 0; border-top: 2px solid var(--ink); border-radius: 0; }
.card-ink { background: var(--ink); color: var(--paper); box-shadow: none; }
.card-ink p { color: var(--on-dark-2); }
.card-mini { padding: 20px; gap: 12px; border-radius: 16px; }
.mini-cards { margin-top: 20px; }
.icon-tile {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-s);
  background: var(--tint);
}
.card-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  color: var(--ink);
  text-decoration: none;
}
.card-link:hover { color: var(--teal); text-decoration: underline; text-underline-offset: 5px; }
.card-link .arrow { flex: none; }
/* a long single word (a Spanish compound) breaks rather than widening the card: break-word
   alone does not lower an inline-flex item's minimum width */
.card-link { overflow-wrap: anywhere; }
.path-card { gap: 16px; }

.dark-cards { list-style: none; display: grid; gap: 16px; }
.dark-cards-row { grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
.dark-cards li {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 28px;
  border-radius: 16px;
  background: var(--dark-card);
  box-shadow: inset 0 0 0 1px var(--dark-line);
}
.dark-cards p { font-size: 16px; color: var(--on-dark-2); }

.icon-list { list-style: none; display: flex; flex-direction: column; gap: 14px; }
.icon-list li { display: flex; gap: 14px; align-items: flex-start; font-size: 17px; }
.icon-list svg { flex: none; margin-top: 2px; }
.icon-list-sm li { font-size: 16px; gap: 10px; }
.dot-list { list-style: none; display: flex; flex-direction: column; gap: 8px; }
.dot-list li { position: relative; padding-left: 18px; font-size: 16px; }
.dot-list li::before { content: ""; position: absolute; left: 0; top: 10px; width: 8px; height: 8px; border-radius: 999px; background: var(--teal); }

.note-box {
  padding: 16px 18px;
  border-radius: 14px;
  background: var(--tint);
  font-size: 16px;
  color: var(--ink);
}
.section-dark .note-box { background: var(--dark-card); color: var(--paper); }

.step-num {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 999px;
  background: var(--ink);
  color: var(--paper);
  font-weight: 600;
  font-size: 15px;
}
.steps { counter-reset: none; }
.step-list { list-style: none; display: flex; flex-direction: column; gap: 18px; }
.step-list li { display: flex; gap: 16px; align-items: flex-start; font-size: 17px; }
.step-list li > span:last-child { padding-top: 5px; }
.step-list-sm li { font-size: 16px; }

.quotes { list-style: none; display: flex; flex-direction: column; gap: 12px; }
.quotes li {
  padding: 16px 20px;
  border-radius: 16px 16px 16px 4px;
  background: var(--dark-card);
  box-shadow: inset 0 0 0 1px var(--dark-line);
  font-size: 18px;
  font-weight: 500;
}
.quote { font-size: 20px; line-height: 1.3; font-weight: 600; }
.quote-cards .card { gap: 10px; }

.pill-links { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.link-list { list-style: none; display: flex; flex-direction: column; }
.link-list a { display: flex; align-items: center; min-height: 52px; border-bottom: 1px solid var(--line); font-weight: 600; }

.chooser {
  list-style: none;
  display: grid;
  width: 100%;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  gap: 12px;
  text-align: left;
}
.chooser a {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-height: 72px;
  padding: 16px 20px;
  border-radius: 16px;
  background: var(--white);
  box-shadow: var(--shadow-card);
  color: var(--ink);
  text-decoration: none;
}
.chooser a:hover { box-shadow: inset 0 0 0 1.5px var(--ink); }
.chooser .nav-name { font-weight: 600; font-size: 18px; }

/* ------------------------------------------------------------------ example figures */

.example {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: clamp(18px, 2.4vw, 24px);
  background: var(--white);
  border-radius: var(--radius-l);
  box-shadow: var(--shadow-figure);
}
.example-wide { padding: clamp(18px, 2.6vw, 28px); box-shadow: var(--shadow-card); }
.example-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 12px; }
.example-who { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--muted); }
.example-who svg { flex: none; }
.bubble-q {
  align-self: flex-end;
  max-width: 88%;
  padding: 12px 16px;
  border-radius: 16px 16px 4px 16px;
  background: var(--ink);
  color: var(--paper);
  font-size: 16px;
}
.bubble-a {
  max-width: 100%;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px 18px;
  border-radius: 16px 16px 16px 4px;
  background: var(--paper);
  font-size: 15px;
  line-height: 1.5;
}
.answer-list { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.answer-list li { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 6px 10px; }
.answer-list li > span:last-child { flex: 1 1 14em; }
.figure-pair { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 480px), 1fr)); gap: 24px; align-items: start; }

.report-panel {
  display: flex;
  flex-wrap: wrap;
  gap: 32px 64px;
  align-items: center;
  padding: clamp(24px, 4vw, 48px);
  background: var(--white);
  border-radius: var(--radius-l);
  box-shadow: var(--shadow-card);
}
.report-text { flex: 1.2 1 min(100%, 380px); min-width: 0; }
.report-side { flex: 1 1 300px; min-width: 0; }
.example-q {
  flex: 1 1 300px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 24px 26px;
  border-radius: 16px;
  background: var(--paper);
}
.example-q .q { font-size: 21px; line-height: 1.3; font-weight: 600; }

.mini-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.mini-title { font-size: 16px; font-weight: 600; }
.mini-list { list-style: none; }
.mini-list li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  padding: 6px 0;
  border-top: 1px solid var(--tag-bg);
  font-size: 14px;
}
.mini-q { font-size: 13px; font-weight: 600; }
.scale { display: grid; grid-template-columns: repeat(5, 1fr); gap: 5px; }
.scale > span { height: 30px; border-radius: 8px; box-shadow: inset 0 0 0 1px #D9D6CC; }
.scale > .on { background: var(--teal); box-shadow: none; }

/* the player's check-in, drawn as a phone-sized card */
.phone { max-width: 400px; width: 100%; justify-self: center; gap: 14px; border-radius: 28px; }
.phone-team { font-size: 13px; font-weight: 600; color: var(--muted); }
.phone-hello { font-size: 22px; font-weight: 700; letter-spacing: -0.01em; }
.phone-q { display: flex; flex-direction: column; gap: 6px; }
.phone-label { font-size: 15px; font-weight: 600; }
.phone-scale, .phone-yesno { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.phone-yesno { grid-template-columns: 1fr 1fr; }
.phone-scale > span, .phone-yesno > span {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  border-radius: 10px;
  box-shadow: inset 0 0 0 1px #D9D6CC;
  font-weight: 600;
}
.phone-scale > .on, .phone-yesno > .on { background: var(--teal); color: var(--white); box-shadow: none; }
.phone-ends { display: flex; justify-content: space-between; gap: 8px; font-size: 13px; color: var(--muted); }
.phone-send {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  border-radius: 999px;
  background: var(--ink);
  color: var(--paper);
  font-weight: 600;
}

/* the club structure diagram */
.structure {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: clamp(20px, 3vw, 32px);
  background: var(--white);
  border-radius: var(--radius-l);
  box-shadow: var(--shadow-card);
}
.structure-club {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  align-self: flex-start;
  padding: 12px 18px;
  border-radius: 14px;
  background: var(--ink);
  color: var(--paper);
  font-weight: 600;
}
.structure-teams { list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 16px; }
.structure-teams > li {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 18px;
  border-radius: 16px;
  background: var(--paper);
}
.structure-teams > .is-new { box-shadow: inset 0 0 0 1.5px var(--teal); }
.team-name { font-size: 17px; font-weight: 600; }
.role-list { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; }
.role-list li { padding: 3px 10px; border-radius: 999px; background: var(--white); font-size: 13px; font-weight: 600; box-shadow: inset 0 0 0 1px var(--line); }
.role-list .role-new { background: var(--tint); color: var(--teal); box-shadow: none; }
.structure figcaption { display: block; font-size: 15px; color: var(--text-2); }

/* team comparison (organisations) */
.team-cards { list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 16px; }
.team-card { display: flex; flex-direction: column; gap: 8px; padding: 16px; border-radius: 14px; background: var(--paper); }
.count-list { list-style: none; display: flex; flex-direction: column; gap: 6px; }
.count-list li { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.count { font-weight: 600; font-variant-numeric: tabular-nums; }
.chip-legend { list-style: none; display: flex; flex-wrap: wrap; gap: 8px 20px; font-size: 14px; color: var(--text-2); }
.chip-legend li { display: inline-flex; align-items: center; gap: 8px; }

/* ------------------------------------------------------------------ charts (site/README.md) */

/* .chart is a size container: the drawing follows the chart's own width, so a chart in a 500px
   column on a wide screen gets the narrow drawing (larger text), not a shrunken wide one. A
   browser without container queries always shows the narrow one. */
.chart { display: flex; flex-direction: column; gap: 8px; min-width: 0; container-type: inline-size; }
.chart svg { display: block; width: 100%; height: auto; }
/* each chart with axis text is drawn twice (charts.py): the narrow drawing below 600px of chart */
.chart .chart-wide { display: none; }
/* capped so a 500px desktop or tablet column does not scale its 16px labels to poster size */
.chart svg:not(.chart-wide) { max-width: 360px; }
@container (min-width: 600px) {
  .chart .chart-wide { display: block; }
  .chart .chart-narrow { display: none; }
}
.chart-legend { list-style: none; display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 13px; color: var(--text-2); }
.chart-legend li { display: inline-flex; align-items: center; gap: 6px; }
.chart-legend svg { width: 12px; height: auto; flex: none; }

.scroll { overflow-x: auto; max-width: 100%; border-radius: 12px; container-type: inline-size; }
.team-view { width: 100%; min-width: 600px; border-collapse: collapse; font-size: 14px; font-variant-numeric: tabular-nums; }
/* the sticky caption is never wider than its scroll region (100cqi of .scroll; the vw cap is the fallback) */
.team-view caption { position: sticky; left: 0; max-width: calc(100vw - 2 * var(--gutter) - 36px); max-width: 100cqi; text-align: left; padding: 0 0 10px; font-size: 13px; color: var(--muted); }
.team-view th, .team-view td { padding: 10px 12px; text-align: left; border-top: 1px solid var(--tag-bg); white-space: nowrap; }
.team-view thead th { background: var(--paper); border-top: 0; font-size: 13px; font-weight: 600; color: var(--muted); }
.team-view tbody th { font-weight: 600; }
.team-view .no-data { color: var(--faint); }

.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px 3px 8px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--ink);
  white-space: nowrap;
}
.chip svg { flex: none; stroke: currentColor; }
.chip-ready { background: #0ca30c; color: var(--ink); }
.chip-follow_up { background: #ec835a; color: var(--ink); }
.chip-take_it_easy { background: #fab219; color: var(--ink); }
.chip-no_answer { background: none; box-shadow: inset 0 0 0 1.5px #9AA1AB; color: #4A5566; }

/* ------------------------------------------------------------------ who sees what */

.who { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.who-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 15px; line-height: 1.45; }
.who-table caption { text-align: left; padding: 0 0 12px; font-size: 14px; color: var(--muted); }
.who-table td svg { flex: none; vertical-align: -3px; margin-right: 8px; }
.who-yes { color: var(--ink); }
.who-no { color: var(--muted); }
/* phones: each row becomes a card, each cell carries its column name */
.who-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); }
.who-table tr { display: block; margin-bottom: 12px; padding: 14px 16px; border-radius: 14px; background: var(--paper); }
.who-table tbody th { display: block; padding-bottom: 8px; font-weight: 600; text-align: left; }
.who-table td { display: flex; align-items: flex-start; flex-wrap: wrap; gap: 2px 8px; padding: 6px 0; border-top: 1px solid var(--line-card); }
.who-table td::before { content: attr(data-label); content: attr(data-label) / ""; flex: 1 1 100%; font-size: 13px; color: var(--muted); }
@media (min-width: 760px) {
  .who-table { background: var(--paper); border-radius: 16px; overflow: hidden; }
  .who-table thead { position: static; width: auto; height: auto; overflow: visible; clip: auto; clip-path: none; display: table-header-group; }
  .who-table tr { display: table-row; margin: 0; padding: 0; border-radius: 0; background: none; }
  .who-table thead th { padding: 16px 20px; text-align: left; background: var(--ink); color: var(--paper); font-weight: 600; }
  .who-table thead th:first-child { width: 34%; }
  .who-table tbody th { display: table-cell; padding: 16px 20px; font-weight: 500; border-top: 1px solid var(--line-card); }
  .who-table td { display: table-cell; padding: 16px 20px; border-top: 1px solid var(--line-card); }
  .who-table td::before { content: none; }
  .who-table tbody tr:first-child th, .who-table tbody tr:first-child td { border-top: 0; }
}

/* ------------------------------------------------------------------ FAQ, bands, CTA */

.faq-wrap { display: flex; flex-wrap: wrap; gap: 32px 64px; }
.faq-wrap > .h2 { flex: 1 1 260px; }
.faq { flex: 2.4 1 min(100%, 520px); min-width: 0; display: flex; flex-direction: column; }
.faq-item { padding: 22px 0; border-top: 1px solid var(--line-faq); }
.faq dt { font-size: 19px; line-height: 1.3; font-weight: 600; }
.faq dd { margin-top: 8px; font-size: 16px; color: var(--text-2); }

.band {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  padding: clamp(24px, 4vw, 40px);
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
}

.cta-box {
  align-items: flex-start;
  padding: clamp(28px, 6vw, 64px);
  border-radius: 24px;
  background: var(--ink);
  color: var(--paper);
}
.cta-box .h2 { max-width: 760px; }

.split-head .muted { margin: 0; }
.details-block { margin-top: 32px; }
.detail-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 16px 24px; }
.detail-list > div { padding-top: 14px; border-top: 2px solid var(--ink); }
.detail-list dt { font-weight: 600; }
.detail-list dd { margin-top: 6px; font-size: 16px; color: var(--text-2); }

.flow-col { gap: 12px; }
.flow { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 16px; align-items: stretch; }

.forward-message {
  padding: 16px 18px;
  border-left: 3px solid var(--teal);
  border-radius: 0 12px 12px 0;
  background: var(--paper);
  font-size: 15px;
  color: var(--text-2);
}
.forward-message .fine { font-weight: 600; color: var(--ink); margin-bottom: 8px; }

/* ------------------------------------------------------------------ documents (privacy, terms) */

.doc-section { padding-top: clamp(32px, 5vw, 64px); }
.doc { max-width: 820px; display: flex; flex-direction: column; gap: 32px; }
.doc-header { padding-bottom: 8px; }
.summary {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: clamp(20px, 4vw, 36px);
  background: var(--white);
  border-radius: var(--radius-l);
  box-shadow: var(--shadow-card);
}
.summary-list { list-style: none; display: flex; flex-direction: column; }
.summary-list a {
  display: block;
  padding: 12px 0 12px 30px;
  border-top: 1px solid var(--line-soft);
  position: relative;
  color: var(--ink);
  text-decoration: none;
}
.summary-list a::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 21px;
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: var(--teal);
}
.summary-list a:hover { color: var(--teal); text-decoration: underline; }
.summary-act { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.summary-act p { flex: 1 1 100%; }
.toc { padding: 20px 24px; border-radius: 16px; background: var(--white); box-shadow: var(--shadow-card); }
.toc-title { font-size: 15px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); margin-bottom: 8px; }
.toc ol { list-style: none; columns: 2 220px; column-gap: 32px; }
.toc li { break-inside: avoid; }
.toc a { display: inline-flex; align-items: center; min-height: 44px; }
.doc-body { display: flex; flex-direction: column; gap: 40px; }
.doc-body section { display: flex; flex-direction: column; gap: 14px; scroll-margin-top: 88px; }
.doc-body h2 { font-size: clamp(22px, 1vw + 18px, 26px); line-height: 1.25; font-weight: 600; letter-spacing: -0.01em; scroll-margin-top: 88px; }
.doc-body h3 { font-size: 18px; font-weight: 600; margin-top: 8px; scroll-margin-top: 88px; }
.doc-body p, .doc-body li { font-size: 16px; color: var(--text-2); max-width: 70ch; }
.doc-body ul { padding-left: 22px; display: flex; flex-direction: column; gap: 8px; }
.doc-body strong { color: var(--ink); font-weight: 600; }
.doc-body [id] { scroll-margin-top: 88px; }
.doc-table { width: 100%; border-collapse: collapse; font-size: 15px; }
.doc-table th, .doc-table td { text-align: left; vertical-align: top; padding: 10px 12px; }
.doc-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); }
.doc-table tr { display: block; margin-bottom: 12px; padding: 12px 14px; border-radius: 12px; background: var(--white); box-shadow: var(--shadow-card); }
.doc-table tbody th { display: block; padding: 0 0 6px; font-weight: 600; color: var(--ink); }
.doc-table td { display: block; padding: 6px 0; border-top: 1px solid var(--line-soft); color: var(--text-2); }
.doc-table td::before { content: attr(data-label); content: attr(data-label) / ""; display: block; font-size: 13px; color: var(--muted); }
@media (min-width: 760px) {
  .doc-table thead { position: static; width: auto; height: auto; overflow: visible; clip: auto; clip-path: none; display: table-header-group; }
  .doc-table tr { display: table-row; margin: 0; padding: 0; box-shadow: none; background: none; }
  .doc-table thead th { background: var(--ink); color: var(--paper); font-weight: 600; }
  .doc-table tbody th, .doc-table td { display: table-cell; padding: 12px; border-top: 1px solid var(--line); }
  .doc-table td::before { content: none; }
  .doc-table tbody tr:nth-child(even) { background: var(--white); }
}

/* ------------------------------------------------------------------ footer */

.site-footer { background: var(--footer-bg); border-top: 1px solid var(--line); padding: 56px 0 40px; }
.footer-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)); gap: 32px 40px; }
.footer-about { display: flex; flex-direction: column; gap: 14px; }
.footer-about p { font-size: 15px; color: var(--text-2); max-width: 280px; }
.footer-about .brand-word { font-size: 22px; }
.site-footer h2 { font-size: 13px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); margin-bottom: 6px; }
.site-footer ul { list-style: none; }
.site-footer nav a { display: inline-flex; align-items: center; min-height: 44px; color: var(--ink); text-decoration: none; font-size: 15px; }
.site-footer nav a:hover { text-decoration: underline; }
.footer-bottom {
  margin-top: 40px;
  padding-top: 24px;
  border-top: 1px solid #DAD6CB;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px 24px;
  font-size: 14px;
  color: var(--muted);
}

/* ------------------------------------------------------------------ phones (HomeMobile.dc.html) */

@media (max-width: 479px) {
  .hero .actions { flex-direction: column; align-items: stretch; }
  .hero .actions .btn { width: 100%; }
  .h3-xl { font-size: 22px; }
  /* audience cards and "three ways": icon on the left, text beside it */
  .aud-card, .way-card { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 0 14px; min-height: 0; padding: 20px; }
  .aud-card > .icon-tile { grid-row: 1 / span 2; align-self: center; }
  .aud-card > .kicker, .aud-card > .h3 { grid-column: 2; }
  .aud-card > p { grid-column: 1 / -1; margin-top: 12px; }
  .aud-card > .btn { grid-column: 1 / -1; width: 100%; margin-top: 14px; }
  .way-card > .icon-tile { grid-row: 1 / span 2; }
  .way-card > .h3, .way-card > p { grid-column: 2; }
  .way-card > .h3 { font-size: 18px; }
}
/* phones on their side: keep the hero's first action above the fold */
@media (max-height: 500px) and (orientation: landscape) {
  .hero { padding-top: 20px; padding-bottom: 32px; }
  .hero .stack { gap: 12px; }
  .hero .display { font-size: 32px; }
  .hero .lede { font-size: 17px; }
}

/* ------------------------------------------------------------------ print and motion */

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}
@media print {
  .site-header, .site-footer, .skip, .actions { display: none; }
  .section-dark, .cta-box { background: none; color: var(--ink); }
}