/* /learn-hospital-setting-meaning: its own sheet, loaded after site.css.
   One idea runs the page: a phrase from a clinic's website, read against a
   license. The hero reads five of them aloud, the building shows the four
   things the phrase has to mean, and the navy band puts 60 seconds and 40
   minutes on one clock. Three colours are a key, used the same way
   everywhere: blue can be verified, slate is ambiguous, brick is not the
   same thing. Script: scripts/learn-hospital-setting-meaning.js. With that
   script absent every part is visible and every link still jumps. */

html:has(body.hsm) {
  --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);
}
.hsm {
  --hs-pass: var(--accent-blue);
  --hs-pass-ink: var(--accent-blue-hover);
  --hs-weak: var(--ink-muted);
  --hs-fail: #8a3a3a;
  --hs-fail-soft: #e89b9b;      /* the same, on navy */
  --hs-ease: cubic-bezier(.16, 1, .3, 1);
  --hs-gut: clamp(20px, 4vw, 56px);
}

/* ============ GROUND RULES ============ */
.hs-wrap { max-width: calc(1240px + 2 * var(--hs-gut)); margin-inline: auto; padding-inline: var(--hs-gut); }
/* text fills its column; the column sets the measure */
.hsm main p { max-width: none; margin: 0; text-wrap: wrap; }
.hsm main a:not(.btn) { border-bottom: 0; }
.hsm main :is(ul, ol) { list-style: none; margin: 0; padding: 0; }
.hsm 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;
}
.hsm main h3 { font-family: var(--font-display); font-weight: 400; color: var(--ink); margin: 0; max-width: none; letter-spacing: -.005em; }
.hsm main :is(em, q) { font-style: normal; }
.hsm main p em { font-style: italic; }
.hsm main q { quotes: "\201C" "\201D"; }
.hsm main :is(a, button, summary):focus-visible { outline: 2px solid var(--accent-blue); outline-offset: 3px; border-radius: 4px; }
.hsm .hs-chart :is(a, summary):focus-visible { outline-color: var(--accent-ice); }
/* a part that receives focus after a jump is not itself a control */
.hsm main :is(h1, h2, h3, section)[tabindex="-1"]:focus { outline: none; }

/* drawings share one pen */
.hsm main svg { overflow: visible; }
.hs-ink { fill: none; stroke: var(--ink); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.hs-ink--thin { stroke: var(--border-strong); stroke-width: 1.4; }
.hs-ink--dash { stroke: var(--ink-muted); stroke-width: 1.4; stroke-dasharray: 3 5; }
.hs-fillw { fill: #fff; }

/* a term defined elsewhere on the site */
.hs-term { color: inherit; text-decoration: underline dotted; text-decoration-color: var(--accent-blue); text-decoration-thickness: 1.5px; text-underline-offset: 4px; transition: color 200ms, text-decoration-color 200ms; }
.hs-term:hover { color: var(--accent-blue-hover); text-decoration-style: solid; }
.hs-chart .hs-term { text-decoration-color: var(--accent-ice); }
.hs-chart .hs-term:hover { color: #fff; }
/* a source to check for yourself */
.hs-celva a { color: var(--accent-blue-hover); font-weight: 600; text-decoration: underline; text-decoration-color: rgba(45, 110, 177, .4); text-underline-offset: 4px; transition: color 200ms, text-decoration-color 200ms; }
.hs-celva a:hover { color: var(--accent-blue); text-decoration-color: currentColor; }

/* the onward link: the arrow leans the way it points */
.hs-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; }
.hs-go span { display: inline-block; transition: transform 360ms var(--hs-ease); }
.hs-go:hover { color: var(--accent-blue); text-decoration-color: currentColor; }
.hs-go:hover span { transform: translateX(6px); }
.hs-go--back:hover span { transform: translateX(-6px); }

/* the three verdicts */
.hs-verdict { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 600; line-height: 1.2; white-space: nowrap; }
.hs-verdict svg { flex: none; width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.hs-verdict .hs-verdict__half { fill: currentColor; stroke: none; }
[data-v="weak"] .hs-verdict { color: var(--hs-weak); }
[data-v="fail"] .hs-verdict { color: var(--hs-fail); }
[data-v="pass"] .hs-verdict { color: var(--hs-pass-ink); }

/* ============ REVEALS ============
   Hidden only once the script has said it is running (hs-js on <html>), so
   with no script nothing is ever hidden. Each part comes in its own way. */
.hs-js [data-r] { transition: opacity 620ms ease, transform 820ms var(--hs-ease); }
.hs-js [data-r]:not(.is-in) { opacity: 0; transform: translateY(18px); }
.hs-js [data-r="left"]:not(.is-in) { transform: translateX(-32px); }
.hs-js [data-r="right"]:not(.is-in) { transform: translateX(32px); }
/* these keep their box and animate what is inside them */
.hs-js :is([data-r="three"], [data-r="row"], [data-r="bldg"], [data-r="tiers"], [data-r="call"]):not(.is-in) { opacity: 1; transform: none; }

@keyframes hs-up { from { opacity: 0; transform: translateY(22px); } }
@keyframes hs-rise { from { opacity: 0; transform: translateY(14px); } }
@keyframes hs-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes hs-pop { from { transform: scale(0); opacity: 0; } 70% { transform: scale(1.18); opacity: 1; } }
@keyframes hs-say { from { opacity: 0; transform: translateY(10px); filter: blur(4px); } }
@keyframes hs-count { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes hs-grow { from { opacity: 0; transform: scaleY(.55); } }
@keyframes hs-settle { 40% { transform: translateY(-6px); } }
@keyframes hs-blink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: .25; } }
@keyframes hs-beat { from { stroke-dashoffset: 1; } 60%, to { stroke-dashoffset: 0; } }
@keyframes hs-ride { from { transform: translateY(0); } to { transform: translateY(104px); } }
@keyframes hs-ring { 0%, 100% { transform: rotate(0); } 20% { transform: rotate(-9deg); } 40% { transform: rotate(7deg); } 60% { transform: rotate(-5deg); } 80% { transform: rotate(3deg); } }
@keyframes hs-unfold { from { opacity: 0; transform: translateY(-8px); } }

/* ============ HERO ============ */
.hs-hero { padding-block: clamp(36px, 5vw, 72px) clamp(48px, 6vw, 88px); }
.hs-hero__h1 { font-family: var(--font-display); font-weight: 300; font-size: clamp(1.85rem, 4.3vw, 3.9rem); line-height: 1.08; 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 */
.hs-hero__h1 > span { display: inline-block; }
.hsm .hs-hero__h1 em { font-style: normal; font-weight: 300; color: var(--accent-blue); }
.hs-hero__row { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(32px, 5vw, 88px); align-items: start; }
.hs-hero__answer { font-size: clamp(1.12rem, 1.5vw, 1.32rem); line-height: 1.6; color: var(--ink); }
.hs-toc { margin-top: clamp(20px, 2.4vw, 32px) !important; border-top: 1px solid var(--border); }
.hs-toc a { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 48px; padding: 8px 0; border-bottom: 1px solid var(--border) !important; font-size: 16px; font-weight: 500; line-height: 1.4; color: var(--ink-soft); transition: color 200ms, padding-left 360ms var(--hs-ease); }
.hs-toc a span { flex: none; color: var(--accent-blue-hover); transition: transform 360ms var(--hs-ease); }
.hs-toc a:hover { color: var(--accent-blue-hover); padding-left: 8px; }
.hs-toc a:hover span { transform: translateY(4px) rotate(90deg); }
.hs-reviewed { margin-top: 18px !important; font-size: 14px; color: var(--ink-muted); }

/* the five lines. A plain list until the script runs; then one at a time. */
.hs-check { min-width: 0; }
.hs-line { padding-block: 14px; }
.hs-line + .hs-line { border-top: 1px solid var(--border); }
.hs-line q { display: block; font-family: var(--font-display); font-weight: 300; font-size: 1.35rem; line-height: 1.25; color: var(--ink); }
.hs-line__rule { display: block; width: 100%; height: 12px; margin: 6px 0 10px; }
.hs-line__rule path { fill: none; stroke-width: 2; stroke-linecap: round; vector-effect: non-scaling-stroke; }
[data-v="weak"] .hs-line__rule path { stroke: var(--hs-weak); }
[data-v="fail"] .hs-line__rule path { stroke: var(--hs-fail); stroke-dasharray: .03 .03; }
[data-v="pass"] .hs-line__rule path { stroke: var(--hs-pass); }

.hs-js .hs-check__lines { display: grid; }
.hs-js .hs-line { grid-area: 1 / 1; display: grid; grid-template-rows: 1fr auto auto; padding-block: 0; border: 0; visibility: hidden; opacity: 0; transition: opacity 240ms, visibility 0s 240ms; }
.hs-js .hs-line.is-on { visibility: visible; opacity: 1; transition: opacity 240ms; }
.hs-js .hs-line q { align-self: stretch; font-size: clamp(1.55rem, 2.5vw, 2.2rem); line-height: 1.2; }
.hs-js .hs-line .hs-verdict { justify-self: start; }
.hs-js .hs-line.is-on q { animation: hs-say 520ms var(--hs-ease) both; }
.hs-js .hs-line__rule { margin: 18px 0 14px; }
.hs-js .hs-line[data-v="weak"] .hs-line__rule path, .hs-js .hs-line[data-v="pass"] .hs-line__rule path { stroke-dasharray: 1; stroke-dashoffset: 1; }
.hs-js .hs-line.is-on[data-v="weak"] .hs-line__rule path, .hs-js .hs-line.is-on[data-v="pass"] .hs-line__rule path { animation: hs-draw 700ms var(--hs-ease) 380ms both; }
.hs-js .hs-line[data-v="fail"] .hs-line__rule { transform-origin: left; }
.hs-js .hs-line.is-on[data-v="fail"] .hs-line__rule { animation: hs-count 700ms var(--hs-ease) 380ms both; }
.hs-js .hs-line .hs-verdict { font-family: var(--font-display); font-weight: 400; font-size: clamp(1.3rem, 1.9vw, 1.6rem); gap: 14px; }
.hs-js .hs-line .hs-verdict svg { width: 52px; height: 52px; stroke-width: 1.5; }
/* the line sits in a browser window, the way a reader meets it */
.hs-js .hs-line q { padding: 58px clamp(18px, 2.2vw, 30px) 26px; border: 1px solid var(--border-strong); border-radius: 12px; background: linear-gradient(var(--border), var(--border)) 0 36px / 100% 1px no-repeat, radial-gradient(circle at 18px 18px, var(--border-strong) 4px, transparent 4.5px), radial-gradient(circle at 34px 18px, var(--border-strong) 4px, transparent 4.5px), radial-gradient(circle at 50px 18px, var(--border-strong) 4px, transparent 4.5px), #fff; box-shadow: 0 24px 48px -36px rgba(11, 29, 58, .45); }
.hs-js .hs-line.is-on .hs-verdict { animation: hs-rise 520ms var(--hs-ease) 900ms both; }
.hs-js .hs-line.is-on[data-v="pass"] .hs-verdict path { stroke-dasharray: 1; animation: hs-draw 420ms var(--hs-ease) 1100ms both; }

.hs-check__picks { display: flex; gap: 6px; margin-top: 18px; }
.hs-pick { position: relative; flex: 1; height: 44px; padding: 0; border: 0; background: none; cursor: pointer; }
.hs-pick::before, .hs-pick::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 3px; margin-top: -1.5px; border-radius: 2px; }
.hs-pick::before { background: var(--border-strong); transition: background-color 200ms, height 200ms, margin 200ms; }
.hs-pick::after { background: var(--accent-blue); transform: scaleX(0); transform-origin: left; }
.hs-pick:hover::before { background: var(--ink-muted); height: 5px; margin-top: -2.5px; }
.hs-pick[aria-pressed="true"]::after { transform: scaleX(1); }
/* while the lines are being read out, the current one counts down */
.hs-check.is-auto .hs-pick[aria-pressed="true"]::after { animation: hs-count var(--hs-dwell, 3400ms) linear both; }
.hs-check.is-held .hs-pick[aria-pressed="true"]::after { animation-play-state: paused; }

/* first paint: the question, the answer, then the first line is read */
.hs-js .hs-hero__h1 > span { animation: hs-up 900ms var(--hs-ease) both; }
.hs-js .hs-hero__h1 > .h-tail { animation-delay: 110ms; }
.hs-js .hs-hero__text > * { animation: hs-up 900ms var(--hs-ease) 240ms both; }
.hs-js .hs-toc li { animation: hs-rise 700ms var(--hs-ease) both; animation-delay: calc(420ms + var(--n, 0) * 70ms); }
.hs-js .hs-check { animation: hs-rise 800ms var(--hs-ease) 380ms both; }

/* ============ CONTENTS BAR (follows the reader) ============ */
.hsm .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(--hs-ease), visibility 0s 360ms;
}
.hsm .hc-bar.is-on { transform: none; opacity: 1; visibility: visible; transition: opacity 260ms, transform 360ms var(--hs-ease); }
body.hsm.nav-open .hc-bar { opacity: 0; visibility: hidden; }
.hsm .hc-bar__track {
  max-width: calc(1240px + 2 * var(--hs-gut)); margin: 0 auto; padding: 0 var(--hs-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;
}
.hsm .hc-bar__track::-webkit-scrollbar { display: none; }
.hsm .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;
}
.hsm .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(--hs-ease);
}
.hsm .hc-bar__track a:hover, .hsm .hc-bar__track a[aria-current] { color: var(--ink); }
.hsm .hc-bar__track a:hover::after { transform: scaleX(.35); }
.hsm .hc-bar__track a[aria-current]::after { transform: scaleX(1); }
.hsm .hc-bar__track a:focus-visible { outline: 2px solid var(--accent-blue); outline-offset: -4px; border-radius: 4px; }
.hsm .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));
}

/* ============ THE PHRASES ============ */
.hs-phr { padding-block: clamp(48px, 6vw, 96px); border-top: 1px solid var(--border); }
.hs-phr__intro { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: clamp(28px, 5vw, 80px); align-items: center; margin-top: clamp(24px, 3vw, 44px); }
.hs-phr__text p { font-size: 18px; line-height: 1.7; color: var(--ink-soft); }
.hs-phr__text p + p { margin-top: 18px !important; }
.hs-three { display: block; width: 100%; height: auto; }
.hs-three__ground { fill: none; stroke: var(--border-strong); stroke-width: 1.4; stroke-linecap: round; }
.hs-clinic { fill: var(--accent-wash); stroke: var(--accent-blue); stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.hs-clinic--dash { stroke-dasharray: 4 5; }
.hs-clinic--fill { fill: var(--accent-blue); fill-opacity: .16; }
.hs-cal { fill: #fff; stroke: var(--ink-muted); stroke-width: 1.4; stroke-linejoin: round; stroke-linecap: round; }
.hs-cal__day { fill: var(--accent-blue); }
.hs-tag { fill: #fff; stroke: var(--ink-muted); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; transform-box: fill-box; transform-origin: 50% 100%; }
/* the buildings arrive one by one; then the same words land on each */
.hs-js .hs-three:not(.is-in) .hs-three__one { opacity: 0; }
.hs-js .hs-three.is-in .hs-three__one { animation: hs-rise 700ms var(--hs-ease) both; animation-delay: calc(var(--i) * 220ms); }
.hs-js .hs-three.is-in .hs-tag { animation: hs-pop 460ms var(--hs-ease) both; animation-delay: calc(900ms + var(--i) * 160ms); }
.hs-phr__note { margin-top: clamp(28px, 4vw, 52px) !important; padding-top: clamp(20px, 2.4vw, 28px); border-top: 1px solid var(--border-strong); font-size: 17px; line-height: 1.65; color: var(--ink-soft); }

.hs-rows { margin-top: clamp(8px, 1.4vw, 16px) !important; }
.hs-row { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 12px clamp(28px, 5vw, 80px); align-items: start; padding-block: clamp(22px, 2.6vw, 34px); border-bottom: 1px solid var(--border); }
.hs-row__say q { display: block; margin-bottom: 14px; font-family: var(--font-display); font-weight: 300; font-size: clamp(1.45rem, 2.2vw, 1.95rem); line-height: 1.28; color: var(--ink); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 7px; transition: text-decoration-color 700ms ease 260ms; }
[data-v="weak"] .hs-row__say q { text-decoration-style: wavy; text-decoration-color: var(--hs-weak); text-decoration-thickness: 1.5px; }
[data-v="fail"] .hs-row__say q { text-decoration-style: dashed; text-decoration-color: var(--hs-fail); }
[data-v="pass"] .hs-row__say q { text-decoration-color: var(--hs-pass); }
.hs-row > p { font-size: 16.5px; line-height: 1.7; color: var(--ink-soft); }
.hs-row > p strong { font-weight: 600; color: var(--ink); }
/* each line is read, then judged: the words, the rule under them, the verdict */
.hs-js .hs-row[data-r] > * { transition: opacity 620ms ease, transform 820ms var(--hs-ease); }
.hs-js .hs-row[data-r]:not(.is-in) > * { opacity: 0; transform: translateY(16px); }
.hs-js .hs-row[data-r]:not(.is-in) .hs-row__say q { text-decoration-color: transparent; }
.hs-js .hs-row[data-r] > p { transition-delay: 140ms; }
.hs-js .hs-row[data-r] .hs-verdict { transition: opacity 500ms ease 620ms, transform 620ms var(--hs-ease) 620ms; }
.hs-js .hs-row[data-r]:not(.is-in) .hs-verdict { opacity: 0; transform: translateX(-10px); }

/* native "Read more": opened for print, found by in-page search */
.hs-more { margin-top: 10px; }
.hs-more > summary { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; cursor: pointer; list-style: none; font-size: 16px; font-weight: 600; color: var(--accent-blue-hover); transition: color 200ms; }
.hs-more > summary::-webkit-details-marker { display: none; }
.hs-more > summary::after { content: ""; width: 9px; height: 9px; margin-top: -4px; border-right: 2px solid; border-bottom: 2px solid; transform: rotate(45deg); transition: transform 360ms var(--hs-ease); }
.hs-more > summary:hover { color: var(--accent-blue); }
.hs-more > summary:hover::after { transform: translateY(3px) rotate(45deg); }
.hs-more[open] > summary::after { margin-top: 4px; transform: rotate(-135deg); }
.hs-more[open] > summary:hover::after { transform: translateY(-3px) rotate(-135deg); }
.hs-more__shut, .hs-more[open] .hs-more__open { display: none; }
.hs-more[open] .hs-more__shut { display: inline; }
.hs-more[open] > :not(summary) { animation: hs-unfold 420ms var(--hs-ease); }
.hs-rows--more { margin-top: 0 !important; border-top: 1px solid var(--border); }
.hs-rows--more .hs-row:last-child { border-bottom: 0; }

/* ============ FOUR THINGS IT HAS TO MEAN ============ */
.hs-four { padding-block: clamp(56px, 7vw, 104px); border-top: 1px solid var(--border); }
.hs-four__lede { margin-top: clamp(16px, 2vw, 24px) !important; font-size: 18px; line-height: 1.7; color: var(--ink-soft); }
.hs-four__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 5vw, 88px); align-items: start; margin-top: clamp(28px, 4vw, 56px); }
.hs-bldg { margin: 0; position: sticky; top: calc(var(--hc-nav-h) + var(--hc-bar-h) + 28px); }
.hs-bldg svg { display: block; width: 100%; height: auto; max-height: calc(100vh - var(--hc-nav-h) - var(--hc-bar-h) - 64px); }
.hs-part { transition: opacity 420ms ease; }
.hs-part :is(.hs-ink, .hs-tick, .hs-seal, .hs-shaft, .hs-beat) { transition: stroke 420ms ease, fill 420ms ease; }
.hs-part .hs-ink { stroke: var(--accent-blue-hover); }
.hs-part .hs-ink--thin { stroke: var(--accent-ice); }
.hs-part__wash { fill: var(--accent-wash); stroke: none; transition: opacity 420ms ease; }
.hs-seal { fill: var(--accent-blue); stroke: none; }
.hs-tick, .hs-beat { fill: none; stroke: var(--accent-blue); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.hs-shaft { fill: none; stroke: var(--accent-blue); stroke-width: 2; stroke-dasharray: 2 7; stroke-linecap: round; }
.hs-folder { transform: translateY(104px); }
/* led by the list beside it: the criterion being read is drawn in, the rest wait in grey */
.hs-bldg.is-led .hs-part:not(.is-lit) :is(.hs-ink, .hs-tick, .hs-beat, .hs-shaft) { stroke: var(--border-strong); }
.hs-bldg.is-led .hs-part:not(.is-lit) .hs-seal { fill: var(--border-strong); }
.hs-bldg.is-led .hs-part:not(.is-lit) .hs-part__wash { opacity: 0; }
.hs-bldg.is-led .hs-part[data-part="4"]:not(.is-lit) .hs-folder { transform: none; }
.hs-bldg.is-led .hs-part.is-lit .hs-tick { stroke-dasharray: 1; animation: hs-draw 420ms var(--hs-ease) both; animation-delay: calc(var(--i) * 160ms); }
.hs-bldg.is-led .hs-part.is-lit .hs-beat { stroke-dasharray: 1; animation: hs-beat 1.8s linear infinite; }
.hs-bldg.is-led .hs-part.is-lit .hs-seal { transform-box: fill-box; transform-origin: center; animation: hs-pop 460ms var(--hs-ease) both; }
.hs-bldg.is-led .hs-part.is-lit .hs-folder { animation: hs-ride 1300ms var(--hs-ease) 200ms both; }
.hs-js .hs-bldg:not(.is-in) svg { opacity: 0; transform: translateY(18px); }
.hs-js .hs-bldg svg { transition: opacity 620ms ease, transform 820ms var(--hs-ease); }

.hs-crit__item { position: relative; padding: 0 0 clamp(28px, 3.4vw, 44px) clamp(20px, 2.4vw, 32px); }
.hs-crit__item + .hs-crit__item { padding-top: clamp(28px, 3.4vw, 44px); border-top: 1px solid var(--border); }
.hs-crit__item::before { content: ""; position: absolute; left: 0; top: 4px; bottom: clamp(28px, 3.4vw, 44px); width: 3px; border-radius: 2px; background: var(--accent-blue); transform: scaleY(0); transform-origin: top; transition: transform 620ms var(--hs-ease); }
.hs-crit__item + .hs-crit__item::before { top: calc(clamp(28px, 3.4vw, 44px) + 4px); }
.hs-crit__item.is-lit::before { transform: scaleY(1); }
.hsm .hs-crit h3 { font-size: clamp(1.5rem, 2.3vw, 2rem); font-weight: 300; line-height: 1.2; margin-bottom: 12px; transition: color 320ms; }
.hsm .hs-crit__item.is-lit h3 { color: var(--accent-blue-hover); }
.hs-crit__item > p { font-size: 16.5px; line-height: 1.7; color: var(--ink-soft); }
.hs-crit__item > p strong { font-weight: 600; color: var(--ink); }
.hsm .hs-celva { margin-top: 16px; padding-top: 14px; border-top: 1px dashed var(--border-strong); color: var(--ink); }
.hs-celva b { margin-right: 6px; font-weight: 700; color: var(--accent-blue-hover); }
.hs-four__close { margin-top: clamp(8px, 1.4vw, 16px) !important; padding-top: clamp(24px, 3vw, 36px); border-top: 1px solid var(--border-strong); font-family: var(--font-display); font-weight: 300; font-size: clamp(1.3rem, 2vw, 1.7rem); line-height: 1.4; color: var(--ink); }
.hs-four .hs-go { margin-top: 12px; }

/* ============ LICENSE CATEGORIES ============ */
.hs-lic { padding-block: clamp(56px, 7vw, 104px); border-top: 1px solid var(--border); }
.hs-lic__head p { margin-top: clamp(16px, 2vw, 24px) !important; font-size: 18px; line-height: 1.7; color: var(--ink-soft); }
.hs-tiers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: auto auto auto 1fr; gap: 0 clamp(20px, 3vw, 48px); margin-top: clamp(20px, 3vw, 40px) !important; }
.hs-tier { display: grid; grid-row: span 4; grid-template-rows: subgrid; }
.hs-tier__art { display: block; width: 100%; max-width: 210px; height: auto; margin-bottom: 18px; }
.hs-tier__b { transform-box: fill-box; transform-origin: 50% 100%; }
.hs-tier--top .hs-tier__b .hs-ink { stroke: var(--accent-blue-hover); }
.hs-tier--top .hs-cross { transform-box: fill-box; transform-origin: 50% 100%; }
.hsm .hs-tier h3 { font-size: clamp(1.5rem, 2.2vw, 1.9rem); font-weight: 300; line-height: 1.2; }
.hsm .hs-tier h3 span { display: block; margin-top: 4px; font-family: var(--font-body); font-size: 15px; font-weight: 400; letter-spacing: 0; color: var(--ink-muted); }
.hsm .hs-tier__is { margin: 12px 0 10px; font-size: 15px; font-weight: 600; color: var(--hs-fail); }
.hsm .hs-tier:nth-child(2) .hs-tier__is { color: var(--hs-weak); }
.hsm .hs-tier--top .hs-tier__is { color: var(--hs-pass-ink); }
.hs-tier > p:last-child { font-size: 16px; line-height: 1.7; color: var(--ink-soft); }
.hs-tier > p strong { font-weight: 600; color: var(--ink); }
/* three licenses, three sizes of building: each stands up from the ground in turn */
.hs-js .hs-tiers:not(.is-in) .hs-tier > * { opacity: 0; }
.hs-js .hs-tiers:not(.is-in) .hs-tier > .hs-tier__art { opacity: 1; }
.hs-js .hs-tiers:not(.is-in) .hs-tier__b { opacity: 0; }
.hs-js .hs-tiers.is-in .hs-tier__b { animation: hs-grow 820ms var(--hs-ease) both; animation-delay: calc(var(--i) * 240ms); }
.hs-js .hs-tiers.is-in .hs-cross { animation: hs-pop 520ms var(--hs-ease) 1200ms both; }
.hs-js .hs-tiers.is-in .hs-tier > :not(svg) { animation: hs-rise 700ms var(--hs-ease) both; animation-delay: calc(260ms + var(--i) * 240ms); }

/* ============ ADMITTED OR TRANSFERRED ============ */
.hs-chart { background: var(--ink); color: #fff; padding-block: clamp(56px, 7vw, 104px); --a: var(--accent-ice); --b: var(--hs-fail-soft); }
.hsm .hs-chart h2 { color: #fff; }
.hs-chart__lede { margin-top: clamp(16px, 2vw, 24px) !important; font-size: 18px; line-height: 1.7; color: rgba(255, 255, 255, .84); }
.hs-clock { margin-top: clamp(36px, 5vw, 64px); padding: 62px 86px 0 0; }
.hs-clock__lane { position: relative; height: 6px; margin-bottom: 58px; border-radius: 3px; background: rgba(255, 255, 255, .14); --lane: var(--a); }
.hs-clock__lane--b { --lane: var(--b); }
/* the first lane is only as long as its 60 seconds */
.hs-clock__lane--a { width: 2.5%; margin-bottom: 112px; --scale: 40; }
/* --hs-t is the time on the clock, 0 to 1 of the 40 minutes; each lane stops at its own end */
.hs-clock__fill { position: absolute; left: 0; top: 0; height: 100%; border-radius: 3px; width: calc(min(var(--hs-t, 1) * var(--scale, 1), 1) * 100%); background: var(--lane); }
.hs-clock__lane i { position: absolute; top: 50%; left: calc(var(--at) * 100%); width: 2px; height: 14px; margin: -7px 0 0 -1px; background: var(--ink); }
.hs-clock__lane b { position: absolute; top: 14px; right: 0; font-size: 15px; font-weight: 600; white-space: nowrap; color: var(--lane); }
.hs-clock__lane--a b { right: auto; left: 0; }
.hs-clock__rider { position: absolute; bottom: 12px; left: calc(min(var(--hs-t, 1) * var(--scale, 1), 1) * 100%); width: 56px; height: auto; margin-left: 8px; fill: var(--ink); stroke: var(--lane); stroke-width: 1.2; stroke-linecap: round; stroke-linejoin: round; }
.hs-clock__lane--b .hs-clock__rider { width: 72px; }
.hs-js .hs-clock.is-there-a .hs-clock__lane--a .hs-clock__rider { animation: hs-settle 520ms var(--hs-ease); }
/* the light blinks only while the clock is on screen (the script sets is-live) */
.hs-js .hs-clock.is-live:not(.is-there-b) .hs-clock__lane--b .hs-clock__rider path:last-child { animation: hs-blink 700ms linear infinite; }

.hs-paths { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 88px); }
.hsm .hs-path h3 { color: #fff; font-size: clamp(1.5rem, 2.3vw, 2rem); font-weight: 300; line-height: 1.2; padding-top: 18px; border-top: 3px solid var(--a); }
.hsm .hs-path--b h3 { border-top-color: var(--b); }
.hsm .hs-path h3 span { display: block; margin-top: 6px; font-family: var(--font-body); font-size: 15px; font-weight: 500; letter-spacing: 0; color: var(--a); }
.hsm .hs-path--b h3 span { color: var(--b); }
.hs-path ol { margin-top: 16px !important; }
.hs-path li { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 12px; padding: 12px 0; border-bottom: 1px solid rgba(255, 255, 255, .14); font-size: 16px; line-height: 1.5; color: rgba(255, 255, 255, .88); }
.hs-path li:last-child { border-bottom: 0; }
.hs-path li b { font-weight: 600; color: var(--a); font-variant-numeric: tabular-nums; }
.hs-path--b li b { color: var(--b); }
.hs-delta { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 16px clamp(28px, 5vw, 88px); align-items: center; margin-top: clamp(28px, 4vw, 52px); padding-top: clamp(28px, 4vw, 44px); border-top: 1px solid rgba(255, 255, 255, .16); }
.hs-delta__n b { display: block; font-family: var(--font-display); font-weight: 300; font-size: clamp(3.6rem, 7vw, 6rem); line-height: .9; color: var(--accent-ice); }
.hs-delta__n span { display: block; margin-top: 10px; font-size: 15px; color: rgba(255, 255, 255, .74); }
.hs-delta > p:last-child { font-size: clamp(1.05rem, 1.4vw, 1.2rem); line-height: 1.65; color: #fff; }
.hs-more--dark { margin-top: 18px; }
.hs-more--dark > summary { color: #c9def2; }
.hs-more--dark > summary:hover { color: #fff; }
.hs-more__cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 88px); padding-top: 10px; }
.hs-more__cols p { padding-left: 16px; border-left: 3px solid var(--a); font-size: 16px; line-height: 1.7; color: rgba(255, 255, 255, .84); }
.hs-more__cols p + p { border-left-color: var(--b); }
.hs-more__cols strong { color: #fff; font-weight: 600; }

/* ============ QUESTIONS TO ASK ============ */
.hs-ask { background: var(--accent-wash); padding-block: clamp(56px, 7vw, 104px); }
.hs-ask__head { display: grid; grid-template-columns: minmax(0, 1fr) clamp(140px, 17vw, 220px); gap: clamp(24px, 4vw, 64px); align-items: center; }
.hs-ask__head p { margin-top: clamp(16px, 2vw, 24px) !important; font-size: 18px; line-height: 1.7; color: var(--ink-soft); }
.hs-copy { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; margin-top: 14px; padding: 0 18px 0 14px; border: 1px solid var(--accent-blue-hover); border-radius: 8px; background: #fff; font: 600 15px/1.2 var(--font-body); color: var(--accent-blue-hover); cursor: pointer; transition: background-color 200ms, color 200ms, transform 160ms var(--hs-ease); }
.hs-copy:hover { background: var(--accent-blue-hover); color: #fff; }
.hs-copy:active { transform: scale(.97); }
.hs-copy svg { flex: none; width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.hs-copy__sheet { transition: opacity 200ms; }
.hs-copy__tick { stroke-dasharray: 1; stroke-dashoffset: 1; }
.hs-copy.is-done .hs-copy__sheet { opacity: 0; }
.hs-copy.is-done .hs-copy__tick { animation: hs-draw 420ms var(--hs-ease) both; }
.hs-js .hs-copy { animation: hs-rise 620ms var(--hs-ease) both; }
/* a source that opens in its own tab says so */
.hs-celva a[target="_blank"]::after { content: "\2197"; display: inline-block; margin-left: 4px; font-size: .9em; text-decoration: none; transition: transform 300ms var(--hs-ease); }
.hs-celva a[target="_blank"]:hover::after { transform: translate(2px, -2px); }
.hs-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.hs-call { display: block; width: 100%; height: auto; }
.hs-call__set { transform-box: fill-box; transform-origin: 30% 70%; }
.hs-call__q { fill: none; stroke: var(--accent-blue); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 1; transition: stroke-dashoffset 620ms var(--hs-ease), stroke 320ms; }
.hs-call.is-led .hs-call__q:not(.is-asked) { stroke: var(--border-strong); }
.hs-js .hs-call:not(.is-in) .hs-call__q { stroke-dashoffset: 1; }
.hs-js .hs-call .hs-call__q[data-q="2"] { transition-delay: 160ms; }
.hs-js .hs-call .hs-call__q[data-q="3"] { transition-delay: 320ms; }
.hs-js .hs-call.is-in .hs-call__set { animation: hs-ring 900ms ease-in-out 200ms both; }

.hs-qs { counter-reset: q; margin-top: clamp(24px, 3vw, 44px) !important; border-top: 1px solid var(--border-strong); }
.hs-qs > li { counter-increment: q; border-bottom: 1px solid var(--border-strong); }
.hs-q > summary { position: relative; display: grid; grid-template-columns: clamp(40px, 5vw, 72px) minmax(0, 1fr) 28px; align-items: baseline; gap: 0 8px; min-height: 44px; padding: clamp(18px, 2.2vw, 28px) 0; cursor: pointer; list-style: none; font-family: var(--font-display); font-weight: 300; font-size: clamp(1.35rem, 2.2vw, 1.9rem); line-height: 1.25; color: var(--ink); transition: color 200ms; }
.hs-q > summary::-webkit-details-marker { display: none; }
.hs-q > summary::before { content: counter(q); font-size: 1.15em; color: var(--accent-blue); }
.hs-q > summary::after { content: ""; justify-self: end; align-self: center; width: 10px; height: 10px; margin-top: -6px; border-right: 2px solid var(--accent-blue-hover); border-bottom: 2px solid var(--accent-blue-hover); transform: rotate(45deg); transition: transform 360ms var(--hs-ease), margin 360ms var(--hs-ease); }
.hs-q[open] > summary::after { margin-top: 6px; transform: rotate(-135deg); }
.hs-q > summary:hover { color: var(--accent-blue-hover); }
.hs-q:not([open]) > summary:hover::after { transform: translateY(3px) rotate(45deg); }
.hs-q[open] > summary:hover::after { transform: translateY(-3px) rotate(-135deg); }
.hs-q__body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px clamp(24px, 4vw, 64px); padding: 0 36px clamp(22px, 2.6vw, 32px) calc(clamp(40px, 5vw, 72px) + 8px); }
.hs-q[open] .hs-q__body { animation: hs-unfold 420ms var(--hs-ease); }
.hs-q__body p { font-size: 16.5px; line-height: 1.7; color: var(--ink-soft); }
.hsm .hs-q__listen { align-self: start; padding-left: 18px; border-left: 3px solid var(--accent-blue); color: var(--ink); }
.hs-q__listen b { display: block; margin-bottom: 4px; font-size: 14px; font-weight: 600; color: var(--accent-blue-hover); }
.hs-q__listen q { font-family: var(--font-display); font-size: 1.2rem; line-height: 1.45; }
.hs-ask__close { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px clamp(24px, 4vw, 64px); margin-top: clamp(28px, 4vw, 48px); }
.hs-ask__close p { font-size: 17px; line-height: 1.7; color: var(--ink-soft); }
.hs-ask__close strong { color: var(--ink); font-weight: 600; }
.hsm .hs-ask__line { font-family: var(--font-display); font-weight: 300; font-size: clamp(1.3rem, 2vw, 1.7rem); line-height: 1.4; color: var(--ink); }

/* ============ THE REST OF SECTION 4 ============ */
.hs-next { padding-block: clamp(56px, 7vw, 104px); }
.hs-route { margin-top: clamp(20px, 3vw, 36px) !important; border-top: 1px solid var(--border); }
.hsm .hs-route a { display: grid; grid-template-columns: 56px minmax(0, 5fr) minmax(0, 6fr) 44px; gap: 6px 32px; align-items: center; min-height: 44px; padding: 24px 0; border-bottom: 1px solid var(--border) !important; color: var(--ink); transition: padding-left 420ms var(--hs-ease); }
.hs-route__t { font-family: var(--font-display); font-size: clamp(1.35rem, 2vw, 1.7rem); font-weight: 400; line-height: 1.2; transition: color 200ms; }
.hs-route__d { font-size: 16px; line-height: 1.55; color: var(--ink-muted); }
.hs-route__ic { width: 56px; height: 56px; }
.hs-ic__live { stroke: var(--accent-blue); stroke-dasharray: 1; }
.hs-ic__door { transform-box: fill-box; transform-origin: left center; transition: transform 520ms var(--hs-ease); }
.hs-route a:hover .hs-ic__door, .hs-route a:focus-visible .hs-ic__door { transform: scaleX(.55); }
.hs-route a:hover .hs-ic__live, .hs-route a:focus-visible .hs-ic__live { animation: hs-draw 900ms var(--hs-ease) both; }
.hs-route__go { justify-self: end; align-self: center; font-size: 20px; color: var(--accent-blue-hover); transition: transform 360ms var(--hs-ease); }
.hs-route a:hover, .hs-route a:focus-visible { padding-left: 10px; }
.hs-route a:hover .hs-route__t, .hs-route a:focus-visible .hs-route__t { color: var(--accent-blue-hover); }
.hs-route a:hover .hs-route__go, .hs-route a:focus-visible .hs-route__go { transform: translateX(8px); }
.hs-up { display: flex; flex-wrap: wrap; gap: 4px 36px; margin-top: 20px !important; }

@supports not (grid-template-rows: subgrid) {
  .hs-tier { display: block; }
}

/* ============ NARROWER ============ */
@media (max-width: 1100px) {
  /* the bar's track can scroll here, so its edges fade */
  .hsm .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: 900px) {
  .hs-hero__row, .hs-phr__intro, .hs-four__grid, .hs-row, .hs-q__body, .hs-ask__close, .hs-delta { grid-template-columns: minmax(0, 1fr); }
  /* the building is no longer beside its list, so it stands whole above it */
  .hs-bldg { position: static; max-width: 340px; margin-inline: auto; }
  .hs-bldg svg { max-height: none; }
  .hs-q__body { padding-right: 0; }
  .hsm .hs-route a { grid-template-columns: 56px minmax(0, 1fr) 32px; gap: 6px 18px; padding-block: 20px; }
  .hs-route__ic { grid-row: 1 / span 2; align-self: start; }
  .hs-route__t, .hs-route__d { grid-column: 2; }
  .hs-route__go { grid-column: 3; grid-row: 1; align-self: start; }
  .hs-js [data-r="left"]:not(.is-in), .hs-js [data-r="right"]:not(.is-in) { transform: translateY(18px); }
}
@media (max-width: 760px) {
  /* the three licenses stack: the drawing sits beside its name */
  .hs-tiers { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; gap: 0; }
  .hs-tier { display: grid; grid-row: auto; grid-template-rows: none; grid-template-columns: 96px minmax(0, 1fr); column-gap: 18px; padding-block: 22px; border-bottom: 1px solid var(--border); }
  .hs-tier:last-child { border-bottom: 0; padding-bottom: 0; }
  .hs-tier__art { grid-row: 1 / span 2; align-self: end; margin: 0; }
  .hs-tier h3 { align-self: end; }
  .hsm .hs-tier__is { margin: 6px 0 0; }
  .hs-tier > p:last-child { grid-column: 1 / -1; margin-top: 14px !important; }
  .hs-paths, .hs-more__cols { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .hs-more__cols { gap: 18px; }
  .hs-ask__head { grid-template-columns: minmax(0, 1fr) 96px; align-items: start; }
  .hs-q > summary { grid-template-columns: 30px minmax(0, 1fr) 24px; }
  .hs-q__body { padding-left: 38px; }
}
@media (max-width: 600px) {
  html:has(body.hsm) { --hc-bar-h: 48px; }
  .hsm .hc-bar__track { gap: 22px; }
  .hs-phr__text p, .hs-four__lede, .hs-lic__head p, .hs-chart__lede, .hs-ask__head p { font-size: 17px; }
  .hs-clock__lane--a { width: 2.5%; min-width: 9px; }
  .hs-path li { grid-template-columns: 64px minmax(0, 1fr); }
  .hs-ask__head { grid-template-columns: minmax(0, 1fr); }
  .hs-call { width: 120px; order: -1; }
  .hs-q__body { padding-left: 0; }
}

/* ============ STILL ============
   Reduced motion: every drawing holds its finished state and nothing moves. */
@media (prefers-reduced-motion: reduce) {
  .hsm main *, .hsm main *::before, .hsm main *::after { animation: none !important; transition: none !important; }
  .hs-js [data-r]:not(.is-in), .hs-js .hs-row[data-r]:not(.is-in) > *, .hs-js .hs-row[data-r]:not(.is-in) .hs-verdict { opacity: 1 !important; transform: none !important; }
  .hs-js :is(.hs-three:not(.is-in) .hs-three__one, .hs-tiers:not(.is-in) .hs-tier > *, .hs-tiers:not(.is-in) .hs-tier__b, .hs-bldg:not(.is-in) svg) { opacity: 1 !important; transform: none !important; }
  .hs-js .hs-line .hs-line__rule path, .hs-js .hs-call .hs-call__q { stroke-dashoffset: 0 !important; }
  .hs-copy.is-done .hs-copy__tick { stroke-dashoffset: 0; }
  .hs-js .hs-line[data-v="fail"] .hs-line__rule path { stroke-dasharray: .03 .03; }
  .hsm .hc-bar { transition: none !important; }
  .hs-go:hover span, .hs-route a:hover .hs-route__go, .hs-toc a:hover span { transform: none; }
}
@media print {
  .hsm .hc-bar, .hs-check__picks, .hs-copy, .hs-more > summary { display: none !important; }
  .hs-js [data-r], .hs-js [data-r] *, .hs-js .hs-line { opacity: 1 !important; transform: none !important; animation: none !important; visibility: visible !important; }
  .hs-js .hs-check__lines { display: block; }
  .hs-js .hs-line { padding-block: 10px; }
  .hs-js .hs-line q { min-height: 0; font-size: 1.2rem; }
  .hs-chart { background: #fff; color: var(--ink); }
  .hsm .hs-chart :is(h2, h3, p, li, b, span) { color: var(--ink) !important; }
  .hs-bldg { position: static; }
  /* the drawn rules are finished, and the clock has run to its 40 minutes */
  .hs-js .hs-line .hs-line__rule path { stroke-dashoffset: 0 !important; }
  .hs-clock { --hs-t: 1 !important; }
}

/* Paper is taken the instant the print dialog opens: nothing may still be fading or sliding in. */
@media print {
  main *, main *::before, main *::after { animation: none !important; transition: none !important; }
}