/* Home page — section layouts */

/* ---------- Section 1 · Hero ---------- */
.hero {
  position: relative;
  overflow: hidden;
  padding-top: var(--hero-padding-top);
  padding-bottom: var(--section-padding);
  background: var(--gradient-hero-ci);
  text-align: center;
}
.hero__inner {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}
/* Badge above the headline (Marqo): doctor avatars + one line of text */
.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-12);
  margin-bottom: var(--space-24);
  padding: var(--space-4) var(--space-16) var(--space-4) var(--space-4);
  border-radius: var(--radius-pill);
  background: var(--glass-bg); /* same glass as the nav pill (.site-nav__list) */
  box-shadow: inset 0 0 0 1px var(--glass-border);
  -webkit-backdrop-filter: blur(var(--blur-glass));
  backdrop-filter: blur(var(--blur-glass));
  color: var(--color-teal-950);
  text-decoration: none;
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .hero-badge {
    background: var(--glass-bg-solid);
  }
}
.hero-badge__avatars {
  display: flex;
}
.hero-badge__avatar {
  display: block;
  width: var(--icon-32);
  height: var(--icon-32);
  border-radius: var(--radius-pill);
  object-fit: cover;
  background: var(--color-teal-100); /* shows while the photo loads */
  box-shadow: 0 0 0 2px var(--color-white); /* white ring separates the overlapping photos */
}
.hero-badge__avatar + .hero-badge__avatar {
  margin-left: calc(var(--space-12) * -1);
}
.hero-badge__text {
  font-size: var(--fs-14);
  line-height: var(--lh-14);
  color: var(--color-teal-950);
}
.hero__title {
  max-width: var(--measure-wide);
  font-size: var(--fs-display);
  line-height: var(--lh-display);
  color: var(--color-white);
  text-shadow: var(--text-shadow-hero);
}
.hero__word {
  display: inline-block;
}
.hero__lead {
  max-width: var(--measure);
  margin-top: var(--space-24);
  font-size: var(--fs-lead);
  line-height: var(--lh-lead);
  color: var(--color-white);
  text-shadow: var(--text-shadow-hero);
}
/* Lead breaks before "และยกระดับ…" from tablet up; on mobile it wraps naturally */
.hero__break {
  display: none;
}
@media (min-width: 768px) {
  .hero__lead {
    max-width: var(--measure-wide);
  }
  .hero__break {
    display: inline;
  }
}
.hero__actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
  width: 100%;
  margin-top: var(--space-40);
}
.hero__actions .btn {
  justify-content: space-between;
}
/* Mobile: the two buttons side by side, each as wide as its label; the primary uses the short label
   (the long one doesn't fit half a phone screen). display:none keeps screen readers to one label. */
.hero__cta-long { display: none; }
@media (max-width: 767.98px) {
  .hero__actions {
    flex-direction: row;
    justify-content: center;
    gap: var(--space-8);
  }
  .hero__actions .btn {
    flex: 0 0 auto; /* each button as wide as its label */
    height: 48px;
    gap: var(--space-8);
    padding-inline: var(--space-16);
    justify-content: center;
    font-size: var(--fs-14);
    white-space: nowrap;
  }
  .hero__actions .btn--primary {
    padding-right: 6px;
    justify-content: space-between;
  }
  .hero__actions .btn__icon {
    width: var(--btn-icon-sm);
    height: var(--btn-icon-sm);
  }
}
@media (min-width: 768px) {
  .hero__cta-long { display: inline; }
  .hero__cta-short { display: none; }
}
@media (min-width: 768px) {
  .hero__actions {
    flex-direction: row;
    justify-content: center;
    width: auto;
    gap: var(--space-16);
  }
}

/* Phones — Marqo hero: 3 devices in a row, middle raised, bottoms fade into the page */
.hero {
  padding-bottom: 0;
}
.hero::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  z-index: 1;
  height: var(--hero-fade-height);
  background: var(--gradient-fade-white);
  pointer-events: none;
}
.hero__devices {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: var(--device-gap);
  width: 100%;
  height: var(--devices-visible);
  margin-top: var(--space-48);
  /* clip only the bottom; sides may run off-screen like the reference */
  clip-path: inset(-48px -50vw 0 -50vw);
}
/* Mobile: the whole hero fits one screen (100svh = visible height, address bar included).
   Text keeps its size; the phone mock-ups take what's left and fade out at the bottom. */
@media (max-width: 767.98px) {
  .hero {
    display: flex;
    flex-direction: column;
    height: 100svh;
    min-height: 560px;
    padding-top: 112px; /* clear gap under the fixed header */
  }
  .hero__inner {
    flex: 1 1 auto;
    min-height: 0;
  }
  .hero__title { margin-top: var(--space-16); }
  .hero__lead { margin-top: var(--space-12); }
  .hero__actions { margin-top: var(--space-24); }
  .hero__devices {
    flex: 1 1 0;
    height: auto;
    min-height: 0;
    margin-top: var(--space-48); /* clear space under the buttons (client: phones lower) */
  }
}
.device {
  display: block;
  flex-shrink: 0;
  filter: var(--filter-device-shadow);
}
.device img {
  display: block;
  width: 100%;
  height: auto;
}
.device--center {
  width: var(--device-w-center);
}
.device--side {
  width: var(--device-w-side);
  margin-top: var(--device-offset);
}
@media (min-width: 768px) {
  .hero__devices {
    margin-top: var(--space-64);
  }
}

/* Floating info cards (wide desktop only: below 1360 px the 208 px cards hit the H1 and phones) */
.hero__floats {
  display: none;
}
@media (min-width: 1360px) {
  .hero__floats {
    display: block;
    position: absolute;
    inset: 0;
    pointer-events: none;
  }
}
/* Glass "widget" cards (Marqo dashboard style): dark-teal translucent glass,
   white value + label, mini graphic in CI Mint. Decorative only (aria-hidden list). */
.float-card {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: var(--card-w, var(--float-card-width));
  padding: var(--space-20);
  border-radius: var(--radius-24);
  background: var(--float-card-bg);
  box-shadow: inset 0 0 0 1px var(--float-card-border), var(--shadow-md);
  -webkit-backdrop-filter: blur(var(--float-card-blur));
  backdrop-filter: blur(var(--float-card-blur));
  color: var(--color-white);
  text-align: left;
}
.float-card { rotate: var(--float-rot); }
.float-card--tl { --card-w: 200px; top: 140px; left: 12px; --float-rot: -6deg; }
.float-card--tr { --card-w: 196px; top: 140px; right: 28px; --float-rot: 5deg; }
.float-card--bl { --card-w: 288px; top: 352px; left: 20px; --float-rot: 3deg; }
.float-card--br { --card-w: 288px; top: 352px; right: 20px; --float-rot: -3deg; }
.float-card__value {
  font-family: var(--font-primary);
  font-size: var(--fs-18);
  line-height: var(--lh-18);
  font-weight: var(--fw-ui);
}
.float-card__label {
  margin-top: 2px;
  font-size: var(--fs-14);
  line-height: 20px;
  color: var(--color-on-dark-muted);
}
/* Mini graphics */
.float-card__chart {
  display: block;
  width: 100%;
  height: 56px;
  margin-top: var(--space-16);
  overflow: visible;
}
.float-card__area { fill: url(#float-area); }
.float-card__line {
  fill: none;
  stroke: var(--color-ci-mint);
  stroke-width: 2.5;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}
.float-card__bars {
  height: 48px;
  fill: var(--color-ci-mint);
  fill-opacity: 0.85;
}
/* Wide cards (288 px): shared icon header, then each card's own content.
   Delivery: 3-step tracker + two stat boxes · Claim: "you pay 0" receipt + insurer logos */
.float-card--wide {
  gap: 10px;
  padding: var(--space-16);
}
/* Delivery tracker: ordered → shipping → home, filled to the truck (step 2) */
.delivery-card__track {
  position: relative;
  display: flex;
  justify-content: space-between;
  padding-top: 22px;
  margin-inline: 2px;
}
.delivery-card__track::before,
.delivery-card__track::after {
  content: "";
  position: absolute;
  top: 9px;
  left: 6px;
  height: 4px;
  border-radius: var(--radius-pill);
}
.delivery-card__track::before {
  right: 6px;
  background: var(--glass-dark-bg-hover);
}
.delivery-card__track::after {
  width: 50%;
  background: linear-gradient(90deg, var(--color-ci-mint) 0%, var(--color-coral-300) 100%);
}
.delivery-card__step {
  position: relative;
  font-size: var(--fs-12);
  line-height: var(--lh-12);
  color: var(--color-on-dark-muted);
}
.delivery-card__step::before {
  content: "";
  position: absolute;
  z-index: 1;
  top: -18px;
  left: 0;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--color-ci-mint);
  box-shadow: 0 0 0 3px var(--color-ring-dark);
}
.delivery-card__step:nth-child(2) { text-align: center; }
.delivery-card__step:nth-child(2)::before { left: 50%; translate: -50% 0; }
.delivery-card__step:last-child { text-align: right; }
.delivery-card__step:last-child::before { left: auto; right: 0; background: var(--color-on-dark-track); }
/* Current step: coral truck marker */
.delivery-card__step--now {
  color: var(--color-white);
}
.delivery-card__truck {
  position: absolute;
  z-index: 2;
  top: -27px;
  left: 50%;
  translate: -50% 0;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--color-coral-300);
  color: var(--color-teal-950);
  box-shadow: 0 0 0 3px var(--color-ring-dark);
}
.delivery-card__step--now::before { display: none; }
.delivery-card__stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-8);
}
.delivery-card__stat {
  display: flex;
  flex-direction: column;
  padding: 6px 10px;
  border-radius: var(--radius-12);
  background: var(--glass-dark-bg-soft);
  box-shadow: inset 0 0 0 1px var(--glass-dark-ring-soft);
}
.delivery-card__num {
  font-family: var(--font-primary);
  font-size: var(--fs-16);
  line-height: 22px;
  color: var(--color-ci-mint);
}
.delivery-card__num--b {
  color: var(--color-coral-300);
}
.delivery-card__note {
  font-size: var(--fs-12);
  line-height: var(--lh-12);
  color: var(--color-on-dark-muted);
  white-space: nowrap;
}
.float-card__head {
  display: flex;
  align-items: center;
  gap: var(--space-12);
}
.float-card__icon {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-pill);
  background: var(--color-ci-mint-tint);
  color: var(--color-ci-mint);
  flex-shrink: 0;
}
.float-card__titles {
  display: flex;
  flex-direction: column;
}
.float-card__sub {
  font-size: var(--fs-12);
  line-height: var(--lh-12);
  color: var(--color-on-dark-muted);
}
.claim-card__pay {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-8);
  padding: var(--space-8) var(--space-8) var(--space-8) var(--space-12);
  border-radius: var(--radius-12);
  background: var(--glass-dark-bg-soft);
  box-shadow: inset 0 0 0 1px var(--glass-dark-ring-soft);
}
.claim-card__pay-text {
  display: flex;
  align-items: baseline;
  gap: 6px;
}
.claim-card__pay-label {
  font-size: var(--fs-12);
  line-height: var(--lh-12);
  color: var(--color-on-dark-muted);
}
.claim-card__amount {
  font-family: var(--font-primary);
  font-size: var(--fs-20);
  line-height: 28px;
  font-weight: var(--fw-ui);
  color: var(--color-ci-mint);
}
.claim-card__badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px var(--space-8) 4px 6px;
  border-radius: var(--radius-pill);
  background: var(--color-ci-mint);
  color: var(--color-teal-950);
  font-size: var(--fs-12);
  line-height: var(--lh-12);
  font-weight: var(--fw-ui);
  white-space: nowrap;
}
.claim-card__partners {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-8);
}
.claim-card__logos {
  display: flex;
}
.claim-card__logos img {
  width: 40px;
  height: 24px;
  padding: 2px 4px;
  object-fit: contain;
  border-radius: var(--radius-8);
  background: var(--color-white);
  box-shadow: 0 0 0 2px var(--color-ring-dark);
}
.claim-card__logos img + img {
  margin-left: -6px;
}
.claim-card__partners-label {
  font-size: var(--fs-12);
  line-height: var(--lh-12);
  color: var(--color-on-dark-muted);
  white-space: nowrap;
}


/* ---------- Section 2 · Promotions ---------- */
.section-more {
  margin-top: var(--space-8);
}
.section-more--center {
  align-self: center;
  margin-top: var(--space-32);
}

/* ---------- Section 3 · Trust marquee ---------- */
/* Now right below the hero: top gap = standard section spacing (56 / 72 / 96) so the
   heading doesn't sit on the hero's faded phones */
.trust {
  padding-block: var(--section-padding) var(--space-48);
}
.trust__title {
  max-width: var(--measure);
  margin: 0 auto var(--space-32);
  font-size: var(--fs-h5);
  line-height: var(--lh-h5);
  text-align: center;
}
.trust .marquee--logos {
  --marquee-duration: 70s; /* longer loop: 22 logos per group */
}

/* ---------- Section 4 · Specialist consultation (after Wellbase "Live doctor consultation") ----------
   Full container width like the other sections (1296 at 1440+): copy | card in the Wellbase ratio 498 : 562,
   card max 640 (562 : 440 shape, right-aligned), gap 64, padding 96. 390: stacked, card 350 × 440. */
.consult {
  padding-block: var(--space-96);
  background: var(--color-white);
}
.consult__inner {
  display: grid;
  gap: var(--space-40);
}
@media (min-width: 1024px) {
  .consult__inner {
    grid-template-columns: minmax(0, 498fr) minmax(0, 562fr); /* Wellbase ratio, scales with the container */
    column-gap: var(--space-64);
    align-items: stretch;
  }
}
.consult__copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
/* Size / weight come from the shared H2 standard (base.css + --fs-h2) */
.consult__title {
  display: flex;
  flex-direction: column;
  margin-top: var(--space-16);
}
.consult__title-main { color: var(--color-teal-950); }
.consult__title-sub { color: var(--color-text-muted); }
/* "20 สาขา": CI teal gradient, kept dark enough for large text (≥ 3 : 1 on white) */
/* Key phrase in section titles: green gradient (consult "20 สาขา" only).
   "เสียงจากผู้ใช้งานจริง" and "มีคำถาม? เรามีคำตอบ" are one colour (Teal 950) — client request 5 Nov 2026 */
.consult__accent {
  background: var(--gradient-consult-accent);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.consult__text {
  max-width: 460px;
  margin-top: var(--space-16);
  font-size: var(--fs-16);
  line-height: 26px;
  color: var(--color-text-muted);
  text-wrap: pretty;
}

/* Feature grid: 2 × 2, hairline above, CI icon tiles */
.consult__features {
  display: grid;
  gap: var(--space-20) var(--space-24);
  width: 100%;
  margin-top: var(--space-32);
  padding-top: var(--space-32);
  border-top: 1px solid var(--color-gray-200);
}
@media (min-width: 600px) {
  .consult__features {
    grid-template-columns: 1fr 1fr;
  }
}
.consult__feature {
  display: flex;
  align-items: center;
  gap: var(--space-12);
}
.consult__feature-icon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-pill);
  flex-shrink: 0;
  background: var(--gradient-icon-tile);
  box-shadow: inset 0 0 0 1px var(--color-teal-100);
  color: var(--color-icon-ci);
}
.consult__feature-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.consult__feature-title {
  font-family: var(--font-primary);
  font-size: var(--fs-16);
  line-height: 22px;
  font-weight: var(--fw-ui);
  color: var(--color-teal-950);
}
.consult__feature-hint {
  font-size: var(--fs-14);
  line-height: 20px;
  color: var(--color-text-muted);
}

/* CTA row: dark-teal pill + doctor avatars */
.consult__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-20) var(--space-24);
  margin-top: var(--space-40);
}
/* CTA uses the site's CI Green button (.btn--green); arrow in a translucent white circle like the primary */
.consult__cta .btn__icon {
  background: var(--primary-icon-bg);
  color: var(--color-white);
}
/* Video-call card */
.call {
  position: relative;
  width: 100%;
  max-width: var(--consult-card-w);
}
@media (min-width: 1024px) {
  .call {
    align-self: center; /* balanced against the copy column */
    justify-self: end;
  }
}
.call__screen {
  position: relative;
  aspect-ratio: var(--consult-card-ratio-mobile);
  border-radius: var(--radius-24);
  overflow: hidden;
  background: var(--color-teal-50);
}
@media (min-width: 600px) {
  .call__screen {
    aspect-ratio: var(--consult-card-ratio);
  }
}
.call__video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 20%;
}
.call__timer {
  position: absolute;
  top: var(--space-24);
  left: var(--space-24);
  display: inline-flex;
  align-items: center;
  gap: var(--space-8);
  height: 28px;
  padding-inline: 10px 12px;
  border-radius: var(--radius-pill);
  background: var(--color-white);
  box-shadow: var(--shadow-chip);
  font-size: var(--fs-14);
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--color-teal-950);
}
.call__live {
  position: relative;
  width: 8px;
  height: 8px;
  border-radius: var(--radius-pill);
  background: var(--color-call-live);
}
/* soft "live" pulse (off for reduced motion, see motion.css) */
.call__live::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--color-call-live);
  animation: call-live 1.6s var(--ease-out-gentle) infinite;
}
@keyframes call-live {
  from { transform: scale(1); opacity: 0.6; }
  to { transform: scale(2.6); opacity: 0; }
}
/* Self view (picture-in-picture): the patient's camera, 91 × 60, white 2 px ring */
.call__self {
  position: absolute;
  top: var(--space-24);
  right: var(--space-24);
  width: 91px;
  height: 60px;
  border-radius: 10px;
  overflow: hidden;
  background: var(--color-teal-100); /* shows while the photo loads */
  box-shadow: 0 0 0 2px var(--color-white), var(--shadow-avatar);
}
.call__self-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Controls: 4 glass buttons (centres ±93 / ±153 px) + red end-call button in a white notch */
.call__controls {
  position: absolute;
  left: 50%;
  bottom: 1px; /* row is centred on the 72 px end button → glass buttons' centres sit 37 px above the card edge */
  translate: -50% 0;
  display: flex;
  align-items: center;
  gap: var(--space-8);
}
@media (min-width: 600px) {
  .call__controls {
    gap: var(--space-12);
  }
}
.call__btn {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: var(--radius-pill);
  background: var(--call-btn-bg);
  box-shadow: inset 0 0 0 1px var(--glass-dark-ring);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
  backdrop-filter: blur(12px) saturate(140%);
  color: var(--color-white);
}
/* the end-call button keeps a 114 px slot between the pairs (100 px on phones) */
.call__end {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 72px;
  height: 72px;
  margin-inline: 14px;
  translate: 0 22px; /* centre 15 px above the card's bottom edge, 21 px hanging below */
  border-radius: var(--radius-pill);
  background: var(--color-call-end);
  box-shadow: 0 0 0 8px var(--color-white); /* the notch: an even 8 px white ring around the button */
  color: var(--color-white);
}
@media (min-width: 600px) {
  .call__end {
    margin-inline: 21px;
  }
}
.call__end svg {
  rotate: 135deg;
}
/* Notch corners: two concave white curves where the ring meets the card's bottom edge */
.call__end::after {
  content: "";
  position: absolute;
  z-index: -1;
  left: 50%;
  bottom: 21px; /* sits on the card's bottom edge */
  translate: -50% 0;
  width: 116px;
  height: 16px;
  background:
    radial-gradient(circle at 0 0, transparent 15.5px, var(--color-white) 16px) left bottom / 16px 16px no-repeat,
    radial-gradient(circle at 100% 0, transparent 15.5px, var(--color-white) 16px) right bottom / 16px 16px no-repeat;
}
.call__controls {
  z-index: 2;
}
.call__controls {
  z-index: 2;
}

/* ---------- Section 5 · User journey (scroll story) ----------
   Static layout (mobile, tablet, reduced motion, no JS): phone on top, then heading, steps, download.
   ≥1024 + motion: motion.js adds .is-pinned → the section gets tall, the stage sticks to the viewport,
   the phone starts big in the middle and shrinks into the left column, then the right column comes in. */
.journey {
  display: grid;
  gap: var(--space-40);
  align-items: center;
}
.journey__media {
  position: relative;
  display: grid;
  place-items: center;
}
/* Soft CI Mint glow behind the phones */
.journey__media::before {
  content: "";
  position: absolute;
  inset: 8% 6%;
  border-radius: 50%;
  background: var(--glow-journey);
  filter: blur(24px);
  pointer-events: none;
}
/* Below desktop (no moving blobs): a fuller CI gradient behind the phones — teal top-right,
   mint centre-left, a warm coral touch at the bottom — so the white space doesn't feel empty */
@media (max-width: 1023.98px) {
  .journey__media::before {
    inset: -8% -5%; /* sides stay inside the screen (wider made the page scroll sideways) */
    border-radius: 0;
    background:
      var(--journey-blob-teal) 85% 20% / 70% 70% no-repeat,
      var(--journey-blob-mint) 20% 55% / 80% 80% no-repeat,
      var(--journey-blob-coral) 60% 95% / 55% 50% no-repeat;
    filter: blur(12px);
  }
}
.journey__phone {
  position: relative;
  display: block;
  width: 100%;
  height: auto;
  transform-origin: 50% 50%;
  /* no will-change: a forced GPU layer showed a tile seam (vertical line) across the screens */
}
.journey__content {
  display: flex;
  flex-direction: column;
  gap: var(--space-24);
}
.journey__head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-12);
}
.journey__head h2 {
  text-wrap: balance;
}
/* Steps: numbered rows joined by a line through the number circles.
   The line is drawn per step (number → next number) so it fades in with its step;
   one line on the list showed over the big phone before the steps appeared. */
.journey-steps {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
}
.journey-step:not(:last-child)::before {
  content: "";
  position: absolute;
  top: 40px;
  bottom: calc(var(--space-16) * -1);
  left: 19px;
  width: 2px;
  background: var(--color-teal-100);
}
.journey-step {
  position: relative;
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  gap: var(--space-16);
  align-items: start;
}
.journey-step__num {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-pill);
  background: var(--gradient-b2b);
  box-shadow: 0 0 0 4px var(--color-white);
  color: var(--color-white);
  font-family: var(--font-primary);
  font-size: var(--fs-18);
  line-height: 1;
  font-weight: var(--fw-ui);
}
.journey-step__title {
  font-size: var(--fs-h5);
  line-height: var(--lh-h5);
}
.journey-step__text {
  margin-top: 2px;
  font-size: var(--fs-16);
  line-height: var(--lh-16);
  color: var(--color-text);
}
/* Download block: real QR + store badges */
.journey__download {
  display: flex;
  align-items: center;
  gap: var(--space-16);
  padding: var(--space-16);
  border-radius: var(--radius-16);
  background: var(--color-coral-50); /* light pink */
}
.journey__qr {
  width: 88px;
  height: 88px;
  flex-shrink: 0;
  padding: 6px;
  border-radius: var(--radius-12);
  background: var(--color-white);
}
.journey__download-text {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}
.journey__download-title {
  font-family: var(--font-primary);
  font-size: var(--fs-16);
  line-height: var(--lh-16);
  font-weight: var(--fw-ui);
  color: var(--color-teal-950);
}
@media (max-width: 479px) {
  .journey__qr { display: none; } /* on the phone itself a QR is no use; the badges stay */
  /* No QR: centre the title and the badges in the box */
  .journey__download { justify-content: center; text-align: center; }
  .journey__download-text { align-items: center; width: 100%; }
  .journey__download .store-list { justify-content: center; }
}
@media (min-width: 1024px) {
  .journey {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--space-64);
  }
}

/* Info chips + moving background: only in the pinned scroll story (hidden on mobile / reduced motion / no JS) */
.journey-chips,
.journey-bg {
  display: none;
}

/* Pinned scroll story (class set by motion.js only when it can run) */
@media (min-width: 1024px) {
  .journey-pin.is-pinned {
    height: var(--journey-pin-height);
    padding-block: 0;
  }
  .journey-pin.is-pinned .journey-pin__stage {
    position: sticky;
    top: 0;
    display: flex;
    align-items: center;
    height: 100vh;
    height: 100svh;
    padding-top: var(--header-offset, 80px); /* clear the fixed header */
  }
  .journey-pin.is-pinned .journey {
    width: 100%;
  }
  /* Items start hidden; --in (0 → 1) is set per item from the scroll position */
  .journey-pin.is-pinned [data-journey-item] {
    opacity: var(--in, 0);
    transform: translateY(calc((1 - var(--in, 0)) * 28px));
  }
  .journey-pin.is-pinned .journey__media::before {
    opacity: var(--glow-in, 1);
  }
  /* The phone is drawn at its big start size and only ever scaled DOWN (scale ≤ 1):
     scaling a smaller image up blurred it and showed a seam line across the screens. */
  .journey-pin.is-pinned .journey__media {
    aspect-ratio: 2400 / 1706;
  }
  /* Idle float: the big phone drifts gently (individual translate/rotate props, so it stacks
     with the scroll transform set by motion.js) */
  .journey-pin.is-pinned .journey__phone {
    animation: journey-float 6s var(--ease-standard) infinite;
  }
  .journey-pin.is-pinned .journey__phone {
    position: absolute;
    top: 50%;
    left: 50%;
    width: var(--journey-phone-w, 100%);
    max-width: none;
    margin: calc(var(--journey-phone-w, 100%) / -2 * 1706 / 2400) 0 0 calc(var(--journey-phone-w, 100%) / -2);
  }
}

@keyframes journey-float {
  0%, 100% { translate: 0 0; rotate: 0deg; }
  50% { translate: 0 -12px; rotate: -0.6deg; }
}
/* Background blobs drift on long, offset loops so the colours keep shifting slowly */
@keyframes journey-blob-a {
  0%   { transform: translate(-50%, -50%) translate(0, 0) scale(1); }
  50%  { transform: translate(-50%, -50%) translate(6vw, -4vh) scale(1.12); }
  100% { transform: translate(-50%, -50%) translate(-3vw, 5vh) scale(0.94); }
}
@keyframes journey-blob-b {
  0%   { transform: translate(-50%, -50%) translate(0, 0) scale(1.05); }
  50%  { transform: translate(-50%, -50%) translate(-7vw, 5vh) scale(0.92); }
  100% { transform: translate(-50%, -50%) translate(4vw, -3vh) scale(1.1); }
}
@keyframes journey-blob-c {
  0%   { transform: translate(-50%, -50%) translate(0, 0) scale(0.95); }
  50%  { transform: translate(-50%, -50%) translate(5vw, 6vh) scale(1.15); }
  100% { transform: translate(-50%, -50%) translate(-6vw, -2vh) scale(1); }
}
@keyframes journey-chip-float {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -8px; }
}
@media (min-width: 1024px) {
  .journey-pin__stage {
    position: relative;
  }
  /* Moving gradient: blobs gather around the big phone, then (with --glow-in, the phone's docking
     progress) slide toward the left column and soften so the steps on the right stay easy to read.
     Top/bottom fade out so the pinned stage has no hard edge. */
  .journey-pin.is-pinned .journey-bg {
    display: block;
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 18%, #000 82%, transparent 100%);
    mask-image: linear-gradient(180deg, transparent 0%, #000 18%, #000 82%, transparent 100%);
    opacity: calc(1 - 0.35 * var(--glow-in, 0));
    translate: calc(-22vw * var(--glow-in, 0)) 0;
  }
  .journey-bg__blob {
    position: absolute;
    border-radius: 50%;
    will-change: transform;
  }
  .journey-bg__blob--mint {
    left: 38%;
    top: 46%;
    width: 52vw;
    height: 52vw;
    background: var(--journey-blob-mint);
    animation: journey-blob-a 16s ease-in-out infinite alternate;
  }
  .journey-bg__blob--teal {
    left: 64%;
    top: 38%;
    width: 46vw;
    height: 46vw;
    background: var(--journey-blob-teal);
    animation: journey-blob-b 19s ease-in-out infinite alternate;
  }
  .journey-bg__blob--coral {
    left: 56%;
    top: 72%;
    width: 34vw;
    height: 34vw;
    background: var(--journey-blob-coral);
    animation: journey-blob-c 22s ease-in-out infinite alternate;
  }
  .journey-pin.is-pinned .journey {
    position: relative; /* above the moving background */
  }
  /* Chips sit around the big phone: anchored to the stage area below the header, positions are
     fractions of the big phone width (--journey-phone-w, set by motion.js) from the centre */
  .journey-pin.is-pinned .journey-chips {
    display: block;
    position: absolute;
    inset: var(--header-offset, 96px) 0 0;
    z-index: 2;
    pointer-events: none;
  }
  .journey-chip {
    position: absolute;
    left: calc(50% + var(--journey-phone-w, 900px) * var(--cx));
    top: var(--cy);
    opacity: calc(1 - var(--chips-out, 0));
    transform:
      translate(-50%, -50%)
      translate(calc(var(--ox) * var(--chips-out, 0)), calc(var(--oy) * var(--chips-out, 0)))
      scale(calc(1 - 0.15 * var(--chips-out, 0)));
  }
  .journey-chip--tl { --cx: -0.40; --cy: 24%; --ox: -80px; --oy: -40px; --d: 0ms;   --fd: 5.2s; }
  .journey-chip--tr { --cx:  0.38; --cy: 14%; --ox:  80px; --oy: -40px; --d: 140ms; --fd: 6s; }
  .journey-chip--bl { --cx: -0.34; --cy: 80%; --ox: -80px; --oy:  40px; --d: 280ms; --fd: 5.6s; }
  .journey-chip--br { --cx:  0.40; --cy: 72%; --ox:  80px; --oy:  40px; --d: 420ms; --fd: 6.4s; }
  /* Pop in when the stage arrives (.is-live), then float */
  .journey-chip__inner {
    display: inline-flex;
    align-items: center;
    gap: var(--space-8);
    padding: var(--space-8) var(--space-16) var(--space-8) var(--space-8);
    border-radius: var(--radius-pill);
    background: rgba(255, 255, 255, 0.86);
    box-shadow: var(--shadow-md), inset 0 0 0 1px rgba(13, 59, 59, 0.06);
    -webkit-backdrop-filter: blur(var(--blur-glass));
    backdrop-filter: blur(var(--blur-glass));
    white-space: nowrap;
    opacity: 0;
    transform: translateY(18px) scale(0.86);
    transition:
      opacity 600ms var(--ease-out-soft) var(--d),
      transform 700ms var(--ease-out-soft) var(--d);
  }
  .journey-pin.is-live .journey-chip__inner {
    opacity: 1;
    transform: none;
    animation: journey-chip-float var(--fd) var(--ease-standard) calc(var(--d) + 700ms) infinite;
  }
  /* CI icon style (same as the menu icons): white circle tile with a hairline ring,
     1.5 px CI-teal line icon with one coral accent (accent colour lives in sprite.svg) */
  .journey-chip__icon {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: var(--radius-pill);
    background: var(--gradient-icon-tile);
    box-shadow: inset 0 0 0 1px var(--color-teal-100);
    color: var(--color-icon-ci);
    flex-shrink: 0;
  }
  .journey-chip__text {
    font-size: var(--fs-14);
    line-height: 20px;
    color: var(--color-teal-900);
  }
  .journey-chip__text b {
    font-family: var(--font-primary);
    font-weight: var(--fw-ui);
    color: var(--color-teal-950);
  }
}

/* ---------- Section 6 · Corporate — Clearpath quote panel ----------
   Light Teal 100 → mint panel (same as the FAQ help card) whose top edge rises in a soft arch (page-colored shape on top).
   The page line runs over the panel; content sits above the line. */
.corporate {
  position: relative;
  /* Bottom 200 px fades smoothly into the white section below (no hard edge) */
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0) calc(100% - 200px), var(--color-white) 100%),
    var(--gradient-corporate);
  color: var(--color-teal-900);
  padding-top: calc(var(--arch-height) + var(--space-48));
}
.corporate__arch {
  position: absolute;
  top: -2px; /* overlap the seam so no dark hairline shows at fractional pixel offsets */
  left: 0;
  width: 100%;
  height: calc(var(--arch-height) + 2px);
  fill: var(--color-white);
  pointer-events: none;
}
.corporate__inner {
  position: relative;
  display: grid;
  gap: var(--space-48);
}
@media (min-width: 1200px) {
  .corporate__inner {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    align-items: center;
    gap: var(--space-72);
  }
}
.corporate__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-24);
}
/* Heading in the "MorDee Corporate" color for the whole line; words light up one by one
   on scroll (motion.js). Size / weight follow the shared H2 standard like every section title. */
.corporate__title {
  max-width: 14em;
  color: var(--color-teal-950);
}
.corporate__mockup {
  width: 100%;
  aspect-ratio: 16 / 8;
  margin-top: var(--space-8);
}
/* HR stat card (dashboard preview): frosted Teal 950 glass, white type, CI Mint area chart.
   Style after the reference "Pageviews" card; sample numbers, decorative chart. */
.hr-stat {
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
  padding: var(--space-20) var(--space-24) var(--space-16);
  border-radius: var(--radius-24);
  background: var(--glass-teal-bg);
  box-shadow: inset 0 0 0 1px var(--glass-teal-border), var(--shadow-md);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: var(--color-white);
}
.hr-stat__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-12);
}
.hr-stat__label {
  font-family: var(--font-primary);
  font-size: var(--fs-16);
  line-height: 24px;
  font-weight: var(--fw-ui);
}
.hr-stat__value {
  margin-top: var(--space-4);
  font-family: var(--font-primary);
  font-size: var(--fs-28);
  line-height: 36px;
  font-weight: var(--fw-ui);
}
.hr-stat__unit {
  font-size: var(--fs-16);
  color: var(--color-teal-100);
}
.hr-stat__chip {
  flex-shrink: 0;
  padding: var(--space-4) var(--space-12);
  border-radius: var(--radius-pill);
  background: rgba(107, 226, 168, 0.18);
  box-shadow: inset 0 0 0 1px rgba(107, 226, 168, 0.35);
  font-family: var(--font-primary);
  font-size: var(--fs-12);
  line-height: var(--lh-12);
  color: var(--color-ci-mint);
}
.hr-stat__plot {
  position: relative;
  flex: 1 1 0; /* fills what the card's fixed shape leaves, never stretches the card */
  min-height: 0;
}
.hr-stat__chart {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}
/* Data point dot: rides the tip of the line (motion.js sets --dot-x / --dot-y in % of the plot);
   default = June (600, 17.8 of 140) */
.hr-stat__dot {
  position: absolute;
  top: var(--dot-y, calc(17.8 / 140 * 100%));
  left: var(--dot-x, 100%);
  width: 10px;
  height: 10px;
  border-radius: var(--radius-pill);
  background: var(--color-ci-mint);
  box-shadow: 0 0 0 3px var(--color-ci-mint-tint);
  transform: translate(-50%, -50%) scale(0);
  transition: transform var(--motion-base) var(--ease-out-soft);
}
.hr-stat.is-live .hr-stat__dot {
  transform: translate(-50%, -50%) scale(1);
}
.hr-stat__dot::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--color-ci-mint);
  opacity: 0;
}
.hr-stat.is-live .hr-stat__dot::after {
  animation: hr-dot-pulse 2s var(--ease-out-soft) infinite;
}
@keyframes hr-dot-pulse {
  0% { transform: scale(1); opacity: 0.6; }
  100% { transform: scale(3.2); opacity: 0; }
}
/* "เดือนนี้ +18%" pops in when the chart has finished drawing */
.motion-ready .hr-stat__chip {
  opacity: 0;
  transform: translateY(6px) scale(0.92);
  transition: opacity var(--motion-base) var(--ease-standard), transform var(--motion-base) var(--ease-out-soft);
}
.motion-ready .hr-stat.is-live .hr-stat__chip {
  opacity: 1;
  transform: none;
}
.hr-stat__stop { stop-color: var(--color-ci-mint); }
.hr-stat__area { fill: url(#hr-stat-fill); }
.hr-stat__line {
  fill: none;
  stroke: var(--color-ci-mint);
  stroke-width: 2.5;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}
/* Below desktop the card sizes to its content, so the chart keeps a readable height */
@media (max-width: 1199.98px) {
  .hr-stat { aspect-ratio: auto; }
  .hr-stat__plot { flex: none; height: 96px; }
}
.hr-stat__axis span {
  transition: color var(--motion-fast) var(--ease-standard);
}
.hr-stat__axis span.is-active {
  color: var(--color-white);
}
.hr-stat__axis {
  display: flex;
  justify-content: space-between;
  font-size: var(--fs-12);
  line-height: var(--lh-12);
  color: rgba(255, 255, 255, 0.72);
}
.lead-card {
  width: 100%;
  max-width: var(--form-max);
  justify-self: center;
}
/* Submit: fits its label (full width only on small phones, easier to tap) */
.lead-form__submit {
  align-self: flex-start;
}
@media (max-width: 599px) {
  .lead-form__submit {
    align-self: stretch;
    justify-content: space-between;
  }
}
/* Form fields: 2 columns from tablet up (5 fields → 3 rows); employee count spans both */
.lead-form__grid {
  display: grid;
  gap: var(--space-16);
}
@media (min-width: 768px) {
  .lead-form__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lead-form__grid .field--full { grid-column: 1 / -1; }
}

/* Desktop / laptop: the whole section fits one screen (down to 1366 × 768).
   Top padding clears the fixed header; content is centred in the leftover height. */
@media (min-width: 1200px) {
  .corporate {
    padding-block: calc(var(--arch-height) + var(--space-48)) var(--section-padding);
  }
  .corporate__inner {
    gap: var(--space-64);
  }
  .corporate__content {
    gap: var(--space-20);
  }
  .corporate .check-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-12) var(--space-24);
  }
  .corporate .check-list li {
    font-size: var(--fs-16);
    line-height: 26px;
  }
  .corporate__mockup {
    aspect-ratio: 16 / 6;
    margin-top: 0;
  }
  .corporate .lead-card {
    padding: var(--space-32);
  }
  .corporate .lead-form {
    gap: var(--space-16);
  }
  .corporate .lead-form__note {
    margin-top: calc(var(--space-8) * -1);
  }
  .corporate .field__input {
    height: var(--btn-height-sm);
  }
}

/* ---------- Section 7 · Reviews (layout after the Wellbase testimonials, full container width) ---------- */
.reviews {
  background: var(--color-review-bg);
}
.reviews__container {
  width: 100%;
  max-width: calc(var(--container-max) + var(--container-padding) * 2);
  margin-inline: auto;
  padding-inline: var(--container-padding);
}
.reviews__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-24);
  margin-bottom: var(--space-24);
}
@media (min-width: 768px) {
  .reviews__head { margin-bottom: 70px; }
}
/* Size / weight come from the shared H2 standard (base.css + --fs-h2) */
.reviews__title {
  max-width: 656px;
  color: var(--color-teal-950);
}

/* Arrows: 40 px outline circles, 10 px apart */
.reviews__nav {
  display: flex;
  gap: 10px;
  flex-shrink: 0;
}
.reviews__arrow {
  display: grid;
  place-items: center;
  width: var(--icon-40);
  height: var(--icon-40);
  border-radius: var(--radius-pill);
  box-shadow: inset 0 0 0 1px var(--color-review-line);
  color: var(--color-teal-950);
  transition: background-color var(--motion-fast) var(--ease-standard);
}
.reviews__arrow:hover {
  background: var(--color-white);
}
/* Phones swipe instead of using the arrows */
@media (max-width: 767.98px) {
  .reviews__nav { display: none; }
}

/* Auto slider: endless row, one card per step (4 s). Desktop 4 visible · tablet 2 · mobile 1 + peek.
   The viewport pads below so the flipped card's shadow isn't clipped. */
.reviews__carousel {
  overflow: hidden;
  margin-bottom: calc(var(--space-32) * -1);
  padding-bottom: var(--space-32);
  touch-action: pan-y;
  cursor: grab;
}
/* While dragging: grabbing hand, no text selection, no hover flips */
.reviews__carousel.is-dragging {
  cursor: grabbing;
  -webkit-user-select: none;
  user-select: none;
}
.reviews__carousel.is-dragging .review-flip {
  pointer-events: none;
}
.reviews__carousel img {
  -webkit-user-drag: none;
}
.reviews__track {
  --review-cols: 1.15; /* mobile: one card + a peek of the next */
  display: flex;
  gap: var(--space-16);
  will-change: transform;
}
.reviews__track.is-animating {
  transition: transform var(--slide-ms, 700ms) var(--ease-out-soft);
}
@media (min-width: 768px) {
  .reviews__track { --review-cols: 2; }
}
@media (min-width: 1200px) {
  .reviews__track { --review-cols: 4; }
}
.review-flip__slide {
  flex: 0 0 calc((100% - var(--space-16) * (var(--review-cols) - 1)) / var(--review-cols));
  min-width: 0;
}

/* Flip card 420 px tall: front = photo + name in a line frame, back = white quote card.
   Hover, tap (focus) or keyboard focus flips it. */
.review-flip {
  height: var(--review-card-h);
  margin: 0;
  perspective: 1800px;
  outline: none;
  cursor: pointer;
}
.review-flip__inner {
  position: relative;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform 700ms var(--ease-out-soft);
}
.review-flip:hover .review-flip__inner,
.review-flip:focus .review-flip__inner,
.review-flip__slide.is-active .review-flip__inner {
  transform: rotateY(180deg);
}
/* Only one card open at a time: hovering or focusing another card closes the active one */
.reviews__track:hover .review-flip__slide.is-active:not(:hover) .review-flip__inner,
.reviews__track:focus-within .review-flip__slide.is-active:not(:focus-within) .review-flip__inner {
  transform: none;
}
/* After the hover rules (same specificity, later wins): */
/* Flip state is frozen while dragging (main.js marks the open card .is-held) */
.reviews__carousel.is-dragging .reviews__track .review-flip__slide:not(.is-held) .review-flip__inner {
  transform: none;
}
.reviews__carousel.is-dragging .reviews__track .review-flip__slide.is-held .review-flip__inner {
  transform: rotateY(180deg);
}
.review-flip:focus-visible .review-flip__back {
  box-shadow: 0 0 0 2px var(--color-teal-600), var(--shadow-md);
}
.review-flip__front,
.review-flip__back {
  position: absolute;
  inset: 0;
  border-radius: var(--radius-16);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
.review-flip__front {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-8);
}
/* Frame: right line full height, bottom line from 22 % across, 16 px rounded corner */
.review-flip__front::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 22%;
  border-right: 1px solid var(--color-review-line);
  border-bottom: 1px solid var(--color-review-line);
  border-bottom-right-radius: var(--radius-16);
  pointer-events: none;
}

/* Tone per card (CI): teal · coral · mint — photo tile, back avatar */
.review-flip--teal  { --review-tone: var(--gradient-review-teal); }
.review-flip--coral { --review-tone: var(--gradient-review-coral); }
.review-flip--mint  { --review-tone: var(--gradient-review-mint); }

.review-flip__photo {
  position: relative;
  display: grid;
  place-items: center;
  width: 123px;
  height: 133px;
  border-radius: var(--radius-12);
  background: var(--review-tone, var(--gradient-review-teal));
  overflow: hidden;
  transition: transform var(--motion-slow) var(--ease-out-soft);
}
/* Soft highlight so the tile reads as a photo spot, not a flat block */
.review-flip__photo::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--gradient-sheen);
}
.review-flip__photo img {
  position: relative;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.review-flip__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.review-flip__initial {
  position: relative;
  font-family: var(--font-primary);
  font-size: var(--fs-56);
  line-height: 1;
  color: var(--color-white);
}

/* Front teaser in the open bottom-left corner of the frame */
.review-flip__teaser {
  margin-top: auto;
  padding-bottom: var(--space-20); /* clear of the frame's bottom line */
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}
.review-flip__stars {
  display: inline-flex;
  gap: 2px;
  color: var(--color-coral-500);
}
.review-flip__hint {
  display: inline-flex;
  align-items: center;
  gap: var(--space-4);
  font-family: var(--font-primary);
  font-size: var(--fs-14);
  line-height: 20px;
  color: var(--color-teal-700);
}
.review-flip__hint .icon {
  transition: transform var(--motion-base) var(--ease-standard);
}

/* Back: soft Teal 100 → mint card (same tint as the FAQ help card), coral quote mark + stars,
   Teal 950 quote and name, Teal 900 role */
.review-flip__back {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
  padding: var(--space-24) var(--space-20) var(--space-20);
  background: var(--gradient-review-back);
  box-shadow: var(--shadow-md);
  transform: rotateY(180deg);
}
.review-flip__mark {
  width: var(--icon-40);
  height: var(--icon-40);
  flex-shrink: 0;
  color: var(--color-coral-500);
}
.review-flip__quote {
  flex: 1;
  margin: 0;
  font-family: var(--font-primary);
  font-size: var(--fs-18);
  line-height: 28px;
  color: var(--color-teal-950);
}
.review-flip--placeholder .review-flip__quote {
  color: var(--color-teal-900);
}
.review-flip__footer {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  column-gap: var(--space-12);
  row-gap: var(--space-8);
  padding-top: var(--space-16);
  border-top: 1px solid rgba(13, 59, 59, 0.12);
}
.review-flip__footer .review-flip__stars {
  grid-column: 1 / -1;
}
.review-flip__avatar {
  display: grid;
  place-items: center;
  overflow: hidden;
  width: var(--icon-40);
  height: var(--icon-40);
  border-radius: var(--radius-pill);
  background: var(--review-tone, var(--gradient-review-teal));
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.9);
  font-family: var(--font-primary);
  font-size: var(--fs-18);
  line-height: 1;
  color: var(--color-white);
}
.review-flip__person {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.review-flip__name {
  font-family: var(--font-primary);
  font-size: var(--fs-16);
  line-height: 22px;
  font-weight: var(--fw-ui);
  color: var(--color-teal-950);
}
.review-flip__role {
  font-size: var(--fs-14);
  line-height: 20px;
  color: var(--color-text-muted);
}.review-flip__back .review-flip__role { color: var(--color-teal-900); }
/* Deeper coral on the tinted back so the quote mark and stars keep ≥ 3 : 1 */
.review-flip__back .review-flip__mark,
.review-flip__back .review-flip__stars { color: var(--color-coral-700); }

/* ---------- Section 8 · Latest articles (layout after the ReliaCare blog) ---------- */
/* Header: eyebrow + title left, pill button right (stacked on mobile); 56 px to the cards */
/* Backdrop (client request 5 Nov 2026): the footer's stepped bars + glow (same SVG geometry, recoloured
   CI Green for white: assets/img/blog/blog-bars.svg), 30 % wider than the container and anchored to the
   bottom like the footer glow. The glow itself fades out at the bottom; the top 16 % is masked so there is no hard edge. */
.blog {
  position: relative;
  isolation: isolate;
  overflow: clip; /* the bars never reach into the section above */
}
.blog::after {
  --blog-bars-w: min(var(--container-max), 100vw - var(--container-padding) * 2); /* vw: % would mean height in `height` */
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  z-index: -1;
  /* 30 % wider than the content (allowed past the container); height stays that of the
     container-width version, so only the width stretches. Ends fade out inside the SVG. */
  width: calc(var(--blog-bars-w) * 1.3);
  height: calc(var(--blog-bars-w) * 799 / 1296);
  translate: -50% 0;
  background: var(--blog-bg-bars) center bottom / 100% 100% no-repeat;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 16%);
  mask-image: linear-gradient(180deg, transparent 0%, #000 16%);
}
/* Mobile: heading → cards → "see all" button (centred under card 3).
   Tablet / desktop: the same button sits top-right of the heading (grid placement). */
.blog .container {
  display: grid;
}
.blog__more {
  display: flex;
  justify-content: center;
  margin-top: var(--space-32);
}
@media (min-width: 768px) {
  .blog .container {
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: var(--space-24);
  }
  .blog__head { grid-column: 1; grid-row: 1; }
  .blog__more {
    grid-column: 2;
    grid-row: 1;
    align-self: center;
    margin-top: 0;
    margin-bottom: var(--space-32); /* same as the heading's, so both centre on one line */
  }
  .blog__grid { grid-column: 1 / -1; grid-row: 2; }
}
@media (min-width: 1200px) {
  .blog__more { margin-bottom: var(--space-56); }
}
.blog__head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-24);
  margin-bottom: var(--space-32);
}
@media (min-width: 768px) {
  .blog__head {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
}
@media (min-width: 1200px) {
  .blog__head { margin-bottom: var(--space-56); }
}
.blog__heading {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-12);
}
/* .blog__title: size / weight come from the shared H2 standard (base.css + --fs-h2) */

/* Grid: 1 · 2 · 3 columns (24 / 24 / 28 px gaps) */
.blog__grid {
  display: grid;
  gap: var(--space-24);
}
@media (min-width: 768px) {
  .blog__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1200px) {
  .blog__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 28px;
  }
}

/* Card: whole card is the link · cover (radius 16) · 32 px · meta · 16 px · title · 24 px · footer */
.blog-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-32);
  height: 100%;
  color: var(--color-teal-950);
  text-decoration: none;
}
.blog-card__media {
  display: block;
  border-radius: var(--radius-16);
  overflow: hidden;
  background: var(--color-teal-50);
}
/* Covers are mordeeapp.com banners with text across the whole image: shown uncropped (1200 × 630) */
.blog-card__media img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1200 / 630;
  object-fit: cover;
  transition: transform 600ms var(--ease-out-soft);
}
.blog-card:hover .blog-card__media img,
.blog-card:focus-visible .blog-card__media img {
  transform: scale(1.04);
}
.blog-card__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: var(--space-16);
}
.blog-card__meta {
  display: inline-flex;
  align-items: center;
  gap: var(--space-8);
  font-size: var(--fs-14);
  line-height: 22px;
  color: var(--color-text);
}
.blog-card__meta .icon {
  color: var(--color-teal-600);
}
/* Title 18 / 20 px, max 2 lines; summary (from mordeeapp.com) max 2 lines */
.blog-card__title {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  min-height: 56px; /* always 2 lines tall, so every card's text lines up */
  font-size: var(--fs-18);
  line-height: 28px;
  color: var(--color-teal-950);
  transition: color var(--motion-base) var(--ease-standard);
}
/* Hover / keyboard focus: title turns bright CI Green (client request 5 Nov 2026) */
.blog-card:hover .blog-card__title,
.blog-card:focus-visible .blog-card__title {
  color: var(--color-ci-green);
}
@media (min-width: 1200px) {
  .blog-card__title { min-height: 60px; font-size: var(--fs-20); line-height: 30px; }
}
.blog-card__excerpt {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  min-height: 52px; /* 2 lines */
  margin-top: calc(var(--space-8) * -1); /* sits closer to its title than the 16 px stack gap */
  font-size: var(--fs-16);
  line-height: 26px;
  color: var(--color-text);
}
.blog-card__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: auto;
  padding-top: var(--space-8);
  font-size: var(--fs-16);
  line-height: 24px;
  color: var(--color-text);
}
.blog-card__more {
  display: inline-flex;
  align-items: center;
  gap: var(--space-8);
}
.blog-card__more .icon {
  transition: transform var(--motion-base) var(--ease-standard);
}
.blog-card:hover .blog-card__more,
.blog-card:focus-visible .blog-card__more {
  color: var(--color-teal-700);
}
.blog-card:hover .blog-card__more .icon,
.blog-card:focus-visible .blog-card__more .icon {
  transform: translate(2px, -2px);
}

/* ---------- FAQ (layout after the reference "Your questions, Our answers") ----------
   Centered head: eyebrow between two fading rules + H2 with gradient accent.
   ≥1024: left 412 (photo + help card) | right accordion with tabs centered over it, gap 32.
   Full container width like the other sections (1296 at 1440+); the left column keeps the
   reference ratio 468 : 972. Below 1024: accordion first. */
.faq-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-12);
  margin-bottom: var(--space-48);
  text-align: center;
}
.faq-head__title {
  text-wrap: balance;
}
.faq-layout {
  display: grid;
  gap: var(--space-32);
}
.faq-aside {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
  order: 2;
}
/* Photo: white studio backdrop multiplied onto Teal 50, so it reads as a card on the white section.
   Base rules come first so the desktop "fill the box" rules below win. */
.faq-aside__media {
  overflow: hidden;
  border-radius: var(--radius-16);
  background: var(--color-teal-50);
}
.faq-aside__media img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 468 / 281;
  object-fit: cover;
  object-position: 60% 45%; /* keeps the people (right of centre) in frame */
  transition: opacity 200ms var(--ease-standard);
}
/* Tab photo swap (main.js swapTabImage) */
.faq-aside__media img.is-swapping {
  opacity: 0;
}
@media (min-width: 1024px) {
  /* Balanced columns: both start and end on the same lines. The photo stretches to fill
     whatever height the FAQ column has (also while a question is open). */
  .faq-layout {
    grid-template-columns: minmax(0, 412px) minmax(0, 1fr);
    align-items: stretch;
  }
  .faq-aside { order: 0; }
  .faq-aside__media {
    position: relative;
    flex: 1 1 0;
    min-height: 176px;
  }
  .faq-aside__media img {
    position: absolute;
    inset: 0;
    height: 100%;
    aspect-ratio: auto;
  }
}
/* Help card: title + text on top, button pushed down with a wide gap (reference).
   Corners follow the site system: cards radius 16, buttons pill. */
.faq-help {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: var(--space-16);
  border-radius: var(--radius-16);
  background: var(--gradient-faq-help);
}
.faq-help__title {
  font-size: var(--fs-16);
  line-height: 24px;
  color: var(--color-teal-950);
}
.faq-help__text {
  margin-top: var(--space-4);
  font-size: var(--fs-14);
  line-height: 22px;
  color: var(--color-teal-900);
  text-wrap: pretty;
}
.faq-help__btn {
  display: inline-flex;
  align-self: flex-end; /* right-aligned in the card */
  align-items: center;
  gap: var(--space-8);
  min-height: 40px;
  margin-top: var(--space-16);
  padding-inline: var(--space-16);
  border-radius: var(--radius-pill);
  background: var(--color-white);
  box-shadow: inset 0 0 0 1px var(--color-gray-200), var(--shadow-sm);
  font-family: var(--font-primary);
  font-size: var(--fs-14);
  line-height: var(--lh-label);
  font-weight: var(--fw-ui);
  color: var(--color-teal-950);
  text-decoration: none;
  transition: box-shadow var(--motion-base) var(--ease-standard);
}
/* Arrow in a CI pink circle (same as the primary button's arrow) */
.faq-help__btn-icon {
  display: grid;
  place-items: center;
  width: var(--btn-icon-sm);
  height: var(--btn-icon-sm);
  margin-right: -10px; /* 6 px from the pill edge = same as top / bottom (40 − 28) / 2 */
  border-radius: var(--radius-pill);
  /* Light pink circle only (no darker ring): the primary button's arrow tone, CI Pink + 22 % white */
  background: color-mix(in srgb, var(--color-ci-pink) 78%, var(--color-white));
  color: var(--color-white);
  flex-shrink: 0;
}
.faq-help__btn .icon {
  transition: transform var(--motion-base) var(--ease-standard);
}
.faq-help__btn:hover {
  box-shadow: inset 0 0 0 1px var(--color-gray-200), var(--shadow-md);
}
.faq-help__btn:hover .icon {
  transform: translateX(3px);
}

/* ---------- Promotions — center-focus coverflow (full screen width) ----------
   The active banner sits large in the middle; the banners either side are smaller, blurred and
   cut off by the screen edge. main.js sets --cf-offset (-2 … 2) and data-pos on each slide. */
.coverflow {
  position: relative;
}
.coverflow__stage {
  position: relative;
  height: calc(var(--cf-width) * 0.5);
  margin: 0;
  padding: 0;
  overflow: hidden;
  /* Clip only sideways (hides the off-screen slides); the cards' drop shadow can fall below */
  overflow-x: clip;
  overflow-y: visible;
  list-style: none;
  touch-action: pan-y;
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
}
.coverflow.is-dragging .coverflow__stage {
  cursor: grabbing;
}
/* While dragging, banners follow the pointer 1 : 1 (no easing) */
.coverflow.is-dragging .coverflow__slide {
  transition: none;
}
.coverflow__slide {
  --cf-offset: 0;
  position: absolute;
  top: 0;
  left: 50%;
  width: var(--cf-width);
  aspect-ratio: 2 / 1;
  border-radius: var(--radius-24);
  overflow: hidden;
  transform: translateX(calc(-50% + var(--cf-offset) * var(--cf-width) * var(--cf-step) + var(--cf-drag, 0px))) scale(var(--cf-scale, 1));
  filter: blur(var(--cf-filter-blur, 0px));
  opacity: var(--cf-opacity, 1);
  z-index: var(--cf-z, 1);
  transition:
    transform var(--cf-duration) var(--ease-in-out-soft),
    filter var(--cf-duration) var(--ease-in-out-soft),
    opacity var(--cf-duration) var(--ease-in-out-soft);
}
.coverflow__slide[data-pos="center"] {
  --cf-z: 3;
  box-shadow: var(--shadow-lg);
}
.coverflow__slide[data-pos="side"] {
  --cf-scale: var(--cf-side-scale);
  --cf-filter-blur: var(--cf-blur);
  --cf-opacity: var(--cf-side-opacity);
  --cf-z: 2;
  cursor: pointer;
}
.coverflow__slide[data-pos="hidden"] {
  --cf-scale: 0.7;
  --cf-opacity: 0;
  --cf-z: 1;
  pointer-events: none;
}
/* Before JS runs (or without JS): show the first banner only */
.coverflow:not(.is-ready) .coverflow__slide:not(:first-child) {
  display: none;
}
.coverflow__link {
  display: block;
  width: 100%;
  height: 100%;
}
.coverflow__link img {
  display: block;
  -webkit-user-drag: none;
  pointer-events: none;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.coverflow__slide[data-pos="center"] .coverflow__link:focus-visible {
  outline-offset: -4px;
}

.coverflow__controls {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: var(--space-24);
}
.coverflow__dots {
  display: flex;
  gap: var(--space-8);
}
.coverflow__dot {
  width: 10px;
  height: 10px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--color-gray-300);
  cursor: pointer;
  transition: width var(--motion-base) var(--ease-standard), background-color var(--motion-base) var(--ease-standard);
}
.coverflow__dot[aria-current="true"] {
  width: 28px;
  background: var(--gradient-primary);
}
/* 44 px touch target around the small dot */
.coverflow__dot {
  position: relative;
}
.coverflow__dot::after {
  content: "";
  position: absolute;
  inset: -17px -4px;
}