/* /iv-how-long-results: its own sheet, loaded after site.css.
   One picture runs the page: eighteen months, drawn to scale. The hero lays
   the three windows on it, and the part below gives each of the five stages
   its own line on the same scale, so a six-week window looks like six weeks
   and a six-month one like six months. Nothing here draws a result going up
   or down: the drawings show WHEN, never how much.
   Script: scripts/iv-how-long-results.js. With that script absent every part
   is visible, every answer opens and every link still jumps. */

html:has(body.hlr) {
  --hc-nav-h: 64px;            /* fallback; the script sets the real header height */
  --hc-bar-h: 52px;
  /* every jump, anchor and Tab stop lands below the header and the bar */
  scroll-padding-top: calc(var(--hc-nav-h) + var(--hc-bar-h) + 12px);
}
.hlr {
  --hl-ease: cubic-bezier(.16, 1, .3, 1);
  --hl-gut: clamp(20px, 4vw, 56px);
  --hl-grid: rgba(11, 29, 58, .13);
}
/* Parts waiting to slide in sit a little to one side; clip keeps sticky working. */
.hlr main { overflow-x: clip; }

/* ============ GROUND RULES ============ */
.hl-wrap { max-width: calc(1240px + 2 * var(--hl-gut)); margin-inline: auto; padding-inline: var(--hl-gut); }
/* text fills its column; the column sets the measure */
.hlr main p { max-width: none; margin: 0; }
.hlr main a:not(.btn) { border-bottom: 0; }
.hlr main :is(ul, ol) { list-style: none; margin: 0; padding: 0; }
.hlr main h2 {
  font-family: var(--font-display); font-weight: 300; color: var(--ink);
  font-size: clamp(1.9rem, 3.3vw, 3rem); line-height: 1.1; letter-spacing: -.01em;
  margin: 0; max-width: none; text-wrap: wrap;
}
.hlr main h3 { font-family: var(--font-display); font-weight: 400; font-size: clamp(1.4rem, 1.9vw, 1.7rem); line-height: 1.15; letter-spacing: -.005em; color: var(--ink); margin: 0; max-width: none; }
.hlr main :is(a, button, summary):focus-visible { outline: 2px solid var(--accent-blue); outline-offset: 3px; border-radius: 4px; }
.hlr .hl-repeat :is(a, button):focus-visible { outline-color: var(--accent-ice); }
/* a part that receives focus after a jump is not itself a control */
.hlr main :is(h1, h2, h3, section)[tabindex="-1"]:focus { outline: none; }

/* a link to a neighbouring page, inside a sentence */
.hl-term { color: inherit; text-decoration: underline; text-decoration-color: var(--accent-blue); text-decoration-thickness: 1.5px; text-underline-offset: 4px; transition: color 200ms, text-decoration-color 200ms; }
.hl-term:hover { color: var(--accent-blue-hover); }
.hl-repeat .hl-term { text-decoration-color: var(--accent-ice); }
.hl-repeat .hl-term:hover { color: #fff; text-decoration-color: #fff; }

/* the onward link: the arrow leans the way it points */
.hl-go { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; font-size: 16px; font-weight: 600; color: var(--accent-blue-hover); text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 5px; transition: color 200ms, text-decoration-color 260ms; }
.hl-go span { display: inline-block; transition: transform 360ms var(--hl-ease); }
.hl-go:hover { color: var(--accent-blue); text-decoration-color: currentColor; }
.hl-go:hover span { transform: translateX(6px); }
.hl-go[href^="#"]:hover span { transform: translateY(4px) rotate(90deg); }

/* ============ REVEALS ============
   Hidden only once the script has said it is running (hl-js on <html>), so
   with no script nothing is ever hidden. Each part comes in its own way. */
.hl-js [data-r] { transition: opacity 620ms ease, transform 820ms var(--hl-ease); }
.hl-js [data-r]:not(.is-in) { opacity: 0; transform: translateY(18px); }
.hl-js [data-r="left"]:not(.is-in) { transform: translateX(-36px); }
.hl-js [data-r="right"]:not(.is-in) { transform: translateX(36px); }
.hl-js [data-r="right"] { transition-delay: calc(var(--n, 0) * 110ms); }
/* the scale is never hidden: its lines grow instead */
.hl-js [data-r="gantt"]:not(.is-in) { opacity: 1; transform: none; }

/* ============ THE SCALE ============
   Five ticks at their true places on eighteen months. Used under the hero's
   ruler and over the stages. */
.hl-scale { position: relative; height: 30px; }
.hlr main .hl-scale li {
  position: absolute; top: 0; left: calc(var(--m) / 18 * 100%); transform: translateX(-50%);
  padding-top: 12px; font-size: 13px; line-height: 18px; font-weight: 500; color: var(--ink-muted);
  white-space: nowrap; font-variant-numeric: lining-nums tabular-nums;
}
.hl-scale li::before { content: ""; position: absolute; top: 0; left: 50%; width: 1px; height: 8px; background: var(--ink); }
.hlr main .hl-scale li:first-child { transform: none; }
.hl-scale li:first-child::before { left: 0; }
.hlr main .hl-scale li:last-child { left: auto; right: 0; transform: none; }
.hl-scale li:last-child::before { left: auto; right: 0; }
.hl-ruler, .hl-gantt__axis > .hl-scale { container-type: inline-size; }
/* where the scale is short the unit is said once, at the end */
@container (max-width: 520px) { .hl-u:not(.hl-u--keep) { display: none; } }

/* the four kinds of line, the same in the hero and in the stages */
.hl-win--peak i, .hl-stage--peak .hl-stage__track i { background: var(--accent-blue); }
.hl-win--plateau i, .hl-stage--plateau .hl-stage__track i { background: var(--ink); }
.hl-win--decay i, .hl-stage--decay .hl-stage__track i {
  background: repeating-linear-gradient(135deg, var(--accent-blue) 0 2px, transparent 2px 8px);
  box-shadow: inset 0 0 0 1.5px var(--accent-blue);
}
.hl-stage--rise .hl-stage__track i { background: var(--accent-ice); }

/* ============ HERO ============ */
.hl-hero { padding-block: clamp(20px, 3vw, 40px) clamp(56px, 7vw, 104px); }
.hl-hero__h1 { font-family: var(--font-display); font-weight: 300; font-size: clamp(2.1rem, 4.3vw, 3.9rem); line-height: 1.06; letter-spacing: -.015em; color: var(--ink); margin: 0 0 clamp(28px, 4vw, 56px); max-width: none; text-wrap: wrap; }
/* a heading that has to wrap breaks where the styling changes */
.hl-hero__h1 > .h-lead, .hl-hero__h1 > em { display: inline-block; }
.hl-hero__h1 > em { color: var(--accent-blue); }
.hl-hero__row { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(36px, 6vw, 96px); align-items: center; }
.hl-hero__answer { font-size: clamp(1.12rem, 1.5vw, 1.3rem); line-height: 1.6; color: var(--ink); }
.hl-hero__act { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; margin-top: 28px; }
.hl-hero__rev { margin-top: 22px !important; font-size: 14px; line-height: 1.5; color: var(--ink-muted); }

.hl-ruler { margin: 0 0 4px; padding-left: 24px; }
.hl-ruler__track { position: relative; height: 176px; }
.hl-ruler__track::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--ink); transform-origin: left; }
.hl-win { position: absolute; bottom: 0; left: calc(var(--a) / 18 * 100%); width: calc((var(--b) - var(--a)) / 18 * 100%); display: flex; flex-direction: column; gap: 8px; }
.hl-win b { font-size: 17px; line-height: 22px; font-weight: 600; color: var(--ink); }
.hl-win--peak b { align-self: flex-end; }
.hl-win i { display: block; height: 84px; margin-right: 3px; border-radius: 3px 3px 0 0; transform-origin: left; }
.hl-win--decay i { margin-right: 0; }

/* the bag hangs over week 0 and its line runs down to the scale */
.hl-bag { position: absolute; left: -24px; bottom: 0; width: 48px; height: 136px; overflow: visible; }
.hl-bag :is(path, rect) { fill: none; stroke: var(--ink); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.hl-bag .hl-bag__body, .hl-bag .hl-bag__chamber { fill: #fff; }
.hl-bag .hl-bag__level { fill: var(--accent-wash); stroke: none; }
.hl-bag__drop { fill: var(--accent-blue); }

/* first paint: the scale is ruled, the bag is hung, the windows are laid on
   in order. Plain CSS, so it plays (and ends drawn) with scripts off too. */
@keyframes hl-rule { from { transform: scaleX(0); } }
@keyframes hl-hang { from { opacity: 0; transform: translateY(-14px); } }
@keyframes hl-name { from { opacity: 0; transform: translateY(6px); } }
@keyframes hl-tick { from { opacity: 0; } }
@keyframes hl-say { from { opacity: 0; transform: translateY(14px); } }
@keyframes hl-drip { 0% { transform: translateY(0); opacity: 0; } 18% { opacity: 1; } 70% { transform: translateY(9px); opacity: 1; } 100% { transform: translateY(9px); opacity: 0; } }
.hl-hero__say { animation: hl-say 700ms var(--hl-ease) both; }
.hl-ruler__track::after { animation: hl-rule 900ms var(--hl-ease) 150ms both; }
.hl-bag { animation: hl-hang 640ms var(--hl-ease) 350ms both; }
.hl-win i { animation: hl-rule 760ms var(--hl-ease) calc(520ms + var(--n) * 230ms) both; }
.hl-win b { animation: hl-name 520ms ease calc(640ms + var(--n) * 230ms) both; }
.hl-ruler .hl-scale li { animation: hl-tick 420ms ease calc(300ms + var(--m) * 45ms) both; }
/* the drop falls only while the ruler is on screen */
.hl-ruler.is-live .hl-bag__drop { animation: hl-drip 2.2s ease-in 1.6s infinite; }

/* ============ THE BAR THAT FOLLOWS THE READER ============ */
.hlr .hc-bar {
  /* under the phone menu's sheet (55) and backdrop (50), over the page */
  position: fixed; left: 0; right: 0; top: var(--hc-nav-h); z-index: 49;
  height: var(--hc-bar-h);
  background: rgba(255, 255, 255, .94);
  -webkit-backdrop-filter: saturate(180%) blur(12px); backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--border);
  transform: translateY(-8px); opacity: 0; visibility: hidden;
  transition: opacity 260ms, transform 360ms var(--hl-ease), visibility 0s 360ms;
}
.hlr .hc-bar.is-on { transform: none; opacity: 1; visibility: visible; transition: opacity 260ms, transform 360ms var(--hl-ease); }
body.hlr.nav-open .hc-bar { opacity: 0; visibility: hidden; }
.hlr .hc-bar__track {
  max-width: calc(1240px + 2 * var(--hl-gut)); margin: 0 auto; padding: 0 var(--hl-gut);
  height: 100%; display: flex; align-items: stretch; gap: clamp(18px, 2.4vw, 32px);
  overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain; scroll-padding-inline: 28px;
}
.hlr .hc-bar__track::-webkit-scrollbar { display: none; }
.hlr .hc-bar__track a {
  position: relative; flex: none; display: flex; align-items: center;
  font-size: 14px; font-weight: 500; color: var(--ink-muted); white-space: nowrap;
  transition: color 200ms;
}
.hlr .hc-bar__track a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
  background: var(--accent-blue); transform: scaleX(0); transform-origin: left;
  transition: transform 360ms var(--hl-ease);
}
.hlr .hc-bar__track a:hover, .hlr .hc-bar__track a[aria-current] { color: var(--ink); }
.hlr .hc-bar__track a:hover::after { transform: scaleX(.35); }
.hlr .hc-bar__track a[aria-current]::after { transform: scaleX(1); }
.hlr .hc-bar__track a:focus-visible { outline: 2px solid var(--accent-blue); outline-offset: -4px; border-radius: 4px; }
.hlr .hc-bar__progress {
  position: absolute; left: 0; top: 0; height: 2px; width: 100%;
  background: var(--accent-ice); transform-origin: left; transform: scaleX(var(--hc-p, 0));
}

/* ============ MONTH BY MONTH ============ */
.hl-months { padding-block: clamp(48px, 6vw, 96px) clamp(56px, 7vw, 112px); border-top: 1px solid var(--border); }
.hl-gantt { margin-top: clamp(28px, 4vw, 56px); }
.hl-gantt__axis, .hl-stage { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: clamp(32px, 5vw, 88px); }
.hl-gantt__axis > .hl-scale { grid-column: 2; }
/* the scale sits over the stages, so its ticks point down at them */
.hlr main .hl-gantt__axis .hl-scale li { padding: 0 0 12px; }
.hl-gantt__axis .hl-scale li::before { top: auto; bottom: 0; }
.hl-stage { position: relative; border-top: 1px solid var(--border); }
.hl-stages { border-bottom: 1px solid var(--border); }
.hl-stage__say { padding-block: 26px; padding-left: 18px; position: relative; }
.hl-stage__say::before { content: ""; position: absolute; left: 0; top: 26px; bottom: 26px; width: 3px; border-radius: 2px; background: var(--accent-blue); transform: scaleY(0); transform-origin: top; transition: transform 460ms var(--hl-ease); }
.hl-stage.is-now .hl-stage__say::before { transform: none; }
.hlr main .hl-stage__when { font-size: 15px; line-height: 1.4; font-weight: 600; color: var(--accent-blue-hover); margin-bottom: 4px; font-variant-numeric: lining-nums; }
.hlr main .hl-stage__say p:last-child { font-size: 17px; line-height: 1.6; color: var(--ink-soft); margin-top: 8px; }
.hl-stage__track {
  position: relative; align-self: stretch; min-height: 44px;
  background:
    linear-gradient(var(--hl-grid), var(--hl-grid)) 0 0 / 1px 100% no-repeat,
    linear-gradient(var(--hl-grid), var(--hl-grid)) calc(100% * 3 / 18) 0 / 1px 100% no-repeat,
    linear-gradient(var(--hl-grid), var(--hl-grid)) calc(100% * 6 / 18) 0 / 1px 100% no-repeat,
    linear-gradient(var(--hl-grid), var(--hl-grid)) calc(100% * 12 / 18) 0 / 1px 100% no-repeat,
    linear-gradient(var(--hl-grid), var(--hl-grid)) 100% 0 / 1px 100% no-repeat;
}
.hl-stage__track i {
  position: absolute; top: 50%; height: 28px; margin-top: -14px; border-radius: 3px;
  left: calc(var(--a) / 18 * 100%); width: calc((var(--b) - var(--a)) / 18 * 100%);
  transform-origin: left; transition: transform 900ms var(--hl-ease) calc(var(--n) * 150ms), opacity 400ms;
}
/* week 0 is a moment, not a span */
.hl-stage--start .hl-stage__track i { width: 16px; height: 16px; margin: -8px 0 0 -8px; border-radius: 50%; background: #fff; box-shadow: inset 0 0 0 3px var(--ink); transform-origin: center; }
.hl-js [data-r="gantt"]:is(:not(.is-in), .is-again) .hl-stage__track i { transform: scaleX(0); }
.hl-js [data-r="gantt"]:is(:not(.is-in), .is-again) .hl-stage--start .hl-stage__track i { transform: scale(0); }
.hl-js [data-r="gantt"].is-again .hl-stage__track i { transition: none; }
.hl-js [data-r="gantt"] .hl-stage__say { transition: opacity 560ms ease calc(var(--n) * 150ms), transform 760ms var(--hl-ease) calc(var(--n) * 150ms); }
.hl-js [data-r="gantt"]:not(.is-in) .hl-stage__say { opacity: 0; transform: translateY(14px); }
/* the stage being read keeps its full colour; the rest step back a little */
.hl-stages.is-led .hl-stage:not(.is-now) .hl-stage__track i { opacity: .42; }
.hl-months__on { margin-top: 28px; }

/* ============ WHY IT VARIES ============ */
.hl-why { background: var(--accent-wash); padding-block: clamp(56px, 7vw, 112px); }
.hl-factors { margin-top: clamp(28px, 4vw, 56px) !important; display: grid; gap: 14px; }
.hl-factor { display: grid; grid-template-columns: 72px minmax(0, 1fr) minmax(0, 300px); column-gap: clamp(20px, 3vw, 44px); align-items: center; padding: clamp(22px, 2.6vw, 34px) clamp(20px, 3vw, 40px); background: #fff; border-radius: var(--radius-lg); }
.hl-factor__icon { width: 72px; height: 72px; border-radius: 50%; background: var(--accent-wash); display: grid; place-items: center; }
.hl-factor__icon svg { overflow: visible; }
.hl-factor__icon path, .hl-factor__icon circle { fill: none; stroke: var(--ink); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 170; stroke-dashoffset: 0; transition: stroke-dashoffset 1300ms var(--hl-ease) 200ms; }
.hl-factor__icon .hl-fill { stroke: var(--accent-blue); }
.hl-factor__icon circle.hl-fill { fill: var(--accent-blue); }
.hl-factor__icon .hl-star { stroke: var(--accent-blue); }
.hl-factor__icon .hl-grain { stroke: var(--accent-blue); stroke-dasharray: 1.5 4; }
.hl-js .hl-factor:not(.is-in) .hl-factor__icon :is(path, circle):not(.hl-grain) { stroke-dashoffset: 170; }
.hlr main .hl-factor__say p { font-size: 17px; line-height: 1.65; color: var(--ink-soft); margin-top: 10px; }
.hlr main .hl-factor__reads { padding-left: clamp(20px, 3vw, 44px); border-left: 1px solid var(--border); }
.hl-factor__reads li { position: relative; padding: 7px 0 7px 22px; font-size: 15px; line-height: 1.45; color: var(--ink-soft); }
.hl-factor__reads li::before { content: ""; position: absolute; left: 0; top: 17px; width: 12px; height: 1.5px; background: var(--accent-blue); }
/* the two small loops run only while the list is on screen */
@keyframes hl-twinkle { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }
@keyframes hl-fall { to { stroke-dashoffset: -11; } }
.hl-factors.is-live .hl-factor.is-in .hl-star { animation: hl-twinkle 3.2s ease-in-out 1.6s infinite; }
.hl-factors.is-live .hl-factor.is-in .hl-star--b { animation-delay: 2.7s; }
.hl-factors.is-live .hl-factor.is-in .hl-grain { animation: hl-fall 1.1s linear infinite; }

/* ============ A REPEAT ============ */
.hl-repeat { background: var(--navy-brand); color: #fff; padding-block: clamp(56px, 7vw, 112px); }
.hlr main .hl-repeat h2 { color: #fff; }
.hl-repeat__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(36px, 6vw, 96px); align-items: start; margin-top: clamp(28px, 4vw, 56px); }
.hlr main .hl-repeat__say p { font-size: 18px; line-height: 1.7; color: rgba(255, 255, 255, .88); }
.hlr main .hl-repeat__say p + p { margin-top: 20px; }
.hl-signal { display: grid; grid-template-columns: 56px minmax(0, 1fr); column-gap: 24px; align-items: start; padding-block: 26px; border-top: 1px solid rgba(255, 255, 255, .2); }
.hl-signal:last-child { border-bottom: 1px solid rgba(255, 255, 255, .2); }
.hlr main .hl-signal h3 { color: #fff; }
.hlr main .hl-signal p { font-size: 17px; line-height: 1.6; color: rgba(255, 255, 255, .84); margin-top: 8px; }
.hl-signal__ic { overflow: visible; margin-top: 2px; }
.hl-signal__ic :is(path, rect, circle) { fill: none; stroke: var(--accent-ice); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.hl-signal__ic .hl-mark { stroke: #fff; stroke-width: 2.2; transition: opacity 500ms ease calc(500ms + var(--n) * 110ms), transform 700ms var(--hl-ease) calc(500ms + var(--n) * 110ms); transform-box: fill-box; transform-origin: center; }
.hl-signal__ic circle.hl-mark { fill: #fff; }
.hl-js .hl-signal:not(.is-in) .hl-mark { opacity: 0; transform: scale(.2); }
/* the bubble in the level settles, and goes on settling while it is watched */
@keyframes hl-settle { 0%, 100% { transform: translateX(-3px); } 50% { transform: translateX(3px); } }
.hl-signals.is-live .hl-signal.is-in .hl-bubble { animation: hl-settle 4.4s ease-in-out 1.4s infinite; }

/* ============ QUESTIONS ============ */
.hl-faq { padding-block: clamp(56px, 7vw, 112px); }
.hl-faq__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(28px, 6vw, 96px); align-items: start; }
.hl-faq__grid > h2 { position: sticky; top: calc(var(--hc-nav-h) + var(--hc-bar-h) + 28px); }
.hl-q { border-top: 1px solid var(--border-strong); }
.hl-q:last-child { border-bottom: 1px solid var(--border-strong); }
.hl-q summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: minmax(0, 1fr) 32px; column-gap: 20px; align-items: center; min-height: 72px; padding-block: 16px; font-family: var(--font-display); font-size: clamp(1.3rem, 1.8vw, 1.6rem); line-height: 1.2; color: var(--ink); transition: color 200ms; }
.hl-q summary::-webkit-details-marker { display: none; }
.hl-q summary:hover { color: var(--accent-blue-hover); }
.hl-q__ic { position: relative; width: 32px; height: 32px; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--border-strong); transition: box-shadow 200ms, background-color 200ms, transform 420ms var(--hl-ease); }
.hl-q__ic::before, .hl-q__ic::after { content: ""; position: absolute; left: 10px; right: 10px; top: 50%; height: 1.5px; margin-top: -.75px; background: currentColor; transition: transform 420ms var(--hl-ease); }
.hl-q__ic::after { transform: rotate(90deg); }
.hl-q summary:hover .hl-q__ic { box-shadow: inset 0 0 0 1.5px var(--accent-blue); }
.hl-q[open] .hl-q__ic { background: var(--accent-wash); transform: rotate(180deg); }
.hl-q[open] .hl-q__ic::after { transform: rotate(0deg); }
.hlr main .hl-q__a p { font-size: 17px; line-height: 1.7; color: var(--ink-soft); padding: 0 52px 26px 0; }
@keyframes hl-unfold { from { opacity: 0; transform: translateY(-8px); } }
.hl-q[open] .hl-q__a { animation: hl-unfold 420ms var(--hl-ease) both; }

/* ============ THE CALL, AND WHERE NEXT ============ */
.hl-end { padding-block: clamp(48px, 6vw, 96px) clamp(64px, 8vw, 120px); border-top: 1px solid var(--border); }
.hl-end__grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(36px, 6vw, 96px); align-items: start; }
.hlr main .hl-end__call p { font-size: 18px; line-height: 1.7; color: var(--ink-soft); margin: 20px 0 28px; }
.hlr main .hl-end__call .hl-end__fine { font-size: 14px; line-height: 1.5; color: var(--ink-muted); margin: 18px 0 0; }
.hlr main .hl-next h3 { font-family: var(--font-body); font-size: 15px; font-weight: 600; letter-spacing: 0; color: var(--ink-muted); margin-bottom: 12px; }
.hl-next li { border-top: 1px solid var(--border); }
.hl-next li:last-child { border-bottom: 1px solid var(--border); }
.hl-next a { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 60px; padding-block: 12px; font-size: 18px; font-weight: 500; color: var(--ink); text-decoration: none; transition: color 200ms, padding 360ms var(--hl-ease); }
.hl-next a i { font-style: normal; color: var(--accent-blue); transition: transform 360ms var(--hl-ease); }
.hl-next a:hover { color: var(--accent-blue-hover); }
.hl-next a:hover i { transform: translateX(6px); }
.hl-next__up a { justify-content: flex-start; font-size: 16px; color: var(--ink-soft); min-height: 52px; }
.hl-next__up a:hover i { transform: translateX(-6px); }

/* ============ NARROWER ============ */
@media (max-width: 1100px) {
  .hl-factor { grid-template-columns: 72px minmax(0, 1fr); }
  .hlr main .hl-factor__reads { grid-column: 2; display: flex; flex-wrap: wrap; gap: 0 28px; padding: 12px 0 0; border-left: 0; }
  .hl-factor { align-items: start; }
}
@media (max-width: 900px) {
  .hl-hero__row, .hl-repeat__grid, .hl-faq__grid, .hl-end__grid { grid-template-columns: minmax(0, 1fr); }
  .hl-hero__row { align-items: start; }
  .hl-faq__grid > h2 { position: static; }
  .hlr .hc-bar__track { -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 16px, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(90deg, transparent 0, #000 16px, #000 calc(100% - 28px), transparent); }
}
@media (max-width: 760px) {
  .hl-gantt__axis, .hl-stage { grid-template-columns: minmax(0, 1fr); }
  .hl-gantt__axis > .hl-scale { grid-column: 1; margin-left: 18px; }
  .hl-stage__say { padding-block: 22px 12px; }
  .hl-stage__say::before { top: 22px; bottom: 12px; }
  .hl-stage__track { min-height: 34px; margin: 0 0 20px 18px; }
  .hl-stage__track i { height: 18px; margin-top: -9px; }
}
@media (max-width: 560px) {
  html:has(body.hlr) { --hc-bar-h: 48px; }
  .hlr .hc-bar__track { gap: 22px; }
  .hl-hero__act .btn, .hl-end__call .btn { width: 100%; }
  .hl-ruler__track { height: 150px; }
  .hl-win i { height: 56px; }
  .hl-win b { font-size: 15px; }
  .hl-ruler { padding-left: 20px; }
  .hl-bag { left: -20px; width: 40px; height: 113px; }
  .hl-signal { grid-template-columns: 48px minmax(0, 1fr); }
  .hl-signal__ic { width: 48px; height: 48px; }
  .hl-factor { grid-template-columns: 52px minmax(0, 1fr); column-gap: 16px; }
  .hl-factor__icon { width: 52px; height: 52px; }
  .hl-factor__icon svg { width: 32px; height: 32px; }
  .hlr main .hl-factor__reads { display: block; }
  .hl-signal { column-gap: 16px; }
  .hlr main .hl-q__a p { padding-right: 0; }
  .hl-q summary { min-height: 64px; }
}

/* ============ STILL ============
   Reduced motion: every drawing holds its finished state and nothing moves. */
@media (prefers-reduced-motion: reduce) {
  .hlr main *, .hlr main *::before, .hlr main *::after { animation: none !important; transition: none !important; }
  .hl-js [data-r]:not(.is-in), .hl-js [data-r="gantt"]:not(.is-in) .hl-stage__say { opacity: 1 !important; transform: none !important; }
  .hl-js [data-r="gantt"]:not(.is-in) .hl-stage__track i { transform: none !important; }
  .hl-js .hl-factor:not(.is-in) .hl-factor__icon :is(path, circle) { stroke-dashoffset: 0 !important; }
  .hl-js .hl-signal:not(.is-in) .hl-mark { opacity: 1 !important; transform: none !important; }
  .hl-stages.is-led .hl-stage:not(.is-now) .hl-stage__track i { opacity: 1 !important; }
  .hlr .hc-bar { transition: none !important; }
  .hl-go:hover span, .hl-next a:hover i { transform: none; }
}

/* Paper is taken the instant the print dialog opens: nothing may still be
   fading or sliding in, every answer is open and the navy band prints dark on white. */
@media print {
  .hlr main *, .hlr main *::before, .hlr main *::after { animation: none !important; transition: none !important; }
  .hlr .hc-bar { display: none !important; }
  .hl-js [data-r], .hl-js [data-r="gantt"] .hl-stage__say { opacity: 1 !important; transform: none !important; }
  .hl-js [data-r="gantt"] .hl-stage__track i { transform: none !important; opacity: 1 !important; }
  .hl-js .hl-factor .hl-factor__icon :is(path, circle) { stroke-dashoffset: 0 !important; }
  .hl-js .hl-signal .hl-mark { opacity: 1 !important; transform: none !important; }
  .hl-stage__say::before, .hl-q__ic { display: none !important; }
  .hl-q::details-content { content-visibility: visible; display: block; height: auto; }
  .hl-repeat, .hl-why { background: #fff !important; }
  .hl-factor { border: 1px solid var(--border-strong); break-inside: avoid; }
  .hl-repeat *, .hlr main .hl-repeat h2 { color: var(--ink) !important; }
  .hl-signal, .hl-signal:last-child { border-color: var(--border-strong); }
  .hl-signal__ic :is(path, rect, circle) { stroke: var(--ink); }
  .hl-signal__ic circle.hl-mark { fill: var(--ink); }
  .hl-faq__grid > h2 { position: static; }
  .hlr main * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}