/* =============================================================================
   Get Website Audit — landing page
   -----------------------------------------------------------------------------
   Composition only. Everything with a name — buttons, chips, the audit field,
   every report component in the preview — lives in style.css and report.css,
   because those components are the product and the landing page's job is to
   show the product rather than to imitate it.

   Two rules this file holds to:

   1. The finished state is the default. Every animated thing here is written
      so that with no JavaScript, no IntersectionObserver, or reduced motion
      set, the visitor sees the completed result immediately. Motion is added
      by a class; it is never what makes content appear.

   2. Colour means something. The six category hues identify a category, the
      status ramp rates it, and the accent is the audit action. A colour is
      never chosen here because a section needed livening up.
   ========================================================================== */

/* -----------------------------------------------------------------------------
 | A. Hero
 | ---------------------------------------------------------------------------*/
.hero {
  padding: var(--s-10) 0 var(--s-9);
  position: relative;
  overflow: hidden;
}
/* A hairline grid, barely there, fading out before it reaches the content. It
   reads as engineering paper rather than as decoration, and it is one gradient
   on one element instead of an image request. */
.hero::before {
  content: "";
  position: absolute; inset: 0;
  background-image:
    linear-gradient(to right, var(--rule) 1px, transparent 1px),
    linear-gradient(to bottom, var(--rule) 1px, transparent 1px);
  background-size: 72px 72px;
  -webkit-mask-image: radial-gradient(120% 80% at 82% 12%, #000 0%, transparent 62%);
          mask-image: radial-gradient(120% 80% at 82% 12%, #000 0%, transparent 62%);
  opacity: .5;
  pointer-events: none;
}
.hero > .container { position: relative; }

.hero-grid { display: grid; grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr); gap: var(--s-10); align-items: center; }
.hero h1 { font-size: var(--fs-hero); letter-spacing: -.035em; margin-bottom: var(--s-5); }
/* The phrase the headline turns on.
   A real underline rather than a background bar: the bar sat on the bottom of
   the line box, which on a three-line headline put a thick slab through the
   descenders of "holding your" and read as redaction. text-decoration follows
   the text, skips the descenders on its own, and breaks across lines without
   needing box-decoration-break. */
.hero h1 .u {
  text-decoration: underline;
  text-decoration-color: var(--accent);
  text-decoration-thickness: .055em;
  text-underline-offset: .13em;
  text-decoration-skip-ink: auto;
}
.hero .lede { font-size: clamp(16px, 1.6vw, 19px); max-width: 46ch; margin-bottom: var(--s-7); }
.hero .facts { margin-top: var(--s-5); }
.hero-form-note { margin: var(--s-3) 0 0; font-size: var(--fs-xs); color: var(--slate-2); }

/* -----------------------------------------------------------------------------
 | The six, beside the field
 |
 | At rest they are a quiet list of what every audit covers. Focus the address
 | field and they take their category colours in a short ripple — the answer to
 | "what will it actually look at?" arriving at the moment someone is deciding
 | whether to type.
 |
 | The tint is delivered with :has(). Where that is unsupported the chips simply
 | stay in their resting state, which is a complete and readable list either
 | way: nothing here is only available to browsers that can animate it.
 | ---------------------------------------------------------------------------*/
.hero-cats { list-style: none; margin: var(--s-4) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.hero-cat {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 11px 4px 5px;
  font-size: var(--fs-xs); color: var(--slate-2);
  background: var(--paper); border: 1px solid var(--rule); border-radius: var(--r-pill);
  transition: color var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease), background var(--dur-2) var(--ease);
}
.hero-cat-ic {
  display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%;
  background: var(--paper-2); color: var(--slate-3);
  transition: background var(--dur-2) var(--ease), color var(--dur-2) var(--ease);
}
.hero-cat-ic svg { width: 12px; height: 12px; display: block; }

.hero-grid > div:has(.audit-form:focus-within) .hero-cat {
  color: var(--cat-ink); border-color: var(--cat-line); background: var(--cat-wash);
}
.hero-grid > div:has(.audit-form:focus-within) .hero-cat-ic { background: var(--cat-fill); color: #fff; }

/* The ripple: 45ms apart, so it reads as one gesture rather than six. */
.hero-grid > div:has(.audit-form:focus-within) .hero-cat:nth-child(1),
.hero-grid > div:has(.audit-form:focus-within) .hero-cat:nth-child(1) .hero-cat-ic { transition-delay: 0ms; }
.hero-grid > div:has(.audit-form:focus-within) .hero-cat:nth-child(2),
.hero-grid > div:has(.audit-form:focus-within) .hero-cat:nth-child(2) .hero-cat-ic { transition-delay: 45ms; }
.hero-grid > div:has(.audit-form:focus-within) .hero-cat:nth-child(3),
.hero-grid > div:has(.audit-form:focus-within) .hero-cat:nth-child(3) .hero-cat-ic { transition-delay: 90ms; }
.hero-grid > div:has(.audit-form:focus-within) .hero-cat:nth-child(4),
.hero-grid > div:has(.audit-form:focus-within) .hero-cat:nth-child(4) .hero-cat-ic { transition-delay: 135ms; }
.hero-grid > div:has(.audit-form:focus-within) .hero-cat:nth-child(5),
.hero-grid > div:has(.audit-form:focus-within) .hero-cat:nth-child(5) .hero-cat-ic { transition-delay: 180ms; }
.hero-grid > div:has(.audit-form:focus-within) .hero-cat:nth-child(6),
.hero-grid > div:has(.audit-form:focus-within) .hero-cat:nth-child(6) .hero-cat-ic { transition-delay: 225ms; }

/* A staggered tint is still a tint; with motion off it simply arrives at once. */
@media (prefers-reduced-motion: reduce) {
  .hero-cat, .hero-cat-ic { transition-delay: 0ms !important; }
}

/* -----------------------------------------------------------------------------
 | B. The hero audit demonstration
 |
 | A worked example of a finished audit, not a picture of a dashboard. The six
 | rows are the real pillars, their scores are weighted into the total exactly
 | as the product weights them, and every word on it is generated by the same
 | PHP that words a real report.
 |
 | It is labelled as an example twice — once at the top and once underneath —
 | because an animated checklist on a landing page is the single easiest thing
 | on this site to mistake for a live scan of your own website.
 | ---------------------------------------------------------------------------*/
.audit-demo {
  margin: 0;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.demo-top {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 11px var(--s-5);
  background: var(--paper-2);
  border-bottom: 1px solid var(--rule);
  font-size: var(--fs-xs); color: var(--slate-2);
}
.demo-top .pb-tag {
  font-family: var(--font-display); font-size: var(--fs-micro); font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  background: var(--ink); color: #fff;
  padding: 3px 8px; border-radius: var(--r-sm);
}

/* The progress rail. It fills once, over the length of the sequence, and it is
   deliberately not labelled with a percentage: the number would be a decoration
   pretending to be a measurement, which is the thing this product exists to
   argue against. */
.demo-rail { height: 2px; background: var(--paper-3); overflow: hidden; }
.demo-rail-fill { display: block; height: 100%; width: 100%; background: var(--accent); transform-origin: left center; }
.audit-demo.is-running .demo-rail-fill { animation: demo-rail 2.15s var(--ease) both; }
@keyframes demo-rail { from { transform: scaleX(0); } to { transform: scaleX(1); } }

.demo-body { padding: var(--s-5); }
.demo-addr {
  display: flex; align-items: center; gap: 8px;
  margin: 0 0 var(--s-4);
  font-family: var(--font-display); font-weight: 600;
  font-size: var(--fs-md); color: var(--ink);
  border: 1px solid var(--rule); border-radius: var(--r);
  background: var(--paper-2);
  padding: 9px 12px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.demo-scheme { color: var(--slate-3); font-weight: 500; }

.demo-list { list-style: none; margin: 0; padding: 0; }
.demo-row {
  display: grid; grid-template-columns: 26px 1fr auto;
  align-items: center; gap: var(--s-3);
  padding: 9px 0;
  border-bottom: 1px solid var(--rule);
}
.demo-row:last-child { border-bottom: 0; }
.demo-ic {
  display: grid; place-items: center;
  width: 26px; height: 26px; border-radius: var(--r-sm);
  background: var(--cat-wash); color: var(--cat-ink);
}
.demo-ic svg { width: 15px; height: 15px; display: block; }
.demo-name { font-size: var(--fs-sm); font-weight: 550; color: var(--ink); min-width: 0; }
/* The dot and the result share one grid cell and cross-fade, so nothing is
   shown or hidden with `display` — the row's width never changes, and there is
   no reflow as six results land one after another. */
.demo-val {
  display: grid;
  font-family: var(--font-display); font-weight: 700; font-size: var(--fs-md);
  font-variant-numeric: tabular-nums;
}
.demo-val > * { grid-area: 1 / 1; align-self: center; justify-self: end; }

/* Invisible unless the sequence is armed, so a visitor whose browser never runs
   it — or who has asked for no motion — simply sees the finished result. */
.dv-wait { opacity: 0; width: 9px; height: 9px; border-radius: 50%; background: var(--rule-2); }
.audit-demo.is-running .dv-wait {
  /* Two animations, deliberately on different properties: one pulses the
     colour for as long as the row is waiting, the other fades the dot out when
     its result arrives. Animating opacity in both would let the later
     declaration win and the dot would never disappear. */
  animation: demo-pulse-bg 1s ease-in-out infinite, demo-wait-out .18s linear both;
  animation-delay: 0s, calc(220ms + var(--i) * 250ms);
}
@keyframes demo-pulse-bg { 0%, 100% { background: var(--rule-2); } 50% { background: var(--cat-fill); } }
@keyframes demo-wait-out { from { opacity: 1; } to { opacity: 0; } }

.audit-demo.is-running .dv-done { animation: demo-in .34s var(--ease) both; animation-delay: calc(220ms + var(--i) * 250ms); }
@keyframes demo-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

/* The row itself lights up as its result lands: a wash behind it and its own
   hue on the left edge, held for a moment and then released. */
.audit-demo.is-running .demo-row { animation: demo-land .9s var(--ease) both; animation-delay: calc(220ms + var(--i) * 250ms); }
@keyframes demo-land {
  0%   { background: var(--cat-wash); box-shadow: inset 2px 0 0 var(--cat-fill); }
  70%  { background: var(--cat-wash); box-shadow: inset 2px 0 0 var(--cat-fill); }
  100% { background: transparent;     box-shadow: inset 2px 0 0 transparent; }
}

.demo-foot {
  display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s-4);
  margin-top: var(--s-4); padding-top: var(--s-4);
  border-top: 2px solid var(--ink);
}
.demo-score { display: flex; align-items: baseline; gap: 8px; }
.demo-num { font-family: var(--font-display); font-weight: 700; font-size: 44px; line-height: 1; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.demo-outof { font-size: var(--fs-xs); color: var(--slate-2); }
.demo-grade { display: block; font-family: var(--font-display); font-weight: 700; font-size: var(--fs-md); text-align: right; }
.demo-of { display: block; font-size: var(--fs-xs); color: var(--slate-2); text-align: right; }
.audit-demo.is-running .demo-foot { animation: demo-in .4s var(--ease) both; animation-delay: 1.85s; }

.demo-cap {
  padding: 11px var(--s-5);
  border-top: 1px solid var(--rule);
  background: var(--paper-2);
  font-size: var(--fs-xs); line-height: 1.55; color: var(--slate-2);
}

/* -----------------------------------------------------------------------------
 | C. The six categories
 |
 | One interactive system, not six marketing boxes. Every card carries its
 | category's hue, the weight it actually contributes to the score (from
 | pillar_meta(), drawn as a bar), and the scanner's own check labels.
 |
 | Nothing is hidden behind the interaction. The full list of checks is the most
 | credible thing on this page and a competitor cannot copy it without doing the
 | work, so it stays on screen; hover and focus raise and tint the card rather
 | than revealing facts that were being withheld.
 | ---------------------------------------------------------------------------*/
.cat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-4); }
.cat-card {
  position: relative;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
  padding: var(--s-6);
  transition: border-color var(--dur-1) var(--ease), box-shadow var(--dur-2) var(--ease), transform var(--dur-2) var(--ease);
}
/* The hue arrives as a top edge that grows from nothing on hover, so the grid
   at rest is still a calm document and the colour is a response. */
.cat-card::before {
  content: "";
  position: absolute; left: -1px; right: -1px; top: -1px; height: 3px;
  background: var(--cat-fill);
  border-radius: var(--r-lg) var(--r-lg) 0 0;
  transform: scaleX(0); transform-origin: left center;
  transition: transform var(--dur-2) var(--ease);
}
.cat-card:hover, .cat-card:focus-within {
  border-color: var(--cat-line);
  box-shadow: 0 14px 32px -22px rgba(12, 27, 42, .5);
  transform: translateY(-2px);
}
.cat-card:hover::before, .cat-card:focus-within::before { transform: scaleX(1); }

.cat-head { display: flex; align-items: center; gap: 10px; margin-bottom: var(--s-3); }
.cat-ic {
  display: grid; place-items: center; flex: 0 0 auto;
  width: 34px; height: 34px; border-radius: var(--r);
  background: var(--cat-wash); color: var(--cat-ink);
  transition: background var(--dur-2) var(--ease), color var(--dur-2) var(--ease);
}
.cat-ic svg { width: 18px; height: 18px; display: block; }
.cat-card:hover .cat-ic, .cat-card:focus-within .cat-ic { background: var(--cat-fill); color: #fff; }
.cat-name { margin: 0; font-size: var(--fs-md); }
.cat-q { margin: 0 0 var(--s-2); font-size: var(--fs-sm); color: var(--slate-2); line-height: 1.55; }
/* What we actually do about the question above, for a reader who does not know
   what "Preferred address" or "Browser protections" mean. */
.cat-blurb {
  margin: 0 0 var(--s-4); font-size: var(--fs-xs); line-height: 1.6;
  color: var(--slate); padding-left: 10px;
  border-left: 2px solid var(--cat-line);
}

/* The weight bar. This is real data — the points each pillar contributes to the
   overall score — so the grid doubles as an explanation of how the score is
   built rather than as six equally-sized claims. */
.cat-weight { display: flex; align-items: center; gap: 10px; margin-bottom: var(--s-4); }
.cat-weight-track { flex: 1; height: 5px; border-radius: 3px; background: var(--paper-3); overflow: hidden; }
.cat-weight-fill {
  display: block; height: 100%; border-radius: 3px;
  background: var(--cat-fill);
  width: var(--w);
  transform-origin: left center;
  transition: transform var(--dur-2) var(--ease);
}
.reveal-armed .cat-card .cat-weight-fill { transform: scaleX(0); }
.reveal-armed .cat-card.is-in .cat-weight-fill { transform: scaleX(1); transition: transform .55s var(--ease) .12s; }
.cat-weight-n { font-family: var(--font-display); font-size: var(--fs-xs); font-weight: 700; color: var(--cat-ink); font-variant-numeric: tabular-nums; white-space: nowrap; }

.cat-checks { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 5px; }
.cat-checks li {
  font-size: var(--fs-xs); color: var(--slate);
  background: var(--paper-2); border: 1px solid var(--rule);
  border-radius: var(--r-sm); padding: 3px 8px;
  transition: background var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease), color var(--dur-1) var(--ease);
}
.cat-card:hover .cat-checks li, .cat-card:focus-within .cat-checks li {
  background: var(--cat-wash); border-color: var(--cat-line); color: var(--cat-ink);
}
.cat-only {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: var(--s-4);
  font-size: var(--fs-xs); font-weight: 600; color: var(--cat-ink);
}
.cat-only::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--cat-fill); }

/* -----------------------------------------------------------------------------
 | D. How it works — a rail that fills as the steps arrive
 | ---------------------------------------------------------------------------*/
.flow { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-7); }
/* The connecting rail sits behind the markers, at their centre line, and stops
   at the last one. Run to the container edge and it trails off past step three
   into nothing, which reads as a fourth step that failed to load. Three equal
   columns with two gaps put the last marker's centre one column-width in from
   the right. */
.flow::before {
  content: "";
  position: absolute;
  left: 9px; right: calc((100% - 2 * var(--s-7)) / 3 - 9px);
  top: 13px; height: 2px;
  background: var(--rule);
}
.flow-step { position: relative; padding-top: var(--s-8); }
.flow-dot {
  position: absolute; top: 5px; left: 0;
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--paper); border: 2px solid var(--rule-2);
  transition: border-color var(--dur-2) var(--ease), background var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease);
}
.flow-step.is-in .flow-dot {
  border-color: var(--accent); background: var(--accent);
  box-shadow: 0 0 0 4px var(--accent-wash);
}
.flow-n {
  font-family: var(--font-display); font-weight: 700; font-size: var(--fs-xs);
  letter-spacing: .1em; color: var(--slate-2);
  transition: color var(--dur-2) var(--ease);
}
.flow-step.is-in .flow-n { color: var(--accent-ink); }
.flow-step h3 { font-size: var(--fs-md); margin: 6px 0 8px; }
.flow-step p { margin: 0; font-size: var(--fs-sm); color: var(--slate); line-height: 1.65; }

/* -----------------------------------------------------------------------------
 | E. The guided report preview
 |
 | The report itself, built from the report's own components, with a rail beside
 | it naming the order the document is written in. The rail marks whichever part
 | is on screen — so scrolling the section is reading the report's structure.
 | ---------------------------------------------------------------------------*/
.guide { display: grid; grid-template-columns: 210px minmax(0, 1fr); gap: var(--s-8); align-items: start; }
/* Both tracks must be allowed to be narrower than their content. A grid item
   defaults to min-width:auto, which is min-content — and on a phone the rail
   becomes a flex row of seven nowrap chips, so without this the rail's
   min-content width (~930px) becomes the whole page's minimum width and every
   section overflows sideways. The overflow-x:auto below cannot save it,
   because the scroll container is the child, not the track. */
.guide > * { min-width: 0; }
.guide-rail { position: sticky; top: 104px; min-width: 0; }
.guide-rail ol { list-style: none; margin: 0; padding: 0; }
.guide-rail li { position: relative; padding: 0 0 0 22px; }
.guide-rail a {
  display: block; padding: 7px 0;
  font-size: var(--fs-sm); color: var(--slate-2);
  border-left: 2px solid var(--rule);
  margin-left: -22px; padding-left: 22px;
  transition: color var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease);
}
.guide-rail a:hover { color: var(--ink); }
.guide-rail li.is-on a { color: var(--ink); font-weight: 600; border-left-color: var(--accent); }
.guide-rail .gr-k {
  font-family: var(--font-display); font-size: var(--fs-micro); font-weight: 700;
  color: var(--slate-3); margin-right: 8px; font-variant-numeric: tabular-nums;
}
.guide-rail li.is-on .gr-k { color: var(--accent-ink); }

/* The part you just asked for, marked. Outline rather than a background so it
   works over every ground the report uses, and short enough to read as an
   answer to the click rather than as a selection you now have to dismiss. */
[data-guide-step] { border-radius: var(--r); transition: box-shadow .3s var(--ease); }
[data-guide-step].is-target { box-shadow: 0 0 0 2px var(--accent), 0 0 0 7px var(--accent-wash); }
@media (prefers-reduced-motion: reduce) { [data-guide-step] { transition: none; } }

/* The category results inside the preview. Same six hues, laid out as a row of
   compact readings rather than repeating the big cards from section C. */
.mini-cats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--rule); border: 1px solid var(--rule); border-radius: var(--r); overflow: hidden; }
.mini-cat { background: var(--paper); padding: var(--s-4); display: flex; align-items: center; gap: 10px; }
.mini-ic { display: grid; place-items: center; width: 26px; height: 26px; border-radius: var(--r-sm); background: var(--cat-wash); color: var(--cat-ink); flex: 0 0 auto; }
.mini-ic svg { width: 14px; height: 14px; display: block; }
.mini-body { min-width: 0; }
.mini-name { display: block; font-size: var(--fs-xs); color: var(--slate-2); line-height: 1.3; }
.mini-num { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-lg); font-variant-numeric: tabular-nums; line-height: 1.2; }
.mini-word { font-size: var(--fs-micro); font-weight: 700; margin-left: 5px; }

/* -----------------------------------------------------------------------------
 | F. Why this one — on the ink band
 | ---------------------------------------------------------------------------*/
.diff-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: rgba(255,255,255,.12); border-radius: var(--r-lg); overflow: hidden; }
.diff-cell { background: var(--ink); padding: var(--s-7) var(--s-6); transition: background var(--dur-2) var(--ease); }
.diff-cell:hover { background: var(--ink-2); }
.diff-cell h3 { font-size: var(--fs-md); margin: 0 0 8px; color: #fff; }
.diff-cell p { margin: 0; font-size: var(--fs-sm); line-height: 1.7; color: #A9BCCE; }
.diff-cell .dc-k {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--font-display); font-size: var(--fs-micro); font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; color: var(--accent);
  margin-bottom: 10px;
}
.diff-cell .dc-k::before { content: ""; width: 16px; height: 2px; background: var(--accent); border-radius: 2px; }

/* -----------------------------------------------------------------------------
 | G. Who it's for
 | ---------------------------------------------------------------------------*/
.who-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-5); }
.who-card {
  border: 1px solid var(--rule); border-radius: var(--r-lg);
  padding: var(--s-6); background: var(--paper);
  transition: border-color var(--dur-1) var(--ease), box-shadow var(--dur-2) var(--ease), transform var(--dur-2) var(--ease);
}
.who-card:hover { border-color: var(--rule-2); box-shadow: 0 14px 32px -24px rgba(12, 27, 42, .5); transform: translateY(-2px); }
.who-card h3 { font-size: var(--fs-md); margin: 0 0 var(--s-3); display: flex; align-items: center; gap: 9px; }
.who-ic { display: grid; place-items: center; width: 28px; height: 28px; border-radius: var(--r-sm); background: var(--cat-wash); color: var(--cat-ink); flex: 0 0 auto; }
.who-ic svg { width: 15px; height: 15px; display: block; }
.who-card ul { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 7px; }
.who-card li { font-size: var(--fs-sm); color: var(--slate); line-height: 1.55; }

/* -----------------------------------------------------------------------------
 | H. Closing action
 | ---------------------------------------------------------------------------*/
.closer { text-align: center; }
.closer h2 { font-size: var(--fs-3xl); margin-bottom: var(--s-3); }
.closer p { max-width: 52ch; margin: 0 auto var(--s-7); color: #A9BCCE; }
.closer form { margin-inline: auto; }
.closer .facts { justify-content: center; margin-top: var(--s-5); }
.closer .facts li { color: #A9BCCE; }

/* -----------------------------------------------------------------------------
 | Responsive
 |
 | Not the desktop layout stacked. The demo drops its waiting column, the rail
 | in "how it works" turns from a horizontal line into a vertical spine, and the
 | guided rail becomes a scrolling row of chips above the report rather than a
 | sticky column that would eat half a phone screen.
 | ---------------------------------------------------------------------------*/
@media (max-width: 1040px) {
  .guide { grid-template-columns: 1fr; gap: var(--s-6); }
  .guide-rail { position: static; }
  .guide-rail ol { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 4px; -webkit-overflow-scrolling: touch; scrollbar-width: thin; }
  .guide-rail li { padding: 0; flex: 0 0 auto; }
  .guide-rail a {
    margin: 0; padding: 6px 12px; white-space: nowrap;
    border-left: 0; border: 1px solid var(--rule); border-radius: var(--r-pill);
    background: var(--paper);
  }
  .guide-rail li.is-on a { border-color: var(--accent); background: var(--accent-wash); color: var(--accent-ink); }
}

@media (max-width: 980px) {
  .hero-grid { grid-template-columns: 1fr; gap: var(--s-8); }
  .hero .lede { max-width: none; }
  .cat-grid, .who-grid { grid-template-columns: repeat(2, 1fr); }
  .mini-cats { grid-template-columns: repeat(2, 1fr); }

  /* The rail turns vertical: markers down the left, content to their right. */
  .flow { grid-template-columns: 1fr; gap: 0; }
  .flow::before { left: 8px; right: auto; top: 6px; bottom: 34px; width: 2px; height: auto; }
  .flow-step { padding: 0 0 var(--s-7) 38px; }
  .flow-step:last-child { padding-bottom: 0; }
  .flow-dot { top: 2px; }
}

@media (max-width: 700px) {
  .hero { padding: var(--s-8) 0 var(--s-8); }
  .hero::before { background-size: 56px 56px; }
  .cat-grid, .who-grid, .diff-grid { grid-template-columns: 1fr; }
  .mini-cats { grid-template-columns: 1fr; }
  .demo-body { padding: var(--s-4); }
  .demo-top, .demo-cap { padding-inline: var(--s-4); }
  .demo-num { font-size: 38px; }
  .demo-foot { align-items: center; }
}

@media (max-width: 380px) {
  /* At the narrowest widths the score and its grade stop competing for one
     line and stack, rather than shrinking until neither is readable. */
  .demo-foot { flex-direction: column; align-items: flex-start; gap: var(--s-2); }
  .demo-grade, .demo-of { text-align: left; }
}