/* /learn-who-this-isnt-for: its own sheet, loaded after site.css.
   The page is three lists, and each list has one drawn mark that it keeps
   everywhere it appears: a barred door (absolute exclusions), a signpost
   (conditions we point elsewhere) and a balance scale (case by case).
   Script: scripts/learn-who-this-isnt-for.js. With that script absent every
   part is visible, every expander still opens and every link still jumps. */

html:has(body.notfor) {
  --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);
}
.notfor {
  --nf-ease: cubic-bezier(.16, 1, .3, 1);
  --nf-gut: clamp(20px, 4vw, 56px);
  --nf-ice: #c9def2;           /* text on navy */
}

/* ============ GROUND RULES ============ */
.nf-wrap { max-width: calc(1240px + 2 * var(--nf-gut)); margin-inline: auto; padding-inline: var(--nf-gut); }
/* text fills its column; the column sets the measure */
.notfor main p { max-width: none; margin: 0; }
.notfor main a:not(.btn) { border-bottom: 0; }
.notfor main :is(ul, ol) { list-style: none; margin: 0; padding: 0; }
.notfor 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;
}
.notfor main h3 { font-family: var(--font-display); font-weight: 400; color: var(--ink); font-size: 1.32rem; line-height: 1.25; letter-spacing: 0; margin: 0; max-width: none; text-wrap: wrap; }
.notfor main h4 { font-family: var(--font-body); font-weight: 600; font-size: 15px; line-height: 1.4; letter-spacing: 0; text-transform: none; color: var(--ink); margin: 0; }
.notfor main :is(a, .btn, summary, input, button):focus-visible { outline: 2px solid var(--accent-blue); outline-offset: 3px; border-radius: 4px; }
.notfor .nf-call :is(a, .btn):focus-visible { outline-color: var(--accent-ice); }
/* a part that receives focus after a jump is not itself a control */
.notfor main :is(h1, h2, h3, section, li)[tabindex="-1"]:focus { outline: none; }
.notfor main section[id], .notfor main :is(li, details)[id] { scroll-margin-top: 0; }

/* a link inside a sentence */
.nf-in { color: var(--accent-blue-hover); font-weight: 600; text-decoration: underline; text-decoration-color: rgba(45, 110, 177, .45); text-decoration-thickness: 1.5px; text-underline-offset: 4px; transition: color 200ms, text-decoration-color 200ms; }
.nf-in:hover { color: var(--accent-blue); text-decoration-color: currentColor; }

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

/* the three marks, drawn the same way wherever they appear */
.nf-gl { display: block; flex: none; width: 56px; height: 56px; overflow: visible; }
.nf-gl :is(path, circle) { fill: none; stroke: var(--ink); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.nf-gl .nf-acc { stroke: var(--accent-blue); stroke-width: 2.2; }
.nf-gl .nf-dot { fill: var(--ink); stroke: none; }
.nf-gl .nf-beam { transform-box: view-box; transform-origin: 32px 20px; }

/* ============ REVEALS ============
   Hidden only once the script has said it is running (nf-js on <html>), so
   with no script nothing is ever hidden. Each part comes in its own way. */
.nf-js [data-r] { transition: opacity 620ms ease, transform 820ms var(--nf-ease); }
.nf-js [data-r]:not(.is-in) { opacity: 0; transform: translateY(18px); }
.nf-js [data-r="cells"]:not(.is-in), .nf-js [data-r="rows"]:not(.is-in), .nf-js [data-r="says"]:not(.is-in),
.nf-js [data-r="fork"]:not(.is-in), .nf-js [data-r="scale"]:not(.is-in), .nf-js [data-r="sheet"]:not(.is-in) { opacity: 1; transform: none; }

@keyframes nf-up { from { opacity: 0; transform: translateY(22px); } }
@keyframes nf-draw { from { stroke-dashoffset: 1; opacity: 0; } 12% { opacity: 1; } to { stroke-dashoffset: 0; opacity: 1; } }
@keyframes nf-pop { from { transform: scale(0); opacity: 0; } 70% { transform: scale(1.2); opacity: 1; } }
@keyframes nf-rock { 0% { transform: rotate(0); } 22% { transform: rotate(-7deg); } 50% { transform: rotate(5deg); } 74% { transform: rotate(-2.5deg); } 100% { transform: rotate(0); } }
@keyframes nf-swing { from { transform: rotate(-58deg); opacity: 0; } 30% { opacity: 1; } 70% { transform: rotate(5deg); } to { transform: rotate(0); } }
@keyframes nf-drop { from { transform: translateY(-16px); opacity: 0; } 60% { transform: translateY(2px); opacity: 1; } }
@keyframes nf-stamp { from { transform: scale(1.5) rotate(-5deg); opacity: 0; } 60% { transform: scale(.96) rotate(0); opacity: 1; } }
@keyframes nf-ring { 0%, 100% { opacity: .25; } 40% { opacity: 1; } }
@keyframes nf-said { from { clip-path: inset(0 100% 0 0); opacity: .4; } to { clip-path: inset(0 0 0 0); opacity: 1; } }
@keyframes nf-unfold { from { opacity: 0; transform: translateY(-8px); } }
@keyframes nf-found { 0% { box-shadow: 0 0 0 0 rgba(45, 110, 177, 0); background-color: transparent; } 18% { box-shadow: 0 0 0 10px var(--accent-wash); background-color: var(--accent-wash); } 70% { box-shadow: 0 0 0 10px var(--accent-wash); background-color: var(--accent-wash); } 100% { box-shadow: 0 0 0 10px rgba(234, 241, 248, 0); background-color: transparent; } }
@keyframes nf-found-wash { 0%, 100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); background-color: transparent; } 18%, 70% { box-shadow: 0 0 0 10px #fff; background-color: #fff; } }
@keyframes nf-hit { from { opacity: 0; transform: translateY(-6px); } }

/* ============ HERO ============ */
.nf-hero { padding-block: clamp(36px, 5vw, 72px) clamp(48px, 6vw, 88px); }
.nf-hero__h1 { font-family: var(--font-display); font-weight: 300; font-size: clamp(2.1rem, 4.6vw, 4.1rem); line-height: 1.06; letter-spacing: -.015em; color: var(--ink); margin: 0 0 clamp(28px, 4vw, 52px); max-width: none; text-wrap: wrap; }
/* a heading that has to wrap breaks where the styling changes */
.nf-hero__h1 > .h-lead, .nf-hero__h1 > em { display: inline-block; }
.nf-hero__h1 > em { color: var(--accent-blue); }
.nf-hero__grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(32px, 5vw, 88px); align-items: start; }
.nf-hero__answer { font-size: clamp(1.12rem, 1.5vw, 1.32rem); line-height: 1.6; color: var(--ink); }

/* the finder: a search box over the three lists */
.nf-find__box { margin-top: clamp(24px, 3vw, 36px); }
.nf-find__label { display: block; font-size: 15px; font-weight: 600; color: var(--ink); margin-bottom: 10px; }
.nf-find__field { position: relative; display: flex; align-items: center; }
.nf-find__lens { position: absolute; left: 16px; width: 22px; height: 22px; pointer-events: none; transition: transform 360ms var(--nf-ease); }
.nf-find__lens :is(circle, path) { fill: none; stroke: var(--ink-muted); stroke-width: 1.8; stroke-linecap: round; transition: stroke 200ms; }
.nf-find__field:focus-within .nf-find__lens { transform: scale(1.12) rotate(-8deg); }
.nf-find__field:focus-within .nf-find__lens :is(circle, path) { stroke: var(--accent-blue); }
.nf-find__input {
  width: 100%; height: 56px; padding: 0 52px 0 50px; font: inherit; font-size: 17px; color: var(--ink);
  background: #fff; border: 1.5px solid var(--border-strong); border-radius: 10px; -webkit-appearance: none; appearance: none;
  transition: border-color 200ms, box-shadow 260ms;
}
.nf-find__input::-webkit-search-cancel-button { display: none; }
.nf-find__input:hover { border-color: var(--ink-muted); }
.notfor main .nf-find__input:focus-visible { outline: none; border-color: var(--accent-blue); box-shadow: 0 0 0 4px rgba(45, 110, 177, .16); border-radius: 10px; }
.nf-find__clear { position: absolute; right: 6px; width: 44px; height: 44px; display: grid; place-items: center; background: none; border: 0; padding: 0; cursor: pointer; border-radius: 8px; color: var(--ink-muted); transition: color 200ms, transform 360ms var(--nf-ease); }
.nf-find__clear[hidden] { display: none; }
.nf-find__clear svg { width: 18px; height: 18px; }
.nf-find__clear path { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.nf-find__clear:hover { color: var(--ink); transform: rotate(90deg); }
.nf-find__status { min-height: 22px; margin-top: 8px !important; font-size: 14px; line-height: 22px; color: var(--ink-muted); }
.nf-find__hits li { animation: nf-hit 320ms var(--nf-ease) both; animation-delay: calc(var(--i, 0) * 40ms); }
.nf-find__hits a { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; min-height: 48px; padding: 12px 14px; margin-inline: -14px; border-radius: 8px; color: var(--ink); transition: background-color 200ms; }
.nf-find__hits a:hover { background: var(--accent-wash); }
.nf-hit__name { font-family: var(--font-display); font-size: 1.4rem; line-height: 1.3; }
.nf-hit__group { flex: none; font-size: 14px; color: var(--ink-muted); transition: color 200ms; }
.nf-find__hits a:hover .nf-hit__group { color: var(--accent-blue-hover); }
/* while the box has the keyboard, the first result shows the key that opens it */
@media (hover: hover) {
  .nf-find__box:has(.nf-find__input:focus) .nf-find__hits li:first-child .nf-hit__group::after { content: "\21B5"; display: inline-block; margin-left: 10px; padding: 0 6px; font-size: 14px; line-height: 20px; color: var(--accent-blue-hover); border: 1px solid var(--border-strong); border-radius: 4px; }
}
.nf-find__none { font-size: 16px; line-height: 1.6; color: var(--ink-soft); padding-block: 4px 12px; }
.nf-find__none[hidden] { display: none; }

.nf-groups { border-top: 1px solid var(--border-strong); }
.nf-groups li { border-bottom: 1px solid var(--border); }
.nf-groups a { display: grid; grid-template-columns: 56px minmax(0, 1fr) 28px; align-items: center; gap: 20px; padding-block: 18px; color: var(--ink); }
.nf-groups__t { font-family: var(--font-display); font-size: clamp(1.4rem, 2.1vw, 1.9rem); line-height: 1.2; transition: color 200ms; }
.nf-groups__go { font-size: 20px; color: var(--accent-blue); transform: rotate(90deg); transition: transform 360ms var(--nf-ease); }
.nf-groups a:hover .nf-groups__t { color: var(--accent-blue-hover); }
.nf-groups a:hover .nf-groups__go { transform: rotate(90deg) translateX(5px); }
/* pointing at a list moves its own mark: the bar drops, the arm swings out, the beam rocks */
.nf-groups a:hover .nf-gl--door .nf-acc { animation: nf-drop 520ms var(--nf-ease); }
.nf-gl .nf-arm { transform-box: view-box; transform-origin: 32px 18px; }
.nf-groups a:hover .nf-arm { animation: nf-swing 620ms var(--nf-ease); }
.nf-groups a:hover .nf-beam { animation: nf-rock 900ms var(--nf-ease); }

/* first paint: the question, the answer, then each list's mark is drawn in turn */
.nf-js .nf-hero__h1 > * { animation: nf-up 900ms var(--nf-ease) both; }
.nf-js .nf-hero__h1 > em { animation-delay: 110ms; }
.nf-js .nf-hero__answer { animation: nf-up 900ms var(--nf-ease) 240ms both; }
.nf-js .nf-find__box { animation: nf-up 800ms var(--nf-ease) 380ms both; }
.nf-js .nf-groups li { animation: nf-up 800ms var(--nf-ease) both; animation-delay: calc(520ms + var(--i) * 260ms); }
.nf-js .nf-groups .nf-d { stroke-dasharray: 1; animation: nf-draw 700ms var(--nf-ease) both; animation-delay: calc(640ms + var(--i) * 260ms); }
.nf-js .nf-groups .nf-d.nf-acc { animation-delay: calc(1080ms + var(--i) * 260ms); }
.nf-js .nf-groups .nf-dot { transform-box: fill-box; transform-origin: center; animation: nf-pop 420ms var(--nf-ease) both; animation-delay: calc(1000ms + var(--i) * 260ms); }
.nf-js .nf-groups li .nf-beam { animation: nf-rock 1500ms var(--nf-ease) 2200ms both; }

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

/* ============ ABSOLUTE EXCLUSIONS: a ledger, four across ============ */
.nf-hard { padding-block: clamp(48px, 6vw, 96px); border-top: 1px solid var(--border); }
.nf-hard__lede { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(28px, 5vw, 88px); align-items: start; margin-block: clamp(24px, 3vw, 40px) clamp(36px, 4vw, 56px); }
.nf-hard__lede p { font-size: 18px; line-height: 1.7; color: var(--ink-soft); }
.nf-hard__lede .nf-hard__later { font-family: var(--font-display); font-size: clamp(1.3rem, 1.9vw, 1.6rem); line-height: 1.35; color: var(--ink); padding-left: 24px; border-left: 3px solid var(--accent-blue); }
.nf-xs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--border-strong); }
/* a cell shares its three rows with the cells beside it, so every name and every paragraph starts level */
.nf-x { display: grid; grid-row: span 3; grid-template-rows: subgrid; row-gap: 0; align-content: start; justify-items: start; padding: 28px 28px 32px 0; border-bottom: 1px solid var(--border); }
@supports not (grid-template-rows: subgrid) { .nf-x { display: block; } }
.nf-x:not(:nth-child(4n + 1)) { padding-left: 28px; border-left: 1px solid var(--border); }
/* seven cells: the last one takes the empty place at the end of its row, so the bottom rule runs the full width */
.nf-x:last-child:nth-child(4n + 3) { grid-column: span 2; }
.nf-badge { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; border: 1.5px solid var(--border-strong); margin-bottom: 18px; }
.nf-badge svg { width: 26px; height: 26px; overflow: visible; }
.nf-badge path { fill: none; stroke: var(--ink); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.notfor .nf-x h3 { margin-bottom: 10px; font-size: 1.55rem; align-self: start; }
.nf-x p { font-size: 16px; line-height: 1.65; color: var(--ink-soft); }
.nf-x p strong { font-weight: 600; color: var(--ink); }
/* each cell arrives as its mark is drawn, one after the next along the row */
.nf-js .nf-xs:not(.is-in) .nf-x > * { opacity: 0; }
.nf-js .nf-xs:not(.is-in) .nf-x > :is(h3, p) { transform: translateY(14px); }
.nf-js .nf-xs .nf-x > * { transition: opacity 520ms ease calc(var(--i) * 70ms), transform 720ms var(--nf-ease) calc(var(--i) * 70ms); }
.nf-js .nf-xs.is-in .nf-badge path { stroke-dasharray: 1; animation: nf-draw 900ms var(--nf-ease) both; animation-delay: calc(120ms + var(--i) * 70ms); }
.nf-js .nf-xs.is-in .nf-badge { animation: nf-pop 520ms var(--nf-ease) both; animation-delay: calc(var(--i) * 70ms); }

/* the entry a search or a link has just landed on */
.notfor .is-found { animation: nf-found 2400ms ease both; }
.notfor .nf-not .is-found { animation-name: nf-found-wash; }

/* ============ CONDITIONS WE DON'T TREAT: the one tinted band ============ */
/* clipped sideways: its rows wait a little to the right before they arrive */
.nf-not { padding-block: clamp(48px, 6vw, 96px); background: var(--accent-wash); overflow-x: clip; }
.nf-not__head { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(28px, 5vw, 88px); align-items: center; }
.notfor .nf-not h2 { margin-bottom: clamp(20px, 2.4vw, 32px); }
.nf-not__text p { font-size: 18px; line-height: 1.7; color: var(--ink-soft); }
.nf-fork { margin: 0; }
.nf-fork svg { display: block; width: 100%; max-width: 420px; height: auto; margin-inline: auto; overflow: visible; }
.nf-fork :is(path, circle) { fill: none; stroke: var(--ink); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.nf-fork .nf-fork__shut { stroke: var(--ink-muted); stroke-dasharray: .03 .035; }
.nf-fork .nf-fork__open, .nf-fork .nf-fork__head { stroke: var(--accent-blue); stroke-width: 2.4; }
.nf-fork .nf-fork__gate path { fill: #fff; }
.nf-fork .nf-fork__arm { fill: #fff; stroke: var(--accent-blue); stroke-width: 2.2; }
.nf-fork .nf-fork__sheet path:first-child { fill: #fff; }
.nf-fork .nf-fork__ln { stroke: var(--ink-muted); stroke-width: 1.5; }
.nf-fork__gate { transform-box: fill-box; transform-origin: center bottom; }
.nf-fork__post { transform-box: fill-box; transform-origin: center bottom; }
.nf-fork__sheet { transform-box: fill-box; transform-origin: center; }
/* the road is walked to the fork, the barrier drops, the sign swings up and the open road runs on */
.nf-js .nf-fork:not(.is-in) :is(.nf-fork__road, .nf-fork__open, .nf-fork__head, .nf-fork__ln) { stroke-dasharray: 1; stroke-dashoffset: 1; opacity: 0; }
.nf-js .nf-fork:not(.is-in) :is(.nf-fork__shut, .nf-fork__gate, .nf-fork__post, .nf-fork__sheet) { opacity: 0; }
.nf-js .nf-fork.is-in .nf-fork__road { stroke-dasharray: 1; animation: nf-draw 500ms ease both; }
.nf-js .nf-fork.is-in .nf-fork__shut { animation: nf-up 500ms ease 420ms both; }
.nf-js .nf-fork.is-in .nf-fork__gate { animation: nf-drop 620ms var(--nf-ease) 760ms both; }
.nf-js .nf-fork.is-in .nf-fork__post { animation: nf-pop 520ms var(--nf-ease) 1100ms both; }
.nf-js .nf-fork.is-in .nf-fork__open { stroke-dasharray: 1; animation: nf-draw 800ms var(--nf-ease) 1450ms both; }
.nf-js .nf-fork.is-in .nf-fork__head { stroke-dasharray: 1; animation: nf-draw 300ms ease 2150ms both; }
.nf-js .nf-fork.is-in .nf-fork__sheet { animation: nf-pop 520ms var(--nf-ease) 2300ms both; }
.nf-js .nf-fork.is-in .nf-fork__ln { stroke-dasharray: 1; animation: nf-draw 600ms ease 2650ms both; }

.nf-rows { margin-top: clamp(32px, 4vw, 56px); border-top: 1px solid var(--border-strong); }
.nf-row { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 7fr) minmax(0, 2fr); gap: clamp(20px, 3vw, 48px); align-items: start; padding-block: 26px; border-bottom: 1px solid var(--border); }
.notfor .nf-row h3 { font-size: 1.75rem; }
.nf-row p { font-size: 17px; line-height: 1.65; color: var(--ink-soft); }
.nf-row p strong { font-weight: 600; color: var(--ink); }
.nf-row__v { justify-self: end; font-size: 14px; font-weight: 600; line-height: 1.2; color: var(--accent-blue-hover); padding: 8px 12px; border: 1.5px solid var(--accent-blue); border-radius: 4px; background: #fff; white-space: nowrap; transform-origin: center; }
.nf-js .nf-rows:not(.is-in) .nf-row > * { opacity: 0; }
.nf-js .nf-rows:not(.is-in) .nf-row > :is(h3, div) { transform: translateX(28px); }
.nf-js .nf-rows .nf-row > :is(h3, div) { transition: opacity 520ms ease calc(var(--i) * 110ms), transform 760ms var(--nf-ease) calc(var(--i) * 110ms); }
.nf-js .nf-rows.is-in .nf-row__v { animation: nf-stamp 460ms var(--nf-ease) both; animation-delay: calc(420ms + var(--i) * 110ms); }
.nf-not__after { margin-top: clamp(28px, 3vw, 40px) !important; font-size: 18px; line-height: 1.7; color: var(--ink-soft); }

/* ============ CASE BY CASE: the scale beside the list ============ */
.nf-case { padding-block: clamp(48px, 6vw, 96px); }
.notfor .nf-case h2 { margin-bottom: clamp(28px, 4vw, 52px); }
.nf-case__grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(32px, 5vw, 88px); align-items: start; }
.nf-case__side { position: sticky; top: calc(var(--hc-nav-h) + var(--hc-bar-h) + 28px); }
.nf-case__side p { font-size: 17px; line-height: 1.7; color: var(--ink-soft); }
.nf-case__side .nf-case__lead { font-family: var(--font-display); font-size: clamp(1.4rem, 2vw, 1.7rem); line-height: 1.3; color: var(--ink); margin-bottom: 12px !important; }
.nf-scale { margin: 0 0 24px; }
.nf-scale svg { display: block; width: 100%; max-width: 300px; height: auto; overflow: visible; }
.nf-scale :is(path, circle) { fill: none; stroke: var(--ink); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.nf-scale .nf-scale__bar { stroke: var(--accent-blue); stroke-width: 2.6; }
.nf-scale .nf-scale__pin { fill: #fff; }
.nf-scale .nf-scale__yes { stroke: var(--accent-blue); stroke-width: 2.6; }
.nf-scale .nf-scale__no { stroke: var(--ink-muted); stroke-width: 2.4; }
.nf-scale__beam { transform-box: view-box; transform-origin: 160px 56px; }
.nf-js .nf-scale:not(.is-in) :is(.nf-scale__yes, .nf-scale__no) { stroke-dasharray: 1; stroke-dashoffset: 1; opacity: 0; }
.nf-js .nf-scale:not(.is-in) svg { opacity: 0; transform: translateY(18px); }
.nf-js .nf-scale svg { transition: opacity 620ms ease, transform 820ms var(--nf-ease); }
.nf-js .nf-scale.is-in :is(.nf-scale__yes, .nf-scale__no) { stroke-dasharray: 1; animation: nf-draw 520ms var(--nf-ease) 500ms both; }
.nf-js .nf-scale.is-in .nf-scale__no { animation-delay: 760ms; }
/* the beam rocks when the scale arrives and each time a condition is opened, and always settles level */
.nf-scale.is-weighing .nf-scale__beam { animation: nf-rock 1500ms var(--nf-ease); }

.nf-cases { border-top: 1px solid var(--border-strong); }
.nf-c { border-bottom: 1px solid var(--border); }
/* the name and its sub-line are the summary's own children (a summary holds
   headings and phrases, no boxes): they wrap as a pair, and the chevron keeps
   the right edge on its own */
.nf-c summary { position: relative; display: flex; flex-wrap: wrap; align-items: baseline; align-content: center; gap: 4px 18px; min-height: 76px; padding: 16px 38px 16px 0; cursor: pointer; list-style: none; }
.nf-c summary::-webkit-details-marker { display: none; }
.nf-c summary::after { content: ""; position: absolute; top: 50%; right: 8px; width: 10px; height: 10px; margin-top: -7.5px; border-right: 2px solid var(--accent-blue); border-bottom: 2px solid var(--accent-blue); transform: rotate(45deg); transition: transform 360ms var(--nf-ease); }
.nf-c summary:hover::after { transform: translateY(3px) rotate(45deg); }
.nf-c[open] summary::after { margin-top: -2.5px; transform: rotate(-135deg); }
.nf-c[open] summary:hover::after { transform: translateY(-3px) rotate(-135deg); }
.notfor .nf-c summary h3 { font-size: 1.75rem; transition: color 200ms; }
.nf-c summary:hover h3 { color: var(--accent-blue-hover); }
.nf-c__s { font-size: 15px; color: var(--ink-muted); }
.nf-c__body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(20px, 3vw, 44px); padding: 4px 0 30px; }
.nf-c[open] .nf-c__body { animation: nf-unfold 420ms var(--nf-ease); }
.nf-tilt { padding-left: 18px; border-left: 3px solid var(--accent-blue); }
.nf-tilt--no { border-left-color: var(--border-strong); }
.notfor .nf-tilt h4 { margin-bottom: 6px; }
.notfor .nf-tilt--yes h4 { color: var(--accent-blue-hover); }
.nf-tilt p { font-size: 16px; line-height: 1.65; color: var(--ink-soft); }
.nf-tilt p b { font-weight: 600; color: var(--ink); }
.nf-js .nf-cases:not(.is-in) .nf-c { opacity: 0; transform: translateY(14px); }
.nf-js .nf-cases .nf-c { transition: opacity 520ms ease calc(var(--i) * 60ms), transform 720ms var(--nf-ease) calc(var(--i) * 60ms); }

/* ============ THE DECLINE CALL: the one navy band ============ */
.nf-call { padding-block: clamp(56px, 7vw, 104px); background: var(--navy-brand); color: #fff; }
.notfor .nf-call h2 { color: #fff; }
.nf-call__head { display: flex; align-items: center; gap: clamp(18px, 2.4vw, 32px); }
.nf-phone { flex: none; width: clamp(64px, 7vw, 92px); height: auto; overflow: visible; }
.nf-phone path { fill: none; stroke: var(--accent-ice); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.nf-phone .nf-phone__arc { stroke: #fff; stroke-width: 3.4; }
/* someone is speaking on the line, for as long as the band is on screen */
.nf-call.is-live .nf-phone__arc { animation: nf-ring 2400ms ease-in-out infinite; }
.nf-call.is-live .nf-phone__arc--b { animation-delay: 300ms; }
.nf-call__lede { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 64px); margin-block: clamp(24px, 3vw, 40px) clamp(36px, 4vw, 56px); }
.nf-call__lede p, .nf-call__after { font-size: 18px; line-height: 1.7; color: var(--nf-ice); }
.nf-says { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: auto 1fr; column-gap: clamp(24px, 3vw, 48px); }
.nf-say { display: grid; grid-row: span 2; grid-template-rows: subgrid; row-gap: 20px; margin: 0; padding-top: 24px; border-top: 1px solid rgba(255, 255, 255, .28); }
.nf-say figcaption { display: flex; align-items: center; gap: 16px; font-size: 15px; line-height: 1.4; color: var(--nf-ice); }
.nf-say figcaption b { display: block; font-weight: 600; color: #fff; }
.nf-say .nf-gl { width: 48px; height: 48px; }
.nf-say .nf-gl :is(path, circle) { stroke: var(--accent-ice); }
.nf-say .nf-gl .nf-acc { stroke: #fff; }
.nf-say .nf-gl .nf-dot { fill: var(--accent-ice); stroke: none; }
.nf-say blockquote { margin: 0; padding: 0; border: 0; quotes: "\201C" "\201D"; }
.nf-say blockquote p { font-family: var(--font-display); font-weight: 300; font-size: clamp(1.18rem, 1.45vw, 1.36rem); line-height: 1.5; color: #fff; }
.nf-say blockquote p::before { content: open-quote; }
.nf-say blockquote p::after { content: close-quote; }
/* each call is said in turn: its words arrive from the left, the way a sentence is heard */
.nf-js .nf-says:not(.is-in) .nf-say { opacity: 0; }
.nf-js .nf-says .nf-say { transition: opacity 400ms ease calc(var(--i) * 420ms); }
.nf-js .nf-says.is-in .nf-say blockquote { animation: nf-said 1100ms cubic-bezier(.3, 0, .2, 1) both; animation-delay: calc(120ms + var(--i) * 420ms); }
.nf-call__after { margin-top: clamp(36px, 4vw, 56px) !important; max-width: none; }
@supports not (grid-template-rows: subgrid) { .nf-say { display: block; } .nf-say figcaption { margin-bottom: 20px; } }

/* ============ WHY THE LIST IS PUBLIC ============ */
.nf-why { padding-block: clamp(48px, 6vw, 96px) clamp(40px, 5vw, 72px); }
.notfor .nf-why h2 { margin-bottom: clamp(28px, 4vw, 52px); }
.nf-why__grid { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: clamp(32px, 5vw, 88px); align-items: start; }
.nf-reason { font-size: 18px; line-height: 1.7; color: var(--ink-soft); }
.nf-reason strong { display: block; font-family: var(--font-display); font-weight: 400; font-size: 1.75rem; line-height: 1.25; color: var(--ink); margin-bottom: 8px; }
.nf-sheet { margin: 0; }
.nf-sheet svg { display: block; width: 100%; max-width: 220px; height: auto; margin-inline: auto; overflow: visible; transform: rotate(2deg); }
.nf-sheet .nf-sheet__page { fill: #fff; stroke: var(--ink); stroke-width: 1.8; stroke-linejoin: round; }
.nf-sheet .nf-sheet__lines path { fill: none; stroke: var(--border-strong); stroke-width: 3; stroke-linecap: round; }
.nf-sheet .nf-sheet__pin circle { fill: var(--accent-blue); stroke: none; }
.nf-sheet .nf-sheet__pin path { fill: none; stroke: var(--accent-blue); stroke-width: 2; stroke-linecap: round; }
.nf-sheet__pin { transform-box: fill-box; transform-origin: center; }
/* the list is written out line by line, then pinned up */
.nf-js .nf-sheet:not(.is-in) .nf-sheet__lines path { stroke-dasharray: 1; stroke-dashoffset: 1; opacity: 0; }
.nf-js .nf-sheet:not(.is-in) .nf-sheet__pin { opacity: 0; }
.nf-js .nf-sheet.is-in .nf-sheet__lines path { stroke-dasharray: 1; animation: nf-draw 420ms ease both; animation-delay: calc(var(--n) * 70ms); }
.nf-js .nf-sheet.is-in .nf-sheet__pin { animation: nf-drop 560ms var(--nf-ease) 1500ms both; }

/* native "Read more": opened for print, found by in-page search */
.nf-more { margin-top: 14px; }
.nf-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; }
.nf-more summary::-webkit-details-marker { display: none; }
.nf-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(--nf-ease); }
.nf-more summary:hover { color: var(--accent-blue); }
.nf-more summary:hover::after { transform: translateY(3px) rotate(45deg); }
.nf-more[open] summary::after { margin-top: 4px; transform: rotate(-135deg); }
.nf-more[open] summary:hover::after { transform: translateY(-3px) rotate(-135deg); }
.nf-more__shut, .nf-more[open] .nf-more__open { display: none; }
.nf-more[open] .nf-more__shut { display: inline; }
.nf-more__body { padding-block: 14px 6px; }
.nf-more__body p { font-size: 18px; line-height: 1.7; color: var(--ink-soft); }
.nf-more__body p + p { margin-top: 22px !important; padding-top: 22px; border-top: 1px solid var(--border); }
.nf-more[open] .nf-more__body { animation: nf-unfold 420ms var(--nf-ease); }

.nf-end { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(28px, 5vw, 88px); align-items: center; margin-top: clamp(40px, 5vw, 72px); padding-top: clamp(32px, 4vw, 48px); border-top: 1px solid var(--border-strong); }
.nf-end__line { font-family: var(--font-display); font-weight: 300; font-size: clamp(1.35rem, 2vw, 1.75rem); line-height: 1.4; color: var(--ink); }
.nf-end__next p { font-size: 17px; line-height: 1.6; color: var(--ink-soft); margin-bottom: 16px !important; }
.nf-end__acts { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; }

/* ============ READ ON ============ */
.nf-on { padding-block: clamp(40px, 5vw, 72px) clamp(56px, 7vw, 104px); border-top: 1px solid var(--border); background: none; }
.nf-on__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 40px; margin-bottom: clamp(20px, 3vw, 32px); }
.nf-on__title { display: flex; align-items: center; gap: 18px; }
.nf-pages { width: 56px; height: 56px; flex: none; }
.nf-pages path { fill: none; stroke: var(--ink); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.nf-pages .nf-pages__ln { stroke: var(--accent-blue); }
.nf-js .nf-on__title:not(.is-in) .nf-pages path { stroke-dasharray: 1; stroke-dashoffset: 1; }
.nf-js .nf-on__title.is-in .nf-pages path { stroke-dasharray: 1; animation: nf-draw 900ms var(--nf-ease) 150ms both; }
.nf-js .nf-on__title.is-in .nf-pages .nf-pages__ln { animation-delay: 700ms; }
.nf-on__up { display: flex; flex-wrap: wrap; gap: 0 32px; }
.nf-route { border-top: 1px solid var(--border-strong); }
.nf-route li { border-bottom: 1px solid var(--border); }
.nf-route a { display: grid; grid-template-columns: minmax(0, 1fr) 32px; align-items: center; gap: 20px; padding-block: 22px; color: var(--ink); }
.nf-route__t { font-family: var(--font-display); font-size: clamp(1.3rem, 2vw, 1.75rem); line-height: 1.25; transition: color 200ms, transform 420ms var(--nf-ease); }
.nf-route__go { font-size: 22px; color: var(--accent-blue); transition: transform 360ms var(--nf-ease); }
.nf-route a:hover .nf-route__t { color: var(--accent-blue-hover); transform: translateX(8px); }
.nf-route a:hover .nf-route__go { transform: translateX(6px); }

/* ============ NARROWER ============ */
@media (max-width: 1100px) {
  /* the bar's track can scroll here, so its edges fade */
  .notfor .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); }
  .nf-xs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .nf-x:not(:nth-child(4n + 1)) { padding-left: 0; border-left: 0; }
  .nf-x:nth-child(even) { padding-left: 28px; border-left: 1px solid var(--border); }
  .nf-x:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .nf-row { grid-template-columns: minmax(0, 3fr) minmax(0, 7fr); }
  .nf-row__v { grid-column: 2; justify-self: start; }
  .nf-says { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; row-gap: 36px; }
  .nf-say { display: block; grid-row: auto; }
  .nf-say figcaption { margin-bottom: 18px; }
}
@media (max-width: 900px) {
  .nf-hero__grid, .nf-hard__lede, .nf-not__head, .nf-case__grid, .nf-call__lede, .nf-why__grid, .nf-end { grid-template-columns: minmax(0, 1fr); }
  .nf-hero__grid { gap: 28px; }
  .nf-case__side { position: static; }
  .nf-case__side { display: grid; grid-template-columns: 120px minmax(0, 1fr); column-gap: 24px; align-items: center; }
  .nf-scale { grid-row: span 2; margin: 0; }
  .nf-case__side .nf-case__lead { align-self: end; }
  .nf-case__side > p:last-child { grid-column: 1 / -1; margin-top: 16px !important; }
  .nf-fork svg { max-width: 300px; }
  .nf-sheet { order: -1; }
  .nf-sheet svg { max-width: 150px; margin-inline: 0; }
  .nf-call__lede { gap: 16px; }
}
@media (max-width: 600px) {
  html:has(body.notfor) { --hc-bar-h: 48px; }
  .notfor .hc-bar__track { gap: 22px; }
  .nf-xs { grid-template-columns: minmax(0, 1fr); }
  .nf-x, .nf-x:nth-child(even) { display: grid; grid-row: auto; grid-template-rows: none; grid-template-columns: 52px minmax(0, 1fr); column-gap: 18px; padding: 24px 0; border-left: 0; }
  .nf-x .nf-badge { grid-row: span 2; margin: 0; }
  .notfor .nf-x h3 { align-self: center; margin: 0; }
  .nf-x p { grid-column: 1 / -1; margin-top: 14px !important; }
  .nf-row { grid-template-columns: minmax(0, 1fr); gap: 12px; padding-block: 22px; }
  .nf-row__v { grid-column: 1; }
  .nf-c__body { grid-template-columns: minmax(0, 1fr); padding-bottom: 24px; }
  .notfor .nf-c summary h3 { font-size: 1.5rem; }
  .nf-groups a { gap: 16px; }
  .nf-hard__lede .nf-hard__later { padding-left: 18px; }
  .nf-end .btn { width: 100%; }
  .nf-end__acts { gap: 8px; }
  .nf-hit__name { font-size: 1.25rem; }
}

/* ============ STILL ============
   Reduced motion: every drawing holds its finished state and nothing moves. */
@media (prefers-reduced-motion: reduce) {
  .notfor main *, .notfor main *::before, .notfor main *::after { animation: none !important; transition: none !important; }
  .nf-js [data-r]:not(.is-in), .nf-js [data-r]:not(.is-in) * { opacity: 1 !important; transform: none !important; stroke-dashoffset: 0 !important; }
  .nf-js :is(.nf-groups, .nf-badge, .nf-fork, .nf-scale, .nf-sheet, .nf-pages) :is(path, circle) { stroke-dasharray: none !important; }
  .notfor .hc-bar { transition: none !important; }
  .notfor .is-found { box-shadow: 0 0 0 10px var(--accent-wash); background-color: var(--accent-wash); }
  .notfor .nf-not .is-found { box-shadow: 0 0 0 10px #fff; background-color: #fff; }
}
@media print {
  .notfor .hc-bar, .nf-find__box { display: none !important; }
  /* an entry is never cut in two by a page break */
  .nf-x, .nf-row, .nf-c, .nf-say, .nf-reason, .nf-end { break-inside: avoid; }
  .nf-c summary::after, .nf-more summary { display: none; }
  .nf-groups__go, .nf-on { display: none; }
  .nf-js [data-r], .nf-js [data-r] * { opacity: 1 !important; transform: none !important; animation: none !important; stroke-dashoffset: 0 !important; }
  .nf-call { background: #fff; color: var(--ink); }
  .notfor .nf-call h2, .nf-say blockquote p, .nf-say figcaption b { color: var(--ink); }
  .nf-call__lede p, .nf-call__after, .nf-say figcaption { color: var(--ink-soft); }
  .nf-phone path, .nf-say .nf-gl :is(path, circle) { stroke: var(--ink); }
}

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