html { scroll-padding-top: 100px; }
.skip-link { position: fixed; top: -100px; left: 16px; z-index: 1000; padding: 12px 18px; background: #fff; color: #17243e; }
.skip-link:focus { top: 10px; }
:focus-visible { outline: 3px solid #227d9f; outline-offset: 4px; }
.form-note { min-height: 3em; }
.field select { width: 100%; padding: 11px 12px; border: 1px solid #ccd2df; border-radius: 9px; font: inherit; color: #17243e; background: #edf1f7; }
.package-unit { margin: 10px 0 0; color: #515d71; font-size: 14px; }
.package-conditions { max-width: 72ch; margin: 24px auto; line-height: 1.7; }
.early-cta { display: inline-flex; margin-top: 18px; padding: 13px 20px; border-radius: 8px; background: #217d9f; color: white; text-decoration: none; font-weight: 600; }
.subject-link { display: inline-block; margin-top: 14px; color: #216884; text-underline-offset: 4px; }
.subject-example { padding: 24px; margin: 24px 0; border-left: 3px solid #217d9f; background: #fff; border-radius: 8px; }
.subject-page main > .wrap p, .subject-page main > .wrap li { line-height: 1.7; }
.subject-page main > .wrap h2 { margin-top: 30px; }
.subject-page main > .wrap details { padding: 12px 0; border-bottom: 1px solid #ccd2df; }
.subject-page .hero .lede { font-size: 18px; line-height: 1.6; color: #515d71; }
.subject-page main > .wrap > p { max-width: 72ch; }
.subject-links { line-height: 1.8; }
.source-note { font-size: 14px; line-height: 1.65; }
.problem-card { min-height: 220px; }
.learning-body { padding-top: 36px; padding-bottom: 36px; }
.learning-body > h1 { max-width: 22ch; font-size: clamp(30px, 4.5vw, 48px); line-height: 1.17; margin: 24px 0; }
.learning-body .lede { max-width: 68ch; font-size: 18px; line-height: 1.65; color: #515d71; }
.learning-body .learning-section { padding: 24px 0; max-width: 76ch; border-bottom: 1px solid #d7deE8; }
.learning-body .learning-section h2 { font-size: clamp(24px, 3vw, 30px); line-height: 1.25; margin: 0 0 16px; }
.learning-body .learning-section p { font-size: 16px; line-height: 1.85; margin: 0; }
.learning-related { margin: 28px 0; line-height: 2; text-underline-offset: 4px; }
.article-meta { color: #515d71; font-size: 13px; margin: 20px 0; }
.article-toc { display: grid; gap: 10px; max-width: 76ch; padding: 20px; border-left: 3px solid #217d9f; background: #fff; border-radius: 8px; margin: 28px 0 8px; }
.article-toc a { padding: 5px 0; color: #216884; line-height: 1.6; text-underline-offset: 4px; }
.breadcrumbs { padding-top: 24px; padding-bottom: 0; font-size: 13px; color: #515d71; line-height: 1.8; }
.breadcrumbs a { text-underline-offset: 3px; }
.term-table { margin-top: 22px; }
.term-table table { border-collapse: collapse; width: 100%; font-size: 16px; background: #fff; }
.term-table caption { text-align: left; padding: 12px 0; font-weight: 600; }
.term-table th, .term-table td { text-align: left; padding: 12px; border-bottom: 1px solid #dce3eb; overflow-wrap: anywhere; }
.term-table thead { background: #e3edf2; }
.term-table tbody th { font-weight: 500; }
.guide-index { display: grid; gap: 20px; margin-top: 32px; }
.guide-index article { padding: 24px; background: #fff; border: 1px solid #dce3eb; border-radius: 14px; }
.guide-index h2 { font-size: 26px; line-height: 1.3; margin: 14px 0; }
.guide-index h2 a { text-decoration-thickness: 1px; text-underline-offset: 5px; }
.guide-index p { line-height: 1.75; color: #515d71; }
@media(min-width: 760px) { .guide-index { grid-template-columns: 1fr 1fr; } }
.faq-compact { margin-top: 48px; margin-bottom: 48px; padding-top: 0; padding-bottom: 0; }
.faq-compact .faq-panel { padding: 0; }
.faq-shell { display: grid; border: 1px solid #d8deE7; border-radius: 20px; background: #fff; box-shadow: 0 18px 50px -36px #17243e66; overflow: hidden; }
.faq-rail { padding: 26px 22px; background: #f5f7fa; border-bottom: 1px solid #e1e6ee; }
.faq-rail h2 { margin: 10px 0 12px; font-size: clamp(28px, 3vw, 36px); line-height: 1.15; }
.faq-intro { margin: 0; color: #515d71; font-size: 15px; line-height: 1.6; }
.faq-topics { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 24px; }
.faq-topics[hidden], .faq-panel[hidden] { display: none; }
.faq-topic { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 12px; min-height: 48px; border: 1px solid #dbe1e9; border-radius: 9px; color: #37445b; background: transparent; font: inherit; font-size: 14px; font-weight: 600; text-align: left; cursor: pointer; transition: background .18s, color .18s, border-color .18s; }
.faq-topic:hover { background: #e9eef4; }
.faq-topic[aria-pressed="true"] { color: #fff; background: #217d9f; border-color: #217d9f; }
.faq-count { font: 11px 'JetBrains Mono', monospace; opacity: .8; }
.faq-help { display: none; margin: 24px 0 0; font-size: 13px; color: #515d71; line-height: 1.8; }
.faq-help a { display: inline-block; padding: 6px 0; color: #216884; font-size: 14px; text-underline-offset: 4px; }
.faq-content { padding: 10px 20px 20px; min-width: 0; }
.faq-panel-title { font-size: 18px; margin: 18px 0 10px; }
.faq-enhanced .faq-panel-title { font: 12px 'JetBrains Mono', monospace; color: #515d71; text-transform: uppercase; letter-spacing: .06em; margin: 18px 0 12px; }
.faq-compact .faq-list { display: block; max-width: none; }
.faq-compact .faq-item { border: 0; border-bottom: 1px solid #e1e6ee; border-radius: 0; box-shadow: none; background: transparent; overflow: visible; }
.faq-compact .faq-item:last-child { border-bottom: 0; }
.faq-compact .faq-item summary { padding: 18px 0; font-size: 16px; line-height: 1.5; font-weight: 500; gap: 20px; }
.faq-compact .faq-item summary::after { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; background: #edf3f6; font-size: 18px; }
.faq-compact .faq-item[open] summary { color: #216884; }
.faq-compact .faq-item p { padding: 0 34px 20px 0; font-size: 16px; line-height: 1.75; }
@media(min-width: 760px) {
  .faq-shell { grid-template-columns: 280px minmax(0, 1fr); }
  .faq-rail { padding: 32px 28px; border-bottom: 0; border-right: 1px solid #e1e6ee; }
  .faq-topics { grid-template-columns: 1fr; }
  .faq-topic { padding: 12px 14px; }
  .faq-content { padding: 16px 32px 24px; }
  .faq-help { display: block; margin-top: 28px; }
}
@media(max-width: 860px) {
  .nav-links:not(.open) { visibility: hidden; pointer-events: none; }
  .nav-links.open { visibility: visible; pointer-events: auto; }
}
@media(prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* Country assets and restrained motion; text remains visible without JavaScript. */
.country-chip .flag.flag-image,.country-card summary .flag.flag-image{display:inline-flex;align-items:center;justify-content:center;width:28px;height:20px;padding:0;border:0;border-radius:3px;background:transparent;flex-shrink:0;overflow:hidden;box-shadow:0 0 0 1px rgba(22,35,63,.12)}
.flag-image img{display:block;width:100%;height:100%;object-fit:cover}
.country-chip .flag.flag-globe,.country-card summary .flag.flag-globe{display:inline-flex;align-items:center;justify-content:center;width:28px;height:22px;padding:0;border:0;background:transparent;flex-shrink:0}
:root{--ease-out:cubic-bezier(.23,1,.32,1);--motion-feedback:160ms}
@media(prefers-reduced-motion:no-preference){
 .btn,.nav-cta,button[type="submit"],.guide-more{transition:transform var(--motion-feedback) var(--ease-out),background-color var(--motion-feedback) ease}
 .btn:active,.nav-cta:active,button[type="submit"]:not(:disabled):active{transform:scale(.98)}
 @media(hover:hover) and (pointer:fine){.guide-more:hover svg{transform:translateX(4px)}.btn:hover,.nav-cta:hover{transform:translateY(-2px)}}
}
@media(prefers-reduced-motion:reduce){.guide-index article:hover,.guide-index article:hover .guide-more svg{transform:none!important}}

/* Readable FAQ counts and comfortable language controls. */
.faq-count{opacity:1}
.faq-topic[aria-pressed="true"] .faq-count{color:#fff}
.lang-switch a,.lang-switch span{min-width:44px;min-height:44px;justify-content:center;padding:8px}
.lang-switch a:focus-visible{outline:2px solid var(--primary);outline-offset:3px}
@media(max-width:440px){header .nav{gap:8px}header .logo{font-size:18px;gap:6px}header .logo-mark{height:28px}header .nav-toggle{padding:4px;flex-shrink:0}header .lang-switch{gap:2px;flex-shrink:0}}
@media(max-width:360px){header .nav{padding-left:16px;padding-right:16px}header .logo{font-size:16px}}

/* WhatsApp trial-lesson button in the contact section (no action yet). */
.btn-whatsapp{background:#15803D;color:#fff;box-shadow:0 6px 0 #106B32;font-family:inherit;cursor:pointer;margin:0 0 24px 8px}
.btn-whatsapp:hover{box-shadow:0 8px 0 #106B32}