/* wls-pages-1.css — "Warm Learner System" for every public page except index/quiz/result
   (2026-10-18, item 10).

   CACHING (read before editing): this file is NEW and has a fresh name on purpose. The old
   shared sheets (base.css, pages.css, about.css, contact.css, guides.css, support.css) are
   unversioned and some are precached by sw.js, so changing their bytes can ship stale CSS to
   returning visitors (the 2026-08-07 incident). They are therefore left byte-for-byte as they
   were and this file overrides them. Every rule is scoped under body.wls, which out-ranks the
   old class rules (one extra class) without !important. Never add this file to sw.js PRECACHE;
   if it ever needs a breaking change, ship it as wls-pages-2.css and relink every page.
   Linked with an ABSOLUTE path (/css/wls-pages-1.css) because guides live in subfolders.

   Motion: hover/press only, transform/opacity only, reduced motion = none. System fonts. */

:root {
  --p: #123b7a; --ink: #0c2a59; --cta: #dc2626; --cta-h: #e11d48; --bg: #f9f9f7; --well: #f4f4f2;
  --tx: #1b2230; --mu: #5d6575; --bd: rgba(18,59,122,.08); --bd2: rgba(18,59,122,.2);
  --sh: 0 4px 20px rgba(17,24,39,.06); --shs: 0 10px 26px rgba(18,59,122,.14);
  --em: #0b7a52; --emb: #e7f6ef; --co: #b23a22; --cob: #fdeee9; --in: #4338ca; --inb: #eef0ff;
  --tint: rgba(18,59,122,.07); --amb: #fff7e8; --am: #8a4d00; --eo: cubic-bezier(.23,1,.32,1);
}
/* The landers and the printable page do not load base.css, so the box model reset lives here too. */
.wls *, .wls *::before, .wls *::after { box-sizing: border-box; }
html { background: #f9f9f7; }
body.wls {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, Roboto, sans-serif;
  font-size: 15px; line-height: 1.5; color: var(--tx);
  /* background-COLOR only: pages.css still paints the original mountain-road photo (fixed, cover)
     on every card page, and the content floats over it in the card below. Pages without pages.css
     (the language landers, the printable test) simply get the warm surface. */
  background-color: var(--bg);
  display: block; min-height: 100vh; margin: 0; max-width: none;
  padding: 20px; padding-top: max(20px, env(safe-area-inset-top));
  -webkit-font-smoothing: antialiased;
}

/* ── Top bar (same as the homepage): maple-leaf tile + name, Support pill, 44px burger ── */
.wls .wls-top { position: relative; display: flex; align-items: center; gap: 10px; max-width: 760px; min-height: 72px; margin: 0 auto; padding: 14px 16px; }
.wls .brand { display: flex; align-items: center; gap: 10px; min-width: 0; flex: 1; color: inherit; text-decoration: none; }
.wls .brand-tile { flex: none; width: 42px; height: 42px; border-radius: 13px; background: var(--p); display: grid; place-items: center; box-shadow: 0 6px 14px rgba(18,59,122,.24); }
.wls .brand-txt { min-width: 0; }
.wls .brand-name { display: block; font-size: 16px; font-weight: 800; line-height: 1.15; color: var(--ink); letter-spacing: -.2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wls .brand-sub { display: block; font-size: 12px; line-height: 1.3; color: var(--mu); white-space: nowrap; }
/* Support pill: the original red Ko-fi pill with the bouncing cup (CSS from the homepage as of git
   HEAD), kept in the bar's flow left of the burger. The label shows on phones, as it always did. */
.wls .support-fab { position: static; flex: none; z-index: 2; display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px 6px 10px; border-radius: 20px; text-decoration: none; color: #fff; font-weight: 700; font-size: .8rem; line-height: 1; background: linear-gradient(135deg, #cc0001, #e00001); transition: transform .12s; }
.wls .support-fab:hover { transform: translateY(-1px); }
.wls .support-fab-cup { display: block; height: 20px; width: auto; animation: supportBounce 2.2s ease-in-out infinite; }
@keyframes supportBounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
.wls .wls-top .burger-btn { position: static; flex: none; width: 44px; height: 44px; padding: 0; border-radius: 14px; background: #fff; border: 1px solid var(--bd); box-shadow: var(--sh); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; cursor: pointer; transition: transform 120ms var(--eo); }
.wls .wls-top .burger-btn:hover { background: #fff; }
.wls .wls-top .burger-btn:active { transform: scale(.94); }
.wls .wls-top .burger-btn span { display: block; width: 18px; height: 2px; border-radius: 2px; background: var(--ink); }
/* Burger -> X while the drawer is open (2026-10-21): each page's drawer snippet toggles .is-open.
   Transform/opacity only; 2px bars with a 4px gap, so 6px lands them on the middle line. */
.wls .wls-top .burger-btn span { transition: transform 200ms cubic-bezier(.2,.9,.3,1), opacity 200ms cubic-bezier(.2,.9,.3,1); }
.wls .wls-top .burger-btn.is-open span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.wls .wls-top .burger-btn.is-open span:nth-child(2) { opacity: 0; transform: scaleX(.4); }
.wls .wls-top .burger-btn.is-open span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
.wls .wls-top .burger-btn:focus-visible, .wls .support-fab:focus-visible, .wls .brand:focus-visible { outline: 3px solid var(--p); outline-offset: 2px; }
@media (max-width: 480px) {
  body.wls { padding: 10px; padding-top: max(10px, env(safe-area-inset-top)); }
  .wls .support-fab { padding: 5px 10px 5px 8px; font-size: .72rem; }
  .wls .support-fab-cup { height: 17px; }
}
@media (prefers-reduced-motion: reduce) { .wls .support-fab-cup { animation: none; } }

/* ── The page is one warm card floating over the photo (original 680px max-width and centring).
   Nothing sits directly on the photo except this card. The landers have no photo, so their
   <main class="card lander"> stays a plain column on the warm surface. ── */
.wls .card { position: relative; z-index: 1; background: var(--bg); border-radius: 24px; box-shadow: 0 20px 60px rgba(0,0,0,.3); max-width: 680px; width: 100%; margin: 0 auto; overflow: hidden; }
.wls .card.lander { background: transparent; border-radius: 0; box-shadow: none; max-width: 760px; overflow: visible; }
.wls .card .wls-top { max-width: none; }
@media (max-width: 480px) { .wls .card { border-radius: 20px; } }
@media (min-width: 900px) { .wls .card .wls-top { padding: 18px 26px; } .wls .card .card-header { padding: 8px 26px 4px; } .wls .card .card-body { padding: 20px 26px 32px; } }
.wls .card-header { position: relative; background: transparent; color: var(--tx); text-align: left; padding: 6px 16px 4px; }
.wls .card-header .logo, .wls .flag-bar { display: none; }
.wls .card-header .back-btn { position: static; display: inline-flex; align-items: center; gap: 4px; height: 30px; padding: 0 12px; margin: 0 0 12px; border-radius: 999px; background: var(--tint); color: var(--p); font-size: 13px; font-weight: 800; text-decoration: none; transition: background-color 160ms ease-out; }
.wls .card-header .back-btn:hover { background: rgba(18,59,122,.12); }
.wls .card-header h1, .wls .card-header #pg-title, .wls .card-header #prog-title { display: block; font-size: 28px; font-weight: 850; line-height: 1.14; letter-spacing: -.6px; color: var(--p); margin: 0 0 8px; opacity: 1; }
.wls .card-header p, .wls .card-header #pg-sub { font-size: 15px; line-height: 1.5; color: var(--mu); opacity: 1; margin: 0; max-width: 60ch; }
.wls .card-body { padding: 18px 16px 28px; }
@media (min-width: 900px) {
  .wls .card-header h1, .wls .card-header #pg-title, .wls .card-header #prog-title { font-size: 40px; letter-spacing: -1px; }
  .wls .card-header p, .wls .card-header #pg-sub { font-size: 17px; }
}

/* Reading type: 17px/1.7 on phones, 18px on desktop (articles and text pages). */
.wls .section p, .wls .section li, .wls .gd-body p, .wls .gd-body li, .wls .page-content p, .wls .page-content li,
.wls .legal-section p, .wls .lander p, .wls .lander li { font-size: 17px; line-height: 1.7; color: #3a4252; }
@media (min-width: 900px) {
  .wls .section p, .wls .section li, .wls .gd-body p, .wls .gd-body li, .wls .page-content p, .wls .page-content li,
  .wls .legal-section p, .wls .lander p, .wls .lander li { font-size: 18px; }
}
.wls .section { margin-bottom: 30px; }
.wls .section h2, .wls .gd-h2, .wls .page-content h2, .wls .legal-section h2, .wls .faq-section h2, .wls .sitemap-section h2, .wls .lander h2 {
  font-size: 21px; font-weight: 800; line-height: 1.25; letter-spacing: -.2px; color: var(--ink);
  text-transform: none; border: 0; padding: 0; margin: 30px 0 10px;
}
.wls .section h2 { margin-top: 0; }
.wls .gd-h3, .wls .page-content h3, .wls .section h3 { font-size: 18px; font-weight: 800; color: var(--tx); margin: 20px 0 6px; }
.wls .gd-body a, .wls .section a, .wls .page-content a { color: var(--p); }
/* Button-styled links keep white text inside content sections. */
.wls .section a.proj-visit-btn, .wls .section a.cta-btn, .wls .page-content .cta-box a, .wls .gd-body a.gd-cta-btn, .wls .section a.lp-cta-btn, .wls a.lp-cta-btn, .wls a.nf-home-btn, .wls a.prog-start-btn { color: #fff; }
.wls .gd-body ul, .wls .gd-body ol { padding-left: 22px; }
.wls strong { color: inherit; }

/* Soft white card used by tables, callouts, info boxes */
.wls .gd-tablewrap, .wls .gd-callout, .wls .gd-eeat, .wls .lp-eeat, .wls .disclaimer-box, .wls .proof-box,
.wls .thanks-box, .wls .letter-box, .wls .related-guides, .wls .prog-card, .wls .contact-card, .wls .goes-row {
  background: #fff; border: 1px solid var(--bd); border-radius: 20px; box-shadow: var(--sh);
}

/* ── Guides: meta chips, tables, callouts, E-E-A-T, related grid, CTA, FAQ ── */
.wls .gd-intro, .wls .gd-body p.gd-intro { font-size: 19px; line-height: 1.6; color: var(--tx); margin: 0 0 14px; }
.wls .gd-reviewed, .wls .gd-body p.gd-reviewed { display: flex; flex-wrap: wrap; gap: 6px; font-size: 13px; line-height: 1.4; color: var(--mu); margin: 0 0 22px; }
.wls .gd-reviewed .gd-chip { display: inline-block; padding: 5px 11px; border-radius: 999px; background: #fff; border: 1px solid var(--bd); }
.wls .gd-reviewed .gd-chip:first-child { background: var(--tint); border-color: transparent; color: var(--p); font-weight: 700; }
.wls .gd-reviewed .gd-chip.is-check { background: var(--emb); border-color: transparent; color: var(--em); font-weight: 700; }
.wls .gd-reviewed .gd-dot { display: none; }
.wls .gd-reviewed a { color: inherit; font-weight: 800; }
.wls .gd-tablewrap { padding: 4px; margin: 0 0 22px; overflow-x: auto; }
.wls .gd-table { font-size: 15px; border-collapse: separate; border-spacing: 0; }
.wls .gd-table caption { font-size: 12px; font-weight: 800; letter-spacing: .8px; text-transform: uppercase; font-style: normal; color: var(--mu); padding: 12px 12px 8px; }
.wls .gd-table th, .wls .gd-table td { border: 0; border-top: 1px solid var(--bd); padding: 11px 12px; line-height: 1.5; }
.wls .gd-table tr:first-child th, .wls .gd-table tr:first-child td { border-top: 0; }
.wls .gd-table th { background: transparent; color: var(--ink); font-weight: 800; width: 42%; }
.wls .gd-table td { color: #3a4252; }
.wls .gd-callout { position: relative; padding: 16px 18px 16px 22px; margin: 0 0 22px; overflow: hidden; }
.wls .gd-callout::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 5px; background: var(--p); }
.wls .gd-callout p, .wls .gd-body .gd-callout p { font-size: 16.5px; line-height: 1.65; color: var(--tx); }
.wls .gd-callout strong { color: var(--ink); }
.wls .gd-eeat, .wls .lp-eeat { padding: 18px 20px; margin: 0 0 22px; }
.wls .gd-eeat p, .wls .gd-sources li, .wls .lp-eeat p, .wls .gd-body .gd-eeat p, .wls .gd-body .gd-sources li { font-size: 15px; line-height: 1.65; color: #3a4252; }
.wls .gd-related { display: grid; grid-template-columns: 1fr; gap: 10px; margin: 0 0 24px; }
@media (min-width: 640px) { .wls .gd-related { grid-template-columns: 1fr 1fr; } }
.wls .gd-related a { background: #fff; border: 1px solid var(--bd); border-radius: 20px; box-shadow: var(--sh); padding: 14px 16px; gap: 12px; transition: border-color 160ms ease-out, transform 160ms var(--eo); }
.wls .gd-related a:hover { border-color: var(--bd2); transform: translateY(-1px); }
.wls .gd-related strong { font-size: 15.5px; color: var(--p); }
.wls .gd-related span.gd-rel-s { font-size: 13.5px; color: var(--mu); }
.wls .gd-related .gd-rel-ico { width: 40px; height: 40px; border-radius: 12px; background: var(--well); display: grid; place-items: center; font-size: 1.1rem; }
.wls .gd-cta, .wls .lp-cta, .wls .cta-box { background: var(--p); border-radius: 24px; padding: 24px 20px; box-shadow: 0 12px 28px rgba(18,59,122,.22); text-align: center; color: #fff; margin: 26px 0 10px; }
.wls .gd-cta .gd-cta-title, .wls .gd-body .gd-cta p.gd-cta-title, .wls .cta-box p, .wls .lp-cta-title { font-size: 20px; font-weight: 850; line-height: 1.3; color: #fff; }
.wls .gd-cta .gd-cta-sub, .wls .gd-body .gd-cta p.gd-cta-sub, .wls .lp-cta-sub { font-size: 15px; line-height: 1.5; color: rgba(255,255,255,.86); }
.wls .gd-cta-btn, .wls .lp-cta-btn, .wls .cta-box a { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 26px; border-radius: 16px; background: var(--cta); color: #fff; font-weight: 800; font-size: 16px; text-decoration: none; box-shadow: 0 10px 22px rgba(0,0,0,.18); transition: background-color 160ms ease-out, transform 120ms var(--eo); }
.wls .gd-cta-btn:hover, .wls .lp-cta-btn:hover, .wls .cta-box a:hover { background: var(--cta-h); color: #fff; }
.wls .gd-cta-btn:active, .wls .lp-cta-btn:active, .wls .cta-box a:active { transform: scale(.97); }
.wls .gd-faq details, .wls .faq-section details, .wls .lander details, .wls .seo-faq-item {
  background: #fff; border: 1px solid var(--bd); border-radius: 16px; box-shadow: none; padding: 0; margin: 0 0 10px; overflow: hidden;
  transition: box-shadow 160ms ease-out;
}
.wls .gd-faq details[open], .wls .faq-section details[open], .wls .lander details[open] { box-shadow: var(--sh); }
.wls .gd-faq summary, .wls .faq-section summary, .wls .lander summary {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; list-style: none;
  padding: 15px 16px; font-size: 16px; font-weight: 800; line-height: 1.4; color: var(--tx); cursor: pointer;
}
.wls .gd-faq summary::-webkit-details-marker, .wls .faq-section summary::-webkit-details-marker, .wls .lander summary::-webkit-details-marker { display: none; }
.wls .faq-section summary::before { content: none; }
.wls .gd-faq summary::after, .wls .faq-section summary::after, .wls .lander summary::after {
  content: ''; flex: none; width: 26px; height: 26px; border-radius: 50%;
  background: var(--well) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1.5 1.5 6 6l4.5-4.5' stroke='%23123b7a' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") center no-repeat;
  transition: transform 200ms var(--eo);
}
.wls .gd-faq details[open] summary::after, .wls .faq-section details[open] summary::after, .wls .lander details[open] summary::after { transform: rotate(180deg); }
.wls .gd-faq details[open] summary, .wls .faq-section details[open] summary, .wls .lander details[open] summary { color: var(--p); }
.wls .gd-faq details p, .wls .faq-section details p, .wls .lander details p, .wls .gd-body .gd-faq details p, .wls .page-content .faq-section details p { padding: 0 16px 16px; margin: 0; font-size: 16px; line-height: 1.65; color: #3a4252; }
.wls .gd-faq summary:focus-visible, .wls .faq-section summary:focus-visible, .wls .lander summary:focus-visible { outline: 3px solid var(--p); outline-offset: -3px; border-radius: 16px; }

/* Guides hub */
.wls .gd-hub-grid { gap: 12px; }
.wls .gd-hub-card { background: #fff; border: 1px solid var(--bd); border-radius: 20px; box-shadow: var(--sh); padding: 16px 18px; transition: border-color 160ms ease-out, transform 160ms var(--eo); }
.wls .gd-hub-card:hover { border-color: var(--bd2); transform: translateY(-2px); box-shadow: var(--sh); }
.wls .gd-hub-card strong { font-size: 17px; font-weight: 800; color: var(--p); line-height: 1.35; }
.wls .gd-hub-card span { font-size: 15px; color: var(--mu); line-height: 1.6; }

/* Related link boxes on study-guide / road-signs / flashcards: card grids */
.wls .related-guides { padding: 18px 20px; margin: 24px 0; max-width: none; }
.wls .related-guides h2, .wls .related-resources h2 { font-size: 18px; font-weight: 800; color: var(--ink); margin: 0 0 10px; }
.wls .related-guides ul { list-style: none; margin: 0; display: grid; gap: 8px; }
.wls .related-guides li { font-size: 15.5px; }
.wls .related-guides a { color: var(--p); font-weight: 700; }
.wls .related-resources { max-width: 760px; padding: 0 16px; }
.wls .related-links { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; }
.wls .related-links a { display: block; background: #fff; border: 1px solid var(--bd); border-radius: 16px; box-shadow: var(--sh); padding: 14px 16px; color: var(--p); font-size: 15px; font-weight: 700; transition: border-color 160ms ease-out; }
.wls .related-links a:hover { background: #fff; border-color: var(--bd2); }

/* ── About / editorial / updates ── */
.wls .feature-list li { background: #fff; border: 1px solid var(--bd); border-radius: 16px; padding: 12px 14px; font-size: 16px; color: var(--tx); }
.wls .mode-grid { gap: 10px; }
.wls .mode-pill { background: #fff; border: 1px solid var(--bd); border-radius: 20px; box-shadow: var(--sh); padding: 16px 10px; }
.wls .mode-pill strong { font-size: 15px; font-weight: 800; color: var(--ink); }
.wls .mode-pill span { font-size: 13px; color: var(--mu); }
.wls .proof-box { background: var(--emb); border-color: transparent; box-shadow: none; padding: 18px 20px; }
.wls .proof-title { color: var(--em); font-size: 16px; font-weight: 800; }
.wls .proof-body { color: #1d5c43; font-size: 15.5px; }
.wls .disclaimer-box { background: var(--amb); border-color: #f3d9a6; box-shadow: none; color: var(--am); font-size: 15px; padding: 16px 18px; }
.wls .proj-card { border: 1px solid var(--bd); border-radius: 20px; box-shadow: var(--sh); }
.wls .proj-card:hover { box-shadow: var(--shs); }
.wls .proj-card-head { background: var(--p); }
.wls .proj-visit-btn { background: var(--p); border-radius: 12px; }

/* ── Contact: soft cards + soft inputs ── */
.wls .thanks-box { background: var(--amb); border-color: #f3d9a6; box-shadow: none; padding: 18px 20px; }
.wls .thanks-title { color: var(--am); font-size: 16px; font-weight: 800; }
.wls .thanks-body { color: #6e4a12; font-size: 15.5px; }
.wls .contact-cards { gap: 12px; }
.wls .contact-card { padding: 16px 18px; }
.wls .contact-card .cc-body strong { font-size: 16px; font-weight: 800; color: var(--tx); }
.wls .contact-card .cc-body span { font-size: 15px; color: var(--mu); }
.wls .form-group label { font-size: 14px; font-weight: 800; color: var(--tx); }
.wls .form-group input, .wls .form-group select, .wls .form-group textarea {
  min-height: 48px; padding: 12px 14px; border: 1px solid var(--bd2); border-radius: 14px; background: #fff;
  font-size: 16px; color: var(--tx); box-shadow: inset 0 1px 2px rgba(17,24,39,.04);
  transition: border-color 160ms ease-out, box-shadow 160ms ease-out;
}
.wls .form-group input:focus, .wls .form-group select:focus, .wls .form-group textarea:focus { border-color: var(--p); box-shadow: 0 0 0 3px rgba(18,59,122,.14); outline: none; }
.wls .form-group input:focus-visible, .wls .form-group select:focus-visible, .wls .form-group textarea:focus-visible { outline: 3px solid var(--p); outline-offset: 2px; }
.wls .btn-send { min-height: 54px; border-radius: 16px; background: var(--p); font-size: 16px; font-weight: 800; box-shadow: 0 10px 22px rgba(18,59,122,.22); transition: background-color 160ms ease-out, transform 120ms var(--eo); }
.wls .btn-send:hover { opacity: 1; transform: none; background: var(--ink); }
.wls .btn-send:active { transform: scale(.97); }
.wls .form-note { font-size: 13px; color: var(--mu); }

/* ── Legal / sitemap ── */
.wls .legal-section { margin-bottom: 24px; }
.wls .sitemap-section { background: #fff; border: 1px solid var(--bd); border-radius: 20px; box-shadow: var(--sh); padding: 16px 18px; margin-bottom: 14px; }
.wls .sitemap-section h2 { margin: 0 0 8px; font-size: 17px; }
.wls .sitemap-section li { border-bottom-color: var(--bd); padding: 8px 0; }
.wls .sitemap-section li:last-child { border-bottom: 0; }
.wls .sitemap-section a { font-size: 16px; color: var(--p); }

/* ── Road signs: card grid, sign in a #f4f4f2 well ── */
.wls .sign-grid { gap: 12px; }
.wls .sign-card { background: #fff; border: 1px solid var(--bd); border-radius: 20px; box-shadow: var(--sh); padding: 10px 10px 14px; }
.wls .sign-card picture { background: var(--well); border-radius: 14px; padding: 12px 6px; margin-bottom: 10px; }
/* Sign PNGs sit on a white canvas: multiply lets the well colour show through it. */
.wls .sign-card img, .wls .flashcard-front img, .wls .lq-img img, .wls #sign-modal img, .wls .q-item img { mix-blend-mode: multiply; }
/* Whole sign, always: contain inside the well, never cover/crop (the 4:3 canvas letterboxes). */
.wls .sign-card img, .wls .flashcard-front img, .wls .lq-img img, .wls #sign-modal img { object-fit: contain; }
.wls .sign-card picture { overflow: visible; }
.wls .sign-card img { margin-bottom: 0; }
.wls .sign-card strong { font-size: 14px; font-weight: 800; color: var(--tx); line-height: 1.3; }
.wls .sign-card span { font-size: 13px; color: var(--mu); line-height: 1.45; margin-top: 4px; }
@media (min-width: 700px) { .wls .sign-grid { grid-template-columns: repeat(3, 1fr); } }
.wls #sign-modal { background: rgba(12,42,89,.45); }
.wls #sign-modal-inner { border-radius: 24px; box-shadow: 0 20px 50px rgba(12,42,89,.25); }
.wls #sign-modal img { background: var(--well); border-radius: 16px; padding: 10px; box-sizing: content-box; }

/* ── Flashcards ── */
.wls .fc-wrap { padding: 8px 0 16px; }
.wls .fc-controls button { min-height: 44px; background: var(--p); border-radius: 14px; padding: 10px 16px; font-size: 14px; font-weight: 800; transition: background-color 160ms ease-out, transform 120ms var(--eo); }
.wls .fc-controls button:active, .wls .fc-btns button:active { transform: scale(.97); }
.wls .fc-counter { color: var(--mu); font-weight: 800; }
.wls .flashcard-front, .wls .flashcard-back { border: 1px solid var(--bd); border-radius: 24px; box-shadow: var(--sh); }
.wls .flashcard-front img { background: var(--well); border-radius: 14px; padding: 8px; box-sizing: content-box; }
.wls .flashcard-back { background: var(--emb); border-color: transparent; }
.wls .fc-question { font-size: 17px; font-weight: 700; color: var(--tx); }
.wls .fc-correct-label { color: var(--em); font-weight: 800; }
.wls .fc-btns button { min-height: 48px; border-radius: 14px; font-size: 15px; font-weight: 800; }
.wls #fc-got-it { background: var(--emb); color: var(--em); }
.wls #fc-review { background: var(--cob); color: var(--co); }
.wls .fc-progress-bar-wrap { background: #e6e6e2; border-radius: 999px; padding-top: 0; height: 7px; }
.wls .fc-progress-bar { background: var(--p); border-radius: 999px; height: 7px; }
.wls .fc-filter-btn { min-height: 36px; background: var(--well); border: 1px solid transparent; border-radius: 999px; padding: 6px 12px; font-size: 13px; font-weight: 700; color: var(--tx); }
.wls .fc-filter-btn.active { background: var(--p); color: #fff; border-color: var(--p); }
.wls .fc-seo-section { background: transparent; box-shadow: none; border-radius: 0; }

/* ── Progress page ── */
.wls .prog-card { padding: 18px 20px; }
.wls .prog-card h2 { font-size: 17px; font-weight: 800; color: var(--ink); }
.wls .prog-bar-wrap, .wls .cat-bar-wrap { background: var(--well); border-radius: 999px; }
.wls .prog-bar { background: var(--p); border-radius: 999px; }
.wls .prog-start-btn { background: var(--cta); border-radius: 16px; min-height: 52px; font-weight: 800; box-shadow: 0 10px 24px rgba(220,38,38,.26); }

/* ── Support page ── */
.wls .letter-box { background: var(--amb); border-color: #f3d9a6; box-shadow: none; }
.wls .goes-row { padding: 14px 16px; }
.wls .sp-heart-ico { display: grid; place-items: center; width: 84px; height: 84px; margin: 0 auto; border-radius: 26px; background: var(--cob); color: var(--cta); }
.wls .cta-btn .cta-cup { display: inline-grid; place-items: center; vertical-align: -3px; }
.wls .goes-row .gr-txt { font-size: 15.5px; color: var(--tx); }

/* ── Learners page (lp-*) and its embedded quiz (lq-*) ── */
.wls .lp-intro { font-size: 18px; line-height: 1.65; color: var(--tx); }
.wls .lp-stat { background: #fff; border: 1px solid var(--bd); border-radius: 20px; box-shadow: var(--sh); }
.wls .lp-stat-num { color: var(--p); }
.wls .lp-stat.green { background: var(--emb); border-color: transparent; box-shadow: none; }
.wls .lp-stat.green .lp-stat-num { color: var(--em); }
.wls .lp-h2 { font-size: 21px; font-weight: 800; color: var(--ink); border: 0; padding: 0; letter-spacing: -.2px; }
.wls .lp-topic { background: #fff; border: 1px solid var(--bd); border-radius: 999px; color: var(--tx); }
.wls .lp-mode, .wls .lp-resource { background: #fff; border: 1px solid var(--bd); border-radius: 20px; box-shadow: var(--sh); }
.wls .lp-resource:hover { border-color: var(--bd2); }
.wls .lp-mode-icon.blue { background: var(--tint); color: var(--p); }
.wls .lp-mode-icon.green { background: var(--emb); color: var(--em); }
.wls .lp-mode-icon.amber { background: var(--amb); color: var(--am); }
.wls .lp-tip { background: var(--amb); border: 0; border-radius: 20px; color: #6e4a12; }
.wls .lq { background: #fff; border: 1px solid var(--bd); border-radius: 24px; box-shadow: var(--sh); }
.wls .lq-opt { border: 1px solid var(--bd); border-radius: 16px; background: #fff; transition: border-color 160ms var(--eo), background-color 160ms var(--eo); }
.wls .lq-opt:hover:not(:disabled) { border-color: var(--bd2); background: #fff; }
.wls .lq-opt.sel { border-color: var(--p); background: #f3f6fb; box-shadow: 0 0 0 1px var(--p); }
.wls .lq-opt.right { border-color: var(--em); background: var(--emb); box-shadow: 0 0 0 1px var(--em); }
.wls .lq-opt.wrong { border-color: var(--co); background: var(--cob); box-shadow: 0 0 0 1px var(--co); }
.wls .lq-key { border-radius: 10px; }
.wls .lq-img { background: var(--well); border-radius: 16px; }
.wls .lq-btn, .wls .lq-done-btn { min-height: 52px; border-radius: 16px; background: var(--p); font-weight: 800; }
.wls .lq-feedback.ok { background: var(--emb); }
.wls .lq-feedback.no { background: var(--cob); }

/* ── 404 ── */
.wls .nf-home-btn { min-height: 54px; border-radius: 18px; background: var(--cta); box-shadow: 0 10px 24px rgba(220,38,38,.26); font-weight: 800; }
.wls .nf-home-btn:hover { background: var(--cta-h); }
.wls .nf-link { background: #fff; border: 1px solid var(--bd); border-radius: 16px; box-shadow: var(--sh); color: var(--p); }
.wls .nf-code { color: var(--p); }

/* ── Language landers: homepage hero + CTA, in their own language ── */
.wls .lander { padding: 0 16px 28px; }
.wls .lander-hero { padding: 6px 0 8px; }
.wls .lander-hero::before { content: none; }
.wls .lander h1 { font-size: 28px; font-weight: 850; line-height: 1.14; letter-spacing: -.6px; color: var(--p); margin: 4px 0 10px; }
.wls .lander-hero > p { font-size: 16px; line-height: 1.6; color: var(--mu); margin: 0; }
.wls .lander .info { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 18px 0 18px; }
.wls .lander .info-item { display: flex; flex-direction: column; justify-content: center; background: #fff; border: 1px solid var(--bd); border-radius: 16px; box-shadow: var(--sh); padding: 12px 14px; font-size: 13px; line-height: 1.35; color: var(--mu); }
.wls .lander .info-item strong { display: block; font-size: 14px; font-weight: 800; color: var(--tx); margin-bottom: 2px; }
.wls .lander a.btn { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; height: 58px; margin: 0 0 8px; padding: 0 20px; border-radius: 18px; background: var(--cta); color: #fff; font-size: 17px; font-weight: 800; text-decoration: none; box-shadow: 0 10px 24px rgba(220,38,38,.28); transition: background-color 160ms ease-out, transform 120ms var(--eo); }
.wls .lander a.btn::before { content: ''; flex: none; width: 24px; height: 24px; border-radius: 50%; background: rgba(255,255,255,.2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23fff' d='M3 1.6v8.8L10.4 6z'/%3E%3C/svg%3E") center no-repeat; }
.wls .lander a.btn:hover { background: var(--cta-h); }
.wls .lander a.btn:active { transform: scale(.97); }
.wls .lander ul, .wls .lander ol { padding-left: 22px; }
.wls .lander .sample { background: #fff; border: 1px solid var(--bd); border-radius: 20px; box-shadow: var(--sh); padding: 14px 16px; margin: 0 0 10px; }
.wls .lander .sample p:first-child { font-weight: 800; color: var(--tx); margin-bottom: 4px; }
.wls .lander .links { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 8px; font-size: 0; }
.wls .lander .links a { display: inline-flex; align-items: center; min-height: 40px; padding: 0 14px; border-radius: 999px; background: #fff; border: 1px solid var(--bd); font-size: 15px; font-weight: 700; text-decoration: none; color: var(--p); }
.wls .lander .back { font-size: 15px; }
@media (min-width: 900px) { .wls .lander h1 { font-size: 40px; letter-spacing: -1px; } .wls .lander-hero > p { font-size: 17px; } .wls .lander a.btn { max-width: 420px; } }

/* ── Printable test page: screen only, the print layout is untouched ── */
@media screen {
  .wls .page { max-width: 760px; margin: 0 auto; padding: 0 16px 28px; background: transparent; box-shadow: none; }
  .wls .page > nav a { display: inline-flex; align-items: center; height: 30px; padding: 0 12px; border-radius: 999px; background: var(--tint); color: var(--p); font-size: 13px; font-weight: 800; text-decoration: none; }
  .wls .page h1 { font-size: 28px; font-weight: 850; line-height: 1.14; letter-spacing: -.6px; color: var(--p); }
  .wls .page h2 { color: var(--ink); }
  .wls .info-bar span { background: #fff; border: 1px solid var(--bd); border-radius: 999px; }
  .wls .print-btn { border-radius: 16px; background: var(--p); min-height: 48px; font-weight: 800; }
  .wls .online-cta { background: var(--p); border-radius: 24px; }
  .wls .online-cta a { background: var(--cta); border-radius: 16px; }
  .wls .q-item { background: #fff; border: 1px solid var(--bd); border-radius: 20px; box-shadow: var(--sh); }
  .wls .q-opt.correct { color: var(--em); }
  .wls .answer-key, .wls .key-item { border-radius: 16px; }
  .wls .related a { border-radius: 999px; }
  @media (min-width: 900px) { .wls .page h1 { font-size: 40px; letter-spacing: -1px; } }
}
@media print { .wls .wls-top, .wls .nav-drawer, .wls .nav-overlay { display: none !important; } }

/* ── Nav drawer (all pages) ── */
.wls .nav-overlay { background: rgba(12,42,89,.38); }
.wls .nav-drawer { width: 280px; right: -300px; border-radius: 24px 0 0 24px; box-shadow: -12px 0 40px rgba(12,42,89,.18); overflow: hidden; }
.wls .nav-drawer.open { right: 0; }
.wls .nav-drawer-head { background: var(--p); padding: 20px 18px 18px; }
.wls .nav-drawer-head span { font-size: 16px; font-weight: 800; }
.wls .nav-close { width: 40px; height: 40px; border-radius: 12px; background: rgba(255,255,255,.16); }
.wls .nav-links { padding: 10px 10px; overflow-y: auto; }
.wls .nav-link { border-radius: 14px; padding: 12px 14px; font-size: 15.5px; font-weight: 600; color: var(--tx); }
.wls .nav-link:hover { background: var(--well); }
.wls .nav-link.active { background: var(--tint); color: var(--p); font-weight: 800; }
.wls .nav-sep { background: var(--bd); margin: 6px 8px; }
.wls .nav-version { color: #9aa0ab; border-top-color: var(--bd); }

@media (prefers-reduced-motion: reduce) {
  .wls .wls-top .burger-btn:active, .wls .gd-cta-btn:active, .wls .lp-cta-btn:active, .wls .cta-box a:active,
  .wls .btn-send:active, .wls .lander a.btn:active, .wls .fc-controls button:active, .wls .fc-btns button:active,
  .wls .gd-related a:hover, .wls .gd-hub-card:hover { transform: none; }
  .wls .gd-faq summary::after, .wls .faq-section summary::after, .wls .lander summary::after { transition: none; }
  .wls .wls-top .burger-btn, .wls .wls-top .burger-btn span { transition: none; }
}