/* platform.css — styles specific to the Platform page (desktop, static) */

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

.page-platform section {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* 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;
}

.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,
.platform-subsection__link:focus-visible,
.platform-cta__link:focus-visible {
  outline: 2px solid var(--color-primary-500);
  outline-offset: 2px;
}

/* Opener ------------------------------------------------------------ */

.opener {
  padding: 72px 32px 64px;
  background: linear-gradient(135deg, #ffffff 0%, var(--color-primary-25) 35%, var(--color-primary-50) 70%, var(--color-accent2-50) 100%);
}

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

.opener__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;
}

.opener__subtitle {
  font-family: var(--font-body-small-family);
  font-weight: var(--font-body-small-weight);
  font-size: var(--font-body-small-size);
  line-height: var(--font-body-small-line-height);
  color: var(--color-neutral-500);
  margin: 4px 0 0;
}

/* Body layout: side menu + sections ------------------------------------- */

.platform-body {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: center;
  gap: 10px;
  max-width: 1140px;
  width: 100%;
  padding-bottom: 88px;
}

.platform-menu {
  flex-shrink: 0;
  width: 220px;
  position: sticky;
  top: 24px;
}

/* <details> gives the menu a native, keyboard-operable collapse/expand
   affordance for the tablet/mobile accordion pattern (see RESPONSIVE below)
   without any JS. It ships `open` by default so desktop and initial-load
   behavior are unaffected; only the mobile summary gets pointer/cursor
   affordance and a disclosure chevron. */
.platform-menu__details {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  width: 100%;
}

.platform-menu__title {
  display: block;
  font-family: var(--font-body-small-family);
  font-weight: var(--font-weight-medium);
  font-size: var(--font-body-small-size);
  text-transform: uppercase;
  color: var(--color-neutral-900);
  margin: 0;
  list-style: none;
  cursor: default;
}

.platform-menu__title::-webkit-details-marker {
  display: none;
}

.platform-menu__title::marker {
  content: "";
}

.platform-menu__list {
  list-style: none;
  margin: 0;
  padding: 12px 0 0;
  border-top: 1px solid var(--color-neutral-250);
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.platform-menu__item a {
  display: flex;
  gap: 14px;
  text-decoration: none;
  font-family: var(--font-body-regular-family);
  font-weight: var(--font-body-regular-weight);
  font-size: var(--font-body-regular-size);
  color: var(--color-neutral-900);
}

.platform-menu__number {
  color: var(--color-neutral-500);
}

/* Hover/focus: calm color shift to match the site's other link hovers —
   title to Primary/600, number to Primary/500. No underline (each row is a
   number + title pair). No hover state exists in Figma for this menu. */
.platform-menu__item a,
.platform-menu__number {
  transition: color var(--transition-hover);
}

.platform-menu__item a:hover,
.platform-menu__item a:focus-visible {
  color: var(--color-primary-600);
}

.platform-menu__item a:hover .platform-menu__number,
.platform-menu__item a:focus-visible .platform-menu__number {
  color: var(--color-primary-500);
}

.platform-menu__item a:focus-visible {
  outline: 2px solid var(--color-primary-500);
  outline-offset: 2px;
}

.platform-sections {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 80px;
  flex: 1;
  width: 100%;
  min-width: 0;
  padding-bottom: 80px;
}

.platform-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  min-width: 0;
  padding: 0 32px;
}

.platform-section__heading {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  margin: 0 0 12px;
}

.platform-section__heading--wide {
  margin-bottom: 12px;
}

.platform-section__number {
  font-family: var(--font-body-regular-family);
  font-weight: var(--font-body-regular-weight);
  font-size: var(--font-body-regular-size);
  color: var(--color-neutral-900);
}

.platform-section__heading h2,
.platform-section__heading {
  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);
}

.platform-section__subhead {
  font-family: var(--font-h4-family);
  font-weight: var(--font-h4-weight);
  font-size: var(--font-h4-size);
  line-height: var(--font-h4-line-height);
  color: var(--color-neutral-900);
  margin: 0 0 12px;
  padding: 0 32px;
  width: 100%;
}

.platform-section__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: 700px;
  padding: 0 32px;
  margin: 0 0 12px;
}

.platform-section__body--narrow {
  max-width: 760px;
}

/* Loop diagram ------------------------------------------------------------ */

/* Fluid by construction rather than only at breakpoints: capping width at
   439px but letting it shrink to 100% of the available column reproduces
   the exact 439x180 desktop box on wide viewports while scaling the whole
   diagram down proportionally once the column gets narrower than that,
   instead of overflowing or needing per-breakpoint overrides. This only
   works because the curve/outline/logo images below are sized with
   explicit percentage width/height (matching their intrinsic aspect
   ratio at the reference 439x180 box) rather than 'auto' &mdash; an
   absolutely-positioned replaced element with width/height:auto renders
   at its fixed intrinsic pixel size regardless of the container's actual
   size, which is what caused mobile-width overflow before this was
   corrected to explicit percentages. Every node/label position is a
   percentage inset against this same container and scales correctly
   either way, since those are non-replaced elements. */
.loop-diagram {
  position: relative;
  width: 100%;
  max-width: 439px;
  aspect-ratio: 439 / 180;
  margin: 32px 0;
}

.loop-diagram__curve {
  position: absolute;
  top: 0;
  right: 2.85%;
  bottom: 11.84%;
  left: 0.68%;
  width: 96.44%;
  height: 88.16%;
}

.loop-diagram__outline {
  position: absolute;
  top: 5%;
  right: 0.11%;
  bottom: 7.78%;
  left: 1.82%;
  width: 98.39%;
  height: 88.06%;
}

.loop-diagram__node {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  height: 28px;
  padding: 0 4px;
  border-radius: 999px;
  background: var(--color-primary-100);
  color: var(--color-primary-600);
  font-family: var(--font-caption-family);
  font-weight: var(--font-weight-bold);
  font-size: 11px;
  transition: background-color 0.25s ease, color 0.25s ease;
}

/* Active node mirrors the Carrie's Actions carousel below: whichever
   card is centered highlights its numbered stop on the loop with the
   darker "active" token, matching the Figma frame's selected-state node. */
.loop-diagram__node.is-active {
  background: var(--color-primary-600);
  color: var(--color-white);
}

.loop-diagram__node-label {
  position: absolute;
  left: 50%;
  white-space: nowrap;
  font-family: var(--font-caption-family);
  font-weight: var(--font-weight-bold);
  font-size: 11px;
  color: var(--color-primary-700);
  background: var(--color-white);
  padding: 3px 10px;
  border-radius: 999px;
  box-shadow: 0 2px 8px rgba(59, 22, 120, 0.12);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.2s ease;
  z-index: 2;
}

.loop-diagram__node-label--below {
  top: 100%;
  transform: translate(-50%, 8px);
}

.loop-diagram__node-label--above {
  bottom: 100%;
  transform: translate(-50%, -8px);
}

.loop-diagram__node.is-active .loop-diagram__node-label {
  opacity: 1;
  visibility: visible;
}

.loop-diagram__label {
  position: absolute;
  font-family: var(--font-caption-family);
  font-weight: var(--font-weight-bold);
  font-size: var(--font-body-small-size);
  color: var(--color-neutral-900);
  text-align: center;
}

.loop-diagram__label--provider {
  top: 48.89%;
  right: 63.33%;
  bottom: 32.78%;
  left: 8.88%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.loop-diagram__label--patient {
  top: 50%;
  right: 9.34%;
  left: 62.87%;
  transform: translateY(-50%);
}

.loop-diagram__logo {
  position: absolute;
  top: 42.22%;
  right: 41.23%;
  bottom: 45.56%;
  left: 39.18%;
  width: 19.59%;
  height: 12.22%;
}

.loop-actions__title {
  font-family: var(--font-h4-family);
  font-weight: var(--font-h4-weight);
  font-size: var(--font-h4-size);
  line-height: var(--font-h4-line-height);
  color: var(--color-primary-500);
  width: 100%;
  padding: 0 32px;
  margin: 0 0 20px;
  text-align: center;
}

/* Carrie's Actions carousel ------------------------------------------------- */

.loop-carousel {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-width: 0;
}

.loop-list {
  display: flex;
  align-items: center;
  gap: 24px;
  width: 100%;
  min-width: 0;
  overflow-x: auto;
  overflow-y: visible;
  scroll-snap-type: x mandatory;
  /* Deep side padding lets the first and last cards scroll all the way
     to the visual center of the row, same trick as the centering padding
     used elsewhere for the loop diagram's own box. */
  padding: 40px calc(50% - 125px);
  scrollbar-width: none;
}

.loop-list::-webkit-scrollbar {
  display: none;
}

.loop-list__item {
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: flex-start;
  flex-shrink: 0;
  width: 250px;
  min-height: 300px;
  padding: 12px;
  border: 1px solid var(--color-neutral-250);
  border-radius: 24px;
  background: var(--color-white);
  scroll-snap-align: center;
  cursor: pointer;
  /* transform/opacity are driven per-frame by platform.js as the
     carousel scrolls, producing the coverflow falloff; the transition
     only smooths the snap-settle and click-to-select cases. */
  transition: transform 0.25s ease, opacity 0.25s ease, box-shadow 0.25s ease;
}

.loop-list__item.is-active {
  border-color: var(--color-primary-300);
  box-shadow: 0 12px 24px rgba(59, 22, 120, 0.14);
  cursor: default;
}

.loop-carousel__arrow {
  position: relative;
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  border: 1px solid var(--color-neutral-250);
  background: var(--color-white);
  cursor: pointer;
  z-index: 1;
}

.loop-carousel__arrow::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 8px;
  height: 8px;
  border-right: 2px solid var(--color-neutral-600);
  border-bottom: 2px solid var(--color-neutral-600);
}

.loop-carousel__arrow--prev::before {
  transform: translate(-30%, -50%) rotate(135deg);
}

.loop-carousel__arrow--next::before {
  transform: translate(-70%, -50%) rotate(-45deg);
}

.loop-carousel__arrow:disabled {
  opacity: 0.35;
  cursor: default;
}

.loop-list__number {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 999px;
  background: var(--color-primary-100);
  color: var(--color-primary-600);
  font-family: var(--font-caption-family);
  font-weight: var(--font-weight-bold);
  font-size: 12px;
}

.loop-list__title {
  font-family: var(--font-body-bold-family);
  font-weight: var(--font-body-bold-weight);
  font-size: var(--font-body-regular-size);
  color: var(--color-primary-800);
  margin: 0;
  text-align: center;
  width: 100%;
}

.loop-list__text {
  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: 0;
  text-align: center;
  width: 100%;
}

/* Programs ------------------------------------------------------------ */

.programs-cards {
  display: flex;
  gap: 14px;
  width: 100%;
  padding: 0 32px;
  margin-bottom: 20px;
}

.programs-cards__card {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 18px 20px;
  border: 1px solid var(--color-neutral-250);
  border-radius: 16px;
}

.programs-cards__title {
  font-family: var(--font-h4-family);
  font-weight: var(--font-body-bold-weight);
  font-size: var(--font-h4-size);
  color: var(--color-secondary-600);
  margin: 0;
}

.programs-cards__list,
.programs-cards__text {
  font-family: var(--font-body-small-family);
  font-weight: var(--font-body-small-weight);
  font-size: 13.5px;
  line-height: var(--font-body-small-line-height);
  color: var(--color-neutral-500);
  margin: 0;
  padding-left: 20px;
}

.programs-cards__text {
  padding-left: 0;
}

.platform-subsection {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: 760px;
  width: 100%;
  padding-left: 32px;
  margin-bottom: 20px;
}

.platform-subsection__title {
  font-family: var(--font-h4-family);
  font-weight: var(--font-h2-weight);
  font-size: var(--font-h4-size);
  color: var(--color-neutral-900);
  margin: 0;
}

.platform-subsection__text {
  font-family: var(--font-body-small-family);
  font-weight: var(--font-body-small-weight);
  font-size: 13.5px;
  line-height: var(--font-body-small-line-height);
  color: var(--color-neutral-500);
  margin: 0;
}

.platform-subsection__link {
  font-family: var(--font-body-small-family);
  font-weight: var(--font-weight-semibold);
  font-size: var(--font-body-small-size);
  color: var(--color-secondary-500);
  /* Figma arrow link: no underline at rest, underline (text only) on hover.
     Kept as an underline with a transparent color so it can fade in. */
  text-decoration: underline;
  text-decoration-color: transparent;
  transition: text-decoration-color var(--transition-hover);
  margin-top: 4px;
}

.platform-subsection__link:hover,
.platform-subsection__link:focus-visible {
  text-decoration-color: currentColor;
}

/* inline-block keeps the parent link's underline off the arrow. */
.platform-subsection__link-arrow {
  display: inline-block;
  margin-left: 3px;
}

/* Integration ------------------------------------------------------------ */

.integration-highlight {
  font-family: var(--font-body-regular-family);
  font-weight: var(--font-body-bold-weight);
  font-size: 15px;
  color: var(--color-primary-800);
  max-width: 760px;
  width: 100%;
  padding: 0 32px;
  margin: 6px 0 8px;
}

.integration-grid {
  display: flex;
  gap: 24px;
  width: 100%;
  padding: 8px 32px 0;
}

.integration-column {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.integration-column__label {
  font-family: var(--font-body-regular-family);
  font-weight: var(--font-body-bold-weight);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-neutral-500);
  margin: 0;
}

.integration-table {
  width: 100%;
  border-collapse: collapse;
}

.integration-table tr {
  border-top: 1px solid var(--color-neutral-200);
}

.integration-table th,
.integration-table td {
  text-align: left;
  vertical-align: top;
  padding: 11px 12px;
  font-family: var(--font-body-small-family);
  font-weight: var(--font-body-small-weight);
}

.integration-table th {
  width: 190px;
  font-weight: var(--font-body-bold-weight);
  font-size: var(--font-body-small-size);
  color: var(--color-neutral-900);
}

.integration-table td {
  font-size: 13px;
  color: var(--color-neutral-500);
}

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

.platform-cta {
  max-width: 1160px;
  width: 100%;
  padding: 32px 32px 88px;
  border-top: 1px solid var(--color-neutral-250);
  gap: 16px;
}

.platform-cta__title {
  font-family: var(--font-title-family);
  font-weight: var(--font-title-weight);
  font-size: 32px;
  color: var(--color-primary-500);
  text-align: center;
  margin: 0;
}

.platform-cta__links {
  display: flex;
  gap: 32px;
}

.platform-cta__link {
  font-family: var(--font-body-small-family);
  font-weight: var(--font-weight-semibold);
  font-size: var(--font-body-small-size);
  color: var(--color-secondary-500);
  /* Figma arrow link: no underline at rest, underline (text only) on hover.
     Kept as an underline with a transparent color so it can fade in. */
  text-decoration: underline;
  text-decoration-color: transparent;
  transition: text-decoration-color var(--transition-hover);
}

.platform-cta__link:hover,
.platform-cta__link:focus-visible {
  text-decoration-color: currentColor;
}

/* inline-block keeps the parent link's underline off the arrow. */
.platform-cta__link-arrow {
  display: inline-block;
  margin-left: 3px;
}

.platform-cta__button {
  margin-top: 12px;
}

/* ==========================================================================
   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 Contents menu's
   collapse to an above-content accordion, loop-diagram node legibility,
   card/table stacking, and touch targets.
   ========================================================================== */

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

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

  /* Body layout — Contents nav collapses above the sections as a
     full-width, closed-by-default-off native <details> accordion instead
     of a persistent side rail. */
  .platform-body {
    flex-direction: column;
    gap: var(--space-xl);
  }

  .platform-menu {
    position: static;
    width: 100%;
    padding: 0 var(--space-lg);
  }

  .platform-menu__title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-sm);
    padding: 12px 0;
    border-bottom: 1px solid var(--color-neutral-250);
    cursor: pointer;
  }

  /* Custom chevron replaces the native marker (hidden above), rotating
     to reflect the <details> open state. */
  .platform-menu__title::after {
    content: "";
    flex-shrink: 0;
    width: 8px;
    height: 8px;
    border-right: 2px solid var(--color-neutral-500);
    border-bottom: 2px solid var(--color-neutral-500);
    transform: rotate(45deg);
    transition: transform 0.2s ease;
  }

  .platform-menu__details[open] .platform-menu__title::after {
    transform: rotate(-135deg);
  }

  .platform-menu__list {
    border-top: none;
    padding-top: 4px;
  }

  /* Generous vertical padding keeps the stacked menu links well above the
     ~44px touch-target guideline, matching the site nav's mobile pattern. */
  .platform-menu__item a {
    padding: 14px var(--space-sm);
    border-bottom: 1px solid var(--color-neutral-100);
  }

  .platform-menu__item a:focus-visible {
    outline-offset: -2px;
  }

  .platform-sections {
    gap: var(--space-xl);
    padding-bottom: 0;
  }

  .platform-section {
    padding: 0 var(--space-lg);
  }

  .platform-section__subhead,
  .platform-section__body {
    padding: 0;
  }

  .loop-actions__title {
    padding: 0;
  }

  /* Carrie's Actions carousel — stays a horizontal coverflow at every
     width (swiping/dragging a card row is a natural touch gesture); only
     the arrow buttons shrink to make more room for the cards. */
  .loop-carousel {
    gap: var(--space-xs);
  }

  .loop-carousel__arrow {
    width: 32px;
    height: 32px;
  }

  /* Programs ------------------------------------------------------------ */
  .programs-cards {
    flex-direction: column;
    padding: 0 var(--space-lg);
  }

  .platform-subsection {
    padding-left: var(--space-lg);
  }

  /* Integration ---------------------------------------------------------- */
  .integration-highlight {
    padding: 0 var(--space-lg);
  }

  .integration-grid {
    flex-direction: column;
    gap: var(--space-lg);
    padding: 8px var(--space-lg) 0;
  }

  /* Touch targets — text-only links get breathing room so the tappable
     area is comfortably larger than the visible underline. */
  .platform-subsection__link,
  .platform-cta__link {
    display: inline-block;
    padding: var(--space-sm) 0;
  }

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

  .platform-cta__links {
    flex-direction: column;
    gap: var(--space-sm);
    align-items: center;
  }
}

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

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

  .platform-menu {
    padding: 0 var(--space-md);
  }

  .platform-sections {
    gap: var(--space-lg);
  }

  .platform-section {
    padding: 0 var(--space-md);
  }

  /* Loop diagram — nodes are a fixed size regardless of the diagram's own
     fluid scaling (see base rule), so at the narrowest widths they read
     as proportionally large against the shrunken curve. Sizing them down
     here keeps the numbered stops legible without touching their
     percentage-based positions, which stay correct at any diagram size. */
  .loop-diagram__node {
    min-width: 22px;
    height: 22px;
    font-size: 10px;
  }

  /* Carrie's Actions carousel — narrower cards leave more of neighboring
     cards peeking in at the smallest widths, reinforcing that it's a
     scrollable row; the centering side-padding is recalculated to match. */
  .loop-list {
    padding: 40px calc(50% - 105px);
  }

  .loop-list__item {
    width: 210px;
    padding: var(--space-md);
  }

  /* Programs ------------------------------------------------------------ */
  .programs-cards {
    padding: 0 var(--space-md);
  }

  .platform-subsection {
    padding-left: var(--space-md);
  }

  /* Integration ---------------------------------------------------------- */
  .integration-highlight {
    padding: 0 var(--space-md);
  }

  .integration-grid {
    padding: 8px var(--space-md) 0;
  }

  /* The label column is a fixed 190px on desktop; at the narrowest widths
     that leaves too little room for the value column, so it becomes a
     share of the row instead so both columns keep breathing room. */
  .integration-table th {
    width: 42%;
  }

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