/*
 * Home and the three landers (DESIGN-SYSTEM.md section 8.1 and 8.3). Loaded after
 * styles.css, so these rules win on equal specificity. Colours come from
 * tokens.css only.
 */

/* ------------------------------------------------ the hero: head, photo, instrument */

/*
 * Under 900px the hero is one column and the photo is not drawn (its <picture>
 * swaps in a 1px image there, so a phone never downloads it).
 *
 * From 900px it is two rows. The first row is the hook beside the photo. The
 * second is the calculator as one instrument: the live number and the inputs on
 * the left, the tab control above a tinted chart panel on the right, so the two
 * columns end together and no part of the hero is left empty.
 *
 * One card, one set of ids (#result-card). .calc-inputs, .fields and the active
 * tab panel generate no box of their own, so every piece of the calculator is a
 * direct item of the card and can be ordered or placed on its own. On a phone
 * the first view is the result, the balance, the fee chips and the one CTA; age
 * and the other assumptions are one disclosure, and the tabs and the chart
 * follow it.
 */
.hero-shell {
  padding: var(--s-6) 0 var(--s-3);
}

.hero-grid {
  display: grid;
  gap: var(--s-5);
}

.hero-head {
  min-width: 0;
}

/* The hook gets its own size: the home H1 is a question, so it runs a little
   smaller than the page H1 on a phone and holds to two balanced lines. */
.hero-shell h1 {
  max-width: 22ch;
  margin-bottom: var(--s-3);
  font-size: clamp(38px, calc(38px + 18 * ((100vw - 390px) / 890)), 56px);
  text-wrap: balance;
}

.hero-sub {
  margin: 0;
  color: var(--ink-2);
  font-size: var(--fs-lead);
  line-height: 1.4;
  text-wrap: balance;
}

.hero-shell #result-card {
  --card-gap: var(--s-5);
  display: flex;
  flex-direction: column;
  gap: var(--card-gap);
}

.hero-shell .calc-inputs,
.hero-shell .fields,
.hero-shell .step[data-active="true"] {
  display: contents;
}

.hero-shell .field,
.hero-shell .more-assumptions,
.hero-shell .result-head > *,
.hero-shell .tabs,
.hero-shell .calc-cta,
.hero-shell .result-visual > .chart-wrap {
  margin: 0;
}

/* The order on a phone. */
.hero-shell .result-head {
  order: 1;
}

.hero-shell .field-balance {
  order: 2;
}

.hero-shell .field-fee {
  order: 3;
}

/* The chips follow the fee field: pulled up to 8px under it. */
.hero-shell .presets {
  order: 4;
  margin-top: calc(var(--s-2) - var(--card-gap));
}

.hero-shell .calc-cta {
  order: 5;
}

.hero-shell .more-assumptions {
  order: 6;
}

.hero-shell .tabs {
  order: 7;
}

.hero-shell .tab-fields {
  order: 8;
}

.hero-shell .result-visual {
  order: 9;
}

.hero-shell #education-note {
  order: 10;
  margin: 0;
}

.hero-shell .result-head .result-sentence,
.hero-shell .result-head .result-label {
  margin-bottom: var(--s-1);
}

.result-label {
  color: var(--ink-2);
  font-size: var(--fs-small);
  line-height: var(--lh-small);
  font-weight: 600;
}

.hero-shell .result-head .result-figure {
  margin-bottom: 0;
}

.hero-shell .result-head .result-support {
  margin: var(--s-1) 0 0;
}

.hero-shell .result-head .band {
  margin: var(--s-3) 0 0;
}

.hero-shell .result-visual > .result-support {
  margin: 0 0 var(--s-2);
}

/* Fields that belong to the Income or Gap tab only. Nothing is left when the
   Fees tab is open, so the row takes no space either. */
.tab-fields {
  display: grid;
  gap: var(--s-4);
  grid-template-columns: 1fr;
}

.tab-fields:not(:has(> :not([hidden]))) {
  display: none;
}

.field-note {
  grid-column: 1 / -1;
  margin: calc(var(--s-2) * -1) 0 0;
  color: var(--ink-2);
  font-size: var(--fs-small);
  line-height: var(--lh-small);
}

.hero-shell .calc-cta .btn {
  width: 100%;
}

.hero-shell .input-group {
  max-width: none;
}

/* The anchor the closing band scrolls to. */
#calculator {
  scroll-margin-top: var(--s-5);
}

/* The photo: a shell with a hairline, an 8px bezel and a concentric inner
   radius, like the result card. Drawn from 900px only. */
.hero-photo {
  display: none;
  position: relative;
  margin: 0;
  padding: var(--bezel);
  border: 1px solid var(--hairline);
  border-radius: var(--r-outer);
  background: var(--surface-2);
  box-shadow: var(--elev-3);
}

.hero-photo picture {
  display: block;
  height: 100%;
}

.hero-photo img {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: var(--r-inner);
  object-fit: cover;
  box-shadow: inset 0 1px 0 var(--inner-highlight);
}

/* The chip over the photo's lower corner repeats the live number. It is for
   sighted visitors only (aria-hidden), because the card already says it. */
.hero-chip {
  display: none;
  position: absolute;
  left: calc(var(--s-5) * -1);
  bottom: var(--s-5);
  padding: var(--s-3) var(--s-4);
  border-radius: var(--r-inner);
  background: var(--surface);
  box-shadow: 0 0 0 1px var(--hairline), var(--elev-3);
  color: var(--ink-2);
  font-size: var(--fs-small);
  font-weight: 600;
  line-height: 1.3;
}

.hero-chip strong {
  display: block;
  color: var(--highlight-ink);
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  font-weight: 600;
  letter-spacing: var(--tracking-display);
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}

@media (min-width: 700px) {
  .tab-fields {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 900px) {
  .hero-shell {
    padding: var(--s-7) 0 var(--s-6);
  }

  /*
   * Seven columns to five. The hook takes the left of the first row; the
   * instrument runs under it across both columns. The photo stands in the right
   * column from the top of the hook and comes down over the instrument's upper
   * right corner, which the instrument keeps clear (its third track holds
   * nothing above the chart row).
   */
  .hero-grid {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    column-gap: var(--s-7);
    row-gap: var(--s-6);
    align-items: start;
  }

  .hero-head {
    grid-column: 1;
    grid-row: 1;
    align-self: end;
  }

  .hero-shell h1 {
    margin-bottom: var(--s-3);
  }

  .hero-photo {
    display: block;
    grid-column: 2;
    grid-row: 1 / 3;
    z-index: 1;
    height: clamp(360px, 36vw, 456px);
  }

  .hero-chip {
    display: block;
    left: var(--s-5);
    bottom: var(--s-5);
  }

  .calc {
    grid-column: 1 / -1;
    grid-row: 2;
  }

  /*
   * The instrument: two input tracks that share the hook's seven columns, then
   * the photo's track. Above the chart row the photo's track is empty; from the
   * chart row down it carries the tabs, the tab's own fields, the figures under
   * the chart and the disclosures, beside the chart.
   */
  .hero-shell #result-card {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 7fr) minmax(0, 10fr);
    grid-template-areas:
      "head   head   ."
      "bal    fee    ."
      "chips  chips  ."
      "cta    cta    ."
      "more   more   ."
      "chart  chart  tabs"
      "chart  chart  fields"
      "chart  chart  support"
      "chart  chart  how"
      "chart  chart  note";
    grid-template-rows: repeat(9, auto) 1fr;
    column-gap: var(--s-4);
    row-gap: 0;
    padding: calc(var(--bezel) + var(--s-6));
    box-shadow: var(--elev-3);
  }

  .hero-shell .result-visual {
    display: contents;
  }

  .hero-shell .result-head {
    grid-area: head;
  }

  .hero-shell .field-balance {
    grid-area: bal;
    margin-top: var(--s-5);
  }

  .hero-shell .field-fee {
    grid-area: fee;
    margin-top: var(--s-5);
  }

  .hero-shell .presets {
    grid-area: chips;
    margin-top: var(--s-2);
  }

  .hero-shell .calc-cta {
    grid-area: cta;
    margin-top: var(--s-5);
  }

  .hero-shell .more-assumptions {
    grid-area: more;
    margin-top: var(--s-4);
  }

  .hero-shell .tab-fields {
    grid-area: fields;
    margin: var(--s-5) 0 0 var(--s-7);
  }

  /* The chart row opens under one hairline across the whole core. */
  .hero-shell #result-card::after {
    content: "";
    grid-column: 1 / -1;
    grid-row: 6;
    align-self: start;
    margin-top: var(--s-6);
    border-top: 1px solid var(--hairline);
  }

  .hero-shell .result-visual > .chart-wrap {
    grid-area: chart;
    align-self: start;
    margin-top: calc(var(--s-6) + var(--s-5));
  }

  .hero-shell .tabs {
    grid-area: tabs;
    margin: calc(var(--s-6) + var(--s-5)) 0 0 var(--s-7);
  }

  .hero-shell .result-visual > .result-support,
  .hero-shell .result-visual > .chart-caption {
    grid-area: support;
    margin: var(--s-5) 0 0 var(--s-7);
  }

  .hero-shell .result-visual > .assumptions {
    grid-area: how;
    margin: var(--s-4) 0 0 var(--s-7);
  }

  .hero-shell #education-note {
    grid-area: note;
    align-self: start;
    margin: var(--s-5) 0 0 var(--s-7);
  }

  .hero-shell .result-head .result-figure {
    font-size: min(var(--fs-display), 80px, 17cqi);
  }

  /* The income view drops the fee: the balance takes both input tracks. */
  .hero-shell[data-default-tab="income"]:not([data-view="fees"], [data-view="gap"]) .field-balance {
    grid-column: bal-start / fee-end;
  }
}

/* The chart is drawn on a 380-unit-wide canvas that scales to its box, so its
   20-unit labels grow past the body size on a wide card. From 900px each label
   is held at the body size: charts.js sets --chart-k (380 over the box width).
   Until it is set, the 20-unit label stays. */
@media (min-width: 900px) {
  .hero-shell .chart-wrap[style*="--chart-k"] svg text {
    font-size: calc(var(--fs-body) * var(--chart-k));
  }
}

/* --------------------------------------------- the income range bar (/income/) */

/* Worst case at the left end, best case at the right end, a tick for the likely
   figure (--likely is set by calculator.js). The words are the two figures only. */
.range-bar {
  --likely: 50%;
}

.hero-shell .result-head .range-bar {
  margin: var(--s-5) 0 0;
}

/* A solid filled band, not an empty slider track: it spans the whole range, and
   the likely figure is a gap cut through it. Nothing on it looks draggable. */
.range-track {
  position: relative;
  height: var(--s-4);
  overflow: hidden;
  border-radius: var(--s-4);
  background: var(--brand-500);
}

.range-tick {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--likely);
  width: 4px;
  margin-left: -2px;
  background: var(--surface);
}

.range-ends {
  display: flex;
  justify-content: space-between;
  margin: var(--s-3) 0 0;
  color: var(--ink-2);
  font-size: var(--fs-body);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* ---------------------------------------------- the income view of the hero */

/*
 * A hero that names income in data-default-tab (the /income/ lander) opens
 * on it and lays out for it. The view ends the moment the visitor picks another
 * tab (calculator.js sets data-view), so Fees and Gap keep the shared layout.
 * Until the script runs there is no data-view: the Income panel is already
 * shown, so the page never flashes the Fees number.
 *
 * Income does not use the fee, so the fee field goes. On a phone the one input
 * above the fold is the balance, then the CTA; the figure and the range bar are
 * larger and the gaps follow the screen height, so the assumptions and the tabs
 * start below the fold.
 */
.hero-shell[data-default-tab="income"]:not([data-view]) #panel-fees {
  display: none;
}

.hero-shell[data-default-tab="income"]:not([data-view]) #panel-income {
  display: contents;
}

.hero-shell[data-default-tab="income"]:not([data-view="fees"], [data-view="gap"]) .field-fee,
.hero-shell[data-default-tab="income"]:not([data-view="fees"], [data-view="gap"]) .presets {
  display: none;
}

@media (max-width: 899px) {
  .hero-shell[data-default-tab="income"]:not([data-view="fees"], [data-view="gap"]) #result-card {
    --income-gap: clamp(var(--s-4), 3svh, var(--s-5));
    gap: var(--income-gap);
  }

  .hero-shell[data-default-tab="income"]:not([data-view="fees"], [data-view="gap"]) .result-head .result-figure {
    font-size: min(84px, 24cqi);
  }

  .hero-shell[data-default-tab="income"]:not([data-view="fees"], [data-view="gap"]) .range-bar {
    margin-top: var(--s-6);
  }
}

/* ------------------------------------------------------ fee presets (8.1) */

/* Three equal chips in one row at every width. On a phone each chip shows only
   its rate and the plain-words note stays for screen readers, so the row never
   wraps and the fold stays short. From 700px the note is shown too. */
.presets {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s-2);
  margin: var(--s-2) 0 0;
}

.chip {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-1);
  min-height: var(--tap);
  padding: var(--s-1) var(--s-2);
  border: 1px solid var(--control-edge);
  text-align: center;
  border-radius: var(--r-pill);
  background: var(--brand-tint);
  color: var(--brand);
  font-family: var(--font-body);
  font-size: var(--fs-small);
  font-weight: 600;
  line-height: 1.2;
  cursor: pointer;
  transition:
    background-color var(--dur-1) var(--ease-out),
    border-color var(--dur-1) var(--ease-out),
    transform var(--dur-1) var(--ease-out);
}

.chip-note {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}

/* Wide enough for the note beside the rate: a one-column card from 700px, and the
   wide hero from 1100px. In between the left column is narrow, so rates only. */
@media (min-width: 700px) and (max-width: 899px), (min-width: 1100px) {
  .chip-note {
    position: static;
    width: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    clip: auto;
    white-space: normal;
  }
}

.chip:hover {
  background: var(--brand-200);
}

.chip:active {
  transform: scale(0.98);
}

/* The picked chip is filled, so it reads at a glance without colour alone
   (white on --brand is about 9:1). */
.chip[aria-pressed="true"] {
  border-color: var(--brand);
  background: var(--brand);
  color: var(--action-ink);
  font-weight: 700;
}

.chip:focus-visible {
  outline: 3px solid var(--ink);
  outline-offset: 2px;
  box-shadow: 0 0 0 7px var(--focus);
}

/* ------------------------------------------- more assumptions disclosure */

/* A row like the FAQ rows: 48px tall, text at 16px or more, and the caret from
   styles.css at the far right (its margin-left: auto). */
.more-assumptions > summary {
  align-items: center;
  gap: var(--s-2);
  min-height: var(--tap);
  padding: var(--s-2) 0;
  color: var(--ink-2);
}

/* The values wrap inside their own span, so the caret stays on the label line. */
.more-values {
  min-width: 0;
}

.more-label {
  color: var(--ink-2);
  font-size: var(--fs-body);
  font-weight: 600;
}

.more-values {
  display: none;
  color: var(--ink-2);
  font-size: var(--fs-small);
  font-weight: 400;
  font-variant-numeric: tabular-nums;
}

/* The live values sit beside the label once there is room for them; on a phone
   the row is just the label and the caret, so the fold stays short. */
@media (min-width: 700px) {
  .more-values {
    display: inline;
  }
}

.more-fields {
  padding-top: var(--s-2);
}

/* The secondary controls start under a hairline, below the one CTA. */
.hero-shell .more-assumptions {
  border-top: 1px solid var(--hairline);
}

/* ------------------------------------------------- the sections below the fold */

/*
 * A section's padding is the only space between two sections. Its first child
 * starts flush and its last child ends flush, so no margin or row gap stacks on
 * top of the padding: the gap between two blocks of content is --section-y.
 */
main > section > .wrap > :first-child {
  margin-top: 0;
}

main > section > .wrap > :last-child {
  margin-bottom: 0;
}

/* The step text's own bottom margin sits inside its card (a grid item does
   not collapse it), so it stacked 16px onto the card padding. */
.steps li > :last-child {
  margin-bottom: 0;
}

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

/* Section headings are the page's second voice: larger than the token on a wide
   screen, tight at the top of their block. */
main > section > .wrap > h2,
.call-copy h2,
.start-split h2 {
  font-size: clamp(30px, calc(30px + 14 * ((100vw - 390px) / 890)), 44px);
  line-height: 1.1;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

main > section > .wrap > h2 {
  margin-bottom: var(--s-5);
}

/* ------------------------------------------------------------- proof strip */

/* Three promises as one ledger line: set in the display face, parted by
   hairlines, under the hero. Every item is an icon and at most six words. */
.proof {
  padding: 0;
  border-block: 1px solid var(--hairline);
  background: var(--surface);
}

.proof-strip {
  display: grid;
  max-width: none;
  margin: 0;
  padding: 0;
  list-style: none;
}

.proof-strip li {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-3) 0;
  color: var(--ink);
  font-family: var(--font-display);
  font-size: var(--fs-body);
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: -0.005em;
  text-wrap: balance;
}

.proof-strip li + li {
  border-top: 1px solid var(--hairline);
}

.proof-strip .icon-badge {
  flex: 0 0 auto;
  margin: 0;
}

/* ------------------------------------------------------------ how it works */

/*
 * Three steps, each an object render on a warm plinth, then the numeral beside
 * the title and one line. The renders (public/img/steps/, made by
 * scripts/brand/gen-images.mjs) share one 4:3 transparent canvas, light and
 * camera, so the plinths line up without per-image rules. The plinth sits above
 * the paper grain, so the renders stay clean. From 700px the steps stand in
 * three columns and share rows, so the titles and the lines start level.
 */
.how-steps {
  max-width: none;
  gap: var(--s-6);
}

.step-card {
  display: grid;
  align-content: start;
  row-gap: var(--s-4);
}

.step-art {
  position: relative;
  z-index: 1;
  margin: 0;
  aspect-ratio: 16 / 10;
  border-radius: var(--r-inner);
  background: var(--surface-2);
  box-shadow: inset 0 0 0 1px var(--hairline);
}

.step-art img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.step-text {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: var(--s-3);
  align-items: start;
}

/* The numeral is set in the display face and brass, large enough to read as a
   mark rather than a bullet. */
.step-num {
  grid-row: 1 / span 2;
  min-width: 0.7em;
  color: var(--highlight-ink);
  font-family: var(--font-display);
  font-size: 44px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: var(--tracking-display);
}

.step-text h3 {
  margin: 0 0 var(--s-1);
  font-size: var(--fs-lead);
}

.step-text p {
  grid-column: 2;
  margin: 0;
  color: var(--ink-2);
  font-size: var(--fs-body);
}

@media (min-width: 700px) {
  .how-steps {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-rows: auto auto 1fr;
    column-gap: var(--s-7);
    row-gap: 0;
  }

  .how-steps > .step-card {
    grid-row: span 3;
    grid-template-rows: subgrid;
    row-gap: 0;
  }

  .how-steps .step-art {
    aspect-ratio: auto;
    margin-bottom: var(--s-5);
  }

  .how-steps .step-art img {
    height: auto;
  }

  .how-steps .step-text {
    grid-row: 2 / span 2;
    grid-template-rows: subgrid;
    row-gap: 0;
  }
}


/* ------------------------------------------------------------ the call */

/*
 * The statement review: the photo in its bezel, then the promise as three ruled
 * lines. From 900px the photo takes seven of twelve columns and the words the
 * other five, set level with the photo's middle. The photo sits above the paper
 * grain, like the hero photo and the step renders.
 */
.call-split {
  display: grid;
  gap: var(--s-5);
  align-items: center;
}

.call-photo {
  position: relative;
  z-index: 1;
  margin: 0;
  padding: var(--bezel);
  border: 1px solid var(--hairline);
  border-radius: var(--r-outer);
  background: var(--surface-2);
  box-shadow: var(--elev-2);
}

.call-photo img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  border-radius: var(--r-inner);
  object-fit: cover;
  box-shadow: inset 0 1px 0 var(--inner-highlight);
}

.call-copy h2 {
  margin-bottom: var(--s-5);
}

.check-list,
.money-rows {
  max-width: none;
  margin: 0;
  padding: 0;
  list-style: none;
}

.check-list li {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  padding: var(--s-4) 0;
  border-bottom: 1px solid var(--hairline);
  color: var(--ink);
  font-size: var(--fs-lead);
  font-weight: 600;
  line-height: 1.3;
}

.check-list li:first-child {
  border-top: 1px solid var(--hairline);
}

/* A tick or a cross in a 32px circle: the tick on the brand tint, the cross
   quieter on the neutral shell, because it marks what we never do. */
.check-dot {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: var(--icon-circle);
  height: var(--icon-circle);
  border-radius: var(--r-pill);
  background: var(--brand-tint);
}

.check-dot .icon {
  width: 20px;
  height: 20px;
}

.money-no .check-dot {
  background: var(--surface-2);
}

.money-no .check-dot .icon {
  color: var(--ink-2);
}

/* ----------------------------------------------------- how we make money */

/* One double-bezel table, two columns: what we do and what we never do. */
.trust-table {
  display: grid;
  gap: var(--s-5);
  padding: calc(var(--bezel) + var(--s-5));
}

.trust-col h3 {
  margin: 0 0 var(--s-3);
  font-size: var(--fs-lead);
}

.money-rows li {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-3) 0;
  border-top: 1px solid var(--hairline);
  color: var(--ink);
  font-size: var(--fs-body);
  font-weight: 600;
  line-height: 1.3;
}

/* ------------------------------------------------------- the closing band */

/* The forest band: heading, one line, and one real button. The button is the
   cream pill from styles.css (.band-brand .btn) with the arrow in its circle;
   on the band the arrow circle is forest at 15%, so it stays visible on cream. */
#start.band-brand {
  padding: var(--s-7) 0;
}

.start-split {
  display: grid;
  gap: var(--s-5);
  align-items: center;
}

.start-split h2 {
  margin-bottom: var(--s-3);
}

.start-split p {
  max-width: 46ch;
  margin: 0;
  color: var(--action-ink);
  font-size: var(--fs-lead);
  line-height: 1.45;
  text-wrap: pretty;
}

.band-brand .btn .btn-arrow {
  background: var(--brand);
}

.band-brand .btn .btn-arrow .icon {
  color: var(--action-ink);
}

.band-brand .btn:focus-visible {
  outline-color: var(--action-ink);
  box-shadow: 0 0 0 7px var(--focus);
}

/* --------------------------------------------- the one authored moment */

/* The fee lines draw in over 600ms, then the gap fill fades in. The chart is
   drawn by JS only on the first render (charts.js, `draw`). With reduced motion
   nothing is animated and every line and fill shows at once. */
@media (prefers-reduced-motion: no-preference) {
  .chart-draw .line-draw {
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    animation: draw-line 600ms var(--ease-out) forwards;
  }

  .chart-draw .gap-fill {
    animation: fade-in 300ms var(--ease-out) 600ms both;
  }
}

@keyframes draw-line {
  to {
    stroke-dashoffset: 0;
  }
}

@keyframes fade-in {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

/* -------------------------------------------------------- desktop width use */

/* At 700px and up the Annual contribution row and friends sit two to a row, and
   the proof strip is one line of three, parted by hairlines. */
@media (min-width: 700px) {
  .more-fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--s-4);
  }

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

  .proof-strip li {
    justify-content: center;
    padding: var(--s-5) var(--s-4);
  }

  .proof-strip li + li {
    border-top: 0;
    border-left: 1px solid var(--hairline);
  }
}

/* From 900px the lower sections use the 1120px container: the call is a photo
   beside its three lines, the table is two columns and the FAQ is two columns
   of rows. Mobile keeps one column. */
@media (min-width: 900px) {
  .call-split {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    column-gap: var(--s-8);
  }

  .call-photo img {
    aspect-ratio: 3 / 2;
  }

  .trust-table {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--s-8);
  }

  .start-split {
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: var(--s-8);
  }

  #start.band-brand {
    padding: var(--s-8) 0;
  }

  #faq .wrap {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--s-7);
  }

  #faq .wrap > h2 {
    grid-column: 1 / -1;
  }
}

/* ------------------------------------------------------------- the rhythm */

/*
 * The gap a visitor reads is measured from text to text, and a card, a table or
 * a photo ends in padding that is not text. The section above such a block
 * gives that padding back, so the space between two sections still lands in
 * 72-112px on desktop and 48-64px on a phone.
 */
.hero-shell {
  padding-bottom: var(--s-3);
}

#how {
  padding-bottom: calc(var(--section-y) / 2 - var(--s-3));
}

#call {
  padding-bottom: calc(var(--section-y) / 2 - var(--s-4));
}

#money {
  padding-bottom: 0;
}

#faq {
  padding-bottom: calc(var(--section-y) / 2 - var(--s-3));
}

.trust-table {
  padding: calc(var(--bezel) + var(--s-4));
}

@media (min-width: 900px) {
  .hero-shell {
    padding-bottom: var(--s-6);
  }

  #how {
    padding-bottom: calc(var(--section-y) / 2 - var(--s-3));
  }

  #call {
    padding-bottom: calc(var(--section-y) / 2 - var(--s-5));
  }

  .trust-table {
    padding: calc(var(--bezel) + var(--s-5));
  }
}