/* Editorial Research: the client's layered scientific illustration in both themes. */
body:has(.home-hub) {
  --home-content-gutter: max(6vw, calc((100vw - 1440px) / 2));
}
.home-landing {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  --home-stage-gutter: var(--home-content-gutter);
  --home-copy-inset: clamp(0px, 2vw, 32px);
  --home-landing-bg: linear-gradient(118deg, #f8fbff, #fffafb 50%, #eff6ff);
  --home-landing-ink: #15335f;
  --home-landing-muted: #52698a;
  --home-landing-card: linear-gradient(145deg, rgb(255 255 255 / 76%), rgb(248 251 255 / 50%));
  --home-landing-card-border: rgb(178 197 223 / 46%);
  --home-landing-card-shade: rgb(239 246 253 / 96%);
  --home-landing-pink: #bd3d60;
  --home-landing-hover-border: #b7cad8;
  --home-landing-blue: #23548a;
  --home-landing-hand: #47618e;
  --home-landing-side-ink: #52698a;
  --home-landing-side-rule: #274a7a;
  --home-landing-side-accent: #d94d72;
  --home-landing-shadow: rgb(45 78 125 / 9%);
  --home-landing-wash: linear-gradient(rgb(255 255 255 / 12%), rgb(255 255 255 / 36%));
  --home-landing-glow-opacity: .42;
  background: var(--home-landing-bg);
}

.home-landing-stage {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 32px var(--home-stage-gutter) 22px;
  color: var(--home-landing-ink);
}

.home-landing::before {
  position: absolute;
  z-index: 0;
  top: 20px;
  left: 0;
  /* End the motif at least 24px before the copy, including during its drift. */
  width: min(176px, calc(var(--home-stage-gutter) + var(--home-copy-inset) - 24px));
  height: 480px;
  background: url("../img/home/dna-helix-client-oct17.png") -30px top / auto 480px no-repeat;
  mask-image: linear-gradient(to bottom, transparent, #000 10%, #000 72%, transparent),
    linear-gradient(to right, #000 65%, transparent);
  mask-composite: intersect;
  content: "";
  opacity: 0.24;
  filter: saturate(0.85) brightness(0.72) contrast(1.15);
  pointer-events: none;
  animation: home-dna-drift 8s ease-in-out infinite;
}

/* Blur only the atmospheric lights, never the scientific artwork or text. */
.home-landing-atmosphere {
  position: absolute;
  inset: 0;
  background: var(--home-landing-wash);
  pointer-events: none;
}
.home-landing-atmosphere::before,
.home-landing-atmosphere::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  filter: blur(28px);
  opacity: var(--home-landing-glow-opacity);
}
.home-landing-atmosphere::before {
  width: clamp(160px, 19vw, 330px);
  aspect-ratio: 1;
  left: 34%;
  top: 8%;
  background: #f5cad6;
}
.home-landing-atmosphere::after {
  width: clamp(240px, 28vw, 440px);
  aspect-ratio: 1;
  right: 4%;
  top: 22%;
  background: #cfe4ff;
}

.home-landing-hero {
  display: grid;
  grid-template-columns: minmax(0, 46fr) minmax(0, 54fr);
  gap: clamp(16px, 2.4vw, 44px);
  align-items: start;
  position: relative;
  z-index: 1;
}

/* ---- left copy column ---- */
.home-landing-copy {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
  align-self: stretch;
  padding: 0 0 0 var(--home-copy-inset);
}

.home-landing-eyebrow {
  margin: 0 0 12px;
  color: var(--home-landing-muted);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.24em;
  text-transform: uppercase;
}

.home-landing-wordmark {
  margin: 0 0 12px;
  color: var(--home-landing-ink);
  font-size: clamp(3rem, 5.4vw, 5.35rem);
  font-weight: 850;
  letter-spacing: -0.045em;
  line-height: 0.98;
  white-space: nowrap;
}

.home-landing-wordmark .mho-wordmark-accent {
  color: var(--home-landing-wordmark-accent, var(--home-landing-pink));
}

.home-landing-subtitle {
  max-width: 30ch;
  margin: 0 0 12px;
  color: var(--home-landing-ink);
  font-size: clamp(1.5rem, 2.15vw, 2.1rem);
  font-weight: 750;
  line-height: 1.16;
}
.home-landing-subtitle span { display: block; }
.home-landing-description {
  max-width: 54ch;
  margin: 0 0 20px;
  color: var(--home-landing-muted);
  font-size: clamp(.88rem, .98vw, 1rem);
  line-height: 1.55;
}

/* ---- hero search pill ---- */
.home-landing-search {
  display: flex;
  align-items: center;
  width: min(100%, 600px);
  min-height: 56px;
  padding: 5px;
  border: 1px solid #dce4eb;
  border-radius: 30px;
  background: rgb(255 255 255 / 85%);
  box-shadow: 0 9px 24px var(--home-landing-shadow);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  transition: border-color .16s ease, box-shadow .16s ease;
}

.home-landing-search svg {
  width: 20px;
  height: 20px;
  margin: 0 11px 0 16px;
  flex: 0 0 auto;
  fill: none;
  stroke: #68849a;
  stroke-width: 1.7;
}

.home-landing-search input {
  width: 100%;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: #17334c;
  font-size: 0.96rem;
}

.home-landing-search input::placeholder,
html[data-theme="dark"] .home-landing-search input::placeholder { color: #5f7489; }
.home-landing-search:focus-within { outline: 3px solid rgb(143 199 238 / 30%); }

.home-landing-search button {
  align-self: stretch;
  min-width: 110px;
  padding: 0 22px;
  border: 0;
  border-radius: 26px;
  background: var(--home-landing-pink);
  color: #fff;
  font-weight: 700;
  transition: background-color .18s ease, box-shadow .18s ease;
}

/* ---- CTAs ---- */
.home-landing-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: 16px 0 24px;
}

.home-landing-actions .home-landing-or {
  margin: 0 2px 0 0;
  color: var(--home-landing-muted);
  font-size: 0.82rem;
}

.home-landing-actions a {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-height: 42px;
  padding: 0 16px;
  border: 1px solid #dfe7ee;
  border-radius: 24px;
  background: rgb(255 255 255 / 72%);
  color: #244968;
  font-size: 0.86rem;
  font-weight: 700;
  text-decoration: none;
  transition: background-color .16s ease, border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}

.home-landing-actions a:focus-visible {
  border-color: var(--home-landing-pink);
  background: #f4f8fb;
  color: #153956;
  outline: 2px solid rgb(189 61 96 / 45%);
  outline-offset: 2px;
}

/* ---- metric tiles (sourced values only; reference-style icons) ---- */
.home-landing-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  width: min(100%, 760px);
  gap: 10px;
  margin-top: auto;
}

.home-landing-metric {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 0;
  min-height: 112px;
  padding: 14px 10px;
  border: 1px solid var(--home-landing-card-border);
  border-radius: 10px;
  background: var(--home-landing-card);
  box-shadow: 0 12px 28px var(--home-landing-shadow), inset 0 1px 0 rgb(255 255 255 / 28%);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  text-align: center;
}

.home-landing-metric-icon {
  display: block;
  width: 44px;
  height: 44px;
  object-fit: contain;
}

.home-landing-metric strong {
  color: var(--home-landing-blue);
  font-size: clamp(1.12rem, 1.45vw, 1.45rem);
  font-variant-numeric: tabular-nums;
  line-height: 1.05;
  letter-spacing: -0.01em;
  white-space: nowrap;
}

.home-landing-metric span {
  margin-top: 1px;
  color: var(--home-landing-muted);
  font-size: 0.7rem;
  line-height: 1.2;
}

/* ---- right anatomy composition (full uncropped figure + inset + labels) ---- */
.home-landing-anatomy {
  position: relative;
  min-width: 0;
  align-self: center;
}

.home-landing-anatomy-inner {
  position: relative;
  width: 100%;
  aspect-ratio: 1.4;
}

/* Art and its leader lines share one transform and one intrinsic coordinate space. */
.home-landing-anatomy-primary {
  position: absolute;
  top: 2%;
  left: 1%;
  width: 56%;
  aspect-ratio: 4 / 5;
  animation: home-art-float 6s ease-in-out infinite;
}

.home-landing-anatomy-img {
  display: block;
  height: auto;
  width: 100%;
  filter: drop-shadow(0 12px 18px rgb(154 91 106 / 12%));
}

.home-landing-inset {
  position: absolute;
  top: max(24%, 132px);
  right: 0;
  z-index: 2;
  width: 38%;
  margin: 0;
  text-align: center;
  animation: home-art-float 7.2s ease-in-out -2.3s infinite;
}

.home-landing-inset img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 8px 14px rgb(156 94 117 / 12%));
}

.home-landing-inset figcaption {
  margin-top: 12px;
  text-align: right;
  color: var(--home-landing-muted);
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  line-height: 1.4;
  text-transform: uppercase;
}

/* Reference .mho-handline: italic Segoe Script, muted slate blue, rotated -6deg. */
.home-landing-tagline {
  position: absolute;
  z-index: 2;
  right: 0;
  top: max(12%, 60px);
  width: max-content;
  max-width: 44%;
  margin: 0;
  color: var(--home-landing-hand);
  font-family: "Segoe Script", "Bradley Hand", "Kaiti SC", KaiTi, STKaiti, cursive;
  font-style: italic;
  font-size: 21px;
  line-height: 1.12;
  text-align: right;
  transform: rotate(-6deg);
}
.home-landing-tagline span { display: block; }

/* Reference .mho-side-copy-top corner motif: small caps stack with left rule
   and short pink top rule. English in both locales, decorative (aria-hidden). */
.home-landing-side-copy {
  position: absolute;
  z-index: 2;
  top: 0;
  right: 12px;
  padding-left: 11px;
  border-left: 1px solid var(--home-landing-side-rule);
  color: var(--home-landing-side-ink);
  font-size: 8.5px;
  line-height: 1.45;
  letter-spacing: 0.24em;
  text-transform: uppercase;
}
.home-landing-side-copy span { display: block; }
.home-landing-side-copy::before {
  position: absolute;
  top: 0;
  left: -1px;
  width: 36px;
  border-top: 1px solid var(--home-landing-side-accent);
  content: "";
}

@keyframes home-art-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-5px); }
}
@keyframes home-dna-drift {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(12px); }
}

/* anatomical leader-line labels (bilingual HTML text, % anchored to the figure) */
.home-landing-anatomy-label {
  position: absolute;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--home-landing-ink);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.home-landing-anatomy-label i {
  width: clamp(26px, 3.4vw, 50px);
  height: 1px;
  flex: 0 0 auto;
  background: var(--home-landing-muted);
}

.home-landing-anatomy-label.is-vas i,
.home-landing-anatomy-label.is-seminal i,
.home-landing-anatomy-label.is-prostate i { width: clamp(54px, 6vw, 98px); }

.home-landing-anatomy-label.is-epididymis i,
.home-landing-anatomy-label.is-testis i { width: clamp(40px, 5vw, 80px); }

.home-landing-anatomy-label b {
  width: 6px;
  height: 6px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--home-landing-blue);
}

.home-landing-anatomy-label.is-vas { top: 12%; left: 29%; transform: translateX(-100%); }
.home-landing-anatomy-label.is-seminal { top: 27%; left: 35%; transform: translateX(-100%); }
.home-landing-anatomy-label.is-prostate { top: 38%; left: 47%; transform: translateX(-100%); }
.home-landing-anatomy-label.is-epididymis { top: 68%; left: 91%; flex-direction: row-reverse; }
.home-landing-anatomy-label.is-testis { top: 81%; left: 78%; flex-direction: row-reverse; }

/* ---- reference card row 1 : 2.1 : 1 : 1 ---- */
.home-landing-topics {
  display: grid;
  grid-template-columns: 1fr 2.1fr 1fr 1fr;
  gap: 14px;
  padding: 0 var(--home-content-gutter) 28px;
  position: relative;
  z-index: 1;
}

.home-landing-topic {
  position: relative;
  display: grid;
  place-items: center;
  height: 250px;
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--home-landing-card-border);
  border-radius: 12px;
  background: var(--home-landing-card);
  box-shadow: 0 8px 22px var(--home-landing-shadow);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}

.home-landing-topic::after {
  position: absolute;
  inset: 40% 0 0;
  background: linear-gradient(transparent, var(--home-landing-card-shade));
  content: "";
  pointer-events: none;
}

.home-landing-topic img {
  display: block;
  width: 90%;
  height: 200px;
  object-fit: contain;
  filter: drop-shadow(0 6px 12px rgb(0 0 0 / 20%));
}

.home-landing-topic h2 {
  position: absolute;
  z-index: 1;
  right: 14px;
  bottom: 14px;
  left: 14px;
  margin: 0;
  color: var(--home-landing-ink);
  font-size: 0.96rem;
  font-weight: 700;
  line-height: 1.25;
  text-align: center;
}

.home-landing-topic.is-spermatogenesis {
  display: flex;
  align-items: center;
  gap: 4%;
  padding: 0 12px 22px;
}

.home-landing-topic.is-spermatogenesis .home-landing-tubule {
  width: 36%;
  height: 200px;
}

.home-landing-topic.is-spermatogenesis .home-landing-sequence {
  width: 60%;
  height: 122px;
}

/* Keep the existing organ drawer available beside Explore Datasets without
   floating an unrelated chevron over the new first-screen composition.
   Anchor the drawer to the viewport's left edge instead of the centered hub
   shell: (100% - 100vw) / 2 is the negative of the shell's auto margin, so
   the open panel sits flush at x=0 on any viewport width. */
.home-hub-body { position: relative; }
.home-hub-body > .home-category-drawer {
  position: absolute;
  top: 0;
  bottom: auto;
  left: calc((100% - 100vw) / 2);
  height: 332px;
}

/* Dark theme: the panel surface is already dark via --bioatlas-surface, but
   its navy text tokens stay near-black under dark mode. Recolor the drawer's
   title, category labels, counts, note and handle for legibility without
   touching other homepage cards. */
html[data-theme="dark"] .home-category-drawer-panel h2,
html[data-theme="dark"] .home-category-name strong { color: #e4eef6; }
html[data-theme="dark"] .home-hub-kicker,
html[data-theme="dark"] .home-category-drawer-handle { color: #8ed4ec; }
html[data-theme="dark"] .home-category-count { background: #263f51; color: #dcebf5; }
html[data-theme="dark"] .home-category-drawer-note { color: #a6b8c8; }
html[data-theme="dark"] .home-category-drawer-toggle:focus-visible ~ .home-category-drawer-handle {
  outline-color: rgb(142 212 236 / 55%);
}

html[data-theme="dark"] .home-landing {
  --home-landing-bg: linear-gradient(118deg, #101c2b, #1a1d2b 48%, #122236);
  --home-landing-ink: #eaf1ff;
  --home-landing-muted: #c0cfe3;
  --home-landing-card: rgb(22 36 47 / 72%);
  --home-landing-card-border: rgb(255 255 255 / 16%);
  --home-landing-card-shade: rgb(22 36 47 / 96%);
  --home-landing-pink: #c84368;
  --home-landing-hover-border: #57758a;
  --home-landing-wordmark-accent: #f07898;
  --home-landing-blue: #a9d2f5;
  --home-landing-hand: #7086b2;
  --home-landing-side-ink: #5e75a0;
  --home-landing-side-rule: #3a5a86;
  --home-landing-side-accent: #d94d72;
  --home-landing-shadow: rgb(4 12 20 / 14%);
  --home-landing-wash: linear-gradient(rgb(255 255 255 / 15%), rgb(255 255 255 / 32%));
  --home-landing-glow-opacity: .30;
}

/* Keep the darker theme's motif subdued while preserving its fine detail. */
html[data-theme="dark"] .home-landing::before {
  opacity: 0.18;
  filter: saturate(0.8) brightness(1.12);
}

/* ---- reference-style benefit strip between topic cards and Explore ---- */
.mho-benefit-strip {
  --mho-strip-bg: rgb(255 255 255 / 92%);
  --mho-strip-border: #c4d1df;
  --mho-strip-cta-from: #d76680;
  --mho-strip-cta-to: #bc3b5e;
  position: relative;
  z-index: 1;
  border-top: 1px solid var(--mho-strip-border);
  border-bottom: 1px solid var(--mho-strip-border);
  background: var(--mho-strip-bg);
}

.mho-benefit-strip-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 6px 22px;
  min-height: 74px;
  width: calc(100% - 2 * var(--home-content-gutter));
  margin-inline: auto;
  padding: 10px 0;
  color: var(--home-landing-muted);
}

.mho-benefit-items {
  display: grid;
  grid-template-columns: repeat(4, max-content);
  justify-content: space-between;
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  padding: 0 18px 0 0;
  border-right: 1px solid var(--mho-strip-border);
  list-style: none;
}

.mho-benefit-item {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  min-height: 44px;
  padding: 0 10px;
  font-size: 0.74rem;
  font-weight: 600;
  line-height: 1.3;
  white-space: nowrap;
}
.mho-benefit-item + .mho-benefit-item { border-left: 1px solid var(--mho-strip-border); }

.mho-benefit-icon {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  fill: none;
  stroke: var(--home-landing-blue);
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.mho-benefit-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex: 0 0 auto;
  min-height: 44px;
  padding: 0 26px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--mho-strip-cta-from), var(--mho-strip-cta-to));
  color: #fff;
  font-size: 0.84rem;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  justify-self: end;
  transition: filter .16s ease, transform .16s ease, box-shadow .16s ease;
}
.mho-benefit-cta:focus-visible {
  filter: brightness(1.06);
  color: #fff;
  outline: 2px solid rgb(189 61 96 / 55%);
  outline-offset: 2px;
}

.mho-benefit-slogan {
  grid-column: 1 / -1;
  justify-self: end;
  flex: 0 0 auto;
  margin: 0 0 0 auto;
  color: var(--home-landing-muted);
  font-size: 0.56rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  line-height: 1.5;
  text-align: right;
  text-transform: uppercase;
  white-space: nowrap;
}

html[data-theme="dark"] .mho-benefit-strip {
  --mho-strip-bg: #16242f;
  --mho-strip-border: rgb(255 255 255 / 14%);
  --mho-strip-cta-from: #d76680;
  --mho-strip-cta-to: #bc3b5e;
}

/* ---- restrained micro-emphasis hover (Editorial Research) ----
   Gentle lift, deepened shadow and tinted border on showcase/stat cards and
   interactive controls. Motion stays secondary and never changes layout.
   Scoped to fine pointers so touch devices do not get a sticky hover. */
.home-landing-topic,
.home-landing-metric,
.home-hub-explore,
.home-featured-card {
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

@media (hover: hover) and (pointer: fine) {
  .home-landing-topic:hover,
  .home-landing-metric:hover,
  .home-hub-explore:hover,
  .home-featured-card:hover {
    transform: translateY(-2px);
    border-color: var(--home-landing-hover-border);
    box-shadow: 0 13px 26px var(--home-landing-shadow);
  }

  .home-hub-explore:hover,
  .home-featured-card:hover {
    border-color: #b7cad8;
    box-shadow: 0 9px 20px rgb(12 46 72 / 13%);
  }

  html[data-theme="dark"] .home-landing-topic:hover,
  html[data-theme="dark"] .home-landing-metric:hover {
    box-shadow: 0 13px 26px rgb(4 12 20 / 26%);
  }

  html[data-theme="dark"] .home-hub-explore:hover,
  html[data-theme="dark"] .home-featured-card:hover {
    border-color: #57758a;
    box-shadow: 0 9px 20px rgb(0 0 0 / 28%);
  }

  .home-landing-search:hover {
    border-color: #ccd9e3;
    box-shadow: 0 11px 26px var(--home-landing-shadow);
  }

  .home-landing-search button:hover {
    background: #e05279;
    box-shadow: 0 6px 14px rgb(190 60 93 / 28%);
  }

  .home-landing-actions a:hover {
    border-color: #e6ecf2;
    background: #f4f8fb;
    color: #153956;
    box-shadow: 0 6px 14px var(--home-landing-shadow);
    transform: translateY(-1px);
  }

  .mho-benefit-cta:hover {
    filter: brightness(1.06);
    color: #fff;
    box-shadow: 0 8px 18px rgb(191 58 92 / 26%);
    transform: translateY(-1px);
  }
}

@media (max-width: 1500px) {
  .home-landing-anatomy-label.is-vas,
  .home-landing-anatomy-label.is-seminal,
  .home-landing-anatomy-label.is-prostate { display: none; }
  .home-landing-side-copy { display: none; }
  .home-landing-inset figcaption { font-size: .55rem; }
  .home-landing-tagline { top: max(9%, 32px); font-size: 18px; }
  .home-landing-inset { top: max(21%, 96px); width: 36%; }
}

@media (max-width: 1100px) {
  body:has(.home-hub) { --home-content-gutter: 24px; }
  /* Compact layouts need their side margins for content. */
  .home-landing::before { display: none; }
  .home-landing-stage { padding-inline: 24px; }
  .home-landing-topics { padding-inline: 24px; }
  .home-landing-hero { gap: 24px; }
  .home-landing-copy { padding-left: 0; }
  .home-landing-metrics { gap: 8px; }
  .home-landing-metric { min-height: 106px; padding-inline: 8px; }
  .home-landing-anatomy-label { font-size: .68rem; }
}

@media (max-width: 1000px) {
  .home-landing-hero { grid-template-columns: minmax(0, 1fr); gap: 26px; }
  .home-landing-copy { width: min(100%, 720px); margin-inline: auto; }
  .home-landing-metrics { margin-top: 0; }
  .home-landing-anatomy { width: min(100%, 760px); margin-inline: auto; }
  .home-landing-topics { grid-template-columns: 1fr 1fr; }
  .home-landing-anatomy-label.is-epididymis i,
  .home-landing-anatomy-label.is-testis i { width: 28px; }
}

@media (min-width: 1001px) and (max-width: 1100px) {
  /* Keep the inset caption above the neighbouring epididymis annotation. */
  .home-landing-inset { top: max(calc(21% - 24px), 72px); }
}

@media (max-width: 700px) {
  body:has(.home-hub) { --home-content-gutter: 16px; }
  .home-landing-stage { padding: 22px 16px 24px; }
  .home-landing-hero { display: block; min-height: 0; }
  .home-landing-copy { padding: 4px 0 8px; }
  .home-landing-eyebrow { font-size: .62rem; letter-spacing: .18em; }
  .home-landing-wordmark { font-size: 2.55rem; margin-bottom: 10px; }
  .home-landing-subtitle { max-width: none; margin-bottom: 10px; font-size: 1.45rem; }
  .home-landing-description { margin-bottom: 18px; font-size: .84rem; }
  .home-landing-search { min-height: 48px; }
  .home-landing-search svg { margin-left: 11px; margin-right: 7px; }
  .home-landing-search input { font-size: .87rem; }
  .home-landing-search button { min-width: 84px; padding: 0 14px; font-size: .83rem; }
  .home-landing-actions a { min-height: 44px; }
  .home-landing-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin-top: 0;
  }
  .home-landing-metric { min-height: 96px; padding: 12px 8px; }
  .home-landing-metric strong { font-size: 1.08rem; }
  .home-landing-metric span { font-size: .66rem; }
  .home-landing-anatomy { margin-top: 20px; }
  .home-landing-inset { top: max(30%, 70px); }
  .home-landing-inset figcaption { margin-top: 9px; font-size: .53rem; letter-spacing: .1em; }
  .home-landing-tagline { top: max(11%, 30px); width: 44%; font-size: clamp(.72rem, 2.7vw, .9rem); }
  .home-landing-anatomy-label { display: none; }
  .home-landing-topics {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: calc(100vw - 40px);
    grid-template-columns: none;
    gap: 9px;
    overflow-x: auto;
    padding: 20px 16px 22px;
    scroll-snap-type: x mandatory;
  }
  .home-landing-topic { height: 190px; scroll-snap-align: start; }
  .home-landing-topic img { height: 150px; }
  .home-landing-topic.is-spermatogenesis .home-landing-tubule { height: 150px; }
  .home-landing-topic.is-spermatogenesis .home-landing-sequence { height: 90px; }
}

@media (prefers-reduced-motion: reduce) {
  .home-landing::before,
  .home-landing-anatomy-primary,
  .home-landing-inset { animation: none; }
  .home-landing-topic,
  .home-landing-metric,
  .home-hub-explore,
  .home-featured-card,
  .home-landing-search,
  .home-landing-search button,
  .home-landing-actions a,
  .mho-benefit-cta { transition: none; }
  .home-landing-topic:hover,
  .home-landing-metric:hover,
  .home-hub-explore:hover,
  .home-featured-card:hover,
  .home-landing-actions a:hover,
  .mho-benefit-cta:hover { transform: none; }
}

@media (min-width: 1101px) and (max-width: 1399px) {
  .mho-benefit-strip-inner { column-gap: 14px; }
  .mho-benefit-items { padding-right: 10px; }
  .mho-benefit-item { gap: 6px; padding-inline: 6px; font-size: .7rem; }
  .mho-benefit-cta { padding-inline: 20px; }
}

@media (max-width: 1100px) {
  .mho-benefit-strip-inner { grid-template-columns: 1fr auto; gap: 6px 18px; }
  .mho-benefit-items { grid-column: 1 / -1; grid-template-columns: 1fr 1fr; padding-right: 0; border-right: 0; }
  .mho-benefit-cta { grid-column: 2; }
  .mho-benefit-item { padding-inline: 12px; }
  .mho-benefit-item:nth-child(3) { border-left: 0; }
}

@media (max-width: 700px) {
  .mho-benefit-strip-inner { padding-block: 12px; }
  .mho-benefit-item { gap: 8px; min-height: 40px; padding-inline: 10px; font-size: 0.74rem; white-space: normal; }
  .mho-benefit-icon { width: 18px; height: 18px; }
  .mho-benefit-cta { grid-column: 1 / -1; }
  .mho-benefit-slogan { max-width: 100%; letter-spacing: .06em; }
}

@media (max-width: 440px) {
  .mho-benefit-slogan { font-size: .5rem; letter-spacing: .03em; }
  .mho-benefit-items { grid-template-columns: 1fr; }
  .mho-benefit-item + .mho-benefit-item { border-left: 0; }
  .mho-benefit-item { padding-inline: 0; }
}