/* The homepage on the "next" system (October 27, 2026). Builds on next.css and science.css;
   only homepage pieces live here. Same tokens: paper, navy ink, cyan marks, #006d8b text accents. */

.soft { color: var(--teal); }
.night .soft { color: var(--teal-night); }

/* Hero: the live site's layout in the next system's type. The cell film fills the right side at full height
   and runs under the headline; hero-photons.js paints a soft scrim behind the words and the light over everything. */
.home-hero { position: relative; overflow: hidden; isolation: isolate; display: flex; align-items: center; min-height: clamp(620px, calc(100svh - var(--nav-h)), 960px); padding: clamp(56px, 7vw, 112px) 0; }
.home-hero-grid { position: relative; z-index: 4; }
.home-hero .hero-content { position: relative; z-index: 4; max-width: 940px; }
.home-hero h1 { font-size: clamp(52px, 7.2vw, 100px); line-height: 1.02; color: #fff; text-wrap: wrap; }
.home-hero .hero-accent { color: var(--cyan); }
.home-hero .lead { margin-top: 26px; color: var(--on-night); }
.home-hero .hero-video { position: absolute; top: 0; right: -2%; bottom: 0; width: 62%; z-index: 1; mix-blend-mode: lighten; pointer-events: none; }
.home-hero .hero-video video { display: block; width: 100%; height: 100%; object-fit: contain; object-position: right center; filter: brightness(.82) saturate(.9); }
#hero-canvas { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.home-hero .cell-pause { position: absolute; right: var(--gutter); bottom: 20px; z-index: 5; }

/* 01 The problem: centered, as on the live page. The two survival numbers sit side by side with a hairline
   between them, on a phone too; percent.js counts them up once. */
.home-problem .kicker { justify-content: center; }
.home-problem-head { max-width: 820px; margin: 0 auto; text-align: center; }
.home-problem-head h2 { font-size: clamp(40px, 4.6vw, 64px); text-wrap: balance; }
.home-problem-head .lead { margin: 22px auto 0; max-width: 44ch; }
.survival { display: flex; align-items: center; justify-content: center; gap: clamp(8px, 3vw, 40px); margin: clamp(48px, 6vw, 72px) auto 0; text-align: center; }
.survival-col { flex: 0 1 auto; min-width: 0; padding: 8px clamp(8px, 2vw, 24px); }
.survival-num { margin-bottom: 14px; font: 300 clamp(64px, 8.2vw, 116px)/1 var(--display); letter-spacing: -.04em; color: var(--ink); white-space: nowrap; }
/* percent.js gives the counting digits a 2ch box, which is wider than two of this face's digits; fit it to them. */
.survival-num [data-percent-digits] { width: 1.14em !important; }
.survival-what { margin: 0; font: 500 17px/1.4 var(--display); color: var(--ink); }
.survival-when { margin: 2px 0 0; font-size: 15px; color: var(--muted); }
/* The same air under the numbers as above them, so the thin line before the growth story sits close */
#problem { padding-bottom: clamp(64px, 6.7vw, 96px); }
/* Right after a dark band or photo, its edge already divides the page: the label drops its line and the section starts closer */
#problem, #solution, #evidence { padding-top: clamp(56px, 6vw, 88px); }
:is(#problem, #solution, #evidence) > .shell > .kicker { padding-top: 0; border-top: 0; }
.survival-rule { flex: none; width: 1px; height: clamp(120px, 13vw, 170px); background: var(--rule-strong); }

/* The growth chapter works exactly as on the live site (home-polish-20260917.css): the same centred heading,
   the heading and scene travel as one group centred in the pin, the same runway and colors. */
.hf-growth-chapter { border-top: 0; }
/* A thin shell-width line where the numbers end and the growth story starts, the same tone as the line between the numbers */
.home-page .hf-growth-chapter::before { content: ""; display: block; width: min(100% - var(--gutter) * 2, var(--max)); height: 1px; margin-inline: auto; background: var(--rule-strong); }
.home-page .hf-growth-heading { justify-content: center; align-items: flex-start; gap: 24px; margin-bottom: 14px; }
.home-page .hf-growth-heading h2 { font: 600 clamp(24px, 2.7vw, 38px)/1.15 var(--display); letter-spacing: -.03em; color: var(--ink); text-align: center; text-wrap: wrap; }
.home-page .hf-growth-heading h2 .hf-nb { white-space: nowrap; }
.home-page .nb { white-space: nowrap; }
.home-page .hf-growth-mode { display: none !important; }
#probProgression.hf-growth-compact .hf-growth-heading h2 { font-size: clamp(20px, 2.2vw, 26px); }
#probProgression:not(.hf-growth-is-reading) .hf-growth-heading { margin-top: auto; }
#probProgression:not(.hf-growth-is-reading) .hf-growth-scene { flex: 0 0 auto; margin-bottom: auto; }
.home-page #probProgression :is(.hf-growth-title, .hf-growth-caption, .hf-growth-beat) { text-wrap: wrap; }
.home-page .hf-growth-caption { color: #16263a; }
/* One palette: the tumor story takes the page's paper, navy and gray instead of its own near-copies of them */
.home-page .hf-growth-chapter, .home-page #probProgression { --growth-paper: var(--paper); --growth-ink: var(--ink); --growth-muted: var(--muted); background: var(--paper); }
.home-page .hf-growth-progress { background: var(--rule); }
.home-page .hf-growth-evidence, .home-page .hf-growth-static figure { border-color: var(--rule); }
/* The art was drawn on the old, slightly lighter cream; darken lets the paper show through so the frame has no box */
.home-page :is(.hf-growth-canvas, .hf-growth-poster, .hf-growth-static-canvas, .hf-growth-still-art img) { mix-blend-mode: darken; }
.home-page .hf-growth-progress span { background: var(--cyan); }
@media (max-width: 600px) {
  .home-page .hf-growth-heading h2 { font-size: 22px; }
  #probProgression.hf-growth-compact .hf-growth-heading h2 { font-size: 19px; }
}

/* Bridge: the microscope film of cells in a dish behind one line, under a navy veil (home.js plays it in view) */
.home-bridge { position: relative; overflow: hidden; isolation: isolate; display: flex; align-items: center; min-height: clamp(260px, 34vh, 340px); padding: clamp(64px, 9vh, 104px) 0; text-align: center; }
.home-bridge-film { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; opacity: .7; filter: saturate(.45); }
.home-bridge::after { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(ellipse at center, rgba(8, 36, 50, .42), rgba(8, 36, 50, .74)); }
.home-bridge .shell { width: 100%; }
.home-bridge p { margin: 0 auto; font: italic 400 clamp(26px, 3vw, 42px)/1.25 var(--display); letter-spacing: -.01em; color: #fff; max-width: 26ch; text-wrap: balance; }

/* 02 The science: centered, with the cell film straight under the words, in teal and navy ink */
#solution .kicker { justify-content: center; }
#solution .kicker { margin-bottom: clamp(20px, 2.4vw, 32px); }
.home-science { max-width: 960px; margin: 0 auto clamp(8px, 1.5vw, 20px); text-align: center; }
.home-science h2 { font-size: clamp(38px, 4.4vw, 64px); text-wrap: balance; }
.home-science h2 em { font-style: italic; }
.home-science .lead { margin: 22px auto 0; max-width: 48ch; }
/* The two kinds of cells redrawn in the site's colors by the page's SVG palette filter (#hf-signal-palette):
   normal cells in cyan on the left, cancer cells in navy on the right, from the sharper 1320px film. */
.home-page .hf-cellular-signals { --signal-paper: var(--paper); --signal-ink: var(--ink); --signal-sage: var(--teal); max-width: 640px; }
.home-page .hf-cellular-signals__media { max-width: 580px; margin-inline: auto; }
.home-page .hf-cellular-signals__caption { margin-top: 24px; font: 500 clamp(21px, 2.2vw, 28px)/1.28 var(--display); font-style: normal; letter-spacing: -.018em; color: var(--ink); max-width: 34ch; }
.home-page .hf-cellular-signals__caption .hf-sig-line { text-wrap: balance; }
.home-page .hf-sig-line { display: block; }
.home-page .hf-sig-accent { color: var(--teal); }
.home-page .hf-cellular-signals__toggle { border-color: var(--rule-strong); border-radius: var(--r-control); font: 500 14px/1.25 var(--body); color: var(--text); }
/* Heading and whole film on one laptop screen: the film's empty top fifth is cropped off, the film shrinks on short
   screens (sized by the screen's height as well as its width), and the pause control moves under the caption. */
.home-page .hf-cellular-signals { display: flex; flex-direction: column; }
.home-page .hf-cellular-signals__media { aspect-ratio: 1320 / 830; width: min(100%, 580px, calc((100vh - 480px) * 1.59)); width: min(100%, 580px, calc((100svh - 480px) * 1.59)); min-width: min(100%, 400px); }
.home-page .hf-cellular-signals__poster, .home-page .hf-cellular-signals__video { object-fit: cover; object-position: 50% 100%; }
.home-page .hf-cellular-signals__controls { order: 3; margin-top: 14px; }
.home-page .hf-cellular-signals { max-width: 760px; }
.home-page .hf-cellular-signals__caption { margin-top: 20px; font-size: clamp(20px, 1.9vw, 26px); max-width: 42ch; }

/* 03 The scan: four steps that fade up in order (home.js) */
.hf-scan-steps { list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(20px, 3vw, 40px); margin: clamp(48px, 6vw, 80px) 0 0; padding: 0; }
.hf-scan-num { font: 300 clamp(44px, 4.6vw, 64px)/1 var(--display); letter-spacing: -.03em; color: var(--ink); margin-bottom: 18px; font-variant-numeric: tabular-nums; }
.hf-scan-steps li:last-child .hf-scan-num { color: var(--teal); }
.hf-scan-rule { position: relative; height: 1px; background: var(--rule-strong); margin-bottom: 18px; transform-origin: left center; }
.hf-scan-rule::after { content: ""; position: absolute; left: 0; top: -3px; width: 7px; height: 7px; border-radius: 50%; background: var(--cyan); }
.hf-scan-steps p { font-size: 18px; line-height: 1.55; color: var(--text); margin: 0; max-width: 24ch; }
.js .hf-scan-steps li { opacity: 0; transform: translateY(20px); transition: opacity .9s var(--ease), transform .9s var(--ease); transition-delay: calc(var(--i) * .55s + .2s); }
.js .hf-scan-steps .hf-scan-rule { transform: scaleX(0); transition: transform 1.1s var(--ease); transition-delay: calc(var(--i) * .55s + .45s); }
.js .hf-scan-steps li.in { opacity: 1; transform: none; }
.js .hf-scan-steps li.in .hf-scan-rule { transform: none; }
/* The scan steps sit on cream under a thin line; the navy systems band below them breaks up the chapter */
.home-page .home-scan::before { content: ""; display: block; width: min(100% - var(--gutter) * 2, var(--max)); height: 1px; margin: 0 auto clamp(56px, 6vw, 88px); background: var(--rule-strong); }
.home-page .home-scan { padding-top: 0; }
/* The two systems on a navy band, as one picture of the signal's path: Kelly's drawing, set moving by home.js.
   Nirosha's quote sits on the same navy under the cards. The science page explains them with its own drawings. */
.home-systems-title { margin: 0 0 clamp(24px, 3vw, 36px); text-align: center; font-size: clamp(26px, 2.6vw, 36px); }
#two-systems { padding-block: clamp(56px, 6vw, 88px); }
.home-systems .signal-path { max-width: 1040px; margin: 0 auto; }
/* Kelly's drawing on the band's own navy, so it shows no box; the canvas (home.js) lies over it and takes over
   once its pictures load, with the still drawing left for reduced motion and no JS */
.signal-path__art { position: relative; max-width: 1040px; margin: clamp(8px, 1.5vw, 20px) auto 0; }
.signal-path__art img { display: block; width: 100%; height: auto; }
.signal-path__art canvas { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity .4s ease; }
.signal-path__art.is-live canvas { opacity: 1; }
/* No visible button (Kelly's call); keyboard users still get one when they tab to it, and reduced motion stops it */
.signal-path__pause { position: absolute; right: 0; bottom: 0; padding: 7px 14px; border: 1px solid rgba(255, 255, 255, .5); border-radius: var(--r-control); background: var(--night); font: 500 14px/1.25 var(--body); color: var(--on-night); cursor: pointer; opacity: 0; pointer-events: none; }
.signal-path__pause:focus-visible { opacity: 1; pointer-events: auto; }
/* Only the title and the drawing sit on navy; the cards and the quote follow on cream, starting close under the band */
.home-page #two-systems .soft { color: var(--teal-night); }
.home-systems { padding-top: clamp(56px, 6vw, 88px); }
.home-systems .signal-path__systems { border-top: 0; }
.signal-path__systems { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--rule-strong); }
.signal-path__system { display: flex; flex-direction: column; padding: 0 clamp(20px, 3vw, 40px); }
.signal-path__system:first-child { padding-left: 0; }
.signal-path__system:last-child { padding-right: 0; }
.signal-path__system + .signal-path__system { border-left: 1px solid var(--rule); }
.system-kind, .system-status { margin: 0; font: 600 12px/1.4 var(--display); letter-spacing: .14em; text-transform: uppercase; color: var(--teal); }
.home-systems .signal-path h4 { margin: 10px 0 6px; font: 400 clamp(28px, 2.6vw, 36px)/1.1 var(--display); letter-spacing: -.02em; color: var(--ink); }
/* The role lines take the lighter display teal of the big headings, at 24px and up so it stays readable (large text) */
.home-systems .signal-path .signal-path__role { margin: 0 0 16px; font: 400 clamp(24px, 2.1vw, 28px)/1.25 var(--display); letter-spacing: -.01em; color: var(--teal-display); }
.signal-path__system p:not([class]) { margin: 0 0 24px; font-size: 17px; line-height: 1.6; color: var(--text); }
.system-status { display: flex; align-items: center; gap: 8px; margin-top: auto; }
.system-status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--cyan); }
/* Nirosha's quote as a quiet pull quote: no box, a short teal rule above, set a size down from the headings */
.home-systems .home-quote-band { max-width: 760px; margin: clamp(56px, 7vw, 96px) auto 0; padding: 0; text-align: center; }
.home-quote-band::before { content: ""; display: block; width: 40px; height: 2px; margin: 0 auto clamp(24px, 3vw, 32px); background: var(--cyan); }
.home-quote-band blockquote { max-width: 34em; margin: 0 auto; font: italic 400 clamp(19px, 1.8vw, 23px)/1.55 var(--display); letter-spacing: -.005em; color: var(--ink); text-wrap: pretty; }
.home-quote-band figcaption { margin-top: 18px; font: 400 15px/1.5 var(--body); color: var(--muted); }
.home-systems .home-research-link { margin-top: clamp(40px, 5vw, 56px); text-align: center; }
.home-research-link { margin-top: 32px; }

/* Full-width microscope photo, as on the live page, drifting a little slower than the page (home.js) */
.home-photo-break { position: relative; height: clamp(300px, 41vw, 720px); margin: 0; overflow: hidden; background: var(--night); }
/* Tall enough to show the whole photo with Nirosha's head in frame; it is anchored at the top and only drifts a little */
.home-photo-break img { position: absolute; left: 0; top: -2.5%; width: 100%; height: 105%; object-fit: cover; object-position: 50% 0; filter: hue-rotate(-22deg) saturate(.7); will-change: transform; }

/* 03 Published research: the studies as a timeline, each dated stage linked to its paper, then the press as a row of names.
   What each study found lives on the science page. */
.home-proof .research-head { margin-bottom: clamp(40px, 5vw, 64px); }
.home-proof .research-stages { margin-bottom: clamp(48px, 5vw, 72px); }
/* "Next" is a plain hollow dot the size of the others, reached by a dashed line: not yet, without a drawn-by-code target */
.home-proof .stages li.next::before { background: var(--paper); box-shadow: none; border: 1.5px solid var(--ink); }
.home-proof .stages li.next::after { content: none; }
.home-proof .stages li:nth-last-child(2) { background: repeating-linear-gradient(90deg, var(--ink) 0 5px, transparent 5px 10px) no-repeat 7px 7px / 100% 1px; }
.stages .stage-paper { display: inline-block; margin-top: 10px; font-size: 14px; line-height: 1.4; color: var(--text); text-decoration: underline; text-decoration-color: var(--rule-strong); text-underline-offset: 3px; }
.stages .stage-paper:hover, .stages .stage-paper:focus-visible { color: var(--teal-label); text-decoration-color: currentColor; }
.proof-row { padding: clamp(28px, 3vw, 40px) 0; border-top: 1px solid var(--rule); text-align: center; }
.proof-row .eyebrow { color: var(--ink); margin-bottom: 24px; }
.home-proof .press-logos { margin-top: 0; }
.home-proof .partner { margin: 0; max-width: none; padding-top: clamp(28px, 3vw, 40px); }
.home-proof .home-research-link { margin-top: 8px; padding-top: clamp(28px, 3vw, 40px); border-top: 1px solid var(--rule); text-align: center; }

/* 04 The next study: "Where we're starting", the live page's three photo panels. A row you can swipe;
   the arrows step one panel and the dots follow (home.js). Without JS it is a plain scrolling row. */
.home-carousel { margin-top: clamp(48px, 6vw, 80px); }
.home-carousel > .eyebrow { margin-bottom: 20px; color: var(--ink); }
.hc-track { position: relative; display: flex; gap: clamp(16px, 3vw, 40px); overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; overscroll-behavior-x: contain; scrollbar-width: none; }
.hc-track::-webkit-scrollbar { display: none; }
.hc-panel { flex: 0 0 100%; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(28px, 4vw, 64px); align-items: center; scroll-snap-align: start; }
.hc-img { aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--r-image); background: var(--rule); }
.hc-img img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* The breast-care photo shows whole, at its own shape, so both the clinic sign and Dr. Lomis on the right stay in. */
.hc-img:has(.hc-full) { aspect-ratio: 1280 / 733; }
.hc-status { display: flex; align-items: center; gap: 8px; margin: 0; font: 600 12px/1.4 var(--display); letter-spacing: .12em; text-transform: uppercase; color: var(--ink); }
.hc-status::before { content: ""; flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--cyan); }
.hc-text h3 { margin: 14px 0 16px; font-size: clamp(30px, 3.2vw, 46px); line-height: 1.08; }
.hc-text p:not(.hc-status) { max-width: 46ch; margin: 0; font-size: 18px; color: var(--text); }
.hc-controls { display: none; align-items: center; justify-content: center; gap: 22px; margin-top: clamp(24px, 3vw, 36px); }
.js .hc-controls { display: flex; }
.hc-arrow { display: inline-grid; place-items: center; width: 48px; height: 48px; padding: 0; border: 1px solid var(--rule-strong); border-radius: 50%; background: transparent; color: var(--ink); font: 400 20px/1 var(--display); cursor: pointer; transition: background .2s ease, border-color .2s ease, color .2s ease; }
.hc-arrow:hover:not(:disabled) { border-color: var(--ink); background: var(--ink); color: var(--paper); }
.hc-arrow:disabled { opacity: .35; cursor: default; }
.hc-dots { display: flex; gap: 8px; }
.hc-dots span { width: 7px; height: 7px; border-radius: 50%; background: var(--rule-strong); transition: background .3s ease, transform .3s ease; }
.hc-dots span.is-active { background: var(--cyan); transform: scale(1.3); }
#next-study .home-research-link { margin-top: clamp(32px, 4vw, 48px); }

/* 05 The team */
.home-team { align-items: start; }
.person { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: clamp(20px, 3vw, 32px); align-items: start; }
.person img { width: 100%; aspect-ratio: 1; object-fit: cover; object-position: center top; border-radius: var(--r-image); }
.person h3 { margin: 0; }
.person-role { margin: 6px 0 16px; font: 600 12px/1.4 var(--display); letter-spacing: .12em; text-transform: uppercase; color: var(--teal); }
.person p:not(.person-role) { font-size: 17px; color: var(--text); margin-bottom: 20px; }

/* Press: on paper, logos in ink, so the page keeps only a few dark blocks */
.press-logos { display: flex; justify-content: center; align-items: center; gap: clamp(40px, 5vw, 72px); flex-wrap: wrap; margin-top: 36px; }
.press-logos img { display: block; width: auto; filter: brightness(0) invert(9%) sepia(30%) saturate(1800%) hue-rotate(190deg); opacity: .78; transition: opacity .25s ease; }
.press-logos img:hover { opacity: 1; }
.press-logos .logo-sciam { height: 30px; }
.press-logos .logo-radiolab { height: 24px; }
.press-logos .logo-cellpress { height: 24px; }
.press-logos .logo-cbcnews { height: 38px; }
.press-logos .logo-labj { height: 18px; }
.press-link { margin-top: 32px; }
.partner { margin: 48px auto 0; padding-top: 36px; border-top: 1px solid var(--rule); max-width: 520px; }
.nvidia-inception { display: inline-block; margin-top: 16px; }
.nvidia-inception img { height: 96px; width: auto; }

/* The ask */
.home-closing .shell { align-items: end; }
.home-closing h2 { font-size: clamp(34px, 3.6vw, 52px); }
.home-closing .lead.muted { margin-top: 20px; max-width: 46ch; }
.closing-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 28px; }

/* Footer: the homepage keeps its columns and the growth story's sources */
.footer-top { align-items: flex-start; }
.footer-brand p { margin-top: 10px; font-size: 15px; }
.footer-brand a { color: var(--on-night); }
.footer-cols { display: flex; flex-wrap: wrap; gap: 28px 64px; }
.footer-cols h4 { margin: 0 0 12px; font: 600 12px/1.4 var(--display); letter-spacing: .14em; text-transform: uppercase; color: var(--on-night); }
.footer-cols .footer-links { flex-direction: column; gap: 8px; }
.home-footer .hf-growth-evidence { max-width: none; margin: 0; border-top-color: var(--rule-night); }
.home-footer .hf-growth-note, .home-footer .hf-growth-sources { color: var(--on-night-muted); }
.home-footer .hf-growth-sources a { color: var(--on-night); }

@media (max-width: 900px) {
  .home-hero .hero-video { width: 100%; right: 0; }
  .home-hero .hero-video video { object-position: center; filter: brightness(.44) saturate(.9); }
  .home-hero .cell-pause { bottom: 14px; }
}
@media (max-width: 760px) {
  .hf-scan-steps { grid-template-columns: 1fr; gap: 32px; }
  .hf-scan-steps p { max-width: none; }
  .hf-scan-num { font-size: 48px; margin-bottom: 12px; }
  .hf-scan-rule { margin-bottom: 12px; }
  .js .hf-scan-steps li { transition-delay: .1s; }
  .js .hf-scan-steps .hf-scan-rule { transition-delay: .35s; }
  .survival-col { padding: 6px 8px; }
  .survival-num { font-size: clamp(44px, 13vw, 72px); }
  .survival-rule { height: 115px; }
  .survival-what { font-size: 15px; }
  .survival-when { font-size: 13px; }
  .signal-path__systems { grid-template-columns: 1fr; }
  .signal-path__system, .signal-path__system:first-child, .signal-path__system:last-child { padding: 24px 0; }
  .signal-path__system:first-child { padding-top: 0; }
  .signal-path__system + .signal-path__system { border-left: 0; border-top: 1px solid var(--rule); }
  .signal-path__art { margin-inline: calc(var(--gutter) * -1); }
  .home-proof .stages li:nth-last-child(2) { background: repeating-linear-gradient(180deg, var(--ink) 0 5px, transparent 5px 10px) no-repeat 7px 8px / 1px 100%; }
  .home-photo-break img { object-position: 38% 0; }
  .hc-panel { flex-basis: 88%; grid-template-columns: 1fr; gap: 20px; align-items: start; }
  .hc-text h3 { font-size: 28px; margin: 12px 0 12px; }
  .hc-text p:not(.hc-status) { font-size: 16px; }
  .person { grid-template-columns: 1fr; }
  .person img { max-width: 220px; }
  .press-logos { gap: 28px 36px; }
  .press-logos .logo-sciam { height: 22px; }
  .press-logos .logo-radiolab { height: 18px; }
  .press-logos .logo-cellpress { height: 20px; }
  .press-logos .logo-cbcnews { height: 30px; }
  .press-logos .logo-labj { height: 14px; }
  .nvidia-inception img { height: 72px; }
}
@media (prefers-reduced-motion: reduce) {
  .home-bridge-film { display: none; }
  .home-bridge { background: #082432 url("../homepage-v2-20260917/assets/bridge-cells-poster.jpg") center / cover; }
  .js .hf-scan-steps li, .js .hf-scan-steps .hf-scan-rule { opacity: 1; transform: none; transition: none; }
  .hc-track { scroll-behavior: auto; }
  .home-photo-break img { transform: none !important; }
}

/* On the home page the "On this page" map sits under the hero and scrolls away with it, so only one bar stays on top */
.home-page .page-map { position: relative; top: auto; }


/* One teal family on the home page. The wordmark takes the brand cyan everywhere, big accent words on paper
   take a lighter shade of that same hue (3.4:1, for large type only), and small labels take the shared deep teal (5.2:1). */
.home-page { --teal-display: #0090b8; --teal-label: var(--teal); }
.home-page .wordmark span, .home-page .site-nav.on-night .wordmark span, .home-page .site-footer .wordmark span { color: var(--cyan); }
.home-page .section .soft, .home-page .band .soft, .home-page .home-science h2 em { color: var(--teal-display); }
.home-page .section .kicker b, .home-page .band .kicker b { color: var(--teal-label); font-weight: 600; }
.home-page .person-role { color: var(--ink) !important; }
.home-page .hf-sig-accent, .home-page .hf-scan-steps li:last-child .hf-scan-num, .home-page .survival-col.early .survival-num { color: var(--teal-display); }
.home-page .hf-sig-accent { font-weight: 600; }

/* Hero on a phone: more air around the headline, and the deck request as a full-width main button */
@media (max-width: 640px) {
  .home-hero { padding-top: 56px; }
  .home-hero h1 { font-size: clamp(42px, 12.4vw, 54px); line-height: 1.04; text-wrap: balance; }
  .home-hero .lead { margin-top: 22px; }
  .home-hero .hero-actions { flex-direction: column; align-items: flex-start; gap: 20px; margin-top: 32px; }
  .home-hero .hero-actions .button { width: 100%; justify-content: center; }
}