/* /stem-cell-therapy-san-diego: its own sheet, loaded after site.css.
   This page used to ride styles/celva-home.css with an inline block of pins
   over it. It now stands on this file alone, so the home page's dark hero,
   beige band, pills and mono labels never reach it and nothing has to be
   pinned back. Script: scripts/stem-cell-therapy-san-diego.js. With that
   script absent every part is visible, every poster is drawn (the <noscript>
   stills) and every link still jumps.

   One idea runs the page: the drive. The hero draws it (San Diego above the
   border, Hospital Angeles below it in Tijuana), and the day rides one rail.
   White, ink, the site blue; the blue wash once (why cross the border);
   navy twice (patient stories, the closing call). */

/* On the root, not :root: this sheet loads on this page alone, and a
   browser without :has() would drop the whole rule, the bar's height and the
   scroll padding with it. */
:root {
  --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);
}
.lp-sd {
  --sd-ease: cubic-bezier(.16, 1, .3, 1);
  --sd-gut: 32px;
  --sd-band: clamp(76px, 9vw, 132px);
  --sd-line: rgba(11, 29, 58, .14);
}
.lp-sd main { overflow-x: clip; }
.lp-sd main *, .lp-sd main *::before, .lp-sd main *::after { box-sizing: border-box; }
/* colors_and_type.css caps every bare <p> at 42rem and underlines every <a>. */
/* (:where keeps these resets at the weight of a bare tag, so any class below wins) */
:where(.lp-sd main) p { max-width: none; margin: 0; }
.lp-sd main a:not(.btn):not(.sd-door) { border-bottom: 0; }
:where(.lp-sd main) :is(ol, ul) { list-style: none; margin: 0; padding: 0; }
:where(.lp-sd main) figure { margin: 0; }
.lp-sd main video, .lp-sd main svg { display: block; }
.lp-sd main section[id] { scroll-margin-top: 0; }
.lp-sd .sd-nb { white-space: nowrap; }

.lp-sd ::selection { background: var(--accent-blue); color: #fff; }

.sd-wrap { max-width: 1200px; margin: 0 auto; padding: 0 var(--sd-gut); }

/* ---------- type ---------- */
.sd-h2 { font-size: clamp(2.1rem, 4.4vw, 3.6rem); line-height: 1.06; letter-spacing: -.015em; font-weight: 300; margin: 0; text-wrap: pretty; }
.sd-h2--xl { font-size: clamp(2.35rem, 5.6vw, 4.6rem); line-height: 1.03; }
/* a heading that has to wrap breaks where its two halves meet */
.sd-h2 > .sd-h-lead, .sd-h2 > .sd-h-lead + em { display: inline-block; }
/* The italic blue half is kept where it carries the point (the hero, the day,
   the closing call) and set plain in the rest, so it is not a formula. */
.sd-why .sd-h2 em, .sd-fit .sd-h2 em, .sd-cost .sd-h2 em, .sd-joints .sd-h2 em, .sd-faq .sd-h2 em { font-style: normal; color: inherit; font-weight: inherit; }
.sd-lede { font-size: 1.1875rem; line-height: 1.6; color: var(--ink-muted); margin: 26px 0 0; }
.sd-closing { font-size: 1.0625rem; line-height: 1.7; color: var(--ink-soft); margin: 44px 0 0; }
/* the name of a step, a tier, a line of the quote: plain words, in the blue */
.sd-k { font-size: .9375rem; line-height: 1.3; font-weight: 600; color: var(--accent-blue-hover); margin: 0; }

/* ---------- buttons: the site's own system, with a press ----------
   Every call to action keeps its class list (analytics reads it). A bare
   .btn inside main is the primary. */
.lp-sd main a.btn { padding: 15px 26px; font-size: 15px; border-radius: 4px; transition: background 220ms var(--sd-ease), border-color 220ms var(--sd-ease), color 220ms var(--sd-ease), transform 260ms var(--sd-ease), box-shadow 260ms var(--sd-ease); }
.lp-sd main a.btn:not(.btn--ghost):not(.btn--ice) { background: var(--accent-blue); color: #fff; border-color: var(--accent-blue); }
.lp-sd main a.btn:not(.btn--ghost):not(.btn--ice):hover { background: var(--accent-blue-hover); border-color: var(--accent-blue-hover); color: #fff; transform: translateY(-2px); box-shadow: var(--shadow-lift); }
.lp-sd main a.btn.btn--lg { padding: 17px 32px; font-size: 16px; }
.lp-sd main a.btn.btn--ice { background: #fff; color: var(--ink); border-color: #fff; }
.lp-sd main a.btn.btn--ice:hover { background: var(--accent-wash); border-color: var(--accent-wash); color: var(--ink); transform: translateY(-2px); box-shadow: 0 18px 44px rgba(0, 0, 0, .3); }
.lp-sd main a.btn:active, .lp-sd main a.btn:not(.btn--ghost):not(.btn--ice):active, .lp-sd main a.btn.btn--ice:active { transform: translateY(1px); box-shadow: none; filter: brightness(.94); transition-duration: 90ms; }
.lp-sd main a.btn.btn--ghost:active { background: rgba(11, 29, 58, .06); filter: none; }
.lp-sd main a.btn:focus-visible, .lp-sd main summary:focus-visible, .lp-sd .pt-tile:focus-visible, .lp-sd .sd-door:focus-visible { outline: 2px solid var(--accent-blue); outline-offset: 3px; }
.lp-sd main .sd-stories a.btn:focus-visible, .sd-stories .pt-tile:focus-visible, .lp-sd main .sd-end a.btn:focus-visible { outline-color: #fff; }
.lp-sd main h1:focus, .lp-sd main h2:focus, .lp-sd main h3:focus { outline: 0; }
.sd-cta { margin-top: 36px; }
.sd-cta--center { display: flex; justify-content: center; }

/* ============ THE BAR THAT FOLLOWS THE READER ============ */
.lp-sd .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, .95);
  -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(--sd-ease), visibility 0s 360ms;
}
.lp-sd .hc-bar.is-on { transform: none; opacity: 1; visibility: visible; transition: opacity 260ms, transform 360ms var(--sd-ease); }
body.lp-sd.nav-open .hc-bar { opacity: 0; visibility: hidden; }
.lp-sd .hc-bar__track {
  max-width: 1200px; margin: 0 auto; padding: 0 var(--sd-gut);
  height: 100%; display: flex; align-items: stretch; gap: clamp(18px, 2.4vw, 34px);
  overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain; scroll-padding-inline: 28px;
}
.lp-sd .hc-bar__track::-webkit-scrollbar { display: none; }
.lp-sd .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; border-bottom: 0;
  transition: color 200ms;
}
.lp-sd .hc-bar__track a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  background: var(--accent-blue); transform: scaleX(0); transform-origin: left;
  transition: transform 360ms var(--sd-ease);
}
.lp-sd .hc-bar__track a:hover, .lp-sd .hc-bar__track a[aria-current] { color: var(--ink); }
.lp-sd .hc-bar__track a:hover::after { transform: scaleX(.35); }
.lp-sd .hc-bar__track a[aria-current]::after { transform: scaleX(1); }
.lp-sd .hc-bar__track a:active { color: var(--accent-blue); }
.lp-sd .hc-bar__track a:focus-visible { outline: 2px solid var(--accent-blue); outline-offset: -4px; border-radius: 4px; }
.lp-sd .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));
}

/* ============ HERO ============
   Painted finished by the sheet alone. The only first-paint motion is a
   short settle on the headline's two lines and the film frame, run by CSS
   from a visible start, so nothing waits on a script and nothing is hidden. */
.sd-hero { background: #fff; padding: clamp(40px, 4.6vw, 64px) 0 var(--sd-band); }
.sd-h1 { font-size: clamp(2.35rem, 6.7vw, 5.3rem); line-height: 1.02; letter-spacing: -.022em; font-weight: 300; margin: 0; text-wrap: balance; }
.sd-h1__l { display: block; }
/* Each line holds one row from 720px up: in the site's display face it fits
   from there (both scale with the window; between 701 and about 712 the
   second line ran a few pixels past its box), and in the wider fallback drawn for the first
   frames it runs long instead of wrapping, so nothing below it moves when the
   face arrives. */
@media (min-width: 720px) { .sd-h1__l { white-space: nowrap; } }
.sd-h1 em { color: var(--accent-blue); }
.sd-hero__grid {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr); column-gap: clamp(28px, 3.6vw, 56px);
  grid-template-rows: auto auto auto auto 1fr;
  grid-template-areas: "sub film" "ctas film" "next film" "rev film" ". film";
  margin-top: clamp(26px, 3vw, 44px);
}
.sd-hero__sub { grid-area: sub; font-size: 1.1875rem; line-height: 1.65; color: var(--ink-muted); }
.sd-hero__ctas { grid-area: ctas; display: flex; flex-wrap: wrap; gap: 14px; align-items: center; margin-top: 30px; }
.sd-hero__next { grid-area: next; margin-top: 14px; font-size: .875rem; line-height: 1.5; color: var(--ink-muted); }
.sd-hero__rev { grid-area: rev; margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--sd-line); font-size: .8125rem; line-height: 1.5; color: var(--ink-muted); }
.sd-film { grid-area: film; align-self: start; position: relative; aspect-ratio: 5 / 4; border-radius: 14px; overflow: hidden; background: #0b1d3a; box-shadow: var(--shadow-md); }
.sd-film video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(1.04); }
/* nothing here moves that the reader cannot stop: shown once the film is playing */
.sd-film__hold { position: absolute; right: 12px; bottom: 12px; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; display: grid; place-items: center; background: rgba(11, 29, 58, .62); color: #fff; cursor: pointer; transition: background 200ms, transform 200ms var(--sd-ease); -webkit-tap-highlight-color: transparent; }
.sd-film__hold[hidden] { display: none; }
.sd-film__hold svg { width: 20px; height: 20px; }
.sd-film__bars { fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; }
.sd-film__tri { fill: currentColor; display: none; }
.sd-film__hold.is-held .sd-film__bars { display: none; }
.sd-film__hold.is-held .sd-film__tri { display: block; }
.sd-film__hold:hover { background: rgba(11, 29, 58, .82); }
.sd-film__hold:active { transform: scale(.92); }
.sd-film__hold:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
@keyframes sd-line-in { from { transform: translateY(.22em); } to { transform: none; } }
@keyframes sd-film-in { from { transform: scale(1.09); } to { transform: scale(1.04); } }
@media (prefers-reduced-motion: no-preference) {
  .sd-h1__l { animation: sd-line-in 900ms var(--sd-ease) both; }
  .sd-h1__l + .sd-h1__l { animation-delay: 90ms; }
  .sd-film video { animation: sd-film-in 1600ms var(--sd-ease) both; }
}

/* ---------- the drive, drawn ---------- */
.sd-drive { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr); gap: clamp(28px, 4.4vw, 72px); align-items: center; margin-top: clamp(56px, 7vw, 104px); }
.sd-map__frame { position: relative; aspect-ratio: 480 / 300; border-radius: 14px; overflow: hidden; background: #fff; border: 1px solid var(--sd-line); }
.sd-map__frame svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.sd-map__sea { fill: var(--accent-wash); }
.sd-map__coast { fill: none; stroke: rgba(45, 110, 177, .32); stroke-width: 1; }
.sd-map__border { fill: none; stroke: var(--ink-muted); stroke-width: 1.2; stroke-dasharray: 5 4; }
.sd-map__link { fill: none; stroke: var(--accent-blue); stroke-width: 2; stroke-linecap: round; stroke-dasharray: 2 5; }
.sd-map__south { fill: none; stroke: var(--accent-blue); stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 0; }
.sd-map__north { fill: none; stroke: var(--ink-soft); stroke-width: 1.6; stroke-linecap: round; stroke-dasharray: .018 .022; stroke-dashoffset: 0; }
.sd-map__tip { fill: none; stroke: var(--ink-soft); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.sd-map__plane circle { fill: #fff; stroke: var(--sd-line); stroke-width: 1; }
.sd-map__plane path { fill: var(--ink); }
.sd-map__dot { fill: var(--ink); stroke: #fff; stroke-width: 2; }
.sd-map__hosp rect { fill: #fff; stroke: var(--accent-blue); stroke-width: 1.8; }
.sd-map__hosp path { fill: none; stroke: var(--accent-blue); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.sd-map__ring { fill: none; stroke: var(--accent-blue); stroke-width: 1.5; opacity: 0; transform-box: fill-box; transform-origin: center; }
.sd-map__label { position: absolute; font-size: 13px; line-height: 1.15; color: var(--ink-muted); white-space: nowrap; }
.sd-map__label--air { right: 70.5%; top: 18%; transform: translateY(-50%); color: var(--ink); }
.sd-map__label--sd { left: 44.5%; top: 22%; transform: translateY(-50%); color: var(--ink); }
.sd-map__label--line { right: 3.5%; top: 46.5%; }
.sd-map__label--tj { left: 30%; top: 70%; }
.sd-map__label--ha { left: 73.75%; top: 81%; transform: translateX(-50%); color: var(--ink); font-weight: 600; }
/* the car: a dot that makes the drive once, when the map is first seen */
.sd-map__car { position: absolute; left: 0; top: 0; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; background: var(--accent-blue); box-shadow: 0 0 0 4px rgba(45, 110, 177, .22); opacity: 0;
  offset-path: path("M198,66 C212,96 226,126 242,150 C254,168 270,182 292,196 C314,210 334,222 352,232"); offset-rotate: 0deg; offset-distance: 0%; }
.sd-facts { display: grid; gap: 0; }
.sd-fact { padding: 26px 0 26px 26px; position: relative; }
.sd-fact + .sd-fact { border-top: 1px solid var(--sd-line); }
/* each figure wears its leg of the route: the solid line south, the dashed one back */
.sd-fact::before { content: ""; position: absolute; left: 0; top: 30px; bottom: 30px; width: 0; border-left: 2.5px solid var(--accent-blue); }
.sd-fact--north::before { border-left: 2px dashed var(--ink-soft); }
.sd-fact__k { font-size: .9375rem; font-weight: 600; color: var(--ink-soft); }
.sd-fact__n { font-family: var(--font-display); font-size: clamp(1.9rem, 3vw, 2.6rem); line-height: 1.08; font-weight: 300; color: var(--ink); margin-top: 8px; }
.sd-fact__n em { font-style: italic; color: var(--accent-blue); }
.sd-fact__t { font-size: 1rem; line-height: 1.6; color: var(--ink-muted); margin-top: 10px; }
@keyframes sd-drive-car { 0% { offset-distance: 0%; opacity: 0; } 6% { opacity: 1; } 92% { opacity: 1; } 100% { offset-distance: 100%; opacity: 0; } }
@keyframes sd-pop { from { transform: scale(.6); opacity: 0; } to { transform: none; opacity: 1; } }
.sd-js .sd-drive:not(.is-seen) .sd-map__south { stroke-dashoffset: 1; }
.sd-js .sd-drive:not(.is-seen) .sd-map__north, .sd-js .sd-drive:not(.is-seen) .sd-map__tip { opacity: 0; }
.sd-js .sd-drive:not(.is-seen) .sd-map__hosp { opacity: 0; }
.sd-js .sd-drive.is-seen .sd-map__south { transition: stroke-dashoffset 1500ms cubic-bezier(.6, 0, .25, 1) 200ms; }
.sd-js .sd-drive.is-seen .sd-map__car { animation: sd-drive-car 1500ms cubic-bezier(.6, 0, .25, 1) 200ms both; }
.sd-js .sd-drive.is-seen .sd-map__hosp { transform-box: fill-box; transform-origin: 50% 100%; animation: sd-pop 520ms var(--sd-ease) 1500ms both; }
.sd-js .sd-drive.is-seen .sd-map__north, .sd-js .sd-drive.is-seen .sd-map__tip { transition: opacity 700ms ease 2100ms; }
/* arrived: two rings open from the hospital as the car reaches it, then rest */
@keyframes sd-ring { from { transform: scale(.5); opacity: .7; } to { transform: scale(1.6); opacity: 0; } }
.sd-js .sd-drive.is-seen .sd-map__ring { animation: sd-ring 1100ms ease-out 1650ms 2 both; }

/* ============ THE DAY: six steps down one rail ============ */
.sd-day { padding: var(--sd-band) 0; border-top: 1px solid var(--sd-line); }
.sd-day .sd-h2 em { color: var(--accent-blue); }
.sd-steps { margin-top: clamp(40px, 5vw, 68px); }
.sd-step { position: relative; display: grid; grid-template-columns: 240px minmax(0, 1fr); column-gap: clamp(24px, 3.4vw, 48px); align-items: center; padding: 0 0 clamp(28px, 3vw, 40px) 56px; }
.sd-step:last-child { padding-bottom: 0; }
/* the stop, and one connector per gap: the rail ends at the last stop */
.sd-step::before { content: ""; position: absolute; left: 0; top: 112px; width: 16px; height: 16px; border-radius: 50%; background: var(--accent-blue); border: 3px solid var(--accent-blue); z-index: 1; transition: background 320ms var(--sd-ease), border-color 320ms var(--sd-ease), transform 320ms var(--sd-ease); }
.sd-step::after { content: ""; position: absolute; left: 7px; top: 120px; width: 2px; height: 100%; background: linear-gradient(var(--accent-blue), var(--accent-blue)) 0 0 / 100% calc(var(--f, 1) * 100%) no-repeat, var(--sd-line); }
.sd-step:last-child::after { content: none; }
.sd-js .sd-steps.is-led .sd-step:not(.is-on)::before { background: #fff; border-color: rgba(11, 29, 58, .3); }
@keyframes sd-stop { 0% { transform: scale(1); } 55% { transform: scale(1.55); } 100% { transform: scale(1.3); } }
.sd-js .sd-steps.is-led .sd-step.is-now::before { transform: scale(1.3); animation: sd-stop 460ms var(--sd-ease); }
.sd-step__clip { position: relative; aspect-ratio: 1; width: 100%; border-radius: 12px; overflow: hidden; background: #0b1d3a; }
.sd-step__clip video, .sd-step__clip img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sd-step__clip img[width][height] { height: 100%; }
.sd-step__body h3 { font-size: clamp(1.5rem, 2.3vw, 2rem); line-height: 1.14; font-weight: 400; margin: 6px 0 10px; }
.sd-step__body > p:not(.sd-k) { font-size: 1.0625rem; line-height: 1.65; color: var(--ink-muted); }
.sd-step__body > .sd-step__note { margin-top: 10px; font-size: .9375rem; color: var(--ink-soft); }

/* ============ WHY CROSS THE BORDER: the one tinted band ============ */
.sd-why { padding: var(--sd-band) 0; background: var(--accent-wash); }
.sd-why__lede { color: var(--ink-soft); font-size: 1.0625rem; line-height: 1.7; columns: 2; column-gap: clamp(32px, 4.4vw, 64px); margin-top: 28px; }
.sd-vs { display: grid; grid-template-columns: minmax(0, .86fr) minmax(0, 1.14fr); margin-top: clamp(40px, 5vw, 64px); background: #fff; border-radius: 14px; border: 1px solid var(--sd-line); overflow: hidden; }
.sd-vs__col { padding: clamp(26px, 3.2vw, 44px); }
.sd-vs__col--celva { border-left: 1px solid var(--sd-line); box-shadow: inset 0 3px 0 var(--accent-blue); }
.sd-vs__col h3 { font-size: clamp(1.5rem, 2.3vw, 2rem); line-height: 1.14; font-weight: 400; margin: 6px 0 0; }
.sd-vs__col ul { margin-top: 22px; display: grid; gap: 14px; }
.sd-vs__col li { position: relative; padding-left: 30px; font-size: 1rem; line-height: 1.6; color: var(--ink-muted); }
.sd-vs__col li::before { content: ""; position: absolute; left: 0; top: .8em; width: 14px; height: 1.5px; background: rgba(11, 29, 58, .34); }
.sd-vs__col--celva li { color: var(--ink-soft); }
.sd-vs__col--celva li::before { top: .34em; width: 16px; height: 16px; background: var(--accent-blue);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2.500 8.500l3.300 3.300 7.700-8' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2.500 8.500l3.300 3.300 7.700-8' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; }
.sd-vs__art { display: flex; align-items: flex-end; flex-wrap: wrap; gap: 14px 26px; }
.sd-dish { width: 160px; height: 84px; margin-bottom: 22px; overflow: visible; }
.sd-vs__art .sd-dish { margin-bottom: 0; }
.sd-vs__art { margin-bottom: 22px; }
.sd-dish__rim, .sd-dish__wall { fill: none; stroke: var(--ink-soft); stroke-width: 1.6; stroke-linejoin: round; }
.sd-dish__rim { fill: #fff; }
.sd-dish__few circle { fill: rgba(11, 29, 58, .34); }
.sd-dish__many circle { fill: var(--accent-blue); }
.sd-ticks { width: 172px; height: 24px; margin-bottom: 6px; }
.sd-ticks circle { fill: var(--accent-wash); }
.sd-ticks path { fill: none; stroke: var(--accent-blue-hover); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 0; }
@keyframes sd-grow { from { transform: scale(0); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes sd-tick { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
/* the culture grows from the five cells both dishes start with */
.sd-js .sd-vs:not(.is-seen) .sd-dish__many circle:nth-child(n+6) { opacity: 0; }
.sd-js .sd-vs:not(.is-seen) .sd-ticks path { stroke-dashoffset: 1; }
.sd-js .sd-vs.is-seen .sd-dish__many circle:nth-child(n+6) { transform-box: fill-box; transform-origin: center; animation: sd-grow 520ms var(--sd-ease) calc(300ms + var(--n, 0) * 70ms) both; }
.sd-js .sd-vs.is-seen .sd-ticks path { animation: sd-tick 360ms ease-out calc(1800ms + var(--n, 0) * 140ms) both; }
.sd-ask { margin: clamp(40px, 5vw, 64px) auto 0; text-align: center; font-family: var(--font-display); font-size: clamp(1.4rem, 2.3vw, 2rem); line-height: 1.34; font-weight: 300; color: var(--ink); }

/* ============ WHO QUALIFIES: four tiers along one line ============ */
.sd-fit { padding: var(--sd-band) 0; }
.sd-tiers { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: auto auto auto 1fr; column-gap: clamp(20px, 2.6vw, 36px); margin-top: clamp(40px, 5vw, 64px); }
.sd-tier { position: relative; display: grid; grid-row: span 4; grid-template-rows: subgrid; align-content: start; }
@supports not (grid-template-rows: subgrid) { .sd-tier { display: block; } }
.sd-tier__badge { position: relative; z-index: 1; width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; background: #fff; border: 2px solid var(--accent-blue); margin-bottom: 22px; }
.sd-tier__badge svg { width: 24px; height: 24px; }
.sd-tier__badge path { fill: none; stroke: var(--accent-blue); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 0; }
.sd-tier--yes .sd-tier__badge { background: var(--accent-blue); }
.sd-tier--yes .sd-tier__badge path { stroke: #fff; }
.sd-tier--path .sd-tier__badge { border-color: var(--ink-soft); }
.sd-tier--path .sd-tier__badge path { stroke: var(--ink-soft); }
.sd-tier--no .sd-tier__badge { border-color: rgba(11, 29, 58, .34); }
.sd-tier--no .sd-tier__badge path { stroke: var(--ink-muted); }
/* one connector per gap, mark to mark, and nothing after the last */
.sd-tier:not(:last-child)::after { content: ""; position: absolute; left: 52px; top: 25px; height: 2px; width: calc(100% - 52px + clamp(20px, 2.6vw, 36px)); background: var(--sd-line); transform-origin: left; }
.sd-tier h3 { font-size: clamp(1.35rem, 1.9vw, 1.7rem); line-height: 1.16; font-weight: 400; margin: 6px 0 10px; }
.sd-tier > p:not(.sd-k) { font-size: 1rem; line-height: 1.62; color: var(--ink-muted); }
.sd-js .sd-tiers:not(.is-seen) .sd-tier__badge { opacity: 0; }
.sd-js .sd-tiers:not(.is-seen) .sd-tier::after { transform: scaleX(0); }
.sd-js .sd-tiers:not(.is-seen) .sd-tier__badge path { stroke-dashoffset: 1; }
.sd-js .sd-tiers.is-seen .sd-tier__badge { animation: sd-pop 480ms var(--sd-ease) calc(var(--n, 0) * 240ms) both; }
.sd-js .sd-tiers.is-seen .sd-tier::after { transition: transform 420ms ease-out calc(var(--n, 0) * 240ms + 200ms); }
.sd-js .sd-tiers.is-seen .sd-tier__badge path { animation: sd-tick 380ms ease-out calc(var(--n, 0) * 240ms + 260ms) both; }

/* ============ PATIENT STORIES: navy, one of two ============ */
.sd-stories { padding: var(--sd-band) 0; background: var(--navy-mid); color: #fff; }
.sd-stories .sd-h2 { color: #fff; text-align: center; font-size: clamp(1.9rem, 4vw, 3.3rem); line-height: 1.12; }
.sd-stories .sd-h2 em { color: var(--accent-ice); }
.sd-stories .sd-lede { color: rgba(255, 255, 255, .8); text-align: center; }
.lp-sd .pt-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; margin-top: clamp(36px, 4.4vw, 56px); }
.lp-sd .pt-tile { display: block; position: relative; width: 100%; aspect-ratio: 3 / 4; padding: 0; border: 0; border-radius: 12px; overflow: hidden; cursor: pointer; background: #0b1d3a; box-shadow: 0 2px 10px rgba(0, 0, 0, .18); transition: transform 420ms var(--sd-ease), box-shadow 420ms var(--sd-ease); -webkit-tap-highlight-color: transparent; }
.lp-sd .pt-tile__loop, .lp-sd .pt-tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.lp-sd .pt-tile__scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(11, 29, 58, .05), rgba(11, 29, 58, .55)); transition: opacity 400ms; }
.lp-sd .pt-tile__play { position: absolute; left: 50%; top: 50%; width: 52px; height: 52px; margin: -26px 0 0 -26px; border-radius: 50%; background: rgba(255, 255, 255, .94); display: grid; place-items: center; transition: transform 380ms var(--sd-ease), background 300ms; }
.lp-sd .pt-tile__play svg { width: 20px; height: 20px; fill: var(--ink); margin-left: 2px; }
@media (hover: hover) {
  .lp-sd .pt-tile:hover { transform: translateY(-5px); box-shadow: 0 22px 48px rgba(0, 0, 0, .36); }
  .lp-sd .pt-tile:hover .pt-tile__scrim { opacity: .6; }
  .lp-sd .pt-tile:hover .pt-tile__play { transform: scale(1.12); background: #fff; }
}
.lp-sd .pt-tile:active { transform: scale(.985); transition-duration: 90ms; }
.lp-sd .pt-tile:active .pt-tile__play { transform: scale(.94); }
.lp-sd .pt-fig__cap { margin-top: 12px; font-size: .875rem; line-height: 1.4; color: rgba(255, 255, 255, .82); }
.lp-sd .pt-modal { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; }
.lp-sd .pt-modal[hidden] { display: none; }
.lp-sd .pt-modal__backdrop { position: absolute; inset: 0; background: rgba(7, 18, 38, .9); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
/* capped by height too, so the frame and the close button above it both fit a
   landscape phone (the page behind is locked while it is open) */
.lp-sd .pt-modal__box { position: relative; width: min(920px, 92vw, calc((100vh - 128px) * 16 / 9)); width: min(920px, 92vw, calc((100dvh - 128px) * 16 / 9)); }
.lp-sd .pt-modal__frame { position: relative; aspect-ratio: 16 / 9; border-radius: 12px; overflow: hidden; background: #000; box-shadow: 0 40px 100px rgba(0, 0, 0, .6); }
.lp-sd .pt-modal__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; opacity: 0; transition: opacity 500ms var(--sd-ease); }
.lp-sd .pt-modal__frame.is-ready iframe { opacity: 1; }
.lp-sd .pt-modal__hold { position: absolute; inset: 0; background: var(--ink) center / cover no-repeat; display: flex; align-items: flex-end; padding: 22px 26px; }
.lp-sd .pt-modal__hold::before { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(7, 18, 38, .85), rgba(7, 18, 38, .25) 55%); }
.lp-sd .pt-modal__hold span { position: relative; color: #fff; font-family: var(--font-display); font-size: clamp(20px, 2.4vw, 28px); line-height: 1.2; }
.lp-sd .pt-modal__close { position: absolute; right: -8px; top: -50px; min-width: 44px; min-height: 44px; background: transparent; border: 0; border-radius: 50%; color: #fff; font-size: 1.9rem; line-height: 1; cursor: pointer; transition: background 200ms, transform 200ms var(--sd-ease); }
.lp-sd .pt-modal__close:hover { background: rgba(255, 255, 255, .14); }
.lp-sd .pt-modal__close:active { transform: scale(.92); }
.lp-sd .pt-modal__close:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* ============ WHAT IT COSTS: four lines of a quote, and no amount ============ */
.sd-cost { padding: var(--sd-band) 0; }
.sd-cost__grid { display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); column-gap: clamp(36px, 5.6vw, 96px); align-items: start; }
.sd-cost__head { position: sticky; top: calc(var(--hc-nav-h) + var(--hc-bar-h) + 28px); }
.sd-cost__foot { grid-column: 2; }
.sd-sheet { width: 176px; height: 200px; margin-top: 34px; overflow: visible; }
/* a short laptop window: the sticky heading and its sheet still fit under the bar */
@media (min-width: 1081px) and (max-height: 760px) { .sd-sheet { width: 132px; height: 150px; margin-top: 20px; } }
/* shorter than the heading itself: it scrolls with the page instead of being cut */
@media (min-width: 1081px) and (max-height: 660px) { .sd-cost__head { position: static; } }
.sd-sheet__page { fill: #fff; stroke: var(--ink-soft); stroke-width: 1.6; stroke-linejoin: round; }
.sd-sheet__fold { fill: none; stroke: var(--ink-soft); stroke-width: 1.6; stroke-linejoin: round; }
.sd-sheet__rows circle { fill: var(--accent-blue); }
.sd-sheet__rows path { fill: none; stroke: var(--ink-soft); stroke-width: 3; stroke-linecap: round; }
/* the amount is a blank: this page states no figure */
.sd-sheet__rows .sd-sheet__amt { stroke: rgba(11, 29, 58, .3); stroke-width: 1.6; stroke-dasharray: 3 4; }
.sd-sheet__rows g { transition: opacity 320ms ease; }
.sd-js .sd-sheet.is-led .sd-sheet__rows g:not(.is-now) { opacity: .28; }
@keyframes sd-ink { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
.sd-js .sd-sheet.is-led .sd-sheet__rows g.is-now path:first-of-type { stroke: var(--accent-blue-hover); stroke-dasharray: 1; animation: sd-ink 420ms ease-out both; }
.sd-line { padding: 26px 0 28px; border-top: 1px solid var(--sd-line); }
.sd-line:first-child { padding-top: 6px; border-top: 0; }
.sd-line h3 { font-size: clamp(1.45rem, 2.1vw, 1.9rem); line-height: 1.16; font-weight: 400; margin: 6px 0 10px; }
.sd-line > p:not(.sd-k) { font-size: 1.0625rem; line-height: 1.65; color: var(--ink-muted); }
.sd-cost .sd-closing { margin-top: 8px; padding-top: 28px; border-top: 1px solid var(--sd-line); }

/* ============ YOUR JOINT: eight cards, each one link ============ */
.sd-joints { padding: var(--sd-band) 0; border-top: 1px solid var(--sd-line); }
.sd-doors { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: auto auto 1fr auto auto; gap: 0 20px; margin-top: clamp(36px, 4.4vw, 56px); }
.sd-door { display: grid; grid-row: span 5; grid-template-rows: subgrid; position: relative; border: 1px solid var(--sd-line); border-radius: 14px; background: #fff; padding: 0 24px 24px; overflow: hidden; color: var(--ink); text-decoration: none; transition: transform 420ms var(--sd-ease), box-shadow 420ms var(--sd-ease), border-color 300ms; -webkit-tap-highlight-color: transparent; }
@supports not (grid-template-rows: subgrid) { .sd-door { display: flex; flex-direction: column; } .sd-door__body { flex: 1; } }
.sd-door__ph { position: relative; margin: 0 -24px 22px; height: 190px; overflow: hidden; background: var(--navy-mid); }
.sd-door__ph img, .sd-door__ph img[width][height] { width: 100%; height: 100%; object-fit: cover; transform: scale(1.06); transition: transform 1000ms var(--sd-ease); filter: saturate(.82); }
.sd-door__t { font-size: clamp(1.4rem, 1.9vw, 1.7rem); line-height: 1.2; font-weight: 400; margin: 0 0 10px; color: var(--ink); }
.sd-door__body { font-size: .9375rem; line-height: 1.62; color: var(--ink-muted); }
.sd-door__meta { display: block; margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--sd-line); font-size: .875rem; line-height: 1.45; color: var(--ink-soft); }
.sd-door__go { display: inline-block; margin-top: 14px; font-size: .9375rem; font-weight: 600; color: var(--accent-blue); transition: color 200ms; }
@media (hover: hover) {
  .sd-door:hover { transform: translateY(-5px); box-shadow: var(--shadow-lift); border-color: rgba(45, 110, 177, .4); color: var(--ink); }
  .sd-door:hover .sd-door__ph img { transform: scale(1.12); }
  .sd-door:hover .sd-door__go { color: var(--accent-blue-hover); }
}
.sd-door:active { transform: scale(.99); transition-duration: 90ms; border-color: var(--accent-blue); }
.sd-joints__turn { margin-top: clamp(40px, 5vw, 64px); }
.sd-doors--sys { margin-top: 26px; }

/* ============ THE QUIZ: a clean white band (the shared mount, untouched) ============ */
.lp-sd main > .qz { background: #fff; border-top: 1px solid var(--sd-line); }

/* ============ QUESTIONS ============ */
.sd-faq { padding: var(--sd-band) 0; border-top: 1px solid var(--sd-line); }
.sd-faq__grid { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(36px, 5.6vw, 88px); align-items: start; }
.sd-faq .sd-h2 { font-size: clamp(2rem, 3.3vw, 2.9rem); }
.sd-faq__head { position: sticky; top: calc(var(--hc-nav-h) + var(--hc-bar-h) + 28px); }
.sd-faq__list details { border-top: 1px solid var(--sd-line); }
.sd-faq__list details:last-of-type { border-bottom: 1px solid var(--sd-line); }
.sd-faq__list summary { display: flex; align-items: flex-start; gap: 18px; padding: 22px 0; min-height: 44px; cursor: pointer; list-style: none; font-family: var(--font-display); font-size: clamp(1.2rem, 1.7vw, 1.45rem); font-weight: 400; line-height: 1.35; color: var(--ink); transition: color 200ms; -webkit-tap-highlight-color: transparent; }
.sd-faq__list summary::-webkit-details-marker { display: none; }
.sd-faq__list summary:hover { color: var(--accent-blue); }
.sd-faq__list summary:active { color: var(--accent-blue-hover); }
.sd-faq__ic { position: relative; flex: none; width: 18px; height: 18px; margin: .32em 0 0 auto; }
.sd-faq__ic::before, .sd-faq__ic::after { content: ""; position: absolute; left: 0; top: 8px; width: 18px; height: 2px; border-radius: 1px; background: var(--accent-blue); transition: transform 320ms var(--sd-ease); }
.sd-faq__ic::after { transform: rotate(90deg); }
details[open] > summary .sd-faq__ic::after { transform: rotate(0deg); }
.sd-faq__a { padding: 0 44px 26px 0; font-size: 1.0625rem; line-height: 1.7; color: var(--ink-muted); }
.sd-faq__a strong { color: var(--ink); font-weight: 600; }
@keyframes sd-answer { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.sd-js details.is-opening > .sd-faq__a { animation: sd-answer 320ms var(--sd-ease) both; }

/* ============ THE CLOSING CALL: navy, two of two ============ */
.sd-end { background: var(--navy-mid); color: #fff; padding: clamp(88px, 11vw, 152px) 0; text-align: center; }
.sd-end__in { max-width: 52rem; margin: 0 auto; padding: 0 var(--sd-gut); display: flex; flex-direction: column; align-items: center; }
.sd-end .sd-h2 { color: #fff; }
.sd-end .sd-h2 em { color: var(--accent-ice); }
.sd-end__in > p:not(.sd-end__legal) { color: rgba(255, 255, 255, .82); font-size: 1.0625rem; line-height: 1.7; margin: 24px 0 40px; }
.sd-end__legal { margin-top: 44px; padding-top: 22px; border-top: 1px solid rgba(255, 255, 255, .18); color: rgba(255, 255, 255, .7); font-size: .8125rem; line-height: 1.7; }

/* ============ REVEALS: hidden only once the script says it can show them ============
   Each part arrives its own way: the day's steps slide in from the rail, the
   doors and the tiles rise, a quote line settles, the rest fades up. */
.sd-js [data-r] { opacity: 0; transform: translateY(18px); transition: opacity 700ms var(--sd-ease), transform 700ms var(--sd-ease); transition-delay: calc(var(--n, 0) * 70ms); }
.sd-js .sd-step[data-r] { transform: translateX(-14px); }
.sd-js .sd-line[data-r] { transform: translateY(10px); transition-duration: 520ms; }
.sd-js .sd-ask[data-r], .sd-js .sd-quote[data-r] { transform: scale(.985); }
.sd-js .pt-fig[data-r] { transform: translateY(26px); }
.sd-js [data-r].is-in { opacity: 1; transform: none; }
/* a card that has arrived answers the pointer at once, not after its stagger */
.sd-js .sd-door[data-r].is-in { transition: transform 420ms var(--sd-ease), box-shadow 420ms var(--sd-ease), border-color 300ms, opacity 700ms var(--sd-ease); transition-delay: 0s; }
.sd-js .sd-door[data-r]:not(.is-in) { transition-delay: calc(var(--n, 0) * 70ms); }

/* ============ NARROWER ============ */
@media (max-width: 1100px) {
  /* the bar's track can scroll here, so its edges fade */
  .lp-sd .hc-bar__track { -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 16px, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(90deg, transparent 0, #000 16px, #000 calc(100% - 28px), transparent); }
}
@media (max-width: 1080px) {
  .sd-hero__grid { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; grid-template-areas: "sub" "ctas" "next" "rev" "film"; }
  .sd-film { margin-top: 36px; max-width: 640px; }
  .sd-drive { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .sd-map { max-width: 640px; }
  /* a row gap on the parent would also open between a card's own subgrid rows,
     so the second row of cards is set off with a margin instead */
  .sd-doors { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sd-door:nth-child(n+3) { margin-top: 20px; }
  .sd-tiers { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sd-tier:nth-child(n+3) { margin-top: 40px; }
  .sd-tier:nth-child(2n)::after { content: none; }
  .sd-cost__grid, .sd-faq__grid { grid-template-columns: minmax(0, 1fr); }
  .sd-cost__head, .sd-faq__head { position: static; }
  .sd-cost__foot { grid-column: 1; }
  .sd-cost__head { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 32px; align-items: end; margin-bottom: 28px; }
  .sd-cost__head .sd-h2, .sd-cost__head .sd-lede { grid-column: 1; }
  .sd-sheet { grid-column: 2; grid-row: 1 / span 2; margin-top: 0; width: 132px; height: 150px; }
  .sd-faq__head { margin-bottom: 4px; }
  .lp-sd .pt-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
}
@media (max-width: 860px) {
  .sd-why__lede { columns: 1; }
  .sd-vs { grid-template-columns: minmax(0, 1fr); }
  .sd-vs__col--celva { border-left: 0; border-top: 1px solid var(--sd-line); }
  .sd-step { grid-template-columns: 200px minmax(0, 1fr); }
  .sd-step::before { top: 92px; }
  .sd-step::after { top: 100px; }
  /* the five stories become one row to swipe, the next one always in sight */
  .lp-sd .pt-grid { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin-inline: calc(var(--sd-gut) * -1); padding-inline: var(--sd-gut); scroll-padding-inline: var(--sd-gut); overscroll-behavior-x: contain;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 var(--sd-gut), #000 calc(100% - var(--sd-gut)), transparent); mask-image: linear-gradient(90deg, transparent 0, #000 var(--sd-gut), #000 calc(100% - var(--sd-gut)), transparent); }
  .lp-sd .pt-grid::-webkit-scrollbar { display: none; }
  .lp-sd .pt-fig { flex: 0 0 min(58vw, 250px); scroll-snap-align: start; }
}
/* 700px, not 760: a 768px WebKit window with classic scrollbars reports 753. */
@media (max-width: 700px) {
  .lp-sd { --sd-gut: 20px; }
  :root { --hc-bar-h: 48px; }
  .lp-sd .hc-bar__track { gap: 22px; }
  /* phone: the two buttons sit directly under the headline, ahead of the long
     subhead, exactly where they were, so the first call is in the first screen */
  .sd-hero { padding-top: 28px; }
  /* a first half too long for one phone line would strand "that night." on a
     third row; here the heading simply runs on */
  .sd-day .sd-h2 > .sd-h-lead, .sd-day .sd-h2 > .sd-h-lead + em { display: inline; }
  .sd-hero__grid { grid-template-areas: "ctas" "next" "sub" "rev" "film"; margin-top: 0; }
  .sd-hero__ctas { margin-top: 24px; }
  .sd-hero__sub { margin-top: 24px; }
  .sd-film { margin-top: 30px; }
  .sd-fact { padding-left: 20px; }
  .sd-map__label--sd { left: 45.5%; }
  .sd-map__label--tj { left: 27%; }
  /* the day: the clip sits beside the step's name, the text runs under both */
  .sd-step { grid-template-columns: 132px minmax(0, 1fr); column-gap: 16px; padding-left: 30px; align-items: start; }
  .sd-step::before { top: 58px; width: 14px; height: 14px; }
  .sd-step::after { left: 6px; top: 66px; }
  .sd-step { grid-template-rows: 1fr auto auto 1fr; }
  .sd-step__body { display: contents; }
  .sd-step__clip { grid-column: 1; grid-row: 1 / span 4; }
  .sd-step__body > .sd-k { grid-column: 2; grid-row: 2; }
  .sd-step__body > h3 { grid-column: 2; grid-row: 3; margin-bottom: 0; }
  .sd-step__body > p:not(.sd-k) { grid-column: 1 / -1; margin-top: 14px; font-size: 1rem; }
  .sd-tiers { grid-template-columns: minmax(0, 1fr); row-gap: 0; }
  .sd-tier, .sd-tier:nth-child(n+3) { display: block; margin-top: 0; padding: 0 0 30px 72px; min-height: 82px; }
  .sd-tier:last-child { padding-bottom: 0; }
  .sd-tier__badge { position: absolute; left: 0; top: 0; margin: 0; }
  .sd-tier:not(:last-child)::after, .sd-tier:nth-child(2n):not(:last-child)::after { content: ""; left: 25px; top: 52px; width: 2px; height: calc(100% - 52px); transform-origin: top; }
  .sd-js .sd-tiers:not(.is-seen) .sd-tier::after { transform: scaleY(0); }
  .sd-cost__head { display: block; }
  .sd-sheet { margin-top: 24px; }
  /* the eight cards become eight rows: the photo beside the name */
  .sd-doors { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; row-gap: 14px; }
  .sd-door:nth-child(n+3) { margin-top: 0; }
  .sd-door { display: grid; grid-row: auto; grid-template-rows: none; grid-template-columns: 118px minmax(0, 1fr); column-gap: 16px; padding: 16px; align-items: start; }
  .sd-door__ph { grid-column: 1; grid-row: 1; margin: 0; height: 84px; border-radius: 8px; }
  .sd-door__t { grid-column: 2; grid-row: 1; align-self: center; margin: 0; }
  .sd-door__body, .sd-door__meta, .sd-door__go { grid-column: 1 / -1; }
  .sd-door__body { margin-top: 14px; }
  .sd-door__meta { margin-top: 14px; padding-top: 12px; }
  .sd-faq__a { padding-right: 0; }
  .sd-cta .btn, .sd-end .btn { width: 100%; justify-content: center; }
  .sd-hero__ctas .btn { flex: 1 1 100%; justify-content: center; }
}

/* ============ STILL ============
   Reduced motion: every drawing holds its finished state, nothing moves, and
   no clip plays (the script sets posters only). */
@media (prefers-reduced-motion: reduce) {
  .lp-sd main *, .lp-sd main *::before, .lp-sd main *::after, .lp-sd .hc-bar, .lp-sd .hc-bar *, .lp-sd .pt-modal, .lp-sd .pt-modal * { animation: none !important; transition: none !important; }
  .sd-js [data-r] { opacity: 1 !important; transform: none !important; }
  .sd-map__car, .sd-map__ring { display: none; }
  .lp-sd .pt-tile:hover, .sd-door:hover, .lp-sd main a.btn:hover { transform: none !important; }
}
@media print {
  .lp-sd .hc-bar, .lp-sd .pt-modal, .sd-map__car, .sd-film__hold { display: none !important; }
  .lp-sd main *, .lp-sd main *::before, .lp-sd main *::after { animation: none !important; transition: none !important; }
  .sd-js [data-r] { opacity: 1 !important; transform: none !important; }
  .sd-js .sd-drive .sd-map__south, .sd-js .sd-vs .sd-ticks path, .sd-js .sd-tiers .sd-tier__badge path { stroke-dashoffset: 0 !important; }
  .sd-js .sd-drive :is(.sd-map__north, .sd-map__tip, .sd-map__hosp), .sd-js .sd-vs .sd-dish__many circle, .sd-js .sd-tiers .sd-tier__badge, .sd-js .sd-sheet .sd-sheet__rows g { opacity: 1 !important; transform: none !important; }
  .sd-js .sd-tiers .sd-tier::after { transform: none !important; }
  .sd-step::after { background: var(--accent-blue) !important; }
  .sd-js .sd-steps .sd-step::before { background: var(--accent-blue) !important; border-color: var(--accent-blue) !important; transform: none !important; }
  /* film and looping clips mean nothing on paper; the words carry the page,
     and the five stories print as their names */
  .sd-film, .sd-step__clip, .lp-sd .pt-tile { display: none !important; }
  .lp-sd .pt-grid { display: block !important; overflow: visible; -webkit-mask-image: none; mask-image: none; margin-inline: 0; padding-inline: 0; }
  .sd-hero__grid, .sd-step, .sd-cost__grid, .sd-faq__grid, .sd-drive { display: block !important; }
  .sd-step { padding-left: 30px; break-inside: avoid; }
  .sd-step::before { top: 6px; }
  .sd-step::after { top: 14px; }
  .sd-cost__head, .sd-faq__head { position: static; }
  .sd-map { max-width: 420px; break-inside: avoid; }
  .sd-map__sea, .sd-tier__badge, .sd-sheet__rows circle { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .sd-why, .sd-stories, .sd-end { background: #fff !important; }
  .sd-stories *, .sd-end * { color: var(--ink) !important; }
  .sd-end__legal { border-top-color: var(--sd-line); }
  .sd-door, .sd-line, .sd-tier, .sd-faq__list details { break-inside: avoid; }
  .sd-faq__ic { display: none; }
  .lp-sd main section { padding-top: 28px !important; padding-bottom: 28px !important; }
}