/* wordojo.app in other languages (/hi, /bn, /ta, /es, /zh, /ja, /ar), built by scripts/site-intl.mjs.
   The brand faces carry the Latin letters (Wordojo, Bubble); each language's own system face carries
   the rest, so nothing extra downloads. Headlines in other scripts drop the condensed capitals and
   get room for their marks. Arabic runs right to left from dir="rtl" alone. */
:root { --script: system-ui; }
html:lang(hi) { --script: "Noto Sans Devanagari", "Nirmala UI", "Kohinoor Devanagari", "Mangal"; }
html:lang(bn) { --script: "Noto Sans Bengali", "Nirmala UI", "Kohinoor Bangla", "Vrinda"; }
html:lang(ta) { --script: "Noto Sans Tamil", "Nirmala UI", "Tamil Sangam MN", "Latha"; }
html:lang(zh) { --script: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC"; }
html:lang(ja) { --script: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", "Meiryo", "Noto Sans JP"; }
html:lang(ar) { --script: "Noto Sans Arabic", "Segoe UI", "Geeza Pro", "Tahoma"; }
body.intl { --display: "Archivo", var(--script), "Arial Narrow", system-ui, sans-serif; --body: "Inter", var(--script), "Segoe UI", system-ui, sans-serif; background: var(--paper); color: var(--ink); font-family: var(--body); }

/* Header: the language menu (styled in land.css) sits beside Download */
.intl .nav nav { gap: 14px; }

/* Spaced capitals suit Latin only: other scripts keep their letters joined */
html:not(:lang(es)) .intl .eyebrow, html:not(:lang(es)) .intl .foot-h { letter-spacing: 0; text-transform: none; font-stretch: 100%; font-family: var(--body); font-size: 14px; font-weight: 700; }
/* Shared section bits */
.i-sec { padding: clamp(72px, 9vw, 112px) 0; }
.i-head { max-width: 820px; margin-bottom: clamp(32px, 4vw, 48px); }
.i-h2 { margin: 12px 0 0; font-family: var(--display); font-weight: 900; font-size: clamp(34px, 5vw, 64px); line-height: 1.12; letter-spacing: 0; }
.i-h2 em, .i-h1 em { font-style: normal; color: var(--red); }
.i-h1, .i-h2 { overflow-wrap: break-word; } /* a long word (Tamil) wraps inside a phone */
.i-lede2 { margin-top: 16px; font-size: clamp(17px, 1.6vw, 20px); line-height: 1.6; max-width: 640px; opacity: .86; }
html:lang(es) .i-h2, html:lang(es) .i-h1 { font-stretch: 62%; text-transform: uppercase; line-height: .9; letter-spacing: -.01em; }
html:lang(hi) .i-h2, html:lang(bn) .i-h2, html:lang(ta) .i-h2 { line-height: 1.32; }
html:lang(ta) .i-h2 { font-size: clamp(28px, 3.6vw, 46px); }

/* Hero: the promise on the left, the real app playing on the right */
.i-hero { background: var(--volt); padding: clamp(96px, 9vw, 116px) 0 clamp(64px, 8vw, 96px); }
.i-hero-in { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.i-h1 { margin: 16px 0 22px; font-family: var(--display); font-weight: 900; font-size: clamp(44px, 6.4vw, 92px); line-height: 1.12; letter-spacing: 0; }
html:lang(es) .i-h1 { font-size: clamp(64px, 9vw, 132px); }
.i-h1 em { display: block; }
html:lang(hi) .i-h1, html:lang(bn) .i-h1 { line-height: 1.3; }
html:lang(zh) .i-h1, html:lang(ja) .i-h1 { font-size: clamp(38px, 4.6vw, 66px); line-height: 1.25; line-break: strict; }
html:lang(zh) .i-h2, html:lang(ja) .i-h2 { font-size: clamp(30px, 4vw, 52px); line-height: 1.3; }
html:lang(ta) .i-h1 { line-height: 1.34; font-size: clamp(34px, 4.6vw, 64px); }
.i-lede { font-size: clamp(18px, 1.7vw, 21px); line-height: 1.6; max-width: 34em; }
.i-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.i-cta .btn { min-height: 58px; padding: 0 28px; font-size: 17px; }
.i-note { display: inline-flex; align-items: flex-start; gap: 10px; margin-top: 22px; padding: 12px 16px; border-radius: 16px; background: rgba(22, 20, 15, .08); font-size: 15px; line-height: 1.5; max-width: 34em; }
.i-note svg { flex: none; width: 20px; height: 20px; margin-top: 1px; }
.i-film { display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; gap: 18px; }
.i-film .film-phone { box-shadow: 0 50px 90px -30px rgba(22, 20, 15, .55), inset 0 0 0 2px #2E2B25; }
.i-chaps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; width: 100%; max-width: 420px; }
.i-chap { display: grid; gap: 7px; padding: 10px 12px 9px; border: 0; border-radius: 14px; background: #fff; color: var(--ink); font: 650 14px/1.3 var(--body); text-align: start; cursor: pointer; transition: background-color .25s, color .25s, transform .2s; }
.i-chap:hover { transform: translateY(-2px); }
.i-chap:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }
.i-chap .bar { height: 3px; border-radius: 2px; background: rgba(22, 20, 15, .12); overflow: hidden; }
.i-chap .bar i { display: block; height: 100%; width: 0; background: var(--ink); }
.i-chap.on { background: var(--ink); color: #FFF7EE; }
.i-chap.on .bar { background: rgba(255, 247, 238, .22); }
.i-chap.on .bar i { background: var(--volt); }
.i-filmnote { font-size: 13px; color: #4A443A; text-align: center; max-width: 420px; }

/* Why now: AI made words cheap; four truths on obsidian */

/* What you practise: three cards with the app's own art */
.i-practise { background: var(--paper); }
.i-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.i-card { overflow: hidden; border-radius: 28px; background: #fff; box-shadow: 0 1px 0 rgba(22, 20, 15, .06), 0 18px 40px -24px rgba(22, 20, 15, .25); }
.i-card img { display: block; width: 100%; height: clamp(220px, 21vw, 290px); object-fit: cover; object-position: center 70%; background: var(--cream); }
.i-card > div { padding: 22px 24px 28px; }
.i-card h3 { margin: 0 0 8px; font: 900 26px/1.2 var(--display); }
.i-card p { margin: 0; font-size: 16px; line-height: 1.65; color: #3D3830; }
.i-card.k-speak img { background: #FFF3B0; }

/* How it works: a real sequence, so numbered */
.i-steps { background: var(--cream); }
.i-steps ol { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin: 0; padding: 0; list-style: none; counter-reset: st; }
.i-steps li { counter-increment: st; padding: 28px 26px; border-radius: 26px; background: var(--paper); }
.i-steps li::before { content: counter(st); display: block; margin-bottom: 14px; font: 900 56px/1 "Archivo", sans-serif; font-stretch: 62%; color: var(--red); }
.i-steps h3 { margin: 0 0 8px; font: 800 21px/1.3 var(--body); }
.i-steps p { margin: 0; font-size: 16px; line-height: 1.6; color: #3D3830; }

/* The coaches */
.i-coaches { background: var(--volt); }
.i-team { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.i-coach { display: grid; justify-items: center; gap: 6px; padding: 22px 16px 24px; border: 0; border-radius: 26px; background: #fff; color: var(--ink); text-align: center; font: inherit; cursor: pointer; transition: transform .25s; }
.i-coach:hover { transform: translateY(-3px); }
.i-coach:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
.i-fig { display: grid; place-items: end center; height: 132px; margin-bottom: 6px; }
.i-coach b { font: 900 22px/1.2 "Archivo", var(--script), sans-serif; }
.i-coach small { font-size: 13px; font-weight: 700; color: var(--red); letter-spacing: .02em; }
.i-coach q { margin-top: 6px; font: italic 500 17px/1.45 var(--serif), var(--script), serif; }
html:not(:lang(es)) .i-coach q { font-style: normal; font-family: var(--body); font-size: 15px; }

/* Pricing reuses the English page's plan cards */
.intl .pricing2 { background: var(--paper); }
.intl .plans2 { margin-top: 0; }
.intl .p-price b { font-family: "Archivo", var(--script), sans-serif; }

/* FAQ */
.intl .faq2 { background: var(--cream); }
.intl .faq-list summary h3 { line-height: 1.45; }
.intl .faq-list details p { line-height: 1.7; }

/* The last word */
.i-final { background: var(--ink); color: #FFF7EE; text-align: center; padding: clamp(80px, 10vw, 128px) 0; }
.i-final .i-h2 { max-width: 900px; margin-inline: auto; }
.i-final .i-h2 em { color: var(--volt); }
.i-final .i-fig { height: 150px; margin-bottom: 12px; }
.i-final .btn { margin-top: 30px; min-height: 58px; padding: 0 30px; font-size: 17px; }
.i-final .fam { --fam-ink: #FFF7EE; }


@media (max-width: 900px) {
  .i-hero-in { grid-template-columns: minmax(0, 1fr); }
  .i-cards, .i-steps ol { grid-template-columns: 1fr; }
  .i-team { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .intl .faq2 .faq-side { position: static; }
}
@media (max-width: 560px) {
  .i-cta .btn { width: 100%; justify-content: center; }
  .i-film .film-phone { transform: scale(.86); transform-origin: top center; margin-bottom: -92px; }
  .i-chaps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .i-fig { height: 104px; }
}
@media (prefers-reduced-motion: reduce) {
  .i-chap, .i-coach { transition: none; }
}