/* Generated from packages/design/src/tokens.ts. Change the tokens, not this. */

:root {
  --canvas: #FAFAFA;
  --surface: #FFFFFF;
  --sunken: #F1F1F1;
  --ink: #0A0A0A;
  --ink-muted: #5E5E5E;
  --ink-faint: #9B9B9B;
  --line: #E7E7E7;
  --line-strong: #CFCFCF;
  --primary: #0A0A0A;
  --primary-hover: #2B2B2B;
  --on-primary: #FFFFFF;
  --met: #0A6B43;
  --met-soft: #E8F5EE;
  --met-line: #BFE3CF;
  --close: #855000;
  --close-soft: #FFF4DC;
  --close-line: #F0D9A0;
  --short: #B3261E;
  --short-soft: #FDECEA;
  --short-line: #F3C4BF;
  --focus: #0A0A0A;
  --shadow: rgba(0, 0, 0, 0.16);
  --pass-bg: #0A0A0A;
  --pass-ink: #FFFFFF;
  --pass-ink-muted: #A8A8A8;
  --pass-line: rgba(255, 255, 255, 0.16);
  --pass-track: rgba(255, 255, 255, 0.2);
  --verdict-met: #3DDC97;
  --verdict-close: #FFC53D;
  --verdict-short: #FF6B5E;
  --verdict-ink: #0A0A0A;
  --font-sans: 'Instrument Sans Variable', 'Helvetica Neue', Arial, system-ui, sans-serif;
  --font-mono: 'Geist Mono Variable', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  --text-figure: 4.5rem;
  --leading-figure: 1;
  --tracking-figure: -0.045em;
  --weight-figure: 550;
  --text-h1: 2.125rem;
  --leading-h1: 1.1;
  --tracking-h1: -0.03em;
  --weight-h1: 600;
  --text-h2: 1.25rem;
  --leading-h2: 1.25;
  --tracking-h2: -0.02em;
  --weight-h2: 600;
  --text-h3: 1rem;
  --leading-h3: 1.4;
  --tracking-h3: -0.01em;
  --weight-h3: 600;
  --text-lead: 1.125rem;
  --leading-lead: 1.5;
  --tracking-lead: -0.005em;
  --weight-lead: 400;
  --text-body: 1rem;
  --leading-body: 1.55;
  --tracking-body: 0em;
  --weight-body: 400;
  --text-small: 0.875rem;
  --leading-small: 1.5;
  --tracking-small: 0em;
  --weight-small: 400;
  --text-caption: 0.78125rem;
  --leading-caption: 1.45;
  --tracking-caption: 0em;
  --weight-caption: 500;
  --text-label: 0.8125rem;
  --leading-label: 1.35;
  --tracking-label: 0em;
  --weight-label: 500;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --radius-sm: 5px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-pill: 999px;
  --content-width: 920px;
  --rail-width: 240px;
  --touch: 44px;
  --quick: 140ms;
  --base: 240ms;
  --slow: 620ms;
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    --canvas: #000000;
    --surface: #0F0F0F;
    --sunken: #1A1A1A;
    --ink: #F5F5F5;
    --ink-muted: #A3A3A3;
    --ink-faint: #6B6B6B;
    --line: #242424;
    --line-strong: #3A3A3A;
    --primary: #FFFFFF;
    --primary-hover: #DEDEDE;
    --on-primary: #0A0A0A;
    --met: #52D69A;
    --met-soft: #0E2419;
    --met-line: #1D4A33;
    --close: #F5B94C;
    --close-soft: #2A1F08;
    --close-line: #52400F;
    --short: #FF7A6E;
    --short-soft: #2D1210;
    --short-line: #5C2420;
    --focus: #FFFFFF;
    --shadow: rgba(0, 0, 0, 0.6);
    --pass-bg: #171717;
    --pass-ink: #FFFFFF;
    --pass-ink-muted: #A8A8A8;
    --pass-line: rgba(255, 255, 255, 0.14);
    --pass-track: rgba(255, 255, 255, 0.2);
  }
}

:root[data-theme='dark'] {
  --canvas: #000000;
  --surface: #0F0F0F;
  --sunken: #1A1A1A;
  --ink: #F5F5F5;
  --ink-muted: #A3A3A3;
  --ink-faint: #6B6B6B;
  --line: #242424;
  --line-strong: #3A3A3A;
  --primary: #FFFFFF;
  --primary-hover: #DEDEDE;
  --on-primary: #0A0A0A;
  --met: #52D69A;
  --met-soft: #0E2419;
  --met-line: #1D4A33;
  --close: #F5B94C;
  --close-soft: #2A1F08;
  --close-line: #52400F;
  --short: #FF7A6E;
  --short-soft: #2D1210;
  --short-line: #5C2420;
  --focus: #FFFFFF;
  --shadow: rgba(0, 0, 0, 0.6);
  --pass-bg: #171717;
  --pass-ink: #FFFFFF;
  --pass-ink-muted: #A8A8A8;
  --pass-line: rgba(255, 255, 255, 0.14);
  --pass-track: rgba(255, 255, 255, 0.2);
}


/* The two typefaces, served from your own site so no visit is reported to a font host. Latin only. */

@font-face {
  font-family: 'Instrument Sans Variable';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('fonts/instrument-sans.woff2') format('woff2-variations');
}

@font-face {
  font-family: 'Geist Mono Variable';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('fonts/geist-mono.woff2') format('woff2-variations');
}

/* Status Tracker starter styles for the public site.
   Load tokens.css and fonts.css first. Everything here is built from the variables in tokens.css,
   so the public site and the product stay in step. Light and dark both work with no extra code. */

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

body {
  margin: 0;
  background: var(--canvas);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--text-body);
  line-height: var(--leading-body);
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3 {
  margin: 0;
  font-weight: 600;
  text-wrap: balance;
}

/* A page's main heading. On the public site it can run larger than in the product. */
h1 {
  font-size: clamp(2.25rem, 1.2rem + 4.4vw, 4.25rem);
  line-height: 1;
  letter-spacing: -0.045em;
}

h2 {
  font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.25rem);
  line-height: 1.12;
  letter-spacing: -0.03em;
}

h3 {
  font-size: var(--text-h2);
  line-height: var(--leading-h2);
  letter-spacing: var(--tracking-h2);
}

p {
  margin: 0 0 var(--space-4);
  max-width: 62ch;
}

.lead {
  font-size: var(--text-lead);
  line-height: var(--leading-lead);
  color: var(--ink-muted);
}

/* The small grey line above a figure or a section. Sentence case, never capitals. */
.label {
  font-size: var(--text-label);
  font-weight: var(--weight-label);
  color: var(--ink-muted);
}

.mono {
  font-family: var(--font-mono);
  letter-spacing: 0.04em;
}

/* Links are ink with a grey underline that turns solid under the pointer. */
a {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: var(--line-strong);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
}

a:hover {
  text-decoration-color: currentColor;
}

:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

/* Buttons have square shoulders. Only verdict badges are pill-shaped. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--touch);
  padding: 0 18px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-md);
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-size: 0.94rem;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
}

.btn:hover {
  border-color: var(--ink);
}

.btn-primary {
  background: var(--primary);
  border-color: var(--primary);
  color: var(--on-primary);
}

.btn-primary:hover {
  background: var(--primary-hover);
  border-color: var(--primary-hover);
}

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
}

/* The solid panel: black on a light page, graphite on a dark one. Use it once per screen, for the thing that matters most. */
.pass {
  background: var(--pass-bg);
  color: var(--pass-ink);
  border-radius: var(--radius-xl);
  padding: var(--space-8);
  box-shadow: inset 0 0 0 1px var(--pass-line);
}

.pass .label {
  color: var(--pass-ink-muted);
}

/* The verdict. These three colours mean on track, close and short, and are used for nothing else. */
.verdict {
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  border-radius: var(--radius-pill);
  color: var(--verdict-ink);
  font-size: var(--text-small);
  font-weight: 650;
}

.verdict-met {
  background: var(--verdict-met);
}

.verdict-close {
  background: var(--verdict-close);
}

.verdict-short {
  background: var(--verdict-short);
}

/* A tier shown as a level: <span class="level"><i class="on"></i><i class="on"></i><i></i><i></i><i></i></span> */
.level {
  display: inline-flex;
  gap: 3px;
  height: 18px;
  vertical-align: middle;
}

.level i {
  width: 4px;
  height: 100%;
  border-radius: 1px;
  background: currentColor;
  opacity: 0.28;
}

.level i.on {
  opacity: 1;
}

/* The ruler: <div class="ruler" style="--at: 68%; --target: 87%"></div>
   --at is how far along the solid bar runs and --target is where the tall line sits. */
.ruler {
  position: relative;
  height: 26px;
  color: var(--ink);
  background:
    linear-gradient(currentColor, currentColor) left bottom / var(--at, 60%) 10px no-repeat,
    linear-gradient(var(--line-strong), var(--line-strong)) left bottom / 100% 10px no-repeat,
    repeating-linear-gradient(90deg, var(--ink-faint) 0 1px, transparent 1px 24px) left 3px / 100% 8px no-repeat;
}

.ruler::after {
  content: '';
  position: absolute;
  left: var(--target, 85%);
  top: 0;
  bottom: -4px;
  width: 2px;
  background: currentColor;
}

.pass .ruler {
  color: var(--pass-ink);
  background:
    linear-gradient(currentColor, currentColor) left bottom / var(--at, 60%) 10px no-repeat,
    linear-gradient(var(--pass-track), var(--pass-track)) left bottom / 100% 10px no-repeat,
    repeating-linear-gradient(90deg, var(--pass-ink-muted) 0 1px, transparent 1px 24px) left 3px / 100% 8px no-repeat;
}

/* The line every page that describes the product must carry. */
.disclaimer {
  font-size: var(--text-caption);
  line-height: var(--leading-caption);
  color: var(--ink-muted);
  max-width: 62ch;
}

/* Status Tracker public site.
   Everything here sits on the brand pack: tokens.css for colours and sizes, starter.css for the
   button, the pass, the verdict, the level bars and the ruler. Use the variables, never a colour
   written out, so light and dark both keep working. */

:root {
  --gutter: 20px;
  --band: 72px;
}

@media (min-width: 720px) {
  :root {
    --gutter: 40px;
    --band: 112px;
  }
}

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

/* Leave room above a section reached from a link, so its heading is not hard against the top. */
section[id] {
  scroll-margin-top: var(--space-6);
}

.wrap {
  width: min(100% - 2 * var(--gutter), 1120px);
  margin-inline: auto;
}

/* Read aloud, not shown. */
.sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.skip {
  position: absolute;
  left: var(--gutter);
  top: -100px;
  z-index: 2;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  background: var(--primary);
  color: var(--on-primary);
  font-weight: 600;
  text-decoration: none;
}

.skip:focus {
  top: var(--space-2);
}

.icon {
  flex: none;
}

/* ---------- The bar across the top ---------- */

.top .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  min-height: 72px;
}

.top-logo,
.foot-logo {
  display: inline-flex;
  color: var(--ink);
}

.top-logo svg {
  display: block;
  width: auto;
  height: 24px;
}

.top-nav {
  display: none;
  gap: var(--space-8);
}

.top-nav a,
.top-signin {
  display: inline-flex;
  align-items: center;
  min-height: var(--touch);
  color: var(--ink-muted);
  font-size: 0.94rem;
  font-weight: 500;
  text-decoration: none;
}

.top-nav a:hover,
.top-signin:hover {
  color: var(--ink);
}

.top-actions {
  display: flex;
  align-items: center;
  gap: var(--space-5);
}

/* On a phone the bar has room for the logo and "Sign in" only. The trial button is in the page below. */
.top-actions .btn {
  display: none;
}

@media (min-width: 560px) {
  .top-actions .btn {
    display: inline-flex;
  }
}

@media (min-width: 900px) {
  .top-nav {
    display: flex;
  }
}

/* ---------- The opening ---------- */

.hero {
  padding: clamp(28px, 5vw, 80px) 0 var(--band);
}

.hero-grid {
  display: grid;
  gap: var(--space-12);
}

@media (min-width: 1000px) {
  .hero-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 480px);
    align-items: center;
    gap: var(--space-16);
  }
}

.hero h1 {
  margin-top: var(--space-4);
  font-size: clamp(2.25rem, 1.3rem + 4vw, 3.5rem);
  line-height: 1.02;
}

/* The first half of the line is held back in grey, so the eye lands on the second. */
.hero h1 span {
  display: block;
  color: var(--ink-muted);
}

.hero .lead {
  margin: var(--space-6) 0 0;
  max-width: 34em;
}

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-8);
}

.btn-lg {
  min-height: 52px;
  padding: 0 var(--space-6);
  font-size: 1rem;
}

.btn-wide {
  width: 100%;
}

@media (max-width: 479px) {
  .actions .btn {
    flex: 1 1 100%;
  }
}

/* ---------- The wait list form ---------- */

.join {
  margin-top: var(--space-8);
  max-width: 34rem;
}

.join .label {
  display: block;
  margin-bottom: var(--space-2);
}

.join-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.join input[type='email'] {
  flex: 1 1 14rem;
  min-width: 0;
  min-height: 52px;
  padding: 0 var(--space-4);
  border: 1px solid var(--ink-muted);
  border-radius: var(--radius-md);
  background: var(--surface);
  color: var(--ink);
  font: inherit;
}

.join .btn {
  flex: 0 0 auto;
}

@media (max-width: 479px) {
  .join .btn {
    flex: 1 1 100%;
  }
}

/* The trap for programs that fill in every box. It is off the page, and people never reach it. */
.trap {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.band-dark .join input[type='email'] {
  border-color: var(--pass-ink-muted);
  background: transparent;
  color: var(--pass-ink);
}

.note a {
  white-space: nowrap;
}

.note,
.small {
  margin: var(--space-4) 0 0;
  max-width: none;
  color: var(--ink-muted);
  font-size: var(--text-small);
}

/* ---------- The worked example ---------- */

.example {
  display: grid;
  gap: var(--space-3);
}

.pass {
  padding: var(--space-6);
}

@media (min-width: 560px) {
  .pass {
    padding: var(--space-8);
  }
}

.pass-rows {
  display: grid;
  gap: var(--space-5);
}

.pass-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-4);
}

.pass-tier {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin: var(--space-1) 0 0;
  font-size: 1.3rem;
  font-weight: 600;
  letter-spacing: -0.02em;
}

.pass p {
  margin: 0;
  max-width: none;
}

.figure {
  font-size: clamp(3.5rem, 2.4rem + 5vw, 4.5rem);
  font-weight: var(--weight-figure);
  line-height: var(--leading-figure);
  letter-spacing: var(--tracking-figure);
  font-variant-numeric: tabular-nums;
}

/* How the figure is made up: what is already earned, each booked flight, and what is needed. */
.made {
  padding: var(--space-1) var(--space-5);
}

@media (min-width: 560px) {
  .made {
    padding: var(--space-1) var(--space-8);
  }
}

.made-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-4);
  padding: var(--space-3) 0;
  border-top: 1px solid var(--line);
  font-size: 0.94rem;
}

.made-row:first-child {
  border-top: 0;
}

.made-row .what {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-1) var(--space-4);
}

.made-row .n {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.made-total {
  border-top-color: var(--line-strong);
  font-weight: 600;
}

.quiet {
  color: var(--ink-muted);
  font-size: var(--text-small);
}

.route {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-mono);
  letter-spacing: 0.04em;
}

.route i {
  width: 16px;
  height: 1px;
  background: var(--ink-faint);
}

.caption {
  margin: var(--space-1) 0 0;
  color: var(--ink-muted);
  font-size: var(--text-caption);
}

/* ---------- Sections ---------- */

.band {
  padding: var(--band) 0;
  border-top: 1px solid var(--line);
}

/* The section after a dark one needs no line above it. */
.band-first {
  border-top: 0;
}

.band-head {
  max-width: 44rem;
  margin-bottom: var(--space-12);
}

.band-head h2 {
  margin-top: var(--space-3);
}

.band-head .lead {
  margin: var(--space-5) 0 0;
}

/* A section in the pass's own colour: black on a light page, graphite on a dark one. */
.band-dark {
  border-top: 0;
  background: var(--pass-bg);
  color: var(--pass-ink);
}

.band-dark .label,
.band-dark .lead,
.band-dark .note {
  color: var(--pass-ink-muted);
}

.band-dark :focus-visible,
.pass :focus-visible {
  outline-color: var(--pass-ink);
}

.band-dark .btn-primary {
  background: var(--pass-ink);
  border-color: var(--pass-ink);
  color: var(--pass-bg);
}

.band-dark .btn-primary:hover {
  background: var(--pass-ink-muted);
  border-color: var(--pass-ink-muted);
}

/* ---------- The three verdicts ---------- */

.verdicts {
  display: grid;
  gap: var(--space-8);
}

.verdicts > div {
  padding-top: var(--space-6);
  border-top: 1px solid var(--pass-line);
}

.verdicts .says {
  margin: var(--space-5) 0 var(--space-2);
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.02em;
}

.verdicts .means {
  margin: 0;
  color: var(--pass-ink-muted);
}

/* ---------- The three steps ---------- */

.steps {
  display: grid;
  gap: var(--space-8);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Each step hangs from a line with a short mark at its start, like a division on a ruler. */
.steps li {
  position: relative;
  padding-top: var(--space-6);
  border-top: 1px solid var(--line-strong);
}

.steps li::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 2px;
  height: var(--space-3);
  background: var(--ink);
}

.steps .num {
  font-family: var(--font-mono);
  font-size: var(--text-small);
  letter-spacing: 0.04em;
  color: var(--ink-muted);
}

.steps h3 {
  margin: var(--space-3) 0 var(--space-2);
}

.steps p {
  margin: 0;
  color: var(--ink-muted);
}

@media (min-width: 820px) {
  .verdicts,
  .steps {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-10);
  }
}

/* ---------- What it does: a list with a name on the left and what it means on the right ---------- */

.spec {
  margin: 0;
}

.spec > div {
  display: grid;
  gap: var(--space-2);
  padding: var(--space-6) 0;
  border-top: 1px solid var(--line);
}

.spec > div:last-child {
  border-bottom: 1px solid var(--line);
}

.spec dt {
  font-size: var(--text-h2);
  font-weight: var(--weight-h2);
  line-height: var(--leading-h2);
  letter-spacing: var(--tracking-h2);
  text-wrap: balance;
}

.spec dd {
  margin: 0;
  max-width: 62ch;
  color: var(--ink-muted);
}

@media (min-width: 820px) {
  .spec > div {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: var(--space-10);
  }
}

/* ---------- Programmes ---------- */

.programmes {
  display: grid;
  gap: var(--space-4);
}

@media (min-width: 820px) {
  .programmes {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.programme {
  padding: var(--space-6);
}

@media (min-width: 560px) {
  .programme {
    padding: var(--space-8);
  }
}

.programme .tracks {
  margin: var(--space-2) 0 var(--space-6);
  color: var(--ink-muted);
}

.tiers {
  display: grid;
  gap: var(--space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.tiers li {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  font-weight: 600;
}

.next {
  margin: var(--space-8) 0 0;
  color: var(--ink-muted);
}

/* ---------- Pricing ---------- */

.pricing {
  display: grid;
  gap: var(--space-2);
}

@media (min-width: 900px) {
  .pricing {
    grid-template-columns: minmax(0, 1fr) minmax(0, 440px);
    align-items: start;
    gap: var(--space-16);
  }

  .pricing .band-head {
    margin-bottom: 0;
  }
}

.price-card {
  padding: var(--space-6);
}

@media (min-width: 560px) {
  .price-card {
    padding: var(--space-8);
  }
}

.price {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-1) var(--space-3);
  margin: 0;
}

.price .per {
  color: var(--ink-muted);
  font-size: var(--text-lead);
}

.price-alt {
  margin: var(--space-2) 0 0;
  color: var(--ink-muted);
}

.ticks {
  display: grid;
  gap: var(--space-3);
  margin: var(--space-6) 0;
  padding: var(--space-6) 0 0;
  border-top: 1px solid var(--line);
  list-style: none;
}

.ticks li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
}

.ticks .icon {
  margin-top: 3px;
}

/* ---------- Questions ---------- */

.faq {
  max-width: 52rem;
  border-top: 1px solid var(--line);
}

.faq details {
  border-bottom: 1px solid var(--line);
}

.faq summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-4);
  min-height: 64px;
  padding: var(--space-4) 0;
  font-size: 1.0625rem;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}

.faq summary::-webkit-details-marker {
  display: none;
}

/* A plus that becomes a minus when the answer is open. */
.faq summary::after {
  content: '';
  flex: none;
  width: 12px;
  height: 12px;
  background:
    linear-gradient(currentColor, currentColor) center / 100% 1.6px no-repeat,
    linear-gradient(currentColor, currentColor) center / 1.6px 100% no-repeat;
}

.faq details[open] summary::after {
  background: linear-gradient(currentColor, currentColor) center / 100% 1.6px no-repeat;
}

.faq details p {
  margin: 0 0 var(--space-6);
  color: var(--ink-muted);
}

/* ---------- The last word ---------- */

.closing {
  position: relative;
  padding-bottom: calc(var(--band) + var(--space-6));
}

.closing h2 {
  font-size: clamp(2.25rem, 1.2rem + 4.4vw, 4.25rem);
  line-height: 1;
  letter-spacing: -0.045em;
}

.closing .lead {
  margin: var(--space-5) 0 0;
}

/* A ruler's edge along the foot of the section, the same one the share image carries. */
.edge {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 22px;
  background:
    repeating-linear-gradient(90deg, var(--pass-ink) 0 1.5px, transparent 1.5px 70px) left bottom / 100% 22px no-repeat,
    repeating-linear-gradient(90deg, var(--pass-ink-muted) 0 1px, transparent 1px 14px) left bottom / 100% 10px no-repeat;
  opacity: 0.6;
}

/* ---------- The foot of every page ---------- */

.foot {
  padding: var(--space-12) 0 var(--space-10);
}

.foot-grid {
  display: grid;
  gap: var(--space-8);
}

@media (min-width: 720px) {
  .foot-grid {
    grid-template-columns: minmax(0, 1fr) auto auto;
    gap: var(--space-16);
  }
}

.foot-logo svg {
  display: block;
  width: auto;
  height: 22px;
}

.foot-line {
  margin: var(--space-3) 0 0;
  color: var(--ink-muted);
  font-size: var(--text-small);
}

.foot nav {
  display: grid;
  align-content: start;
  gap: var(--space-1);
}

.foot nav a {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  color: var(--ink-muted);
  font-size: 0.94rem;
  text-decoration: none;
}

.foot nav a:hover {
  color: var(--ink);
}

.foot .disclaimer {
  margin: var(--space-10) 0 0;
  padding-top: var(--space-6);
  border-top: 1px solid var(--line);
  max-width: none;
}

.foot-small {
  margin: var(--space-2) 0 0;
  color: var(--ink-muted);
  font-size: var(--text-caption);
}

/* ---------- Pages that are words only ---------- */

.plain {
  padding: var(--band) 0;
  min-height: 50vh;
}

.prose {
  max-width: 44rem;
}

.prose h1 {
  margin: var(--space-3) 0 var(--space-6);
}

.prose .lead {
  margin-bottom: var(--space-8);
}

/* ---------- Movement: the opening rises into place and the ruler fills from the left. Nothing else moves. ---------- */

@media (prefers-reduced-motion: no-preference) {
  .rise {
    animation: rise var(--base) var(--ease) both;
  }

  .rise-late {
    animation-delay: 90ms;
  }

  .hero .ruler {
    animation: fill var(--slow) var(--ease) 260ms both;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

@keyframes rise {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
}

/* The ruler's target line hangs a little below it, so the bottom of the window is left open. */
@keyframes fill {
  from {
    clip-path: inset(0 100% -8px 0);
  }

  to {
    clip-path: inset(0 0 -8px 0);
  }
}

/* The example's ruler, set from the worked example so no page needs styles written into it. */
.example-ruler { --at: 100%; --target: 87%; }