/* free-analysis.css: page-scoped styles moved out of free-analysis.html on 2026-09-05, verbatim. tokens.css wins. */
  /* AeroEdge guided analysis -- the answer-first single-page flow (design: Claude Design free-analysis).
     ONE CdA with its conditions, always captioned to confirm in advanced analysis. Used by BOTH tiers:
     free returns the number (no save); premium can save the run to a session. Tokens in /css/tokens.css. */
  * { box-sizing: border-box; margin: 0; padding: 0; }
  body { background: var(--bg); color: var(--text); font-family: 'Barlow', sans-serif; font-size: var(--fs-4); min-height: 100vh; transition: background .35s ease, color .35s ease; }
  h1,h2,h3 { font-family: 'Barlow Condensed', sans-serif; text-transform: uppercase; font-weight: 700; line-height: 1; letter-spacing: .02em; }
  a { color: inherit; text-decoration: none; }
  .num { font-variant-numeric: tabular-nums; }

  /* ── app top nav (consistent with sessions.html) ── */

  main { max-width: 920px; margin: 0 auto; padding: 36px 24px 80px; }
  .kick { font-family: 'Barlow Condensed', sans-serif; font-size: var(--fs-2); font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--cyan); }
  .page-h { font-family: 'Barlow Condensed', sans-serif; font-weight: 800; text-transform: uppercase; font-size: clamp(30px,4vw,46px); line-height: 1; letter-spacing: .02em; margin: 8px 0 8px; }
  .page-sub { color: var(--text); font-size: var(--fs-4); max-width: 60ch; line-height: 1.55; }

  /* progress steps */
  .steps { display: flex; gap: 0; margin: 26px 0 30px; border: 1px solid var(--rule); }
  .pstep { flex: 1; padding: 12px 16px; border-left: 1px solid var(--bordersoft); display: flex; gap: 10px; align-items: baseline; }
  .pstep:first-child { border-left: 0; }
  .pstep .pn { font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: var(--fs-3); letter-spacing: .12em; color: var(--dim); }
  .pstep .pl { font-family: 'Barlow Condensed', sans-serif; font-size: var(--fs-3); text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
  .pstep.active { background: var(--surface2); }
  .pstep.active .pn { color: var(--cyan); }
  .pstep.active .pl { color: var(--text); }
  .pstep.done .pn::after { content: " \2713"; color: var(--cyan); }

  .panel { border: 1px solid var(--rule); background: var(--surface); padding: 22px; margin-bottom: 18px; }
  .panel-title { font-family: 'Barlow Condensed', sans-serif; font-size: var(--fs-5); text-transform: uppercase; letter-spacing: .04em; margin-bottom: 4px; }
  .why { font-size: var(--fs-3); color: var(--text); line-height: 1.5; }
  .why b { color: var(--text); font-weight: 500; }

  .step { display: none; }
  .step.open { display: block; }

  /* tutorial note */
  .tip { display: flex; gap: 12px; align-items: flex-start; border: 1px solid var(--rule); border-left: 2px solid var(--cyan); background: var(--surface2); padding: 14px 16px; margin-bottom: 16px; }
  .tip .tk { font-family: 'Barlow Condensed', sans-serif; font-size: var(--fs-1); letter-spacing: .12em; text-transform: uppercase; color: var(--cyan); flex: none; padding-top: 2px; }
  .tip p { margin: 0; font-size: 13.5px; color: var(--text); line-height: 1.55; }

  /* dropzone */
  .dz { border: 1.5px dashed var(--rule); background: var(--surface); padding: 34px 20px; text-align: center; cursor: pointer; transition: border-color .15s, background .15s; }
  .dz:hover { border-color: var(--cyan); background: var(--surface2); }
  .dz.loaded { border-color: var(--green); border-style: solid; background: color-mix(in srgb, var(--green) 7%, var(--surface)); }
  .dz strong { font-family: 'Barlow Condensed', sans-serif; font-size: 18px; font-weight: 600; }
  .dz p { color: var(--muted); font-size: var(--fs-3); margin: 6px 0 0; }
  .dz .fn { color: var(--green); font-size: var(--fs-3); margin-top: 8px; font-weight: 600; }

  /* setup questions */
  .q { margin-bottom: 18px; }
  .q label { display: block; font-family: 'Barlow Condensed', sans-serif; font-size: var(--fs-2); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-bottom: 7px; }
  .q select, .q input { width: 100%; background: var(--surface2); border: 1px solid var(--rule); color: var(--text); padding: 11px 13px; font-family: 'Barlow', sans-serif; font-size: 14px; cursor: pointer; }
  .q select:focus, .q input:focus { outline: none; border-color: var(--cyan); }
  .q .why { margin-top: 7px; }
  .grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

  .btn { background: var(--btn-bg); color: var(--btn-text); border: 1px solid var(--btn-bg); padding: 13px 20px; cursor: pointer; font-family: 'Barlow Condensed', sans-serif; font-size: var(--fs-4); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; transition: opacity .15s; }
  .btn:hover:not(:disabled) { opacity: .88; }
  .btn.block { width: 100%; }
  .btn.cy { background: none; border-color: var(--cyan); color: var(--cyan); }
  .btn.cy:hover { background: var(--cyan); color: var(--on-accent); opacity: 1; }
  .btn.ghost { background: none; border-color: var(--rule); color: var(--text); }
  .btn.ghost:hover { border-color: var(--cyan); opacity: 1; }
  .btn:disabled { opacity: .45; cursor: not-allowed; }
  .spinner { width: 16px; height: 16px; border: 2px solid var(--rule); border-top-color: var(--cyan); border-radius: 50%; animation: spin .7s linear infinite; display: inline-block; vertical-align: middle; }
  @keyframes spin { to { transform: rotate(360deg); } }
  .error { background: color-mix(in srgb,var(--danger) 12%,transparent); border: 1px solid color-mix(in srgb,var(--danger) 34%,transparent); color: var(--danger); font-size: var(--fs-3); padding: 11px 13px; margin-top: 14px; display: none; }

  /* ── RESULT ── */
  .result-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
  .result-head .rl { font-family: 'Barlow Condensed', sans-serif; font-size: var(--fs-2); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
  /* ★ p4-reading (2026-09-25): the reading badge -- words carry the meaning, at full --text
     contrast (a solid cyan fill measured 3.34:1 on light, failing AA); the dot is reinforcement
     only, same pattern as tokens.css's .ae-tier. --cyan-dim on the measured dot in light theme
     only (measured 2.95:1 with plain --cyan on that ground); --amber for an estimate follows the
     design system's existing caution colour (§4), the same hue .ae-tier.t-low already uses.
     Shares its outline/padding declaration with .badge-free (below) instead of its own -- same
     chip shape, one rule for the page's border-budget lint. */
  .badge-free, .reading-badge { font-family: 'Barlow Condensed', sans-serif; font-size: var(--fs-1);
    letter-spacing: .1em; text-transform: uppercase; border: 1px solid var(--rule); padding: 3px 9px; }
  .badge-free { color: var(--muted); }
  .reading-badge { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; color: var(--text); }
  .reading-badge::before { content: ''; width: 7px; height: 7px; flex-shrink: 0; background: var(--dim); }
  .reading-badge.is-measured::before { background: var(--cyan); }
  .reading-badge.is-estimate::before { background: var(--amber); }
  [data-theme="light"] .reading-badge.is-measured::before { background: var(--cyan-dim); }

  .readout { border: 1px solid var(--border); background: var(--panel); }
  .readout .hero { padding: 28px 26px; border-bottom: 1px solid var(--bordersoft); display: flex; align-items: baseline; gap: 18px; flex-wrap: wrap; }
  .readout .cda { font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: clamp(64px,11vw,120px); line-height: .9; color: var(--cyan); }
  /* p4-reading: an ESTIMATE's CdA numeral drops from cyan to ink — cyan is reserved for a
     measured value (design §4), and this one wasn't. */
  .readout .cda.is-estimate { color: var(--text); }
  .readout .unit { font-family: 'Barlow Condensed', sans-serif; font-size: 18px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
  /* R6 (docs/design/data-presentation.md): m² hangs on the numeral's CAP LINE instead of sitting
     on the baseline at label size. It is a CHILD of .cda so `em` resolves against the numeral and
     the ratio holds across the clamp() above at every width. `CdA` stays in .unit beside it. */
  .readout .cda .cda-u { font-size: .26em; vertical-align: top; margin-left: .16em; letter-spacing: .05em;
    color: var(--muted); font-weight: 600; }
  /* T5, the claim. The 40 km projection was one of four equal cells in .cond, where the thing a
     rider actually repeats to a friend sat at the same weight as air density. Promoted to a
     sentence directly under the number, at the size the research gives an interpretation line
     (about a fifth of the hero). Rule R2: lead with what it MEANS, the figure is the evidence. */
  .readout .claim { padding: 0 26px 22px; font-family: 'Barlow Condensed', sans-serif; font-weight: 700;
    text-transform: uppercase; font-size: clamp(20px,3.2vw,26px); line-height: 1; letter-spacing: .01em; color: var(--text); }
  .readout .claim .sub { display: block; font-family: 'Barlow Condensed', sans-serif; font-weight: 600;
    font-size: var(--fs-1); letter-spacing: .16em; color: var(--muted); margin-top: 8px; }
  /* .band is retired (Increment 5: zero uncertainty on the free report) -- the rule is kept only so a
     stray .band in a cached/older render degrades to plain text rather than inheriting nothing. */
  .readout .band { font-size: 14px; color: var(--muted); margin-left: auto; }
  .readout .band b { color: var(--text); font-weight: 500; }

  /* ── Increment 5: the route trace. House style -- zero radius, hairline rule, tokens only, no
     tiles and no third-party request. The SVG scales via viewBox, so it is responsive for free. ── */
  .route-panel { margin-top: 16px; border: 1px solid var(--rule); border-radius: var(--radius);
    background: var(--surface); padding: 12px; }
  .route-svg { display: block; width: 100%; height: auto; }
  .route-note { display: flex; gap: 14px; margin-top: 8px; font-size: var(--fs-1); color: var(--muted); }
  .route-note .rt-s { color: var(--green); }
  .route-note .rt-f { color: var(--danger); }
  .route-indoor { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
  .route-badge { font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: var(--fs-2);
    letter-spacing: .08em; text-transform: uppercase; color: var(--steel);
    border: 1px solid var(--rule); border-radius: var(--radius); padding: 4px 10px; }
  .route-indoor .route-note { margin-top: 0; color: var(--text); }
  .cond { display: grid; grid-template-columns: repeat(4,1fr); }
  .cond > div { padding: 16px 18px; border-left: 1px solid var(--bordersoft); border-top: 1px solid var(--bordersoft); }
  .cond > div:nth-child(4n+1) { border-left: 0; }
  .cond .ck { font-family: 'Barlow Condensed', sans-serif; font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
  .cond .cv { font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: var(--fs-6); color: var(--text); margin-top: 3px; }
  .cond .cs { font-size: var(--fs-1); color: var(--muted); margin-top: 2px; }

  /* power-at-speed strip (design handoff: design_handoff_power_strip) -- a third .readout section
     below .cond, its own divider language (vertical .rule-soft only; .pwr-strip's own border-top
     already separates it from .cond above). Ship as designed; values stay ink (var(--text)), not
     cyan, matching how .cond .cv already behaves. */
  .pwr-strip { border-top: 1px solid var(--bordersoft); }
  .pwr-cap { display: flex; align-items: baseline; justify-content: space-between; gap: 10px 16px; padding: 14px 18px 0; flex-wrap: wrap; }
  .pwr-cap .pwr-label { font-family: 'Barlow Condensed', sans-serif; font-size: var(--fs-2); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
  .pwr-cap .pwr-assume { font-size: var(--fs-1); color: var(--muted); }
  .pwr-grid { display: grid; grid-template-columns: repeat(4,1fr); margin-top: 10px; }
  .pwr-grid > div { padding: 12px 18px 16px; border-left: 1px solid var(--rule-soft); }
  .pwr-grid > div:nth-child(4n+1) { border-left: 0; }
  .pwr-grid .pk { font-family: 'Barlow Condensed', sans-serif; font-size: var(--fs-1); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
  .pwr-grid .pv { font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: var(--fs-6); color: var(--text); margin-top: 3px; }
  .pwr-grid .pu { font-size: var(--fs-2); color: var(--muted); margin-left: 3px; font-weight: 400; }

  /* first-class caveat (mandatory on every result) */
  .caveat { display: flex; gap: 14px; align-items: flex-start; border: 1px solid var(--amber); background: color-mix(in srgb, var(--amber) 8%, transparent); padding: 18px 20px; margin-top: 16px; }
  .caveat .ci { font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: var(--fs-2); letter-spacing: .08em; text-transform: uppercase; color: var(--amber); border: 1px solid var(--amber); padding: 4px 9px; flex: none; }
  .caveat h3 { font-size: var(--fs-5); margin: 0 0 5px; color: var(--text); }
  .caveat p { margin: 0; font-size: 14px; color: var(--text); line-height: 1.55; max-width: 64ch; }
  .caveat p a { color: var(--cyan); font-weight: 600; }

  /* not-measurable */
  .nomeasure { border: 1px solid var(--border); background: var(--panel); }
  .nomeasure .nm-head { padding: 24px 26px; border-bottom: 1px solid var(--bordersoft); }
  .nm-flag { font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: var(--fs-2); letter-spacing: .1em; text-transform: uppercase; color: var(--amber); border: 1px solid var(--amber); padding: 3px 9px; display: inline-block; }
  .nomeasure h2 { font-size: clamp(26px,3.4vw,40px); margin: 12px 0 8px; }
  .nomeasure .nm-why { color: var(--text); font-size: 14.5px; max-width: 64ch; line-height: 1.55; }
  .nm-sub { font-family: 'Barlow Condensed', sans-serif; font-size: var(--fs-1); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); padding: 16px 26px 0; }
  .nm-metrics { display: grid; grid-template-columns: repeat(4,1fr); padding: 10px 26px 24px; gap: 0; }
  .nm-metrics > div { padding: 12px 0; border-top: 1px solid var(--bordersoft); padding-right: 16px; }
  .nm-metrics .mk { font-family: 'Barlow Condensed', sans-serif; font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
  .nm-metrics .mv { font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: var(--fs-6); color: var(--text); margin-top: 3px; }
  .nm-note { padding: 0 26px 22px; font-size: 12.5px; color: var(--dim); }
  .nm-next ol { margin: 0; padding: 4px 26px 10px 46px; color: var(--text); font-size: 14.5px; line-height: 1.6; }
  .nm-next li { padding: 3px 0; }
  .nm-next a { color: var(--cyan); }

  /* onward affordances */
  .onward { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 18px; }
  .aff { border: 1px solid var(--rule); background: var(--surface); padding: 18px; display: flex; flex-direction: column; gap: 10px; }
  .aff h3 { font-size: var(--fs-5); }
  .aff p { font-size: var(--fs-3); color: var(--text); margin: 0; line-height: 1.5; }
  .aff .lockrow { display: flex; align-items: center; gap: 8px; }
  .aff .lock { font-family: 'Barlow Condensed', sans-serif; font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--amber); border: 1px solid var(--amber); padding: 2px 7px; }
  .aff .upgrade { color: var(--cyan); font-weight: 600; font-size: var(--fs-3); }
  .aff .upgrade:hover { text-decoration: underline; }
  /* T5, the paid line. This used to be THREE cards, each with a heading, a selling paragraph, a
     dead disabled button, and the SAME upgrade sentence repeated verbatim on all three: about 120
     words to say one thing. One block of hairline rows says it in a third of that, and the upgrade
     link is asked for once. Rows are --muted, never --dim: a locked feature is information a rider
     reads to decide, and --dim fails AA by design (design section 1). */
  .aff .lrows { display: flex; flex-direction: column; }
  .aff .lrow { display: flex; justify-content: space-between; align-items: baseline; gap: 14px;
    padding: 9px 0; border-bottom: 1px solid var(--bordersoft); }
  .aff .lrow:last-child { border-bottom: 0; }
  .aff .lk { font-family: 'Barlow Condensed', sans-serif; font-weight: 600; text-transform: uppercase;
    letter-spacing: .1em; font-size: var(--fs-2); color: var(--text); white-space: nowrap; }
  .aff .lv { font-size: var(--fs-2); color: var(--muted); text-align: right; line-height: 1.45; }
  /* Light-theme ink for the one small cyan LINK on this page (aeroedge-design, the contrast
     ladder). The house law is "never small cyan text on a light ground": measured here, the
     13px upgrade link runs 3.34:1 on light where AA wants 4.5, while the SAME link in dark is
     8.05:1 and is fine. The prescribed step down the ladder is --steel (5.5:1 on light), so only
     the ink moves. The 64px hero KEEPS cyan: at that size it is a large numeral, which the law
     explicitly permits, and it is the measured value the whole page exists to show. */
  [data-theme="light"] .aff .upgrade { color: var(--steel); }

  /* ── Aero and Corners tabs on the result (12 Nov 2026). Underlines only: the page's border budget
     (tools/lint_style_budget.py counts every `border` shorthand) is spent, so nothing here boxes. ── */
  .rtabs { display: flex; gap: 6px; margin-bottom: 16px; border-bottom: 1px solid var(--rule); }
  .rtab { background: none; border-style: none; border-bottom: 2px solid transparent; margin-bottom: -1px;
    padding: 10px 16px; cursor: pointer; color: var(--muted); font-family: 'Barlow Condensed', sans-serif;
    font-size: var(--fs-5); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
  .rtab:hover { color: var(--text); }
  .rtab[aria-selected="true"] { color: var(--text); border-bottom-color: var(--cyan); }
  .rtab:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }
  .rtab-n { display: inline-block; min-width: 1.7em; margin-left: 6px; padding: 1px 6px; text-align: center;
    font-size: var(--fs-2); background: var(--surface2); color: var(--text); }
  .cor-top { padding: 22px 26px 16px; }
  .cor-h { font-size: clamp(24px,3.2vw,34px); margin-bottom: 8px; }
  /* Grip colour: one custom property per band, used by the pins, the key and the table dots. Squares,
     not dots, because the house radius is zero (and the radius ratchet counts every new one). */
  .g1 { --gc: var(--green); } .g2 { --gc: var(--cyan); } .g3 { --gc: var(--amber); } .g4 { --gc: var(--danger); }
  .glow { --gc: var(--dim); }
  .cpin { fill: var(--gc); stroke: var(--panel); stroke-width: 1.5; cursor: pointer; }
  .cpin.glow { cursor: default; }
  .cpin.on { stroke: var(--text); stroke-width: 3; }
  .cleg { flex-wrap: wrap; gap: 6px 14px; }
  .cleg i, .gdot { display: inline-block; width: 8px; height: 8px; margin-right: 6px; background: var(--gc); }
  .ctable-wrap { overflow-x: auto; margin-top: 16px; }
  .ctable { width: 100%; border-collapse: collapse; font-size: var(--fs-3); }
  .ctable th { font-family: 'Barlow Condensed', sans-serif; font-size: var(--fs-1); font-weight: 600; letter-spacing: .1em;
    text-transform: uppercase; color: var(--muted); text-align: right; padding: 8px 10px; border-bottom: 1px solid var(--rule); }
  .ctable td { padding: 9px 10px; text-align: right; border-bottom: 1px solid var(--bordersoft); font-variant-numeric: tabular-nums; white-space: nowrap; }
  .ctable th:first-child, .ctable td:first-child { text-align: left; }
  .ctable .ckm { color: var(--muted); font-size: var(--fs-1); margin-left: 4px; }
  .ctable tr[data-ci] { cursor: pointer; }
  .ctable tr[data-ci]:hover, .ctable tr.on { background: var(--surface2); }
  .ctable tr[data-ci]:focus-visible { outline: 2px solid var(--cyan); outline-offset: -2px; }

  /* ── Step 7 (2026-11-13): the result opens with motion that SAYS what happened. The route draws
     itself (pathLength="1" on the polyline, so 1 is its whole length), then the measured corners
     pop in one after another (--i set per pin). A pane opened later plays its own: CSS animations
     start when an element is first displayed. Off entirely for "reduce motion" (below). ── */
  @keyframes route-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
  @keyframes pin-pop { from { opacity: 0; transform: scale(.2); } to { opacity: 1; transform: scale(1); } }
  .route-line { stroke-dasharray: 1; stroke-dashoffset: 0; animation: route-draw 1.1s ease-out both; }
  .cpin:not(.glow) { transform-box: fill-box; transform-origin: center;
    animation: pin-pop .32s ease-out both; animation-delay: calc(1s + var(--i, 0) * 60ms); }
  .rtab-n { animation: pin-pop .3s ease-out both; animation-delay: .4s; }

  /* The two drawings. Tokens only, no border shorthand (the page's border budget is full). */
  .bend-dots, .oab { margin: 14px 0 4px; }
  .bend-dots svg, .oab svg { display: block; width: 100%; max-width: 360px; height: auto; }
  .bend-dots .bend { fill: none; stroke: var(--rule); stroke-width: 10; stroke-linecap: round; }
  .bend-dots .d-few { fill: var(--dim); }
  .bend-dots .d-many { fill: var(--cyan); }
  .bend-dots figcaption { display: flex; justify-content: space-between; max-width: 360px;
    font-size: var(--fs-1); color: var(--muted); margin-top: 4px; }
  .oab { padding: 0 26px; }
  .oab path { fill: none; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
  .oab-out, .oab-turn { stroke: var(--cyan); }
  .oab-back { stroke: var(--green); }
  .oab-head { stroke: var(--muted); }
  .oab-start { fill: var(--text); }
  .oab figcaption { font-size: var(--fs-1); color: var(--muted); margin-top: 4px; }

  /* Once per pane: paintResult marks a pane .played after its first showing, so switching tabs back
     and forth does not redraw the route every time. */
  .played .route-line, .played .cpin:not(.glow) { animation: none; }
  @media (prefers-reduced-motion: reduce) {
    .route-line, .cpin:not(.glow), .rtab-n { animation: none; }
  }

  @media (max-width: 720px) {
    .grid2 { grid-template-columns: 1fr; }
    .cor-top { padding: 18px 16px 12px; }
    .ctable th, .ctable td { padding: 8px 6px; }
    .cond { grid-template-columns: 1fr 1fr; }
    .cond > div:nth-child(4n+1) { border-left: 1px solid var(--bordersoft); }
    .cond > div:nth-child(2n+1) { border-left: 0; }
    .pwr-cap { flex-direction: column; align-items: flex-start; gap: 4px; }
    .pwr-grid { grid-template-columns: 1fr 1fr; }
    .pwr-grid > div:nth-child(4n+1) { border-left: 1px solid var(--rule-soft); }
    .pwr-grid > div:nth-child(2n+1) { border-left: 0; }
    .pwr-grid > div:nth-child(n+3) { border-top: 1px solid var(--rule-soft); }
    .nm-metrics { grid-template-columns: 1fr 1fr; }
    .onward { grid-template-columns: 1fr; }
    .steps { flex-direction: column; }
    .pstep { border-left: 0; border-top: 1px solid var(--bordersoft); }
    .pstep:first-child { border-top: 0; }
    .readout .band { margin-left: 0; width: 100%; }
  }