/* =========================================================
   NUDGE — Design tokens (see build_assets/Nudge Design System.pdf)
   ========================================================= */
:root{
  /* --- color: light (default) --- */
  --bg:#F4EFE8;
  --paper:#FBF7F2;
  --surface:#FFFFFF;
  --ink:#211C3E;
  --text:#211C3E;
  --text-muted:#5B5578;
  --text-subtle:#8A85A0;
  --text-faint:#A8A2B8;
  --border:#E8E1D6;
  --border-strong:#E3DACC;
  --border-dash:#C9BEAC;

  --coral:#FF7A29;
  --coral-dark:#E0641A;
  --coral-ink:#211C3E;
  --teal:#29C7AC;
  --teal-dark:#158C77;
  --teal-tint:#8FE0CE;
  --sun:#FFC857;
  --sun-dark:#946200;
  --sun-ink:#A5651B;
  --danger:#DC4A3D;
  --danger-strong:#D9553E;

  /* --- color: dark surfaces (used for inverted cards/sections) --- */
  --dark-bg:#17142B;
  --dark-surface:#211C3E;
  --dark-raised:#2A2450;
  --dark-text:#FBF7F2;
  --dark-text-muted:rgba(251,247,242,.7);
  --dark-text-faint:rgba(251,247,242,.45);
  --dark-border:#2E2852;
  --dark-accent:#FF7A29;
  --dark-danger:#F07167;

  /* --- type --- */
  --font-display:'Baloo 2', system-ui, sans-serif;
  --font-body:'Inter', system-ui, sans-serif;
  --font-mono:'JetBrains Mono', 'SFMono-Regular', monospace;

  /* --- spacing (4px base / 8px rhythm) --- */
  --sp-1:4px;
  --sp-2:8px;
  --sp-3:12px;
  --sp-4:16px;
  --sp-6:24px;
  --sp-8:32px;
  --sp-12:48px;
  --sp-16:64px;
  --sp-20:80px;

  /* --- radius --- */
  --r-sm:8px;
  --r-md:12px;
  --r-lg:16px;
  --r-xl:24px;
  --r-2xl:36px;
  --r-pill:100px;

  /* --- elevation --- */
  --shadow-raised:0 2px 10px rgba(33,28,62,.06);
  --shadow-floating:0 24px 60px rgba(33,28,62,.28);
  --shadow-floating-sm:0 16px 40px rgba(33,28,62,.22);
  --shadow-overlay:0 40px 90px rgba(0,0,0,.38);
  --shadow-btn:0 6px 0 rgba(33,28,62,.28);
  --shadow-btn-press:0 2px 0 rgba(33,28,62,.28);

  /* --- motion --- */
  --ease:cubic-bezier(.4,0,.2,1);
  --ease-out-back:cubic-bezier(.34,1.56,.64,1);
  --dur-micro:120ms;
  --dur-standard:180ms;
  --dur-entrance:280ms;
  --dur-max:320ms;

  --container:1180px;
  --container-wide:1280px;
}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
}

/* =========================================================
   Reset
   ========================================================= */
*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,svg{display:block;max-width:100%;}
a{color:var(--coral);text-decoration:none;}
a:hover{color:var(--coral-dark);}
button{font:inherit;}
h1,h2,h3,h4,p{margin:0;}
ul{margin:0;padding:0;list-style:none;}
.visually-hidden{
  position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}
::selection{background:var(--coral);color:#fff;}

/* =========================================================
   Layout helpers
   ========================================================= */
.page{
  max-width:1400px;
  margin:0 auto;
  padding:16px;
}
@media(min-width:640px){.page{padding:20px;}}
.container{
  max-width:var(--container);
  margin:0 auto;
  padding:0 20px;
}
.container-wide{
  max-width:var(--container-wide);
  margin:0 auto;
  padding:0 20px;
}
.section{padding:0 0 100px;}
.section-inner{max-width:var(--container);margin:0 auto;padding:0 20px;}
.eyebrow{
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:1.5px;
  color:var(--coral);
  margin-bottom:14px;
  text-transform:uppercase;
}
.eyebrow--dark{color:var(--sun);}

/* =========================================================
   Type scale
   ========================================================= */
.h-display{
  font-family:var(--font-display);
  font-weight:800;
  font-size:clamp(2.75rem, 2.1rem + 3vw, 5.25rem);
  line-height:1.0;
  letter-spacing:-.03em;
  margin:0 0 26px;
}
.h-section{
  font-family:var(--font-display);
  font-weight:800;
  font-size:clamp(2.1rem, 1.6rem + 2vw, 3.25rem);
  line-height:1.06;
  letter-spacing:-.03em;
  margin:0 0 14px;
}
.h-card{
  font-family:var(--font-display);
  font-weight:800;
  font-size:1.625rem;
  line-height:1.15;
  margin:0 0 10px;
}
.h-title{
  font-family:var(--font-display);
  font-weight:700;
  font-size:1.25rem;
  margin:0 0 8px;
}
.lede{
  font-size:16px;
  color:var(--text-muted);
  line-height:1.65;
}
.mono{font-family:var(--font-mono);}

/* =========================================================
   Logo mark
   ========================================================= */
/* Every mark on the page — nav, divider, brand-icon, footer, and the ambient
   background watermarks — is a plain <img> pointing at assets/img/logos/*.svg.
   Swap the mark anywhere by changing that one `src`; no path data lives in
   this file or in the markup. Pick the file whose baked-in keyline color
   matches (or is absent from) the surface it sits on:
     nudge-mark.svg                     ink + coral, paper keyline — paper bg
     nudge-mark-flat.svg                ink + coral, no keyline — small sizes
     nudge-mark-mono-ink.svg            ink, paper keyline — light/tinted bg
     nudge-mark-mono-paper.svg          paper, ink keyline — dark navy bg
     nudge-mark-mono-paper-on-orange.svg paper, coral keyline — coral bg
     nudge-mark-on-dark.svg             paper + coral, ink keyline — dark bg */
.logo-mark{width:36px;height:36px;flex-shrink:0;}

/* =========================================================
   Buttons
   ========================================================= */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  font-family:var(--font-display);
  font-weight:700;
  border-radius:var(--r-pill);
  border:none;
  cursor:pointer;
  white-space:nowrap;
  transition:transform var(--dur-micro) var(--ease), box-shadow var(--dur-micro) var(--ease), background-color var(--dur-standard) var(--ease);
  min-height:44px;
  will-change:transform;
}
.btn--lg{font-size:18px;padding:18px 40px;}
.btn--md{font-size:15px;padding:13px 28px;}
.btn--sm{font-size:13px;padding:10px 20px;}

.btn--sun{
  background:var(--sun);
  color:var(--coral-ink);
  box-shadow:var(--shadow-btn);
}
.btn--sun:hover{transform:translateY(-2px);}
.btn--sun:active{transform:translateY(2px);box-shadow:var(--shadow-btn-press);}

.btn--paper{
  background:var(--paper);
  color:var(--coral-ink);
  box-shadow:var(--shadow-btn);
}
.btn--paper:hover{transform:translateY(-2px);}
.btn--paper:active{transform:translateY(2px);box-shadow:var(--shadow-btn-press);}

.btn--coral{
  background:var(--coral);
  color:#fff;
  box-shadow:0 6px 0 rgba(224,100,26,.55);
}
.btn--coral:hover{background:var(--coral-dark);transform:translateY(-2px);}
.btn--coral:active{transform:translateY(2px);box-shadow:0 2px 0 rgba(224,100,26,.55);}

.btn--ghost-dark{
  background:transparent;
  color:var(--dark-text);
  border:1.5px solid rgba(251,247,242,.3);
}
.btn--ghost-dark:hover{border-color:rgba(251,247,242,.6);}

/* =========================================================
   NAV
   ========================================================= */
.nav{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:clamp(32px,6vw,64px);
  z-index:5;
}
.nav__brand{display:flex;align-items:center;gap:12px;color:var(--paper);}
.nav__wordmark{font-family:var(--font-display);font-weight:800;font-size:22px;color:var(--paper);}
.nav__actions{display:flex;align-items:center;gap:22px;}
.nav__links{display:flex;align-items:center;gap:28px;}
/* language switcher — nav variant, tuned for the coral hero backdrop */
.lang-toggle--nav{background:rgba(24,20,46,.62);border-color:rgba(251,247,242,.32);}
.lang-toggle--nav .lang-toggle__opt{color:#FBF7F2;padding:5px 10px;}
.lang-toggle--nav .lang-toggle__opt:hover{color:#fff;}
.lang-toggle--nav .lang-toggle__opt.is-active{background:var(--paper);color:var(--ink);}
.nav__link{
  font-family:var(--font-display);
  font-weight:700;
  font-size:15px;
  color:rgba(251,247,242,.9);
  transition:color var(--dur-standard) var(--ease);
}
.nav__link:hover{color:#fff;}
.nav__toggle{
  position:relative;
  display:none;
  width:44px;height:44px;
  border:none;background:rgba(251,247,242,.14);
  border-radius:var(--r-pill);
  align-items:center;justify-content:center;
  cursor:pointer;
  flex-shrink:0;
}
.nav__toggle span, .nav__toggle::before, .nav__toggle::after{
  content:'';
  position:absolute;
  left:50%;top:50%;
  width:18px;height:2px;
  background:var(--paper);
  border-radius:2px;
  transition:transform var(--dur-standard) var(--ease), opacity var(--dur-standard) var(--ease);
}
.nav__toggle span{transform:translate(-50%,-50%);}
.nav__toggle::before{transform:translate(-50%,calc(-50% - 6px));}
.nav__toggle::after{transform:translate(-50%,calc(-50% + 6px));}
.nav__toggle[aria-expanded="true"] span{opacity:0;}
.nav__toggle[aria-expanded="true"]::before{transform:translate(-50%,-50%) rotate(45deg);}
.nav__toggle[aria-expanded="true"]::after{transform:translate(-50%,-50%) rotate(-45deg);}

/* =========================================================
   HERO
   ========================================================= */
.hero{
  position:relative;
  background:var(--coral);
  border-radius:var(--r-2xl);
  overflow:hidden;
  padding:20px 20px 80px;
  isolation:isolate;
}
@media(min-width:640px){
  .hero{padding:32px 40px 90px;}
}
@media(min-width:1024px){
  .hero{padding:40px 56px 96px;}
}
.hero__squiggle{
  position:absolute;inset:0;width:100%;height:100%;
  pointer-events:none;
  z-index:0;
}
.squiggle-path{
  stroke-dasharray:2600;
  stroke-dashoffset:2600;
  animation:draw-squiggle 1.8s var(--ease) .2s forwards;
}
@keyframes draw-squiggle{to{stroke-dashoffset:0;}}
.hero__glow{
  position:absolute;left:50%;top:46%;transform:translate(-50%,-50%);
  width:130%;max-width:900px;aspect-ratio:900/620;
  border-radius:100%;
  background:radial-gradient(closest-side,rgba(255,122,41,.92),rgba(255,122,41,.55) 62%,rgba(255,122,41,0) 100%);
  pointer-events:none;
  z-index:0;
}
.hero__mark-bl, .hero__mark-tr{
  position:absolute;pointer-events:none;z-index:0;
}
.hero__mark-bl{bottom:-70px;left:-60px;width:240px;height:240px;opacity:.16;}
.hero__mark-tr{top:-50px;right:-70px;width:220px;height:220px;opacity:.12;transform:rotate(-24deg);}

.hero__content{
  position:relative;z-index:1;
  text-align:center;
  max-width:760px;
  margin:0 auto;
  padding:24px 0 0;
}
.hero__eyebrow{
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:1.5px;
  color:var(--sun);
  text-transform:uppercase;
  margin-bottom:16px;
}
.hero__title{color:var(--paper);}
.hero__title .accent{
  display:inline-block;
  background:var(--ink);
  color:var(--paper);
  border-radius:20px;
  padding:0 22px 4px;
  transform:rotate(-2deg);
}
.hero__pt{
  font-family:var(--font-display);
  font-weight:700;
  font-size:clamp(1.1rem,.9rem + 1vw,1.5rem);
  color:var(--ink);
  margin-bottom:18px;
}
.hero__desc{
  font-size:17px;
  line-height:1.6;
  color:rgba(251,247,242,.94);
  max-width:460px;
  margin:0 auto 34px;
}
/* Two hero descriptions: the fuller one for desktop, a concise one for mobile.
   Swapped by breakpoint below so each surface gets copy sized for it. */
.hero__desc--mobile{display:none;}

/* floating cards */
.hero__float{
  position:absolute;
  z-index:2;
  box-sizing:border-box;
  animation:float-bob 6s ease-in-out infinite;
  translate:var(--px,0px) var(--py,0px);
  transition:translate 320ms var(--ease);
}
@keyframes float-bob{
  0%,100%{transform:var(--rot,rotate(0)) translateY(0);}
  50%{transform:var(--rot,rotate(0)) translateY(-8px);}
}
.hero__float--schedule{
  top:120px;left:18px;width:272px;
  background:var(--paper);border-radius:var(--r-lg);padding:16px;
  box-shadow:var(--shadow-floating);
  --rot:rotate(-5deg);
  animation-delay:.2s;
}
.hero__float--live{
  top:148px;right:18px;width:240px;
  background:var(--ink);border-radius:var(--r-lg);padding:16px;
  box-shadow:0 24px 60px rgba(33,28,62,.4);
  --rot:rotate(4deg);
  animation-delay:.9s;
}
.hero__float--streak{
  bottom:56px;left:32px;
  display:flex;align-items:center;gap:9px;
  background:var(--paper);border-radius:var(--r-pill);
  padding:9px 16px 9px 10px;
  box-shadow:var(--shadow-floating-sm);
  --rot:rotate(-3deg);
  animation-delay:1.4s;
}
.hero__float--qr{
  bottom:36px;right:28px;width:148px;
  background:var(--surface);border-radius:var(--r-lg);padding:12px;text-align:center;
  box-shadow:0 18px 44px rgba(33,28,62,.3);
  --rot:rotate(3deg);
  animation-delay:.55s;
}

.float-card__head{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;margin-bottom:14px;}
.float-card__title{font-family:var(--font-display);font-weight:800;font-size:14px;line-height:1.3;color:var(--ink);}
.float-card__sub{font-size:10.5px;line-height:1.4;color:var(--text-subtle);margin-top:2px;}
.float-card__badge{
  font-family:var(--font-display);font-weight:700;font-size:9.5px;color:#fff;
  background:var(--coral);border-radius:var(--r-pill);padding:5px 10px;white-space:nowrap;
}
.float-card__label{font-family:var(--font-mono);font-size:8px;letter-spacing:1px;color:var(--text-faint);margin-bottom:8px;}
.float-card__body{background:var(--surface);border-radius:11px;padding:12px;display:flex;flex-direction:column;gap:8px;}
.float-bar{display:flex;align-items:center;gap:8px;}
.float-bar__label{font-size:10px;font-weight:600;color:var(--ink);width:60px;}
.float-bar__track{flex:1;height:5px;background:#EFE8DD;border-radius:var(--r-pill);overflow:hidden;}
.float-bar__fill{height:100%;background:var(--teal);border-radius:var(--r-pill);transform-origin:left;animation:fill-in 1.1s var(--ease-out-back) both;animation-delay:.4s;}
@keyframes fill-in{from{transform:scaleX(0);}to{transform:scaleX(1);}}
.float-bar__val{font-family:var(--font-mono);font-size:8.5px;color:var(--text-subtle);}

.live-card__head{display:flex;align-items:center;justify-content:space-between;margin-bottom:13px;}
.live-card__title{font-family:var(--font-display);font-weight:700;font-size:12.5px;color:var(--dark-text);}
.live-card__tag{display:flex;align-items:center;gap:5px;font-family:var(--font-mono);font-size:8.5px;color:var(--teal);}
.live-dot{width:6px;height:6px;border-radius:var(--r-pill);background:var(--teal);animation:pulse-dot 1.6s ease-in-out infinite;}
@keyframes pulse-dot{0%,100%{opacity:1;}50%{opacity:.35;}}
.live-row{display:flex;align-items:center;gap:8px;padding:6px 9px;border-radius:9px;}
.live-row--lead{background:rgba(255,200,87,.16);}
.live-row__rank{font-family:var(--font-mono);font-size:9px;color:rgba(251,247,242,.4);width:8px;}
.live-row--lead .live-row__rank{color:var(--sun);}
.live-row__avatar{width:19px;height:19px;border-radius:var(--r-pill);color:#fff;font-family:var(--font-display);font-weight:700;font-size:9px;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.live-row__name{font-size:10.5px;font-weight:600;color:rgba(251,247,242,.85);flex:1;}
.live-row--lead .live-row__name{color:var(--dark-text);}
.live-row__score{font-family:var(--font-mono);font-size:9.5px;color:rgba(251,247,242,.55);}
.live-row--lead .live-row__score{color:var(--sun);}

.streak-badge__num{
  width:26px;height:26px;border-radius:var(--r-pill);background:var(--sun);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-display);font-weight:800;font-size:13px;color:var(--ink);
}
.streak-badge__label{font-family:var(--font-display);font-weight:700;font-size:13px;color:var(--ink);}

.qr-card__box{
  width:92px;height:92px;margin:0 auto 10px;background:var(--ink);border-radius:7px;padding:6px;
}
.qr-card__pattern{
  width:100%;height:100%;background-color:var(--paper);
  background-image:
    linear-gradient(90deg,var(--ink) 22%,transparent 22% 44%,var(--ink) 44% 56%,transparent 56% 78%,var(--ink) 78%),
    linear-gradient(var(--ink) 16%,transparent 16% 38%,var(--ink) 38% 52%,transparent 52% 74%,var(--ink) 74%);
  background-size:15px 15px;
}
.qr-card__text{font-size:10px;font-weight:600;line-height:1.35;color:var(--ink);}
.qr-card__code{font-family:var(--font-mono);font-size:10px;font-weight:600;color:var(--coral);margin-top:4px;}

/* =========================================================
   Domino divider
   ========================================================= */
.divider{
  display:flex;justify-content:center;align-items:center;gap:22px;
  padding:64px 0 0;
}
.divider__mark{width:34px;height:34px;}
.divider__mark:nth-child(1){transform:rotate(-14deg);opacity:.85;}
.divider__mark:nth-child(2){transform:rotate(6deg);opacity:.6;}
.divider__mark:nth-child(3){transform:rotate(-4deg);opacity:.35;}

/* =========================================================
   PROBLEM
   ========================================================= */
.problem{
  padding:64px 20px 100px;
  max-width:var(--container);
  margin:0 auto;
  display:grid;
  grid-template-columns:1fr 1.1fr;
  gap:64px;
  align-items:center;
}
.problem__desc{font-size:16px;color:var(--text-muted);line-height:1.65;max-width:340px;}
.problem__card{
  background:var(--surface);border:2px solid var(--ink);border-radius:var(--r-xl);
  padding:clamp(22px,4vw,36px);
  box-shadow:8px 8px 0 var(--ink);
  transform:rotate(-1deg);
}
.problem__item{
  display:flex;align-items:flex-start;gap:16px;padding:16px 0;
  border-bottom:1.5px dashed var(--border);
}
.problem__item:first-child{padding-top:2px;}
.problem__check{
  width:28px;height:28px;border-radius:9px;background:var(--coral);
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
.problem__item-title{font-family:var(--font-display);font-weight:700;font-size:19px;line-height:1.3;}
.problem__item-sub{font-size:13.5px;color:var(--text-muted);margin-top:4px;}
.problem__final{display:flex;align-items:center;gap:16px;padding:18px 0 2px;}
.problem__final-icon{
  width:28px;height:28px;border-radius:9px;background:var(--ink);
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
  font-family:var(--font-display);font-weight:800;color:var(--sun);font-size:15px;
}
.problem__final-text{font-family:var(--font-display);font-weight:800;font-size:17px;color:var(--coral);}

/* =========================================================
   OVERVIEW (what is nudge)
   ========================================================= */
.overview{max-width:var(--container-wide);margin:0 auto;padding:0 20px 100px;}
.overview__lead{
  font-family:var(--font-display);font-weight:700;font-size:clamp(1.35rem,1.1rem + 1vw,1.65rem);
  line-height:1.45;letter-spacing:-.01em;max-width:820px;margin:0 0 52px;
}
.overview__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}
.feature-card{
  background:var(--surface);border:2px solid var(--ink);border-radius:var(--r-xl);
  padding:30px;box-shadow:8px 8px 0 var(--shadow-color,rgba(255,122,41,.9));
  transition:transform var(--dur-standard) var(--ease), box-shadow var(--dur-standard) var(--ease);
}
.feature-card:hover{transform:translate(-4px,-4px);box-shadow:12px 12px 0 var(--shadow-color,rgba(255,122,41,.9));}
.feature-card__icon{
  width:52px;height:52px;border-radius:var(--r-lg);background:var(--icon-bg,var(--coral));
  display:flex;align-items:center;justify-content:center;margin-bottom:20px;
}
.feature-card__desc{font-size:14.5px;color:var(--text-muted);line-height:1.6;}

/* =========================================================
   Generic card badge pill (used across sections)
   ========================================================= */
.pill-tag{
  display:inline-block;align-self:flex-start;
  font-family:var(--font-display);font-weight:700;font-size:11px;
  padding:5px 12px;border-radius:var(--r-pill);margin-bottom:18px;
}

/* =========================================================
   TEACHERS
   ========================================================= */
.teachers{max-width:var(--container-wide);margin:0 auto;padding:0 20px 100px;}
.teachers__head{margin-bottom:44px;max-width:620px;}
.teachers__grid{display:grid;grid-template-columns:1fr 1fr;gap:22px;}
.t-card{border-radius:var(--r-xl);padding:30px;display:flex;flex-direction:column;justify-content:space-between;}
.t-card--dark{background:var(--dark-surface);color:var(--dark-text);}
.t-card--white{background:var(--surface);border:2px solid var(--ink);box-shadow:8px 8px 0 var(--shadow-color,rgba(255,122,41,.9));}
.t-card--coral{background:var(--coral);color:#fff;}
.t-card__title{font-family:var(--font-display);font-weight:800;font-size:26px;line-height:1.15;margin-bottom:10px;}
.t-card__desc{font-size:14.5px;line-height:1.6;}
.t-card--dark .t-card__desc{color:rgba(251,247,242,.7);}
.t-card--white .t-card__desc{color:var(--text-muted);}
.t-card--coral .t-card__desc{color:rgba(255,255,255,.88);}

/* live play panel */
.livepanel{background:var(--dark-raised);border-radius:var(--r-lg);padding:20px;margin-top:24px;}
.livepanel__head{display:flex;justify-content:space-between;margin-bottom:14px;flex-wrap:wrap;gap:6px;}
.livepanel__label{font-family:var(--font-mono);font-size:10px;color:rgba(251,247,242,.5);}
.livepanel__live{display:flex;align-items:center;gap:6px;font-family:var(--font-mono);font-size:10px;color:var(--teal);}
.lp-row{display:flex;align-items:center;gap:10px;border-radius:10px;padding:8px 12px;}
.lp-row--lead{background:rgba(255,200,87,.14);}
.lp-row__rank{font-family:var(--font-display);font-weight:800;font-size:13px;color:rgba(251,247,242,.4);width:16px;}
.lp-row--lead .lp-row__rank{color:var(--sun);}
.lp-row__avatar{width:22px;height:22px;border-radius:var(--r-pill);color:#fff;font-family:var(--font-display);font-weight:700;font-size:10px;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.lp-row__name{font-size:12.5px;font-weight:600;flex:1;color:rgba(251,247,242,.85);}
.lp-row--lead .lp-row__name{color:var(--dark-text);}
.lp-row__score{font-family:var(--font-mono);font-size:11px;color:rgba(251,247,242,.6);}
.lp-row--lead .lp-row__score{color:var(--sun);}
.lp-row__delta{font-family:var(--font-mono);font-size:9px;}
.lp-row__delta--up{color:var(--teal);}
.lp-row__delta--down{color:var(--dark-danger);}

/* heatmap panel */
.heatpanel{background:var(--paper);border:1px solid var(--border);border-radius:var(--r-lg);padding:20px;margin-top:24px;}
.heatpanel__head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:14px;flex-wrap:wrap;gap:6px;}
.heatpanel__label{font-family:var(--font-mono);font-size:9.5px;letter-spacing:1px;color:var(--text-subtle);}
.heatpanel__delta{font-family:var(--font-mono);font-size:10px;color:var(--teal-dark);}
.heatmap{display:flex;flex-direction:column;gap:4px;overflow-x:auto;}
.heatmap__row{display:grid;grid-template-columns:64px repeat(7,minmax(24px,1fr));gap:4px;align-items:center;}
.heatmap__col-label{font-family:var(--font-mono);font-size:8.5px;color:var(--text-faint);text-align:center;}
.heatmap__name{font-size:11px;font-weight:500;color:var(--ink);white-space:nowrap;}
.heatmap__cell{
  border-radius:5px;padding:5px 0;text-align:center;font-family:var(--font-mono);font-size:9px;color:var(--ink);
}
.heatpanel__alert{
  display:flex;align-items:center;gap:8px;margin-top:16px;background:rgba(255,200,87,.2);
  border-radius:10px;padding:9px 12px;
}
.heatpanel__alert-icon{
  width:20px;height:20px;border-radius:var(--r-pill);background:#E9A200;color:#fff;
  font-family:var(--font-display);font-weight:800;font-size:12px;display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
.heatpanel__alert-text{font-size:12px;line-height:1.4;color:var(--sun-dark);font-weight:600;}

/* classes & control */
.classpanel{background:var(--paper);border:1px solid var(--border);border-radius:var(--r-lg);padding:20px;}
.classpanel__label{font-family:var(--font-mono);font-size:9.5px;letter-spacing:1px;color:var(--text-subtle);margin-bottom:12px;}
.classpanel__form{display:flex;gap:8px;align-items:flex-end;margin-bottom:16px;flex-wrap:wrap;}
.field{flex:1;min-width:110px;}
.field--wide{flex:1.4;min-width:140px;}
.field__label{font-size:10.5px;font-weight:600;color:var(--text-muted);margin-bottom:5px;}
.field__control{
  background:var(--surface);border:1.5px solid var(--border-strong);border-radius:var(--r-md);
  padding:9px 12px;font-size:12px;color:var(--text-faint);
  display:flex;justify-content:space-between;align-items:center;gap:6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.field__control--filled{color:var(--ink);}
.classpanel__row{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-md);padding:14px;}
.classpanel__row-head{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:12px;flex-wrap:wrap;}
.classpanel__row-title{font-family:var(--font-display);font-weight:700;font-size:14px;color:var(--ink);}
.chip-btn{font-size:10.5px;font-weight:600;color:var(--text-muted);border:1px solid var(--border-strong);border-radius:var(--r-pill);padding:5px 12px;background:none;cursor:pointer;transition:background var(--dur-micro) var(--ease);}
.chip-btn:hover{background:var(--bg);}
.chip-btn--danger{color:var(--danger-strong);border-color:rgba(217,85,62,.35);}
.classpanel__meta{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;}
.classpanel__code{font-size:11px;color:var(--text-subtle);}
.avatar-stack{display:flex;}
.avatar-stack__dot{width:20px;height:20px;border-radius:var(--r-pill);border:2px solid var(--surface);margin-left:-7px;}
.avatar-stack__dot:first-child{margin-left:0;}
.avatar-stack__dot--count{background:var(--border);font-family:var(--font-mono);font-size:8px;color:var(--text-subtle);display:flex;align-items:center;justify-content:center;}

/* lesson builder */
.builder-panel{background:var(--paper);border-radius:var(--r-lg);padding:20px;margin-top:24px;color:var(--ink);}
.builder-panel__head{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:12px;flex-wrap:wrap;}
.builder-panel__title{font-family:var(--font-display);font-weight:700;font-size:13px;}
.builder-panel__meta{font-family:var(--font-mono);font-size:9px;color:var(--text-subtle);white-space:nowrap;}
.builder-cols{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:14px;}
.builder-col__label{font-family:var(--font-mono);font-size:8.5px;letter-spacing:.5px;color:var(--text-faint);margin-bottom:6px;}
.builder-col__box{background:var(--surface);border:1px solid var(--border);border-radius:11px;padding:9px;display:flex;flex-direction:column;gap:8px;}
.builder-item{display:flex;align-items:center;gap:7px;}
.builder-item__icon{width:20px;height:20px;border-radius:6px;background:var(--ink);color:#fff;font-family:var(--font-display);font-weight:700;font-size:8px;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.builder-item__body{flex:1;min-width:0;}
.builder-item__name{font-size:10px;font-weight:600;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.builder-item__meta{font-size:8.5px;color:var(--text-faint);}
.builder-item__add{font-size:9px;font-weight:700;color:var(--text-muted);border:1px solid var(--border-strong);border-radius:var(--r-pill);padding:3px 8px;}
.builder-item__num{font-family:var(--font-mono);font-size:8.5px;color:var(--text-faint);}
.builder-actions{display:flex;flex-direction:column;gap:7px;}
.builder-actions .btn{width:100%;padding:11px;font-size:12.5px;}

/* =========================================================
   TOOLS MARQUEE
   ========================================================= */
.marquee{
  position:relative;box-sizing:border-box;overflow:hidden;
  border-top:2px solid var(--ink);border-bottom:2px solid var(--ink);
  background:var(--paper);padding:16px 0;margin-bottom:64px;
}
.marquee__track{
  display:flex;width:max-content;
  animation:marquee-scroll 34s linear infinite;
}
.marquee:hover .marquee__track{animation-play-state:paused;}
@keyframes marquee-scroll{from{transform:translateX(0);}to{transform:translateX(-50%);}}
.marquee__item{
  font-family:var(--font-display);font-weight:800;font-size:clamp(1.1rem,1rem + .6vw,1.5rem);
  letter-spacing:-.01em;color:var(--ink);white-space:nowrap;padding:0 22px;
}
.marquee__item--muted{color:var(--text-subtle);}
.marquee__star{color:var(--coral);padding:0;}
.marquee__fade{
  position:absolute;top:0;right:0;height:100%;width:120px;
  background:linear-gradient(90deg,rgba(251,247,242,0),var(--paper) 65%);
  pointer-events:none;
}
.marquee__fade--left{right:auto;left:0;background:linear-gradient(270deg,rgba(251,247,242,0),var(--paper) 65%);}

/* =========================================================
   TOOLS GRID (bento)
   ========================================================= */
.tools{max-width:var(--container-wide);margin:0 auto;padding:0 20px 100px;}
.tools__head{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:44px;flex-wrap:wrap;gap:16px;}
.tools__flag{
  font-family:var(--font-display);font-weight:700;font-size:15px;color:var(--ink);
  background:var(--sun);border-radius:var(--r-pill);padding:10px 20px;transform:rotate(2deg);
  white-space:nowrap;
}
.bento{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;align-items:stretch;}
.bento__item{border-radius:var(--r-xl);display:flex;flex-direction:column;}
.bento__item--span2{grid-column:span 2;}
.bento__item--dark{background:var(--dark-surface);color:var(--dark-text);padding:30px;gap:26px;}
.bento__item--white{background:var(--surface);border:2px solid var(--ink);padding:24px;}
.bento__item--white-shadow{box-shadow:8px 8px 0 var(--shadow-color,rgba(41,199,172,.9));}
.bento__item--coral{background:var(--coral);color:#fff;padding:28px;}
.bento__item--dashed{background:var(--paper);border:2px dashed var(--border-dash);padding:26px 28px;justify-content:center;gap:16px;}

.bento-tool__eyebrow{
  display:inline-block;align-self:flex-start;font-family:var(--font-display);font-weight:700;font-size:11px;
  padding:5px 12px;border-radius:var(--r-pill);margin-bottom:14px;
}
.bento-tool__name{font-family:var(--font-display);font-weight:800;font-size:19px;margin-bottom:6px;}
.bento-tool__desc{font-size:13px;color:var(--text-muted);line-height:1.5;}

/* phrasalflow big card */
.pf-steps{display:flex;align-items:center;gap:10px;margin-top:22px;padding-top:20px;border-top:1px solid rgba(251,247,242,.12);}
.pf-step{display:flex;align-items:center;gap:7px;}
.pf-step__num{width:20px;height:20px;border-radius:var(--r-pill);color:#fff;font-family:var(--font-display);font-weight:700;font-size:10px;display:flex;align-items:center;justify-content:center;}
.pf-step__num--active{background:var(--coral);}
.pf-step__num--inactive{background:rgba(251,247,242,.1);color:rgba(251,247,242,.5);}
.pf-step__label{font-size:11px;font-weight:600;}
.pf-step__label--active{color:var(--dark-text);}
.pf-step__label--inactive{color:rgba(251,247,242,.5);}
.pf-step__line{flex:1;height:1px;background:rgba(251,247,242,.14);}
.pf-meta{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:16px;flex-wrap:wrap;}
.pf-meta__day{font-family:var(--font-mono);font-size:9.5px;color:rgba(251,247,242,.45);}
.pf-meta__streak{display:flex;align-items:center;gap:6px;font-family:var(--font-mono);font-size:9.5px;color:var(--sun);}
.pf-explorer{background:var(--dark-raised);border-radius:var(--r-lg);padding:22px;}
.pf-explorer__head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:14px;flex-wrap:wrap;gap:6px;}
.pf-explorer__label{font-family:var(--font-mono);font-size:10px;color:rgba(251,247,242,.45);}
.pf-explorer__count{font-family:var(--font-mono);font-size:10px;color:rgba(251,247,242,.3);}
.pf-chips{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:16px;}
.pf-chip{
  font-family:var(--font-display);font-weight:700;font-size:11.5px;border-radius:8px;padding:6px 13px;
  border:1.5px solid var(--c,var(--sun));color:var(--c,var(--sun));
  transition:background var(--dur-standard) var(--ease), color var(--dur-standard) var(--ease);
  cursor:default;
}
.pf-chip:hover{background:var(--c,var(--sun));color:var(--dark-surface);}
.pf-cards{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.pf-card{background:var(--dark-surface);border-left:3px solid var(--c,var(--sun));border-radius:10px;padding:12px 14px;}
.pf-card__word{font-family:var(--font-display);font-weight:800;font-size:15px;margin-bottom:5px;}
.pf-card__def{font-size:11px;line-height:1.45;color:rgba(251,247,242,.6);margin-bottom:9px;}
.pf-card__tags{display:flex;gap:5px;flex-wrap:wrap;}
.pf-card__tag{font-family:var(--font-mono);font-size:8px;border-radius:5px;padding:3px 7px;}

/* phonetics card */
.pn-panel{flex:1;background:var(--paper);border:1px solid var(--border);border-radius:14px;padding:16px;margin-top:18px;}
.pn-panel__head{display:flex;justify-content:space-between;font-family:var(--font-mono);font-size:8.5px;color:var(--text-faint);margin-bottom:10px;}
.pn-panel__word{font-family:var(--font-display);font-weight:800;font-size:20px;letter-spacing:1px;text-align:center;color:var(--ink);margin-bottom:3px;}
.pn-panel__hint{font-size:10px;color:var(--text-subtle);text-align:center;margin-bottom:12px;}
.pn-slots{display:flex;justify-content:center;gap:7px;margin-bottom:14px;}
.pn-slot{width:34px;height:34px;background:#EFE8DD;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:600;color:var(--ink);}
.pn-slot--empty{background:none;border:1.5px dashed var(--border-strong);}
.pn-panel__label{font-family:var(--font-mono);font-size:8px;letter-spacing:1px;color:var(--text-faint);margin-bottom:6px;}
.pn-keys{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;}
.pn-key{background:var(--surface);border:1px solid var(--border);border-radius:6px;padding:6px 0;text-align:center;font-size:11px;font-weight:600;color:var(--ink);cursor:default;transition:background var(--dur-micro) var(--ease), transform var(--dur-micro) var(--ease);}
.pn-key:hover{background:var(--sun);transform:translateY(-1px);}
.pn-key--used{background:#EFE8DD;color:var(--text-faint);}

/* textbite */
.tb-panel{flex:1;background:var(--paper);border:1px solid var(--border);border-radius:14px;padding:16px;margin-top:18px;}
.tb-tags{display:flex;align-items:center;gap:6px;margin-bottom:9px;}
.tb-tag{font-family:var(--font-display);font-weight:700;font-size:9.5px;border-radius:5px;padding:3px 8px;}
.tb-tag--fill{color:#fff;background:var(--coral);}
.tb-tag--outline{color:var(--text-muted);background:var(--surface);border:1px solid var(--border-strong);}
.tb-panel__title{font-family:var(--font-display);font-weight:800;font-size:15px;line-height:1.25;color:var(--ink);margin-bottom:10px;}
.tb-thumb{
  height:70px;border-radius:9px;background:linear-gradient(160deg,#2E5240,#1D3628);
  display:flex;align-items:center;justify-content:center;margin-bottom:10px;position:relative;overflow:hidden;
}
.tb-thumb__play{width:32px;height:22px;border-radius:6px;background:#E03131;display:flex;align-items:center;justify-content:center;transition:transform var(--dur-micro) var(--ease);}
.tb-thumb:hover .tb-thumb__play{transform:scale(1.1);}
.tb-thumb__tri{width:0;height:0;border-left:8px solid #fff;border-top:5px solid transparent;border-bottom:5px solid transparent;margin-left:2px;}
.tb-panel__desc{font-size:10.5px;line-height:1.5;color:var(--text-muted);margin-bottom:10px;}
.tb-meta{display:flex;flex-wrap:wrap;gap:5px;}
.tb-meta__pill{font-family:var(--font-mono);font-size:8px;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-pill);padding:4px 8px;}
.tb-meta__pill--strong{color:var(--ink);}
.tb-meta__pill--muted{color:var(--text-subtle);}

/* prepdrop */
.pd-card{grid-template-columns:1fr auto;display:grid;gap:20px;align-items:center;}
.pd-game{width:250px;box-sizing:border-box;background:var(--dark-bg);border-radius:var(--r-lg);padding:14px;display:flex;flex-direction:column;}
.pd-game__top{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;}
.pd-game__left{display:flex;align-items:center;gap:6px;}
.pd-game__help{width:22px;height:22px;border-radius:var(--r-pill);background:var(--dark-raised);color:rgba(251,247,242,.6);font-family:var(--font-display);font-weight:700;font-size:11px;display:flex;align-items:center;justify-content:center;}
.pd-game__lv{font-family:var(--font-display);font-weight:700;font-size:9.5px;color:var(--dark-text);background:var(--dark-raised);border-radius:var(--r-pill);padding:5px 9px;}
.pd-game__score-label{font-family:var(--font-mono);font-size:7.5px;letter-spacing:1px;color:rgba(251,247,242,.45);text-align:center;}
.pd-game__score{font-family:var(--font-display);font-weight:800;font-size:15px;color:var(--dark-text);line-height:1.1;text-align:center;}
.pd-game__lives{display:flex;align-items:center;gap:4px;}
.pd-game__life{width:7px;height:7px;border-radius:var(--r-pill);background:var(--coral);}
.pd-game__life--off{background:rgba(251,247,242,.18);}
.pd-stage{position:relative;height:112px;}
.pd-stage__word{
  position:absolute;top:0;left:50%;transform:translateX(-50%);
  background:var(--dark-raised);border-radius:10px;padding:9px 16px;
  font-family:var(--font-display);font-weight:700;font-size:13px;color:var(--dark-text);white-space:nowrap;
  animation:drop-fall 2.4s var(--ease) infinite;
}
@keyframes drop-fall{0%{top:0;opacity:1;}85%{top:78px;opacity:1;}100%{top:78px;opacity:0;}}
.pd-stage__floor{position:absolute;bottom:0;left:0;right:0;height:22px;border-radius:8px;background:var(--coral);box-shadow:0 4px 14px rgba(255,122,41,.5);}
.pd-speedup{font-family:var(--font-mono);font-size:8.5px;color:rgba(251,247,242,.5);background:var(--dark-surface);border-radius:8px;padding:7px 0;text-align:center;margin:12px 0 8px;}
.pd-answers{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;}
.pd-answer{font-family:var(--font-display);font-weight:800;font-size:12px;border-radius:9px;padding:9px 0;text-align:center;transition:transform var(--dur-micro) var(--ease);cursor:default;}
.pd-answer:hover{transform:translateY(-2px);}

/* verb tense timeline */
.vt-head{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:16px;gap:10px;flex-wrap:wrap;}
.vt-meta{font-family:var(--font-mono);font-size:10px;color:var(--text-subtle);white-space:nowrap;}
.vt-tabs{display:flex;flex-wrap:wrap;gap:14px;margin-bottom:14px;}
.vt-tab-group{display:flex;flex-direction:column;gap:6px;}
.vt-tab-group__label{font-family:var(--font-mono);font-size:8.5px;letter-spacing:1px;}
.vt-tab-row{display:flex;gap:6px;flex-wrap:wrap;}
.vt-tab{font-size:11.5px;font-weight:600;border-radius:var(--r-pill);padding:6px 13px;}
.vt-tab--muted{color:var(--text-muted);background:var(--surface);border:1px solid var(--border-strong);}
.vt-tab--active{color:#fff;}
.vt-strip{
  flex:1;position:relative;display:grid;grid-template-columns:1fr .55fr 1fr;border-radius:12px;overflow:hidden;min-height:158px;
}
.vt-strip__past{background:#F3F0F5;}
.vt-strip__present{background:#E9F4EF;}
.vt-strip__future{background:#F7EFE4;}
.vt-strip__overlay{position:absolute;inset:0;padding:12px 16px;display:flex;flex-direction:column;}
.vt-strip__labels{display:flex;justify-content:space-between;font-family:var(--font-mono);font-size:8.5px;letter-spacing:1px;}
.vt-strip__body{flex:1;position:relative;}
.vt-strip__axis{position:absolute;left:50%;top:0;bottom:-6px;width:1px;border-left:1px dashed var(--border-dash);}
.vt-strip__now-pill{position:absolute;left:50%;top:6px;transform:translateX(-50%);font-size:10px;font-weight:700;color:var(--teal-dark);background:var(--surface);border:1px solid var(--teal);border-radius:var(--r-pill);padding:3px 10px;white-space:nowrap;}
.vt-strip__line{position:absolute;left:0;right:0;top:42px;height:1px;background:var(--border-strong);}
.vt-strip__dots{position:absolute;left:0;right:0;top:42px;display:flex;justify-content:space-between;align-items:center;transform:translateY(-50%);padding:0 6px;}
.vt-dot{width:7px;height:7px;border-radius:var(--r-pill);background:#C7DED4;}
.vt-dot--active{width:11px;height:11px;background:var(--teal-dark);}
.vt-strip__arrow{font-family:var(--font-display);font-weight:800;font-size:12px;color:var(--border-dash);line-height:1;}
.vt-future-block{position:absolute;left:56%;top:58px;right:16px;}
.vt-future-pill{font-size:10px;font-weight:700;color:var(--sun-ink);background:var(--surface);border:1px solid #E0B884;border-radius:var(--r-pill);padding:3px 10px;display:inline-block;white-space:nowrap;}
.vt-future-line{position:relative;height:14px;margin-top:6px;}
.vt-future-line__h{position:absolute;left:0;top:6px;right:10px;height:2px;background:var(--sun-ink);}
.vt-future-line__v{position:absolute;left:0;top:0;width:2px;height:14px;background:var(--sun-ink);}
.vt-future-line__dot{position:absolute;right:0;top:1px;width:11px;height:11px;border-radius:var(--r-pill);background:var(--sun-ink);}
.vt-strip__now{text-align:center;}
.vt-strip__now span{font-size:9.5px;color:var(--text-subtle);background:var(--surface);border:1px solid var(--border-strong);border-radius:var(--r-pill);padding:2px 10px;}
.vt-formula{display:grid;grid-template-columns:auto 1fr 1fr;gap:8px 16px;align-items:center;margin-top:14px;}
.vt-formula__label{font-family:var(--font-mono);font-size:8.5px;color:var(--text-faint);}
.vt-formula__val{font-size:11.5px;font-weight:600;border-radius:7px;padding:6px 10px;justify-self:start;}
.vt-formula__example{font-size:12px;font-style:italic;color:var(--text-muted);}

/* coming soon */
.coming-soon{display:flex;align-items:center;gap:18px;}
.coming-soon__plus{width:44px;height:44px;flex-shrink:0;border-radius:var(--r-pill);background:var(--sun);display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-weight:800;font-size:24px;color:var(--ink);}
.coming-soon__title{font-family:var(--font-display);font-weight:800;font-size:20px;}
.coming-soon__desc{font-size:14px;color:var(--text-muted);margin-top:3px;}
.coming-soon__chips{display:flex;gap:10px;flex-wrap:wrap;}
.coming-soon__chip{font-family:var(--font-mono);font-size:11px;color:var(--text-muted);background:var(--surface);border:1px solid var(--border);border-radius:var(--r-pill);padding:8px 16px;white-space:nowrap;}

/* =========================================================
   STEPS (how it works)
   ========================================================= */
.steps{max-width:var(--container);margin:0 auto;padding:0 20px 100px;}
.steps__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;}
.step-card{border-radius:var(--r-xl);padding:30px;transition:transform var(--dur-standard) var(--ease);}
.step-card:hover{transform:translateY(-4px);}
.step-card--paper{background:var(--paper);border:2px dashed var(--border-dash);}
.step-card--dark{background:var(--dark-surface);color:var(--dark-text);}
.step-card__num{font-family:var(--font-display);font-weight:800;font-size:44px;line-height:1;margin-bottom:16px;color:var(--coral);}
.step-card--dark .step-card__num{color:var(--sun);}
.step-card__title{font-family:var(--font-display);font-weight:800;font-size:20px;margin-bottom:8px;}
.step-card__desc{font-size:14px;line-height:1.6;color:var(--text-muted);}
.step-card--dark .step-card__desc{color:rgba(251,247,242,.7);}

/* =========================================================
   WHITELABEL
   ========================================================= */
.whitelabel{
  margin:0 0 100px;background:var(--dark-surface);border-radius:var(--r-2xl);
  padding:clamp(40px,8vw,88px) clamp(20px,6vw,56px);position:relative;overflow:hidden;
}
.whitelabel__mark{position:absolute;bottom:-90px;right:-70px;width:340px;height:340px;opacity:.07;transform:rotate(14deg);pointer-events:none;}
.whitelabel__grid{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center;}
.whitelabel__title{font-family:var(--font-display);font-weight:800;font-size:clamp(1.9rem,1.5rem + 1.8vw,3.4rem);letter-spacing:-.03em;color:var(--dark-text);line-height:1.04;margin-bottom:20px;}
.whitelabel__desc{font-size:16.5px;color:rgba(251,247,242,.7);line-height:1.65;margin-bottom:28px;}
.whitelabel__desc b{color:var(--dark-text);}
.whitelabel__list{display:flex;flex-direction:column;gap:12px;}
.whitelabel__item{display:flex;align-items:center;gap:12px;}
.whitelabel__check{width:22px;height:22px;border-radius:var(--r-pill);background:var(--coral);display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.whitelabel__item-text{font-size:14.5px;color:rgba(251,247,242,.85);}
.whitelabel__item-text b{color:var(--dark-text);}

.theme-editor{position:relative;background:var(--paper);border-radius:var(--r-xl);padding:26px;box-shadow:var(--shadow-overlay);transform:rotate(1.2deg);transition:transform var(--dur-standard) var(--ease);}
.theme-editor:hover{transform:rotate(0);}
.theme-editor__title{font-family:var(--font-display);font-weight:800;font-size:19px;line-height:1.25;color:var(--ink);margin-bottom:4px;}
.theme-editor__sub{font-size:11.5px;line-height:1.4;color:var(--text-subtle);margin-bottom:18px;}
.theme-editor__grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;}
.te-field-label{font-size:10.5px;font-weight:600;color:var(--text-muted);margin-bottom:5px;}
.te-input{background:var(--surface);border:1.5px solid var(--border-strong);border-radius:9px;padding:9px 11px;font-family:var(--font-display);font-weight:700;font-size:12.5px;color:var(--ink);margin-bottom:13px;}
.te-swatch{height:26px;border-radius:8px;margin-bottom:13px;transition:background var(--dur-standard) var(--ease);}
.te-swatch-row{display:flex;gap:6px;margin-bottom:13px;}
.te-swatch-row div{flex:1;height:22px;border-radius:6px;}
.te-mini-row{display:flex;gap:6px;}
.te-mini{flex:1;background:var(--surface);border:1.5px solid var(--border-strong);border-radius:9px;padding:7px 9px;font-size:10.5px;color:var(--ink);}
.te-preview-label{font-family:var(--font-mono);font-size:8.5px;letter-spacing:1px;color:var(--text-faint);margin-bottom:6px;}
.te-preview{background:var(--surface);border-radius:14px;padding:16px;box-shadow:0 8px 22px rgba(33,28,62,.1);margin-bottom:14px;}
.te-preview__head{display:flex;align-items:center;gap:7px;margin-bottom:12px;}
.te-preview__avatar{width:24px;height:24px;border-radius:8px;background:var(--teal);color:#fff;font-family:var(--font-display);font-weight:800;font-size:12px;display:flex;align-items:center;justify-content:center;}
.te-preview__school{font-family:var(--font-display);font-weight:800;font-size:12.5px;line-height:1.2;color:var(--ink);}
.te-preview__greeting{font-family:var(--font-display);font-weight:800;font-size:14px;line-height:1.3;color:var(--ink);margin-bottom:8px;}
.te-preview__streak{display:inline-block;font-size:9.5px;font-weight:600;color:var(--sun-dark);background:rgba(255,200,87,.28);border-radius:var(--r-pill);padding:4px 10px;margin-bottom:10px;}
.te-preview__bar{height:6px;background:#EFE8DD;border-radius:var(--r-pill);margin-bottom:12px;overflow:hidden;}
.te-preview__bar-fill{width:62%;height:100%;background:var(--teal);border-radius:var(--r-pill);}
.te-preview__cta{font-family:var(--font-display);font-weight:700;font-size:11.5px;color:#fff;background:var(--teal);border-radius:var(--r-pill);padding:9px;text-align:center;}
.te-save{font-family:var(--font-display);font-weight:700;font-size:11.5px;color:#fff;background:var(--coral);border-radius:var(--r-pill);padding:9px;text-align:center;}
.theme-editor__float{position:absolute;font-family:var(--font-mono);font-size:11px;color:var(--ink);background:var(--sun);border-radius:var(--r-pill);padding:9px 16px;box-shadow:0 10px 26px rgba(0,0,0,.3);}
.theme-editor__float--url{top:-16px;right:-14px;transform:rotate(4deg);}
.theme-editor__float--tag{bottom:-16px;left:-18px;font-family:var(--font-display);font-weight:700;font-size:12px;color:var(--dark-text);background:var(--teal);transform:rotate(-3deg);}

/* =========================================================
   CLOSING CTA
   ========================================================= */
.cta-closing{
  background:var(--coral);border-radius:var(--r-2xl);padding:clamp(56px,10vw,90px) clamp(20px,6vw,56px);
  text-align:center;margin:0 20px 20px;position:relative;overflow:hidden;
}
.cta-closing__form{display:flex;justify-content:center;align-items:center;gap:12px;flex-wrap:wrap;margin-top:24px;}
.cta-closing__mark{position:absolute;bottom:-80px;left:-60px;width:260px;height:260px;opacity:.15;pointer-events:none;}
.cta-closing__inner{position:relative;}
.cta-closing__title{font-family:var(--font-display);font-weight:800;font-size:clamp(2rem,1.5rem + 2.2vw,3.4rem);letter-spacing:-.03em;color:var(--paper);margin-bottom:10px;}
.cta-closing__pt{font-family:var(--font-display);font-weight:700;font-size:22px;color:var(--ink);margin-bottom:34px;}
.cta-closing__note{font-size:13px;color:rgba(251,247,242,.85);margin-top:16px;}

/* =========================================================
   LANGUAGE TOGGLE
   Content on the page defaults to a bilingual "mixed" flavor
   (English copy with a few Portuguese brand flourishes). The
   toggle switches every [data-pt]-bearing element between its
   authored English text and its Portuguese translation; the
   mixed-only flourish lines hide themselves once a single
   language is picked.
   ========================================================= */
body[data-lang="en"] .lang-flourish,
body[data-lang="pt"] .lang-flourish{display:none;}
body[data-lang="en"] #footer-tag-single,
body[data-lang="pt"] #footer-tag-single{display:inline !important;}

.lang-toggle{
  display:flex;
  align-items:center;
  gap:2px;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--r-pill);
  padding:4px;
}
.lang-toggle__opt{
  appearance:none;
  border:none;
  background:transparent;
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.5px;
  color:var(--text-muted);
  padding:6px 12px;
  border-radius:var(--r-pill);
  cursor:pointer;
  transition:background 180ms var(--ease), color 180ms var(--ease);
}
.lang-toggle__opt:hover{color:var(--ink);}
.lang-toggle__opt.is-active{background:var(--ink);color:var(--paper);}

/* =========================================================
   FOOTER
   ========================================================= */
.footer{
  padding:36px 16px 32px;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:16px;max-width:var(--container-wide);margin:0 auto;
}
.footer__brand{display:flex;align-items:center;gap:12px;flex-wrap:wrap;color:var(--ink);}
.footer__wordmark{font-family:var(--font-display);font-weight:800;font-size:20px;}
.footer__tag{font-size:13px;color:var(--text-subtle);margin-left:8px;}
.footer__contact{font-size:13px;color:var(--text-subtle);}

/* =========================================================
   Scroll animation hooks
   ========================================================= */
/* All motion (entrance, scroll-scrubbed reveal, stagger, text split) is driven
   by GSAP + ScrollTrigger in assets/js/main.js. These classes carry no CSS
   behavior of their own — content renders normally (nothing hidden) if the
   animation script fails to load, a dependency-free fallback by construction.
     .reveal          single element — fades/rises as it scrolls into view
     .reveal-stagger  direct children cascade in as the container scrolls up
     .reveal-line     one line of a headline (hero__title, some h-section)
     .reveal-word     one word/phrase of a headline (cta-closing__title, overview__lead) */
.reveal-line, .reveal-word{display:inline-block;}

/* =========================================================
   RESPONSIVE — tablet ≤1024px
   ========================================================= */
@media(max-width:1024px){
  .hero__float--schedule{width:230px;top:108px;left:12px;}
  .hero__float--live{width:206px;top:132px;right:12px;}
  .hero__float--qr{width:132px;bottom:28px;right:16px;}
  .hero__float--streak{bottom:44px;left:20px;}
  /* minmax(0,1fr), not 1fr: a plain 1fr track's auto min-width lets the
     widest card's content blow the single column past the viewport, dragging
     every card wide with it. min-width:0 lets inner panels shrink/scroll. */
  .teachers__grid{grid-template-columns:minmax(0,1fr);}
  .t-card{min-width:0;}
  .bento{grid-template-columns:repeat(2,1fr);}
}

/* Schedule/live cards sit close enough to center that on narrower tablets
   (portrait iPad and below) they collide with the centered headline text —
   drop them here and rely on the streak + QR corner cards only. */
@media(max-width:900px){
  .hero__float--schedule,.hero__float--live{display:none;}
  .hero__float--qr{bottom:24px;right:16px;}
  .hero__float--streak{bottom:24px;left:16px;}
}

/* =========================================================
   RESPONSIVE — nav / tablet+mobile ≤860px
   ========================================================= */
@media(max-width:860px){
  .nav__toggle{display:flex;}
  .nav__links{
    position:absolute;top:calc(100% + 8px);left:0;right:0;
    background:var(--ink);border-radius:var(--r-lg);
    flex-direction:column;align-items:stretch;gap:2px;padding:10px;
    box-shadow:var(--shadow-floating);
    opacity:0;visibility:hidden;transform:translateY(-10px);
    transition:opacity var(--dur-standard) var(--ease), transform var(--dur-standard) var(--ease), visibility 0s linear var(--dur-standard);
    z-index:30;
  }
  .nav__links.is-open{
    opacity:1;visibility:visible;transform:translateY(0);
    transition:opacity var(--dur-standard) var(--ease), transform var(--dur-standard) var(--ease);
  }
  .nav__link{padding:13px 14px;border-radius:var(--r-md);}
  .nav__link:hover{background:rgba(255,255,255,.08);}
  .nav__links .btn{margin-top:4px;justify-content:center;}
  .problem{grid-template-columns:1fr;gap:32px;padding:48px 20px 72px;}
  .overview__grid{grid-template-columns:1fr;}
  .whitelabel__grid{grid-template-columns:1fr;gap:40px;}
  .steps__grid{grid-template-columns:1fr;}
}

/* =========================================================
   RESPONSIVE — mobile ≤640px
   ========================================================= */
@media(max-width:640px){
  .nav{margin-bottom:24px;}
  .nav__wordmark{font-size:19px;}
  .nav__actions{gap:10px;}
  .lang-toggle--nav{padding:3px;}
  .lang-toggle--nav .lang-toggle__opt{padding:5px 7px;font-size:10px;letter-spacing:.3px;}
  /* On mobile the hero becomes a single clean vertical flow: copy first,
     then a real product card inline. The decorative squiggle/glow/marks stay
     position:absolute so they sit out of the flex flow untouched. */
  .hero{
    display:flex;flex-direction:column;
    padding:14px 16px 28px;
  }
  /* Left-aligned, full-width composition (see mobile mock): copy hugs the left
     edge, the CTA and product card span the full column. */
  .hero__content{order:1;padding-top:14px;max-width:none;text-align:left;}
  .hero__eyebrow{
    font-size:11px;letter-spacing:1.2px;line-height:1.5;margin-bottom:16px;
  }
  .hero__title{font-size:2.2rem;margin-bottom:18px;}
  .hero__pt{padding:0;margin-bottom:18px;}
  .hero__desc{padding:0;font-size:16.5px;margin:0 0 28px;max-width:none;}
  .hero__desc--desktop{display:none;}
  .hero__desc--mobile{display:block;}
  .hero .btn--sun{width:100%;}

  /* Product peek: promote the live leaderboard from a floating decoration to
     a static, full-width in-flow card so mobile visitors actually see the app. */
  .hero__float--live{
    display:block;position:static;order:2;
    width:100%;margin:26px 0 0;
    animation:none;translate:none;transform:none;--rot:none;
    box-shadow:0 18px 44px rgba(33,28,62,.34);
  }
  .hero__float--schedule,.hero__float--qr,.hero__float--streak{display:none;}

  .divider{gap:16px;padding:40px 0 0;}
  .divider__mark{width:26px;height:26px;}

  .bento{grid-template-columns:1fr;gap:16px;}
  .bento__item--span2{grid-column:span 1;}
  .pd-card{grid-template-columns:1fr;}
  .pd-game{width:100%;}
  .vt-strip{min-height:180px;}
  .vt-future-block{left:52%;}

  .teachers__grid{gap:16px;}
  .t-card{padding:24px;}
  /* Lesson-builder's Available / This-lesson columns stack on mobile — the
     nowrap item names make a side-by-side 1fr 1fr grid overflow the card. */
  .builder-cols{grid-template-columns:minmax(0,1fr);}

  .theme-editor__grid{grid-template-columns:1fr;}
  .theme-editor__float{display:none;}

  .footer{justify-content:center;text-align:center;}
  .footer__brand{justify-content:center;}

  .classpanel__form{flex-direction:column;align-items:stretch;}
  .classpanel__form .btn{width:100%;}
}

@media(max-width:400px){
  .h-display{font-size:2.35rem;}
  .hero__title{font-size:1.85rem;}
  .hero__title .accent{padding:0 14px 3px;}
  .btn--lg{padding:16px 30px;font-size:16px;}
}