:root {
  --olive: #263f24;
  --olive-2: #405b33;
  --cream: #f4eedf;
  --cream-2: #fffaf0;
  --pear: #a9c95a;
  --pear-2: #dfeabc;
  --ink: #253026;
  --muted: #66705f;
  --line: rgba(38, 63, 36, 0.16);
  --shadow: 0 18px 38px rgba(38, 63, 36, 0.11);
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 92px;
}

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: Avenir Next, Optima, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.6;
}

button,
input,
select,
textarea {
  font: inherit;
}

a {
  color: inherit;
}

.site-ambient-leaves {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

.site-ambient-leaves span {
  position: absolute;
  top: -8vh;
  left: var(--leaf-left, 12%);
  width: var(--leaf-size, 12px);
  height: calc(var(--leaf-size, 12px) * 0.58);
  border-radius: 999px 0 999px 0;
  background: rgba(127, 161, 47, 0.16);
  filter: blur(var(--leaf-blur, 0));
  opacity: 0.45;
  transform: rotate(20deg);
  animation: ambientLeafFall var(--leaf-duration, 34s) linear infinite;
}

.site-ambient-leaves span:nth-child(1) {
  --leaf-left: 10%;
  --leaf-duration: 38s;
}

.site-ambient-leaves span:nth-child(2) {
  --leaf-left: 33%;
  --leaf-size: 10px;
  --leaf-duration: 44s;
  animation-delay: -12s;
}

.site-ambient-leaves span:nth-child(3) {
  --leaf-left: 58%;
  --leaf-size: 14px;
  --leaf-blur: 0.5px;
  --leaf-duration: 42s;
  animation-delay: -22s;
}

.site-ambient-leaves span:nth-child(4) {
  --leaf-left: 76%;
  --leaf-size: 9px;
  --leaf-duration: 50s;
  animation-delay: -30s;
}

.site-ambient-leaves span:nth-child(5) {
  --leaf-left: 91%;
  --leaf-size: 11px;
  --leaf-blur: 0.7px;
  --leaf-duration: 47s;
  animation-delay: -18s;
}

@keyframes ambientLeafFall {
  from {
    transform: translate3d(0, -8vh, 0) rotate(12deg);
  }
  to {
    transform: translate3d(26px, 112vh, 0) rotate(96deg);
  }
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(6px, 0.9vw, 14px);
  border-bottom: 1px solid var(--line);
  background: rgba(244, 238, 223, 0.95);
  width: 100%;
  max-width: 100%;
  padding: 4px clamp(10px, 2vw, 28px);
  backdrop-filter: blur(14px);
  transition: background 220ms ease, box-shadow 220ms ease, padding 220ms ease, border-color 220ms ease;
}

body[data-page="home"] .site-header {
  position: fixed;
  right: 0;
  left: 0;
  border-color: transparent;
  background: linear-gradient(180deg, rgba(244, 238, 223, 0.88), rgba(244, 238, 223, 0.18));
  box-shadow: none;
}

body[data-page="home"] .site-header.scrolled {
  border-color: var(--line);
  background: rgba(244, 238, 223, 0.96);
  box-shadow: 0 10px 28px rgba(38, 63, 36, 0.1);
  padding-block: 3px;
}

.brand {
  flex: 0 1 180px;
  display: inline-flex;
  align-items: center;
  color: var(--olive);
  text-decoration: none;
  max-width: min(180px, 16vw);
  min-width: 0;
}

.brand-logo {
  display: block;
  width: clamp(142px, 13vw, 180px);
  max-width: 100%;
  height: auto;
  object-fit: contain;
}

.site-nav {
  flex: 1 1 auto;
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-width: 0;
}

.site-nav a {
  border-radius: 999px;
  color: var(--olive);
  font-size: clamp(0.72rem, 0.76vw, 0.86rem);
  font-weight: 800;
  padding: 5px clamp(5px, 0.55vw, 8px);
  text-decoration: none;
  white-space: nowrap;
}

.site-nav a:hover,
.site-nav a:focus-visible,
.site-nav a.active {
  background: rgba(169, 201, 90, 0.28);
  outline: none;
}

.header-utilities {
  flex: 0 1 auto;
  display: flex;
  flex-wrap: nowrap;
  gap: clamp(4px, 0.5vw, 6px);
  align-items: center;
  justify-content: flex-end;
  min-width: 0;
}

.saved-trials-link,
.trial-match-utility,
.feedback-utility {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 32px;
  border: 1px solid rgba(38, 63, 36, 0.16);
  border-radius: 999px;
  background: rgba(255, 250, 240, 0.68);
  color: var(--olive);
  font-size: clamp(0.7rem, 0.72vw, 0.76rem);
  font-weight: 850;
  padding: 5px clamp(6px, 0.6vw, 9px);
  text-decoration: none;
  white-space: nowrap;
}

.saved-trials-link:hover,
.saved-trials-link:focus-visible,
.saved-trials-link.active,
.trial-match-utility:hover,
.trial-match-utility:focus-visible,
.trial-match-utility.active,
.feedback-utility:hover,
.feedback-utility:focus-visible {
  border-color: rgba(127, 161, 47, 0.5);
  background: rgba(169, 201, 90, 0.22);
  box-shadow: 0 8px 18px rgba(38, 63, 36, 0.1);
  outline: none;
}

.trial-match-utility {
  border-color: rgba(38, 63, 36, 0.28);
  background: rgba(255, 250, 240, 0.42);
}

.saved-count {
  margin-left: 0.25em;
}

.beta-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: 0.35em;
  border: 1px solid rgba(38, 63, 36, 0.18);
  border-radius: 999px;
  background: rgba(255, 250, 240, 0.72);
  color: var(--olive-2);
  font-size: 0.68em;
  font-weight: 900;
  letter-spacing: 0.04em;
  line-height: 1;
  padding: 0.28em 0.55em;
  text-transform: uppercase;
  vertical-align: middle;
}

.beta-badge--nav {
  margin-left: 0.25em;
  font-size: 0.62rem;
  padding: 0.25em 0.48em;
}

.nav-toggle {
  display: none;
  width: 44px;
  height: 44px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--cream-2);
  padding: 10px;
}

.nav-toggle span {
  display: block;
  height: 2px;
  margin: 5px 0;
  background: var(--olive);
}

.page-shell {
  width: min(1120px, calc(100% - 36px));
  margin: 0 auto;
  padding: clamp(42px, 6vw, 68px) 0;
}

.compact-hero {
  max-width: 900px;
  padding-top: clamp(46px, 7vw, 78px);
  padding-bottom: clamp(20px, 4vw, 34px);
  text-align: center;
}

.compact-hero h1 {
  max-width: 900px;
  margin-right: auto;
  margin-left: auto;
  text-wrap: balance;
}

.compact-hero > p {
  max-width: 720px;
  margin-right: auto;
  margin-left: auto;
}

.eyebrow {
  margin: 0 0 10px;
  color: #7fa12f;
  font-size: 0.78rem;
  font-weight: 900;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

h1,
h2,
h3,
h4 {
  color: var(--olive);
  letter-spacing: 0;
  line-height: 1.12;
}

h1 {
  max-width: 820px;
  margin: 0;
  font-size: clamp(2.5rem, 6vw, 5rem);
}

h2 {
  margin: 0;
  font-size: clamp(1.75rem, 3vw, 2.55rem);
}

.hero-copy,
.compact-hero p,
.section-heading p {
  color: var(--olive-2);
  font-size: 1.12rem;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 28px 0;
}

.compact-hero-actions {
  justify-content: center;
  margin-bottom: 0;
}

/* Home hero: full-screen image with lightweight overlay and leaf animations. */
.forest-hero {
  position: relative;
  display: grid;
  min-height: min(780px, 88vh);
  align-items: start;
  overflow: hidden;
  background: var(--cream);
  padding-top: clamp(54px, 7vw, 78px);
}

.forest-hero::before {
  position: absolute;
  inset: 0;
  z-index: 2;
  background:
    linear-gradient(90deg, rgba(255, 250, 240, 0.92) 0%, rgba(255, 250, 240, 0.8) 30%, rgba(255, 250, 240, 0.34) 56%, rgba(255, 250, 240, 0.08) 100%),
    linear-gradient(180deg, rgba(38, 63, 36, 0) 55%, rgba(38, 63, 36, 0.34) 100%);
  content: "";
  pointer-events: none;
}

.hero-photo {
  position: absolute;
  inset: 0;
  z-index: 1;
  background-image: url("forest-trail-hero.png");
  background-position: center center;
  background-size: cover;
  transform: scale(1.02);
  transform-origin: 65% 56%;
  animation: heroImageDrift 32s ease-in-out infinite alternate;
}

.hero-content {
  position: relative;
  z-index: 4;
  max-width: 980px;
  padding-top: clamp(14px, 3vh, 34px);
  padding-bottom: clamp(58px, 8vh, 86px);
}

.hero-content h1 {
  display: grid;
  gap: 10px;
  max-width: 930px;
}

.hero-content h1 span {
  display: block;
}

.hero-brand-lockup {
  display: block;
  width: min(460px, 86vw);
  margin-bottom: clamp(16px, 3vw, 26px);
}

.hero-logo {
  display: block;
  width: min(460px, 86vw);
  height: auto;
  object-fit: contain;
}

.hero-disclaimer {
  display: inline-flex;
  border-radius: 999px;
  background: rgba(255, 250, 240, 0.78);
  color: var(--olive);
  font-weight: 900;
  padding: 8px 13px;
}

/* A few slow leaves create motion without a heavy particle system. */
.floating-leaves span {
  position: absolute;
  z-index: 3;
  width: var(--leaf-w, 16px);
  height: calc(var(--leaf-w, 16px) * 0.56);
  border-radius: 999px 0 999px 0;
  background: rgba(127, 161, 47, var(--leaf-opacity, 0.45));
  filter: blur(var(--leaf-blur, 0));
  animation: leafDrift var(--leaf-speed, 18s) ease-in-out infinite;
}

.floating-leaves span:nth-child(1) {
  top: 24%;
  left: 16%;
  --leaf-speed: 22s;
}

.floating-leaves span:nth-child(2) {
  top: 33%;
  right: 23%;
  --leaf-w: 13px;
  --leaf-opacity: 0.36;
  --leaf-blur: 0.4px;
  --leaf-speed: 28s;
  animation-delay: -3s;
}

.floating-leaves span:nth-child(3) {
  top: 61%;
  left: 48%;
  --leaf-w: 18px;
  --leaf-speed: 25s;
  animation-delay: -6s;
}

.floating-leaves span:nth-child(4) {
  top: 52%;
  right: 11%;
  --leaf-w: 12px;
  --leaf-opacity: 0.32;
  --leaf-blur: 0.6px;
  --leaf-speed: 30s;
  animation-delay: -8s;
}

.floating-leaves span:nth-child(5) {
  top: 18%;
  right: 39%;
  --leaf-w: 10px;
  --leaf-opacity: 0.28;
  --leaf-blur: 0.8px;
  --leaf-speed: 34s;
  animation-delay: -12s;
}

.floating-leaves span:nth-child(6) {
  top: 72%;
  left: 26%;
  --leaf-w: 14px;
  --leaf-opacity: 0.3;
  --leaf-speed: 32s;
  animation-delay: -16s;
}

.floating-leaves span:nth-child(7) {
  top: 38%;
  left: 62%;
  --leaf-w: 12px;
  --leaf-opacity: 0.24;
  --leaf-blur: 0.9px;
  --leaf-speed: 31s;
  animation-delay: -20s;
}

.floating-leaves span:nth-child(8) {
  top: 68%;
  right: 18%;
  --leaf-w: 15px;
  --leaf-opacity: 0.34;
  --leaf-speed: 26s;
  animation-delay: -10s;
}

.floating-leaves span:nth-child(9) {
  top: 14%;
  left: 43%;
  --leaf-w: 11px;
  --leaf-opacity: 0.26;
  --leaf-blur: 0.5px;
  --leaf-speed: 35s;
  animation-delay: -25s;
}

@keyframes leafDrift {
  0%, 100% {
    transform: translate3d(0, 0, 0) rotate(8deg);
  }
  50% {
    transform: translate3d(34px, 18px, 0) rotate(28deg);
  }
}

@keyframes heroImageDrift {
  from {
    transform: scale(1.02) translate3d(0, 0, 0);
  }
  to {
    transform: scale(1.07) translate3d(-1.2%, 0.8%, 0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .site-ambient-leaves span,
  .floating-leaves span,
  .hero-photo {
    animation: none;
  }
}

.button {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 8px;
  cursor: pointer;
  font-weight: 900;
  padding: 11px 18px;
  text-decoration: none;
}

.button.primary {
  background: var(--pear);
  box-shadow: 0 10px 20px rgba(127, 161, 47, 0.22);
  color: var(--olive);
}

.button.secondary {
  border: 1px solid rgba(38, 63, 36, 0.28);
  background: rgba(255, 250, 240, 0.72);
  color: var(--olive);
  box-shadow: none;
}

.button.tertiary {
  min-height: auto;
  border-radius: 0;
  background: transparent;
  color: var(--olive);
  font-weight: 900;
  padding: 4px 0;
  text-decoration: underline;
  text-underline-offset: 4px;
}

.notice,
.simple-card,
.path-card,
.search-panel,
.cancer-intro,
.cancer-detail-panel,
.trial-detail-panel,
.family-summary-card,
.discussion-prompts,
.feedback-card {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--cream-2);
  box-shadow: var(--shadow);
}

.notice {
  max-width: 720px;
  border-left: 6px solid var(--pear);
  color: var(--olive);
  font-weight: 800;
  padding: 16px 18px;
}

.simple-card,
.path-card,
.family-summary-card,
.discussion-prompts {
  padding: clamp(20px, 3vw, 30px);
}

.simple-card p,
.path-card span,
.family-summary-card p,
.discussion-prompts li {
  color: var(--muted);
}

.soft-icon,
.trial-card-icon,
.cancer-card-icon {
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
  border-radius: 50%;
  background: rgba(169, 201, 90, 0.3);
  color: var(--olive);
  font-weight: 900;
}

.section-heading {
  max-width: 760px;
  margin: 0 auto 28px;
  text-align: center;
}

.section-heading.align-left {
  margin-left: 0;
  text-align: left;
}

.section-grid.two-column {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: 24px;
  align-items: start;
}

.card-grid {
  display: grid;
  gap: 16px;
}

.card-grid.three {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

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

.card-grid.four {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.research-card-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.research-card {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 14px;
  align-items: start;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--cream-2);
  box-shadow: 0 10px 24px rgba(38, 63, 36, 0.08);
  padding: 18px;
}

.research-card h3,
.research-card p {
  margin: 0;
}

.research-card div {
  display: grid;
  gap: 8px;
}

.research-card small {
  color: var(--muted);
  font-weight: 800;
}

.research-card a {
  width: fit-content;
  color: var(--olive);
  font-weight: 900;
}

.research-card:hover,
.research-card:focus-within {
  border-color: rgba(127, 161, 47, 0.44);
  box-shadow: 0 16px 30px rgba(38, 63, 36, 0.12);
}

.research-spotlight-section {
  padding-top: clamp(42px, 7vw, 82px);
}

.research-spotlight-carousel {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(280px, 0.85fr);
  gap: 18px;
  align-items: stretch;
}

.spotlight-feature,
.spotlight-side-card {
  border: 1px solid rgba(38, 63, 36, 0.13);
  border-radius: 8px;
  background: var(--cream-2);
  box-shadow: 0 14px 34px rgba(38, 63, 36, 0.1);
}

.spotlight-feature {
  display: grid;
  gap: 16px;
  min-height: 360px;
  padding: clamp(24px, 4vw, 38px);
}

.spotlight-feature .spotlight-topic,
.spotlight-side-card .spotlight-topic {
  width: fit-content;
  border-radius: 999px;
  background: rgba(169, 201, 90, 0.22);
  color: var(--olive);
  font-size: 0.78rem;
  font-weight: 900;
  padding: 7px 10px;
}

.spotlight-feature h3,
.spotlight-feature p,
.spotlight-side-card h3,
.spotlight-side-card p {
  margin: 0;
}

.spotlight-feature h3 {
  max-width: 680px;
  font-size: clamp(1.55rem, 3vw, 2.45rem);
}

.spotlight-feature p,
.spotlight-side-card p {
  color: var(--muted);
}

.spotlight-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  color: var(--olive-2);
  font-size: 0.9rem;
  font-weight: 850;
}

.spotlight-link {
  align-self: end;
  width: fit-content;
  color: var(--olive);
  font-weight: 900;
}

.spotlight-side-list {
  display: grid;
  gap: 12px;
}

.spotlight-side-card {
  display: grid;
  gap: 8px;
  border-color: rgba(38, 63, 36, 0.1);
  box-shadow: 0 8px 22px rgba(38, 63, 36, 0.08);
  padding: 18px;
  text-align: left;
}

.spotlight-side-card[aria-current="true"] {
  border-color: rgba(127, 161, 47, 0.56);
  background: rgba(255, 250, 240, 0.96);
}

.spotlight-side-card:hover,
.spotlight-side-card:focus-visible,
.spotlight-arrow:hover,
.spotlight-arrow:focus-visible,
.spotlight-dot:hover,
.spotlight-dot:focus-visible {
  border-color: rgba(127, 161, 47, 0.52);
  box-shadow: 0 14px 28px rgba(38, 63, 36, 0.13);
  outline: none;
}

.spotlight-controls {
  display: flex;
  grid-column: 1 / -1;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding-top: 4px;
}

.spotlight-arrow,
.spotlight-dot {
  border: 1px solid var(--line);
  background: var(--cream-2);
  color: var(--olive);
  cursor: pointer;
}

.spotlight-arrow {
  display: inline-grid;
  width: 40px;
  height: 40px;
  place-items: center;
  border-radius: 999px;
  font-size: 1.5rem;
  font-weight: 900;
}

.spotlight-dots {
  display: flex;
  gap: 8px;
}

.spotlight-dot {
  width: 11px;
  height: 11px;
  border-radius: 999px;
  padding: 0;
}

.spotlight-dot.active {
  background: var(--pear);
  border-color: rgba(38, 63, 36, 0.34);
}

.research-carousel-shell {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
}

.research-article-carousel {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - 36px) / 3);
  gap: 18px;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scroll-padding-inline: 4px;
  scroll-snap-type: inline mandatory;
  padding: 4px 4px 16px;
}

.research-article-card {
  min-width: 0;
  border: 1px solid rgba(38, 63, 36, 0.12);
  border-radius: 8px;
  background: var(--cream-2);
  box-shadow: 0 10px 24px rgba(38, 63, 36, 0.08);
  overflow: hidden;
  scroll-snap-align: start;
}

.research-article-card a {
  display: grid;
  gap: 10px;
  height: 100%;
  color: inherit;
  text-decoration: none;
}

.research-article-thumb {
  display: grid;
  aspect-ratio: 16 / 9;
  place-items: center;
  background:
    linear-gradient(135deg, rgba(169, 201, 90, 0.28), rgba(244, 238, 223, 0.9)),
    var(--cream-2);
  color: var(--olive);
  font-weight: 950;
  padding: 18px;
  text-align: center;
}

.research-article-card span,
.research-article-card h3,
.research-article-card p,
.research-article-card small {
  margin-right: 18px;
  margin-left: 18px;
}

.research-article-card span {
  width: fit-content;
  border-radius: 999px;
  background: rgba(169, 201, 90, 0.2);
  color: var(--olive);
  font-size: 0.78rem;
  font-weight: 900;
  padding: 6px 9px;
}

.research-article-card h3,
.research-article-card p {
  margin-top: 0;
  margin-bottom: 0;
}

.research-article-card h3 {
  display: -webkit-box;
  min-height: 2.7em;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.research-article-card p {
  display: -webkit-box;
  min-height: 4.2em;
  overflow: hidden;
  color: var(--muted);
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

.research-article-card small {
  margin-bottom: 18px;
  color: var(--olive-2);
  font-weight: 850;
}

.research-article-card:hover,
.research-article-card:focus-within {
  border-color: rgba(127, 161, 47, 0.52);
  box-shadow: 0 16px 32px rgba(38, 63, 36, 0.13);
  transform: translateY(-1px);
}

.carousel-hint {
  margin: 10px 0 0;
  color: var(--muted);
  font-size: 0.9rem;
  font-weight: 800;
  text-align: center;
}

.path-options-section {
  padding-block: clamp(38px, 6vw, 72px);
}

.path-option-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}

.home-path-grid {
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

.path-option-card {
  display: grid;
  align-content: start;
  gap: 12px;
  min-height: 220px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 250, 240, 0.78);
  box-shadow: 0 12px 28px rgba(38, 63, 36, 0.08);
  padding: 22px;
  text-decoration: none;
  transition: border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease, background-color 180ms ease;
}

.home-path-grid .path-option-card {
  grid-column: span 1;
}

.home-path-grid .path-option-card-featured {
  grid-column: span 2;
  min-height: 250px;
  border-color: rgba(127, 161, 47, 0.38);
  background: rgba(255, 250, 240, 0.9);
}

.path-option-card em {
  align-self: end;
  color: var(--olive-2);
  font-size: 0.86rem;
  font-style: normal;
  font-weight: 850;
}

.path-option-card::after {
  align-self: end;
  justify-self: start;
  color: var(--olive);
  content: "Open →";
  font-size: 0.92rem;
  font-weight: 900;
}

.path-option-card h3,
.path-option-card p {
  margin: 0;
}

.path-option-card h3 {
  color: var(--olive);
  font-size: 1.1rem;
}

.path-option-card p {
  color: var(--muted);
}

.path-option-card:hover,
.path-option-card:focus-visible {
  border-color: rgba(127, 161, 47, 0.54);
  background: rgba(255, 250, 240, 0.94);
  box-shadow: 0 18px 34px rgba(38, 63, 36, 0.14);
  outline: none;
  transform: translateY(-2px);
}

.path-card {
  display: grid;
  min-height: 170px;
  align-content: start;
  gap: 10px;
  color: var(--olive);
  text-decoration: none;
}

.path-card strong {
  font-size: 1.15rem;
}

.support-hero {
  max-width: 880px;
}

.support-guide-section {
  padding-top: 10px;
}

.support-guide-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}

.support-journey {
  display: grid;
  grid-template-columns: 1.15fr repeat(2, minmax(0, 1fr));
  gap: 16px;
  align-items: stretch;
}

.support-journey .support-guide-card {
  min-height: 180px;
}

.support-guide-card.featured {
  grid-row: span 2;
  background:
    linear-gradient(135deg, rgba(169, 201, 90, 0.24), rgba(255, 250, 240, 0.9)),
    var(--cream-2);
}

.support-guide-card {
  display: grid;
  align-content: start;
  gap: 10px;
  min-height: 185px;
  border: 1px solid rgba(127, 161, 47, 0.22);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(255, 250, 240, 0.96), rgba(223, 234, 188, 0.34));
  box-shadow: 0 12px 28px rgba(38, 63, 36, 0.08);
  padding: 22px;
}

.support-guide-card h3,
.support-guide-card p {
  margin: 0;
}

.support-guide-card h3 {
  color: var(--olive);
  font-size: 1.08rem;
}

.support-guide-card p {
  color: var(--muted);
}

.support-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(22px, 4vw, 36px);
  align-items: stretch;
}

.support-guide-list {
  display: grid;
  gap: 14px;
  max-width: 980px;
  margin: 0 auto;
}

.support-guide-step {
  display: grid;
  grid-template-columns: minmax(150px, 0.32fr) 1fr;
  gap: 16px;
  align-items: start;
  border: 1px solid rgba(38, 63, 36, 0.12);
  border-radius: 8px;
  background: rgba(255, 250, 240, 0.86);
  box-shadow: 0 8px 20px rgba(38, 63, 36, 0.06);
  padding: 18px;
}

.support-guide-step h3,
.support-guide-step p {
  margin: 0;
}

.support-guide-step h3 {
  font-size: 1.05rem;
}

.support-guide-step p {
  color: var(--muted);
}

.support-packet {
  display: grid;
  gap: 18px;
}

.support-packet section,
.question-next-steps,
.question-review-guide,
.custom-question-panel {
  border: 1px solid rgba(38, 63, 36, 0.12);
  border-radius: 8px;
  background: rgba(255, 250, 240, 0.82);
  box-shadow: 0 10px 24px rgba(38, 63, 36, 0.06);
  padding: clamp(18px, 3vw, 24px);
}

.support-question-list {
  display: grid;
  gap: 8px;
}

.contact-block-list {
  display: grid;
  gap: 10px;
}

.contact-block {
  display: grid;
  gap: 4px;
  margin: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(244, 238, 223, 0.48);
  padding: 12px;
  font-style: normal;
}

.family-autocomplete-list.is-minimized {
  display: none;
}

.learn-cancer-overview {
  padding-top: clamp(44px, 7vw, 84px);
  padding-bottom: clamp(34px, 6vw, 64px);
}

.learn-cancer-card {
  display: grid;
  gap: 20px;
  max-width: 980px;
  margin: 0 auto;
  border: 1px solid rgba(38, 63, 36, 0.12);
  border-radius: 8px;
  background: rgba(255, 250, 240, 0.74);
  box-shadow: 0 10px 24px rgba(38, 63, 36, 0.08);
  padding: clamp(20px, 3vw, 28px);
}

.learn-path-overview {
  padding-top: clamp(18px, 4vw, 36px);
  padding-bottom: clamp(24px, 5vw, 48px);
}

.learn-path-card {
  display: grid;
  gap: 12px;
  color: inherit;
  text-decoration: none;
}

.learn-path-card h3,
.learn-path-card p {
  margin: 0;
}

.learn-cancer-card .home-cancer-select {
  max-width: 360px;
  margin: 0;
}

.founder-section {
  padding-top: 12px;
}

.founder-card {
  display: grid;
  grid-template-columns: minmax(180px, 260px) 1fr;
  gap: clamp(22px, 4vw, 38px);
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 250, 240, 0.82);
  box-shadow: var(--shadow);
  padding: clamp(20px, 4vw, 34px);
}

.founder-card img {
  width: 100%;
  aspect-ratio: 4 / 5;
  border-radius: 8px;
  object-fit: cover;
  object-position: center 30%;
  box-shadow: 0 14px 30px rgba(38, 63, 36, 0.14);
}

.founder-card h2,
.founder-card p {
  margin: 0;
}

.founder-card div {
  display: grid;
  gap: 12px;
}

.simple-card h2,
.simple-card h3 {
  font-size: 1.25rem;
}

.story-module {
  position: relative;
  overflow: hidden;
  border-radius: 18px;
}

.story-module::before,
.story-module::after {
  position: absolute;
  z-index: 0;
  pointer-events: none;
  content: "";
}

.patient-theme::before {
  right: 5%;
  bottom: 48px;
  width: 118px;
  height: 72px;
  opacity: 0.2;
  background:
    linear-gradient(var(--olive-2), var(--olive-2)) 18px 30px / 8px 42px no-repeat,
    radial-gradient(circle at 22px 26px, var(--olive-2) 0 20px, transparent 21px),
    linear-gradient(var(--olive-2), var(--olive-2)) 74px 24px / 8px 48px no-repeat,
    radial-gradient(circle at 78px 22px, var(--olive-2) 0 24px, transparent 25px);
}

.patient-theme::after {
  left: 9%;
  top: 126px;
  width: 190px;
  height: 90px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(169, 201, 90, 0.2), transparent 68%);
}

.research-theme::before {
  right: 4%;
  bottom: 38px;
  width: 230px;
  height: 92px;
  opacity: 0.18;
  background:
    linear-gradient(135deg, transparent 50%, var(--olive-2) 51%) 0 36px / 92px 56px no-repeat,
    linear-gradient(45deg, transparent 50%, var(--olive-2) 51%) 64px 18px / 118px 74px no-repeat,
    linear-gradient(135deg, transparent 50%, var(--pear) 51%) 148px 44px / 82px 48px no-repeat;
}

.research-theme::after {
  left: 7%;
  top: 132px;
  width: 18px;
  height: 18px;
  border-top: 3px solid rgba(38, 63, 36, 0.22);
  border-right: 3px solid rgba(38, 63, 36, 0.22);
  transform: rotate(-45deg);
}

.rights-theme::before {
  right: 5%;
  bottom: 46px;
  width: 220px;
  height: 86px;
  opacity: 0.16;
  background:
    linear-gradient(var(--olive-2), var(--olive-2)) 0 44px / 200px 4px no-repeat,
    linear-gradient(var(--olive-2), var(--olive-2)) 18px 20px / 22px 28px no-repeat,
    linear-gradient(var(--olive-2), var(--olive-2)) 62px 8px / 28px 40px no-repeat,
    linear-gradient(var(--olive-2), var(--olive-2)) 116px 24px / 24px 24px no-repeat,
    linear-gradient(var(--olive-2), var(--olive-2)) 164px 14px / 30px 34px no-repeat;
}

.rights-theme::after {
  left: 8%;
  top: 126px;
  width: 38px;
  height: 44px;
  opacity: 0.22;
  background: var(--pear);
  clip-path: polygon(50% 0, 90% 14%, 82% 70%, 50% 100%, 18% 70%, 10% 14%);
}

.storybook-trail {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(var(--trail-count, 6), minmax(0, 1fr));
  gap: 0;
  align-items: stretch;
  overflow: visible;
  margin-top: 20px;
  border: 1px solid rgba(38, 63, 36, 0.1);
  border-radius: 18px;
  background:
    linear-gradient(180deg, rgba(255, 250, 240, 0.78), rgba(244, 238, 223, 0.9)),
    radial-gradient(circle at 14% 22%, rgba(169, 201, 90, 0.16), transparent 22%),
    radial-gradient(circle at 86% 28%, rgba(64, 91, 51, 0.1), transparent 20%);
  box-shadow: 0 18px 38px rgba(38, 63, 36, 0.08);
  padding: 72px 20px 50px;
}

.patient-theme .storybook-trail {
  min-height: 640px;
  overflow: hidden;
  padding: 0;
  background:
    url("data:image/svg+xml,%3Csvg viewBox='0 0 1200 640' preserveAspectRatio='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cdefs%3E%3ClinearGradient id='sky' x1='0' x2='0' y1='0' y2='1'%3E%3Cstop stop-color='%23fff7df'/%3E%3Cstop offset='.72' stop-color='%23eadfbe'/%3E%3Cstop offset='1' stop-color='%23c7b98f'/%3E%3C/linearGradient%3E%3CradialGradient id='sun' cx='.2' cy='.08' r='.62'%3E%3Cstop stop-color='%23fffdf1' stop-opacity='.92'/%3E%3Cstop offset='.44' stop-color='%23f8df95' stop-opacity='.38'/%3E%3Cstop offset='1' stop-color='%23f8df95' stop-opacity='0'/%3E%3C/radialGradient%3E%3Cfilter id='soft'%3E%3CfeGaussianBlur stdDeviation='5'/%3E%3C/filter%3E%3C/defs%3E%3Crect width='1200' height='640' fill='url(%23sky)'/%3E%3Crect width='1200' height='640' fill='url(%23sun)'/%3E%3Cpath d='M0 250 C160 186 300 232 424 164 C516 112 604 212 704 160 C836 92 998 196 1200 128 L1200 366 L0 366z' fill='%23c8d5b3'/%3E%3Cpath d='M0 292 C166 236 286 286 426 226 C572 164 678 274 824 210 C948 156 1058 238 1200 206 L1200 398 L0 398z' fill='%23aebf93' opacity='.88'/%3E%3Cpath d='M0 348 C104 294 220 326 318 300 C420 272 514 338 624 306 C748 270 854 338 978 302 C1052 280 1120 294 1200 270 L1200 450 L0 450z' fill='%237fa168' opacity='.72'/%3E%3Cpath d='M0 372 C110 322 214 360 314 330 C404 302 496 378 600 336 C724 286 804 378 934 328 C1018 296 1116 348 1200 318 L1200 486 L0 486z' fill='%235f874f' opacity='.82'/%3E%3Cpath d='M0 428 C92 390 174 428 250 404 C338 376 450 452 548 404 C674 344 786 450 910 400 C1036 350 1114 422 1200 386 L1200 640 L0 640z' fill='%233d6f43'/%3E%3Cpath d='M0 500 C104 458 210 510 320 476 C452 434 542 536 690 474 C802 426 936 526 1200 464 L1200 640 L0 640z' fill='%232c5939'/%3E%3Cpath d='M0 368 C180 336 300 384 468 350 S808 318 1200 350' fill='none' stroke='%23fffaf0' stroke-opacity='.45' stroke-width='30' filter='url(%23soft)'/%3E%3Cpath d='M34 484 C146 418 232 516 348 454 S578 394 720 450 S936 540 1160 454' fill='none' stroke='%235f9db2' stroke-width='34' stroke-linecap='round' opacity='.82'/%3E%3Cpath d='M58 482 C154 444 242 492 348 454 S572 426 704 456 S930 508 1120 462' fill='none' stroke='%23d9fbff' stroke-width='7' stroke-linecap='round' opacity='.7'/%3E%3Cpath d='M750 334 C790 356 822 354 862 330 C848 386 816 412 770 382 C760 370 754 352 750 334z' fill='%2377bfd0' opacity='.72'/%3E%3Cpath d='M0 602 C150 548 308 622 466 578 S778 530 1200 590 L1200 640 L0 640z' fill='%231e4631' opacity='.78'/%3E%3Cpath d='M78 104 C42 188 64 300 36 640 L0 640 L0 0 L136 0 C114 32 94 62 78 104z' fill='%23213f2d' opacity='.68'/%3E%3Cpath d='M1120 0 C1090 118 1116 254 1076 640 L1200 640 L1200 0z' fill='%231c3829' opacity='.7'/%3E%3Cpath d='M372 488 C404 462 450 468 478 500 C434 514 398 514 372 488zM822 524 C856 502 900 506 928 532 C888 548 850 548 822 524z' fill='%2379776d'/%3E%3Ccircle cx='506' cy='548' r='4' fill='%23f7d56b'/%3E%3Ccircle cx='534' cy='562' r='3' fill='%23f5a3ae'/%3E%3Ccircle cx='972' cy='556' r='4' fill='%23f7d56b'/%3E%3Ccircle cx='1002' cy='574' r='3' fill='%23fff3a1'/%3E%3C/svg%3E") center / 100% 100% no-repeat,
    linear-gradient(180deg, #fff7df, #c7b98f);
  box-shadow:
    inset 0 0 0 1px rgba(38, 63, 36, 0.12),
    inset 0 -34px 70px rgba(86, 123, 54, 0.14),
    0 18px 38px rgba(38, 63, 36, 0.08);
}

.research-theme .storybook-trail,
.rights-theme .storybook-trail {
  min-height: 350px;
}

.storybook-trail::before {
  position: absolute;
  z-index: 0;
  right: 5%;
  left: 5%;
  top: 118px;
  height: 118px;
  border: 0;
  border-radius: 999px;
  background: url("data:image/svg+xml,%3Csvg viewBox='0 0 1000 150' preserveAspectRatio='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20 86 C150 26 250 132 390 84 S620 28 750 88 S900 120 980 64' fill='none' stroke='%23bda87b' stroke-opacity='.34' stroke-width='28' stroke-linecap='round'/%3E%3Cpath d='M20 86 C150 26 250 132 390 84 S620 28 750 88 S900 120 980 64' fill='none' stroke='%237fa12f' stroke-opacity='.22' stroke-width='5' stroke-linecap='round' stroke-dasharray='1 24'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
  content: "";
  transform: none;
}

.patient-theme .storybook-trail::before {
  inset: 0;
  height: auto;
  background: url("data:image/svg+xml,%3Csvg viewBox='0 0 1200 640' preserveAspectRatio='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M128 128 C212 206 278 272 342 336 C424 326 508 292 596 278 C652 210 718 154 780 118 C854 210 954 344 1048 440 C794 486 566 500 330 520' fill='none' stroke='%23714d2e' stroke-opacity='.32' stroke-width='42' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M128 128 C212 206 278 272 342 336 C424 326 508 292 596 278 C652 210 718 154 780 118 C854 210 954 344 1048 440 C794 486 566 500 330 520' fill='none' stroke='%23b98345' stroke-width='30' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M128 128 C212 206 278 272 342 336 C424 326 508 292 596 278 C652 210 718 154 780 118 C854 210 954 344 1048 440 C794 486 566 500 330 520' fill='none' stroke='%23dfb46a' stroke-width='20' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M128 128 C212 206 278 272 342 336 C424 326 508 292 596 278 C652 210 718 154 780 118 C854 210 954 344 1048 440 C794 486 566 500 330 520' fill='none' stroke='%23714d2e' stroke-opacity='.45' stroke-width='3' stroke-linecap='round' stroke-linejoin='round' stroke-dasharray='1 18'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
}

.storybook-trail::after {
  position: absolute;
  z-index: 0;
  right: 11%;
  bottom: 18px;
  left: 52%;
  height: 10px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(169, 201, 90, 0), rgba(88, 127, 110, 0.16), rgba(169, 201, 90, 0));
  content: "";
  opacity: 0.45;
  animation: waterShimmer 8s ease-in-out infinite alternate;
}

.patient-theme .storybook-trail::after {
  right: 5%;
  bottom: 134px;
  left: 4%;
  height: 86px;
  border-radius: 60% 42% 55% 45%;
  background:
    url("data:image/svg+xml,%3Csvg viewBox='0 0 760 86' preserveAspectRatio='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 50 C112 6 218 78 332 34 S540 6 756 48' fill='none' stroke='%235f9db2' stroke-width='26' stroke-linecap='round'/%3E%3Cpath d='M28 48 C122 20 226 66 330 36 S532 22 724 46' fill='none' stroke='%23d9fbff' stroke-opacity='.62' stroke-width='5' stroke-linecap='round'/%3E%3Cpath d='M118 42 C178 32 206 54 254 48M438 38 C498 26 546 48 610 42' fill='none' stroke='%238ed7ed' stroke-opacity='.58' stroke-width='7' stroke-linecap='round'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
  opacity: 0.78;
}

.trail-node {
  position: relative;
  z-index: 2;
  display: grid;
  min-height: 248px;
  align-content: start;
  justify-items: center;
  gap: 10px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  box-shadow: none;
  color: var(--olive);
  cursor: pointer;
  padding: 0 8px;
  text-align: center;
}

.trail-node:nth-child(2),
.trail-node:nth-child(5) {
  transform: translateY(34px);
}

.trail-node:nth-child(3) {
  transform: translateY(70px);
}

.trail-node:nth-child(4) {
  transform: translateY(28px);
}

.trail-node:nth-child(even) {
  transform: translateY(34px);
}

.trail-node span {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  justify-self: center;
  order: 2;
  border: 4px solid var(--cream);
  border-radius: 50%;
  background: var(--pear);
  box-shadow: 0 0 0 1px rgba(38, 63, 36, 0.16), 0 12px 24px rgba(38, 63, 36, 0.12);
  font-weight: 900;
}

.trail-node span::before {
  content: "";
  display: block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(38, 63, 36, 0.55);
  clip-path: none;
}

.patient-theme .trail-node span::before {
  border-radius: 50%;
  transform: none;
}

.research-theme .trail-node span::before {
  border-radius: 50%;
  clip-path: none;
}

.rights-theme .trail-node span::before {
  border-radius: 50%;
  clip-path: none;
}

.trail-node strong {
  order: 3;
  max-width: 150px;
  line-height: 1.2;
}

.trail-node small {
  display: block;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 800;
  line-height: 1.25;
}

.branch-node {
  min-height: 260px;
  border-radius: 8px;
}

.trail-node::before {
  display: block;
  order: 1;
  width: min(118px, 72%);
  height: 108px;
  margin-bottom: 4px;
  background: center / contain no-repeat;
  content: "";
  opacity: 0.92;
  pointer-events: none;
}

.patient-theme .trail-node::before {
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 120 110' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M24 88h72' stroke='%23263f24' stroke-opacity='.25' stroke-width='5' stroke-linecap='round'/%3E%3Cpath d='M58 22c-14 12-22 27-22 44h44c0-17-8-32-22-44z' fill='%23a9c95a' fill-opacity='.5' stroke='%23263f24' stroke-opacity='.45' stroke-width='4'/%3E%3Cpath d='M58 66v24' stroke='%23263f24' stroke-opacity='.45' stroke-width='5' stroke-linecap='round'/%3E%3C/svg%3E");
}

.patient-theme .trail-node:nth-child(2)::before {
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 120 110' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M28 88V38h64v50M40 88V52h40v36' fill='none' stroke='%23263f24' stroke-opacity='.48' stroke-width='6' stroke-linecap='round'/%3E%3Cpath d='M32 38c12-18 44-18 56 0' fill='none' stroke='%23a9c95a' stroke-opacity='.75' stroke-width='8' stroke-linecap='round'/%3E%3C/svg%3E");
}

.patient-theme .trail-node:nth-child(3)::before,
.rights-theme .trail-node:nth-child(5)::before {
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 120 110' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M26 58l34-28 34 28v32H26z' fill='%23fffaf0' stroke='%23263f24' stroke-opacity='.48' stroke-width='5'/%3E%3Cpath d='M48 90V66h24v24' fill='%23a9c95a' fill-opacity='.35' stroke='%23263f24' stroke-opacity='.4' stroke-width='4'/%3E%3C/svg%3E");
}

.patient-theme .trail-node:nth-child(4)::before {
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 120 110' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M60 92V30M60 54l30-18M60 66L30 48' fill='none' stroke='%23263f24' stroke-opacity='.48' stroke-width='7' stroke-linecap='round'/%3E%3Cpath d='M72 36h22M24 48h22' stroke='%23a9c95a' stroke-opacity='.85' stroke-width='7' stroke-linecap='round'/%3E%3C/svg%3E");
}

.patient-theme .trail-node:nth-child(5)::before {
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 120 110' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M24 86h72L60 34z' fill='%23fffaf0' stroke='%23263f24' stroke-opacity='.48' stroke-width='5'/%3E%3Cpath d='M60 34v52' stroke='%23a9c95a' stroke-opacity='.8' stroke-width='6'/%3E%3C/svg%3E");
}

.patient-theme .trail-node:nth-child(6)::before {
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 120 110' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M26 84h68M36 84l24-56 24 56' fill='none' stroke='%23263f24' stroke-opacity='.48' stroke-width='6' stroke-linecap='round'/%3E%3Cpath d='M48 56h24M42 70h36' stroke='%23a9c95a' stroke-opacity='.8' stroke-width='6' stroke-linecap='round'/%3E%3C/svg%3E");
}

.research-theme .trail-node::before {
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 120 110' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M18 90l34-58 22 36 14-22 18 44z' fill='%23a9c95a' fill-opacity='.28' stroke='%23263f24' stroke-opacity='.48' stroke-width='5' stroke-linejoin='round'/%3E%3Cpath d='M52 32l8 14M88 46l6 12' stroke='%23fffaf0' stroke-width='5' stroke-linecap='round'/%3E%3C/svg%3E");
}

.research-theme .trail-node:nth-child(2)::before {
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 120 110' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M22 76c24-30 52-30 76 0' fill='none' stroke='%23263f24' stroke-opacity='.48' stroke-width='7' stroke-linecap='round'/%3E%3Cpath d='M34 76V58M86 76V58M48 62h24' stroke='%23a9c95a' stroke-opacity='.85' stroke-width='6' stroke-linecap='round'/%3E%3C/svg%3E");
}

.research-theme .trail-node:nth-child(3)::before {
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 120 110' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M26 84h68L78 42H42z' fill='%23fffaf0' stroke='%23263f24' stroke-opacity='.48' stroke-width='5'/%3E%3Cpath d='M46 42V28h28v14M48 60h24M48 72h18' stroke='%23a9c95a' stroke-opacity='.8' stroke-width='6' stroke-linecap='round'/%3E%3C/svg%3E");
}

.research-theme .trail-node:nth-child(4)::before {
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 120 110' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M24 82h72M36 82l24-50 24 50' fill='none' stroke='%23263f24' stroke-opacity='.48' stroke-width='6'/%3E%3Ccircle cx='60' cy='42' r='10' fill='%23a9c95a' fill-opacity='.6' stroke='%23263f24' stroke-opacity='.45' stroke-width='4'/%3E%3C/svg%3E");
}

.rights-theme .trail-node::before {
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 120 110' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M60 22l34 12-7 38c-4 14-14 25-27 32-13-7-23-18-27-32l-7-38z' fill='%23a9c95a' fill-opacity='.3' stroke='%23263f24' stroke-opacity='.48' stroke-width='5'/%3E%3Cpath d='M45 60l10 10 22-26' fill='none' stroke='%23263f24' stroke-opacity='.52' stroke-width='6' stroke-linecap='round'/%3E%3C/svg%3E");
}

.rights-theme .trail-node:nth-child(2)::before {
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 120 110' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M32 74c0-22 14-38 30-38s28 11 28 27c0 15-11 27-28 27H42' fill='none' stroke='%23263f24' stroke-opacity='.48' stroke-width='6' stroke-linecap='round'/%3E%3Ccircle cx='62' cy='36' r='7' fill='%23a9c95a' fill-opacity='.7'/%3E%3C/svg%3E");
}

.rights-theme .trail-node:nth-child(3)::before {
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 120 110' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M28 82h58M38 82V34h42M78 34l14 14-14 14' fill='none' stroke='%23263f24' stroke-opacity='.48' stroke-width='6' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M46 58h38' stroke='%23a9c95a' stroke-opacity='.8' stroke-width='6' stroke-linecap='round'/%3E%3C/svg%3E");
}

.rights-theme .trail-node:nth-child(4)::before {
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 120 110' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='32' y='48' width='56' height='38' rx='8' fill='%23fffaf0' stroke='%23263f24' stroke-opacity='.48' stroke-width='5'/%3E%3Cpath d='M44 48V36c0-12 8-20 16-20s16 8 16 20v12' fill='none' stroke='%23a9c95a' stroke-opacity='.85' stroke-width='6' stroke-linecap='round'/%3E%3C/svg%3E");
}

.trail-node:hover,
.trail-node:focus-visible,
.glossary-click-card:hover,
.glossary-click-card:focus-visible {
  color: var(--olive);
  outline: 3px solid rgba(169, 201, 90, 0.24);
  outline-offset: 6px;
}

.trail-node:hover span,
.trail-node:focus-visible span {
  background: #b7d56a;
  box-shadow: 0 0 0 3px rgba(169, 201, 90, 0.35), 0 12px 24px rgba(38, 63, 36, 0.14);
}

/* Waypoint-first landscape: the circular nodes remain the controls; scenery supports them. */
.trail-node span {
  position: relative;
  z-index: 3;
  display: grid;
  width: 68px;
  height: 68px;
  place-items: center;
  order: 1;
  border: 6px solid rgba(255, 250, 240, 0.96);
  border-radius: 50%;
  background: var(--pear);
  box-shadow:
    0 0 0 1px rgba(38, 63, 36, 0.18),
    0 16px 28px rgba(38, 63, 36, 0.18),
    inset 0 2px 0 rgba(255, 250, 240, 0.45);
  transition: background 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}

.trail-node span::before {
  width: 16px;
  height: 16px;
  background: rgba(38, 63, 36, 0.62);
}

.trail-node strong,
.trail-node small {
  position: relative;
  z-index: 3;
  border-radius: 999px;
  background: rgba(255, 250, 240, 0.74);
  backdrop-filter: blur(4px);
  padding: 4px 10px;
}

.trail-node strong {
  order: 2;
}

.trail-node small {
  order: 3;
}

.trail-node::before {
  display: none;
  content: none;
}

.trail-node:hover span,
.trail-node:focus-visible span {
  background: #b7d56a;
  box-shadow:
    0 0 0 4px rgba(169, 201, 90, 0.34),
    0 18px 30px rgba(38, 63, 36, 0.2),
    inset 0 2px 0 rgba(255, 250, 240, 0.55);
  transform: translateY(-2px);
}

@media (min-width: 761px) {
  .patient-theme .storybook-trail {
    display: block;
  }

  .patient-theme .trail-node {
    position: absolute;
    display: grid;
    width: 168px;
    min-height: 0;
    gap: 9px;
    padding: 0;
    transform: none;
  }

  .patient-theme .trail-node:nth-child(1) {
    top: 72px;
    left: 5.2%;
  }

  .patient-theme .trail-node:nth-child(2) {
    top: 280px;
    left: 25.8%;
  }

  .patient-theme .trail-node:nth-child(3) {
    top: 222px;
    left: 47.2%;
  }

  .patient-theme .trail-node:nth-child(4) {
    top: 62px;
    left: 62.6%;
  }

  .patient-theme .trail-node:nth-child(5) {
    top: 384px;
    left: 84.2%;
  }

  .patient-theme .trail-node:nth-child(6) {
    top: 462px;
    left: 22.8%;
  }

  .patient-theme .trail-node span {
    width: 112px;
    height: 112px;
    border: 3px solid rgba(38, 63, 36, 0.86);
    background: #dff1b6;
    box-shadow:
      0 0 0 8px rgba(255, 250, 240, 0.76),
      0 22px 38px rgba(38, 63, 36, 0.2),
      inset 0 2px 0 rgba(255, 250, 240, 0.62);
  }

  .patient-theme .trail-node span::before {
    width: 18px;
    height: 18px;
  }

  .patient-theme .trail-node strong {
    max-width: 156px;
    background: rgba(255, 250, 240, 0.9);
    box-shadow: 0 8px 18px rgba(38, 63, 36, 0.08);
    font-size: 0.95rem;
  }
}

/* Illustrated Learn maps: the environment is the main interface, with circular nodes embedded as waypoints. */
body[data-page="learn"] .story-module::before,
body[data-page="learn"] .story-module::after {
  display: none;
}

body[data-page="learn"] .storybook-trail {
  position: relative;
  display: block;
  min-height: 620px;
  overflow: hidden;
  border: 1px solid rgba(38, 63, 36, 0.18);
  border-radius: 18px;
  box-shadow: 0 24px 50px rgba(38, 63, 36, 0.16);
  isolation: isolate;
  padding: 0;
}

body[data-page="learn"] .storybook-trail::before,
body[data-page="learn"] .storybook-trail::after {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  content: "";
}

body[data-page="learn"] .trail-node {
  position: absolute;
  z-index: 3;
  display: grid;
  width: 138px;
  min-height: 0;
  justify-items: center;
  gap: 8px;
  padding: 0;
  text-align: center;
  transform: none !important;
}

body[data-page="learn"] .trail-node span {
  display: grid;
  width: 78px;
  height: 78px;
  place-items: center;
  border: 5px solid rgba(255, 250, 240, 0.96);
  border-radius: 50%;
  background: #dff1b6;
  box-shadow:
    0 0 0 2px rgba(38, 63, 36, 0.7),
    0 16px 28px rgba(24, 50, 31, 0.28),
    inset 0 3px 0 rgba(255, 255, 255, 0.62);
}

body[data-page="learn"] .trail-node span::before {
  width: 17px;
  height: 17px;
  border-radius: 50%;
  background: rgba(38, 63, 36, 0.7);
}

body[data-page="learn"] .trail-node strong {
  max-width: 132px;
  border: 1px solid rgba(38, 63, 36, 0.12);
  border-radius: 999px;
  background: rgba(255, 250, 240, 0.9);
  box-shadow: 0 9px 18px rgba(38, 63, 36, 0.16);
  color: var(--olive);
  font-size: 0.9rem;
  line-height: 1.15;
  padding: 6px 11px;
}

body[data-page="learn"] .trail-node small {
  display: none;
}

body[data-page="learn"] .trail-node:hover span,
body[data-page="learn"] .trail-node:focus-visible span {
  background: #c6e87a;
  box-shadow:
    0 0 0 4px rgba(255, 250, 240, 0.9),
    0 0 0 8px rgba(169, 201, 90, 0.34),
    0 18px 30px rgba(24, 50, 31, 0.28),
    inset 0 3px 0 rgba(255, 255, 255, 0.68);
  transform: translateY(-3px);
}

.patient-theme .storybook-trail {
  background:
    url("data:image/svg+xml,%3Csvg viewBox='0 0 1200 640' preserveAspectRatio='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cdefs%3E%3ClinearGradient id='sky' x1='0' x2='0' y1='0' y2='1'%3E%3Cstop stop-color='%23fbc46f'/%3E%3Cstop offset='.42' stop-color='%23a8d589'/%3E%3Cstop offset='1' stop-color='%234c8a53'/%3E%3C/linearGradient%3E%3CradialGradient id='sun' cx='.2' cy='.08' r='.56'%3E%3Cstop stop-color='%23fff7c7'/%3E%3Cstop offset='.34' stop-color='%23ffd37a' stop-opacity='.55'/%3E%3Cstop offset='1' stop-color='%23ffd37a' stop-opacity='0'/%3E%3C/radialGradient%3E%3Cfilter id='soft'%3E%3CfeGaussianBlur stdDeviation='5'/%3E%3C/filter%3E%3C/defs%3E%3Crect width='1200' height='640' fill='url(%23sky)'/%3E%3Crect width='1200' height='640' fill='url(%23sun)'/%3E%3Cpath d='M0 220 C116 150 196 230 300 164 C406 96 530 196 626 132 C760 42 910 184 1200 94 L1200 360 L0 360z' fill='%2372a96b' opacity='.7'/%3E%3Cpath d='M0 292 C110 226 210 304 320 244 C450 174 560 316 690 232 C806 158 982 288 1200 214 L1200 454 L0 454z' fill='%233e864c'/%3E%3Cpath d='M0 392 C130 330 220 410 340 362 C492 300 570 448 744 346 C884 264 1020 424 1200 344 L1200 640 L0 640z' fill='%232a683f'/%3E%3Cpath d='M0 514 C126 460 250 556 398 500 C544 444 682 560 838 500 S1050 470 1200 512 L1200 640 L0 640z' fill='%231e4d35'/%3E%3Cpath d='M60 452 C174 370 280 508 414 414 S648 344 774 420 S980 518 1152 430' fill='none' stroke='%23299fc4' stroke-width='54' stroke-linecap='round'/%3E%3Cpath d='M88 448 C184 406 300 474 414 416 S642 384 760 424 S964 486 1112 438' fill='none' stroke='%239ce7f2' stroke-width='16' stroke-linecap='round' opacity='.86'/%3E%3Cpath d='M790 274 C828 304 864 302 902 276 C898 336 856 376 808 350 C796 334 790 306 790 274z' fill='%235fc3d6'/%3E%3Cpath d='M802 292 C828 310 858 310 884 292' fill='none' stroke='%23e8fdff' stroke-width='7' stroke-linecap='round'/%3E%3Cpath d='M150 482 C220 438 322 464 396 526' fill='none' stroke='%239a6739' stroke-width='24' stroke-linecap='round'/%3E%3Cpath d='M154 482 C222 444 318 468 390 526' fill='none' stroke='%23e2b46c' stroke-width='14' stroke-linecap='round'/%3E%3Cg fill='%23234a32'%3E%3Cpath d='M64 0 C24 116 48 340 14 640 L0 640 L0 0zM1142 0 C1110 136 1132 362 1090 640 L1200 640 L1200 0z' opacity='.74'/%3E%3C/g%3E%3Cg fill='%237b8172'%3E%3Cpath d='M336 512 C366 484 414 486 448 518 C402 536 362 536 336 512zM890 528 C920 506 962 510 990 536 C952 550 920 550 890 528z'/%3E%3C/g%3E%3Cg fill='%23f8d55d'%3E%3Ccircle cx='510' cy='560' r='5'/%3E%3Ccircle cx='970' cy='566' r='5'/%3E%3C/g%3E%3Cg fill='%23f6a7b8'%3E%3Ccircle cx='536' cy='578' r='4'/%3E%3Ccircle cx='1000' cy='586' r='4'/%3E%3C/g%3E%3C/svg%3E") center / cover no-repeat,
    linear-gradient(180deg, #fbc46f, #2a683f);
}

.patient-theme .storybook-trail::before {
  background: url("data:image/svg+xml,%3Csvg viewBox='0 0 1200 640' preserveAspectRatio='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M128 140 C238 246 294 346 390 374 C500 406 570 286 690 300 C810 314 876 456 1038 470 C780 496 572 524 344 542' fill='none' stroke='%23714d2e' stroke-opacity='.28' stroke-width='45' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M128 140 C238 246 294 346 390 374 C500 406 570 286 690 300 C810 314 876 456 1038 470 C780 496 572 524 344 542' fill='none' stroke='%23b98445' stroke-width='30' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M128 140 C238 246 294 346 390 374 C500 406 570 286 690 300 C810 314 876 456 1038 470 C780 496 572 524 344 542' fill='none' stroke='%23e7bb72' stroke-width='17' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
}

.patient-theme .storybook-trail::after {
  background:
    radial-gradient(ellipse at 8% 8%, rgba(198, 232, 122, .9) 0 5px, transparent 6px),
    radial-gradient(ellipse at 28% 18%, rgba(255, 212, 96, .75) 0 4px, transparent 5px),
    radial-gradient(ellipse at 66% 16%, rgba(198, 232, 122, .8) 0 5px, transparent 6px),
    radial-gradient(ellipse at 80% 30%, rgba(255, 250, 240, .72) 0 3px, transparent 4px),
    linear-gradient(90deg, transparent, rgba(217, 251, 255, .32), transparent);
  background-size: 260px 180px, 320px 220px, 240px 200px, 380px 220px, 100% 100%;
  animation: jungleAmbient 11s ease-in-out infinite alternate;
}

.research-theme .storybook-trail {
  background:
    url("data:image/svg+xml,%3Csvg viewBox='0 0 1200 620' preserveAspectRatio='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cdefs%3E%3ClinearGradient id='sky' x1='0' x2='0' y1='0' y2='1'%3E%3Cstop stop-color='%23a8d7d9'/%3E%3Cstop offset='.62' stop-color='%23d9d1ad'/%3E%3Cstop offset='1' stop-color='%23877a61'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect width='1200' height='620' fill='url(%23sky)'/%3E%3Cpath d='M0 300 L164 190 L276 252 L430 128 L570 260 L706 104 L846 246 L1030 146 L1200 260 L1200 620 L0 620z' fill='%23e8dfc7'/%3E%3Cpath d='M0 350 L180 238 L318 318 L458 194 L600 328 L716 168 L858 318 L1030 224 L1200 320 L1200 620 L0 620z' fill='%23c3b997'/%3E%3Cpath d='M0 430 C184 350 300 440 438 350 C568 266 690 450 846 352 C978 268 1102 390 1200 334 L1200 620 L0 620z' fill='%238d8a6e'/%3E%3Cpath d='M0 520 C140 468 286 538 430 488 S748 438 1200 512 L1200 620 L0 620z' fill='%235f634f'/%3E%3Cpath d='M146 470 C220 390 300 430 374 342 S520 318 608 234 S786 246 920 150' fill='none' stroke='%23785b3b' stroke-width='34' stroke-linecap='round'/%3E%3Cpath d='M146 470 C220 390 300 430 374 342 S520 318 608 234 S786 246 920 150' fill='none' stroke='%23d7bd7b' stroke-width='20' stroke-linecap='round'/%3E%3Cpath d='M214 438h70v46h-70zM584 270h78v50h-78zM884 166h76v48h-76z' fill='%23f2d28c' stroke='%23634b35' stroke-width='6'/%3E%3Cpath d='M922 150v-54M922 96l52 18-52 18z' fill='%23c95f41' stroke='%23634b35' stroke-width='5'/%3E%3Cg fill='%237f817c'%3E%3Cellipse cx='172' cy='530' rx='42' ry='20'/%3E%3Cellipse cx='724' cy='460' rx='36' ry='18'/%3E%3Cellipse cx='1008' cy='394' rx='28' ry='14'/%3E%3C/g%3E%3Cpath d='M96 122 C156 78 220 132 258 104 C310 66 370 104 390 128' fill='none' stroke='%23fff8e8' stroke-width='28' stroke-linecap='round'/%3E%3Cpath d='M742 84 C808 40 866 92 914 64 C960 38 1020 68 1050 92' fill='none' stroke='%23fff8e8' stroke-width='28' stroke-linecap='round'/%3E%3Cpath d='M1060 92c16 6 30 9 46 0M1082 88l10-16M1088 90l18-12' stroke='%233b4c45' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E") center / cover no-repeat,
    linear-gradient(180deg, #a8d7d9, #877a61);
}

.research-theme .storybook-trail::before {
  background: none;
}

.research-theme .storybook-trail::after {
  background:
    radial-gradient(ellipse at 14% 18%, rgba(255, 250, 240, .92) 0 34px, transparent 35px),
    radial-gradient(ellipse at 22% 20%, rgba(255, 250, 240, .9) 0 28px, transparent 29px),
    radial-gradient(ellipse at 74% 13%, rgba(255, 250, 240, .9) 0 36px, transparent 37px),
    radial-gradient(ellipse at 84% 15%, rgba(255, 250, 240, .86) 0 26px, transparent 27px);
  background-size: 520px 200px, 520px 200px, 520px 200px, 520px 200px;
  animation: mountainClouds 16s ease-in-out infinite alternate;
}

.rights-theme .storybook-trail {
  background:
    url("data:image/svg+xml,%3Csvg viewBox='0 0 1200 620' preserveAspectRatio='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cdefs%3E%3ClinearGradient id='sky' x1='0' x2='0' y1='0' y2='1'%3E%3Cstop stop-color='%23cfe8d3'/%3E%3Cstop offset='.7' stop-color='%23f4dfbd'/%3E%3Cstop offset='1' stop-color='%2390bf7b'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect width='1200' height='620' fill='url(%23sky)'/%3E%3Cpath d='M0 412 C150 360 278 420 420 376 S724 326 1200 384 L1200 620 L0 620z' fill='%238ec46f'/%3E%3Cpath d='M0 510 C170 458 320 548 500 504 S864 462 1200 520 L1200 620 L0 620z' fill='%236fa858'/%3E%3Cpath d='M120 416 C246 336 348 468 506 408 C674 344 786 460 1034 398' fill='none' stroke='%237b5a3b' stroke-width='34' stroke-linecap='round'/%3E%3Cpath d='M120 416 C246 336 348 468 506 408 C674 344 786 460 1034 398' fill='none' stroke='%23e7c779' stroke-width='20' stroke-linecap='round'/%3E%3Cg stroke='%235e4936' stroke-width='6'%3E%3Cpath d='M220 330h118v92H220z' fill='%23ffe4a7'/%3E%3Cpath d='M206 330l74-56 74 56z' fill='%23ca8067'/%3E%3Cpath d='M510 292h150v116H510z' fill='%23f6f0d6'/%3E%3Cpath d='M492 292l94-68 94 68z' fill='%237fa0b5'/%3E%3Cpath d='M812 340h128v86H812z' fill='%23f7d8a4'/%3E%3Cpath d='M796 340l78-56 78 56z' fill='%23b86e63'/%3E%3C/g%3E%3Cpath d='M586 344 C620 320 662 328 682 362 C648 386 612 382 586 344z' fill='%2358aeca'/%3E%3Cpath d='M606 352 C628 340 654 344 666 360' fill='none' stroke='%23d9fbff' stroke-width='5' stroke-linecap='round'/%3E%3Cg fill='%23f5a3b2'%3E%3Ccircle cx='170' cy='474' r='5'/%3E%3Ccircle cx='190' cy='500' r='4'/%3E%3Ccircle cx='746' cy='492' r='5'/%3E%3Ccircle cx='972' cy='476' r='4'/%3E%3C/g%3E%3Cg fill='%2357894d'%3E%3Ccircle cx='116' cy='318' r='48'/%3E%3Ccircle cx='1010' cy='310' r='54'/%3E%3Ccircle cx='384' cy='278' r='34'/%3E%3C/g%3E%3Cg stroke='%23644934' stroke-width='8' stroke-linecap='round'%3E%3Cpath d='M116 356v72M1010 356v78M384 306v56'/%3E%3C/g%3E%3Cpath d='M350 446h86M360 430h68' stroke='%23644934' stroke-width='8' stroke-linecap='round'/%3E%3C/svg%3E") center / cover no-repeat,
    linear-gradient(180deg, #cfe8d3, #90bf7b);
}

.rights-theme .storybook-trail::before {
  background: none;
}

.rights-theme .storybook-trail::after {
  background:
    radial-gradient(circle, rgba(245, 163, 178, .9) 0 4px, transparent 5px),
    radial-gradient(circle, rgba(255, 243, 161, .75) 0 3px, transparent 4px),
    linear-gradient(90deg, transparent, rgba(217, 251, 255, .24), transparent);
  background-size: 180px 160px, 260px 220px, 100% 100%;
  animation: springPetals 13s ease-in-out infinite alternate;
}

@media (min-width: 761px) {
  .patient-theme .trail-node:nth-child(1) { top: 72px; left: 8%; }
  .patient-theme .trail-node:nth-child(2) { top: 310px; left: 25%; }
  .patient-theme .trail-node:nth-child(3) { top: 270px; left: 47%; }
  .patient-theme .trail-node:nth-child(4) { top: 96px; left: 64%; }
  .patient-theme .trail-node:nth-child(5) { top: 420px; left: 82%; }
  .patient-theme .trail-node:nth-child(6) { top: 490px; left: 28%; }

  .research-theme .trail-node:nth-child(1) { top: 396px; left: 12%; }
  .research-theme .trail-node:nth-child(2) { top: 298px; left: 34%; }
  .research-theme .trail-node:nth-child(3) { top: 206px; left: 54%; }
  .research-theme .trail-node:nth-child(4) { top: 82px; left: 76%; }

  .rights-theme .trail-node:nth-child(1) { top: 340px; left: 12%; }
  .rights-theme .trail-node:nth-child(2) { top: 250px; left: 32%; }
  .rights-theme .trail-node:nth-child(3) { top: 360px; left: 50%; }
  .rights-theme .trail-node:nth-child(4) { top: 210px; left: 66%; }
  .rights-theme .trail-node:nth-child(5) { top: 344px; left: 82%; }
}

@keyframes jungleAmbient {
  from { background-position: 0 0, 20px 0, 60px 10px, 0 0, 0 0; transform: translate3d(-6px, -4px, 0); }
  to { background-position: 90px 120px, -60px 90px, 120px 140px, -80px 60px, 22px 0; transform: translate3d(8px, 5px, 0); }
}

@keyframes mountainClouds {
  from { background-position: -20px 0, 30px 8px, 0 0, 30px 0; }
  to { background-position: 70px 8px, 120px 0, -80px 8px, -30px 0; }
}

@keyframes springPetals {
  from { background-position: 0 0, 40px 0, 0 0; transform: translateY(-4px); }
  to { background-position: 80px 120px, -60px 90px, 20px 0; transform: translateY(5px); }
}

@media (prefers-reduced-motion: reduce) {
  .patient-theme .storybook-trail::after,
  .research-theme .storybook-trail::after,
  .rights-theme .storybook-trail::after {
    animation: none;
  }
}

@keyframes waterShimmer {
  from {
    opacity: 0.35;
    transform: translateX(-1%);
  }
  to {
    opacity: 0.75;
    transform: translateX(1%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .storybook-trail::after,
  .site-ambient-leaves span {
    animation: none;
  }
}

@media print {
  .site-header,
  .site-footer,
  .site-ambient-leaves,
  .compact-hero,
  body[data-page="family"] .card-grid,
  .family-packet-card > label,
  .family-autocomplete-list,
  .packet-tabs,
  .hero-actions,
  .copy-status {
    display: none !important;
  }

  body {
    background: #fff;
    color: #111;
  }

  .page-shell {
    width: 100%;
    padding: 0;
  }

  .family-summary-card,
  .selected-trial-card,
  .family-summary-output section,
  .progress-card {
    border: 1px solid #bbb;
    box-shadow: none;
    break-inside: avoid;
  }

  .family-summary-output {
    display: block;
  }

  .family-summary-output section {
    margin: 0 0 12px;
  }
}

/* Home timeline: dotted trail line with clickable stage nodes. */
.trail-section {
  display: grid;
  grid-template-columns: 0.72fr 1.28fr;
  gap: 30px;
  align-items: start;
}

.timeline-widget {
  position: relative;
  display: grid;
  gap: 22px;
  padding: 34px 0 34px 54px;
}

.timeline-widget::before {
  position: absolute;
  top: 48px;
  bottom: 48px;
  left: 24px;
  width: 42px;
  border-left: 4px dotted rgba(127, 161, 47, 0.58);
  border-radius: 55% 0 0 45%;
  transform: skewY(-10deg);
  content: "";
}

.timeline-step {
  position: relative;
  width: min(540px, 100%);
  margin-left: calc((var(--step-index) % 2) * 44px);
}

.timeline-step::before {
  position: absolute;
  top: 11px;
  left: -48px;
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  border: 4px solid var(--cream);
  border-radius: 50%;
  background: var(--pear);
  box-shadow: 0 0 0 1px rgba(38, 63, 36, 0.12), 0 10px 20px rgba(38, 63, 36, 0.12);
  color: var(--olive);
  content: "•";
  font-weight: 900;
}

.timeline-step button,
.expandable-card button {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255, 250, 240, 0.88);
  backdrop-filter: blur(8px);
  box-shadow: 0 10px 24px rgba(38, 63, 36, 0.08);
  color: var(--olive);
  cursor: pointer;
  font-weight: 900;
  padding: 14px 18px;
  text-align: left;
}

.expandable-card p {
  display: none;
  margin: 0;
  border-top: 1px solid var(--line);
  color: var(--muted);
  padding: 0 18px 18px;
}

.expandable-card.open p {
  display: block;
}

.timeline-step p {
  display: none;
  max-width: 460px;
  margin: 12px 0 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 250, 240, 0.88);
  backdrop-filter: blur(8px);
  box-shadow: var(--shadow);
  color: var(--muted);
  padding: 16px;
}

.timeline-step.open p {
  display: block;
}

.search-panel {
  display: grid;
  position: relative;
  grid-template-columns: minmax(0, 0.95fr) minmax(320px, 0.75fr);
  gap: 14px;
  align-items: start;
  padding: 24px;
}

.search-primary-section,
.search-secondary-section {
  display: grid;
  gap: 14px;
  align-content: start;
}

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

.search-primary-section > div,
.search-secondary-section > div,
.search-secondary-section .wide-search-label,
.search-secondary-section .explore-suggestions,
.search-secondary-section .advanced-toggle,
.search-secondary-section .advanced-search-drawer {
  grid-column: 1 / -1;
}

.search-secondary-section {
  border: 1px solid rgba(38, 63, 36, 0.1);
  border-radius: 8px;
  background: rgba(255, 250, 240, 0.62);
  padding: 18px;
}

.explore-notice {
  display: grid;
  gap: 6px;
  margin-bottom: 22px;
  border: 1px solid rgba(127, 161, 47, 0.28);
  border-left: 6px solid var(--pear);
  border-radius: 8px;
  background: rgba(255, 250, 240, 0.82);
  box-shadow: 0 10px 24px rgba(38, 63, 36, 0.07);
  padding: 18px 20px;
}

.explore-notice strong {
  color: var(--olive);
  font-size: 1.05rem;
}

.explore-notice p {
  max-width: 880px;
  margin: 0;
  color: var(--muted);
}

.wide-search-label,
.explore-suggestions {
  grid-column: 1 / -1;
}

.search-panel p {
  grid-column: 1 / -1;
  margin: 0;
  color: var(--muted);
}

.explore-suggestions {
  display: grid;
  max-height: 300px;
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--cream-2);
  box-shadow: var(--shadow);
}

.explore-suggestions[hidden] {
  display: none;
}

.explore-suggestions button {
  border: 0;
  border-bottom: 1px solid var(--line);
  background: transparent;
  color: var(--olive);
  cursor: pointer;
  padding: 13px 15px;
  text-align: left;
}

.explore-suggestions button:hover,
.explore-suggestions button:focus-visible {
  background: rgba(169, 201, 90, 0.16);
  outline: none;
}

.explore-suggestions strong,
.explore-suggestions span {
  display: block;
}

.explore-suggestions span {
  margin-top: 3px;
  color: var(--muted);
  font-size: 0.86rem;
  font-weight: 800;
}

.advanced-toggle {
  align-self: end;
}

.advanced-search-drawer {
  grid-column: 1 / -1;
  display: none;
  margin-bottom: 4px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(244, 238, 223, 0.54);
  padding: 12px 14px;
}

.advanced-search-drawer[open] {
  display: block;
}

.search-trials-button {
  min-height: 52px;
  justify-self: start;
}

.advanced-search-drawer > summary {
  display: none;
}

.advanced-search-drawer summary,
.advanced-details-drawer summary {
  color: var(--olive);
  cursor: pointer;
  font-weight: 900;
}

.advanced-filter-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin-top: 14px;
}

.advanced-filter-actions {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: flex-end;
}

.field-help-icon {
  display: inline-grid;
  width: 22px;
  height: 22px;
  margin-left: 6px;
  place-items: center;
  border: 1px solid rgba(38, 63, 36, 0.24);
  border-radius: 50%;
  background: rgba(169, 201, 90, 0.18);
  color: var(--olive);
  cursor: help;
  font-size: 0.8rem;
  font-weight: 950;
}

.field-help-icon:focus-visible {
  outline: 3px solid rgba(169, 201, 90, 0.42);
  outline-offset: 3px;
}

.year-filter-group {
  display: grid;
  gap: 9px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 250, 240, 0.68);
  margin: 0;
  padding: 14px;
}

.year-filter-group legend {
  color: var(--olive);
  font-weight: 900;
  padding: 0 5px;
}

.year-filter-group label {
  display: flex;
  align-items: center;
  gap: 9px;
  border-radius: 8px;
  cursor: pointer;
  padding: 4px 6px;
}

.year-filter-group label:hover,
.year-filter-group label:focus-within {
  background: rgba(169, 201, 90, 0.14);
}

.year-filter-group input {
  width: auto;
  margin: 0;
}

.advanced-filter-note {
  align-self: end;
  border-left: 5px solid var(--pear);
  border-radius: 8px;
  background: rgba(169, 201, 90, 0.14);
  color: var(--olive);
  font-weight: 850;
  padding: 12px 14px;
}

label {
  color: var(--olive);
  font-weight: 850;
}

input,
select,
textarea {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fffdf7;
  color: var(--ink);
  margin-top: 7px;
  padding: 12px 14px;
}

.cancer-explainer {
  display: grid;
  gap: 18px;
  margin: 24px 0;
}

.cancer-intro {
  padding: clamp(22px, 4vw, 34px);
}

.cancer-intro h3 {
  margin: 0 0 10px;
  font-size: clamp(2rem, 4vw, 3rem);
}

.cancer-intro p:not(.eyebrow) {
  max-width: 720px;
  color: var(--olive-2);
}

.cancer-intro span,
.trial-status span,
.learn-more,
.trial-card-meta span {
  display: inline-flex;
  border-radius: 999px;
  background: rgba(169, 201, 90, 0.22);
  color: var(--olive);
  font-size: 0.86rem;
  font-weight: 900;
  padding: 6px 10px;
}

.cancer-card-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.cancer-info-card {
  display: grid;
  min-height: 170px;
  gap: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--cream-2);
  box-shadow: 0 10px 24px rgba(38, 63, 36, 0.08);
  color: var(--olive);
  cursor: pointer;
  padding: 20px;
  text-align: left;
}

.cancer-info-card.active {
  background: rgba(169, 201, 90, 0.16);
  border-color: rgba(127, 161, 47, 0.72);
}

.cancer-info-card small {
  color: var(--muted);
  font-size: 0.95rem;
}

.cancer-detail-panel {
  display: grid;
  gap: 16px;
  border-left: 6px solid var(--pear);
  padding: clamp(22px, 4vw, 30px);
}

.trial-status {
  min-height: 1.5em;
  color: var(--olive);
  font-weight: 900;
}

.trial-status span {
  display: block;
  width: fit-content;
  margin-top: 6px;
}

.trial-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.trial-card {
  display: grid;
  position: relative;
  min-height: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--cream-2);
  box-shadow: 0 10px 24px rgba(38, 63, 36, 0.08);
  overflow: hidden;
}

body[data-page="explore"].trial-detail-open #trialGrid,
body[data-page="explore"].trial-detail-open #olderTrialsDrawer,
body[data-page="explore"].trial-detail-open #trialResultsHeading,
body[data-page="explore"].trial-detail-open #trialIconLegend {
  display: none;
}

body[data-page="explore"].trial-detail-open #trialDetailPanel {
  display: block;
}

.trial-card-content {
  display: grid;
  grid-template-rows: auto auto auto 1fr auto;
  gap: 12px;
  width: 100%;
  height: 100%;
  border: 0;
  background: transparent;
  color: inherit;
  padding: 52px 24px 24px;
  text-align: left;
}

.trial-card-content h3 {
  margin: 0;
  overflow-wrap: anywhere;
  line-height: 1.18;
}

.trial-card-content p {
  margin: 0;
  color: var(--muted);
}

.official-title {
  font-size: 0.9rem;
  line-height: 1.55;
}

.trial-card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

.trial-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.trial-card-meta .location-pill {
  max-width: 100%;
  overflow: visible;
  font-size: 0.78rem;
  overflow-wrap: anywhere;
  white-space: normal;
}

.phase-progress {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 4px;
}

.phase-progress span {
  display: grid;
  min-height: 54px;
  align-content: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(244, 238, 223, 0.68);
  color: var(--muted);
  padding: 7px;
}

.phase-progress span.active {
  border-color: rgba(127, 161, 47, 0.7);
  background: rgba(169, 201, 90, 0.18);
  color: var(--olive);
}

.phase-progress strong {
  font-size: 0.75rem;
  line-height: 1.1;
}

.phase-progress small {
  display: block;
  font-size: 0.68rem;
  line-height: 1.1;
}

.older-trials-drawer {
  margin-top: 22px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(244, 238, 223, 0.56);
  padding: 16px;
}

.older-trials-drawer summary {
  color: var(--olive);
  cursor: pointer;
  font-weight: 900;
}

.older-trials-drawer > p {
  color: var(--muted);
  font-weight: 800;
}

.older-trial-card {
  opacity: 0.92;
}

.trial-card-facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin: 0;
}

.trial-card-facts div {
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(244, 238, 223, 0.48);
  padding: 8px;
}

.trial-card-facts dt,
.detail-fact-grid span {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 900;
  text-transform: uppercase;
}

.trial-card-facts dd {
  display: -webkit-box;
  margin: 2px 0 0;
  overflow: hidden;
  color: var(--olive);
  font-size: 0.84rem;
  font-weight: 850;
  line-height: 1.25;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.learn-more {
  justify-self: start;
  background: var(--pear);
}

.save-trial-button {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid rgba(38, 63, 36, 0.18);
  border-radius: 999px;
  background: rgba(255, 250, 240, 0.94);
  box-shadow: 0 8px 18px rgba(38, 63, 36, 0.12);
  color: var(--olive);
  cursor: pointer;
  font-size: 0.82rem;
  font-weight: 900;
  padding: 7px 10px;
}

.save-trial-button.saved {
  background: rgba(169, 201, 90, 0.3);
  border-color: rgba(127, 161, 47, 0.58);
}

.save-trial-button:hover,
.save-trial-button:focus-visible {
  border-color: rgba(127, 161, 47, 0.62);
  background: rgba(169, 201, 90, 0.22);
  outline: none;
  transform: translateY(-1px);
}

.detail-actions .save-trial-button,
.trial-match-card .save-trial-button {
  position: static;
  width: fit-content;
}

.official-card-link {
  display: block;
  border-top: 1px solid var(--line);
  color: var(--olive);
  font-size: 0.9rem;
  font-weight: 900;
  padding: 12px 24px 16px;
  text-decoration: none;
}

.advanced-details-drawer {
  margin-top: 18px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(244, 238, 223, 0.48);
  padding: 18px;
}

.advanced-note {
  color: var(--muted);
  font-weight: 800;
}

.official-card-link:hover,
.official-card-link:focus-visible {
  background: rgba(169, 201, 90, 0.16);
  outline: none;
}

.trial-detail-panel {
  margin-top: 28px;
  border: 1px solid rgba(38, 63, 36, 0.18);
  border-radius: 8px;
  background: rgba(255, 250, 240, 0.86);
  box-shadow: 0 20px 44px rgba(38, 63, 36, 0.12);
  padding: clamp(26px, 5vw, 48px);
}

.detail-panel-header {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 20px;
  border-bottom: 1px solid var(--line);
  padding-bottom: 22px;
}

.detail-panel-header h3 {
  margin: 0;
  font-size: clamp(1.5rem, 3vw, 2.25rem);
}

.detail-panel-header p {
  max-width: 760px;
  color: var(--muted);
  font-weight: 800;
}

.detail-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: flex-end;
}

.detail-fact-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
  margin-top: 20px;
}

.detail-fact-grid div {
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(244, 238, 223, 0.48);
  padding: 12px;
}

.detail-fact-grid strong {
  display: block;
  margin-top: 4px;
  overflow-wrap: anywhere;
  color: var(--olive);
  font-size: 0.95rem;
}

.trial-detail-panel > .phase-progress {
  margin-top: 16px;
}

.treatment-progress-section {
  margin-top: 36px;
}

.progress-vector-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.progress-vector-card {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--cream-2);
  box-shadow: var(--shadow);
  padding: 20px;
}

.progress-vector-card h3 {
  margin: 0;
}

.progress-vector-card p {
  color: var(--muted);
}

.treatment-progress-bar {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 5px;
  margin-top: 14px;
}

.treatment-progress-bar span {
  min-height: 58px;
  border: 1px dashed var(--line);
  border-radius: 8px;
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 850;
  padding: 7px;
}

.flag-icon-button,
.flag-close {
  display: inline-grid;
  min-width: 42px;
  min-height: 42px;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255, 250, 240, 0.88);
  color: var(--olive);
  cursor: pointer;
  font-size: 0.84rem;
  font-weight: 900;
  line-height: 1;
  padding: 0 14px;
}

.flag-close {
  width: 42px;
  height: 42px;
  padding: 0;
  border-radius: 50%;
  font-size: 1.05rem;
}

.flag-icon-button:hover,
.flag-icon-button:focus-visible,
.flag-close:hover,
.flag-close:focus-visible {
  background: rgba(169, 201, 90, 0.22);
  outline: 3px solid rgba(169, 201, 90, 0.34);
}

.patient-detail-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  margin-top: 28px;
}

.patient-detail-grid section,
.doctor-questions,
.prior-research-card,
.official-details,
.feedback-card,
.glossary-card {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(244, 238, 223, 0.48);
  padding: clamp(20px, 3vw, 28px);
}

.patient-detail-grid p,
.doctor-questions li,
.prior-research-card p,
.official-details p,
.glossary-card p {
  color: var(--muted);
  line-height: 1.78;
}

.doctor-questions,
.prior-research-card,
.official-details,
.feedback-card {
  margin-top: 20px;
}

.prior-research-card {
  display: grid;
  gap: 10px;
  border-left: 6px solid var(--pear);
}

.prior-research-card h4,
.prior-research-card p {
  margin: 0;
}

.official-details summary {
  color: var(--olive);
  cursor: pointer;
  font-weight: 900;
}

.meta-list {
  display: grid;
  gap: 8px;
}

.meta-list div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid var(--line);
  padding-bottom: 8px;
}

.meta-list dd {
  margin: 0;
  color: var(--olive);
  font-weight: 850;
  text-align: right;
}

.matched-terms {
  display: grid;
  gap: 10px;
  padding: 0;
  list-style: none;
}

.matched-terms li {
  display: grid;
  gap: 4px;
}

.flag-options,
.star-row,
.rating-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.flag-options label,
.star-row label,
.rating-row label {
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--cream-2);
  cursor: pointer;
  padding: 10px;
}

.flag-options label:hover,
.rating-row label:hover,
.flag-options label:focus-within,
.rating-row label:focus-within {
  border-color: rgba(127, 161, 47, 0.56);
  background: rgba(169, 201, 90, 0.16);
  box-shadow: 0 0 0 3px rgba(169, 201, 90, 0.16);
}

.star-row {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

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

.copy-status {
  min-height: 1.4em;
  color: #6f9228;
  font-weight: 900;
}

.glossary-tools {
  display: grid;
  gap: 14px;
  margin-bottom: 26px;
  padding: clamp(18px, 3vw, 26px);
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(255, 250, 240, 0.72);
}

.glossary-accessibility-controls {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 220px));
  gap: 12px;
}

.glossary-filter-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
}

.glossary-result-count,
.glossary-search-note {
  margin: 0;
  color: var(--muted);
  line-height: 1.6;
}

.glossary-search-note:empty {
  display: none;
}

.glossary-reset-button {
  min-height: 40px;
}

.home-cancer-select {
  display: grid;
  gap: 6px;
  max-width: 320px;
  margin: 0 auto 18px;
  color: var(--olive);
  font-weight: 900;
}

.home-cancer-explainer {
  max-width: 980px;
  margin-inline: auto;
}

.search-trials-button {
  align-self: end;
  min-height: 48px;
}

.filter-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

#glossaryFilters[hidden] {
  display: none;
}

.filter-row button {
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--cream-2);
  color: var(--olive);
  cursor: pointer;
  font-weight: 850;
  padding: 8px 12px;
}

.filter-row button.active {
  background: var(--pear);
}

.glossary-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}

.glossary-card {
  display: grid;
  gap: 14px;
  min-height: 250px;
  padding: 24px;
  background: rgba(255, 250, 240, 0.72);
  transition: border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}

.glossary-category {
  width: fit-content;
  color: var(--olive);
  font-size: 0.78rem;
  font-weight: 850;
}

.glossary-card-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.glossary-match-badge {
  width: fit-content;
  border-radius: 999px;
  border: 1px solid rgba(111, 146, 40, 0.22);
  background: rgba(238, 244, 220, 0.72);
  color: var(--olive);
  font-size: 0.72rem;
  font-weight: 850;
  padding: 4px 9px;
}

.glossary-match-badge.related,
.glossary-match-badge.broader {
  background: rgba(244, 238, 223, 0.8);
  color: var(--muted);
}

.glossary-match-badge.english-only {
  background: rgba(255, 250, 240, 0.9);
  color: #806a32;
}

.glossary-click-card {
  cursor: pointer;
}

.glossary-click-card:hover,
.glossary-click-card:focus-visible {
  border-color: rgba(111, 146, 40, 0.52);
  box-shadow: 0 16px 32px rgba(38, 63, 36, 0.12);
  transform: translateY(-2px);
}

.glossary-card > p {
  line-height: 1.72;
  margin: 0;
}

.card-title-row {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 14px;
}

.card-title-row h3 {
  margin: 0;
}

.glossary-card details {
  margin-top: auto;
}

.glossary-open-action {
  align-self: end;
  color: var(--olive);
  font-weight: 900;
}

.glossary-report-link {
  text-decoration: none;
}

.family-summary-output {
  display: grid;
  gap: 14px;
  margin-top: 18px;
}

.family-packet-card {
  gap: 16px;
}

.family-packet-card > p {
  max-width: 760px;
  color: var(--muted);
}

.recent-trial-list {
  display: grid;
  gap: 10px;
  margin: 14px 0;
}

.family-autocomplete-list {
  max-height: 320px;
  overflow: auto;
  border-radius: 8px;
}

.recent-trial-list button,
.selected-trial-card {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(244, 238, 223, 0.56);
  color: var(--olive);
  padding: 14px;
  text-align: left;
}

.recent-trial-list button {
  cursor: pointer;
}

.recent-trial-list button:hover,
.recent-trial-list button:focus-visible {
  border-color: rgba(127, 161, 47, 0.72);
  background: rgba(169, 201, 90, 0.16);
  outline: 3px solid rgba(169, 201, 90, 0.22);
  outline-offset: 2px;
}

.recent-trial-list span {
  display: block;
  color: var(--muted);
  font-size: 0.9rem;
  margin-top: 4px;
}

.selected-trial-card {
  margin: 16px 0;
}

.selected-trial-card dd {
  max-width: min(58ch, 68%);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.packet-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
}

.packet-tabs button {
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255, 250, 240, 0.82);
  color: var(--olive);
  cursor: pointer;
  font-size: 0.9rem;
  font-weight: 900;
  padding: 9px 13px;
}

.packet-tabs button.active,
.packet-tabs button:hover,
.packet-tabs button:focus-visible {
  border-color: rgba(127, 161, 47, 0.7);
  background: var(--pear);
  outline: none;
}

.family-summary-output section {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(244, 238, 223, 0.48);
  padding: 16px;
}

.family-summary-output h3 {
  margin: 0 0 8px;
  font-size: 1rem;
}

.family-summary-output p,
.family-summary-output ul {
  margin: 0;
  color: var(--muted);
}

.summary-note {
  border-left: 5px solid var(--pear);
  border-radius: 8px;
  background: rgba(169, 201, 90, 0.16);
  color: var(--olive) !important;
  font-weight: 850;
  padding: 14px 16px;
}

.packet-progress-section,
.trial-progress-detail {
  display: grid;
  gap: 12px;
}

.packet-progress-section h3 {
  display: flex;
  align-items: center;
  gap: 8px;
}

.trial-progress-detail {
  margin-top: 18px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(244, 238, 223, 0.5);
  padding: 18px;
}

.progress-card {
  display: grid;
  gap: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 250, 240, 0.72);
  padding: 14px;
}

.progress-card-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  color: var(--olive);
}

.progress-card-header span {
  border-radius: 999px;
  background: rgba(169, 201, 90, 0.18);
  color: var(--olive);
  font-size: 0.8rem;
  font-weight: 900;
  padding: 5px 9px;
}

.packet-progress-bar {
  display: grid;
  grid-template-columns: repeat(var(--progress-stages, 6), minmax(0, 1fr));
  gap: 5px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(38, 63, 36, 0.08);
  padding: 5px;
}

.packet-progress-bar span {
  display: grid;
  min-height: 34px;
  place-items: center;
  border: 0;
  border-radius: 999px;
  background: rgba(244, 238, 223, 0.62);
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 850;
  line-height: 1.15;
  padding: 7px;
  text-align: center;
}

.packet-progress-bar span.active {
  background: linear-gradient(180deg, #b7d56a, var(--pear));
  color: var(--olive);
}

.progress-interpretation {
  color: var(--olive);
}

.info-tooltip {
  position: relative;
  display: inline-grid;
  width: 24px;
  height: 24px;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: rgba(255, 250, 240, 0.92);
  color: var(--olive);
  cursor: help;
  font-size: 0.8rem;
  font-weight: 900;
}

.info-tooltip span {
  position: absolute;
  z-index: 8;
  bottom: calc(100% + 8px);
  left: 50%;
  display: none;
  width: min(260px, 72vw);
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--cream-2);
  box-shadow: var(--shadow);
  color: var(--olive);
  font-size: 0.82rem;
  line-height: 1.35;
  padding: 10px;
  transform: translateX(-50%);
}

.info-tooltip:hover span,
.info-tooltip:focus-visible span {
  display: block;
}

.feedback-page-form,
.flag-modal-card {
  width: min(760px, 100%);
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--cream-2);
  box-shadow: var(--shadow);
  padding: clamp(22px, 4vw, 34px);
}

.feedback-page-form {
  display: grid;
  gap: 18px;
  margin: 0 auto;
}

.feedback-context-card,
.feedback-medical-notice {
  display: grid;
  gap: 8px;
  border: 1px solid rgba(127, 161, 47, 0.26);
  border-radius: 8px;
  background: rgba(169, 201, 90, 0.14);
  color: var(--olive);
  padding: 14px;
}

.feedback-context-card[hidden],
.feedback-medical-notice[hidden] {
  display: none;
}

.feedback-context-card ul {
  display: grid;
  gap: 4px;
  margin: 0;
  padding-left: 20px;
}

.feedback-context-card p,
.feedback-medical-notice p {
  margin: 0;
  color: var(--muted);
}

fieldset {
  border: 0;
  margin: 0;
  padding: 0;
}

legend {
  color: var(--olive);
  font-weight: 850;
  margin-bottom: 8px;
}

.flag-modal[hidden] {
  display: none;
}

.flag-modal,
.info-drawer {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  padding: 20px;
}

.info-drawer[hidden] {
  display: none;
}

.flag-modal-backdrop,
.info-drawer-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(38, 63, 36, 0.42);
  backdrop-filter: blur(4px);
}

.flag-modal-card,
.info-drawer-panel {
  position: relative;
  z-index: 1;
}

.info-drawer-body p {
  white-space: pre-line;
}

.info-drawer {
  justify-items: end;
  padding: 0;
  overflow-x: hidden;
}

.info-drawer-panel {
  width: min(520px, 100%);
  max-width: 100vw;
  height: 100%;
  overflow: auto;
  overflow-x: hidden;
  border-left: 1px solid var(--line);
  background: var(--cream-2);
  box-shadow: -24px 0 44px rgba(38, 63, 36, 0.16);
  padding: clamp(22px, 4vw, 34px);
}

.info-drawer-panel:focus {
  outline: 3px solid rgba(169, 201, 90, 0.42);
  outline-offset: -6px;
}

.info-drawer-body {
  display: grid;
  gap: 20px;
  margin-top: 24px;
}

.info-drawer-body section {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(244, 238, 223, 0.5);
  padding: 22px;
}

.info-drawer-body h3,
.info-drawer-body p {
  margin: 0;
}

.info-drawer-body p {
  color: var(--muted);
  line-height: 1.75;
}

.drawer-flag-row {
  display: flex;
  justify-content: flex-end;
}

.glossary-drawer-controls {
  display: grid;
  gap: 16px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(255, 250, 240, 0.68);
  padding: 18px;
}

.drawer-control-group {
  border: 0;
  margin: 0;
  padding: 0;
}

.drawer-control-group legend,
.drawer-language-control {
  color: var(--olive);
  font-weight: 900;
}

.segmented-control {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}

.segmented-control label {
  cursor: pointer;
}

.segmented-control input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.segmented-control span {
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--cream-2);
  color: var(--olive);
  font-weight: 850;
  padding: 8px 12px;
  transition: background 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}

.segmented-control label:hover span,
.segmented-control input:focus-visible + span {
  border-color: rgba(111, 146, 40, 0.5);
  box-shadow: 0 0 0 4px rgba(169, 201, 90, 0.22);
}

.segmented-control input:checked + span {
  background: var(--pear);
  border-color: rgba(111, 146, 40, 0.42);
}

.drawer-language-control {
  display: grid;
  gap: 8px;
  max-width: 280px;
}

.drawer-language-note {
  border-left: 4px solid var(--pear);
  border-radius: 8px;
  background: rgba(238, 244, 220, 0.72);
  color: var(--olive) !important;
  padding: 14px 16px;
}

.related-terms {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.related-term-button,
.related-term-static {
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--cream-2);
  color: var(--olive);
  font-weight: 850;
  padding: 8px 12px;
}

.related-term-button {
  cursor: pointer;
}

.related-term-button:hover,
.related-term-button:focus-visible {
  border-color: rgba(111, 146, 40, 0.5);
  box-shadow: 0 0 0 4px rgba(169, 201, 90, 0.22);
}

.related-term-static {
  color: var(--muted);
}

.glossary-source-meta strong {
  color: var(--olive);
}

.flag-feedback-form {
  display: grid;
  gap: 16px;
  margin-top: 18px;
}

.about-stack {
  display: grid;
  gap: 16px;
  max-width: 900px;
}

.understanding-check {
  max-width: 980px;
}

.understanding-list {
  display: grid;
  gap: 20px;
  margin-top: 28px;
}

.understanding-card {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 250, 240, 0.76);
  box-shadow: 0 12px 26px rgba(38, 63, 36, 0.08);
  padding: clamp(20px, 4vw, 28px);
}

.understanding-card h3 {
  margin: 0 0 16px;
  font-size: clamp(1.1rem, 2vw, 1.35rem);
}

.understanding-options {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.understanding-options button {
  min-height: 46px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--cream-2);
  color: var(--olive);
  cursor: pointer;
  font: inherit;
  font-weight: 800;
  padding: 10px 14px;
  text-align: left;
}

.understanding-options button:hover,
.understanding-options button:focus-visible,
.understanding-options button.selected {
  border-color: var(--olive);
  background: rgba(169, 201, 90, 0.32);
  outline: 3px solid rgba(169, 201, 90, 0.28);
  outline-offset: 3px;
}

.understanding-feedback {
  min-height: 1.5em;
  margin: 16px 0 0;
  color: var(--olive-2);
  line-height: 1.6;
}

.understanding-feedback.correct,
.understanding-feedback.review {
  border-left: 4px solid var(--pear);
  padding-left: 12px;
}

.site-footer {
  display: grid;
  gap: 8px;
  background: var(--olive);
  color: var(--cream-2);
  padding: 34px clamp(18px, 5vw, 72px);
}

.site-footer p {
  margin: 0;
}

@media (max-width: 980px) {
  .section-grid.two-column,
  .trail-section,
  .detail-panel-header {
    grid-template-columns: 1fr;
    display: grid;
  }

  .card-grid.three,
  .card-grid.two,
  .card-grid.four,
  .research-card-grid,
  .path-option-grid,
  .support-guide-grid,
  .trial-grid,
  .glossary-grid,
  .patient-detail-grid,
  .detail-fact-grid,
  .progress-vector-grid,
  .advanced-filter-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

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

}

@media (max-width: 760px) {
  .understanding-options {
    display: grid;
  }

  .understanding-options button {
    width: 100%;
  }

  .site-header {
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 12px;
  }

  .brand {
    max-width: min(62vw, 230px);
  }

  .brand-logo {
    width: clamp(142px, 50vw, 220px);
    height: auto;
  }

  .nav-toggle {
    display: block;
    margin-left: auto;
  }

  .site-nav {
    position: absolute;
    top: calc(100% + 8px);
    right: 18px;
    left: 18px;
    display: none;
    flex-direction: column;
    align-items: stretch;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--cream-2);
    box-shadow: var(--shadow);
    padding: 10px;
  }

  .site-nav.open {
    display: flex;
  }

  body[data-page="home"] .site-header {
    background: rgba(244, 238, 223, 0.9);
  }

  .forest-hero {
    min-height: 100svh;
    padding-top: 82px;
  }

  .hero-photo {
    background-position: 61% center;
  }

  .hero-content {
    padding-top: 78px;
    padding-bottom: 140px;
  }

  .page-shell {
    padding: 44px 0;
  }

  .forest-hero .page-shell {
    padding-inline: 0;
  }

  .timeline-widget {
    padding-left: 34px;
  }

  .timeline-step {
    margin-left: 0;
  }

  .card-grid.three,
  .card-grid.two,
  .card-grid.four,
  .research-card-grid,
  .path-option-grid,
  .support-guide-grid,
  .trial-grid,
  .glossary-grid,
  .patient-detail-grid,
  .detail-fact-grid,
  .progress-vector-grid,
  .advanced-filter-grid,
  .search-panel,
  .cancer-card-grid,
  .flag-options,
  .star-row {
    grid-template-columns: 1fr;
  }

  .founder-card {
    grid-template-columns: 1fr;
  }

  .founder-card img {
    max-width: 260px;
  }

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

  .treatment-progress-bar,
  .packet-progress-bar {
    grid-template-columns: 1fr;
  }

  h1 {
    font-size: 2.5rem;
  }

  .storybook-trail {
    grid-template-columns: 1fr;
    gap: 0;
    padding: 24px 0;
  }

  .patient-theme .storybook-trail {
    min-height: 680px;
    padding: 34px 0;
    background:
      url("data:image/svg+xml,%3Csvg viewBox='0 0 420 680' preserveAspectRatio='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cdefs%3E%3CradialGradient id='glow' cx='.2' cy='.06' r='.7'%3E%3Cstop stop-color='%23fffdf1' stop-opacity='.9'/%3E%3Cstop offset='.5' stop-color='%23f6dc93' stop-opacity='.35'/%3E%3Cstop offset='1' stop-color='%23f6dc93' stop-opacity='0'/%3E%3C/radialGradient%3E%3Cfilter id='fog'%3E%3CfeGaussianBlur stdDeviation='4'/%3E%3C/filter%3E%3C/defs%3E%3Crect width='420' height='680' fill='%23f4e6c5'/%3E%3Crect width='420' height='680' fill='url(%23glow)'/%3E%3Cpath d='M0 200 C74 142 126 224 190 168 C252 116 302 196 420 136 L420 330 L0 330z' fill='%23c8d5b3'/%3E%3Cpath d='M0 278 C82 222 144 298 222 240 C286 194 344 272 420 232 L420 424 L0 424z' fill='%238da66d' opacity='.86'/%3E%3Cpath d='M0 358 C70 314 132 378 216 330 C298 282 338 384 420 334 L420 560 L0 560z' fill='%235f874f'/%3E%3Cpath d='M0 480 C78 430 160 526 250 472 C326 426 372 498 420 470 L420 680 L0 680z' fill='%232e5939'/%3E%3Cpath d='M32 606 C130 552 228 650 384 586' fill='none' stroke='%235f9db2' stroke-width='25' stroke-linecap='round' opacity='.78'/%3E%3Cpath d='M56 604 C142 574 230 622 356 592' fill='none' stroke='%23d9fbff' stroke-width='5' stroke-linecap='round' opacity='.68'/%3E%3Cpath d='M0 328 C92 304 170 344 420 320' fill='none' stroke='%23fffaf0' stroke-opacity='.48' stroke-width='24' filter='url(%23fog)'/%3E%3Cpath d='M0 0 C26 138 28 300 14 680 L0 680zM420 0 C382 160 402 370 386 680 L420 680z' fill='%23213f2d' opacity='.58'/%3E%3Cpath d='M286 246 C310 226 340 230 360 252 C328 264 306 264 286 246z' fill='%2379776d'/%3E%3C/svg%3E") center / 100% 100% no-repeat,
      linear-gradient(180deg, #fff7df, #c7b98f);
  }

  .storybook-trail::before {
    top: 54px;
    right: auto;
    bottom: 54px;
    left: 18px;
    width: 32px;
    height: auto;
    background: url("data:image/svg+xml,%3Csvg viewBox='0 0 40 800' preserveAspectRatio='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20 8 C4 96 36 160 20 248 S4 400 20 492 S36 632 20 792' fill='none' stroke='%237fa12f' stroke-opacity='.52' stroke-width='7' stroke-linecap='round'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
  }

  .patient-theme .storybook-trail::before {
    top: 46px;
    right: auto;
    bottom: 46px;
    left: 48px;
    width: 54px;
    height: auto;
    background: url("data:image/svg+xml,%3Csvg viewBox='0 0 70 800' preserveAspectRatio='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M34 8 C8 88 58 164 30 246 S8 392 38 486 S58 642 28 792' fill='none' stroke='%23714d2e' stroke-opacity='.35' stroke-width='27' stroke-linecap='round'/%3E%3Cpath d='M34 8 C8 88 58 164 30 246 S8 392 38 486 S58 642 28 792' fill='none' stroke='%23b98345' stroke-width='20' stroke-linecap='round'/%3E%3Cpath d='M34 8 C8 88 58 164 30 246 S8 392 38 486 S58 642 28 792' fill='none' stroke='%23dfb46a' stroke-width='12' stroke-linecap='round'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
  }

  .trail-node {
    min-height: 92px;
    grid-template-columns: 100px 1fr;
    align-items: center;
    justify-items: start;
    padding: 0 0 0 0;
    text-align: left;
    transform: none !important;
  }

  .trail-node span {
    grid-column: 1;
    grid-row: 1 / span 2;
    width: 58px;
    height: 58px;
    margin-left: 18px;
    border-width: 5px;
  }

  .trail-node::before {
    top: 9px;
    left: 4px;
    width: 88px;
    height: 76px;
    margin: 0;
    opacity: 0.18;
  }

  .trail-node strong,
  .trail-node small {
    grid-column: 2;
    max-width: none;
  }

  .trail-node small {
    margin-top: -8px;
  }

  .info-drawer {
    align-items: end;
  }

  .info-drawer-panel {
    width: 100%;
    height: min(82svh, 720px);
    border-top-left-radius: 18px;
    border-top-right-radius: 18px;
    border-left: 0;
    box-shadow: 0 -20px 44px rgba(38, 63, 36, 0.18);
  }
}

@media (max-width: 760px) {
  body[data-page="learn"] .storybook-trail {
    position: relative;
    display: block;
    min-height: 680px;
    overflow: hidden;
    padding: 0;
  }

  body[data-page="learn"] .storybook-trail::before,
  body[data-page="learn"] .storybook-trail::after {
    inset: 0;
    width: auto;
    height: auto;
  }

  body[data-page="learn"] .trail-node {
    position: absolute;
    display: grid;
    width: 122px;
    min-height: 0;
    grid-template-columns: 1fr;
    justify-items: center;
    gap: 7px;
    padding: 0;
    text-align: center;
  }

  body[data-page="learn"] .trail-node span {
    grid-column: auto;
    grid-row: auto;
    width: 60px;
    height: 60px;
    margin-left: 0;
  }

  body[data-page="learn"] .trail-node strong {
    grid-column: auto;
    max-width: 116px;
    font-size: 0.84rem;
  }

  body[data-page="learn"] .trail-node small {
    display: none;
  }

  .patient-theme .storybook-trail {
    background:
      url("data:image/svg+xml,%3Csvg viewBox='0 0 420 680' preserveAspectRatio='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='420' height='680' fill='%23f8c875'/%3E%3Cpath d='M0 160 C74 86 154 170 228 102 C290 44 348 120 420 74 L420 310 L0 310z' fill='%2380bd62'/%3E%3Cpath d='M0 290 C86 224 150 320 230 260 C304 204 350 308 420 258 L420 506 L0 506z' fill='%234b964f'/%3E%3Cpath d='M0 424 C80 366 160 466 252 410 C326 364 372 456 420 420 L420 680 L0 680z' fill='%2329613e'/%3E%3Cpath d='M18 585 C104 510 226 650 396 552' fill='none' stroke='%23299fc4' stroke-width='36' stroke-linecap='round'/%3E%3Cpath d='M42 580 C118 540 226 612 370 560' fill='none' stroke='%239ce7f2' stroke-width='10' stroke-linecap='round'/%3E%3Cpath d='M0 0 C28 150 22 404 10 680 L0 680zM420 0 C382 164 402 388 384 680 L420 680z' fill='%231f4630' opacity='.72'/%3E%3Cpath d='M304 210 C330 188 358 192 380 220 C344 234 320 234 304 210z' fill='%237b8172'/%3E%3Ccircle cx='90' cy='540' r='5' fill='%23f8d55d'/%3E%3Ccircle cx='332' cy='558' r='4' fill='%23f6a7b8'/%3E%3C/svg%3E") center / cover no-repeat,
      linear-gradient(180deg, #f8c875, #29613e);
  }

  .patient-theme .storybook-trail::before {
    background: url("data:image/svg+xml,%3Csvg viewBox='0 0 420 680' preserveAspectRatio='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M60 86 C170 170 120 286 220 334 C302 374 242 508 350 594' fill='none' stroke='%23714d2e' stroke-opacity='.3' stroke-width='34' stroke-linecap='round'/%3E%3Cpath d='M60 86 C170 170 120 286 220 334 C302 374 242 508 350 594' fill='none' stroke='%23b98445' stroke-width='23' stroke-linecap='round'/%3E%3Cpath d='M60 86 C170 170 120 286 220 334 C302 374 242 508 350 594' fill='none' stroke='%23e7bb72' stroke-width='13' stroke-linecap='round'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
  }

  .research-theme .storybook-trail {
    min-height: 600px;
    background:
      url("data:image/svg+xml,%3Csvg viewBox='0 0 420 600' preserveAspectRatio='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='420' height='600' fill='%23a8d7d9'/%3E%3Cpath d='M0 270 L86 166 L142 226 L220 112 L286 228 L350 132 L420 228 L420 600 L0 600z' fill='%23e8dfc7'/%3E%3Cpath d='M0 350 C80 286 140 374 220 300 C300 226 336 360 420 300 L420 600 L0 600z' fill='%238d8a6e'/%3E%3Cpath d='M0 486 C90 420 194 532 310 462 C362 430 394 442 420 450 L420 600 L0 600z' fill='%235f634f'/%3E%3Cpath d='M72 484 C116 420 162 422 192 356 S270 308 304 236 S348 196 382 150' fill='none' stroke='%23d7bd7b' stroke-width='22' stroke-linecap='round'/%3E%3Cpath d='M138 420h56v38h-56zM270 268h62v42h-62z' fill='%23f2d28c' stroke='%23634b35' stroke-width='5'/%3E%3Cpath d='M352 154v-48M352 106l40 14-40 14z' fill='%23c95f41' stroke='%23634b35' stroke-width='4'/%3E%3Cpath d='M56 102 C104 70 140 120 178 92' fill='none' stroke='%23fff8e8' stroke-width='22' stroke-linecap='round'/%3E%3Cpath d='M266 78 C318 44 354 92 398 68' fill='none' stroke='%23fff8e8' stroke-width='22' stroke-linecap='round'/%3E%3C/svg%3E") center / cover no-repeat,
      linear-gradient(180deg, #a8d7d9, #877a61);
  }

  .research-theme .storybook-trail::before {
    background: none;
  }

  .rights-theme .storybook-trail {
    min-height: 620px;
    background:
      url("data:image/svg+xml,%3Csvg viewBox='0 0 420 620' preserveAspectRatio='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='420' height='620' fill='%23cfe8d3'/%3E%3Cpath d='M0 380 C94 330 172 412 252 360 C326 314 372 370 420 350 L420 620 L0 620z' fill='%238ec46f'/%3E%3Cpath d='M0 502 C92 448 178 548 292 502 C360 474 394 490 420 502 L420 620 L0 620z' fill='%236fa858'/%3E%3Cpath d='M52 430 C128 362 190 456 272 406 C332 370 366 386 394 390' fill='none' stroke='%23e7c779' stroke-width='22' stroke-linecap='round'/%3E%3Cpath d='M52 318h78v64H52zM176 268h108v82H176zM312 330h76v62h-76z' fill='%23f7d8a4' stroke='%235e4936' stroke-width='5'/%3E%3Cpath d='M42 318l50-38 50 38z' fill='%23ca8067'/%3E%3Cpath d='M160 268l70-50 70 50z' fill='%237fa0b5'/%3E%3Cpath d='M302 330l48-34 48 34z' fill='%23b86e63'/%3E%3Ccircle cx='66' cy='244' r='40' fill='%2357894d'/%3E%3Ccircle cx='342' cy='248' r='44' fill='%2357894d'/%3E%3Cpath d='M66 280v58M342 288v66' stroke='%23644934' stroke-width='8' stroke-linecap='round'/%3E%3Cpath d='M202 404 C230 384 264 392 280 420 C250 438 220 434 202 404z' fill='%2358aeca'/%3E%3Ccircle cx='104' cy='472' r='5' fill='%23f5a3b2'/%3E%3Ccircle cx='328' cy='492' r='5' fill='%23fff3a1'/%3E%3C/svg%3E") center / cover no-repeat,
      linear-gradient(180deg, #cfe8d3, #90bf7b);
  }

  .rights-theme .storybook-trail::before {
    background: none;
  }

  .patient-theme .trail-node:nth-child(1) { top: 48px; left: 8%; }
  .patient-theme .trail-node:nth-child(2) { top: 150px; left: 46%; }
  .patient-theme .trail-node:nth-child(3) { top: 262px; left: 16%; }
  .patient-theme .trail-node:nth-child(4) { top: 376px; left: 54%; }
  .patient-theme .trail-node:nth-child(5) { top: 492px; left: 22%; }
  .patient-theme .trail-node:nth-child(6) { top: 568px; left: 58%; }

  .research-theme .trail-node:nth-child(1) { top: 442px; left: 10%; }
  .research-theme .trail-node:nth-child(2) { top: 330px; left: 36%; }
  .research-theme .trail-node:nth-child(3) { top: 230px; left: 54%; }
  .research-theme .trail-node:nth-child(4) { top: 86px; left: 66%; }

  .rights-theme .trail-node:nth-child(1) { top: 370px; left: 8%; }
  .rights-theme .trail-node:nth-child(2) { top: 266px; left: 30%; }
  .rights-theme .trail-node:nth-child(3) { top: 432px; left: 42%; }
  .rights-theme .trail-node:nth-child(4) { top: 238px; left: 62%; }
  .rights-theme .trail-node:nth-child(5) { top: 360px; left: 68%; }
}

/* Patient Trail uses the provided image literally; interactions sit over the artwork. */
body[data-page="learn"] .story-module.patient-theme {
  --patient-map-z: 1;
  --patient-water-motion-z: 2;
  --patient-sparkle-z: 3;
  --patient-breeze-z: 4;
  --patient-node-z: 5;
  width: min(1300px, calc(100% - 28px));
  overflow: visible;
  border-radius: 0;
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  padding-top: 34px;
  padding-bottom: 46px;
}

body[data-page="learn"] .story-module.patient-theme::before,
body[data-page="learn"] .story-module.patient-theme::after,
body[data-page="learn"] .patient-theme::before,
body[data-page="learn"] .patient-theme::after {
  content: none !important;
  display: none !important;
  background: none !important;
  box-shadow: none !important;
}

body[data-page="learn"] .story-module.patient-theme .section-heading {
  margin-bottom: 18px;
}

.patient-theme .storybook-trail {
  aspect-ratio: 1493 / 1053;
  width: min(1300px, 100%);
  margin: 0 auto;
  min-height: 0 !important;
  overflow: visible;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  padding: 0 !important;
}

.patient-theme .storybook-trail::before,
.patient-theme .storybook-trail::after {
  content: none;
  display: none;
}

.patient-map-image {
  position: relative;
  z-index: var(--patient-map-z);
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
}

.patient-map-animation {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.patient-water-motion {
  z-index: var(--patient-water-motion-z);
  opacity: 0.26;
  mix-blend-mode: screen;
}

.water-motion-texture {
  fill: rgba(205, 245, 255, 0.34);
  animation: patientWaterFlow 26s linear infinite;
}

.water-motion-glow {
  fill: rgba(255, 255, 255, 0.22);
  opacity: 0.36;
  animation: patientWaterFlow 18s linear infinite;
}

.patient-water-sparkles {
  z-index: var(--patient-sparkle-z);
  opacity: 0.78;
}

.water-sparkle {
  fill: rgba(255, 255, 255, 0.9);
  filter: drop-shadow(0 0 5px rgba(255, 231, 154, 0.68));
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  animation: waterSparkleFlash 4.8s ease-in-out infinite;
}

.sparkle-two,
.sparkle-five {
  fill: rgba(255, 239, 177, 0.88);
}

.sparkle-one { animation-delay: -0.6s; }
.sparkle-two { animation-delay: -2.7s; animation-duration: 5.7s; }
.sparkle-three { animation-delay: -4.1s; animation-duration: 6.2s; }
.sparkle-four { animation-delay: -1.9s; animation-duration: 5.1s; }
.sparkle-five { animation-delay: -3.4s; animation-duration: 5.9s; }
.sparkle-six { animation-delay: -0.2s; animation-duration: 6.6s; }

.patient-leaves {
  z-index: var(--patient-breeze-z);
  overflow: hidden;
}

.patient-leaves span {
  position: absolute;
  top: -8%;
  left: var(--leaf-left, 20%);
  width: clamp(9px, 1.1vw, 14px);
  height: clamp(16px, 1.8vw, 24px);
  border-radius: 80% 12% 80% 12%;
  background: linear-gradient(135deg, rgba(182, 200, 84, 0.78), rgba(83, 125, 47, 0.66));
  box-shadow: inset 1px 0 rgba(255, 248, 189, 0.42);
  opacity: 0.58;
  transform: rotate(var(--leaf-rotate, 24deg));
  animation: patientLeafDrift var(--leaf-speed, 15s) linear infinite;
  animation-delay: var(--leaf-delay, 0s);
}

.patient-leaves span::after {
  content: "";
  position: absolute;
  top: 2px;
  bottom: 3px;
  left: 50%;
  border-left: 1px solid rgba(48, 82, 36, 0.28);
  transform: rotate(-18deg);
}

.patient-leaves span:nth-child(1) { --leaf-left: 18%; --leaf-speed: 18s; --leaf-delay: -4s; --leaf-rotate: 28deg; }
.patient-leaves span:nth-child(2) { --leaf-left: 36%; --leaf-speed: 22s; --leaf-delay: -11s; --leaf-rotate: -18deg; }
.patient-leaves span:nth-child(3) { --leaf-left: 58%; --leaf-speed: 19s; --leaf-delay: -7s; --leaf-rotate: 42deg; }
.patient-leaves span:nth-child(4) { --leaf-left: 73%; --leaf-speed: 24s; --leaf-delay: -15s; --leaf-rotate: -32deg; }
.patient-leaves span:nth-child(5) { --leaf-left: 88%; --leaf-speed: 20s; --leaf-delay: -2s; --leaf-rotate: 18deg; }

.patient-fire {
  z-index: var(--patient-breeze-z);
  left: 79.25%;
  top: 86.2%;
  width: 5.2%;
  height: 5.8%;
  inset: auto auto auto auto;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 55%, rgba(255, 230, 98, 0.62), transparent 28%),
    radial-gradient(circle at 50% 50%, rgba(255, 124, 31, 0.5), transparent 44%);
  filter: blur(2px);
  mix-blend-mode: screen;
  transform: translate(-50%, -50%);
  animation: patientFireFlicker 1.8s ease-in-out infinite alternate;
}

.patient-theme .patient-map-node {
  width: clamp(48px, 6.4vw, 92px);
  height: clamp(48px, 6.4vw, 92px);
  min-height: 0;
  border: 2px solid rgba(38, 63, 36, 0.72);
  border-radius: 50%;
  background: var(--pear);
  box-shadow:
    0 10px 18px rgba(34, 45, 30, 0.16),
    inset 0 0 0 4px rgba(255, 252, 239, 0.56);
  padding: 0;
  transition: box-shadow 160ms ease, transform 160ms ease;
  transform: translate(-50%, -50%) !important;
}

body[data-page="learn"] .patient-theme .patient-map-node {
  position: absolute;
  z-index: var(--patient-node-z);
  display: block;
  top: var(--node-y) !important;
  left: var(--node-x) !important;
  width: clamp(48px, 6.4vw, 92px) !important;
  height: clamp(48px, 6.4vw, 92px) !important;
  min-height: 0 !important;
  background-color: var(--pear) !important;
  background-image: radial-gradient(circle at 38% 30%, rgba(255, 255, 244, 0.36), rgba(169, 201, 90, 0.94) 64%, rgba(130, 159, 61, 0.96)) !important;
  transform: translate(-50%, -50%) !important;
}

.patient-theme .patient-map-node::before,
.patient-theme .patient-map-node span::before {
  content: none;
  display: none;
}

.patient-theme .patient-map-node span {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: 50%;
  background: transparent;
}

.patient-theme .patient-map-node strong {
  position: absolute;
  left: 50%;
  top: calc(100% + 7px);
  display: block;
  max-width: 150px;
  border: 1px solid rgba(38, 63, 36, 0.22);
  border-radius: 999px;
  background: rgba(255, 250, 240, 0.92);
  padding: 4px 9px;
  color: var(--olive);
  font-size: clamp(0.68rem, 1.2vw, 0.82rem);
  font-weight: 800;
  line-height: 1;
  opacity: 0.92;
  pointer-events: none;
  transform: translateX(-50%);
  transition: opacity 160ms ease, transform 160ms ease, background 160ms ease;
  white-space: nowrap;
}

.patient-theme .patient-map-node:hover,
.patient-theme .patient-map-node:focus-visible {
  outline: 3px solid rgba(255, 250, 240, 0.92);
  outline-offset: 3px;
  box-shadow:
    0 0 0 7px rgba(169, 201, 90, 0.32),
    0 14px 26px rgba(34, 45, 30, 0.2),
    inset 0 0 0 4px rgba(255, 252, 239, 0.62);
  transform: translate(-50%, -50%) scale(1.06) !important;
}

.patient-theme .patient-map-node:hover strong,
.patient-theme .patient-map-node:focus-visible strong {
  opacity: 1;
  background: rgba(255, 255, 246, 0.98);
  transform: translateX(-50%) translateY(-2px);
}

.patient-theme .patient-map-node {
  top: var(--node-y);
  left: var(--node-x);
}

@keyframes patientWaterFlow {
  from { transform: translate3d(-90px, -34px, 0); }
  to { transform: translate3d(120px, 42px, 0); }
}

@keyframes waterSparkleFlash {
  0%, 58%, 100% {
    opacity: 0;
    transform: translate3d(0, 0, 0) scale(0.45) rotate(0deg);
  }
  63% {
    opacity: 0.82;
    transform: translate3d(10px, 5px, 0) scale(1.05) rotate(18deg);
  }
  69% {
    opacity: 0.18;
    transform: translate3d(24px, 12px, 0) scale(0.68) rotate(28deg);
  }
}

@keyframes patientLeafDrift {
  from { transform: translate3d(-8px, -12%, 0) rotate(var(--leaf-rotate, 20deg)); }
  50% { transform: translate3d(18px, 54vh, 0) rotate(calc(var(--leaf-rotate, 20deg) + 80deg)); }
  to { transform: translate3d(-10px, 112vh, 0) rotate(calc(var(--leaf-rotate, 20deg) + 160deg)); }
}

@keyframes patientFireFlicker {
  from { opacity: 0.45; transform: translate(-50%, -50%) scale(0.9); }
  to { opacity: 0.82; transform: translate(-50%, -50%) scale(1.08); }
}

@media (prefers-reduced-motion: reduce) {
  .water-motion-texture,
  .water-motion-glow,
  .water-sparkle,
  .patient-leaves span,
  .patient-fire {
    animation: none;
  }
}

/* Research Trail uses a project image asset; overlays add sparse alpine motion only. */
body[data-page="learn"] .story-module.research-theme {
  --research-map-z: 1;
  --research-water-z: 2;
  --research-sparkle-z: 3;
  --research-snow-z: 4;
  --research-node-z: 5;
  width: min(1300px, calc(100% - 28px));
  overflow: visible;
  border-radius: 0;
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
}

body[data-page="learn"] .story-module.research-theme::before,
body[data-page="learn"] .story-module.research-theme::after,
body[data-page="learn"] .research-theme::before,
body[data-page="learn"] .research-theme::after {
  content: none !important;
  display: none !important;
  background: none !important;
  box-shadow: none !important;
}

.research-theme .storybook-trail {
  aspect-ratio: 3 / 2;
  width: min(1300px, 100%);
  min-height: 0 !important;
  margin: 0 auto;
  overflow: visible;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  padding: 0 !important;
}

.research-theme .storybook-trail::before,
.research-theme .storybook-trail::after {
  content: none !important;
  display: none !important;
}

.research-map-image {
  position: relative;
  z-index: var(--research-map-z);
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
}

.research-map-animation {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.research-water-motion {
  z-index: var(--research-water-z);
  opacity: 0.24;
  mix-blend-mode: screen;
}

.research-water-texture {
  fill: rgba(206, 244, 255, 0.32);
  animation: researchWaterFlow 28s linear infinite;
}

.research-ice-sparkles {
  z-index: var(--research-sparkle-z);
  opacity: 0.66;
}

.research-ice-star {
  fill: rgba(255, 255, 255, 0.88);
  filter: drop-shadow(0 0 5px rgba(207, 238, 255, 0.68));
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  animation: researchIceSparkle 8.8s ease-in-out infinite;
}

.ice-two {
  fill: rgba(255, 240, 185, 0.82);
  animation-delay: -3.4s;
}

.ice-three {
  animation-delay: -6.2s;
  animation-duration: 10.5s;
}

.ice-four {
  animation-delay: -1.5s;
  animation-duration: 11.2s;
}

.research-snow {
  z-index: var(--research-snow-z);
}

.research-snow span {
  position: absolute;
  top: -6%;
  left: var(--snow-left, 50%);
  width: var(--snow-size, 4px);
  height: var(--snow-size, 4px);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.78);
  opacity: 0.42;
  animation: researchSnowDrift var(--snow-speed, 16s) linear infinite;
  animation-delay: var(--snow-delay, 0s);
}

.research-snow span:nth-child(1) { --snow-left: 8%; --snow-size: 3px; --snow-speed: 18s; --snow-delay: -2s; }
.research-snow span:nth-child(2) { --snow-left: 18%; --snow-size: 5px; --snow-speed: 23s; --snow-delay: -12s; }
.research-snow span:nth-child(3) { --snow-left: 28%; --snow-size: 2px; --snow-speed: 20s; --snow-delay: -6s; }
.research-snow span:nth-child(4) { --snow-left: 38%; --snow-size: 4px; --snow-speed: 26s; --snow-delay: -18s; }
.research-snow span:nth-child(5) { --snow-left: 49%; --snow-size: 3px; --snow-speed: 21s; --snow-delay: -10s; }
.research-snow span:nth-child(6) { --snow-left: 58%; --snow-size: 5px; --snow-speed: 25s; --snow-delay: -4s; }
.research-snow span:nth-child(7) { --snow-left: 66%; --snow-size: 3px; --snow-speed: 19s; --snow-delay: -14s; }
.research-snow span:nth-child(8) { --snow-left: 74%; --snow-size: 4px; --snow-speed: 24s; --snow-delay: -7s; }
.research-snow span:nth-child(9) { --snow-left: 82%; --snow-size: 2px; --snow-speed: 22s; --snow-delay: -16s; }
.research-snow span:nth-child(10) { --snow-left: 90%; --snow-size: 4px; --snow-speed: 27s; --snow-delay: -5s; }
.research-snow span:nth-child(11) { --snow-left: 34%; --snow-size: 3px; --snow-speed: 29s; --snow-delay: -22s; }
.research-snow span:nth-child(12) { --snow-left: 70%; --snow-size: 2px; --snow-speed: 17s; --snow-delay: -9s; }

.research-beacon {
  z-index: var(--research-snow-z);
  left: 87.5%;
  top: 8.5%;
  width: 5.5%;
  height: 6%;
  inset: auto auto auto auto;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 205, 116, 0.34), rgba(255, 205, 116, 0.08) 36%, transparent 68%);
  opacity: 0;
  transform: translate(-50%, -50%);
  animation: researchBeaconPulse 10s ease-in-out infinite;
}

body[data-page="learn"] .research-theme .research-map-node {
  position: absolute;
  z-index: var(--research-node-z);
  top: var(--node-y) !important;
  left: var(--node-x) !important;
  min-height: 0 !important;
  transform: translate(-50%, -50%) !important;
}

body[data-page="learn"] .research-theme .research-map-node::before {
  content: none !important;
  display: none !important;
}

body[data-page="learn"] .research-theme .research-map-node small {
  display: none !important;
}

body[data-page="learn"] .research-theme .research-map-node:hover,
body[data-page="learn"] .research-theme .research-map-node:focus-visible {
  transform: translate(-50%, -50%) scale(1.05) !important;
}

@keyframes researchWaterFlow {
  from { transform: translate3d(-90px, -18px, 0); }
  to { transform: translate3d(120px, 38px, 0); }
}

@keyframes researchIceSparkle {
  0%, 72%, 100% {
    opacity: 0;
    transform: translate3d(0, 0, 0) scale(0.45) rotate(0deg);
  }
  76% {
    opacity: 0.82;
    transform: translate3d(8px, -3px, 0) scale(1.04) rotate(18deg);
  }
  82% {
    opacity: 0.12;
    transform: translate3d(18px, -8px, 0) scale(0.66) rotate(32deg);
  }
}

@keyframes researchSnowDrift {
  from { transform: translate3d(-8px, -10%, 0); }
  to { transform: translate3d(46px, 112vh, 0); }
}

@keyframes researchBeaconPulse {
  0%, 72%, 100% { opacity: 0; transform: translate(-50%, -50%) scale(0.82); }
  78% { opacity: 0.42; transform: translate(-50%, -50%) scale(1); }
  86% { opacity: 0.08; transform: translate(-50%, -50%) scale(1.18); }
}

@media (prefers-reduced-motion: reduce) {
  .research-water-texture,
  .research-ice-star,
  .research-snow span,
  .research-beacon {
    animation: none;
  }
}

/* Rights Trail uses the provided image exactly; controls and soft ambience are separate overlays. */
body[data-page="learn"] .story-module.rights-theme {
  --rights-map-z: 1;
  --rights-water-z: 2;
  --rights-petal-z: 3;
  --rights-node-z: 4;
  width: min(1300px, calc(100% - 28px));
  overflow: visible;
  border-radius: 0;
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
}

body[data-page="learn"] .story-module.rights-theme::before,
body[data-page="learn"] .story-module.rights-theme::after,
body[data-page="learn"] .rights-theme::before,
body[data-page="learn"] .rights-theme::after {
  content: none !important;
  display: none !important;
  background: none !important;
  box-shadow: none !important;
}

.rights-theme .storybook-trail {
  aspect-ratio: 3 / 2;
  width: min(1300px, 100%);
  min-height: 0 !important;
  margin: 0 auto;
  overflow: visible;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  padding: 0 !important;
}

.rights-theme .storybook-trail::before,
.rights-theme .storybook-trail::after {
  content: none !important;
  display: none !important;
}

.rights-map-image {
  position: relative;
  z-index: var(--rights-map-z);
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
}

.rights-map-animation {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.rights-water-ripple {
  z-index: var(--rights-water-z);
  opacity: 0.18;
  mix-blend-mode: screen;
}

.rights-water-texture {
  fill: rgba(210, 250, 255, 0.28);
  animation: rightsWaterFlow 24s linear infinite;
}

.rights-petals {
  z-index: var(--rights-petal-z);
}

.rights-petals span {
  position: absolute;
  top: -7%;
  left: var(--petal-left, 50%);
  width: clamp(8px, 1vw, 13px);
  height: clamp(12px, 1.5vw, 20px);
  border-radius: 65% 35% 70% 30%;
  background: linear-gradient(135deg, rgba(255, 194, 210, 0.72), rgba(255, 244, 247, 0.55));
  opacity: 0.5;
  transform: rotate(var(--petal-rotate, 18deg));
  animation: rightsPetalDrift var(--petal-speed, 18s) linear infinite;
  animation-delay: var(--petal-delay, 0s);
}

.rights-petals span:nth-child(1) { --petal-left: 16%; --petal-speed: 19s; --petal-delay: -3s; --petal-rotate: 18deg; }
.rights-petals span:nth-child(2) { --petal-left: 28%; --petal-speed: 24s; --petal-delay: -12s; --petal-rotate: -24deg; }
.rights-petals span:nth-child(3) { --petal-left: 42%; --petal-speed: 21s; --petal-delay: -7s; --petal-rotate: 34deg; }
.rights-petals span:nth-child(4) { --petal-left: 55%; --petal-speed: 26s; --petal-delay: -18s; --petal-rotate: -12deg; }
.rights-petals span:nth-child(5) { --petal-left: 68%; --petal-speed: 20s; --petal-delay: -5s; --petal-rotate: 28deg; }
.rights-petals span:nth-child(6) { --petal-left: 78%; --petal-speed: 25s; --petal-delay: -15s; --petal-rotate: -32deg; }
.rights-petals span:nth-child(7) { --petal-left: 88%; --petal-speed: 22s; --petal-delay: -9s; --petal-rotate: 20deg; }
.rights-petals span:nth-child(8) { --petal-left: 36%; --petal-speed: 28s; --petal-delay: -21s; --petal-rotate: -18deg; }

.rights-fountain-ripple {
  z-index: var(--rights-petal-z);
  left: 54.5%;
  top: 78%;
  width: 5%;
  height: 4%;
  inset: auto auto auto auto;
  border-radius: 50%;
  border: 1px solid rgba(218, 250, 255, 0.46);
  opacity: 0.28;
  transform: translate(-50%, -50%);
  animation: rightsFountainRipple 5.5s ease-in-out infinite;
}

body[data-page="learn"] .rights-theme .rights-map-node {
  position: absolute;
  z-index: var(--rights-node-z);
  top: var(--node-y) !important;
  left: var(--node-x) !important;
  min-height: 0 !important;
  transform: translate(-50%, -50%) !important;
}

body[data-page="learn"] .rights-theme .rights-map-node::before {
  content: none !important;
  display: none !important;
}

body[data-page="learn"] .rights-theme .rights-map-node small {
  display: none !important;
}

body[data-page="learn"] .rights-theme .rights-map-node:hover,
body[data-page="learn"] .rights-theme .rights-map-node:focus-visible {
  transform: translate(-50%, -50%) scale(1.05) !important;
}

@keyframes rightsWaterFlow {
  from { transform: translate3d(-70px, -20px, 0); }
  to { transform: translate3d(110px, 28px, 0); }
}

@keyframes rightsPetalDrift {
  from { transform: translate3d(-8px, -10%, 0) rotate(var(--petal-rotate, 18deg)); }
  50% { transform: translate3d(20px, 52vh, 0) rotate(calc(var(--petal-rotate, 18deg) + 70deg)); }
  to { transform: translate3d(-6px, 110vh, 0) rotate(calc(var(--petal-rotate, 18deg) + 150deg)); }
}

@keyframes rightsFountainRipple {
  from { opacity: 0.32; transform: translate(-50%, -50%) scale(0.72); }
  55% { opacity: 0.12; transform: translate(-50%, -50%) scale(1.18); }
  to { opacity: 0; transform: translate(-50%, -50%) scale(1.45); }
}

@media (prefers-reduced-motion: reduce) {
  .rights-water-texture,
  .rights-petals span,
  .rights-fountain-ripple {
    animation: none;
  }
}

/* Shared Learn map cleanup: consistent containers and HTML/CSS overlay nodes. */
body[data-page="learn"] .story-module.patient-theme,
body[data-page="learn"] .story-module.research-theme,
body[data-page="learn"] .story-module.rights-theme {
  width: min(1300px, calc(100% - 28px));
  margin-inline: auto;
  overflow: visible;
  border-radius: 0;
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  padding-top: 34px;
  padding-bottom: 46px;
}

body[data-page="learn"] .patient-theme .storybook-trail,
body[data-page="learn"] .research-theme .storybook-trail,
body[data-page="learn"] .rights-theme .storybook-trail {
  position: relative;
  width: min(1300px, 100%);
  margin: 0 auto;
  min-height: 0 !important;
  overflow: visible;
  border: 0 !important;
  border-radius: 0 !important;
  background: var(--cream) !important;
  background-image: none !important;
  box-shadow: none !important;
  padding: 0 !important;
}

body[data-page="learn"] .patient-theme .storybook-trail,
body[data-page="learn"] .research-theme .storybook-trail,
body[data-page="learn"] .rights-theme .storybook-trail {
  aspect-ratio: 3 / 2;
}

body[data-page="learn"] .patient-theme .storybook-trail::before,
body[data-page="learn"] .patient-theme .storybook-trail::after,
body[data-page="learn"] .research-theme .storybook-trail::before,
body[data-page="learn"] .research-theme .storybook-trail::after,
body[data-page="learn"] .rights-theme .storybook-trail::before,
body[data-page="learn"] .rights-theme .storybook-trail::after {
  content: none !important;
  display: none !important;
  background: none !important;
  box-shadow: none !important;
}

body[data-page="learn"] .patient-map-image,
body[data-page="learn"] .research-map-image,
body[data-page="learn"] .rights-map-image {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: var(--cream);
  box-shadow: none;
  pointer-events: none;
}

body[data-page="learn"] .patient-map-node,
body[data-page="learn"] .research-map-node,
body[data-page="learn"] .rights-map-node {
  position: absolute;
  z-index: 20 !important;
  top: var(--node-y) !important;
  left: var(--node-x) !important;
  display: block !important;
  width: clamp(48px, 6.4vw, 92px) !important;
  height: clamp(48px, 6.4vw, 92px) !important;
  min-height: 0 !important;
  border: 2px solid rgba(38, 63, 36, 0.78) !important;
  border-radius: 50% !important;
  background-color: var(--pear) !important;
  background-image: radial-gradient(circle at 38% 30%, rgba(255, 255, 244, 0.36), rgba(169, 201, 90, 0.94) 64%, rgba(130, 159, 61, 0.96)) !important;
  box-shadow:
    0 10px 18px rgba(34, 45, 30, 0.16),
    inset 0 0 0 4px rgba(255, 252, 239, 0.56) !important;
  color: var(--olive);
  padding: 0 !important;
  text-align: center;
  transform: translate(-50%, -50%) !important;
  transition: box-shadow 160ms ease, transform 160ms ease;
}

body[data-page="learn"] .patient-map-node::before,
body[data-page="learn"] .research-map-node::before,
body[data-page="learn"] .rights-map-node::before,
body[data-page="learn"] .patient-map-node span,
body[data-page="learn"] .research-map-node span,
body[data-page="learn"] .rights-map-node span,
body[data-page="learn"] .patient-map-node small,
body[data-page="learn"] .research-map-node small,
body[data-page="learn"] .rights-map-node small {
  content: none !important;
  display: none !important;
}

body[data-page="learn"] .patient-map-node strong,
body[data-page="learn"] .research-map-node strong,
body[data-page="learn"] .rights-map-node strong {
  position: absolute;
  left: 50%;
  top: calc(100% + 7px);
  display: block;
  width: max-content;
  max-width: 150px;
  border: 1px solid rgba(38, 63, 36, 0.22);
  border-radius: 999px;
  background: rgba(255, 250, 240, 0.94);
  box-shadow: 0 8px 16px rgba(38, 63, 36, 0.12);
  color: var(--olive);
  font-size: clamp(0.68rem, 1.2vw, 0.82rem);
  font-weight: 800;
  line-height: 1;
  opacity: 0.96;
  padding: 4px 9px;
  pointer-events: none;
  transform: translateX(-50%);
  transition: opacity 160ms ease, transform 160ms ease, background 160ms ease;
  white-space: nowrap;
}

body[data-page="learn"] .patient-map-node:hover,
body[data-page="learn"] .patient-map-node:focus-visible,
body[data-page="learn"] .research-map-node:hover,
body[data-page="learn"] .research-map-node:focus-visible,
body[data-page="learn"] .rights-map-node:hover,
body[data-page="learn"] .rights-map-node:focus-visible {
  outline: 3px solid rgba(255, 250, 240, 0.92);
  outline-offset: 3px;
  box-shadow:
    0 0 0 7px rgba(169, 201, 90, 0.32),
    0 14px 26px rgba(34, 45, 30, 0.2),
    inset 0 0 0 4px rgba(255, 252, 239, 0.62) !important;
  transform: translate(-50%, -50%) scale(1.06) !important;
}

body[data-page="learn"] .patient-map-node:hover strong,
body[data-page="learn"] .patient-map-node:focus-visible strong,
body[data-page="learn"] .research-map-node:hover strong,
body[data-page="learn"] .research-map-node:focus-visible strong,
body[data-page="learn"] .rights-map-node:hover strong,
body[data-page="learn"] .rights-map-node:focus-visible strong {
  background: rgba(255, 255, 246, 0.98);
  transform: translateX(-50%) translateY(-2px);
}

/* Final Learn-only layer polish. Artwork stays unchanged; these rules only fix blending and motion layers. */
body[data-page="learn"] .patient-theme .storybook-trail {
  background: var(--cream) !important;
}

body[data-page="learn"] .patient-map-image {
  background: var(--cream);
  -webkit-mask-image:
    linear-gradient(to right, transparent 0, #000 8%, #000 92%, transparent 100%),
    linear-gradient(to bottom, transparent 0, #000 8%, #000 92%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(to right, transparent 0, #000 8%, #000 92%, transparent 100%),
    linear-gradient(to bottom, transparent 0, #000 8%, #000 92%, transparent 100%);
  mask-composite: intersect;
}

body[data-page="learn"] .patient-map-animation,
body[data-page="learn"] .research-map-animation,
body[data-page="learn"] .rights-map-animation {
  position: absolute;
  inset: 0;
  z-index: 8;
  overflow: hidden;
  pointer-events: none;
}

body[data-page="learn"] .patient-leaves,
body[data-page="learn"] .research-snow,
body[data-page="learn"] .rights-petals {
  display: block;
  opacity: 1;
}

body[data-page="learn"] .patient-leaves span {
  opacity: 0.5;
}

body[data-page="learn"] .research-snow span {
  width: var(--snow-size, 6px);
  height: var(--snow-size, 6px);
  background: rgba(255, 255, 255, 0.94);
  box-shadow:
    0 0 7px rgba(230, 246, 255, 0.58),
    0 0 1px rgba(86, 116, 124, 0.28);
  opacity: 0.74;
  animation: researchSnowDrift var(--snow-speed, 18s) linear infinite;
  animation-delay: var(--snow-delay, 0s);
}

body[data-page="learn"] .research-snow span:nth-child(1) { --snow-left: 18%; --snow-size: 4px; --snow-speed: 18s; --snow-delay: -4s; }
body[data-page="learn"] .research-snow span:nth-child(2) { --snow-left: 36%; --snow-size: 6px; --snow-speed: 22s; --snow-delay: -11s; }
body[data-page="learn"] .research-snow span:nth-child(3) { --snow-left: 58%; --snow-size: 4px; --snow-speed: 19s; --snow-delay: -7s; }
body[data-page="learn"] .research-snow span:nth-child(4) { --snow-left: 73%; --snow-size: 6px; --snow-speed: 24s; --snow-delay: -15s; }
body[data-page="learn"] .research-snow span:nth-child(5) { --snow-left: 88%; --snow-size: 4px; --snow-speed: 20s; --snow-delay: -2s; }
body[data-page="learn"] .research-snow span:nth-child(n+6) {
  display: none;
}

body[data-page="learn"] .rights-petals span {
  background: linear-gradient(135deg, rgba(255, 176, 202, 0.78), rgba(247, 255, 211, 0.6));
  box-shadow: 0 0 6px rgba(255, 232, 240, 0.34);
  opacity: 0.7;
  animation: rightsPetalDrift var(--petal-speed, 18s) linear infinite;
  animation-delay: var(--petal-delay, 0s);
}

body[data-page="learn"] .rights-petals span:nth-child(1) { --petal-left: 18%; --petal-speed: 18s; --petal-delay: -4s; --petal-rotate: 28deg; }
body[data-page="learn"] .rights-petals span:nth-child(2) { --petal-left: 36%; --petal-speed: 22s; --petal-delay: -11s; --petal-rotate: -18deg; }
body[data-page="learn"] .rights-petals span:nth-child(3) { --petal-left: 58%; --petal-speed: 19s; --petal-delay: -7s; --petal-rotate: 42deg; }
body[data-page="learn"] .rights-petals span:nth-child(4) { --petal-left: 73%; --petal-speed: 24s; --petal-delay: -15s; --petal-rotate: -32deg; }
body[data-page="learn"] .rights-petals span:nth-child(5) { --petal-left: 88%; --petal-speed: 20s; --petal-delay: -2s; --petal-rotate: 18deg; }
body[data-page="learn"] .rights-petals span:nth-child(n+6) {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  body[data-page="learn"] .patient-leaves span,
  body[data-page="learn"] .research-snow span,
  body[data-page="learn"] .rights-petals span {
    animation: none !important;
  }
}

/* Health-literacy controls and appointment-ready summaries. */
.literacy-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: 14px 22px;
  margin-top: 18px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(244, 238, 223, 0.52);
  padding: 14px;
}

.literacy-controls fieldset {
  min-width: 0;
  border: 0;
  margin: 0;
  padding: 0;
}

.literacy-controls legend,
.language-control > span {
  display: block;
  margin-bottom: 6px;
  color: var(--olive);
  font-size: 0.82rem;
  font-weight: 900;
}

.literacy-controls > p {
  flex-basis: 100%;
  margin: 0;
  color: var(--muted);
  font-size: 0.82rem;
}

.segmented-control {
  display: inline-flex;
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
  background: var(--cream-2);
}

.segmented-control label {
  cursor: pointer;
}

.segmented-control input {
  position: absolute;
  opacity: 0;
}

.segmented-control span {
  display: block;
  min-width: 78px;
  border-right: 1px solid var(--line);
  color: var(--olive);
  font-size: 0.86rem;
  font-weight: 900;
  padding: 9px 12px;
  text-align: center;
}

.segmented-control label:last-child span {
  border-right: 0;
}

.segmented-control input:checked + span {
  background: var(--pear);
}

.segmented-control input:focus-visible + span {
  outline: 3px solid rgba(127, 161, 47, 0.44);
  outline-offset: -3px;
}

.language-control select {
  min-width: 140px;
}

.section-title-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.section-title-actions h3,
.section-title-actions h4 {
  margin: 0;
}

.copy-section-button {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--cream-2);
  color: var(--olive);
  cursor: pointer;
  font-size: 0.8rem;
  font-weight: 900;
  padding: 7px 10px;
}

.copy-section-button:hover,
.copy-section-button:focus-visible {
  background: rgba(169, 201, 90, 0.24);
  outline: 3px solid rgba(169, 201, 90, 0.28);
}

.doctor-discussion-summary,
.common-questions {
  margin-top: 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(244, 238, 223, 0.48);
  padding: 18px;
}

.table-scroll {
  margin-top: 14px;
  overflow-x: auto;
}

.doctor-discussion-summary table {
  width: 100%;
  min-width: 680px;
  border-collapse: collapse;
  color: var(--olive);
  font-size: 0.88rem;
}

.doctor-discussion-summary th,
.doctor-discussion-summary td {
  border: 1px solid var(--line);
  padding: 10px;
  text-align: left;
  vertical-align: top;
}

.doctor-discussion-summary th {
  background: rgba(169, 201, 90, 0.2);
  font-weight: 900;
}

.faq-list {
  display: grid;
  gap: 8px;
  margin-top: 14px;
}

.faq-list details {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 250, 240, 0.74);
  padding: 11px 13px;
}

.faq-list summary {
  color: var(--olive);
  cursor: pointer;
  font-weight: 900;
}

.faq-list p {
  margin: 9px 0 0;
  color: var(--muted);
}

.conversation-guide,
.trial-promises {
  scroll-margin-top: 96px;
}

.guide-actions {
  display: grid;
  max-width: 900px;
  gap: 14px;
  margin: 0 auto 22px;
  justify-items: center;
  text-align: center;
}

.question-guide-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.question-guide-grid .simple-card {
  align-content: start;
}

.question-guide-grid ul,
.trial-promises p {
  margin: 0;
}

.question-guide-grid ul {
  display: grid;
  gap: 8px;
  padding-left: 20px;
  color: var(--muted);
}

.question-guide-grid li {
  padding-left: 2px;
}

.family-print-packet {
  display: none;
}

@media (max-width: 760px) {
  .literacy-controls {
    display: grid;
    align-items: stretch;
  }

  .segmented-control {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .segmented-control span {
    min-width: 0;
    padding-inline: 8px;
  }

  .language-control select {
    width: 100%;
  }

  .glossary-accessibility-controls {
    grid-template-columns: 1fr;
  }

  .selected-trial-card dd {
    max-width: 54%;
  }

  .question-guide-grid {
    grid-template-columns: 1fr;
  }

  .question-context-panel,
  .question-builder-layout {
    grid-template-columns: 1fr;
  }

  .question-builder-summary {
    position: static;
  }

  .custom-question-row {
    grid-template-columns: 1fr;
  }

  .rating-row {
    grid-template-columns: 1fr;
  }
}

@media print {
  .literacy-controls,
  .family-active-packet-section,
  .copy-section-button,
  .flag-icon-button {
    display: none !important;
  }

  .family-print-packet {
    display: block !important;
  }

  .family-print-packet > section {
    margin-bottom: 20px;
    break-inside: auto;
  }

  .doctor-discussion-summary table {
    min-width: 0;
    font-size: 9pt;
  }

  body[data-page="questions"] header,
  body[data-page="questions"] footer,
  body[data-page="questions"] main > section:not(.conversation-guide),
  body[data-page="questions"] .conversation-guide > :not(.question-print-area),
  body[data-page="family"] header,
  body[data-page="family"] footer,
  body[data-page="family"] main > section:not(:last-child),
  body[data-page="family"] .family-packet-card > :not(.family-print-packet) {
    display: none !important;
  }

  body[data-page="questions"] .question-print-area,
  body[data-page="family"] .family-print-packet {
    display: block !important;
  }

  body[data-page="questions"] .page-shell,
  body[data-page="family"] .page-shell {
    width: 100%;
    padding: 0;
  }

  .print-document {
    color: #111;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 11pt;
    line-height: 1.45;
  }

  .print-document h1 {
    margin: 0 0 12px;
    font-size: 20pt;
  }

  .print-document h2 {
    margin: 16px 0 8px;
    font-size: 13pt;
    break-after: avoid;
  }

  .print-document section {
    break-inside: avoid;
  }

  .printed-note-space {
    min-height: 96px;
    border: 1px solid #bbb;
  }

  .print-disclaimer {
    margin-top: 18px;
    border-top: 1px solid #bbb;
    padding-top: 8px;
    font-size: 9pt;
  }
}

/* Focused UX polish: make interactive surfaces feel intentional without changing the visual system. */
button,
a,
summary,
.cancer-info-card,
.trial-card-button,
.glossary-click-card,
.path-card,
.path-option-card,
.quick-card,
.filter-row button,
.segmented-control label,
.trail-node,
.patient-map-node,
.copy-section-button,
.flag-icon-button,
.save-trial-button,
.trial-match-card,
.trial-match-utility,
.saved-trials-link {
  transition: background-color 160ms ease, border-color 160ms ease, box-shadow 160ms ease, color 160ms ease, transform 160ms ease;
}

button,
a[href],
summary,
.cancer-info-card,
.trial-card-button,
.glossary-click-card,
.filter-row button,
.segmented-control label,
.trail-node,
.patient-map-node,
.path-option-card,
.copy-section-button,
.flag-icon-button,
.save-trial-button,
.trial-match-utility,
.saved-trials-link {
  cursor: pointer;
}

:where(a[href], button, input, select, textarea, summary, .cancer-info-card, .trial-card-button, .glossary-click-card, .filter-row button, .trail-node, .patient-map-node, .path-option-card, .save-trial-button):focus-visible {
  outline: 3px solid rgba(169, 201, 90, 0.82);
  outline-offset: 3px;
}

.button:hover,
.button:focus-visible,
.copy-section-button:hover,
.copy-section-button:focus-visible,
.back-to-results:hover,
.back-to-results:focus-visible {
  box-shadow: 0 12px 24px rgba(38, 63, 36, 0.16);
  transform: translateY(-1px);
}

.button.primary:hover,
.button.primary:focus-visible {
  background: #b8d968;
}

.button.secondary:hover,
.button.secondary:focus-visible {
  background: #31512d;
}

.trial-card:hover,
.trial-card:focus-within,
.cancer-info-card:hover,
.cancer-info-card:focus-visible,
.glossary-click-card:hover,
.glossary-click-card:focus-visible,
.path-option-card:hover,
.path-option-card:focus-visible,
.path-card:hover,
.path-card:focus-within {
  border-color: rgba(127, 161, 47, 0.52);
  box-shadow: 0 18px 36px rgba(38, 63, 36, 0.14);
}

.trial-card-button:hover,
.trial-card-button:focus-visible,
.explore-suggestions button:hover,
.explore-suggestions button:focus-visible {
  background: rgba(169, 201, 90, 0.12);
}

.filter-row button:hover,
.filter-row button:focus-visible,
.filter-row button.active,
.segmented-control label:hover,
.segmented-control label:focus-within {
  border-color: rgba(127, 161, 47, 0.58);
  background: rgba(169, 201, 90, 0.16);
}

.flag-icon-button:hover,
.flag-icon-button:focus-visible {
  background: rgba(169, 201, 90, 0.18);
  box-shadow: 0 8px 18px rgba(38, 63, 36, 0.12);
}

.explore-guidance {
  max-width: 900px;
  margin: 0 auto 24px;
  text-align: center;
}

.explore-guidance h2 {
  margin-bottom: 8px;
}

.explore-guidance p:not(.eyebrow) {
  max-width: 720px;
  margin-right: auto;
  margin-left: auto;
  color: var(--muted);
}

.search-panel {
  row-gap: 18px;
  margin-top: 22px;
  grid-template-columns: minmax(0, 0.95fr) minmax(320px, 0.75fr);
  align-items: start;
}

.search-panel .search-trials-button,
.search-panel > p {
  grid-column: 1 / -1;
}

.search-primary-section,
.search-secondary-section {
  min-width: 0;
}

.search-primary-section label,
.search-secondary-section label {
  min-width: 0;
}

.advanced-search-drawer {
  margin-top: 4px;
  margin-bottom: 8px;
  padding: 18px;
}

.advanced-filter-grid {
  gap: 18px;
}

.field-help {
  display: block;
  margin-top: 8px;
  color: var(--muted);
  font-size: 0.84rem;
  font-weight: 700;
  line-height: 1.45;
}

.year-filter-group {
  display: grid;
  gap: 8px;
  align-content: start;
}

.year-filter-group label {
  display: flex;
  align-items: center;
  gap: 9px;
  color: var(--muted);
  font-size: 0.92rem;
  font-weight: 800;
}

.year-filter-group input {
  width: auto;
  margin: 0;
  accent-color: var(--pear);
}

.search-trials-button {
  justify-self: start;
  min-width: 180px;
  margin-top: 2px;
}

.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.question-context-panel {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 22px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(244, 238, 223, 0.5);
  padding: clamp(16px, 3vw, 22px);
}

.question-builder-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(240px, 0.32fr);
  gap: clamp(18px, 4vw, 30px);
  align-items: start;
}

.question-builder-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.question-builder-toolbar p {
  margin: 0;
  color: var(--muted);
  font-weight: 850;
}

.question-category-list {
  display: grid;
  gap: 12px;
}

.question-category {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 250, 240, 0.86);
  box-shadow: 0 10px 22px rgba(38, 63, 36, 0.06);
  overflow: clip;
}

.question-category summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  cursor: pointer;
  color: var(--olive);
  font-weight: 950;
  padding: 16px 18px;
}

.question-category summary:hover,
.question-category summary:focus-visible {
  background: rgba(169, 201, 90, 0.16);
  outline: 3px solid rgba(169, 201, 90, 0.18);
}

.question-category-count {
  color: var(--muted);
  font-size: 0.82rem;
  white-space: nowrap;
}

.question-options {
  display: grid;
  gap: 8px;
  border-top: 1px solid var(--line);
  padding: 12px 18px 16px;
}

.question-builder-summary {
  position: sticky;
  top: 92px;
  display: grid;
  gap: 14px;
  border: 1px solid rgba(38, 63, 36, 0.12);
  border-radius: 8px;
  background: rgba(255, 250, 240, 0.94);
  box-shadow: 0 12px 28px rgba(38, 63, 36, 0.08);
  padding: 18px;
}

.question-builder-summary h3,
.question-builder-summary p {
  margin: 0;
}

.question-summary-actions {
  display: grid;
  gap: 10px;
}

.custom-question-panel,
.question-review-guide,
.question-next-steps {
  margin-top: 20px;
}

.custom-question-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
}

.custom-question-list {
  display: grid;
  gap: 8px;
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
}

.custom-question-list li {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  border-top: 1px solid var(--line);
  padding-top: 8px;
}

.question-select-row {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 10px;
  align-items: start;
  margin: 8px 0;
  border: 1px solid transparent;
  border-radius: 8px;
  cursor: pointer;
  padding: 10px;
}

.question-select-row:hover,
.question-select-row:focus-within {
  border-color: rgba(127, 161, 47, 0.42);
  background: rgba(169, 201, 90, 0.14);
}

.question-select-row input {
  width: auto;
  margin-top: 0.25em;
  accent-color: var(--pear);
}

.question-select-row span {
  min-width: 0;
}

.review-question-group {
  margin-top: 18px;
}

.review-question-group ol {
  display: grid;
  gap: 12px;
  padding-left: 22px;
}

.review-question-group li {
  break-inside: avoid;
}

.review-question-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 6px;
}

.question-context-summary {
  margin-bottom: 18px;
}

.question-print-area {
  display: none;
}

.trial-match-hero {
  max-width: 960px;
}

.trial-match-safety {
  margin-top: 24px;
}

.trial-match-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(280px, 0.65fr);
  gap: 22px;
  align-items: start;
}

.trial-match-form,
.trial-match-side-card,
.trial-match-card,
.saved-comparison-table {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--cream-2);
  box-shadow: var(--shadow);
}

.trial-match-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  padding: clamp(22px, 4vw, 34px);
}

.trial-match-form .form-section-heading,
.trial-match-form .trial-match-optional,
.trial-match-form .summary-note {
  grid-column: 1 / -1;
}

.form-section-heading,
.trial-match-side-card {
  display: grid;
  gap: 10px;
}

.form-section-heading h2,
.form-section-heading p,
.trial-match-side-card h2,
.trial-match-side-card ul,
.trial-match-card h4,
.trial-match-card h5,
.trial-match-card p,
.trial-match-card ul,
.match-card-facts {
  margin: 0;
}

.trial-match-optional {
  border: 1px solid rgba(38, 63, 36, 0.12);
  border-radius: 8px;
  background: rgba(244, 238, 223, 0.5);
  padding: 16px;
}

.trial-match-optional summary {
  color: var(--olive);
  cursor: pointer;
  font-weight: 900;
}

.trial-match-optional-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-top: 16px;
}

.trial-match-side-card {
  padding: clamp(22px, 4vw, 30px);
}

.trial-match-side-card ul,
.trial-match-card ul {
  display: grid;
  gap: 8px;
  color: var(--muted);
  padding-left: 20px;
}

.trial-match-results {
  padding-top: 30px;
}

.match-group {
  margin-top: 28px;
}

.match-group h3 {
  margin: 0 0 14px;
}

.trial-match-featured-grid,
.trial-match-grid {
  display: grid;
  gap: 16px;
}

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

.trial-match-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.trial-match-card {
  position: relative;
  display: grid;
  gap: 16px;
  align-content: start;
  padding: clamp(20px, 3vw, 28px);
}

.trial-match-card.featured {
  background:
    linear-gradient(135deg, rgba(169, 201, 90, 0.2), rgba(255, 250, 240, 0.96)),
    var(--cream-2);
  border-color: rgba(127, 161, 47, 0.42);
}

.match-label {
  display: inline-flex;
  width: fit-content;
  border-radius: 999px;
  background: rgba(169, 201, 90, 0.26);
  color: var(--olive);
  font-size: 0.78rem;
  font-weight: 900;
  margin-bottom: 10px;
  padding: 7px 10px;
}

.match-card-facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.match-card-facts div {
  min-width: 0;
  border: 1px solid rgba(38, 63, 36, 0.1);
  border-radius: 8px;
  background: rgba(244, 238, 223, 0.44);
  padding: 8px;
}

.match-card-facts dt {
  color: var(--muted);
  font-size: 0.7rem;
  font-weight: 900;
  text-transform: uppercase;
}

.match-card-facts dd {
  margin: 3px 0 0;
  color: var(--olive);
  font-size: 0.84rem;
  font-weight: 850;
  overflow-wrap: anywhere;
}

.match-card-actions,
.saved-trials-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

.saved-trials-actions {
  margin-bottom: 16px;
  align-items: end;
}

.saved-trials-list {
  display: grid;
  gap: 16px;
}

.saved-trial-card {
  display: grid;
  gap: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--cream-2);
  box-shadow: 0 10px 24px rgba(38, 63, 36, 0.08);
  padding: clamp(20px, 3vw, 28px);
}

.saved-card-select {
  display: inline-flex;
  width: fit-content;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}

.saved-card-select input {
  width: auto;
  margin: 0;
}

.saved-card-facts {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin: 0;
}

.saved-card-facts div {
  min-width: 0;
  border: 1px solid rgba(38, 63, 36, 0.1);
  border-radius: 8px;
  background: rgba(244, 238, 223, 0.44);
  padding: 9px;
}

.saved-card-facts dt {
  color: var(--muted);
  font-size: 0.7rem;
  font-weight: 900;
  text-transform: uppercase;
}

.saved-card-facts dd {
  margin: 4px 0 0;
  color: var(--olive);
  font-weight: 850;
  overflow-wrap: anywhere;
}

.saved-site-summary {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.saved-location-details {
  border: 1px solid rgba(38, 63, 36, 0.12);
  border-radius: 8px;
  background: rgba(244, 238, 223, 0.42);
  padding: 10px 12px;
}

.saved-location-details summary {
  cursor: pointer;
  color: var(--olive);
  font-weight: 900;
}

.saved-location-list {
  max-height: 260px;
  overflow: auto;
  margin-top: 10px;
  padding-right: 6px;
}

.saved-location-list ol {
  display: grid;
  gap: 8px;
  margin: 0;
  padding-left: 22px;
}

.saved-location-list li {
  break-inside: avoid;
}

.saved-location-list strong,
.saved-location-list span {
  display: block;
}

.saved-location-list span {
  color: var(--muted);
  font-size: 0.9rem;
}

.saved-print-area {
  display: none;
}

.saved-comparison-table {
  overflow-x: auto;
}

.saved-comparison-table table {
  width: 100%;
  min-width: 960px;
  border-collapse: collapse;
}

.saved-comparison-table th,
.saved-comparison-table td {
  border-bottom: 1px solid var(--line);
  padding: 13px 12px;
  text-align: left;
  vertical-align: top;
}

.saved-comparison-table th {
  color: var(--olive);
  font-size: 0.8rem;
  text-transform: uppercase;
}

.saved-comparison-table td {
  color: var(--muted);
  font-size: 0.92rem;
}

.saved-row-actions {
  display: grid;
  gap: 8px;
}

.saved-row-actions a,
.saved-row-actions button {
  width: fit-content;
  border: 0;
  background: transparent;
  color: var(--olive);
  cursor: pointer;
  font-weight: 900;
  padding: 0;
  text-align: left;
  text-decoration: underline;
}

.saved-empty {
  max-width: 760px;
}

.trial-results-heading {
  margin-top: clamp(34px, 6vw, 58px);
}

.trial-results-heading[hidden],
.trial-icon-legend[hidden] {
  display: none;
}

.trial-icon-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 18px 0 22px;
}

.trial-icon-legend span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255, 250, 240, 0.78);
  color: var(--olive);
  font-size: 0.9rem;
  font-weight: 850;
  padding: 8px 12px;
}

.trial-icon-legend strong {
  display: inline-grid;
  min-width: 28px;
  min-height: 28px;
  place-items: center;
  border-radius: 999px;
  background: rgba(169, 201, 90, 0.28);
  line-height: 1;
}

.trial-detail-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 18px;
  color: var(--muted);
  font-size: 0.92rem;
  font-weight: 850;
}

.trial-detail-breadcrumb strong {
  color: var(--olive);
}

.back-to-results {
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(169, 201, 90, 0.18);
  color: var(--olive);
  font-weight: 900;
  padding: 8px 12px;
  cursor: pointer;
}

body[data-page="learn"] .trail-node:hover span,
body[data-page="learn"] .trail-node:focus-visible span,
body[data-page="learn"] .trail-node.active span,
body[data-page="learn"] .patient-map-node:hover,
body[data-page="learn"] .patient-map-node:focus-visible,
body[data-page="learn"] .patient-map-node.active {
  box-shadow:
    0 0 0 7px rgba(169, 201, 90, 0.28),
    0 14px 26px rgba(34, 45, 30, 0.18),
    inset 0 0 0 4px rgba(255, 252, 239, 0.62);
}

body[data-page="glossary"] .info-drawer-panel {
  width: min(720px, 100%);
}

body[data-page="glossary"] .info-drawer-body {
  gap: 24px;
  margin-top: 28px;
}

body[data-page="glossary"] .info-drawer-body section {
  padding: clamp(24px, 4vw, 32px);
}

body[data-page="glossary"] .info-drawer-body p {
  line-height: 1.85;
}

body[data-page="glossary"] .related-terms,
body[data-page="glossary"] .drawer-flag-row {
  margin-top: 14px;
}

body[data-page="glossary"] .glossary-drawer-controls .segmented-control {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  border: 0;
  border-radius: 0;
  overflow: visible;
  background: transparent;
}

body[data-page="glossary"] .glossary-drawer-controls .segmented-control span {
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 8px 12px;
}

body[data-page="glossary"] .glossary-drawer-controls .segmented-control label:last-child span {
  border-right: 1px solid var(--line);
}

body[data-page="glossary"] .glossary-drawer-controls .segmented-control input:checked + span {
  background: var(--pear);
}

@media (max-width: 640px) {
  .glossary-tools,
  .glossary-accessibility-controls {
    grid-template-columns: 1fr;
  }

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

  .glossary-card {
    min-height: 0;
    padding: 20px;
  }

  .glossary-drawer-controls,
  body[data-page="glossary"] .glossary-drawer-controls .segmented-control {
    display: grid;
    grid-template-columns: 1fr;
  }

  body[data-page="glossary"] .glossary-drawer-controls .segmented-control span,
  .drawer-language-control {
    width: 100%;
  }
}

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

  .search-trials-button {
    justify-self: stretch;
  }

  .research-spotlight-carousel,
  .support-journey,
  .support-layout,
  .trial-match-layout,
  .trial-match-featured-grid,
  .trial-match-grid,
  .saved-card-facts {
    grid-template-columns: 1fr;
  }

  .support-guide-card.featured {
    grid-row: auto;
  }

  .research-article-carousel {
    grid-auto-columns: calc((100% - 18px) / 2);
  }
}

@media print {
  body[data-page="saved-trials"] header,
  body[data-page="saved-trials"] footer,
  body[data-page="saved-trials"] main > section:not(.saved-trials-section),
  body[data-page="saved-trials"] .saved-trials-actions,
  body[data-page="saved-trials"] .copy-status,
  body[data-page="saved-trials"] .saved-trials-list {
    display: none !important;
  }

  body[data-page="saved-trials"] .saved-print-area {
    display: block;
  }

  body[data-page="saved-trials"] .page-shell {
    width: 100%;
    padding: 0;
  }

  .saved-print-document {
    color: #111;
    font-family: Georgia, "Times New Roman", serif;
  }

  .saved-print-document article {
    break-inside: avoid;
    border-bottom: 1px solid #bbb;
    padding: 0 0 18px;
    margin: 0 0 18px;
  }
}

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

  .advanced-search-drawer {
    padding: 16px;
  }

  .trial-icon-legend {
    display: grid;
  }

  .trial-detail-breadcrumb {
    align-items: flex-start;
  }

  body[data-page="glossary"] .info-drawer-panel {
    width: 100%;
    height: min(86svh, 760px);
  }

  .header-utilities {
    position: static;
    order: 3;
    flex: 1 0 100%;
    justify-content: flex-start;
    gap: 6px;
  }

  .trial-match-utility,
  .feedback-utility,
  .saved-trials-link {
    min-height: 34px;
    padding: 6px 10px;
  }

  .search-primary-section {
    grid-template-columns: 1fr;
  }

  .trial-match-form,
  .trial-match-optional-grid,
  .match-card-facts,
  .support-guide-step {
    grid-template-columns: 1fr;
  }

  .spotlight-feature {
    min-height: auto;
  }

  .hero-brand-lockup,
  .hero-logo {
    width: min(500px, 90vw);
  }
}

@media print {
  .site-header,
  .site-footer,
  .site-ambient-leaves,
  .saved-trials-actions,
  .header-utilities {
    display: none !important;
  }

  body {
    background: #fff;
  }

  .page-shell {
    width: 100%;
    padding: 20px 0;
  }
}

/* Shared UX foundation pass: compact shell, stable cards, and route-friendly responsive behavior. */
body {
  overflow-x: clip;
}

.page-shell,
.site-header,
.forest-hero,
.storybook-trail,
.research-article-carousel,
.path-option-grid {
  max-width: 100%;
}

.button.secondary:hover,
.button.secondary:focus-visible {
  background: rgba(169, 201, 90, 0.18);
  color: var(--olive);
}

.button.tertiary:hover,
.button.tertiary:focus-visible {
  color: var(--olive-2);
  outline: 3px solid rgba(169, 201, 90, 0.28);
  outline-offset: 4px;
}

body[data-page="home"] .trail-section {
  padding-top: clamp(30px, 5vw, 58px);
}

body[data-page="learn"] .compact-hero h1 {
  font-size: clamp(2.15rem, 4.2vw, 3.7rem);
}

body[data-page="learn"] .story-module {
  padding-top: clamp(34px, 5vw, 62px);
  padding-bottom: clamp(30px, 5vw, 58px);
}

body[data-page="learn"] .learn-cancer-overview {
  border-top: 1px solid rgba(38, 63, 36, 0.1);
}

body[data-page="learn"] .learn-cancer-overview .section-heading {
  max-width: 840px;
}

@media (max-width: 1180px) {
  .site-header {
    gap: 6px;
    padding-inline: clamp(8px, 1.4vw, 18px);
  }

  .brand {
    flex-basis: 156px;
    max-width: 156px;
  }

  .brand-logo {
    width: 156px;
  }

  .site-nav a {
    font-size: 0.72rem;
    padding-inline: 5px;
  }

  .saved-trials-link,
  .trial-match-utility,
  .feedback-utility {
    font-size: 0.7rem;
    padding-inline: 6px;
  }
}

@media (max-width: 1020px) {
  .brand {
    flex-basis: 140px;
    max-width: 140px;
  }

  .brand-logo {
    width: 140px;
  }

  .site-header {
    padding-inline: 8px;
  }

  .site-nav {
    gap: 0;
  }

  .site-nav a {
    font-size: 0.7rem;
    padding-inline: 4px;
  }
}

@media (max-width: 920px) {
  .site-header {
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 12px;
  }

  .brand {
    flex-basis: auto;
    max-width: min(52vw, 170px);
  }

  .brand-logo {
    width: clamp(138px, 42vw, 170px);
  }

  .nav-toggle {
    display: block;
    margin-left: auto;
  }

  .site-nav {
    position: absolute;
    top: calc(100% + 8px);
    right: 18px;
    left: 18px;
    display: none;
    flex-direction: column;
    align-items: stretch;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--cream-2);
    box-shadow: var(--shadow);
    padding: 10px;
  }

  .site-nav.open {
    display: flex;
  }

  .header-utilities {
    order: 3;
    flex: 1 0 100%;
    justify-content: flex-start;
    gap: 6px;
  }
}

@media (max-width: 980px) {
  .home-path-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .home-path-grid .path-option-card,
  .home-path-grid .path-option-card-featured {
    grid-column: auto;
  }

  .learn-path-overview .card-grid.three {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  .site-header {
    padding-block: 5px;
  }

  .brand {
    flex-basis: auto;
    max-width: min(56vw, 170px);
  }

  .brand-logo {
    width: clamp(138px, 48vw, 170px);
  }

  .header-utilities {
    order: 3;
    flex-basis: 100%;
  }

  .saved-trials-link,
  .trial-match-utility,
  .feedback-utility {
    font-size: 0.74rem;
    min-height: 34px;
  }

  .forest-hero {
    min-height: auto;
    padding-top: 96px;
  }

  .hero-content {
    padding-bottom: 58px;
  }

  .hero-logo,
  .hero-brand-lockup {
    width: min(360px, 88vw);
  }

  .home-path-grid,
  .path-option-grid {
    grid-template-columns: 1fr;
  }

  .research-carousel-shell {
    grid-template-columns: 1fr;
  }

  .research-carousel-shell .spotlight-arrow {
    display: none;
  }

  .research-article-carousel {
    grid-auto-columns: min(86vw, 360px);
  }

  .info-drawer {
    align-items: end;
    justify-items: stretch;
  }

  .info-drawer-panel {
    width: 100%;
    height: min(86svh, 760px);
    border-top: 1px solid var(--line);
    border-left: 0;
    border-radius: 16px 16px 0 0;
    box-shadow: 0 -18px 34px rgba(38, 63, 36, 0.16);
  }
}

/* Focused final polish pass: privacy, responsive controls, and calmer interaction states. */
.site-header {
  flex-wrap: nowrap;
}

.site-nav,
.header-utilities {
  flex-wrap: nowrap;
}

.site-nav {
  min-width: max-content;
}

.brand {
  flex-shrink: 1;
}

.beta-badge--nav {
  white-space: nowrap;
}

@media (max-width: 1180px) {
  .brand {
    flex-basis: 136px;
    max-width: 136px;
  }

  .brand-logo {
    width: 136px;
  }

  .site-nav a {
    font-size: 0.68rem;
    padding-inline: 3px;
  }

  .saved-trials-link,
  .trial-match-utility,
  .feedback-utility {
    font-size: 0.66rem;
    padding-inline: 5px;
  }
}

@media (max-width: 980px) {
  .site-header {
    flex-wrap: wrap;
  }

  .site-nav {
    min-width: 0;
  }
}

.home-path-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: stretch;
}

.home-path-grid .path-option-card,
.home-path-grid .path-option-card-featured {
  grid-column: auto;
  min-height: 100%;
}

.path-option-card {
  grid-template-rows: auto auto 1fr auto;
}

.path-option-card em {
  align-self: end;
  margin-top: auto;
}

.soft-icon svg {
  width: 1.12em;
  height: 1.12em;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2.25;
}

.research-article-card a {
  height: 100%;
}

.spotlight-link {
  display: inline-flex;
  width: fit-content;
  margin-top: auto;
  border-radius: 999px;
  color: var(--olive);
  font-size: 0.88rem;
  padding: 7px 10px;
}

.research-article-card:hover .spotlight-link,
.research-article-card:focus-within .spotlight-link {
  background: rgba(169, 201, 90, 0.2);
}

body[data-page="learn"] .compact-hero h1 {
  font-size: clamp(2.4rem, 5vw, 4.2rem);
}

body[data-page="learn"] .trail-node:hover,
body[data-page="learn"] .trail-node:focus-visible,
body[data-page="learn"] .patient-map-node:hover,
body[data-page="learn"] .patient-map-node:focus-visible {
  box-shadow: 0 10px 24px rgba(38, 63, 36, 0.13);
  transform: translate(-50%, -50%);
}

body[data-page="learn"] .trail-node:hover span,
body[data-page="learn"] .trail-node:focus-visible span,
body[data-page="learn"] .patient-map-node:hover span,
body[data-page="learn"] .patient-map-node:focus-visible span {
  transform: none;
}

.button.tertiary:hover {
  outline: none;
}

.button.tertiary:focus-visible {
  outline: 3px solid rgba(169, 201, 90, 0.72);
  outline-offset: 3px;
}

.more-category-disclosure {
  display: inline-block;
}

.more-category-disclosure summary {
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255, 250, 240, 0.72);
  color: var(--olive);
  cursor: pointer;
  font-weight: 850;
  padding: 8px 12px;
}

.more-category-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
  max-width: min(760px, calc(100vw - 40px));
}

.question-context-details {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 250, 240, 0.7);
  margin-bottom: 18px;
  padding: 14px 16px;
}

.question-context-details summary {
  color: var(--olive);
  cursor: pointer;
  font-weight: 900;
}

.question-context-details .question-context-panel {
  margin-top: 14px;
}

.custom-question-list .button,
.custom-question-list button {
  border: 1px solid rgba(38, 63, 36, 0.18);
  border-radius: 999px;
  background: rgba(255, 250, 240, 0.82);
  color: var(--olive);
  font-weight: 850;
  padding: 6px 10px;
}

.rating-row {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
}

.rating-row label {
  display: inline-flex;
  min-height: 42px;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255, 250, 240, 0.72);
  color: var(--olive);
  font-size: 0.9rem;
  font-weight: 850;
  padding: 8px 10px;
  text-align: center;
}

.rating-row input {
  flex: 0 0 auto;
  width: auto;
  margin: 0;
}

.rating-row label:has(input:checked) {
  border-color: rgba(127, 161, 47, 0.52);
  background: rgba(169, 201, 90, 0.24);
}

.founder-card img {
  aspect-ratio: 4 / 5;
  width: min(280px, 100%);
  height: auto;
  object-fit: cover;
  object-position: 50% 24%;
  border-radius: 8px;
}

body[data-page="about"] .simple-card a,
body[data-page="about"] .founder-card a {
  color: var(--olive);
  font-weight: 850;
  text-decoration: none;
  text-underline-offset: 0.18em;
}

body[data-page="about"] .simple-card a:hover,
body[data-page="about"] .simple-card a:focus-visible,
body[data-page="about"] .founder-card a:hover,
body[data-page="about"] .founder-card a:focus-visible {
  text-decoration: underline;
}

.saved-trials-actions {
  align-items: center;
}

.saved-card-select,
.save-trial-button.saved {
  border: 1px solid rgba(127, 161, 47, 0.34);
  border-radius: 999px;
  background: rgba(169, 201, 90, 0.16);
  color: var(--olive);
  font-weight: 900;
  padding: 7px 10px;
}

.match-card-actions .button.tertiary,
.saved-trial-card .button.tertiary {
  border: 1px solid rgba(38, 63, 36, 0.18);
  border-radius: 999px;
  background: rgba(255, 250, 240, 0.72);
  color: var(--olive);
  padding: 8px 12px;
}

@media (max-width: 1024px) {
  .home-path-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .question-builder-layout {
    grid-template-columns: 1fr;
  }

  .question-builder-summary {
    position: static;
  }
}

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

  .rating-row label {
    justify-content: flex-start;
    text-align: left;
  }
}