/* ==========================================================================
   MEDIWALLET — WEBSITE
   Source: Figma "MediWallet - Website (Claude)" — Homepage · Desktop 10332:2
   Deep navy ground (#000e2b), mint-green signal (#18ed9e), Outfit throughout.
   Pill buttons, 20-24px card radii, swoosh brand motif as exported SVG.

   Source of truth for this design's system. Authored here only.
   `node lib/sync-css.mjs` inlines this file into each page's <helmet>,
   because the .dc.html runtime and the export resolver read CSS only from
   a raw  block and silently drop a local stylesheet <link>.
   ========================================================================== */

*{box-sizing:border-box;margin:0;padding:0}

:root{
  /* grounds */
  --mw-navy:#000e2b;          /* page ground */
  --mw-navy-card:#0e1a36;     /* raised card on navy */

  /* ONE GREEN. #18ED9E is the brand green and it is now the only one on the
     site — fills, pills, patterns, logos, ticks, asterisks and green text
     alike, on every ground.

     This replaced a two-ink system: the mint stayed on navy, and light
     sections swapped in a deep green (#08794F) for anything that had to read
     as text. That was defensible on contrast — 5.4:1 rather than 1.5:1 — but
     it put a visibly different green on the required-field asterisks, the
     section kickers and the accent words in headings, which is precisely the
     "cannot be a different green" the brand rules forbid. Consistency won.

     THE TRADE, recorded so nobody rediscovers it as a bug: #18ED9E on white
     is 1.5:1, well under WCAG AA (4.5:1 for body text, 3:1 for large). That
     affects the kickers, the accent words in headings, the inline links in
     the FAQ answers, and the required-field asterisks. Reversing is one line
     — see the GROUND MAP block below. */
  --mw-green:#18ed9e;
  --mw-accent-ink:var(--mw-green);
  --mw-green-ink:#061e52;     /* ink on green pills */

  /* ink */
  --mw-ink:#050f29;           /* headings on white */
  --mw-body-dark:#47546b;     /* body on white */
  --mw-body-light:#d1dbeb;    /* body on navy */
  --mw-muted:#7f8ea6;         /* struck-out features (5.2:1 on navy-card) */
  --mw-foot-muted:#b2bfd1;
  --mw-placeholder:#5a6473;   /* hint text in form fields */
  --mw-danger:#c8473c;        /* invalid field outline + error text */

  /* light surfaces */
  --mw-field:#f1f4f6;         /* form field ground */
  --mw-surface-soft:#f4f7fb;  /* tinted panel on white */
  --mw-surface-inert:#ebedf2; /* placeholder / disabled block */
  --mw-line-light:#e0e5ed;    /* hairline on white */
  --mw-field-line:#868d97;    /* field boundary, 3.4:1 on white */
  --mw-photo-ground:#ccd4db;  /* shows only until a cover photo paints */

  /* lines */
  --mw-line-navy:rgba(255,255,255,.12);
  --mw-line-soft:rgba(255,255,255,.18);

  /* shape */
  --mw-r-card:24px;
  --mw-r-cover:20px;
  --mw-r-band:40px;
  --mw-r-pill:999px;

  /* type — Outfit is the brand face, Arial the sanctioned fallback. The
     generic system stack is deliberately NOT in here: when the webfont
     failed to load on the WordPress build the page silently rendered in
     Segoe UI, which is not a MediWallet typeface. Arial next means a
     missing Outfit degrades to something the brand actually allows. */
  --mw-font:'Outfit',Arial,Helvetica,sans-serif;

  /* layout */
  --mw-max:1540px;
  --mw-gutter:clamp(20px,3.3vw,64px);
}

html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body,.mw{
  font-family:var(--mw-font);
  color:#fff;
  background:var(--mw-navy);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
.mw{display:block;overflow-x:clip}
.mw img{max-width:100%;display:block}
.mw a{color:inherit;text-decoration:none}

.mw-skip,.mw a.mw-skip{
  position:absolute;left:-9999px;top:0;z-index:100;
  background:var(--mw-green);color:var(--mw-navy);
  padding:10px 18px;border-radius:0 0 12px 0;font-weight:600;
}
.mw-skip:focus{left:0}

/* ---------------------------------------------------------------
   GROUND MAP — which accent ink a subtree gets
   Every light-ground section is listed here. The list is kept, and kept
   accurate, even though all of them now resolve to the same brand green:
   it is the one place to change if the low contrast of #18ED9E on white
   ever has to be walked back. Point this at a darker green and every
   kicker, accent heading word, inline link and required-field asterisk on
   a white ground follows, in one edit — which is how it worked before
   brand consistency took precedence over legibility.
   --------------------------------------------------------------- */
.mw-cover,.mw-download,.mw-std-why,.mw-std-care,.mw-zero-care,
.mw-pts-how,.mw-pts-terms,.mw-net-main,.mw-res-main,.mw-faq-main,
.mw-apply-main,.mw-contact-main,.mw-sug-main,.mw-fp-benefits,
.mw-fp-care,.mw-hv-main,.mw-hv-terms,
.mw-std-card,.mw-fp-card,.mw-form-card,.mw-faq-table{
  --mw-accent-ink:var(--mw-green);
}
/* dark islands inside those light sections */
.mw-cover-card,.mw-hv-shop__bar,.mw-res-table th,.mw-faq-table__head{
  --mw-accent-ink:var(--mw-green);
}

/* ---------------------------------------------------------------
   BROWSER SURFACES — the parts we didn't draw still carry the brand
   --------------------------------------------------------------- */
.mw ::selection{background:var(--mw-green);color:var(--mw-navy)}
.mw input,.mw textarea,.mw select{caret-color:var(--mw-accent-ink)}
html{scrollbar-color:var(--mw-navy-card) var(--mw-navy);scrollbar-width:thin}
.mw a:not(.mw-btn){text-underline-offset:3px;text-decoration-thickness:from-font}
.mw-std-calc__figure,.mw-res-detail__phone{font-variant-numeric:tabular-nums}

/* One focus treatment for every interactive thing: a 2px accent ring that
   follows its ground, offset clear of the pill edge. Keyboard only —
   pointer users keep the hover states. */
/* outline follows the element's own border-radius — never set radius here,
   it deforms the element on focus instead of shaping the ring */
.mw a:focus-visible,.mw button:focus-visible,.mw .mw-btn:focus-visible,
.mw summary:focus-visible,.mw [tabindex]:focus-visible{
  outline:2px solid var(--mw-accent-ink);outline-offset:3px;
}
.mw-header a:focus-visible,.mw-drawer a:focus-visible,.mw-footer a:focus-visible{
  outline-color:var(--mw-green);
}

/* Fingers get 44px; a mouse doesn't need the bulk. */
@media (pointer:coarse){
  .mw-burger,.mw-res-view,.mw .mw-hv-shop__open,.mw-net-care__nav button{
    min-height:44px;min-width:44px;
  }
  /* text links grow by padding, not by height, so the rhythm survives */
  .mw-footer__links a,.mw .mw-sug-intro a,.mw .mw-hv-shop__note a{
    display:inline-block;padding-block:12px;
  }
  .mw-footer__links .mw-signin__toggle{padding-block:12px}
  .mw-footer__social-icons a{
    display:inline-flex;align-items:center;justify-content:center;
    min-width:44px;min-height:44px;
  }
}
/* Line breaks authored against the 1920px canvas fight the natural wrap
   once the measure is a phone wide. */
@media (max-width:47.5em){
  .mw h1 br,.mw h2 br{display:none}
}

/* ---------------------------------------------------------------
   Shared atoms
   --------------------------------------------------------------- */
.mw-container{width:min(var(--mw-max),100% - 2*var(--mw-gutter));margin-inline:auto}

.mw-btn{
  display:inline-flex;align-items:center;justify-content:center;
  padding:15px 30px;border-radius:var(--mw-r-pill);
  font:600 20px/1.25 var(--mw-font);white-space:nowrap;cursor:pointer;
  border:1.5px solid transparent;
  transition:transform .18s ease,background-color .18s ease,color .18s ease,border-color .18s ease;
}
.mw-btn:hover{transform:translateY(-2px)}
.mw-btn:active{transform:translateY(0)}
/* `.mw a{color:inherit}` outweighs a single class, so variants carry the `.mw` prefix */
.mw-btn--green,.mw .mw-btn--green{background:var(--mw-green);color:var(--mw-navy);border-color:var(--mw-green)}
.mw-btn--white,.mw .mw-btn--white{background:#fff;color:var(--mw-navy);border-color:#fff}
.mw-btn--outline-green,.mw .mw-btn--outline-green{background:transparent;color:var(--mw-accent-ink);border-color:var(--mw-accent-ink)}
.mw-btn--outline-white,.mw .mw-btn--outline-white{background:transparent;color:#fff;border-color:#fff}
.mw .mw-btn--outline-white:hover{background:#fff;color:var(--mw-navy)}
.mw .mw-btn--outline-green:hover{background:var(--mw-green);color:var(--mw-navy)}

/* green kicker with brand tick above/beside */
.mw-kicker{
  display:flex;align-items:center;gap:8px;
  font:500 20px/1.2 var(--mw-font);color:var(--mw-accent-ink);
}
.mw-kicker img{width:20px;height:20px}
.mw-kicker--stack{flex-direction:column;gap:14px;text-align:center;font-size:18px}

/* The brand mark ships as a mint SVG, which is right on navy and 1.5:1 on
   white. Light grounds use the deep-green export (icon-check-deep.svg) —
   swapped at the src, because masking an SVG this shape does not render
   reliably across engines. */

.mw-check-row{display:flex;gap:12px;align-items:flex-start}
.mw-check-row img{width:20px;height:20px;flex:none;margin-top:3px}
.mw-check-row p{font:400 20px/26px var(--mw-font);color:#fff}
.mw-check-row p strong{font-weight:700}
.mw-check-row--off p{color:var(--mw-muted)}

/* ---------------------------------------------------------------
   HEADER
   --------------------------------------------------------------- */
.mw-header{
  position:sticky;top:0;z-index:50;
  background:var(--mw-navy);
}
.mw-header__inner{
  display:flex;align-items:center;gap:clamp(16px,2vw,40px);
  padding:26px var(--mw-gutter);
}
.mw-header__logo img{height:36px;width:auto}
.mw-nav{
  display:flex;align-items:center;gap:clamp(14px,1.8vw,34px);
  margin-left:clamp(16px,6vw,140px);
  font:400 17px/1.25 var(--mw-font);color:#fff;
}
.mw-nav a{position:relative;padding:4px 0;transition:color .18s ease}
.mw-nav a:hover,.mw-nav a[aria-current="page"]{color:var(--mw-accent-ink)}
.mw-header__actions{margin-left:auto;display:flex;gap:20px;align-items:center}

.mw-burger{
  display:none;background:none;border:0;cursor:pointer;padding:11px;
}
.mw-burger svg{width:26px;height:26px;stroke:#fff;stroke-width:2;fill:none;stroke-linecap:round}
.mw-burger .mw-burger-x{display:none}
.mw-burger[aria-expanded="true"] .mw-burger-bars{display:none}
.mw-burger[aria-expanded="true"] .mw-burger-x{display:block}

.mw-drawer{
  display:none;flex-direction:column;gap:4px;
  padding:8px var(--mw-gutter) 24px;background:var(--mw-navy);
  border-bottom:1px solid var(--mw-line-navy);
}
.mw-drawer[data-open="true"]{display:flex}
.mw-drawer a{font:500 17px/2.4 var(--mw-font)}
.mw-drawer a:hover{color:var(--mw-accent-ink)}
.mw-drawer .mw-btn{margin-top:12px;align-self:flex-start}

/* --- sign-in menu ---------------------------------------------------
   Sign In is a CHOICE, not a destination: MediWallet Zero customers use the
   new app on app.mediwallet.io, everyone else is still on the old customer
   portal at mediwallet.co.za until that migration finishes. A single link
   had to be wrong for one of the two groups, so the button opens a small
   menu instead and lets the visitor say which product they hold.

   Both destinations are other applications, so both open in a new tab —
   navigating the whole site away to a login screen loses the page the
   visitor was reading and gives them nothing but the back button.

   One component, three placements: header (drops down), mobile drawer
   (expands in flow) and footer (drops UP, since it sits at the page end). */
.mw-signin{position:relative;display:inline-flex;flex-direction:column}
.mw-signin__menu{
  position:absolute;top:calc(100% + 12px);right:0;z-index:60;
  display:none;flex-direction:column;gap:2px;min-width:264px;
  padding:8px;border-radius:18px;
  background:var(--mw-navy-card);border:1px solid var(--mw-line-navy);
  box-shadow:0 20px 44px rgba(0,0,0,.5);
}
.mw-signin[data-open="true"] > .mw-signin__menu{display:flex}
.mw .mw-signin__menu a{
  display:flex;flex-direction:column;gap:2px;
  padding:12px 14px;border-radius:12px;color:#fff;
  transition:background-color .18s ease,color .18s ease;
}
.mw .mw-signin__menu a:hover,.mw .mw-signin__menu a:focus-visible{
  background:rgba(255,255,255,.07);color:var(--mw-accent-ink);
}
.mw-signin__name{font:600 17px/1.25 var(--mw-font)}
.mw-signin__name strong{font-weight:900}
.mw-signin__hint{font:400 14px/1.3 var(--mw-font);color:var(--mw-foot-muted)}

/* The caret is the whole affordance that this opens rather than navigates,
   so it has to be on the control itself, not only in the ARIA. */
.mw-signin__toggle::after{
  content:"";width:8px;height:8px;margin-left:9px;flex:none;
  border-right:2px solid currentColor;border-bottom:2px solid currentColor;
  transform:translateY(-2px) rotate(45deg);transition:transform .18s ease;
}
.mw-signin[data-open="true"] .mw-signin__toggle::after{transform:translateY(1px) rotate(-135deg)}

/* drawer: no overlay, the menu pushes the rest of the drawer down */
.mw-signin--drawer{display:flex;align-items:flex-start;width:100%}
.mw-signin--drawer .mw-signin__toggle{
  background:none;border:0;padding:0;cursor:pointer;color:#fff;
  font:500 17px/2.4 var(--mw-font);display:inline-flex;align-items:center;
}
.mw-signin--drawer .mw-signin__toggle:hover{color:var(--mw-accent-ink)}
.mw-signin--drawer > .mw-signin__menu{
  position:static;min-width:0;width:100%;margin:4px 0 8px;box-shadow:none;
}

/* footer: opens upward, and the control has to pass for one of the links
   it sits in the middle of */
.mw-signin--up > .mw-signin__menu{top:auto;bottom:calc(100% + 12px);right:auto;left:50%;transform:translateX(-50%)}
.mw-signin--up .mw-signin__toggle{
  background:none;border:0;padding:0;cursor:pointer;color:#fff;
  font:400 18px/1.3 var(--mw-font);display:inline-flex;align-items:center;
}
.mw-signin--up .mw-signin__toggle:hover{color:var(--mw-accent-ink)}

/* ---------------------------------------------------------------
   01 — HERO
   --------------------------------------------------------------- */
.mw-hero{position:relative;overflow:clip;background:var(--mw-navy)}
.mw-hero__inner{
  position:relative;z-index:2;
  display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  align-items:center;gap:clamp(24px,3vw,60px);
  padding:clamp(56px,7.5vh,152px) 0 clamp(72px,10vh,150px);
  width:min(1730px,100% - 2*var(--mw-gutter));
  margin-inline:auto;
  padding-left:clamp(0px,calc((100vw - 1730px)/2*0 + 6.6vw - var(--mw-gutter)),126px);
}
.mw-hero__content{display:flex;flex-direction:column;align-items:flex-start;gap:22px}
.mw-hero__count{font:400 22px/1.3 var(--mw-font);color:#fff}
.mw-hero__title{
  font:800 clamp(52px,5.73vw,110px)/1.018 var(--mw-font);
  color:#fff;letter-spacing:-.01em;
}
.mw-hero__title span{display:block;color:var(--mw-accent-ink)}
.mw-hero__sub{font:400 clamp(24px,2.6vw,50px)/1.3 var(--mw-font);color:#fff;margin-top:8px}
.mw-hero__sub strong{font-weight:600}
.mw-hero__features{display:flex;flex-wrap:wrap;gap:18px 40px;margin-top:22px}
.mw-hero__feature{display:flex;align-items:center;gap:10px;font:400 20px/1.25 var(--mw-font)}
.mw-hero__feature img{width:16px;height:16px}
.mw-hero__pills{display:flex;gap:16px;margin-top:26px;flex-wrap:wrap}
.mw-hero__pills .mw-btn{padding:13px 30px;font-weight:500}
.mw-hero__pills .mw-btn--green strong{font-weight:900}

/* The media column bleeds through the page gutter so the photo sits flush
   against the right edge of the viewport, as in the Figma frame. */
.mw-hero__media{
  position:relative;min-height:clamp(320px,36vw,702px);
  margin-right:calc(-1 * (100vw - min(1730px, 100vw - 2*var(--mw-gutter)))/2);
}
/* One composite export of Figma's hero group (10601:2): the photo with the
   swoosh mark already behind it, on transparency, clipped at the page edge
   exactly as the frame clips it. 792x847 as drawn, so it sits flush right. */
.mw-hero__media img.mw-hero__photo{
  position:relative;z-index:2;width:100%;max-width:792px;height:auto;
  margin-left:auto;
}
.mw-hero__scroll{
  position:absolute;left:var(--mw-gutter);bottom:64px;z-index:3;
  display:flex;flex-direction:column;width:25px;
}
.mw-hero__scroll img{width:25px;height:25px}
.mw-hero__scroll img+img{margin-top:-7px}
/* The stack reads as one gesture: each chevron dips in turn, trailing ones
   fainter, so the eye is pulled down the page instead of bobbing in place. */
.mw-hero__scroll img:nth-child(2){opacity:.72}
.mw-hero__scroll img:nth-child(3){opacity:.44}
@media (prefers-reduced-motion:no-preference){
  .mw-hero__scroll img{
    animation:mw-scroll-cascade 2.2s cubic-bezier(.16,1,.3,1) infinite;
  }
  .mw-hero__scroll img:nth-child(2){animation-delay:.12s}
  .mw-hero__scroll img:nth-child(3){animation-delay:.24s}
  @keyframes mw-scroll-cascade{
    0%,55%,100%{transform:translateY(0)}
    28%{transform:translateY(7px)}
  }
  @keyframes mw-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(8px)}}
}

/* ---------------------------------------------------------------
   02 — WHY CHOOSE
   --------------------------------------------------------------- */
.mw-why{
  display:flex;flex-direction:column;align-items:center;gap:60px;
  padding:96px var(--mw-gutter) 0;background:var(--mw-navy);
}
.mw-intro{display:flex;flex-direction:column;align-items:center;gap:14px;text-align:center}
.mw-intro__h2{
  font:800 clamp(40px,3.96vw,76px)/1.053 var(--mw-font);color:#fff;
  letter-spacing:-.01em;
}
.mw-intro__body{
  font:400 19px/30px var(--mw-font);color:#fff;
  max-width:660px;
}
.mw-intro__body strong{font-weight:600}

.mw-compare{display:flex;gap:48px;justify-content:center;flex-wrap:wrap;width:100%}
.mw-card{
  background:var(--mw-navy-card);border-radius:var(--mw-r-card);
  padding:48px;display:flex;flex-direction:column;gap:30px;
  width:min(680px,100%);
}
.mw-card__logo{
  height:62px;display:flex;align-items:center;justify-content:center;
}
.mw-card__logo img{height:44px;width:auto}
.mw-card__logo img.mw-logo-zero{height:62px}
.mw-card__features{display:flex;flex-direction:column;gap:18px}
/* Both cards run the same feature axis, so the rows read across, and each
   carries its own CTA so the decision can be acted on where it is made.
   The "Best if you…" summary line above each list was cut on request. */
.mw-card{justify-content:space-between}
.mw-card > .mw-btn{align-self:flex-start;margin-top:4px}

/* PARTNER LOGOS — seven marks, laid out individually.
   They used to be the one 1368px strip export scaled to fit. On a phone that
   either shrank all seven to illegibility or (scrolled) showed four and hid
   Intercare, KRSTL and Audiology off-canvas. The strip is now used as a
   sprite: each logo is its own box cropped out of the same export, so the row
   wraps on a tablet and stacks on a phone with every partner still visible.
   --px/--py/--pw/--ph are that logo's box in the 1368x62 sheet. */
.mw-partners{
  padding-top:24px;width:100%;
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
  gap:clamp(26px,3vw,58px);
}
.mw-partner{
  --s:1;flex:none;
  width:calc(var(--pw) * var(--s));height:calc(var(--ph) * var(--s));
  background-image:url("../img/partner-logos-strip.a76a4a56.svg");
  background-repeat:no-repeat;
  background-size:calc(1368px * var(--s)) calc(62px * var(--s));
  background-position:calc(var(--px) * var(--s) * -1) calc(var(--py) * var(--s) * -1);
}
.mw-partner--clicks{--px:0px;--py:32px;--pw:152.7px;--ph:21.3px}
.mw-partner--spec-savers{--px:196.7px;--py:24px;--pw:91.3px;--ph:37.4px}
.mw-partner--intercare{--px:331.9px;--py:25.9px;--pw:114.3px;--ph:33.5px}
.mw-partner--contact-lens-club{--px:490.3px;--py:29.2px;--pw:193.7px;--ph:27.1px}
.mw-partner--execuspecs{--px:734.2px;--py:36.7px;--pw:179.2px;--ph:12px}
.mw-partner--krstl{--px:957.5px;--py:35.4px;--pw:128.3px;--ph:14.6px}
.mw-partner--audiology{--px:1129.8px;--py:24px;--pw:237.3px;--ph:37.4px}

.mw-lead-cta{display:flex;gap:16px;justify-content:center;padding:40px 0 48px;flex-wrap:wrap}

/* The divider is the section's bottom EDGE, so it bleeds back out of .mw-why's
   gutter padding and runs the full page width. Inset, it stopped short of both
   corners and read as a graphic sitting in the section rather than the navy →
   white transition it is. */
.mw-why .mw-wave{
  width:calc(100% + 2*var(--mw-gutter));
  margin-inline:calc(-1 * var(--mw-gutter));
}

/* wave divider: navy → white (and flipped for footer) */
.mw-wave{
  /* max(), not clamp(): see the note on .mw-pattern. Both stretch the same fixed
     1920x102 frame, so capping the height while the width keeps growing stretches
     it horizontally only. 5.3125vw is the frame's own aspect ratio. */
  width:100%;height:max(40px,5.3125vw);
  /* resolved from pages/ (the CSS is inlined there), not from assets/css/ */
  /* 100% 100%, not cover: the divider is a 1920x102 wave drawn to span the
     whole page. Under `cover` a 390px-wide box scaled it up and centre-cropped
     it, so on a phone the pattern stopped part-way across the screen instead
     of running edge to edge. Stretching an SVG this shallow costs nothing. */
  background:url("../img/wave-divider.ca6421fd.svg") center bottom/100% 100% no-repeat;
}
.mw-wave--flip{transform:scaleY(-1)}
/* Held inside the page gutter instead of bleeding to the viewport edge. On the
   home page the divider is inset already, because the section around it
   (.mw-why) is padded by the gutter; a hero that pads only its own text needs
   this to match. Opt-in per instance. */
.mw-wave--inset{width:calc(100% - 2*var(--mw-gutter));margin-inline:auto}

/* ---------------------------------------------------------------
   03 — WHAT WE COVER
   --------------------------------------------------------------- */
.mw-cover{
  background:#fff;color:var(--mw-ink);
  display:flex;flex-direction:column;align-items:center;gap:44px;
  padding:132px var(--mw-gutter) 96px;
}
.mw-cover__grid{
  width:min(1480px,100%);
  display:flex;flex-direction:column;gap:40px;
}
.mw-cover__row{display:grid;gap:40px}
.mw-cover__row--top{grid-template-columns:minmax(280px,620px) 1fr 1fr}
.mw-cover__row--bottom{grid-template-columns:1fr 1fr}
.mw-cover__text{display:flex;flex-direction:column;gap:22px;align-self:center}
.mw-cover__h2{
  font:800 clamp(36px,3.33vw,64px)/1.031 var(--mw-font);color:var(--mw-ink);
  letter-spacing:-.01em;
}
.mw-cover__body{font:400 18px/28px var(--mw-font);color:var(--mw-body-dark);max-width:560px}

.mw-cover-card{
  position:relative;border-radius:var(--mw-r-cover);overflow:hidden;
  background:var(--mw-photo-ground);min-height:337px;
}
.mw-cover__row--top .mw-cover-card{aspect-ratio:390/470}
.mw-cover__row--bottom .mw-cover-card{aspect-ratio:720/337}
.mw-cover-card>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* Figma draws this as a FIXED 130px overlay (node 10647:36), not a percentage —
   the 32% here was a mistranslation, and it went shallow exactly where the card is
   shortest (the 16/10 phone crop), which is where the label was failing. Height
   restored to Figma's 130px.
   The ramp is ours: Figma's own 0 -> rgba(0,14,43,.85) leaves the #18ed9e "We
   Cover" eyebrow at 1.6:1 on the phone crop against the new pale photos, so the
   stops below carry real density from ~26% down. Measured on all four photos at
   390/1024/1440: >=6.7:1 eyebrow, >=16:1 name. */
.mw-cover-card::after{
  content:"";position:absolute;inset:auto 0 0 0;height:130px;
  background:linear-gradient(to bottom,
    rgba(0,14,43,0) 0%,rgba(0,14,43,.6) 26%,rgba(0,14,43,.93) 58%,rgba(0,14,43,1) 100%);
}
/* 24/22 is Figma's inset (label right edge 24px in, baseline box 22px off the
   bottom) — was 28/24 here. */
.mw-cover-card__label{
  position:absolute;right:24px;bottom:22px;z-index:2;text-align:right;
}
.mw-cover-card__label small{
  display:block;font:600 15px/1.3 var(--mw-font);color:var(--mw-accent-ink);
}
.mw-cover-card__label strong{
  display:block;font:800 24px/1.3 var(--mw-font);color:#fff;
}

.mw-cover__more{display:flex;flex-direction:column;align-items:center;gap:18px}
.mw-cover__more p{font:400 18px/1.3 var(--mw-font);color:var(--mw-ink)}

/* ---------------------------------------------------------------
   04 — BUDGET ESTIMATE
   --------------------------------------------------------------- */
.mw-budget{
  display:flex;flex-direction:column;align-items:center;gap:56px;
  padding:100px var(--mw-gutter);background:var(--mw-navy);
}
.mw-budget .mw-intro__h2{font-size:clamp(40px,3.75vw,72px);line-height:1.056}
.mw-budget .mw-intro__body{font-size:18px}

.mw-slider-card{
  background:var(--mw-navy-card);border-radius:var(--mw-r-card);
  width:min(1460px,100%);padding:clamp(28px,3vw,56px);
  display:flex;flex-direction:column;gap:44px;
}
.mw-slider-card__cols{
  display:flex;align-items:flex-start;justify-content:space-between;gap:clamp(20px,2.5vw,40px);
}
.mw-slider-card__col{display:flex;flex-direction:column;gap:22px;flex:1 1 0;min-width:0}
.mw-slider-card__col--right{padding-left:clamp(0px,2vw,40px)}
.mw-slider-card__col>img{height:44px;width:auto;align-self:flex-start}
.mw-slider-card__col>img.mw-logo-zero{height:62px;margin:-9px 0}
.mw-slider-card__list{display:flex;flex-direction:column;gap:12px;padding-top:8px}
.mw-slider-card__list .mw-check-row img{width:16px;height:16px;margin-top:4px}
/* ---------------------------------------------------------------
   Budget estimator — ONE component at every width.
   It used to be a slider with no readout above 47.5em and a form with no
   slider below it, so the page's central question ("what will this cost me
   a month?") went unanswered on the widest surface. Now: amount + term +
   a live breakdown, with the product the term implies named out loud.
   --------------------------------------------------------------- */
.mw-est{display:flex;flex-direction:column;gap:26px;width:100%}
.mw-est__inputs{display:flex;gap:clamp(24px,3vw,56px);flex-wrap:wrap}
.mw-est__field{flex:1 1 300px;min-width:0;display:flex;flex-direction:column;gap:12px}
.mw-est__label{font:500 17px/1.3 var(--mw-font);color:var(--mw-body-light)}
.mw-est__term{font-weight:700;color:var(--mw-accent-ink)}
.mw-est__amount{
  display:flex;align-items:center;gap:10px;
  background:var(--mw-navy);border:1px solid var(--mw-line-soft);
  border-radius:14px;padding:0 18px;
}
.mw-est__amount:focus-within{border-color:var(--mw-accent-ink)}
.mw-est__prefix{font:700 22px/1 var(--mw-font);color:var(--mw-accent-ink);flex:none}
.mw-est__amount input{
  flex:1 1 auto;min-width:0;background:none;border:0;padding:16px 0;
  font:700 24px/1.2 var(--mw-font);color:#fff;font-variant-numeric:tabular-nums;
}
.mw-est__amount input:focus{outline:none}
.mw-est__scale{
  display:flex;justify-content:space-between;
  font:400 14px/1 var(--mw-font);color:var(--mw-foot-muted);
}
.mw-est__product{
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  font:400 16px/1.4 var(--mw-font);color:var(--mw-body-light);
}
.mw-est__badge{
  flex:none;font:700 14px/1 var(--mw-font);letter-spacing:.02em;
  padding:9px 14px;border-radius:var(--mw-r-pill);
  background:var(--mw-green);color:var(--mw-green-ink);
}
.mw-est__product[data-product="standard"] .mw-est__badge{
  background:transparent;color:#fff;box-shadow:inset 0 0 0 1.5px var(--mw-line-soft);
}
.mw-est__result{
  display:flex;gap:clamp(20px,3vw,48px);flex-wrap:wrap;align-items:center;
  background:var(--mw-navy);border-radius:18px;padding:24px clamp(20px,2.4vw,32px);
}
.mw-est__headline{display:flex;flex-direction:column;gap:2px;flex:0 0 auto}
.mw-est__headline small{font:400 15px/1.3 var(--mw-font);color:var(--mw-foot-muted)}
.mw-est__headline strong{
  font:800 clamp(34px,3vw,46px)/1.1 var(--mw-font);color:var(--mw-accent-ink);
  font-variant-numeric:tabular-nums;
}
.mw-est__breakdown{
  display:flex;gap:clamp(18px,2.4vw,40px);flex-wrap:wrap;flex:1 1 260px;
  border-left:1px solid var(--mw-line-navy);padding-left:clamp(18px,2.4vw,40px);
}
.mw-est__breakdown div{display:flex;flex-direction:column;gap:4px}
.mw-est__breakdown dt{font:400 14px/1.2 var(--mw-font);color:var(--mw-foot-muted)}
.mw-est__breakdown dd{
  font:700 19px/1.2 var(--mw-font);color:#fff;font-variant-numeric:tabular-nums;
}
.mw-est__note{font:400 14px/1.5 var(--mw-font);color:var(--mw-foot-muted);max-width:66ch}
.mw-est__cta{display:flex;gap:16px;flex-wrap:wrap}
@media (max-width:47.5em){
  .mw-est__inputs{flex-direction:column;gap:22px}
  /* `flex:1 1 300px` is a width on a row and a HEIGHT on a column: once the
     inputs stacked, each field claimed a 300px-tall basis and the calculator
     grew two screen-high voids between the amount, the term and the result. */
  .mw-est__field{flex:0 0 auto}
  .mw-est__breakdown{border-left:0;border-top:1px solid var(--mw-line-navy);padding:18px 0 0;flex:1 1 100%}
  .mw-est__cta .mw-btn{flex:1 1 100%}
}

.mw-slider-card__divider{width:1px;background:var(--mw-line-navy);align-self:stretch;min-height:154px;flex:none}

.mw-range{position:relative;width:100%;padding:2px 0}
.mw-range input[type="range"]{
  -webkit-appearance:none;appearance:none;width:100%;height:5px;border-radius:3px;
  background:linear-gradient(to right,var(--mw-green) 0%,var(--mw-green) var(--mw-range-fill,32%),rgba(255,255,255,.9) var(--mw-range-fill,32%),rgba(255,255,255,.9) 100%);
  outline-offset:6px;cursor:pointer;
}
.mw-range input[type="range"]::-webkit-slider-thumb{
  -webkit-appearance:none;width:22px;height:22px;border-radius:50%;
  background:var(--mw-green);border:3px solid var(--mw-navy-card);
  box-shadow:0 0 0 2px var(--mw-green);
}
.mw-range input[type="range"]::-moz-range-thumb{
  width:22px;height:22px;border-radius:50%;
  background:var(--mw-green);border:3px solid var(--mw-navy-card);
  box-shadow:0 0 0 2px var(--mw-green);
}

/* mobile calculator variant (Homepage · Mobile 10477:2) */

/* ---------------------------------------------------------------
   05 — CARE BAND + DOWNLOAD APP
   --------------------------------------------------------------- */
.mw-download{position:relative;background:#fff;color:var(--mw-ink)}
/* Headroom for the phone's bleed. The phone is drawn up to 101px above the
   band, into whatever section precedes this one — on every page that carries
   the band that section is navy, and without this strip the phone crowds the
   card sitting there (the instalment calculator on the product pages, the
   budget estimator on the homepage). A navy lead-in gives the bleed somewhere
   of its own to happen.

   Here and not on .mw-band-wrap: that element paints the navy/white split as
   a 50%-of-itself gradient, so padding it would move the split off the band's
   midline. A separate strip leaves the gradient's geometry alone. */
.mw-download::before{
  content:"";display:block;height:clamp(48px,6vw,120px);background:var(--mw-navy);
}
.mw-band-wrap{background:linear-gradient(to bottom,var(--mw-navy) 50%,#fff 50%);padding:0 var(--mw-gutter)}
.mw-band{
  /* overflow VISIBLE, not hidden: the phone is drawn bleeding 101px above the
     band's top edge (Figma group 10407:3711), and hidden clipped it flat. */
  position:relative;overflow:visible;
  background:var(--mw-green);border-radius:var(--mw-r-band);
  width:min(1569px,100%);margin-inline:auto;
  min-height:clamp(220px,20.7vw,397px);
  display:flex;align-items:center;
  padding:clamp(32px,3vw,60px);
}
.mw-band h2{
  font:800 clamp(44px,4.8vw,92px)/1.022 var(--mw-font);letter-spacing:-.01em;
  /* two-tone as drawn in Figma: "Care Today." white, "Pay Tomorrow." navy */
  color:#fff;position:relative;z-index:2;
  max-width:min(62%,780px);
}
.mw-band h2 span{display:block;color:var(--mw-ink)}
/* The phone ships on transparency now, not baked onto the band green, so it
   can bleed out of the band without dragging a rectangle of green with it.
   Figma geometry, relative to the 1569x397 band: 498 tall (125.4%), flush
   with the band's bottom edge, 231px in from its right edge — which puts its
   top 101px ABOVE the band, over the navy. `.mw img` sets display:block —
   match specificity. */
.mw .mw-band__phone{
  display:block;position:absolute;right:14.7%;bottom:0;
  height:min(125.4%,498px);width:auto;max-width:none;z-index:1;
}
.mw-download__content{
  position:relative;
  width:min(1406px,100% - 2*var(--mw-gutter));margin-inline:auto;
  display:flex;flex-direction:column;align-items:flex-start;gap:22px;
  padding:112px 0 120px;
}
/* No graphic beside the store badges. swoosh-hero-big.svg used to fill that
   space; at this size the arcs read as three blunt green slabs rather than the
   logo motif, and the Figma frame (node 10366:2) has nothing there at all. Left
   empty until PM supplies the intended asset. */
.mw-download__h2{font:800 clamp(38px,3.33vw,64px)/1.2 var(--mw-font);color:var(--mw-ink)}
.mw-download__body{font:400 18px/28px var(--mw-font);color:var(--mw-body-dark);max-width:520px}
/* One button to the web app, where the two store badges used to sit — see the
   note in the markup. .mw-badges (the overlapping App Store / Google Play pair)
   went with them rather than being left as dead rules; restore both together
   when the store listings go live. */
.mw-download__cta{display:flex;gap:16px;flex-wrap:wrap}

/* ---------------------------------------------------------------
   06 — FOOTER
   --------------------------------------------------------------- */
.mw-footer{background:var(--mw-navy);padding-bottom:44px}
.mw-footer__wave-holder{background:#fff}
.mw-footer__content{
  width:min(1690px,100% - 2*var(--mw-gutter));margin-inline:auto;
  display:flex;flex-direction:column;align-items:center;gap:61px;
  padding-top:48px;
}
.mw-footer__top{display:flex;flex-direction:column;align-items:center;gap:16px;text-align:center}
.mw-footer__logo{width:min(574px,80vw);height:auto}
.mw-footer__legal{font:400 15px/22px var(--mw-font);color:#fff;max-width:72ch}
.mw-footer__cta{display:flex;gap:16px;padding-top:12px;flex-wrap:wrap;justify-content:center}
.mw-footer__cta .mw-btn{padding:16px 32px}
.mw-footer__links{
  display:flex;gap:28px;flex-wrap:wrap;justify-content:center;
  font:400 18px/1.3 var(--mw-font);color:#fff;
}
.mw-footer__links a:hover{color:var(--mw-accent-ink)}
.mw-footer__links strong{font-weight:700}
.mw-footer__social{display:flex;align-items:center;gap:24px;width:100%}
.mw-footer__social::before,.mw-footer__social::after{
  content:"";flex:1;height:1px;background:var(--mw-line-soft);
}
.mw-footer__social-icons{display:flex;gap:14px;align-items:center}
.mw-footer__social-icons a{display:block;transition:transform .18s ease}
.mw-footer__social-icons a:hover{transform:translateY(-2px)}
.mw-footer__social-icons img{width:30px;height:30px}
.mw-footer__social-icons img.mw-tiktok{width:22px;height:22px}
.mw-footer__bottom{
  display:flex;justify-content:space-between;align-items:center;gap:20px;width:100%;
  font:400 15px/1.4 var(--mw-font);color:var(--mw-foot-muted);flex-wrap:wrap;
}
.mw-footer__bottom strong{font-weight:700;color:#fff}
/* the two legal documents are links, not a label — they read as clickable */
.mw .mw-footer__docs a{
  color:var(--mw-foot-muted);text-decoration:underline;
  text-underline-offset:3px;transition:color .18s ease;
}
.mw .mw-footer__docs a:hover{color:#fff}

/* ---------------------------------------------------------------
   RESPONSIVE
   --------------------------------------------------------------- */
/* Breakpoints are in em, not px: em in a media query answers to the user's
   default font size, so someone running text at 200% gets the burger nav and
   the mobile type scale instead of a header that overflows its own bar.
   Same pixel values at default settings — 77.5em = 1240px at 16px. */
@media (max-width:93.75em){
  .mw-nav{font-size:16px}
  .mw-header__actions .mw-btn{font-size:17px;padding:13px 24px}
}

@media (max-width:77.5em){
  .mw-nav{display:none}
  .mw-burger{display:block}
  .mw-hero__inner{grid-template-columns:1fr;padding-top:48px}
  .mw-hero__media{max-width:680px;width:100%;margin-top:24px;margin-right:0}
  .mw-hero__scroll{display:none}
  .mw-cover__row--top{grid-template-columns:1fr 1fr}
  .mw-cover__text{grid-column:1 / -1;max-width:660px}
  .mw-slider-card__cols{flex-direction:column}
  .mw-slider-card__divider{width:100%;min-height:1px;height:1px}
  .mw-slider-card__col--right{padding-left:0}
}

@media (max-width:47.5em){
  .mw-header__inner{padding-block:16px}
  .mw-header__logo img{height:30px}
  .mw-header__actions .mw-btn--white,
  .mw-header__actions .mw-signin{display:none}
  .mw-header__actions .mw-btn{font-size:16px;padding:11px 20px}

  .mw-btn{font-size:17px;padding:13px 26px}

  /* the mobile mock centres the whole hero column; the feature list stays
     left-aligned INSIDE its own centred box so the ticks form one edge */
  .mw-hero__content{align-items:center;text-align:center}
  .mw-hero__count{font-size:16px}
  .mw-hero__title{font-size:clamp(38px,10.2vw,48px)}
  .mw-hero__sub{font-size:20px}
  .mw-hero__features{flex-direction:column;gap:12px;margin-top:12px;align-items:flex-start}
  .mw-hero__feature{font-size:17px}
  .mw-hero__pills{justify-content:center;width:100%}

  .mw-intro__h2{font-size:clamp(30px,8.2vw,40px)}
  .mw-intro__body{font-size:16px;line-height:26px}
  .mw-why{padding-top:64px;gap:40px}
  .mw-card{padding:28px;gap:22px}
  .mw-check-row p{font-size:17px;line-height:24px}
  /* one per line, centred: seven marks side by side at 390px are unreadable,
     and a scroller hid the last three behind a gesture nobody makes */
  .mw-partners{flex-direction:column;gap:26px}
  .mw-partner{--s:.82}

  .mw-cover{padding-block:72px 56px}
  .mw-cover__row--top,.mw-cover__row--bottom{grid-template-columns:1fr;gap:18px}
  .mw-cover__grid{gap:18px}
  .mw-cover__h2{font-size:clamp(30px,8.2vw,40px)}
  .mw-cover__text{align-items:center;text-align:center}
  .mw-cover__body{max-width:none}
  /* the two portrait cards became half-page-tall crops on a phone. One
     landscape ratio for all four keeps the section scannable. */
  .mw-cover__row--top .mw-cover-card,
  .mw-cover__row--bottom .mw-cover-card{aspect-ratio:16/10;min-height:0}

  .mw-budget{padding-block:64px}
  .mw-slider-card{gap:24px}
  .mw-check-row--desktop-only{display:none}

  /* The phone used to be absolutely positioned over a 66% bottom pad, which
     stretched it and landed it on top of the heading. In flow, below the
     wording, it can neither overlap nor distort. */
  .mw-band{
    border-radius:24px;flex-direction:column;align-items:center;
    gap:20px;padding:32px 22px 0;text-align:center;
  }
  .mw-band h2{font-size:clamp(34px,9.7vw,44px);max-width:none}
  .mw .mw-band__phone{
    position:static;width:min(100%,330px);height:auto;margin-inline:auto;
  }
  /* wording centred on a phone, per the mobile mock */
  .mw-download__content{padding:64px 0 72px;align-items:center;text-align:center}
  .mw-download__body{max-width:none}
  .mw-download__h2{font-size:clamp(30px,8.2vw,38px)}
  .mw-download__cta{width:100%;justify-content:center}

  .mw-footer__content{gap:40px}
  .mw-footer__links{gap:10px 20px;font-size:16px}
  .mw-footer__cta .mw-btn{padding:14px 26px}
  .mw-footer__bottom{justify-content:center;text-align:center}
}

/* ===== PAGE: mediwallet-standard =====
   Figma "MediWallet Standard — Desktop" 10394:2.
   Shared with mediwallet-zero/points: the tiled swoosh pattern band
   (.mw-pattern) that marks navy↔white transitions on product pages,
   the navy-outline pill on white, and the product-page hero. */

/* PATTERN BAND — the swoosh band marking a navy↔white edge on product pages.

   THE SAME ARTWORK AS .mw-wave, and it has to be. Figma draws ONE band (node
   10397:3) and it is deliberately ASYMMETRIC: the left half's motifs are about
   half again as wide as the right half's, with a ~7% gap between them. That is
   not something a repeating tile can express.

   This used to tile pattern-band-tile.svg in from both edges with
   `background-size:auto 88%`. The gap and the height came out right, but both
   halves then carried the RIGHT half's motif scale, so every product page lost
   the larger left-hand motifs — which is exactly the difference between these
   pages and home/contact-us, where .mw-wave draws the real 1920x102 band.
   Verified against Figma 10397:3, which matches .mw-wave pixel for pixel.

   So: one full-width image, stretched, same as .mw-wave. The gap is inside the
   artwork, so there is nothing to reproduce in CSS.

   The 1920x102 source is shallow enough that stretching costs nothing; `100%
   100%` rather than `cover`, or a phone-width box centre-crops it and the
   pattern stops part-way across the screen (the same trap .mw-wave documents). */
.mw-pattern{
  width:100%;
  /* NO MAX. The artwork is a fixed 1920x102 frame stretched `100% 100%`, so the
     band's height has to keep tracking its width or the stretch becomes
     horizontal-only and every motif smears. Measured: with a 102px cap the
     element is 1920x102 at a 1920 viewport and 2560x102 at 2560 — the same image
     33% wider with no extra height. 5.3125vw is 102/1920, the frame's own aspect,
     so a motif keeps its proportions at any width. The min keeps it from
     disappearing on a phone. */
  height:max(48px,5.3125vw);
  background:var(--mw-navy) url("../img/wave-divider.ca6421fd.svg") center bottom/100% 100% no-repeat;
}

/* navy-outline pill on white ground (`.mw` prefix beats `.mw a{color:inherit}`) */
.mw-btn--outline-navy,.mw .mw-btn--outline-navy{background:#fff;color:var(--mw-navy);border-color:var(--mw-navy)}
.mw .mw-btn--outline-navy:hover{background:var(--mw-navy);color:#fff}

/* --- product hero: big wordmark + tagline + ctas ------------------ */
.mw-std-hero{
  background:var(--mw-navy);
  display:flex;flex-direction:column;align-items:center;gap:22px;
  padding-top:clamp(40px,3.3vw,64px);
}
.mw-std-hero__mark{width:min(652px,72vw);height:auto}
.mw-std-hero__tag{font:400 clamp(22px,1.77vw,34px)/1.25 var(--mw-font);color:#fff;text-align:center;padding-inline:var(--mw-gutter)}
.mw-std-hero__tag strong{font-weight:700}
.mw-std-hero__cta{display:flex;gap:16px;padding-top:14px;flex-wrap:wrap;justify-content:center}
.mw-std-hero .mw-pattern{margin-top:clamp(28px,2.3vw,44px)}

/* --- why choose: 4 bordered feature cards on white ---------------- */
.mw-std-why{
  background:#fff;color:var(--mw-ink);
  display:flex;flex-direction:column;align-items:center;gap:48px;
  padding:90px var(--mw-gutter);
}
.mw-std-why__h2{font:800 clamp(34px,2.92vw,56px)/1.1 var(--mw-font);color:var(--mw-ink);text-align:center}
.mw-std-why__h2 span{color:var(--mw-accent-ink)}
.mw-std-why__cards{
  display:grid;grid-template-columns:repeat(4,minmax(0,354px));gap:24px;
  width:min(1488px,100%);justify-content:center;
}
.mw-std-card{
  background:#fff;border:1.5px solid var(--mw-line-light);border-radius:16px;
  padding:34px 24px;display:flex;flex-direction:column;gap:16px;align-items:center;
  text-align:center;
}
.mw-std-card img{width:58px;height:58px}
.mw-std-card h3{font:700 22px/1.2 var(--mw-font);color:var(--mw-ink)}
.mw-std-card p{font:400 15px/1.4 var(--mw-font);color:var(--mw-body-dark)}
.mw-std-why__cta{display:flex;gap:16px;flex-wrap:wrap;justify-content:center}

/* --- care split: photo left, feature list right ------------------- */
.mw-std-care{
  background:#fff;color:var(--mw-ink);
  display:flex;align-items:center;gap:clamp(32px,8.4vw,161px);
  padding-right:clamp(20px,6.25vw,120px);overflow:clip;
}
.mw-std-care__photo{flex:0 1 777px;min-width:0;align-self:stretch}
.mw-std-care__photo img{
  width:calc(100% + 21px);max-width:none;margin-left:-21px;
  height:100%;min-height:100%;object-fit:cover;object-position:right center;
}
.mw-std-care__content{
  flex:1 1 0;min-width:0;display:flex;flex-direction:column;gap:22px;
  align-items:flex-start;padding-block:56px;max-width:860px;
}
.mw-std-care__h2{font:800 clamp(34px,3.13vw,60px)/1.067 var(--mw-font);color:var(--mw-ink);letter-spacing:-.01em}
.mw-std-care__h2 span{color:var(--mw-accent-ink)}
.mw-std-care__body{font:400 18px/28px var(--mw-font);color:var(--mw-body-dark);max-width:760px}
.mw-std-care__body strong{font-weight:700;color:var(--mw-ink)}
.mw-std-care__features{display:flex;flex-direction:column;gap:14px;padding-block:8px}
.mw-std-care__features .mw-check-row{align-items:center}
.mw-std-care__features .mw-check-row img{width:16px;height:16px;margin-top:0}
.mw-std-care__features .mw-check-row p{color:var(--mw-ink)}
.mw-std-care__cta{display:flex;gap:16px;padding-top:8px;flex-wrap:wrap}

/* --- instalment calculator on navy -------------------------------- */
.mw-std-calc{
  background:var(--mw-navy);
  display:flex;flex-direction:column;align-items:center;
  padding-bottom:180px;
}
.mw-std-calc__content{
  display:flex;flex-direction:column;align-items:center;gap:22px;
  padding:40px var(--mw-gutter) 0;width:100%;
}
.mw-std-calc__h2{font:800 clamp(38px,3.75vw,72px)/1.1 var(--mw-font);color:#fff;text-align:center}
.mw-std-calc__h2 span{color:var(--mw-accent-ink)}
.mw-std-calc__body{font:400 18px/28px var(--mw-font);color:var(--mw-body-light);text-align:center}
.mw-std-calc__card{
  margin-top:44px;
  background:var(--mw-navy);border:1.5px solid rgba(255,255,255,.16);border-radius:20px;
  width:min(1040px,100%);padding:clamp(28px,2.5vw,44px) clamp(28px,2.5vw,48px);
  display:flex;gap:clamp(24px,2vw,40px);align-items:center;
}
.mw-std-calc__col{flex:1 1 0;min-width:0;display:flex;flex-direction:column;gap:16px;align-items:flex-start}
.mw-std-calc__divider{width:1px;align-self:stretch;background:rgba(255,255,255,.16);flex:none}
.mw-std-calc__label{font:700 24px/1.2 var(--mw-font);color:#fff}
.mw-std-calc__field{
  width:100%;max-width:430px;position:relative;
}
.mw-std-calc__field input,.mw-std-calc__field select{
  width:100%;padding:15px 18px 15px 24px;border-radius:var(--mw-r-pill);border:0;
  background:#fff;color:var(--mw-navy);font:500 17px/1.3 var(--mw-font);
  -webkit-appearance:none;appearance:none;
}
.mw-std-calc__field input::placeholder{color:var(--mw-placeholder)}
.mw-std-calc__field input:focus,.mw-std-calc__field select:focus{outline:2px solid var(--mw-accent-ink)}
.mw-std-calc__field--select::after{
  content:"";position:absolute;right:18px;top:50%;width:14px;height:14px;
  transform:translateY(-50%);pointer-events:none;
  background:url("../img/icon-chevron-down.d1671970.svg") center/contain no-repeat;
}
.mw-std-calc__card .mw-btn{padding:13px 26px;font-size:16px}
.mw-std-calc__result-kicker{font:500 18px/1.3 var(--mw-font);color:var(--mw-accent-ink)}
.mw-std-calc__figure{font:800 48px/1.15 var(--mw-font);color:#fff}
.mw-std-calc__note{font:400 16px/24px var(--mw-font);color:var(--mw-body-light);max-width:400px}
.mw-std-calc__result .mw-btn{margin-top:10px;font-size:17px}
.mw-std-calc__chevs{
  display:flex;flex-direction:column;align-items:center;margin-top:48px;
}
.mw-std-calc__chevs img{width:25px;height:25px}
.mw-std-calc__chevs img.mw-std-chev-wedge{width:18px;height:18px;transform:rotate(-45deg);margin-bottom:4px}
@media (prefers-reduced-motion:no-preference){
  .mw-std-calc__chevs{animation:mw-bob 2.2s ease-in-out infinite}
}

/* The product pages used to build their own frame+screen phone composite in
   the care band, floating half out of it. It rendered as a bare screenshot
   with no phone frame, and it meant two different app bands across the site.
   All five pages now share the one .mw-band__phone export above. */

@media (max-width:77.5em){
  .mw-std-why__cards{grid-template-columns:repeat(2,minmax(0,354px))}
  .mw-std-care{flex-direction:column;align-items:stretch;padding-right:0;gap:0}
  /* heading first, photo under it: stacked photo-first, the section opened on
     an image with no idea what it belonged to */
  .mw-std-care__content{order:1}
  .mw-std-care__photo{order:2}
  .mw-std-care__photo{flex:none;max-height:560px;overflow:clip}
  .mw-std-care__photo img{width:100%;margin-left:0;height:auto}
  .mw-std-care__content{padding:48px var(--mw-gutter);max-width:none}
  .mw-std-calc__card{flex-direction:column;align-items:stretch}
  .mw-std-calc__divider{width:100%;height:1px;align-self:auto}
}
@media (max-width:47.5em){
  .mw-std-hero__tag{font-size:19px}
  .mw-std-why{padding:56px var(--mw-gutter);gap:32px}
  .mw-std-why__cards{grid-template-columns:minmax(0,420px)}
  .mw-std-care__h2{font-size:clamp(30px,8.2vw,38px)}
  .mw-std-care__features .mw-check-row{align-items:flex-start}
  .mw-std-care__features .mw-check-row img{margin-top:4px}
  .mw-std-calc{padding-bottom:120px}
  .mw-std-calc__figure{font-size:38px}

}

/* ===== PAGE: mediwallet-zero =====
   Figma "MediWallet Zero — Desktop" 10466:949. Reuses the product-page
   components from the mediwallet-standard section (.mw-std-hero cards,
   .mw-std-calc, .mw-pattern); below are only the Zero
   deltas: green hero, ink pills on green, mirrored care split. */

/* pills for the green hero ground */
.mw-btn--navy,.mw .mw-btn--navy{background:var(--mw-navy);color:#fff;border-color:var(--mw-navy)}
.mw .mw-btn--navy:hover{background:transparent;color:var(--mw-navy)}
.mw-btn--outline-ink,.mw .mw-btn--outline-ink{background:transparent;color:var(--mw-navy);border-color:var(--mw-navy)}
.mw .mw-btn--outline-ink:hover{background:var(--mw-navy);color:#fff}

/* green hero variant: everything inherits .mw-std-hero, ground flips */
.mw-zero-hero{background:var(--mw-green)}
.mw-zero-hero .mw-std-hero__tag{color:#fff}
.mw-zero-hero .mw-std-hero__mark{width:min(930px,86vw)}
/* three cards, three tracks: inherited from the four-card standard grid, the
   Zero row left-aligned itself against an empty fourth column */
.mw-zero-why__cards{grid-template-columns:repeat(3,minmax(0,354px))}
/* Zero inverts the band: navy outline on the green ground.

   HISTORY, because this rule has been flipped once already in the wrong
   direction. It previously pointed the two 46.5%-wide halves at
   pattern-band-navy.svg and each half showed an arbitrary ~800px slice of it,
   cut mid-swoosh — a real bug, correctly observed. The conclusion drawn was that
   the full-frame file was unusable and a repeating tile was needed, and that is
   where the motif scale was lost: a tile can only be symmetric, and Figma's band
   is not.

   The actual fault was the two-pseudo-element structure, not the artwork. Give
   the whole 1920x102 frame the whole band and stretch it `100% 100%` and it lands
   exactly as drawn, gap included. So: full frame, one element. Do not reintroduce
   a tile here — see the note on .mw-pattern above.

   Green ground needs the navy-stroke colourway. pattern-band-navy.svg is the
   same 1920x102 band with navy strokes and no background fill, so the hero's
   green shows through. Longhands, not the `background` shorthand: the base rule
   above owns the size, position and no-repeat, and a shorthand here would reset
   all three. */
.mw-zero-hero .mw-pattern{
  background-color:var(--mw-green);
  background-image:url("../img/pattern-band-navy.07b42d35.svg");
}

/* mirrored care split: content left, photo right */
.mw-zero-care{
  background:#fff;color:var(--mw-ink);
  display:flex;align-items:center;gap:clamp(24px,2vw,40px);
  padding-left:clamp(20px,14.7vw,282px);overflow:clip;
}
.mw-zero-care .mw-std-care__content{order:1}
.mw-zero-care .mw-std-care__photo{order:2;flex:0 1 817px;margin-left:auto}
.mw-zero-care .mw-std-care__photo img{
  width:calc(100% + 21px);margin-left:-21px;
  object-position:left center;
}

@media (max-width:77.5em){
  .mw-zero-care{flex-direction:column;align-items:stretch;padding-left:0;gap:0}
  /* wording first, image after it — same rule as the standard care split */
  .mw-zero-care .mw-std-care__content{order:1;padding:48px var(--mw-gutter)}
  .mw-zero-care .mw-std-care__photo{order:2;flex:none;max-height:560px;overflow:clip;margin-left:0}
  .mw-zero-care .mw-std-care__photo img{width:100%;margin-left:0;height:auto}
  /* the three-track rule above is unconditional and sits AFTER the shared
     .mw-std-why__cards breakpoints, so it was overriding them at equal
     specificity and the Zero cards stayed three-abreast down to phone widths.
     Re-stated here (and below) so the Zero grid follows the standard one. */
  .mw-zero-why__cards{grid-template-columns:repeat(2,minmax(0,354px))}
}
@media (max-width:47.5em){
  .mw-zero-why__cards{grid-template-columns:minmax(0,420px)}

  /* Stacked, the care split's intro read as left-aligned text under a centred
     page: on a phone there is no photo beside it to align against any more, so
     the kicker/heading/body centre like every other stacked section. The tick
     list keeps its left edge — a centred list has nothing to scan down. */
  /* align-items, not just text-align: the content column is a flex column
     with align-items:flex-start, so the kicker — a shrink-to-fit flex item —
     stayed pinned left while the wording under it centred. */
  .mw-std-care__content{text-align:center;align-items:center}
  .mw-std-care__content>.mw-kicker{justify-content:center}
  .mw-std-care__body{margin-inline:auto}
  .mw-std-care__features{text-align:left;align-self:stretch}
  .mw-std-care__cta{justify-content:center}
}

/* ===== PAGE: mediwallet-points =====
   Figma "MediWallet Points — Desktop" 10381:2. Earn-10%-back-at-Clicks
   page: navy hero with Clicks logo, rewarded split, manage-points mode
   cards, terms list, green newsletter band. Reuses .mw-pattern. */

/* --- hero ---------------------------------------------------------- */
.mw-pts-hero{
  background:var(--mw-navy);
  display:flex;flex-direction:column;align-items:center;gap:24px;
  padding-top:56px;
}
.mw-pts-hero .mw-kicker--stack{gap:10px}
.mw-pts-hero__h1{
  font:800 clamp(44px,4.58vw,88px)/1.1 var(--mw-font);color:#fff;
  text-align:center;letter-spacing:-.01em;padding-inline:var(--mw-gutter);
}
.mw-pts-hero__h1 span{color:var(--mw-accent-ink)}
.mw-pts-hero__clicks{width:min(410px,64vw);height:auto}
.mw-pts-hero__body{
  font:400 clamp(18px,1.25vw,24px)/1.42 var(--mw-font);color:var(--mw-body-light);
  text-align:center;padding-inline:var(--mw-gutter);
}
.mw-pts-hero .mw-pattern{margin-top:16px}

/* --- how it works: photo left, text right -------------------------- */
.mw-pts-how{
  background:#fff;color:var(--mw-ink);
  display:flex;align-items:center;gap:clamp(32px,11.8vw,227px);
  overflow:clip;
}
.mw-pts-how__photo{flex:0 1 775px;min-width:0}
.mw-pts-how__photo img{width:100%;height:auto}
.mw-pts-how__content{
  flex:1 1 0;min-width:0;max-width:716px;
  display:flex;flex-direction:column;gap:20px;align-items:flex-start;
  padding-block:56px;
}
.mw-pts-how__h2{font:800 clamp(36px,3.33vw,64px)/1.063 var(--mw-font);color:var(--mw-ink)}
.mw-pts-how__h2 span{color:var(--mw-accent-ink)}
.mw-pts-how__lead{font:600 20px/30px var(--mw-font);color:var(--mw-ink);max-width:640px}
.mw-pts-how__body{font:400 18px/28px var(--mw-font);color:var(--mw-body-dark);max-width:640px}

/* --- manage your points -------------------------------------------- */
.mw-pts-manage{
  background:var(--mw-navy);
  display:flex;flex-direction:column;align-items:center;gap:36px;
  padding:90px var(--mw-gutter);
}
.mw-pts-manage .mw-intro__h2{font-size:clamp(34px,3.13vw,60px)}
.mw-pts-modes{display:flex;gap:32px;flex-wrap:wrap;justify-content:center;width:100%}
.mw-pts-mode{
  display:flex;gap:16px;align-items:center;
  background:var(--mw-navy-card);border-radius:18px;
  padding:22px 26px;width:min(560px,100%);
}
.mw-pts-mode__dot{width:26px;height:26px;border-radius:50%;background:var(--mw-green);flex:none}
.mw-pts-mode div{display:flex;flex-direction:column;gap:4px;min-width:0}
.mw-pts-mode h3{font:700 20px/1.25 var(--mw-font);color:var(--mw-accent-ink)}
.mw-pts-mode p{font:400 16px/1.25 var(--mw-font);color:#fff}
.mw-pts-mode--spend{background:var(--mw-green)}
.mw-pts-mode--spend .mw-pts-mode__dot{background:var(--mw-navy)}
.mw-pts-mode--spend h3,.mw-pts-mode--spend p{color:var(--mw-navy)}
.mw-pts-manage__outro{
  font:400 18px/30px var(--mw-font);color:var(--mw-body-light);text-align:center;
}
.mw-pts-manage__outro .mw-pts-hl{font-weight:600;color:var(--mw-accent-ink)}
.mw-pts-manage__outro strong{font-weight:700;color:var(--mw-body-light)}
.mw-pts-manage__outro em{font-style:normal;font-weight:600;color:var(--mw-body-light)}

/* --- use your points / terms & conditions --------------------------- */
.mw-pts-terms{
  background:#fff;color:var(--mw-ink);
  display:flex;flex-direction:column;align-items:center;
  padding:90px var(--mw-gutter) 130px;
}
.mw-pts-terms__inner{width:min(1180px,100%);display:flex;flex-direction:column;gap:73px}
.mw-pts-terms__block{display:flex;flex-direction:column;gap:18px}
.mw-pts-terms__h2{font:800 clamp(30px,2.71vw,52px)/1.12 var(--mw-font);color:var(--mw-ink)}
.mw-pts-terms__body{font:400 18px/28px var(--mw-font);color:var(--mw-body-dark)}
.mw-pts-terms__body strong{font-weight:700}
.mw-pts-terms__body p+p{margin-top:28px}
.mw-pts-terms__h3{font:800 clamp(26px,1.88vw,36px)/1.25 var(--mw-font);color:var(--mw-ink)}
.mw-pts-terms__block--terms{gap:20px}
.mw-pts-terms__list{display:flex;flex-direction:column;gap:12px}
.mw-pts-terms__list .mw-check-row{gap:10px;align-items:flex-start}
.mw-pts-terms__list .mw-check-row img{width:16px;height:16px;margin-top:4px}
.mw-pts-terms__list .mw-check-row p{font:400 16px/24px var(--mw-font);color:var(--mw-body-dark)}
.mw-pts-terms__sub{padding-left:34px}
.mw-pts-terms__sub .mw-check-row__dot{
  width:16px;height:16px;flex:none;margin-top:4px;position:relative;
}
.mw-pts-terms__sub .mw-check-row__dot::after{
  content:"";position:absolute;left:5px;top:5px;width:6px;height:6px;
  border-radius:50%;background:var(--mw-body-dark);
}

/* --- newsletter band ------------------------------------------------ */
.mw-pts-news{
  background:var(--mw-green);color:var(--mw-navy);
  display:flex;flex-direction:column;align-items:center;gap:20px;
  padding:80px var(--mw-gutter);text-align:center;
}
.mw-pts-news__h2{font:800 clamp(30px,2.71vw,52px)/1.25 var(--mw-font);color:var(--mw-navy)}
.mw-pts-news__body{font:400 18px/28px var(--mw-font);color:var(--mw-navy)}
.mw-pts-news__form{
  display:flex;gap:10px;align-items:center;
  background:#fff;border-radius:var(--mw-r-pill);padding:8px;
  width:min(620px,100%);
}
.mw-pts-news__form input{
  flex:1 1 0;min-width:0;border:0;background:none;padding:13px 6px 13px 18px;
  font:400 16px/1.3 var(--mw-font);color:var(--mw-navy);outline-offset:4px;
}
.mw-pts-news__form input::placeholder{color:var(--mw-placeholder)}
.mw-pts-news__form .mw-btn{padding:13px 28px;font-size:17px}
.mw-btn--navy-solid,.mw .mw-btn--navy-solid{background:var(--mw-navy);color:#fff;border-color:var(--mw-navy)}
.mw-pts-news__small{font:400 16px/1.3 var(--mw-font);color:var(--mw-navy)}
.mw-pts-news__small strong{font-weight:700}
/* The subscribe form's Turnstile slot. It collapses while empty so it costs no
   space in the band's flex gap, and takes its natural size once a widget is in
   it — which matters on the rare submit that actually shows a challenge. Not
   zero-sized and not display:none: the first hides a challenge the visitor has
   to complete, the second stops the widget executing at all. */
.mw-news-captcha{display:flex;justify-content:center}
.mw-news-captcha:empty{display:none}
.mw-pts-news__done{font:600 17px/1.4 var(--mw-font);color:var(--mw-navy);display:none}
.mw-pts-news__done[data-show="true"]{display:block}

@media (max-width:77.5em){
  .mw-pts-how{flex-direction:column;align-items:stretch;gap:0}
  .mw-pts-how__photo{flex:none}
  .mw-pts-how__content{padding:48px var(--mw-gutter);max-width:none}
}
@media (max-width:47.5em){
  .mw-pts-hero__body br{display:none}
  /* centred on a phone, per the mobile mock — list rows keep their own left
     edge so the ticks line up */
  .mw-pts-how__content{align-items:center;text-align:center}
  .mw-pts-terms__block,.mw-pts-terms__body{text-align:center}
  .mw-pts-terms__list .mw-check-row{text-align:left}
  .mw-pts-manage{padding-block:64px;gap:28px}
  .mw-pts-mode{align-items:flex-start}
  .mw-pts-mode__dot{margin-top:2px}
  .mw-pts-terms{padding-block:64px 80px}
  .mw-pts-terms__inner{gap:48px}
  .mw-pts-terms__body p+p{margin-top:18px}
  .mw-pts-news{padding-block:56px}
  .mw-pts-news__form{flex-direction:column;border-radius:24px;padding:12px}
  .mw-pts-news__form input{width:100%;text-align:center;padding:12px}
  .mw-pts-news__form .mw-btn{width:100%}
}

/* ===== PAGE: networks =====
   Figma "Networks — Desktop" 10402:2 (mobile 10524:2). Partner-network
   directory: navy hero, green search bar overlapping the navy→white
   boundary, popular-care carousel, network-logo grid, specific-search
   link columns, green newsletter band (reuses .mw-pts-news). The search
   bar (.mw-net-search) is shared with network-results. */

/* --- hero ----------------------------------------------------------- */
.mw-net-hero{
  background:var(--mw-navy);
  display:flex;flex-direction:column;align-items:center;text-align:center;
  gap:18px;padding-top:clamp(36px,2.5vw,48px);
}
.mw-net-hero__count{font:400 18px/1.4 var(--mw-font);color:#fff}
.mw-net-hero__h1{
  font:800 clamp(44px,5vw,96px)/1 var(--mw-font);color:#fff;
  letter-spacing:-.01em;padding-inline:var(--mw-gutter);
}
.mw-net-hero__h1 span{color:var(--mw-accent-ink)}
.mw-net-hero__sub{
  font:400 clamp(18px,1.25vw,24px)/1.65 var(--mw-font);color:#fff;
  padding-inline:var(--mw-gutter);
}
.mw-net-hero__sub strong{font-weight:700}
.mw-net-hero .mw-pattern{margin-top:clamp(24px,2.9vw,56px)}

/* --- green search bar (shared with network-results) ------------------ */
.mw-net-search{
  position:relative;z-index:2;
  display:flex;align-items:center;gap:14px;
  background:var(--mw-green);border-radius:44px;padding:14px 16px;
  width:min(1490px,100% - 2*var(--mw-gutter));
  margin:-42px auto 0;
}
.mw-net-search__field{position:relative;flex:none}
.mw-net-search input,.mw-net-search select{
  height:48px;border:0;border-radius:999px;background:#fff;
  font:400 16px/1.3 var(--mw-font);color:var(--mw-navy);
  padding:0 16px 0 22px;-webkit-appearance:none;appearance:none;
}
.mw-net-search input::placeholder{color:var(--mw-placeholder)}
.mw-net-search input:focus,.mw-net-search select:focus{outline:2px solid var(--mw-navy)}
.mw-net-search select:invalid{color:var(--mw-placeholder)}
.mw-net-search__field--select select{padding-right:44px;width:100%}
.mw-net-search__field--select::after{
  content:"";position:absolute;right:16px;top:50%;width:14px;height:14px;
  transform:translateY(-50%);pointer-events:none;
  background:url("../img/icon-select-chevron.d1671970.svg") center/contain no-repeat;
}
.mw-net-search__field--name{width:250px}
.mw-net-search__field--name input{width:100%}
.mw-net-search__field--type{width:240px}
.mw-net-search__field--loc{width:260px}
.mw-net-search__or{font:500 16px/1.2 var(--mw-font);color:var(--mw-navy)}
.mw-net-search__submit{margin-left:auto;padding:15px 34px;font-size:18px}

/* --- white content sections ------------------------------------------ */
.mw-net-main{
  background:#fff;color:var(--mw-ink);
  display:flex;flex-direction:column;gap:70px;
  padding-bottom:90px;overflow-x:clip;
}
.mw-net-section{
  width:min(1490px,100% - 2*var(--mw-gutter));margin-inline:auto;
  display:flex;flex-direction:column;gap:28px;
}
.mw-net-h2{font:800 36px/1.2 var(--mw-font);color:var(--mw-ink)}

/* popular types of care: 5-card row, arrow-scrolled when clipped */
.mw-net-care{margin-top:65px} /* search bar overlaps 42px of the 107px gap */
.mw-net-care__head{display:flex;align-items:center;justify-content:space-between;gap:20px}
.mw-net-care__nav{display:flex;gap:12px}
.mw-net-care__nav button{
  width:38px;height:38px;border:0;background:none;padding:0;cursor:pointer;
  transition:transform .18s ease;
}
.mw-net-care__nav button:hover{transform:translateY(-2px)}
.mw-net-care__nav img{width:38px;height:38px}
.mw-net-care__row{
  display:flex;gap:24px;overflow-x:auto;scroll-behavior:smooth;
  scrollbar-width:none;
}
.mw-net-care__row::-webkit-scrollbar{display:none}
.mw-net-care__card{
  flex:0 0 278px;aspect-ratio:278/380;border-radius:16px;overflow:hidden;
}
.mw-net-care__card img{width:100%;height:100%;object-fit:cover}

/* popular networks: bordered logo cards */
.mw-net-logos__grid{
  display:grid;grid-template-columns:repeat(6,minmax(0,232px));gap:20px;
}
.mw-net-logo{
  height:100px;background:#fff;border:1.5px solid var(--mw-green-ink);border-radius:12px;
  display:flex;align-items:center;justify-content:center;padding:20px;
}
.mw-net-logo img{max-height:58px;max-width:166px;width:auto;height:auto}
/* Green is the HOVER state, not a resting one. KRSTL used to carry the fill
   permanently, which read as "selected" and singled one partner out. */
.mw-net-logo{transition:background-color .18s ease,border-color .18s ease}
.mw .mw-net-logo:hover,.mw .mw-net-logo:focus-visible{
  background:var(--mw-green);border-color:var(--mw-green);
}
.mw-net-logo--text{font:600 16px/1.3 var(--mw-font);color:var(--mw-body-dark);text-align:center}

/* specific search: link columns */
.mw-net-specific__cols{display:flex;gap:25px;flex-wrap:wrap}
.mw-net-specific__col{width:350px;display:flex;flex-direction:column}
.mw-net-specific__col h3{font:700 18px/1.3 var(--mw-font);color:var(--mw-ink);margin-bottom:22px}
.mw-net-specific__col h3[aria-hidden="true"]{visibility:hidden}
.mw-net-specific__list{display:flex;flex-direction:column;gap:10px}
.mw .mw-net-specific__list a{font:400 18px/1.3 var(--mw-font);color:var(--mw-ink);transition:color .18s ease}
/* the accent ink, which on this white ground is now #14D08E — it used to hover
   to the much darker #08794f, which read as a different green entirely */
.mw .mw-net-specific__list a:hover,.mw .mw-net-specific__list a:focus-visible{color:var(--mw-accent-ink)}

@media (max-width:100em){
  .mw-net-logos__grid{grid-template-columns:repeat(auto-fill,minmax(200px,1fr))}
}
@media (max-width:77.5em){
  .mw-net-search{flex-wrap:wrap;border-radius:28px}
  .mw-net-search__submit{margin-left:0}
}
@media (max-width:47.5em){
  .mw-net-hero__sub br{display:none}
  .mw-net-search{flex-direction:column;align-items:stretch;gap:10px;border-radius:24px;padding:16px}
  .mw-net-search__field--name,.mw-net-search__field--type,.mw-net-search__field--loc{width:100%}
  .mw-net-search input{width:100%}
  .mw-net-search__or{text-align:center}
  .mw-net-search__submit{width:100%}
  .mw-net-main{gap:44px;padding-bottom:56px}
  .mw-net-care{margin-top:48px}
  .mw-net-h2{font-size:28px}
  .mw-net-care__nav{display:none}
  .mw-net-care__row{display:grid;grid-template-columns:1fr 1fr;gap:12px;overflow:visible}
  .mw-net-care__card{flex:none;width:100%}
  .mw-net-logos__grid{grid-template-columns:1fr 1fr;gap:12px}
  .mw-net-logo{height:84px;padding:14px}
  .mw-net-logo img{max-width:130px;max-height:48px}
  /* Specific Search centres on a phone, per the mobile mock */
  .mw-net-specific__cols{align-items:center;text-align:center}
  .mw-net-specific__col{width:100%;align-items:center}
  .mw-net-specific__col h3[aria-hidden="true"]{display:none}
  .mw-net-specific__col h3{margin-bottom:14px;text-align:center}
  .mw-net-specific__list{align-items:center}
  .mw-net-section{text-align:center}
  .mw-net-care__head{justify-content:center}
}

/* ===== PAGE: network-results =====
   Figma "Network Results — Desktop" 10371:2 (mobile 10514:2). Search
   results table; clicking a row's "View Now" swaps the table for the
   practice-detail panel (open state 10414:2, write-up state 10410:15) —
   one page, JS-toggled. Reuses .mw-net-hero + .mw-net-search. */

.mw-res-main{
  /* flow-root, so the search bar's -42px top margin lifts the BAR rather than
     collapsing through and lifting this whole white panel — which is what put
     the bar fully on the white and hid the bottom of the pattern band. */
  display:flow-root;
  position:relative;background:#fff;color:var(--mw-ink);
  padding-bottom:130px;overflow-x:clip;
}
.mw-res-inner{
  position:relative;z-index:1;
  width:min(1490px,100% - 2*var(--mw-gutter));margin:72px auto 0;
}

/* The results hero carries the same pattern band as the networks hero, and the
   search bar rides up over it so it sits half on the navy — it used to be a
   bare 110px of navy padding with no pattern and nothing to overlap. */
.mw-net-hero--results .mw-pattern{margin-top:clamp(24px,2.9vw,56px)}

/* decorative green arcs, shown only in the detail state
   (`.mw img{display:block}` outweighs one class, hence the .mw prefix) */
.mw .mw-res-deco{position:absolute;display:none;pointer-events:none}
.mw .mw-res-main[data-detail-open="true"] .mw-res-deco{display:block}
.mw-res-deco--ring{right:0;top:36px;width:150px;height:150px}
.mw-res-deco--arc{left:0;bottom:44px;width:152px;height:168px}

/* --- results table ---------------------------------------------------- */
.mw-res-results[data-show="false"]{display:none}
.mw-res-caption{font:400 15px/1.3 var(--mw-font);color:var(--mw-ink);margin-bottom:16px}
.mw-res-tablewrap{
  border:1px solid var(--mw-navy-card);border-radius:14px;overflow:hidden;background:#fff;
}
.mw-res-scroll{max-height:660px;overflow-y:auto;overflow-x:auto}
.mw-res-scroll::-webkit-scrollbar{width:5px;height:5px}
.mw-res-scroll::-webkit-scrollbar-thumb{background:var(--mw-ink);border-radius:3px}
.mw-res-scroll::-webkit-scrollbar-track{background:transparent}
.mw-res-table{
  width:100%;min-width:1100px;border-collapse:collapse;
  font:400 15px/1.3 var(--mw-font);color:var(--mw-ink);
}
.mw-res-table th{
  position:sticky;top:0;z-index:1;
  background:var(--mw-navy);color:#fff;font:600 15px/1.3 var(--mw-font);
  text-align:left;padding:15px 12px;white-space:nowrap;
}
.mw-res-table th:first-child,.mw-res-table td:first-child{padding-left:24px}
.mw-res-table th:last-child,.mw-res-table td:last-child{padding-right:16px}
.mw-res-table td{padding:9px 12px;white-space:nowrap}
.mw-res-table col.mw-res-col--network{width:247px}
.mw-res-table col.mw-res-col--name{width:275px}
.mw-res-table col.mw-res-col--type,.mw-res-table col.mw-res-col--region,.mw-res-table col.mw-res-col--city{width:195px}
.mw-res-table col.mw-res-col--suburb{width:205px}
.mw-res-table col.mw-res-col--action{width:166px}
.mw-res-table tbody tr{transition:background-color .15s ease}
.mw-res-table tbody tr:hover{background:var(--mw-surface-inert)}
.mw-res-view{
  font:500 12px/1.25 var(--mw-font);color:#fff;background:var(--mw-navy);
  border:0;border-radius:999px;padding:9px 18px;min-height:34px;cursor:pointer;
  transition:background-color .15s ease,color .15s ease;
}
.mw-res-table tbody tr:hover .mw-res-view,.mw-res-view:hover,.mw-res-view:focus-visible{
  background:var(--mw-green);color:var(--mw-navy);
}

/* --- practice detail (open / write-up states) ------------------------- */
.mw-res-detail{display:none;flex-direction:column;gap:21px;padding:10px 0 40px}
.mw-res-detail[data-show="true"]{display:flex}
.mw .mw-res-detail__back{
  font:500 15px/1.3 var(--mw-font);color:var(--mw-body-dark);
  align-self:flex-start;transition:color .18s ease;background:none;border:0;
  cursor:pointer;padding:0;
}
.mw .mw-res-detail__back:hover{color:var(--mw-accent-ink)}
.mw-res-detail__head{display:flex;flex-direction:column;gap:14px}
.mw-res-detail__title{
  font:800 clamp(30px,3.13vw,60px)/1 var(--mw-font);color:var(--mw-ink);
  letter-spacing:-.01em;
}
.mw-res-detail__eyebrow{
  font:600 18px/1.3 var(--mw-font);color:var(--mw-ink);
  letter-spacing:6px;text-transform:uppercase;
}
.mw .mw-res-detail__tel{color:var(--mw-accent-ink);text-decoration:underline;text-underline-offset:3px}
.mw .mw-res-detail__tel[aria-disabled="true"]{color:var(--mw-body-dark);text-decoration:none}
.mw-res-detail__act{display:flex;gap:14px;flex-wrap:wrap;padding-top:22px}
@media (max-width:47.5em){.mw-res-detail__act .mw-btn{flex:1 1 100%}}
.mw-res-detail__rule{height:1px;background:var(--mw-green-ink);width:100%}
.mw-res-detail__row{
  display:flex;align-items:flex-start;justify-content:space-between;
  gap:clamp(24px,3vw,60px);padding-top:10px;
}
.mw-res-detail__contact{
  display:flex;flex-direction:column;gap:30px;max-width:760px;padding-top:10px;
}
.mw-res-detail__about{display:none;flex-direction:column;gap:6px;padding-bottom:14px}
.mw-res-detail__about[data-show="true"]{display:flex}
.mw-res-detail__about h3{font:700 18px/1.3 var(--mw-font);color:var(--mw-navy)}
.mw-res-detail__about p{font:400 18px/26px var(--mw-font);color:var(--mw-placeholder)}
.mw-res-item{display:flex;gap:12px;align-items:flex-start}
.mw-res-item img{width:22px;height:22px;flex:none}
.mw-res-item div{display:flex;flex-direction:column;gap:4px}
.mw-res-item h3{font:700 18px/1.3 var(--mw-font);color:var(--mw-ink)}
.mw-res-item p{font:400 18px/26px var(--mw-font);color:var(--mw-ink)}
.mw-res-detail__map{
  position:relative;flex:0 0 min(560px,100%);aspect-ratio:560/343;
  border-radius:16px;overflow:hidden;
  border:1px solid rgba(6,30,82,.25);
}
.mw .mw-res-detail__map-still{position:absolute;inset:0;z-index:0;width:100%;height:100%;object-fit:cover}
.mw-res-detail__map-frame{position:relative;z-index:1;display:block;width:100%;height:100%;border:0}
/* until a practice is opened there is nothing to map — don't show a blank frame */
.mw-res-detail__map-frame:not([src]),.mw-res-detail__map-frame[src=""]{display:none}

@media (max-width:77.5em){
  .mw-res-detail__row{flex-direction:column}
  .mw-res-detail__map{flex:none;width:min(560px,100%)}
}
@media (max-width:47.5em){
  .mw-res-inner{margin-top:44px}
  .mw-res-main{padding-bottom:72px}
  .mw-res-detail__eyebrow{font-size:14px;letter-spacing:4px}
  .mw-res-detail__contact{gap:22px}
  .mw-res-item p,.mw-res-detail__about p{font-size:16px;line-height:24px}
  .mw-res-deco--ring,.mw-res-deco--arc{display:none!important}

  /* The 7-column table can't survive 390px: at desktop widths the action
     column is the point of the page, and inside a horizontal scroller it
     lands off-canvas with no affordance.
     Below 760 it becomes ONE list inside one border — a row per practice,
     collapsed to its name. Tapping a row opens its details and its View Now.
     (It used to render every row as its own separately bordered card, which
     read as a page of little tables rather than one set of results.) */
  .mw-res-tablewrap{
    border:1.5px solid var(--mw-navy);border-radius:14px;
    background:#fff;overflow:hidden;
  }
  .mw-res-scroll{max-height:none;overflow:visible}
  .mw-res-table{min-width:0;display:block}
  .mw-res-table colgroup,.mw-res-table thead{display:none}
  .mw-res-table tbody,.mw-res-table tbody tr,.mw-res-table td{display:block;width:auto}
  .mw-res-table tbody tr{
    background:#fff;border:0;border-radius:0;padding:0;margin:0;cursor:pointer;
  }
  .mw-res-table tbody tr+tr{border-top:1px solid var(--mw-line-light)}
  .mw-res-table tbody tr:hover{background:#fff}
  .mw-res-table tbody tr[aria-expanded="true"]{background:var(--mw-surface-soft)}
  .mw-res-table td{
    border:0;padding:5px 18px;display:flex;gap:16px;align-items:baseline;
    justify-content:space-between;font-size:15px;min-width:0;
  }
  .mw-res-table td::before{
    content:attr(data-label);flex:none;
    font:600 13px/1.3 var(--mw-font);color:var(--mw-body-dark);
    text-transform:uppercase;letter-spacing:.04em;
  }
  /* the first cell is the row's title and its tap target */
  .mw-res-table td:first-child{
    display:flex;align-items:center;gap:12px;
    font:700 17px/1.3 var(--mw-font);color:var(--mw-ink);
    padding:15px 18px 4px;min-height:44px;
  }
  /* the network name alone repeats down the list — the branch name is what
     tells one row from the next, so it stays visible as a subtitle */
  .mw-res-table td:nth-child(2){
    display:block;padding:0 46px 14px 18px;
    font:500 14px/1.35 var(--mw-font);color:var(--mw-body-dark);
  }
  .mw-res-table td:nth-child(2)::before{content:none}
  .mw-res-table td:first-child::before{
    content:"";order:2;margin-left:auto;width:14px;height:14px;
    background:url("../img/icon-chevron-down.d1671970.svg") center/contain no-repeat;
    transition:transform .18s ease;
  }
  .mw-res-table tbody tr[aria-expanded="true"] td:first-child::before{transform:rotate(180deg)}
  /* collapsed by default; the details and the action appear on tap */
  .mw-res-table tbody tr:not([aria-expanded="true"]) td:not(:first-child):not(:nth-child(2)){display:none}
  /* a labelled pair with no value is noise, not information */
  .mw-res-table td[data-empty="true"]:not(:first-child){display:none!important}
  .mw-res-table tbody tr[aria-expanded="true"] td:last-child{display:block;padding:10px 18px 16px}
  .mw-res-table td:last-child::before{content:none}
  .mw-res-view{width:100%;min-height:44px;font-size:15px}
}

/* ===== PAGE: customer-faq (shared with partner-faq) =====
   Figma "Customer FAQ — Desktop" 10410:1571 (mobile 10541:2) and
   "Partner FAQ — Desktop" 10410:2025. One component set: navy hero
   (count / big H1 with green accent / sub) + white main holding the
   bordered FAQ accordion table (navy header row, white question rows,
   soft-grey answer panels). Items are accordions — all open in the
   design; [data-open] toggled by the main.js faq IIFE. */

.mw-faq-hero{
  background:var(--mw-navy);
  display:flex;flex-direction:column;align-items:center;text-align:center;
  gap:14px;padding:48px 0 0;
}
.mw-faq-hero>:not(.mw-pattern){padding-inline:var(--mw-gutter)}
/* the navy→white edge is marked by the pattern band, as on every other hero */
.mw-faq-hero .mw-pattern{margin-top:clamp(28px,3.2vw,62px)}
.mw-faq-hero__count{font:400 20px/1.3 var(--mw-font);color:#fff}
.mw-faq-hero__h1{
  font:800 clamp(44px,4.79vw,92px)/1.043 var(--mw-font);color:#fff;
  letter-spacing:-.01em;
}
.mw-faq-hero__h1 span{color:var(--mw-accent-ink)}
.mw-faq-hero__sub{font:400 clamp(20px,1.56vw,30px)/1.33 var(--mw-font);color:#fff}

.mw-faq-main{
  background:#fff;color:var(--mw-ink);
  padding:72px var(--mw-gutter) 110px;
}
.mw-faq-inner{
  width:min(1490px,100%);margin-inline:auto;
  display:flex;flex-direction:column;gap:16px;
}
.mw-faq-note{font:400 15px/1.3 var(--mw-font);color:var(--mw-body-dark)}

.mw-faq-table{
  width:100%;background:#fff;overflow:hidden;
  border:2px solid var(--mw-navy);border-radius:16px;
}
.mw-faq-table__head{
  background:var(--mw-navy);padding:15px 24px;
  font:600 15px/1.3 var(--mw-font);color:#fff;
}
.mw-faq-item+.mw-faq-item{border-top:1px solid var(--mw-line-light)}
.mw-faq-q{
  display:flex;align-items:center;gap:12px;width:100%;
  background:#fff;border:0;cursor:pointer;text-align:left;
  padding:18px 20px 18px 24px;
  font:600 18px/1.28 var(--mw-font);color:var(--mw-ink);
}
.mw-faq-q:focus-visible{outline:2px solid var(--mw-accent-ink);outline-offset:-2px}
.mw-faq-q span{flex:1 1 0;min-width:0}
.mw-faq-q img{width:18px;height:18px;flex:none;transition:transform .2s ease}
.mw-faq-item[data-open="false"] .mw-faq-q img{transform:rotate(180deg)}
.mw-faq-a{
  display:flex;flex-direction:column;gap:12px;
  background:var(--mw-surface-soft);padding:18px 24px 22px;
}
.mw-faq-item[data-open="false"] .mw-faq-a{display:none}
.mw-faq-a p{font:400 16px/24px var(--mw-font);color:var(--mw-body-dark)}
.mw-faq-a p strong{font-weight:700;color:var(--mw-ink)}
/* green inline links (`.mw a{color:inherit}` outweighs one class) */
.mw .mw-faq-a a{font-weight:500;color:var(--mw-green)}
.mw .mw-faq-a a:hover{text-decoration:underline}
.mw-faq-a ul{list-style:none;display:flex;flex-direction:column}
.mw-faq-a li{
  position:relative;padding-left:17px;
  font:400 16px/24px var(--mw-font);color:var(--mw-body-dark);
}
.mw-faq-a li::before{content:"\2022";position:absolute;left:2px}

@media (max-width:47.5em){
  .mw-faq-hero{padding:32px 0 0;gap:10px}
  .mw-faq-hero__count{font-size:15px}
  .mw-faq-hero__sub{font-size:17px}
  .mw-faq-main{padding:48px var(--mw-gutter) 72px}
  .mw-faq-q{font-size:16px;padding:15px 16px 15px 18px}
  .mw-faq-a{padding:15px 18px 18px}
  .mw-faq-a p,.mw-faq-a li{font-size:15px;line-height:22px}
}

/* ===== PAGE: apply-now =====
   Figma "Apply Now — Desktop" 10422:2. Compact centred hero over the
   wave divider, white apply section (swoosh photo composite + embedded
   signup-form preview + 4 steps), Clicks reward band; reuses the
   .mw-download band + app section. This section also owns the SHARED
   components used by contact-us / suggest-a-partner / partner-lead:
   the compact page hero (.mw-page-hero) and the form-field set
   (.mw-form-card / .mw-form-grid / .mw-field / .mw-captcha / .mw-form-done). */

/* --- compact centred page hero (apply-now, contact-us, partner-lead) --- */
.mw-page-hero{
  background:var(--mw-navy);
  display:flex;flex-direction:column;align-items:center;text-align:center;
  gap:16px;padding-top:clamp(40px,3.4vw,66px);
}
.mw-page-hero__h1{
  font:800 clamp(40px,4.8vw,92px)/1.05 var(--mw-font);color:#fff;
  letter-spacing:-.01em;padding-inline:var(--mw-gutter);
}
.mw-page-hero__h1 span{color:var(--mw-accent-ink)}
.mw-page-hero--sm .mw-page-hero__h1{font-size:clamp(34px,3.44vw,66px)}
.mw-page-hero__sub{
  font:400 clamp(17px,1.15vw,22px)/1.4 var(--mw-font);color:#fff;
  padding-inline:var(--mw-gutter);
}
.mw-page-hero__sub--lg{font-size:clamp(20px,1.77vw,34px)}
.mw-page-hero__sub--lg span{color:var(--mw-accent-ink);font-weight:700}
.mw-page-hero__cta{display:flex;gap:16px;padding-top:14px;flex-wrap:wrap;justify-content:center}
.mw-page-hero .mw-wave{margin-top:clamp(28px,3.2vw,62px)}

/* --- shared form-field set (suggest-a-partner, partner-lead, contact-us) --- */
/* .mw-form carries the stack; .mw-form-card adds the card chrome on top. A
   form already sitting inside a bordered card takes .mw-form alone, or it
   draws a second border inside the first. */
.mw-form{display:flex;flex-direction:column;gap:20px}
.mw-form-card{
  background:#fff;border:2px solid var(--mw-navy);border-radius:20px;
  padding:clamp(20px,2.1vw,40px);
  display:flex;flex-direction:column;gap:20px;
}
.mw-form-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.mw-form-grid--full{grid-template-columns:1fr}
/* A field is a labelled unit, not a bare pill: the label stays visible after
   the placeholder is typed over, and the error sits under the field it
   belongs to. */
.mw-form-field{display:flex;flex-direction:column;gap:7px}
.mw-form-label{
  font:500 15px/1.2 var(--mw-font);color:var(--mw-ink);
  padding-inline-start:4px;
}
.mw-form-label .mw-req{color:var(--mw-accent-ink);font-weight:700;margin-inline-start:2px}
.mw-field{
  width:100%;height:58px;border:1px solid var(--mw-field-line);border-radius:var(--mw-r-pill);
  background:var(--mw-field);padding:0 23px;
  font:400 16px/1.3 var(--mw-font);color:var(--mw-navy);
}
.mw-field::placeholder{color:var(--mw-placeholder)}
.mw-field:focus{outline:2px solid var(--mw-accent-ink)}
.mw-field-error{
  display:none;gap:7px;align-items:flex-start;padding-inline-start:4px;
  font:500 14px/1.35 var(--mw-font);color:var(--mw-danger);
}
.mw-field-error::before{
  content:"";flex:none;width:13px;height:13px;margin-top:1px;
  background:url("../img/icon-alert.25773630.svg") center/contain no-repeat;
}
.mw-field[aria-invalid="true"]~.mw-field-error{display:flex}
.mw-form-alert{
  display:none;gap:10px;align-items:flex-start;
  background:rgba(200,71,60,.07);border:1px solid rgba(200,71,60,.34);
  border-radius:14px;padding:14px 18px;
  font:500 15px/1.4 var(--mw-font);color:var(--mw-ink);
}
.mw-form-alert::before{
  content:"";flex:none;width:16px;height:16px;margin-top:2px;
  background:url("../img/icon-alert.25773630.svg") center/contain no-repeat;
}
.mw-form-alert[data-show="true"]{display:flex}
/* a submit that is already working says so, and refuses a second click */
.mw .mw-btn[data-busy="true"]{opacity:.6;cursor:progress}
.mw .mw-btn:disabled{pointer-events:none}
.mw-field[aria-invalid="true"]{outline:2px solid var(--mw-danger)}
textarea.mw-field{height:150px;border-radius:24px;padding:18px 24px;resize:vertical}
.mw-form-actions{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap}
/* The reCAPTCHA widget replaces this box's contents once a site key is set;
   until then it holds the footprint so the layout is honest at design time. */
.mw-captcha-slot{display:flex;flex-direction:column;gap:7px;flex:none}
.mw-captcha{
  width:304px;min-height:68px;flex:none;
  background:var(--mw-surface-inert);border:1.5px solid var(--mw-line-light);border-radius:10px;
  display:flex;align-items:center;justify-content:center;text-align:center;
  font:500 14px/1.3 var(--mw-font);color:var(--mw-body-dark);padding:10px 14px;
}
.mw-captcha[aria-invalid="true"]{border-color:var(--mw-danger)}
.mw-captcha[aria-invalid="true"]~.mw-field-error{display:flex}
/* the widget injects its own iframe — let it size itself once it is there */
.mw-captcha:has(iframe){background:none;border:0;padding:0;min-height:78px}
/* With no site key the slot is inert and validation skips it, so showing an
   empty "Confirm you are human" box promised a check the form never made.
   Set data-sitekey on the .mw-captcha div and it appears. */
.mw-captcha-slot:has(.mw-captcha[data-sitekey=""]){display:none}

.mw-res-empty{
  display:none;
  background:var(--mw-surface-soft);border:1px solid var(--mw-line-light);border-radius:14px;
  padding:22px 24px;max-width:640px;
  font:400 17px/26px var(--mw-font);color:var(--mw-body-dark);
}
.mw-res-empty[data-show="true"]{display:block}
.mw-form-actions .mw-btn{font-size:18px;padding:15px 34px;margin-left:auto}
.mw-form-done{display:none;font:600 17px/1.4 var(--mw-font);color:var(--mw-navy)}
.mw-form-done[data-show="true"]{display:block}

/* --- apply section on white -------------------------------------------- */
.mw-apply-main{
  background:#fff;color:var(--mw-ink);
  display:flex;flex-direction:column;gap:48px;
  padding:80px 0 90px;overflow-x:clip;
}
.mw-apply-head{
  width:min(1490px,100% - 2*var(--mw-gutter));margin-inline:auto;
  display:flex;flex-direction:column;gap:12px;
}
.mw-apply-h2{font:800 clamp(36px,2.92vw,56px)/1.15 var(--mw-font);color:var(--mw-ink)}
.mw-apply-lead{font:400 18px/28px var(--mw-font);color:var(--mw-body-dark);max-width:1040px}
.mw-apply-row{
  display:flex;align-items:center;gap:clamp(24px,3vw,64px);flex-wrap:wrap;
  width:min(1490px,100% - 2*var(--mw-gutter));margin-inline:auto;
}
.mw-apply-row__photo{flex:0 1 560px;min-width:0}
.mw-apply-row__photo img{width:100%;height:auto}
.mw-apply-row__form{flex:1 1 520px;min-width:0;max-width:640px;display:flex;flex-direction:column;gap:14px}

/* The application is the real apply app in an iframe. No readiness detection:
   cross-origin gives no honest "did it render" signal, and every heuristic for
   it guesses wrong somewhere. Instead the placeholder sits BEHIND the frame —
   if the app paints, it covers it; if it never does, the visitor reads the
   placeholder — and the route out sits permanently below, so this page can
   never become the dead end it used to be. */
.mw-apply-embed{
  position:relative;width:100%;
  min-height:var(--mw-apply-h,clamp(560px,76vh,940px));
  background:#fff;border:1.5px solid var(--mw-navy);border-radius:20px;overflow:hidden;
}
.mw-apply-embed__placeholder{
  position:absolute;inset:0;z-index:0;display:flex;
  align-items:center;justify-content:center;padding:32px;text-align:center;
  font:400 17px/1.5 var(--mw-font);color:var(--mw-body-dark);
}
@media (prefers-reduced-motion:no-preference){
  .mw-apply-embed__placeholder{animation:mw-embed-pulse 1.6s ease-in-out infinite}
  @keyframes mw-embed-pulse{0%,100%{opacity:1}50%{opacity:.55}}
}
.mw-apply-embed__frame{
  position:relative;z-index:1;display:block;width:100%;
  height:var(--mw-apply-h,clamp(560px,76vh,940px));border:0;
}
/* Once the frame has loaded — or the wait has run out — the placeholder goes.
   These embeds are cross-origin and none of them posts back, so the pulse would
   otherwise keep running under a fully rendered app for the life of the page.
   See the loader in assets/js/main.js for the timing. */
[data-embed-loaded="true"] .mw-apply-embed__placeholder,
[data-embed-loaded="true"] .mw-hv-shop__skeleton{
  opacity:0;visibility:hidden;transition:opacity .25s ease,visibility 0s linear .25s;
}
@media (prefers-reduced-motion:no-preference){
  /* stop the pulse animating something invisible */
  [data-embed-loaded="true"] .mw-apply-embed__placeholder{animation:none}
}
.mw-apply-embed__escape{font:400 15px/1.5 var(--mw-font);color:var(--mw-body-dark)}
.mw .mw-apply-embed__escape a{color:var(--mw-accent-ink);text-decoration:underline;text-underline-offset:3px}
.mw-form-foot{font:400 13px/1.5 var(--mw-font);color:var(--mw-body-dark);max-width:66ch}

.mw-apply-steps{
  width:min(1490px,100% - 2*var(--mw-gutter));margin-inline:auto;
  display:flex;flex-direction:column;gap:30px;
}
.mw-apply-step{display:flex;flex-direction:column;gap:8px}
.mw-apply-step__head{display:flex;gap:10px;align-items:center}
.mw-apply-step__head img{width:16px;height:16px;flex:none}
.mw-apply-step h3{font:700 22px/1.27 var(--mw-font);color:var(--mw-ink)}
.mw-apply-step p{font:400 18px/28px var(--mw-font);color:var(--mw-body-dark);max-width:1200px}
.mw-apply-note{font:500 18px/28px var(--mw-font);color:var(--mw-ink)}

/* --- Clicks reward band -------------------------------------------------- */
.mw-apply-clicks{
  background:var(--mw-navy);
  display:flex;flex-direction:column;align-items:center;gap:15px;
  padding:110px var(--mw-gutter) clamp(120px,12vw,230px);text-align:center;
}
.mw-apply-clicks__h2{font:800 32px/1.25 var(--mw-font);color:#fff}
.mw-apply-clicks__h2 span{color:var(--mw-accent-ink)}
.mw-apply-clicks__logo{width:min(240px,64vw);height:auto;margin-block:6px}
.mw-apply-clicks__body{font:400 18px/28px var(--mw-font);color:var(--mw-body-light);max-width:520px}
.mw-apply-clicks .mw-btn{margin-top:8px;font-size:18px;padding:15px 34px}

@media (max-width:77.5em){
  .mw-apply-row{flex-direction:column;gap:40px;padding-inline:var(--mw-gutter)}
  .mw-apply-row__photo{flex:none;width:min(667px,100%)}
  .mw-apply-row__form{flex:none;width:min(612px,100%)}
}
@media (max-width:47.5em){
  .mw-page-hero__h1{font-size:clamp(34px,9vw,44px)}
  .mw-page-hero--sm .mw-page-hero__h1{font-size:clamp(30px,8.2vw,38px)}
  .mw-page-hero__sub--lg{font-size:19px}
  .mw-form-grid{grid-template-columns:1fr}
  .mw-captcha{width:100%}
  .mw-form-actions .mw-btn{width:100%;margin-left:0}
  .mw-apply-main{padding:56px 0 64px;gap:36px}
  .mw-apply-h2{font-size:clamp(30px,8.2vw,38px)}
  .mw-apply-step h3{font-size:19px}
  .mw-apply-step p,.mw-apply-lead,.mw-apply-note{font-size:16px;line-height:25px}
  .mw-apply-clicks{padding:64px var(--mw-gutter) 96px}
  .mw-apply-clicks__h2{font-size:26px}
}

/* ===== PAGE: contact-us =====
   Figma "Contact Us — Desktop" 10444:2. Compact hero (.mw-page-hero--sm),
   white contact split (details column + bordered send-a-message card),
   navy got-a-question band; reuses the .mw-download band (phone variant)
   + app section. */

.mw-contact-main{background:#fff;color:var(--mw-ink);padding:90px var(--mw-gutter)}
.mw-contact-inner{
  width:min(1490px,100%);margin-inline:auto;
  display:flex;justify-content:space-between;align-items:flex-start;
  gap:clamp(32px,4vw,80px);
}
.mw-contact-details{display:flex;flex-direction:column;gap:26px;max-width:480px}
.mw-contact-details__head{display:flex;flex-direction:column;gap:6px}
.mw-contact-details__h2{font:800 clamp(36px,2.92vw,56px)/1.25 var(--mw-font);color:var(--mw-ink)}
.mw-contact-details__sub{font:400 20px/1.3 var(--mw-font);color:var(--mw-body-dark)}
.mw-contact-item{display:flex;gap:12px;align-items:flex-start}
.mw-contact-item>img{width:22px;height:22px;flex:none;margin-top:1px}
.mw-contact-item div{display:flex;flex-direction:column;gap:4px}
.mw-contact-item h3{font:700 18px/1.3 var(--mw-font);color:var(--mw-ink)}
.mw-contact-item p,.mw .mw-contact-item a{font:400 18px/26px var(--mw-font);color:var(--mw-body-dark)}
.mw .mw-contact-item a:hover{color:var(--mw-accent-ink)}
.mw-contact-hours{display:flex;flex-direction:column;gap:6px;padding-top:2px}
.mw-contact-hours div{display:flex;flex-direction:row;gap:0} /* .mw-contact-item div sets column */
.mw-contact-hours span{font:400 18px/1.3 var(--mw-font);color:var(--mw-body-dark)}
.mw-contact-hours span:first-child{width:210px;flex:none}
.mw-contact-card{
  flex:0 1 700px;min-width:0;align-self:stretch;
  border:2px solid var(--mw-navy);border-radius:20px;
  display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;
  gap:14px;text-align:center;padding:clamp(24px,2.1vw,40px);
}
/* The card centres its own heading and intro; the form inside it must not be
   centred, or every label floats away from the field it names. */
.mw-contact-card .mw-form{text-align:left;margin-top:10px}
.mw-contact-card p.mw-contact-card__alt{font:400 16px/1.5 var(--mw-font);color:var(--mw-body-dark)}
.mw-contact-card__h2{font:800 clamp(30px,2.1vw,40px)/1.2 var(--mw-font);color:var(--mw-ink)}
.mw-contact-card p{font:400 18px/1.4 var(--mw-font);color:var(--mw-body-dark)}
.mw-contact-card .mw-btn{margin-top:10px;font-size:18px;padding:15px 34px}

.mw-contact-faq{
  background:var(--mw-navy);
  display:flex;flex-direction:column;align-items:center;gap:18px;
  padding:76px var(--mw-gutter);text-align:center;
}
.mw-contact-faq__h2{font:800 clamp(30px,2.3vw,44px)/1.25 var(--mw-font);color:#fff}
.mw-contact-faq__h2 span{color:var(--mw-accent-ink)}
.mw-contact-faq__body{font:400 18px/28px var(--mw-font);color:#fff}
.mw-contact-faq .mw-btn{margin-top:8px;font-size:18px;padding:15px 34px}

@media (max-width:77.5em){
  .mw-contact-inner{flex-direction:column}
  .mw-contact-card{align-self:stretch;flex:none}
}
@media (max-width:47.5em){
  .mw-contact-main{padding:56px var(--mw-gutter)}
  .mw-contact-details__h2{font-size:clamp(30px,8.2vw,38px)}
  .mw-contact-hours span:first-child{width:150px}
  .mw-contact-card{padding:26px 18px}
  .mw-contact-faq{padding:56px var(--mw-gutter)}
  .mw-contact-faq__h2{font-size:clamp(26px,7.2vw,32px)}
  .mw-contact-faq__body br{display:none}
}

/* ===== PAGE: suggest-a-partner =====
   Figma "Suggest a Partner — Desktop" 10457:191. Reuses the networks
   hero (.mw-net-hero + .mw-pattern), then a white intro + suggestion
   form (shared .mw-form-* set), green newsletter band (.mw-pts-news). */

.mw-sug-main{
  background:#fff;color:var(--mw-ink);
  display:flex;flex-direction:column;gap:40px;
  padding:90px 0 100px;
}
.mw-sug-intro{
  width:min(1490px,100% - 2*var(--mw-gutter));margin-inline:auto;
  display:flex;flex-direction:column;gap:14px;
}
.mw-sug-h2{font:800 clamp(32px,2.3vw,44px)/1.25 var(--mw-font);color:var(--mw-ink)}
.mw-sug-intro p{font:400 18px/28px var(--mw-font);color:var(--mw-body-dark);max-width:72ch}
.mw .mw-sug-intro a{color:var(--mw-ink);text-decoration:underline;font-weight:500}
.mw .mw-sug-intro a:hover{color:var(--mw-accent-ink)}
.mw-sug-main .mw-form-card{width:min(1490px,100% - 2*var(--mw-gutter));margin-inline:auto}
/* partner-lead embeds the merchant onboarding app where its form card used to
   sit, so the frame and its escape line take that same column — without this
   the iframe runs to the viewport edge and the escape line loses its gutter. */
.mw-sug-main .mw-apply-embed,
.mw-sug-main .mw-apply-embed__escape{width:min(1490px,100% - 2*var(--mw-gutter));margin-inline:auto}

/* PHONES: the embed runs edge to edge — a square cutout, not a card.
   At 390px the apply page was insetting the frame 40px each side: the row
   subtracts the gutter through its width, and then the <=77.5em rule adds the
   same gutter again as padding. That is 80px of a 390px screen spent on margin,
   around a form that is already cramped. The card treatment — radius, side
   borders, breathing room — is what makes a frame read as an inset object; at
   this width the frame IS the page, so it gets the full width and square edges.
   Top and bottom borders stay: they are what separates it from what follows. */
@media (max-width:47.5em){
  .mw-apply-row{padding-inline:0}

  .mw-apply-embed,
  .mw-sug-main .mw-apply-embed{
    width:100vw;margin-inline:calc(50% - 50vw);
    border-radius:0;border-left:0;border-right:0;
  }

  .mw-hv-shop{width:100vw;margin-inline:calc(50% - 50vw)}
  .mw-hv-shop__frame{border-radius:0;border-left:0;border-right:0;box-shadow:none}
  /* the note is inside the now-full-bleed block, so it needs the gutter back */
  .mw-hv-shop__note{padding-inline:var(--mw-gutter)}
}

@media (max-width:47.5em){
  .mw-sug-main{padding:56px 0 64px;gap:28px}
  .mw-sug-h2{font-size:clamp(26px,7.2vw,32px)}
  .mw-sug-intro p{font-size:16px;line-height:25px}
}

/* ===== PAGE: partner-lead =====
   Figma "Partner Lead — Desktop" 10467:3031. Compact hero with Sign Up /
   Partner FAQ pills (.mw-page-hero), white sign-up intro + partner form
   (shared .mw-form-* set, .mw-sug-intro), green debt-recovery band. */

.mw-lead-debt{
  background:var(--mw-green);
  display:flex;flex-direction:column;align-items:center;gap:22px;
  padding:80px var(--mw-gutter);text-align:center;
}
.mw-lead-debt__h2{font:800 clamp(30px,2.3vw,44px)/1.18 var(--mw-font);color:var(--mw-navy)}
.mw-lead-debt__body{font:400 18px/28px var(--mw-font);color:var(--mw-navy);max-width:640px}
.mw-lead-debt__body strong{font-weight:700}
.mw-lead-debt .mw-btn{margin-top:8px;font-size:18px;padding:15px 34px}

@media (max-width:47.5em){
  .mw-lead-debt{padding:56px var(--mw-gutter)}
  .mw-lead-debt__h2{font-size:clamp(26px,7.2vw,32px)}
  .mw-lead-debt__h2 br{display:none}
  .mw-lead-debt__body{font-size:16px;line-height:25px}
}

/* ===== PAGE: for-partners =====
   Figma "For Partners — Desktop" 10410:855 (mobile 10518:2). Reuses the
   compact page hero (.mw-page-hero + .mw-pattern), the green debt-recovery
   band (.mw-lead-debt) and the pattern footer; below are only the
   benefits-card row and the partner sign-up split. */

.mw-fp-hero .mw-pattern{margin-top:clamp(28px,3.2vw,62px)}

/* --- benefits of offering MediWallet: 5 bordered cards on white ------- */
.mw-fp-benefits{
  background:#fff;color:var(--mw-ink);
  display:flex;flex-direction:column;align-items:center;gap:44px;
  padding:70px var(--mw-gutter) 50px;
}
.mw-fp-benefits__h2{
  font:800 clamp(30px,2.5vw,48px)/1.2 var(--mw-font);color:var(--mw-ink);text-align:center;
}
.mw-fp-benefits__h2 span{color:var(--mw-accent-ink)}
.mw-fp-cards{display:flex;gap:22px;justify-content:center;flex-wrap:wrap}
.mw-fp-card{
  width:272px;min-height:216px;
  background:#fff;border:1.5px solid var(--mw-line-light);border-radius:16px;
  padding:32px 20px;display:flex;flex-direction:column;align-items:center;gap:16px;
}
/* Numbered 1-5, per Figma: the discs were empty, which read as a missing
   icon rather than as a sequence. */
.mw-fp-card__icon{
  width:58px;height:58px;border-radius:50%;background:var(--mw-green);flex:none;
  display:flex;align-items:center;justify-content:center;
  font:800 24px/1 var(--mw-font);color:var(--mw-green-ink);
}
.mw-fp-card h3{font:700 20px/26px var(--mw-font);color:var(--mw-ink);text-align:center}
.mw-fp-cta{display:flex;gap:16px;justify-content:center;flex-wrap:wrap;padding-top:8px}

/* --- partner sign-up split: swoosh photo left, content right ---------- */
.mw-fp-care{
  background:#fff;color:var(--mw-ink);
  display:flex;align-items:center;gap:clamp(40px,5vw,120px);
  padding:clamp(48px,5.4vw,104px) 0;
  overflow:hidden;
}
/* the photo's bleed off the left edge was deep enough to look mis-set rather
   than deliberate — pulled back so it sits just past the gutter */
/* Bottom-flush with the section, so the photo meets the green debt-recovery
   band below it rather than floating in a strip of white. The section centres
   its two columns, so the photo opts out with align-self and the negative
   margin cancels the section's own bottom padding — the image's bottom edge
   then lands exactly on the section boundary, which IS the top of the band.
   Kept as a margin rather than zeroing the padding: the content column still
   needs that breathing room under the buttons. */
.mw-fp-care__photo{
  flex:none;width:min(1025px,53.4vw);margin-left:calc(-1*clamp(16px,2.6vw,50px));
  align-self:flex-end;margin-bottom:calc(-1*clamp(48px,5.4vw,104px));
}
.mw-fp-care__photo img{width:100%;height:auto}
.mw-fp-care__content{
  display:flex;flex-direction:column;align-items:flex-start;gap:22px;
  max-width:860px;padding-right:var(--mw-gutter);
}
.mw-fp-care__h2{font:800 clamp(34px,3.13vw,60px)/1.07 var(--mw-font);color:var(--mw-ink)}
.mw-fp-care__h2 span{color:var(--mw-accent-ink)}
.mw-fp-care__lead{font:400 18px/28px var(--mw-font);color:var(--mw-ink);max-width:760px}
.mw-fp-care__lead strong{font-weight:700}
.mw-fp-features{display:flex;flex-direction:column;gap:14px;padding-block:8px}
.mw-fp-features .mw-check-row{align-items:center}
.mw-fp-features .mw-check-row img{width:16px;height:16px;margin-top:0}
.mw-fp-features .mw-check-row p{color:var(--mw-ink)}
.mw-fp-process{display:flex;flex-direction:column;gap:24px}
.mw-fp-process h3{font:700 20px/1.25 var(--mw-font);color:var(--mw-ink)}
.mw-fp-process p{font:400 18px/28px var(--mw-font);color:var(--mw-body-dark);max-width:760px}
.mw-fp-process .mw-fp-process__contact{font-weight:500;color:var(--mw-ink)}

@media (max-width:77.5em){
  .mw-fp-care{flex-direction:column;align-items:flex-start;gap:36px}
  .mw-fp-care__photo{width:min(760px,100%);margin-left:calc(-1*clamp(12px,3vw,48px));align-self:stretch}
  .mw-fp-care__content{padding-inline:var(--mw-gutter)}
  /* wording first, image under it */
  .mw-fp-care__content{order:1}
  .mw-fp-care__photo{order:2}
}
@media (max-width:47.5em){
  .mw-fp-benefits{padding-block:56px 40px;gap:32px}
  .mw-fp-card{width:min(272px,100%)}
  .mw-fp-care__h2{font-size:clamp(30px,8.2vw,40px)}
  .mw-fp-care__lead,.mw-fp-process p{font-size:16px;line-height:25px}
  /* centred on a phone, per the mobile mock */
  .mw-fp-care{align-items:center}
  .mw-fp-care__content{align-items:center;text-align:center}
  .mw-fp-care__photo{margin-left:0;align-self:stretch}
  .mw-fp-features{align-items:flex-start}
  .mw-fp-care__cta,.mw-fp-process{align-items:center}
  .mw-fp-features .mw-check-row{align-items:flex-start}
  .mw-fp-features .mw-check-row img{margin-top:4px}
  .mw-fp-features .mw-check-row p{font-size:17px;line-height:24px}
}

/* ===== PAGE: health-vouchers =====
   Figma "Health Vouchers — Desktop" 10459:2 (mobile 10533:2). Reuses the
   compact page hero (.mw-page-hero--sm + .mw-pattern), the partner logos
   strip (.mw-partners) and the pattern footer; below are the white
   vouchers copy block, marketplace preview, pay-using pills, the navy
   partner-network band and the T&C star list. */

.mw-hv-hero .mw-pattern{margin-top:clamp(28px,3.4vw,66px)}

/* Brand-asterisk bullet (icon-check-deep.svg) shared by copy + terms. It used
   to be an 8-point star (icon-star.svg) — the one glyph on the site that was
   not the brand asterisk, which read as a different mark in the T&Cs. */
.mw-hv-star{display:flex;gap:10px;align-items:flex-start}
.mw-hv-star>img{width:16px;height:16px;flex:none;margin-top:4px}

/* --- "not ready yet" notice, standing in for the voucher shop -------- */
.mw-hv-notice{
  display:flex;flex-direction:column;align-items:center;gap:18px;
  text-align:center;
  width:min(760px,100%);margin-inline:auto;
  padding:clamp(32px,4vw,56px) clamp(24px,3vw,48px);
  border:1.5px solid var(--mw-line-light);border-radius:var(--mw-r-card);
  background:radial-gradient(120% 90% at 50% 0%,rgba(24,237,158,.10),transparent 60%),var(--mw-surface-soft);
}
.mw-hv-notice h3{font:800 clamp(24px,2vw,34px)/1.2 var(--mw-font);color:var(--mw-ink)}
.mw-hv-notice p{font:400 17px/27px var(--mw-font);color:var(--mw-body-dark)}
.mw-hv-notice .mw-btn{margin-top:6px}

/* --- white vouchers content ---------------------------------------- */
.mw-hv-main{
  background:#fff;color:var(--mw-ink);
  padding:90px var(--mw-gutter);
}
.mw-hv-inner{
  width:min(1180px,100%);margin-inline:auto;
  display:flex;flex-direction:column;gap:44px;
}
.mw-hv-h2{font:800 clamp(32px,2.71vw,52px)/1.2 var(--mw-font);color:var(--mw-ink)}
.mw-hv-h2 span{color:var(--mw-accent-ink)}
.mw-hv-block{display:flex;flex-direction:column;gap:16px}
.mw-hv-block--how{gap:12px}
.mw-hv-body{font:400 18px/28px var(--mw-font);color:var(--mw-body-dark)}
.mw-hv-how{font:700 clamp(20px,1.25vw,24px)/1.25 var(--mw-font);color:var(--mw-ink)}
.mw-hv-shop{display:block;width:min(1180px,100%);margin-inline:auto}
.mw-hv-shop__frame{
  position:relative;border-radius:var(--mw-r-card);background:var(--mw-surface-soft);overflow:hidden;
  border:1px solid rgba(5,15,41,.10);
  box-shadow:0 1px 0 rgba(5,15,41,.08),0 18px 44px -24px rgba(5,15,41,.38);
}
.mw-hv-shop__bar{
  display:flex;align-items:center;gap:14px;padding:14px 18px;
  background:var(--mw-navy);border-bottom:1px solid var(--mw-line-navy);
}
.mw-hv-shop__dot{
  width:9px;height:9px;flex:none;border-radius:var(--mw-r-pill);
  background:var(--mw-green);box-shadow:0 0 0 4px rgba(24,237,158,.16);
}
.mw-hv-shop__label{font:600 15px/1.2 var(--mw-font);color:#fff;letter-spacing:-.01em}
.mw-hv-shop__host{
  font:400 14px/1.2 var(--mw-font);color:var(--mw-foot-muted);margin-inline-start:auto;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.mw .mw-hv-shop__open{
  flex:none;font:600 14px/1 var(--mw-font);color:var(--mw-accent-ink);text-decoration:none;
  display:inline-flex;align-items:center;min-height:36px;padding:9px 18px;border:1px solid rgba(24,237,158,.4);border-radius:var(--mw-r-pill);
  transition:background .28s cubic-bezier(.16,1,.3,1),border-color .28s cubic-bezier(.16,1,.3,1),color .28s cubic-bezier(.16,1,.3,1);
}
.mw .mw-hv-shop__open:hover,
.mw .mw-hv-shop__open:focus-visible{background:var(--mw-green);border-color:var(--mw-accent-ink);color:var(--mw-green-ink)}
.mw .mw-hv-shop__open:focus-visible{outline:2px solid var(--mw-accent-ink);outline-offset:3px}
.mw-hv-shop__stage{position:relative;height:var(--mw-shop-h,760px)}
.mw-hv-shop__skeleton{
  position:absolute;inset:0;display:grid;place-items:center;
  /* --mw-muted is tuned for navy grounds (5.2:1 there); on this near-white
     panel it lands at 3.09:1, under the 4.5:1 AA needs at 16px. The body ink
     is the right token for text on a light surface. */
  font:500 16px/1.4 var(--mw-font);color:var(--mw-body-dark);
  background:radial-gradient(120% 90% at 50% 0%,rgba(24,237,158,.10),transparent 60%),var(--mw-surface-soft);
}
.mw-hv-shop__iframe{position:relative;display:block;width:100%;height:100%;border:0;background:transparent}
.mw-hv-shop__note{margin:14px 2px 0;font:400 15px/22px var(--mw-font);color:var(--mw-body-dark)}
.mw .mw-hv-shop__note a{color:var(--mw-green);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
/* The "Pay using:" card-scheme row (.mw-hv-pay) went with the voucher shop on
   2026-08-19 — nothing is purchasable on this page while it links out to the
   current site, so a payment-methods strip was answering a question the page no
   longer asks. Restore it alongside the shop. */

/* --- navy healthcare partner network band --------------------------- */
.mw-hv-net{
  background:var(--mw-navy);
  display:flex;flex-direction:column;align-items:center;gap:24px;
  padding:84px var(--mw-gutter);text-align:center;
}
.mw-hv-net__h2{font:800 clamp(30px,2.5vw,48px)/1.2 var(--mw-font);color:#fff}
.mw-hv-net__h2 span{color:var(--mw-accent-ink)}
.mw-hv-net__body{font:400 clamp(17px,1.05vw,20px)/1.5 var(--mw-font);color:var(--mw-body-light);max-width:600px}
.mw-hv-net .mw-partners{padding-top:8px}
.mw-hv-net .mw-btn{margin-top:16px;font-size:18px;padding:15px 34px}

/* --- terms & conditions --------------------------------------------- */
.mw-hv-terms{background:#fff;color:var(--mw-ink);padding:80px var(--mw-gutter) 90px}
.mw-hv-terms__inner{
  width:min(1180px,100%);margin-inline:auto;
  display:flex;flex-direction:column;gap:20px;
}
.mw-hv-terms__h2{font:800 clamp(28px,1.88vw,36px)/1.25 var(--mw-font);color:var(--mw-ink)}
.mw-hv-terms__list{display:flex;flex-direction:column;gap:12px}
.mw-hv-terms__list .mw-hv-star>img{margin-top:3px}
.mw-hv-terms__list p{font:400 16px/24px var(--mw-font);color:var(--mw-body-dark)}

@media (max-width:47.5em){
  .mw-hv-main{padding-block:56px 64px}
  .mw-hv-inner{gap:32px}
  .mw-hv-body{font-size:16px;line-height:25px}
  /* centred on a phone; starred rows keep their own left edge */
  .mw-hv-block,.mw-hv-terms__inner{text-align:center}
  .mw-hv-block .mw-hv-star,.mw-hv-terms__list .mw-hv-star{text-align:left}
  .mw-hv-shop__bar{padding:12px 14px;gap:10px}
  .mw-hv-shop__host{display:none}
  .mw-hv-shop__stage{height:min(var(--mw-shop-h,760px),78vh)}
  .mw-hv-net{padding-block:64px}
  .mw-hv-terms{padding-block:56px 64px}
}