/*
 * The landing page, and only the landing page.
 *
 * Loaded by `/` alone, so nothing here can reach the app, and every rule is
 * scoped under `.landing` so nothing in globals.css can reach in. Every colour
 * is a token from globals.css: the bands this page uses — sage, the two dark
 * grounds, the text ramps that sit on them — are declared there with the rest,
 * because DESIGN.md's rule is that colours live in one place, and an exception
 * that moves them somewhere else is not an exception, it is a second palette.
 *
 * The design is archive_build/quillion-landing-reference.html. That file is a
 * canvas export built from inline styles; this is the same design expressed the
 * way the repo writes CSS.
 *
 * The app is desktop-only by design (DESIGN.md: minimum 1280px, degrade
 * gracefully). This page is not: it is the one screen a stranger opens on a
 * phone, so it collapses properly rather than scrolling sideways.
 */

.landing {
  --wrap: 1200px;
  --gutter: 40px;
  --band: 96px;
  --col-gap: 32px;

  background: var(--paper);
  color: var(--ink);
  font-size: 17px;
  line-height: 1.55;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

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

/* Anchored sections must not land under the top of the window. */
.landing [id] {
  scroll-margin-top: 24px;
}

@media (prefers-reduced-motion: no-preference) {
  html:has(.landing) {
    scroll-behavior: smooth;
  }
}

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

.landing h1,
.landing h2,
.landing h3 {
  font-family: var(--font-display), Georgia, 'Times New Roman', serif;
  font-weight: 400;
  letter-spacing: -0.01em;
  text-wrap: balance;
  margin: 0;
}

/* `:where()` contributes no specificity, so this reset weighs the same as a
   single class rather than outranking one. Written as `.landing p` it scored a
   class plus an element, which silently beat every component rule below that
   sets a margin on a paragraph: the stage tagline's `margin-top: auto`, the
   pricing footnotes, the citations line. They were all being discarded, and
   nothing failed: the page just quietly lost its spacing. */
.landing :where(p) {
  margin: 0;
  max-width: none;
  text-wrap: pretty;
}

.landing-h1 {
  font-size: 76px;
  line-height: 1.02;
}

/* The second sentence, in the brand green. The reference sets it in italic:
   a display serif's italic is a different cut, not a slant, and it is the one
   piece of emphasis on the page. */
.landing-h1 em {
  font-style: italic;
  color: var(--brand);
}

.landing-section > .landing-wrap > .landing-section-head > h2,
.landing-section h2 {
  font-size: 52px;
  line-height: 1.08;
}

.landing-standfirst {
  font-size: 20px;
  line-height: 1.5;
  color: var(--ink-soft);
  max-width: 600px;
}

.landing-lede {
  font-size: 19px;
  color: var(--ink-soft);
}

/* Mono, small, letter-spaced. The one place this page raises its voice —
   DESIGN.md forbids it in the app and allows it here, and nowhere else. */
.landing-eyebrow {
  font-family: var(--font-mono), ui-monospace, monospace;
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-ink);
}

.landing-eyebrow.on-deep {
  color: var(--on-deep-4);
}

.landing-eyebrow.on-sage {
  color: var(--accent-ink);
}

/* Grey rather than the accent. The stages section leads with a long serif
   heading, and an orange kicker above it competes with it for the first look. */
.landing-eyebrow.on-muted {
  color: var(--ink-2);
}

.brand-band .landing-eyebrow {
  color: var(--on-deep-accent);
}

/* ---------------------------------------------------------- controls ---- */

.landing-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: flex-start;
  min-height: 44px;
  padding: 14px 24px;
  border-radius: 4px;
  font-weight: 600;
  font-size: 17px;
  text-decoration: none;
  transition: background var(--motion) ease;
}

.landing-button:hover {
  text-decoration: none;
}

.landing-button.brand {
  background: var(--brand);
  color: var(--brand-ink);
}

.landing-button.brand:hover {
  background: color-mix(in srgb, var(--brand) 86%, #000);
}

.landing-button.accent {
  background: var(--accent);
  color: var(--brand-ink);
}

.landing-button.accent:hover {
  background: color-mix(in srgb, var(--accent) 88%, #000);
}

/* On a dark band: a cream button, its label in the darkest accent so it still
   reads at 9.3:1. */
.landing-button.light {
  background: var(--surface);
  color: var(--accent-deep);
}

.landing-button.light:hover {
  background: color-mix(in srgb, var(--surface) 90%, #000);
}

.landing-textlink {
  font-weight: 500;
  padding-block: 12px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}

/* Focus has to be visible on cream, green, deep and rust alike. An outline in
   the brand colour disappears on the brand band, so dark grounds take the
   inverse. */
.landing a:focus-visible,
.landing button:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 3px;
  border-radius: 4px;
}

.brand-band a:focus-visible,
.brand-band button:focus-visible,
.landing-dates a:focus-visible,
.landing-foot a:focus-visible,
.landing-tier.enquiry a:focus-visible {
  outline-color: var(--surface);
}

/* --------------------------------------------------------- masthead ----- */

.landing-head {
  background: var(--paper);
  border-bottom: 1px solid var(--line);
}

.landing-masthead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--col-gap);
  padding-block: 20px;
}

.landing-lockup {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
}

.landing-lockup:hover {
  text-decoration: none;
}

.landing-lockup-mark {
  display: inline-flex;
  color: var(--brand);
}

.landing-lockup-word {
  font-family: var(--font-display), Georgia, serif;
  font-size: 30px;
  line-height: 1;
  color: var(--ink);
}

.landing-nav {
  display: flex;
  align-items: center;
  gap: var(--col-gap);
  font-size: 15px;
  font-weight: 500;
  flex-wrap: wrap;
}

.landing-nav > a {
  color: var(--brand);
  text-decoration: none;
  padding-block: 12px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}

.landing-nav > a:hover {
  color: var(--accent);
  text-decoration: none;
}

.landing-nav .landing-button {
  padding: 12px 20px;
  font-size: 15px;
}

.landing-nav .landing-button:hover {
  color: var(--brand-ink);
}

/* The public teaser's stand-in for sign-in (ADR 0031): styled to read as
   inactive, not as a link that happens not to move -- no hover state, a
   muted colour, and a cursor that never suggests it can be clicked. */
.landing-nav-pending {
  color: var(--ink-soft);
  padding-block: 12px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  cursor: default;
}

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

.landing-hero {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--col-gap);
  row-gap: 48px;
  align-items: start;
  padding-block: 88px 72px;
}

.landing-hero-copy {
  grid-column: span 7;
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.landing-cta-row {
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
}

.landing-price-anchor {
  font-size: 15px;
  color: var(--ink-2);
}

/* The dates panel: the reason anybody is reading. */
.landing-dates {
  grid-column: span 5;
  background: var(--deep);
  color: var(--on-deep);
  border-radius: 6px;
  padding: 36px;
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.landing-timeline {
  list-style: none;
  margin: 0;
  padding: 0;
}

.landing-timeline li {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  column-gap: 18px;
}

.landing-timeline-rail {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.landing-timeline-dot {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  border: 2px solid var(--on-deep-4);
  margin-top: 7px;
}

.landing-timeline li.emphasis .landing-timeline-dot {
  width: 15px;
  height: 15px;
  border: 0;
  background: var(--on-deep-accent);
  margin-top: 12px;
}

/* The rail between the dots, drawn on every item but the last. */
.landing-timeline li:not(:last-child) .landing-timeline-rail::after {
  content: '';
  width: 1px;
  flex-grow: 1;
  background: var(--on-deep-line);
}

.landing-timeline-body {
  display: block;
  padding-bottom: 28px;
}

.landing-timeline li:last-child .landing-timeline-body {
  padding-bottom: 0;
}

.landing-timeline-when {
  display: block;
  font-family: var(--font-mono), ui-monospace, monospace;
  font-size: 14px;
  color: var(--on-deep-4);
}

.landing-timeline li.emphasis .landing-timeline-when {
  font-family: var(--font-display), Georgia, serif;
  font-size: 40px;
  line-height: 1.1;
  color: var(--brand-ink);
}

/* Under the timeline: who the dates above actually bind. Quiet, because it is
   a qualification rather than a claim — but present, because the dates mean
   something different depending on which firm is reading them. */
.landing-dates-note {
  font-size: 14px;
  line-height: 1.5;
  color: var(--on-deep-4);
  border-top: 1px solid var(--on-deep-line);
  padding-top: 20px;
}

/* The citations. Small and muted, underlined so they read as references
   rather than as the page talking about itself. */
.landing-sources {
  margin-top: 32px;
  font-size: 14px;
  color: var(--ink-2);
  max-width: var(--prose);
}

.landing-sources a {
  color: var(--ink-2);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.landing-sources a:hover {
  color: var(--accent-ink);
}

.landing-timeline-text {
  display: block;
  margin-top: 4px;
  font-size: 17px;
}

.landing-timeline li.emphasis .landing-timeline-text {
  margin-top: 6px;
  color: var(--on-deep-2);
}

/* ------------------------------------------------------- fact strip ----- */

.landing-facts-band {
  background: var(--surface);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.landing-facts {
  list-style: none;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.landing-facts li {
  padding: 26px 24px;
  border-right: 1px solid var(--line);
}

.landing-facts li:first-child {
  padding-left: 0;
}

.landing-facts li:last-child {
  padding-right: 0;
  border-right: 0;
}

.landing-fact-figure {
  display: block;
  font-family: var(--font-display), Georgia, serif;
  font-size: 30px;
  line-height: 1.1;
}

.landing-fact-note {
  display: block;
  font-size: 15px;
  color: var(--ink-2);
  margin-top: 4px;
}

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

.landing-section {
  padding-block: var(--band);
}

.landing-section-head {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 760px;
}

.landing-split {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--col-gap);
  row-gap: 24px;
  align-items: end;
  margin-bottom: 48px;
}

.landing-split > .landing-section-head {
  grid-column: span 7;
}

.landing-split > .landing-lede {
  grid-column: span 5;
}

/* Markets: a wider left column and a stack beside it. */
.landing-split.wide {
  align-items: start;
  margin-bottom: 0;
  row-gap: 40px;
}

.landing-split.wide > .landing-section-head {
  grid-column: span 5;
  gap: 16px;
}

.landing-split.wide > .landing-stack {
  grid-column: span 7;
}

.landing-note {
  font-size: 15px;
  color: var(--ink-soft);
}

.card-band {
  background: var(--surface);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.brand-band {
  background: var(--brand);
  color: var(--on-deep);
}

.brand-band h2,
.brand-band h3 {
  color: var(--brand-ink);
}

.brand-band p {
  color: var(--on-deep-2);
}

.sage-band {
  background: var(--sage);
  border-top: 1px solid var(--sage-line);
  border-bottom: 1px solid var(--sage-line);
}

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

.landing-grid {
  display: grid;
  gap: 24px;
  align-items: start;
}

.landing-grid.three {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.landing-grid.two {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.landing-stack {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.landing-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.landing-card.sage {
  border-color: var(--sage-line);
  padding: 26px 28px;
  gap: 8px;
}

.landing-card h3 {
  font-size: 28px;
  line-height: 1.15;
}

.landing-card p {
  color: var(--ink-soft);
}

/* The classification label: the app's vocabulary, set as this page sets
   things. Not the app's badge component — DESIGN.md says that one is never
   restyled locally, and this is a different component that says the same
   words. The colour still comes from the semantic token, so "Material" means
   here exactly what it means on a register. */
.landing-label {
  align-self: flex-start;
  font-family: var(--font-mono), ui-monospace, monospace;
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border: 1px solid;
  border-radius: 3px;
  padding: 3px 8px;
  color: var(--tone, var(--unassessed));
  border-color: color-mix(in srgb, var(--tone, var(--unassessed)) 62%, transparent);
}

.landing-label.material {
  --tone: var(--material);
}
.landing-label.attention {
  --tone: var(--attention);
}
.landing-label.clear {
  --tone: var(--clear);
}
.landing-label.unassessed {
  --tone: var(--unassessed);
}

/* ----------------------------------------------------------- stages ----- */

/* The four stages of a supplier's life, side by side.
   One rule for the whole grid rather than a border per card: four cells of very
   unequal length have to read as one band, and a box around each would make
   them read as four. The hairlines between them are borders on the cards, so
   there is no empty element doing a line's job. */

.landing-stages-wrap {
  display: flex;
  flex-direction: column;
  gap: 56px;
}

.landing-stages {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 2px solid var(--ink);
}

.landing-stage {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 28px;
  border-right: 1px solid var(--line);
}

/* The grid's outer edges line up with the text above it, so the first and last
   cards lose the padding that would inset them from it. */
.landing-stage:first-child {
  padding-left: 0;
}

.landing-stage:last-child {
  padding-right: 0;
  border-right: none;
}

.landing-stage-meta {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  font-family: var(--font-mono), ui-monospace, monospace;
  font-size: 13px;
  color: var(--ink-2);
}

.landing-stages h3 {
  font-size: 34px;
  line-height: 1.05;
}

.landing-stage-promise {
  font-size: 17px;
  font-weight: 500;
  line-height: 1.4;
  color: var(--ink);
}

/* The statements under the promise. Set tighter than the running text on the
   rest of the page: four columns of 15px prose is already a lot of column. */
.landing-stage-body {
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink-soft);
}

.landing-stage-body + .landing-stage-body {
  margin-top: -6px;
}

/* Pinned to the foot of the card, so four cards of unequal length still line
   their conclusions up. */
.landing-stage-tagline {
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--brand);
}

/* The band that closes the section: what the whole record produces. */
.landing-closing {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--col-gap);
  padding: 48px 48px 52px;
  background: var(--ink);
  color: var(--on-deep);
}

.landing-closing > .landing-section-head {
  grid-column: span 5;
  max-width: none;
}

.landing-closing h3 {
  font-size: 40px;
  line-height: 1.05;
  color: var(--on-deep);
}

.landing-closing-prose {
  grid-column: span 7;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.landing-closing-prose p {
  font-size: 16px;
  line-height: 1.55;
  color: var(--on-deep);
}

.landing-closing-tagline {
  padding-top: 16px;
  border-top: 1px solid var(--on-deep-line);
  font-weight: 600;
  color: var(--on-deep-2);
}

/* --------------------------------------------------------- benefits ----- */

.landing-benefits {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 64px;
  row-gap: 44px;
}

.landing-benefits > div {
  display: flex;
  flex-direction: column;
  gap: 10px;
  border-top: 1px solid var(--on-brand-line);
  padding-top: 22px;
}

.landing-benefits h3 {
  font-size: 34px;
  line-height: 1.12;
}

/* ---------------------------------------------------------- pricing ----- */

.landing-pricing-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: var(--col-gap);
  flex-wrap: wrap;
  margin-bottom: 40px;
}

.landing-pricing-head .landing-section-head {
  max-width: 720px;
}

.landing-toggle {
  display: flex;
  gap: 4px;
  padding: 4px;
  background: var(--track);
  border: 1px solid var(--line);
  border-radius: 6px;
  flex-shrink: 0;
}

.landing-toggle button {
  font-family: inherit;
  font-size: 16px;
  font-weight: 600;
  min-height: 44px;
  padding: 0 20px;
  border: 0;
  border-radius: 4px;
  cursor: pointer;
  background: transparent;
  color: var(--ink);
  transition: background var(--motion) ease;
}

.landing-toggle button[aria-pressed='true'] {
  background: var(--brand);
  color: var(--brand-ink);
}

.landing-tiers {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  align-items: stretch;
}

.landing-tier {
  background: var(--paper);
  border: 1px solid var(--line);
  border-top: 4px solid var(--brand);
  border-radius: 6px;
  padding: 32px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.landing-tier.enquiry {
  background: var(--deep);
  color: var(--on-deep);
  border: 0;
}

.landing-tier-head {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.landing-tier h3 {
  font-size: 36px;
  line-height: 1.1;
}

.landing-tier.enquiry h3 {
  color: var(--brand-ink);
}

.landing-tier-head p {
  color: var(--ink-soft);
}

.landing-tier.enquiry .landing-tier-head p {
  color: var(--on-deep-2);
}

/* Held at a fixed height so the cards do not jump when the toggle changes. */
.landing-price-block {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-height: 124px;
}

.landing-price-row {
  display: flex;
  align-items: baseline;
  gap: 10px;
}

.landing-price {
  font-family: var(--font-display), Georgia, serif;
  font-weight: 400;
  font-size: 72px;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.landing-price.enquiry {
  font-size: 48px;
  color: var(--brand-ink);
}

.landing-price-unit {
  color: var(--ink-2);
}

.landing-price-note {
  color: var(--ink-2);
}

.landing-price-note.saving {
  font-weight: 600;
  color: var(--brand);
}

.landing-reason {
  font-size: 15px;
  color: var(--on-deep-3);
}

.landing-tier .landing-button {
  margin-top: auto;
  align-self: stretch;
  padding: 14px 20px;
}

.landing-included {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--col-gap);
  row-gap: 24px;
  border-top: 1px solid var(--ink);
  padding-top: 28px;
  margin-top: 40px;
}

.landing-included h3 {
  grid-column: span 3;
  font-size: 30px;
  line-height: 1.15;
}

.landing-included ul {
  grid-column: span 9;
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}

.landing-included li {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.landing-included-title {
  font-weight: 600;
}

.landing-included-note {
  color: var(--ink-soft);
  font-size: 16px;
}

.landing-footnotes {
  margin-top: 56px;
  font-size: 14px;
  color: var(--ink-2);
  max-width: 900px;
}

/* The toggle, with no script running at all: the page is served showing the
   annual figures and CSS alone keeps the monthly ones out of the way. */
.landing-tiers[data-billing='annual'] [data-price='monthly'],
.landing-tiers[data-billing='monthly'] [data-price='annual'] {
  display: none;
}

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

.landing-foot {
  background: var(--deep);
  color: var(--on-deep-3);
  font-size: 15px;
  margin-top: auto;
}

.landing-foot > .landing-wrap {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--col-gap);
  flex-wrap: wrap;
  padding-block: 40px;
}

.landing-foot .attribution {
  color: var(--brand-ink);
}

.landing-foot .legal-footer {
  color: var(--on-deep-3);
  margin: 8px 0 0;
}

.landing-foot a {
  color: var(--brand-ink);
}

.landing-foot-right {
  display: flex;
  flex-direction: column;
  gap: 8px;
  text-align: right;
}

/* ------------------------------------------------------- narrower ------- */

@media (max-width: 1024px) {
  .landing {
    --band: 80px;
  }

  .landing-h1 {
    font-size: 58px;
  }

  .landing-section h2 {
    font-size: 42px;
  }

  /* Matches the specificity of the 52px rule near the top of this file, and
     comes after it, so the section heading actually shrinks. That rule is
     `.landing-section > .landing-wrap > .landing-section-head > h2`, which
     outranks the plain `.landing-section h2` override below and pins six of the
     page's remaining headings at 52px on a phone, so this section opts out on
     its own rather than quietly redesigning its neighbours. Worth fixing at the
     source now that nothing else leans on that specificity. */
  .landing-section > .landing-stages-wrap > .landing-section-head > h2 {
    font-size: 42px;
  }

  /* The hero stacks, and the dates panel goes under the copy. */
  .landing-hero-copy,
  .landing-dates,
  .landing-split > .landing-section-head,
  .landing-split > .landing-lede,
  .landing-split.wide > .landing-section-head,
  .landing-split.wide > .landing-stack,
  .landing-included h3,
  .landing-included ul {
    grid-column: 1 / -1;
  }

  .landing-grid.three,
  .landing-stages,
  .landing-included ul {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* Two by two. The hairlines have to follow the new edges: the right-hand
     column has no neighbour to be ruled off from, and the top row now needs a
     line under it that four in a row never did. */
  .landing-stage:nth-child(even) {
    border-right: none;
    padding-right: 0;
  }

  .landing-stage:nth-child(odd) {
    border-right: 1px solid var(--line);
    padding-left: 0;
  }

  .landing-stage:nth-child(-n + 2) {
    border-bottom: 1px solid var(--line);
  }

  /* One column rather than twelve tracks with both children spanning all of
     them: the same picture, but the grid says what it means. */
  .landing-closing {
    grid-template-columns: minmax(0, 1fr);
    padding: 40px;
  }

  .landing-closing > .landing-section-head,
  .landing-closing-prose {
    grid-column: auto;
  }

  .landing-split {
    align-items: start;
  }

  .landing-benefits {
    column-gap: var(--col-gap);
  }

  /* Two by two, and the hairlines have to follow. Four cells in a tablet's
     width stops being a strip and starts being a squeeze. */
  .landing-facts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .landing-facts li {
    padding: 22px 20px;
    border-bottom: 1px solid var(--line);
  }

  .landing-facts li:nth-child(odd) {
    padding-left: 0;
  }

  .landing-facts li:nth-child(even) {
    padding-right: 0;
    border-right: 0;
  }

  .landing-facts li:nth-last-child(-n + 2) {
    border-bottom: 0;
  }

  /* The full row is 957px of links against 944px of page. Tightening the gap
     is enough here; below this it is not, and the row collapses instead. */
  .landing-nav {
    gap: 20px;
  }
}

@media (max-width: 900px) {
  /* Logo, Pricing, Sign in and the button. The section anchors go rather than
     wrap: a nav on two rows reads as a mistake, and everything it pointed at
     is still one scroll away. The button is named explicitly because it is an
     anchor too, and the selector would otherwise take it with the rest. */
  .landing-nav > a:not([href='#pricing']):not([href='/sign-in']):not(.landing-button) {
    display: none;
  }
}

@media (max-width: 640px) {
  .landing {
    --gutter: 20px;
    --band: 64px;
  }

  .landing-h1 {
    font-size: 44px;
  }

  .landing-section h2 {
    font-size: 34px;
  }

  .landing-section > .landing-stages-wrap > .landing-section-head > h2 {
    font-size: 34px;
  }

  .landing-standfirst {
    font-size: 18px;
  }

  /* No hamburger: a menu nobody can see is worse than a row nobody has to
     open. The three that are left will not sit beside the lockup in 350px, so
     they take a row of their own and spread across it — which reads as a
     decision, where the same items wrapping raggedly reads as a mistake. */
  .landing-masthead {
    flex-wrap: wrap;
    gap: 14px;
    padding-block: 16px;
  }

  .landing-nav {
    width: 100%;
    justify-content: space-between;
    gap: 12px;
  }

  .landing-nav .landing-button {
    padding: 12px 16px;
  }

  .landing-hero {
    padding-block: 48px;
    row-gap: 36px;
  }

  .landing-facts li {
    padding: 20px 16px;
  }

  .landing-dates {
    padding: 28px 24px;
  }

  .landing-timeline li.emphasis .landing-timeline-when {
    font-size: 32px;
  }

  .landing-grid.three,
  .landing-grid.two,
  .landing-stages,
  .landing-benefits,
  .landing-tiers,
  .landing-included ul {
    grid-template-columns: minmax(0, 1fr);
  }

  .landing-stages-wrap {
    gap: 40px;
  }

  /* Stacked. Nothing is beside anything, so the only rule left is the one
     between consecutive cards, and the tagline stops being pinned: there is no
     neighbouring card for it to line up with. */
  .landing-stage,
  .landing-stage:nth-child(odd),
  .landing-stage:nth-child(even) {
    padding: 24px 0;
    border-right: none;
    border-bottom: 1px solid var(--line);
  }

  .landing-stage:last-child {
    border-bottom: none;
  }

  .landing-stages h3 {
    font-size: 30px;
  }

  .landing-stage-promise {
    font-size: 16px;
  }

  .landing-stage-body + .landing-stage-body {
    margin-top: -8px;
  }

  .landing-stage-tagline {
    margin-top: 0;
    padding-top: 4px;
    border-top: none;
  }

  .landing-closing {
    gap: 16px;
    padding: 32px 24px 36px;
  }

  .landing-closing h3 {
    font-size: 32px;
  }

  .landing-closing-prose p {
    font-size: 15px;
  }

  .landing-card h3 {
    font-size: 24px;
  }

  .landing-benefits h3 {
    font-size: 28px;
  }

  .landing-tier h3 {
    font-size: 30px;
  }

  .landing-price {
    font-size: 56px;
  }

  .landing-price-block {
    min-height: 0;
  }

  .landing-toggle {
    width: 100%;
  }

  .landing-toggle button {
    flex: 1;
    padding: 0 12px;
    font-size: 15px;
  }

  .landing-foot > .landing-wrap {
    flex-direction: column;
  }

  .landing-foot-right {
    text-align: left;
  }
}

/* --------------------------------------------------------------- print -- */

@media print {
  .landing {
    background: #fff;
  }

  .landing-dates,
  .landing-tier.enquiry,
  .brand-band,
  .landing-foot {
    background: #fff;
    color: #000;
  }

  .landing-nav,
  .landing-toggle {
    display: none;
  }

  .landing-tiers[data-billing] [data-price] {
    display: flex;
  }
}