/* Landing page layout. Composition only — colour, type and spacing all come from
 * tokens, and the shared shapes (card, badge, ledger, callout) come from
 * components.css. Loaded only by /, so the funnel pages carry none of it. */

.sectionHead { max-width: 620px; margin-bottom: var(--space-12); }
.sectionHead--narrow { max-width: 560px; margin-bottom: 44px; }

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

.hero {
  padding-top: 88px;
  padding-bottom: var(--section-y);
  display: grid;
  gap: var(--space-16);
  /* `min()` around the track floor, and it is not decoration: `minmax(420px, 1fr)`
   * collapses to one column on a phone and then keeps the 420px, so the hero was 45px
   * wider than a 375px screen and the whole page scrolled sideways. The floor has to be
   * allowed to shrink to the column it is in. */
  grid-template-columns: repeat(auto-fit, minmax(min(420px, 100%), 1fr));
  align-items: start;
}

.hero__pitch { min-width: 0; }
.hero__eyebrow { margin-bottom: var(--space-5); }
.hero__headline { margin-bottom: var(--space-5); }
.hero__lede { margin-bottom: var(--space-8); max-width: 30em; }
.hero__capture { max-width: 520px; }

.hero__proof {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-5);
  margin-top: var(--space-6);
  font: var(--text-body-sm);
  color: var(--text-muted);
}

.hero__proofItem { display: flex; align-items: center; gap: var(--space-15); }
.hero__preview { min-width: 0; }

/* ----------------------------------------------------------- the report in the hero */

/* The preview is narrower than the column it sits in, so it is centred there — and the
   width lives on the whole block rather than on the sheet, so the label over it and the
   caption under it line up with the paper instead of with the column. */
.heroSheets {
  max-width: 480px;
  margin-inline: auto;
}

/* A real page of the real report, as vector, written by `npm run render:hero`. It
   replaced a hand-drawn miniature of a printed page; src/views/pages/landing.js says
   why, and the pink wash came off when it did.

   Nothing on the sheet can be read at this width, so the page is not shrunk to fit:
   it runs off the bottom of its frame and fades out, with two more sheets behind it.
   What that buys is the one fact worth stating in a hero, which is that the thing
   being sold is a fifty sheet typeset document about a real site. */

.sheets {
  position: relative;
  /* The top of an A4 page rather than all of it: 210 wide by 193 of the 297 a whole
     sheet would take, which is a little under two thirds. */
  aspect-ratio: 210 / 193;
  overflow: hidden;
  /* Alpha is all a mask reads, so currentColor is only standing in for "opaque" — it
     keeps the fade independent of whatever the section behind it is painted. It sits
     on the frame rather than on the front sheet so the whole stack fades together;
     the sheets behind would otherwise end in a hard edge below the fade. */
  -webkit-mask-image: linear-gradient(to bottom, currentColor 72%, transparent 100%);
  mask-image: linear-gradient(to bottom, currentColor 72%, transparent 100%);
}

/* The page itself, lowest and furthest left. It is inset from the right so the sheets
   behind it have somewhere to be. */
.sheets__front {
  position: absolute;
  top: var(--space-3);
  right: var(--space-6);
  bottom: 0;
  left: 0;
  overflow: hidden;
  background: var(--surface-card);
  border: var(--card-border);
  border-radius: var(--radius-xs);
  box-shadow: var(--shadow-lg);
}

.sheets__page {
  display: block;
  width: 100%;
  height: auto;
}

/* Paper, not content. The sheets under the top one are blank: a second page rendered
   for twelve pixels of visible edge is 380 KB to draw a sliver of grey. They step up
   and to the right, which is the shape a stack makes when it is not squared off. */
.sheets__behind {
  position: absolute;
  top: var(--space-15);
  right: var(--space-2);
  bottom: 0;
  left: var(--space-3);
  background: var(--surface-card);
  border: var(--card-border);
  border-radius: var(--radius-xs);
  opacity: .75;
}

.sheets__behind--2 {
  top: 0;
  right: 0;
  left: var(--space-5);
  opacity: .45;
}

/* ------------------------------------------------------------------- the argument */

.argument {
  /* `padding-block`, not `padding: y 0` — this is worn with `.container` and the
     shorthand wins over the container's gutter. Same fault as `.section__inner`. */
  padding-block: var(--space-16);
  display: grid;
  gap: var(--space-8);
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  align-items: baseline;
}

.argument__claim {
  font-family: var(--font-sans);
  font-weight: var(--weight-semibold);
  font-size: clamp(20px, 2.2vw, var(--size-xl));
  line-height: 1.35;
  letter-spacing: var(--tracking-heading);
  color: var(--text-strong);
  margin: 0;
  text-wrap: pretty;
}

/* --------------------------------------------------------------- the three answers */

/* subgrid keeps the eyebrow, heading, prose and example answer on shared baselines
   across all three cards, whatever length the copy runs to. */
.questionGrid {
  display: grid;
  column-gap: var(--space-5);
  row-gap: 14px;
  grid-template-columns: repeat(auto-fit, minmax(272px, 1fr));
  grid-template-rows: repeat(4, auto);
}

.questionCard { display: grid; grid-row: span 4; grid-template-rows: subgrid; }
.questionCard__example { border-radius: var(--radius-md); display: flex; flex-direction: column; gap: 7px; }
.questionCard__exampleLabel { font-size: var(--size-3xs); color: var(--text-body); }

.questionCard__exampleText {
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.55;
  color: var(--text-body);
}

.howGrid {
  margin-top: var(--space-10);
  display: grid;
  gap: var(--space-5);
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  padding: 28px var(--space-6);
}

/* ------------------------------------------------------------------ where it fits */

/* The order the work goes in, as one column the reader walks down. The first three
 * steps are the road they are already on, set in muted type with no card; the fourth
 * is ours and is the only card in the page's own argument; the last two are what the
 * card buys. src/views/pages/landing.js says why the section is a sequence and not the
 * example brief it used to be. */

.path {
  max-width: 760px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.path__step {
  position: relative;
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: var(--space-5);
  padding-bottom: var(--space-8);
}

.path__step:last-child { padding-bottom: 0; }

/* The rail joining one marker to the next. It hangs off the step rather than sitting
   behind the whole column, because a single line behind everything runs past the last
   marker with nothing to join. */
.path__step:not(:last-child)::before {
  content: '';
  position: absolute;
  left: 13px;
  top: 30px;
  bottom: 0;
  width: var(--border-hairline);
  background: var(--line-subtle);
}

.path__marker {
  width: 28px;
  height: 28px;
  border-radius: var(--radius-pill);
  border: var(--border-hairline) solid var(--line);
  background: var(--surface-page);
  display: flex;
  align-items: center;
  justify-content: center;
  font: var(--text-data);
  font-size: var(--size-3xs);
  color: var(--text-faint);
}

.path__title {
  font-family: var(--font-sans);
  font-size: var(--size-lg);
  font-weight: var(--weight-semibold);
  line-height: 1.3;
  letter-spacing: var(--tracking-heading);
  color: var(--text-strong);
  margin: 0 0 var(--space-2);
  text-wrap: balance;
}

.path__body { max-width: 46em; }

/* The road already travelled: still legible, plainly behind you. */
.path__step--past .path__title { color: var(--text-muted); font-weight: var(--weight-medium); }
.path__step--past .path__body { color: var(--text-muted); }

/* The turn. */
.path__step--now .path__marker {
  background: var(--surface-brand);
  border-color: var(--surface-brand);
  color: var(--text-inverse);
}

.path__step--next .path__marker {
  border-color: var(--line-strong);
  color: var(--text-strong);
}

.path__card { padding: var(--space-6); }
.path__gets { margin-top: var(--space-5); display: grid; gap: 11px; }
.path__note { margin-top: var(--space-5); }

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

.pricing { max-width: 640px; padding: var(--space-8); display: flex; flex-direction: column; gap: 22px; }

.pricing__included {
  display: grid;
  gap: 11px;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.pricing__vat { margin-top: var(--space-5); }

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

.closing {
  /* `padding-block`: worn with `.container`, so a shorthand here eats the gutter. */
  padding-block: 88px;
  display: grid;
  gap: var(--space-10);
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  align-items: center;
}

.closing__lede { max-width: 34em; }

.closing__capture {
  background: var(--ink-800);
  border: var(--border-hairline) solid var(--ink-700);
  border-radius: var(--radius-lg);
  padding: 22px;
}

.closing__note { margin-top: var(--space-3); }

/* The hub: what sits beneath the home page, one card each.
 *
 * The home page used to carry the product, the price, the four questions, the three
 * steps and the whole argument against audit tools, which our own report found and
 * named: every one of those is a different search and a different reader, and none of
 * them could be landed on. They are pages now, and this is the home page doing the job
 * that is left — saying what is beneath it, with a line each. */
.hubGrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: var(--space-4);
  margin-top: var(--space-6);
}

.hubCard {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  text-decoration: none;
}

.hubCard:hover { border-color: var(--line-brand); box-shadow: var(--shadow-md); text-decoration: none; }
.hubCard__title { font: var(--text-body-md); font-weight: var(--weight-bold); color: var(--text-strong); }
.hubCard__path { margin-top: auto; padding-top: var(--space-2); color: var(--text-faint); }