/* health-systems.css — styles specific to the Health Systems page (desktop, static) */

.page-health-systems {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  background: var(--color-white);
}

.page-health-systems section {
  width: 100%;
  display: flex;
  flex-direction: column;
}

/* Shared bits ------------------------------------------------------------ */

.eyebrow {
  font-family: var(--font-body-small-family);
  font-weight: var(--font-weight-bold);
  font-size: var(--font-body-small-size);
  line-height: var(--font-body-small-line-height);
  color: var(--color-accent1-500);
  text-transform: uppercase;
  margin: 0 0 12px;
}

.text-accent {
  color: var(--color-primary-500);
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 24px;
  border-radius: 12px;
  border: none;
  text-decoration: none;
  cursor: pointer;
}

.button--primary {
  background: var(--color-primary-600);
  color: var(--color-white);
  font-family: var(--font-body-bold-family);
  font-weight: var(--font-body-bold-weight);
  font-size: var(--font-body-regular-size);
  line-height: var(--font-body-regular-line-height);
  transition: background-color var(--transition-hover), color var(--transition-hover), box-shadow var(--transition-hover);
}

/* Figma "Buttons" :hover — same treatment as the header CTA; inset shadow
   stands in for Figma's 1px INSIDE stroke so the button doesn't resize. */
.button--primary:hover,
.button--primary:focus-visible {
  background: var(--color-primary-50);
  color: var(--color-primary-600);
  box-shadow: inset 0 0 0 1px var(--color-primary-600);
}

/* Keyboard focus ring — matches base.css (nav links, .nav-cta). */
.button:focus-visible {
  outline: 2px solid var(--color-primary-500);
  outline-offset: 2px;
}

.button--outline {
  background: var(--color-white);
  border: 1px solid var(--color-tertiary-400);
  color: var(--color-tertiary-700);
  font-family: var(--font-body-regular-family);
  font-weight: var(--font-weight-semibold);
  font-size: var(--font-body-regular-size);
}

/* Header block ------------------------------------------------------------ */

.header-block {
  align-items: center;
  padding: 72px 32px 64px;
  background: linear-gradient(124deg, #ffffff 0%, var(--color-primary-25) 35%, var(--color-primary-50) 70%, var(--color-accent2-50) 100%);
}

.header-block__inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  max-width: 820px;
  width: 100%;
  padding: 0 32px;
}

.header-block__title {
  font-family: var(--font-title-family);
  font-weight: var(--font-title-weight);
  font-size: var(--font-title-size);
  line-height: var(--font-title-line-height);
  color: var(--color-neutral-900);
  margin: 0;
}

.header-block__body {
  display: flex;
  flex-direction: column;
  max-width: 640px;
  margin-top: 4px;
}

.header-block__body p {
  font-family: var(--font-body-regular-family);
  font-weight: var(--font-body-regular-weight);
  font-size: var(--font-body-regular-size);
  line-height: var(--font-body-regular-line-height);
  color: var(--color-neutral-500);
  margin: 0;
}

.header-block__body sup {
  color: var(--color-neutral-350);
}

/* Carrie intro ------------------------------------------------------------ */

.carrie-intro {
  gap: 12px;
  max-width: 1160px;
  padding: 0 32px;
  align-items: flex-start;
}

.carrie-intro__heading {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
}

.carrie-intro__brand {
  font-family: var(--font-title-family);
  font-weight: var(--font-title-weight);
  font-size: 40px;
  line-height: 1.2;
  color: var(--color-primary-500);
  margin: 0;
}

.carrie-intro__subtitle {
  font-family: var(--font-h3-family);
  font-weight: var(--font-h3-weight);
  font-size: var(--font-h3-size);
  line-height: var(--font-h3-line-height);
  color: var(--color-neutral-900);
  margin: 0;
}

.carrie-intro__text {
  font-family: var(--font-body-regular-family);
  font-weight: var(--font-weight-regular);
  font-size: var(--font-body-regular-size);
  line-height: var(--font-body-regular-line-height);
  letter-spacing: var(--font-body-regular-letter-spacing);
  color: var(--color-neutral-500);
  margin: 0;
}

.triptych {
  display: flex;
  gap: 14px;
  width: 100%;
  padding-top: 14px;
}

.triptych__card {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 22px;
  background: var(--color-white);
  border: 1px solid var(--color-neutral-250);
  border-radius: 16px;
  box-shadow: 0 2px 8px rgba(59, 22, 120, 0.06);
}

.triptych__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: var(--color-primary-50);
  border: 1px solid var(--color-neutral-200);
}

.triptych__icon img {
  width: 22px;
  height: 22px;
}

.triptych__title {
  font-family: var(--font-h4-family);
  font-weight: var(--font-title-weight);
  font-size: var(--font-h4-size);
  color: var(--color-neutral-900);
  margin: 10px 0 0;
}

.triptych__sub {
  font-family: var(--font-body-small-family);
  font-weight: var(--font-weight-bold);
  font-size: var(--font-body-small-size);
  color: var(--color-primary-700);
  margin: 4px 0 0;
}

.triptych__list,
.triptych__list ul {
  font-family: var(--font-body-small-family);
  font-weight: var(--font-body-small-weight);
  font-size: var(--font-body-small-size);
  color: var(--color-neutral-500);
  margin: 3px 0 0;
  padding-left: 20px;
}

.triptych__list ul {
  margin-top: 0;
}

/* Programs (chronic condition packages) ---------------------------------- */

.programs {
  gap: 12px;
  max-width: 1160px;
  padding: 32px;
  align-items: flex-start;
}

.programs__title {
  font-family: var(--font-h2-family);
  font-weight: var(--font-h2-weight);
  font-size: var(--font-h2-size);
  line-height: var(--font-h2-line-height);
  color: var(--color-neutral-900);
  margin: 0;
}

.programs__subtitle {
  font-family: var(--font-h3-family);
  font-weight: var(--font-h3-weight);
  font-size: var(--font-h3-size);
  line-height: var(--font-h3-line-height);
  color: var(--color-neutral-900);
  margin: 0;
}

.programs__body {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 780px;
}

.programs__body p {
  font-family: var(--font-body-regular-family);
  font-weight: var(--font-body-regular-weight);
  font-size: var(--font-body-regular-size);
  line-height: var(--font-body-regular-line-height);
  color: var(--color-neutral-500);
  margin: 0;
}

.programs__scroller {
  display: flex;
  gap: 14px;
  width: 100%;
  overflow-x: auto;
  padding: 32px 0 4px;
}

.condition-card {
  flex-shrink: 0;
  width: 440px;
  display: flex;
  flex-direction: column;
  gap: 11px;
  padding: 21px 22px 22px;
  background: var(--color-white);
  border: 1px solid var(--color-neutral-200);
  border-radius: 16px;
  box-shadow: 0 2px 4px rgba(59, 22, 120, 0.06);
}

.condition-card__title {
  font-family: var(--font-h4-family);
  font-weight: var(--font-title-weight);
  font-size: var(--font-h4-size);
  color: var(--color-tertiary-700);
  margin: 0;
}

.condition-card__row {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.condition-card__k {
  font-family: var(--font-body-small-family);
  font-weight: var(--font-weight-bold);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-tertiary-600);
  margin: 0;
}

.condition-card__v {
  font-family: var(--font-body-small-family);
  font-weight: var(--font-body-small-weight);
  font-size: 13px;
  color: var(--color-neutral-500);
  margin: 0;
}

.programs__nav {
  display: flex;
  gap: 8px;
  align-self: flex-end;
}

.programs__nav-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  background: var(--color-white);
  border: 1px solid var(--color-tertiary-400);
  color: var(--color-tertiary-700);
  font-family: var(--font-body-regular-family);
  font-size: var(--font-size-2);
}

.programs__nav-btn--disabled {
  opacity: 0.35;
}

.programs__disclaimer {
  font-family: var(--font-body-bold-family);
  font-weight: var(--font-body-bold-weight);
  font-size: var(--font-body-regular-size);
  line-height: var(--font-body-regular-line-height);
  color: var(--color-neutral-900);
  margin: 0;
}

/* Modeled math ------------------------------------------------------------ */

.modeled-math {
  gap: 12px;
  max-width: 1160px;
  padding: 32px 32px 88px;
  align-items: flex-start;
}

.modeled-math__title {
  font-family: var(--font-h2-family);
  font-weight: var(--font-h2-weight);
  font-size: 30px;
  letter-spacing: -0.01em;
  color: var(--color-neutral-900);
  margin: 0;
}

.modeled-math__body {
  font-family: var(--font-body-regular-family);
  font-weight: var(--font-body-regular-weight);
  font-size: var(--font-body-regular-size);
  line-height: var(--font-body-regular-line-height);
  color: var(--color-neutral-500);
  max-width: 660px;
  margin: 0;
}

.modeled-math__body sup {
  font-size: 10px;
  color: var(--color-neutral-350);
}

.math-row {
  display: flex;
  align-items: stretch;
  gap: 10px;
  width: 100%;
  padding-top: 12px;
}

.math-box {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 12px;
  border: 1px dashed var(--color-tertiary-400);
  border-radius: 12px;
  background: var(--color-neutral-25);
  text-align: center;
}

.math-box--out {
  flex: 1.35;
  border-style: solid;
  background: var(--color-tertiary-100);
}

.math-box__num {
  font-family: var(--font-title-family);
  font-weight: var(--font-title-weight);
  font-size: 21px;
  letter-spacing: -0.01em;
  color: var(--color-neutral-900);
  margin: 0;
}

.math-box--out .math-box__num {
  font-size: 21.5px;
  color: var(--color-tertiary-700);
}

.math-box__num sup {
  font-size: 12px;
}

.math-box__label {
  font-family: var(--font-body-bold-family);
  font-weight: var(--font-body-bold-weight);
  font-size: 11.5px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--color-neutral-500);
  margin: 0;
}

.math-box--out .math-box__label {
  font-size: 13.5px;
  text-transform: none;
  letter-spacing: 0;
  color: var(--color-tertiary-700);
}

.math-op {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-body-regular-family);
  font-weight: var(--font-body-regular-weight);
  font-size: var(--font-size-3);
  color: var(--color-neutral-500);
}

/* Divider ------------------------------------------------------------ */

.section-divider {
  width: 100%;
  max-width: 1140px;
  border: none;
  border-top: 1px solid var(--color-neutral-250);
  margin: 0;
}

/* CTA ------------------------------------------------------------ */

.cta {
  max-width: 1160px;
  padding: 32px 32px 88px;
  align-items: center;
}

.cta__inner {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  width: 100%;
}

.cta__title {
  font-family: var(--font-title-family);
  font-weight: var(--font-title-weight);
  font-size: 32px;
  line-height: 1.375;
  color: var(--color-primary-500);
  margin: 0;
}

.cta__actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.cta__button {
  width: 369px;
  justify-content: space-between;
}

/* Footnotes ------------------------------------------------------------ */

.page-footnotes {
  max-width: 1160px;
  width: 100%;
  padding: 0 32px 40px;
  font-family: var(--font-body-regular-family);
  font-size: 12px;
  line-height: 1.8;
  color: var(--color-neutral-500);
}

/* ==========================================================================
   RESPONSIVE — tablet (≤768px) and mobile (≤480px).
   Desktop-first cascade: the 768px block covers both tablet and mobile;
   the 480px block layers mobile-only refinements on top of it. Heading
   sizes shrink automatically via the --font-*-size tokens redefined in
   tokens.css. This section handles layout direction, the triptych/program
   card stacking, and the math-row equation reflow.
   ========================================================================== */

@media (max-width: 768px) {
  /* Header block --------------------------------------------------------- */
  .header-block {
    padding: 56px var(--space-lg) 48px;
  }

  .header-block__inner {
    padding: 0 var(--space-lg);
  }

  /* Carrie intro / triptych ------------------------------------------------ */
  .carrie-intro {
    padding: 0 var(--space-lg);
  }

  /* Two even columns with the third card spanning full width avoids an
     awkward single orphan card sharing a lopsided row with empty space. */
  .triptych {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-md);
  }

  .triptych__card:last-child {
    grid-column: 1 / -1;
  }

  /* Programs (chronic condition packages) --------------------------------- */
  .programs {
    padding: var(--space-lg);
  }

  /* The horizontal scroll carousel (with its now-redundant nav arrows)
     only makes sense when cards sit side by side; at tablet/mobile widths
     it reads better as a plain stacked list. */
  .programs__scroller {
    flex-direction: column;
    overflow-x: visible;
    padding: var(--space-lg) 0 4px;
  }

  .condition-card {
    width: 100%;
  }

  .programs__nav {
    display: none;
  }

  /* Modeled math ----------------------------------------------------------- */
  .modeled-math {
    padding: var(--space-lg) var(--space-lg) 64px;
  }

  /* A horizontal equation of 5 boxes and 4 operators has no room to
     breathe below desktop widths, especially the long label on the final
     "out" box. Reflowing it into a vertical, top-to-bottom "recipe" reads
     naturally and keeps every label legible. */
  .math-row {
    flex-direction: column;
    gap: var(--space-sm);
  }

  .math-box,
  .math-box--out {
    flex: none;
    width: 100%;
  }

  .math-op {
    font-size: var(--font-size-4);
    padding: 2px 0;
  }

  /* CTA ------------------------------------------------------------------- */
  .cta {
    padding: var(--space-lg) var(--space-lg) 64px;
  }

  .cta__inner {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-lg);
  }

  .cta__button {
    width: 100%;
  }

  /* Footnotes ---------------------------------------------------------------- */
  .page-footnotes {
    padding: 0 var(--space-lg) 32px;
  }
}

@media (max-width: 480px) {
  /* Header block --------------------------------------------------------- */
  .header-block {
    padding: 40px var(--space-md) 40px;
  }

  .header-block__inner {
    padding: 0 var(--space-md);
  }

  /* Carrie intro / triptych ------------------------------------------------ */
  .carrie-intro {
    padding: 0 var(--space-md);
  }

  .triptych {
    grid-template-columns: 1fr;
  }

  .triptych__card:last-child {
    grid-column: auto;
  }

  /* Programs (chronic condition packages) --------------------------------- */
  .programs {
    padding: var(--space-md);
  }

  /* Modeled math ----------------------------------------------------------- */
  .modeled-math {
    padding: var(--space-md) var(--space-md) 48px;
  }

  /* CTA ------------------------------------------------------------------- */
  .cta {
    padding: var(--space-md) var(--space-md) 48px;
  }

  /* Footnotes ---------------------------------------------------------------- */
  .page-footnotes {
    padding: 0 var(--space-md) 32px;
  }
}