/* ==========================================================================
   CrysMed — Layout Variation 2 overrides
   Only for index-layout-2.html. Additive modifier classes on top of the
   shared .ad-banner component in main.css — the base component is left
   untouched so every other page that uses it is unaffected.

   Also carries the navy/gold color system from Color Variation 7 (the client
   design system applied to Home-page-6v.pdf) — same rules, copied rather
   than imported so this page and the color variations can diverge later
   without affecting each other. The promo-strip/popular-searches rules from
   Variation 7 are intentionally NOT included here, since this page kept the
   original hero/header layout and doesn't have that markup.
   ========================================================================== */

.guidance-strip {
  background: #ffe7c7;
}

/* "Care from trusted providers" cards: the shared .provider-card border
   (main.css, --line = #e9edf1) reads as almost invisible against a white
   card — client asked for a visible, colored border on every card here
   (2026-09-04), same weight class as the corporate page's .provcard
   treatment. Scoped to this section only — main.css's .provider-card is
   also used, unstyled, on insurance-directory.html/insurance-support.html. */
#providers .provider-card { border-color: var(--brand-700); }
#providers .provider-card:hover { border-color: var(--brand-900); }

/* "How CrysMed works" — client asked (2026-09-04) for the whole 4-step row to read
   as its own highlighted block instead of plain text loose on the page background.
   Reuses the exact tint/border already used one section down for .partnership-cta,
   so the two panels read as one consistent visual language rather than a new color.
   Scoped to home.html — .steps-row/.step-item (main.css) are also plain, unstyled
   text rows on marketplace.html, hospital-providers.html and providers.html. */
#how-it-works .steps-row {
  background: var(--accent-tint);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: var(--sp-5);
}

/* Gift-voucher mockup as a bottom-anchored background overlay rather than
   a normal-flow block — it no longer pushes the card's height (which was
   growing the whole section), the card's height goes back to being set by
   its text content only, and the image is free to show at its full native
   size, bleeding upward from the bottom edge behind that text. */
.voucher-card {
  position: relative;
  overflow: hidden;
}
.voucher-card__media {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  border-radius: 0;
  z-index: 0;
}
.voucher-card > :not(.voucher-card__media) {
  position: relative;
  z-index: 1;
}

/* .new-week-layout stretches its two columns to match each other's height
   by default. That was dragging "New this week" (left column) taller
   whenever .voucher-card (right column) needed more room, which then
   pushed the "Partner spotlight" card's bottom-pinned button down into a
   big empty gap. Pin the left column to its own natural content height so
   it never inherits height from the voucher card. */
.new-week-col {
  align-self: start;
}

.cat-carousel { position: relative; }

/* ==========================================================================
   #partners — "Our Partners" logo carousel, next to How CrysMed works.
   Rebuilt 2026-08-24 from a client reference: light neutral background
   (was a warm gold gradient) and a manual page-based carousel — prev/next
   arrows + dot pagination, no autoplay — replacing the old continuous
   auto-scroll marquee. Arrow button styling adapted from the category
   grid's .cat-carousel__arrow (category-explorer.css); dot styling adapted
   from the hero's .hcar__dot (hero-alt.css) — same visual language as
   those two existing carousels, reused rather than invented fresh.
   Content stays the site's one existing placeholder logo repeated across
   2 pages of 6 (12 cards) — the reference shows 6 real, named partner
   brands (Aster, VPS Healthcare, SEHA, Daman, MetLife, Cigna), but no
   logo artwork exists for any of them and recreating real trademarked
   logos would imply a partnership that isn't confirmed, so the layout
   was rebuilt without the content. Swap in real logos here if/when
   actual partner assets are provided. ---- */

#partners {
  background: var(--surface);
}

.partner-carousel { position: relative; }
.partner-carousel__viewport { overflow: hidden; }
.partner-carousel__track {
  display: flex;
  transition: transform .5s var(--ease);
}
.partner-carousel__page {
  flex: 0 0 100%;
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: var(--sp-4);
}
.partner-carousel__item {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 96px;
  padding: var(--sp-4);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: 0 4px 14px rgba(22, 22, 22, .05);
}
.partner-carousel__item img { max-height: 100%; max-width: 100%; object-fit: contain; display: block; }

.partner-carousel__arrow {
  position: absolute;
  top: 50%;
  z-index: 2;
  width: 36px; height: 36px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid var(--line-strong);
  background: var(--white);
  color: var(--ink-900);
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow-hover);
  transform: translateY(-50%);
  transition: background-color .15s var(--ease), border-color .15s var(--ease), color .15s var(--ease);
}
.partner-carousel__arrow svg { width: 16px; height: 16px; }
.partner-carousel__arrow:hover { background: var(--brand-700); border-color: var(--brand-700); color: var(--white); }
.partner-carousel__arrow--prev { left: -18px; }
.partner-carousel__arrow--next { right: -18px; }

.partner-carousel__dots {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  margin-top: var(--sp-4);
}
.partner-carousel__dot {
  width: 7px; height: 7px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: var(--line-strong);
  transition: width .25s var(--ease), background-color .25s var(--ease);
}
.partner-carousel__dot.is-active { width: 22px; border-radius: 4px; background: var(--brand-700); }

@media (max-width: 900px) {
  .partner-carousel__page { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .partner-carousel__page { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .partner-carousel__arrow { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .partner-carousel__track { transition: none; }
}
.cat-carousel__viewport { overflow: hidden; }

.cat-tiles {
  display: flex;
  gap: var(--sp-3);
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scroll-behavior: smooth;
  scrollbar-width: none;
  padding-bottom: 2px;
}
.cat-tiles::-webkit-scrollbar { display: none; }
.cat-tiles .cat-tile { flex: 0 0 152px; scroll-snap-align: start; }

.cat-carousel__arrow {
  position: absolute;
  top: 50%;
  z-index: 2;
  width: 36px; height: 36px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid var(--line-strong);
  background: var(--white);
  color: var(--ink-900);
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow-hover);
  transform: translateY(-50%);
  transition: background-color .15s var(--ease), border-color .15s var(--ease), color .15s var(--ease);
}
.cat-carousel__arrow svg { width: 16px; height: 16px; }
.cat-carousel__arrow:hover { background: var(--brand-700); border-color: var(--brand-700); color: var(--white); }
.cat-carousel__arrow--prev { left: -18px; }
.cat-carousel__arrow--next { right: -18px; }

@media (max-width: 640px) {
  .cat-carousel__arrow { display: none; }
}

.cat-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 143px;
  padding: 15px;
  background: var(--white);
  border-radius: var(--r-lg);
  box-shadow: 0 4px 14px rgba(22,22,22,.05);
  overflow: hidden;
  box-sizing: border-box;
  transition: transform .2s var(--ease), box-shadow .2s var(--ease);
}
.cat-tile:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-hover);
}
.cat-tile__num {
  font-size: .456rem;
  font-weight: var(--fw-bold);
  letter-spacing: .6px;
  color: var(--danger);
  z-index: 2;
}
.cat-tile__blob {
  position: absolute;
  top: -10px;
  right: -10px;
  width: 75px;
  height: 75px;
  border-radius: 50%;
  z-index: 1;
}
.cat-tile__icon {
  position: absolute;
  top: 18px;
  right: 18px;
  width: 36px;
  height: 36px;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--brand-700);
}
.cat-tile__icon svg { width: 32px; height: 32px; stroke-width: 1.7; }
.cat-tile__icon--photo { top: 0; right: 0; width: 58px; height: 58px; }
.cat-tile__icon--photo img { width: 100%; height: 100%; object-fit: contain; }
.cat-tile__bottom {
  position: absolute;
  top: 80px;
  left: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  z-index: 2;
}
.cat-tile__title {
  font-size: .75rem;
  font-weight: var(--fw-bold);
  color: var(--ink-900);
  line-height: var(--lh-snug);
  text-align: center;
  margin: 0 0 3px;
}
.cat-tile__price {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  font-size: .5rem;
  font-weight: var(--fw-bold);
  letter-spacing: .5px;
  text-transform: uppercase;
  color: var(--ink-500);
}
.cat-tile__price svg { width: 8.5px; height: 8.5px; flex-shrink: 0; color: var(--danger); }

/* Five-wide pastel colour cycle for the decorative corner blob. */
.cat-tile:nth-child(5n+1) .cat-tile__blob { background: #f0f3fa; }
.cat-tile:nth-child(5n+2) .cat-tile__blob { background: #f2f7f6; }
.cat-tile:nth-child(5n+3) .cat-tile__blob { background: #fcf1eb; }
.cat-tile:nth-child(5n+4) .cat-tile__blob { background: #f1f3fa; }
.cat-tile:nth-child(5n) .cat-tile__blob { background: #f4f6f4; }

/* ---- 6-up variant of the .deal-grid used by "Hot deals near you", reused
   for the compact doctors row in #doctors-preview ---- */
.deal-grid--6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
@media (max-width: 1180px) {
  .deal-grid--6 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 980px) {
  .deal-grid--6 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* Below 640px, .deal-grid's own carousel rule (main.css) takes over. */

/* ---- Larger ad banner, matching the bigger proportions shown in the
   client reference (Asteria Health Devices + education partner banners).
   min-height locked to today's incidental tallest-slide height (1216x308
   at full desktop width) so a future replacement image on any of the 4
   carousel slides always fully fills the card regardless of how the
   other slides' text wraps. ---- */
.ad-banner--lg {
  padding: var(--sp-6) var(--sp-7);
  min-height: 308px;
  gap: var(--sp-7);
}
.ad-banner--lg .ad-banner__brand b {
  font-size: var(--fs-md);
}
.ad-banner--lg .ad-banner__body h3 {
  font-size: var(--fs-xl);
  margin-bottom: var(--sp-2);
}
.ad-banner--lg .ad-banner__body p {
  font-size: var(--fs-sm);
}
.ad-banner--lg .ad-banner__disclosure {
  max-width: 190px;
}
.ad-banner--lg .ad-banner__disclosure a {
  font-size: var(--fs-xs);
}
.ad-banner--lg .ad-banner__disclosure span {
  font-size: .6875rem;
}
.ad-banner--lg .placeholder-img--lg,
.ad-banner--lg img.placeholder-img {
  width: 280px;
  height: 150px;
  border-radius: var(--r-md);
}
.ad-banner--lg .ad-banner__list {
  font-size: var(--fs-xs);
}

@media (max-width: 900px) {
  .ad-banner--lg { padding: var(--sp-5); min-height: 0; }
  .ad-banner--lg .placeholder-img--lg,
  .ad-banner--lg img.placeholder-img { width: 100%; height: 160px; }
}

/* ==========================================================================
   Color system (from Color Variation 7 / Home-page-6v.pdf)
   ========================================================================== */

/* ---- New design-system palette (2026-08-24 palette-extraction pass), rolled
   out across the whole home page. Every var(--premium-500)/--premium-700/
   --accent-500/--accent-700 reference — buttons, badges, membership pricing,
   CME accents, the showcase panels, everything — now resolves to the
   extracted values instead of the client's originals. Still scoped to
   index.html only via this file (not touched in tokens-layout-2.css), so
   every other page is unaffected until it's redone the same way. --brand-700
   itself was unified sitewide on 2026-08-26 (see tokens-layout-2.css), so it's
   no longer repointed here — the header/nav/footer treatments that depended
   on it were moved into main.css the same day. --danger is deliberately NOT
   repointed here — it's still the real error/failed-payment color;
   CTA-orange buttons and discount badges use the new --cta-orange token
   instead (defined here, since it has no prior role to preserve). ---- */
:root {
  --premium-500: #f7c22e;
  --premium-700: #c09723;
  --accent-500: #40b1ea;
  --accent-700: #2394c0;
  --cta-orange: #fb5612;
  --cta-orange-hover: #cd460e;
}

/* ---- Discount badges (deal-card, currently unused since #marketplace-preview
   is commented out): were riding on --danger as a stand-in orange. Moved to
   the dedicated CTA orange so error states and promotional badges stop
   sharing a token. ---- */
.deal-card__discount {
  background: var(--cta-orange);
}

/* ---- "New this week" mini-card discount badge: redesigned (2026-08-25) to
   match the Everyday health essentials product-card offer-tag — an outline
   pill instead of a solid fill, moved off the photo and into the body,
   sitting beside the title (title left, badge right — same row pattern as
   .mini-offer-card__title-row in "Offers made for your wellbeing"). ---- */
.mini-card__title-row { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-2); }
.mini-card__title-row b { flex: 1; min-width: 0; }
/* Specificity note: main.css's .mini-card__body span (0,2,0) otherwise beats
   a bare .mini-card__discount (0,1,0) and forces the text back to grey —
   the extra .mini-card__body qualifier matches that specificity. */
.mini-card__body .mini-card__discount {
  flex: 0 0 auto;
  position: static;
  margin-top: 1px;
  background: transparent;
  border: 1px solid var(--danger);
  color: var(--danger);
  font-size: .5625rem;
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  padding: 2px 6px;
  border-radius: var(--r-sm);
}

/* Moving the badge into the body makes every card ~24px taller (x2 grid
   rows), so this section's top spacing is trimmed to absorb most of that
   growth instead of pushing the sponsor strip below it further down. */
#new-this-week { padding-top: var(--sp-2); }
#new-this-week .section__head { margin-bottom: var(--sp-1); }

/* ---- Found 2026-08-24, same pass: main.css's default .btn-primary hard-
   codes the OLD gold (#ddac3d) as literal hex — not var(--premium-500) — so
   the :root override above silently never reached it. This is why
   "Search healthcare" kept showing the old color (and .btn-primary's hover
   fell back to var(--brand-900) — a dark TEAL for a GOLD button, a
   pre-existing mismatch, not something the teal override could have
   caused). Retargeted to the new tokens here. (The header/nav/footer
   equivalents of this fix — cart-count bubble, nav hover underline, "Find
   care" button, utility bar, footer background — were unified sitewide
   into main.css on 2026-08-26 instead of overridden here.) ---- */
.btn-primary {
  background: var(--premium-500);
}
.btn-primary:hover {
  background: var(--premium-700);
}

/* ---- 2026-08-24 follow-up: user flagged gold specifically on "Search
   healthcare" (hero search panel) as looking off, and asked for f8800d
   there — not a --premium-500 retokenize, since that would also recolor
   Membership pricing, CME and the Member rate/Popular badges, which
   weren't flagged. Reused --badge-amber (already #f8800d, defined for
   marketplace product badges) rather than adding a duplicate token for the
   same value. (The header "Find care" button got the same treatment via
   main.css's .header-actions .btn-primary on 2026-08-26.) ---- */
.search-panel .btn-primary {
  background: var(--badge-amber);
}
.search-panel .btn-primary:hover {
  background: #c6660a;
}

/* ---- Same root cause, orange family: "Self-pay" tag and the DHA-/MOH-
   licence-number text hard-code the old #f26614 orange instead of a token. ---- */
.tag-selfpay {
  background: var(--cta-orange);
}
.deal-card__footer span {
  color: var(--cta-orange);
}

/* ---- Hero carousel banner: this "Color Variation 7" override block used to
   hard-code its own cream/peach-to-grey gradient here, which silently beat
   hero-alt.css's own rule on load order alone. Superseded 2026-08-24 by the
   sky-gradient "featured card" treatment (new-designs palette-extraction
   pass) — .halt__card and .hcar are intentionally left undeclared here now
   so hero-alt.css's own rules are the single source of truth. Only .halt__glow
   still needs a local override, since hero-alt.css's brighter sky-toned glow
   is what reads correctly against this section's specific gradient. ---- */
.halt__glow {
  background: radial-gradient(circle at 40% 45%, rgba(64, 177, 234, .55) 0%, rgba(64, 177, 234, .22) 45%, rgba(64, 177, 234, 0) 72%);
}
.halt__memcard {
  background: linear-gradient(140deg, #fbfeff 0%, #edf3f4 100%);
  box-shadow: 0 14px 30px rgba(6,43,77,.18);
}

/* ---- Deal card badge: was a hard-coded gold, now the new design-system
   gold token (2026-08-24) — see the retarget note above. ---- */
.deal-card__badge {
  background: var(--premium-500);
  color: var(--brand-900);
}

/* ---- Provider card badge ("Care from trusted providers"): switched
   (2026-08-25) to the same light-teal-tint treatment as the Everyday
   health essentials product-card category badge, instead of solid gold. ---- */
.provider-card__badge {
  background: var(--brand-tint-strong);
  color: var(--brand-900);
}

/* ---- Sponsored deal card: smooth golden gradient across the whole card
   (header label + body), instead of the navy header / pale blue-grey body.
   min-height locked to today's incidental grid-stretch height (224x421 at
   full desktop width) so a future replacement image always fully fills the
   card regardless of how tall the sibling photo-deal-cards' text grows. ---- */
.deal-card--sponsored {
  background: linear-gradient(135deg, #fff3d6 0%, #ffcf6b 45%, #ffb323 100%);
  border-color: rgba(166, 124, 50, .4);
  min-height: 421px;
}
.deal-card--sponsored .deal-card__sponsored-head {
  background: transparent;
  color: var(--brand-900);
}

/* ---- Sponsored deal card, image-only variant: the sponsor supplied a
   pre-designed 448x842 (@2x) creative with its own headline/CTA baked in,
   so no HTML text is overlaid — same treatment as the .ad-banner--image
   cards above. Fills the same 224x421 (@1x) box the text variant used. ---- */
.deal-card--sponsored-image {
  padding: 0;
  background: none;
  border-color: var(--line);
}
.deal-card--sponsored-image > a {
  display: flex;
  flex: 1;
}
.deal-card--sponsored-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  display: block;
}

/* ---- Gift voucher panel: bright gold gradient (brighter/more saturated
   than the pale cream version used in Variation 5/7) so it stands out
   against the page background. Button stays navy for contrast against gold.
   min-height locked to today's incidental grid-row height (435x483 at full
   desktop width) so a future replacement image always fully fills the
   card regardless of how the row's sizing shifts. ---- */
.voucher-card {
  background: linear-gradient(135deg, #fbe8b8 0%, #ffe7c7 45%, #bd7920 100%);
  border-color: rgba(166, 124, 50, .4);
  min-height: 483px;
}

/* ---- Sponsored mini-card ("Partner spotlight") background. min-height
   locked to today's incidental sibling-grid-stretch height (380x395 at
   full desktop width), same reasoning as .voucher-card above. ---- */
.mini-card--sponsored {
  background: #ffe7c7;
  border-color: var(--accent-700);
  min-height: 395px;
}

/* ---- Image-only variants: the sponsor supplied a pre-designed creative
   with its own headline/CTA baked in, so no HTML text is overlaid — same
   treatment as .ad-banner--image / .deal-card--sponsored-image above.
   FIXED aspect-ratio + align-self:start (client, 2026-09-04): these two
   cards used to stretch to match their sibling's height (.new-week-row /
   .new-week-layout both default to align-items:stretch), which made the
   "correct" image size a moving target — any change to the neighboring
   "New this week" grid's content height silently changed this box's shape
   too, cropping a correctly-sized image via object-fit:cover. Locking the
   ratio here means these boxes now dictate their OWN shape; a same-ratio
   image never crops, regardless of what the neighboring column does. The
   trade-off (accepted): if that neighboring column ever ends up taller
   than this fixed box, the columns won't end flush anymore. Design new
   creative at 2x = 760x918 (Partner spotlight) / 870x1054 (Gift voucher). ---- */
.mini-card--sponsored-image {
  flex: 0 0 380px;
  align-self: start;
  aspect-ratio: 380 / 459;
  padding: 0;
  background: none;
  border-color: var(--line);
}
@media (max-width: 900px) {
  .mini-card--sponsored-image { flex-basis: 300px; }
}
@media (max-width: 700px) {
  /* .new-week-row goes to flex-direction: column here, so a fixed
     flex-basis would apply to height instead of width — reset it. */
  .mini-card--sponsored-image { flex: 1 1 auto; }
}
.mini-card--sponsored-image > a {
  display: flex;
  flex: 1;
}
.mini-card--sponsored-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  display: block;
}

.voucher-card--image {
  align-self: start;
  aspect-ratio: 435 / 527;
  padding: 0;
  background: none;
  border-color: var(--line);
}
.voucher-card--image > a {
  display: flex;
  flex: 1;
}
.voucher-card--image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  display: block;
}

/* ---- "Category sponsor" tag on the sponsor strip: golden gradient
   background, white text (reverted from the flat-gold/navy-text version) ---- */
.sponsor-strip__tag {
  background: linear-gradient(100deg, #e6a520 0%, #ffb323 55%, #c98d1a 100%);
  color: var(--white);
}

/* ---- Sponsor strip: boxed like the rest of the page's sections instead of
   a full-bleed bar, with the requested peach background ---- */
.sponsor-strip {
  background: transparent;
  border-block: none;
}
.sponsor-strip__inner {
  background: #ffe7c7;
  border: 1px solid rgba(230, 165, 32, .3);
  border-radius: var(--r-lg);
  padding: var(--sp-4) var(--sp-5);
}

/* ---- "UAE Coverage" card: golden gradient theme. min-height locked to
   today's incidental sibling-grid-stretch height (160x252.5 at full
   desktop width) so a future replacement image always fully fills the
   card regardless of how tall the sibling provider cards' text renders. ---- */
.coverage-card {
  background: linear-gradient(135deg, #fff3d6 0%, #ffcf6b 45%, #ffb323 100%);
  border-color: rgba(166, 124, 50, .4);
  min-height: 252.5px;
}
.voucher-card .voucher-amounts span {
  border-color: rgba(166, 124, 50, .35);
}

/* ---- Coverage card, image-only variant: the sponsor supplied a
   pre-designed 320x505 (@2x) creative with its own headline/list baked in,
   so no HTML text is overlaid — same treatment as .ad-banner--image /
   .deal-card--sponsored-image above. Fills the same 160x252.5 (@1x) box
   the text variant used. ---- */
.coverage-card--image {
  padding: 0;
  background: none;
  border-color: var(--line);
}
.coverage-card--image > a {
  display: flex;
  flex: 1;
}
.coverage-card--image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  display: block;
}

/* ---- Premium gold — scoped to Membership ---- */
.membership {
  /* Blended instead of flat brand-900 — a solid teal fill this large read as
     an overwhelming block of green rather than "mixed" use of the palette. */
  background: linear-gradient(135deg, var(--accent-700) 0%, var(--brand-900) 55%, #052a30 100%);
}
.membership .eyebrow--dark {
  color: var(--premium-500);
}
.membership__headline {
  color: var(--white);
}
.membership__intro .btn-primary {
  background: var(--premium-500);
  color: var(--brand-900);
}
.membership__intro .btn-primary:hover {
  background: var(--premium-700);
  color: var(--white);
}
.pricing-card--popular {
  border-color: var(--premium-500);
  background: rgba(198, 154, 70, .10);
}
.pricing-card__tag {
  background: var(--premium-500);
  color: var(--brand-900);
}
.pricing-card li::before {
  color: var(--premium-500);
}

/* ---- Commercial partnerships panel: bright gold gradient. The CTA button
   switches to navy here (instead of gold) so it still stands out against
   the now-gold card — gold-on-gold would have too little contrast.
   min-height locked to today's incidental content height (1216x240 at full
   desktop width) so a future replacement image always fully fills the
   card regardless of how the intro/bullet-list/button text wraps. ---- */
.partnership-cta {
  background: linear-gradient(100deg, #fbe8b8 0%, #eec978 55%, #c69a46 100%);
  border-color: rgba(166, 124, 50, .4);
  min-height: 240px;
}
.partnership-cta__actions .btn-primary {
  background: var(--brand-700);
  color: var(--white);
}
.partnership-cta__actions .btn-primary:hover {
  background: var(--brand-900);
}

/* ---- Image-only variant: the sponsor supplied a pre-designed 2432x480
   (@2x) creative with its own headline/CTA baked in, so no HTML text/grid
   is overlaid — same treatment as .ad-banner--image /
   .deal-card--sponsored-image above. Fills the same 1216x240 (@1x) box the
   text variant used. ---- */
.partnership-cta--image {
  display: flex;
  padding: 0;
  background: none;
  border-color: var(--line);
}
.partnership-cta--image > a {
  display: flex;
  flex: 1;
}
.partnership-cta--image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: left center;
  display: block;
}

/* ---- Sponsor ad-banner carousel: dots-only, center bottom ---- */
.ad-carousel__viewport {
  overflow: hidden;
  border-radius: var(--r-lg);
}
.ad-carousel__track {
  display: flex;
  transition: transform .55s cubic-bezier(.45, .05, .2, 1);
  will-change: transform;
}
.ad-carousel__slide {
  flex: 0 0 100%;
  min-width: 0;
  display: flex;
}
.ad-carousel__slide .ad-banner {
  flex: 1;
}
.ad-carousel__dots {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  margin-top: var(--sp-3);
}
.ad-carousel__dot {
  width: 7px; height: 7px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: var(--line-strong);
  transition: width .25s var(--ease), background-color .25s var(--ease);
}
.ad-carousel__dot.is-active { width: 22px; border-radius: 4px; background: var(--brand-700); }

@media (prefers-reduced-motion: reduce) {
  .ad-carousel__track { transition: none; }
}

/* ---- Sponsor banner color themes — each slide gets its own color (CME/
   education is part of the "premium gold" role; the other three sponsors
   use distinct colors so the carousel reads as varied, not repetitive) ---- */
.ad-banner--gold {
  background: linear-gradient(100deg, #fbe8b8 0%, #eec978 55%, #c69a46 100%);
  border-color: rgba(166, 124, 50, .4);
}
.ad-banner--teal {
  background: linear-gradient(100deg, #d7f3ee 0%, #8fd9c9 55%, #1a8976 100%);
  border-color: rgba(20, 95, 82, .4);
}
.ad-banner--blue {
  background: linear-gradient(100deg, #dbe8f5 0%, #8fb8e0 55%, #2e547a 100%);
  border-color: rgba(6, 43, 77, .4);
}
.ad-banner--rose {
  background: linear-gradient(100deg, #fbe2e6 0%, #f0a8b8 55%, #c2547a 100%);
  border-color: rgba(150, 60, 90, .4);
}
.ad-banner--edu .ad-banner__disclosure span {
  color: var(--ink-700);
}

/* ---- Wellbeing-products sponsor trio: three compact cards side by side
   (replaces the single full-width Asteria banner). Each card is its own
   independent 3-slide .ad-carousel instance (ad-carousel.js already
   supports multiple roots), with a small dot row overlaid inside that
   card's own bottom edge rather than one shared row below the trio.
   Height matches .ad-banner--lg's min-height so the trio reads at the
   same scale as the single full-width banner it replaced; background is
   flat brand-tint (#edf3f4) on every card instead of the three sponsor
   gradient themes. ---- */
.ad-trio { position: relative; }
.ad-trio__row { display: flex; align-items: stretch; gap: var(--sp-4); }

.ad-carousel--compact { flex: 1; min-width: 0; position: relative; display: flex; }
.ad-carousel--compact .ad-carousel__viewport { flex: 1; display: flex; }
.ad-carousel--compact .ad-carousel__track { flex: 1; }
.ad-carousel--compact .ad-carousel__dots {
  position: absolute;
  left: 50%; bottom: var(--sp-2);
  transform: translateX(-50%);
  z-index: 2;
  margin-top: 0;
  background: rgba(255,255,255,.85);
  border-radius: var(--r-full);
  padding: 5px 9px;
  box-shadow: var(--shadow-1);
}

.ad-banner--compact {
  display: flex;
  flex-direction: column;
  gap: 0;
  flex: 1;
  min-width: 0;
  min-height: 200px;
  padding: var(--sp-5) var(--sp-5) calc(var(--sp-5) + 16px);
  border-radius: var(--r-lg);
  border: 1px solid var(--brand-tint-strong);
  background: var(--brand-tint);
}
.ad-banner--compact .ad-banner__label { display: block; font-size: .5625rem; color: rgba(6,43,77,.6); margin-bottom: 1px; }
.ad-banner--compact .ad-banner__brand-name { display: block; font-size: .6875rem; font-weight: var(--fw-bold); color: var(--ink-900); margin-bottom: 6px; }
.ad-banner--compact h3 { font-size: .8125rem; font-weight: var(--fw-bold); letter-spacing: var(--tracking-tight); line-height: 1.2; color: var(--ink-900); margin-bottom: 2px; }
.ad-banner--compact p { font-size: .6875rem; color: var(--ink-700); line-height: 1.3; margin-bottom: 8px; }
.ad-banner--compact .btn { align-self: center; padding: 5px 12px; font-size: .6875rem; margin-bottom: 6px; }
.ad-banner--compact .ad-banner__fine { display: block; font-size: .5625rem; line-height: 1.3; color: rgba(6,43,77,.55); }

/* ---- Image-only slide variant: card creative is a single pre-designed
   image (own headline/CTA baked in), no HTML text/button overlaid.
   .ad-banner defaults to display:grid (4-column layout for the text
   variant) — override to flex here so the single <img> child stretches
   to fill the card reliably instead of relying on grid's ambiguous
   percentage-height-against-an-auto-row behaviour. ---- */
.ad-banner--image {
  display: flex;
  padding: 0;
  border: none;
  background: none;
  overflow: hidden;
}
.ad-banner--image img {
  width: 100%;
  height: 100%;
  min-height: 200px;
  object-fit: cover;
  object-position: left center;
  display: block;
}

@media (max-width: 900px) {
  .ad-trio__row { flex-direction: column; }
}

/* ---- "Advertising with trust built in" info card: same treatment ---- */
.info-card--tint {
  background: linear-gradient(135deg, #fbe8b8 0%, #eec978 45%, #c69a46 100%);
  /* Client asked (2026-09-04) for this card to stand out with its own border,
     not just the 1px hairline it shares with its 3 siblings via .info-grid's
     gap trick — color pulled from the gradient's own darkest stop so the
     frame reads as part of the same gold treatment, not a new accent. */
  border: 1px solid #c69a46;
}

/* ---- "Upcoming learning" card ---- */
.upcoming-card {
  background: #ffe7c7;
}

/* ==========================================================================
   "Care that travels, works and grows with you" — same card layout/size as
   before (grid, min-height, padding all untouched), just a more elegant
   visual skin: smoother navy-toned overlay instead of flat black, refined
   glass pills, and a richer gradient on the solid card instead of flat navy.
   ========================================================================== */

.feature-card-lg--photo::after {
  background: linear-gradient(190deg, rgba(6, 27, 46, .05) 0%, rgba(6, 27, 46, .55) 55%, rgba(6, 27, 46, .92) 100%);
}
.feature-card-lg--solid {
  /* Was blending leftover hardcoded navy hex with the new teal brand-900 —
     replaced with palette-native stops (sky accent → teal → near-black) so
     this card mixes the new colors instead of navy-to-green. */
  background: linear-gradient(150deg, var(--accent-700) 0%, var(--brand-900) 60%, #052a30 100%);
  position: relative;
}
.feature-card-lg--solid::before {
  content: "";
  position: absolute;
  top: -20%; right: -10%;
  width: 55%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 179, 35, .16) 0%, rgba(255, 179, 35, 0) 70%);
  pointer-events: none;
}
.feature-card-lg__tag {
  background: rgba(255, 179, 35, .18);
  border: 1px solid rgba(255, 179, 35, .38);
  color: #ffe083;
}
.pill-list li {
  background: rgba(255, 255, 255, .10);
  border: 1px solid rgba(255, 255, 255, .28);
  backdrop-filter: blur(6px);
}
.stat-row > div {
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: var(--r-md);
  transition: border-color .2s var(--ease), background-color .2s var(--ease);
}
.stat-row > div:hover {
  background: rgba(255, 179, 35, .10);
  border-color: rgba(255, 179, 35, .35);
}
.feature-card-lg--photo .btn-outline-white:hover {
  background: rgba(255, 179, 35, .14);
  border-color: #ffb323;
}
.feature-card-lg--solid .btn-outline-white:hover {
  background: rgba(255, 255, 255, .10);
}

/* ==========================================================================
   Comparison layout — alternative treatment for "More ways we support you",
   inspired by a banking-app split hero (light photo card + promo card).
   Standalone section, purely for side-by-side comparison against the
   section above it.
   ========================================================================== */

.showcase-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--sp-5);
  align-items: stretch;
  margin-bottom: var(--sp-6);
}
@media (max-width: 900px) {
  .showcase-split { grid-template-columns: minmax(0, 1fr); }
}

/* ---- Left: light card, photo bleeding to the edge ---- */
.showcase-left {
  position: relative;
  min-width: 0;
  background: linear-gradient(160deg, #eef6f4 0%, #dcecea 100%);
  border-radius: var(--r-lg);
  overflow: hidden;
  min-height: 320px;
}
.showcase-left__photo {
  position: absolute;
  right: 0;
  bottom: 0;
  height: 100%;
  width: 58%;
  object-fit: cover;
  object-position: top center;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 18%);
  mask-image: linear-gradient(to right, transparent 0%, #000 18%);
}
.showcase-left__copy {
  position: relative;
  z-index: 1;
  padding: var(--sp-5) var(--sp-6);
  max-width: 330px;
}
.showcase-left__copy .eyebrow { margin-bottom: var(--sp-2); }
.showcase-left__copy h2 {
  font-size: var(--fs-xl);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-tight);
  color: var(--ink-900);
  margin: 0 0 var(--sp-2);
  line-height: var(--lh-tight);
}
.showcase-left__copy > p {
  font-size: var(--fs-sm);
  color: var(--ink-700);
  margin: 0 0 var(--sp-6);
}
.showcase-quicklinks {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  background: var(--white);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-2);
  max-width: 280px;
}
.showcase-quicklink {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-2);
  text-align: center;
  padding: var(--sp-4) var(--sp-3);
  font-size: .75rem;
  font-weight: var(--fw-semibold);
  color: var(--ink-900);
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.showcase-quicklink:nth-child(2n) { border-right: none; }
.showcase-quicklink:nth-child(n+3) { border-bottom: none; }
.showcase-quicklink__icon {
  width: 34px; height: 34px;
  border-radius: 50%;
  background: var(--premium-tint);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--premium-700);
}
.showcase-quicklink__icon svg { width: 16px; height: 16px; }

/* ---- Right: corporate healthcare card (reuses the site's existing
   .feature-card-lg--solid component so it stretches to match the
   International care card's height with no leftover empty space) ---- */
.showcase-right {
  display: flex;
  min-width: 0;
}
.showcase-right .feature-card-lg {
  flex: 1;
  min-height: 0;
}

@media (max-width: 900px) {
  .showcase-left__copy { max-width: none; }
  .showcase-left__photo { position: static; width: 100%; height: 220px; -webkit-mask-image: none; mask-image: none; }
  .showcase-left { display: flex; flex-direction: column-reverse; min-height: 0; }
  .showcase-right { padding-top: var(--sp-6); }
}

/* ---- "Home Healthcare" / "Careers with purpose" cards: match the showcase
   cards above (circular gold icon badge, mint gradient + masked photo bleed)
   instead of the old flat white bordered card. Corner radius stays the
   site-standard var(--r-lg) set in main.css. ---- */
.feature-card-sm {
  position: relative;
  overflow: hidden;
  background: linear-gradient(160deg, #eef6f4 0%, #dcecea 100%);
  border-color: transparent;
}
.feature-card-sm--gold {
  background: linear-gradient(160deg, #fbf3e6 0%, #f3e4c6 100%);
}
.feature-card-sm--gold .feature-card-sm__icon { background: var(--white); }
.feature-card-sm__photo {
  position: absolute;
  right: 0;
  bottom: 0;
  height: 100%;
  width: 42%;
  object-fit: cover;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 35%);
  mask-image: linear-gradient(to right, transparent 0%, #000 35%);
}
.feature-card-sm__icon,
.feature-card-sm > .eyebrow,
.feature-card-sm > b,
.feature-card-sm > p,
.feature-card-sm > ul,
.feature-card-sm > a {
  position: relative;
  z-index: 1;
}
.feature-card-sm > p { max-width: 58%; }
.feature-card-sm__icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--premium-tint);
}
.feature-card-sm__icon svg { color: var(--premium-700); }

@media (max-width: 640px) {
  .feature-card-sm__photo { width: 55%; }
  .feature-card-sm > p { max-width: 100%; }
}

/* ---- Strike-through "was" price for the marketplace product cards, which
   reuse .deal-card but need a discount price the deals section doesn't ---- */
.deal-card__price s {
  font-size: .75rem;
  font-weight: var(--fw-regular);
  color: var(--ink-500);
}

/* ---- Insurance/TPA partner tiles (#insurance-preview) — sits in the same
   6-up .deal-grid used by doctors/marketplace, but there's no product photo
   for an insurer, so this is a compact icon + name tile instead. ---- */
.cover-card {
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--white);
  padding: var(--sp-4);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-1);
  transition: box-shadow .15s var(--ease), border-color .15s var(--ease);
}
.cover-card:hover {
  box-shadow: var(--shadow-hover);
  border-color: var(--line-strong);
}
.cover-card > .cover-card__icon {
  width: 40px;
  height: 40px;
  border-radius: var(--r-md);
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--sp-2);
  font-size: .75rem;
  font-weight: var(--fw-bold);
  letter-spacing: .02em;
}
/* Simple letter-mark badges standing in for each partner's own logo —
   distinct colors so the 6 tiles read as different companies at a glance,
   not the same generic shield repeated six times. */
.cover-card__icon--1 { background: #c9932f; }
.cover-card__icon--2 { background: #0a4550; }
.cover-card__icon--3 { background: var(--brand-700); }
.cover-card__icon--4 { background: #2b6fa8; }
.cover-card__icon--5 { background: #d0631f; }
.cover-card__icon--6 { background: #4a5568; }
.cover-card b { font-size: var(--fs-sm); font-weight: var(--fw-bold); color: var(--ink-900); line-height: var(--lh-snug); }
.cover-card span { font-size: .6875rem; color: var(--ink-500); }

/* Bug found 2026-09-02: .showcase-layout--split's .showcase-left-col has a fixed 48% flex-basis
   (see home-showcase.css) — correct when its .showcase-cards sibling is also showing, but the
   reference CSS never anticipated a real-data page where that sibling might not render at all
   (Offers/Specialists/Products panels each hide their companion grid when there's only 0-1 real
   record — .showcase-cards--3/--4 need >1 to be worth a "more like this" grid). With the sibling
   gone, the left column stayed locked at 48% instead of filling the row, leaving a large empty
   gap — reproduced live with the current sparse dev database (1 offer, 0 doctors, 0 products).
   home.html applies this class via th:classappend exactly when that companion grid won't render. */
.showcase-layout--split .showcase-left-col.showcase-left-col--full { flex: 1 1 100%; }

/* Fallback Mode's "Mockup" tag (see project memory) needs somewhere to sit that doesn't get
   clipped. Found 2026-09-02: placing it inline next to .mini-doc-card__spec looked fine for
   short specialties ("Dentistry") but silently disappeared behind the reference's own
   single-line text-overflow:ellipsis truncation for longer ones ("Cardiology", "Orthopaedics")
   — home-showcase.css's own rule, unmodified here. Overlaying it on the card image instead,
   same corner-badge pattern .mini-offer-card__cat already uses on the offer cards, sidesteps the
   truncation entirely and never depends on how long the real/demo text next to it happens to be. */
.mini-doc-card__media { position: relative; }
.mini-doc-card__mockup-badge {
  position: absolute;
  top: var(--sp-3);
  right: var(--sp-3);
  background: var(--surface);
  color: var(--ink-500);
  font-size: .625rem;
  font-weight: var(--fw-bold);
  padding: 2px 8px;
  border-radius: var(--r-full);
  border: 1px dashed var(--line-strong);
  cursor: help;
}