*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html,
body {
  overscroll-behavior-y: none;
}

html {
  scroll-behavior: smooth;
}

:root {
  --bg: #faf9f5;
  --text: #141413;
  --muted: #5e5d59;
  --dim: #87867f;
  --accent: #399399;
  --salmon: #e07a5f;
  --border: rgba(20, 20, 19, 0.1);
  /* Statement size shared by the mission and solution headlines */
  --statement: clamp(1.75rem, 2.9vw, 2.75rem);
  /* Height of the fixed nav (two rows below 860px, set there) */
  --nav-h: 72px;
  /* Section label size ("The problem", "Our mission", "The solution") */
  --label: clamp(1.15rem, 1.5vw, 1.35rem);
  /* Flaws intro and the mission's lung cancer line */
  --onepage-lead: clamp(1.15rem, 1.5vw, 1.4rem);
  /* Body size for the gray tables (flaws, solution impact) */
  --body: clamp(1rem, 1.1vw, 1.125rem);
  /* Lead paragraph size shared by the hero and solution intros */
  --lead: clamp(1.15rem, 1.75vw, 1.5rem);
}

body {
  font-family: "Inter", -apple-system, sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  font-weight: 300;
}

.serif {
  font-family: Georgia, "Times New Roman", serif;
}

.container {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 clamp(1.5rem, 5vw, 3.5rem);
}

/* Nav */
nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  padding: 1.4rem 0;
  background: rgba(250, 249, 245, 0.85);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--border);
}

.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}

.nav-brand {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  text-decoration: none;
  flex-shrink: 0;
}

.nav-logo-img {
  height: 26px;
  display: block;
}

.nav-logo-text {
  font-family: "Fredoka", "Inter", sans-serif;
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  color: var(--accent);
  text-transform: uppercase;
}

.nav-tabs {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: clamp(1.25rem, 3vw, 2.5rem);
  flex: 1;
}

.nav-tabs a {
  position: relative;
  padding: 0.2rem 0;
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: 0.01em;
  color: var(--accent);
  text-decoration: none;
  transition: color 0.2s ease;
  white-space: nowrap;
}

.nav-tabs a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0.05rem;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.35s cubic-bezier(0.65, 0, 0.35, 1);
}

.nav-tabs a:hover::after,
.nav-tabs a:focus-visible::after {
  transform: scaleX(1);
  transform-origin: left;
}

@media (prefers-reduced-motion: reduce) {
  .nav-tabs a::after {
    transition: none;
  }
}

.nav-tabs a.active::after {
  transform: scaleX(1);
}

#hero {
  min-height: 100svh;
  padding: 0;
}

.hero-pin {
  position: sticky;
  top: 0;
  height: 100svh;
  display: flex;
  align-items: center;
  padding-top: 90px;
  overflow: hidden;
  background: var(--bg);
}

.hero-inner {
  width: 100%;
  text-align: center;
  max-width: 880px;
}

.hero-title {
  display: inline-flex;
  align-items: center;
  gap: clamp(1rem, 2.5vw, 2rem);
  margin-bottom: 2.25rem;
}

.hero-lungs {
  display: block;
  width: clamp(3rem, 9vw, 7rem);
  height: auto;
  transform-origin: 50% 60%;
  animation: breathe 5s ease-in-out infinite;
}

@keyframes breathe {
  0%,
  100% {
    transform: scale(0.92);
  }
  45% {
    transform: scale(1.06);
  }
}

.hero-wordmark {
  font-family: "Fredoka", "Inter", sans-serif;
  font-size: clamp(2.4rem, 9vw, 6.75rem);
  font-weight: 300;
  line-height: 0.98;
  white-space: nowrap;
  letter-spacing: 0.005em;
}

.hero-wordmark em {
  font-style: normal;
  color: var(--accent);
}

.hero-sub {
  /* Font scales with the width so the mission stays at ~3 lines */
  font-size: clamp(1.15rem, 2.7vw, 2.25rem);
  font-weight: 300;
  line-height: 1.45;
  max-width: 1200px;
  text-wrap: balance;
  margin: 0 auto 3rem;
}

.hero-sub .reveal-word {
  display: inline-block;
  opacity: 0;
  transform: translateY(10px);
  animation: word-reveal 0.7s ease forwards;
}

/* Same word reveal, held until the element scrolls into view */
.reveal-on-view .reveal-word {
  display: inline-block;
  opacity: 0;
  transform: translateY(10px);
}

.reveal-on-view.in-view .reveal-word {
  animation: word-reveal 0.7s ease forwards;
}

@keyframes word-reveal {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-lungs {
    animation: none;
  }

  .hero-sub .reveal-word,
  .reveal-on-view .reveal-word,
  .reveal-on-view.in-view .reveal-word {
    animation: none;
    opacity: 1;
    transform: none;
  }
}

/* Section framing */
section {
  padding: clamp(4.5rem, 10vw, 8rem) 0;
}

section + section {
  border-top: 1px solid var(--border);
}

/* First section on interior pages: clear the fixed nav */
.page-top {
  padding-top: clamp(8.5rem, 16vw, 11rem);
}

.section-eyebrow {
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 1.25rem;
}

.section-heading {
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(2rem, 4.5vw, 3.1rem);
  font-weight: 400;
  letter-spacing: -0.01em;
  line-height: 1.15;
  max-width: 760px;
  margin-bottom: 1.5rem;
}

/* Heading allowed to run the full width (one line when it fits) */
.section-heading.heading-wide {
  max-width: none;
}

.section-heading em {
  font-style: normal;
  color: var(--accent);
}

.section-sub {
  font-size: 1.05rem;
  color: var(--muted);
  max-width: 580px;
  line-height: 1.8;
  margin-bottom: 4.5rem;
  font-weight: 300;
}

.section-sub.wide {
  max-width: 680px;
}

.section-sub:last-child {
  margin-bottom: 0;
}

.accent-emphasis {
  display: inline-block;
  margin-top: 0.75rem;
  color: var(--accent);
  font-size: 1.25em;
  font-weight: 400;
}

.section-ctas {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  margin-top: -2.5rem;
  margin-bottom: 4.5rem;
}

.section-divider {
  border-top: 1px solid var(--border);
  margin: 3.5rem 0;
}

/* Numbered / avatar row list (donate points, approach, partner points, team) */
.row-list {
  display: flex;
  flex-direction: column;
}

.row-item {
  display: grid;
  grid-template-columns: 90px 1fr;
  gap: 2rem;
  padding: 2.25rem 0;
  border-top: 1px solid var(--border);
}

.row-item:last-child {
  border-bottom: 1px solid var(--border);
}

.row-index {
  font-size: 0.95rem;
  font-weight: 300;
  color: var(--dim);
  letter-spacing: 0.05em;
  padding-top: 0.2rem;
}

.row-avatar {
  width: 62px;
  height: 62px;
  border-radius: 50%;
  object-fit: cover;
  filter: grayscale(0.25);
}

.row-label {
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 0.5rem;
}

.row-body p {
  font-size: clamp(1.05rem, 1.8vw, 1.3rem);
  font-weight: 300;
  color: var(--text);
  line-height: 1.6;
  max-width: 640px;
}

.row-body .row-title {
  font-size: clamp(1.15rem, 2vw, 1.45rem);
  font-weight: 400;
  color: var(--text);
  margin-bottom: 0.6rem;
}

.row-body .row-desc {
  font-size: 1rem;
  font-weight: 300;
  color: var(--muted);
  line-height: 1.7;
  max-width: 620px;
}

.row-body .row-name {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  font-size: 1.1rem;
  font-weight: 400;
  color: var(--text);
}

.linkedin-link {
  display: inline-flex;
  color: var(--dim);
  transition: color 0.2s ease;
}

.linkedin-link:hover {
  color: var(--accent);
}

.linkedin-link svg {
  width: 15px;
  height: 15px;
  fill: currentColor;
}

.row-body .row-role {
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0.35rem 0 0.85rem;
}

/* Expandable donate reasons */
.reason-list {
  display: flex;
  flex-direction: column;
  interpolate-size: allow-keywords;
}

.reason {
  border-top: 1px solid var(--border);
}

.reason:last-child {
  border-bottom: 1px solid var(--border);
}

.reason-list-secondary {
  margin-top: 4rem;
}

.reason summary {
  display: grid;
  grid-template-columns: 90px 1fr auto;
  align-items: baseline;
  gap: 2rem;
  padding: 2.5rem 0;
  cursor: pointer;
  list-style: none;
}

.reason summary::-webkit-details-marker {
  display: none;
}

.reason-index {
  font-size: 1rem;
  font-weight: 300;
  color: var(--dim);
  letter-spacing: 0.05em;
}

.reason-title {
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.5rem, 3vw, 2.1rem);
  font-weight: 400;
  line-height: 1.3;
  color: var(--text);
  transition: color 0.2s ease;
}

.reason summary:hover .reason-title,
.reason[open] .reason-title {
  color: var(--accent);
}

.reason summary:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
}

/* Plus that rotates into a minus when open */
.reason-icon {
  position: relative;
  width: 18px;
  height: 18px;
  align-self: center;
  color: var(--accent);
}

.reason-icon::before,
.reason-icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 1.5px;
  background: currentColor;
  transition: transform 0.35s cubic-bezier(0.65, 0, 0.35, 1);
}

.reason-icon::after {
  transform: rotate(90deg);
}

.reason[open] .reason-icon::after {
  transform: rotate(0deg);
}

.reason::details-content {
  block-size: 0;
  overflow: hidden;
  transition:
    block-size 0.4s cubic-bezier(0.65, 0, 0.35, 1),
    content-visibility 0.4s allow-discrete;
}

.reason[open]::details-content {
  block-size: auto;
}

.reason-desc {
  margin-left: calc(90px + 2rem);
  padding-bottom: 2.5rem;
  max-width: 640px;
  font-size: 1.1rem;
  font-weight: 300;
  line-height: 1.7;
  color: var(--muted);
}

@media (max-width: 640px) {
  .reason summary {
    grid-template-columns: 2rem 1fr auto;
    gap: 1rem;
    padding: 1.75rem 0;
  }

  .reason-desc {
    margin-left: calc(2rem + 1rem);
    padding-bottom: 1.75rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .reason::details-content,
  .reason-icon::before,
  .reason-icon::after {
    transition: none;
  }
}

/* Team rows: larger photo, vertically centered with the bio */
.team-list .row-item {
  grid-template-columns: 140px 1fr;
  align-items: center;
  gap: 2.5rem;
}

.team-list .row-avatar {
  width: 140px;
  height: 140px;
}

@media (min-width: 1024px) {
  .team-list .row-item {
    grid-template-columns: 160px 1fr;
  }

  .team-list .row-avatar {
    width: 160px;
    height: 160px;
  }
}

@media (max-width: 640px) {
  .team-list .row-item {
    grid-template-columns: 96px 1fr;
    gap: 1.25rem;
  }

  .team-list .row-avatar {
    width: 96px;
    height: 96px;
  }
}

/* Stat grid (Problem section) */
.stat-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.stat-col {
  padding: 2.5rem 2rem;
}

.stat-col + .stat-col {
  border-left: 1px solid var(--border);
}

.stat-value {
  font-size: clamp(2rem, 4vw, 2.75rem);
  font-weight: 300;
  color: var(--text);
  line-height: 1;
  margin-bottom: 1rem;
}

.stat-label {
  font-size: 0.95rem;
  font-weight: 400;
  color: var(--text);
  margin-bottom: 0.75rem;
}

.stat-desc {
  font-size: 0.9rem;
  color: var(--muted);
  line-height: 1.65;
  font-weight: 300;
}

/* Founder note (home only) */
/* Our Story (homepage): story on the left, portrait on the right */
.story {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  grid-template-areas:
    "head portrait"
    "body portrait";
  grid-template-rows: auto 1fr;
  column-gap: clamp(3rem, 7vw, 7rem);
  align-items: start;
}

.story-heading {
  grid-area: head;
  margin-bottom: 2.5rem;
}

.story-body {
  grid-area: body;
  max-width: 680px;
  font-size: clamp(1.1rem, 1.5vw, 1.3rem);
  font-weight: 300;
  line-height: 1.7;
  color: var(--text);
  text-wrap: pretty;
}

.story-body p {
  margin-bottom: 1.4rem;
}

.story-body .story-closing {
  margin: 2.5rem 0 0;
  padding-left: 1.25rem;
  border-left: 2px solid var(--accent);
  font-size: clamp(1.3rem, 2.2vw, 1.75rem);
  font-weight: 400;
  line-height: 1.4;
  color: var(--accent);
}

.story-aside {
  grid-area: portrait;
  position: sticky;
  top: 120px;
}

.story-portrait {
  margin: 0;
}

.story-portrait img {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  object-position: 50% 20%;
  border-radius: 16px;
}

.story-portrait figcaption {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  margin-top: 1.1rem;
}

.story-portrait-name {
  font-size: 1.35rem;
  font-weight: 500;
  color: var(--text);
}

.story-portrait-role {
  margin-top: 0.15rem;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
}

.story-portrait-bio {
  margin-top: 0.6rem;
  font-size: 0.95rem;
  font-weight: 300;
  line-height: 1.6;
  color: var(--muted);
}

.story-portrait-bio a {
  color: var(--text);
  text-decoration: underline;
  text-decoration-color: rgba(57, 147, 153, 0.45);
  text-underline-offset: 3px;
  transition:
    color 0.2s ease,
    text-decoration-color 0.2s ease;
}

.story-portrait-bio a:hover {
  color: var(--accent);
  text-decoration-color: var(--accent);
}

/* Compact NYT card under the portrait */
.story-press {
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: 1rem;
  align-items: center;
  margin-top: 2rem;
  padding: 0.75rem;
  border: 1px solid var(--border);
  border-radius: 14px;
  text-decoration: none;
  color: var(--text);
  transition:
    border-color 0.2s ease,
    transform 0.2s ease;
}

.story-press:hover {
  border-color: var(--accent);
  transform: translateY(-2px);
}

.story-press-img {
  width: 96px;
  height: 96px;
  object-fit: cover;
  object-position: 50% 70%;
  border-radius: 10px;
}

.story-press-text {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.story-press-source {
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
}

.story-press-title {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 0.98rem;
  line-height: 1.3;
}

.story-press-cta {
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--accent);
}

.story-press-cta span {
  display: inline-block;
  transition: transform 0.2s ease;
}

.story-press:hover .story-press-cta span {
  transform: translateX(3px);
}

@media (max-width: 860px) {
  .story {
    grid-template-columns: 1fr;
    grid-template-areas:
      "head"
      "portrait"
      "body"
      "press"
      "press2"
      "press3";
  }

  /* On phones the NYT card moves below the story */
  .story-aside {
    display: contents;
  }

  .story-portrait {
    grid-area: portrait;
    max-width: 320px;
    margin-bottom: 2.5rem;
  }

  .story-press {
    grid-area: press;
    max-width: 480px;
    margin-top: 3rem;
  }

  /* Each card (video, press, book) gets its own row so they stack instead
     of landing on top of each other */
  .story-press + .story-press {
    grid-area: press2;
  }

  .story-press + .story-press + .story-press {
    grid-area: press3;
  }
}

.section-cta {
  margin-top: 4rem;
}

/* Failure rate (homepage): the 90% on its own */
.failure {
  text-align: center;
}

/* 90% sits inside a ring: salmon for drugs that fail, teal for the rest */
.failure-value {
  --ring: clamp(240px, 40vw, 400px);
  position: relative;
  display: grid;
  place-items: center;
  width: var(--ring);
  height: var(--ring);
  margin: 0 auto;
}

.failure-ring {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  transform: rotate(-90deg);
}

.failure-ring circle {
  fill: none;
  stroke-width: 0.8;
}

.failure-ring-fail {
  stroke: var(--salmon);
  filter: drop-shadow(0 0 3px rgba(224, 122, 95, 0.55));
}

.failure-ring-pass {
  stroke: var(--accent);
}

.failure-figure {
  position: relative;
  font-size: calc(var(--ring) * 0.3);
  font-weight: 200;
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

.failure-fail {
  color: var(--salmon);
  font-weight: 400;
}

.failure-label {
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 400;
  max-width: 680px;
  margin: 1.5rem auto 0;
  font-size: clamp(1.35rem, 2.6vw, 2rem);
  line-height: 1.5;
  color: var(--text);
  text-wrap: balance;
}

/* Underline draws under "cancer drugs fail" once the count-up finishes */
.failure-mark {
  white-space: nowrap;
  color: var(--text);
  background-image: linear-gradient(var(--text), var(--text));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0% 2px;
  padding-bottom: 0.08em;
  transition: background-size 0.8s cubic-bezier(0.65, 0, 0.35, 1) 0.15s;
}

.failure-label.is-marked .failure-mark {
  background-size: 100% 2px;
}

@media (prefers-reduced-motion: reduce) {
  .failure-mark {
    transition: none;
  }
}

/* Solution (homepage): what Anemos is building */
/* Text on the left, the growing cell bank on the right */
.solution {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas:
    "text"
    "pillars";
  align-items: start;
}

.solution .solution-tag {
  grid-area: tag;
}

.solution .solution-heading {
  grid-area: head;
  font-size: var(--statement);
}

.solution .solution-body {
  grid-area: body;
}

/* Groups the label, heading and paragraph on wide screens; transparent
   otherwise */
.solution-text {
  grid-area: text;
}

/* The solution heading has taller lines (1.32) than the mission statement
   (1.22), so its label sits a touch closer to keep the visible gap equal */
.solution .solution-tag {
  margin-bottom: calc(1rem - 0.05 * var(--statement));
}

.solution-cells {
  grid-area: cells;
  justify-self: center;
  text-align: center;
}

/* One screen: read with its top just under the fixed nav, the solution
   section fills exactly the rest of the screen (expanded or not), with its
   content centered in it */
#solution {
  min-height: calc(100svh - var(--nav-h));
  display: flex;
  align-items: center;
  padding: clamp(0.75rem, 3vh, 2.5rem) 0;
  scroll-margin-top: var(--nav-h);
}

#solution .solution {
  width: 100%;
}

/* Characterization: sits under the solution paragraph */
.solution-char {
  grid-area: char;
  margin-top: clamp(2rem, 5vh, 3rem);
}

/* Why it matters: a serif sub-heading over a gray table that mirrors the
   four flaws in the problem section */
.solution-heading-2 {
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.35rem, 2vw, 1.85rem);
  line-height: 1.3;
  color: var(--text);
  transition: color 0.25s ease;
}

/* "Better models mean more drugs that work." opens to show the four ways
   better models help, as a gray table whose rows unfold as it opens */
.impact {
  interpolate-size: allow-keywords;
}

.impact summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 0.9rem 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  list-style: none;
}

.impact summary::-webkit-details-marker {
  display: none;
}

.impact summary:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
}

.impact summary:hover .solution-heading-2,
.impact[open] .solution-heading-2,
.impact summary:hover .impact-icon,
.impact[open] .impact-icon {
  color: var(--accent);
}

/* Plus that rotates into a minus when open */
.impact-icon {
  position: relative;
  flex: none;
  width: 16px;
  height: 16px;
  color: var(--text);
  transition: color 0.25s ease;
}

.impact-icon::before,
.impact-icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 1.5px;
  background: currentColor;
  transition: transform 0.35s cubic-bezier(0.65, 0, 0.35, 1);
}

.impact-icon::after {
  transform: rotate(90deg);
}

.impact[open] .impact-icon::after {
  transform: rotate(0deg);
}

.impact::details-content {
  block-size: 0;
  overflow: hidden;
  transition:
    block-size 0.45s cubic-bezier(0.65, 0, 0.35, 1),
    content-visibility 0.45s allow-discrete;
}

.impact[open]::details-content {
  block-size: auto;
}

/* Wider title column than the flaws; no top line, the summary has one */
.onepage-flaws.solution-impact {
  border-top: 0;
}

/* Title column sized to the longest title, so every title stays on one line;
   the subgrid keeps the column the same width in every row */
.onepage-flaws.solution-impact {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  column-gap: 1.75rem;
}

.onepage-flaws.solution-impact li {
  grid-column: 1 / -1;
  grid-template-columns: subgrid;
}

.onepage-flaws.solution-impact .onepage-flaw-title {
  white-space: nowrap;
}

/* Wide screens: the table runs the full width under the text and the cell
   bank, so every row (title and description) fits on one line. Extra space
   above clears the caption hanging below the cell bank */
@media (min-width: 1200px) {
  .onepage-flaws.solution-impact li > span {
    white-space: nowrap;
  }

  .solution > .impact {
    margin-top: clamp(3.75rem, 8vh, 5rem);
  }
}

@media (prefers-reduced-motion: reduce) {
  .impact::details-content,
  .impact-icon,
  .impact-icon::before,
  .impact-icon::after,
  .solution-heading-2 {
    transition: none;
  }
}

/* Four expandable rows in the gray table style: the title shows, the
   description opens beneath it. Rows unfold into view like the flaws */
.impact-list {
  list-style: none;
  border-top: 1px solid var(--border);
  perspective: 1200px;
  interpolate-size: allow-keywords;
}

.impact-list > li {
  border-bottom: 1px solid var(--border);
  transform-origin: 50% 0;
  opacity: 0;
  transform: rotateX(-88deg);
}

.impact-list.in-view > li {
  animation: card-unfold 0.75s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
  animation-delay: calc(var(--i, 0) * 0.16s);
}

.impact-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 0.95rem 0;
  cursor: pointer;
  list-style: none;
}

.impact-item summary::-webkit-details-marker {
  display: none;
}

.impact-item summary:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
}

.impact-title {
  font-size: var(--body);
  line-height: 1.5;
  color: var(--text);
  transition: color 0.25s ease;
}

.impact-item .faq-icon {
  width: 12px;
  height: 12px;
  color: var(--muted);
  transition: color 0.25s ease;
}

.impact-item summary:hover .impact-title,
.impact-item summary:hover .faq-icon,
.impact-item[open] .impact-title,
.impact-item[open] .faq-icon {
  color: var(--accent);
}

.impact-item[open] .faq-icon::after {
  transform: rotate(0deg);
}

.impact-item::details-content {
  block-size: 0;
  overflow: hidden;
  transition:
    block-size 0.4s cubic-bezier(0.65, 0, 0.35, 1),
    content-visibility 0.4s allow-discrete;
}

.impact-item[open]::details-content {
  block-size: auto;
}

.impact-desc {
  padding-bottom: 1rem;
  font-size: var(--body);
  line-height: 1.55;
  color: var(--muted);
  text-wrap: pretty;
}

@media (prefers-reduced-motion: reduce) {
  .impact-list > li,
  .impact-list.in-view > li {
    animation: none;
    opacity: 1;
    transform: none;
  }

  .impact-item::details-content {
    transition: none;
  }
}

.data-list {
  list-style: none;
  max-width: 640px;
  margin-top: 1rem;
  border-bottom: 1px solid var(--border);
}

.data-list li {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.65rem 0;
  border-top: 1px solid var(--border);
  font-size: clamp(1rem, 1.4vw, 1.1rem);
  color: var(--text);
}

.data-list li::before {
  content: "";
  flex: none;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
}

.cell-bank {
  --cell-size: clamp(200px, 19vw, 270px);
  --tile: 9%;
  position: relative;
  width: var(--cell-size);
  height: var(--cell-size);
}

/* The one cell line, which shrinks to become the center of the bank */
.cell-bank-core,
.cell-tile {
  position: absolute;
  left: var(--x, 50%);
  top: var(--y, 50%);
  border-radius: 50%;
  background-color: #111;
  background-size: cover;
  background-position: center;
}

.cell-bank-core {
  z-index: 1;
  width: 100%;
  height: 100%;
  transform: translate(-50%, -50%);
  box-shadow: 0 0 0 1px var(--border), 0 18px 40px -24px rgba(20, 20, 19, 0.45);
  transition:
    width 1s cubic-bezier(0.65, 0, 0.35, 1),
    height 1s cubic-bezier(0.65, 0, 0.35, 1),
    box-shadow 1s ease;
}

.cell-bank.is-shrunk .cell-bank-core {
  width: var(--tile);
  height: var(--tile);
  box-shadow: 0 0 0 2px var(--accent);
}

/* The other 100 pop in from the center outward */
.cell-tile {
  width: var(--tile);
  height: var(--tile);
  opacity: 0;
  transform: translate(-50%, -50%) scale(0);
  transition:
    transform 0.55s cubic-bezier(0.34, 1.56, 0.64, 1) var(--d),
    opacity 0.35s ease var(--d);
}

.cell-bank.is-filled .cell-tile {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

/* Once everything is in place, hovering any circle enlarges it */
.cell-bank.is-settled .cell-tile,
.cell-bank.is-settled .cell-bank-core {
  cursor: zoom-in;
  transition:
    transform 0.3s cubic-bezier(0.34, 1.4, 0.64, 1),
    box-shadow 0.3s ease;
}

.cell-bank.is-settled .cell-tile:hover,
.cell-bank.is-settled .cell-bank-core:hover {
  z-index: 3;
  box-shadow: 0 0 0 2px var(--bg), 0 10px 24px -6px rgba(20, 20, 19, 0.5);
}

.cell-bank.is-settled .cell-tile:hover {
  transform: translate(-50%, -50%) scale(3.2);
}

.cell-bank.is-settled .cell-bank-core:hover {
  transform: translate(-50%, -50%) scale(3.2);
  box-shadow: 0 0 0 2px var(--accent), 0 10px 24px -6px rgba(20, 20, 19, 0.5);
}

.solution-cells figcaption {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.7rem;
  margin-top: 1.25rem;
  font-size: 0.85rem;
  color: var(--muted);
}

/* Three pillars under the solution: a small spaced Georgia label in teal
   over a short paragraph, in three columns. They rise in one after another */
.solution-pillars {
  grid-area: pillars;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.75rem, 4vw, 4rem);
  margin-top: clamp(2.5rem, 6vh, 4rem);
  padding-top: clamp(1.1rem, 3vh, 2.25rem);
  border-top: 1px solid var(--border);
}

/* Flow: a thin arrow runs from each label to the next column */
.solution-pillars {
  /* Where the return loop's ends sit, just in from each column's left edge */
  --icon: 1.5rem;
  --pillar-gap: clamp(1.75rem, 4vw, 4rem);
  column-gap: var(--pillar-gap);
  /* Keep the return loop tucked right under the three columns */
  row-gap: 0;
}

.pillar {
  position: relative;
}

/* Head row: the label, then on the first two pillars a thin arrow across
   the gap to the next pillar */
.pillar-head {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  margin-bottom: 0.75rem;
}

.pillar-head .pillar-label {
  margin: 0;
  white-space: nowrap;
}

.pillar-arrow {
  position: relative;
  flex: 1;
  min-width: 1.5rem;
  height: 1px;
  margin-right: calc(-1 * var(--pillar-gap) + 0.8rem);
  background: linear-gradient(90deg, rgba(57, 147, 153, 0.3), var(--accent));
}

.pillar-arrow::after {
  content: "";
  position: absolute;
  right: 0;
  top: -4px;
  width: 8px;
  height: 8px;
  border-top: 1px solid var(--accent);
  border-right: 1px solid var(--accent);
  transform: rotate(45deg);
}

/* Return loop: from the middle of the AI column, back along the bottom, up
   into the middle of the Cell Atlas column. Symmetric, so its label sits at
   the page's centre */
.pillar-loop {
  grid-column: 1 / -1;
  position: relative;
  height: 1.2rem;
  margin: 0.7rem calc((100% - 2 * var(--pillar-gap)) / 6) 0;
  border: 1px solid rgba(57, 147, 153, 0.6);
  border-top: 0;
  border-radius: 0 0 14px 14px;
}

/* Arrowhead pointing up into the Cell Bank column */
.pillar-loop::before {
  content: "";
  position: absolute;
  top: -1px;
  left: -4.5px;
  width: 8px;
  height: 8px;
  border-top: 1px solid var(--accent);
  border-left: 1px solid var(--accent);
  transform: rotate(45deg);
}

.pillar-loop-label {
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translate(-50%, 50%);
  padding: 0 0.85rem;
  background: var(--bg);
  /* Same type as the pillar labels (THE CELL ATLAS, THE DATA, THE AI) */
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(0.92rem, 1vw, 1.02rem);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
  color: #276c71;
}

.pillar-loop {
  opacity: 0;
}

.solution-pillars.in-view .pillar-loop {
  animation: pillar-rise 0.7s cubic-bezier(0.2, 0.8, 0.2, 1) 0.6s forwards;
}

@media (max-width: 860px) {
  /* Stacked: no side-by-side arrows; the loop becomes a single line */
  .pillar-arrow {
    display: none;
  }

  .pillar-loop {
    height: auto;
    margin: 0;
    border: 0;
  }

  .pillar-loop::before {
    display: none;
  }

  .pillar-loop-label {
    position: static;
    transform: none;
    padding: 0;
  }

  .pillar-loop-label::before {
    content: "\21BB  ";
  }
}

@media (prefers-reduced-motion: reduce) {
  .pillar-loop,
  .solution-pillars.in-view .pillar-loop {
    animation: none;
    opacity: 1;
  }
}

/* Bold, a step larger, and a deeper teal so the labels read clearly on the
   cream background */
.pillar-label {
  margin-bottom: 0.6rem;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(0.92rem, 1vw, 1.02rem);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #276c71;
}

.pillar p {
  font-size: var(--body);
  line-height: 1.6;
  color: var(--text);
  text-wrap: pretty;
}

.pillar {
  opacity: 0;
  transform: translateY(14px);
}

.solution-pillars.in-view .pillar {
  animation: pillar-rise 0.7s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
  animation-delay: calc(var(--i, 0) * 0.15s + 0.1s);
}

@keyframes pillar-rise {
  to {
    opacity: 1;
    transform: none;
  }
}

@media (max-width: 860px) {
  .solution-pillars {
    grid-template-columns: 1fr;
    gap: 1.75rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pillar,
  .solution-pillars.in-view .pillar {
    animation: none;
    opacity: 1;
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cell-bank-core,
  .cell-tile {
    transition: none;
  }
}

/* Mini FAQ under the solution: same expand pattern as .flaw, in teal */
.faq {
  list-style: none;
  max-width: 760px;
  margin-top: clamp(3.5rem, 7vw, 5.5rem);
  border-bottom: 1px solid var(--text);
  interpolate-size: allow-keywords;
}

/* Standalone FAQ page: sits just under the page heading */
.faq-page {
  margin-top: clamp(2rem, 4vw, 3rem);
  margin-bottom: clamp(4rem, 8vw, 6rem);
}

.faq li {
  border-top: 1px solid var(--text);
}

.faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1.25rem 0;
  cursor: pointer;
  list-style: none;
}

.faq-item summary::-webkit-details-marker {
  display: none;
}

.faq-item summary:focus-visible {
  outline: 2px solid var(--text);
  outline-offset: 4px;
}

.faq-q {
  font-size: clamp(1.15rem, 1.8vw, 1.4rem);
  font-weight: 300;
  line-height: 1.35;
  color: var(--text);
}

.faq-q,
.faq-icon {
  transition: color 0.25s ease;
}

.faq-item summary:hover .faq-q,
.faq-item summary:hover .faq-icon,
.faq-item[open] .faq-q,
.faq-item[open] .faq-icon {
  color: var(--accent);
}

/* Plus that rotates into a minus when open */
.faq-icon {
  position: relative;
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  color: var(--text);
}

.faq-icon::before,
.faq-icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 1.5px;
  background: currentColor;
  transition: transform 0.35s cubic-bezier(0.65, 0, 0.35, 1);
}

.faq-icon::after {
  transform: rotate(90deg);
}

.faq-item[open] .faq-icon::after {
  transform: rotate(0deg);
}

.faq-item::details-content {
  block-size: 0;
  overflow: hidden;
  transition:
    block-size 0.4s cubic-bezier(0.65, 0, 0.35, 1),
    content-visibility 0.4s allow-discrete;
}

.faq-item[open]::details-content {
  block-size: auto;
}

.faq-a {
  max-width: 640px;
  padding-bottom: 1.5rem;
  font-size: 1rem;
  font-weight: 300;
  line-height: 1.65;
  color: var(--muted);
  text-wrap: pretty;
}

/* Answers split into paragraphs sit closer together */
.faq-a:has(+ .faq-a) {
  padding-bottom: 0.9rem;
}

.faq-a strong {
  font-weight: 500;
  color: var(--text);
}

@media (prefers-reduced-motion: reduce) {
  .faq-item::details-content,
  .faq-icon::before,
  .faq-icon::after {
    transition: none;
  }
}

@media (max-width: 860px) {

  .solution-cells {
    margin-top: 3rem;
  }

  .cell-bank {
    --cell-size: min(260px, 72vw);
  }
}

/* "The solution" is a plain serif label above the heading */
/* Section labels ("The problem", "Our mission", "The solution"):
   one shared look, Georgia in gray */
.solution-tag,
.onepage-eyebrow {
  margin-bottom: 1rem;
  font-family: Georgia, "Times New Roman", serif;
  font-size: var(--label);
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: 0;
  text-transform: none;
  color: var(--muted);
}

/* The heading gets a soft highlighter mark that sweeps in on scroll
   (across both lines when it wraps) and replays on hover */
/* Light teal highlight */
.solution-mark {
  background-image: linear-gradient(rgba(57, 147, 153, 0.18), rgba(57, 147, 153, 0.18));
  background-repeat: no-repeat;
  background-size: 0% 100%;
  transition: background-size 1.2s cubic-bezier(0.65, 0, 0.35, 1) 0.2s;
}

/* Extra line spacing so the two highlighted lines never overlap */
.solution-heading {
  line-height: 1.32;
}

/* Always two lines above phone width: same size as the other section
   headings, shrinking only if a line (~19.2em wide) wouldn't fit */
@media (min-width: 641px) {
  .solution-heading {
    container-type: inline-size;
    max-width: none;
  }

  .solution-mark {
    font-size: min(1em, 5.1cqi);
  }

  .solution-line {
    white-space: nowrap;
  }

  .solution-heading-2 .solution-mark {
    font-size: 1em;
  }
}

@media (max-width: 640px) {
  .solution-heading br {
    display: none;
  }

  /* Keep a space where the line break was */
  .solution-line + br + .solution-line::before {
    content: " ";
  }
}

.solution-heading.in-view .solution-mark {
  background-size: 100% 100%;
}

.solution-mark:hover {
  animation: highlight-sweep 1.2s cubic-bezier(0.65, 0, 0.35, 1);
}

@keyframes highlight-sweep {
  from {
    background-size: 0% 100%;
  }
  to {
    background-size: 100% 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .solution-mark,
  .solution-mark:hover {
    background-size: 100% 100%;
    transition: none;
    animation: none;
  }
}

.solution-body {
  max-width: 820px;
  font-size: var(--lead);
  line-height: 1.5;
  color: var(--text);
  text-wrap: pretty;
}

/* What's in the bank: a compact row of teal checks that answers the salmon
   ✕'s in the problem section. Each check pops in one after another */
.solution-checks {
  grid-area: checks;
  align-self: start;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, max-content);
  gap: 0.6rem 2rem;
  margin-top: clamp(1rem, 2.5vh, 1.5rem);
}

/* Wide screens: all four in one row */
@media (min-width: 1400px) {
  .solution-checks {
    grid-template-columns: repeat(4, max-content);
    column-gap: 1.75rem;
  }
}

/* Phones: one per line */
@media (max-width: 420px) {
  .solution-checks {
    grid-template-columns: 1fr;
  }
}

.solution-checks li {
  display: inline-flex;
  align-items: center;
  gap: 0.55em;
  font-size: var(--body);
  line-height: 1.4;
  color: var(--text);
  white-space: nowrap;
}

/* The check: a short L rotated 45°, drawn with two borders */
.solution-checks li::before {
  content: "";
  flex: none;
  width: 0.36em;
  height: 0.7em;
  margin: -0.2em 0.15em 0 0.1em;
  border-right: 0.12em solid var(--accent);
  border-bottom: 0.12em solid var(--accent);
  transform: rotate(45deg) scale(0);
}

.solution-checks.in-view li::before {
  animation: check-pop 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) both;
  animation-delay: calc(var(--i, 0) * 0.14s + 0.2s);
}

@keyframes check-pop {
  from {
    transform: rotate(45deg) scale(0);
  }
  to {
    transform: rotate(45deg) scale(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .solution-checks li::before,
  .solution-checks.in-view li::before {
    animation: none;
    transform: rotate(45deg);
  }
}

/* Mission (homepage): the answer to the bottleneck */
.mission-eyebrow {
  font-size: clamp(1rem, 1.7vw, 1.3rem);
  color: var(--text);
  margin-bottom: 1.5rem;
}

.mission-heading {
  font-size: clamp(1.9rem, 7.5vw, 4.25rem);
  max-width: none;
  margin-bottom: 0;
}

/* The mission sits on its own full screen */
#mission {
  min-height: 100svh;
  display: flex;
  align-items: center;
}

.mission .mission-heading .nowrap {
  display: block;
}

/* Next screen: the lung cancer line on the left, the call to action for
   patients on the right */
#lung-cancer {
  min-height: 100svh;
  display: flex;
  align-items: center;
}

.lung-split {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: clamp(3rem, 7vw, 6rem);
  align-items: center;
}

/* Same size as the solution heading, but steps down on phones so the
   mission above stays the biggest line */
.mission-next {
  margin: 0;
  font-size: clamp(1.4rem, 3.4vw, 3.1rem);
}

/* In the half-width column, let the line wrap at full size instead of
   shrinking to stay on two lines */
.lung-split .solution-mark {
  font-size: 1em;
}

.lung-split .solution-line {
  white-space: normal;
}

.lung-split .solution-heading br {
  display: none;
}

.lung-split .solution-line + br + .solution-line::before {
  content: " ";
}

.mission-cta {
  padding-left: clamp(2.5rem, 5vw, 4rem);
  border-left: 1px solid var(--border);
  font-size: clamp(1.15rem, 1.6vw, 1.35rem);
  line-height: 1.65;
  color: var(--text);
  text-wrap: pretty;
}

.mission-cta p {
  max-width: 600px;
}

/* Teal outline pill in the title serif; fills from the left on hover */
.mission-cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  margin-top: 2rem;
  padding: 0.8rem 1.9rem 0.85rem;
  border: 1px solid var(--accent);
  border-radius: 999px;
  background-color: transparent;
  /* Hover highlight: a light teal wash that glides in from the left with a
     soft edge (a double-width gradient, tinted on its left half) */
  background-image: linear-gradient(
    90deg,
    rgba(57, 147, 153, 0.14) 0%,
    rgba(57, 147, 153, 0.14) 40%,
    rgba(57, 147, 153, 0) 60%
  );
  background-repeat: no-repeat;
  background-size: 200% 100%;
  background-position: 100% 0;
  color: var(--accent);
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.15rem, 1.6vw, 1.35rem);
  font-weight: 400;
  text-decoration: none;
  white-space: nowrap;
  transition: background-position 0.55s cubic-bezier(0.65, 0, 0.35, 1);
}

.mission-cta-btn span {
  transition: transform 0.3s ease;
}

.mission-cta-btn:hover,
.mission-cta-btn:focus-visible {
  background-position: 0% 0;
}

.mission-cta-btn:hover span,
.mission-cta-btn:focus-visible span {
  transform: translateX(4px);
}

.mission-cta-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .mission-cta-btn,
  .mission-cta-btn span {
    transition: none;
  }
}

@media (max-width: 760px) {
  .lung-split {
    grid-template-columns: 1fr;
  }

  .mission-cta {
    padding-left: 0;
    padding-top: clamp(2.5rem, 5vw, 3.5rem);
    border-left: 0;
    border-top: 1px solid var(--border);
  }
}

.mission-cta-label {
  margin-bottom: 0.9rem;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.7rem, 3vw, 2.4rem);
  line-height: 1.15;
  color: var(--text);
}

.nowrap {
  white-space: nowrap;
}

/* Bottleneck (homepage): animated drug development pipeline */
.pipeline {
  --node: clamp(76px, 9vw, 112px);
  --step: 0.55s;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  margin: clamp(3rem, 6vw, 4.5rem) 0 clamp(3.5rem, 7vw, 5.5rem);
}

.pipeline-step {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

/* Connector from this circle to the next one */
.pipeline-step:not(:last-child)::after {
  content: "";
  position: absolute;
  top: calc(var(--node) / 2);
  left: calc(50% + var(--node) / 2);
  width: calc(100% - var(--node));
  height: 1px;
  background: var(--text);
  transform: scaleX(0);
  transform-origin: left center;
}

.pipeline-node {
  position: relative;
  display: grid;
  place-items: center;
  width: var(--node);
  height: var(--node);
  flex-shrink: 0;
  border-radius: 50%;
}

.pipeline-node svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  transform: rotate(180deg);
}

.pipeline-node circle {
  fill: none;
  stroke: var(--text);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
}

.pipeline-num {
  font-size: 0.8rem;
  font-weight: 300;
  letter-spacing: 0.12em;
  color: var(--text);
  opacity: 0;
}

.pipeline-label {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  margin-top: 1.25rem;
  font-size: clamp(0.95rem, 1.3vw, 1.1rem);
  font-weight: 400;
  color: var(--text);
  clip-path: inset(0 100% 0 0);
}

.pipeline-flag {
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--salmon);
  opacity: 0;
}

/* Diffuse salmon glow hugging the Preclinical circle */
.pipeline-step.is-problem .pipeline-node::before {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: 50%;
  box-shadow:
    0 0 0 1px rgba(224, 122, 95, 0.55),
    0 0 18px 4px rgba(224, 122, 95, 0.45),
    inset 0 0 14px 2px rgba(224, 122, 95, 0.25);
  opacity: 0;
}

/* Sequence: circle draws, label wipes in, connector draws to the next */
.pipeline.in-view .pipeline-node circle {
  animation: draw-circle 0.6s cubic-bezier(0.65, 0, 0.35, 1) forwards;
  animation-delay: calc(var(--i) * var(--step));
}

.pipeline.in-view .pipeline-num {
  animation: fade-in 0.5s ease forwards;
  animation-delay: calc(var(--i) * var(--step) + 0.3s);
}

.pipeline.in-view .pipeline-label {
  animation: wipe-in 0.6s cubic-bezier(0.65, 0, 0.35, 1) forwards;
  animation-delay: calc(var(--i) * var(--step) + 0.25s);
}

.pipeline.in-view .pipeline-step:not(:last-child)::after {
  animation: draw-line 0.35s cubic-bezier(0.65, 0, 0.35, 1) forwards;
  animation-delay: calc(var(--i) * var(--step) + 0.45s);
}

.pipeline.in-view .is-problem .pipeline-node::before {
  animation:
    fade-in 0.8s ease 3s forwards,
    glow-pulse 2.6s ease-in-out 3.8s infinite;
}

.pipeline.in-view .is-problem .pipeline-flag {
  animation: fade-in 0.6s ease 3.3s forwards;
}

@keyframes draw-circle {
  to {
    stroke-dashoffset: 0;
  }
}

@keyframes draw-line {
  to {
    transform: scale(1);
  }
}

@keyframes wipe-in {
  to {
    clip-path: inset(0 0 0 0);
  }
}

@keyframes fade-in {
  to {
    opacity: 1;
  }
}

@keyframes glow-pulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.35;
  }
}

.bottleneck-lead {
  max-width: none;
  font-size: clamp(1.3rem, 2.2vw, 1.75rem);
  line-height: 1.5;
  color: var(--text);
  text-wrap: pretty;
  margin-bottom: 2.5rem;
}

/* The first sentence gets a line of its own */
.bottleneck-lead .lead-line {
  display: block;
}

.bottleneck-lead strong {
  font-weight: 600;
  white-space: nowrap;
}

.flaws {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  column-gap: clamp(1.5rem, 4vw, 3rem);
  interpolate-size: allow-keywords;
}

.flaws li {
  border-top: 1px solid var(--text);
}

/* Each flaw expands to explain itself (same pattern as .reason) */
/* Title centered in the cell, plus/minus pinned to the right */
.flaw summary {
  display: grid;
  grid-template-columns: 14px 1fr 14px;
  align-items: center;
  gap: 1rem;
  padding: 1.25rem 0;
  cursor: pointer;
  list-style: none;
}

.flaw summary::-webkit-details-marker {
  display: none;
}

.flaw summary:focus-visible {
  outline: 2px solid var(--text);
  outline-offset: 4px;
}

.flaw-title {
  grid-column: 2;
  text-align: center;
  font-size: clamp(1.3rem, 2.2vw, 1.75rem);
  font-weight: 300;
  line-height: 1.3;
  color: var(--text);
}

/* Salmon marks the flaw as a problem once it's opened */
.flaw-title,
.flaw-icon {
  transition: color 0.25s ease;
}

.flaw summary:hover .flaw-title,
.flaw summary:hover .flaw-icon,
.flaw[open] .flaw-title,
.flaw[open] .flaw-icon {
  color: var(--salmon);
}

/* Plus that rotates into a minus when open */
.flaw-icon {
  grid-column: 3;
  position: relative;
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  color: var(--text);
}

.flaw-icon::before,
.flaw-icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 1.5px;
  background: currentColor;
  transition: transform 0.35s cubic-bezier(0.65, 0, 0.35, 1);
}

.flaw-icon::after {
  transform: rotate(90deg);
}

.flaw[open] .flaw-icon::after {
  transform: rotate(0deg);
}

.flaw::details-content {
  block-size: 0;
  overflow: hidden;
  transition:
    block-size 0.4s cubic-bezier(0.65, 0, 0.35, 1),
    content-visibility 0.4s allow-discrete;
}

.flaw[open]::details-content {
  block-size: auto;
}

.flaw-desc {
  max-width: 440px;
  margin: 0 auto;
  text-align: center;
  padding-bottom: 1.5rem;
  font-size: 1rem;
  font-weight: 300;
  line-height: 1.65;
  color: var(--muted);
  text-wrap: pretty;
}

@media (prefers-reduced-motion: reduce) {
  .flaw::details-content,
  .flaw-icon::before,
  .flaw-icon::after {
    transition: none;
  }
}


@media (prefers-reduced-motion: reduce) {
  .pipeline-node circle {
    stroke-dashoffset: 0;
  }

  .pipeline-step:not(:last-child)::after {
    transform: none;
  }

  .pipeline-label {
    clip-path: none;
  }

  .pipeline-num,
  .pipeline-flag,
  .pipeline-step.is-problem .pipeline-node::before {
    opacity: 1;
    transform: none;
  }

  .pipeline.in-view *,
  .pipeline.in-view *::before,
  .pipeline.in-view *::after {
    animation: none !important;
  }
}

/* Tablets and up: keep the whole section (heading through the flaws) on one
   screen by tying its spacing to the viewport height */
@media (min-width: 641px) {
  #bottleneck {
    padding-block: clamp(3.5rem, 9vh, 6rem);
  }

  .pipeline {
    --node: clamp(64px, min(8vw, 11vh), 104px);
    margin: clamp(2rem, 5vh, 3.5rem) 0 clamp(2.25rem, 6vh, 4rem);
  }

  .bottleneck-lead {
    margin-bottom: clamp(1.5rem, 4vh, 2.5rem);
  }
}

/* Phones: the pipeline runs top to bottom */
@media (max-width: 640px) {
  .pipeline {
    --node: 60px;
    grid-template-columns: 1fr;
  }

  .pipeline-step {
    flex-direction: row;
    align-items: flex-start;
    text-align: left;
    padding-bottom: 1.75rem;
  }

  .pipeline-step:last-child {
    padding-bottom: 0;
  }

  .pipeline-step:not(:last-child)::after {
    top: var(--node);
    left: calc(var(--node) / 2);
    width: 1px;
    height: calc(100% - var(--node));
    transform: scaleY(0);
    transform-origin: center top;
  }

  .pipeline-label {
    align-items: flex-start;
    gap: 0.35rem;
    min-height: var(--node);
    justify-content: center;
    margin: 0 0 0 1.25rem;
  }

  .flaws {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Footer */
footer {
  border-top: 1px solid var(--border);
  padding: 2.5rem 0;
}

.footer-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
}

footer p,
footer a {
  font-size: 0.82rem;
  color: var(--muted);
  text-decoration: none;
}

footer a:hover {
  color: var(--text);
}

/* Responsive */
/* Desktop: use the full width of the screen, keeping side margins */
@media (min-width: 1024px) {
  .container {
    max-width: 1600px;
    padding: 0 clamp(3rem, 6vw, 7rem);
  }

  .hero-inner {
    max-width: none;
  }

  .section-heading {
    max-width: 1000px;
  }

  .section-sub,
  .section-sub.wide {
    max-width: 820px;
  }

  .row-body p,
  .row-body .row-desc {
    max-width: 900px;
  }

  .row-item {
    grid-template-columns: 140px 1fr;
  }
}

@media (max-width: 860px) {
  .nav-inner {
    flex-wrap: wrap;
  }

  .nav-tabs {
    order: 3;
    flex-basis: 100%;
    justify-content: flex-start;
    gap: 1.5rem;
    overflow-x: auto;
    padding-top: 0.9rem;
    margin-top: 0.9rem;
    border-top: 1px solid var(--border);
  }

  /* Clear the taller two-row nav */
  .page-top {
    padding-top: 11.5rem;
  }
}

@media (max-width: 640px) {
  /* Four tabs fit on one row at phone width */
  .nav-tabs {
    justify-content: space-between;
    gap: 1rem;
  }

  .nav-tabs a {
    font-size: 0.95rem;
  }

  .stat-grid {
    grid-template-columns: 1fr;
  }

  .stat-col + .stat-col {
    border-left: none;
    border-top: 1px solid var(--border);
  }

  .row-item {
    grid-template-columns: 1fr;
    gap: 0.9rem;
  }

  .footer-inner {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* ---- v2 changes ---- */

/* Only the main solution heading keeps the highlighter */
.no-mark .solution-mark,
.no-mark .solution-mark:hover {
  background-image: none;
  animation: none;
}

/* Flaws: explanations always visible instead of click-to-expand */
.flaw-head {
  padding: 1.25rem 0 0.5rem;
  text-align: center;
}

.flaw-static .flaw-title {
  color: var(--salmon);
}

.flaw-static .flaw-desc {
  font-size: 0.95rem;
}

/* Partner call to action closing the solution section */
/* Its own short band between the solution and Our Story */
/* A full page of its own: the last card in the stack */
/* Sized to its content rather than a full screen */
#partner-band {
  padding: clamp(3.5rem, 9vh, 6rem) 0;
  scroll-margin-top: var(--nav-h);
}

#partner-band > .container {
  width: 100%;
}

#partner-band .partner-cta {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

/* Second row (drug developers) sits under a divider */
#partner-band .partner-cta + .partner-cta {
  margin-top: clamp(2rem, 4vw, 3rem);
  padding-top: clamp(2rem, 4vw, 3rem);
  border-top: 1px solid var(--border);
}

.partner-cta-sub {
  max-width: 640px;
  margin-top: 0.75rem;
  font-size: clamp(1.05rem, 1.4vw, 1.2rem);
  line-height: 1.6;
  color: var(--muted);
}

.partner-cta {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 2rem;
  margin-top: clamp(2rem, 5vh, 3rem);
  padding-top: clamp(1.25rem, 3vh, 2rem);
  border-top: 1px solid var(--border);
}

.partner-cta-label {
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.5rem, 2.6vw, 2.2rem);
  line-height: 1.2;
  color: var(--text);
}

.partner-cta .mission-cta-btn {
  margin-top: 0;
}

/* Mission and lung cancer share one screen */
.lung-split .mission-heading {
  font-size: clamp(2rem, 4.6vw, 3.6rem);
}

.mission-sub {
  margin-top: 1.5rem;
  max-width: 30ch;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.25rem, 2vw, 1.6rem);
  line-height: 1.4;
  color: var(--muted);
}

.lung-split .mission-heading .nowrap {
  display: block;
}

@media (max-width: 640px) {
  .flaws {
    grid-template-columns: 1fr;
  }

  .flaw-static .flaw-head,
  .flaw-static .flaw-desc {
    text-align: left;
  }

  .flaw-static .flaw-desc {
    margin: 0;
  }
}

/* ======== v2: restructured homepage ======== */

/* Hero: clean split on the light background. Headline on the left,
   description on the right (top-aligned), buttons centered underneath */
#hero .hero-pin {
  align-items: center;
}

.hero-card {
  width: 100%;
}

.hero-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.72fr);
  align-items: start;
  gap: clamp(2rem, 5vw, 7rem);
  padding-bottom: 4vh;
}

.hero-headline {
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 400;
  font-size: clamp(2.3rem, 4.8vw, 4.6rem);
  line-height: 1.04;
  letter-spacing: -0.015em;
  color: var(--text);
}

/* Each half of the headline stays on its own single line */
.hero-line {
  display: block;
  white-space: nowrap;
}

.hero-headline em {
  font-style: normal;
  color: var(--accent);
}

.hero-side {
  justify-self: end;
  max-width: 34rem;
}

#hero .hero-sub {
  font-size: var(--lead);
  font-weight: 300;
  line-height: 1.6;
  max-width: none;
  margin: 0;
  color: var(--muted);
  text-wrap: pretty;
}

.hero-actions {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
  margin-top: clamp(1.5rem, 5vh, 3.5rem);
}

.hero-actions .mission-cta-btn {
  margin-top: 0;
}

/* Not enough room side by side: headline on top, the rest below */
@media (max-width: 1100px) {
  .hero-split {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .hero-headline {
    font-size: clamp(2.3rem, 7vw, 4.6rem);
  }

  .hero-side {
    justify-self: start;
  }
}

@media (max-width: 480px) {
  .hero-line {
    white-space: normal;
  }

  .hero-actions .mission-cta-btn {
    flex: 1 1 100%;
    justify-content: center;
  }
}

/* Problem: the 90% beside the heading, the trial stages underneath */
.problem {
  text-align: left;
}

/* Stat reads first, then the heading that follows from it */
.problem-top {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(1.75rem, 4vw, 3rem);
  text-align: center;
}

/* Ring on the left, the sentence it belongs to on the right */
.problem-stat {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(1.5rem, 4vw, 3.5rem);
  text-align: left;
}

.problem .failure-value {
  --ring: clamp(200px, 24vw, 300px);
}

.problem {
  --problem-text: clamp(1.6rem, 3vw, 2.25rem);
}

.problem .failure-label {
  font-size: var(--problem-text);
  line-height: 1.25;
  max-width: 420px;
  margin: 0;
}

.problem-heading {
  margin: 0;
}


@media (max-width: 760px) {
  .problem-stat {
    flex-direction: column;
    text-align: center;
  }
}

/* Same size as the stat sentence; one line wherever it fits */
.problem-heading {
  font-size: var(--problem-text);
  line-height: 1.25;
  white-space: nowrap;
}

@media (max-width: 900px) {
  .problem-heading {
    white-space: normal;
    text-wrap: balance;
  }
}

/* Why: no longer needs its own heading above the lead */
#bottleneck .bottleneck-lead {
  margin-top: 0;
}

/* Bryant's story sits mid-page now; shorter body */
#story .story-body .story-closing {
  margin-top: 1.5rem;
}

/* Data types as compact labels */
/* Mission: a compact centered band, not a full screen */
.mission-v2 {
  text-align: center;
  padding-block: clamp(5rem, 11vw, 8rem);
}

.mission-v2 .mission-heading {
  font-size: clamp(2rem, 5.4vw, 4rem);
  margin-inline: auto;
}

.mission-v2 .mission-heading em {
  font-style: normal;
  color: var(--accent);
}

.mission-v2 .mission-sub {
  margin: 1.25rem auto 0;
  max-width: 36ch;
}

/* Patient donation: tinted panel */
#donate-cta {
  padding-top: 0;
}

.donate-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 2rem clamp(2rem, 6vw, 5rem);
  padding: clamp(2rem, 5vw, 3.5rem);
  border-radius: 20px;
  background: rgba(57, 147, 153, 0.08);
  font-size: clamp(1.05rem, 1.5vw, 1.25rem);
  line-height: 1.65;
}

.donate-panel p:not(.mission-cta-label) {
  max-width: 620px;
}

.donate-panel .mission-cta-btn {
  margin-top: 0;
  white-space: nowrap;
}

@media (max-width: 760px) {
  .donate-panel {
    grid-template-columns: 1fr;
  }
}

/* Fuller footer */
.footer-v2 {
  padding: clamp(3rem, 6vw, 4.5rem) 0 2rem;
}

.footer-grid {
  display: grid;
  grid-template-columns: 2fr repeat(3, 1fr);
  gap: 2.5rem;
}

.footer-brand p {
  margin-top: 0.9rem;
  max-width: 28ch;
  font-size: 0.92rem;
}

.footer-col {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.footer-v2 .footer-col-title {
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text);
  margin-bottom: 0.2rem;
}

.footer-v2 .footer-col a {
  font-size: 0.92rem;
}

.footer-base {
  margin-top: 3rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--border);
}

@media (max-width: 760px) {
  .footer-grid {
    grid-template-columns: 1fr 1fr;
  }

  .footer-brand {
    grid-column: 1 / -1;
  }
}

#mission.mission-v2 {
  min-height: 0;
  display: block;
}

/* ======== One page: the problem on one screen ========
   Two text sizes only: a serif statement size and the body size */
/* Exactly the screen below the fixed nav: read with its top just under the
   nav, it fills the rest of the screen and no more. Gaps scale with screen
   height so short windows still fit */
#problem.onepage {
  min-height: calc(100svh - var(--nav-h));
  display: flex;
  align-items: center;
  padding: clamp(1rem, 4vh, 2.5rem) 0;
  scroll-margin-top: var(--nav-h);
}

.onepage-inner {
  display: flex;
  flex-direction: column;
  gap: clamp(1.75rem, 7vh, 5rem);
  width: 100%;
}

/* Statement on the left, supporting text on the right, bottoms aligned */
.onepage-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
  align-items: end;
  gap: clamp(2.5rem, 7vw, 8rem);
}

/* Problem row: both columns start at the top, so "The problem" isn't pushed
   down by the taller flaws table beside it */
.onepage-row:first-child {
  align-items: start;
}

.onepage-statement {
  max-width: 16em;
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 400;
  font-size: var(--statement);
  line-height: 1.22;
  letter-spacing: -0.01em;
  color: var(--text);
  text-wrap: balance;
}

.onepage-fail {
  color: var(--salmon);
}

/* "inaccurate" and "narrow": a salmon underline draws in left to right when
   the statement scrolls into view, the second word just after the first */
.draw-underline {
  background-image: linear-gradient(var(--salmon), var(--salmon));
  background-repeat: no-repeat;
  /* Bottom padding (it doesn't change line spacing) drops the line a little
     further below the letters */
  padding-bottom: 0.06em;
  background-position: 0 100%;
  background-size: 0% 0.08em;
  transition: background-size 0.8s cubic-bezier(0.65, 0, 0.35, 1);
  transition-delay: calc(0.35s + var(--d, 0s));
}

.in-view .draw-underline {
  background-size: 100% 0.08em;
}

@media (prefers-reduced-motion: reduce) {
  .draw-underline {
    transition: none;
    background-size: 100% 0.08em;
  }
}

.onepage-statement em {
  font-style: normal;
  color: var(--accent);
}

.onepage-lead {
  margin-bottom: 1rem;
  font-size: var(--body);
  line-height: 1.6;
  color: var(--muted);
}

/* Intro to the flaws reads a step larger than body text */
.onepage-flaws-lead {
  margin-bottom: 1.1rem;
  font-size: var(--onepage-lead);
  line-height: 1.45;
  color: var(--text);
}

/* The four flaws: a quiet gray
   table split by hairlines. Rows unfold one after another, flipping down
   from their top edge, when the table scrolls into view */
.onepage-flaws {
  list-style: none;
  border-top: 1px solid var(--border);
  perspective: 1200px;
}

.onepage-flaws li {
  display: grid;
  grid-template-columns: 10.25rem minmax(0, 1fr);
  gap: 1.25rem;
  padding: clamp(0.55rem, 1.6vh, 0.95rem) 0;
  border-bottom: 1px solid var(--border);
  font-size: var(--body);
  line-height: 1.5;
  color: var(--muted);
  transform-origin: 50% 0;
  opacity: 0;
  transform: rotateX(-88deg);
}

.onepage-flaws.in-view li {
  animation: card-unfold 0.75s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
  animation-delay: calc(var(--i, 0) * 0.16s);
}

/* Hover: the row magnifies a little. Uses "scale" rather than
   "transform" so it works alongside the unfold animation */
.onepage-flaws li {
  transform-origin: 0 0;
  transition: scale 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.onepage-flaws li:hover {
  scale: 1.035;
}

@keyframes card-unfold {
  0% {
    opacity: 0;
    transform: rotateX(-88deg);
  }
  35% {
    opacity: 1;
  }
  100% {
    opacity: 1;
    transform: rotateX(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .onepage-flaws li,
  .onepage-flaws.in-view li {
    animation: none;
    opacity: 1;
    transform: none;
    transition: none;
  }

  .onepage-flaws li:hover {
    scale: none;
  }
}

.onepage-flaw-title {
  color: var(--text);
}

/* Problem flaws: a small salmon ✕ before each title marks it as a failing,
   drawn as two crossed lines so it's crisp and even in every font. It pops
   in just after its row unfolds */
#problem .onepage-flaw-title::before {
  content: "";
  display: inline-block;
  width: 0.62em;
  height: 0.62em;
  margin-right: 0.6em;
  vertical-align: 0.02em;
  background:
    linear-gradient(
      45deg,
      transparent calc(50% - 0.06em),
      var(--salmon) calc(50% - 0.06em),
      var(--salmon) calc(50% + 0.06em),
      transparent calc(50% + 0.06em)
    ),
    linear-gradient(
      -45deg,
      transparent calc(50% - 0.06em),
      var(--salmon) calc(50% - 0.06em),
      var(--salmon) calc(50% + 0.06em),
      transparent calc(50% + 0.06em)
    );
  transform: scale(0);
}

#problem .onepage-flaws.in-view .onepage-flaw-title::before {
  animation: x-pop 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) both;
  animation-delay: calc(var(--i, 0) * 0.16s + 0.45s);
}

@keyframes x-pop {
  from {
    transform: scale(0) rotate(-45deg);
  }
  to {
    transform: scale(1) rotate(0deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  #problem .onepage-flaw-title::before,
  #problem .onepage-flaws.in-view .onepage-flaw-title::before {
    animation: none;
    transform: none;
  }
}

/* Stacked (narrow screens): still one screen, so everything tightens */
@media (max-width: 900px) {
  .onepage-row {
    grid-template-columns: 1fr;
    gap: clamp(0.75rem, 2vh, 1.25rem);
  }

  .onepage-inner {
    gap: clamp(1.25rem, 4vh, 2.5rem);
  }

  #problem.onepage .onepage-statement {
    font-size: clamp(1.3rem, 4.6vw, 1.6rem);
  }

  .onepage-eyebrow {
    margin-bottom: 0.5rem;
  }

  .onepage-flaws-lead {
    margin-bottom: 0.6rem;
  }

  .onepage-flaws li {
    padding: clamp(0.45rem, 1.3vh, 0.75rem) 0;
    line-height: 1.4;
  }
}

/* The nav wraps to two rows (about 151px) here */
@media (max-width: 860px) {
  :root {
    --nav-h: 151px;
  }

  #problem.onepage {
    padding: clamp(0.5rem, 2vh, 1.25rem) 0;
  }
}

@media (max-width: 480px) {
  /* Phones: title and description run together on one line, title dark */
  .onepage-flaws li {
    display: block;
  }

  .onepage-flaw-title {
    margin-right: 0.35em;
    font-weight: 500;
  }

  .onepage-flaw-title + span {
    display: inline;
  }

  /* Problem screen: slightly smaller intro line so it fits one phone screen */
  #problem .onepage-flaws-lead {
    font-size: 1.05rem;
  }
}

/* ======== Our mission: its own screen, set apart from the problem ========
   A soft teal wash, centered, with the statement set large */
.mission-page {
  min-height: calc(100svh - var(--nav-h));
  display: flex;
  align-items: center;
  padding: clamp(1rem, 4vh, 2.5rem) 0;
  scroll-margin-top: var(--nav-h);
  text-align: center;
}

/* Light teal hue shared by the hero, the problem, the solution and the
   calls-to-action page, alternating with the cream pages between them: pale
   teal at the top easing into the page cream, a soft teal glow top right with
   a trace of blue, a teal glow bottom left, and the faint dots */
.hero-pin.pin-glow,
#problem.onepage,
#solution,
#partner-band,
.donate-hero,
.donate-quote {
  background:
    radial-gradient(circle, rgba(20, 20, 19, 0.06) 1px, transparent 1px),
    radial-gradient(
      ellipse 70% 60% at 85% 5%,
      rgba(57, 147, 153, 0.11) 0%,
      transparent 68%
    ),
    radial-gradient(
      ellipse 50% 45% at 70% 0%,
      rgba(110, 160, 205, 0.07) 0%,
      transparent 70%
    ),
    radial-gradient(
      ellipse 60% 55% at 8% 95%,
      rgba(57, 147, 153, 0.08) 0%,
      transparent 68%
    ),
    linear-gradient(180deg, #ebf4f3 0%, #eff6f4 50%, #f4f7f4 85%, var(--bg) 100%);
  background-size:
    26px 26px,
    100% 100%,
    100% 100%,
    100% 100%,
    100% 100%;
}

.mission-page-inner {
  width: 100%;
}

/* "Our mission" leads the page: larger than the other section labels, with
   a short teal rule on each side so it reads as the page's title */
.mission-page .onepage-eyebrow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(0.85rem, 1.5vw, 1.25rem);
  margin-bottom: clamp(1.25rem, 3.5vh, 2.25rem);
  font-size: clamp(1.6rem, 2.6vw, 2.2rem);
}

.mission-page .onepage-eyebrow::before,
.mission-page .onepage-eyebrow::after {
  content: "";
  width: clamp(1.75rem, 3vw, 2.75rem);
  height: 1px;
  background: var(--accent);
  opacity: 0.6;
}

.mission-page-statement {
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 400;
  font-size: clamp(2.4rem, 6vw, 5.25rem);
  line-height: 1.08;
  letter-spacing: -0.015em;
  color: var(--text);
  text-wrap: balance;
}

.mission-page-statement em {
  font-style: normal;
  color: var(--accent);
}

/* Phones: one phrase per line, sized so "Slash failure rates." fits */
@media (max-width: 600px) {
  .mission-page-statement {
    font-size: min(2.4rem, 9.6vw);
  }

  .mission-page-statement em {
    display: block;
  }
}

/* Same type as the "What we're building" subtitle */
.mission-page-sub {
  margin-top: clamp(1.25rem, 3vh, 2rem);
  font-size: var(--lead);
  font-weight: 300;
  line-height: 1.5;
  color: var(--text);
}

/* Pages scroll normally, one after another (no pinning) */
/* Cream pages between the teal ones */
.mission-page,
#impact {
  background: var(--bg);
}


/* ======== Donate page: matches the homepage ========
   A light teal title band, Georgia section labels, then the reasons, how it
   works, and the interest form */
.donate-hero {
  padding: calc(var(--nav-h) + clamp(3.5rem, 9vh, 6rem)) 0
    clamp(3rem, 7vh, 4.5rem);
}

.donate-hero .section-heading {
  margin-bottom: 0;
}

.donate-lead {
  max-width: 640px;
  margin-top: clamp(1.25rem, 3vh, 1.75rem);
  font-size: var(--lead);
  font-weight: 300;
  line-height: 1.55;
  color: var(--muted);
}

.donate-body {
  padding-top: clamp(3.5rem, 8vh, 5rem);
}

.donate-body .onepage-eyebrow {
  margin-bottom: 0.25rem;
}

.donate-body .reason-list-secondary {
  margin-top: 0;
}

/* "How it works" now opens its own section */
.donate-how {
  margin-top: 0;
}

/* The lasting-impact statement: large, centered, on the light teal band,
   like the homepage mission. A soft highlight sweeps under the teal phrase */
.donate-quote {
  padding: clamp(5rem, 14vh, 9rem) 0;
  text-align: center;
}

.donate-quote-text {
  max-width: 18em;
  margin: 0 auto;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(2.1rem, 4.6vw, 4rem);
  line-height: 1.15;
  letter-spacing: -0.015em;
  color: var(--text);
  text-wrap: balance;
}

.donate-quote-text em {
  font-style: normal;
  color: var(--accent);
  /* Full-height band behind the words, like the solution headline */
  padding: 0 0.08em;
  background-image: linear-gradient(
    rgba(57, 147, 153, 0.18),
    rgba(57, 147, 153, 0.18)
  );
  background-repeat: no-repeat;
  background-position: 0 0;
  background-size: 0% 100%;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  transition: background-size 1.1s cubic-bezier(0.65, 0, 0.35, 1) 0.3s;
}

.donate-quote-text.in-view em {
  background-size: 100% 100%;
}

@media (prefers-reduced-motion: reduce) {
  .donate-quote-text em {
    transition: none;
    background-size: 100% 100%;
  }
}

/* Always-open row (Privacy): same layout as an open reason, not clickable */
.reason-static .reason-head {
  display: grid;
  grid-template-columns: 90px 1fr;
  align-items: baseline;
  gap: 2rem;
  padding: 2.5rem 0;
}

@media (max-width: 640px) {
  .reason-static .reason-head {
    grid-template-columns: 2rem 1fr;
    gap: 1rem;
    padding: 1.75rem 0;
  }
}

/* Donate: interest form for people outside Sharp HealthCare */
.interest {
  max-width: 760px;
  margin-top: clamp(4rem, 8vw, 6rem);
  padding: clamp(2rem, 5vw, 3rem);
  border-radius: 20px;
  background: rgba(57, 147, 153, 0.07);
}

.interest-heading {
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.5rem, 3vw, 2.1rem);
  font-weight: 400;
  line-height: 1.25;
  color: var(--text);
}

.interest-sub {
  margin-top: 0.6rem;
  font-size: 1.1rem;
  font-weight: 300;
  line-height: 1.6;
  color: var(--muted);
}

.interest-form {
  margin-top: 2rem;
}

.interest-trap {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.interest-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.25rem 1.5rem;
}

.interest-full {
  grid-column: 1 / -1;
}

.interest-field {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  font-size: 0.92rem;
  color: var(--text);
}

.interest-field em {
  font-style: normal;
  color: var(--dim);
}

.interest-field input,
.interest-field select,
.interest-field textarea {
  width: 100%;
  padding: 0.8rem 0.95rem;
  border: 1px solid rgba(20, 20, 19, 0.16);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.75);
  font: inherit;
  font-size: 1rem;
  color: var(--text);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.interest-field textarea {
  resize: vertical;
  min-height: 6rem;
}

.interest-field input::placeholder {
  color: var(--dim);
}

.interest-field input:focus,
.interest-field select:focus,
.interest-field textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(57, 147, 153, 0.18);
}

.interest-note {
  margin-top: 1.25rem;
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--muted);
}

/* Same outline pill as the homepage buttons, with a light teal wash on hover */
.interest-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  margin-top: 1.5rem;
  padding: 0.8rem 1.9rem 0.85rem;
  border: 1px solid var(--accent);
  border-radius: 999px;
  background-color: transparent;
  background-image: linear-gradient(
    90deg,
    rgba(57, 147, 153, 0.14) 0%,
    rgba(57, 147, 153, 0.14) 40%,
    rgba(57, 147, 153, 0) 60%
  );
  background-repeat: no-repeat;
  background-size: 200% 100%;
  background-position: 100% 0;
  color: var(--accent);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.2rem;
  cursor: pointer;
  transition: background-position 0.55s cubic-bezier(0.65, 0, 0.35, 1);
}

.interest-btn span {
  transition: transform 0.3s ease;
}

.interest-btn:hover,
.interest-btn:focus-visible {
  background-position: 0% 0;
}

.interest-btn:hover span,
.interest-btn:focus-visible span {
  transform: translateX(4px);
}

.interest-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

.interest-btn:disabled {
  opacity: 0.6;
  cursor: wait;
}

.interest-status {
  margin-top: 1rem;
  font-size: 1rem;
  color: var(--muted);
}

.interest-status:empty {
  display: none;
}

.interest-status.is-success {
  color: var(--accent);
}

.interest-status.is-error {
  color: var(--salmon);
}

.interest-status a {
  color: inherit;
}

/* Partner page: the call-to-action box uses the interest panel, with a link
   styled as its pill button */
a.interest-btn {
  text-decoration: none;
  white-space: nowrap;
}

/* Thank-you panel that replaces the form after a submission: a teal check,
   the same heading and sub styles, and a button to start a new response */
.interest-done[hidden],
#interestFormView[hidden] {
  display: none;
}

.interest-done {
  animation: interest-done-in 0.5s ease both;
}

.interest-done-icon {
  position: relative;
  display: block;
  width: 3rem;
  height: 3rem;
  margin-bottom: 1.25rem;
  border-radius: 50%;
  background: rgba(57, 147, 153, 0.16);
}

.interest-done-icon::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 46%;
  width: 0.75rem;
  height: 1.3rem;
  border-right: 2px solid var(--accent);
  border-bottom: 2px solid var(--accent);
  transform: translate(-50%, -50%) rotate(45deg);
}

.interest-done .interest-heading:focus {
  outline: none;
}

.interest-done .interest-sub {
  max-width: 34em;
}

.interest-done .interest-btn {
  margin-top: 2rem;
}

@keyframes interest-done-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@media (max-width: 640px) {
  .interest-grid {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  .interest-btn,
  .interest-btn span {
    transition: none;
  }

  .interest-done {
    animation: none;
  }
}

/* Our Story: a little less padding so the story fits about one screen */
#story {
  padding: clamp(2.25rem, 6vh, 4rem) 0;
}

/* A slightly wide crop of the portrait keeps the column shorter */
#story .story-portrait img {
  aspect-ratio: 3 / 2;
  object-position: 50% 25%;
}

/* Cards under the portrait (video, press, book): compact, stacked closely */
#story .story-press {
  grid-template-columns: 72px 1fr;
  gap: 0.85rem;
  margin-top: 1.25rem;
  padding: 0.6rem 0.7rem;
}

#story .story-press + .story-press {
  margin-top: 0.6rem;
}

#story .story-press-img {
  width: 72px;
  height: 72px;
}

/* Video card: the YouTube thumbnail with a small play button over it */
.story-watch-thumb {
  position: relative;
  width: 72px;
  aspect-ratio: 16 / 9;
  border-radius: 8px;
  overflow: hidden;
  background: #276c71;
}

.story-watch-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Play button: a dark circle with a white triangle */
.story-watch-thumb::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 22px;
  height: 22px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: rgba(20, 20, 19, 0.55);
}

.story-watch-thumb::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-35%, -50%);
  border-style: solid;
  border-width: 5px 0 5px 8px;
  border-color: transparent transparent transparent #fff;
}

.story-watch:hover .story-watch-thumb {
  filter: brightness(1.12);
}

/* Book card: the cover, upright, centred in the thumbnail column */
.story-book-cover {
  justify-self: center;
  width: 48px;
  height: auto;
  aspect-ratio: 2 / 3;
  object-fit: cover;
  border-radius: 4px;
  box-shadow: 0 4px 12px -4px rgba(20, 20, 19, 0.35);
}

/* ======== Hero: the big statement on the left, the cell bank on the right ======== */
#hero .hero-split {
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  grid-template-areas: none;
  align-items: center;
  gap: clamp(2rem, 5vw, 6rem);
  padding-bottom: 0;
}

/* The two calls to action sit under the statement, left-aligned with it */
#hero .hero-actions {
  justify-content: flex-start;
  margin-top: clamp(1.75rem, 4.5vh, 2.75rem);
}

.hero-statement {
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 400;
  font-size: clamp(2.1rem, 3.5vw, 3.8rem);
  line-height: 1.22;
  letter-spacing: -0.015em;
  color: var(--text);
  text-wrap: balance;
}

/* The subtitle under the statement: what we're doing and why */
.hero-lead {
  max-width: 34em;
  margin-top: clamp(1rem, 2.5vh, 1.5rem);
  font-size: clamp(1.05rem, 1.35vw, 1.25rem);
  font-weight: 300;
  line-height: 1.55;
  color: var(--muted);
  text-wrap: pretty;
}

/* A thin teal underline draws under the key phrase once the statement's
   highlight has finished sweeping */
.hero-lead .draw-underline {
  color: var(--text);
  background-image: linear-gradient(var(--accent), var(--accent));
  background-size: 0% 1.5px;
  padding-bottom: 0.12em;
  transition-duration: 1.4s;
  transition-delay: 1.5s;
}

.hero-lead.in-view .draw-underline {
  background-size: 100% 1.5px;
}

@media (prefers-reduced-motion: reduce) {
  .hero-lead .draw-underline {
    background-size: 100% 1.5px;
  }
}

/* The light teal highlight sweeps across one line at a time as the hero
   loads (the script splits the statement into its wrapped lines), and
   replays on hover */
.hero-line {
  display: block;
}

.hero-line-mark {
  background-image: linear-gradient(rgba(57, 147, 153, 0.18), rgba(57, 147, 153, 0.18));
  background-repeat: no-repeat;
  background-size: 0% 100%;
  transition: background-size 0.75s cubic-bezier(0.65, 0, 0.35, 1);
  transition-delay: calc(0.2s + var(--i, 0) * 0.65s);
}

.hero-statement.in-view .hero-line-mark,
.story-heading.in-view .hero-line-mark,
.impact-headline.in-view .hero-line-mark,
.mark-heading.in-view .hero-line-mark {
  background-size: 100% 100%;
}

.hero-statement:hover .hero-line-mark,
.story-heading:hover .hero-line-mark,
.impact-headline:hover .hero-line-mark,
.mark-heading:hover .hero-line-mark {
  animation: highlight-sweep 0.75s cubic-bezier(0.65, 0, 0.35, 1) both;
  animation-delay: calc(var(--i, 0) * 0.65s);
}

@media (prefers-reduced-motion: reduce) {
  .hero-line-mark,
  .hero-statement:hover .hero-line-mark,
  .story-heading:hover .hero-line-mark,
  .impact-headline:hover .hero-line-mark,
  .mark-heading:hover .hero-line-mark {
    background-size: 100% 100%;
    transition: none;
    animation: none;
  }
}

.hero-cells {
  width: 100%;
  justify-self: center;
  text-align: center;
}

/* The statement wraps naturally (the old solution heading forced each
   half onto one line) */
.hero-statement .solution-line {
  white-space: normal;
}

/* The bank: up to 540px, kept within the column and the screen height */
#hero .cell-bank {
  width: min(100%, 540px, 64vh);
  height: auto;
  aspect-ratio: 1;
  margin: 0 auto;
}

.hero-cells figcaption {
  margin-top: 1rem;
  font-size: 0.85rem;
  color: var(--muted);
}

/* Stacked on narrower screens: statement, then the bank. The hero clears
   the (taller, two-row) nav and can grow rather than clip its content */
@media (max-width: 900px) {
  #hero .hero-pin {
    height: auto;
    min-height: 100svh;
    padding-top: calc(var(--nav-h) + 1.5rem);
    padding-bottom: 2.5rem;
  }

  #hero .hero-split {
    grid-template-columns: 1fr;
    gap: 0;
  }

  /* Statement and subtitle, then the bank, then the buttons */
  #hero .hero-text {
    display: contents;
  }

  #hero .hero-cells {
    order: 1;
    margin-top: 2rem;
  }

  #hero .hero-actions {
    order: 2;
  }

  #hero .cell-bank {
    width: min(100%, 400px, 46vh);
  }
}

/* ======== What we're building: "Our collection captures" the four, large ======== */
.solution-lead {
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.4rem, 2.4vw, 2.1rem);
  line-height: 1.3;
  color: var(--text);
}

.solution-lead-end {
  max-width: 34em;
  margin-top: clamp(1rem, 2.5vh, 1.5rem);
}

.solution-checks.solution-checks-big {
  grid-template-columns: repeat(2, max-content);
  gap: clamp(0.6rem, 1.6vh, 1rem) clamp(2rem, 5vw, 4.5rem);
  margin-top: clamp(1rem, 2.5vh, 1.5rem);
}

.solution-checks-big li {
  gap: 0.6em;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.6rem, 3vw, 2.6rem);
  line-height: 1.2;
  color: #276c71;
}

@media (max-width: 640px) {
  .solution-checks.solution-checks-big {
    grid-template-columns: 1fr;
  }
}

/* The opening cell line keeps its own size (what 68% of the previous,
   smaller bank was) even though the bank of small cells is now larger */
#hero .cell-bank-core {
  --core: min(68%, calc(0.68 * min(440px, 52vh)));
  width: var(--core);
  height: var(--core);
}

@media (max-width: 900px) {
  #hero .cell-bank-core {
    --core: min(68%, calc(0.68 * min(340px, 40vh)));
  }
}

#hero .cell-bank.is-shrunk .cell-bank-core {
  width: var(--tile);
  height: var(--tile);
}

/* What we're building: the one-sentence summary that opens the section */
.solution-summary {
  max-width: 40em;
  margin-bottom: clamp(1.25rem, 3vh, 2.5rem);
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.15rem, 1.7vw, 1.6rem);
  line-height: 1.45;
  color: var(--muted);
  text-wrap: pretty;
}

.solution-summary strong {
  font-weight: 400;
  color: var(--text);
}

/* ======== What we're building: the Cell Atlas ========
   One serif headline, four answers to the four flaws, then the cycle
   (Atlas, data, AI, back to the Atlas) beside the data images */
#solution .build {
  --build-gap: clamp(1.75rem, 4vw, 4rem);
  width: 100%;
  padding-block: clamp(1.5rem, 5vh, 3.5rem);
}

.build-headline {
  max-width: 20em;
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 400;
  font-size: clamp(2rem, 3.6vw, 3.4rem);
  line-height: 1.15;
  letter-spacing: -0.015em;
  color: var(--text);
  text-wrap: balance;
}

.build-subhead {
  max-width: 56em;
  text-wrap: balance;
  margin-top: clamp(0.9rem, 2vh, 1.25rem);
  font-size: var(--lead);
  font-weight: 300;
  line-height: 1.5;
  color: var(--text);
}

/* Shared label: small Inter capitals, tracked, in teal */
.build-label {
  display: block;
  margin-bottom: 0.5rem;
  font-family: "Inter", -apple-system, sans-serif;
  font-size: 0.74rem;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #276c71;
}

/* Four answers, one per flaw in "Why we started", full width */
.build-fixes {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  column-gap: var(--build-gap);
  row-gap: 1.5rem;
  margin-top: clamp(2.25rem, 5.5vh, 3.75rem);
  padding-top: clamp(1.1rem, 2.5vh, 1.6rem);
  border-top: 1px solid var(--border);
}

.build-fix-title {
  margin-bottom: 0.4rem;
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 400;
  font-size: clamp(1.25rem, 1.7vw, 1.55rem);
  line-height: 1.25;
  color: #276c71;
}

.build-fixes p {
  font-size: var(--body);
  line-height: 1.5;
  color: var(--muted);
  text-wrap: pretty;
}

/* The cycle on the left, the data images on the right */
.build-platform {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  column-gap: var(--build-gap);
  row-gap: 2rem;
  align-items: center;
  margin-top: clamp(2.25rem, 5.5vh, 3.75rem);
  padding-top: clamp(1.5rem, 3.5vh, 2.25rem);
  border-top: 1px solid var(--border);
}

/* The rail runs from the cycle statement at the bottom back up into 01,
   with an arrowhead pointing into it */
.build-cycle {
  position: relative;
  padding-left: clamp(2.25rem, 3.5vw, 3rem);
}

.cycle-rail {
  position: absolute;
  left: 0;
  top: 0.5rem;
  bottom: 0.85rem;
  width: clamp(1.4rem, 2.4vw, 2rem);
  border: 1.5px solid rgba(39, 108, 113, 0.6);
  border-right: 0;
  border-radius: 16px 0 0 16px;
}

.cycle-rail::after {
  content: "";
  position: absolute;
  right: 1px;
  top: -4.75px;
  width: 8px;
  height: 8px;
  border-top: 1.5px solid #276c71;
  border-right: 1.5px solid #276c71;
  transform: rotate(45deg);
}

.cycle-steps {
  list-style: none;
}

.cycle-steps li + li {
  margin-top: clamp(1.1rem, 2.5vh, 1.5rem);
}

.cycle-steps p {
  max-width: 34em;
  font-size: var(--body);
  line-height: 1.55;
  color: var(--text);
  text-wrap: pretty;
}

.flow-num {
  margin-right: 0.75em;
}

/* Cycle step titles (01 The Cell Atlas, 02, 03): Georgia, like the card
   titles above, with the number a lighter teal */
.cycle-steps .build-label {
  --step-title: clamp(1.15rem, 1.5vw, 1.35rem);
  font-family: Georgia, "Times New Roman", serif;
  font-size: var(--step-title);
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: 0;
  text-transform: none;
}

.cycle-steps .flow-num {
  margin-right: 0.5em;
  color: rgba(39, 108, 113, 0.6);
}

.cycle-statement {
  max-width: 24em;
  margin-top: clamp(1.4rem, 3vh, 2rem);
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.2rem, 1.7vw, 1.5rem);
  line-height: 1.35;
  color: var(--text);
  text-wrap: pretty;
}

/* Data images crossfade in place, the caption fades with them */
.build-data-fade {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: 16px;
  background: var(--border);
}

.build-data-fade img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.8s ease;
}

.build-data-fade img.is-active {
  opacity: 1;
}

.build-data figcaption {
  margin-top: 0.75rem;
}

.build-data-caption {
  font-size: 0.9rem;
  color: var(--muted);
  transition: opacity 0.4s ease;
}

.build-data-credit {
  margin-left: 0.4em;
  font-size: 0.8rem;
  color: var(--muted);
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: opacity 0.4s ease;
}

.build-data-credit:hover {
  color: #276c71;
}

.build-data-caption.is-swapping,
.build-data-credit.is-swapping {
  opacity: 0;
}

@media (max-width: 860px) {
  .build-fixes {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .build-platform {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 520px) {
  .build-fixes {
    grid-template-columns: 1fr;
  }
}

/* What changes: today's standard beside the new one, as a split panel. The
   old way sits on a soft gray half with salmon crosses (echoing the flaws in
   "Why we started"), the new way on a teal half with checks; rows slide in
   one after another the first time the table scrolls in */
#impact {
  min-height: calc(100svh - var(--nav-h));
  display: flex;
  align-items: center;
  padding: clamp(2.5rem, 7vh, 5rem) 0;
  scroll-margin-top: var(--nav-h);
}

#impact > .container {
  width: 100%;
}

.impact-table {
  --impact-old: rgba(20, 20, 19, 0.03);
  --impact-new: rgba(57, 147, 153, 0.1);
  --impact-pad-y: clamp(1rem, 2.3vh, 1.4rem);
  --impact-pad-x: clamp(1rem, 2.2vw, 2rem);
  margin-top: clamp(2rem, 5vh, 3.25rem);
  border: 1px solid var(--border);
  border-radius: 20px;
  overflow: hidden;
}

/* Topic, then the old way on gray, then the new way on teal */
.impact-head,
.impact-row {
  display: grid;
  grid-template-columns: minmax(8.5rem, 0.55fr) 1fr 1fr;
}

.impact-head > span,
.impact-row > dt,
.impact-row > dd {
  display: flex;
  align-items: baseline;
  gap: 0.8rem;
  padding: var(--impact-pad-y) var(--impact-pad-x);
}

.impact-head {
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.15rem, 1.5vw, 1.35rem);
  font-weight: 400;
  color: var(--dim);
}

.impact-head > span {
  align-items: center;
  gap: 0.55rem;
  padding-top: calc(var(--impact-pad-y) + 0.35rem);
}

.impact-head span:nth-child(2),
.impact-old {
  background: var(--impact-old);
}

.impact-head span:nth-child(3),
.impact-new {
  background: var(--impact-new);
}

.impact-head span:nth-child(3) {
  color: #276c71;
}

.impact-logo {
  width: 1.4em;
  height: auto;
}

.impact-table dl {
  margin: 0;
}

.impact-row {
  border-top: 1px solid var(--border);
}

/* Row topic: Georgia, in teal */
.impact-row dt {
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.05rem, 1.35vw, 1.2rem);
  line-height: 1.4;
  color: #276c71;
}

/* Both sides share one type style; only the color sets them apart */
.impact-row dd {
  margin: 0;
  font-size: var(--body);
  line-height: 1.5;
}

.impact-old {
  color: var(--muted);
}

.impact-new {
  color: var(--text);
}

/* Cross on the old way, check on the new */
.impact-old::before,
.impact-new::before {
  flex: none;
  width: 1rem;
  font-family: "Inter", -apple-system, sans-serif;
  font-size: 1rem;
  font-weight: 500;
  line-height: 1;
}

.impact-old::before {
  content: "\00d7";
  font-size: 1.25rem;
  color: var(--salmon);
}

.impact-new::before {
  content: "\2713";
  color: var(--accent);
}

.impact-table.will-reveal .impact-row {
  opacity: 0;
  transform: translateY(12px);
  transition:
    opacity 0.6s ease,
    transform 0.6s ease;
  transition-delay: calc(var(--i) * 120ms);
}

.impact-table.is-revealed .impact-row {
  opacity: 1;
  transform: none;
}

@media (max-width: 760px) {
  /* Phones: each row becomes its own small card: the topic, then the old
     way on gray, then the new way on teal */
  .impact-table {
    border: 0;
    border-radius: 0;
    overflow: visible;
    background: none;
  }

  .impact-head {
    display: none;
  }

  .impact-table dl {
    display: grid;
    gap: 0.75rem;
  }

  .impact-row {
    grid-template-columns: 1fr;
    border: 1px solid var(--border);
    border-radius: 14px;
    overflow: hidden;
  }

  /* The topic heads each card */
  .impact-row dt {
    padding-bottom: 0.25rem;
  }
}

/* Donate page: all supporting text in black, a step larger */
.donate-body .reason-desc,
.donate-body .interest-sub {
  font-size: clamp(1.15rem, 1.45vw, 1.3rem);
  color: var(--text);
}

.donate-body .interest-note {
  font-size: 1rem;
  color: var(--text);
}

/* Donate page, How it works: four numbered steps joined by a teal line. In
   a row on wide screens, stacked on phones. The final state is the default;
   the script adds the starting state and lights each step in turn */
.donate-how-lead {
  max-width: 40em;
  font-size: clamp(1.15rem, 1.45vw, 1.3rem);
  line-height: 1.55;
  color: var(--text);
}

.donate-steps {
  --step-dot: 2.6rem;
  --step-gap: clamp(1.5rem, 3vw, 2.5rem);
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--step-gap);
  margin-top: clamp(2.25rem, 5vh, 3.25rem);
}

.donate-steps li {
  position: relative;
  padding-top: calc(var(--step-dot) + 1.25rem);
  transition: opacity 0.5s ease;
}

.step-num {
  position: absolute;
  top: 0;
  left: 0;
  display: grid;
  place-items: center;
  width: var(--step-dot);
  height: var(--step-dot);
  border: 1.5px solid var(--accent);
  border-radius: 50%;
  background: var(--accent);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.15rem;
  color: #fff;
  transition:
    background-color 0.4s ease,
    color 0.4s ease;
}

/* The line from each step to the next */
.donate-steps li:not(:last-child)::after {
  content: "";
  position: absolute;
  top: calc(var(--step-dot) / 2);
  left: calc(var(--step-dot) + 0.6rem);
  right: calc(var(--step-gap) * -1 + 0.6rem);
  height: 1.5px;
  background: var(--accent);
  opacity: 0.6;
  transform-origin: left center;
  transition: transform 0.5s cubic-bezier(0.65, 0, 0.35, 1) 0.25s;
}

.step-title {
  margin-bottom: 0.5rem;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.2rem, 1.6vw, 1.4rem);
  font-weight: 400;
  line-height: 1.3;
  color: var(--text);
}

.donate-steps p {
  font-size: var(--body);
  line-height: 1.55;
  color: var(--text);
}

/* Starting state, only when the script will light the steps */
.donate-steps.will-animate li {
  opacity: 0.4;
}

.donate-steps.will-animate .step-num {
  background: var(--bg);
  color: var(--accent);
}

.donate-steps.will-animate li:not(:last-child)::after {
  transform: scaleX(0);
}

.donate-steps.will-animate li.is-on {
  opacity: 1;
}

.donate-steps.will-animate li.is-on .step-num {
  background: var(--accent);
  color: #fff;
}

.donate-steps.will-animate li.is-on:not(:last-child)::after {
  transform: none;
}

.donate-know-eyebrow {
  margin-top: clamp(4rem, 9vh, 6rem);
}

@media (max-width: 760px) {
  /* Stacked: the number on the left, the line running down to the next */
  .donate-steps {
    grid-template-columns: 1fr;
  }

  .donate-steps li {
    padding-top: 0;
    padding-left: calc(var(--step-dot) + 1.1rem);
    min-height: var(--step-dot);
  }

  .step-title {
    padding-top: 0.45rem;
  }

  .donate-steps li:not(:last-child)::after {
    top: calc(var(--step-dot) + 0.5rem);
    bottom: calc(var(--step-gap) * -1 + 0.5rem);
    left: calc(var(--step-dot) / 2);
    right: auto;
    width: 1.5px;
    height: auto;
    transform-origin: center top;
  }

  .donate-steps.will-animate li:not(:last-child)::after {
    transform: scaleY(0);
  }
}

/* Links inside answers: teal, underlined */
.reason-desc a {
  color: #276c71;
  text-decoration: underline;
  text-decoration-color: rgba(39, 108, 113, 0.4);
  text-underline-offset: 0.15em;
  transition: text-decoration-color 0.2s ease;
}

.reason-desc a:hover {
  text-decoration-color: currentColor;
}
/* Phone nav: once the page scrolls, the tabs fold away behind a menu button
   (added by nav.js) that opens them as a dropdown under the logo */
.nav-toggle {
  display: none;
}

@media (max-width: 640px) {
  .nav-toggle {
    order: 2;
    position: relative;
    width: 40px;
    height: 40px;
    margin: -8px -8px -8px auto;
    padding: 0;
    border: 0;
    background: none;
    color: var(--accent);
    cursor: pointer;
  }

  nav.is-compact .nav-toggle {
    display: block;
  }

  /* No gap left behind for the folded tabs row */
  nav.is-compact .nav-inner {
    row-gap: 0;
  }

  .nav-toggle:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    border-radius: 8px;
  }

  /* Three bars that turn into a cross when open */
  .nav-toggle-bar {
    position: absolute;
    left: 10px;
    width: 20px;
    height: 1.5px;
    border-radius: 2px;
    background: currentColor;
    transition:
      transform 0.3s ease,
      opacity 0.2s ease;
  }

  .nav-toggle-bar:nth-child(1) {
    top: 13px;
  }

  .nav-toggle-bar:nth-child(2) {
    top: 19px;
  }

  .nav-toggle-bar:nth-child(3) {
    top: 25px;
  }

  nav.is-open .nav-toggle-bar:nth-child(1) {
    transform: translateY(6px) rotate(45deg);
  }

  nav.is-open .nav-toggle-bar:nth-child(2) {
    opacity: 0;
  }

  nav.is-open .nav-toggle-bar:nth-child(3) {
    transform: translateY(-6px) rotate(-45deg);
  }

  /* The tabs row folds shut when compact, and opens as a list */
  .nav-tabs {
    max-height: 4rem;
    overflow: hidden;
    transition:
      max-height 0.35s ease,
      opacity 0.25s ease,
      padding 0.35s ease,
      margin 0.35s ease,
      border-color 0.35s ease;
  }

  nav.is-compact:not(.is-open) .nav-tabs {
    max-height: 0;
    padding-top: 0;
    margin-top: 0;
    border-top-color: transparent;
    opacity: 0;
    visibility: hidden;
  }

  nav.is-compact.is-open .nav-tabs {
    max-height: 14rem;
    flex-direction: column;
    align-items: flex-start;
    gap: 1.1rem;
    padding-top: 1.1rem;
    padding-bottom: 0.4rem;
  }

  nav.is-compact.is-open .nav-tabs a {
    font-size: 1.1rem;
  }
}

@media (max-width: 640px) and (prefers-reduced-motion: reduce) {
  .nav-tabs,
  .nav-toggle-bar {
    transition: none;
  }
}