/* ============================================================
   FLUENTLY.IO — v8 · GROUNDED PRODUCT LAYER  (loaded last)
   Kills the "floating stickers on a slide" look. The product
   now lives INSIDE frames (desktop app-window + phone), on bold
   flat colour stages, as cohesive screens. Brand tokens unchanged.
   ============================================================ */

/* ---- kill every floating-sticker artefact (defensive) ---- */
.fxlayer,.meetfx,.fxw,.modbadge{ display:none !important; }
.hero2__stage::before{ display:none !important; }

/* ---- bolder, flatter depth: crisp confident cards, not soft floats ---- */
:root{ --flat: 0 1px 0 rgba(35,39,31,.04), 0 18px 34px -26px rgba(35,39,31,.40); }
.card,.mod,.xw,.mempanel,.eqp{ box-shadow:var(--flat) !important; border-color:var(--line) !important; }
.card:hover,.mod:hover,.xw:hover{ transform:translateY(-3px) !important; box-shadow:0 2px 0 rgba(35,39,31,.05), 0 26px 48px -28px rgba(35,39,31,.5) !important; }

/* ============================================================
   HERO — daily dashboard inside a desktop app-window,
   grounded on a bold solid colour stage
   ============================================================ */
/* hero balance — wider text column, slightly smaller app-window (desktop only, alignment intact) */
@media(min-width:921px){ .hero2{ grid-template-columns:1.18fr 1fr; } }
.hero2__stage{
  background:#000;
  border-radius:var(--r-xl);
  padding:clamp(8px,1.2vw,15px);
  margin-top:12px;
  overflow:visible;
  box-shadow:0 40px 80px -42px rgba(20,18,16,.55), inset 0 1px 0 rgba(255,255,255,.07);
}
.appwin{
  background:var(--paper);
  border:1px solid rgba(35,39,31,.08);
  border-radius:var(--r-lg);
  overflow:hidden;
  box-shadow:0 24px 50px -28px rgba(35,39,31,.45);
}
.appwin__bar{
  display:flex; align-items:center; gap:10px;
  padding:12px 16px; border-bottom:1px solid var(--line-soft); background:var(--cream-raise);
}
.awdots{ display:flex; gap:6px; flex:none; }
.awdots i{ width:11px; height:11px; border-radius:50%; }
.awdots i:nth-child(1){ background:#DD571C } .awdots i:nth-child(2){ background:#F4D24E } .awdots i:nth-child(3){ background:#56c08a }
.awtitle{ display:inline-flex; align-items:center; gap:8px; font-weight:800; font-size:.95rem; color:var(--ink); }
.awtitle .mark{ width:20px; height:20px; }
.awlive{ margin-left:auto; font-size:.72rem; font-weight:800; color:var(--coral-deep); background:var(--coral-tint); padding:4px 11px; border-radius:999px; }
/* the dashboard drops its own frame — the window IS the surface */
.appwin .dash{ background:transparent !important; box-shadow:none !important; border-radius:0 !important; padding:clamp(14px,1.6vw,20px) !important; height:560px !important; }
#talkview .convo{ overflow-y:auto !important; }
.dstats .dstat.bigstat{ flex:1 1 0; flex-direction:column !important; align-items:center; justify-content:center; gap:3px; padding:11px 8px !important; text-align:center;
  border:none !important; border-radius:0 !important; box-shadow:none !important; position:relative; transform:skewX(-11deg); }
.dstats .dstat.bigstat .cellin{ display:flex; flex-direction:column; align-items:center; gap:3px; transform:skewX(11deg); }
.dstats .dstat.bigstat:nth-child(1){ background:#ececec !important; margin-left:-18px; padding-left:26px !important; }
.dstats .dstat.bigstat:nth-child(2){ background:var(--coral,#DD571C) !important; }
.dstats .dstat.bigstat:nth-child(3){ background:#ececec !important; margin-right:-18px; padding-right:26px !important; }
.dstats .dstat.bigstat + .dstat.bigstat::before{ content:""; position:absolute; left:-1px; top:0; bottom:0; width:2px; background:#fff; }
.dstat.bigstat .num{ font-size:1.75rem; font-weight:900; line-height:1; letter-spacing:-.01em; }
.dstat.bigstat .row2{ display:inline-flex; align-items:center; gap:5px; }
.dstat.bigstat .emo{ font-size:1rem; line-height:1; }
.dstat.bigstat .lab{ font-size:.68rem; font-weight:800; letter-spacing:.09em; text-transform:uppercase; }
/* middle = orange box, white text · sides = grey box, orange text (number + label same colour) */
.dstats .dstat.bigstat:nth-child(2) .num, .dstats .dstat.bigstat:nth-child(2) .lab{ color:#fff !important; }
.dstats .dstat.bigstat:nth-child(1) .num, .dstats .dstat.bigstat:nth-child(1) .lab,
.dstats .dstat.bigstat:nth-child(3) .num, .dstats .dstat.bigstat:nth-child(3) .lab{ color:var(--coral,#DD571C) !important; }
.flagico{ width:16px; height:11px; border-radius:2px; flex:none; box-shadow:0 0 0 1px rgba(0,0,0,.08); vertical-align:-1px; }
.dash .qa button{ background:var(--coral,#DD571C) !important; color:#fff !important; border:none !important; font-weight:900 !important; padding:20px 8px !important; font-size:.95rem !important; gap:7px;
  box-shadow:inset 0 0 0 3px var(--coral,#DD571C), inset 0 0 0 5px #fff !important; }
.dash .qa button .em{ display:inline-flex; }
.dash .qa button .em svg{ width:27px; height:27px; display:block; }
.appwin__bar{ position:relative; }
.awtitle{ color:var(--coral,#DD571C) !important; font-weight:900 !important; letter-spacing:.04em; position:absolute; left:50%; transform:translateX(-50%); }
.dash__greet b{ font-size:1.3rem !important; }
.dash__greet #dg-level{ padding:9px 16px !important; font-size:1rem !important; gap:8px; border-radius:14px; }
.dash__greet #dg-level .flagico{ width:24px; height:16px; }
.dstats{ flex-wrap:nowrap !important; gap:0 !important; background:#fff; border:1px solid var(--line); border-radius:18px; padding:0 !important; overflow:hidden !important; box-shadow:0 1px 2px rgba(0,0,0,.04); }
.dstats .dstat{ flex:1 1 0; min-width:0; justify-content:center; padding:6px 8px !important; white-space:nowrap; }

/* ============================================================
   GROW — one contained component board (a tidy system sheet)
   ============================================================ */
.board{
  background:var(--cream-raise);
  border:1px solid var(--line);
  border-radius:var(--r-xl);
  padding:clamp(16px,2vw,26px);
  box-shadow:0 24px 56px -36px rgba(35,39,31,.45);
}
.board__bar{ display:flex; align-items:baseline; gap:12px; margin-bottom:16px; padding-bottom:14px; border-bottom:1px solid var(--line-soft); }
.board__t{ font-weight:900; font-size:1.05rem; letter-spacing:-.01em; }
.board__h{ font-size:.8rem; font-weight:700; color:var(--muted); }
/* flatter tiles on the board → reads as a system, not scattered cards */
.board .mod{ box-shadow:none !important; border:1px solid var(--line) !important; }
.board .mod:hover{ box-shadow:var(--flat) !important; }
/* one bold solid primary block for hierarchy */
.mod--convo{ background:var(--sage) !important; border-color:transparent !important; }
.mod--goal{ background:var(--coral-tint) !important; border-color:transparent !important; }

/* ============================================================
   PHONE FRAME — a real mobile screen for the live conversation
   ============================================================ */
.phone{
  position:relative; width:min(300px,100%); margin:12px auto 0;
  background:var(--charcoal-2); border-radius:42px; padding:10px;
  box-shadow:0 34px 64px -30px rgba(35,39,31,.55), inset 0 0 0 2px rgba(255,255,255,.05);
}
.phone::before{ content:""; position:absolute; top:14px; left:50%; transform:translateX(-50%); width:74px; height:18px; background:#000; border-radius:999px; z-index:3; }
.phone__bar{ display:flex; justify-content:space-between; align-items:center; color:#fff; font-size:.7rem; font-weight:800; padding:7px 18px 8px; }
.phone__sig{ display:inline-flex; align-items:center; gap:3px; }
.phone__sig i{ width:3px; height:9px; background:#fff; border-radius:1px; opacity:.9; }
.phone__screen{ background:var(--cream-raise); border-radius:30px; padding:15px; }
.phone__head{ display:flex; align-items:center; gap:9px; margin-bottom:12px; }
.phone__head b{ font-size:.92rem; font-weight:800; }
.phone__lv{ margin-left:auto; font-size:.66rem; font-weight:800; color:var(--coral-deep); background:var(--coral-tint); padding:4px 10px; border-radius:999px; }
.ava.sm{ width:28px; height:28px; flex:none; }
.ava.sm img{ width:100%; height:100%; }
.phone .preview{ background:transparent; border:none; padding:0; box-shadow:none; min-height:0; gap:9px; }
.phone__compose{ display:flex; align-items:center; gap:9px; margin-top:14px; padding:8px 8px 8px 14px; background:#fff; border:1px solid var(--line); border-radius:999px; box-shadow:var(--depth-1); }
.phone__compose .ph{ flex:1; font-size:.8rem; color:var(--muted-soft); font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.phone__compose .mic{ width:32px; height:32px; flex:none; border-radius:50%; background:var(--coral); color:#fff; display:grid; place-items:center; box-shadow:0 8px 16px -8px rgba(221, 87, 28,.7); }
.phone__compose .mic svg{ width:16px; height:16px; }
.phone__tabs{ display:flex; justify-content:space-around; padding:12px 8px 6px; }
.phone__tabs button{ width:42px; height:42px; border-radius:50%; background:rgba(255,255,255,.10); display:grid; place-items:center; font-size:1.05rem; transition:transform .2s var(--ease-back); }
.phone__tabs button.on{ background:var(--coral); box-shadow:0 8px 18px -8px rgba(221, 87, 28,.7); }
.phone__tabs button:hover{ transform:translateY(-2px); }

/* ============================================================
   MEET — floating orbit folded into one clean stat row
   ============================================================ */
.statrow{ display:flex; flex-wrap:wrap; justify-content:center; gap:clamp(22px,4.5vw,60px); margin-top:clamp(22px,3vw,40px); }
.stat{ text-align:center; }
.stat b{ display:block; font-size:clamp(1.7rem,3vw,2.4rem); font-weight:900; letter-spacing:-.03em; color:var(--ink); line-height:1; }
.stat span{ font-size:.82rem; font-weight:700; color:var(--muted); }

/* ============================================================
   LEARN — bold solid "scenario" category cards (insp style)
   ============================================================ */
.scenes{ display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(12px,1.4vw,18px); margin-top:clamp(22px,3vw,40px); }
.scene{ position:relative; overflow:hidden; min-height:206px; border-radius:var(--r-lg); padding:20px;
  display:flex; flex-direction:column; justify-content:flex-end; gap:5px; box-shadow:var(--flat);
  transition:transform .35s var(--ease), box-shadow .35s var(--ease); cursor:pointer; }
.scene:hover{ transform:translateY(-5px); box-shadow:0 2px 0 rgba(35,39,31,.05), 0 30px 54px -28px rgba(35,39,31,.5); }
.scene .sc-no{ position:absolute; top:16px; left:20px; font-family:inherit; font-size:.82rem; font-weight:900; opacity:.55; }
.scene .sc-ic{ position:absolute; top:6px; right:14px; font-size:3.4rem; line-height:1; opacity:.92; }
.scene h3{ font-size:1.5rem; font-weight:900; letter-spacing:-.02em; line-height:1.04; color:inherit; }
.scene p{ font-size:.86rem; font-weight:700; opacity:.82; }
.scene .sc-go{ margin-top:9px; font-size:.82rem; font-weight:900; opacity:.9; }
.s-coral{ background:var(--coral); color:#fff; }
.s-butter{ background:var(--butter); color:var(--ink); }
.s-lime{ background:var(--lime); color:var(--ink); }
.s-dark{ background:var(--charcoal-2); color:#fff; }
@media(max-width:820px){ .scenes{ grid-template-columns:repeat(2,1fr); } }
@media(max-width:480px){ .scenes{ grid-template-columns:1fr; } .scene{ min-height:150px; } }

/* ============================================================
   EXPLORE — widgets become bold solid colour blocks (insp style)
   ============================================================ */
.xstrip .xw{ background:var(--a); border-color:transparent; color:#fff; box-shadow:var(--flat) !important; }
.xstrip .xw.amber{ color:var(--ink); }
.xstrip .xw .xh{ color:rgba(255,255,255,.85); }
.xstrip .xw.amber .xh{ color:rgba(35,39,31,.66); }
.xstrip .xw .xh .d{ background:#fff; box-shadow:0 0 0 4px rgba(255,255,255,.25); }
.xstrip .xw.amber .xh .d{ background:var(--ink); box-shadow:0 0 0 4px rgba(35,39,31,.14); }
.xstrip .xw .xh .ig{ background:rgba(255,255,255,.22); color:#fff; }
.xstrip .xw.amber .xh .ig{ background:rgba(35,39,31,.12); color:var(--ink); }
.xstrip .xw .xbig{ color:#fff; }
.xstrip .xw.amber .xbig{ color:var(--ink); }
.xstrip .xw .xbig small,.xstrip .xw .xsub{ color:rgba(255,255,255,.82); }
.xstrip .xw.amber .xbig small,.xstrip .xw.amber .xsub{ color:rgba(35,39,31,.6); }
.xstrip .xw .xtrack{ background:rgba(255,255,255,.25); }
.xstrip .xw .xtrack i{ background:#fff !important; }
.xstrip .xw.amber .xtrack{ background:rgba(35,39,31,.16); } .xstrip .xw.amber .xtrack i{ background:var(--ink) !important; }
.xstrip .xw .xdots i{ background:rgba(255,255,255,.32); } .xstrip .xw .xdots i.on{ background:#fff; }
.xstrip .xw .xach{ background:rgba(255,255,255,.2); box-shadow:none; } .xstrip .xw .xach.lock{ background:rgba(255,255,255,.12); }

/* ============================================================
   PER-BOX REFINEMENTS — each surface rethought, bolder & cleaner
   ============================================================ */

/* Memory — bold two-tone: clean "yesterday" → solid coral "today" */
.mempanel{ box-shadow:var(--flat) !important; border-radius:var(--r-lg); }
.mempanel.today{ background:var(--coral) !important; border-color:transparent !important; }
.mempanel.today .day{ color:#fff !important; }
.mempanel.today .recall-bubble{ background:rgba(255,255,255,.16) !important; border-color:rgba(255,255,255,.32) !important; color:#fff !important; }
.mempanel.today .recall-bubble b{ color:#fff !important; }
.memtag{ box-shadow:none !important; border:1.5px solid var(--line); }
.memtag.pick.used{ background:var(--coral-tint); border-color:var(--coral-soft); }
.memarrow{ box-shadow:0 14px 26px -10px rgba(221, 87, 28,.6) !important; }

/* Leaderboard — game-screen energy: solid "You" row + medal ranks */
.lb__row.me{ background:var(--coral) !important; border-color:transparent !important; }
.lb__row.me b, .lb__row.me .xp, .lb__row.me .mv.up{ color:#fff !important; }
.lb__row.me .av{ background:rgba(255,255,255,.22); color:#fff; }
.lb__row .rk.g{ background:#F4D24E; color:#5a4500; }
.lb__row .rk.s{ background:#d2d8de; color:#33414c; }
.lb__row .rk.b{ background:#e6b483; color:#5e3a17; }

/* Game cards — clean white "game screen" with flat depth */
.game{ background:var(--paper) !important; border:1px solid var(--line) !important; box-shadow:var(--flat) !important; }
.game .tag.daily{ background:var(--coral); color:#fff; }

/* Hero dashboard rows + actions — crisp edges so they read as tappable */
.appwin .dcard{ border:1px solid rgba(221, 87, 28,.45) !important; box-shadow:0 2px 10px rgba(221, 87, 28,.18) !important; }
/* Resume card — popped up, clearly clickable */
#dg-continue{ cursor:pointer; border-color:rgba(221, 87, 28,.55) !important;
  box-shadow:0 10px 26px -10px rgba(221, 87, 28,.42), 0 2px 6px rgba(0,0,0,.06) !important;
  transition:transform .2s var(--ease-back,cubic-bezier(.34,1.56,.64,1)), box-shadow .22s !important; }
#dg-continue:hover{ transform:translateY(-3px) !important; box-shadow:0 16px 34px -10px rgba(221, 87, 28,.52), 0 3px 8px rgba(0,0,0,.08) !important; }
#dg-continue:active{ transform:translateY(-1px) scale(.995) !important; }
.appwin .dcard .go{ padding:7px 15px; border-radius:10px; background:var(--coral,#DD571C); color:#fff !important; border:1px solid transparent; box-shadow:0 1px 3px rgba(221, 87, 28,.3); }
/* locked lesson — unclickable badge + non-interactive card */
.appwin .dcard .go.lockpill{ background:#eaeaea !important; color:#000 !important; border:1px solid var(--line) !important; box-shadow:none !important; font-size:.74rem !important; font-weight:800; cursor:default; pointer-events:none; display:inline-flex; align-items:center; gap:5px; }
.appwin .dcard .go.lockpill .lk{ width:13px; height:13px; flex:none; color:var(--coral,#DD571C); }
#dg-lesson{ pointer-events:none !important; box-shadow:none !important; border-color:var(--line) !important; }
.dcard .sub .metapill{ display:inline-flex; align-items:center; margin-top:4px; padding:3px 10px; border-radius:999px;
  background:rgba(255,255,255,.55); border:1px solid var(--line); backdrop-filter:blur(7px); -webkit-backdrop-filter:blur(7px);
  font-size:.7rem; font-weight:800; color:var(--muted); box-shadow:inset 0 1px 0 rgba(255,255,255,.6); }
.appwin .qa button{ border:1px solid var(--line); }

/* Learn discover cards — clean white panels, bold active language */
.discover .card{ background:var(--paper) !important; }
.langtile.active{ background:var(--coral) !important; color:#fff !important; border-color:transparent !important; }
.langtile.active .fl{ filter:none; }

/* ============================================================
   CONVERSATION VIEW — premium refinement · white / orange / charcoal
   Bigger surfaces, grouped cards, minimal text, soft borders.
   ============================================================ */
#talkview{ gap:18px !important; }

/* top bar */
#talkview .cv-top{ gap:12px; padding:2px 2px 0 !important; align-items:center; }
#talkview .cv-back{ width:36px; height:36px; border-radius:12px; border:1px solid var(--line); background:#fff;
  font-size:1.3rem; font-weight:800; color:var(--ink); display:grid; place-items:center; cursor:pointer; flex:none; line-height:1; }
#talkview .cv-back:hover{ border-color:var(--coral,#DD571C); color:var(--coral,#DD571C); }
#talkview .cv-title{ font-size:1.02rem; font-weight:800; color:var(--ink); }
#talkview .cv-words{ margin-left:auto; font-size:.84rem; font-weight:800; color:#fff;
  background:var(--coral,#DD571C); border:1px solid transparent; padding:6px 13px; border-radius:999px; }

/* grouped settings card — one container, not three floating sections */
#talkview .setcard{ background:#fff; border:1px solid var(--line); border-radius:20px; padding:14px; display:flex; flex-direction:column; gap:13px;
  box-shadow:0 1px 2px rgba(0,0,0,.04); }
#talkview .langsel{ display:flex !important; align-items:center !important; gap:12px !important;
  background:transparent !important; border:none !important; padding:0 !important; border-radius:0 !important; box-shadow:none !important; }
#talkview .langsel .lp{ font-size:1.05rem; font-weight:800; color:var(--ink); background:transparent; border:none; padding:0; cursor:default; }
#talkview .langsel .swap{ width:32px; height:32px; border-radius:50%; background:var(--coral,#DD571C); color:#fff; display:grid; place-items:center;
  font-size:1.05rem; font-weight:900; cursor:pointer; flex:none; border:none; transition:transform .25s var(--ease-back,ease); }
#talkview .langsel .swap:hover{ transform:rotate(180deg); }
#talkview .langsel .learn{ cursor:pointer; }
#talkview .langsel .learn b{ color:var(--coral,#DD571C); font-size:1.05rem; }
#talkview .langsel .diff{ margin-left:auto; font-size:.8rem; font-weight:800; color:var(--ink);
  background:#fff; border:1px solid var(--line); padding:6px 13px; border-radius:999px; }

/* segmented topic control — large equal tap targets */
#talkview .topics{ display:flex !important; gap:7px !important; flex-wrap:nowrap !important;
  background:var(--cream-raise,#f4f1ea); border:1px solid var(--line); border-radius:15px; padding:5px; }
#talkview .topics .chip{ flex:1 1 0 !important; justify-content:center; text-align:center; font-size:.92rem !important; font-weight:800 !important;
  padding:11px 8px !important; border-radius:11px !important; background:transparent !important; border:none !important; color:var(--muted) !important; box-shadow:none !important; }
#talkview .topics .chip[data-on="1"]{ background:var(--coral,#DD571C) !important; color:#fff !important; box-shadow:0 2px 7px rgba(221, 87, 28,.32) !important; }

/* conversation bubbles — larger, rounder, clear separation */
#talkview .convo{ gap:14px !important; padding:6px 2px !important; }
#talkview .convo .bubble{ max-width:84% !important; font-size:15px !important; line-height:1.45 !important; padding:13px 17px !important; border-radius:20px !important; font-weight:600 !important; }
#talkview .convo .bubble.them{ background:#fff !important; border:1px solid var(--line) !important; border-bottom-left-radius:7px !important; color:var(--ink) !important; box-shadow:0 1px 2px rgba(0,0,0,.04) !important; }
#talkview .convo .bubble.me{ background:var(--charcoal,#23271f) !important; color:#fff !important; border:none !important; border-bottom-right-radius:7px !important; }

/* correction chip — charcoal + orange, no purple */
#talkview .fixchip{ background:#fff !important; border:1px solid var(--line) !important; border-radius:15px !important; padding:11px 15px !important; font-size:14px !important; }
#talkview .fixchip .pen{ background:var(--coral-tint,#ffe7e0) !important; color:var(--coral,#DD571C) !important; }
#talkview .fixchip b{ color:var(--coral,#DD571C) !important; }

/* memory note — neutral surface, orange check (only 3 colors) */
#talkview .memnote{ background:var(--cream-raise,#f4f1ea) !important; color:var(--ink) !important; border:1px solid var(--line) !important; border-radius:15px !important; padding:11px 15px !important; font-size:13.5px !important; }
#talkview .memnote .chk{ background:var(--coral,#DD571C) !important; }

/* vocab highlight → small orange rounded tag */
#talkview .hl{ background:var(--coral-tint,#ffe7e0) !important; color:var(--coral-deep,#c8431f) !important; padding:.12em .5em !important; border-radius:8px !important; font-weight:800 !important; box-shadow:none !important; }
#talkview .hl:hover,
#talkview .hl.saved{ background:var(--coral,#DD571C) !important; color:#fff !important; }

/* savebar + quick replies removed — kept in DOM (JS writes to them), hidden;
   convo (flex:1) absorbs the space so the panel stays the same size */
#talkview .savebar,
#talkview .qreplies{ display:none !important; }

/* bottom voice recorder — the visual focus */
#talkview .recbar{ background:#fff !important; border:1px solid var(--line) !important; border-radius:22px !important; padding:12px 12px 12px 22px !important;
  box-shadow:0 8px 22px -10px rgba(221, 87, 28,.4) !important; gap:14px !important; }
#talkview .recbar .ph{ font-size:.96rem !important; font-weight:700 !important; color:var(--muted) !important; }
#talkview .recbar .wave{ height:30px !important; }
#talkview .recbar .wave i{ width:3.5px !important; background:var(--coral,#DD571C) !important; }
#talkview .holdmic{ width:58px !important; height:58px !important; box-shadow:0 10px 20px -6px rgba(221, 87, 28,.6) !important; }
#talkview .holdmic svg{ width:25px !important; }

/* ---- responsive ---- */
@media (max-width:920px){
  .hero2__stage{ padding:14px; }
}
@media (max-width:560px){
  .statrow{ gap:22px; }
  .phone{ width:min(280px,100%); }
}

/* ============================================================
   HOMEPAGE FINISHING PASS
   ============================================================ */

/* navbar — short centred rounded pill, soft light-grey */
.nav{ background:transparent !important; backdrop-filter:none !important; box-shadow:none !important; }
.nav.is-stuck{ box-shadow:none !important; }
.nav__in{ justify-content:center !important; width:-moz-fit-content; width:fit-content; max-width:calc(100% - 28px); margin:0 auto !important;
  padding:8px 22px !important; gap:18px !important; background:#1a1917; border:1px solid rgba(255,255,255,.08); border-radius:999px;
  box-shadow:0 6px 18px -6px rgba(0,0,0,.3); -webkit-backdrop-filter:saturate(140%) blur(12px); backdrop-filter:saturate(140%) blur(12px); }
.nav__right{ margin-left:0 !important; }
/* black bar → white brand name, orange .io + logo, white nav buttons */
.nav .brand{ color:#fff !important; }
.nav .brand b{ color:var(--coral,#DD571C) !important; }
.nav__links a{ color:#fff !important; background:transparent !important; }
.nav__links a:hover{ background:rgba(255,255,255,.14) !important; color:#fff !important; }
.nav__links a.active{ background:var(--coral,#DD571C) !important; color:#fff !important; }
/* dashboard — more breathing room (talkview keeps its own gap) */
#dash{ gap:16px !important; }

/* hero title mascot — big, static, layered on top to the right of "Fluent" (no bob, never cut) */
.fluent-wrap{ position:relative; white-space:nowrap; }
.title-mascot{ position:absolute; left:100%; top:50%; transform:translateY(-50%); height:1.7em; width:auto; margin-left:.06em;
  z-index:6; pointer-events:none; animation:none !important; }
.hero2 .reveal{ overflow:visible; }

/* 1 · dashboard card icon squares → orange box, white icon */
.appwin .dcard .ic-orange{ background:var(--coral,#DD571C) !important; border-color:transparent !important; box-shadow:0 2px 6px rgba(221, 87, 28,.3) !important; }
.appwin .dcard .ic-orange .ce{ filter:brightness(0) invert(1); display:block; line-height:1; }

/* 2 · quick actions → two big boxes (Games · Leaderboard) */
.dash .qa.qa-2{ gap:14px !important; }
.dash .qa.qa-2 button{ padding:34px 12px !important; font-size:1.14rem !important; border-radius:20px !important; gap:11px !important; }
.dash .qa.qa-2 button .em svg{ width:48px !important; height:48px !important; }

/* 7 · top-right Flip button — cool orange, white bold text + icon, 180° flip on hover */
#talkview .flipbtn{ margin-left:auto; margin-right:8px; display:inline-flex; flex-direction:column; align-items:center; justify-content:center; gap:5px; background:var(--coral,#DD571C); color:#fff; border:none;
  font-weight:900; font-size:.78rem; line-height:1; padding:13px 22px; border-radius:17px; cursor:pointer;
  box-shadow:0 5px 14px -4px rgba(221, 87, 28,.6); transition:transform .25s cubic-bezier(.34,1.56,.64,1), box-shadow .25s; }
#talkview .flipbtn:hover{ transform:scale(1.09); box-shadow:0 8px 18px -4px rgba(221, 87, 28,.75); }
#talkview .flipbtn:active{ transform:scale(.95); }
#talkview .flipbtn .flipic{ width:24px; height:24px; color:#fff; transition:transform .55s cubic-bezier(.34,1.56,.64,1); }
#talkview .flipbtn:hover .flipic{ transform:rotate(-180deg); }

/* 4 · suggested-questions popup */
#talkview{ position:relative; }
#talkview .typebtn{ width:44px; height:44px; flex:none; border-radius:14px; border:1px solid var(--line); background:#fff; color:var(--ink);
  display:grid; place-items:center; cursor:pointer; transition:.2s; }
#talkview .typebtn svg{ width:21px; height:21px; }
#talkview .typebtn:hover,
#talkview .typebtn.on{ border-color:var(--coral,#DD571C); color:var(--coral,#DD571C); background:#fff; }
#talkview .recbar{ padding:12px !important; }
#talkview .suggest{ position:absolute; left:14px; right:14px; bottom:86px; z-index:25;
  background:#fff; border:1px solid var(--line); border-radius:18px; padding:10px; box-shadow:0 20px 44px -16px rgba(0,0,0,.32);
  display:flex; flex-direction:column; gap:7px; animation:suggin .24s cubic-bezier(.34,1.56,.64,1); }
#talkview .suggest[hidden]{ display:none !important; }
#talkview .suggest .sugg-h{ font-size:.66rem; font-weight:800; text-transform:uppercase; letter-spacing:.07em; color:var(--muted); padding:2px 4px; }
#talkview .suggest .sugg-q{ text-align:left; background:var(--cream-raise,#f4f1ea); border:1px solid var(--line); border-radius:12px;
  padding:11px 14px; font-size:.92rem; font-weight:700; color:var(--ink); cursor:pointer; transition:.15s; }
#talkview .suggest .sugg-q:hover{ background:var(--coral,#DD571C); color:#fff; border-color:transparent; transform:translateX(2px); }
@keyframes suggin{ from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:none; } }

/* 3 · live-chat opening animation */
#talkview.show{ animation:talkin .45s cubic-bezier(.22,1,.36,1); }
@keyframes talkin{ from{ opacity:0; transform:translateY(12px) scale(.99); } to{ opacity:1; transform:none; } }

/* 5 · mic recording — refined expanding ring */
#talkview .holdmic{ position:relative; }
#talkview .holdmic.rec::after{ content:""; position:absolute; inset:-7px; border-radius:50%; border:2px solid var(--coral,#DD571C); opacity:.5; animation:micring 1.1s ease-out infinite; }
@keyframes micring{ 0%{ transform:scale(.88); opacity:.55; } 100%{ transform:scale(1.55); opacity:0; } }

/* ============================================================================
   SECTION CLEANUP — bring Grow / Learn / Explore / Meet to the hero's
   3-colour discipline: white surfaces · orange #DD571C accent · charcoal/ink.
   No green / red / blue / purple / amber / lime / butter / gold.
   ============================================================================ */

/* --- Step 1: collapse the per-card rainbow at the token level --- */
:root{
  --c-blue:var(--charcoal);   --c-purple:var(--charcoal); --c-mint:var(--charcoal);
  --c-green:var(--coral);     --c-amber:var(--coral);
  --t-blue:var(--cream-raise); --t-purple:var(--cream-raise); --t-mint:var(--cream-raise);
  --t-green:var(--cream-raise); --t-amber:var(--cream-raise);
  /* kill the greenish sage tints used for tracks / panels / bubbles */
  --sage:#EFEDE7; --sage-deep:#E6E3DC; --sage-tint:#F2F0EA;
}

/* --- Step 2: GROW module board --- */
.board .mod{ border:1px solid var(--line) !important; box-shadow:0 1px 2px rgba(0,0,0,.04) !important; border-radius:18px !important; background:#fff !important; }
.board .mod--convo{ background:var(--cream-raise) !important; border-color:var(--line) !important; }
.board .mod--goal{ background:var(--coral-tint) !important; border-color:transparent !important; }
/* uniform charcoal icon squares */
.board .mod .ico{ background:var(--cream-raise) !important; color:var(--charcoal) !important; border:1px solid var(--line); }
/* badges → one quiet neutral style */
.board .uihead .badge{ background:var(--cream-raise) !important; color:var(--muted) !important; box-shadow:inset 0 0 0 1px var(--line) !important; border:none !important; }
/* footer accent dots → coral */
.board .modfoot .dot, .board .mod .foot .dot{ background:var(--coral) !important; box-shadow:0 0 0 4px var(--coral-tint) !important; }
.board .modfoot.act{ color:var(--coral) !important; }
/* vocabulary bars: encode strength by orange opacity (not green/amber) */
.vbar.known .track i{ background:var(--coral) !important; }
.vbar.learning .track i{ background:rgba(221, 87, 28,.62) !important; }
.vbar.weak .track i{ background:rgba(221, 87, 28,.32) !important; }
/* grammar: charcoal wrong (strikethrough) · orange right — like the hero correction */
.grm-row.wrong{ background:var(--cream-raise) !important; color:var(--charcoal) !important; }
.grm-row.right{ background:var(--coral-tint) !important; color:var(--coral-deep) !important; }
/* misc stray fills inside cards */
.cv-conf .bar i{ background:var(--coral) !important; }
.cv-bub.them{ background:var(--cream-raise) !important; }
.memlist .memchk .c, .mini-fix .c{ background:var(--charcoal) !important; }
/* GROW reduced to a clean, consistent 2x2 board */
.moddash.moddash-4{ grid-template-columns:repeat(2,1fr) !important; grid-template-areas:none !important; gap:14px !important; }
.moddash-4 .mod{ grid-area:auto !important; min-height:0; }
.moddash-4 .mod--convo{ background:#fff !important; }
.moddash-4 .mod--convo .uihead b{ font-size:.96rem !important; }
.moddash-4 .mod--convo .uihead .ico{ width:30px !important; height:30px !important; border-radius:9px !important; }
@media(max-width:560px){ .moddash.moddash-4{ grid-template-columns:1fr !important; } }
/* friendly mascot peeking over the Grow board */
.board{ position:relative; }
.board-mascot{ position:absolute; top:-50px; right:30px; width:84px; height:auto; z-index:4; pointer-events:none; filter:drop-shadow(0 12px 14px rgba(35,39,31,.18)); }
/* Grow card accent fixes */
.board .memchk .c{ background:var(--coral) !important; color:#fff !important; }
.mod--pron .wv i{ background:var(--coral) !important; }
.mod--pron .score{ color:var(--coral) !important; }
.mod--pron .mic{ background:var(--charcoal) !important; }
@media(max-width:560px){ .board-mascot{ width:60px; top:-32px; right:14px; } }
/* Memory recall connector → the mascot carries it across (no coral circle) */
.memshow .memarrow{ background:none !important; box-shadow:none !important; width:auto !important; height:auto !important; font-size:0 !important; }
.memshow .memarrow img{ width:66px; height:66px; object-fit:contain; filter:drop-shadow(0 8px 12px rgba(35,39,31,.16)); }

/* --- Step 3: LEARN scenario cards → clean white, first one orange for rhythm --- */
.scenes .scene{ background:#fff !important; color:var(--ink) !important; border:1px solid var(--line); border-radius:18px !important; min-height:182px; }
.scenes .scene .sc-no{ color:var(--coral) !important; opacity:1; }
.scenes .scene h3{ color:var(--ink) !important; }
.scenes .scene p{ color:var(--muted) !important; opacity:1; }
.scenes .scene .sc-go{ color:var(--coral) !important; opacity:1; }
.scenes .scene .sc-ic{ opacity:.9; }
.scenes .scene:first-child{ background:var(--coral) !important; border-color:transparent !important; }
.scenes .scene:first-child .sc-no,
.scenes .scene:first-child h3,
.scenes .scene:first-child p,
.scenes .scene:first-child .sc-go{ color:#fff !important; }
/* the loop strip — uniform white pills, orange arrows */
.loop .step{ background:#fff !important; border:1px solid var(--line) !important; color:var(--ink) !important; }
.loop .arr{ color:var(--coral) !important; }

/* --- Step 4: EXPLORE --- */
/* stat widgets → white cards, orange accent (overrides the solid colour blocks) */
.xstrip .xw,
.xstrip .xw.blue, .xstrip .xw.green, .xstrip .xw.amber, .xstrip .xw.purple{ background:#fff !important; color:var(--ink) !important; border:1px solid var(--line) !important; box-shadow:0 1px 2px rgba(0,0,0,.04) !important; }
.xstrip .xw .xh, .xstrip .xw.amber .xh{ color:var(--muted) !important; }
.xstrip .xw .xh .d, .xstrip .xw.amber .xh .d{ background:var(--coral) !important; box-shadow:0 0 0 4px var(--coral-tint) !important; }
.xstrip .xw .xh .ig, .xstrip .xw.amber .xh .ig{ background:var(--cream-raise) !important; color:var(--ink) !important; }
.xstrip .xw .xbig, .xstrip .xw.amber .xbig{ color:var(--coral) !important; }
.xstrip .xw .xbig small, .xstrip .xw .xsub,
.xstrip .xw.amber .xbig small, .xstrip .xw.amber .xsub{ color:var(--muted) !important; }
.xstrip .xw .xtrack, .xstrip .xw.amber .xtrack{ background:var(--line) !important; }
.xstrip .xw .xtrack i, .xstrip .xw.amber .xtrack i{ background:var(--coral) !important; }
.xstrip .xw .xdots i{ background:var(--line) !important; } .xstrip .xw .xdots i.on{ background:var(--coral) !important; }
.xstrip .xw .xach{ background:var(--cream-raise) !important; box-shadow:inset 0 0 0 1px var(--line); } .xstrip .xw .xach.lock{ opacity:.4; }
/* leaderboard → white, neutral medals, orange #1, orange/grey movement */
.card.t-gold{ background:#fff !important; border:1px solid var(--line) !important; }
.lb__row .rk.g{ background:var(--coral) !important; color:#fff !important; }
.lb__row .rk.s, .lb__row .rk.b{ background:var(--cream-raise) !important; color:var(--muted) !important; }
.mv.up{ color:var(--coral) !important; } .mv.dn{ color:var(--muted) !important; }
.tg-gold{ background:var(--coral-tint) !important; color:var(--coral-deep) !important; box-shadow:none !important; }
/* game life-hearts → nudge red toward brand orange */
.lives{ filter:hue-rotate(14deg) saturate(.92); }
/* game win-mascots a touch bigger/cleaner */
.game__mascot{ filter:drop-shadow(0 8px 12px rgba(35,39,31,.18)); }

/* --- Step 5: MEET — shorter closing section, tidy footer --- */
.chapter.meet{ padding-block:clamp(36px,6vw,70px) clamp(24px,3.5vw,40px) !important; }
.meet .meet__mascot{ width:min(150px,38vw) !important; }
.meet__lines{ margin-top:10px !important; }
.statrow{ margin-top:clamp(20px,3vw,30px) !important; }
.meet__foot{ margin-top:clamp(26px,4vw,40px) !important; padding-top:20px !important; }
.meet__foot nav a:hover{ color:var(--coral) !important; }

/* --- Step 6: cross-cutting — kill remaining yellow/green/purple/blue pills --- */
/* word highlight (phone preview & anywhere) → orange tag, not butter-yellow */
.hl{ background:var(--coral-tint) !important; color:var(--coral-deep) !important; box-shadow:none !important; }
.hl.saved{ background:var(--coral) !important; color:#fff !important; }
/* coloured tag pills → orange-tint (translate/vocab/grammar/review/speak/green) */
.tg-green, .tg-vocab, .tg-grammar, .tg-review, .tg-speak{ background:var(--coral-tint) !important; color:var(--coral-deep) !important; }
/* memory note card → neutral (was green) */
.memnote{ background:var(--cream-raise) !important; color:var(--ink) !important; border:1px solid var(--line) !important; }
.memnote .chk{ background:var(--coral) !important; }
/* mini-bubble green chip in convo module */
.mini-fix, .cv-fix{ color:var(--charcoal) !important; }
.blob-dot{ opacity:.5; }
.subglass{ color:var(--muted); }