/* ==========================================================================
   Sticky quote actions ribbon
   A second ribbon sits under the sticky quotation summary (#quoteStickyRibbon)
   and carries the same three actions as the card: Apply Online, Download and
   WhatsApp. Light green, compact, and aligned to the same card columns as the
   summary ribbon above it.
   ========================================================================== */

.quote-actions-ribbon {
  position: fixed;
  /* Pinned to the foot of the visible screen rather than under the summary. */
  top: auto;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 997;
  display: none;
  /* Light green like the summary ribbon, but shaded the other way: a touch
     darker at the foot, and never deeper than the site's normal green. */
  background: linear-gradient(180deg, #e6f4ea 0%, #d2e9dc 52%, #a9d6bd 100%);
  border-top: 1px solid rgba(18, 53, 30, 0.10);
  border-bottom: 1px solid rgba(18, 53, 30, 0.16);
  box-shadow: 0 -8px 20px rgba(15, 51, 40, 0.14);
  pointer-events: auto;
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

.quote-actions-ribbon.is-visible {
  display: block;
}

.quote-actions-ribbon-inner {
  display: flex;
  align-items: center;
  gap: var(--quote-ribbon-gap, 14px);
  padding: 0.35rem 0;
  padding-left: var(--quote-ribbon-side-space, 0px);
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.quote-actions-ribbon-inner::-webkit-scrollbar {
  display: none;
}

.quote-actions-ribbon-item {
  flex: 0 0 var(--quote-ribbon-card-width, 380px);
  /* Outer container, one per card: always on the card's bounds. */
  display: block;
  min-width: 0;
  padding: 0;
  /* The outer container continues the quote card: its surface, its border lines
     down the sides and along the bottom (never across the top), and the same
     rounded bottom corners. */
  background: var(--card-surface, #ffffff);
  border: 0;
  border-left: 2px solid var(--card-border, transparent);
  border-right: 2px solid var(--card-border, transparent);
  border-bottom: 2px solid var(--card-border, transparent);
  border-radius: 0 0 20px 20px;
  box-shadow: 0 6px 16px rgba(18, 53, 36, 0.14);
  box-sizing: border-box;
  box-sizing: border-box;
}

/* Inner container: the three individual tabs. */
.quote-actions-tabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  /* Breathing room between the three tabs and the container around them. */
  gap: 7px;
  width: 100%;
  /* The tabs line up with the card's own inner container. */
  padding: 6px var(--card-inset, 16px) 8px;
  box-sizing: border-box;
}

.quote-actions-ribbon-item button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  height: 32px;
  min-height: 32px;
  padding: 0 0.55rem;
  border-radius: 10px;
  font-size: 0.74rem;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  border: 1px solid transparent;
  transition: filter 0.15s ease, transform 0.15s ease;
}

.quote-actions-ribbon-item button:hover,
.quote-actions-ribbon-item button:focus-visible {
  filter: brightness(1.04);
  transform: translateY(-1px);
  outline: none;
}

.quote-actions-ribbon-item .ribbon-apply-btn {
  background: linear-gradient(180deg, #2ea25c 0%, #1c7a42 100%);
  border-color: rgba(28, 122, 66, 0.5);
  color: #fff;
}

.quote-actions-ribbon-item .ribbon-download-btn {
  background: linear-gradient(180deg, #e8d8a8 0%, #fdf7e5 100%);
  border-color: rgba(190, 145, 20, 0.45);
  color: #70570e;
}

.quote-actions-ribbon-item .ribbon-whatsapp-btn {
  background: linear-gradient(180deg, #cdeeda 0%, #eafbf1 100%);
  border-color: rgba(37, 190, 93, 0.45);
  color: #148341;
}

.quote-actions-ribbon-item .ribbon-apply-btn i,
.quote-actions-ribbon-item .ribbon-download-btn i,
.quote-actions-ribbon-item .ribbon-whatsapp-btn i {
  font-size: 0.8rem;
}

@media (max-width: 720px) {
  /* The actions sit on the very bottom edge of the screen on phones too; the
     band keeps its own safe-area padding, so a notched phone still clears the
     home indicator. Nothing floats over it any more. */
  .quote-actions-ribbon {
    bottom: 0;
  }

  .quote-actions-ribbon-item {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.3rem;
  }

  .quote-actions-ribbon-item button {
    height: 30px;
    min-height: 30px;
    padding: 0 0.35rem;
    font-size: 0.68rem;
  }
}

/* ===== the three actions, one row inside each card's width =====
   Same treatment as the card's own rows: no filled chips, light hairlines
   between the actions, and nothing spilling past the card's edges. */
.quote-actions-ribbon-item {
  gap: 0 !important;
  /* Sides and bottom carry the quote card's own border line; the top stays open
     so the container reads as the foot of the card, not a separate box. */
  border-top: 0 !important;
  border-left: 2px solid var(--card-border, transparent) !important;
  border-right: 2px solid var(--card-border, transparent) !important;
  border-bottom: 2px solid var(--card-border, transparent) !important;
}

.quote-actions-ribbon-item button {
  /* A half-square tab per action: square at the top where it meets the band,
     rounded at the bottom, filled with the card's own colour. */
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.24) 0%, rgba(255, 255, 255, 0) 58%),
    var(--card-accent, var(--quote-ribbon-accent, #1b5e20)) !important;
  border: 0 !important;
  border-radius: 0 0 12px 12px !important;
  box-shadow: none !important;
  height: 42px !important;
  min-height: 42px !important;
  margin: 0 !important;
  color: #ffffff !important;
  font-size: 0.76rem !important;
  font-weight: 700 !important;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.18);
}

.quote-actions-ribbon-item button + button {
  border-left: 1px solid rgba(255, 255, 255, 0.18) !important;
}

.quote-actions-ribbon-item .ribbon-apply-btn {
  color: #ffffff !important;
  font-weight: 800 !important;
}

.quote-actions-ribbon-item .ribbon-download-btn {
  color: #f4e3b2 !important;
}

.quote-actions-ribbon-item .ribbon-whatsapp-btn {
  color: #bdf0d0 !important;
}

.quote-actions-ribbon-item button:hover,
.quote-actions-ribbon-item button:focus-visible {
  background: rgba(255, 255, 255, 0.1) !important;
  transform: none !important;
  filter: none !important;
}

/* ===== carousel arrows: transparent, in the band's empty sides ===== */
/* The lower ribbon carries all three actions (Apply Online, Download,
   WhatsApp), so the quote card no longer repeats them in its own header. The
   buttons stay in the DOM — the ribbon clicks them, and the Apply button is
   also the card's data carrier — they are only taken off the card. */
.provider-card .quote-card-primary-actions[aria-label="Quote actions"] {
  display: none !important;
}

/* ===== upper summary ribbon: light band, insurer-themed badges =====
   The band is a light green so the page reads as one surface with the cards,
   and each badge carries its own insurer's colours — the quote card's surface
   and border colour — with the insurer's logo in place of the old number chip.
   The position chip (Q1, Q2 …) rides beside the member count. */
#quoteStickyRibbon {
  /* Light green throughout, with the top edge a shade deeper so the band reads
     as a gradient rather than a flat strip — never dark. */
  background: linear-gradient(180deg, #d3ead9 0%, #eaf6ee 46%, #f6fbf8 100%) !important;
  border-top: 1px solid rgba(18, 53, 30, 0.10) !important;
  /* A plain hairline along the bottom edge: enough to read as a sticker header
     sitting over the page, without a coloured rule under the badges. */
  border-bottom: 1px solid rgba(18, 53, 30, 0.18) !important;
  box-shadow: 0 6px 18px rgba(15, 51, 40, 0.12) !important;
  /* Kept in the tree (never display:none) so it can arrive the way a cloud does:
     a slow fade in from a slight lift and blur. */
  display: block !important;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  filter: blur(7px) saturate(0.92);
  pointer-events: none;
  transition:
    opacity 0.45s ease,
    transform 0.45s ease,
    filter 0.45s ease,
    visibility 0s linear 0.45s;
}

#quoteStickyRibbon.is-visible {
  display: block !important;
  opacity: 1;
  visibility: visible;
  transform: none;
  filter: none;
  pointer-events: auto;
  transition:
    opacity 0.45s ease,
    transform 0.45s ease,
    filter 0.45s ease,
    visibility 0s linear 0s;
}

#quoteStickyRibbon .quote-ribbon-item {
  background: var(--card-surface, #ffffff) !important;
  border: 2px solid var(--card-border, #1b5e20) !important;
  box-shadow: 0 4px 12px rgba(15, 51, 40, 0.12) !important;
}

#quoteStickyRibbon .quote-ribbon-item + .quote-ribbon-item {
  border-left: 2px solid var(--card-border, #1b5e20) !important;
}

/* The first badge used to be given a white hairline down its left edge (from the
   dark-band era), which vanished on the light band. It wears the insurer's line
   like the rest of them. */
#quoteStickyRibbon .quote-ribbon-item:first-child {
  border-left: 2px solid var(--card-border, #1b5e20) !important;
}

#quoteStickyRibbon .quote-ribbon-item.is-active,
#quoteStickyRibbon .quote-ribbon-item:hover,
#quoteStickyRibbon .quote-ribbon-item:focus,
#quoteStickyRibbon .quote-ribbon-item:active {
  background: var(--card-surface, #ffffff) !important;
  border-color: var(--card-border, #1b5e20) !important;
  filter: brightness(0.985);
}

/* The insurer's mark, on a white plate so every logo reads the same. */
#quoteStickyRibbon .quote-ribbon-logo {
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 10px;
  background: #ffffff;
  border: 1px solid rgba(18, 53, 30, 0.12);
  box-shadow: 0 2px 6px rgba(15, 51, 40, 0.10);
}

#quoteStickyRibbon .quote-ribbon-logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

#quoteStickyRibbon .quote-ribbon-logo-none {
  color: var(--quote-ribbon-accent, #14532d);
  font-size: 0.78rem;
  font-weight: 900;
  letter-spacing: 0.02em;
}

/* Dark text on the light band. */
#quoteStickyRibbon .quote-ribbon-item-provider {
  color: #11301d !important;
}

#quoteStickyRibbon .quote-ribbon-item-plan,
#quoteStickyRibbon .quote-ribbon-item-members {
  color: #55685c !important;
}

#quoteStickyRibbon .quote-ribbon-item-price {
  color: var(--quote-ribbon-accent, #14532d) !important;
}

#quoteStickyRibbon .quote-ribbon-item .quote-ribbon-price-unit,
#quoteStickyRibbon .quote-ribbon-item .quote-ribbon-price-label {
  color: #6d8074 !important;
}

#quoteStickyRibbon .quote-ribbon-item-sep {
  color: rgba(18, 53, 30, 0.28) !important;
}

#quoteStickyRibbon .quote-ribbon-item .ribbon-limit-cell {
  color: #55685c !important;
}

/* The badge's limit icons wear the insurer's colour too, so the card header and
   the badge read as the same object. */
#quoteStickyRibbon .quote-ribbon-item .ribbon-limit-cell i {
  color: var(--quote-ribbon-accent, #8a9a8f) !important;
}

#quoteStickyRibbon .quote-ribbon-item .ribbon-limit-label {
  color: #6d8074 !important;
}

#quoteStickyRibbon .quote-ribbon-item .ribbon-limit-value {
  color: #11301d !important;
}

/* The position chip now rides beside the member count. */
#quoteStickyRibbon .quote-ribbon-item .quote-ribbon-price-wrap {
  /* The member count and the position chip sit centred under the annual
     premium, rather than flushed to the right edge of the badge. */
  align-items: center !important;
  text-align: center !important;
}

#quoteStickyRibbon .quote-ribbon-item-members {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

#quoteStickyRibbon .quote-ribbon-item-number {
  width: auto !important;
  height: 18px !important;
  min-height: 18px !important;
  min-width: 0 !important;
  padding: 0 !important;
  border-radius: 0 !important;
  /* No fill: the position reads as plain text in the same colour as the member
     count beside it. */
  background: transparent !important;
  color: #55685c !important;
  font-size: 0.66rem !important;
  font-weight: 800 !important;
  line-height: 18px !important;
}

/* Arrows on the light band. */
#quoteStickyRibbon .quote-ribbon-arrow {
  color: #14532d;
}

#quoteStickyRibbon .quote-ribbon-arrow:hover,
#quoteStickyRibbon .quote-ribbon-arrow:focus-visible {
  background: rgba(18, 53, 30, 0.10);
}

#quoteStickyRibbon .quote-ribbon-arrow:disabled {
  color: rgba(18, 53, 30, 0.28);
}

/* ===== the quote card header wears the same strip as the badge =====
   Five icon cells — IP, MAT, OP, DEN, OPT — spanning the header, with a solid
   rule under them in the insurer's own line colour. */
/* ===== compact card header, matched to the badge =====
   Tighter logo, type and strip so the card's upper section stands about as tall
   as the sticky badge it mirrors. */
#resultsContainer .provider-card .quotecard-header,
#cardsContainer .provider-card .quotecard-header {
  gap: 0.6rem !important;
  padding-bottom: 6px !important;
  margin-bottom: 6px !important;
}

#resultsContainer .provider-card .quotecard-title,
#cardsContainer .provider-card .quotecard-title {
  gap: 0.4rem !important;
}

#resultsContainer .provider-card .quotecard-title .insurer-logo-badge,
#resultsContainer .provider-card .quotecard-title .provider-embedded-logo,
#cardsContainer .provider-card .quotecard-title .insurer-logo-badge,
#cardsContainer .provider-card .quotecard-title .provider-embedded-logo {
  width: 26px !important;
  height: 26px !important;
}

#resultsContainer .provider-card .quotecard-title .quotecard-insurer,
#cardsContainer .provider-card .quotecard-title .quotecard-insurer {
  font-size: 1rem !important;
  line-height: 1.1 !important;
}

#resultsContainer .provider-card .quotecard-figure .price,
#cardsContainer .provider-card .quotecard-figure .price {
  /* The same size as the insurer name beside it. */
  font-size: 1rem !important;
  line-height: 1.2 !important;
}

#resultsContainer .provider-card .quotecard-figure .quotecard-members,
#resultsContainer .provider-card .quotecard-figure .quote-sequence,
#cardsContainer .provider-card .quotecard-figure .quotecard-members,
#cardsContainer .provider-card .quotecard-figure .quote-sequence {
  font-size: 0.66rem !important;
}

#resultsContainer .provider-card .quotecard-header .quotecard-limits,
#cardsContainer .provider-card .quotecard-header .quotecard-limits {
  margin-top: 4px !important;
  padding-top: 4px !important;
  padding-bottom: 4px !important;
}

#resultsContainer .provider-card .quotecard-limits .quotecard-limit-cell,
#cardsContainer .provider-card .quotecard-limits .quotecard-limit-cell {
  font-size: 0.66rem !important;
}

#resultsContainer .provider-card .quotecard-limits .quotecard-limit-cell i,
#cardsContainer .provider-card .quotecard-limits .quotecard-limit-cell i {
  font-size: 0.68rem !important;
}

/* The plan stays on one line at every width, so it carries its own sizing. */
#resultsContainer .provider-card .quotecard-title .quotecard-plan,
#cardsContainer .provider-card .quotecard-title .quotecard-plan {
  font-size: 0.8rem !important;
  margin-top: 1px !important;
}

@media (max-width: 700px) {
  #resultsContainer .provider-card .quotecard-title .quotecard-plan,
  #cardsContainer .provider-card .quotecard-title .quotecard-plan {
    font-size: 0.72rem !important;
  }
}

@media (max-width: 430px) {
  #resultsContainer .provider-card .quotecard-title .quotecard-plan,
  #cardsContainer .provider-card .quotecard-title .quotecard-plan {
    font-size: 0.62rem !important;
    letter-spacing: -0.05em !important;
  }
}

/* The annual premium uses the badge's own accent, and the insurer name the
   badge's heading colour, so header and badge read as one. */
.provider-card .quotecard-figure .price {
  color: var(--quote-ribbon-accent, var(--accent-red)) !important;
}

.provider-card .quotecard-figure .price small {
  color: #6d8074 !important;
}

.provider-card .quotecard-title .quotecard-insurer {
  color: #11301d !important;
}

/* The member count and the quote number sit centred under the premium, as a
   pair on one line, instead of being spread to the two edges. These selectors
   match the id-scoped two-line rule in partner-showcase.css — this sheet loads
   later, so the centred layout wins. */
#resultsContainer .provider-card .quotecard-figure,
#cardsContainer .provider-card .quotecard-figure {
  /* Premium on its own line, flushed right; the headcount and the quote number
     run together on the next line, centred. They are inline so the dot between
     them is a normal space rather than a column gap. */
  display: block !important;
  text-align: center !important;
}

#resultsContainer .provider-card .quotecard-figure .price,
#cardsContainer .provider-card .quotecard-figure .price {
  display: block !important;
  text-align: right !important;
  margin: 0 !important;
}

#resultsContainer .provider-card .quotecard-figure .quotecard-members,
#cardsContainer .provider-card .quotecard-figure .quotecard-members,
#resultsContainer .provider-card .quotecard-figure .quote-sequence,
#cardsContainer .provider-card .quotecard-figure .quote-sequence {
  display: inline !important;
  margin: 0 !important;
}

.provider-card .quotecard-header .quotecard-limits {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 6px;
  margin-top: 0.5rem;
  /* Bleed past the card's padding so the rule under the icons reaches both
     edges of the card, while the cells stay on the card's text column. */
  margin-left: calc(-1 * var(--quotecard-bleed, 16px));
  margin-right: calc(-1 * var(--quotecard-bleed, 16px));
  padding: 7px var(--quotecard-bleed, 16px) 6px;
  border-top: 1px dashed rgba(18, 53, 30, 0.16);
  border-bottom: 2px solid var(--quotecard-line, rgba(18, 53, 30, 0.4));
}

.provider-card .quotecard-limits .quotecard-limit-cell {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-width: 0;
  font-size: 0.7rem;
  font-weight: 600;
  color: #55685c;
  white-space: nowrap;
}

.provider-card .quotecard-limits .quotecard-limit-cell i {
  /* The icons take the insurer's theme colour, like the badge. */
  color: var(--quote-ribbon-accent, #8a9a8f) !important;
  font-size: 0.72rem;
}

.provider-card .quotecard-limits .quotecard-limit-label {
  color: #6d8074;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.provider-card .quotecard-limits .quotecard-limit-value {
  color: #11301d;
  font-weight: 800;
}

/* ===== the card's own actions: Apply leads, the rest stay quiet ===== */
.provider-card .cover-card-secondary-actions .apply-at-bottom-btn {
  background: linear-gradient(180deg, #33b06a 0%, #1a7a44 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.30) !important;
  color: #ffffff !important;
  font-weight: 800 !important;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.14);
  box-shadow: 0 8px 18px rgba(18, 127, 70, 0.30), inset 0 1px 0 rgba(255, 255, 255, 0.32) !important;
}

/* The three secondary actions carry their own colours: warm gold for the
   download, a cool blue for the provider list, and green for the examination
   form — all soft, so Apply is still the loudest button in the row. */
.provider-card .cover-card-secondary-actions .download-pack-btn {
  background: linear-gradient(180deg, #fffaf0 0%, #fdf1d6 100%) !important;
  border: 1px solid rgba(190, 145, 20, 0.40) !important;
  color: #70570e !important;
  font-weight: 700 !important;
  box-shadow: 0 4px 10px rgba(200, 151, 14, 0.12) !important;
  text-shadow: none !important;
}

.provider-card .cover-card-secondary-actions .view-provider-network-btn {
  background: linear-gradient(180deg, #f3f9ff 0%, #e2edfb 100%) !important;
  border: 1px solid rgba(22, 76, 148, 0.30) !important;
  color: #16477f !important;
  font-weight: 700 !important;
  box-shadow: 0 4px 10px rgba(22, 76, 148, 0.12) !important;
  text-shadow: none !important;
}

.provider-card .cover-card-secondary-actions .download-exam-btn {
  background: linear-gradient(180deg, #f0fbf5 0%, #dcf3e5 100%) !important;
  border: 1px solid rgba(23, 122, 74, 0.30) !important;
  color: #14603a !important;
  font-weight: 700 !important;
  box-shadow: 0 4px 10px rgba(23, 122, 74, 0.12) !important;
  text-shadow: none !important;
}

.provider-card .cover-card-secondary-actions .download-pack-btn i {
  color: #b8860b !important;
}

.provider-card .cover-card-secondary-actions .view-provider-network-btn i {
  color: #1f5da8 !important;
}

.provider-card .cover-card-secondary-actions .download-exam-btn i {
  color: #1c8a53 !important;
}

/* ===== plan name on one line =====
/* ===== benefits that are not on the quote read grey =====
   The whole line goes grey — the label as well as the value — so the selected
   benefits are the only lines in the card's own colour. */
.provider-card .limit-row-off,
.provider-card .limit-row-off strong,
.provider-card .limit-row-off .limit-not-selected,
.provider-card .benefit-row-off,
.provider-card .benefit-row-off .benefit-row-label,
.provider-card .benefit-row-off .benefit-row-value {
  color: #9aa6ad !important;
  font-weight: 600 !important;
}

.provider-card .limit-not-selected {
  color: #9aa6ad !important;
  font-weight: 600 !important;
}

.provider-card .benefit-section-status.not-selected {
  background: #f1f3f5 !important;
  border-color: #d7dde1 !important;
  color: #7c8891 !important;
}

/* The card header's five limit cells: unselected ones fade to grey. */
.provider-card .quotecard-limits .quotecard-limit-cell.is-off,
.provider-card .quotecard-limits .quotecard-limit-cell.is-off i,
.provider-card .quotecard-limits .quotecard-limit-cell.is-off .quotecard-limit-label,
.provider-card .quotecard-limits .quotecard-limit-cell.is-off .quotecard-limit-value {
  color: #a7b1b7 !important;
}

/* ===== plan name on one line =====
   The plan under the insurer's name keeps to a single line: it is set a little
   smaller, tightened, and only clipped as a last resort on the narrowest
   phones. */
.provider-card .quotecard-title .quotecard-plan {
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  font-size: 0.86rem !important;
  letter-spacing: -0.01em !important;
  max-width: 100% !important;
}

@media (max-width: 700px) {
  .provider-card .quotecard-title .quotecard-plan {
    font-size: 0.76rem !important;
    letter-spacing: -0.02em !important;
  }
}

@media (max-width: 430px) {
  .provider-card .quotecard-title .quotecard-plan {
    font-size: 0.62rem !important;
    letter-spacing: -0.04em !important;
  }
}

@media (max-width: 520px) {
  .provider-card .quotecard-header .quotecard-limits {
    gap: 3px;
    /* Keep the side padding the bleed needs, or the cells would slide under the
       card's edge while the rule still reaches it. */
    padding: 6px var(--quotecard-bleed, 14px) 5px;
  }

  .provider-card .quotecard-limits .quotecard-limit-cell {
    gap: 3px;
    font-size: 0.62rem;
  }

  .provider-card .quotecard-limits .quotecard-limit-cell i {
    font-size: 0.64rem;
  }
}

/* ===== the results heading: centred above the cards, and dressed up =====
   Title, count and the age/member summary stack in the middle of a soft panel,
   with the jump-to-quote pills centred under them. */
#resultsContainer .results-header {
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  gap: 9px !important;
  margin: 0 auto 12px !important;
  padding: 14px 20px 13px !important;
  border-radius: 18px !important;
  background: linear-gradient(180deg, #f8fcf9 0%, #ecf7f0 100%) !important;
  border: 1px solid rgba(18, 53, 30, 0.10) !important;
  box-shadow: 0 10px 24px rgba(15, 51, 40, 0.08) !important;
}

#resultsContainer .results-header h2 {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-wrap: wrap !important;
  gap: 0.5rem !important;
  margin: 0 !important;
  font-size: 1.32rem !important;
  line-height: 1.2 !important;
  letter-spacing: -0.01em !important;
}

#resultsContainer .results-header h2 i {
  color: #d5a72a !important;
  font-size: 1.02rem !important;
}

#resultsContainer .results-header .badge-count {
  padding: 0.2rem 0.85rem !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: linear-gradient(180deg, #1f7a4a 0%, #14603a 100%) !important;
  color: #ffffff !important;
  font-size: 0.72rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.02em !important;
  box-shadow: 0 4px 10px rgba(18, 127, 70, 0.22) !important;
}

#resultsContainer .results-header #resultSummary {
  display: inline-flex !important;
  align-items: center !important;
  width: auto !important;
  max-width: 100% !important;
  padding: 0.24rem 0.9rem !important;
  border: 1px solid rgba(18, 53, 30, 0.12) !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.9) !important;
  color: #3f5b4b !important;
  font-size: 0.72rem !important;
  font-weight: 600 !important;
  box-shadow: none !important;
}

/* The pipes in the third line read as dividers rather than punctuation. */
#resultsContainer .results-header #resultSummary {
  letter-spacing: 0.01em !important;
}

#resultsContainer .results-header .results-stats {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
}

/* ===== the results section before any quote =====
   It stands from page load carrying the heading and the disclaimer; the count,
   the headcount chip and everything below them wait for the quotes. */
#resultsContainer {
  display: block !important;
}

#resultsContainer:not(.visible) .results-stats,
#resultsContainer:not(.visible) #resultSummary,
#resultsContainer:not(.visible) .quote-carousel-shell,
#resultsContainer:not(.visible) .quote-carousel-status,
#resultsContainer:not(.visible) #quoteTableComparison,
#resultsContainer:not(.visible) .premium-disclaimer,
#resultsContainer:not(.visible) #quoteStickyRibbon,
#resultsContainer:not(.visible) #quoteActionsRibbon {
  display: none !important;
}

#resultsContainer .results-disclaimer {
  display: block !important;
  margin: 2px 0 0 !important;
  color: #6d8074 !important;
  font-size: 0.74rem !important;
  font-style: italic !important;
  text-align: center !important;
}

/* Once quotes exist the count and the headcount chip take that slot. */
#resultsContainer.visible .results-disclaimer {
  display: none !important;
}

/* The quote pills sit centred under the panel. */
@media (max-width: 700px) {
  /* The dot between the title and the count would be left dangling on its own
     line once the title wraps. */
  #resultsContainer .results-header h2 > span[aria-hidden="true"] {
    display: none !important;
  }

  #resultsContainer .results-header h2 {
    font-size: 1.14rem !important;
  }

  /* The pills scroll sideways on a phone, so they start from the left — a
     centred row would push the first quotes out of reach. */
  #resultsContainer .quote-number-nav {
    justify-content: flex-start !important;
    padding-left: 2px !important;
  }
}

#resultsContainer .quote-number-nav {
  justify-content: center !important;
  gap: 7px !important;
  margin: 0 auto 16px !important;
}

#resultsContainer .quote-number-btn {
  min-width: 0 !important;
  height: 32px !important;
  padding: 0 14px !important;
  border: 1px solid rgba(18, 53, 30, 0.16) !important;
  border-radius: 999px !important;
  background: linear-gradient(180deg, #ffffff 0%, #f2f8f4 100%) !important;
  color: #2f5442 !important;
  font-size: 0.68rem !important;
  font-weight: 800 !important;
  box-shadow: 0 3px 8px rgba(15, 51, 40, 0.06) !important;
  transition: transform 0.15s ease, box-shadow 0.15s ease !important;
}

#resultsContainer .quote-number-btn:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 6px 14px rgba(15, 51, 40, 0.12) !important;
}

#resultsContainer .quote-number-btn.is-active {
  background: linear-gradient(180deg, #2ea25c 0%, #1a7a44 100%) !important;
  border-color: rgba(255, 255, 255, 0.35) !important;
  color: #ffffff !important;
  box-shadow: 0 6px 16px rgba(18, 127, 70, 0.28) !important;
}

@media (max-width: 700px) {
  /* After the centred rule above, so it wins on phones: a scrolling row must
     start at the left or the first quotes sit out of reach. */
  #resultsContainer .quote-number-nav {
    justify-content: flex-start !important;
  }
}

/* ===== scroll landing: never park content under the sticky bands =====
   Jumping to the quotes used to put the results container at the top of the
   viewport, where the header and the summary ribbon covered the first card's
   "Cover Limits" panel. The results and the cards now keep the stacked height
   as scroll margin, so they land clear of both bands. */
:root {
  --quote-sticky-stack: 212px;
}

html {
  scroll-behavior: smooth !important;
  scroll-padding-top: var(--quote-sticky-stack) !important;
  /* The lower actions band is fixed over the foot of the screen, so whatever the
     page scrolls to also has to clear it. */
  scroll-padding-bottom: calc(var(--quote-actions-clearance, 0px) + 10px) !important;
}

#resultsContainer {
  /* The sticky stack comes from html's scroll-padding; this is just the little
     gap under it. Adding both to the element double-counts the offset. */
  scroll-margin-top: 12px !important;
}

.provider-card,
#quoteNumberNav {
  scroll-margin-top: 12px;
}

/* Room at the bottom of the quote results for the actions band. */
#resultsContainer {
  padding-bottom: calc(var(--quote-actions-clearance, 0px) + 10px);
}

html.quote-actions-visible #quoteCarouselShell .quote-carousel-arrow {
  position: fixed !important;
  top: auto !important;
  transform: none !important;
  bottom: calc(var(--quote-actions-bottom, 0px) + (var(--quote-actions-height, 45px) - 36px) / 2) !important;
  width: 36px !important;
  height: 36px !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  /* Dark arrows, since the band under them is light green now. */
  color: #14532d !important;
  font-size: 1rem !important;
  z-index: 1008 !important;
}

html.quote-actions-visible #quoteCarouselShell .quote-carousel-prev {
  left: var(--quote-arrow-inset-left, 12px) !important;
  right: auto !important;
}

html.quote-actions-visible #quoteCarouselShell .quote-carousel-next {
  right: var(--quote-arrow-inset-right, 12px) !important;
  left: auto !important;
}

html.quote-actions-visible #quoteCarouselShell .quote-carousel-arrow:not(:disabled):hover {
  background: rgba(18, 53, 30, 0.12) !important;
  border-radius: 10px !important;
  color: #0f3a22 !important;
}

html.quote-actions-visible #quoteCarouselShell .quote-carousel-arrow.is-end-stop,
html.quote-actions-visible #quoteCarouselShell .quote-carousel-arrow:disabled {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  color: rgba(18, 53, 30, 0.30) !important;
  opacity: 0.6 !important;
}

@media (max-width: 720px) {
  /* The band's paging arrows sit on the edges of the screen on phones too - they
     used to start after the old assistant tab, which pushed the left one onto
     the first card's Apply Online. */
  html.quote-actions-visible #quoteCarouselShell .quote-carousel-prev {
    left: 4px !important;
  }
  html.quote-actions-visible #quoteCarouselShell .quote-carousel-next {
    right: 4px !important;
  }
}

/* ===== arrows on the summary ribbon, and click-to-page margins ===== */
.quote-sticky-ribbon {
  position: relative;
}

/* ===== the card's own upper section frosts over while the badge covers it =====
   The badge lands on the card's header row, so that row softens as the badge
   swallows it — the two read as one surface and the badge stays legible.
   --quote-head-veil runs 0 to 1 with how much of the row is covered. */
.provider-card .quotecard-header {
  transition: filter 0.35s ease, opacity 0.35s ease;
}
html.quote-card-head-covered .provider-card .quotecard-header {
  filter: blur(calc(var(--quote-head-veil, 0) * 7px)) saturate(0.96);
  opacity: calc(1 - var(--quote-head-veil, 0) * 0.5);
}
@media (prefers-reduced-motion: reduce) {
  .provider-card .quotecard-header { transition: none; }
}

.quote-ribbon-arrows {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* Same treatment as the band below: arrows centred in the side margins. */
  padding-left: var(--quote-arrow-inset-left, 10px);
  padding-right: var(--quote-arrow-inset-right, 10px);
  pointer-events: none;
  z-index: 4;
}

.quote-ribbon-arrow {
  pointer-events: auto;
  width: 36px;
  height: 36px;
  margin: 0;
  display: grid;
  place-items: center;
  background: transparent;
  border: 0;
  border-radius: 10px;
  color: rgba(255, 255, 255, 0.92);
  font-size: 1rem;
  cursor: pointer;
}

.quote-ribbon-arrow:hover,
.quote-ribbon-arrow:focus-visible {
  background: rgba(255, 255, 255, 0.14);
  outline: none;
}

.quote-ribbon-arrow:disabled {
  color: rgba(255, 255, 255, 0.34);
  background: transparent;
  cursor: default;
}

/* The empty margins beside the cards: invisible, but they page the carousel. */
.quote-ribbon-page {
  position: absolute;
  top: 0;
  bottom: 0;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  z-index: 3;
}

.quote-ribbon-page-left {
  left: 0;
}

.quote-ribbon-page-right {
  right: 0;
}

.quote-ribbon-page:disabled {
  cursor: default;
}

/* The band at the foot of the screen carries the same page targets. */
.quote-actions-ribbon .quote-ribbon-page {
  z-index: 2;
}

/* ===== the paging arrows live on the page, not inside the band =====
   They stay on screen for as long as the cards are — including while the
   summary band is away — and sit on the line the cards' upper section occupies. */
.quote-floating-arrows {
  position: fixed;
  left: 0;
  right: 0;
  top: var(--quote-floating-arrows-top, 136px);
  height: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-left: var(--quote-arrow-inset-left, 12px);
  padding-right: var(--quote-arrow-inset-right, 12px);
  pointer-events: none;
  z-index: 1006;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.16s ease;
}

.quote-floating-arrows.is-visible {
  opacity: 1;
  visibility: visible;
}

.quote-floating-arrows .quote-ribbon-arrow {
  pointer-events: auto;
  /* Transparent: just the chevron over whatever is behind it. */
  color: #14532d;
  background: transparent;
  border: 0;
  box-shadow: none;
}

.quote-floating-arrows .quote-ribbon-arrow:hover,
.quote-floating-arrows .quote-ribbon-arrow:focus-visible {
  background: rgba(18, 53, 30, 0.10);
  color: #0f3a22;
}

.quote-floating-arrows .quote-ribbon-arrow:disabled {
  color: rgba(18, 53, 30, 0.28);
  background: transparent;
  box-shadow: none;
  /* At either end of the list the pointer turns into a crossed circle, so it is
     obvious there is nothing further that way. */
  cursor: not-allowed;
}

/* The pair on the band's own margins behaves the same way. */
.quote-ribbon-arrow:disabled {
  cursor: not-allowed;
}

/* The carousel's own arrows — the pair that rides the upper ribbon's line when
   the band is away, and the band's sides when it is up — show the same crossed
   circle once they run out of quotes. */
.quote-carousel-arrow:disabled,
.quote-carousel-arrow.is-end-stop {
  cursor: not-allowed !important;
}

/* ===== the quote's position (Q1, Q2 …) in the card's theme colour ===== */
/* A benefit row can carry the brochure's own explanation beneath it. */
.provider-card .benefit-row {
  flex-wrap: wrap !important;
}

/* The label takes the slack so the figure stays on the same line as it, and the
   explanation drops to the line below. */
.provider-card .benefit-row-label {
  /* Basis 0, so a long label wraps inside its own column instead of pushing the
     figure down to the next line. */
  flex: 1 1 0;
  min-width: 0;
}

.provider-card .benefit-row-value {
  flex: 0 0 auto;
}

.provider-card .benefit-row-note {
  flex: 0 0 100%;
  margin: 2px 0 6px;
  color: #7b8794;
  font-size: 0.68rem;
  font-weight: 400;
  line-height: 1.35;
  text-align: left;
  white-space: normal;
}

.provider-card .quotecard-figure .quote-sequence {
  color: var(--card-accent, var(--quote-ribbon-accent, #14532d)) !important;
  font-weight: 800 !important;
}

.provider-card .quotecard-figure .quote-sequence::before {
  color: var(--card-accent, var(--quote-ribbon-accent, #14532d)) !important;
  opacity: 0.72;
}

/* ===== the hero: less empty space at its foot, closed with a gold rule =====
   The base sheet leaves 5rem of padding under the hero and pulls the next
   section up over it; the padding is trimmed and the overlap removed so the
   thick gold line sits on the hero's real edge. */
#hero {
  padding-bottom: 1.5rem !important;
  margin-bottom: 0 !important;
  border-bottom: 6px solid #d5a72a !important;
}

body[data-mobile="true"] #hero {
  padding-bottom: 1.2rem !important;
  border-bottom-width: 5px !important;
}

@media (max-width: 720px) {
  /* The paging arrows sit on the edges of the screen on phones too: the pair
     used to be pushed inward to clear the old assistant tab, which put the left
     one on top of the quote card. */
  .quote-floating-arrows .quote-ribbon-arrow:first-child {
    margin-left: 0 !important;
  }
  .quote-floating-arrows {
    padding-left: 4px !important;
    padding-right: 4px !important;
  }
}

/* ===== lower ribbon: vibrant themed tabs, plates flush with the top edge =====
   Each plate carries a line along its top and is lifted so that line sits on the
   ribbon's upper edge, aligning the card's column with the band above it. */
.quote-actions-ribbon-inner {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  align-items: flex-start !important;
}

.quote-actions-ribbon-item {
  border-top: 2px solid var(--card-border, transparent) !important;
  border-radius: 0 0 20px 20px !important;
}

/* Vibrant theme fills: a bright green lead, gold for the pack, WhatsApp green
   for the enquiry — all glossed, none of them dark. */
.quote-actions-ribbon-item button {
  border-radius: 0 0 12px 12px !important;
  text-shadow: none !important;
}

.quote-actions-ribbon-item .ribbon-apply-btn {
  background: linear-gradient(180deg, #63e39a 0%, #2fbc68 48%, #16894a 100%) !important;
  border: 0 !important;
  color: #ffffff !important;
  font-size: 0.84rem !important;
  font-weight: 900 !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.65), 0 0 0 2px rgba(213, 167, 42, 0.65), 0 6px 16px rgba(18, 127, 70, 0.34) !important;
}

.quote-actions-ribbon-item .ribbon-download-btn {
  background: linear-gradient(180deg, #ffe9a0 0%, #fbcf4e 48%, #e0a417 100%) !important;
  border: 0 !important;
  color: #6d4f04 !important;
  font-weight: 800 !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75), 0 5px 14px rgba(200, 151, 14, 0.30) !important;
}

.quote-actions-ribbon-item .ribbon-whatsapp-btn {
  background: linear-gradient(180deg, #9bf3c1 0%, #45dd8b 48%, #17a95d 100%) !important;
  border: 0 !important;
  color: #0a3a20 !important;
  font-weight: 800 !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.62), 0 5px 14px rgba(37, 211, 102, 0.30) !important;
}

.quote-actions-ribbon-item .ribbon-apply-btn i,
.quote-actions-ribbon-item .ribbon-download-btn i,
.quote-actions-ribbon-item .ribbon-whatsapp-btn i {
  color: currentColor !important;
}

/* ===== the tabs wear the card's own theme colours =====
   Apply Online takes the insurer's colour as a vibrant glossed fill; the other
   two sit on the card's surface with the insurer's line and text, so the whole
   row is themed rather than brand green and gold. */
.quote-actions-ribbon-item .ribbon-apply-btn {
  background:
    /* One flat theme colour, only shaded darker towards the foot — no pale band
       at the top, so nothing shows between the edge and the fill. */
    linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.05) 100%),
    var(--card-border, var(--card-accent, #1b5e20)) !important;
  filter: none !important;
  /* Thin edge in the very same colour as the fill, so it reads as one shape. */
  border: 1px solid var(--card-border, var(--card-accent, #1b5e20)) !important;
  color: #ffffff !important;
  /* Sized and weighted exactly like Download — the fill is what makes it the
     lead button, not bigger type. */
  font-size: 0.76rem !important;
  font-weight: 800 !important;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.20) !important;
  /* No inset highlight: that was the white line just inside the edge. */
  box-shadow: 0 5px 14px rgba(15, 51, 40, 0.16) !important;
}

/* On hover the label takes the theme colour — the fill steps back to the card's
   surface so the themed text stays readable. */
.quote-actions-ribbon-item .ribbon-apply-btn:hover,
.quote-actions-ribbon-item .ribbon-apply-btn:focus-visible {
  background: var(--card-surface, #ffffff) !important;
  color: var(--card-accent, var(--quote-ribbon-accent, #1b5e20)) !important;
  filter: none !important;
  text-shadow: none !important;
}

.quote-actions-ribbon-item .ribbon-download-btn,
.quote-actions-ribbon-item .ribbon-whatsapp-btn {
  /* The card's own theme background, defined by its line colour, with the
     insurer's colour for the label and icon. */
  background: var(--card-surface, #ffffff) !important;
  border: 1px solid var(--card-border, rgba(18, 53, 30, 0.22)) !important;
  color: var(--card-accent, var(--quote-ribbon-accent, #14532d)) !important;
  font-weight: 800 !important;
  text-shadow: none !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.75),
    0 4px 10px rgba(15, 51, 40, 0.12) !important;
}

/* ===== phones: the whole menu, then the contacts on two lines =====
   The header stacks instead of squeezing everything onto one row: logo, then
   the same menu the desktop shows (Quote & Apply, Pay, Hospitals, Guide,
   Contact), then the ways to reach the agency — the phone number and WhatsApp
   side by side, email on the line below. Nothing is hidden behind a burger. */
@media (max-width: 700px) {
  body[data-mobile="true"] header .header-content {
    display: flex !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
  }
  body[data-mobile="true"] header .header-logo-wrapper {
    order: 1 !important;
    width: 100% !important;
    justify-content: center !important;
  }
  body[data-mobile="true"] header nav {
    order: 2 !important;
    width: 100% !important;
  }
  body[data-mobile="true"] header .nav-links {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 0.15rem 0.45rem !important;
    width: 100% !important;
  }
  /* `li a` so this beats the heavier weight the phone sheets set on the home
     page: at 800 the labels grow enough to push the menu onto a second row. */
  body[data-mobile="true"] header .nav-links li a {
    font-size: 0.74rem !important;
    font-weight: 600 !important;
    letter-spacing: normal !important;
    padding: 0.2rem 0.1rem !important;
    white-space: nowrap !important;
  }
  body[data-mobile="true"] header .nav-cta {
    order: 3 !important;
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 5px !important;
    width: min(100%, 430px) !important;
    margin: 2px auto 0 !important;
    padding: 0 !important;
  }
  /* Number, WhatsApp and email ride on one line, whatever the phone width. */
  body[data-mobile="true"] header .nav-cta > .phone {
    order: 1 !important;
    grid-column: 1 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.28rem !important;
    width: 100% !important;
    height: 32px !important;
    min-width: 0 !important;
    padding: 0 0.3rem !important;
    border-radius: 999px !important;
    background: #174f3d !important;
    color: #ffffff !important;
    font-size: 0.66rem !important;
    font-weight: 700 !important;
    white-space: nowrap !important;
  }
  body[data-mobile="true"] header .nav-cta > .phone i,
  body[data-mobile="true"] header .nav-cta > .nav-icon-btn i {
    font-size: 0.74rem !important;
    margin: 0 !important;
  }
  body[data-mobile="true"] header .nav-cta > .nav-icon-btn.wa {
    order: 2 !important;
    grid-column: 2 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.28rem !important;
    width: 100% !important;
    height: 32px !important;
    padding: 0 0.3rem !important;
    border-radius: 999px !important;
    border: 1px solid #25d366 !important;
    background: #eafaf0 !important;
    color: #128c4a !important;
    font-size: 0.66rem !important;
    font-weight: 700 !important;
  }
  body[data-mobile="true"] header .nav-cta > .nav-icon-btn:not(.wa) {
    order: 3 !important;
    grid-column: 3 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.28rem !important;
    width: 100% !important;
    height: 32px !important;
    padding: 0 0.3rem !important;
    border-radius: 999px !important;
    border: 1px solid #d1d9e6 !important;
    background: #ffffff !important;
    color: #2e7d32 !important;
    font-size: 0.66rem !important;
    font-weight: 700 !important;
  }
  /* The two circles are icon-only on desktop; on phones they say what they are. */
  body[data-mobile="true"] header .nav-cta > .nav-icon-btn.wa::after {
    content: "WhatsApp";
  }
  body[data-mobile="true"] header .nav-cta > .nav-icon-btn:not(.wa)::after {
    content: "Email";
  }
}

/* Very narrow phones: tighten the same single line rather than wrapping it. */
@media (max-width: 360px) {
  body[data-mobile="true"] header .nav-cta {
    gap: 3px !important;
  }
  body[data-mobile="true"] header .nav-cta > .phone,
  body[data-mobile="true"] header .nav-cta > .nav-icon-btn {
    font-size: 0.6rem !important;
    padding: 0 0.2rem !important;
  }
}

/* ===== the phone menu spells the labels out =====
   Desktop keeps the short "Contact"; phones read "Contact Us". "Pay Insurer" is
   the same wording on both. */
.nav-label-mobile { display: none; }
@media (max-width: 700px) {
  .nav-label-mobile { display: inline; }
}

/* ===== phones: benefit selectors two to a line =====
   Inpatient sits with Maternity, and Outpatient with the combined Dental +
   Optical control, so the optional-benefit step stays short. Each cell keeps its
   own label and its scope ("selector type") underneath. The pairing itself is
   done by js/dental-optical-mobile.js, which only runs on phones. */
/* ===== the hero insurer strip belongs to the phone hero only =====
   The desktop hero already names the insurers in the line under the headline, so
   the strip of logos stays off there; below the tablet breakpoint it is shown. */
.hero-insurer-grid { display: none; }
body[data-mobile="true"] .hero-insurer-grid { display: flex; }

@media (max-width: 700px) {
  /* One selector a row: [icon][selector | type]. js/dental-optical-mobile.js
     writes the row itself with priority; these rules carry the shared look. */
  body.mobility-selectors #quote-form .optional-benefit-row {
    display: block !important;
    margin: 0 0 6px !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
  }
  body.mobility-selectors .benefit-selector-icon {
    color: #1b5e20 !important;
  }
  body.mobility-selectors #quote-form .benefit-row-note { display: none !important; }

  /* Each row reads as one capsule: the icon sits in the rounded left end, the
     type control in the rounded right end, and the limit fills the middle, with
     hairline dividers instead of three separate boxes. */
  body.mobility-selectors #quote-form .optional-benefit-row .form-group,
  body.mobility-selectors #quote-form .inpatient-card {
    background: #ffffff !important;
    border: 1px solid #d9e0e8 !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    padding: 0 !important;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04) !important;
  }
  body.mobility-selectors #quote-form .optional-benefit-row select,
  body.mobility-selectors #quote-form .inpatient-card select {
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }
  body.mobility-selectors #quote-form .benefit-selector-icon {
    background: #f3f8f4 !important;
    border-right: 1px solid #e5eaf0 !important;
    border-radius: 0 !important;
  }
  body.mobility-selectors #quote-form .mobility-type-select,
  body.mobility-selectors #quote-form #inpatientScopeSelect,
  body.mobility-selectors #quote-form #maternityNote,
  body.mobility-selectors #quote-form #outpatientScopeSelect {
    border-left: 1px solid #e5eaf0 !important;
  }
  /* The chosen Inpatient limit carries its own green box from the required-cue
     sheet; inside the capsule it would add a second rounded corner on the left,
     so the capsule supplies the shape and the select stays flat. */
  body.mobility-selectors #quote-form #inpatientLimit,
  body.mobility-selectors #quote-form #inpatientLimit.has-selection {
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: #14532d !important;
  }
  /* A chosen benefit wears the site's light green, so the form shows at a glance
     what the quotation includes. */
  body.mobility-selectors #quote-form .optional-benefit-row .is-chosen,
  body.mobility-selectors #quote-form .is-chosen {
    background: linear-gradient(180deg, #eff9f2 0%, #e1f3e7 100%) !important;
    border-color: #8fd0a8 !important;
  }
  body.mobility-selectors #quote-form .is-chosen .benefit-selector-icon {
    background: #d6efdf !important;
    border-right-color: #b7e0c6 !important;
  }
  body.mobility-selectors #quote-form .is-chosen select {
    background: transparent !important;
    color: #14532d !important;
    font-weight: 800 !important;
  }
}

/* ===== the results section sits on the light green surface =====
   The whole quotation area - heading, cards and the comparison table - wears the
   same soft green as the header band, so it reads as one section on phones and
   on desktop. */
#resultsContainer {
  /* The band runs edge to edge: the container keeps its own width for the
     content, while the background is spread across the viewport with the
     full-bleed shadow, so no dark page shows beside the cards. */
  background: #f1f8f1 !important;
  box-shadow: 0 0 0 100vmax #f1f8f1 !important;
  clip-path: inset(0 -100vmax) !important;
  border-top: 1px solid #dfeade !important;
  border-bottom: 1px solid #dfeade !important;
  border-radius: 0 !important;
  padding: 1.1rem 1.15rem 1.4rem !important;
}

@media (max-width: 700px) {
  #resultsContainer {
    padding: 0.9rem 0.85rem 1.2rem !important;
  }
}

/* ===== the Quote & Apply item keeps its gold outline =====
   It is the page's primary action, so the outline stays on it while the
   scroll-spy moves the active state around the rest of the menu. */
header .nav-links > li:first-child > a,
header .nav-links > li > a[href$="#quote-form"] {
  border: 1px solid var(--accent-gold, #d4af37) !important;
  border-radius: 10px !important;
}

/* ===== phone cards: a smaller, tighter type scale =====
   The benefit labels come straight from the brochures and are long, so on a
   phone they wrapped into towers of text. One notch down on the type, with
   tighter leading, keeps a label to two or three lines and the figure on its
   own line beside it. */
@media (max-width: 700px) {
  body.mobility-selectors #resultsContainer .provider-card .benefit-row-label,
  body.mobility-selectors #resultsContainer .provider-card .benefit-row-value {
    font-size: 10.5px !important;
    line-height: 1.32 !important;
  }
  body.mobility-selectors #resultsContainer .provider-card .benefit-row-value {
    font-weight: 750 !important;
    margin-left: 8px !important;
  }
  body.mobility-selectors #resultsContainer .provider-card .premium-breakdown,
  body.mobility-selectors #resultsContainer .provider-card .cover-limit-list,
  body.mobility-selectors #resultsContainer .provider-card .waiting-text,
  body.mobility-selectors #resultsContainer .provider-card .exclusions-text {
    font-size: 10.4px !important;
    line-height: 1.42 !important;
  }
  body.mobility-selectors #resultsContainer .provider-card .premium-breakdown .breakdown-row .label,
  body.mobility-selectors #resultsContainer .provider-card .premium-breakdown .breakdown-row .value,
  body.mobility-selectors #resultsContainer .provider-card .cover-limit-list div strong,
  body.mobility-selectors #resultsContainer .provider-card .cover-limit-list div span {
    font-size: 10.4px !important;
    line-height: 1.42 !important;
  }
  body.mobility-selectors #resultsContainer .provider-card .premium-static-heading,
  body.mobility-selectors #resultsContainer .provider-card .inner-section-heading,
  body.mobility-selectors #resultsContainer .provider-card .always-visible-heading {
    font-size: 12px !important;
    line-height: 1.24 !important;
    padding-bottom: 5px !important;
  }
  body.mobility-selectors #resultsContainer .provider-card .quotecard-insurer {
    font-size: 14.5px !important;
  }
  body.mobility-selectors #resultsContainer .provider-card .quotecard-plan {
    font-size: 9.5px !important;
  }
  body.mobility-selectors #resultsContainer .provider-card .price {
    font-size: 16.5px !important;
    line-height: 1.2 !important;
  }
  body.mobility-selectors #resultsContainer .provider-card .benefit-row-note {
    font-size: 9.6px !important;
    line-height: 1.35 !important;
  }

  /* The phone hero leads with the kicker: "Protect What Matters Most" comes off
     and "Kenya Premium Health Covers" takes the headline slot. */
  body.mobility-selectors #hero .hero-text > h1 {
    display: none !important;
  }
  body.mobility-selectors #hero .hero-text .hero-buy-line {
    display: block !important;
    grid-area: headline !important;
    margin: 0 !important;
    max-width: none !important;
    /* One line at every phone width: the size follows the screen instead of
       breaking the phrase in two. */
    font-size: clamp(1rem, 4.6vw, 1.3rem) !important;
    font-weight: 800 !important;
    line-height: 1.25 !important;
    letter-spacing: -0.01em !important;
    white-space: nowrap !important;
    text-align: center !important;
  }
}

/* ===== the badge's own type + unselected cells =====
   The text follows the screen instead of holding one size, and a benefit that is
   not on the quote reads grey. */
@media (max-width: 700px) {
  body.mobility-selectors #quoteStickyRibbon .quote-ribbon-item-provider {
    font-size: clamp(0.82rem, 4.2vw, 1.02rem) !important;
  }
  body.mobility-selectors #quoteStickyRibbon .quote-ribbon-item-price {
    font-size: clamp(0.88rem, 4.6vw, 1.14rem) !important;
  }
  body.mobility-selectors #quoteStickyRibbon .quote-ribbon-item-plan,
  body.mobility-selectors #quoteStickyRibbon .quote-ribbon-item-members {
    font-size: clamp(0.6rem, 3.1vw, 0.74rem) !important;
  }
  body.mobility-selectors #quoteStickyRibbon .ribbon-limit-label,
  body.mobility-selectors #quoteStickyRibbon .ribbon-limit-value {
    font-size: clamp(0.56rem, 2.9vw, 0.72rem) !important;
  }
  /* The badge keeps its own height: nothing wraps, the ident column gives way
     and the long insurer or plan name is truncated instead. */
}

/* A benefit the quote does not carry: dash and a grey cell, on the badge and on
   the card's own header strip. */
#quoteStickyRibbon .quote-ribbon-item .ribbon-limit-cell.is-off,
.provider-card .quotecard-header .quotecard-limit-cell.is-off {
  opacity: 0.42 !important;
  filter: grayscale(1) !important;
}
#quoteStickyRibbon .quote-ribbon-item .ribbon-limit-cell.is-off .ribbon-limit-label,
#quoteStickyRibbon .quote-ribbon-item .ribbon-limit-cell.is-off .ribbon-limit-value,
.provider-card .quotecard-header .quotecard-limit-cell.is-off .quotecard-limit-label,
.provider-card .quotecard-header .quotecard-limit-cell.is-off .quotecard-limit-value {
  color: #93a29a !important;
}

/* ===== the lower band's buttons fit their own labels =====
   The three actions share the card's width, so on narrow phones the labels were
   wider than the buttons. The type follows the screen and the label is clipped
   with an ellipsis rather than spilling over the next button. */
.quote-actions-ribbon-item button {
  min-width: 0 !important;
  overflow: hidden !important;
  white-space: nowrap !important;
  text-overflow: ellipsis !important;
  font-size: clamp(0.58rem, 2.9vw, 0.76rem) !important;
  padding-left: 0.3rem !important;
  padding-right: 0.3rem !important;
}
.quote-actions-ribbon-item button i {
  font-size: 0.94em !important;
  margin-right: 0.2rem !important;
}

@media (max-width: 430px) {
  .quote-actions-ribbon-item button {
    font-size: clamp(0.52rem, 2.75vw, 0.68rem) !important;
    letter-spacing: -0.01em !important;
  }
}

/* ===== phones: the lower band's labels fit their buttons ===== */
@media (max-width: 700px) {
  /* The three actions share the card's width; the Apply Online label is set
     bolder and larger further up this sheet, so the fitting rule is repeated
     with the phone scope to win over it. */
  body.mobility-selectors .quote-actions-ribbon-item button,
  body.mobility-selectors .quote-actions-ribbon-item .ribbon-apply-btn,
  body.mobility-selectors .quote-actions-ribbon-item .ribbon-download-btn,
  body.mobility-selectors .quote-actions-ribbon-item .ribbon-whatsapp-btn {
    font-size: clamp(0.5rem, 2.25vw, 0.74rem) !important;
    padding-left: 0.28rem !important;
    padding-right: 0.28rem !important;
    min-width: 0 !important;
    overflow: hidden !important;
    white-space: nowrap !important;
    text-overflow: ellipsis !important;
  }
}

@media (max-width: 430px) {
  body.mobility-selectors .quote-actions-ribbon-item button,
  body.mobility-selectors .quote-actions-ribbon-item .ribbon-apply-btn,
  body.mobility-selectors .quote-actions-ribbon-item .ribbon-download-btn,
  body.mobility-selectors .quote-actions-ribbon-item .ribbon-whatsapp-btn {
    font-size: clamp(0.48rem, 2.25vw, 0.66rem) !important;
    letter-spacing: -0.02em !important;
  }
}

/* ===== phones: the Inpatient selector glows gold while it is required =====
   The required cue sits on the flat select inside the capsule, so the glow is
   drawn on the capsule itself and pulses gently until a limit is chosen. */
@keyframes mobilityGoldPulse {
  0%, 100% { box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.20), 0 0 12px rgba(212, 175, 55, 0.30); }
  50% { box-shadow: 0 0 0 4px rgba(212, 175, 55, 0.30), 0 0 20px rgba(212, 175, 55, 0.48); }
}
@media (max-width: 700px) {
  body.mobility-selectors #quote-form .inpatient-card:has(#inpatientLimit.inpatient-limit-error),
  body.mobility-selectors #quote-form .inpatient-card:has(#inpatientLimit.compare-all-select-required),
  body.mobility-selectors #quote-form .inpatient-card:has(#inpatientLimit.scope-step-required),
  /* Nothing chosen yet: the step is asking for a limit. */
  body.mobility-selectors #quote-form .inpatient-card:has(#inpatientLimit option[value="all"]:checked),
  body.mobility-selectors #quote-form .inpatient-card:has(#inpatientLimit option[value=""]:checked) {
    border-color: #d4af37 !important;
    animation: mobilityGoldPulse 1.6s ease-in-out infinite !important;
  }
  /* The divider between the limit and its type joins the gold cue. */
  body.mobility-selectors #quote-form .inpatient-card:has(#inpatientLimit.inpatient-limit-error) #inpatientScopeSelect,
  body.mobility-selectors #quote-form .inpatient-card:has(#inpatientLimit.compare-all-select-required) #inpatientScopeSelect,
  body.mobility-selectors #quote-form .inpatient-card:has(#inpatientLimit.scope-step-required) #inpatientScopeSelect,
  body.mobility-selectors #quote-form .inpatient-card:has(#inpatientLimit option[value="all"]:checked) #inpatientScopeSelect,
  body.mobility-selectors #quote-form .inpatient-card:has(#inpatientLimit option[value=""]:checked) #inpatientScopeSelect {
    border-left: 2px solid #d4af37 !important;
    box-shadow: -2px 0 6px rgba(212, 175, 55, 0.35) !important;
  }
  body.mobility-selectors #quote-form .inpatient-card:has(#inpatientLimit.inpatient-limit-error) .benefit-selector-icon,
  body.mobility-selectors #quote-form .inpatient-card:has(#inpatientLimit.compare-all-select-required) .benefit-selector-icon {
    background: #fdf3d6 !important;
    color: #8a6d1f !important;
  }
}
@media (prefers-reduced-motion: reduce) {
  body.mobility-selectors #quote-form .inpatient-card { animation: none !important; }
}

/* ===== the badge keeps its shape; long names give way =====
   The badge has a fixed width and height, so a long insurer or plan name is
   truncated (or the provider line shrinks) rather than pushing the premium off
   the edge or running over its neighbour. */
#quoteStickyRibbon .quote-ribbon-top {
  flex-wrap: nowrap !important;
  align-items: center !important;
  min-width: 0 !important;
}
#quoteStickyRibbon .quote-ribbon-ident-main {
  flex: 1 1 auto !important;
  /* A floor, so the name never collapses to nothing beside the price. */
  min-width: 46px !important;
  overflow: hidden !important;
}
#quoteStickyRibbon .quote-ribbon-item-provider,
#quoteStickyRibbon .quote-ribbon-item-plan {
  display: block !important;
  max-width: 100% !important;
  min-width: 0 !important;
  overflow: hidden !important;
  white-space: nowrap !important;
  text-overflow: ellipsis !important;
}
#quoteStickyRibbon .quote-ribbon-price-wrap {
  flex: 0 0 auto !important;
  min-width: 0 !important;
  overflow: hidden !important;
}
#quoteStickyRibbon .quote-ribbon-item-price {
  display: block !important;
  white-space: nowrap !important;
}
#quoteStickyRibbon .quote-ribbon-item-members {
  display: block !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
#quoteStickyRibbon .quote-ribbon-logo { flex: 0 0 auto !important; }

@media (max-width: 430px) {
  /* The narrowest badges: the price steps down so the name keeps its floor. */
  body.mobility-selectors #quoteStickyRibbon .quote-ribbon-item-price {
    font-size: clamp(0.74rem, 3.1vw, 1.14rem) !important;
  }
  body.mobility-selectors #quoteStickyRibbon .quote-ribbon-logo { width: 32px !important; height: 32px !important; }
}

/* ===== the phone hero kicker: plain text, no gold pill =====
   The desktop badge draws a gold outline, glow and a pill; on phones the line is
   just the headline, so the outline comes off. */
@media (max-width: 700px) {
  body.mobility-selectors #hero .hero-text .hero-buy-line {
    border: 0 !important;
    box-shadow: none !important;
    text-shadow: none !important;
    background: transparent !important;
    padding: 0 !important;
    border-radius: 0 !important;
  }

  /* Seven equal columns fill the full width of the hero, so the strip of insurer
     logos lines up with the kicker above it instead of floating short. */
  body.mobility-selectors #hero .hero-text .hero-insurer-grid {
    display: grid !important;
    grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
    gap: 4px !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 6px 0 0 !important;
    padding: 0 !important;
    justify-content: stretch !important;
  }
  body.mobility-selectors #hero .hero-text .hero-insurer-tile {
    flex: none !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 30px !important;
    padding: 3px 4px !important;
  }
  body.mobility-selectors #hero .hero-text .hero-insurer-tile img {
    width: 100% !important;
    height: 22px !important;
    object-fit: contain !important;
  }
}

/* The member count and the quote number never split: they share one line, and the
   pair is clipped with an ellipsis only if the badge itself is very narrow. */
#quoteStickyRibbon .quote-ribbon-price-wrap {
  display: flex !important;
  flex-direction: column !important;
  flex-wrap: nowrap !important;
  min-width: 0 !important;
}
#quoteStickyRibbon .quote-ribbon-item-members {
  display: block !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
#quoteStickyRibbon .quote-ribbon-item-members .quote-ribbon-item-number {
  display: inline !important;
  white-space: nowrap !important;
}

/* The member count and the quote number are separated by a spaced dot, matching
   the card's own header ("1 Member · Q1"). */
#quoteStickyRibbon .quote-ribbon-item-members .quote-ribbon-item-number::before {
  content: "\00b7" !important;
  margin: 0 0.3rem !important;
  opacity: 0.6 !important;
  font-weight: 700 !important;
}

/* ===== phones: Get My Quotes and Reset sit on one line =====
   The reset action is a smaller, dark red button so the primary button keeps the
   room and the pair never wraps. */
@media (max-width: 700px) {
  body.mobility-selectors #quote-form .actions-quote {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 8px !important;
    width: 100% !important;
  }
  body.mobility-selectors #quote-form #getQuotesBtn {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    white-space: nowrap !important;
  }
  body.mobility-selectors #quote-form #resetBtn {
    flex: 0 0 auto !important;
    width: auto !important;
    padding: 0.55rem 1rem !important;
    font-size: 0.8rem !important;
    font-weight: 800 !important;
    white-space: nowrap !important;
    background: #8d1f1f !important;
    border: 1px solid #731818 !important;
    color: #ffffff !important;
    border-radius: 30px !important;
    box-shadow: 0 4px 10px rgba(109, 24, 24, 0.28) !important;
  }
  body.mobility-selectors #quote-form #resetBtn i {
    font-size: 0.86rem !important;
  }
  /* Both buttons share one height, one radius and one type size; only their
     length differs, Get My Quotes being longer than Reset. */
  body.mobility-selectors #quote-form #getQuotesBtn,
  body.mobility-selectors #quote-form #resetBtn {
    height: 46px !important;
    min-height: 46px !important;
    border-radius: 30px !important;
    font-size: 0.8rem !important;
    font-weight: 800 !important;
  }
}

/* ===== phones: the quote engine panel is square and borderless ===== */
@media (max-width: 700px) {
  body.mobility-selectors #quote-form,
  body.mobility-selectors #quote-form.quote-wrapper {
    border: 0 !important;
    border-top: 0 !important;
    border-radius: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
  }
  body.mobility-selectors #quote-form > h2 {
    border-radius: 0 !important;
    border-bottom: 0 !important;
  }
}

/* ===== the journey line under the quote engine stays on one line ===== */
#quote-form .quote-journey {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: center !important;
  white-space: nowrap !important;
}
#quote-form .quote-journey > * {
  flex: 0 0 auto !important;
  white-space: nowrap !important;
}
@media (max-width: 700px) {
  body.mobility-selectors #quote-form .quote-journey {
    gap: 2px !important;
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    font-size: clamp(0.44rem, 1.95vw, 0.8rem) !important;
  }
  body.mobility-selectors #quote-form .quote-journey .quote-journey-amp {
    margin: 0 1px !important;
    font-size: 0.9em !important;
  }
}

/* ===== phones: the header contacts read as plain icon + label =====
   No pill, no border, no fill - just the icon and the word beside it, still the
   same tappable links. */
@media (max-width: 700px) {
  body[data-mobile="true"] header .nav-cta > .phone,
  body[data-mobile="true"] header .nav-cta > .nav-icon-btn,
  body[data-mobile="true"] header .nav-cta > .nav-icon-btn.wa {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 0 !important;
    width: auto !important;
  }
  body[data-mobile="true"] header .nav-cta > .phone { color: #14532d !important; }
  body[data-mobile="true"] header .nav-cta > .nav-icon-btn.wa { color: #128c4a !important; }
  body[data-mobile="true"] header .nav-cta > .nav-icon-btn:not(.wa) { color: #14532d !important; }
  body[data-mobile="true"] header .nav-cta > .phone i,
  body[data-mobile="true"] header .nav-cta > .nav-icon-btn i { font-size: 0.86rem !important; }
}

/* The email chip carries a box from the capsule rules, so the same specificity is
   repeated after them to strip it back to the icon and the word. */
@media (max-width: 700px) {
  body[data-mobile="true"] header .nav-cta > .nav-icon-btn:not(.wa) {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    height: auto !important;
    padding: 0 !important;
    width: auto !important;
    color: #14532d !important;
  }
}

/* ===== phones: the three contacts sit together, centred =====
   A tight inline row instead of three spread columns. */
@media (max-width: 700px) {
  body[data-mobile="true"] header .nav-cta {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 8px !important;
    width: auto !important;
    max-width: 100% !important;
    margin: 4px auto 0 !important;
  }
  body[data-mobile="true"] header .nav-cta > .phone,
  body[data-mobile="true"] header .nav-cta > .nav-icon-btn,
  body[data-mobile="true"] header .nav-cta > .nav-icon-btn.wa {
    flex: 0 0 auto !important;
    width: auto !important;
    grid-column: auto !important;
    column-gap: 0.22rem !important;
  }
}