/* Source guide: pages/home.css
 * Page-specific presentation.
 * Load order: base.css, components.css, page stylesheet, refresh.css.
 * Later rules intentionally refine earlier layouts; preserve cascade order.
 */

/* Full-room photography with a soft purple-to-teal fade for white foreground text. */
/* Group: Earlier hero composition retained for shared and campaign styling. */
.home-hero {
  position: relative;
  isolation: isolate;
  background: #353932;
  color: #fff;
  overflow: hidden;
}
.hero-backdrop {
  position: absolute;
  inset: 0;
  z-index: -2;
}
.hero-backdrop img {
  width: 108%;
  max-width: none;
  height: 100%;
  object-fit: cover;
  object-position: center 42%;
  transform: translateX(-7.4%);
}
.home-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
    90deg,
    rgba(38, 20, 65, 0.96),
    rgba(43, 88, 95, 0.84) 36%,
    rgba(62, 122, 119, 0.3) 48%,
    rgba(62, 122, 119, 0) 62%
  );
}
.hero-layout {
  min-height: 690px;
  display: flex;
  align-items: center;
  padding-block: 80px;
}
.hero-copy {
  max-width: 590px;
}
.hero-copy h1 {
  font-size: clamp(44px, 4.2vw, 60px);
  font-weight: 500;
  letter-spacing: -2px;
}
.hero-copy h1 em {
  font-style: normal;
  color: #fff;
}
.hero-copy .lead {
  max-width: 460px;
  font-size: 17px;
  color: #fff;
}
.hero-copy .button {
  background: #fff;
  border-color: #fff;
  color: var(--navy);
}
.hero-copy .button-outline {
  background: transparent;
  color: #fff;
}
.hero-copy .button:hover {
  background: var(--mint);
  border-color: var(--mint);
  color: var(--navy);
}
.hero-copy :focus-visible {
  outline-color: #fff;
}
/* Viewport (max-width: 1000px): component adjustments at this breakpoint. */
@media (max-width: 1000px) {
  .hero-copy {
    max-width: 500px;
  }
  .hero-backdrop img {
    object-position: 66% center;
  }
}
/* Viewport (max-width: 700px): component adjustments at this breakpoint. */
@media (max-width: 700px) {
  .hero-layout {
    min-height: 820px;
    align-items: flex-start;
    padding-top: 48px;
    padding-bottom: 320px;
  }
  .hero-copy h1 {
    font-size: 38px;
    letter-spacing: -1.5px;
  }
  .hero-copy .lead {
    font-size: 16px;
  }
  .hero-backdrop img {
    width: 100%;
    transform: none;
    object-position: 68% center;
  }
  .home-hero::after {
    background: linear-gradient(
      180deg,
      rgba(38, 20, 65, 0.96),
      rgba(43, 88, 95, 0.84) 48%,
      rgba(0, 71, 68, 0.06) 85%
    );
  }
  .hero-copy .actions {
    gap: 12px;
  }
  .hero-copy .button {
    padding: 14px 18px;
    font-size: 13px;
  }
}

/* Program and supporting editorial sections. */
/* Group: Program introduction and support cards. */
.program-intro {
  max-width: 810px;
  margin-bottom: 48px;
}
.program-intro h2 {
  max-width: 690px;
}
.program-intro p {
  max-width: 670px;
  margin-top: 22px;
  color: var(--muted);
}
.program-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}
.program-item {
  display: flex;
  flex-direction: column;
  padding: 18px 18px 26px;
  border: 1px solid #dfe9e6;
  border-radius: 22px;
  background: #f7faf9;
  box-shadow: 0 8px 28px #262d6008;
  transition:
    transform 200ms ease,
    box-shadow 200ms ease;
}
.program-item:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 32px #262d6012;
}
.program-item .text-link {
  align-self: flex-start;
}
.program-image {
  height: 235px;
  border-radius: 12px;
  overflow: hidden;
  background: #edf4f1;
}
.program-image > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.program-image.app-image {
  display: flex;
  justify-content: center;
  align-items: center;
  background: #e6f2f0;
}
.program-image.app-image img {
  height: 100%;
  width: 100%;
  object-fit: cover;
}
.program-number {
  font-size: 11px;
  color: var(--teal-ink);
  letter-spacing: 1px;
  margin: 25px 0 10px;
}
.program-item h3 {
  font-size: 25px;
}
.program-item p {
  font-size: 14px;
  color: var(--muted);
  margin-top: 13px;
  max-width: 350px;
}
.program-item .text-link {
  font-size: 12px;
  margin-top: 12px;
}
.path-section .split-media {
  border-radius: 12px 120px 12px 12px;
  object-position: 40% center;
}
.path-section .split {
  align-items: stretch;
}
.path-section .split-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.path-section .split-copy h2 {
  line-height: 1.16;
}
.path-section .numbered-list {
  margin-block: 24px;
}
.path-section .numbered-list li {
  padding-block: 16px;
}
.path-section .numbered-list p {
  line-height: 1.55;
}
.path-section .split-copy .actions {
  margin-top: auto;
  padding-top: 8px;
}
/* Viewport (min-width: 701px): component adjustments at this breakpoint. */
@media (min-width: 701px) {
  .path-section .split-media {
    height: 100%;
    min-height: 580px;
  }
}
/* Viewport (max-width: 700px): component adjustments at this breakpoint. */
@media (max-width: 700px) {
  .path-section .split {
    grid-template-columns: 1fr;
  }
  .path-section .split-copy .actions {
    margin-top: 0;
  }
}
.section:has(.support-comparison) .section-heading {
  align-items: flex-start;
}
/* Centered coverage introduction and continuous payer-logo strip. */
/* Group: Insurance overview and repeated logo strip. */
.coverage-band {
  display: block;
  text-align: center;
  padding: 24px 0;
}
.coverage-intro {
  max-width: 630px;
  margin: auto;
}
.coverage-intro h2 {
  font-size: clamp(32px, 3.2vw, 46px);
}
.coverage-intro p {
  color: var(--muted);
  font-size: 15px;
  margin-top: 20px;
}
.payer-carousel {
  overflow: hidden;
  margin: 40px auto 20px;
  padding: 20px 0;
  mask-image: linear-gradient(
    90deg,
    transparent,
    #000 5%,
    #000 95%,
    transparent
  );
}
.payer-track {
  display: flex;
  width: max-content;
  /* Preserve the gentle pace as the payer selection grows. */
  animation: payer-scroll 70s linear infinite;
}
.payer-group {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: 48px;
  padding: 0 48px 0 0;
  margin: 0;
  list-style: none;
}
.payer-group li {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 145px;
  height: 70px;
  margin: 0;
}
.payer-group img {
  width: auto;
  height: auto;
  max-width: 140px;
  max-height: 55px;
}
.payer-carousel:hover .payer-track,
.payer-carousel:focus-within .payer-track,
.payer-carousel.is-paused .payer-track {
  animation-play-state: paused;
}
@keyframes payer-scroll {
  to {
    transform: translateX(-50%);
  }
}
.coverage-details {
  max-width: 700px;
  margin: auto;
}
.coverage-details .small {
  color: var(--muted);
  font-size: 12px;
  margin: 18px 0;
}

/* Accessibility: honor the visitor's reduced-motion preference. */
@media (prefers-reduced-motion: reduce) {
  .payer-carousel {
    overflow-x: auto;
  }
  .payer-track {
    animation: none;
  }
  .payer-group-copy {
    display: none;
  }
}

/* Numbered app tour: buttons select genuine, high-resolution store imagery. */
.app-tour .section-heading h2 {
  max-width: 730px;
}
/* Group: App tour selections; home.js synchronizes the displayed screen. */
.app-tour-layout {
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  gap: 75px;
  align-items: center;
}
.app-tour-steps {
  display: grid;
  gap: 18px;
}
.app-step {
  display: flex;
  gap: 28px;
  align-items: center;
  text-align: left;
  padding: 28px;
  border: 1px solid #ccdcd6;
  border-radius: 5px;
  background: #fff;
  color: var(--navy);
}
.app-step[aria-pressed="true"] {
  background: #dcefe5;
  border-color: #a6d2be;
}
.app-step:hover {
  border-color: var(--teal-ink);
}
.step-number {
  font-size: 56px;
  font-weight: 400;
  line-height: 1;
  color: var(--teal-ink);
}
.app-step strong {
  display: block;
  font-size: 21px;
  font-weight: 500;
  line-height: 1.35;
  margin-bottom: 10px;
}
.app-step strong + span {
  display: block;
  font-size: 14px;
  color: var(--muted);
}
.app-tour-steps > .button {
  justify-self: start;
  margin-top: 10px;
}
/* Phone frame and editorial cards surround genuine app screenshots. */
/* Group: Phone artwork, connecting line, and floating text panels. */
.app-tour-phone {
  position: relative;
  margin: 0;
  padding: 30px 0 0;
  min-width: 0;
  text-align: center;
}
.phone-flourish {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  color: #9ac5b8;
  pointer-events: none;
  overflow: visible;
}
.connection-thread {
  stroke: var(--teal);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 0;
}
.device-shell {
  position: relative;
  width: 260px;
  max-width: 80%;
  margin: 0 auto;
  padding: 6px;
  background: #171b1c;
  border: 2px solid #94877b;
  border-radius: 42px;
  box-shadow: 0 18px 35px #28204122;
}
.device-shell::before {
  content: "";
  position: absolute;
  left: -5px;
  top: 100px;
  width: 3px;
  height: 48px;
  border-radius: 2px;
  background: #766f64;
}
/* Keep one screen height when switching between differently sized app captures. */
.device-shell img {
  width: 100%;
  height: auto;
  aspect-ratio: 473 / 1024;
  object-fit: cover;
  object-position: center top;
  border-radius: 33px;
}
.phone-card {
  position: absolute;
  z-index: 1;
  padding: 19px;
  border: 1px solid #ececec;
  background: #fffffffa;
  box-shadow: 0 12px 25px #30244414;
  border-radius: 20px;
  text-align: left;
}
.phone-card strong {
  display: block;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.4;
}
.phone-card p {
  font-size: 12px;
  line-height: 1.6;
  color: var(--muted);
  margin-top: 7px;
}
.phone-card-top {
  width: 185px;
  right: -8px;
  top: 90px;
}
.phone-card-bottom {
  width: 260px;
  left: -10px;
  bottom: 70px;
}
.phone-card-icon {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  margin-bottom: 10px;
  border-radius: 50%;
  background: #f2e7d6;
  color: #87602a;
}
.phone-card-dot {
  display: block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--teal-ink);
  margin-bottom: 10px;
}
.app-tour-phone figcaption {
  position: relative;
  font-size: 10px;
  color: var(--muted);
  margin: 30px auto 0;
  max-width: 300px;
}
/* Viewport (max-width: 1000px): component adjustments at this breakpoint. */
@media (max-width: 1000px) {
  .app-tour-layout {
    gap: 30px;
  }
  .app-step {
    padding: 22px;
    gap: 20px;
  }
}
/* Viewport (max-width: 700px): component adjustments at this breakpoint. */
@media (max-width: 700px) {
  .app-tour-layout {
    grid-template-columns: 1fr;
  }
  .app-step {
    padding: 22px 18px;
  }
  .step-number {
    font-size: 44px;
  }
  .app-step strong {
    font-size: 19px;
  }
  .app-tour-phone {
    max-width: 400px;
    width: 100%;
    margin: auto;
  }
}
.app-logo {
  max-width: 155px;
  max-height: 70px;
  object-fit: contain;
  object-position: left;
  margin-bottom: 30px;
}
/* Group: Homepage evidence summary. */
.evidence-home {
  border-top: 1px solid var(--line);
}
.evidence-summary {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 90px;
  align-items: start;
}
.study-facts {
  border-top: 1px solid #cbd4df;
}
.study-fact {
  display: flex;
  gap: 30px;
  padding: 22px 0;
  border-bottom: 1px solid #cbd4df;
  align-items: center;
}
.study-fact strong {
  font-size: 37px;
  font-weight: 400;
  min-width: 90px;
  letter-spacing: -1.5px;
}
.study-fact p {
  font-size: 13px;
  color: var(--muted);
}
.support-comparison {
  margin-top: 35px;
  border-top: 1px solid #cbd4df;
}
.comparison-row {
  display: grid;
  align-items: start;
  grid-template-columns: 0.8fr 1fr 1fr;
  gap: 25px;
  padding: 24px 0;
  border-bottom: 1px solid #cbd4df;
}
.comparison-row h3 {
  font-size: 18px;
}
.comparison-row p {
  margin: 0;
  font-size: 14px;
  color: var(--muted);
}
.comparison-row p:last-child {
  color: var(--navy);
}
/* Group: Homepage questions and answers. */
.home-faq {
  display: grid;
  grid-template-columns: 0.7fr 1fr;
  gap: 90px;
}
.home-faq .text-link {
  margin-top: 22px;
}
/* Viewport (max-width: 1000px): component adjustments at this breakpoint. */
@media (max-width: 1000px) {
  .coverage-band,
  .evidence-summary,
  .home-faq {
    gap: 45px;
  }
  .program-image {
    height: 200px;
  }
  .program-grid {
    gap: 20px;
  }
  .app-preview img {
    height: 300px;
  }
  .app-preview img + img {
    height: 260px;
  }
}
/* Viewport (max-width: 700px): component adjustments at this breakpoint. */
@media (max-width: 700px) {
  .program-grid {
    grid-template-columns: 1fr;
    gap: 36px;
  }
  .program-image {
    height: 260px;
  }
  .program-number {
    margin-top: 20px;
  }
  .program-item p {
    max-width: none;
  }
  .program-intro {
    margin-bottom: 30px;
  }
  .coverage-band,
  .evidence-summary,
  .home-faq {
    grid-template-columns: 1fr;
    gap: 30px;
  }
  .coverage-band {
    padding: 10px 0;
  }
  .app-preview {
    min-height: 360px;
  }
  .app-preview img {
    height: 320px;
  }
  .app-preview img + img {
    height: 280px;
  }
  .comparison-row {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .comparison-row p:last-child::before {
    content: "With Prosoma Health: ";
    font-weight: 500;
  }
  .payer-names {
    font-size: 19px;
  }
  .home-faq {
    gap: 35px;
  }
}

/* Research in context, paired with a warm family photograph. */
.support-feature {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-radius: 24px;
  overflow: hidden;
  background: #063b40;
  color: #fff;
}
.support-feature-copy {
  padding: 54px 48px;
}
.support-feature h2 {
  font-size: clamp(32px, 3vw, 44px);
}
.support-feature-intro {
  margin-top: 23px;
  font-size: 14px;
  color: #e1eeeb;
}
.support-stat-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px 20px;
  margin-block: 32px;
}
.support-stat-grid > div {
  border-left: 1px solid #80a9a6;
  padding-left: 16px;
}
.support-stat-grid strong {
  font-size: 30px;
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: -1px;
}
.support-stat-grid p {
  font-size: 12px;
  line-height: 1.6;
  margin-top: 7px;
  color: #e1eeeb;
}
.support-study-note {
  font-size: 11px;
  line-height: 1.7;
  color: #d6e7e4;
}
.support-feature .button {
  color: #fff;
  border-color: #fff;
  margin-top: 24px;
  font-size: 12px;
}
.support-feature .button:hover {
  background: #fff;
  color: var(--navy);
}
.support-feature-photo {
  min-width: 0;
}
.support-feature-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
/* Viewport (max-width: 1000px): component adjustments at this breakpoint. */
@media (max-width: 1000px) {
  .support-feature-copy {
    padding: 38px 28px;
  }
  .app-tour-layout {
    grid-template-columns: 1fr 1fr;
  }
  .phone-card-top {
    width: 150px;
    right: -8px;
    padding: 14px;
  }
  .phone-card-bottom {
    width: 210px;
    left: 0;
    padding: 14px;
  }
}
/* Viewport (max-width: 700px): component adjustments at this breakpoint. */
@media (max-width: 700px) {
  .hero-layout {
    min-height: 870px;
  }
  .support-feature {
    grid-template-columns: 1fr;
  }
  .support-feature-copy {
    padding: 34px 24px;
  }
  .support-stat-grid {
    gap: 26px 16px;
  }
  .support-stat-grid strong {
    font-size: 25px;
  }
  .support-feature-photo {
    height: 350px;
  }
  .support-feature-photo img {
    object-position: center 42%;
  }
  .app-tour-layout {
    grid-template-columns: 1fr;
  }
  .app-tour-phone {
    padding-top: 26px;
    padding-bottom: 0;
  }
  .device-shell {
    width: 240px;
    max-width: 85%;
  }
  .phone-card-top {
    width: 140px;
    right: -9px;
    top: 90px;
  }
  .phone-card-bottom {
    width: 200px;
    bottom: 70px;
    left: -8px;
  }
  .phone-card strong {
    font-size: 13px;
  }
  .phone-card p {
    font-size: 11px;
  }
}

/* Benefits and carousel controls sit inside the hero at the lower right. */
.hero-layout {
  position: relative;
  min-height: 790px;
  padding-bottom: 190px;
}
.hero-backdrop img[data-scene="personal"] {
  width: 100%;
  transform: none;
  object-position: center;
}
.hero-dock {
  position: absolute;
  right: 0;
  bottom: 25px;
  width: min(640px, 54%);
}
.hero-benefits {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  padding: 20px;
  gap: 18px;
  border: 1px solid #ffffff40;
  border-radius: 16px;
  background: rgba(25, 38, 47, 0.85);
  backdrop-filter: blur(8px);
}
.hero-benefits article + article {
  border-left: 1px solid #ffffff42;
  padding-left: 18px;
}
.hero-benefits h2 {
  font-size: 14px;
  letter-spacing: -0.2px;
  line-height: 1.4;
  color: #fff;
}
.hero-benefits p {
  font-size: 11px;
  line-height: 1.6;
  color: #f0f2f3;
  margin-top: 7px;
}
.hero-controls {
  display: flex;
  gap: 5px;
  align-items: center;
  justify-content: flex-end;
  margin-top: 12px;
}
.hero-controls button {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid #ffffff80;
  border-radius: 50%;
  background: rgba(26, 24, 42, 0.72);
  color: #fff;
  font-size: 26px;
  line-height: 1;
}
.hero-controls button:hover {
  background: #262d60;
  border-color: #fff;
}
.hero-controls button:focus-visible {
  outline-color: #fff;
}
.hero-dots {
  display: flex;
}
.hero-dots button {
  background: transparent;
  border: 0;
  width: 34px;
}
.hero-dots span {
  display: block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #ffffff80;
  border: 1px solid #fff;
}
.hero-dots [aria-pressed="true"] span {
  width: 20px;
  border-radius: 8px;
  background: #fff;
}
#hero-playback {
  font-size: 15px;
  margin-left: 6px;
}
/* Viewport (max-width: 1000px): component adjustments at this breakpoint. */
@media (max-width: 1000px) {
  .hero-dock {
    width: 65%;
  }
}
/* Viewport (max-width: 700px): component adjustments at this breakpoint. */
@media (max-width: 700px) {
  .hero-layout {
    min-height: 1040px;
    display: block;
    padding-top: 48px;
    padding-bottom: 320px;
  }
  .hero-dock {
    width: 100%;
    bottom: 24px;
  }
  .hero-benefits {
    padding: 17px;
    gap: 13px;
    grid-template-columns: 1fr;
  }
  .hero-benefits article + article {
    border-left: 0;
    border-top: 1px solid #ffffff40;
    padding: 12px 0 0;
  }
  .hero-benefits h2 {
    font-size: 14px;
  }
  .hero-benefits p {
    margin-top: 4px;
    font-size: 11px;
  }
  .hero-backdrop img[data-scene="personal"] {
    object-position: 62% center;
  }
}

/* Account for the sticky header so the complete hero fits the first screen. */
.home-hero {
  --hero-header-height: 97px;
}
.hero-layout {
  height: calc(100svh - var(--hero-header-height));
  min-height: 540px;
  padding-block: 30px 165px;
}
.hero-dock {
  bottom: 30px;
}
.hero-backdrop img {
  object-position: center 25%;
}
.hero-backdrop img[data-scene="personal"] {
  object-position: center 25%;
}
/* Viewport (min-width: 951px) and (max-height: 800px): component adjustments at this breakpoint. */
@media (min-width: 951px) and (max-height: 800px) {
  .hero-copy h1 {
    font-size: clamp(40px, 4vw, 52px);
  }
  .hero-copy .lead {
    font-size: 15px;
    line-height: 1.65;
    margin-top: 20px;
  }
  .hero-copy .actions {
    margin-top: 24px;
  }
  .hero-layout {
    padding-block: 24px 100px;
    min-height: 480px;
  }
  .hero-benefits {
    padding: 16px;
  }
  .hero-dock {
    bottom: 22px;
  }
}
/* Viewport (max-width: 950px): component adjustments at this breakpoint. */
@media (max-width: 950px) {
  .home-hero {
    --hero-header-height: 81px;
  }
  .hero-layout {
    align-items: flex-start;
    padding-top: 24px;
  }
  .hero-copy h1 {
    font-size: 42px;
  }
  .hero-dock {
    width: 100%;
    bottom: 22px;
  }
}
/* Viewport (max-width: 700px): component adjustments at this breakpoint. */
@media (max-width: 700px) {
  .hero-layout {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: auto;
    min-height: calc(100svh - var(--hero-header-height));
    padding-block: 22px 18px;
    gap: 22px;
  }
  .hero-copy h1 {
    font-size: 32px;
    letter-spacing: -1px;
  }
  .hero-copy .lead {
    font-size: 14px;
    line-height: 1.6;
    margin-top: 16px;
  }
  .hero-copy .actions {
    margin-top: 20px;
    gap: 8px;
  }
  .hero-copy .button {
    font-size: 11px;
    padding: 12px;
    min-height: 44px;
  }
  .hero-dock {
    position: relative;
    bottom: auto;
    width: 100%;
  }
  .hero-benefits {
    padding: 14px;
    gap: 9px;
  }
  .hero-benefits article {
    display: grid;
    grid-template-columns: 1fr 1.3fr;
    gap: 12px;
    align-items: center;
  }
  .hero-benefits article + article {
    padding-top: 9px;
  }
  .hero-benefits h2 {
    font-size: 12px;
  }
  .hero-benefits p {
    margin-top: 0;
    font-size: 10px;
  }
  .hero-controls {
    margin-top: 8px;
  }
  .hero-backdrop img[data-scene="personal"] {
    object-position: 62% 25%;
  }
}
/* Viewport (min-width: 951px) and (max-width: 1150px): component adjustments at this breakpoint. */
@media (min-width: 951px) and (max-width: 1150px) {
  .hero-copy {
    max-width: 44%;
  }
  .hero-copy h1 {
    font-size: 40px;
  }
}
/* Viewport (max-width: 350px): component adjustments at this breakpoint. */
@media (max-width: 350px) {
  .hero-layout {
    padding-top: 18px;
    gap: 16px;
  }
  .hero-copy h1 {
    font-size: 29px;
  }
  .hero-copy .lead {
    font-size: 13px;
    line-height: 1.55;
    margin-top: 12px;
  }
  .hero-copy .actions {
    margin-top: 16px;
  }
  .hero-benefits {
    padding: 11px;
  }
}

/* Restore the benefits as a separate, full-width strip below the photographs. */
.hero-benefit-bar {
  background: var(--beige);
  padding: 26px 0;
}
.hero-benefit-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
}
.hero-benefit-row article {
  display: flex;
  align-items: center;
  gap: 16px;
}
.hero-benefit-row article + article {
  border-left: 1px solid #dcd7d0;
  padding-left: 30px;
}
.hero-benefit-row article > span {
  color: var(--teal-ink);
  font-size: 30px;
  flex-shrink: 0;
}
.hero-benefit-row h2 {
  font-size: 16px;
  line-height: 1.4;
  letter-spacing: -0.3px;
}
.hero-benefit-row p {
  font-size: 12px;
  line-height: 1.6;
  color: var(--muted);
  margin-top: 5px;
}
.hero-layout {
  height: calc(
    100svh - var(--hero-header-height) - var(--hero-benefits-height, 124px)
  );
  min-height: 450px;
  padding-block: 24px 80px;
}
.hero-copy h1 {
  font-size: clamp(38px, 3.7vw, 52px);
}
.hero-dock {
  width: auto;
}
/* Viewport (max-width: 950px): component adjustments at this breakpoint. */
@media (max-width: 950px) {
  .hero-benefit-row {
    gap: 16px;
  }
  .hero-benefit-row article {
    gap: 10px;
  }
  .hero-benefit-row article + article {
    padding-left: 16px;
  }
}
/* Viewport (max-width: 700px): component adjustments at this breakpoint. */
@media (max-width: 700px) {
  .hero-benefit-bar {
    padding-block: 20px;
  }
  .hero-benefit-row {
    grid-template-columns: 1fr;
    gap: 15px;
  }
  .hero-benefit-row article + article {
    border-left: 0;
    border-top: 1px solid #dcd7d0;
    padding: 15px 0 0;
  }
  .hero-benefit-row h2 {
    font-size: 14px;
  }
  .hero-benefit-row p {
    font-size: 11px;
  }
  .hero-layout {
    height: auto;
    min-height: calc(
      100svh - var(--hero-header-height) - var(--hero-benefits-height, 250px)
    );
    padding-block: 22px 16px;
    gap: 20px;
  }
  .hero-copy h1 {
    font-size: 32px;
  }
  .hero-dock {
    width: 100%;
  }
}

/* Compact, unfilled hero controls keep the photograph visible. */
.hero-controls button {
  width: 36px;
  height: 36px;
  background: transparent;
  font-size: 23px;
  border-color: #ffffffa6;
}
.hero-controls button:hover {
  background: transparent;
  border-color: white;
  box-shadow: 0 0 0 1px white;
}
.hero-dots button {
  width: 28px;
  border: 0;
}
#hero-playback {
  font-size: 12px;
}
.hero-backdrop img[data-scene="women"] {
  width: 100%;
  transform: none;
  object-position: 72% 28%;
}

/* Slide indicators stay unframed on hover; keyboard focus remains visible. */
.hero-dots button:hover {
  background: transparent;
  border: 0;
  box-shadow: none;
}
.hero-dots button:focus:not(:focus-visible) {
  outline: none;
}
.hero-dots button:focus-visible {
  outline: 2px solid white;
  outline-offset: -5px;
  border-radius: 4px;
}

/* Fixed-size vector icons stay proportional when benefit descriptions wrap. */
.hero-benefit-row article > span {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 30px;
  width: 30px;
  height: 30px;
  line-height: 1;
}
.hero-benefit-row svg {
  width: 30px;
  height: 30px;
  flex: none;
}
/* Viewport (max-width: 700px): component adjustments at this breakpoint. */
@media (max-width: 700px) {
  .home-hero::after {
    background: linear-gradient(
      180deg,
      rgba(38, 20, 65, 0.72),
      rgba(43, 88, 95, 0.48) 48%,
      rgba(0, 71, 68, 0.02) 85%
    );
  }
  .hero-copy h1,
  .hero-copy .lead {
    text-shadow: 0 1px 4px #10124380;
  }
  .hero-dock {
    display: none;
  }
}

/* Tablet panels need room for readable copy and uncropped product screens. */
/* Viewport (min-width: 701px) and (max-width: 900px): component adjustments at this breakpoint. */
@media (min-width: 701px) and (max-width: 900px) {
  .app-tour-layout,
  .support-feature {
    grid-template-columns: 1fr;
  }
  .app-tour-phone {
    width: 100%;
    max-width: 440px;
    margin-inline: auto;
  }
  .support-feature-photo {
    height: 380px;
  }
}
/* Preserve the desktop floating-card composition at a mobile-friendly scale. */
/* Viewport (max-width: 700px): component adjustments at this breakpoint. */
@media (max-width: 700px) {
  .app-tour-phone {
    display: block;
    padding-top: 26px;
    max-width: 400px;
  }
  .device-shell {
    width: 240px;
    max-width: 78%;
  }
  .phone-card {
    position: absolute;
    padding: 12px;
    border-radius: 14px;
  }
  .phone-card-top {
    width: 44%;
    max-width: 150px;
    right: 0;
    top: 90px;
  }
  .phone-card-bottom {
    width: 62%;
    max-width: 210px;
    left: 0;
    bottom: 76px;
  }
  .phone-card strong {
    font-size: 12px;
  }
  .phone-card p {
    font-size: 11px;
  }
  .phone-flourish {
    display: block;
    overflow: visible;
  }
  .app-tour-phone figcaption {
    margin-top: 30px;
  }
  .program-image {
    height: auto;
    aspect-ratio: 4 / 3;
  }
  .app-step {
    gap: 14px;
    padding: 20px 16px;
  }
  .step-number {
    flex-shrink: 0;
    font-size: 36px;
  }
}
/* Viewport (max-width: 380px): component adjustments at this breakpoint. */
@media (max-width: 380px) {
  .support-stat-grid {
    grid-template-columns: 1fr;
  }
  .hero-copy h1 {
    font-size: 29px;
  }
}
/* Mobile carousel: centered copy, swipe navigation, and three quiet indicators. */
/* Viewport (max-width: 700px): component adjustments at this breakpoint. */
@media (max-width: 700px) {
  .home-hero {
    touch-action: pan-y pinch-zoom;
  }
  .hero-layout {
    justify-content: center;
    min-height: max(
      520px,
      calc(
        100svh - var(--hero-header-height) - var(--hero-benefits-height, 250px)
      )
    );
    padding-block: 64px;
  }
  .hero-dock {
    display: block;
    position: absolute;
    bottom: 14px;
    right: 0;
    width: 100%;
  }
  .hero-controls {
    justify-content: center;
    margin-top: 0;
  }
  .hero-controls > button {
    display: none;
  }
  .hero-dots button {
    width: 36px;
    height: 36px;
  }
  .hero-dots span,
  .hero-dots [aria-pressed="true"] span {
    width: 7px;
    height: 7px;
    border-radius: 50%;
  }
}

/* September homepage: a fixed message over gentle ambient photography. */
/* Group: Current homepage hero: ambient image, fixed copy, and proof strip. */
.care-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: #293e43;
  color: white;
}
.care-hero-image {
  position: absolute;
  inset: 0;
  z-index: -2;
  overflow: hidden;
}
.care-hero-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 68% 48%;
  transform-origin: 70% 45%;
  animation: hero-ambient-zoom 22s linear infinite alternate;
}
.care-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(
      90deg,
      rgba(29, 25, 78, 0.92),
      rgba(46, 36, 89, 0.66) 35%,
      rgba(41, 34, 80, 0.05) 66%,
      rgba(30, 26, 75, 0.23) 100%
    ),
    linear-gradient(0deg, rgba(25, 24, 67, 0.86), transparent 48%);
}
.care-hero-inner {
  min-height: calc(100svh - 97px);
  padding-top: 0;
  padding-bottom: clamp(24px, 4svh, 40px);
  display: grid;
  grid-template-rows: 1fr auto;
  gap: 0;
  position: relative;
}
/* Center the copy in the space above the support strip, with equal breathing room. */
.care-hero-copy {
  max-width: 620px;
  align-self: center;
  padding-block: clamp(24px, 5svh, 60px);
}
.care-hero h1 {
  font-size: clamp(40px, 4.4vw, 66px);
  font-weight: 400;
  letter-spacing: -0.045em;
  line-height: 1.1;
  color: #fff;
}
.care-hero-copy > p {
  max-width: 490px;
  font-size: 17px;
  line-height: 1.75;
  margin: 24px 0;
}
.care-hero .button {
  background: #def0e5;
  color: #1b4540;
  border-color: #def0e5;
}
.care-hero .button-outline {
  background: transparent;
  border-color: #fff9;
  color: #fff;
}
.care-hero .hero-brand-note {
  font-size: 11px;
  color: #edf1ee;
  margin-top: 20px;
}
.hero-proof {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
  border-top: 1px solid #ffffff50;
  padding-top: 28px;
}
.hero-proof > div {
  display: grid;
  grid-template-columns: 24px 1fr;
  gap: 4px 12px;
}
.hero-proof span {
  grid-row: span 2;
  font-size: 11px;
  color: #c9e8da;
  padding-top: 4px;
}
.hero-proof strong {
  font-size: 16px;
  font-weight: 500;
}
.hero-proof p {
  font-size: 12px;
  color: #edf3ee;
  margin: 0;
  max-width: 290px;
}
.ambient-toggle {
  position: absolute;
  right: 0;
  bottom: 13px;
  padding: 4px 0;
  border: 0;
  background: none;
  color: #fff;
  font-size: 10px;
  text-decoration: underline;
  text-underline-offset: 4px;
}
.hero-image-note {
  position: absolute;
  left: 0;
  bottom: 16px;
  font-size: 9px;
  color: #e4e8e7;
}
.motion-paused .care-hero-image img {
  animation-play-state: paused;
}
@keyframes room-drift {
  from {
    transform: scale(1);
  }
  to {
    transform: scale(1.07) translateX(-1%);
  }
}
/* Group: Getting-started cards. */
.journey-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 32px;
}
.journey-grid article {
  position: relative;
}
.journey-number {
  position: absolute;
  top: 16px;
  left: 18px;
  z-index: 1;
  font-size: 15px;
}
.journey-art {
  height: 260px;
  overflow: hidden;
  position: relative;
  border-radius: 20px;
  margin-bottom: 26px;
  background: #e0eee6;
}
.journey-art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 25%;
}
.journey-art > span {
  position: absolute;
  bottom: 20px;
  left: 18px;
  right: 18px;
  padding: 11px;
  text-align: center;
  border-radius: 8px;
  background: #fffffff2;
  font-size: 12px;
}
.tool-art {
  background: #eee8f1;
}
.tool-art img {
  width: 140px;
  height: auto;
  margin: 35px auto 0;
  box-shadow: 0 5px 20px #38344525;
  border: 5px solid #fff;
  border-radius: 20px;
}
.journey-grid h3 {
  font-size: 23px;
}
.journey-grid p {
  font-size: 14px;
  margin-top: 12px;
}
/* Group: Navigator, coach, and app features. */
.included-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 48px;
}
.included-grid article + article {
  border-left: 1px solid #cbdcd3;
  padding-left: 35px;
}
.included-grid h3 {
  font-size: 23px;
}
.included-grid p {
  font-size: 14px;
  margin-top: 14px;
}
.line-icon {
  display: block;
  font-size: 40px;
  height: 68px;
  color: #337e70;
  line-height: 1;
}
/* Group: How support complements the oncology team. */
.care-comparison {
  display: grid;
  grid-template-columns: 1fr 70px 1fr;
  align-items: center;
}
.care-comparison > div {
  background: #f3f6f5;
  border-radius: 18px;
  padding: 35px;
  height: 100%;
}
.care-comparison > div:last-child {
  background: #e9e5f0;
}
.care-comparison > span {
  text-align: center;
  font-size: 34px;
  color: #438174;
}
.care-comparison h3 {
  margin-bottom: 15px;
}
/* Group: Closing contact actions. */
.start-panel {
  display: flex;
  gap: 60px;
  align-items: center;
  justify-content: space-between;
}
.start-panel > div:first-child {
  max-width: 610px;
}
.start-panel .actions {
  flex-shrink: 0;
  flex-direction: column;
  /* Stretch stacked buttons to the width of the longer label. */
  align-items: stretch;
}
.section-navy .button {
  background: #def0e5;
  color: #19443d;
  border-color: #def0e5;
}
.section-navy .button-outline {
  color: #fff;
  background: transparent;
}
/* Viewport (max-width: 900px): component adjustments at this breakpoint. */
@media (max-width: 900px) {
  .care-hero-inner {
    min-height: calc(100svh - 97px);
  }
  .care-hero-copy {
    max-width: 530px;
  }
  .care-hero h1 {
    font-size: 52px;
  }
  .hero-proof {
    gap: 20px;
  }
  .journey-grid {
    gap: 20px;
  }
  .journey-art {
    height: 220px;
  }
  .journey-grid h3 {
    font-size: 20px;
  }
  .included-grid {
    gap: 25px;
  }
  .included-grid article + article {
    padding-left: 24px;
  }
  .start-panel {
    flex-direction: column;
    align-items: flex-start;
    gap: 25px;
  }
  .start-panel .actions {
    flex-direction: row;
  }
}
/* Viewport (max-width: 600px): component adjustments at this breakpoint. */
@media (max-width: 600px) {
  /* A shorter photo area keeps both faces in the narrow mobile crop. */
  .care-hero-image {
    height: 580px;
    bottom: auto;
  }
  .care-hero-image img {
    object-position: 88% top;
  }
  .care-hero {
    background: #181740;
  }
  .care-hero::after {
    background:
      linear-gradient(90deg, rgba(30, 25, 75, 0.68), rgba(42, 33, 83, 0.2)),
      linear-gradient(
        180deg,
        rgba(35, 28, 78, 0.2) 0,
        rgba(24, 23, 64, 0.3) 300px,
        #181740 580px
      );
  }
  .care-hero-inner {
    min-height: calc(100svh - 81px);
    padding-top: 0;
    gap: 0;
    padding-bottom: 24px;
  }
  .care-hero h1 {
    font-size: clamp(35px, 9.5vw, 49px);
  }
  .care-hero-copy > p {
    font-size: 15px;
    max-width: 350px;
  }
  .care-hero .actions {
    gap: 10px;
  }
  .care-hero .button {
    font-size: 12px;
    padding: 13px 15px;
  }
  .hero-proof {
    grid-template-columns: 1fr;
    padding-top: 22px;
    gap: 18px;
  }
  .hero-proof strong {
    font-size: 15px;
  }
  .hero-proof p {
    font-size: 12px;
    max-width: none;
  }
  .hero-image-note {
    bottom: 37px;
  }
  .ambient-toggle {
    left: 0;
    right: auto;
  }
  .journey-grid,
  .included-grid {
    grid-template-columns: 1fr;
    gap: 35px;
  }
  .journey-art {
    height: 290px;
  }
  .journey-art img {
    object-position: center 28%;
  }
  .tool-art img {
    width: 150px;
  }
  .included-grid article + article {
    padding: 25px 0 0;
    border-left: none;
    border-top: 1px solid #cbdcd3;
  }
  .care-comparison {
    grid-template-columns: 1fr;
    gap: 14px;
  }
  .care-comparison > div {
    padding: 25px;
  }
  .start-panel .actions {
    flex-direction: column;
    width: 100%;
  }
  /* Give both stacked mobile calls to action the same full width. */
  .start-panel .actions .button {
    width: 100%;
  }
}

/* Compact spacing keeps the full support strip visible on shorter screens.
   Content can still grow naturally when visitors enlarge their text. */
/* Viewport (max-height: 760px): component adjustments at this breakpoint. */
@media (max-height: 760px) {
  .care-hero-copy {
    padding-block: 24px;
  }
  .care-hero h1 {
    font-size: clamp(32px, 4vw, 52px);
  }
  .care-hero-copy > p {
    margin: 18px 0;
    line-height: 1.55;
  }
  .hero-proof {
    padding-top: 18px;
    gap: 14px;
  }
}
/* Viewport (max-width: 600px) and (max-height: 760px): component adjustments at this breakpoint. */
@media (max-width: 600px) and (max-height: 760px) {
  .care-hero h1 {
    font-size: 32px;
  }
  .care-hero-copy > p {
    font-size: 14px;
  }
  .hero-proof strong {
    font-size: 14px;
  }
  .hero-proof p {
    line-height: 1.4;
  }
}

/* Halve the shared whitespace between the start CTA and coverage heading. */
#how-it-works {
  padding-bottom: clamp(32px, 3.5vw, 53px);
}
#insurance {
  padding-top: clamp(32px, 3.5vw, 53px);
  /* Keep a compact gap between the coverage CTA and the mint panel. */
  padding-bottom: 32px;
}
#insurance .coverage-band {
  padding-bottom: 0;
}

/* Keep the conversation subject visible in both landscape and mobile cards. */
.navigator-art img {
  object-position: 65% center;
}

/* Product standards use a quiet band above the footer, with clear regional scope. */
/* Group: Product and privacy credibility strip. */
.credentials-strip {
  padding-block: 30px 22px;
  background: #e7f3fc;
}
.trust-strip-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.credential-item {
  padding: 0 24px;
  border-left: 1px solid #77b8ae;
}
.credential-item:first-child {
  padding-left: 0;
  border-left: 0;
}
.credential-item:last-child {
  padding-right: 0;
}
.credential-item svg {
  width: 44px;
  height: 44px;
  margin-bottom: 16px;
  color: #292c63;
}
.credential-item h2 {
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0;
  margin: 0 0 8px;
}
.credential-item p {
  font-size: 13px;
  line-height: 1.7;
  margin: 0;
}
.credentials-context {
  font-size: 11px;
  line-height: 1.7;
  margin-top: 22px;
  color: #526477;
}
.credentials-context a {
  text-decoration: underline;
  text-underline-offset: 3px;
}
/* Viewport (max-width: 900px): component adjustments at this breakpoint. */
@media (max-width: 900px) {
  .trust-strip-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 26px 0;
  }
  .credential-item:nth-child(3) {
    border-left: 0;
    padding-left: 0;
  }
}
/* Viewport (max-width: 480px): component adjustments at this breakpoint. */
@media (max-width: 480px) {
  .trust-strip-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .credential-item,
  .credential-item:nth-child(3) {
    padding: 20px 0 0;
    border-left: 0;
    border-top: 1px solid #bad7dc;
  }
  .credential-item:first-child {
    padding-top: 0;
    border-top: 0;
  }
  .credential-item svg {
    margin-bottom: 10px;
  }
}

/* Original Prosoma standards artwork; HIPAA is a text label, not a seal. */
.credential-logo {
  width: auto;
  max-width: 100px;
  height: 48px;
  object-fit: contain;
  object-position: left center;
  margin-bottom: 16px;
}
.hipaa-wordmark {
  display: flex;
  align-items: center;
  height: 48px;
  margin-bottom: 16px;
  font-size: 25px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: #292c63;
}

/* A small, slow zoom reverses smoothly so the photograph never snaps back. */
@keyframes hero-ambient-zoom {
  from {
    transform: scale(1);
  }
  to {
    transform: scale(1.1);
  }
}
/* Accessibility: honor the visitor's reduced-motion preference. */
@media (prefers-reduced-motion: reduce) {
  .care-hero-image img {
    animation: none;
    transform: none;
  }
}