/* ============================================================
   STRIDE: More Than a Wallet
   Brand: Rose Red #F43858 / Navy #25165E (from Spak brand guide)
   Display: "Baloo 2" (rounded, confident, kid-friendly, parent-credible)
   Body: "Inter"
   Signature: ascending step-path motif (a "stride" = a purposeful step forward)
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Baloo+2:wght@600;700;800&family=Inter:wght@400;500;600;700&display=swap');

:root{
  --red: #F43858;
  --red-deep: #D91F3D;
  --navy: #25165E;
  --navy-deep: #180D42;
  --navy-soft: #4A3690;
  --gold: #FFB020;
  --gold-deep: #E89400;
  --paper: #FBF8FF;
  --paper-dim: #F1ECFB;
  --text: #1A1330;
  --text-soft: #5E5578;
  --line: rgba(37,22,94,0.12);
  --line-on-dark: rgba(255,255,255,0.16);
  --white: #FFFFFF;

  --display: 'Baloo 2', sans-serif;
  --body: 'Inter', sans-serif;

  --container: 1180px;
}

*{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin:0;
  font-family: var(--body);
  background: var(--paper);
  color: var(--text);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img{ max-width:100%; display:block; }
a{ color: inherit; text-decoration:none; }
h1,h2,h3,h4{
  font-family: var(--display);
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.1;
  margin: 0;
  color: var(--navy);
}
p{ margin: 0 0 1em; }
ul{ margin:0; padding:0; list-style:none; }

.wrap{ max-width: var(--container); margin: 0 auto; padding: 0 32px; }

.eyebrow{
  font-family: var(--display);
  font-size: 14px;
  font-weight: 700;
  color: var(--red);
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
}
.eyebrow img{ height: 18px; width:auto; }
.eyebrow.on-dark{ color: var(--gold); }

:focus-visible{ outline: 3px solid var(--red); outline-offset: 3px; }

/* ---------------- Header ---------------- */
header.site{
  position: sticky; top:0; z-index: 100;
  background: rgba(251,248,255,0.92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.nav{ max-width: var(--container); margin: 0 auto; padding: 14px 32px; display:flex; align-items:center; justify-content: space-between; }
.brand{ display:flex; align-items:center; gap:10px; }
.brand img{ height: 34px; width:auto; }
.brand .word{ font-family: var(--display); font-weight:800; font-size:24px; color: var(--navy); }
.nav-links{ display:flex; gap: 19px; align-items:center; }
.nav-links a{ font-family: var(--display); font-weight: 600; font-size: 14.5px; color: var(--navy); position: relative; padding: 4px 0; white-space: nowrap; }
.nav-links a::after{ content:''; position:absolute; left:0; right:0; bottom:-2px; height:3px; border-radius:3px; background: var(--red); transform: scaleX(0); transform-origin: left; transition: transform .2s ease; }
.nav-links a:hover::after, .nav-links a.active::after{ transform: scaleX(1); }
.nav-links a.active{ color: var(--red); }
.nav-cta{ font-family: var(--display); font-weight: 700; font-size: 14.5px; background: var(--red); color: var(--white) !important; padding: 11px 20px; border-radius: 999px; white-space: nowrap; }
.nav-cta:hover{ background: var(--red-deep); }
.nav-cta::after{ display:none; }
.nav-login{ font-family: var(--display); font-weight: 700; font-size: 14.5px; color: var(--navy) !important; padding: 9px 16px; border-radius: 999px; border: 1.5px solid var(--line); white-space: nowrap; }
.nav-login:hover{ border-color: var(--navy); }
.nav-login::after{ display:none; }
.nav-toggle{ display:none; }

/* Dropdown (desktop: hover/focus; mobile: flattened, see below) */
.has-dropdown{ position:relative; display:flex; align-items:center; gap:3px; }
.has-dropdown > a::after{ display:none; }
.has-dropdown .caret{ font-size:10px; margin-left:1px; color: var(--text-soft); transition: transform .18s ease; }
.has-dropdown:hover .caret, .has-dropdown:focus-within .caret{ transform: rotate(180deg); }
.dropdown-menu{
  position:absolute; top: calc(100% + 14px); left: 50%; transform: translateX(-50%) translateY(6px);
  background: var(--white); border-radius: 16px; box-shadow: 0 20px 40px rgba(37,22,94,0.18);
  padding: 10px; min-width: 210px; display:grid; gap:2px;
  opacity:0; pointer-events:none; transition: opacity .16s ease, transform .16s ease; z-index: 50;
}
.has-dropdown:hover .dropdown-menu, .has-dropdown:focus-within .dropdown-menu{ opacity:1; pointer-events:auto; transform: translateX(-50%) translateY(0); }
.dropdown-menu a{ padding: 10px 12px !important; border-radius:10px; width:100%; }
.dropdown-menu a:hover{ background: var(--paper-dim); }
.dropdown-menu a::after{ display:none; }

@media (max-width: 1180px){
  .nav-links{ position: fixed; top: 64px; left:0; right:0; max-height: calc(100vh - 64px); overflow-y:auto; background: var(--paper); flex-direction: column; align-items: flex-start; gap: 0; padding: 8px 32px 20px; border-bottom: 1px solid var(--line); transform: translateY(-8px); opacity: 0; pointer-events: none; transition: all .2s ease; }
  .nav-links.open{ transform: translateY(0); opacity:1; pointer-events:auto; }
  .nav-links a{ padding: 12px 0; width:100%; border-bottom: 1px solid var(--line); }
  .nav-links a.active::after, .nav-links a::after{ display:none; }
  .nav-cta, .nav-login{ margin-top:10px; display:inline-block; width: auto; }
  .nav-toggle{ display:flex; flex-direction: column; gap: 5px; background:none; border:none; cursor:pointer; padding: 8px; }
  .nav-toggle span{ width: 22px; height: 3px; border-radius:2px; background: var(--navy); }

  .has-dropdown{ flex-direction:column; align-items:flex-start; width:100%; }
  .has-dropdown > a{ border-bottom:none; }
  .dropdown-menu{ position:static; transform:none; opacity:1; pointer-events:auto; box-shadow:none; background:none; padding: 0 0 6px 14px; min-width:0; }
  .dropdown-menu a{ border-bottom:none !important; padding: 9px 0 !important; color: var(--text-soft) !important; }
}

/* ---------------- Step-path signature motif ---------------- */
.step-path{ position:absolute; pointer-events:none; }
.step-line{ fill:none; stroke: var(--gold); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 1 14; }
.step-dot{ fill: var(--red); }
.step-dot.hollow{ fill: var(--paper); stroke: var(--gold); stroke-width: 3; }

/* ---------------- Hero ---------------- */
.hero{ position: relative; overflow: hidden; background: var(--navy); color: var(--white); padding: 64px 0 0; }
.hero-grid{ display:grid; grid-template-columns: 1.05fr 0.95fr; align-items:center; gap: 48px; }
.hero-copy{ position:relative; z-index:2; padding: 48px 0 70px; }
.hero h1{ color: var(--white); font-size: clamp(38px, 4.6vw, 62px); }
.hero h1 .accent{ color: var(--gold); }
.hero .tagline{ font-family: var(--display); font-weight:700; font-size: 18px; color: var(--red); margin: 18px 0 0; }
.hero .lede{ font-size: 17.5px; color: rgba(255,255,255,0.72); max-width: 500px; margin: 14px 0 32px; }
.hero-ctas{ display:flex; gap: 14px; flex-wrap: wrap; }
.hero-visual{ position:relative; z-index:2; display:flex; justify-content:center; align-items:center; padding: 20px 0; }
@media (max-width: 900px){
  .hero-grid{ grid-template-columns: 1fr; }
  .hero-visual{ order:-1; padding-top: 40px; }
  .hero-copy{ padding: 32px 0 48px; }
}

.btn{ font-family: var(--display); font-weight: 700; font-size: 15px; padding: 15px 28px; border-radius: 999px; display:inline-flex; align-items:center; gap: 8px; border: 2px solid transparent; transition: all .18s ease; }
.btn-red{ background: var(--red); color: var(--white); }
.btn-red:hover{ background: var(--red-deep); transform: translateY(-1px); }
.btn-gold{ background: var(--gold); color: var(--navy-deep); }
.btn-gold:hover{ background: var(--gold-deep); }
.btn-outline{ border-color: rgba(255,255,255,0.4); color: var(--white); }
.btn-outline:hover{ border-color: var(--white); background: rgba(255,255,255,0.08); }
.btn-outline.dark{ border-color: rgba(37,22,94,0.3); color: var(--navy); }
.btn-outline.dark:hover{ border-color: var(--navy); background: rgba(37,22,94,0.06); }

/* Journey strip (genuine sequence: Learn > Earn > Save > Spend > Grow) */
.journey-strip{ background: var(--white); border-bottom: 1px solid var(--line); padding: 30px 0; }
.journey-row{ display:flex; align-items:center; justify-content:center; gap: 6px; flex-wrap:wrap; }
.journey-step{ display:flex; align-items:center; gap:6px; }
.journey-step .label{ font-family: var(--display); font-weight:700; font-size: 17px; color: var(--navy); }
.journey-arrow{ color: var(--red); font-size: 18px; margin: 0 8px; }
@media (max-width: 700px){ .journey-row{ gap: 10px; } .journey-arrow{ margin:0 2px; } }

/* ---------------- Sections ---------------- */
section{ padding: 92px 0; }
.section-head{ max-width: 640px; margin-bottom: 52px; }
.section-head.center{ margin-left:auto; margin-right:auto; text-align:center; }
.section-head h2{ font-size: clamp(30px, 3.8vw, 44px); }
.section-head p{ font-size: 17px; color: var(--text-soft); margin-top: 14px; }

.bg-navy{ background: var(--navy); color: rgba(255,255,255,0.85); }
.bg-navy h2, .bg-navy h3, .bg-navy h4{ color: var(--white); }
.bg-navy .section-head p{ color: rgba(255,255,255,0.65); }
.bg-dim{ background: var(--paper-dim); }

/* Pillar cards (4: the brochure's four connected pillars) */
.pillar-grid{ display:grid; grid-template-columns: repeat(4,1fr); gap: 22px; }
.pillar-card{ background: var(--white); border: 1px solid var(--line); border-radius: 20px; padding: 30px 26px; }
.pillar-card .icon-chip{ width:48px; height:48px; border-radius:14px; display:flex; align-items:center; justify-content:center; font-size:22px; margin-bottom:18px; }
.pillar-card h3{ font-size: 21px; margin-bottom:10px; }
.pillar-card .tags{ font-size:13px; color: var(--red); font-weight:600; margin-bottom:12px; }
.pillar-card p{ font-size:14.5px; color:var(--text-soft); margin:0; }
@media (max-width: 980px){ .pillar-grid{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px){ .pillar-grid{ grid-template-columns: 1fr; } }

/* Mission/vision */
.mv-grid{ display:grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.mv-card{ background: var(--navy-deep); border: 1px solid var(--line-on-dark); border-radius: 20px; padding: 38px 34px; }
.mv-card p{ font-size: 17.5px; color: var(--white); font-weight:500; margin:0; line-height:1.55; }
@media (max-width: 760px){ .mv-grid{ grid-template-columns: 1fr; } }

/* Values grid (6) */
.value-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap: 24px; }
.value-card{ border-top: 4px solid var(--gold); padding-top: 18px; border-radius: 4px; }
.value-card h3{ font-size: 19px; margin-bottom: 8px; }
.value-card p{ font-size: 14.5px; color: var(--text-soft); margin:0; }
@media (max-width: 900px){ .value-grid{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px){ .value-grid{ grid-template-columns: 1fr; } }

/* Feature detail blocks (pillar deep-dive on Features page) */
.feature-detail{ display:grid; grid-template-columns: 300px 1fr; gap: 48px; padding: 60px 0; border-bottom: 1px solid var(--line); align-items:start; }
.feature-detail:last-child{ border-bottom:none; }
.feature-detail .fd-icon{ width:64px; height:64px; border-radius:18px; display:flex; align-items:center; justify-content:center; font-size:28px; margin-bottom:16px; }
.feature-detail h3{ font-size: 30px; }
.feature-detail .fd-tags{ font-family: var(--display); font-weight:700; font-size:14px; color:var(--red); margin: 10px 0 18px; }
.feature-detail .fd-body p{ color: var(--text-soft); font-size: 16px; max-width: 620px; }
.feature-list{ display:grid; gap: 10px; margin-top: 18px; }
.feature-list li{ font-size:15px; color: var(--navy); padding-left: 24px; position:relative; }
.feature-list li::before{ content:''; position:absolute; left:2px; top:8px; width:8px; height:8px; background: var(--red); border-radius:50%; }
@media (max-width: 780px){ .feature-detail{ grid-template-columns: 1fr; } }

/* Subject / game chip grids */
.chip-grid{ display:flex; flex-wrap:wrap; gap: 10px; margin-top: 18px; }
.chip{ font-family: var(--display); font-weight:600; font-size: 14px; background: var(--paper-dim); color: var(--navy); padding: 9px 18px; border-radius: 999px; border: 1px solid var(--line); }
.chip.gold{ background: rgba(255,176,32,0.14); border-color: rgba(255,176,32,0.4); color: var(--gold-deep); }

/* Trust / parent page grid */
.trust-grid{ display:grid; grid-template-columns: repeat(2,1fr); gap: 22px; }
.trust-card{ background: var(--white); border: 1px solid var(--line); border-radius: 18px; padding: 28px; display:flex; gap:16px; align-items:flex-start; }
.trust-card .mark{ flex-shrink:0; width:38px; height:38px; border-radius:50%; background: var(--paper-dim); display:flex; align-items:center; justify-content:center; color:var(--red); font-weight:800; font-family:var(--display); }
.trust-card p{ font-size: 14.5px; color: var(--text-soft); margin:0; }
.trust-card h3{ font-size:17px; margin-bottom:6px; }
@media (max-width: 760px){ .trust-grid{ grid-template-columns: 1fr; } }

/* Ecosystem loop */
.loop-grid{ display:grid; grid-template-columns: repeat(4,1fr); gap: 20px; }
.loop-card{ text-align:center; padding: 24px 18px; }
.loop-card .num{ width:40px; height:40px; border-radius:50%; background:var(--red); color:var(--white); font-family:var(--display); font-weight:800; display:flex; align-items:center; justify-content:center; margin: 0 auto 14px; }
.loop-card h4{ font-size:16px; margin-bottom:8px; }
.loop-card p{ font-size:13.5px; color:var(--text-soft); margin:0; }
@media (max-width: 900px){ .loop-grid{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px){ .loop-grid{ grid-template-columns: 1fr; } }

/* Contact */
.contact-grid{ display:grid; grid-template-columns: 1fr 1fr; gap: 56px; }
.contact-info h3{ font-size: 22px; margin-bottom: 18px; }
.contact-row{ padding: 18px 0; border-bottom: 1px solid var(--line); }
.contact-row .label{ font-family: var(--display); font-weight:700; font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--red); display:block; margin-bottom: 6px; }
.contact-row .value{ font-size: 16.5px; color: var(--navy); font-weight: 500; }
form.contact-form{ display:grid; gap: 18px; }
.field label{ font-family: var(--display); font-weight:700; font-size: 13px; color: var(--text-soft); display:block; margin-bottom: 8px; }
.field input, .field textarea, .field select{ width:100%; font-family: var(--body); font-size: 15px; padding: 13px 14px; border: 1.5px solid var(--line); background: var(--white); border-radius: 12px; color: var(--text); }
.field input:focus, .field textarea:focus, .field select:focus{ border-color: var(--red); outline:none; }
.field textarea{ resize: vertical; min-height: 110px; }
.form-note{ font-size: 13px; color: var(--text-soft); margin-top:4px; }

/* CTA band */
.cta-band{ position:relative; overflow:hidden; background: linear-gradient(120deg, var(--navy-deep), var(--navy)); color: var(--white); padding: 68px 0; text-align:center; }
.cta-band h2{ color: var(--white); font-size: clamp(28px,3.8vw,42px); margin-bottom: 10px; }
.cta-band p{ color: rgba(255,255,255,0.75); margin-bottom: 28px; }
.cta-band .btn-outline{ border-color: rgba(255,255,255,0.5); color: var(--white); }
.cta-band .btn-outline:hover{ background: rgba(255,255,255,0.14); }

/* Footer */
footer.site{ background: var(--navy-deep); color: rgba(255,255,255,0.55); padding: 56px 0 28px; }
.footer-grid{ display:grid; grid-template-columns: 1.4fr 1fr 1fr 1.1fr; gap: 40px; padding-bottom: 40px; border-bottom: 1px solid rgba(255,255,255,0.1); }
.footer-brand{ display:flex; align-items:center; gap:10px; margin-bottom: 16px; }
.footer-brand img{ height: 30px; }
.footer-brand span{ font-family:var(--display); font-weight:800; color:var(--white); font-size:20px; }
.footer-desc{ font-size: 14px; max-width: 300px; }
.footer-col h4{ font-family: var(--display); font-weight:700; font-size: 13px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--gold); margin-bottom: 16px; }
.footer-col a, .footer-col li{ display:block; font-size: 14px; padding: 6px 0; color: rgba(255,255,255,0.6); }
.footer-col a:hover{ color: var(--gold); }
.footer-bottom{ padding-top: 24px; display:flex; justify-content: space-between; flex-wrap:wrap; gap: 10px; font-size: 13px; }
@media (max-width: 900px){ .footer-grid{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px){ .footer-grid{ grid-template-columns: 1fr; } }

/* Reveal-on-scroll (single orchestrated entrance, not scattered) */
.reveal{ opacity:0; transform: translateY(16px); transition: opacity .5s ease, transform .5s ease; }
.reveal.in{ opacity:1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } .reveal{ opacity:1; transform:none; transition:none; } }

/* Inner page hero */
.page-hero{ position: relative; overflow:hidden; background: var(--navy); color: var(--white); padding: 76px 0 60px; }
.page-hero h1{ color:var(--white); font-size: clamp(32px,4vw,48px); }
.page-hero p{ color: rgba(255,255,255,0.68); font-size: 16.5px; max-width:600px; margin-top: 14px; }

.page-hero-grid{ display:grid; grid-template-columns: 1.1fr 0.9fr; align-items:center; gap: 44px; }
.page-hero-copy{ padding: 76px 0 60px; }
.page-hero-photo{ align-self:stretch; border-radius: 20px; overflow:hidden; min-height: 320px; box-shadow: 0 20px 44px rgba(0,0,0,0.3); }
.page-hero-photo img{ width:100%; height:100%; object-fit:cover; display:block; min-height:320px; }
@media (max-width: 900px){
  .page-hero-grid{ grid-template-columns: 1fr; }
  .page-hero-copy{ padding: 40px 0 8px; }
  .page-hero-photo{ min-height:220px; order:-1; margin-top:32px; }
  .page-hero-photo img{ min-height:220px; }
}

/* ---------------- Phone UI mockup ---------------- */
.phone-mock{
  width: 220px;
  background: var(--navy-deep);
  border-radius: 28px;
  padding: 8px;
  box-shadow: 0 24px 50px rgba(0,0,0,0.35);
}
.phone-mock .screen{
  background: var(--navy);
  border-radius: 20px;
  padding: 20px 18px;
  color: var(--white);
}
.phone-mock .greet{ font-size: 12px; color: rgba(255,255,255,0.6); margin-bottom:2px; }
.phone-mock .balance-label{ font-size: 11px; color: rgba(255,255,255,0.5); margin-bottom:4px; }
.phone-mock .balance{ font-family: var(--display); font-weight:800; font-size: 26px; color: var(--white); margin-bottom:16px; }
.phone-mock .quick-row{ display:flex; justify-content:space-between; margin-bottom:18px; }
.phone-mock .quick-item{ display:flex; flex-direction:column; align-items:center; gap:6px; }
.phone-mock .quick-item .dot{ width:34px; height:34px; border-radius:50%; background:rgba(255,255,255,0.1); display:flex; align-items:center; justify-content:center; font-size:14px; }
.phone-mock .quick-item span{ font-size:9.5px; color: rgba(255,255,255,0.7); }
.phone-mock .goal-card{ background: rgba(255,255,255,0.08); border-radius:14px; padding:12px 14px; }
.phone-mock .goal-card .label{ font-size:10px; color: rgba(255,255,255,0.6); margin-bottom:2px; }
.phone-mock .goal-card .name{ font-family: var(--display); font-weight:700; font-size:13px; color: var(--white); margin-bottom:8px; }
.phone-mock .goal-card .bar{ height:6px; border-radius:3px; background:rgba(255,255,255,0.18); overflow:hidden; margin-bottom:6px; }
.phone-mock .goal-card .bar span{ display:block; height:100%; background: var(--gold); border-radius:3px; }
.phone-mock .goal-card .pct{ font-size:10px; color: var(--gold); font-weight:600; }

/* ---------------- Icon strips ---------------- */
.icon-strip{ display:flex; justify-content:center; flex-wrap:wrap; gap: 28px; }
.icon-strip.left{ justify-content:flex-start; }
.icon-strip-item{ display:flex; flex-direction:column; align-items:center; gap:8px; width:82px; text-align:center; }
.icon-strip-item .dot{ width:52px; height:52px; border-radius:16px; background:var(--paper-dim); display:flex; align-items:center; justify-content:center; font-size:22px; }
.icon-strip-item span{ font-family: var(--display); font-weight:600; font-size:12px; color: var(--navy); line-height:1.2; }
.benefit-strip{ display:flex; justify-content:center; flex-wrap:wrap; gap: 36px; padding-top: 32px; margin-top: 32px; border-top: 1px solid var(--line); }
.benefit-strip-item{ display:flex; align-items:center; gap:10px; }
.benefit-strip-item .dot{ width:36px; height:36px; border-radius:50%; background: rgba(244,56,88,0.1); color:var(--red); display:flex; align-items:center; justify-content:center; font-size:16px; flex-shrink:0; }
.benefit-strip-item span{ font-family: var(--display); font-weight:600; font-size:13.5px; color: var(--navy); }

/* ---------------- Step flow with photo ---------------- */
.step-flow-photo{ display:grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items:center; }
.step-flow-photo .steps{ display:grid; gap: 22px; }
.step-flow-photo .step-row{ display:flex; gap:16px; align-items:flex-start; }
.step-flow-photo .step-num{ width:34px; height:34px; border-radius:50%; background: var(--red); color: var(--white); font-family: var(--display); font-weight:700; font-size:14px; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.step-flow-photo h4{ font-size:16.5px; margin-bottom:4px; }
.step-flow-photo p{ font-size:14px; color:var(--text-soft); margin:0; }
.step-flow-photo .photo{ border-radius:20px; overflow:hidden; box-shadow: 0 20px 40px rgba(37,22,94,0.16); }
.step-flow-photo .photo img{ width:100%; display:block; }
@media (max-width: 860px){
  .step-flow-photo{ grid-template-columns: 1fr; }
  .step-flow-photo .photo{ order:-1; }
}

/* ---------------- Example chores grid ---------------- */
.chore-grid{ display:grid; grid-template-columns: repeat(4,1fr); gap:16px; }
.chore-card{ background: var(--white); border:1px solid var(--line); border-radius:14px; padding:18px; text-align:center; }
.chore-card .ico{ width:40px; height:40px; border-radius:12px; background: var(--paper-dim); display:flex; align-items:center; justify-content:center; font-size:18px; margin:0 auto 10px; }
.chore-card .name{ font-family:var(--display); font-weight:600; font-size:13.5px; color:var(--navy); margin-bottom:4px; }
.chore-card .amt{ font-family:var(--display); font-weight:700; font-size:13px; color:var(--red); }
@media (max-width: 700px){ .chore-grid{ grid-template-columns: 1fr 1fr; } }

/* ---------------- Pull quote ---------------- */
.pull-quote{ background: var(--paper-dim); border-left: 4px solid var(--red); border-radius: 4px; padding: 24px 28px; margin: 32px 0; }
.pull-quote p{ font-family: var(--display); font-weight:700; font-size: 19px; color: var(--navy); margin:0; line-height:1.4; }
.pull-quote.on-dark{ background: var(--navy-deep); border-left-color: var(--gold); }
.pull-quote.on-dark p{ color: var(--white); }

/* ---------------- FAQ accordion ---------------- */
.faq-list{ display:grid; gap: 12px; }
.faq-item{ background: var(--white); border:1px solid var(--line); border-radius:14px; overflow:hidden; }
.faq-item summary{ padding: 18px 22px; font-family:var(--display); font-weight:600; font-size:15.5px; color:var(--navy); cursor:pointer; list-style:none; display:flex; justify-content:space-between; align-items:center; gap:12px; }
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary::after{ content:'+'; font-size:20px; color:var(--red); flex-shrink:0; transition: transform .2s ease; }
.faq-item[open] summary::after{ transform: rotate(45deg); }
.faq-item .a{ padding: 0 22px 20px; font-size:14.5px; color: var(--text-soft); }
.pull-quote.center{ border-left:none; border-top: 4px solid var(--red); text-align:center; }

/* ---------------- Coming soon badge ---------------- */
.badge-soon{ display:inline-flex; align-items:center; gap:6px; font-family:var(--display); font-weight:700; font-size:11.5px; letter-spacing:0.04em; text-transform:uppercase; background: rgba(255,176,32,0.16); color: var(--gold-deep); padding: 5px 12px; border-radius: 999px; border:1px solid rgba(255,176,32,0.4); }
.badge-soon.on-dark{ background: rgba(255,176,32,0.18); color: var(--gold); border-color: rgba(255,176,32,0.3); }
.note-box{ background: var(--paper-dim); border: 1px dashed var(--line); border-radius: 16px; padding: 22px 24px; font-size: 14.5px; color: var(--text-soft); margin-top: 20px; }
.note-box strong{ color: var(--navy); }

/* ---------------- Pricing ---------------- */
.price-grid{ display:grid; grid-template-columns: 1fr 1fr; gap: 28px; align-items:stretch; }
.price-card{ background: var(--white); border: 1.5px solid var(--line); border-radius: 24px; padding: 36px 32px; display:flex; flex-direction:column; }
.price-card.pro{ background: var(--navy-deep); border-color: var(--navy-deep); color: var(--white); position:relative; overflow:hidden; }
.price-card .plan-name{ font-family: var(--display); font-weight:800; font-size: 24px; color: var(--navy); margin-bottom: 6px; }
.price-card.pro .plan-name{ color: var(--white); }
.price-card .plan-price{ font-family: var(--display); font-weight:700; font-size: 16px; color: var(--text-soft); margin-bottom: 22px; }
.price-card.pro .plan-price{ color: rgba(255,255,255,0.65); }
.price-card ul{ display:grid; gap: 13px; margin: 0 0 26px; flex-grow:1; }
.price-card li{ font-size: 14.5px; color: var(--text-soft); padding-left: 26px; position:relative; }
.price-card.pro li{ color: rgba(255,255,255,0.8); }
.price-card li::before{ content:'✓'; position:absolute; left:0; top:0; color: var(--red); font-weight:700; }
.price-card.pro li::before{ color: var(--gold); }
@media (max-width: 760px){ .price-grid{ grid-template-columns: 1fr; } }

/* ---------------- Real app screenshots ---------------- */
/* For raw flat screenshots: wrap in a phone-like frame */
.device-shot{ border-radius: 30px; overflow:hidden; border: 7px solid var(--navy-deep); box-shadow: 0 20px 44px rgba(37,22,94,0.22); background: var(--navy-deep); }
.device-shot img{ display:block; width:100%; }
/* For screenshots already rendered at an angle inside a phone graphic */
.device-cutout{ border-radius: 18px; overflow:hidden; box-shadow: 0 16px 36px rgba(37,22,94,0.2); }
.device-cutout img{ display:block; width:100%; }

.screens-row{ display:flex; gap: 28px; align-items:flex-start; justify-content:center; flex-wrap:wrap; }
.screens-row .device-shot, .screens-row .device-cutout{ max-width: 230px; flex-shrink:0; }
.screen-caption{ text-align:center; font-family:var(--display); font-weight:600; font-size:13.5px; color:var(--navy); margin-top:12px; }

.screens-with-copy{ display:grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items:center; }
.screens-with-copy .shots{ display:flex; gap:22px; justify-content:center; }
.screens-with-copy .shots .device-shot, .screens-with-copy .shots .device-cutout{ max-width:200px; }
@media (max-width: 860px){ .screens-with-copy{ grid-template-columns: 1fr; } .screens-with-copy .shots{ order:-1; } }

/* Nav buttons: ".nav-links a" was overriding their padding, which squeezed them */
.nav-links a.nav-cta{ padding: 11px 22px; flex-shrink: 0; }
.nav-links a.nav-login{ padding: 9px 18px; flex-shrink: 0; }
@media (max-width: 1180px){
  .nav-links a.nav-cta, .nav-links a.nav-login{ width: auto; border-bottom: 0; }
  .nav-links a.nav-login{ border: 1.5px solid var(--line); }
}

/* ============================================================
   2026-10-21 site refresh additions
   ============================================================ */

/* Top bar: 6 main links + More + Log In + CTA. Measured to fit with room to
   spare from 1181px up at the original sizes; slightly tighter gap only near
   the hamburger breakpoint. */
.brand{ flex-shrink: 0; }
@media (min-width: 1181px) and (max-width: 1260px){
  .nav-links{ gap: 16px; }
}
.has-dropdown > a.dropdown-toggle.active{ color: var(--red); }
.dropdown-menu a.active{ color: var(--red); background: var(--paper-dim); }
@media (max-width: 1180px){
  .dropdown-menu a.active{ color: var(--red) !important; background: none; }
}

/* Clickable pillar cards on the Home page */
a.pillar-link{ display:block; color: inherit; transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
a.pillar-link:hover{ transform: translateY(-3px); box-shadow: 0 16px 34px rgba(37,22,94,0.12); border-color: rgba(37,22,94,0.22); }

/* Three-up card grid */
.grid-3{ display:grid; grid-template-columns: repeat(3,1fr); gap: 22px; }
.grid-3 .pillar-card .chip-grid{ margin-top: 6px; gap: 8px; }
.grid-3 .pillar-card .chip{ font-size: 13px; padding: 7px 14px; }
@media (max-width: 980px){ .grid-3{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px){ .grid-3{ grid-template-columns: 1fr; } }

/* "Coming soon" chip row */
.soon-row{ display:flex; flex-wrap:wrap; justify-content:center; gap: 12px; }
.soon-row .chip{ display:inline-flex; align-items:center; gap:10px; background: var(--white); }

/* Money lessons by age */
.age-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap: 22px; }
.age-card{ background: var(--white); border: 1px solid var(--line); border-radius: 18px; padding: 24px 24px 20px; }
.age-card .age{ font-family: var(--display); font-weight: 800; font-size: 18px; color: var(--red); margin-bottom: 12px; }
.age-card ul{ display:grid; gap: 7px; }
.age-card li{ font-size: 14.5px; color: var(--navy); padding-left: 18px; position: relative; line-height: 1.4; }
.age-card li::before{ content:''; position:absolute; left:0; top:7px; width:7px; height:7px; border-radius:50%; background: var(--gold); }
@media (max-width: 900px){ .age-grid{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px){ .age-grid{ grid-template-columns: 1fr; } }

/* Small headings above chip groups */
.chip-head{ font-family: var(--display); font-weight: 700; font-size: 15px; color: var(--navy); margin: 26px 0 0; }
.chip-head + .chip-grid{ margin-top: 12px; }

/* Inline text links */
.inline-link{ color: var(--red); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.footer-bottom a{ color: inherit; }
.footer-bottom a:hover, .contact-row .value a:hover{ color: var(--gold); }

/* About page text + photo split (was an inline grid that never stacked) */
.about-split{ display:grid; grid-template-columns: 1fr 320px; gap: 48px; align-items:start; }
@media (max-width: 860px){ .about-split{ grid-template-columns: 1fr; } }

/* Help page contact block: stack on small screens (inline style kept for desktop) */
@media (max-width: 760px){ .contact-grid{ grid-template-columns: 1fr !important; gap: 36px; } }

/* Single trailing card that spans half the grid: full width on phones */
@media (max-width: 760px){ .trust-grid .trust-card[style*="grid-column"]{ max-width: none !important; } }

/* ============================================================
   v2 (2026-10-21): joyful family look
   Soft tints, colour blocks, stickers, arcades, journeys.
   ============================================================ */
:root{
  --mint:#E2F6EC; --mint-ink:#0E8A5F;
  --sky:#E5EFFF; --sky-ink:#2457D6;
  --sun:#FFF3D3; --sun-ink:#A86200;
  --rose:#FFE5EA; --rose-ink:#C8173A;
  --lilac:#EEE7FF; --lilac-ink:#5B3FC4;
}
html, body{ overflow-x: clip; }
section{ padding: 84px 0; }
@media (max-width: 700px){ section{ padding: 60px 0; } .section-head{ margin-bottom: 36px; } }
@media (max-width: 560px){ .wrap{ padding: 0 20px; } .nav{ padding: 12px 20px; } .nav-links{ padding: 8px 20px 20px; } }

.bg-sun{ background: var(--sun); }
.bg-mint{ background: var(--mint); }
.bg-sky{ background: var(--sky); }
.bg-rose{ background: var(--rose); }
.bg-lilac{ background: var(--lilac); }
.bg-white{ background: var(--white); }
.bg-navy p{ color: rgba(255,255,255,0.78); }

.eyebrow-pill{ display:inline-flex; align-items:center; gap:8px; font-family: var(--display); font-weight:700; font-size:13.5px; letter-spacing:.02em; padding: 6px 14px; border-radius:999px; background: var(--rose); color: var(--rose-ink); margin-bottom: 16px; }
.eyebrow-pill.gold{ background: var(--sun); color: var(--sun-ink); }
.eyebrow-pill.mint{ background: var(--mint); color: var(--mint-ink); }
.eyebrow-pill.sky{ background: var(--sky); color: var(--sky-ink); }
.eyebrow-pill.lilac{ background: var(--lilac); color: var(--lilac-ink); }
.eyebrow-pill.white{ background: var(--white); color: var(--navy); }
.eyebrow-pill.glass{ background: rgba(255,255,255,.14); color: var(--white); }
.hl{ color: var(--red); }
.hl-gold{ color: var(--gold); }
.section-head.center .lead{ margin-left:auto; margin-right:auto; }
.section-head .lead{ font-size: 17.5px; color: var(--text-soft); margin-top: 14px; }
.bg-navy .section-head .lead{ color: rgba(255,255,255,.75); }

.badge-now{ display:inline-flex; align-items:center; gap:6px; font-family:var(--display); font-weight:700; font-size:11.5px; letter-spacing:.04em; text-transform:uppercase; background: var(--mint); color: var(--mint-ink); padding: 5px 12px; border-radius:999px; border:1px solid rgba(14,138,95,0.25); white-space:nowrap; }
.badge-now::before{ content:'\2714'; font-size: 10px; }
.badge-soon{ white-space: nowrap; }
.badge-soon::before{ content:'\2728'; font-size: 11px; }

/* ---------- Hero v2 ---------- */
.hero2{ position:relative; overflow:hidden; padding: 72px 0 84px; }
.hero2-grid{ display:grid; grid-template-columns: 1.05fr .95fr; gap: 48px; align-items:center; position:relative; z-index:2; }
.hero2 h1{ font-size: clamp(38px, 5.2vw, 64px); line-height: 1.03; letter-spacing: -0.02em; }
.hero2 .lede{ font-size: 18px; max-width: 520px; margin: 18px 0 30px; }
.hero2.single .hero2-grid{ grid-template-columns: 1fr; text-align:center; }
.hero2.single .lede{ margin-left:auto; margin-right:auto; max-width: 640px; }
.hero2.single .hero-ctas{ justify-content:center; }
.hero2::before, .hero2::after{ content:''; position:absolute; border-radius:50%; z-index:1; pointer-events:none; }
.hero2::before{ width: 420px; height: 420px; right: -120px; top: -140px; opacity:.55; }
.hero2::after{ width: 280px; height: 280px; left: -100px; bottom: -120px; opacity:.55; }
.confetti{ position:absolute; inset:0; z-index:1; pointer-events:none; opacity:.5;
  background-image: radial-gradient(circle, var(--gold) 3px, transparent 4px), radial-gradient(circle, var(--red) 3px, transparent 4px), radial-gradient(circle, #5FD0A5 3px, transparent 4px);
  background-size: 180px 160px, 230px 210px, 270px 190px; background-position: 20px 30px, 90px 120px, 160px 60px; }
.h-navy{ background: var(--navy); color: var(--white); }
.h-navy h1{ color: var(--white); } .h-navy .lede{ color: rgba(255,255,255,0.8); }
.h-navy::before{ background: radial-gradient(circle, rgba(244,56,88,.6), transparent 65%); }
.h-navy::after{ background: radial-gradient(circle, rgba(255,176,32,.55), transparent 65%); }
.h-red{ background: linear-gradient(135deg, #F43858, #FF6F61); color: var(--white); }
.h-red h1{ color: var(--white); } .h-red .lede{ color: rgba(255,255,255,0.93); }
.h-red::before{ background: radial-gradient(circle, rgba(255,176,32,.7), transparent 65%); }
.h-red::after{ background: radial-gradient(circle, rgba(37,22,94,.35), transparent 65%); }
.h-sun{ background: linear-gradient(160deg, #FFF3D3, #FFE09A); }
.h-sun .lede{ color: #5E4A1E; }
.h-sun::before{ background: radial-gradient(circle, rgba(244,56,88,.28), transparent 65%); }
.h-sun::after{ background: radial-gradient(circle, rgba(255,255,255,.95), transparent 65%); }
.h-mint{ background: linear-gradient(160deg, #E2F6EC, #B9E8D2); }
.h-mint .lede{ color: #2D5546; }
.h-mint::before{ background: radial-gradient(circle, rgba(255,176,32,.4), transparent 65%); }
.h-mint::after{ background: radial-gradient(circle, rgba(255,255,255,.95), transparent 65%); }
.h-sky{ background: linear-gradient(160deg, #E5EFFF, #C3D8FF); }
.h-sky .lede{ color: #2E3C66; }
.h-sky::before{ background: radial-gradient(circle, rgba(244,56,88,.25), transparent 65%); }
.h-sky::after{ background: radial-gradient(circle, rgba(255,255,255,.95), transparent 65%); }
.h-lilac{ background: linear-gradient(150deg, #2E1C73, #5B3FC4); color: var(--white); }
.h-lilac h1{ color: var(--white); } .h-lilac .lede{ color: rgba(255,255,255,0.84); }
.h-lilac::before{ background: radial-gradient(circle, rgba(255,176,32,.55), transparent 65%); }
.h-lilac::after{ background: radial-gradient(circle, rgba(244,56,88,.55), transparent 65%); }
.btn-white{ background: var(--white); color: var(--navy); }
.btn-white:hover{ transform: translateY(-1px); box-shadow: 0 8px 20px rgba(0,0,0,.15); }
.btn-navy{ background: var(--navy); color: var(--white); }
.btn-navy:hover{ background: var(--navy-deep); transform: translateY(-1px); }

.hero2-art{ position:relative; max-width: 470px; width:100%; margin: 0 auto; }
.photo-frame{ border-radius: 32px; overflow:hidden; border: 8px solid var(--white); box-shadow: 0 26px 50px rgba(24,13,66,.28); transform: rotate(2deg); background: var(--white); }
.photo-frame img{ width:100%; display:block; aspect-ratio: 4 / 3.4; object-fit: cover; }
.photo-frame.tilt-left{ transform: rotate(-2deg); }
.sticker{ position:absolute; z-index:3; display:inline-flex; align-items:center; gap:8px; background: var(--white); color: var(--navy); font-family: var(--display); font-weight:700; font-size: 14px; padding: 9px 16px 9px 10px; border-radius: 999px; box-shadow: 0 12px 26px rgba(24,13,66,.22); white-space: nowrap; animation: floaty 6s ease-in-out infinite; }
.sticker .e{ width:30px; height:30px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; font-size: 16px; background: var(--sun); }
.sticker.s1{ top: -14px; left: -10px; }
.sticker.s2{ bottom: 24%; right: -16px; animation-delay: -2s; }
.sticker.s3{ bottom: -16px; left: 10%; animation-delay: -4s; }
.sticker .e.rose{ background: var(--rose); } .sticker .e.mint{ background: var(--mint); } .sticker .e.sky{ background: var(--sky); } .sticker .e.lilac{ background: var(--lilac); }
@keyframes floaty{ 0%,100%{ transform: translateY(0); } 50%{ transform: translateY(-8px); } }
@media (max-width: 900px){
  .hero2{ padding: 48px 0 64px; }
  .hero2-grid{ grid-template-columns: 1fr; gap: 44px; }
  .hero2-art{ max-width: 400px; }
}
@media (max-width: 560px){
  .sticker{ font-size: 12.5px; padding: 7px 12px 7px 8px; }
  .sticker .e{ width:24px; height:24px; font-size:13px; }
  .sticker.s1{ left: -4px; } .sticker.s2{ right: -4px; }
}

.emoji-stage{ position:relative; width:100%; max-width: 400px; aspect-ratio: 1 / 1; margin: 0 auto; border-radius: 50%; background: rgba(255,255,255,.6); display:grid; place-items:center; }
.h-navy .emoji-stage, .h-red .emoji-stage, .h-lilac .emoji-stage{ background: rgba(255,255,255,.12); }
.emoji-stage .big{ font-size: clamp(90px, 16vw, 150px); line-height:1; }
.emoji-stage .orbit{ position:absolute; width: 66px; height: 66px; border-radius: 20px; background: var(--white); box-shadow: 0 12px 24px rgba(24,13,66,.18); display:grid; place-items:center; font-size: 30px; animation: floaty 6s ease-in-out infinite; }
.emoji-stage .o1{ top: 6%; left: 6%; } .emoji-stage .o2{ top: 10%; right: 4%; animation-delay:-1.5s; }
.emoji-stage .o3{ bottom: 8%; left: 2%; animation-delay:-3s; } .emoji-stage .o4{ bottom: 4%; right: 10%; animation-delay:-4.5s; }
@media (max-width: 560px){ .emoji-stage{ max-width: 290px; } .emoji-stage .orbit{ width: 52px; height: 52px; font-size: 24px; border-radius: 16px; } }

/* ---------- Stats band ---------- */
.stats-band{ background: var(--navy); padding: 34px 0; }
.stats-row{ display:grid; grid-template-columns: repeat(4, 1fr); gap: 18px; text-align:center; }
.stat .num{ font-family: var(--display); font-weight: 800; font-size: clamp(34px, 4.4vw, 50px); line-height: 1; color: var(--gold); }
.stat .lbl{ font-family: var(--display); font-weight: 600; font-size: 15px; color: rgba(255,255,255,.85); margin-top: 6px; }
.stat:nth-child(2) .num{ color: #FF7A90; } .stat:nth-child(3) .num{ color: #7FD8B4; } .stat:nth-child(4) .num{ color: #9DBBFF; }
@media (max-width: 700px){ .stats-row{ grid-template-columns: 1fr 1fr; row-gap: 26px; } }

/* ---------- Sound familiar? (problem then Stride) ---------- */
.familiar{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.fam{ background: var(--white); border-radius: 26px; padding: 0; overflow:hidden; box-shadow: 0 10px 26px rgba(37,22,94,.08); display:flex; flex-direction:column; }
.fam .q{ background: var(--rose); padding: 22px 22px 26px; position: relative; }
.fam .q .e{ font-size: 30px; line-height: 1; }
.fam .q p{ font-family: var(--display); font-weight: 700; font-size: 18.5px; line-height: 1.3; color: var(--navy); margin: 10px 0 0; }
.fam .q::after{ content:''; position:absolute; left: 34px; bottom: -12px; width: 24px; height: 24px; background: var(--rose); transform: rotate(45deg); border-radius: 4px; }
.fam .a{ padding: 24px 22px 22px; flex-grow: 1; }
.fam .a .k{ font-family: var(--display); font-weight: 800; font-size: 12.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--mint-ink); }
.fam .a p{ margin: 4px 0 0; font-size: 15px; color: var(--text-soft); }
.fam:nth-child(3n+2) .q, .fam:nth-child(3n+2) .q::after{ background: var(--sun); }
.fam:nth-child(3n+3) .q, .fam:nth-child(3n+3) .q::after{ background: var(--lilac); }
.familiar.two{ grid-template-columns: repeat(2, 1fr); }
@media (max-width: 900px){ .familiar{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px){ .familiar, .familiar.two{ grid-template-columns: 1fr; } }

/* From ... to ... */
.fromto{ display:grid; gap: 12px; max-width: 900px; margin: 0 auto; }
.ft{ display:grid; grid-template-columns: 1fr 44px 1fr; align-items:center; gap: 10px; }
.ft .from, .ft .to{ border-radius: 18px; padding: 14px 18px; font-family: var(--display); font-weight: 700; font-size: 16px; line-height: 1.3; }
.ft .from{ background: rgba(255,255,255,.08); color: rgba(255,255,255,.7); text-decoration: line-through; text-decoration-color: rgba(244,56,88,.8); text-decoration-thickness: 2px; }
.ft .to{ background: var(--gold); color: var(--navy-deep); }
.ft .arrow{ text-align:center; font-size: 22px; color: var(--gold); }
.fromto.light .ft .from{ background: var(--white); color: var(--text-soft); }
.fromto.light .ft .to{ background: var(--navy); color: var(--white); }
.fromto.light .ft .arrow{ color: var(--red); }
@media (max-width: 600px){ .ft{ grid-template-columns: 1fr; gap: 6px; } .ft .arrow{ transform: rotate(90deg); line-height: 1; } }

/* ---------- Tiles ---------- */
.tiles{ display:grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px; }
.tiles.cols-3{ grid-template-columns: repeat(3, 1fr); }
.tiles.cols-2{ grid-template-columns: repeat(2, 1fr); }
@media (max-width: 980px){ .tiles.cols-3{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px){ .tiles.cols-3, .tiles.cols-2{ grid-template-columns: 1fr; } }
.tile{ background: var(--white); border-radius: 24px; padding: 26px 24px; border: 1px solid var(--line); box-shadow: 0 6px 18px rgba(37,22,94,.05); position: relative; }
.tile h3{ font-size: 20px; margin-bottom: 8px; }
.tile p{ font-size: 15px; color: var(--text-soft); margin: 0; }
.tile-top{ display:flex; align-items:flex-start; justify-content:space-between; gap: 10px; margin-bottom: 16px; }
.tile-top .ico{ margin-bottom: 0; }
a.tile{ display:block; transition: transform .18s ease, box-shadow .18s ease; }
a.tile:hover{ transform: translateY(-4px); box-shadow: 0 18px 36px rgba(37,22,94,.14); }
.ico{ width: 58px; height: 58px; border-radius: 18px; display:grid; place-items:center; font-size: 28px; margin-bottom: 16px; background: var(--lilac); flex-shrink: 0; }
.ico.rose{ background: var(--rose); } .ico.gold{ background: var(--sun); } .ico.mint{ background: var(--mint); } .ico.sky{ background: var(--sky); } .ico.lilac{ background: var(--lilac); }
.tile .more{ display:inline-block; margin-top: 14px; font-family: var(--display); font-weight: 700; color: var(--red); }

.worlds{ display:grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.world{ border-radius: 28px; padding: 28px 24px 24px; display:flex; flex-direction:column; transition: transform .18s ease, box-shadow .18s ease; }
.world:hover{ transform: translateY(-5px); box-shadow: 0 20px 38px rgba(37,22,94,.15); }
.world .big{ font-size: 44px; line-height: 1; margin-bottom: 18px; }
.world h3{ font-size: 23px; margin-bottom: 8px; }
.world p{ font-size: 15px; margin: 0 0 16px; color: #3B3355; flex-grow: 1; }
.world .more{ font-family: var(--display); font-weight:700; }
.world.rose{ background: var(--rose); } .world.rose .more{ color: var(--rose-ink); }
.world.gold{ background: var(--sun); } .world.gold .more{ color: var(--sun-ink); }
.world.mint{ background: var(--mint); } .world.mint .more{ color: var(--mint-ink); }
.world.sky{ background: var(--sky); } .world.sky .more{ color: var(--sky-ink); }
@media (max-width: 980px){ .worlds{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px){ .worlds{ grid-template-columns: 1fr; } }

.split{ display:grid; grid-template-columns: 1fr 1fr; gap: 52px; align-items:center; }
.split h2{ font-size: clamp(30px, 3.8vw, 44px); margin-bottom: 14px; }
.split .copy > p{ font-size: 16.5px; color: var(--text-soft); }
.bg-navy .split .copy > p{ color: rgba(255,255,255,.78); }
@media (max-width: 860px){ .split{ grid-template-columns: 1fr; gap: 36px; } .split .art-first{ order: -1; } }
.rounded-photo{ border-radius: 28px; overflow:hidden; box-shadow: 0 22px 44px rgba(37,22,94,.18); }
.rounded-photo img{ width:100%; display:block; }
.check-list{ display:grid; gap: 10px; margin: 18px 0 24px; }
.check-list li{ padding-left: 34px; position: relative; font-size: 16px; color: var(--text); }
.check-list li::before{ content:'\2714'; position:absolute; left: 0; top: 1px; width: 24px; height: 24px; border-radius: 50%; background: var(--mint); color: var(--mint-ink); font-size: 12px; display:grid; place-items:center; }
.bg-navy .check-list li{ color: rgba(255,255,255,.88); }

/* ---------- Today vs Coming soon ---------- */
.today-soon{ display:grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.ts-card{ border-radius: 28px; padding: 32px 30px; }
.ts-card.today{ background: var(--white); border: 2px solid rgba(14,138,95,.25); }
.ts-card.soon{ background: var(--navy); color: var(--white); }
.ts-card h3{ font-size: 25px; margin: 12px 0 10px; }
.ts-card.soon h3{ color: var(--white); }
.ts-card > p{ font-size: 15.5px; color: var(--text-soft); }
.ts-card.soon > p{ color: rgba(255,255,255,.78); }
.ts-list{ display:grid; gap: 14px; margin-top: 8px; }
.ts-list li{ display:flex; gap: 12px; align-items:flex-start; font-size: 15px; line-height: 1.45; }
.ts-list li .e{ flex-shrink:0; width: 36px; height: 36px; border-radius: 12px; display:grid; place-items:center; font-size: 17px; background: var(--mint); }
.ts-card.soon .ts-list li .e{ background: rgba(255,255,255,.12); }
.ts-list li b{ font-family: var(--display); font-size: 16px; color: var(--navy); display:block; }
.ts-card.soon .ts-list li b{ color: var(--white); }
.ts-list li .t{ color: var(--text-soft); }
.ts-card.soon .ts-list li .t{ color: rgba(255,255,255,.75); }
.ts-card.soon .badge-soon{ background: rgba(255,176,32,.2); color: var(--gold); border-color: rgba(255,176,32,.35); }
@media (max-width: 800px){ .today-soon{ grid-template-columns: 1fr; } .ts-card{ padding: 26px 22px; } }

/* ---------- Flow ---------- */
.flow{ display:grid; grid-template-columns: repeat(4, 1fr); gap: 18px; counter-reset: flow; }
.flow-step{ background: var(--white); border-radius: 24px; padding: 26px 22px; text-align:center; position:relative; box-shadow: 0 8px 22px rgba(37,22,94,.07); }
.flow-step .e{ width: 76px; height: 76px; margin: 0 auto 14px; border-radius: 50%; display:grid; place-items:center; font-size: 36px; background: var(--sun); }
.flow-step:nth-child(2) .e{ background: var(--rose); } .flow-step:nth-child(3) .e{ background: var(--mint); } .flow-step:nth-child(4) .e{ background: var(--sky); }
.flow-step h3{ font-size: 18.5px; margin-bottom: 6px; }
.flow-step p{ font-size: 14.5px; color: var(--text-soft); margin: 0; }
.flow-step::before{ counter-increment: flow; content: counter(flow); position:absolute; top: 14px; left: 16px; width: 28px; height: 28px; border-radius: 50%; background: var(--navy); color: var(--white); font-family: var(--display); font-weight: 800; font-size: 14px; display:grid; place-items:center; }
.flow-step:not(:last-child)::after{ content:'\279C'; position:absolute; right: -17px; top: 50%; transform: translateY(-50%); font-size: 20px; color: var(--red); z-index: 2; }
@media (max-width: 900px){ .flow{ grid-template-columns: 1fr 1fr; } .flow-step:not(:last-child)::after{ display:none; } }
@media (max-width: 520px){ .flow{ grid-template-columns: 1fr; } }

.honest{ display:flex; gap: 16px; align-items:flex-start; background: var(--white); border: 2px dashed rgba(37,22,94,.22); border-radius: 22px; padding: 20px 22px; margin-top: 28px; }
.honest .e{ font-size: 28px; line-height: 1; flex-shrink: 0; }
.honest p{ margin: 0; font-size: 15.5px; color: var(--text); }
.honest b{ font-family: var(--display); color: var(--navy); }

/* ---------- Savings jar ---------- */
.jar-card{ background: var(--white); border-radius: 28px; padding: 28px; box-shadow: 0 18px 40px rgba(37,22,94,.12); max-width: 340px; margin: 0 auto; text-align:center; transform: rotate(1.5deg); }
.jar{ width: 140px; height: 170px; margin: 16px auto 16px; border: 5px solid var(--navy); border-top-width: 0; border-radius: 16px 16px 46px 46px; position: relative; background: #F7F4FF; }
.jar::before{ content:''; position:absolute; top: -12px; left: -14px; right: -14px; height: 16px; background: var(--navy); border-radius: 8px; }
.jar .fill{ position:absolute; left:0; right:0; bottom:0; height: var(--fill, 60%); border-radius: 0 0 40px 40px; background: linear-gradient(180deg, #FFD36B, var(--gold)); display:flex; align-items:flex-start; justify-content:center; padding-top: 10px; font-size: 20px; overflow:hidden; animation: fillup 1.8s ease-out both; }
@keyframes fillup{ from{ height: 6%; } }
.jar-card .goal{ font-family: var(--display); font-weight:800; font-size: 21px; color: var(--navy); }
.jar-card .sub{ font-size: 14px; color: var(--text-soft); }
.bar{ height: 12px; border-radius: 999px; background: var(--paper-dim); overflow:hidden; margin: 12px 0 6px; }
.bar span{ display:block; height:100%; border-radius: 999px; background: linear-gradient(90deg, var(--gold), var(--red)); }

/* ---------- Stride Card ---------- */
.stride-card{ position:relative; width: 100%; max-width: 340px; aspect-ratio: 1.586; border-radius: 22px; padding: 22px 24px; color: var(--white); background: radial-gradient(circle at 85% 15%, rgba(255,176,32,.6), transparent 45%), linear-gradient(135deg, var(--navy) 10%, #4A2BA8 55%, var(--red)); box-shadow: 0 26px 50px rgba(24,13,66,.35); transform: rotate(-4deg); margin: 16px auto; display:flex; flex-direction:column; justify-content:space-between; }
.stride-card .top{ display:flex; justify-content:space-between; align-items:center; }
.stride-card .brandmark{ font-family: var(--display); font-weight: 800; font-size: 22px; }
.stride-card .chip-ic{ width: 44px; height: 32px; border-radius: 7px; background: linear-gradient(135deg, #FFE08A, #E8A400); }
.stride-card .dots{ font-family: var(--display); letter-spacing: 3px; font-size: 17px; opacity: .9; }
.stride-card .name{ font-family: var(--display); font-weight: 600; font-size: 14px; opacity: .85; }
.stride-card .badge-soon{ position:absolute; top: -14px; right: -6px; background: var(--gold); color: var(--navy-deep); border-color: var(--gold); transform: rotate(4deg); }

/* ---------- Age journey ---------- */
.journey{ display:grid; grid-template-columns: repeat(6, 1fr); gap: 14px; position: relative; }
.journey::before{ content:''; position:absolute; left: 7%; right: 7%; top: 37px; border-top: 4px dashed rgba(37,22,94,.2); z-index: 0; }
.stop{ position:relative; z-index:1; text-align:center; }
.stop .bubble{ width: 78px; height: 78px; margin: 0 auto 14px; border-radius: 50%; display:grid; place-items:center; font-size: 34px; background: var(--white); border: 4px solid var(--gold); box-shadow: 0 10px 22px rgba(37,22,94,.12); }
.stop:nth-child(2) .bubble{ border-color: #FF8A3D; } .stop:nth-child(3) .bubble{ border-color: var(--red); }
.stop:nth-child(4) .bubble{ border-color: #7B5BE0; } .stop:nth-child(5) .bubble{ border-color: #4C7DFF; } .stop:nth-child(6) .bubble{ border-color: var(--navy); }
.stop .age{ font-family: var(--display); font-weight: 800; font-size: 18px; color: var(--navy); }
.stop .what{ font-family: var(--display); font-weight: 700; font-size: 14.5px; color: var(--red); margin: 2px 0 6px; }
.stop p{ font-size: 13.5px; color: var(--text-soft); margin: 0; line-height: 1.45; }
@media (max-width: 980px){
  .journey{ grid-template-columns: 1fr; gap: 18px; }
  .journey::before{ left: 37px; right: auto; top: 20px; bottom: 20px; border-top: 0; border-left: 4px dashed rgba(37,22,94,.2); }
  .stop{ display:grid; grid-template-columns: 78px 1fr; gap: 16px; text-align:left; align-items:center; }
  .stop .bubble{ margin: 0; }
}

/* ---------- Subject cloud ---------- */
.subject-cloud{ display:flex; flex-wrap:wrap; gap: 12px; justify-content:center; }
.subj{ display:inline-flex; align-items:center; gap: 8px; font-family: var(--display); font-weight: 700; font-size: 16px; padding: 8px 18px 8px 8px; border-radius: 999px; background: var(--white); color: var(--navy); box-shadow: 0 6px 16px rgba(37,22,94,.08); transition: transform .18s ease; }
.subj:hover{ transform: translateY(-3px) rotate(-1deg); }
.subj .e{ width: 34px; height: 34px; border-radius: 50%; display:grid; place-items:center; font-size: 17px; background: var(--sun); }
.subj:nth-child(5n+2) .e{ background: var(--rose); } .subj:nth-child(5n+3) .e{ background: var(--mint); }
.subj:nth-child(5n+4) .e{ background: var(--sky); } .subj:nth-child(5n+5) .e{ background: var(--lilac); }
.subj.star{ background: var(--navy); color: var(--white); }

/* ---------- Money ladder ---------- */
.ladder{ display:grid; grid-template-columns: repeat(6, 1fr); gap: 14px; align-items:end; }
.rung{ border-radius: 22px 22px 14px 14px; padding: 18px 16px; color: var(--navy); background: var(--white); box-shadow: 0 8px 20px rgba(37,22,94,.08); border-top: 6px solid var(--gold); }
.rung:nth-child(1){ min-height: 210px; } .rung:nth-child(2){ min-height: 240px; border-top-color: #FF8A3D; }
.rung:nth-child(3){ min-height: 270px; border-top-color: var(--red); } .rung:nth-child(4){ min-height: 300px; border-top-color: #7B5BE0; }
.rung:nth-child(5){ min-height: 330px; border-top-color: #4C7DFF; } .rung:nth-child(6){ min-height: 360px; border-top-color: var(--navy); }
.rung .age{ font-family: var(--display); font-weight: 800; font-size: 17px; }
.rung .e{ font-size: 28px; margin: 6px 0 8px; }
.rung ul{ display:grid; gap: 6px; }
.rung li{ font-size: 13.5px; line-height: 1.35; color: var(--text-soft); padding-left: 14px; position:relative; }
.rung li::before{ content:''; position:absolute; left:0; top: 6px; width: 6px; height: 6px; border-radius: 50%; background: var(--gold); }
@media (max-width: 1000px){ .ladder{ grid-template-columns: repeat(3, 1fr); align-items: stretch; } .rung{ min-height: 0 !important; } }
@media (max-width: 600px){ .ladder{ grid-template-columns: 1fr; } }

/* ---------- Game arcade ---------- */
.arcade-group{ margin-top: 40px; }
.arcade-head{ display:flex; align-items:center; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.arcade-head h3{ font-size: 23px; }
.arcade-head .tag{ font-family: var(--display); font-weight: 700; font-size: 13px; padding: 4px 12px; border-radius: 999px; background: var(--sun); color: var(--sun-ink); }
.arcade-head .tag.fun{ background: var(--rose); color: var(--rose-ink); }
.arcade-head p{ flex-basis: 100%; margin: 0; font-size: 15px; color: var(--text-soft); }
.bg-navy .arcade-head p{ color: rgba(255,255,255,.75); }
.arcade{ display:grid; grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); gap: 12px; }
.game{ border-radius: 20px; padding: 16px 10px 14px; text-align:center; background: var(--white); border: 2px solid transparent; box-shadow: 0 6px 14px rgba(37,22,94,.07); transition: transform .18s ease, border-color .18s ease; }
.game:hover{ transform: translateY(-4px) scale(1.03); border-color: var(--gold); }
.game .e{ font-size: 34px; line-height: 1; margin-bottom: 8px; }
.game .n{ font-family: var(--display); font-weight: 700; font-size: 14.5px; color: var(--navy); line-height: 1.2; }
.arcade.maths .game{ background: #FFF8E6; } .arcade.words .game{ background: #F0EBFF; }
.arcade.little .game{ background: #E9F8F1; } .arcade.money .game{ background: #FFEDEF; }
.arcade.fun .game{ background: rgba(255,255,255,.08); box-shadow: none; } .arcade.fun .game .n{ color: var(--white); }
.arcade.fun .game:hover{ border-color: var(--gold); }
@media (max-width: 400px){ .arcade{ grid-template-columns: repeat(2, 1fr); } }

/* ---------- Wishlist ---------- */
.wishlist{ background: var(--white); border-radius: 28px; padding: 24px; box-shadow: 0 24px 50px rgba(37,22,94,.16); max-width: 400px; margin: 0 auto; transform: rotate(-1.5deg); }
.wishlist .wl-head{ display:flex; justify-content:space-between; align-items:center; margin-bottom: 14px; gap: 10px; }
.wishlist .wl-title{ font-family: var(--display); font-weight: 800; font-size: 20px; color: var(--navy); }
.wishlist .wl-pts{ font-family: var(--display); font-weight: 700; font-size: 13px; background: var(--sun); color: var(--sun-ink); padding: 4px 10px; border-radius: 999px; white-space: nowrap; }
.wl-tabs{ display:flex; gap: 6px; margin-bottom: 16px; flex-wrap: wrap; }
.wl-tabs span{ font-family: var(--display); font-weight: 700; font-size: 13px; padding: 5px 12px; border-radius: 999px; background: var(--paper-dim); color: var(--navy); }
.wl-tabs span.on{ background: var(--red); color: var(--white); }
.wl-item{ display:flex; gap: 12px; align-items:center; padding: 12px; border-radius: 16px; background: var(--paper); margin-bottom: 10px; }
.wl-item:last-child{ margin-bottom: 0; }
.wl-item .e{ font-size: 28px; flex-shrink:0; width: 48px; height: 48px; display:grid; place-items:center; border-radius: 14px; background: var(--sun); }
.wl-item .info{ flex-grow: 1; min-width: 0; }
.wl-item .t{ font-family: var(--display); font-weight: 700; font-size: 15.5px; color: var(--navy); }
.wl-item .need{ font-size: 12.5px; color: var(--text-soft); }
.wl-item .bar{ margin: 6px 0 0; height: 8px; }
.wl-item .ok{ font-family: var(--display); font-weight: 700; font-size: 12px; color: var(--mint-ink); background: var(--mint); padding: 4px 10px; border-radius: 999px; white-space: nowrap; }

/* ---------- Chore tickets ---------- */
.tickets{ display:grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.ticket{ background: var(--white); border-radius: 20px; padding: 20px 16px; border: 2px dashed rgba(37,22,94,.2); text-align:center; }
.ticket .e{ font-size: 34px; }
.ticket .n{ font-family: var(--display); font-weight: 700; font-size: 16px; color: var(--navy); margin: 8px 0 4px; }
.ticket .amt{ font-family: var(--display); font-weight: 800; font-size: 22px; color: var(--red); }
.ticket .st{ display:inline-block; margin-top: 8px; font-family: var(--display); font-weight: 700; font-size: 12px; padding: 4px 10px; border-radius: 999px; background: var(--sky); color: var(--sky-ink); }
.ticket .st.wait{ background: var(--sun); color: var(--sun-ink); } .ticket .st.done{ background: var(--mint); color: var(--mint-ink); }
@media (max-width: 860px){ .tickets{ grid-template-columns: 1fr 1fr; } }

/* ---------- Week ---------- */
.week{ display:grid; grid-template-columns: repeat(7, 1fr); gap: 12px; }
.day{ background: var(--white); border-radius: 20px; padding: 16px 12px; text-align:center; box-shadow: 0 6px 16px rgba(37,22,94,.06); }
.day .d{ font-family: var(--display); font-weight: 800; font-size: 14px; color: var(--red); text-transform: uppercase; letter-spacing: .06em; }
.day .e{ font-size: 32px; margin: 8px 0; }
.day p{ font-size: 13.5px; color: var(--text-soft); margin: 0; line-height: 1.4; }
.day.party{ background: var(--gold); } .day.party .d, .day.party p{ color: var(--navy); }
@media (max-width: 980px){ .week{ grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 560px){ .week{ grid-template-columns: 1fr 1fr; } }

/* ---------- Path steps ---------- */
.path{ display:grid; gap: 18px; max-width: 860px; margin: 0 auto; position: relative; }
.path::before{ content:''; position:absolute; left: 35px; top: 30px; bottom: 30px; border-left: 4px dashed rgba(244,56,88,.35); }
.path-step{ display:grid; grid-template-columns: 74px 1fr; gap: 20px; align-items:center; position: relative; }
.path-step .e{ width: 74px; height: 74px; border-radius: 24px; display:grid; place-items:center; font-size: 34px; background: var(--white); box-shadow: 0 10px 22px rgba(37,22,94,.12); position: relative; z-index: 1; }
.path-step .card{ background: var(--white); border-radius: 22px; padding: 18px 22px; box-shadow: 0 6px 16px rgba(37,22,94,.06); min-width: 0; }
.path-step .card .k{ font-family: var(--display); font-weight: 800; font-size: 13px; color: var(--red); text-transform: uppercase; letter-spacing: .06em; }
.path-step h3{ font-size: 20px; margin: 2px 0 4px; }
.path-step p{ margin: 0; font-size: 15px; color: var(--text-soft); }
@media (max-width: 520px){ .path-step{ grid-template-columns: 56px 1fr; gap: 12px; } .path-step .e{ width: 56px; height: 56px; font-size: 26px; border-radius: 18px; } .path::before{ left: 26px; } .path-step .card{ padding: 16px; } }

/* ---------- Expect cards ---------- */
.expect{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.expect-card{ border-radius: 26px; padding: 28px 26px; background: var(--white); position: relative; overflow: hidden; box-shadow: 0 6px 18px rgba(37,22,94,.05); }
.expect-card::after{ content:''; position:absolute; right: -30px; top: -30px; width: 110px; height: 110px; border-radius: 50%; background: var(--sun); opacity: .8; }
.expect-card:nth-child(6n+2)::after{ background: var(--rose); } .expect-card:nth-child(6n+3)::after{ background: var(--mint); }
.expect-card:nth-child(6n+4)::after{ background: var(--sky); } .expect-card:nth-child(6n+5)::after{ background: var(--lilac); }
.expect-card .e{ font-size: 34px; position: relative; z-index: 1; }
.expect-card h3{ font-size: 21px; margin: 12px 0 8px; position: relative; z-index: 1; }
.expect-card p{ margin: 0; font-size: 15px; color: var(--text-soft); position: relative; z-index: 1; }
@media (max-width: 900px){ .expect{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px){ .expect{ grid-template-columns: 1fr; } }

.promises{ display:flex; flex-wrap: wrap; gap: 12px; justify-content:center; margin-top: 32px; }
.promise{ display:inline-flex; align-items:center; gap: 10px; background: var(--white); border-radius: 999px; padding: 10px 18px 10px 10px; font-family: var(--display); font-weight: 700; font-size: 15px; color: var(--navy); box-shadow: 0 6px 14px rgba(37,22,94,.07); }
.promise .e{ width: 32px; height: 32px; border-radius: 50%; display:grid; place-items:center; background: var(--mint); font-size: 16px; flex-shrink: 0; }
@media (max-width: 480px){ .promise{ border-radius: 18px; } }

.devices{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.device{ background: var(--white); border-radius: 24px; padding: 26px; text-align:center; }
.device .e{ font-size: 44px; } .device h3{ font-size: 20px; margin: 10px 0 4px; } .device p{ margin:0; color: var(--text-soft); font-size: 14.5px; }
@media (max-width: 700px){ .devices{ grid-template-columns: 1fr; } }

.shelves{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
@media (max-width: 900px){ .shelves{ grid-template-columns: 1fr; } }
.shelf{ border-radius: 26px; padding: 26px 24px; }
.shelf.home{ background: var(--sun); } .shelf.out{ background: var(--mint); } .shelf.spec{ background: var(--lilac); }
.shelf h3{ font-size: 22px; display:flex; align-items:center; gap: 10px; margin-bottom: 6px; }
.shelf h3 .e{ font-size: 30px; }
.shelf > p{ font-size: 14.5px; color: var(--text-soft); margin: 0 0 14px; }
.shelf .items{ display:flex; flex-wrap:wrap; gap: 8px; }
.shelf .items span{ background: var(--white); border-radius: 999px; padding: 7px 14px; font-family: var(--display); font-weight: 600; font-size: 14px; color: var(--navy); }

.price-card .plan-top{ display:flex; align-items:center; justify-content:space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.price-card .plan-name{ margin-bottom: 0; }
.price-card .plan-emoji{ font-size: 42px; line-height: 1; margin-bottom: 12px; }
.price-card li .badge-soon{ margin-left: 4px; font-size: 10px; padding: 2px 8px; vertical-align: middle; }
.price-card.free{ border: 3px solid rgba(14,138,95,.45); }
.price-card.pro .badge-soon{ background: rgba(255,176,32,.2); color: var(--gold); border-color: rgba(255,176,32,.35); }

.topic-chips{ display:flex; flex-wrap:wrap; gap: 10px; justify-content:center; margin-top: 26px; }
.topic-chips a{ display:inline-flex; align-items:center; gap: 8px; background: var(--white); border-radius: 999px; padding: 9px 16px; font-family: var(--display); font-weight: 700; font-size: 14.5px; color: var(--navy); box-shadow: 0 6px 14px rgba(37,22,94,.08); transition: transform .15s ease; }
.topic-chips a:hover{ transform: translateY(-2px); }
.faq-group{ margin-bottom: 38px; scroll-margin-top: 90px; }
.faq-group h3{ font-size: 22px; display:flex; align-items:center; gap: 10px; margin-bottom: 14px; }
.faq-group h3 .e{ width: 40px; height: 40px; border-radius: 14px; display:grid; place-items:center; background: var(--sun); font-size: 20px; }
.faq-item .a .badge-soon{ font-size: 10px; padding: 2px 8px; }

.cta-band.fun{ background: linear-gradient(120deg, var(--red), #FF7A59 55%, var(--gold)); }
.cta-band.fun p{ color: rgba(255,255,255,.95); }
.cta-band.fun .btn-gold{ background: var(--navy); color: var(--white); }
.cta-band.fun .btn-gold:hover{ background: var(--navy-deep); }
.cta-band .confetti{ opacity:.3; z-index: 0; background-image: radial-gradient(circle, #fff 3px, transparent 4px), radial-gradient(circle, var(--gold) 3px, transparent 4px); background-size: 140px 120px, 200px 170px; background-position: 10px 20px, 80px 70px; }
.cta-band .wrap{ position: relative; z-index: 1; }
.cta-band .cta-e{ font-size: 44px; margin-bottom: 8px; line-height: 1; }
.cta-row{ display:flex; gap: 14px; justify-content:center; flex-wrap: wrap; }

.shots-row{ display:flex; gap: 24px; justify-content:center; flex-wrap: wrap; }
.shots-row .device-shot{ width: 210px; max-width: 44%; transform: rotate(-2deg); }
.shots-row .device-shot:nth-child(2){ transform: rotate(2deg) translateY(16px); }
@media (max-width: 480px){ .shots-row{ gap: 12px; } }

.mv-card .e{ font-size: 36px; margin-bottom: 10px; }
.value-tile{ background: var(--white); border-radius: 24px; padding: 24px; }
.value-tile .ico{ margin-bottom: 12px; }
.value-tile h3{ font-size: 19px; margin-bottom: 6px; }
.value-tile p{ margin: 0; font-size: 14.5px; color: var(--text-soft); }

@media (prefers-reduced-motion: reduce){
  .sticker, .emoji-stage .orbit, .jar .fill{ animation: none; }
  .tile, .world, .game, .subj, .topic-chips a{ transition: none; }
}

.rounded-photo img{ max-height: 480px; object-fit: cover; }

/* ============================================================
   v2.1 review fixes (2026-10-21)
   ============================================================ */
/* Real app screens in a neutral phone frame */
.phone{ width: 220px; background: #1D1240; border-radius: 34px; padding: 9px; box-shadow: 0 26px 50px rgba(24,13,66,.35); }
.phone img{ display:block; width:100%; border-radius: 26px; }
.hero-combo{ position: relative; max-width: 470px; width: 100%; margin: 0 auto; padding-bottom: 40px; }
.hero-combo .photo-frame{ width: 78%; }
.hero-combo .phone{ position:absolute; right: 0; bottom: 0; width: 44%; transform: rotate(4deg); z-index: 2; }
.hero-phones{ display:flex; justify-content:center; align-items:flex-end; gap: 18px; position: relative; padding: 10px 0 20px; }
.hero-phones .phone{ width: 200px; transform: rotate(-3deg); }
.hero-phones .phone + .phone{ transform: rotate(3deg) translateY(-24px); }
.hero-phone-single{ display:flex; justify-content:center; position: relative; padding: 10px 0 24px; }
.hero-phone-single .phone{ width: 240px; transform: rotate(-2deg); }
.shot-caption{ text-align:center; font-size: 13.5px; color: var(--text-soft); margin-top: 26px; }
@media (max-width: 560px){
  .hero-combo .phone{ width: 42%; }
  .hero-phones .phone{ width: 46%; }
  .hero-phone-single .phone{ width: 200px; }
}

/* Confetti stays out of the text */
.hero2 .confetti{ -webkit-mask-image: linear-gradient(90deg, transparent 0 52%, #000 72%); mask-image: linear-gradient(90deg, transparent 0 52%, #000 72%); }
.hero2.single .confetti{ -webkit-mask-image: radial-gradient(ellipse at center, transparent 38%, #000 70%); mask-image: radial-gradient(ellipse at center, transparent 38%, #000 70%); }
.cta-band .confetti{ -webkit-mask-image: radial-gradient(ellipse at center, transparent 40%, #000 72%); mask-image: radial-gradient(ellipse at center, transparent 40%, #000 72%); }
@media (max-width: 900px){
  .hero2 .confetti{ opacity: .3; -webkit-mask-image: linear-gradient(180deg, transparent 0 58%, #000 75%); mask-image: linear-gradient(180deg, transparent 0 58%, #000 75%); }
  .hero2.single .confetti{ -webkit-mask-image: linear-gradient(180deg, #000 0 6%, transparent 14% 88%, #000 96%); mask-image: linear-gradient(180deg, #000 0 6%, transparent 14% 88%, #000 96%); }
  .cta-band .confetti{ opacity: .2; }
}
.hero2-copy{ position: relative; z-index: 2; }
.sticker{ animation-iteration-count: 3; }
.emoji-stage .orbit{ animation-iteration-count: 3; }

/* Before / After: readable, no strike-through */
.ft .from{ color: rgba(255,255,255,.9); text-decoration: none; position: relative; padding-left: 74px; }
.ft .to{ position: relative; padding-left: 70px; }
.ft .from::before, .ft .to::before{ position:absolute; left: 14px; top: 50%; transform: translateY(-50%); font-family: var(--display); font-weight: 800; font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; padding: 3px 8px; border-radius: 999px; }
.ft .from::before{ content: 'Before'; background: rgba(255,255,255,.14); color: rgba(255,255,255,.9); }
.ft .to::before{ content: 'After'; background: var(--navy); color: var(--gold); }

/* Labels: larger and higher contrast */
.eyebrow-pill{ font-size: 13.5px; color: #B5133A; }
.fam .a .k{ font-size: 12px; }

/* Stride Pro badge */
.badge-pro{ display:inline-flex; align-items:center; gap:6px; font-family:var(--display); font-weight:700; font-size:11.5px; letter-spacing:.04em; text-transform:uppercase; background: var(--lilac); color: var(--lilac-ink); padding: 5px 12px; border-radius:999px; border:1px solid rgba(91,63,196,.25); white-space:nowrap; }
.badge-pro::before{ content:'\2605'; font-size: 10px; }
.faq-item .a .badge-pro{ font-size: 10px; padding: 2px 8px; }

/* Inline badges in lists (Money coming soon) */
.ts-list .ttl{ display:flex; flex-wrap: wrap; align-items:center; gap: 4px 10px; }
.ts-list .ttl b{ display:inline; }
.ts-list .ttl .badge-soon{ font-size: 10px; padding: 3px 9px; }

/* Starter amounts on the Free card */
.starter{ background: var(--mint); border-radius: 16px; padding: 14px 16px; margin: -8px 0 24px; font-size: 14px; color: #2D5546; }
.starter b{ font-family: var(--display); color: var(--mint-ink); display:block; margin-bottom: 2px; }

/* Free vs Pro hero art */
.plan-art{ display:inline-flex; align-items:center; gap: 14px; font-size: 54px; margin-top: 26px; }
.plan-art .arrow{ font-size: 26px; color: var(--mint-ink); }

/* Mission cards: icon and label inline */
.mv-card .mv-top{ display:flex; align-items:center; gap: 12px; margin-bottom: 14px; }
.mv-card .mv-top .e{ margin: 0; font-size: 32px; }
.mv-card .mv-top .eyebrow{ margin: 0; }

/* Arcade tabs */
.tabs{ display:flex; flex-wrap: wrap; gap: 8px; justify-content:center; margin-bottom: 26px; }
.tabs button{ font-family: var(--display); font-weight: 700; font-size: 15px; border: 0; cursor: pointer; padding: 10px 18px; border-radius: 999px; background: var(--paper-dim); color: var(--navy); }
.tabs button[aria-selected="true"]{ background: var(--navy); color: var(--white); }
.js .tab-panel[hidden]{ display:none; }
.tabs{ display:none; }
.js .tabs{ display:flex; }
.js .tab-panel .arcade-group{ margin-top: 0; }
.more-pill{ grid-column: 1 / -1; text-align:center; font-family: var(--display); font-weight: 700; font-size: 14px; color: var(--rose-ink); background: #FFEDEF; border-radius: 999px; padding: 10px 16px; }

/* Money ladder as accordion on phones */
details.rung > summary{ list-style: none; cursor: default; }
details.rung > summary::-webkit-details-marker{ display:none; }
@media (max-width: 600px){
  .ladder{ gap: 10px; }
  details.rung{ border-top-width: 0; border-left: 6px solid var(--gold); border-radius: 18px; padding: 14px 16px; }
  details.rung > summary{ cursor: pointer; display:flex; align-items:center; gap: 10px; }
  details.rung > summary .e{ margin: 0; font-size: 24px; }
  details.rung > summary::after{ content:'+'; margin-left:auto; font-size: 22px; color: var(--red); font-family: var(--display); }
  details.rung[open] > summary::after{ content:'\2212'; }
  details.rung ul{ margin-top: 10px; }
  details.rung:nth-child(2){ border-left-color: #FF8A3D; } details.rung:nth-child(3){ border-left-color: var(--red); }
  details.rung:nth-child(4){ border-left-color: #7B5BE0; } details.rung:nth-child(5){ border-left-color: #4C7DFF; } details.rung:nth-child(6){ border-left-color: var(--navy); }
}

/* Swipe rows on phones (keeps pages short) */
@media (max-width: 600px){
  .swipe-m{ display:flex !important; overflow-x: auto; scroll-snap-type: x mandatory; gap: 14px; margin: 0 -20px; padding: 4px 20px 18px; scrollbar-width: none; }
  .swipe-m::-webkit-scrollbar{ display:none; }
  .swipe-m > *{ flex: 0 0 84%; scroll-snap-align: center; }
  .swipe-hint{ display:block; text-align:center; font-family: var(--display); font-weight: 700; font-size: 13px; color: var(--text-soft); margin-top: 2px; }
}
.swipe-hint{ display:none; }

/* Parent tools photo: portrait-friendly, hidden on phones */
.portrait-photo{ max-width: 340px; margin: 0 auto; border-radius: 28px; overflow: hidden; box-shadow: 0 22px 44px rgba(37,22,94,.18); }
.portrait-photo img{ width:100%; aspect-ratio: 3 / 4; object-fit: cover; object-position: center 22%; display:block; }
@media (max-width: 860px){ .hide-m{ display:none; } }

/* Footer: two columns on phones */
@media (max-width: 560px){
  .footer-grid{ grid-template-columns: 1fr 1fr; gap: 28px 20px; }
  .footer-grid > div:first-child{ grid-column: 1 / -1; }
  .footer-grid > div:last-child{ grid-column: 1 / -1; }
}

/* Example caption under chore tickets */
.small-note{ text-align:center; font-size: 13.5px; color: var(--text-soft); margin-top: 14px; }
.h1-tight{ max-width: 14ch; }
.tab-panel .arcade.fun .game{ background: var(--navy); }
.tab-panel .arcade-head{ justify-content: center; text-align: center; }
details.rung > summary .age, details.rung > summary .e{ display:block; }
@media (max-width: 600px){ details.rung > summary .age, details.rung > summary .e{ display:inline-block; } }
@media (max-width: 400px){ .tabs button{ font-size: 13.5px; padding: 8px 13px; } }
img{ height: auto; }
.hero-combo{ padding-bottom: 24px; }
.hero-combo .photo-frame{ width: 84%; }
.hero-combo .photo-frame img{ aspect-ratio: 4 / 4.3; }
.hero-combo .phone{ width: 36%; right: -6px; bottom: -6px; padding: 7px; border-radius: 26px; }
.hero-combo .phone img{ border-radius: 20px; }
/* v2.2: restored photos */
.photo-frame.portrait{ max-width: 320px; margin: 0 auto; }
.photo-frame.portrait img{ aspect-ratio: 3 / 4; object-position: center 18%; }
.rounded-photo.crop-top img{ aspect-ratio: 4 / 3.6; object-fit: cover; object-position: center top; }
.devices.stack{ grid-template-columns: 1fr; gap: 14px; }
.devices.stack .device{ display:grid; grid-template-columns: 56px 1fr; gap: 4px 16px; text-align:left; align-items:center; padding: 18px 22px; }
.devices.stack .device .e{ grid-row: span 2; font-size: 40px; }
.devices.stack .device h3{ margin: 0; }
@media (max-width: 560px){ .photo-frame.portrait{ max-width: 260px; } .portrait-photo{ max-width: 280px; } }
/* v2.4: brochure lines + energy pass */
.week.five{ grid-template-columns: repeat(5, 1fr); }
.bg-navy .day{ background: rgba(255,255,255,.08); box-shadow: none; }
.bg-navy .day p{ color: rgba(255,255,255,.8); }
.bg-navy .day.party{ background: var(--gold); } .bg-navy .day.party p{ color: var(--navy); }
@media (max-width: 760px){ .week.five{ grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 420px){ .week.five{ grid-template-columns: 1fr 1fr; } }
.punch{ text-align:center; font-family: var(--display); font-weight: 800; font-size: clamp(19px, 2.2vw, 24px); line-height: 1.3; color: var(--gold); max-width: 760px; margin: 30px auto 0; }
.punch.dark{ color: var(--navy); }
.chain{ display:flex; flex-wrap: wrap; justify-content:center; align-items:center; gap: 10px; }
.chain .arr{ color: var(--red); font-size: 20px; }
.scenario{ display:flex; gap: 14px; align-items:flex-start; background: var(--white); border-radius: 22px; padding: 18px 20px; margin: 26px auto 0; max-width: 760px; box-shadow: 0 10px 24px rgba(37,22,94,.08); border-left: 6px solid var(--gold); }
.scenario .tag{ flex-shrink: 0; font-family: var(--display); font-weight: 800; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; background: var(--sun); color: var(--sun-ink); padding: 4px 10px; border-radius: 999px; margin-top: 2px; }
.scenario p{ margin: 0; font-size: 16px; color: var(--text); }
.scenario b{ font-family: var(--display); color: var(--navy); }
@media (max-width: 480px){ .scenario{ flex-direction: column; gap: 8px; } }
/* v2.5: energy pass, phone length trims */
@media (max-width: 560px){
  section{ padding: 46px 0; }
  .section-head{ margin-bottom: 26px; }
  .subject-cloud{ gap: 8px; }
  .subj{ font-size: 14.5px; padding: 5px 13px 5px 5px; gap: 6px; }
  .subj .e{ width: 28px; height: 28px; font-size: 15px; }
  .stop{ grid-template-columns: 56px 1fr; gap: 12px; }
  .stop .bubble{ width: 56px; height: 56px; font-size: 26px; border-width: 3px; }
  .journey{ gap: 10px; }
  .portrait-photo{ max-width: 210px; }
  .rounded-photo img{ aspect-ratio: 16 / 11; object-fit: cover; }
  .scenario{ margin-top: 18px; }
  .cta-band{ padding-top: 52px; padding-bottom: 52px; }
}
@media (max-width: 560px){
  section{ padding: 40px 0; }
  .section-head h2{ font-size: 26px; }
  .section-head .lead, .section-head p{ font-size: 16px; margin-top: 10px; }
  .stop{ grid-template-columns: 46px 1fr; }
  .stop .bubble{ width: 46px; height: 46px; font-size: 22px; }
  .path{ gap: 12px; }
  .path-step h3{ font-size: 17px; }
  .mv-card{ padding: 24px 20px; }
  .mv-card p{ font-size: 16px; }
  .rung{ padding: 12px 14px; }
  .portrait-photo{ max-width: 170px; }
  .arcade{ grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .game{ padding: 10px 6px; border-radius: 16px; }
  .stats-band{ padding: 24px 0; }
}
@media (max-width: 560px){
  .hero2{ padding: 40px 0 48px; }
  .hero2-grid{ gap: 34px; }
  .photo-frame.portrait{ max-width: 220px; }
}
@media (max-width: 560px){
  .ladder{ gap: 8px; }
  .stop .what{ margin: 0 0 2px; }
  .journey{ gap: 6px; }
}

/* Footer social links */
.footer-social{ display:flex; gap:10px; margin-top:18px; flex-wrap:wrap; }
.footer-social a{ width:38px; height:38px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:rgba(255,255,255,0.10); color:#fff; transition:background .18s ease, transform .18s ease; }
.footer-social a:hover{ background:var(--red); transform:translateY(-2px); }
.footer-social svg{ width:18px; height:18px; }
.footer-social .glyph{ font-family:var(--display); font-weight:800; font-size:16px; line-height:1; }

/* ============ Video build (2026-10-27): page banner videos, lightbox, Videos page ============ */
/* Banner: each page's hero plays a short muted loop of that page's video behind the copy. */
.hero2.vhero{ background: var(--navy-deep); color: var(--white); min-height: 600px; display:flex; align-items:center; padding: 0; }
.hero2.vhero::before, .hero2.vhero::after, .vhero .confetti{ display:none; }
.vhero-media{ position:absolute; inset:0; z-index:0; }
.vhero-media video, .vhero-media img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position: 75% 40%; }
.vhero-media img{ display:none; }
.vhero-shade{ position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    linear-gradient(90deg, rgba(24,13,66,.96) 0%, rgba(24,13,66,.92) 40%, rgba(24,13,66,.55) 66%, rgba(24,13,66,.25) 100%),
    linear-gradient(0deg, rgba(24,13,66,.65) 0%, rgba(24,13,66,0) 30%); }
.vhero .hero2-grid{ grid-template-columns: 1fr; width:100%; padding-top: 72px; padding-bottom: 76px; text-align:left; }
.vhero .hero2-copy{ max-width: 600px; }
.vhero h1{ color: var(--white); }
.vhero .lede{ color: rgba(255,255,255,.86); margin-left:0; margin-right:0; }
.vhero .hero-ctas{ justify-content:flex-start; }
.vhero .eyebrow-pill{ background: rgba(255,255,255,.14); color: var(--white); }
.vhero .btn-outline, .vhero .btn-outline.dark{ border-color: rgba(255,255,255,.55); color: var(--white); }
.vhero .btn-outline:hover, .vhero .btn-outline.dark:hover{ border-color: var(--white); background: rgba(255,255,255,.1); }
.vhero .btn-navy{ background: var(--white); color: var(--navy); }
.vhero .inline-link{ color: var(--gold); }
.vhero .topic-chips{ justify-content:flex-start; }
.vhero .plan-art{ display:none; }
.btn-watch{ background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.55); color: var(--white); cursor:pointer; backdrop-filter: blur(4px); }
.btn-watch:hover{ background: rgba(255,255,255,.2); border-color: var(--white); }
.btn-watch .play{ width:26px; height:26px; border-radius:50%; background: var(--gold); color: var(--navy-deep); display:inline-flex; align-items:center; justify-content:center; font-size: 11px; padding-left:2px; }
.btn-watch .dur{ font-family: var(--body); font-weight:600; font-size: 12.5px; opacity:.8; }
/* Pause control: the loop runs longer than 5 seconds (WCAG 2.2.2). */
.bg-toggle{ position:absolute; right: 20px; bottom: 18px; z-index:3; font-family: var(--display); font-weight:700; font-size: 12.5px; color: var(--white); background: rgba(24,13,66,.55); border:1px solid rgba(255,255,255,.35); border-radius:999px; padding: 6px 12px; cursor:pointer; }
.bg-toggle:hover{ background: rgba(24,13,66,.8); }
/* Still poster: reduced motion, Data Saver or a 2G connection. The loop is never requested. */
.vhero.still .vhero-media video{ display:none; }
.vhero.still .vhero-media img{ display:block; }
.vhero.still .bg-toggle{ display:none; }
@media (prefers-reduced-motion: reduce){
  .vhero-media video{ display:none; }
  .vhero-media img{ display:block; }
  .bg-toggle{ display:none; }
}

/* Lightbox */
dialog.vbox{ border:0; padding:0; background: transparent; width: min(980px, calc(100vw - 32px)); max-width:none; max-height: calc(100vh - 32px); overflow: visible; color: var(--white); }
dialog.vbox::backdrop{ background: rgba(14,8,40,.86); }
.vbox-card{ background: var(--navy-deep); border-radius: 24px; padding: 18px; box-shadow: 0 30px 80px rgba(0,0,0,.5); max-height: calc(100vh - 32px); overflow-y:auto; }
.vbox-top{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom: 12px; }
.vbox-kind{ font-family: var(--display); font-weight:700; font-size: 14px; color: var(--gold); padding-left: 4px; }
.vbox-tabs{ scroll-padding-inline: 4px; display:flex; gap:6px; overflow-x:auto; scrollbar-width:none; -webkit-overflow-scrolling: touch; scroll-snap-type: x proximity; min-width:0; flex:1; padding: 2px; }
.vbox-tabs[hidden], .vbox-kind[hidden]{ display:none; }
.vbox-tabs::-webkit-scrollbar{ display:none; }
.vbox-tabs [role=tab]{ flex: 0 0 auto; scroll-snap-align: start; font-family: var(--display); font-weight:700; font-size: 14px; color: rgba(255,255,255,.8); background: rgba(255,255,255,.08); border: 1.5px solid transparent; border-radius: 999px; padding: 7px 14px; cursor:pointer; white-space:nowrap; }
.vbox-tabs [role=tab]:hover{ background: rgba(255,255,255,.14); }
.vbox-tabs [role=tab][aria-selected=true]{ background: var(--gold); color: var(--navy-deep); }
.vbox-close{ flex:0 0 auto; width:40px; height:40px; border-radius:50%; border:0; background: rgba(255,255,255,.12); color: var(--white); font-size: 20px; line-height:1; cursor:pointer; margin-left:auto; }
.vbox-close:hover{ background: rgba(255,255,255,.22); }
.vbox-player{ position:relative; aspect-ratio: 16/9; border-radius: 16px; overflow:hidden; background:#000; margin: 0 auto; }
.vbox-player.sq{ aspect-ratio: 1/1; width: min(100%, calc(100vh - 230px)); min-width: 240px; }
.vbox-player video{ width:100%; height:100%; display:block; background:#000; }
.vbox-meta{ display:flex; flex-wrap:wrap; justify-content:space-between; align-items:baseline; gap: 6px 16px; margin-top: 12px; }
.vbox-meta h2{ color: var(--white); font-size: 20px; }
.vbox-meta .note{ font-size: 13px; color: rgba(255,255,255,.65); }
.vbox details{ margin-top: 10px; font-size: 14px; color: rgba(255,255,255,.8); }
.vbox summary{ cursor:pointer; font-family: var(--display); font-weight:700; color: var(--gold); }
.vbox details p{ margin: 8px 0 0; line-height:1.55; }

/* Videos page */
.vgroup + .vgroup{ margin-top: 56px; }
.vgroup-head{ margin-bottom: 22px; }
.vgroup-head h2{ font-size: clamp(26px, 3vw, 34px); }
.vgroup-head p{ color: var(--text-soft); margin-top: 6px; max-width: 640px; }
.vgrid{ display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 22px; }
.vgrid.sq{ grid-template-columns: repeat(4, minmax(0,1fr)); }
.vsub{ font-family: var(--display); font-weight:700; font-size: 19px; color: var(--navy); margin: 30px 0 12px; }
.vgroup-head + .vsub{ margin-top: 0; }
.vcard{ background: var(--white); border-radius: 20px; box-shadow: 0 10px 26px rgba(37,22,94,.08); overflow:hidden; display:flex; flex-direction:column; min-width:0; scroll-margin-top: 90px; }
.vcard-play{ position:relative; display:block; aspect-ratio: 16/9; background: var(--navy-deep); overflow:hidden; }
.vgrid.sq .vcard-play{ aspect-ratio: 1/1; }
.vcard-play img{ width:100%; height:100%; object-fit:cover; display:block; transition: transform .2s ease; }
.vcard-play:hover img{ transform: scale(1.03); }
.vcard-play .pbtn{ position:absolute; left:12px; top:10px; width:46px; height:46px; border-radius:50%; background: var(--gold); color: var(--navy-deep); display:flex; align-items:center; justify-content:center; font-size: 20px; padding-left:4px; box-shadow: 0 10px 24px rgba(0,0,0,.3); }
.vcard-play .t{ position:absolute; right:10px; top:12px; font-family: var(--body); font-weight:700; font-size: 12px; color: var(--white); background: rgba(24,13,66,.8); border-radius: 999px; padding: 3px 9px; }
.vcard-body{ padding: 14px 16px 16px; display:flex; flex-direction:column; gap: 6px; }
.vcard-body h3{ font-size: 17px; line-height:1.25; color: var(--navy); }
.vcard-body .who{ font-size: 12.5px; font-weight:600; color: var(--text-soft); }
.vcard details{ font-size: 14px; color: var(--text-soft); }
.vcard summary{ cursor:pointer; font-family: var(--display); font-weight:700; font-size: 14px; color: var(--red); }
.vcard details p{ margin-top: 6px; line-height: 1.55; }
.vcard:target{ outline: 3px solid var(--gold); outline-offset: 3px; }
@media (max-width: 980px){ .vgrid{ grid-template-columns: repeat(2, minmax(0,1fr)); } .vgrid.sq{ grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 560px){
  .hero2.vhero{ min-height: 0; }
  .vhero .hero2-grid{ padding-top: 44px; padding-bottom: 64px; }
  .vhero-media video, .vhero-media img{ object-position: 62% 20%; }
  .vhero-shade{ background: linear-gradient(180deg, rgba(24,13,66,.78) 0%, rgba(24,13,66,.88) 45%, rgba(24,13,66,.95) 100%); }
  .vhero .lede{ font-size: 16.5px; margin: 14px 0 24px; }
  .vhero .hero-ctas .btn{ width:100%; justify-content:center; }
  .bg-toggle{ right: 12px; bottom: 12px; }
  dialog.vbox{ width: calc(100vw - 16px); }
  .vbox-card{ padding: 12px; border-radius: 18px; }
  .vbox-meta h2{ font-size: 17px; }
  .vgrid, .vgrid.sq{ grid-template-columns: 1fr; gap: 16px; }
}
@media (prefers-reduced-motion: reduce){ .vcard-play img{ transition:none; } .vcard-play:hover img{ transform:none; } }