/* ── RESET & BASE ── */
*{box-sizing:border-box;margin:0;padding:0;}
:root{
  /* Brand lime — same tokens as the app (valed-naled-theme.css) */
  --lime:#BDFD50; --limed:#5A8200; --limebg:#F2FBDC;
  --teal:#0ABFB0; --tealbg:#E8FAF8;
  --orange:#FF6B2B; --orangebg:#FFF0EA;
  --bg:#F5F5F2; --white:#FFFFFF;
  --s2:#F0F0ED; --border:#E8E8E4; --borderlt:#EFEFEB;
  --text:#111110; --t2:#6B6B67; --t3:#A8A8A4;
  --sh:0 1px 3px rgba(0,0,0,.06),0 1px 2px rgba(0,0,0,.03);
  --sh-md:0 4px 20px rgba(0,0,0,.07),0 1px 6px rgba(0,0,0,.04);
  --sh-lg:0 16px 56px rgba(0,0,0,.1),0 4px 16px rgba(0,0,0,.05);
}
html{
  overflow-x:hidden;
  /* Website_v2 uses Lenis — no CSS scroll-snap (Lenis does not support it; see lenis docs) */
  scroll-padding-top:74px;
}
body{
  font-family:'DM Sans',sans-serif;
  background:var(--bg);color:var(--text);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
/* clip clips overflow without the sticky-breaking side effects of hidden on scrollports (Chromium/WebKit) */
@supports (overflow-x:clip){
  html,body{overflow-x:clip;}
}

/* Both pages: only the hero fills the viewport — chapters breathe at their own
   height. The tutor page is now built on the same chapter/stage system, so its
   sections size to content just like the students page. */
#page-tutors > section:not(#t-cta):not(.chapter){
  min-height:100vh;
  min-height:100dvh;
}
#page-tutors > section#t-stories{
  min-height:unset;
}

/* ══════════════════════════════════════
   TUTOR "COMING SOON" GATE
   While #page-tutors has .tutors-soon, we show the REAL tutor hero
   (#t-hero) exactly as it is and hide only what comes AFTER it — the
   chapters and the tutor footer. The hero gains a small "Em breve" chip
   and a short note; its live CTA is swapped for that note. Remove the
   .tutors-soon class (in index.html) to launch the full tutor side —
   nothing is deleted, so nothing is lost.
══════════════════════════════════════ */
/* Keep the hero; hide every following section + the tutor footer. */
.tutors-soon > #t-hero ~ *{ display:none !important; }

/* Coming-soon bits: chip + note visible only while gated; live CTA hidden. */
.t-soon-chip,
.t-soon-note{ display:none; }
.tutors-soon .t-soon-chip{
  display:inline-flex; align-items:center;
  align-self:flex-start;
  font-size:12px; font-weight:600; letter-spacing:.06em; text-transform:uppercase;
  color:var(--limed);
  background:var(--limebg); border:1px solid #DCF3B0;
  padding:6px 13px; border-radius:999px;
  margin-bottom:22px;
}
.tutors-soon .t-soon-note{
  display:block; color:var(--t2); max-width:44ch;
}
.tutors-soon #t-hero .t-when-live{ display:none; }

/* ── NAV ── */
nav{
  position:fixed;top:0;left:0;right:0;z-index:100;
  background:transparent;
  border-bottom:1px solid transparent;
  height:74px;display:flex;align-items:center;padding:0 56px;gap:0;
  transform:translateY(0) rotate(0.001deg);
  overflow:visible;
  transition:transform .3s ease;
}
/* Hide on scroll down (Website_v2 — all viewports) */
[data-scrolling-started="true"][data-scrolling-direction="down"] #main-nav{
  transform:translateY(-100%) rotate(0.001deg);
  overflow:hidden;
}
nav.scrolled{
  background:transparent;
  border-bottom-color:transparent;
}
.nav-logo{
  font-family:'Domine',serif;font-size:20px;font-weight:400;
  color:var(--text);letter-spacing:-.3px;margin-right:44px;text-decoration:none;
  flex-shrink:0;display:inline-flex;align-items:center;
}
.nav-logo-img{height:38px;width:auto;display:block;}
.nav-links{display:flex;gap:4px;flex:1;}
.nl{
  padding:7px 14px;font-size:13.5px;color:var(--t2);
  border-radius:8px;text-decoration:none;transition:all .15s;
}
.nl:hover{color:var(--text);background:var(--border);}
.nav-right{margin-left:auto;display:flex;align-items:center;gap:10px;}
.nav-login{font-size:15px;color:var(--t2);text-decoration:none;padding:9px 18px;border-radius:8px;transition:all .15s;}
.nav-login:hover{color:var(--text);}
.nav-cta{
  background:var(--text);color:var(--white);font-size:15px;font-weight:600;
  padding:11px 24px;border-radius:8px;border:none;cursor:pointer;
  font-family:'DM Sans',sans-serif;text-decoration:none;transition:all .2s;
  display:inline-flex;align-items:center;justify-content:center;
}
.nav-cta:hover{background:#2a2a28;transform:translateY(-1px);box-shadow:0 4px 16px rgba(0,0,0,.15);}
.nav-cta-short{display:none;}

/* ── NAV PILL TOGGLE — liquid glass (blur + layered glass; SVG displacement = Chrome-only) ── */
.np-label-short{display:none;}
.nav-pill-wrap{
  position:absolute;left:50%;transform:translateX(-50%);
}
.nav-pill{
  display:flex;align-items:center;
  position:relative;
  isolation:isolate;
  padding:3px;
  border-radius:100px;
  backdrop-filter:blur(22px) saturate(1.45);
  -webkit-backdrop-filter:blur(22px) saturate(1.45);
  background:linear-gradient(
    145deg,
    rgba(255,255,255,.52) 0%,
    rgba(255,255,255,.22) 42%,
    rgba(248,248,246,.38) 100%
  );
  border:1px solid rgba(255,255,255,.55);
  box-shadow:
    0 4px 22px rgba(0,0,0,.06),
    0 1px 2px rgba(0,0,0,.03),
    inset 0 1px 0 rgba(255,255,255,.72),
    inset 0 -1px 0 rgba(0,0,0,.05);
}
.nav-pill::before{
  content:'';
  position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:0;
  background:radial-gradient(120% 80% at 18% 0%, rgba(255,255,255,.45) 0%, transparent 55%);
  opacity:.85;
}
.nav-pill::after{
  content:'';
  position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:0;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.2);
  mix-blend-mode:soft-light;
  opacity:.6;
}
.np-btn{
  position:relative;z-index:2;
  padding:8px 22px;border-radius:100px;border:none;
  background:transparent;font-size:15px;font-weight:500;
  color:var(--t2);cursor:pointer;font-family:'DM Sans',sans-serif;
  transition:color .2s;white-space:nowrap;
}
.np-btn.active{color:var(--text);}
.np-slider{
  position:absolute;top:3px;left:3px;z-index:1;
  height:calc(100% - 6px);
  border-radius:100px;
  pointer-events:none;
  backdrop-filter:blur(14px) saturate(1.2);
  -webkit-backdrop-filter:blur(14px) saturate(1.2);
  background:linear-gradient(
    180deg,
    rgba(255,255,255,.96) 0%,
    rgba(252,252,251,.88) 45%,
    rgba(248,248,246,.9) 100%
  );
  border:1px solid rgba(255,255,255,.65);
  box-shadow:
    0 3px 12px rgba(0,0,0,.08),
    0 1px 2px rgba(0,0,0,.04),
    inset 0 1px 0 rgba(255,255,255,.95),
    inset 0 -1px 0 rgba(0,0,0,.06);
  transition:left .25s cubic-bezier(.4,0,.2,1), width .25s cubic-bezier(.4,0,.2,1);
}

/* Tutor page — dark glass track + bright glass thumb while #t-hero is in view */
/* Students: same treatment while #hero is in view (nav-in-hero) */
nav[data-page="tutors"].nav-in-hero .nav-pill,
nav[data-page="students"].nav-in-hero .nav-pill{
  background:linear-gradient(
    155deg,
    rgba(255,255,255,.16) 0%,
    rgba(255,255,255,.05) 45%,
    rgba(255,255,255,.1) 100%
  );
  border-color:rgba(255,255,255,.22);
  box-shadow:
    0 6px 28px rgba(0,0,0,.28),
    inset 0 1px 0 rgba(255,255,255,.28),
    inset 0 -1px 0 rgba(0,0,0,.35);
}
nav[data-page="tutors"].nav-in-hero .nav-pill::before,
nav[data-page="students"].nav-in-hero .nav-pill::before{
  background:radial-gradient(100% 90% at 20% 0%, rgba(255,255,255,.22) 0%, transparent 50%);
}
nav[data-page="tutors"].nav-in-hero .np-btn,
nav[data-page="students"].nav-in-hero .np-btn{color:rgba(255,255,255,.48);}
nav[data-page="tutors"].nav-in-hero .np-btn.active,
nav[data-page="students"].nav-in-hero .np-btn.active{color:var(--text);font-weight:600;}
nav[data-page="tutors"].nav-in-hero .np-slider,
nav[data-page="students"].nav-in-hero .np-slider{
  background:linear-gradient(180deg, rgba(255,255,255,.99) 0%, rgba(250,250,252,.96) 100%);
  border-color:rgba(255,255,255,.72);
  box-shadow:
    0 4px 16px rgba(0,0,0,.2),
    inset 0 1px 0 rgba(255,255,255,1),
    inset 0 -1px 0 rgba(0,0,0,.08);
}

/* Tutor page — logo/links on dark hero (nav strip stays transparent) */
nav[data-page="tutors"].nav-in-hero,
nav[data-page="students"].nav-in-hero{
  background:transparent;
  border-bottom-color:transparent;
}
nav[data-page="tutors"].nav-in-hero .nav-logo-img,
nav[data-page="students"].nav-in-hero .nav-logo-img{filter:invert(1);}
nav[data-page="tutors"].nav-in-hero.scrolled,
nav[data-page="students"].nav-in-hero.scrolled{
  background:transparent;
}
nav[data-page="tutors"].nav-in-hero .nav-login,
nav[data-page="students"].nav-in-hero .nav-login{color:rgba(255,255,255,.55);}
nav[data-page="tutors"].nav-in-hero .nav-login:hover,
nav[data-page="students"].nav-in-hero .nav-login:hover{color:rgba(255,255,255,.9);}
nav[data-page="tutors"].nav-in-hero .nav-cta,
nav[data-page="students"].nav-in-hero .nav-cta{background:var(--white);color:var(--text);}
nav[data-page="tutors"].nav-in-hero .nav-cta:hover,
nav[data-page="students"].nav-in-hero .nav-cta:hover{background:#f0f0ee;}

@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .nav-pill{
    background:rgba(245,245,242,.94);
    backdrop-filter:none;
    -webkit-backdrop-filter:none;
  }
  nav[data-page="tutors"].nav-in-hero .nav-pill,
  nav[data-page="students"].nav-in-hero .nav-pill{background:rgba(40,40,38,.88);}
  .np-slider{background:var(--white);}
  nav[data-page="tutors"].nav-in-hero .np-slider,
  nav[data-page="students"].nav-in-hero .np-slider{background:var(--white);}
}
section{padding:100px 40px;}
.container{max-width:1100px;margin:0 auto;}
.container-wide{max-width:1260px;margin:0 auto;}
.eyebrow{
  font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  color:var(--t3);margin-bottom:16px;
}
.eyebrow.teal{color:var(--teal);}
.eyebrow.lime{color:var(--limed);}

/* ══════════════════════════════
   1. HERO — quiet, editorial, paper
══════════════════════════════ */
#hero,
#t-hero{
  padding:clamp(120px, 15vh, 168px) 56px clamp(60px,10vh,110px);
  position:relative;
  display:flex;
  align-items:center;
  min-height:100vh;
  min-height:100dvh;
  background:var(--bg);
  overflow:hidden;
}
/* Claude-style hero: text stack on the left half, right half reserved for art */
.hero-inner{
  position:relative; z-index:2;
  text-align:left;
  width:50%;
  max-width:640px;
  margin:0;
}
/* Right-half art slot — hand-drawn exam-paper illustration (Claude-style) */
.hero-art{
  position:absolute;
  top:0; right:0; bottom:0;
  width:50%;
  z-index:1;
  pointer-events:none;
  display:flex;
  align-items:center;
  justify-content:flex-end;
  /* right margin matches the hero's 56px left padding on the text */
  padding-right:56px;
}
.hero-art-img{
  width:min(100%, 720px);
  height:auto;
  max-height:88vh;
  object-fit:cover;
  border-radius:20px;
  box-shadow:0 24px 48px rgba(17,17,16,.14);
}
.hero-eyebrow{
  font-size:12px; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  color:var(--t3);
  margin-bottom:28px;
}
.hero-eyebrow--dark{ color:rgba(255,255,255,.45); }
.hero-h1{
  font-family:'Domine',serif;
  font-size:clamp(44px, 5.2vw, 72px);
  font-weight:400; line-height:1.06; letter-spacing:-.035em;
  color:var(--text);
  margin:0 auto;
}
/* #hero / #t-hero: left-aligned Claude layout — neutralize the shared centering */
#hero .hero-h1,
#t-hero .hero-h1{ margin:0; }
#hero .hero-sub,
#t-hero .hero-sub{ margin:clamp(18px,2.5vw,26px) 0 0; text-align:left; }
#hero .hero-ctas,
#t-hero .hero-ctas{ justify-content:flex-start; }
.hero-h1 em{ font-style:normal; }
.hero-h1--dark{ color:rgba(255,255,255,.97); }
.hero-sub{
  font-family:'DM Sans',sans-serif;
  font-size:clamp(17px,2vw,20px);
  font-weight:400;
  line-height:1.5;
  letter-spacing:-.01em;
  color:var(--t2);
  max-width:520px;
  margin:clamp(18px,2.5vw,26px) auto 0;
}
.hero-sub--dark{ color:rgba(255,255,255,.72); }
.hero-ctas{
  display:flex; align-items:center; justify-content:center; gap:14px;
  margin-top:clamp(28px,4vh,40px);
}
.btn-ink{
  background:var(--text); color:var(--white);
  font-size:15px; font-weight:600;
  padding:14px 30px; border-radius:8px;
  text-decoration:none; font-family:'DM Sans',sans-serif;
  display:inline-flex; align-items:center; gap:9px;
  transition:all .25s;
  white-space:nowrap;
}
.btn-ink:hover{ background:#2a2a28; transform:translateY(-2px); box-shadow:0 8px 28px rgba(0,0,0,.14); }

/* ══════════════════════════════
   HERO — LAUNCH EDITION (free-beta / exam countdown)
   Additive theming for the student hero. Uses the same tokens (lime/olive,
   paper, ink) and type as the rest of the site. Remove this block + the
   markup in index.html to revert to the evergreen hero.
══════════════════════════════ */
.hero-badge{
  display:inline-flex; align-items:center; gap:9px;
  font-family:'DM Sans',sans-serif;
  font-size:13px; font-weight:500; letter-spacing:-.005em;
  color:var(--limed);
  background:var(--limebg);
  border:1px solid rgba(90,130,0,.18);
  padding:7px 14px 7px 12px;
  border-radius:999px;
  margin:0 0 clamp(20px,3vh,30px);
  width:max-content; max-width:100%;
}
.hero-badge strong{ font-weight:700; }
.hero-badge-dot{
  width:7px; height:7px; border-radius:50%;
  background:var(--limed);
  box-shadow:0 0 0 0 rgba(90,130,0,.45);
  animation:heroBadgePulse 2.4s ease-out infinite;
  flex:none;
}
@keyframes heroBadgePulse{
  0%{ box-shadow:0 0 0 0 rgba(90,130,0,.45); }
  70%{ box-shadow:0 0 0 7px rgba(90,130,0,0); }
  100%{ box-shadow:0 0 0 0 rgba(90,130,0,0); }
}

/* Countdown — sits between the sub and the CTAs in the left stack */
.hero-countdown{
  margin:clamp(22px,3.2vh,32px) 0 0;
  display:flex; flex-direction:column; gap:10px;
  width:max-content; max-width:100%;
}
.hero-countdown-label{
  font-family:'DM Sans',sans-serif;
  font-size:12px; font-weight:600; letter-spacing:.12em; text-transform:uppercase;
  color:var(--t3);
}
.hero-countdown-clock{
  display:inline-flex; align-items:flex-end; gap:clamp(8px,1.2vw,14px);
  color:var(--text);
}
.hcd-unit{
  display:inline-flex; flex-direction:column; align-items:center; gap:2px;
  min-width:clamp(46px,5vw,60px);
}
.hcd-num{
  font-family:'Domine',serif;
  font-size:clamp(30px,3.6vw,46px); font-weight:400; line-height:1;
  letter-spacing:-.02em;
  font-variant-numeric:tabular-nums; font-feature-settings:"tnum";
}
.hcd-lbl{
  font-family:'DM Sans',sans-serif;
  font-size:11px; font-weight:600; letter-spacing:.08em; text-transform:uppercase;
  color:var(--t3);
}
.hcd-sep{
  font-family:'Domine',serif;
  font-size:clamp(24px,3vw,38px); line-height:1;
  color:var(--t3);
  align-self:flex-start;
  margin-top:2px;
}
/* Post-exam state: hide the clock, show the launch/good-luck line */
.hero-countdown-done{ display:none; }
.hero-countdown.is-done .hero-countdown-clock,
.hero-countdown.is-done .hero-countdown-label{ display:none; }
.hero-countdown.is-done .hero-countdown-done{
  display:block;
  font-family:'DM Sans',sans-serif;
  font-size:clamp(16px,1.9vw,19px); font-weight:500; line-height:1.45;
  color:var(--text);
  max-width:440px;
}
@media (prefers-reduced-motion:reduce){
  .hero-badge-dot{ animation:none; }
}

.btn-quiet{
  color:var(--t2); font-size:15px; font-weight:500;
  padding:14px 22px; border-radius:8px;
  text-decoration:none;
  transition:color .2s;
}
.btn-quiet:hover{ color:var(--text); }
.btn-paper{
  background:var(--white); color:var(--text);
  font-size:15px; font-weight:600;
  padding:14px 30px; border-radius:8px;
  border:1px solid rgba(0,0,0,.08);
  text-decoration:none; font-family:'DM Sans',sans-serif;
  display:inline-flex; align-items:center; gap:9px;
  transition:all .25s;
  box-shadow:0 2px 12px rgba(0,0,0,.08);
  white-space:nowrap;
}
.btn-paper:hover{ transform:translateY(-2px); box-shadow:0 8px 28px rgba(0,0,0,.16); }

/* ══════════════════════════════
   2. FEATURES — Website_v2 section_preview (preview_grid + preview_card sticky stack)
   v2 CSS: .preview_grid{sticky top:0; margin-bottom:-14vh}
            .preview_card{sticky top:8%; height:84vh; margin-bottom:18vh; display:flex; …}
            .preview_card.is-2{flex-flow:column; justify-content:space-between}
══════════════════════════════ */
#features{
  padding:clamp(64px,10vh,100px) 0 3rem;
  background:var(--bg);
}
.features-header{text-align:center;padding:0 40px;margin-bottom:clamp(40px,6vh,56px);}
.features-h{
  font-family:'Domine',serif;font-size:clamp(32px,4vw,52px);
  font-weight:400;letter-spacing:-.03em;color:var(--text);
  line-height:1.15;max-width:640px;margin:0 auto;
}
.features-sub{
  font-size:clamp(16px,1.8vw,18px);color:var(--t2);line-height:1.55;
  max-width:560px;margin:16px auto 0;font-weight:400;
}

/* .preview_grid — sticky wrapper + overlap next section */
.feature-stack{
  display:grid;
  grid-template-columns:1fr;
  grid-column-gap:0;
  grid-row-gap:0;
  align-items:start;
  max-width:76rem;
  width:100%;
  margin:0 auto -14vh;
  padding:0 clamp(20px,4vw,40px);
  position:sticky;
  top:0;
  z-index:2;
}

/* .preview_card — deck: each card sticks at 8%; next card scrolls over (DOM order = paint order) */
.feature-stack-card{
  align-self:start;
  position:sticky;
  top:8%;
  display:flex;
  flex-direction:row;
  flex-wrap:nowrap;
  align-items:flex-start;
  justify-content:flex-start;
  place-content:center flex-start;
  gap:2rem;
  row-gap:2rem;
  height:84vh;
  max-height:45rem;
  margin-bottom:18vh;
  padding:3.75rem;
  border-radius:2.5rem;
  overflow:hidden;
  box-sizing:border-box;
  border:1px solid var(--border);
  box-shadow:var(--sh-lg);
}
.feature-stack-card:nth-child(1){z-index:1;}
.feature-stack-card:nth-child(2){z-index:2;}
.feature-stack-card:nth-child(3){z-index:3;}
.feature-stack-card:nth-child(4){z-index:4;}

/* v2 .preview_card.is-2 — vertical rhythm */
.feature-stack-card--is2{
  flex-flow:column;
  justify-content:space-between;
}

/* v2 .preview_text-wrap — first card: half width; is-2: full width */
.feat-stack-left{
  flex:none;
  width:50%;
  z-index:5;
  position:relative;
  align-self:flex-start;
  container-type:inline-size;
}
.feature-stack-card--is2 .feat-stack-left{
  width:100%;
  max-width:100%;
  z-index:10;
}
.feat-stack-h{
  font-family:'Domine',serif;
  font-size:clamp(1.75rem,4vw,3.25rem);
  font-weight:500;
  letter-spacing:-.03em;
  line-height:1.1;
  color:var(--text);
  margin:0 0 .75rem;
}
.feat-stack-h--dark{color:var(--text);}
.feat-stack-lead{
  font-size:clamp(15px,1.2rem,17px);
  line-height:1.55;
  color:var(--t2);
  margin:0;
}
.feat-stack-lead--dark{color:var(--t2);}

.feat-stack-right{
  flex:1;
  min-width:0;
  display:flex;
  align-items:stretch;
  z-index:4;
  position:relative;
}
.feature-stack-card--is2 .feat-stack-right{
  width:100%;
  flex:1;
  min-height:0;
}

.feature-stack-card .fc-ui{
  flex:1;
  width:100%;
  min-height:0;
  height:auto;
  overflow:hidden;
  position:relative;
  border-radius:1rem;
}
.feature-stack-card .fc-ui--elevated{
  box-shadow:
    0 0 0 1px rgba(0,0,0,.06) inset,
    0 20px 44px rgba(0,0,0,.12),
    0 4px 14px rgba(0,0,0,.06);
}
/* Card shells — same light language as the rest of the site (accent tints from :root) */
.feature-stack-card.fc1{
  background:linear-gradient(168deg,var(--white) 0%,var(--tealbg) 100%);
}
.feature-stack-card.fc2{
  background:linear-gradient(168deg,var(--white) 0%,var(--limebg) 100%);
}
.feature-stack-card.fc-lesson{
  background:linear-gradient(168deg,var(--white) 0%,#eef2ff 100%);
}
.feature-stack-card.fc3{
  background:linear-gradient(168deg,var(--white) 0%,var(--orangebg) 100%);
}

/* MVP_V10 app surfaces inside feature cards (light shell, same tokens as valed-naled-theme) */
.feature-stack-card.fc1 .fc-ui,
.feature-stack-card.fc2 .fc-ui,
.feature-stack-card.fc-lesson .fc-ui{
  background:var(--bg);
  border:1px solid var(--border);
}
.feature-stack-card.fc3 .fc-ui{
  background:linear-gradient(180deg,#fff 0%,#f8fafc 100%);
  border:1px solid var(--border);
  overflow-x:hidden;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
}

/* ── Lições guiadas — showcase (compose: flex-centred bar | graph: column flow; no vertical morph) ── */
.fc-ui--lesson-showcase{
  --lesson-out:cubic-bezier(.33,0,.2,1);
  --lesson-spring:cubic-bezier(.34,1.35,.64,1);
  --lesson-resize:.55s;
  --lesson-prompt-move:1.05s;
  --lesson-prompt-move-ease:cubic-bezier(.33,0,.2,1);
  container-type:inline-size;
  container-name:lesson-ui;
  display:flex;
  flex-direction:column;
  min-height:0;
  border-radius:1.25rem;
  overflow:hidden;
  flex:1;
  background:
    linear-gradient(165deg,rgba(255,255,255,.65) 0%,rgba(248,250,252,.9) 48%,rgba(238,242,255,.35) 100%);
  border:1px solid rgba(255,255,255,.75);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.9),
    0 1px 0 rgba(0,0,0,.04),
    0 12px 40px rgba(17,17,16,.06);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
}
.lesson-showcase{
  --lesson-content-width:min(42rem,100%);
  flex:1;
  min-height:0;
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:clamp(1.05rem,2.5vw,1.15rem);
  padding:1.2rem;
  font-family:'DM Sans',sans-serif;
  background:transparent;
  border-radius:inherit;
  width:100%;
  box-sizing:border-box;
  transition:none;
}
/* Argand is out of flow when hidden — only the prompt participates; flex centres it vertically */
.lesson-showcase.lesson-phase--typing{
  position:relative;
  justify-content:center;
  flex:1;
  min-height:min(360px,52vh);
}
.lesson-showcase.lesson-phase--typing .lesson-showcase-prompt{
  position:relative;
  margin:0;
  flex-shrink:0;
  width:var(--lesson-content-width);
  max-width:42rem;
  transform:none;
}
.lesson-showcase.lesson-layout-split{
  position:relative;
  align-items:stretch;
  justify-content:flex-start;
  min-height:0;
  flex:1;
  gap:clamp(1.05rem,2.5vw,1.15rem);
  padding-bottom:1.1rem;
  transition:
    gap var(--lesson-resize) var(--lesson-out),
    padding .45s var(--lesson-out);
}
.lesson-showcase.lesson-layout-split .lesson-argand-wrap{
  flex:0 0 auto;
  align-self:center;
  width:var(--lesson-content-width);
  max-width:42rem;
  min-width:0;
  box-sizing:border-box;
}
.lesson-showcase.lesson-layout-split .lesson-showcase-prompt{
  position:relative;
  margin:0 auto;
  flex-shrink:0;
  width:var(--lesson-content-width);
  max-width:42rem;
  transform:none;
  transition:
    opacity .45s var(--lesson-out),
    filter .45s var(--lesson-out);
}
/* JS may set inline transform for FLIP; default is none */
.lesson-showcase-prompt{
  margin:0;
  padding:0;
  border-radius:0;
  background:transparent;
  border:none;
  box-shadow:none;
  position:relative;
  z-index:1;
  overflow:visible;
  box-sizing:border-box;
  width:var(--lesson-content-width);
  max-width:42rem;
  flex-shrink:0;
  transition:
    opacity .45s var(--lesson-out),
    filter .45s var(--lesson-out);
}
/* Gemini-style pill chat bar — light */
.lesson-chat-bar{
  display:flex;
  flex-direction:row;
  align-items:center;
  gap:4px;
  width:100%;
  box-sizing:border-box;
  min-height:52px;
  padding:8px 10px;
  border-radius:999px;
  border:1px solid var(--border);
  background:linear-gradient(180deg,#fff 0%,#f6f6f4 100%);
  box-shadow:
    0 1px 2px rgba(17,17,16,.04),
    0 8px 28px rgba(17,17,16,.06);
  transition:
    border-color .35s var(--lesson-out),
    box-shadow .4s var(--lesson-out),
    opacity .35s var(--lesson-out);
}
.lesson-chat-field{
  flex:1;
  min-width:0;
  min-height:2.25rem;
  display:flex;
  align-items:center;
  position:relative;
  padding:4px 6px 4px 2px;
}
.lesson-chat-placeholder{
  position:absolute;
  left:2px;
  right:8px;
  top:50%;
  transform:translateY(-50%);
  font-size:clamp(14px,1.45vw,16px);
  font-weight:400;
  font-style:normal;
  color:var(--t3);
  pointer-events:none;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  transition:opacity .2s ease;
}
.lesson-showcase-prompt:has(#lesson-typewriter:not(:empty)) .lesson-chat-placeholder{
  opacity:0;
}
.lesson-showcase-prompt.lesson-prompt--sending .lesson-chat-bar{
  opacity:.96;
  border-color:rgba(10,191,176,.35);
  box-shadow:
    0 1px 2px rgba(10,191,176,.08),
    0 10px 32px rgba(10,191,176,.12);
}
/* Hide send while graph layout is active */
#lesson-showcase.lesson-layout-split .lesson-send-btn,
.feature-stack-card.fc-lesson.lesson-flow-generating .lesson-send-btn{
  visibility:hidden;
  opacity:0;
  pointer-events:none;
  transition:
    background .3s var(--lesson-out),
    color .3s var(--lesson-out),
    transform .35s var(--lesson-out),
    box-shadow .4s var(--lesson-out),
    opacity .45s var(--lesson-out),
    visibility 0s linear .45s;
}
.lesson-send-btn{
  position:relative;
  width:40px;
  height:40px;
  border-radius:50%;
  border:none;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:#ebebe8;
  color:var(--t3);
  transition:
    background .3s var(--lesson-out),
    color .3s var(--lesson-out),
    transform .35s var(--lesson-out),
    box-shadow .4s var(--lesson-out),
    opacity .35s var(--lesson-out);
  flex-shrink:0;
  box-shadow:0 1px 4px rgba(0,0,0,.06);
  margin-left:2px;
}
.lesson-send-btn svg{
  margin-top:1px;
  margin-right:1px;
}
.lesson-send-btn:not(:disabled){
  background:var(--text);
  color:var(--white);
  box-shadow:0 4px 16px rgba(17,17,16,.2);
}
.feature-stack-card.fc-lesson.lesson-ready-to-send .lesson-send-btn:not(:disabled){
  box-shadow:
    0 4px 22px rgba(0,0,0,.24),
    0 0 0 3px rgba(10,191,176,.22);
  animation:lessonSendReadyLoop 1.15s var(--lesson-out) infinite;
}
.lesson-send-btn.lesson-send-btn--clickfx{
  animation:lessonSendClickFx .55s var(--lesson-spring) forwards !important;
  z-index:2;
}
.lesson-send-btn.lesson-send-btn--clickfx::after{
  content:'';
  position:absolute;
  inset:-6px;
  border-radius:50%;
  border:2px solid rgba(10,191,176,.55);
  opacity:0;
  animation:lessonSendClickRing .55s var(--lesson-spring) forwards;
  pointer-events:none;
}
.lesson-send-btn:not(:disabled):hover{
  transform:translateY(-2px) scale(1.02);
  box-shadow:0 8px 24px rgba(0,0,0,.18);
}
.lesson-send-btn:not(:disabled):active{
  transform:translateY(0) scale(.97);
}
.lesson-send-btn:disabled{
  cursor:default;
}
.lesson-send-btn.lesson-send-btn--sending{
  animation:lessonSendPulse .62s var(--lesson-spring) forwards;
}
@keyframes lessonSendReadyLoop{
  0%,100%{
    box-shadow:
      0 4px 22px rgba(0,0,0,.24),
      0 0 0 3px rgba(10,191,176,.22);
    transform:scale(1);
  }
  50%{
    box-shadow:
      0 6px 28px rgba(0,0,0,.28),
      0 0 0 6px rgba(10,191,176,.35);
    transform:scale(1.06);
  }
}
@keyframes lessonSendClickFx{
  0%{transform:scale(1.08);box-shadow:0 4px 22px rgba(0,0,0,.28),0 0 0 3px rgba(10,191,176,.35);}
  22%{transform:scale(.72);filter:brightness(.88);}
  48%{transform:scale(1.12);filter:brightness(1.05);}
  72%{transform:scale(.96);}
  100%{transform:scale(1);filter:brightness(1);box-shadow:0 4px 18px rgba(0,0,0,.22);}
}
@keyframes lessonSendClickRing{
  0%{opacity:.9;transform:scale(.85);}
  100%{opacity:0;transform:scale(1.45);}
}
@keyframes lessonSendPulse{
  0%{transform:scale(1);}
  45%{transform:scale(.93);}
  100%{transform:scale(1);}
}
.lesson-typewriter{
  display:inline;
}
.lesson-type-cursor{
  display:inline-block;
  vertical-align:baseline;
  min-width:0.5ch;
  font-weight:300;
  color:var(--teal);
  margin-left:2px;
  font-size:1.05em;
  animation:lessonCursorBlink .9s step-end infinite;
}
.lesson-type-cursor.lesson-type-cursor--off{
  visibility:hidden;
  opacity:0;
  animation:none;
}
@keyframes lessonCursorBlink{
  0%,100%{opacity:1;}
  50%{opacity:0;}
}
.lesson-showcase-quote{
  margin:0;
  min-height:0;
  width:100%;
  font-size:clamp(14px,1.45vw,16px);
  line-height:1.5;
  color:var(--text);
  font-style:italic;
  text-align:left;
}
.lesson-showcase-math{
  font-style:normal;
  font-weight:700;
  color:var(--teal);
  white-space:nowrap;
  font-size:1.08em;
  line-height:inherit;
  vertical-align:baseline;
}
.fc-lesson:not(.lesson-flow-generating) .lesson-argand-wrap{
  opacity:0;
  visibility:hidden;
  transform:translate3d(0,14px,0) scale(.992);
  pointer-events:none;
  position:absolute;
  width:1px;
  height:1px;
  margin:0;
  padding:0;
  overflow:hidden;
  clip:rect(0,0,0,0);
}
.feature-stack-card.fc-lesson.lesson-fade-argand .lesson-argand-wrap{
  opacity:0 !important;
  transition:opacity .65s var(--lesson-out) !important;
}
.fc-lesson.lesson-flow-generating .lesson-argand-wrap{
  opacity:1;
  visibility:visible;
  transform:translate3d(0,0,0) scale(1);
  position:relative;
  width:var(--lesson-content-width);
  max-width:42rem;
  margin-left:auto;
  margin-right:auto;
  height:auto;
  overflow:visible;
  clip:auto;
  box-sizing:border-box;
  transition:
    opacity .65s var(--lesson-out) .08s,
    transform .75s var(--lesson-spring) .06s,
    visibility 0s linear .06s;
  min-height:0;
}
/* Graph stays in layout but hidden until the chat bar FLIP finishes (see script: lesson-graph-reveal-pending) */
.feature-stack-card.fc-lesson.lesson-graph-reveal-pending.lesson-flow-generating .lesson-argand-wrap{
  opacity:0 !important;
  visibility:hidden !important;
  pointer-events:none !important;
  transition:opacity 0s, visibility 0s, transform 0s !important;
}
.lesson-argand-wrap{
  margin:0;
  display:flex;
  flex-direction:column;
  align-items:stretch;
  gap:.75rem;
}
.lesson-argand-caption{
  margin:0;
  padding:0;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:.4rem;
  text-align:left;
}
.lesson-argand-caption-kicker{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size:9.5px;
  font-weight:700;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--teal);
}
.lesson-argand-caption-kicker::before{
  content:'';
  width:8px;
  height:8px;
  border-radius:50%;
  background:var(--teal);
  box-shadow:0 0 0 0 rgba(10,191,176,.4);
  animation:lgLiveDot 1.5s ease-in-out infinite;
}
.fc-lesson.lesson-flow-generating .lesson-argand-caption{
  animation:lgCaptionActivate 5.5s ease-in-out 1 forwards;
}
.lesson-argand-caption-text{
  font-size:clamp(15px,1.75vw,19px);
  font-weight:600;
  color:var(--text);
  letter-spacing:-.02em;
  line-height:1.28;
  max-width:100%;
}
.lesson-argand-svg{
  display:block;
  width:100%;
  box-sizing:border-box;
  height:auto;
  max-height:min(248px,36vh);
  vertical-align:middle;
  padding:9px 8px 11px;
  border-radius:1.1rem;
  background:
    radial-gradient(120% 80% at 50% 0%,rgba(255,255,255,.95) 0%,rgba(245,245,242,.6) 100%);
  border:1px solid var(--border);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.9),
    0 10px 32px rgba(17,17,16,.07);
  filter:drop-shadow(0 2px 12px rgba(10,191,176,.08));
}
@container lesson-ui (min-width:640px){
  .lesson-argand-svg{
    max-height:min(276px,38vh);
  }
}
@container lesson-ui (max-width:639px){
  .fc-lesson.lesson-flow-generating .lesson-argand-wrap{
    min-height:0;
  }
  .lesson-argand-caption{
    align-items:center;
    text-align:center;
  }
  .lesson-argand-caption-kicker::before{
    display:none;
  }
  .lesson-argand-caption-kicker{
    justify-content:center;
  }
  .lesson-argand-svg{
    max-height:min(236px,38vh);
  }
}
@keyframes lgCaptionActivate{
  0%,9%{opacity:0;transform:translate3d(0,14px,0) scale(.985);}
  16%,100%{opacity:1;transform:translate3d(0,0,0) scale(1);}
}
@keyframes lgLiveDot{
  0%,100%{opacity:.85;box-shadow:0 0 0 0 rgba(10,191,176,.35);}
  50%{opacity:1;box-shadow:0 0 0 8px rgba(10,191,176,0);}
}
.fc-lesson.lesson-flow-generating .lesson-argand-shine{
  animation:lgPlaneGlow 5.5s ease-in-out 1 forwards;
}
.fc-lesson.lesson-flow-generating .lesson-argand-grid{
  animation:lgGridIn 5.5s ease-in-out 1 forwards;
}
.fc-lesson.lesson-flow-generating .lesson-axis-re,
.fc-lesson.lesson-flow-generating .lesson-axis-im{
  stroke-dasharray:100;
  stroke-dashoffset:100;
  fill:none;
  animation:lgAxisDraw 5.5s ease-in-out 1 forwards;
}
.fc-lesson.lesson-flow-generating .lesson-axis-im{animation-delay:.04s;}
.fc-lesson.lesson-flow-generating .lesson-argand-labels{
  animation:lgLabelsIn 5.5s ease-in-out 1 forwards;
}
.fc-lesson.lesson-flow-generating .lesson-proj-v,
.fc-lesson.lesson-flow-generating .lesson-proj-h{
  stroke-dasharray:100;
  stroke-dashoffset:100;
  animation:lgProjDraw 5.5s ease-in-out 1 forwards;
}
.fc-lesson.lesson-flow-generating .lesson-proj-h{animation-delay:.08s;}
.fc-lesson.lesson-flow-generating .lesson-argand-point{
  animation:lgPointIn 5.5s ease-in-out 1 forwards;
}
.fc-lesson.lesson-flow-generating .lesson-point-ring{
  transform-origin:center;
  transform-box:fill-box;
  animation:lgRingPulse 2s ease-in-out infinite;
}
.lesson-axis-re,
.lesson-axis-im{
  stroke-dasharray:100;
  stroke-dashoffset:100;
  fill:none;
}
.lesson-proj-v,
.lesson-proj-h{
  stroke-dasharray:100;
  stroke-dashoffset:100;
}
.lesson-point-ring{
  transform-origin:center;
  transform-box:fill-box;
}
@keyframes lgPlaneGlow{
  0%{opacity:.92;}
  100%{opacity:1;}
}
@keyframes lgGridIn{
  0%,15%{opacity:0;}
  18%,100%{opacity:1;}
}
@keyframes lgAxisDraw{
  0%,16%{stroke-dashoffset:100;opacity:0;}
  19%{opacity:1;}
  32%,100%{stroke-dashoffset:0;opacity:1;}
}
@keyframes lgLabelsIn{
  0%,30%{opacity:0;}
  38%,100%{opacity:1;}
}
@keyframes lgProjDraw{
  0%,38%{opacity:0;stroke-dashoffset:100;}
  42%{opacity:1;}
  54%,100%{opacity:1;stroke-dashoffset:0;}
}
@keyframes lgPointIn{
  0%,46%{opacity:0;}
  54%,100%{opacity:1;}
}
@keyframes lgRingPulse{
  0%,100%{opacity:.25;transform:scale(1);}
  50%{opacity:.5;transform:scale(1.12);}
}
@media (prefers-reduced-motion:reduce){
  .feature-stack-card.fc-lesson.lesson-ready-to-send .lesson-send-btn:not(:disabled){
    animation:none !important;
  }
  .lesson-type-cursor{animation:none !important;opacity:0 !important;}
  .fc-lesson:not(.lesson-flow-generating) .lesson-argand-wrap{
    opacity:1 !important;
    visibility:visible !important;
    transform:none !important;
    pointer-events:auto !important;
    position:relative !important;
    width:auto !important;
    height:auto !important;
    overflow:visible !important;
    clip:auto !important;
  }
  .fc-ui--lesson-showcase{
    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;
  }
  .fc-lesson.lesson-flow-generating .lesson-argand-caption,
  .fc-lesson.lesson-flow-generating .lesson-argand-caption-kicker::before{
    animation:none !important;
  }
  .lesson-showcase.lesson-phase--typing .lesson-showcase-prompt{
    position:relative !important;
    transform:none !important;
  }
  .lesson-argand-caption{opacity:1 !important;transform:none !important;}
  .lesson-argand-shine,
  .lesson-argand-grid,
  .lesson-axis-re,
  .lesson-axis-im,
  .lesson-argand-labels,
  .lesson-proj-v,
  .lesson-proj-h,
  .lesson-argand-point,
  .lesson-point-ring{
    animation:none !important;
  }
  .lesson-argand-grid,
  .lesson-argand-labels,
  .lesson-argand-point{opacity:1 !important;}
  .lesson-proj-v,
  .lesson-proj-h{opacity:1 !important;}
  .lesson-axis-re,
  .lesson-axis-im,
  .lesson-proj-v,
  .lesson-proj-h{stroke-dashoffset:0 !important;}
  .lesson-point-ring{transform:none !important;opacity:.35 !important;}
}

/* ═══════════════════════════════════════════════════════════════
   LIVE SESSION (feat-live) — realistic shared board + camera rail
   A student writes in black ink, makes a real mistake; the tutor
   marks it up in red pen. "quadro partilhado", as close to real as
   HTML gets. Paper & lime tokens; scoped under .ls-*.
   ═══════════════════════════════════════════════════════════════ */
.chapter-stage-wrap--live{ max-width:1040px; }

/* One single squared-paper surface — no nested cards or panels */
.ls{
  --ls-paper:#FCFBF7;
  --ls-black:#1C1B18;
  --ls-red:#D6262B;
  --ls-grid:26px;
  position:relative;
  width:100%;
  font-family:'DM Sans',sans-serif;
  color:var(--text);
  /* papel quadriculado — squared math-book grid over warm paper */
  background:
    linear-gradient(rgba(29,71,112,.07) 1px, transparent 1px) 0 0 / 100% var(--ls-grid),
    linear-gradient(90deg, rgba(29,71,112,.07) 1px, transparent 1px) 0 0 / var(--ls-grid) 100%,
    var(--ls-paper);
  border:1px solid var(--border);
  border-radius:22px;
  overflow:hidden;
  padding:30px 34px 84px 44px;
  box-shadow:
    0 0 0 1px rgba(var(--g-lime), .07),
    inset 0 0 40px rgba(120,110,80,.05),
    var(--sh-lg);
}
.ls-prompt{
  margin:0 0 22px;
  max-width:calc(100% - 158px);
}
.ls-prompt-text{font-size:15px;line-height:1.5;color:var(--t2);font-weight:500;}
.ls-prompt-text em{font-style:normal;font-weight:700;color:var(--text);}

.ls-work{display:flex;flex-direction:column;gap:11px;position:relative;z-index:1;}

/* handwriting */
.ls-hand{
  font-family:"Bradley Hand","Segoe Print","Comic Sans MS","Marker Felt",cursive;
  font-weight:600;letter-spacing:.01em;line-height:1.35;
}
.ls-ink-black{color:var(--ls-black);text-shadow:.35px 0 rgba(28,27,24,.25);}
.ls-ink-red{color:var(--ls-red);text-shadow:.35px 0 rgba(214,38,43,.28);}

.ls-line{display:flex;align-items:center;flex-wrap:wrap;gap:2px 8px;font-size:19px;}
.ls-line:nth-child(1){transform:rotate(-.3deg);}
.ls-line:nth-child(2){transform:rotate(.25deg);}
.ls-line:nth-child(3){transform:rotate(-.2deg);}

/* fractions */
.ls-frac{display:inline-flex;flex-direction:column;align-items:center;vertical-align:middle;margin:0 4px;line-height:1;}
.ls-frac-top,.ls-frac-bot{padding:0 6px;font-size:16px;white-space:nowrap;}
.ls-frac-bar{height:2px;width:100%;background:currentColor;border-radius:2px;margin:2px 0;}
.ls-frac--red{color:var(--ls-red);}

/* the mistake — student wrote 2 instead of 2a=4 in the denominator */
.ls-line--err{transform:rotate(.35deg);}
.ls-mistake{position:relative;display:inline-block;padding:0 1px;}
.ls-strike{
  position:absolute;left:-3px;right:-3px;top:48%;height:2.4px;
  background:var(--ls-red);border-radius:2px;transform:rotate(-8deg);
  box-shadow:0 .4px 0 rgba(214,38,43,.3);
}
.ls-mistake-2{position:relative;}
.ls-mistake-2::after{
  content:"";position:absolute;left:-2px;right:-2px;top:52%;height:2.2px;
  background:var(--ls-red);border-radius:2px;transform:rotate(-4deg);
}

/* tutor's margin note in red */
.ls-correction{
  font-size:16px;margin:-4px 0 2px 118px;
  transform:rotate(-1.4deg);display:flex;align-items:center;gap:6px;
}
.ls-correction b{font-weight:800;}
.ls-arrow{font-size:20px;line-height:1;display:inline-block;transform:translateY(-2px) rotate(6deg);}

.ls-fix{transform:rotate(-.3deg);margin-top:2px;}
.ls-eq{font-size:19px;}
.ls-eq--red{color:var(--ls-red);}
.ls-check{font-size:18px;margin-top:6px;transform:rotate(-.6deg);
  color:#0a8f3c;text-shadow:.35px 0 rgba(10,143,60,.25);}

/* ── cameras — float in the corner of the same page (picture-in-picture) ── */
.ls-cams{
  position:absolute;top:22px;right:24px;z-index:3;
  width:168px;display:flex;flex-direction:column;gap:10px;
}
.ls-cam{
  position:relative;margin:0;border-radius:14px;overflow:hidden;
  aspect-ratio:16/10;
  background:#141414;
  box-shadow:0 10px 26px rgba(0,0,0,.18), 0 0 0 2px rgba(var(--g-lime),.4), 0 0 0 5px rgba(255,255,255,.85);
}
.ls-cam--student{box-shadow:0 8px 20px rgba(0,0,0,.16), 0 0 0 1px rgba(0,0,0,.06), 0 0 0 5px rgba(255,255,255,.85);}
.ls-cam-img{
  width:100%;height:100%;object-fit:cover;display:block;
  filter:saturate(1.02) contrast(1.03);
}
.ls-cam--tutor .ls-cam-img{object-position:center 30%;}
.ls-cam--student .ls-cam-img{object-position:center 22%;}
.ls-cam::after{
  content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;
  background:linear-gradient(180deg,transparent 55%,rgba(0,0,0,.42) 100%);
}
.ls-cam-name{
  position:absolute;left:10px;bottom:8px;z-index:2;
  line-height:1.2;
  font-size:12.5px;font-weight:700;color:#fff;
  text-shadow:0 1px 3px rgba(0,0,0,.6);
}

/* ── drawing toolbar ── */
.ls-toolbar{
  position:absolute;left:50%;bottom:18px;transform:translateX(-50%);
  z-index:4;
  display:flex;align-items:center;gap:4px;
  padding:6px;
  background:rgba(255,255,255,.9);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  border:1px solid var(--border);
  border-radius:100px;
  box-shadow:0 8px 24px rgba(0,0,0,.1), 0 2px 6px rgba(0,0,0,.05);
  max-width:calc(100% - 40px);
}
.ls-tool{
  display:inline-flex;align-items:center;gap:6px;
  font-family:'DM Sans',sans-serif;font-size:13px;font-weight:600;
  color:var(--t2);
  background:transparent;border:none;border-radius:100px;
  padding:7px 13px;cursor:pointer;white-space:nowrap;
  transition:background .15s, color .15s;
}
.ls-tool svg{width:16px;height:16px;flex-shrink:0;}
.ls-tool:hover{color:var(--text);background:var(--s2);}
.ls-tool--active{color:var(--limed);background:var(--limebg);}
.ls-tool-sep{width:1px;height:22px;background:var(--border);margin:0 4px;flex-shrink:0;}
.ls-swatches{display:inline-flex;align-items:center;gap:6px;padding:0 6px 0 2px;}
.ls-swatch{
  width:20px;height:20px;border-radius:50%;
  background:var(--c);cursor:pointer;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.12);
  transition:transform .12s;
}
.ls-swatch:hover{transform:scale(1.12);}
.ls-swatch--active{box-shadow:0 0 0 2px var(--white), 0 0 0 4px var(--c);}

/* ── responsive tightening ── */
@media(max-width:720px){
  .ls-cams{width:126px;top:16px;right:16px;gap:8px;}
  .ls-prompt{max-width:calc(100% - 142px);}
  /* Pull the tutor's red correction note in so it stops being clipped on the
     right once the board narrows (full stack of .ls rules kicks in at 520px). */
  .ls-correction{margin-left:96px;}
}
@media(max-width:520px){
  .ls{padding:22px 18px 76px 30px;}
  .ls-line{font-size:16px;}
  .ls-frac-top,.ls-frac-bot,.ls-eq{font-size:14px;}
  .ls-correction{margin-left:78px;font-size:14px;}
  .ls-cams{position:relative;top:auto;right:auto;width:100%;flex-direction:row;gap:10px;margin:0 0 18px;}
  .ls-cam{flex:1 1 0;box-shadow:0 8px 20px rgba(0,0,0,.16), 0 0 0 2px rgba(var(--g-lime),.4);}
  .ls-cam--student{box-shadow:0 8px 20px rgba(0,0,0,.16), 0 0 0 1px rgba(0,0,0,.06);}
  .ls-prompt{max-width:none;}
  .ls-toolbar{gap:2px;padding:5px;left:14px;right:14px;transform:none;max-width:none;justify-content:space-between;}
  .ls-tool{font-size:12px;padding:6px 8px;gap:4px;}
  .ls-tool svg{width:14px;height:14px;}
  .ls-tool-sep,.ls-swatches{display:none;}
}
/* ── Card 3: ValedProgress.js — MVP10-aligned progress shell ── */
.fc-ui--mvp-progress{
  display:flex;flex-direction:column;min-height:0;border-radius:1rem;
  overflow:hidden;
}
.vprog-inner{
  padding:16px 16px 18px;
  display:flex;flex-direction:column;gap:14px;
  min-height:0;
  font-family:'DM Sans',sans-serif;
}
.vprog-head-row{
  display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;gap:8px;
}
.vprog-page-title{
  margin:0;font-size:1.15rem;font-weight:600;color:var(--text);
}
.vprog-head-actions{display:flex;flex-wrap:wrap;gap:6px;}
.vprog-btn-outline{
  font-size:9px;padding:6px 10px;border-radius:10px;
  border:1px solid var(--border);color:var(--teal);background:var(--white);
}
.vprog-btn-outline--muted{color:var(--t2);border-color:var(--border);}
.vprog-kpi-row{
  display:grid;grid-template-columns:1fr 1fr;gap:10px;
}
.vprog-kpi-row--single{
  grid-template-columns:1fr;
}
.vprog-kpi-card{
  border:none;border-radius:18px;
  padding:14px 16px;
  box-shadow:var(--sh-md);
  background:var(--white);
  display:flex;flex-direction:column;gap:6px;
  border:1px solid rgba(232,232,228,.85);
}
.vprog-kpi-label{
  font-size:0.6875rem;font-weight:700;text-transform:uppercase;
  letter-spacing:.11em;color:var(--t3);
}
.vprog-kpi-num{
  font-family:'DM Sans',sans-serif;
  font-size:clamp(1.75rem, 4vw, 2rem);
  font-weight:600;
  letter-spacing:-.02em;
  color:var(--text);
  line-height:1.05;
}
.vprog-kpi-sub{
  font-size:0.8125rem;color:var(--t2);
  font-weight:500;
}
.vprog-kpi-desc{margin:0;font-size:0.75rem;color:var(--t3);line-height:1.4;}
.vprog-bar{
  height:8px;border-radius:99px;
  background:linear-gradient(180deg, #e8e8e4 0%, #efefeb 100%);
  overflow:hidden;margin-top:4px;
  box-shadow:inset 0 1px 2px rgba(0,0,0,.07);
}
.vprog-bar--kpi{
  height:9px;margin-top:8px;
}
.vprog-bar--sm{
  height:7px;border-radius:99px;margin-top:10px;
}
.vprog-bar-fill{
  height:100%;border-radius:inherit;
  background:linear-gradient(90deg, var(--lime) 0%, var(--limed) 100%);
  box-shadow:0 0 0 1px rgba(255,255,255,.2) inset;
}

.vprog-bar-fill--info{
  background:linear-gradient(90deg, var(--lime) 0%, var(--limed) 100%);
  opacity:.55;
  box-shadow:0 0 0 1px rgba(255,255,255,.15) inset;
}
.vprog-section-head{
  display:flex;flex-direction:column;gap:5px;
  margin-top:2px;
}
.vprog-section-eyebrow{
  font-size:9px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--teal);
}
.vprog-section-title{
  font-size:1.0625rem;font-weight:700;color:var(--text);
  letter-spacing:-.02em;
  margin:0;
  line-height:1.25;
}
/* Clips domain list so the last visible row reads as “more below” (decorative mock). */
.vprog-domain-list-wrap{
  overflow:hidden;
  position:relative;
  max-height:clamp(15.75rem, 38vh, 28rem);
  border-radius:4px;
}
.vprog-domain-list{
  display:flex;flex-direction:column;gap:9px;
}
.vprog-domain-card{
  border-radius:14px;padding:11px 13px 12px;
  box-shadow:
    0 1px 2px rgba(0,0,0,.04),
    0 4px 14px rgba(0,0,0,.05);
  background:var(--white);
  border:1px solid var(--borderlt);
  transition:box-shadow .2s ease, transform .2s ease;
}
.feature-stack-card.fc3 .vprog-domain-card:hover{
  box-shadow:
    0 2px 4px rgba(0,0,0,.05),
    0 8px 22px rgba(0,0,0,.07);
  transform:translateY(-1px);
}
@media(prefers-reduced-motion:reduce){
  .feature-stack-card.fc3 .vprog-domain-card:hover{transform:none;}
}
.vprog-domain-card--done{
  background:linear-gradient(105deg, rgba(242,255,217,.5) 0%, #ffffff 55%);
  border-color:var(--borderlt);
}
.vprog-domain-top{
  display:flex;justify-content:space-between;align-items:flex-start;gap:10px;
  margin-bottom:8px;
}
.vprog-domain-name{
  font-size:0.9rem;font-weight:600;color:var(--text);
  letter-spacing:-.015em;line-height:1.3;
}
.vprog-domain-count{
  font-size:0.8125rem;font-weight:600;color:var(--t2);
  font-variant-numeric:tabular-nums;
  flex-shrink:0;
  padding:3px 8px;border-radius:100px;
  background:rgba(0,0,0,.035);
  border:1px solid rgba(0,0,0,.06);
}
.vprog-domain-card--done .vprog-domain-count{
  color:var(--t2);
  background:rgba(0,0,0,.035);
  border-color:rgba(0,0,0,.06);
}

/* ══════════════════════════════
   3. STORIES CAROUSEL (tutor depoimentos)
══════════════════════════════ */

/* Stories / tutor stories — carousel */
.stories-carousel{max-width:100%;}
.carousel-row{
  display:flex;align-items:center;gap:12px;
  max-width:1260px;margin:0 auto;padding:0 40px;
}
.carousel-viewport{
  flex:1;min-width:0;
  overflow-x:auto;overflow-y:hidden;
  scroll-snap-type:x mandatory;
  scroll-behavior:smooth;
  scrollbar-width:none;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior-x:contain;
  overscroll-behavior-y:auto;
}
.carousel-viewport::-webkit-scrollbar{display:none;}
.carousel-track{
  position:relative;
  display:flex;gap:14px;
  /* Room for translateY + box-shadow inside the viewport clip (avoids one-sided shadow artifacts) */
  padding:32px 32px 96px;
}
.carousel-slide{
  flex:0 0 min(340px,calc(100vw - 120px));
  scroll-snap-align:center;
  min-width:0;
}
.carousel-slide .story-card{
  width:100%;max-width:100%;
}
.carousel-btn{
  flex-shrink:0;width:44px;height:44px;border-radius:50%;
  border:1px solid var(--border);background:var(--white);
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;color:var(--text);
  transition:background .2s,box-shadow .2s,opacity .2s;
}
.carousel-btn:hover:not(:disabled){
  background:var(--bg);box-shadow:var(--sh-md);
}
.carousel-btn:disabled{opacity:.35;cursor:not-allowed;}
.carousel-dots{
  display:flex;justify-content:center;align-items:center;gap:8px;
  margin-top:18px;padding:0 40px;
}
.carousel-dot{
  width:8px;height:8px;border-radius:99px;border:none;padding:0;
  background:var(--border);cursor:pointer;
  transition:width .25s,background .25s;
}
.carousel-dot.active{background:var(--text);width:22px;}
.stories-carousel--dark .carousel-btn{
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.14);
  color:rgba(255,255,255,.9);
}
.stories-carousel--dark .carousel-btn:hover:not(:disabled){
  background:rgba(255,255,255,.12);box-shadow:none;
}
.stories-carousel--dark .carousel-dot{background:rgba(255,255,255,.22);}
.stories-carousel--dark .carousel-dot.active{background:var(--lime);width:22px;}

/* Static testimonial row — 3 cards, no auto-scroll (student + tutor) */
.stories-carousel--static{
  width:100%;
  max-width:none;
}
.carousel-viewport.carousel-viewport--static{
  overflow:visible;
  width:100%;
  padding-left:clamp(16px,4vw,40px);
  padding-right:clamp(16px,4vw,40px);
  scroll-snap-type:none;
}
.carousel-track.carousel-track--static{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:14px;
  width:100%;
  max-width:1160px;
  margin:0 auto;
  padding:32px 0 96px;
}
.stories-carousel--static .carousel-slide{
  min-width:0;
  scroll-snap-align:none;
}
/* Mobile / narrow: same cards in a horizontal strip (not stacked) */
@media (max-width:900px){
  .stories-carousel--static .carousel-viewport.carousel-viewport--static{
    overflow-x:auto;
    overflow-y:hidden;
    scroll-snap-type:x mandatory;
    scroll-behavior:smooth;
    -webkit-overflow-scrolling:touch;
    overscroll-behavior-x:contain;
  }
  .carousel-track.carousel-track--static{
    display:flex;
    flex-direction:row;
    flex-wrap:nowrap;
    align-items:stretch;
    gap:14px;
    width:max-content;
    max-width:none;
    margin:0;
    padding:32px clamp(16px,4vw,40px) 96px;
    box-sizing:content-box;
  }
  .stories-carousel--static .carousel-slide{
    flex:0 0 min(300px,calc(100vw - 48px));
    scroll-snap-align:center;
    max-width:none;
  }
}

.story-spacer{} /* side padding placeholder */

.story-card{
  height:480px;border-radius:24px;overflow:hidden;
  cursor:pointer;transition:transform .3s,box-shadow .3s;
  position:relative;flex-shrink:0;
  -webkit-overflow-scrolling:auto;
}
/* Stories — fill from top; row height still matches tallest card (tutors) */
#t-stories .carousel-slide{
  display:flex;
  flex-direction:column;
  min-height:0;
}
#t-stories .story-card{
  flex:1;
  display:flex;
  flex-direction:column;
  min-height:360px;
  height:auto;
  align-self:stretch;
}
.story-card:hover{
  transform:translateY(-4px);
  z-index:2;
  box-shadow:
    0 16px 40px rgba(0,0,0,.12),
    0 6px 16px rgba(0,0,0,.08);
}

/* Card backgrounds */
.sc-lime{background:linear-gradient(160deg,#D6FE8A,#BDFD50);}
.sc-teal{background:linear-gradient(160deg,#0ABFB0,#04837A);}
.sc-dark{background:linear-gradient(160deg,#1a1a18,#2e2e2a);}

.story-inner{padding:28px 28px;height:100%;display:flex;flex-direction:column;overflow:hidden;}
/* Text block spans full card width (no narrow column) */
#t-stories .story-inner{
  flex:1;
  min-height:0;
  height:auto;
  align-items:stretch;
  justify-content:flex-start;
  /* Slightly tighter sides so the quote uses more of the card width */
  padding:24px clamp(12px,1.85vw,18px);
}
#t-stories .story-stack{
  width:100%;
  min-width:0;
  display:flex;
  flex-direction:column;
  align-items:stretch;
  flex:1;
}
#t-stories .story-body{
  width:100%;
  max-width:none;
  font-size:clamp(17px,2.35vw,24px);
  font-weight:500;
  line-height:1.42;
  letter-spacing:-.015em;
  margin-bottom:0;
}
#t-stories .story-attribution{
  margin-top:auto;
  padding-top:20px;
  font-size:clamp(14.5px,1.25vw,16.5px);
  font-weight:700;
  letter-spacing:-.02em;
}
#t-stories .story-attribution.dark{color:var(--text);}
#t-stories .story-attribution.light{color:var(--white);}

.story-stat{
  font-family:'Domine',serif;
  font-size:clamp(36px,5vw,56px);
  font-weight:400;line-height:1;letter-spacing:-.04em;
  margin-bottom:10px;
}
.story-stat.dark{color:var(--text);}
.story-stat.light{color:var(--white);}

.story-body{
  font-size:14px;line-height:1.65;margin-bottom:16px;
  width:100%;max-width:100%;
}
.story-body.dark{color:rgba(17,17,16,.65);}
.story-body.light{color:rgba(255,255,255,.65);}

.story-attribution{font-size:12px;font-weight:600;}
.story-attribution.dark{color:var(--text);}
.story-attribution.light{color:rgba(255,255,255,.9);}

/* Mini app UI inside story card */
.story-ui{
  flex:1;display:flex;align-items:flex-end;
  margin:0 -28px;padding:0 16px 0;overflow:hidden;
  pointer-events:none;
}

/* ══════════════════════════════
   6. FINAL CTA
══════════════════════════════ */
#cta,
#t-cta{
  background:var(--text);padding:100px 40px;
  text-align:center;
  min-height:auto;
}
.cta-h{
  font-family:'Domine',serif;font-size:clamp(36px,5vw,64px);
  font-weight:400;letter-spacing:-.04em;color:var(--white);
  line-height:1.1;max-width:600px;margin:0 auto 14px;
}
.cta-h em{font-style:normal;color:var(--lime);}
.btn-lime{
  background:var(--lime);color:var(--text);font-size:15px;font-weight:700;
  padding:14px 34px;border-radius:8px;border:none;cursor:pointer;
  font-family:'DM Sans',sans-serif;text-decoration:none;
  display:inline-flex;align-items:center;gap:8px;
  transition:all .2s;
  box-shadow:0 4px 20px rgba(189,253,80,.25);
}
.btn-lime:hover{transform:translateY(-2px);box-shadow:0 8px 32px rgba(189,253,80,.35);}

/* ══════════════════════════════
   FOOTER
══════════════════════════════ */
footer{
  background:var(--text);border-top:1px solid rgba(255,255,255,.08);
  padding:48px 40px 32px;
}
.footer-inner{
  max-width:1100px;margin:0 auto;
  display:grid;grid-template-columns:200px 1fr 1fr 1fr;gap:40px;
}
.footer-logo{margin-bottom:10px;}
.footer-logo-img{height:32px;width:auto;display:block;filter:invert(1);}
.footer-tagline{font-size:12.5px;color:rgba(255,255,255,.35);line-height:1.6;}
.footer-col-title{font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.3);margin-bottom:14px;}
.footer-link{display:block;font-size:13.5px;color:rgba(255,255,255,.5);text-decoration:none;margin-bottom:8px;transition:color .15s;}
.footer-link:hover{color:var(--white);}
.footer-bottom{
  max-width:1100px;margin:32px auto 0;
  border-top:1px solid rgba(255,255,255,.07);
  padding-top:20px;display:flex;justify-content:space-between;
  font-size:12px;color:rgba(255,255,255,.2);
}

/* ══════════════════════════════════════
   TUTOR PAGE STYLES
══════════════════════════════════════ */

/* Dark page base */
:root{ --dark:#0E0E0D; --dark2:#161614; --dark3:#1E1E1B; --dark4:#262622; }

/* ── TUTOR HERO — identical to the student hero (#hero); layout + type come from
   the shared `#hero, #t-hero` rules above. Uses .hero-inner / .hero-art like #hero. ── */

/* Student ↔ tutor: full-viewport dimmer (lights off → swap → lights on) */
.hero-lights-overlay{
  position:fixed;
  inset:0;
  z-index:95;
  pointer-events:none;
  background:radial-gradient(ellipse 130% 90% at 50% 35%, #0a0c10 0%, #000 52%);
  opacity:0;
  visibility:hidden;
}
body.hero-page-switching .hero-lights-overlay{
  pointer-events:auto;
}
body.hero-page-switching #main-nav{
  z-index:200;
}
/* ══════════════════════════════════════════════════════════════
   TUTOR PAGE — rebuilt on the student chapter/stage system.
   Same eyebrow icons, Fraunces/Domine <em> headers, alternating
   2-col chapters, white stages + lime aurora. Strict lime-only:
   one lime accent (--lime) + deep olive (--limed) + neutral ink.
   Layout primitives (.chapter, .stage, .aurora, .eyebrow) live in
   sections.css and are shared with the students page.
   ══════════════════════════════════════════════════════════════ */

/* Stage inner padding — tutor mockups are content, not choreographed scenes */
.stage .viewport.t-stage-pad{
  padding:clamp(20px,3vw,34px);
  display:flex;
  align-items:center;
  justify-content:center;
}

/* Wide stage (group grid) — a band, not a square */
.stage.stage--wide{
  aspect-ratio:auto;
  min-height:clamp(340px,42vw,460px);
}

/* Shared avatar (initials) — lime-only, no per-student gradients */
.t-avatar{
  width:34px;height:34px;border-radius:50%;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  font-size:12px;font-weight:700;letter-spacing:.02em;
  color:var(--limed);
  background:var(--limebg);
  border:1px solid rgba(90,130,0,.18);
}
.t-avatar--sm{ width:30px;height:30px;font-size:11px; }

/* Shared mastery bar (lime fill; muted olive-grey for low mastery) */
.t-mtrack{
  flex:1;min-width:0;height:6px;
  background:rgba(17,17,16,.07);
  border-radius:99px;overflow:hidden;
}
.t-mfill{
  height:100%;border-radius:99px;
  background:var(--limed);
}
.t-mfill--low{ background:rgba(17,17,16,.28); }
#t-group .t-scard-stall.draining .t-mfill-drain{ background:#FF5A4D; }

/* Small pill used across mockups */
.t-chip{
  font-size:10px;font-weight:700;letter-spacing:.04em;
  padding:4px 10px;border-radius:100px;
  color:var(--limed);
  background:var(--limebg);
  border:1px solid rgba(90,130,0,.2);
  white-space:nowrap;
}

/* ─────────── BRIEFING — inside a square stage ─────────── */
.t-brief{
  position:relative;z-index:2;
  width:100%;max-width:400px;
  background:var(--white);
  border:1px solid var(--border);
  border-radius:18px;
  box-shadow:var(--sh-md);
  padding:clamp(16px,2vw,20px);
}
.t-brief-head{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding-bottom:14px;margin-bottom:14px;
  border-bottom:1px solid var(--borderlt);
}
.t-brief-id{ display:flex;align-items:center;gap:11px;min-width:0; }
.t-brief-name{ font-size:13.5px;font-weight:600;color:var(--text);line-height:1.2; }
.t-brief-meta{ font-size:11px;color:var(--t3);margin-top:2px; }
.t-brief-section-label{
  font-size:9.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  color:var(--t3);margin-bottom:10px;
}
.t-brief-bars{ display:flex;flex-direction:column;gap:9px; }
.t-mrow{ display:flex;align-items:center;gap:10px; }
.t-mrow-label{
  font-size:12px;color:var(--t2);
  width:clamp(6.5rem,42%,8.5rem);flex-shrink:0;
}
.t-mrow-pct{
  font-size:11px;font-weight:700;color:var(--limed);
  width:30px;text-align:right;
}
.t-mrow--low .t-mrow-pct{ color:var(--t3); }
.t-brief-divider{ height:1px;background:var(--borderlt);margin:14px 0; }
.t-err-row{ display:flex;align-items:center;gap:9px;margin-bottom:8px; }
.t-err-row:last-child{ margin-bottom:0; }
.t-err-badge{
  font-size:9.5px;font-weight:700;
  padding:3px 8px;border-radius:100px;flex-shrink:0;
  color:var(--limed);background:var(--limebg);
  border:1px solid rgba(90,130,0,.16);
}
.t-err-text{ font-size:12px;color:var(--t2);line-height:1.4; }

/* ─────────── LIVE SESSION + AI — inside a square stage ─────────── */
.t-live{
  position:relative;z-index:2;
  width:100%;max-width:400px;
  display:flex;flex-direction:column;gap:10px;
}
.t-live-video{
  position:relative;
  height:clamp(120px,20vh,168px);
  border-radius:14px;overflow:hidden;
  background:var(--s2);
  border:1px solid var(--border);
}
.t-live-video-main{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:center 20%;
}
.t-live-video-tag{
  position:absolute;bottom:8px;left:10px;z-index:1;
  font-size:10px;font-weight:600;color:#fff;
  background:rgba(0,0,0,.5);border-radius:100px;padding:3px 9px;
}
.t-live-video-pip{
  position:absolute;bottom:8px;right:10px;z-index:1;
  width:clamp(58px,16vw,76px);height:clamp(42px,12vw,56px);
  border-radius:8px;overflow:hidden;
  border:1.5px solid rgba(255,255,255,.9);
  box-shadow:0 4px 14px rgba(0,0,0,.25);
}
.t-live-video-pip img{ width:100%;height:100%;object-fit:cover;object-position:center 15%;display:block; }
.t-live-label{
  font-size:9.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  color:var(--t3);margin-top:2px;
}
.t-ai-card{
  background:var(--white);
  border:1px solid var(--border);
  border-radius:13px;
  box-shadow:var(--sh);
  padding:11px 13px 12px;
}
.t-ai-card--alert{ border-color:rgba(17,17,16,.14); }
.t-ai-card--next{ border-color:rgba(90,130,0,.28); background:linear-gradient(180deg,#fff, var(--limebg)); }
.t-ai-head{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  margin-bottom:7px;
}
.t-ai-tag{
  font-size:9.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--text);
}
.t-ai-card--next .t-ai-tag{ color:var(--limed); }
.t-ai-body{
  margin:0;font-size:12.5px;color:var(--t2);line-height:1.45;
}
.t-ai-body strong{ color:var(--text);font-weight:600; }
.t-ai-kicker{
  display:inline-block;margin-right:6px;
  padding:2px 7px;border-radius:6px;
  font-size:11px;font-weight:700;
  color:var(--limed);background:var(--limebg);
  vertical-align:baseline;
}

/* Exercise bank rows inside the live-session card — real attempt-history badges */
.t-live-ex-row{
  display:flex;align-items:center;gap:8px;
  padding:6px 0;
}
.t-live-ex-row + .t-live-ex-row{ border-top:1px solid var(--borderlt); }
.t-live-ex-num{
  font-size:10.5px;font-weight:700;color:var(--t3);flex-shrink:0;
}
.t-live-ex-title{
  font-size:12px;color:var(--text);line-height:1.3;
  flex:1;min-width:0;
}
.t-live-ex-badge{
  font-size:9.5px;font-weight:700;white-space:nowrap;flex-shrink:0;
  padding:3px 8px;border-radius:100px;
}
.t-live-ex-badge--wrong{ color:#B23A2E;background:rgba(178,58,46,.09); }
.t-live-ex-badge--none{ color:var(--t3);background:rgba(17,17,16,.05); }

/* Send-to-student button — mirrors the real session's "Enviar" action */
.t-live-send-btn{
  position:relative;
  display:flex;align-items:center;justify-content:center;
  width:100%;margin-top:9px;padding:8px 10px;
  border:none;border-radius:9px;cursor:default;
  font-size:11.5px;font-weight:700;font-family:inherit;
  color:#fff;background:var(--ink);
  overflow:hidden;
}
.t-live-send-label, .t-live-send-done{
  transition:opacity .3s ease, transform .3s ease;
}
.t-live-send-done{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  opacity:0;transform:translateY(6px);
  background:var(--limed);color:var(--ink);
}
.t-live-send-btn.sent .t-live-send-label{ opacity:0;transform:translateY(-6px); }
.t-live-send-btn.sent .t-live-send-done{ opacity:1;transform:translateY(0); }

/* ─────────── GROUP SESSION — inside a wide stage ─────────── */
.t-group{
  position:relative;z-index:2;
  width:100%;max-width:1040px;
  background:var(--white);
  border:1px solid var(--border);
  border-radius:18px;overflow:hidden;
  box-shadow:var(--sh-md);
}
.t-group-head{
  display:flex;align-items:center;justify-content:space-between;
  flex-wrap:wrap;gap:8px;
  padding:14px 18px;
  border-bottom:1px solid var(--borderlt);
}
.t-group-title{ font-size:14px;font-weight:600;color:var(--text);letter-spacing:-.01em; }
.t-group-meta{ font-size:12px;color:var(--t3);display:flex;align-items:center;gap:6px; }
.t-group-meta-sep{ color:var(--borderlt); }
.t-group-live{
  display:inline-flex;align-items:center;gap:6px;
  font-weight:700;color:var(--limed);
  letter-spacing:.02em;
}
.t-group-live-dot{
  position:relative;
  width:7px;height:7px;border-radius:50%;flex-shrink:0;
  background:var(--limed);
}
.t-group-live-dot::after{
  content:'';position:absolute;inset:0;border-radius:50%;
  background:var(--limed);
  animation:t-brief-ping 1.8s cubic-bezier(0,0,.2,1) infinite;
}
.t-group-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:1px;
  background:var(--borderlt);
}
.t-scard{
  background:var(--white);
  padding:14px 14px 15px;
}
.t-scard--alert{ background:#FBFAF6; }
.t-scard--great{ background:var(--limebg); }
.t-scard-top{ display:flex;align-items:flex-start;gap:10px;margin-bottom:12px; }
.t-scard-name{ font-size:13px;font-weight:600;color:var(--text);line-height:1.2; }
.t-scard-topic{ font-size:11px;color:var(--t3);margin-top:3px; }
.t-scard-topic--alert{ color:var(--limed);font-weight:600; }
.t-scard-warn{
  margin-left:auto;flex-shrink:0;
  width:22px;height:22px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:12px;font-weight:800;
  color:var(--limed);background:var(--limebg);
  border:1px solid rgba(90,130,0,.28);
}
.t-scard-row{
  display:flex;align-items:center;gap:9px;margin-bottom:7px;
}
.t-scard-row:last-child{ margin-bottom:0; }
.t-scard-row > span:first-child{
  font-size:10.5px;color:var(--t3);
  width:64px;flex-shrink:0;
}
.t-scard-pct{
  font-size:11px;font-weight:700;color:var(--text);
  width:34px;text-align:right;
}
.t-group-alert{
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  padding:13px 18px;
  background:var(--limebg);
  border-top:1px solid rgba(90,130,0,.16);
}
.t-group-alert-dot{
  width:9px;height:9px;border-radius:50%;flex-shrink:0;
  background:var(--limed);
  animation:t-pulse 2s infinite;
}
.t-group-alert-text{
  flex:1;min-width:min(240px,100%);
  font-size:13px;color:var(--t2);line-height:1.4;
}
.t-group-alert-text strong{ color:var(--text);font-weight:600; }
.t-group-alert-btn{
  margin-left:auto;
  font-size:12.5px;font-weight:700;
  padding:9px 18px;border-radius:100px;cursor:pointer;
  font-family:'DM Sans',sans-serif;white-space:nowrap;
  color:var(--text);background:var(--lime);border:none;
  box-shadow:0 2px 10px rgba(189,253,80,.35);
  transition:transform .15s, box-shadow .15s;
}
.t-group-alert-btn:hover{ transform:translateY(-1px);box-shadow:0 6px 18px rgba(189,253,80,.4); }

/* ─────────── EARNINGS — inside a square stage ─────────── */
.t-earn-points{ display:flex;flex-direction:column;gap:12px;margin-top:24px; }
.t-earn-point{
  display:flex;gap:11px;align-items:flex-start;
  font-size:14px;color:var(--t2);line-height:1.5;
}
.t-earn-point strong{ color:var(--text);font-weight:600; }
.t-earn-dot{
  width:7px;height:7px;border-radius:50%;flex-shrink:0;margin-top:7px;
  background:var(--limed);
}
.t-earn{
  position:relative;z-index:2;
  width:100%;max-width:380px;
  background:var(--white);
  border:1px solid var(--border);
  border-radius:18px;
  box-shadow:var(--sh-md);
  padding:clamp(18px,2.2vw,24px);
}
.t-earn-label{
  font-size:9.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  color:var(--t3);margin-bottom:16px;
}
.t-earn-line{
  display:flex;justify-content:space-between;align-items:center;gap:12px;
  font-size:13px;color:var(--t2);
  padding:9px 0;border-bottom:1px solid var(--borderlt);
}
.t-earn-val{ color:var(--text);font-weight:600; }
.t-earn-line--muted{ color:var(--t3);font-size:12.5px; }
.t-earn-total{
  display:flex;justify-content:space-between;align-items:center;
  margin-top:18px;padding:18px 20px;
  background:var(--limebg);
  border:1px solid rgba(90,130,0,.2);
  border-radius:14px;
}
.t-earn-total-label{ font-size:13px;color:var(--t2); }
.t-earn-total-val{
  font-family:'Domine',serif;font-size:38px;font-weight:400;
  color:var(--limed);letter-spacing:-.02em;line-height:1;
}
.t-earn-note{
  font-size:11px;color:var(--t3);text-align:center;margin-top:12px;
}

@keyframes t-pulse{0%,100%{opacity:1;}50%{opacity:.3;}}

/* ══════════════════════════════════════════════════════════════
   TUTOR STAGE CHOREOGRAPHY
   The four tutor mockups now assemble like the student stages:
   aurora fades up, elements reveal in a stagger, mastery bars grow
   from zero, numbers count up, then the scene holds and loops.
   Same motion vocabulary as #feat-prog / #feat-cov.
   Drivers: sections.js  (adds .playing → reveals .t-r → .in;
   JS drives .t-mfill width from data-target and counts data-count).
   ══════════════════════════════════════════════════════════════ */

/* Aurora is dark until the scene plays, then breathes to life */
#t-briefing .stage .aurora,
#t-live .stage .aurora,
#t-group .stage .aurora,
#t-earn .stage .aurora{
  opacity:0;
  transition:opacity 1.4s ease;
}
#t-briefing .stage.playing .aurora,
#t-live .stage.playing .aurora,
#t-earn .stage.playing .aurora{ opacity:.30; }
#t-group .stage.playing .aurora{ opacity:.24; }
/* When Ana stalls, the group aurora warms up a touch */
#t-group .stage.stalled .aurora{ opacity:.4; }

/* Generic reveal unit — hidden until JS adds .in, then floats up.
   The mockup card itself (.t-brief/.t-live/.t-group/.t-earn) stays
   visible; only its inner .t-r pieces animate in. */
#t-briefing .t-r,
#t-live .t-r,
#t-group .t-r,
#t-earn .t-r{
  opacity:0;
  transform:translateY(12px);
  transition:opacity .55s cubic-bezier(.22,1,.36,1),
             transform .55s cubic-bezier(.22,1,.36,1);
  will-change:opacity, transform;
}
#t-briefing .t-r.in,
#t-live .t-r.in,
#t-group .t-r.in,
#t-earn .t-r.in{
  opacity:1;
  transform:translateY(0);
}

/* Mastery / student bars grow from zero (JS sets the width) */
#t-briefing .t-mfill,
#t-group .t-mfill{
  width:0;
  transition:width 1s cubic-bezier(.22,1,.36,1);
}

/* Whole mockup card fades out on loop restart */
#t-briefing .t-brief,
#t-live .t-live,
#t-group .t-group,
#t-earn .t-earn{
  transition:opacity .5s ease;
}
#t-briefing .stage.fade-out .t-brief,
#t-live .stage.fade-out .t-live,
#t-group .stage.fade-out .t-group,
#t-earn .stage.fade-out .t-earn{ opacity:0; }

/* ════════════════════════════════════════════════════════════════
   BRIEFING — two-act scene, styled like #feat-ai (student "tutor IA")
   Act 1: an incoming session request glows, a cursor presses "Aceitar".
   Act 2: the request collapses to a confirmed strip and the brief
   assembles inside the same card while the camera pulls back.
   States (on .stage): playing → s-accepting → s-accepted → s-brief.
   ════════════════════════════════════════════════════════════════ */

/* Kill transitions during a hard reset so nothing animates on restart */
#t-briefing .stage.resetting,
#t-briefing .stage.resetting *,
#t-briefing .stage.resetting *::before,
#t-briefing .stage.resetting *::after{
  transition:none !important;
  animation:none !important;
}

/* The scene: camera pushes in on the request, pulls back for the brief */
#t-briefing .t-brief-scene{
  position:absolute;
  left:50%; top:50%;
  width:min(400px, 82%);
  transform:translate(-50%,-50%) scale(1.06);
  transform-origin:center center;
  filter:blur(6px);
  opacity:0;
  transition:transform 1s cubic-bezier(.22,1,.36,1), filter .6s ease, opacity .5s ease;
}
#t-briefing .stage.playing .t-brief-scene{
  filter:blur(0); opacity:1;
  transform:translate(-50%,-50%) scale(1.06);
}
#t-briefing .stage.s-brief .t-brief-scene{
  transform:translate(-50%,-50%) scale(1);
  transition:transform .9s cubic-bezier(.22,1,.36,1), filter .6s ease, opacity .5s ease;
}
/* Fade the whole scene out on loop restart (overrides the shared .t-brief rule) */
#t-briefing .stage.fade-out .t-brief-scene{ opacity:0; }

/* ════════════════════════════════════════════════════════════════
   ACT 0 · the notification — a paper-plane pill flies in from the
   RIGHT (bigger), settles, and opens ONLY when the cursor clicks it.
   States: playing (fly in) → s-notif-aim (cursor arrives) →
           s-notif-click (press) → s-open (dissolves into the card).
   ════════════════════════════════════════════════════════════════ */
#t-briefing .t-brief-notif{
  position:absolute;
  left:50%; top:50%;
  z-index:4;
  display:flex;align-items:center;justify-content:center;
  pointer-events:none;
  /* Whole notification flies in from the right, bigger */
  opacity:0;
  transform:translate(-50%,-50%) translateX(300px) scale(1.35);
}
#t-briefing .stage.playing .t-brief-notif{
  animation:t-brief-fly 1.2s cubic-bezier(.2,.7,.25,1) forwards;
}
@keyframes t-brief-fly{
  0%   { opacity:0; transform:translate(-50%,-50%) translateX(300px) scale(1.35); }
  22%  { opacity:1; }
  100% { opacity:1; transform:translate(-50%,-50%) translateX(0) scale(1.35); }
}
/* A gentle nudge when the cursor presses it */
#t-briefing .stage.s-notif-click .t-brief-notif{
  animation:t-brief-notif-press .4s cubic-bezier(.34,1.56,.64,1);
}
@keyframes t-brief-notif-press{
  0%,100%{ transform:translate(-50%,-50%) translateX(0) scale(1.35); }
  40%{ transform:translate(-50%,-50%) translateX(0) scale(1.29); }
}
/* On open, the whole notification scales up and dissolves into the card */
#t-briefing .stage.s-open .t-brief-notif,
#t-briefing .stage.s-aiming .t-brief-notif,
#t-briefing .stage.s-accepting .t-brief-notif,
#t-briefing .stage.s-accepted .t-brief-notif,
#t-briefing .stage.s-brief .t-brief-notif,
#t-briefing .stage.s-detail .t-brief-notif{
  opacity:0;
  transform:translate(-50%,-50%) scale(1.55);
  transition:opacity .4s ease, transform .5s cubic-bezier(.4,0,.2,1);
}

/* The pill itself */
#t-briefing .t-brief-notif-pill{
  display:flex;align-items:center;gap:13px;
  padding:14px 22px 14px 14px;
  background:var(--white);
  border:1px solid var(--border);
  border-radius:16px;
  box-shadow:var(--sh-md);
  white-space:nowrap;
}
/* Highlight while the cursor hovers/clicks it */
#t-briefing .stage.s-notif-aim .t-brief-notif-pill,
#t-briefing .stage.s-notif-click .t-brief-notif-pill{
  border-color:rgba(var(--g-lime), .5);
  box-shadow:0 0 0 1px rgba(var(--g-lime), .35),
             0 0 26px 2px rgba(var(--g-lime), .18),
             var(--sh-md);
}
/* The paper plane is now the pill's leading icon (a lime badge) */
#t-briefing .t-brief-notif-plane{
  width:38px;height:38px;flex-shrink:0;
  display:grid;place-items:center;
  border-radius:11px;
  color:var(--limed);
  background:var(--limebg);
  box-shadow:inset 0 0 0 1px rgba(var(--g-lime),.2);
}
#t-briefing .t-brief-notif-plane svg{ width:20px;height:20px;display:block; }
#t-briefing .t-brief-notif-text{ display:flex;flex-direction:column;gap:2px; }
#t-briefing .t-brief-notif-title{ font-size:14px;font-weight:600;color:var(--text);line-height:1.2; }
#t-briefing .t-brief-notif-sub{ font-size:11.5px;color:var(--limed);font-weight:500; }

/* The card is the persistent anchor; hidden until the notification opens */
#t-briefing .t-brief{
  position:relative;
  padding:0;                 /* request/body supply their own padding */
  overflow:hidden;
  opacity:0;
  transform:scale(.92);
  transition:box-shadow .7s ease, border-color .6s ease,
             opacity .45s ease, transform .55s cubic-bezier(.22,1,.36,1);
}
/* Card appears when the notification is opened */
#t-briefing .stage.s-open .t-brief,
#t-briefing .stage.s-aiming .t-brief,
#t-briefing .stage.s-accepting .t-brief,
#t-briefing .stage.s-accepted .t-brief,
#t-briefing .stage.s-brief .t-brief,
#t-briefing .stage.s-detail .t-brief{
  opacity:1;transform:scale(1);
}
/* Lime glow while the request waits (from open until it's accepted) */
#t-briefing .stage.s-open .t-brief,
#t-briefing .stage.s-aiming .t-brief,
#t-briefing .stage.s-accepting .t-brief{
  box-shadow:
    0 0 0 1px rgba(var(--g-lime), .38),
    0 0 30px 2px rgba(var(--g-lime), .20),
    0 0 70px 8px rgba(var(--g-lime), .11),
    var(--sh-md);
  border-color:rgba(var(--g-lime), .34);
}
#t-briefing .stage.s-brief .t-brief,
#t-briefing .stage.s-detail .t-brief{
  box-shadow:var(--sh-md);
  border-color:var(--border);
}

/* ── ACT 1 · the request ── */
#t-briefing .t-brief-request{
  padding:clamp(18px,2.4vw,24px);
  max-height:340px;
  opacity:1;
  overflow:hidden;
  transition:max-height .6s cubic-bezier(.4,0,.2,1),
             opacity .35s ease,
             padding .6s cubic-bezier(.4,0,.2,1);
}
/* On accept, the request collapses away */
#t-briefing .stage.s-accepted .t-brief-request,
#t-briefing .stage.s-brief .t-brief-request{
  max-height:0;
  opacity:0;
  padding-top:0;
  padding-bottom:0;
}
#t-briefing .t-brief-req-eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  font-size:10px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;
  color:var(--limed);
  margin-bottom:16px;
}
#t-briefing .t-brief-req-ping{
  position:relative;
  width:8px;height:8px;border-radius:50%;
  background:var(--limed);
  flex-shrink:0;
}
#t-briefing .t-brief-req-ping::after{
  content:'';position:absolute;inset:0;border-radius:50%;
  background:var(--limed);
  animation:t-brief-ping 1.8s cubic-bezier(0,0,.2,1) infinite;
}
@keyframes t-brief-ping{
  0%{ transform:scale(1); opacity:.6; }
  70%,100%{ transform:scale(2.6); opacity:0; }
}
/* Price is the centrepiece now — a serif display number */
#t-briefing .t-brief-req-price{
  display:flex;align-items:baseline;gap:8px;
  margin-bottom:20px;
}
#t-briefing .t-brief-req-amount{
  font-family:'Domine',serif;
  font-size:clamp(34px,5vw,42px);
  font-weight:400;letter-spacing:-.02em;line-height:1;
  color:var(--text);
}
#t-briefing .t-brief-req-unit{
  font-size:14px;font-weight:500;color:var(--t3);
}
#t-briefing .t-brief-req-actions{
  display:flex;gap:10px;
}
#t-briefing .t-brief-btn{
  flex:1;
  font-family:'DM Sans',sans-serif;
  font-size:13.5px;font-weight:700;
  padding:11px 16px;border-radius:12px;cursor:default;
  border:1px solid var(--border);
  display:flex;align-items:center;justify-content:center;gap:7px;
  transition:transform .2s ease, box-shadow .25s ease, background .25s ease;
}
#t-briefing .t-brief-btn--ghost{
  flex:0 0 34%;
  background:transparent;color:var(--t3);
}
#t-briefing .t-brief-btn--accept{
  background:var(--lime);color:var(--accent-ink);border-color:transparent;
  box-shadow:0 2px 12px rgba(var(--g-lime),.35);
  position:relative;
}
#t-briefing .t-brief-btn-check{
  width:16px;height:16px;
  stroke:var(--accent-ink);
  /* hidden until accepted */
  width:0;opacity:0;
  transition:width .3s ease, opacity .3s ease;
}
/* Cursor presses → button kicks, label swaps to a checkmark */
#t-briefing .stage.s-accepting .t-brief-btn--accept{
  animation:t-brief-kick .45s cubic-bezier(.34,1.56,.64,1);
  box-shadow:0 4px 20px rgba(var(--g-lime),.55);
}
#t-briefing .stage.s-accepting .t-brief-btn-label,
#t-briefing .stage.s-accepted .t-brief-btn-label{ display:none; }
#t-briefing .stage.s-accepting .t-brief-btn-check,
#t-briefing .stage.s-accepted .t-brief-btn-check{
  width:18px;opacity:1;
}
@keyframes t-brief-kick{
  0%{ transform:scale(1); }
  45%{ transform:scale(.94); }
  100%{ transform:scale(1); }
}

/* ── ACT 2 · confirmed name strip (just the student) ── */
#t-briefing .t-brief-confirmed{
  display:flex;align-items:center;gap:11px;
  padding:0 clamp(16px,2vw,20px);
  max-height:0;opacity:0;
  overflow:hidden;
  border-bottom:1px solid transparent;
  transition:max-height .6s cubic-bezier(.22,1,.36,1),
             opacity .5s ease .15s,
             padding .5s ease;
}
#t-briefing .stage.s-accepted .t-brief-confirmed,
#t-briefing .stage.s-brief .t-brief-confirmed{
  max-height:70px;opacity:1;
  padding-top:14px;padding-bottom:14px;
  border-bottom-color:var(--borderlt);
}
#t-briefing .t-brief-conf-name{ font-size:14px;font-weight:600;color:var(--text);line-height:1.2; }

/* ── ACT 2 · body expands inside the card (0fr → 1fr) ── */
#t-briefing .t-brief-body{
  display:grid;
  grid-template-rows:0fr;
  transition:grid-template-rows .8s cubic-bezier(.22,1,.36,1);
}
#t-briefing .stage.s-accepted .t-brief-body,
#t-briefing .stage.s-brief .t-brief-body,
#t-briefing .stage.s-detail .t-brief-body{ grid-template-rows:1fr; }
#t-briefing .t-brief-body-inner{
  min-height:0;overflow:hidden;
  padding:0 clamp(16px,2vw,20px);
}
#t-briefing .stage.s-accepted .t-brief-body-inner,
#t-briefing .stage.s-brief .t-brief-body-inner,
#t-briefing .stage.s-detail .t-brief-body-inner{
  padding-top:12px;padding-bottom:clamp(14px,2vw,18px);
}

/* ── Domain list — clickable rows, no data until one is opened ── */
#t-briefing .t-brief-domains{
  display:flex;flex-direction:column;
}
#t-briefing .t-brief-domain{
  display:flex;align-items:center;gap:10px;
  width:100%;text-align:left;
  padding:13px 4px;
  background:transparent;border:none;cursor:default;
  border-bottom:1px solid var(--borderlt);
  font-family:'DM Sans',sans-serif;
  transition:background .25s ease, padding-left .25s ease;
}
#t-briefing .t-brief-domain:last-child{ border-bottom:none; }
#t-briefing .t-brief-domain-name{
  flex:1;min-width:0;
  font-size:14px;font-weight:500;color:var(--text);
}
#t-briefing .t-brief-domain-hint{
  font-size:11px;font-weight:600;color:var(--limed);
  opacity:0;transition:opacity .25s ease;
}
#t-briefing .t-brief-domain-arrow{
  width:15px;height:15px;color:var(--t3);flex-shrink:0;
  transition:transform .25s ease, color .25s ease;
}
/* The cursor hovers/clicks the target domain */
#t-briefing .stage.s-domain-aim .t-brief-domain.is-target,
#t-briefing .stage.s-domain-click .t-brief-domain.is-target{
  background:var(--limebg);
  padding-left:12px;border-radius:10px;border-bottom-color:transparent;
}
#t-briefing .stage.s-domain-aim .t-brief-domain.is-target .t-brief-domain-hint,
#t-briefing .stage.s-domain-click .t-brief-domain.is-target .t-brief-domain-hint{ opacity:1; }
#t-briefing .stage.s-domain-aim .t-brief-domain.is-target .t-brief-domain-arrow,
#t-briefing .stage.s-domain-click .t-brief-domain.is-target .t-brief-domain-arrow{ color:var(--limed);transform:translateX(2px); }
#t-briefing .stage.s-domain-click .t-brief-domain.is-target{
  animation:t-brief-kick .4s cubic-bezier(.34,1.56,.64,1);
}
/* On detail open, the whole list collapses away */
#t-briefing .t-brief-domains{
  max-height:400px;opacity:1;
  transition:max-height .5s cubic-bezier(.4,0,.2,1), opacity .3s ease, margin .5s ease;
}
#t-briefing .stage.s-detail .t-brief-domains{
  max-height:0;opacity:0;margin-bottom:0;overflow:hidden;
}

/* ── Detail panel — only appears after a domain is clicked ── */
#t-briefing .t-brief-detail{
  display:grid;grid-template-rows:0fr;
  transition:grid-template-rows .7s cubic-bezier(.22,1,.36,1);
}
#t-briefing .stage.s-detail .t-brief-detail{ grid-template-rows:1fr; }
#t-briefing .t-brief-detail-inner{ min-height:0;overflow:hidden; }
#t-briefing .t-brief-detail-back{
  display:inline-flex;align-items:center;gap:6px;
  padding:2px 0 14px;
  background:none;border:none;cursor:default;
  font-family:'DM Sans',sans-serif;
  font-size:14px;font-weight:600;color:var(--text);
}
#t-briefing .t-brief-detail-back svg{ width:16px;height:16px;color:var(--limed); }
/* Detail content reveals in a stagger via .t-d (JS drives .in) */
#t-briefing .t-d{
  opacity:0;transform:translateY(10px);
  transition:opacity .5s cubic-bezier(.22,1,.36,1), transform .5s cubic-bezier(.22,1,.36,1);
}
#t-briefing .t-d.in{ opacity:1;transform:translateY(0); }

/* ── Cursor: presses "Aceitar", then clicks the target domain ── */
#t-briefing .t-brief-cursor{
  position:absolute;
  width:22px;height:22px;
  pointer-events:none;z-index:10;
  opacity:0;
  left:26%;top:24%;
  filter:drop-shadow(0 1px 1.5px rgba(0,0,0,.22));
  transition:opacity .35s ease,
             left .8s cubic-bezier(.2,.8,.25,1),
             top .8s cubic-bezier(.2,.8,.25,1);
}
#t-briefing .t-brief-cursor .cursor-shape{
  width:100%;height:100%;
  transform-origin:30% 30%;
}
#t-briefing .t-brief-cursor .cursor-shape svg{ width:100%;height:100%; }
/* Phase 0 — over the notification, then a click opens it */
#t-briefing .stage.s-notif-aim .t-brief-cursor,
#t-briefing .stage.s-notif-click .t-brief-cursor{
  opacity:1;left:55%;top:56%;
}
#t-briefing .stage.s-notif-click .t-brief-cursor .cursor-shape{
  animation:t-brief-pinch .34s cubic-bezier(.5,0,.25,1);
}
/* Phase 1 — over the accept button */
#t-briefing .stage.s-aiming .t-brief-cursor,
#t-briefing .stage.s-accepting .t-brief-cursor{
  opacity:1;left:62%;top:80%;
}
#t-briefing .stage.s-accepting .t-brief-cursor .cursor-shape{
  animation:t-brief-pinch .34s cubic-bezier(.5,0,.25,1);
}
/* Between acts the cursor hides */
#t-briefing .stage.s-accepted .t-brief-cursor,
#t-briefing .stage.s-brief .t-brief-cursor{ opacity:0; }
/* Phase 2 — over the first (target) domain row */
#t-briefing .stage.s-domain-aim .t-brief-cursor,
#t-briefing .stage.s-domain-click .t-brief-cursor{
  opacity:1;left:40%;top:44%;
}
#t-briefing .stage.s-domain-click .t-brief-cursor .cursor-shape{
  animation:t-brief-pinch .34s cubic-bezier(.5,0,.25,1);
}
#t-briefing .stage.s-detail .t-brief-cursor{ opacity:0; }
@keyframes t-brief-pinch{
  0%,100%{ transform:scale(1); }
  45%{ transform:scale(.8); }
}

/* ── LIVE AI: REC badge + cards that "arrive" like real-time alerts ── */
#t-live .t-live-rec{
  position:absolute;top:8px;left:10px;z-index:2;
  display:flex;align-items:center;gap:5px;
  font-size:9px;font-weight:800;letter-spacing:.08em;color:#fff;
  background:rgba(0,0,0,.5);border-radius:100px;padding:3px 8px 3px 7px;
  opacity:0;transition:opacity .5s ease .3s;
}
#t-live .t-live-video.in .t-live-rec{ opacity:1; }
#t-live .t-live-rec-dot{
  width:6px;height:6px;border-radius:50%;background:#ff5a4d;
  animation:t-pulse 1.6s infinite;
}
/* AI cards land with a little overshoot, so they read as "just now" */
#t-live .t-ai-arrive{
  transform:translateY(16px) scale(.97);
}
#t-live .t-ai-arrive.in{
  transform:translateY(0) scale(1);
  transition:opacity .5s cubic-bezier(.22,1,.36,1),
             transform .55s cubic-bezier(.34,1.4,.64,1);
}
/* The alert card gives one attention flash as it lands */
#t-live .t-ai-card--alert.in{
  animation:t-ai-flash 1.1s ease .1s 1;
}
@keyframes t-ai-flash{
  0%,100%{ box-shadow:var(--sh); }
  30%{ box-shadow:0 0 0 3px rgba(255,90,77,.16), var(--sh); }
}

/* ══ GROUP · a live room, one quiet drop, and the catch ══════════════
   Act 1 the room lands healthy · Act 2 others tick forward · Act 3 Ana
   goes still then drains · Act 4 the cursor presses "Intervir" and she
   recovers.  States on .stage: playing → stalled → intervening → resolved
   ─────────────────────────────────────────────────────────────────── */

/* Bars grow on entry AND drain later — the drain gets a heavy, slow ease
   so Ana's slump reads as a quiet, gradual slide, not a flick. The fill
   colour eases green → red in step, so the alarm reads as the payoff of
   a colour shift the eye already tracked, not a sudden flag out of nowhere. */
#t-group .t-mfill-drain{ transition:width 1s cubic-bezier(.22,1,.36,1), background-color 1s ease; }
#t-group .t-scard-stall.draining .t-mfill-drain{
  transition:width 2.6s cubic-bezier(.45,0,.4,1), background-color 2.6s ease;
}
/* A live tick (Act 2) is a quick, gentle nudge */
#t-group .t-mfill.ticking{ transition:width .7s cubic-bezier(.4,0,.2,1); }

/* Topic swaps in place: healthy "Ex. 3/5" ⇄ alert "Parada há…" */
#t-group .t-scard-topic{ position:relative; }
#t-group .t-topic-live,
#t-group .t-topic-alert{
  transition:opacity .4s ease;
}
#t-group .t-topic-alert{
  position:absolute;left:0;top:0;
  opacity:0;white-space:nowrap;
}
#t-group .t-scard-stall.stalled .t-topic-live{ opacity:0; }
#t-group .t-scard-stall.stalled .t-topic-alert{ opacity:1; }
/* On recovery the live topic returns */
#t-group .t-scard-stall.resolved .t-topic-live{ opacity:1; }
#t-group .t-scard-stall.resolved .t-topic-alert{ opacity:0; }

/* "Dica enviada" markup stays in the DOM (unused) — kept hidden always. */
#t-group .t-topic-help{ display:none; }

/* The warn badge is hidden until the stall fires, then springs in */
#t-group .t-stall-warn{
  opacity:0;transform:scale(.6);
  transition:opacity .45s ease, transform .45s ease;
}
#t-group .t-scard-stall.stalled .t-stall-warn{
  opacity:1;transform:scale(1);
  transition:opacity .4s ease, transform .45s cubic-bezier(.34,1.56,.64,1);
}
#t-group .t-scard-stall.resolved .t-stall-warn{
  opacity:0;transform:scale(.6);
  transition:opacity .35s ease, transform .35s ease;
}

/* Ana's card is calm until she stalls, then cools to the alert tint with a
   red hairline that fades in; recovery returns it to the warm room. */
#t-group .t-scard-stall{
  background:var(--white);
  box-shadow:inset 0 0 0 0 rgba(255,90,77,0);
  transition:background .6s ease, box-shadow .6s ease;
}
#t-group .t-scard-stall.stalled{
  background:#FBFAF6;
  box-shadow:inset 0 0 0 1.5px rgba(255,90,77,.30);
  animation:t-scard-flag 1.2s ease .05s 1;
}
/* One attention flash the moment Ana is flagged */
@keyframes t-scard-flag{
  0%,100%{ box-shadow:inset 0 0 0 1.5px rgba(255,90,77,.30); }
  35%{ box-shadow:inset 0 0 0 1.5px rgba(255,90,77,.30),
                  0 0 0 4px rgba(255,90,77,.12); }
}
#t-group .t-scard-stall.resolved{
  background:var(--limebg);
  box-shadow:inset 0 0 0 1.5px rgba(90,130,0,.22);
}

/* Bottom alert bar slides up once someone stalls, collapses on resolve */
#t-group .t-group-alert-arrive{
  opacity:0;
  transform:translateY(14px);
  transition:opacity .5s ease, transform .55s cubic-bezier(.22,1,.36,1);
}
#t-group .stage.stalled .t-group-alert-arrive{
  opacity:1;
  transform:translateY(0);
}

/* Intervir button: label swaps to a check on press */
#t-group .t-group-alert-btn{
  position:relative;
  transition:transform .18s cubic-bezier(.34,1.56,.64,1), box-shadow .18s;
}
#t-group .t-group-alert-btn-check{
  position:absolute;inset:0;
  display:flex;align-items:center;justify-content:center;
  opacity:0;transform:scale(.5);
  transition:opacity .25s ease, transform .3s cubic-bezier(.34,1.56,.64,1);
}
#t-group .t-group-alert-btn-check svg{ width:18px;height:18px; }
#t-group .stage.intervening .t-group-alert-btn{ transform:scale(.94); }
#t-group .stage.resolved .t-group-alert-btn .t-group-alert-btn-label{ opacity:0; }
#t-group .stage.resolved .t-group-alert-btn .t-group-alert-btn-check{
  opacity:1;transform:scale(1);
}
#t-group .stage.resolved .t-group-alert-btn{ pointer-events:none; }

/* Cursor that glides to "Intervir agora" and presses it (mirrors briefing) */
#t-group .t-group-cursor{
  position:absolute;
  width:22px;height:22px;
  pointer-events:none;z-index:10;
  opacity:0;
  left:50%;top:50%;
  filter:drop-shadow(0 1px 1.5px rgba(0,0,0,.22));
  transition:opacity .35s ease,
             left .85s cubic-bezier(.2,.8,.25,1),
             top .85s cubic-bezier(.2,.8,.25,1);
}
#t-group .t-group-cursor .cursor-shape{ width:100%;height:100%;transform-origin:30% 30%; }
#t-group .t-group-cursor .cursor-shape svg{ width:100%;height:100%; }
#t-group .stage.s-aiming .t-group-cursor,
#t-group .stage.intervening .t-group-cursor{
  opacity:1;left:87%;top:90%;
}
#t-group .stage.intervening .t-group-cursor .cursor-shape{
  animation:t-brief-pinch .34s cubic-bezier(.5,0,.25,1);
}
#t-group .stage.resolved .t-group-cursor{ opacity:0; }

/* ── EARNINGS: the total settles with a small lime pop as it lands ── */
#t-earn .t-earn-total-arrive.in{
  animation:t-earn-pop .6s cubic-bezier(.34,1.56,.64,1) 1;
}
@keyframes t-earn-pop{
  0%{ transform:translateY(12px) scale(.96); }
  60%{ transform:translateY(0) scale(1.03); }
  100%{ transform:translateY(0) scale(1); }
}

/* ── EARNINGS: the tutor transfers the total to their account ── */
.t-earn-pay{ margin-top:14px; }
.t-earn-pay-btn{
  position:relative;width:100%;
  display:flex;align-items:center;justify-content:center;
  min-height:44px;padding:11px 18px;border-radius:12px;
  font-family:'DM Sans',sans-serif;font-size:13px;font-weight:700;
  color:var(--text);background:var(--lime);border:none;cursor:pointer;
  box-shadow:0 2px 10px rgba(189,253,80,.35);
  transition:transform .18s cubic-bezier(.34,1.56,.64,1), box-shadow .18s;
}
.t-earn-pay-btn-done{
  position:absolute;inset:0;
  display:flex;align-items:center;justify-content:center;gap:7px;
  opacity:0;transform:scale(.6);
  transition:opacity .25s ease, transform .3s cubic-bezier(.34,1.56,.64,1);
}
.t-earn-pay-btn-done svg{ width:17px;height:17px; }
#t-earn .stage.paying .t-earn-pay-btn{ transform:scale(.96); }
#t-earn .stage.paid .t-earn-pay-btn .t-earn-pay-btn-label{ opacity:0; }
#t-earn .stage.paid .t-earn-pay-btn .t-earn-pay-btn-done{ opacity:1;transform:scale(1); }
#t-earn .stage.paid .t-earn-pay-btn{ pointer-events:none; }

/* Cursor that glides to "Transferir" and presses it (mirrors #t-group) */
#t-earn .t-earn-cursor{
  position:absolute;
  width:22px;height:22px;
  pointer-events:none;z-index:10;
  opacity:0;
  left:50%;top:42%;
  filter:drop-shadow(0 1px 1.5px rgba(0,0,0,.22));
  transition:opacity .35s ease,
             left .85s cubic-bezier(.2,.8,.25,1),
             top .85s cubic-bezier(.2,.8,.25,1);
}
#t-earn .t-earn-cursor .cursor-shape{ width:100%;height:100%;transform-origin:30% 30%; }
#t-earn .t-earn-cursor .cursor-shape svg{ width:100%;height:100%; }
#t-earn .stage.pay-aim .t-earn-cursor,
#t-earn .stage.paying .t-earn-cursor{
  opacity:1;left:53%;top:67%;
}
#t-earn .stage.paying .t-earn-cursor .cursor-shape{
  animation:t-brief-pinch .34s cubic-bezier(.5,0,.25,1);
}
#t-earn .stage.paid .t-earn-cursor{ opacity:0; }

/* Reduced motion: everything resolves to its finished state, no motion */
@media (prefers-reduced-motion: reduce){
  #t-briefing .t-r, #t-live .t-r, #t-group .t-r, #t-earn .t-r{
    opacity:1;transform:none;transition:none;
  }
  #t-briefing .stage .aurora, #t-live .stage .aurora,
  #t-group .stage .aurora, #t-earn .stage .aurora{ opacity:.30; }
  #t-briefing .t-mfill, #t-group .t-mfill{ transition:none; }
  #t-live .t-live-rec,
  #t-group .t-stall-warn, #t-group .t-topic-alert,
  #t-group .t-group-alert-arrive{ opacity:1;transform:none;transition:none; }
  /* Group: rest on the caught-stall frame — Ana flagged, alert shown */
  #t-group .t-topic-live{ opacity:0;transition:none; }
  #t-group .t-group-cursor{ display:none; }
  #t-earn .t-earn-cursor{ display:none; }
  #t-earn .t-earn-pay-btn .t-earn-pay-btn-label{ opacity:0; }
  #t-earn .t-earn-pay-btn .t-earn-pay-btn-done{ opacity:1;transform:scale(1); }
  #t-live .t-ai-card--alert.in, #t-earn .t-earn-total-arrive.in{ animation:none; }
  /* Briefing: skip the notification + accept act, show opened detail outright */
  #t-briefing .t-d{ opacity:1;transform:none;transition:none; }
  #t-briefing .t-brief-notif{ display:none; }
  #t-briefing .t-brief-scene{ opacity:1;filter:none;transform:translate(-50%,-50%) scale(1);transition:none; }
  #t-briefing .t-brief{ opacity:1;transform:none;transition:none; }
  #t-briefing .t-brief-request{ display:none; }
  #t-briefing .t-brief-confirmed{ max-height:70px;opacity:1;padding-top:14px;padding-bottom:14px;border-bottom-color:var(--borderlt); }
  #t-briefing .t-brief-body{ grid-template-rows:1fr; }
  #t-briefing .t-brief-body-inner{ padding-top:12px;padding-bottom:18px; }
  #t-briefing .t-brief-domains{ display:none; }
  #t-briefing .t-brief-detail{ grid-template-rows:1fr; }
  #t-briefing .t-brief-cursor{ display:none; }
}

/* ══════════════════════════════════════
   RESPONSIVE — v2 preview tablet (max-width: 991px)
══════════════════════════════════════ */
@media(max-width:991px){
  .feature-stack-card{
    flex-flow:column;
    height:90vh;
    max-height:none;
    margin-bottom:5vh;
    top:5%;
    padding:2.75rem;
  }
  .feature-stack-card--is2{
    justify-content:space-between;
  }
  .feat-stack-left{
    width:100%;
    max-width:100%;
  }
}

/* ══════════════════════════════════════
   RESPONSIVE — TABLET & BELOW (768px)
══════════════════════════════════════ */
@media(max-width:768px){

  /* ── NAV — logo · Aluno/Tutor pill · Começar ── */
  nav{padding:0 12px;gap:8px;}
  .nav-logo{margin-right:0;flex-shrink:0;}
  .nav-pill-wrap{
    position:static;left:auto;transform:none;
    flex:1;min-width:0;display:flex;justify-content:center;
  }
  .nav-pill{padding:2px;}
  .np-label-full{display:none;}
  .np-label-short{display:inline;}
  .np-btn{padding:8px 14px;font-size:13px;min-height:40px;}
  .nav-right{display:flex;margin-left:0;flex-shrink:0;align-items:center;gap:0;}
  .nav-login{display:none;}
  .nav-cta-full{display:none;}
  .nav-cta-short{display:inline;}
  .nav-cta{font-size:12.5px;padding:8px 14px;min-height:40px;}

  /* Tutor nav + pill: base styles are global; mobile density only */

  /* ── GLOBAL SPACING ── */
  section{padding:64px 20px;}
  #features{padding:64px 0;}
  .carousel-track.carousel-track--static{
    padding-top:12px;
    padding-bottom:10px;
  }
  /* Tutors depoimentos — match students’ stories tight bottom */
  #page-tutors #t-stories.t-content-section--stories{
    padding-bottom:clamp(10px,2.5vh,28px);
  }
  /* ── HERO (students + tutors) — single column: text on top, photo stacked
     below it (same photo as desktop, just moved in-flow instead of the
     absolute right-half slot). ── */
  #hero,
  #t-hero{
    padding:clamp(104px,15vh,140px) 20px clamp(40px,7vh,72px);
    min-height:auto;
    flex-direction:column;
    align-items:stretch;
    justify-content:flex-start;
  }
  #hero .hero-inner,
  #t-hero .hero-inner{width:100%;max-width:100%;}
  /* Art slot: in-flow block under the text (was absolutely positioned + hidden) */
  .hero-art{
    position:static;
    width:100%;
    padding-right:0;
    justify-content:center;
    margin-top:clamp(32px,5vh,44px);
  }
  .hero-art-img{
    width:100%;
    max-height:min(52vh,420px);
    object-fit:cover;
    border-radius:18px;
  }
  .hero-h1{font-size:clamp(40px,11vw,64px);}
  #hero .hero-ctas,
  #t-hero .hero-ctas{flex-direction:column;gap:8px;align-items:stretch;}
  /* Launch hero: keep clock compact + comfortable on phones.
     Fluid min-width + gap so the 4 units + 3 separators never exceed the
     narrow hero column (was a hard 52px min-width that crowded at 320px). */
  .hero-countdown-clock{gap:clamp(5px,2.2vw,10px);}
  .hcd-unit{min-width:clamp(40px,13vw,52px);}
  .hcd-num{font-size:clamp(26px,9vw,40px);}
  .hcd-sep{font-size:clamp(20px,7vw,32px);}

  /* ── FEATURES — sticky stack (same deck as desktop; top clears fixed nav + safe area) ── */
  .feature-stack{
    position:sticky;
    top:0;
    margin-bottom:-14vh;
    padding:0 20px;
  }
  .feature-stack-card{
    position:sticky;
    top:max(5%,calc(env(safe-area-inset-top,0px) + 56px));
    height:min(88vh,42rem);
    min-height:0;
    max-height:none;
    margin-bottom:16vh;
    padding:2rem 1.25rem 1.5rem;
    border-radius:1.75rem;
  }
  .feat-stack-left{width:100%;max-width:100%;}
  .feature-stack-card .fc-ui{
    min-height:200px;
    max-height:none;
  }
  .feature-stack-card.fc-lesson .fc-ui--lesson-showcase{
    --lesson-resize:0.55s;
    --lesson-prompt-move:.92s;
  }
  .feature-stack-card.fc-lesson .fc-ui{
    min-height:clamp(200px,52vh,360px);
    min-height:clamp(200px,min(52vh,52dvh),360px);
  }
  .feature-stack-card.fc-lesson .lesson-showcase{
    padding:1rem;
    --lesson-content-width:min(36rem,calc(100% - 1rem));
  }
  .feature-stack-card.fc-lesson .lesson-showcase.lesson-phase--typing{
    min-height:min(280px,52vh);
    min-height:min(280px,52dvh);
  }

  /* ── STORY CARDS / CAROUSEL ── */
  .carousel-row{padding:0 16px;gap:8px;}
  .carousel-slide{flex:0 0 min(280px,calc(100vw - 56px));}
  .carousel-btn{width:40px;height:40px;}
  .carousel-dots{padding:0 16px;margin-top:14px;}
  .story-card{height:400px;}
  .story-inner{padding:20px;}
  #t-stories .story-inner{padding:20px clamp(12px,3.5vw,18px);}

  /* ── CTA SECTIONS — minimal gap after stories ── */
  #cta,
  #t-cta{padding:28px 20px 56px;}

  /* ── FOOTER ── */
  footer{padding:40px 20px 24px;}
  .footer-inner{grid-template-columns:1fr 1fr;gap:24px;}
  .footer-bottom{flex-direction:column;align-items:center;gap:8px;text-align:center;}

  /* ── TUTOR: GROUP SESSION GRID — 2 cols, natural-height stage ── */
  .stage.stage--wide{min-height:0;}
  .t-group-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
  .t-group-alert{
    flex-direction:column;
    align-items:stretch;
    gap:12px;
  }
  .t-group-alert-btn{
    margin-left:0;
    width:100%;
    display:inline-flex;
    align-items:center;
    justify-content:center;
  }

  /* ── TOUCH TARGETS ── */
  .np-btn{padding:10px 20px;min-height:44px;}
  .btn-primary,.btn-ghost,.btn-lime,.nav-cta{min-height:44px;}
  .t-group-alert-btn{min-height:44px;}
}

/* ══════════════════════════════════════
   RESPONSIVE — SMALL PHONES (480px)
══════════════════════════════════════ */
@media(max-width:480px){

  /* ── HERO REFINEMENTS ── */
  #hero,
  #t-hero{min-height:auto;}
  .hero-h1{font-size:clamp(32px,10vw,60px);}

  /* ── FEATURES ── */
  .features-header{padding:0 20px;margin-bottom:32px;}

  /* ── STORIES ── */
  .carousel-slide{flex:0 0 min(260px,calc(100vw - 48px));}
  .story-card{height:380px;}

  /* ── FOOTER FULL STACK ── */
  .footer-inner{grid-template-columns:1fr;gap:20px;}

  /* ── GROUP GRID SINGLE COL ── */
  .t-group-grid{grid-template-columns:1fr;}

  /* ── NAV — tighten so logo · Aluno/Tutor pill · Começar fit on narrow phones.
     Trim the pill's horizontal padding (keep 44px min-height for tap targets)
     and let the pill shrink; drop the nav gap a touch. ── */
  nav{padding:0 10px;gap:6px;}
  .nav-pill{padding:2px;max-width:100%;}
  .np-btn{padding:10px 14px;font-size:12.5px;min-width:0;}
  .nav-cta{padding:8px 12px;}
}

/* ══════════════════════════════════════
   RESPONSIVE — VERY NARROW PHONES (360px)
   Last-resort tightening for 320–360px so nothing in the fixed nav clips.
══════════════════════════════════════ */
@media(max-width:360px){
  nav{padding:0 8px;gap:5px;}
  .np-btn{padding:10px 11px;font-size:12px;}
  .nav-cta{padding:8px 10px;font-size:12px;}
  /* Countdown: allow the clock to wrap rather than clip on the tiniest screens */
  .hero-countdown-clock{flex-wrap:wrap;row-gap:6px;}
}

/* ══════════════════════════════════════════════════════════════
   EDITORIAL V2 — support styles (nav backdrop, method strip,
   stories row, progress frame). Extends sections.css system.
══════════════════════════════════════════════════════════════ */

/* Nav: soft paper backdrop once scrolled (except over the dark tutor hero) */
nav.scrolled:not(.nav-in-hero){
  background:rgba(245,245,242,.82);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border-bottom-color:var(--borderlt);
}

/* Progress stage — app panel framed inside the square stage */
#feat-prog .prog-frame{
  position:absolute;
  inset:26px;
  z-index:2;
  background:var(--bg);
  border:1px solid var(--border);
  border-radius:18px;
  overflow:hidden;
  box-shadow:
    0 0 0 1px rgba(189,253,80,.14),
    0 18px 44px rgba(0,0,0,.07);
}
#feat-prog .vprog-inner{ height:100%; }

/* KPI denominator (nota esperada) */
.vprog-kpi-denom{
  font-size:15px;
  font-weight:500;
  color:var(--t3);
}

/* Final CTA — a touch more air */
#cta, #t-cta{ padding:clamp(110px,15vh,150px) 40px; }