/* ============================================================
   FLUENTLY.IO  V4 — SELF-EXPLANATORY PRODUCT LOOP
   Language context + visible learning loop + connected sections.
   ============================================================ */

/* ---- language pill (sprinkled everywhere for context) ---- */
.langpill{ display:inline-flex; align-items:center; gap:5px; font-weight:800; font-size:.74rem;
  padding:.32em .72em; border-radius:var(--pill); background:#fff; border:1px solid var(--edge); box-shadow:var(--sh-xs); white-space:nowrap; }
.langpill .ar{ color:var(--coral); font-weight:900; }

/* ---- hero language selector ---- */
.langsel{ display:flex; align-items:center; gap:10px; background:#fff; border:1px solid var(--edge);
  border-radius:16px; padding:8px 12px; box-shadow:var(--sh-xs); }
.langsel .side{ display:flex; align-items:center; gap:8px; }
.langsel .flag{ font-size:20px; line-height:1; }
.langsel .cap{ font-size:.62rem; font-weight:800; color:var(--muted); text-transform:uppercase; letter-spacing:.05em; display:block; line-height:1.2; }
.langsel b{ font-size:.92rem; line-height:1.1; }
.langsel .learn{ cursor:pointer; border-radius:10px; padding:2px 6px; margin:-2px -2px -2px -6px; transition:.2s; }
.langsel .learn:hover{ background:var(--coral-tint); }
.langsel .learn b{ color:var(--coral); }
.langsel .swap{ width:30px; height:30px; border-radius:50%; background:var(--coral-tint); color:var(--coral);
  display:grid; place-items:center; cursor:pointer; flex:none; transition:transform .4s var(--ease-back); font-weight:900; }
.langsel .swap:hover{ transform:rotate(180deg); }
.langsel .lvl{ margin-left:auto; }

/* ---- the visible learning loop (after hero) ---- */
.loopwrap{ position:relative; }
.loop{ display:flex; align-items:center; gap:9px; flex-wrap:wrap; justify-content:center; }
.loop .step{ display:inline-flex; align-items:center; gap:8px; background:#fff; border:1px solid var(--edge);
  border-radius:var(--pill); padding:.55em 1.05em; font-weight:800; font-size:.88rem; box-shadow:var(--sh-xs);
  transition:transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s; }
.loop .step:hover{ transform:translateY(-3px); border-color:var(--edge-strong); box-shadow:var(--sh-sm); }
.loop .step .n{ width:21px; height:21px; border-radius:50%; background:var(--coral); color:#fff; display:grid; place-items:center; font-size:.72rem; flex:none; }
.loop .step.repeat{ background:var(--ink); color:#fff; border-color:transparent; }
.loop .arr{ color:var(--coral); font-weight:900; font-size:1.1rem; }
@media(max-width:760px){ .loop .arr{ display:none; } .loop{ gap:7px; } .loop .step{ font-size:.8rem; padding:.5em .9em; } }

/* ---- connector between sections (shows data flowing) ---- */
.connector{ display:flex; justify-content:center; padding:clamp(10px,2vw,24px) 0 0; }
.connector span{ display:inline-flex; align-items:center; gap:9px; font-weight:800; font-size:.84rem; color:var(--charcoal);
  background:var(--cream-raise); border:1px solid var(--edge); border-radius:var(--pill); padding:.55em 1.15em; box-shadow:var(--sh-xs); }
.connector .dn{ color:var(--coral); font-weight:900; }

/* ---- pipeline step badge on feature cards ---- */
.stepno{ display:inline-flex; align-items:center; justify-content:center; width:24px; height:24px; border-radius:50%;
  background:var(--ink); color:#fff; font-size:.74rem; font-weight:900; flex:none; }
.b-head .stepno{ margin-right:2px; }

/* ---- weekly journey timeline ---- */
.wk{ display:flex; flex-direction:column; }
.wk__i{ display:flex; gap:12px; align-items:flex-start; padding:8px 0; position:relative; }
.wk__i::before{ content:""; position:absolute; left:23px; top:34px; bottom:-8px; width:2px; background:var(--line); }
.wk__i:last-child::before{ display:none; }
.wk__day{ width:42px; flex:none; font-weight:900; font-size:.74rem; color:var(--muted); padding-top:8px; text-transform:uppercase; letter-spacing:.04em; }
.wk__dot{ width:32px; height:32px; border-radius:11px; flex:none; display:grid; place-items:center; font-size:15px; border:1px solid var(--edge); }
.wk__txt{ padding-top:3px; } .wk__txt b{ font-size:.96rem; } .wk__txt span{ font-size:.76rem; color:var(--muted); font-weight:700; display:block; line-height:1.3; }
.wk__i.now .wk__dot{ box-shadow:0 0 0 3px var(--coral-tint); }
.wk__i.future{ opacity:.55; }

/* dot purpose tints */
.dot-convo{ background:#FAF4EA } .dot-vocab{ background:#EDEAF6 } .dot-lesson{ background:#F5F0D7 }
.dot-review{ background:#E9F3E6 } .dot-speak{ background:#E7EDF6 }

/* small "from your conversation" provenance note */
.fromchat{ display:inline-flex; align-items:center; gap:6px; font-size:.76rem; font-weight:800; color:var(--muted); }
.fromchat .lk{ color:var(--coral); }

/* ---- consistent spacing rhythm (label 18 / heading 14 / desc 40) ---- */
.chapter .chap-tag{ margin-bottom:18px; }
.sec-h{ margin-bottom:14px; }
.sec-desc{ margin-bottom:clamp(30px,4vw,44px); max-width:52ch; }

/* ---- features pipeline bento spans (DOM = pipeline order) ---- */
.b-trans{ grid-column:span 2; }
.b-tutor{ grid-column:span 2; }
.b-review{ grid-column:span 4; grid-row:auto; flex-direction:row; align-items:center; gap:18px; flex-wrap:wrap; }
@media(max-width:860px){ .b-trans,.b-tutor{ grid-column:span 2; } .b-review{ grid-column:span 2; } }
@media(max-width:520px){ .b-review{ grid-column:span 1; } }

/* primary card emphasis (hierarchy) */
.b-conv{ box-shadow:0 30px 60px -30px rgba(35,39,31,.30), inset 0 1px 0 rgba(255,255,255,.6) !important; }
.b-conv .b-head b{ font-size:1.12rem; }

/* background breathes: lighter grid behind tinted (dense) sections */
.chapter.tint{ box-shadow:inset 0 1px 0 rgba(255,255,255,.5); }

/* premium loading shimmer (AI generating) */
@keyframes shimmer{ to{ background-position:200% 0; } }
.shimmer{ background:linear-gradient(90deg,#eceae2 25%,#f6f4ee 50%,#eceae2 75%); background-size:200% 100%; animation:shimmer 1.3s infinite; border-radius:8px; }

/* mascot-in-notification */
.notif{ display:flex; align-items:center; gap:10px; background:#fff; border:1px solid var(--edge); border-radius:14px; padding:8px 12px; box-shadow:var(--sh); }
.notif img{ width:30px; flex:none; }
.notif b{ font-size:.84rem; } .notif span{ font-size:.72rem; color:var(--muted); font-weight:700; display:block; }

/* games: wide horizontal identity */
.games{ gap:clamp(18px,3vw,26px); }
.game{ min-height:330px; }

/* status text coloured by purpose */
.st-coral{ color:var(--coral) } .st-green{ color:#3f7a4f } .st-speak{ color:#3f5e9e } .st-vocab{ color:#5b4a99 }