/* The learning loop and its next steps read as consecutive pages. */
.hero h1 .highlight { white-space: normal; }

.flow-story-page--guidance { margin-top: 36px; }
.life-link-header {
  flex: 0 0 auto;
  width: min(960px, 100%);
  margin: 0 auto 16px;
  text-align: center;
}
.life-link-visual {
  --life-card-height: 292px;
  --life-bridge-width: clamp(64px, 11vw, 176px);
  --life-source-height: 110px;
  padding: 18px 8px 16px;
}
.life-link-source {
  position: relative;
  z-index: 1;
  width: min(400px, 100%);
  height: var(--life-source-height);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  margin: 0 auto 14px;
}
.life-link-source > span {
  color: var(--text-secondary);
  font-family: "Atkinson Hyperlegible Mono", ui-monospace, monospace;
  font-size: 10px;
  line-height: 14px;
}
.life-link-source-graph { display: block; width: 100%; height: calc(var(--life-source-height) - 22px); overflow: visible; }
.life-loop-line,
.life-loop-output {
  fill: none;
  stroke: var(--border);
  stroke-width: 1.25;
  vector-effect: non-scaling-stroke;
}
.life-loop-line { marker-end: url(#homeFlowMiniArrow); }
.life-loop-arrow { fill: var(--border); }
.life-loop-node rect {
  fill: var(--surface);
  stroke: var(--border);
  stroke-width: 1.25;
  stroke-dasharray: 4 3;
  vector-effect: non-scaling-stroke;
}
.life-loop-node text {
  fill: var(--text-secondary);
  font-size: 13px;
  font-weight: 500;
  text-anchor: middle;
  dominant-baseline: central;
}
.life-loop-node--guide rect { fill: var(--brand-surface); stroke: var(--brand); }
.life-loop-node--guide text { font-weight: 600; }
.life-link-origin { height: 28px; margin-bottom: 28px; }
.life-link-layout {
  grid-template-columns: minmax(0, 1fr) var(--life-bridge-width) minmax(0, 1fr);
}
.life-link-connectors {
  top: calc(18px + var(--life-source-height));
  width: var(--life-bridge-width);
  height: calc(70px + var(--life-card-height) / 2);
}
.life-link-connectors .flow-line {
  fill: none;
  stroke: var(--border);
  stroke-width: 1.3;
  stroke-linecap: round;
  stroke-dasharray: 2 6;
  vector-effect: non-scaling-stroke;
}
.life-link-stem-packet {
  top: calc(18px + var(--life-source-height) - 4px);
  animation-name: life-link-from-loop;
}
@keyframes life-link-from-loop {
  from { transform: translateY(0); }
  to { transform: translateY(calc(70px + var(--life-card-height) / 2)); }
}
.life-link-card-head { flex-wrap: wrap; gap: 6px; }
.life-link-card-head strong { font-size: clamp(15px, 1.3vw, 17px); }
.life-link-example-chip {
  height: 24px;
  min-height: 24px;
  padding: 0 8px;
  font-size: 9px;
  line-height: 1;
}
.life-link-example-chip svg { display: block; flex: 0 0 12px; width: 12px; height: 12px; }
.life-link-chip-label { display: block; transform: translateY(-0.5px); }
.life-link-grocery-list { margin-block: 12px; }
.life-link-grocery-list li { min-height: 54px; padding-block: 7px; row-gap: 3px; }
.life-link-grocery-list strong { font-size: inherit; font-weight: 600; }
.life-link-grocery-note { grid-column: 2 / -1; color: var(--text-secondary); font-size: 11px; line-height: 1.4; }
.life-link-caption { margin-top: 18px; }
.life-link-feedback { margin-top: 22px; }

.care-portal-tabs {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 34px;
  border-bottom: 1px solid var(--component-border);
  color: var(--text-soft);
  font-size: 9px;
  line-height: 1.3;
}
.care-portal-tabs span { padding-block: 10px; white-space: nowrap; }
.care-portal-tabs .is-current {
  align-self: stretch;
  display: flex;
  align-items: center;
  border-bottom: 2px solid var(--brand);
  color: var(--text-primary);
  font-weight: 700;
}
.care-portal-patient {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 14px;
}
.care-portal-patient strong { font-size: 12px; font-weight: 600; }
.care-portal-patient > span { color: var(--text-soft); font-size: 9px; }
.care-portal-trend {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 112px;
  align-items: center;
  gap: 10px;
  min-height: 72px;
}
.care-portal-trend span,
.care-portal-signals > span { color: var(--text-secondary); font-size: 10px; }
.care-portal-trend p {
  max-width: 20ch;
  margin: 5px 0 0;
  color: var(--text-soft);
  font-size: 10px;
  line-height: 1.4;
}
.care-portal-trend svg { display: block; width: 100%; fill: none; }
.care-portal-chart-guide { stroke: var(--component-border); stroke-width: 1; }
.care-portal-chart-context { stroke: var(--chart-context); stroke-width: 2; }
.care-portal-chart-gut { stroke: var(--brand); stroke-width: 2.5; }
.care-portal-signals {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  min-height: 38px;
  border-top: 1px solid var(--component-border);
}
.care-portal-signals strong {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 11px;
  font-weight: 500;
}
.care-portal-signals i {
  padding: 3px 6px;
  border-radius: var(--radius-full);
  background: var(--brand-surface);
  color: var(--brand-ink);
  font-size: 9px;
  font-style: normal;
}
.care-portal-card .life-link-card-foot { padding-top: 10px; }
.care-portal-card .life-link-card-foot strong { font-size: 11px; }

@media (max-width: 1000px) {
  .care-portal-tabs { gap: 8px; font-size: 8px; }
  .care-portal-trend { grid-template-columns: minmax(0, 1fr) 86px; }
  .life-link-card { padding: 15px; }
  .life-link-card-foot { flex-wrap: wrap; gap: 5px; }
}

@media (max-width: 759px) {
  .life-link-visual { padding: 32px 0 16px; }
  .life-link-source { height: auto; gap: 8px; }
  .life-link-source-graph { height: auto; }
  .life-link-source::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    height: 14px;
    border-left: 1px dashed var(--border);
  }
  .life-link-layout { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .life-link-connectors,
  .life-link-stem-packet,
  .life-link-bridge,
  .life-link-card::after { display: none; }
  .life-link-origin { margin-bottom: 26px; font-size: 11px; }
  .life-link-card-head { flex-wrap: nowrap; }
  .life-link-card-head strong { font-size: 16px; }
  .life-link-caption { margin-top: 18px; }
  .life-link-caption h3 { font-size: 21px; }
  .life-link-feedback { flex-direction: column; gap: 10px; margin-top: 32px; }
  .care-portal-tabs { gap: 12px; font-size: 9px; }
  .care-portal-trend { grid-template-columns: minmax(0, 1fr) 112px; }
}

@media (prefers-reduced-motion: reduce) {
  .flow-story-page { opacity: 1; transform: none; }
}

/* Enhanced homepage: native document scrolling, one visible chapter at a time.
   These rules only apply after the controller has mounted every chapter. */
html.home-paged { --home-page-top: clamp(112px, 8.5vw, 128px); scroll-behavior: auto; scroll-padding-block-start: 0; }
.home-paged body { overflow-anchor: none; }
.home-paged #main { display: block; }
.home-paged #data-flow { height: auto; padding: 0; margin: 0; background: none; }
.home-paged #data-flow::before { display: none; }
.home-chapter-track { position: relative; height: 100dvh; }
.home-chapter-stage {
  position: fixed;
  inset: 0;
  z-index: 1;
  block-size: 100dvh;
  overflow: clip;
  visibility: hidden;
  pointer-events: none;
  background: var(--background);
  perspective: 1400px;
}
.home-chapter-stage.is-current { visibility: visible; pointer-events: auto; }
.home-paged [data-chapter="hero"] .home-chapter-stage { inset: 0; block-size: 100dvh; }
.home-paged :is([data-chapter="learning"], [data-chapter="guidance"]) .home-chapter-stage::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(117,117,117,.065) .75px, transparent .75px),
    linear-gradient(90deg, rgba(117,117,117,.065) .75px, transparent .75px);
  background-size: 20px 20px;
  mask-image: linear-gradient(to bottom, transparent, #000 120px, #000 calc(100% - 72px), transparent);
}
.home-chapter-surface {
  position: relative;
  min-block-size: 100%;
  transform-origin: 50% 0;
  backface-visibility: hidden;
}
.home-chapter-content {
  min-block-size: 100dvh;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding-block: var(--home-page-top) 24px;
  transform: translateY(var(--chapter-offset, 0px));
}
.home-chapter-content > * { flex: 0 0 auto; }
.home-paged .home-chapter-content > :is(.section, .clinician-section, .comparison-section, .final-cta, .site-footer) {
  margin-block: 0;
  padding-block: 20px;
}
.home-paged .home-chapter-content > :is(.product-story, .clinician-section, .comparison-section, #insights, .final-cta) { padding-block-start: 0; }
.home-paged .home-chapter-content > #insights { margin-block: 0; }
.home-paged [data-chapter="clinicians"] .clinician-teaser { align-items: start; }
.home-paged [data-chapter="get-started"] .final-cta { min-height: 0; }
#get-started-title { font-size: clamp(32px, 3.6vw, 48px); }
.home-paged [data-chapter="get-started"] .faq-question {
  min-height: 64px;
  padding-block: 13px;
  font-size: clamp(16px, 1.1vw, 17px);
}
.home-paged [data-chapter="get-started"] .medical-note { margin-top: 48px; }
.home-paged [data-chapter="get-started"] .site-footer { margin-top: 24px; padding-block: 24px 8px; }
.home-paged [data-chapter="get-started"] .footer-grid { padding-bottom: 32px; }
.home-paged .home-chapter-content .reveal { opacity: 1; transform: none; }
.home-paged .flow-story-page { margin: 0; }
.home-paged .hero-scroll { height: auto; }
.home-paged [data-chapter="hero"] .home-chapter-content { min-block-size: 100dvh; padding: 0; }
.home-paged .hero {
  --hp: 1;
  inline-size: 100%;
  min-block-size: 100dvh;
  margin: 0;
  border-radius: 0;
}
.home-paged .hero-grid {
  position: absolute;
  inset: 0;
  flex: none;
  min-height: 0;
  align-items: center;
  padding: 0 var(--hero-pad-x);
  pointer-events: none;
}
.home-paged .hero-copy-wrap { pointer-events: auto; }
.home-paged .hero-actions { margin-bottom: 0; }
.home-paged .hero h1 { max-width: 480px; margin-bottom: 18px; font-size: clamp(2.5rem, 4.3vw, 4.25rem); }
.home-paged .hero-copy { margin-bottom: 24px; font-size: clamp(.8125rem, 1.05vw, .9375rem); opacity: 1; transform: none; }
.home-paged .hero-actions .button { min-height: 46px; padding-inline: 18px; font-size: .8125rem; }
.home-paged .capability-rail { opacity: 1; transform: none; margin-top: auto; margin-bottom: 48px; }
.home-paged .product-story .story-copy p { white-space: normal; }
.home-paged .data-flow-canvas {
  width: min(1160px, calc((100dvh - var(--home-header-height, 64px) - 240px) * 1260 / 580));
  min-width: 780px;
}
.home-paged .life-link-visual { flex: 0 0 auto; }
.home-paged .site-footer { border-top: 0; }
.home-paged .site-header {
  position: fixed;
  padding-block: 10px;
  background: var(--background);
  color: var(--text-primary);
}
.home-paged .site-header .nav-shell { min-height: 44px; }
.home-paged .site-header .nav-links:not(.is-open) { gap: clamp(16px, 1.8vw, 26px); }
.home-paged .site-header .nav-links a { display: inline-flex; align-items: center; min-height: 44px; white-space: nowrap; }
.home-paged .site-header .brand,
.home-paged .site-header .nav-links a { color: inherit; }
.home-paged .site-header .nav-cta { min-height: 44px; padding-inline: 20px; background: var(--text-primary); color: var(--surface); }
.home-paged .site-header .nav-toggle { color: inherit; background: transparent; box-shadow: none; }
.home-paged .site-header .nav-toggle svg { width: 16px; height: 16px; }
.home-paged body:not(.is-home-hero) .site-header { visibility: hidden; pointer-events: none; }
.home-paged .is-home-hero .site-header { padding-block: 20px; background: transparent; color: var(--surface); }
.home-paged .is-home-hero .site-header .nav-shell { min-height: 48px; }
.home-paged .is-home-hero .site-header .nav-links:not(.is-open) { gap: clamp(20px, 2.4vw, 34px); }
.home-paged .is-home-hero .site-header .nav-links a { display: inline; min-height: 0; white-space: normal; }
.home-paged .is-home-hero .nav-cta { min-height: 44px; padding-inline: 18px; background: var(--surface); color: var(--text-primary); font-size: .8125rem; }
.home-paged .menu-open .site-header { background: transparent; color: var(--surface); }
.home-paged .nav-links.is-open { color: var(--surface); overflow-y: auto; overscroll-behavior: contain; }
.home-chapter-stage:not(.is-current) *,
.home-chapter-stage:not(.is-current) *::before,
.home-chapter-stage:not(.is-current) *::after { animation-play-state: paused !important; }
.home-paged :focus-visible { outline: 2px solid var(--brand-ink); outline-offset: 5px; }
.home-paged :is(.hero, .is-home-hero .site-header) :focus-visible { outline-color: var(--surface); }
.home-chapter-status {
  position: fixed;
  inline-size: 1px;
  block-size: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
@media (min-width: 760px) and (max-height: 800px) {
  .home-paged .life-link-header { margin-bottom: 8px; }
  .home-paged .life-link-header .data-flow-title { font-size: clamp(28px, 3vw, 36px); }
  .home-paged .life-link-visual { --life-source-height: 86px; }
  .home-paged .life-link-caption, .home-paged .life-link-feedback { margin-top: 12px; }
}
@media (max-width: 680px) {
  .home-paged .is-home-hero .site-header .nav-shell { min-height: 44px; }
  .home-paged .hero-grid { padding-block: 0; }
  .home-paged .hero h1 { font-size: clamp(2.125rem, 9.5vw, 2.75rem); }
}
@media (max-width: 680px) and (max-height: 760px) {
  .home-paged .hero-grid {
    position: relative;
    inset: auto;
    flex: 1;
    align-items: flex-start;
    padding-block: max(96px, var(--home-page-top)) 20px;
    pointer-events: auto;
  }
  .home-paged .capability-rail { margin-top: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .home-paged *, .home-paged *::before, .home-paged *::after { animation: none !important; transition: none !important; }
}
@media (forced-colors: active) {
  .home-paged :focus-visible,
  .home-paged :is(.hero, .is-home-hero .site-header) :focus-visible { outline-color: Highlight; }
}
@media print {
  .home-paged .home-chapter-track { height: auto !important; }
  .home-paged .home-chapter-stage { position: static; visibility: visible; block-size: auto; overflow: visible; }
  .home-paged .home-chapter-content { min-block-size: 0; transform: none; padding-block: 24px; }
  .home-paged .site-header { display: none; }
}