/* Same-diagnosis contrast plus two routes merging into one shared insights terminus. */
.holon-hero-actions-page #precision-medicine {
  padding-block: clamp(52px, 5.5vw, 84px) 0;
}
.holon-hero-actions-page #precision-medicine + #holon-retrospective {
  padding-top: clamp(40px, 4.5vw, 64px);
}
.precision-access-panel h2 {
  margin: 0 0 14px;
  color: var(--fg);
  font-family: var(--font-display);
  font-size: clamp(26px, 2.6vw, 36px);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -.035em;
  text-wrap: pretty;
}
.precision-access-panel h2 em { color: var(--holon-cobalt); font-style: normal; }
.precision-access-grid {
  display: grid;
  grid-template-columns: minmax(0, .92fr) minmax(0, 1.85fr);
  gap: 16px;
}
.precision-access-grid > .precision-why-card { grid-column: 1; grid-row: 1; }
.precision-access-grid > .precision-routes-box { grid-column: 2; grid-row: 1; }
.precision-access-grid > .precision-evidence {
  grid-column: 1;
  grid-row: 2;
  max-width: none;
  margin: 0;
}
.precision-evidence p a { display: inline; margin: 0; }
.precision-access-box {
  min-width: 0;
  padding: 16px 18px;
  border: 1px solid #dde1ee;
  border-radius: 24px;
  background: #fafaff;
}

/* Card 1 — the same people, two ways to choose treatment. */
.precision-why-card {
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 16px;
  padding: 20px 24px;
  background: linear-gradient(155deg, #fff 0%, #f6f5fd 100%);
  text-align: center;
}
.precision-why-card h3 {
  margin: 0;
  color: var(--fg);
  font-family: var(--font-display);
  font-size: clamp(18px, 1.5vw, 22px);
  font-weight: 500;
  line-height: 1.24;
  letter-spacing: -.035em;
}
.precision-why-card h3 strong { display: block; color: var(--holon-cobalt); font-weight: 650; }
.precision-care-comparison { width: 100%; max-width: 360px; }
.precision-care-row { display: grid; gap: 8px; margin: 0; }
.precision-care-row + .precision-care-row { margin-top: 12px; padding-top: 12px; border-top: 1px solid #e2e4f0; }
.precision-care-row figcaption { font-family: var(--font-display); text-align: left; }
.precision-care-row h4 { margin: 0 0 2px; color: #525c79; font-size: 13px; font-weight: 650; line-height: 1.4; }
.precision-care-row figcaption > span { display: block; color: var(--fg-soft); font-size: 12px; line-height: 1.4; }
.precision-care-personal h4 { color: var(--holon-cobalt); }
.precision-care-row svg {
  display: block;
  width: 100%;
  max-width: 300px;
  height: auto;
  margin-inline: auto;
  color: #717b96;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.precision-person { fill: #edf0f6; }
.precision-care-arrow { stroke: #818aa5; stroke-width: 1.5; }
.precision-care-blue { color: var(--holon-cobalt); }
.precision-care-teal { color: #007f73; }
.precision-care-plum { color: #7a3d89; }
.precision-tumor { fill: currentColor; stroke: currentColor; stroke-width: 1; }
.precision-medicine-icon { stroke: currentColor; fill: currentColor; fill-opacity: .1; }
.precision-medicine-icon .precision-vial-fill { stroke: none; fill-opacity: .32; }

/* Card 2 — two routes, one destination. */
.precision-routes-box { display: grid; align-content: center; }
.precision-routes {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 118px;
  grid-template-rows: auto auto;
  row-gap: 16px;
}
.precision-lane { position: relative; grid-column: 1; display: grid; gap: 8px; min-width: 0; }
.precision-lane h4 {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 10px;
  min-height: 16px;
  margin: 0;
  padding-right: 12px;
  color: #5a6180;
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 650;
  line-height: 16px;
}
.precision-lane-holon h4 { color: var(--holon-cobalt); }
.precision-flow-tag {
  margin-left: auto;
  color: #737b9c;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .015em;
}
.precision-lane-holon .precision-flow-tag { color: var(--holon-cobalt); }
/* Ribbons overshoot their lane and tuck under the terminus panel, so the
   docking joint never depends on curve alignment. (svg is a replaced element:
   left+right insets won't stretch it, so the overshoot lives in width.) */
.precision-ribbon {
  position: absolute;
  top: 24px;
  left: 0;
  width: calc(100% + 14px);
  height: 36px;
}
.precision-lane-note {
  padding: 1px 9px;
  border: 1px solid #dcdff5;
  border-radius: 999px;
  background: #eef0ff;
  color: var(--holon-cobalt);
  font-family: var(--font-display);
  font-size: 10.5px;
  font-weight: 550;
  line-height: 1.5;
}
/* Lane footnotes sit in the reserved label zone: note under the Holon-S1
   station, tag under the line's arrival end. */
.precision-lane-foot { display: contents; }
.precision-lane-foot .precision-lane-note {
  position: absolute;
  top: 76px;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
}
.precision-lane-foot .precision-flow-tag {
  position: absolute;
  top: 54px;
  right: 34px;
  margin-left: 0;
}
.precision-route {
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
}
.precision-route > li {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-rows: 36px auto;
  align-content: start;
  justify-items: center;
  gap: 6px;
  min-width: 0;
  color: #4a5170;
  font-family: var(--font-display);
  text-align: center;
}
.precision-lane-holon .precision-route > li,
.precision-route > .precision-endpoint-stop { color: var(--holon-cobalt); }
.precision-stop-icon {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  background: #fafaff;
}
.precision-stop-icon svg {
  width: 34px;
  height: 34px;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.precision-stop-label { font-size: 12px; font-weight: 550; line-height: 1.3; min-height: 31px; }
.precision-stop-label small { display: block; margin-top: 3px; font-size: 10px; font-weight: 400; line-height: 1.3; }
.precision-dollar { font-size: 19px; font-weight: 550; letter-spacing: -.05em; }
.precision-stop-model { grid-column: 3; }
.precision-model-mark {
  display: grid;
  place-items: center;
  height: 36px;
  padding: 0 14px;
  border: 1px solid #b4bef7;
  border-radius: 9px;
  background: #fff;
  color: var(--holon-cobalt);
  font-size: 13px;
  font-weight: 650;
  white-space: nowrap;
  box-shadow:
    0 0 0 3px rgba(111, 132, 243, .14),
    0 0 14px rgba(63, 87, 224, .38),
    0 2px 6px rgba(33, 54, 199, .18);
}
.precision-route > .precision-endpoint-stop { display: none; }
/* The terminus: an insights station both ribbons dock into, with the
   onward tailored-treatment step hanging clearly below it. */
.precision-destination {
  position: relative;
  grid-row: 1 / 3;
  grid-column: 2;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  gap: 6px;
}
.precision-destination-panel {
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 8px;
  padding: 12px 8px;
  border: 1px solid #c8cff1;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 10px 24px -18px rgba(33, 54, 199, .5);
}
.precision-destination-after {
  display: grid;
  justify-items: center;
  gap: 3px;
}
.precision-destination-outcome {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--holon-cobalt);
  font-family: var(--font-display);
  font-size: 10.5px;
  font-weight: 650;
  line-height: 1.3;
  white-space: nowrap;
}
.precision-destination-outcome svg {
  width: 15px;
  height: 15px;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.precision-destination-badge {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #eef0ff;
}
.precision-destination-badge svg {
  width: 30px;
  height: 30px;
  stroke: var(--holon-cobalt);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.precision-destination-label {
  color: var(--holon-cobalt);
  font-family: var(--font-display);
  font-size: 12.5px;
  font-weight: 650;
  line-height: 1.3;
  text-align: center;
  text-wrap: balance;
}
.precision-destination-next { display: grid; place-items: center; }
.precision-destination-next svg {
  width: 12px;
  height: 14px;
  stroke: #98a3e6;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Routes flow in when the section reveals; the Holon express arrives first. */
@media (prefers-reduced-motion: no-preference) {
  .holon-js-ready .precision-access-panel .precision-ribbon {
    transform: scaleX(0);
    transform-origin: 0 50%;
  }
  .holon-js-ready .precision-access-panel .precision-destination { opacity: 0; }
  .holon-js-ready .precision-access-panel.in .precision-lane-traditional .precision-ribbon {
    animation: precision-flow-draw .85s cubic-bezier(.3, 0, .2, 1) .15s forwards;
  }
  .holon-js-ready .precision-access-panel.in .precision-lane-holon .precision-ribbon {
    animation: precision-flow-draw .45s cubic-bezier(.3, 0, .2, 1) .3s forwards;
  }
  .holon-js-ready .precision-access-panel.in .precision-destination {
    animation: precision-destination-in .4s ease-out .7s forwards;
  }
  /* Stations light up as their line reaches them. */
  .holon-js-ready .precision-access-panel .precision-route > li { opacity: 0; }
  .holon-js-ready .precision-access-panel.in .precision-route > li {
    animation: precision-destination-in .35s ease-out forwards;
  }
  .holon-js-ready .precision-access-panel.in .precision-lane-traditional .precision-route > li:nth-child(1) { animation-delay: .2s; }
  .holon-js-ready .precision-access-panel.in .precision-lane-traditional .precision-route > li:nth-child(2) { animation-delay: .38s; }
  .holon-js-ready .precision-access-panel.in .precision-lane-traditional .precision-route > li:nth-child(3) { animation-delay: .54s; }
  .holon-js-ready .precision-access-panel.in .precision-lane-traditional .precision-route > li:nth-child(4) { animation-delay: .68s; }
  .holon-js-ready .precision-access-panel.in .precision-lane-traditional .precision-route > li:nth-child(5) { animation-delay: .82s; }
  .holon-js-ready .precision-access-panel.in .precision-lane-traditional .precision-route > li:nth-child(6) { animation-delay: .95s; }
  .holon-js-ready .precision-access-panel.in .precision-lane-holon .precision-route > li:nth-child(1) { animation-delay: .35s; }
  .holon-js-ready .precision-access-panel.in .precision-lane-holon .precision-route > li:nth-child(2) { animation-delay: .5s; }
  .holon-js-ready .precision-access-panel.in .precision-lane-holon .precision-route > li:nth-child(3) { animation-delay: .65s; }
}
@keyframes precision-flow-draw { to { transform: scaleX(1); } }
@keyframes precision-destination-in { from { opacity: 0; transform: scale(.92); } to { opacity: 1; transform: scale(1); } }

@media (max-width: 980px) {
  .precision-access-grid { grid-template-columns: 1fr; }
  .precision-access-grid > .precision-why-card,
  .precision-access-grid > .precision-routes-box,
  .precision-access-grid > .precision-evidence { grid-column: 1; grid-row: auto; }
}
@media (max-width: 699px) {
  .precision-routes { grid-template-columns: minmax(0, 1fr); row-gap: 18px; }
  .precision-destination,
  .precision-ribbon { display: none; }
  .precision-lane h4 { padding-right: 0; font-size: 14px; line-height: 1.4; }
  .precision-lane-traditional h4 { flex-direction: column; align-items: flex-start; gap: 2px; }
  .precision-lane-traditional .precision-flow-tag { margin-left: 0; font-size: 11px; }
  .precision-lane-holon { padding-top: 18px; border-top: 1px solid #e2e4f0; }
  .precision-lane-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 10px; }
  .precision-lane-foot .precision-lane-note { position: static; transform: none; white-space: normal; }
  .precision-lane-foot .precision-flow-tag { position: static; margin-left: auto; }
  .precision-route > .precision-endpoint-stop { display: grid; }
  .precision-route { --path-gap: 12px; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--path-gap); }
  .precision-route > li:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 14px;
    right: calc(-1 * var(--path-gap) / 2 - 6px);
    width: 12px;
    height: 8px;
    background: #b6bcd6;
    clip-path: polygon(0 42%, 72% 42%, 48% 8%, 59% 0, 100% 50%, 59% 100%, 48% 92%, 72% 58%, 0 58%);
  }
  .precision-lane-holon .precision-route > li:not(:last-child)::after { background: #99a4e6; }
  /* A straight list keeps the longer route readable in its natural order. */
  .precision-lane-traditional .precision-route { grid-template-columns: minmax(0, 1fr); row-gap: 12px; }
  .precision-lane-traditional .precision-route > li {
    grid-template-columns: 36px minmax(0, 1fr);
    grid-template-rows: auto;
    align-items: center;
    justify-items: start;
    column-gap: 12px;
    min-height: 36px;
    text-align: left;
  }
  .precision-lane-traditional .precision-route > li:not(:last-child)::after {
    top: calc(100% + 2px);
    left: 12px;
    right: auto;
    transform: rotate(90deg);
  }
  .precision-stop-model { grid-column: auto; }
  .precision-stop-label { min-height: 0; font-size: 13px; }
  .precision-stop-label small { font-size: 11px; }
}
@media (max-width: 480px) {
  .precision-access-box { padding: 14px 16px; border-radius: 18px; }
  .precision-why-card { padding: 20px; }
  .precision-model-mark { padding-inline: 8px; }
}
@media (max-width: 360px) {
  .precision-model-mark { font-size: 11px; padding-inline: 4px; }
  .precision-stop-label { font-size: 11px; }
}