/* =========================================================================
   KRISSY BANX — marketing site
   Real brand: graffiti + money energy. Multicolor gradient that echoes the
   logo (green -> gold -> pink -> blue), bold black outlines, gold/coin motifs,
   dark sections to make the colorful logo pop. Baloo 2 + Nunito.
   ========================================================================= */

:root {
  /* Brand palette echoing the graffiti logo */
  --green-50:#E7FBF0; --green-100:#C7F6DD; --green-300:#5FE39C;
  --green-400:#2FD27C; --green-500:#16C172; --green-600:#0FA45E; --green-700:#0B7A45;

  --gold-100:#FFF2CF; --gold-300:#FFD970; --gold-400:#FFC130; --gold-500:#F2A50E; --gold-700:#B97A07;

  --pink-100:#FFE3F0; --pink-300:#FFA8CF; --pink-500:#FF5FA2; --pink-600:#EE3D89;

  --blue-100:#E2F0FF; --blue-300:#9CCBFF; --blue-500:#2E9CFF; --blue-600:#1E7FE0;
  --purple-500:#7C4DFF;

  --ink:#14161F;          /* graffiti-black */
  --ink-2:#1C1F2B;        /* dark section */
  --ink-3:#0E1016;        /* deepest */
  --slate:#56607A;
  --mist:#8A93A6;
  --cloud:#E6E9F2;
  --paper:#FBFAF6;        /* warm off-white */
  --white:#FFFFFF;
  --danger:#F0524B;

  /* The signature brand gradient (logo order: green -> gold -> pink -> blue) */
  --brand-grad: linear-gradient(120deg,#16C172 0%,#FFC130 34%,#FF5FA2 66%,#2E9CFF 100%);
  --brand-grad-soft: linear-gradient(120deg,#16C17222,#FFC13022,#FF5FA222,#2E9CFF22);

  --radius-sm:12px; --radius-md:18px; --radius-lg:26px; --radius-xl:36px; --radius-pill:999px;

  --shadow-sm:0 4px 16px rgba(20,22,31,.08);
  --shadow-md:0 16px 44px rgba(20,22,31,.12);
  --shadow-lg:0 34px 80px rgba(20,22,31,.20);
  --shadow-gold:0 16px 34px rgba(242,165,14,.30);
  --shadow-green:0 16px 34px rgba(15,164,94,.30);

  --font-display:'Baloo 2', system-ui, sans-serif;
  --font-body:'Nunito', system-ui, -apple-system, sans-serif;
  --font-graffiti:'Luckiest Guy', 'Baloo 2', system-ui, sans-serif;

  --maxw:1180px;
  --nav-h:96px;
}

/* ----------------------------- Reset ----------------------------------- */
*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  font-family:var(--font-body); color:var(--ink); background:var(--paper);
  line-height:1.65; font-size:17px; overflow-x:hidden; -webkit-font-smoothing:antialiased;
}
img,svg,video{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; }
button{ font-family:inherit; cursor:pointer; border:none; background:none; }
h1,h2,h3,h4{ font-family:var(--font-display); line-height:1.06; font-weight:800; letter-spacing:-.01em; }
::selection{ background:var(--gold-300); color:var(--ink); }
:focus-visible{ outline:3px solid var(--pink-500); outline-offset:3px; border-radius:8px; }

/* ----------------------------- Layout ---------------------------------- */
.wrap{ width:100%; max-width:var(--maxw); margin:0 auto; padding:0 24px; }
.section{ padding:92px 0; position:relative; }
.section-sm{ padding:60px 0; }
.center{ text-align:center; }

.eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--font-display); font-weight:800; font-size:13.5px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--green-700); background:var(--green-50);
  padding:7px 16px; border-radius:var(--radius-pill); margin-bottom:18px;
}
.eyebrow.gold{ color:var(--gold-700); background:var(--gold-100); }
.eyebrow.pink{ color:var(--pink-600); background:var(--pink-100); }
.eyebrow.blue{ color:var(--blue-600); background:var(--blue-100); }
.eyebrow.on-dark{ color:#fff; background:rgba(255,255,255,.12); }

.section h2{ font-size:clamp(30px,4.6vw,52px); margin-bottom:16px; }
.section .lead{ font-size:clamp(17px,2vw,21px); color:var(--slate); max-width:660px; }
.center .lead{ margin-left:auto; margin-right:auto; }

/* Gradient brand text */
.grad{
  background:var(--brand-grad); -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
}

/* ----------------------------- Buttons --------------------------------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  font-family:var(--font-display); font-weight:800; font-size:17px;
  padding:15px 30px; border-radius:var(--radius-pill);
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease, filter .18s ease;
  white-space:nowrap; cursor:pointer; border:2px solid transparent;
}
.btn:active{ transform:translateY(1px) scale(.99); }
.btn-primary{ background:var(--green-500); color:#fff; box-shadow:var(--shadow-green); }
.btn-primary:hover{ background:var(--green-600); transform:translateY(-2px); }
.btn-gold{ background:var(--gold-400); color:var(--ink); box-shadow:var(--shadow-gold); }
.btn-gold:hover{ background:var(--gold-300); transform:translateY(-2px); }
.btn-pink{ background:var(--pink-500); color:#fff; box-shadow:0 16px 34px rgba(238,61,137,.30); }
.btn-pink:hover{ background:var(--pink-600); transform:translateY(-2px); }
.btn-dark{ background:var(--ink); color:#fff; }
.btn-dark:hover{ background:#000; transform:translateY(-2px); }
.btn-ghost{ background:var(--white); color:var(--ink); box-shadow:var(--shadow-sm); }
.btn-ghost:hover{ transform:translateY(-2px); box-shadow:var(--shadow-md); }
.btn-outline{ background:transparent; border-color:var(--cloud); color:var(--ink); }
.btn-outline:hover{ border-color:var(--green-500); color:var(--green-600); }
.btn-outline-light{ background:transparent; border-color:rgba(255,255,255,.4); color:#fff; }
.btn-outline-light:hover{ background:rgba(255,255,255,.12); transform:translateY(-2px); }
.btn-lg{ padding:18px 38px; font-size:19px; }
.btn-block{ width:100%; }

/* ----------------------------- Navbar ---------------------------------- */
.nav{
  position:sticky; top:0; z-index:100; height:var(--nav-h); display:flex; align-items:center;
  background:rgba(251,250,246,.82); backdrop-filter:saturate(180%) blur(14px);
  -webkit-backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid transparent; transition:border-color .25s, box-shadow .25s, background .25s;
}
.nav.scrolled{ border-color:var(--cloud); box-shadow:var(--shadow-sm); background:rgba(255,255,255,.92); }
.nav .wrap{ display:flex; align-items:center; justify-content:space-between; }
.nav-logo{ display:flex; align-items:center; padding:4px 0; }
.nav-logo img{
  height:76px; width:auto; display:block;
  filter:drop-shadow(0 2px 6px rgba(20,22,31,.20));
  transition:transform .25s cubic-bezier(.2,.7,.2,1);
}
.nav-logo:hover img{ transform:rotate(-3deg) scale(1.06); }
@media (max-width:520px){ .nav-logo img{ height:58px; } }
.nav-links{ display:flex; align-items:center; gap:22px; }
.nav-links a{ font-family:var(--font-display); font-weight:700; color:var(--ink); transition:color .15s; font-size:16px; }
.nav-links a:hover, .nav-links a.active{ color:var(--green-600); }
.nav-cta{ display:flex; align-items:center; gap:14px; }
.nav-login{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-family:var(--font-display); font-weight:800; font-size:16px; color:var(--ink);
  padding:9px 20px; border-radius:var(--radius-pill); border:2px solid var(--cloud);
  transition:border-color .15s, color .15s, background .15s, transform .15s;
}
.nav-login::before{ content:"🔑"; font-size:14px; }
.nav-login:hover{ border-color:var(--green-500); color:var(--green-600); transform:translateY(-1px); }
.nav-toggle{ display:none; flex-direction:column; gap:5px; padding:8px; }
.nav-toggle span{ width:26px; height:3px; background:var(--ink); border-radius:3px; transition:.25s; }

@media (max-width:980px){
  .nav-toggle{ display:flex; }
  .nav-menu{
    position:fixed; inset:var(--nav-h) 0 auto 0; background:var(--white);
    flex-direction:column; align-items:stretch; gap:0; padding:12px 24px 28px;
    box-shadow:var(--shadow-lg); transform:translateY(-12px); opacity:0; pointer-events:none;
    transition:.25s ease; max-height:calc(100vh - var(--nav-h)); overflow-y:auto;
  }
  .nav-menu.open{ transform:translateY(0); opacity:1; pointer-events:auto; }
  .nav-menu .nav-links{ flex-direction:column; align-items:stretch; gap:0; }
  .nav-menu .nav-links a{ padding:14px 4px; border-bottom:1px solid var(--cloud); font-size:18px; }
  .nav-menu .nav-cta{ margin-top:18px; flex-direction:column; align-items:stretch; }
}
@media (min-width:981px){
  .nav-menu{ display:flex !important; align-items:center; gap:22px; transform:none !important; opacity:1 !important; pointer-events:auto !important; }
}
@media (max-width:1120px) and (min-width:981px){
  .nav-links{ gap:15px; }
  .nav-links a{ font-size:15px; }
  .nav-menu{ gap:16px; }
  .nav-cta{ gap:10px; }
  .nav-login{ padding:9px 14px; }
  .nav-cta .btn{ padding:11px 18px; font-size:15px; }
}

/* ----------------------------- Hero ------------------------------------ */
.hero{
  position:relative; overflow:hidden;
  min-height:clamp(480px,56vw,660px); display:flex; align-items:center;
  background:#F6D2F1 url('hero-banner.png') no-repeat right center;
  background-size:cover;
}
/* Pink scrim fades into the banner so the image's baked-in pink reads as intentional (no hard edges). */
.hero::before{
  content:''; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(90deg,#F6D2F1 0%, #F6D2F1 30%, rgba(246,210,241,.72) 47%, rgba(246,210,241,0) 66%);
}
.hero .wrap{ position:relative; z-index:2; width:100%; }
.hero-grid{ display:grid; grid-template-columns:1fr; gap:0; align-items:center; }
.hero-copy{ max-width:600px; }
.hero h1{ font-size:clamp(38px,6vw,68px); line-height:1.02; margin-bottom:18px; }
.hero .sub{ font-size:clamp(17px,2vw,20px); color:var(--slate); max-width:540px; margin-bottom:26px; }
.hero-actions{ display:flex; flex-wrap:wrap; gap:14px; align-items:center; }
.hero-trust{ margin-top:26px; display:flex; gap:20px; flex-wrap:wrap; color:var(--slate); font-weight:700; font-size:15px; }
.hero-trust span{ display:inline-flex; align-items:center; gap:8px; }

/* Slogan chips: Track · Learn · Save · Win */
.slogan{ display:inline-flex; flex-wrap:wrap; gap:9px; margin-bottom:22px; }
.slogan span{
  font-family:var(--font-display); font-weight:800; font-size:clamp(14px,1.7vw,17px);
  padding:6px 16px; border-radius:var(--radius-pill); color:#fff; box-shadow:var(--shadow-sm);
}
.slogan span:nth-child(1){ background:var(--green-500); }
.slogan span:nth-child(2){ background:var(--gold-500); }
.slogan span:nth-child(3){ background:var(--pink-500); }
.slogan span:nth-child(4){ background:var(--blue-500); }

/* Banner is now the hero background; the inline image/badges are hidden. */
.hero-art{ display:none; }
@keyframes floaty{ 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(-14px);} }

/* Mobile: anchor Krissy to the right, strengthen scrim top-to-bottom for legibility. */
@media(max-width:760px){
  .hero{ min-height:auto; padding:40px 0 300px; background-position:center bottom; background-size:140%; }
  .hero::before{
    background:linear-gradient(180deg,#F6D2F1 0%, #F6D2F1 38%, rgba(246,210,241,.55) 62%, rgba(246,210,241,0) 100%);
  }
  /* Prevent grid/flex blowout that clipped content on the right */
  .hero-grid{ min-width:0; }
  .hero-copy{ max-width:none; min-width:0; }
  .hero h1{ font-size:clamp(30px,8.5vw,46px); }
  .hero .sub{ max-width:none; }
  .hero-trust{ gap:12px 18px; }
}

/* ----------------------------- Marquee --------------------------------- */
.marquee{ background:var(--ink); color:#fff; overflow:hidden; padding:16px 0; }
.marquee-track{ display:flex; gap:42px; white-space:nowrap; width:max-content; animation:scroll 28s linear infinite; }
.marquee-track span{ font-family:var(--font-display); font-weight:800; font-size:17px; opacity:.95; display:inline-flex; gap:10px; align-items:center; }
.marquee-track span b{ color:var(--gold-400); }
@keyframes scroll{ from{ transform:translateX(0);} to{ transform:translateX(-50%);} }

/* ----------------------------- Cards / grids --------------------------- */
.grid{ display:grid; gap:24px; }
.grid-2{ grid-template-columns:repeat(2,1fr); }
.grid-3{ grid-template-columns:repeat(3,1fr); }
.grid-4{ grid-template-columns:repeat(4,1fr); }

.card{
  background:var(--white); border-radius:var(--radius-lg); padding:30px;
  box-shadow:var(--shadow-sm); border:1px solid var(--cloud);
  transition:transform .22s, box-shadow .22s;
}
.card:hover{ transform:translateY(-6px); box-shadow:var(--shadow-md); }
.card .ico{ width:62px; height:62px; border-radius:18px; display:grid; place-items:center; font-size:30px; margin-bottom:18px; }
.ico.green{ background:var(--green-50);} .ico.gold{ background:var(--gold-100);}
.ico.pink{ background:var(--pink-100);} .ico.blue{ background:var(--blue-100);}
.ico.purple{ background:#EEE7FF;} .ico.teal{ background:#D9F7F1;}
.card h3{ font-size:22px; margin-bottom:10px; }
.card p{ color:var(--slate); font-size:16px; }

/* ----------------------------- Who's Krissy ---------------------------- */
.who-grid{ display:grid; grid-template-columns:.92fr 1.08fr; gap:56px; align-items:center; }
.who-photo{ position:relative; }

/* Clean photo: thin gradient ring + crisp shadow (no blurry wash behind it). */
.who-frame{
  position:relative; border-radius:var(--radius-xl); padding:6px;
  background:var(--brand-grad); box-shadow:var(--shadow-md);
  max-width:440px; margin-inline:auto;
}
.who-frame img{
  width:100%; aspect-ratio:4/5; object-fit:cover; object-position:50% 14%;
  border-radius:calc(var(--radius-xl) - 6px); display:block; background:#EFF1F6;
}
/* Founder badge overlaid cleanly on the photo's bottom-left corner */
.who-badge{
  position:absolute; left:16px; bottom:16px; z-index:2;
  display:inline-flex; align-items:center; gap:7px;
  font-family:var(--font-display); font-weight:800; font-size:13.5px; color:var(--ink);
  background:rgba(255,255,255,.96); padding:9px 16px; border-radius:var(--radius-pill);
  box-shadow:0 8px 22px rgba(20,22,31,.28); backdrop-filter:blur(4px);
}

/* Delightful stat cards with gradient graffiti numbers + coin accent */
.who-mini{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin:24px auto 0; max-width:640px; }
@media(max-width:560px){ .who-mini{ grid-template-columns:1fr; } }
.who-mini .m{
  position:relative; overflow:hidden; min-width:0;
  background:linear-gradient(180deg,#fff 0%, #FBFAF6 100%);
  border:1px solid var(--cloud); border-radius:var(--radius-lg);
  padding:20px 18px; box-shadow:var(--shadow-sm);
  transition:transform .2s cubic-bezier(.2,.7,.2,1), box-shadow .2s, border-color .2s;
}
/* gradient top accent + soft coin glow */
.who-mini .m::before{ content:""; position:absolute; top:0; left:0; right:0; height:5px; background:var(--brand-grad); }
.who-mini .m::after{
  content:""; position:absolute; top:-30px; right:-30px; width:92px; height:92px; border-radius:50%;
  background:radial-gradient(circle at 32% 30%, var(--gold-300), var(--gold-500)); opacity:.14;
}
.who-mini .m:hover{ transform:translateY(-5px); box-shadow:var(--shadow-md); border-color:var(--gold-300); }
.who-mini .m .m-ico{
  position:relative; z-index:1; display:inline-grid; place-items:center;
  width:42px; height:42px; border-radius:13px; margin-bottom:13px; font-size:21px;
  background:var(--green-50); box-shadow:inset 0 0 0 1.5px var(--green-100);
}
.who-mini .m b{
  position:relative; z-index:1; font-family:var(--font-graffiti); font-weight:400; display:block;
  line-height:1.05; font-size:clamp(20px,2.3vw,26px); letter-spacing:0; margin-bottom:6px; white-space:nowrap;
  background:var(--brand-grad); -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
}
.who-mini .m span{ position:relative; z-index:1; display:block; color:var(--slate); font-size:14px; font-weight:700; line-height:1.4; }
.who-mini .m .m-label{ position:relative; z-index:1; display:block; color:var(--slate); font-size:13.5px; font-weight:800; line-height:1.35; }

/* Responsive video embed */
.video-embed{ position:relative; border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow-lg); background:#000; }
.video-embed video{ width:100%; height:auto; display:block; }

/* ----------------------------- How it works (5 steps) ------------------ */
.how{ background:var(--ink-2); color:#fff; }
.how .lead{ color:rgba(255,255,255,.78); }
.how-layout{ display:grid; grid-template-columns:300px 1fr; gap:44px; align-items:center; margin-top:46px; }
.how-cutout{ position:relative; display:grid; place-items:center; }
.how-cutout img{ width:100%; max-width:320px; filter:drop-shadow(0 24px 40px rgba(0,0,0,.45)); }
.how-cutout::after{ content:""; position:absolute; inset:auto 0 6% 0; height:240px; z-index:-1; border-radius:50%;
  background:radial-gradient(closest-side, rgba(255,193,48,.35), transparent 70%); }
.steps{ display:grid; grid-template-columns:1fr; gap:14px; counter-reset:step; }
.step{
  position:relative; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.10);
  border-radius:var(--radius-lg); padding:20px 22px 20px 78px; transition:transform .2s, background .2s;
}
.step:hover{ transform:translateX(4px); background:rgba(255,255,255,.08); }
.step .num{
  counter-increment:step; position:absolute; left:20px; top:20px;
  width:42px; height:42px; border-radius:50%; display:grid; place-items:center;
  font-family:var(--font-display); font-weight:800; font-size:19px; color:#fff;
}
.step .num::before{ content:counter(step); }
.step:nth-child(1) .num{ background:var(--green-500);} .step:nth-child(2) .num{ background:var(--gold-500);}
.step:nth-child(3) .num{ background:var(--pink-500);} .step:nth-child(4) .num{ background:var(--blue-500);}
.step:nth-child(5) .num{ background:var(--purple-500);}
.step h3{ font-size:20px; margin-bottom:4px; }
.step p{ color:rgba(255,255,255,.74); font-size:15px; }

/* ----------------------------- Goal tiers ------------------------------ */
.tiers{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.tier{
  text-align:center; border-radius:var(--radius-lg); padding:30px 22px; color:#fff;
  box-shadow:var(--shadow-md); position:relative; overflow:hidden;
}
.tier b{ font-family:var(--font-display); font-size:clamp(34px,4.6vw,48px); display:block; line-height:1; }
.tier span{ font-weight:700; opacity:.92; }
.tier.t1{ background:linear-gradient(160deg,var(--green-400),var(--green-600)); }
.tier.t2{ background:linear-gradient(160deg,var(--gold-400),var(--gold-500)); color:var(--ink); }
.tier.t3{ background:linear-gradient(160deg,var(--blue-500),var(--blue-600)); }

/* ----------------------------- Split / story --------------------------- */
.split{ display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center; }
.story-card{
  background:var(--brand-grad); color:#fff; border-radius:var(--radius-xl); padding:6px;
  box-shadow:var(--shadow-lg);
}
.story-card .inner{ background:var(--ink-2); border-radius:30px; padding:40px; position:relative; overflow:hidden; }
.story-card .quote{ font-family:var(--font-display); font-size:25px; font-weight:700; line-height:1.25; margin-bottom:18px; }
.story-card .byline{ font-family:var(--font-display); font-weight:800; }
.story-card .byline small{ display:block; font-weight:600; opacity:.78; }
.story-stats{ display:flex; gap:30px; margin-top:28px; flex-wrap:wrap; }
.story-stats .stat b{ font-family:var(--font-display); font-size:30px; display:block; color:var(--gold-300); }
.story-stats .stat span{ font-size:13.5px; opacity:.9; }

/* ----------------------------- Bands ----------------------------------- */
.band{ background:var(--green-50); }
.band.gold{ background:var(--gold-100); }
.band.pink{ background:var(--pink-100); }
.band.cream{ background:#FFF7E8; }
.band.dark{ background:var(--ink-2); color:#fff; }
.band.dark .lead, .band.dark p{ color:rgba(255,255,255,.78); }
.band.dark h2, .band.dark h3{ color:#fff; }

/* ----------------------------- Events ---------------------------------- */
.event-row{ display:flex; gap:20px; align-items:center; }
.event-row .ico{ flex-shrink:0; margin:0; }
.event-row h3{ margin-bottom:2px; font-size:20px; }
.event-row p{ color:var(--slate); font-size:15px; }

/* ----------------------------- Support / GoFundMe band ----------------- */
.support-band{
  position:relative; overflow:hidden; color:#fff; border-radius:var(--radius-xl);
  padding:6px; background:var(--brand-grad); box-shadow:var(--shadow-lg);
}
.support-band .inner{
  background:var(--ink-3); border-radius:30px; padding:54px clamp(24px,5vw,64px); text-align:center;
}
.support-band h2{ font-size:clamp(28px,4vw,46px); margin-bottom:14px; color:#fff; }
.support-band p{ color:rgba(255,255,255,.82); max-width:680px; margin:0 auto 26px; }
.support-actions{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }
.support-note{ margin-top:22px; font-size:14px; color:rgba(255,255,255,.6); }

/* ----------------------------- Shop products --------------------------- */
.product{ background:#fff; border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow-sm); border:1px solid var(--cloud); transition:transform .22s, box-shadow .22s; display:flex; flex-direction:column; }
.product:hover{ transform:translateY(-6px); box-shadow:var(--shadow-md); }
.product .thumb{ aspect-ratio:1/1; background:#F4F6FA; display:grid; place-items:center; overflow:hidden; }
.product .thumb img{ width:100%; height:100%; object-fit:cover; }
.product .pbody{ padding:22px; display:flex; flex-direction:column; gap:6px; flex:1; }
.product h3{ font-size:19px; }
.product p{ color:var(--slate); font-size:14.5px; flex:1; }
.product .price{ font-family:var(--font-display); font-weight:800; font-size:20px; color:var(--green-600); margin-top:6px; }
.product .sizes{ font-size:13px; color:var(--mist); font-weight:700; }
.tag{ display:inline-block; width:max-content; font-size:12px; font-weight:800; font-family:var(--font-display); padding:4px 12px; border-radius:var(--radius-pill); background:var(--gold-100); color:var(--gold-700); }

/* ----------------------------- Flip cards (flashcards) ----------------- */
.flip-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
.flip{ perspective:1000px; aspect-ratio:3/4; min-height:230px; cursor:pointer; background:none; padding:0; border:0; }
.flip-inner{ position:relative; width:100%; height:100%; transition:transform .6s cubic-bezier(.2,.8,.2,1); transform-style:preserve-3d; will-change:transform; }
.flip.flipped .flip-inner{ transform:rotateY(180deg); }
.flip-face{
  position:absolute; inset:0; backface-visibility:hidden; -webkit-backface-visibility:hidden;
  border-radius:var(--radius-lg); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; text-align:center; padding:22px;
  box-shadow:var(--shadow-sm); border:2px solid var(--cloud);
}
.flip-front{ background:#fff; }
.flip-front .term{ font-family:var(--font-display); font-weight:800; font-size:26px; }
.flip-front .hint{ position:absolute; bottom:14px; left:0; right:0; font-size:12px; color:var(--mist); font-weight:700; }
.flip-back{ background:var(--ink-2); color:#fff; transform:rotateY(180deg); border-color:transparent; }
.flip-back p{ font-size:15px; line-height:1.4; }

/* ----------------------------- Social ---------------------------------- */
.socials{ display:flex; gap:14px; flex-wrap:wrap; justify-content:center; }
.social-btn{
  display:inline-flex; align-items:center; gap:10px; padding:13px 22px; border-radius:var(--radius-pill);
  background:var(--white); box-shadow:var(--shadow-sm); font-family:var(--font-display); font-weight:800;
  transition:transform .18s, box-shadow .18s;
}
.social-btn:hover{ transform:translateY(-3px); box-shadow:var(--shadow-md); }
.social-btn .si{ width:36px; height:36px; border-radius:11px; display:grid; place-items:center; color:#fff; font-weight:800; }
.si.tiktok{ background:#010101; } .si.ig{ background:linear-gradient(45deg,#F58529,#DD2A7B,#8134AF); } .si.fb{ background:#1877F2; }

/* ----------------------------- FAQ ------------------------------------- */
.faq{ max-width:820px; margin:0 auto; }
.faq-item{ background:var(--white); border:1px solid var(--cloud); border-radius:var(--radius-md); margin-bottom:14px; overflow:hidden; transition:box-shadow .2s; }
.faq-item:hover{ box-shadow:var(--shadow-sm); }
.faq-q{ width:100%; text-align:left; display:flex; justify-content:space-between; align-items:center; gap:16px; padding:22px 26px; font-family:var(--font-display); font-weight:800; font-size:18px; color:var(--ink); }
.faq-q .chev{ transition:transform .25s; color:var(--green-500); font-size:24px; flex-shrink:0; }
.faq-item.open .chev{ transform:rotate(45deg); }
.faq-a{ max-height:0; overflow:hidden; transition:max-height .3s ease; }
.faq-a p{ padding:0 26px 24px; color:var(--slate); }

/* ----------------------------- Footer ---------------------------------- */
.footer{ background:var(--ink-3); color:#fff; padding:66px 0 30px; }
.footer-grid{ display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr 1fr; gap:36px; margin-bottom:46px; }
.footer-brand img{ height:64px; width:auto; margin-bottom:16px; }
.footer-brand p{ color:rgba(255,255,255,.66); max-width:320px; font-size:15px; }
.footer h4{ font-size:16px; margin-bottom:16px; color:var(--gold-400); }
.footer ul li{ margin-bottom:11px; }
.footer ul a{ color:rgba(255,255,255,.74); font-size:15px; transition:color .15s; }
.footer ul a:hover{ color:#fff; }
.footer-bottom{ border-top:1px solid rgba(255,255,255,.12); padding-top:24px; display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap; color:rgba(255,255,255,.6); font-size:14px; }
.footer-social{ display:flex; gap:12px; }
.footer-social a{ width:38px; height:38px; border-radius:11px; display:grid; place-items:center; background:rgba(255,255,255,.1); transition:background .18s; }
.footer-social a:hover{ background:rgba(255,255,255,.22); }

/* ----------------------------- Page header (subpages) ------------------ */
.page-head{
  padding:62px 0 54px; text-align:center;
  background:
    radial-gradient(700px 340px at 50% -20%, var(--pink-100), transparent 65%),
    radial-gradient(560px 300px at 10% 0%, var(--green-50), transparent 60%),
    var(--paper);
}
.page-head h1{ font-size:clamp(34px,5.4vw,58px); margin-bottom:14px; }
.page-head p{ color:var(--slate); font-size:19px; max-width:640px; margin:0 auto; }

/* ----------------------------- Legal / prose --------------------------- */
.prose{ max-width:820px; margin:0 auto; }
.prose h2{ font-size:26px; margin:38px 0 14px; color:var(--ink); }
.prose h3{ font-size:20px; margin:26px 0 10px; }
.prose p, .prose li{ color:var(--slate); margin-bottom:14px; font-size:16.5px; }
.prose ul, .prose ol{ margin:0 0 18px 24px; }
.prose ul li{ list-style:disc; } .prose ol li{ list-style:decimal; }
.prose a{ color:var(--green-600); font-weight:700; text-decoration:underline; text-underline-offset:3px; }
.prose strong{ color:var(--ink); }
.toc{ background:var(--green-50); border-radius:var(--radius-md); padding:24px 28px; margin-bottom:36px; }
.toc h4{ font-family:var(--font-display); margin-bottom:10px; }
.toc ul{ columns:2; gap:24px; }
.toc a{ color:var(--green-700); font-weight:700; text-decoration:none; display:block; padding:4px 0; }
.toc a:hover{ text-decoration:underline; }
.callout{ background:var(--gold-100); border-left:5px solid var(--gold-400); border-radius:10px; padding:18px 22px; margin:22px 0; }
.callout p{ color:var(--ink); margin:0; }
.updated{ color:var(--mist); font-size:15px; margin-bottom:8px; }

/* ----------------------------- Forms ----------------------------------- */
.field{ margin-bottom:18px; text-align:left; }
.field label{ display:block; font-family:var(--font-display); font-weight:800; margin-bottom:7px; font-size:15px; }
.field input, .field select, .field textarea{
  width:100%; border:2px solid var(--cloud); border-radius:var(--radius-md); padding:13px 16px;
  font-family:var(--font-body); font-size:16px; color:var(--ink); background:#fff; transition:border-color .15s;
}
.field input:focus, .field select:focus, .field textarea:focus{ outline:none; border-color:var(--green-500); }
.field textarea{ resize:vertical; min-height:130px; }
.form-card{ background:#fff; border-radius:var(--radius-lg); padding:36px; box-shadow:var(--shadow-md); border:1px solid var(--cloud); }
.form-msg{ margin-top:14px; font-weight:800; min-height:22px; }
.form-msg.error{ color:var(--danger); }

.info-list li{ display:flex; gap:14px; align-items:flex-start; margin-bottom:22px; }
.info-list .ico{ width:50px; height:50px; border-radius:14px; display:grid; place-items:center; font-size:24px; flex-shrink:0; }
.info-list b{ font-family:var(--font-display); display:block; }
.info-list span{ color:var(--slate); font-size:15px; }

/* ----------------------------- Stat strip ------------------------------ */
.stat-strip{ display:grid; grid-template-columns:repeat(4,1fr); gap:24px; text-align:center; }
.stat-strip .s b{ font-family:var(--font-display); font-size:clamp(30px,4vw,46px); display:block; }
.stat-strip .s:nth-child(1) b{ color:var(--green-500);} .stat-strip .s:nth-child(2) b{ color:var(--gold-500);}
.stat-strip .s:nth-child(3) b{ color:var(--pink-500);} .stat-strip .s:nth-child(4) b{ color:var(--blue-500);}
.stat-strip .s span{ color:var(--slate); font-weight:700; }

/* ----------------------------- Reveal animation ------------------------ */
/* Content is VISIBLE by default. We only pre-hide for the reveal animation
   once JS confirms it can run (html.js-reveal), so a JS/observer failure can
   never leave the page looking empty. */
.reveal{ transition:opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1); }
html.js-reveal .reveal{ opacity:0; transform:translateY(28px); }
html.js-reveal .reveal.in{ opacity:1; transform:none; }
.reveal.d1{ transition-delay:.08s; } .reveal.d2{ transition-delay:.16s; }
.reveal.d3{ transition-delay:.24s; } .reveal.d4{ transition-delay:.32s; }

@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; scroll-behavior:auto !important; }
  .reveal{ opacity:1; transform:none; transition:none; }
  .marquee-track{ animation:none !important; }
}

/* ----------------------------- Responsive ------------------------------ */
@media (max-width:980px){
  .hero-grid{ grid-template-columns:1fr; gap:36px; text-align:center; }
  .slogan, .hero-actions, .hero-trust{ justify-content:center; }
  .hero .sub{ margin-left:auto; margin-right:auto; }
  .who-grid{ grid-template-columns:1fr; gap:40px; }
  .who-photo{ max-width:440px; margin:0 auto; width:100%; }
  .how-layout{ grid-template-columns:1fr; gap:30px; }
  .how-cutout img{ max-width:260px; }
  .split{ grid-template-columns:1fr; gap:34px; }
  .grid-4{ grid-template-columns:repeat(2,1fr); }
  .flip-grid{ grid-template-columns:repeat(2,1fr); }
  .tiers{ grid-template-columns:1fr; }
  .stat-strip{ grid-template-columns:repeat(2,1fr); }
  .footer-grid{ grid-template-columns:repeat(3,1fr); }
  .footer-brand{ grid-column:1 / -1; }
}
@media (max-width:620px){
  .section{ padding:62px 0; }
  .grid-2, .grid-3, .grid-4{ grid-template-columns:1fr; }
  .flip-grid{ grid-template-columns:repeat(2,1fr); }
  .stat-strip{ grid-template-columns:1fr 1fr; }
  .story-card .inner, .form-card{ padding:26px 22px; }
  .support-band .inner{ padding:36px 22px; }
  .toc ul{ columns:1; }
  .footer-grid{ grid-template-columns:1fr 1fr; }
  .footer-brand{ grid-column:1 / -1; }
  .event-row{ flex-direction:column; text-align:center; align-items:center; }
}

/* =======================================================================
   KB v2 additions — member presence, app showcase, how-it-works, cards
   Content is visible by default; only .reveal pre-hides (and only with JS).
   ======================================================================= */

/* ---- Hero "already a member" affordance ---- */
.hero-login{ margin-top:14px; font-weight:700; color:var(--slate); font-size:15px; }
.hero-login a{ color:var(--green-600); font-weight:800; text-decoration:underline; text-underline-offset:3px; }
.hero-login a:hover{ color:var(--green-700); }

/* ---- Store badges (Coming Soon) ---- */
.store-badges{ display:flex; flex-wrap:wrap; gap:14px; }
.store-badge{
  display:inline-flex; align-items:center; gap:11px; position:relative;
  background:#000; color:#fff; border-radius:14px; padding:11px 18px 11px 16px;
  border:1px solid rgba(255,255,255,.18); box-shadow:var(--shadow-md);
  transition:transform .18s, box-shadow .18s;
}
.store-badge:hover{ transform:translateY(-3px); box-shadow:var(--shadow-lg); }
.store-badge .sb-ico{ width:30px; height:30px; display:grid; place-items:center; flex-shrink:0; }
.store-badge .sb-ico svg{ width:100%; height:100%; }
.store-badge .sb-text{ display:flex; flex-direction:column; line-height:1.05; text-align:left; }
.store-badge .sb-text small{ font-size:11px; font-weight:700; letter-spacing:.02em; opacity:.92; }
.store-badge .sb-text b{ font-family:var(--font-display); font-weight:800; font-size:19px; }
.store-badge .sb-soon{
  font-family:var(--font-display); font-weight:800; font-size:10px; letter-spacing:.06em;
  text-transform:uppercase; background:var(--gold-400); color:var(--ink);
  padding:3px 9px; border-radius:var(--radius-pill); margin-left:4px; white-space:nowrap;
}

/* ---- Members band (homepage) ---- */
.members-band{
  position:relative; overflow:hidden; border-radius:var(--radius-xl);
  padding:6px; background:var(--brand-grad); box-shadow:var(--shadow-lg);
}
.members-band .inner{
  background:var(--ink-3); border-radius:30px; padding:clamp(30px,5vw,56px);
  display:grid; grid-template-columns:1.15fr .85fr; gap:44px; align-items:center; color:#fff;
}
.members-band h2{ color:#fff; font-size:clamp(28px,4vw,44px); margin-bottom:14px; }
.members-band p{ color:rgba(255,255,255,.82); margin-bottom:14px; max-width:560px; }
.members-actions{ display:flex; flex-wrap:wrap; gap:14px; margin-top:22px; }
.members-split{ display:grid; gap:16px; }
.member-tile{
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12);
  border-radius:var(--radius-lg); padding:20px 22px; display:flex; gap:14px; align-items:flex-start;
}
.member-tile .mt-ico{ width:48px; height:48px; border-radius:14px; display:grid; place-items:center; font-size:24px; flex-shrink:0; background:rgba(255,255,255,.10); }
.member-tile b{ font-family:var(--font-display); display:block; font-size:18px; color:#fff; }
.member-tile span{ color:rgba(255,255,255,.74); font-size:14.5px; }

/* ---- App showcase ---- */
.appshow{ background:var(--ink-2); color:#fff; overflow:hidden; }
.appshow h2{ color:#fff; }
.appshow .lead{ color:rgba(255,255,255,.78); }
.appshow-grid{ display:grid; grid-template-columns:.95fr 1.05fr; gap:54px; align-items:center; margin-top:48px; }

/* Phone mockup (CSS-drawn) */
.phone{
  position:relative; width:280px; max-width:78vw; aspect-ratio:9/19; margin:0 auto;
  background:#0B0D13; border-radius:42px; padding:12px;
  box-shadow:0 40px 90px rgba(0,0,0,.55), inset 0 0 0 2px rgba(255,255,255,.06);
  border:3px solid #20242F;
}
.phone::before{ /* notch */
  content:""; position:absolute; top:14px; left:50%; transform:translateX(-50%);
  width:120px; height:22px; background:#0B0D13; border-radius:0 0 16px 16px; z-index:3;
}
.phone-screen{
  position:relative; width:100%; height:100%; border-radius:32px; overflow:hidden;
  background:radial-gradient(120% 80% at 50% 0%, #1d2230, #10131c 60%, #0c0e15 100%);
  display:flex; flex-direction:column; align-items:center; padding:34px 18px 18px;
}
.phone-logo{ height:38px; width:auto; margin-bottom:6px; filter:drop-shadow(0 4px 10px rgba(0,0,0,.5)); }
.phone-tag{ font-family:var(--font-display); font-weight:800; font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:var(--gold-300); margin-bottom:4px; }
.phone-amount{ font-family:var(--font-display); font-weight:800; font-size:30px; color:#fff; }
.phone-amount small{ display:block; font-size:11px; font-weight:700; color:rgba(255,255,255,.6); letter-spacing:.04em; text-transform:uppercase; margin-top:2px; }
.savings-grid{
  display:grid; grid-template-columns:repeat(10,1fr); gap:3px; width:100%;
  margin:14px 0 12px; padding:10px; background:rgba(255,255,255,.05); border-radius:14px;
}
.savings-grid i{ aspect-ratio:1/1; border-radius:3px; background:rgba(255,255,255,.10); display:block; }
.savings-grid i.f1{ background:var(--green-500); } .savings-grid i.f2{ background:var(--gold-400); }
.savings-grid i.f3{ background:var(--pink-500); } .savings-grid i.f4{ background:var(--blue-500); }
.phone-bar{ width:100%; height:9px; border-radius:999px; background:rgba(255,255,255,.10); overflow:hidden; margin-top:2px; }
.phone-bar i{ display:block; height:100%; width:78%; background:var(--brand-grad); border-radius:999px; }
.phone-stats{ display:flex; gap:8px; width:100%; margin-top:12px; }
.phone-stats div{ flex:1; background:rgba(255,255,255,.05); border-radius:12px; padding:9px 6px; text-align:center; }
.phone-stats b{ font-family:var(--font-display); font-size:15px; color:#fff; display:block; }
.phone-stats span{ font-size:9.5px; color:rgba(255,255,255,.6); text-transform:uppercase; letter-spacing:.04em; }

.app-pillars{ display:grid; grid-template-columns:repeat(2,1fr); gap:16px; margin:8px 0 26px; }
.app-pillar{ background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.10); border-radius:var(--radius-lg); padding:20px; }
.app-pillar .ap-ico{ width:50px; height:50px; border-radius:14px; display:grid; place-items:center; font-size:26px; margin-bottom:12px; }
.app-pillar h3{ color:#fff; font-size:18px; margin-bottom:6px; }
.app-pillar p{ color:rgba(255,255,255,.72); font-size:14.5px; }
.app-coming{ font-family:var(--font-display); font-weight:800; color:#fff; font-size:18px; margin-bottom:14px; display:flex; align-items:center; gap:10px; }
.app-coming::before{ content:"📱"; }

/* ---- Flashcards redesign (Test Your Money Smarts) ---- */
.cards-head h2{ font-family:var(--font-graffiti); font-weight:400; letter-spacing:.01em; font-size:clamp(32px,5vw,56px); }
.flip{ perspective:1200px; }
.flip-inner{ border-radius:var(--radius-lg); }
.flip-face{
  border-radius:var(--radius-lg); border:none; padding:24px 20px;
  box-shadow:0 18px 40px rgba(20,22,31,.18);
}
.flip-front{
  flex-direction:column; gap:10px; color:#fff; position:relative;
  background:var(--brand-grad);
}
.flip .c-grad-1 .flip-front, .flip-front{ }
.flip.c1 .flip-front{ background:linear-gradient(155deg,var(--green-400),var(--green-600)); }
.flip.c2 .flip-front{ background:linear-gradient(155deg,var(--gold-300),var(--gold-500)); color:var(--ink); }
.flip.c3 .flip-front{ background:linear-gradient(155deg,var(--pink-500),var(--pink-600)); }
.flip.c4 .flip-front{ background:linear-gradient(155deg,var(--blue-500),var(--purple-500)); }
.flip.c5 .flip-front{ background:linear-gradient(155deg,var(--green-500),var(--blue-500)); }
.flip.c6 .flip-front{ background:linear-gradient(155deg,var(--gold-400),var(--pink-500)); }
.flip-front::after{ /* coin shine — kept inside the face (no overflow, so 3D flip stays clean) */
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background:radial-gradient(circle at 24% 16%, rgba(255,255,255,.4), transparent 48%);
}
.flip-front .coin{ font-size:38px; line-height:1; filter:drop-shadow(0 4px 8px rgba(0,0,0,.25)); }
.flip-front .term{ font-family:var(--font-display); font-weight:800; font-size:clamp(20px,3.4vw,27px); position:relative; z-index:1; }
.flip-front .hint{
  position:static; margin-top:6px; font-size:12px; font-weight:800; color:inherit; opacity:.85;
  background:rgba(255,255,255,.22); padding:5px 12px; border-radius:var(--radius-pill);
}
.flip.c2 .flip-front .hint{ background:rgba(0,0,0,.12); }
.flip-back{
  background:var(--ink-2); color:#fff; flex-direction:column; gap:12px;
  border:2px solid transparent; background-clip:padding-box; position:relative;
}
.flip-back::before{
  content:""; position:absolute; inset:0; border-radius:var(--radius-lg); padding:2px;
  background:var(--brand-grad); -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude; pointer-events:none;
}
.flip-back .back-emoji{ font-size:30px; }
.flip-back p{ font-size:15px; line-height:1.45; color:rgba(255,255,255,.9); }
.flip-back .back-term{ font-family:var(--font-display); font-weight:800; color:var(--gold-300); font-size:16px; }

/* ====================== HOW IT WORKS PAGE ============================== */
.hiw-hero{
  position:relative; overflow:hidden; color:#fff; text-align:center;
  padding:74px 0 64px; background:var(--ink-2);
}
.hiw-hero::before{
  content:""; position:absolute; inset:0; opacity:.5; pointer-events:none;
  background:
    radial-gradient(540px 300px at 15% 0%, rgba(22,193,114,.5), transparent 60%),
    radial-gradient(540px 300px at 85% 10%, rgba(46,156,255,.45), transparent 60%),
    radial-gradient(480px 260px at 50% 100%, rgba(255,95,162,.4), transparent 60%);
}
.hiw-hero .wrap{ position:relative; z-index:1; }
.hiw-hero h1{ font-family:var(--font-graffiti); font-weight:400; letter-spacing:.01em; font-size:clamp(36px,6vw,66px); margin-bottom:16px; }
.hiw-hero h1 .grad{ -webkit-text-stroke:0; }
.hiw-hero p{ color:rgba(255,255,255,.82); font-size:clamp(17px,2vw,21px); max-width:680px; margin:0 auto; }
.hiw-chiprow{ display:flex; flex-wrap:wrap; gap:10px; justify-content:center; margin-top:26px; }
.hiw-chip{ font-family:var(--font-display); font-weight:800; font-size:14px; padding:8px 16px; border-radius:var(--radius-pill); background:rgba(255,255,255,.10); color:#fff; }

.hiw-steps{ display:grid; gap:30px; margin-top:10px; }
.hiw-step{ display:grid; grid-template-columns:1fr 1fr; gap:44px; align-items:center; }
.hiw-step:nth-child(even){ direction:rtl; }
.hiw-step:nth-child(even) > *{ direction:ltr; }
.hiw-text{ position:relative; }
.hiw-badge{
  display:inline-flex; align-items:center; gap:12px; margin-bottom:16px;
}
.hiw-num{
  width:62px; height:62px; border-radius:20px; display:grid; place-items:center; flex-shrink:0;
  font-family:var(--font-display); font-weight:800; font-size:30px; color:#fff; box-shadow:var(--shadow-md);
}
.hiw-step:nth-child(1) .hiw-num{ background:linear-gradient(160deg,var(--green-400),var(--green-600)); }
.hiw-step:nth-child(2) .hiw-num{ background:linear-gradient(160deg,var(--gold-400),var(--gold-500)); color:var(--ink); }
.hiw-step:nth-child(3) .hiw-num{ background:linear-gradient(160deg,var(--pink-500),var(--pink-600)); }
.hiw-step:nth-child(4) .hiw-num{ background:linear-gradient(160deg,var(--blue-500),var(--blue-600)); }
.hiw-step:nth-child(5) .hiw-num{ background:linear-gradient(160deg,var(--purple-500),var(--blue-500)); }
.hiw-kicker{ font-family:var(--font-display); font-weight:800; font-size:13px; letter-spacing:.1em; text-transform:uppercase; color:var(--green-600); }
.hiw-text h2{ font-size:clamp(26px,3.6vw,40px); margin:8px 0 12px; }
.hiw-text p{ color:var(--slate); font-size:17px; margin-bottom:14px; }
.hiw-points{ display:grid; gap:8px; margin-top:6px; }
.hiw-points li{ display:flex; gap:10px; align-items:flex-start; color:var(--slate); font-weight:600; }
.hiw-points li::before{ content:"✅"; flex-shrink:0; }

.hiw-visual{
  position:relative; border-radius:var(--radius-xl); padding:40px; min-height:300px;
  display:grid; place-items:center; overflow:hidden; box-shadow:var(--shadow-lg);
}
.hiw-step:nth-child(1) .hiw-visual{ background:linear-gradient(150deg,var(--green-50),var(--green-100)); }
.hiw-step:nth-child(2) .hiw-visual{ background:linear-gradient(150deg,var(--gold-100),#FFE7A8); }
.hiw-step:nth-child(3) .hiw-visual{ background:linear-gradient(150deg,var(--pink-100),#FFD0E6); }
.hiw-step:nth-child(4) .hiw-visual{ background:linear-gradient(150deg,var(--blue-100),#CFE6FF); }
.hiw-step:nth-child(5) .hiw-visual{ background:linear-gradient(150deg,#EEE7FF,var(--blue-100)); }
.hiw-emoji{ font-size:clamp(70px,12vw,120px); line-height:1; filter:drop-shadow(0 12px 24px rgba(0,0,0,.18)); }
.hiw-cutout-wrap{ position:relative; display:grid; place-items:center; }
.hiw-cutout-wrap img{ max-width:280px; width:100%; filter:drop-shadow(0 24px 40px rgba(0,0,0,.30)); }

/* goal tier mini cards inside step 1 visual */
.hiw-goals{ display:flex; gap:12px; flex-wrap:wrap; justify-content:center; }
.hiw-goals span{
  font-family:var(--font-display); font-weight:800; color:#fff; padding:16px 20px; border-radius:18px;
  font-size:clamp(20px,3vw,28px); box-shadow:var(--shadow-md);
}
.hiw-goals span:nth-child(1){ background:linear-gradient(160deg,var(--green-400),var(--green-600)); }
.hiw-goals span:nth-child(2){ background:linear-gradient(160deg,var(--gold-400),var(--gold-500)); color:var(--ink); }
.hiw-goals span:nth-child(3){ background:linear-gradient(160deg,var(--blue-500),var(--blue-600)); }

/* mini savings chart for step 4 */
.hiw-chart{ display:grid; grid-template-columns:repeat(10,1fr); gap:4px; width:100%; max-width:280px; }
.hiw-chart i{ aspect-ratio:1/1; border-radius:4px; background:rgba(255,255,255,.55); box-shadow:inset 0 0 0 1px rgba(0,0,0,.06); }
.hiw-chart i.on{ background:var(--brand-grad); }
.hiw-chart i.last{ background:repeating-linear-gradient(45deg,var(--gold-300),var(--gold-300) 4px,#fff 4px,#fff 8px); }

/* keepsake card visual for step 3 */
.hiw-cardvis{
  width:100%; max-width:300px; aspect-ratio:1.585/1; border-radius:18px; color:#fff; position:relative;
  background:linear-gradient(135deg,var(--ink),#2a2f3d); box-shadow:var(--shadow-lg); padding:20px; overflow:hidden;
}
.hiw-cardvis::after{ content:""; position:absolute; inset:0; background:radial-gradient(160px 120px at 110% -10%, rgba(255,95,162,.5), transparent 60%), radial-gradient(160px 120px at -10% 120%, rgba(22,193,114,.45), transparent 60%); }
.hiw-cardvis .cv-logo{ font-family:var(--font-graffiti,var(--font-display)); font-weight:800; font-size:20px; position:relative; z-index:1; }
.hiw-cardvis .cv-chip{ width:42px; height:32px; border-radius:7px; background:linear-gradient(135deg,var(--gold-300),var(--gold-500)); margin:14px 0; position:relative; z-index:1; }
.hiw-cardvis .cv-nfc{ position:absolute; top:18px; right:18px; font-size:20px; z-index:1; }
.hiw-cardvis .cv-name{ position:absolute; bottom:18px; left:20px; font-family:var(--font-display); font-weight:800; letter-spacing:.08em; font-size:14px; z-index:1; }

.hiw-finish{
  text-align:center; color:#fff; border-radius:var(--radius-xl); padding:6px; margin-top:10px;
  background:var(--brand-grad); box-shadow:var(--shadow-lg);
}
.hiw-finish .inner{ background:var(--ink-3); border-radius:30px; padding:clamp(36px,5vw,64px); }
.hiw-finish h2{ color:#fff; font-size:clamp(28px,4.4vw,48px); margin-bottom:14px; }
.hiw-finish p{ color:rgba(255,255,255,.82); max-width:620px; margin:0 auto 26px; }
.hiw-finish .support-actions{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }

/* ---- v2 responsive ---- */
@media (max-width:980px){
  .members-band .inner{ grid-template-columns:1fr; gap:30px; }
  .appshow-grid{ grid-template-columns:1fr; gap:40px; }
  .hiw-step, .hiw-step:nth-child(even){ grid-template-columns:1fr; direction:ltr; gap:26px; }
  .hiw-step:nth-child(even) .hiw-visual{ order:-1; }
}
@media (max-width:620px){
  .app-pillars{ grid-template-columns:1fr; }
  .nav-login::before{ content:none; }
  .store-badge .sb-soon{ margin-left:auto; }
}
@media (max-width:980px){
  .nav-menu .nav-cta .nav-login{ width:100%; }
}

/* =======================================================================
   KB v3 additions — shop filters, numbered steps, partners, follow-us
   Content visible by default; only .reveal pre-hides (and only with JS).
   ======================================================================= */

/* ---- Shop filter chips ---- */
.shop-filters{ display:flex; flex-direction:column; gap:14px; margin:8px 0 38px; }
.filter-row{ display:flex; flex-wrap:wrap; align-items:center; gap:10px; }
.filter-label{ font-family:var(--font-display); font-weight:800; font-size:12.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--mist); min-width:78px; }
.chip{
  font-family:var(--font-display); font-weight:800; font-size:14px; padding:9px 18px;
  border-radius:var(--radius-pill); background:#fff; color:var(--ink); border:2px solid var(--cloud);
  transition:transform .15s, border-color .15s, color .15s, background .15s, box-shadow .15s;
}
.chip:hover{ border-color:var(--green-400); color:var(--green-600); transform:translateY(-1px); }
.chip.active{ background:var(--green-500); color:#fff; border-color:var(--green-500); box-shadow:var(--shadow-green); }
.product.hide{ display:none; }
.product .padd{ margin-top:auto; }
.btn-cart{ margin-top:14px; width:100%; }
.shop-empty{ text-align:center; color:var(--slate); font-weight:700; padding:48px 0; display:none; }
.shop-empty.show{ display:block; }
.shop-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:24px; }
@media (max-width:980px){ .shop-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .shop-grid{ grid-template-columns:1fr; } }

/* ---- Numbered steps row (light sections) ---- */
.numsteps{ display:grid; grid-template-columns:repeat(4,1fr); gap:22px; counter-reset:ns; }
.numstep{
  position:relative; background:#fff; border:1px solid var(--cloud); border-radius:var(--radius-lg);
  padding:30px 24px 26px; box-shadow:var(--shadow-sm); transition:transform .2s, box-shadow .2s;
}
.numstep:hover{ transform:translateY(-6px); box-shadow:var(--shadow-md); }
.numstep .nsnum{
  counter-increment:ns; width:54px; height:54px; border-radius:16px; display:grid; place-items:center;
  font-family:var(--font-display); font-weight:800; font-size:24px; color:#fff; margin-bottom:16px;
}
.numstep .nsnum::before{ content:counter(ns); }
.numsteps .numstep:nth-child(1) .nsnum{ background:linear-gradient(160deg,var(--green-400),var(--green-600)); }
.numsteps .numstep:nth-child(2) .nsnum{ background:linear-gradient(160deg,var(--gold-400),var(--gold-500)); color:var(--ink); }
.numsteps .numstep:nth-child(3) .nsnum{ background:linear-gradient(160deg,var(--pink-500),var(--pink-600)); }
.numsteps .numstep:nth-child(4) .nsnum{ background:linear-gradient(160deg,var(--blue-500),var(--blue-600)); }
.numstep h3{ font-size:19px; margin-bottom:8px; }
.numstep p{ color:var(--slate); font-size:15px; }
@media (max-width:980px){ .numsteps{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .numsteps{ grid-template-columns:1fr; } }

/* ---- Big social grid (follow-us page) ---- */
.social-xl{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; max-width:820px; margin:0 auto; }
.social-xl .social-btn{ flex-direction:column; padding:34px 24px; font-size:20px; gap:16px; justify-content:center; }
.social-xl .social-btn .si{ width:64px; height:64px; border-radius:20px; font-size:30px; }
.social-xl .social-btn small{ display:block; font-size:14px; font-weight:700; color:var(--slate); }
@media (max-width:620px){ .social-xl{ grid-template-columns:1fr; } }

/* ---- Partner highlight cards ---- */
.partner-band{ scroll-margin-top:100px; }
.feature-list li{ display:flex; gap:14px; align-items:flex-start; margin-bottom:18px; }
.feature-list .fi{ width:46px; height:46px; border-radius:14px; display:grid; place-items:center; font-size:22px; flex-shrink:0; }
.feature-list b{ font-family:var(--font-display); display:block; font-size:17px; }
.feature-list span{ color:var(--slate); font-size:15px; }
.band.dark .feature-list b{ color:#fff; }
.band.dark .feature-list span{ color:rgba(255,255,255,.74); }

/* =======================================================================
   KB v4 additions — event cards (real images) + shop sidebar layout
   Content visible by default; only .reveal pre-hides (and only with JS).
   ======================================================================= */

/* ---- Event cards with real imagery ---- */
.events-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:26px; }
.ev-card{
  display:flex; flex-direction:column; background:#fff; overflow:hidden;
  border:1px solid var(--cloud); border-radius:var(--radius-lg); box-shadow:var(--shadow-sm);
  transition:transform .22s, box-shadow .22s;
}
.ev-card:hover{ transform:translateY(-7px); box-shadow:var(--shadow-md); }
.ev-thumb{ position:relative; aspect-ratio:16/11; overflow:hidden; background:var(--cloud); }
.ev-thumb img{ width:100%; height:100%; object-fit:cover; transition:transform .45s cubic-bezier(.2,.7,.2,1); }
.ev-card:hover .ev-thumb img{ transform:scale(1.06); }
.ev-thumb .tag{ position:absolute; top:14px; left:14px; z-index:1; box-shadow:var(--shadow-sm); }
.ev-body{ display:flex; flex-direction:column; gap:8px; padding:24px 24px 26px; flex:1; }
.ev-body h3{ font-size:20px; line-height:1.18; }
.ev-body p{ color:var(--slate); font-size:15px; flex:1; }
.ev-body .btn{ margin-top:16px; align-self:flex-start; }
@media (max-width:980px){ .events-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:620px){ .events-grid{ grid-template-columns:1fr; } .ev-body .btn{ align-self:stretch; } }

/* ---- Shop: sidebar + product grid layout ---- */
.shop-layout{ display:grid; grid-template-columns:264px 1fr; gap:36px; align-items:start; }
.shop-sidebar{ position:sticky; top:calc(var(--nav-h) + 18px); }
.shop-panel{
  background:#fff; border:1px solid var(--cloud); border-radius:var(--radius-lg);
  padding:8px 24px; box-shadow:var(--shadow-sm); margin:0;
}
.shop-panel .panel-head{
  display:flex; align-items:center; gap:9px; padding:18px 0 4px;
  font-family:var(--font-display); font-weight:800; font-size:18px; color:var(--ink);
}
.shop-panel .filter-group{ padding:18px 0; border-top:1px solid var(--cloud); }
.shop-panel .filter-row{ flex-direction:column; align-items:stretch; gap:12px; margin:0; }
.shop-panel .filter-label{
  min-width:0; margin:0; color:var(--ink); font-size:13px; letter-spacing:.08em;
}
.shop-panel .filter-chips{ display:flex; flex-wrap:wrap; gap:9px; }
.shop-panel .chip{ font-size:13.5px; padding:8px 15px; }

.shop-main .shop-grid{ grid-template-columns:repeat(3,1fr); }
@media (max-width:1200px){ .shop-main .shop-grid{ grid-template-columns:repeat(2,1fr); } }

/* Mobile: sidebar stacks on top, no horizontal overflow */
.shop-filter-toggle{ display:none; }
@media (max-width:860px){
  .shop-layout{ grid-template-columns:1fr; gap:22px; }
  .shop-sidebar{ position:static; }
  .shop-panel{ padding:6px 20px; }
  .shop-panel .filter-row{ flex-direction:row; flex-wrap:wrap; align-items:center; }
  .shop-panel .filter-label{ width:100%; }
  .shop-main .shop-grid{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:560px){
  .shop-main .shop-grid{ grid-template-columns:1fr; }
}

/* === Financial Literacy flip cards — real card artwork (image flip) === */
.flip-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; max-width:780px; margin:0 auto; }
@media(max-width:680px){ .flip-grid{ grid-template-columns:repeat(2,1fr); gap:12px; } }
.flip{ aspect-ratio:574 / 838; min-height:0; perspective:1200px; background:none; border:0; padding:0; cursor:pointer; }
.flip .flip-inner{ position:relative; width:100%; height:100%; transform-style:preserve-3d; transition:transform .6s cubic-bezier(.2,.8,.2,1); will-change:transform; }
.flip.flipped .flip-inner{ transform:rotateY(180deg); }
/* faces are <img> — fill the card, keep the artwork crisp, no padding/bg/emoji styling */
.flip .flip-face{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  padding:0; background:none; border:0; border-radius:14px;
  box-shadow:0 12px 30px rgba(20,22,31,.14);
  -webkit-backface-visibility:hidden; backface-visibility:hidden;
}
.flip .flip-back{ transform:rotateY(180deg); }
.flip:hover .flip-inner{ transform:translateY(-4px); }
.flip.flipped:hover .flip-inner{ transform:rotateY(180deg) translateY(-4px); }