/*
 * Internationalization stylesheet.
 *
 * Loaded on every page, before app.css, so the existing design keeps working
 * unchanged. Only two jobs:
 *
 *   1. True RTL layout mirroring (logical properties + mirroring rules).
 *   2. Per-script typography so Devanagari, Arabic, CJK and Thai get a font
 *      that actually shapes them, without changing the Latin design.
 *
 * Everything here is additive: no existing selector is altered, so the current
 * visual design is preserved.
 */

/* ── Per-script typography ───────────────────────────────────────────────── */

:root {
  --wd-font-latin: "Space Grotesk", "Inter", -apple-system, BlinkMacSystemFont,
    "Segoe UI", sans-serif;
  --wd-font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --wd-font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --wd-font-script: var(--wd-font-latin);
  --wd-leading-tight: 1.1;
  --wd-leading-normal: 1.55;
  --wd-leading-relaxed: 1.7;
}

/* Script faces + metrics. Devanagari, Bengali and Thai need generous line
   height or conjuncts and vowel signs collide with the next line; CJK needs
   tighter letter-spacing because its glyphs already fill the em box. */
html[data-locale="hi"] body,
html[data-locale="ne"] body {
  --wd-font-script: "Noto Sans Devanagari", "Nirmala UI", "Mangal", sans-serif;
  --wd-leading-normal: 1.75;
  --wd-leading-relaxed: 1.85;
}

html[data-locale="bn"] body {
  --wd-font-script: "Noto Sans Bengali", "Nirmala UI", "Bangla MN", sans-serif;
  --wd-leading-normal: 1.75;
}

html[data-locale="ta"] body {
  --wd-font-script: "Noto Sans Tamil", "Nirmala UI", "Tamil MN", sans-serif;
  --wd-leading-normal: 1.75;
}

html[data-locale="te"] body {
  --wd-font-script: "Noto Sans Telugu", "Nirmala UI", "Gautami", sans-serif;
  --wd-leading-normal: 1.75;
}

html[data-locale="kn"] body {
  --wd-font-script: "Noto Sans Kannada", "Nirmala UI", "Tunga", sans-serif;
  --wd-leading-normal: 1.75;
}

html[data-locale="ml"] body {
  --wd-font-script: "Noto Sans Malayalam", "Nirmala UI", "Kartika", sans-serif;
  --wd-leading-normal: 1.75;
}

html[data-locale="gu"] body {
  --wd-font-script: "Noto Sans Gujarati", "Nirmala UI", "Shruti", sans-serif;
  --wd-leading-normal: 1.75;
}

html[data-locale="pa"] body {
  --wd-font-script: "Noto Sans Gurmukhi", "Nirmala UI", "Raavi", sans-serif;
  --wd-leading-normal: 1.75;
}

html[data-locale="si"] body {
  --wd-font-script: "Noto Sans Sinhala", "Iskoola Pota", "Nirmala UI", sans-serif;
  --wd-leading-normal: 1.75;
}

html[data-locale="ar"] body,
html[data-locale="fa"] body,
html[data-locale="ur"] body {
  --wd-font-script: "Noto Naskh Arabic", "Geeza Pro", "Segoe UI", sans-serif;
  --wd-leading-normal: 1.8;
}

html[data-locale="he"] body {
  --wd-font-script: "Noto Sans Hebrew", "Arial Hebrew", sans-serif;
  --wd-leading-normal: 1.7;
}

html[data-locale="th"] body {
  --wd-font-script: "Noto Sans Thai", "Leelawadee UI", sans-serif;
  --wd-leading-normal: 1.85;
}

html[data-locale="zh-Hans"] body,
html[data-locale="zh-Hant"] body {
  --wd-font-script: "Noto Sans SC", "Noto Sans TC", "PingFang SC",
    "Microsoft YaHei", sans-serif;
  --wd-leading-normal: 1.7;
  /* CJK glyphs already fill the em box, so Latin tracking looks wrong. */
  letter-spacing: 0.01em;
}

html[data-locale="ja"] body {
  --wd-font-script: "Noto Sans JP", "Hiragino Sans", "Yu Gothic", sans-serif;
  --wd-leading-normal: 1.7;
  letter-spacing: 0.02em;
}

html[data-locale="ko"] body {
  --wd-font-script: "Noto Sans KR", "Apple SD Gothic Neo", "Malgun Gothic",
    sans-serif;
  --wd-leading-normal: 1.65;
  letter-spacing: 0;
}

html[data-locale="ru"] body,
html[data-locale="uk"] body {
  --wd-font-script: "Inter", "Noto Sans", sans-serif;
  --wd-leading-normal: 1.6;
}

/* Apply the resolved stack to the site's own font variables so existing rules
   that reference var(--display) / var(--sans) keep working. This is the
   bridging trick that avoids touching the 24 page stylesheets. */
body {
  font-family: var(--wd-font-body), var(--wd-font-script);
}

/* Headings use the display face for Latin, script face otherwise. The browser
   picks per glyph, so mixed-script headings (brand name + translation) render
   correctly in one run. */
h1,
h2,
h3,
h4,
h5,
h6,
.display,
.nav-brand,
.hero-title {
  font-family: var(--wd-font-latin), var(--wd-font-script);
  line-height: var(--wd-leading-tight);
  /* Translated headings are routinely longer than the English source. */
  overflow-wrap: break-word;
  word-break: normal;
  line-break: auto;
}

/* Thai has no inter-word spaces, so justify/hyphenate misbehave. */
html[data-locale="th"] body {
  text-align: start;
  hyphens: none;
}


/* ── Scripts added for full world coverage ────────────────────────────────
   Each gets a shaping face and a line height that suits its script.
   Combining marks, stacked vowels and descenders collide at Latin metrics. */

html[data-locale="si"] body,
html[data-locale="dv"] body {
  --wd-font-script: "Noto Sans Sinhala", "Iskoola Pota", "Nirmala UI", sans-serif;
  --wd-leading-normal: 1.75;
}

html[data-locale="dv"] body {
  --wd-font-script: "Noto Sans Thaana", "MV Boli", sans-serif;
  --wd-leading-normal: 1.85;
}

html[data-locale="or"] body {
  --wd-font-script: "Noto Sans Oriya", "Kalinga", sans-serif;
  --wd-leading-normal: 1.75;
}

html[data-locale="mni"] body {
  --wd-font-script: "Noto Sans Meetei Mayek", "Meetei Mayek", sans-serif;
  --wd-leading-normal: 1.7;
}

html[data-locale="am"] body,
html[data-locale="ti"] body {
  --wd-font-script: "Noto Sans Ethiopic", "Nyala", sans-serif;
  --wd-leading-normal: 1.8;
}

html[data-locale="ka"] body {
  --wd-font-script: "Noto Sans Georgian", "Sylfaen", sans-serif;
  --wd-leading-normal: 1.65;
}

html[data-locale="hy"] body {
  --wd-font-script: "Noto Sans Armenian", sans-serif;
  --wd-leading-normal: 1.65;
}

html[data-locale="bo"] body {
  --wd-font-script: "Noto Sans Tibetan", "Microsoft Himalaya", sans-serif;
  --wd-leading-normal: 1.9;
}

html[data-locale="mn"] body,
html[data-locale="mvf"] body {
  --wd-font-script: "Noto Sans Mongolian", sans-serif;
  --wd-leading-normal: 1.8;
}

html[data-locale="my"] body {
  --wd-font-script: "Noto Sans Myanmar", "Padauk", sans-serif;
  --wd-leading-normal: 1.9;
}

html[data-locale="km"] body {
  --wd-font-script: "Noto Sans Khmer", "Khmer OS", sans-serif;
  --wd-leading-normal: 2;
}

html[data-locale="lo"] body {
  --wd-font-script: "Noto Sans Lao", "DokChampa", sans-serif;
  --wd-leading-normal: 1.9;
}

html[data-locale="chr"] body,
html[data-locale="chr-US"] body {
  --wd-font-script: "Noto Sans Cherokee", sans-serif;
  --wd-leading-normal: 1.75;
}

html[data-locale="iu"] body {
  --wd-font-script: "Noto Sans Canadian Aboriginal", sans-serif;
  --wd-leading-normal: 1.8;
}

html[data-locale="arc"] body,
html[data-locale="syr"] body {
  --wd-font-script: "Noto Sans Syriac", "Estrangelo Edessa", sans-serif;
  --wd-leading-normal: 1.9;
}

html[data-locale="ber"] body,
html[data-locale="tzm"] body {
  --wd-font-script: "Noto Sans Tifinagh", sans-serif;
  --wd-leading-normal: 1.8;
}

/* Monospaced numerals stay in the brand mono face for counters, but any
   run of digits inside RTL text keeps its own direction. */
html[dir="rtl"] .num,
html[dir="rtl"] time,
html[dir="rtl"] [data-numeric] {
  direction: ltr;
  unicode-bidi: isolate;
  display: inline-block;
}

/* ── Text expansion safety net ────────────────────────────────────────────── */

/* Translated CTAs and nav labels are much longer than English. These rules stop
   a long translation from clipping, distorting a button or forcing a
   horizontal scrollbar on a phone. */
body {
  overflow-x: hidden;
}

a,
button,
.badge,
.tag {
  overflow-wrap: anywhere;
}

.nav-links a,
.btn,
button {
  white-space: normal;
  line-height: 1.3;
}

/* ── RTL ──────────────────────────────────────────────────────────────────── */

html[dir="rtl"] body {
  text-align: right;
}

/* Neutralize the hard-coded physical direction of the existing site chrome.
   `text-align` and flex `row-reverse` are applied per-component below; this
   block only mirrors the shared primitives. */
html[dir="rtl"] .nav-links,
html[dir="rtl"] .footer-cols,
html[dir="rtl"] .footer-top,
html[dir="rtl"] .footer-legal-links,
html[dir="rtl"] .nav-inner,
html[dir="rtl"] .footer-bottom,
html[dir="rtl"] .cta-row,
html[dir="rtl"] .audience-grid,
html[dir="rtl"] .moments-grid,
html[dir="rtl"] .minds-grid {
  direction: rtl;
}

html[dir="rtl"] .nav-links,
html[dir="rtl"] .footer-cols,
html[dir="rtl"] .audience-grid,
html[dir="rtl"] .moments-grid,
html[dir="rtl"] .minds-grid {
  flex-direction: row-reverse;
}

/* Bring navigation lists back to reading order when they wrap. `row-reverse`
   reverses visual order, which is correct for a single line but wrong once
   the items wrap onto multiple lines in RTL. */
html[dir="rtl"] .footer-legal-links {
  flex-direction: row;
}

html[dir="rtl"] ul,
html[dir="rtl"] ol {
  padding-inline-start: 1.25em;
}

/* Icons that express direction must mirror; icons that do not must not.
   Progress arrows, carousels and "next" chevrons mirror. Brand dots, device
   mocks, checkmarks and the globe glyph must stay identical so they remain
   recognisable and to avoid implying a false affordance. */
html[dir="rtl"] .wd-mirror {
  transform: scaleX(-1);
}

html[dir="rtl"] .wd-no-mirror {
  transform: none;
}

/* Arrow glyphs used as inline text. */
html[dir="rtl"] .arrow-next::before {
  content: "\2190";
}

html[dir="rtl"] .arrow-prev::before {
  content: "\2192";
}

html[dir="rtl"] .nav-dot {
  /* The wordmark dot is decorative, not directional: leave it untouched. */
  transform: none;
}

/* ── Language switcher ────────────────────────────────────────────────────── */

.wd-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.wd-lang {
  position: relative;
  display: inline-block;
}

.wd-lang__summary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  font-size: 0.875rem;
  line-height: 1.2;
  cursor: pointer;
  list-style: none;
  border-radius: 8px;
  border: 1px solid transparent;
}

.wd-lang__summary::-webkit-details-marker {
  display: none;
}

.wd-lang__summary:hover {
  background: rgba(127, 127, 127, 0.12);
}

.wd-lang__globe {
  flex-shrink: 0;
  opacity: 0.75;
}

.wd-lang__chevron {
  flex-shrink: 0;
  opacity: 0.6;
  transition: transform 0.15s ease;
}

.wd-lang[open] .wd-lang__chevron {
  transform: rotate(180deg);
}

.wd-lang[open] .wd-lang__chevron.wd-mirror {
  transform: rotate(180deg) scaleX(-1);
}

.wd-lang__panel {
  position: absolute;
  inset-inline-end: 0;
  margin-block-start: 8px;
  inline-size: min(22rem, calc(100vw - 2rem));
  max-block-size: min(26rem, 70vh);
  overflow-y: auto;
  overscroll-behavior: contain;
  background: #1a1a1a;
  color: #f5f5f5;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.45);
  z-index: 60;
}

/* On narrow screens a right-aligned dropdown overflows the viewport. */
@media (max-width: 30rem) {
  .wd-lang__panel {
    position: fixed;
    inset-inline: 0.75rem;
    inline-size: auto;
    margin-block-start: 0;
  }
}

.wd-lang__search-wrap {
  position: sticky;
  top: 0;
  padding: 10px;
  background: #1a1a1a;
  border-block-end: 1px solid rgba(255, 255, 255, 0.1);
  z-index: 1;
}

.wd-lang__search {
  inline-size: 100%;
  padding: 8px 10px;
  font-size: 0.875rem;
  color: #f5f5f5;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 8px;
}

.wd-lang__search::placeholder {
  color: rgba(255, 255, 255, 0.45);
}

.wd-lang__group {
  padding: 6px 0;
}

.wd-lang__group-label {
  margin: 0;
  padding: 6px 12px 4px;
  font-size: 0.6875rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.4);
}

.wd-lang__ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.wd-lang__option {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 12px;
  font-size: 0.875rem;
  color: rgba(255, 255, 255, 0.82);
  text-decoration: none;
}

.wd-lang__option:hover,
.wd-lang__option:focus-visible {
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
}

.wd-lang__option.is-active {
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  font-weight: 600;
}

.wd-lang__native {
  min-inline-size: 0;
}

.wd-lang__english {
  flex-shrink: 0;
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.4);
}

.wd-lang__option.is-active .wd-lang__english {
  color: rgba(255, 255, 255, 0.65);
}

.wd-lang__empty {
  margin: 0;
  padding: 10px 12px;
  font-size: 0.8125rem;
  color: rgba(255, 255, 255, 0.5);
}

[hidden] {
  display: none !important;
}

/* ── Accessibility ────────────────────────────────────────────────────────── */

/* A visible, high-contrast focus ring that is never removed, and follows the
   text direction so it appears on the correct side in RTL. */
:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
  border-radius: 2px;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

@media (forced-colors: active) {
  :focus-visible {
    outline: 2px solid CanvasText;
  }
}

/* ── Print ────────────────────────────────────────────────────────────────── */

@media print {
  nav,
  footer,
  .wd-skip {
    display: none !important;
  }
}
/* ── Error pages ─────────────────────────────────────────────────────────────
   Rendered outside the normal layout, so they carry their own minimal styling
   and must still respect direction and per-script fonts. */

body.wd-error {
  margin: 0;
  min-height: 100vh;
  display: grid;
  place-items: center;
  background: #0a0a0a;
  color: #f5f5f5;
  font-family: var(--wd-font-body), var(--wd-font-script);
}

.wd-error__main {
  max-width: 34rem;
  padding: 3rem 1.5rem;
  text-align: center;
}

html[dir="rtl"] .wd-error__main {
  text-align: center;
}

.wd-error__code {
  margin: 0 0 0.75rem;
  font-family: var(--wd-font-mono);
  font-size: 0.875rem;
  letter-spacing: 0.18em;
  color: rgba(255, 255, 255, 0.4);
  /* Numerals inside RTL text keep their own direction. */
  direction: ltr;
  unicode-bidi: isolate;
}

.wd-error__title {
  margin: 0 0 1rem;
  font-family: var(--wd-font-latin), var(--wd-font-script);
  font-size: clamp(1.6rem, 5vw, 2.25rem);
  line-height: var(--wd-leading-tight);
  font-weight: 600;
  overflow-wrap: break-word;
}

.wd-error__body {
  margin: 0 0 2rem;
  color: rgba(255, 255, 255, 0.62);
  line-height: var(--wd-leading-normal);
}

.wd-error__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  justify-content: center;
}

.wd-error__actions a {
  display: inline-flex;
  align-items: center;
  padding: 0.75rem 1.5rem;
  border-radius: 999px;
  font-size: 0.9375rem;
  text-decoration: none;
  white-space: normal;
  text-align: center;
}

.wd-error__actions .btn-primary {
  background: #f5f5f5;
  color: #0a0a0a;
}

.wd-error__actions .btn-secondary {
  border: 1px solid rgba(255, 255, 255, 0.25);
  color: #f5f5f5;
}

.wd-error__locale {
  margin-block-start: 2.5rem;
}

.wd-error__locale select {
  background: transparent;
  color: rgba(255, 255, 255, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 8px;
  padding: 0.4rem 0.6rem;
  font-size: 0.8125rem;
}

/* The hero headline is one translatable phrase, so the browser breaks it.
   `balance` reproduces the even multi-line shape of the original design
   without hard-coding <br/> between words, which would have forced a
   word-for-word translation order that is wrong in most languages. */
.wd-hero-title {
  text-wrap: balance;
  /* CJK and Thai wrap per character, so balance needs more room to help. */
  max-inline-size: 14ch;
}

html[data-locale="zh-Hans"] .wd-hero-title,
html[data-locale="zh-Hant"] .wd-hero-title,
html[data-locale="ja"] .wd-hero-title,
html[data-locale="ko"] .wd-hero-title,
html[data-locale="th"] .wd-hero-title,
html[data-locale="km"] .wd-hero-title {
  max-inline-size: 12em;
}

@supports not (text-wrap: balance) {
  .wd-hero-title {
    /* Fallback: a fixed line count keeps the visual rhythm on older engines. */
    max-inline-size: 11ch;
  }
}

/* ── Homepage headings ────────────────────────────────────────────────────────
   Headings that used to carry a hard-coded <br/> now hold one translatable
   phrase, because a break inside a msgid blocks the word-order changes most
   languages need. These rules restore the stacked shape the design wanted. */

.why-head,
.minds-head,
.privacy-keep-head,
.price-figure + .price-period,
.cta-end-head {
  text-wrap: balance;
  max-inline-size: 16ch;
}

html[dir="rtl"] .why-head,
html[dir="rtl"] .minds-head {
  text-wrap: pretty;
}

/* Unbreakable scripts: balance cannot help, so give the line more room. */
html[data-locale="zh-Hans"] .why-head,
html[data-locale="zh-Hant"] .why-head,
html[data-locale="ja"] .why-head,
html[data-locale="ko"] .why-head,
html[data-locale="th"] .why-head,
html[data-locale="km"] .why-head,
html[data-locale="zh-Hans"] .minds-head,
html[data-locale="zh-Hant"] .minds-head,
html[data-locale="ja"] .minds-head,
html[data-locale="ko"] .minds-head {
  max-inline-size: 12em;
}