/* ==========================================================================
   Base — reset, typography, layout primitives, utilities
   ========================================================================== */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: var(--s-9);
}

body {
  margin: 0;
  background: var(--white);
  color: var(--text);
  font-family: var(--font);
  font-size: var(--t-body);
  line-height: var(--lh-body);
  font-weight: 400;
  /* clip, not hidden: hidden turns body into a scroll container and kills
     position:sticky everywhere on the page. */
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4 {
  margin: 0;
  color: var(--heading);
  font-weight: 700;
  line-height: var(--lh-head);
  letter-spacing: var(--ls-tight);
  text-wrap: balance;
}

h1 { font-size: var(--t-h1); line-height: var(--lh-tight); font-weight: 800; }
h2 { font-size: var(--t-h2); }
h3 { font-size: var(--t-h3); }

p { margin: 0; max-width: var(--measure); text-wrap: pretty; }
ul, ol { margin: 0; padding: 0; list-style: none; }
figure, blockquote { margin: 0; }
img, svg, video { display: block; max-width: 100%; }
a { color: var(--blue-500); text-decoration: none; }
strong, b { font-weight: 700; }

::selection { background: var(--plum-400); color: var(--white); }

/* The symbol sheet is referenced, never rendered. Out of flow so it cannot
   contribute a stray line box at the top of the document. */
.icon-sheet { position: absolute; }

/* --------------------------------------------------------------------------
   Layout primitives
   -------------------------------------------------------------------------- */

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

.band { padding-block: var(--band-y); position: relative; }
.band--paper { background: var(--paper); }
/* A band that backs up a claim rather than making one: about half the air. */
.band--slim { padding-block: clamp(2.5rem, 5vw, 4rem); }

/* Dark context re-points the semantic colours and every child follows. The
   hero is on this list even though it brings its own background: without it
   a ghost button inside it keeps the light theme's navy label and all but
   disappears against the photograph.

   This list is the contract. Anything that puts content on a dark ground
   joins it rather than restating the five declarations. */
.band--deep,
.hero {
  color: var(--on-dark-soft);
  --text: var(--on-dark-soft);
  --text-soft: var(--on-dark-faint);
  --heading: var(--white);
  --hairline: var(--hairline-dark);
}
.band--deep { background: var(--fill-deep); }

.band--deep :is(h1, h2, h3),
.hero :is(h1, h2, h3) { color: var(--white); }

.stack { display: flex; flex-direction: column; gap: var(--s-5); align-items: flex-start; }
.stack--loose { gap: var(--s-7); }
.stack--center { align-items: center; text-align: center; }
.stack--center p { margin-inline: auto; }

.cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-4); }
.cluster--between { justify-content: space-between; }

.split { display: grid; gap: var(--s-8); align-items: start; }
@media (min-width: 60rem) {
  .split { grid-template-columns: 1fr 1fr; }

  /* A wider gutter, for the pairing whose second column is a list of icon
     rows rather than one object. Those rows bleed 16px outward so their hover
     background can run past the text, which eats a third of a 48px gutter and
     left the two columns looking pushed together.

     Scoped, not raised on .split, because in an even split the columns absorb
     half of whatever the gutter takes — and the other split's start column is
     already the narrow one, where taking 16px more turned a three-line
     heading into four. */
  .split--wide-gutter { gap: var(--s-10); }
}

/* A split sits its columns at the top, which is right when both sides are
   reading matter. When one side is a short heading and the other is a tall
   object, top alignment leaves the heading stranded against the object's
   whole height. This centres it against that height instead.

   Outside the two-column media query on purpose: stacked on a phone each row
   is its own height, so it changes nothing there and does not need undoing. */
.split--middle { align-items: center; }

.full { width: 100%; }

/* --------------------------------------------------------------------------
   Type helpers
   -------------------------------------------------------------------------- */

.lead {
  font-size: var(--t-lead);
  line-height: 1.5;
  color: var(--text-soft);
  max-width: 34ch;
}
.lead strong { color: var(--heading); }
/* For a lead that is one short sentence: off the 34ch cap so it sets on one
   line wherever the screen can hold it. Still inside the 75-character measure. */
.lead--wide { max-width: none; }

/* --------------------------------------------------------------------------
   Accessibility
   -------------------------------------------------------------------------- */

:where(a, button, summary, input, textarea, [tabindex]):focus-visible {
  outline: 3px solid var(--cyan-400);
  outline-offset: 3px;
  border-radius: var(--r-sm);
}
.band--deep :where(a, button, [tabindex]):focus-visible,
.hero :where(a, button, [tabindex]):focus-visible { outline-color: var(--white); }

/* Pressed. Hover does not exist on a touch screen, so every link answers a
   finger: anything that lifts on hover seats back down, anything that only
   recolours dips instead. */
:where(.nav a, .brand):active {
  transform: none;
}
:where(.topbar a, .site-footer a, .compare a, .nav a:not(.btn)):active {
  opacity: .62;
}

.sr-only {
  position: absolute;
  inline-size: 1px; block-size: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.skip-link {
  position: absolute;
  inset-block-start: var(--s-3);
  inset-inline-start: var(--s-3);
  z-index: 300;
  padding: var(--s-3) var(--s-5);
  border-radius: var(--r-sm);
  background: var(--plum-600);
  color: var(--white);
  font-weight: 700;
  transform: translateY(-160%);
  transition: transform var(--t-fast) var(--ease);
}
.skip-link:focus-visible { transform: none; }