/* =============================================================================
   Master Insurance — component classes
   -----------------------------------------------------------------------------
   These are the classes the client applies in Elementor's
   Advanced > CSS Classes field on NATIVE widgets. That is what makes the
   hybrid build work: a product card is a real Elementor Container holding a
   real Icon Box, a real Heading and a real Icon List — it just wears the
   design system's clothes.

   Every rule reads from tokens.css. Nothing here hard-codes a brand color.
   ========================================================================== */


/* =============================================================================
   1. Layout — sections and containers
   ========================================================================== */

/* Section rhythm: the design system alternates white and tint bands. */
.mi-section       { padding-block: var(--section-pad); }
.mi-section--tint { background: var(--bg-tint); }
.mi-section--dark { background: var(--color-primary); color: rgba(255, 255, 255, 0.85); }
.mi-section--deep { background: var(--teal-900); color: rgba(255, 255, 255, 0.75); }
.mi-section--tight { padding-block: var(--space-12); }

.mi-section--dark :is(h1, h2, h3, h4, h5, h6),
.mi-section--deep :is(h1, h2, h3, h4, h5, h6) { color: var(--white); }

/* Centered intro block above a grid. */
.mi-section-head {
  max-width: 640px;
  margin-inline: auto;
  text-align: center;
  margin-bottom: var(--space-12);
}

/* Small uppercase label. The ONLY uppercase the brand allows in prose. */
.mi-eyebrow {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--color-primary);
}
.mi-section--dark .mi-eyebrow,
.mi-section--deep .mi-eyebrow { color: var(--color-accent); }


/* =============================================================================
   2. Card — flat white surface, 12px radius, hairline border, whisper shadow
   ========================================================================== */

.mi-card {
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-xs);
  padding: var(--space-8);
  height: 100%;
  transition:
    transform var(--dur-med) var(--ease-out),
    box-shadow var(--dur-med) var(--ease-out),
    border-color var(--dur-med) var(--ease-out);
}

/* Interactive cards lift and warm their border to accent teal. */
.mi-card--interactive:hover,
.mi-card--interactive:focus-within {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
  border-color: var(--border-strong);
}

.mi-card--tint  { background: var(--bg-tint); border-color: transparent; }
.mi-card--flush { padding: 0; overflow: hidden; }


/* =============================================================================
   3. Medallion — the filled icon tile on product cards
   Inverts to solid teal when its card is hovered.
   ========================================================================== */

.mi-medallion {
  --mi-medallion-size: 56px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--mi-medallion-size);
  height: var(--mi-medallion-size);
  border-radius: var(--radius-md);
  background: var(--teal-100);
  color: var(--color-primary);
  font-size: 28px;               /* .mi-i glyphs are 1em square */
  transition:
    background var(--dur-med) var(--ease-out),
    color var(--dur-med) var(--ease-out);
}

.mi-card--interactive:hover .mi-medallion {
  background: var(--color-primary);
  color: var(--white);
}

.mi-medallion--pill  { border-radius: var(--radius-pill); }
.mi-medallion--sm    { --mi-medallion-size: 44px; font-size: 22px; }
.mi-medallion--lg    { --mi-medallion-size: 68px; font-size: 34px; }
.mi-medallion--solid { background: var(--color-primary); color: var(--white); }
.mi-medallion--ondark {
  background: rgba(255, 255, 255, 0.14);
  color: var(--white);
}


/* =============================================================================
   4. Product card — Container + Icon Box + Heading + Text + Icon List
   ========================================================================== */

.mi-product-card { display: flex; flex-direction: column; gap: var(--space-4); }

.mi-card-title {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
  color: var(--text-heading);
  letter-spacing: var(--tracking-tight);
}

.mi-card-body {
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  color: var(--text-muted);
}


/* =============================================================================
   5. Feature list — teal check rows (Elementor Icon List widget)
   ========================================================================== */

.mi-features .elementor-icon-list-item,
.mi-features li {
  font-size: var(--text-sm);
  color: var(--text-body);
}
.mi-features .elementor-icon-list-icon { color: var(--color-primary); }

/* Standalone (non-Elementor) markup, used inside the custom widgets. */
ul.mi-features {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
ul.mi-features > li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
}
ul.mi-features > li .mi-i {
  color: var(--color-primary);
  font-size: 17px;
  margin-top: 2px;
}


/* =============================================================================
   6. Stat — the trust number tile
   ========================================================================== */

.mi-stat { text-align: center; }
.mi-stat-value {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: var(--weight-extra);
  letter-spacing: var(--tracking-tight);
  color: var(--color-primary);
  line-height: 1;
}
.mi-stat-label {
  font-size: var(--text-sm);
  color: var(--text-muted);
  margin-top: var(--space-2);
}
.mi-section--dark .mi-stat-value { color: var(--white); }
.mi-section--dark .mi-stat-label { color: rgba(255, 255, 255, 0.7); }


/* =============================================================================
   7. Badge — pill label
   ========================================================================== */

.mi-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 5px 12px;
  border-radius: var(--radius-pill);
  background: var(--teal-100);
  color: var(--teal-800);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  line-height: 1.4;
}
.mi-badge--accent  { background: var(--color-accent); color: var(--text-on-accent); }
.mi-badge--success { background: var(--success-50); color: var(--success-500); }
.mi-badge--ondark  { background: rgba(255, 255, 255, 0.14); color: var(--white); }


/* =============================================================================
   8. Buttons
   Base pill shape lives in elementor.css (it has to out-specify Elementor's
   own .elementor-button rules). These are the variants.
   ========================================================================== */

.mi-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  font-family: var(--font-body);
  font-weight: var(--weight-semibold);
  font-size: var(--text-base);
  line-height: 1;
  padding: 13px 24px;
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  cursor: pointer;
  white-space: nowrap;
  text-decoration: none;
  background: var(--color-primary);
  color: var(--text-on-primary);
  transition:
    background var(--dur-fast) var(--ease-out),
    color var(--dur-fast) var(--ease-out),
    border-color var(--dur-fast) var(--ease-out);
}
.mi-btn:hover  { background: var(--color-primary-hover); color: var(--text-on-primary); }
.mi-btn:active { background: var(--color-primary-active); }
.mi-btn[disabled],
.mi-btn:disabled { opacity: 0.5; pointer-events: none; }

/* CRITICAL: every variant below is scoped to `.mi-btn`.
   These classes are ALSO used as Elementor CSS Classes on Button widgets, where
   Elementor puts them on the widget WRAPPER div — not on the <a class="elementor-button">
   inside it. A bare `.mi-btn--accent { background: … }` therefore painted a
   square, unrounded rectangle behind the (correctly pill-shaped) button, which
   is what made every hero button look square. The wrapper must stay
   transparent; only the real button carries the fill. */
.mi-btn.mi-btn--sm { font-size: var(--text-sm); padding: 9px 16px; }
.mi-btn.mi-btn--lg { font-size: var(--text-md); padding: 17px 32px; }
.mi-btn.mi-btn--full { width: 100%; }

.mi-btn.mi-btn--accent          { background: var(--color-accent); color: var(--text-on-accent); }
.mi-btn.mi-btn--accent:hover    { background: var(--teal-400); color: var(--text-on-accent); }

.mi-btn.mi-btn--secondary       { background: var(--white); color: var(--color-primary); border-color: var(--border-default); }
.mi-btn.mi-btn--secondary:hover { background: var(--surface-hover); color: var(--color-primary); }

.mi-btn.mi-btn--ghost           { background: transparent; color: var(--color-primary); }
.mi-btn.mi-btn--ghost:hover     { background: var(--surface-hover); color: var(--color-primary); }

.mi-btn.mi-btn--on-dark         { background: var(--white); color: var(--color-primary); }
.mi-btn.mi-btn--on-dark:hover   { background: var(--teal-100); color: var(--color-primary); }

/* Belt and braces: an Elementor button WRAPPER carrying a variant class must
   never paint a background of its own. */
.elementor-widget-button.mi-btn--accent,
.elementor-widget-button.mi-btn--secondary,
.elementor-widget-button.mi-btn--ghost,
.elementor-widget-button.mi-btn--on-dark,
.elementor-widget-button.mi-btn--sm,
.elementor-widget-button.mi-btn--lg { background: none; padding: 0; border: 0; }


/* =============================================================================
   9. Form fields — shared by the wizard, the modal and the contact forms
   ========================================================================== */

.mi-field { display: flex; flex-direction: column; gap: 6px; width: 100%; }

.mi-label {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--text-heading);
}
.mi-label .mi-req { color: var(--error-500); margin-left: 3px; }

.mi-input,
.mi-select,
.mi-textarea {
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: var(--text-body);
  background: var(--surface-field);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  width: 100%;
  outline: none;
  transition:
    border-color var(--dur-fast) var(--ease-out),
    box-shadow var(--dur-fast) var(--ease-out);
}
.mi-input:focus,
.mi-select:focus,
.mi-textarea:focus {
  border-color: var(--border-focus);
  box-shadow: var(--shadow-focus);
}
.mi-input::placeholder,
.mi-textarea::placeholder { color: var(--text-placeholder); }
.mi-textarea { resize: vertical; min-height: 96px; }

.mi-input[aria-invalid="true"] { border-color: var(--error-500); }

.mi-hint  { font-size: var(--text-xs); color: var(--text-muted); }
.mi-error { font-size: var(--text-xs); color: var(--error-500); }

/* +971 prefix */
.mi-field--prefixed { position: relative; }
.mi-field--prefixed .mi-prefix {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  color: var(--text-muted);
  pointer-events: none;
}
.mi-field--prefixed .mi-input { padding-left: 60px; }

/* Native select needs its own chevron — the design system uses one. */
.mi-select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 40px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235f7d84' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 18px;
}

/* Checkbox */
.mi-check { display: flex; align-items: flex-start; gap: var(--space-3); cursor: pointer; }
.mi-check input {
  appearance: none;
  -webkit-appearance: none;
  width: 20px; height: 20px;
  flex: 0 0 auto;
  margin-top: 1px;
  border: 1.5px solid var(--border-default);
  border-radius: var(--radius-xs);
  background: var(--surface-field);
  cursor: pointer;
  transition: all var(--dur-fast) var(--ease-out);
}
.mi-check input:checked {
  background: var(--color-primary);
  border-color: var(--color-primary);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5 10 17.5 19 7'/%3E%3C/svg%3E");
  background-size: 15px;
  background-repeat: no-repeat;
  background-position: center;
}
.mi-check input:focus-visible { box-shadow: var(--shadow-focus); }
.mi-check span { font-size: var(--text-sm); color: var(--text-body); line-height: 1.5; }

/* File upload — drag-and-drop document zone */
.mi-upload {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  text-align: center;
  padding: var(--space-5);
  min-height: 116px;
  border: 1.5px dashed var(--border-default);
  border-radius: var(--radius-sm);
  background: var(--surface-field);
  cursor: pointer;
  transition: all var(--dur-fast) var(--ease-out);
}
.mi-upload:hover,
.mi-upload.is-dragging {
  border-color: var(--border-strong);
  background: var(--teal-100);
}
.mi-upload.has-file { border-style: solid; border-color: var(--success-500); background: var(--success-50); }
.mi-upload input[type="file"] { display: none; }
.mi-upload .mi-i { font-size: 24px; color: var(--color-primary); }
.mi-upload-label { font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--text-heading); }
.mi-upload-hint  { font-size: var(--text-xs); color: var(--text-muted); }


/* =============================================================================
   10. Testimonials — 3-column grid
   -----------------------------------------------------------------------------
   Cards sit side by side rather than one-at-a-time. Rotation only kicks in when
   there are MORE testimonials than columns, in which case the grid pages
   through them — otherwise a carousel that never moves is just a slower way to
   show three cards.
   ========================================================================== */

.mi-testimonials { position: relative; }

.mi-testimonial-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
  align-items: stretch;
}

.mi-testimonial-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  margin: 0;
  padding: 30px;
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  box-shadow:
    0 1px 2px rgba(10, 35, 41, 0.04),
    0 10px 26px -14px rgba(10, 35, 41, 0.14);
  transition:
    transform var(--dur-med) var(--ease-out),
    box-shadow var(--dur-med) var(--ease-out),
    border-color var(--dur-med) var(--ease-out);
}
.mi-testimonial-card:hover {
  transform: translateY(-4px);
  border-color: var(--border-strong);
  box-shadow:
    0 2px 4px rgba(10, 35, 41, 0.05),
    0 20px 40px -18px rgba(7, 46, 55, 0.26);
}

/* A quote mark anchors the card without needing an image. */
.mi-testimonial-card::before {
  content: "";
  width: 34px;
  height: 26px;
  background: var(--color-accent);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 7.5C6.5 8 5 10 5 13v3.5h4.5V12H7c0-1.8.8-2.9 2.4-3.2Z'/%3E%3Cpath d='M18 7.5c-2.5.5-4 2.5-4 5.5v3.5h4.5V12H16c0-1.8.8-2.9 2.4-3.2Z'/%3E%3C/svg%3E") center/contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 7.5C6.5 8 5 10 5 13v3.5h4.5V12H7c0-1.8.8-2.9 2.4-3.2Z'/%3E%3Cpath d='M18 7.5c-2.5.5-4 2.5-4 5.5v3.5h4.5V12H16c0-1.8.8-2.9 2.4-3.2Z'/%3E%3C/svg%3E") center/contain no-repeat;
  flex: 0 0 auto;
}

.mi-testimonial-quote {
  font-family: var(--font-display);
  font-size: var(--text-md);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--text-heading);
  margin: 0;
  flex: 1 1 auto;
}

.mi-testimonial-foot {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding-top: var(--space-4);
  border-top: 1px solid var(--border-subtle);
}

/* Initial-in-a-disc stands in for a portrait the client has not supplied. */
.mi-testimonial-avatar {
  width: 44px;
  height: 44px;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-pill);
  background: var(--teal-100);
  color: var(--color-primary);
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  font-size: 17px;
}

.mi-testimonial-author { display: block; font-weight: var(--weight-bold); color: var(--text-heading); font-size: var(--text-base); }
.mi-testimonial-role   { display: block; font-size: var(--text-sm); color: var(--text-muted); }

.mi-rating { display: inline-flex; gap: 3px; font-size: 17px; }
.mi-rating .mi-i { background-color: var(--warning-500); }

/* Paging, only rendered when there are more cards than columns. */
.mi-testimonials.is-rotating .mi-testimonial { display: none; }
.mi-testimonials.is-rotating .mi-testimonial.is-active { display: flex; }

.mi-dots { display: flex; justify-content: center; gap: var(--space-2); margin-top: var(--space-8); }
.mi-dot {
  width: 9px; height: 9px;
  border-radius: var(--radius-pill);
  border: none; padding: 0;
  background: var(--border-default);
  cursor: pointer;
  transition: all var(--dur-fast) var(--ease-out);
}
.mi-dot.is-active { background: var(--color-primary); width: 26px; }

@media (max-width: 1024px) { .mi-testimonial-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 767px)  { .mi-testimonial-grid { grid-template-columns: 1fr; } .mi-testimonial-card { padding: 24px; } }


/* =============================================================================
   11. Partner marquee (custom widget) — 38s linear loop
   ========================================================================== */

.mi-marquee {
  overflow: hidden;
  /* Fade the strip out at both edges rather than cutting it hard. */
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.mi-marquee-track {
  display: flex;
  width: max-content;
  animation: mi-scroll var(--mi-marquee-speed, 38s) linear infinite;
}
.mi-marquee:hover .mi-marquee-track { animation-play-state: paused; }

@keyframes mi-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

.mi-partner {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  padding: 0 var(--space-8);
  height: 72px;
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-tight);
  color: var(--ink-400);
  white-space: nowrap;
  transition: color var(--dur-fast) var(--ease-out);
}
.mi-partner:hover { color: var(--color-primary); }
.mi-partner img { max-height: 40px; width: auto; object-fit: contain; }


/* =============================================================================
   12. Quote modal (custom widget)
   ========================================================================== */

.mi-modal {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: none;
  align-items: flex-start;
  justify-content: center;
  padding: 40px 20px;
  overflow-y: auto;
  background: rgba(7, 46, 55, 0.55);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}
.mi-modal.is-open { display: flex; }
body.mi-modal-open { overflow: hidden; }

.mi-modal-panel {
  width: 100%;
  max-width: 560px;
  background: var(--surface-card);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-modal);
  overflow: hidden;
  animation: mi-modal-in var(--dur-med) var(--ease-out);
}
@keyframes mi-modal-in {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: none; }
}

.mi-modal-head {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: 22px 26px;
  background: var(--color-primary);
  color: var(--white);
}
.mi-modal-title {
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  font-size: var(--text-lg);
}
.mi-modal-sub { font-size: var(--text-xs); color: rgba(255, 255, 255, 0.8); }

.mi-modal-close {
  width: 34px; height: 34px;
  display: flex; align-items: center; justify-content: center;
  border: none;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.14);
  color: var(--white);
  cursor: pointer;
  font-size: 18px;
  transition: background var(--dur-fast) var(--ease-out);
}
.mi-modal-close:hover { background: rgba(255, 255, 255, 0.26); }

.mi-modal-body { padding: 26px; display: flex; flex-direction: column; gap: var(--space-4); }
.mi-modal-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.mi-modal-rule { height: 1px; background: var(--border-subtle); margin: 2px 0; }
.mi-modal-legend {
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--text-heading);
}
.mi-modal-fineprint { font-size: var(--text-xs); color: var(--text-muted); margin: 2px 0; }
.mi-modal-fineprint .mi-req { color: var(--error-500); }

/* Success state, shared by the modal and the wizard. */
.mi-success { text-align: center; padding: 48px 32px; }
.mi-success-mark {
  width: 64px; height: 64px;
  margin: 0 auto 18px;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--radius-pill);
  background: var(--success-50);
  color: var(--success-500);
  font-size: 32px;
}
.mi-success h3 { font-size: var(--text-xl); margin-bottom: var(--space-2); }
.mi-success p  { color: var(--text-muted); font-size: var(--text-sm); max-width: 380px; margin: 0 auto var(--space-6); }


/* =============================================================================
   13. Quote wizard (custom widget) — 5-step stepper
   ========================================================================== */

.mi-wizard { max-width: 820px; margin-inline: auto; }

.mi-stepper { display: flex; align-items: center; margin-bottom: var(--space-8); }
.mi-step { display: flex; flex-direction: column; align-items: center; gap: var(--space-2); flex: 0 0 auto; }
.mi-step-num {
  width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--radius-pill);
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  font-size: 15px;
  background: var(--white);
  color: var(--text-muted);
  border: 2px solid var(--border-default);
  transition: all var(--dur-med) var(--ease-out);
}
.mi-step.is-done .mi-step-num,
.mi-step.is-current .mi-step-num {
  background: var(--color-primary);
  color: var(--white);
  border-color: var(--color-primary);
}
.mi-step-label {
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  text-align: center;
  color: var(--text-muted);
  max-width: 84px;
  line-height: 1.25;
}
.mi-step.is-current .mi-step-label { font-weight: var(--weight-bold); color: var(--color-primary); }

.mi-step-bar {
  flex: 1;
  height: 2px;
  margin: 0 6px 24px;
  background: var(--border-default);
  transition: background var(--dur-med) var(--ease-out);
}
.mi-step-bar.is-done { background: var(--color-primary); }

.mi-wizard-card {
  background: var(--white);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: var(--space-8);
}
.mi-wizard-title { font-size: var(--text-xl); margin-bottom: 6px; }
.mi-wizard-sub   { color: var(--text-muted); font-size: var(--text-sm); margin-bottom: 26px; }

.mi-panel { display: none; }
.mi-panel.is-active { display: block; }

.mi-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
.mi-form-grid > .mi-span-2 { grid-column: 1 / -1; }

/* Insurance-type picker (step 1) */
.mi-type-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.mi-type {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  padding: 22px 12px;
  border-radius: var(--radius-md);
  background: var(--surface-field);
  border: 1.5px solid var(--border-subtle);
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: var(--weight-semibold);
  color: var(--text-body);
  cursor: pointer;
  transition: all var(--dur-fast) var(--ease-out);
}
.mi-type .mi-i { font-size: 30px; color: var(--ink-500); }
.mi-type:hover { border-color: var(--border-strong); }
.mi-type.is-selected {
  background: var(--teal-100);
  border-color: var(--color-primary);
  color: var(--color-primary);
}
.mi-type.is-selected .mi-i { color: var(--color-primary); }

/* Review table (step 5) */
.mi-review {
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  overflow: hidden;
  margin-bottom: 22px;
}
.mi-review-row {
  display: flex;
  justify-content: space-between;
  gap: var(--space-4);
  padding: 13px 18px;
  font-size: var(--text-sm);
}
.mi-review-row:nth-child(even) { background: var(--surface-field); }
.mi-review-row dt { color: var(--text-muted); }
.mi-review-row dd { margin: 0; color: var(--text-heading); font-weight: var(--weight-semibold); text-align: right; }

.mi-wizard-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-3);
  margin-top: 30px;
  padding-top: 22px;
  border-top: 1px solid var(--border-subtle);
}
.mi-wizard-nav .mi-btn--ghost .mi-i { transform: rotate(180deg); }


/* =============================================================================
   14. Calculator (custom widget)
   ========================================================================== */

.mi-calc { max-width: 760px; margin-inline: auto; }

.mi-calc-tabs {
  display: flex;
  gap: var(--space-2);
  margin-bottom: var(--space-6);
  flex-wrap: wrap;
  justify-content: center;
}
.mi-calc-tab {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 10px 18px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border-default);
  background: var(--white);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--text-body);
  cursor: pointer;
  transition: all var(--dur-fast) var(--ease-out);
}
.mi-calc-tab .mi-i { font-size: 18px; }
.mi-calc-tab:hover { border-color: var(--border-strong); }
.mi-calc-tab.is-active {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--white);
}

.mi-calc-form { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
.mi-calc-form .mi-span-2 { grid-column: 1 / -1; margin-top: var(--space-1); }

.mi-calc-result {
  margin-top: var(--space-6);
  padding: var(--space-6);
  border-radius: var(--radius-md);
  background: var(--teal-100);
  border: 1px solid var(--border-strong);
  text-align: center;
}
.mi-calc-result[hidden] { display: none; }
.mi-calc-result-label {
  font-size: 13px;
  font-weight: var(--weight-semibold);
  color: var(--teal-800);
  margin-bottom: 6px;
}
.mi-calc-result-value {
  font-family: var(--font-display);
  font-weight: var(--weight-extra);
  font-size: var(--text-3xl);
  color: var(--color-primary);
  letter-spacing: var(--tracking-tight);
}
.mi-calc-result-note {
  font-size: 13px;
  color: var(--teal-800);
  margin: 10px auto 0;
  max-width: 440px;
  line-height: 1.5;
}
.mi-calc-disclaimer {
  text-align: center;
  font-size: 13px;
  color: var(--text-muted);
  margin-top: var(--space-5);
}


/* =============================================================================
   15. Site chrome — hero motif, WhatsApp float
   ========================================================================== */

/* The hero's only decoration: two very faint accent circles. No gradients. */
.mi-hero { position: relative; overflow: hidden; }
.mi-hero > * { position: relative; z-index: 1; }
.mi-hero::before,
.mi-hero::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  background: var(--color-accent);
  opacity: 0.07;
  pointer-events: none;
  z-index: 0;
}
.mi-hero::before { width: 460px; height: 460px; top: -140px;  right: -110px; }
.mi-hero::after  { width: 300px; height: 300px; bottom: -130px; right: 220px; }

.mi-whatsapp-float {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 500;
  width: 58px;
  height: 58px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-pill);
  background: #25d366;
  color: #fff;
  font-size: 30px;
  box-shadow: 0 6px 18px rgba(37, 211, 102, 0.4);
  transition: all var(--dur-med) var(--ease-out);
}
.mi-whatsapp-float:hover {
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 10px 26px rgba(37, 211, 102, 0.5);
}


/* =============================================================================
   16. Responsive
   Breakpoints match the prototype's index.html media queries.
   ========================================================================== */

@media (max-width: 1024px) {
  .mi-hero::before,
  .mi-hero::after { display: none; }
}

@media (max-width: 900px) {
  .mi-section { padding-block: var(--space-12); }
  .mi-form-grid,
  .mi-calc-form,
  .mi-modal-grid { grid-template-columns: 1fr; }
  .mi-testimonial-quote { font-size: var(--text-md); }
}

@media (max-width: 640px) {
  .mi-type-grid { grid-template-columns: repeat(2, 1fr); }
  .mi-step-label { display: none; }
  .mi-step-bar { margin-bottom: 0; }
  .mi-wizard-card { padding: var(--space-5); }
  .mi-wizard-nav { flex-direction: column-reverse; }
  .mi-wizard-nav .mi-btn { width: 100%; }
  .mi-review-row { flex-direction: column; gap: 2px; }
  .mi-review-row dd { text-align: left; }
}


/* =============================================================================
   17. Quick quote bar — the floating tabbed mini-form that overlaps the hero
   Source: ui_kits/website/Home.jsx > QuickQuoteBar
   ========================================================================== */

.mi-quickbar { position: relative; margin-top: -72px; z-index: 20; }

.mi-quickbar-panel {
  background: var(--white);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  box-shadow: 0 24px 60px rgba(7, 46, 55, 0.20);
  overflow: hidden;
}

.mi-qtabs { display: flex; flex-wrap: wrap; border-bottom: 1px solid var(--border-subtle); }

.mi-qtab {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 18px 14px;
  border: none;
  cursor: pointer;
  background: var(--white);
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: var(--weight-semibold);
  color: var(--text-body);
  box-shadow: inset 0 -3px 0 transparent;
  transition: all var(--dur-fast) var(--ease-out);
}
.mi-qtab .mi-i { font-size: 20px; color: var(--ink-500); }
.mi-qtab:hover { background: var(--surface-hover); }
.mi-qtab.is-active {
  background: var(--bg-tint);
  font-weight: var(--weight-bold);
  color: var(--color-primary);
  box-shadow: inset 0 -3px 0 var(--color-primary);
}
.mi-qtab.is-active .mi-i { color: var(--color-primary); }

.mi-qform {
  padding: var(--space-6);
  display: grid;
  grid-template-columns: 1fr 1fr 1fr auto;
  gap: var(--space-4);
  align-items: end;
}


/* =============================================================================
   18. Catalog card — Products page card whose quote form expands inline
   Source: ui_kits/website/Pages.jsx > CatalogCard
   ========================================================================== */

.mi-catalog-tabs {
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
.mi-catalog-tab {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 13px 24px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border-default);
  background: var(--white);
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  color: var(--text-body);
  cursor: pointer;
  transition: all var(--dur-fast) var(--ease-out);
}
.mi-catalog-tab .mi-i { font-size: 19px; }
.mi-catalog-tab:hover { border-color: var(--border-strong); }
.mi-catalog-tab.is-active {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--white);
  font-weight: var(--weight-bold);
}

.mi-catalog-sub {
  text-align: center;
  color: var(--text-muted);
  font-size: var(--text-sm);
  margin-bottom: 36px;
}

.mi-catalog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }

.mi-catalog-card {
  display: flex;
  flex-direction: column;
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: var(--space-6);
  box-shadow: var(--shadow-xs);
  transition: all var(--dur-med) var(--ease-out);
}
.mi-catalog-card.is-open { border-color: var(--border-strong); box-shadow: var(--shadow-md); }

.mi-catalog-head { display: flex; align-items: flex-start; gap: 14px; }
.mi-catalog-head .mi-medallion { --mi-medallion-size: 48px; font-size: 24px; }
.mi-catalog-title { font-size: var(--text-md); margin-bottom: 6px; }

.mi-catalog-toggle {
  margin-top: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 11px 18px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border-default);
  background: var(--white);
  color: var(--color-primary);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  cursor: pointer;
  transition: all var(--dur-fast) var(--ease-out);
}
.mi-catalog-card.is-open .mi-catalog-toggle {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--white);
}
.mi-catalog-toggle .mi-i { transition: transform var(--dur-fast) var(--ease-out); }
.mi-catalog-card.is-open .mi-catalog-toggle .mi-i { transform: rotate(180deg); }

.mi-catalog-body {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid var(--border-subtle);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.mi-catalog-body[hidden] { display: none; }


/* =============================================================================
   19. Blog — featured banner, filter pills, search, post cards, newsletter
   Source: ui_kits/website/Pages.jsx > Blog
   ========================================================================== */

.mi-featured {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  background: var(--color-primary);
  border-radius: var(--radius-lg);
  overflow: hidden;
  text-decoration: none;
}
.mi-featured-body { padding: 48px 44px; color: var(--white); }
.mi-featured-meta { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 20px; }
.mi-featured h2 { color: var(--white); font-size: var(--text-3xl); line-height: 1.2; margin-bottom: 16px; max-width: 520px; }
.mi-featured p { color: rgba(255, 255, 255, 0.85); font-size: var(--text-md); line-height: 1.6; margin-bottom: 26px; max-width: 500px; }
.mi-featured-more { display: inline-flex; align-items: center; gap: var(--space-2); color: var(--color-accent); font-weight: var(--weight-semibold); font-size: var(--text-md); }
.mi-featured-art {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 260px;
  background: linear-gradient(135deg, var(--teal-400), var(--color-primary));
  color: rgba(255, 255, 255, 0.35);
  font-size: 140px;
}

.mi-blog-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  margin-bottom: 32px;
  flex-wrap: wrap;
}
.mi-blog-pills { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.mi-blog-pill {
  padding: 9px 18px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border-default);
  background: var(--white);
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: var(--weight-semibold);
  color: var(--text-body);
  cursor: pointer;
  transition: all var(--dur-fast) var(--ease-out);
}
.mi-blog-pill:hover { border-color: var(--border-strong); }
.mi-blog-pill.is-active {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--white);
  font-weight: var(--weight-bold);
}

.mi-blog-search { position: relative; flex: 0 0 260px; max-width: 100%; }
.mi-blog-search input {
  width: 100%;
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--text-body);
  background: var(--white);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-pill);
  padding: 11px 16px 11px 42px;
  outline: none;
  transition: border-color var(--dur-fast) var(--ease-out);
}
.mi-blog-search input:focus { border-color: var(--border-focus); box-shadow: var(--shadow-focus); }
.mi-blog-search .mi-i {
  position: absolute;
  left: 15px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-muted);
  font-size: 17px;
}

.mi-post-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6); }

.mi-post-card {
  display: flex;
  flex-direction: column;
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  overflow: hidden;
  text-decoration: none;
  transition: all var(--dur-fast) var(--ease-out);
}
.mi-post-card:hover { border-color: var(--border-strong); box-shadow: var(--shadow-md); transform: translateY(-3px); }
.mi-post-thumb {
  height: 120px;
  background: var(--teal-100);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-primary);
  font-size: 40px;
}
.mi-post-thumb img { width: 100%; height: 100%; object-fit: cover; }
.mi-post-body { padding: 22px 24px; }
.mi-post-meta { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.mi-post-meta .mi-read { font-size: 12px; color: var(--text-muted); }
.mi-post-card h3 { font-size: var(--text-md); margin-bottom: var(--space-2); }
.mi-post-card p { font-size: var(--text-sm); color: var(--text-muted); line-height: 1.55; margin-bottom: 14px; }
.mi-post-more { font-size: 14px; font-weight: var(--weight-semibold); display: inline-flex; align-items: center; gap: 6px; color: var(--color-primary); }

.mi-blog-empty { text-align: center; padding: 60px 20px; color: var(--text-muted); }
.mi-blog-empty[hidden] { display: none; }
.mi-blog-clear { margin-top: 12px; background: none; border: none; color: var(--color-primary); font-weight: var(--weight-semibold); font-size: 14px; cursor: pointer; }

.mi-newsletter {
  background: var(--bg-tint);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: 44px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: center;
}


/* =============================================================================
   20. Claims — helpline banner, claim tracker, downloadable forms
   Source: ui_kits/website/Pages.jsx > Claims, ClaimTracker
   ========================================================================== */

.mi-helpline {
  background: var(--color-primary);
  border-radius: var(--radius-lg);
  padding: 40px 44px;
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  flex-wrap: wrap;
}
.mi-helpline-eyebrow {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.75);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: 6px;
}
.mi-helpline-number {
  font-family: var(--font-display);
  font-weight: var(--weight-extra);
  font-size: var(--text-2xl);
  color: var(--white);
}
.mi-helpline-note { font-size: 13px; color: rgba(255, 255, 255, 0.8); margin-top: 4px; }

.mi-tracker-stages { display: flex; align-items: flex-start; margin-top: 26px; }
.mi-tracker-stage { display: flex; flex-direction: column; align-items: center; gap: var(--space-2); flex: 0 0 auto; width: 64px; }
.mi-tracker-dot {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-pill);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--teal-100);
  color: var(--color-primary);
  font-weight: var(--weight-bold);
  font-size: 13px;
}
.mi-tracker-stage.is-done .mi-tracker-dot,
.mi-tracker-stage.is-current .mi-tracker-dot { background: var(--color-primary); color: var(--white); }
.mi-tracker-stage.is-current .mi-tracker-dot { border: 3px solid var(--color-accent); }
.mi-tracker-label { font-size: 11px; font-weight: var(--weight-semibold); text-align: center; color: var(--text-muted); }
.mi-tracker-stage.is-done .mi-tracker-label,
.mi-tracker-stage.is-current .mi-tracker-label { color: var(--text-heading); }
.mi-tracker-bar { flex: 1; height: 3px; margin-top: 16px; border-radius: 2px; background: var(--border-default); }
.mi-tracker-bar.is-done { background: var(--color-primary); }

/* Downloadable claim-form links */
.mi-formlink {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: 20px 22px;
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  text-decoration: none;
  transition: all var(--dur-fast) var(--ease-out);
}
.mi-formlink:hover { border-color: var(--border-strong); box-shadow: var(--shadow-xs); }
.mi-formlink .mi-medallion { --mi-medallion-size: 46px; font-size: 22px; }
.mi-formlink-title { font-weight: var(--weight-semibold); color: var(--text-heading); font-size: var(--text-sm); }
.mi-formlink-meta { font-size: 12px; color: var(--text-muted); margin-top: 2px; }


/* =============================================================================
   21. About — numbered watermark, timeline, photo slots, team
   Source: ui_kits/website/Pages.jsx > About, PhotoSlot
   ========================================================================== */

/* The big ghosted step number on How-it-works / Claims cards.
   Rendered as a real <span class="mi-num"> inside the card — see
   numbered_card() in tools/gen_templates.py for why a ::before will not do. */
.mi-numbered { position: relative; }
.mi-num {
  position: absolute;
  top: 18px;
  right: 22px;
  font-family: var(--font-display);
  font-size: 42px;
  font-weight: var(--weight-extra);
  line-height: 1;
  color: var(--teal-100);
  pointer-events: none;
  user-select: none;
}

.mi-timeline { max-width: 760px; margin-inline: auto; position: relative; }
.mi-timeline::before {
  content: "";
  position: absolute;
  left: 27px;
  top: 8px;
  bottom: 8px;
  width: 2px;
  background: var(--border-default);
}
.mi-timeline-list { display: flex; flex-direction: column; gap: 28px; }
.mi-timeline-item { display: flex; gap: var(--space-6); align-items: flex-start; position: relative; }
.mi-timeline-year {
  width: 56px;
  height: 56px;
  flex: 0 0 auto;
  border-radius: var(--radius-pill);
  background: var(--color-primary);
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: var(--weight-extra);
  font-size: 15px;
  box-shadow: 0 0 0 6px var(--bg-tint);
  z-index: 1;
}
.mi-timeline-body {
  flex: 1;
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 20px 24px;
  margin-top: 2px;
}

/* Placeholder for imagery the client has not supplied yet. */
.mi-photoslot {
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-lg);
  overflow: hidden;
  position: relative;
  background: linear-gradient(135deg, var(--teal-100), var(--teal-200));
  border: 1px solid var(--border-subtle);
  display: flex;
  align-items: center;
  justify-content: center;
}
.mi-photoslot .mi-i { position: absolute; font-size: 72px; color: var(--color-primary); opacity: 0.5; }
.mi-photoslot-label {
  position: relative;
  font-size: 12px;
  font-weight: var(--weight-semibold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--teal-800);
  background: rgba(255, 255, 255, 0.65);
  padding: 4px 12px;
  border-radius: var(--radius-pill);
}
.mi-photoslot--square { aspect-ratio: 1 / 1; border-radius: 0; border: none; border-bottom: 1px solid var(--border-subtle); }

.mi-team-card {
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.mi-team-body { padding: 18px 20px; }
.mi-team-role { font-size: var(--text-sm); color: var(--color-primary); font-weight: var(--weight-semibold); margin: 0; }


/* =============================================================================
   22. Contact — social links, map
   ========================================================================== */

.mi-contact-row {
  display: flex;
  gap: 14px;
  align-items: center;
  padding: 18px 20px;
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
}
.mi-contact-row .mi-medallion { --mi-medallion-size: 46px; font-size: 22px; border-radius: var(--radius-pill); }
.mi-contact-label { font-size: 13px; color: var(--text-muted); }
.mi-contact-value { font-weight: var(--weight-semibold); color: var(--text-heading); }

.mi-socials { display: flex; gap: 10px; }
.mi-social {
  width: 42px;
  height: 42px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-primary);
  color: var(--white);
  text-decoration: none;
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  font-size: 14px;
  transition: background var(--dur-fast) var(--ease-out);
}
.mi-social:hover { background: var(--color-primary-hover); color: var(--white); }

.mi-map {
  display: block;
  width: 100%;
  height: 420px;
  border: 0;
}
.mi-map-frame {
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--border-subtle);
  box-shadow: var(--shadow-xs);
}


/* =============================================================================
   23. Partners — logo grid
   ========================================================================== */

.mi-partner-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 18px; }
.mi-partner-tile {
  height: 96px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0 16px;
  background: var(--white);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  font-size: 16px;
  color: var(--ink-500);
  transition: all var(--dur-fast) var(--ease-out);
}
.mi-partner-tile:hover { border-color: var(--border-strong); color: var(--color-primary); box-shadow: var(--shadow-xs); }

/* Testimonials as a static 3-up grid (the homepage layout in the source). */
.mi-testimonial-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6); }
.mi-testimonial-card {
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: var(--space-8);
  box-shadow: var(--shadow-xs);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.mi-testimonial-card .mi-testimonial-quote { font-size: var(--text-md); margin: 0; }


/* =============================================================================
   24. Responsive for sections 17–23
   ========================================================================== */

@media (max-width: 1100px) {
  .mi-partner-grid { grid-template-columns: repeat(3, 1fr); }
  .mi-catalog-grid,
  .mi-post-grid,
  .mi-testimonial-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 900px) {
  .mi-quickbar { margin-top: var(--space-8); }
  .mi-qform { grid-template-columns: 1fr; }
  .mi-featured,
  .mi-newsletter { grid-template-columns: 1fr; }
  .mi-featured-body { padding: var(--space-8); }
  .mi-featured-art { min-height: 180px; font-size: 90px; }
  .mi-catalog-grid,
  .mi-post-grid,
  .mi-testimonial-grid { grid-template-columns: 1fr; }
  .mi-helpline { flex-direction: column; align-items: flex-start; }
  .mi-blog-bar { flex-direction: column; align-items: stretch; }
  .mi-blog-search { flex: 1 1 auto; }
  .mi-newsletter { padding: var(--space-8); }
}

@media (max-width: 640px) {
  .mi-partner-grid { grid-template-columns: repeat(2, 1fr); }
  .mi-timeline::before { display: none; }
  .mi-timeline-item { flex-direction: column; gap: var(--space-3); }
  .mi-tracker-stage { width: 48px; }
  .mi-numbered::before { font-size: 32px; }
}

/* Hero headline. --text-5xl is now fluid (clamp) in tokens.css, so it scales
   continuously instead of stepping down at one breakpoint. */
.mi-h1 .elementor-heading-title { font-size: var(--text-5xl); line-height: 1.05; }


/* =============================================================================
   25. "Become a partner" block
   Layout kept here rather than inline so breakpoints can override it.
   ========================================================================== */

.mi-become {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 44px;
  align-items: center;
  background: var(--color-primary);
  border-radius: var(--radius-lg);
  padding: 56px 48px;
  color: var(--white);
}
.mi-become h2 { color: var(--white); }


/* =============================================================================
   26. Responsive — authoritative pass
   -----------------------------------------------------------------------------
   Sections 16 and 24 above grew organically and broke at 1100 / 900 / 640,
   which does NOT line up with Elementor's own breakpoints (tablet 1024,
   mobile 767). Between 768 and 900 that left Elementor in tablet mode while
   these styles were still desktop — grids disagreeing with their containers.

   This block is last in the file, so at equal specificity it wins, and it
   breaks where Elementor breaks. Add new responsive rules HERE.
   ========================================================================== */

/* --- Tablet: <= 1024px ---------------------------------------------------- */
@media (max-width: 1024px) {
  :root { --section-pad: 56px; }

  .mi-become,
  .mi-featured,
  .mi-newsletter { grid-template-columns: 1fr; }

  .mi-become { padding: 40px 32px; }
  .mi-newsletter { padding: 32px; }
  .mi-featured-body { padding: 36px 32px; }
  .mi-featured-art { min-height: 200px; font-size: 110px; }

  .mi-partner-grid { grid-template-columns: repeat(3, 1fr); }
  .mi-catalog-grid,
  .mi-post-grid,
  .mi-testimonial-grid { grid-template-columns: repeat(2, 1fr); }

  .mi-helpline { padding: 32px; }

  /* The hero's decorative circles crowd a narrow viewport. */
  .mi-hero::before,
  .mi-hero::after { display: none; }
}

/* --- Mobile: <= 767px ----------------------------------------------------- */
@media (max-width: 767px) {
  :root {
    --section-pad: 44px;
    --navbar-height: 64px;
  }

  .mi-navbar { padding-inline: var(--space-4) !important; }  /* Elementor sets 40px inline */

  .mi-become { padding: 28px 20px; }
  .mi-newsletter { padding: 24px; }
  .mi-featured-body { padding: 28px 22px; }
  .mi-featured-art { min-height: 150px; font-size: 76px; }

  .mi-partner-grid { grid-template-columns: repeat(2, 1fr); }
  .mi-partner-tile { height: 76px; font-size: 14px; }

  .mi-catalog-grid,
  .mi-post-grid,
  .mi-testimonial-grid,
  .mi-form-grid,
  .mi-calc-form,
  .mi-modal-grid,
  .mi-qform { grid-template-columns: 1fr; }

  .mi-section-head { margin-bottom: var(--space-8); }

  /* Helpline stacks; the buttons go full width so they stay tappable. */
  .mi-helpline { flex-direction: column; align-items: flex-start; padding: 26px 20px; }
  .mi-helpline .mi-btn { width: 100%; }

  /* Timeline loses its spine and becomes a simple stack. */
  .mi-timeline::before { display: none; }
  .mi-timeline-item { flex-direction: column; gap: var(--space-3); }
  .mi-timeline-year { box-shadow: none; }

  /* Claim tracker: 4 stages will not fit side by side at this width. */
  .mi-tracker-stages { flex-wrap: wrap; gap: var(--space-3); }
  .mi-tracker-stage { width: auto; flex: 1 0 60px; }
  .mi-tracker-bar { display: none; }

  /* Wizard */
  .mi-type-grid { grid-template-columns: repeat(2, 1fr); }
  .mi-step-label { display: none; }
  .mi-step-bar { margin-bottom: 0; }
  .mi-wizard-card { padding: var(--space-5); }
  .mi-wizard-nav { flex-direction: column-reverse; }
  .mi-wizard-nav .mi-btn { width: 100%; }
  .mi-review-row { flex-direction: column; gap: 2px; }
  .mi-review-row dd { text-align: left; }

  /* Blog controls stack */
  .mi-blog-bar { flex-direction: column; align-items: stretch; }
  .mi-blog-search { flex: 1 1 auto; }
  .mi-blog-pills { overflow-x: auto; flex-wrap: nowrap; padding-bottom: 4px; }
  .mi-blog-pill { flex: 0 0 auto; }

  /* Catalog + calculator tab strips scroll rather than wrap into a block. */
  .mi-catalog-tabs,
  .mi-calc-tabs { flex-wrap: nowrap; overflow-x: auto; justify-content: flex-start; padding-bottom: 4px; }
  .mi-catalog-tab,
  .mi-calc-tab { flex: 0 0 auto; }

  .mi-modal { padding: 16px 12px; }
  .mi-modal-body { padding: 20px; }
  .mi-map { height: 300px; }
  .mi-quickbar { margin-top: var(--space-6) !important; }
  .mi-numbered::before { font-size: 30px; top: 16px; right: 18px; }
  .mi-testimonial-quote { font-size: var(--text-md); }
}

/* --- Small phones: <= 400px ----------------------------------------------- */
@media (max-width: 400px) {
  .mi-partner-grid,
  .mi-type-grid { grid-template-columns: 1fr; }
  .mi-stat-value { font-size: var(--text-2xl); }
}

/* --- Nothing may cause a sideways scroll ---------------------------------- */
html, body { overflow-x: hidden; }
img, iframe, video, table { max-width: 100%; }


/* =============================================================================
   27. Reclaiming our own <button> elements from the Elementor Kit
   -----------------------------------------------------------------------------
   The Kit's button styling is emitted as:

     .elementor-kit-N button,
     .elementor-kit-N input[type="button"],
     .elementor-kit-N input[type="submit"],
     .elementor-kit-N .elementor-button { background:#0F5260; border-radius:999px; … }

   That is intentional for CTAs — but it also hits EVERY bare <button> on the
   page, and our widgets use <button> for tabs, filter pills, accordion toggles,
   carousel dots and the modal close. Left alone they all turn into dark teal
   pills.

   The Kit selector is specificity (0,2,0). This stylesheet loads after the Kit
   CSS, so repeating a class — `.mi-qtab.mi-qtab` — matches that specificity and
   wins on order. No !important, and the Kit still governs real CTAs.

   Only the properties the Kit actually sets need restating.
   ========================================================================== */

/* --- Real CTAs: keep the Kit's pill, restate our variants ------------------ */
.mi-btn.mi-btn {
  border-radius: var(--radius-pill);
  font-family: var(--font-body);
  font-weight: var(--weight-semibold);
  font-size: var(--text-base);
  padding: 13px 24px;
  background: var(--color-primary);
  color: var(--text-on-primary);
}
.mi-btn.mi-btn:hover        { background: var(--color-primary-hover); color: var(--text-on-primary); }
.mi-btn.mi-btn--sm          { font-size: var(--text-sm); padding: 9px 16px; }
.mi-btn.mi-btn--lg          { font-size: var(--text-md); padding: 17px 32px; }
.mi-btn.mi-btn--accent      { background: var(--color-accent); color: var(--text-on-accent); }
.mi-btn.mi-btn--accent:hover{ background: var(--teal-400); color: var(--text-on-accent); }
.mi-btn.mi-btn--secondary   { background: var(--white); color: var(--color-primary); border-color: var(--border-default); }
.mi-btn.mi-btn--ghost       { background: transparent; color: var(--color-primary); }
.mi-btn.mi-btn--ghost:hover { background: var(--surface-hover); color: var(--color-primary); }
.mi-btn.mi-btn--on-dark     { background: var(--white); color: var(--color-primary); }

/* --- Quick quote bar tabs -------------------------------------------------- */
.mi-qtab.mi-qtab {
  background: var(--white);
  color: var(--text-body);
  border-radius: 0;
  padding: 18px 14px;
  font-size: 15px;
  font-weight: var(--weight-semibold);
}
.mi-qtab.mi-qtab:hover { background: var(--surface-hover); }
.mi-qtab.mi-qtab.is-active {
  background: var(--bg-tint);
  color: var(--color-primary);
  font-weight: var(--weight-bold);
}

/* --- Calculator + catalog tab pills ---------------------------------------- */
.mi-calc-tab.mi-calc-tab,
.mi-catalog-tab.mi-catalog-tab {
  background: var(--white);
  color: var(--text-body);
  border-radius: var(--radius-pill);
  font-weight: var(--weight-semibold);
}
.mi-calc-tab.mi-calc-tab    { padding: 10px 18px; font-size: var(--text-sm); }
.mi-catalog-tab.mi-catalog-tab { padding: 13px 24px; font-size: var(--text-base); }
.mi-calc-tab.mi-calc-tab.is-active,
.mi-catalog-tab.mi-catalog-tab.is-active {
  background: var(--color-primary);
  color: var(--white);
}

/* --- Catalog card toggle --------------------------------------------------- */
.mi-catalog-toggle.mi-catalog-toggle {
  background: var(--white);
  color: var(--color-primary);
  border-radius: var(--radius-pill);
  padding: 11px 18px;
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
}
.mi-catalog-card.is-open .mi-catalog-toggle.mi-catalog-toggle {
  background: var(--color-primary);
  color: var(--white);
}

/* --- Blog filter pills ----------------------------------------------------- */
.mi-blog-pill.mi-blog-pill {
  background: var(--white);
  color: var(--text-body);
  border-radius: var(--radius-pill);
  padding: 9px 18px;
  font-size: 14px;
  font-weight: var(--weight-semibold);
}
.mi-blog-pill.mi-blog-pill.is-active {
  background: var(--color-primary);
  color: var(--white);
}
.mi-blog-clear.mi-blog-clear {
  background: none;
  color: var(--color-primary);
  border-radius: 0;
  padding: 0;
  font-size: 14px;
}

/* --- Wizard insurance-type picker ------------------------------------------ */
.mi-type.mi-type {
  background: var(--surface-field);
  color: var(--text-body);
  border-radius: var(--radius-md);
  padding: 22px 12px;
  font-size: 15px;
  font-weight: var(--weight-semibold);
}
.mi-type.mi-type.is-selected {
  background: var(--teal-100);
  color: var(--color-primary);
}

/* --- Testimonial dots ------------------------------------------------------ */
.mi-dot.mi-dot {
  background: var(--border-default);
  border-radius: var(--radius-pill);
  padding: 0;
  width: 9px;
  height: 9px;
}
.mi-dot.mi-dot.is-active { background: var(--color-primary); width: 26px; }

/* --- Modal close ----------------------------------------------------------- */
.mi-modal-close.mi-modal-close {
  background: rgba(255, 255, 255, 0.14);
  color: var(--white);
  border-radius: var(--radius-pill);
  padding: 0;
  width: 34px;
  height: 34px;
  font-size: 18px;
}
.mi-modal-close.mi-modal-close:hover { background: rgba(255, 255, 255, 0.26); }

/* --- File upload zones are <label>, but keep them out of harm's way -------- */
.mi-upload.mi-upload { background: var(--surface-field); color: inherit; }


/* =============================================================================
   28. Footer — brief spec: About | Services | Quick Links | Contact
   ========================================================================== */

.mi-footer { color: rgba(255, 255, 255, 0.75); }

.mi-foot-grid { align-items: start; }

.mi-foot-title.mi-foot-title,
.mi-footer h4 {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: var(--weight-bold);
  color: var(--white);
  letter-spacing: 0;
  margin: 0;
}

.mi-foot-text {
  font-size: 14px;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.72);
  max-width: 300px;
  margin: 0;
}

.mi-foot-links,
.mi-foot-contact {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 11px;
}

.mi-foot-links a {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.72);
  transition: color var(--dur-fast) var(--ease-out);
}
.mi-foot-links a:hover { color: var(--color-accent); }

.mi-foot-contact li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.72);
}
.mi-foot-contact .mi-i { color: var(--color-accent); font-size: 17px; margin-top: 2px; }
.mi-foot-contact a { color: rgba(255, 255, 255, 0.72); }
.mi-foot-contact a:hover { color: var(--color-accent); }
.mi-foot-contact em { font-style: normal; opacity: 0.6; }

.mi-foot-social { display: flex; gap: 10px; }
.mi-footer .mi-social {
  width: 38px;
  height: 38px;
  background: rgba(255, 255, 255, 0.10);
  border-radius: var(--radius-sm);
  font-size: 13px;
}
.mi-footer .mi-social:hover { background: var(--color-accent); color: var(--teal-900); }

/* Legal bar */
.mi-footer-bar { border-top: 1px solid rgba(255, 255, 255, 0.12); }
.mi-footer-bar .e-con-inner,
.mi-footer-bar { padding-top: 22px; }

.mi-foot-legal {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.6);
}

@media (max-width: 767px) {
  .mi-foot-legal { flex-direction: column; align-items: flex-start; gap: 8px; }
  .mi-foot-text { max-width: none; }
}


/* =============================================================================
   29. Full-width layout adjustments
   ========================================================================== */

/* The catalog card is a flex column, so its toggle stretched to the full card
   width. It should hug its label like a button, not span the card. */
.mi-catalog-toggle.mi-catalog-toggle { align-self: flex-start; }

/* Same trap on any inline action inside a card column. */
.mi-card > .mi-btn:not(.mi-btn--full) { align-self: flex-start; }

@media (max-width: 767px) {
  /* On a phone a full-width tap target is easier, so let them stretch again. */
  .mi-catalog-toggle.mi-catalog-toggle,
  .mi-card > .mi-btn:not(.mi-btn--full) { align-self: stretch; }
}


/* =============================================================================
   30. Card system v2 — visual polish
   -----------------------------------------------------------------------------
   The v1 cards were technically on-brand but visually inert: a hairline box
   with a whisper shadow reads as "unstyled" rather than "restrained". This pass
   adds depth and motion WITHOUT breaking the design system's two hard rules —
   flat fills only (no gradients) and a single teal hue.

   What does the work:
     · a layered shadow (tight contact shadow + wide soft ambient) instead of
       one flat blur — this is what makes a card look lifted rather than drawn
     · a teal accent bar that wipes across the top edge on hover
     · the medallion inverting to solid teal and lifting with the card
     · the title warming to primary, and the arrow sliding, on hover
   ========================================================================== */

.mi-card {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-lg);
  padding: var(--space-8);
  border: 1px solid var(--border-subtle);
  background: var(--surface-card);
  box-shadow:
    0 1px 2px rgba(10, 35, 41, 0.04),
    0 10px 26px -14px rgba(10, 35, 41, 0.14);
  transition:
    transform var(--dur-med) var(--ease-out),
    box-shadow var(--dur-med) var(--ease-out),
    border-color var(--dur-med) var(--ease-out);
}

/* The accent bar. Scales in from the left so it reads as a deliberate wipe. */
.mi-card--interactive::after {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: var(--color-accent);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--dur-med) var(--ease-out);
  pointer-events: none;
  z-index: 2;
}

.mi-card--interactive:hover,
.mi-card--interactive:focus-within {
  transform: translateY(-6px);
  border-color: var(--border-strong);
  box-shadow:
    0 2px 4px rgba(10, 35, 41, 0.05),
    0 22px 44px -18px rgba(7, 46, 55, 0.28);
}

.mi-card--interactive:hover::after,
.mi-card--interactive:focus-within::after { transform: scaleX(1); }

/* Title warms to brand teal as the card lifts. */
.mi-card--interactive:hover .mi-card-title,
.mi-card--interactive:hover .elementor-icon-box-title,
.mi-card--interactive:hover .elementor-heading-title {
  color: var(--color-primary);
  transition: color var(--dur-med) var(--ease-out);
}


/* --- Medallion: give the icon presence ------------------------------------ */

.mi-medallion,
.mi-medallion-box .elementor-icon {
  position: relative;
  box-shadow: 0 0 0 1px rgba(15, 82, 96, 0.06) inset;
  transition:
    background var(--dur-med) var(--ease-out),
    color var(--dur-med) var(--ease-out),
    transform var(--dur-med) var(--ease-out),
    box-shadow var(--dur-med) var(--ease-out);
}

.mi-card--interactive:hover .mi-medallion,
.mi-card--interactive:hover .mi-medallion-box .elementor-icon {
  background: var(--color-primary);
  color: var(--white);
  transform: translateY(-2px);
  box-shadow: 0 8px 18px -6px rgba(15, 82, 96, 0.45);
}

/* The arrow on a card's CTA travels on hover. */
.mi-card--interactive:hover .elementor-button-icon,
.mi-card--interactive:hover .mi-btn .mi-i-arrow-right {
  transform: translateX(4px);
  transition: transform var(--dur-med) var(--ease-out);
}
.elementor-button-icon,
.mi-btn .mi-i-arrow-right { transition: transform var(--dur-med) var(--ease-out); }


/* --- Stat cards: make the number the hero --------------------------------- */

.mi-stat { padding-block: var(--space-10); }

.mi-stat-value {
  font-size: var(--text-4xl);
  letter-spacing: -0.03em;
  background: none;
}

/* A short accent rule under the number ties the tile to the brand. */
.mi-stat-label { position: relative; padding-top: 14px; }
.mi-stat-label::before {
  content: "";
  position: absolute;
  top: 6px;
  left: 50%;
  transform: translateX(-50%);
  width: 26px;
  height: 2px;
  border-radius: 2px;
  background: var(--color-accent);
}


/* --- Product / icon-box cards: tighter internal rhythm -------------------- */

.mi-medallion-box .elementor-icon-box-title { margin-bottom: 8px; }
.mi-medallion-box .elementor-icon-box-description { margin: 0; }
.mi-medallion-box .elementor-icon-box-icon { margin-bottom: var(--space-5); }


/* --- Catalog cards -------------------------------------------------------- */

.mi-catalog-card {
  border-radius: var(--radius-lg);
  box-shadow:
    0 1px 2px rgba(10, 35, 41, 0.04),
    0 10px 26px -14px rgba(10, 35, 41, 0.14);
  transition:
    transform var(--dur-med) var(--ease-out),
    box-shadow var(--dur-med) var(--ease-out),
    border-color var(--dur-med) var(--ease-out);
}
.mi-catalog-card:hover {
  transform: translateY(-4px);
  border-color: var(--border-strong);
  box-shadow:
    0 2px 4px rgba(10, 35, 41, 0.05),
    0 20px 40px -18px rgba(7, 46, 55, 0.26);
}
.mi-catalog-card:hover .mi-medallion {
  background: var(--color-primary);
  color: var(--white);
}
.mi-catalog-card.is-open { transform: none; }


/* --- Testimonial: a real pull-quote --------------------------------------- */

/* (Removed the decorative circle above the rotator — each card now carries
   its own quote mark, so the standalone ornament was a leftover.) */

.mi-rating { gap: 4px; }


/* --- Section heads: give the eyebrow more presence ------------------------ */

.mi-section-head .mi-badge {
  padding: 7px 16px;
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-weight: var(--weight-bold);
  background: var(--teal-100);
  color: var(--teal-800);
}


/* --- Respect reduced motion ----------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .mi-card--interactive:hover,
  .mi-catalog-card:hover { transform: none; }
}


/* =============================================================================
   31. Product card — matched to the design system's ProductCard
   Left-aligned, 28px padding, medallion 56px, CTA pinned to the bottom edge so
   a row of cards has its buttons on one line regardless of copy length.
   ========================================================================== */

.mi-product-card { padding: 28px; }

.mi-product-card .mi-medallion-box .elementor-icon {
  width: 56px;
  height: 56px;
  font-size: 28px;
  border-radius: var(--radius-md);
  margin-bottom: 18px;
}
.mi-product-card .mi-medallion-box .elementor-icon-box-icon { margin-bottom: 0; }

.mi-product-card .elementor-icon-box-title { font-size: var(--text-lg); margin-bottom: 8px; }
.mi-product-card .elementor-icon-box-description { margin-bottom: 20px; }

.mi-product-card .mi-features { margin-bottom: 22px; }
.mi-product-card .mi-features .elementor-icon-list-icon { color: var(--color-accent); }

/* Push the CTA to the bottom so buttons align across the row. */
.mi-product-card > .elementor-widget-button { margin-top: auto; }

/* Left-aligned icon boxes: kill Elementor's centring. */
.mi-medallion-box.elementor-position-top .elementor-icon-box-wrapper { text-align: left; }
.mi-medallion-box .elementor-icon-box-icon { display: block; }


/* =============================================================================
   32. Catalog card — same anatomy as the ProductCard
   Medallion on top, title, blurb, then a full-width primary CTA pinned to the
   bottom edge so every card in a row ends on the same line.
   ========================================================================== */

.mi-catalog-card {
  display: flex;
  flex-direction: column;
  padding: 28px;
  gap: 0;
}

.mi-catalog-card .mi-medallion {
  --mi-medallion-size: 56px;
  font-size: 28px;
  border-radius: var(--radius-md);
  margin-bottom: 18px;
}

.mi-catalog-card .mi-catalog-title {
  font-size: var(--text-lg);
  margin: 0 0 8px;
  transition: color var(--dur-med) var(--ease-out);
}
.mi-catalog-card:hover .mi-catalog-title { color: var(--color-primary); }

.mi-catalog-card .mi-card-body { margin: 0 0 20px; }

/* CTA sits on the bottom edge; the toggle is a real primary button now. */
.mi-catalog-card .mi-catalog-toggle.mi-catalog-toggle {
  margin-top: auto;
  align-self: stretch;
  width: 100%;
  background: var(--color-primary);
  color: var(--white);
  border-color: transparent;
  padding: 13px 24px;
  font-size: var(--text-base);
}
.mi-catalog-card .mi-catalog-toggle.mi-catalog-toggle:hover {
  background: var(--color-primary-hover);
}
.mi-catalog-card.is-open .mi-catalog-toggle.mi-catalog-toggle {
  background: var(--teal-900);
}

/* The accent wipe, matching the product cards. */
.mi-catalog-card { position: relative; overflow: hidden; }
.mi-catalog-card::after {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: var(--color-accent);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--dur-med) var(--ease-out);
  pointer-events: none;
}
.mi-catalog-card:hover::after { transform: scaleX(1); }

.mi-catalog-card:hover .mi-medallion {
  transform: translateY(-2px);
  box-shadow: 0 8px 18px -6px rgba(15, 82, 96, 0.45);
}

/* The expanded form should not be squeezed by the flex column. */
.mi-catalog-body { flex: 0 0 auto; }


/* =============================================================================
   33. One card language across the whole site
   -----------------------------------------------------------------------------
   .mi-card already carries the v2 treatment. These are the other card-shaped
   surfaces that were still on the flat v1 look — blog posts, team members,
   partner tiles, claim-form links and the calculator panel. Same radius, same
   layered shadow, same lift, so the site reads as one system.
   ========================================================================== */

.mi-post-card,
.mi-team-card,
.mi-partner-tile,
.mi-formlink {
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-subtle);
  background: var(--surface-card);
  box-shadow:
    0 1px 2px rgba(10, 35, 41, 0.04),
    0 10px 26px -14px rgba(10, 35, 41, 0.14);
  transition:
    transform var(--dur-med) var(--ease-out),
    box-shadow var(--dur-med) var(--ease-out),
    border-color var(--dur-med) var(--ease-out);
}

.mi-post-card:hover,
.mi-team-card:hover,
.mi-partner-tile:hover,
.mi-formlink:hover {
  transform: translateY(-4px);
  border-color: var(--border-strong);
  box-shadow:
    0 2px 4px rgba(10, 35, 41, 0.05),
    0 20px 40px -18px rgba(7, 46, 55, 0.26);
}

/* Blog cards: accent wipe + travelling arrow, matching the product cards. */
.mi-post-card { position: relative; overflow: hidden; }
.mi-post-card::after {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: var(--color-accent);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--dur-med) var(--ease-out);
  z-index: 2;
}
.mi-post-card:hover::after { transform: scaleX(1); }
.mi-post-card:hover h3 { color: var(--color-primary); }
.mi-post-card h3 { transition: color var(--dur-med) var(--ease-out); }
.mi-post-card:hover .mi-post-more .mi-i { transform: translateX(4px); }
.mi-post-more .mi-i { transition: transform var(--dur-med) var(--ease-out); }

/* Claim-form download links: arrow travels, medallion inverts. */
.mi-formlink:hover .mi-medallion {
  background: var(--color-primary);
  color: var(--white);
}
.mi-formlink:hover .mi-i-arrow-right { transform: translateX(4px); }
.mi-formlink .mi-i-arrow-right { transition: transform var(--dur-med) var(--ease-out); }

/* Partner tiles read as logos, so they lift without the accent bar. */
.mi-partner-tile:hover { color: var(--color-primary); }

/* Timeline entries and the helpline banner share the card radius. */
.mi-timeline-body { border-radius: var(--radius-lg); }
.mi-calc .mi-card { padding: 34px; }

@media (prefers-reduced-motion: reduce) {
  .mi-post-card:hover,
  .mi-team-card:hover,
  .mi-partner-tile:hover,
  .mi-formlink:hover { transform: none; }
}


/* =============================================================================
   34. Blog filter pills on small screens
   Horizontal scrolling hid categories behind an invisible edge — on a phone the
   visitor could not tell there were more. Wrapping shows every category at once,
   which is what a filter is for.
   ========================================================================== */

@media (max-width: 767px) {
  .mi-blog-pills {
    flex-wrap: wrap;
    overflow-x: visible;
    gap: 8px;
    padding-bottom: 0;
  }
  .mi-blog-pill.mi-blog-pill {
    flex: 0 0 auto;
    padding: 8px 14px;
    font-size: 13px;
  }
  .mi-blog-bar { gap: 14px; }
  .mi-blog-search { flex: 1 1 100%; }
}

/* Download links get an explicit affordance. */
.mi-formlink .mi-dl { transition: transform var(--dur-med) var(--ease-out); }
.mi-formlink:hover .mi-dl { transform: translateY(2px) rotate(90deg); }


/* =============================================================================
   35. Accreditation band, comparison table, FAQ
   -----------------------------------------------------------------------------
   Three blocks that give the site the weight an insurance brand needs, and
   break the long run of white sections the page had before.
   ========================================================================== */

/* --- A faint brand motif so dark bands are not flat slabs ----------------- */
.mi-band-pattern { position: relative; overflow: hidden; }
.mi-band-pattern::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  /* Kept low and pushed to the right so it reads as a surface texture rather
     than a shape sitting behind the headline. The first attempt put a large
     disc at 12% 18% — directly under the h1 — which looked like a mistake. */
  opacity: 0.9;
  background-image:
    radial-gradient(circle at 92% 8%,  rgba(127, 208, 222, 0.10) 0, transparent 34%),
    radial-gradient(circle at 74% 96%, rgba(127, 208, 222, 0.07) 0, transparent 30%);
}
.mi-band-pattern > * { position: relative; z-index: 1; }

/* --- Accreditation tiles --------------------------------------------------- */
.mi-accred {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 12px;
  padding: 28px 20px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, 0.05);
  transition: background var(--dur-med) var(--ease-out),
              border-color var(--dur-med) var(--ease-out);
}
.mi-accred:hover {
  background: rgba(255, 255, 255, 0.09);
  border-color: var(--color-accent);
}
.mi-accred-title {
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  font-size: var(--text-base);
  color: var(--white);
}
.mi-accred-sub { font-size: var(--text-sm); color: rgba(255, 255, 255, 0.7); }

/* --- Broker vs direct comparison ------------------------------------------ */
.mi-compare {
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(10, 35, 41, 0.04),
              0 10px 26px -14px rgba(10, 35, 41, 0.14);
}

.mi-cmp-head,
.mi-cmp-row {
  display: grid;
  grid-template-columns: 1.1fr 1fr 1.2fr;
  gap: 0;
}

.mi-cmp-head > div {
  padding: 18px 24px;
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  font-size: var(--text-sm);
  letter-spacing: var(--tracking-tight);
}
.mi-cmp-h-direct { background: var(--surface-field); color: var(--text-muted); }
.mi-cmp-h-us     { background: var(--color-primary); color: var(--white); }

.mi-cmp-row > div {
  padding: 16px 24px;
  font-size: var(--text-sm);
  border-top: 1px solid var(--border-subtle);
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.mi-cmp-label  { font-weight: var(--weight-semibold); color: var(--text-heading); }
.mi-cmp-direct { background: var(--surface-field); color: var(--text-muted); }
.mi-cmp-us     { background: var(--teal-50); color: var(--text-body); font-weight: var(--weight-medium); }

.mi-cmp-direct .mi-i { color: var(--error-500); font-size: 16px; margin-top: 3px; flex: 0 0 auto; }
.mi-cmp-us .mi-i     { color: var(--success-500); font-size: 16px; margin-top: 3px; flex: 0 0 auto; }

@media (max-width: 767px) {
  .mi-cmp-head { display: none; }
  .mi-cmp-row  { grid-template-columns: 1fr; }
  .mi-cmp-row > div { border-top: 0; }
  .mi-cmp-label {
    background: var(--color-primary);
    color: var(--white);
    font-family: var(--font-display);
  }
  .mi-cmp-direct::before { content: "Direct: "; font-weight: 600; color: var(--text-heading); }
  .mi-cmp-us::before     { content: "With us: "; font-weight: 600; color: var(--color-primary); }
  .mi-cmp-row { border-bottom: 1px solid var(--border-subtle); }
}

/* --- FAQ accordion --------------------------------------------------------- */
.mi-faq { max-width: 860px; margin-inline: auto; }

.mi-faq .elementor-accordion-item {
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  margin-bottom: 12px;
  overflow: hidden;
  background: var(--surface-card);
  transition: border-color var(--dur-med) var(--ease-out),
              box-shadow var(--dur-med) var(--ease-out);
}
.mi-faq .elementor-accordion-item:hover { border-color: var(--border-strong); }

.mi-faq .elementor-tab-title {
  font-family: var(--font-display);
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  color: var(--text-heading);
  padding: 20px 24px;
}
.mi-faq .elementor-tab-title.elementor-active {
  color: var(--color-primary);
  background: var(--bg-tint);
}
.mi-faq .elementor-tab-content {
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  color: var(--text-muted);
  border-top: 1px solid var(--border-subtle);
  padding: 20px 24px;
}
.mi-faq .elementor-accordion-icon { color: var(--color-primary); }


/* =============================================================================
   36. Readable description text
   -----------------------------------------------------------------------------
   Body/description copy was set at 14px throughout, which reads as fine print
   on a 1440px screen and undersells the content. Descriptions move to 15px with
   a more generous line-height; labels, meta and badges stay small on purpose.
   ========================================================================== */

.mi-card-body,
.mi-catalog-card .mi-card-body,
.elementor-widget-icon-box .elementor-icon-box-description,
.mi-medallion-box .elementor-icon-box-description,
.mi-post-card p,
.mi-accred-sub,
.mi-features .elementor-icon-list-text,
ul.mi-features > li,
.mi-cmp-row > div,
.mi-faq .elementor-tab-content {
  font-size: 15px;
  line-height: 1.65;
}

/* Lead paragraphs under a section heading get a little more presence again. */
.mi-section-head .elementor-widget-text-editor p {
  font-size: var(--text-md);
  line-height: 1.6;
  color: var(--text-muted);
}

.mi-testimonial-quote { font-size: var(--text-lg); line-height: 1.45; }
.mi-testimonial-role  { font-size: 14px; }


/* =============================================================================
   37. Footer legibility
   The footer ran at rgba(255,255,255,.72) on deep teal — technically passing,
   visually dull. Links and body go to near-white; only the legal line stays
   quieter, because it should be.
   ========================================================================== */

.mi-footer,
.mi-foot-text,
.mi-foot-contact li,
.mi-foot-contact a,
.mi-foot-links a {
  color: #ffffff;
}

.mi-foot-text { color: rgba(255, 255, 255, 0.92); font-size: 15px; }
.mi-foot-links a { font-size: 15px; }
.mi-foot-links a:hover,
.mi-foot-contact a:hover { color: var(--color-accent); }
.mi-foot-contact li { font-size: 15px; }
.mi-foot-contact em { color: rgba(255, 255, 255, 0.7); }

/* The copyright / regulatory line stays deliberately secondary. */
.mi-foot-legal { color: rgba(255, 255, 255, 0.75); font-size: 13.5px; }


/* =============================================================================
   38. Inner-page hero — breadcrumb, lead, CTAs, proof points
   ========================================================================== */

.mi-page-hero .mi-crumb {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.75);
}
.mi-page-hero .mi-crumb a { color: rgba(255, 255, 255, 0.75); }
.mi-page-hero .mi-crumb a:hover { color: var(--color-accent); }
.mi-page-hero .mi-crumb .mi-i {
  font-size: 14px;
  transform: rotate(-90deg);
  color: rgba(255, 255, 255, 0.45);
}
.mi-page-hero .mi-crumb [aria-current] { color: var(--white); font-weight: var(--weight-semibold); }

.mi-hero-lead {
  color: rgba(255, 255, 255, 0.9);
  font-size: var(--text-lg);
  line-height: 1.55;
  max-width: 620px;
  margin: 0;
}

.mi-hero-trust {
  list-style: none;
  margin: var(--space-4) 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-6);
}
.mi-hero-trust li {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 14px;
  font-weight: var(--weight-semibold);
  color: rgba(255, 255, 255, 0.9);
}
.mi-hero-trust .mi-i { color: var(--color-accent); font-size: 18px; }

@media (max-width: 767px) {
  .mi-hero-trust { gap: var(--space-3) var(--space-5); }
  .mi-page-hero .elementor-widget-button,
  .mi-page-hero .elementor-widget-button .elementor-button { width: 100%; }
}


/* =============================================================================
   39. About — milestones column
   ========================================================================== */

.mi-ms-note {
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: 24px;
}
.mi-ms-note p { margin: 12px 0 0; font-size: 15px; line-height: 1.65; color: var(--text-muted); }

.mi-ms-stat {
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: 20px;
  text-align: center;
}
.mi-ms-num {
  display: block;
  font-family: var(--font-display);
  font-weight: var(--weight-extra);
  font-size: var(--text-2xl);
  color: var(--color-primary);
  line-height: 1;
}
.mi-ms-lbl { display: block; margin-top: 6px; font-size: 14px; color: var(--text-muted); }

/* The timeline is no longer a lone centred strip. */
.mi-timeline { max-width: none; margin-inline: 0; }

@media (max-width: 1024px) {
  .mi-timeline { max-width: 760px; margin-inline: auto; }
}


/* =============================================================================
   40. Social brand marks
   Real filled logos replace the old "in / IG / f / X" text tiles, which read as
   placeholders rather than brand marks.
   ========================================================================== */

.mi-socials { display: flex; gap: 10px; flex-wrap: wrap; }

.mi-social {
  width: 42px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-md);
  background: var(--teal-100);
  color: var(--color-primary);
  font-size: 18px;
  text-decoration: none;
  transition:
    background var(--dur-fast) var(--ease-out),
    color var(--dur-fast) var(--ease-out),
    transform var(--dur-fast) var(--ease-out);
}
.mi-social:hover {
  background: var(--color-primary);
  color: var(--white);
  transform: translateY(-2px);
}

/* On the dark footer they invert. */
.mi-footer .mi-social {
  background: rgba(255, 255, 255, 0.10);
  color: var(--white);
}
.mi-footer .mi-social:hover {
  background: var(--color-accent);
  color: var(--teal-900);
}


/* =============================================================================
   41. Form fields — clearer labels, and a phone prefix that is a real segment
   -----------------------------------------------------------------------------
   The +971 prefix was absolutely positioned on top of the input with padding
   pushed to 60px — it looked like text floating over the field and broke as
   soon as the label wrapped. It is now a proper adjoining segment with its own
   divider, which is how every payment and phone field worth copying does it.
   ========================================================================== */

.mi-field { gap: 8px; }

.mi-label {
  font-size: 14px;
  font-weight: var(--weight-bold);
  color: var(--text-heading);
  letter-spacing: 0.01em;
  display: flex;
  align-items: center;
  gap: 6px;
}
.mi-label .mi-req { color: var(--error-500); }

.mi-input,
.mi-select,
.mi-textarea {
  padding: 13px 15px;
  font-size: 15px;
  border-radius: var(--radius-sm);
  background: var(--white);
  border: 1.5px solid var(--border-default);
}
.mi-input:hover,
.mi-select:hover,
.mi-textarea:hover { border-color: var(--ink-400); }
.mi-input:focus,
.mi-select:focus,
.mi-textarea:focus {
  border-color: var(--border-focus);
  box-shadow: var(--shadow-focus);
  background: var(--white);
}

/* --- Phone -----------------------------------------------------------------
   The country code now lives in the PLACEHOLDER ("+971 50 123 4567") and the
   field is a single inline input. The previous two-box prefix segment added a
   second border, competed with the label, and became cramped on a phone — a
   lot of chrome to communicate four characters.
   -------------------------------------------------------------------------- */
.mi-field--prefixed { position: static; }
.mi-field--prefixed .mi-prefix { display: none; }
.mi-field--prefixed .mi-input {
  padding-left: 15px;
  border-radius: var(--radius-sm);
}

input[type="tel"]::placeholder { letter-spacing: 0.01em; }

.mi-hint { font-size: 13px; color: var(--text-muted); }


/* =============================================================================
   42. About — the promises panel beside mission & vision
   ========================================================================== */

.mi-promise {
  background: var(--color-primary);
  border-radius: var(--radius-lg);
  padding: 34px;
  color: var(--white);
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.mi-promise h3 { color: var(--white); font-size: var(--text-xl); margin: 0; }

.mi-promise-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
  flex: 1 1 auto;
}
.mi-promise-list li { display: flex; gap: 14px; align-items: flex-start; }

.mi-promise-ic {
  width: 40px;
  height: 40px;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.12);
  color: var(--color-accent);
  font-size: 20px;
}
.mi-promise-list strong {
  display: block;
  font-family: var(--font-display);
  font-size: 15px;
  color: var(--white);
}
.mi-promise-list em {
  display: block;
  font-style: normal;
  font-size: 14px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.82);
  margin-top: 2px;
}


/* =============================================================================
   43. Calculator — two-column working layout
   -----------------------------------------------------------------------------
   Was a single narrow card with the result appearing underneath, so the page
   looked half-empty until you pressed Calculate and then jumped. Inputs now sit
   on the left and the result column holds its place from the start.
   ========================================================================== */

.mi-calc { max-width: 1080px; margin-inline: auto; }

.mi-calc-layout {
  display: grid;
  grid-template-columns: 1.25fr 0.95fr;
  gap: var(--space-6);
  align-items: start;
}

.mi-calc-panel { padding: 32px; }
.mi-calc-panel-title { font-size: var(--text-xl); margin: 0 0 6px; }
.mi-calc-panel-sub { font-size: 15px; color: var(--text-muted); margin: 0 0 var(--space-6); }

.mi-calc-side { display: flex; flex-direction: column; gap: var(--space-4); position: sticky; top: 100px; }

/* Placeholder so the column is never blank */
.mi-calc-empty {
  background: var(--surface-card);
  border: 1px dashed var(--border-default);
  border-radius: var(--radius-lg);
  padding: 32px 26px;
  text-align: center;
}
.mi-calc-empty[hidden] { display: none; }
.mi-calc-empty .mi-medallion { margin: 0 auto 16px; }
.mi-calc-empty h4 { font-size: var(--text-md); margin: 0 0 8px; }
.mi-calc-empty p { font-size: 15px; color: var(--text-muted); margin: 0; line-height: 1.6; }

/* Result */
.mi-calc-result {
  margin-top: 0;
  padding: 30px 26px;
  border-radius: var(--radius-lg);
  background: var(--color-primary);
  border: 0;
  text-align: center;
  color: var(--white);
}
.mi-calc-result-label { color: var(--color-accent); font-size: 13px; letter-spacing: .04em; text-transform: uppercase; }
.mi-calc-result-value { color: var(--white); font-size: var(--text-3xl); margin-top: 6px; }
.mi-calc-result-note  { color: rgba(255,255,255,.82); font-size: 13.5px; max-width: none; }
.mi-calc-result .mi-btn { margin-top: 18px; background: var(--color-accent); color: var(--text-on-accent); }
.mi-calc-result .mi-btn:hover { background: var(--white); color: var(--color-primary); }

/* Factors */
.mi-calc-factors {
  background: var(--bg-tint);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: 26px;
}
.mi-calc-factors h4 { font-size: var(--text-md); margin: 0 0 14px; }
.mi-calc-factors ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.mi-calc-factors li { display: flex; gap: 10px; align-items: flex-start; font-size: 15px; line-height: 1.55; color: var(--text-body); }
.mi-calc-factors .mi-i { color: var(--color-primary); font-size: 17px; margin-top: 2px; flex: 0 0 auto; }
.mi-calc-help {
  display: flex; gap: 10px; align-items: flex-start;
  margin: 18px 0 0; padding-top: 16px;
  border-top: 1px solid var(--border-subtle);
  font-size: 14px; color: var(--text-muted); line-height: 1.55;
}
.mi-calc-help .mi-i { color: var(--color-primary); font-size: 17px; margin-top: 2px; }

.mi-calc-tabs { margin-bottom: var(--space-6); }

@media (max-width: 1024px) {
  .mi-calc-layout { grid-template-columns: 1fr; }
  .mi-calc-side { position: static; }
}
@media (max-width: 767px) {
  .mi-calc-panel { padding: 22px; }
}


/* =============================================================================
   44. Single blog post
   Editorial column with a measured line length, real typography for the body,
   and a route onward at the end.
   ========================================================================== */

.mi-post-title .elementor-heading-title { max-width: 20ch; }
.mi-post-meta-bar { color: rgba(255, 255, 255, 0.85); font-size: 14px; }
.mi-post-meta-bar a { color: var(--color-accent); }
.mi-post-meta-bar .elementor-icon-list-item { margin-inline-end: var(--space-5); }

.mi-article { max-width: 760px; margin-inline: auto; }

.mi-post-hero-img img {
  width: 100%;
  border-radius: var(--radius-lg);
  box-shadow: 0 10px 26px -14px rgba(10, 35, 41, 0.2);
}

/* Long-form body copy. */
.mi-prose { font-size: 17px; line-height: 1.75; color: var(--text-body); }
.mi-prose p { margin: 0 0 1.15em; }
.mi-prose h2 {
  font-size: var(--text-2xl);
  margin: 1.8em 0 .5em;
  color: var(--text-heading);
}
.mi-prose h3 { font-size: var(--text-xl); margin: 1.5em 0 .45em; }
.mi-prose ul, .mi-prose ol { margin: 0 0 1.15em; padding-left: 1.3em; }
.mi-prose li { margin-bottom: .5em; }
.mi-prose a { color: var(--text-link); text-decoration: underline; text-underline-offset: 2px; }
.mi-prose blockquote {
  margin: 1.6em 0;
  padding: 20px 24px;
  border-left: 3px solid var(--color-accent);
  background: var(--bg-tint);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  font-family: var(--font-display);
  font-size: var(--text-md);
  color: var(--text-heading);
}
.mi-prose img { border-radius: var(--radius-md); margin: 1.4em 0; }
.mi-prose strong { color: var(--text-heading); }

.mi-post-share {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-5) 0;
  border-top: 1px solid var(--border-subtle);
  border-bottom: 1px solid var(--border-subtle);
  font-size: 14px;
  font-weight: var(--weight-semibold);
  color: var(--text-muted);
  flex-wrap: wrap;
}

.mi-back .mi-i { transform: rotate(180deg); }
.mi-back { align-self: flex-start; }

@media (max-width: 767px) {
  .mi-prose { font-size: 16px; }
  .mi-post-share { flex-direction: column; align-items: flex-start; }
}