/* /spine-neck-back. The page's own sheet: nothing in it reaches another page. */

/* on :root, not <body>: the scroll padding below lives on <html> and has to
   read the same header height the script writes there. Only this page loads
   this sheet, so :root is this page. */
:root {
  --snb-nav-h: 0px; /* no header without JS; header.js mounts one */
  --snb-toc-h: 54px;
  --snb-radius: 6px;
}
html.js-ready { --snb-nav-h: 64px; }
/* scoped to the page's own sections: the shared closing band keeps its own measure and spacing */
.snb :is(.snb-hero, .snb-sec) p { max-width: none; }
/* keyboard focus and link jumps both stop clear of the header and the contents bar */
html { scroll-padding-top: calc(var(--snb-nav-h) + var(--snb-toc-h)); }
/* parts waiting to slide in never widen the page */
.snb main { overflow-x: clip; }
.snb-wrap { max-width: 1240px; margin: 0 auto; padding: 0 clamp(20px, 4vw, 56px); }

/* Headings: one line where the width allows. */
.snb-sec h2 {
  font-family: var(--font-display); font-weight: 300;
  font-size: clamp(2rem, 3.3vw, 3rem); line-height: 1.08; letter-spacing: -0.015em;
  color: var(--ink); margin: 0; text-wrap: balance;
}
.snb-sec h3 { font-family: var(--font-display); font-weight: 400; color: var(--ink); margin: 0; }
/* a heading that takes focus after a jump is read out, not ringed */
.snb [tabindex="-1"]:focus { outline: none; }

.snb-head { margin-bottom: clamp(36px, 4.5vw, 56px); }
.snb-lede { font-size: var(--body-lg-size); line-height: 1.6; color: var(--ink-soft); margin: 18px 0 0; }
.snb-prose p { margin: 0 0 1.1em; color: var(--ink-soft); line-height: 1.7; }
.snb-prose > :last-child, .snb-more > p:last-child { margin-bottom: 0; }
.snb-prose a { color: var(--accent-blue); }

.snb-sec { padding: clamp(72px, 9vw, 124px) 0; }
.snb-sec--wash { background: var(--accent-wash); }
.snb-sec--rule, .snb-sec--rel { border-top: 1px solid var(--border); }
.snb-sec--dark { background: var(--navy-brand); color: #fff; }
.snb-sec--dark h2, .snb-sec--dark h3 { color: #fff; }
.snb-sec--dark .snb-lede { color: rgba(255,255,255,0.8); }
.snb-sec--dark .snb-prose p { color: rgba(255,255,255,0.74); }
.snb-sec--dark .snb-prose strong { color: #fff; font-weight: 500; }
/* the site's link underline is navy at 24%, which vanishes on navy: here it takes the link's own colour */
.snb-sec--dark .snb-prose a { color: var(--accent-ice); border-bottom-color: currentColor; }

/* "Read more": a phone folds what a reader can skip. On a desktop the fold
   has no handle and is always open (the script reopens any it finds shut). */
.snb-more { margin: 0 0 1.1em; }
.snb-more > summary { display: none; list-style: none; }
.snb-more > summary::-webkit-details-marker { display: none; }
.snb-more[open] .snb-more__a, .snb-more:not([open]) .snb-more__b { display: none; }

/* Drawn icons: a faint ring and a stroke that draws in once its block is
   on screen. With no JS, or reduced motion, they are simply drawn. */
.snb-ic { width: 48px; height: 48px; flex: none; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.snb-ic circle:first-child { stroke: var(--border-strong); stroke-width: 1; }
.snb-ic .d { stroke: var(--accent-blue); stroke-width: 1.7; stroke-dasharray: 1; stroke-dashoffset: 0; transition: stroke-dashoffset 900ms var(--ease-out-expo) 250ms; }
html.reveal-ready [data-reveal]:not(.is-in) .snb-ic .d { stroke-dashoffset: 1; }

/* ---------- Hero: the headline rises a line at a time, the copy follows,
   and the scanner room is uncovered from the floor up ---------- */
@keyframes snb-rise { from { transform: translateY(108%); } to { transform: none; } }
@keyframes snb-up { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes snb-uncover { from { clip-path: inset(100% 0 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes snb-settle { from { transform: scale(1.08); } to { transform: none; } }
@keyframes snb-nudge { 0%, 100% { transform: rotate(45deg); } 45% { transform: translateY(5px) rotate(45deg); } }

.snb-hero { padding: clamp(28px, 3.5vw, 48px) 0 clamp(48px, 5vw, 64px); }
.snb-hero__grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr); gap: clamp(28px, 3.4vw, 44px) clamp(32px, 5vw, 72px); align-items: center; }
/* the headline runs the width of the page; the copy and the scanner room share the row under it */
.snb-hero h1 { grid-column: 1 / -1; }
.snb-hero h1 {
  font-family: var(--font-display); font-weight: 300; color: var(--ink);
  font-size: clamp(2.1rem, 4.1vw, 3.3rem); line-height: 1.06; letter-spacing: -0.02em; margin: 0;
}
.snb-hero h1 em { color: var(--accent-blue); }
/* each line is its own window: the words rise into it. The padding keeps descenders inside the window. */
.snb-line { display: inline-block; overflow: hidden; vertical-align: top; max-width: 100%; padding-bottom: 0.14em; margin-bottom: -0.14em; }
.snb-line > span { display: inline-block; animation: snb-rise 900ms var(--ease-out-expo) both; }
.snb-line:nth-child(2) > span { animation-delay: 110ms; }
.snb-hero__lede { font-size: var(--body-lg-size); line-height: 1.6; color: var(--ink-soft); margin: 0; animation: snb-up 800ms var(--ease-out-expo) 320ms both; }
.snb-hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; margin-top: 32px; animation: snb-up 800ms var(--ease-out-expo) 420ms both; }
.snb-textlink { color: var(--ink-soft); font-size: 15px; border: 0; min-height: 44px; display: inline-flex; align-items: center; text-decoration: underline; text-decoration-color: var(--border-strong); text-decoration-thickness: 1px; text-underline-offset: 6px; transition: color 200ms, text-decoration-color 200ms; }
.snb-textlink:hover { color: var(--accent-blue); text-decoration-color: var(--accent-blue); }

.snb-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 0 32px; margin-top: 44px; border-top: 1px solid var(--border); animation: snb-up 800ms var(--ease-out-expo) 520ms both; }
.snb-fact { display: grid; grid-template-rows: auto 1fr; padding: 20px 28px 4px 0; color: inherit; border: 0; border-bottom: 1px solid var(--border); position: relative; transition: border-color 200ms; }
.snb-fact::after {
  content: ''; position: absolute; right: 4px; top: 30px; width: 9px; height: 9px;
  border-right: 1.5px solid var(--accent-blue); border-bottom: 1.5px solid var(--accent-blue);
  transform: rotate(45deg); transition: transform 240ms var(--ease-out-expo);
  /* once, as the hero settles: these two go somewhere */
  animation: snb-nudge 900ms var(--ease-standard) 1500ms 1;
}
.snb-fact:nth-child(2)::after { animation-delay: 1650ms; }
.snb-fact:hover { border-bottom-color: var(--accent-blue); }
.snb-fact:hover::after { transform: translateY(4px) rotate(45deg); }
.snb-fact__n { font-family: var(--font-display); font-size: clamp(1.6rem, 2.2vw, 2rem); line-height: 1.15; color: var(--ink); margin: 0 0 8px; transition: color 200ms; }
.snb-fact__n em { color: var(--accent-blue); }
.snb-fact:hover .snb-fact__n { color: var(--accent-blue); }
.snb-fact__text { font-size: 15px; line-height: 1.55; color: var(--ink-muted); }
.snb-fact__text b { font-weight: 500; color: var(--ink); }
.snb-reviewed { font-size: 13px; color: var(--ink-muted); margin: 28px 0 0; animation: snb-up 800ms var(--ease-out-expo) 620ms both; }

.snb-hero__media { position: relative; margin: 0; border-radius: var(--snb-radius); overflow: hidden; aspect-ratio: 5 / 6; background: #0e2a52; max-height: 620px; justify-self: stretch; animation: snb-uncover 1200ms var(--ease-out-expo) 120ms both; }
.snb-hero__video { width: 100%; height: 100%; object-fit: cover; display: block; animation: snb-settle 1600ms var(--ease-out-expo) 120ms both; }
.snb-hero__pause {
  position: absolute; left: 14px; bottom: 14px; width: 44px; height: 44px; padding: 0; display: grid; place-items: center;
  border-radius: 50%; border: 1px solid rgba(255,255,255,0.45); background: rgba(11, 29, 58, 0.55); cursor: pointer;
  transition: background var(--dur-fast) var(--ease-standard), transform var(--dur-fast) var(--ease-standard);
}
.snb-hero__pause[hidden] { display: none; } /* shown by the script; without it there is nothing to pause */
.snb-hero__pause:hover { background: rgba(11, 29, 58, 0.8); transform: scale(1.06); }
.snb-hero__pause:active { transform: scale(0.96); }
.snb-hero__pause:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.snb-hero__pause svg { width: 20px; height: 20px; fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.snb-hero__pause-play { display: none; fill: #fff; }
.snb-hero__pause.is-paused .snb-hero__pause-bars { display: none; }
.snb-hero__pause.is-paused .snb-hero__pause-play { display: inline; }

/* ---------- The bar that follows the reader ---------- */
.snb-toc {
  position: sticky; top: var(--snb-nav-h); z-index: 40;
  background: rgba(255,255,255,0.94);
  backdrop-filter: saturate(180%) blur(12px); -webkit-backdrop-filter: saturate(180%) blur(12px);
  border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
  transition: box-shadow var(--dur-base) var(--ease-out-expo), opacity var(--dur-base) var(--ease-standard), visibility 0s;
}
/* floating: it says so with a quiet shadow */
.snb-toc.is-on { box-shadow: 0 8px 24px -18px rgba(11, 29, 58, 0.45); }
/* the closing call has nothing to jump to: the bar steps aside */
.snb-toc.is-end { opacity: 0; visibility: hidden; pointer-events: none; transition: box-shadow var(--dur-base) var(--ease-out-expo), opacity var(--dur-base) var(--ease-standard), visibility 0s var(--dur-base); }
/* --snb-toc-h is the whole bar, its two hairlines included: the script and the scroll padding both read it */
.snb-toc__inner { display: flex; align-items: center; min-height: calc(var(--snb-toc-h) - 2px); }
/* each link carries 8px of its own side padding (room for a focus ring the scrolling list would otherwise clip), so the list steps back by the same */
.snb-toc__list { list-style: none; margin: 0 -8px; padding: 0; display: flex; gap: clamp(4px, calc(3vw - 16px), 24px); overflow-x: auto; scrollbar-width: none; scroll-behavior: smooth; }
.snb-toc__list::-webkit-scrollbar { display: none; }
.snb-toc__list a {
  display: block; position: relative; white-space: nowrap; border: 0;
  padding: 14px 8px; font-size: 15px; color: var(--ink-muted); transition: color 200ms;
}
.snb-toc__list a::after {
  content: ''; position: absolute; left: 8px; right: 8px; bottom: 0; height: 2px; background: var(--accent-blue);
  transform: scaleX(0); transform-origin: left; transition: transform 320ms var(--ease-out-expo);
}
.snb-toc__list a:hover { color: var(--ink); }
.snb-toc__list a:hover::after { transform: scaleX(0.35); }
.snb-toc__list a[aria-current] { color: var(--ink); }
.snb-toc__list a[aria-current]::after { transform: scaleX(1); }

/* ---------- Candidates: the photo is uncovered from the top, the three
   verdicts arrive one under the other ---------- */
.snb-cand { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 5vw, 72px); align-items: start; }
/* never taller than the room under the two bars, or a laptop cuts its foot off for as long as it is stuck */
.snb-cand__photo { margin: 0; border-radius: var(--snb-radius); overflow: hidden; aspect-ratio: 2 / 3; max-height: calc(100vh - var(--snb-nav-h) - var(--snb-toc-h) - 48px); position: sticky; top: calc(var(--snb-nav-h) + var(--snb-toc-h) + 24px); }
/* the clip is on the picture, not the frame: a frame clipped to nothing is never seen arriving */
html.reveal-ready .snb-cand__photo[data-reveal]:not(.is-in) { opacity: 1; transform: none; }
html.reveal-ready .snb-cand__photo[data-reveal]:not(.is-in) img { clip-path: inset(0 0 100% 0); }
.snb-cand__photo img { width: 100%; height: 100%; object-fit: cover; display: block; clip-path: inset(0 0 0 0); }
.snb-fit { list-style: none; padding: 0; margin: 44px 0 0; border-top: 1px solid var(--border); }
html.reveal-ready .snb-fit[data-reveal]:not(.is-in) { opacity: 1; transform: none; }
.snb-fit__item { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 6px 20px; padding: 24px 0; border-bottom: 1px solid var(--border); transition: opacity 700ms var(--ease-out-expo), transform 700ms var(--ease-out-expo); }
.snb-fit__item:nth-child(2) { transition-delay: 140ms; }
.snb-fit__item:nth-child(3) { transition-delay: 280ms; }
.snb-fit__item:nth-child(2) .snb-ic .d { transition-delay: 390ms; }
.snb-fit__item:nth-child(3) .snb-ic .d { transition-delay: 530ms; }
html.reveal-ready .snb-fit:not(.is-in) .snb-fit__item { opacity: 0; transform: translateX(-18px); }
/* the verdict is the row's headline; what it is a verdict on sits under it */
.snb-fit__item .snb-ic { grid-row: span 2; }
.snb .snb-fit__label { font-family: var(--font-display); font-size: 1.7rem; line-height: 1.15; color: var(--accent-blue); margin: 0; align-self: end; }
.snb .snb-fit__item:nth-child(2) .snb-fit__label { color: var(--ink); }
.snb .snb-fit__item--route .snb-fit__label { color: var(--ink-muted); }
.snb-fit__item--route .snb-ic .d { stroke: var(--ink-muted); }
.snb-fit__item--strong .snb-ic circle:first-child { stroke: var(--accent-blue); }
.snb .snb-fit h3 { font-family: var(--font-body); font-weight: 500; font-size: 17px; line-height: 1.4; letter-spacing: 0; margin-bottom: 4px; }
.snb-fit__what p { margin: 0; color: var(--ink-soft); line-height: 1.65; font-size: 16px; }

/* ---------- Conditions: each scan is read once as it arrives ---------- */
@keyframes snb-scan { 0% { transform: translateY(-100%); opacity: 0; } 12% { opacity: 1; } 88% { opacity: 1; } 100% { transform: translateY(1000%); opacity: 0; } }
.snb-ind { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
/* four shared rows (scan, name, description, criteria), so the parts of two cards side by side start level */
.snb-ind__card { display: grid; grid-row: span 4; grid-template-rows: subgrid; row-gap: 0; background: #fff; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
.snb-ind__body { display: grid; grid-row: span 3; grid-template-rows: subgrid; row-gap: 0; align-content: start; }
@supports not (grid-template-rows: subgrid) {
  .snb-ind__card { grid-row: auto; grid-template-rows: auto 1fr; }
  .snb-ind__body { display: block; grid-row: auto; }
}
.snb-ind__scan { all: unset; box-sizing: border-box; position: relative; display: block; cursor: zoom-in; background: #000; aspect-ratio: 16 / 10; overflow: hidden; }
.snb-ind__scan::after { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 10%; background: linear-gradient(180deg, rgba(124,169,209,0), rgba(124,169,209,0.34) 80%, rgba(255,255,255,0.7)); opacity: 0; pointer-events: none; }
html.reveal-ready .snb-ind__card.is-in .snb-ind__scan::after { animation: snb-scan 1500ms var(--ease-standard) 350ms 1 both; }
.snb-ind__scan:focus-visible { outline: 2px solid var(--accent-blue); outline-offset: -4px; }
.snb-ind__scan img { width: 100%; height: 100%; object-fit: contain; display: block; }
.snb-ind__scan:hover img { transform: scale(1.035); }
.snb-ind__zoom {
  position: absolute; right: 12px; bottom: 12px; width: 36px; height: 36px; padding: 8px; box-sizing: border-box;
  border-radius: 50%; background: rgba(255,255,255,0.92); fill: none; stroke: var(--ink); stroke-width: 1.6; stroke-linecap: round;
  transition: transform 240ms var(--ease-out-expo);
}
.snb-ind__scan:hover .snb-ind__zoom { transform: scale(1.1); }
.snb-ind__body { padding: 26px 28px 28px; }
.snb-ind__body h3 { font-size: 1.65rem; line-height: 1.15; margin-bottom: 10px; }
.snb-ind__body > p { color: var(--ink-soft); line-height: 1.65; margin: 0 0 18px; align-self: start; }
.snb-ind__body h3 { align-self: start; }
.snb-ind__body ul { list-style: none; margin: 0; padding: 16px 0 0; border-top: 1px solid var(--border); display: flex; flex-wrap: wrap; align-content: start; gap: 8px 24px; }
.snb-ind__body li { font-size: 14.5px; color: var(--ink); display: flex; align-items: center; gap: 9px; }
.snb-ind__body li::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: var(--accent-blue); flex: none; }
.snb-ind__card:nth-child(even) { transition-delay: 90ms; }
/* side by side, the three criteria keep to three columns, so a long one wraps in place instead of dropping a row */
@media (min-width: 901px) {
  .snb-ind__body ul { display: grid; grid-template-columns: repeat(3, auto); justify-content: start; column-gap: 18px; }
  .snb-ind__body li { font-size: 14px; }
  .snb-ind__body li { align-items: baseline; }
  .snb-ind__body li::before { transform: translateY(-3px); }
}

/* ---------- The injection: the five steps arrive along their line ---------- */
.snb-proto { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: clamp(32px, 5vw, 72px); align-items: start; }
.snb-proto__photo { margin: 0; border-radius: var(--snb-radius); overflow: hidden; aspect-ratio: 4 / 5; }
html.reveal-ready .snb-proto__photo[data-reveal]:not(.is-in) { transform: scale(0.94); }
.snb-proto__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.snb-steps { list-style: none; margin: clamp(56px, 7vw, 88px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 28px; position: relative; }
html.reveal-ready .snb-steps[data-reveal]:not(.is-in) { opacity: 1; transform: none; }
.snb-steps::before {
  content: ''; position: absolute; top: 24px; left: 24px; right: calc((100% - 112px) / 5 - 24px); height: 1px; background: rgba(255,255,255,0.22);
  transform-origin: left; transition: transform 1400ms var(--ease-out-expo);
}
html.reveal-ready .snb-steps:not(.is-in)::before { transform: scaleX(0); }
.snb-step { position: relative; transition: opacity 700ms var(--ease-out-expo), transform 700ms var(--ease-out-expo); }
html.reveal-ready .snb-steps:not(.is-in) .snb-step { opacity: 0; transform: translateY(14px); }
.snb-step .snb-ic { background: var(--navy-brand); border-radius: 50%; margin-bottom: 20px; }
.snb-step .snb-ic circle:first-child { stroke: rgba(255,255,255,0.32); }
.snb-step .snb-ic .d { stroke: var(--accent-ice); }
.snb-step h3 { font-size: 1.35rem; line-height: 1.2; margin-bottom: 10px; }
.snb-step p { font-size: 15px; line-height: 1.6; color: rgba(255,255,255,0.72); margin: 0; }
.snb-step p.snb-step__meta { margin-top: 12px; font-size: 13.5px; color: rgba(255,255,255,0.88); }
.snb-steps .snb-step:nth-child(2) { transition-delay: 150ms; }
.snb-steps .snb-step:nth-child(3) { transition-delay: 300ms; }
.snb-steps .snb-step:nth-child(4) { transition-delay: 450ms; }
.snb-steps .snb-step:nth-child(5) { transition-delay: 600ms; }
.snb-steps .snb-step:nth-child(2) .d { transition-delay: 400ms; }
.snb-steps .snb-step:nth-child(3) .d { transition-delay: 550ms; }
.snb-steps .snb-step:nth-child(4) .d { transition-delay: 700ms; }
.snb-steps .snb-step:nth-child(5) .d { transition-delay: 850ms; }

/* ---------- Timeline: the line fills, each point lands as it is reached ---------- */
@keyframes snb-ring { from { box-shadow: 0 0 0 0 rgba(45,110,177,0.5); } to { box-shadow: 0 0 0 6px rgba(45,110,177,0.14); } }
.snb-time { position: relative; }
html.reveal-ready .snb-time[data-reveal]:not(.is-in) { opacity: 1; transform: none; }
/* the track runs from the first dot's centre to the last one's, never past it */
.snb-time__track { position: absolute; top: 0; left: 8px; width: calc((100% - 96px) * 0.75 + 96px); height: 56px; overflow: visible; }
.snb-time__base { stroke: var(--border-strong); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.snb-time__fill { stroke: var(--accent-blue); stroke-width: 2.5; vector-effect: non-scaling-stroke; stroke-dasharray: 1; stroke-dashoffset: 0; transition: stroke-dashoffset 1800ms var(--ease-out-expo) 200ms; }
html.reveal-ready .snb-time:not(.is-in) .snb-time__fill { stroke-dashoffset: 1; }
.snb-time__pts { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; position: relative; }
.snb-time__pt > :not(.snb-time__dot) { transition: opacity 700ms var(--ease-out-expo); }
html.reveal-ready .snb-time:not(.is-in) .snb-time__pt > :not(.snb-time__dot) { opacity: 0; }
.snb-time__dot { display: block; width: 16px; height: 16px; border-radius: 50%; background: #fff; border: 2px solid var(--accent-blue); margin: 20px 0 24px; box-sizing: border-box; transition: transform 500ms var(--ease-out-expo); }
.snb-time__pt--key .snb-time__dot { background: var(--accent-blue); box-shadow: 0 0 0 6px rgba(45,110,177,0.14); }
html.reveal-ready .snb-time.is-in .snb-time__pt--key .snb-time__dot { animation: snb-ring 900ms var(--ease-out-expo) 700ms 1 both; }
html.reveal-ready .snb-time.is-in .snb-time__pt--key:nth-child(3) .snb-time__dot { animation-delay: 1100ms; }
html.reveal-ready .snb-time:not(.is-in) .snb-time__dot { transform: scale(0); }
.snb-time__pt:nth-child(2) > * { transition-delay: 500ms; }
.snb-time__pt:nth-child(3) > * { transition-delay: 900ms; }
.snb-time__pt:nth-child(4) > * { transition-delay: 1300ms; }
.snb-time__when { font-family: var(--font-display); font-size: clamp(1.9rem, 2.6vw, 2.5rem); line-height: 1; color: var(--ink); margin: 0 0 10px; }
.snb-time__pt--key .snb-time__when { color: var(--accent-blue); }
.snb .snb-time__pt h3 { font-family: var(--font-body); font-weight: 500; font-size: 16px; letter-spacing: 0; margin-bottom: 8px; }
.snb-time__pt p:last-child { font-size: 15px; line-height: 1.6; color: var(--ink-soft); margin: 0; }
/* what the course looks like, and what the first days feel like, side by side */
.snb-after { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 5vw, 72px); margin-top: clamp(56px, 7vw, 88px); padding-top: clamp(32px, 4vw, 48px); border-top: 1px solid var(--border); align-items: start; }
.snb-after > p { margin: 0; text-wrap: pretty; font-family: var(--font-display); font-size: clamp(1.3rem, 1.7vw, 1.55rem); line-height: 1.4; color: var(--ink); }
.snb-after .snb-more { margin: 0; }

/* ---------- A fusion: a spine with one segment fixed. Every joint gives a
   little as the column sways; the fixed pair moves as one piece, and the
   discs either side of it take more. ---------- */
@keyframes snb-sway { 0%, 100% { transform: rotate(0deg); } 25% { transform: rotate(0.55deg); } 75% { transform: rotate(-0.55deg); } }
@keyframes snb-sway-load { 0%, 100% { transform: rotate(0deg); } 25% { transform: rotate(1.9deg); } 75% { transform: rotate(-1.9deg); } }
@keyframes snb-press { from { transform: scaleY(1); } to { transform: scaleY(0.93); } }
.snb-fusion { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.snb-fusion .snb-head { margin-bottom: clamp(24px, 3vw, 36px); }
.snb-spine { margin: 0; }
html.reveal-ready .snb-spine[data-reveal]:not(.is-in) { opacity: 1; transform: none; }
/* each bone and disc rises in turn (--i), and each joint turns about its own disc */
.snb-spine__n0 { --i: 0; } .snb-spine__n1 { --i: 1; } .snb-spine__n2 { --i: 2; } .snb-spine__n3 { --i: 3; } .snb-spine__n4 { --i: 4; } .snb-spine__n5 { --i: 5; } .snb-spine__n6 { --i: 6; }
.snb-spine__j--p1 { transform-origin: 120px 433px; } .snb-spine__j--p2 { transform-origin: 120px 375px; } .snb-spine__j--p3 { transform-origin: 120px 317px; }
.snb-spine__j--p4 { transform-origin: 120px 259px; } .snb-spine__j--p5 { transform-origin: 120px 201px; } .snb-spine__j--p6 { transform-origin: 120px 143px; }
.snb-spine__svg { display: block; width: 100%; max-width: 280px; height: auto; margin: 0 auto; overflow: visible; }
.snb-spine__v, .snb-spine__disc { transition: opacity 600ms var(--ease-out-expo), transform 600ms var(--ease-out-expo), fill 700ms var(--ease-standard), stroke 700ms var(--ease-standard); transition-delay: calc(var(--i) * 70ms); }
html.reveal-ready .snb-spine:not(.is-in) :is(.snb-spine__v, .snb-spine__disc) { opacity: 0; transform: translateY(16px); }
.snb-spine__v rect, .snb-spine__proc { fill: #fff; stroke: var(--ink-soft); stroke-width: 1.6; stroke-linejoin: round; }
.snb-spine__disc { fill: var(--accent-wash); stroke: var(--accent-ice); stroke-width: 1.2; transform-box: fill-box; transform-origin: 50% 50%; }
.snb-spine__disc--fused { fill: rgba(11, 29, 58, 0.2); stroke: var(--ink-muted); }
/* the two that take the extra load turn once the rod is in */
.snb-spine__disc--load { fill: var(--accent-blue); stroke: var(--accent-blue); }
html.reveal-ready .snb-spine.is-in .snb-spine__disc--load { transition-delay: calc(var(--i) * 70ms), calc(var(--i) * 70ms), 1700ms, 1700ms; }
html.reveal-ready .snb-spine:not(.is-in) .snb-spine__disc--load { fill: var(--accent-wash); stroke: var(--accent-ice); }
.snb-spine__hw .d { fill: none; stroke: var(--ink); stroke-width: 3.2; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 0; transition: stroke-dashoffset 600ms var(--ease-out-expo) 900ms; }
.snb-spine__hw .snb-spine__rod { transition-delay: 1250ms; }
.snb-spine__hw circle { fill: var(--ink); transform-box: fill-box; transform-origin: 50% 50%; transition: transform 400ms var(--ease-out-expo) 1200ms; }
html.reveal-ready .snb-spine:not(.is-in) .snb-spine__hw .d { stroke-dashoffset: 1; }
html.reveal-ready .snb-spine:not(.is-in) .snb-spine__hw circle { transform: scale(0); }
/* it sways only while it is on screen */
.snb-spine.is-live .snb-spine__j { animation: snb-sway 6s ease-in-out 2600ms infinite; }
.snb-spine.is-live .snb-spine__j--load { animation-name: snb-sway-load; }
.snb-spine.is-live .snb-spine__j--fused { animation: none; }
.snb-spine.is-live .snb-spine__disc--load { animation: snb-press 1500ms ease-in-out 2600ms infinite alternate; }
.snb-limit p { margin: 0 0 1.1em; color: var(--ink-soft); line-height: 1.7; }
.snb-limit p:last-child { margin-bottom: 0; }
.snb .snb-limit__lead { font-family: var(--font-display); font-size: clamp(1.45rem, 2.1vw, 1.95rem); line-height: 1.3; color: var(--ink); margin-bottom: 0.9em; }

/* ---------- Questions (the rows keep the hub markup) ---------- */
@keyframes snb-answer { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.snb .hub-faq__list details { border-top: 1px solid var(--border); }
.snb .hub-faq__list details:last-of-type { border-bottom: 1px solid var(--border); }
.snb .hub-faq__list summary {
  list-style: none; cursor: pointer; padding: 24px 0;
  display: grid; grid-template-columns: minmax(0, 1fr) 32px; gap: 20px; align-items: center;
  font-family: var(--font-display); font-size: clamp(1.25rem, 1.8vw, 1.55rem); color: var(--ink); transition: color 200ms;
}
.snb .hub-faq__list summary::-webkit-details-marker { display: none; }
.snb .hub-faq__list summary:hover { color: var(--accent-blue); }
.snb .hub-faq__ic { position: relative; width: 32px; height: 32px; border: 1px solid var(--border-strong); border-radius: 50%; transition: background 200ms, border-color 200ms, transform 300ms var(--ease-out-expo); }
.snb .hub-faq__ic::before, .snb .hub-faq__ic::after { content: ''; position: absolute; left: 50%; top: 50%; width: 12px; height: 1.5px; background: var(--accent-blue); transform: translate(-50%, -50%); transition: transform 300ms var(--ease-out-expo), background 200ms; }
.snb .hub-faq__ic::after { transform: translate(-50%, -50%) rotate(90deg); }
.snb .hub-faq__list summary:hover .hub-faq__ic { border-color: var(--accent-blue); }
.snb .hub-faq__list details[open] .hub-faq__ic { background: var(--accent-blue); border-color: var(--accent-blue); }
.snb .hub-faq__list details[open] .hub-faq__ic::before { background: #fff; }
.snb .hub-faq__list details[open] .hub-faq__ic::after { background: #fff; transform: translate(-50%, -50%) rotate(0deg); }
.snb .hub-faq__a { padding: 0 52px 28px 0; font-size: 16.5px; line-height: 1.7; color: var(--ink-soft); }
.snb .hub-faq__a a { color: var(--accent-blue); }

/* ---------- Other regions ---------- */
.snb-head--row { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 32px; }
.snb-rel { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
html.reveal-ready .snb-rel[data-reveal]:not(.is-in) { opacity: 1; transform: none; }
.snb-rel__card { border: 0; display: flex; flex-direction: column; color: inherit; position: relative; padding-right: 28px; transition: opacity 700ms var(--ease-out-expo), transform 700ms var(--ease-out-expo); }
.snb-rel__card:nth-child(2) { transition-delay: 110ms; }
.snb-rel__card:nth-child(3) { transition-delay: 220ms; }
html.reveal-ready .snb-rel:not(.is-in) .snb-rel__card { opacity: 0; transform: translateY(24px); }
.snb-rel__img { display: block; aspect-ratio: 4 / 3; border-radius: var(--snb-radius); overflow: hidden; background: #dfe7f0; margin: 0 -28px 18px 0; }
.snb-rel__img img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; display: block; }
.snb-rel__card:hover .snb-rel__img img { transform: scale(1.04); }
.snb-rel__title { font-family: var(--font-display); font-size: 1.6rem; line-height: 1.15; color: var(--ink); margin-bottom: 6px; transition: color 200ms; }
.snb-rel__card:hover .snb-rel__title { color: var(--accent-blue); }
.snb-rel__text { font-size: 15px; line-height: 1.55; color: var(--ink-soft); }
/* the arrow that says the card goes somewhere, drawn rather than written */
.snb-rel__card::after {
  content: ''; position: absolute; right: 4px; bottom: 8px; width: 9px; height: 9px;
  border-top: 1.5px solid var(--accent-blue); border-right: 1.5px solid var(--accent-blue);
  transform: rotate(45deg); transition: transform 240ms var(--ease-out-expo);
}
.snb-rel__card:hover::after { transform: translateX(4px) rotate(45deg); }
.snb-rel__card:focus-visible { outline: 2px solid var(--accent-blue); outline-offset: 6px; border-radius: var(--snb-radius); }

/* the emergency-care line: 0.42 white at 12px (site.css) measures 3.66:1 on navy; 0.7 at 13px is about 7:1 */
.snb .ctaband__disclaimer { max-width: 560px; color: rgba(255,255,255,0.7); font-size: 13px; }
.snb .ctaband h2 { margin-top: 0; }

/* ---------- Enlarged image ---------- */
.snb-zoom { border: 0; padding: 0; background: transparent; max-width: 94vw; max-height: 92vh; overflow: visible; }
.snb-zoom::backdrop { background: rgba(6, 16, 34, 0.86); }
.snb-zoom:not([open]) img { display: none; }
/* width is set by the script from the full image's size before it opens */
.snb-zoom img { display: block; max-width: 94vw; max-height: calc(100vh - 96px); height: auto; object-fit: contain; border-radius: 4px; }
/* the close button sits inside the image's corner, so it is on screen at any height */
.snb-zoom form { position: absolute; top: 10px; right: 10px; margin: 0; }
.snb-zoom__close, .snb-zoom__step { width: 44px; height: 44px; padding: 0; border-radius: 50%; border: 1px solid rgba(255,255,255,0.5); background: rgba(6, 16, 34, 0.72); color: #fff; font-size: 24px; line-height: 1; cursor: pointer; transition: background var(--dur-fast) var(--ease-standard), transform var(--dur-fast) var(--ease-standard); }
.snb-zoom__close:hover, .snb-zoom__step:hover { background: rgba(6, 16, 34, 0.92); }
.snb-zoom__close:active { transform: scale(0.94); }
/* one scan to the next without closing; the script hides these when there is only one scan, and the arrow keys do the same */
.snb-zoom__step { position: absolute; top: 50%; margin-top: -22px; display: grid; place-items: center; }
.snb-zoom__step[hidden] { display: none; }
/* which scan is showing, said aloud when it changes; never seen */
.snb-zoom__now { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.snb-zoom__step--prev { left: 10px; }
.snb-zoom__step--next { right: 10px; }
.snb-zoom__step:hover { transform: scale(1.06); }
.snb-zoom__step:active { transform: scale(0.94); }
.snb-zoom__step svg { width: 22px; height: 22px; fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- Small considerate touches ---------- */
/* photos fade up once decoded; the class that hides them is only ever set
   by the script, and only for images still loading */
html.snb-fade :is(.snb-cand__photo, .snb-proto__photo, .snb-ind__scan, .snb-rel__img) img:not(.is-loaded) { opacity: 0; }
:is(.snb-cand__photo, .snb-proto__photo, .snb-ind__scan, .snb-rel__img) img { transition: opacity var(--dur-slow) var(--ease-out-expo), transform 600ms var(--ease-out-expo), clip-path 1200ms var(--ease-out-expo); }

/* an answer eases open where the browser can size to content; elsewhere it arrives with a short fade */
@supports (interpolate-size: allow-keywords) {
  .snb .hub-faq__list { interpolate-size: allow-keywords; }
  .snb .hub-faq__list details::details-content {
    block-size: 0; overflow: hidden; opacity: 0;
    transition: block-size var(--dur-base) var(--ease-out-expo), opacity var(--dur-base) var(--ease-out-expo), content-visibility var(--dur-base) allow-discrete;
  }
  .snb .hub-faq__list details[open]::details-content { block-size: auto; opacity: 1; }
}
@supports not (interpolate-size: allow-keywords) {
  .snb .hub-faq__list details[open] .hub-faq__a { animation: snb-answer var(--dur-base) var(--ease-out-expo) both; }
}
.snb-more[open] > p { animation: snb-answer var(--dur-base) var(--ease-out-expo) both; }

/* the page behind an open image holds still; the gutter stays so nothing shifts sideways */
/* on <body>, as the site's open menu does it: <body> is what hands its overflow to the viewport here, and locking <html> instead turns <body> into the scroller and un-sticks the header and this page's bar */
html:has(.snb-zoom[open]) { scrollbar-gutter: stable; }
body:has(.snb-zoom[open]) { overflow: hidden; }

/* the enlarged image arrives instead of appearing, and leaves the same way.
   Where a browser cannot ease `display`, it simply opens and closes. */
.snb-zoom, .snb-zoom::backdrop { opacity: 0; transition: opacity var(--dur-base) var(--ease-out-expo), display var(--dur-base) allow-discrete, overlay var(--dur-base) allow-discrete; }
.snb-zoom[open], .snb-zoom[open]::backdrop { opacity: 1; }
@starting-style { .snb-zoom[open], .snb-zoom[open]::backdrop { opacity: 0; } }

/* keyboard: a ring you can see on everything you can reach */
.snb-toc__list a:focus-visible, .snb-fact:focus-visible, .snb-textlink:focus-visible,
.snb .hub-faq__list summary:focus-visible, .snb-more > summary:focus-visible {
  outline: 2px solid var(--accent-blue); outline-offset: 4px; border-radius: 4px;
}
.snb-zoom__close:focus-visible, .snb-zoom__step:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
/* drawn inside the link: the list scrolls sideways, so it clips anything outside it */
.snb-toc__list a:focus-visible { outline-offset: -2px; }

/* ---------- Narrower screens ---------- */
@media (max-width: 1080px) {
  .snb-steps { grid-template-columns: 1fr; gap: 0; }
  .snb-steps::before { bottom: 24px; right: auto; width: 1px; height: auto; transform-origin: top; }
  html.reveal-ready .snb-steps:not(.is-in)::before { transform: scaleY(0); }
  .snb-step { display: grid; grid-template-columns: 48px minmax(0, 1fr); column-gap: 20px; padding-bottom: 32px; }
  .snb-step:last-child { padding-bottom: 0; }
  .snb-step .snb-ic { grid-row: span 6; margin: 0; }
  .snb-time__track { display: none; }
  .snb-time__pts { grid-template-columns: 1fr; gap: 0; border-left: 1.5px solid var(--border-strong); margin-left: 7px; }
  .snb-time__pt { display: grid; grid-template-columns: 0 minmax(0, 1fr); column-gap: 24px; padding: 0 0 32px; }
  .snb-time__pt:last-child { padding-bottom: 0; }
  .snb-time__dot { grid-row: span 3; margin: 6px 0 0 -9px; }
  .snb-time__pt > :not(.snb-time__dot) { grid-column: 2; }
}
@media (max-width: 900px) {
  .snb-hero__grid, .snb-cand, .snb-proto, .snb-after, .snb-fusion { grid-template-columns: 1fr; } .snb-fusion > .snb-spine { order: 2; }
  .snb-hero__media { order: -1; aspect-ratio: 16 / 11; max-height: none; }
  .snb-hero__grid { align-items: start; }
  .snb-cand__photo { position: static; max-height: none; aspect-ratio: 16 / 11; }
  .snb-cand__photo img { object-position: 50% 35%; }
  .snb-proto__photo { aspect-ratio: 16 / 11; }
  .snb-proto__photo img { object-position: 50% 30%; }
  .snb-ind, .snb-rel { grid-template-columns: 1fr; }
  .snb-spine__svg { max-width: 190px; }
  .snb-toc__list { margin: 0 calc(-1 * clamp(20px, 4vw, 56px)); padding: 0 calc(clamp(20px, 4vw, 56px) - 8px); mask-image: linear-gradient(90deg, transparent 0, #000 20px, #000 calc(100% - 28px), transparent 100%); -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 20px, #000 calc(100% - 28px), transparent 100%); }
  /* the fold's handle: a control, 44px tall, that says which way it goes */
  .snb-more > summary {
    display: inline-flex; align-items: center; gap: 10px; min-height: 44px; cursor: pointer;
    font-size: 15px; font-weight: 500; color: var(--accent-blue);
  }
  .snb-more > summary::after { content: ''; width: 8px; height: 8px; margin-top: -4px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg); transition: transform 240ms var(--ease-out-expo); }
  .snb-more[open] > summary::after { transform: translateY(4px) rotate(-135deg); }
  .snb-sec--dark .snb-more > summary { color: var(--accent-ice); }
}
@media (max-width: 560px) {
  .snb-sec { padding: 60px 0; }
  .snb-after { gap: 12px; }
  .snb-facts { grid-template-columns: 1fr; }
  .snb-fact { padding-bottom: 18px; }
  .snb .hub-faq__a { padding-right: 0; }
  .snb-rel__img { aspect-ratio: 16 / 10; }
  /* a phone's scan is too small to carry two arrows: they sit under it */
  .snb-zoom__step { top: auto; bottom: -58px; margin-top: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .snb *, .snb *::before, .snb *::after { animation: none !important; }
  .snb-ic .d, .snb-time__fill, .snb-time__dot, .snb-steps::before, .snb-spine__hw .d, .snb-spine__hw circle, .snb-spine__v, .snb-spine__disc, .snb-fit__item, .snb-step, .snb-rel__card, .snb-cand__photo img, .snb-proto__photo, .snb-time__pt > * { transition: none !important; stroke-dashoffset: 0 !important; transform: none !important; opacity: 1 !important; clip-path: none !important; }
  .snb-toc, .snb .hub-faq__list details::details-content, .snb-zoom, .snb-zoom::backdrop { transition: none !important; }
  :is(.snb-cand__photo, .snb-proto__photo, .snb-ind__scan, .snb-rel__img) img { transition: none !important; opacity: 1 !important; }
}
/* forced colours repaint backgrounds, which is what the small marks here are drawn with */
@media (forced-colors: active) {
  .snb-toc__list a::after, .snb-ind__body li::before, .snb-time__pt--key .snb-time__dot,
  .snb .hub-faq__ic::before, .snb .hub-faq__ic::after,
  .snb .hub-faq__list details[open] .hub-faq__ic::before, .snb .hub-faq__list details[open] .hub-faq__ic::after { background: CanvasText; forced-color-adjust: none; }
  .snb-hero__pause svg, .snb-zoom__step svg { stroke: ButtonText; }
  .snb-hero__pause-play { fill: ButtonText; }
}
/* on paper: the finished page, whether or not it was scrolled to; the controls stay behind */
@media print {
  .snb *, .snb *::before, .snb *::after { animation: none !important; transition: none !important; }
  .snb [data-reveal], .snb-fit__item, .snb-step, .snb-rel__card, .snb-spine__v, .snb-spine__disc, .snb-time__pt > * { opacity: 1 !important; transform: none !important; }
  .snb-ic .d, .snb-time__fill, .snb-spine__hw .d { stroke-dashoffset: 0 !important; }
  .snb-time__dot, .snb-steps::before, .snb-spine__hw circle { transform: none !important; }
  .snb-cand__photo img, .snb-hero__media { clip-path: none !important; }
  .snb-spine__disc--load { fill: var(--accent-blue) !important; stroke: var(--accent-blue) !important; }
  :is(.snb-cand__photo, .snb-proto__photo, .snb-ind__scan, .snb-rel__img) img { opacity: 1 !important; }
  .snb-toc, .snb-hero__pause, .snb-ind__zoom, .snb-more > summary, .hub-faq__ic, .snb-fact::after, .snb-rel__card::after { display: none !important; }
  .snb-cand__photo { position: static; max-height: none; }
  .snb-sec--dark, .snb-sec--wash { background: #fff !important; }
  .snb-sec--dark :is(h2, h3, p, strong, a), .snb-sec--dark .snb-lede, .snb-sec--dark .snb-prose p, .snb-step p { color: #0B1D3A !important; }
  .snb .ctaband { background: #fff !important; }
  .snb .ctaband :is(h2, h2 em, p, .ctaband__disclaimer) { color: #0B1D3A !important; }
  .snb .btn { color: #0B1D3A !important; background: none !important; border: 1px solid #0B1D3A !important; }
  .snb-step .snb-ic { background: #fff; }
  .snb-step .snb-ic .d { stroke: #2D6EB1; }
  .snb-sec { padding: 28px 0; break-inside: auto; }
  .snb-ind__card, .snb-step, .snb-fit__item, .snb-time__pt, .snb-rel__card, .snb .hub-faq__list details { break-inside: avoid; }
}