/* ---------------------------------------------------------------------------
   Rajto public site — shared stylesheet.

   Visual source of truth is docs/design/DESIGN.md §2 and the tokens it governs
   in mobile/theme/*.ts. Every colour, radius, type size and family below is a
   copy of a token there, not a new invention. When a token moves, this file
   follows it. Nothing guards the copy: scripts/check-design-tokens.mjs compares
   DESIGN.md to mobile/theme/, and site/ is outside it.

   RE-SYNCED WITH #1225 AND #1231 (2026-09-20). Before that this file still
   carried the pre-repair palette: oker #B08A3A at 2.8:1 on parchment, which is
   why headings here used to be ink, plus the old text.muted, the single border
   token, and Playfair Display as the display family.

   WHAT THAT REPAIR MEANS FOR THIS PAGE
     - oker #7D6229 measures 5.01:1 on parchment and 5.75:1 on a card, so
       headings are oker here too, the way they are in the app.
     - Literata replaces Playfair Display. Playfair is a didone: its hairlines
       are the first thing to go on a cheap screen or in sunlight, and that
       thinness does not improve when the colour does.
     - Borders are three families, not one. A container edge (divider, footer
       rule) is border.default; a card edge is border.card at 2.28:1 so the eye
       actually stops; a control outline is border.control at 3.32:1.

   FONTS ARE SELF-HOSTED, and that is not a preference. A site that says it does
   not share your data must not hand every visitor's IP address to Google. The
   four files in fonts/ are subsets of the exact weights the app loads, built
   from the .ttf in mobile/node_modules/@expo-google-fonts with pyftsubset
   (latin + punctuation + arrows), 67 KB for all four against 1.27 MB of .ttf.
   Both faces are SIL Open Font License 1.1; the licences ride along in fonts/.
   --------------------------------------------------------------------------- */

/* --- Self-hosted type. Same families and weights as mobile/theme/typography.ts. */
@font-face {
  font-family: "Literata";
  src: url("fonts/literata-600.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Literata";
  src: url("fonts/literata-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Source Sans 3";
  src: url("fonts/source-sans-3-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Source Sans 3";
  src: url("fonts/source-sans-3-600.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: light;

  /* Terracotta: the brand, and where the brand carries text. */
  --rajto-500: #A0522D;
  --rajto-dark: #8B4726;
  --rajto-accent-light: #FAEBE1;
  --rajto-accent-border: #E8B08E;

  /* The heading colour. One shade, and it clears the text floor (#1225). */
  --oker: #7D6229;

  --surface: #F5EFE0;
  --surface-card: #FFFFFF;
  --surface-subtle: #FAF6ED;

  --ink: #3A3A3A;
  --text-secondary: #6B6356;
  --text-muted: #726B5F;

  /* Three border families (#1225, #1231). Container / card edge / control. */
  --border: #DAD2C4;
  --border-card: #AE9F7A;
  --border-control: #95805B;
  --border-in-card: #EDE6D8;
  --border-in-card-subtle: #F2EDE3;

  /* Functional states, as { text, bg } pairs. */
  --ok-text: #166534;
  --ok-bg: #DCFCE7;
  --warn-text: #92400E;
  --warn-bg: #FEF3C7;
  --info-text: #1E517B;
  --info-bg: #E0EAF1;

  /* 4px grid */
  --sp-xs: 4px;
  --sp-sm: 8px;
  --sp-md: 12px;
  --sp-lg: 16px;
  --sp-xl: 24px;
  --sp-xxl: 32px;
  --sp-xxxl: 48px;

  --radius-button: 14px;
  --radius-card: 18px;
  --radius-pill: 9999px;

  --display: "Literata", Georgia, "Times New Roman", serif;
  --body: "Source Sans 3", "Segoe UI", system-ui, -apple-system, sans-serif;

  --measure: 34rem;   /* prose column */
  --wide: 64rem;      /* card grids */
}

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--surface);
  color: var(--ink);
  font-family: var(--body);
  font-size: 18px;
  line-height: 1.6;
  /* Calm, not flat: a whisper of warmth at the top of the page. */
  background-image: linear-gradient(180deg, var(--surface-subtle) 0%, var(--surface) 420px);
  background-repeat: no-repeat;
}

p { margin: 0 0 var(--sp-lg); }
p:last-child { margin-bottom: 0; }

h1, h2, h3 { font-family: var(--display); margin: 0; color: var(--oker); }

a {
  color: var(--rajto-dark);
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
a:hover { color: var(--rajto-500); }
:focus-visible {
  outline: 3px solid var(--ink);
  outline-offset: 3px;
  border-radius: var(--sp-xs);
}

.wrap {
  width: 100%;
  max-width: var(--wide);
  margin: 0 auto;
  padding-inline: var(--sp-xl);
}
.prose { max-width: var(--measure); }

/* Skip link: first thing a keyboard or screen reader hits. */
.skip {
  position: absolute;
  left: -9999px;
  top: var(--sp-sm);
  background: var(--surface-card);
  border: 1px solid var(--border-control);
  border-radius: var(--radius-button);
  padding: var(--sp-sm) var(--sp-lg);
  font-weight: 600;
}
.skip:focus { left: var(--sp-lg); z-index: 10; }

/* ---------------------------------------------------------------------------
   Header, navigation, language switch
   --------------------------------------------------------------------------- */
.site-header {
  padding-block: var(--sp-lg) var(--sp-md);
  border-bottom: 1px solid var(--border);
}
.site-header .wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-md) var(--sp-lg);
}
.brand {
  display: flex;
  align-items: center;
  gap: var(--sp-md);
  text-decoration: none;
  color: var(--ink);
}
.brand svg { display: block; width: 34px; height: 34px; flex: none; }
.brand .name {
  font-family: var(--display);
  font-weight: 700;
  font-size: 26px;
  letter-spacing: 0.01em;
}

.bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-md) var(--sp-lg);
}

.nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-xs) var(--sp-lg);
  font-size: 17px;
}
.nav a {
  text-decoration: none;
  color: var(--text-secondary);
  padding: var(--sp-xs) 0;
  border-bottom: 2px solid transparent;
}
.nav a:hover { color: var(--rajto-dark); border-bottom-color: var(--rajto-accent-border); }
.nav a[aria-current="page"] {
  color: var(--rajto-dark);
  font-weight: 600;
  border-bottom-color: var(--rajto-500);
}

/* The language switch. The current language is stated, not linked: a link that
   goes where you already are is a promise the page cannot keep. */
.lang {
  display: flex;
  align-items: center;
  gap: var(--sp-sm);
  font-size: 16px;
  color: var(--text-secondary);
}
.lang .here { font-weight: 600; color: var(--ink); }
.lang a { font-weight: 600; }

/* A button-shaped link. Used once per page at most: the ask. */
.cta {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-sm);
  min-height: 44px;
  padding: var(--sp-sm) var(--sp-xl);
  background: var(--rajto-500);
  color: var(--surface-card);
  border: 1px solid var(--rajto-dark);
  border-radius: var(--radius-button);
  font-weight: 600;
  font-size: 17px;
  text-decoration: none;
}
.cta:hover { background: var(--rajto-dark); color: var(--surface-card); }
.site-header .cta { min-height: 38px; padding: var(--sp-xs) var(--sp-lg); font-size: 16px; }

/* ---------------------------------------------------------------------------
   Hero and page headers
   --------------------------------------------------------------------------- */
.hero { padding-block: var(--sp-xxxl); }

.eyebrow {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--rajto-dark);
  margin: 0 0 var(--sp-lg);
}

h1 {
  font-size: clamp(32px, 5.6vw, 48px);
  line-height: 1.16;
  font-weight: 700;
  margin-bottom: var(--sp-xl);
  max-width: 20ch;
}
.hero h1 { max-width: 18ch; }

.lead {
  font-size: clamp(19px, 2.1vw, 22px);
  line-height: 1.55;
  max-width: 36rem;
  color: var(--ink);
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-sm);
  margin-top: var(--sp-xl);
  padding: var(--sp-sm) var(--sp-lg);
  background: var(--rajto-accent-light);
  border: 1px solid var(--rajto-accent-border);
  border-radius: var(--radius-pill);
  color: var(--rajto-dark);
  font-size: 16px;
  font-weight: 600;
  text-decoration: none;
}
.badge .dot {
  width: 9px; height: 9px; flex: none;
  border-radius: var(--radius-pill);
  background: var(--rajto-500);
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-lg);
  margin-top: var(--sp-xl);
}

/* ---------------------------------------------------------------------------
   Sections
   --------------------------------------------------------------------------- */
section { padding-block: var(--sp-xxxl); }
section:first-of-type { padding-top: var(--sp-xxl); }

.rule { border: 0; border-top: 1px solid var(--border); margin: 0; }

.section-label {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--text-secondary);
  margin: 0 0 var(--sp-md);
}

h2 {
  font-size: clamp(26px, 3.4vw, 34px);
  line-height: 1.22;
  font-weight: 600;
  margin-bottom: var(--sp-lg);
  max-width: 24ch;
}

h3 {
  font-size: 24px;
  line-height: 1.3;
  font-weight: 600;
}

/* ---------------------------------------------------------------------------
   Status chips. A claim about what runs, next to the thing it is about.
   The three states come from the functional colour pairs in theme/colors.ts.
   --------------------------------------------------------------------------- */
.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-sm);
  padding: 2px var(--sp-md);
  border-radius: var(--radius-pill);
  font-size: 15px;
  font-weight: 600;
  font-family: var(--body);
  white-space: nowrap;
}
.chip::before {
  content: "";
  width: 8px; height: 8px; flex: none;
  border-radius: var(--radius-pill);
  background: currentColor;
}
.chip-live { color: var(--ok-text); background: var(--ok-bg); }
.chip-part { color: var(--warn-text); background: var(--warn-bg); }
.chip-soon { color: var(--info-text); background: var(--info-bg); }

.chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-sm) var(--sp-md);
  margin: 0 0 var(--sp-lg);
}

/* ---------------------------------------------------------------------------
   Cards
   --------------------------------------------------------------------------- */
.cards {
  display: grid;
  gap: var(--sp-xl);
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  margin-top: var(--sp-xl);
}

.card {
  background: var(--surface-card);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-card);
  padding: var(--sp-xl);
  display: flex;
  flex-direction: column;
}
.card .icon {
  width: 48px; height: 48px;
  display: grid; place-items: center;
  border-radius: var(--radius-pill);
  background: var(--rajto-accent-light);
  border: 1px solid var(--rajto-accent-border);
  margin-bottom: var(--sp-lg);
}
.card .icon svg { width: 24px; height: 24px; display: block; }
.card h3 { margin-bottom: var(--sp-sm); font-size: 22px; }
.card .chip { margin-bottom: var(--sp-md); align-self: flex-start; }
.card p { font-size: 17px; }
.card .more { margin-top: auto; padding-top: var(--sp-lg); }

/* Read-on link: an arrow that means "there is more, on its own page". */
.more a {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-sm);
  font-weight: 600;
  font-size: 17px;
  text-decoration: none;
  border-bottom: 2px solid var(--rajto-accent-border);
  padding-bottom: 2px;
}
.more a:hover { border-bottom-color: var(--rajto-500); }
.more a::after { content: "\2192"; }

/* ---------------------------------------------------------------------------
   The demo. A real video when there is one, a stated absence when there is not.
   --------------------------------------------------------------------------- */
.demo {
  margin-top: var(--sp-xl);
  max-width: 46rem;
}
.demo video {
  display: block;
  width: 100%;
  height: auto;
  background: var(--ink);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-card);
}
.demo .caption {
  margin-top: var(--sp-md);
  font-size: 16px;
  color: var(--text-secondary);
}
/* The placeholder. Deliberately not a play button: nothing plays. */
.demo-pending {
  background: var(--surface-card);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-card);
  padding: var(--sp-xxl) var(--sp-xl);
  text-align: center;
}
.demo-pending .what {
  font-family: var(--display);
  font-size: 22px;
  font-weight: 600;
  color: var(--oker);
  margin-bottom: var(--sp-sm);
}
.demo-pending p { font-size: 17px; color: var(--text-secondary); }

/* ---------------------------------------------------------------------------
   Detail blocks used on the subpages
   --------------------------------------------------------------------------- */
.panel {
  background: var(--surface-card);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-card);
  padding: var(--sp-xl);
  max-width: 46rem;
}
.panel + .panel { margin-top: var(--sp-lg); }
.panel h3 { margin-bottom: var(--sp-sm); }
.panel .kicker {
  color: var(--text-secondary);
  font-size: 16px;
  font-weight: 600;
  margin: 0 0 var(--sp-lg);
}
.panel p { font-size: 17px; }
.panel .note {
  margin-top: var(--sp-lg);
  padding-top: var(--sp-lg);
  border-top: 1px solid var(--border-in-card);
  font-size: 16px;
  color: var(--text-secondary);
}
.panel .chip { margin-bottom: var(--sp-md); }

/* Feature rows: the claim, its status, and one sentence. The chip sits ON the row
   it is about, because a status list somewhere else goes stale on its own. */
.features {
  list-style: none;
  margin: var(--sp-xl) 0 0;
  padding: 0;
  display: grid;
  gap: var(--sp-md);
  max-width: 46rem;
}
.features li {
  background: var(--surface-card);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-card);
  padding: var(--sp-lg) var(--sp-xl);
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--sp-sm) var(--sp-lg);
  align-items: baseline;
}
.features strong {
  font-family: var(--display);
  font-weight: 600;
  font-size: 19px;
  line-height: 1.3;
  color: var(--oker);
}
.features .chip { justify-self: end; }
.features p { grid-column: 1 / -1; font-size: 17px; margin: 0; }

.negatives, .roadmap {
  list-style: none;
  margin: var(--sp-xl) 0 0;
  padding: 0;
  display: grid;
  gap: var(--sp-lg);
  max-width: 46rem;
}
.negatives li, .roadmap li {
  background: var(--surface-card);
  border: 1px solid var(--border-card);
  border-left: 4px solid var(--rajto-accent-border);
  /* set once here; .roadmap overrides its own edge below */
  border-radius: var(--radius-card);
  padding: var(--sp-lg) var(--sp-xl);
  font-size: 17px;
}
.roadmap li { background: var(--surface-subtle); border-left-color: var(--border-control); }

.negatives strong, .roadmap strong {
  display: block;
  font-family: var(--display);
  font-weight: 600;
  font-size: 19px;
  color: var(--oker);
  margin-bottom: var(--sp-xs);
}

.principles {
  counter-reset: principle;
  list-style: none;
  margin: var(--sp-xl) 0 0;
  padding: 0;
  display: grid;
  gap: var(--sp-lg);
  grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
}
/* One column, Tony's call on 2026-09-22: ten numbered statements read as a list
   you go down, and two columns made the reader choose an order that is not there. */
.principles-single { grid-template-columns: 1fr; max-width: 46rem; }

.principles li {
  counter-increment: principle;
  display: grid;
  grid-template-columns: 2.25rem 1fr;
  gap: var(--sp-md);
  align-items: start;
  font-size: 17px;
}
.principles li::before {
  content: counter(principle);
  font-family: var(--display);
  font-weight: 600;
  font-size: 20px;
  line-height: 1.55;
  color: var(--oker);
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.commitments {
  list-style: none;
  margin: var(--sp-xl) 0 0;
  padding: 0;
  display: grid;
  gap: var(--sp-md);
  max-width: 46rem;
}
/* NOT A GRID, and that is the whole point of this rule. A grid makes EVERY child
   its own cell, and so does every run of bare text: `<strong>Kop.</strong> zin`
   puts the <strong> in column 2 and the sentence after it in column 1 of the next
   row, which is the 1.5rem bullet column. The result is a sentence set one or two
   words per line, and nothing in the markup looks wrong. Marker outside the flow,
   text in one block. */
.commitments li {
  position: relative;
  padding-left: 1.75rem;
  font-size: 17px;
}
.commitments li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 10px; height: 10px;
  border-radius: var(--radius-pill);
  background: var(--oker);
}
.commitments strong { color: var(--oker); }

/* A plain list of things that are true, with a tick that is not decorative. */
.does {
  list-style: none;
  margin: var(--sp-xl) 0 0;
  padding: 0;
  display: grid;
  gap: var(--sp-md);
  max-width: 46rem;
}
.does li {
  position: relative;
  padding-left: 1.75rem;
  font-size: 17px;
}
.does li::before {
  content: "\2713";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--ok-text);
  font-weight: 600;
  line-height: 1.6;
}

/* And the list of things that are not. Same shape, so neither hides. */
.doesnt {
  list-style: none;
  margin: var(--sp-xl) 0 0;
  padding: 0;
  display: grid;
  gap: var(--sp-md);
  max-width: 46rem;
}
.doesnt li {
  position: relative;
  padding-left: 1.75rem;
  font-size: 17px;
}
.doesnt li::before {
  content: "\2014";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--warn-text);
  font-weight: 600;
  line-height: 1.6;
}

/* Walkthrough of the aanvraag: numbered, and the number carries the step. */
.steps {
  counter-reset: step;
  list-style: none;
  margin: var(--sp-xl) 0 0;
  padding: 0;
  display: grid;
  gap: var(--sp-lg);
  max-width: 46rem;
}
.steps li {
  counter-increment: step;
  background: var(--surface-card);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-card);
  padding: var(--sp-lg) var(--sp-xl);
  font-size: 17px;
}
.steps li::before {
  content: counter(step);
  display: inline-grid;
  place-items: center;
  width: 28px; height: 28px;
  margin-bottom: var(--sp-sm);
  border-radius: var(--radius-pill);
  background: var(--rajto-accent-light);
  border: 1px solid var(--rajto-accent-border);
  color: var(--rajto-dark);
  font-family: var(--body);
  font-weight: 600;
  font-size: 15px;
}
.steps strong { display: block; font-size: 18px; margin-bottom: var(--sp-xs); }

/* The three asks. Numbered, because we are counting what we need. */
.asks {
  counter-reset: ask;
  list-style: none;
  margin: var(--sp-xl) 0 0;
  padding: 0;
  display: grid;
  gap: var(--sp-lg);
  max-width: 46rem;
}
.asks li {
  counter-increment: ask;
  background: var(--surface-card);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-card);
  padding: var(--sp-xl);
}
.asks h3 { margin-bottom: var(--sp-sm); font-size: 22px; }
.asks h3::before {
  content: counter(ask) ". ";
  color: var(--rajto-dark);
  font-variant-numeric: tabular-nums;
}
.asks p { font-size: 17px; }

.questions {
  list-style: none;
  margin: var(--sp-xl) 0 0;
  padding: 0;
  display: grid;
  gap: var(--sp-lg);
  grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
}
.questions li {
  background: var(--surface-subtle);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-card);
  padding: var(--sp-xl);
  font-size: 17px;
  color: var(--ink);
}
.questions strong {
  display: block;
  font-family: var(--display);
  font-size: 20px;
  font-weight: 600;
  color: var(--oker);
  margin-bottom: var(--sp-sm);
}
.questions .answer {
  display: block;
  margin-top: var(--sp-md);
  padding-top: var(--sp-md);
  border-top: 1px solid var(--border-in-card);
  color: var(--text-secondary);
  font-size: 16px;
}

.outcomes { margin: var(--sp-lg) 0 0; padding-left: 1.2em; max-width: 46rem; }
.outcomes li { margin-bottom: var(--sp-sm); }

.prose ul { padding-left: 1.2em; }
.prose li { margin-bottom: var(--sp-sm); }

.pull {
  margin-top: var(--sp-xl);
  padding: var(--sp-xl);
  background: var(--rajto-accent-light);
  border: 1px solid var(--rajto-accent-border);
  border-radius: var(--radius-card);
  max-width: 46rem;
}
.pull p {
  font-family: var(--display);
  font-size: clamp(20px, 2.6vw, 26px);
  line-height: 1.35;
  color: var(--rajto-dark);
}

/* A framed aside for one fact that must not be skimmed past. */
.note-box {
  margin-top: var(--sp-xl);
  padding: var(--sp-lg) var(--sp-xl);
  background: var(--surface-subtle);
  border: 1px solid var(--border-card);
  border-left: 4px solid var(--border-control);
  border-radius: var(--radius-card);
  max-width: 46rem;
  font-size: 17px;
}

.orgs {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-md);
  margin: var(--sp-lg) 0 0;
  padding: 0;
}
.orgs li {
  background: var(--surface-card);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-pill);
  padding: var(--sp-sm) var(--sp-lg);
  font-weight: 600;
  font-size: 17px;
  color: var(--ink);
}

/* Contact: an address big enough to read off a projected screen. */
.contact {
  margin-top: var(--sp-xl);
  font-size: clamp(20px, 2.4vw, 26px);
  font-family: var(--display);
  font-weight: 600;
}

/* Two spacing utilities, and they exist for a reason worth writing down. The
   site is served with a Content-Security-Policy that has no 'unsafe-inline',
   so a `style="..."` attribute on a page is DROPPED BY THE BROWSER: nothing
   errors, nothing logs, the spacing is simply not applied. These replace the
   eight attributes that used to be in the markup. A ninth inline style will
   fail the same silent way — put the rule here instead.
   (deploy/Caddyfile.prod, the rajto.org block.) */
.mt-lg { margin-top: var(--sp-lg); }
.mt-xl { margin-top: var(--sp-xl); }

/* ---------------------------------------------------------------------------
   Footer
   --------------------------------------------------------------------------- */
.site-footer {
  border-top: 1px solid var(--border);
  padding-block: var(--sp-xxl);
  color: var(--text-secondary);
  font-size: 17px;
}
.site-footer .name-origin { max-width: var(--measure); }
.site-footer .foot-nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-sm) var(--sp-lg);
  margin-top: var(--sp-lg);
}
.site-footer .contact-line {
  margin-top: var(--sp-lg);
  font-weight: 600;
  color: var(--ink);
}
.site-footer .meta {
  margin-top: var(--sp-lg);
  font-size: 15px;
  color: var(--text-muted);
}

@media (max-width: 40rem) {
  body { font-size: 17px; }
  .wrap { padding-inline: var(--sp-lg); }
  section { padding-block: var(--sp-xxl); }
  .hero { padding-block: var(--sp-xxl); }
  .site-header .wrap { gap: var(--sp-md); }
  .bar { width: 100%; justify-content: space-between; }
}

/* ---------------------------------------------------------------------------
   Print. The site doubles as the deck, so a page has to survive a printer:
   no background wash, no navigation, and a link that still says where it went.
   --------------------------------------------------------------------------- */
@media print {
  body { background: #FFFFFF; background-image: none; font-size: 11pt; }
  .site-header .bar, .skip, .badge, .cta, .more, .site-footer .foot-nav { display: none; }
  .card, .panel, .steps li, .asks li, .questions li, .negatives li, .note-box, .pull, .demo-pending {
    break-inside: avoid;
  }
  section { padding-block: var(--sp-lg); }
  h1, h2, h3 { color: #000000; }
  a { color: #000000; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; }
}