/* ==========================================================================
   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, #e4f4f2 0%, #d2e8e9 52%, #a9d4d6 100%);
  border-top: 1px solid rgba(1,57,71, 0.10);
  border-bottom: 1px solid rgba(1,57,71, 0.16);
  box-shadow: 0 -8px 20px rgb(15, 49, 51, 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(1,57,71, 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, #2e9ca2 0%, #1c757a 100%);
  border-color: rgb(28, 117, 122, 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, #cdecee 0%, #eafafb 100%);
  border-color: rgb(37, 182, 190, 0.45);
  color: #147d83;
}

.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, #01545f)) !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: #bdedf0 !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, #d3e9ea 0%, #eaf5f6 46%, #f6fbfb 100%) !important;
  border-top: 1px solid rgba(1,57,71, 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(1,57,71, 0.18) !important;
  box-shadow: 0 6px 18px rgb(15, 49, 51, 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, #01545f) !important;
  box-shadow: 0 4px 12px rgb(15, 49, 51, 0.12) !important;
}

#quoteStickyRibbon .quote-ribbon-item + .quote-ribbon-item {
  border-left: 2px solid var(--card-border, #01545f) !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, #01545f) !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, #01545f) !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(1,57,71, 0.12);
  box-shadow: 0 2px 6px rgb(15, 49, 51, 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, #014a52);
  font-size: 0.78rem;
  font-weight: 900;
  letter-spacing: 0.02em;
}

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

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

#quoteStickyRibbon .quote-ribbon-item-price {
  color: var(--quote-ribbon-accent, #014a52) !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(1,57,71, 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: #112e30 !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: #014a52;
}

#quoteStickyRibbon .quote-ribbon-arrow:hover,
#quoteStickyRibbon .quote-ribbon-arrow:focus-visible {
  background: rgba(1,57,71, 0.10);
}

#quoteStickyRibbon .quote-ribbon-arrow:disabled {
  color: rgba(1,57,71, 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 headline figure of the card, so it reads larger than the insurer name
     and the plan above it. */
  font-size: 1.4rem !important;
  line-height: 1.2 !important;
}

/* The "/year" keeps its proportion as the premium grows. */
#resultsContainer .provider-card .quotecard-figure .price small,
#cardsContainer .provider-card .quotecard-figure .price small {
  font-size: 0.55em !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: 1024px) {
  #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: #112e30 !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(1,57,71, 0.16);
  border-bottom: 2px solid var(--quotecard-line, rgba(1,57,71, 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: #112e30;
  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, #33aab0 0%, #1a757a 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 rgb(18, 122, 127, 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, #f0fafb 0%, #dcf2f3 100%) !important;
  border: 1px solid rgb(23, 117, 122, 0.30) !important;
  color: #145c60 !important;
  font-weight: 700 !important;
  box-shadow: 0 4px 10px rgb(23, 117, 122, 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: #1c848a !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: 1024px) {
  .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, #f9e8ad 0%, #efd166 55%, #d5a72a 100%) !important;
  border: 1px solid rgba(176, 132, 18, 0.38) !important;
  box-shadow: 0 10px 24px rgba(176, 132, 18, 0.20) !important;
}

#resultsContainer .results-header h2 {
  color: #013947 !important;
  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, #1f757a 0%, #145c60 100%) !important;
  color: #ffffff !important;
  font-size: 0.72rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.02em !important;
  box-shadow: 0 4px 10px rgb(18, 122, 127, 0.22) !important;
}

#resultsContainer .results-header #resultSummary {
  display: inline-flex !important;
  align-items: center !important;
  width: auto !important;
  max-width: 100% !important;
  padding: 0.3rem 1rem !important;
  border: 1px solid rgba(1,57,71, 0.12) !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.9) !important;
  color: #3f5a5b !important;
  /* The members line is part of the heading: who the quotes are for is read
     before the quotes themselves, so it is set at heading size. */
  font-size: 1rem !important;
  font-weight: 700 !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-detail-heading,
#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;
}

/* ===== where the full quotations begin =====
   The quick-glance list above carries one line per quote; this heading marks
   the drop from that reading list into the quotation cards themselves. */
#resultsContainer .quote-detail-heading {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: baseline !important;
  gap: 0.3rem 0.7rem !important;
  margin: 0 0 0.75rem !important;
  padding: 0 0.2rem 0.55rem !important;
  border-bottom: 1px solid rgba(1,57,71, 0.10) !important;
}

#resultsContainer .quote-detail-heading h3 {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.5rem !important;
  margin: 0 !important;
  color: var(--primary-navy, #013947) !important;
  font-size: 1.06rem !important;
  font-weight: 800 !important;
  letter-spacing: -0.01em !important;
}

#resultsContainer .quote-detail-heading h3 i {
  color: #d5a72a !important;
  font-size: 0.95em !important;
}

#resultsContainer .quote-detail-heading p {
  margin: 0 !important;
  color: #5b6b62 !important;
  font-size: 0.76rem !important;
}

@media (max-width: 1024px) {
  #resultsContainer .quote-detail-heading { flex-direction: column !important; gap: 0.2rem !important; }
  #resultsContainer .quote-detail-heading h3 { font-size: 1rem !important; }
  #resultsContainer .quote-detail-heading p { font-size: 0.72rem !important; }
}

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

/* Before any quote exists the panel is a promise, so it says so under the
   heading: the pre-quote line leads and the underwriting note stays beneath it
   as the small print. */
#resultsContainer .results-empty-note {
  display: block !important;
  margin: 12px 0 2px !important;
  color: #173e40 !important;
  font-size: 0.95rem !important;
  font-weight: 700 !important;
  line-height: 1.35 !important;
  text-align: center !important;
}

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

@media (max-width: 1024px) {
  #resultsContainer .results-empty-note { font-size: 0.88rem !important; margin-top: 10px !important; }
}

/* The quote pills sit centred under the panel. */
@media (max-width: 1024px) {
  /* 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 {
  color: #013947 !important;
    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(1,57,71, 0.16) !important;
  border-radius: 999px !important;
  background: linear-gradient(180deg, #ffffff 0%, #f2f8f8 100%) !important;
  color: #2f5254 !important;
  font-size: 0.68rem !important;
  font-weight: 800 !important;
  box-shadow: 0 3px 8px rgb(15, 49, 51, 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 rgb(15, 49, 51, 0.12) !important;
}

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

@media (max-width: 1024px) {
  /* 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: #014a52 !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(1,57,71, 0.12) !important;
  border-radius: 10px !important;
  color: #0f383a !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(1,57,71, 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: #014a52;
  background: transparent;
  border: 0;
  box-shadow: none;
}

.quote-floating-arrows .quote-ribbon-arrow:hover,
.quote-floating-arrows .quote-ribbon-arrow:focus-visible {
  background: rgba(1,57,71, 0.10);
  color: #0f383a;
}

.quote-floating-arrows .quote-ribbon-arrow:disabled {
  color: rgba(1,57,71, 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, #014a52)) !important;
  font-weight: 800 !important;
}

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

/* ===== the hero: less empty space at its foot =====
   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; the gold
   rule that used to close the band is gone, on phones and desktops alike. */
#hero {
  padding-bottom: 1.5rem !important;
  margin-bottom: 0 !important;
  border-bottom: 0 !important;
}

body[data-mobile="true"] #hero {
  padding-bottom: 1.2rem !important;
  border-bottom: 0 !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, #63dde3 0%, #2fb5bc 48%, #168389 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 rgb(18, 122, 127, 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, #9beff3 0%, #45d5dd 48%, #17a2a9 100%) !important;
  border: 0 !important;
  color: #0a383a !important;
  font-weight: 800 !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.62), 0 5px 14px rgb(37, 202, 211, 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, #01545f)) !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, #01545f)) !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 rgb(15, 49, 51, 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, #01545f)) !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(1,57,71, 0.22)) !important;
  color: var(--card-accent, var(--quote-ribbon-accent, #014a52)) !important;
  font-weight: 800 !important;
  text-shadow: none !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.75),
    0 4px 10px rgb(15, 49, 51, 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: 1024px) {
  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;
    /* The mark and wordmark sit on the left of their line on a phone, in line
       with the page's own column, rather than centred over the menu below. */
    justify-content: flex-start !important;
    padding-left: 2px !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: #014a52 !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: #eaf9fa !important;
    color: #12868c !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: #017a78 !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: 1024px) {
  .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: 1024px) {
  /* 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: #01545f !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: #f3f8f8 !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: #014a52 !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, #eff8f9 0%, #e1f2f3 100%) !important;
    border-color: #8fcdd0 !important;
  }
  body.mobility-selectors #quote-form .is-chosen .benefit-selector-icon {
    background: #d6eeef !important;
    border-right-color: #b7dee0 !important;
  }
body.mobility-selectors #quote-form .is-chosen select {
background: transparent !important;
color: #014a52 !important;
font-weight: 800 !important;
}

/* ===== the phone's Cover Limits rows read as a grid =====
   The icon | limit | scope cells sit in one capsule, so the lines between them
   are stronger than the hairline the row used to carry: a firmer outline, a
   divider after the icon and one before the scope cell on every row. */
body.mobility-selectors #quote-form .optional-benefit-row .form-group,
body.mobility-selectors #quote-form .inpatient-card {
  border-color: #c3cfdc !important;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.07) !important;
}
body.mobility-selectors #quote-form#quote-form .benefit-selector-icon {
  border-right: 1px solid #c3cfdc !important;
}
/* The divider sits on the limit's right edge, level with the scope cell, so
   every row shows it even where the scope control is a plain select. */
body.mobility-selectors #quote-form#quote-form #inpatientLimit,
body.mobility-selectors #quote-form#quote-form #maternityLimit,
body.mobility-selectors #quote-form#quote-form #outpatientLimit,
body.mobility-selectors #quote-form#quote-form #dentalLimit,
body.mobility-selectors #quote-form#quote-form #opticalLimit {
  border-right: 1px solid #c3cfdc !important;
}
body.mobility-selectors #quote-form#quote-form .mobility-type-select,
body.mobility-selectors #quote-form#quote-form #inpatientScopeSelect,
body.mobility-selectors #quote-form#quote-form #maternityNote,
body.mobility-selectors #quote-form#quote-form #outpatientScopeSelect {
  border-left: 1px solid #c3cfdc !important;
}
/* A chosen benefit keeps its green tint, lines included. */
body.mobility-selectors #quote-form .is-chosen #inpatientLimit,
body.mobility-selectors #quote-form .is-chosen #maternityLimit,
body.mobility-selectors #quote-form .is-chosen #outpatientLimit,
body.mobility-selectors #quote-form .is-chosen #dentalLimit,
body.mobility-selectors #quote-form .is-chosen #opticalLimit {
  border-right-color: #8fcdd0 !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: #f0f7f7 !important;
  box-shadow: 0 0 0 100vmax #f0f7f7 !important;
  clip-path: inset(0 -100vmax) !important;
  border-top: 1px solid #dee9ea !important;
  border-bottom: 1px solid #dee9ea !important;
  border-radius: 0 !important;
  padding: 1.1rem 1.15rem 1.4rem !important;
}

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

/* ===== the menu carries no permanent outline =====
   The Quote item used to hold a gold outline. The menu now reads as plain
   text, and only the scroll-spy's own active state tints an item. */
header .nav-links > li:first-child > a,
header .nav-links > li > a[href$="#quote-form"] {
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !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: 1024px) {
  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: 20px !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: 1024px) {
  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: 1024px) {
  /* 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 mobilityStepPulse {
  0%, 100% { box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.13), 0 0 12px rgba(220, 38, 38, 0.24); }
  50% { box-shadow: 0 0 0 4px rgba(220, 38, 38, 0.24), 0 0 20px rgba(220, 38, 38, 0.36); }
}
@media (max-width: 1024px) {
  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: #dc2626 !important;
    animation: mobilityStepPulse 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 #dc2626 !important;
    box-shadow: -2px 0 6px rgba(220, 38, 38, 0.28) !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: #fdeaea !important;
    color: #dc2626 !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: 1024px) {
  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: one segmented action pill =====
   Get My Quotes and Reset share one capsule with a split down the middle,
   rather than reading as two separate buttons. */
@media (max-width: 1024px) {
  body.mobility-selectors[data-mobile="true"] #quote-form#quote-form .actions-quote {
    display: grid !important;
    grid-template-columns: minmax(0, 1.35fr) minmax(0, .65fr) !important;
    align-items: stretch !important;
    gap: 0 !important;
    width: 100% !important;
    padding: 0 !important;
    overflow: hidden !important;
    border-radius: 999px !important;
    background: #8d1f1f !important;
    box-shadow: 0 4px 10px rgba(109, 24, 24, 0.20) !important;
  }
  body.mobility-selectors[data-mobile="true"] #quote-form#quote-form #getQuotesBtn {
    width: 100% !important;
    min-width: 0 !important;
    white-space: nowrap !important;
    padding: 0 16px !important;
    background: #d5a72a !important;
    color: #013947 !important;
    border: 0 !important;
    border-radius: 999px 0 0 999px !important;
    box-shadow: none !important;
  }
  body.mobility-selectors[data-mobile="true"] #quote-form#quote-form #resetBtn {
    width: 100% !important;
    padding: 0 12px !important;
    font-size: 0.8rem !important;
    font-weight: 800 !important;
    white-space: nowrap !important;
    background: #8d1f1f !important;
    border: 0 !important;
    border-left: 1px solid rgba(255, 255, 255, 0.28) !important;
    color: #ffffff !important;
    border-radius: 0 999px 999px 0 !important;
    box-shadow: none !important;
  }
  body.mobility-selectors[data-mobile="true"] #quote-form#quote-form #resetBtn i {
    font-size: 0.86rem !important;
  }
  /* Both segments fill the capsule at the same height. */
  body.mobility-selectors[data-mobile="true"] #quote-form#quote-form #getQuotesBtn,
  body.mobility-selectors[data-mobile="true"] #quote-form#quote-form #resetBtn {
    height: 48px !important;
    min-height: 48px !important;
    font-size: 0.8rem !important;
    font-weight: 800 !important;
  }
}

/* ===== phones: the quote engine panel is square and borderless ===== */
@media (max-width: 1024px) {
  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: 1024px) {
  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: 1024px) {
  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: #014a52 !important; }
  body[data-mobile="true"] header .nav-cta > .nav-icon-btn.wa { color: #12868c !important; }
  body[data-mobile="true"] header .nav-cta > .nav-icon-btn:not(.wa) { color: #014a52 !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: 1024px) {
  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: #014a52 !important;
  }
}

/* ===== phones: the three contacts sit together, centred =====
   A tight inline row instead of three spread columns. */
@media (max-width: 1024px) {
  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;
  }
}

/* ==========================================================================
   Header: the menu and the contact icons share one line
   The four contacts are icons only - call, WhatsApp, email, and one that opens
   "Send Us a Message" - and they sit beside the menu rather than under it, on
   phones as well as on desktops. The shared wrapper is layout-transparent on
   desktop, so that row is laid out exactly as it was before it was added.
   ========================================================================== */

header .header-actions { display: contents; }

/* The agency mark is the supplied circular artwork, not the drawn shield. */
header .header-logo-img {
  display: block;
  width: auto;
  height: 52px;
  flex-shrink: 0;
}

@media (max-width: 1024px) {
  body[data-mobile="true"] header .header-logo-img { height: 40px; }
}

/* ===== phones: the hero's four stat cards are dropped =====
   The figures made the first screen long without helping the visitor choose a
   cover, so the phone view goes straight from the headline to the quote form. */
@media (max-width: 1024px) {
  /* `.hero-text` is spelled out because the phone hero sheet (mobile-quote.css)
     turns the cards back on at the same importance. */
  body[data-mobile="true"] #hero .hero-text .hero-stats,
  body[data-mobile="true"] #hero .hero-stats { display: none !important; }
}

/* A hero logo is now a way into the quote form for that insurer. */
@media (max-width: 1024px) {
  body[data-mobile="true"] #hero .hero-insurer-tile-linked { cursor: pointer; }
  body[data-mobile="true"] #hero .hero-insurer-tile-linked:active { transform: scale(0.95); }
}

/* Desktop and tablet: one line from the tablet breakpoint up, so the menu and
   the four icons never drop onto a second row. The sizes scale with the
   viewport, which is what keeps the row intact from 701px to 1440px. */
@media (min-width: 1025px) {
  header .header-content {
    /* The phone sheets stack the header from 850px down, which would push the
       menu onto a second row on the inner pages at tablet width. */
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    justify-content: space-between !important;
    gap: clamp(4px, 1vw, 14px) !important;
  }
  header .header-logo-wrapper {
    min-width: 0 !important;
    flex-shrink: 1 !important;
    gap: clamp(8px, 1vw, 18px) !important;
  }
  header .header-shield {
    width: clamp(28px, 3.4vw, 46px) !important;
  }
  header .header-logo-img {
    height: clamp(28px, 3.4vw, 46px) !important;
  }
  header .header-divider {
    height: clamp(28px, 3.4vw, 46px) !important;
  }
  header .header-brand .brand-name {
    font-size: clamp(11px, 1.3vw, 19px) !important;
    letter-spacing: -0.01em !important;
    white-space: nowrap !important;
  }
  header .header-brand .brand-tagline,
  header .header-brand .brand-tagline span {
    font-size: clamp(7px, 0.72vw, 11px) !important;
    letter-spacing: 0.09em !important;
    white-space: nowrap !important;
  }
  header .nav-links {
    flex-wrap: nowrap !important;
    gap: clamp(10px, 1.7vw, 30px) !important;
  }
  header .nav-links li a {
    white-space: nowrap !important;
    /* The menu is the main way in, so it reads at full size on a desktop
       rather than as a caption. */
    font-size: clamp(13px, 1.15vw, 17px) !important;
    padding: 0.3rem 0 !important;
  }
  header .nav-cta {
    flex-wrap: nowrap !important;
    gap: clamp(4px, 0.55vw, 9px) !important;
  }
  header .nav-cta .nav-icon-btn {
    width: clamp(22px, 2.45vw, 36px) !important;
    height: clamp(22px, 2.45vw, 36px) !important;
    padding: 0 !important;
    font-size: clamp(9px, 1vw, 14px) !important;
  }
}

@media (max-width: 1024px) {
  body[data-mobile="true"] header .header-actions {
    order: 2 !important;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    /* Centred on a phone, with the contacts beside the menu; the row still
       never wraps. */
    justify-content: center !important;
    gap: clamp(6px, 2vw, 14px) !important;
    width: 100% !important;
    min-width: 0 !important;
  }
  body[data-mobile="true"] header .header-actions nav {
    order: 1 !important;
    width: auto !important;
    min-width: 0 !important;
    flex: 0 0 auto !important;
  }
  body[data-mobile="true"] header .nav-links {
    display: flex !important;
    flex-wrap: nowrap !important;
    justify-content: center !important;
    /* Breathing room between the items, scaled so four items and four icons
       still fit across the narrowest phone on one line. */
    gap: clamp(10px, 3vw, 20px) !important;
    width: auto !important;
    min-width: 0 !important;
  }
  /* `li a` so this beats the heavier weight the phone sheets set on the home
     page: a plain `a` at 800 grows enough to push the row onto a second line. */
  body[data-mobile="true"] header .nav-links li a {
    /* Big enough to read and tap on a phone, and still one line beside the
       four contact icons. */
    font-size: clamp(11.5px, 3.4vw, 15px) !important;
    font-weight: 600 !important;
    letter-spacing: normal !important;
    padding: 0.2rem 0 !important;
    white-space: nowrap !important;
  }
  /* No gold outline anywhere in the menu, and the current section is marked by
     its colour alone. */
  body[data-mobile="true"] header .nav-links a,
  body[data-mobile="true"] header .nav-links a.active,
  body[data-mobile="true"] header .nav-links li a.active {
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: #013947 !important;
    font-weight: 600 !important;
  }
  body[data-mobile="true"] header .nav-links a.active,
  body[data-mobile="true"] header .nav-links li a.active {
    color: #01545f !important;
    font-weight: 800 !important;
  }

  /* The icons are round taps in the theme's green, sized so the menu and the
     four of them still fit across a 360px phone. */
  body[data-mobile="true"] header .nav-cta {
    order: 2 !important;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: center !important;
    grid-template-columns: none !important;
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    gap: clamp(3px, 1.1vw, 6px) !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,
  body[data-mobile="true"] header .nav-cta > .nav-icon-btn:not(.wa) {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 auto !important;
    width: clamp(20px, 5.8vw, 26px) !important;
    height: clamp(20px, 5.8vw, 26px) !important;
    min-width: 0 !important;
    min-height: 0 !important;
    padding: 0 !important;
    border: 1px solid rgba(1,57,71, 0.12) !important;
    border-radius: 50% !important;
    background: #e9f2f2 !important;
    color: #014a52 !important;
    box-shadow: none !important;
    grid-column: auto !important;
    column-gap: 0 !important;
  }
  /* All four carry the same treatment: the WhatsApp one used to be tinted
     differently, which made the row look uneven. */
  body[data-mobile="true"] header .nav-cta > .nav-icon-btn:not(.wa) {
    background: #e9f2f2 !important;
    border: 1px solid rgba(1,57,71, 0.12) !important;
    color: #014a52 !important;
  }
  body[data-mobile="true"] header .nav-cta > .nav-icon-btn.wa {
    /* Same styling as the other three: one look for the whole set. */
    background: #e9f2f2 !important;
    border-color: rgba(1,57,71, 0.12) !important;
    color: #014a52 !important;
  }
  body[data-mobile="true"] header .nav-cta > .nav-icon-btn i {
    margin: 0 !important;
    font-size: clamp(9.5px, 2.9vw, 13px) !important;
  }
  /* Icons only: the label text the earlier phone rules appended is dropped. */
  body[data-mobile="true"] header .nav-cta > .nav-icon-btn::after {
    content: none !important;
  }
}

/* Very narrow phones: shrink the same single line rather than letting it wrap. */
@media (max-width: 340px) {
  body[data-mobile="true"] header .nav-links li a { font-size: 10.5px !important; }
  body[data-mobile="true"] header .nav-cta > .nav-icon-btn {
    width: 18px !important;
    height: 18px !important;
  }
  body[data-mobile="true"] header .nav-cta > .nav-icon-btn i { font-size: 9.5px !important; }
}

/* ===== the card's own header on a phone =====
   The identity — logo, insurer, plan — and the annual premium belong on one
   line even on a phone; stacked, the pair took a third of the card before any
   cover was read. So the line is kept and made to fit: the premium steps down,
   the identity takes what is left, and a plan name too long for that space is
   cut with an ellipsis rather than pushing the premium off the card. */
@media (max-width: 560px) {
  #resultsContainer .provider-card .quotecard-header,
  #cardsContainer .provider-card .quotecard-header {
    /* The identity and the yearly premium share the row rather than the premium
       taking whatever it needs: that keeps the insurer's name readable and
       gives the fit pass a fixed box to measure the figure against. */
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr) !important;
    column-gap: 6px !important;
    row-gap: 0 !important;
    padding-bottom: 3px !important;
    margin-bottom: 3px !important;
  }

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

  /* The name and the plan each hold one line: a plan that will not fit is cut
     with an ellipsis. */
  #resultsContainer .provider-card .quotecard-title .quotecard-insurer,
  #resultsContainer .provider-card .quotecard-title .quotecard-plan,
  #cardsContainer .provider-card .quotecard-title .quotecard-insurer,
  #cardsContainer .provider-card .quotecard-title .quotecard-plan {
    max-width: 100% !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

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

  #resultsContainer .provider-card .quotecard-title .quotecard-plan,
  #cardsContainer .provider-card .quotecard-title .quotecard-plan {
    font-size: 0.74rem !important;
    line-height: 1.2 !important;
  }

  /* The annual premium is still the loudest figure on the card, just not as
     tall as it is on a desk. */
  body[data-mobile="true"] #resultsContainer .provider-card .quotecard-figure .price,
  body[data-mobile="true"] #cardsContainer .provider-card .quotecard-figure .price {
    font-size: 1.06rem !important;
    line-height: 1.1 !important;
    /* One line, so a six-figure rate is stepped down to fit rather than folded
       in two beside the insurer's name. */
    white-space: nowrap !important;
    /* The figure is held inside its half of the row, which is what lets the fit
       pass see it hanging over and step it down. */
    max-width: 100% !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.6rem !important;
  }

  #resultsContainer .provider-card .quotecard-figure,
  #cardsContainer .provider-card .quotecard-figure {
    align-items: flex-end !important;
    justify-content: flex-end !important;
    text-align: right !important;
  }

  /* The five limit cells in the strip: a little less air either side, so a
     figure like "KSh 150K" is not pushed past its cell on a small screen. */
  #resultsContainer .provider-card .quotecard-limits .quotecard-limit-cell,
  #cardsContainer .provider-card .quotecard-limits .quotecard-limit-cell {
    padding-left: 3px !important;
    padding-right: 3px !important;
    gap: 3px !important;
  }

  /* A plan that carries two figures in one cell ("20M+20M") needs more room
     than a fifth of a phone's width, so the strip stops being five equal
     columns and lets the cells take the width they need, wrapping onto a second
     line rather than letting neighbouring figures run into each other. */
  #resultsContainer .provider-card .quotecard-header .quotecard-limits,
  #cardsContainer .provider-card .quotecard-header .quotecard-limits {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: space-between !important;
    gap: 2px 8px !important;
  }

  /* The same five cells again, in the narrower box of the sticky badge. */
  #quoteStickyRibbon .quote-ribbon-item .ribbon-limit-cell {
    padding-left: 4px !important;
    padding-right: 4px !important;
    gap: 2px !important;
  }
  body[data-mobile="true"] #quoteStickyRibbon .quote-ribbon-item .ribbon-limit-label,
  body[data-mobile="true"] #quoteStickyRibbon .quote-ribbon-item .ribbon-limit-value {
    font-size: 9.5px !important;
  }
  body[data-mobile="true"] #quoteStickyRibbon .quote-ribbon-item-provider { font-size: 10.5px !important; }
  body[data-mobile="true"] #quoteStickyRibbon .quote-ribbon-item-plan,
  body[data-mobile="true"] #quoteStickyRibbon .quote-ribbon-item-members { font-size: 9.5px !important; }
}

/* ===== the site identity in the header =====
   The wordmark wears the site's dark green and the tagline under it the site's
   gold, on every page and at every width. The phone header already read that
   way; the desk header was still navy with a dark ochre tagline, and an inner
   page's phone header kept a green tagline, so the three disagreed. */
header .header-brand .brand-name,
header .header-brand .brand-name span,
body[data-mobile="true"] header .header-brand .brand-name,
body[data-mobile="true"] header .header-brand .brand-name span {
  color: #013947 !important;
}

header .header-brand .brand-tagline,
header .header-brand .brand-tagline span,
header .header-brand .tagline-default,
header .header-brand .tagline-mobile,
body[data-mobile="true"] header .header-brand .brand-tagline,
body[data-mobile="true"] header .header-brand .brand-tagline span,
body[data-mobile="true"] header .header-brand .tagline-default,
body[data-mobile="true"] header .header-brand .tagline-mobile {
  color: #d4af37 !important;
}

/* ===== the results heading reads as a section heading =====
   "Compare & Apply Online" opened its panel at 1.32rem, so it read as a card
   title rather than the heading of a section. It now matches the band headings
   above it on the page - the same 2.2rem as "How It Works" and "Our Trusted
   Insurers". On a phone it keeps its scale but is measured to stay on one line:
   the phrase is 238px wide at 20px, 262px at 22px and 310px at 26px, against
   the 243/273/313px the panel offers at 360/390/430px, so the size follows the
   panel instead of a fixed step. */
#resultsContainer .results-header h2 {
  color: #013947 !important;
  font-size: 2.2rem !important;
  line-height: 1.14 !important;
}

@media (max-width: 1024px) {
  #resultsContainer .results-header h2 {
  color: #013947 !important;
    font-size: clamp(1.05rem, 5.35vw, 1.7rem) !important;
    white-space: nowrap !important;
  }
}

/* ===== the providers button =====
   The third tab used to be a WhatsApp enquiry; it is the provider network now,
   so it wears the same quiet treatment the other secondary tab does: the card's
   own surface, the insurer's line and text, and a little less side padding so
   "View Providers" sits inside its third of the bar on a phone. */
.quote-actions-ribbon-item .ribbon-providers-btn {
  background: var(--card-surface, #ffffff) !important;
  border: 1px solid var(--card-border, rgba(1, 57, 71, 0.22)) !important;
  color: var(--card-accent, var(--quote-ribbon-accent, #014a52)) !important;
  font-weight: 800 !important;
  text-shadow: none !important;
  padding: 0 0.3rem !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.75),
    0 4px 10px rgb(15, 49, 51, 0.12) !important;
}

.quote-actions-ribbon-item .ribbon-providers-btn i {
  color: currentColor !important;
  font-size: 0.8rem;
}