/* Go Forth Digital: one stylesheet for the whole site.
   Order: tokens, fonts, reset, base type, components C01 to C29, page rules (.tNN), print.
   Media queries sit beside the component they change. No !important. Light only. */

/* 1. Tokens */
:root {
  --paper: #FFFFFF;
  --ink: #141416;
  --graphite: #1A1A1A;
  --forth-green: #0F5D4A;
  --line: #E5E5E5;
  --forth-green-hover: #0A463A;
  /* No grey text anywhere. Secondary text is smaller, still Ink or Paper. The two tokens stay for compatibility and resolve to full colour. */
  --ink-muted: #141416;
  --paper-muted: #FFFFFF;
  --focus-ring: 2px solid var(--forth-green);

  --font-head: "Instrument Sans", "Helvetica Neue", Arial, sans-serif;
  --font-body: "IBM Plex Sans", "Segoe UI", Helvetica, Arial, sans-serif;

  /* Six-step scale, rem. Step 4 (H1) and step 5 (figure) are fluid between 360 and 1280 px. */
  --step-0: 1.0625rem;                                 /* 17px body on mobile */
  --step-1: 1.25rem;                                   /* 20px answer block, h3 on mobile */
  --step-2: 1.5rem;                                    /* 24px h3 desktop, sub-headline mobile */
  --step-3: clamp(1.75rem, 1.4rem + 1.5vw, 2.25rem);   /* 28 to 36px h2 */
  --step-4: clamp(2.5rem, 1.6rem + 4vw, 4rem);         /* 40 to 64px h1 */
  --step-5: clamp(3.5rem, 2rem + 6.5vw, 7rem);         /* 56 to 112px figure numeral */

  --leading: 1.6;
  --leading-tight: 1.05;

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 1rem;
  --space-4: 1.5rem;
  --space-5: 2rem;
  --space-6: 3rem;
  --space-7: 5rem;
  --space-8: 8rem;

  --measure: 38rem;      /* 60 to 72 characters at body size */
  --wrap: 80rem;         /* 1280px content width */
  --gutter: 1.25rem;
  --radius: 2px;
  --header-h: 3.75rem;   /* 60px mobile */
  --bar-h: 3.5rem;       /* 56px mobile footer bar */
  --section-gap: var(--space-7);
}
/* Breakpoints: 768px, 1024px, 1280px; 1100px on T16 only. */
@media (min-width: 768px) {
  :root { --step-0: 1.125rem; --gutter: 2.5rem; --header-h: 4.75rem; --section-gap: var(--space-8); }
}
@media (min-width: 1024px) {
  :root { --gutter: 4rem; }
}

/* 2. Fonts: two variable files, Latin subset, swap. Preload both. */
@font-face {
  font-family: "Instrument Sans";
  src: url("/fonts/instrument-sans-variable.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "IBM Plex Sans";
  src: url("/fonts/ibm-plex-sans-variable.woff2") format("woff2");
  font-weight: 100 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* 3. Reset */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; color-scheme: light only; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: var(--leading);
  -webkit-font-smoothing: antialiased;
  padding-block-end: calc(var(--bar-h) + env(safe-area-inset-bottom, 0px));
}
@media (min-width: 768px) { body { padding-block-end: 0; } }
body.no-bar { padding-block-end: 0; }
img, svg, video { display: block; max-width: 100%; height: auto; }
h1, h2, h3, h4, p, ul, ol, dl, figure, table, blockquote { margin: 0; }
ul, ol { padding-inline-start: 1.25em; }
button, input, select, textarea { font: inherit; color: inherit; }
/* Dark mode is not supported: the Graphite panel only reads as an object on Paper. */
@media (prefers-color-scheme: dark) { html { color-scheme: light only; } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms; animation-duration: 0.01ms; scroll-behavior: auto; }
}

/* 4. Base type */
h1, h2, h3, .display { font-family: var(--font-head); font-weight: 600; letter-spacing: -0.02em; line-height: var(--leading-tight); text-wrap: pretty; }
h1 { font-size: var(--step-4); letter-spacing: -0.03em; }
h2 { font-size: var(--step-3); line-height: 1.12; }
h3 { font-size: var(--step-1); line-height: 1.2; letter-spacing: -0.01em; }
@media (min-width: 768px) { h3 { font-size: var(--step-2); } }
p, li, dd { text-wrap: pretty; }
a { color: var(--forth-green); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
a:hover { color: var(--forth-green-hover); text-decoration-thickness: 2px; }
:focus-visible { outline: var(--focus-ring); outline-offset: 2px; }
strong { font-weight: 600; }
.prose > * + * { margin-block-start: var(--space-3); }
.prose { max-width: var(--measure); }
.prose li + li { margin-block-start: var(--space-2); }
.prose h3 { margin-block-start: var(--space-5); }
.muted { color: var(--ink-muted); }
.small { font-size: 0.9375rem; }
.tnum { font-variant-numeric: tabular-nums lining-nums; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.wrap { max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }

/* Buttons: one green button per screen. */
.button {
  display: inline-block;
  background: var(--forth-green);
  color: var(--paper);
  border: 0;
  border-radius: var(--radius);
  padding: 0.875rem 1.375rem;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 1rem;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 120ms;
}
.button:hover, .button:focus-visible { background: var(--forth-green-hover); color: var(--paper); }
.button:active { background: var(--graphite); }
.button--secondary { background: transparent; color: var(--ink); border: 1px solid var(--ink); }
.button--secondary:hover, .button--secondary:focus-visible { background: var(--ink); color: var(--paper); }

/* Skip link */
.skip-link { position: absolute; inset-block-start: -100%; inset-inline-start: var(--space-3); z-index: 10; background: var(--paper); color: var(--ink); padding: var(--space-2) var(--space-3); border: 1px solid var(--ink); }
.skip-link:focus { inset-block-start: var(--space-3); }

/* Page rhythm: sections own their spacing. */
.page > * + * { margin-block-start: var(--section-gap); }
.page { padding-block: var(--space-6) var(--section-gap); }
@media (min-width: 768px) { .page { padding-block-start: var(--space-7); } }
.page-head > * + * { margin-block-start: var(--space-4); }

/* C01 Header */
.site-header { border-block-end: 1px solid var(--line); }
.site-header__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2) var(--space-4); min-height: var(--header-h); }
.brand { display: inline-block; line-height: 0; }
.brand img { width: 8.25rem; height: auto; }
@media (min-width: 768px) { .brand img { width: 11rem; } }
.site-header .button { display: none; }
@media (min-width: 768px) { .site-header .button { display: inline-block; } }
.nav-primary { order: 3; flex-basis: 100%; }
.nav-primary summary { list-style: none; cursor: pointer; font-weight: 600; padding: var(--space-2) 0; display: inline-block; }
.nav-primary summary::-webkit-details-marker { display: none; }
.nav-primary summary::after { content: ""; display: inline-block; width: 0.5em; height: 0.5em; margin-inline-start: 0.5em; border-inline-end: 2px solid currentColor; border-block-end: 2px solid currentColor; transform: translateY(-0.2em) rotate(45deg); }
.nav-primary details[open] summary::after { transform: translateY(0.1em) rotate(-135deg); }
.nav-primary ul { list-style: none; padding: 0 0 var(--space-3); margin: 0; display: flex; flex-direction: column; gap: var(--space-1); }
.nav-primary a { display: block; color: var(--ink); text-decoration: none; padding: var(--space-2) 0; font-weight: 500; border-block-end: 2px solid transparent; }
.nav-primary a:hover { color: var(--forth-green); }
.nav-primary a[aria-current="page"] { border-block-end-color: var(--forth-green); }
.nav-primary details { position: relative; }
/* Mobile: summary in the header row; the list is a full-width block beneath. */
@media (max-width: 1023.98px) {
  .site-header__inner { position: relative; }
  .nav-primary { order: 0; flex-basis: auto; margin-inline-start: auto; }
  .nav-primary details[open] > ul { position: absolute; inset-inline: 0; inset-block-start: 100%; background: var(--paper); border-block-end: 1px solid var(--line); padding: var(--space-3) var(--gutter) var(--space-4); z-index: 5; }
  .nav-primary a { font-size: var(--step-1); padding: var(--space-2) 0; }
}
/* Desktop: the disclosure is always open via ::details-content; where unsupported the "Menu" toggle stays visible and works. */
@media (min-width: 1024px) {
  .nav-primary { order: 0; flex-basis: auto; }
  .nav-primary ul { flex-direction: row; gap: var(--space-5); padding: 0; }
  @supports selector(::details-content) {
    .nav-primary summary { display: none; }
    .nav-primary details::details-content { content-visibility: visible; display: block; }
  }
}
/* Single header row from 768px. Between 768 and 1099.98px span.cta-long ("strategy") is hidden and gaps drop to 20px. */
@media (min-width: 768px) {
  .t16 .site-header__inner { flex-wrap: nowrap; }
  .site-header .button, .nav-primary a { white-space: nowrap; }
  .site-header .button { flex: none; }
}
@media (min-width: 768px) and (max-width: 1099.98px) {
  .site-header .cta-long { display: none; }
  .site-header__inner { gap: 1.25rem; }
}
@media (min-width: 1024px) and (max-width: 1099.98px) {
  .nav-primary ul { gap: 1.25rem; }
  .nav-primary a { font-size: 0.9375rem; }
}

/* C02 Footer */
.site-footer { background: var(--graphite); color: var(--paper); padding-block: var(--space-6) var(--space-5); }
.site-footer a { color: var(--paper); }
.site-footer a:hover { color: var(--paper); text-decoration-thickness: 2px; }
.site-footer__brand img { width: 8.25rem; height: auto; }
@media (min-width: 768px) { .site-footer__brand img { width: 11rem; } }
.site-footer__descriptor { margin-block-start: var(--space-3); max-width: 34rem; color: var(--paper-muted); }
.site-footer__columns { display: grid; gap: var(--space-5); margin-block-start: var(--space-6); }
@media (min-width: 768px) { .site-footer__columns { grid-template-columns: repeat(4, 1fr); gap: var(--space-5); } }
.site-footer__columns h2 { font-family: var(--font-body); font-size: 1rem; font-weight: 600; letter-spacing: 0; line-height: 1.4; margin-block-end: var(--space-2); }
.site-footer__columns ul { list-style: none; padding: 0; }
.site-footer__columns li { padding-block: 0.2rem; font-size: 0.9375rem; }
.site-footer address { font-style: normal; font-size: 0.9375rem; }
.site-footer address p + p { margin-block-start: var(--space-1); }
.site-footer__proof { margin-block-start: var(--space-6); padding-block-start: var(--space-4); border-block-start: 1px solid rgba(255, 255, 255, 0.18); color: var(--paper-muted); font-size: 0.9375rem; }
.site-footer__legal { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); margin-block-start: var(--space-3); font-size: 0.9375rem; color: var(--paper-muted); }
.site-footer__legal ul { list-style: none; padding: 0; display: flex; gap: var(--space-4); }
.site-footer__copy { margin-block-start: var(--space-3); font-size: 0.9375rem; color: var(--paper-muted); }

/* C03 Mobile footer bar */
.mobile-bar { position: fixed; inset-inline: 0; inset-block-end: 0; z-index: 8; display: flex; height: calc(var(--bar-h) + env(safe-area-inset-bottom, 0px)); padding-block-end: env(safe-area-inset-bottom, 0px); background: var(--paper); border-block-start: 1px solid var(--line); }
.mobile-bar a { flex: 1; display: flex; align-items: center; justify-content: center; min-height: 44px; font-weight: 600; text-decoration: none; color: var(--ink); }
.mobile-bar a:focus-visible { outline-offset: -4px; }
.mobile-bar .mobile-bar__book { background: var(--forth-green); color: var(--paper); }
.mobile-bar .mobile-bar__book:hover { background: var(--forth-green-hover); }
@media (min-width: 768px) { .mobile-bar { display: none; } }

/* C04 Breadcrumbs */
.breadcrumbs ol { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-1) 0; font-size: 0.9375rem; color: var(--ink-muted); }
.breadcrumbs li + li::before { content: "/"; padding-inline: 0.6em; color: var(--ink-muted); }
.breadcrumbs a { color: var(--ink-muted); }
.breadcrumbs a:hover { color: var(--forth-green); }
.breadcrumbs [aria-current="page"] { color: var(--ink); }

/* C05 Answer block */
.answer { font-size: var(--step-1); line-height: 1.45; max-width: 36rem; padding-block-end: var(--space-4); border-block-end: 1px solid var(--line); }
@media (min-width: 768px) { .answer { font-size: 1.375rem; } }
.sub-headline { font-family: var(--font-head); font-weight: 600; letter-spacing: -0.03em; line-height: 1; font-size: var(--step-3); }
@media (min-width: 1024px) { .sub-headline { font-size: 3.5rem; } }

/* C06 Question section */
.question > * + * { margin-block-start: var(--space-3); }
.question h2 { margin-block-end: var(--space-4); max-width: 26em; }
.question .opener { font-size: var(--step-1); line-height: 1.45; }
.question p, .question ul, .question ol, .question dl { max-width: var(--measure); }
.question .timeline, .question .numbered, .question .tiles, .question .panel, .question .timeline p, .question .numbered p, .question .tiles p { max-width: none; }
.question .numbered p { max-width: 26rem; }
.question .timeline p { max-width: 22rem; }
.question li + li { margin-block-start: var(--space-2); }
.question dl dt { font-weight: 600; margin-block-start: var(--space-3); }
.question dl dd { margin: var(--space-1) 0 0; }
/* Long-form: h3 sub-sections, in-flow C08 figure, C22 definition, pull quote, section rule. */
.question h3 { margin-block-start: var(--space-5); }
.question h3 + * { margin-block-start: var(--space-2); }
.question .stat, .question .definition, .question .pull { margin-block: var(--space-5); }
.pull { font-family: var(--font-head); font-weight: 600; letter-spacing: -0.01em; font-size: var(--step-2); line-height: 1.3; padding-block: var(--space-4); border-block: 1px solid var(--line); text-wrap: balance; }
.pull footer { font-family: var(--font-body); font-weight: 400; letter-spacing: 0; font-size: 0.9375rem; line-height: 1.5; color: var(--ink-muted); margin-block-start: var(--space-2); }
.article__body > hr { border: 0; border-block-start: 1px solid var(--line); margin-block-end: 0; }
.article__body > hr + * { margin-block-start: var(--space-5); }

/* C07 Operator credential: prose, found by class only. */
.credential { max-width: var(--measure); }

/* C08 Figure that carries the argument */
.stat { display: grid; gap: var(--space-1); }
.stat__value { font-family: var(--font-head); font-weight: 600; font-size: var(--step-5); line-height: 0.95; letter-spacing: -0.04em; font-variant-numeric: tabular-nums lining-nums; }
.stat__value--green { color: var(--forth-green); }
.stat__label { font-size: var(--step-1); line-height: 1.4; margin-block-start: var(--space-2); }
.stat__source { font-size: 0.9375rem; color: var(--ink-muted); }
.stat-row { display: grid; gap: var(--space-6); }
@media (min-width: 768px) { .stat-row { grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: var(--space-5); } }
.stat-row--2 .stat__value, .stat-row--3 .stat__value { font-size: clamp(2.75rem, 1.5rem + 4.5vw, 5rem); }
.panel { background: var(--graphite); color: var(--paper); padding: var(--space-5) var(--gutter); margin-inline: calc(var(--gutter) * -1); }
@media (min-width: 768px) { .panel { padding: var(--space-6); margin-inline: 0; } }
.panel .stat__source, .panel .muted { color: var(--paper-muted); }
.panel a { color: var(--paper); }
.panel .stat__value--green { color: var(--paper); }

/* C09 Q&A block */
.qa h2 { margin-block-end: var(--space-5); }
.qa__item { max-width: var(--measure); padding-block: var(--space-4); border-block-start: 1px solid var(--line); }
.qa__item:last-child { border-block-end: 1px solid var(--line); }
.qa__item h3 { margin-block-end: var(--space-2); }

/* C10 Byline and freshness */
.byline { display: flex; align-items: center; gap: var(--space-3); font-size: 0.9375rem; }
.byline img { width: 48px; height: 48px; border-radius: 50%; flex: none; }
.byline__meta { color: var(--ink-muted); }
.byline__name { color: var(--ink); font-weight: 600; display: block; }
.bio { display: flex; gap: var(--space-4); align-items: flex-start; max-width: var(--measure); padding-block-start: var(--space-5); border-block-start: 1px solid var(--line); }
.bio img { width: 48px; height: 48px; border-radius: 50%; flex: none; }
.bio p { font-size: 0.9375rem; }
.bio p + p { margin-block-start: var(--space-1); }
.freshness { display: flex; flex-wrap: wrap; gap: 0 var(--space-3); }
/* Meta line beneath the byline: outcome tag, profession tag, optional reading time as plain text. */
.meta { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-3); font-size: 0.9375rem; color: var(--graphite); }
.meta a { color: var(--graphite); }
.meta a:hover { color: var(--forth-green); }

/* C11 Source citation */
.source, cite.source { font-style: normal; color: var(--ink-muted); font-size: 0.9375rem; }
.sources { max-width: var(--measure); }
.sources h2 { margin-block-end: var(--space-3); }
.sources ol { font-size: 0.9375rem; color: var(--ink-muted); }
.sources li + li { margin-block-start: var(--space-2); }

/* C12 CTA block */
.cta { padding-block-start: var(--space-6); border-block-start: 1px solid var(--line); }
.cta h2 { max-width: 20em; }
.cta p { max-width: var(--measure); margin-block-start: var(--space-3); }
.cta__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-5); margin-block-start: var(--space-5); }

/* C13 Figure (image, screenshot, video) */
.media { max-width: var(--measure); }
.media--wide { max-width: none; }
.media img, .media video { width: 100%; height: auto; }
.media--screenshot img { border: 1px solid var(--line); }
.media figcaption { margin-block-start: var(--space-2); font-size: 0.9375rem; color: var(--ink-muted); }
.media video { background: var(--graphite); }

/* C14 Comparison table */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border-block: 1px solid var(--line); }
.table-wrap:focus-visible { outline-offset: 0; }
.table-hint { font-size: 0.9375rem; color: var(--ink-muted); margin-block-end: var(--space-2); }
@media (min-width: 1024px) { .table-hint { display: none; } }
.table { width: 100%; border-collapse: collapse; font-size: 0.9375rem; font-variant-numeric: tabular-nums lining-nums; }
.table caption { text-align: start; padding-block: var(--space-3); font-weight: 600; }
.table th, .table td { text-align: start; vertical-align: top; padding: var(--space-3) var(--space-3) var(--space-3) 0; border-block-start: 1px solid var(--line); min-width: 9rem; }
.table th { font-weight: 600; }
.table thead th { border-block-start: 0; }
.table th:first-child, .table td:first-child { position: sticky; inset-inline-start: 0; background: var(--paper); z-index: 1; }
.table--graphite { color: var(--paper); }
.table-wrap--graphite { background: var(--graphite); padding-inline: var(--gutter); margin-inline: calc(var(--gutter) * -1); border: 0; }
@media (min-width: 768px) { .table-wrap--graphite { margin-inline: 0; padding: var(--space-4) var(--space-6); } }
.table--graphite th, .table--graphite td { border-color: rgba(255, 255, 255, 0.18); }
.table--graphite th:first-child, .table--graphite td:first-child { background: var(--graphite); }
.table--graphite caption { color: var(--paper); }

/* C15 Checklist */
.checklist { max-width: var(--measure); }
.checklist li { padding-block: var(--space-3); border-block-start: 1px solid var(--line); }
.checklist li:last-child { border-block-end: 1px solid var(--line); }
.checklist li + li { margin-block-start: 0; }
.checklist strong { display: block; }

/* C16 What we will not do: body list, no special styling. */
.will-not { max-width: var(--measure); }

/* C17 Three outcomes */
.outcomes { display: grid; gap: var(--space-5); list-style: none; padding: 0; }
@media (min-width: 768px) { .outcomes { grid-template-columns: repeat(3, 1fr); gap: var(--space-5); } }
.outcomes > li { padding-block-start: var(--space-4); border-block-start: 1px solid var(--ink); }
.outcomes h3 { margin-block-end: var(--space-2); }
.outcomes p + p { margin-block-start: var(--space-2); }
.outcomes .media { margin-block-end: var(--space-4); }
.outcomes .outcome__links { margin-block-start: var(--space-3); }

/* C18 Related reading */
.related h2 { margin-block-end: var(--space-4); }
.related ul { list-style: none; padding: 0; max-width: var(--measure); }
.related li { padding-block: var(--space-3); border-block-start: 1px solid var(--line); }
.related li:last-child { border-block-end: 1px solid var(--line); }
.related a { font-weight: 600; }
.related p { margin-block-start: var(--space-1); }
.related time { font-size: 0.9375rem; color: var(--ink-muted); }

/* C19 Profession or location index */
.index { list-style: none; padding: 0; display: grid; gap: 0; border-block-start: 1px solid var(--line); }
@media (min-width: 768px) { .index { grid-template-columns: 1fr 1fr; column-gap: var(--space-6); } }
.index li { padding-block: var(--space-3); border-block-end: 1px solid var(--line); }
.index a { font-weight: 600; }
.index p { margin-block-start: var(--space-1); }

/* C20 Contact form */
.form { display: grid; gap: var(--space-4); max-width: 30rem; }
.field label { display: block; font-weight: 600; margin-block-end: var(--space-1); }
.field input, .field select, .field textarea { display: block; width: 100%; padding: 0.75rem 0.875rem; border: 1px solid var(--ink); border-radius: var(--radius); background: var(--paper); min-height: 48px; }
.field textarea { min-height: 8rem; resize: vertical; }
.field select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--ink) 50%), linear-gradient(135deg, var(--ink) 50%, transparent 50%); background-position: calc(100% - 1.25rem) 50%, calc(100% - 0.875rem) 50%; background-size: 6px 6px; background-repeat: no-repeat; padding-inline-end: 2.5rem; }
.field__hint { font-size: 0.9375rem; color: var(--ink-muted); margin-block-start: var(--space-1); }
.field__error { font-size: 0.9375rem; margin-block-start: var(--space-1); min-height: 1.5em; }
.field[data-invalid] input, .field[data-invalid] select { border-width: 2px; }
.form__status { min-height: 1.6em; }
.turnstile { min-height: 0; }

/* C21 Calendar placeholder */
.calendar { border: 1px solid var(--line); padding: var(--space-4); }
.calendar__embed { min-height: 40rem; margin-block-start: var(--space-4); }
.calendar__embed iframe { width: 100%; min-height: 40rem; border: 0; }
.calendar h2 { margin-block-end: var(--space-3); }
.calendar p + p { margin-block-start: var(--space-2); }
.calendar .button--secondary { margin-block-start: var(--space-4); }

/* C22 Definition block */
.definition { font-size: var(--step-1); line-height: 1.45; max-width: 36rem; padding-block-end: var(--space-4); border-block-end: 1px solid var(--line); }
.definition dfn { font-style: normal; font-weight: 600; }

/* C23 Pricing anchors: two ledger rows (name | price | includes). Row 1 Graphite, row 2 Paper with an Ink rule above and below. Never two Graphite rows. */
.ledger__row { display: grid; gap: var(--space-4); padding: var(--space-6) var(--gutter); }
.ledger__row--graphite { background: var(--graphite); color: var(--paper); margin-inline: calc(var(--gutter) * -1); }
.ledger__row--paper { border-block: 1px solid var(--ink); padding-inline: 0; }
@media (min-width: 768px) { .ledger__row--graphite { margin-inline: 0; padding-inline: var(--space-6); } .ledger__row--paper { padding-inline: var(--space-6); } }
@media (min-width: 1024px) { .ledger__row { grid-template-columns: 1fr 1fr 1.3fr; gap: var(--space-6); } }
.ledger h2, .ledger h3 { font-size: var(--step-2); letter-spacing: -0.02em; margin: 0; }
.ledger__desc { margin-block-start: var(--space-3); max-width: 22rem; line-height: 1.5; }
.ledger__from, .ledger__unit { display: block; font-family: var(--font-body); font-size: var(--step-0); font-weight: 500; letter-spacing: 0; }
.ledger__from { margin-block-end: var(--space-2); }
.ledger__unit { margin-block-start: var(--space-2); }
.ledger__price { font-family: var(--font-head); font-weight: 600; font-size: clamp(3.25rem, 2rem + 4.5vw, 6rem); line-height: 0.95; letter-spacing: -0.04em; font-variant-numeric: tabular-nums lining-nums; }
.ledger__note { margin-block-start: var(--space-4); max-width: 22rem; line-height: 1.5; }
.ledger ul { list-style: none; padding: 0; margin: 0; }
.ledger li { padding-block: var(--space-2) var(--space-3); line-height: 1.5; border-block-end: 1px solid rgba(255, 255, 255, 0.25); }
.ledger__row--paper li { border-color: var(--line); }
.ledger li:last-child { border-block-end: 0; padding-block-end: 0; }
.ledger-terms { margin-block-start: var(--space-3); font-size: 0.9375rem; }
/* Price drivers, T08 only: three short reasons the figure moves above the floor. */
.drivers { display: grid; gap: var(--space-4); }
@media (min-width: 768px) { .drivers { grid-template-columns: repeat(3, 1fr); gap: var(--space-5); } }
.drivers h3 { font-size: var(--step-1); }
.drivers p { margin-block-start: var(--space-2); }
/* Ownership line beside the CTA. */
.cta__own { font-weight: 500; }

/* C24 Case-study result strip */
.results__context { font-weight: 600; margin-block-end: var(--space-4); }
.results__timeframe { margin-block-start: var(--space-4); font-size: 0.9375rem; color: var(--ink-muted); }

/* C25 Notice */
.notice { max-width: var(--measure); border: 1px solid var(--line); padding: var(--space-3) var(--space-4); font-size: 0.9375rem; }

/* C26 Contents: anchor list to every H2. Sticky rail from 1100px on T16, inline beneath the answer block below. */
.contents { font-size: 0.9375rem; }
.contents__title { font-weight: 600; margin-block-end: var(--space-2); }
.contents ul { list-style: none; padding: 0; }
.contents li + li { margin-block-start: var(--space-2); }
.contents a { color: var(--ink); }
.contents a:hover { color: var(--forth-green); }

/* C27 Figure. C28 Screenshot adds figure--screenshot. C29 Wide breakout adds wide. */
.figure img { width: 100%; height: auto; }
.figure figcaption { margin-block-start: var(--space-2); font-size: 0.9375rem; color: var(--graphite); }
.figure__source { display: block; margin-block-start: var(--space-1); color: var(--ink-muted); }
.figure--screenshot img { border: 1px solid var(--line); border-radius: 4px; }
.wide { max-width: none; }

/* Page rules */
/* T01 hero: H1, answer, green button and pricing link fit one screen at 360px. No price figure on the homepage. */
.t01-hero .answer { border: 0; padding-block-end: 0; line-height: 1.4; }
.t01-hero > * + * { margin-block-start: var(--space-3); }
.t01-hero .answer { margin-block-start: var(--space-3); }
.t01-actions { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-2); }
@media (min-width: 768px) { .t01-hero > * + * { margin-block-start: var(--space-4); } .t01-hero .answer { line-height: 1.45; } .t01-actions { gap: var(--space-3); } }
.page:has(.t01-hero) { padding-block-start: var(--space-4); }
@media (min-width: 768px) { .page:has(.t01-hero) { padding-block-start: var(--space-7); } }
.t01-actions .button { display: inline-block; }
.t01-hero .credential { margin-block-start: var(--space-6); padding-block-start: var(--space-4); border-block-start: 1px solid var(--line); }
.t01-promise > * + * { margin-block-start: var(--space-6); }
.t11-columns { display: grid; gap: var(--space-6); }
@media (min-width: 1024px) { .t11-columns { grid-template-columns: 1fr 1fr; gap: var(--space-7); } }
.t10-founder { display: grid; gap: var(--space-4); }
@media (min-width: 768px) { .t10-founder { grid-template-columns: 1fr 2fr; gap: var(--space-6); } }
.t10-founder .media { max-width: 16rem; }
.t10-lockup { width: 18rem; }
.filter-row { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); list-style: none; padding: var(--space-3) 0; border-block: 1px solid var(--line); }
.filter-row a { font-weight: 600; }
.article { max-width: var(--measure); }
.article > * + * { margin-block-start: var(--space-6); }
.article .question h2 { max-width: none; }
/* T16 Insight article, body class t16: 1200px container, 24px padding, body 18px then 19px from 1100px. From 1100px: 200px contents rail, 720px column (--column), right gutter; .wide spans column plus gutter. Text keeps a 672px measure (--measure). */
.t16 { --wrap: 75rem; --gutter: 1.5rem; --column: 45rem; --measure: 42rem; --step-0: 1.125rem; }
.t16 .page { padding-block-start: var(--space-5); }
.t16 h1 { font-size: clamp(2.25rem, 1.75rem + 2.2vw, 3.25rem); line-height: 1.1; letter-spacing: -0.01em; }
.t16 .page-head > * + * { margin-block-start: var(--space-3); }
.t16 .page-head .byline, .t16 .page-head .answer, .t16 .page-head .definition { margin-block-start: var(--space-4); }
.t16 .page-head .meta { margin-block-start: var(--space-2); }
.t16 .answer, .t16 .definition { max-width: none; }
.t16 .article { max-width: var(--wrap); }
.t16 .article > * + * { margin-block-start: var(--space-6); }
.t16 .contents { margin-block-start: var(--space-4); }
.t16 .page-head, .t16 .article__body > * { max-width: var(--column); }
.t16 .article__body > * + * { margin-block-start: var(--space-6); }
.t16 .article__body > .wide { max-width: none; }
@media (min-width: 768px) { .t16 .page { padding-block-start: var(--space-6); } }
@media (min-width: 1100px) {
  .t16 { --step-0: 1.1875rem; }
  .t16 .article { display: grid; grid-template-columns: 12.5rem var(--column) minmax(0, 1fr); column-gap: var(--space-5); align-items: start; }
  .t16 .page-head { grid-column: 2 / 4; max-width: none; }
  .t16 .page-head > * { max-width: var(--column); }
  .t16 .page-head h1 { max-width: none; text-wrap: balance; }
  .t16 .contents { grid-column: 1; grid-row: 2; position: sticky; inset-block-start: var(--space-5); margin-block-start: var(--space-6); }
  .t16 .article__body { grid-column: 2 / 4; grid-row: 2; max-width: none; }
}
.diagram { max-width: var(--measure); }
.diagram svg { width: 100%; height: auto; font-family: var(--font-body); }
.download { display: inline-block; font-weight: 600; }
.download::after { content: " (CSV)"; font-weight: 400; color: var(--ink-muted); }

/* C30 Numbered sequence: steps or triggers under a two-digit numeral. Stacks under 768px, --cols columns from 1024px. */
.numbered { list-style: none; padding: 0; display: grid; counter-reset: numbered; border-block-start: 1px solid var(--ink); max-width: none; }
.numbered > li { counter-increment: numbered; padding-block: var(--space-4) var(--space-5); border-block-end: 1px solid var(--line); }
.numbered > li + li { margin-block-start: 0; }
.numbered > li::before { content: counter(numbered, decimal-leading-zero); display: block; font-family: var(--font-head); font-weight: 600; font-size: var(--step-3); line-height: 1; letter-spacing: -0.03em; font-variant-numeric: tabular-nums lining-nums; margin-block-end: var(--space-4); }
.numbered h3 { font-size: var(--step-1); margin-block: 0 var(--space-2); }
.numbered p { max-width: 26rem; }
@media (min-width: 768px) {
  .numbered { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--space-5); border-block-start: 0; }
  .numbered > li { border-block-end: 0; border-block-start: 1px solid var(--ink); }
}
@media (min-width: 1024px) { .numbered { grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); } }

/* C31 Timeline: weeks or months in order on one continuous Ink rule with a square marker per step. Vertical under 768px, horizontal above. */
.timeline { list-style: none; padding: 0; display: grid; max-width: none; }
.timeline > li { position: relative; padding-inline-start: var(--space-5); padding-block-end: var(--space-5); border-inline-start: 1px solid var(--ink); }
.timeline > li + li { margin-block-start: 0; }
.timeline > li:last-child { border-inline-start-color: transparent; padding-block-end: 0; }
.timeline > li::before { content: ""; position: absolute; inset-inline-start: -5px; inset-block-start: 0.45em; width: 9px; height: 9px; background: var(--ink); }
.timeline__label { display: block; font-family: var(--font-head); font-weight: 600; font-size: var(--step-1); letter-spacing: -0.01em; line-height: 1.2; margin-block-end: var(--space-2); }
.timeline p { font-size: 0.9375rem; line-height: 1.5; max-width: 22rem; }
@media (min-width: 768px) {
  .timeline { grid-template-columns: repeat(var(--cols, 5), minmax(0, 1fr)); }
  .timeline > li { border-inline-start: 0; border-block-start: 1px solid var(--ink); padding: var(--space-4) var(--space-4) 0 0; }
  .timeline > li:last-child { padding-inline-end: 0; }
  .timeline > li::before { inset-inline-start: 0; inset-block-start: -5px; }
}

/* C32 Tile grid: linked tiles for the profession, city and 404 indexes. The whole tile is the link. Hover and focus invert to Graphite. */
.tiles { list-style: none; padding: 0; display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); max-width: none; }
.tiles > li { position: relative; display: flex; flex-direction: column; gap: var(--space-2); min-height: 12rem; padding: var(--space-4); background: var(--paper); color: var(--ink); transition: background-color 120ms, color 120ms; }
.tiles > li + li { margin-block-start: 0; }
.tiles__num { font-family: var(--font-head); font-weight: 600; font-size: 0.9375rem; font-variant-numeric: tabular-nums lining-nums; margin-block-end: var(--space-3); }
.tiles h3 { font-size: var(--step-1); }
.tiles h3 a { color: inherit; text-decoration: none; }
.tiles h3 a::after { content: ""; position: absolute; inset: 0; }
.tiles h3 a:focus-visible { outline: none; }
.tiles p { font-size: 0.9375rem; line-height: 1.5; }
.tiles__arrow { margin-block-start: auto; padding-block-start: var(--space-3); font-family: var(--font-head); font-weight: 600; font-size: 0.9375rem; }
.tiles > li:hover, .tiles > li:focus-within { background: var(--graphite); color: var(--paper); }
.tiles > li:has(a:focus-visible) { outline: var(--focus-ring); outline-offset: -2px; }
@media (min-width: 640px) { .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .tiles { grid-template-columns: repeat(var(--cols, 4), minmax(0, 1fr)); } }

/* C33 Panel links: two large links inside a Graphite panel. */
.panel h2 { margin-block-end: var(--space-4); }
.panel-links { display: grid; gap: var(--space-3); }
@media (min-width: 768px) { .panel-links { grid-template-columns: 1fr 1fr; gap: var(--space-6); } }
.panel-links a { display: block; color: var(--paper); text-decoration: none; padding-block: var(--space-4); border-block-start: 1px solid rgba(255, 255, 255, 0.35); }
.panel-links strong { display: block; font-family: var(--font-head); font-size: var(--step-2); font-weight: 600; letter-spacing: -0.02em; line-height: 1.15; margin-block-end: var(--space-2); }
.panel-links a:hover strong { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.12em; }
.panel-links span { display: block; font-size: 0.9375rem; }

/* C34 Map: Australia from Natural Earth data (assets/map-australia.svg carries the same path). Land Graphite, in-person cities as filled Paper dots, remote cities as Paper rings. */
.map { display: grid; gap: var(--space-5); align-items: start; }
@media (min-width: 1024px) { .map { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: var(--space-7); } }
.map__figure svg { width: 100%; height: auto; }
.map__land { fill: var(--graphite); }
.map__dot { fill: var(--paper); stroke: var(--graphite); stroke-width: 2; }
.map__dot--remote { fill: var(--graphite); stroke: var(--paper); stroke-width: 3; }
.map__leader { stroke: var(--ink); stroke-width: 1; fill: none; }
.map__figure text { font-family: var(--font-body); font-size: 15px; font-weight: 500; fill: var(--ink); }
.map__figure figcaption { margin-block-start: var(--space-2); font-size: 0.9375rem; }
.map .index { grid-template-columns: 1fr; border-block-start: 1px solid var(--ink); }
.map .index li { display: grid; grid-template-columns: 2.5rem 1fr; column-gap: var(--space-3); padding-block: var(--space-4); }
.map .index li > * { grid-column: 2; }
.map .index .index__num { grid-column: 1; grid-row: 1 / 3; font-family: var(--font-head); font-weight: 600; font-variant-numeric: tabular-nums lining-nums; }
.map .index__mode { display: block; font-size: 0.9375rem; font-weight: 600; margin-block-start: var(--space-1); }
.map .index p { margin-block-start: var(--space-1); }

/* T12 and T18 */
.t12 .page-head .answer, .t18 .page-head .answer { border: 0; padding-block-end: 0; }
.t12 .eyebrow, .t18 .eyebrow { font-weight: 600; font-size: 0.9375rem; }
.t12 h1 { font-size: var(--step-5); letter-spacing: -0.04em; }
.t18 .display-xl { font-family: var(--font-head); font-weight: 600; font-size: clamp(7rem, 3rem + 20vw, 18rem); line-height: 0.85; letter-spacing: -0.06em; color: var(--forth-green); font-variant-numeric: tabular-nums lining-nums; }
.t18 h1 { font-size: var(--step-3); }
.t18 .page-head > * + * { margin-block-start: var(--space-4); }
.t18 .page-head p { max-width: var(--measure); }

/* hidden attribute wins over component display rules */
[hidden] { display: none; }

/* Print */
@media print {
  body { padding: 0; font-size: 11pt; }
  .site-header, .site-footer, .mobile-bar, .cta, .skip-link, .breadcrumbs, .nav-primary, .contents { display: none; }
  .page > * + * { margin-block-start: 1.5rem; }
  .checklist li { break-inside: avoid; }
  .panel, .table-wrap--graphite, .ledger__row--graphite, .tiles > li:hover { background: none; color: var(--ink); border: 1px solid var(--ink); }
  .panel .stat__source, .panel a, .ledger__row--graphite a { color: var(--ink); }
  a { color: var(--ink); }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 0.85em; }
}