/* RunwayLab, home screen. Uses the tokens and components in src/styles.css only.
   Order: hero (the words beside Plate I), how it works, score guide, proof, fairness band, privacy, saved walks,
   closing band, scroll reveal, then the 1000 / 760 / 520 px breakpoints. */

.rw-lede { font-size: var(--t-lede); line-height: 1.5; max-width: var(--measure-lede); }
.rw-needs { margin: 0; }
.rw-needs li { padding-top: 0; border-top: 0; }
.rw-proof__intro, .rw-score-guide__intro { display: block; }
.rw-points__head { color: var(--ink); padding-bottom: 0; border-bottom: 0; margin-top: 0; }
.rw-points__list { display: block; }
.rw-split { height: auto; margin-top: 0; }
.rw-split__key { justify-content: flex-start; margin-top: 0; color: var(--ink-2); }
.rw-fair { margin-top: 0; }
.rw-sources { border-top: 0; }
.rw-sources__body { margin-top: 0; }

/* Hero: the words on the paper, the runway in a plate beside them --------------------------------------------- */
.rw-hero {
  display: grid;
  grid-template-columns: minmax(0, 11fr) minmax(0, 10fr);
  gap: var(--s-7) clamp(32px, 5vw, 80px);
  align-items: center;
  padding-block: clamp(16px, 3vw, 40px) var(--s-6);
}
.rw-hero__copy { min-width: 0; }
.rw-hero__kicker {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  margin-bottom: var(--s-5);
  font-size: var(--t-label);
  font-weight: 600;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--accent);
}
.rw-hero__kicker::before { content: ''; width: 40px; height: 1px; background: var(--lamp); }
.rw-hero h1 {
  font-size: var(--t-display);
  font-weight: var(--w-display);
  line-height: 0.96;
  letter-spacing: var(--track-display);
  font-variation-settings: 'opsz' var(--opsz-display);
  color: var(--ink);
  /* room for the floor tape under the last line, which sits below the descenders */
  margin-bottom: calc(0.3em + var(--s-5));
}
.rw-hero__line { display: inline-block; animation: rw-hero-line var(--d-long) var(--ease-out) backwards; }
.rw-hero__line:nth-of-type(2) { animation-delay: 90ms; }
.rw-hero__line:nth-of-type(3) { animation-delay: 180ms; }
.rw-hero__accent { font-style: italic; font-weight: 400; color: var(--accent); position: relative; }
/* floor tape under the last line: a dashed gold rule that lays itself down once the words have landed */
/* It sits below the descenders of the j and g, so it never cuts through a letter, and is finer than the strokes. */
.rw-hero__accent::after { content: ''; position: absolute; left: 0.04em; right: 0.16em; bottom: -0.26em; height: max(2px, 0.022em); border-radius: 2px; background: repeating-linear-gradient(90deg, var(--lamp) 0 0.22em, transparent 0.22em 0.34em); animation: rw-stitch 900ms 700ms var(--ease-out) both; }
@keyframes rw-stitch { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0); } }
@keyframes rw-hero-line { from { opacity: 0; transform: translateY(0.18em); } }
@keyframes rw-spin { to { rotate: 360deg; } }

/* the stamp in the corner of Plate I */
.rw-stamp { position: absolute; z-index: 9; left: 18px; bottom: 18px; width: clamp(120px, 31%, 176px); height: auto; filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.45)); }
.rw-stamp__spin { transform-box: view-box; transform-origin: 100px 100px; animation: rw-spin 60s linear infinite; }
.rw-stamp text { font-family: var(--f-text); }
.rw-hero__lede { max-width: 36ch; font-size: var(--t-lede); line-height: 1.5; color: var(--ink-2); }
.rw-hero .rw-hero__actions { margin-top: var(--s-6); }

/* Plate I: the picture with its key beside it; the canvas draws leader lines to each readout */
.rw-hero__plate { display: grid; grid-template-columns: minmax(0, 1fr) 200px; margin: 0; overflow: hidden; }
/* the picture fills its whole cell, as tall as the key beside it, so the plate has no empty band under the floor */
.rw-hero__picture { position: relative; align-self: stretch; height: 100%; min-height: 440px; background: var(--stage); }
.rw-hero__canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.rw-hero__key { display: grid; gap: var(--s-4); align-content: center; padding: var(--s-7) var(--s-5) var(--s-5) var(--s-4); background: var(--stage); border-left: 1px solid var(--stage-hair); color: var(--stage-ink); }
.rw-hero__figtitle { font-size: var(--t-caption); line-height: 1.45; color: var(--stage-ink-2); }
.rw-hero__figtitle b { display: block; font-family: var(--f-display); font-style: italic; font-weight: 600; font-size: 1.125rem; color: var(--stage-ink); margin-bottom: 2px; }
.rw-hero__readouts { --leaders: 1; counter-reset: readout; display: grid; min-width: 0; }
.rw-hero__readout { counter-increment: readout; display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 0 var(--s-2); padding-block: var(--s-3); border-top: 1px solid var(--stage-hair); animation: rw-fade var(--d-long) var(--ease-out) backwards; }
.rw-hero__readout::before { content: counter(readout); grid-row: 1 / span 2; width: 16px; height: 16px; margin-top: 1px; border: 1px solid var(--stage-accent); border-radius: 50%; color: var(--stage-accent); font-size: 0.625rem; font-weight: 700; line-height: 14px; text-align: center; }
.rw-hero__readout:last-child { border-bottom: 1px solid var(--stage-hair); }
.rw-hero__readout:nth-child(2) { animation-delay: 60ms; }
.rw-hero__readout:nth-child(3) { animation-delay: 120ms; }
.rw-hero__readout:nth-child(4) { animation-delay: 180ms; }
.rw-hero__readout dt { font-size: var(--t-caption); font-weight: 500; letter-spacing: 0.01em; color: var(--stage-ink-2); }
.rw-hero__readout dd { font-family: var(--f-display); font-size: 1.375rem; font-weight: 600; font-variation-settings: 'opsz' 24; line-height: 1.15; color: var(--stage-ink); font-variant-numeric: tabular-nums lining-nums; }
.rw-hero__readout dd .rw-num { font-size: inherit; }
/* the unit follows its number, small, and drops to the next line only when the column is too narrow for both */
.rw-hero__readout dd .rw-num { display: inline-flex; flex-wrap: wrap; align-items: baseline; column-gap: 5px; }
.rw-hero__readout .rw-unit { font-size: var(--t-caption); color: var(--stage-ink-2); }
.rw-hero__readout--deg .rw-unit { font-size: inherit; color: var(--stage-ink); margin-left: -5px; }
.rw-hero__caption { font-family: var(--f-display); font-style: italic; font-size: 0.9375rem; line-height: 1.4; color: var(--stage-ink-2); }

/* The selvedge: four facts in one ruled strip, ink rules outside and a gold hairline inside each ------------- */
.rw-selvedge { position: relative; list-style: none; margin: var(--s-7) 0 0; padding: 5px 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-block: 1.5px solid var(--rule); }
.rw-selvedge::before, .rw-selvedge::after { content: ''; position: absolute; left: 0; right: 0; height: 1px; background: var(--lamp); }
.rw-selvedge::before { top: 3px; }
.rw-selvedge::after { bottom: 3px; }
.rw-selvedge li { padding: var(--s-5) var(--s-4); text-align: center; }
.rw-selvedge li + li { border-left: 2px dotted var(--hair-strong); }
.rw-selvedge b { display: block; font-family: var(--f-display); font-size: 1.375rem; font-weight: var(--w-title); font-variation-settings: 'opsz' 32; line-height: 1.2; color: var(--ink); font-variant-numeric: tabular-nums lining-nums; }
.rw-selvedge small { display: block; margin-top: 4px; font-size: var(--t-small); line-height: 1.45; color: var(--ink-2); }

/* Sections -------------------------------------------------------------------------------------------------- */
.rw-section { margin-top: var(--space-section); }

/* How it works: three steps as colour-blocked tiles, the numeral large at the top, footlights along the bottom */
.rw-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); }
.rw-step { --tile-bg: var(--band); --tile-ink: var(--ink); --tile-accent: var(--accent); --tile-dot: var(--lamp); --tile-pad: clamp(20px, 2.6vw, 32px); position: relative; display: grid; gap: var(--s-3); align-content: start; padding: var(--tile-pad) var(--tile-pad) calc(var(--tile-pad) + 20px); border: 1.5px solid var(--rule); border-radius: var(--r-l); background: var(--tile-bg); color: var(--tile-ink); transition: transform var(--d-short) var(--ease-out), box-shadow var(--d-short) var(--ease-out); }
.rw-step:hover { transform: translate(-2px, -2px); box-shadow: var(--print-sm); }
.rw-step::after { content: ''; position: absolute; left: 14px; right: 14px; bottom: 11px; height: 6px; background: radial-gradient(circle at 3px 3px, var(--tile-dot) 2.2px, transparent 2.9px) 0 0 / 16px 6px repeat-x; }
.rw-step--2 { --tile-bg: var(--lamp); --tile-ink: #14213D; --tile-accent: #14213D; --tile-dot: #14213D; }
.rw-step--3 { --tile-bg: var(--stage); --tile-ink: var(--stage-ink); --tile-accent: var(--stage-accent); --tile-dot: var(--stage-accent); }
.rw-step__mark { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s-4); margin-bottom: var(--s-6); }
.rw-step__num { font-family: var(--f-display); font-style: italic; font-size: 3.75rem; font-weight: var(--w-num); font-variation-settings: 'opsz' var(--opsz-num); line-height: 0.85; color: var(--tile-accent); }
.rw-step__icon { display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid color-mix(in srgb, currentColor 40%, transparent); border-radius: 50%; color: inherit; }
.rw-step h3 { font-family: var(--f-display); font-size: var(--t-h2); font-weight: var(--w-title); font-variation-settings: 'opsz' var(--opsz-h2); line-height: 1.12; color: inherit; }
.rw-step p { color: inherit; opacity: 0.84; max-width: 38ch; }
.rw-step .rw-tag { border-color: color-mix(in srgb, currentColor 45%, transparent); color: inherit; }
.rw-step .rw-tag--quiet { opacity: 0.8; }
.rw-step__note { color: inherit; opacity: 0.7; }

.rw-needs__wrap { margin-top: var(--space-block); padding: clamp(24px, 3vw, 40px); border: 1px solid var(--hair-strong); border-radius: var(--r-m); background: var(--surface); }
.rw-needs__title { font-family: var(--f-text); font-size: var(--t-label); font-weight: 600; letter-spacing: var(--track-label); text-transform: uppercase; color: var(--ink-3); margin: 0 0 var(--s-5); }
.rw-needs { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-5) var(--gap); }
.rw-needs__item { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: var(--s-1) var(--s-3); align-content: start; }
.rw-needs__icon { grid-row: 1 / span 2; padding-top: 2px; color: var(--ink); }
.rw-needs__item h4 { font-size: var(--t-body); font-weight: 600; line-height: 1.4; }
.rw-needs__item p { font-size: var(--t-small); line-height: 1.5; color: var(--ink-2); }

/* Most of your score is measured ----------------------------------------------------------------------------- */
.rw-score-guide { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--s-7) calc(var(--gap) * 2); align-items: start; }
.rw-score-guide__intro { position: sticky; top: var(--s-6); }
.rw-score-guide__intro .rw-sechead { margin-bottom: var(--s-6); grid-template-columns: minmax(0, 1fr); }
.rw-score-guide__intro .rw-sechead__no { grid-template-columns: auto auto; align-items: baseline; column-gap: var(--s-3); margin-bottom: var(--s-2); }
.rw-score-guide__intro .rw-sechead__no b { font-size: 1.75rem; }
.rw-split { display: grid; gap: var(--s-3); max-width: 30rem; }
.rw-split__line { display: flex; gap: 2px; height: 6px; }
.rw-split__part { flex: 1 1 0; }
.rw-split__part--measured { background: var(--data-measured); }
.rw-split__part--opinion { background: var(--data-opinion); }
.rw-split__key { display: flex; gap: 2px; }
.rw-split__key > span { flex: 1 1 0; min-width: 0; }
.rw-split__key .rw-unit { font-size: var(--t-small); color: var(--ink-2); margin-left: 0.35em; }
.rw-split__opinion .rw-num { color: var(--ink); }
.rw-split__measured .rw-num { color: var(--accent); }

.rw-points { display: grid; gap: var(--space-block); }
.rw-points__head { padding-top: var(--s-4); margin-bottom: var(--s-2); background: var(--rule-line) top left / 100% 1px no-repeat; font-family: var(--f-text); font-size: var(--t-label); font-weight: 600; letter-spacing: var(--track-label); text-transform: uppercase; color: var(--ink-2); }
.rw-points__list { list-style: none; margin: 0; padding: 0; }
.rw-points__row { display: grid; grid-template-columns: 3.5rem minmax(0, 1fr); gap: var(--s-4); align-items: first baseline; padding-block: var(--s-4); border-bottom: 1px solid var(--hair); }
.rw-points__row:last-child { border-bottom: 0; padding-bottom: 0; }
.rw-points__num { font-size: var(--t-num-xl); line-height: 1; color: var(--ink); }
.rw-points__row--measured .rw-points__num { color: var(--accent); }
.rw-points__text { display: grid; gap: var(--s-1); min-width: 0; }
.rw-points__label { font-size: var(--t-h3); font-weight: 600; line-height: 1.3; letter-spacing: -0.005em; }
.rw-points__about { font-size: var(--t-small); line-height: 1.5; color: var(--ink-2); max-width: 52ch; }
.rw-points .rw-bar { margin-top: var(--s-3); }
.rw-points .rw-bar__fill { transition-delay: calc(120ms + var(--i, 0) * 80ms); }

/* Checked against real walks --------------------------------------------------------------------------------- */
.rw-proof { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--s-7) calc(var(--gap) * 2); align-items: start; }
.rw-proof__intro .rw-sechead { margin-bottom: var(--s-5); grid-template-columns: minmax(0, 1fr); }
.rw-proof__intro .rw-sechead__no { grid-template-columns: auto auto; align-items: baseline; column-gap: var(--s-3); margin-bottom: var(--s-2); }
.rw-proof__intro .rw-sechead__no b { font-size: 1.75rem; }
.rw-proof__more { max-width: 44ch; color: var(--ink-2); }
.rw-proof__figure { margin: 0; gap: var(--s-6); padding: clamp(24px, 3vw, 40px); border: 1.5px solid var(--rule); background: var(--surface); box-shadow: var(--print); }
.rw-legend { list-style: none; margin: 0; padding: 0 0 var(--s-5); display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5); border-bottom: 1px solid var(--hair); font-size: var(--t-small); color: var(--ink-2); }
.rw-legend li { display: inline-flex; align-items: center; gap: var(--s-2); }
.rw-dots { display: grid; gap: var(--s-5); }
.rw-dots__list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-2); }
.rw-dots__row { display: grid; gap: 38px; padding-bottom: 34px; }
.rw-dots__head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-1) var(--s-3); flex-wrap: wrap; }
.rw-dots__head strong { font-size: var(--t-h3); font-weight: 600; }
.rw-dots__rule { font-size: var(--t-caption); font-weight: 500; color: var(--ink-3); }
.rw-dots__track { position: relative; height: 4px; background: var(--band); }
.rw-dots__zone { position: absolute; left: 0; top: 0; bottom: 0; background: linear-gradient(90deg, var(--data-tint) 0 var(--best), transparent 100%); transform-origin: left center; transition: transform var(--d-long) var(--ease-line); }
.rw-dots__best { position: absolute; top: -6px; bottom: -6px; width: 1px; margin-left: -0.5px; background: var(--accent); }
.rw-dots__dot { position: absolute; top: 50%; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; transition: transform var(--d-medium) var(--ease-out); transition-delay: calc(200ms + var(--i, 0) * 80ms); }
.rw-dots__dot--pros { background: var(--lamp); box-shadow: 0 0 0 3px var(--surface); }
.rw-dots__dot--other { background: var(--surface); border: 2px solid var(--ink); }
.rw-dots__val { position: absolute; left: 50%; transform: translateX(-50%); white-space: nowrap; font-size: var(--t-caption); font-weight: 600; color: var(--ink); }
.rw-dots__dot--pros .rw-dots__val { bottom: calc(100% + 8px); color: var(--accent); }
.rw-dots__dot--other .rw-dots__val { top: calc(100% + 8px); }
.rw-dots__key { width: 14px; height: 14px; border-radius: 50%; flex: none; }
.rw-dots__key--pros { background: var(--lamp); }
.rw-dots__key--other { border: 2px solid var(--ink); }
.rw-dots__key--zone { width: 24px; height: 6px; border-radius: 0; background: var(--data-tint); box-shadow: inset -1px 0 0 var(--accent); }
.rw-proof__caption { font-family: var(--f-display); font-style: italic; font-size: 1rem; line-height: 1.5; color: var(--ink-2); padding-top: var(--s-4); border-top: 1px solid var(--hair); }

/* The same rules for every body: a navy band, the stage inside the page. The ink tokens are remapped so the shared
   section head, rule and disclosure draw themselves in stage colours. */
.rw-band {
  --ink: var(--stage-ink);
  --ink-2: var(--stage-ink-2);
  --ink-3: var(--stage-ink-2);
  --accent: var(--stage-accent);
  --accent-hover: var(--stage-ink);
  --lamp: var(--stage-accent);
  --hair: var(--stage-hair);
  --hair-strong: rgba(244, 237, 224, 0.3);
  --rule: var(--stage-ink);
  margin-top: var(--space-section);
  border: 1.5px solid var(--rule);
  border-radius: var(--r-l);
  background: var(--stage);
  box-shadow: var(--print);
  color: var(--stage-ink);
  position: relative;
}
.rw-band::before { content: ''; position: absolute; inset: 4px; border: 1px solid var(--stage-hair); border-radius: 2px; pointer-events: none; }
.rw-band__inner { padding: clamp(40px, 6vw, 96px) clamp(24px, 5vw, 80px); }
.rw-band .rw-title { color: var(--stage-ink); }
/* the term, set like a dictionary entry */
.rw-defn { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--s-5) calc(var(--gap) * 2); align-items: start; padding-bottom: var(--space-block); margin-bottom: var(--space-block); border-bottom: 1px solid var(--stage-hair); }
.rw-defn .rw-eyebrow { color: var(--stage-accent); margin-bottom: var(--s-3); }
.rw-defn__word { font-family: var(--f-display); font-style: italic; font-size: clamp(2.75rem, 1.5rem + 4.5vw, 5rem); font-weight: 500; font-variation-settings: 'opsz' 72; line-height: 0.95; letter-spacing: -0.01em; color: var(--stage-accent); }
.rw-defn__meta { margin-top: var(--s-3); font-size: var(--t-body); letter-spacing: 0.02em; color: var(--stage-ink-2); }
.rw-defn__meta i { font-family: var(--f-display); font-style: italic; }
.rw-defn__text { display: grid; gap: var(--s-3); max-width: var(--measure); padding-top: var(--s-6); }
.rw-defn__text p:first-child { font-size: var(--t-lede); line-height: 1.5; color: var(--stage-ink); }
.rw-defn__text p + p { font-size: var(--t-small); line-height: 1.6; color: var(--stage-ink-2); }
.rw-fair { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-6) var(--gap); }
.rw-fair__item { display: grid; gap: var(--s-3); align-content: start; padding-top: var(--s-5); border-top: 1px solid var(--stage-ink); background: linear-gradient(90deg, var(--stage-accent) 0 24px, transparent 24px) top left / 100% 2px no-repeat; }
.rw-fair__item h3 { font-family: var(--f-display); font-size: 1.5rem; font-weight: 600; font-variation-settings: 'opsz' 32; line-height: 1.15; color: var(--stage-ink); }
.rw-fair__item p { font-size: var(--t-small); line-height: 1.6; color: var(--stage-ink-2); }
.rw-band .rw-sources { margin-top: var(--space-block); }
.rw-sources > summary { font-size: 1.25rem; color: var(--stage-ink); cursor: pointer; }
.rw-sources > summary:hover { color: var(--stage-accent); }
.rw-sources__body { display: grid; gap: var(--s-4); max-width: var(--measure); font-size: var(--t-small); line-height: 1.6; color: var(--stage-ink-2); }
.rw-sources__body ul { margin: 0; padding-left: var(--s-5); display: grid; gap: var(--s-3); }
.rw-sources__body li::marker { color: var(--stage-accent); }
.rw-sources__body a { color: var(--stage-accent); font-weight: 500; }
.rw-sources__body a:hover { color: var(--stage-ink); }

/* Where your walk goes: a note in the margin ---------------------------------------------------------------- */
.rw-privacy { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--s-5) calc(var(--gap) * 2); align-items: start; padding: 0; background: var(--rule-line) top left / 100% 1px no-repeat; padding-top: var(--s-5); border-radius: 0; }
.rw-privacy__head { display: grid; gap: var(--s-3); align-content: start; }
.rw-privacy__head h2 { font-size: var(--t-h2); }
.rw-privacy__icon { display: none; }
.rw-privacy__body { display: grid; gap: var(--s-3); }
.rw-privacy__body p { color: var(--ink); max-width: var(--measure); }
.rw-privacy__csp { font-size: var(--t-small); color: var(--ink-2); }
.rw-privacy__csp::before { content: ''; display: inline-block; width: 8px; height: 8px; margin-right: var(--s-2); border-radius: 50%; background: var(--ok); vertical-align: 0.05em; }

/* Your saved walks ------------------------------------------------------------------------------------------ */
.rw-recent .rw-sechead { margin-bottom: var(--s-5); }
.rw-recent__empty { display: flex; align-items: center; gap: var(--s-3); color: var(--ink-2); }
.rw-recent__empty .rw-icon { color: var(--ink-3); }

/* Closing: the runway line, then the invitation ------------------------------------------------------------ */
.rw-cta { margin-top: var(--space-section); padding-block: var(--space-section) calc(var(--space-section) * 0.4); display: grid; justify-items: center; gap: var(--s-5); text-align: center; }
.rw-cta__art { color: var(--ink-2); line-height: 0; --accent: var(--lamp); }
.rw-cta__divider { width: min(240px, 60vw); height: auto; }
.rw-cta__title { max-width: 16ch; font-style: italic; font-weight: 400; }
.rw-cta .rw-actions { margin-top: var(--s-2); }

/* Scroll reveal (home only). Hidden start states only apply once home.mjs sets .rw-js-reveal. */
.rw-js-reveal [data-reveal] { opacity: 0; transform: translateY(14px); transition: opacity var(--d-long) var(--ease-out), transform var(--d-long) var(--ease-out); }
.rw-js-reveal [data-reveal].is-revealed { opacity: 1; transform: none; }
.rw-js-reveal :is(.rw-steps, .rw-fair)[data-reveal] { opacity: 1; transform: none; }
.rw-js-reveal :is(.rw-steps, .rw-fair)[data-reveal] > * { opacity: 0; transform: translateY(14px); transition: opacity var(--d-long) var(--ease-out), transform var(--d-long) var(--ease-out); transition-delay: calc(var(--i, 0) * 60ms); }
.rw-js-reveal :is(.rw-steps, .rw-fair)[data-reveal].is-revealed > * { opacity: 1; transform: none; }
:is(.rw-steps, .rw-fair) > :nth-child(2) { --i: 1; }
:is(.rw-steps, .rw-fair) > :nth-child(3) { --i: 2; }
:is(.rw-steps, .rw-fair) > :nth-child(4) { --i: 3; }
.rw-js-reveal [data-reveal]:not(.is-revealed) .rw-bar__fill { transform: scaleX(0); }
.rw-js-reveal [data-reveal]:not(.is-revealed) .rw-dots__zone { transform: scaleX(0); }
.rw-js-reveal [data-reveal]:not(.is-revealed) .rw-dots__dot { transform: scale(0); }

@media (prefers-reduced-motion: reduce) {
  .rw-hero__line, .rw-hero__readout, .rw-stamp__spin, .rw-hero__accent::after { animation: none; }
  .rw-js-reveal [data-reveal], .rw-js-reveal [data-reveal] > *, .rw-dots__zone, .rw-dots__dot { transition: none; }
}

/* 1000 px: one column; the plate's key becomes a row of chips under the picture ---------------------------- */
@media (max-width: 1000px) {
  .rw-hero { grid-template-columns: minmax(0, 1fr); gap: var(--s-6); }
  .rw-hero__copy { max-width: 40rem; }
  .rw-hero__plate { grid-template-columns: minmax(0, 1fr); }
  .rw-hero__picture { aspect-ratio: 4 / 3; min-height: 0; }
  .rw-hero__key { border-left: 0; border-top: 1px solid var(--stage-hair); padding: var(--s-4) var(--s-4) var(--s-4); gap: var(--s-3); }
  .rw-hero__readouts { --leaders: 0; display: flex; gap: var(--s-2); flex-wrap: wrap; }
  .rw-hero__readout, .rw-hero__readout:last-child { display: inline-flex; align-items: baseline; gap: var(--s-2); padding: 6px 12px; border: 1px solid var(--stage-hair); animation: none; }
  .rw-hero__readout::before { display: none; }
  .rw-hero__readout dd { font-size: 1.125rem; }
  .rw-steps, .rw-score-guide, .rw-proof, .rw-privacy, .rw-defn { grid-template-columns: minmax(0, 1fr); }
  .rw-score-guide__intro { position: static; }
  .rw-needs, .rw-fair { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rw-step p { max-width: var(--measure); }
  .rw-defn__text { padding-top: 0; }
  .rw-selvedge { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rw-selvedge li:nth-child(3) { border-left: 0; }
  .rw-selvedge li:nth-child(n + 3) { border-top: 2px dotted var(--hair-strong); }
}

/* 760 px: the phone ------------------------------------------------------------------------------------------ */
@media (max-width: 760px) {
  .rw-hero { padding-top: var(--s-2); }
  .rw-hero h1 { margin-bottom: calc(0.3em + var(--s-4)); }
  .rw-hero__kicker { margin-bottom: var(--s-4); }
  .rw-hero .rw-hero__actions { margin-top: var(--s-5); }
  .rw-hero .rw-btn--big { min-height: 52px; padding: 12px 16px; font-size: var(--t-body); }
  .rw-hero__plate { box-shadow: var(--print-sm); }
  .rw-hero__picture { aspect-ratio: 1; }
  .rw-band__inner { padding: var(--s-7) var(--s-5); }
  .rw-cta .rw-actions { width: 100%; }
  .rw-cta__btn { width: 100%; }
  .rw-dots__head { flex-direction: column; align-items: flex-start; }
}

/* 520 px: two-up grids go one-up ----------------------------------------------------------------------------- */
@media (max-width: 520px) {
  .rw-needs, .rw-fair { grid-template-columns: minmax(0, 1fr); }
  .rw-selvedge { grid-template-columns: minmax(0, 1fr); margin-top: var(--s-6); }
  .rw-selvedge li { padding: var(--s-4) var(--s-3); }
  .rw-selvedge li + li { border-left: 0; border-top: 2px dotted var(--hair-strong); }
  .rw-step { box-shadow: none; }
  .rw-points__row { grid-template-columns: 2.75rem minmax(0, 1fr); gap: var(--s-3); }
  .rw-legend { flex-direction: column; }
  .rw-hero__readouts { display: grid; gap: 0; }
  .rw-hero__readout, .rw-hero__readout:last-child { border: 0; border-top: 1px solid var(--stage-hair); padding: var(--s-2) 0; justify-content: space-between; }
}

/* ── How the information is set: the programme's shapes ──────────────────────────────────────────────────── */
/* under the buttons: a note saying what will happen */
.rw-action-note { margin-top: var(--s-3); font-size: var(--t-caption); line-height: 1.5; color: var(--ink-3); }

/* a guidance line: one sentence that answers the question a reader has at this point */
.rw-guide { margin-top: var(--s-6); max-width: var(--measure); padding-left: var(--s-4); border-left: 2px solid var(--lamp); font-size: var(--t-small); line-height: 1.55; color: var(--ink-2); }
.rw-reassure { margin-top: var(--space-block); max-width: var(--measure); font-family: var(--f-display); font-style: italic; font-size: 1.25rem; line-height: 1.4; color: var(--stage-ink); }

/* steps: when it happens and what you get, as two tags; "start here" on the first */
.rw-step__note { margin-left: var(--s-3); margin-right: auto; align-self: flex-end; font-family: var(--f-display); font-style: italic; font-size: 1rem; color: var(--ink-3); }
.rw-step__tags { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-2); }
.rw-tag { display: inline-flex; align-items: center; padding: 3px 9px; border: 1px solid var(--rule); border-radius: var(--r-s); font-size: var(--t-caption); font-weight: 600; line-height: 1.4; color: var(--ink); }
.rw-tag--quiet { border-color: var(--hair-strong); color: var(--ink-2); font-weight: 500; }

/* the looks: one ruled line per part, number, name and points, the hook, and a toggle that opens how it is measured */
.rw-looks { display: grid; border-top: 1px solid var(--rule); }
.rw-look { border-bottom: 1px solid var(--hair); }
.rw-look__summary { display: grid; grid-template-columns: 2.75rem minmax(0, 1.1fr) minmax(0, 1fr) 32px; gap: var(--s-4); align-items: center; min-height: 72px; padding: var(--s-4) 0; list-style: none; cursor: pointer; }
.rw-look__summary::-webkit-details-marker { display: none; }
.rw-look__summary:hover .rw-look__title { color: var(--accent); }
.rw-look__no { font-family: var(--f-display); font-style: italic; font-size: 1.375rem; font-weight: 600; color: var(--accent); line-height: 1; }
.rw-look--opinion .rw-look__no { color: var(--ink-2); }
.rw-look__name { display: grid; gap: 2px; min-width: 0; }
.rw-look__title { font-size: var(--t-h3); font-weight: 600; line-height: 1.3; transition: color var(--d-short) var(--ease-out); }
.rw-look__pts { font-size: var(--t-caption); font-weight: 500; letter-spacing: 0.02em; color: var(--ink-3); }
.rw-look__hook { font-family: var(--f-display); font-style: italic; font-size: 1.0625rem; line-height: 1.4; color: var(--ink-2); }
.rw-look__toggle { position: relative; width: 28px; height: 28px; border: 1px solid var(--rule); border-radius: 50%; justify-self: end; }
.rw-look__toggle::before, .rw-look__toggle::after { content: ''; position: absolute; left: 50%; top: 50%; width: 12px; height: 1.5px; background: currentColor; transform: translate(-50%, -50%); transition: transform var(--d-short) var(--ease-out); }
.rw-look__toggle::after { transform: translate(-50%, -50%) rotate(90deg); }
.rw-look[open] .rw-look__toggle::after, .rw-faq__item[open] .rw-look__toggle::after { transform: translate(-50%, -50%) rotate(0deg); }
.rw-look__body { display: grid; gap: var(--s-3); padding: 0 0 var(--s-5) 2.75rem; }
.rw-look__body > p { max-width: var(--measure); font-size: var(--t-small); line-height: 1.55; color: var(--ink-2); margin-left: var(--s-4); }
.rw-look__body .rw-bar { margin-left: var(--s-4); max-width: 24rem; }
.rw-points .rw-bar__fill { transition-delay: 0ms; }

/* facts: the label above its value, in hairline rows */
.rw-facts { display: grid; margin: 0; border-top: 1px solid var(--rule); }
.rw-facts > div { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: var(--s-2) var(--s-5); padding: var(--s-4) 0; border-bottom: 1px solid var(--hair); }
.rw-facts dt { font-size: var(--t-label); font-weight: 600; letter-spacing: var(--track-label); text-transform: uppercase; color: var(--ink-3); padding-top: 3px; }
.rw-facts dd { margin: 0; font-size: var(--t-body); line-height: 1.55; color: var(--ink); max-width: var(--measure); }

/* questions */
.rw-faq__list { display: grid; border-top: 1px solid var(--rule); }
.rw-faq__item { border-bottom: 1px solid var(--hair); }
.rw-faq__item > summary { display: flex; justify-content: space-between; align-items: center; gap: var(--s-4); min-height: 64px; padding: var(--s-4) 0; list-style: none; cursor: pointer; font-family: var(--f-display); font-size: 1.375rem; font-weight: var(--w-title); font-variation-settings: 'opsz' 32; line-height: 1.2; }
.rw-faq__item > summary::-webkit-details-marker { display: none; }
.rw-faq__item > summary:hover { color: var(--accent); }
.rw-faq__item > summary .rw-look__toggle { flex: none; }
.rw-faq__answer { max-width: var(--measure); padding: 0 0 var(--s-5); font-size: var(--t-body); line-height: 1.6; color: var(--ink-2); }

@media (max-width: 760px) {
  .rw-look__summary { grid-template-columns: 2.25rem minmax(0, 1fr) 28px; min-height: 0; }
  .rw-look__hook { grid-column: 2; }
  .rw-look__toggle { grid-row: 1; grid-column: 3; }
  .rw-look__body { padding-left: 2.25rem; }
  .rw-look__body > p, .rw-look__body .rw-bar { margin-left: 0; }
  .rw-facts > div { grid-template-columns: minmax(0, 1fr); gap: var(--s-1); }
  .rw-faq__item > summary { font-size: 1.1875rem; }
}