/* ==========================================================================
   The Tracker website's one stylesheet. No page has inline styles or <style>
   blocks (ADR 0004; MarkupRulesTests), so every look on the site is here.

   1. Design tokens: change the look here
   2. Fonts: Public Sans, served by the site itself
   3. Base: the page, text, links, the keyboard focus ring
   4. The frame: skip link, top bar, footer, page widths
   5. Pieces: buttons, eyebrow, lead, the contact address, the drawings
   6. Pages: the home page's sections and its demo form, the privacy note,
      the error page

   Everything after section 1 uses the tokens (var(--...)) for its colours,
   fonts, sizes, spacing, corners and shadows, so the look changes in one
   place. Screen widths in @media can't be tokens (CSS doesn't allow it), so
   the three the site uses are written where they're used:
     40em (640px)  narrower than this, the top bar's links and button go on a
                   second row, under the logo
     48em (768px)  wider than this, the side margins grow from 16px to 32px
     60em (960px)  wider than this, the home page's sections go side by side
                   (a heading beside its text, a row's words beside its
                   picture); narrower, everything is one column, same order
   ========================================================================== */


/* 1. DESIGN TOKENS (look C: white, generous space, one accent blue, dark
   slate text, soft grey lines, rounded corners). Contrast against white is
   noted for each text colour; WCAG 2.1 AA needs 4.5:1 for normal text. */
:root {
  /* Colours */
  --color-accent: #1F5FAD;         /* the one blue: buttons, links, the shield (6.2:1 on white) */
  --color-accent-strong: #174A87;  /* hover on blue, and the focus ring (8.9:1 on white) */
  --color-on-accent: #FFFFFF;      /* text on the blue (6.2:1) */
  --color-text: #1B2533;           /* dark slate: body text and headings (15.5:1) */
  --color-text-muted: #4A5566;     /* secondary text (7.5:1 on white, 7.0:1 on the tint) */
  --color-link: #1F5FAD;           /* text links (6.2:1 on white, 5.8:1 on the tint) */
  --color-eyebrow: #1F5FAD;        /* the small line above a heading */
  --color-bg: #FFFFFF;             /* the page */
  --color-bg-tint: #F3F7FC;        /* a light blue wash: the footer, alternate sections */
  --color-line: #DCE3EC;           /* soft grey lines between parts of the page */
  --color-error: #B42318;          /* the demo form's problems to fix (6.6:1 on white, 6.0:1 on its wash) */
  --color-error-bg: #FEF3F2;       /* a light red wash behind the form's list of problems */
  --color-field-border: #6E7A8A;   /* the edge of a box in the form (4.4:1 on white; WCAG 1.4.11 needs 3:1) */
  --glow: 0 1.5rem 3rem -1.25rem rgba(31, 95, 173, 0.32);  /* the light blue glow under the demo panel */

  /* Type: Public Sans, regular and bold (section 2); the system's own sans-serif while it loads */
  --font-body: "Public Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-mono: ui-monospace, Consolas, "Cascadia Mono", monospace;
  --weight-regular: 400;
  --weight-bold: 700;
  --text-small: 0.9375rem;         /* 15px: the footer, small print */
  --text-body: 1.125rem;           /* 18px: body text */
  --text-button: 1rem;             /* 16px: buttons and the top bar's links */
  --text-lead: 1.25rem;            /* 20px: the opening line of a page or section */
  --text-eyebrow: 0.9375rem;       /* 15px: the small line above a heading */
  --text-h3: 1.375rem;             /* 22px */
  --text-feature: clamp(1.5rem, 1.3rem + 0.8vw, 1.875rem);   /* 24px to 30px: a "What it does" row's heading */
  --text-problem: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);    /* 20px to 24px: the problem's three lines */
  --text-h2: clamp(1.75rem, 1.4rem + 1.4vw, 2.25rem);   /* 28px on a phone to 36px */
  --text-h1: clamp(2.25rem, 1.5rem + 3vw, 3.5rem);      /* 36px on a phone to 56px */
  --line-height: 1.6;
  --line-height-heading: 1.15;
  --line-height-snug: 1.4;         /* large text that isn't a heading */
  --tracking-heading: -0.01em;     /* bold headings set large read better a touch tighter */
  --tracking-eyebrow: 0.04em;      /* capitals set small read better a touch looser */

  /* Space */
  --space-1: 0.25rem;              /* 4px */
  --space-2: 0.5rem;               /* 8px */
  --space-3: 0.75rem;              /* 12px */
  --space-4: 1rem;                 /* 16px */
  --space-5: 1.5rem;               /* 24px */
  --space-6: 2rem;                 /* 32px */
  --space-7: 3rem;                 /* 48px */
  --space-8: 4.5rem;               /* 72px */
  --space-9: 6rem;                 /* 96px */
  --gutter: 16px;                  /* the side margin on a phone */
  --gutter-wide: 32px;             /* the side margin from 48em up */

  /* Widths and sizes */
  --content-width: 72rem;          /* the widest the page's content gets */
  --reading-width: 42rem;          /* a comfortable line length for prose */
  --logo-height: 2.25rem;          /* the logo in the top bar (it is 145 by 40, so about 130px wide) */
  --logo-height-small: 2rem;       /* the logo on a narrow screen */
  --target-size: 2.75rem;          /* 44px: the smallest a button or link to tap */
  --hero-drawing-width: 40rem;     /* 640px: the drawing under the headline, at most its own size */
  --illustration-width: 24rem;     /* 384px: a drawing at most */
  --check-size: 1.5rem;            /* the column the check marks of "Built for IT and security reviewers" sit in */
  --step-size: 2.5rem;             /* 40px: the circle each step of "How a repair moves" has its number in */
  --form-width: 48rem;             /* 768px: the demo panel at its widest when it holds the form */
  --message-height: 9rem;          /* the "Anything we should know?" box: about five lines */

  /* Shape */
  --radius: 0.75rem;               /* 12px: pictures, panels, the form */
  --radius-small: 0.5rem;          /* 8px: buttons, the skip link */
  --check-mark: 0.1875rem solid var(--color-accent);  /* 3px: the strokes of a check mark */
  --point-edge: 0.1875rem solid var(--color-accent);  /* 3px: the blue line over each point of "Built for the people who use it" */
  --line: 1px solid var(--color-line);
  --button-border: 2px;            /* a button's edge (the same colour as its fill until hovered) */
  --underline: 1px;                /* a link's underline */
  --underline-hover: 2px;          /* a link's underline under the pointer */
  --underline-offset: 0.18em;      /* the gap between a link's text and its underline */
  --focus-ring: 3px solid var(--color-accent-strong);
  --focus-offset: 3px;
  --field-border: 1px solid var(--color-field-border);   /* a box in the form */
  --field-border-invalid: 2px solid var(--color-error);  /* a box with a problem to fix, and the list of problems */
  --notice-edge: 4px solid var(--color-accent);          /* the edge of a message about a send */
}


/* 2. FONTS. Public Sans 2.001 (SIL Open Font License 1.1; OFL.txt beside the
   files; docs/adr/0003). Served by the site itself, never from a font
   service. "swap" shows the text at once in the fallback font. */
@font-face {
  font-family: "Public Sans";
  src: url("../fonts/PublicSans-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Public Sans";
  src: url("../fonts/PublicSans-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}


/* 3. BASE */
*,
*::before,
*::after {
  box-sizing: border-box;
}

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

/* The links in the top bar jump down the page; glide there only for people
   who haven't asked their device to cut motion. */
@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--text-body);
  font-weight: var(--weight-regular);
  line-height: var(--line-height);
  overflow-wrap: break-word;
}

img,
svg {
  display: block;
  max-width: 100%;
  height: auto;
}

h1,
h2,
h3 {
  margin: 0 0 var(--space-4);
  color: var(--color-text);
  font-weight: var(--weight-bold);
  line-height: var(--line-height-heading);
  letter-spacing: var(--tracking-heading);
}

h1 {
  font-size: var(--text-h1);
}

h2 {
  font-size: var(--text-h2);
}

h3 {
  font-size: var(--text-h3);
}

p,
ul {
  margin: 0 0 var(--space-4);
}

a {
  color: var(--color-link);
  text-decoration-thickness: var(--underline);
  text-underline-offset: var(--underline-offset);
}

a:hover {
  color: var(--color-accent-strong);
  text-decoration-thickness: var(--underline-hover);
}

/* A clear ring around whatever the keyboard is on. */
:focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-offset);
}

/* The skip link moves the focus to <main>, which isn't something to press,
   so it gets no ring. */
main:focus {
  outline: none;
}


/* 4. THE FRAME */
.wrap {
  max-width: var(--content-width);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

@media (min-width: 48em) {
  .wrap {
    padding-inline: var(--gutter-wide);
  }
}

/* Hidden above the page until the keyboard reaches it. */
.skip-link {
  position: absolute;
  top: var(--space-2);
  left: var(--gutter);
  z-index: 10;
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-small);
  background: var(--color-accent);
  color: var(--color-on-accent);
  font-weight: var(--weight-bold);
  text-decoration: none;
  transform: translateY(-200%);
}

.skip-link:focus {
  color: var(--color-on-accent);
  transform: none;
}

/* The top bar: the logo on the left; the links and the button on the right. */
.site-header {
  border-bottom: var(--line);
  background: var(--color-bg);
}

.site-header__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3) var(--space-6);
  padding-block: var(--space-3);
}

.site-header__brand {
  display: inline-flex;
  align-items: center;
  min-height: var(--target-size);
  margin-right: auto;
  border-radius: var(--radius-small);
}

.site-header__brand img {
  width: auto;
  height: var(--logo-height);
}

.site-header__nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--space-5);
}

.site-header__nav a {
  display: inline-flex;
  align-items: center;
  min-height: var(--target-size);
  color: var(--color-text);
  font-size: var(--text-button);
  font-weight: var(--weight-bold);
  text-decoration: none;
}

.site-header__nav a:hover {
  color: var(--color-accent);
  text-decoration: underline;
}

/* On a narrow screen: the logo on the first row; the links, then the button,
   on the second. That is the markup's order, so the keyboard goes the way the
   eye does (logo, links, button; WCAG 2.4.3), and nothing here moves a piece
   out of that order (AccessibilityTests). On the narrowest phones the links
   may wrap onto two lines beside the button rather than push the page
   sideways, and the logo shrinks a little. */
@media (max-width: 40em) {
  .site-header__bar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0 var(--space-3);
  }

  .site-header__brand {
    grid-column: 1 / -1;
    justify-self: start;
  }

  .site-header__brand img {
    height: var(--logo-height-small);
  }

  .site-header__nav {
    gap: 0 var(--space-4);
  }

  /* Two classes, so this beats .button's own padding, which comes later. */
  .site-header__bar .site-header__button {
    padding-inline: var(--space-3);
  }
}

.site-footer {
  border-top: var(--line);
  background: var(--color-bg-tint);
  color: var(--color-text-muted);
  font-size: var(--text-small);
}

.site-footer__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-2) var(--space-6);
  padding-block: var(--space-6);
}

.site-footer__bar p {
  margin: 0;
}

.site-footer__name {
  margin-right: auto;
  color: var(--color-text);
  font-weight: var(--weight-bold);
}


/* 5. PIECES */

/* A link that stands alone (the footer's "Privacy") is a 44px target, like a
   button; a link inside a sentence stays a plain text link. MarkupRulesTests
   refuses a stand-alone link in a paragraph without this class or .button. */
.action-link {
  display: inline-flex;
  align-items: center;
  min-height: var(--target-size);
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--target-size);
  padding: var(--space-2) var(--space-5);
  border: var(--button-border) solid var(--color-accent);
  border-radius: var(--radius-small);
  background: var(--color-accent);
  color: var(--color-on-accent);
  font-size: var(--text-button);
  font-weight: var(--weight-bold);
  line-height: var(--line-height-heading);
  text-align: center;
  text-decoration: none;
}

.button:hover {
  border-color: var(--color-accent-strong);
  background: var(--color-accent-strong);
  color: var(--color-on-accent);
}

.button--large {
  min-height: calc(var(--target-size) + var(--space-2));
  padding-inline: var(--space-6);
  font-size: var(--text-lead);
}

/* A <button> (the demo form's "Send request") takes the page's font, which
   browsers don't give a button by themselves, and shows it can be pressed. */
button.button {
  font-family: inherit;
  cursor: pointer;
}

.eyebrow {
  margin-bottom: var(--space-3);
  color: var(--color-eyebrow);
  font-size: var(--text-eyebrow);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
}

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

/* The contact address is plain text to select and copy, kept on one line. */
.contact-address {
  color: var(--color-text);
  font-weight: var(--weight-bold);
  white-space: nowrap;
}

/* A drawing: every picture on the site is one (the owner, 2026-11-10), in
   wwwroot/images/illustrations. A row's drawing is at most 384px wide; the
   hero's is wider (.illustration--hero, section 6). */
.illustration {
  width: min(100%, var(--illustration-width));
}

/* A light blue panel each row's drawing stands on, so every row's picture
   sits the same way. */
.stage {
  display: grid;
  place-items: center;
  padding: var(--space-6) var(--space-4);
  border-radius: var(--radius);
  background: var(--color-bg-tint);
}


/* 6. PAGES */

/* The home page's top: centred, with the drawing of the three areas under
   it, on the white page (no panel). Its sections: left-aligned for reading.
   A little less space above it on a phone, so the headline starts on the
   first screen, and above the drawing, so it starts near the button. */
.hero {
  padding-block: var(--space-7);
  text-align: center;
}

.hero h1,
.hero .lead {
  max-width: var(--reading-width);
  margin-inline: auto;
}

/* The headline's lines even in length, so no word is left alone on the last
   one (a browser that doesn't know this wraps it as usual). */
.hero h1 {
  text-wrap: balance;
}

.hero__action {
  margin-top: var(--space-6);
}

.hero__picture {
  max-width: var(--hero-drawing-width);
  margin: var(--space-7) auto 0;
}

/* The hero's drawing fills its box, which keeps it at most its own size. */
.illustration--hero {
  width: 100%;
}

/* From 48em: the top's full space around it, and above the drawing. */
@media (min-width: 48em) {
  .hero {
    padding-block: var(--space-9) var(--space-8);
  }

  .hero__picture {
    margin-top: var(--space-8);
  }
}

.section {
  padding-block: var(--space-8);
  border-top: var(--line);
}

.section--tint {
  background: var(--color-bg-tint);
}

.section__intro {
  max-width: var(--reading-width);
}

.section__intro .lead,
.split__head .lead {
  margin-bottom: 0;
}

/* A section with its heading beside its content on a wide screen (the
   problem, built for IT and security reviewers), and above it on a narrow
   one. */
.split {
  display: grid;
  gap: var(--space-5) var(--space-8);
}

/* The problem: three short lines, then the answer. */
.problem-list {
  margin: 0 0 var(--space-5);
  padding: 0;
  list-style: none;
}

.problem-list li {
  padding-block: var(--space-4);
  border-bottom: var(--line);
  font-size: var(--text-problem);
  line-height: var(--line-height-snug);
}

.problem-list li:first-child {
  padding-top: 0;
}

.problem-answer {
  margin: 0;
  color: var(--color-accent);
  font-size: var(--text-problem);
  font-weight: var(--weight-bold);
  line-height: var(--line-height-snug);
}

/* What it does: one row per part, its words and its picture. */
.features {
  display: grid;
  gap: var(--space-8);
  margin-top: var(--space-8);
}

.feature {
  display: grid;
  gap: var(--space-5);
  align-items: center;
}

.feature__text {
  max-width: var(--reading-width);
}

.feature__text h3 {
  font-size: var(--text-feature);
}

.feature__text > :last-child {
  margin-bottom: 0;
}

/* A row's short list (Apparatus, Stations and facilities): a line or two per
   point, with bullets in the accent blue. */
.feature__list {
  padding-left: var(--space-5);
}

.feature__list li + li {
  margin-top: var(--space-2);
}

.feature__list li::marker {
  color: var(--color-accent);
}

/* How a repair moves: the five steps, each a number in a blue circle, its
   name and one line. On a phone the number sits beside the words, one step
   under another; from 40em the number sits above its words, three steps to
   a row, and from 60em all five in one row. The numbers are a CSS counter,
   hidden from screen readers (the part after the slash): the steps are an
   ordered list, so assistive technology can tell their order and count. A
   browser that doesn't know that part uses the line before it. */
.steps {
  display: grid;
  gap: var(--space-5);
  margin: var(--space-7) 0 0;
  padding: 0;
  list-style: none;
  counter-reset: step;
}

.steps li {
  display: grid;
  grid-template-columns: var(--step-size) minmax(0, 1fr);
  column-gap: var(--space-4);
  align-content: start;
  counter-increment: step;
}

.steps li::before {
  content: counter(step);
  content: counter(step) / "";
  display: grid;
  grid-row: 1 / span 2;
  place-items: center;
  width: var(--step-size);
  height: var(--step-size);
  border-radius: 50%;
  background: var(--color-accent);
  color: var(--color-on-accent);
  font-weight: var(--weight-bold);
}

.steps__name {
  align-self: center;
  font-size: var(--text-h3);
  line-height: var(--line-height-heading);
}

.steps p {
  margin: var(--space-1) 0 0;
  color: var(--color-text-muted);
}

@media (min-width: 40em) {
  .steps {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    row-gap: var(--space-6);
  }

  .steps li {
    grid-template-columns: minmax(0, 1fr);
  }

  .steps li::before {
    grid-row: auto;
    margin-bottom: var(--space-3);
  }

  .steps__name {
    align-self: start;
  }
}

/* Built for the people who use it: four points, each a bold name and one
   sentence under a short blue line. One column on a phone, two from 40em,
   four in a row from 60em. */
.points {
  display: grid;
  gap: var(--space-6);
  margin: var(--space-7) 0 0;
  padding: 0;
  list-style: none;
}

.points li {
  padding-top: var(--space-4);
  border-top: var(--point-edge);
}

.points h3 {
  margin-bottom: var(--space-2);
}

.points p {
  margin: 0;
  color: var(--color-text-muted);
}

@media (min-width: 40em) {
  .points {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Built for IT and security reviewers: each fact a short name and a sentence
   or two, with a check mark in the accent blue (the logo's check). */
.facts {
  margin: 0;
}

.facts__item {
  display: grid;
  grid-template-columns: var(--check-size) minmax(0, 1fr);
  column-gap: var(--space-3);
  padding-block: var(--space-4);
  border-bottom: var(--line);
}

.facts__item:first-child {
  padding-top: 0;
}

.facts__item:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

.facts__item::before {
  content: "";
  grid-column: 1;
  grid-row: 1 / span 2;
  width: var(--space-4);
  height: var(--space-2);
  margin-top: var(--space-2);
  border-bottom: var(--check-mark);
  border-left: var(--check-mark);
  transform: rotate(-45deg);
}

.facts dt {
  grid-column: 2;
  font-weight: var(--weight-bold);
}

.facts dd {
  grid-column: 2;
  margin: 0;
  color: var(--color-text-muted);
}

/* Request a demo: centred in a panel. While it holds the form, the panel is a
   little wider, and the form itself reads from the left. */
.demo__panel {
  max-width: var(--reading-width);
  margin-inline: auto;
  padding: var(--space-7) var(--space-5);
  border: var(--line);
  border-radius: var(--radius);
  box-shadow: var(--glow);
  text-align: center;
}

.demo__panel--form {
  max-width: var(--form-width);
}

.demo__panel p:last-child {
  margin-bottom: 0;
}

.demo__next {
  color: var(--color-text-muted);
}

/* A message about a send (the thanks, or why it wasn't sent): on the light
   blue wash, with a blue edge. Nothing focuses it: the answer opens at #demo
   (the form posts to /#demo), so the eye, the keyboard and a screen reader
   start at the section's heading and reach this message next (Index.cshtml
   says why autofocus isn't used). */
.notice {
  margin-top: var(--space-6);
  padding: var(--space-4) var(--space-5);
  border-left: var(--notice-edge);
  border-radius: var(--radius-small);
  background: var(--color-bg-tint);
  text-align: left;
}

.notice p {
  margin: 0;
}

.notice p + p {
  margin-top: var(--space-2);
}

.notice__title {
  font-weight: var(--weight-bold);
}

/* The problems to fix, at the top of the form, each a link to its box. */
.error-summary {
  margin-top: var(--space-6);
  padding: var(--space-4) var(--space-5);
  border: var(--field-border-invalid);
  border-radius: var(--radius-small);
  background: var(--color-error-bg);
  text-align: left;
}

.error-summary__title {
  margin-bottom: var(--space-2);
  font-size: var(--text-body);
  letter-spacing: normal;
}

.error-summary__list {
  margin: 0;
  padding-left: var(--space-5);
}

.error-summary a {
  color: var(--color-error);
  font-weight: var(--weight-bold);
}

/* The form: one column of boxes on a phone; from 40em, two side by side,
   with the department and the message across both (.field--wide). Each box
   is at least 44px tall, its label above it in bold, and a problem to fix
   between the two, in red, with a red edge on the box. */
.demo-form {
  margin-top: var(--space-6);
  text-align: left;
}

.demo-form__fields {
  display: grid;
  gap: var(--space-5);
}

.field label {
  display: block;
  margin-bottom: var(--space-2);
  font-weight: var(--weight-bold);
  line-height: var(--line-height-snug);
}

.field__required {
  color: var(--color-text-muted);
  font-weight: var(--weight-regular);
}

.field__error {
  margin: 0 0 var(--space-2);
  color: var(--color-error);
  font-weight: var(--weight-bold);
  line-height: var(--line-height-snug);
}

.field input,
.field select,
.field textarea {
  display: block;
  width: 100%;
  min-height: var(--target-size);
  margin: 0;
  padding: var(--space-2) var(--space-3);
  border: var(--field-border);
  border-radius: var(--radius-small);
  background: var(--color-bg);
  color: var(--color-text);
  font: inherit;
  line-height: var(--line-height-snug);
}

.field textarea {
  min-height: var(--message-height);
  resize: vertical;
}

.field [aria-invalid="true"] {
  border: var(--field-border-invalid);
}

/* The trap box: never shown to people (and so never filled in by a browser). */
.demo-form__trap {
  display: none;
}

.demo-form__actions {
  margin: var(--space-6) 0 0;
}

.demo-form + .demo__next {
  margin-top: var(--space-5);
}

@media (min-width: 40em) {
  .demo-form__fields {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .field--wide {
    grid-column: 1 / -1;
  }
}

/* Wide screens: more room between sections, headings beside their text, and
   each row's picture beside its words, alternating sides so the eye zigzags
   down the page. The markup keeps the words first in every row, so a phone,
   a screen reader and the keyboard meet them before the picture. */
@media (min-width: 60em) {
  .section {
    padding-block: var(--space-9);
  }

  .split {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    align-items: start;
  }

  .features {
    gap: var(--space-9);
  }

  .feature {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: var(--space-8);
  }

  .feature:nth-child(even) {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  }

  .feature:nth-child(even) .feature__text {
    grid-column: 2;
    grid-row: 1;
  }

  .feature:nth-child(even) .feature__picture {
    grid-column: 1;
    grid-row: 1;
  }

  .steps {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

  .points {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .demo__panel {
    padding-inline: var(--space-7);
  }
}

/* The privacy note and the error page. */
.page {
  padding-block: var(--space-8) var(--space-9);
}

.prose {
  max-width: var(--reading-width);
}

.prose h2 {
  margin-top: var(--space-7);
  font-size: var(--text-h3);
  letter-spacing: normal;
}

.prose ul {
  padding-left: var(--space-5);
}

.prose li + li {
  margin-top: var(--space-2);
}

.page__updated {
  margin-top: var(--space-7);
  color: var(--color-text-muted);
  font-size: var(--text-small);
}

.page__reference {
  font-family: var(--font-mono);
  font-size: var(--text-small);
  overflow-wrap: anywhere;
}