/* EquityWallet marketing site — shared styles (landing page + standalone pages). */
/* ═══════════════════════════════════════
   GLOBAL
═══════════════════════════════════════ */
:root {
  /* ═══ BRAND COLORS ═══ */
  --g-dark:   #14532D;
  --g-main:   #1A6B3C;
  --g-mid:    #2E8B57;
  --g-soft:   #4CAF78;
  --g-pale:   #C6E8D4;
  --g-bg:     #F7F9F8;   /* barely-there ground, not a mint band */
  --g-accent: #6ee7a0;   /* canonical mint accent */
  --g-deep:   #0d3d22;   /* deepest dark */

  /* ═══ NEUTRAL SCALE ═══ */
  --white:    #FFFFFF;
  --off-wh:   #FAFAF8;
  --grey-50:  #F5F5F3;
  --grey-100: #EAEAE8;
  --grey-200: #D0D0CC;
  --grey-300: #B4B4AE;
  --grey-400: #8A8A84;
  --grey-500: #6B7066;
  --grey-600: #484844;
  --grey-700: #2E2E2A;
  --grey-800: #1E1E1A;
  --black:    #0D0D0A;

  /* ═══ SEMANTIC ═══ */
  --red:      #B91C1C;
  --amber:    #B45309;

  /* ═══ TYPOGRAPHY — strict 2-font system ═══ */
  --font:         'Inter', system-ui, -apple-system, sans-serif;
  --font-heading: 'Poppins', system-ui, -apple-system, sans-serif;

  /* ═══ LAYOUT WIDTHS ═══ */
  --container-max: 1200px;
  --text-max:       680px;
  --side-gutter:     28px;

  /* ═══ RADII (strict scale) ═══ */
  /* Minimal scale — surfaces are separated by hairlines and space, so the
     corners stay quiet. --radius-pill is kept for tags and badges only. */
  --radius-xs:    4px;
  --radius-sm:    6px;
  --radius:       8px;  /* default, incl. buttons */
  --radius-md:    8px;
  --radius-lg:   10px;
  --radius-xl:   12px;
  --radius-pill: 100px;

  /* ═══ SHADOWS ═══ */
  /* Elevation is carried by 1px borders, not shadow. What is left here is
     for the few things that genuinely float: the header and the video frame. */
  --shadow-xs:  none;
  --shadow-sm:  none;
  --shadow-md:  none;
  --shadow-lg:  0 1px 3px rgba(13,61,34,0.05);
  --shadow-xl:  0 2px 10px rgba(13,61,34,0.07);
  --shadow-btn: none;
  --hairline:   #E7EBE8;

  /* ═══ SPACING SCALE (4px grid) ═══ */
  --sp-1:   4px;
  --sp-2:   8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  20px;
  --sp-6:  24px;
  --sp-8:  32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-16: 64px;
  --sp-20: 80px;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font);
  background: var(--white);
  color: var(--grey-800);
  overflow-x: hidden;
  font-size: 16px;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
}

/* ── TYPOGRAPHY ── */
h1,h2,h3,h4,h5,h6 { font-family: var(--font-heading); font-weight: 600; letter-spacing: -0.018em; }
h1 { font-size: clamp(2.9rem, 4.6vw, 3.7rem);   line-height: 1.08; color: var(--black); letter-spacing: -0.03em; font-weight: 600; }
h2 { font-size: clamp(2rem, 3.4vw, 2.6rem);     line-height: 1.14;  color: var(--black); letter-spacing: -0.026em; font-weight: 600; }
h3 { font-size: clamp(1.375rem, 1.85vw, 1.55rem); line-height: 1.3;   color: var(--black); font-weight: 600; letter-spacing: -0.018em; }
h4 { font-size: 1.125rem;                        line-height: 1.35;  color: var(--black); font-weight: 600; letter-spacing: -0.008em; }
p  { font-size: clamp(1rem, 1.1vw, 1.125rem);   line-height: 1.6;   color: var(--grey-500); }
a, button, input, select, textarea, label, table, th, td {
  font-family: var(--font);
}
.eyebrow {
  font-family: var(--font);
  font-size: 0.76rem; font-weight: 700;
  letter-spacing: 0.17em; text-transform: uppercase;
  color: var(--g-main); display: block; margin-bottom: 16px;
}
.section-hd > p { font-size: clamp(0.97rem, 1.25vw, 1.08rem); line-height: 1.7; color: var(--grey-500); margin-top: 16px; }

/* ── LAYOUT ── */
/* min(…, 100%) matters once a section becomes a grid: .container's `margin: 0
   auto` disables grid stretch, so the item sized to fit-content — capped only
   by max-width — and stayed 1200px wide on a 1100px window, where
   body{overflow-x:hidden} then clipped it. Clamping to the track kills that. */
.container   { max-width: min(var(--container-max), 100%); margin: 0 auto; padding: 0 var(--side-gutter); }
.section     { padding: clamp(80px, 8vw, 124px) 0; }
.section--mint  { background: var(--g-bg); }
.section--white { background: var(--white); }
.section--dark  { background: var(--g-dark); }
.section-hd  { text-align: center; margin-bottom: clamp(56px, 5.6vw, 84px); max-width: 780px; margin-left: auto; margin-right: auto; }
.section-hd h2 { margin-bottom: 16px; }
.section-hd p  { max-width: var(--text-max); margin: 0 auto; font-size: 1.125rem; line-height: 1.6; color: var(--grey-500); }

/* ── BUTTONS ── */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 26px; border-radius: var(--radius);
  font-family: var(--font); font-weight: 600; font-size: 0.95rem;
  letter-spacing: 0;
  cursor: pointer; border: none; text-decoration: none; white-space: nowrap;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.btn-green {
  background: var(--g-main);
  color: var(--white);
}
.btn-green:hover { background: var(--g-dark); }
.btn-outline {
  background: var(--white);
  color: var(--black);
  border: 1px solid var(--grey-200);
}
.btn-outline:hover { border-color: var(--g-main); color: var(--g-main); }
.btn-ghost-w {
  background: rgba(255,255,255,0.08);
  color: var(--white);
  border: 1px solid rgba(255,255,255,0.28);
  backdrop-filter: blur(8px);
}
.btn-ghost-w:hover {
  background: rgba(255,255,255,0.16);
  border-color: rgba(255,255,255,0.5);
  transform: translateY(-2px);
}

/* ── SCROLL PROGRESS ── */
.scroll-progress { position: fixed; top: 74px; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, #2E7D4F, #4CAF72); z-index: 1000; transform-origin: left; transform: scaleX(0); transition: transform 0.1s linear; }

/* ═════════════════════════════════════
   NAVBAR
═════════════════════════════════════ */
/* ══════════════════════════════════════════
   PREMIUM NAVBAR — EquityWallet
══════════════════════════════════════════ */
.navbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
  /* Lean white header (smallcase-style) — logo mark + name, no tagline */
  background: #FFFFFF;
  border-bottom: 1px solid #E8ECE9;
  height: 74px;
  display: flex; align-items: center;
  padding: 0 40px;
  justify-content: space-between;
  box-shadow: 0 1px 12px rgba(13,30,22,0.05);
  transition: transform .55s cubic-bezier(.22, 1, .36, 1);
}

/* ── intro sequence ──────────────────────────────
   While <html> carries .ew-intro the page is held still and the header
   waits above the fold; the hero script drops both once act 2 has landed.
   The class is only ever set by JS, so no-JS sees the normal page. */
/* overflow-y:scroll keeps the scrollbar gutter so nothing shifts sideways
   when the page is handed back; with body fixed there is nothing to scroll. */
html.ew-intro { overflow-x: hidden; overflow-y: scroll; height: 100%; }
html.ew-intro body { overflow: hidden; position: fixed; inset: 0; width: 100%; }
html.ew-intro .navbar { transform: translateY(-100%); }
html.ew-intro .scroll-progress { opacity: 0; }

.nb-mark { height: 32px; width: auto; display: block; }
.nb-name {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 1.22rem; font-weight: 800; letter-spacing: -0.02em;
  color: #14321F; line-height: 1;
}
.nb-name-accent { color: #2E7D4F; }

.navbar__getapp {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-heading);
  font-weight: 600; font-size: 0.865rem;
  color: #14532D; text-decoration: none;
  padding: 8px 14px; border-radius: var(--radius-sm);
  border: 1.5px solid rgba(26,107,60,0.35);
  transition: background 0.2s, border-color 0.2s;
}
.navbar__getapp:hover { background: rgba(26,107,60,0.06); border-color: rgba(26,107,60,0.6); }

.navbar__mobile-menu {
  position: fixed; top: 74px; left: 0; right: 0; z-index: 999;
  background: #FFFFFF; border-bottom: 1px solid #E8ECE9;
  box-shadow: 0 18px 32px rgba(13,30,22,0.12);
  display: none; flex-direction: column; padding: 6px 0 10px;
}
.navbar__mobile-menu.open { display: flex; }
.navbar__mobile-menu a {
  padding: 13px 26px; text-decoration: none;
  color: #22352B; font-weight: 600; font-size: 0.95rem;
}
.navbar__mobile-menu a:active { background: #F1F6F2; }
/* "More" group heading inside the mobile sheet */
.navbar__mobile-sep {
  padding: 14px 26px 6px;
  margin-top: 4px;
  border-top: 1px solid #EDF1EE;
  font-family: var(--font-heading);
  font-size: 0.7rem; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: #8A9A90;
}

/* ── LOGO — PREMIUM ─────────────────────────────── */
.navbar__logo {
  display: flex; align-items: center; gap: 10px;
  text-decoration: none; color: inherit; /* prevent browser default link-blue */
  flex-shrink: 0;
}
.navbar__logo:hover { text-decoration: none; }

/* Icon wrapper */
.nb-icon-wrap {
  position: relative; display: flex;
  align-items: center; justify-content: center;
  flex-shrink: 0;
  background: #ffffff; border-radius: 50%; padding: 4px;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,0.15));
  transition: transform 0.3s ease, filter 0.3s ease;
}
.navbar__logo:hover .nb-icon-wrap {
  transform: scale(1.05);
  filter: drop-shadow(0 4px 12px rgba(110,231,160,0.25));
}

/* Thin vertical divider */
.nb-divider {
  width: 1px; height: 30px; flex-shrink: 0;
  background: rgba(255, 255, 255, 0.22);
  margin: 0 14px;
}

/* Text block */
.nb-text-block {
  display: flex; flex-direction: column;
  justify-content: center; line-height: 1;
}

/* Brand name row */
.nb-brand-name {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  font-size: 1.35rem;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.01em;
  display: flex; align-items: center; gap: 0;
}

/* "Equity" — light/medium mint green */
.nb-equity {
  color: #6ee7a0;
}

/* "Wallet" — clean crisp white */
.nb-wallet {
  color: #ffffff;
}

/* Tagline */
.nb-tagline {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  font-size: 0.58rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: capitalize;
  color: rgba(255, 255, 255, 0.7);
  margin-top: 3px;
  white-space: nowrap;
}

/* Mobile */
@media (max-width: 600px) {
  .nb-brand-name { font-size: 1.1rem; }
  .nb-divider { margin: 0 8px; height: 22px; }
  .nb-tagline { display: none; }
  .nb-icon-wrap svg { width: 36px; height: 30px; }
}

/* ── NAV LINKS ─────────────────────────── */
.navbar__links {
  display: flex; gap: 6px; list-style: none;
  position: absolute; left: 50%; transform: translateX(-50%);
  margin: 0; padding: 0;
}
.navbar__links a {
  text-decoration: none;
  color: #3A4A40;
  font-family: var(--font-heading);
  font-weight: 500; font-size: 0.865rem;
  letter-spacing: 0.025em;
  padding: 6px 12px; border-radius: var(--radius-xs);
  white-space: nowrap;
  position: relative;
  transition: color 0.22s, background 0.22s;
}
.navbar__links a::after {
  content: '';
  position: absolute; bottom: 1px; left: 50%; right: 50%;
  height: 1.5px;
  background: linear-gradient(90deg, var(--g-soft), var(--g-pale));
  border-radius: 2px;
  opacity: 0;
  transition: left 0.26s ease, right 0.26s ease, opacity 0.2s ease;
}
.navbar__links a:hover, .navbar__links a.active {
  color: #14532D;
  background: rgba(26,107,60,0.07);
}
.navbar__links a:hover::after, .navbar__links a.active::after {
  left: 12px; right: 12px;
  opacity: 1;
}


/* ── "MORE" DROPDOWN ───────────────────── */
.nav-more { position: relative; }
.nav-more__btn {
  display: inline-flex; align-items: center; gap: 5px;
  background: none; border: 0; cursor: pointer;
  color: #3A4A40;
  font-family: var(--font-heading);
  font-weight: 500; font-size: 0.865rem;
  letter-spacing: 0.025em;
  padding: 6px 12px; border-radius: var(--radius-xs);
  white-space: nowrap;
  position: relative;
  transition: color 0.22s, background 0.22s;
}
.nav-more__btn::after {
  content: '';
  position: absolute; bottom: 1px; left: 50%; right: 50%;
  height: 1.5px;
  background: linear-gradient(90deg, var(--g-soft), var(--g-pale));
  border-radius: 2px;
  opacity: 0;
  transition: left 0.26s ease, right 0.26s ease, opacity 0.2s ease;
}
.nav-more__btn:hover, .nav-more.open .nav-more__btn, .nav-more__btn.active {
  color: #14532D;
  background: rgba(26,107,60,0.07);
}
.nav-more__btn:hover::after,
.nav-more.open .nav-more__btn::after,
.nav-more__btn.active::after { left: 12px; right: 12px; opacity: 1; }
.nav-more__chev { transition: transform 0.24s ease; opacity: 0.75; }
.nav-more.open .nav-more__chev { transform: rotate(180deg); }

.nav-more__panel {
  position: absolute; top: calc(100% + 12px); left: 50%;
  width: 306px;
  background: #FFFFFF;
  border: 1px solid rgba(26,107,60,0.14);
  border-radius: 12px;
  box-shadow: 0 12px 34px rgba(13,30,22,0.10), 0 2px 6px rgba(13,30,22,0.05);
  padding: 6px;
  opacity: 0; visibility: hidden;
  transform: translateX(-50%) translateY(-6px);
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
}
.nav-more.open .nav-more__panel {
  opacity: 1; visibility: visible;
  transform: translateX(-50%) translateY(0);
}
/* hover bridge so the pointer can cross the gap */
.nav-more__panel::before {
  content: ''; position: absolute; left: 0; right: 0; top: -12px; height: 12px;
}
.nav-more__panel a {
  display: flex; align-items: flex-start; gap: 11px;
  padding: 10px 11px;
  border-radius: 9px;
  text-decoration: none;
  transition: background 0.18s;
}
.nav-more__panel a::after { content: none; }
.nav-more__panel a:hover, .nav-more__panel a.active { background: #F1F6F2; }
.nav-more__ico {
  flex-shrink: 0;
  width: 32px; height: 32px; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(26,107,60,0.08);
  color: #1A6B3C;
}
.nav-more__ico svg { width: 16px; height: 16px; }
.nav-more__txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.nav-more__txt b {
  font-family: var(--font-heading);
  font-weight: 600; font-size: 0.855rem; letter-spacing: 0.01em;
  color: #22352B; line-height: 1.25;
}
.nav-more__txt em {
  font-style: normal;
  font-size: 0.75rem; color: #6B7C72; line-height: 1.3;
}

/* ── RIGHT CTA ─────────────────────────── */
.navbar__right { display: flex; gap: 14px; align-items: center; flex-shrink: 0; }

.navbar__cta-btn {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 22px;
  background: #1A3C2E;
  border: 1px solid #1A3C2E;
  border-radius: var(--radius-sm);
  color: #FFFFFF;
  font-family: var(--font-heading);
  font-weight: 600; font-size: 0.855rem;
  letter-spacing: 0.03em;
  text-decoration: none;
  position: relative; overflow: hidden;
  box-shadow: 0 2px 12px rgba(13,30,22,0.30);
  transition: transform 0.2s, box-shadow 0.2s, background 0.2s;
}
.navbar__cta-btn:hover {
  transform: translateY(-1px);
  background: #153327;
  color: #FFFFFF;
  box-shadow: 0 4px 18px rgba(13,30,22,0.22);
}

/* Login icon */
.navbar__cta-btn svg { flex-shrink: 0; opacity: 0.88; }

/* ── HAMBURGER ─────────────────────────── */
.navbar__menu-btn {
  display: none; background: none; border: 1px solid rgba(26,107,60,0.25);
  cursor: pointer; padding: 8px; color: #22352B;
  border-radius: var(--radius-xs); transition: background 0.2s;
}
.navbar__menu-btn:hover { background: rgba(46,139,87,0.12); }

/* ── RESPONSIVE ─────────────────────────── */
/* The centred link row (six links + the "More" menu) needs the room back on
   smaller desktops — it is absolutely centred, so without this it slides under
   the logo or the right CTA block instead of reflowing. */
@media (max-width: 1500px) {
  .navbar__links a, .nav-more__btn { padding: 6px 9px; font-size: 0.825rem; letter-spacing: 0.012em; }
  .navbar__links a:hover::after, .navbar__links a.active::after,
  .nav-more__btn:hover::after, .nav-more.open .nav-more__btn::after,
  .nav-more__btn.active::after { left: 9px; right: 9px; }
  .nav-more__panel a { padding: 10px 11px; font-size: 1rem; letter-spacing: normal; }
}
@media (max-width: 1400px) {
  .navbar__links { gap: 2px; }
  .navbar__links a, .nav-more__btn { padding: 6px 7px; font-size: 0.795rem; }
  .navbar__links a:hover::after, .navbar__links a.active::after,
  .nav-more__btn:hover::after, .nav-more.open .nav-more__btn::after,
  .nav-more__btn.active::after { left: 7px; right: 7px; }
  .nav-more__panel a { padding: 10px 11px; }
}
@media (max-width: 1300px) {
  .navbar { padding: 0 26px; }
  .navbar__getapp { display: none; }
}
@media (max-width: 1040px) {
  .navbar__links { display: none; }
  .navbar__menu-btn { display: flex; }
}
@media (max-width: 600px) {
  .navbar { padding: 0 14px; height: 64px; }
  .navbar__cta-btn { padding: 7px 13px; font-size: 0.8rem; }
  .navbar__right { gap: 8px; }
  .navbar__getapp { display: none; }
  .nb-mark { height: 26px; }
  .nb-name { font-size: 1.05rem; }
  .navbar__mobile-menu { top: 64px; }
  .scroll-progress { top: 64px; }
}

/* ═════════════════════════════════════
   1. HERO – Flat Fee Positioning + What is EW
═════════════════════════════════════ */
/* ═══════════════════════════════════════════════════
   HERO — Split panel: dark left · video right
═══════════════════════════════════════════════════ */
/* ═══════════════════════════════════════════════════
   HERO — Light sage bg, headline left, device right
═══════════════════════════════════════════════════ */
/* ═══════════════════════════════════════════════════════
   HERO — Full-height two-column, video fills right side
═══════════════════════════════════════════════════════ */
/* ═══════════════════════════════════════════════════════════════
   HERO — Unified light-green background, rectangle video panel
═══════════════════════════════════════════════════════════════ */
/* ═══════════════════════════════════════════════════════════════════════
   HERO v7 — Premium Emerald Theatre
   Left: deep forest panel (dark, cinematic, authoritative)
   Right: light sage panel with floating video card
═══════════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════
   HERO v8 — Unified site palette (light sage throughout)
═══════════════════════════════════════════════════════════════════ */
.hero {
  position: relative;
  overflow: hidden;
  min-height: 100vh;
  display: flex;
  align-items: stretch;
  background: var(--g-bg);
}

/* Subtle dot texture */
.hero::before {
  content: '';
  position: absolute; inset: 0; z-index: 0;
  background-image: radial-gradient(circle, rgba(26,107,60,.07) 1px, transparent 1px);
  background-size: 36px 36px;
  pointer-events: none;
}
/* Soft radial glow top-right */
.hero::after {
  content: '';
  position: absolute; top: -20%; right: -10%;
  width: 65%; height: 75%;
  background: radial-gradient(ellipse at center, rgba(76,175,120,.14) 0%, transparent 65%);
  pointer-events: none; z-index: 0;
}

/* ── Grid ── */
.hero__grid {
  display: grid;
  grid-template-columns: 52fr 48fr;
  width: 100%;
  min-height: 100vh;
  align-items: center;
  padding: 0 5% 0 7%;
  gap: 0;
  position: relative; z-index: 1;
  box-sizing: border-box;
}

/* ════ LEFT ════ */
.hero__left {
  padding: 100px 52px 80px 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  max-width: 560px;
}

/* SEBI badge */
.hero__badge {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--g-bg);
  border: 1px solid var(--g-pale);
  color: var(--g-main);
  padding: 6px 16px; border-radius: var(--radius-pill);
  font-size: .73rem; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase;
  width: fit-content; margin-bottom: 28px;
  animation: badgePulse 3.2s cubic-bezier(.22,1,.36,1) infinite;
}
.hero__badge::before {
  content: '●'; font-size: .45rem;
  animation: dotBlink 2s ease-in-out infinite;
}
@keyframes badgePulse {
  0%,100%{ box-shadow:0 0 0 0 rgba(26,107,60,0); border-color:var(--g-pale); }
  12%    { box-shadow:0 0 0 5px rgba(26,107,60,.1); border-color:var(--g-main); }
  24%    { box-shadow:0 0 0 10px rgba(26,107,60,0); border-color:var(--g-pale); }
}
@keyframes dotBlink { 0%,100%{opacity:1} 50%{opacity:.4} }
@keyframes pulse    { 0%,100%{opacity:1} 50%{opacity:.4} }
@keyframes fadeSlideUp { from{opacity:0;transform:translateY(16px)} to{opacity:1;transform:translateY(0)} }

/* Headline */
.hero h1 {
  font-family: var(--font-heading);
  font-size: clamp(2.8rem, 4vw, 4.4rem);
  font-weight: 800; line-height: 1.04;
  color: var(--black);
  letter-spacing: -.03em; margin-bottom: 0;
  animation: fadeSlideUp .7s .2s ease both;
}
.hero h1 em {
  color: var(--g-main); font-style: normal;
}
.hero h1 .sub-line {
  display: block; font-size: .56em; font-weight: 700;
  color: var(--g-dark); letter-spacing: 0; margin-top: 6px;
}

/* Sub-tagline */
.hero__tagline {
  font-size: 1rem; color: var(--grey-600);
  line-height: 1.75; max-width: 460px;
  margin: 18px 0 24px;
  animation: fadeSlideUp .7s .4s ease both;
}
.hero__tagline strong { color: var(--black); }

/* Metric bar */
.hero__metric {
  display: flex; align-items: center; gap: 0;
  background: var(--white);
  border: 1px solid var(--grey-100);
  border-radius: var(--radius); overflow: hidden;
  margin-bottom: 24px; max-width: 460px;
  box-shadow: var(--shadow-sm);
  animation: fadeSlideUp .7s .55s ease both;
}
.hm-cell {
  flex: 1; padding: 13px 16px;
  border-right: 1px solid var(--grey-100);
  text-align: center;
}
.hm-cell:last-child { border-right: none; }
.hm-val {
  display: block;
  font-family: var(--font-heading); font-size: 1.25rem; font-weight: 800;
  line-height: 1; margin-bottom: 3px;
}
.hm-val.red   { color: var(--red); }
.hm-val.green { color: var(--g-main); }
.hm-val.white { color: var(--black); }
.hm-lbl {
  font-size: .61rem; font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; color: var(--grey-400);
}

/* Feature pills */
.hero__pills-row {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin-bottom: 28px;
  animation: fadeSlideUp .7s .7s ease both;
}
.hero__feature-pill {
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--white);
  border: 1px solid var(--grey-100);
  border-radius: var(--radius-pill); padding: 6px 14px;
  font-size: .78rem; font-weight: 600; color: var(--grey-800);
  box-shadow: var(--shadow-xs);
  transition: border-color .2s, box-shadow .2s;
}
.hero__feature-pill:hover {
  border-color: var(--g-pale); box-shadow: var(--shadow-sm);
}
.hero__feature-pill .fp-icon { font-size: .85rem; }

/* CTAs */
.hero__ctas {
  display: flex; gap: 14px; flex-wrap: wrap;
  animation: fadeSlideUp .7s .85s ease both;
}
.hero__cta-primary {
  display: inline-flex; align-items: center; gap: 9px;
  background: var(--g-main); color: var(--white);
  border: none; padding: 14px 30px; border-radius: var(--radius-pill);
  font-family: var(--font); font-size: .95rem; font-weight: 700;
  cursor: pointer; text-decoration: none;
  box-shadow: var(--shadow-btn);
  transition: background .2s, transform .2s, box-shadow .2s;
  letter-spacing: .01em;
}
.hero__cta-primary:hover {
  background: var(--g-dark);
  transform: translateY(-2px);
  box-shadow: 0 8px 28px rgba(26,107,60,.35);
}
.hero__cta-primary .cta-arrow { transition: transform .2s; }
.hero__cta-primary:hover .cta-arrow { transform: translateX(3px); }

.hero__cta-ghost {
  display: inline-flex; align-items: center;
  background: transparent; color: var(--g-dark);
  border: 1.5px solid var(--g-pale);
  padding: 13px 26px; border-radius: var(--radius-pill);
  font-family: var(--font); font-size: .92rem; font-weight: 600;
  cursor: pointer; text-decoration: none;
  transition: all .2s; letter-spacing: .01em;
}
.hero__cta-ghost:hover {
  background: var(--g-bg); border-color: var(--g-soft); color: var(--g-main);
}

/* ════ RIGHT ════ */
.hero__right {
  padding: 80px 0 80px 40px;
  display: flex; align-items: center; justify-content: center;
  position: relative;
}

/* Video wrapper */
.hero__video-wrap {
  position: relative; width: 100%; max-width: 580px; z-index: 1;
}

/* Video card */
.hero__video-card {
  background: #0a1a0e;
  border-radius: var(--radius-lg); overflow: hidden; position: relative;
  aspect-ratio: 16 / 9;
  box-shadow:
    0 0 0 1px rgba(26,107,60,.2),
    0 24px 64px rgba(26,107,60,.18),
    0 6px 20px rgba(0,0,0,.12);
}

/* Watch label */
.hero__video-label {
  position: absolute; top: 14px; left: 14px; z-index: 200;
  font-size: .66rem; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: rgba(110,231,153,.95);
  display: flex; align-items: center; gap: 6px;
  background: rgba(6,20,10,.58);
  padding: 5px 10px; border-radius: var(--radius-pill);
  backdrop-filter: blur(6px);
}
.hero__video-label::before {
  content: ''; width: 5px; height: 5px; border-radius: 50%;
  background: #6ee7a0; flex-shrink: 0;
  animation: pulse 1.6s ease-in-out infinite;
}

/* #ew-vid-wrap fills card */
#ew-vid-wrap {
  position: absolute !important; inset: 0;
  width: 100% !important; height: 100% !important;
}

/* Trust strip */
.hero__trust-strip {
  display: flex; align-items: center; justify-content: center;
  gap: 14px; margin-top: 18px; flex-wrap: wrap;
}
.trust-chip {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--white);
  border: 1px solid var(--grey-100);
  border-radius: var(--radius-pill); padding: 5px 13px;
  font-size: .73rem; font-weight: 600; color: var(--grey-600);
  box-shadow: var(--shadow-xs);
}
.trust-chip .tc-icon { font-size: .82rem; }

/* Responsive */
@media (max-width: 1100px) {
  .hero__grid { grid-template-columns: 1fr 1fr; padding: 0 4% 0 5%; }
  .hero h1 { font-size: clamp(2.2rem, 3.6vw, 3.6rem); }
  .hero__left { padding-right: 36px; }
}
@media (max-width: 840px) {
  .hero__grid { grid-template-columns: 1fr; padding: 0 5%; align-items: start; }
  .hero, .hero__left { min-height: auto; }
  .hero__left { padding: 80px 0 40px; max-width: 100%; }
  .hero__right { padding: 0 0 60px; justify-content: flex-start; }
  .hero__video-wrap { max-width: 100%; }
  .hero__metric { max-width: 100%; }
  .hero__tagline { max-width: 100%; }
}
@media (max-width: 480px) {
  .hero h1 { font-size: 2.3rem; }
  .hero__left { padding: 72px 0 36px; }
}

/* ── Bullet point list (hero left) ── */
.hero__bullets { list-style:none; margin:0 0 22px; padding:0; display:flex; flex-direction:column; gap:7px; }
.hero__bullets li {
  display:flex; align-items:flex-start; gap:9px;
  font-size:.93rem; color:var(--grey-600); line-height:1.5;
}
.hero__bullets li::before {
  content:''; width:7px; height:7px; border-radius:50%;
  background:var(--g-main); flex-shrink:0; margin-top:6px;
}
.hero__bullets li strong { color:var(--black); }

/* ── Compact fee snapshot (2-row, replaces full table) ── */
.fee-snap {
  background:var(--white); border-radius: var(--radius);
  border:1px solid var(--grey-100);
  box-shadow:0 4px 16px rgba(0,0,0,.06);
  overflow:hidden; margin-bottom:24px;
}
.fee-snap__row {
  display:flex; justify-content:space-between; align-items:center;
  padding:13px 18px; border-bottom:1px solid var(--grey-100);
  font-size:.9rem;
}
.fee-snap__row:last-child { border-bottom:none; }
.fee-snap__label { color:var(--grey-600); font-weight:500; }
.fee-snap__val { font-weight:800; font-size:1rem; }
.fee-snap__val.red  { color:var(--red); }
.fee-snap__val.green { color:var(--g-main); }
.fee-snap__note {
  padding:7px 18px; background:var(--grey-50);
  font-size:.68rem; color:var(--grey-400);
  border-top:1px solid var(--grey-100);
}

/* ── Compact feature rows (hero right, replaces 3-col cards) ── */
.hero__feat-rows { display:flex; flex-direction:column; gap:1px; }
.hero__feat-row {
  display:flex; align-items:center; gap:14px;
  background:var(--white); border:1px solid rgba(26,107,60,.08);
  border-left:3px solid var(--g-main);
  border-radius: var(--radius-sm); padding:11px 14px;
  box-shadow:0 1px 6px rgba(0,0,0,.04);
  transition:box-shadow .2s, border-color .2s;
}
.hero__feat-row:hover { box-shadow: none; border-color:var(--g-pale); }
.hero__feat-row-icon {
  width:34px; height:34px; border-radius: var(--radius-sm); flex-shrink:0;
  background:var(--g-bg); display:flex; align-items:center;
  justify-content:center; font-size:1rem;
}
.hero__feat-row-title { font-size:.85rem; font-weight:700; color:var(--black); }
.hero__feat-row-sub   { font-size:.75rem; color:var(--grey-400); margin-top:1px; line-height:1.4; }

.fee-table { border-radius: var(--radius); overflow: hidden; margin-bottom: 20px; border: 1px solid var(--grey-100); box-shadow: 0 4px 20px rgba(0,0,0,0.07); }
.fee-table__head { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; background: var(--g-dark); padding: 10px 18px; gap: 8px; }
.fee-table__head span { font-size: 0.78rem; font-weight: 600; letter-spacing: 0.01em; color: rgba(255,255,255,0.75); }
.fee-table__head span:not(:first-child) { text-align: right; }
.fee-table__row { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; padding: 12px 18px; gap: 8px; background: var(--white); border-top: 1px solid var(--grey-100); align-items: center; }
.fee-table__row:last-child { background: #F0FFF6; }
.fee-table__corpus { font-size: 0.88rem; font-weight: 700; color: var(--black); }
.fee-table__mf { font-size: 0.88rem; font-weight: 700; color: #e53935; text-align: right; }
.fee-table__ew { font-size: 0.88rem; font-weight: 700; color: var(--g-main); text-align: right; }
.fee-table__save { font-size: 0.82rem; font-weight: 800; color: var(--g-dark); text-align: right; background: rgba(46,139,87,0.1); padding: 3px 8px; border-radius: var(--radius-xs); justify-self: end; }
.fee-table__note { font-size: 0.71rem; color: var(--grey-700); padding: 7px 18px 9px; background: var(--grey-50); border-top: 1px solid var(--grey-100); }

.hero__ctas { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 24px; }
.hero__stats { display: flex; gap: 32px; padding-top: 32px; border-top: 1px solid var(--grey-100); flex-wrap: wrap; }
.hero__stat-val { font-family: var(--font-heading); font-size: 1.85rem; font-weight: 700; color: var(--black); display: block; }
.hero__stat-lbl { font-size: 0.78rem; color: var(--grey-400); font-weight: 600; margin-top: 3px; }

/* RIGHT — What is Equity Wallet — feature cards */
.hero__right {
  display: flex; flex-direction: column; gap: 0;
  padding-top: 4px;
}
.hero__what-box {
  background: var(--white); border-radius: var(--radius);
  border: 1px solid var(--grey-100);
  padding: 14px 18px;
  box-shadow: 0 4px 24px rgba(0,0,0,.05);
  margin-bottom: 0;
}
.hero__what-box-title {
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--g-main); margin-bottom: 10px;
}
.hero__what-box-desc {
  font-size: 0.95rem; color: var(--grey-600); line-height: 1.7;
}
.hero__what-box-desc strong { color: var(--black); }

/* Feature cards grid */
.hero__features { display: flex; flex-direction: column; gap: 10px; }
.hero__feat {
  display: flex; align-items: center; gap: 16px;
  background: var(--white);
  border: 1.5px solid var(--grey-100);
  border-left: 4px solid var(--g-main);
  border-radius: var(--radius); padding: 14px 18px;
  box-shadow: 0 2px 10px rgba(0,0,0,.04);
  transition: box-shadow 0.2s, border-color 0.2s, transform 0.2s;
}
.hero__feat:hover {
  box-shadow: 0 6px 24px rgba(27,122,68,.10);
  border-left-color: var(--g-mid);
  transform: translateX(3px);
}
.hero__feat-icon {
  width: 40px; height: 40px; border-radius: var(--radius-sm);
  background: var(--g-bg); display: flex; align-items: center; justify-content: center;
  font-size: 1.15rem; flex-shrink: 0;
}
.hero__feat-text {}
.hero__feat-title { font-size: 0.88rem; font-weight: 700; color: var(--black); }
.hero__feat-sub { font-size: 0.76rem; color: var(--grey-400); margin-top: 2px; line-height: 1.45; }

/* ── 2-column feature grid for centered hero ── */
.hero__feat-grid-2col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 24px;
  animation: fadeSlideUp .7s .55s ease both;
}
@media (max-width: 580px) {
  .hero__feat-grid-2col { grid-template-columns: 1fr; }
}

@media (max-width: 900px) {
  .hero__grid { grid-template-columns: 1fr; gap: 44px; }
  .hero { min-height: auto; padding: 110px 20px 64px; }
  .hero__right { padding-top: 0; }
}

/* Erosion Visual */
.erosion-visual {
  background: var(--white); border-radius: var(--radius-lg); padding: 30px 26px 26px;
  box-shadow: var(--shadow-lg); border: 1px solid var(--grey-100);
}
.erosion-title { font-size: 0.92rem; font-weight: 700; color: var(--grey-600); text-align: center; margin-bottom: 6px; }
.erosion-subtitle { font-size: 0.8rem; color: var(--grey-400); text-align: center; margin-bottom: 20px; }
.erosion-controls { display: flex; gap: 8px; justify-content: center; margin-bottom: 20px; }
.ectrl { padding: 5px 14px; border-radius: var(--radius-pill); border: 1.5px solid var(--grey-200); background: var(--white); font-size: 0.78rem; font-weight: 600; cursor: pointer; font-family: var(--font); color: var(--grey-600); transition: all 0.18s; }
.ectrl.active { background: var(--g-main); color: white; border-color: var(--g-main); }
.erosion-bars { display: flex; align-items: flex-end; justify-content: center; gap: 22px; height: 190px; }
.ebar-wrap { display: flex; flex-direction: column; align-items: center; gap: 8px; flex: 1; max-width: 90px; }
.ebar { width: 100%; border-radius: var(--radius-sm) 8px 0 0; display: flex; flex-direction: column; justify-content: flex-start; padding-top: 10px; align-items: center; transition: height 1.3s cubic-bezier(0.34,1,0.64,1); position: relative; }
.ebar.no-fee { background: linear-gradient(180deg,#bbf7d0,var(--g-main)); height: 0; }
.ebar.mf-fee { background: linear-gradient(180deg,#fecaca,var(--red)); height: 0; }
.ebar.ew-fee { background: linear-gradient(180deg,#d1fae5,var(--g-mid)); height: 0; }
.ebar__val { font-size: 0.72rem; font-weight: 700; color: var(--white); text-shadow: 0 1px 4px rgba(0,0,0,0.35); padding: 0 3px; text-align: center; line-height: 1.3; }
.ebar__lbl { font-size: 0.72rem; font-weight: 700; color: var(--grey-600); text-align: center; line-height: 1.4; }
.erosion-footer { margin-top: 16px; background: #fff7ed; border: 1px solid #fed7aa; border-radius: var(--radius-sm); padding: 10px 14px; text-align: center; font-size: 0.82rem; }
.erosion-footer strong { color: var(--amber); }
.erosion-footer strong.green { color: var(--g-main); }

@media (max-width: 900px) {
  .hero__grid { grid-template-columns: 1fr; gap: 44px; }
  .hero { min-height: auto; padding: 110px 20px 64px; }
}

/* ── TRUST STRIP ── */
/* ── TRUST STRIP — pop-in pop-out ── */
.trust-strip {
  background: var(--g-bg);
  padding: 22px 0;
  border-top: 1px solid var(--g-pale);
  border-bottom: 1px solid var(--g-pale);
  overflow: hidden;
}
.trust-strip__inner {
  display: flex; align-items: center; justify-content: center;
  gap: 32px; flex-wrap: wrap;
}
.trust-item {
  display: flex; align-items: center; gap: 9px;
  color: var(--grey-600); font-size: 0.88rem; font-weight: 600;
  padding: 8px 18px; border-radius: var(--radius-pill);
  border: 1.5px solid transparent;
  background: transparent;
  opacity: 0; transform: translateY(14px) scale(0.94);
  transition: background 0.22s, border-color 0.22s, color 0.22s, box-shadow 0.22s;
}
.trust-item svg { color: var(--g-main); flex-shrink: 0; transition: transform 0.22s; }
.trust-item.popped {
  opacity: 1; transform: translateY(0) scale(1);
  animation: trustPop 0.52s cubic-bezier(0.16,1,0.3,1) both;
}
.trust-item.highlight {
  background: var(--white);
  border-color: var(--g-pale);
  color: var(--g-dark);
  box-shadow: 0 4px 20px rgba(27,122,68,.10);
  transform: translateY(-2px) scale(1.035);
}
.trust-item.highlight svg { color: var(--g-main); transform: scale(1.15); }
@keyframes trustPop {
  0%   { opacity: 0; transform: translateY(18px) scale(0.88); }
  55%  { opacity: 1; transform: translateY(-4px) scale(1.04); }
  80%  { transform: translateY(1px) scale(0.99); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

/* ═════════════════════════════════════
   2. REAL COST OF MUTUAL FUNDS
═════════════════════════════════════ */
/* ── CSS continues ── */

.cost-band { background: #191919; padding: 52px 0; }
.cost-band .eyebrow { color: #6ee7a0; text-align: center; }
.cost-band h2 { color: var(--white); text-align: center; margin-bottom: 16px; }
.cost-band h2 em { color: var(--red); font-style: italic; }
.cost-band__sub { color: rgba(255,255,255,0.58); max-width: 640px; margin: 0 auto 36px; font-size: 1.02rem; text-align: center; }
.cost-band__sub strong { color: #fde68a; }
.cost-pills { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-bottom: 24px; }
.cost-pill { background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.14); color: rgba(255,255,255,0.82); padding: 9px 20px; border-radius: var(--radius-pill); font-size: 0.9rem; font-weight: 600; }
.cost-numbers { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; max-width: 840px; margin: 0 auto; }
.cost-card { text-align: center; padding: 20px 10px; }
.cost-card__inv { font-size: 0.78rem; font-weight: 700; color: rgba(255,255,255,0.4); text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 8px; }
.cost-card__corpus { font-size: 2.1rem; font-weight: 700; font-family: var(--font-heading); }
.cost-card__corpus.green { color: #6ee7a0; }
.cost-card__corpus.red   { color: var(--red); }
.cost-card__corpus.gold  { color: #fde68a; }
.cost-card__label { font-size: 0.8rem; color: rgba(255,255,255,0.4); margin-top: 5px; }
@media (max-width: 600px) { .cost-numbers { grid-template-columns: 1fr; } }

/* ═════════════════════════════════════
   3. FEE IMPACT CALCULATOR
═════════════════════════════════════ */
#calculator { position: relative; overflow: hidden; }
#calculator > .container { position: relative; z-index: 1; }

/* Shared decorative flow-line ornament. Geometry lives in the <defs> at the
   top of <body> and is pulled in with <use>; only placement and the fade-out
   live here. The colours CANNOT live in this stylesheet — document CSS does
   not reach inside a <use> shadow tree — so they are presentation attributes
   on the source paths. Each element is one crisp curve with a coloured
   gradient wedge hugging it, the wedge being nested bands whose stacked alpha
   and fill ramp from deep green at the curve to pale green at the rim, so the
   falloff follows the curve rather than running straight the way a
   linearGradient would. Green is #2E7D32, not the brand's teal-leaning
   --g-main: the reference art's darkest pixel is #DDE8DD, i.e. white minus
   (34,23,34) — red and blue cut equally, so the hue is a pure green.
   Offsets scale with the viewport so each ornament keeps its proportion. */
/* The generated flow ornament stays in the markup but is dialled back for the
   minimal pass — raise the opacity here to bring it back. */
.ew-flow { position: absolute; z-index: 0; pointer-events: none; user-select: none; opacity: .3; }

/* calculator — the original pair */
.ew-flow--calc-a {
  top: clamp(-152px, -9.5vw, -84px); left: clamp(-246px, -15.3vw, -136px);
  width: clamp(420px, 47.4vw, 760px);
  -webkit-mask-image: linear-gradient(100deg, #000 46%, rgba(0,0,0,.42) 74%, transparent 92%);
          mask-image: linear-gradient(100deg, #000 46%, rgba(0,0,0,.42) 74%, transparent 92%);
}
.ew-flow--calc-b {
  top: clamp(-58px, -3.6vw, -32px); right: clamp(-64px, -4vw, -36px);
  width: clamp(200px, 22.8vw, 360px);
  -webkit-mask-image: linear-gradient(258deg, #000 26%, rgba(0,0,0,.4) 62%, transparent 88%);
          mask-image: linear-gradient(258deg, #000 26%, rgba(0,0,0,.4) 62%, transparent 88%);
}
/* philosophy — mirrored into the top-right so it doesn't echo the calculator */
.ew-flow--phil {
  top: clamp(-124px, -7.6vw, -64px); right: clamp(-228px, -13.6vw, -116px);
  width: clamp(380px, 42vw, 680px); opacity: .82; transform: scaleX(-1);
  -webkit-mask-image: linear-gradient(100deg, #000 44%, rgba(0,0,0,.4) 72%, transparent 92%);
          mask-image: linear-gradient(100deg, #000 44%, rgba(0,0,0,.4) 72%, transparent 92%);
}
/* trust — flipped low along the bottom-left, under the disclosure grid */
#trust { position: relative; overflow: hidden; }
#trust > .container { position: relative; z-index: 1; }
.ew-flow--trust {
  bottom: clamp(-150px, -9.4vw, -76px); left: clamp(-236px, -14.2vw, -120px);
  width: clamp(400px, 44vw, 700px); opacity: .7; transform: scaleY(-1);
  -webkit-mask-image: linear-gradient(100deg, #000 44%, rgba(0,0,0,.4) 72%, transparent 92%);
          mask-image: linear-gradient(100deg, #000 44%, rgba(0,0,0,.4) 72%, transparent 92%);
}
/* Slow, visible drift: up to ~18px of travel, ~2deg of turn and a 3% breathe,
   13–18s loops on offset phases so no two move in step. Uses the independent
   translate/rotate/scale properties, which compose with the scaleX/scaleY flips
   in `transform` above instead of replacing them — and stay on the compositor,
   so the paths never repaint. */
@keyframes ewFlowDrift {
  0%, 100% { translate: 0 0;          rotate: 0deg;   scale: 1; }
  25%      { translate: 18px -12px;   rotate: 2deg;   scale: 1.03; }
  50%      { translate: 4px 10px;     rotate: -.8deg; scale: 1.01; }
  75%      { translate: -14px 4px;    rotate: -2deg;  scale: 1.025; }
}
.ew-flow { animation: ewFlowDrift 16s ease-in-out infinite; will-change: translate, rotate, scale; }
.ew-flow--calc-a { animation-duration: 16s; animation-delay: -1s; }
.ew-flow--calc-b { animation-duration: 13s; animation-delay: -6s;  animation-direction: reverse; }
.ew-flow--phil   { animation-duration: 18s; animation-delay: -12s; }
.ew-flow--trust  { animation-duration: 15s; animation-delay: -10s; animation-direction: reverse; }
@media (prefers-reduced-motion: reduce) { .ew-flow { animation: none; } }

.fcx-wash { position: absolute; z-index: 0; pointer-events: none;
  top: -120px; left: -140px; width: 620px; height: 420px; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(26,107,60,.035), rgba(26,107,60,0) 74%); }

.fcx-hd { position: relative; max-width: 940px; }
.fcx-hd h2 { font-size: clamp(1.7rem, 3.1vw, 2.3rem); }
.fcx-art {
  position: absolute; right: -130px; top: -30px; width: clamp(160px, 15vw, 208px);
  height: auto; pointer-events: none; user-select: none;
}
.fcx-card {
  background: var(--white); border: 1px solid #E3EBE6;
  border-radius: var(--radius-lg); box-shadow: 0 4px 32px rgba(13,61,34,.07);
  overflow: hidden;
}
.fcx-body { display: grid; grid-template-columns: 1fr 1fr; }
.fcx-col { padding: clamp(20px, 2.2vw, 28px); display: flex; flex-direction: column; }
.fcx-col + .fcx-col { border-left: 1px solid #EDF1EE; }

/* ── Info button (top-right of the card): assumptions + disclaimer on hover / focus / tap ── */
.fcx-card { position: relative; }
.fcx-info { position: absolute; top: 14px; right: 14px; z-index: 5; }
.fcx-info__btn {
  width: 30px; height: 30px; padding: 0; border-radius: 50%; cursor: pointer;
  display: grid; place-items: center; color: var(--g-main);
  background: var(--white); border: 1px solid #DCE7E0; transition: background .2s, border-color .2s;
}
.fcx-info__btn svg { width: 17px; height: 17px; stroke-width: 2; }
.fcx-info__btn:hover, .fcx-info__btn[aria-expanded="true"] { background: #EAF3EC; border-color: #BFD8C8; }
.fcx-info__btn:focus-visible { outline: 2px solid var(--g-mid); outline-offset: 2px; }
.fcx-info__pop {
  position: absolute; top: calc(100% + 8px); right: 0; width: min(340px, calc(100vw - 84px));
  padding: 14px 16px; background: var(--white); border: 1px solid #E3EBE6; border-radius: 12px;
  box-shadow: 0 12px 32px rgba(13,61,34,.14);
  opacity: 0; visibility: hidden; transform: translateY(-4px);
  transition: opacity .2s ease, transform .2s ease, visibility .2s;
}
/* invisible bridge over the 8px gap so moving the mouse onto the popover doesn't close it */
.fcx-info__pop::before { content: ""; position: absolute; left: 0; right: 0; top: -10px; height: 10px; }
.fcx-info__pop p { margin: 0; font-size: .76rem; line-height: 1.55; color: var(--grey-600); }
.fcx-info__pop p + p { margin-top: 9px; padding-top: 9px; border-top: 1px solid #EDF1EE; }
.fcx-info__pop strong { color: var(--grey-800); font-weight: 600; }
@media (hover: hover) { .fcx-info:hover .fcx-info__pop { opacity: 1; visibility: visible; transform: none; } }
.fcx-info:focus-within .fcx-info__pop,
.fcx-info__btn[aria-expanded="true"] + .fcx-info__pop { opacity: 1; visibility: visible; transform: none; }
@media (prefers-reduced-motion: reduce) { .fcx-info__pop { transition: none; transform: none; } }
/* keep the first step heading clear of the button (they share the top row on phones) */
.fcx-body > .fcx-col:first-child .fcx-step { padding-right: 40px; }

/* ── Step heading ── */
.fcx-step { display: grid; grid-template-columns: auto minmax(0,1fr); gap: 12px; align-items: start; margin-bottom: 22px; }
.fcx-step__no {
  width: 26px; height: 26px; border-radius: 50%; background: var(--g-dark); color: #fff;
  display: grid; place-items: center; font-size: .8rem; font-weight: 800; margin-top: 2px;
}
.fcx-step h3 { font-family: var(--font-heading); font-size: 1.12rem; font-weight: 800; color: var(--g-dark); letter-spacing: -.025em; line-height: 1.2; margin: 0 0 4px; }
.fcx-step p { font-size: .78rem; color: var(--grey-500); margin: 0; line-height: 1.45; }

/* ── Input rows ── */
.fcx-fields { display: flex; flex-direction: column; gap: 6px; }
.fcx-field { display: grid; grid-template-columns: 40px minmax(0,1fr) 118px; gap: 14px; align-items: start; padding: 10px 0; }
.fcx-field + .fcx-field { border-top: 1px solid #F1F4F2; }
.fcx-ico { width: 40px; height: 40px; border-radius: 12px; background: #EFF6F1; display: grid; place-items: center; margin-top: 4px; }
.fcx-ico svg { width: 20px; height: 20px; color: var(--g-main); stroke-width: 1.7; }
.fcx-field__main { min-width: 0; padding-top: 2px; }
.fcx-label { display: flex; align-items: center; flex-wrap: wrap; gap: 3px 5px; font-size: .8rem; font-weight: 700; color: var(--grey-700); margin-bottom: 10px; line-height: 1.3; }
.fcx-label em { font-style: normal; font-weight: 500; color: var(--grey-500); }
.fcx-label svg { width: 13px; height: 13px; color: #A3AFA7; stroke-width: 1.8; flex-shrink: 0; }
.fcx-hint { display: flex; align-items: flex-start; gap: 5px; font-size: .68rem; color: var(--grey-500); line-height: 1.45; margin-top: 8px; }
.fcx-hint svg { width: 12px; height: 12px; color: var(--g-main); stroke-width: 1.8; flex-shrink: 0; margin-top: 2px; }

.fcx-box {
  border: 1px solid #E3EBE6; border-radius: var(--radius-sm); background: var(--white);
  padding: 9px 10px; text-align: center; min-height: 46px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.fcx-box .calc-val {
  font-family: var(--font-heading); font-size: 1rem; font-weight: 800; color: var(--grey-800);
  letter-spacing: -.02em; cursor: pointer; border-radius: 6px; padding: 1px 4px;
  transition: background .18s, color .18s;
}
.fcx-box .calc-val:hover { background: #EFF6F1; color: var(--g-dark); }
.fcx-box .calc-val-input {
  font-family: var(--font-heading); font-size: 1rem; font-weight: 800; color: var(--g-dark);
  background: #EFF6F1; border: 1.5px solid var(--g-main); border-radius: 6px;
  padding: 1px 4px; width: 92px; text-align: center; outline: none;
  box-shadow: 0 0 0 3px rgba(26,107,60,.13);
}
.fcx-box__sub { font-size: .68rem; font-weight: 500; color: var(--grey-500); margin-top: 3px; }
.fcx-box__per { font-size: .72rem; font-weight: 600; color: var(--grey-500); margin-left: 3px; }

input[type=range] {
  width: 100%; accent-color: var(--g-main);
  cursor: pointer; height: 5px; background: transparent;
}
input[type=range]:focus-visible { outline: 2px solid var(--g-main); outline-offset: 4px; }

/* ── Plan selector ── */
.fcx-plans { margin-top: 16px; border: 1px solid #E3EBE6; border-radius: var(--radius); overflow: hidden; }
.fcx-plans__lbl {
  background: #EFF6F1; border-bottom: 1px solid #E3EBE6;
  padding: 7px 14px; font-size: .7rem; font-weight: 700; color: var(--g-dark); letter-spacing: -.01em;
}
.plan-pills { display: grid; grid-template-columns: repeat(4,1fr); gap: 8px; padding: 10px; }
.plan-pill {
  position: relative; display: grid; grid-template-columns: auto minmax(0,1fr);
  gap: 7px; align-items: center; text-align: left;
  padding: 9px; border: 1px solid #E3EBE6; background: var(--white);
  border-radius: var(--radius-sm); cursor: pointer; font-family: var(--font);
  transition: border-color .2s, background .2s, box-shadow .2s, transform .2s;
}
.pp-ico { width: 21px; height: 21px; flex-shrink: 0; color: var(--g-main); }
.pp-ico svg { width: 100%; height: 100%; display: block; }
.pp-txt { min-width: 0; }
.plan-pill:hover { border-color: rgba(26,107,60,.4); transform: translateY(-1px); }
.plan-pill.active {
  background: var(--g-dark);
  border-color: var(--g-dark); box-shadow: none;
}
.plan-pill.active::after {
  content: "✓"; position: absolute; top: 4px; right: 6px;
  font-size: .62rem; font-weight: 800; color: #fff; opacity: .85;
}
.plan-pill.active .pp-name, .plan-pill.active .pp-amt, .plan-pill.active .pp-per { color: #fff; }
.plan-pill.active .pp-per { color: rgba(255,255,255,.75); }
.plan-pill.active .pp-ico { color: #fff; }
.plan-pill.active .pp-name { padding-right: 13px; }
.pp-name { display: block; font-size: .55rem; font-weight: 600; color: var(--grey-500); line-height: 1.22; margin-bottom: 2px; min-height: 2.44em; }
.pp-amt { display: block; font-family: var(--font-heading); font-size: .92rem; font-weight: 800; color: var(--g-dark); letter-spacing: -.02em; }
.pp-per { font-size: .66rem; font-weight: 600; color: var(--grey-400); margin-left: 2px; }

/* ── Results ── */
.fcx-total {
  position: relative; overflow: hidden;
  background: var(--white);
  border: 1px solid #E3EBE6; border-radius: var(--radius);
  /* --fcx-art-pr clears the art, pulling the centred text left of centre the way
     the reference does (text centres at ~37% of the box, not 50%). It's a custom
     property because the viewport-fit media queries below re-set the padding
     shorthand — writing a bare padding-right here would be silently wiped. */
  --fcx-art-pr: 140px;
  padding: 18px var(--fcx-art-pr) 18px 20px;
  text-align: center; margin-bottom: 18px;
}
.fcx-total__lbl { font-size: .84rem; font-weight: 600; color: var(--grey-600); margin-bottom: 6px; }
.fcx-total__val { font-family: var(--font-heading); font-size: clamp(2rem, 3vw, 2.5rem); font-weight: 800; color: var(--g-main); letter-spacing: -.035em; line-height: 1.05; }
/* Sized off the box height (width follows the 198:78 viewBox ratio) so the
   arrow keeps its headroom whatever the viewport-fit rules do to the padding. */
.fcx-total__art { position: absolute; right: 0; bottom: 0; height: calc(100% - 14px); width: auto; pointer-events: none; }
@media (max-width: 600px) {
  .fcx-total { --fcx-art-pr: 104px; }
  .fcx-total__art { height: calc(100% - 10px); }
}

.fcx-divider { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; }
.fcx-divider::before, .fcx-divider::after { content: ""; flex: 1; height: 1px; background: #E7EDE9; }
.fcx-divider span { font-family: var(--font-heading); font-size: .88rem; font-weight: 700; color: var(--grey-700); letter-spacing: -.02em; white-space: nowrap; }

.fcx-rows { display: flex; flex-direction: column; gap: 12px; margin-bottom: 16px; }
.fcx-res {
  display: grid; grid-template-columns: 44px minmax(0,1fr) auto; gap: 14px; align-items: center;
  padding: 15px 18px; border-radius: var(--radius); border: 1px solid #E7EDE9; background: var(--white);
  transition: transform .25s cubic-bezier(.4,0,.2,1), box-shadow .25s;
}
.fcx-res:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(13,61,34,.07); }
.fcx-res__ico { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; }
.fcx-res__ico svg { width: 21px; height: 21px; stroke-width: 1.8; }
.fcx-res__name { font-size: .92rem; font-weight: 700; color: var(--grey-800); letter-spacing: -.015em; line-height: 1.3; }
.fcx-res__sub { font-size: .72rem; color: var(--grey-500); line-height: 1.45; margin-top: 3px; }
.fcx-res__val { font-family: var(--font-heading); font-size: 1.4rem; font-weight: 800; letter-spacing: -.03em; text-align: right; white-space: nowrap; }
.fcx-res__valsub { display: block; font-family: var(--font); font-size: .72rem; font-weight: 600; color: var(--grey-500); margin-top: 2px; }

.fcx-res--ew { background: #F4FAF6; border-color: #DDEEE3; }
.fcx-res--ew .fcx-res__ico { background: #E2F1E8; }
.fcx-res--ew .fcx-res__ico svg { color: var(--g-main); }
.fcx-res--ew .fcx-res__val { color: var(--g-dark); }

.fcx-res--mf { background: #FEF5F5; border-color: #F7DDDD; }
.fcx-res--mf .fcx-res__ico { background: #FBE3E3; }
.fcx-res--mf .fcx-res__ico svg { color: #D14343; }
.fcx-res--mf .fcx-res__name { color: #C0392B; }
.fcx-res--mf .fcx-res__val { color: #D14343; }

.fcx-res--save { background: #FFFBF0; border-color: #F3E6C7; }
.fcx-res--save .fcx-res__ico { background: #FCEFD2; }
.fcx-res--save .fcx-res__ico svg { color: #C68A18; }
.fcx-res--save .fcx-res__val { color: var(--g-dark); }

.fcx-cta {
  margin-top: auto; width: 100%; border: 0; cursor: pointer;
  background: var(--g-dark); color: #fff; font-family: var(--font);
  font-size: 1rem; font-weight: 700; padding: 17px 20px; border-radius: 12px;
  text-decoration: none; display: flex; align-items: center; justify-content: center; gap: 10px;
  box-shadow: 0 6px 18px rgba(20,83,45,.22); transition: background .25s, transform .25s;
}
.fcx-cta svg { width: 17px; height: 17px; stroke-width: 2.4; transition: transform .25s; }
.fcx-cta:hover { background: var(--g-deep); transform: translateY(-1px); color: #fff; }
.fcx-cta:hover svg { transform: translateX(4px); }

/* ── Footnote strip ── */
.fcx-foot {
  display: grid; grid-template-columns: 1fr 1fr; gap: 20px;
  padding: 16px clamp(20px, 2.2vw, 28px);
  background: #F8FAF9; border-top: 1px solid #EDF1EE;
}
.fcx-foot > div { display: grid; grid-template-columns: auto minmax(0,1fr); gap: 12px; align-items: center; }
.fcx-foot svg { width: 26px; height: 26px; color: var(--g-main); stroke-width: 1.6; }
.fcx-foot p { font-size: .74rem; color: var(--grey-500); line-height: 1.5; margin: 0; }
.fcx-foot strong { color: var(--grey-700); font-weight: 600; }

@media (max-width: 1180px) {
  .fcx-art { display: none; }
  .ew-flow--calc-b, .ew-flow--phil, .ew-flow--trust { display: none; }
}
@media (max-width: 900px) {
  .fcx-body { grid-template-columns: 1fr; }
  .fcx-col + .fcx-col { border-left: 0; border-top: 1px solid #EDF1EE; }
  .plan-pills { grid-template-columns: repeat(2,1fr); }
  .fcx-foot { grid-template-columns: 1fr; gap: 14px; }
}
@media (max-width: 560px) {
  .fcx-field { grid-template-columns: minmax(0,1fr) 104px; gap: 12px; }
  .fcx-ico { display: none; }
  .fcx-res { grid-template-columns: 40px minmax(0,1fr); row-gap: 8px; }
  .fcx-res__ico { width: 40px; height: 40px; }
  .fcx-res__val { grid-column: 1 / -1; text-align: left; }
}

/* ═════════════════════════════════════
   4. WHY EQUITY WALLET
═════════════════════════════════════ */
.features-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 22px; }
.feat-card {
  background: var(--white); border-radius: var(--radius);
  border: 1px solid var(--grey-100); padding: 32px;
  position: relative; overflow: hidden;
  transition: all 0.28s ease; box-shadow: var(--shadow-xs);
}
.feat-card::after { content:''; position:absolute; top:0; left:0; right:0; height:3px; background:linear-gradient(90deg,var(--g-main),var(--g-soft)); transform:scaleX(0); transform-origin:left; transition:transform 0.3s; }
.feat-card:hover { transform:translateY(-5px); box-shadow:var(--shadow-md); }
.feat-card:hover::after { transform:scaleX(1); }
.feat-icon { width:48px; height:48px; background:var(--g-bg); border-radius: var(--radius-sm); display:flex; align-items:center; justify-content:center; font-size:1.4rem; margin-bottom:20px; }
.feat-card h3 { margin-bottom:10px; font-size:1.1rem; }
@media (max-width: 960px) { .features-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 580px) { .features-grid { grid-template-columns: 1fr; } }

/* ═════════════════════════════════════
   5. INVESTMENT PHILOSOPHY
═════════════════════════════════════ */
/* ════ INVESTMENT PHILOSOPHY — light v2 ════ */
.philosophy-section {
  background: var(--white);
  padding: clamp(56px, 6vw, 92px) 0;
  position: relative;
  overflow: hidden;
}
.philosophy-section > .container { position: relative; z-index: 1; }

.philosophy-section .section-hd { margin-bottom: clamp(28px, 3.2vw, 44px); max-width: 780px; }
.philosophy-section .eyebrow {
  display: inline-flex; align-items: center; gap: 14px;
  font-size: .78rem; font-weight: 700; letter-spacing: .19em;
  color: var(--g-main); margin-bottom: 14px;
}
.philosophy-section .eyebrow::before,
.philosophy-section .eyebrow::after {
  content: ''; display: block; width: 46px; height: 1.5px;
  background: linear-gradient(90deg, transparent, rgba(26,107,60,.45));
}
.philosophy-section .eyebrow::after { transform: scaleX(-1); }
.philosophy-section .section-hd h2 {
  color: var(--black);
  font-size: clamp(2rem, 3.6vw, 2.9rem);
  font-weight: 800; letter-spacing: -.028em; line-height: 1.12;
  margin-bottom: 16px;
}
.philosophy-section .section-hd h2 .phil-hl { color: var(--g-mid); }
.philosophy-section .section-hd p {
  color: var(--grey-500); font-size: 1.05rem; line-height: 1.7;
  max-width: 700px; margin: 0 auto;
}

/* ── 3 Principles: icon beside a title and one line of copy ── */
.phil-principles-row {
  display: grid; grid-template-columns: repeat(3,1fr);
  gap: 16px; margin-bottom: clamp(16px, 2.2vw, 24px);
  position: relative; z-index: 1;
}
.phil-principle {
  background: var(--white); border: 1px solid #E3EBE6; border-radius: var(--radius-lg);
  padding: 20px 22px; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 14px; align-items: start;
  opacity: 0; transform: translateY(20px);
  animation: philFadeUp 0.7s cubic-bezier(.22,1,.36,1) forwards;
  transition: border-color .3s;
}
.phil-principle:nth-child(1) { animation-delay: 0.08s; }
.phil-principle:nth-child(2) { animation-delay: 0.20s; }
.phil-principle:nth-child(3) { animation-delay: 0.32s; }
@keyframes philFadeUp { to { opacity: 1; transform: translateY(0); } }
.phil-principle:hover { border-color: rgba(46,139,87,.38); }
.phil-principle__icon {
  width: 44px; height: 44px; border-radius: 50%; background: #EAF3EC;
  display: grid; place-items: center;
}
.phil-principle__icon svg { width: 22px; height: 22px; color: var(--g-mid); stroke-width: 1.7; display: block; }
.phil-principle h4 {
  color: var(--black); font-size: 1.02rem; font-weight: 700;
  line-height: 1.3; margin: 2px 0 4px; letter-spacing: -.012em;
}
.phil-principle p { color: var(--grey-500); font-size: .86rem; line-height: 1.55; margin: 0; }

/* ── "What We Invest In" panel ── */
.phil-invest {
  background: #F2F8F4; border: 1px solid #E1EDE5; border-radius: var(--radius-lg);
  padding: clamp(16px, 2vw, 24px); position: relative; z-index: 1;
}
.phil-invest__main { display: flex; align-items: center; gap: 12px 16px; flex-wrap: wrap; }
.phil-invest__head { min-width: 0; }
.phil-invest__badge {
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--white); border: 1px solid #D8E9DF;
  display: grid; place-items: center; flex-shrink: 0;
}
.phil-invest__badge svg { width: 22px; height: 22px; color: var(--g-mid); stroke-width: 1.7; }
.phil-invest__title {
  font-family: var(--font-heading); font-size: 1.2rem; font-weight: 700;
  color: var(--black); letter-spacing: -.015em;
}
.phil-invest__desc { color: var(--grey-500); font-size: .9rem; line-height: 1.5; margin: 0; }

/* ── 5 criteria: icon + title; hover / tap flips to the one-line reason ── */
.phil-criteria-row {
  display: grid; grid-template-columns: repeat(5,1fr);
  gap: 12px; position: relative; z-index: 1; margin-top: clamp(14px, 1.8vw, 20px);
}
.phil-criterion {
  background: var(--white); border: 1px solid #E3EBE6; border-radius: var(--radius-lg);
  padding: 16px 14px; min-height: 124px; text-align: center;
  opacity: 0; transform: translateY(16px);
  animation: philFadeUp 0.6s cubic-bezier(.22,1,.36,1) forwards;
}
.phil-criterion:nth-child(1) { animation-delay: 0.40s; }
.phil-criterion:nth-child(2) { animation-delay: 0.50s; }
.phil-criterion:nth-child(3) { animation-delay: 0.60s; }
.phil-criterion:nth-child(4) { animation-delay: 0.70s; }
.phil-criterion:nth-child(5) { animation-delay: 0.80s; }
.phil-criterion { position: relative; }
/* small "+" so it's discoverable that the tile turns over (turns into × when open) */
.phil-criterion::after {
  content: "+"; position: absolute; top: 6px; right: 9px;
  font-size: 1rem; font-weight: 500; line-height: 1; color: #A3AFA7;
  transition: transform .25s, color .25s;
}
.phil-criterion:hover::after, .phil-criterion[aria-expanded="true"]::after { transform: rotate(45deg); color: var(--g-mid); }
.phil-criterion .ewf-front { align-items: center; justify-content: center; gap: 10px; }
.phil-criterion .ewf-back { align-items: center; justify-content: center; }
.phil-criterion__icon-wrap { width: 36px; height: 36px; display: grid; place-items: center; }
.phil-criterion__icon-wrap svg { width: 28px; height: 28px; color: var(--g-mid); stroke-width: 1.6; }
.phil-criterion__title { color: var(--black); font-size: .92rem; font-weight: 700; line-height: 1.3; letter-spacing: -.01em; }
.phil-criterion__desc { color: var(--grey-700); font-size: .86rem; font-weight: 500; line-height: 1.5; }

/* ── Shared flip tile (.ewf): front shows by default; hover on pointer devices,
   or aria-expanded (tap / click / Enter), crossfades to the back. Both faces
   share one grid cell, so the tile never changes size. ── */
.ewf { display: grid; font: inherit; color: inherit; cursor: pointer; transition: background .25s, border-color .25s; }
.ewf:focus-visible { outline: 2px solid var(--g-mid); outline-offset: 2px; }
.ewf:hover, .ewf[aria-expanded="true"] { background: #F7FBF8; border-color: #CFE0D5; }
.ewf-face { grid-area: 1 / 1; display: flex; flex-direction: column; transition: opacity .28s ease, transform .28s ease; }
.ewf-back { opacity: 0; transform: translateY(6px); }
.ewf[aria-expanded="true"] .ewf-front { opacity: 0; transform: translateY(-6px); }
.ewf[aria-expanded="true"] .ewf-back { opacity: 1; transform: none; }
@media (hover: hover) {
  .ewf:hover .ewf-front { opacity: 0; transform: translateY(-6px); }
  .ewf:hover .ewf-back { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) { .ewf-face { transition: none; transform: none !important; } }

@media (max-width: 1024px) {
  .phil-principles-row { grid-template-columns: 1fr; gap: 10px; }
  .phil-criteria-row { grid-template-columns: repeat(3,1fr); }
}
@media (max-width: 560px) {
  .phil-principle { padding: 16px; }
  .phil-criteria-row { grid-template-columns: repeat(2,1fr); gap: 10px; }
  .phil-criterion { min-height: 104px; padding: 12px 10px; }
  .phil-criterion:last-child { grid-column: 1 / -1; }
  .philosophy-section .eyebrow { font-size: .7rem; letter-spacing: .13em; gap: 9px; }
  .philosophy-section .eyebrow::before,
  .philosophy-section .eyebrow::after { width: 22px; }
}

@keyframes badgeDrop {
  from { opacity: 0; transform: translateY(-12px) scale(0.8); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.risk-badge { display: inline-block; padding: 4px 10px; border-radius: var(--radius-pill); font-size: 0.7rem; font-weight: 700; }
.risk-badge.high   { background: #fee2e2; color: var(--red); }
.risk-badge.mod    { background: #d1fae5; color: #059669; }
.risk-badge.low    { background: #dbeafe; color: var(--g-main); }
.risk-badge.lowmod { background: #fef3c7; color: var(--amber); }
.bm-val.dark { color: var(--black); }
.basket-btn.green { background: var(--g-main); }
.basket-btn.green:hover { background: linear-gradient(135deg, var(--g-deep) 0%, #14532D 100%); }

/* SEBI Regulatory Disclosure Panel */
.basket-disclaimer {
  display: flex;
  gap: 18px;
  margin-top: 36px;
  padding: 22px 26px;
  background: var(--white);
  border: 1px solid rgba(26,107,60,0.18);
  border-left: 4px solid var(--g-main);
  border-radius: var(--radius);
  box-shadow: 0 4px 18px rgba(26,60,46,0.06), inset 0 1px 0 rgba(255,255,255,0.9);
}
.bd-icon {
  flex-shrink: 0;
  width: 40px; height: 40px;
  border-radius: var(--radius-sm);
  background: var(--g-main);
  color: white;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 12px rgba(26,107,60,0.25);
}
.bd-content { flex: 1; }
.bd-title {
  font-family: var(--font-heading);
  font-size: 0.98rem; font-weight: 800;
  color: var(--g-dark);
  margin-bottom: 8px;
  letter-spacing: -0.01em;
}
.bd-content p {
  font-size: 0.84rem;
  color: var(--grey-600);
  line-height: 1.6;
  margin: 0 0 8px;
}
.bd-content p:last-child { margin-bottom: 0; }
.bd-content strong { color: var(--g-dark); font-weight: 700; }
.bd-warning {
  margin-top: 10px !important;
  padding: 10px 12px;
  background: rgba(185,28,28,0.05);
  border: 1px solid rgba(185,28,28,0.15);
  border-radius: var(--radius-sm);
  font-size: 0.78rem !important;
  color: #7f1d1d !important;
  line-height: 1.5 !important;
}
.bd-warning strong { color: #7f1d1d; }
.bd-regn {
  margin-top: 10px !important;
  padding-top: 10px;
  border-top: 1px dashed rgba(26,107,60,0.18);
  font-size: 0.76rem !important;
  color: var(--grey-400) !important;
  font-weight: 500;
}
@media (max-width: 620px) {
  .basket-disclaimer { flex-direction: column; padding: 18px 20px; }
}

/* Calculator compliance note */
.calc-compliance-note {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 20px;
  padding: 18px 210px 18px 24px;
  background: #FEF6F6;
  border: 1px solid #F6DFDF;
  border-radius: var(--radius-lg);
  font-size: 0.78rem;
  color: var(--grey-600);
  line-height: 1.6;
}
.calc-compliance-note svg {
  color: #D14343;
  flex-shrink: 0;
}
.calc-compliance-note strong { color: var(--grey-800); }
/* Trimmed calculator: hints live in ⓘ tooltips, the "(₹10.00L)" echoes are hidden
   (calcUpdate still writes them), foot is one line. */
.fcx-tip { display: inline-flex; cursor: help; }
.fcx-box__sub { display: none; }
.fcx-plans__lbl em { font-style: normal; font-weight: 500; color: var(--grey-500); }
.fcx-step { align-items: center; }
.fcx-step h3 { margin: 0; }
/* method note + the illustrative-calculator disclaimer share one foot row (was a separate box below the card) */
.fcx-foot { grid-template-columns: minmax(0, 1fr) minmax(0, 1.7fr) !important; align-items: center; }
.fcx-foot__legal { font-size: .7rem; line-height: 1.5; color: var(--grey-500); margin: 0; padding-left: 20px; border-left: 1px solid #E3EBE6; }
.fcx-foot__legal strong { color: var(--grey-700); font-weight: 600; }
@media (max-width: 860px) {
  .fcx-foot { grid-template-columns: 1fr !important; }
  .fcx-foot__legal { padding: 12px 0 0; border-left: 0; border-top: 1px solid #E3EBE6; }
}
@media (max-width: 600px) {
  .fcx-total__art { display: none; }   /* overlapped the total on narrow screens */
  .fcx-col { padding: 16px; }
  .fcx-step { margin-bottom: 10px; }
  .fcx-field { padding: 6px 0; }
  .fcx-label { margin-bottom: 6px; }
  .fcx-total { padding: 14px 16px !important; margin-bottom: 10px; }
  .fcx-rows { gap: 8px; margin-bottom: 12px; }
  .fcx-res { padding: 10px 12px; grid-template-columns: 34px minmax(0,1fr) auto; column-gap: 10px; }
  .fcx-res__ico { width: 34px; height: 34px; }
  .fcx-res__val { grid-column: auto; text-align: right; font-size: 1.05rem; }
  .fcx-res__name { font-size: .82rem; }
  .fcx-foot { padding: 12px 16px; }
  .calc-compliance-note { padding: 14px 16px; font-size: .72rem; }
}

.ccn-art { position: absolute; right: 20px; bottom: -2px; width: 172px; height: auto; pointer-events: none; user-select: none; }
@media (max-width: 860px) {
  .ccn-art { display: none; }
  .calc-compliance-note { padding-right: 24px; }
}

/* ═════════════════════════════════════
   7. HOW IT WORKS
═════════════════════════════════════ */
/* ═══════════════════════════════════════════
   HOW IT WORKS — New UI
═══════════════════════════════════════════ */
.section--how { background: #F5F9F6; }

.how-hd { text-align: center; margin-bottom: 24px; }
.how-hd .eyebrow {
  font-size: .72rem; font-weight: 700; letter-spacing: .22em;
  text-transform: uppercase; color: var(--g-main); display: block; margin-bottom: 10px;
}
.how-hd h2 {
  font-family: var(--font-heading);
  font-size: clamp(1.6rem, 2.8vw, 2.2rem);
  font-weight: 800; color: var(--g-dark);
  margin-bottom: 10px; line-height: 1.1;
}
.how-hd p { font-size: .95rem; color: #4a6b54; line-height: 1.6; max-width: 620px; margin: 0 auto; }

/* 4-card row */
.how-cards-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  margin-bottom: 20px;
  position: relative;
}
/* Dashed rail threading the four step badges, so the row reads as one sequence
   rather than four unrelated cards. Sits behind them and stops short of the
   first and last badge centres. */
.how-cards-row::before {
  content: ""; position: absolute; z-index: 0;
  top: 28px; left: 12.5%; right: 12.5%;
  border-top: 2px dashed rgba(46,125,50,.18);
  pointer-events: none;
}
@media (max-width: 900px) { .how-cards-row::before { display: none; } }
.how-card-v2 {
  background: var(--white);
  border-radius: var(--radius);
  border: 1px solid rgba(46,125,50,0.1);
  padding: 18px 18px 16px;
  box-shadow:
    0 1px 2px rgba(26,60,46,.04),
    0 4px 14px rgba(26,60,46,.05),
    inset 0 1px 0 rgba(255,255,255,0.9);
  position: relative;
  overflow: hidden;
  transition: transform .38s cubic-bezier(.22,1,.36,1),
              box-shadow .38s,
              border-color .38s;
  opacity: 0; transform: translateY(20px);
  animation: howCardIn .7s cubic-bezier(.22,1,.36,1) forwards;
}
.how-card-v2:nth-child(1) { animation-delay: .08s; }
.how-card-v2:nth-child(2) { animation-delay: .18s; }
.how-card-v2:nth-child(3) { animation-delay: .28s; }
.how-card-v2:nth-child(4) { animation-delay: .38s; }
@keyframes howCardIn { to { opacity: 1; transform: translateY(0); } }

/* Top accent bar — reveals on hover */
.how-card-v2::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--g-main), #4CAF78, #6ee7a0);
  transform: scaleX(0); transform-origin: left;
  transition: transform .5s cubic-bezier(.22,1,.36,1);
}
.how-card-v2:hover::before { transform: scaleX(1); }

/* Corner glow on hover */
.how-card-v2::after {
  content: ''; position: absolute; top: -50px; right: -50px;
  width: 140px; height: 140px; border-radius: 50%;
  background: radial-gradient(circle, rgba(110,231,160,0.22), transparent 70%);
  opacity: 0; transition: opacity .4s;
  pointer-events: none;
}
.how-card-v2:hover::after { opacity: 1; }

.how-card-v2:hover {
  transform: translateY(-6px);
  border-color: rgba(46,125,50,0.22);
  box-shadow:
    0 2px 4px rgba(26,60,46,.04),
    0 16px 40px rgba(26,60,46,.12),
    inset 0 1px 0 rgba(255,255,255,0.95);
}

.hcv2-num {
  position: absolute; top: 14px; left: 14px;
  width: 28px; height: 28px;
  background: linear-gradient(135deg, #4CAF78, var(--g-main));
  color: #fff;
  border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-size: .78rem; font-weight: 800; font-family: var(--font-heading); flex-shrink: 0;
  letter-spacing: -0.01em;
  box-shadow: 0 0 0 3px rgba(46,125,50,0.08), 0 3px 10px rgba(46,125,50,0.25);
  transition: transform .38s cubic-bezier(.34,1.56,.64,1),
              box-shadow .38s;
  z-index: 1;
}
.how-card-v2:hover .hcv2-num {
  transform: scale(1.12) rotate(-6deg);
  box-shadow: 0 0 0 4px rgba(46,125,50,0.16), 0 5px 14px rgba(46,125,50,0.35);
}

.hcv2-icon svg { width: 19px; height: 19px; color: var(--g-main); }
/* Paired with the number on the same row rather than stacked under it — the
   stack left the card's whole top-right corner empty. */
.hcv2-icon {
  position: absolute; top: 13px; right: 14px;
  width: 34px; height: 34px; border-radius: 10px;
  display: grid; place-items: center;
  background: #EEF6F1; border: 1px solid rgba(46,125,50,.09);
  transition: transform .4s cubic-bezier(.34,1.56,.64,1), background .3s;
  z-index: 1;
}
.how-card-v2:hover .hcv2-icon {
  transform: scale(1.1) rotate(-4deg);
  background: #E4F1EA;
}

.hcv2-title {
  font-family: var(--font-heading); font-size: 1rem; font-weight: 800;
  color: var(--g-dark); margin: 32px 0 4px; line-height: 1.3;
  letter-spacing: -0.01em;
  position: relative; z-index: 1;
}
.hcv2-body {
  font-size: .82rem; color: #5a7a65;
  line-height: 1.58; margin: 0;
  position: relative; z-index: 1;
}

/* Step 5 dark green banner */
.how-step5 {
  background: linear-gradient(135deg, #0f2a1e 0%, var(--g-dark) 40%, #2E5E3E 100%);
  border-radius: var(--radius-lg); padding: 26px 40px;
  display: grid; grid-template-columns: 1fr auto;
  gap: 40px; align-items: center;
  position: relative; overflow: hidden;
  box-shadow:
    0 8px 24px rgba(26,60,46,.16),
    0 24px 64px rgba(26,60,46,.2),
    inset 0 1px 0 rgba(255,255,255,0.08);
  opacity: 0; transform: translateY(20px);
  animation: howCardIn .8s .5s cubic-bezier(.22,1,.36,1) forwards;
}

/* Dot grid texture */
.how-step5::before {
  content: ''; position: absolute; inset: 0;
  background-image: radial-gradient(circle, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: 28px 28px; pointer-events: none;
}

/* Ambient mint glow */
.how-step5::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 40% 70% at 0% 100%, rgba(78,222,138,0.15), transparent 60%),
    radial-gradient(ellipse 35% 60% at 100% 0%, rgba(110,231,160,0.1), transparent 60%);
  animation: step5Pulse 6s ease-in-out infinite alternate;
}
@keyframes step5Pulse {
  0%   { opacity: 0.7; transform: scale(1); }
  100% { opacity: 1;   transform: scale(1.05); }
}

.step5-badge {
  display: inline-flex; align-items: center;
  background: rgba(78,222,138,0.12);
  border: 1px solid rgba(78,222,138,.38); color: #6ee7a0;
  border-radius: var(--radius-pill); padding: 4px 13px;
  font-size: .68rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  margin-bottom: 10px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08);
}
.step5-left { position: relative; z-index: 1; }
.step5-left h3 {
  font-family: var(--font-heading); font-size: clamp(1.35rem, 2.3vw, 1.8rem);
  font-weight: 800; color: #fff; margin-bottom: 10px; line-height: 1.15;
  letter-spacing: -0.015em;
}
.step5-left p {
  font-size: .92rem; color: rgba(255,255,255,.76);
  line-height: 1.6; max-width: 580px; margin-bottom: 0;
}
.step5-bullets { display: flex; flex-wrap: wrap; gap: 14px; }
.step5-bullet {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: .78rem; font-weight: 600; color: rgba(255,255,255,.82);
}
.step5-bullet::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%;
  background: #6ee7a0;
  box-shadow: 0 0 8px rgba(78,222,138,0.6);
}

.step5-right {
  display: flex; flex-direction: column; gap: 10px;
  position: relative; z-index: 1; min-width: 260px;
}
.step5-pill {
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: var(--radius-sm); padding: 11px 16px;
  display: flex; align-items: center; gap: 12px;
  font-size: .85rem; font-weight: 600; color: #fff;
  position: relative; overflow: hidden;
  backdrop-filter: blur(6px);
  transition: transform .35s cubic-bezier(.22,1,.36,1),
              background .3s, border-color .3s;
  opacity: 0; transform: translateX(20px);
  animation: pillSlideIn .55s cubic-bezier(.22,1,.36,1) forwards;
}
.step5-pill:nth-child(1) { animation-delay: .75s; }
.step5-pill:nth-child(2) { animation-delay: .88s; }
.step5-pill:nth-child(3) { animation-delay: 1.01s; }
@keyframes pillSlideIn { to { opacity: 1; transform: translateX(0); } }

/* Shine sweep on hover */
.step5-pill::before {
  content: ''; position: absolute; top: 0; left: -60%;
  width: 50%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.12), transparent);
  transform: skewX(-18deg);
  transition: left .55s ease;
}
.step5-pill:hover::before { left: 140%; }

.step5-pill:hover {
  background: rgba(255,255,255,.12);
  border-color: rgba(78,222,138,0.35);
  transform: translateX(-3px);
}
.step5-pill-icon { font-size: 1.1rem; flex-shrink: 0; display: inline-flex; }
.step5-pill-icon svg { width: 15px; height: 15px; color: var(--g-accent); }

@media (max-width: 1024px) {
  .how-cards-row { grid-template-columns: repeat(2, 1fr); }
  .how-step5 { grid-template-columns: 1fr; gap: 18px; }
  .step5-right { min-width: unset; }
}
@media (max-width: 600px) {
  /* stay 2-up on phones: a single column made four short cards ~600px tall */
  .how-cards-row { gap: 10px; margin-bottom: 12px; }
  .how-card-v2 { padding: 14px 12px 12px; }
  .hcv2-num { top: 10px; left: 10px; }
  .hcv2-icon { top: 8px; right: 10px; width: 30px; height: 30px; }
  .hcv2-title { font-size: .92rem; margin-top: 30px; }
  .hcv2-body { font-size: .78rem; line-height: 1.5; }
  .how-step5 { padding: 22px 18px; }
  .step5-pill { padding: 9px 12px; font-size: .8rem; }
}

/* ═════════════════════════════════════
   8. SECURE AND REGULATED
═════════════════════════════════════ */
/* ══ PREMIUM TRUST SECTION v2 ══════════════════════════ */
.trust-v2 {
  display: grid;
  grid-template-columns: 380px 1fr;
  gap: 28px;
  margin-bottom: 32px;
}

/* Hero Registration Credential Card (left) */
.trust-cred {
  position: relative;
  border-radius: var(--radius-lg);
  padding: 0;               /* the gradient border frame went flat */
  background: var(--g-dark);
  overflow: hidden;
}
.trust-cred__inner {
  position: relative;
  background: var(--g-dark);
  border-radius: var(--radius-lg);
  padding: 26px 28px;
  color: white;
  height: 100%;
  overflow: hidden;
}
/* Subtle dot pattern */
.trust-cred__inner::before {
  content: '';
  position: absolute; inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23ffffff' fill-opacity='0.04'%3E%3Ccircle cx='20' cy='20' r='1'/%3E%3C/g%3E%3C/svg%3E");
  pointer-events: none;
}
.trust-cred__header {
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 18px;
  position: relative; z-index: 1;
}
.trust-cred__seal {
  width: 44px; height: 44px;
  border-radius: var(--radius);
  background: linear-gradient(135deg, #6ee7a0 0%, #2E8B57 100%);
  color: var(--g-deep);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 14px rgba(110,231,160,0.35), inset 0 1px 0 rgba(255,255,255,0.35);
}
.trust-cred__label {
  font-size: 0.72rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: 0.14em;
  color: #C6E8D4;
}
.trust-cred__num {
  font-family: var(--font-heading);
  font-size: 1.85rem; font-weight: 800;
  letter-spacing: 0.04em;
  margin-bottom: 10px;
  color: white;
  position: relative; z-index: 1;
  text-shadow: 0 2px 18px rgba(110,231,160,0.3);
}
.trust-cred__tagline {
  font-size: 0.85rem;
  color: rgba(255,255,255,0.82);
  line-height: 1.5;
  margin-bottom: 22px;
  position: relative; z-index: 1;
  padding-bottom: 18px;
  border-bottom: 1px dashed rgba(110,231,160,0.28);
}
.trust-cred__meta {
  display: flex; flex-direction: column; gap: 10px;
  position: relative; z-index: 1;
}
.tcm-row {
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: 0.88rem;
}
.tcm-k {
  color: rgba(255,255,255,0.62);
  font-weight: 600;
  letter-spacing: 0.02em;
}
.tcm-v {
  color: white; font-weight: 700;
  font-family: var(--font-heading);
}
.tcm-v--active { color: #6ee7a0; }
/* Trim pass: icon beside title on the value cards, tighter credential card,
   disclosure links as single-line titles (the six links themselves are unchanged). */
.trust-v2 { gap: 20px; margin-bottom: 20px; }
.trust-grid-v2 { gap: 12px; }
.trust-card-v2 { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto; align-content: center; column-gap: 12px; align-items: center; padding: 16px 18px; }
.trust-card-v2 .tcv2-icon { margin: 0; grid-row: span 2; align-self: start; }
.trust-card-v2 h3 { margin: 0 0 2px; }
.trust-cred__inner { padding: 22px 24px; }
.trust-cred__header { margin-bottom: 12px; }
.trust-cred__tagline { margin-bottom: 14px; padding-bottom: 12px; font-size: .8rem; }
.trust-cred__meta { gap: 7px; }
.trust-compliance { padding: 16px 20px; margin-bottom: 0; }
.tcomp-head { margin-bottom: 12px; padding-bottom: 10px; }
.tcomp-link { padding: 9px 12px; }
.tcl-icon { width: 32px; height: 32px; }
.tcl-title { margin-bottom: 0; }
.tcl-sub { display: none; }
@media (max-width: 900px) {
  .trust-cred__num { font-size: 1.6rem; }
}
@media (max-width: 560px) {
  .trust-grid-v2 { grid-template-columns: 1fr 1fr !important; gap: 10px; }
  .trust-card-v2 { grid-template-columns: 1fr; padding: 14px; }
  .trust-card-v2 .tcv2-icon { grid-row: auto; width: 34px; height: 34px; margin-bottom: 8px; }
  .trust-card-v2 h3 { font-size: .9rem; }
  .trust-card-v2 p { font-size: .76rem; }
  .tcomp-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 8px; }
  .tcomp-link { padding: 8px 10px; gap: 8px; min-width: 0; }   /* links ran past the right edge */
  .tcomp-head { flex-direction: column; gap: 4px; }
  .tcl-icon { width: 28px; height: 28px; }
  .tcl-title { font-size: .76rem; line-height: 1.3; }
  .trust-compliance { padding: 14px; }
}


/* Value prop grid (right) */
.trust-grid-v2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.trust-card-v2 {
  background: var(--white);
  border: 1px solid rgba(26,107,60,0.08);
  border-radius: var(--radius);
  padding: 20px 22px;
  box-shadow: 0 1px 2px rgba(26,60,46,0.04), inset 0 1px 0 rgba(255,255,255,0.9);
  transition: transform 0.32s cubic-bezier(.22,1,.36,1), box-shadow 0.32s, border-color 0.32s;
  position: relative;
}
.trust-card-v2:hover {
  transform: translateY(-3px);
  border-color: rgba(76,175,120,0.28);
  box-shadow: 0 12px 28px rgba(26,60,46,0.1);
}
.tcv2-icon {
  width: 40px; height: 40px;
  border-radius: var(--radius-sm);
  background: linear-gradient(135deg, #EEF5F0 0%, #C6E8D4 100%);
  color: var(--g-main);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 14px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.8);
}
.trust-card-v2 h3 {
  font-size: 0.98rem;
  font-weight: 800;
  color: var(--black);
  margin: 0 0 6px;
  letter-spacing: -0.01em;
}
.trust-card-v2 p {
  font-size: 0.82rem;
  color: var(--grey-500);
  line-height: 1.55;
  margin: 0;
}

/* Compliance links panel */
.trust-compliance {
  background: var(--white);
  border: 1px solid rgba(26,107,60,0.1);
  border-radius: var(--radius-lg);
  padding: 22px 26px;
  margin-bottom: 24px;
  box-shadow: 0 1px 3px rgba(26,60,46,0.04);
}
.tcomp-head {
  display: flex; align-items: baseline; justify-content: space-between;
  flex-wrap: wrap; gap: 8px;
  margin-bottom: 16px;
  padding-bottom: 14px;
  border-bottom: 1px dashed rgba(26,107,60,0.14);
}
.tcomp-eyebrow {
  font-size: 0.76rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: 0.12em;
  color: var(--g-main);
}
.tcomp-sub {
  font-size: 0.74rem;
  color: var(--grey-400);
  font-weight: 500;
}
.tcomp-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.tcomp-link {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px;
  border: 1px solid var(--grey-100);
  border-radius: var(--radius);
  background: var(--white);
  text-decoration: none;
  transition: transform 0.22s, border-color 0.22s, box-shadow 0.22s;
}
.tcomp-link:hover {
  transform: translateY(-2px);
  border-color: rgba(76,175,120,0.35);
  box-shadow: 0 6px 18px rgba(26,60,46,0.08);
}
.tcl-icon svg { width: 16px; height: 16px; color: var(--g-main); }
.tcl-icon {
  flex-shrink: 0;
  width: 36px; height: 36px;
  background: linear-gradient(135deg, #EEF5F0 0%, #C6E8D4 100%);
  border-radius: var(--radius-sm);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.05rem;
}
.tcl-title {
  font-size: 0.86rem;
  font-weight: 700;
  color: var(--black);
  margin-bottom: 2px;
}
.tcl-sub {
  font-size: 0.72rem;
  color: var(--grey-400);
  line-height: 1.3;
}

/* Four regulatory quick-facts strip */
.trust-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  background: var(--white);
  border: 1px solid rgba(26,107,60,0.1);
  border-radius: var(--radius);
  overflow: hidden;
  margin-bottom: 32px;
  box-shadow: 0 1px 3px rgba(26,60,46,0.04);
}
.ts-item {
  padding: 18px 22px;
  position: relative;
  text-align: left;
}
.ts-item + .ts-item::before {
  content: '';
  position: absolute;
  left: 0; top: 18%; bottom: 18%;
  width: 1px;
  background: linear-gradient(180deg, transparent, rgba(26,107,60,0.16), transparent);
}
.ts-k {
  font-size: 0.7rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: 0.11em;
  color: var(--g-main);
  margin-bottom: 6px;
}
.ts-v {
  font-family: var(--font-heading);
  font-size: 1.15rem; font-weight: 800;
  color: var(--g-dark);
  letter-spacing: -0.02em;
  line-height: 1.2;
  margin-bottom: 4px;
}
.ts-v span {
  font-weight: 600;
  font-size: 0.78rem;
  color: var(--grey-500);
  letter-spacing: 0;
}
.ts-note {
  font-size: 0.72rem;
  color: var(--grey-400);
  line-height: 1.4;
}

/* Legacy styles (keep working for other sections if referenced) */
.trust-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 22px; }
.trust-card { background: var(--white); border: 1px solid var(--grey-100); border-radius: var(--radius); padding: 20px; box-shadow: var(--shadow-xs); text-align: center; transition: all 0.28s ease; }
.trust-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.trust-card__icon { font-size: 2.1rem; margin-bottom: 16px; }
.trust-card h3 { margin-bottom: 10px; font-size: 1rem; }
.broker-chip {
  --bc-accent: #1A6B3C;
  --chip-index: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--white);
  border: 1px solid rgba(26,107,60,0.1);
  border-radius: var(--radius);
  padding: 10px 16px 10px 10px;
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--grey-700);
  box-shadow:
    0 1px 2px rgba(26,60,46,0.04),
    0 4px 12px rgba(26,60,46,0.06),
    inset 0 1px 0 rgba(255,255,255,0.9);
  position: relative;
  overflow: hidden;
  cursor: default;
  transform-style: preserve-3d;
  transition:
    transform 0.5s cubic-bezier(.34,1.56,.64,1),
    box-shadow 0.45s,
    border-color 0.45s;
  /* Entrance: scale + rotate + slide up, staggered */
  opacity: 0;
  animation:
    brokerIn 0.85s cubic-bezier(.34,1.56,.64,1) forwards,
    brokerFloat 4.2s ease-in-out infinite;
  animation-delay: calc(var(--chip-index, 0) * 0.08s), calc(0.9s + var(--chip-index, 0) * 0.15s);
}
.broker-chip:nth-child(1) { --chip-index: 1; }
.broker-chip:nth-child(2) { --chip-index: 2; }
.broker-chip:nth-child(3) { --chip-index: 3; }
.broker-chip:nth-child(4) { --chip-index: 4; }
.broker-chip:nth-child(5) { --chip-index: 5; }
.broker-chip:nth-child(6) { --chip-index: 6; }
.broker-chip:nth-child(7) { --chip-index: 7; }

/* Dramatic entrance: from far below, scaled down and rotated */
@keyframes brokerIn {
  0% {
    opacity: 0;
    transform: translateY(36px) scale(0.65) rotate(-8deg);
  }
  60% {
    opacity: 1;
    transform: translateY(-6px) scale(1.04) rotate(1.5deg);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1) rotate(0);
  }
}

/* Continuous gentle float — different amplitude per chip */
@keyframes brokerFloat {
  0%, 100% { transform: translateY(0) rotate(0); }
  50%      { transform: translateY(-4px) rotate(-0.6deg); }
}

/* Ambient auto-shine: sweeps across each chip in sequence */
.broker-chip::before {
  content: '';
  position: absolute;
  top: -50px; right: -50px;
  width: 110px; height: 110px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--bc-accent), transparent 70%);
  opacity: 0;
  transition: opacity 0.5s;
  pointer-events: none;
  z-index: 0;
}
.broker-chip::after {
  content: '';
  position: absolute;
  top: 0; left: -80%;
  width: 60%; height: 100%;
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.75) 50%, transparent 100%);
  transform: skewX(-22deg);
  pointer-events: none;
  z-index: 2;
  animation: brokerAutoShine 6s ease-in-out infinite;
  animation-delay: calc(2s + var(--chip-index, 0) * 0.4s);
}
@keyframes brokerAutoShine {
  0%   { left: -80%; }
  18%  { left: 140%; }
  100% { left: 140%; }
}

/* Dramatic hover: bigger lift, slight tilt, stronger glow */
.broker-chip:hover {
  animation-play-state: paused, paused;
  transform: translateY(-10px) scale(1.06) rotate(-1.5deg);
  border-color: var(--bc-accent);
  box-shadow:
    0 4px 8px rgba(26,60,46,0.06),
    0 24px 50px rgba(26,60,46,0.22),
    0 0 0 2px rgba(255,255,255,0.4) inset,
    inset 0 1px 0 rgba(255,255,255,1);
  z-index: 3;
}
.broker-chip:hover::before { opacity: 0.32; }
.broker-chip:hover::after {
  animation: brokerHoverShine 0.7s ease-out;
}
@keyframes brokerHoverShine {
  0%   { left: -80%; opacity: 0; }
  20%  { opacity: 1; }
  100% { left: 140%; opacity: 1; }
}

/* Logo gets a bounce on hover */
.broker-chip:hover .broker-chip__logo {
  animation: logoBounce 0.7s cubic-bezier(.34,1.56,.64,1);
}
.broker-chip:hover .broker-chip__logo img,
.broker-chip:hover .broker-chip__logo svg {
  transform: rotate(-10deg) scale(1.15);
}
@keyframes logoBounce {
  0%   { transform: scale(1) rotate(0); }
  35%  { transform: scale(1.22) rotate(-8deg); }
  70%  { transform: scale(0.94) rotate(4deg); }
  100% { transform: scale(1) rotate(0); }
}

/* Name text gets a subtle slide on hover */
.broker-chip__name {
  position: relative;
  z-index: 1;
  letter-spacing: 0.005em;
  transition: transform 0.35s cubic-bezier(.34,1.56,.64,1), color 0.3s;
}
.broker-chip:hover .broker-chip__name {
  transform: translateX(2px);
  color: var(--bc-accent);
}

.broker-chip__logo {
  flex-shrink: 0;
  width: 32px; height: 32px;
  border-radius: var(--radius-sm);
  overflow: hidden;
  box-shadow: 0 2px 6px rgba(0,0,0,0.14);
  position: relative;
  z-index: 1;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.5s cubic-bezier(.34,1.56,.64,1);
}
.broker-chip__logo img {
  width: 22px; height: 22px;
  object-fit: contain;
  display: block;
  transition: transform 0.5s cubic-bezier(.34,1.56,.64,1);
}
.broker-chip__logo svg {
  width: 100%; height: 100%;
  display: block;
  transition: transform 0.5s cubic-bezier(.34,1.56,.64,1);
}
.broker-chip__fallback {
  width: 100%; height: 100%;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  font-size: 1rem;
  font-family: system-ui, sans-serif;
  letter-spacing: -0.02em;
}
.broker-chip:hover .broker-chip__logo img,
.broker-chip:hover .broker-chip__logo svg {
  transform: rotate(-6deg) scale(1.08);
}

/* ── BROKER MODAL ── */
.broker-modal-overlay {
  position: fixed; inset: 0; z-index: 2000;
  background: rgba(13,13,10,0.85);
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  opacity: 0; visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}
.broker-modal-overlay.open { opacity: 1; visibility: visible; }
.broker-modal {
  background: var(--white);
  border-radius: var(--radius-xl, 28px);
  max-width: 780px; width: 100%;
  max-height: 85vh;
  display: flex; flex-direction: column;
  box-shadow: 0 40px 100px rgba(0,0,0,0.28), 0 0 0 1px rgba(26,107,60,0.08);
  transform: translateY(32px) scale(0.96);
  transition: transform 0.35s cubic-bezier(.34,1.56,.64,1);
  overflow: hidden;
}
.broker-modal-overlay.open .broker-modal { transform: translateY(0) scale(1); }
.broker-modal-header {
  padding: 32px 32px 0;
  display: flex; justify-content: space-between; align-items: flex-start;
  flex-shrink: 0;
}
.broker-modal-header-text {}
.broker-modal-title {
  font-family: var(--font-heading);
  font-size: 1.5rem; font-weight: 800;
  color: var(--black); letter-spacing: -0.02em;
  margin-bottom: 6px;
}
.broker-modal-sub {
  font-size: 0.88rem; color: var(--grey-500); font-weight: 500;
  display: flex; align-items: center; gap: 8px;
}
.broker-modal-sub .sc-badge {
  display: inline-flex; align-items: center; gap: 5px;
  background: rgba(26,107,60,0.08); color: var(--g-main);
  border-radius: var(--radius-pill); padding: 3px 10px;
  font-size: 0.78rem; font-weight: 700;
}
.broker-modal-close {
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--grey-100); border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  color: var(--grey-600); flex-shrink: 0; margin-top: 4px;
  transition: background 0.2s, color 0.2s;
}
.broker-modal-close:hover { background: var(--grey-200); color: var(--black); }
.broker-modal-divider { height: 1px; background: var(--grey-100); margin: 24px 32px 0; flex-shrink: 0; }
.broker-modal-body {
  overflow-y: auto; padding: 24px 32px 32px;
  flex: 1;
  scrollbar-width: thin;
  scrollbar-color: var(--grey-200) transparent;
}
.broker-modal-body::-webkit-scrollbar { width: 6px; }
.broker-modal-body::-webkit-scrollbar-track { background: transparent; }
.broker-modal-body::-webkit-scrollbar-thumb { background: var(--grey-200); border-radius: 3px; }
.broker-modal-section-label {
  font-size: 0.72rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.1em; color: var(--grey-400); margin-bottom: 16px;
}
.broker-modal-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 12px;
  margin-bottom: 32px;
}
.bm-card {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  padding: 20px 12px 16px;
  background: var(--white);
  border: 1px solid var(--grey-100);
  border-radius: var(--radius);
  cursor: default;
  transition: all 0.22s;
  position: relative; overflow: hidden;
}
.bm-card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: var(--bm-accent, #1A6B3C);
  opacity: 0; transition: opacity 0.2s;
}
.bm-card:hover { transform: translateY(-3px); box-shadow: 0 8px 24px rgba(26,60,46,0.10); border-color: rgba(26,107,60,0.2); }
.bm-card:hover::before { opacity: 1; }
.bm-logo-wrap {
  width: 52px; height: 52px; border-radius: 12px;
  background: var(--grey-50); border: 1px solid var(--grey-100);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden; flex-shrink: 0;
}
.bm-logo-wrap img { width: 40px; height: 40px; object-fit: contain; }
.bm-name { font-family: var(--font-heading); font-size: 0.82rem; font-weight: 700; color: var(--grey-700); text-align: center; line-height: 1.2; }
.bm-partner {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 0.68rem; font-weight: 600; color: var(--g-main);
  background: rgba(26,107,60,0.07); padding: 2px 8px;
  border-radius: var(--radius-pill);
}
.broker-modal-footer {
  border-top: 1px solid var(--grey-100);
  padding: 16px 32px;
  flex-shrink: 0;
  background: var(--grey-50);
  font-size: 0.72rem; color: var(--grey-400); line-height: 1.5;
  text-align: center;
}
@media (max-width: 600px) {
  .broker-modal { border-radius: 20px 20px 0 0; max-height: 90vh; }
  .broker-modal-header, .broker-modal-body, .broker-modal-footer { padding-left: 20px; padding-right: 20px; }
  .broker-modal-divider { margin-left: 20px; margin-right: 20px; }
  .broker-modal-grid { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); }
  .broker-modal-overlay { padding: 0; align-items: flex-end; }
}

@media (max-width: 960px) {
  .trust-v2 { grid-template-columns: 1fr; }
  .trust-grid-v2 { grid-template-columns: 1fr 1fr; }
  .tcomp-grid { grid-template-columns: 1fr 1fr; }
  .trust-strip { grid-template-columns: 1fr 1fr; }
  .ts-item + .ts-item:nth-child(3)::before { display: none; }
}
@media (max-width: 560px) {
  .trust-grid-v2 { grid-template-columns: 1fr; }
  .tcomp-grid { grid-template-columns: 1fr; }
  .trust-strip { grid-template-columns: 1fr; }
  .ts-item + .ts-item::before { display: none; }
  .ts-item { border-top: 1px dashed rgba(26,107,60,0.14); }
  .ts-item:first-child { border-top: none; }
}
@keyframes raPhotoReveal {
  from { opacity: 0; transform: scale(0.92) translateY(14px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}
@keyframes credFadeIn { to { opacity: 1; transform: translateY(0); } }
@media (max-width: 768px) { .trust-grid { grid-template-columns: 1fr 1fr; } }

/* ═════════════════════════════════════
   10. INSIGHTS / BLOG
═════════════════════════════════════ */
/* Insights carousel.
   Was a 2fr/1fr/1fr grid with an oversized lead card, which made the row read
   as a ranked list rather than a set of equal stories. Now a scroll-snap
   track of uniformly sized cards, three per view. Native scroll means swipe
   and keyboard work with no JS, and it degrades to a plain scroller if the
   arrow script never runs. */
.blog-carousel { position: relative; }
.blog-grid {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  /* Room for the cards' hover lift, which would otherwise be clipped by
     the scroll container. */
  padding: 4px 4px 12px;
  margin: -4px -4px -12px;
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.blog-grid::-webkit-scrollbar { display: none; }
.blog-card {
  background: var(--white); border: 1px solid var(--grey-100);
  border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-xs);
  cursor: pointer; transition: all 0.28s ease;
  /* Three across: subtract the two 16px gaps before dividing. */
  flex: 0 0 calc((100% - 32px) / 3);
  scroll-snap-align: start;
  display: flex; flex-direction: column;
}
.blog-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.blog-img { display: flex; align-items: center; justify-content: center; font-size: 2.5rem; }
.blog-img.h180 { height: 180px; flex-shrink: 0; }
.blog-img.dark { background: linear-gradient(135deg, #14532D, #1A6B3C); }
.blog-img.mint { background: var(--g-bg); }
.blog-img.warm { background: linear-gradient(135deg, #2d1b00, var(--amber)); }
.blog-body { padding: 22px; flex: 1; display: flex; flex-direction: column; }
.blog-cat  { font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.09em; color: var(--g-main); margin-bottom: 8px; }
/* Clamped so an unusually long headline can't make one card taller than its
   neighbours — uniform height is the point of the change. */
.blog-title {
  font-size: 1.05rem; font-weight: 700; color: var(--black); line-height: 1.42;
  margin-bottom: 9px; flex: 1;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.blog-date { font-size: 0.75rem; color: var(--grey-400); }

/* Arrows sit beside the section heading, matching .btn-outline's weight. */
.blog-nav { display: flex; align-items: center; gap: 8px; }
.blog-nav__btn {
  width: 40px; height: 40px; border-radius: 50%;
  border: 1px solid var(--grey-200, #e2e8f0); background: var(--white);
  color: var(--grey-500, #64748b);
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; transition: all 0.2s ease; font-size: 1.1rem; line-height: 1;
}
.blog-nav__btn:hover:not(:disabled) { border-color: var(--g-main); color: var(--g-main); }
.blog-nav__btn:disabled { opacity: 0.35; cursor: default; }

@media (max-width: 1024px) { .blog-card { flex-basis: calc((100% - 16px) / 2); } }
@media (max-width: 768px)  { .blog-card { flex-basis: 100%; } }

/* Insight reader modal — teaser + sign-up gate */
.ins-modal-bg {
  position: fixed; inset: 0; z-index: 2200;
  background: rgba(13,13,10,0.82);
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}
.ins-modal-bg.open { opacity: 1; visibility: visible; pointer-events: auto; }
.ins-modal {
  background: var(--white);
  border-radius: var(--radius-lg);
  max-width: 680px; width: 100%;
  max-height: 88vh;
  display: flex; flex-direction: column;
  overflow: hidden;
  box-shadow: 0 40px 100px rgba(0,0,0,0.3);
  transform: translateY(24px) scale(0.97);
  transition: transform 0.32s cubic-bezier(.34,1.4,.64,1);
}
.ins-modal-bg.open .ins-modal { transform: translateY(0) scale(1); }
.ins-modal-head {
  padding: 28px 32px 0;
  flex-shrink: 0;
  position: relative;
}
.ins-modal-close {
  position: absolute; top: 18px; right: 18px;
  width: 34px; height: 34px; border-radius: 50%;
  border: none; background: var(--grey-50); color: var(--grey-500);
  font-size: 1rem; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: all 0.2s;
}
.ins-modal-close:hover { background: var(--grey-100); color: var(--black); }
.ins-modal-cat { font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.09em; color: var(--g-main); margin-bottom: 10px; }
.ins-modal-title { font-family: var(--font-heading); font-size: 1.45rem; font-weight: 800; color: var(--black); line-height: 1.3; margin-bottom: 8px; letter-spacing: -0.015em; }
.ins-modal-date { font-size: 0.78rem; color: var(--grey-400); padding-bottom: 18px; border-bottom: 1px solid var(--grey-100); }
.ins-modal-body {
  padding: 22px 32px 0;
  overflow-y: auto;
  position: relative;
  flex: 1; min-height: 0;
  scrollbar-width: thin;
}
.ins-modal-body p { font-size: 0.95rem; line-height: 1.75; color: var(--grey-600); margin-bottom: 16px; }
.ins-teaser p:first-child { font-size: 1rem; color: var(--grey-700); }
.ins-locked { position: relative; }
.ins-locked p { filter: blur(5px); user-select: none; pointer-events: none; }
/* Sticky paywall: the article scrolls, the gate rides pinned over the blurred text */
.ins-gate {
  position: sticky; bottom: 0;
  margin-top: -170px;
  background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.92) 26%, #ffffff 45%);
  display: flex; flex-direction: column; align-items: center; justify-content: flex-end;
  text-align: center;
  padding: 130px 32px 30px;
}
.ins-gate-lock {
  width: 46px; height: 46px; border-radius: 50%;
  background: var(--g-bg);
  color: var(--g-main);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 12px;
  box-shadow: 0 4px 14px rgba(26,107,60,0.16);
}
.ins-gate-title { font-family: var(--font-heading); font-size: 1.05rem; font-weight: 800; color: var(--black); margin-bottom: 4px; }
.ins-gate-sub { font-size: 0.85rem; color: var(--grey-500); margin-bottom: 16px; max-width: 380px; }
.ins-gate .btn { min-width: 220px; }
.ins-gate-signin { margin-top: 10px; font-size: 0.8rem; color: var(--grey-400); }
.ins-gate-signin a { color: var(--g-main); font-weight: 700; text-decoration: none; }
@media (max-width: 600px) {
  .ins-modal { max-height: 92vh; border-radius: 20px; }
  .ins-modal-head, .ins-modal-body { padding-left: 20px; padding-right: 20px; }
}

/* ═════════════════════════════════════
   CTA BAND
═════════════════════════════════════ */
.cta-band {
  position: relative; overflow: hidden;
  background: #EEF5F0;
  padding: 56px 24px;
  text-align: center;
  border-top: 1px solid rgba(26,107,60,0.12);
}
/* Same decorative gradients as hero — stronger saturation + more layers for continuity */
.cta-band::before {
  content:''; position:absolute; inset:0; z-index:0;
  background-image:
    radial-gradient(circle at 80% 50%, rgba(76,175,120,0.28) 0%, transparent 55%),
    radial-gradient(circle at 20% 80%, rgba(198,232,212,0.22) 0%, transparent 45%),
    radial-gradient(circle at 50% 30%, rgba(110,231,160,0.12) 0%, transparent 40%),
    radial-gradient(circle, rgba(255,255,255,.03) 1px, transparent 1px);
  background-size: auto, auto, auto, 28px 28px;
  pointer-events:none;
}
.cta-band::after {
  content:''; position:absolute; z-index:0;
  top:-30%; right:-10%; width:55%; height:160%;
  background: linear-gradient(135deg,
    transparent 0%,
    rgba(198,232,212,0.12) 40%,
    rgba(198,232,212,0.08) 50%,
    transparent 60%
  );
  transform: skewX(-8deg);
  pointer-events:none;
}
/* Ambient blur orbs — matches hero's .hw-orb treatment */
.cta-band .cta-orb {
  position: absolute; border-radius: 50%; filter: blur(100px);
  pointer-events: none; z-index: 0;
}
.cta-band .cta-orb-1 {
  width: 520px; height: 520px;
  background: rgba(76,175,120,0.2);
  top: -120px; right: -120px;
  animation: ctaOrb1 22s ease-in-out infinite;
}
.cta-band .cta-orb-2 {
  width: 380px; height: 380px;
  background: rgba(26,107,60,0.18);
  bottom: -100px; left: -80px;
  animation: ctaOrb2 18s ease-in-out infinite;
}
@keyframes ctaOrb1 { 0%,100%{transform:translate(0,0)} 50%{transform:translate(-50px,40px)} }
@keyframes ctaOrb2 { 0%,100%{transform:translate(0,0)} 50%{transform:translate(40px,-30px)} }
.cta-band .container { position: relative; z-index: 1; }
.cta-band h2 { margin-bottom: 16px; }
.cta-band p  { max-width: 500px; margin: 0 auto 36px; font-size: 1.02rem; }

/* ═════════════════════════════════════
   FOOTER
═════════════════════════════════════ */
footer {
  background: #ffffff;
  color: #475569;
  padding: 44px 0 24px;
  position: relative;
  border-top: 1px solid #e2e8f0;
}
/* Top accent line — mirrors navbar's gradient bar */
footer::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 2.5px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    #4CAF78 15%,
    #C6E8D4 42%,
    #C6E8D4 58%,
    #4CAF78 85%,
    transparent 100%
  );
  opacity: 0.65;
}
.footer-grid { display: grid; grid-template-columns: 2.2fr 1fr 1fr 1fr; gap: 44px; margin-bottom: 28px; }
.footer-logo { margin-bottom: 18px; }
/* The footer is white now, so the mark sits directly on the background —
   no white chip needed (it only existed to rescue the dark-green mark from
   the dark-green footer). Wordmark follows the brand's two-tone split:
   "Equity" slate, "Wallet" green — same as the navbar and the app sidebar. */
.footer-logo img { height: 40px; width: auto; display: block; }
.footer-logo-chip {
  display: inline-flex; align-items: center; justify-content: center;
}
.footer-logo-name {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 1.22rem; font-weight: 800; letter-spacing: -0.02em;
  color: #0f172a; line-height: 1.15;
}
.footer-logo-name span { color: var(--c-brand, #1A6B3C); }
.footer-logo-tag {
  display: block; font-size: 0.68rem; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: #94a3b8; margin-top: 3px;
}
.footer-desc { font-size: 0.88rem; line-height: 1.8; margin-bottom: 0; color: #475569; }
.footer-links h4 { color: #0f172a; font-size: 0.82rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.09em; margin-bottom: 18px; }
.footer-links ul { list-style: none; }
.footer-links li { margin-bottom: 11px; }
.footer-links a { color: #475569; text-decoration: none; font-size: 0.9rem; transition: color 0.2s; }
.footer-links a:hover { color: var(--c-brand, #1A6B3C); }
.footer-bottom { border-top: 1px solid #e2e8f0; padding-top: 24px; display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; gap: 16px; }
.footer-disc { font-size: 0.72rem; color: #64748b; max-width: 720px; line-height: 1.7; }
/* ── CONTACT SECTION ── */
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-bottom: 28px; }
.contact-card { background: white; border-radius: var(--radius); padding: 24px 24px; border: 1px solid rgba(26,107,60,0.1); box-shadow: 0 8px 32px rgba(26,107,60,0.07); }
.contact-card__icon { width: 48px; height: 48px; border-radius: var(--radius); background: var(--g-pale); display: flex; align-items: center; justify-content: center; margin-bottom: 18px; }
.contact-card__title { font-family: var(--font-heading); font-size: 1.1rem; font-weight: 800; color: var(--black); margin-bottom: 8px; }
.contact-card__subtitle { font-size: 0.82rem; color: var(--grey-400); font-weight: 600; text-transform: uppercase; letter-spacing: 0.07em; margin-bottom: 20px; }
.contact-item { display: flex; align-items: flex-start; gap: 14px; padding: 14px 0; border-bottom: 1px solid rgba(26,107,60,0.08); }
.contact-item:last-child { border-bottom: none; padding-bottom: 0; }
.contact-item__icon { width: 36px; height: 36px; border-radius: var(--radius-sm); background: var(--g-pale); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.contact-item__label { font-size: 0.74rem; font-weight: 700; color: var(--grey-400); text-transform: uppercase; letter-spacing: 0.07em; margin-bottom: 3px; }
.contact-item__value { font-size: 0.93rem; font-weight: 600; color: var(--black); }
.contact-item__value a { color: var(--g-dark); text-decoration: none; }
.contact-item__value a:hover { color: var(--g-main); text-decoration: underline; }
.contact-book { background: linear-gradient(135deg, var(--g-deep) 0%, #1A6B3C 60%, #2E8B57 100%); border-radius: var(--radius); padding: 24px 32px; color: white; display: flex; justify-content: space-between; align-items: center; gap: 32px; flex-wrap: wrap; }
.contact-book__text h3 { font-family: var(--font-heading); font-size: 1.55rem; font-weight: 800; color: white; margin-bottom: 10px; }
.contact-book__text p { font-size: 0.93rem; color: rgba(255,255,255,0.72); line-height: 1.65; max-width: 480px; }
.contact-book__ctas { display: flex; gap: 14px; flex-wrap: wrap; }
.cta-white {
  display: inline-flex; align-items: center; gap: 10px;
  background: linear-gradient(180deg, #ffffff 0%, var(--g-bg) 100%);
  color: var(--g-dark);
  border-radius: var(--radius-pill);
  padding: 14px 28px;
  font-family: var(--font);
  font-size: 0.92rem; font-weight: 800;
  text-decoration: none; letter-spacing: 0.01em;
  white-space: nowrap;
  box-shadow: 0 2px 4px rgba(13,61,34,0.14), 0 10px 28px rgba(13,61,34,0.26), inset 0 1px 0 rgba(255,255,255,1);
  transition: transform 0.32s cubic-bezier(.34,1.56,.64,1), box-shadow 0.32s;
}
.cta-white:hover {
  transform: translateY(-3px) scale(1.02);
  box-shadow: 0 4px 8px rgba(13,61,34,0.18), 0 16px 40px rgba(13,61,34,0.38), inset 0 1px 0 rgba(255,255,255,1);
}
.cta-outline-white {
  display: inline-flex; align-items: center; gap: 10px;
  background: rgba(255,255,255,0.08);
  color: white;
  border: 1.5px solid rgba(255,255,255,0.4);
  border-radius: var(--radius-pill);
  padding: 13px 26px;
  font-family: var(--font);
  font-size: 0.92rem; font-weight: 700;
  text-decoration: none; letter-spacing: 0.01em;
  white-space: nowrap;
  backdrop-filter: blur(8px);
  transition: all 0.3s;
}
.cta-outline-white:hover {
  border-color: white;
  background: rgba(255,255,255,0.14);
  transform: translateY(-2px);
}
@media (max-width:640px) {
  .contact-grid { grid-template-columns: 1fr; }
  .contact-book { flex-direction: column; text-align: center; }
  .contact-book__ctas { justify-content: center; }
}

/* ══ PREMIUM CONTACT SECTION v2 ══════════════════════════ */
.contact-v2 {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 24px;
  align-items: stretch;
}

/* LEFT: Dark-green hero panel */
.contact-hero {
  position: relative;
  background:
    radial-gradient(ellipse at 20% 10%, rgba(110,231,160,0.18) 0%, transparent 45%),
    radial-gradient(ellipse at 80% 100%, rgba(46,139,87,0.28) 0%, transparent 50%),
    linear-gradient(145deg, var(--g-deep) 0%, #14532D 45%, #1A6B3C 100%);
  border-radius: var(--radius-lg);
  padding: 36px 38px;
  color: white;
  overflow: hidden;
  box-shadow:
    0 2px 4px rgba(13,61,34,0.12),
    0 24px 60px rgba(13,61,34,0.3);
  display: flex;
  align-items: center;
}
.ch-inner {
  position: relative;
  z-index: 2;
  max-width: 440px;
}
/* Ambient orbs */
.ch-orb {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  filter: blur(40px);
}
.ch-orb--1 {
  top: -120px; right: -100px;
  width: 320px; height: 320px;
  background: radial-gradient(circle, rgba(110,231,160,0.35) 0%, transparent 70%);
  animation: chOrbFloat1 16s ease-in-out infinite;
}
.ch-orb--2 {
  bottom: -140px; left: -80px;
  width: 280px; height: 280px;
  background: radial-gradient(circle, rgba(46,139,87,0.5) 0%, transparent 70%);
  animation: chOrbFloat2 20s ease-in-out infinite;
}
@keyframes chOrbFloat1 {
  0%, 100% { transform: translate(0,0) scale(1); }
  50%      { transform: translate(-30px, 40px) scale(1.08); }
}
@keyframes chOrbFloat2 {
  0%, 100% { transform: translate(0,0) scale(1); }
  50%      { transform: translate(40px, -30px) scale(1.12); }
}
.ch-shine {
  position: absolute;
  top: 0; left: -30%;
  width: 50%; height: 100%;
  background: linear-gradient(110deg, transparent 40%, rgba(110,231,160,0.1) 50%, transparent 60%);
  transform: skewX(-18deg);
  pointer-events: none;
  animation: chShine 10s ease-in-out infinite;
}
@keyframes chShine {
  0%, 100% { transform: translateX(0) skewX(-18deg); opacity: 0.4; }
  50%      { transform: translateX(20px) skewX(-18deg); opacity: 0.8; }
}

.ch-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px 7px 12px;
  background: rgba(110,231,160,0.14);
  border: 1px solid rgba(110,231,160,0.35);
  border-radius: var(--radius-pill);
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #C6E8D4;
  margin-bottom: 22px;
  backdrop-filter: blur(8px);
}
.ch-badge svg { color: #6ee7a0; }

.ch-head {
  font-family: var(--font-heading);
  font-size: clamp(1.55rem, 2.6vw, 2rem);
  font-weight: 800;
  line-height: 1.18;
  letter-spacing: -0.022em;
  color: white;
  margin: 0 0 14px;
}
.ch-desc {
  font-size: 0.96rem;
  color: rgba(255,255,255,0.82);
  line-height: 1.62;
  margin: 0 0 28px;
}

.ch-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 24px 14px 22px;
  background: linear-gradient(180deg, #ffffff 0%, #f0f8f2 100%);
  color: var(--g-dark);
  border-radius: var(--radius);
  font-size: 0.92rem;
  font-weight: 800;
  letter-spacing: 0.01em;
  text-decoration: none;
  box-shadow:
    0 2px 4px rgba(13,61,34,0.15),
    0 10px 28px rgba(13,61,34,0.28),
    inset 0 1px 0 rgba(255,255,255,1);
  transition: transform 0.3s cubic-bezier(.34,1.56,.64,1), box-shadow 0.3s;
  margin-bottom: 26px;
}
.ch-cta:hover {
  transform: translateY(-3px) scale(1.02);
  box-shadow:
    0 4px 8px rgba(13,61,34,0.18),
    0 16px 40px rgba(13,61,34,0.38),
    inset 0 1px 0 rgba(255,255,255,1);
}
.ch-cta-arrow { transition: transform 0.3s; }
.ch-cta:hover .ch-cta-arrow { transform: translateX(3px); }

.ch-trust {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-top: 22px;
  border-top: 1px dashed rgba(110,231,160,0.25);
}
.ch-trust-row {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.86rem;
  color: rgba(255,255,255,0.82);
  font-weight: 500;
}
.ch-trust-row svg {
  flex-shrink: 0;
  width: 22px; height: 22px;
  padding: 5px;
  background: rgba(110,231,160,0.18);
  border-radius: 50%;
  color: #6ee7a0;
}
.ch-subline {
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid rgba(255,255,255,0.12);
  font-size: 0.76rem;
  line-height: 1.55;
  color: rgba(255,255,255,0.55);
  font-weight: 400;
  letter-spacing: 0.005em;
  font-style: italic;
}

/* RIGHT: Contact rail (2 stacked cards) */
.contact-rail {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.contact-card-v2 {
  background: linear-gradient(180deg, #ffffff 0%, var(--off-wh) 100%);
  border: 1px solid rgba(26,107,60,0.1);
  border-radius: var(--radius-lg);
  padding: 22px 24px;
  box-shadow:
    0 1px 3px rgba(26,60,46,0.04),
    0 10px 28px rgba(26,60,46,0.06);
  transition: box-shadow 0.3s, transform 0.3s;
}
.contact-card-v2:hover {
  box-shadow:
    0 2px 4px rgba(26,60,46,0.05),
    0 16px 40px rgba(26,60,46,0.1);
}
.ccv2-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-bottom: 14px;
  margin-bottom: 6px;
  border-bottom: 1px dashed rgba(26,107,60,0.14);
}
.ccv2-icon {
  flex-shrink: 0;
  width: 40px; height: 40px;
  border-radius: var(--radius-sm);
  background: linear-gradient(135deg, #EEF5F0 0%, #C6E8D4 100%);
  color: var(--g-main);
  display: flex; align-items: center; justify-content: center;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.8);
}
.ccv2-icon--alt {
  background: var(--g-main);
  color: #6ee7a0;
  box-shadow: 0 4px 12px rgba(20,83,45,0.22), inset 0 1px 0 rgba(255,255,255,0.12);
}
.ccv2-head-text { flex: 1; }
.ccv2-title {
  font-family: var(--font-heading);
  font-size: 1rem;
  font-weight: 800;
  color: var(--black);
  letter-spacing: -0.01em;
  margin-bottom: 2px;
}
.ccv2-sub {
  font-size: 0.72rem;
  color: var(--grey-400);
  font-weight: 600;
  letter-spacing: 0.02em;
}

/* Row within a card */
.ccv2-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  text-decoration: none;
  border-bottom: 1px solid rgba(26,107,60,0.06);
  transition: transform 0.25s;
}
.ccv2-row:last-child { border-bottom: none; }
.ccv2-row:hover:not(.ccv2-row--static) {
  transform: translateX(3px);
}
.ccv2-row-icon {
  flex-shrink: 0;
  width: 30px; height: 30px;
  border-radius: var(--radius-sm);
  background: rgba(76,175,120,0.08);
  color: var(--g-main);
  display: flex; align-items: center; justify-content: center;
  transition: background 0.25s;
}
.ccv2-row:hover:not(.ccv2-row--static) .ccv2-row-icon {
  background: rgba(76,175,120,0.18);
}
.ccv2-row-body { flex: 1; min-width: 0; }
.ccv2-row-lbl {
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--grey-400);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  margin-bottom: 2px;
}
.ccv2-row-val {
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--black);
  letter-spacing: -0.005em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ccv2-row-arrow {
  color: var(--grey-300);
  flex-shrink: 0;
  transition: color 0.25s, transform 0.25s;
}
.ccv2-row:hover .ccv2-row-arrow {
  color: var(--g-main);
  transform: translateX(3px);
}
.ccv2-status {
  font-size: 0.72rem;
  font-weight: 800;
  color: #16a34a;
  letter-spacing: 0.02em;
  padding: 4px 10px;
  background: rgba(22,163,74,0.1);
  border-radius: var(--radius-pill);
}

/* Registration number callout inside compliance card */
.ccv2-regn {
  padding: 14px 16px;
  margin: 10px 0 4px;
  background: var(--g-main);
  border-radius: var(--radius);
  color: white;
  display: flex;
  flex-direction: column;
  gap: 2px;
  position: relative;
  overflow: hidden;
}
.ccv2-regn::before {
  content: '';
  position: absolute;
  top: -20px; right: -20px;
  width: 80px; height: 80px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(110,231,160,0.35) 0%, transparent 70%);
  pointer-events: none;
}
.ccv2-regn-lbl {
  font-size: 0.68rem;
  font-weight: 700;
  color: #C6E8D4;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  position: relative;
  z-index: 1;
}
.ccv2-regn-num {
  font-family: var(--font-heading);
  font-size: 1.3rem;
  font-weight: 800;
  letter-spacing: 0.03em;
  position: relative;
  z-index: 1;
}

.ccv2-regn-bse {
  margin-top: 8px; padding-top: 8px;
  border-top: 1px solid rgba(255,255,255,0.18);
  font-size: 0.76rem; font-weight: 600; color: #C6E8D4;
  position: relative; z-index: 1;
}
.ccv2-regn-bse strong { color: #fff; font-weight: 800; letter-spacing: 0.02em; }

.ccv2-sla {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  padding: 10px 12px;
  background: rgba(76,175,120,0.06);
  border: 1px solid rgba(76,175,120,0.16);
  border-radius: var(--radius-sm);
  font-size: 0.78rem;
  color: var(--grey-600);
  line-height: 1.45;
}
.ccv2-sla svg {
  flex-shrink: 0;
  color: var(--g-main);
}
.ccv2-sla strong { color: var(--g-dark); font-weight: 700; }
/* Trim pass */
.ccv2-regn-line { font-size: .78rem; color: var(--grey-600); padding: 8px 12px; margin: 4px 0 6px; background: #F4FAF6; border: 1px solid #E1EEE6; border-radius: var(--radius-sm); }
.ccv2-regn-line strong { color: var(--g-dark); font-weight: 700; letter-spacing: .02em; }
.ccv2-regn-line i { font-style: normal; color: #B9C8BF; margin: 0 8px; }
.ch-trust { margin-top: 18px; gap: 8px; }
@media (max-width: 600px) {
  .contact-hero { padding: 22px 18px !important; }
  .ch-head { font-size: 1.35rem; }
  .ch-desc { font-size: .86rem; }
  .contact-card-v2 { padding: 14px 16px !important; }
  .ccv2-row { padding: 8px 0; }
  .ccv2-row-val { font-size: .84rem; white-space: normal !important; overflow: visible !important; text-overflow: clip !important; }   /* address was cut off with "…" */
  .ccv2-regn-line { font-size: .72rem; }
}


@media (max-width: 960px) {
  .contact-v2 { grid-template-columns: 1fr; }
  /* grid items default to min-width:auto and refused to shrink below their
     content width, which pushed the whole page into horizontal scroll */
  .contact-v2 > * { min-width: 0; }
  .contact-hero { padding: 30px 28px; }
}
@media (max-width: 560px) {
  .contact-hero { padding: 26px 22px; }
  .ccv2-title { font-size: 0.95rem; }
}

/* ══ APP DOWNLOAD SECTION ══════════════════════════ */
.app-panel {
  position: relative;
  display: grid;
  grid-template-columns: 380px 1fr;
  gap: 60px;
  align-items: center;
  padding: 56px 60px;
  background:
    radial-gradient(ellipse at 15% 20%, rgba(110,231,160,0.14) 0%, transparent 45%),
    radial-gradient(ellipse at 85% 90%, rgba(46,139,87,0.28) 0%, transparent 50%),
    linear-gradient(135deg, #0a2d18 0%, var(--g-deep) 35%, #14532D 75%, #1A6B3C 100%);
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow:
    0 2px 4px rgba(13,61,34,0.12),
    0 32px 80px rgba(13,61,34,0.32);
  color: white;
}

/* Ambient orbs */
.ap-orb {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  filter: blur(50px);
}
.ap-orb--1 {
  top: -180px; right: -120px;
  width: 420px; height: 420px;
  background: radial-gradient(circle, rgba(110,231,160,0.45) 0%, transparent 70%);
  animation: apOrb1 22s ease-in-out infinite;
}
.ap-orb--2 {
  bottom: -200px; left: -150px;
  width: 400px; height: 400px;
  background: radial-gradient(circle, rgba(46,139,87,0.55) 0%, transparent 70%);
  animation: apOrb2 18s ease-in-out infinite;
}
.ap-orb--3 {
  top: 40%; left: 35%;
  width: 280px; height: 280px;
  background: radial-gradient(circle, rgba(76,175,120,0.18) 0%, transparent 70%);
  animation: apOrb3 14s ease-in-out infinite;
}
@keyframes apOrb1 { 0%,100% { transform: translate(0,0) scale(1);} 50%{ transform: translate(-40px,50px) scale(1.08);} }
@keyframes apOrb2 { 0%,100% { transform: translate(0,0) scale(1);} 50%{ transform: translate(50px,-40px) scale(1.12);} }
@keyframes apOrb3 { 0%,100% { transform: translate(0,0) scale(1); opacity:0.6;} 50%{ transform: translate(20px,-20px) scale(1.1); opacity:1;} }

/* Grid overlay pattern */
.ap-grid-overlay {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(110,231,160,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(110,231,160,0.04) 1px, transparent 1px);
  background-size: 40px 40px;
  pointer-events: none;
  mask-image: radial-gradient(ellipse at center, black 0%, transparent 75%);
}

/* LEFT: Phone mockup */
.ap-visual {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 2;
}
.ap-phone {
  position: relative;
  width: 280px;
  height: 570px;
  background: linear-gradient(135deg, #2a2a2a 0%, #0a0a0a 100%);
  border-radius: 46px;
  padding: 10px;
  box-shadow:
    inset 0 0 0 2px rgba(255,255,255,0.08),
    0 4px 8px rgba(0,0,0,0.4),
    0 24px 60px rgba(0,0,0,0.5),
    0 0 0 2px #1a1a1a;
  animation: apPhoneFloat 6s ease-in-out infinite;
}
@keyframes apPhoneFloat {
  0%,100% { transform: translateY(0); }
  50%     { transform: translateY(-8px); }
}
.ap-phone__notch {
  position: absolute;
  top: 18px; left: 50%;
  transform: translateX(-50%);
  width: 90px; height: 24px;
  background: #0a0a0a;
  border-radius: 0 0 14px 14px;
  z-index: 3;
}
.ap-phone__speaker {
  position: absolute;
  top: 24px; left: 50%;
  transform: translateX(-50%);
  width: 44px; height: 4px;
  background: #1a1a1a;
  border-radius: 2px;
  z-index: 4;
}
.ap-phone__screen {
  width: 100%;
  height: 100%;
  background: linear-gradient(180deg, var(--grey-50) 0%, #EEF5F0 100%);
  border-radius: 36px;
  overflow: hidden;
  position: relative;
  isolation: isolate; /* forces children to respect the rounded clip */
  display: flex;
  flex-direction: column;
}

/* Status bar */
.ap-status {
  padding: 14px 24px 8px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.72rem;
  font-weight: 700;
  color: #14532D;
}
.ap-status-icons {
  display: flex;
  align-items: center;
  gap: 4px;
  color: #14532D;
}
.ap-battery {
  width: 22px; height: 10px;
  border: 1px solid currentColor;
  border-radius: 2px;
  padding: 1px;
  position: relative;
}
.ap-battery::after {
  content: '';
  position: absolute;
  right: -3px; top: 3px;
  width: 1px; height: 4px;
  background: currentColor;
  border-radius: 0 1px 1px 0;
}
.ap-battery__fill {
  width: 80%; height: 100%;
  background: currentColor;
  border-radius: 1px;
}

/* App top bar — mirrors the real app's PageHeader (title + bell) */
.ap-topbar {
  padding: 10px 20px 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.ap-topbar__title {
  font-size: 1.05rem;
  font-weight: 800;
  color: #14532D;
  letter-spacing: -0.02em;
}
.ap-topbar__bell {
  position: relative;
  width: 30px; height: 30px;
  border-radius: 50%;
  background: white;
  border: 1px solid rgba(26,107,60,0.10);
  display: flex; align-items: center; justify-content: center;
  color: #14532D;
}
.ap-topbar__bell .ap-bell-badge {
  position: absolute;
  top: -3px; right: -3px;
  min-width: 14px; height: 14px;
  background: #dc2626;
  color: white;
  border-radius: 7px;
  font-size: 0.52rem; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
  border: 1.5px solid white;
}

/* Balance card */
.ap-balance {
  margin: 4px 16px 14px;
  padding: 16px 18px;
  background: linear-gradient(135deg, #14532D 0%, #1A6B3C 70%, #2E8B57 100%);
  border-radius: var(--radius);
  color: white;
  position: relative;
  overflow: hidden;
  box-shadow: 0 6px 18px rgba(20,83,45,0.25);
}
.ap-balance::before {
  content: '';
  position: absolute;
  top: -20px; right: -20px;
  width: 80px; height: 80px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(110,231,160,0.35) 0%, transparent 70%);
}
.ap-balance__lbl {
  font-size: 0.64rem;
  font-weight: 600;
  color: rgba(255,255,255,0.72);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 3px;
  position: relative;
}
.ap-balance__val {
  font-size: 1.35rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  margin-bottom: 4px;
  position: relative;
}
.ap-balance__invested {
  font-size: 0.62rem;
  font-weight: 500;
  color: rgba(255,255,255,0.60);
  margin-bottom: 10px;
  position: relative;
}
.ap-balance__invested strong { color: rgba(255,255,255,0.92); font-weight: 600; }
.ap-balance__pills {
  display: flex;
  align-items: center;
  gap: 6px;
  position: relative;
}
.ap-pill {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 4px 9px;
  border-radius: 99px;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  white-space: nowrap;
}
.ap-pill--solid { background: white; color: #1a6c30; }
.ap-pill--outline { border: 1px solid rgba(255,255,255,0.35); color: white; font-weight: 500; }
.ap-chart {
  width: 100%;
  height: 44px;
  margin-top: 12px;
  display: block;
  position: relative;
}

/* Basket rows */
.ap-basket-row {
  margin: 0 16px 8px;
  padding: 10px 12px;
  background: white;
  border: 1px solid rgba(26,107,60,0.08);
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  gap: 10px;
  box-shadow: 0 1px 3px rgba(26,60,46,0.04);
}
.ap-br-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  box-shadow: 0 0 0 3px rgba(110,231,160,0.18);
}
.ap-br-body { flex: 1; min-width: 0; }
.ap-br-name {
  font-size: 0.74rem;
  font-weight: 700;
  color: #14532D;
  letter-spacing: -0.01em;
}
.ap-br-sub {
  font-size: 0.62rem;
  color: var(--grey-500);
  margin-top: 1px;
}
.ap-br-val {
  font-size: 0.78rem;
  font-weight: 800;
  color: #14532D;
  letter-spacing: -0.01em;
  text-align: right;
}
.ap-br-pct {
  font-size: 0.6rem;
  font-weight: 700;
  color: #16A34A;
  text-align: right;
  margin-top: 1px;
}
.ap-section-lbl {
  margin: 2px 16px 8px;
  font-size: 0.58rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--grey-400);
}

/* Bottom nav — solid background: backdrop-filter escapes the screen's
   rounded-corner clip in Chromium and paints outside the phone frame */
.ap-nav {
  margin-top: auto;
  padding: 10px 8px 4px;
  background: #ffffff;
  border-top: 1px solid rgba(26,107,60,0.08);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4px;
}
.ap-nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 4px;
  color: var(--grey-400);
  font-size: 0.6rem;
  font-weight: 600;
}
.ap-nav-item.active { color: #14532D; }
.ap-home-indicator {
  margin: 3px auto 6px;
  width: 110px; height: 4px;
  background: #14532D;
  border-radius: 2px;
  opacity: 0.7;
}

/* RIGHT: Content */
.ap-content {
  position: relative;
  z-index: 2;
  max-width: 540px;
}
.ap-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px 7px 12px;
  background: rgba(110,231,160,0.14);
  border: 1px solid rgba(110,231,160,0.35);
  border-radius: var(--radius-pill);
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #C6E8D4;
  margin-bottom: 22px;
  backdrop-filter: blur(8px);
}
.ap-badge-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #6ee7a0;
  box-shadow: 0 0 12px #6ee7a0;
  animation: apDotPulse 1.8s ease-in-out infinite;
}
@keyframes apDotPulse {
  0%,100% { opacity: 1; transform: scale(1); }
  50%     { opacity: 0.5; transform: scale(1.3); }
}

.ap-title {
  font-family: var(--font-heading);
  font-size: clamp(1.9rem, 3.4vw, 2.65rem);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.026em;
  color: white;
  margin: 0 0 18px;
}
.ap-title em {
  font-style: italic;
  font-weight: 500;
  background: linear-gradient(135deg, #6ee7a0 0%, #C6E8D4 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.ap-desc {
  font-size: 1rem;
  color: rgba(255,255,255,0.82);
  line-height: 1.65;
  margin: 0 0 24px;
}
.ap-features {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 30px;
  padding-bottom: 26px;
  border-bottom: 1px dashed rgba(110,231,160,0.25);
}
.ap-feature {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 0.92rem;
  color: rgba(255,255,255,0.88);
}
.ap-feature svg {
  flex-shrink: 0;
  width: 22px; height: 22px;
  padding: 5px;
  background: rgba(110,231,160,0.18);
  border-radius: 50%;
  color: #6ee7a0;
}

/* Store badges */
.ap-stores {
  display: flex;
  gap: 12px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}
.ap-store {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 20px 11px 16px;
  background: linear-gradient(180deg, #1a1a1a 0%, #000000 100%);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: var(--radius);
  color: white;
  text-decoration: none;
  transition: transform 0.3s cubic-bezier(.34,1.56,.64,1), box-shadow 0.3s, border-color 0.3s;
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
  min-width: 175px;
}
.ap-store:hover {
  transform: translateY(-3px) scale(1.02);
  border-color: rgba(110,231,160,0.4);
  box-shadow: 0 10px 28px rgba(0,0,0,0.5), 0 0 0 1px rgba(110,231,160,0.3);
}
.ap-store-icon {
  flex-shrink: 0;
  color: white;
}
.ap-store-text { flex: 1; }
.ap-store-sm {
  font-size: 0.62rem;
  color: rgba(255,255,255,0.7);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 1px;
}
.ap-store-lg {
  font-family: var(--font-heading);
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: -0.01em;
}

/* QR row */
.ap-qr-row {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
.ap-qr-divider {
  position: relative;
  padding: 0 6px;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: rgba(255,255,255,0.5);
}
.ap-qr-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px 10px 10px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(110,231,160,0.2);
  border-radius: var(--radius);
  backdrop-filter: blur(8px);
  transition: transform 0.3s, background 0.3s, border-color 0.3s;
}
.ap-qr-card:hover {
  transform: translateY(-2px);
  background: rgba(255,255,255,0.1);
  border-color: rgba(110,231,160,0.45);
}
.ap-qr-image {
  flex-shrink: 0;
  width: 64px; height: 64px;
  padding: 5px;
  background: white;
  border-radius: var(--radius-sm);
  box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}
.ap-qr-image img {
  width: 100%; height: 100%;
  display: block;
  border-radius: var(--radius-xs);
}
.ap-qr-title {
  font-family: var(--font-heading);
  font-size: 0.95rem;
  font-weight: 800;
  color: white;
  letter-spacing: -0.01em;
}
.ap-qr-sub {
  font-size: 0.7rem;
  color: rgba(255,255,255,0.6);
  margin-top: 1px;
}

@media (max-width: 1080px) {
  .app-panel { grid-template-columns: 1fr; gap: 40px; padding: 44px 36px; }
  .ap-visual { order: 2; }
  .ap-content { order: 1; max-width: 100%; }
}
@media (max-width: 560px) {
  .app-panel { padding: 32px 22px; border-radius: var(--radius-lg); }
  .ap-phone { width: 240px; height: 490px; }
  .ap-stores { flex-direction: column; }
  .ap-store { width: 100%; }
  .ap-qr-row { justify-content: center; }
  .ap-qr-divider { width: 100%; text-align: center; }
}
/* Trim pass: smaller mockup on phones, no QR codes on the phone itself (you can't scan your own screen). */
@media (max-width: 600px) {
  .app-panel { gap: 18px !important; padding: 24px 18px !important; }
  /* the mockup is decoration; at phone width it was ~400px tall, clipped by the panel, and its screen squashed */
  .ap-visual { display: none; }
  .ap-qr-row { display: none; }
  .ap-features { gap: 8px; margin-bottom: 18px; }
  .ap-desc { margin-bottom: 16px; }
}

.footer-copy { font-size: 0.78rem; color: #94a3b8; }
@media (max-width: 768px) { .footer-grid { grid-template-columns: 1fr 1fr; } }

/* ═════════════════════════════════════
   BOTTOM NAV
═════════════════════════════════════ */
.bottom-nav { display: none !important; }
.bnav-item { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; cursor:pointer; border:none; background:none; font-size:0.62rem; font-weight:700; color:var(--grey-400); text-decoration:none; transition:color 0.2s; }
.bnav-item.active,.bnav-item:hover { color:var(--g-main); }
.bnav-item svg { width:20px; height:20px; stroke:currentColor; fill:none; stroke-width:2; }

/* MODAL */
.modal-bg { position:fixed; inset:0; z-index:2000; background:rgba(0,0,0,0.8); display:flex; align-items:center; justify-content:center; padding:20px; opacity:0; visibility:hidden; pointer-events:none; }
.modal { background:var(--g-dark); border-radius: var(--radius-lg); max-width:580px; width:100%; max-height:90vh; overflow:hidden; box-shadow: 0 24px 60px rgba(0,0,0,0.15); display:flex; flex-direction:column; }
.modal-hd { background:linear-gradient(135deg,var(--g-dark),var(--g-main)); padding:32px 30px; color:white; border-radius: var(--radius-lg) var(--radius-lg) 0 0; position:relative; overflow:hidden; flex-shrink:0; }
.modal-hd::before { content:''; position:absolute; inset:0; background:radial-gradient(circle at top right, rgba(255,255,255,0.15), transparent 60%); pointer-events:none; }
.modal-close { position:absolute; top:18px; right:18px; background:rgba(255,255,255,0.12); border:none; color:white; width:32px; height:32px; border-radius:50%; cursor:pointer; display:flex; align-items:center; justify-content:center; font-size:1rem; z-index: 2; transition: all 0.2s; }
.modal-close:hover { background:rgba(255,255,255,0.22); transform: scale(1.05); }
.modal-bd { background:white; padding:30px; overflow-y:auto; flex:1; min-height:0; }
.modal-bd::-webkit-scrollbar { width: 6px; }
.modal-bd::-webkit-scrollbar-track { background: transparent; margin: 12px 0; }
.modal-bd::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.12); border-radius: 10px; }
.modal-bd::-webkit-scrollbar-thumb:hover { background: rgba(0,0,0,0.2); }
.modal-stats { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-bottom:26px; }
.mod-stat { background:var(--white); border-radius: var(--radius-sm); padding:18px 16px; text-align:center; border:1px solid var(--grey-100); box-shadow: 0 4px 14px rgba(0,0,0,0.03); position:relative; overflow:hidden; }
.mod-stat::before { content:''; position:absolute; top:0; left:0; bottom:0; width:3px; background:var(--g-main); }
.mod-stat-val { font-size:1.65rem; font-weight:700; color:var(--g-main); font-family: var(--font-heading); }
.mod-stat-val.dark { color:var(--black); }
.mod-stat-lbl { font-size:0.68rem; color:var(--grey-500); font-weight:600; text-transform:uppercase; margin-top:4px; letter-spacing: 0.05em; }
.pie-row { display:flex; gap:24px; align-items:center; margin:22px 0; flex-wrap:wrap; }
.pie-vis { width:140px; height:140px; position:relative; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.donut { width: 100%; height: 100%; transform: rotate(-90deg); filter: drop-shadow(0 8px 24px rgba(0,0,0,0.08)); border-radius: 50%; overflow: visible; }
.donut-segment { transition: stroke-width 0.2s cubic-bezier(.34,1.56,.64,1); cursor: pointer; pointer-events: stroke; }
.donut-segment:hover { stroke-width: 8; }
.pie-center { position: absolute; inset: 22%; background: white; border-radius: 50%; box-shadow: inset 0 2px 8px rgba(0,0,0,0.04); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; pointer-events: none; transition: transform 0.3s; z-index: 2; }
.pie-c-title { font-family: var(--font); font-size: 0.5rem; color: var(--grey-500); font-weight: 700; text-transform: uppercase; margin-bottom: 2px; line-height: 1.1; letter-spacing: 0.05em; max-width: 80%; }
.pie-c-val { font-family: var(--font-heading); font-size: 1.05rem; font-weight: 800; color: var(--g-main); line-height: 1; transition: color 0.3s; }
.modal-scroll-hint { position:absolute; bottom:20px; left:50%; transform:translateX(-50%); width:38px; height:38px; background:var(--g-main); color:white; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:1.1rem; box-shadow: none; opacity:0; pointer-events:none; transition:opacity 0.3s; animation: modalHintBounce 2s infinite; z-index: 100; border: 2px solid white; }
@keyframes modalHintBounce { 0%,100%{transform:translate(-50%,0)} 50%{transform:translate(-50%,-6px)} }
.pie-legs { display:flex; flex-direction:column; gap:9px; }
.pie-leg { display:flex; align-items:center; gap:8px; font-size:0.82rem; color:var(--grey-600); }
.pie-dot { width:8px; height:8px; border-radius:50%; flex-shrink:0; }
.holdings-list { display:flex; flex-direction:column; gap:10px; }
.h-row { display:flex; justify-content:space-between; align-items:center; padding:12px 18px; background:var(--white); border-radius: var(--radius-sm); border:1px solid var(--grey-200); box-shadow: 0 2px 6px rgba(0,0,0,0.02); transition: all 0.2s ease; cursor: default; }
.h-row:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(0,0,0,0.06); border-color: rgba(26,107,60,0.15); }
.h-name { font-weight:700; font-size:0.88rem; color: var(--black); }
.h-pct  { font-weight:700; color:var(--g-main); font-size:0.88rem; }
.why-box { background:var(--g-bg); border-radius: var(--radius-sm); padding:22px 24px; margin-top:24px; border-left:4px solid var(--g-main); }
.why-box h3 { font-size:0.95rem; color:var(--g-dark); margin-bottom:9px; }
.why-box p  { font-size:0.85rem; color:var(--grey-600); line-height:1.7; margin:0; }
.modal-actions { display:flex; gap:10px; margin-top:28px; flex-wrap:wrap; }
.modal-actions .btn { flex:1; justify-content:center; }
.modal-actions .btn-green { box-shadow: 0 8px 20px rgba(26,107,60,0.25); }

/* FADE ANIMATION */
.fade-up { opacity:0; }

/* DIVIDER */
.section-divider { height: 1px; background: linear-gradient(90deg, transparent, var(--grey-200), transparent); margin: 0; }

.hero__feat-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; margin-top: 0; }
.hero__feat-card { background: var(--white); border: 1px solid rgba(26,107,60,0.1); border-radius: var(--radius); padding: 12px 12px 14px; transition: all 0.22s; box-shadow: 0 2px 12px rgba(26,107,60,0.07); }
.hero__feat-card:hover { transform: translateY(-2px); box-shadow: 0 6px 22px rgba(26,107,60,0.13); border-color: rgba(26,107,60,0.2); }
.hero__feat-card-icon { font-size: 1.5rem; margin-bottom: 10px; display: block; }
.hero__feat-card-title { color: var(--black); font-size: 0.88rem; font-weight: 800; margin-bottom: 5px; line-height: 1.3; }
.hero__feat-card-desc { color: var(--grey-500); font-size: 0.79rem; line-height: 1.65; margin: 0; }
@media (max-width: 680px) { .hero__feat-grid { grid-template-columns: repeat(2,1fr); } }
/* ═══ COMMERCIAL VIDEO — SCOPED CSS ═══ */

:root {
  --g1:#1A6B3C;--g2:#2E8B57;--g3:#6ee7a0;
  --r1:#991f1f;--r2:#c0392b;--r3:#e05252;
  --gold:#f0c040;
  --ease:cubic-bezier(.22,1,.36,1);
}
#ew-vid-wrap *,#ew-vid-wrap *::before,#ew-vid-wrap *::after{box-sizing:border-box;margin:0;padding:0}
#ew-vid-wrap {width:100%;height:100%;background:#000;overflow:hidden;
  font-family:var(--font-heading);color:#fff;-webkit-font-smoothing:antialiased}
#ew-vid-wrap #stage {
  position:absolute;
  top:0; left:0;
  width:182%; height:182%;
  transform:scale(0.55);
  transform-origin:top left;
  overflow:hidden;
}
#ew-vid-wrap #ac {position:absolute;inset:0;z-index:0;opacity:.55}
#ew-vid-wrap .lbox {position:fixed;left:0;right:0;z-index:80;background:#000;height:0;transition:height 1.1s var(--ease)}
#ew-vid-wrap #lt {top:0}#lb{bottom:0}
#ew-vid-wrap .lbox.open {height:clamp(16px,3.8vw,46px)}
#ew-vid-wrap #prog {position:fixed;bottom:0;left:0;height:2px;width:0;z-index:999;
  background:linear-gradient(90deg,var(--g1),var(--g3));box-shadow:0 0 7px rgba(78,222,138,.95)}
#ew-vid-wrap #mute-btn {position:absolute;top:8px;right:44px;z-index:9999;width:30px;height:30px;
  border-radius:50%;border:2px solid rgba(255,255,255,.5);background:rgba(0,0,0,.8);
  display:none;align-items:center;justify-content:center;cursor:pointer;color:#fff}
#ew-vid-wrap #mute-btn:hover {border-color:rgba(78,222,138,.38)}
#ew-vid-wrap #mute-btn.on {display:flex}
#ew-vid-wrap #sdot {position:fixed;bottom:15px;right:17px;z-index:999;font-size:.46rem;letter-spacing:.14em;color:rgba(255,255,255,.13)}
#ew-vid-wrap #rep {position:fixed;bottom:19px;left:50%;transform:translateX(-50%);z-index:999;
  font-size:.6rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(255,255,255,.3);border:1px solid rgba(255,255,255,.1);padding:7px 20px;
  border-radius: var(--radius-xl);cursor:pointer;display:none;background:rgba(0,0,0,.6);transition:.2s}
#ew-vid-wrap #rep:hover {color:#fff;border-color:rgba(78,222,138,.38)}
#ew-vid-wrap #ov {position:fixed;inset:0;z-index:9999;background:#000;cursor:pointer;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  transition:opacity 1.2s ease}
#ew-vid-wrap #ov.out {opacity:0;pointer-events:none}
#ew-vid-wrap .ovr {display:flex;align-items:center;gap:12px;margin-bottom:7px;animation:fu .8s .1s both}
#ew-vid-wrap .owm {font-family:var(--font-heading);font-size:1.2rem;font-weight:400}
#ew-vid-wrap .owm em {color:var(--g3);font-style:italic}
#ew-vid-wrap .otg {font-size:.55rem;letter-spacing:.25em;text-transform:uppercase;color:rgba(255,255,255,.68);
  margin-bottom:54px;animation:fu .8s .25s both}
#ew-vid-wrap .opl {width:66px;height:66px;border-radius:50%;background:linear-gradient(135deg,var(--g1),var(--g3));
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 0 55px rgba(46,139,87,.38);animation:fu .8s .4s both,pp 3s 1.2s infinite}
#ew-vid-wrap .opl:hover {transform:scale(1.07)}
#ew-vid-wrap .ocue {margin-top:15px;font-size:.54rem;letter-spacing:.1em;text-transform:uppercase;
  color:rgba(255,255,255,.13);animation:fu .8s .6s both}
@keyframes fu{from{opacity:0;transform:translateY(13px)}to{opacity:1;transform:translateY(0)}}
@keyframes pp{0%,100%{box-shadow:0 0 55px rgba(46,139,87,.38)}50%{box-shadow:0 0 95px rgba(78,222,138,.6)}}

/* Scenes */
#ew-vid-wrap .sc {position:absolute;inset:0;z-index:10;display:flex;align-items:center;
  justify-content:center;opacity:0;pointer-events:none;transition:opacity .65s ease;overflow:hidden}
#ew-vid-wrap .sc.live {opacity:1;pointer-events:auto}
#ew-vid-wrap .vig {position:absolute;inset:0;z-index:4;pointer-events:none;
  background:radial-gradient(ellipse 72% 68% at 50% 50%,transparent 18%,rgba(0,0,0,.76) 100%)}
#ew-vid-wrap .grn {position:absolute;inset:0;z-index:52;pointer-events:none;opacity:.02;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E")}

/* Atom animations */
#ew-vid-wrap .ao {opacity:0}.ao.go{animation:aoi .65s var(--ease) forwards}
@keyframes aoi{to{opacity:1}}
.au{opacity:0;transform:translateY(18px)}.au.go{animation:aui .68s var(--ease) forwards}
@keyframes aui{to{opacity:1;transform:translateY(0)}}
.sl{overflow:hidden;display:block}
#ew-vid-wrap .si {display:block;transform:translateY(105%)}
#ew-vid-wrap .si.go {animation:sli .72s var(--ease) forwards}
@keyframes sli{to{transform:translateY(0)}}

/* ═══ WALLET SVG HELPER ═══ */
#ew-vid-wrap .wsv {flex-shrink:0}

/* ════════════════════
   S1 — HIDDEN TAX
════════════════════ */
#ew-vid-wrap #s1 {background:#000}
#ew-vid-wrap .s1-bg {position:absolute;inset:0;background:radial-gradient(ellipse 65% 55% at 50% 50%,#0e0404,#000 68%)}
#ew-vid-wrap .s1-w {position:relative;z-index:10;width:100%;max-width:100%;padding:0 20px;
  display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:center}
#ew-vid-wrap .s1-ey {font-size:.78rem;letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.92);margin-bottom:13px}
#ew-vid-wrap .s1-h {font-family:var(--font-heading);font-size:clamp(1.1rem,2.8vw,1.7rem);
  font-weight:400;line-height:1.06;margin-bottom:20px}
#ew-vid-wrap .s1-h em {font-style:italic;color:var(--r3)}
#ew-vid-wrap .s1-bdg {display:inline-flex;align-items:center;gap:13px;padding:11px 18px;border-radius: var(--radius-xs);
  border:1px solid rgba(192,57,43,.28);background:rgba(192,57,43,.055);margin-bottom:17px}
#ew-vid-wrap .s1-bdg-n {font-family:var(--font);font-size:1.1rem;color:var(--r2);letter-spacing:.04em;line-height:1}
#ew-vid-wrap .s1-bdg-t {font-size:.82rem;letter-spacing:.04em;color:rgba(255,255,255,.5);line-height:1.5;max-width:150px}
#ew-vid-wrap .s1-body {font-size:clamp(.68rem,1vw,.8rem);color:rgba(255,255,255,.92);line-height:1.8;margin-bottom:20px}
#ew-vid-wrap .s1-body strong {color:rgba(255,255,255,.85)}
#ew-vid-wrap .s1-tags {display:flex;flex-wrap:wrap;gap:6px}
#ew-vid-wrap .s1-tp {font-size:.72rem;letter-spacing:.04em;padding:6px 13px;border-radius: var(--radius-lg);border:1px solid rgba(255,255,255,.09);color:rgba(255,255,255,.85)}
#ew-vid-wrap .s1-tp.r {border-color:rgba(192,57,43,.26);color:rgba(192,57,43,.75);background:rgba(192,57,43,.04)}
/* Right side */
#ew-vid-wrap .s1-r {display:flex;flex-direction:column;gap:14px}
#ew-vid-wrap .s1-flow {display:flex;align-items:center;justify-content:space-between;
  padding:18px 22px;border-radius: var(--radius-sm);background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.06)}
#ew-vid-wrap .s1-fn {text-align:center;flex:1}
#ew-vid-wrap .s1-fi {font-size:2rem;line-height:1;margin-bottom:5px}
#ew-vid-wrap .s1-fv {font-family:var(--font);font-size:1.2rem;letter-spacing:.04em;color:rgba(255,255,255,.6);line-height:1}
#ew-vid-wrap .s1-fl {font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;color:rgba(255,255,255,.82);margin-top:3px}
#ew-vid-wrap .s1-fa {display:flex;flex-direction:column;align-items:center;gap:3px;flex-shrink:0;padding:0 6px}
#ew-vid-wrap .s1-fal {height:2px;width:38px;background:linear-gradient(90deg,rgba(192,57,43,.35),var(--r2))}
#ew-vid-wrap .s1-fat {width:0;height:0;border-left:7px solid var(--r2);border-top:4px solid transparent;border-bottom:4px solid transparent}
#ew-vid-wrap .s1-fap {font-family:var(--font);font-size:1rem;color:var(--r2);letter-spacing:.04em;margin-top:2px}
/* Meter */
#ew-vid-wrap .s1-mtr {padding:15px 18px;border-radius: var(--radius-sm);background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.06)}
#ew-vid-wrap .s1-mh {display:flex;justify-content:space-between;align-items:center;margin-bottom:9px}
#ew-vid-wrap .s1-mt {font-size:.76rem;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.4)}
#ew-vid-wrap .s1-mv {font-family:var(--font);font-size:1.1rem;color:var(--r2);letter-spacing:.04em}
#ew-vid-wrap .s1-mtr-t {height:9px;border-radius:4.5px;background:rgba(255,255,255,.055);overflow:hidden}
#ew-vid-wrap .s1-mf {height:100%;width:0;border-radius:4.5px;
  background:linear-gradient(90deg,#6b1010,var(--r2),var(--r3));
  box-shadow:0 0 9px rgba(192,57,43,.38);transition:width 1.75s var(--ease)}
#ew-vid-wrap .s1-mf.go {width:70%}
#ew-vid-wrap .s1-mtks {display:flex;justify-content:space-between;margin-top:5px}
#ew-vid-wrap .s1-mtk {font-size:.65rem;color:rgba(255,255,255,.75);letter-spacing:.04em}
#ew-vid-wrap .s1-mtk.h {color:rgba(192,57,43,.55)}
/* Grid */
#ew-vid-wrap .s1-grd {display:grid;grid-template-columns:1fr 1fr 1fr;gap:7px}
#ew-vid-wrap .s1-gc {padding:11px 9px;border-radius: var(--radius-xs);text-align:center;
  background:rgba(255,255,255,.022);border:1px solid rgba(255,255,255,.06);
  opacity:0;transform:translateY(9px);
  transition:opacity .5s ease,transform .5s var(--ease)}
#ew-vid-wrap .s1-gc.go {opacity:1;transform:translateY(0)}
#ew-vid-wrap .s1-gp {font-size:.68rem;letter-spacing:.05em;text-transform:uppercase;color:rgba(255,255,255,.82);margin-bottom:4px}
#ew-vid-wrap .s1-gf {font-family:var(--font);font-size:1.2rem;color:var(--r2);letter-spacing:.04em;line-height:1}
#ew-vid-wrap .s1-gn {font-size:.64rem;color:rgba(255,255,255,.3);margin-top:2px}
/* Bottom sting */
#ew-vid-wrap .s1-st {font-family:var(--font-heading);font-size:clamp(.68rem,1.1vw,.82rem);
  font-style:italic;color:rgba(255,255,255,.85);text-align:center;line-height:1.4;margin-top:2px}
#ew-vid-wrap .s1-st em {color:var(--r3)}

/* ════════════════════
   S2 — COMPOUNDING COST
════════════════════ */
#ew-vid-wrap #s2 {background:#000}
#ew-vid-wrap .s2-bg {position:absolute;inset:0;background:radial-gradient(ellipse 62% 55% at 50% 55%,#090200,#000 66%)}
#ew-vid-wrap .s2-w {position:relative;z-index:10;width:100%;max-width:100%;padding:0 20px;
  display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:center}
#ew-vid-wrap .s2-ey {font-size:.78rem;letter-spacing:.18em;text-transform:uppercase;color:rgba(220,70,50,1.0);margin-bottom:11px}
#ew-vid-wrap .s2-h {font-family:var(--font-heading);font-size:clamp(1.1rem,2.6vw,1.6rem);
  font-weight:400;line-height:1.06;margin-bottom:17px}
#ew-vid-wrap .s2-h em {font-style:italic;color:var(--r2)}
#ew-vid-wrap .s2-body {font-size:clamp(.68rem,1vw,.8rem);color:rgba(255,255,255,.92);line-height:1.8;margin-bottom:18px}
#ew-vid-wrap .s2-body strong {color:rgba(255,255,255,.82)}
#ew-vid-wrap .s2-stat {display:inline-flex;flex-direction:column;padding:13px 20px;border-radius: var(--radius-xs);
  border:1px solid rgba(192,57,43,.2);background:rgba(192,57,43,.05)}
#ew-vid-wrap .s2-sv {font-family:var(--font);font-size:1.3rem;color:var(--r2);letter-spacing:.04em;line-height:1}
#ew-vid-wrap .s2-sl {font-size:.75rem;letter-spacing:.07em;text-transform:uppercase;color:rgba(255,255,255,.82);margin-top:4px}
/* Bar chart */
#ew-vid-wrap .s2-ca {display:flex;flex-direction:column}
#ew-vid-wrap .s2-ct {font-size:.76rem;letter-spacing:.07em;text-transform:uppercase;color:rgba(255,255,255,.82);margin-bottom:16px;text-align:center}
#ew-vid-wrap .s2-bars {display:flex;align-items:flex-end;justify-content:center;gap:24px;
  height:200px;padding:0 8px;border-bottom:1px solid rgba(255,255,255,.07)}
#ew-vid-wrap .s2-bg2 {display:flex;flex-direction:column;align-items:center;gap:0;flex:1;max-width:96px}
#ew-vid-wrap .s2-bt {margin-bottom:7px;min-height:28px;display:flex;align-items:flex-end;justify-content:center}
#ew-vid-wrap .s2-ba {font-family:var(--font);font-size:1.05rem;letter-spacing:.04em;line-height:1}
#ew-vid-wrap .s2-b {width:100%;border-radius:5px 5px 0 0;transform-origin:bottom;transform:scaleY(0);transition:transform 1.1s var(--ease)}
#ew-vid-wrap .s2-b.grow {transform:scaleY(1)}
#ew-vid-wrap .b-nf {background:rgba(255,255,255,.17);height:185px}
#ew-vid-wrap .b-ew {background:linear-gradient(to top,var(--g-main),var(--g3));height:158px;box-shadow:0 0 22px rgba(78,222,138,.18)}
#ew-vid-wrap .b-mf {background:linear-gradient(to top,#7a1010,var(--r2));height:110px}
/* Gap bracket */
#ew-vid-wrap .s2-gap-col {display:flex;flex-direction:column;align-items:center;justify-content:flex-end;
  height:158px;width:20px;flex-shrink:0;position:relative;padding-bottom:0}
#ew-vid-wrap .s2-gbr {width:2px;background:rgba(255,210,50,.32);flex:1;max-height:48px;border-radius:1px;
  transform:scaleY(0);transform-origin:bottom;transition:transform .75s 1.2s var(--ease)}
#ew-vid-wrap .s2-gbr.grow {transform:scaleY(1)}
#ew-vid-wrap .s2-gl {position:absolute;top:50%;left:5px;transform:translateY(-50%);
  font-size:.62rem;color:rgba(255,210,50,.7);letter-spacing:.04em;white-space:nowrap;line-height:1.4}
/* Labels row */
#ew-vid-wrap .s2-lbls {display:flex;justify-content:center;gap:24px;margin-top:9px;padding:0 8px}
#ew-vid-wrap .s2-lb {flex:1;max-width:96px;text-align:center}
#ew-vid-wrap .s2-lbn {font-size:.78rem;font-weight:600;line-height:1.3}
#ew-vid-wrap .s2-lbs {font-size:.68rem;color:rgba(255,255,255,.78);margin-top:2px}
#ew-vid-wrap .s2-note {font-size:.72rem;color:rgba(255,255,255,.75);text-align:center;margin-top:9px;letter-spacing:.04em}

/* ════════════════════
   S3 — SOLUTION
════════════════════ */
#ew-vid-wrap #s3 {background:#000}
#ew-vid-wrap .s3-glow {position:absolute;width:680px;height:680px;border-radius:50%;
  background:radial-gradient(circle,rgba(46,139,87,.11),transparent 64%);
  top:50%;left:50%;transform:translate(-50%,-50%);pointer-events:none;
  animation:gp 3.8s ease-in-out infinite;z-index:2}
@keyframes gp{0%,100%{opacity:.5;transform:translate(-50%,-50%) scale(1)}50%{opacity:1;transform:translate(-50%,-50%) scale(1.14)}}
.s3-aurora{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden}
#ew-vid-wrap .s3-ab {position:absolute;left:-20%;width:140%;height:28%;border-radius:50%;
  filter:blur(68px);opacity:0;animation:ad 7s ease-in-out infinite}
#ew-vid-wrap .s3-ab:nth-child(1) {top:18%;background:linear-gradient(135deg,rgba(26,107,60,.2),rgba(78,222,138,.09),transparent);animation-delay:0s}
#ew-vid-wrap .s3-ab:nth-child(2) {top:35%;background:linear-gradient(135deg,transparent,rgba(46,139,87,.16),rgba(26,70,40,.1));animation-delay:2.3s}
#ew-vid-wrap .s3-ab:nth-child(3) {top:50%;background:linear-gradient(135deg,rgba(78,222,138,.06),transparent,rgba(26,107,60,.13));animation-delay:4.6s}
@keyframes ad{0%,100%{opacity:0;transform:translateX(-4%) skewX(-6deg)}35%{opacity:.65}50%{opacity:1;transform:translateX(4%) skewX(6deg)}65%{opacity:.65}}
.s3-w{position:relative;z-index:10;text-align:center;max-width:100%;padding:0 18px}
#ew-vid-wrap .s3-ey {font-size:.78rem;letter-spacing:.18em;text-transform:uppercase;color:rgba(78,222,138,.98);margin-bottom:16px}
#ew-vid-wrap .s3-lr {display:flex;align-items:center;justify-content:center;gap:12px;margin-bottom:22px}
#ew-vid-wrap .s3-wm {font-family:var(--font-heading);font-size:1rem;font-weight:400}
#ew-vid-wrap .s3-wm em {font-style:italic;color:var(--g3)}
#ew-vid-wrap .s3-pr {font-family:var(--font);font-size:clamp(1.8rem,5vw,3rem);
  color:var(--g3);letter-spacing:.04em;line-height:.9;text-shadow:0 0 55px rgba(78,222,138,.2)}
#ew-vid-wrap .s3-pu {font-size:.88rem;letter-spacing:.14em;text-transform:uppercase;color:rgba(78,222,138,.97);margin-bottom:15px}
#ew-vid-wrap .s3-tg {font-family:var(--font-heading);font-size:clamp(.85rem,1.6vw,1.15rem);
  font-style:italic;color:rgba(255,255,255,.65);margin-bottom:26px}
#ew-vid-wrap .s3-cmp {display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
#ew-vid-wrap .s3-cd {padding:13px 22px;border-radius: var(--radius-xs);text-align:center;min-width:170px}
#ew-vid-wrap .s3-cd.bad {border:1px solid rgba(192,57,43,.2);background:rgba(192,57,43,.05)}
#ew-vid-wrap .s3-cd.good {border:1px solid rgba(78,222,138,.24);background:rgba(78,222,138,.055);box-shadow:0 0 32px rgba(78,222,138,.09)}
#ew-vid-wrap .s3-cl {font-size:.72rem;letter-spacing:.07em;text-transform:uppercase;color:rgba(255,255,255,.82);margin-bottom:5px}
#ew-vid-wrap .s3-cv {font-family:var(--font);font-size:1rem;letter-spacing:.04em;line-height:1}
#ew-vid-wrap .s3-cd.bad .s3-cv {color:rgba(192,57,43,.75)}
#ew-vid-wrap .s3-cd.good .s3-cv {color:var(--g3)}
#ew-vid-wrap .s3-cn {font-size:.68rem;color:rgba(255,255,255,.78);margin-top:3px;letter-spacing:.04em}
#ew-vid-wrap .s3-sw {position:relative;display:inline-block}
#ew-vid-wrap .s3-sl {position:absolute;top:50%;left:-3%;width:0;height:2px;background:var(--r2);transform:translateY(-50%)}
#ew-vid-wrap .s3-sl.draw {animation:sdk .5s .3s ease forwards}
@keyframes sdk{to{width:106%}}

/* ════════════════════
   S4 — PHILOSOPHY
════════════════════ */
#ew-vid-wrap #s4 {background:#000}
#ew-vid-wrap .s4-bg {position:absolute;inset:0;background:radial-gradient(ellipse 55% 50% at 50% 50%,rgba(46,139,87,.055),transparent 65%)}
#ew-vid-wrap .s4-w {position:relative;z-index:10;width:100%;max-width:100%;padding:0 18px}
#ew-vid-wrap .s4-ey {font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;color:rgba(78,222,138,.6);margin-bottom:13px}
#ew-vid-wrap .s4-h {font-family:var(--font-heading);font-size:clamp(1.05rem,2.3vw,1.5rem);
  font-weight:400;line-height:1.05;margin-bottom:34px}
#ew-vid-wrap .s4-h em {font-style:italic;color:var(--g3)}
#ew-vid-wrap .s4-its {display:flex;flex-direction:column;gap:2px}
#ew-vid-wrap .s4-it {display:flex;align-items:flex-start;gap:14px;padding:12px 0;
  border-bottom:1px solid rgba(255,255,255,.04);
  opacity:0;transform:translateX(-13px);
  transition:opacity .62s ease,transform .62s var(--ease)}
#ew-vid-wrap .s4-it:last-child {border-bottom:none}
#ew-vid-wrap .s4-it.go {opacity:1;transform:translateX(0)}
#ew-vid-wrap .s4-ico {font-size:1.2rem;flex-shrink:0;width:36px;height:36px;border-radius: var(--radius-sm);
  display:flex;align-items:center;justify-content:center;
  background:rgba(78,222,138,.08);border:1px solid rgba(78,222,138,.14)}
#ew-vid-wrap .s4-tx {}
#ew-vid-wrap .s4-ti {font-size:1rem;font-weight:700;color:#fff;margin-bottom:3px;line-height:1.3}
#ew-vid-wrap .s4-ts {font-size:.8rem;color:rgba(255,255,255,.85);line-height:1.5}
#ew-vid-wrap .s4-ts em {color:var(--g3);font-style:italic}

/* ════════════════════
   S5 — HOW IT WORKS
════════════════════ */
#ew-vid-wrap #s5 {background:#000}
#ew-vid-wrap .s5-bg {position:absolute;inset:0;background:radial-gradient(ellipse 62% 55% at 50% 50%,rgba(46,139,87,.065),transparent 64%)}
#ew-vid-wrap .s5-w {position:relative;z-index:10;text-align:center;width:100%;max-width:100%;padding:0 18px}
#ew-vid-wrap .s5-ey {font-size:.78rem;letter-spacing:.18em;text-transform:uppercase;color:rgba(78,222,138,.6);margin-bottom:11px}
#ew-vid-wrap .s5-h {font-family:var(--font-heading);font-size:clamp(1rem,2.2vw,1.4rem);
  font-weight:400;line-height:1.05;margin-bottom:42px}
#ew-vid-wrap .s5-h em {font-style:italic;color:var(--g3)}
#ew-vid-wrap .s5-stp {display:flex;align-items:flex-start;justify-content:center;gap:0;position:relative;margin-bottom:36px}
#ew-vid-wrap .s5-ct {position:absolute;top:21px;left:calc(12.5% + 20px);width:calc(75% - 40px);
  height:1px;background:rgba(255,255,255,.055);z-index:0}
#ew-vid-wrap .s5-cf {height:100%;width:0;background:linear-gradient(90deg,rgba(78,222,138,.95),rgba(78,222,138,.18));
  transition:width 2s .3s var(--ease);box-shadow:0 0 4px rgba(78,222,138,.14)}
#ew-vid-wrap .s5-cf.draw {width:100%}
#ew-vid-wrap .s5-s {flex:1;text-align:center;z-index:1;opacity:0;transform:translateY(13px);
  transition:opacity .68s ease,transform .68s var(--ease)}
#ew-vid-wrap .s5-s.go {opacity:1;transform:translateY(0)}
#ew-vid-wrap .s5-sn {font-family:var(--font);font-size:.8rem;letter-spacing:.16em;color:rgba(78,222,138,.5);margin-bottom:9px}
#ew-vid-wrap .s5-sd {width:48px;height:48px;border-radius:50%;margin:0 auto 12px;
  border:1px solid rgba(78,222,138,.22);background:rgba(78,222,138,.06);
  display:flex;align-items:center;justify-content:center;font-size:1.2rem}
#ew-vid-wrap .s5-sl2 {font-size:.9rem;font-weight:700;color:#fff;margin-bottom:5px}
#ew-vid-wrap .s5-sc {font-size:.74rem;color:rgba(255,255,255,.82);line-height:1.5}
#ew-vid-wrap .s5-tg {font-family:var(--font-heading);font-size:clamp(.85rem,1.6vw,1.15rem);
  font-style:italic;color:rgba(255,255,255,.65)}
#ew-vid-wrap .s5-tg em {color:var(--g3)}
#ew-vid-wrap .s5-sebi {margin-top:13px;font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:rgba(78,222,138,.95)}

/* ════════════════════
   S5b — SIT BACK & RELAX (Rebalancing)
════════════════════ */
#ew-vid-wrap #s5b {background:#000}
#ew-vid-wrap .s5b-bg {position:absolute;inset:0;background:radial-gradient(ellipse 70% 60% at 50% 50%,rgba(20,80,44,.12),transparent 65%)}
#ew-vid-wrap .s5b-w {position:relative;z-index:10;width:100%;max-width:100%;padding:0 18px;
  display:grid;grid-template-columns:1fr;gap:14px;align-items:center}
@media(max-width:700px){.s5b-w{grid-template-columns:1fr;gap:32px;padding:0 28px}}

/* Left */
#ew-vid-wrap .s5b-step-badge {display:inline-flex;align-items:center;gap:8px;
  padding:4px 12px 4px 4px;border-radius: var(--radius-lg);border:1px solid rgba(78,222,138,.25);
  background:rgba(78,222,138,.06);margin-bottom:16px}
#ew-vid-wrap .s5b-step-dot {width:22px;height:22px;border-radius:50%;
  background:var(--g2);display:flex;align-items:center;justify-content:center;
  font-family:var(--font);font-size:.7rem;color:#fff;letter-spacing:.04em}
#ew-vid-wrap .s5b-step-label {font-size:.76rem;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(78,222,138,.75)}
#ew-vid-wrap .s5b-h {font-family:var(--font-heading);
  font-size:clamp(1.1rem,2.8vw,1.65rem);font-weight:700;
  line-height:1.05;margin-bottom:16px;color:#fff;font-style:normal}
#ew-vid-wrap .s5b-body {font-size:clamp(.68rem,1vw,.8rem);color:rgba(255,255,255,.92);
  line-height:1.8;margin-bottom:22px}
#ew-vid-wrap .s5b-body strong {color:rgba(255,255,255,.85)}
#ew-vid-wrap .s5b-bullets {display:flex;flex-wrap:wrap;gap:8px}
#ew-vid-wrap .s5b-bl {display:flex;align-items:center;gap:6px;
  font-size:.78rem;letter-spacing:.04em;color:rgba(78,222,138,.75)}
#ew-vid-wrap .s5b-bl::before {content:'';width:5px;height:5px;border-radius:50%;
  background:var(--g3);flex-shrink:0}

/* Right: notification cards */
#ew-vid-wrap .s5b-cards {display:flex;flex-direction:column;gap:12px}
#ew-vid-wrap .s5b-card {display:flex;align-items:center;gap:14px;
  padding:16px 20px;border-radius: var(--radius);
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.07);
  opacity:0;transform:translateX(22px);
  transition:opacity .6s ease,transform .6s cubic-bezier(.22,1,.36,1)}
#ew-vid-wrap .s5b-card.go {opacity:1;transform:translateX(0)}
#ew-vid-wrap .s5b-card.active {background:rgba(78,222,138,.07);border-color:rgba(78,222,138,.22);
  box-shadow:0 0 22px rgba(78,222,138,.08)}
#ew-vid-wrap .s5b-card-icon {font-size:1.5rem;flex-shrink:0;width:36px;text-align:center}
#ew-vid-wrap .s5b-card-text {font-size:.82rem;font-weight:600;color:#fff;line-height:1.3}
#ew-vid-wrap .s5b-card-sub {font-size:.6rem;color:rgba(255,255,255,.3);margin-top:2px}
/* Animated checkmark on 3rd card */
#ew-vid-wrap .s5b-check {width:22px;height:22px;border-radius:50%;
  background:var(--g2);display:flex;align-items:center;justify-content:center;
  margin-left:auto;flex-shrink:0;opacity:0;transform:scale(.5);
  transition:opacity .4s ease,transform .4s cubic-bezier(.22,1,.36,1)}
#ew-vid-wrap .s5b-check.pop {opacity:1;transform:scale(1)}

/* ════════════════════
   S6 — PUNCHY CLOSE (complete redesign)
════════════════════ */
#ew-vid-wrap #s6 {background:#000}
#ew-vid-wrap #s6pc {position:absolute;inset:0;z-index:1;pointer-events:none}
/* Multi-layer green glow */
#ew-vid-wrap .s6-glow {position:absolute;width:700px;height:700px;border-radius:50%;
  background:radial-gradient(circle,rgba(46,139,87,.18),transparent 60%);
  top:50%;left:50%;transform:translate(-50%,-50%);z-index:2;
  animation:gp 2.8s ease-in-out infinite;pointer-events:none}
#ew-vid-wrap .s6-glow2 {position:absolute;width:400px;height:400px;border-radius:50%;
  background:radial-gradient(circle,rgba(78,222,138,.12),transparent 60%);
  top:50%;left:50%;transform:translate(-50%,-50%);z-index:2;
  animation:gp 2s .6s ease-in-out infinite;pointer-events:none}
/* Rotating ring behind CTA */
#ew-vid-wrap .s6-ring {position:absolute;width:420px;height:420px;border-radius:50%;
  border:1px solid rgba(78,222,138,.12);
  top:50%;left:50%;transform:translate(-50%,-50%);z-index:3;
  animation:spin 12s linear infinite;pointer-events:none}
#ew-vid-wrap .s6-ring::before {content:'';position:absolute;top:-3px;left:50%;
  width:6px;height:6px;border-radius:50%;background:var(--g3);
  box-shadow:0 0 10px var(--g3),0 0 20px var(--g3);margin-left:-3px}
@keyframes spin{to{transform:translate(-50%,-50%) rotate(360deg)}}

#ew-vid-wrap .s6-w {position:relative;z-index:10;text-align:center;max-width:100%;padding:0 18px}

/* Logo row */
#ew-vid-wrap .s6-lr {display:flex;align-items:center;justify-content:center;gap:12px;margin-bottom:16px}
#ew-vid-wrap .s6-wm {font-family:var(--font-heading);font-size:1rem;font-weight:400}
#ew-vid-wrap .s6-wm em {font-style:italic;color:var(--g3)}

/* Punchy tagline */
#ew-vid-wrap .s6-tag-top {font-size:.82rem;letter-spacing:.22em;text-transform:uppercase;
  color:rgba(78,222,138,.6);margin-bottom:12px}

/* HERO headline */
#ew-vid-wrap .s6-h {font-family:var(--font-heading);font-size:clamp(1.4rem,3.6vw,2.4rem);
  font-weight:400;line-height:.92;margin-bottom:20px}
#ew-vid-wrap .s6-h em {font-style:italic;color:var(--g3);
  text-shadow:0 0 50px rgba(78,222,138,.4)}

/* Bold tagline beneath headline */
#ew-vid-wrap .s6-punch {font-size:clamp(.68rem,1.1vw,.85rem);color:rgba(255,255,255,.92);
  line-height:1.65;margin-bottom:28px;max-width:620px;margin-left:auto;margin-right:auto}
#ew-vid-wrap .s6-punch strong {color:#fff}

/* Stats strip */
#ew-vid-wrap .s6-stats {display:flex;gap:0;justify-content:center;margin-bottom:32px;flex-wrap:wrap}
#ew-vid-wrap .s6-stat {padding:10px 24px;text-align:center;border-right:1px solid rgba(255,255,255,.08)}
#ew-vid-wrap .s6-stat:last-child {border-right:none}
#ew-vid-wrap .s6-stat-val {font-family:var(--font);font-size:1rem;color:var(--g3);
  letter-spacing:.04em;line-height:1}
#ew-vid-wrap .s6-stat-label {font-size:.65rem;color:rgba(255,255,255,.78);letter-spacing:.06em;
  text-transform:uppercase;margin-top:3px}

/* CTA button — bigger, bolder */
#ew-vid-wrap .s6-cta {display:inline-flex;align-items:center;gap:10px;
  background:linear-gradient(135deg,var(--g1),var(--g2));color:#fff;
  font-family:var(--font-heading);font-size:.88rem;font-weight:800;
  letter-spacing:.1em;text-transform:uppercase;
  padding:16px 40px;border-radius:50px;border:none;cursor:pointer;
  animation:cb 2.2s ease-in-out infinite;transition:transform .2s}
#ew-vid-wrap .s6-cta:hover {transform:translateY(-3px) scale(1.03)}
@keyframes cb{
  0%,100%{box-shadow:0 0 55px rgba(46,139,87,.45),0 10px 32px rgba(0,0,0,.4)}
#ew-vid-wrap 50% {box-shadow:0 0 100px rgba(78,222,138,.98),0 14px 42px rgba(0,0,0,.4)}
}
#ew-vid-wrap .s6-arrow {display:inline-block;animation:bounce 1.2s ease-in-out infinite}
@keyframes bounce{0%,100%{transform:translateX(0)}50%{transform:translateX(5px)}}

#ew-vid-wrap .s6-sebi {margin-top:16px;font-size:.62rem;letter-spacing:.07em;color:rgba(255,255,255,.68)}

/* Pause button */
#ew-vid-wrap #pause-btn {
  position:absolute;top:8px;right:8px;z-index:9999;width:30px;height:30px;
  border-radius:50%;border:2px solid rgba(255,255,255,.5);background:rgba(0,0,0,.8);
  display:none;align-items:center;justify-content:center;cursor:pointer;color:#fff;
}

/* ── Video embed in hero (additive only — no existing styles changed) ── */
.hero__video-box {
  background: #0a120c;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--grey-100);
  box-shadow: 0 8px 32px rgba(0,0,0,.18);
  position: relative;
  aspect-ratio: 16 / 9;
  margin-bottom: 0;
  flex: 1;
  min-height: 320px;
}
#ew-vid-wrap {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
#ew-vid-wrap #stage {
  position: absolute !important;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
}
#ew-vid-wrap .sc {
  position: absolute !important;
  inset: 0;
}
#ew-vid-wrap canvas#ac {
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
}
#ew-vid-wrap #lt,
#ew-vid-wrap #lb {
  position: absolute !important;
  left: 0; right: 0;
  z-index: 80; background: #000;
  height: 0;
  transition: height .8s cubic-bezier(.22,1,.36,1);
}
#ew-vid-wrap #lt { top: 0; }
#ew-vid-wrap #lb { bottom: 0; }
#ew-vid-wrap #lt.open,
#ew-vid-wrap #lb.open { height: clamp(14px, 3vw, 36px); }
#ew-vid-wrap #ov {
  position: absolute !important;
  inset: 0; z-index: 9999;
}
/* ── Video controls ── */
#ew-vid-wrap #mute-btn {
  position:absolute;
  top:8px; right:44px; z-index:9999;
  width:30px; height:30px; border-radius:50%;
  border:2px solid rgba(255,255,255,.5);
  background:rgba(0,0,0,.8);
  display:none; align-items:center; justify-content:center;
  cursor:pointer; color:#fff;
}
#ew-vid-wrap #mute-btn.on { display:flex; }
#ew-vid-wrap #pause-btn {
  position:absolute;
  top:8px; right:8px; z-index:9999;
  width:30px; height:30px; border-radius:50%;
  border:2px solid rgba(255,255,255,.5);
  background:rgba(0,0,0,.8);
  display:none; align-items:center; justify-content:center;
  cursor:pointer; color:#fff;
}
#ew-vid-wrap #pause-btn.vis { display:flex; }
#ew-vid-wrap #mute-btn:hover,
#ew-vid-wrap #pause-btn:hover {
  background:rgba(10,10,10,.95);
  border-color:rgba(255,255,255,.9);
}

#ew-vid-wrap #rep {
  position: absolute !important;
  bottom: 14px; left: 50%;
  transform: translateX(-50%); z-index: 999;
}
#ew-vid-wrap #prog {
  position: absolute !important;
  bottom: 0; left: 0; right: 0; z-index: 999;
}
.hero__video-label {
  font-size: 0.7rem; font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--g-main);
  display: flex; align-items: center; gap: 7px;
  margin-bottom: 10px; padding-left: 2px;
}
.hero__video-label::before {
  content: '';
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--g-main);
  animation: pulse 1.6s ease-in-out infinite;
  flex-shrink: 0;
}

/* ── Info tab variant ── */
.hlf-row.hlf-info {
  background: var(--white);
  border-left-color: var(--g-main);
  border-color: rgba(26,107,60,.15);
  padding: 14px 16px;
}

/* ── Left-column inline feature rows ── */
.hero__left-feats { display:flex; flex-direction:column; gap:8px; margin:20px 0 24px; }
.hlf-row {
  display:flex; align-items:center; gap:12px;
  background:var(--white);
  border:1px solid rgba(26,107,60,.12);
  border-left:3px solid var(--g-main);
  border-radius: var(--radius-sm); padding:11px 14px;
  box-shadow:0 1px 6px rgba(0,0,0,.04);
  transition:box-shadow .2s, border-color .2s;
}
.hlf-row:hover { box-shadow: none; border-color:var(--g-soft); }
.hlf-row.hlf-highlight {
  background: linear-gradient(135deg, #f0fdf4, #e8f5ee);
  border-left-color: var(--g-dark);
  border-color: rgba(26,107,60,.25);
}
.hlf-icon {
  width:36px; height:36px; border-radius: var(--radius-sm); flex-shrink:0;
  background:var(--g-bg); display:flex; align-items:center;
  justify-content:center; font-size:1rem;
}
.hlf-highlight .hlf-icon { background:rgba(20,83,45,.1); }
.hlf-title { font-size:.88rem; font-weight:700; color:var(--black); }
.hlf-sub   { font-size:.76rem; color:var(--grey-400); margin-top:1px; line-height:1.4; }
.hlf-val   {
  margin-left:auto; flex-shrink:0;
  font-family:var(--font-heading); font-weight:800;
  font-size:1.05rem; color:var(--g-dark);
  white-space:nowrap;
}
.hlf-val small { font-size:.65rem; font-weight:600; color:var(--grey-400); display:block; text-align:right; }

/* ═══════════════════════════════════════════════════════════
   HERO RIGHT PANEL — FINAL OVERRIDE
   Video in a beautiful framed container, no empty space
═══════════════════════════════════════════════════════════ */

/* Right column: dark bg with subtle pattern, video centred */
.hero__right {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  background: #0e1f14 !important;
  padding: 48px 40px !important;
  position: relative !important;
  overflow: hidden !important;
  gap: 0 !important;
}

/* Decorative radial glow behind video */
.hero__right::before {
  content: '';
  position: absolute;
  width: 80%; height: 80%;
  top: 10%; left: 10%;
  background: radial-gradient(ellipse at center,
    rgba(78,222,138,.06) 0%, transparent 65%);
  pointer-events: none;
}

/* Decorative dot grid */
.hero__right::after {
  content: '';
  position: absolute; inset: 0;
  background-image: radial-gradient(circle, rgba(78,222,138,.08) 1px, transparent 1px);
  background-size: 28px 28px;
  pointer-events: none;
}

/* Video label — above the frame */
.hero__video-label {
  position: relative !important;
  top: auto !important; left: auto !important;
  z-index: 10;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #6ee7a0 !important;
  display: flex !important;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
  padding: 0 !important;
  width: 100%;
  max-width: 520px;
}
.hero__video-label::before {
  content: '';
  width: 7px; height: 7px; border-radius: 50%;
  background: #6ee7a0;
  animation: pulse 1.6s ease-in-out infinite;
  flex-shrink: 0;
}

/* The framed video box */
.hero__video-box {
  display: block !important;
  flex: none !important;
  width: 100% !important;
  max-width: 520px !important;
  aspect-ratio: 9 / 14 !important;
  background: #060e08 !important;
  border-radius: var(--radius-lg) !important;
  overflow: hidden !important;
  border: 1px solid rgba(78,222,138,.2) !important;
  box-shadow:
    0 0 0 1px rgba(78,222,138,.08),
    0 24px 64px rgba(0,0,0,.5),
    0 8px 24px rgba(0,0,0,.3) !important;
  position: relative !important;
  min-height: unset !important;
}

/* ew-vid-wrap fills its container */
#ew-vid-wrap {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  overflow: hidden !important;
}

/* Stage scaling for framed 9:14 container */
#ew-vid-wrap #stage {
  position: absolute !important;
  top: 0 !important; left: 0 !important;
  width: 182% !important;
  height: 182% !important;
  transform: scale(0.55) !important;
  transform-origin: top left !important;
  overflow: hidden !important;
}

/* Responsive */
@media (max-width: 1024px) {
  .hero__right { padding: 40px 24px !important; }
  .hero__video-box { max-width: 380px !important; }
}
@media (max-width: 640px) {
  .hero__right { padding: 32px 16px !important; }
  .hero__video-box { max-width: 100% !important; aspect-ratio: 16/10 !important; }
}

#ew-toast { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%) translateY(80px); padding: 12px 20px; border-radius: 10px; font-size: 0.9rem; font-weight: 500; color: #fff; z-index: 9999; opacity: 0; transition: all 0.3s ease; pointer-events: none; max-width: 360px; text-align: center; }
#ew-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
#ew-toast.success { background: #1A6B3C; }
#ew-toast.error { background: #B91C1C; }
#ew-toast.info { background: #484844; }

/* ═════════════════════════════════════
   INVESTMENT BASKETS — rail + detail stage
═════════════════════════════════════ */
.bkx { display: grid; grid-template-columns: minmax(0,296px) minmax(0,1fr); gap: 26px; align-items: start; }
.bkx-rail, .bkx-stage { min-width: 0; }

/* ── Left rail: heading + basket selector ── */
.bkx-hd h2 {
  font-family: var(--font-heading); font-size: clamp(1.45rem, 2.1vw, 1.85rem);
  font-weight: 800; letter-spacing: -.032em; line-height: 1.18;
  color: var(--black); margin: 0 0 12px;
}
.bkx-hd h2 .bk-hl { color: var(--g-main); }
.bkx-hd p { font-size: .85rem; line-height: 1.6; color: var(--grey-500); margin: 0 0 22px; }

.bkx-tabs { display: flex; flex-direction: column; gap: 12px; }
.bkx-tab {
  width: 100%; text-align: left; cursor: pointer; font-family: var(--font);
  display: grid; grid-template-columns: auto minmax(0,1fr) auto; align-items: center; gap: 13px;
  background: var(--white); border: 1px solid #E3EBE6; border-radius: var(--radius);
  padding: 15px; box-shadow: var(--shadow-xs);
  transition: border-color .25s, background .25s, box-shadow .25s, transform .25s;
}
.bkx-tab:hover { border-color: rgba(26,107,60,.42); transform: translateX(2px); }
.bkx-tab__ico { width: 24px; height: 24px; display: grid; place-items: center; color: var(--g-main); }
.bkx-tab__ico svg { width: 23px; height: 23px; stroke-width: 1.7; }
.bkx-tab__name { display: block; font-size: .88rem; font-weight: 700; color: var(--grey-800); letter-spacing: -.015em; line-height: 1.3; }
.bkx-tab__sub  { display: block; font-size: .74rem; font-weight: 500; color: var(--grey-500); margin-top: 3px; }
.bkx-tab__arw  { width: 16px; height: 16px; color: #A3AFA7; stroke-width: 2.2; transition: transform .25s, color .25s; }
.bkx-tab:hover .bkx-tab__arw { transform: translateX(3px); }
.bkx-tab.is-active { background: #F1F8F3; border-color: var(--g-main); box-shadow: 0 2px 12px rgba(26,107,60,.11); }
.bkx-tab.is-active .bkx-tab__name { color: var(--g-dark); }
.bkx-tab.is-active .bkx-tab__arw { color: var(--g-main); }

/* ── Right stage: one panel per basket ── */
.bkx-stage { position: relative; }
.bkx-panel {
  display: none; position: relative; overflow: hidden;
  background: var(--white); border: 1px solid #E3EBE6;
  border-radius: var(--radius-lg); box-shadow: var(--shadow-xs);
}
.bkx-panel.is-active { display: block; animation: bkxIn .45s cubic-bezier(.22,1,.36,1) both; }
@keyframes bkxIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* Capped so the photo always stays in the card's upper block: as a bare
   percentage it grew with the card and ran down over the goals divider. */
.bkx-media { position: absolute; top: 0; right: 0; width: 38%; height: 54%; max-height: 320px; }
.bkx-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bkx-media--growth img     { object-position: 60% 60%; }
.bkx-media--dividend img   { object-position: center 45%; }
.bkx-media--retirement img { object-position: center 55%; }
.bkx-media--child img      { object-position: center top; }
/* The photo dissolves into the white card on its left and bottom (and very
   slightly at the top) through a mask on the image itself. The old white
   overlay stacked three gradients and left banding plus a hard top edge. */
.bkx-media img {
  -webkit-mask-image:
    linear-gradient(90deg, transparent 0%, rgba(0,0,0,.3) 14%, rgba(0,0,0,.75) 30%, #000 46%),
    linear-gradient(180deg, rgba(0,0,0,.7) 0%, #000 12%, #000 50%, rgba(0,0,0,.55) 72%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(90deg, transparent 0%, rgba(0,0,0,.3) 14%, rgba(0,0,0,.75) 30%, #000 46%),
    linear-gradient(180deg, rgba(0,0,0,.7) 0%, #000 12%, #000 50%, rgba(0,0,0,.55) 72%, transparent 100%);
  mask-composite: intersect;
}

.bkx-inner { position: relative; z-index: 1; padding: clamp(20px, 2.2vw, 26px); display: flex; flex-direction: column; gap: 18px; }
.bkx-top { padding-right: 35%; display: flex; flex-direction: column; gap: 18px; }

.bkx-head { display: flex; align-items: flex-start; gap: 15px; padding-right: 4%; }
.bkx-head__ico {
  width: 54px; height: 54px; flex-shrink: 0; border-radius: 14px;
  background: var(--g-dark);
  display: grid; place-items: center; box-shadow: 0 6px 18px rgba(20,83,45,.24);
}
.bkx-head__ico svg { width: 26px; height: 26px; color: #fff; stroke-width: 2; }
.bkx-title-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.bkx-title {
  font-family: var(--font-heading); font-size: clamp(1.3rem, 1.9vw, 1.6rem);
  font-weight: 800; letter-spacing: -.032em; color: var(--black); line-height: 1.2; margin: 0;
}
.bkx-chip { background: #EDF2EF; color: var(--grey-700); font-size: .76rem; font-weight: 600; padding: 6px 15px; border-radius: var(--radius-pill); white-space: nowrap; }
.bkx-desc { font-size: .94rem; line-height: 1.62; color: var(--grey-700); margin: 0; }

.bkx-lead { font-family: var(--font-heading); font-size: .92rem; font-weight: 700; color: var(--black); letter-spacing: -.022em; margin-bottom: 14px; }
.bkx-goals ul { list-style: none; display: flex; margin: 0 0 18px; padding: 0 0 16px; border-bottom: 1px solid #E7EDE9; }
.bkx-goals li {
  flex: 1; min-width: 0; padding: 0 8px; display: flex; flex-direction: column; align-items: center; gap: 10px;
  text-align: center; font-size: .72rem; font-weight: 600; color: var(--grey-600); line-height: 1.3;
}
.bkx-goals li + li { border-left: 1px solid #E7EDE9; }
.bkx-goals li svg { width: 24px; height: 24px; color: var(--g-main); stroke-width: 1.6; }

.bkx-ideal { font-size: .85rem; line-height: 1.55; color: var(--grey-600); margin: 0; }
.bkx-ideal b { font-weight: 700; color: var(--g-dark); }

.bkx-metrics { display: grid; grid-template-columns: repeat(3,1fr); border: 1px solid #E3EBE6; border-radius: var(--radius); }
.bkx-metric { padding: 15px 12px; display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; }
.bkx-metric + .bkx-metric { border-left: 1px solid #E7EDE9; }
.bkx-metric__lbl { font-size: .78rem; font-weight: 500; color: var(--grey-600); line-height: 1.3; }
.bkx-pill { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 6px 24px; border-radius: var(--radius-pill); font-size: .86rem; font-weight: 700; }
.bkx-pill--high   { background: #FDE9E9; color: #D14343; }
.bkx-pill--medium { background: #FDF3DC; color: #B45309; }
.bkx-pill--neutral { background: transparent; color: var(--grey-800); padding: 6px 0; }
.bkx-pill--neutral svg { width: 19px; height: 19px; color: var(--g-main); stroke-width: 1.8; flex-shrink: 0; }

.bkx-foot { display: flex; align-items: center; gap: 16px; background: #F7F9F7; border: 1px solid #EDF1EE; border-radius: var(--radius); padding: 12px 12px 12px 22px; }
.bkx-facts { flex: 1; display: flex; align-items: center; min-width: 0; }
.bkx-fact { padding-right: 26px; }
.bkx-fact + .bkx-fact { border-left: 1px solid #E2E8E4; padding-left: 26px; }
.bkx-fact__lbl { display: block; font-size: .78rem; font-weight: 500; color: var(--grey-500); margin-bottom: 5px; }
.bkx-fact__val { display: block; font-family: var(--font-heading); font-size: 1.18rem; font-weight: 800; color: var(--g-dark); letter-spacing: -.025em; }
.bkx-fact__val em { font-style: normal; font-size: .78rem; font-weight: 600; color: var(--grey-500); }
.bkx-cta {
  flex-shrink: 0; border: 0; cursor: pointer; background: var(--g-dark); color: #fff;
  font-family: var(--font); font-size: .98rem; font-weight: 700;
  padding: 16px 30px; border-radius: 12px; display: inline-flex; align-items: center; gap: 10px;
  box-shadow: 0 6px 18px rgba(20,83,45,.22); transition: background .25s, transform .25s;
}
.bkx-cta svg { width: 17px; height: 17px; stroke-width: 2.4; transition: transform .25s; }
.bkx-cta:hover { background: var(--g-deep); transform: translateY(-1px); }
.bkx-cta:hover svg { transform: translateX(4px); }

/* ── Broker compatibility + regulatory strip ── */
.bkx-brokers {
  margin-top: 22px; background: var(--white); border: 1px solid #E3EBE6;
  border-radius: var(--radius-lg); box-shadow: var(--shadow-xs); padding: 18px 22px;
  display: grid; grid-template-columns: auto auto minmax(300px,1fr); gap: 24px; align-items: center;
}
.bkx-brokers__lead { display: flex; align-items: center; gap: 12px; }
.bkx-brokers__lead > svg { width: 30px; height: 30px; color: var(--g-main); stroke-width: 1.6; flex-shrink: 0; }
.bkx-brokers__lead span { display: block; font-size: .76rem; color: var(--grey-500); line-height: 1.35; }
.bkx-brokers__lead strong { display: block; font-family: var(--font-heading); font-size: .94rem; font-weight: 700; color: var(--black); line-height: 1.25; }
.bkx-logos { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.bkx-brk { width: 52px; height: 52px; border: 1px solid #E7EDE9; border-radius: 14px; display: grid; place-items: center; background: var(--white); transition: border-color .25s, transform .25s, box-shadow .25s; }
.bkx-brk img { width: 26px; height: 26px; object-fit: contain; border-radius: 6px; }
.bkx-brk:hover { transform: translateY(-2px); border-color: rgba(26,107,60,.35); box-shadow: 0 6px 16px rgba(13,61,34,.1); }
.bkx-more { background: none; border: 0; padding: 0 0 0 4px; cursor: pointer; font-family: var(--font); font-size: .78rem; font-weight: 600; color: var(--g-main); display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.bkx-more svg { width: 13px; height: 13px; stroke-width: 2.4; transition: transform .25s; }
.bkx-more:hover svg { transform: translateX(3px); }
.bkx-legal { border-left: 1px solid #EDF1EE; padding-left: 24px; }
.bkx-legal p { font-size: .68rem; line-height: 1.62; color: var(--grey-500); margin: 0 0 7px; }
.bkx-legal__reg { font-size: .68rem; font-weight: 600; color: var(--g-main); }
.bkx-legal__reg i { font-style: normal; color: #C8D4CC; margin: 0 9px; }

@media (max-width: 1080px) {
  .bkx { grid-template-columns: 1fr; gap: 20px; }
  .bkx-hd { max-width: 680px; }
  /* Once the rail goes full-width the tabs must tile, not scroll: as a flex
     row they each inherited the base width:100% and filled the rail, so three
     of the four baskets sat off-screen behind a scrollbar nobody could see. */
  .bkx-tabs {
    display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px; padding-bottom: 0;
  }
  .bkx-tab {
    width: auto; min-width: 0;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start; gap: 10px; padding: 13px;
  }
  .bkx-tab__arw { display: none; }
  .bkx-tab__ico { width: 21px; height: 21px; margin-top: 1px; }
  .bkx-tab__ico svg { width: 20px; height: 20px; }
  .bkx-tab__name { font-size: .81rem; }
  .bkx-tab__sub { font-size: .7rem; margin-top: 2px; }
  .bkx-tab:hover { transform: none; }
  .bkx-media { height: 48%; max-height: 290px; }
  .bkx-brokers { grid-template-columns: 1fr; gap: 16px; }
  .bkx-legal { border-left: 0; padding-left: 0; border-top: 1px solid #EDF1EE; padding-top: 14px; }
}
@media (max-width: 860px) {
  .bkx-media { position: relative; width: 100%; height: 230px; }
  .bkx-media img {
    -webkit-mask-image: linear-gradient(180deg, #000 58%, transparent 100%);
            mask-image: linear-gradient(180deg, #000 58%, transparent 100%);
  }
  .bkx-top { padding-right: 0; }
  .bkx-head { padding-right: 0; }
}
/* Four across stops fitting the names well before phone width — go 2x2. */
@media (max-width: 780px) {
  .bkx-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 400px) {
  .bkx-tabs { gap: 8px; }
  .bkx-tab { padding: 11px; }
  .bkx-tab__name { font-size: .77rem; }
  .bkx-tab__sub { font-size: .68rem; }
}
@media (max-width: 620px) {
  .bkx-goals ul { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 0; }
  .bkx-goals li + li { border-left: 0; }
  .bkx-foot { flex-direction: column; align-items: stretch; padding: 16px; gap: 14px; }
  .bkx-facts { justify-content: space-between; }
  .bkx-fact { padding-right: 0; }
  .bkx-cta { justify-content: center; }
}
@media (max-width: 520px) {
  .bkx-metric { padding: 10px 6px; gap: 6px; }
  .bkx-metric__lbl { font-size: .7rem; }
  .bkx-pill { font-size: .72rem; padding: 4px 10px; white-space: nowrap; }
  .bkx-pill--neutral svg { display: none; }   /* "5+ Years" wrapped under its icon */
  .bkx-head { gap: 12px; }
  .bkx-head__ico { width: 42px; height: 42px; }
  .bkx-inner { gap: 14px; padding: 16px; }
  .bkx-top { gap: 12px; }
  .bkx-goals ul { gap: 12px 0; margin-bottom: 0; padding-bottom: 12px; }
  .bkx-media { height: 200px; }
  .bkx-brokers { padding: 16px; gap: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .bkx-panel.is-active { animation: none; }
  .bkx-tab, .bkx-cta, .bkx-brk { transition: none; }
}

/* ═════════════════════════════════════
   RESEARCH ANALYST — light card v2
═════════════════════════════════════ */
.rax-card {
  --rax-pad: clamp(18px, 2vw, 26px);
  background: var(--white); border: 1px solid #E3EBE6;
  border-radius: var(--radius-lg); padding: var(--rax-pad);
  display: grid; grid-template-columns: minmax(0,320px) minmax(0,1fr); gap: clamp(20px, 2.6vw, 34px);
  box-shadow: var(--shadow-xs);
}
.rax-profile { display: flex; flex-direction: column; }
.rax-photo { position: relative; border-radius: var(--radius); overflow: hidden; background: var(--grey-50); margin-bottom: 18px; flex: 1 1 0; min-height: 240px; }
/* soft fade into the card so the photo doesn't butt against the name with a hard edge */
.rax-photo::after {
  content: ""; position: absolute; inset: auto 0 0 0; height: 26%;
  background: linear-gradient(to bottom, rgba(255,255,255,0) 0%, rgba(255,255,255,.42) 100%);
  pointer-events: none;
}
.rax-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center 20%; display: block; }
.rax-name {
  font-family: var(--font-heading); font-size: 1.6rem; font-weight: 800;
  color: var(--g-dark); letter-spacing: -.02em; line-height: 1.2; margin-bottom: 5px;
}
.rax-role {
  font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--grey-500); margin-bottom: 16px;
}
.rax-creds { list-style: none; display: flex; flex-direction: column; gap: 8px; }
.rax-creds li {
  display: flex; align-items: center; gap: 12px;
  background: var(--white); border: 1px solid #E7EDE9; border-radius: var(--radius-sm);
  padding: 8px 12px; font-size: .85rem; font-weight: 600; color: var(--grey-700); line-height: 1.35;
}
.rax-ico--xs { width: 32px; height: 32px; }
.rax-ico--xs svg { width: 17px; height: 17px; }
.rax-creds li svg { width: 20px; height: 20px; color: var(--g-mid); stroke-width: 1.6; flex-shrink: 0; }

.rax-body { display: flex; flex-direction: column; }
.rax-blk-hd { display: flex; align-items: center; gap: 16px; margin-bottom: 18px; }
.rax-blk-hd h3 {
  font-family: var(--font-heading); font-size: 1.35rem; font-weight: 700;
  color: var(--g-dark); letter-spacing: -.018em; white-space: nowrap;
}
.rax-line { flex: 1; height: 1px; background: #E6ECE8; }

.rax-problems { display: grid; grid-template-columns: repeat(3,1fr); gap: 0; }
.rax-prob { display: grid; grid-template-columns: auto 1fr; gap: 12px; padding: 0 20px; }
.rax-prob:first-child { padding-left: 0; }
.rax-prob:last-child { padding-right: 0; }
.rax-prob + .rax-prob { border-left: 1px solid #EDF1EE; }
.rax-ico {
  width: 46px; height: 46px; border-radius: 50%; background: #EAF3EC;
  display: grid; place-items: center; flex-shrink: 0;
}
.rax-ico svg { width: 24px; height: 24px; color: var(--g-mid); stroke-width: 1.6; }
.rax-prob__t { font-size: .97rem; font-weight: 700; color: var(--black); line-height: 1.3; align-self: center; }
.rax-prob p { grid-column: 2; font-size: .86rem; line-height: 1.65; color: var(--grey-500); margin: 0; }

.rax-div { height: 1px; background: #E6ECE8; margin: 26px 0 22px; }
/* capped near 78ch — the full card width ran these to ~120 characters a line,
   which is well past comfortable reading measure */
.rax-p { font-size: .94rem; line-height: 1.7; color: var(--grey-600); margin-bottom: 14px; max-width: 74ch; }
.rax-p:last-of-type { margin-bottom: 22px; }

.rax-pills {
  display: grid; grid-template-columns: repeat(4,1fr); margin-top: auto;
  border: 1px solid #E7EDE9; border-radius: var(--radius); padding: 16px 0;
}
.rax-pill { display: flex; align-items: center; gap: 11px; padding: 0 16px; }
.rax-pill:first-child { padding-left: 18px; }
.rax-pill:last-child { padding-right: 18px; }
.rax-pill + .rax-pill { border-left: 1px solid #EDF1EE; }
.rax-pill span:last-child { font-size: .83rem; font-weight: 700; color: var(--grey-700); line-height: 1.35; }
.rax-ico--sm { width: 38px; height: 38px; }
.rax-ico--sm svg { width: 20px; height: 20px; }

.rax-foot {
  grid-column: 1 / -1;
  margin: 4px calc(-1 * var(--rax-pad)) calc(-1 * var(--rax-pad));
  background: #F8FAF9; border-top: 1px solid #EDF1EE;
  border-radius: 0 0 calc(var(--radius-lg) - 1px) calc(var(--radius-lg) - 1px);
  padding: 15px var(--rax-pad); display: flex; align-items: center; gap: 16px 26px; flex-wrap: wrap;
}
.rax-foot__item { display: flex; align-items: center; gap: 8px; font-size: .82rem; font-weight: 600; color: var(--grey-600); }
.rax-foot__item svg { width: 17px; height: 17px; color: var(--g-mid); stroke-width: 1.8; flex-shrink: 0; }
.rax-foot__btn {
  margin-left: auto; text-decoration: none;
  background: var(--g-dark); color: var(--white);
  font-size: .82rem; font-weight: 700; padding: 9px 18px;
  border-radius: var(--radius-sm); display: inline-flex; align-items: center; gap: 8px;
  box-shadow: var(--shadow-btn); transition: background .25s;
}
.rax-foot__btn svg { width: 14px; height: 14px; stroke-width: 2.4; transition: transform .25s; }
.rax-foot__btn:hover { background: var(--g-deep); }
.rax-foot__btn:hover svg { transform: translateX(3px); }

@media (max-width: 1100px) {
  .rax-card { grid-template-columns: 1fr; }
  .rax-photo img { height: 320px; min-height: 0; object-position: center 18%; }
  .rax-creds { display: grid; grid-template-columns: 1fr 1fr; }
}
@media (max-width: 860px) {
  .rax-problems { grid-template-columns: 1fr; gap: 18px; }
  .rax-prob { padding: 0; }
  .rax-prob + .rax-prob { border-left: 0; border-top: 1px solid #EDF1EE; padding-top: 18px; }
  .rax-pills { grid-template-columns: 1fr 1fr; gap: 16px 0; }
  .rax-pill { padding: 0 14px; }
  .rax-pill:nth-child(3) { padding-left: 0; border-left: 0; }
  .rax-foot__btn { margin-left: 0; width: 100%; justify-content: center; }
}
@media (max-width: 560px) {
  .rax-creds { grid-template-columns: 1fr; }
  .rax-pills { grid-template-columns: 1fr; }
  .rax-pill { padding: 0; }
  .rax-pill + .rax-pill { border-left: 0; }
  .rax-blk-hd h3 { font-size: 1.15rem; white-space: normal; }
}

/* Cutout portrait in the photo slot: no fill behind it, the figure stands on the
   slot's bottom edge, and its cropped waist fades out on a short eased curve
   (replaces the white overlay the office photo used). */
.rax-photo { background: transparent; }
.rax-photo::after { content: none; }
.rax-photo img {
  object-fit: contain; object-position: center bottom;
  -webkit-mask-image: linear-gradient(180deg, #000 88%, rgba(0,0,0,.94) 90%, rgba(0,0,0,.8) 92.5%, rgba(0,0,0,.58) 95%, rgba(0,0,0,.33) 97.2%, rgba(0,0,0,.12) 99%, transparent 100%);
          mask-image: linear-gradient(180deg, #000 88%, rgba(0,0,0,.94) 90%, rgba(0,0,0,.8) 92.5%, rgba(0,0,0,.58) 95%, rgba(0,0,0,.33) 97.2%, rgba(0,0,0,.12) 99%, transparent 100%);
}
/* Below 1100px the card stacks and the old rule fixed the image at 320px inside a
   flex slot that stayed 240px, cropping the figure; give the slot the height instead. */
@media (max-width: 1100px) {
  .rax-photo { flex: none; height: 340px; }
  .rax-photo img { height: 100%; object-position: center bottom; }
}
@media (max-width: 560px) {
  .rax-photo { height: 300px; }
  .rax-pills .rax-pill, .rax-pills .rax-pill:first-child, .rax-pills .rax-pill:last-child { padding: 0 18px; }
}

/* Broker chips inside the new strip: stacked logo-over-name, per design */
.bk-brokers__logos .broker-chip { flex-direction: column; gap: 7px; padding: 12px 16px; min-width: 92px; }
.bk-brokers__logos .broker-chip__name { font-size: .78rem; font-weight: 600; }
.bk-brokers__logos .broker-chip:hover .broker-chip__name { transform: none; }
.bk-disclaimer-note {
  text-align: center; font-size: .72rem; color: var(--grey-400);
  max-width: 860px; margin: 16px auto 0; line-height: 1.55; font-weight: 500;
}

/* ═════════════════════════════════════
   VIEWPORT FIT — laptop & desktop (≥1024px)
   Each section aims to occupy a single screen: vertical
   rhythm is driven by viewport height, content is centred,
   and dense sections tighten before anything overflows.
   Tablet and phone keep the natural document flow.
═════════════════════════════════════ */
@media (min-width: 1024px) {
  /* The navbar is fixed and 74px tall, so a full-height section's visible
     band is 100svh - 74px. Extra top padding re-centres content into it. */
  .section {
    min-height: 100svh;
    display: grid; align-content: center;
    padding: calc(74px + clamp(10px, 1.7vh, 34px)) 0 clamp(18px, 2.7vh, 56px);
    scroll-margin-top: 74px;
  }
  /* A grid's implicit auto track sizes to its items' max-content, so one wide
     child could still push a section past the viewport. Pin the track to the
     section width and let items shrink inside it (same trap as .contact-v2 > *). */
  .section, .philosophy-section { grid-template-columns: minmax(0, 1fr); }
  .section > *, .philosophy-section > * { min-width: 0; }

  /* These three carry far less content than a screen, so centring them inside a
     forced 100svh band opened 240-350px above their heading while the dense
     sections (calculator, contact) sat at ~120px. Let them size to their own
     content on a uniform pad instead, so every section's heading clears the
     divider by roughly the same distance. */
  #how, #app-download, #blog {
    min-height: auto;
    padding: calc(74px + clamp(24px, 4.4vh, 62px)) 0 clamp(52px, 5.4vh, 76px);
  }
  .section-hd { margin-bottom: clamp(10px, 2.2vh, 44px); }
  .section-hd > p { margin-top: clamp(8px, 1.4vh, 16px); }

  /* ── Investment baskets ── */
  #baskets .bkx-hd p { margin-bottom: clamp(12px, 2.2vh, 22px); }
  #baskets .bkx-tabs { gap: clamp(7px, 1.3vh, 12px); }
  #baskets .bkx-tab { padding: clamp(9px, 1.7vh, 15px) 15px; }
  #baskets .bkx-inner { padding: clamp(15px, 2.4vh, 26px); gap: clamp(9px, 1.8vh, 18px); }
  #baskets .bkx-top { gap: clamp(9px, 1.8vh, 18px); }
  #baskets .bkx-goals ul { margin-bottom: clamp(9px, 1.8vh, 18px); padding-bottom: clamp(8px, 1.6vh, 16px); }
  #baskets .bkx-goals li { gap: clamp(5px, 1vh, 10px); }
  #baskets .bkx-metric { padding: clamp(8px, 1.6vh, 15px) 12px; gap: clamp(5px, 1vh, 10px); }
  #baskets .bkx-foot { padding: clamp(8px, 1.3vh, 12px) 12px clamp(8px, 1.3vh, 12px) 22px; }
  #baskets .bkx-cta { padding: clamp(11px, 1.8vh, 16px) 30px; }
  #baskets .bkx-brokers { margin-top: clamp(11px, 1.8vh, 22px); padding: clamp(11px, 1.9vh, 18px) 22px; }
  #baskets .bkx-brk { width: clamp(42px, 5.6vh, 52px); height: clamp(42px, 5.6vh, 52px); }
  #baskets .bk-disclaimer-note { margin-top: clamp(7px, 1.2vh, 16px); font-size: .69rem; }
  #baskets .bkx-brokers { padding: clamp(9px, 1.5vh, 18px) 22px; }
  #baskets .bkx-brk { width: clamp(40px, 4.8vh, 52px); height: clamp(40px, 4.8vh, 52px); }
  #baskets .bkx-legal p { margin-bottom: clamp(3px, .6vh, 7px); }


  /* ── Research analyst ── */
  /* stays a tall rectangle but gives height back on short laptop screens */
  #analyst .rax-card { --rax-pad: clamp(15px, 2.2vh, 26px); }
  #analyst .rax-photo { min-height: clamp(210px, 26vh, 260px); margin-bottom: clamp(10px, 1.8vh, 18px); }
  #analyst .rax-name { margin-bottom: clamp(2px, .6vh, 5px); }
  #analyst .rax-role { margin-bottom: clamp(9px, 1.7vh, 16px); }
  #analyst .rax-creds { gap: clamp(5px, .9vh, 8px); }
  #analyst .rax-creds li { padding: clamp(5px, 1vh, 8px) 12px; }
  #analyst .rax-blk-hd { margin-bottom: clamp(9px, 1.8vh, 18px); }
  #analyst .rax-div { margin: clamp(13px, 2.6vh, 26px) 0 clamp(11px, 2.2vh, 22px); }
  #analyst .rax-p { margin-bottom: clamp(7px, 1.4vh, 14px); }
  #analyst .rax-p:last-of-type { margin-bottom: clamp(11px, 2.2vh, 22px); }
  #analyst .rax-pills { padding: clamp(9px, 1.7vh, 16px) 0; }
  #analyst .rax-foot { padding: clamp(8px, 1.5vh, 15px) var(--rax-pad); }
  #analyst .rax-prob p { margin-top: 2px; }
  #analyst .rax-ico { width: clamp(36px, 4.3vh, 44px); height: clamp(36px, 4.3vh, 44px); }

  /* ── Trust ── */
  #trust .trust-compliance { padding: clamp(13px, 2.2vh, 22px) 26px; margin-bottom: clamp(12px, 2.2vh, 24px); }

  /* ── Fee calculator ── */
  #calculator .fcx-col { padding: clamp(15px, 2.3vh, 28px); }
  #calculator .fcx-step { margin-bottom: clamp(11px, 2.2vh, 22px); }
  #calculator .fcx-field { padding: clamp(4px, 1vh, 10px) 0; }
  #calculator .fcx-label { margin-bottom: clamp(5px, 1.1vh, 10px); }
  #calculator .fcx-hint { margin-top: clamp(4px, .9vh, 8px); }
  #calculator .fcx-ico { width: clamp(30px, 4vh, 40px); height: clamp(30px, 4vh, 40px); margin-top: 2px; }
  #calculator .fcx-plans { margin-top: clamp(9px, 1.8vh, 16px); }
  #calculator .plan-pill { padding: clamp(7px, 1.4vh, 12px) 6px; gap: clamp(3px, .7vh, 6px); }
  #calculator .fcx-total { padding: clamp(12px, 2.4vh, 22px) var(--fcx-art-pr) clamp(12px, 2.4vh, 22px) 20px; margin-bottom: clamp(9px, 2vh, 18px); }
  #calculator .fcx-divider { margin-bottom: clamp(8px, 1.8vh, 16px); }
  #calculator .fcx-rows { gap: clamp(7px, 1.4vh, 12px); margin-bottom: clamp(9px, 1.8vh, 16px); }
  #calculator .fcx-res { padding: clamp(9px, 1.7vh, 15px) 18px; }
  #calculator .fcx-cta { padding: clamp(11px, 1.9vh, 17px) 20px; }
  #calculator .fcx-foot { padding: clamp(9px, 1.8vh, 16px) clamp(15px, 2.3vh, 28px); }
  #calculator .calc-compliance-note { margin-top: clamp(10px, 2vh, 20px); padding: clamp(10px, 2vh, 18px) 210px clamp(10px, 2vh, 18px) 24px; }
  #calculator .fcx-art { width: clamp(146px, 20vh, 208px); }

  /* calculator runs densest — tighten its rhythm hardest */
  #calculator .section-hd { margin-bottom: clamp(12px, 2vh, 26px); }
  #calculator .section-hd h2 { margin-bottom: clamp(5px, 1.1vh, 16px); }
  #calculator .fcx-col { padding: clamp(13px, 2vh, 26px); }
  #calculator .fcx-step { margin-bottom: clamp(8px, 1.6vh, 20px); }
  #calculator .fcx-field { padding: clamp(2px, .5vh, 9px) 0; }
  #calculator .fcx-label { margin-bottom: clamp(4px, .8vh, 9px); }
  #calculator .fcx-hint { margin-top: clamp(3px, .6vh, 7px); line-height: 1.4; }
  #calculator .fcx-plans__lbl { padding: clamp(4px, .9vh, 7px) 14px; }
  #calculator .plan-pills { padding: clamp(6px, 1.2vh, 10px); }
  #calculator .plan-pill { padding: clamp(6px, 1.2vh, 11px) 6px; }
  #calculator .fcx-total { padding: clamp(10px, 2vh, 22px) var(--fcx-art-pr) clamp(10px, 2vh, 22px) 20px; }
  #calculator .fcx-total__val { font-size: clamp(1.7rem, 4.6vh, 2.5rem); }
  #calculator .fcx-res { padding: clamp(8px, 1.5vh, 15px) 18px; }
  #calculator .fcx-res__ico { width: clamp(34px, 4.4vh, 44px); height: clamp(34px, 4.4vh, 44px); }

  /* hero + explainer already run on vh rhythm — just fill the screen */
  #home, .vid-section { min-height: 100svh; }

  /* ── Investment philosophy (own section wrapper) ── */
  .philosophy-section {
    min-height: 100svh; display: grid; align-content: center;
    padding: calc(74px + clamp(8px, 1.4vh, 30px)) 0 clamp(20px, 3vh, 58px);
    scroll-margin-top: 74px;
  }
  .philosophy-section .section-hd { margin-bottom: clamp(12px, 2.2vh, 44px); }
  .phil-principles-row { gap: clamp(10px, 1.6vh, 16px); margin-bottom: clamp(12px, 2vh, 24px); }
  .phil-principle { padding: clamp(14px, 2.2vh, 20px) 22px; }
  .phil-invest { padding: clamp(12px, 2vh, 24px); }
  .phil-criteria-row { gap: clamp(10px, 1.4vh, 12px); margin-top: clamp(10px, 1.8vh, 20px); }
  .phil-criterion { min-height: clamp(104px, 14vh, 124px); padding: clamp(10px, 1.6vh, 16px) 14px; }

  /* ── Trust ── */
  #trust .trust-v2 { gap: clamp(16px, 2.4vh, 28px); margin-bottom: clamp(16px, 2.6vh, 32px); }
  #trust .trust-cred__inner { padding: clamp(16px, 2.6vh, 26px) 28px; }

  /* ── Contact ── */
  #contact .section-hd { margin-bottom: clamp(12px, 2.2vh, 44px); }
  #contact .contact-v2 { gap: clamp(14px, 2.2vh, 24px); }
  #contact .contact-hero { padding: clamp(18px, 3.2vh, 36px) clamp(24px, 3vw, 38px); }
  #contact .contact-rail { gap: clamp(10px, 1.8vh, 18px); }
  #contact .contact-card-v2 { padding: clamp(13px, 2.2vh, 22px) 24px; }
}

/* Short laptop screens (≈768–860px tall): tighten type a further notch
   so the dense sections keep landing near a single screen. */
/* ── One-screen fitting ────────────────────────────────────
   Sections are min-height:100vh, so anything taller than the window is
   what breaks the deck. These clamps give back the vertical space the
   content-heavy bands need — headers first, then the internals of the
   three that run longest (calculator, contact, demat). */
@media (min-width: 1024px) {
  .section-hd h2 { font-size: clamp(1.5rem, 3.6vh, 2.1rem); }
  .section-hd > p { font-size: .93rem; }

  #baskets .bkx-title { font-size: 1.28rem; }
  #baskets .bkx-desc { font-size: .88rem; }
  #baskets .bkx-head__ico { width: 46px; height: 46px; border-radius: 12px; }
  #baskets .bkx-head__ico svg { width: 22px; height: 22px; }
  #baskets .bkx-goals li svg { width: 21px; height: 21px; }
  #baskets .bkx-ideal { font-size: .8rem; }
  #baskets .bkx-fact__val { font-size: 1.06rem; }

  #analyst .rax-name { font-size: 1.42rem; }
  #analyst .rax-prob p, #analyst .rax-p { font-size: .84rem; line-height: 1.6; }
  #analyst .rax-creds li { font-size: .8rem; }
  #analyst .rax-ico { width: 40px; height: 40px; }
  #analyst .rax-ico--xs { width: 29px; height: 29px; }


  #calculator .fcx-hint { font-size: .655rem; line-height: 1.35; }
  #calculator .fcx-label { font-size: .76rem; }
  #calculator .fcx-box { min-height: 40px; padding: 7px 9px; }
  #calculator .fcx-box .calc-val { font-size: .92rem; }
  #calculator .fcx-res__name { font-size: .86rem; }
  #calculator .fcx-res__sub { font-size: .68rem; }
  #calculator .fcx-res__val { font-size: 1.24rem; }
  #calculator .fcx-step h3 { font-size: 1.04rem; }
  #calculator .fcx-foot p { font-size: .7rem; }
  #calculator .calc-compliance-note { font-size: .72rem; }
  #calculator .pp-amt { font-size: .92rem; }

  #trust .trust-cred__inner { padding: clamp(14px, 2.2vh, 22px) 24px; }
  #contact .contact-card-v2 { padding: clamp(11px, 1.9vh, 18px) 22px; }
  .phil-criterion__desc, .phil-invest__desc { font-size: .86rem; line-height: 1.6; }
}

/* ── Noise-pass fit (2026-09-13): after trimming copy, these give back the last
   few dozen pixels so every trimmed band lands on one screen at 1440×900 and
   as close as possible at 1366×768. All vh-scaled, so tall screens keep air. ── */
@media (min-width: 1024px) {
  #calculator .fcx-col { padding: clamp(12px, 1.9vh, 24px) clamp(18px, 2vw, 26px); }
  #calculator .fcx-step { margin-bottom: clamp(6px, 1.2vh, 16px); }
  #calculator .fcx-plans { margin-top: clamp(6px, 1.2vh, 14px); }
  #calculator .plan-pill { padding: clamp(4px, .9vh, 10px) 6px; }
  #calculator .pp-name { min-height: 0; }
  #calculator .fcx-foot { padding: clamp(7px, 1.2vh, 14px) clamp(18px, 2vw, 26px); }
  #calculator .fcx-total__val { font-size: clamp(1.5rem, 4.2vh, 2.5rem); }

  #contact .section-hd { margin-bottom: clamp(10px, 1.8vh, 28px); }
  #contact .ch-inner { padding: clamp(12px, 2.4vh, 32px); }
  #contact .ch-trust { margin-top: clamp(8px, 1.6vh, 18px); padding-top: clamp(8px, 1.6vh, 16px); }
  #contact .ch-subline { margin-top: clamp(8px, 1.6vh, 16px); padding-top: clamp(8px, 1.6vh, 14px); }
  #contact .ch-cta { margin-top: clamp(8px, 1.6vh, 20px); }
  #contact .ccv2-sla { margin-top: clamp(4px, .8vh, 10px); padding: clamp(6px, 1vh, 10px) 12px; }
  #contact .ccv2-regn-line { margin: clamp(2px, .5vh, 4px) 0; padding: clamp(5px, .9vh, 8px) 12px; }

  #baskets .bkx-goals ul { padding-bottom: clamp(4px, 1vh, 16px); margin-bottom: clamp(4px, 1vh, 18px); }
  #baskets .bkx-legal p { font-size: .64rem; line-height: 1.5; }

  #trust .section-hd { margin-bottom: clamp(10px, 1.8vh, 28px); }
  #trust .trust-card-v2 { padding: clamp(10px, 1.7vh, 16px) 18px; }
  #trust .trust-cred__num { font-size: clamp(1.4rem, 3.6vh, 1.85rem); }
  #trust .tcomp-link { padding: clamp(5px, 1vh, 9px) 12px; }
  #trust .tcomp-head { margin-bottom: clamp(6px, 1.2vh, 12px); padding-bottom: clamp(6px, 1vh, 10px); }
}
@media (min-width: 1024px) {
  /* calculator: label beside a compact value box, one tight row per input */
  #calculator .fcx-field { grid-template-columns: 34px minmax(0, 1fr) 108px; align-items: center; padding: clamp(1px, .4vh, 5px) 0; }
  #calculator .fcx-ico { width: 32px; height: 32px; margin-top: 0; border-radius: 10px; }
  #calculator .fcx-ico svg { width: 17px; height: 17px; }
  #calculator .fcx-label { margin-bottom: clamp(2px, .5vh, 6px); }
  #calculator .fcx-box { min-height: 34px; padding: 4px 8px; }
  #calculator .fcx-fields { gap: 0; }
  #calculator .fcx-plans__lbl { padding: clamp(3px, .6vh, 6px) 12px; }
  #calculator .plan-pills { padding: clamp(4px, .8vh, 8px); gap: 6px; }
  #calculator .fcx-foot { grid-template-columns: minmax(0, 1fr) minmax(0, 2.4fr) !important; }
  #calculator .section-hd h2 { margin-bottom: clamp(4px, .8vh, 12px); }

  #contact .ccv2-head { margin-bottom: clamp(2px, .6vh, 10px); }
  /* fr tracks refused to shrink below the no-wrap address, squeezing the booking panel
     into a 3-line heading; let both columns shrink and let the address wrap instead of "…" */
  #contact .contact-v2 { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); }
  #contact .contact-v2 > * { min-width: 0; }
  #contact .ccv2-row--static .ccv2-row-val { white-space: normal; overflow: visible; text-overflow: clip; }
  /* contact rows two to a line (email | phone, hours | office; grievance | SCORES) — the
     right rail set the section height, and six stacked rows put it ~100px over a laptop screen */
  #contact .contact-card-v2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 18px; align-content: start; }
  #contact .contact-card-v2 > .ccv2-head,
  #contact .contact-card-v2 > .ccv2-regn-line,
  #contact .contact-card-v2 > .ccv2-sla { grid-column: 1 / -1; }
  #contact .ccv2-row { border-bottom: 0; }
  /* wrap at spaces only — "anywhere" split grievance@equitywallet.in before ".in" */
  #contact .ccv2-row-val { white-space: normal; overflow: visible; text-overflow: clip; font-size: .82rem; }
  #contact .ccv2-icon { width: 34px; height: 34px; }
}
@media (min-width: 1024px) and (max-height: 820px) {
  #baskets .bkx-metric { padding: 6px 12px; gap: 4px; }
  #baskets .bkx-foot { padding: 6px 10px 6px 18px; }
  #baskets .bkx-cta { padding: 9px 22px; }
  #baskets .bk-disclaimer-note { margin-top: 6px; font-size: .64rem; }
  #trust .trust-v2 { margin-bottom: 10px; }
  #trust .trust-cred__tagline { margin-bottom: 8px; padding-bottom: 8px; }
  #trust .trust-cred__meta { gap: 3px; }
  #trust .tcomp-grid { gap: 6px; }
  #app-download { padding-top: calc(74px + 10px) !important; }
  #calculator .fcx-art { display: none; }
  /* short laptops: the calculator still ran ~80px over — drop the intro line and the plan
     label (the pills say "/mo" per basket), tighten the result rows */
  #calculator .section-hd > p { display: none; }
  #calculator .fcx-plans__lbl { display: none; }
  #calculator .fcx-res { padding: 5px 14px; }
  #calculator .fcx-total { padding-top: 6px; padding-bottom: 6px; }
  #calculator .fcx-divider { margin: 4px 0; }
  #calculator .fcx-cta { padding-top: 8px; padding-bottom: 8px; }
  #calculator .fcx-col { padding-top: 10px; padding-bottom: 10px; }
  #calculator .fcx-step { margin-bottom: 4px; }
  #calculator .fcx-foot { padding-top: 6px; padding-bottom: 6px; }
  /* contact on short laptops: the booking panel, not the rail, now sets the height */
  #contact .section-hd { margin-bottom: 8px; }
  #contact .contact-hero { padding-top: 12px !important; padding-bottom: 12px !important; }
  #contact .ch-inner { padding-top: 8px; padding-bottom: 8px; }
  #contact .ch-head { font-size: 1.5rem; margin-bottom: 8px; }
  #contact .ch-badge { margin-bottom: 10px; }
  #contact .ch-cta { margin-top: 10px; }
  #app-download .app-panel { padding-top: 28px !important; padding-bottom: 28px !important; }
  #app-download .ap-phone { transform: scale(.84); }
  #app-download .ap-visual { margin: -40px 0; }
  #app-download .ap-features { margin-bottom: 14px; }
}

@media (min-width: 1024px) and (max-height: 980px) {
  /* noise pass: the plan pills already say "/mo" per basket, so their label can go on laptop heights */
  #calculator .fcx-plans__lbl { display: none; }
  #calculator .fcx-res { padding-top: clamp(4px, .7vh, 8px); padding-bottom: clamp(4px, .7vh, 8px); }
  #calculator .fcx-hint { display: none; }
  #calculator .calc-compliance-note .ccn-art { display: none; }
  #calculator .calc-compliance-note { padding-right: 24px; }
  #contact .contact-hero .ch-orb { display: none; }
}

@media (min-width: 1024px) {
  /* The two longest bands need more than the shared clamps give them.
     Measured against the 100svh band: the calculator has to give back
     ~245px and contact ~95px before they sit on one screen. */
  #calculator .fcx-hint { display: none; }
  #calculator .fcx-field { padding: clamp(2px, .45vh, 6px) 0; }
  #calculator .fcx-total { padding: clamp(9px, 1.5vh, 18px) var(--fcx-art-pr) clamp(9px, 1.5vh, 18px) 20px; margin-bottom: clamp(6px, 1.1vh, 12px); }
  #calculator .fcx-divider { margin: clamp(5px, .9vh, 12px) 0; }
  #calculator .fcx-res { padding: clamp(6px, 1.1vh, 12px) 18px; }
  #calculator .fcx-rows { gap: clamp(5px, .9vh, 11px); }
  #calculator .fcx-cta { padding: clamp(9px, 1.5vh, 15px) 20px; }
  #calculator .calc-compliance-note { padding: clamp(8px, 1.3vh, 14px) 210px clamp(8px, 1.3vh, 14px) 24px; }

  #contact .ccv2-row { padding: clamp(4px, .8vh, 10px) 0; }
  #contact .ccv2-head { margin-bottom: clamp(5px, .9vh, 12px); }

  /* calculator — the sliders carry a hint line each, which is the single
     biggest block of reclaimable height on this page */
  #calculator .fcx-fields { gap: clamp(6px, 1.4vh, 18px); }
  #calculator .fcx-field { margin-bottom: 0; }
  #calculator .fcx-plans { gap: clamp(5px, 1vh, 10px); }
  #calculator .fcx-card { padding: clamp(14px, 2.4vh, 30px); }
  #calculator .fcx-res { gap: clamp(6px, 1.2vh, 14px); }
  #calculator .calc-compliance-note { margin-top: clamp(8px, 1.4vh, 20px); }

  /* contact — two stacked cards drive the whole band */
  #contact .contact-card-v2 { padding: clamp(12px, 2.2vh, 24px) clamp(18px, 2vw, 26px); }
  #contact .contact-rail { gap: clamp(10px, 1.8vh, 20px); }
  #contact .ch-inner { padding: clamp(16px, 3vh, 40px); }

  /* demat */
  #demat .dm-top { margin-bottom: clamp(14px, 2.6vh, 44px); }
  #demat .dm-card { min-height: 0; }
  #demat .dm-card__body { padding: clamp(14px, 2.4vh, 28px) clamp(18px, 2.2vw, 28px); }
  #demat .dm-list { margin: clamp(8px, 1.6vh, 18px) 0 clamp(10px, 1.8vh, 22px); gap: clamp(5px, 1vh, 11px); }
  #demat .dm-strip { margin-top: clamp(8px, 1.6vh, 26px); padding: clamp(12px, 2.2vh, 28px) clamp(22px, 2.6vw, 34px); }
}

/* ═════════════════════════════════════
   SECTION – OPEN A DEMAT ACCOUNT
═════════════════════════════════════ */
#demat { background: linear-gradient(180deg, #FBFDFB 0%, #F4F9F6 100%); overflow: hidden; }

/* ── Intro + hero art ── */
.dm-top {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.92fr);
  gap: clamp(20px, 3vw, 44px); align-items: center;
  margin-bottom: clamp(30px, 3.4vw, 44px);
}
.dm-intro .eyebrow { display: flex; align-items: center; gap: 12px; color: #5E8874; margin-bottom: 12px; }
.dm-intro .eyebrow::after { content: ""; width: 22px; height: 1.5px; background: #A8C6B6; display: block; }
.dm-intro h2 { font-size: clamp(2.05rem, 3.5vw, 2.85rem); line-height: 1.12; letter-spacing: -0.025em; }
.dm-intro__green {
  display: block; color: var(--g-main);
  font-size: 0.66em; line-height: 1.25; margin-top: 10px;
}
.dm-intro p {
  margin-top: 16px; max-width: 44ch;
  font-size: clamp(0.95rem, 1.05vw, 1.06rem); line-height: 1.62; color: var(--grey-500);
}

.dm-art { position: relative; }
.dm-art img { display: block; width: 100%; max-width: 720px; height: auto; margin: -6% -6% -8% auto; }
.dm-art .dm-note { position: absolute; right: 1%; top: 8%; text-align: left; }

/* ── Handwritten annotations ── */
.dm-note {
  font-family: 'Caveat', 'Segoe Script', cursive;
  font-size: clamp(1.02rem, 1.5vw, 1.3rem); font-weight: 600;
  line-height: 1.22; color: #22352B; transform: rotate(-4deg);
  pointer-events: none; white-space: nowrap;
}
.dm-note span { display: block; }
.dm-note span:nth-child(2) { padding-left: 0.45em; }
.dm-note span:nth-child(3) { padding-left: 1.05em; }
.dm-note svg { display: block; margin: 2px 0 0 auto; width: 74px; height: 10px; color: #4B6558; }

/* ── The two account cards ── */
.dm-cards {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(16px, 1.8vw, 26px);
}
.dm-card {
  position: relative; overflow: hidden; isolation: isolate;
  background: var(--white);
  border: 1px solid #E4EDE7; border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xs);
  min-height: 360px; display: flex; align-items: center;
  transition: box-shadow .3s, transform .3s, border-color .3s;
}
.dm-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: #D3E5DA; }

.dm-card__photo {
  position: absolute; z-index: -1; right: 0; bottom: 0; top: 0;
  width: 47%; height: 100%; object-fit: cover; object-position: 44% 100%;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.45) 16%, #000 42%);
          mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.45) 16%, #000 42%);
}
.dm-card__body { padding: clamp(22px, 2.2vw, 28px); width: 70%; }
.dm-card__label {
  display: block; font-size: 0.72rem; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--g-main); margin-bottom: 10px;
}
.dm-card h3 {
  font-size: clamp(1.35rem, 1.9vw, 1.72rem); line-height: 1.18;
  letter-spacing: -0.022em; margin-bottom: 12px;
}
.dm-card__body > p {
  font-size: clamp(0.87rem, 0.92vw, 0.94rem); line-height: 1.55;
  color: var(--grey-500); max-width: 33ch;
}

.dm-list { list-style: none; margin: 18px 0 22px; display: grid; gap: 11px; }
.dm-list li {
  display: flex; align-items: center; gap: 11px;
  font-size: clamp(0.78rem, 0.85vw, 0.825rem); color: var(--grey-600); line-height: 1.35;
}
.dm-list svg {
  flex-shrink: 0; width: 20px; height: 20px;
  color: #fff; background: var(--g-main); border-radius: 50%; padding: 4px;
}

.dm-cta {
  width: min(290px, 100%); justify-content: center;
  padding: 14px 24px; font-size: 0.92rem;
}
.dm-cta svg { width: 17px; height: 17px; margin-left: 4px; }

.dm-card .dm-note { position: absolute; z-index: 1; top: 6%; left: 51%; }
.dm-card--child .dm-card__photo { object-position: 30% 100%; }

/* ── Compliance strip ── */
.dm-strip {
  margin-top: clamp(18px, 2vw, 26px);
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(20px, 3vw, 46px);
  background: #F1F7F3; border: 1px solid #E4EDE7; border-radius: var(--radius-lg);
  padding: clamp(20px, 2.2vw, 28px) clamp(22px, 2.6vw, 34px);
}
.dm-strip__col { display: flex; gap: 16px; }
.dm-strip--single { grid-template-columns: minmax(0, 1fr); }
.dm-strip__col + .dm-strip__col { border-left: 1px solid #DDE9E1; padding-left: clamp(20px, 3vw, 46px); }
.dm-strip svg.dm-strip__ico {
  flex-shrink: 0; width: 30px; height: 30px; color: var(--g-main);
  stroke-width: 1.6; fill: none; stroke: currentColor;
}
.dm-strip h4 { font-size: 0.94rem; font-weight: 700; margin-bottom: 5px; color: var(--grey-800); }
.dm-strip p { font-size: 0.83rem; line-height: 1.55; color: var(--grey-500); }
.dm-strip a {
  display: inline-flex; align-items: center; gap: 7px; margin-top: 10px;
  font-size: 0.84rem; font-weight: 700; color: var(--g-main); text-decoration: none;
}
.dm-strip a:hover { color: var(--g-dark); }
.dm-strip a svg { width: 15px; height: 15px; }

/* ── Responsive ── */
@media (max-width: 1080px) {
  .dm-card__body { width: 62%; }
  .dm-card .dm-note { display: none; }
}
@media (max-width: 900px) {
  .dm-top { grid-template-columns: 1fr; }
  .dm-art img { margin: 0 auto; }
  .dm-art .dm-note { right: 2%; top: 2%; }
  .dm-cards { grid-template-columns: 1fr; }
  .dm-card { min-height: 320px; }
}
@media (max-width: 640px) {
  .dm-card { flex-direction: column; align-items: stretch; min-height: 0; }
  .dm-card__photo {
    position: relative; z-index: 0; order: -1;
    width: 100%; height: 190px; object-position: 50% 32%;
    -webkit-mask-image: linear-gradient(180deg, #000 62%, transparent 100%);
            mask-image: linear-gradient(180deg, #000 62%, transparent 100%);
  }
  .dm-card__body { width: 100%; padding-top: 6px; }
  .dm-card__body > p { max-width: none; }
  .dm-cta { width: 100%; }
  .dm-strip { grid-template-columns: 1fr; gap: 22px; }
  .dm-strip__col + .dm-strip__col { border-left: 0; border-top: 1px solid #DDE9E1; padding-left: 0; padding-top: 22px; }
  .dm-art .dm-note { position: static; display: block; margin: 14px auto 0; width: max-content; }
}

/* ═════════════════════════════════════
   STANDALONE PAGES — <body class="ew-page">
   /investment-philosophy, /research-analyst, /calculator, /demat, /contact,
   /market-insights: one or two sections under the fixed 74px navbar. With no
   screen-tall band to fill, content starts a set distance below the navbar
   instead of being centred (centring is what opened the big gap above the
   philosophy heading).
═════════════════════════════════════ */
.ew-page main > section { scroll-margin-top: 74px; }
.ew-page main > section:first-child { padding-top: calc(74px + clamp(28px, 4.5vw, 56px)); }
@media (min-width: 1024px) {
  .ew-page main > section,
  .ew-page main > #app-download { min-height: auto; padding: clamp(48px, 6vh, 80px) 0 clamp(56px, 7vh, 96px); }
  .ew-page main > section:first-child,
  .ew-page main > #blog:first-child { padding-top: calc(74px + clamp(32px, 5vh, 60px)); }
}

/* ═══════════════════════════════════════════════════════════════════════
   MOBILE POLISH — added 2026-09-18
   Loaded last on purpose: every rule here is an override of something
   earlier in this file, so keeping them together means no !important and
   one place to look when a phone layout misbehaves.
   Verified at 320 / 360 / 390 / 414 / 768 / 1024 / 1440 on index.html
   and explore.html.
═══════════════════════════════════════════════════════════════════════ */

/* ── 1. Navbar ────────────────────────────────────────────────────────
   At 360px the logo, the dark login pill and the hamburger sat edge to
   edge with no breathing room; at 320px the hamburger pushed past the
   right edge and gave the whole page a horizontal scrollbar. The pill
   now drops the word "Client" below 600px (see .nb-cta-word in the
   markup) and the hamburger becomes a fixed 38px square that matches
   the pill's height. */
@media (max-width: 600px) {
  .navbar { padding: 0 14px; gap: 10px; }
  .navbar__logo { gap: 8px; min-width: 0; }
  .nb-name { font-size: 1.04rem; white-space: nowrap; }
  .navbar__right { gap: 8px; }
  .nb-cta-word { display: none; }   /* the label collapses to just "Login" */
  .navbar__cta-btn {
    padding: 0 14px; height: 38px; font-size: 0.83rem;
    letter-spacing: 0.02em; box-shadow: 0 1px 6px rgba(13,30,22,0.20);
  }
  .navbar__menu-btn {
    padding: 0; width: 38px; height: 38px;
    align-items: center; justify-content: center;
    border-radius: 10px; border-color: rgba(26,107,60,0.22);
    background: #F5FAF7;
  }
}
@media (max-width: 370px) {
  .navbar { padding: 0 11px; gap: 8px; }
  .nb-mark { height: 24px; }
  .nb-name { font-size: 0.95rem; }
  .navbar__cta-btn { padding: 0 11px; font-size: 0.8rem; }
  .navbar__right { gap: 6px; }
}

/* The drawer can be taller than the screen once "More" is expanded. */
@media (max-width: 1040px) {
  .navbar__mobile-menu {
    max-height: calc(100vh - 74px);
    max-height: calc(100dvh - 74px);
    overflow-y: auto; -webkit-overflow-scrolling: touch;
  }
}
@media (max-width: 600px) {
  .navbar__mobile-menu {
    max-height: calc(100vh - 64px);
    max-height: calc(100dvh - 64px);
  }
  .navbar__mobile-menu a { padding: 12px 20px; }
  .navbar__mobile-sep { padding: 13px 20px 5px; }
}

/* Drawer footer: the login/booking actions, so the compact pill in the
   bar never has to carry everything. */
.navbar__mobile-actions {
  display: flex; gap: 10px; padding: 12px 20px 4px;
  margin-top: 6px; border-top: 1px solid #EDF1EE;
}
.navbar__mobile-actions > * {
  flex: 1; display: inline-flex; align-items: center; justify-content: center;
  gap: 7px; padding: 11px 12px; border-radius: var(--radius-sm);
  font-family: var(--font-heading); font-weight: 600; font-size: 0.86rem;
  text-decoration: none; cursor: pointer;
}
.navbar__mobile-actions .nbm-call {
  border: 1.5px solid rgba(26,107,60,0.3); color: #14532D; background: none;
}
.navbar__mobile-actions .nbm-login { background: #1A3C2E; border: 1px solid #1A3C2E; color: #fff; }

/* ── 2. Demat cards ───────────────────────────────────────────────────
   .dm-card--child pins the photo to the bottom of the frame so the desk
   and books lead on the wide layout. On the stacked mobile layout that
   crop cut the child out of her own card — only sleeves and books were
   left. Re-anchor near the top for the short mobile strip. */
@media (max-width: 640px) {
  .dm-card__photo { height: 200px; }
  .dm-card--child .dm-card__photo { object-position: 50% 7%; }
}

/* ── 3. Regulatory disclosure tiles (explore.html → Trust) ────────────
   .tcl-body is a flex child, so its default min-width:auto let long
   words ("Framework", "Compliance") push the label straight out through
   the right edge of the tile. Below 560px the tile also stacks the icon
   above the label so two-word titles get the full tile width. */
.tcl-body { min-width: 0; }
.tcl-title, .tcl-sub { overflow-wrap: anywhere; }
@media (max-width: 560px) {
  .tcomp-link {
    flex-direction: column; align-items: flex-start;
    gap: 8px; padding: 11px 12px;
  }
  .tcl-icon { width: 26px; height: 26px; }
  .tcl-icon svg { width: 14px; height: 14px; }
  .tcl-title { font-size: 0.79rem; line-height: 1.3; }
}

/* ── 4. Footer — reworked at every width ──────────────────────────────
   Two structural problems, neither of them mobile-only:

   · The Legal group carries seven links against Platform's three, so
     whatever column count you pick, something ends in a tall void. At
     1440 that was ~250px of dead space under Platform and Resources; at
     768 the Legal group was orphaned onto a row of its own; at 320 the
     old `1fr 1fr` plus a 44px gap overflowed the page outright.
   · Links inherited the body's 1.8 line-height on top of an 11px margin,
     so each one occupied ~60px and the seven-item column became a tower.

   Fix: tighten the rhythm everywhere, narrow the brand column and give it
   real content instead of air, keep all three link groups on one row
   while three columns still fit, and let Legal span the full width as a
   two-column list once they do not. */

/* Rhythm — every width */
.footer-grid { align-items: start; }
.footer-links h4 { margin-bottom: 13px; }
.footer-links li { margin-bottom: 8px; line-height: 1.4; }
.footer-links a { font-size: 0.875rem; }

/* Contact block under the brand blurb. The desktop footer had a column
   of nothing beside it; these are details people actually look in a
   footer for, and the site already publishes both. */
.footer-contact { display: grid; gap: 9px; margin-top: 18px; }
.footer-contact a,
.footer-contact span {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: 0.86rem; color: #475569; text-decoration: none;
  transition: color 0.2s;
}
.footer-contact a:hover { color: var(--c-brand, #1A6B3C); }
.footer-contact svg {
  flex-shrink: 0; width: 15px; height: 15px;
  color: #1A6B3C; fill: none; stroke: currentColor;
  stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round;
}

@media (min-width: 1024px) {
  .footer-grid { grid-template-columns: 1.5fr 1fr 1fr 1.15fr; gap: 30px 40px; }
  .footer-desc { max-width: 42ch; }
}

/* Below the desktop grid the seven-item Legal group is what breaks the
   layout: beside a three-item Platform it forced the whole band four rows
   taller than it needed to be, and stranded a void under the short
   columns.

   Tablet: two columns, with Platform stacked over Resources on the left
   (3 + 4 items) against Legal on the right (7). Two towers of roughly
   equal height, no void, and no sub-columns to go ragged.

   Narrow: the towers get too thin, so Platform and Resources pair up and
   Legal takes the full width as a two-column *grid* — grid, not CSS
   `columns`, because a column flow lets the two halves start at different
   heights the moment one label wraps, which reads as a bug. */
@media (max-width: 1023px) {
  .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px 32px; }
  .footer-grid > :first-child { grid-column: 1 / -1; margin-bottom: 2px; }
  .footer-desc { max-width: 60ch; }
  .footer-grid > :nth-child(2) { grid-column: 1; grid-row: 2; }
  .footer-grid > :nth-child(3) { grid-column: 1; grid-row: 3; }
  .footer-grid > :nth-child(4) { grid-column: 2; grid-row: 2 / 4; }
}

@media (max-width: 680px) {
  .footer-grid { gap: 24px 18px; }
  .footer-grid > :nth-child(2) { grid-column: 1; grid-row: 2; }
  .footer-grid > :nth-child(3) { grid-column: 2; grid-row: 2; }
  .footer-grid > :nth-child(4) { grid-column: 1 / -1; grid-row: 3; }
  .footer-grid > :nth-child(4) ul {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 18px; align-items: start;
  }
}

@media (max-width: 380px) {
  .footer-grid { gap: 22px 14px; }
  .footer-links a,
  .footer-contact a, .footer-contact span { font-size: 0.82rem; }
}

/* Bottom bar */
.footer-bottom { padding-top: 20px; gap: 12px 24px; align-items: center; }
.footer-disc { font-size: 0.71rem; line-height: 1.65; max-width: 760px; }
@media (max-width: 1023px) {
  .footer-bottom { flex-direction: column; align-items: flex-start; }
}

/* ── 5. Long values that were being cut with an ellipsis ──────────────
   grievance@equitywallet.in did not fit the contact row at any width
   below ~1100px. Let it wrap instead of truncating an address people
   are expected to copy. */
@media (max-width: 1100px) {
  .ccv2-row-val { white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere; }
}

/* ── 6. Basket modal ──────────────────────────────────────────────────
   Three equal stat columns clipped "Horizon" / "Min Invest" at 360px
   and below. */
@media (max-width: 420px) {
  .modal-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .mod-stat { padding: 14px 8px; }
  .mod-stat-val { font-size: 1.24rem; }
  .mod-stat-lbl { font-size: 0.6rem; letter-spacing: 0.03em; overflow-wrap: anywhere; }
}

/* ── 7. Tap targets ───────────────────────────────────────────────────
   Nothing interactive should be under ~40px on a touch screen. */
@media (max-width: 600px) {
  .ewh3-btn, .dm-cta, .ch-cta, .btn-primary, .btn-secondary { min-height: 46px; }
}

/* Stand-in for a broker logo whose third-party image host did not
   answer — see the BROKER LOGO FALLBACK block in site.js. Sized off the
   tile it replaces, so it works in the basket row, the broker modal and
   the "brokers we support" sheet alike. */
.ew-logo-fallback {
  display: grid; place-items: center;
  width: 26px; height: 26px;
  border-radius: 7px;
  background: linear-gradient(135deg, #EEF5F0 0%, #D7EADF 100%);
  color: #1A6B3C;
  font-family: var(--font-heading);
  font-weight: 700; font-size: 0.72rem; letter-spacing: 0.02em;
  line-height: 1;
}
.bm-logo-wrap .ew-logo-fallback,
.bbm-broker-img-wrap .ew-logo-fallback { font-size: 0.85rem; border-radius: 9px; }