/* /learn-clinic-followup: its own sheet, loaded after site.css.
   One picture runs the page: a year, and the calls that land in it. The hero
   draws the year, the rail under it walks the five calls, the grid lays the
   same five out against what gets asked, and the navy band carries the line
   on past month 12. Two marks are a key, used the same way everywhere: the
   handset in ink is the coordinator's call, the camera in blue the physician's.
   Script: scripts/learn-clinic-followup.js. With that script absent every
   call is on the page, every part is visible and every link still jumps. */

html:has(body.fup) {
  --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);
}
.fup {
  --fu-ease: cubic-bezier(.16, 1, .3, 1);
  --fu-gut: clamp(20px, 4vw, 56px);
  --fu-soft: #a9c5e3;          /* the "discussed as needed" dot */
  overflow-x: clip;
}

/* ============ GROUND RULES ============ */
.fu-wrap { max-width: calc(1240px + 2 * var(--fu-gut)); margin-inline: auto; padding-inline: var(--fu-gut); }
/* text fills its column; the column sets the measure */
.fup main p { max-width: none; margin: 0; }
.fup main a:not(.btn) { border-bottom: 0; }
.fup main ul { list-style: none; margin: 0; padding: 0; }
.fup 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;
}
.fup main h3 { margin: 0; max-width: none; }
.fup main :is(a, button, summary):focus-visible { outline: 2px solid var(--accent-blue); outline-offset: 3px; border-radius: 4px; }
.fup .fu-after :is(a, button):focus-visible { outline-color: var(--accent-ice); }
/* a part that receives focus after a jump is not itself a control */
.fup main :is(h1, h2, h3, section, article)[tabindex="-1"]:focus { outline: none; }
.fu-vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* the two marks */
.fu-ic path { fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }

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

/* the onward link: the arrow leans the way it points */
.fu-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; }
.fu-go span { display: inline-block; transition: transform 360ms var(--fu-ease); }
.fu-go:hover { color: var(--accent-blue); text-decoration-color: currentColor; }
.fu-go:hover span { transform: translateX(6px); }
.fu-go[href^="#"]:hover span { transform: translateY(4px) rotate(90deg); }
.fu-rel__up .fu-go:hover span { transform: translateX(-6px); }

/* ============ REVEALS ============
   Hidden only once the script has said it is running (fu-js on <html>), so
   with no script nothing is ever hidden. Each part comes in its own way. */
.fu-js [data-r] { transition: opacity 620ms ease, transform 820ms var(--fu-ease); }
.fu-js [data-r]:not(.is-in) { opacity: 0; transform: translateY(18px); }
.fu-js [data-r="left"]:not(.is-in) { transform: translateX(-32px); }
.fu-js [data-r="right"]:not(.is-in) { transform: translateX(32px); }
.fu-js :is([data-r="draw"], [data-r="grid"], [data-r="loop"], [data-r="walk"]):not(.is-in) { opacity: 1; transform: none; }

/* ============ HERO ============ */
.fu-hero { padding-block: clamp(20px, 3vw, 36px) clamp(48px, 6vw, 88px); }
.fu-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 */
.fu-hero__h1 > .h-lead, .fu-hero__h1 > em { display: inline-block; }
.fu-hero__h1 > em { color: var(--accent-blue); }

.fu-hero__row { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 5vw, 88px); align-items: center; }
.fu-hero__answer { font-size: clamp(1.12rem, 1.5vw, 1.32rem); line-height: 1.6; color: var(--ink); margin-bottom: 20px !important; }
.fu-hero__fig { margin: 0; }

.fu-year { display: block; width: 100%; height: auto; overflow: visible; }
.fu-year__strip { fill: #fff; stroke: var(--ink); stroke-width: 1.7; }
.fu-year__div { fill: none; stroke: var(--border-strong); stroke-width: 1.3; }
.fu-year__run { fill: none; stroke: var(--accent-blue); stroke-width: 3; stroke-linecap: round; }
.fu-mark__stem { fill: none; stroke: var(--ink); stroke-width: 1.5; stroke-linecap: round; }
.fu-mark__badge { transform-box: fill-box; transform-origin: center; }
.fu-mark__badge circle { fill: #fff; stroke: var(--ink); stroke-width: 1.6; }
.fu-mark--phone { color: var(--ink); }
.fu-mark--video, .fu-later { color: var(--accent-blue); }
.fu-mark--video :is(.fu-mark__stem, circle), .fu-later :is(.fu-mark__stem, circle) { stroke: var(--accent-blue); }
.fu-later rect { fill: none; stroke: var(--ink-muted); stroke-width: 1.4; stroke-dasharray: 4 4; }
.fu-later:nth-child(2) { opacity: .72; }
.fu-later:nth-child(3) { opacity: .44; }

.fu-hero__key { display: flex; flex-wrap: wrap; gap: 8px 28px; margin-top: 14px; padding-left: 3.75%; }
.fu-key { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; line-height: 1.4; color: var(--ink-muted); }
.fu-key svg { width: 20px; height: 20px; flex: none; }
.fu-key--phone svg { color: var(--ink); }
.fu-key--video svg { color: var(--accent-blue); }

/* first paint: the year is drawn, then the calls land where they fall in it,
   bunched in the first weeks and thinning out, at the pace of the blue line */
@keyframes fu-up { from { opacity: 0; transform: translateY(22px); } }
@keyframes fu-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes fu-fade { from { opacity: 0; } }
@keyframes fu-land { from { opacity: 0; transform: translateY(-16px) scale(.6); } 60% { opacity: 1; transform: translateY(2px) scale(1.06); } }
@keyframes fu-stem { from { opacity: 0; } }
@keyframes fu-rise { from { opacity: 0; transform: translateY(14px); } }
.fu-js .fu-hero__h1 > * { animation: fu-up 900ms var(--fu-ease) both; }
.fu-js .fu-hero__h1 > em { animation-delay: 110ms; }
.fu-js .fu-hero__text > * { animation: fu-up 900ms var(--fu-ease) 240ms both; }
.fu-js .fu-hero__text > a { animation-delay: 340ms; }
.fu-js .fu-year__strip { stroke-dasharray: 1; animation: fu-draw 900ms var(--fu-ease) 200ms both; }
.fu-js .fu-year__div { animation: fu-fade 500ms ease 800ms both; }
.fu-js .fu-year__run { stroke-dasharray: 1; animation: fu-draw 2100ms linear 1100ms both; }
.fu-js .fu-mark .fu-mark__badge { animation: fu-land 520ms var(--fu-ease) both; }
.fu-js .fu-mark .fu-mark__stem { animation: fu-stem 300ms ease both; }
.fu-js .fu-mark:nth-of-type(1) > * { animation-delay: 1120ms; }
.fu-js .fu-mark:nth-of-type(2) > * { animation-delay: 1380ms; }
.fu-js .fu-mark:nth-of-type(3) > * { animation-delay: 1630ms; }
.fu-js .fu-mark:nth-of-type(4) > * { animation-delay: 2150ms; }
.fu-js .fu-mark:nth-of-type(5) > * { animation-delay: 3200ms; }
.fu-js .fu-later { animation: fu-rise 600ms var(--fu-ease) calc(3400ms + var(--i) * 200ms) backwards; }
.fu-js .fu-hero__key > * { animation: fu-rise 700ms var(--fu-ease) 1200ms both; }
.fu-js .fu-hero__key > :last-child { animation-delay: 1500ms; }

/* ============ CONTENTS BAR (follows the reader) ============ */
.fup .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(--fu-ease), visibility 0s 360ms;
}
.fup .hc-bar.is-on { transform: none; opacity: 1; visibility: visible; transition: opacity 260ms, transform 360ms var(--fu-ease); }
body.fup.nav-open .hc-bar { opacity: 0; visibility: hidden; }
.fup .hc-bar__track {
  max-width: calc(1240px + 2 * var(--fu-gut)); margin: 0 auto; padding: 0 var(--fu-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;
}
.fup .hc-bar__track::-webkit-scrollbar { display: none; }
.fup .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;
}
.fup .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(--fu-ease);
}
.fup .hc-bar__track a:hover, .fup .hc-bar__track a[aria-current] { color: var(--ink); }
.fup .hc-bar__track a:hover::after { transform: scaleX(.35); }
.fup .hc-bar__track a[aria-current]::after { transform: scaleX(1); }
.fup .hc-bar__track a:focus-visible { outline: 2px solid var(--accent-blue); outline-offset: -4px; border-radius: 4px; }
.fup .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 track runs off a phone's edge: a fade says there is more */
.fup .hc-bar::after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; width: 36px; background: linear-gradient(90deg, rgba(255, 255, 255, 0), #fff 80%); pointer-events: none; opacity: 0; transition: opacity 200ms; }
.fup .hc-bar.has-more::after { opacity: 1; }

/* ============ WHY FOLLOW UP (the one tinted band) ============ */
.fu-why { background: var(--accent-wash); padding-block: clamp(48px, 6vw, 84px); }
.fu-why__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(240px, 360px); gap: clamp(28px, 5vw, 88px); align-items: center; }
.fu-why__text h2 { margin-bottom: clamp(18px, 2vw, 28px) !important; }
.fu-why__lead { font-family: var(--font-display); font-weight: 300; font-size: clamp(1.35rem, 2.1vw, 1.9rem); line-height: 1.32; color: var(--ink); margin-bottom: 20px !important; }
.fu-why__text p:last-child { font-size: 18px; line-height: 1.65; color: var(--ink-soft); }
.fu-why__text strong { font-weight: 600; color: var(--ink); }

.fu-home { display: block; width: 100%; height: auto; overflow: visible; color: var(--ink); }
.fu-home path, .fu-home circle { fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; }
.fu-home__path { stroke: var(--ink-muted) !important; stroke-width: 1.6; stroke-dasharray: .02 .03; }
.fu-home__plane path { stroke-width: .8; }
.fu-home__house path { stroke-width: .36; }
.fu-home__ring { color: var(--accent-blue); }
.fu-home__ring circle { fill: #fff; stroke-width: 1.6; }
.fu-home__wave { stroke-width: 1.8; }
@keyframes fu-fly { from { opacity: 0; transform: translate(-46px, 26px); } }
@keyframes fu-pop { from { transform: scale(0); opacity: 0; } 70% { transform: scale(1.18); opacity: 1; } }
@keyframes fu-ringing { 0%, 100% { opacity: .15; } 35% { opacity: 1; } }
.fu-js .fu-home:not(.is-in) > * { opacity: 0; }
.fu-js .fu-home.is-in .fu-home__plane { animation: fu-fly 900ms var(--fu-ease) both; }
.fu-js .fu-home.is-in .fu-home__path { animation: fu-fade 700ms ease 300ms both; }
.fu-js .fu-home.is-in .fu-home__house { animation: fu-rise 700ms var(--fu-ease) 600ms both; }
.fu-js .fu-home.is-in .fu-home__ring { transform-box: fill-box; transform-origin: 30% 50%; animation: fu-pop 480ms var(--fu-ease) 1300ms both; }
.fu-home.is-in .fu-home__wave { animation: fu-ringing 1400ms ease calc(1700ms + var(--i) * 160ms) 3 both; }

/* ============ THE CALLS ============ */
.fu-calls { padding-block: clamp(64px, 8vw, 120px) clamp(56px, 7vw, 104px); }
.fu-calls__head { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(16px, 2vw, 24px); margin-bottom: clamp(32px, 4vw, 56px); }
.fu-calls__intro p { font-size: 18px; line-height: 1.65; color: var(--ink-soft); }
.fu-js-only { display: none; }
.fu-js .fu-js-only { display: inline; }

.fu-walk__top { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: clamp(16px, 3vw, 40px); align-items: start; }
.fu-rail { position: relative; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); }
.fu-rail__line { position: absolute; left: calc(100% / 10); right: calc(100% / 10); top: 10px; height: 2px; background: var(--border-strong); }
.fu-rail__line i { position: absolute; inset: 0; background: var(--accent-blue); transform-origin: left; transform: scaleX(var(--fu-p, 0)); transition: transform 620ms var(--fu-ease); }
.fu-stop { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 0 4px 10px; text-align: center; color: var(--ink-muted); min-height: 44px; }
.fu-stop__dot { box-sizing: border-box; width: 22px; height: 22px; border-radius: 50%; background: #fff; border: 2px solid var(--border-strong); margin-bottom: 8px; display: grid; place-items: center; transition: border-color 260ms, background 260ms, transform 360ms var(--fu-ease), box-shadow 360ms; }
.fu-stop__dot::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--border-strong); transition: background 260ms; }
.fu-stop__when { font-size: 15px; font-weight: 600; color: var(--ink); transition: color 200ms; }
.fu-stop__short { display: none; }
.fu-stop__name { font-size: 14px; line-height: 1.35; }
.fu-stop:hover .fu-stop__dot { border-color: var(--accent-blue); transform: scale(1.12); }
.fu-stop:hover .fu-stop__when { color: var(--accent-blue-hover); }
.fu-stop.is-done .fu-stop__dot { border-color: var(--accent-blue); }
.fu-stop.is-done .fu-stop__dot::after { background: var(--accent-blue); }
.fu-stop.is-on .fu-stop__dot { border-color: var(--accent-blue); background: var(--accent-blue); transform: scale(1.18); box-shadow: 0 0 0 6px rgba(45, 110, 177, .16); }
.fu-stop.is-on .fu-stop__dot::after { background: #fff; }
.fu-stop.is-on .fu-stop__when { color: var(--accent-blue-hover); }
.fu-stop:focus-visible { outline-offset: 0 !important; }

.fu-play { display: none; position: relative; width: 48px; height: 48px; padding: 0; border: 0; border-radius: 50%; background: var(--accent-blue); color: #fff; cursor: pointer; margin-top: -13px; transition: background 200ms, transform 360ms var(--fu-ease); }
.fu-js .fu-play { display: grid; place-items: center; }
.fu-play:hover { background: var(--accent-blue-hover); transform: scale(1.06); }
.fu-play:active { transform: scale(.96); }
.fu-play svg { grid-area: 1 / 1; }
.fu-play__ring { position: absolute; inset: -5px; width: 58px; height: 58px; transform: rotate(-90deg); }
.fu-play__ring circle { fill: none; stroke: var(--border); stroke-width: 2; }
.fu-play__ring .fu-play__prog { stroke: var(--accent-blue); stroke-dasharray: 1; stroke-dashoffset: 1; }
.fu-play__go, .fu-play__stop { width: 16px; height: 16px; fill: currentColor; transition: opacity 200ms, transform 300ms var(--fu-ease); }
.fu-play__go { margin-left: 2px; }
.fu-play__stop, .fu-play[aria-pressed="true"] .fu-play__go { opacity: 0; transform: scale(.5); }
.fu-play[aria-pressed="true"] .fu-play__stop { opacity: 1; transform: none; }

.fu-walk__panels { margin-top: clamp(20px, 3vw, 36px); border-top: 1px solid var(--border-strong); }
.fu-call { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 5fr) minmax(0, 3fr); gap: clamp(24px, 4vw, 64px); padding-block: clamp(28px, 3.5vw, 48px); border-bottom: 1px solid var(--border); scroll-margin-top: 12px; }
.fu-js .fu-call { border-bottom-color: var(--border-strong); }
.fu-js .fu-call:not(.is-on) { display: none; }
.fu-call__when { font-size: 15px; font-weight: 600; color: var(--accent-blue-hover); margin-bottom: 10px !important; }
.fu-call h3 { font-family: var(--font-display); font-weight: 300; font-size: clamp(1.6rem, 2.3vw, 2.05rem); line-height: 1.14; color: var(--ink); }
.fu-call h3 > :is(.h-lead, em) { display: inline-block; }
.fu-call h3 > em { color: var(--accent-blue); }
.fu-call__body p { font-size: 17px; line-height: 1.68; color: var(--ink-soft); }
.fu-call__body p + p { margin-top: 14px !important; }
.fu-call__body strong { font-weight: 600; color: var(--ink); }
.fu-call__topics { display: flex; flex-wrap: wrap; gap: 6px 0; margin-top: 20px !important; font-size: 15px; color: var(--ink-muted); }
.fu-call__topics li { display: inline-flex; align-items: center; }
.fu-call__topics li:not(:last-child)::after { content: ""; width: 4px; height: 4px; border-radius: 50%; background: var(--border-strong); margin-inline: 12px; }

/* on to the next call without going back up to the rail (added by the script) */
.fu-next { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; margin-top: 18px; padding: 0; border: 0; background: none; font: inherit; font-size: 16px; font-weight: 600; color: var(--accent-blue-hover); cursor: pointer; text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 5px; transition: color 200ms, text-decoration-color 260ms; }
.fu-next span { display: inline-block; transition: transform 360ms var(--fu-ease); }
.fu-next:hover { color: var(--accent-blue); text-decoration-color: currentColor; }
.fu-next:hover span { transform: translateX(6px); }
.fu-call__facts { margin: 0; display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; }
.fu-fact { display: grid; grid-template-columns: 96px minmax(0, 1fr); align-items: center; gap: 12px; min-height: 52px; border-top: 1px solid var(--border); }
.fu-fact:first-child { border-top: 0; }
.fu-fact dt { font-size: 15px; color: var(--ink-muted); }
.fu-fact dd { margin: 0; display: flex; align-items: center; gap: 10px; font-size: 16px; font-weight: 600; color: var(--ink); }
.fu-fact__ic { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; border: 1.5px solid currentColor; flex: none; }
.fu-fact__ic svg { width: 18px; height: 18px; }
.fu-fact__ic--video { color: var(--accent-blue); }
/* the length of the call, as a share of an hour */
.fu-clock { width: 36px; height: 36px; flex: none; }
.fu-clock__face { fill: #fff; stroke: var(--ink); stroke-width: 1.5; }
.fu-clock__wedge { fill: none; stroke: var(--accent-blue); stroke-width: 16; stroke-dasharray: var(--min) 60; transform: rotate(-90deg); transform-origin: 20px 20px; opacity: .85; }
.fu-clock__tick { fill: none; stroke: var(--ink); stroke-width: 1.5; stroke-linecap: round; }

/* a call steps in from the side it sits on the rail */
@keyframes fu-swap { from { opacity: 0; transform: translateX(calc(var(--fu-dir, 1) * 28px)); } }
@keyframes fu-sweep { from { stroke-dasharray: 0 60; } }
.fu-js .fu-walk.is-live .fu-call.is-on > * { animation: fu-swap 520ms var(--fu-ease) both; }
.fu-js .fu-walk.is-live .fu-call.is-on > :nth-child(2) { animation-delay: 60ms; }
.fu-js .fu-walk.is-live .fu-call.is-on > :nth-child(3) { animation-delay: 120ms; }
.fu-js .fu-walk.is-live .fu-call.is-on .fu-clock__wedge { animation: fu-sweep 900ms var(--fu-ease) 200ms both; }
/* the rail arrives stop by stop */
.fu-js .fu-walk:not(.is-in) .fu-stop { opacity: 0; transform: translateY(10px); }
.fu-js .fu-walk:not(.is-in) .fu-rail__line { transform: scaleX(0); }
.fu-js .fu-walk .fu-stop { transition: opacity 500ms ease calc(var(--n, 0) * 70ms), transform 700ms var(--fu-ease) calc(var(--n, 0) * 70ms); }
.fu-js .fu-walk .fu-rail__line { transform-origin: left; transition: transform 900ms var(--fu-ease); }
.fu-js .fu-walk:not(.is-in) :is(.fu-walk__panels, .fu-play) { opacity: 0; }
.fu-js .fu-walk :is(.fu-walk__panels, .fu-play) { transition: opacity 600ms ease 400ms, background 200ms, transform 360ms var(--fu-ease); }

.fu-calls__next { margin-top: clamp(20px, 3vw, 32px); }

/* ============ WHAT GETS ASKED ============ */
.fu-asked { padding-block: clamp(56px, 7vw, 104px); border-top: 1px solid var(--border); }
.fu-asked__grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(32px, 5vw, 80px); align-items: start; }
.fu-asked__text { position: sticky; top: calc(var(--hc-nav-h) + var(--hc-bar-h) + 28px); }
.fu-asked h2 { margin-bottom: clamp(24px, 3vw, 44px) !important; }
.fu-asked__text p { font-size: 17px; line-height: 1.68; color: var(--ink-soft); }
@media (hover: none) { .fu-hover-only { display: none; } }
.fu-legend { display: grid; gap: 10px; margin-block: 24px !important; }
.fu-legend li { display: flex; align-items: center; gap: 14px; font-size: 16px; color: var(--ink-soft); }
.fu-legend li .fu-dot { flex: none; }
.fu-legend strong { font-weight: 600; color: var(--ink); }

.fu-dot { display: block; box-sizing: border-box; width: 16px; height: 16px; border-radius: 50%; background: var(--accent-blue); transition: transform 300ms var(--fu-ease), box-shadow 300ms; }
[data-s="minor"] > .fu-dot { background: var(--fu-soft); }
[data-s="cond"] > .fu-dot { background: #fff; border: 2.5px solid var(--accent-blue); }
[data-s="none"] > .fu-dot { background: #fff; border: 1.5px solid var(--ink-muted); width: 8px; height: 8px; margin: 4px; }

.fu-grid { width: 100%; border-collapse: collapse; table-layout: fixed; }
.fu-grid :is(th, td) { padding: 0; border: 0; font-weight: 400; text-align: left; }
.fu-grid thead th { font-size: 14px; font-weight: 600; color: var(--ink); text-align: center; vertical-align: bottom; padding: 12px 2px; border-bottom: 1.5px solid var(--ink); transition: color 200ms, background 200ms; }
.fu-grid thead th svg { display: block; width: 20px; height: 20px; margin: 0 auto 6px; color: var(--ink); }
.fu-grid thead .fu-grid__by--video svg { color: var(--accent-blue); }
.fu-grid thead .fu-grid__corner { width: 36%; text-align: left; color: var(--ink-muted); font-weight: 500; }
.fu-grid tbody th { padding: 16px 16px 16px 0; border-bottom: 1px solid var(--border); transition: background 200ms; }
.fu-grid__name { display: block; font-family: var(--font-display); font-size: 1.3rem; line-height: 1.2; color: var(--ink); }
/* a link on its own in a row header: a full-height target, without moving the row */
.fu-grid__name a { display: inline-flex; align-items: center; min-height: 44px; margin-block: -11px; color: inherit; text-decoration: underline; text-decoration-color: var(--accent-blue); text-decoration-thickness: 1.5px; text-underline-offset: 4px; transition: color 200ms; }
.fu-grid__name a:hover { color: var(--accent-blue-hover); }
.fu-grid__d { display: block; font-size: 14px; line-height: 1.45; color: var(--ink-muted); margin-top: 4px; }
.fu-grid td { border-bottom: 1px solid var(--border); transition: background 200ms; }
.fu-grid td .fu-dot { margin-inline: auto; }
.fu-grid td[data-s="none"] .fu-dot { margin: 4px auto; }
/* the crosshair under the pointer, and the column of the call last opened */
.fu-grid :is(td, thead th).is-at { background: var(--accent-wash); }
.fu-grid :is(td, thead th).is-col, .fu-grid tr.is-row > * { background: rgba(45, 110, 177, .07); }
.fu-grid tr.is-row > td.is-col { background: rgba(45, 110, 177, .16); }
.fu-grid thead th.is-col { color: var(--accent-blue-hover); }
.fu-grid :is(td.is-col, tr.is-row > td) .fu-dot { transform: scale(1.2); }
/* the dots arrive call by call, left to right, the order the year runs in */
@keyframes fu-dot { from { opacity: 0; transform: scale(0); } 70% { opacity: 1; transform: scale(1.25); } }
.fu-js .fu-grid:not(.is-in) .fu-dot { opacity: 0; }
.fu-js .fu-grid.is-in .fu-dot { animation: fu-dot 460ms var(--fu-ease) calc(var(--c) * 110ms + 100ms) backwards; }

/* ============ IS IT WORKING ============ */
.fu-reads { padding-block: clamp(56px, 7vw, 104px); border-top: 1px solid var(--border); overflow-x: clip; }
.fu-reads__lede { font-size: 18px; line-height: 1.65; color: var(--ink-soft); margin-top: clamp(16px, 2vw, 24px) !important; }
.fu-reads__cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); margin-top: clamp(32px, 4vw, 56px); }
.fu-read { padding-top: 28px; border-top: 3px solid var(--ink); }
.fu-read--said { padding-right: clamp(20px, 3.5vw, 56px); }
.fu-read--seen { padding-left: clamp(20px, 3.5vw, 56px); border-top-color: var(--accent-blue); border-left: 1px solid var(--border); }
.fu-read__head { display: flex; align-items: center; gap: 16px; margin-bottom: 12px; }
.fu-read h3 { font-family: var(--font-display); font-weight: 400; font-size: clamp(1.4rem, 2vw, 1.75rem); line-height: 1.2; color: var(--ink); }
.fu-read__badge { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; border: 1.5px solid var(--ink); flex: none; }
.fu-read__badge svg { width: 26px; height: 26px; }
.fu-read__badge path { fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.fu-read--seen .fu-read__badge { border-color: var(--accent-blue); color: var(--accent-blue); }
.fu-read li { padding-block: 16px; border-top: 1px solid var(--border); display: grid; gap: 3px; }
.fu-read li:first-child { border-top: 0; }
.fu-read li strong { font-size: 17px; font-weight: 600; color: var(--ink); }
.fu-read li span { font-size: 16px; line-height: 1.55; color: var(--ink-soft); }
.fu-read li small { font-size: 14px; line-height: 1.5; color: var(--ink-muted); }
.fu-reads__close { font-size: 18px; line-height: 1.65; color: var(--ink-soft); margin-top: clamp(28px, 3.5vw, 44px) !important; }
.fu-reads__close strong { font-weight: 600; color: var(--ink); }
.fu-js .fu-read li { transition: opacity 500ms ease calc(var(--n, 0) * 80ms + 200ms), transform 700ms var(--fu-ease) calc(var(--n, 0) * 80ms + 200ms); }
.fu-js .fu-read:not(.is-in) li { opacity: 0; transform: translateY(10px); }

/* ============ WHERE THE ANSWERS GO ============ */
.fu-loop { padding-block: clamp(56px, 7vw, 104px); border-top: 1px solid var(--border); }
.fu-loop__grid { display: grid; grid-template-columns: minmax(240px, 400px) minmax(0, 1fr); gap: clamp(32px, 6vw, 104px); align-items: start; }
.fu-loop__fig { margin: 0; position: sticky; top: calc(var(--hc-nav-h) + var(--hc-bar-h) + 28px); }
.fu-loop__svg { display: block; width: 100%; height: auto; overflow: visible; }
.fu-loop__svg :is(path, circle) { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.fu-loop__arc, .fu-loop__tip { stroke: var(--border-strong); stroke-width: 2; transition: stroke 400ms; }
.fu-loop__arc.is-lit, .fu-loop__tip.is-lit { stroke: var(--accent-blue); }
.fu-node { color: var(--ink); transition: color 300ms; }
.fu-node circle { fill: #fff; stroke: currentColor; stroke-width: 1.6; transition: fill 300ms, stroke 300ms; transform-box: fill-box; transform-origin: center; }
.fu-node path { stroke: currentColor; stroke-width: .9; }
.fu-node.is-lit { color: #fff; }
.fu-node.is-lit circle { fill: var(--accent-blue); stroke: var(--accent-blue); }
@keyframes fu-beat { 50% { transform: scale(1.08); } }
.fu-loop__arc.is-lit { stroke-dasharray: 10 4; }
.fu-node.is-lit circle { animation: fu-beat 520ms var(--fu-ease); }
.fu-js .fu-loop__fig:not(.is-in) :is(.fu-node, .fu-loop__arc, .fu-loop__tip) { opacity: 0; }
.fu-js .fu-loop__fig.is-in .fu-node { animation: fu-pop 520ms var(--fu-ease) calc(var(--i) * 260ms) backwards; transform-box: fill-box; transform-origin: center; }
.fu-js .fu-loop__fig.is-in :is(.fu-loop__arc, .fu-loop__tip) { animation: fu-fade 400ms ease calc(var(--i) * 260ms + 220ms) backwards; }

.fu-loop__text h2 { margin-bottom: clamp(18px, 2vw, 28px) !important; }
.fu-loop__text > p { font-size: 18px; line-height: 1.65; color: var(--ink-soft); }
.fu-steps { margin-top: clamp(20px, 3vw, 36px); border-bottom: 1px solid var(--border-strong); }
.fu-step { border-top: 1px solid var(--border-strong); }
.fu-step summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 64px; cursor: pointer; list-style: none; color: var(--ink); transition: color 200ms; }
.fu-step summary::-webkit-details-marker { display: none; }
.fu-step summary::after { content: ""; flex: none; width: 10px; height: 10px; margin: -5px 6px 0 0; border-right: 2px solid var(--accent-blue); border-bottom: 2px solid var(--accent-blue); transform: rotate(45deg); transition: transform 360ms var(--fu-ease); }
.fu-step summary:hover { color: var(--accent-blue-hover); }
.fu-step summary:hover::after { transform: translateY(3px) rotate(45deg); }
.fu-step[open] summary::after { margin-top: 5px; transform: rotate(-135deg); }
.fu-step[open] summary:hover::after { transform: translateY(-3px) rotate(-135deg); }
.fu-step__t { font-family: var(--font-display); font-weight: 400; font-size: clamp(1.35rem, 1.9vw, 1.65rem); line-height: 1.2; }
.fu-step__t span { font-style: italic; color: var(--accent-blue); }
.fu-step p { font-size: 17px; line-height: 1.68; color: var(--ink-soft); padding: 0 40px 22px 0; }
@keyframes fu-unfold { from { opacity: 0; transform: translateY(-8px); } }
.fu-js .fu-step[open] p { animation: fu-unfold 420ms var(--fu-ease); }

/* ============ AFTER YEAR ONE (navy) ============ */
.fu-after { background: var(--ink); color: #fff; padding-block: clamp(64px, 8vw, 120px); overflow: hidden; }
.fup main .fu-after h2 { color: #fff; }
.fu-after__line { font-family: var(--font-display); font-weight: 300; font-size: clamp(1.5rem, 2.4vw, 2.2rem); line-height: 1.2; color: var(--accent-ice); margin-top: clamp(14px, 1.6vw, 22px) !important; }
.fu-after__line em { color: #fff; }
/* one call a year, on past the edge of the page */
.fu-after__years { position: relative; display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); margin: clamp(30px, 4.4vw, 58px) calc(-1 * var(--fu-gut)) clamp(30px, 4.4vw, 58px) 0; padding-block: 6px; -webkit-mask-image: linear-gradient(90deg, #000 60%, transparent); mask-image: linear-gradient(90deg, #000 60%, transparent); }
.fu-after__years::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1.5px; background: rgba(255, 255, 255, .28); }
.fu-after__years::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1.5px; background: var(--accent-ice); transform-origin: left; transform: scaleX(var(--fu-y, 1)); }
.fu-after__years i { position: relative; z-index: 1; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: var(--ink); border: 1.5px solid rgba(255, 255, 255, .4); color: rgba(255, 255, 255, .5); transition: border-color 400ms, color 400ms, transform 500ms var(--fu-ease); }
.fu-after__years i.is-lit { border-color: var(--accent-ice); color: var(--accent-ice); transform: scale(1.08); }
.fu-after__years svg { width: 20px; height: 20px; }
.fu-after__cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 5vw, 80px); }
.fu-after__cols p { font-size: 18px; line-height: 1.68; color: rgba(255, 255, 255, .8); }
.fu-after__cols strong { font-weight: 600; color: #fff; }
.fu-js .fu-after__cols p:last-child { transition-delay: 140ms; }

/* ============ READ ON ============ */
.fu-rel { padding-block: clamp(56px, 7vw, 104px); }
.fu-rel h2 { margin-bottom: clamp(24px, 3vw, 40px) !important; }
.fu-rel .learn-related__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: auto auto 1fr auto; gap: 0 clamp(16px, 2vw, 28px); }
.fu-rel .learn-related__card {
  position: relative; z-index: 0; display: grid; grid-row: span 4; grid-template-rows: subgrid;
  padding: clamp(22px, 2.4vw, 32px); transition: opacity 620ms ease, transform 420ms var(--fu-ease);
}
@supports not (grid-template-rows: subgrid) { .fu-rel .learn-related__card { display: flex; flex-direction: column; } .fu-rel .learn-related__card p { flex: 1; } }
.fu-rel .learn-related__card::before { content: ""; position: absolute; inset: 0; z-index: -1; border: 1px solid var(--border); border-radius: 8px; background: #fff; transition: border-color 260ms, box-shadow 420ms var(--fu-ease); }
.fu-rel .learn-related__card > * { position: relative; }
.fu-rel .learn-related__card > a { position: static; }
.fu-js .fu-rel .learn-related__card:not(.is-in) { transition-delay: calc(var(--i) * 110ms); }
.fu-rel .learn-related__card:hover, .fu-rel .learn-related__card:focus-within { transform: translateY(-3px); }
.fu-rel .learn-related__card:hover::before, .fu-rel .learn-related__card:focus-within::before { border-color: var(--accent-blue); box-shadow: 0 18px 40px -26px rgba(11, 29, 58, .4); }
.fu-rel .learn-related__mark { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; border: 1.5px solid var(--ink); margin-bottom: 20px; transition: border-color 260ms, color 260ms; color: var(--ink); }
.fu-rel .learn-related__mark svg { width: 26px; height: 26px; }
.fu-rel .learn-related__mark path { fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.fu-rel .learn-related__card:hover .learn-related__mark { border-color: var(--accent-blue); color: var(--accent-blue); }
.fu-rel .learn-related__card h3 { font-family: var(--font-display); font-size: 1.5rem; font-weight: 400; line-height: 1.2; color: var(--ink); margin: 0 0 10px; }
.fu-rel .learn-related__card p { align-self: start; font-size: 16px; line-height: 1.6; color: var(--ink-soft); margin-bottom: 14px !important; }
.fu-rel .learn-related__card a { align-self: end; justify-self: start; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-size: 15px; font-weight: 600; color: var(--accent-blue-hover); }
.fu-rel .learn-related__card a span { transition: transform 360ms var(--fu-ease); }
.fu-rel .learn-related__card:hover a span { transform: translateX(6px); }
/* the whole card is the link */
.fu-rel .learn-related__card a::after { content: ""; position: absolute; inset: 0; border-radius: 8px; }
.fu-rel .learn-related__card a:focus-visible { outline: none; }
.fu-rel .learn-related__card a:focus-visible::after { outline: 2px solid var(--accent-blue); outline-offset: 3px; }
.fu-rel__up { display: flex; flex-wrap: wrap; gap: 4px 36px; margin-top: clamp(20px, 3vw, 32px); }

/* ============ NARROWER ============ */
@media (max-width: 1100px) {
  .fu-call { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }
  .fu-call__facts { grid-column: 1 / -1; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 20px; border-top: 1px solid var(--border); }
  .fu-fact { grid-template-columns: minmax(0, 1fr); gap: 2px; padding-block: 12px; border-top: 0; align-content: start; }
  .fu-stop__name { display: none; }
}
@media (max-width: 900px) {
  .fu-hero__row { grid-template-columns: minmax(0, 1fr); }
  .fu-why__grid { grid-template-columns: minmax(0, 1fr); }
  .fu-home { max-width: 320px; }
  .fu-asked__grid { grid-template-columns: minmax(0, 1fr); }
  .fu-asked__text, .fu-loop__fig { position: static; }
  /* heading and paragraph, then the loop, then its four steps */
  .fu-loop__grid { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .fu-loop__text { display: contents; }
  .fu-loop__text > p { margin-top: 18px !important; }
  .fu-loop__fig { order: 1; width: 100%; max-width: 300px; margin: 32px auto 8px; }
  .fu-steps { order: 2; }
  .fu-after__cols { grid-template-columns: minmax(0, 1fr); }
  .fu-rel .learn-related__grid { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; gap: 16px; }
  .fu-rel .learn-related__card { grid-row: auto; grid-template-rows: none; display: flex; flex-direction: column; }
  .fu-rel .learn-related__card a { align-self: flex-start; }
}
@media (max-width: 760px) {
  .fu-call { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .fu-call__facts { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .fu-reads__cols { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .fu-read--said { padding-right: 0; }
  .fu-read--seen { padding-left: 0; border-left: 0; }
  .fu-after__years { grid-template-columns: repeat(9, 64px); }
  .fu-step p { padding-right: 0; }
}
@media (max-width: 600px) {
  .fu-walk__top { grid-template-columns: minmax(0, 1fr); }
  .fu-stop { padding-inline: 0; min-height: 60px; }
  .fu-stop__long { display: none; }
  .fu-stop__short { display: inline; }
  .fu-stop__when { font-size: 14px; }
  .fu-play { margin: 4px 0 0 5px; }
  .fu-play::after { content: ""; position: absolute; inset: -6px; }
  .fu-hero__key { padding-left: 0; }
  /* the drawing is half its size here: the lines keep their weight */
  .fu-year__strip { stroke-width: 2.8; }
  .fu-year__div { stroke-width: 2; }
  .fu-year__run { stroke-width: 4.5; }
  .fu-year :is(.fu-mark__stem, .fu-mark__badge circle) { stroke-width: 2.6; }
  .fu-year .fu-ic path { stroke-width: 2.1; }
  .fu-later rect { stroke-width: 2.2; }
  /* the grid on a phone: each domain on its own line, its five calls under it */
  .fu-grid, .fu-grid :is(thead, tbody) { display: block; }
  .fu-grid tr { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .fu-grid thead { position: sticky; top: calc(var(--hc-nav-h) + var(--hc-bar-h)); z-index: 2; background: #fff; }
  .fu-grid thead .fu-grid__corner { display: none; }
  .fu-grid thead th { font-size: 13px; padding-inline: 0; }
  .fu-grid tbody th { grid-column: 1 / -1; padding: 16px 0 0; border-bottom: 0; }
  .fu-grid td { padding-block: 14px 16px; }
  .fu-grid__name { font-size: 1.2rem; }
}

/* ============ REDUCED MOTION: the end states, held ============ */
@media (prefers-reduced-motion: reduce) {
  .fup *, .fup *::before, .fup *::after { animation: none !important; transition: none !important; }
  .fu-js [data-r], .fu-js .fu-read li, .fu-js .fu-walk .fu-stop, .fu-js .fu-walk :is(.fu-walk__panels, .fu-play) { opacity: 1 !important; transform: none !important; }
  .fu-js .fu-home > *, .fu-js .fu-grid .fu-dot, .fu-js .fu-loop__fig :is(.fu-node, .fu-loop__arc, .fu-loop__tip) { opacity: 1 !important; }
  .fu-js .fu-walk .fu-rail__line { transform: none !important; }
  .fu-home__wave { opacity: 1; }
  .fu-rel .learn-related__card:hover, .fu-play:hover, .fu-stop:hover .fu-stop__dot { transform: none; }
}

/* ============ PRINT: the schedule as a document ============ */
@media print {
  .fup .hc-bar, .fu-play, .fu-rail, .fu-next, .fu-js-only, .fu-hover-only, .fu-go[href^="#"], .fu-after__years { display: none !important; }
  .fu-js [data-r], .fu-js .fu-read li, .fu-js .fu-grid .fu-dot, .fu-js .fu-home > *, .fu-js .fu-loop__fig * { opacity: 1 !important; transform: none !important; animation: none !important; transition: none !important; }
  .fu-js .fu-call:not(.is-on) { display: grid; }
  .fu-call { break-inside: avoid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); padding-block: 18px; }
  .fu-call__facts { grid-column: 1 / -1; grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .fu-fact { grid-template-columns: minmax(0, 1fr); border-top: 0; }
  .fu-asked__text, .fu-loop__fig { position: static; }
  .fu-why, .fu-after { background: none; color: var(--ink); }
  .fu-after :is(h2, p, strong, em) { color: var(--ink) !important; }
  .fu-grid, .fu-read, .fu-step { break-inside: avoid; }
}

/* 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; }
}