/* --------------------------------------------------------------------- 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?v=181215e08de9") 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?v=8f704806dbed") 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?v=3100e775e861") 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?v=18be452724bf")
    format("woff2-variations");
}

/*
 * Xcentinel, the public site.
 *
 * The palette is the product'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 mark blue as close as type can get to it: the same hue and the same
     saturation, fifteen points less light. It exists for links in prose, which
     have to read as the light blue of the lockup and still be legible —
     `--accent-strong` is legible and reads as the corporate navy instead.
     4,84:1 on paper and 4,50:1 on the wash, so like every other colour here it
     passes on both grounds rather than on the one it was first tried against.
     Any lighter and the wash stops passing; the lockup's own blue is 2,96:1
     and cannot be type at any size. */
  --accent-link: #2e75b5;
  /* 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 the brand 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;
}

/* A page is written in one language now, and the address says which . Nothing is hidden by language any more, which is
   what lets the switch itself carry `lang` of the language it links to without
   the stylesheet hiding the only way out of the page it sits on. */

/* Read aloud, never drawn. The only thing that uses it is the warning that a
   link leaves this site, which a sighted reader gets from the icon beside it
   and a screen reader would otherwise not get at all. */
.offscreen {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.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 the product'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 the product'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.

   One list of sections, written once. Wide, it is the row it has always been
   and the toggle is not drawn. Narrow, the row becomes a panel the toggle opens
   — a `details`, so it works with no script, opens from the keyboard and needs
   no state of its own. The script only closes it after a link is followed. */
.menu {
  margin-left: auto;
}

.menu > summary {
  display: none;
}

.masthead nav {
  display: flex;
  gap: 1.5rem;
  font-size: 0.9375rem;
}

.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.

   The sections used to be dropped here outright. On a phone that left the two
   destinations somebody comes looking for — the price and what happens to their
   data — eight sections down a scroll, or at the very bottom in the footer.

   920px and not 860, because 860 was measured against the English row. Spanish
   sets the same five labels wider — `Por qué ahora`, `Cómo funciona` — and the
   bar overflowed from 910px down, which scrolls the whole document sideways:
   exactly what the rule above forbids, on the language most of its readers
   use. */
@media (max-width: 920px) {
  /* The five controls stop being two groups, so the bar can be ordered as one
     row: the toggle ends it, and the language is what sits before it. */
  .masthead__tools {
    display: contents;
  }

  .wordmark {
    order: 0;
  }

  .masthead .button--small {
    order: 1;
  }

  .lang {
    order: 2;
    margin-left: auto;
  }

  .menu {
    order: 3;
    position: relative;
    margin-left: 0;
  }

  .menu > summary {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.1rem;
    height: 2.1rem;
    border-radius: 999px;
    cursor: pointer;
    list-style: none;
    color: var(--slate);
  }

  /* Safari draws its own marker through a pseudo-element of its own. */
  .menu > summary::-webkit-details-marker {
    display: none;
  }

  .menu > summary:hover,
  .menu > summary:focus-visible,
  .menu[open] > summary {
    background: var(--wash);
    color: var(--accent-strong);
  }

  .menu > summary svg {
    width: 1.35rem;
    height: 1.35rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
  }

  /* The width of the window, under the bar, and not a panel hanging off the
     toggle: the toggle sits at the right edge, so anything measured from it
     opens into the margin and gets cut off. Fixed rather than absolute because
     the masthead is sticky - the panel belongs under the bar wherever the bar
     currently is, which is always the top of the window. */
  .masthead nav {
    position: fixed;
    top: var(--masthead-height);
    left: 0;
    right: 0;
    z-index: 30;
    flex-direction: column;
    gap: 0;
    padding: 0.35rem clamp(1.25rem, 4vw, 4rem) 0.6rem;
    border-block: 1px solid var(--rule);
    background: var(--paper);
    box-shadow: 0 12px 28px -14px rgb(34 44 60 / 0.3);
  }

  .masthead nav a {
    padding: 0.7rem 0.35rem;
    border-bottom: 1px solid var(--rule);
    border-radius: 0;
    font-size: 1rem;
  }

  .masthead nav a:last-child {
    border-bottom: none;
  }

  .masthead nav a:hover,
  .masthead nav a:focus-visible {
    background: var(--wash);
  }
}

.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 the link goes to. */
  .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: 3;
    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 {
    order: 0;
  }

  .lang {
    order: 1;
    margin-left: auto;
  }

  .menu {
    order: 2;
  }

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

/* The language control says which one you are reading and opens to the other.
   It draws the flag of this page, not of the link: showing the other one reads
   as a claim about where you are, and a Union Jack on the Spanish page is the
   wrong answer to the only question this control is asked. Same mechanism as
   the sections, so neither needs a script to open. */
.lang {
  position: relative;
}

.lang > summary {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  border-radius: 999px;
  padding: 0.3rem 0.5rem 0.3rem 0.45rem;
  color: var(--slate);
  font-size: 0.8125rem;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
  transition: background-color 120ms ease;
}

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

.lang > summary:hover,
.lang > summary:focus-visible,
.lang[open] > summary {
  background: var(--wash);
  color: var(--accent-strong);
}

.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[open] .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 a {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  border-radius: 6px;
  padding: 0.45rem 0.6rem;
  color: var(--slate);
  font-size: 0.875rem;
  text-decoration: none;
  transition: background-color 120ms ease;
}

.lang__menu a:hover,
.lang__menu a:focus-visible {
  background: var(--wash);
}

.lang__menu a[aria-current] {
  color: var(--accent-strong);
  font-weight: 600;
}

/*
 * An icon inside a control, which is not the same thing as the arrow above.
 *
 * The arrow on the solid button is a shape with no meaning of its own, which is
 * why it is drawn from two borders and stays on the one action the page asks
 * for. This says something the label cannot: that the control leaves this site
 * for the application, which is what tells somebody with an account apart from
 * everybody else reading the page.
 */
.button__icon {
  width: 1.05em;
  height: 1.05em;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* -------------------------------------------------------------------- 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;
}

/*
 * An icon inside a control, which is not the same thing as the arrow above.
 *
 * The arrow on the solid button is a shape with no meaning of its own, which is
 * why it is drawn from two borders and stays on the one action the page asks
 * for. This says something the label cannot: that the control leaves this site
 * for the application, which is what tells somebody with an account apart from
 * everybody else reading the page.
 */
.button__icon {
  width: 1.05em;
  height: 1.05em;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/*
 * 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, one behind the other. The one behind is deliberately
   blank, because showing a real one would mean showing a customer's data. */
.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: the document the
   product produces. */
.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;
}

/* Where a section on the home page stops and the page that develops it starts.
   The home says the thing once and hands over; saying it twice is what costs
   both pages their ranking, and the copy in the second place is the one nobody
   updates. */
.section__more {
  margin-top: clamp(1.75rem, 3vw, 2.5rem);
  max-width: var(--measure);
  font-size: 0.9375rem;
  color: var(--muted);
}

/*
 * 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;
}

/* The form is taller than what introduces it, and centring left the heading
   starting halfway down the page beside a field. They begin together. */
#contact .hero__grid {
  align-items: start;
}

.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 one.
   It said the last two, reasoning about the source document, where every mark
   is written twice - once per language. But a stylesheet never sees that file:
   the generator drops one language before anything is served, so what this
   selector counts is three marks and not six, and hiding the last two hid the
   connector between the second and the third. The rule to take from it is that
   a selector counting siblings has to be read against `www/`, never against
   `source/`.
   Still the last and not every one: twelve months is where the obligation ends,
   and a line running off the right edge would say otherwise. */
.clock__mark:last-child::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));
}

/* Two by two rather than four abreast. Left to the auto-fit rule, four cards
   fit on one row at the widest shell and each one is a column of two words, so
   the pair a reader is actually choosing between stops being visible. */
.cards--four {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* A fifth card under a two-by-two grid takes the whole row rather than half of
   it, so it reads as one more way in and not as one left over. */
.card--span {
  grid-column: 1 / -1;
}

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

@media (max-width: 620px) {
  .cards--three,
  .cards--four {
    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;
}

/* A full-row card holding several facts gives each its own line, at a width
   that reads as a paragraph rather than as a column of two words. */
.card--span p {
  max-width: 64ch;
}

.card--span p + p {
  margin-top: 0.5rem;
}

/* The service level is a sheet of facts rather than an option to weigh, so it
   reads from the left: what it is, the four figures committed to, and the
   support each level gives. Hairlines separate the figures because they are
   parallel measures; the support is a table because it compares two levels. */
.card--service {
  text-align: left;
  padding: 2rem;
}

.card--service:hover {
  border-color: var(--rule);
  box-shadow: none;
}

.service__head {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
}

.service__head .card__icon {
  margin: 0;
  flex: none;
}

.card--service .service__head p {
  max-width: 60ch;
  margin: 0;
}

/* Four indicators on one row. Each leads with what is committed to, because
   that is the promise; the two availability ones then list what was measured,
   a line per month. Numbers alone: on any honest scale a target of 99,5 % and
   a month of 100 % are too close to tell apart as shapes. */
.service__board {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
  margin: 1.75rem 0 2rem;
}

.service__meter {
  display: flex;
  flex-direction: column;
  padding: 1.25rem 1.375rem;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
}

.service__meter h4 {
  font-family: var(--body);
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--slate);
  margin: 0;
}

.card--service .service__value {
  max-width: none;
  margin: 0.5rem 0 0;
  font-family: var(--display);
  font-size: 2rem;
  font-weight: 650;
  line-height: 1;
  letter-spacing: -0.015em;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}

.card--service .service__goal {
  max-width: none;
  margin: 0.4rem 0 0;
  font-size: 0.8125rem;
  line-height: 1.4;
  color: var(--muted);
}

.service__chart {
  margin-top: 1rem;
  padding-top: 0.9rem;
  border-top: 1px solid var(--rule);
}

.card--service .service__caption {
  max-width: none;
  margin: 0 0 0.35rem;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--slate);
}

.service__chart ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.service__chart li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.75rem;
}

.service__chart li + li {
  margin-top: 0.3rem;
}

.service__month {
  font-size: 0.8125rem;
  color: var(--slate);
}

.service__real {
  font-size: 0.9375rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--accent-strong);
}

.service__support {
  width: 100%;
  table-layout: fixed;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 0.9375rem;
}

.service__support caption {
  text-align: left;
  font-weight: 600;
  color: var(--ink);
  padding-bottom: 0.75rem;
}

.service__support th,
.service__support td {
  padding: 0.8rem 1rem;
  text-align: left;
  vertical-align: middle;
  border-bottom: 1px solid var(--rule);
}

.service__support thead th {
  padding-top: 1rem;
  font-family: var(--display);
  font-size: 1.0625rem;
  font-weight: 650;
  color: var(--ink);
}

.service__support thead th,
.service__support thead td {
  border-bottom-color: transparent;
}

.service__support tbody th {
  width: 36%;
  padding-left: 0;
  font-weight: 500;
  color: var(--slate);
}

.service__support tbody td {
  color: var(--muted);
}

.service__support tbody tr:last-child > * {
  border-bottom: 0;
}

/* Premium is the column a customer moves to, so it is drawn as one band. */
.service__support tr > :last-child {
  background: var(--accent-wash);
  border-bottom-color: #d3e1f2;
}

.service__support thead tr > :last-child {
  color: var(--accent-strong);
  border-bottom-color: transparent;
  border-radius: var(--radius) var(--radius) 0 0;
}

.service__support tbody tr:last-child > :last-child {
  border-radius: 0 0 var(--radius) var(--radius);
}

.service__num {
  font-family: var(--display);
  font-size: 1.125rem;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}

.service__mark {
  display: block;
  width: 1.375rem;
  height: 1.375rem;
  fill: none;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.service__mark--yes circle {
  fill: var(--accent-strong);
  stroke: none;
}

.service__mark--yes path {
  stroke: var(--paper);
}

.service__mark--no {
  stroke: var(--muted);
}

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

@media (max-width: 620px) {
  .card--service {
    padding: 1.5rem 1.25rem;
  }

  .service__board {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.75rem;
  }

  .service__meter {
    padding: 1rem;
  }

  .card--service .service__value {
    font-size: 1.875rem;
  }

  .service__support th,
  .service__support td {
    padding: 0.65rem 0.5rem;
  }

  .service__support tbody th {
    width: 34%;
  }

  .service__num {
    font-size: 1rem;
  }
}

/* --------------------------------------------------------------- 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);
}

/* Neither of these two is prose, so neither takes the reading measure every
   other paragraph does: the strip of citations is a single line of references
   and 66ch cut it in half with the row half empty beside it. It still wraps,
   but only once there is genuinely no room. */
.footer__base p {
  margin: 0;
  max-width: none;
}

/* ------------------------------------------------------------------ the form */

/*
 * What somebody fills in when they are not ready to book anything .
 *
 * Four of the five answers are a choice or a number, which is what makes it
 * quick to answer honestly and hard to submit a script to. It sits in the
 * column the picture of an email used to.
 */
/*
 * The form is a surface, not a stack of fields floating on the wash.
 *
 * Everything else in this section has an edge - the cards above it, the panel
 * of the hero, the slip - and the one thing a visitor is asked to fill in had
 * none, so it read as fields scattered beside the heading rather than as one
 * thing to complete. A hairline and the paper behind it are enough: the boxes
 * keep their own border, so they stay legible on white, and the shadow is the
 * lightest of the three this page uses because a form is not a card to pick up.
 */
.enquiry {
  display: grid;
  gap: 1rem;
  padding: clamp(1.1rem, 2.6vw, 1.6rem);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--paper);
  box-shadow: 0 1px 2px rgb(34 44 60 / 0.04);
}

/*
 * The trap.
 *
 * Off-screen and not `display: none`: a hidden input is the first thing a bot
 * checks for, and the point is that it finds a field that looks ordinary. It is
 * out of the tab order and hidden from assistive technology in the markup, so
 * nobody using a keyboard or a screen reader ever reaches it.
 */
.enquiry__trap {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.enquiry__row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

@media (max-width: 34rem) {
  .enquiry__row {
    grid-template-columns: minmax(0, 1fr);
  }
}

.enquiry__field {
  display: grid;
  gap: 0.35rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--slate);
}

/* Inside the label and after the name, so the field is read as one phrase:
   "Teléfono (opcional)". On a line of its own it was a second thing to take in
   before reaching the box. */
.enquiry__optional {
  font-weight: 400;
  color: var(--muted);
}

.enquiry :is(input, select, textarea) {
  font: inherit;
  font-weight: 400;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 0.55rem 0.7rem;
  /* Or a select is wider than its column and the row scrolls sideways. */
  min-width: 0;
  width: 100%;
}

/*
 * The one field the browser insists on drawing.
 *
 * The closed control is ours: the same height and the same border as the boxes
 * beside it, with the system's arrow replaced by one drawn in the ink so a row
 * of fields does not have one grey wedge in it.
 *
 * The open list is the operating system's and stays that way. It is rendered
 * outside the page and no selector reaches it; what can be asked of it is the
 * two lines below - that it paints in the light scheme rather than guessing,
 * and that the highlight on the row under the pointer is this product's blue
 * instead of the desktop's. Replacing the list would mean building a combobox
 * in script, with every key and every reader to get right, for a control that
 * five answers pass through.
 */
.enquiry select {
  appearance: none;
  padding-right: 2.2rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2344546a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.7rem center;
  background-size: 1.05em;
  cursor: pointer;
}

/* What a browser does let a page say about the list it draws itself. */
.enquiry {
  color-scheme: light;
  accent-color: var(--accent-strong);
}

.enquiry textarea {
  resize: vertical;
}

.enquiry :is(input, select, textarea):focus-visible {
  border-color: var(--accent-strong);
}

/* The one answer that decides the conversation, so it is a line of its own and
   reads as a sentence rather than as a field. */
.enquiry__check {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.6rem;
  align-items: start;
  font-size: 0.9375rem;
  color: var(--ink);
}

.enquiry__check input {
  width: 1.1rem;
  height: 1.1rem;
  margin-top: 0.15rem;
}

.enquiry__actions {
  display: grid;
  gap: 0.75rem;
  margin-top: 0.25rem;
}

.enquiry__note {
  font-size: 0.8125rem;
  color: var(--muted);
  max-width: 46ch;
}

/* Empty until there is something to say, so it takes no room and is announced
   when it fills. */
.enquiry__outcome:empty {
  display: none;
}

.enquiry__outcome {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--accent-strong);
}

/* --------------------------------------------------------------------- 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;
}

/* -------------------------------------------------------------------- guides */

/*
 * A page about the regulation: what the document is, who it reaches, and the
 * questions people ask about both.
 *
 * Prose in a reading measure, like the legal pages, and for the same reason:
 * it is read by somebody checking one fact, who arrived from a search engine
 * on that one point and leaves once it is answered. What it adds is the index
 * beside it, so the one point they came for is one click rather than a scroll
 * through everything else.
 *
 * And the quotation. Every claim carries the official text it comes from, so
 * the page has to make the difference between our sentence and the
 * regulation's visible at a glance - a rule down the side and a ground, never
 * italics, which the brand book forbids and which is what a browser reaches
 * for on a blockquote left alone.
 */
.guide {
  padding-block: clamp(3rem, 6vw, 5rem) clamp(3.5rem, 7vw, 6rem);
}

/* The prose keeps a reading measure; the page does not, because the index sits
   beside it in a column of its own. */
.guide__head,
.guide__body {
  max-width: var(--measure);
}

/*
 * The index, and the answers beside it.
 *
 * Same two columns the reference uses, mirrored: there the index is what you
 * navigate by and it leads, here the answers are the page and the index serves
 * them. It is written first all the same, so it is the first thing a keyboard
 * and a screen reader reach, and so that folding the grid on a phone puts it
 * above the answers rather than under sixteen of them.
 */
.guide__layout {
  display: grid;
  /* Wide enough that a question of ordinary length is two lines rather than
     four. The entries are the headings word for word, so the column is sized
     to the questions rather than the questions cut to fit the column. */
  grid-template-columns: minmax(0, 1fr) 18rem;
  /* Declared, and the index below depends on it. With no explicit rows there is
     no explicit grid, so its `1 / -1` resolves against a single line and
     degenerates to the first row alone - which then grows to the height of the
     index and leaves that much white between the title and the first section. */
  grid-template-rows: auto auto;
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: start;
}

/* Down the side of the whole thing, heading included, and not just of the
   prose. Beside the prose alone it could only begin where the prose begins,
   which is under an eyebrow, a title and a lead - a third of the way down, with
   nothing at all next to them. */
.guide__index {
  grid-column: 2;
  grid-row: 1 / -1;
  position: sticky;
  top: 5.5rem;
  font-size: 0.875rem;
}

.guide__head {
  grid-column: 1;
  grid-row: 1;
}

/* The air the first heading used to get from its own margin, which it no longer
   has: it is the first thing in its row, and a heading the same distance from
   the lead as from the section above it reads as part of it. */
.guide__body {
  grid-column: 1;
  grid-row: 2;
  margin-top: clamp(2.25rem, 4vw, 3rem);
}

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

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

.guide__note,
.guide__foot {
  margin-top: 1rem;
  font-size: 0.9375rem;
  color: var(--muted);
}

.guide__foot {
  margin-top: 3rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--rule);
}

/* The label of the column, in the register the page uses for one everywhere
   else: small, bold, and in the blue that is meant for type. */
.guide__index h2 {
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--accent-strong);
  margin-bottom: 0.7rem;
}

/* Numbered, because with sixteen of them the number is how somebody says which
   one they mean, and the numbers are the list's rather than characters typed
   into it.

   Each entry is its heading word for word. An index that paraphrases is a
   second wording of the same question, and the one that drifts is this one,
   because nobody reads it twice. The cost is that an entry runs to two lines,
   which is what the gap and the tighter leading are for: the break inside an
   entry has to stay smaller than the break between two of them, or the list
   reads as thirty-odd lines rather than sixteen questions.

   Sixteen of them will not fit every window, so the column scrolls on its own
   rather than cutting the last of them off - inside the sticky box, so what
   scrolls away is the index and never the page. */
.guide__index ol {
  margin: 0;
  padding-left: 1.7rem;
  display: grid;
  gap: 0.7rem;
  max-height: calc(100vh - 9rem);
  overflow-y: auto;
}

.guide__index li {
  color: var(--muted);
  line-height: 1.35;
}

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

.guide__index a:hover,
.guide__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);
}

.guide__item {
  margin-top: 3rem;
  /* The heading of the question somebody followed a link to lands under the
     masthead otherwise, which reads as having landed on the wrong one. */
  scroll-margin-top: 5rem;
}

/* The column sets the distance from the lead, so the first question does not
   also set one of its own. */
.guide__item:first-child {
  margin-top: 0;
}

/* No measure of its own, which is what the legal pages do with theirs. A
   heading here is a question somebody typed into a search engine, and it is
   read in one movement; given a narrower column than the answer under it, the
   shorter ones broke in two and read as a heading that ran out of room. */
.guide__item h2 {
  font-size: 1.25rem;
}

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

/* Term and value, and on a narrow screen the value under its term rather than
   squeezed beside it. The same shape the legal pages use for the facts about
   the company, because it is the same thing: a short name and what it means. */
.guide__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: 40rem) {
  .guide__facts {
    grid-template-columns: minmax(0, 15rem) minmax(0, 1fr);
    gap: 0.75rem 1.5rem;
  }
}

.guide__facts dt {
  font-weight: 600;
  color: var(--ink);
}

.guide__facts dd {
  margin: 0 0 0.75rem;
  color: var(--muted);
  font-size: 0.9375rem;
}

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

.quote {
  margin: 1.25rem 0 0;
  padding: 1rem 1.25rem;
  background: var(--wash);
  border-left: 3px solid var(--accent);
  border-radius: 0 var(--radius) var(--radius) 0;
}

.quote p {
  margin: 0;
  font-size: 0.9375rem;
  color: var(--ink);
}

/*
 * A link inside a sentence.
 *
 * There was no rule for one, so prose took the browser's own: blue, and purple
 * once followed. The purple is not a colour of this brand and it made a
 * paragraph read as two different things depending on where the reader had
 * already been.
 *
 * **It is the mark's blue, moved as little as it can be.** The `2U` of the
 * lockup is 2,96:1 on paper, so as the colour of a word it fails AA at any
 * size - and a link that fails it is the worst place to spend the failure,
 * because a link is a thing somebody has to pick out of a paragraph at a
 * glance. `--accent-link` is the same hue and saturation, dark enough to pass
 * on both of the page's grounds: it still reads as the light blue of the
 * lockup rather than as the corporate navy.
 *
 * Hover and focus darken the underline rather than moving anything, so nothing
 * reflows under the pointer.
 */
:is(.guide__head, .guide__body, .legal__inner, .section__more) a {
  color: var(--accent-link);
  text-decoration: underline;
  text-decoration-color: var(--accent);
  text-decoration-thickness: 2px;
  /* Clear of the descenders. Pressed against them the rule reads as a strike
     through the bottom of the word. */
  text-underline-offset: 0.18em;
}

:is(.guide__head, .guide__body, .legal__inner, .section__more) a:hover,
:is(.guide__head, .guide__body, .legal__inner, .section__more) a:focus-visible {
  text-decoration-color: var(--accent-link);
}

/* A citation is a reference, not an aside, and the default face for one is the
   italic this brand does not use. */
.quote cite {
  display: block;
  margin-top: 0.6rem;
  font-style: normal;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--muted);
}

/* After the rules above and not before them, which is the same trap the
   reference fell into: a media query is not stronger than what follows it, so
   the same specificity later in the file wins and the index stays stuck to the
   top of a phone with the answers scrolling underneath it. */
@media (max-width: 900px) {
  .guide__layout {
    grid-template-columns: minmax(0, 1fr);
  }
  /* All three back into one column, in the order they are written: the title,
     the index, and then what it points at. */
  .guide__head,
  .guide__index,
  .guide__body {
    grid-column: 1;
    grid-row: auto;
  }
  .guide__body {
    margin-top: 0;
  }
  .guide__index {
    position: static;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--rule);
    margin-bottom: 1rem;
  }
  .guide__index ol {
    max-height: none;
    overflow-y: visible;
  }
}

/*
 * 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);
}

/*
 * A link that opens a tab of its own says so where it is read.
 *
 * Somebody deciding whether to follow a link is deciding whether to leave the
 * page they are on, and on the enquiry form that page holds everything they
 * have typed. The glyph answers it before the click; the off-screen words
 * beside it answer it for a reader that never sees a glyph.
 *
 * It replaces the arrow on a solid button rather than joining it: two marks at
 * the end of one control are one mark too many, and this is the one that says
 * something.
 */
.link__out {
  width: 0.85em;
  height: 0.85em;
  margin-left: 0.3em;
  vertical-align: -0.08em;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.button--solid[target="_blank"]::after {
  content: none;
}

.button .link__out {
  margin-left: 0;
  width: 1em;
  height: 1em;
}