/* ============================================================
   v16 · ALIGNMENT + MOTION CONSOLIDATION   (loaded last → wins)
   1 · Every chapter header identical — title, subtitle and the
       right-hand mascot at the same size, position and rhythm.
   2 · Equal gutters between subsection boxes; equal air between
       chapters.
   3 · ONE clean "zoom-pop" for the scroll-entrance and for hover
       on every subsection. Functional motion (bar fills, live
       waveforms, counters, pulses) is kept; the decorative idle /
       shine / tilt / drift clutter is retired.
   ============================================================ */

/* One motion system, Emil-style.
   --ease-smooth = ease-out-expo: a long, gentle deceleration → entrances/section
   transitions glide in (fade + soft rise), never pop.  --ease-out = a slightly
   snappier smooth curve for micro hovers. Both are rebound-free. */
:root{ --ease-smooth:cubic-bezier(.16,1,.3,1); --pop-ease:cubic-bezier(.22,1,.36,1); --ease-out:cubic-bezier(.22,1,.36,1); }

/* ============================================================
   A · CHAPTER HEADERS — identical across grow / explore / learn / fluent
   ============================================================ */
/* same title size + baseline in every chapter */
#grow .sec-top__l .sec-h,
#explore .sec-top__l .sec-h,
#learn .sec-top__l .sec-h,
#fluent .sec-top__l .sec-h{
  font-size:clamp(2.6rem,5.6vw,4.5rem) !important;
  line-height:1.02 !important; margin:0 !important;
}
/* header block: same gap, same baseline alignment, same distance to content */
#grow .sec-top, #explore .sec-top, #learn .sec-top, #fluent .sec-top{
  margin-bottom:var(--eco-gap) !important;
  gap:clamp(16px,3vw,46px) !important;
  align-items:flex-end !important;
  justify-content:space-between !important;
}
/* Fluent left-aligned like the other three (clear the old centered remnants) */
#fluent .sec-top{ text-align:left !important; }
#fluent .sec-top__l{ text-align:left !important; align-items:flex-start !important; flex:1 1 auto !important; min-width:0; }
#fluent .sec-top .chap-tag{ justify-content:flex-start !important; }

/* subtitle sits the SAME distance under the title in every chapter */
#grow .sec-top__l .rx-learn-badges,
#explore .sec-top__l .rx-learn-badges,
#learn .sec-top__l .rx-learn-badges,
#fluent .sec-top__l .flt-sub-cta{
  margin-top:var(--eco-gap) !important; margin-bottom:0 !important;
}
/* Fluent's subtitle = the two app badges, left-aligned like the pills */
#fluent .flt-sub-cta{ display:flex !important; justify-content:flex-start !important;
  gap:12px !important; flex-wrap:wrap; }

/* right mascot: identical height + right edge in all four chapters */
#grow .sec-buddy, #explore .sec-buddy, #learn .sec-buddy, #fluent .sec-buddy{
  width:auto !important; align-self:flex-end !important; margin:0 0 -2px 0 !important; }
#grow .sec-buddy .sec-mascot,
#explore .sec-buddy .sec-mascot,
#learn .sec-buddy .sec-mascot,
#fluent .sec-buddy .sec-mascot{
  height:clamp(120px,12vw,160px) !important; width:auto !important; }

/* Fluent: a touch more breathing room between the app badges and the reviews */
#fluent .reviews__grid{ margin-top:clamp(22px,3.4vw,52px) !important; }

/* ============================================================
   B · EQUAL GUTTERS between subsection boxes (every chapter)
   ============================================================ */
.cmp-top{ margin-bottom:var(--eco-gap) !important; }
.cmp-bottom{ margin-top:var(--eco-gap) !important; }

/* ============================================================
   C · EQUAL AIR between chapters (uniform vertical padding)
   ============================================================ */
.chapter{ padding-block:clamp(84px,10.5vw,150px) !important; }
#home{ padding-top:clamp(24px,3.5vw,48px) !important; }

/* ============================================================
   D · ENTRANCE — one clean zoom-pop for every revealed block
   ============================================================ */
@media (prefers-reduced-motion:no-preference){
  /* section transitions: a soft fade + gentle rise on ease-out-expo — glides,
     doesn't pop; reads clean + even from one chapter to the next */
  .reveal{ opacity:0; transform:translateY(28px) !important;
    transition:opacity .7s var(--ease-smooth), transform .75s var(--ease-smooth) !important; }
  .reveal.in{ opacity:1 !important; transform:none !important; }
  .games .game.reveal, .games .game.reveal[data-d="1"]{ transform:translateY(28px) !important; }
  .games .game.reveal.in{ transform:none !important; }
  /* retire the per-child cascades — each block pops as ONE unit */
  .rx-grow.reveal.in .rx-chat>*,
  .rx-learn.reveal.in .rx-lang,
  .rx-grow.reveal.in .rx-node,
  .rx-learn.reveal.in .rx-lbox,
  .rx-scenes.reveal.in .rx-scene,
  .rx-lb-card.reveal.in .rx-lb__row,
  .rx-scenes.reveal.in .rx-scene:nth-child(n),
  .review-card.reveal.in .review-card__stars svg{
    animation:none !important; }
}

/* --- retire idle / ambient / drift / shine clutter --------------------
   kept on purpose: .v10-bar fills, ring draw, waveforms, live pulses,
   number counters, dot-nav — those communicate state. --------------- */
.rx-scene__ic,
.rx-xpc__ic svg,
.games-mascot,
.review-card.reveal.in,
.rx-trust span,
.chapter.tint::before, .chapter.tint::after,
.hero2__stage.reveal.in, .hero2__stage.reveal.in .appwin,
.btn-coral{ animation:none !important; }
@supports (animation-timeline:view()){ .h-sec{ animation:none !important; } }
/* CTA shine sweeps off (v10 + v11) */
.btn-coral::after, .quiz__play-btn::after{ display:none !important; }
.btn-coral, .rx-start, .quiz__play-btn, .rx-dl{ background-image:none !important; }
.btn-coral:hover, .rx-start:hover, .quiz__play-btn:hover, .rx-dl:hover{ animation:none !important; }

/* ============================================================
   E · HOVER — the same clean zoom-pop on every subsection card
   (section-id prefixes give us the specificity to win over v9/v10/v11)
   ============================================================ */
@media (hover:hover) and (pointer:fine){
  #grow .rx-convo, #grow .card.game, #grow .rx-xpc, #grow .rx-card, #grow .jrn,
  #explore .cmp-profile, #explore .cmp-friends, #explore .cmp-leagues, #explore .cmp-ach,
  #learn .rx-scenes .rx-scene,
  #fluent .flt-convo, #fluent .flt-grid > .rx-card,
  #fluent .review-card{
    transition:transform .3s var(--pop-ease), box-shadow .3s ease !important;
    will-change:transform; }

  #grow .rx-convo:hover, #grow .card.game:hover, #grow .rx-xpc:hover, #grow .rx-card:hover, #grow .jrn:hover,
  #explore .cmp-profile:hover, #explore .cmp-friends:hover, #explore .cmp-leagues:hover, #explore .cmp-ach:hover,
  #learn .rx-scenes .rx-scene:hover,
  #fluent .flt-convo:hover, #fluent .flt-grid > .rx-card:hover,
  #fluent .review-card:hover{
    transform:translateY(-5px) scale(1.02) !important; }

  /* retire competing hover fidgets so the pop is the only motion */
  #learn .rx-scene:hover .rx-scene__ic,
  .rx-lang:hover .rx-flag svg,
  .rx-achs span:hover,
  .rx-scene:hover .rx-scene__ic{ transform:none !important; animation:none !important; }
  .rx-lb__row:hover{ transform:translateX(4px) !important; }
}

/* ============================================================
   F · Academics (rx-scene--night) corner glyph — fully inside the card
   (float removed above; pin it with safe clearance from the top edge)
   ============================================================ */
.rx-scene__ic{ top:20px !important; right:20px !important; transform:none !important; }
/* the 🎓 glyph is top-heavy — give the Academics card extra clearance */
.rx-scene--night .rx-scene__ic{ top:30px !important; right:24px !important; font-size:3.3rem !important; }

/* ============================================================
   G · reduced-motion — nothing moves, everything lands instantly
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  .reveal{ opacity:1 !important; transform:none !important; transition:none !important; }
}

/* ============================================================
   H · FLAT & CLEAN — no glow, no gradient shadow behind anything
   Site-wide: every box reads on its border + fill alone. All outer
   box-shadows, ambient soft shadows, coral/gold glows, the radial
   glow discs behind the mascots and drop-shadow glows are removed.
   (Gradient *fills* and progress bars are content, so they stay.
    Focus rings use `outline`, so keyboard a11y is unaffected.)
   ============================================================ */
*, *::before, *::after{ box-shadow:none !important; }
/* radial glow disc + contact shadow behind every section mascot */
.sec-buddy::before, .sec-buddy::after{ display:none !important; }
/* drop-shadow glows on the floating artwork */
.sec-mascot, .title-mascot, .games-mascot, .launch-modal__mascot,
.hero2 img, .brand img.mark, .review-card__badge{ filter:none !important; }
/* leftover ambient "spark" dots in the tinted play section */
.chapter.tint::before, .chapter.tint::after{ display:none !important; }
/* keep the games referee mascot dead-centred (transform was getting nulled) */
.games-mascot{ transform:translate(-50%,-50%) !important; }

/* ============================================================
   I · Friends leaderboard — country-flag column between name and rank,
   every row on the same grid so flags + XP align down the card.
   ============================================================ */
.cmp-flist li{ display:grid !important; grid-template-columns:34px minmax(0,1fr) auto auto;
  align-items:center; gap:11px; }
.cmp-flist li.is-me{ grid-template-columns:34px minmax(0,1fr) auto auto; }
.cmp-flag{ width:24px; height:16px; border-radius:3px; overflow:hidden; flex:none;
  outline:1px solid rgba(255,255,255,.16); outline-offset:-1px; }
.cmp-flag svg{ width:100%; height:100%; display:block; }
.cmp-fx{ text-align:right; min-width:70px; font-variant-numeric:tabular-nums; }

/* Weekly-league leaderboard — flag column between name and rank cluster.
   `.rx-lb__row b` is flex:1, so the flag/arrow/XP cluster stays right-aligned
   and the flags line up down the card. */
.rx-lb__flag{ width:24px; height:16px; border-radius:3px; overflow:hidden; flex:none;
  outline:1px solid rgba(255,255,255,.16); outline-offset:-1px; }
.rx-lb__flag svg{ width:100%; height:100%; display:block; }
.rx-lb__row .rx-mv{ min-width:44px; text-align:center; }
.rx-lb__row .rx-xp{ min-width:56px; text-align:right; }

/* Review History — first entry reads "Today" in the coral accent */
.lib-hday--now{ color:var(--coral) !important; font-weight:900 !important; }

/* ============================================================
   J · FLUENT header — centered title + badges flanked by TWO mascots
   (same size left & right); heading + subheading a touch smaller.
   Overrides the left-aligned defaults in section A (later = wins).
   ============================================================ */
#fluent .sec-top{ justify-content:center !important; text-align:center !important;
  align-items:flex-end !important; gap:clamp(34px,6vw,92px) !important; }
#fluent .sec-top__l{ text-align:center !important; align-items:center !important;
  flex:0 1 auto !important; }
#fluent .sec-top .chap-tag{ justify-content:center !important; }
#fluent .flt-sub-cta{ justify-content:center !important; }
/* a touch smaller heading + subheading */
#fluent .sec-top__l .sec-h{ font-size:clamp(2.4rem,5vw,4rem) !important; }
#fluent .flt-sub-cta .rx-badge{ padding:8px 15px !important; }
#fluent .flt-sub-cta .rx-badge__logo{ width:24px !important; height:24px !important; }
#fluent .flt-sub-cta .rx-badge__txt b{ font-size:1.06rem !important; }
/* both flanking mascots identical size, angled slightly inward */
#fluent .sec-buddy{ display:block !important; align-self:flex-end !important; }
#fluent .sec-buddy .sec-mascot{ height:clamp(132px,13.2vw,176px) !important; width:auto !important; }
#fluent .sec-buddy--left .sec-mascot{ transform:rotate(3deg); }

/* ============================================================
   K · Brand logo = the round profile avatar (tab / navbar / hero app-bar)
   ============================================================ */
.brand img.mark, .awtitle .mark{ border-radius:50% !important; object-fit:cover !important;
  background:#fff; }
/* hero app-bar logo — proper circle with an orange ring */
.awtitle .mark{ width:22px !important; height:22px !important;
  border:2px solid var(--coral) !important; background:#fff !important; }

/* ============================================================
   L · Hero phone mockup — thinner bezel + a bit larger UI
   ============================================================ */
.hero2__stage{ padding:clamp(7px,0.9vw,13px) !important; }
@media(min-width:921px){ .hero2{ grid-template-columns:1fr 1.2fr !important; } }

/* ============================================================
   M · Pronunciation "Match" box — white surface, dark waveform bars
   (was black w/ white bars); coral active bars + score stay.
   ============================================================ */
.rx-ai__voice{ background:#fff !important; border:1px solid var(--hair) !important; }
.rx-ai__voice .rx-ai__wave i{ background:#141414 !important; }
.rx-ai__voice .rx-ai__wave i.on{ background:var(--coral) !important; }
.rx-ai__voice .rx-ai__meter{ background:var(--track) !important; }

/* ============================================================
   N · Hero title visual — nudged a bit left
   ============================================================ */
.title-mascot{ transform:translate(11.5%,-73%) !important; height:2.25em !important; }

/* ============================================================
   O · Pronunciation scores → two icon boxes (coral + black),
   both white text w/ a small icon; the "Stress gare" tip removed.
   ============================================================ */
.pron-fb__tip{ display:none !important; }
.pron-chip{ flex-direction:row !important; align-items:center !important; justify-content:center !important;
  gap:10px !important; padding:13px 12px !important; border-color:transparent !important; }
.pron-chip__ic{ width:30px; height:30px; border-radius:9px; display:grid; place-items:center; flex:none;
  background:rgba(255,255,255,.18); color:#fff; }
.pron-chip__ic svg{ width:16px; height:16px; }
.pron-chip__m{ display:flex; flex-direction:column; align-items:flex-start; gap:2px; line-height:1; }
.pron-chip--accuracy{ background:var(--coral) !important; }
.pron-chip--fluency{ background:#141414 !important; }
.pron-chip b{ color:#fff !important; font-size:1.3rem; }
.pron-chip small{ color:rgba(255,255,255,.85) !important; }

/* ============================================================
   P · Library — active lesson box + French A1 certificate go black
   ============================================================ */
/* current lesson: "A2 · Everyday French" */
#learn .lib-group.is-now{ background:#141414 !important; border-color:#141414 !important; }
#learn .lib-group.is-now .lib-group__m b{ color:#fff !important; }
#learn .lib-group.is-now .lib-group__m > span{ color:rgba(255,255,255,.66) !important; }
#learn .lib-group.is-now .lib-bar{ background:rgba(255,255,255,.18) !important; }
/* French A1 certificate box */
#learn .lib-cert.is-earned{ background:#141414 !important; border-color:#141414 !important; }
#learn .lib-cert.is-earned .lib-cert__m b{ color:#fff !important; }
#learn .lib-cert.is-earned .lib-cert__m span{ color:rgba(255,255,255,.66) !important; }
#learn .lib-cert.is-earned .lib-seal,
#learn .lib-cert.is-earned .lib-seal i,
#learn .lib-cert.is-earned .lib-cert__link{ color:var(--coral) !important; }

/* ============================================================
   Q · Library — opaque-orange highlight boxes + Hotel Check-in text
   ============================================================ */
/* B1 · Real Conversations stays its original light/neutral look (reverted) */
/* Spanish + Japanese language tiles (the two active ones) */
#learn .lib-lang.is-on{ background:var(--coral) !important; border-color:var(--coral) !important; }
#learn .lib-lang.is-on .lib-lang__n{ color:#fff !important; }
#learn .lib-lang.is-on .lib-lang__lv{ color:#fff !important; background:#141414 !important; border:1.5px solid #000 !important; }
/* French A2 · 81% complete certificate */
#learn .lib-cert.is-prog{ background:var(--coral) !important; border-color:var(--coral) !important; }
#learn .lib-cert.is-prog .lib-cert__m b{ color:#fff !important; }
#learn .lib-cert.is-prog .lib-cert__m span{ color:rgba(255,255,255,.85) !important; }
#learn .lib-cert.is-prog .lib-seal--prog{ background:#141414 !important; border:1.5px solid #000 !important; }
#learn .lib-cert.is-prog .lib-seal--prog i{ color:#fff !important; }
#learn .lib-cert.is-prog .lib-bar{ background:rgba(0,0,0,.22) !important; }
#learn .lib-cert.is-prog .lib-bar i{ background:#fff !important; }
/* keep the orange flat — no glow/shadow */
#learn .lib-lang.is-on, #learn .lib-cert.is-prog{
  box-shadow:none !important; filter:none !important; }

/* Learning-pack cards: Travel = lighter reddish-orange */
.rx-scene--travel{ background:#EC7B33 !important; }

/* ============================================================
   R · CHARACTER STRIP — auto-scrolling marquee of the 4 characters
   (white tiles, sized to match the last-section mascots)
   ============================================================ */
.char-strip{ overflow:hidden; width:100%; background:#000;
  padding:clamp(16px,2vw,26px) 0; border-block:1px solid rgba(255,255,255,.08); }
.char-strip__track{ display:flex; width:max-content; gap:clamp(12px,1.4vw,20px);
  padding-inline:clamp(12px,1.4vw,20px);
  animation:charScroll 40s linear infinite; }
/* hover a single tile → ONLY that card pops out (bigger + lifts); every other
   card is unaffected and the strip keeps its exact place (no layout shift).
   The scroll eases to slower on hover via JS updatePlaybackRate → never jumps. */
.char-tile{ flex:none; width:clamp(140px,13vw,172px); height:clamp(140px,13vw,172px);
  background:var(--cream); border:1px solid var(--hair); border-radius:22px;
  display:grid; place-items:center; overflow:hidden; position:relative;
  transition:transform .4s var(--ease-out), box-shadow .4s var(--ease-out); }
.char-tile:hover{ transform:scale(1.18); z-index:4;
  box-shadow:0 20px 44px -14px rgba(0,0,0,.55); }
.char-tile img{ width:100%; height:100%; object-fit:contain; display:block; }
@keyframes charScroll{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
@media (prefers-reduced-motion:reduce){ .char-strip__track{ animation:none !important; } }
/* Hotel Check-in (first review row) — name in the "Today" coral */
#learn .lib-hlist li:first-child .lib-hname{ color:var(--coral) !important; }

/* ============================================================
   S · STRIP ORDER · HERO OPENING · FAST POPUP · LIBRARY ITEM HOVER
   ============================================================ */
/* strip sits right BEFORE the Fluent section in the flex order (not at top) */
.char-strip{ order:1; margin-block:clamp(30px,5vw,64px); }   /* between the hero (#home, order:1, DOM-first) and #grow; breathing room above + below */
#fluent{ order:6 !important; }

@media (prefers-reduced-motion:no-preference){
  /* ---- HERO opening: title + buttons glide up, phone glides in ---- */
  #home .hero2 > .reveal{ opacity:1 !important; transform:none !important; transition:none !important; }
  #home .hero2 > .reveal .display{ animation:heroRise .8s var(--ease-smooth) .08s both; }
  #home .hero2 > .reveal .wrap-flex{ animation:heroRise .75s var(--ease-smooth) .26s both; }
  .hero2__stage.reveal{ opacity:0 !important; transform:translateY(30px) scale(.985) !important; }
  .hero2__stage.reveal.in{ animation:heroSlide .9s var(--ease-smooth) .16s both !important; }

  /* ---- POPUP (intro): smooth glide-in ---- */
  .launch-modal.is-open .launch-modal__card{ animation:lmCardIn .5s var(--ease-smooth) both !important; }
  .launch-modal.is-open .launch-modal__backdrop{ animation-duration:.4s !important; }
  /* mascot: a clean pop-in, then a slow, gentle float (was an aggressive bob) */
  .launch-modal.is-open .launch-modal__mascot{
    animation:lmMascotPop .42s var(--ease-smooth) both, lmMascotFloat 6s ease-in-out .5s infinite !important; }
  .launch-modal__mascot{ animation:none; }  /* kill the base float-bob when closed */
  .launch-modal.is-open .launch-modal__h{ animation-duration:.5s !important; animation-delay:.12s !important; }
  .launch-modal.is-open .launch-modal__p{ animation-duration:.5s !important; animation-delay:.18s !important; }
  .launch-modal.is-open .launch-modal__card .btn{ animation-duration:.5s !important; animation-delay:.24s !important; }
  .launch-modal.is-open .launch-modal__x{ animation-delay:.22s !important; }
}
@keyframes heroRise{ from{ opacity:0; transform:translateY(28px); } to{ opacity:1; transform:none; } }
@keyframes heroSlide{ from{ opacity:0; transform:translateY(30px) scale(.85); } to{ opacity:1; transform:scale(.88); } }
@keyframes lmCardIn{ from{ opacity:0; transform:translateY(18px) scale(.98); } to{ opacity:1; transform:none; } }
@keyframes lmMascotPop{ from{ opacity:0; transform:scale(.85); } to{ opacity:1; transform:none; } }
@keyframes lmMascotFloat{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-4px); } }

/* ---- LIBRARY: individual hover-pop on the smaller cards (certs, tiles, rows) ---- */
@media (hover:hover) and (pointer:fine){
  #learn .lib-cert, #learn .lib-lang, #learn .lib-group,
  #learn .lib-dl, #learn .lib-slist li, #learn .lib-mgrid > div{
    transition:transform .25s var(--ease-out) !important; }
  #learn .lib-cert:hover, #learn .lib-lang:hover, #learn .lib-group:hover,
  #learn .lib-dl:hover, #learn .lib-slist li:hover, #learn .lib-mgrid > div:hover{
    transform:translateY(-3px) scale(1.02) !important; }
}

/* ============================================================
   T · FLUENT reorder — the 3 review boxes on top, then the
   "Start speaking today." CTA + badges + mascots BELOW to close
   the page.  strip → small gap → reviews → CTA block → footer.
   ============================================================ */
#fluent .wrap{ display:flex; flex-direction:column; }
/* (strip moved to the top of the page — Fluent uses normal chapter top padding) */
#fluent .reviews__grid{ order:1; margin-top:0 !important; }
#fluent .flt-head{ order:2; margin-top:clamp(30px,4vw,58px) !important; margin-bottom:0 !important; }

/* ============================================================
   U · FLUENT ending as ONE ROW  +  strip evenly placed
   ============================================================ */
/* close the page as a single centered row: mascot · title · badges · mascot */
#fluent .flt-head{ flex-direction:row !important; flex-wrap:nowrap !important;
  align-items:center !important; justify-content:space-between !important;
  gap:clamp(18px,2.6vw,44px) !important; }
#fluent .sec-top__l{ display:flex !important; flex-direction:row !important; align-items:center !important;
  gap:clamp(12px,1.6vw,24px) !important; flex:0 1 auto !important; }
#fluent .chap-tag{ display:none !important; }                 /* drop the 04 tag in the row */
#fluent .flt-sub-cta{ margin-top:0 !important; flex-wrap:nowrap !important; }
#fluent .flt-sub-cta .rx-badge{ flex:none !important; }
#fluent .flt-sub-cta .rx-badge__txt small,
#fluent .flt-sub-cta .rx-badge__txt b{ white-space:nowrap !important; }
#fluent .sec-top__l .sec-h{ font-size:clamp(1.5rem,3vw,2.6rem) !important; white-space:nowrap; line-height:1.05 !important; }
#fluent .sec-buddy .sec-mascot{ height:clamp(72px,7.4vw,96px) !important; }
#fluent{ padding-bottom:clamp(26px,3.2vw,46px) !important; } /* end just after the row */

/* strip evenly between the Library 4-pack (Travel…) and the 3 review boxes */
/* strip sits evenly between the hero and the "Learn it…" section — equal gaps */
#home{ padding-bottom:clamp(46px,5.5vw,78px) !important; }
#grow{ padding-top:clamp(46px,5.5vw,78px) !important; }

/* ============================================================
   V · Review cards — player DP next to each reviewer
   ============================================================ */
.review-card__by{ display:flex; align-items:center; gap:11px; margin-top:auto; }
.review-card__by .review-card__role{ margin:0 !important; }
.review-card__dp{ width:36px; height:36px; border-radius:50%; overflow:hidden; flex:none;
  background:var(--cream-raise); box-shadow:0 0 0 1px var(--hair); }
.review-card--dark .review-card__dp{ box-shadow:0 0 0 1px rgba(255,255,255,.18); }
.review-card__dp img{ width:100%; height:100%; object-fit:cover; display:block; }

/* review character — the matching full-body character illustration, peeking
   out of the top-right corner (half inside the box, half out) */
.review-card{ overflow:visible; }
.review-card__mascot{ position:absolute; top:clamp(-58px,-6vw,-40px); right:clamp(-34px,-3.4vw,-22px);
  width:clamp(98px,11vw,138px); height:auto; display:block; z-index:3; pointer-events:none;
  filter:drop-shadow(0 12px 16px rgba(35,39,31,.24));
  transform:rotate(4deg); transform-origin:70% 80%;
  transition:transform .45s cubic-bezier(.22,1,.36,1); }
.review-card:hover .review-card__mascot{ transform:rotate(-3deg) scale(1.08) translateY(-4px); }
@media (prefers-reduced-motion:reduce){ .review-card__mascot{ transition:none; } }

/* ============================================================
   W · FLUENT — "Start speaking today." becomes a centered header
   OVER the reviews; everything centered; badges + mascots close.
   Order: title → reviews → (mascot · badges · mascot)
   ============================================================ */
/* pull the title up: trim the space above the section, add more gap down to the reviews */
#fluent{ padding-top:clamp(48px,6vw,90px) !important; }
#fluent .flt-title{ order:0 !important; width:100%; text-align:center !important;
  margin:0 0 clamp(36px,4.8vw,66px) 0 !important;
  font-size:clamp(2.7rem,5.6vw,4.7rem) !important; line-height:1.03 !important;
  align-self:center !important; }
#fluent .reviews__grid{ order:1 !important; margin-top:0 !important; }
#fluent .flt-head{ order:2 !important; justify-content:center !important;
  gap:clamp(22px,3.4vw,56px) !important; margin-top:clamp(28px,3.6vw,50px) !important; }
/* the closing row is now just badges flanked by mascots — keep it centered */
#fluent .sec-top__l{ justify-content:center !important; }

/* ============================================================
   X · Hero phone UI — head-to-head snippet (replaces the 2×2 actions)
   white frame, small rounded corners, little inset, clickable button feel
   ============================================================ */
.hs-h2h{ display:flex; flex-direction:column; align-items:stretch;
  width:calc(100% - clamp(14px,3vw,24px)); margin-inline:auto;   /* cut in a little from the sides */
  background:#141414; border:2px solid var(--coral); border-radius:15px;
  padding:clamp(8px,0.9vw,12px); gap:clamp(9px,1vw,13px);
  margin-bottom:clamp(6px,0.8vw,11px);      /* little gap from the phone's bottom edge */
  text-align:center; cursor:pointer; text-decoration:none;
  outline:1px solid var(--hair); outline-offset:-1px;
  transition:transform .2s var(--ease-out); }
.hs-h2h:hover{ transform:translateY(-2px); }
.hs-h2h:active{ transform:scale(.99); }
.hs-h2h__t{ font-size:.98rem; font-weight:900; color:#fff; letter-spacing:.03em; }
/* one row: You card · (VS + 2 score rows + Challenge) · Neha card */
.hs-h2h__row{ display:flex; align-items:center; justify-content:center; gap:clamp(8px,1.2vw,18px); }
.hs-h2h__p{ display:flex; flex-direction:column; align-items:center; gap:8px;
  background:var(--coral); border-radius:17px; padding:14px 18px; flex:none;
  align-self:flex-start; margin-top:-2px; }   /* nudge the player cards up */
.hs-h2h__p b{ font-size:1.1rem; font-weight:900; color:#fff; }
.hs-h2h__pf{ width:70px; height:70px; border-radius:50%; overflow:hidden; flex:none; background:#fff; }
.hs-h2h__pf img{ width:100%; height:100%; object-fit:cover; display:block; }
.hs-h2h__mid{ display:flex; flex-direction:column; align-items:center; gap:11px; flex:none; }
.hs-h2h__vs{ font-size:.9rem; font-weight:900; color:#fff; background:var(--coral);
  width:36px; height:36px; border-radius:50%; display:grid; place-items:center; }
.hs-h2h__scores{ display:flex; flex-direction:column; gap:9px; }
.hs-h2h__g{ display:flex; align-items:center; gap:12px; }
.hs-h2h__g i{ font-style:normal; font-weight:900; font-size:.92rem; width:34px; height:34px;
  border-radius:50%; display:grid; place-items:center; background:#fff; color:#141414; }
.hs-h2h__g i.w{ background:var(--coral); color:#fff; }
.hs-h2h__cta{ background:var(--coral); color:#fff; font-size:.86rem; font-weight:900;
  letter-spacing:.04em; padding:10px 28px; border-radius:11px; margin-top:2px; }

/* ============================================================
   Y · MOBILE — a clean, "very less" version (≤600px)
   Keep one or two hero cards per chapter, drop the dense rest,
   single column, tighter rhythm. Loads last → wins.
   ============================================================ */
@media (max-width:600px){
  /* tighter vertical rhythm between chapters */
  .chapter{ padding-block:clamp(38px,9vw,60px) !important; }
  #home{ padding-top:clamp(18px,5vw,30px) !important; }

  /* GROW (Learn) — keep the live conversation + pronunciation only */
  #grow .rx-grow{ display:flex !important; flex-direction:column !important; gap:14px !important; }
  #grow .rx-fillbox, #grow .rx-progress.flu, #grow .rx-topics-card,
  #grow .jrn, #grow .lsn-head, #grow .lsn-films{ display:none !important; }

  /* EXPLORE (Compete) — keep the profile + head-to-head only */
  #explore .cmp-top{ display:block !important; }
  #explore .cmp-friends, #explore #games, #explore #leaderboard,
  #explore .cmp-leagues, #explore .cmp-ach, #explore .cmp-bottom{ display:none !important; }

  /* LIBRARY — keep the lesson library + languages only */
  #learn .lib-certs, #learn .lib-hist, #learn .lib-saved,
  #learn .lib-mastery, #learn .lib-offline, #learn .rx-scenes{ display:none !important; }

  /* FLUENT — title, reviews stack, badges centred; mascots off */
  #fluent .flt-title{ font-size:clamp(1.9rem,8vw,2.6rem) !important; margin-bottom:20px !important; }
  #fluent .sec-buddy{ display:none !important; }
  #fluent .flt-head{ margin-top:24px !important; }
  #fluent .flt-sub-cta{ justify-content:center !important; flex-wrap:wrap !important; }

  /* character strip — a touch smaller on phones */
  .char-tile{ width:118px !important; height:118px !important; border-radius:18px !important; }
}

/* let the app screen grow to fit the head-to-head card, with a bottom gap
   (matches v13's `.appwin .dash#dash` specificity to beat its fixed 560px) */
.appwin .dash#dash{ height:auto !important; padding-bottom:clamp(16px,1.9vw,26px) !important; }

/* nudge the whole phone mockup up a bit in the hero */
.hero2__stage{ margin-top:clamp(-42px,-2.8vw,-16px) !important; }

/* phone scales from the top so it shrinks in place near where it was nudged up */
.hero2__stage{ transform-origin:center top; }

/* nudge the App Store / Google Play badges a hair up in the closing row */
#fluent .flt-sub-cta{ transform:translateY(-6px); }

/* ============================================================
   LIBRARY · Review History — the two flanking mascots (were around
   the app-store badges) moved to its top-left / top-right corners.
   ============================================================ */
#learn .lib-hist{ position:relative; overflow:visible; }
#learn .lib-hist__buddy{ position:absolute; top:0; height:clamp(60px,6vw,80px); width:auto;
  pointer-events:none; z-index:5; filter:drop-shadow(0 10px 18px rgba(35,39,31,.16)); }
#learn .lib-hist__buddy--l{ left:0; transform:translate(-52%,-74%) rotate(-8deg); }
#learn .lib-hist__buddy--r{ right:0; transform:translate(52%,-74%) rotate(8deg); }
@media (max-width:560px){ #learn .lib-hist__buddy{ height:clamp(48px,11vw,62px); } }

/* ============================================================
   CLEAN SITE FOOTER — brand (left) · store badges (middle) · credit (right)
   ============================================================ */
.site-foot{ border-top:1px solid rgba(35,39,31,.1); background:var(--cream); }
.site-foot__in{ display:flex; align-items:center; justify-content:space-between;
  gap:clamp(18px,3vw,44px); flex-wrap:wrap; padding:clamp(3px,0.5vw,6px) 0; }
.foot-brand{ display:inline-flex; align-items:center; gap:10px; text-decoration:none;
  font-weight:800; font-size:1.4rem; letter-spacing:-.02em; color:var(--ink); }
.foot-brand .foot-mark{ width:34px; height:34px; border-radius:9px; }
.foot-brand b{ color:var(--coral); font-weight:800; }
.foot-cta{ display:flex; gap:12px; flex-wrap:wrap; justify-content:center; }
.foot-credit{ margin:0; font-weight:700; color:var(--muted); font-size:1rem; white-space:nowrap; }
.foot-credit b{ color:var(--coral); font-weight:800; }
@media (max-width:720px){ .site-foot__in{ justify-content:center; text-align:center; } }

/* thinner footer band — compact badges + brand */
.site-foot .foot-cta .rx-badge{ padding:5px 12px !important; gap:8px !important; }
.site-foot .foot-cta .rx-badge__logo{ width:17px !important; height:17px !important; }
.site-foot .foot-brand{ font-size:1.1rem; }
.site-foot .foot-brand .foot-mark{ width:24px; height:24px; }
/* thin footer — shrink the badge type so the whole band stays low */
.site-foot .foot-cta .rx-badge__txt{ line-height:1.05 !important; }
.site-foot .foot-cta .rx-badge__txt small{ font-size:.5rem !important; }
.site-foot .foot-cta .rx-badge__txt b{ font-size:.86rem !important; }
.site-foot .foot-credit{ font-size:.86rem !important; }

/* pull the thin footer tight under the reviews — remove the big chapter padding gap */
#fluent{ padding-bottom:clamp(18px,2.4vw,36px) !important; }
.site-foot{ margin:0 !important; }