/* ============================================================
   Drowsly — landing page
   Palette: "Nocturnal Precision" (mirrors the iOS app design system).
   Flat, deep-midnight, single Borealis-teal accent. No third-party deps.
   ============================================================ */

:root {
  /* Surface tiers */
  --bg: #090909;
  --surface: #131313;
  --container: #1c1c1e;
  --outline: #2c2c2e;

  /* Text */
  --text-primary: #e5e2e1;
  --text-secondary: #bbc9c7;
  --text-muted: #8b9492;

  /* Accent — Borealis Teal */
  --teal: #4fd1c5;
  --teal-bright: #6feee1;
  --on-teal: #003733;

  /* Rhythm */
  --maxw: 1120px;
  --gutter: clamp(20px, 5vw, 40px);
  --radius-sm: 12px;
  --radius-md: 18px;
  --radius-lg: 24px;

  /* Phone geometry — matches the 1206×2622 capture aspect (0.4599) */
  --phone-aspect: 0.4599;

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html { -webkit-text-size-adjust: 100%; }

/* Smooth scrolling is opt-in, not opt-out. Declaring it unconditionally and
   undoing it in the reduced-motion block means the animation is the default and
   the accessible behaviour is the override — one dropped media query away from
   shipping motion to someone who asked for none. Gated here instead, so the
   quiet behaviour is what a UA that reports nothing gets. */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  background: var(--bg);
  color: var(--text-primary);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text",
    system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; padding: 0; }

/* ---------- Helpers ---------- */
.container { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
.narrow { max-width: 760px; }

.skip-link {
  position: absolute; left: 50%; translate: -50% calc(-100% - 12px);
  top: 10px; z-index: 200;
  background: var(--teal); color: var(--on-teal);
  padding: 10px 18px; border-radius: 999px; font-weight: 600;
  transition: translate 0.2s var(--ease);
}
.skip-link:focus { translate: -50% 0; }

:focus-visible {
  outline: 2px solid var(--teal-bright);
  outline-offset: 3px;
  border-radius: 4px;
}

.eyebrow {
  color: var(--teal);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: 18px;
}

h1, h2, h3 { line-height: 1.08; letter-spacing: -0.02em; font-weight: 600; }
h1 { font-size: clamp(2.5rem, 6.4vw, 4.4rem); }
h2 { font-size: clamp(1.9rem, 4vw, 2.9rem); }
h3 { font-size: 1.18rem; letter-spacing: -0.01em; }

/* ============================================================
   Header / nav
   ============================================================ */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: color-mix(in srgb, var(--bg) 78%, transparent);
  backdrop-filter: saturate(140%) blur(14px);
  -webkit-backdrop-filter: saturate(140%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s var(--ease), background 0.3s var(--ease);
}
.site-header.scrolled { border-bottom-color: var(--outline); }

.nav { display: flex; align-items: center; justify-content: space-between; height: 68px; }

.brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 600; }
.brand-mark { color: var(--teal); display: inline-flex; }
.brand-name { font-size: 1.12rem; letter-spacing: -0.01em; }

.nav-links { display: flex; align-items: center; gap: 24px; }
/* A nav item never wraps: a two-line link under the brand broke the header in
   landscape (2026-09-29). The row collapses by tier instead — see
   "Header tiers" under Responsive. */
.nav-links > li { flex: none; }
.nav-links a { color: var(--text-secondary); font-size: 0.95rem; white-space: nowrap; transition: color 0.2s var(--ease); }
.nav-links a:hover { color: var(--text-primary); }

/* Launch status — "Coming soon…" in the header and the closing section.
   A status line, not a control: no fill, no border, no hover, default cursor,
   so it can never be mistaken for a button. The teal dot is the trust strip's
   bullet, reused so the two read as one family. */
.nav-soon, .cta-soon {
  display: inline-flex; align-items: center; gap: 9px;
  white-space: nowrap; cursor: default;
  color: var(--text-secondary); font-size: 0.88rem; font-weight: 500;
}
.nav-soon::before, .cta-soon::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: var(--teal); flex: none;
}
/* The closing line is a full sentence in the longest locales ("Out now on
   Android. Coming soon to iPhone."). Unlike the header label it may wrap: at
   320 px a no-wrap line ran past the screen edge and was clipped. It becomes a
   centred block with the dot inline at the start of the first line, so a
   wrapped line keeps the dot beside its first word instead of floating at the
   far edge. `balance` keeps a last line from holding one orphaned word or
   character (the hero eyebrow gets it too: ja broke "近日公 / 開" at 320 px). */
.cta-soon {
  display: block; white-space: normal; text-align: center; text-wrap: balance;
  color: var(--teal); font-size: 0.95rem; font-weight: 600; letter-spacing: 0.01em;
}
.cta-soon::before { display: inline-block; vertical-align: middle; margin-inline-end: 9px; }
.eyebrow { text-wrap: balance; }

/* Google Play badge — Google's own SVG for the page's language, byte for byte
   as downloaded from the Partner Marketing Hub (its viewBox has no padding, so
   the file IS the visible badge). Rules, from Google's badge guidelines
   (https://play.google.com/intl/en_us/badges/): no change of colour, scale or
   elements; height at least 28 px; clear space of at least a quarter of the
   badge height on every side (12 px at 48 px; every margin below is larger).
   Height is fixed and width follows from the width/height attributes, so the
   box is reserved before the image loads (no layout shift). The badge is a
   link, so it keeps the global focus ring, rounded to the badge's corners. */
.store-badge { display: block; width: fit-content; border-radius: 8px; }
.store-badge img { display: block; height: 48px; width: auto; }
.store-badge--hero { margin: 0; }
.store-badge--cta { margin: 24px auto 0; }

/* Language switch — a compact segmented control. The current locale reads as
   active (a non-link span); the rest are quiet links. Scales past two locales. */
/* Replaced by new dropdown styles at the bottom */

.nav-toggle {
  display: none; flex-direction: column; gap: 5px;
  background: none; border: 0; cursor: pointer; padding: 10px;
}
.nav-toggle span { width: 22px; height: 2px; background: var(--text-primary); border-radius: 2px; transition: 0.3s var(--ease); }

/* ============================================================
   Hero
   ============================================================ */
.hero { position: relative; padding-top: clamp(48px, 8vw, 96px); overflow: hidden; }

.hero-aura {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(60% 50% at 72% 32%, color-mix(in srgb, var(--teal) 18%, transparent), transparent 70%),
    radial-gradient(50% 40% at 20% 8%, color-mix(in srgb, var(--teal) 8%, transparent), transparent 72%);
  opacity: 0.9;
}

.hero-grid {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(24px, 5vw, 72px); align-items: center;
}

.hero-copy { max-width: 560px; }
.lede {
  color: var(--text-secondary);
  font-size: clamp(1.05rem, 1.6vw, 1.24rem);
  margin: 24px 0 32px;
  max-width: 30ch;
}

.hero-device { display: flex; justify-content: center; }

/* Trust strip */
.trust-strip {
  position: relative; z-index: 1;
  display: flex; flex-wrap: wrap; gap: 14px 30px;
  margin-top: clamp(40px, 6vw, 72px);
  padding-top: 26px; border-top: 1px solid var(--outline);
}
.trust-strip li {
  color: var(--text-secondary); font-size: 0.92rem;
  display: flex; align-items: center; gap: 9px;
}
.trust-strip li::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: var(--teal); flex: none;
}

/* ============================================================
   Phone frame
   ============================================================ */
.phone {
  position: relative;
  width: min(300px, 78vw);
  aspect-ratio: var(--phone-aspect);
  border-radius: 13% / 6%;
  padding: 2.4%;
  background: linear-gradient(150deg, #1f1f22, #0c0c0d 60%);
  box-shadow:
    0 0 0 1px var(--outline),
    0 40px 80px -40px rgba(0, 0, 0, 0.9);
}
.phone-screen {
  width: 100%; height: 100%;
  border-radius: 11% / 5%;
  overflow: hidden;
  background: var(--bg);
}
.phone-screen img { width: 100%; height: 100%; object-fit: cover; }

.phone--hero {
  width: min(330px, 82vw);
  animation: float 7s var(--ease) infinite;
}
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-12px); }
}

/* ============================================================
   Behavioral band
   ============================================================ */
.band { padding: clamp(80px, 12vw, 150px) 0; text-align: center; }
.band-title { font-size: clamp(1.8rem, 4.4vw, 3.1rem); }
.band-body {
  color: var(--text-secondary); font-size: clamp(1.05rem, 1.6vw, 1.22rem);
  margin: 24px auto 0; max-width: 54ch;
}

/* ============================================================
   Section heads
   ============================================================ */
.section-head { max-width: 640px; margin-bottom: clamp(40px, 6vw, 64px); }
.section-sub { color: var(--text-secondary); margin-top: 18px; font-size: 1.06rem; }

/* ============================================================
   How it works
   ============================================================ */
.how { padding: clamp(40px, 7vw, 80px) 0; }
.steps {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(20px, 3vw, 32px);
}
.step {
  background: var(--surface); border: 1px solid var(--outline);
  border-radius: var(--radius-lg); padding: 32px 28px;
}
.step-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 50%;
  background: color-mix(in srgb, var(--teal) 14%, transparent);
  color: var(--teal); font-weight: 700; font-size: 1.05rem;
  margin-bottom: 22px;
}
.step h3 { margin-bottom: 10px; }
.step p { color: var(--text-secondary); font-size: 0.98rem; }

/* ============================================================
   Showcase gallery
   ============================================================ */
.showcase { padding: clamp(60px, 10vw, 120px) 0; }
.gallery {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: clamp(16px, 2.4vw, 34px); justify-items: center;
}
.gallery-item { display: flex; flex-direction: column; align-items: center; gap: 22px; }
.gallery-item .phone { width: min(100%, 230px); }
.gallery-item figcaption { color: var(--text-secondary); font-size: 0.96rem; text-align: center; max-width: 26ch; }

/* ============================================================
   Features
   ============================================================ */
.features { padding: clamp(40px, 7vw, 80px) 0; }
.feature-grid {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: clamp(16px, 2vw, 22px);
}
.feature {
  background: var(--surface); border: 1px solid var(--outline);
  border-radius: var(--radius-md); padding: 26px 24px;
  transition: border-color 0.25s var(--ease), transform 0.25s var(--ease), background 0.25s var(--ease);
}
.feature:hover { border-color: color-mix(in srgb, var(--teal) 40%, var(--outline)); transform: translateY(-3px); }
.feature h3 { margin-bottom: 10px; font-size: 1.06rem; }
.feature p { color: var(--text-secondary); font-size: 0.95rem; }

/* ============================================================
   Privacy band
   ============================================================ */
.privacy {
  padding: clamp(80px, 12vw, 150px) 0; text-align: center;
  background:
    radial-gradient(60% 80% at 50% 0%, color-mix(in srgb, var(--teal) 7%, transparent), transparent 70%),
    var(--bg);
  border-block: 1px solid var(--outline);
}
.privacy-body {
  color: var(--text-secondary); font-size: clamp(1.06rem, 1.7vw, 1.28rem);
  margin: 22px auto 0; max-width: 56ch;
}

/* ============================================================
   FAQ
   ============================================================ */
.faq { padding: clamp(60px, 10vw, 120px) 0; }
.faq-list { display: grid; gap: 14px; }
.faq details {
  background: var(--surface); border: 1px solid var(--outline);
  border-radius: var(--radius-md); padding: 4px 24px;
  transition: border-color 0.2s var(--ease);
}
.faq details[open] { border-color: color-mix(in srgb, var(--teal) 35%, var(--outline)); }
.faq summary {
  cursor: pointer; list-style: none; padding: 20px 0; font-weight: 600;
  font-size: 1.08rem; display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; color: var(--teal); font-size: 1.5rem; font-weight: 400;
  line-height: 1; transition: transform 0.25s var(--ease); flex: none;
}
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { color: var(--text-secondary); padding: 0 0 22px; max-width: 62ch; }

/* ============================================================
   Final CTA
   ============================================================ */
.cta { position: relative; padding: clamp(80px, 12vw, 150px) 0; text-align: center; overflow: hidden; }
.cta-aura {
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(50% 60% at 50% 50%, color-mix(in srgb, var(--teal) 14%, transparent), transparent 70%);
}
.cta .container { position: relative; }
.cta-sub { color: var(--text-secondary); font-size: 1.12rem; margin: 16px 0 36px; }

/* ============================================================
   Footer
   ============================================================ */
.site-footer { border-top: 1px solid var(--outline); padding: clamp(48px, 7vw, 72px) 0 40px; }
.footer-grid {
  display: flex; flex-wrap: wrap; gap: 32px;
  justify-content: space-between; align-items: flex-start;
  padding-bottom: 36px; border-bottom: 1px solid var(--outline); margin-bottom: 28px;
}
.footer-tag { color: var(--text-secondary); font-size: 0.95rem; margin-top: 14px; max-width: 32ch; }
.footer-links { display: flex; flex-wrap: wrap; gap: 14px 26px; }
.footer-links a { color: var(--text-secondary); font-size: 0.93rem; transition: color 0.2s var(--ease); }
.footer-links a:hover { color: var(--teal); }

.disclaimer { color: var(--text-muted); font-size: 0.82rem; line-height: 1.65; max-width: 78ch; }
/* Company imprint: legal name, org no., VAT no. and support address on every
   page, because both app stores verify the site against the registered legal
   entity. The postal address is only in the legal pages' controller block
   (owner ruling 2026-09-29). Sits above the copyright line as one quiet block. */
.imprint {
  color: var(--text-muted); font-size: 0.8rem; line-height: 1.7;
  max-width: 78ch; margin-top: 22px; font-style: normal;
}
.imprint a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.imprint a:hover { color: var(--text-secondary); }
.copyright { color: var(--text-muted); font-size: 0.8rem; margin-top: 10px; }

/* ============================================================
   Reveal-on-scroll
   Content is visible by default — the hidden-then-reveal state is
   enabled only when JS is present (the inline <head> script adds
   `.js`). So no-JS, SEO crawlers, and reduced-motion users always
   see every section; the animation is a pure enhancement.
   ============================================================ */
.js .reveal { opacity: 0; transform: translateY(20px); transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); }
.js .reveal.in { opacity: 1; transform: none; }

/* ============================================================
   Responsive
   ============================================================ */

/* Header tiers. The row's width is set by the longest locale (fr: brand 98 px
   + links, switcher and label 898 px at a 24 px gap, measured 2026-09-29), and
   `.container` caps the row at 1040 px however wide the window is.
     ≥ 1180 px  everything in one row (fr has ~40 px to spare).
     960–1179   the launch label steps out; the hero's eyebrow says the same.
     < 960      the menu button; every item, the label included, in a panel.
   Each edge keeps ≥ 60 px of slack for wider system fonts. Re-measure if a
   label, a locale or the gap changes. */
@media (max-width: 1179.98px) {
  .nav-links > li:has(> .nav-soon) { display: none; }
}

@media (max-width: 959.98px) {
  .nav-toggle { display: flex; }
  .nav-links {
    position: absolute; top: 68px; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--surface); border-bottom: 1px solid var(--outline);
    padding: 8px var(--gutter) 20px;
    /* A landscape phone is 390 px tall: the panel scrolls rather than
       pushing its last items off the screen. */
    max-height: calc(100dvh - 68px); overflow-y: auto; overscroll-behavior: contain;
    /* Closed = clipped AND invisible, so its links leave the tab order and
       the accessibility tree; visibility flips only after the clip closes. */
    clip-path: inset(0 0 100% 0); visibility: hidden;
    transition: clip-path 0.3s var(--ease), visibility 0s linear 0.3s;
  }
  .nav-links.open { clip-path: inset(0 0 0 0); visibility: visible; transition: clip-path 0.3s var(--ease), visibility 0s; }
  .nav-links > li:has(> .nav-soon) { display: list-item; }
  .nav-links li { border-bottom: 1px solid var(--outline); }
  .nav-links li:last-child { border-bottom: 0; }
  .nav-links a { display: block; padding: 16px 4px; font-size: 1rem; }
  .nav-links .nav-soon { display: flex; padding: 16px 4px; }
  /* Keep the segmented control a horizontal row inside the stacked mobile menu
     (the generic `.nav-links a { display: block }` above would otherwise tower it). */
  .nav-links .lang-switch { margin: 14px 0 4px; }
  .nav-links .lang-switch a, .nav-links .lang-switch [aria-current] {
    display: inline-flex; padding: 7px 11px; font-size: 0.82rem;
  }
}
@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; text-align: center; }
  .hero-copy { max-width: none; margin-inline: auto; }
  .store-badge--hero { margin-inline: auto; }
  .lede { max-width: 46ch; margin-inline: auto; }
  .hero-device { margin-top: clamp(32px, 8vw, 56px); }
  .trust-strip { justify-content: center; }

  .steps { grid-template-columns: 1fr; max-width: 480px; margin-inline: auto; }
  .gallery { grid-template-columns: repeat(2, 1fr); }
  .feature-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 720px) {
  .feature-grid { grid-template-columns: 1fr; }
}

@media (max-width: 520px) {
  .gallery { grid-template-columns: 1fr; }
}

@media (max-width: 380px) {
  body { font-size: 16px; }
}

/* Not-found page. It borrows `main.legal`'s measure and heading scale rather
   than growing a layout of its own — one short line and two links do not earn
   a second page template. The language row is the header switcher's control
   reused at body scale, so a visitor who landed on a dead URL can still reach
   their own language; it only needs the top margin the header version gets
   from the nav's own spacing — plus `flex-wrap`, which the header version does
   not need and this one does: `.lang-switch` is a non-wrapping `inline-flex`
   sized for five two-letter codes, and five full language names do not fit a
   375 px viewport's content box. */
.notfound-langs { margin-top: 30px; flex-wrap: wrap; }

/* ============================================================
   Legal pages (privacy.html / terms.html)
   `.legal` sits on <main>, NOT <body> — the header/footer share the
   landing page's nav markup and must not inherit these list/link rules.
   ============================================================ */
/* padding-block, not the `padding` shorthand: the shorthand zeroed `.container`'s
   inline gutter, so legal text ran edge to edge on phones (found 2026-09-27). */
main.legal { padding-block: clamp(48px, 8vw, 96px) clamp(60px, 10vw, 110px); }
.legal h1 { font-size: clamp(2rem, 5vw, 3.2rem); margin-bottom: 12px; }
.legal-meta { color: var(--text-muted); font-size: 0.9rem; margin-bottom: clamp(30px, 5vw, 44px); }
.legal-summary {
  background: var(--surface);
  border: 1px solid var(--outline); border-left: 3px solid var(--teal);
  border-radius: var(--radius-md); padding: 22px 26px;
  color: var(--text-secondary);
  margin-bottom: clamp(34px, 5vw, 52px);
}
.legal-address {
  font-style: normal; line-height: 1.75; color: var(--text-secondary);
  margin: 14px 0 0; max-width: 70ch;
}
.legal h2 { font-size: 1.45rem; margin: clamp(34px, 5vw, 50px) 0 14px; }
.legal h3 { font-size: 1.1rem; margin: 24px 0 8px; }
.legal p, .legal li { color: var(--text-secondary); max-width: 70ch; }
.legal p + p { margin-top: 14px; }
.legal ul { list-style: disc; padding-left: 22px; margin: 14px 0; display: grid; gap: 8px; }
.legal a { color: var(--teal); }
.legal a:hover { color: var(--teal-bright); }

/* ============================================================
   Reduced motion
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  /* `scroll-behavior` is not reset here: it is only ever set under
     `no-preference`, so there is nothing left to undo. */
  .js .reveal { opacity: 1; transform: none; transition: none; }
  .phone--hero { animation: none; }
  /* The durations below are shortened, but a delay is not: drop the menu's
     delayed visibility flip too, so it closes at once. */
  .nav-links, .nav-links.open { transition: none; }
  *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}

/* details/summary Language switch */
.lang-switch {
  position: relative;
  display: inline-flex; align-items: center; gap: 2px;
  border: 1px solid var(--outline); border-radius: 999px; padding: 3px;
  font-size: 0.8rem; letter-spacing: 0.03em;
  color: var(--text-secondary);
}
.lang-switch summary {
  list-style: none; cursor: pointer; padding: 5px 9px;
  border-radius: 999px; line-height: 1;
  display: flex; align-items: center; gap: 6px;
  transition: color 0.2s var(--ease), background 0.2s var(--ease);
}
.lang-switch summary::-webkit-details-marker { display: none; }
.lang-switch summary:hover { color: var(--text-primary); }
.lang-switch summary span[aria-current] {
  color: var(--text-primary); font-weight: 600;
}
.lang-switch[open] summary {
  background: color-mix(in srgb, var(--teal) 18%, transparent);
}
.lang-switch[open] .chevron { transform: rotate(180deg); }
.chevron { transition: transform 0.2s var(--ease); }

.lang-list {
  position: absolute; top: calc(100% + 4px); inset-inline-end: 0;
  background: var(--surface); border: 1px solid var(--outline);
  border-radius: var(--radius-md); padding: 4px;
  display: flex; flex-direction: column; gap: 2px;
  min-width: 140px; max-height: 300px; overflow-y: auto;
  box-shadow: 0 4px 12px rgba(0,0,0,0.2); z-index: 100;
}
.lang-list a {
  padding: 8px 12px; border-radius: var(--radius-sm); line-height: 1;
  color: var(--text-secondary); text-decoration: none;
  transition: background 0.2s var(--ease), color 0.2s var(--ease);
}
.lang-list a:hover {
  background: color-mix(in srgb, var(--teal) 10%, transparent);
  color: var(--text-primary);
}
.lang-list a[aria-selected="true"] {
  background: color-mix(in srgb, var(--teal) 18%, transparent);
  color: var(--text-primary); font-weight: 600;
}

/* Fix mobile nav */
.nav-links .lang-list {
  inset-inline-end: auto; inset-inline-start: 0;
}

/* Font fallbacks for international locales (no tofu) */
:root:lang(ar) {
  --font-body: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
:root:lang(hi) {
  --font-body: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
:root:lang(ja) {
  --font-body: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", YuGothic, "Meiryo", sans-serif;
}
:root:lang(ko) {
  --font-body: "Apple SD Gothic Neo", "Malgun Gothic", "Nanum Gothic", sans-serif;
}
:root:lang(zh-Hans) {
  --font-body: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif;
}
:root:lang(ru) {
  --font-body: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* Localization font fallbacks */
:root:lang(ar) body { font-family: -apple-system, BlinkMacSystemFont, "Geeza Pro", "Arial", sans-serif; }
:root:lang(hi) body { font-family: -apple-system, BlinkMacSystemFont, "Kohinoor Devanagari", "Mukta", sans-serif; }
:root:lang(ja) body { font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Hiragino Kaku Gothic ProN", "YuGothic", "Yu Gothic", sans-serif; }
:root:lang(ko) body { font-family: -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Malgun Gothic", sans-serif; }
:root:lang(zh-Hans) body { font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif; }
:root:lang(ru) body { font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Segoe UI", sans-serif; }