/* --------------------------------------------------------------------- faces */

/* The three families, served from this origin.
   Not from Google. A stylesheet fetched from fonts.googleapis.com and a file
   from fonts.gstatic.com send every visitor's IP address to a processor
   outside the EEA, on every page load, with no transfer mechanism and nothing
   asked — and this is the site that sells compliance. Removing the request is
   the whole answer, and it is also faster: two fewer origins to resolve and
   shake hands with.
   Variable cuts, latin subset. One file per family covers every weight the
   page sets, 124 kB for the three of them, which is less than the five static
   cuts of Inter alone came to. */

@font-face {
  font-family: "Arimo";
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src: url("/fonts/arimo-latin-700-normal.woff2") format("woff2");
}

@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url("/fonts/archivo-latin-wght-normal.woff2") format("woff2-variations");
}

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

@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url("/fonts/jetbrains-mono-latin-wght-normal.woff2") format("woff2-variations");
}

/*
 * DeCA2U, the public site.
 *
 * The palette is DRIVEN2U's own — the logo's slate and blue — and nothing else
 * is introduced. There is no alarm colour: this is a compliance product, and
 * the urgency is a date set in type rather than a red band.
 *
 * The page is in two acts and the grounds say which is which. The first is read
 * by somebody holding a printout, so it is paper. The second is read by
 * somebody in an editor, so it is screen. That is the whole reason the API half
 * is dark, and it is why the code there is coloured while nothing else is.
 *
 * The structural device is the regulation's own. Article 6 letters a) to h) are
 * a real index that the people reading this page already use, so they carry the
 * fields section, and the two conditional letters are visibly held apart:
 * rendering them as required is the defect the product exists to avoid.
 *
 * Type carries the personality through weight and tracking. It used to carry it
 * through width, and width read as bloat.
 */

:root {
  --paper: #ffffff;
  --wash: #f4f7fa;
  --ink: #222c3c;
  --slate: #44546a;
  --muted: #6f7d92;
  /* The mark blue: rules, dots, borders. Never type — it reaches 2,96:1 on
     white and fails AA at any size. */
  --accent: #5b9bd5;
  /* The same blue, darker, for anything that is read: headings, the solid
     button and every small blue label. 6,10:1 on paper and 5,68:1 on the
     wash, so it passes wherever the page puts it. */
  --accent-strong: #3a61a6;
  /* The blue the mark draws its tick in. Used for line art, where the
     lighter one is too faint to survive a thin stroke. */
  --mark-accent: #4472c4;
  /* The accent behind text, at the strength a chip can carry: 1,07:1 against
     paper, so it reads as a tint and never as a second surface. */
  --accent-wash: #e8f0f9;
  --accent-strong-hover: #2f4f88;
  --rule: #e2e7ee;

  /* The screen act. The same slate taken down until code sits on it well. */
  --screen: #1c2531;
  --screen-raised: #232e3d;
  --screen-rule: #33404f;
  --screen-quiet: #8695a8;
  --screen-text: #c3cddb;
  --screen-bright: #f2f6fa;

  --measure: 66ch;
  --gutter: clamp(1.25rem, 4vw, 4rem);
  --shell: 1160px;
  --radius: 10px;
  /* What the sticky masthead actually measures. Anchors offset by it. */
  --masthead-height: 4.15rem;

  /* One pass of a felt-tip: a filled band whose top and bottom wobble
     independently, so it reads as pressure rather than as a ribbon. */
  --marker: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 10' preserveAspectRatio='none'%3E%3Cpath fill='%23000' d='M1 5.4C26 3.2 58 2.4 96 2.9c37 .5 72-.3 103 1l-.4 2.5c-31-1-66 .6-103 .1C58 6 26 7.2 1.4 8.6Z'/%3E%3C/svg%3E");

  --display: "Archivo", system-ui, sans-serif;
  --body: "Inter", system-ui, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", monospace;
  /* The logo, never the interface. Arial closes it because it is metric
     compatible with Liberation Sans and is on every machine. */
  /* The logo face. Arial Bold, which is what DRIVEN2U's guide calls "the
     original font of the historic logo" and what a browser resolves the
     OneSend2U guide to. Liberation Sans is the same letters on Linux, and
     Arimo — its packaged form — is served from here as the last resort. */
  --mark: Arial, "Liberation Sans", "Arimo", sans-serif;
}

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

html {
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--slate);
  font-family: var(--body);
  font-size: clamp(1rem, 0.97rem + 0.15vw, 1.0625rem);
  line-height: 1.65;
}

/* Both languages sit in the document and one is hidden, so a reader switches
   without a round trip and without a second copy of the page to keep in step.
   These two rules only ever hide. Restoring the other language by setting a
   display back would have to guess the value, and it would guess `block` for a
   grid — so the shown element is simply never touched, and its own rules stand.
   Scoped under body because the switch also sets the lang of <html>, and an
   unscoped rule would hide the whole document the moment it did. */
html:not([data-lang="en"]) body [lang]:not([lang="es"]) {
  display: none;
}

html[data-lang="en"] body [lang]:not([lang="en"]) {
  display: none;
}

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

/* The masthead is sticky, so anything an anchor lands on has to clear it — and
   clear it by exactly its height and no more. Any extra lands on top of the
   section's own top padding and reads as an anchor that overshot. */
[id] {
  scroll-margin-top: var(--masthead-height);
}

h1,
h2,
h3 {
  font-family: var(--display);
  color: var(--accent-strong);
  font-weight: 700;
  letter-spacing: -0.028em;
  line-height: 1.06;
  margin: 0;
  text-wrap: balance;
}

p {
  margin: 0;
  max-width: var(--measure);
}

code {
  font-family: var(--mono);
  font-size: 0.9em;
}

/* One weight and one colour for every label on the page. The light blue is the
   brand's own and is what these are asked to carry; against paper it measures
   2,96:1, which is below AA for type this size, so it is used on labels that
   name a section and never on anything a reader has to work from. */
.eyebrow {
  font-size: 0.875rem;
  font-weight: 700;
  /* The darker blue, because this is type. The lighter one is 2,96:1 on paper
     and fails AA at any size, which is what its own token says about it. */
  color: var(--accent-strong);
  margin: 0 0 0.9rem;
}

/*
 * A label somebody ran a marker under.
 *
 * The product exists because paper gets handled by hand: a note printed at a
 * loading bay, read at a weighbridge, held at a roadside check. The one place
 * this page borrows that vernacular is the label that opens a section — drawn
 * rather than ruled, and only there, so it stays a gesture instead of a
 * texture. The hero's citation keeps its hairline: it names a norm, and a norm
 * is not something anybody marks up.
 *
 * A mask rather than a coloured SVG, so the stroke takes the token instead of
 * carrying a hex of its own. The shape is a filled band and not a stroked line:
 * stretched to the width of the words, a fill reads as a faster or slower pass,
 * where a stroke would read as a line that changed thickness on its own.
 */
.section__head .eyebrow {
  /* Hugs the words. A block would run the marker to the end of the column. */
  width: fit-content;
}

/* The stroke itself, on a pseudo-element: a mask cuts the whole element it is
   set on, text included, so the words and the mark cannot share a box. */
.section__head .eyebrow::after {
  content: "";
  display: block;
  /* Past the last letter, the way a hand overshoots. */
  width: calc(100% + 0.3em);
  height: 0.46em;
  margin-top: 0.14em;
  background-color: var(--accent);
  -webkit-mask: var(--marker) left center / 100% 100% no-repeat;
  mask: var(--marker) left center / 100% 100% no-repeat;
}

/* ------------------------------------------------------------------ masthead */
.masthead {
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgb(255 255 255 / 0.88);
  backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid var(--rule);
}

.masthead__inner {
  display: flex;
  align-items: center;
  gap: clamp(0.75rem, 3vw, 2.5rem);
  padding-block: 0.8rem;
}

/* The mark and the name, locked up the same way the application locks them up:
   the mark in DRIVEN2U's own colours, never the page's, because it is the same
   object wherever it appears.

   Inter and not the display face: the lockup in the application is set in Inter,
   and a product whose name is drawn in one face here and another there has two
   names. */
/* Set as text, not drawn. The two are the same letters — the master and this
   agree to about a percent — but a browser rasterises text and paths through
   different pipelines and text comes out fractionally denser, so the surface
   that has to sit beside a guide's live sample is itself live. The drawn lockup
   stays in the brand folder, where no font can be assumed. */
.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 0.13em;
  font-family: var(--mark);
  /* 800, which the Arial family answers with Arial Black — a real face, not a
     synthesised one. Bold is a third lighter in the stem and reads as a
     different logo beside the house wordmark. */
  font-weight: 800;
  font-size: 1.375rem;
  /* The -1px at 48 the OneSend2U sample carries, expressed relative. */
  letter-spacing: -0.0208em;
  color: var(--slate);
  text-decoration: none;
  line-height: 1;
}

/* The mark is 46 of the lockup's 60 units against a cap of 26.1, which is
   1.76 of the cap height — the proportion the masters are built to. */
.wordmark__mark {
  width: 1.76em;
  height: 1.76em;
  flex: none;
}

.wordmark__name span {
  color: var(--accent);
}

/* The name where it falls inside a sentence.
   Same face, same weight and the same two colours as the lockup, at whatever
   size the text around it is: `em` rather than a fixed size, so it sits on the
   line of a paragraph, a footer or a heading without being set again for each.
   The colours are DRIVEN2U's own and never the page's — the name is the same
   object here as it is in the masthead. */
.product {
  font-family: var(--mark);
  font-weight: 700;
  letter-spacing: -0.0208em;
  color: var(--slate);
}

.product span {
  color: var(--accent);
}

/* The name anchors the left edge and everything else is pushed to the right, so
   the two ends of the masthead stay put whatever the window is doing. Left to
   the gap alone, the whole row bunches at the start and a wide screen shows a
   third of the bar empty after the last control. */
.masthead nav {
  display: flex;
  gap: 1.5rem;
  font-size: 0.9375rem;
  margin-left: auto;
}

.masthead nav a {
  color: var(--muted);
  text-decoration: none;
  padding-block: 0.3rem;
  border-bottom: 2px solid transparent;
  transition: color 120ms ease, border-color 120ms ease;
}

.masthead nav a:hover,
.masthead nav a:focus-visible {
  color: var(--accent-strong);
  border-bottom-color: var(--accent);
}

/* The masthead sheds one control at a time as the window narrows, because the
   wordmark and the language are the two it cannot lose: one says where you are
   and the other is the only way out of a language you do not read. Nothing here
   is allowed to make the page wider than the window - a masthead that overflows
   scrolls the whole document sideways, and every section below it inherits a
   horizontal scrollbar it had nothing to do with. */
@media (max-width: 860px) {
  .masthead nav {
    display: none;
  }

  /* With the nav gone the push has to move to whatever is now last. */
  .masthead__tools {
    margin-left: auto;
  }
}

.masthead__tools {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

/* On a phone the four controls do not fit on one line, and hiding two of them
   costs the only two things a visitor can do from anywhere on the page. They go
   to a second line instead: the name and the language keep the first, the two
   actions share the second.

   `display: contents` is what makes it possible without touching the markup on
   five pages - the tools stop being one flex item and their three children
   become items of the masthead itself, so each wraps on its own. */
@media (max-width: 560px) {
  /* Two rows is a taller bar, and this is what every anchor on the page offsets
     itself by. Left at the one-row figure, a link to a section would land with
     its heading under the masthead. */
  :root {
    --masthead-height: 6.5rem;
  }

  .masthead__inner {
    flex-wrap: wrap;
    gap: 0.45rem 0.5rem;
    padding-block: 0.5rem;
  }

  .masthead__tools {
    display: contents;
  }

  .wordmark {
    font-size: 1.1875rem;
  }

  .lang {
    margin-left: auto;
  }

  /* The flag already says which language this is. */
  .lang__code {
    display: none;
  }

  /* The break, and it has to be explicit.
     Sizing the buttons at half a line and trusting them not to fit only breaks
     the row on a narrow phone: at 412px the name, the language and one button
     at 48% do fit, so "Entrar" stayed up top and the demo went down alone. An
     empty item a whole line wide fills the first row at every width, and
     everything ordered after it starts a new one. */
  .masthead__inner::after {
    content: "";
    order: 1;
    flex-basis: 100%;
    height: 0;
    /* It sits on a line of its own, so the row gap would otherwise be paid
       twice. */
    margin-block: -0.225rem;
  }

  .wordmark,
  .lang {
    order: 0;
  }

  .masthead__inner .button--small {
    order: 2;
    flex: 1 1 0;
    justify-content: center;
    padding: 0.4rem 0.6rem;
  }
}

/* One control that says which language you are reading, and opens to the other.
   Two side-by-side buttons made the unchosen language look like a second thing
   to do rather than a way out of the first. */
.lang {
  position: relative;
}

.lang button {
  appearance: none;
  font: inherit;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  /* Transparent, not paper: the toggle sits on the masthead and painting it
     white drew a pill around it. The menu carries its own ground, so its
     buttons do not need one either. */
  background: transparent;
  color: var(--slate);
}

.lang__toggle {
  border: 1px solid transparent;
  border-radius: 999px;
  padding: 0.3rem 0.6rem 0.3rem 0.45rem;
  font-size: 0.8125rem;
  font-weight: 600;
  transition: background-color 120ms ease;
}

.lang__toggle:hover,
.lang__toggle[aria-expanded="true"] {
  background: var(--wash);
}

.lang__flag {
  width: 1.25rem;
  height: 0.8333rem;
  border-radius: 2px;
  flex: none;
  /* The Union Jack is drawn with strokes that would spill past the field. */
  overflow: hidden;
}

.lang__caret {
  width: 0.75rem;
  height: 0.75rem;
  fill: none;
  stroke: var(--muted);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 140ms ease;
}

.lang__toggle[aria-expanded="true"] .lang__caret {
  transform: rotate(180deg);
}

.lang__menu {
  position: absolute;
  top: calc(100% + 0.4rem);
  right: 0;
  z-index: 30;
  display: grid;
  min-width: 9rem;
  padding: 0.25rem;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--paper);
  box-shadow: 0 12px 28px -14px rgb(34 44 60 / 0.3);
}

.lang__menu[hidden] {
  display: none;
}

.lang__menu button {
  border: none;
  border-radius: 6px;
  padding: 0.45rem 0.6rem;
  font-size: 0.875rem;
  text-align: start;
  transition: background-color 120ms ease;
}

.lang__menu button:hover {
  background: var(--wash);
}

.lang__menu button[aria-pressed="true"] {
  color: var(--accent-strong);
  font-weight: 600;
}

/* -------------------------------------------------------------------- buttons */
.button {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.7rem 1.3rem;
  border-radius: 6px;
  font-weight: 600;
  font-size: 0.9375rem;
  text-decoration: none;
  border: 1px solid transparent;
  white-space: nowrap;
  transition: background-color 130ms ease, border-color 130ms ease, transform 130ms ease, color
    130ms ease;
}

.button:active {
  transform: translateY(1px);
}

/*
 * The ring, and why it is not the hover.
 *
 * Both states used to be the same colour shift, so somebody arriving by
 * keyboard could not tell where they were: the only feedback was one a mouse
 * user gets for free. A ring outside the control says *this is the one*, on a
 * page whose whole promise is that nothing important is left implicit.
 */
.button:focus-visible {
  outline: 2px solid var(--accent-strong);
  outline-offset: 2px;
}

.button--solid {
  background: var(--accent-strong);
  color: #fff;
}

.button--solid:hover,
.button--solid:focus-visible {
  background: var(--accent-strong-hover);
}

/*
 * Where the primary action goes, and it leans that way when pointed at.
 *
 * Drawn from two borders rather than written as an arrow: generated text is
 * read out by a screen reader, and "Pedir una demostración, flecha derecha" is
 * a control wearing a decoration. Empty content is a shape and nothing else.
 *
 * Only on the solid one. A page with an arrow on every control has an arrow
 * that means nothing; here it marks the one action the page is asking for.
 */
.button--solid::after {
  content: "";
  width: 0.38em;
  height: 0.38em;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  transform: rotate(45deg);
  transition: translate 130ms ease;
}

.button--solid:hover::after,
.button--solid:focus-visible::after {
  translate: 0.15em 0;
}

/*
 * The second action is a control, not a ghost.
 *
 * Its border was `--rule` at 1,24:1 against paper — a hairline that reads as
 * disabled beside a solid button, and short of the 3:1 that WCAG 1.4.11 asks of
 * anything with an edge somebody is meant to press. The muted ink gives 4,18:1
 * and still stays behind the primary, which is what a secondary is for.
 */
.button--quiet {
  border-color: var(--muted);
  color: var(--accent-strong);
  background: var(--paper);
}

.button--quiet:hover,
.button--quiet:focus-visible {
  border-color: var(--accent-strong);
  background: var(--accent-wash);
}

.button--small {
  padding: 0.45rem 0.95rem;
  font-size: 0.875rem;
}

/* ----------------------------------------------------------------------- hero */
.hero {
  padding-block: clamp(2.5rem, 5vw, 4rem) clamp(2.5rem, 6vw, 4.5rem);
}

.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.18fr) minmax(0, 0.82fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}

@media (max-width: 900px) {
  .hero__grid {
    grid-template-columns: 1fr;
  }
}

/* Three lines, not four. At 3.4rem the headline pushed the hero to 792px in a
   765px window and both buttons fell below the fold; the first thing a visitor
   is asked to do should not need a scroll to find. */
.hero h1 {
  font-size: clamp(2.25rem, 1.5rem + 2.4vw, 3rem);
  font-weight: 800;
}

.hero__lede {
  margin-top: 1.4rem;
  font-size: clamp(1.0625rem, 1rem + 0.35vw, 1.1875rem);
}

.deadline {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.15rem 0.75rem;
  margin-top: 1.6rem;
  padding: 0.7rem 1.1rem;
  border: 1px solid var(--rule);
  border-left: 3px solid var(--accent);
  border-radius: 0 var(--radius) var(--radius) 0;
  background: var(--wash);
}

.deadline strong {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(1.25rem, 1.05rem + 0.7vw, 1.6rem);
  letter-spacing: -0.025em;
  color: var(--ink);
  white-space: nowrap;
}

.deadline span {
  font-size: 0.9375rem;
  color: var(--muted);
}

/* The sentence takes a line of its own, which leaves the end of the first one
   to the count. */
.deadline > span:last-child {
  flex-basis: 100%;
}

/* The number carried as a mark rather than as a sentence: it is the one thing
   in this block that changes, and a reader coming back should be able to find
   it without reading. Ink on the light blue and not white on it — white would
   reach 2,96:1 and this is small text. Empty until the script fills it, and
   `:empty` keeps the padding off a box with nothing in it. */
/* Qualified by the parent because `.deadline span` outranks a bare class and
   was painting this muted grey on the blue. */
.deadline span.deadline__count {
  margin-left: auto;
  font-weight: 600;
  color: #fff;
  background: var(--mark-accent);
  border-radius: 999px;
  padding: 0.1rem 0.7rem;
  white-space: nowrap;
}

.deadline span.deadline__count:empty {
  display: none;
}

/* The answer to the question the deadline provokes, placed between the threat
   and the button rather than after it. */
.hero__go {
  margin-top: 1.4rem;
  font-size: 0.9375rem;
  color: var(--muted);
}

.hero__go strong {
  color: var(--ink);
  font-weight: 600;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1.5rem;
}

/*
 * The two actions measure the deadline above them.
 *
 * Only in the hero, where there is something to line up with: the box carrying
 * the date is the width of the column, and two buttons ending short of it read
 * as a row that ran out rather than as a pair. Elsewhere on the page an action
 * sits under prose and takes the width of its own words.
 *
 * `max-content` is what keeps this honest on a phone. The labels do not wrap,
 * so a button that could be squeezed below its text would overflow instead;
 * refusing to shrink is what makes the row wrap, and a wrapped row gives each
 * button the full width on a line of its own.
 */
.hero .hero__actions .button {
  flex: 1 1 0;
  min-width: max-content;
  justify-content: center;
}

/* One column, edge to edge. A row of two buttons on a phone gives each of them
   half a thumb, and a lone button floating at its own width reads as secondary
   next to the full-width paragraph above it. Every action row on the page is a
   .hero__actions, so this reaches all of them. */
@media (max-width: 560px) {
  .hero__actions {
    flex-direction: column;
    align-items: stretch;
  }

  .hero__actions .button {
    width: 100%;
    justify-content: center;
  }
}

/* ------------------------------------------------------------------ the stage */
/* Two pieces of paper, because that is the whole promise: the customer's
   delivery note is not touched, and the DeCA is issued beside it. The note
   behind is deliberately blank — showing a real one would mean showing a
   customer's dispatch, and the point is precisely that we never read it. */
.stage {
  display: grid;
  padding: 3.25rem 0 0 2rem;
  margin: 0;
}

.stage > * {
  grid-area: 1 / 1;
}

/* Receded rather than white, or it reads as a stray shadow behind the slip
   instead of as a second sheet. It stays empty: the label is the content. */
.stage__note {
  /* The same size as the slip, so the pair reads as two documents rather than
     as a panel with a card on it. Without the cap it stretches to the column
     the moment the hero drops to one. */
  max-width: 25rem;
  transform: translate(-2rem, -3.25rem);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--wash);
  padding: 1rem 1.25rem;
}

.stage__tag {
  display: block;
  font-size: 0.875rem;
  font-weight: 700;
  /* The darker blue. The lighter one measures 2,75:1 against the wash this sits
     on, and this is a label somebody reads rather than a rule. */
  color: var(--accent-strong);
}

@media (max-width: 700px) {
  .stage {
    padding: 0;
  }
  .stage__note {
    display: none;
  }
}

/* ------------------------------------------------------------------- the slip */
/* The artifact, because the artifact is the product: what a driver carries and
   what an officer scans at the roadside. */
.slip {
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--paper);
  box-shadow: 0 1px 2px rgb(34 44 60 / 0.05), 0 18px 44px -14px rgb(34 44 60 / 0.18);
  padding: 1.5rem;
  max-width: 25rem;
  margin: 0;
}

.slip__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--rule);
}

.slip__title {
  font-family: var(--display);
  font-weight: 700;
  font-size: 0.9375rem;
  letter-spacing: -0.02em;
  color: var(--ink);
  line-height: 1.3;
}

.slip__basis {
  font-family: var(--mono);
  font-size: 0.6875rem;
  color: var(--muted);
  margin-top: 0.35rem;
}

.slip__qr {
  width: 104px;
  height: 104px;
  flex: none;
}

.slip__qr svg {
  width: 100%;
  height: 100%;
  display: block;
}

.slip__fields {
  display: grid;
  grid-template-columns: 1.15rem 1fr;
  gap: 0.4rem 0.75rem;
  margin: 1rem 0 0;
  font-size: 0.8125rem;
}

.slip__fields dt {
  font-family: var(--mono);
  color: var(--accent-strong);
  font-size: 0.75rem;
}

.slip__fields dd {
  margin: 0;
}

.slip__url {
  margin-top: 1rem;
  padding-top: 0.85rem;
  border-top: 1px solid var(--rule);
  font-family: var(--mono);
  font-size: 0.6875rem;
  color: var(--muted);
  word-break: break-all;
}

/* ------------------------------------------------------------------- printing */
/* One orchestrated moment, and the only one on the page above the fold. The
   slip does not fade in as decoration: it prints, top to bottom, because that
   is the act the product performs. Everything is opt-in behind the motion
   query, so the resting state of the markup is already the finished state and a
   reader who asked for no motion is not served an animation stripped of its
   keyframes. */
@media (prefers-reduced-motion: no-preference) {
  @keyframes rise {
    from {
      opacity: 0;
      transform: translateY(14px);
    }
  }

  @keyframes lay {
    from {
      opacity: 0;
      transform: translate(-2rem, -2.5rem) translate(10px, 14px) rotate(-1.5deg);
    }
  }

  @keyframes feed {
    from {
      clip-path: inset(0 0 100% 0);
    }
    to {
      clip-path: inset(0 0 0 0);
    }
  }

  @keyframes stamp {
    from {
      opacity: 0;
      transform: scale(0.9);
    }
  }

  .hero__grid > div {
    animation: rise 620ms cubic-bezier(0.22, 1, 0.36, 1) both;
  }

  .stage__note {
    animation: lay 700ms cubic-bezier(0.22, 1, 0.36, 1) 120ms both;
  }

  .slip {
    animation: rise 620ms cubic-bezier(0.22, 1, 0.36, 1) 260ms both;
  }

  .slip__fields {
    animation: feed 620ms ease-out 640ms both;
  }

  .slip__qr svg {
    animation: stamp 420ms cubic-bezier(0.34, 1.56, 0.64, 1) 1140ms both;
  }

  .slip__url {
    animation: rise 460ms ease-out 1320ms both;
  }

  /* Sections below the fold arrive as they are reached. The script adds .js, so
     with no script the content is simply there. */
  .js [data-reveal] {
    opacity: 0;
    transform: translateY(12px);
    transition: opacity 520ms ease, transform 520ms ease;
    transition-delay: var(--reveal-delay, 0ms);
  }

  .js [data-reveal].is-visible {
    opacity: 1;
    transform: none;
  }
}

/* -------------------------------------------------------------------- section */
.section {
  padding-block: clamp(3rem, 6.5vw, 5rem);
  border-top: 1px solid var(--rule);
}

.section--wash {
  background: var(--wash);
}

/* The heading and the paragraph under it want different measures, and giving
   them one was the bug: `66ch` on this box resolves against *its* font size,
   not the heading's, so a 46px display line broke at twenty-eight characters
   and left a third of the column empty. Each sets its own now. */
.section__head {
  margin-bottom: clamp(2rem, 4vw, 2.75rem);
}

/* Either level, because the heading a section opens with is an h1 when the
   section is the page and an h2 when it is one of several. The type is the
   same in both places; only the outline differs. */
.section__head :is(h1, h2) {
  font-size: clamp(1.85rem, 1.2rem + 2.3vw, 2.9rem);
  /* Its own ch, so it holds at every step of the clamp. Thirty is what puts
     every heading on the page at two lines: a display line is read in one
     movement of the eye, and three of them is a paragraph set in headline. */
  max-width: 30ch;
}

.section__head p {
  max-width: var(--measure);
  margin-top: 1rem;
}

/*
 * The message this section produces, drawn as the paper it replaces.
 *
 * Every other section of this page has an object beside its argument — the
 * slip, the cards, the two clocks — and the one asking for the conversation had
 * none: a column of prose with a table in it, and the table wider than the
 * prose above it. So it gets the object that is honestly its own. The button
 * opens a mail with these exact lines in this exact order, and this is that
 * mail, printed.
 *
 * A docket and not a form. The rules are hairlines with the hint under them
 * rather than inside them, because a blank that looks like an input on a page
 * with no server is a control that does not work.
 */
/* A section head used as a column rather than as a header: it keeps its type
   and its measure and gives up the space it would otherwise leave under
   itself, which inside a centred grid only pushes the column off centre. */
.hero__grid > .section__head {
  margin-bottom: 0;
}

.hero__grid > .section__head .hero__actions {
  margin-top: 1.75rem;
}

.dispatch {
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--paper);
  box-shadow: 0 1px 2px rgb(34 44 60 / 0.05), 0 18px 44px -14px rgb(34 44 60 / 0.18);
  padding: 1.5rem;
  max-width: 25rem;
  margin: 0;
}

/* The subject line, in the face this page uses for everything a machine wrote:
   an address, an identifier, a letter of the article. */
.dispatch__subject {
  font-family: var(--mono);
  font-size: 0.8125rem;
  color: var(--muted);
  padding-bottom: 0.9rem;
  border-bottom: 1px solid var(--rule);
  margin-bottom: 1.1rem;
}

.dispatch__field + .dispatch__field {
  margin-top: 1.15rem;
}

.dispatch__label {
  display: flex;
  align-items: baseline;
  gap: 0.7rem;
  font-family: var(--display);
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.01em;
}

/* Two digits, the way the console numbers the steps of a run. Below the regular
   weight on purpose: mono digits are wide and dense, and at 400 beside a bold
   label they read as a second heading rather than as a position. */
.dispatch__mark {
  font-family: var(--mono);
  font-weight: 350;
  font-size: 0.8125rem;
  color: var(--muted);
}

/* The explanation belongs to the line above it, so nothing is drawn between
   them: a rule there made four fields read as eight things. */
.dispatch__hint {
  margin-top: 0.15rem;
  font-size: 0.8125rem;
  color: var(--muted);
  line-height: 1.5;
}

/* The envelope, at the size of the line it sits on. */
.dispatch__stamp {
  width: 1.15em;
  height: 1.15em;
  margin-right: 0.5rem;
  vertical-align: -0.25em;
  fill: none;
  stroke: var(--muted);
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
  --icon-accent: var(--accent);
}

/* --------------------------------------------------------------- the register */
.register {
  border-top: 1px solid var(--rule);
}

.register__row {
  display: grid;
  grid-template-columns: 2.5rem minmax(0, 14rem) minmax(0, 1fr) auto;
  gap: 0.5rem 1.5rem;
  align-items: baseline;
  padding-block: 1.05rem;
  border-bottom: 1px solid var(--rule);
}

@media (max-width: 780px) {
  .register__row {
    grid-template-columns: 2rem minmax(0, 1fr);
  }
  .register__note,
  .register__tag {
    grid-column: 2;
  }
}

.register__letter {
  font-family: var(--mono);
  font-size: 0.9375rem;
  color: var(--muted);
}

.register__row--conditional .register__letter {
  color: var(--accent-strong);
}

.register__name {
  font-family: var(--display);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ink);
  font-size: 1.0625rem;
}

.register__note {
  color: var(--muted);
  font-size: 0.9375rem;
}

.register__tag {
  justify-self: start;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--accent-strong);
  border: 1px solid currentcolor;
  border-radius: 999px;
  padding: 0.12rem 0.55rem;
  white-space: nowrap;
}

/* ----------------------------------------------------------------- the clocks */
/* An ordered list, because it is genuinely ordered: each mark is a legal
   deadline that depends on the one before it. Numbering here carries
   information rather than decorating three boxes. */
.clock {
  --step: clamp(1.5rem, 4vw, 3rem);
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--step);
}

.clock__mark {
  position: relative;
  padding-top: 4.25rem;
}

/* The mark sits on the rail rather than beside it: a badge on the line reads
   as a moment on a timeline, where a dot reads as a bullet. */
.clock__badge {
  position: absolute;
  top: 0;
  left: 0;
  width: 3rem;
  height: 3rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--paper);
  border: 2px solid var(--accent);
  box-shadow: 0 0 0 6px var(--wash);
}

.clock__icon {
  width: 1.5rem;
  height: 1.5rem;
  fill: none;
  stroke: var(--slate);
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
  --icon-accent: var(--mark-accent);
}

/* The connector reaches across the gap to the next mark, and the last mark has
   none: twelve months is where the obligation ends, and a line running off the
   right edge would say otherwise. */
.clock__mark::before {
  content: "";
  position: absolute;
  inset: 1.5rem calc(-1 * var(--step)) auto 1.5rem;
  height: 2px;
  border-radius: 2px;
  background: var(--rule);
}

/* The last two children, not the last one: every mark is in the list twice, once
   per language, so the final pair is what has no successor to reach towards. */
.clock__mark:nth-last-child(-n + 2)::before {
  display: none;
}

.clock__when {
  display: inline-block;
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--accent-strong);
  background: var(--accent-wash);
  border-radius: 999px;
  padding: 0.2rem 0.7rem;
  margin-bottom: 0.7rem;
}

.clock__mark h3 {
  font-size: 1.25rem;
  margin-bottom: 0.6rem;
}

.clock__mark p {
  font-size: 0.9375rem;
  color: var(--muted);
}

@media (max-width: 820px) {
  .clock {
    grid-template-columns: 1fr;
  }
  .clock__mark {
    padding: 0 0 0 4.25rem;
    min-height: 3rem;
  }
  .clock__mark::before {
    inset: 1.5rem auto calc(-1 * var(--step)) 1.5rem;
    width: 2px;
    height: auto;
  }
}

/* ----------------------------------------------------------------------- cards */
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
  gap: 1.25rem;
}

.card {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 1.75rem 1.5rem;
  /* Centred: these are options to weigh against each other, and a column of
     left-aligned blocks reads as a list with an order. */
  text-align: center;
  transition: border-color 140ms ease, box-shadow 140ms ease;
}

/* Three across, stated rather than fitted. Left to auto-fit, six cards land
   four and two at this shell width, and a row of two under a row of four reads
   as something that ran out rather than as something that was laid out. */
.cards--three {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media (max-width: 900px) {
  .cards--three {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 620px) {
  .cards--three {
    grid-template-columns: minmax(0, 1fr);
  }
}

.card:hover {
  border-color: #cfd8e4;
  box-shadow: 0 10px 28px -16px rgb(34 44 60 / 0.28);
}

/* Drawn on the same 24 grid and at one stroke weight, so eight icons read as
   one set rather than as eight decisions. They take the heading's colour: the
   icon and the title are one block, not a picture with a caption beside it.
   Stroke is set here and not on each symbol, so the whole set changes weight in
   one place. */
.card__icon {
  display: block;
  width: 2.5rem;
  height: 2.5rem;
  margin: 0 auto 1rem;
  fill: none;
  stroke: var(--slate);
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* The same division the mark makes: the structure is ink and the thing the icon
   asserts is the accent — the code and its tick. Which stroke gets it is the
   argument of each icon, not decoration: the scan line, the tick, the arrows
   that cross between two systems, the slash through the signal.

   Carried by a custom property rather than a class, because a <use> renders a
   shadow tree that a selector cannot reach into. Custom properties inherit
   across that boundary; class rules do not. */
.card__icon {
  --icon-accent: var(--mark-accent);
}

.card h3 {
  font-size: 1.0625rem;
  margin-bottom: 0.55rem;
}

/* Held to a short measure and centred in whatever width the card happens to
   have. Without it the two wide cards on the second row would set lines twice
   as long as the three above them, and centred long lines are hard to read
   back to. */
.card p {
  font-size: 0.9375rem;
  color: var(--muted);
  max-width: 30ch;
  margin-inline: auto;
}

/* --------------------------------------------------------------- the screen act */
/* The home page's one dark stretch: enough of the API to decide whether to
   integrate, and a way through to the reference. The reference itself is a
   light page — it is read at length, and a long read wants paper. */
.api {
  background: var(--screen);
  color: var(--screen-text);
  padding-block: clamp(3.5rem, 7vw, 6rem);
}

.api h2,
.api h3 {
  color: var(--screen-bright);
}

.api .section__head p,
.api p {
  color: var(--screen-text);
}

.api code {
  color: var(--screen-bright);
}

.api .button--quiet {
  background: transparent;
  border-color: var(--screen-rule);
  color: var(--screen-bright);
}

.api .button--quiet:hover,
.api .button--quiet:focus-visible {
  border-color: var(--accent);
}

/* The four points, on the dark ground, as a plain grid of headings and lines
   rather than cards: a card on this ground would be a second surface for no
   reason. */
.points {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  gap: 1.25rem;
  margin-bottom: 2.5rem;
}

/* Cards, like every other group of four on this page. They were four columns
   of loose text on a dark ground, which read as a footnote next to the sample
   call underneath them. */
.point {
  background: var(--screen-raised);
  border: 1px solid var(--screen-rule);
  border-radius: var(--radius);
  padding: 1.5rem 1.4rem;
}

.point__icon {
  display: block;
  width: 2rem;
  height: 2rem;
  margin-bottom: 1rem;
  fill: none;
  /* Its own light, because this act is the only one on a dark ground. */
  stroke: var(--screen-bright);
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
  --icon-accent: var(--accent);
}

.points h3 {
  font-size: 1rem;
  margin-bottom: 0.4rem;
  color: var(--screen-bright);
}

.point p {
  font-size: 0.9375rem;
}

.points p {
  font-size: 0.9375rem;
}

/* ------------------------------------------------------------- the reference */
.reference__layout {
  display: grid;
  grid-template-columns: 14rem minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: start;
}

.reference__layout > * {
  min-width: 0;
}

.reference__index {
  position: sticky;
  top: 5.5rem;
  font-size: 0.9375rem;
}

/*
 * The group label reads as the label of a group.
 *
 * It was smaller, lighter and barely bolder than the links under it, so the
 * links won and the three groups did not read as groups at all. Same register
 * the page uses for a section label everywhere else: small, bold, and in the
 * blue that is meant for type.
 */
.reference__index h3 {
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--accent-strong);
  margin-bottom: 0.7rem;
}

/* Air above each group but the first, so the break is the thing that separates
   them rather than the reader's patience. */
.reference__index ul + h3 {
  margin-top: 1.5rem;
}

.reference__index ul {
  list-style: none;
  margin: 0 0 1.6rem;
  padding: 0;
  display: grid;
  gap: 0.35rem;
}

.reference__index a {
  color: var(--slate);
  text-decoration: none;
}

.reference__index a:hover,
.reference__index a:focus-visible {
  /* The darker blue: the lighter one is 2,96:1 on paper and fails AA, which its
     own token says about it. */
  color: var(--accent-strong);
}

/* After the rules above, not before them. A media query is not stronger than
   what follows it, so the same specificity later in the file wins — which is
   how the index stayed stuck to the top of a phone and let the reference scroll
   underneath it. */
@media (max-width: 900px) {
  /* minmax(0, 1fr), never a bare 1fr: a bare one resolves to minmax(auto, 1fr),
     the column then refuses to go below the widest line of code in it, and the
     whole page scrolls sideways on a phone instead of the sample doing it. */
  .reference__layout {
    grid-template-columns: minmax(0, 1fr);
  }
  .reference__index {
    position: static;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--rule);
    margin-bottom: 1rem;
  }
}

.endpoint {
  border-top: 1px solid var(--rule);
  padding-block: 1.75rem;
}

.endpoint:first-of-type {
  border-top: none;
  padding-top: 0;
}

.endpoint p {
  margin-top: 0.6rem;
  font-size: 0.9375rem;
  color: var(--slate);
}

.endpoint__sig {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.65rem;
  font-family: var(--mono);
  font-size: 0.9375rem;
  margin-top: 1.1rem;
}

.verb {
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  padding: 0.18rem 0.5rem;
  border-radius: 3px;
  color: var(--screen);
  background: var(--screen-text);
}

.verb--get {
  background: var(--accent);
}

.verb--post {
  background: #7fc08a;
}

.verb--patch {
  background: #d8b371;
}

.verb--delete {
  background: #d78b8b;
}

/* The badges keep their own filled backgrounds and dark text, so they read on
   either ground; the path is plain type and takes the page's ink. */
.endpoint__path {
  color: var(--ink);
  word-break: break-all;
}

/* ----------------------------------------------------------------- code samples */
.sample {
  position: relative;
  margin-top: 1.25rem;
  border: 1px solid var(--screen-rule);
  border-radius: var(--radius);
  background: var(--screen-raised);
  overflow: hidden;
}

/* Over the sample, clear of the first line of code. A reader came here to take
   the code away, and selecting a scrolling block by hand is the one part of
   that they cannot get right. */
.sample__copy {
  position: absolute;
  top: 3.1rem;
  right: 0.7rem;
  appearance: none;
  border: 1px solid var(--screen-rule);
  border-radius: calc(var(--radius) / 2);
  background: var(--screen-raised);
  color: var(--screen-quiet);
  font-family: var(--mono);
  font-size: 0.75rem;
  padding: 0.3rem 0.65rem;
  cursor: pointer;
  transition: color 120ms ease, border-color 120ms ease;
}

.sample__copy:hover {
  color: var(--screen-bright);
  border-color: var(--screen-bright);
}

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

.sample__tabs {
  display: flex;
  flex-wrap: wrap;
  border-bottom: 1px solid var(--screen-rule);
}

.sample__tabs button {
  appearance: none;
  border: none;
  background: none;
  font-family: var(--mono);
  font-size: 0.8125rem;
  color: var(--screen-quiet);
  padding: 0.6rem 0.95rem;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: color 120ms ease;
}

.sample__tabs button:hover {
  color: var(--screen-bright);
}

.sample__tabs button[aria-selected="true"] {
  color: var(--screen-bright);
  border-bottom-color: var(--accent);
}

.sample__tabs button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}

.sample pre {
  margin: 0;
  padding: 1.15rem 1.3rem;
  overflow-x: auto;
  font-family: var(--mono);
  font-size: 0.8125rem;
  line-height: 1.75;
  color: var(--screen-text);
  tab-size: 2;
}

.sample pre[hidden] {
  display: none;
}

/* Tokens, so a sample reads as code rather than as a paragraph that happens to
   be set in a monospaced face. Muted for scaffolding, bright for what a reader
   came here to copy. */
.tok-comment {
  color: #6c7a8d;
}

.tok-string {
  color: #9ecf9e;
}

.tok-number {
  color: #dcb67a;
}

.tok-keyword {
  color: #7fb2e5;
}

.tok-key {
  color: var(--screen-bright);
}

.tok-var {
  color: #c9a3d6;
}

.tok-punct {
  color: var(--screen-quiet);
}

/* --------------------------------------------------------------------- footer */
/* Paper, not screen. The page has one screen-coloured act and the footer was
   quietly a second one — and it was the only place the product's own ink,
   which is fixed at #44546a and does not follow a ground, had to sit on a dark
   one. Set in the slate rather than the muted grey: at 3,89:1 on this wash the
   grey was below AA, and a footer is quiet by being small and last, not by
   being hard to read. */
.footer {
  background: var(--wash);
  border-top: 1px solid var(--rule);
  padding-block: 2.5rem 3.5rem;
  font-size: 0.875rem;
  color: var(--slate);
}

/* The name and its tagline, stacked the way the brand lockup stacks them, with
   who makes it underneath in a smaller size. */
.footer__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 3.5rem);
}

/* The brand block takes a column of its own and the links share what is left,
   so three short lists do not stretch across the page as three sparse ones. */
@media (min-width: 52rem) {
  .footer__inner {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 2fr);
    align-items: start;
  }
}

.footer__brand .wordmark {
  font-size: 1.25rem;
  margin-bottom: 0.35rem;
}

.footer__brand {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.footer__brand p {
  margin: 0;
  max-width: 24ch;
}

/* The brand line, at the end of the page and nowhere else. It is three beats
   and it only works once the two clocks above have been read: by here the
   reader knows what "olvida" is paid for. Set in the display face, because it
   is a signature rather than a sentence. */
.footer__line {
  font-family: var(--display);
  font-weight: 650;
  font-size: 1.0625rem;
  letter-spacing: -0.01em;
  color: var(--slate);
}

.footer__by {
  font-size: 0.8125rem;
  color: var(--muted);
}

.footer__columns {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr));
  gap: 2rem 1.5rem;
}

.footer__column h2 {
  font-family: var(--body);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 0.85rem;
}

.footer__column ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.5rem;
}

.footer a {
  color: var(--slate);
  text-decoration: none;
}

.footer__column a:hover,
.footer__column a:focus-visible {
  color: var(--accent-strong);
  text-decoration: underline;
}

/* The line that has to be there whether or not anybody reads it. */
.footer__base {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.5rem 1.5rem;
  margin-top: clamp(2rem, 5vw, 3rem);
  padding-top: 1.25rem;
  border-top: 1px solid var(--rule);
  font-size: 0.8125rem;
  color: var(--muted);
}

.footer__base p {
  margin: 0;
}

/* --------------------------------------------------------------------- legal */

/* One column of prose and nothing else. A legal page is read start to finish
   by somebody checking a fact, so it gets a reading measure and no furniture. */
.legal {
  padding-block: clamp(3rem, 6vw, 5rem) clamp(3.5rem, 7vw, 6rem);
}

.legal__inner > [lang] {
  max-width: var(--measure);
}

.legal h1 {
  font-size: clamp(2rem, 1.4rem + 2vw, 2.9rem);
  max-width: 20ch;
}

.legal__lead {
  margin-top: 1rem;
  font-size: 1.0625rem;
  color: var(--slate);
}

.legal h2 {
  font-size: 1.25rem;
  margin-top: 2.5rem;
}

.legal p {
  margin-top: 0.9rem;
}

/* Term and value, and on a narrow screen the value under its term rather than
   squeezed beside it. */
.legal__facts {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.15rem 1.5rem;
  margin-top: 1.25rem;
  padding: 1.25rem 1.5rem;
  background: var(--wash);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
}

@media (min-width: 34rem) {
  .legal__facts {
    grid-template-columns: minmax(0, 14rem) minmax(0, 1fr);
    gap: 0.6rem 1.5rem;
  }
}

.legal__facts dt {
  font-weight: 600;
  color: var(--muted);
}

.legal__facts dd {
  margin: 0 0 0.6rem;
  color: var(--ink);
}

@media (min-width: 34rem) {
  .legal__facts dd {
    margin-bottom: 0;
  }
}

.legal code {
  font-family: var(--mono);
  font-size: 0.9em;
  background: var(--wash);
  border: 1px solid var(--rule);
  border-radius: 4px;
  padding: 0.1em 0.35em;
}

/*
 * The ring every control falls back to.
 *
 * Two grounds, one token, and the right answer is different on each: on paper
 * the light blue is 2,96:1 and misses the 3:1 a focus indicator owes (WCAG
 * 1.4.11), while on the screen act it is 5,22:1 and the darker blue would fall
 * to 2,53:1. So the default is set for paper, which is most of the page, and
 * the dark act says so for itself.
 */
:focus-visible {
  outline: 2px solid var(--accent-strong);
  outline-offset: 3px;
}

.api :focus-visible,
.sample :focus-visible {
  outline-color: var(--accent);
}