/* design tokens scoped to the toolbar root */
.site-header{
  /* ---- 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;
}
/* Toolbar styles for site-wide use (tokens scoped to .site-header; no page collisions) */


/* ============================================================
   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; }
.site-header 
.brand { display: inline-flex; align-items: center; gap: 9px; font-family: var(--font-head); font-weight: 800; font-size: 1.35rem; color: var(--navy); }
.site-header 
.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; }


/* ============================================================
   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); }


@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: 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 (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; }
}


/* ---- 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; }

@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; }
}
.site-header, .site-header .mobile-menu, .site-header .dropdown {
  --amber:        #f0a93f;
  --amber-soft:   #fcefd7;
  --green:        #2cae7d;
  --green-soft:   #d8f3e7;
  --grad-srs:     linear-gradient(135deg, #eef4fe 0%, #e9f7f5 100%);
}

@media (max-width: 999px) {
  .has-dropdown { display: none; }
}

@media (max-width: 999px) {
  .has-dropdown { display: none; }
}


/* ==== 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.
   ============================================================ */


@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.
   ============================================================ */


@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-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-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;}

#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;}

#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;}


/* ============================================================
   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; }
.site-header 
.brand { display: inline-flex; align-items: center; gap: 9px; font-family: var(--font-head); font-weight: 800; font-size: 1.35rem; color: var(--navy); }
.site-header 
.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; }

@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;}}

/* #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;}

/* ==== 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;}

/* Base (mobile) horizontal padding for the toolbar row. On the homepage this comes
   from the global `.wrap{padding-inline:var(--gutter)}` rule (homepage-2026.css);
   toolbar.css lacked it, so on non-homepage pages the mobile logo/menu sat flush
   against the left edge. This matches the homepage. Desktop overrides to 40px below. */
.site-header .wrap.header-row{padding-inline:var(--gutter);}

@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;}