/*
 * Barrierlist, barrierlist.com.
 *
 * One stylesheet, no build step, no external font, no script. The page renders
 * from a file:// URL with JavaScript switched off.
 *
 * THE DESIGN DIRECTION, and it is Daniel's. Three references: a monochrome
 * portfolio of dark floating screens, a product page that walks its features
 * down a connected vertical line, and a dark-blue product site with glowing
 * depth, glass-edged cards and pill controls. What they share is what this page
 * now is: layered surfaces that lift off a deep ground, generous rounding, one
 * cool accent, soft light in the empty places, and air.
 *
 * THE CONSTRAINT THAT DECIDES EVERY RULE BELOW. This is the home page of an
 * accessibility product, so it has to pass its own product's scan with nothing
 * confirmed and nothing left for a person to decide. The references are full of
 * things that break that, and the answer is the same every time:
 *
 *   - EVERY ELEMENT THAT HOLDS TEXT HAS AN OPAQUE BACKGROUND COLOUR OF ITS OWN,
 *     or an ancestor that does. This is the whole reason the page is built from
 *     cards. A checker reading text over a gradient cannot compute a contrast
 *     ratio and correctly answers "a person needs to look at this"; a checker
 *     reading text on #111826 answers 15.35:1. The glow is real and the
 *     contrast is still knowable, because the glow is always behind an opaque
 *     surface or in a place with no words in it.
 *   - THE GLOW LAYERS ARE aria-hidden, HOLD NO TEXT, AND ARE SWITCHED OFF
 *     BELOW THE BREAKPOINT WHERE THE COLUMNS STACK, so they can never end up
 *     behind a paragraph on a phone.
 *   - BODY TEXT HAS WEIGHT AND RATIO. 18px, weight 400, cool off-white. The
 *     thin grey-on-grey body text these references get away with is the single
 *     commonest way a dark page fails. The lowest text ratio anywhere on this
 *     page is 8.56:1, against a 4.5:1 requirement.
 *   - EVERY PAIR MEASURED, NONE ASSUMED. site/tools/contrast.mjs computes every
 *     pair this file produces, and it is run, not trusted.
 */

/* ---------------------------------------------------------------- tokens - */

:root {
  /* Deep blue-black, never #000: pure black kills the depth the whole design
     is built out of. */
  --ground: #070a10;
  --surface: #0d121c;
  --card: #111826;
  --raised: #141b28;

  /* One accent, on the whole page, nowhere replaced. */
  --accent: #57c7ff;
  --accent-deep: #1f6f9e;
  --on-accent: #04121c;
  /* The accent at low alpha, for tinted fills that sit BEHIND nothing textual. */
  --accent-wash: rgba(87, 199, 255, 0.11);

  --text: #e9eff7;
  --muted: #a9b8cc;

  /* Two border tokens, because they do two different jobs. --hairline is
     decoration and the design depends on it being nearly invisible; --edge is
     for a boundary someone has to be able to see, and it clears 3:1. */
  --hairline: #232c3c;
  --edge: #66768f;

  /* One rounding system: cards 18, small surfaces 12, controls fully round. */
  --r: 18px;
  --r-sm: 12px;
  --r-pill: 999px;

  /*
   * TYPE SCALE. A major third, 1.25, from an 18px base. Every size on this page
   * is a step on it or a fluid clamp between two steps, so no size was picked
   * because it looked about right. Display sizes interpolate on viewport width;
   * all of them are in rem, so a reader who has raised their browser's default
   * text size raises the whole page with it.
   */
  --step--2: 0.72rem;
  --step--1: 0.9rem;
  --step-0: 1.125rem;
  --step-1: 1.406rem;
  --step-2: 1.758rem;
  --step-3: 2.197rem;
  --step-4: 2.747rem;
  --step-5: 3.433rem;

  /* SPACE SCALE. 4px base, doubling through the middle. Same discipline. */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 3rem;
  --sp-8: 4rem;
  --sp-9: 6rem;

  --measure: 64ch;
  --gutter: clamp(var(--sp-4), 4vw, var(--sp-6));
  --shell: 1240px;

  /* The one depth effect on the page, and it is on the one element that is
     pretending to be a physical object: a screen lying on a surface. Everything
     else separates by border and background, not by shadow. */
  --shadow: 0 24px 70px -20px rgba(0, 0, 0, 0.85);
}

/* ------------------------------------------------------------------ base - */

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

html {
  /* No font-size override: a merchant who has set a larger default text size in
     their browser gets it. Everything below is in rem, ch or a clamp of both. */
  -webkit-text-size-adjust: 100%;
  /* NOT scroll-behavior: smooth. It looks good on the nav's in-page links and
     it costs a keyboard user real time: Tab moves focus, the page then eases
     towards it, and for the length of that ease the control you are on is off
     screen. Caught by site/tools/drive.mjs, which found seven controls focused
     out of view at every width. The nav jumps instead. */
}

body {
  margin: 0;
  background: var(--ground);
  color: var(--text);
  font-family: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  font-size: var(--step-0);
  line-height: 1.6;
  font-weight: 400;
  /* A merchant who has doubled their browser's default text size gets a 27
     character address on a 400 pixel screen. Without this it pushes the page
     sideways; with it, it breaks. Found by site/tools/drive.mjs, not guessed. */
  overflow-wrap: break-word;
  /* NOT overflow-x: hidden. Hiding sideways overflow would hide it from the
     check that looks for it, and the check is the point. */
}

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

a {
  color: var(--accent);
  text-underline-offset: 0.2em;
  text-decoration-thickness: from-font;
}

a:hover {
  color: var(--text);
}

/* Visible on all four surfaces (9.05:1 at worst) and sitting outside the
   element, so a rounded control is never clipped by its own indicator.
   :focus rather than :focus-visible, so the skip link shows for everyone. */
:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
}

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

/* --------------------------------------------------------------- utility - */

.shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/*
 * Text for assistive software only.
 *
 * The two trial buttons both read "Start free trial", and they go to the same
 * place, so no rule objects. A person listening to a list of the page's links
 * still hears the same four words twice with nothing to tell them apart, which
 * is why each one carries the plan name in here. Clipped rather than hidden:
 * display: none and visibility: hidden would take it out of the accessibility
 * tree, which is the opposite of what it is for.
 */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 20;
  background: var(--accent);
  color: var(--on-accent);
  font-weight: 700;
  padding: 0.85rem 1.4rem;
  border-radius: 0 0 var(--r-sm) 0;
  text-decoration: none;
}

.skip:focus {
  left: 0;
}

/*
 * THE LIGHT.
 *
 * Every instance is aria-hidden, holds no text and is positioned into a region
 * of its band that holds no text either. Below 62rem the layouts stack and
 * those regions stop existing, so the light is switched off rather than
 * allowed to drift behind a paragraph. That is the whole of the compromise:
 * the atmosphere is real on the screens where there is room for it, and it is
 * never the reason a contrast ratio cannot be computed.
 */
.glow {
  display: none;
}

@media (min-width: 62rem) {
  .glow {
    display: block;
    position: absolute;
    pointer-events: none;
    z-index: 0;
    border-radius: 50%;
    filter: blur(70px);
  }

  .glow--hero {
    inset: 2% -14% 42% 57%;
    background: radial-gradient(circle at 50% 50%, rgba(87, 199, 255, 0.30), transparent 66%);
  }

  /*
   * THE PRICING GLOW IS GONE, and the reason is worth keeping.
   *
   * With three plan cards there was a column of empty band on the left for it
   * to sit in. Dropping to two widened the cards across the whole shell, the
   * glow ended up under the Weekly card's feature list, and the scan came back
   * with two lines whose background colour it could not determine. A card with
   * an opaque background of its own does NOT rescue this: axe stops at
   * "partially overlaps other elements" whatever is underneath, and it is right
   * to, because it cannot know the paint order for certain.
   *
   * The atmosphere is carried by the hero. Adding it back here would mean
   * finding a region of the pricing section with no words in it, and the
   * pricing section is words.
   */
}

/* --------------------------------------------------------------- header - */

.masthead {
  background: var(--ground);
  padding-block: 1.1rem;
}

.masthead__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem clamp(1rem, 3vw, 2rem);
  /* The floating bar the references all use: a surface with a hairline, set
     off the ground rather than ruled off it. */
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--r-pill);
  padding: 0.6rem 0.75rem 0.6rem 1.4rem;
  min-height: 62px;
}

.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-size: var(--step-0);
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--text);
  text-decoration: none;
  margin-right: auto;
}

/* The mark: a small rounded tile in the accent. Not an image and not a drawn
   glyph, so there is nothing to load and nothing to name. */
.wordmark::before {
  content: "";
  width: 1.45rem;
  height: 1.45rem;
  flex: none;
  border-radius: 8px;
  background: var(--accent);
  box-shadow: inset 0 0 0 4px var(--surface), 0 0 0 1px var(--accent);
}

.masthead__nav ul {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem clamp(0.85rem, 2.2vw, 1.75rem);
  margin: 0;
  padding: 0;
}

.masthead__nav a {
  font-size: var(--step--1);
  font-weight: 500;
  color: var(--muted);
  text-decoration: none;
  padding-block: 0.3rem;
}

.masthead__nav a:hover {
  color: var(--text);
}

/* ----------------------------------------------------------------- type - */

.display {
  font-weight: 700;
  line-height: 1.07;
  letter-spacing: -0.028em;
  margin: 0;
}

h1.display {
  font-size: clamp(var(--step-3), 4.4vw, var(--step-5));
  max-width: 17ch;
}

h2.display {
  font-size: clamp(var(--step-2), 3.6vw, var(--step-4));
  max-width: 20ch;
}

/* The two-tone headline the third reference uses: the subject stays white, the
   thing the product does takes the accent. One phrase per headline, never two. */
.accent {
  color: var(--accent);
}

/* An h2 because the document outline needs one there, sized as what it is: the
   heading of a card, not of a section band. */
.card__heading {
  font-size: var(--step-1);
  line-height: 1.3;
  font-weight: 650;
  letter-spacing: 0;
  margin: 0 0 0.7rem;
}

h3 {
  font-size: var(--step-1);
  line-height: 1.3;
  font-weight: 650;
  margin: 0 0 0.55rem;
}

.eyebrow {
  font-size: var(--step--1);
  font-weight: 600;
  /* Tracking opens as size falls, closes as size rises. The same rule sets the
     negative tracking on the display sizes above. */
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 var(--sp-4);
}

.lede {
  font-size: clamp(var(--step-0), 1.5vw, var(--step-1));
  color: var(--muted);
  margin: var(--sp-5) 0 0;
}

.caption {
  font-size: var(--step--1);
  letter-spacing: 0.012em;
  color: var(--muted);
  margin: var(--sp-4) 0 0;
  max-width: 56ch;
}

/* A centred section header, which is how two of the three references open a
   section. Used where the section is about one idea, not where it is a split. */
.head-centre {
  text-align: center;
  margin-inline: auto;
  max-width: 44rem;
}

.head-centre .display {
  margin-inline: auto;
}

.head-centre .lede {
  margin-inline: auto;
}

/* --------------------------------------------------------------- button - */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  font-weight: 600;
  padding: 0.85rem 1.6rem;
  border-radius: var(--r-pill);
  border: 1px solid transparent;
  text-decoration: none;
  max-width: 100%;
  transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease;
  /* NOT white-space: nowrap. Every label here is four short words, so none of
     them wraps at any ordinary size, and forbidding the wrap only breaks the
     one case that matters: a narrow screen with the text size turned up. */
}

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

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

.btn--ghost {
  background: var(--surface);
  border-color: var(--edge);
  color: var(--text);
}

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

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

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
  margin-top: 2rem;
}

/* -------------------------------------------------------------- sections - */

.band {
  position: relative;
  background: var(--ground);
  padding-block: clamp(var(--sp-7), 8vw, var(--sp-9));
}

.band--surface {
  background: var(--surface);
}

.band > .shell {
  position: relative;
  z-index: 1;
}

/* ---------------------------------------------------------------- cards - */

/*
 * THE SURFACE EVERY PIECE OF TEXT ON THIS PAGE STANDS ON.
 *
 * It is the design language of all three references and it is also the thing
 * that makes the glow safe: an opaque background-color here means the contrast
 * of everything inside is a fact rather than a question, whatever is painted
 * behind the card.
 */
.card {
  background: var(--card);
  border: 1px solid var(--hairline);
  border-radius: var(--r);
  padding: clamp(1.4rem, 2.6vw, 2rem);
}

.card--raised {
  background: var(--raised);
}

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

/* The small rounded tile each feature card opens with. */
.tile {
  width: 2.9rem;
  height: 2.9rem;
  display: grid;
  place-items: center;
  border-radius: var(--r-sm);
  background: var(--accent-wash);
  border: 1px solid var(--hairline);
  margin-bottom: 1.1rem;
}

.tile svg {
  width: 1.4rem;
  height: 1.4rem;
  stroke: var(--accent);
  fill: none;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* The pair directly under the hero sits tight to it rather than a full section
   gap away: the two cards are one statement in two halves. */
.grid--flush {
  margin-top: 0;
}

.grid {
  display: grid;
  gap: clamp(1rem, 2vw, 1.4rem);
  margin-top: clamp(2.25rem, 4vw, 3.25rem);
}

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

@media (min-width: 46rem) {
  .grid--4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 68rem) {
  .grid--4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

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

.card p {
  color: var(--muted);
  font-size: 1rem;
  margin: 0;
}

.grid--4 .card {
  padding: clamp(1.5rem, 2.2vw, 1.85rem);
}

.grid--4 .card h3 {
  margin-bottom: 0.75rem;
}

/* ----------------------------------------------------------------- hero - */

.hero {
  position: relative;
  background: var(--ground);
  padding-block: clamp(2.75rem, 6vw, 5rem) clamp(3.5rem, 7vw, 5.5rem);
  /* min-height, never height: the hero grows past this when the text is resized
     or the screen is short, instead of the content being cut off. */
  min-height: min(80vh, 820px);
  display: flex;
  align-items: center;
  overflow: hidden;
}

.hero__grid {
  position: relative;
  z-index: 1;
  display: grid;
  gap: clamp(2.5rem, 4vw, 3.5rem);
  width: 100%;
}

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

@media (min-width: 62rem) {
  .hero__grid {
    grid-template-columns: 1.04fr 0.96fr;
    align-items: center;
  }
}

/* A screenshot presented the way the first reference presents its screens: a
   dark surface floating clear of the ground on soft light, with the picture
   inset. The rounding is on the frame and the picture is clipped to match, so
   nothing of the report is hidden behind decoration. */
.shot {
  background: var(--card);
  border: 1px solid var(--hairline);
  border-radius: var(--r);
  padding: 0.55rem;
  box-shadow: var(--shadow);
}

.shot img {
  width: 100%;
  border-radius: calc(var(--r) - 8px);
}

/* ------------------------------------------------------------ statement - */

/*
 * The limits of an automated tool, said second.
 *
 * It is the first thing after the hero rather than a line of small print in the
 * footer, because a visitor decides what this product is in the first two
 * screens and that is where the honest description of it has to be.
 */
.statement {
  border-left: 4px solid var(--accent);
  border-radius: var(--r-sm);
}

.statement p:first-child {
  font-size: clamp(var(--step-1), 2.5vw, var(--step-2));
  line-height: 1.32;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--text);
  max-width: 34ch;
  margin: 0;
}

/* ------------------------------------------------------------- timeline - */

/*
 * The connected run of steps from the second reference: a line down the left
 * with a dot at each row. The line is drawn on the container, the dots on the
 * rows, and both are decoration that no text sits on top of.
 */
.track {
  margin-top: clamp(2.25rem, 4vw, 3.25rem);
  display: grid;
  gap: clamp(1.75rem, 3vw, 2.75rem);
}

@media (min-width: 52rem) {
  .track {
    padding-left: 3.25rem;
    position: relative;
  }

  .track::before {
    content: "";
    position: absolute;
    left: 0.6rem;
    top: 0.6rem;
    bottom: 0.6rem;
    width: 2px;
    border-radius: 2px;
    background: var(--hairline);
  }
}

.step {
  position: relative;
  min-width: 0;
}

@media (min-width: 52rem) {
  .step::before {
    content: "";
    position: absolute;
    left: -3rem;
    top: 0.45rem;
    width: 0.85rem;
    height: 0.85rem;
    border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 0 0 4px var(--ground);
  }

  .band--surface .step::before {
    box-shadow: 0 0 0 4px var(--surface);
  }
}

.step h3 {
  font-size: var(--step-1);
}

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

/* ---------------------------------------------------------------- chips - */

/* Twelve short labels. The second reference runs its detail shots along a
   strip; this is the same move for text, and it beats twelve boxes of nothing. */
.chips {
  list-style: none;
  margin: clamp(2rem, 4vw, 2.75rem) 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
}

.chips li {
  display: inline-flex;
  align-items: baseline;
  gap: 0.6rem;
  background: var(--card);
  border: 1px solid var(--hairline);
  border-radius: var(--r-pill);
  padding: 0.6rem 1.1rem;
  font-size: var(--step--1);
  min-width: 0;
}

.chips b {
  font-weight: 600;
  color: var(--text);
}

.chips span {
  color: var(--muted);
  font-size: var(--step--2);
}

/* ---------------------------------------------------------------- lists - */

.ticks {
  list-style: none;
  margin: clamp(1.5rem, 3vw, 2rem) 0 0;
  padding: 0;
  display: grid;
  gap: 0.85rem;
  max-width: var(--measure);
}

.ticks > li {
  position: relative;
  padding-left: 1.9rem;
  color: var(--muted);
  min-width: 0;
}

/* Decorative, so it is a pseudo-element with no content: assistive software
   never announces it and there is nothing to give an accessible name to. */
.ticks > li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 50%;
  background: var(--accent);
}

/* --------------------------------------------------------------- prices - */

.plans {
  display: grid;
  gap: clamp(1rem, 2vw, 1.4rem);
  margin-top: clamp(2.25rem, 4vw, 3.25rem);
  /* stretch, not start: with two cards of unequal length the trial buttons
     have to land on the same line, or the cheaper plan looks unfinished. */
  align-items: stretch;
}

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

@media (min-width: 52rem) {
  .plans {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.plan {
  background: var(--card);
  border: 1px solid var(--hairline);
  border-radius: var(--r);
  padding: clamp(1.5rem, 2.6vw, 2rem);
  height: 100%;
  /* A column so the call to action can be pushed to the floor of the card
     whatever length the feature list above it happens to be. */
  display: flex;
  flex-direction: column;
}

/* The trial button, on the floor of its card. Full width, because a card is its
   own column and a button floating at one end of it reads as an afterthought. */
.plan__cta {
  margin-top: auto;
  padding-top: var(--sp-4);
  padding-bottom: var(--sp-4);
  width: 100%;
  text-align: center;
}



.plan__price {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.45rem;
  margin: 0 0 1rem;
}

.plan__amount {
  font-size: clamp(var(--step-3), 4vw, var(--step-4));
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--text);
}

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

.plan h3 {
  font-size: 1.0625rem;
  letter-spacing: 0.02em;
  color: var(--accent);
}

.plan > p {
  color: var(--muted);
  font-size: 1rem;
  margin: 0 0 1.25rem;
}

.plan ul {
  list-style: none;
  /* The feature list stops short of the button rather than butting into it. */
  margin: 0 0 var(--sp-6);
  padding: 1.25rem 0 0;
  display: grid;
  gap: 0.7rem;
  border-top: 1px solid var(--hairline);
}

.plan ul > li {
  position: relative;
  padding-left: 1.6rem;
  font-size: 0.9375rem;
  color: var(--muted);
  min-width: 0;
}

.plan ul > li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.5em;
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 50%;
  background: var(--accent);
}

.trial-note {
  margin: clamp(1.5rem, 3vw, 2rem) auto 0;
  font-size: 1rem;
  color: var(--text);
  text-align: center;
  max-width: 52ch;
}

/* -------------------------------------------------------------- closing - */

.closing {
  text-align: center;
  padding-block: clamp(2.5rem, 5vw, 3.75rem);
}

.closing .display,
.closing p {
  margin-inline: auto;
}

.closing .btn-row {
  justify-content: center;
}

/* --------------------------------------------------------------- footer - */

.colophon {
  background: var(--surface);
  border-top: 1px solid var(--hairline);
  padding-block: clamp(2.5rem, 5vw, 3.5rem);
  font-size: 0.9375rem;
}

.colophon__grid {
  display: grid;
  gap: 2rem clamp(2rem, 5vw, 4rem);
}

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

@media (min-width: 46rem) {
  .colophon__grid {
    grid-template-columns: 1.4fr repeat(3, minmax(0, 1fr));
  }
}

.colophon h2 {
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 1rem;
}

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

.colophon ul > li {
  min-width: 0;
}

/*
 * WCAG 2.2 success criterion 2.5.8, Target Size (Minimum), Level AA.
 *
 * These links are set at the smallest step on the scale, which gave them a
 * 20 pixel box: under the 24 pixel floor, and a real Level AA failure. NO RULE
 * ENGINE REPORTED IT, ours included, because it is a measurement and not a
 * rule; site/tools/drive.mjs measures it at every width now. The padding is
 * what takes them over, and it is on the link rather than the list item so the
 * target that grows is the one a finger has to hit.
 */
.colophon ul a {
  display: inline-block;
  padding-block: 0.3rem;
}

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

.colophon .wordmark {
  margin: 0 0 1rem;
}

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

.legal {
  padding-block: clamp(2.5rem, 5vw, 4rem) clamp(3rem, 6vw, 5rem);
}

.legal h1 {
  font-size: clamp(var(--step-2), 4.4vw, var(--step-4));
  font-weight: 700;
  letter-spacing: -0.028em;
  line-height: 1.08;
  margin: 0;
  max-width: 20ch;
}

.legal__updated {
  color: var(--muted);
  font-size: 0.9375rem;
  margin: 0.8rem 0 0;
}

.legal__intro {
  font-size: clamp(1.0625rem, 1.5vw, 1.2rem);
  color: var(--muted);
  margin-top: 1.75rem;
  background: var(--card);
  border: 1px solid var(--hairline);
  border-left: 4px solid var(--accent);
  border-radius: var(--r-sm);
  padding: clamp(1.1rem, 2vw, 1.5rem);
  max-width: none;
}

.contents {
  margin-top: clamp(2.25rem, 4vw, 3rem);
  background: var(--card);
  border: 1px solid var(--hairline);
  border-radius: var(--r);
  padding: clamp(1.4rem, 2.6vw, 1.9rem);
}

.contents h2 {
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 1.1rem;
}

.contents ol {
  margin: 0;
  padding-left: 1.4em;
  display: grid;
  gap: 0.55rem;
  color: var(--muted);
}

.contents ol > li {
  min-width: 0;
}

.legal section {
  margin-top: clamp(2.5rem, 4.5vw, 3.5rem);
}

.legal section h2 {
  font-size: clamp(var(--step-1), 2.4vw, var(--step-2));
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.2;
  margin: 0 0 1.1rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--hairline);
  max-width: 28ch;
}

.legal section p {
  color: var(--muted);
  margin: 0 0 1.1rem;
}

.legal section ul {
  margin: 0 0 1.1rem;
  padding: 0;
  list-style: none;
  max-width: var(--measure);
  display: grid;
  gap: 0.8rem;
}

.legal section ul > li {
  position: relative;
  padding-left: 1.7rem;
  color: var(--muted);
  min-width: 0;
}

.legal section ul > li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.58em;
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 50%;
  background: var(--accent);
}

/* ---------------------------------------------------- environment guards - */

/* The page has no animation beyond a hover fade and the button press, and both
   go under reduced motion, along with the smooth scrolling that the in-page
   links would otherwise trigger. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .btn:active {
    transform: none;
  }
}

/* Windows high-contrast and other forced-colour modes drop every colour this
   file sets, and with them the tinted fills that separate one surface from the
   next. The boundaries that carry meaning are restated as borders the mode
   keeps, and the light is switched off. */
@media (forced-colors: active) {
  .card,
  .plan,
  .shot,
  .contents,
  .chips li,
  .masthead__inner,
  .legal__intro {
    border: 1px solid CanvasText;
  }

  .btn {
    border: 1px solid ButtonText;
  }

  .tile svg {
    stroke: CanvasText;
  }

  .glow {
    display: none;
  }

  .ticks > li::before,
  .plan ul > li::before,
  .legal section ul > li::before,
  .step::before,
  .wordmark::before {
    background: CanvasText;
  }

  :focus-visible {
    outline: 3px solid Highlight;
  }
}