:root{
  --font-display:"Fraunces",Georgia,serif; --font-body:"Manrope",system-ui,sans-serif;
  --canvas:#F7F2E8; --paper:#FFFDF7; --paper-2:#F1EADB; --paper-3:#ECE3D1;
  --ink:#181229; --ink-soft:#4E4763; --ink-faint:#6F6886;
  --green:#7A35FF; --green-2:#9156FF; --green-deep:#5418C8;
  --gold:#FFC247; --gold-deep:#8F6300;
  --red:#FF4D6D; --red-deep:#D1184A;
  --blue:#00D4D8; --blue-deep:#00838A;
  --line:rgba(24,18,41,.12); --line-soft:rgba(24,18,41,.07);
  --grad:linear-gradient(90deg,#7A35FF,#FF4D6D,#FFC247,#00D4D8);
  --sh-1:0 1px 2px rgba(24,18,41,.04),0 10px 26px -14px rgba(24,18,41,.20);
  --sh-2:0 2px 6px rgba(24,18,41,.06),0 30px 56px -22px rgba(24,18,41,.32);
  --r-sm:11px; --r-md:16px; --r-lg:22px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} }
html,body{margin:0}
body{background:var(--canvas); color:var(--ink); font-family:var(--font-body);
  -webkit-font-smoothing:antialiased; line-height:1.6; font-size:16px; padding-top:86px;}
.wrap{max-width:1140px; margin:0 auto; padding:0 24px;}
h1,h2,h3{font-family:var(--font-display); font-weight:600; line-height:1.06; margin:0; letter-spacing:-.012em;}
p{margin:0;}
a{color:inherit; text-decoration:none;}
img{display:block; max-width:100%;}
::selection{background:var(--gold); color:#1c1402;}
:focus-visible{outline:3px solid rgba(0,212,216,.45); outline-offset:2px; border-radius:6px;}
.grad-rule{height:4px; background:var(--grad); border:0; margin:0;}

/* ---------- nav: white glass pill (the wicko menu) ---------- */
.nav{position:fixed; top:14px; left:50%; transform:translateX(-50%); z-index:100;
  width:calc(100% - 28px); max-width:1100px;
  background:rgba(255,255,255,.80);
  backdrop-filter:blur(18px) saturate(150%); -webkit-backdrop-filter:blur(18px) saturate(150%);
  border-radius:999px; border:1px solid rgba(24,18,41,.07);
  box-shadow:0 8px 28px -8px rgba(24,18,41,.16);
  transition:top .3s ease, background .3s ease, box-shadow .3s ease;}
.nav.is-scrolled{top:8px; background:rgba(255,255,255,.94);
  box-shadow:0 14px 40px -10px rgba(24,18,41,.22);}
.nav-in{display:flex; align-items:center; justify-content:space-between; height:58px; padding:0 9px 0 20px; gap:14px;}
.brand{display:flex; align-items:center; gap:11px; flex-shrink:0;}
.brand img.bi{width:32px; height:32px; filter:drop-shadow(0 4px 9px rgba(24,18,41,.16));
  transition:transform .3s cubic-bezier(.16,1,.3,1);}
.brand:hover img.bi{transform:scale(1.08) rotate(2deg);}
.brand img.bw{height:18px; width:auto;}
.nav-right{display:flex; align-items:center; gap:22px;}
.nav-links{display:flex; align-items:center; gap:24px;}
.nav-links a{font-weight:700; font-size:12.5px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--ink-soft); position:relative; padding:7px 0; transition:color .3s;}
.nav-links a::after{content:""; position:absolute; left:0; bottom:1px; width:0; height:2px;
  border-radius:1px; background:var(--green); transition:width .3s cubic-bezier(.16,1,.3,1);}
.nav-links a:hover{color:var(--ink);}
.nav-links a:hover::after{width:100%;}
.nav-links a.on{color:var(--ink);}
.nav-links a.on::after{width:100%;}
.nav .btn{padding:10px 19px; border-radius:999px; font-size:13.5px;}
.nav-toggle{display:none; background:none; border:none; cursor:pointer; padding:9px 11px;}
.nav-toggle span{display:block; width:21px; height:2px; background:var(--ink); margin:5px 0;
  border-radius:2px; transition:transform .3s, opacity .3s;}
.nav-toggle.x span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.nav-toggle.x span:nth-child(2){opacity:0;}
.nav-toggle.x span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}
.nav-panel{display:none; position:fixed; top:82px; left:50%; transform:translateX(-50%); z-index:99;
  width:calc(100% - 28px); max-width:1100px; background:rgba(255,255,255,.97);
  backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px);
  border:1px solid rgba(24,18,41,.07); border-radius:24px; padding:10px;
  box-shadow:0 24px 60px -18px rgba(24,18,41,.30);}
.nav-panel.open{display:block;}
.nav-panel a{display:block; padding:14px 18px; border-radius:15px; font-weight:800; font-size:14px;
  letter-spacing:.06em; text-transform:uppercase; color:var(--ink);}
.nav-panel a:hover{background:var(--paper-2);}
.nav-panel a.on{color:var(--green-deep); background:rgba(122,53,255,.06);}
@media(max-width:840px){ .nav-links{display:none;} .nav-toggle{display:block;} .nav-in{padding-left:16px;} }

/* ---------- buttons ---------- */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; font-family:"Manrope";
  font-weight:700; font-size:15px; padding:12px 21px; border-radius:12px; cursor:pointer;
  border:1px solid transparent; transition:transform .25s ease, box-shadow .25s ease, filter .25s ease;}
.btn-green{background-image:linear-gradient(180deg,var(--green-2),var(--green)); color:#F7F2E8;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14), 0 12px 24px -14px rgba(122,53,255,.75);}
.btn-green:hover{transform:translateY(-2px); filter:brightness(1.06);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16), 0 16px 32px -14px rgba(122,53,255,.85);}
.btn-gold{background-image:linear-gradient(180deg,#FFD06B,var(--gold)); color:#241A02;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35), 0 12px 24px -14px rgba(143,99,0,.65);}
.btn-gold:hover{transform:translateY(-2px); filter:brightness(1.04);}
.btn-ghost{background:transparent; color:var(--ink); border-color:var(--line);}
.btn-ghost:hover{transform:translateY(-2px); box-shadow:var(--sh-1); background:var(--paper);}
.btn-lg{font-size:16px; padding:15px 27px; border-radius:14px;}

/* ---------- shared layout ---------- */
.sec{padding:78px 0; border-top:1px solid var(--line-soft);}
.sec-tight{padding:58px 0;}
.sec-head{max-width:700px; margin:0 auto 46px; text-align:center;}
.kicker{display:inline-flex; align-items:center; gap:9px; font-weight:800; font-size:12.5px;
  letter-spacing:.11em; text-transform:uppercase; color:var(--accent-deep,var(--green)); margin-bottom:15px;}
.kicker .kdot{width:9px; height:9px; border-radius:3px; background:var(--accent,var(--green));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.4);}
.sec-h{font-size:clamp(28px,3.4vw,42px);}
.sec-sub{font-size:18px; color:var(--ink-soft); margin-top:16px;}

.card{background:var(--paper); border:1px solid var(--line); border-radius:var(--r-md);
  box-shadow:var(--sh-1); transition:transform .38s cubic-bezier(.2,.7,.2,1), box-shadow .38s ease;
  will-change:transform;}
.card:hover{transform:translateY(-6px); box-shadow:var(--sh-2);}
.chip-ic{width:44px; height:44px; border-radius:12px; display:flex; align-items:center; justify-content:center;
  font-size:21px; box-shadow:inset 0 1px 0 rgba(255,255,255,.35), 0 6px 14px -8px rgba(24,18,41,.4);}

.pill{display:inline-flex; align-items:center; gap:7px; font-weight:800; font-size:12px;
  letter-spacing:.03em; padding:5px 12px; border-radius:999px;}
.pill-live{color:var(--green-deep); background:rgba(122,53,255,.10); border:1px solid rgba(122,53,255,.22);}
.pill-live::before{content:""; width:7px; height:7px; border-radius:50%; background:#7A35FF;
  box-shadow:0 0 0 3px rgba(122,53,255,.18);}
.pill-now{color:var(--blue-deep); background:rgba(0,212,216,.10); border:1px solid rgba(0,212,216,.22);}
.pill-soon{color:var(--ink-soft); background:rgba(24,18,41,.06); border:1px solid var(--line);}

/* hero scaffold (still — no entrance animation, ever) */
.hero{position:relative; overflow:hidden; padding:62px 0 70px;}
.hero::before{content:""; position:absolute; top:-26%; right:-12%; width:62vw; max-width:680px; height:680px;
  background:
    radial-gradient(closest-side, var(--blob-a,rgba(255,194,71,.26)), transparent 70%),
    radial-gradient(closest-side, var(--blob-b,rgba(0,212,216,.18)), transparent 70%);
  background-position:32% 30%, 74% 72%; background-size:70% 70%, 62% 62%; background-repeat:no-repeat;
  filter:blur(32px); z-index:0; pointer-events:none;}
.hero::after{content:""; position:absolute; left:-14%; bottom:-32%; width:46vw; max-width:520px; height:520px;
  background:radial-gradient(closest-side, var(--blob-c,rgba(122,53,255,.14)), transparent 70%);
  filter:blur(38px); z-index:0; pointer-events:none;}
.hero .wrap{position:relative; z-index:1;}
.hero-grid{display:grid; grid-template-columns:1.04fr .96fr; gap:56px; align-items:center;}
.hero h1{font-size:clamp(35px,4.7vw,58px);}
.hero .lede{font-size:19px; color:var(--ink-soft); margin:20px 0 30px; max-width:36ch;}
.cta-row{display:flex; flex-wrap:wrap; gap:13px; align-items:center;}
.under{background-image:var(--grad); background-size:240% 5px;
  background-position-x:0%; background-position-y:100%; background-repeat:no-repeat;
  padding-bottom:4px; -webkit-box-decoration-break:clone; box-decoration-break:clone;}
@media(max-width:880px){ .hero-grid{grid-template-columns:1fr; gap:42px;} .hero .lede{max-width:50ch;} }

/* bands */
.band{padding:78px 0; position:relative; overflow:hidden;}
.band-green{background:linear-gradient(118deg,#3C0F96,#5C1ED9 34%,#7A35FF 58%,#B02BBF 86%,#E62456); color:#F0EAFF;}
.band-green h2{color:#fff;}
.band-gold{background:linear-gradient(168deg,#FFD06B,#FFB938); color:#241A02;}
.band-gold h2{color:#1C1402;}

/* footer */
.foot{background:#151026; color:#ACA3C6; padding:0 0 30px; margin-top:0;}
.foot-ribbon{height:5px; background:var(--grad);}
.foot-grid{display:flex; justify-content:space-between; gap:34px; flex-wrap:wrap; padding-top:54px;}
.foot .fb{display:flex; align-items:center; gap:11px;}
.foot .fb img.bi{width:30px; height:30px;}
.foot .fb img.bw{height:17px; width:auto;}
.foot-tag{font-size:14px; margin-top:14px; max-width:36ch; color:#8980A2; line-height:1.65;}
.foot-col h4{font-family:"Manrope"; font-weight:800; font-size:11.5px; letter-spacing:.1em;
  text-transform:uppercase; color:#786F93; margin:0 0 14px;}
.foot-col a{display:block; font-size:14px; margin-bottom:10px; color:#ACA3C6; font-weight:600;}
.foot-col a:hover{color:#fff;}
.foot-base{border-top:1px solid rgba(255,255,255,.08); margin-top:42px; padding-top:22px;
  display:flex; justify-content:space-between; gap:14px; flex-wrap:wrap; font-size:13px; color:#786F93;}

/* CTA section */
.cta{text-align:center; padding:88px 0;}
.cta h2{font-size:clamp(29px,3.7vw,44px); max-width:21ch; margin:0 auto;}
.cta p{font-size:18px; color:var(--ink-soft); margin:18px auto 30px; max-width:48ch;}

/* four cross-link */
.four-sec{padding:62px 0 86px; border-top:1px solid var(--line-soft);}
.four-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:14px;}
.qcard{display:block; padding:22px; border-radius:var(--r-md);}
.qcard .sq{width:30px; height:30px; border-radius:9px; display:block; margin-bottom:13px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35), 0 6px 14px -8px rgba(24,18,41,.4);}
.qcard h3{font-size:17px; margin-bottom:5px;}
.qcard p{font-size:13.5px; color:var(--ink-soft);}
.qcard .here-pill{display:inline-block; margin-top:11px; font-size:10.5px; font-weight:800;
  letter-spacing:.07em; text-transform:uppercase; background:rgba(255,255,255,.25);
  padding:4px 10px; border-radius:999px;}
.qcard.here p{color:rgba(255,255,255,.92);}
.qcard.here h3{color:#fff;}
@media(max-width:880px){ .four-grid{grid-template-columns:1fr 1fr;} }

/* ---------- the cream dissolve: real photos rising out of the canvas ---------- */
.hero-ph{min-height:540px; display:flex; align-items:center;}
.hero-ph .hero-grid{width:100%;}
.hero-photo{position:absolute; inset:0; z-index:0; pointer-events:none;}
.hero-photo img,.hero-photo video{position:absolute; right:0; top:0; height:100%; width:74%;
  object-fit:cover; object-position:var(--ph-pos,center);}
.hero-photo .wash{position:absolute; inset:0; background:var(--wash,transparent); mix-blend-mode:soft-light;}
.hero-photo .dissolve{position:absolute; inset:0;
  background:
    linear-gradient(92deg, var(--canvas) 0%, var(--canvas) 27%, rgba(247,242,232,.93) 41%,
      rgba(247,242,232,.55) 55%, rgba(247,242,232,.12) 74%, rgba(247,242,232,0) 100%),
    linear-gradient(180deg, var(--canvas) 0%, rgba(247,242,232,0) 24%,
      rgba(247,242,232,0) 72%, var(--canvas) 100%);}
.hero-ph .lede{max-width:42ch;}
.hero-ph h1{text-shadow:0 1px 0 rgba(247,242,232,.6);}
.hero-ph .hero-art{filter:drop-shadow(0 30px 56px rgba(24,18,41,.34));}
@media(max-width:880px){
  .hero-ph{min-height:0; padding-bottom:58vw;}
  .hero-photo img,.hero-photo video{width:100%; height:64vw; top:auto; bottom:0;}
  .hero-photo .dissolve{background:
    linear-gradient(180deg, var(--canvas) 0%, var(--canvas) calc(100% - 64vw),
      rgba(247,242,232,.92) calc(100% - 52vw), rgba(247,242,232,.35) calc(100% - 38vw),
      rgba(247,242,232,0) calc(100% - 20vw), rgba(247,242,232,0) calc(100% - 7vw), var(--canvas) 100%);}
}

/* snapshots — prints pinned to the paper, deliberately not hero-sized */
.snap{display:block; background:var(--paper); padding:11px 11px 13px; border:1px solid var(--line);
  border-radius:12px; box-shadow:var(--sh-2); transform:rotate(var(--tilt,-1.6deg)); margin:0;}
.snap img,.snap video{border-radius:7px; width:100%; height:auto; display:block;}
.snap figcaption{font-size:12.5px; font-weight:700; color:var(--ink-faint);
  padding:10px 4px 1px; text-align:center; letter-spacing:.015em;}
.snap-row{display:grid; grid-template-columns:1fr 1fr; gap:34px; align-items:center;}
@media(max-width:840px){ .snap-row{grid-template-columns:1fr; gap:30px;} .snap{max-width:440px; margin:0 auto;} }

/* film band — full-bleed motion that breathes back into the cream */
.film{position:relative; overflow:hidden; background:var(--canvas);}
.film video,.film img{display:block; width:100%; height:min(56vw,540px); object-fit:cover;}
.film .dissolve{position:absolute; inset:0; pointer-events:none;
  background:
    linear-gradient(180deg, var(--canvas) 0%, rgba(247,242,232,0) 24%, rgba(247,242,232,0) 76%, var(--canvas) 100%),
    linear-gradient(90deg, rgba(247,242,232,.55) 0%, rgba(247,242,232,0) 16%, rgba(247,242,232,0) 84%, rgba(247,242,232,.55) 100%);}
.film-cap{position:absolute; left:50%; bottom:30px; transform:translateX(-50%); z-index:2;
  background:rgba(255,253,247,.92); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  border:1px solid var(--line); border-radius:999px; padding:10px 20px;
  font-weight:800; font-size:13.5px; white-space:nowrap; max-width:calc(100% - 40px);
  overflow:hidden; text-overflow:ellipsis; box-shadow:var(--sh-1);}
.film-cap b{color:var(--accent-deep,var(--green-deep));}

/* vertical phone video — the way families will actually see it */
.phone-v{width:min(290px,74vw); border-radius:40px; border:10px solid #120D20;
  box-shadow:var(--sh-2),0 0 0 1px rgba(24,18,41,.2); overflow:hidden; background:#120D20;
  position:relative; margin:0 auto;}
.phone-v::before{content:""; position:absolute; top:10px; left:50%; transform:translateX(-50%);
  width:84px; height:22px; background:#120D20; border-radius:12px; z-index:2;}
.phone-v video{display:block; width:100%; height:auto;}

/* ---------- the paybar: Stripe rails, school skin ---------- */
.paybar{display:grid; grid-template-columns:1.15fr .85fr; gap:34px; align-items:center;
  background:var(--paper); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:32px 36px; box-shadow:var(--sh-1);}
.paybar h3{font-size:clamp(21px,2.4vw,26px); margin-bottom:10px;}
.paybar p{color:var(--ink-soft); font-size:16px;}
.paybar .stripe-note{margin-top:14px; font-size:12.5px; font-weight:800; letter-spacing:.04em;
  text-transform:uppercase; color:var(--ink-faint);}
.paymock{background:var(--canvas); border:1px solid var(--line); border-radius:var(--r-md);
  padding:20px 22px; max-width:340px; margin-left:auto; box-shadow:var(--sh-1);}
.paymock .pm-school{display:flex; align-items:center; gap:10px; font-weight:800; font-size:14.5px; padding-bottom:13px;
  border-bottom:1px solid var(--line-soft); margin-bottom:13px;}
.paymock .pm-crest{width:26px; height:26px; border-radius:8px; background:linear-gradient(150deg,#9156FF,#7A35FF);
  display:inline-flex; align-items:center; justify-content:center; color:#fff; font-size:13px;}
.paymock .pm-row{display:flex; justify-content:space-between; font-size:14px; color:var(--ink-soft); padding:4px 0;}
.paymock .pm-row b{color:var(--ink);}
.paymock .pm-btn{display:block; text-align:center; margin-top:14px; background:linear-gradient(165deg,#9156FF,#7A35FF);
  color:#fff; font-weight:800; font-size:14.5px; border-radius:11px; padding:12px;}
.paymock .pm-foot{text-align:center; font-size:11px; color:var(--ink-faint); margin-top:10px; letter-spacing:.03em;}
@media(max-width:840px){ .paybar{grid-template-columns:1fr; gap:24px;} .paymock{margin:0 auto;} }

/* ---------- the road-ahead marquee ---------- */
.marq-sec{padding:36px 0 10px;}
.marq-cap{text-align:center; font-size:12.5px; font-weight:800; letter-spacing:.15em;
  text-transform:uppercase; color:var(--ink-faint); margin:0 24px 26px;}
.marq{overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);}
.marq-track{display:flex; align-items:center; gap:78px; width:max-content; padding:6px 39px;}
.marq-track img{height:58px; width:auto; opacity:.6;}

/* ---------- quote cards ---------- */
.quotes{display:grid; grid-template-columns:repeat(3,1fr); gap:18px;}
.quote-card{background:var(--paper); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:28px 28px 26px; box-shadow:var(--sh-1); display:flex; flex-direction:column;}
.quote-card .qmark{font-family:var(--font-display); font-weight:700; font-size:52px; line-height:.6;
  background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent;
  display:block; margin:6px 0 16px;}
.quote-card > p{font-size:16.5px; font-weight:600; color:var(--ink); flex:1;}
.quote-who{display:flex; align-items:center; gap:12px; margin-top:20px;}
.quote-who img{width:44px; height:44px; border-radius:50%; object-fit:cover; border:2px solid var(--paper-2);}
.quote-who .qn{font-weight:800; font-size:14px; line-height:1.3;}
.quote-who .qr{font-size:12.5px; color:var(--ink-faint); font-weight:700;}
@media(max-width:840px){ .quotes{grid-template-columns:1fr;} }

/* ---------- motion: the prism breathes (one switch; reduced-motion safe) ---------- */
@keyframes prismShift{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
@keyframes blobDrift{0%,100%{transform:rotate(0deg) scale(1)}50%{transform:rotate(7deg) scale(1.05)}}
@keyframes underShiftX{0%,100%{background-position-x:0%}50%{background-position-x:100%}}
@keyframes marqSlide{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion: no-preference){
  .grad-rule{background-size:240% 100%; animation:prismShift 9s ease-in-out infinite;}
  .under{animation:underShiftX 9s ease-in-out infinite;}
  .hero::before{animation:blobDrift 28s ease-in-out infinite;}
  .hero::after{animation:blobDrift 34s ease-in-out infinite reverse;}
  .marq-track{animation:marqSlide 46s linear infinite;}
  .btn-green,.pm-btn{background-size:200% 200%; animation:prismShift 7s ease-in-out infinite;}
  .band-green{background-size:230% 230%; animation:prismShift 18s ease-in-out infinite;}
  .foot-ribbon,.hchip i{}
}

/* ---------- reveal (below the fold; reduced-motion safe) ---------- */
.reveal-on .rv{opacity:0; transform:translateY(22px);
  transition:opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1);}
.reveal-on .rv.in{opacity:1; transform:none;}
@media (prefers-reduced-motion:reduce){
  .reveal-on .rv{opacity:1 !important; transform:none !important; transition:none !important;}
}