/* ============================================================
   BT SERVANT — 2026 BRAND STYLESHEET
   Identity: "The Living Text" — Torah-frame scroll, typing dots.
   Palette:  Navy #3B3768 · Bronze #B58A3C · Vellum #F1EBDD · Paper #FBFAF7
   Type:     Newsreader (display) · Inter (body/UI)
   Self-contained: replaces the previous style.css + main.css pair.
   ============================================================ */

:root {
  --bt-navy:        #3B3768;
  --bt-navy-deep:   #2C2950;
  --bt-bronze:      #B58A3C;
  --bt-bronze-soft: #D9BC85;
  --bt-vellum:      #F1EBDD;
  --bt-paper:       #FBFAF7;   /* light-on-dark text + light surfaces */
  --bt-bg:          #FBFAF7;   /* page background */
  --bt-card:        #FFFFFF;   /* card surfaces */
  --bt-ink:         #2A2740;
  --bt-heading:     var(--bt-navy);
  --bt-muted:       #6B6880;
  --bt-border:      #E4DFD3;
  --bt-white:       #FFFFFF;
  --bt-header-bg:   rgba(251, 250, 247, 0.92);
  --mark-frame:     var(--bt-navy);
  --mark-dot:       var(--bt-bg);
  --mark-accent:    var(--bt-bronze);

  --font-heading: 'Newsreader', 'Lora', Georgia, serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --radius: 10px;
  --radius-sm: 6px;
  --shadow: 0 1px 3px rgba(20, 18, 40, 0.07), 0 10px 28px rgba(20, 18, 40, 0.06);
  --container: 1120px;
}

/* ---------- Themes ----------
   Lock a theme by setting <html data-theme="carbon"> etc. */
[data-theme="carbon"] {
  /* unfoldingWord BT Servant brand refresh: Primary Charcoal / Clarity Orange / Tagline Gray / Background */
  --bt-navy: #23282C; --bt-navy-deep: #15181B;
  --bt-bronze: #FF5A1F; --bt-bronze-soft: #FF8F62;
  --bt-vellum: #F1EFEA; --bt-paper: #FAF9F6; --bt-bg: #FAF9F6; --bt-card: #FFFFFF;
  --bt-ink: #23282C; --bt-heading: #23282C; --bt-muted: #9CA1A5; --bt-border: #E3E0D9;
  --bt-header-bg: rgba(250, 249, 246, 0.92);
  --mark-frame: #23282C; --mark-dot: #23282C; --mark-accent: #FF5A1F;
}
[data-theme="ultramarine"] {
  --bt-navy: #2F3BD3; --bt-navy-deep: #2129A8;
  --bt-bronze: #2F3BD3; --bt-bronze-soft: #99A0F5;
  --bt-vellum: #EEF0FC; --bt-paper: #FFFFFF; --bt-bg: #FFFFFF; --bt-card: #FFFFFF;
  --bt-ink: #15151B; --bt-heading: #15151B; --bt-muted: #63636E; --bt-border: #E4E6F2;
  --bt-header-bg: rgba(255, 255, 255, 0.9);
  --mark-frame: #2F3BD3; --mark-dot: #FFFFFF; --mark-accent: #15151B;
}
[data-theme="midnight"] {
  --bt-navy: #6C63C7; --bt-navy-deep: #0E0D18;
  --bt-bronze: #D5A551; --bt-bronze-soft: #E5C588;
  --bt-vellum: #191830; --bt-paper: #F2F1F8; --bt-bg: #131220; --bt-card: #1C1B2E;
  --bt-ink: #D9D7E6; --bt-heading: #EDECF4; --bt-muted: #9A97B0; --bt-border: #2A2940;
  --bt-header-bg: rgba(19, 18, 32, 0.9);
  --mark-frame: #EDECF4; --mark-dot: #131220; --mark-accent: #D5A551;
}

/* ---------- Brand mark: real logo artwork (assets/images/logo-mark[-inverse].png) ---------- */
.site-logo__mark { object-fit: contain; }

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.65;
  color: var(--bt-ink);
  background: var(--bt-bg);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; }
a { color: var(--bt-navy); }

.container { max-width: var(--container); margin: 0 auto; padding: 0 24px; }

.skip-link {
  position: absolute; left: -9999px; top: 0;
  background: var(--bt-navy); color: var(--bt-paper); padding: 10px 18px; z-index: 100;
}
.skip-link:focus { left: 0; }

/* ---------- Typography ---------- */
h1, h2, h3, h4 { font-family: var(--font-heading); color: var(--bt-heading); margin: 0; font-weight: 500; }
.section-title { font-size: clamp(1.8rem, 3.4vw, 2.6rem); letter-spacing: -0.01em; line-height: 1.15; }
.section-sub { color: var(--bt-muted); max-width: 620px; margin: 14px auto 0; font-size: 1.05rem; }
.section-head { margin-bottom: 44px; }
.section-head--center { text-align: center; }
.eyebrow {
  display: inline-block; text-transform: uppercase; letter-spacing: 0.18em;
  font-size: 0.72rem; font-weight: 600; color: var(--bt-bronze); margin-bottom: 12px;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-block; text-decoration: none; font-weight: 600; font-size: 0.95rem;
  padding: 13px 26px; border-radius: 999px; border: 1.5px solid transparent;
  transition: transform 0.16s ease, box-shadow 0.16s ease, background 0.16s ease;
  cursor: pointer; font-family: var(--font-body);
}
.btn:hover { transform: translateY(-1px); }
.btn--sm { padding: 9px 18px; font-size: 0.88rem; }
.btn--navy { background: var(--bt-navy); color: var(--bt-paper); }
.btn--navy:hover { background: var(--bt-navy-deep); box-shadow: var(--shadow); }
.btn--bronze { background: var(--bt-bronze); color: var(--bt-white); }
.btn--bronze:hover { background: #A47B32; box-shadow: var(--shadow); }
.btn--ghost { background: transparent; color: var(--bt-navy); border-color: var(--bt-navy); }
.btn--ghost:hover { background: rgba(59, 55, 104, 0.06); }
.btn--outline-light { background: transparent; color: var(--bt-paper); border-color: rgba(251, 250, 247, 0.55); }
.btn--outline-light:hover { border-color: var(--bt-paper); background: rgba(251, 250, 247, 0.08); }
.link--bronze { color: var(--bt-bronze); font-weight: 600; text-decoration: none; }
.link--bronze:hover { text-decoration: underline; }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: var(--bt-header-bg); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--bt-border);
}
.site-header__inner { display: flex; align-items: center; gap: 28px; padding-top: 14px; padding-bottom: 14px; }
.site-logo { display: flex; align-items: center; gap: 11px; text-decoration: none; }
.site-logo__mark { width: 34px; height: 34px; flex: none; }
.site-logo__word { font-family: var(--font-body); font-size: 1.06rem; letter-spacing: 0.02em; color: var(--bt-heading); white-space: nowrap; }
.site-logo__word b { font-weight: 800; }
.site-logo__word span { font-weight: 400; }
.site-logo__full { height: 46px; width: auto; flex: none; display: block; }
.site-nav { margin-left: auto; }
.nav-menu { display: flex; gap: 22px; list-style: none; margin: 0; padding: 0; }
.nav-menu a { text-decoration: none; color: var(--bt-ink); font-size: 0.9rem; font-weight: 500; }
.nav-menu a:hover { color: var(--bt-bronze); }
.site-header__cta { display: flex; gap: 10px; }
.nav-toggle { display: none; background: none; border: 0; flex-direction: column; gap: 5px; padding: 8px; cursor: pointer; }
.nav-toggle span { width: 22px; height: 2px; background: var(--bt-navy); display: block; transition: transform 0.2s; }

@media (max-width: 960px) {
  .site-nav { display: none; position: absolute; top: 100%; left: 0; right: 0; background: var(--bt-paper); border-bottom: 1px solid var(--bt-border); padding: 18px 24px; }
  .site-nav.is-open { display: block; }
  .nav-menu { flex-direction: column; gap: 14px; }
  .site-header__cta { display: none; }
  .nav-toggle { display: flex; margin-left: auto; }
}

/* ---------- Hero ---------- */
.hero { background: linear-gradient(180deg, var(--bt-bg) 0%, var(--bt-vellum) 100%); padding: 76px 0 84px; overflow: hidden; }
.hero__inner { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 56px; align-items: center; }
.hero__title { font-size: clamp(2.2rem, 4.6vw, 3.4rem); line-height: 1.12; }
.hero__rotator {
  font-family: var(--font-heading); font-size: clamp(1.9rem, 4.2vw, 3rem); font-weight: 600;
  color: var(--bt-bronze); min-height: 1.3em; margin: 14px 0 0; font-style: italic;
  line-height: 1.14; letter-spacing: -0.01em;
}
.hero__rotator .caret { display: inline-block; width: 4px; height: 0.95em; background: var(--bt-bronze); margin-left: 6px; vertical-align: -0.08em; animation: btCaret 0.85s steps(1) infinite; }
.hero__rotator-tail { color: var(--bt-heading); font-style: normal; display: block; margin-top: 2px; }
/* Localization: a hero line whose ending is only punctuation ("।", ".")
   keeps it inline after the rotating word (HomePage.astro). */
.hero__rotator-punct { color: var(--bt-heading); font-style: normal; }
@keyframes btCaret { 0%, 55% { opacity: 1; } 56%, 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .hero__rotator .caret { display: none; } }
.hero__sub { color: var(--bt-muted); font-size: 1.08rem; max-width: 460px; margin: 20px 0 30px; }
.hero__actions { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 20px; }
.hero__secondary-link { font-size: 0.94rem; }

/* ---------- Real BT Servant WhatsApp screenshots — there is no native app, so BT
   Servant is shown exactly as people experience it: actual conversation screenshots,
   framed in a simple card. (see user-provided screenshots, Aug 2026) ---------- */
/* 2026: WhatsApp screenshots re-shot as mobile (previously desktop/web captures) —
   narrower, taller aspect ratio, so the card is capped narrower than before. */
.chat-shot {
  position: relative; background: #FFFFFF; border: 1px solid var(--bt-border); border-radius: 18px;
  box-shadow: var(--shadow); max-width: 320px; margin-left: auto; overflow: hidden;
  max-height: 480px;
}
.chat-shot img { display: block; width: 100%; height: auto; }
.chat-shot::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 90px;
  background: linear-gradient(to bottom, rgba(255,255,255,0), var(--bt-card) 92%);
  pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
  .hero__rotator-text { transition: none !important; }
}
@media (max-width: 880px) {
  .hero__inner { grid-template-columns: 1fr; }
  .chat-shot { margin: 0 auto; }
}

/* ---------- Sections rhythm ---------- */
section { padding: 78px 0; }
.section--vellum { background: var(--bt-vellum); }
.section--navy { background: var(--bt-navy); }
.section--navy .section-title, .section--navy h3, .section--navy h4 { color: var(--bt-paper); }
.section--navy .section-sub { color: rgba(251, 250, 247, 0.75); }

/* ---------- Intents ---------- */
.intents__layout { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 34px; align-items: start; }
.intents__list { display: flex; flex-direction: column; gap: 10px; }
.intent-btn {
  display: flex; gap: 14px; align-items: flex-start; text-align: left;
  background: var(--bt-card); border: 1.5px solid var(--bt-border); border-radius: var(--radius);
  padding: 15px 17px; cursor: pointer; transition: border-color 0.15s, box-shadow 0.15s; font-family: var(--font-body);
}
.intent-btn:hover { border-color: var(--bt-bronze-soft); }
.intent-btn.is-active { border-color: var(--bt-bronze); box-shadow: var(--shadow); }
.intent-btn__icon { width: 36px; height: 36px; border-radius: 10px; background: var(--bt-vellum); color: var(--bt-navy); display: grid; place-items: center; flex: none; }
.intent-btn__icon svg { width: 19px; height: 19px; }
.intent-btn.is-active .intent-btn__icon { background: var(--bt-navy); color: var(--bt-bronze-soft); }
.intent-btn__text strong { display: block; font-size: 0.98rem; color: var(--bt-navy); margin-bottom: 2px; }
.intent-btn__text span { font-size: 0.83rem; color: var(--bt-muted); line-height: 1.45; }

.intents__preview { position: sticky; top: 90px; }
.intents__preview .chat-shot { margin: 0 auto 20px; max-width: 320px; max-height: 520px; }
.intents__preview-actions { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.intents__preview-continue { font-size: 0.82rem; color: var(--bt-muted); display: flex; gap: 10px; flex-wrap: wrap; }
.intents__preview-continue a { color: var(--bt-navy); font-weight: 600; text-decoration: none; }
.intents__preview-continue a:hover { color: var(--bt-bronze); }
@media (max-width: 880px) { .intents__layout { grid-template-columns: 1fr; } .intents__preview { position: static; } }


/* ---------- Reach ---------- */
.reach__mobile-actions { display: none; }
.reach__tabs { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin-bottom: 26px; }
.reach__tab {
  display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-body); font-weight: 600; font-size: 0.9rem;
  background: var(--bt-card); color: var(--bt-ink); border: 1.5px solid var(--bt-border); border-radius: 999px; padding: 10px 20px; cursor: pointer;
}
.reach__tab svg { width: 17px; height: 17px; }
.reach__tab.is-active { background: var(--bt-navy); color: var(--bt-paper); border-color: var(--bt-navy); }
.reach__panel { display: flex; align-items: flex-start; justify-content: space-between; gap: 36px; background: var(--bt-card); border: 1px solid var(--bt-border); border-radius: 20px; box-shadow: var(--shadow); padding: 34px; max-width: 920px; margin: 0 auto; }
.reach__steps-wrap { flex: 1 1 auto; min-width: 0; }
.reach__steps-wrap h3 { font-size: 1.35rem; margin-bottom: 12px; }
.wa-steps { margin: 0 0 14px; padding-left: 20px; color: var(--bt-ink); font-size: 0.92rem; }
.wa-steps li { margin-bottom: 6px; }
.reach__note { font-size: 0.85rem; color: var(--bt-muted); margin: 0 0 18px; }
.reach__note:empty { display: none; }
.reach__panel-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.reach__qr { flex: 0 0 auto; width: 210px; text-align: center; }
.reach__qr img {
  width: 210px; height: 210px; display: block; margin: 0 auto;
  border: 2px solid var(--bt-bronze); border-radius: 16px; padding: 14px; background: #fff;
  box-shadow: 0 6px 16px rgba(20, 18, 40, 0.12);
}
.reach__qr span { display: block; margin-top: 10px; font-size: 0.86rem; font-weight: 600; color: var(--bt-heading); letter-spacing: 0.01em; }
.reach__langs { text-align: center; margin-top: 26px; font-size: 0.86rem; color: var(--bt-muted); }
@media (max-width: 720px) {
  .reach__desktop .reach__panel { flex-direction: column; text-align: left; }
  .reach__desktop .reach__qr { width: 180px; margin: 0 auto; }
  .reach__desktop .reach__qr img { width: 180px; height: 180px; }
  .reach__mobile-actions { display: flex; flex-direction: column; gap: 10px; max-width: 380px; margin: 0 auto 26px; }
}

/* ---------- Why (kept short by design — homepage summary only) ---------- */
.why__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; max-width: 900px; margin: 0 auto; }
.why-card { background: var(--bt-card); border: 1px solid var(--bt-border); border-radius: var(--radius); padding: 24px; text-align: center; }
.why-card h4 { font-family: var(--font-body); font-weight: 700; font-size: 1rem; margin-bottom: 9px; }
.why-card h4::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--bt-bronze); margin-right: 9px; }
.why-card p { font-size: 0.89rem; color: var(--bt-muted); margin: 0; }
@media (max-width: 880px) { .why__grid { grid-template-columns: 1fr; } }

/* ---------- Organizations ---------- */
.org__path { text-align: center; color: var(--bt-muted); font-size: 0.9rem; letter-spacing: 0.04em; margin-bottom: 30px; }
.org__path-arrow { color: var(--bt-bronze); margin: 0 8px; }
.org__cards { display: flex; flex-direction: column; gap: 14px; max-width: 820px; margin: 0 auto; }
.org-card { background: var(--bt-card); border: 1px solid var(--bt-border); border-radius: var(--radius); padding: 0; overflow: hidden; }
.org-card summary { list-style: none; cursor: pointer; padding: 24px 28px; }
.org-card summary::-webkit-details-marker { display: none; }
.org-card summary h3 { font-size: 1.25rem; display: inline; }
.org-card summary h3::after { content: " +"; color: var(--bt-bronze); font-family: var(--font-body); }
.org-card[open] summary h3::after { content: " –"; }
.org-card summary p { color: var(--bt-muted); font-size: 0.92rem; margin: 8px 0 0; }
.org-card__body { padding: 0 28px 26px; font-size: 0.92rem; color: var(--bt-ink); }
.org-card__body p { margin-top: 0; }
.org__pricing-note { max-width: 820px; margin: 26px auto 0; font-size: 0.85rem; color: var(--bt-muted); text-align: center; }

/* ---------- Partners ---------- */
.partner-bar { background: var(--bt-vellum); border-block: 1px solid var(--bt-border); padding: 26px 0; margin: 30px 0; }
.partner-banner { display: flex; gap: 48px; justify-content: center; align-items: center; flex-wrap: wrap; }
.partner-banner__logo { font-family: var(--font-heading); font-size: 1.15rem; color: var(--bt-navy); text-decoration: none; letter-spacing: 0.01em; opacity: 0.85; display: inline-flex; align-items: center; }
.partner-banner__logo:hover { opacity: 1; color: var(--bt-bronze); }
.partner-banner__logo img { height: 42px; width: auto; max-width: 180px; object-fit: contain; display: block; filter: grayscale(0%); }

/* ---------- CTA banner ---------- */
.cta-banner { background: var(--bt-navy); color: var(--bt-paper); }
.cta-banner__inner { text-align: center; }
.cta-banner__title { color: var(--bt-paper); font-size: clamp(1.7rem, 3.2vw, 2.4rem); }
.cta-banner__sub { color: rgba(251, 250, 247, 0.75); margin: 12px auto 34px; max-width: 520px; }
.cta-banner__group { margin-bottom: 26px; }
.cta-banner__group-label { display: block; text-transform: uppercase; letter-spacing: 0.16em; font-size: 0.72rem; color: var(--bt-bronze-soft); margin-bottom: 13px; }
.cta-banner__actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.cta-banner__brandline { font-family: var(--font-heading); font-style: italic; color: var(--bt-bronze-soft); margin-top: 38px; font-size: 1.08rem; }

/* ---------- Footer ---------- */
.site-footer { background: var(--bt-navy-deep); color: rgba(251, 250, 247, 0.8); padding: 56px 0 0; }
.site-footer__inner { display: grid; grid-template-columns: 1fr auto; gap: 60px; padding-bottom: 40px; }
.site-footer__brand .site-logo__word { color: var(--bt-paper); }
.site-footer__tag { font-size: 0.88rem; color: rgba(251, 250, 247, 0.6); margin: 14px 0 0; max-width: 260px; }
.site-footer__cols { display: grid; grid-template-columns: repeat(2, minmax(140px, 170px)); gap: 40px; }
.site-footer__col h5 { color: var(--bt-bronze-soft); font-family: var(--font-body); text-transform: uppercase; letter-spacing: 0.12em; font-size: 0.72rem; margin: 0 0 12px; }
.site-footer__col a { display: block; color: rgba(251, 250, 247, 0.8); text-decoration: none; font-size: 0.88rem; margin-bottom: 8px; }
.site-footer__col a:hover { color: var(--bt-paper); }
.site-footer__credits { border-top: 1px solid rgba(251, 250, 247, 0.14); padding: 20px 0; font-size: 0.8rem; color: rgba(251, 250, 247, 0.55); }
.site-footer__credits .container { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.site-footer__credits a { color: rgba(251, 250, 247, 0.75); }
@media (max-width: 880px) {
  .site-footer__inner { grid-template-columns: 1fr; }
  .site-footer__cols { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- Sticky mobile action bar ---------- */
.mobile-bar {
  display: none; position: fixed; bottom: 0; left: 0; right: 0; z-index: 60;
  background: var(--bt-card); border-top: 1px solid var(--bt-border);
  padding: 10px 14px calc(10px + env(safe-area-inset-bottom)); gap: 10px;
}
.mobile-bar .btn { flex: 1; text-align: center; padding: 12px 10px; font-size: 0.88rem; }
@media (max-width: 720px) { .mobile-bar { display: flex; } body { padding-bottom: 68px; } }

/* ============================================================
   LOCALIZATION (src/i18n/): language switcher, per-script fonts, RTL
   ============================================================ */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* Language switcher: the last item in the header nav, drawn like the nav
   links; its menu is a card like the site's other surfaces. */
.lang-switcher { position: relative; }
.lang-switcher__btn {
  /* Inline (not flex) so its text sits on the same baseline as the nav links. */
  display: inline; padding: 0; border: 0; background: none; white-space: nowrap;
  color: var(--bt-ink); font-family: var(--font-body); font-size: 0.9rem; font-weight: 500; line-height: inherit; cursor: pointer;
}
.lang-switcher__btn:hover { color: var(--bt-bronze); }
.lang-switcher__btn:focus-visible { outline: 2px solid var(--bt-bronze); outline-offset: 3px; border-radius: 4px; }
.lang-switcher__globe { width: 16px; height: 16px; vertical-align: -3px; margin-inline-end: 6px; }
.lang-switcher__chevron { vertical-align: 2px; margin-inline-start: 6px; transition: transform 0.15s; }
.lang-switcher__btn[aria-expanded="true"] .lang-switcher__chevron { transform: rotate(180deg); }
.lang-switcher__menu {
  display: none; position: absolute; inset-inline-end: 0; top: calc(100% + 12px); z-index: 70;
  margin: 0; padding: 6px; list-style: none; min-width: 200px; max-height: calc(100vh - 96px); overflow-y: auto;
  background: var(--bt-card); border: 1px solid var(--bt-border); border-radius: var(--radius); box-shadow: var(--shadow);
}
.lang-switcher__btn[aria-expanded="true"] + .lang-switcher__menu { display: block; }
.nav-menu .lang-switcher__menu a { display: block; padding: 5px 12px; line-height: 1.5; border-radius: var(--radius-sm); }
.nav-menu .lang-switcher__menu a:hover { background: var(--bt-vellum); color: var(--bt-ink); }
.nav-menu .lang-switcher__menu a[aria-current="true"] { font-weight: 700; color: var(--bt-bronze); }
@media (max-width: 960px) {
  /* In the mobile menu the list is part of the nav, and the whole expanded
     nav scrolls within the screen (below the header, above the fixed bottom
     bar on phones), so every language stays reachable. */
  .lang-switcher__menu { position: static; box-shadow: none; margin-top: 10px; max-height: none; overflow: visible; }
  .site-nav.is-open { max-height: calc(100vh - 75px); max-height: calc(100dvh - 75px); overflow-y: auto; overscroll-behavior: contain; }
}
@media (max-width: 720px) {
  .site-nav.is-open { max-height: calc(100vh - 75px - 68px); max-height: calc(100dvh - 75px - 68px); }
}

/* Scripts the base fonts (Newsreader + Inter) do not cover: a self-hosted
   Noto pack per script (scripts/build-font-css.mjs, linked by Base.astro).
   Overriding the two font variables reaches every element that uses them. */
html[data-script="arabic"] { --font-heading: 'Noto Sans Arabic', 'Inter', system-ui, sans-serif; --font-body: 'Noto Sans Arabic', 'Inter', system-ui, sans-serif; }
html[data-script="nastaliq"] { --font-heading: 'Noto Nastaliq Urdu', 'Inter', system-ui, serif; --font-body: 'Noto Nastaliq Urdu', 'Inter', system-ui, serif; }
html[data-script="devanagari"] { --font-heading: 'Noto Sans Devanagari', 'Inter', system-ui, sans-serif; --font-body: 'Noto Sans Devanagari', 'Inter', system-ui, sans-serif; }
html[data-script="bengali"] { --font-heading: 'Noto Sans Bengali', 'Inter', system-ui, sans-serif; --font-body: 'Noto Sans Bengali', 'Inter', system-ui, sans-serif; }
html[data-script="myanmar"] { --font-heading: 'Noto Sans Myanmar', 'Inter', system-ui, sans-serif; --font-body: 'Noto Sans Myanmar', 'Inter', system-ui, sans-serif; }
html[data-script="han"] { --font-heading: 'Noto Sans SC', 'Inter', system-ui, sans-serif; --font-body: 'Noto Sans SC', 'Inter', system-ui, sans-serif; }
/* Tall scripts need more line height than Latin. */
html[data-script="nastaliq"] body { line-height: 2; }
html[data-script="nastaliq"] :is(h1, h2, h3, h4) { line-height: 1.7; }
html[data-script="nastaliq"] :is(.hero__title, .hero__rotator) { line-height: 1.9; }
html[data-script="myanmar"] body { line-height: 1.9; }
html[data-script="myanmar"] :is(h1, h2, h3, h4) { line-height: 1.6; }
/* The site uses italic Newsreader for accents; these scripts have no italic. */
html:is([data-script="arabic"], [data-script="nastaliq"], [data-script="han"], [data-script="myanmar"], [data-script="devanagari"], [data-script="bengali"]) :is(em, .cta-banner__brandline, .hero__rotator-text) { font-style: normal; }
/* Letter-spaced uppercase labels make no sense outside Latin and Cyrillic. */
html:not([data-script="latin"]):not([data-script="cyrillic"]) .site-footer__col h5 { letter-spacing: 0; }

/* Right-to-left (ar, fa, ur): mirror the rules main.css writes with
   physical left/right. */
/* The skip link is parked off-screen to the left; in RTL that side is
   scrollable, so park it off the right edge instead. */
[dir="rtl"] .skip-link { left: auto; right: -9999px; }
[dir="rtl"] .skip-link:focus { right: 0; }
[dir="rtl"] .site-nav { margin-left: 0; margin-right: auto; }
[dir="rtl"] .hero__rotator .caret { margin-left: 0; margin-right: 6px; }
[dir="rtl"] .intent-btn, [dir="rtl"] .reach__desktop .reach__panel { text-align: right; }
[dir="rtl"] .wa-steps { padding-left: 0; padding-right: 20px; }
[dir="rtl"] .why-card h4::before { margin-right: 0; margin-left: 9px; }
@media (max-width: 960px) {
  [dir="rtl"] .nav-toggle { margin-left: 0; margin-right: auto; }
}
@media (min-width: 881px) {
  [dir="rtl"] .chat-shot { margin-left: 0; margin-right: auto; }
}