/* Pricing: the ledger, the Enterprise band, the comparison, the form, the
 * questions.
 *
 * Loads after `tokens.css` and `base.css`, composes their classes and redefines
 * none of them. On the standalone page it loads after `auth.css` too, and
 * borrows `.field`, `.spinner` and their children from it rather than declaring
 * a second set of inputs — a site with two definitions of "a text field" ends up
 * with two field heights. What is added here for that form is only what
 * `auth.css` has no case for: a select, a textarea and a two-up grid.
 *
 * Every colour, size and space below is a token; the raw lengths in this file
 * are hairlines, drawn glyphs and grid tracks, and each one says at its site why
 * the ladder had nothing to offer.
 *
 * **The shape, and why it is not three cards.** A row of equal cards with the
 * middle one scaled up and badged has decided the answer before the reader has
 * read the question, and at 320px it collapses into three identical boxes that
 * say nothing about which one matters.
 *
 * So the page is in two parts, because the plans are:
 *
 *   1. A ledger of the two personal plans — full-width rows separated by
 *      hairlines, where Pro is marked out by having the most room and the
 *      largest number and nothing else: no border, no fill, no badge, no scale.
 *      Remove those two rules and the hierarchy is still obvious, which is the
 *      test.
 *   2. Enterprise, on its own ground and in its own shape. It is bought by a
 *      different person for different reasons, so it is not a third row
 *      pretending to be comparable, and it is the only block on the page whose
 *      list is grouped under headings.
 *
 * A row is already a stack, so the narrow layout is this same document with the
 * tracks removed rather than a second design.
 */

/* ================================================================== *
 * 1. The page head
 * ================================================================== */

.pr-head {
  display: grid;
  gap: var(--s-m);
  max-width: var(--page-narrow);
}

/* ================================================================== *
 * 2. The billing switch
 *
 * Two real radios in a real fieldset, so arrow keys move between them and a
 * screen reader hears a group with a name. The visible control is the labels;
 * the inputs are clipped rather than `display: none`, which would take them out
 * of the tab order along with the accessibility tree.
 *
 * `.visually-hidden` from base.css is deliberately not reused here — it reveals
 * itself on focus, which is right for a skip link and wrong for a radio whose
 * focus is already drawn on the label next to it.
 * ================================================================== */

.pr-billing {
  display: grid;
  gap: var(--s-s);
  justify-items: start;
  margin-block-start: var(--s-2xl);
}

.pr-period {
  border: 0;
  padding: 0;
  /* Firefox gives a fieldset a min-inline-size of min-content, which stops the
   * track from shrinking inside a 320px column. */
  min-inline-size: 0;
}

.pr-period__track {
  display: inline-flex;
  gap: var(--s-3xs);
  padding: var(--s-3xs);
  border: 1px solid var(--paper-edge);
  border-radius: var(--radius-m);
  background-color: var(--paper-sunk);
}

.pr-period input {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.pr-period label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-xs);
  min-height: 40px;
  padding-inline: var(--s-m);
  border-radius: var(--radius-s);
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--ink-quiet);
  cursor: pointer;
  transition:
    background-color var(--t-fast) var(--ease),
    color var(--t-fast) var(--ease),
    box-shadow var(--t-fast) var(--ease);
}

.pr-period label:hover {
  color: var(--ink);
}

/* The one place the accent appears on this page. Which period is showing is a
 * state, and state is the only thing the accent is ever spent on. */
.pr-period input:checked + label {
  background-color: var(--paper-raised);
  color: var(--accent-ink);
  box-shadow: var(--lift-1);
}

.pr-period input:focus-visible + label {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

/* The percentage on the Yearly label. Authored empty and written by the script
 * from the two prices, so it cannot outlive a price change; while it is empty
 * it collapses and the label is simply "Yearly". */
.pr-period__badge {
  font-size: var(--step--1);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--ink-quiet);
}

.pr-period__badge:empty {
  display: none;
}

.pr-period input:checked + label .pr-period__badge {
  color: inherit;
}

.pr-billing__note {
  font-size: var(--step--1);
  line-height: 1.5;
  color: var(--ink-quiet);
  max-width: 58ch;
}

/* The switch does its work in JavaScript. Where there is none it would be a
 * control that moves and changes nothing, so it is not rendered at all — and
 * because a media query is resolved before first paint, removing it costs no
 * layout shift. The markup is authored in the monthly state, which is the state
 * the note under it describes, so the page still reads true. */
@media (scripting: none) {
  .pr-period {
    display: none;
  }
}

/* ================================================================== *
 * 3. The ledger
 * ================================================================== */

.plans {
  margin-block-start: var(--s-2xl);
  border-top: 1px solid var(--paper-edge);
}

.plan {
  padding-block: var(--s-xl);
  border-bottom: 1px solid var(--paper-edge);
}

/* Space is half the emphasis; the price size is the other half. Both live here
 * so the whole of "this is the plan the page is about" is one rule. */
.plan--featured {
  padding-block: clamp(var(--s-2xl), 6vw, var(--s-4xl));
  --plan-price: var(--step-4);
}

/* ---- The identity column ---- */

.plan__id {
  display: grid;
  gap: var(--s-xs);
  align-content: start;
}

/* The trial flag.
 *
 * Wears the accent, which the palette permits for exactly this: a mark that
 * says *here*. It is the only non-neutral thing in the plan grid, so it is the
 * first thing the eye lands on — which is the entire job, since the trial is
 * the reason to read the Pro column at all.
 *
 * Sits above the plan name rather than floating over the card's corner: a
 * corner ribbon has to be positioned against a card whose padding changes at
 * three breakpoints, and it clips the moment the card does.
 */
.plan__flag {
  justify-self: start;
  padding: 0.15em var(--s-s);
  border-radius: 999px;
  background: var(--accent-quiet);
  color: var(--accent-ink);
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.01em;
  white-space: nowrap;
}

.plan__name {
  font-size: var(--step-1);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.015em;
  color: var(--ink);
}

.plan--featured .plan__name {
  font-size: var(--step-2);
  letter-spacing: -0.02em;
}

.plan__price {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--s-xs);
}

/* One element, one number, nothing else inside it — a script replaces its text
 * and its data attributes and touches no layout. */
.plan__amount {
  font-size: var(--plan-price, var(--step-2));
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--ink);
  /* The figure changes under the switch; tabular figures stop the row beside it
   * from twitching when it does. */
  font-variant-numeric: tabular-nums;
}

.plan__period {
  font-size: var(--step--1);
  color: var(--ink-quiet);
}

.plan__note {
  font-size: var(--step--1);
  line-height: 1.5;
  color: var(--ink-quiet);
  max-width: 34ch;
}

/* The yearly arithmetic, written by the script out of the two prices. Set in
 * full-weight ink because it is the one line on the row that is an argument
 * rather than a fact, and it has to be legible enough to be checked. Hidden
 * with the `hidden` attribute, which base.css already forces. */
.plan__saving {
  font-size: var(--step--1);
  font-weight: 600;
  line-height: 1.5;
  color: var(--ink);
  max-width: 34ch;
}

/* ---- The body column ---- */

.plan__body {
  display: grid;
  gap: var(--s-m);
  align-content: start;
  margin-block-start: var(--s-l);
}

.plan__line {
  color: var(--ink-body);
  max-width: var(--measure);
}

/* Full ink, same size. The step-up came from the ledger layout, where the
 * featured plan was a full-width row and a larger paragraph read as emphasis.
 * Side by side it reads as a mistake: one card's prose is visibly bigger than
 * its neighbours' for no reason a visitor can see.
 *
 * The card is already set apart four other ways — a raised ground, a border, a
 * shadow and a bigger price. Weight of colour is the fifth and it is enough. */
.plan--featured .plan__line {
  color: var(--ink);
}

.plan__list {
  display: grid;
  gap: var(--s-xs);
  font-size: var(--step--1);
  line-height: 1.5;
  color: var(--ink-body);
  max-width: var(--measure);
}

/* A hairline dash rather than a bullet glyph or an icon: the list is facts in a
 * ledger, and a disc in front of each one turns it into marketing. */
.plan__list li {
  padding-inline-start: var(--s-m);
  position: relative;
}

.plan__list li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  /* 0.72em, not a space token: this must sit on the first line's baseline
   * whatever the type size is, so it is measured in the type and not in the
   * grid. */
  top: 0.72em;
  width: var(--s-xs);
  height: 1px;
  background-color: var(--ink-faint);
}

/* ---- The action column ---- */

.plan__cta {
  display: grid;
  gap: var(--s-xs);
  justify-items: start;
  margin-block-start: var(--s-l);
}

.plan__cta .btn-primary,
.plan__cta .btn-quiet {
  /* A shrink-to-fit button at the bottom of a stacked row leaves a ragged edge
   * on a phone, and in the wide layout it sits in a fixed track anyway. */
  width: 100%;
}

.plan__fine {
  font-size: var(--step--1);
  line-height: 1.5;
  color: var(--ink-quiet);
}

/* ---- The wide layout ----
 *
 * 980, arrived at by arithmetic rather than by taste. 220px is "€120" set at
 * --step-4 with its period label beside it. With the two --s-2xl gaps that
 * leaves the middle column its 40 characters at 980 and not before; below it the
 * stacked layout is not a fallback — it is better, because a 30-character column
 * is worse than a full-width paragraph.
 *
 * The action track is `fit-content(220px)` and not `auto`. `auto` was tried and
 * measured: the widest thing in that column is not the button but the line of
 * fine print under it, which sets on one line at 465px and took the middle
 * column down to 271. `fit-content` lets the track shrink to the button where
 * the fine print is short and wraps the print where it is not, and 220 is wider
 * than the longest button label on the page with its padding.
 *
 * Raw lengths for the tracks: the spacing ladder describes gaps between things,
 * not the widths of columns, and base.css sets its footer tracks the same way. */
/* Side by side.
 *
 * This was a ledger — full-width rows sharing their tracks through `subgrid` —
 * and the argument for it was that equal columns give the plan that matters the
 * same room as the plan that does not, leaving it to be marked out by
 * decoration. That argument is real and it loses to a simpler one: somebody on
 * a pricing page is choosing *between* plans, and a stack makes them scroll to
 * compare two numbers that belong in a single glance. Comparison is the whole
 * job of the page.
 *
 * `auto-fit` rather than `repeat(3, …)`, because the home page carries three
 * plans and the pricing page carries two above its Enterprise band. One rule
 * has to seat both without either turning into a stretched pair or a gap.
 *
 * Hierarchy still does the work, and it is not a border: the featured plan gets
 * a raised ground, a larger price and the only filled button on the page.
 */
@media (min-width: 900px) {
  .plans {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(clamp(260px, 30%, 340px), 1fr));
    column-gap: var(--s-l);
    row-gap: var(--s-l);
    border-top: 0;
    align-items: stretch;
  }

  .plan {
    display: flex;
    flex-direction: column;
    padding: var(--s-xl);
    border: 1px solid var(--paper-edge);
    border-bottom: 1px solid var(--paper-edge);
    border-radius: var(--radius-l);
    background: var(--paper);
  }

  .plan--featured {
    padding: var(--s-xl);
    background: var(--paper-raised);
    border-color: var(--ink-faint);
    box-shadow: var(--lift-2);
  }

  .plan__body {
    margin-block-start: var(--s-l);
  }

  /* The floor: every action on the same line, whatever the lists above them do.
   * Matching the bullet counts by hand was the alternative and it breaks the
   * first time anybody edits one. */
  .plan__cta {
    margin-block-start: auto;
    padding-block-start: var(--s-l);
  }

  .plan__cta .btn-primary,
  .plan__cta .btn-quiet {
    width: 100%;
    justify-content: center;
  }
}

/* Quoted, not numbered. At the price size "Per seat" shouts louder than either
 * number beside it. */
.plan__amount--quoted {
  font-size: var(--step-1);
  letter-spacing: -0.015em;
}

/* ================================================================== *
 * 4. The Enterprise band
 *
 * Its own ground, and deliberately not a `.section`: `.section + .section` in
 * base.css removes the top padding of a section that follows one, which is right
 * for two sections on the same paper and wrong for a band with a fill — it would
 * jam the eyebrow against the top edge of the colour. So the band carries its own
 * vertical rhythm, using the same clamp `.section` uses so the page keeps one
 * measure.
 * ================================================================== */

.ent {
  padding-block: clamp(var(--s-3xl), 9vw, var(--s-5xl));
  background-color: var(--paper-sunk);
  border-block: 1px solid var(--paper-edge);
}

.ent__head {
  display: grid;
  gap: var(--s-m);
  align-content: start;
  max-width: 42ch;
}

.ent__price {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--s-xs);
  /* Not a number, so not set like one: at --step-4 a phrase reads as shouting,
   * and this one is a sentence about a conversation. */
  font-size: var(--step-2);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--ink);
}

.ent__price small {
  font-size: var(--step--1);
  font-weight: 400;
  letter-spacing: 0;
  color: var(--ink-quiet);
}

.ent__cta {
  display: grid;
  gap: var(--s-xs);
  justify-items: start;
  margin-block-start: var(--s-s);
}

.ent__cta .btn-primary,
.ent__cta .btn-quiet {
  width: 100%;
}

.ent__fine {
  font-size: var(--step--1);
  line-height: 1.5;
  color: var(--ink-quiet);
}

/* The only grouped list on the page. A company is not buying a longer list — it
 * is buying four separate things, and four headed columns say so in the shape
 * before a word of it is read. */
.ent__groups {
  display: grid;
  /* auto-fit, so the columns fall away one at a time on the way down to 320px
   * instead of all of them at one breakpoint. 15rem is where the longest line
   * under a heading stops needing a hyphen. */
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: var(--s-xl) var(--s-l);
  margin-block-start: var(--s-2xl);
}

.ent__group h3 {
  font-size: var(--step--1);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  /* --ink-quiet and not --ink-faint: it is a heading someone has to read, and
   * --ink-faint is 2.9:1. The uppercase treatment carries the quietness. */
  color: var(--ink-quiet);
  margin-block-end: var(--s-s);
}

/* 900, not the ledger's 980: this block has no third track, so its middle
 * column reaches a readable measure sooner. Two numbers, because they are two
 * measurements. */
@media (min-width: 900px) {
  .ent__layout {
    display: grid;
    grid-template-columns: minmax(0, 22rem) minmax(0, 1fr);
    gap: var(--s-3xl);
    align-items: start;
  }

  .ent__groups {
    margin-block-start: 0;
  }

  .ent__cta .btn-primary,
  .ent__cta .btn-quiet {
    width: auto;
  }
}

/* ================================================================== *
 * 5. The comparison
 *
 * A real table at every width. It stays a table at 320px because it was designed
 * to fit there first: the three plan columns hold a mark or at most two short
 * words, and the feature names were written to fit 110px rather than written
 * long and then made to scroll sideways. Nothing here changes `display` on a
 * table part, so the header association survives everywhere.
 * ================================================================== */

.cmp {
  width: 100%;
  /* Fixed layout is what guarantees no horizontal overflow: the first row's
   * widths are the widths, and the content cannot push past them. */
  table-layout: fixed;
  border-collapse: separate;
  border-spacing: 0;
  margin-block-start: var(--s-xl);
  font-size: var(--step--1);
}

.cmp caption {
  text-align: start;
  color: var(--ink-quiet);
  font-size: var(--step--1);
  line-height: 1.5;
  padding-block-end: var(--s-m);
  max-width: var(--measure);
}

.cmp th,
.cmp td {
  /* 2px of side padding below 560, not 4: measured, a plan column is 58px wide
   * at 320 and "invoice" is 51 of them. At 4px the word breaks after the "c" —
   * the two pixels are the difference between a table and a mistake. The rule
   * further down gives the padding back as soon as there is room for it. */
  padding: var(--s-s) var(--s-3xs);
  text-align: start;
  vertical-align: baseline;
  border-bottom: 1px solid var(--paper-edge);
  /* A long unhyphenated name in a 57px column would otherwise be the one thing
   * that breaks the page sideways. */
  overflow-wrap: break-word;
}

.cmp thead th {
  position: sticky;
  top: var(--masthead-h);
  z-index: 1;
  /* Sticky cells float over the rows beneath them, so they need their own
   * ground or the text of row 12 shows through the header. */
  background-color: var(--paper);
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-quiet);
  border-bottom-color: var(--ink-faint);
}

/* 40% at the smallest width rather than the 46% below: it leaves 57px in each
 * plan column, which is what "200,000" needs at --step--1 to set on one line
 * instead of breaking mid-number. */
.cmp thead th:first-child {
  width: 40%;
  color: var(--ink);
  letter-spacing: -0.01em;
  text-transform: none;
}

.cmp tbody th {
  font-weight: 400;
  color: var(--ink-body);
}

.cmp td {
  text-align: center;
  color: var(--ink-body);
}

/* The section headings inside the table. `colgroup` scope, so a screen reader
 * announces the group before the rows under it. Two classes deep because
 * `.cmp tbody th` above is a class and two types, and would otherwise win. */
.cmp .cmp__group th {
  padding-block: var(--s-xl) var(--s-xs);
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  /* --ink-quiet, not --ink-faint: this is a real heading a reader has to read,
   * and --ink-faint is 2.9:1. The eyebrow treatment carries the quietness. */
  color: var(--ink-quiet);
  border-bottom-color: transparent;
}

.cmp tbody tr:first-child th {
  padding-block-start: var(--s-m);
}

/* The two strings in this table that have no space to break at.
 *
 * "Enterprise" set in the header's uppercase is 95px wide, and "200,000" wants
 * 62px in the body; a plan column offers 50px of text at 320 and 67px at 560.
 * Neither fits until the page is about 826px, and with no space in them they
 * break mid-word and mid-number rather than wrapping. 860 is that measurement
 * rounded up — the table's own number, deliberately not the ledger's 980,
 * because the two are measuring different columns and pretending otherwise
 * would leave one of them wrong.
 *
 * The long form is clipped rather than removed, so it is what a screen reader
 * reads at every width and only the rendering shortens. */
.cmp__short {
  display: none;
}

@media (max-width: 859px) {
  .cmp__long {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .cmp__short {
    display: inline;
  }
}

/* The mark. Drawn from two borders rather than fetched as an icon or typed as a
 * character: the whole site is one folder that opens by double-clicking, and a
 * check from an icon font is a network request and a licence.
 *
 * Raw px, like the menu glyph in base.css — this is a drawn shape, and rounding
 * it to the 8pt grid would make it a tick the size of a word. */
.mark {
  display: inline-block;
  width: 10px;
  height: 5px;
  border-left: 1.5px solid var(--ink);
  border-bottom: 1.5px solid var(--ink);
  transform: rotate(-45deg);
  /* The rotation leaves the shape sitting high in its line box. */
  margin-block-end: 3px;
}

/* The other half of the pair. --ink-faint is 2.9:1 and base.css allows it for a
 * disabled glyph and nothing else — which this is: the information is carried by
 * the clipped word beside it, and the dash is only its picture. */
.cmp__none {
  color: var(--ink-faint);
}

@media (min-width: 560px) {
  .cmp {
    font-size: var(--step-0);
  }

  .cmp th,
  .cmp td {
    padding: var(--s-s) var(--s-s);
  }

  .cmp thead th:first-child {
    width: 46%;
  }

  .cmp thead th,
  .cmp__group th {
    font-size: var(--step--1);
  }
}

/* Past this the table has more room than it needs: a 1180px-wide four-column
 * table with 40 characters in the first column and a tick in the other three is
 * mostly emptiness. It is capped instead. */
@media (min-width: 860px) {
  .cmp {
    max-width: var(--page-narrow);
  }
}

/* ================================================================== *
 * 6. The Enterprise form
 *
 * `.field` and its children come from `auth.css`, so this form is the sign-in
 * form's twin to the pixel. Only the three things that file has no case for are
 * declared here.
 * ================================================================== */

.pr-form {
  display: grid;
  gap: var(--s-l);
  margin-block-start: var(--s-xl);
  max-width: var(--page-narrow);
}

/* Two-up only where two fields fit without either being narrower than the
 * longest label it carries. 34rem is "How many people need a seat" plus its
 * select at --step-0; under that they stack, which on a phone is the only
 * layout that does not put two 30-character labels side by side. */
.pr-form__pair {
  display: grid;
  gap: var(--s-l);
}

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

/* A select is a `.field__input` with a caret, and the caret is drawn on the
 * wrapper rather than set as a background image: a data URI cannot read a custom
 * property, so an image here would be the one raw colour in the file and it
 * would be the wrong one in dark mode. */
.pr-select {
  position: relative;
}

.pr-select select {
  appearance: none;
  /* Clearance for the caret: its own 7px, the --s-m it is inset by, and a gap
   * before the longest option can reach it. */
  padding-inline-end: var(--s-2xl);
}

.pr-select::after {
  content: "";
  position: absolute;
  inset-inline-end: var(--s-m);
  /* `.field__input` carries a --s-2xs top margin from auth.css; half of it is
   * added back here so the caret is centred on the box rather than on the
   * wrapper. */
  top: calc(50% + var(--s-3xs));
  width: 7px;
  height: 7px;
  border-right: 1.5px solid var(--ink-quiet);
  border-bottom: 1.5px solid var(--ink-quiet);
  transform: translateY(-70%) rotate(45deg);
  pointer-events: none;
}

.pr-form textarea.field__input {
  /* Vertical only. A textarea that can be dragged wider than its column is a
   * textarea that can be dragged off a phone. */
  resize: vertical;
  min-height: 7rem;
  line-height: 1.5;
}

.pr-form__submit {
  justify-self: start;
  width: 100%;
}

/* `aria-disabled`, never the `disabled` attribute. A button that disables itself
 * on click drops focus to the body, and the person who pressed Return loses
 * their place at the exact moment they are being told to wait. The submit
 * handler guards on the same flag. */
.pr-form__submit[aria-disabled="true"] {
  cursor: default;
}

@media (min-width: 34rem) {
  .pr-form__submit {
    width: auto;
    min-width: 12rem;
  }
}

.pr-form__fine {
  font-size: var(--step--1);
  line-height: 1.5;
  color: var(--ink-quiet);
  max-width: var(--measure);
}

/* The form-level failure, directly above the button that caused it rather than
 * at the top of the form: on a phone the top is off-screen by the time someone
 * reaches the submit, and an error they have to scroll up to find is an error
 * they do not find.
 *
 * Said in ink, a border and a glyph rather than in colour — `tokens.css` has one
 * accent, it means state, and green is the wrong thing to say when something has
 * failed. If a danger colour is ever added, this is the rule that wants it. */
.pr-alert {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--s-xs);
  padding: var(--s-s) var(--s-m);
  background-color: var(--paper-sunk);
  border: 1px solid var(--ink-faint);
  border-radius: var(--radius-m);
  font-size: var(--step--1);
  line-height: 1.5;
  color: var(--ink); /* ← a danger token would go here */
}

.pr-alert svg {
  /* Optically centred on the first line rather than on the top of the box. */
  margin-top: 0.15em;
}

.pr-alert a {
  color: inherit;
}

/* What replaces the form once it has been sent. Same column, same width, so
 * nothing below it moves when it appears. */
.pr-sent {
  display: grid;
  gap: var(--s-s);
  margin-block-start: var(--s-xl);
  padding: clamp(var(--s-l), 5vw, var(--s-xl));
  max-width: var(--page-narrow);
  background-color: var(--paper-raised);
  border: 1px solid var(--paper-edge);
  border-radius: var(--radius-l);
  box-shadow: var(--lift-1);
}

.pr-sent p {
  color: var(--ink-body);
  max-width: var(--measure);
}

.pr-sent b {
  color: var(--ink);
  font-weight: 600;
  /* A long address in a narrow column has no space in it to break at. */
  overflow-wrap: anywhere;
}

/* Focus is moved here on arrival so the message is announced and on screen. The
 * ring would draw around a card the width of the column, which reads as an error
 * rather than as an arrival; the heading inside it is what the reader was sent
 * to, and it is the first thing announced. */
.pr-sent:focus {
  outline: none;
}

/* ================================================================== *
 * 7. The questions
 *
 * `details`/`summary`, so they open with no script, are keyboard-operable by
 * construction and are found by the browser's own find-on-page.
 * ================================================================== */

.faq {
  margin-block-start: var(--s-xl);
  max-width: var(--measure);
  border-top: 1px solid var(--paper-edge);
}

.faq__item {
  border-bottom: 1px solid var(--paper-edge);
}

.faq__q {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-m);
  padding-block: var(--s-m);
  font-size: var(--step-1);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.015em;
  color: var(--ink);
  cursor: pointer;
  list-style: none;
}

/* Safari draws its own triangle and ignores `list-style`. */
.faq__q::-webkit-details-marker {
  display: none;
}

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

/* A plus that loses its upright when the answer is open. Two pseudo-elements on
 * one span, so the sign is one box and cannot drift out of alignment with the
 * question's first line. */
.faq__sign {
  position: relative;
  flex: none;
  width: 12px;
  height: 12px;
  /* Aligned to the cap height of the question, not to its baseline. */
  align-self: center;
}

.faq__sign::before,
.faq__sign::after {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: 50%;
  width: 100%;
  height: 1.5px;
  margin-top: -0.75px;
  border-radius: 2px;
  background-color: var(--ink-quiet);
  transition: transform var(--t-mid) var(--ease);
}

.faq__sign::after {
  transform: rotate(90deg);
}

.faq__item[open] .faq__sign::after {
  transform: rotate(90deg) scaleX(0);
}

.faq__a {
  padding-block-end: var(--s-l);
  color: var(--ink-body);
}

.faq__a > * + * {
  margin-top: var(--s-s);
}

/* ================================================================== *
 * 8. Requirements, and the way out of the short version
 * ================================================================== */

/* The small print, side by side where there is room. auto-fit rather than fixed
 * columns, so they collapse one at a time on the way down to 320px instead of
 * all of them at one breakpoint — the same reasoning as the footer's columns in
 * base.css. */
.pr-print {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--s-xl) var(--s-2xl);
  align-items: start;
}

.pr-print .eyebrow {
  margin-block-end: var(--s-xs);
}

.pr-requirements {
  max-width: var(--measure);
  font-size: var(--step--1);
  line-height: 1.6;
  color: var(--ink-quiet);
}

.pr-requirements > * + * {
  margin-top: var(--s-s);
}

/* The one link in the small print. --ink-quiet on paper is 4.9:1, so the
 * underline is what marks it rather than a colour change. */
.pr-requirements a {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--ink-faint);
  transition: text-decoration-color var(--t-fast) var(--ease);
}

.pr-requirements a:hover {
  text-decoration-color: var(--ink);
}

/* The home page's link to the full table. Not a button: it is a second reading,
 * not a second action, and a third button weight is how a section loses track of
 * what its one action is. */
.pr-more {
  margin-block-start: var(--s-xl);
  font-size: var(--step--1);
  color: var(--ink-quiet);
}

/* ================================================================== *
 * 9. Reduced motion
 *
 * base.css already flattens every duration on the page. The one thing it cannot
 * know about is the plus sign, whose *end state* still has to change so the
 * control keeps telling the truth — which it does, because only the transition
 * is removed and never the transform.
 * ================================================================== */

@media (prefers-reduced-motion: reduce) {
  .faq__sign::before,
  .faq__sign::after {
    transition: none;
  }
}