/* Site-only stylesheet (UI-SPEC A-01). The landing page and the sample report link it after the base stylesheet; /bot, the share report and the pilot pages never do. It holds no tokens and no font faces: the base sheet carries both and always comes first. Every selector starts with .st-l- or .st-, every colour is a token, and nothing here loads a file. Two breakpoints are used by every rule: below 980 px and below 640 px, and the closing section of the sample also follows the 760 px gutter step of the shipped report column. Class names follow the landing class map; the modifiers (--q, --a, --missing and so on) are the ones the markup uses. */

/* ---------- Page frame ---------- */

.st-l-wrap {
  max-width: 1200px;
  margin: 0 auto;
  padding-inline: clamp(16px, 4vw, 48px);
}

.st-l-top {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--paper);
  border-bottom: 1px solid var(--rule);
}

.st-l-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  padding-block: var(--space-3);
}

/* The wordmark is plain type; the link around it carries the name and has no underline. */
.st-l-home {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: inherit;
  text-decoration: none;
}

.st-l-nav__links {
  display: flex;
  gap: var(--space-6);
  margin: 0;
  padding: 0;
  list-style: none;
}

.st-l-nav__links a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  border-bottom: 1px solid transparent;
  color: var(--ink-2);
  font: 400 14px / 22px var(--font-mono);
  text-decoration: none;
}

.st-l-nav__links a:hover {
  border-bottom-color: var(--ink);
  color: var(--ink);
}

/* ---------- Focus under the sticky bars ---------- */

/* A sticky bar covers the top of the window, and a browser that scrolls a focused control only as far as needed (Firefox, Safari) can leave it under the bar (WCAG 2.2 SC 2.4.11). Every control keeps clear of the bar by the bar's height plus a gap. The landing page has the 69 px header (see .st-l-stage); the sample has its 32 px strip and the section bar below it, which the sample's blocks clear by 96 px. The rules sit on the controls, not on the root element, because every selector of this sheet starts with .st-. */
.st-root {
  --st-l-clear: calc(69px + var(--space-4));
}

.st-l-sample {
  --st-l-clear: 96px;
}

.st-root a,
.st-root button,
.st-root input,
.st-root select,
.st-root textarea,
.st-root summary,
.st-root [tabindex] {
  scroll-margin-top: var(--st-l-clear);
}

/* ---------- Sections ---------- */

.st-l-sec {
  padding-block: var(--space-9);
  padding-inline: calc(clamp(16px, 4vw, 48px) + max(0px, (100% - 1200px) / 2));
  border-top: 1px solid var(--rule);
  scroll-margin-top: 24px;
}

/* A section already keeps the page column and gutter in its own padding, so a wrap inside it adds nothing. */
.st-l-sec > .st-l-wrap {
  max-width: none;
  padding-inline: 0;
}

.st-l-sec h2,
.st-l-sec h3,
.st-l-sec h4 {
  scroll-margin-top: 24px;
}

.st-l-sec__head {
  display: grid;
  gap: var(--space-4);
  max-width: 780px;
  margin-bottom: var(--space-7);
}

.st-l-sec__sub {
  max-width: 36em;
  margin: 0;
  color: var(--ink-2);
  font: 400 19px / 33px var(--font-sans);
}

/* ---------- Buttons: ink face or outline, 44 px, the body-strong style (A-04). No press movement. ---------- */

.st-btn--primary,
.st-btn--outline,
.st-l-btn-light {
  height: 44px;
  min-height: 44px;
  padding: 0 var(--space-5);
  border-radius: var(--radius-md);
  font: 600 16px / 26px var(--font-sans);
  letter-spacing: normal;
  text-decoration: none;
}

.st-btn--primary {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--on-ink);
  box-shadow: var(--shadow-button);
}

.st-btn--primary:hover {
  background: var(--ink-2);
  border-color: var(--ink-2);
}

.st-btn--outline {
  background: transparent;
  border-color: var(--ink);
  color: var(--ink);
}

.st-btn--outline:hover {
  background: var(--paper-sunk);
}

/* ---------- Panel anatomy: the framed product window ---------- */

.st-panel__top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3);
}

.st-panel__body {
  padding: var(--space-5);
}

.st-panel__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-4);
  padding-bottom: var(--space-4);
  margin-bottom: var(--space-5);
  border-bottom: 1px solid var(--rule);
}

.st-panel__title {
  margin: 0;
  font: 600 16px / 26px var(--font-sans);
}

.st-panel__meta {
  color: var(--ink-3);
  font: 400 12px / 18px var(--font-mono);
  text-align: right;
}

.st-panel__foot {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-2) var(--space-4);
  padding: var(--space-3) var(--space-4);
  border-top: 1px solid var(--rule);
  background: var(--paper);
  color: var(--ink-3);
  font: 500 12px / 16px var(--font-mono);
  letter-spacing: 0.1em;
}

/* The "Following" pill: the one heather fill in the walkthrough panel. */
.st-follow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 32px;
  padding: 0 var(--space-3);
  border-radius: var(--radius-pill);
  background: var(--heather);
  color: var(--ink);
  font: 400 12px / 18px var(--font-mono);
  white-space: nowrap;
}

.st-follow::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 1px;
  background: var(--heather-ink);
}

/* A flex-wrap row of badges. */
.st-wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}

/* ---------- Progress rail: built by the script, decorative, hidden from assistive technology ---------- */

.st-rail {
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  background: var(--paper);
}

.st-rail__progress {
  position: absolute;
  top: -1px;
  left: 0;
  height: 2px;
  width: 20%;
  background: var(--ink);
}

.st-rail__progress[data-step="1"] {
  width: 20%;
}

.st-rail__progress[data-step="2"] {
  width: 40%;
}

.st-rail__progress[data-step="3"] {
  width: 60%;
}

.st-rail__progress[data-step="4"] {
  width: 80%;
}

.st-rail__progress[data-step="5"] {
  width: 100%;
}

.st-rail__step {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3);
  overflow: hidden;
  color: var(--ink-3);
  font: 500 12px / 16px var(--font-mono);
  letter-spacing: 0.1em;
  white-space: nowrap;
}

.st-rail__step::before {
  content: "";
  flex: none;
  width: 8px;
  height: 8px;
  box-shadow: inset 0 0 0 1.5px var(--ink-3);
}

.st-rail__step[data-state="done"],
.st-rail__step[data-state="current"] {
  color: var(--ink);
}

.st-rail__step[data-state="done"]::before,
.st-rail__step[data-state="current"]::before {
  background: var(--ink);
  box-shadow: none;
}

/* ---------- Attempt rows of the first view ---------- */

.st-rows {
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--rule);
  list-style: none;
}

.st-row {
  position: relative;
  display: grid;
  grid-template-columns: 28px minmax(0, 1.1fr) minmax(0, 1.6fr) auto 52px;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--rule);
}

.st-row--focus {
  padding-inline: var(--space-3) var(--space-2);
  background: linear-gradient(90deg, var(--heather) 0%, var(--heather) 45%, transparent 100%);
  box-shadow: inset 3px 0 0 var(--ink);
}

.st-row__name {
  display: grid;
  min-width: 0;
}

.st-row__name b {
  font: 600 16px / 26px var(--font-sans);
}

.st-row__name small {
  color: var(--ink-3);
  font: 400 12px / 18px var(--font-mono);
}

.st-row__detail {
  min-width: 0;
  color: var(--ink-2);
  font: 400 14px / 22px var(--font-mono);
}

.st-row__time {
  color: var(--ink-3);
  font: 400 12px / 18px var(--font-mono);
  font-variant-numeric: tabular-nums;
  text-align: right;
}

/* ---------- The three-party fault bar: the party at fault carries aria-current and its family colours ---------- */

.st-attribution {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  overflow: hidden;
  border: 1px solid var(--rule);
  border-radius: var(--radius-md);
  background: var(--paper-raised);
}

.st-attribution__party {
  display: grid;
  gap: var(--space-1);
  padding: var(--space-3) var(--space-4);
  border-left: 1px solid var(--rule);
  color: var(--ink-3);
}

.st-attribution__party:first-child {
  border-left: 0;
}

.st-attribution__party[data-family="fail"] {
  --st-t: var(--fail-text);
  --st-bg: var(--fail-tint);
  --st-b: var(--fail-border);
}

.st-attribution__party[data-family="blocked"] {
  --st-t: var(--blocked-text);
  --st-bg: var(--blocked-tint);
  --st-b: var(--blocked-border);
}

.st-attribution__party[data-family="agent"] {
  --st-t: var(--agent-text);
  --st-bg: var(--agent-tint);
  --st-b: var(--agent-border);
}

.st-attribution__party b {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font: 500 12px / 16px var(--font-mono);
  letter-spacing: 0.1em;
}

.st-attribution__party b::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 1px;
  box-shadow: inset 0 0 0 1.5px var(--rule-strong);
}

.st-attribution__party span {
  font: 400 14px / 22px var(--font-sans);
}

.st-attribution__party[aria-current="true"] {
  background: var(--st-bg, var(--paper-sunk));
  color: var(--st-t, var(--ink));
}

.st-attribution__party[aria-current="true"] b::before {
  background: var(--st-b, var(--ink));
  box-shadow: none;
}

.st-attribution__party[aria-current="true"][data-family="agent"] b::before {
  background: transparent;
  box-shadow: inset 0 0 0 1.5px var(--st-b);
}

/* ---------- Honeypot: off screen by clip and position, never display none ---------- */

.st-trap {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  border: 0;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ---------- 1 Hero ---------- */

.st-l-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  align-items: center;
  gap: var(--space-8);
  padding-block: var(--space-9);
}

.st-l-hero__copy {
  display: grid;
  align-content: start;
  gap: var(--space-6);
}

.st-l-hero__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.st-l-hero__trust {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-5);
  margin: 0;
  padding: 0;
  color: var(--ink-3);
  font: 400 12px / 18px var(--font-mono);
  list-style: none;
}

.st-l-hero__trust li {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

.st-l-hero__trust li::before {
  content: "";
  width: 8px;
  height: 8px;
  background: var(--ink-3);
}

/* The sample check panel: a question, the AI's answer, the store's own page, the verdict. */
.st-l-check {
  display: grid;
  margin-bottom: 0;
  overflow: hidden;
}

.st-l-check__body {
  position: relative;
  display: grid;
  gap: var(--space-4);
  padding: var(--space-5);
}

.st-l-check__row {
  position: relative;
  display: grid;
  gap: var(--space-2);
}

.st-l-check__label {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--ink-3);
  font: 500 12px / 16px var(--font-mono);
  letter-spacing: 0.12em;
}

.st-l-bubble {
  max-width: 30em;
  margin: 0;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-lg);
  font: 400 16px / 26px var(--font-sans);
}

.st-l-bubble--q {
  justify-self: end;
  border-bottom-right-radius: var(--radius-xs);
  background: var(--paper-sunk);
}

.st-l-bubble--a {
  justify-self: start;
  border: 1px solid var(--rule);
  border-bottom-left-radius: var(--radius-xs);
  background: var(--paper);
}

.st-l-mini {
  display: grid;
  justify-items: start;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--rule);
  border-radius: var(--radius-md);
  background: var(--paper);
}

.st-l-mini__url {
  color: var(--ink-3);
  font: 400 12px / 18px var(--font-mono);
}

.st-l-mini__store {
  padding: var(--space-1) var(--space-3);
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius-sm);
  font: 400 14px / 22px var(--font-sans);
}

/* A chevron drawn from a border, so no glyph outside the font subset is typed. */
.st-l-chev::after {
  content: "";
  display: inline-block;
  margin-left: var(--space-2);
  border: 4px solid transparent;
  border-top-color: currentColor;
  border-bottom-width: 0;
  vertical-align: middle;
}

/* The stock mark: heather in the hero panel, the one highlight there. */
.st-l-stock {
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-xs);
  background: var(--heather);
  box-shadow: inset 0 0 0 1.5px var(--heather-ink);
  color: var(--ink);
  font: 500 14px / 22px var(--font-mono);
}

.st-l-stock--missing {
  background: transparent;
  box-shadow: inset 0 0 0 1.5px var(--rule-strong);
  color: var(--ink-3);
  outline: 1px dashed var(--rule-strong);
  outline-offset: 3px;
}

.st-l-check__verdict {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  padding-top: var(--space-4);
  border-top: 1px solid var(--rule);
}

.st-l-check__why {
  margin: 0;
  color: var(--ink-2);
  font: 400 14px / 22px var(--font-sans);
}

/* ---------- 2 The blind spot: two drawn store pages ---------- */

.st-l-blind {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-5);
}

.st-l-blindview {
  display: grid;
  align-content: start;
  gap: var(--space-3);
}

.st-l-blindview__label {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--ink-2);
  font: 500 12px / 16px var(--font-mono);
  letter-spacing: 0.12em;
}

.st-l-blindview__label svg {
  width: 16px;
  height: 16px;
}

.st-l-mock {
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--rule);
  border-radius: var(--radius-md);
  background: var(--paper-raised);
}

.st-l-mock__bar {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--rule);
  background: var(--paper-sunk);
}

.st-l-mock__dots {
  display: flex;
  gap: var(--space-1);
}

.st-l-mock__dots span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--rule-strong);
}

.st-l-mock__url {
  min-width: 0;
  color: var(--ink-3);
  font: 400 12px / 18px var(--font-mono);
  overflow-wrap: anywhere;
}

.st-l-mock__page {
  display: grid;
  justify-items: start;
  gap: var(--space-2);
  padding: var(--space-5);
}

.st-l-mock__crumbs {
  color: var(--ink-3);
  font: 400 12px / 18px var(--font-sans);
}

.st-l-mock__title {
  font: 600 16px / 26px var(--font-sans);
}

.st-l-mock__price {
  margin-bottom: var(--space-2);
  font: 400 16px / 26px var(--font-sans);
}

.st-l-mock__btn {
  margin-top: var(--space-2);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-pill);
  background: var(--ink);
  color: var(--on-ink);
  font: 500 14px / 22px var(--font-mono);
}

.st-l-blind__note {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  margin: var(--space-5) 0 0;
  color: var(--ink-2);
  font: 400 14px / 22px var(--font-mono);
}

/* ---------- 3 How it works: steps on the left, the stage panel on the right ---------- */

.st-l-walk {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  align-items: start;
  gap: var(--space-8);
}

.st-l-steps {
  display: grid;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.st-l-step {
  display: grid;
  gap: var(--space-3);
  padding: var(--space-4) 0 var(--space-4) var(--space-5);
  border-left: 2px solid var(--rule);
}

.st-l-step__title {
  margin: 0;
  color: var(--ink);
  font: 400 30px / 38px var(--font-display);
  letter-spacing: -0.01em;
  text-wrap: balance;
}

.st-l-step__text {
  max-width: 32em;
  margin: 0;
  color: var(--ink-2);
  font: 400 16px / 26px var(--font-sans);
}

/* With the script the current step is marked and the others step back. Without it every title is ink. */
.st-l-walk.is-enhanced .st-l-step {
  cursor: pointer;
}

.st-l-walk.is-enhanced .st-l-step:hover {
  border-left-color: var(--rule-strong);
}

.st-l-walk.is-enhanced .st-l-step[aria-current="step"] {
  border-left-color: var(--ink);
  cursor: default;
}

.st-l-walk.is-enhanced .st-l-step .st-l-step__title {
  color: var(--ink-3);
}

.st-l-walk.is-enhanced .st-l-step[aria-current="step"] .st-l-step__title {
  color: var(--ink);
}

.st-l-walk.is-enhanced .st-l-step .st-eyebrow {
  color: var(--ink-3);
}

.st-l-walk.is-enhanced .st-l-step .st-eyebrow__num {
  background: transparent;
  box-shadow: inset 0 0 0 1.5px var(--ink);
  color: var(--ink);
}

.st-l-walk.is-enhanced .st-l-step[aria-current="step"] .st-eyebrow {
  color: var(--ink-2);
}

.st-l-walk.is-enhanced .st-l-step[aria-current="step"] .st-eyebrow__num {
  background: var(--ink);
  box-shadow: none;
  color: var(--on-ink);
}

/* The stage: a framed panel that stays in view beside the steps. It sticks below the sticky header (69 px: 12 px padding above and below a 44 px home link, and the 1 px rule), so its tab strip never slides under it. */
.st-l-stage {
  margin-bottom: 0;
  container-type: inline-size;
}

/* A sticky box taller than the viewport can never be scrolled into full view while it sticks, so it sticks only where there is room. It sticks 93 px from the top (the 69 px header and a 24 px gap). The tallest view is 914 px at 1280 px wide and 980 px at 980 px wide, so at 1120 px of viewport height the narrowest window keeps 47 px below the stage. The browser test "fits the stuck stage" measures every view at 980x1120, 1280x1120 (each with and without a 15 px classic scrollbar) and 1920x1440, and fails if one has less than 24 px to spare; change these numbers only with that test. A shorter window gets the stage in the flow, where all of it scrolls past. */
@media (min-width: 980px) and (min-height: 1120px) {
  .st-l-stage {
    position: sticky;
    top: calc(69px + var(--space-5));
  }
}

.st-l-stage .st-panel__body {
  display: grid;
  gap: var(--space-6);
}

.st-l-stage .st-tabs {
  flex: 1 1 auto;
  min-width: 0;
  /* The strip scrolls sideways inside its own box, which is as tall as the tabs, so it would cut the focus ring (2 px offset, 2 px line). The padding is the ring's reach and the margin gives it back to the layout. */
  padding: var(--space-1);
  margin: calc(-1 * var(--space-1));
  border-bottom: 0;
  background: transparent;
}

.st-l-walk .st-tab {
  position: relative;
}

/* An unselected tab keeps its name for assistive technology and hides it by clip, never by display none. */
.st-l-walk .st-tab:not([aria-selected="true"]) .st-tab__name {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* Once the tab carries the view title, the title stays for assistive technology only. */
.st-l-walk.is-enhanced .st-view__title {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

@container (max-width: 640px) {
  .st-l-stage .st-panel__body {
    padding: var(--space-4);
  }

  .st-row {
    grid-template-columns: 28px minmax(0, 1fr) auto;
  }

  .st-row__detail {
    grid-column: 2 / -1;
  }

  .st-row > .st-tag {
    grid-column: 3;
    grid-row: 1;
  }

  .st-row__time {
    display: none;
  }

  .st-rail__step {
    justify-content: center;
  }

  .st-rail__label {
    display: none;
  }
}

/* ---------- 4 The report, in pieces ---------- */

.st-l-bento {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: var(--space-4);
}

.st-l-card {
  display: grid;
  align-content: start;
  gap: var(--space-4);
  min-width: 0;
  padding: var(--space-5);
  overflow: hidden;
  border: 1px solid var(--rule);
  border-radius: var(--radius-md);
  background: var(--paper-raised);
}

.st-l-card--4 {
  grid-column: span 4;
}

.st-l-card--3 {
  grid-column: span 3;
}

.st-l-card--2 {
  grid-column: span 2;
}

.st-l-card__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-2) var(--space-3);
}

.st-l-card__title {
  margin: 0;
  font: 400 24px / 30px var(--font-display);
}

.st-l-card__text {
  margin: 0;
  color: var(--ink-2);
  font: 400 16px / 26px var(--font-sans);
}

/* The results grid inside a card: a verdict label may wrap at its spaces, so five stores and a score fit the card from 360 px up. The glyph stays on the first line of its cell, and a one-line cell stays centred. */
.st-l-card .st-cell {
  grid-template-columns: auto auto;
  justify-content: start;
  align-content: center;
  align-items: start;
}

.st-l-card .st-cell__label {
  min-width: min-content;
  white-space: normal;
}

/* A column head is a whole word: the score head "PASSED" never breaks inside it. */
.st-l-card .st-grid th {
  overflow-wrap: normal;
}

.st-l-bento__more {
  display: flex;
  justify-content: flex-start;
  margin-top: var(--space-6);
}

/* ---------- 5 Fair by design ---------- */

.st-l-fair {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-6) var(--space-7);
  margin: 0;
  padding: 0;
  list-style: none;
}

.st-l-fair > li {
  display: grid;
  align-content: start;
  gap: var(--space-2);
  padding-top: var(--space-4);
  border-top: 2px solid var(--ink);
}

.st-l-fair h3 {
  margin: 0;
  font: 600 16px / 26px var(--font-sans);
}

.st-l-fair p {
  margin: 0;
  color: var(--ink-2);
  font: 400 16px / 26px var(--font-sans);
}

/* ---------- 6 Pilot: the offer and the form ---------- */

.st-l-pilot {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr);
  align-items: start;
  gap: var(--space-8);
}

.st-l-pilot__copy {
  display: grid;
  align-content: start;
  gap: var(--space-5);
}

.st-l-facts {
  display: grid;
  gap: var(--space-4);
  margin: 0;
}

.st-l-facts div {
  display: grid;
  grid-template-columns: 160px minmax(0, 1fr);
  gap: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid var(--rule);
}

.st-l-facts dt {
  color: var(--ink-3);
  font: 500 12px / 16px var(--font-mono);
  letter-spacing: 0.1em;
}

.st-l-facts dd {
  margin: 0;
  font: 400 16px / 26px var(--font-sans);
}

.st-l-who {
  margin: 0;
  color: var(--ink-2);
  font: 400 14px / 22px var(--font-sans);
}

.st-l-offer {
  display: grid;
  gap: var(--space-5);
  padding: var(--space-6);
}

/* The form in the panel keeps the side padding of the offer above it, so the ticks and the form share one left edge at every width. */
.st-l-pilot .st-panel__body {
  padding-inline: var(--space-6);
}

.st-l-ticks {
  display: grid;
  gap: var(--space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.st-l-ticks li {
  display: grid;
  grid-template-columns: 16px minmax(0, 1fr);
  gap: var(--space-3);
  font: 400 16px / 26px var(--font-sans);
}

.st-l-ticks li::before {
  content: "";
  width: 8px;
  height: 8px;
  margin-top: 9px;
  background: var(--ink);
}

.st-l-form {
  position: relative;
  display: grid;
  gap: var(--space-2);
}

.st-l-form__label {
  color: var(--ink-3);
  font: 500 12px / 16px var(--font-mono);
  letter-spacing: 0.1em;
}

.st-l-form__row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

/* The input scrolls sideways inside itself when the address is longer than the box. */
.st-l-form__input,
.st-l-form__row input {
  flex: 1 1 220px;
  min-width: 0;
  height: 44px;
  min-height: 44px;
  padding: 0 var(--space-4);
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius-md);
  background: var(--paper-raised);
  color: var(--ink);
  font: 400 16px / 26px var(--font-sans);
}

.st-l-form__input::placeholder,
.st-l-form__row input::placeholder {
  color: var(--ink-3);
}

.st-l-form__row .st-btn {
  flex: none;
}

.st-l-form__note {
  margin: 0;
  color: var(--ink-3);
  font: 400 12px / 18px var(--font-mono);
}

.st-l-form__privacy,
.st-l-form__alt {
  margin: 0;
  color: var(--ink-2);
  font: 400 14px / 22px var(--font-sans);
}

/* ---------- 7 FAQ: native details, a cross drawn by a pseudo-element, no transition ---------- */

.st-l-faq {
  display: grid;
  max-width: 860px;
  border-top: 1px solid var(--rule);
}

.st-l-faq details {
  border-bottom: 1px solid var(--rule);
}

.st-l-faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  min-height: 44px;
  padding: var(--space-4) 0;
  cursor: pointer;
  font: 400 24px / 30px var(--font-display);
  list-style: none;
}

.st-l-faq summary::-webkit-details-marker {
  display: none;
}

.st-l-faq summary::after {
  content: "";
  flex: none;
  width: 16px;
  height: 16px;
  background:
    linear-gradient(var(--ink-3), var(--ink-3)) center / 100% 2px no-repeat,
    linear-gradient(var(--ink-3), var(--ink-3)) center / 2px 100% no-repeat;
}

.st-l-faq details[open] summary::after {
  transform: rotate(45deg);
}

.st-l-faq p {
  max-width: 44em;
  margin: 0 0 var(--space-5);
  color: var(--ink-2);
  font: 400 16px / 26px var(--font-sans);
}

/* ---------- 8 Closing band and 9 footer ---------- */

.st-l-band {
  background: var(--ink);
  color: var(--on-ink);
}

.st-l-band__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
  max-width: 1200px;
  margin: 0 auto;
  padding-block: var(--space-9);
  padding-inline: clamp(16px, 4vw, 48px);
}

.st-l-band h2 {
  max-width: 16em;
  margin: 0;
  font: 400 44px / 50px var(--font-display);
  letter-spacing: -0.015em;
  text-wrap: balance;
}

/* The band text is full strength: no opacity anywhere. */
.st-l-band p {
  max-width: 34em;
  margin: var(--space-3) 0 0;
  color: var(--on-ink);
  font: 400 16px / 26px var(--font-sans);
}

/* The page ring is heather-ink, which is below 3:1 on the ink ground, so the band draws its own. */
.st-l-band :focus-visible {
  outline-color: var(--on-ink);
}

.st-l-btn-light {
  background: var(--paper);
  border-color: var(--paper);
  color: var(--ink);
}

.st-l-btn-light:hover {
  background: var(--paper-sunk);
}

.st-l-foot {
  display: grid;
  gap: var(--space-5);
  padding-block: var(--space-6);
  color: var(--ink-3);
  font: 400 12px / 18px var(--font-mono);
}

.st-l-foot__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3) var(--space-5);
}

.st-l-foot__links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-5);
  margin: 0;
  padding: 0;
  list-style: none;
}

.st-l-foot__links a {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  color: var(--ink-2);
  font: 400 14px / 22px var(--font-mono);
}

/* The operator block: legal name, number, address and contact. A long address wraps. */
.st-l-foot__operator {
  display: grid;
  gap: var(--space-1);
  margin: 0;
  color: var(--ink-2);
  font: 400 14px / 22px var(--font-sans);
  font-style: normal;
  overflow-wrap: anywhere;
}

.st-l-foot__legal {
  margin: 0;
}

/* ---------- Sample report: the sticky strip and the stack under it ---------- */

.st-l-samplebar {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 32px;
  padding-inline: var(--space-4);
  border-bottom: 1px solid var(--rule);
  background: var(--paper-raised);
  color: var(--ink);
  font: 500 12px / 16px var(--font-mono);
  letter-spacing: 0.1em;
  white-space: nowrap;
}

.st-l-sample .st-secnav {
  top: 32px;
}

/* The skip link and the strip share one layer (z-index 20) and the strip comes later in the page, so the strip paints over the link when it takes focus. The link now appears just under the 32 px strip. */
.st-l-sample .st-skip:focus {
  top: calc(32px + var(--space-2));
}

.st-l-sample .st-block {
  scroll-margin-top: 96px;
}

/* The closing section of the sample sits on the column of the report: the 1120 px column of .st-page--report with its shared gutter (16 px, 32 px from 760 px), where the section keeps the wider landing gutter otherwise. Its top rule still spans the page. */
.st-l-sample .st-l-sec {
  padding-inline: calc(var(--space-4) + max(0px, (100% - 1120px) / 2));
}

@media (min-width: 760px) {
  .st-l-sample .st-l-sec {
    padding-inline: calc(var(--space-6) + max(0px, (100% - 1120px) / 2));
  }
}

/* The drawn screenshots of the sample findings: the mock page sits in the shipped framed figure, which already has the frame and the radius, so the mock draws no second border. */
.st-shot .st-l-mock {
  border: 0;
  border-radius: 0;
}

/* The sample keeps its marking on paper: the strip prints once, at the top, instead of sticking to every page, and the banner that the shipped print rules hide with the other screen-only notes is shown again. Everything else the shipped print rules hide (controls, section nav, hint) stays hidden. */
@media print {
  .st-l-samplebar {
    position: static;
  }

  .st-l-sample .st-banner {
    display: block;
  }
}

/* ---------- Below 980 px ---------- */

@media (max-width: 979px) {
  .st-l-nav__links {
    display: none;
  }

  .st-l-hero {
    gap: var(--space-7);
    padding-block: var(--space-7) var(--space-8);
  }

  .st-l-hero,
  .st-l-walk,
  .st-l-pilot {
    grid-template-columns: minmax(0, 1fr);
  }

  .st-l-bento > .st-l-card {
    grid-column: 1 / -1;
  }

  .st-l-fair {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ---------- Below 640 px ---------- */

@media (max-width: 639px) {
  /* The header call to action and the wordmark share one line at 360 px: the arrow goes and the padding closes up. */
  .st-l-nav {
    gap: var(--space-3);
  }

  .st-l-nav .st-btn {
    padding-inline: var(--space-3);
  }

  .st-l-nav .st-btn .st-icon {
    display: none;
  }

  .st-l-sec {
    padding-block: var(--space-8);
  }

  .st-l-blind,
  .st-l-fair {
    grid-template-columns: minmax(0, 1fr);
  }

  .st-l-hero .st-display-xl {
    font: 400 44px / 50px var(--font-display);
  }

  .st-l-band h2 {
    font: 400 30px / 38px var(--font-display);
  }

  .st-l-step__title {
    font: 400 24px / 30px var(--font-display);
  }

  .st-l-facts div {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-1);
  }

  .st-l-offer {
    padding: var(--space-5);
  }

  .st-l-pilot .st-panel__body {
    padding-inline: var(--space-5);
  }

  .st-attribution {
    grid-template-columns: minmax(0, 1fr);
  }

  .st-attribution__party {
    border-left: 0;
    border-top: 1px solid var(--rule);
  }

  .st-attribution__party:first-child {
    border-top: 0;
  }
}

/* ---------- Motion: after an action only, never on load, never looping ---------- */

@media (prefers-reduced-motion: no-preference) {
  @keyframes st-l-fade {
    from {
      opacity: 0;
      transform: translateY(4px);
    }

    to {
      opacity: 1;
      transform: none;
    }
  }

  .st-l-walk.has-switched .st-view:not([hidden]) {
    animation: st-l-fade 0.3s ease both;
  }

  .st-l-walk.has-switched .st-l-step[aria-current="step"] .st-l-step__text {
    animation: st-l-fade 0.3s ease both;
  }

  .st-rail__progress {
    transition: width 0.5s cubic-bezier(0.2, 0.7, 0.2, 1);
  }

  .st-btn--primary .st-icon,
  .st-btn--outline .st-icon,
  .st-l-btn-light .st-icon {
    transition: transform 0.2s ease;
  }

  .st-btn--primary:hover .st-icon,
  .st-btn--outline:hover .st-icon,
  .st-l-btn-light:hover .st-icon {
    transform: translateX(3px);
  }
}

/* ---------- Forced colours: marks that do not depend on a colour or a shadow ---------- */

/* Windows High Contrast replaces backgrounds and drops box-shadow, so the tint and the shadow marks above vanish. The party at fault gets a 2 px frame inside its cell, and the 8 px markers are drawn with a border (hollow) or a system-colour fill (filled). System colour keywords are kept in this mode. */
@media (forced-colors: active) {
  .st-attribution__party[aria-current="true"] {
    outline: 2px solid CanvasText;
    outline-offset: -2px;
  }

  .st-attribution__party b::before,
  .st-rail__step::before {
    box-sizing: border-box;
    border: 1.5px solid CanvasText;
  }

  .st-attribution__party[aria-current="true"] b::before,
  .st-attribution__party[aria-current="true"][data-family="agent"] b::before,
  .st-rail__step[data-state="done"]::before,
  .st-rail__step[data-state="current"]::before {
    background: CanvasText;
  }

  .st-l-ticks li::before {
    background: CanvasText;
  }
}