/* AvoLingo — typography and direction for the translated sites
   (tr, ja, vi, fr, es, ar). Loaded last, only by those pages.
   Turkish, French and Spanish need nothing here: DM Sans covers them. */

/* ============ Fonts ============ */
/* Latin stays DM Sans wherever it can; each script falls through to a
   matching face. Vietnamese needs one face for the whole word, because DM Sans
   has no precomposed Vietnamese letters and mixing faces inside a word shows. */
:root:lang(ja) {
  --font-sans: "DM Sans", "Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN",
               "Yu Gothic", Meiryo, sans-serif;
}
:root:lang(vi) {
  --font-sans: "Be Vietnam Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
}
:root:lang(ar) {
  --font-sans: "DM Sans", "IBM Plex Sans Arabic", "Noto Sans Arabic", Tahoma, sans-serif;
}

/* ============ Japanese ============ */
/* No spaces between words: break by phrase where the browser can,
   otherwise anywhere — never keep-all, which would stop wrapping entirely. */
:lang(ja) body { word-break: normal; line-break: strict; overflow-wrap: anywhere; }
@supports (word-break: auto-phrase) {
  :lang(ja) body { word-break: auto-phrase; }
}
:lang(ja) .step__num::before { content: "ステップ " counter(step, decimal-leading-zero) " — "; }

/* ============ Vietnamese ============ */
/* Stacked diacritics (Ể, Ộ) need more room than the 0.9 Latin display leading. */
:lang(vi) .headline,
:lang(vi) .h1,
:lang(vi) .h2,
:lang(vi) .heading,
:lang(vi) .hero-slider__title { line-height: 1.12; }
:lang(vi) .step__num::before { content: "Bước " counter(step, decimal-leading-zero) " — "; }

/* ============ German ============ */
/* Long compounds: let body copy hyphenate (the browser's German dictionary),
   and never let one word push a box wider than its column. */
:lang(de) :is(p, li, dd, figcaption, label, .body, .subheading) { hyphens: auto; }
:lang(de) body { overflow-wrap: break-word; }

/* ============ Turkish, French, Spanish ============ */
:lang(de) .step__num::before { content: "Schritt " counter(step, decimal-leading-zero) " — "; }
:lang(tr) .step__num::before { content: "Adım " counter(step, decimal-leading-zero) " — "; }
:lang(fr) .step__num::before { content: "Étape " counter(step, decimal-leading-zero) " — "; }
:lang(es) .step__num::before { content: "Paso " counter(step, decimal-leading-zero) " — "; }

/* ============ Arabic ============ */
/* Tracking breaks Arabic letter joining, and the script needs taller lines. */
:lang(ar) body, :lang(ar) body * { letter-spacing: 0 !important; }
:lang(ar) .headline,
:lang(ar) .h1,
:lang(ar) .h2,
:lang(ar) .heading,
:lang(ar) .hero-slider__title { line-height: 1.3; }
:lang(ar) .subheading,
:lang(ar) .body { line-height: 1.7; }
:lang(ar) .step__num::before { content: "الخطوة " counter(step, decimal-leading-zero) " — "; }
/* Arrows point the way the text runs. */
[dir="rtl"] .arrow-link svg,
[dir="rtl"] .acircle svg,
[dir="rtl"] .btn svg:not(.store-icon) { transform: scaleX(-1); }

/* Generated from the :lang(ko) typography rules (line-height, letter-spacing, text-wrap,
   hero face/size). Korean word-locking and Korean-copy layout tweaks are deliberately not copied. */

/* from site.css */
:lang(ja) .headline, :lang(ja) .h1, :lang(ja) .h2, :lang(ja) .heading { line-height: 1.16; letter-spacing: -0.02em; }
:lang(ja) .subheading, :lang(ja) .body { letter-spacing: -0.005em; }
:lang(ja) #needs .h2 { line-height: var(--lh-heading); letter-spacing: var(--kern-heading); }
:lang(ja) #needs .subheading { line-height: var(--lh-ko-body); letter-spacing: normal; }
:lang(ja) .needs-card__title { line-height: var(--lh-heading); }
:lang(ja) .needs-card__body { line-height: var(--lh-ko-body); }
@media (max-width: 640px) {
  :lang(ja) .needs-card__title { line-height: var(--lh-heading); }
}
:lang(ja) .method__trigger { line-height: var(--lh-heading); letter-spacing: var(--kern-heading); }
:lang(ja) .method__title { line-height: var(--lh-heading); letter-spacing: var(--kern-heading); }
:lang(ja) .method__lede, :lang(ja) .method__text { line-height: var(--lh-ko-body); }
:lang(ja) .approw__title { line-height: var(--lh-heading); letter-spacing: var(--kern-heading); }
:lang(ja) .approw__body, :lang(ja) .appbullets__item { line-height: var(--lh-ko-body); }
:lang(ja) .brands .h2 { line-height: var(--lh-heading); letter-spacing: var(--kern-heading); }
:lang(ja) .scatter__title { line-height: var(--lh-heading); letter-spacing: var(--kern-heading); }
:lang(ja) .scatter__body { line-height: var(--lh-ko-body); letter-spacing: 0; }
:lang(ja) .scatter__question { line-height: var(--lh-heading); }
:lang(ja) .curriculum__heading { line-height: var(--lh-heading); letter-spacing: var(--kern-heading); }
:lang(ja) .curriculum__lede, :lang(ja) .curriculum__text { line-height: var(--lh-ko-body); letter-spacing: 0; }
:lang(ja) .curriculum__title { line-height: var(--lh-heading); }
:lang(ja) .hiw .h2 { line-height: var(--lh-heading); letter-spacing: var(--kern-heading); }
:lang(ja) .hiw__title { line-height: var(--lh-heading); }
:lang(ja) .hiw__body { line-height: var(--lh-ko-body); }
:lang(ja) .hero-slider__title { line-height: var(--lh-heading); letter-spacing: var(--kern-heading); }
:lang(ja) .hero-slider__body { line-height: var(--lh-ko-body); letter-spacing: normal; }
:lang(ja) .belief__heading { line-height: var(--lh-heading); letter-spacing: var(--kern-heading); }
:lang(ja) .belief__title { line-height: var(--lh-heading); }
:lang(ja) .belief__lede, :lang(ja) .belief__body { line-height: var(--lh-ko-body); letter-spacing: 0; }
:lang(ja) .paths__title { line-height: var(--lh-heading); }
:lang(ja) .paths__text, :lang(ja) .paths__line { line-height: var(--lh-ko-body); }
:lang(ja) .ctaopen__title { line-height: var(--lh-heading); }
:lang(ja) .ctaopen__line { line-height: var(--lh-ko-body); }
:lang(ja) .form-notice { line-height: var(--lh-ko-body); }
:lang(ja) .eg-note { line-height: var(--lh-ko-body); }
:lang(ja) .bz-roles span { line-height: var(--lh-ko-body); }
:lang(ja) .pub-unit__line, :lang(ja) .pub-unit__text, :lang(ja) .pub-flow__v, :lang(ja) .pub-review li { line-height: var(--lh-ko-body); }
:lang(ja) .pub-unit__title { line-height: var(--lh-heading); }
:lang(ja) .inq__msg, :lang(ja) .inq-card .field__hint { line-height: var(--lh-ko-body); }
:lang(ja) .inq-panel__title { line-height: var(--lh-heading); }
:lang(ja) .inq-panel__line { line-height: var(--lh-ko-body); }
:lang(ja) .tctx__title { line-height: var(--lh-heading); letter-spacing: var(--kern-heading); }
:lang(ja) .tctx__body { line-height: var(--lh-ko-body); }
:lang(ja) .form-direct { line-height: var(--lh-ko-body); }

/* from closing.css */
:lang(ja) .closing__phrase { line-height: var(--lh-heading); letter-spacing: var(--kern-heading); }

/* from business.css */
:lang(ja) .bz-app__tab-title { line-height: var(--lh-heading); letter-spacing: var(--kern-heading); }
:lang(ja) .bz-app__tab-text, :lang(ja) .bz-app__caption { line-height: var(--lh-ko-body); }
:lang(ja) .bz-app__head .bz-line { text-wrap: balance; }
:lang(ja) .bz .headline, :lang(ja) .bz .h2, :lang(ja) .bz .h4 { line-height: var(--lh-heading); letter-spacing: var(--kern-heading); }
:lang(ja) .bz-line, :lang(ja) .bz-hero__line { line-height: var(--lh-ko-body); letter-spacing: 0; }
:lang(ja) .bz-hero__line, :lang(ja) .bz-wide__head .bz-line, :lang(ja) .bz-close__line { text-wrap: balance; }

/* from business-chapters.css */
:lang(ja) .bc-head__title, :lang(ja) .bc-box__title { line-height: var(--lh-heading); letter-spacing: var(--kern-heading); }
:lang(ja) .bc-head__line, :lang(ja) .bc-box__text { line-height: var(--lh-ko-body); }

/* from business-industries.css */
:lang(ja) .bz-ind__desc { line-height: var(--lh-ko-body); }

/* from business-ui.css */
:lang(ja) .bu-section h2, :lang(ja) .bu-compare__title { line-height: var(--lh-heading); letter-spacing: var(--kern-heading); }
:lang(ja) .bu-section p, :lang(ja) .bu-compare__list li { line-height: var(--lh-ko-body); }
:lang(ja) .ks-section h2 { line-height: var(--lh-heading); letter-spacing: var(--kern-heading); }
:lang(ja) .ks-section p { line-height: var(--lh-ko-body); }
:lang(ja) .bu-section .ks-ops__label { line-height: var(--lh-body); }

/* from individuals.css */
:lang(ja) .iv-perks h2, :lang(ja) .iv-perks__title { line-height: var(--lh-heading); letter-spacing: var(--kern-heading); }
:lang(ja) .iv-perks p { line-height: var(--lh-ko-body); }
:lang(ja) .iv-daily__title { line-height: var(--lh-heading); letter-spacing: var(--kern-heading); }
:lang(ja) .iv-daily__wide .iv-daily__title { line-height: var(--lh-heading); letter-spacing: var(--kern-heading); }
:lang(ja) .iv-daily h2, :lang(ja) .iv-daily__title { line-height: var(--lh-heading); letter-spacing: var(--kern-heading); }
:lang(ja) .iv-daily p { line-height: var(--lh-ko-body); }
:lang(ja) .iv-hero__sub { line-height: var(--lh-ko-body); }
:lang(ja) .iv-tags__line, :lang(ja) .iv-daily__note, :lang(ja) .iv-faq__more { line-height: var(--lh-ko-body); }

/* from individuals-hero.css */
:lang(ja) .iv-hero { --iv-face: calc(18.6svh - 0.8vw - 26.5px); }
@media (min-height: 760px) {
  :lang(ja) .iv-hero { --iv-face: calc(19.6svh - 1.2vw - 28.4px); }
}
@media (min-aspect-ratio: 3/1) {
  :lang(ja) .iv-hero { --iv-face: calc(10.4svh - 2.8vw + 81.4px); }
}
@media (min-aspect-ratio: 3/1) and (min-height: 700px) {
  :lang(ja) .iv-hero { --iv-face: calc(20.2svh - 2.6vw + 2.8px); }
}
:lang(ja) .iv-hero__title { line-height: var(--lh-heading); letter-spacing: var(--kern-heading); }
@media (max-width: 959.98px) {
  :lang(ja) .iv-hero { --iv-size: var(--fs-headline); }
}
@media (max-width: 860px) {
  :lang(ja) .iv-hero { --iv-size: min(var(--fs-h1), calc((100vw - 2 * var(--stage-gutter)) / 6.6)); }
}

/* from individuals-tags.css */
:lang(ja) .iv-tags__title { line-height: var(--lh-heading); letter-spacing: var(--kern-heading); }

/* from publishers.css */
:lang(ja) .pub-section h1, :lang(ja) .pub-section h2 { line-height: var(--lh-heading); letter-spacing: var(--kern-heading); }
:lang(ja) .pub-section p { line-height: var(--lh-ko-body); }
:lang(ja) .pub-card p:lang(en) { line-height: var(--lh-body); }
:lang(ja) .pub-note { line-height: var(--lh-ko-body); }

/* from schools.css */
:lang(ja) .ks-section h1, :lang(ja) .ks-section h2 { line-height: var(--lh-heading); letter-spacing: var(--kern-heading); }
:lang(ja) .ks-section p { line-height: var(--lh-ko-body); }

/* from schools-ops.css */
:lang(ja) .ks-ops__h3 { line-height: var(--lh-heading); letter-spacing: var(--kern-heading); }
:lang(ja) .ks-section .ks-ops__label { line-height: var(--lh-body); }

/* from universities.css */
:lang(ja) .uni-section h1, :lang(ja) .uni-section h2 { line-height: var(--lh-heading); letter-spacing: var(--kern-heading); }
:lang(ja) .uni-section p, :lang(ja) .uni-section figcaption { line-height: var(--lh-ko-body); }
:lang(ja) .uni-ops__h3 { line-height: var(--lh-heading); letter-spacing: var(--kern-heading); }
:lang(ja) .uni-section .uni-ops__label { line-height: var(--lh-body); }
:lang(ja) .uni-ops__aux { line-height: var(--lh-ko-body); }

/* from uni-student.css */
:lang(ja) .us-box__title, :lang(ja) .us-wide__title { line-height: var(--lh-heading); letter-spacing: var(--kern-heading); }
:lang(ja) .us-head__line, :lang(ja) .us-box__text, :lang(ja) .us-wide__text, :lang(ja) .us-step__t, :lang(ja) .us-rp__now { line-height: var(--lh-ko-body); }

/* ============ Right-to-left: moving parts ============ */
/* Sliders, marquees and scroll rails are driven by scripts that measure and move
   in physical left-to-right terms. Keep their mechanics left-to-right and set
   the content inside back to right-to-left, so the motion works and the
   Arabic text inside still reads correctly. */
[dir="rtl"] .hero-slider__track,
[dir="rtl"] .tctx__track,
[dir="rtl"] .closing__track,
[dir="rtl"] .bz-ind__track,
[dir="rtl"] #quotes,
[dir="rtl"] [data-ivt-row],
[dir="rtl"] .iv-tags__rows,
[dir="rtl"] .marquee,
[dir="rtl"] .marquee__row { direction: ltr; }
[dir="rtl"] .hero-slider__track > *,
[dir="rtl"] .tctx__track > *,
[dir="rtl"] .closing__track > *,
[dir="rtl"] .bz-ind__track > *,
[dir="rtl"] #quotes > *,
[dir="rtl"] [data-ivt-row] > *,
[dir="rtl"] .marquee__row > * { direction: rtl; }

/* Japanese headings, buttons and labels: the build inserts <wbr> between phrases
   (BudouX), so break only there. overflow-wrap is the safety net for one long phrase. */
:lang(ja) :is(h1, h2, h3, h4, h5, h6, summary, button, .headline, .heading, .h1, .h2, .h3,
              .btn, .pill, .nav__link, [class*="title"], [class*="lede"]) {
  word-break: keep-all;
  overflow-wrap: anywhere;
}

/* Keep-together word groups were sized for the English phrases. In the
   translated Latin-script and Arabic pages a group can be wider than its column
   (on phones, and for long phrases even on desktop), so let them wrap.
   Japanese keeps them (BudouX already marks its breaks). */
:is(:lang(tr), :lang(de), :lang(vi), :lang(fr), :lang(es), :lang(ar)) :is(.pub-nowrap, .hero-slider__keep) {
  white-space: normal;
}

/* Right-to-left: the schools / universities / business "ops" list. Its
   progress rail, dots and the links' dot-width overhang sit on the left in
   schools-ops.css; mirror them to the right. */
[dir="rtl"] :is(.ks-ops__list, .uni-ops__list)::before,
[dir="rtl"] :is(.ks-ops__list, .uni-ops__list)::after { left: auto; right: 0; }
[dir="rtl"] :is(.ks-ops__link, .uni-ops__link) {
  margin-left: 0;
  margin-right: calc(-1 * var(--ops-dot));
  padding: 0.48rem calc(0.96rem + var(--ops-dot)) 0.48rem 0.48rem;
}
[dir="rtl"] :is(.ks-ops__dot, .uni-ops__dot) { left: auto; right: calc(var(--ops-dot) / 2 + 1px); }

/* Japanese publishers hero: its keep-together piece 「その練習を、」 is six full-width
   characters, wider than a phone column at the hero size. Scale it to fit. */
@media (max-width: 480px) {
  :lang(ja) .pub-hero__title { font-size: min(13.5vw, 3.6rem); }
}

/* Right-to-left: English content inside the Arabic pages.
   The homepage practice chips type their English phrase out one letter-span at
   a time; in an RTL line those spans would run right-to-left and spell the
   phrase backwards ("esaelp ,ettaL"). Isolate the English phrase as LTR; the
   Arabic label in front of it stays RTL. The English app mock-up likewise. */
[dir="rtl"] .needs-say__value { direction: ltr; unicode-bidi: isolate; }
[dir="rtl"] .belief__roadmap[lang="en"] { direction: ltr; }

/* Home "Remembers you. / Adapts to you.": the Vietnamese lines are about 1.5x
   the English ones, so size the two-line headline to its longer line
   (the column is a size container below 1180, see site.css .tctx__headline). */
@media (max-width: 1179.98px) {
  :lang(vi) .tctx__title { font-size: min(var(--fs-headline), 100cqi / 10.6); }
}