/* ============================================================
   v15 · FOUR ECOSYSTEMS — Learn / Compete / Library / Fluent
   Architectural expansion of the existing Fluently system.
   Reuses the cream grid, coral accent, dark surfaces, Nunito,
   rounded cards and product-UI philosophy. New modules only.
   Guiding rule: clean EVEN sectional grids — cards in a row share
   the same top and bottom line; consistent gutters; crisp type;
   no awkward empty space; asymmetric hierarchy kept within the grid.
   ============================================================ */

/* ---- section visual order (main is display:flex column) ---- */
#home{ order:1; } #grow{ order:2; } #explore{ order:3; }
#learn{ order:4; } #fluent{ order:5; } #reviews{ order:6; } #meet{ order:7; }

:root{
  --eco-gap:clamp(14px,1.55vw,22px);
  --card-pad:clamp(16px,1.5vw,22px);
  --hair:rgba(35,39,31,.09);
  --track:#ECEAE2;
}

/* shared card head used across Library / Fluent / Compete modules */
.lib-head{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:14px; }
.lib-head__t{ display:flex; flex-direction:column; gap:1px; min-width:0; }
.lib-head__t b{ font-size:1.04rem; font-weight:900; color:var(--ink); letter-spacing:-.015em; line-height:1.1; }
.lib-sub{ font-size:.76rem; font-weight:700; color:var(--muted); white-space:nowrap; }

/* =========================================================
   LEARN · Pronunciation feedback (replaces the play/copy tools)
   ========================================================= */
.pron-fb{ display:flex; flex-direction:column; gap:12px; }
.pron-fb__scores{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.pron-chip{ display:flex; flex-direction:column; align-items:center; gap:1px; padding:10px 8px;
  background:var(--cream-raise); border:1px solid var(--hair); border-radius:14px; }
.pron-chip b{ font-size:1.3rem; font-weight:900; color:var(--coral); line-height:1; }
.pron-chip small{ font-size:.68rem; font-weight:800; letter-spacing:.04em; text-transform:uppercase; color:var(--muted); }
.pron-fb__tip{ display:flex; align-items:center; gap:9px; margin:0; font-size:.86rem; font-weight:700; color:var(--ink);
  background:var(--coral-tint); border:1px solid var(--coral-soft); border-radius:13px; padding:11px 13px; }
.pron-fb__tip b{ color:var(--coral-deep); }
.pron-fb__ic{ flex:none; width:24px; height:24px; border-radius:8px; display:grid; place-items:center;
  background:var(--coral); color:#fff; }
.pron-fb__ic svg{ width:14px; height:14px; }

/* =========================================================
   LEARN · Fluency dimensions (rx-progress.flu)
   ========================================================= */
.flu__lv{ display:inline-flex !important; align-items:center; gap:6px; }
.flu__lv .rx-flagic{ width:16px; height:11px; border-radius:2px; }
.flu__rows{ display:flex; flex-direction:column; gap:11px; margin:14px 0 4px; }
.flu__row{ display:grid; grid-template-columns:104px 1fr 26px; align-items:center; gap:11px; }
.flu__k{ font-size:.84rem; font-weight:700; color:var(--ink); white-space:nowrap; }
.flu__bar{ height:7px; border-radius:999px; background:var(--track); overflow:hidden; }
.flu__bar i{ display:block; height:100%; border-radius:999px; background:linear-gradient(90deg,var(--coral),var(--coral-deep)); }
.flu__v{ font-size:.9rem; font-weight:900; color:var(--ink); text-align:right; }
.flu__foot{ display:flex; align-items:center; justify-content:space-between; margin-top:14px; padding-top:13px;
  border-top:1px solid var(--hair); font-size:.82rem; font-weight:800; }
.flu__streak{ color:var(--coral-deep); }
.flu__lessons{ color:var(--muted); }

/* =========================================================
   LEARN · Learning-journey band (Daily Goal + CEFR ladder)
   one even, aligned card
   ========================================================= */
.jrn{ display:grid; grid-template-columns:auto 1fr; align-items:center; gap:clamp(20px,3vw,44px);
  margin-top:var(--eco-gap);
  background:#fff; border:1px solid var(--hair); border-radius:24px;
  padding:clamp(18px,2vw,26px) clamp(20px,2.4vw,32px);
  box-shadow:0 18px 40px -28px rgba(35,39,31,.28); }
.jrn__goal{ display:flex; flex-direction:column; justify-content:center; gap:12px; }
.jrn__glab{ font-size:.74rem; font-weight:900; letter-spacing:.1em; text-transform:uppercase; color:var(--coral-deep); }
.jrn__gstats{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.jrn__gtile{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px;
  min-width:98px; padding:16px 14px; aspect-ratio:1.3;
  background:var(--cream-raise); border:1px solid var(--hair); border-radius:16px; }
.jrn__gtile b{ font-size:1.75rem; font-weight:900; color:var(--coral); line-height:1; }
.jrn__gtile span{ font-size:.72rem; font-weight:800; color:var(--muted); }
.jrn__ladder{ display:flex; flex-direction:column; gap:12px; border-left:1px solid var(--hair); padding-left:clamp(20px,3vw,44px); }
.jrn__lhead{ display:flex; align-items:baseline; justify-content:space-between; }
.jrn__lhead b{ font-size:1.05rem; font-weight:900; color:var(--ink); }
.jrn__pct{ font-size:1.05rem; font-weight:900; color:var(--coral); }
.jrn__bar{ height:8px; border-radius:999px; background:var(--track); overflow:hidden; }
.jrn__bar i{ display:block; height:100%; border-radius:999px; background:linear-gradient(90deg,var(--coral),var(--coral-deep)); }
.jrn__steps{ display:grid; grid-template-columns:repeat(5,1fr); gap:8px; }
.jrn__step{ text-align:center; padding:8px 4px; border-radius:11px; font-size:.82rem; font-weight:900;
  background:var(--cream-raise); border:1px solid var(--hair); color:var(--muted); position:relative; }
.jrn__step.done{ background:#EAF6EE; border-color:#BFE6CD; color:#2E9E63; }
.jrn__step.done::after{ content:"✓"; margin-left:4px; }
.jrn__step.now{ background:var(--coral); border-color:var(--coral); color:#fff; box-shadow:0 8px 18px -8px rgba(221, 87, 28,.6); }
.jrn__step.next{ background:var(--coral-tint); border-color:var(--coral-soft); color:var(--coral-deep); }
@media (max-width:760px){
  .jrn{ grid-template-columns:1fr; gap:20px; }
  .jrn__ladder{ border-left:none; padding-left:0; border-top:1px solid var(--hair); padding-top:18px; }
}

/* =========================================================
   LIBRARY · even 12-col grid, light surfaces
   rows: [lessons 8 | langs 4] · [certs 4 | hist 4 | saved 4] · [mastery 4 | offline 4 | packcta 4]
   ========================================================= */
.lib-grid{ display:grid; grid-template-columns:repeat(12,1fr); gap:var(--eco-gap); align-items:stretch; }
.lib-card{ display:flex; flex-direction:column;
  background:#fff; border:1px solid var(--hair); border-radius:22px; padding:var(--card-pad);
  box-shadow:0 16px 38px -28px rgba(35,39,31,.26); }
.lib-lessons{ grid-column:span 8; }
.lib-langs{ grid-column:span 4; }
.lib-certs, .lib-hist, .lib-saved, .lib-mastery, .lib-offline, .lib-packcta{ grid-column:span 4; }

/* Lesson Library (anchor) */
.lib-lessons .lib-tabs{ display:flex; gap:6px; flex-wrap:wrap; }
.lib-tabs span{ font-size:.76rem; font-weight:800; color:var(--muted); padding:6px 12px; border-radius:999px; background:var(--cream-raise); border:1px solid var(--hair); cursor:pointer; }
.lib-tabs span.on{ background:#141414; color:#fff; border-color:#141414; }
.lib-groups{ display:flex; flex-direction:column; gap:12px; margin-top:2px; flex:1; justify-content:center; }
.lib-group{ display:grid; grid-template-columns:44px 1fr auto; align-items:center; gap:14px;
  background:var(--cream-raise); border:1px solid var(--hair); border-radius:16px; padding:14px 16px; }
.lib-group__ic{ width:44px; height:44px; border-radius:13px; flex:none; display:grid; place-items:center; }
.lib-group__ic svg{ width:20px; height:20px; }
.lib-group.is-done .lib-group__ic{ background:#EAF6EE; color:#2E9E63; }
.lib-group.is-now .lib-group__ic{ background:var(--coral); color:#fff; }
.lib-group.is-lock .lib-group__ic{ background:rgba(35,39,31,.06); color:var(--muted); }
.lib-group__m{ display:flex; flex-direction:column; gap:4px; min-width:0; }
.lib-group__m b{ font-size:.98rem; font-weight:900; color:var(--ink); }
.lib-group__m > span{ font-size:.78rem; font-weight:700; color:var(--muted); }
.lib-bar{ height:6px; border-radius:999px; background:var(--track); overflow:hidden; margin-top:3px; }
.lib-bar i{ display:block; height:100%; border-radius:999px; background:linear-gradient(90deg,var(--coral),var(--coral-deep)); }
.lib-group__end{ flex:none; font-weight:900; font-size:.86rem; white-space:nowrap; }
.lib-group__pct{ color:#2E9E63; }
.lib-group__lock{ color:var(--muted); }
.lib-cont{ background:var(--coral); color:#fff; padding:9px 15px; border-radius:11px; box-shadow:0 6px 14px -7px rgba(221, 87, 28,.6); }
.lib-cont:hover{ background:var(--coral-deep); }

/* Languages list (light) */
.lib-langlist{ display:flex; flex-direction:column; gap:7px; flex:1; }
.lib-lang{ display:flex; align-items:center; gap:11px; padding:9px 11px; border-radius:12px;
  background:var(--cream-raise); border:1px solid var(--hair); }
.lib-lang.is-on{ background:var(--coral-tint); border-color:var(--coral-soft); }
.lib-flag{ width:24px; height:16px; border-radius:4px; overflow:hidden; flex:none; box-shadow:0 0 0 1px rgba(0,0,0,.06); }
.lib-flag svg{ width:100%; height:100%; display:block; }
.lib-lang__n{ font-size:.9rem; font-weight:800; color:var(--ink); flex:1; }
.lib-lang__lv{ font-size:.74rem; font-weight:900; color:var(--muted); background:#fff; border:1px solid var(--hair); border-radius:8px; padding:3px 8px; }
.lib-lang.is-on .lib-lang__lv{ color:var(--coral-deep); border-color:var(--coral-soft); }
.lib-more{ display:inline-block; margin-top:12px; font-size:.86rem; font-weight:900; color:var(--coral-deep); }
.lib-more:hover{ color:var(--coral); }

/* Certificates */
.lib-certs{ gap:12px; }
.lib-cert{ display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:13px;
  background:var(--cream-raise); border:1px solid var(--hair); border-radius:16px; padding:13px 15px; }
.lib-seal{ position:relative; width:48px; height:48px; flex:none; display:grid; place-items:center;
  color:var(--gold-deep); }
.lib-seal svg{ width:48px; height:48px; }
.lib-seal i{ position:absolute; font-style:normal; font-size:.82rem; font-weight:900; color:var(--gold-deep); }
.lib-cert.is-earned{ background:var(--gold-tint); border-color:var(--gold-line); }
.lib-seal--prog{ background:var(--track); border-radius:14px; color:var(--muted); }
.lib-seal--prog i{ color:var(--ink); }
.lib-cert__m{ display:flex; flex-direction:column; gap:3px; min-width:0; }
.lib-cert__m b{ font-size:.94rem; font-weight:900; color:var(--ink); }
.lib-cert__m span{ font-size:.76rem; font-weight:700; color:var(--muted); }
.lib-cert__link{ font-size:.82rem; font-weight:900; color:var(--gold-deep); white-space:nowrap; }

/* Review history */
.lib-hlist{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:2px; flex:1; }
.lib-hlist li{ display:grid; grid-template-columns:72px 1fr auto; align-items:center; gap:10px; padding:9px 2px; border-bottom:1px solid var(--hair); }
.lib-hlist li:last-child{ border-bottom:none; }
.lib-hday{ font-size:.74rem; font-weight:800; color:var(--muted); }
.lib-hname{ font-size:.88rem; font-weight:800; color:var(--ink); }
.lib-hsc{ font-size:.86rem; font-weight:900; color:var(--muted); }
.lib-hsc.is-good{ color:#2E9E63; }

/* Saved */
.lib-slist{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px; flex:1; }
.lib-slist li{ display:flex; align-items:center; gap:11px; font-size:.9rem; font-weight:800; color:var(--ink);
  background:var(--cream-raise); border:1px solid var(--hair); border-radius:12px; padding:11px 13px; }
.lib-bm{ flex:none; color:var(--coral); }
.lib-bm svg{ width:15px; height:15px; display:block; }

/* Mastered */
.lib-mgrid{ display:grid; grid-template-columns:1fr 1fr; gap:10px; flex:1; }
.lib-mgrid > div{ display:flex; flex-direction:column; gap:1px; align-items:center; justify-content:center;
  background:var(--cream-raise); border:1px solid var(--hair); border-radius:14px; padding:12px 6px; }
.lib-mgrid b{ font-size:1.4rem; font-weight:900; color:var(--coral); line-height:1; }
.lib-mgrid span{ font-size:.72rem; font-weight:800; color:var(--muted); }

/* Offline */
.lib-dl-ic{ width:36px; height:36px; border-radius:11px; flex:none; display:grid; place-items:center; background:#141414; color:#fff; }
.lib-dl-ic svg{ width:18px; height:18px; }
.lib-dllist{ display:flex; flex-direction:column; gap:8px; flex:1; }
.lib-dl{ display:flex; align-items:center; gap:9px; font-size:.88rem; font-weight:800; color:var(--ink);
  background:var(--cream-raise); border:1px solid var(--hair); border-radius:12px; padding:10px 13px; }
.lib-dl::before{ content:"✓"; color:#2E9E63; font-weight:900; }

/* Learning-packs CTA card */
.lib-packcta{ justify-content:space-between; }
.lib-packcta__p{ margin:2px 0 0; font-size:.9rem; font-weight:600; color:var(--muted); line-height:1.5; flex:1; }

@media (max-width:960px){
  .lib-lessons{ grid-column:span 12; }
  .lib-langs{ grid-column:span 6; }
  .lib-certs, .lib-hist, .lib-saved, .lib-mastery, .lib-offline, .lib-packcta{ grid-column:span 6; }
}
@media (max-width:640px){
  .lib-langs, .lib-certs, .lib-hist, .lib-saved, .lib-mastery, .lib-offline, .lib-packcta{ grid-column:span 12; }
}

/* =========================================================
   COMPETE · dark game-like modules (matches h2h / leaderboard)
   ========================================================= */
.cmp-top{ display:grid; grid-template-columns:1.1fr .9fr; gap:var(--eco-gap); align-items:stretch; margin-bottom:22px; }
.cmp-bottom{ display:grid; grid-template-columns:1fr 1fr; gap:var(--eco-gap); align-items:stretch; margin-top:22px; }
.cmp-profile, .cmp-friends, .cmp-leagues, .cmp-ach{
  display:flex; flex-direction:column; justify-content:space-between;
  background:#141414 !important; border:1px solid rgba(255,255,255,.08) !important; border-radius:22px !important;
  padding:var(--card-pad) !important; color:#fff; box-shadow:0 26px 50px -30px rgba(0,0,0,.55) !important; }
.cmp-friends, .cmp-ach{ justify-content:flex-start; }
.cmp-profile .lib-head__t b, .cmp-friends .lib-head__t b, .cmp-leagues .lib-head__t b, .cmp-ach .lib-head__t b{ color:#fff; }

/* profile */
.cmp-profile__id{ display:flex; align-items:center; gap:13px; }
.cmp-ava{ width:52px; height:52px; border-radius:15px; flex:none; overflow:hidden; background:var(--coral-tint); display:grid; place-items:center; box-shadow:0 0 0 2px rgba(255,255,255,.14); }
.cmp-ava img{ width:100%; height:100%; object-fit:cover; }
.cmp-profile__name{ display:flex; flex-direction:column; gap:3px; flex:1; min-width:0; }
.cmp-profile__name > b{ font-size:1.2rem; font-weight:900; color:#fff; letter-spacing:-.01em; }
.cmp-league{ display:inline-flex; align-items:center; gap:6px; font-size:.78rem; font-weight:800; color:var(--gold); }
.cmp-league svg{ width:15px; height:15px; }
.cmp-profile__xp{ display:flex; flex-direction:column; align-items:flex-end; line-height:1; flex:none; }
.cmp-profile__xp b{ font-size:1.25rem; font-weight:900; color:var(--coral); }
.cmp-profile__xp small{ font-size:.66rem; font-weight:800; letter-spacing:.08em; color:rgba(255,255,255,.6); }
.cmp-xpbar{ position:relative; height:7px; border-radius:999px; background:rgba(255,255,255,.14); overflow:visible; margin:16px 0 22px; }
.cmp-xpbar i{ display:block; height:100%; border-radius:999px; background:linear-gradient(90deg,var(--coral),#EE7E3A); }
.cmp-xpbar__lab{ position:absolute; top:11px; font-size:.66rem; font-weight:800; letter-spacing:.04em; color:rgba(255,255,255,.5); }
.cmp-xpbar__lab:first-child{ left:0; } .cmp-xpbar__lab:last-child{ right:0; }
.cmp-profile__stats{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.cmp-profile__stats > div{ display:flex; flex-direction:column; align-items:center; gap:1px;
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.08); border-radius:14px; padding:12px 6px; }
.cmp-profile__stats b{ font-size:1.35rem; font-weight:900; color:#fff; line-height:1; }
.cmp-profile__stats span{ font-size:.68rem; font-weight:800; letter-spacing:.02em; color:rgba(255,255,255,.55); }
.cmp-profile__badges{ display:grid; grid-template-columns:repeat(5,1fr); gap:8px; }
.cmp-pbadge{ aspect-ratio:1; display:grid; place-items:center; font-size:1.2rem; border-radius:12px;
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.1); }
.cmp-pbadge.is-lock{ opacity:.35; filter:grayscale(1); }

/* leagues · progression fills the card */
.cmp-lgnext{ margin-top:16px; display:flex; flex-direction:column; gap:9px; }
.cmp-lgnext__bar{ height:7px; border-radius:999px; background:rgba(255,255,255,.14); overflow:hidden; }
.cmp-lgnext__bar i{ display:block; height:100%; border-radius:999px; background:linear-gradient(90deg,var(--gold),var(--gold-deep)); }
.cmp-lgnext__cap{ font-size:.78rem; font-weight:700; color:rgba(255,255,255,.6); }
.cmp-lgnext__cap b{ color:var(--gold); }

/* story-lesson films — plain white frames (no coral/gold glow), white opaque tags */
.lsn-screen,
.lsn-screen:nth-child(1),
.lsn-screen:nth-child(2){
  border:5px solid #fff !important; background:#fff !important;
  box-shadow:0 22px 44px -26px rgba(35,39,31,.4) !important;
}
.lsn-screen__tag{ background:rgba(255,255,255,.94) !important; color:#141414 !important;
  box-shadow:0 6px 16px -8px rgba(35,39,31,.4); }
.lsn-screen__tag i, .lsn-screen:nth-child(2) .lsn-screen__tag i{ background:var(--coral) !important; }

/* friends */
.cmp-flist{ list-style:none; margin:0 0 12px; padding:0; display:flex; flex-direction:column; gap:8px; flex:1; }
.cmp-flist li{ display:flex; align-items:center; gap:11px; }
.cmp-fav{ width:34px; height:34px; border-radius:10px; flex:none; display:grid; place-items:center;
  background:rgba(255,255,255,.1); color:#fff; font-weight:900; font-size:.9rem; }
.cmp-fn{ flex:1; font-size:.92rem; font-weight:800; color:#fff; }
.cmp-fx{ font-size:.8rem; font-weight:800; color:rgba(255,255,255,.6); }
.cmp-fchal{ background:var(--coral); color:#fff; border:none; border-radius:9px; padding:7px 13px; font-size:.78rem; font-weight:900; cursor:pointer; box-shadow:0 6px 14px -7px rgba(221, 87, 28,.6); transition:background .2s; }
.cmp-fchal:hover{ background:var(--coral-deep); }
.cmp-addf{ background:rgba(255,255,255,.08); color:#fff; border:1px dashed rgba(255,255,255,.25); border-radius:12px; padding:11px; font-size:.86rem; font-weight:900; cursor:pointer; transition:background .2s; }
.cmp-addf:hover{ background:rgba(255,255,255,.14); }

/* leagues */
.cmp-ladder{ display:grid; grid-template-columns:repeat(5,1fr); gap:8px; margin-top:auto; }
.cmp-lg{ text-align:center; padding:12px 4px; border-radius:13px; font-size:.82rem; font-weight:900;
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.1); color:rgba(255,255,255,.5); }
.cmp-lg.is-done{ color:#fff; background:rgba(255,255,255,.12); }
.cmp-lg.is-now{ background:linear-gradient(150deg,var(--gold),var(--gold-deep)); color:#4a3208; border-color:var(--gold); box-shadow:0 10px 22px -10px rgba(224,154,43,.7); }

/* achievements */
.cmp-achgrid{ display:flex; flex-wrap:wrap; gap:9px; margin-top:2px; }
.cmp-badge{ display:inline-flex; align-items:center; gap:8px; padding:9px 13px; border-radius:12px;
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.12); font-size:.82rem; font-weight:800; color:#fff; }
.cmp-badge i{ font-style:normal; font-size:1rem; }
.cmp-badge.is-lock{ opacity:.45; }
.cmp-badge.is-lock i{ filter:grayscale(1); }

@media (max-width:760px){
  .cmp-top, .cmp-bottom{ grid-template-columns:1fr; }
}

/* =========================================================
   FLUENT · light section, dark live-conversation device
   the intelligence loop + even 12-col module grid
   ========================================================= */
.flt-loop{ display:flex; align-items:center; justify-content:center; gap:clamp(6px,1.4vw,20px); flex-wrap:wrap;
  margin-bottom:clamp(20px,2.6vw,34px); }
.flt-loop__step{ display:inline-flex; align-items:center; gap:9px; padding:10px 18px; border-radius:999px;
  background:#fff; border:1px solid var(--hair); font-size:.9rem; font-weight:900; color:var(--ink);
  box-shadow:0 10px 24px -16px rgba(35,39,31,.3); }
.flt-loop__step i{ width:22px; height:22px; border-radius:50%; display:grid; place-items:center; font-style:normal;
  font-size:.74rem; background:var(--coral); color:#fff; }
.flt-loop__arw{ color:var(--coral); display:inline-flex; }
.flt-loop__arw svg{ width:20px; height:20px; }

.flt-grid{ display:grid; grid-template-columns:repeat(12,1fr); gap:var(--eco-gap); align-items:stretch; }
.flt-grid > .rx-card{ display:flex; flex-direction:column; background:#fff; border:1px solid var(--hair);
  border-radius:22px; padding:var(--card-pad); box-shadow:0 16px 38px -28px rgba(35,39,31,.26); }
.flt-convo{ grid-column:span 7; grid-row:span 2; background:#141414 !important; border-color:rgba(255,255,255,.08) !important;
  color:#fff; box-shadow:0 30px 60px -30px rgba(0,0,0,.6) !important; gap:0; }
.flt-coach{ grid-column:span 5; }
.flt-roleplay{ grid-column:span 5; }
.flt-sm{ grid-column:span 3; }

/* live conversation device */
.flt-convo__top{ display:flex; align-items:center; gap:12px; }
.flt-ava{ width:42px; height:42px; border-radius:12px; flex:none; overflow:hidden; background:var(--coral-tint); box-shadow:0 0 0 2px rgba(255,255,255,.12); }
.flt-ava img{ width:100%; height:100%; object-fit:cover; }
.flt-convo__id{ display:flex; flex-direction:column; gap:2px; flex:1; }
.flt-convo__id b{ font-size:1.02rem; font-weight:900; color:#fff; }
.flt-sub{ font-size:.76rem; font-weight:800; color:rgba(255,255,255,.6); }
.flt-live{ display:inline-flex; align-items:center; gap:6px; font-size:.72rem; font-weight:900; color:#fff;
  background:rgba(255,255,255,.1); padding:6px 11px; border-radius:999px; }
.flt-live i{ width:7px; height:7px; border-radius:50%; background:#ff5b47; box-shadow:0 0 0 0 rgba(255,91,71,.6); animation:fltLive 1.8s ease-out infinite; }
@keyframes fltLive{ 0%{ box-shadow:0 0 0 0 rgba(255,91,71,.5);} 70%,100%{ box-shadow:0 0 0 7px rgba(255,91,71,0);} }
.flt-topics{ display:flex; gap:7px; margin:16px 0; }
.flt-topics span{ font-size:.78rem; font-weight:800; color:rgba(255,255,255,.7); padding:6px 13px; border-radius:999px; background:rgba(255,255,255,.08); }
.flt-topics span.on{ background:var(--coral); color:#fff; }
.flt-chat{ display:flex; flex-direction:column; gap:11px; flex:1; justify-content:center; }
.flt-bub{ max-width:80%; padding:13px 16px; border-radius:16px; font-size:1rem; font-weight:700; line-height:1.35; }
.flt-bub.me{ align-self:flex-end; background:#2b2b2b; color:#fff; border-bottom-right-radius:5px; }
.flt-bub.them{ align-self:flex-start; display:inline-flex; align-items:center; gap:9px; background:#fff; color:var(--ink); border-bottom-left-radius:5px; }
.flt-bub.them b{ color:var(--coral-deep); }
.flt-play{ width:24px; height:24px; border-radius:50%; flex:none; display:grid; place-items:center; background:var(--coral); color:#fff; }
.flt-play svg{ width:12px; height:12px; }
.flt-correct{ align-self:flex-end; max-width:84%; position:relative; background:rgba(221, 87, 28,.14); border:1px solid rgba(221, 87, 28,.4);
  color:#ffd8cc; border-radius:14px; padding:11px 14px 11px; font-size:.94rem; font-weight:700; }
.flt-correct b{ color:#fff; text-decoration:underline; text-decoration-color:var(--coral); text-underline-offset:2px; }
.flt-correct__lab{ display:block; font-size:.64rem; font-weight:900; letter-spacing:.1em; text-transform:uppercase; color:var(--coral); margin-bottom:3px; }
.flt-rec{ display:flex; align-items:center; gap:13px; margin-top:16px; padding-top:16px; border-top:1px solid rgba(255,255,255,.1); }
.flt-mic{ width:46px; height:46px; border-radius:50%; flex:none; display:grid; place-items:center; background:var(--coral); color:#fff; border:none; cursor:pointer; box-shadow:0 10px 20px -8px rgba(221, 87, 28,.6); }
.flt-mic svg{ width:20px; height:20px; }
.flt-wave{ flex:1; display:flex; align-items:center; gap:4px; height:34px; }
.flt-wave i{ flex:1; border-radius:999px; background:rgba(255,255,255,.25); transform-origin:center; animation:fltWave 1.1s ease-in-out infinite; }
.flt-wave i.on{ background:var(--coral); }
.flt-wave i:nth-child(2n){ animation-duration:.9s; } .flt-wave i:nth-child(3n){ animation-duration:1.3s; }
@keyframes fltWave{ 0%,100%{ transform:scaleY(.5);} 50%{ transform:scaleY(1);} }
.flt-hold{ font-size:.82rem; font-weight:800; color:rgba(255,255,255,.65); white-space:nowrap; }

/* speaking coach */
.flt-coach .rx-ai__tag{ background:rgba(35,39,31,.07); color:var(--ink); }
.flt-coach__rows{ display:flex; flex-direction:column; gap:11px; flex:1; justify-content:center; }
.flt-crow{ display:grid; grid-template-columns:96px 1fr 26px; align-items:center; gap:11px; }
.flt-crow__k{ font-size:.84rem; font-weight:700; color:var(--ink); }
.flt-cbar{ height:7px; border-radius:999px; background:var(--track); overflow:hidden; }
.flt-cbar i{ display:block; height:100%; border-radius:999px; background:linear-gradient(90deg,var(--coral),var(--coral-deep)); }
.flt-crow__v{ font-size:.9rem; font-weight:900; color:var(--ink); text-align:right; }
.flt-coach__tip{ margin:14px 0 0; font-size:.84rem; font-weight:700; color:var(--muted); line-height:1.5; padding-top:13px; border-top:1px solid var(--hair); }

/* roleplay */
.flt-roleplay{ justify-content:space-between; }
.flt-role__ic{ width:38px; height:38px; border-radius:11px; flex:none; display:grid; place-items:center; background:var(--coral-tint); font-size:18px; }
.flt-role__p{ margin:2px 0 0; font-size:.94rem; font-weight:600; color:var(--muted); line-height:1.5; flex:1; }
.flt-role__cta{ align-self:flex-start; margin-top:14px; background:var(--coral); color:#fff; padding:11px 18px; border-radius:12px; font-size:.9rem; font-weight:900; box-shadow:0 10px 20px -8px rgba(221, 87, 28,.55); }
.flt-role__cta:hover{ background:var(--coral-deep); }

/* small fluent cards */
.flt-sm{ justify-content:flex-start; }
.flt-sm__why{ margin:auto 0 0; padding-top:12px; font-size:.8rem; font-weight:700; color:var(--muted); line-height:1.45; }
.flt-cm__you, .flt-cm__try{ display:flex; flex-direction:column; gap:2px; padding:10px 13px; border-radius:12px; font-size:.92rem; font-weight:800; }
.flt-cm__you{ background:var(--cream-raise); border:1px solid var(--hair); color:var(--muted); margin-bottom:8px; }
.flt-cm__try{ background:var(--coral-tint); border:1px solid var(--coral-soft); color:var(--ink); }
.flt-cm__you span, .flt-cm__try span{ font-size:.64rem; font-weight:900; letter-spacing:.08em; text-transform:uppercase; opacity:.7; }
.flt-cm__try b{ color:var(--coral-deep); }
.flt-words{ display:flex; flex-wrap:wrap; gap:8px; }
.flt-words span{ padding:8px 14px; border-radius:999px; background:var(--gold-tint); border:1px solid var(--gold-line); color:var(--gold-deep); font-size:.92rem; font-weight:900; }
.flt-pp{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:12px 14px; border-radius:13px; background:var(--cream-raise); border:1px solid var(--hair); }
.flt-pp b{ font-size:.94rem; font-weight:900; color:var(--ink); }
.flt-pp__min{ font-size:.74rem; font-weight:900; color:var(--coral-deep); background:#fff; border:1px solid var(--coral-soft); border-radius:8px; padding:4px 9px; white-space:nowrap; }
.flt-ask__q{ padding:12px 15px; border-radius:14px 14px 14px 5px; background:#141414; color:#fff; font-size:.96rem; font-weight:800; }
.flt-ask__q b{ color:#EE7E3A; }

@media (max-width:960px){
  .flt-convo{ grid-column:span 12; grid-row:auto; }
  .flt-coach, .flt-roleplay{ grid-column:span 6; }
  .flt-sm{ grid-column:span 6; }
}
@media (max-width:600px){
  .flt-coach, .flt-roleplay, .flt-sm{ grid-column:span 12; }
  .flt-loop__step{ padding:8px 13px; font-size:.82rem; }
}

/* =========================================================
   FOOTER · six-column grid (brand + 5 nav columns)
   ========================================================= */
.site-foot__in{ grid-template-columns:1.5fr repeat(5,1fr); }
@media (max-width:1040px){ .site-foot__in{ grid-template-columns:1fr 1fr 1fr; } .site-foot__brand{ grid-column:1 / -1; } }
@media (max-width:560px){ .site-foot__in{ grid-template-columns:1fr 1fr; } }

/* =========================================================
   LEARN · compaction + one-section vertical rhythm
   (grid → films → Road to B1 → caption read as one section)
   ========================================================= */
#grow .lsn-films{ margin-top:var(--eco-gap) !important; }
#grow .jrn{ margin-top:var(--eco-gap) !important; }
#grow .lsn-cap--below{ margin-top:14px !important; text-align:center; }

/* slimmer XP / badge boxes — thinner, tighter line spacing */
#grow .rx-xp-stack{ gap:9px !important; }
#grow .rx-xp-stack .rx-xpc{ padding:9px 13px !important; gap:3px !important; }
#grow .rx-xp-stack .rx-xpc__big{ font-size:1.28rem !important; }

/* shorter fluency card */
#grow .flu__rows{ gap:9px !important; margin:12px 0 2px !important; }
#grow .flu__foot{ margin-top:11px !important; padding-top:10px !important; }

/* shorter Quick Quiz + right column so the whole LEARN row ends earlier */
#grow .rx-topics-card .rx-recall__actions{ margin-top:12px !important; }
#grow .rx-topics-card .rx-nodes{ gap:9px !important; }
#grow .rx-topics-card .rx-node{ padding:9px 12px !important; }

/* =========================================================
   PLAYER AVATARS (character DPs) — all perfectly circular,
   the image fills its container.
   ========================================================= */
.cmp-ava{ border-radius:50% !important; background:transparent !important; }
.cmp-ava img{ width:100% !important; height:100% !important; object-fit:cover !important; }
.h2h__pfp--img{ background:transparent !important; padding:0; overflow:hidden; }
.h2h__pfp--img img{ width:100%; height:100%; object-fit:cover; border-radius:50%; display:block; }
.cmp-fav{ background:transparent !important; border:none !important; border-radius:50% !important; overflow:hidden; padding:0; }
.cmp-fav img{ width:100%; height:100%; object-fit:cover; display:block; }
.rx-av--img{ overflow:hidden; background:transparent !important; }
.rx-av--img img{ width:100%; height:100%; object-fit:cover; display:block; }

/* =========================================================
   COMPETE · Head 2 Head — single row: player | scores | player
   bigger player cards + avatars, smaller score badges hugging
   the game name, connected by a line the colour of the score bg
   ========================================================= */
.h2h{ gap:16px !important; }
.h2h__row{ display:grid; grid-template-columns:1fr 1.15fr 1fr; align-items:center; gap:clamp(12px,2vw,26px); }
.h2h__player{ background:var(--coral); border-radius:22px;
  padding:clamp(18px,2vw,26px) clamp(14px,1.6vw,20px);
  display:flex; flex-direction:column; align-items:center; gap:11px; color:#fff; }
.h2h__player .h2h__pfp{ width:88px !important; height:88px !important;
  border:3px solid rgba(255,255,255,.55) !important; background:rgba(255,255,255,.2) !important; }
.h2h__player .h2h__name{ font-size:1.7rem !important; }
/* center column with VS + the two game score rows */
.h2h__mid{ display:flex; flex-direction:column; align-items:center; gap:13px; }
.h2h__game{ position:relative; display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:9px; width:100%; }
/* connector line — same colour as the (white) score badges, running end to end behind */
.h2h__game::before{ content:""; position:absolute; left:22px; right:22px; top:50%; height:3px;
  transform:translateY(-50%); background:#fff; opacity:.85; border-radius:2px; z-index:0; }
.h2h__game > *{ position:relative; z-index:1; }
/* smaller score badges, pinned to the ends of the line */
.h2h__game .h2h__sc{ width:44px !important; height:44px !important; font-size:1.05rem !important; }
.h2h__gname{ white-space:nowrap; justify-self:center; }
/* bigger VS + Challenge, centered */
.h2h__vs{ width:66px !important; height:66px !important; font-size:1.3rem !important; margin-bottom:2px; }
.h2h__mid{ justify-content:center; }
.h2h__cta{ margin-top:4px !important; justify-self:center; padding:16px 38px !important; font-size:1.12rem !important; border-radius:16px !important; }
@media (max-width:720px){
  .h2h__row{ grid-template-columns:1fr; gap:16px; }
  .h2h__player{ flex-direction:row; justify-content:center; }
}

/* =========================================================
   COMPETE · H2H — no coral glows, no breathing (hover only)
   ========================================================= */
.h2h__vs{ box-shadow:none !important; animation:none !important; }
.h2h__cta{ box-shadow:none !important; letter-spacing:.04em; }
.h2h__cta:hover{ box-shadow:0 14px 26px -12px rgba(221, 87, 28,.5) !important; }  /* glow on hover only */
.h2h__game .h2h__sc, .h2h__game .h2h__sc.win{ box-shadow:none !important; }
.h2h__player{ box-shadow:none !important; }
.cmp-fchal{ box-shadow:none !important; }

/* H2H · smaller Challenge, nudged down */
.h2h__cta{ padding:12px 30px !important; font-size:1rem !important; margin-top:14px !important; }

/* H2H player cards — bigger avatar, name down near the rank chips, narrower chips */
.h2h__player{ gap:0 !important; }
.h2h__player .h2h__pfp{ width:104px !important; height:104px !important; margin:0 0 20px !important; }
.h2h__player .h2h__name{ margin:0 0 9px !important; }
.h2h__player .h2h__meta{ width:80% !important; margin:0 auto !important; }

/* =========================================================
   Section subtitle pills — wrap + cap width so longer lines
   never overlap the section mascot.
   ========================================================= */
.chapter .sec-top__l .rx-lbadge{ white-space:normal; max-width:min(100%,470px); line-height:1.35; }

/* "Made to feel alive." heading above the story-lesson films */
.lsn-head{ margin-top:clamp(28px,3.4vw,46px); text-align:center; }
.lsn-head__h{ font-size:clamp(1.7rem,3.1vw,2.5rem); font-weight:900; letter-spacing:-.02em; color:var(--ink); line-height:1.02; margin:0; }
.lsn-head__p{ margin:9px 0 0; font-size:1rem; font-weight:600; color:var(--muted); }
#grow .lsn-films{ margin-top:16px !important; }

/* =========================================================
   COMPETE · Player Profile refinements
   ========================================================= */
/* league in a boxed chip */
.cmp-league{ align-self:flex-start; padding:5px 11px !important; border-radius:999px;
  background:rgba(244,183,64,.14); border:1px solid rgba(244,183,64,.32); }
/* bring XP a little down */
.cmp-profile__xp{ margin-top:7px; }
/* smaller stat + achievement boxes (less padding) */
.cmp-profile__stats{ gap:9px !important; }
.cmp-profile__stats > div{ padding:9px 6px !important; }
.cmp-profile__stats b{ font-size:1.25rem !important; }
.cmp-profile__badges{ gap:7px !important; }
.cmp-pbadge{ aspect-ratio:1.18 !important; font-size:1.1rem !important; opacity:1 !important; filter:none !important; }
/* three stat boxes — distinct colours */
.cmp-st--coral{ background:rgba(221, 87, 28,.16) !important; border-color:rgba(221, 87, 28,.34) !important; }
.cmp-st--coral b{ color:#EE7E3A !important; }
.cmp-st--gold{ background:rgba(244,183,64,.16) !important; border-color:rgba(244,183,64,.36) !important; }
.cmp-st--gold b{ color:var(--gold) !important; }
.cmp-st--blue{ background:rgba(94,131,216,.2) !important; border-color:rgba(94,131,216,.42) !important; }
.cmp-st--blue b{ color:#84a9ff !important; }

/* =========================================================
   HERO · title mascot — bigger, nudged up + right so it never
   overlaps a headline line
   ========================================================= */
.title-mascot{
  height:2.5em !important;
  left:100% !important; top:50% !important;
  transform:translate(22%,-86%) !important;
  filter:drop-shadow(0 12px 18px rgba(35,39,31,.22));
}
@media (max-width:560px){ .title-mascot{ height:1.9em !important; transform:translate(6%,-80%) !important; } }

/* smaller boxes (less padding) with a little space between — profile stats, badges, certificates */
.cmp-profile__stats{ gap:10px !important; }
.cmp-profile__stats > div{ padding:7px 6px !important; }
.cmp-profile__stats b{ font-size:1.2rem !important; }
.cmp-profile__badges{ gap:8px !important; }
.cmp-pbadge{ aspect-ratio:1.35 !important; font-size:1.05rem !important; }
.lib-certs{ gap:11px !important; }
.lib-cert{ padding:10px 13px !important; gap:11px !important; }
.lib-seal{ width:42px !important; height:42px !important; }
.lib-seal svg{ width:42px !important; height:42px !important; }

/* hero mascot — nudge further right so it fully clears the headline text */
.title-mascot{ transform:translate(44%,-84%) !important; }

/* Languages · French = black box with orange level */
.lib-lang.is-primary{ background:#141414 !important; border-color:#141414 !important; }
.lib-lang.is-primary .lib-lang__n{ color:#fff !important; }
.lib-lang.is-primary .lib-lang__lv{ color:var(--coral) !important; background:rgba(221, 87, 28,.16) !important; border-color:rgba(221, 87, 28,.45) !important; }

/* Lesson Library · thinner groups, packed from top (match Languages length) */
.lib-lessons .lib-groups{ justify-content:flex-start !important; gap:12px !important; }
.lib-lessons .lib-head{ margin-bottom:12px !important; }
.lib-group{ padding:11px 15px !important; }
.lib-group__ic{ width:40px !important; height:40px !important; }
.lib-group__m b{ font-size:.94rem !important; }

/* Lesson Library · bigger current (middle) group, smaller prev/next */
.lib-group.is-now{ padding:17px 16px !important; }
.lib-group.is-now .lib-group__ic{ width:48px !important; height:48px !important; }
.lib-group.is-now .lib-group__m b{ font-size:1.08rem !important; }
.lib-group.is-done, .lib-group.is-lock{ padding:9px 15px !important; }
.lib-group.is-done .lib-group__ic, .lib-group.is-lock .lib-group__ic{ width:34px !important; height:34px !important; }
.lib-group.is-done .lib-group__m b, .lib-group.is-lock .lib-group__m b{ font-size:.9rem !important; }

/* Saved list · name fills, flag pinned right, French items get an orange tint */
.lib-slist .lib-sname{ flex:1; }
.lib-sflag{ width:22px; height:15px; border-radius:3px; overflow:hidden; flex:none; box-shadow:0 0 0 1px rgba(0,0,0,.08); }
.lib-sflag svg{ width:100%; height:100%; display:block; }
.lib-slist li.is-fr{ background:var(--coral-tint) !important; border-color:var(--coral-soft) !important; }
.lib-slist li.is-fr .lib-bm{ color:var(--coral); }

/* Daily Goal tiles — Streak = opaque black, Words = opaque orange, white numbers, grey labels */
.jrn__gtile:nth-child(1){ background:#141414 !important; border-color:#141414 !important; }
.jrn__gtile:nth-child(2){ background:var(--coral) !important; border-color:var(--coral) !important; }
.jrn__gtile b{ color:#fff !important; }
.jrn__gtile span{ color:rgba(255,255,255,.68) !important; }

/* Friends leaderboard · highlight the "You" row */
.cmp-flist li.is-me{ background:var(--coral); border-radius:11px; padding:5px 9px; margin:0 -9px; }
.cmp-flist li.is-me .cmp-fn, .cmp-flist li.is-me .cmp-fx{ color:#fff !important; }
.cmp-flist li.is-me .cmp-fav{ box-shadow:0 0 0 2px rgba(255,255,255,.45); }

/* Library · after removing Learning Packs, fill the last row evenly (Mastered + Offline) */
.lib-mastery, .lib-offline{ grid-column:span 6 !important; }
@media (max-width:640px){ .lib-mastery, .lib-offline{ grid-column:span 12 !important; } }

/* Fluent · centered section heading */
#fluent .sec-top{ justify-content:center !important; text-align:center; }
#fluent .sec-top__l{ text-align:center; align-items:center; }
#fluent .sec-top .chap-tag{ justify-content:center; }
#fluent .sec-buddy{ display:none !important; }

/* Fluent · title flanked by two mascots (thumb left, wave right), centered CTA that ends the page */
#fluent .sec-top{ justify-content:space-between !important; align-items:center !important; text-align:center; }
#fluent .sec-top__l{ flex:1; text-align:center; align-items:center; }
#fluent .sec-top .chap-tag{ justify-content:center; }
#fluent .sec-buddy{ display:block !important; }
.sec-buddy--left .sec-mascot{ transform:rotate(2deg); }
/* moved CTA */
.flt-cta{ text-align:center; margin-top:clamp(40px,5.5vw,72px); }
.flt-cta .rx-final__h{ font-size:clamp(2.6rem,6vw,4.8rem) !important; margin:0; }
.flt-cta .rx-final__cta{ display:flex; gap:14px; justify-content:center; margin-top:24px; }

/* Fluent header · both flanking mascots same height + a little smaller, bigger title */
#fluent .sec-buddy{ width:auto !important; }
#fluent .sec-buddy .sec-mascot{ height:clamp(84px,8.5vw,112px) !important; width:auto !important; }
#fluent .sec-top__l .sec-h{ font-size:clamp(2.9rem,6.6vw,5.1rem) !important; }

/* Fluent header · title centered with room so it never overlaps the mascots */
#fluent .sec-top{ gap:clamp(16px,3vw,46px) !important; }
#fluent .sec-top__l{ min-width:0; }
#fluent .sec-top__l .sec-h{ font-size:clamp(2.3rem,5vw,3.95rem) !important; }
/* smaller "Start speaking today." */
.flt-cta .rx-final__h{ font-size:clamp(2.3rem,5vw,3.9rem) !important; }

/* Fluent header · bigger flanking mascots (title stays clear) */
#fluent .sec-buddy .sec-mascot{ height:clamp(102px,10vw,140px) !important; }

/* hero title mascot — nudge a bit down and left (nothing else moves) */
.title-mascot{ transform:translate(30%,-66%) !important; }

/* hero · nudge mascot a little right; make "Fluent" bigger than the rest of the headline */
.title-mascot{ transform:translate(36%,-66%) !important; }
.fluent-wrap .coral-text{ font-size:1.2em; }

/* space between the app badges and the reviews below */
.flt-cta{ margin-top:clamp(30px,4vw,54px) !important; margin-bottom:clamp(26px,3.2vw,46px) !important; }

/* hero mascot — nudge a little up and left */
.title-mascot{ transform:translate(30%,-73%) !important; }

/* hero mascot — a little more left */
.title-mascot{ transform:translate(24%,-73%) !important; }

/* Fluent finale — tighter gap between "Start speaking today." and the app badges */
.flt-cta{ margin-top:clamp(12px,1.8vw,24px) !important; }

/* section subtitle pill — sit just above the first content row (consistent spacing on top) */
#grow .sec-top, #explore .sec-top, #learn .sec-top{ margin-bottom:clamp(16px,1.9vw,24px) !important; }
#grow .sec-top__l .rx-learn-badges,
#explore .sec-top__l .rx-learn-badges,
#learn .sec-top__l .rx-learn-badges{ margin-top:clamp(20px,2.5vw,34px) !important; }

/* ============================================================
   COMPREHENSIVE SPACING + SIZING PASS
   ============================================================ */
/* 1 · bigger section titles */
.chapter .h-sec.sec-h{ font-size:clamp(2.6rem,5.6vw,4.5rem) !important; }
#fluent .sec-top__l .sec-h{ font-size:clamp(2.5rem,5.3vw,4.2rem) !important; }

/* 2 · even rhythm — title→subtitle and subtitle→content both = the internal grid gap */
#grow .sec-top__l .rx-learn-badges,
#explore .sec-top__l .rx-learn-badges,
#learn .sec-top__l .rx-learn-badges{ margin-top:var(--eco-gap) !important; }
#grow .sec-top, #explore .sec-top, #learn .sec-top{ margin-bottom:var(--eco-gap) !important; }

/* 3 · section-header mascot on the right — a bit bigger + same size in every section */
#grow .sec-buddy, #explore .sec-buddy, #learn .sec-buddy{ width:auto !important; }
#grow .sec-buddy .sec-mascot,
#explore .sec-buddy .sec-mascot,
#learn .sec-buddy .sec-mascot{ height:clamp(126px,12.5vw,168px) !important; width:auto !important; }

/* 4 · equal + a little more spacing between sections (hero→1→2→3→4) */
.chapter{ padding-block:clamp(84px,10.5vw,150px) !important; }
#home{ padding-top:clamp(24px,3.5vw,48px) !important; }

/* 5 · Fluent finale — even spacing + bigger flanking mascots */
#fluent .sec-top{ gap:clamp(20px,3.5vw,56px) !important; }
#fluent .sec-buddy .sec-mascot{ height:clamp(120px,11.8vw,162px) !important; }
.flt-cta{ margin-top:clamp(30px,3.6vw,50px) !important; margin-bottom:clamp(30px,3.6vw,50px) !important; }

/* Fluent · left-align the header to match Learn / Compete / Library (title left, one mascot right) */
#fluent .sec-top{ justify-content:space-between !important; text-align:left !important; }
#fluent .sec-top__l{ text-align:left !important; align-items:flex-start !important; flex:1 1 auto !important; }
#fluent .sec-top .chap-tag{ justify-content:flex-start !important; }
#fluent .sec-top__l .sec-h{ font-size:clamp(2.6rem,5.6vw,4.5rem) !important; }
#fluent .sec-buddy{ display:block !important; width:auto !important; }
#fluent .sec-buddy .sec-mascot{ height:clamp(126px,12.5vw,168px) !important; width:auto !important; }