/* =====================================================================
   WeCare by WeKongsi — dark edition
   Design language referenced from INFII (near-black canvas, glass pill
   navigation, oversized display type, gradient pill CTAs, floating glass
   cards). Driven by WeKongsi navy + teal/turquoise, not INFII's violet.
   Mobile-first. Breakpoints: base 320+, tablet 768+, desktop 1024+
   ===================================================================== */

/* ---------- 1. TOKENS ----------
   Light is the default. Dark bands opt in with .on-dark, which re-points the
   same tokens, so every component below works in both without duplication. */
:root{
  /* Brand */
  --turq:#00D6C4;
  --teal:#00BFAE;
  --deep:#008F89;
  --navy:#07133F;
  --l-teal:#E7F8F5;
  --off:#F7FBFA;
  --on-accent:#03121B;          /* label colour on the bright accent pill */

  /* Dark band canvas */
  --bg-dark:#071232;
  --bg-dark-2:#050D26;
  --bg-dark-3:#040A1C;

  /* Themed surfaces — light values */
  --glass:#FFFFFF;
  --glass-2:#FFFFFF;
  --glass-3:var(--l-teal);
  --line:rgba(7,19,63,.09);
  --line-2:rgba(7,19,63,.16);

  /* Themed ink — light values */
  --text:#07133F;
  --text-2:#4C5878;
  --text-3:#6B7799;
  --accent-ink:#04625E;          /* teal used as text */
  --icon:#008F89;                /* teal used as an icon */
  --tint:rgba(0,191,174,.10);    /* accent wash behind icons */
  --tint-line:rgba(0,191,174,.24);

  --sh-card:0 1px 3px rgba(7,19,63,.05),0 20px 40px -28px rgba(7,19,63,.4);
  --sh-float:0 2px 6px rgba(7,19,63,.06),0 28px 54px -32px rgba(7,19,63,.5);

  /* Restrained urgency accent */
  --warn:#B4491B;
  --warn-bg:rgba(255,150,80,.14);
  --warn-line:rgba(180,73,27,.24);

  --grad-accent:linear-gradient(120deg,var(--turq) 0%,var(--teal) 55%,var(--deep) 100%);
  --grad-pill:linear-gradient(120deg,#0AE6D2 0%,#00C9B8 100%);

  --glow:0 14px 34px -12px rgba(0,191,174,.55);
  --glow-sm:0 8px 22px -10px rgba(0,191,174,.5);

  --r-card:24px;
  --r-lg:28px;
  --r-pill:999px;

  --pad-x:20px;
  --sec-y:72px;
  --focus:var(--deep);
}

/* Dark bands — hero, What You Get, final CTA, footer */
.on-dark{
  --glass:rgba(255,255,255,.06);
  --glass-2:rgba(255,255,255,.1);
  --glass-3:rgba(255,255,255,.14);
  --line:rgba(255,255,255,.11);
  --line-2:rgba(255,255,255,.2);
  --text:#FFFFFF;
  --text-2:rgba(255,255,255,.74);
  --text-3:rgba(255,255,255,.56);
  --accent-ink:#00D6C4;
  --icon:#00D6C4;
  --tint:rgba(0,214,196,.13);
  --tint-line:rgba(0,214,196,.3);
  --sh-card:0 1px 0 rgba(255,255,255,.05) inset,0 24px 50px -30px rgba(0,0,0,.9);
  --sh-float:0 30px 60px -32px rgba(0,0,0,.95),0 2px 0 rgba(255,255,255,.06) inset;
  --warn:#FFB27A;
  --warn-bg:rgba(255,150,80,.14);
  --warn-line:rgba(255,150,80,.3);
  --focus:var(--turq);
  color:var(--text-2);
}

/* ---------- 2. RESET ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body,h1,h2,h3,h4,p,ul,ol,li,figure,figcaption,blockquote{margin:0;padding:0}
ul,ol{list-style:none}
img,svg{display:block;max-width:100%}
img{height:auto}
button{font:inherit;color:inherit;background:none;border:0}
a{color:inherit;text-decoration:none}
s{text-decoration-thickness:1.5px}

body{
  font-family:"Red Hat Text",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  font-size:15.5px;line-height:1.6;font-weight:400;
  color:var(--text-2);
  background:#fff;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

body>*{position:relative;z-index:1}

/* ---------- 3. LAYOUT ---------- */
.container{width:100%;max-width:1240px;margin-inline:auto;padding-inline:var(--pad-x)}
.container--narrow{max-width:820px}
.section{padding-block:var(--sec-y);position:relative}
section[id]{scroll-margin-top:92px}
.sprite{position:absolute;width:0;height:0;overflow:hidden}

.skip-link{
  position:absolute;left:12px;top:-64px;z-index:200;
  background:var(--turq);color:var(--on-accent);padding:12px 20px;
  border-radius:0 0 14px 14px;font-weight:700;transition:top .18s ease;
}
.skip-link:focus{top:0}

/* ---------- 4. TYPOGRAPHY ---------- */
h1,h2,h3{
  font-family:"Red Hat Display","Red Hat Text",system-ui,sans-serif;
  color:var(--text);font-weight:800;letter-spacing:-.03em;line-height:1.04;
}
h2,h3{text-wrap:balance}
h1{font-size:clamp(38px,11.4vw,62px);letter-spacing:-.04em}
h2{font-size:clamp(29px,8vw,40px)}
h3{font-size:18px;font-weight:700;letter-spacing:-.02em;line-height:1.25}

.eyebrow{
  display:inline-flex;align-items:center;
  font-size:11.5px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  color:var(--accent-ink);margin-bottom:14px;
}
.eyebrow--muted{color:var(--text-3)}

.section-head{max-width:660px;margin:0 auto 34px;text-align:center}
.section-head--left{text-align:left;margin-inline:0}
.section-lede{margin-top:14px;font-size:16px;color:var(--text-2)}

/* ---------- 5. ICONS ---------- */
.ico{
  width:24px;height:24px;flex:none;
  fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;
}
.ico-sm{width:16px;height:16px;stroke-width:1.9}
.ico-lg{width:30px;height:30px;stroke-width:1.5}

/* ---------- 6. BUTTONS — pill-first, like the reference ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  min-height:52px;padding:15px 28px;border-radius:var(--r-pill);
  font-family:"Red Hat Text",sans-serif;font-size:15.5px;font-weight:600;letter-spacing:.01em;
  text-align:center;cursor:pointer;
  transition:transform .2s ease,box-shadow .25s ease,filter .2s ease,background-color .2s ease,border-color .2s ease;
  -webkit-tap-highlight-color:transparent;
}
.btn-primary{
  background-image:var(--grad-pill);color:var(--on-accent);font-weight:700;
  box-shadow:var(--glow);
}
.btn-primary:hover{filter:brightness(1.08);box-shadow:0 18px 54px -14px rgba(0,214,196,.75);transform:translateY(-1px)}
.btn-primary:active{transform:translateY(1px);filter:brightness(.96)}

.btn-white{background:#fff;color:var(--navy);font-weight:700;box-shadow:0 14px 40px -16px rgba(0,0,0,.9)}
.btn-white:hover{background:#EAFBF9;transform:translateY(-1px)}
.btn-white:active{transform:translateY(1px)}

.btn-outline{
  background:var(--glass);color:var(--text);font-weight:600;
  border:1px solid var(--line-2);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
}
.btn-outline:hover{background:var(--glass-2);border-color:var(--accent-ink);color:var(--accent-ink)}
.btn-outline:active{transform:translateY(1px)}

.btn-ghost{
  background:var(--glass);color:var(--accent-ink);font-size:14.5px;font-weight:600;
  border:1px solid var(--line-2);
}
.btn-ghost:hover{background:var(--glass-2);border-color:var(--accent-ink)}

.btn-lg{width:100%;min-height:58px;font-size:16.5px;padding:17px 30px}
.btn-sm{min-height:42px;padding:10px 20px;font-size:14px}

:focus-visible{outline:3px solid var(--focus);outline-offset:3px;border-radius:8px}
.btn:focus-visible{outline:3px solid var(--focus);outline-offset:4px}

/* ---------- 7. HEADER — floating glass pill ---------- */
.site-header{
  position:fixed;top:0;left:0;right:0;z-index:100;
  padding-top:env(safe-area-inset-top);
  background:transparent;border-bottom:1px solid transparent;
  transition:background .3s ease,border-color .3s ease,backdrop-filter .3s ease;
}
.site-header.is-stuck{
  background:rgba(5,11,31,.82);
  border-bottom-color:var(--line);
  -webkit-backdrop-filter:saturate(180%) blur(18px);backdrop-filter:saturate(180%) blur(18px);
}
.header-inner{display:flex;align-items:center;gap:12px;min-height:68px}

.brand{display:flex;align-items:center;gap:10px;margin-right:auto;flex:none}
/* EASY leads, the healthcare ecosystem follows a hairline. The EASY mark
   keeps its own gold identity — the knock-out filter below is scoped to
   the WeKongsi and WeCare marks only. */
.brand-easy{height:26px;width:auto;max-width:none;flex:none}
.brand-logo{height:24px;width:auto;flex:none;filter:brightness(0) invert(1);opacity:.96}
.brand-divider{width:1px;height:22px;background:var(--line-2);flex:none}
/* The supplied WeCare lockup is stacked (mark over wordmark) with a navy
   wordmark, so on the dark header it takes the same knock-out treatment as
   the WeKongsi mark and returns to full colour once the header goes light. */
.site-nav{display:none}
.header-cta{flex:none}
/* The promo code comes first and the WeKongsi registration second, so the
   header carries both in that order. The nav is absolutely centred, which
   means the right-hand cluster has to clear it — the second button is held
   back until there is room. */
/* Styled from the header's own tokens rather than .btn-ghost, which is
   forced to a white background further down and would read as a second
   solid button on a header that is dark in both of its states. */
.header-cta2{
  display:none;flex:none;font-weight:600;
  background:var(--glass);border:1px solid var(--line-2);color:var(--text);
}
.header-cta2:hover{background:var(--glass-2);border-color:var(--accent-ink);color:var(--accent-ink)}

/* ---- language switch ----------------------------------------------
   Two letters each, so it stays out of the way of the brand and the
   CTA on a 320px header. The container borrows the header's own
   tokens, which flip when the header goes from transparent-over-hero
   to white-when-stuck; the active pill uses the fixed brand turquoise
   so it reads on both. */
.lang{
  display:inline-flex;align-items:center;gap:2px;flex:none;
  padding:3px;border-radius:var(--r-pill);
  background:var(--glass);border:1px solid var(--line);
}
.lang-btn{
  padding:5px 9px;border-radius:var(--r-pill);cursor:pointer;
  font-family:"Red Hat Text",sans-serif;font-size:11.5px;font-weight:700;letter-spacing:.06em;
  color:var(--text-2);line-height:1;
  transition:background-color .2s ease,color .2s ease;
}
.lang-btn:hover{color:var(--text)}
.lang-btn.is-active{background:var(--turq);color:var(--on-accent)}
.lang-btn:focus-visible{outline:2px solid var(--focus);outline-offset:2px}

/* The header CTA grew with "Redeem WeCare"; keep it clear of the brand
   on narrow phones, where the gap had closed to 12px. */
@media (max-width:719px){
  .header-inner{gap:8px}
  .header-cta{padding-inline:14px;font-size:13px}
  .lang-btn{padding:5px 7px;font-size:11px}
  .brand-easy{height:24px}
  .brand-logo{height:22px}
}
@media (max-width:519px){
  /* the WeKongsi mark gives way before EASY does */
  .brand-divider,.brand-logo{display:none}
  .header-cta{padding-inline:12px;font-size:12.5px}
}
@media (max-width:399px){
  .brand-easy{height:20px}
  .lang{padding:2px}
  .lang-btn{padding:4px 6px;font-size:10.5px;letter-spacing:.04em}
  .header-cta{padding-inline:9px;font-size:11px}
}
@media (min-width:768px){
  :root{--pad-x:32px;--sec-y:96px}
  .header-inner{min-height:80px}
  .brand{gap:13px}
  .brand-easy{height:30px}
  .brand-logo{height:27px}
}
@media (min-width:1024px){
  :root{--pad-x:40px;--sec-y:124px}
  body{font-size:16.5px}
  h1{font-size:clamp(56px,4.8vw,80px)}
  h2{font-size:clamp(38px,3.1vw,52px)}
  h3{font-size:20px}
  .section-head{margin-bottom:56px}
  .section-lede{font-size:18px}

}

/* The nav used to be absolutely centred, which meant it could not run out
   of room — it simply overlapped. In Malay ("Masalah Kesihatan" and the
   rest run ~500px) it sat on top of both the brand and the CTA at 1024.
   It now lays out in flow with auto side margins, so it centres in the
   space that is actually free and the header can never overlap itself.
   The cost is that it needs that space. Measured: the nav fits beside
   both CTAs only from 1250px, and it did not honestly fit at 1024 even
   before the second one. The registration CTA is the more useful of the
   two on a one-scroll page, so it comes in at 1024 and the nav waits. */
@media (min-width:1250px){
  .brand{margin-right:0}
  .site-nav{
    display:flex;align-items:center;gap:3px;margin-inline:auto;
    background:var(--glass);border:1px solid var(--line);
    -webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);
    padding:5px;border-radius:var(--r-pill);
  }
  .site-nav a{
    font-size:14px;font-weight:500;color:var(--text-2);white-space:nowrap;
    padding:9px 12px;border-radius:var(--r-pill);
    transition:color .2s ease,background-color .2s ease;
  }
  .site-nav a:hover{color:var(--text);background:var(--glass-2)}
}
@media (min-width:1024px){
  .header-cta2{display:inline-flex}
}

/* =====================================================================
   02. HERO — full-bleed image, oversized display type
   ===================================================================== */
.hero{position:relative;padding-block:96px 44px;overflow:hidden}
.hero-deco{position:absolute;inset:0;pointer-events:none;opacity:.18}
.hero-deco svg{width:100%;height:100%}
.hero-copy{position:relative;z-index:2}

/* The one EASY x WeCare cue in the hero: a violet-to-blue partner accent
   set against the teal brand, so the benefit reads as EASY's, not retail. */
.badge-easy{
  display:inline-flex;align-items:center;gap:10px;
  background:linear-gradient(118deg,rgba(139,92,246,.20) 0%,rgba(56,130,246,.16) 100%);
  border:1px solid rgba(146,110,246,.46);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  font-size:11.5px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;
  padding:10px 17px;border-radius:var(--r-pill);margin-bottom:20px;
  box-shadow:0 0 0 1px rgba(90,150,255,.12),0 14px 36px -14px rgba(124,72,246,.8);
}
.badge-text{
  background-image:linear-gradient(95deg,#D9C2FF 0%,#A9B8FF 48%,#7FDCFF 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.badge-dot{width:7px;height:7px;border-radius:50%;flex:none;
  background:linear-gradient(135deg,#B78BFF,#5FC8FF);
  box-shadow:0 0 12px 2px rgba(150,120,255,.85);animation:pulse 2.4s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.45;transform:scale(.78)}}

/* Measured at weight 700 / tracking -.04em:
     "Your EASY Benefit,"        8.412em
     "Your Everyday"             6.410em
     "Your EASY Benefit, Your"  10.677em
     "Your Everyday Healthcare." 11.599em
   Note line 2 is WIDER than line 1 plus its next word, so no width cap
   can produce a 2-line "Your EASY Benefit, / Your Everyday Healthcare."
   — any cap holding line 2 also pulls "Your" up. A cap between 8.412em
   and 10.677em gives the clean 3-line break instead, at any size. */
.hero h1{max-width:none;margin-bottom:16px}

/* ---- EASY is the brand anchor; the proposition sits under it --------
   Gold sampled from the official EASY wordmark: #C9871A through the
   #F3C84E body to the #FFF6D4 highlight, run as a vertical sheen so it
   reads metallic rather than flat yellow. EASY is gold wherever it is
   set as display type; WeCare keeps teal and WeKongsi navy. */
.gold{
  color:#F0C14B;
  background-image:linear-gradient(177deg,#FFF6D4 0%,#F7D264 20%,#E6AF32 44%,
                   #C9871A 60%,#F2CB5C 80%,#FFF1BA 100%);
  -webkit-background-clip:text;background-clip:text;
}
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .gold{color:transparent}
  .gold.gold--flat{color:#F2C94C}
}
.gold--flat{background-image:none}
.hero-brand{
  display:block;
  font-family:"Red Hat Display",sans-serif;
  font-size:clamp(68px,17.5vw,130px);font-weight:900;
  letter-spacing:-.05em;line-height:.88;margin-bottom:12px;
  filter:drop-shadow(0 12px 30px rgba(201,135,26,.38));
}
.hero-prop{
  display:block;max-width:11.5em;
  font-size:clamp(23px,5.2vw,34px);font-weight:700;
  letter-spacing:-.022em;line-height:1.1;color:var(--text);
}
.hero-sub{font-size:16px;line-height:1.5;max-width:100%;color:var(--text-2);text-wrap:pretty}

/* The key promotional message: what the promo code actually gets you. */
.hero-promo{
  margin-top:22px;
  font-size:clamp(19px,4.9vw,22px);font-weight:700;line-height:1.3;
  letter-spacing:-.01em;color:var(--text);max-width:560px;
}
.hero-promo strong{
  font-family:"Red Hat Display",sans-serif;
  font-weight:800;font-size:1.05em;letter-spacing:-.02em;color:var(--turq);
}
.hero-note{margin-top:8px;font-size:13.5px;line-height:1.5;color:var(--text-3);max-width:480px}
.hero-cta{margin-top:20px}
/* Two actions: get the code from EASY Admin, then register on WeKongsi.
   They stack on phones, where .btn-lg is full width, and sit side by side
   from 768px, where each takes its own width instead. */
.cta-pair{display:flex;flex-direction:column;gap:11px}
@media (min-width:768px){
  .cta-pair{flex-direction:row;flex-wrap:wrap;align-items:center}
  .cta-pair>.btn{width:auto;flex:0 1 auto;min-width:248px}
  .cta-pair>.btn-primary{border:1px solid transparent}
}
.hero-reassure{margin-top:10px;font-size:13px;line-height:1.45;color:var(--text-3)}

.hero-hours{
  display:flex;align-items:flex-start;gap:8px;margin-top:16px;
  font-size:13.5px;line-height:1.45;color:var(--text-3);
}
.hero-hours .ico{color:var(--icon);margin-top:2px;opacity:.75}

.hero-figure{
  position:relative;z-index:1;margin-top:30px;
  border-radius:var(--r-lg);overflow:hidden;
  box-shadow:var(--sh-float);border:1px solid var(--line);
  background:#0A1730;
}
.hero-figure img{width:100%;aspect-ratio:4/3;object-fit:cover;object-position:72% 50%}
.hero-figure::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(190deg,rgba(5,11,31,0) 40%,rgba(5,11,31,.55) 100%);
}

.hero-chip{
  position:absolute;left:14px;bottom:14px;z-index:2;
  display:flex;align-items:center;gap:10px;
  background:rgba(8,18,42,.72);border:1px solid var(--line-2);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  border-radius:var(--r-pill);padding:10px 16px 10px 13px;
}
.hero-chip .ico{color:var(--icon)}
.hero-chip span{display:block;font-size:11.5px;line-height:1.35;color:var(--text-3)}
.hero-chip b{display:block;font-size:12.5px;font-weight:700;color:var(--text)}

/* ---- below 1024 the photo is the hero's ground, as it is on desktop --
   The desktop scrim runs left-to-right because the copy sits in one
   column there. Here the copy fills the width, so the scrim runs
   top-to-bottom: solid behind the headline and the buttons, lifting
   over the lower third where the subject reads. A 16:9 source cropped
   to a tall portrait only shows a narrow vertical slice, so the
   object-position picks the slice she is standing in. */
@media (max-width:1023px){
  .hero{padding-block:104px 180px}
  .hero-deco{display:none}
  .hero-inner{display:block;position:static}
  .hero-copy{position:relative;z-index:2}
  .hero-figure{
    position:absolute;inset:0;z-index:0;margin:0;
    border-radius:0;border:0;box-shadow:none;background:var(--bg-dark);
  }
  .hero-figure img{width:100%;height:100%;aspect-ratio:auto;object-fit:cover;object-position:70% 50%}
  /* Even over the copy the wash stays above .82 so the muted note and the
     fine print keep their contrast; it only opens up in the band below
     the last line, then closes again at the section edge. */
  .hero-figure::after{
    background:linear-gradient(180deg,
      rgba(5,11,31,.90) 0%,rgba(5,11,31,.88) 34%,rgba(5,11,31,.86) 62%,
      rgba(5,11,31,.82) 78%,rgba(5,11,31,.46) 92%,rgba(5,11,31,.66) 100%);
  }
  .hero-chip{left:auto;right:16px;bottom:22px}
}
@media (min-width:768px){
  .hero{padding-block:124px 80px}
  .hero-inner{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.92fr);gap:36px;align-items:center}
  /* 768-1023 the copy column is only ~348-480px wide, too narrow to hold
     "Your EASY Benefit," at the desktop size, so the type follows it. */
  .badge-easy{font-size:12.5px;letter-spacing:.17em;padding:10px 19px}
  .hero-prop{font-size:clamp(26px,4vw,36px)}
  .hero-sub{font-size:17px;max-width:480px}
}
@media (min-width:1024px){
  .hero{padding:0;min-height:760px;display:flex;align-items:center}
  .hero-inner{padding-block:150px 110px}
  .hero-deco{display:none}
  .hero-inner{display:block;padding-block:110px;position:static}
  .hero-copy{max-width:620px}
  .hero-figure{position:absolute;inset:0;margin:0;border-radius:0;border:0;box-shadow:none;z-index:0}
  .hero-figure img{width:100%;height:100%;aspect-ratio:auto;object-position:64% 42%}
  .hero-figure::after{
    background:
      linear-gradient(95deg,rgba(5,11,31,.97) 0%,rgba(5,11,31,.92) 34%,rgba(5,11,31,.6) 52%,rgba(5,11,31,.15) 68%,rgba(5,11,31,0) 80%),
      linear-gradient(180deg,rgba(5,11,31,.7) 0%,rgba(5,11,31,0) 30%);
  }
  .hero-chip{left:auto;right:6%;bottom:10%;padding:13px 22px 13px 17px}
  .hero-chip span{font-size:12.5px}
  .hero-chip b{font-size:14px}
  .hero-copy{max-width:660px}
  .hero h1{margin-bottom:20px}
  .hero-sub{font-size:18px;max-width:480px}
  .hero-promo{margin-top:26px;font-size:22px}
  .hero-note{margin-top:9px;font-size:14px}
  .hero-cta{margin-top:22px}
  .hero-reassure{margin-top:11px;font-size:13.5px}
  .hero-hours{margin-top:18px;font-size:14px}
  /* the floating chip supports the photo; it must not rival the CTA */
  .hero-chip{opacity:.8;transform:scale(.94);transform-origin:right bottom}
}
@media (min-width:1440px){.hero{min-height:820px}.hero-copy{max-width:700px}}

/* =====================================================================
   03. QUICK BENEFITS — floating glass cards
   ===================================================================== */
.benefits{background:transparent}
.benefit-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.benefit-card{
  background:var(--glass);border:1px solid var(--line);border-radius:var(--r-card);
  padding:14px 14px 20px;box-shadow:var(--sh-card);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  transition:transform .25s ease,border-color .25s ease,background-color .25s ease;
}
.benefit-card:hover{transform:translateY(-4px);border-color:var(--line-2);background:var(--glass-2)}
.benefit-card h3{font-size:15.5px;margin-bottom:7px}
.benefit-card p{font-size:13.5px;line-height:1.5;color:var(--text-3)}

.bcard-visual{
  position:relative;aspect-ratio:3/2;margin-bottom:15px;
  border-radius:18px;overflow:hidden;
  background:linear-gradient(150deg,rgba(0,214,196,.16),rgba(0,143,137,.08));
}
[data-slot]{position:relative}
[data-slot]>img[data-optional]{
  position:absolute;inset:0;z-index:1;width:100%;height:100%;object-fit:cover;
  opacity:0;transition:opacity .4s ease;
}
[data-slot].is-ready>img[data-optional]{opacity:1}
html:not(.js) [data-slot]>img[data-optional]{opacity:1}
.bcard-visual.is-ready{background:#fff}
.bcard-visual.is-ready::after{display:none}
.visual-fallback{position:absolute;inset:0;z-index:0;display:grid;place-items:center}
.visual-fallback .ico{stroke:var(--icon);stroke-width:1.35;position:relative;z-index:1}
.bcard-visual .visual-fallback .ico{width:28%;height:auto;max-width:74px;aspect-ratio:1;stroke-width:1.25}
.vf-glow{
  position:absolute;width:78%;aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle,rgba(0,214,196,.4) 0%,rgba(0,214,196,0) 70%);
}

@media (min-width:600px){
  .benefit-grid{gap:14px}
  .benefit-card{padding:15px 16px 20px}
}
@media (min-width:768px){.benefit-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
  .benefit-card h3{min-height:2.6em}}
@media (min-width:1024px){
  .benefit-grid{gap:20px}
  .benefit-card{padding:20px 22px 28px;border-radius:var(--r-lg)}
  .benefit-card h3{font-size:18px}
  .benefit-card p{font-size:14.5px}
}

/* =====================================================================
   03b. WHY CHOOSE TELECONSULTATION
   ===================================================================== */
.why-tele{background:transparent}
.why-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.why-card{
  background:var(--glass);border:1px solid var(--line);border-radius:var(--r-card);
  padding:20px 16px;box-shadow:var(--sh-card);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  transition:transform .25s ease,border-color .25s ease,background-color .25s ease;
}
.why-card:hover{transform:translateY(-4px);border-color:var(--line-2);background:var(--glass-2)}
.why-icon{
  width:50px;height:50px;border-radius:var(--r-pill);margin-bottom:14px;
  display:grid;place-items:center;
  background:rgba(0,214,196,.12);border:1px solid rgba(0,214,196,.28);
}
.why-icon .ico{stroke:var(--icon);stroke-width:1.5;width:26px;height:26px}
.why-card h3{font-size:15.5px;margin-bottom:7px}
.why-card p{font-size:13.5px;line-height:1.5;color:var(--text-3)}

.why-note{
  display:flex;align-items:flex-start;gap:10px;margin-top:22px;
  background:var(--glass);border:1px solid var(--line);border-radius:var(--r-pill);
  padding:14px 20px;font-size:13.5px;font-weight:600;color:var(--text-2);
}
.why-note .ico{color:var(--icon);margin-top:2px}

@media (min-width:600px){
  .why-grid{gap:16px}
  .why-card{padding:24px 22px}
  .why-card h3{font-size:17px}
  .why-card p{font-size:14px}
}
@media (min-width:1024px){
  .why-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
  .why-card{padding:32px 26px;border-radius:var(--r-lg)}
  .why-card h3{font-size:19px;min-height:2.5em}
  .why-card p{font-size:14.5px}
  .why-icon{width:60px;height:60px;margin-bottom:18px}
  .why-icon .ico{width:30px;height:30px}
  .why-note{justify-content:center;align-items:center;font-size:15.5px;margin-top:34px}
}

/* =====================================================================
   05. HOW IT WORKS
   ===================================================================== */
.step{position:relative;display:flex;gap:18px;padding-bottom:34px}
.step:last-child{padding-bottom:0}
.step-line{
  position:absolute;left:23px;top:56px;bottom:4px;width:1.5px;border-radius:2px;
  background:linear-gradient(180deg,var(--turq),rgba(0,214,196,.06));
  transform:scaleY(0);transform-origin:top;transition:transform .85s cubic-bezier(.22,.7,.3,1) .1s;
}
.step.is-visible .step-line{transform:scaleY(1)}
.step:last-child .step-line{display:none}
.step-num{
  width:48px;height:48px;border-radius:var(--r-pill);flex:none;position:relative;z-index:1;
  display:grid;place-items:center;
  background-image:var(--grad-pill);color:var(--on-accent);
  font-family:"Red Hat Display",sans-serif;font-size:15px;font-weight:800;
  box-shadow:var(--glow-sm);
}
.step-body h3{margin-bottom:8px}
.step-body p{font-size:15px;color:var(--text-2)}

.step-badges{display:flex;flex-wrap:wrap;gap:9px;margin-top:14px}
.step-badges li{
  display:inline-flex;align-items:center;gap:8px;
  background:var(--glass);border:1px solid var(--line-2);border-radius:var(--r-pill);
  padding:8px 15px;font-size:12.5px;font-weight:600;color:var(--text-2);line-height:1.3;
}
.step-badges li.badge-plain{background:transparent;border-color:transparent;padding:8px 2px;color:var(--text-3)}
.step-badges .ico{color:var(--icon);flex:none}

.how-footnote{
  display:flex;align-items:flex-start;gap:11px;margin-top:32px;
  background:var(--glass);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:18px 20px;font-size:14px;font-weight:500;color:var(--text-2);
}
.how-footnote .ico{color:var(--icon);margin-top:2px}

@media (min-width:768px){
  .step-body p{font-size:16px}
  .how-footnote{justify-content:center;align-items:center;font-size:15.5px;margin-top:40px;border-radius:var(--r-pill)}
}
@media (min-width:1024px){
  .steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:44px}
  .step{flex-direction:column;gap:20px;padding-bottom:0}
  .step-line{left:66px;right:-44px;top:24px;bottom:auto;width:auto;height:1.5px;
    background:linear-gradient(90deg,var(--turq),rgba(0,214,196,.06));
    transform:scaleX(0);transform-origin:left}
  .step.is-visible .step-line{transform:scaleX(1)}
  .step-num{width:52px;height:52px;font-size:16px}
}

/* =====================================================================
   05b. MYMED
   ===================================================================== */
.mymed{background:var(--bg-alt)}
.mymed-card{display:grid;gap:32px}
.mymed-copy .section-lede{margin-top:12px}
.mymed-points{margin-top:22px}
.tick-list{display:grid;gap:13px}
.tick-list li{display:flex;align-items:flex-start;gap:11px;font-size:14.5px;color:var(--text-2)}
.tick-list .ico{color:var(--icon);margin-top:3px}

.mymed-visual{position:relative;display:grid;place-items:center;padding-block:8px}
.mv-glow{position:absolute;width:min(340px,90%);aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle,rgba(0,214,196,.26) 0%,rgba(0,214,196,0) 70%)}
.mv-call{
  position:relative;width:min(310px,100%);
  background:var(--glass);border:1px solid var(--line-2);border-radius:var(--r-lg);
  -webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);
  padding:16px;box-shadow:var(--sh-float);
}
.mv-top{display:flex;align-items:center;gap:11px}
.mymed-logo{position:relative;width:40px;height:40px;flex:none;border-radius:12px;overflow:hidden}
.mymed-logo>img{object-fit:contain}
.mymed-ph{
  display:grid;place-items:center;align-content:center;
  border:1.5px dashed var(--line-2);border-radius:12px;background:rgba(255,255,255,.04);
  font-size:8px;font-weight:700;color:var(--text-3);line-height:1.1;
}
.mymed-ph small{font-size:6.5px;font-weight:500;opacity:.8}
.mv-who{min-width:0}
.mv-who b{display:block;font-family:"Red Hat Display",sans-serif;font-size:14px;font-weight:800;color:var(--text);line-height:1.2}
.mv-who i{display:block;font-style:normal;font-size:11px;color:var(--text-3)}
.mv-live{margin-left:auto;display:flex;align-items:center;gap:6px;flex:none;
  font-size:9.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--accent-ink)}
.mv-live i{width:6px;height:6px;border-radius:50%;background:var(--turq);
  box-shadow:0 0 10px 2px rgba(0,214,196,.8);animation:pulse 2.2s ease-in-out infinite}

.mv-stage{position:relative;margin-top:14px;border-radius:20px;aspect-ratio:4/3;
  display:grid;place-items:center;overflow:hidden;
  background:linear-gradient(160deg,rgba(0,214,196,.16) 0%,rgba(5,11,31,.6) 100%);
  border:1px solid var(--line)}
.mv-ring{position:absolute;width:122px;height:122px;border-radius:50%;border:1.5px solid rgba(0,214,196,.3)}
.mv-doc{position:relative;width:74px;height:74px;border-radius:50%;display:grid;place-items:center;
  color:var(--on-accent);background-image:var(--grad-pill);box-shadow:var(--glow)}
.mv-doc .ico{width:34px;height:34px;stroke-width:1.5}
.mv-label{position:absolute;left:50%;bottom:13px;transform:translateX(-50%);
  background:rgba(8,18,42,.8);border:1px solid var(--line-2);border-radius:var(--r-pill);
  padding:6px 14px;font-size:11px;font-weight:600;color:var(--text);white-space:nowrap}
.mv-ctrls{display:flex;justify-content:center;gap:15px;margin-top:16px}
.mv-btn{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;
  background:var(--glass-2);border:1px solid var(--line);color:var(--accent-ink)}
.mv-btn--end{width:48px;height:48px;color:var(--on-accent);border-color:transparent;
  background-image:var(--grad-pill);box-shadow:var(--glow-sm)}
.mv-btn--end .ico{width:20px;height:20px}
.mv-hours{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:14px;
  font-size:12px;font-weight:600;color:var(--text-3)}
.mv-hours .ico{color:var(--icon)}

.medjourney{
  margin-top:30px;background:var(--glass);border:1px solid var(--line);
  border-radius:var(--r-lg);padding:24px 20px;
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
}
.medjourney-title{font-size:16px;margin-bottom:20px}
.medjourney-steps{display:grid;gap:0}
.medjourney-steps li{position:relative;display:flex;gap:14px;padding-bottom:20px}
.medjourney-steps li:last-child{padding-bottom:0}
.medjourney-steps li::before{content:"";position:absolute;left:20px;top:44px;bottom:2px;width:1.5px;border-radius:2px;
  background:linear-gradient(180deg,rgba(0,214,196,.45),rgba(0,214,196,.04))}
.medjourney-steps li:last-child::before{display:none}
.mj-ico{width:40px;height:40px;border-radius:var(--r-pill);flex:none;display:grid;place-items:center;
  background:rgba(0,214,196,.1);border:1px solid rgba(0,214,196,.26);color:var(--accent-ink)}
.mj-ico .ico{width:20px;height:20px}
.medjourney-steps b{display:block;font-size:14.5px;font-weight:600;color:var(--text);line-height:1.3}
.medjourney-steps div span{display:block;font-size:13px;line-height:1.5;color:var(--text-3);margin-top:3px}
.medjourney-note{
  display:inline-flex;align-items:center;gap:9px;margin-top:20px;
  background:rgba(0,214,196,.1);border:1px solid rgba(0,214,196,.3);
  border-radius:var(--r-pill);padding:10px 18px;
  font-size:13px;font-weight:700;color:var(--accent-ink);
}
.medjourney-note .ico{color:var(--icon)}

@media (min-width:768px){
  .tick-list li{font-size:15.5px}
  .medjourney{padding:30px 26px}
  .medjourney-title{font-size:18px;margin-bottom:24px}
  .medjourney-steps{grid-template-columns:repeat(3,minmax(0,1fr));gap:26px}
  .medjourney-steps li{flex-direction:column;gap:13px;padding-bottom:0}
  .medjourney-steps li::before{left:52px;right:-26px;top:20px;bottom:auto;width:auto;height:1.5px;
    background:linear-gradient(90deg,rgba(0,214,196,.45),rgba(0,214,196,.04))}
}
@media (min-width:1024px){
  .mymed-card{grid-template-columns:minmax(0,1fr) minmax(0,.82fr);gap:64px;align-items:center}
  .mv-call{width:330px}
  .medjourney{margin-top:46px;padding:36px 38px}
}

/* =====================================================================
   06. LIFESTYLE
   ===================================================================== */
.lifestyle{background:transparent}
.lifestyle-grid{display:grid;gap:30px}
.lifestyle-figure{position:relative;border-radius:var(--r-lg);overflow:hidden;
  aspect-ratio:4/3;background:#0A1730;box-shadow:var(--sh-float);border:1px solid var(--line)}
.lf-photo{position:absolute;inset:0;background-repeat:no-repeat;
  background-image:url(images/wecare-hero-640.jpg);background-size:150%;background-position:68% 34%}
.lf-photo::after{content:"";position:absolute;inset:0;
  background:linear-gradient(200deg,rgba(0,214,196,.12),rgba(5,11,31,.5))}
.lf-chip{
  position:absolute;display:flex;align-items:center;gap:9px;z-index:2;
  background:rgba(8,18,42,.76);border:1px solid var(--line-2);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  border-radius:var(--r-pill);padding:9px 16px;
}
.lf-chip .ico{color:var(--icon)}
.lf-chip b{font-size:12px;font-weight:600;color:var(--text)}
.lf-chip--a{left:14px;top:14px}
.lf-chip--b{right:14px;bottom:14px}
.lifestyle-copy .tick-list{margin-top:24px}

@media (min-width:768px){
  .lf-photo{background-image:url(images/wecare-hero-960.jpg);background-size:150%}
  .lifestyle-figure{aspect-ratio:16/11}
}
@media (min-width:1024px){
  .lifestyle-grid{grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:64px;align-items:center}
  .lifestyle-figure{aspect-ratio:5/4}
  .lf-photo{background-size:170%;background-position:70% 36%}
  .lf-chip--a{left:22px;top:22px}
  .lf-chip--b{right:22px;bottom:22px}
  .lf-chip b{font-size:13.5px}
  .tick-list li{font-size:16.5px}
}

/* =====================================================================
   07. CONDITIONS + EVERYDAY HEALTH CONCERNS
   ===================================================================== */
.conditions{background:var(--bg-alt)}
.concern-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-bottom:30px}
.concern-grid li{
  display:flex;align-items:center;gap:11px;
  background:var(--glass);border:1px solid var(--line);border-radius:var(--r-pill);
  padding:10px 14px 10px 10px;font-size:12.5px;font-weight:600;line-height:1.3;color:var(--text);
}
.cg-ico{width:34px;height:34px;border-radius:50%;flex:none;display:grid;place-items:center;
  background:rgba(0,214,196,.12);border:1px solid rgba(0,214,196,.24)}
.cg-ico .ico{width:18px;height:18px;stroke:var(--icon);stroke-width:1.6}
.cond-intro{text-align:center;font-size:14.5px;font-weight:500;color:var(--text-3);margin-bottom:20px}

.condition-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.condition-grid li{
  display:flex;align-items:flex-start;gap:9px;
  background:var(--glass);border:1px solid var(--line);border-radius:16px;
  padding:13px 12px;font-size:12.5px;font-weight:500;line-height:1.35;color:var(--text-2);
}
.condition-grid .ico{width:14px;height:14px;color:var(--accent-ink);margin-top:2px}
.condition-grid.is-collapsed li:nth-child(n+9){display:none}
.conditions-toggle{margin:22px auto 0;display:flex}
.ct-less{display:none}
.conditions-toggle[aria-expanded="true"] .ct-more{display:none}
.conditions-toggle[aria-expanded="true"] .ct-less{display:inline}
.ct-chevron{transition:transform .25s ease}
.conditions-toggle[aria-expanded="true"] .ct-chevron{transform:rotate(180deg)}

@media (min-width:520px){
  .concern-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
  .concern-grid li{font-size:13px}
  .condition-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
  .condition-grid li{font-size:13.5px;padding:14px 15px}
}
@media (min-width:768px) and (max-width:1023px){
  .condition-grid.is-collapsed li:nth-child(n+9){display:flex}
  .conditions-toggle{display:none}
}
@media (min-width:1024px){
  .concern-grid{gap:16px;margin-bottom:40px}
  .concern-grid li{font-size:14.5px;padding:12px 20px 12px 12px}
  .cg-ico{width:42px;height:42px}
  .cg-ico .ico{width:21px;height:21px}
  .cond-intro{font-size:16.5px;margin-bottom:26px}
  .condition-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
  .condition-grid li{font-size:14.5px;padding:16px 18px;border-radius:18px}
  .condition-grid.is-collapsed li:nth-child(n+9){display:flex}
  .conditions-toggle{display:none}
}

/* =====================================================================
   07b. WHEN YOU NEED MORE THAN A TELECONSULTATION
   ===================================================================== */
.not-suitable{background:transparent}
.ns-grid{display:grid;gap:14px}
.ns-card{
  position:relative;overflow:hidden;
  background:var(--glass);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:26px 22px;box-shadow:var(--sh-card);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
}
.ns-watermark{position:absolute;right:-16px;bottom:-16px;width:124px;height:124px;
  fill:none;stroke:rgba(255,255,255,.05);stroke-width:1.2;pointer-events:none}
.ns-icon{
  width:56px;height:56px;border-radius:var(--r-pill);margin-bottom:16px;
  display:grid;place-items:center;position:relative;z-index:1;
  background:rgba(0,214,196,.12);border:1px solid rgba(0,214,196,.28);color:var(--accent-ink);
}
.ns-card h3{font-size:18px;margin-bottom:10px;position:relative;z-index:1}
.ns-card p{font-size:14.5px;line-height:1.55;color:var(--text-3);position:relative;z-index:1}

/* Urgency: one restrained accent, never a red section */
.ns-card--urgent{border-color:var(--warn-line)}
.ns-card--urgent .ns-icon{background:var(--warn-bg);border-color:var(--warn-line);color:var(--warn)}
.ns-card--urgent .ns-watermark{stroke:rgba(255,150,80,.07)}

@media (min-width:768px){.ns-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}}
@media (min-width:1024px){
  .ns-grid{gap:26px}
  .ns-card{padding:38px 34px}
  .ns-card h3{font-size:21px}
  .ns-card p{font-size:16px}
  .ns-icon{width:64px;height:64px;margin-bottom:20px}
}

/* =====================================================================
   08. ELIGIBILITY
   ===================================================================== */
.eligibility{background:var(--bg-alt)}
.elig-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.elig-card{
  background:var(--glass);border:1px solid var(--line);border-radius:var(--r-card);
  padding:26px 14px;text-align:center;box-shadow:var(--sh-card);
  transition:transform .25s ease,border-color .25s ease;
}
.elig-card:hover{transform:translateY(-4px);border-color:var(--line-2)}
.elig-icon{width:62px;height:62px;margin:0 auto 14px;border-radius:var(--r-pill);
  display:grid;place-items:center;
  background:rgba(0,214,196,.1);border:1px solid rgba(0,214,196,.26)}
.elig-icon .ico{stroke:var(--icon);stroke-width:1.5}
.elig-card h3{font-size:15px;letter-spacing:-.015em}

@media (min-width:768px){
  .elig-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
  .elig-card{padding:32px 16px}
  .elig-card h3{font-size:16.5px}
}
@media (min-width:1024px){
  .elig-grid{gap:20px}
  .elig-card{padding:40px 22px;border-radius:var(--r-lg)}
  .elig-icon{width:74px;height:74px;margin-bottom:18px}
  .elig-icon .ico{width:34px;height:34px}
  .elig-card h3{font-size:18px}
}

/* =====================================================================
   09. PRICING
   ===================================================================== */
.pricing{background:transparent}
.price-today{
  display:grid;gap:14px;align-items:center;text-align:center;
  background:var(--glass);border:1px solid var(--line-2);border-radius:var(--r-lg);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  padding:28px 20px;
}
.pt-label{font-size:11px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--text-3)}
.pt-amount{font-family:"Red Hat Display",sans-serif;font-size:52px;font-weight:800;
  letter-spacing:-.045em;color:var(--text);line-height:1;margin:6px 0 8px}
.pt-amount--after{font-size:36px}
.pt-amount .per{font-family:"Red Hat Text",sans-serif;font-size:14px;font-weight:500;letter-spacing:0;color:var(--text-3);margin-left:7px}
.pt-note{font-size:13.5px;color:var(--text-3)}
.pt-arrow{display:grid;place-items:center;color:var(--accent-ink)}
.pt-arrow .ico{width:28px;height:28px;stroke-width:1.8}
.pt-block--now .pt-amount{background-image:var(--grad-accent);-webkit-background-clip:text;background-clip:text;color:transparent}

.pricing-lede{margin:34px 0 22px;text-align:center;font-size:16.5px;font-weight:500;color:var(--text-2)}

.plan-grid{display:grid;gap:22px}
.plan-card{
  position:relative;background:var(--glass);border:1px solid var(--line);
  border-radius:var(--r-lg);padding:28px 24px;box-shadow:var(--sh-card);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  transition:transform .25s ease,border-color .25s ease;
}
.plan-card:hover{transform:translateY(-4px);border-color:var(--line-2)}
.plan-card--featured{
  border-color:rgba(0,214,196,.5);
  background:linear-gradient(170deg,rgba(0,214,196,.13) 0%,rgba(255,255,255,.05) 60%);
  box-shadow:0 0 0 1px rgba(0,214,196,.2),0 28px 60px -30px rgba(0,214,196,.5);
}
.plan-flag{
  position:absolute;top:-13px;left:24px;
  background-image:var(--grad-pill);color:var(--on-accent);
  font-size:10.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  padding:6px 14px;border-radius:var(--r-pill);box-shadow:var(--glow-sm);
}
.plan-name{font-size:11.5px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--text-3);margin-bottom:12px}
.plan-price{font-family:"Red Hat Display",sans-serif;font-size:44px;font-weight:800;
  letter-spacing:-.045em;color:var(--text);line-height:1}
.plan-price .per{font-family:"Red Hat Text",sans-serif;font-size:14px;font-weight:500;letter-spacing:0;color:var(--text-3);margin-left:6px}
.plan-was{margin-top:10px;font-size:13.5px;color:var(--text-3)}
.plan-was s{color:rgba(255,255,255,.35)}
.plan-points{margin-top:18px;display:grid;gap:9px}
.plan-points li{display:flex;align-items:flex-start;gap:10px;font-size:14.5px;color:var(--text-2)}
.plan-points .ico{color:var(--icon);margin-top:3px}
.plan-footnote{margin-top:22px;text-align:center;font-size:13.5px;color:var(--text-3)}

/* 10. PAYMENT DISCLOSURE */
.disclosure{
  display:flex;gap:16px;margin-top:34px;
  background:rgba(0,214,196,.09);border:1px solid rgba(0,214,196,.32);
  border-radius:var(--r-lg);padding:24px 20px;
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
}
.disclosure-icon{width:50px;height:50px;border-radius:var(--r-pill);flex:none;display:grid;place-items:center;
  background:rgba(0,214,196,.16);border:1px solid rgba(0,214,196,.3);color:var(--accent-ink)}
.disclosure h3{font-size:20px;margin-bottom:11px;letter-spacing:-.025em}
.disclosure p{font-size:14.5px;line-height:1.55;color:var(--text-2)}
.disclosure p+p{margin-top:12px}
.disclosure-strong{font-weight:600;color:var(--text)}
.trial-end{font-weight:700;color:var(--accent-ink);text-decoration:underline;
  text-decoration-color:rgba(0,214,196,.5);text-underline-offset:4px;text-decoration-thickness:2px}

.pricing-cta{margin-top:34px;text-align:center}
.cta-sub{display:flex;align-items:center;justify-content:center;gap:9px;margin-top:14px;
  font-size:13.5px;font-weight:500;color:var(--text-3)}
.cta-sub .ico{color:var(--icon)}

@media (min-width:600px){
  .price-today{grid-template-columns:1fr auto 1fr;gap:22px;padding:34px 28px}
  .pt-arrow .ico{transform:rotate(-90deg)}
}
@media (min-width:768px){
  .plan-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
  .disclosure{padding:28px;gap:20px}
  .disclosure h3{font-size:23px}
  .disclosure p{font-size:15.5px}
  .pricing-cta .btn{width:auto;min-width:340px}
}
@media (min-width:1024px){
  .price-today{padding:48px 52px}
  .pt-amount{font-size:72px}
  .pt-amount--after{font-size:50px}
  .pt-label{font-size:12px}
  .pt-note{font-size:15px}
  .plan-grid{gap:26px}
  .plan-card{padding:38px 34px}
  .plan-price{font-size:54px}
  .plan-points li{font-size:15.5px}
  .pricing-lede{font-size:19px;margin:44px 0 30px}
  .disclosure{padding:36px 40px;margin-top:44px}
  .disclosure h3{font-size:28px}
  .disclosure p{font-size:17px}
  .disclosure-icon{width:58px;height:58px}
}

/* =====================================================================
   11. WEKONGSI COST-SHARING — wide closing hero
   A horizontal composition: landscape artwork left, one compact content
   column right, both centred against each other. The section earns its
   weight from width and type, not from height, so the band is kept to
   roughly 650-700px on desktop and the artwork stays landscape at every
   width rather than being stretched into a portrait card.
   ===================================================================== */
.wk{
  position:relative;overflow:hidden;
  padding-block:clamp(44px,4.2vw,54px);
  background:
    radial-gradient(720px 560px at 86% 4%,rgba(0,214,196,.20),transparent 62%),
    radial-gradient(640px 520px at 6% 96%,rgba(18,190,130,.16),transparent 64%),
    linear-gradient(158deg,#04122B 0%,#062440 36%,#053F3D 72%,#076047 100%);
}
/* Wider than the page container: this band is meant to feel horizontal. */
.wk .container{max-width:1500px;padding-inline:var(--pad-x)}
.wk-grid{display:grid;gap:30px;align-items:center}

/* ---- artwork — landscape at every width --------------------------- */
.wk-figure{
  position:relative;width:100%;
  aspect-ratio:4/3;max-height:320px;
  border-radius:20px;overflow:hidden;
  border:1px solid rgba(0,214,196,.22);
  background:linear-gradient(150deg,rgba(0,214,196,.14) 0%,rgba(4,18,43,.7) 100%);
  box-shadow:0 34px 64px -34px rgba(0,0,0,.9);
}
/* 4:3 from a 3:2 source trims ~11% of the width. Centring split the
   "WE KONGSI" mark in the artwork; 82% keeps both that mark and the
   family at the left edge inside the frame. */
.wk-figure>img[data-optional]{object-position:82% center}
.wk-fallback{overflow:hidden}
.wk-mark{width:72px;height:72px;stroke:var(--turq);stroke-width:1.25;position:relative;z-index:1}
.wk-orb{position:absolute;border-radius:50%}
.wk-orb--1{width:210px;height:210px;left:-52px;top:-60px;
  background:radial-gradient(circle,rgba(0,214,196,.4),rgba(0,214,196,0) 70%)}
.wk-orb--2{width:250px;height:250px;right:-70px;bottom:-90px;
  background:radial-gradient(circle,rgba(18,190,130,.32),rgba(18,190,130,0) 70%)}
.wk-fallback::after{content:"";position:absolute;width:140px;height:140px;border-radius:50%;
  border:1.5px dashed rgba(0,214,196,.28)}

/* ---- message ------------------------------------------------------ */
.wk .eyebrow{font-size:11.5px;letter-spacing:.17em;margin-bottom:14px}
/* Greedy wrapping, not balance: the break must follow the measure so the
   headline lands on 2 lines wherever the column can hold them. */
.wk-body h2{
  font-size:clamp(34px,9.2vw,38px);
  font-weight:700;line-height:1.03;letter-spacing:-.024em;
  max-width:none;text-wrap:wrap;
}
.wk-body .section-lede{margin-top:18px;font-size:16px;line-height:1.5;max-width:590px}

/* the money statement — three parts, read as one */
.wk-value{margin-top:28px}
.wk-upto{
  font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:.17em;
  color:rgba(255,255,255,.56);
}
.wk-big{
  font-family:"Red Hat Display",sans-serif;
  font-size:clamp(36px,10.8vw,46px);font-weight:800;
  letter-spacing:-.04em;line-height:1.02;
  font-variant-numeric:tabular-nums;
  margin-top:4px;color:var(--turq);
}
.wk-big-sub{
  margin-top:6px;max-width:34ch;
  font-size:14.5px;font-weight:600;line-height:1.45;color:#fff;
}

/* membership price, below a hairline rule */
.wk-terms{margin-top:22px;padding-top:18px;border-top:1px solid rgba(0,214,196,.22)}
.wk-price{
  font-family:"Red Hat Display",sans-serif;
  font-size:26px;font-weight:800;letter-spacing:-.025em;line-height:1;color:#fff;
}
.wk-price span{font-size:15px;font-weight:600;color:rgba(255,255,255,.62);letter-spacing:0}
.wk-price-sub{margin-top:6px;font-size:13px;line-height:1.5;color:rgba(255,255,255,.58)}
.wk-incl{
  display:inline-flex;align-items:center;margin-top:10px;
  padding:6px 13px;border-radius:999px;
  background:transparent;border:1px solid rgba(0,214,196,.32);
  font-size:12.5px;font-weight:600;letter-spacing:.01em;color:var(--turq);
}
/* One line at every width: a wrapped label turns this pill into a slab
   that out-weighs the RM1,000,000 statement above it. */
.wk-cta{margin-top:24px;width:100%;min-height:54px;white-space:nowrap}
.wk-arrow{margin-left:9px;transition:transform .25s ease}
.wk-cta:hover .wk-arrow{transform:translateX(4px)}
@media (prefers-reduced-motion:reduce){.wk-arrow{transition:none}}

/* The headline is a question now, and the BM reading of it is the long
   one, so the cap below is what keeps it off a fourth line on phones. */
@media (min-width:424px) and (max-width:767px){
  /* .wk-grid IS the .container element, so this needs to match the
     specificity of .wk .container{max-width:1500px} to win. */
  .wk .wk-grid{max-width:540px}
  .wk-figure{max-height:none}
  .wk-body h2{font-size:clamp(34px,7.9vw,38px)}
}
@media (min-width:768px){
  .wk .container{padding-inline:clamp(28px,7.5vw,110px)}
}

/* ---- two columns, centred against each other ----------------------
   The headline ramps with the viewport rather than sitting at a fixed
   desktop size: below ~1300px a 48px headline cannot hold "WeKongsi
   Helps Share" on one line in a 52% column, and 2 lines matter more. */
@media (min-width:768px){
  .wk-grid{grid-template-columns:minmax(0,48fr) minmax(0,52fr);gap:clamp(40px,3.8vw,56px)}
  .wk-figure{border-radius:24px;min-height:0;max-height:620px}
  .wk .eyebrow{font-size:12px;letter-spacing:.165em}
  .wk-body h2{font-size:clamp(29px,3.55vw,52px);line-height:1;letter-spacing:-.03em;max-width:620px}
  .wk-body .section-lede{font-size:16.5px;line-height:1.48}
  .wk-big{font-size:clamp(34px,3.6vw,52px)}
  .wk-big-sub{font-size:14.5px}
  .wk-terms{margin-top:24px;padding-top:20px}
  .wk-price{font-size:28px}
  .wk-price span{font-size:16px}
  .wk-price-sub{font-size:13.5px}
  .wk-incl{margin-top:12px}
  /* Hug the label rather than sit in a fixed box: 230px was narrower
     than "Discover WeKongsi", so the button grew a second line. */
  .wk-cta{margin-top:24px;width:auto;min-height:52px}
}

/* =====================================================================
   12. FAQ
   ===================================================================== */
.faq{background:transparent}
.faq-list{display:grid;gap:12px}
.faq-item{
  background:var(--glass);border:1px solid var(--line);border-radius:var(--r-card);
  transition:border-color .25s ease,background-color .25s ease;
}
.faq-item.is-open{border-color:rgba(0,214,196,.4);background:var(--glass-2)}
.faq-item h3{font-size:15.5px;font-weight:600}
.faq-q{
  width:100%;display:flex;align-items:center;justify-content:space-between;gap:16px;
  text-align:left;padding:19px 20px;min-height:60px;cursor:pointer;
  font-family:"Red Hat Text",sans-serif;font-size:15.5px;font-weight:600;color:var(--text);line-height:1.35;
  border-radius:var(--r-card);
}
.faq-q:hover{color:var(--accent-ink)}
.faq-chevron{color:var(--accent-ink);transition:transform .25s ease;flex:none}
.faq-q[aria-expanded="true"] .faq-chevron{transform:rotate(180deg)}
.faq-a{display:grid;grid-template-rows:1fr;transition:grid-template-rows .3s cubic-bezier(.22,.7,.3,1)}
.faq-a[data-collapsed]{grid-template-rows:0fr}
.faq-a-inner{overflow:hidden}
.faq-a p{padding:0 20px 20px;font-size:14.5px;line-height:1.6;color:var(--text-3)}

@media (min-width:768px){
  .faq-q,.faq-item h3{font-size:17px}
  .faq-q{padding:22px 26px;min-height:66px}
  .faq-a p{padding:0 26px 24px;font-size:15.5px}
}

/* =====================================================================
   13. FINAL CTA
   ===================================================================== */
.final-cta{position:relative;overflow:hidden;padding-block:52px}
.fc-deco{position:absolute;inset:0;opacity:.09;pointer-events:none}
.fc-deco svg{width:100%;height:100%}
.fc-inner{position:relative;z-index:1;display:grid;gap:28px;align-items:center}

.fc-eyebrow{
  font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.14em;
  line-height:1.4;color:var(--accent-ink);margin-bottom:12px;
}
/* Measured at weight 700 / -.03em: "Start with 30 days of" is 9.095em and
   "…of WeCare," is 13.116em, so any cap between them holds the intended
   2-line break. 11em sits mid-range and scales with the type. */
.final-cta h2{
  font-size:clamp(34px,8.6vw,40px);
  font-weight:700;line-height:1.03;letter-spacing:-.03em;
  color:var(--text);max-width:11em;margin-inline:0;text-wrap:wrap;
}
.final-cta h2 span:not(.gold){color:var(--turq)}
.fc-lede{margin-top:14px;font-size:15.5px;line-height:1.5;font-weight:500;color:var(--text-2);max-width:40ch}

.fc-action{display:flex;flex-direction:column;align-items:stretch;gap:10px}
.fc-btn{width:100%;min-height:56px;font-size:16px}
.fc-arrow{margin-left:9px;transition:transform .25s ease}
.fc-btn:hover .fc-arrow{transform:translateX(4px)}
@media (prefers-reduced-motion:reduce){.fc-arrow{transition:none}}
.fc-sub{font-size:13px;font-weight:500;line-height:1.4;color:var(--text-3);text-align:center}
/* .fc-inner IS the .container element, so this needs 0,2,0 to win. */
@media (max-width:767px){.final-cta .fc-inner{max-width:460px}}

@media (min-width:768px){
  /* Short and wide: a min-height plus centred content replaces the old
     140px vertical padding, which left most of the band empty. */
  .final-cta{display:flex;align-items:center;min-height:400px;padding-block:56px}
  .fc-inner{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px;width:100%}
  .fc-eyebrow{font-size:14px;letter-spacing:.145em;margin-bottom:14px}
  .final-cta h2{font-size:clamp(34px,4.5vw,46px)}
  .fc-lede{margin-top:16px;font-size:17.5px}
  .fc-action{align-items:flex-end}
  .fc-btn{width:288px;min-height:58px}
  .fc-sub{width:288px}
}
@media (min-width:1024px){
  .final-cta{min-height:420px}
  .fc-inner{gap:48px}
  .final-cta h2{font-size:clamp(48px,3.9vw,58px)}
}

/* =====================================================================
   14. FOOTER
   ===================================================================== */
.site-footer{border-top:1px solid var(--line);
  color:var(--text-3);padding-block:52px 34px}
.footer-inner{display:grid;gap:30px}
.footer-logo{width:170px;height:auto;filter:brightness(0) invert(1);opacity:.92}
.footer-tagline{margin-top:16px;font-size:14.5px;font-weight:500;color:var(--text-2)}
/* Registered entity, where it sits and how to reach it. Sits between the
   brand and the link list so the footer reads name, address, contact,
   links rather than turning the links into a contact list. */
.footer-contact{max-width:34ch}
.fco-name{font-size:14.5px;font-weight:700;color:var(--text-2)}
.fco-addr{margin-top:6px;font-size:13.5px;line-height:1.6;font-style:normal;color:var(--text-3)}
.fco-reach{display:flex;flex-wrap:wrap;align-items:center;gap:0 10px;margin-top:10px;font-size:13.5px}
.fco-reach a{color:var(--text-2);transition:color .2s ease}
.fco-reach a:hover{color:var(--accent-ink);text-decoration:underline}
.fco-sep{color:var(--text-3);opacity:.6}

.footer-nav{display:grid;gap:13px}
.footer-nav a{
  display:inline-flex;align-items:center;gap:10px;
  font-size:14.5px;color:var(--text-2);transition:color .2s ease;
}
.footer-nav a .ico{color:var(--icon);opacity:.8;flex:none;transition:opacity .2s ease}
.footer-nav a:hover{color:var(--accent-ink)}
.footer-nav a:hover .ico{opacity:1}

/* Website and the two social accounts: mark only, in a soft glass chip.
   The brand glyphs are the platforms' own, so they take the fill
   treatment rather than the page's stroke icons. */
.footer-social{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}
.footer-social a{
  display:grid;place-items:center;width:38px;height:38px;border-radius:50%;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);
  color:var(--text-2);
  transition:background-color .2s ease,border-color .2s ease,color .2s ease,transform .2s ease;
}
.footer-social a:hover{
  background:rgba(0,214,196,.16);border-color:rgba(0,214,196,.45);
  color:var(--turq);transform:translateY(-2px);
}
.footer-social a:focus-visible{outline:2px solid var(--turq);outline-offset:3px}
@media (prefers-reduced-motion:reduce){.footer-social a{transition:none}.footer-social a:hover{transform:none}}
.footer-legal{margin-top:34px;padding-top:26px;border-top:1px solid var(--line)}
.footer-legal p{font-size:12.5px;line-height:1.7;color:var(--text-3)}
.footer-disclaimer{margin-top:12px}
.footer-copy{margin-top:14px;opacity:.75}

@media (min-width:768px){
  /* brand | contact on the first row, links across the second — three
     columns do not fit here without squeezing the address. */
  .footer-inner{grid-template-columns:1fr 1fr;align-items:start;gap:32px 40px}
  .footer-nav{grid-column:1 / -1;grid-auto-flow:column;justify-content:start;gap:32px;align-items:center}
}
@media (min-width:1024px){
  /* room for all three: brand | contact | links down the right edge */
  .footer-inner{grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto;gap:48px}
  .footer-nav{grid-column:auto;grid-auto-flow:row;gap:12px;align-items:start;justify-items:end}
}
@media (min-width:1024px){.site-footer{padding-block:72px 40px}.footer-logo{width:190px}}

/* =====================================================================
   15. MOBILE STICKY CTA
   ===================================================================== */
.sticky-cta{
  position:fixed;left:0;right:0;bottom:0;z-index:90;
  background:rgba(5,11,31,.88);
  -webkit-backdrop-filter:saturate(180%) blur(18px);backdrop-filter:saturate(180%) blur(18px);
  border-top:1px solid var(--line);
  padding:12px var(--pad-x);padding-bottom:calc(12px + env(safe-area-inset-bottom));
  transform:translateY(130%);transition:transform .32s cubic-bezier(.22,.7,.3,1);
}
.sticky-cta.is-visible{transform:translateY(0)}
.sticky-inner{display:flex;align-items:center;gap:14px;max-width:640px;margin-inline:auto}
.sticky-text{display:none;flex:none}
.sticky-text b{display:block;font-size:14px;font-weight:700;color:var(--text);line-height:1.2}
.sticky-text span{display:block;font-size:11.5px;color:var(--text-3)}
.sticky-cta .btn{flex:1;min-height:52px;font-size:15px}

@media (min-width:420px){.sticky-text{display:block}}
@media (max-width:1023px){body{padding-bottom:calc(80px + env(safe-area-inset-bottom))}}
@media (min-width:1024px){.sticky-cta{display:none}}

/* =====================================================================
   16. SCROLL REVEAL + MOTION
   ===================================================================== */
.js .reveal{opacity:0;transform:translateY(22px);transition:opacity .7s ease,transform .75s cubic-bezier(.22,.7,.3,1)}
.js .reveal.is-visible{opacity:1;transform:none}
.js .benefit-grid .reveal:nth-child(2),.js .elig-grid .reveal:nth-child(2),
.js .plan-grid .reveal:nth-child(2),.js .why-grid .reveal:nth-child(2){transition-delay:.07s}
.js .benefit-grid .reveal:nth-child(3),.js .elig-grid .reveal:nth-child(3),
.js .plan-grid .reveal:nth-child(3),.js .why-grid .reveal:nth-child(3){transition-delay:.14s}
.js .benefit-grid .reveal:nth-child(4),.js .elig-grid .reveal:nth-child(4),
.js .why-grid .reveal:nth-child(4){transition-delay:.21s}
.js .steps .reveal:nth-child(2){transition-delay:.1s}
.js .steps .reveal:nth-child(3){transition-delay:.2s}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important}
  .js .reveal{opacity:1;transform:none}
  .step-line{transform:none !important}
  .float-card{animation:none}
}

@media print{
  .sticky-cta,.site-header,.hero-deco,.fc-deco{display:none !important}
  body{padding-bottom:0;background:#fff;color:#000}
  body::before{display:none}
}

/* =====================================================================
   17. THEME RHYTHM — light page, three dark anchors
   Alternating white / off-white / light-teal keeps WeKongsi's brand
   colour present throughout; dark bands carry the hero, the product
   visual and the closing CTA.
   ===================================================================== */
.hero{
  background:
    radial-gradient(760px 520px at 84% 8%,rgba(0,191,174,.26),transparent 62%),
    linear-gradient(165deg,#0B1D4C 0%,var(--bg-dark) 52%,var(--bg-dark-2) 100%);
}
.benefits{background:#fff}
.why-tele{background:linear-gradient(180deg,var(--off) 0%,var(--l-teal) 100%)}
.what-you-get{
  background:
    radial-gradient(700px 480px at 78% 12%,rgba(0,191,174,.2),transparent 62%),
    linear-gradient(170deg,var(--bg-dark) 0%,var(--bg-dark-2) 100%);
}
.mymed{background:linear-gradient(170deg,#F3FCFB 0%,var(--l-teal) 100%)}
.lifestyle{background:var(--off)}
.conditions{background:#fff}
.not-suitable{background:var(--off)}
.eligibility{background:linear-gradient(180deg,var(--l-teal) 0%,var(--off) 100%)}
.pricing{background:#fff}
.incl{background:#fff}
.conditions{background:#fff}
.renew{background:var(--off)}
.norenew{background:var(--off)}
.lite{background:#fff}
.paid{background:var(--off)}
.faq{background:var(--off)}
/* Navy into deep teal, a soft glow seated behind the CTA column and a
   quieter ambient wash at the opposite corner. */
.final-cta{
  background:
    radial-gradient(540px 360px at 78% 54%,rgba(0,214,196,.22),transparent 68%),
    radial-gradient(880px 480px at 6% 4%,rgba(0,214,196,.10),transparent 70%),
    linear-gradient(158deg,#04122B 0%,#062440 40%,#05403C 100%);
}
/* Not black. The closing CTA above runs 158deg from #04122B to #05403C;
   the footer takes the same navy-to-teal family a shade deeper and turns
   the gradient the other way, so the two read as a pair rather than one
   long slab, and the seam between them is a deliberate change of angle. */
.site-footer{
  background:
    radial-gradient(820px 420px at 12% 0%,rgba(0,214,196,.13),transparent 66%),
    linear-gradient(200deg,#071A3E 0%,#08213E 44%,#0A3238 100%);
  border-top:1px solid rgba(255,255,255,.12);
}

/* Header: white over the hero, glass-white once scrolled */
.site-header{
  --text:#fff;--text-2:rgba(255,255,255,.76);
  --line:rgba(255,255,255,.11);--line-2:rgba(255,255,255,.2);
  --glass:rgba(255,255,255,.06);--glass-2:rgba(255,255,255,.1);
  --accent-ink:#00D6C4;--focus:var(--turq);
}
.site-header.is-stuck{
  --text:#07133F;--text-2:#4C5878;
  --line:rgba(7,19,63,.09);--line-2:rgba(7,19,63,.16);
  --glass:rgba(7,19,63,.035);--glass-2:rgba(7,19,63,.07);
  --accent-ink:#04625E;--focus:var(--deep);
  background:rgba(255,255,255,.9);
}
.site-header.is-stuck .brand-logo{filter:none;opacity:1}

/* Light-mode corrections where the dark build had baked-in darkness */
.lifestyle-figure{background:#DCF1EF}
.lf-chip{background:rgba(255,255,255,.94);border-color:rgba(7,19,63,.08)}
.lf-chip b{color:var(--navy)}
.ns-watermark{stroke:rgba(7,19,63,.055)}
.mymed-ph{background:rgba(7,19,63,.04);border-color:var(--line-2)}
.mv-stage{background:linear-gradient(160deg,#EAF8F6 0%,#D3EFEB 100%);border-color:rgba(7,19,63,.06)}
.mv-label{background:rgba(255,255,255,.95);border-color:rgba(7,19,63,.08);color:var(--navy)}
.mv-btn{background:var(--l-teal);border-color:rgba(0,143,137,.16)}
.plan-was s{color:#9AA3BE}
.plan-card--featured{
  background:linear-gradient(170deg,rgba(0,214,196,.14) 0%,#fff 62%);
  border-color:rgba(0,191,174,.45);
  box-shadow:0 0 0 1px rgba(0,191,174,.18),0 26px 54px -30px rgba(0,143,137,.6);
}
.disclosure{background:var(--l-teal);border-color:rgba(0,143,137,.26)}
.disclosure-icon{background:#fff;border-color:rgba(0,143,137,.18)}
.faq-item.is-open{background:var(--l-teal);border-color:rgba(0,143,137,.3)}
.condition-grid li,.concern-grid li{background:var(--off)}
.conditions .condition-grid li,.conditions .concern-grid li{background:var(--off)}
.why-card,.benefit-card,.elig-card,.ns-card,.plan-card,.faq-item,.medjourney,.mv-call{background:#fff}
.price-today{background:linear-gradient(155deg,#F3FCFB 0%,var(--l-teal) 100%);border-color:rgba(0,143,137,.2)}
.why-note,.how-footnote{background:#fff;border-color:rgba(0,143,137,.2)}
.medjourney-note{background:var(--l-teal);border-color:rgba(0,143,137,.26)}
.btn-outline{background:#fff}
.btn-ghost{background:#fff}

/* Dark bands keep the glass treatment */
.on-dark .benefit-card,.on-dark .why-card,.on-dark .elig-card,.on-dark .plan-card,
.on-dark .faq-item,.on-dark .medjourney,.on-dark .mv-call{background:var(--glass)}
.on-dark .condition-grid li,.on-dark .concern-grid li{background:var(--glass)}
.on-dark .float-card{background:rgba(7,18,50,.8)}
.on-dark .btn-outline{background:var(--glass)}
.on-dark .hero-chip{background:rgba(7,18,50,.72)}
.on-dark .brand-logo,.on-dark .footer-logo{filter:brightness(0) invert(1)}

/* The accent pill needs a defined edge on white as well as on navy */
.btn-primary{box-shadow:var(--glow),0 0 0 1px rgba(0,143,137,.16)}
.on-dark .btn-primary{box-shadow:0 14px 44px -14px rgba(0,214,196,.6)}

/* White artwork on a white card needs its own edge */
.bcard-visual.is-ready{box-shadow:inset 0 0 0 1px rgba(7,19,63,.07)}
.on-dark .bcard-visual.is-ready{box-shadow:none}

/* At desktop width the phone frame grows but its fixed-size UI does not,
   which opened dead space above the call button */
@media (min-width:1024px){
  .phone-screen{aspect-ratio:9/15.6}
  .ps-app{gap:9px;padding:14px 12px 15px}
  .ps-doctor{padding:11px 12px}
  .ps-item{padding:10px 11px}
  .ps-cta{padding:13px 10px;font-size:12px}
}

/* =====================================================================
   18. WHAT'S INCLUDED — three-card everyday journey
   ===================================================================== */
.journey-grid{display:grid;gap:18px}
.jcard{
  display:flex;flex-direction:column;
  background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);
  padding:14px 14px 20px;box-shadow:var(--sh-card);
  transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease;
}
.jcard:hover{transform:translateY(-4px);box-shadow:var(--sh-float);border-color:rgba(0,143,137,.26)}

.jcard-media{
  position:relative;aspect-ratio:3/2;margin:0 0 18px;
  border-radius:18px;overflow:hidden;
  background:linear-gradient(150deg,#EAF8F6,#D3EFEB);
}
.jcard-step{
  position:absolute;top:12px;left:12px;z-index:2;
  min-width:30px;height:30px;padding:0 10px;border-radius:var(--r-pill);
  display:grid;place-items:center;
  background:rgba(255,255,255,.92);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  font-family:"Red Hat Display",sans-serif;font-size:12.5px;font-weight:800;
  color:var(--navy);letter-spacing:.02em;
  box-shadow:0 4px 12px -6px rgba(7,19,63,.5);
}

.jcard-body{display:flex;flex-direction:column;flex:1;padding-inline:4px}
.jcard-body h3{font-size:19px;line-height:1.22;margin-bottom:9px}
.jcard-body>p{font-size:14.5px;line-height:1.55;color:var(--text-2)}
/* Terms footnote, pinned to the card floor so the three cards keep a
   common baseline whether or not they carry one. No icon by design. */
/* .jcard-body>p is (0,1,1) and also matches this paragraph, so the note
   needs two classes to win the cascade. */
.jcard-body .jcard-note{
  margin-top:auto;padding-top:12px;
  font-size:12.5px;line-height:1.45;font-weight:500;color:var(--text-3);
}
.jcard-meta{
  display:flex;align-items:flex-start;gap:9px;margin-top:auto;padding-top:16px;
  font-size:12.5px;line-height:1.45;color:var(--text-3);
}
.jcard-meta .ico{color:var(--icon);margin-top:1px;flex:none}

/* Care Episode → RM40 → medication, as one relationship */
.ce-flow{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:18px}
.ce-flow li{
  position:relative;text-align:center;
  background:var(--l-teal);border:1px solid rgba(0,143,137,.18);
  border-radius:14px;padding:11px 6px;
}
.ce-flow b{
  display:block;font-family:"Red Hat Display",sans-serif;
  font-size:13.5px;font-weight:800;color:var(--navy);line-height:1.15;letter-spacing:-.01em;
}
.ce-flow span{display:block;margin-top:3px;font-size:10.5px;line-height:1.25;color:var(--text-3)}
.ce-flow li+li::before{
  content:"";position:absolute;left:-13px;top:50%;width:7px;height:7px;
  border-top:1.6px solid var(--icon);border-right:1.6px solid var(--icon);
  transform:translateY(-50%) rotate(45deg);
}

/* Pick up or delivered */
.choice-row{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
.choice-row li{
  display:inline-flex;align-items:center;gap:8px;
  background:var(--l-teal);border:1px solid rgba(0,143,137,.2);
  border-radius:var(--r-pill);padding:9px 16px;
  font-size:13px;font-weight:600;color:var(--text);
}
.choice-row .ico{color:var(--icon)}

.section-transition{
  display:flex;flex-direction:column;align-items:center;gap:6px;
  margin-top:40px;text-align:center;
  font-size:16px;font-weight:600;color:var(--accent-ink);
}
.section-transition .ico{color:var(--icon);animation:nudge 2.6s ease-in-out infinite}
@keyframes nudge{0%,100%{transform:translateY(0)}50%{transform:translateY(5px)}}

@media (min-width:768px){
  .journey-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
  .jcard-body h3{font-size:18px}
  /* stacked at tablet width, where three columns leave no room for a row */
  .ce-flow{grid-template-columns:1fr;gap:16px}
  .ce-flow li+li::before{left:50%;top:-12px;transform:translateX(-50%) rotate(135deg)}
}
@media (min-width:1024px){
  .journey-grid{gap:24px}
  .jcard{padding:16px 16px 26px}
  .jcard-body{padding-inline:6px}
  .jcard-body h3{font-size:21px}
  .jcard-body>p{font-size:15.5px}
  .jcard-body .jcard-note{font-size:13px;padding-top:14px}
  .jcard-meta{font-size:13px}
  .ce-flow{grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
  .ce-flow li+li::before{left:-13px;top:50%;transform:translateY(-50%) rotate(45deg)}
  .ce-flow b{font-size:14.5px}
  .section-transition{font-size:18px;margin-top:56px}
}

/* =====================================================================
   19. CONDITIONS — single card, checklist, footnote
   ===================================================================== */
.cond-card{
  background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);
  padding:26px 20px;box-shadow:var(--sh-card);
}
.cond-card-head h3{font-size:19px;margin-bottom:6px}
.cond-card-head p{font-size:14px;line-height:1.5;color:var(--text-3)}

.cond-card .condition-grid{
  grid-template-columns:1fr;gap:14px;
  margin-top:22px;padding-top:22px;border-top:1px solid var(--line);
}
.cond-card .condition-grid li{
  display:flex;align-items:flex-start;gap:11px;
  background:none;border:0;border-radius:0;padding:0;
  font-size:14.5px;font-weight:500;line-height:1.4;color:var(--text);
}
.c-tick{
  width:21px;height:21px;border-radius:50%;flex:none;margin-top:1px;
  display:grid;place-items:center;color:#fff;
  background-image:linear-gradient(135deg,#00BFAE 0%,#00857F 100%);
}
.c-tick .ico{width:12px;height:12px;stroke-width:2.8}

.cond-note{
  display:flex;gap:11px;margin-top:24px;
  background:var(--l-teal);border-left:3px solid var(--teal);
  border-radius:0 14px 14px 0;padding:15px 17px;
  font-size:13.5px;line-height:1.55;color:var(--text-2);
}
.cond-note .ico{color:var(--icon);margin-top:2px;flex:none}
.cond-card .conditions-toggle{margin:20px auto 0}

@media (min-width:560px){
  .cond-card .condition-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:15px 22px}
}
@media (min-width:900px){
  .cond-card{padding:36px 34px}
  .cond-card-head h3{font-size:22px}
  .cond-card .condition-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:17px 26px;margin-top:26px;padding-top:26px}
  .cond-card .condition-grid.is-collapsed li:nth-child(n+9){display:flex}
  .cond-card .conditions-toggle{display:none}
  .cond-note{font-size:14.5px;padding:17px 20px;margin-top:28px}
}

/* dark-band variants, should either section ever move */
.on-dark .jcard,.on-dark .cond-card{background:var(--glass)}
.on-dark .jcard-step{background:rgba(7,18,50,.82);color:#fff}
.on-dark .ce-flow li,.on-dark .choice-row li,.on-dark .cond-note{background:var(--tint);border-color:var(--tint-line)}
.on-dark .ce-flow b{color:var(--text)}

/* =====================================================================
   20. SPACING — benefits and conditions read as one continuous block
   ===================================================================== */


/* Cards are image + title + paragraph + one line. Nothing else. */
.jcard-meta{
  display:block;padding-top:14px;
  font-size:12.5px;line-height:1.5;color:var(--text-3);
}
.jcard-body>p{margin-bottom:0}
.cond-card-head h3{font-size:20px}

@media (min-width:1024px){
  .jcard-meta{font-size:13px;padding-top:18px}
  .cond-card-head h3{font-size:23px}
}

/* The one service-platform name on the page. Enough weight and colour to
   register as a proper noun the reader should remember; not enough to
   compete with the step title above it. Uses the themed accent, so it
   reads teal on the light bands and turquoise on the dark ones. */
.app-name{font-weight:700;color:var(--accent-ink)}
.nobr{white-space:nowrap}

/* =====================================================================
   22. HOW WECARE WORKS — consolidated three-step journey
   No cards: numbered steps on a teal rail, horizontal on desktop.
   ===================================================================== */
.journey{display:grid;gap:0}
.jstep{position:relative;padding-bottom:30px}
.jstep:last-child{padding-bottom:0}

/* vertical rail on mobile */
.jstep:not(:last-child)::after{
  content:"";position:absolute;left:21px;top:52px;bottom:8px;width:1.5px;border-radius:2px;
  background:linear-gradient(180deg,var(--teal),rgba(0,191,174,.14));
}

.jstep-head{display:flex;align-items:center;gap:13px;margin-bottom:14px}
.jstep-icon{
  width:44px;height:44px;border-radius:var(--r-pill);flex:none;position:relative;z-index:1;
  display:grid;place-items:center;
  background:var(--l-teal);color:var(--icon);
  box-shadow:inset 0 0 0 1px rgba(0,143,137,.18);
}
.jstep-icon .ico{width:21px;height:21px}
.jstep-num{
  font-family:"Red Hat Display",sans-serif;font-size:32px;font-weight:800;
  letter-spacing:-.04em;line-height:1;
  background-image:var(--grad-accent);-webkit-background-clip:text;background-clip:text;color:transparent;
}

.jstep-body{padding-left:57px}
.jstep-body h3{font-size:18px;margin-bottom:8px}
.jstep-body>p{font-size:14.5px;line-height:1.55;color:var(--text-2)}

.jstep-pill{
  display:inline-flex;align-items:flex-start;gap:8px;margin-top:13px;
  background:var(--l-teal);border:1px solid rgba(0,143,137,.22);
  border-radius:16px;padding:9px 14px;
  font-size:12.5px;line-height:1.4;font-weight:600;color:var(--accent-ink);
}
.jstep-pill .ico{color:var(--icon);margin-top:1px;flex:none}
.jstep-note{margin-top:9px;font-size:12.5px;line-height:1.45;color:var(--text-3)}

@media (min-width:900px){
  .journey{grid-template-columns:repeat(3,minmax(0,1fr));gap:46px}
  .jstep{padding-bottom:0}
  /* rail runs horizontally from each step into the next column */
  .jstep:not(:last-child)::after{
    left:114px;right:-46px;top:21px;bottom:auto;width:auto;height:1.5px;
    background:linear-gradient(90deg,var(--teal),rgba(0,191,174,.14));
  }
  .jstep-body{padding-left:0}
  .jstep-head{margin-bottom:18px}
  .jstep-body h3{font-size:20px}
  .jstep-body>p{font-size:15.5px}
}
@media (min-width:1024px){
  .jstep-num{font-size:36px}
  .jstep-body h3{font-size:21px}
  .jstep-pill{font-size:13px}
  .jstep-note{font-size:13px}
}

/* keep the run of sections tight */
.how{padding-block:calc(var(--sec-y) * .85)}

.how{padding-block:calc(var(--sec-y) * .85) calc(var(--sec-y) * .55)}

/* =====================================================================
   23. HOW WECARE WORKS — dark WeKongsi band, typography-led
   Navy → teal → teal-green, dark-glass panels, numbers as the only
   visual identifier. No icons inside this section by design.
   ===================================================================== */
.how{
  position:relative;overflow:hidden;
  padding-block:calc(var(--sec-y) * .9);
  background:
    radial-gradient(760px 520px at 86% 6%,rgba(0,214,196,.20),transparent 62%),
    radial-gradient(660px 480px at 10% 94%,rgba(18,190,130,.18),transparent 64%),
    linear-gradient(152deg,#04122B 0%,#06243C 36%,#05403C 72%,#07553F 100%);
}
.how .section-head{margin-bottom:34px}

.hw-grid{display:grid;gap:34px}
.hw-step{
  position:relative;display:flex;flex-direction:column;
  background:linear-gradient(160deg,rgba(255,255,255,.09) 0%,rgba(255,255,255,.035) 100%);
  border:1px solid rgba(0,214,196,.22);
  border-radius:var(--r-lg);
  padding:26px 22px;
  box-shadow:0 26px 52px -32px rgba(0,0,0,.95),0 0 40px -22px rgba(0,214,196,.45);
}
.hw-num{
  font-family:"Red Hat Display",sans-serif;
  font-size:42px;font-weight:800;letter-spacing:-.05em;line-height:1;
  color:var(--turq);margin-bottom:16px;
}
.hw-step h3{font-size:19px;color:#fff;margin-bottom:9px}
.hw-step>p{font-size:14.5px;line-height:1.6;color:rgba(255,255,255,.72)}
.hw-sub{
  margin-top:auto;padding-top:18px;
  font-size:12.5px;line-height:1.65;color:rgba(255,255,255,.5);
}

/* thin teal connector with a minimal arrow */
.hw-step:not(:last-child)::after{
  content:"";position:absolute;left:50%;bottom:-21px;
  width:7px;height:7px;
  border-right:1.4px solid rgba(0,214,196,.6);
  border-bottom:1.4px solid rgba(0,214,196,.6);
  transform:translateX(-50%) rotate(45deg);
}

/* one supporting information strip */
.hw-bar{
  margin-top:34px;display:grid;
  background:rgba(255,255,255,.055);
  border:1px solid rgba(255,255,255,.13);
  border-radius:var(--r-card);
  padding:4px 6px;
}
.hw-bar li{
  padding:14px 16px;text-align:center;
  font-size:12.5px;line-height:1.55;color:rgba(255,255,255,.6);
}
.hw-bar li+li{border-top:1px solid rgba(255,255,255,.1)}

@media (min-width:900px){
  .how .section-head{margin-bottom:46px}
  .hw-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:32px}
  .hw-step{padding:30px 26px}
  .hw-step:not(:last-child)::after{
    left:calc(100% + 22px);top:50%;bottom:auto;
    transform:translateY(-50%) rotate(-45deg);
  }
  .hw-step:not(:last-child)::before{
    content:"";position:absolute;left:calc(100% + 4px);top:50%;
    width:17px;height:1px;
    background:linear-gradient(90deg,rgba(0,214,196,.55),rgba(0,214,196,.15));
  }
  .hw-bar{grid-template-columns:repeat(3,minmax(0,1fr));padding:6px}
  .hw-bar li+li{border-top:0;border-left:1px solid rgba(255,255,255,.12)}
}
@media (min-width:1024px){
  .hw-num{font-size:48px}
  .hw-step h3{font-size:21px}
  .hw-step>p{font-size:15.5px}
  .hw-sub{font-size:13px}
  .hw-bar li{font-size:13px;padding:16px 20px}
}

/* =====================================================================
   24. ELIGIBILITY — compact reassurance strip, light after the dark band
   ===================================================================== */
.eligibility{
  background:linear-gradient(180deg,var(--l-teal) 0%,#F3FCFA 100%);
  padding-block:calc(var(--sec-y) * .52);
}
.eligibility .section-head{margin-bottom:22px;max-width:640px}
.eligibility .section-lede{font-size:15px;margin-top:10px}

.elig-row{display:grid;gap:0}
.elig-row li{
  display:flex;align-items:center;gap:11px;
  padding:13px 2px;
  font-size:15px;font-weight:600;letter-spacing:-.005em;color:var(--navy);
}
.elig-row li+li{border-top:1px solid rgba(7,19,63,.09)}
.elig-tick{
  width:14px;height:14px;flex:none;
  fill:none;stroke:var(--deep);stroke-width:3;stroke-linecap:round;stroke-linejoin:round;
}

@media (min-width:768px){
  .eligibility .section-head{margin-bottom:28px}
  .elig-row{grid-template-columns:repeat(4,minmax(0,1fr))}
  .elig-row li{justify-content:center;text-align:center;padding:8px 16px;border-top:0}
  .elig-row li+li{border-top:0;border-left:1px solid rgba(7,19,63,.11)}
}
@media (min-width:1024px){
  .eligibility .section-lede{font-size:16.5px}
  .elig-row li{font-size:16.5px;padding:10px 20px}
  .elig-tick{width:15px;height:15px}
}

/* =====================================================================
   25. HOW WECARE WORKS — white cards on the dark band
   ===================================================================== */
.hw-step{
  background:#fff;
  border:0;
  box-shadow:0 28px 56px -30px rgba(0,0,0,.66),0 4px 14px rgba(0,0,0,.18);
}
/* deeper teal: the bright turquoise reaches only 2.0:1 on white,
   this clears the 3:1 large-text threshold */
.hw-num{
  background-image:linear-gradient(135deg,#009C8F 0%,#00726E 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.hw-step h3{color:var(--navy)}
.hw-step>p{color:#4C5878;margin-bottom:18px}

/* supporting facts: one per row inside a bordered panel */
.hw-sub{
  margin-top:auto;display:grid;
  background:#F4FCFB;
  border:1px solid rgba(0,143,137,.22);
  border-radius:14px;
  padding:2px 14px;
}
.hw-sub li{
  padding:10px 0;
  font-size:12.5px;line-height:1.45;color:#55618A;
}
.hw-sub li+li{border-top:1px solid rgba(0,143,137,.15)}

@media (min-width:1024px){
  .hw-sub li{font-size:13px;padding:11px 0}
  .hw-sub{padding:2px 16px}
}

/* =====================================================================
   26. HOW WECARE LITE WORKS — photographic accordion cards
   Whole card is the control; the row stays level as panels open and close.
   ===================================================================== */
/* Stretch, not start: card 03's description runs a line longer than the
   others and the length varies by width, so letting the row equalise is
   what keeps the three level in the closed state without band-tuning a
   min-height. An opened panel then grows all three together. */
.hw-grid{align-items:stretch}
.ac-card{
  position:relative;overflow:hidden;
  background:linear-gradient(170deg,rgba(255,255,255,.085) 0%,rgba(255,255,255,.035) 100%);
  border:1px solid rgba(0,214,196,.22);
  border-radius:var(--r-lg);
  box-shadow:0 26px 52px -32px rgba(0,0,0,.95);
  transition:border-color .25s ease,box-shadow .25s ease,transform .25s ease;
}
.ac-card:hover{border-color:rgba(0,214,196,.45);box-shadow:0 30px 58px -30px rgba(0,0,0,1),0 0 40px -22px rgba(0,214,196,.5)}
.ac-card:has(.ac-btn[aria-expanded="true"]){border-color:rgba(0,214,196,.55)}

.ac-btn{
  display:block;width:100%;text-align:left;cursor:pointer;padding:0;
  background:none;border:0;color:inherit;font:inherit;
}
.ac-btn:focus-visible{outline:3px solid var(--turq);outline-offset:-3px;border-radius:var(--r-lg)}

.ac-media{display:block;height:168px;overflow:hidden}
.ac-media img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s ease}
.ac-card:hover .ac-media img{transform:scale(1.035)}

.ac-body{display:block;padding:18px 20px 22px}
.ac-top{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}
.ac-num{
  font-family:"Red Hat Display",sans-serif;
  font-size:34px;font-weight:800;letter-spacing:-.05em;line-height:1;color:var(--turq);
}
.ac-toggle{
  position:relative;width:28px;height:28px;flex:none;border-radius:50%;
  border:1px solid rgba(0,214,196,.45);
}
.ac-toggle::before,.ac-toggle::after{
  content:"";position:absolute;left:50%;top:50%;background:var(--turq);border-radius:1px;
}
.ac-toggle::before{width:11px;height:1.6px;transform:translate(-50%,-50%)}
.ac-toggle::after{width:1.6px;height:11px;transform:translate(-50%,-50%);transition:transform .3s ease}
.ac-btn[aria-expanded="true"] .ac-toggle::after{transform:translate(-50%,-50%) rotate(90deg)}

.ac-title{display:block;font-size:18px;font-weight:700;letter-spacing:-.02em;color:#fff;margin-bottom:7px}
.ac-desc{
  display:block;font-size:14px;line-height:1.55;color:rgba(255,255,255,.66);
  min-height:calc(2 * 1.55em);   /* keeps all three closed cards level */
}

/* expanding panel */
.ac-panel{display:grid;grid-template-rows:1fr;transition:grid-template-rows .3s cubic-bezier(.22,.7,.3,1)}
.ac-panel[data-collapsed]{grid-template-rows:0fr}
.ac-panel-inner{overflow:hidden}
.ac-panel p{
  margin:0 20px 16px;padding-top:16px;
  font-size:13.5px;line-height:1.6;color:rgba(255,255,255,.62);
  border-top:1px solid rgba(255,255,255,.12);
}
.ac-panel p+p{padding-top:0;border-top:0;margin-top:-6px}
/* The RM40 is the figure the reader is scanning for, so it leads the panel
   as a line of its own instead of opening a sentence. */
.ac-panel .ac-amt{font-size:15px;font-weight:700;color:#fff;margin-bottom:9px}
.ac-panel .ac-amt+p{margin-top:0}

@media (min-width:900px){
  .ac-media{height:190px}
  .ac-body{padding:20px 22px 24px}
  .ac-num{font-size:38px}
  .ac-title{font-size:19px}
  /* extremely subtle step connector, anchored to the fixed image height */
  .ac-card:not(:last-child)::before{
    content:"";position:absolute;top:95px;left:100%;width:32px;height:1px;z-index:2;
    background:linear-gradient(90deg,rgba(0,214,196,.45),rgba(0,214,196,.05));
  }
}
@media (min-width:1024px){
  .ac-title{font-size:20px}
  .ac-desc{font-size:14.5px}
  .ac-panel p{font-size:14px}
}

/* At this width card 03's description takes a third line — reserve it so the
   closed cards stay level */
@media (min-width:900px) and (max-width:1079px){
  .ac-desc{min-height:calc(3 * 1.55em)}
}

/* No title-line reservation on these cards. It existed for the long
   "1 Care Episode per Calendar Month" title, which has since moved to the
   benefits list; "Skip the Clinic Trip" / "Save Time" / "Stay Comfortable"
   all sit on one line at every width, so reserving a second line only
   opened a gap under each title. */

/* =====================================================================
   27. PRICING — free card is the hero, two plans beside it
   ===================================================================== */
.pp-grid{display:grid;gap:18px}
.pp{
  display:flex;flex-direction:column;
  background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);
  padding:26px 22px;box-shadow:var(--sh-card);
}
.pp-term{font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--text-3)}
/* Raised currency lockup — kept with the pricing cards that use it, now
   that the hero no longer shows a figure. */
.cur{font-size:.52em;font-weight:700;vertical-align:.46em;letter-spacing:-.01em;margin-right:1px}
.pp-price{
  font-family:"Red Hat Display",sans-serif;font-size:44px;font-weight:800;
  letter-spacing:-.045em;line-height:1;color:var(--navy);margin-top:10px;
}
.pp-value{margin-top:18px}
.pp-eps{font-size:17px;font-weight:700;letter-spacing:-.015em;color:var(--navy)}
.pp-med{margin-top:4px;font-size:13.5px;line-height:1.5;color:var(--text-3)}

.pp-points{
  margin-top:18px;padding-top:18px;border-top:1px solid var(--line);
  display:grid;gap:10px;
}
.pp-points li{display:flex;align-items:flex-start;gap:10px;font-size:14px;color:var(--text-2)}
.pp-tick{
  width:14px;height:14px;flex:none;margin-top:4px;
  fill:none;stroke:var(--deep);stroke-width:3;stroke-linecap:round;stroke-linejoin:round;
}
.pp-tail{margin-top:auto;padding-top:22px}
.pp-foot{font-size:13px;font-weight:600;color:var(--text-2)}
.pp-foot span{display:block;margin-top:4px;font-size:12.5px;font-weight:400;color:var(--text-3)}
.pp-foot s{color:#9AA3BE}

.pp-badge{
  display:inline-flex;align-self:flex-start;
  font-size:10.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  padding:6px 13px;border-radius:var(--r-pill);margin-bottom:16px;
  background-image:var(--grad-pill);color:var(--on-accent);
}
.pp-badge--soft{
  background-image:none;background:rgba(0,191,174,.1);
  color:#04625E;border:1px solid rgba(0,143,137,.3);
}
.pp--preselected{border-color:rgba(0,191,174,.5)}

/* hero card */
.pp--free{
  position:relative;overflow:hidden;border-color:rgba(0,214,196,.45);
  background:
    radial-gradient(520px 340px at 76% 6%,rgba(0,214,196,.24),transparent 62%),
    linear-gradient(152deg,#061634 0%,#07293F 36%,#05433E 70%,#0A5540 100%);
  box-shadow:0 30px 60px -30px rgba(0,0,0,.85),0 0 46px -20px rgba(0,214,196,.5);
}
.pp--free .pp-term{color:rgba(255,255,255,.72)}
.pp-free{
  font-family:"Red Hat Display",sans-serif;font-size:60px;font-weight:800;
  letter-spacing:-.05em;line-height:.95;color:var(--turq);margin-top:4px;
  text-shadow:0 0 34px rgba(0,214,196,.45);
}
.pp--free .pp-eps{color:#fff}
.pp--free .pp-med{color:rgba(255,255,255,.66)}
.pp--free .pp-points{border-top-color:rgba(255,255,255,.16)}
.pp--free .pp-points li{color:rgba(255,255,255,.8)}
.pp--free .pp-tick{stroke:var(--turq)}
.pp--free .pp-foot{color:rgba(255,255,255,.66);text-align:center;font-weight:500}

.pp-cta{width:100%;min-height:54px;font-size:15.5px}
.pp-cta:hover{transform:translateY(-2px)}
.pp-arrow{margin-left:2px;transition:transform .2s ease}
.pp-cta:hover .pp-arrow{transform:translateX(3px)}
.pp--free .pp-tail{padding-top:24px}
.pp--free .pp-foot{margin-top:11px}

/* monthly, deliberately quiet */
.pp-monthly{
  margin-top:22px;text-align:center;
  font-size:14px;color:var(--text-3);
}
.pp-monthly strong{color:var(--navy);font-weight:700}
.pp-monthly a{
  display:inline-block;margin-left:6px;font-weight:600;color:var(--accent-ink);
  text-decoration:underline;text-decoration-color:rgba(0,143,137,.4);text-underline-offset:3px;
}
.pp-monthly a:hover{text-decoration-color:var(--deep)}

/* compact disclosure */
.disclosure{
  display:block;margin-top:26px;
  background:var(--l-teal);border:1px solid rgba(0,143,137,.22);
  border-radius:var(--r-card);padding:18px 20px;
}
.disclosure h3{font-size:16px;margin-bottom:8px;letter-spacing:-.015em}
.disclosure p{font-size:13.5px;line-height:1.6;color:var(--text-2)}
.disclosure p+p{margin-top:7px}

@media (min-width:860px){
  .pp-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
}
@media (min-width:1024px){
  .pp-grid{gap:24px}
  .pp{padding:32px 28px}
  .pp-price{font-size:48px}
  .pp-free{font-size:68px}
  .pp-eps{font-size:18.5px}
  .pp-med{font-size:14.5px}
  .pp-points li{font-size:15px}
  .pp-monthly{font-size:15.5px;margin-top:28px}
  .disclosure{margin-top:32px;padding:22px 26px}
  .disclosure h3{font-size:18px}
  .disclosure p{font-size:14.5px}
}

/* Keep the CTA label on one line at every card width */
.pp-cta{padding-inline:14px;gap:7px;font-size:15px}
@media (min-width:860px) and (max-width:1119px){
  .pp-cta{font-size:13.5px;padding-inline:10px;gap:5px}
}

/* =====================================================================
   28. PRICING v2 — three genuine choices, row-aligned
   Fixed-height bands make the term, price, value and benefit rows line
   up across all three cards regardless of content.
   ===================================================================== */
.pp-head{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:26px}
.pp-badge{
  margin:0;padding:5px 11px;font-size:9.5px;letter-spacing:.14em;
  align-self:center;
}
.pp-pricing{
  display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;
  min-height:58px;margin-top:12px;
}
.pp-price{margin-top:0}
.pp-was{font-size:24px;font-weight:600;letter-spacing:-.02em;color:#98A2BE;line-height:1}
.pp-was s{text-decoration-thickness:2px;text-decoration-color:rgba(152,162,190,.85)}
.pp-free{margin-top:0;font-size:54px}

.pp-value{min-height:60px;margin-top:16px}
.pp-points{margin-top:16px;padding-top:16px}

@media (min-width:860px){
  .pp-pricing{min-height:62px}
  .pp-value{min-height:74px}
}
@media (min-width:1024px){
  .pp-free{font-size:60px}
  .pp-was{font-size:27px}
  .pp-pricing{min-height:68px}
  .pp-value{min-height:62px}
}

/* Billing cycle named at the price — these are recurring memberships */
.pp-pricing{display:block;min-height:86px}
.pp-price-row{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.pp-cycle{
  margin-top:8px;font-size:12.5px;font-weight:600;letter-spacing:.005em;
  color:var(--text-3);
}
.pp--free .pp-cycle{color:rgba(255,255,255,.62)}

@media (min-width:860px){.pp-pricing{min-height:92px}}
@media (min-width:1024px){
  .pp-pricing{min-height:98px}
  .pp-cycle{font-size:13px}
}

/* "Free" is taller than "RM40"; a shared band keeps the cycle lines level */
.pp-price-row{min-height:54px}
@media (min-width:1024px){.pp-price-row{min-height:60px}}

/* Tablet: 2 + 1 rather than three cramped columns or three over-wide ones.
   The lone third card keeps the same width as the pair and is centred. */
@media (min-width:620px) and (max-width:859px){
  .pp-grid{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:1fr;gap:18px}
  .pp-grid>.pp:last-child{grid-column:1 / -1;justify-self:center;width:calc(50% - 9px)}
}

/* =====================================================================
   29. PRICING v3 — three composed surfaces, billing made visible
   ===================================================================== */
.pricing{
  background:
    radial-gradient(900px 520px at 50% 18%,rgba(0,191,174,.10),transparent 68%),
    linear-gradient(180deg,#fff 0%,#F4FBFA 100%);
}

/* paid surfaces: related, not identical */
.pp--six{
  background:linear-gradient(168deg,#F7FDFC 0%,#E9F8F5 100%);
  border-color:rgba(0,143,137,.24);
  box-shadow:0 2px 4px rgba(7,19,63,.04),0 22px 44px -30px rgba(0,143,137,.55);
}
.pp--twelve{
  background:linear-gradient(168deg,#F7FDFA 0%,#E4F6EC 100%);
  border-color:rgba(0,150,110,.24);
  box-shadow:0 2px 4px rgba(7,19,63,.04),0 22px 44px -30px rgba(0,150,110,.55);
}
.pp--free{box-shadow:0 34px 66px -28px rgba(0,0,0,.88),0 0 52px -18px rgba(0,214,196,.55)}

/* price comparison, much stronger */
.pp-was{font-size:30px;font-weight:700;color:#8E9AB8}
.pp-was s{text-decoration-thickness:2.5px;text-decoration-color:rgba(142,154,184,.9)}

/* billing block — this is important information, not metadata */
.pp-bill{
  margin-top:14px;padding:11px 14px;border-radius:14px;
  background:rgba(0,143,137,.09);border:1px solid rgba(0,143,137,.2);
}
.pp-bill b{
  display:block;font-size:12.5px;font-weight:800;letter-spacing:.14em;
  text-transform:uppercase;color:#04625E;
}
.pp-bill span{display:block;margin-top:3px;font-size:13px;line-height:1.4;color:var(--text-2)}
.pp--free .pp-bill{background:rgba(0,214,196,.12);border-color:rgba(0,214,196,.3)}
.pp--free .pp-bill b{color:var(--turq)}
.pp--free .pp-bill span{color:rgba(255,255,255,.7)}

/* Care Episode count carries the value */
.pp-value{margin-top:16px;min-height:0}
.pp-eps{font-size:19px;font-weight:800;letter-spacing:-.02em;color:var(--navy)}
.pp--free .pp-eps{color:#fff}

.pp-points{margin-top:16px;padding-top:16px}

@media (min-width:860px){.pp-value{min-height:0}}
@media (min-width:1024px){
  .pp-was{font-size:34px}
  .pp-eps{font-size:21px}
  .pp-bill{padding:13px 16px}
  .pp-bill b{font-size:13px}
  .pp-bill span{font-size:14px}
  .pp-value{min-height:0}
}

/* 860–939px is the only band where "Up to RM240 of eligible medication" takes a
   second line while the free card's does not — reserve it so the rows stay level */
@media (min-width:860px) and (max-width:939px){
  .pp-value{min-height:76px}
}

/* =====================================================================
   30. PRICING v4 — tighter top half, SAVE beside the price
   ===================================================================== */
/* the price band now holds price + saving, so no dead gap before billing */
.pp-price-row{min-height:0}
.pp-pricing{min-height:0;margin-top:10px}
.pp-free{font-size:66px;line-height:.92}

.pp-save{
  display:inline-flex;align-items:center;margin-top:11px;
  padding:8px 15px;border-radius:var(--r-pill);
  background:linear-gradient(120deg,rgba(0,191,174,.18),rgba(0,150,110,.16));
  border:1px solid rgba(0,143,137,.32);
  font-size:13px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:#04625E;
}
.pp--twelve .pp-save{
  background-image:linear-gradient(120deg,rgba(0,170,120,.22),rgba(0,140,150,.14));
  border-color:rgba(0,150,110,.34);
}

.pp-bill{margin-top:14px}
.pp-value{margin-top:14px}
.pp-med b{font-weight:800;color:var(--navy)}
.pp--free .pp-med b{color:var(--turq)}
.pp-points{margin-top:14px;padding-top:14px}

/* paid cards distribute their slack rather than pooling it in one gap */
.pp--six,.pp--twelve{justify-content:space-between}

/* Free card: slow, understated attention. Disabled by prefers-reduced-motion. */
@keyframes ppGlow{
  0%,100%{box-shadow:0 34px 66px -28px rgba(0,0,0,.88),0 0 40px -22px rgba(0,214,196,.45)}
  50%    {box-shadow:0 34px 66px -28px rgba(0,0,0,.88),0 0 70px -14px rgba(0,214,196,.8)}
}
.pp--free{animation:ppGlow 5s ease-in-out infinite}
@keyframes ppBadgeGlow{
  0%,100%{box-shadow:0 0 0 0 rgba(0,214,196,0)}
  50%    {box-shadow:0 0 18px 1px rgba(0,214,196,.55)}
}
.pp--free .pp-badge{animation:ppBadgeGlow 5s ease-in-out infinite}

@media (min-width:860px){.pp-value{min-height:0}}
@media (min-width:1024px){
  .pp-free{font-size:78px}
  .pp-save{font-size:13.5px;padding:9px 17px}
  .pp-value{min-height:0}
}

/* =====================================================================
   31. PRICING v5 — duration explicit, savings louder, monthly removed
   ===================================================================== */
.pp-sub{margin-top:10px;font-size:14.5px;line-height:1.5;color:rgba(255,255,255,.72)}

/* saving reads stronger than the struck price */
.pp-save{
  margin-top:12px;padding:10px 18px;
  font-size:15px;letter-spacing:.09em;
  background-image:linear-gradient(120deg,rgba(0,191,174,.3),rgba(0,150,110,.22));
  border-color:rgba(0,143,137,.45);color:#034F4B;
}
.pp--twelve .pp-save{
  background-image:linear-gradient(120deg,rgba(0,175,120,.32),rgba(0,140,150,.2));
  border-color:rgba(0,150,110,.45);
}
/* struck price stays legible but clearly secondary to the saving */
.pp-was{color:#95A1BE}

.pp-term{font-size:12.5px;letter-spacing:.14em}
.pp-bill{margin-top:12px}
.pp-value{margin-top:14px}

@media (min-width:1024px){
  .pp-sub{font-size:16px}
  .pp-save{font-size:16px;padding:11px 20px}
  .pp-term{font-size:13px}
}

/* =====================================================================
   32. PRICING v6 — typography over containers
   Billing frequency is a line of text, not a box inside a box.
   ===================================================================== */
.pricing{
  background:
    radial-gradient(760px 420px at 50% 26%,rgba(0,191,174,.09),transparent 70%),
    linear-gradient(180deg,#fff 0%,#FBFEFD 100%);
}

/* flatter, cleaner paid surfaces */
.pp--six{
  background:#F7FDFC;
  border-color:rgba(0,143,137,.2);
  box-shadow:0 1px 2px rgba(7,19,63,.04),0 18px 38px -30px rgba(0,143,137,.45);
}
.pp--twelve{
  background:#F6FCF8;
  border-color:rgba(0,150,110,.2);
  box-shadow:0 1px 2px rgba(7,19,63,.04),0 18px 38px -30px rgba(0,150,110,.45);
}

/* saving: compact and elegant, not another container */
.pp-save{
  margin-top:12px;padding:7px 14px;
  font-size:14px;font-weight:800;letter-spacing:.08em;
  background-image:none;background:rgba(0,170,150,.14);
  border:1px solid rgba(0,143,137,.3);color:#04625E;
}
.pp--twelve .pp-save{background:rgba(0,170,120,.14);border-color:rgba(0,150,110,.3)}

/* billing frequency as part of the price hierarchy */
.pp-cycle{
  margin-top:12px;font-size:14px;line-height:1.45;font-weight:500;color:var(--text-3);
}
.pp-cycle b{font-weight:800;color:var(--navy);letter-spacing:.005em}
.pp--free .pp-cycle{color:rgba(255,255,255,.62)}

.pp-value{margin-top:16px}
.pp-points{margin-top:18px;padding-top:18px}

@media (min-width:1024px){
  .pp-save{font-size:15px;padding:8px 16px}
  .pp-cycle{font-size:15px;margin-top:13px}
}

/* 860–939px: cards are at their narrowest in three columns, so
   "Semi-annual · Billed every 6 months" takes two lines while the annual line
   takes one, and the medication line wraps too. Reserve both so the paid cards
   stay in step. */
@media (min-width:860px) and (max-width:939px){
  .pp-cycle{min-height:41px}
  .pp-value{min-height:76px}
}


/* =====================================================================
   33. WECARE LITE — activation route, renewal flow, benefit swap
   Five-step route sits on the dark band; the renewal flow and the promo
   -code swap are light. Every flow is a row on desktop and a stack on
   mobile, with the connector rotating rather than disappearing.
   ===================================================================== */

/* ---- 5-step activation route (dark band) ---------------------------- */
.rt-grid{display:grid;gap:14px;margin-top:6px}
.rt-step{
  position:relative;
  background:linear-gradient(160deg,rgba(255,255,255,.09) 0%,rgba(255,255,255,.035) 100%);
  border:1px solid rgba(0,214,196,.22);border-radius:var(--r-lg);
  padding:20px 18px;
  box-shadow:0 26px 52px -32px rgba(0,0,0,.95);
}
.rt-num{
  font-family:"Red Hat Display",sans-serif;
  font-size:26px;font-weight:800;letter-spacing:-.05em;line-height:1;
  color:var(--turq);margin-bottom:10px;
}
.rt-step h3{font-size:17px;line-height:1.25;color:#fff;margin-bottom:7px}
.rt-desc{font-size:14px;line-height:1.55;color:rgba(255,255,255,.72)}
.rt-foot{
  margin-top:22px;text-align:center;
  font-size:13.5px;font-weight:600;color:var(--turq);
}

/* ---- renewal flow ---------------------------------------------------- */
.rn-flow{display:grid;gap:12px;margin-top:6px;counter-reset:rn}
.rn-stage{
  position:relative;background:#fff;border:1px solid var(--line);
  border-radius:18px;padding:16px 18px;box-shadow:var(--sh-card);
}
.rn-label{
  font-size:12px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
  color:var(--accent-ink);margin-bottom:5px;
}
.rn-desc{font-size:14.5px;line-height:1.5;color:var(--text-2)}
/* connector: points down when stacked, right when in a row */
.rn-stage:not(:last-child)::after{
  content:"";position:absolute;left:50%;bottom:-13px;z-index:1;
  width:9px;height:9px;border-right:2px solid rgba(0,143,137,.5);
  border-bottom:2px solid rgba(0,143,137,.5);
  transform:translateX(-50%) rotate(45deg);
}
.rn-facts{display:grid;gap:12px;margin-top:22px}
.rn-facts li{
  display:flex;align-items:baseline;gap:9px;flex-wrap:wrap;
  background:var(--l-teal);border:1px solid rgba(0,143,137,.22);
  border-radius:var(--r-pill);padding:13px 20px;
}
.rn-facts b{font-family:"Red Hat Display",sans-serif;font-size:18px;font-weight:800;color:var(--navy)}
.rn-facts span{font-size:14.5px;color:var(--text-2)}

/* ---- if you don't renew (timeline, deliberately calm) --------------- */
.norenew{padding-block:calc(var(--sec-y) * .66)}
.norenew .section-head{margin-bottom:24px}
.nr-line{margin-top:8px;border-left:2px solid rgba(0,143,137,.22);padding-left:22px}
.nr-line li{position:relative;padding-bottom:22px}
.nr-line li:last-child{padding-bottom:0}
.nr-line li::before{
  content:"";position:absolute;left:-29px;top:6px;
  width:11px;height:11px;border-radius:50%;
  background:var(--deep);box-shadow:0 0 0 4px var(--off);
}
.nr-when{font-size:12.5px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;
  color:var(--accent-ink);margin-bottom:5px}
.nr-what{font-size:15px;line-height:1.6;color:var(--text-2)}

/* ---- 1 promo code -> 1 month ---------------------------------------- */
.lite-swap{
  display:grid;gap:12px;justify-items:center;margin-top:8px;text-align:center;
}
.lite-in,.lite-out{
  display:block;width:100%;max-width:340px;
  border-radius:var(--r-lg);padding:20px 22px;
  font-family:"Red Hat Display",sans-serif;font-weight:800;letter-spacing:-.02em;line-height:1.15;
}
.lite-in{
  font-size:20px;color:var(--navy);
  background:#fff;border:1px solid var(--line);box-shadow:var(--sh-card);
}
.lite-out{
  font-size:22px;color:var(--on-accent);
  background-image:var(--grad-pill);box-shadow:var(--glow);
}
.lite-arrow{display:grid;place-items:center;color:var(--deep)}
.lite-arrow .ico{width:26px;height:26px;stroke-width:2.1}
.lite-cap{margin-top:18px;text-align:center;font-size:14.5px;font-weight:600;color:var(--text-2)}
.lite-cta{display:flex;margin:22px auto 0;width:100%}

/* ---- separate paid plan --------------------------------------------- */
.paid-card{
  background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);
  padding:28px 22px;box-shadow:var(--sh-card);text-align:center;
}
.paid-card h2{font-size:clamp(23px,5.6vw,28px);margin-bottom:12px}
.paid-card>p{font-size:15px;line-height:1.6;color:var(--text-2);max-width:52ch;margin-inline:auto}
.paid-cta{margin-top:20px;width:100%}

@media (min-width:640px){
  .rt-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
  .rn-flow{grid-template-columns:repeat(2,minmax(0,1fr))}
  .rn-stage:not(:last-child)::after{display:none}
  .rn-facts{grid-template-columns:repeat(2,minmax(0,1fr))}
  .paid-cta{width:auto;min-width:280px}
  .lite-cta{width:fit-content;min-width:280px;margin-inline:auto}
}
@media (min-width:1024px){
  .rt-grid{grid-template-columns:repeat(5,minmax(0,1fr));gap:18px}
  .rt-step{padding:24px 20px}
  .rt-num{font-size:30px}
  .rt-step h3{font-size:17.5px}

  /* chevron between columns, sitting in the gap */
  .rt-step:not(:last-child)::after{
    content:"";position:absolute;right:-13px;top:50%;
    width:8px;height:8px;border-top:2px solid rgba(0,214,196,.55);
    border-right:2px solid rgba(0,214,196,.55);
    transform:translateY(-50%) rotate(45deg);
  }
  .rt-foot{margin-top:28px;font-size:14.5px}

  .rn-flow{grid-template-columns:repeat(5,minmax(0,1fr));gap:16px}
  .rn-stage{padding:18px 18px}
  .rn-stage:not(:last-child)::after{
    display:block;left:auto;right:-12px;bottom:auto;top:50%;
    transform:translateY(-50%) rotate(-45deg);
  }
  .rn-facts{gap:16px;margin-top:28px}
  .rn-facts b{font-size:20px}

  .nr-line{padding-left:26px}
  .nr-what{font-size:15.5px}

  /* the swap reads left-to-right once there is room for it */
  .lite-swap{grid-template-columns:auto auto auto;gap:20px;align-items:center;justify-content:center}
  .lite-in,.lite-out{width:auto;max-width:none;padding:24px 34px}
  .lite-in{font-size:22px}
  .lite-out{font-size:25px}
  .lite-arrow{transform:rotate(-90deg)}
  .lite-arrow .ico{width:30px;height:30px}
  .lite-cap{margin-top:22px;font-size:15.5px}
  .lite-cta{margin-top:26px}

  .paid-card{padding:38px 40px}
  .paid-card>p{font-size:16px}
}


/* =====================================================================
   34. HOW WECARE LITE WORKS — continues the dark chapter
   It sits directly under the activation route, so rather than restarting
   the band it picks the gradient up at the colour .how ends on and
   resolves back toward navy before the white section below.
   ===================================================================== */
/* One gradient spans both dark sections: painting them separately left a
   visible step at the join, because a 152deg gradient's edge colour varies
   across the width and cannot be matched by a second section's first stop. */
/* The section stands on its own again — it no longer sits inside the
   two-section dark wrapper, so it carries the band itself. */
.hww{
  position:relative;overflow:hidden;
  padding-block:calc(var(--sec-y) * .9);
  background:
    radial-gradient(760px 520px at 14% 6%,rgba(0,214,196,.20),transparent 62%),
    radial-gradient(660px 480px at 88% 94%,rgba(18,190,130,.18),transparent 64%),
    linear-gradient(152deg,#061634 0%,#07293F 34%,#05433E 68%,#0A5540 100%);
}
.hww .section-head{margin-bottom:34px}

/* Availability bar under the telemedicine cards — one quiet line of fact,
   not a fourth card. */
.tm-bar{
  display:flex;align-items:flex-start;justify-content:center;gap:10px;
  margin-top:26px;padding:15px 20px;
  background:var(--l-teal);border:1px solid rgba(0,143,137,.22);
  border-radius:18px;   /* it wraps to 4-5 lines on a phone; a pill radius
                           on a box that tall reads as a mistake */
  font-size:14px;line-height:1.5;font-weight:600;color:var(--text-2);text-align:left;
}
.tm-bar .ico{color:var(--icon);flex:none;margin-top:1px}
@media (min-width:768px){
  .tm-bar{margin-top:32px;font-size:15px;align-items:center;text-align:center;border-radius:var(--r-pill)}
}

/* =====================================================================
   35. WHAT'S INCLUDED — photo-led cards
   Photography carries the benefit, so no icons here. All three images
   share one aspect-ratio and object-fit:cover, which is what keeps the
   crops consistent and the cards level; the key value sits directly
   under the image as the first thing read after it.
   ===================================================================== */
.incl-grid{display:grid;gap:18px}
.incl-card{
  display:flex;flex-direction:column;overflow:hidden;
  background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);
  box-shadow:var(--sh-card);
  transition:transform .2s ease,box-shadow .25s ease,border-color .2s ease;
}
.incl-card:hover{transform:translateY(-4px);box-shadow:var(--sh-float);border-color:rgba(0,143,137,.26)}
.incl-media{
  position:relative;aspect-ratio:16/10;background:var(--l-teal);
  border-bottom:1px solid var(--line);
}
.incl-media>img[data-optional]{width:100%;height:100%;object-fit:cover}
.incl-body{display:flex;flex-direction:column;flex:1;padding:24px}

/* The whole benefit name is the headline — no separate anchor word to
   mentally recombine with a title underneath. */
.incl-title{
  font-size:21px;font-weight:800;line-height:1.22;letter-spacing:.005em;
  color:var(--deep);text-transform:uppercase;text-wrap:balance;
}
.incl-chip-row{margin-top:9px}
.incl-chip{
  display:inline-flex;font-family:"Red Hat Text",sans-serif;
  padding:5px 12px;border-radius:var(--r-pill);
  background:var(--l-teal);border:1px solid rgba(0,143,137,.28);
  font-size:10.5px;font-weight:700;letter-spacing:.1em;color:var(--accent-ink);
  text-transform:uppercase;white-space:nowrap;
}
.incl-desc{margin-top:6px;font-size:14.5px;line-height:1.5;color:var(--text-2)}

/* RM40 is a second, smaller mark — never level with the free consultation */
.incl-value{margin-top:12px;padding-top:11px;border-top:1px solid var(--line)}
.incl-amount{
  font-family:"Red Hat Display",sans-serif;
  font-size:22px;font-weight:800;letter-spacing:-.03em;line-height:1;color:var(--navy);
}
.incl-amount-sub{margin-top:4px;font-size:13.5px;font-weight:700;color:var(--accent-ink)}
.incl-fine{margin-top:9px;font-size:12.5px;line-height:1.5;color:var(--text-3)}

@media (min-width:640px){
  .incl-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (min-width:1024px){
  .incl-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
  .incl-body{padding:26px 24px}
  .incl-title{font-size:22px}
  .incl-desc{font-size:15.5px}
  .incl-amount{font-size:23px}
  .incl-fine{font-size:13px}
}

/* =====================================================================
   36. CARE EPISODE — the journey, then the limit, kept apart
   The RM40 callout sits below the flow and names only what it applies
   to; the free-consultation line is restated inside it so the two can
   never be read as one figure.
   ===================================================================== */
.cej-flow{display:grid;gap:14px}
.cej-step{
  position:relative;background:#fff;border:1px solid var(--line);
  border-radius:18px;padding:20px 20px;box-shadow:var(--sh-card);
}
.cej-step .cej-num{
  font-family:"Red Hat Display",sans-serif;
  font-size:24px;font-weight:800;letter-spacing:-.05em;line-height:1;
  color:var(--deep);margin-bottom:9px;
}
.cej-step h3{font-size:16.5px;line-height:1.25;margin-bottom:6px}
.cej-step p{font-size:14px;line-height:1.55;color:var(--text-2)}
.cej-step:not(:last-child)::after{
  content:"";position:absolute;left:50%;bottom:-12px;z-index:1;
  width:9px;height:9px;border-right:2px solid rgba(0,143,137,.5);
  border-bottom:2px solid rgba(0,143,137,.5);
  transform:translateX(-50%) rotate(45deg);
}
.cej-callout{
  margin-top:26px;text-align:center;
  background:#fff;border:1px solid rgba(0,143,137,.26);border-radius:var(--r-lg);
  padding:26px 22px;box-shadow:var(--sh-card);
}
.cej-amount{
  font-family:"Red Hat Display",sans-serif;
  font-size:clamp(24px,6.2vw,32px);font-weight:800;letter-spacing:-.035em;line-height:1.1;
  color:var(--navy);
}
.cej-for{margin-top:7px;font-size:15px;font-weight:700;color:var(--accent-ink)}
.cej-free{
  margin-top:16px;padding-top:15px;border-top:1px solid var(--line);
  font-size:14px;line-height:1.55;color:var(--text-2);
}

/* =====================================================================
   37. RENEWAL — one month, then the next
   ===================================================================== */
.rmo-flow{display:grid;gap:14px}
.rmo{
  position:relative;background:#fff;border:1px solid var(--line);
  border-radius:18px;padding:18px 20px;box-shadow:var(--sh-card);text-align:center;
}
.rmo-month{font-size:12px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--text-3)}
.rmo-code{
  margin-top:9px;font-family:"Red Hat Display",sans-serif;
  font-size:17px;font-weight:800;letter-spacing:-.02em;color:var(--navy);
}
.rmo-out{
  margin-top:9px;padding-top:11px;border-top:1px solid var(--line);
  font-size:14.5px;font-weight:700;color:var(--accent-ink);
}
.rmo:not(:last-child)::after{
  content:"";position:absolute;left:50%;bottom:-12px;z-index:1;
  width:9px;height:9px;border-right:2px solid rgba(0,143,137,.5);
  border-bottom:2px solid rgba(0,143,137,.5);
  transform:translateX(-50%) rotate(45deg);
}
.nr-next{margin-top:22px;font-size:14.5px;font-weight:600;color:var(--accent-ink)}

/* ---- paid plan points ------------------------------------------------ */
.paid-card .eyebrow{justify-content:center}
.paid-points{display:grid;gap:9px;margin:18px auto 0;max-width:36ch;text-align:left}
.paid-points li{display:flex;align-items:flex-start;gap:9px;font-size:14.5px;line-height:1.5;color:var(--text-2)}
.paid-points .ico{color:var(--icon);flex:none;margin-top:2px}

@media (min-width:640px){
  /* Cards share rows from here, and the titles run to different lengths —
     "Unlimited Teleconsultation" fits one line above ~820px where the
     other two take two. Reserve the line so every description starts on
     the same baseline. */
  .incl-title{min-height:2.44em}
}
/* Two bands need a third line in Malay, both of them the point where the
   card is at its narrowest in a shared row: 640-659 as the 2-column grid
   opens, and 1024-1199 as the 3-column one does. "1 Care Episode Setiap
   Tempoh Kelayakan" and "Ambil di Farmasi atau Hantar ke Rumah" are the
   long ones; the English titles fit in two, so the reservation follows
   the language rather than penalising both. .incl-title's line-height is
   1.22, so three lines is 3.66em. */
@media (min-width:640px) and (max-width:659px),
       (min-width:1024px) and (max-width:1199px){
  html[lang="ms-MY"] .incl-title{min-height:3.66em}
  .cej-flow{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cej-step:not(:last-child)::after{display:none}
  .rmo-flow{grid-template-columns:repeat(3,minmax(0,1fr))}
  .rmo:not(:last-child)::after{left:auto;right:-12px;bottom:auto;top:50%;transform:translateY(-50%) rotate(-45deg)}
}
@media (min-width:1024px){
  .cej-flow{grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
  .cej-step{padding:24px 22px}
  .cej-step .cej-num{font-size:28px}
  .cej-step h3{font-size:17.5px}
  .cej-step:not(:last-child)::after{
    display:block;left:auto;right:-13px;bottom:auto;top:50%;
    transform:translateY(-50%) rotate(-45deg);
  }
  .cej-callout{margin-top:32px;padding:34px 30px}
  .cej-for{font-size:16px}
  .cej-free{font-size:14.5px}

  .rmo-flow{gap:18px}
  .rmo{padding:22px 22px}
  .rmo-code{font-size:18px}
  .nr-next{font-size:15.5px}
}

/* Step titles fit one line from 1279px up. Between 1024 and 1278 the five
   columns are narrow enough that "Register on WeKongsi" and "Get Your Promo
   Code" take two, so reserve the line only across that band — measured, not
   guessed; the old reservation was sized for longer titles and left a gap. */
@media (min-width:1024px) and (max-width:1278px){
  .rt-step h3{min-height:2.5em}
}

/* =====================================================================
   38. SECONDARY LINKS + WHATSAPP CONTACT
   The paid plan and the wider WeKongsi programme are one line each, not
   sections; the support shortcut floats rather than taking a band.
   ===================================================================== */
.more{padding-block:calc(var(--sec-y) * .5);background:var(--off)}
.more-row{display:grid;gap:14px}
.more-item{
  display:grid;gap:3px;
  background:#fff;border:1px solid var(--line);border-radius:18px;
  padding:18px 20px;box-shadow:var(--sh-card);
}
.more-item b{font-size:15px;font-weight:700;color:var(--navy)}
.more-item span{font-size:14px;line-height:1.5;color:var(--text-2)}
.more-item a{
  justify-self:start;margin-top:6px;
  font-size:14px;font-weight:700;color:var(--accent-ink);
}
.more-item a:hover{text-decoration:underline}

/* ---- floating WhatsApp shortcut ------------------------------------ */
.ico-brand{fill:currentColor;stroke:none}
.wa-fab{
  position:fixed;right:20px;z-index:95;
  /* clear of the mobile sticky CTA bar, which is also fixed to the bottom */
  bottom:calc(86px + env(safe-area-inset-bottom));
  display:inline-flex;align-items:center;gap:0;
  padding:0;border-radius:var(--r-pill);
  background:linear-gradient(140deg,#25D366 0%,#12B85B 100%);
  box-shadow:0 10px 26px -10px rgba(18,140,80,.75),0 2px 6px rgba(7,19,63,.18);
  color:#fff;text-decoration:none;
  transition:transform .22s ease,box-shadow .25s ease;
}
.wa-fab:hover{transform:translateY(-2px);box-shadow:0 16px 34px -12px rgba(18,140,80,.9)}
.wa-fab:active{transform:translateY(0)}
.wa-fab:focus-visible{outline:3px solid var(--turq);outline-offset:3px}
.wa-icon{display:grid;place-items:center;width:52px;height:52px;flex:none}
.wa-icon .ico{width:26px;height:26px}
/* the label is desktop-only; the circle alone carries it on phones */
.wa-label{display:none}
@media (prefers-reduced-motion:reduce){.wa-fab{transition:none}.wa-fab:hover{transform:none}}

@media (min-width:1024px){
  /* no sticky bar at this width, so it can sit low */
  .wa-fab{right:24px;bottom:24px;padding-right:20px}
  .wa-label{
    display:block;font-size:14px;line-height:1.25;white-space:nowrap;
    padding-left:2px;
  }
  .wa-label b{display:block;font-weight:700}
}

/* =====================================================================
   39. CONDITIONS — a continuation of "What's Included", not a section
   Small eyebrow instead of a headline, a hairline divider above it, and a
   plain grid rather than a card, so the three benefit cards stay the
   visual hero of the section.
   ===================================================================== */
/* Eligibility sits between the benefit cards and the conditions list, in
   the whitespace above the .cx hairline. Deliberately not a card: no fill,
   border or shadow, so the three benefit cards stay the section's hero. */
.elig{margin-top:28px;text-align:center}
.elig-label{
  font-family:"Red Hat Text",sans-serif;
  font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--text-3);
}
.elig-line{margin-top:9px;font-size:16px;font-weight:700;line-height:1.4;color:var(--deep)}
.elig-meta{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:0 9px;
  margin-top:7px;font-size:13px;line-height:1.5;color:var(--text-3);
}
.elig-dot{color:var(--icon)}
@media (min-width:1024px){
  .elig{margin-top:34px}
  .elig-line{font-size:17px}
  .elig-meta{font-size:13.5px}
}

.cx{
  margin-top:34px;padding-top:30px;
  border-top:1px solid var(--line);
}
.cx-head{text-align:center;margin-bottom:22px}
.cx-head .eyebrow{margin-bottom:8px}
.cx-lede{font-size:15px;line-height:1.55;color:var(--text-2);max-width:52ch;margin-inline:auto}
.cx-grid{display:grid;gap:10px 18px;grid-template-columns:1fr}
.cx-grid li{
  display:flex;align-items:flex-start;gap:9px;
  font-size:14px;line-height:1.45;color:var(--text);
}
.cx-tick{color:var(--deep);flex:none;margin-top:1px}
.cx-note{
  display:flex;align-items:flex-start;gap:9px;
  margin-top:24px;padding-top:18px;border-top:1px solid var(--line);
  font-size:13px;line-height:1.55;color:var(--text-3);
}
.cx-note .ico{color:var(--icon);flex:none;margin-top:2px}

@media (min-width:560px){
  .cx-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (min-width:1024px){
  .cx{margin-top:44px;padding-top:38px}
  .cx-head{margin-bottom:26px}
  .cx-lede{font-size:16px}
  .cx-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px 28px}
  .cx-grid li{font-size:14.5px}
  .cx-note{margin-top:28px;font-size:13.5px}
}

/* =====================================================================
   40. FAQ CATEGORIES — a segmented control over the accordion
   Panels ship visible and JS hides the inactive ones, so the questions
   are still readable if the script never runs.
   ===================================================================== */
/* Label sits in a pill rather than as bare uppercase type. */
.faq-badge{
  display:inline-flex;align-items:center;
  padding:7px 17px;border-radius:var(--r-pill);
  background:var(--l-teal);border:1px solid rgba(0,143,137,.22);
  letter-spacing:.14em;
}
/* Individually rounded tabs, not a segmented track: white with a hairline
   border, and the active one filled with the deep-teal gradient. */
.faq-tabs{
  display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-bottom:24px;
  overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;
}
.faq-tabs::-webkit-scrollbar{display:none}
.faq-tab{
  flex:0 0 auto;white-space:nowrap;cursor:pointer;
  padding:11px 20px;border-radius:var(--r-pill);
  background:#fff;border:1px solid var(--line);
  font-family:"Red Hat Text",sans-serif;font-size:14px;font-weight:600;
  color:var(--navy);
  transition:background-color .2s ease,color .2s ease,border-color .2s ease,box-shadow .2s ease;
}
.faq-tab:hover{border-color:rgba(0,143,137,.4)}
.faq-tab.is-active{
  background-image:linear-gradient(115deg,#0B6F68 0%,#12A085 100%);
  border-color:transparent;color:#fff;font-weight:700;
  box-shadow:0 10px 24px -12px rgba(11,111,104,.75);
}
.faq-tab.is-active:hover{border-color:transparent}
.faq-tab:focus-visible{outline:3px solid var(--turq);outline-offset:2px}
.faq-panel[hidden]{display:none}

/* the paid plan as one quiet line inside the WeKongsi band */
.wk-alt{
  margin-top:20px;font-size:13.5px;line-height:1.6;color:rgba(255,255,255,.62);
}
.wk-alt a{color:var(--turq);font-weight:700;white-space:nowrap}
.wk-alt a:hover{text-decoration:underline}

@media (min-width:768px){
  .faq-tabs{gap:12px;margin-bottom:28px;flex-wrap:nowrap}
  .faq-tab{padding:12px 24px;font-size:14.5px}
  .wk-alt{font-size:14px}
}

/* The FAQ headline is 16.293em wide. The shared 660px .section-head cap
   forced it onto two lines from 1440px up, where the type reaches ~45px
   and needs ~727px. Let the head use the full column and cap the size at
   what the column can actually hold (740px / 16.293 = 45px), so it stays
   on one line wherever one line is possible. */
.faq .section-head{max-width:none}
#faq-title{font-size:clamp(26px,4.4vw,43px)}

/* =====================================================================
   41. TWO-PLATFORM JOURNEY — where you activate vs. where you get care
   A light band deliberately wedged between two dark ones (How WeCare Lite
   Works above, WeKongsi cost-sharing below), so the platform hand-off
   reads as its own chapter rather than a continuation of the steps.
   The two phones are the section: everything else is caption.
   ===================================================================== */
.apps{
  position:relative;overflow:hidden;
  background:
    radial-gradient(1000px 560px at 50% -6%,rgba(0,191,174,.13),transparent 68%),
    linear-gradient(180deg,var(--off) 0%,#EDF8F5 46%,var(--off) 100%);
}
/* The headline runs two sentences, so it needs more column than the
   shared 660px cap allows before the type has to shrink to fit. */
.apps .apps-head{max-width:860px}
#apps-title{font-size:clamp(27px,7vw,44px)}

.apps-flow{display:grid;gap:0;justify-items:center;max-width:880px;margin-inline:auto}
.app-step{width:100%;max-width:400px;text-align:center}

/* ---- kicker: the number, then the platform it belongs to ---------- */
.app-kicker{
  display:flex;align-items:center;justify-content:center;gap:12px;
  margin-bottom:20px;
}
.app-num{
  font-family:"Red Hat Display",sans-serif;
  font-size:26px;font-weight:800;letter-spacing:-.045em;line-height:1;color:var(--deep);
}
.app-plat{
  display:inline-flex;align-items:center;
  padding:7px 15px;border-radius:var(--r-pill);
  background:#fff;border:1px solid rgba(0,143,137,.26);
  font-size:10.5px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;
  color:var(--navy);box-shadow:0 1px 2px rgba(7,19,63,.05);
}

/* ---- the device ---------------------------------------------------
   One frame, one screen aspect. The screen is set to the MiCare
   screenshot's native 1206x2376 so that capture sits edge to edge with
   no crop; the WeKongsi capture is squarer, so `contain` centres it and
   the bands above and below fall on the screen's white — which is also
   that screenshot's own background, so the letterbox is invisible.
   Neither capture is cropped, scaled non-uniformly or redrawn. */
.phone{position:relative;width:min(268px,72vw);margin:0 auto}
.phone::before{
  content:"";position:absolute;z-index:0;
  left:50%;top:8%;transform:translateX(-50%);
  width:136%;height:84%;border-radius:50%;
  background:radial-gradient(closest-side,rgba(0,191,174,.34),rgba(0,191,174,0));
}
.phone-frame{
  position:relative;z-index:1;display:block;
  padding:9px;border-radius:44px;
  background:linear-gradient(155deg,#1B3766 0%,#0B1C40 44%,#07133F 100%);
  box-shadow:
    0 1.5px 0 rgba(255,255,255,.26) inset,
    0 0 0 1px rgba(7,19,63,.10),
    0 26px 44px -22px rgba(7,19,63,.5),
    0 60px 90px -56px rgba(7,19,63,.55);
}
/* volume and power slivers — the cheapest honest cue that this is a device */
.phone-frame::before,.phone-frame::after{
  content:"";position:absolute;width:3px;border-radius:3px;
  background:linear-gradient(180deg,rgba(255,255,255,.3),rgba(255,255,255,.06));
}
.phone-frame::before{left:-1.5px;top:22%;height:11%}
.phone-frame::after{right:-1.5px;top:29%;height:15%}
.phone-screen{
  display:block;position:relative;overflow:hidden;
  border-radius:36px;background:#fff;
  aspect-ratio:1206/2376;
}
.phone-screen img{width:100%;height:100%;object-fit:contain;object-position:center}

.app-title{margin-top:26px;font-size:21px;font-weight:800;letter-spacing:-.025em;color:var(--navy)}
.app-desc{
  margin:10px auto 0;max-width:36ch;
  font-size:14.5px;line-height:1.55;color:var(--text-2);
}

/* ---- the hand-off ------------------------------------------------- */
.app-arrow{
  display:grid;place-items:center;
  height:64px;color:var(--deep);opacity:.8;
}
.app-arrow svg{width:64px;height:auto;transform:rotate(90deg)}

.apps-note{
  margin:38px auto 0;max-width:58ch;text-align:center;
  font-size:13.5px;line-height:1.55;color:var(--text-3);
}

@media (min-width:640px){
  .phone{width:286px}
  .app-title{font-size:22px}
  .app-desc{font-size:15px}
}
/* Two columns with the arrow between them. The phone is ~630px tall at
   this width, so the arrow centres on the row, which puts it level with
   the lower third of the screens — reading as a hand-off between them
   rather than a label on either. */
@media (min-width:900px){
  .apps-flow{
    grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
    align-items:start;gap:clamp(12px,2vw,24px);
  }
  .app-arrow{align-self:center;margin-top:12%}
  /* The connector has to span the gap between the two devices or it
     reads as a speck; measured phone-to-phone gap is 188-230px here. */
  .app-arrow{height:auto;width:clamp(88px,9vw,124px)}
  .app-arrow svg{width:100%;transform:none}
  .apps-note{margin-top:46px;font-size:14px}
}
@media (min-width:1024px){
  .phone{width:300px}
  .app-num{font-size:30px}
  .app-plat{font-size:11px;padding:8px 17px}
  .app-title{margin-top:30px;font-size:24px}
  .app-desc{font-size:15.5px}
}

/* =====================================================================
   42. THE PARTNERS — who makes WeCare Lite possible
   Three equal cards, nothing in them but a logo, a name, a role and a
   sentence. White ground so the two dark bands on either side of this
   part of the page keep their weight, and so the logos sit on the
   neutral each brand expects.
   ===================================================================== */
/* A supporting band, not a feature one: it runs at ~60% of the standard
   section rhythm, the headline sits below the page's h2 scale, and the
   shadow is lighter than the cards elsewhere, so it never competes with
   the hero, the benefits or the dark step section. */
.orgs{background:#fff;padding-block:calc(var(--sec-y) * .58)}
.orgs .section-head{margin-bottom:30px;max-width:820px}
#orgs-title{font-size:clamp(29px,3.1vw,40px)}

.orgs-grid{display:grid;gap:12px;grid-template-columns:1fr}
.org-card{
  display:flex;flex-direction:column;align-items:center;text-align:center;
  padding:22px 20px;
  background:#fff;border:1px solid var(--line);border-radius:18px;
  box-shadow:0 1px 2px rgba(7,19,63,.04),0 12px 26px -20px rgba(7,19,63,.38);
  transition:transform .25s ease,border-color .25s ease,box-shadow .25s ease;
}
@media (hover:hover){
  .org-card:hover{
    transform:translateY(-3px);border-color:rgba(0,191,174,.42);
    box-shadow:0 2px 4px rgba(7,19,63,.05),0 18px 34px -22px rgba(7,19,63,.4);
  }
}
@media (prefers-reduced-motion:reduce){.org-card{transition:none}.org-card:hover{transform:none}}

/* One plate height for all three, then a per-logo cap so the marks
   balance by eye rather than by raw height -- their proportions differ
   enough that a shared cap would read as three different sizes.
   Measured widths land within ~15px of each other. */
.org-logo{display:flex;align-items:center;justify-content:center;height:104px;margin-bottom:16px}
.org-logo img{width:auto;height:auto;max-width:100%;object-fit:contain}
.org-logo--ea img{max-height:104px;border-radius:12px}
.org-logo--wk img{max-height:38px}
.org-logo--mc img{max-height:36px}

.org-name{font-size:21px;font-weight:800;letter-spacing:-.025em;line-height:1.15;color:var(--navy)}
.org-role{
  margin-top:6px;font-size:14px;font-weight:700;letter-spacing:.01em;
  line-height:1.4;color:var(--accent-ink);
}
.org-desc{margin-top:11px;max-width:33ch;font-size:14.5px;line-height:1.55;color:var(--text-2)}

@media (min-width:700px){
  .orgs-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
  .org-card{padding:24px 18px}
}
/* The roles run one or two lines depending on width and language
   ("Healthcare Access Platform" is the long one), which started the
   descriptions at different heights. Reserve the second line wherever
   the cards sit side by side. .org-role line-height is 1.4. */
@media (min-width:700px) and (max-width:1199px){
  .org-role{min-height:2.8em}
}
@media (min-width:1024px){
  .orgs-grid{gap:20px}
  .org-card{padding:30px 26px 28px}
  .org-logo{height:112px;margin-bottom:18px}
  .org-logo--ea img{max-height:112px}
  .org-logo--wk img{max-height:41px}
  .org-logo--mc img{max-height:38px}
  .org-name{font-size:22px}
  .org-role{font-size:14.5px;margin-top:7px}
  .org-desc{margin-top:12px;font-size:15.5px}
}

/* =====================================================================
   43. THE EASY STORY — two halves of one idea, bridged by the brand
   The EASY mark is not a caption under the pair: it sits in the gap and
   overlaps both cards, with a teal thread running through it, so the
   composition reads CONNECTIVITY -> EASY <- HEALTHCARE at a glance.
   The thread and the bridge switch axis with the layout.
   ===================================================================== */
.story{
  background:
    radial-gradient(820px 520px at 50% 108%,rgba(0,214,196,.17),transparent 64%),
    radial-gradient(620px 420px at 6% 0%,rgba(18,190,130,.12),transparent 66%),
    linear-gradient(176deg,#050D26 0%,#071634 44%,#07283C 100%);
}
.story .story-head{max-width:720px}
#story-title{font-size:clamp(28px,4vw,42px)}

.es-pair{position:relative;display:grid;gap:18px;max-width:980px;margin-inline:auto}
/* the thread the bridge sits on — vertical while the cards stack */
.es-pair::before{
  content:"";position:absolute;z-index:0;left:50%;top:12%;bottom:12%;width:2px;
  transform:translateX(-50%);
  background:linear-gradient(180deg,rgba(0,214,196,0),rgba(0,214,196,.7),rgba(0,214,196,0));
}

.es-card{
  position:relative;z-index:1;overflow:hidden;
  background:linear-gradient(170deg,rgba(255,255,255,.085) 0%,rgba(255,255,255,.035) 100%),#0A1B3A;
  border:1px solid rgba(0,214,196,.22);border-radius:var(--r-lg);
  box-shadow:0 1px 0 rgba(255,255,255,.05) inset,0 28px 54px -32px rgba(0,0,0,.95);
}
.es-media{display:block;aspect-ratio:3/2;overflow:hidden;background:rgba(255,255,255,.06)}
.es-media img{width:100%;height:100%;object-fit:cover;display:block}
.es-body{padding:22px 22px 26px}
.es-label{
  font-size:11px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  color:var(--accent-ink);margin-bottom:9px;
}
.es-title{font-size:22px;font-weight:800;letter-spacing:-.025em;line-height:1.15;color:var(--text)}
.es-desc{margin-top:9px;font-size:14.5px;line-height:1.6;color:var(--text-2)}

/* ---- the bridge: a dark plate, because the EASY mark is gold on black -- */
.es-bridge{position:relative;z-index:3;justify-self:center;display:grid;place-items:center;
  margin-block:-30px}
.es-plate{
  display:grid;place-items:center;
  padding:13px 20px;border-radius:18px;
  background:linear-gradient(150deg,#15284F 0%,#0A1A3C 55%,#071233 100%);
  border:1px solid rgba(0,214,196,.4);
  box-shadow:0 0 0 7px rgba(6,16,42,.92),0 18px 34px -14px rgba(0,0,0,.8),
             0 0 38px -4px rgba(0,214,196,.55);
}
.es-plate img{display:block;width:104px;height:auto}

.story-close{
  max-width:60ch;margin:34px auto 0;text-align:center;
  font-size:15.5px;line-height:1.65;color:var(--text-2);
}
.story-sign{
  margin-top:14px;text-align:center;
  font-family:"Red Hat Display",sans-serif;
  font-size:clamp(18px,2.4vw,24px);font-weight:800;letter-spacing:-.02em;
  color:var(--text);
}

@media (min-width:900px){
  .es-pair{grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:0;align-items:stretch}
  .es-bridge{align-self:center}
  /* thread turns horizontal and runs behind the plate */
  .es-pair::before{
    left:8%;right:8%;top:50%;bottom:auto;width:auto;height:2px;transform:translateY(-50%);
    background:linear-gradient(90deg,rgba(0,214,196,0),rgba(0,214,196,.7) 22%,
               rgba(0,214,196,.7) 78%,rgba(0,214,196,0));
  }
  .es-bridge{margin-block:0;margin-inline:-30px}
  .es-plate{padding:15px 24px;border-radius:20px;box-shadow:0 0 0 9px rgba(6,18,46,.95),
    0 22px 44px -18px rgba(0,0,0,.8),0 0 46px -4px rgba(0,214,196,.55)}
  .es-plate img{width:124px}
  .es-body{padding:24px 26px 28px}
  .es-title{font-size:24px}
  .es-desc{font-size:15px}
  .story-close{margin-top:40px;font-size:16px}
  .story-sign{margin-top:16px}
}
@media (prefers-reduced-motion:reduce){.es-card{transition:none}}

/* =====================================================================
   45. HOW TO GET WECARE LITE — the EASY acquisition journey
   A dark band, where the old step section sat, so the page keeps its
   light/dark rhythm. Four numbered steps, no photography: the sequence
   is the content.
   ===================================================================== */
.getx{
  position:relative;overflow:hidden;
  background:
    radial-gradient(760px 520px at 14% 6%,rgba(0,214,196,.20),transparent 62%),
    radial-gradient(660px 480px at 88% 94%,rgba(18,190,130,.18),transparent 64%),
    linear-gradient(152deg,#061634 0%,#07293F 34%,#05433E 68%,#0A5540 100%);
}
.getx-grid{display:grid;gap:14px}
.getx-step{
  position:relative;padding:22px 20px;border-radius:var(--r-card);
  background:linear-gradient(170deg,rgba(255,255,255,.085) 0%,rgba(255,255,255,.035) 100%);
  border:1px solid rgba(0,214,196,.22);
  box-shadow:0 24px 48px -32px rgba(0,0,0,.95);
}
.getx-num{
  display:block;font-family:"Red Hat Display",sans-serif;
  font-size:30px;font-weight:800;letter-spacing:-.05em;line-height:1;
  color:var(--turq);margin-bottom:12px;
}
.getx-title{font-size:17px;font-weight:700;letter-spacing:-.02em;line-height:1.25;color:#fff}
.getx-desc{margin-top:8px;font-size:14px;line-height:1.55;color:rgba(255,255,255,.66)}
.getx-after{
  display:block;max-width:58ch;margin:26px auto 0;text-align:center;
  font-size:14px;line-height:1.6;color:rgba(255,255,255,.74);
}
@media (min-width:640px) and (max-width:899px){
  .getx-grid--3{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
}
@media (min-width:900px){
  .getx-grid--3{grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
}
@media (min-width:1024px){
  .getx-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
  .getx-step{padding:26px 22px}
  .getx-num{font-size:34px}
  .getx-title{font-size:18px}
  .getx-desc{font-size:14.5px}
  .getx-after{margin-top:32px;font-size:15px}
}


/* ---- hero kicker: the proposition in three words ---- */
.hero-kicker{
  display:flex;align-items:center;gap:10px;margin-bottom:14px;
  font-size:11.5px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  color:var(--turq);
}
.hero-kicker i{font-style:normal;opacity:.6;font-size:13px}
@media (min-width:1024px){.hero-kicker{font-size:12.5px;margin-bottom:16px}}