/*
 * 1SyncRx new design — HOME page sheet (home page agent owned).
 *
 * Source of truth: design-import/Home.dc.html. Tokens come from
 * assets/css/design/base.css (Foundation). Loaded after base.css; the legacy
 * sheets remain loaded for retained components (form status, lightbox,
 * back-to-top), so a few resets below neutralise legacy .home-hero rules.
 *
 * Sections (design block order): hero, credibility strip, pain ticker,
 * audience toggle, product tours + walkthrough band, comparison, outcomes,
 * Tuesday timeline, trust, how-it-works, vision, pricing, proof, FAQ,
 * final CTA. Shared browser-frame skin under ".home-frame".
 */

/* ── Shared: browser-frame skin over the product-media component ───────── */
.home-frame .product-window {
  border-radius: 16px;
  border: 1px solid var(--d-frame-border);
  background: var(--d-frame-bg);
  box-shadow: var(--d-shadow-frame);
  overflow: hidden;
}

.home-frame .product-window__bar {
  justify-content: flex-start;
  min-height: 0;
  gap: 7px;
  padding: 11px 16px;
  border-bottom: 1px solid var(--d-line-soft);
  background: #fff;
  font-family: var(--d-font);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: normal;
  text-transform: none;
}

.home-frame .product-window__dots {
  gap: 7px;
}

.home-frame .product-window__dots span {
  width: 9px;
  height: 9px;
  background: var(--d-frame-dot);
}

.home-frame .product-media__title {
  flex: none;
  min-width: 0;
  margin-left: 10px;
  font-size: 12px;
  color: var(--d-muted-alt);
  background: var(--d-chip-bg);
  border-radius: 6px;
  padding: 3px 14px;
}

.home-frame .product-media__title:empty {
  display: none;
}

.home-frame .product-media__stage {
  background: var(--d-frame-bg);
}

/* Hero frame: white body, warm bar, large shadow (design d-frame--lg). */
.home-frame--hero .product-window {
  background: #fff;
  box-shadow: var(--d-shadow-frame-lg);
}

.home-frame--hero .product-window__bar {
  background: var(--d-frame-bg);
}

.home-frame--hero .product-media__stage {
  background: #fff;
}

/* Panel frames (audience panels, tours): warm body, white bar. */
.home-frame--panel .product-window {
  background: var(--d-frame-bg);
}

/* GIF instances keep the walkthrough's own 16:9 ratio — whole, uncropped. */
.home-frame--gif .product-media__stage {
  aspect-ratio: 1280 / 720;
}

/* Bare frames (how-it-works): plain rounded frame, no chrome bar. */
.home-frame--bare .product-window {
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(23, 37, 31, .07);
}

.home-frame--bare .product-window__bar {
  display: none;
}

/* Both How-it-works frames now hold 1600x900 annotated graphics, so the stage
   matches the source exactly at 16:9. The previous 1440/1000 canvas was 1.44:1
   holding 2.22:1 captures, which left tall --d-deep bands above and below every
   image. Matching the ratio removes the letterboxing outright rather than
   recolouring it. Keep this in step with the graphics' real dimensions. */
.home-hiw__media .product-media__stage,
.home-frame--login .product-media__stage {
  /* Both columns now hold the 1920x866 walkthrough videos, so the stage matches
     the video, not the 16:9 of the annotated posters. Mismatching either way
     reintroduces the letterbox bands this rule was written to remove. */
  aspect-ratio: 1920 / 866;
  background: transparent;
}

/* Dark walkthrough-band frame: thin light border, deep shadow, no bar. */
.home-frame--dark .product-window {
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, .14);
  background: var(--d-deep);
  box-shadow: 0 16px 48px rgba(0, 0, 0, .35);
}

.home-frame--dark .product-window__bar {
  display: none;
}

.home-frame--dark .product-media__stage {
  background: var(--d-deep);
}

/* ── 1 · Hero — Statement ──────────────────────────────────────────────── */
/* Reset the legacy pages.css .home-hero block (min-height grid + 18ch h1). */
.syncrx-site .home-hero {
  display: block;
  min-height: 0;
  padding: 64px 24px 88px;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.home-hero__copy {
  max-width: 1100px;
  margin: 0 auto;
  position: relative;
}

.syncrx-site .home-hero h1 {
  max-width: none;
  font-size: clamp(30px, 3.8vw, 44px);
  line-height: 1.1;
  margin: 0;
  letter-spacing: -0.02em;
  font-weight: 800;
}

.home-hero__line {
  display: block;
}

@media (min-width: 1100px) {
  .home-hero__line {
    white-space: nowrap;
  }
}

.home-hero__sub {
  font-size: 15px;
  line-height: 1.6;
  color: var(--d-body);
  max-width: 620px;
  margin: 18px auto 0;
  text-wrap: balance;
}

.home-hero__sub b {
  font-weight: 700;
  color: var(--d-ink);
}

.home-hero__ctas {
  display: flex;
  gap: 12px;
  justify-content: center;
  margin-top: 32px;
  flex-wrap: wrap;
}

.home-hero__media {
  max-width: 980px;
  margin: 56px auto 0;
  text-align: left;
}

/* ── Hero on deep green ────────────────────────────────────────────────────
   Owner-requested treatment. Every text colour below was contrast-checked
   against the LIGHTEST point of the gradient (var(--d-deep-lift)), which is the worst
   case for light text: white 10.85:1, highlight 5.91:1, lede 6.77:1,
   primary button 8.40:1. All clear AA.
   The section already sets overflow:hidden, so the radial can bleed freely. */
.syncrx-site .home-hero {
  background:
    radial-gradient(120% 90% at 50% 0%, var(--d-deep-glow) 0%, transparent 60%),
    linear-gradient(180deg, var(--d-deep-lift) 0%, var(--d-deep) 100%);
  color: #fff;
}

.syncrx-site .home-hero {
  --srx-header-h: 98px;
  margin-top: calc(-1 * var(--srx-header-h));
  padding-top: calc(64px + var(--srx-header-h));
}

.syncrx-site .home-hero h1 {
  color: #fff;
}

/* The highlight is a light sage here, not the light-mode green, which would
   sit at roughly 1.5:1 on this background and vanish. */
.syncrx-site .home-hero .d-highlight {
  color: var(--c-sage);
}

.syncrx-site .home-hero .home-hero__sub {
  color: var(--d-sage-text);
}

.syncrx-site .home-hero .home-hero__sub b {
  color: #fff;
}

/* Primary CTA inverts: light fill, deep text. Secondary stays a hairline
   outline so the two never compete for the same emphasis. */
.syncrx-site .home-hero .d-btn {
  background: var(--c-sage);
  color: var(--d-deep);
  border-color: var(--c-sage);
}

.syncrx-site .home-hero .d-btn:hover,
.syncrx-site .home-hero .d-btn:focus-visible {
  background: var(--d-sage-lift);
  border-color: var(--d-sage-lift);
}

.syncrx-site .home-hero .d-btn--ghost {
  color: #fff;
  border: 1px solid rgba(255, 255, 255, .38);
  background: transparent;
}

.syncrx-site .home-hero .d-btn--ghost:hover,
.syncrx-site .home-hero .d-btn--ghost:focus-visible {
  border-color: rgba(255, 255, 255, .68);
  background: rgba(255, 255, 255, .07);
}

/* ── 2 · Credibility strip ─────────────────────────────────────────────── */
.home-cred__rail {
  max-width: 1160px;
  margin: 0 auto;
  /* Owner: give these four proof points more weight. Was 16px padding, 38px gap
     and 13.5px type, which read as fine print rather than the credibility line
     it is. Type is up to 15.5px and the row breathes more. */
  padding: 26px 24px;
  display: flex;
  justify-content: center;
  gap: 46px;
  flex-wrap: wrap;
  font-size: 15.5px;
  font-weight: 600;
}

.home-cred__item {
  display: flex;
  align-items: center;
  gap: 11px;
  line-height: 1.35;
}

/* Icons scale with the larger type so the lockup stays balanced. */
.home-cred__item svg {
  flex: none;
  width: 20px;
  height: 20px;
}

/* ── 3 · Pain ticker ───────────────────────────────────────────────────── */
.home-ticker {
  border-bottom: 1px solid var(--d-line);
  background: #fff;
  padding: 18px 0;
  overflow: hidden;
}

.home-ticker__viewport {
  overflow: hidden;
}

.home-ticker__marquee {
  display: flex;
  width: max-content;
  animation: home-ticker-scroll 28s linear infinite;
  will-change: transform;
}

.home-ticker__marquee.is-paused {
  animation-play-state: paused;
}

.home-ticker__track {
  display: flex;
  align-items: center;
  flex: none;
  width: max-content;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 16px;
  font-weight: 600;
  color: var(--d-muted);
}

.home-ticker__track li {
  display: flex;
  align-items: center;
  white-space: nowrap;
  padding: 0 clamp(28px, 3.5vw, 52px);
  text-decoration: line-through;
  text-decoration-color: var(--d-strike);
}

@keyframes home-ticker-scroll {
  from {
    transform: translate3d(0, 0, 0);
  }

  to {
    transform: translate3d(-50%, 0, 0);
  }
}

/* ── 4 · Audience toggle ───────────────────────────────────────────────── */
.home-aud {
  padding: 88px 24px;
}

.home-aud__rail {
  max-width: 1000px;
  margin: 0 auto;
  text-align: center;
}

.home-aud__lede {
  margin: 12px auto 0;
  max-width: none;
  white-space: nowrap;
}

.home-aud__switch {
  display: inline-flex;
  background: var(--d-track);
  border-radius: 99px;
  padding: 4px;
  margin-top: 28px;
  gap: 4px;
}

.home-aud__tab {
  min-height: 44px;
  border: none;
  cursor: pointer;
  font-family: inherit;
  font-size: 14.5px;
  font-weight: 700;
  white-space: nowrap;
  padding: 10px 22px;
  border-radius: 99px;
  transition: background-color .25s ease, color .25s ease;
  background: transparent;
  color: var(--d-body);
}

.home-aud__tab.is-active {
  background: var(--d-green);
  color: #fff;
}

.home-aud__panels {
  margin-top: 48px;
  text-align: left;
}

/* No JS: both panels render stacked; JS toggles [hidden] + .is-active. */
.js .home-aud__panel:not(.is-active) {
  display: none;
}

.no-js .home-aud__panel + .home-aud__panel {
  margin-top: 56px;
}

.home-aud__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 40px 44px;
  padding: 8px 4px;
}

.home-aud__card {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}

.home-aud__card-title {
  font-size: 15.5px;
  font-weight: 800;
  color: var(--d-ink);
  letter-spacing: -0.01em;
  line-height: 1.3;
}

.home-aud__card p {
  font-size: 14.5px;
  color: var(--d-body);
  line-height: 1.55;
  margin: 6px 0 0;
}

.home-aud__media {
  margin-top: 44px;
}

/* ── 5+6 · Product tours + walkthrough band ────────────────────────────── */
.home-tours {
  padding: 88px 24px;
  background: #fff;
  border-top: 1px solid var(--d-line);
}

.home-tours__rail {
  max-width: 1040px;
  margin: 0 auto;
}

.home-tours__intro {
  text-align: center;
  margin: 0 auto;
}

.home-tours__lede {
  margin: 12px 0 0;
  text-wrap: balance;
}

.home-tour {
  margin-top: 56px;
  display: grid;
  /* 380px, not 300px. At 300px the longest step title wrapped onto a second
     line and every step body broke awkwardly mid-phrase. Measured: the title
     needs ~340px at its 20px size. */
  grid-template-columns: 380px 1fr;
  gap: 40px;
  align-items: start;
}

.home-tour > * {
  min-width: 0;
}

.home-tour__media {
  position: relative;
}

.home-tour--reverse {
  margin-top: 140px;
  /* Mirror of .home-tour above: same 380px copy column, just on the other side.
     Left at 300px the two tours were visibly asymmetric. */
  grid-template-columns: 1fr 380px;
}

.home-tour--reverse .home-tour__media {
  order: 1;
}

.home-tour--reverse .home-tour__copy {
  order: 2;
}

.syncrx-site .home-tour__title {
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -0.015em;
  margin: 10px 0 18px;
  white-space: normal;
  overflow-wrap: anywhere;
}

.home-tours .d-eyebrow {
  color: var(--d-green);
}

.home-tour__steps {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.home-tour-step {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  text-align: left;
  width: 100%;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 12px;
  padding: 12px 14px;
  cursor: pointer;
  touch-action: manipulation;
  font-family: inherit;
  color: var(--d-ink);
  box-shadow: none;
  transition:
    background-color .25s ease,
    border-color .25s ease,
    box-shadow .25s ease,
    transform .25s ease;
}

.home-tour-step:hover,
.home-tour-step:focus-visible {
  background: #fff;
  border-color: var(--d-frame-border);
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(23, 37, 31, .08);
}

.home-tour-step.is-active {
  background: #fff;
  border-color: var(--d-frame-border);
  box-shadow: 0 6px 18px rgba(23, 37, 31, .06);
}

.home-tour-step__num {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 800;
  background: var(--d-track);
  color: var(--d-body);
  transition: background-color .25s ease, color .25s ease;
}

.home-tour-step.is-active .home-tour-step__num {
  background: var(--d-green);
  color: #fff;
}

.home-tour-step__title {
  display: block;
  font-size: 14.5px;
  font-weight: 700;
}

.home-tour-step__text {
  min-width: 0;
  flex: 1;
}

.home-tour-step__sub {
  display: block;
  font-size: 12.5px;
  color: var(--d-body);
  margin-top: 2px;
  line-height: 1.45;
  white-space: normal;
  overflow-wrap: anywhere;
}

/* Tour chrome chip reads as the design's progress label (green, bold). */
.home-frame--tour .product-media__title {
  margin-left: auto;
  background: none;
  border-radius: 0;
  padding: 0;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--d-green);
}

.home-tour-hotspots {
  display: none;
}

@media (min-width: 901px) {
  .js .home-tour-hotspots {
    display: block;
    position: absolute;
    z-index: 4;
    top: 38px;
    right: 1px;
    bottom: 1px;
    left: 1px;
    pointer-events: none;
  }

  .home-tour-hotspot {
    position: absolute;
    left: .7%;
    width: 11.4%;
    height: 4.5%;
    min-height: 14px;
    padding: 0;
    border: 1px solid transparent;
    border-radius: 6px;
    background: transparent;
    box-shadow: none;
    cursor: pointer;
    pointer-events: auto;
  }

  .home-tour-hotspot:hover,
  .home-tour-hotspot:focus-visible {
    border-color: var(--d-accent);
    background: color-mix(in srgb, var(--d-accent) 12%, transparent);
    outline: none;
  }

  .home-tour-hotspot.is-active {
    border-color: color-mix(in srgb, var(--d-accent) 56%, transparent);
  }

  .home-tour-hotspot--dashboard {
    top: 18.2%;
  }

  .home-tour-hotspot--tasks {
    top: 22.6%;
  }

  .home-tour-hotspot--new {
    top: 31.6%;
  }

  .home-tour-hotspot--orders {
    top: 35.9%;
  }

  .home-tour-hotspot--medications {
    top: 40.2%;
  }

  .home-tour-hotspot--patients {
    top: 49.3%;
  }

  .home-tour-hotspot--notifications {
    top: 57.8%;
  }
}

/* Dark 90-second walkthrough band. */
.home-walk {
  margin-top: 72px;
  background: var(--d-deep);
  border-radius: 16px;
  padding: 40px;
  display: grid;
  /* 560px, up from 380px. The video is the point of this band; at 380px it
     rendered only 378px wide inside a 1040px surface. */
  grid-template-columns: 1fr 560px;
  gap: 40px;
  align-items: center;
  color: var(--d-line);
}

.syncrx-site .home-walk__title {
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -0.015em;
  margin: 10px 0 0;
  color: #fff;
}

.home-walk__body {
  font-size: 15px;
  color: var(--d-dark-body);
  line-height: 1.6;
  margin: 12px 0 0;
  max-width: 420px;
}

/* ── ★ Old way vs 1SyncRx ──────────────────────────────────────────────── */
.home-compare {
  padding: clamp(72px, 7vw, 96px) 24px;
  background: var(--d-bg);
}

.home-compare__rail {
  max-width: 1160px;
  margin: 0 auto;
}

.home-compare__lede {
  max-width: 480px;
  margin: 40px auto 0;
  text-align: center;
}

.home-goodbye {
  position: relative;
  display: grid;
  grid-template-columns: minmax(260px, .9fr) minmax(430px, 1.1fr);
  min-height: 0;
  align-items: center;
  gap: clamp(18px, 2.6vw, 40px);
  padding: clamp(12px, 1.6vw, 22px) clamp(24px, 4vw, 56px);
  overflow: hidden;
  border: 0;
  border-radius: 0;
  background: transparent;
}



.home-goodbye__lead {
  position: relative;
  z-index: 1;
  transition: transform .7s cubic-bezier(.22, 1, .36, 1);
}

.home-goodbye__lead .d-eyebrow {
  margin-bottom: 8px;
}

.syncrx-site .home-goodbye__lead h2 {
  max-width: 430px;
  margin: 0;
  color: var(--d-ink);
  font-size: clamp(28px, 3vw, 38px);
  line-height: 1.04;
  letter-spacing: -.052em;
  text-wrap: balance;
}

@media (min-width: 1101px) {
  .syncrx-site .home-goodbye__lead h2 {
    max-width: none;
    font-size: clamp(30px, 2.5vw, 38px);
    white-space: nowrap;
  }
}

.home-goodbye__lead h2 em {
  color: var(--d-green);
  font-style: italic;
  font-weight: inherit;
}

.home-goodbye__arrow {
  display: block;
  width: 92px;
  height: auto;
  margin: 10px 0 0 auto;
  fill: none;
  stroke: var(--d-accent);
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transform: rotate(-4deg);
}

.home-goodbye__arrow path {
  stroke-dasharray: 180;
  stroke-dashoffset: 0;
}

.home-goodbye__roller {
  position: relative;
  z-index: 1;
  min-width: 0;
}

.home-goodbye__phrases {
  display: grid;
  gap: clamp(1px, .25vw, 4px);
  align-content: center;
}

.home-goodbye__phrase {
  width: 100%;
  min-height: 0;
  margin: 0;
  padding: 1px 10px;
  appearance: none;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: color-mix(in srgb, var(--d-body) 34%, var(--d-bg));
  font-family: inherit;
  font-size: clamp(18px, 1.95vw, 25px);
  font-weight: 650;
  line-height: 1.08;
  letter-spacing: -.035em;
  text-align: left;
  text-wrap: balance;
  cursor: pointer;
  scroll-snap-align: center;
  transition:
    color .32s ease,
    background-color .32s ease,
    transform .45s cubic-bezier(.22, 1, .36, 1);
}

.home-goodbye__phrase:hover,
.home-goodbye__phrase:focus-visible,
.home-goodbye__phrase[data-distance="1"] {
  color: color-mix(in srgb, var(--d-body) 56%, var(--d-bg));
}

.home-goodbye__phrase:focus-visible {
  outline: 2px solid var(--d-green);
  outline-offset: -2px;
}

/* Active phrase carries the brand green so the eye lands on it the way the
   reference does. The reference's warm red is deliberately NOT imported: it
   is another product's brand colour and would be an unapproved hue here. */
.home-goodbye__phrase--active {
  color: var(--d-green);
  font-weight: 780;
  transform: translateX(10px);
}

.home-goodbye__phrase--active strong {
  color: inherit;
  font-weight: inherit;
}

/* Two-step falloff either side of the active phrase, so the wheel reads as
   depth rather than a flat list. */
.home-goodbye__phrase[data-distance="2"] {
  color: color-mix(in srgb, var(--d-body) 24%, var(--d-bg));
}

.home-goodbye__phrase[data-distance="3"],
.home-goodbye__phrase[data-distance="4"],
.home-goodbye__phrase[data-distance="5"] {
  color: color-mix(in srgb, var(--d-body) 15%, var(--d-bg));
}



/* All phrases stay on screen; only the highlight moves. No scroll window,
   therefore no half-window padding and no dead space at the list ends. */
.js .home-goodbye__phrases {
  max-height: none;
  padding-block: 0;
  overflow: visible;
}

.js .home-goodbye__phrases::-webkit-scrollbar {
  display: none;
}

.js .home-goodbye__phrase {
  min-height: 0;
}

.motion-ready .home-goodbye:not(.is-revealed) .home-goodbye__lead {
  transform: translateX(-14px);
}

.motion-ready .home-goodbye:not(.is-revealed) .home-goodbye__phrase {
  transform: translateY(12px);
}

.motion-ready .home-goodbye:not(.is-revealed) .home-goodbye__phrase:nth-child(2) {
  transform: translateY(16px);
}

.motion-ready .home-goodbye:not(.is-revealed) .home-goodbye__phrase:nth-child(3) {
  transform: translateY(20px);
}

.motion-ready .home-goodbye:not(.is-revealed) .home-goodbye__phrase:nth-child(4) {
  transform: translateY(24px);
}

.motion-ready .home-goodbye:not(.is-revealed) .home-goodbye__phrase:nth-child(5) {
  transform: translateY(28px);
}

.motion-ready .home-goodbye:not(.is-revealed) .home-goodbye__phrase:nth-child(6) {
  transform: translateY(32px);
}

.motion-ready .home-goodbye:not(.is-revealed) .home-goodbye__arrow path {
  stroke-dashoffset: 180;
}

.home-goodbye.is-revealed .home-goodbye__arrow path {
  transition: stroke-dashoffset .75s .2s cubic-bezier(.22, 1, .36, 1);
}

.home-compare__table {
  margin-top: 36px;
  overflow: hidden;
  border: 1px solid var(--d-line);
  border-radius: 16px;
  background: #fff;
}

.home-compare__table table {
  width: 100%;
  border: 0;
  border-collapse: collapse;
  border-spacing: 0;
}

.home-compare__table tr {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  border-bottom: 1px solid var(--d-line-soft);
  transition: transform .5s cubic-bezier(.22, 1, .36, 1), background-color .24s ease;
}

.home-compare__table tbody tr:last-child {
  border-bottom: 0;
}

.home-compare__table th,
.home-compare__table td {
  min-width: 0;
  padding: 17px 28px;
  border: 0;
  text-align: left;
  vertical-align: top;
  overflow-wrap: anywhere;
}

.home-compare__table th {
  font-size: 13px;
  font-weight: 750;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.home-compare__cell--old-head {
  color: var(--d-muted);
  background: var(--d-chip-bg);
}

.home-compare__cell--now-head {
  color: var(--d-green);
  background: #F5F8F4;
  border-left: 1px solid var(--d-line-soft) !important;
}

.home-compare__cell--old {
  color: var(--d-body);
  background: var(--d-frame-bg);
  font-size: 14.5px;
}

.home-compare__cell--now {
  display: flex;
  gap: 9px;
  align-items: baseline;
  color: var(--d-ink);
  border-left: 1px solid var(--d-line-soft) !important;
  font-size: 14.5px;
  font-weight: 650;
}

.home-compare__table tbody tr:hover {
  background: color-mix(in srgb, var(--d-tile) 36%, #fff);
}

.motion-ready .home-compare__table tr[data-reveal]:not(.is-revealed) {
  transform: translateY(12px);
}

.home-compare__table tr.is-revealed .d-check {
  transform: scale(1);
}

.home-compare__table .d-check {
  display: inline-block;
  transform: scale(.84);
  transform-origin: center;
  transition: transform .36s .12s cubic-bezier(.22, 1, .36, 1);
}

/* Top padding must match the bottom. It used to be 0, which was invisible
   while this section was white and blended into the white block above it.
   Against the deep green band the card sat flush on the top edge with ~96px
   below it, so the band read as lopsided. */
.home-connected-section {
  padding: clamp(72px, 7vw, 96px) 24px;
  background: #fff;
}

.home-connected-section__rail {
  max-width: 1040px;
  margin: 0 auto;
}

.home-connected {
  margin-top: 0;
  padding: clamp(34px, 4vw, 52px) clamp(24px, 5vw, 72px);
  border: 1px solid var(--d-line);
  border-radius: 18px;
  background: color-mix(in srgb, var(--d-frame-bg) 92%, var(--d-tile));
  text-align: center;
}

.home-connected__heading {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 16px;
}

.home-connected__heading > span {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--d-green) 32%, var(--d-line));
}

.home-connected__heading h2 {
  margin: 0;
  font-size: clamp(21px, 2.2vw, 28px);
  font-weight: 750;
  letter-spacing: -.02em;
}

.home-connected > p {
  margin: 8px 0 0;
  color: var(--d-body);
  font-size: 15px;
}

.home-connected__flow {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(54px, 84px) minmax(0, 1fr) minmax(54px, 84px) minmax(0, 1fr);
  gap: clamp(12px, 2vw, 28px);
  align-items: center;
  margin-top: clamp(30px, 4vw, 46px);
}

.home-connected__node {
  display: flex;
  min-width: 0;
  min-height: 72px;
  align-items: center;
  justify-content: center;
  gap: 12px;
  color: var(--d-body-strong);
  font-size: clamp(14px, 1.4vw, 17px);
  font-weight: 750;
  line-height: 1.25;
}

.home-connected__node span:last-child {
  text-wrap: balance;
}

.home-connected__icon,
.home-connected__brandmark {
  display: inline-flex;
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  align-items: center;
  justify-content: center;
  border-radius: 13px;
  background: var(--d-tile);
  color: var(--d-green);
}

.home-connected__icon svg {
  width: 23px;
  height: 23px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.home-connected__node--brand {
  color: var(--d-ink);
  font-size: clamp(18px, 2vw, 24px);
}

.home-connected__brandmark {
  background: var(--d-green);
  color: #fff;
  font-size: 23px;
  font-weight: 800;
  letter-spacing: -.08em;
}

.home-connected__arrow {
  display: block;
  color: color-mix(in srgb, var(--d-green) 54%, var(--d-line));
  transform-origin: left center;
  transition: transform .75s cubic-bezier(.22, 1, .36, 1), opacity .4s ease;
}

.motion-ready .home-connected__flow:not(.is-drawn) .home-connected__arrow {
  opacity: .35;
  transform: scaleX(.18);
}

.home-connected__arrow svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

.home-connected__arrow path {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ── 7 · Outcomes strip ────────────────────────────────────────────────── */
/* The 0 top padding is deliberate and only safe while this section shares a
   background with .home-compare above it (both resolve to --d-bg). The gap
   above the grid is that section's bottom padding, not this one's.
   If this section ever gets its own background colour, restore a real top
   padding at the same time or the content will sit flush on the colour edge.
   .home-connected-section had exactly this bug once it turned green. */
.home-outcomes {
  padding: 0 24px 88px;
}

.home-outcomes__grid {
  max-width: 1040px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
}

.home-outcomes__big {
  font-size: 30px;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.home-outcomes__sub {
  font-size: 14px;
  color: var(--d-dark-body);
  margin-top: 6px;
}

.home-outcomes__note {
  text-align: center;
  font-size: 12.5px;
  color: var(--d-muted);
  margin-top: 14px;
}

/* ── 8 · A Tuesday with 1SyncRx ────────────────────────────────────────── */
.home-tuesday {
  background: #fff;
  border-top: 1px solid var(--d-line);
  padding: 88px 24px;
}

.home-tuesday__rail {
  max-width: 880px;
  margin: 0 auto;
}

.home-tuesday__intro {
  text-align: center;
}

.home-tuesday__intro h2 {
  margin: 10px 0 0;
}

.home-tuesday__lede {
  margin: 14px auto 0;
  max-width: 560px;
}

.home-tuesday__timeline {
  margin-top: 48px;
  position: relative;
  padding-left: 34px;
  border-left: 2px solid var(--d-frame-border);
  display: flex;
  flex-direction: column;
  gap: 36px;
}

.home-tuesday__row {
  position: relative;
}

.home-tuesday__dot {
  position: absolute;
  left: -42px;
  top: 4px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #fff;
  border: 3px solid var(--d-ghost-border);
  box-sizing: border-box;
}

.home-tuesday__dot--ai {
  background: var(--d-green);
  border-color: var(--d-green);
}

.home-tuesday__head {
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
}

.home-tuesday__time {
  font-size: 13px;
  font-weight: 800;
  color: var(--d-green);
  min-width: 84px;
}

.home-tuesday__moment {
  font-size: 16.5px;
  font-weight: 800;
}

.home-tuesday__badge {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .05em;
  color: var(--d-green);
  background: var(--d-tile);
  border-radius: 99px;
  padding: 3px 10px;
  text-transform: uppercase;
}

.home-tuesday__body {
  font-size: 14.5px;
  color: var(--d-body);
  line-height: 1.6;
  margin: 8px 0 0;
  max-width: 620px;
}

.home-tuesday__cards {
  margin-top: 48px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
}

.home-tuesday__card {
  background: var(--d-bg);
  border: 1px solid var(--d-line);
  border-radius: 14px;
  padding: 22px;
  transition: transform .25s ease, box-shadow .25s ease;
}

.home-tuesday__card:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 28px rgba(23, 37, 31, .08);
}

.home-tuesday__card-title {
  font-size: 13px;
  font-weight: 800;
  color: var(--d-green);
}

.home-tuesday__card-body {
  font-size: 14.5px;
  color: var(--d-body-strong);
  margin-top: 6px;
  line-height: 1.55;
}

/* ── 9 · Trust & compliance ────────────────────────────────────────────── */
.home-trust {
  padding: 88px 24px;
}

.home-trust__rail {
  max-width: 1040px;
  margin: 0 auto;
}

.home-trust__intro {
  text-align: center;
  max-width: 540px;
  margin: 0 auto;
}

.home-trust__grid {
  margin-top: 40px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 14px;
}

.home-trust__title {
  font-size: 15.5px;
  font-weight: 800;
  margin-top: 14px;
}

/* --d-dark-body, not --d-body: this card sits on the deep green band. The
   light-mode token lands at 1.86:1 here, effectively invisible. The on-dark
   override further down would win on source order alone, which is too fragile
   to rely on, so the correct colour is set at the point of definition. */
.home-trust__card p {
  font-size: 14px;
  color: var(--d-dark-body);
  line-height: 1.55;
  margin: 7px 0 0;
}

/* ── 10 · How it works ─────────────────────────────────────────────────── */
.home-hiw {
  background: #fff;
  border-top: 1px solid var(--d-line);
  padding: 88px 24px;
}

.home-hiw__rail {
  max-width: 1040px;
  margin: 0 auto;
}

.home-hiw__heading {
  text-align: center;
}

.home-hiw__grid {
  margin-top: 44px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.home-hiw__card {
  background: var(--d-bg);
  border: 1px solid var(--d-line);
  border-radius: 16px;
  padding: 30px;
  display: flex;
  flex-direction: column;
}

.home-hiw__steps {
  margin-top: 18px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.home-hiw__step {
  display: flex;
  gap: 14px;
}

.home-hiw__step-title {
  font-size: 15px;
  font-weight: 700;
}

.home-hiw__step-body {
  font-size: 13.5px;
  color: var(--d-body);
  margin-top: 3px;
  line-height: 1.5;
}

.home-hiw__media {
  margin-top: auto;
  padding-top: 20px;
}

/* ── 11 · Network vision ───────────────────────────────────────────────── */
.home-vision {
  padding: 40px 24px;
}

.home-vision__band {
  max-width: 1040px;
  margin: 0 auto;
  position: relative;
  overflow: hidden;
  contain: paint;
  background: var(--d-deep);
  border-radius: 20px;
  padding: 72px 48px;
  text-align: center;
}

.home-vision__vector {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: .55;
}

.home-vision__content {
  position: relative;
}

.home-vision__eyebrow {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .1em;
  color: var(--d-accent-soft);
  text-transform: uppercase;
  margin: 0;
}

.home-vision__statement {
  font-size: clamp(22px, 2.8vw, 30px);
  font-weight: 700;
  letter-spacing: -0.015em;
  color: #fff;
  max-width: 680px;
  margin: 16px auto 0;
  line-height: 1.4;
}

.home-vision__highlight {
  color: var(--d-accent-soft);
  font-style: normal;
  border-bottom: 2px solid rgba(111, 175, 143, .5);
}

.home-vision__support {
  font-size: 15px;
  color: var(--d-dark-body);
  max-width: 500px;
  margin: 14px auto 0;
  line-height: 1.6;
}

/* ── 12 · Pricing ──────────────────────────────────────────────────────── */
.home-pricing {
  background: #fff;
  border-top: 1px solid var(--d-line);
  padding: 88px 24px;
}

.home-pricing__rail {
  max-width: 780px;
  margin: 0 auto;
  text-align: center;
}

.home-pricing__grid {
  margin-top: 36px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  text-align: left;
}

.home-pricing__card--prescribers {
  border: 1.5px solid var(--d-green);
  border-radius: 16px;
  padding: 30px;
  background: var(--d-deep);
  color: #fff;
  position: relative;
}

.home-pricing__card--pharmacies {
  border: 1px solid var(--d-line);
  border-radius: 16px;
  padding: 30px;
  background: #fff;
}

.home-pricing__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.home-pricing__label {
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--d-accent-soft);
}

.home-pricing__label--light {
  color: var(--d-accent);
}

.home-pricing__badge {
  background: var(--d-accent);
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  border-radius: 99px;
  padding: 5px 12px;
}

.home-pricing__value {
  font-size: 28px;
  font-weight: 800;
  margin-top: 12px;
  letter-spacing: -0.015em;
  color: #fff;
}

.home-pricing__value--light {
  font-size: 24px;
  color: var(--d-ink);
}

.home-pricing__body {
  font-size: 14.5px;
  color: var(--d-dark-body);
  line-height: 1.6;
  margin: 10px 0 0;
}

.home-pricing__body--light {
  color: var(--d-body-strong);
}

/* ── 13 · Client reviews ───────────────────────────────────────────────── */
.home-reviews {
  padding: clamp(72px, 7vw, 96px) 24px;
  border-block: 1px solid color-mix(in srgb, var(--d-accent-soft) 18%, transparent);
  background: var(--d-deep);
  color: #fff;
}

.home-reviews__rail {
  max-width: 1160px;
  margin: 0 auto;
}

.home-reviews__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px;
  margin-bottom: 32px;
}

.home-reviews__intro {
  max-width: 660px;
}

.home-reviews__intro .d-eyebrow {
  color: var(--d-accent-soft);
}

.syncrx-site .home-reviews__intro h2 {
  margin: 12px 0 0;
  color: #fff;
  font-size: clamp(30px, 3.3vw, 42px);
  line-height: 1.14;
  letter-spacing: -.035em;
}

.home-reviews__intro > p:last-child:not(.d-eyebrow) {
  max-width: 560px;
  margin: 14px 0 0;
  color: var(--d-dark-body);
  font-size: 15px;
  line-height: 1.6;
}

.home-reviews__controls {
  display: none;
  flex: none;
  gap: 10px;
}

.js .home-reviews__controls {
  display: flex;
}

.home-reviews__controls button {
  display: grid;
  width: 48px;
  height: 48px;
  padding: 0;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--d-accent-soft) 34%, transparent);
  border-radius: 50%;
  background: transparent;
  color: var(--d-accent-soft);
  cursor: pointer;
  transition: color .22s ease, background-color .22s ease, border-color .22s ease;
}

.home-reviews__controls button:hover,
.home-reviews__controls button:focus-visible {
  border-color: var(--d-accent-soft);
  background: var(--d-accent-soft);
  color: var(--d-deep);
}

.home-reviews__controls button:disabled {
  opacity: .32;
  cursor: default;
}

.home-reviews__controls svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.home-reviews__track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - 32px) / 3);
  gap: 16px;
  max-width: 100%;
  padding: 4px 2px 18px;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scroll-snap-type: inline mandatory;
  scrollbar-color: color-mix(in srgb, var(--d-accent-soft) 52%, transparent) transparent;
  scrollbar-width: thin;
}

.home-review-card {
  display: flex;
  min-width: 0;
  min-height: 310px;
  padding: 28px;
  flex-direction: column;
  scroll-snap-align: start;
  border: 1px solid var(--d-frame-border);
  border-radius: var(--radius-card);
  background: var(--d-frame-bg);
  color: var(--d-ink);
  transition: border-color .22s ease, background-color .22s ease;
}

.home-review-card:hover {
  border-color: color-mix(in srgb, var(--d-accent-soft) 54%, var(--d-frame-border));
  background: color-mix(in srgb, var(--d-tile) 22%, var(--d-frame-bg));
}

.home-review-card__topline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  color: var(--d-green);
  font-size: 12px;
  font-weight: 750;
  letter-spacing: .065em;
  line-height: 1.3;
  text-transform: uppercase;
}

.home-review-card blockquote {
  margin: 42px 0 32px;
}

.home-review-card blockquote p {
  margin: 0;
  color: var(--d-ink);
  font-size: clamp(20px, 1.7vw, 24px);
  font-weight: 620;
  line-height: 1.35;
  letter-spacing: -.025em;
  overflow-wrap: anywhere;
}

.home-review-card footer {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: auto;
}

.home-review-card__avatar {
  display: grid;
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  place-items: center;
  border-radius: 50%;
  background: var(--d-tile);
  color: var(--d-green);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .05em;
}

.home-review-card__person {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.home-review-card__person strong {
  color: var(--d-ink);
  font-size: 14px;
  line-height: 1.25;
}

.home-review-card__person > span {
  color: var(--d-body);
  font-size: 13px;
  line-height: 1.35;
}

/* ── 13 · Proof ────────────────────────────────────────────────────────── */
.home-proof {
  padding: 88px 24px;
}

.home-proof__rail {
  max-width: 1160px;
  margin: 0 auto;
}

.home-proof__story {
  max-width: 720px;
}

.syncrx-site .home-proof__heading {
  font-size: clamp(26px, 3vw, 34px);
  margin: 12px 0 0;
}

.home-proof__body {
  font-size: 15.5px;
  color: var(--d-body);
  line-height: 1.65;
  margin: 16px 0 0;
  max-width: 500px;
}

.home-proof__quote {
  margin-top: 24px;
  border-left: 3px solid var(--d-green);
  padding: 4px 0 4px 20px;
}

.home-proof__quote-text {
  font-size: 16.5px;
  font-weight: 600;
  line-height: 1.55;
  margin: 0;
  color: var(--d-ink);
}

.home-proof__quote-source {
  font-size: 13.5px;
  color: var(--d-body);
  margin-top: 10px;
}

.home-evaluation {
  margin-top: 64px;
  padding-top: 40px;
  border-top: 1px solid var(--d-line);
}

.home-evaluation__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px;
  margin-bottom: 24px;
}

.home-evaluation__intro {
  max-width: 660px;
}

.syncrx-site .home-evaluation__intro h3 {
  margin: 10px 0 0;
  color: var(--d-ink);
  font-size: clamp(24px, 2.6vw, 34px);
  line-height: 1.08;
  letter-spacing: -.035em;
}

.home-evaluation__intro > p:last-child {
  margin: 12px 0 0;
  color: var(--d-body);
  font-size: 15px;
  line-height: 1.6;
}

.home-evaluation__controls {
  display: none;
  flex: none;
  gap: 10px;
}

.js .home-evaluation__controls {
  display: flex;
}

.home-evaluation__controls button {
  display: grid;
  width: 44px;
  height: 44px;
  padding: 0;
  place-items: center;
  border: 1px solid var(--d-frame-border);
  border-radius: 50%;
  background: var(--d-frame-bg);
  color: var(--d-green);
  cursor: pointer;
  transition: color .22s ease, background-color .22s ease, border-color .22s ease, transform .22s ease;
}

.home-evaluation__controls button:hover,
.home-evaluation__controls button:focus-visible {
  border-color: var(--d-green);
  background: var(--d-green);
  color: #fff;
  transform: translateY(-2px);
}

.home-evaluation__controls button:disabled {
  opacity: .35;
  cursor: default;
  transform: none;
}

.home-evaluation__controls svg {
  width: 19px;
  height: 19px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.home-evaluation__track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - 32px) / 3);
  gap: 16px;
  max-width: 100%;
  padding: 4px 2px 18px;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scroll-snap-type: inline mandatory;
  scrollbar-color: color-mix(in srgb, var(--d-green) 40%, transparent) transparent;
  scrollbar-width: thin;
}

.home-evaluation__card {
  min-width: 0;
  min-height: 190px;
  padding: 24px;
  scroll-snap-align: start;
  border: 1px solid var(--d-line);
  border-radius: var(--radius-card);
  background:
    linear-gradient(145deg, color-mix(in srgb, var(--d-tile) 44%, transparent), transparent 54%),
    var(--d-frame-bg);
  transition: border-color .22s ease, box-shadow .22s ease, transform .22s ease;
}

.home-evaluation__card:hover {
  border-color: color-mix(in srgb, var(--d-green) 36%, var(--d-line));
  box-shadow: 0 14px 30px rgba(15, 46, 34, .08);
  transform: translateY(-2px);
}

.home-evaluation__number {
  display: inline-flex;
  min-width: 36px;
  min-height: 24px;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: var(--d-tile);
  color: var(--d-green);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .08em;
}

.syncrx-site .home-evaluation__card h4 {
  margin: 30px 0 0;
  color: var(--d-ink);
  font-size: 17px;
  line-height: 1.25;
  letter-spacing: -.018em;
}

.home-evaluation__card p {
  margin: 10px 0 0;
  color: var(--d-body);
  font-size: 14px;
  line-height: 1.55;
  overflow-wrap: anywhere;
}

/* ── 14 · FAQ ──────────────────────────────────────────────────────────── */
.home-faq {
  background: #fff;
  border-top: 1px solid var(--d-line);
  padding: 88px 24px;
}

.home-faq__rail {
  max-width: 720px;
  margin: 0 auto;
}

.syncrx-site .home-faq__heading {
  text-align: center;
  margin: 0 0 52px;
}

.home-faq__list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.home-faq__item {
  border: 1px solid var(--d-line);
  border-radius: 12px;
  background: var(--d-bg);
  overflow: hidden;
}

.home-faq__question {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  cursor: pointer;
  padding: 18px 22px;
  font-family: inherit;
  font-size: 15.5px;
  font-weight: 700;
  color: var(--d-ink);
  text-align: left;
  list-style: none;
}

.home-faq__question::-webkit-details-marker {
  display: none;
}

.home-faq__mark {
  flex-shrink: 0;
  font-size: 16px;
  color: var(--d-green);
  transition: transform .25s ease;
}

.home-faq__item[open] .home-faq__mark {
  transform: rotate(45deg);
}

.home-faq__answer {
  margin: 0;
  padding: 0 22px 18px;
  font-size: 14.5px;
  color: var(--d-body);
  line-height: 1.65;
}

/* ── 15 · Final CTA ────────────────────────────────────────────────────── */
.home-cta {
  background: var(--d-deep);
  color: #fff;
  padding: 88px 24px 72px;
}

.home-cta__rail {
  max-width: 640px;
  margin: 0 auto;
  text-align: center;
}

.syncrx-site .home-cta__heading {
  font-size: clamp(30px, 3.8vw, 44px);
  letter-spacing: -0.02em;
  font-weight: 800;
  color: #fff;
  margin: 0;
}

.syncrx-site .home-cta__heading .d-highlight--dark {
  color: var(--d-accent-soft);
}

.home-cta__lede {
  font-size: 16px;
  color: var(--d-dark-body);
  line-height: 1.6;
  margin: 14px auto 0;
  max-width: 460px;
}

.home-cta__card {
  margin-top: 32px;
  background: #fff;
  border-radius: 16px;
  padding: 28px;
  text-align: left;
  color: var(--d-ink);
}

.home-cta__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.home-cta__grid input,
.home-cta__grid select {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid var(--d-input-border);
  border-radius: 9px;
  padding: 12px 14px;
  font-family: inherit;
  font-size: 14.5px;
  background: var(--d-frame-bg);
  color: var(--d-ink);
}

.home-cta__grid input::placeholder {
  color: var(--d-muted-alt);
}

.home-cta__grid input:focus-visible,
.home-cta__grid select:focus-visible {
  outline: 2px solid var(--d-green);
  outline-offset: 1px;
}

.home-cta__submit {
  width: 100%;
  margin-top: 12px;
  border: none;
  cursor: pointer;
  font-family: inherit;
  background: var(--d-green);
  color: #fff;
  border-radius: 10px;
  padding: 14px;
  font-size: 15px;
  font-weight: 700;
  transition: background .25s ease;
}

.home-cta__submit:hover,
.home-cta__submit:focus-visible {
  background: var(--d-green-hover);
}

.home-cta__submit[disabled] {
  background: var(--d-accent);
  cursor: default;
}

.home-cta__fine {
  text-align: center;
  font-size: 12px;
  color: var(--d-muted);
  margin-top: 10px;
}

.home-cta .form-status {
  margin-bottom: 14px;
}

/* ── Scroll-linked entrances (design fadeUp / slideIn / dotFill) ───────── */
/* ── Responsive (WORK-SUMMARY.md breakpoints) ──────────────────────────── */
/* Wide desktop: enlarge product-led sections inside the design system's
   1160px ceiling while narrative copy retains its readable measure. */
@media (min-width: 1600px) {
  .syncrx-site .home-hero h1,
  .syncrx-site .home-cta__heading {
    font-size: 48px;
  }

  .home-hero__media,
  .home-aud__rail,
  .home-tours__rail,
  .home-outcomes__grid,
  .home-trust__rail,
  .home-hiw__rail,
  .home-vision__band {
    max-width: 1160px;
  }

  /* 380px to match the base rule. At 320px the longest tour title wrapped onto
     a second line on wide screens only, which is why it looked fine at 1440.
     The --reverse variant MUST be restated here: without it this block applied
     the same column order to both tours, so one tour's media rendered 792px
     and the other's 320px. */
  .home-tour {
    grid-template-columns: 380px minmax(0, 1fr);
    gap: 48px;
  }

  .home-tour--reverse {
    grid-template-columns: minmax(0, 1fr) 380px;
  }

  .home-tuesday__rail {
    max-width: 1040px;
  }

  .home-pricing__rail {
    max-width: 880px;
  }
}

@media (max-width: 900px) {
  .home-tour,
  .home-tour--reverse {
    grid-template-columns: 1fr;
  }

  .home-tour--reverse .home-tour__media {
    order: 2;
  }

  .home-tour--reverse .home-tour__copy {
    order: 1;
  }

  .home-walk {
    grid-template-columns: 1fr;
  }

  .home-goodbye {
    grid-template-columns: 1fr;
    min-height: 0;
    gap: 34px;
  }

  .syncrx-site .home-goodbye__lead h2 {
    max-width: 600px;
  }

  .home-goodbye__arrow {
    position: absolute;
    right: 2%;
    bottom: -12px;
    width: 110px;
    transform: rotate(48deg);
  }
}

@media (max-width: 1024px) {
  .home-vision__vector {
    display: none;
  }
}

@media (max-width: 760px) {
  .home-compare {
    padding: 72px 20px;
  }

  .home-connected-section {
    padding-inline: 20px;
  }

  .home-connected {
    padding: 32px 20px;
  }

  .home-connected__flow {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .home-connected__node {
    min-height: 64px;
    flex-direction: column;
    gap: 8px;
    text-align: center;
  }

  .home-connected__arrow {
    display: grid;
    width: 60px;
    height: 46px;
    margin: 0 auto;
    place-items: center;
    transform: none;
  }

  .home-connected__arrow svg {
    width: 58px;
    transform: rotate(90deg);
  }

  .motion-ready .home-connected__flow:not(.is-drawn) .home-connected__arrow {
    opacity: .35;
    transform: none;
  }

  .home-hiw__grid,
  .home-pricing__grid {
    grid-template-columns: 1fr;
  }

  .home-reviews {
    padding: 72px 20px;
  }

  .home-reviews__head {
    align-items: center;
    gap: 20px;
  }

  .home-reviews__track {
    grid-auto-columns: 84%;
  }

  .home-proof {
    padding: 72px 20px;
  }

  .home-evaluation {
    margin-top: 48px;
    padding-top: 32px;
  }

  .home-evaluation__head {
    align-items: center;
    gap: 18px;
  }

  .home-evaluation__track {
    grid-auto-columns: 84%;
  }
}

@media (max-width: 720px) {
  .home-aud__lede,
  .home-tours__lede {
    white-space: normal;
  }

  .home-compare__table thead tr {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }

  .home-compare__table tbody tr {
    grid-template-columns: 1fr;
  }

  .home-compare__table th,
  .home-compare__table td {
    padding: 15px 18px;
  }

  .home-compare__cell--now {
    border-top: 1px solid var(--d-line-soft) !important;
    border-left: 0 !important;
  }
}

@media (max-width: 560px) {
  .home-connected__heading {
    gap: 10px;
  }

  .home-connected__heading > span {
    flex: 0 0 4px;
    width: 4px;
    height: 4px;
  }

  .home-cta__grid {
    grid-template-columns: 1fr;
  }

  .home-evaluation__head {
    align-items: flex-start;
    flex-direction: column;
  }

  .home-evaluation__controls {
    align-self: flex-end;
  }

  .home-evaluation__track {
    grid-auto-columns: 91%;
  }

  .home-evaluation__card {
    min-height: 180px;
    padding: 22px;
  }

  .home-reviews__head {
    align-items: flex-start;
    flex-direction: column;
  }

  .home-reviews__controls {
    align-self: flex-end;
  }

  .home-reviews__track {
    grid-auto-columns: 91%;
  }

  .home-review-card {
    min-height: 292px;
    padding: 24px;
  }

  .home-review-card blockquote {
    margin-block: 34px 28px;
  }

  .home-goodbye {
    gap: 28px;
    padding: 32px 24px 52px;
  }

  .syncrx-site .home-goodbye__lead h2 {
    font-size: clamp(36px, 12vw, 46px);
  }

  .home-goodbye__phrase {
    font-size: clamp(22px, 7.4vw, 30px);
  }

  .js .home-goodbye__phrases {
    max-height: 284px;
    padding-block: 106px;
  }

  .js .home-goodbye__phrase {
    min-height: 70px;
  }

  .home-goodbye__arrow {
    display: none;
  }

  .home-compare__lede {
    margin-top: 32px;
  }
}

@media (max-width: 420px) {
  .home-aud__switch {
    display: flex;
    width: 100%;
  }

  .home-aud__tab {
    flex: 1 1 0;
    min-width: 0;
    padding: 10px 8px;
    font-size: 13px;
  }
}

/* ── Motion safety ─────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .home-ticker__marquee {
    display: block;
    width: auto;
    animation: none;
  }

  .home-ticker__track {
    justify-content: center;
    flex-wrap: wrap;
    width: min(100%, 1160px);
    margin: 0 auto;
    padding: 0 24px;
  }

  .home-ticker__track[aria-hidden="true"] {
    display: none;
  }

  .home-aud__tab,
  .home-tour-step,
  .home-tour-step__num,
  .home-tuesday__card,
  .home-goodbye__lead,
  .home-goodbye__phrase,
  .home-goodbye__arrow path,
  .home-reviews__controls button,
  .home-review-card,
  .home-evaluation__controls button,
  .home-evaluation__card,
  .home-faq__mark,
  .home-cta__submit {
    transition: none;
  }

  .home-tour-step:hover,
  .home-tuesday__card:hover,
  .home-review-card:hover,
  .home-evaluation__controls button:hover,
  .home-evaluation__card:hover {
    transform: none;
  }

  .motion-ready .home-goodbye:not(.is-revealed) .home-goodbye__lead,
  .motion-ready .home-goodbye:not(.is-revealed) .home-goodbye__phrase {
    transform: none;
  }

  .motion-ready .home-goodbye:not(.is-revealed) .home-goodbye__arrow path {
    stroke-dashoffset: 0;
  }

  .js .home-goodbye__roller::before,
  .js .home-goodbye__roller::after {
    display: none;
  }

  .js .home-goodbye__phrases {
    max-height: none;
    padding-block: 0;
    overflow: visible;
    scroll-snap-type: none;
  }

  .home-goodbye__phrase--active {
    transform: none;
  }

  .home-evaluation__track {
    scroll-behavior: auto;
  }

  .home-reviews__track {
    scroll-behavior: auto;
  }

  .home-compare__table tr,
  .home-compare__table .d-check,
  .home-connected__arrow,
  .home-connected__arrow svg {
    transition: none;
  }

  .motion-ready .home-compare__table tr[data-reveal]:not(.is-revealed),
  .home-compare__table .d-check {
    transform: none;
  }

  .motion-ready .home-connected__flow:not(.is-drawn) .home-connected__arrow {
    opacity: 1;
    transform: none;
  }
}

@media (max-width: 760px) and (prefers-reduced-motion: reduce) {
  .motion-ready .home-connected__flow:not(.is-drawn) .home-connected__arrow,
  .home-connected__arrow {
    transform: none;
  }
}


/* Owner 2026-07-26: the prescriber/pharmacy tour headline holds one line on
   desktop; it still wraps normally on narrow screens. */
@media (min-width: 1000px) {
  .home-tour__head h3,
  .home-tour h3 {
    white-space: nowrap;
  }
}

/* ── Phrase wheel: real vertical travel (owner: "scrolling effect") ──────
   The track translates so the active phrase rides a fixed focus line. The
   translation is CLAMPED at both ends, so the list rests against the window
   edges instead of pulling away from them - that is what keeps the motion
   without reintroducing the dead space the old scroll window caused. */
.js .home-goodbye__roller {
  position: relative;
  overflow: hidden;
  /* five rows of travel room */
  height: calc(var(--srx-phrase-h, 42px) * 5);
}

.js .home-goodbye__phrases {
  transform: translate3d(0, var(--srx-wheel-y, 0px), 0);
  transition: transform .52s cubic-bezier(.22, 1, .36, 1);
  will-change: transform;
}

@media (prefers-reduced-motion: reduce) {
  .js .home-goodbye__roller {
    height: auto;
    overflow: visible;
  }

  .js .home-goodbye__phrases {
    transform: none;
    transition: none;
  }
}

/* ════════════════════════════════════════════════════════════════════════
   GREEN SURFACES (owner request 2026-07-26)
   ───────────────────────────────────────────────────────────────────────
   Two deep-green anchors placed well apart in the page rhythm, so the run
   of warm-neutral sections is broken without creating a white/green/white
   stripe pattern. Trust is the natural first anchor (compliance reads as a
   solid, weighty moment) and the connected-workflow band is the second.
   Every text token is swapped to its on-dark counterpart from base.css so
   contrast stays at AA or better; nothing relies on the light-mode colour.
   ═══════════════════════════════════════════════════════════════════════ */

.home-trust {
  background: var(--d-deep);
  color: var(--d-dark-body);
}

/* Green band behind the light workflow card; text inside the card is
   untouched and keeps its dark, readable colours. */
.home-connected-section {
  background: var(--d-deep);
}

/* These two sections used to be different colours, so each carrying its own
   full vertical padding read as a normal section break. Now that both are the
   same deep green they merge into one continuous band, and the stacked
   96px + 88px became ~184px of empty green that looks like a layout fault.
   Collapse it to a single deliberate gap. */
.home-connected-section + .home-trust {
  padding-top: 20px;
}

/* IMPORTANT: only .home-trust gets on-dark text. The connected-workflow
   section keeps its LIGHT inner card (.home-connected), so its text must stay
   dark - forcing it white made the heading invisible on cream. The green here
   is the band BEHIND that card, nothing more. */
.home-trust h2,
.home-trust .home-trust__title {
  color: #fff;
}

.home-trust h2 em,
.home-trust .d-highlight {
  color: var(--d-accent-soft);
}

.home-trust .d-lede,
.home-trust p {
  color: var(--d-dark-body);
}

.home-trust .d-lede b,
.home-trust .d-lede strong {
  color: #fff;
}

.home-trust .d-eyebrow {
  color: var(--d-accent-soft);
}

/* Cards lift off the deep surface with a translucent white wash rather than
   a hard white block, so the band still reads as one continuous surface. */
.home-trust .d-card {
  border-color: rgba(255, 255, 255, .14);
  background: rgba(255, 255, 255, .045);
}

.home-trust .d-card:hover {
  border-color: rgba(255, 255, 255, .22);
  background: rgba(255, 255, 255, .07);
}

/* Icon tiles invert: soft green glass instead of the light mint tile. */
.home-trust .d-tile {
  background: rgba(111, 175, 143, .16);
  color: var(--d-accent-soft);
}

/* Pricing CTAs. The cards previously ended at body copy with no way forward,
   so the section stated a price model and then dead-ended. Both routes land on
   the demo form, which is where rates are actually quoted.
   The prescriber card sits on deep green, the pharmacy card on white, so the
   two buttons invert relative to each other. 44px min-height meets the touch
   target minimum. */
body.syncrx-site .home-pricing__cta {
  /* Shape, height and type come from the unified button block in base.css so
     this CTA cannot drift away from the rest of the site's buttons again. */
  margin-top: 22px;
  padding: 0 24px;
  border-radius: 999px;
  background: var(--d-green);
  color: #fff;
  text-decoration: none;
  transition: background .2s ease, transform .2s ease;
}

body.syncrx-site .home-pricing__cta:hover,
body.syncrx-site .home-pricing__cta:focus-visible {
  /* A near-shade of the rest colour plus a small lift, rather than the old jump
     straight to --d-deep. Verified 10.09:1 against white text. */
  background: var(--d-green-press);
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(23, 74, 60, .28);
}

/* Light variant for the deep-green prescriber card. */
body.syncrx-site .home-pricing__cta--light {
  background: var(--c-sage);
  color: var(--d-deep);
}

body.syncrx-site .home-pricing__cta--light:hover,
body.syncrx-site .home-pricing__cta--light:focus-visible {
  /* Lifts one step brighter, not all the way to #fff, which read as a flash
     against the deep-green card. Verified 10.50:1. */
  background: var(--d-sage-lift);
  color: var(--d-deep);
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, .28);
}

/* Audience-toggle panels now hold 1600x900 annotated graphics. Without this the
   stage keeps the default 1917/865 and letterboxes them, the same defect that
   affected How-it-works. Match the source ratio instead of padding it. */
.home-aud__media .product-media__stage {
  aspect-ratio: 16 / 9;
}

/* Tour stages hold the 1600x900 annotated graphics; match the ratio so they are
   not letterboxed inside the default 1917/865 stage. */
.home-tour__media .product-media__stage {
  aspect-ratio: 16 / 9;
}


/* Motion for the buttons above. transform/opacity only, so nothing reflows.
   Anyone with prefers-reduced-motion keeps the colour change and loses the
   movement. */
body.syncrx-site .home-pricing__cta {
  transition: background .18s ease, color .18s ease, transform .18s ease, box-shadow .18s ease;
}

@media (prefers-reduced-motion: reduce) {
  body.syncrx-site .home-pricing__cta {
    transition: background .18s ease, color .18s ease;
  }
  body.syncrx-site .home-pricing__cta:hover,
  body.syncrx-site .home-pricing__cta:focus-visible {
    transform: none;
  }
}

/* Timeline: the rail draws itself as the section scrolls in and each dot pops
   on arrival, staggered. Falls back to a fully drawn, static rail wherever
   scroll-driven animation or motion is unavailable. */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .home-tuesday__timeline {
      border-left-color: transparent;
    }

    .home-tuesday__timeline::before {
      content: "";
      position: absolute;
      left: -2px;
      top: 0;
      width: 2px;
      height: 100%;
      background: var(--d-frame-border);
      transform-origin: top;
      animation: srx-rail-draw linear both;
      animation-timeline: view();
      animation-range: entry 15% cover 45%;
    }

    .home-tuesday__dot {
      animation: srx-dot-pop .01s linear both;
      animation-timeline: view();
      animation-range: entry 20% cover 40%;
    }
  }
}

@keyframes srx-rail-draw {
  from { transform: scaleY(0); }
  to   { transform: scaleY(1); }
}

@keyframes srx-dot-pop {
  from { transform: scale(.3); opacity: 0; }
  60%  { transform: scale(1.15); opacity: 1; }
  to   { transform: scale(1); opacity: 1; }
}

/* The phrase wheel renders each phrase as a <button>, so each is an interactive
   target and was measuring 21-29px tall. They sit in a tight vertical list where
   growing the box would break the wheel's rhythm, so the HIT AREA is extended
   instead: the visual row is unchanged, the tappable area reaches 44px. */
.home-goodbye__phrase {
  position: relative;
}

.home-goodbye__phrase::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  height: 44px;
}