/* ==== fonts.css ==== */
/* Lingocard webfonts.
   Roboto — the primary UI + display typeface used everywhere in the product.
   Inter  — secondary face used for marketing body copy in the 2024 landing.
   (The landing also references "Formular" for a few display headings; it is not
   freely available, so Roboto 700 is the documented substitute.) */
@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,300;0,400;0,500;0,700;0,900;1,400&family=Inter:wght@400;500;600;700&display=swap');

/* ==== colors.css ==== */
/* ============================================================
   Lingocard — Color tokens
   Base palette (raw values) + semantic aliases.
   Pulled from the web-platform codebase: app/styles/base/_colors.scss,
   app/styles/theme/colors/index.ts, and the 2024 landing global.ts.
   ============================================================ */
:root {
  /* --- Brand / logo --------------------------------------------------
     The Lingocard mark is a double check: plum over periwinkle.
     These two also drive the playful "sparkle" + "dot" accents. */
  --lc-periwinkle:        #6f82d1;  /* logo lower check, primary accent */
  --lc-periwinkle-300:    #768be0;
  --lc-periwinkle-400:    #6279d8;
  --lc-periwinkle-200:    #8ea3ea;
  --lc-periwinkle-100:    #9babef;
  --lc-plum:              #d094f6;  /* logo upper check */
  --lc-plum-200:          #e2b4ff;
  --lc-skyblue:           #74d9e6;  /* accent / counter highlight */
  --lc-skyblue-deep:      #3ab5c5;

  /* --- Product blues -------------------------------------------------
     Two eras: classic app (steel) and 2024 marketing (bright). */
  --lc-blue:              #3381d1;  /* 2024 landing primary */
  --lc-blue-steel:        #2261a1;  /* classic app primary */
  --lc-blue-button:       #428ad4;  /* classic primary button */
  --lc-blue-dark:         #003469;  /* link hover */
  --lc-blue-darker:       #042238;  /* store buttons, deep ink */
  --lc-blue-darkest:      #1c274c;  /* counter digits */
  --lc-blue-press:        #044182;  /* landing button hover */
  --lc-blue-light:        #b6d0eb;  /* hover surface */
  --lc-blue-lighter:      #ebf2ff;  /* selected / tint surface */

  /* --- Neutrals ------------------------------------------------------ */
  --lc-white:             #ffffff;
  --lc-ink:               #2c3143;  /* darkslategray — body text & footer */
  --lc-gray-900:          #1c1e21;
  --lc-gray-800:          #1d2129;
  --lc-gray-700:          #323232;
  --lc-gray-600:          #707070;  /* titles / dimgray */
  --lc-gray-500:          #a4a4a4;  /* secondary text */
  --lc-gray-400:          #c4c4c4;  /* borders */
  --lc-gray-300:          #e0e0e0;
  --lc-gray-250:          #e5e5e5;
  --lc-gray-200:          #f1f3f4;  /* hover fill */
  --lc-gray-150:          #f5f5f5;
  --lc-gray-100:          #f9f9f9;
  --lc-gray-50:           #fafafa;  /* sunken page bg */

  /* --- Semantic status ----------------------------------------------- */
  --lc-success:           #00e517;  /* "ready" presence dot */
  --lc-success-alt:       #28e522;
  --lc-warning:           #f2f700;  /* "busy" presence dot */
  --lc-danger:            #d44040;  /* errors */
  --lc-danger-alt:        #f14336;

  /* ====================================================================
     SEMANTIC ALIASES — reach for these in product work.
     ==================================================================== */
  --color-primary:            var(--lc-blue);
  --color-primary-hover:      var(--lc-blue-press);
  --color-primary-strong:     var(--lc-blue-steel);
  --color-primary-button:     var(--lc-blue-button);
  --color-on-primary:         var(--lc-white);
  --color-accent:             var(--lc-periwinkle);
  --color-accent-2:           var(--lc-plum);
  --color-accent-3:           var(--lc-skyblue);

  --surface:                  var(--lc-white);
  --surface-sunken:           var(--lc-gray-50);
  --surface-raised:           var(--lc-white);
  --surface-tint:             var(--lc-blue-lighter);   /* selected rows, my chat bubble */
  --surface-hover:            var(--lc-gray-200);
  --surface-inverse:          var(--lc-ink);

  --text-primary:             var(--lc-ink);
  --text-title:               var(--lc-gray-600);
  --text-secondary:           var(--lc-gray-500);
  --text-muted:               var(--lc-gray-400);
  --text-on-inverse:          var(--lc-white);
  --text-link:                var(--lc-blue);
  --text-link-hover:          var(--lc-blue-dark);

  --border:                   var(--lc-gray-400);
  --border-subtle:            var(--lc-gray-250);
  --border-strong:            var(--lc-blue-dark);
  --focus-ring:               var(--lc-blue-dark);

  --status-online:            var(--lc-success);
  --status-busy:              var(--lc-warning);
  --status-error:             var(--lc-danger);

  /* Signature gradients */
  --gradient-brand:           radial-gradient(50% 130% at 50% 50%, var(--lc-periwinkle-100), var(--lc-periwinkle-100) 43%, var(--lc-blue));
  --gradient-skyblue:         linear-gradient(180deg, var(--lc-skyblue) 0%, var(--lc-skyblue) 28%, var(--lc-skyblue-deep) 100%);
  --gradient-mark:            linear-gradient(135deg, var(--lc-plum), var(--lc-periwinkle));
}

/* ==== typography.css ==== */
/* ============================================================
   Lingocard — Typography tokens
   Roboto is the product face (UI + display). Inter is the
   marketing body face. Scale from _typography.scss + theme.
   ============================================================ */
:root {
  --font-sans:    "Roboto", -apple-system, "Segoe UI", sans-serif;
  --font-body:    "Inter", "Roboto", sans-serif;   /* marketing body copy */
  --font-display: "Roboto", "Inter", sans-serif;   /* "Formular" substitute */

  /* Type scale (px). The product is built on a small, pragmatic set. */
  --text-3xs:   10px;   /* sub-labels */
  --text-2xs:   12px;   /* captions, Text component */
  --text-xs:    14px;   /* small UI, H4 */
  --text-sm:    16px;   /* base, body, buttons, H3 */
  --text-md:    18px;   /* language list items */
  --text-lg:    20px;
  --text-xl:    24px;   /* H2, section subheads */
  --text-2xl:   28px;
  --text-3xl:   36px;   /* huge element */
  --text-4xl:   48px;   /* H1 */
  --text-5xl:   52px;   /* landing hero */
  --text-display: 84px; /* flashcards counter */

  /* Weights */
  --weight-light:    300;
  --weight-regular:  400;
  --weight-medium:   500;
  --weight-bold:     700;
  --weight-black:    900;

  /* Line heights */
  --leading-tight:   1.1;
  --leading-snug:    1.25;
  --leading-normal:  1.5;

  /* Letter spacing — the 2024 display headings track slightly tight */
  --tracking-display: -0.02em;
  --tracking-tight:   -0.01em;
  --tracking-normal:  0;
  --tracking-wide:    0.02em;
}

/* ==== spacing.css ==== */
/* ============================================================
   Lingocard — Spacing, radii, shadows, layout tokens
   ============================================================ */
:root {
  /* Spacing — 16px (1rem) base, the unit the SCSS is built on */
  --space-0:   0;
  --space-1:   4px;
  --space-2:   8px;
  --space-3:   12px;
  --space-4:   16px;   /* base */
  --space-5:   20px;
  --space-6:   24px;
  --space-8:   32px;
  --space-10:  40px;
  --space-12:  48px;
  --space-16:  64px;
  --space-20:  80px;
  --space-24:  96px;

  /* Radii — product uses 4–6px; marketing leans on pills + 12px dots */
  --radius-xs:    4px;    /* buttons, badges, settings popovers */
  --radius-sm:    6px;    /* inputs, cards, dropdowns */
  --radius-md:    12px;   /* sparkle dots, counter tiles */
  --radius-lg:    20px;   /* review cards, store buttons */
  --radius-pill:  24px;   /* landing CTA pills */
  --radius-bubble: 18px;  /* chat message bubbles */
  --radius-full:  9999px; /* avatars, presence dots */

  /* Elevation */
  --shadow-default: 0 1px 3px rgba(0,0,0,0.2), 0 2px 2px rgba(0,0,0,0.12), 0 0 2px rgba(0,0,0,0.14);
  --shadow-card:    0 1px 8px rgba(0,0,0,0.2), 0 3px 4px rgba(0,0,0,0.12), 0 3px 3px rgba(0,0,0,0.14);
  --shadow-popover: 0 4px 4px rgba(29,33,41,0.25);
  --shadow-float:   13.8px 13.8px 20.71px rgba(0,0,0,0.1);   /* marketing review cards */
  --shadow-soft:    0 4px 4px rgba(0,0,0,0.1);

  /* Motion — the product favours quick, plain transitions (no bounce) */
  --ease-standard:  cubic-bezier(0.4, 0, 0.2, 1); /* @kind other */
  --duration-fast:  150ms; /* @kind other */
  --duration-base:  250ms; /* @kind other */

  /* Layout */
  --header-height:  64px;
  --content-max:    1400px;
}

/* ==== styles.css ==== */
/* ============================================================
   Lingocard Design System — global entry point.
   Consumers link THIS file. It is an import manifest only.
   ============================================================ */
@import "./tokens/fonts.css";
@import "./tokens/colors.css";
@import "./tokens/typography.css";
@import "./tokens/spacing.css";

/* Decision 2026-07-04: the DS adapts to the brand — font tokens themed to the
   approved Nunito (headings) + Mulish (body). Per-script fallbacks (Noto) kept
   for the 67 locales: neither pair covers Arabic/Hebrew/CJK/Thai/Devanagari. */
:root {
  --font-sans:    "Nunito", "Noto Sans", "Noto Sans Arabic", "Noto Sans Hebrew", "Noto Sans SC", "Noto Sans JP", "Noto Sans KR", "Noto Sans Thai", "Noto Sans Devanagari", -apple-system, "Segoe UI", sans-serif;
  --font-body:    "Mulish", "Noto Sans", "Noto Sans Arabic", "Noto Sans Hebrew", "Noto Sans SC", "Noto Sans JP", "Noto Sans KR", "Noto Sans Thai", "Noto Sans Devanagari", -apple-system, "Segoe UI", sans-serif;
  --font-display: "Nunito", "Noto Sans", -apple-system, "Segoe UI", sans-serif;
}

/* ==== speaking-practice.css ==== */
/* ============================================================
   Lingocard — Speaking Practice landing page
   Tokens mapped to lingocard.com
   ============================================================ */

:root {
  /* ---- Color ---- */
  --navy:        #042238;   /* primary text + headings */
  --navy-2:      #1d3b50;   /* secondary heading / strong body */
  --ink-muted:   #56708a;   /* body / muted text */
  --ink-faint:   #8499ac;   /* captions, meta */

  --white:       #ffffff;
  --bg:          #ffffff;
  --bg-soft:     #f3f8ff;   /* alternating section tint */
  --bg-soft-2:   #eef4fe;
  --line:        #e3ecf6;   /* hairline borders */
  --line-strong: #cdddee;

  --blue:        #3b7ce5;   /* primary CTA */
  --blue-dark:   #2f66c4;   /* hover */
  --blue-ink:    #1f4f9e;
  --teal:        #45c8c0;
  --teal-soft:   #d9f4f2;
  --purple:      #9b8bea;
  --purple-soft: #e9e4fb;
  --sky:         #69b5e8;
  --sky-soft:    #dceffb;
  --gold:        #f2b84b;

  /* gradient band (matches the counter band on the home page) */
  --grad-band:   linear-gradient(120deg, #5c8cee 0%, #7b82ec 55%, #9b8bea 100%);
  --grad-mark:   linear-gradient(150deg, #9b8bea 0%, #5c8cee 100%);
  --grad-feature:linear-gradient(135deg, #f3f8ff 0%, #eef0ff 100%);

  /* ---- Radius ---- */
  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 22px;
  --r-xl: 28px;
  --r-pill: 999px;

  /* ---- Shadow ---- */
  --sh-xs: 0 1px 2px rgba(4,34,56,.06);
  --sh-sm: 0 4px 14px rgba(4,34,56,.06);
  --sh-md: 0 12px 34px rgba(4,34,56,.09);
  --sh-lg: 0 26px 60px rgba(4,34,56,.13);
  --sh-blue: 0 12px 26px rgba(59,124,229,.32);

  /* ---- Spacing scale ---- */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px;
  --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px;
  --s-9: 96px; --s-10: 128px;

  /* ---- Layout ---- */
  --maxw: 1200px;
  --gutter: clamp(20px, 5vw, 56px);
  --section-y: clamp(56px, 9vw, 112px);

  /* ---- Type ---- */
  --font-head: "Nunito", system-ui, sans-serif;
  --font-body: "Mulish", system-ui, sans-serif;
}

/* ============================================================
   Reset / base
   ============================================================ */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.62;
  color: var(--ink-muted);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }

h1, h2, h3, h4 {
  font-family: var(--font-head);
  color: var(--navy);
  line-height: 1.1;
  margin: 0;
  letter-spacing: -0.01em;
  text-wrap: balance;
}
p { margin: 0 0 1em; text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

:focus-visible {
  outline: 3px solid var(--blue);
  outline-offset: 3px;
  border-radius: 6px;
}

/* ============================================================
   Layout helpers
   ============================================================ */
.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: var(--section-y); position: relative; }
.section--soft { background: var(--bg-soft); }
.eyebrow {
  font-family: var(--font-head);
  font-weight: 800;
  font-size: .8rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--blue);
  margin: 0 0 var(--s-4);
}
.lede { font-size: clamp(1.05rem, 1.6vw, 1.22rem); color: var(--navy-2); }
.measure { max-width: 64ch; }
.center { text-align: center; margin-inline: auto; }

h1 { font-weight: 800; font-size: clamp(2.05rem, 5.4vw, 3.6rem); }
h2 { font-weight: 800; font-size: clamp(1.7rem, 3.6vw, 2.6rem); }
h3 { font-weight: 800; font-size: clamp(1.18rem, 1.8vw, 1.45rem); }

/* ============================================================
   Buttons
   ============================================================ */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--s-2);
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 1.02rem;
  border: none;
  border-radius: var(--r-pill);
  padding: 15px 30px;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
  white-space: nowrap;
}
.btn--primary { background: var(--blue); color: #fff; box-shadow: var(--sh-blue); }
.btn--primary:hover { background: var(--blue-dark); transform: translateY(-2px); }
.btn--ghost { background: #fff; color: var(--navy); box-shadow: inset 0 0 0 1.5px var(--line-strong); }
.btn--ghost:hover { box-shadow: inset 0 0 0 1.5px var(--blue); color: var(--blue); transform: translateY(-2px); }
.btn--lg { padding: 17px 38px; font-size: 1.08rem; }

/* store badges */
.stores { display: flex; flex-wrap: wrap; gap: var(--s-3); align-items: center; }
.store-badge {
  display: inline-flex; align-items: center; gap: 10px;
  background: var(--navy); color: #fff;
  border-radius: 12px; padding: 9px 16px 9px 14px;
  transition: transform .18s ease, box-shadow .18s ease;
  box-shadow: var(--sh-sm);
}
.store-badge:hover { transform: translateY(-2px); box-shadow: var(--sh-md); }
.store-badge svg { width: 24px; height: 24px; flex: none; }
.store-badge > span { display: flex; flex-direction: column; line-height: 1.1; }
.store-badge .sb-top { font-size: .62rem; line-height: 1; opacity: .82; font-weight: 600; letter-spacing: .02em; white-space: nowrap; }
.store-badge .sb-name { font-family: var(--font-head); font-weight: 800; font-size: 1.05rem; line-height: 1.15; white-space: nowrap; }
.store-badge--light { background:#fff; color: var(--navy); box-shadow: inset 0 0 0 1.5px var(--line-strong), var(--sh-xs); }

/* ============================================================
   Sparkle decorations
   ============================================================ */
.spark { position: absolute; pointer-events: none; z-index: 0; opacity: .9; }
.spark svg { width: 100%; height: 100%; }
.deco-card {
  position: absolute; border-radius: 14px; z-index: 0; pointer-events: none;
  box-shadow: var(--sh-sm);
}

/* ============================================================
   Header
   ============================================================ */
.site-header {
  position: sticky; top: 0; z-index: 60;
  background: rgba(255,255,255,.86);
  backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--line);
}
.header-row { display: flex; align-items: center; gap: var(--s-5); height: 70px; }
.brand { display: inline-flex; align-items: center; gap: 9px; font-family: var(--font-head); font-weight: 800; font-size: 1.35rem; color: var(--navy); }
.brand .mark { width: 30px; height: 30px; flex: none; }
.nav-main { display: flex; align-items: center; gap: 4px; }
.nav-main a {
  font-family: var(--font-head); font-weight: 700; font-size: .98rem;
  color: var(--navy-2); padding: 9px 14px; border-radius: var(--r-pill);
  transition: background .15s ease, color .15s ease;
}
.nav-main a:hover { background: var(--bg-soft); color: var(--blue); }
.header-right { display: flex; align-items: center; gap: var(--s-3); margin-left: auto; }
.lang-select {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-head); font-weight: 700; font-size: .95rem; color: var(--navy);
  padding: 8px 12px; border-radius: var(--r-pill); background: transparent; border: 1.5px solid transparent;
}
.lang-select:hover { background: var(--bg-soft); }
.lang-select svg { width: 14px; height: 14px; }
.login-btn {
  font-family: var(--font-head); font-weight: 800; font-size: .98rem; white-space: nowrap;
  color: #fff; background: var(--blue); padding: 10px 22px; border-radius: var(--r-pill);
  box-shadow: var(--sh-blue); transition: background .18s, transform .18s;
}
.login-btn:hover { background: var(--blue-dark); transform: translateY(-1px); }
.nav-toggle { display: none; background: none; border: none; padding: 8px; border-radius: 10px; color: var(--navy); }
.nav-toggle:hover { background: var(--bg-soft); }
.nav-toggle svg { width: 26px; height: 26px; }

/* Products dropdown (shared across product pages) */
.has-dropdown { position: relative; }
.has-dropdown > a, .nav-trigger {
  font-family: var(--font-head); font-weight: 700; font-size: .98rem;
  color: var(--navy-2); padding: 9px 14px; border-radius: var(--r-pill);
  transition: background .15s ease, color .15s ease;
  display: inline-flex; align-items: center; gap: 6px;
  background: none; border: none; cursor: pointer;
}
.nav-trigger svg { width: 12px; height: 12px; transition: transform .2s ease; }
.has-dropdown:hover > a, .has-dropdown:hover .nav-trigger, .has-dropdown:focus-within .nav-trigger { background: var(--bg-soft); color: var(--blue); }
.has-dropdown:hover .nav-trigger svg, .has-dropdown:focus-within .nav-trigger svg { transform: rotate(180deg); }
.dropdown {
  position: absolute; top: calc(100% + 8px); left: 0; z-index: 70;
  background: #fff; border: 1.5px solid var(--line); border-radius: var(--r-lg);
  box-shadow: var(--sh-md); padding: 10px; min-width: 290px;
  display: grid; gap: 2px;
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity .16s ease, transform .16s ease, visibility .16s;
}
.has-dropdown:hover .dropdown, .has-dropdown:focus-within .dropdown { opacity: 1; visibility: visible; transform: translateY(0); }
.dropdown a { display: flex; align-items: flex-start; gap: 12px; padding: 11px 13px; border-radius: var(--r-md); transition: background .14s ease; }
.dropdown a:hover { background: var(--bg-soft); }
.dropdown .di { width: 38px; height: 38px; border-radius: 11px; flex: none; display: grid; place-items: center; }
.dropdown .di svg { width: 20px; height: 20px; }
.dropdown b { font-family: var(--font-head); font-weight: 800; color: var(--navy); font-size: .96rem; display: block; line-height: 1.2; }
.dropdown span { font-size: .82rem; color: var(--ink-faint); line-height: 1.35; }
.dropdown .badge-soon { font-size: .64rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--purple); background: var(--purple-soft); padding: 2px 7px; border-radius: var(--r-pill); margin-left: auto; align-self: center; }
.mobile-menu .mm-group { font-family: var(--font-head); font-weight: 800; font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-faint); padding: 14px 8px 4px; }
.mobile-menu .mm-sub { padding-left: 22px; }

/* mobile menu */
.mobile-menu {
  display: none; flex-direction: column; gap: 4px;
  padding: var(--s-4) var(--gutter) var(--s-6);
  border-bottom: 1px solid var(--line); background: #fff;
}
.mobile-menu.open { display: flex; }
.mobile-menu a { font-family: var(--font-head); font-weight: 700; color: var(--navy-2); padding: 12px 8px; border-radius: 12px; }
.mobile-menu a:hover { background: var(--bg-soft); }
.mobile-menu .login-btn { margin-top: var(--s-3); text-align: center; }

/* ============================================================
   Hero
   ============================================================ */
.hero { position: relative; overflow: hidden; padding-block: clamp(40px, 6vw, 80px) var(--section-y); }
.hero-grid {
  display: grid; grid-template-columns: 1fr; gap: clamp(36px, 5vw, 64px);
  align-items: center; position: relative; z-index: 2;
}
.hero-grid > * { min-width: 0; }
.hero h1 { margin-bottom: var(--s-4); }
.hero .updated { font-size: .9rem; color: var(--ink-faint); font-weight: 600; margin-bottom: var(--s-4); display: inline-flex; align-items: center; gap: 7px; }
.hero .updated::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--teal); display: inline-block; }
.hero-sub { font-size: clamp(1.08rem, 1.7vw, 1.28rem); color: var(--navy-2); max-width: 40ch; margin-bottom: var(--s-6); }
.hero-cta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-4); margin-bottom: var(--s-6); }

/* product screenshot slot */
.shot {
  position: relative; border-radius: var(--r-xl);
  background:
    repeating-linear-gradient(135deg, #eef4fe 0 14px, #e6eefb 14px 28px);
  border: 1.5px solid var(--line-strong);
  box-shadow: var(--sh-lg);
  display: flex; align-items: center; justify-content: center;
  min-height: 280px; overflow: hidden; isolation: isolate;
}
.shot::after {
  content: attr(data-label);
  font-family: "SF Mono", ui-monospace, "Menlo", monospace;
  font-size: .8rem; letter-spacing: .02em; color: var(--blue-ink);
  background: rgba(255,255,255,.92); border: 1px solid var(--line-strong);
  padding: 8px 14px; border-radius: var(--r-pill); box-shadow: var(--sh-xs);
  max-width: 80%; text-align: center; line-height: 1.4;
}
.shot > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.shot--contain { background: #fff; padding: 0; }
.shot--contain > img { object-fit: contain; }
.shot:has(> img) { background: #fff; min-height: 0; }
.shot:has(> img)::after { display: none; }
.shot--browser { padding-top: 38px; }
.shot--browser > img { top: 38px; height: calc(100% - 38px); }
.shot--browser::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 38px;
  background: #fff; border-bottom: 1px solid var(--line);
  box-shadow: 14px 0 0 #ff5f57 inset, 36px 0 0 #febc2e inset, 58px 0 0 #28c840 inset;
  background-clip: padding-box;
}
.shot--browser .dotline { position: absolute; top: 13px; left: 14px; display: flex; gap: 8px; z-index: 3; }
.shot--browser .dotline i { width: 12px; height: 12px; border-radius: 50%; display: block; }
.hero-shot { aspect-ratio: 4 / 3.1; }

/* ============================================================
   Benefit chips
   ============================================================ */
.chips { display: flex; flex-wrap: wrap; gap: var(--s-4); justify-content: center; }
.chip {
  display: inline-flex; align-items: center; gap: 10px;
  background: #fff; border: 1.5px solid var(--line);
  border-radius: var(--r-pill); padding: 12px 22px;
  font-family: var(--font-head); font-weight: 800; color: var(--navy);
  box-shadow: var(--sh-sm);
}
.chip .dot { width: 12px; height: 12px; border-radius: 50%; flex: none; }

/* ============================================================
   Pillars (section 3)
   ============================================================ */
.pairlabel {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-head); font-weight: 800; font-size: .82rem;
  letter-spacing: .1em; text-transform: uppercase; color: var(--blue-ink);
  background: var(--sky-soft); padding: 7px 16px; border-radius: var(--r-pill);
  margin-bottom: var(--s-4);
}
.pillars { display: grid; grid-template-columns: 1fr; gap: var(--s-5); }
.pair {
  position: relative; display: grid; grid-template-columns: 1fr; gap: var(--s-5);
  padding: var(--s-5); border-radius: var(--r-xl);
  background: linear-gradient(180deg, #f3f8ff, #ffffff);
  border: 1.5px solid var(--line);
}
.pair .pairlabel { grid-column: 1 / -1; margin-bottom: 0; }
.pillar {
  background: #fff; border: 1.5px solid var(--line); border-radius: var(--r-lg);
  padding: var(--s-6); box-shadow: var(--sh-sm);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.pillar:hover { transform: translateY(-4px); box-shadow: var(--sh-md); border-color: var(--line-strong); }
.pillar .pnum {
  width: 46px; height: 46px; border-radius: 14px; flex: none;
  display: grid; place-items: center; font-family: var(--font-head); font-weight: 800;
  font-size: 1.2rem; color: #fff; margin-bottom: var(--s-4);
}
.pillar h3 { margin-bottom: var(--s-3); }
.pillar p { font-size: .98rem; }
.pillar--accent { border-color: var(--purple-soft); background: linear-gradient(180deg,#faf9ff,#fff); }

/* ============================================================
   Two-column feature (text + video, friends)
   ============================================================ */
.split { display: grid; grid-template-columns: 1fr; gap: clamp(32px, 5vw, 64px); align-items: center; }
.split--rev .split-media { order: -1; }
.steps { list-style: none; margin: var(--s-5) 0 0; padding: 0; display: grid; gap: var(--s-4); }
.steps li { display: grid; grid-template-columns: auto 1fr; gap: var(--s-4); align-items: start; }
.steps .sicon { width: 44px; height: 44px; border-radius: 13px; display: grid; place-items: center; flex: none; box-shadow: var(--sh-xs); }
.steps .sicon svg { width: 22px; height: 22px; }
.steps h4 { font-family: var(--font-head); font-weight: 800; color: var(--navy); font-size: 1.05rem; margin: 0 0 3px; }
.steps p { font-size: .96rem; margin: 0; }

/* ============================================================
   Featured flashcard flow (section 5)
   ============================================================ */
.feature-band { background: var(--grad-feature); position: relative; overflow: hidden; }
.flow { display: grid; grid-template-columns: 1fr; gap: var(--s-5); align-items: stretch; margin-top: var(--s-7); }
.flow-step {
  position: relative; background: #fff; border-radius: var(--r-xl); padding: var(--s-6);
  border: 1.5px solid var(--line); box-shadow: var(--sh-md); text-align: center;
}
.flow-step .beat { font-family: var(--font-head); font-weight: 800; color: var(--purple); font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; margin-bottom: var(--s-3); }
.flow-step h3 { font-size: 1.2rem; margin-bottom: var(--s-3); }
.flow-step p { font-size: .95rem; }
.flow-ico { width: 60px; height: 60px; border-radius: 18px; margin: 0 auto var(--s-4); display: grid; place-items: center; }
.flow-ico svg { width: 30px; height: 30px; }
.flow-arrow { display: none; align-items: center; justify-content: center; color: var(--purple); }
.flow-arrow svg { width: 34px; height: 34px; }

/* ============================================================
   Comparison table (section 7)
   ============================================================ */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; margin-top: var(--s-7); border-radius: var(--r-lg); border: 1.5px solid var(--line); box-shadow: var(--sh-sm); }
.cmp { width: 100%; min-width: 760px; border-collapse: collapse; background: #fff; }
.cmp th, .cmp td { padding: 16px 20px; text-align: left; border-bottom: 1px solid var(--line); vertical-align: middle; }
.cmp thead th { font-family: var(--font-head); font-weight: 800; color: var(--navy); font-size: .98rem; background: var(--bg-soft); position: sticky; top: 0; }
.cmp thead th.col-us { background: var(--blue); color: #fff; }
.cmp tbody th { font-family: var(--font-body); font-weight: 700; color: var(--navy-2); font-size: .95rem; }
.cmp td { font-size: .95rem; color: var(--ink-muted); }
.cmp td.col-us { background: #f3f8ff; color: var(--navy); font-weight: 800; font-family: var(--font-head); }
.cmp tr:last-child th, .cmp tr:last-child td { border-bottom: none; }
.cmp .yes { color: #1c9d6f; font-weight: 800; }
.cmp .no { color: #b9485b; font-weight: 700; }
.tick { display: inline-flex; align-items: center; gap: 7px; }
.tick svg { width: 17px; height: 17px; flex: none; }
.scroll-hint { display: none; font-size: .85rem; color: var(--ink-faint); margin-top: var(--s-3); text-align: center; font-weight: 600; }

/* ============================================================
   Language grid (section 8)
   ============================================================ */
.lang-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s-3); margin-top: var(--s-7); }
.lang-grid a {
  display: flex; align-items: center; gap: 10px;
  background: #fff; border: 1.5px solid var(--line); border-radius: var(--r-md);
  padding: 13px 16px; font-family: var(--font-head); font-weight: 700; color: var(--navy-2);
  font-size: .96rem; transition: border-color .15s, color .15s, transform .15s, box-shadow .15s;
}
.lang-grid a:hover { border-color: var(--blue); color: var(--blue); transform: translateY(-2px); box-shadow: var(--sh-sm); }
.lang-grid a .flag { width: 9px; height: 9px; border-radius: 50%; background: var(--teal); flex: none; }
.lang-grid a:nth-child(3n) .flag { background: var(--purple); }
.lang-grid a:nth-child(3n+1) .flag { background: var(--sky); }

/* ============================================================
   Testimonials carousel (section 9)
   ============================================================ */
.carousel { position: relative; margin-top: var(--s-7); }
.carousel-track { display: flex; gap: var(--s-5); overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: var(--s-4); scrollbar-width: none; }
.carousel-track::-webkit-scrollbar { display: none; }
.tcard {
  scroll-snap-align: center; flex: 0 0 100%; max-width: 100%;
  background: #fff; border: 1.5px solid var(--line); border-radius: var(--r-xl);
  padding: clamp(28px, 4vw, 44px); box-shadow: var(--sh-sm);
}
.tcard .stars { display: flex; gap: 3px; color: var(--gold); margin-bottom: var(--s-4); }
.tcard .stars svg { width: 20px; height: 20px; }
.tcard blockquote { font-family: var(--font-head); font-weight: 700; color: var(--navy); font-size: clamp(1.15rem, 1.9vw, 1.5rem); line-height: 1.4; margin: 0 0 var(--s-5); letter-spacing: -0.01em; }
.tcard .who { display: flex; align-items: center; gap: 14px; }
.tcard .ava { width: 50px; height: 50px; border-radius: 50%; flex: none; display: grid; place-items: center; color: #fff; font-family: var(--font-head); font-weight: 800; font-size: 1.15rem; }
.tcard .who b { font-family: var(--font-head); color: var(--navy); display: block; font-size: 1rem; }
.tcard .who span { font-size: .88rem; color: var(--ink-faint); }
.carousel-ctrl { display: flex; align-items: center; justify-content: center; gap: var(--s-4); margin-top: var(--s-5); }
.carousel-dots { display: flex; gap: 8px; }
.carousel-dots button { width: 9px; height: 9px; padding: 0; border-radius: 50%; border: none; background: var(--line-strong); transition: background .2s, width .2s; }
.carousel-dots button[aria-current="true"] { background: var(--blue); width: 26px; border-radius: var(--r-pill); }
.carousel-arrow { width: 48px; height: 48px; border-radius: 50%; border: 1.5px solid var(--line-strong); background: #fff; color: var(--navy); display: grid; place-items: center; transition: border-color .15s, color .15s, transform .15s; }
.carousel-arrow:hover { border-color: var(--blue); color: var(--blue); transform: translateY(-2px); }
.carousel-arrow svg { width: 20px; height: 20px; }

/* ============================================================
   FAQ (section 10)
   ============================================================ */
.faq { max-width: 820px; margin: var(--s-7) auto 0; display: grid; gap: var(--s-3); }
.faq details {
  background: #fff; border: 1.5px solid var(--line); border-radius: var(--r-md);
  overflow: hidden; transition: border-color .18s, box-shadow .18s;
}
.faq details[open] { border-color: var(--line-strong); box-shadow: var(--sh-sm); }
.faq summary {
  list-style: none; cursor: pointer; padding: 20px 22px;
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-4);
  font-family: var(--font-head); font-weight: 800; color: var(--navy); font-size: 1.05rem;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary .pm { width: 26px; height: 26px; flex: none; border-radius: 50%; background: var(--bg-soft); display: grid; place-items: center; transition: transform .2s, background .2s; }
.faq summary .pm svg { width: 14px; height: 14px; color: var(--blue); }
.faq details[open] summary .pm { transform: rotate(45deg); background: var(--sky-soft); }
.faq .ans { padding: 0 22px 22px; font-size: .98rem; }
.faq .ans p { margin: 0; }

/* ============================================================
   Final CTA band (section 11)
   ============================================================ */
.cta-band { position: relative; overflow: hidden; background: var(--grad-band); color: #fff; border-radius: clamp(24px, 4vw, 40px); padding: clamp(64px, 9vw, 104px) var(--gutter) clamp(40px, 7vw, 80px); text-align: center; }
.cta-band h2 { color: #fff; margin-bottom: var(--s-4); }
.cta-band p { color: rgba(255,255,255,.92); max-width: 56ch; margin-inline: auto; font-size: 1.1rem; }
.cta-band .hero-cta { justify-content: center; margin-top: var(--s-6); margin-bottom: 0; }
.cta-band .btn--primary { background: #fff; color: var(--blue-dark); box-shadow: 0 14px 30px rgba(4,34,56,.22); }
.cta-band .btn--primary:hover { background: #f1f6ff; }
.cta-band .store-badge { background: rgba(255,255,255,.14); box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.32); backdrop-filter: blur(4px); }

/* ============================================================
   Footer
   ============================================================ */
.site-footer { background: var(--navy); color: #aebfcf; padding-block: var(--s-8) var(--s-6); margin-top: var(--section-y); }
.footer-grid { display: grid; grid-template-columns: 1fr; gap: var(--s-7); }
.footer-brand .brand { color: #fff; }
.footer-brand p { font-size: .95rem; max-width: 34ch; margin-top: var(--s-4); }
.footer-cols { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s-6); }
.footer-cols h4 { font-family: var(--font-head); color: #fff; font-size: .82rem; letter-spacing: .12em; text-transform: uppercase; margin-bottom: var(--s-4); }
.footer-cols ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; }
.footer-cols a { font-size: .95rem; color: #aebfcf; transition: color .15s; }
.footer-cols a:hover { color: #fff; }
.footer-bottom { display: flex; flex-wrap: wrap; gap: var(--s-4); justify-content: space-between; align-items: center; margin-top: var(--s-7); padding-top: var(--s-5); border-top: 1px solid rgba(255,255,255,.12); font-size: .88rem; }
.footer-bottom .stores .store-badge { background: rgba(255,255,255,.08); box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.22); }

/* ============================================================
   Section heading block
   ============================================================ */
.shead { max-width: 70ch; }
.shead.center { margin-inline: auto; }
.shead h2 { margin-bottom: var(--s-4); }
.shead p { font-size: clamp(1.02rem, 1.5vw, 1.15rem); }

/* divider sparkle row */
.spark-row { display: flex; align-items: center; justify-content: center; gap: 14px; color: var(--purple); padding-block: var(--s-2); }
.spark-row svg { width: 18px; height: 18px; }
.spark-row svg:nth-child(2) { width: 26px; height: 26px; color: var(--teal); }
.spark-row svg:nth-child(1), .spark-row svg:nth-child(3) { color: var(--sky); opacity: .8; }

/* ============================================================
   Responsive — tablet (>=720) and desktop (>=1000)
   ============================================================ */
@media (max-width: 719px) {
  .scroll-hint { display: block; }
}

@media (min-width: 600px) {
  .lang-grid { grid-template-columns: repeat(3, 1fr); }
  .flow { grid-template-columns: 1fr auto 1fr auto 1fr; }
  .flow-arrow { display: flex; }
  .pair { grid-template-columns: 1fr 1fr; }
}

@media (min-width: 720px) {
  .pillars { grid-template-columns: 1fr 1fr; }
  .footer-cols { grid-template-columns: repeat(4, 1fr); }
}

@media (min-width: 1000px) {
  .nav-toggle { display: none; }
  .hero-grid { grid-template-columns: 1.28fr 0.72fr; gap: clamp(16px, 1.8vw, 32px); }
  .hero-media .shot { width: 140%; }
  .split { grid-template-columns: 1fr 1fr; }
  .split--rev .split-media { order: 0; }
  .lang-grid { grid-template-columns: repeat(4, 1fr); }
  .tcard { flex-basis: calc(50% - var(--s-5) / 2); }
  .footer-grid { grid-template-columns: 1.2fr 2fr; gap: var(--s-9); }
  .pillars { grid-template-columns: repeat(4, 1fr); }
  .pair { grid-template-columns: 1fr 1fr; grid-column: span 2; }
}

@media (min-width: 1240px) {
  .hero-media .shot { width: 150%; }
}

@media (max-width: 999px) {
  .nav-main, .header-right .lang-select, .header-right .login-btn { display: none; }
  .nav-toggle { display: inline-grid; place-items: center; }
  .header-right { margin-left: auto; }
}

@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto !important; transition: none !important; animation: none !important; }
}

/* ==== flashcards.css ==== */
/* ============================================================
   Lingocard — Flashcards page
   Extends speaking-practice.css (shared tokens + components).
   Only NEW components live here.
   ============================================================ */

:root {
  --amber:        #f0a93f;   /* "Hard" rating */
  --amber-soft:   #fcefd7;
  --green:        #2cae7d;   /* "Good" rating */
  --green-soft:   #d8f3e7;
  --grad-srs:     linear-gradient(135deg, #eef4fe 0%, #e9f7f5 100%);
}

/* Screenshot placeholder slots: never let aspect-ratio + min-height drive width past the container */
.shot { width: 100%; }

/* ---- Products dropdown in header ---- */
.has-dropdown { position: relative; }
.has-dropdown > a, .nav-trigger {
  font-family: var(--font-head); font-weight: 700; font-size: .98rem;
  color: var(--navy-2); padding: 9px 14px; border-radius: var(--r-pill);
  transition: background .15s ease, color .15s ease;
  display: inline-flex; align-items: center; gap: 6px;
  background: none; border: none; cursor: pointer;
}
.nav-trigger svg { width: 12px; height: 12px; transition: transform .2s ease; }
.has-dropdown:hover > a, .has-dropdown:hover .nav-trigger { background: var(--bg-soft); color: var(--blue); }
.has-dropdown:hover .nav-trigger svg, .has-dropdown:focus-within .nav-trigger svg { transform: rotate(180deg); }
.dropdown {
  position: absolute; top: calc(100% + 8px); left: 0; z-index: 70;
  background: #fff; border: 1.5px solid var(--line); border-radius: var(--r-lg);
  box-shadow: var(--sh-md); padding: 10px; min-width: 290px;
  display: grid; gap: 2px;
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity .16s ease, transform .16s ease, visibility .16s;
}
.has-dropdown:hover .dropdown, .has-dropdown:focus-within .dropdown { opacity: 1; visibility: visible; transform: translateY(0); }
.dropdown a {
  display: flex; align-items: flex-start; gap: 12px; padding: 11px 13px;
  border-radius: var(--r-md); transition: background .14s ease;
}
.dropdown a:hover { background: var(--bg-soft); }
.dropdown .di {
  width: 38px; height: 38px; border-radius: 11px; flex: none;
  display: grid; place-items: center;
}
.dropdown .di svg { width: 20px; height: 20px; }
.dropdown b { font-family: var(--font-head); font-weight: 800; color: var(--navy); font-size: .96rem; display: block; line-height: 1.2; }
.dropdown span { font-size: .82rem; color: var(--ink-faint); line-height: 1.35; }
.dropdown .badge-soon { font-size: .64rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--purple); background: var(--purple-soft); padding: 2px 7px; border-radius: var(--r-pill); margin-left: auto; align-self: center; }
.mobile-menu .mm-group { font-family: var(--font-head); font-weight: 800; font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-faint); padding: 14px 8px 4px; }
.mobile-menu .mm-sub { padding-left: 22px; }

/* ============================================================
   Flashcard mock component (hero + reused)
   ============================================================ */
.fcard {
  position: relative; background: #fff; border-radius: var(--r-xl);
  border: 1.5px solid var(--line); box-shadow: var(--sh-lg);
  padding: clamp(22px, 3vw, 34px); width: 100%; max-width: 420px;
}
.fcard-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--s-5); }
.fcard-lang { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-head); font-weight: 700; font-size: .82rem; color: var(--ink-faint); }
.fcard-lang .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--teal); }
.fcard-goal { display: inline-flex; align-items: center; gap: 7px; font-family: var(--font-head); font-weight: 800; font-size: .78rem; color: var(--green); background: var(--green-soft); padding: 5px 11px; border-radius: var(--r-pill); }
.fcard-goal svg { width: 13px; height: 13px; }
.fcard-body { text-align: center; padding: var(--s-5) 0 var(--s-6); }
.fcard-word { font-family: var(--font-head); font-weight: 800; color: var(--navy); font-size: clamp(1.9rem, 4vw, 2.5rem); letter-spacing: -0.01em; line-height: 1.1; }
.fcard-phon { font-size: .98rem; color: var(--ink-faint); margin-top: 6px; font-style: italic; }
.fcard-audio {
  margin: var(--s-4) auto 0; width: 52px; height: 52px; border-radius: 50%;
  border: none; background: var(--blue); color: #fff; display: grid; place-items: center;
  box-shadow: var(--sh-blue); cursor: pointer; transition: transform .16s ease, background .16s;
}
.fcard-audio:hover { transform: scale(1.06); background: var(--blue-dark); }
.fcard-audio svg { width: 22px; height: 22px; }
.fcard-audio.is-playing { animation: pulse 1s ease-in-out infinite; }
@keyframes pulse { 0%,100% { box-shadow: var(--sh-blue); } 50% { box-shadow: 0 0 0 10px rgba(59,124,229,.16), var(--sh-blue); } }
.fcard-divider { height: 1px; background: var(--line); margin: 0 0 var(--s-5); }
.fcard-mean { text-align: center; font-size: 1.08rem; color: var(--navy-2); font-weight: 600; margin-bottom: var(--s-5); }
.fcard-rate { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-3); }
.rate-btn {
  font-family: var(--font-head); font-weight: 800; font-size: .92rem;
  border: 1.5px solid transparent; border-radius: var(--r-md); padding: 12px 8px;
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  transition: transform .14s ease, filter .14s ease;
}
.rate-btn .ivl { font-size: .72rem; font-weight: 700; opacity: .8; }
.rate-btn:hover { transform: translateY(-2px); filter: brightness(.98); }
.rate-hard { background: var(--amber-soft); color: #b9791b; }
.rate-good { background: var(--green-soft); color: #1c8a5f; }
.rate-easy { background: var(--sky-soft); color: var(--blue-ink); }

/* hero layout reuse: flashcard sits in hero-media */
.hero-media .fcard { margin-left: auto; margin-right: auto; }

/* floating chips around hero card */
.float-chip {
  position: absolute; z-index: 3; background: #fff; border: 1.5px solid var(--line);
  border-radius: var(--r-pill); padding: 9px 15px; box-shadow: var(--sh-md);
  font-family: var(--font-head); font-weight: 800; font-size: .85rem; color: var(--navy);
  display: inline-flex; align-items: center; gap: 8px;
}
.float-chip svg { width: 16px; height: 16px; }

/* ============================================================
   Forgetting-curve graph (SRS section centerpiece)
   ============================================================ */
.srs-band { background: var(--grad-srs); position: relative; overflow: hidden; }
.graph-card {
  background: #fff; border: 1.5px solid var(--line); border-radius: var(--r-xl);
  box-shadow: var(--sh-md); padding: clamp(22px, 3vw, 36px); margin-top: var(--s-6);
}
.graph-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--s-3); margin-bottom: var(--s-5); }
.graph-head h3 { font-size: 1.2rem; }
.graph-legend { display: flex; flex-wrap: wrap; gap: var(--s-4); }
.graph-legend span { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-head); font-weight: 700; font-size: .85rem; color: var(--navy-2); }
.graph-legend i { width: 22px; height: 4px; border-radius: 2px; flex: none; }
.graph-svg { width: 100%; height: auto; display: block; }
.graph-svg .axis-label { font-family: var(--font-body); font-size: 13px; fill: var(--ink-faint); font-weight: 600; }
.graph-note { font-size: .9rem; color: var(--ink-faint); margin-top: var(--s-4); text-align: center; }

/* SRS step cards (3-step flow) — reuse .flow but allow inline variant */
.srs-steps { display: grid; grid-template-columns: 1fr; gap: var(--s-5); margin-top: var(--s-7); }
.srs-step {
  background: #fff; border: 1.5px solid var(--line); border-radius: var(--r-lg);
  padding: var(--s-6); box-shadow: var(--sh-sm); display: grid; gap: var(--s-3);
}
.srs-step .sn { width: 44px; height: 44px; border-radius: 13px; display: grid; place-items: center; font-family: var(--font-head); font-weight: 800; color: #fff; font-size: 1.15rem; }
.srs-step h3 { font-size: 1.12rem; }
.srs-step p { font-size: .96rem; }

.learn-more {
  display: inline-flex; align-items: center; gap: 9px; margin-top: var(--s-6);
  font-family: var(--font-head); font-weight: 800; font-size: .98rem; color: var(--blue-ink);
  background: #fff; border: 1.5px solid var(--line-strong); border-radius: var(--r-pill);
  padding: 12px 22px; transition: border-color .15s, color .15s, transform .15s;
}
.learn-more:hover { border-color: var(--blue); color: var(--blue); transform: translateY(-2px); }
.learn-more svg { width: 16px; height: 16px; }
.learn-more .badge-soon { font-size: .62rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--purple); background: var(--purple-soft); padding: 2px 8px; border-radius: var(--r-pill); }

/* ============================================================
   Interactive SRS demo widget (optional module)
   ============================================================ */
.demo {
  position: relative; margin-top: var(--s-7);
  border: 1.5px dashed var(--line-strong); border-radius: var(--r-xl);
  background: #fff; padding: clamp(22px, 3vw, 40px);
}
.demo-tag {
  position: absolute; top: -13px; left: 24px; white-space: nowrap;
  font-family: var(--font-head); font-weight: 800; font-size: .72rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--purple); background: var(--purple-soft); padding: 5px 14px; border-radius: var(--r-pill);
}
.demo-head { text-align: center; max-width: 56ch; margin: 0 auto var(--s-6); }
.demo-head h3 { font-size: 1.3rem; margin-bottom: var(--s-2); }
.demo-head p { font-size: .96rem; }
.demo-stage { display: grid; gap: var(--s-5); justify-items: center; }
.demo-progress { display: flex; align-items: center; gap: 10px; font-family: var(--font-head); font-weight: 700; font-size: .85rem; color: var(--ink-faint); }
.demo-progress .pips { display: flex; gap: 6px; }
.demo-progress .pip { width: 9px; height: 9px; border-radius: 50%; background: var(--line-strong); transition: background .2s; }
.demo-progress .pip.done { background: var(--green); }
.demo-progress .pip.active { background: var(--blue); }
.demo .fcard { cursor: default; }
.demo-flip-hint { text-align: center; font-size: .82rem; color: var(--ink-faint); margin-top: var(--s-3); font-weight: 600; }
.demo-feedback {
  min-height: 30px; text-align: center; font-family: var(--font-head); font-weight: 800;
  font-size: .95rem; color: var(--blue-ink);
}
.demo-feedback .ivl { color: var(--green); }
.demo-reset {
  font-family: var(--font-head); font-weight: 800; font-size: .9rem; color: var(--blue);
  background: none; border: none; cursor: pointer; padding: 8px 14px; border-radius: var(--r-pill);
  display: inline-flex; align-items: center; gap: 7px;
}
.demo-reset:hover { background: var(--bg-soft); }
.demo-reset svg { width: 15px; height: 15px; }
.demo-done { text-align: center; display: grid; gap: var(--s-4); justify-items: center; }
.demo-done .big { font-family: var(--font-head); font-weight: 800; font-size: 1.4rem; color: var(--navy); }
.demo-done .em { width: 64px; height: 64px; border-radius: 50%; background: var(--green-soft); color: var(--green); display: grid; place-items: center; }
.demo-done .em svg { width: 32px; height: 32px; }
.flip-btn {
  font-family: var(--font-head); font-weight: 800; font-size: .95rem; white-space: nowrap;
  background: var(--navy); color: #fff; border: none; border-radius: var(--r-pill);
  padding: 12px 28px; cursor: pointer; transition: background .15s, transform .15s;
}
.flip-btn:hover { background: var(--navy-2); transform: translateY(-2px); }

/* ============================================================
   Audio player visual ("Listen like music")
   ============================================================ */
.player {
  background: var(--navy); color: #fff; border-radius: var(--r-xl);
  padding: clamp(24px, 3vw, 36px); box-shadow: var(--sh-lg); width: 100%; max-width: 460px;
}
.player-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: var(--s-5); }
.player-head > div:first-child { flex: 1; min-width: 0; }
.player-deck { font-family: var(--font-head); font-weight: 800; font-size: 1.05rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.player-sub { font-size: .82rem; color: #9fb4c6; }
.offline-badge {
  display: inline-flex; align-items: center; gap: 7px; flex: none; white-space: nowrap;
  font-family: var(--font-head); font-weight: 800; font-size: .74rem; letter-spacing: .04em;
  color: var(--teal); background: rgba(69,200,192,.14); border: 1px solid rgba(69,200,192,.4);
  padding: 5px 12px; border-radius: var(--r-pill);
}
.offline-badge svg { width: 13px; height: 13px; }
.player-now { display: flex; align-items: center; gap: 14px; margin-bottom: var(--s-5); }
.player-now .art { width: 56px; height: 56px; border-radius: 14px; background: var(--grad-mark); display: grid; place-items: center; flex: none; }
.player-now .art svg { width: 26px; height: 26px; color: #fff; }
.player-now .meta b { font-family: var(--font-head); font-size: 1.1rem; display: block; }
.player-now .meta span { font-size: .85rem; color: #9fb4c6; }
.player-bar { height: 5px; border-radius: 3px; background: rgba(255,255,255,.16); margin-bottom: 8px; overflow: hidden; }
.player-bar i { display: block; height: 100%; width: 42%; background: var(--teal); border-radius: 3px; }
.player-time { display: flex; justify-content: space-between; font-size: .76rem; color: #9fb4c6; margin-bottom: var(--s-5); }
.player-ctrl { display: flex; align-items: center; justify-content: center; gap: var(--s-5); }
.player-ctrl button { background: none; border: none; color: #fff; cursor: pointer; display: grid; place-items: center; padding: 6px; border-radius: 50%; }
.player-ctrl button:hover { background: rgba(255,255,255,.1); }
.player-ctrl svg { width: 22px; height: 22px; }
.player-ctrl .play { width: 60px; height: 60px; background: #fff; color: var(--navy); border-radius: 50%; }
.player-ctrl .play:hover { background: #eef4ff; }
.player-ctrl .play svg { width: 26px; height: 26px; }
.player-list { margin-top: var(--s-5); display: grid; gap: 2px; }
.player-list .row { display: flex; align-items: center; gap: 12px; padding: 9px 10px; border-radius: 10px; font-size: .9rem; }
.player-list .row.active { background: rgba(255,255,255,.08); }
.player-list .row .idx { color: #748ba0; font-weight: 700; width: 16px; }
.player-list .row .nm { font-weight: 600; }
.player-list .row.active .nm { color: var(--teal); }
.player-list .row .dur { margin-left: auto; color: #748ba0; font-size: .8rem; }

/* ============================================================
   "Create your way" sub-feature list
   ============================================================ */
.ways { display: grid; grid-template-columns: 1fr; gap: var(--s-5); margin-top: var(--s-6); }
.way {
  background: #fff; border: 1.5px solid var(--line); border-radius: var(--r-lg);
  padding: var(--s-6); box-shadow: var(--sh-sm); display: grid; gap: var(--s-3);
  transition: transform .2s ease, box-shadow .2s ease;
}
.way:hover { transform: translateY(-4px); box-shadow: var(--sh-md); }
.way .wi { width: 48px; height: 48px; border-radius: 13px; display: grid; place-items: center; }
.way .wi svg { width: 24px; height: 24px; }
.way h3 { font-size: 1.08rem; }
.way p { font-size: .95rem; }

/* offline + music two-column tweak */
.player-wrap { display: flex; justify-content: center; }

/* ============================================================
   Inline text link (shared)
   ============================================================ */
.inline-link { color: var(--blue-ink); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1.5px; }
.inline-link:hover { color: var(--blue); }

/* ============================================================
   Contrast pair (calendar vs practice / reminder vs real SRS)
   ============================================================ */
.compare-pair { display: grid; grid-template-columns: 1fr; gap: var(--s-4); }
.cmp-side { border-radius: var(--r-lg); padding: var(--s-6); border: 1.5px solid var(--line); background: #fff; box-shadow: var(--sh-sm); }
.cmp-side-head { display: flex; align-items: center; gap: 10px; font-family: var(--font-head); font-weight: 800; color: var(--navy); font-size: 1.02rem; margin-bottom: var(--s-4); }
.cmp-side-head .x, .cmp-side-head .ok { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; flex: none; }
.cmp-side-head .x svg, .cmp-side-head .ok svg { width: 17px; height: 17px; }
.cmp-bad { border-color: #f0d6da; background: linear-gradient(180deg,#fdf4f5,#fff); }
.cmp-bad .x { background: #fbe2e6; color: #b9485b; }
.cmp-good { border-color: var(--green-soft); background: linear-gradient(180deg,#f1fbf6,#fff); }
.cmp-good .ok { background: var(--green-soft); color: #1c8a5f; }
.cmp-side ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.cmp-side li { position: relative; padding-left: 22px; font-size: .95rem; color: var(--ink-muted); }
.cmp-side li::before { content: ""; position: absolute; left: 4px; top: 9px; width: 7px; height: 7px; border-radius: 50%; }
.cmp-bad li::before { background: #d99aa4; }
.cmp-good li::before { background: var(--green); }

/* card image-association block */
.card-image { display: grid; place-items: center; gap: 8px; padding: var(--s-5) 0 0; color: var(--ink-faint); }
.card-image svg { width: 56px; height: 56px; opacity: .55; }
.card-image span { font-family: "SF Mono", ui-monospace, Menlo, monospace; font-size: .74rem; letter-spacing: .02em; }

/* teacher flow */
.teach-flow { display: grid; gap: var(--s-3); background: #fff; border: 1.5px solid var(--line); border-radius: var(--r-xl); padding: var(--s-6); box-shadow: var(--sh-md); }
.teach-step { display: flex; align-items: center; gap: 14px; }
.teach-step .ti { width: 46px; height: 46px; border-radius: 13px; flex: none; display: grid; place-items: center; }
.teach-step .ti svg { width: 23px; height: 23px; }
.teach-step b { font-family: var(--font-head); color: var(--navy); display: block; font-size: 1rem; line-height: 1.2; }
.teach-step span { font-size: .88rem; color: var(--ink-faint); }
.teach-arrow { display: grid; place-items: center; color: var(--line-strong); }
.teach-arrow svg { width: 22px; height: 22px; }

/* ============================================================
   Clean image frame (full screenshot, no browser chrome)
   ============================================================ */
.img-frame {
  border-radius: var(--r-xl);
  border: 1.5px solid var(--line-strong);
  box-shadow: var(--sh-lg);
  overflow: hidden;
  background: #fff;
}
.img-frame img { width: 100%; height: auto; display: block; }

/* ============================================================
   Phone screenshot frame (portrait app screenshots)
   ============================================================ */
.phone-shot {
  width: 100%; max-width: 320px; margin-inline: auto;
  border-radius: 38px; padding: 10px;
  background: #fff; border: 1.5px solid var(--line-strong);
  box-shadow: var(--sh-lg);
}
.phone-shot img {
  width: 100%; height: auto; display: block;
  border-radius: 28px; border: 1px solid var(--line);
}

@media (min-width: 700px) {
  .compare-pair { grid-template-columns: 1fr 1fr; }
}

/* ============================================================
   Responsive
   ============================================================ */
@media (min-width: 600px) {
  .srs-steps { grid-template-columns: repeat(3, 1fr); }
  .ways { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1000px) {
  .hero .hero-grid { grid-template-columns: 1.05fr 0.95fr; }
  .hero .hero-media { margin-right: 0; }
  .float-chip.fc-1 { top: 6%; left: -16px; }
  .float-chip.fc-2 { bottom: -16px; right: -34px; }
  /* give the frequency-dictionaries screenshot ~45% more width,
     bleeding it toward the left page edge */
  .split--media-lg { grid-template-columns: 1.5fr 1fr; }
  .split--media-lg .split-media { margin-left: calc(var(--gutter) * -1); }
}
@media (max-width: 999px) {
  .has-dropdown { display: none; }
  .float-chip { display: none; }
  /* mobile: show text first, image below, for reversed splits */
  .split--rev .split-copy { order: -1; }
  .split--rev .split-media { order: 0; }
  /* keep hero sparkles above the H1 instead of over the heading text
     (!important overrides the inline positioning on the spans) */
  .hero .hspark-a { top: 6px !important; left: auto !important; right: 27% !important; }
  .hero .hspark-b { top: 3px !important; left: auto !important; right: 13% !important; }
}

/* ==== spaced-repetition.css ==== */
/* ============================================================
   Lingocard — Spaced Repetition Learning System page
   Extends speaking-practice.css + flashcards.css (shared tokens
   & components). Only NEW signature visuals live here.
   ============================================================ */

/* ============================================================
   1 · Practice-based vs fixed-calendar diagram (signature)
   ============================================================ */
.sched {
  display: grid; grid-template-columns: 1fr; gap: var(--s-5);
  margin-top: var(--s-7);
}
.sched-col {
  border-radius: var(--r-xl); border: 1.5px solid var(--line);
  background: #fff; padding: clamp(22px, 3vw, 32px); box-shadow: var(--sh-sm);
  position: relative; overflow: hidden;
}
.sched-col.is-bad { background: linear-gradient(180deg, #fdf3f3, #fff); border-color: #f1d9dc; }
.sched-col.is-good { background: linear-gradient(180deg, #eef7f2, #fff); border-color: #cfeadd; }
.sched-tag {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-head); font-weight: 800; font-size: .76rem;
  letter-spacing: .08em; text-transform: uppercase; padding: 6px 13px;
  border-radius: var(--r-pill); margin-bottom: var(--s-5);
}
.sched-tag svg { width: 14px; height: 14px; }
.sched-tag.bad { background: #fbe3e6; color: #b9485b; }
.sched-tag.good { background: var(--green-soft); color: #1c8a5f; }
.sched-col h3 { font-size: 1.18rem; margin-bottom: var(--s-2); }
.sched-col > p { font-size: .95rem; margin-bottom: var(--s-5); }

/* timeline track */
.tl { display: grid; gap: var(--s-4); }
.tl-row { display: grid; grid-template-columns: 70px 1fr; align-items: center; gap: var(--s-4); }
.tl-day { font-family: var(--font-head); font-weight: 800; font-size: .82rem; color: var(--ink-faint); text-align: right; }
.tl-track { position: relative; height: 40px; border-radius: var(--r-pill); background: var(--bg-soft); border: 1px solid var(--line); display: flex; align-items: center; padding: 0 8px; gap: 6px; }
.tl-card {
  height: 26px; min-width: 26px; padding: 0 9px; border-radius: 8px;
  display: inline-flex; align-items: center; justify-content: center; gap: 5px;
  font-family: var(--font-head); font-weight: 800; font-size: .72rem; color: #fff;
}
.tl-card.c-blue { background: var(--blue); }
.tl-card.c-teal { background: var(--teal); }
.tl-card.c-purple { background: var(--purple); }
.tl-card.c-sky { background: var(--sky); }
.tl-card.c-amber { background: var(--amber); }
/* "missed" day in the broken calendar */
.tl-row.missed .tl-track {
  background: repeating-linear-gradient(135deg, #fbe9eb 0 9px, #f7dfe2 9px 18px);
  border-color: #f1d0d4;
}
.tl-missed-label {
  font-family: var(--font-head); font-weight: 800; font-size: .76rem; color: #b9485b;
  display: inline-flex; align-items: center; gap: 7px;
}
.tl-missed-label svg { width: 15px; height: 15px; }
/* the overdue pileup */
.tl-pile { background: #fbe3e6 !important; border-color: #f1c4ca !important; flex-wrap: wrap; height: auto; min-height: 40px; padding: 7px 8px; }
.tl-pile .tl-card { background: #b9485b; }
.pile-note { font-family: var(--font-head); font-weight: 800; font-size: .78rem; color: #b9485b; margin-top: var(--s-3); display: inline-flex; align-items: center; gap: 7px; }

/* practice-based: a clean ordered queue */
.queue { display: grid; gap: var(--s-3); }
.queue-row {
  display: flex; align-items: center; gap: var(--s-4);
  background: var(--bg-soft); border: 1px solid var(--line); border-radius: var(--r-md);
  padding: 11px 14px;
}
.queue-pos { width: 26px; height: 26px; border-radius: 8px; background: #fff; border: 1.5px solid var(--line-strong); display: grid; place-items: center; font-family: var(--font-head); font-weight: 800; font-size: .8rem; color: var(--navy-2); flex: none; }
.queue-word { font-family: var(--font-head); font-weight: 800; font-size: .95rem; color: var(--navy); }
.queue-meta { margin-left: auto; font-family: var(--font-head); font-weight: 700; font-size: .76rem; color: var(--ink-faint); display: inline-flex; align-items: center; gap: 6px; }
.queue-bar { width: 54px; height: 6px; border-radius: 3px; background: var(--line); overflow: hidden; flex: none; }
.queue-bar i { display: block; height: 100%; border-radius: 3px; }
.sched-foot {
  margin-top: var(--s-5); padding-top: var(--s-5); border-top: 1px dashed var(--line-strong);
  font-family: var(--font-head); font-weight: 800; font-size: .9rem; display: inline-flex; align-items: flex-start; gap: 9px;
}
.sched-foot svg { width: 18px; height: 18px; flex: none; margin-top: 1px; }
.sched-col.is-bad .sched-foot { color: #b9485b; }
.sched-col.is-good .sched-foot { color: #1c8a5f; }

/* ============================================================
   2 · "Real SR, not reminders" contrast block (signature)
   ============================================================ */
.versus { display: grid; grid-template-columns: 1fr; gap: var(--s-5); margin-top: var(--s-7); align-items: stretch; }
.versus-card {
  border-radius: var(--r-xl); padding: clamp(24px, 3vw, 34px);
  position: relative; overflow: hidden;
}
.versus-card.reminder { background: #fff; border: 1.5px solid var(--line); }
.versus-card.real { background: var(--navy); color: #cfe0ee; border: 1.5px solid var(--navy); }
.versus-icon { width: 52px; height: 52px; border-radius: 15px; display: grid; place-items: center; margin-bottom: var(--s-5); }
.versus-icon svg { width: 26px; height: 26px; }
.reminder .versus-icon { background: var(--bg-soft); color: var(--ink-faint); }
.real .versus-icon { background: rgba(69,200,192,.18); color: var(--teal); }
.versus-card h3 { font-size: 1.18rem; margin-bottom: var(--s-3); }
.real h3 { color: #fff; }
.versus-card .vkicker { font-family: var(--font-head); font-weight: 800; font-size: .74rem; letter-spacing: .1em; text-transform: uppercase; margin-bottom: var(--s-3); }
.reminder .vkicker { color: var(--ink-faint); }
.real .vkicker { color: var(--teal); }
.versus-list { list-style: none; margin: var(--s-4) 0 0; padding: 0; display: grid; gap: var(--s-3); }
.versus-list li { display: grid; grid-template-columns: auto 1fr; gap: 11px; align-items: start; font-size: .95rem; line-height: 1.5; }
.versus-list .vi { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; flex: none; margin-top: 1px; }
.versus-list .vi svg { width: 13px; height: 13px; }
.reminder .vi { background: #fbe3e6; color: #b9485b; }
.real .vi { background: rgba(69,200,192,.2); color: var(--teal); }

/* ============================================================
   3 · Teacher -> students flow (educator section)
   ============================================================ */
.teacher-flow {
  display: grid; grid-template-columns: 1fr; gap: var(--s-5); align-items: center;
  margin-top: var(--s-6);
}
.tf-node {
  background: #fff; border: 1.5px solid var(--line); border-radius: var(--r-xl);
  box-shadow: var(--sh-sm); padding: var(--s-6); text-align: center; display: grid; gap: var(--s-3); justify-items: center;
}
.tf-ico { width: 56px; height: 56px; border-radius: 16px; display: grid; place-items: center; }
.tf-ico svg { width: 28px; height: 28px; }
.tf-node h4 { font-family: var(--font-head); font-weight: 800; color: var(--navy); font-size: 1.05rem; }
.tf-node p { font-size: .9rem; margin: 0; }
.tf-arrow { display: grid; place-items: center; color: var(--purple); transform: rotate(90deg); }
.tf-arrow svg { width: 30px; height: 30px; }
.tf-students { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; width: 100%; }
.tf-student { background: var(--bg-soft); border: 1px solid var(--line); border-radius: var(--r-md); padding: 12px 6px; display: grid; gap: 7px; justify-items: center; }
.tf-student .ava { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-family: var(--font-head); font-weight: 800; font-size: .9rem; }
.tf-student span { font-size: .72rem; font-weight: 700; color: var(--ink-faint); font-family: var(--font-head); }

/* ============================================================
   4 · Multi-device sync visual
   ============================================================ */
.devices { display: flex; align-items: flex-end; justify-content: center; gap: clamp(14px, 3vw, 30px); margin-top: var(--s-5); flex-wrap: wrap; }
.device { background: #fff; border: 1.5px solid var(--line-strong); box-shadow: var(--sh-md); position: relative; }
.device .scr { background: var(--grad-srs); display: grid; place-items: center; overflow: hidden; }
.device .scr svg { width: 40%; height: 40%; color: var(--blue); opacity: .8; }
.device.laptop { width: 220px; border-radius: 12px; padding: 12px 12px 0; }
.device.laptop .scr { height: 130px; border-radius: 6px; }
.device.laptop::after { content: ""; display: block; height: 10px; background: var(--line); border-radius: 0 0 12px 12px; margin: 8px -12px 0; }
.device.phone { width: 90px; border-radius: 16px; padding: 9px; }
.device.phone .scr { height: 150px; border-radius: 9px; }
.device.tablet { width: 140px; border-radius: 14px; padding: 10px; }
.device.tablet .scr { height: 150px; border-radius: 7px; }
.sync-ring {
  display: inline-flex; align-items: center; gap: 9px; margin-top: var(--s-6);
  font-family: var(--font-head); font-weight: 800; font-size: .85rem; color: var(--blue-ink);
  background: var(--sky-soft); padding: 9px 18px; border-radius: var(--r-pill);
}
.sync-ring svg { width: 16px; height: 16px; }

/* ============================================================
   Demo: rating-result feedback (extends .demo from flashcards.css)
   ============================================================ */
.demo-result {
  min-height: 64px; display: flex; align-items: center; justify-content: center;
  text-align: center; width: 100%; max-width: 440px;
}
.demo-result .pill {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-head); font-weight: 800; font-size: .96rem;
  padding: 13px 20px; border-radius: var(--r-lg); line-height: 1.35;
  animation: resultIn .28s ease both;
}
.demo-result .pill svg { width: 18px; height: 18px; flex: none; }
.demo-result .pill.r-hard { background: var(--amber-soft); color: #b9791b; }
.demo-result .pill.r-good { background: var(--green-soft); color: #1c8a5f; }
.demo-result .pill.r-studied { background: var(--purple-soft); color: var(--purple); }
@keyframes resultIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.demo-card-image {
  width: 100%; height: 96px; border-radius: var(--r-md); margin-bottom: var(--s-4);
  background: repeating-linear-gradient(135deg,#eef4fe 0 12px,#e6eefb 12px 24px);
  border: 1px solid var(--line); display: grid; place-items: center;
}
.demo-card-image svg { width: 32px; height: 32px; color: var(--sky); }

/* grid/flex children must be allowed to shrink below their min-content
   width, or the audio player forces horizontal overflow on phones */
.split > * { min-width: 0; }
.player { max-width: 100%; }
.player-deck { min-width: 0; }

/* ============================================================
   Flip card (interactive demo) + phrase sizing
   ============================================================ */
.fcard-word--phrase { font-size: clamp(1.3rem, 2.6vw, 1.7rem) !important; line-height: 1.25; text-wrap: balance; }

#heroCard [data-hero-word], #heroCard [data-hero-mean] { transition: opacity .18s ease; }
#heroCard.is-swapping [data-hero-word], #heroCard.is-swapping [data-hero-mean] { opacity: 0; }

.flip-card { width: 100%; max-width: 420px; margin-inline: auto; perspective: 1500px; cursor: pointer; }
.flip-inner { position: relative; width: 100%; min-height: 340px; transform-style: preserve-3d; transition: transform .6s cubic-bezier(.4,.15,.2,1); }
.flip-inner.flipped { transform: rotateY(180deg); }
.flip-inner.no-anim { transition: none !important; }
.flip-face { position: absolute; inset: 0; -webkit-backface-visibility: hidden; backface-visibility: hidden; margin: 0 !important; max-width: none !important; display: flex; flex-direction: column; }
.flip-face .fcard-body { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.flip-back { transform: rotateY(180deg); }
.demo .flip-card .fcard { box-shadow: var(--sh-md); }

/* ============================================================
   Card image association (real photo)
   ============================================================ */
.card-photo { padding: 0 !important; height: 132px; border-radius: var(--r-md); overflow: hidden; border: 1px solid var(--line); margin-bottom: var(--s-4); }
.card-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ============================================================
   Demo end-of-session report
   ============================================================ */
.demo-report { display: grid; gap: var(--s-3); width: 100%; max-width: 560px; margin: var(--s-5) auto 0; text-align: left; }
.report-row { display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: start; background: #fff; border: 1.5px solid var(--line); border-radius: var(--r-md); padding: 13px 15px; }
.report-row p { margin: 0; font-size: .92rem; color: var(--ink-muted); line-height: 1.5; }
.report-tag { font-family: var(--font-head); font-weight: 800; font-size: .74rem; letter-spacing: .04em; text-transform: uppercase; padding: 4px 11px; border-radius: var(--r-pill); white-space: nowrap; height: fit-content; }
.report-row.r-hard { border-color: var(--amber-soft); } .report-row.r-hard .report-tag { background: var(--amber-soft); color: #b9791b; }
.report-row.r-good { border-color: var(--green-soft); } .report-row.r-good .report-tag { background: var(--green-soft); color: #1c8a5f; }
.report-row.r-studied { border-color: var(--purple-soft); } .report-row.r-studied .report-tag { background: var(--purple-soft); color: var(--purple); }
.report-next { display: flex; align-items: center; gap: 9px; justify-content: center; text-align: center; font-family: var(--font-head); font-weight: 700; font-size: .92rem; color: var(--navy-2); margin: var(--s-2) 0 0; }
.report-next svg { width: 18px; height: 18px; color: var(--blue); flex: none; }

.demo-result { min-height: 56px; }

/* ============================================================
   Responsive
   ============================================================ */
@media (min-width: 760px) {
  .sched { grid-template-columns: 1fr 1fr; }
  .versus { grid-template-columns: 1fr 1fr; }
  .teacher-flow { grid-template-columns: 1fr auto 1fr; }
  .tf-arrow { transform: rotate(0deg); }
}
@media (min-width: 1000px) {
  .player { max-width: 460px; }
}

/* ============================================================
   Flip-card button: icon to the LEFT of the label (not stacked).
   Overrides the global `svg { display:block }` that was pushing
   the inline icon onto its own line above the text.
   ============================================================ */
.flip-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.flip-btn svg { display: inline-block; margin: 0 !important; vertical-align: middle; flex: none; }

/* ============================================================
   Method block: text -> settings image -> "it gets better" callout.
   Mobile stacks in that exact order; desktop puts the image on the
   right spanning both text rows.
   ============================================================ */
.method-detail { display: grid; grid-template-columns: 1fr; gap: var(--s-6); align-items: start; }
.method-detail .md-media { display: flex; justify-content: center; }
.method-detail .phone-shot { max-width: 270px; }
@media (min-width: 1000px) {
  .method-detail {
    grid-template-columns: 1.1fr 0.9fr;
    grid-template-areas: "text  media" "callout media";
    column-gap: clamp(32px, 5vw, 64px);
  }
  .method-detail .md-text    { grid-area: text; margin-bottom: 0; }
  .method-detail .md-callout { grid-area: callout; }
  .method-detail .md-media   { grid-area: media; align-self: center; }
  .method-detail .phone-shot { max-width: 300px; }
}

/* ============================================================
   Hero decorations on mobile: a single square pinned bottom-left
   with a small gap, instead of everything clustering top-right.
   ============================================================ */
@media (max-width: 768px) {
  /* hide both, then re-show only the second (bottom-left) one */
  .hero .deco-card { display: none; }
  .hero .deco-card + .deco-card {
    display: block;
    top: auto !important; right: auto !important;
    bottom: 16px !important; left: 16px !important;
    width: 40px !important; height: 40px !important;
  }
}

/* ==== mobile-app.css ==== */
/* ============================================================
   Lingocard — Mobile App landing page
   Extends speaking-practice.css + flashcards.css + spaced-repetition.css
   (shared tokens + components). Only NEW components live here:
   real device frames, the "one app instead of three" visual, the
   voice-to-card + social-match app screens, the teacher->student
   ecosystem graphic, and the device family.
   ============================================================ */

/* Brand mark: real Lingocard logo is 27x34 (portrait) — match the cap-height of "L" */
.brand .mark { width: 17px; height: 21px; }
.footer-brand .brand .mark { width: 17px; height: 21px; }

:root {
  --amber:        #f0a93f;
  --amber-soft:   #fcefd7;
  --green:        #2cae7d;
  --green-soft:   #d8f3e7;
  --grad-srs:     linear-gradient(135deg, #eef4fe 0%, #e9f7f5 100%);
}

/* ============================================================
   DEVICE FRAMES — real bezels, not flat rectangles
   ============================================================ */
.device-phone {
  position: relative; flex: none;
  width: var(--pw, 270px);
  aspect-ratio: 390 / 844;
  background: linear-gradient(150deg, #15181f, #2a2f3a);
  border-radius: 48px;
  padding: 7px;
  box-shadow: var(--sh-lg), inset 0 0 0 1.5px rgba(255,255,255,.05);
}
.device-phone .screen {
  position: relative; width: 100%; height: 100%;
  background: #fff; border-radius: 42px; overflow: hidden;
  display: flex; flex-direction: column;
}
/* iPhone dynamic island */
.device-phone.is-ios .island {
  position: absolute; top: 10px; left: 50%; transform: translateX(-50%);
  width: 80px; height: 23px; background: #0b0d12; border-radius: 14px; z-index: 8;
}
/* Android punch-hole + squarer corners */
.device-phone.is-android { border-radius: 42px; padding: 6px; background: linear-gradient(150deg, #1a1d24, #31373f); }
.device-phone.is-android .screen { border-radius: 36px; }
.device-phone.is-android .punch {
  position: absolute; top: 12px; left: 50%; transform: translateX(-50%);
  width: 11px; height: 11px; border-radius: 50%; background: #0b0d12; z-index: 8;
}
/* side buttons */
.device-phone::before, .device-phone::after {
  content: ""; position: absolute; left: -2px; width: 3px; border-radius: 3px;
  background: linear-gradient(#3a3f4a, #23272f);
}
.device-phone::before { top: 120px; height: 34px; }
.device-phone::after { top: 168px; height: 56px; }
.device-phone.is-android::before { top: 150px; height: 44px; }
.device-phone.is-android::after { top: 206px; height: 70px; }

/* status bar inside every screen */
.statusbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 13px 22px 4px; font-family: var(--font-head); font-weight: 800;
  font-size: .72rem; color: var(--navy); flex: none;
}
.statusbar .sb-icons { display: inline-flex; align-items: center; gap: 5px; }
.statusbar .sb-icons svg { width: 15px; height: 13px; display: block; }
.device-phone.is-android .statusbar { padding-top: 11px; }

/* generic app screen body */
.app-screen { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.app-top {
  display: flex; align-items: center; gap: 10px; padding: 8px 16px 10px;
  border-bottom: 1px solid var(--line); flex: none;
}
.app-top .app-back { width: 30px; height: 30px; border-radius: 50%; background: var(--bg-soft); display: grid; place-items: center; color: var(--navy); flex: none; }
.app-top .app-back svg { width: 16px; height: 16px; }
.app-top .app-title { font-family: var(--font-head); font-weight: 800; color: var(--navy); font-size: .95rem; }
.app-top .app-actions { margin-left: auto; display: inline-flex; gap: 4px; color: var(--ink-faint); }
.app-top .app-actions svg { width: 18px; height: 18px; }

/* ---- Flashcard review screen (hero, iOS) ---- */
.screen-review { flex: 1; display: flex; flex-direction: column; padding: 16px; gap: 12px; background: linear-gradient(180deg, #f6faff, #fff 40%); }
.rev-meta { display: flex; align-items: center; justify-content: space-between; }
.rev-lang { display: inline-flex; align-items: center; gap: 7px; font-family: var(--font-head); font-weight: 800; font-size: .78rem; color: var(--ink-faint); }
.rev-lang .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--teal); }
.rev-due { font-family: var(--font-head); font-weight: 800; font-size: .68rem; color: var(--green); background: var(--green-soft); padding: 4px 10px; border-radius: var(--r-pill); }
.rev-card {
  flex: 1; background: #fff; border: 1.5px solid var(--line); border-radius: 22px;
  box-shadow: var(--sh-md); display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 18px; gap: 12px;
}
.rev-word { font-family: var(--font-head); font-weight: 800; color: var(--navy); font-size: 1.5rem; line-height: 1.15; letter-spacing: -0.01em; }
.rev-phon { font-size: .82rem; color: var(--ink-faint); font-style: italic; }
.rev-audio { width: 46px; height: 46px; border-radius: 50%; border: none; background: var(--blue); color: #fff; display: grid; place-items: center; box-shadow: var(--sh-blue); }
.rev-audio svg { width: 20px; height: 20px; }
.rev-rate { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; flex: none; }
.rev-rate button { font-family: var(--font-head); font-weight: 800; font-size: .78rem; border: none; border-radius: 13px; padding: 12px 4px; display: flex; flex-direction: column; gap: 2px; }
.rev-rate .ivl { font-size: .62rem; font-weight: 700; opacity: .82; }
.rev-rate .r-hard { background: var(--amber-soft); color: #b9791b; }
.rev-rate .r-good { background: var(--green-soft); color: #1c8a5f; }
.rev-rate .r-easy { background: var(--sky-soft); color: var(--blue-ink); }

/* ---- Chat screen (hero, Android) ---- */
.screen-chat { flex: 1; display: flex; flex-direction: column; background: #f6faff; }
.chat-head { display: flex; align-items: center; gap: 10px; padding: 9px 14px; background: #fff; border-bottom: 1px solid var(--line); flex: none; }
.chat-head .ava { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-family: var(--font-head); font-weight: 800; font-size: .85rem; flex: none; position: relative; }
.chat-head .ava::after { content: ""; position: absolute; right: -1px; bottom: -1px; width: 10px; height: 10px; border-radius: 50%; background: #00c853; border: 2px solid #fff; }
.chat-head b { font-family: var(--font-head); font-weight: 800; color: var(--navy); font-size: .9rem; display: block; line-height: 1.15; }
.chat-head span { font-size: .68rem; color: var(--green); font-weight: 700; }
.chat-head .ch-call { margin-left: auto; display: inline-flex; gap: 6px; color: var(--blue); }
.chat-head .ch-call svg { width: 19px; height: 19px; }
.chat-body { flex: 1; min-height: 0; padding: 14px 12px; display: flex; flex-direction: column; gap: 9px; justify-content: flex-end; }
.bubble { max-width: 78%; padding: 9px 13px; border-radius: 16px; font-size: .8rem; line-height: 1.4; color: var(--navy); }
.bubble.them { align-self: flex-start; background: #fff; border: 1px solid var(--line); border-bottom-left-radius: 5px; }
.bubble.me { align-self: flex-end; background: var(--blue); color: #fff; border-bottom-right-radius: 5px; }
.bubble small { display: block; font-size: .62rem; opacity: .7; margin-top: 3px; }
.chat-save { align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-head); font-weight: 800; font-size: .68rem; color: var(--blue-ink); background: var(--sky-soft); padding: 6px 11px; border-radius: var(--r-pill); }
.chat-save svg { width: 13px; height: 13px; }
.chat-input { display: flex; align-items: center; gap: 8px; padding: 9px 12px; background: #fff; border-top: 1px solid var(--line); flex: none; }
.chat-input .field { flex: 1; background: var(--bg-soft); border-radius: var(--r-pill); padding: 8px 14px; font-size: .76rem; color: var(--ink-faint); }
.chat-input .send { width: 32px; height: 32px; border-radius: 50%; background: var(--blue); color: #fff; display: grid; place-items: center; flex: none; }
.chat-input .send svg { width: 15px; height: 15px; }

/* ---- Voice-to-card screen ---- */
.screen-voice { flex: 1; display: flex; flex-direction: column; padding: 18px 16px; gap: 14px; background: linear-gradient(180deg, #f6faff, #fff 45%); align-items: center; text-align: center; }
.voice-q { font-family: var(--font-head); font-weight: 800; color: var(--navy-2); font-size: .82rem; margin-top: 4px; }
.voice-word { font-family: var(--font-head); font-weight: 800; color: var(--navy); font-size: 1.5rem; line-height: 1.15; }
.voice-trans { font-size: .85rem; color: var(--ink-muted); }
.voice-wave { display: flex; align-items: center; justify-content: center; gap: 4px; height: 46px; margin-top: auto; }
.voice-wave i { width: 4px; border-radius: 2px; background: var(--blue); animation: vwave 1s ease-in-out infinite; }
@keyframes vwave { 0%,100% { height: 10px; } 50% { height: 40px; } }
.voice-mic {
  width: 74px; height: 74px; border-radius: 50%; border: none; background: var(--blue); color: #fff;
  display: grid; place-items: center; margin: 0 auto; position: relative;
  box-shadow: 0 0 0 0 rgba(59,124,229,.4); animation: micpulse 1.8s ease-out infinite;
}
@keyframes micpulse { 0% { box-shadow: 0 0 0 0 rgba(59,124,229,.4); } 70% { box-shadow: 0 0 0 18px rgba(59,124,229,0); } 100% { box-shadow: 0 0 0 0 rgba(59,124,229,0); } }
.voice-mic svg { width: 30px; height: 30px; }
.voice-hint { font-family: var(--font-head); font-weight: 800; font-size: .72rem; color: var(--ink-faint); }
.voice-chip { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-head); font-weight: 800; font-size: .7rem; color: #1c8a5f; background: var(--green-soft); padding: 5px 12px; border-radius: var(--r-pill); }
.voice-chip svg { width: 13px; height: 13px; }

/* ---- Social match screen ---- */
.screen-match { flex: 1; display: flex; flex-direction: column; padding: 14px 14px 16px; gap: 11px; background: #f6faff; overflow: hidden; }
.match-h { font-family: var(--font-head); font-weight: 800; color: var(--navy); font-size: .92rem; }
.match-h span { display: block; font-size: .7rem; color: var(--ink-faint); font-weight: 700; margin-top: 1px; }
.match-card { background: #fff; border: 1.5px solid var(--line); border-radius: 16px; padding: 12px; box-shadow: var(--sh-xs); display: flex; align-items: center; gap: 11px; }
.match-card .ava { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-family: var(--font-head); font-weight: 800; font-size: 1rem; flex: none; position: relative; }
.match-card .ava.on::after { content: ""; position: absolute; right: -1px; bottom: -1px; width: 11px; height: 11px; border-radius: 50%; background: #00c853; border: 2px solid #fff; }
.match-card .mc-name { font-family: var(--font-head); font-weight: 800; color: var(--navy); font-size: .85rem; }
.match-card .mc-meta { font-size: .68rem; color: var(--ink-faint); }
.match-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 5px; }
.match-tags span { font-size: .6rem; font-weight: 800; font-family: var(--font-head); color: var(--blue-ink); background: var(--sky-soft); padding: 2px 7px; border-radius: var(--r-pill); }
.match-card .mc-act { margin-left: auto; display: grid; gap: 6px; flex: none; }
.match-card .mc-act button { width: 30px; height: 30px; border-radius: 50%; border: none; display: grid; place-items: center; }
.mc-act .b-msg { background: var(--sky-soft); color: var(--blue); }
.mc-act .b-vid { background: var(--blue); color: #fff; }
.mc-act button svg { width: 15px; height: 15px; }

/* generic screenshot inside a frame */
.device-phone .screen > img.shot-fill { width: 100%; height: 100%; object-fit: cover; object-position: top center; }

/* hero device cluster */
.hero-devices { position: relative; display: flex; justify-content: center; align-items: flex-end; gap: 0; padding: 10px 0; }
.hero-devices .device-phone { width: clamp(182px, 48vw, 304px); }
.hero-devices .device-phone.is-ios { z-index: 3; transform: rotate(-4deg) translateY(-8px); }
.hero-devices .device-phone.is-android { z-index: 2; margin-left: clamp(-44px, -9vw, -52px); transform: rotate(4deg) translateY(8px); }

/* ============================================================
   ONE APP INSTEAD OF THREE  (signature visual)
   ============================================================ */
.oneapp { margin-top: var(--s-7); }
.oneapp-stage {
  display: grid; grid-template-columns: 1fr; gap: var(--s-6); align-items: center;
}
.three-apps { display: flex; align-items: center; justify-content: center; gap: 14px; flex-wrap: wrap; }
.app-tile {
  width: 96px; text-align: center; opacity: .92;
  transition: transform .2s ease;
}
.app-tile .tile-ico {
  width: 64px; height: 64px; border-radius: 18px; margin: 0 auto 8px; display: grid; place-items: center;
  background: #fff; border: 1.5px solid var(--line-strong); box-shadow: var(--sh-sm); color: var(--ink-muted);
}
.app-tile:nth-child(1) .tile-ico { color: var(--blue); }
.app-tile:nth-child(2) .tile-ico { color: var(--teal); }
.app-tile:nth-child(3) .tile-ico { color: var(--purple); }
.app-tile .tile-ico svg { width: 30px; height: 30px; }
.app-tile b { display: block; font-family: var(--font-head); font-weight: 800; font-size: .82rem; color: var(--navy); }
.app-tile span { font-size: .72rem; color: var(--ink-muted); }
.oneapp-merge { display: grid; place-items: center; color: var(--purple); }
.oneapp-merge svg { width: 40px; height: 40px; transform: rotate(90deg); }
.oneapp-result {
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 12px;
  background: var(--grad-feature); border: 1.5px solid var(--purple-soft); border-radius: var(--r-xl);
  padding: var(--s-6); box-shadow: var(--sh-md);
}
.oneapp-result .lc-ico {
  width: 84px; height: 84px; border-radius: 24px; display: grid; place-items: center;
  background: #fff; border: 1.5px solid var(--line); box-shadow: var(--sh-md);
}
.oneapp-result .lc-ico svg { width: 40px; height: auto; }
.oneapp-result b { font-family: var(--font-head); font-weight: 800; font-size: 1.3rem; color: var(--navy); }
.oneapp-result .feats { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.oneapp-result .feats span {
  font-family: var(--font-head); font-weight: 800; font-size: .76rem; color: var(--navy-2);
  background: #fff; border: 1.5px solid var(--line); padding: 6px 13px; border-radius: var(--r-pill);
  display: inline-flex; align-items: center; gap: 6px;
}
.oneapp-result .feats span::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--teal); }
.oneapp-result .feats span:nth-child(3n)::before { background: var(--purple); }
.oneapp-result .feats span:nth-child(3n+1)::before { background: var(--blue); }

/* founder trust line */
.founder-note {
  display: flex; align-items: flex-start; gap: 14px; margin-top: var(--s-7);
  background: #fff; border: 1.5px solid var(--line); border-radius: var(--r-lg);
  padding: var(--s-5) var(--s-6); box-shadow: var(--sh-sm); max-width: 760px; margin-inline: auto;
}
.founder-note .fn-ico { width: 46px; height: 46px; border-radius: 13px; background: var(--purple-soft); color: var(--purple); display: grid; place-items: center; flex: none; }
.founder-note .fn-ico svg { width: 24px; height: 24px; }
.founder-note p { font-size: .96rem; margin: 0; color: var(--ink-muted); }
.founder-note strong { color: var(--navy); }

/* ============================================================
   ECOSYSTEM: teacher (web) -> student (mobile)
   ============================================================ */
.ecosystem {
  display: grid; grid-template-columns: 1fr; gap: var(--s-5); align-items: center;
  margin-top: var(--s-7); background: var(--grad-feature);
  border: 1.5px solid var(--line); border-radius: var(--r-xl); padding: clamp(24px, 4vw, 48px);
}
.eco-side { display: flex; flex-direction: column; align-items: center; gap: var(--s-4); text-align: center; }
.eco-badge {
  font-family: var(--font-head); font-weight: 800; font-size: .72rem; letter-spacing: .1em; text-transform: uppercase;
  padding: 6px 14px; border-radius: var(--r-pill);
}
.eco-badge.web { color: var(--blue-ink); background: var(--sky-soft); }
.eco-badge.mob { color: #1c8a5f; background: var(--green-soft); }
.eco-side h3 { font-size: 1.1rem; }
.eco-side p { font-size: .92rem; max-width: 30ch; }
/* laptop frame */
.eco-laptop { width: 100%; max-width: 340px; }
.eco-laptop .lid { background: linear-gradient(150deg,#15181f,#2a2f3a); border-radius: 14px 14px 0 0; padding: 9px 9px 0; }
.eco-laptop .lid .scr { background: #fff; border-radius: 6px; overflow: hidden; aspect-ratio: 16/10; border: 1px solid #2a2f3a; }
.eco-laptop .base { height: 12px; background: linear-gradient(#cfd6df,#aeb7c2); border-radius: 0 0 12px 12px; margin: 0 -10px; position: relative; }
.eco-laptop .base::after { content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 70px; height: 5px; border-radius: 0 0 7px 7px; background: #95a0ad; }
/* teacher deck-builder mini UI */
.eco-web-ui { padding: 9px; display: flex; flex-direction: column; gap: 6px; height: 100%; background: linear-gradient(180deg,#f6faff,#fff); }
.eco-web-ui .ew-head { display: flex; align-items: center; gap: 6px; }
.eco-web-ui .ew-head .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--line-strong); }
.eco-web-ui .ew-head b { margin-left: auto; font-family: var(--font-head); font-weight: 800; font-size: .58rem; color: var(--ink-faint); }
.eco-web-ui .ew-title { font-family: var(--font-head); font-weight: 800; font-size: .72rem; color: var(--navy); }
.eco-web-ui .ew-row { display: flex; align-items: center; gap: 6px; background: #fff; border: 1px solid var(--line); border-radius: 7px; padding: 5px 8px; font-size: .6rem; color: var(--navy-2); font-weight: 700; }
.eco-web-ui .ew-row .chk { width: 12px; height: 12px; border-radius: 4px; background: var(--green-soft); color: #1c8a5f; display: grid; place-items: center; flex: none; }
.eco-web-ui .ew-row .chk svg { width: 9px; height: 9px; }
.eco-web-ui .ew-row .pl { margin-left: auto; color: var(--ink-faint); }
.eco-web-ui .ew-send { margin-top: auto; font-family: var(--font-head); font-weight: 800; font-size: .62rem; color: #fff; background: var(--blue); border-radius: var(--r-pill); padding: 6px; text-align: center; }
/* the connecting arrow */
.eco-arrow { display: grid; place-items: center; gap: 6px; color: var(--purple); }
.eco-arrow .ea-line { display: grid; place-items: center; transform: rotate(90deg); }
.eco-arrow svg { width: 30px; height: 30px; }
.eco-arrow .ea-label { font-family: var(--font-head); font-weight: 800; font-size: .68rem; color: var(--purple); text-align: center; letter-spacing: .04em; text-transform: uppercase; }
/* student receives a deck on mobile */
.eco-phone { width: 158px; }
.screen-lesson { flex: 1; display: flex; flex-direction: column; padding: 12px; gap: 8px; background: linear-gradient(180deg,#f6faff,#fff 50%); }
.lesson-banner { background: var(--purple-soft); color: var(--purple); border-radius: 12px; padding: 9px 11px; font-family: var(--font-head); font-weight: 800; font-size: .66rem; display: flex; align-items: center; gap: 7px; }
.lesson-banner svg { width: 15px; height: 15px; flex: none; }
.lesson-row { display: flex; align-items: center; gap: 8px; background: #fff; border: 1px solid var(--line); border-radius: 9px; padding: 7px 9px; }
.lesson-row .lw { font-family: var(--font-head); font-weight: 800; font-size: .68rem; color: var(--navy); }
.lesson-row .lt { font-size: .58rem; color: var(--ink-faint); }
.lesson-row .lbar { margin-left: auto; width: 34px; height: 5px; border-radius: 3px; background: var(--line); overflow: hidden; flex: none; }
.lesson-row .lbar i { display: block; height: 100%; border-radius: 3px; background: var(--green); }

/* ============================================================
   DEVICE FAMILY (free on iPhone/Android/web)
   ============================================================ */
.family { display: flex; align-items: flex-end; justify-content: center; gap: clamp(16px, 3vw, 40px); margin-top: var(--s-7); flex-wrap: wrap; }
.family .fam-tablet { width: clamp(230px, 36vw, 320px); }
/* split-media phones are sized via inline --pw; cap to viewport on small screens */
.split-media .device-phone { width: min(var(--pw, 270px), 84vw); }
.family .fam-phone { width: clamp(120px, 18vw, 158px); }
.family .fam-phone .device-phone { padding: 5px; border-radius: 34px; }
.family .fam-phone .device-phone .screen { border-radius: 29px; }
.tablet-frame { background: linear-gradient(150deg,#15181f,#2a2f3a); border-radius: 22px; padding: 8px; box-shadow: var(--sh-lg); }
.tablet-frame .scr { background: #fff; border-radius: 14px; overflow: hidden; aspect-ratio: 1672 / 941; }
.tablet-frame .scr img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sync-pill {
  display: inline-flex; align-items: center; gap: 9px; margin: var(--s-6) auto 0;
  font-family: var(--font-head); font-weight: 800; font-size: .88rem; color: var(--blue-ink);
  background: var(--sky-soft); padding: 10px 20px; border-radius: var(--r-pill);
}
.sync-pill svg { width: 17px; height: 17px; }

/* ============================================================
   App-store ratings strip (hero trust)
   ============================================================ */
.rating-strip { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-5); margin-top: var(--s-5); }
.rating-item { display: inline-flex; align-items: center; gap: 9px; }
.rating-item .rstars { display: inline-flex; gap: 2px; color: var(--gold); }
.rating-item .rstars svg { width: 15px; height: 15px; }
.rating-item b { font-family: var(--font-head); font-weight: 800; color: var(--navy); font-size: .92rem; }
.rating-item span { font-size: .8rem; color: var(--ink-faint); }

/* caption under screenshots / mockups (keyword-rich) */
.shot-cap {
  text-align: center; font-size: .86rem; color: var(--ink-faint); font-weight: 600;
  margin-top: var(--s-4); max-width: 52ch; margin-inline: auto;
}

/* feature split card image */
.audio-card-wrap { display: flex; justify-content: center; }

/* coming-soon inline tag for links */
.soon-tag { font-size: .6rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--purple); background: var(--purple-soft); padding: 2px 7px; border-radius: var(--r-pill); margin-left: 5px; vertical-align: middle; }

/* ============================================================
   Responsive
   ============================================================ */
@media (min-width: 600px) {
  .three-apps { gap: 20px; }
}
@media (min-width: 760px) {
  .oneapp-stage { grid-template-columns: 1fr auto 1fr; }
  .oneapp-merge svg { transform: rotate(0deg); }
  .ecosystem { grid-template-columns: 1fr auto 1fr; }
  .eco-arrow .ea-line { transform: rotate(0deg); }
}
@media (min-width: 1000px) {
  .hero-grid.hero-app { grid-template-columns: 1.04fr 0.96fr; }
  .hero-devices { transform: scale(1.04); transform-origin: center; }
}
@media (max-width: 999px) {
  .has-dropdown { display: none; }
}

/* ==== web-app.css ==== */
/* ============================================================
   Lingocard — Web App landing page
   Extends speaking-practice.css + flashcards.css + spaced-repetition.css
   + mobile-app.css (reuses .device-phone, .ecosystem, device family).
   NEW here: realistic browser-window + laptop frames, the Flashcards
   Manager text-to-deck signature visual, the School Hub curriculum
   builder, the laptop+phone sync mockup, and browser/OS coverage.
   ============================================================ */

:root {
  --green:        #2cae7d;
  --green-soft:   #d8f3e7;
  --amber-soft:   #fcefd7;
  --chrome-bar:   #e9eef5;
  --chrome-bar-2: #dde6f1;
}

/* ============================================================
   BROWSER WINDOW FRAME (Chrome-style) — the page's lead visual
   ============================================================ */
.browser {
  width: 100%; background: #fff; border-radius: 14px; overflow: hidden;
  box-shadow: var(--sh-lg); border: 1px solid var(--line-strong);
}
.browser-bar {
  display: flex; align-items: center; gap: 12px; padding: 11px 14px;
  background: linear-gradient(180deg, var(--chrome-bar), var(--chrome-bar-2));
  border-bottom: 1px solid var(--line-strong);
}
.browser-dots { display: inline-flex; gap: 7px; flex: none; }
.browser-dots i { width: 12px; height: 12px; border-radius: 50%; display: block; }
.browser-dots i:nth-child(1) { background: #ff5f57; }
.browser-dots i:nth-child(2) { background: #febc2e; }
.browser-dots i:nth-child(3) { background: #28c840; }
.browser-url {
  flex: 1; display: flex; align-items: center; gap: 9px; min-width: 0;
  background: #fff; border-radius: var(--r-pill); padding: 7px 14px;
  font-family: var(--font-body); font-size: .82rem; color: var(--ink-muted);
  box-shadow: inset 0 0 0 1px var(--line);
}
.browser-url .lock { width: 13px; height: 13px; flex: none; color: var(--green); }
.browser-url .u { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.browser-url .u b { color: var(--navy-2); font-weight: 700; }
.browser-actions { display: inline-flex; gap: 14px; flex: none; color: var(--ink-faint); }
.browser-actions svg { width: 16px; height: 16px; display: block; }
.browser-tabs {
  display: flex; align-items: flex-end; gap: 4px; padding: 7px 12px 0;
  background: var(--chrome-bar-2);
}
.browser-tab {
  display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px;
  background: #fff; border-radius: 9px 9px 0 0; font-family: var(--font-head);
  font-weight: 700; font-size: .76rem; color: var(--navy-2); max-width: 200px;
}
.browser-tab .fav { width: 14px; height: 14px; border-radius: 4px; background: var(--grad-mark); flex: none; }
.browser-tab.dim { background: var(--chrome-bar); color: var(--ink-faint); font-weight: 600; }
.browser-tab.dim .fav { background: var(--line-strong); }
.browser-screen { display: block; width: 100%; background: #fff; }
.browser-screen img { width: 100%; height: auto; display: block; }

/* a browser whose body we compose ourselves (not a screenshot) */
.browser-body { background: #fff; }

/* ============================================================
   LAPTOP FRAME (big, standalone) — hero + sync
   ============================================================ */
.laptop { width: 100%; max-width: 720px; margin-inline: auto; position: relative; }
.laptop .lid {
  background: linear-gradient(155deg, #1b1f27, #2c323d);
  border-radius: 18px 18px 0 0; padding: 12px 12px 0;
  box-shadow: var(--sh-lg);
}
.laptop .lid .glass {
  background: #fff; border-radius: 8px; overflow: hidden;
  border: 1px solid #11141a;
}
.laptop .lid .glass .glass-shot { display: block; width: 100%; height: auto; }
.laptop .base {
  height: 16px; border-radius: 0 0 16px 16px; margin: 0 -3.5%;
  background: linear-gradient(#cfd6df, #aab4c0);
  position: relative; box-shadow: 0 10px 18px rgba(4,34,56,.16);
}
.laptop .base::after {
  content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: 96px; height: 7px; border-radius: 0 0 9px 9px; background: #93a0ad;
}

/* ============================================================
   NO-DOWNLOAD badge
   ============================================================ */
.nd-badge {
  display: inline-flex; align-items: center; gap: 10px;
  background: var(--green-soft); color: #1c8a5f; border-radius: var(--r-pill);
  padding: 9px 18px 9px 12px; font-family: var(--font-head); font-weight: 800; font-size: .92rem;
}
.nd-badge .nd-ico { width: 30px; height: 30px; border-radius: 50%; background: #fff; display: grid; place-items: center; flex: none; }
.nd-badge .nd-ico svg { width: 17px; height: 17px; }

/* generic feature tick list */
.ticks { list-style: none; margin: var(--s-5) 0 0; padding: 0; display: grid; gap: var(--s-3); }
.ticks li { display: flex; align-items: flex-start; gap: 12px; font-size: 1rem; color: var(--ink-muted); }
.ticks li .tk { width: 24px; height: 24px; border-radius: 50%; background: var(--sky-soft); color: var(--blue); display: grid; place-items: center; flex: none; margin-top: 1px; }
.ticks li .tk svg { width: 14px; height: 14px; }
.ticks li b { color: var(--navy); font-weight: 700; }

/* ============================================================
   FLASHCARDS MANAGER — the signature text-to-deck visual
   ============================================================ */
.manager { margin-top: var(--s-7); }
.mgr-flow {
  display: grid; grid-template-columns: 1fr; gap: var(--s-5); align-items: stretch;
}
.mgr-panel {
  background: #fff; border: 1.5px solid var(--line); border-radius: var(--r-lg);
  box-shadow: var(--sh-md); overflow: hidden; display: flex; flex-direction: column;
}
.mgr-head {
  display: flex; align-items: center; gap: 10px; padding: 13px 18px;
  border-bottom: 1px solid var(--line); background: var(--bg-soft);
}
.mgr-head .mh-ico { width: 26px; height: 26px; border-radius: 7px; background: var(--grad-mark); display: grid; place-items: center; flex: none; }
.mgr-head .mh-ico svg { width: 15px; height: 15px; color: #fff; }
.mgr-head b { font-family: var(--font-head); font-weight: 800; color: var(--navy); font-size: .92rem; }
.mgr-head .mh-step { margin-left: auto; font-family: var(--font-head); font-weight: 800; font-size: .68rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-faint); }
.mgr-paste { padding: 18px; font-family: var(--font-body); font-size: .9rem; line-height: 1.7; color: var(--navy-2); flex: 1; }
.mgr-paste .pasted { background: linear-gradient(transparent 62%, var(--sky-soft) 0); }
.mgr-btnrow { padding: 0 18px 18px; }
.mgr-bigbtn {
  width: 100%; display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  background: var(--blue); color: #fff; border: none; border-radius: var(--r-pill);
  font-family: var(--font-head); font-weight: 800; font-size: 1rem; padding: 14px;
  box-shadow: var(--sh-blue); cursor: pointer; transition: background .15s;
}
.mgr-bigbtn:hover { background: var(--blue-dark); }
.mgr-bigbtn svg { width: 19px; height: 19px; }

/* the resulting deck grid */
.mgr-deck { padding: 16px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; flex: 1; align-content: start; }
.mgr-cardlet {
  background: #fff; border: 1.5px solid var(--line); border-radius: 12px; padding: 11px 12px;
  box-shadow: var(--sh-xs); display: flex; flex-direction: column; gap: 3px; position: relative;
}
/* entrance is a transform-only nudge — never gates visibility (opacity stays 1) */
@media (prefers-reduced-motion: no-preference) {
  .mgr-deck.replay .mgr-cardlet { animation: cardIn .45s ease both; }
}
@keyframes cardIn { from { transform: translateY(10px); } to { transform: none; } }
.mgr-cardlet .w { font-family: var(--font-head); font-weight: 800; color: var(--navy); font-size: .9rem; }
.mgr-cardlet .t { font-size: .76rem; color: var(--ink-faint); }
.mgr-cardlet .snd { position: absolute; top: 10px; right: 10px; width: 20px; height: 20px; color: var(--blue); }
.mgr-deck-foot { grid-column: 1 / -1; display: flex; align-items: center; gap: 9px; padding-top: 4px; font-family: var(--font-head); font-weight: 800; font-size: .8rem; color: #1c8a5f; }
.mgr-deck-foot .chk { width: 20px; height: 20px; border-radius: 50%; background: var(--green-soft); display: grid; place-items: center; flex: none; }
.mgr-deck-foot .chk svg { width: 12px; height: 12px; }

/* the arrow between paste + deck */
.mgr-arrow { display: grid; place-items: center; color: var(--purple); }
.mgr-arrow .ring { width: 54px; height: 54px; border-radius: 50%; background: var(--purple-soft); display: grid; place-items: center; box-shadow: var(--sh-sm); }
.mgr-arrow svg { width: 26px; height: 26px; transform: rotate(90deg); }
.mgr-arrow .ml { font-family: var(--font-head); font-weight: 800; font-size: .7rem; text-transform: uppercase; letter-spacing: .07em; margin-top: 8px; color: var(--purple); }

.mgr-syncline {
  display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: var(--s-6);
  font-family: var(--font-head); font-weight: 800; font-size: .9rem; color: var(--blue-ink);
  background: var(--sky-soft); padding: 11px 20px; border-radius: var(--r-pill); width: fit-content; margin-inline: auto;
}
.mgr-syncline svg { width: 17px; height: 17px; }

/* ============================================================
   SCHOOL HUB — curriculum builder UI
   ============================================================ */
.hub { margin-top: var(--s-7); display: grid; grid-template-columns: 1fr; gap: var(--s-6); align-items: center; }
.hub-ui {
  background: #fff; border: 1.5px solid var(--line); border-radius: var(--r-lg); overflow: hidden;
  box-shadow: var(--sh-md);
}
.hub-top { display: flex; align-items: center; gap: 11px; padding: 14px 18px; border-bottom: 1px solid var(--line); }
.hub-top .crest { width: 34px; height: 34px; border-radius: 9px; background: var(--grad-mark); display: grid; place-items: center; flex: none; }
.hub-top .crest svg { width: 19px; height: 19px; color: #fff; }
.hub-top .ht-name { font-family: var(--font-head); font-weight: 800; color: var(--navy); font-size: .98rem; line-height: 1.1; }
.hub-top .ht-sub { font-size: .74rem; color: var(--ink-faint); }
.hub-top .ht-promote { margin-left: auto; display: inline-flex; align-items: center; gap: 7px; font-family: var(--font-head); font-weight: 800; font-size: .72rem; color: #fff; background: var(--purple); padding: 7px 13px; border-radius: var(--r-pill); }
.hub-top .ht-promote svg { width: 13px; height: 13px; }
.hub-cols { display: grid; grid-template-columns: 1fr; }
.hub-curric { padding: 16px 18px; }
.hub-curric .hc-h { font-family: var(--font-head); font-weight: 800; font-size: .76rem; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: 11px; }
.hub-level { border: 1.5px solid var(--line); border-radius: 12px; padding: 11px 13px; margin-bottom: 9px; }
.hub-level .lv-top { display: flex; align-items: center; gap: 9px; }
.hub-level .lv-badge { font-family: var(--font-head); font-weight: 800; font-size: .68rem; padding: 3px 9px; border-radius: var(--r-pill); }
.hub-level .lv-name { font-family: var(--font-head); font-weight: 800; color: var(--navy); font-size: .86rem; }
.hub-level .lv-count { margin-left: auto; font-size: .7rem; color: var(--ink-faint); font-weight: 700; }
.hub-lessons { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 9px; }
.hub-lessons span { font-size: .68rem; font-weight: 700; color: var(--navy-2); background: var(--bg-soft); border: 1px solid var(--line); padding: 4px 10px; border-radius: var(--r-pill); }
.hub-lessons .add { color: var(--blue); background: var(--sky-soft); border-color: transparent; }
.hub-invite { border-top: 1px solid var(--line); padding: 14px 18px; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.hub-invite .hi-avas { display: inline-flex; }
.hub-invite .hi-avas span { width: 30px; height: 30px; border-radius: 50%; border: 2px solid #fff; display: grid; place-items: center; color: #fff; font-family: var(--font-head); font-weight: 800; font-size: .72rem; margin-left: -9px; }
.hub-invite .hi-avas span:first-child { margin-left: 0; }
.hub-invite .hi-label { font-size: .8rem; color: var(--ink-muted); font-weight: 600; }
.hub-invite .hi-label b { color: var(--navy); }
.hub-invite .hi-btn { margin-left: auto; display: inline-flex; align-items: center; gap: 7px; font-family: var(--font-head); font-weight: 800; font-size: .78rem; color: var(--blue); background: var(--sky-soft); padding: 8px 14px; border-radius: var(--r-pill); }
.hub-invite .hi-btn svg { width: 14px; height: 14px; }

/* ============================================================
   BROWSER / OS COVERAGE chips
   ============================================================ */
.coverage { display: flex; flex-wrap: wrap; gap: var(--s-3); justify-content: center; margin-top: var(--s-6); }
.cov-chip {
  display: inline-flex; align-items: center; gap: 10px; background: #fff; border: 1.5px solid var(--line);
  border-radius: var(--r-pill); padding: 9px 18px 9px 13px; font-family: var(--font-head); font-weight: 800;
  font-size: .9rem; color: var(--navy-2); box-shadow: var(--sh-xs);
}
.cov-chip svg { width: 20px; height: 20px; flex: none; }
.pay-line { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px; margin-top: var(--s-6); }
.pay-pill { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-head); font-weight: 800; font-size: .82rem; color: var(--ink-muted); background: var(--bg-soft); border: 1px solid var(--line); padding: 8px 15px; border-radius: var(--r-pill); }
.pay-pill svg { width: 17px; height: 17px; color: var(--blue); }

/* caption under framed visuals */
.frame-cap { text-align: center; font-size: .86rem; color: var(--ink-faint); font-weight: 600; margin-top: var(--s-4); max-width: 56ch; margin-inline: auto; }

/* sync mockup: laptop overlapped by a phone */
.sync-stage { position: relative; max-width: 760px; margin: var(--s-7) auto 0; }
.sync-stage .sync-phone {
  position: absolute; right: -6px; bottom: -22px; width: clamp(108px, 17vw, 158px); z-index: 4;
}
.sync-stage .sync-phone .device-phone { width: 100%; padding: 5px; border-radius: 30px; }
.sync-stage .sync-phone .device-phone .screen { border-radius: 26px; }
/* hide the side-button slivers at this small scale - they'd land at the wrong spot */
.sync-stage .sync-phone .device-phone::before,
.sync-stage .sync-phone .device-phone::after { display: none; }

.soon-tag { font-size: .58rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--purple); background: var(--purple-soft); padding: 2px 7px; border-radius: var(--r-pill); margin-left: 5px; vertical-align: middle; }

/* ============================================================
   Responsive
   ============================================================ */
@media (min-width: 760px) {
  .mgr-flow { grid-template-columns: 1fr auto 1fr; }
  .mgr-arrow svg { transform: rotate(0deg); }
  .hub { grid-template-columns: 1.15fr 0.85fr; }
}
@media (min-width: 1000px) {
  .hero-grid.hero-web { grid-template-columns: 1.24fr 0.76fr; gap: clamp(20px, 3vw, 48px); align-items: center; }
  /* push the laptop to the right edge so the copy column gets full width */
  .hero-web .hero-media { justify-self: end; }
  .hero-web .laptop { margin-right: 0; transform: scale(1.06); transform-origin: right center; }
  /* two review cards with a full gap of slack on the right so the right
     card's shadow is never clipped by the scroll container (read as a trim) */
  .carousel-track .tcard { flex-basis: calc(50% - var(--s-5)); }
}
/* Large desktop / 27" — the shared .wrap caps at 1200px, which leaves the
   laptop looking small. Widen just the hero, hold the title column at a fixed
   width (so the headline keeps its measure), and give the extra room to a
   ~30%-larger laptop. It grows from its right edge, so the corner sparkle
   keeps its 45-degree angle. */
@media (min-width: 1500px) {
  .hero .wrap { max-width: 1340px; }
  .hero-grid.hero-web { grid-template-columns: minmax(0, 660px) 1fr; gap: 56px; }
}
/* laptop glass clips the browser, so the browser must not add its own
   rounded corners/border (that left dark triangles in the corners) */
.laptop .browser { border-radius: 0; border: none; box-shadow: none; }
.laptop .glass { background: #fff; }

/* reviews: 2-up cards must land flush with room for their shadow, never half-trimmed */
.carousel-track { scroll-padding-left: 0; padding-left: 2px; padding-right: 2px; }
.tcard { scroll-snap-align: start; }
@media (max-width: 999px) {
  .has-dropdown { display: none; }
}
/* Lower sparkle anchored to the laptop's bottom-right corner, sitting
   diagonally (~45deg) off it — the equal right/bottom offset makes the
   45-degree line. Small accent, consistent on desktop and tablet. */
.laptop .hspark-corner {
  position: absolute; top: auto; left: auto;
  right: -44px; bottom: -44px; width: 15px; height: 15px; color: #9b8bea; z-index: 1;
}
@media (max-width: 999px) {
  /* tablet/stacked: pull the spark in closer to the corner, same 45-degree line */
  .laptop .hspark-corner { right: -26px; bottom: -26px; }
}
@media (max-width: 619px) {
  /* true mobile: tighter still so it stays in the hero, clear of stacked content */
  .laptop .hspark-corner { right: -18px; bottom: -18px; }
}

/* ==== language-teaching.css ==== */
/* ============================================================
   Lingocard — Language Teaching (Services) page
   Extends speaking-practice.css + flashcards.css + spaced-repetition.css
   + mobile-app.css + web-app.css.
   Reuses: .browser / .laptop (web-app), .device-phone / .ecosystem /
   .screen-lesson (mobile-app), .cmp / .faq / .carousel / .lang-grid /
   .cta-band (shared). NEW here: the teacher dashboard, lesson builder
   with a fill-the-gap exercise, the privacy graphic, the real-time
   monitoring dashboard, the Teacher-plan value block, and the AI grid.
   ============================================================ */

:root {
  --teach-tint:   #f1f5ff;        /* soft teacher-workspace blue */
  --grad-teach:   linear-gradient(135deg, #eef3ff 0%, #f5eeff 100%);
  --grad-value:   linear-gradient(135deg, #2a4a7f 0%, #3f6fd0 55%, #6f82d1 100%);
  --danger:       #d44040;
  --danger-soft:  #fbe6e6;
}

/* services eyebrow accent (teacher pages lean purple) */
.eyebrow.svc { color: var(--purple); }

/* dark CTA band: the secondary "See pricing" needs a white outline so it
   reads as a button on the gradient (base .btn--ghost is navy-on-white) */
.cta-band .btn--ghost { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.55); color: #fff; }
.cta-band .btn--ghost:hover { background: rgba(255,255,255,.2); }

/* Hero laptop: cap the screen to a realistic ~16:10 so it doesn't look too
   tall; the dashboard fills it and crops naturally at the bottom edge. */
.hero-web .laptop .glass { aspect-ratio: 16 / 10; overflow: hidden; }
.hero-web .laptop .glass .browser { height: 100%; display: flex; flex-direction: column; }
.hero-web .laptop .glass .browser .tdash { flex: 1; min-height: 0; }

/* ============================================================
   TEACHER DASHBOARD  (hero + reused in monitoring)
   A browser-framed app chrome: left rail + main panel.
   ============================================================ */
.tdash { display: flex; min-height: 360px; background: #fff; }
.tdash-rail {
  width: 184px; flex: none; background: var(--navy); color: #fff;
  padding: 16px 12px; display: flex; flex-direction: column; gap: 4px;
}
.tdash-rail .tr-brand { display: flex; align-items: center; gap: 8px; padding: 4px 8px 14px; font-family: var(--font-head); font-weight: 800; font-size: .92rem; }
.tdash-rail .tr-brand .mk { width: 15px; height: 19px; flex: none; }
.tdash-rail .tr-item {
  display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 9px;
  font-family: var(--font-head); font-weight: 700; font-size: .8rem; color: rgba(255,255,255,.72);
}
.tdash-rail .tr-item svg { width: 16px; height: 16px; flex: none; }
.tdash-rail .tr-item.on { background: rgba(255,255,255,.14); color: #fff; }
.tdash-rail .tr-spacer { flex: 1; }
.tdash-rail .tr-help { display: flex; align-items: center; gap: 9px; padding: 10px; border-radius: 9px; background: rgba(255,255,255,.08); font-size: .72rem; font-weight: 700; color: rgba(255,255,255,.85); }
.tdash-rail .tr-help svg { width: 15px; height: 15px; flex: none; color: var(--skyblue, #74D9E6); }

.tdash-main { flex: 1; min-width: 0; padding: 18px 20px; background: var(--bg-soft); display: flex; flex-direction: column; gap: 14px; }
.tdash-head { display: flex; align-items: center; gap: 12px; }
.tdash-head h4 { font-family: var(--font-head); font-weight: 800; color: var(--navy); font-size: 1.02rem; margin: 0; }
.tdash-head .td-sub { font-size: .74rem; color: var(--ink-faint); font-weight: 600; }
.tdash-head .td-cta { margin-left: auto; display: inline-flex; align-items: center; gap: 7px; font-family: var(--font-head); font-weight: 800; font-size: .74rem; color: #fff; background: var(--blue); padding: 8px 14px; border-radius: var(--r-pill); }
.tdash-head .td-cta svg { width: 13px; height: 13px; }

/* stat cards row */
.td-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.td-stat { background: #fff; border: 1.5px solid var(--line); border-radius: 12px; padding: 12px 13px; box-shadow: var(--sh-xs); }
.td-stat .ts-label { font-size: .66rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-faint); }
.td-stat .ts-val { font-family: var(--font-head); font-weight: 800; color: var(--navy); font-size: 1.4rem; line-height: 1.1; margin-top: 3px; }
.td-stat .ts-val span { font-size: .8rem; color: var(--green); font-weight: 800; }
.td-stat .ts-bar { height: 5px; border-radius: 3px; background: var(--line); margin-top: 8px; overflow: hidden; }
.td-stat .ts-bar i { display: block; height: 100%; border-radius: 3px; background: var(--blue); }

/* student monitor table */
.td-table { background: #fff; border: 1.5px solid var(--line); border-radius: 12px; overflow: hidden; box-shadow: var(--sh-xs); }
.td-trow { display: grid; grid-template-columns: 1.6fr 1fr 1fr auto; align-items: center; gap: 10px; padding: 10px 14px; border-bottom: 1px solid var(--line); }
.td-trow:last-child { border-bottom: none; }
.td-trow.head { background: var(--bg-soft); }
.td-trow.head span { font-size: .62rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-faint); }
.td-stud { display: flex; align-items: center; gap: 9px; min-width: 0; }
.td-stud .ava { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-family: var(--font-head); font-weight: 800; font-size: .72rem; flex: none; }
.td-stud b { font-family: var(--font-head); font-weight: 700; color: var(--navy); font-size: .82rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.td-mem { display: flex; align-items: center; gap: 8px; }
.td-mem .mbar { flex: 1; height: 6px; border-radius: 3px; background: var(--line); overflow: hidden; min-width: 42px; }
.td-mem .mbar i { display: block; height: 100%; border-radius: 3px; }
.td-mem .mpct { font-family: var(--font-head); font-weight: 800; font-size: .74rem; color: var(--navy-2); width: 34px; text-align: right; }
.td-score { font-family: var(--font-head); font-weight: 800; font-size: .8rem; }
.td-flag { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; flex: none; }
.td-flag svg { width: 13px; height: 13px; }
.td-flag.ok { background: var(--green-soft); color: #1c8a5f; }
.td-flag.warn { background: var(--amber-soft); color: #b9791b; }

/* legend under the dashboard */
.td-legend { display: flex; flex-wrap: wrap; gap: 16px; justify-content: center; margin-top: var(--s-5); }
.td-legend span { display: inline-flex; align-items: center; gap: 7px; font-size: .82rem; color: var(--ink-muted); font-weight: 600; }
.td-legend .sw { width: 12px; height: 12px; border-radius: 3px; flex: none; }

/* ============================================================
   LESSON BUILDER  (text -> flashcards + fill-the-gap)
   ============================================================ */
.builder { margin-top: var(--s-6); display: grid; grid-template-columns: 1fr; gap: var(--s-4); }
.build-panel { background: #fff; border: 1.5px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--sh-md); overflow: hidden; }
.build-head { display: flex; align-items: center; gap: 9px; padding: 12px 16px; border-bottom: 1px solid var(--line); background: var(--bg-soft); }
.build-head .bh-ico { width: 26px; height: 26px; border-radius: 7px; background: var(--grad-mark); display: grid; place-items: center; flex: none; }
.build-head .bh-ico svg { width: 15px; height: 15px; color: #fff; }
.build-head b { font-family: var(--font-head); font-weight: 800; color: var(--navy); font-size: .9rem; }
.build-head .bh-tag { margin-left: auto; font-family: var(--font-head); font-weight: 800; font-size: .64rem; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-faint); }
.build-body { padding: 16px; }
.build-source { font-family: var(--font-body); font-size: .92rem; line-height: 1.7; color: var(--navy-2); }
.build-source mark { background: var(--sky-soft); color: var(--blue-ink); border-radius: 4px; padding: 0 3px; font-weight: 700; }
.build-tools { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.build-tools .bt { display: inline-flex; align-items: center; gap: 7px; font-family: var(--font-head); font-weight: 800; font-size: .74rem; padding: 8px 13px; border-radius: var(--r-pill); border: 1.5px solid var(--line); color: var(--navy-2); background: #fff; }
.build-tools .bt svg { width: 14px; height: 14px; color: var(--blue); }
.build-tools .bt.go { background: var(--blue); border-color: var(--blue); color: #fff; box-shadow: var(--sh-blue); }
.build-tools .bt.go svg { color: #fff; }

/* generated cards mini-grid */
.build-out { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.build-cardlet { border: 1.5px solid var(--line); border-radius: 11px; padding: 10px 12px; display: flex; flex-direction: column; gap: 2px; position: relative; }
.build-cardlet .w { font-family: var(--font-head); font-weight: 800; color: var(--navy); font-size: .86rem; }
.build-cardlet .t { font-size: .72rem; color: var(--ink-faint); }
.build-cardlet .snd { position: absolute; top: 9px; right: 9px; width: 18px; height: 18px; color: var(--blue); }

/* fill-the-gap exercise */
.fillgap { border: 1.5px solid var(--line); border-radius: 13px; padding: 14px 15px; background: var(--bg-soft); }
.fillgap .fg-q { font-family: var(--font-body); font-size: .95rem; color: var(--navy); line-height: 1.6; }
.fillgap .fg-blank { display: inline-block; min-width: 76px; border-bottom: 2.5px solid var(--blue); margin: 0 3px; text-align: center; font-family: var(--font-head); font-weight: 800; color: var(--blue); }
.fillgap .fg-opts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 13px; }
.fillgap .fg-opt { font-family: var(--font-head); font-weight: 800; font-size: .78rem; padding: 8px 14px; border-radius: var(--r-pill); border: 1.5px solid var(--line-strong); background: #fff; color: var(--navy-2); }
.fillgap .fg-opt.correct { background: var(--green-soft); border-color: transparent; color: #1c8a5f; }
.fillgap .fg-opt.correct::after { content: ""; }

/* reuse-across-groups chips */
.reuse-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; justify-content: center; margin-top: var(--s-5); }
.reuse-lesson { display: inline-flex; align-items: center; gap: 9px; background: #fff; border: 1.5px solid var(--line-strong); border-radius: 13px; padding: 11px 16px; box-shadow: var(--sh-sm); font-family: var(--font-head); font-weight: 800; color: var(--navy); font-size: .9rem; }
.reuse-lesson .rl-ico { width: 30px; height: 30px; border-radius: 8px; background: var(--purple-soft); color: var(--purple); display: grid; place-items: center; flex: none; }
.reuse-lesson .rl-ico svg { width: 17px; height: 17px; }
.reuse-fan { display: grid; place-items: center; color: var(--purple); }
.reuse-fan svg { width: 30px; height: 30px; }
.reuse-groups { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.reuse-groups .rg { display: inline-flex; align-items: center; gap: 7px; background: var(--sky-soft); color: var(--blue-ink); border-radius: var(--r-pill); padding: 7px 13px; font-family: var(--font-head); font-weight: 800; font-size: .76rem; }
.reuse-groups .rg svg { width: 13px; height: 13px; }

/* ============================================================
   PRIVACY GRAPHIC  (signature, visually distinct)
   ============================================================ */
.privacy { margin-top: var(--s-6); display: grid; grid-template-columns: 1fr; gap: var(--s-5); align-items: stretch; }
.priv-card { border-radius: var(--r-xl); padding: clamp(22px, 3vw, 32px); position: relative; overflow: hidden; }
/* locked = Lingocard */
.priv-card.locked { background: var(--grad-teach); border: 1.5px solid var(--purple-soft); }
.priv-card.open { background: #fff; border: 1.5px dashed var(--line-strong); }
.priv-card .pc-tag { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-head); font-weight: 800; font-size: .74rem; padding: 6px 13px; border-radius: var(--r-pill); margin-bottom: var(--s-4); }
.priv-card.locked .pc-tag { background: #fff; color: var(--purple); box-shadow: var(--sh-xs); }
.priv-card.open .pc-tag { background: var(--danger-soft); color: var(--danger); }
.priv-card .pc-tag svg { width: 14px; height: 14px; }
.priv-card h3 { font-size: 1.12rem; margin: 0 0 6px; }
.priv-card p { font-size: .92rem; color: var(--ink-muted); margin: 0; }

/* the vault: a lesson stack inside a shield */
.priv-vault { display: flex; align-items: center; gap: 16px; margin: var(--s-5) 0 0; }
.priv-shield { width: 66px; height: 66px; border-radius: 18px; background: var(--purple); display: grid; place-items: center; flex: none; box-shadow: var(--sh-md); position: relative; }
.priv-shield svg { width: 34px; height: 34px; color: #fff; }
.priv-stack { display: grid; gap: 7px; flex: 1; }
.priv-stack .pl { display: flex; align-items: center; gap: 9px; background: #fff; border: 1.5px solid var(--line); border-radius: 9px; padding: 8px 11px; font-family: var(--font-head); font-weight: 700; color: var(--navy); font-size: .8rem; }
.priv-stack .pl .lk { margin-left: auto; color: var(--purple); display: inline-flex; }
.priv-stack .pl .lk svg { width: 14px; height: 14px; }

/* the leak: struck-through share/export actions */
.priv-leak { display: grid; gap: 9px; margin: var(--s-5) 0 0; }
.priv-leak .la { display: flex; align-items: center; gap: 10px; border: 1.5px solid var(--line); border-radius: 9px; padding: 9px 12px; font-family: var(--font-head); font-weight: 700; color: var(--ink-faint); font-size: .82rem; position: relative; }
.priv-leak .la .ic { width: 24px; height: 24px; border-radius: 6px; background: var(--bg-soft); display: grid; place-items: center; flex: none; color: var(--ink-faint); }
.priv-leak .la .ic svg { width: 14px; height: 14px; }
.priv-leak .la .ban { margin-left: auto; color: var(--danger); display: inline-flex; }
.priv-leak .la .ban svg { width: 18px; height: 18px; }
.priv-leak .la .strike { position: relative; }
.priv-leak .la .strike::after { content: ""; position: absolute; left: -2px; right: -2px; top: 50%; height: 2px; background: var(--danger); transform: rotate(-6deg); }

/* ============================================================
   SPEAKING-PRACTICE cross-country map mock
   ============================================================ */
.speak-map { position: relative; background: var(--grad-teach); border: 1.5px solid var(--line); border-radius: var(--r-xl); padding: clamp(24px, 4vw, 44px); overflow: hidden; }
.speak-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 14px; position: relative; z-index: 2; }
.speak-node { background: #fff; border: 1.5px solid var(--line); border-radius: 14px; padding: 13px; box-shadow: var(--sh-sm); text-align: center; }
.speak-node .ava { width: 42px; height: 42px; border-radius: 50%; margin: 0 auto 8px; display: grid; place-items: center; color: #fff; font-family: var(--font-head); font-weight: 800; position: relative; }
.speak-node .ava.on::after { content: ""; position: absolute; right: 0; bottom: 0; width: 11px; height: 11px; border-radius: 50%; background: #00c853; border: 2px solid #fff; }
.speak-node b { display: block; font-family: var(--font-head); font-weight: 800; color: var(--navy); font-size: .84rem; }
.speak-node span { font-size: .68rem; color: var(--ink-faint); }
.speak-node .tag { display: inline-block; margin-top: 6px; font-size: .6rem; font-weight: 800; color: var(--blue-ink); background: var(--sky-soft); padding: 2px 8px; border-radius: var(--r-pill); }

/* ============================================================
   REACH: secure message/call mock
   ============================================================ */
.reach-card { background: #fff; border: 1.5px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--sh-md); overflow: hidden; max-width: 420px; }
.reach-top { display: flex; align-items: center; gap: 10px; padding: 12px 15px; border-bottom: 1px solid var(--line); }
.reach-top .ava { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-family: var(--font-head); font-weight: 800; flex: none; position: relative; }
.reach-top .ava::after { content: ""; position: absolute; right: -1px; bottom: -1px; width: 10px; height: 10px; border-radius: 50%; background: #00c853; border: 2px solid #fff; }
.reach-top b { font-family: var(--font-head); font-weight: 800; color: var(--navy); font-size: .9rem; display: block; line-height: 1.1; }
.reach-top span { font-size: .68rem; color: var(--green); font-weight: 700; }
.reach-top .acts { margin-left: auto; display: inline-flex; gap: 8px; color: var(--blue); }
.reach-top .acts span { width: 30px; height: 30px; border-radius: 50%; background: var(--sky-soft); display: grid; place-items: center; }
.reach-top .acts svg { width: 16px; height: 16px; }
.reach-body { padding: 14px 15px; display: grid; gap: 9px; background: var(--bg-soft); }
.reach-body .bubble2 { max-width: 82%; padding: 9px 13px; border-radius: 15px; font-size: .82rem; line-height: 1.45; }
.reach-body .bubble2.me { align-self: flex-end; background: var(--blue); color: #fff; border-bottom-right-radius: 5px; }
.reach-body .bubble2.auto { align-self: flex-start; background: #fff; border: 1px solid var(--line); color: var(--navy-2); border-bottom-left-radius: 5px; }
.reach-body .auto-tag { align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-head); font-weight: 800; font-size: .64rem; color: var(--purple); background: var(--purple-soft); padding: 4px 10px; border-radius: var(--r-pill); }
.reach-body .auto-tag svg { width: 12px; height: 12px; }
.reach-foot { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-top: 1px solid var(--line); }
.reach-foot .priv { display: inline-flex; align-items: center; gap: 7px; font-size: .72rem; font-weight: 700; color: #1c8a5f; }
.reach-foot .priv svg { width: 14px; height: 14px; }

/* ============================================================
   PROMOTE: teacher profile card in the network
   ============================================================ */
.promote { display: grid; grid-template-columns: 1fr; gap: var(--s-5); align-items: center; margin-top: var(--s-6); }
.promo-card { background: #fff; border: 1.5px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--sh-md); overflow: hidden; max-width: 380px; margin-inline: auto; }
.promo-cover { height: 74px; background: var(--grad-value); position: relative; }
.promo-ava { width: 72px; height: 72px; border-radius: 50%; border: 4px solid #fff; background: var(--blue); display: grid; place-items: center; color: #fff; font-family: var(--font-head); font-weight: 800; font-size: 1.5rem; margin: -38px auto 0; position: relative; }
.promo-ava .badge { position: absolute; right: 2px; bottom: 2px; width: 22px; height: 22px; border-radius: 50%; background: var(--green); border: 2px solid #fff; display: grid; place-items: center; }
.promo-ava .badge svg { width: 12px; height: 12px; color: #fff; }
.promo-body { padding: 8px 18px 18px; text-align: center; }
.promo-body h4 { font-family: var(--font-head); font-weight: 800; color: var(--navy); font-size: 1.05rem; margin: 0; }
.promo-body .role { font-size: .78rem; color: var(--ink-faint); font-weight: 700; margin-top: 2px; }
.promo-stars { display: inline-flex; gap: 2px; color: var(--gold); margin: 8px 0; }
.promo-stars svg { width: 15px; height: 15px; }
.promo-langs { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin: 8px 0 14px; }
.promo-langs span { font-size: .66rem; font-weight: 800; font-family: var(--font-head); color: var(--blue-ink); background: var(--sky-soft); padding: 3px 10px; border-radius: var(--r-pill); }
.promo-btn { display: block; width: 100%; font-family: var(--font-head); font-weight: 800; font-size: .86rem; color: #fff; background: var(--blue); border-radius: var(--r-pill); padding: 11px; box-shadow: var(--sh-blue); }
.promo-float { position: absolute; font-family: var(--font-head); font-weight: 800; font-size: .72rem; background: #fff; border: 1.5px solid var(--line); border-radius: var(--r-pill); padding: 7px 12px; box-shadow: var(--sh-md); display: inline-flex; align-items: center; gap: 7px; }
.promo-float svg { width: 13px; height: 13px; color: var(--purple); }

/* ============================================================
   AI + SUPPORT grid
   ============================================================ */
.ai-grid { display: grid; grid-template-columns: 1fr; gap: var(--s-4); margin-top: var(--s-6); }
.ai-card { background: #fff; border: 1.5px solid var(--line); border-radius: var(--r-lg); padding: var(--s-5) var(--s-6); box-shadow: var(--sh-sm); }
.ai-card .ai-ico { width: 46px; height: 46px; border-radius: 13px; display: grid; place-items: center; margin-bottom: var(--s-4); }
.ai-card .ai-ico svg { width: 24px; height: 24px; }
.ai-card.a1 .ai-ico { background: var(--purple-soft); color: var(--purple); }
.ai-card.a2 .ai-ico { background: var(--sky-soft); color: var(--blue); }
.ai-card h3 { font-size: 1.05rem; margin: 0 0 6px; }
.ai-card p { font-size: .92rem; color: var(--ink-muted); margin: 0; }
.ai-auto-list { display: grid; gap: 8px; margin-top: var(--s-4); }
.ai-auto-list .aa { display: flex; align-items: center; gap: 10px; font-size: .86rem; color: var(--navy-2); font-weight: 600; }
.ai-auto-list .aa .dot { width: 18px; height: 18px; border-radius: 50%; background: var(--purple-soft); color: var(--purple); display: grid; place-items: center; flex: none; }
.ai-auto-list .aa .dot svg { width: 11px; height: 11px; }

/* ============================================================
   TEACHER-PLAN VALUE BLOCK  (signature, before comparison)
   ============================================================ */
.value-block {
  position: relative; overflow: hidden; border-radius: var(--r-xl);
  background: var(--grad-value); color: #fff; padding: clamp(36px, 5vw, 64px) clamp(24px, 4vw, 56px);
  margin-top: var(--s-6); text-align: center;
}
.value-block .vb-spark { position: absolute; pointer-events: none; opacity: .5; }
.value-trial {
  display: inline-flex; align-items: center; gap: 9px; background: rgba(255,255,255,.16);
  border: 1.5px solid rgba(255,255,255,.3); border-radius: var(--r-pill); padding: 8px 17px;
  font-family: var(--font-head); font-weight: 800; font-size: .86rem; margin-bottom: var(--s-4);
}
.value-trial svg { width: 16px; height: 16px; }
.value-block h2 { color: #fff; max-width: 18ch; margin: 0 auto var(--s-4); }
.value-hero {
  background: rgba(255,255,255,.12); border: 1.5px solid rgba(255,255,255,.22); border-radius: var(--r-lg);
  padding: clamp(20px, 3vw, 30px); max-width: 720px; margin: var(--s-5) auto 0;
  display: flex; align-items: center; gap: 18px; text-align: left;
}
.value-hero .vh-ico { width: 60px; height: 60px; border-radius: 16px; background: #fff; display: grid; place-items: center; flex: none; }
.value-hero .vh-ico svg { width: 32px; height: 32px; color: var(--blue); }
.value-hero .vh-txt { font-family: var(--font-head); font-weight: 800; font-size: clamp(1.05rem, 2vw, 1.4rem); line-height: 1.25; }
.value-hero .vh-txt .free { color: #bff0d6; }
.value-sub { color: rgba(255,255,255,.82); max-width: 56ch; margin: var(--s-5) auto 0; font-size: .98rem; }
.value-actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: var(--s-6); }
.value-block .btn--ghost { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.5); color: #fff; }
.value-block .btn--ghost:hover { background: rgba(255,255,255,.2); }
.value-block .btn--white { background: #fff; color: var(--blue-ink); }
.value-block .btn--white:hover { background: #eef3ff; }

/* ============================================================
   benefit chips (section 2) — small trust row
   ============================================================ */
.bchips { display: flex; flex-wrap: wrap; gap: var(--s-3); justify-content: center; margin-top: var(--s-6); }
.bchip { display: inline-flex; align-items: center; gap: 10px; background: #fff; border: 1.5px solid var(--line); border-radius: var(--r-pill); padding: 10px 18px 10px 13px; font-family: var(--font-head); font-weight: 800; font-size: .9rem; color: var(--navy-2); box-shadow: var(--sh-xs); }
.bchip .bc-ic { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; flex: none; }
.bchip .bc-ic svg { width: 15px; height: 15px; }
.bchip.c1 .bc-ic { background: var(--green-soft); color: #1c8a5f; }
.bchip.c2 .bc-ic { background: var(--sky-soft); color: var(--blue); }
.bchip.c3 .bc-ic { background: var(--purple-soft); color: var(--purple); }

.frame-cap { text-align: center; font-size: .86rem; color: var(--ink-faint); font-weight: 600; margin-top: var(--s-4); max-width: 56ch; margin-inline: auto; }
.soon-tag { font-size: .58rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--purple); background: var(--purple-soft); padding: 2px 7px; border-radius: var(--r-pill); margin-left: 5px; vertical-align: middle; }

/* ============================================================
   Responsive
   ============================================================ */
@media (min-width: 760px) {
  .builder { grid-template-columns: 1fr 1fr; }
  .privacy { grid-template-columns: 1fr 1fr; }
  .promote { grid-template-columns: 1fr 1fr; }
  .ai-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 759px) {
  .tdash-rail { width: 56px; padding: 14px 8px; }
  .tdash-rail .tr-brand span, .tdash-rail .tr-item span, .tdash-rail .tr-help span { display: none; }
  .tdash-rail .tr-brand { justify-content: center; }
  .tdash-rail .tr-item { justify-content: center; padding: 9px; }
  .td-stats { grid-template-columns: 1fr; }
  .td-trow { grid-template-columns: 1.4fr 1fr auto; }
  .td-trow .td-score-col { display: none; }
}
@media (max-width: 999px) {
  .has-dropdown { display: none; }
}

/* ==== curriculum-development.css ==== */
/* ============================================================
   Lingocard — Curriculum Development (Services) page
   Extends speaking-practice.css + flashcards.css + spaced-repetition.css
   + mobile-app.css + web-app.css + language-teaching.css.
   Reuses: .hub-ui (curriculum builder), .browser / .laptop (web-app),
   .builder / .fillgap / .privacy / .value-block / .ai-grid / .tdash /
   .reach-card (language-teaching), .ecosystem / .device-phone /
   .screen-lesson (mobile-app), and shared .cmp / .faq / .carousel /
   .lang-grid / .cta-band.
   NEW here (all prefixed cd- to avoid collisions across the 6 sheets):
   the lesson→flashcards demo cards, the branded forgetting-curve graphic,
   the listenable-curriculum visual, the test-scores panel, and the
   student-feedback system.
   ============================================================ */

:root {
  --grad-curric: linear-gradient(135deg, #eef3ff 0%, #f3eeff 100%);
  --gold-soft:   #fbf0d4;
}

.eyebrow.svc { color: var(--purple); }

/* ============================================================
   LESSON → FLASHCARDS DEMO  (signature, two-step)
   Reuses .builder grid from language-teaching; these are the
   demo-specific card + step bits.
   ============================================================ */
.cd-demo { margin-top: var(--s-6); }
.cd-demo-grid { display: grid; grid-template-columns: 1fr; gap: var(--s-4); align-items: stretch; }
.cd-step {
  background: #fff; border: 1.5px solid var(--line); border-radius: var(--r-lg);
  box-shadow: var(--sh-md); overflow: hidden; display: flex; flex-direction: column;
}
.cd-step-head { display: flex; align-items: center; gap: 10px; padding: 13px 16px; border-bottom: 1px solid var(--line); background: var(--bg-soft); }
.cd-step-head .cd-num { width: 24px; height: 24px; border-radius: 50%; background: var(--blue); color: #fff; display: grid; place-items: center; font-family: var(--font-head); font-weight: 800; font-size: .78rem; flex: none; }
.cd-step-head b { font-family: var(--font-head); font-weight: 800; color: var(--navy); font-size: .9rem; }
.cd-step-head .cd-tag { margin-left: auto; font-family: var(--font-head); font-weight: 800; font-size: .62rem; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-faint); }
.cd-step-body { padding: 16px; flex: 1; display: flex; flex-direction: column; }

.cd-source {
  font-family: var(--font-body); font-size: .95rem; line-height: 1.75; color: var(--navy-2);
  background: var(--bg-soft); border: 1.5px solid var(--line); border-radius: 12px; padding: 14px;
}
.cd-source mark { background: var(--sky-soft); color: var(--blue-ink); border-radius: 4px; padding: 0 3px; font-weight: 700; }
.cd-source-foot { display: flex; align-items: center; gap: 8px; margin-top: 11px; font-size: .76rem; color: var(--ink-faint); font-weight: 600; }
.cd-source-foot svg { width: 15px; height: 15px; color: var(--blue); flex: none; }

.cd-demo-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px; align-self: flex-start;
  font-family: var(--font-head); font-weight: 800; font-size: .82rem; color: #fff; background: var(--blue);
  border: none; border-radius: var(--r-pill); padding: 11px 18px; margin-top: 14px; box-shadow: var(--sh-blue);
  cursor: pointer; transition: transform .18s ease, background .18s ease, box-shadow .18s ease;
}
.cd-demo-btn:hover { transform: translateY(-2px); background: var(--blue-dark); }
.cd-demo-btn svg { width: 15px; height: 15px; }

.cd-out { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.cd-cardlet {
  border: 1.5px solid var(--line); border-radius: 12px; padding: 11px 12px; position: relative;
  display: flex; flex-direction: column; gap: 2px; background: #fff;
}
.cd-cardlet .cw { font-family: var(--font-head); font-weight: 800; color: var(--navy); font-size: .86rem; }
.cd-cardlet .ct { font-size: .72rem; color: var(--ink-faint); }
.cd-cardlet .csnd { position: absolute; top: 9px; right: 9px; width: 20px; height: 20px; border-radius: 50%; background: var(--sky-soft); color: var(--blue); display: grid; place-items: center; }
.cd-cardlet .csnd svg { width: 11px; height: 11px; }
.cd-cap { text-align: center; font-size: .86rem; color: var(--ink-faint); font-weight: 600; margin-top: var(--s-5); max-width: 60ch; margin-inline: auto; }

/* ============================================================
   LISTENABLE CURRICULUM  (every lesson your students can hear)
   ============================================================ */
.listen { display: grid; grid-template-columns: 1fr; gap: var(--s-5); align-items: center; }
.listen-stack { display: grid; gap: 10px; }
.listen-row {
  display: flex; align-items: center; gap: 13px; background: #fff; border: 1.5px solid var(--line);
  border-radius: 14px; padding: 12px 15px; box-shadow: var(--sh-xs);
}
.listen-row .lr-play { width: 40px; height: 40px; border-radius: 50%; background: var(--blue); color: #fff; display: grid; place-items: center; flex: none; box-shadow: var(--sh-blue); border: none; cursor: pointer; padding: 0; transition: transform .12s ease, background .15s ease; }
.listen-row .lr-play svg { width: 17px; height: 17px; margin-left: 2px; }
.listen-row .lr-play:hover { background: var(--blue-dark); }
.listen-row .lr-play:active { transform: scale(.92); }
.listen-row .lr-play.playing { background: var(--blue-dark); }
.listen-row .lr-play.playing svg { margin-left: 0; }
.listen-row .lr-txt { flex: 1; min-width: 0; }
.listen-row .lr-txt b { display: block; font-family: var(--font-head); font-weight: 800; color: var(--navy); font-size: .92rem; }
.listen-row .lr-txt span { font-size: .76rem; color: var(--ink-faint); }
.listen-row .lr-wave { display: flex; align-items: center; gap: 3px; height: 26px; flex: none; }
.listen-row .lr-wave i { width: 3px; border-radius: 2px; background: var(--sky); }
.listen-row.on { border-color: var(--blue); box-shadow: var(--sh-blue); }
.listen-row.on .lr-wave i { background: var(--blue); animation: cdwave 1s ease-in-out infinite; }
@keyframes cdwave { 0%,100% { height: 7px; } 50% { height: 22px; } }
.listen-tts {
  display: inline-flex; align-items: center; gap: 9px; margin-top: var(--s-5);
  font-family: var(--font-head); font-weight: 800; font-size: .82rem; color: var(--blue-ink);
  background: var(--sky-soft); padding: 9px 16px; border-radius: var(--r-pill);
}
.listen-tts svg { width: 16px; height: 16px; }

/* ============================================================
   FORGETTING-CURVE GRAPHIC  (signature, branded)
   ============================================================ */
.curve-card {
  background: #fff; border: 1.5px solid var(--line); border-radius: var(--r-xl);
  box-shadow: var(--sh-md); padding: clamp(20px, 3vw, 32px); margin-inline: auto; max-width: 560px;
}
.curve-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: var(--s-4); flex-wrap: wrap; }
.curve-head b { font-family: var(--font-head); font-weight: 800; color: var(--navy); font-size: 1rem; }
.curve-legend { display: flex; gap: 14px; }
.curve-legend span { display: inline-flex; align-items: center; gap: 6px; font-size: .76rem; font-weight: 700; color: var(--ink-muted); }
.curve-legend .ln { width: 16px; height: 3px; border-radius: 2px; flex: none; }
.curve-legend .ln.sr { background: var(--blue); }
.curve-legend .ln.no { background: #c9b6b6; }
.curve-plot { position: relative; }
.curve-plot svg { width: 100%; height: auto; display: block; overflow: visible; }
.curve-foot { display: flex; align-items: center; gap: 9px; margin-top: var(--s-4); font-size: .84rem; color: var(--ink-muted); }
.curve-foot a { color: var(--blue-ink); font-weight: 700; }
/* All THREE "review" labels are kept. Each is rotated diagonally around its own
   baseline start so long localized words (RU "повторение", DE "Wiederholung") angle
   up into their own lane and never overlap horizontally across the 3 close peaks. */
.curve-saw { font-size: .7rem; fill: var(--blue-ink); font-weight: 700; font-family: var(--font-head); transform: rotate(-30deg); transform-box: fill-box; transform-origin: left bottom; }
.curve-axis { stroke: var(--line-strong); stroke-width: 1.5; }
.curve-axis-label { font-size: 11px; fill: var(--ink-faint); font-family: var(--font-body); }

/* ============================================================
   TEST-SCORES PANEL  (exercises, tests, exam prep)
   ============================================================ */
.scores { background: #fff; border: 1.5px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--sh-md); overflow: hidden; }
.scores-head { display: flex; align-items: center; gap: 10px; padding: 13px 17px; border-bottom: 1px solid var(--line); background: var(--bg-soft); }
.scores-head .sh-ico { width: 30px; height: 30px; border-radius: 8px; background: var(--purple-soft); color: var(--purple); display: grid; place-items: center; flex: none; }
.scores-head .sh-ico svg { width: 17px; height: 17px; }
.scores-head b { font-family: var(--font-head); font-weight: 800; color: var(--navy); font-size: .94rem; }
.scores-head .sh-avg { margin-left: auto; font-family: var(--font-head); font-weight: 800; font-size: .8rem; color: #1c8a5f; background: var(--green-soft); padding: 5px 12px; border-radius: var(--r-pill); }
.scores-body { padding: 8px 6px; }
.score-row { display: grid; grid-template-columns: 1.5fr 2fr auto; align-items: center; gap: 12px; padding: 9px 12px; }
.score-row .sr-name { display: flex; align-items: center; gap: 9px; min-width: 0; }
.score-row .sr-name .ava { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-family: var(--font-head); font-weight: 800; font-size: .72rem; flex: none; }
.score-row .sr-name b { font-family: var(--font-head); font-weight: 700; color: var(--navy); font-size: .82rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.score-row .sr-track { height: 8px; border-radius: 4px; background: var(--line); overflow: hidden; }
.score-row .sr-track i { display: block; height: 100%; border-radius: 4px; }
.score-row .sr-pct { font-family: var(--font-head); font-weight: 800; font-size: .86rem; width: 42px; text-align: right; }
.scores-foot { display: flex; flex-wrap: wrap; gap: 9px; padding: 12px 17px 16px; border-top: 1px solid var(--line); }
.scores-foot .ff { display: inline-flex; align-items: center; gap: 7px; font-family: var(--font-head); font-weight: 800; font-size: .74rem; color: var(--navy-2); background: var(--bg-soft); border: 1.5px solid var(--line); border-radius: var(--r-pill); padding: 7px 13px; }
.scores-foot .ff svg { width: 14px; height: 14px; color: var(--purple); }

/* ============================================================
   STUDENT FEEDBACK SYSTEM  (signature, distinct)
   ============================================================ */
.feedback { display: grid; grid-template-columns: 1fr; gap: var(--s-5); align-items: start; }
.fb-card { background: #fff; border: 1.5px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--sh-md); overflow: hidden; }
.fb-head { display: flex; align-items: center; gap: 10px; padding: 13px 17px; border-bottom: 1px solid var(--line); background: var(--grad-curric); }
.fb-head .fb-ico { width: 30px; height: 30px; border-radius: 8px; background: #fff; color: var(--purple); display: grid; place-items: center; flex: none; box-shadow: var(--sh-xs); }
.fb-head .fb-ico svg { width: 17px; height: 17px; }
.fb-head b { font-family: var(--font-head); font-weight: 800; color: var(--navy); font-size: .94rem; }
.fb-head .fb-score { margin-left: auto; display: inline-flex; align-items: center; gap: 5px; font-family: var(--font-head); font-weight: 800; color: var(--navy); font-size: .92rem; }
.fb-head .fb-score svg { width: 15px; height: 15px; color: var(--gold); }
.fb-body { padding: 14px 17px; display: grid; gap: 12px; }
/* per-lesson quality bars */
.fb-lesson { display: grid; grid-template-columns: 1.4fr 2fr auto; align-items: center; gap: 12px; }
.fb-lesson .fl-name { font-family: var(--font-head); font-weight: 700; color: var(--navy); font-size: .84rem; }
.fb-lesson .fl-stars { display: inline-flex; gap: 1px; }
.fb-lesson .fl-stars svg { width: 13px; height: 13px; }
.fb-lesson .fl-stars .on { color: var(--gold); }
.fb-lesson .fl-stars .off { color: var(--line-strong); }
.fb-lesson .fl-rate { font-family: var(--font-head); font-weight: 800; font-size: .82rem; color: var(--navy-2); width: 30px; text-align: right; }
.fb-flag {
  display: flex; align-items: flex-start; gap: 10px; background: var(--gold-soft); border-radius: 11px;
  padding: 11px 13px; font-size: .82rem; color: #8a6310; line-height: 1.5;
}
.fb-flag svg { width: 16px; height: 16px; flex: none; margin-top: 1px; color: var(--amber, #f0a93f); }
.fb-flag b { color: #6f4e0a; }
/* a single student feedback quote */
.fb-quote { display: flex; gap: 11px; background: var(--bg-soft); border-radius: 11px; padding: 12px 13px; }
.fb-quote .ava { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-family: var(--font-head); font-weight: 800; font-size: .76rem; flex: none; }
.fb-quote p { margin: 0; font-size: .85rem; color: var(--navy-2); line-height: 1.5; }
.fb-quote .fq-stars { display: inline-flex; gap: 1px; margin-bottom: 3px; }
.fb-quote .fq-stars svg { width: 12px; height: 12px; color: var(--gold); }

/* the improvement loop arrow */
.fb-loop { display: flex; flex-direction: column; gap: var(--s-4); }
.fb-loop-step { display: flex; align-items: center; gap: 12px; }
.fb-loop-step .fls-ico { width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center; flex: none; }
.fb-loop-step .fls-ico svg { width: 21px; height: 21px; }
.fb-loop-step.s1 .fls-ico { background: var(--sky-soft); color: var(--blue); }
.fb-loop-step.s2 .fls-ico { background: var(--gold-soft); color: #b9791b; }
.fb-loop-step.s3 .fls-ico { background: var(--green-soft); color: #1c8a5f; }
.fb-loop-step b { font-family: var(--font-head); font-weight: 800; color: var(--navy); font-size: .95rem; display: block; }
.fb-loop-step span { font-size: .84rem; color: var(--ink-muted); }
.fb-loop-conn { width: 2px; height: 16px; background: var(--line-strong); margin-left: 19px; }

/* ============================================================
   SHARE / REUSE across teachers + groups
   ============================================================ */
.share-hub { display: grid; grid-template-columns: 1fr; gap: var(--s-5); align-items: center; margin-top: var(--s-6); }
.share-center {
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px;
  background: var(--grad-curric); border: 1.5px solid var(--purple-soft); border-radius: var(--r-lg);
  padding: var(--s-6); box-shadow: var(--sh-sm);
}
.share-center .sh-ico { width: 60px; height: 60px; border-radius: 16px; background: var(--grad-mark); display: grid; place-items: center; box-shadow: var(--sh-blue); }
.share-center .sh-ico svg { width: 30px; height: 30px; color: #fff; }
.share-center b { font-family: var(--font-head); font-weight: 800; color: var(--navy); font-size: 1.05rem; }
.share-center span { font-size: .86rem; color: var(--ink-muted); }
.share-targets { display: grid; gap: 11px; }
.share-target { display: flex; align-items: center; gap: 12px; background: #fff; border: 1.5px solid var(--line); border-radius: 13px; padding: 12px 15px; box-shadow: var(--sh-xs); }
.share-target .st-ico { width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; flex: none; }
.share-target .st-ico svg { width: 20px; height: 20px; }
.share-target.t-teach .st-ico { background: var(--sky-soft); color: var(--blue); }
.share-target.t-group .st-ico { background: var(--green-soft); color: #1c8a5f; }
.share-target .st-txt b { font-family: var(--font-head); font-weight: 800; color: var(--navy); font-size: .9rem; display: block; }
.share-target .st-txt span { font-size: .76rem; color: var(--ink-faint); }
.share-target .st-count { margin-left: auto; font-family: var(--font-head); font-weight: 800; font-size: .76rem; color: var(--blue-ink); background: var(--sky-soft); padding: 5px 11px; border-radius: var(--r-pill); flex: none; }

/* ============================================================
   ECOSYSTEM NOTE  (Teaching Studio + School Hub)
   ============================================================ */
.studio-note { display: grid; grid-template-columns: 1fr; gap: var(--s-4); margin-top: var(--s-6); }
.studio-card { background: #fff; border: 1.5px solid var(--line); border-radius: var(--r-lg); padding: var(--s-6); box-shadow: var(--sh-sm); position: relative; overflow: hidden; }
.studio-card .stu-ico { width: 48px; height: 48px; border-radius: 13px; display: grid; place-items: center; margin-bottom: var(--s-4); }
.studio-card .stu-ico svg { width: 25px; height: 25px; }
.studio-card.solo .stu-ico { background: var(--sky-soft); color: var(--blue); }
.studio-card.school .stu-ico { background: var(--purple-soft); color: var(--purple); }
.studio-card h3 { font-size: 1.06rem; margin: 0 0 6px; display: flex; align-items: center; gap: 9px; }
.studio-card h3 .soon-tag { margin-left: 0; }
.studio-card p { font-size: .9rem; color: var(--ink-muted); margin: 0; }
.studio-card .stu-list { display: grid; gap: 7px; margin-top: var(--s-4); }
.studio-card .stu-list .sl { display: flex; align-items: center; gap: 9px; font-size: .85rem; color: var(--navy-2); font-weight: 600; }
.studio-card .stu-list .sl .dot { width: 17px; height: 17px; border-radius: 50%; background: var(--green-soft); color: #1c8a5f; display: grid; place-items: center; flex: none; }
.studio-card .stu-list .sl .dot svg { width: 11px; height: 11px; }

.soon-tag { font-size: .58rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--purple); background: var(--purple-soft); padding: 2px 7px; border-radius: var(--r-pill); margin-left: 5px; vertical-align: middle; }
.frame-cap { text-align: center; font-size: .86rem; color: var(--ink-faint); font-weight: 600; margin-top: var(--s-4); max-width: 56ch; margin-inline: auto; }

/* benefit chips reused from language-teaching (.bchips/.bchip) */

/* ============================================================
   Responsive
   ============================================================ */
@media (min-width: 760px) {
  .cd-demo-grid { grid-template-columns: 1fr 1fr; }
  .listen { grid-template-columns: 1fr 1fr; }
  .feedback { grid-template-columns: 1.1fr 0.9fr; }
  .share-hub { grid-template-columns: 1fr auto 1fr; }
  .studio-note { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 999px) {
  .has-dropdown { display: none; }
}

/* ==== homepage.css ==== */
/* ============================================================
   Lingocard — HOMEPAGE (main landing)
   Unifies the homepage with the 7 Products/Services pillar pages.
   Extends: speaking-practice.css + flashcards.css + spaced-repetition.css
   + mobile-app.css + web-app.css + language-teaching.css + curriculum-development.css.
   Reuses: .hero/.wrap/.split/.btn/.store-badge/.lang-grid/.carousel/.faq/
   .cta-band/.site-header/.site-footer, .device-phone/.screen-review/.tdash/
   .browser, .flip-card mechanics, .curve-card, .cd-demo (all from the
   pillar system).
   NEW here (prefixed hp-): the 4-counter odometer stat family, product/
   educator/why-choose card grids, the avatar constellation, the compact
   pronunciation flip-deck, and hero split tuning.
   ============================================================ */

/* ============================================================
   HP-01 · HERO split (learner mobile app + teacher web hub)
   ============================================================ */
.hp-hero-media { position: relative; display: flex; align-items: center; justify-content: center; min-height: 300px; }
.hp-hero-photo { width: 100%; max-width: 620px; height: auto; display: block; }
.hp-hero-hub {
  width: min(100%, 500px); border-radius: 16px; overflow: hidden;
  box-shadow: var(--sh-lg); border: 1px solid var(--line);
  transform: translateX(0);
}
.hp-hero-phone {
  position: absolute; right: -6px; bottom: -18px; width: clamp(120px, 30%, 168px);
  z-index: 3; filter: drop-shadow(0 18px 30px rgba(4,34,56,.22));
}
.hp-secondary-link {
  display: inline-flex; align-items: center; gap: 7px; margin-top: var(--s-4);
  font-family: var(--font-head); font-weight: 800; font-size: .92rem; color: var(--purple);
}
.hp-secondary-link svg { width: 16px; height: 16px; transition: transform .15s ease; }
.hp-secondary-link:hover svg { transform: translateX(3px); }

/* ============================================================
   HP-02 · LIVE STATS BAR — odometer digit-card family
   ============================================================ */
.hp-stats { background: var(--grad-band, radial-gradient(120% 140% at 50% 0%, #9babef 0%, #3381d1 70%)); color: #fff; }
.hp-stats .shead h2 { color: #fff; }
.hp-stats-grid {
  display: grid; grid-template-columns: 1fr; gap: var(--s-5);
  margin-top: var(--s-7);
}
.hp-stat { text-align: center; }
#HP-02-stat-learners { order: 1; }
#HP-02-stat-teachers { order: 2; }
#HP-02-stat-flashcards { order: 3; }
#HP-02-stat-countries { order: 4; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.hp-stat-label {
  font-family: var(--font-head); font-weight: 800; font-size: clamp(.7rem, 1.6vw, .82rem);
  letter-spacing: .04em; text-transform: uppercase; color: rgba(255,255,255,.9);
  margin-top: var(--s-3); white-space: nowrap;
}
.hp-odo-row { position: relative; display: inline-flex; align-items: center; }
.hp-odo-row .hp-stat-live { position: absolute; left: 100%; top: 50%; transform: translateY(-50%); margin-left: 12px; white-space: nowrap; }
.hp-odo { display: flex; align-items: stretch; gap: 2px; justify-content: center; max-width: 100%; }
.hp-odo .d, .hp-odo .sep, .hp-odo .suf {
  font-family: var(--font-head); font-weight: 800; font-variant-numeric: tabular-nums;
  line-height: 1; color: var(--navy);
}
.hp-odo .d {
  position: relative; overflow: hidden;
  width: clamp(15px, 3.2vw, 30px); height: clamp(26px, 5.4vw, 44px);
  background: #fff; border-radius: 7px; box-shadow: 0 3px 8px rgba(4,34,56,.18);
  display: grid; place-items: center;
  font-size: clamp(.9rem, 2.8vw, 1.65rem);
  transition: color .2s ease, background .2s ease;
}
.hp-odo .d.tick { color: var(--teal); background: #ecfbf7; }
.hp-odo .d .roll { display: block; transition: transform .0s; }
.hp-odo .sep, .hp-odo .suf { display: grid; place-items: end center; padding: 0 1px 4px; font-size: clamp(.9rem, 2.8vw, 1.65rem); color: #fff; }
.hp-odo .suf { color: #fff; align-items: center; padding-left: 5px; }
.hp-stat-live {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-head); font-weight: 800; font-size: .68rem; letter-spacing: .05em;
  text-transform: uppercase; color: #fff; background: rgba(255,255,255,.18); padding: 4px 11px; border-radius: var(--r-pill);
}
.hp-stat-live .dot { width: 7px; height: 7px; border-radius: 50%; background: #4ce0b3; box-shadow: 0 0 0 0 rgba(76,224,179,.6); animation: hpPulse 1.8s ease-out infinite; }
@keyframes hpPulse { 0% { box-shadow: 0 0 0 0 rgba(76,224,179,.6); } 70% { box-shadow: 0 0 0 8px rgba(76,224,179,0); } 100% { box-shadow: 0 0 0 0 rgba(76,224,179,0); } }

/* ============================================================
   HP-03 · Product cards (5) — exact nav labels
   ============================================================ */
.hp-cards { display: grid; grid-template-columns: 1fr; gap: var(--s-4); margin-top: var(--s-7); }
.hp-card {
  display: flex; flex-direction: column; gap: 10px; background: #fff;
  border: 1.5px solid var(--line); border-radius: var(--r-lg); padding: var(--s-5) var(--s-5) var(--s-4);
  box-shadow: var(--sh-xs); transition: transform .15s, box-shadow .15s, border-color .15s; text-decoration: none;
}
.hp-card:hover { transform: translateY(-3px); box-shadow: var(--sh-md); border-color: var(--line-strong); }
.hp-card .hp-ci { width: 46px; height: 46px; border-radius: 13px; display: grid; place-items: center; flex: none; }
.hp-card .hp-ci svg { width: 24px; height: 24px; }
.hp-card h3 { font-size: 1.02rem; margin: 0; display: flex; align-items: center; gap: 7px; }
.hp-card p { font-size: .9rem; color: var(--ink-muted); margin: 0; flex: 1; }
.hp-card .hp-more { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-head); font-weight: 800; font-size: .82rem; color: var(--blue-ink); }
.hp-card .hp-more svg { width: 15px; height: 15px; transition: transform .15s ease; }
.hp-card:hover .hp-more svg { transform: translateX(3px); }
.hp-ci.i-blue { background: var(--sky-soft); color: var(--blue); }
.hp-ci.i-purple { background: var(--purple-soft); color: var(--purple); }
.hp-ci.i-teal { background: var(--teal-soft, #d8f3ee); color: #1c8a5f; }
.hp-ci.i-green { background: var(--green-soft); color: #1c8a5f; }
.hp-ci.i-sky { background: #e2f1fb; color: var(--sky); }

/* ============================================================
   HP-04 · Forgetting curve — Hard/Good/Studied mini-visual
   (curve-card reused from curriculum-development.css)
   ============================================================ */
.hp-rate-mini { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: var(--s-5); }
.hp-rate-mini .rm {
  min-width: 0; text-align: center; border-radius: 13px; padding: 12px 6px;
  font-family: var(--font-head); font-weight: 800; font-size: .86rem;
}
.hp-rate-mini .rm span { display: block; font-size: .64rem; font-weight: 700; opacity: .8; margin-top: 3px; }
.hp-rate-mini .rm.h { background: var(--amber-soft); color: #b9791b; }
.hp-rate-mini .rm.g { background: var(--green-soft); color: #1c8a5f; }
.hp-rate-mini .rm.s { background: var(--purple-soft); color: var(--purple); }

/* ============================================================
   HP-05 · Pronunciation flip-deck (compact multi-card)
   ============================================================ */
.hp-pron { display: grid; grid-template-columns: 1fr; gap: var(--s-4); margin-top: var(--s-6); grid-auto-rows: 1fr; }
.hp-pron-card { perspective: 1200px; cursor: pointer; min-height: 210px; height: 100%; }
.hp-pron-inner { position: relative; width: 100%; height: 100%; min-height: 210px; transform-style: preserve-3d; transition: transform .55s cubic-bezier(.4,.15,.2,1); }
.hp-pron-card.flipped .hp-pron-inner { transform: rotateY(180deg); }
.hp-pron-face {
  position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden;
  background: #fff; border: 1.5px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--sh-sm);
  padding: var(--s-5); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 10px;
}
.hp-pron-back { transform: rotateY(180deg); background: var(--bg-soft); }
.hp-pron-lang { position: absolute; top: 12px; left: 14px; font-family: var(--font-head); font-weight: 800; font-size: .68rem; color: var(--ink-faint); display: inline-flex; align-items: center; gap: 6px; }
.hp-pron-lang .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--blue); }
.hp-pron-word { font-family: var(--font-head); font-weight: 800; color: var(--navy); font-size: 1.2rem; line-height: 1.2; }
.hp-pron-phon { font-size: .82rem; color: var(--ink-faint); font-style: italic; }
.hp-pron-audio { width: 48px; height: 48px; flex: none; border-radius: 50%; border: none; background: var(--blue); color: #fff; display: grid; place-items: center; box-shadow: var(--sh-blue); cursor: pointer; transition: transform .12s, background .15s; }
.hp-pron-audio:hover { background: var(--blue-dark); }
.hp-pron-audio:active { transform: scale(.92); }
.hp-pron-audio.playing { background: var(--blue-dark); }
.hp-pron-audio svg { width: 20px; height: 20px; }
.hp-pron-flip { position: absolute; bottom: 10px; right: 12px; font-family: var(--font-head); font-weight: 800; font-size: .66rem; color: var(--blue-ink); display: inline-flex; align-items: center; gap: 5px; }
.hp-pron-flip svg { width: 13px; height: 13px; }
.hp-pron-trans { font-family: var(--font-head); font-weight: 800; color: var(--navy); font-size: 1.1rem; }
.hp-pron-note { font-size: .78rem; color: var(--ink-faint); }

/* ============================================================
   HP-06 · Avatar constellation + partner-match
   ============================================================ */
.hp-constellation { position: relative; padding: var(--s-5) 0 0; }
.hp-constellation-inner { position: relative; max-width: 520px; margin-inline: auto; z-index: 2; }
/* avatars form a tidy centered strip ABOVE the match card (robust at every width, no clipping) */
/* two tidy rows of 5 larger avatars, centered (matches the old landing scale) */
.hp-avatars { display: grid; grid-template-columns: repeat(5, auto); justify-items: center; align-items: center; gap: clamp(14px, 2.8vw, 28px) clamp(10px, 2.4vw, 22px); max-width: 560px; margin: 0 auto var(--s-6); }
.hp-av {
  position: relative; width: clamp(52px, 13.5vw, 82px); height: clamp(52px, 13.5vw, 82px); border-radius: 50%;
  border: 3px solid #fff; box-shadow: var(--sh-md); display: grid; place-items: center;
  color: #fff; font-family: var(--font-head); font-weight: 800; font-size: clamp(1.1rem, 3.4vw, 1.6rem);
}
.hp-av .flagdot {
  position: absolute; right: -3px; bottom: -3px; min-width: 25px; height: 21px; padding: 0 4px; border-radius: 11px;
  border: 2px solid #fff; background: #fff; font-size: .62rem; display: grid; place-items: center; color: var(--navy); letter-spacing: .02em;
}
/* large avatars carry no live indicator — green presence dots stay only on the Matched-for-you card */
.hp-av-1 { background: var(--blue); }
.hp-av-2 { background: var(--purple); }
.hp-av-3 { background: var(--teal); }
.hp-av-4 { background: var(--sky); }
.hp-av-5 { background: #f0a93f; }
.hp-av-6 { background: #e2698f; }
.hp-av-7 { background: #5aa469; }
.hp-av-8 { background: #7b6ef0; }
.hp-av-9 { background: #46b0a6; }
.hp-av-10 { background: #e08a4a; }

.hp-match {
  background: #fff; border: 1.5px solid var(--line); border-radius: var(--r-xl); box-shadow: var(--sh-lg);
  overflow: hidden;
}
.hp-match-head { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--line); background: var(--bg-soft); }
.hp-match-head .mh-ico { width: 30px; height: 30px; border-radius: 8px; background: var(--grad-mark); display: grid; place-items: center; flex: none; }
.hp-match-head .mh-ico svg { width: 17px; height: 17px; color: #fff; }
.hp-match-head b { font-family: var(--font-head); font-weight: 800; color: var(--navy); font-size: .92rem; }
.hp-match-head .mh-tag { margin-left: auto; font-family: var(--font-head); font-weight: 800; font-size: .64rem; letter-spacing: .05em; text-transform: uppercase; color: var(--blue-ink); background: var(--sky-soft); padding: 4px 10px; border-radius: var(--r-pill); }
.hp-match-body { padding: 14px 16px; display: grid; gap: 11px; }
.hp-match-row { display: flex; align-items: center; gap: 12px; background: #fff; border: 1.5px solid var(--line); border-radius: 14px; padding: 11px 13px; }
.hp-match-row .ava { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-family: var(--font-head); font-weight: 800; flex: none; position: relative; }
.hp-match-row .ava.on::after { content: ""; position: absolute; right: -1px; bottom: -1px; width: 11px; height: 11px; border-radius: 50%; background: #00c853; border: 2px solid #fff; }
.hp-match-row .mr-name { font-family: var(--font-head); font-weight: 800; color: var(--navy); font-size: .9rem; }
.hp-match-row .mr-meta { font-size: .72rem; color: var(--ink-faint); }
.hp-match-row .mr-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.hp-match-row .mr-tags span { font-size: .6rem; font-weight: 800; font-family: var(--font-head); color: var(--blue-ink); background: var(--sky-soft); padding: 2px 7px; border-radius: var(--r-pill); }
.hp-match-row .mr-act { margin-left: auto; display: flex; gap: 6px; flex: none; }
.hp-match-row .mr-act button { width: 34px; height: 34px; border-radius: 50%; border: none; display: grid; place-items: center; cursor: pointer; }
.hp-match-row .mr-act .b-add { background: var(--purple-soft); color: var(--purple); }
.hp-match-row .mr-act .b-msg { background: var(--sky-soft); color: var(--blue); }
.hp-match-row .mr-act .b-vid { background: var(--blue); color: #fff; }
.hp-match-row .mr-act button svg { width: 16px; height: 16px; }
.hp-friend-note { display: inline-flex; align-items: center; gap: 8px; margin-top: var(--s-5); font-family: var(--font-head); font-weight: 800; font-size: .84rem; color: var(--purple); background: var(--purple-soft); padding: 9px 16px; border-radius: var(--r-pill); }
.hp-friend-note svg { width: 16px; height: 16px; }

/* ============================================================
   HP-08 · Learn anywhere (phone + browser continuity)
   ============================================================ */
.hp-anywhere { display: flex; align-items: center; justify-content: center; gap: clamp(16px, 4vw, 44px); flex-wrap: wrap; margin-top: var(--s-6); }
.hp-anywhere .hp-aw-laptop { width: clamp(300px, 48vw, 500px); }
.hp-anywhere .hp-aw-laptop .laptop { max-width: 100%; margin: 0; }
.hp-anywhere .hp-aw-phone { --pw: clamp(210px, 30vw, 288px); width: var(--pw); }
.hp-sync-pill { display: inline-flex; align-items: center; gap: 9px; margin: var(--s-6) auto 0; font-family: var(--font-head); font-weight: 800; font-size: .88rem; color: var(--blue-ink); background: var(--sky-soft); padding: 10px 20px; border-radius: var(--r-pill); }
.hp-sync-pill svg { width: 17px; height: 17px; }

/* ============================================================
   HP-09 · Educators service cards (3) + plan line
   ============================================================ */
.hp-edu-cards { display: grid; grid-template-columns: 1fr; gap: var(--s-4); margin-top: var(--s-6); }
.hp-plan-line {
  display: flex; align-items: flex-start; gap: 13px; margin-top: var(--s-6);
  background: var(--grad-feature, linear-gradient(135deg,#eef3ff,#f5eeff)); border: 1.5px solid var(--purple-soft);
  border-radius: var(--r-lg); padding: var(--s-5) var(--s-6); max-width: 820px; margin-inline: auto;
}
.hp-plan-line .pl-ico { width: 42px; height: 42px; border-radius: 12px; background: #fff; color: var(--purple); display: grid; place-items: center; flex: none; box-shadow: var(--sh-xs); }
.hp-plan-line .pl-ico svg { width: 22px; height: 22px; }
.hp-plan-line p { margin: 0; font-size: .96rem; color: var(--ink-muted); }
.hp-plan-line strong { color: var(--navy); }

/* ============================================================
   HP-10 · Why-choose (7 exclusive feature cards, 4+3)
   ============================================================ */
.hp-why { display: grid; grid-template-columns: 1fr; gap: var(--s-4); margin-top: var(--s-7); }
.hp-why-card { background: #fff; border: 1.5px solid var(--line); border-radius: var(--r-lg); padding: var(--s-5); box-shadow: var(--sh-xs); }
.hp-why-card .wc-ico { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; margin-bottom: var(--s-4); }
.hp-why-card .wc-ico svg { width: 22px; height: 22px; }
.hp-why-card h3 { font-size: 1rem; margin: 0 0 5px; }
.hp-why-card p { font-size: .88rem; color: var(--ink-muted); margin: 0; }

/* ============================================================
   HP-11 · Language grid — flag/badge icons + expand
   ============================================================ */
.hp-lang-badge {
  width: 26px; height: 26px; border-radius: 50%; flex: none; display: grid; place-items: center;
  overflow: hidden; box-shadow: inset 0 0 0 1px rgba(4,34,56,.12); background: var(--bg-soft);
}
.hp-lang-badge img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hp-lang-badge.neutral { background: var(--purple-soft); color: var(--purple); }
.hp-lang-badge.neutral svg { width: 15px; height: 15px; display: block; }
.lang-grid a .hp-lang-badge { margin: -2px 0; }
.lang-grid a.hp-lang-hidden { display: none; }
.hp-lang-grid.expanded .lang-grid a.hp-lang-hidden { display: flex; }
.hp-lang-toggle { display: flex; justify-content: center; margin-top: var(--s-5); }
.hp-lang-toggle button {
  font-family: var(--font-head); font-weight: 800; font-size: .92rem; color: var(--blue-ink);
  background: #fff; border: 1.5px solid var(--line-strong); border-radius: var(--r-pill);
  padding: 11px 22px; cursor: pointer; transition: border-color .15s, color .15s, transform .15s;
  display: inline-flex; align-items: center; gap: 8px;
}
.hp-lang-toggle button:hover { border-color: var(--blue); color: var(--blue); transform: translateY(-2px); }
.hp-lang-toggle button svg { width: 15px; height: 15px; transition: transform .2s ease; }
.hp-lang-grid.expanded .hp-lang-toggle button svg { transform: rotate(180deg); }

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 639px) {
  .hp-av { font-size: .95rem; }
}
@media (min-width: 640px) {
  .hp-stats-grid { grid-template-columns: repeat(2, 1fr); }
  .hp-cards { grid-template-columns: repeat(2, 1fr); }
  .hp-pron { grid-template-columns: repeat(2, 1fr); }
  .hp-edu-cards { grid-template-columns: repeat(3, 1fr); }
  .hp-why { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1000px) {
  .hp-stats-grid { grid-template-columns: repeat(2, 1fr); gap: var(--s-6) var(--s-4); }
  .hp-cards { grid-template-columns: repeat(5, 1fr); }
  .hp-card { padding: var(--s-5) var(--s-4) var(--s-4); }
  .hp-pron { grid-template-columns: repeat(4, 1fr); }
  .hp-why { grid-template-columns: repeat(4, 1fr); }
  .hp-hero-phone { right: -14px; }
}
@media (min-width: 1000px) and (max-width: 1199px) {
  /* 7 cards -> keep 4+3 tidy */
  .hp-why-card.wc-last3 { grid-column: span 1; }
}

/* ============================================================
   HP-01 hero tuning (round 4): bigger photo, tighter gap, longer copy
   ============================================================ */
/* ============================================================
   HP-01 hero (round 5): fully-visible photo, bottom flush with the
   stats band, left edge ~screen center, longer copy lines
   ============================================================ */
.hp-hero-media { min-height: 0; }
.hp-hero-photo { width: 100%; max-width: 760px; margin-inline: auto; display: block; }
.hero-copy .hero-sub { max-width: none; }
.hero-grid.hero-web { gap: clamp(10px, 2.5vw, 22px); }
@media (min-width: 1000px) {
  /* enlarge rightward ONLY: photo stays 100% of its cell, and the cell itself
     bleeds to the viewport's right edge — no overlap with the copy column */
  .hero-grid.hero-web { grid-template-columns: 0.82fr 1.18fr; gap: 10px; align-items: center; }
  .hero-web .hero-media {
    align-self: center; overflow: visible;
    margin-right: calc(((min(100vw, var(--maxw)) - 100vw) / 2) - var(--gutter));
  }
  .hp-hero-photo { width: 100%; max-width: none; margin: 0; }
}
@media (min-width: 1500px) {
  .hero .wrap { max-width: 1340px; }
}

/* HP-02 stats: label centered under the number INCLUDING the + suffix */
/* HP-02 stats: label centered under the DIGITS only (the + suffix hangs to the
   right, out of flow, so it does not shift the number's counting center) */
.hp-stat { display: flex; flex-direction: column; align-items: center; text-align: center; }
.hp-stat .hp-odo { position: relative; width: max-content; max-width: 100%; margin-inline: auto; }
.hp-stat .hp-odo .suf { position: absolute; left: 100%; top: 50%; transform: translateY(-50%); margin-left: 3px; padding: 0; }
.hp-stat .hp-odo-row { width: max-content; max-width: 100%; margin-inline: auto; }


/* ============================================================
   R8 overrides (new hero photo, flush-to-stats, decor z, stats gap,
   +25% copy column)
   ============================================================ */
#HP-01-hero { padding-bottom: 0; }
#HP-01-hero .spark, #HP-01-hero .deco-card { z-index: 4; }
#HP-01-hero .hero-media { position: relative; z-index: 1; align-self: end; }
.hp-hero-photo { display: block; }
.hp-stats-grid { row-gap: var(--s-4); }
@media (min-width: 1000px) {
  .hero-grid.hero-web { grid-template-columns: 1.03fr 0.97fr; }
  .hp-hero-photo { width: 100%; max-width: none; }
}
@media (min-width: 1500px) {
  .hero-grid.hero-web { grid-template-columns: 1.03fr 0.97fr; }
  .hp-hero-photo { width: 100%; }
}


/* ============================================================
   R9: educator-link gap, tighter stats rows, HP-08 laptop+phone
   overlap, left deco square restored
   ============================================================ */
#HP-01-hero .hero-copy { padding-bottom: var(--s-6); }
.hp-stats-grid { row-gap: var(--s-3); }
/* HP-08: big MacBook-Air-13-style laptop with a small iPhone leaning on its
   screen's right side (80% of phone width overlapping), phone in front */
.hp-anywhere { position: relative; }
.hp-anywhere .hp-aw-laptop { width: clamp(320px, 62vw, 840px); position: relative; }
.hp-anywhere .hp-aw-phone {
  position: absolute; width: 24%; min-width: 0; right: -4.8%; bottom: 2%;
  z-index: 5; --pw: 100%;
  filter: drop-shadow(0 14px 22px rgba(4,34,56,.28));
}


/* R9.1 verifier fixes: reserve HP-08 frame pre-load; hit 80% overlap vs the glass */
.hp-anywhere .hp-aw-laptop .glass { aspect-ratio: 1604 / 990; }
.hp-anywhere .hp-aw-laptop .glass .glass-shot { width: 100%; height: 100%; object-fit: cover; display: block; }
.hp-anywhere .hp-aw-phone { right: -2%; }


/* ============================================================
   R10: stats column gap -25% + larger row separation; HP-08 phone
   as iPhone Pro Max (thin even bezel, scaled island), shifted up
   ============================================================ */
.hp-stats-grid { column-gap: var(--s-3); row-gap: var(--s-5); }
.hp-anywhere .hp-aw-phone {
  bottom: 18%; padding: 5px; border-radius: 26px;
  background: linear-gradient(150deg, #3a3f4a, #23272f);
}
.hp-anywhere .hp-aw-phone .screen { border-radius: 21px; }
.hp-anywhere .hp-aw-phone .island { width: 40px; height: 11px; top: 5px; border-radius: 7px; }
.hp-anywhere .hp-aw-phone::before, .hp-anywhere .hp-aw-phone::after { display: none; }


/* ============================================================
   R11: HP-08 phone small gap from laptop bottom; stats as ONE
   column, order: learners, flashcards, teachers, countries
   ============================================================ */
.hp-anywhere .hp-aw-phone { bottom: 2.5%; }
.hp-stats-grid { grid-template-columns: 1fr; row-gap: var(--s-5); max-width: 620px; margin-inline: auto; }
#HP-02-stat-learners { order: 1; }
#HP-02-stat-flashcards { order: 2; }
#HP-02-stat-teachers { order: 3; }
#HP-02-stat-countries { order: 4; }


/* ============================================================
   R12: stats back to 2x2 (row1: learners | flashcards, row2:
   teachers | countries); HP-08 phone gap above laptop body;
   remove doubled camera island (screenshot already has one)
   ============================================================ */
.hp-stats-grid { grid-template-columns: 1fr; max-width: none; }
@media (min-width: 640px) {
  .hp-stats-grid { grid-template-columns: repeat(2, 1fr); max-width: 820px; margin-inline: auto; }
}
/* order already: learners 1, flashcards 2, teachers 3, countries 4 -> row-major 2x2 */
.hp-anywhere .hp-aw-phone { bottom: 6%; }
.hp-anywhere .hp-aw-phone .island { display: none; }


/* R13: stats row gap +20%; HP-08 phone closer to the keyboard body bar */
.hp-stats-grid { row-gap: 29px; }
.hp-anywhere .hp-aw-phone { bottom: 4.8%; }


/* R14: new hero photo has whitespace margins - restore hero bottom padding
   and center the image against the left copy instead of flushing to stats */
#HP-01-hero { padding-bottom: clamp(32px, 5vw, 64px); }
#HP-01-hero .hero-media { align-self: center; }


/* ============================================================
   R15: adaptive hero — fluid H1 (shrinks before the image does),
   tighter 27" vertical gaps, decorations may overlap the image
   ============================================================ */
/* fluid H1 so small screens reduce text a little instead of crushing the image */
#HP-01-hero h1 { font-size: clamp(1.9rem, 1.05rem + 2.7vw, 3.4rem); }
@media (min-width: 1000px) and (max-width: 1280px) {
  /* mid widths: give the image a bigger share, text scales down via clamp */
  .hero-grid.hero-web { grid-template-columns: 0.9fr 1.1fr; }
}
@media (min-width: 1500px) {
  /* 27": larger type fills the copy column; tighter section padding */
  #HP-01-hero { padding-top: 20px; padding-bottom: 24px; }
  #HP-01-hero .hero-sub { font-size: 1.16rem; }
  #HP-01-hero .hero-copy { padding-bottom: var(--s-4); }
}


/* R16: 27" — trim hero image top/bottom (cover-crop) so the copy column's
   vertical gaps shrink; keep faces centered */
@media (min-width: 1500px) {
  .hp-hero-photo { aspect-ratio: 1254 / 980; object-fit: cover; object-position: 50% 42%; }
}


/* R17: 27" — trimmed hero image sits flush on the stats band */
@media (min-width: 1500px) {
  #HP-01-hero { padding-bottom: 0; }
  #HP-01-hero .hero-media { align-self: end; }
}


/* R20 · HP-04 mobile: curve card centered, links below the curve */
@media (max-width: 999px) {
  #HP-04-forgetting-curve .split { display: flex; flex-direction: column; gap: 0; }
  #HP-04-forgetting-curve .split-copy { display: contents; }
  #HP-04-forgetting-curve .split-copy > h2 { order: 1; }
  #HP-04-forgetting-curve .split-copy > p { order: 2; }
  #HP-04-forgetting-curve .hp-rate-mini { order: 3; }
  #HP-04-forgetting-curve .split-media { order: 4; margin-top: var(--s-6); display: flex; justify-content: center; }
  #HP-04-forgetting-curve .curve-card { width: 100%; max-width: 480px; margin-inline: auto !important; }
  #HP-04-forgetting-curve .hp-fc-links { order: 5; margin-top: var(--s-6) !important; justify-content: center; }
}

/* ==== HP-06 real photo avatars (override CSS letter-discs) ==== */
.hp-av.hp-av-photo{background:none;border:none;box-shadow:none;padding:0;overflow:visible;width:clamp(56px,14vw,88px);height:clamp(56px,14vw,88px);object-fit:contain;filter:drop-shadow(0 5px 12px rgba(4,34,56,.16));}
.hp-av.hp-av-photo.on{transform:translateY(-3px);}
/* ==== HP-13 FAQ: two-column grid on desktop (match pillar pages) ==== */
@media (min-width: 900px){
  #HP-13-faq .faq{grid-template-columns:1fr 1fr;column-gap:var(--s-4);row-gap:var(--s-3);max-width:1060px;align-items:start;}
}
#HP-13-faq .faq .ans p{hyphens:auto;-webkit-hyphens:auto;overflow-wrap:break-word;}
/* ==== HP-11 flags: old prod "coin" form (circular + soft shadow, transparent) ==== */
.lang-grid a .hp-lang-badge,.hp-lang-badge{width:32px!important;height:32px!important;background:none!important;box-shadow:none!important;overflow:visible!important;border-radius:0!important;margin:-3px 0!important;}
.hp-lang-badge img{width:100%!important;height:100%!important;object-fit:contain!important;display:block;}
/* ==== Typography: match the pillar pages (Web App, Language Teaching, etc.) ==== */
#hp-root h1{font-size:clamp(32px,5vw,52px)!important;}
#hp-root h2{font-size:clamp(26px,3.4vw,36px)!important;}
/* ==== FAQ: equal-height closed rows + old-FAQ hyphenation ==== */
#HP-13-faq .faq summary{min-height:64px;align-items:center;hyphens:auto;-webkit-hyphens:auto;overflow-wrap:break-word;}
#HP-13-faq .faq summary>*:first-child{hyphens:auto;}
/* ==== Force brand fonts (Nunito headings / Mulish body) - DS default is Roboto ==== */
#hp-root{--font-head:"Nunito","Noto Sans","Noto Sans Arabic","Noto Sans Hebrew","Noto Sans SC","Noto Sans JP","Noto Sans KR","Noto Sans Thai","Noto Sans Devanagari",-apple-system,"Segoe UI",sans-serif;--font-body:"Mulish","Noto Sans","Noto Sans Arabic","Noto Sans Hebrew","Noto Sans SC","Noto Sans JP","Noto Sans KR","Noto Sans Thai","Noto Sans Devanagari",-apple-system,"Segoe UI",sans-serif;--font-sans:var(--font-head);--font-display:var(--font-head);}
#hp-root,#hp-root p,#hp-root li,#hp-root input,#hp-root .ans{font-family:var(--font-body)!important;}
#hp-root h1,#hp-root h2,#hp-root h3,#hp-root h4,#hp-root summary,#hp-root blockquote,#hp-root .brand,#hp-root b,#hp-root strong,#hp-root .btn,#hp-root button,#hp-root .nav-trigger,#hp-root .store-badge .sb-name{font-family:var(--font-head)!important;}
/* ==== #2 heading WEIGHT + spacing to match pillar pages (H1=700, H2=600) ==== */
#hp-root h1{font-weight:700!important;letter-spacing:-0.01em!important;}
#hp-root h2{font-weight:600!important;letter-spacing:-0.01em!important;}
/* ==== #3 FAQ: every closed question the SAME height (fixed, centered) ==== */
#HP-13-faq .faq{align-items:stretch!important;}
#HP-13-faq .faq details{align-self:start!important;}
#HP-13-faq .faq summary{height:66px!important;min-height:66px!important;box-sizing:border-box!important;padding-top:0!important;padding-bottom:0!important;align-items:center!important;line-height:1.28!important;}
/* ==== #2 FINAL: identical font TYPE to pillar pages (they render Roboto globally). ==
   Overrides the earlier Nunito block (later rule, same specificity + !important). == */
#hp-root, #hp-root p, #hp-root li, #hp-root .ans, #hp-root input, #hp-root span{font-family:"Roboto",-apple-system,"Segoe UI",sans-serif!important;}
#hp-root h1,#hp-root h2,#hp-root h3,#hp-root h4,#hp-root summary,#hp-root blockquote,#hp-root b,#hp-root strong,#hp-root .btn,#hp-root button,#hp-root .nav-trigger,#hp-root .brand,#hp-root .store-badge .sb-name{font-family:"Roboto",-apple-system,"Segoe UI",sans-serif!important;}
#hp-root h1{font-weight:700!important;}
#hp-root h2{font-weight:600!important;}
#hp-root h3,#hp-root h4{font-weight:600!important;}
/* ==== HP-12 reviews: EXACTLY the pillar pages' Carousel (Curriculum/LanguageTeaching et al.) ==== */
#HP-12-testimonials .carousel-track{display:grid!important;grid-auto-flow:column;grid-auto-columns:100%;gap:20px!important;margin-top:36px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:8px;scrollbar-width:none;}
#HP-12-testimonials .carousel-track::-webkit-scrollbar{display:none;}
@media(min-width:640px){#HP-12-testimonials .carousel-track{grid-auto-columns:calc((100% - 20px)/2);}}
@media(min-width:980px){#HP-12-testimonials .carousel-track{grid-auto-columns:calc((100% - 40px)/3);}}
#HP-12-testimonials .tcard{scroll-snap-align:start;background:#fff;border:1px solid #e7eef6!important;border-radius:18px!important;padding:24px!important;box-shadow:0 8px 20px rgba(4,34,56,.06)!important;margin:0;width:auto!important;min-width:0!important;flex:none;}
#HP-12-testimonials .tcard .stars{display:inline-flex;gap:3px!important;color:#f6b73c!important;margin-bottom:0!important;}
#HP-12-testimonials .tcard .stars svg{width:18px!important;height:18px!important;}
#HP-12-testimonials .tcard blockquote{margin:14px 0 18px!important;font-size:16.5px!important;line-height:1.55!important;color:#2b4254!important;font-weight:400!important;letter-spacing:0!important;}
#HP-12-testimonials .tcard .who{display:flex;align-items:center;gap:12px!important;}
#HP-12-testimonials .tcard .who .ava{width:44px!important;height:44px!important;border-radius:50%;font-weight:800!important;font-size:18px!important;}
#HP-12-testimonials .tcard .who b{display:block;font-size:15px!important;color:#042238!important;font-weight:700!important;}
#HP-12-testimonials .tcard .who span span{font-size:13px!important;color:#6b8092!important;}
#HP-12-testimonials .carousel-nav{display:flex;align-items:center;justify-content:center;gap:18px;margin-top:22px;}
#HP-12-testimonials .carousel-arrow{width:44px!important;height:44px!important;border-radius:50%;border:1px solid #dbe6f3!important;background:#fff!important;color:#2a6dc0!important;box-shadow:none!important;transition:background .15s ease,transform .15s ease;}
#HP-12-testimonials .carousel-arrow:hover{background:#eaf2fd!important;transform:translateY(-2px);}
#HP-12-testimonials .carousel-dots{display:inline-flex;gap:8px!important;}
#HP-12-testimonials .carousel-dots button{width:10px!important;height:10px!important;border-radius:999px!important;background:#cddaea!important;border:none;padding:0;transition:width .2s ease,background .2s ease;}
#HP-12-testimonials .carousel-dots button[aria-current="true"]{width:26px!important;background:#3381d1!important;}
/* ==== reviews: bottom-aligned avatars (no jumping on short quotes) ==== */
#HP-12-testimonials .tcard{display:flex!important;flex-direction:column!important;}
#HP-12-testimonials .tcard blockquote{flex:1!important;}
#HP-12-testimonials .tcard .who{margin-top:auto!important;}
#HP-12-testimonials .tcard .who .ava{color:#fff!important;}
/* ==== NEW TOOLBAR (handoff-toolbar, later rules win over old header css) ==== */
/* ============================================================
   Lingocard — Homepage TOOLBAR (header / nav)
   Self-contained: design tokens + header + desktop dropdowns +
   language selector + mobile accordion menu. Extracted from the
   approved homepage build. Fonts: Nunito (head) + Mulish (body).
   ============================================================ */

/* ---- Design tokens the toolbar consumes ---- */
:root {
  /* ---- Color ---- */
  --navy:        #042238;   /* primary text + headings */
  --navy-2:      #1d3b50;   /* secondary heading / strong body */
  --ink-muted:   #56708a;   /* body / muted text */
  --ink-faint:   #8499ac;   /* captions, meta */

  --white:       #ffffff;
  --bg:          #ffffff;
  --bg-soft:     #f3f8ff;   /* alternating section tint */
  --bg-soft-2:   #eef4fe;
  --line:        #e3ecf6;   /* hairline borders */
  --line-strong: #cdddee;

  --blue:        #3b7ce5;   /* primary CTA */
  --blue-dark:   #2f66c4;   /* hover */
  --blue-ink:    #1f4f9e;
  --teal:        #45c8c0;
  --teal-soft:   #d9f4f2;
  --purple:      #9b8bea;
  --purple-soft: #e9e4fb;
  --sky:         #69b5e8;
  --sky-soft:    #dceffb;
  --gold:        #f2b84b;

  /* gradient band (matches the counter band on the home page) */
  --grad-band:   linear-gradient(120deg, #5c8cee 0%, #7b82ec 55%, #9b8bea 100%);
  --grad-mark:   linear-gradient(150deg, #9b8bea 0%, #5c8cee 100%);
  --grad-feature:linear-gradient(135deg, #f3f8ff 0%, #eef0ff 100%);

  /* ---- Radius ---- */
  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 22px;
  --r-xl: 28px;
  --r-pill: 999px;

  /* ---- Shadow ---- */
  --sh-xs: 0 1px 2px rgba(4,34,56,.06);
  --sh-sm: 0 4px 14px rgba(4,34,56,.06);
  --sh-md: 0 12px 34px rgba(4,34,56,.09);
  --sh-lg: 0 26px 60px rgba(4,34,56,.13);
  --sh-blue: 0 12px 26px rgba(59,124,229,.32);

  /* ---- Spacing scale ---- */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px;
  --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px;
  --s-9: 96px; --s-10: 128px;

  /* ---- Layout ---- */
  --maxw: 1200px;
  --gutter: clamp(20px, 5vw, 56px);
  --section-y: clamp(56px, 9vw, 112px);

  /* ---- Type ---- */
  --font-head: "Nunito", system-ui, sans-serif;
  --font-body: "Mulish", system-ui, sans-serif;
}

/* ---- Minimal reset for the demo (drop if your app already resets) ---- */
* { box-sizing: border-box; }
body { margin: 0; font-family: var(--font-body); color: var(--navy); background: #fff; }
a { text-decoration: none; color: inherit; }
.wrap { max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }

/* ============================================================
   Header · nav · desktop dropdowns · mobile menu (base)
   ============================================================ */
.site-header {
  position: sticky; top: 0; z-index: 60;
  background: rgba(255,255,255,.86);
  backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--line);
}
.header-row { display: flex; align-items: center; gap: var(--s-5); height: 70px; }
.brand { display: inline-flex; align-items: center; gap: 9px; font-family: var(--font-head); font-weight: 800; font-size: 1.35rem; color: var(--navy); }
.brand .mark { width: 30px; height: 30px; flex: none; }
.nav-main { display: flex; align-items: center; gap: 4px; }
.nav-main a {
  font-family: var(--font-head); font-weight: 700; font-size: .98rem;
  color: var(--navy-2); padding: 9px 14px; border-radius: var(--r-pill);
  transition: background .15s ease, color .15s ease;
}
.nav-main a:hover { background: var(--bg-soft); color: var(--blue); }
.header-right { display: flex; align-items: center; gap: var(--s-3); margin-left: auto; }
.lang-select {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-head); font-weight: 700; font-size: .95rem; color: var(--navy);
  padding: 8px 12px; border-radius: var(--r-pill); background: transparent; border: 1.5px solid transparent;
}
.lang-select:hover { background: var(--bg-soft); }
.lang-select svg { width: 14px; height: 14px; }
.login-btn {
  font-family: var(--font-head); font-weight: 800; font-size: .98rem; white-space: nowrap;
  color: #fff; background: var(--blue); padding: 10px 22px; border-radius: var(--r-pill);
  box-shadow: var(--sh-blue); transition: background .18s, transform .18s;
}
.login-btn:hover { background: var(--blue-dark); transform: translateY(-1px); }
.nav-toggle { display: none; background: none; border: none; padding: 8px; border-radius: 10px; color: var(--navy); }
.nav-toggle:hover { background: var(--bg-soft); }
.nav-toggle svg { width: 26px; height: 26px; }

/* Products dropdown (shared across product pages) */
.has-dropdown { position: relative; }
.has-dropdown > a, .nav-trigger {
  font-family: var(--font-head); font-weight: 700; font-size: .98rem;
  color: var(--navy-2); padding: 9px 14px; border-radius: var(--r-pill);
  transition: background .15s ease, color .15s ease;
  display: inline-flex; align-items: center; gap: 6px;
  background: none; border: none; cursor: pointer;
}
.nav-trigger svg { width: 12px; height: 12px; transition: transform .2s ease; }
.has-dropdown:hover > a, .has-dropdown:hover .nav-trigger, .has-dropdown:focus-within .nav-trigger { background: var(--bg-soft); color: var(--blue); }
.has-dropdown:hover .nav-trigger svg, .has-dropdown:focus-within .nav-trigger svg { transform: rotate(180deg); }
.dropdown {
  position: absolute; top: calc(100% + 8px); left: 0; z-index: 70;
  background: #fff; border: 1.5px solid var(--line); border-radius: var(--r-lg);
  box-shadow: var(--sh-md); padding: 10px; min-width: 290px;
  display: grid; gap: 2px;
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity .16s ease, transform .16s ease, visibility .16s;
}
.has-dropdown:hover .dropdown, .has-dropdown:focus-within .dropdown { opacity: 1; visibility: visible; transform: translateY(0); }
.dropdown a { display: flex; align-items: flex-start; gap: 12px; padding: 11px 13px; border-radius: var(--r-md); transition: background .14s ease; }
.dropdown a:hover { background: var(--bg-soft); }
.dropdown .di { width: 38px; height: 38px; border-radius: 11px; flex: none; display: grid; place-items: center; }
.dropdown .di svg { width: 20px; height: 20px; }
.dropdown b { font-family: var(--font-head); font-weight: 800; color: var(--navy); font-size: .96rem; display: block; line-height: 1.2; }
.dropdown span { font-size: .82rem; color: var(--ink-faint); line-height: 1.35; }
.dropdown .badge-soon { font-size: .64rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--purple); background: var(--purple-soft); padding: 2px 7px; border-radius: var(--r-pill); margin-left: auto; align-self: center; }
.mobile-menu .mm-group { font-family: var(--font-head); font-weight: 800; font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-faint); padding: 14px 8px 4px; }
.mobile-menu .mm-sub { padding-left: 22px; }

/* mobile menu */
.mobile-menu {
  display: none; flex-direction: column; gap: 4px;
  padding: var(--s-4) var(--gutter) var(--s-6);
  border-bottom: 1px solid var(--line); background: #fff;
}
.mobile-menu.open { display: flex; }
.mobile-menu a { font-family: var(--font-head); font-weight: 700; color: var(--navy-2); padding: 12px 8px; border-radius: 12px; }
.mobile-menu a:hover { background: var(--bg-soft); }
.mobile-menu .login-btn { margin-top: var(--s-3); text-align: center; }

/* ============================================================
   Responsive — collapse to hamburger below 1000px
   ============================================================ */
@media (min-width: 1000px) { .nav-toggle { display: none; } }
@media (max-width: 999px) {
  .nav-main, .header-right .lang-select, .header-right .login-btn { display: none; }
  .nav-toggle { display: inline-grid; place-items: center; }

/* ============================================================
   Header language dropdown (same shell as Products/Services)
   ============================================================ */
.lang-dropdown { position: relative; }
.lang-dropdown .lang-select { border: 1.5px solid transparent; cursor: pointer; }
.lang-dropdown:hover .lang-select,
.lang-dropdown:focus-within .lang-select { background: var(--bg-soft); color: var(--blue); }
.lang-dropdown .lang-select svg { transition: transform .2s ease; }
.lang-dropdown:hover .lang-select svg,
.lang-dropdown:focus-within .lang-select svg { transform: rotate(180deg); }

/* right-aligned panel (button sits at the right of the toolbar) */
.lang-menu { left: auto; right: 0; width: min(600px, 92vw); padding: 14px; }
@media (min-width: 1500px) { .lang-menu { width: min(880px, 70vw); } }
@media (min-width: 1800px) { .lang-menu { width: min(1080px, 62vw); } }
.lang-menu-head {
  font-family: var(--font-head); font-weight: 800; font-size: .72rem;
  letter-spacing: .1em; text-transform: uppercase; color: var(--ink-faint);
  padding: 2px 6px 10px; border-bottom: 1px solid var(--line); margin-bottom: 8px;
}
.lang-menu-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px 6px;
  max-height: 62vh; overflow-y: auto; overscroll-behavior: contain;
}
@media (min-width: 1500px) { .lang-menu-grid { grid-template-columns: repeat(6, 1fr); max-height: none; } }
@media (min-width: 1800px) { .lang-menu-grid { grid-template-columns: repeat(6, 1fr); max-height: none; } }
/* single-line rows; flex+center so the highlight sits centered on the text */
.lang-menu-grid a {
  display: flex; align-items: center; gap: 0; min-height: 38px;
  padding: 9px 12px; border-radius: var(--r-md);
  font-family: var(--font-body); font-weight: 600; font-size: .9rem;
  color: var(--navy-2); line-height: 1.1; white-space: nowrap;
  text-overflow: ellipsis; overflow: hidden;
}
.lang-menu-grid a:hover { background: var(--bg-soft); color: var(--blue); }
.lang-menu-grid a[aria-current="true"] {
  color: var(--blue-ink); font-weight: 800; background: var(--sky-soft);
}
@media (max-width: 620px) {
  .lang-menu-grid { grid-template-columns: repeat(2, 1fr); }
}

/* thin scrollbar for the language list */
.lang-menu-grid::-webkit-scrollbar { width: 8px; }
.lang-menu-grid::-webkit-scrollbar-thumb { background: var(--line-strong, #cdddee); border-radius: 8px; }
.lang-menu-grid::-webkit-scrollbar-track { background: transparent; }


/* ============================================================
   Mobile menu — accordion groups + language selector (last item)
   ============================================================ */
.mobile-menu { gap: 2px; max-height: calc(100vh - 64px); overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }

/* collapsible group */
.mm-acc { display: flex; flex-direction: column; border-radius: 12px; }
.mm-acc-head {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  width: 100%; background: none; border: none; cursor: pointer; text-align: left;
  font-family: var(--font-head); font-weight: 800; color: var(--navy);
  font-size: 1.02rem; padding: 14px 10px; border-radius: 12px;
}
.mm-acc-head:hover { background: var(--bg-soft); }
.mm-acc-head .mm-chev { width: 15px; height: 15px; flex: none; color: var(--ink-faint); transition: transform .22s ease; }
.mm-acc.open > .mm-acc-head { color: var(--blue); }
.mm-acc.open > .mm-acc-head .mm-chev { transform: rotate(90deg); color: var(--blue); }

/* body: closed by default, revealed when .open */
.mm-acc-body { display: none; flex-direction: column; gap: 1px; padding: 2px 4px 8px; }
.mm-acc.open > .mm-acc-body { display: flex; }
.mm-acc-body a {
  font-family: var(--font-body); font-weight: 600; color: var(--navy-2);
  padding: 11px 12px 11px 16px; border-radius: 10px; font-size: .96rem;
}
.mm-acc-body a:hover { background: var(--bg-soft); color: var(--blue); }

/* top-level direct links */
.mobile-menu .mm-link {
  font-family: var(--font-head); font-weight: 800; color: var(--navy);
  font-size: 1.02rem; padding: 14px 10px; border-radius: 12px;
}
.mobile-menu .mm-link:hover { background: var(--bg-soft); }
.mobile-menu .mm-link.login-btn {
  display: inline-flex; align-self: flex-start; width: auto;
  margin: 10px 10px 4px; padding: 12px 30px; border-radius: 999px;
  text-align: center; justify-content: center;
  background: var(--blue); color: #fff; font-weight: 800;
}
.mobile-menu .mm-link.login-btn:hover { background: var(--blue-dark); color: #fff; }

/* language accordion (last item) */
.mm-lang { border-top: 1px solid var(--line); margin-top: 6px; padding-top: 4px; }
.mm-lang .mm-acc-head b { color: var(--blue-ink); font-weight: 800; }
.mm-lang-body { padding-bottom: 4px; }
.mm-lang-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 2px;
  max-height: 46vh; overflow-y: auto; overscroll-behavior: contain;
  padding: 2px; -webkit-overflow-scrolling: touch;
}
.mm-lang-grid a {
  display: flex; align-items: center; min-height: 42px;
  padding: 10px 12px; border-radius: 10px;
  font-family: var(--font-body); font-weight: 600; font-size: .94rem;
  color: var(--navy-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mm-lang-grid a:hover { background: var(--bg-soft); color: var(--blue); }
.mm-lang-grid a[aria-current="true"] { color: var(--blue-ink); font-weight: 800; background: var(--sky-soft); }
.mm-lang-grid::-webkit-scrollbar { width: 7px; }
.mm-lang-grid::-webkit-scrollbar-thumb { background: #cdddee; border-radius: 8px; }


/* Desktop Products/Services dropdown: keep each item title on one line */
@media (min-width: 1000px) {
  .nav-main .dropdown { min-width: 340px; }
  .nav-main .dropdown b { white-space: nowrap; }
}


/* Dropdown click-to-close: force-closed overrides hover/focus-within until pointer leaves */
.has-dropdown.force-closed .dropdown {
  opacity: 0 !important; visibility: hidden !important; transform: translateY(-6px) !important;
}
.has-dropdown.force-closed .nav-trigger svg { transform: none !important; }
}
/* toolbar.css shipped with an unclosed @media - closed here */

/* ==== toolbar lang panel: decisive overrides (old .dropdown rules interfered) ==== */
.site-header .lang-dropdown .dropdown.lang-menu{left:auto!important;right:0!important;width:min(600px,92vw)!important;min-width:min(600px,92vw)!important;padding:14px!important;}
.site-header .lang-menu .lang-menu-grid{display:grid!important;grid-template-columns:repeat(3,1fr)!important;gap:2px 10px!important;max-height:min(60vh,520px);overflow:auto;}
@media (min-width:1500px){.site-header .lang-dropdown .dropdown.lang-menu{width:min(880px,70vw)!important;min-width:min(880px,70vw)!important;}.site-header .lang-menu .lang-menu-grid{grid-template-columns:repeat(6,1fr)!important;max-height:none!important;}}
@media (min-width:1800px){.site-header .lang-dropdown .dropdown.lang-menu{width:min(1080px,62vw)!important;min-width:min(1080px,62vw)!important;}.site-header .lang-menu .lang-menu-grid{grid-template-columns:repeat(6,1fr)!important;}}
@media (max-width:620px){.site-header .lang-menu .lang-menu-grid{grid-template-columns:repeat(2,1fr)!important;}}
/* ==== toolbar bugfixes (final, !important to beat legacy header css) ==== */
/* #3: mobile menu must never render on desktop (resize with menu open broke layout) */
@media (min-width:1000px){.site-header .mobile-menu{display:none!important;}}
/* #1: click-to-close - force-closed always wins over hover/focus-within */
.site-header .has-dropdown.force-closed .dropdown{opacity:0!important;visibility:hidden!important;transform:translateY(-6px)!important;pointer-events:none!important;}
/* #2: language panel per design: styled head + uniform links + selected highlight */
.site-header .lang-menu .lang-menu-head{font-family:var(--font-head)!important;font-weight:800!important;font-size:.72rem!important;letter-spacing:.1em!important;text-transform:uppercase!important;color:var(--ink-faint)!important;padding:2px 6px 10px!important;border-bottom:1px solid var(--line)!important;margin-bottom:8px!important;}
.site-header .lang-menu-grid a{display:flex!important;align-items:center!important;gap:0!important;min-height:38px!important;padding:9px 12px!important;border-radius:12px!important;font-weight:600!important;font-size:.9rem!important;color:var(--navy-2)!important;line-height:1.1!important;white-space:nowrap!important;text-overflow:ellipsis;overflow:hidden;}
.site-header .lang-menu-grid a:hover{background:var(--bg-soft)!important;color:var(--blue)!important;}
.site-header .lang-menu-grid a[aria-current="true"]{color:var(--blue-ink)!important;font-weight:800!important;background:var(--sky-soft)!important;}
/* 27" screens: 6 columns (not 7) */
@media (min-width:1800px){.site-header .lang-menu .lang-menu-grid{grid-template-columns:repeat(6,1fr)!important;}.site-header .lang-dropdown .dropdown.lang-menu{width:min(920px,64vw)!important;min-width:min(920px,64vw)!important;}}
/* ==== HP-05: align all speaker buttons on one line (fixed slot heights) ==== */
#HP-05-pronunciation-demo .hp-pron-word{min-height:2.6em;display:flex;align-items:center;justify-content:center;}
#HP-05-pronunciation-demo .hp-pron-phon{min-height:1.25em;}

/* ==== NEW SITE FOOTER (handoff-footer; brace bug fixed) ==== */
/* ============================================================
   Store badges (App Store / Google Play) — used in footer bottom
   ============================================================ */
/* store badges */
.stores { display: flex; flex-wrap: wrap; gap: var(--s-3); align-items: center; }
.store-badge {
  display: inline-flex; align-items: center; gap: 10px;
  background: var(--navy); color: #fff;
  border-radius: 12px; padding: 9px 16px 9px 14px;
  transition: transform .18s ease, box-shadow .18s ease;
  box-shadow: var(--sh-sm);
}
.store-badge:hover { transform: translateY(-2px); box-shadow: var(--sh-md); }
.store-badge svg { width: 24px; height: 24px; flex: none; }
.store-badge > span { display: flex; flex-direction: column; line-height: 1.1; }
.store-badge .sb-top { font-size: .62rem; line-height: 1; opacity: .82; font-weight: 600; letter-spacing: .02em; white-space: nowrap; }
.store-badge .sb-name { font-family: var(--font-head); font-weight: 800; font-size: 1.05rem; line-height: 1.15; white-space: nowrap; }
.store-badge--light { background:#fff; color: var(--navy); box-shadow: inset 0 0 0 1.5px var(--line-strong), var(--sh-xs); }

/* ============================================================
   Footer
   ============================================================ */
.site-footer { background: var(--navy); color: #aebfcf; padding-block: var(--s-8) var(--s-6); margin-top: var(--section-y); }
.footer-grid { display: grid; grid-template-columns: 1fr; gap: var(--s-7); }
.footer-brand .brand { color: #fff; }
.footer-brand p { font-size: .95rem; max-width: 34ch; margin-top: var(--s-4); }
.footer-cols { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s-6); }
.footer-cols h4 { font-family: var(--font-head); color: #fff; font-size: .82rem; letter-spacing: .12em; text-transform: uppercase; margin-bottom: var(--s-4); }
.footer-cols ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; }
.footer-cols a { font-size: .95rem; color: #aebfcf; transition: color .15s; }
.footer-cols a:hover { color: #fff; }
.footer-bottom { display: flex; flex-wrap: wrap; gap: var(--s-4); justify-content: space-between; align-items: center; margin-top: var(--s-7); padding-top: var(--s-5); border-top: 1px solid rgba(255,255,255,.12); font-size: .88rem; }
.footer-bottom .stores .store-badge { background: rgba(255,255,255,.08); box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.22); }

/* ---- Responsive: 1 col → 2 cols (≥720px) → brand+cols split (≥1000px) ---- */
@media (min-width: 720px) {
  .footer-cols { grid-template-columns: repeat(4, 1fr); }
}
@media (min-width: 1000px) { .footer-grid { grid-template-columns: 1.2fr 2fr; gap: var(--s-9); } }

/* ---- Large screens: keep each footer link on one line ---- */
/* Footer: on large screens let item names stay on one line (wrap on smaller) */
@media (min-width: 1500px) {
  .footer-cols a { white-space: nowrap; }
}

.site-footer .footer-brand .brand{color:#000!important;}
/* match-card real avatar photos (dot stays on the span ::after) */
.hp-match-row .ava img{width:100%;height:100%;border-radius:50%;object-fit:cover;display:block;}
/* footer wordmark = periwinkle bottom-check of the logo (Andrei) */
.site-footer .footer-brand .brand{color:#6F82D1!important;}
/* footer large-screen layout: keep the brand column wide so the tagline reads in
   a few long lines (not a crushed 8-line sliver), and the "Lingocard" logo sits on
   the same row as the group headings. The long RU nowrap links no longer steal its
   width. align-items:start keeps logo top-aligned with the УСЛУГИ/ПРОДУКТЫ headings. */
/* tagline width is ADAPTIVE (short on phones, ~10% shorter than before at each step).
   WHOLE-WORD wrapping only - no mid-word hyphenation. */
.site-footer .footer-brand p{max-width:31ch;hyphens:none;overflow-wrap:normal;}
@media (max-width:719px){ .site-footer .footer-brand p{max-width:27ch!important;} }
@media (min-width:1000px){
  .site-footer .footer-grid{grid-template-columns:minmax(320px,1fr) 2fr!important;gap:56px!important;align-items:start!important;}
  .site-footer .footer-brand p{max-width:32ch!important;}
}
@media (min-width:1400px){
  .site-footer .wrap{max-width:1340px!important;}
  .site-footer .footer-grid{grid-template-columns:minmax(380px,1fr) 2fr!important;}
  .site-footer .footer-brand p{max-width:40ch!important;}
}
/* #2: non-English footer links wrap by WHOLE WORDS (no hyphenation) so long RU
   labels don't crowd the right edge - relax the 27" nowrap for non-English. */
.site-footer .footer-cols a{hyphens:none;overflow-wrap:normal;}
html:not([lang="en"]) .site-footer .footer-cols a{white-space:normal!important;}
/* footer group-column gaps +20% (Andrei) */
.site-footer .footer-cols{gap:38px!important;}
/* ==== Desktop toolbar: match the pillar-page header (/free-flashcards-app) ====
   Full-width row with ~40px side gaps so the logo is flush-left and Log In flush-
   right (symmetric), same logo position as the pillar. The "Lingocard" wordmark
   uses the pillar's periwinkle (#6F82D1, = LogoName.png). Mobile layout unchanged;
   only the brand color updates there too (per Andrei). */
.site-header .brand{color:#6F82D1!important;}
@media (min-width:1000px){
  .site-header .wrap.header-row{max-width:none!important;padding-inline:40px!important;}
}
/* header logo = the exact pillar LogoName.png @150px (mark + wordmark, periwinkle) */
.site-header .brand.brand-img{padding:0;gap:0;}
.site-header .brand .brand-logo{width:150px;height:auto;display:block;}
/* mobile smart header: slide up when hidden (desktop unaffected) */
.site-header{transition:transform .25s ease;will-change:transform;}
@media (max-width:999px){ .site-header.hp-hidden{transform:translateY(-100%);} }
/* language-grid neutral badge (langs without a flag asset) */
.lang-item .hp-lang-badge .lang-code{display:flex;align-items:center;justify-content:center;width:100%;height:100%;font-size:11px;font-weight:800;color:var(--navy-2);font-family:var(--font-head);letter-spacing:.02em;}

/* ============================================================
   HP-01 hero laptop-screen: live localized Teacher-dashboard overlay.
   Ported from the design bundle (_herohub.html + language-teaching.css /
   web-app.css). Scoped + cqw-scaled so it scales as ONE unit with the
   square hero stage (container-type on .hp-hero-stage). Decorative
   (aria-hidden); text budget <=5 short strings, ellipsis-clamped. */
#HP-01-hero .hp-hero-stage { position: relative; }
#HP-01-hero .hp-hero-stage > .hp-hero-photo { display: block; width: 100%; height: auto; }
#HP-01-hero .hp-hero-hub { position: absolute; left: 32.46%; top: 49.44%; width: 35.64%; height: 21.77%; overflow: hidden; border-radius: 0.4cqw; container-type: inline-size; -webkit-user-select: none; user-select: none; pointer-events: none; }
#HP-01-hero .hp-hero-hub[dir="rtl"] { direction: rtl; }
#HP-01-hero .hp-hero-hub .browser { width: 100%; height: 100%; display: flex; flex-direction: column; background: #fff; border: 0; border-radius: 0; box-shadow: none; overflow: hidden; }
#HP-01-hero .hp-hero-hub .browser-bar { display: flex; align-items: center; gap: 1.163cqw; padding: 0.93cqw 1.395cqw; background: linear-gradient(180deg, var(--chrome-bar), var(--chrome-bar-2)); border-bottom: 1px solid var(--line-strong); flex: none; }
#HP-01-hero .hp-hero-hub .browser-dots { display: inline-flex; gap: 0.698cqw; flex: none; }
#HP-01-hero .hp-hero-hub .browser-dots i { width: 1.163cqw; height: 1.163cqw; border-radius: 50%; display: block; }
#HP-01-hero .hp-hero-hub .browser-dots i:nth-child(1){background:#ff5f57} #HP-01-hero .hp-hero-hub .browser-dots i:nth-child(2){background:#febc2e} #HP-01-hero .hp-hero-hub .browser-dots i:nth-child(3){background:#28c840}
#HP-01-hero .hp-hero-hub .browser-url { flex: 1; display: flex; align-items: center; gap: 0.814cqw; min-width: 0; background: #fff; border-radius: var(--r-pill); padding: 0.698cqw 1.395cqw; font-family: var(--font-body); font-size: 1.526cqw; color: var(--ink-muted); }
#HP-01-hero .hp-hero-hub .browser-url { box-shadow: inset 0 0 0 1px var(--line); }
#HP-01-hero .hp-hero-hub .browser-url .lock { width: 1.512cqw; height: 1.512cqw; }
#HP-01-hero .hp-hero-hub .browser-url .lock { flex: none; color: var(--green); }
#HP-01-hero .hp-hero-hub .browser-url .u { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#HP-01-hero .hp-hero-hub .browser-url .u b { color: var(--navy-2); font-weight: 700; }
#HP-01-hero .hp-hero-hub .tdash { display: flex; flex: 1; min-height: 0; background: #fff; }
#HP-01-hero .hp-hero-hub .tdash-main { flex: 1; min-width: 0; padding: 1.628cqw 2.093cqw; gap: 1.279cqw; }
#HP-01-hero .hp-hero-hub .tdash-main { background: var(--bg-soft); display: flex; flex-direction: column; overflow: hidden; }
#HP-01-hero .hp-hero-hub .tdash-head { display: flex; align-items: center; gap: 1.163cqw; }
#HP-01-hero .hp-hero-hub .tdash-head h4 { font-size: 1.898cqw; margin: 0; }
#HP-01-hero .hp-hero-hub .tdash-head h4 { font-family: var(--font-head); font-weight: 800; color: var(--navy); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#HP-01-hero .hp-hero-hub .tdash-head .td-sub { font-size: 1.377cqw; margin-top: 0.233cqw; }
#HP-01-hero .hp-hero-hub .tdash-head .td-sub { color: var(--ink-faint); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#HP-01-hero .hp-hero-hub .tdash-head .td-cta { margin-left: auto; gap: 0.698cqw; font-size: 1.377cqw; padding: 0.814cqw 1.512cqw; border-radius: var(--r-pill); }
#HP-01-hero .hp-hero-hub .tdash-head .td-cta { display: inline-flex; align-items: center; font-family: var(--font-head); font-weight: 800; color: #fff; background: var(--blue); white-space: nowrap; flex: none; max-width: 40%; }
#HP-01-hero .hp-hero-hub .tdash-head .td-cta span { overflow: hidden; text-overflow: ellipsis; }
#HP-01-hero .hp-hero-hub .tdash-head .td-cta svg { width: 1.395cqw; height: 1.395cqw; }
#HP-01-hero .hp-hero-hub .tdash-head .td-cta svg { flex: none; }
#HP-01-hero .hp-hero-hub .td-stats { gap: 1.047cqw; }
#HP-01-hero .hp-hero-hub .td-stats { display: grid; grid-template-columns: repeat(3, 1fr); }
#HP-01-hero .hp-hero-hub .td-stat { border-radius: 1.279cqw; padding: 1.279cqw 1.395cqw; }
#HP-01-hero .hp-hero-hub .td-stat { background: #fff; border: 1px solid var(--line); box-shadow: var(--sh-xs); min-width: 0; }
#HP-01-hero .hp-hero-hub .td-stat .ts-label { font-size: 1.228cqw; }
#HP-01-hero .hp-hero-hub .td-stat .ts-label { font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#HP-01-hero .hp-hero-hub .td-stat .ts-val { font-size: 2.605cqw; margin-top: 0.349cqw; }
#HP-01-hero .hp-hero-hub .td-stat .ts-val { font-family: var(--font-head); font-weight: 800; color: var(--navy); line-height: 1.1; }
#HP-01-hero .hp-hero-hub .td-stat .ts-val span { font-size: 1.488cqw; }
#HP-01-hero .hp-hero-hub .td-stat .ts-val span { color: var(--green); font-weight: 800; }
#HP-01-hero .hp-hero-hub .td-stat .ts-bar { height: 0.581cqw; border-radius: 0.349cqw; margin-top: 0.814cqw; }
#HP-01-hero .hp-hero-hub .td-stat .ts-bar { background: var(--line); overflow: hidden; }
#HP-01-hero .hp-hero-hub .td-stat .ts-bar i { display: block; height: 100%; border-radius: 3px; background: var(--blue); }
#HP-01-hero .hp-hero-hub .td-table { background: #fff; border: 1px solid var(--line); box-shadow: var(--sh-xs); overflow: hidden; border-radius:1.279cqw }
#HP-01-hero .hp-hero-hub .td-trow { gap: 1.163cqw; padding: 0.93cqw 1.512cqw; }
#HP-01-hero .hp-hero-hub .td-trow { display: grid; grid-template-columns: 1.5fr 1fr .55fr auto; align-items: center; border-bottom: 1px solid var(--line); }
#HP-01-hero .hp-hero-hub .td-trow:last-child { border-bottom: none; }
#HP-01-hero .hp-hero-hub .td-trow.head { background: var(--bg-soft); }
#HP-01-hero .hp-hero-hub .td-trow.head span { font-size: 1.079cqw; }
#HP-01-hero .hp-hero-hub .td-trow.head span { font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
#HP-01-hero .hp-hero-hub .tdash-head > div { min-width: 0; }
#HP-01-hero .hp-hero-hub .td-stud { gap: 0.93cqw; }
#HP-01-hero .hp-hero-hub .td-stud { display: flex; align-items: center; min-width: 0; }
#HP-01-hero .hp-hero-hub .td-stud .ava { width: 3.023cqw; height: 3.023cqw; font-size: 1.34cqw; }
#HP-01-hero .hp-hero-hub .td-stud .ava { border-radius: 50%; display: grid; place-items: center; color: #fff; font-family: var(--font-head); font-weight: 800; flex: none; }
#HP-01-hero .hp-hero-hub .td-stud b { font-size: 1.526cqw; }
#HP-01-hero .hp-hero-hub .td-stud b { font-family: var(--font-head); font-weight: 700; color: var(--navy); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#HP-01-hero .hp-hero-hub .td-mem { gap: 0.814cqw; }
#HP-01-hero .hp-hero-hub .td-mem { display: flex; align-items: center; }
#HP-01-hero .hp-hero-hub .td-mem .mbar { height: 0.698cqw; border-radius: 0.349cqw; min-width: 4.186cqw; }
#HP-01-hero .hp-hero-hub .td-mem .mbar { flex: 1; background: var(--line); overflow: hidden; }
#HP-01-hero .hp-hero-hub .td-mem .mbar i { display: block; height: 100%; border-radius: 3px; }
#HP-01-hero .hp-hero-hub .td-mem .mpct { font-size: 1.377cqw; width: 3.488cqw; }
#HP-01-hero .hp-hero-hub .td-mem .mpct { font-family: var(--font-head); font-weight: 800; color: var(--navy-2); text-align: right; }
#HP-01-hero .hp-hero-hub .td-score { font-size: 1.488cqw; }
#HP-01-hero .hp-hero-hub .td-score { font-family: var(--font-head); font-weight: 800; }
#HP-01-hero .hp-hero-hub .td-flag { width: 2.326cqw; height: 2.326cqw; }
#HP-01-hero .hp-hero-hub .td-flag { border-radius: 50%; display: grid; place-items: center; flex: none; }
#HP-01-hero .hp-hero-hub .td-flag svg { width: 1.395cqw; height: 1.395cqw; }
#HP-01-hero .hp-hero-hub .td-flag.ok { background: var(--green-soft); color: #1c8a5f; }
#HP-01-hero .hp-hero-hub .td-flag.warn { background: var(--amber-soft); color: #b9791b; }

/* Footer logo = the toolbar full logo (LogoName.png) at the small footer size.
   .brand-logo is 150px globally (toolbar); this 3-class selector scales it to
   120px in the footer, keeping the current small footer footprint. */
.site-footer .footer-brand .brand-logo{width:120px;height:auto;display:block;}