*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }

  /* Killing transition-duration only removes the tween — the element still
     jumps to its hover destination. Suppress the displacement itself.
     Scoped deliberately: the scaleX() underline/bar wipes must survive, or
     they would sit permanently expanded. */
  .btn:hover,
  .btn:active,
  .program-card:hover,
  .role-card:hover,
  .site-header__logo:hover img { transform: none !important; }
  .sabeely-spotlight::before { animation: none !important; }
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 1.0625rem;
  line-height: 1.6;
}

h1, h2, h3 { font-family: var(--font-display); color: var(--ink); line-height: 1.15; margin: 0; }
h1 { font-size: clamp(2.5rem, 5vw, 4.5rem); font-weight: 700; }
h2 { font-size: clamp(1.5rem, 2.6vw, 2rem); font-weight: 700; }
h3 { font-size: 1.25rem; font-weight: 700; }
p { margin: 0; }
a { color: inherit; }
img { max-width: 100%; display: block; }

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--brand-deep);
  outline-offset: 2px;
  border-radius: 4px;
}

.skip-link {
  position: absolute;
  top: -3rem;
  inset-inline-start: 1rem;
  background: var(--brand-deep);
  color: #fff;
  padding: 0.6rem 1rem;
  border-radius: 0.375rem;
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: none;
  z-index: 100;
  transition: top 0.15s ease;
}
.skip-link:focus { top: 1rem; }

.page {
  max-width: 48rem;
  margin: 0 auto;
  padding: 5rem 1.5rem;
}
.page--wide { max-width: 64rem; }

/* Donate only, and wider than .page--wide on purpose. The giving form is a
   fixed 425px (see .donate-layout below), so every pixel added to the page
   goes to the column of copy beside it and none of it to the form.
   This does NOT contradict the "do not re-attempt this by widening the page"
   warning in docs/superpowers/specs/2026-07-20-stripe-direct-donations-design.md.
   That warning was about widening in the hope the Donorbox form would grow with
   the page: it cannot, the cap lives inside widgets.js. Here the form track is
   pinned at the cap and the extra width is spent on the lead instead. */
.page--donate { max-width: 72rem; }

/* The lead used to live in .page-header and inherit its treatment from
   `.page-header p`. It sits in the donate grid now, so the colour and top
   margin have to be restated here or the paragraph renders as flat body text
   tight against the h1. No max-width: the grid track is what constrains it. */
.donate-layout__lead > p { margin-top: 1rem; color: var(--text-muted); }

.eyebrow {
  display: block;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--brand-deep);
  margin-bottom: 0.5rem;
}

.page-header p {
  margin-top: 1rem;
  max-width: 40rem;
  color: var(--text-muted);
}

.callout {
  border-inline-start: 3px solid var(--brand);
  background: var(--paper-alt);
  padding: 1.25rem 1.5rem;
  font-family: var(--font-display);
  font-size: 1.15rem;
  color: var(--ink);
  /* Square on the ruled edge, rounded away from it — in both directions. */
  border-start-start-radius: 0;
  border-end-start-radius: 0;
  border-start-end-radius: 0.5rem;
  border-end-end-radius: 0.5rem;
}

/* Announcement bar. Sits above the sticky header and scrolls away with the
   page — a second sticky strip would eat vertical space on phones.
   Background is --brand-deep, not --brand: white on #38B6FF is 2.26:1 and
   fails WCAG, while white on #0A6BA8 clears AA. */
.announce {
  background: var(--brand-deep);
  color: var(--paper);
  font-size: 0.875rem;
}
.announce__inner {
  position: relative;
  max-width: 72rem;
  margin: 0 auto;
  padding: 0.55rem 3rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  text-align: center;
}
.announce__link {
  color: var(--paper);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
  justify-content: center;
}
.announce__cta { font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.announce__link:hover .announce__cta { text-decoration: none; }
.announce__link:focus-visible { outline: 2px solid var(--paper); outline-offset: 3px; border-radius: 2px; }
.announce__close {
  /* Logical inset so it lands on the correct side under RTL. */
  position: absolute;
  inset-inline-end: 0.75rem;
  background: none;
  border: 0;
  color: var(--paper);
  font-size: 1.15rem;
  line-height: 1;
  padding: 0.2rem 0.45rem;
  border-radius: 0.25rem;
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-out);
}
.announce__close:hover { background: rgba(255, 255, 255, 0.18); }
.announce__close:focus-visible { outline: 2px solid var(--paper); outline-offset: 2px; }

/* Donate layout — the page's only giving form and the copy around it.
   Three children, and their DOM order IS the phone layout: lead, then form,
   then LaunchGood. Below 900px this is a single column and that order is what
   a donor on a phone gets, so our own ask arrives before the link off to
   somebody else's site.
   Above 900px the explicit placement below lifts the form into a second column
   spanning both rows. Placement, not `order`: `order` moves the boxes and
   leaves the DOM where it was, and a screen reader or a keyboard user follows
   the DOM — so the two would disagree about what comes next. */
.donate-layout { display: grid; gap: 2.5rem; align-items: start; }
/* No margin-top here: the aside opens with a <section class="section">, whose
   own 3.5rem top margin already sets the heading's baseline. */
.donate-layout__aside { min-width: 0; }
@media (min-width: 900px) {
  /* 425px is measured, not chosen. donorbox.org/widgets.js hard-caps the
     donation form's maxInlineSize at exactly that, keyed off the
     type="donation_form" attribute (only type="event" and "top_fundraisers"
     get the wider 525px cap), and no CSS here reaches into that shadow DOM to
     change it. Naming the cap as the track width is the honest move: the form
     fills its column exactly, no empty gutter opens beside it, and the number
     explains itself to the next reader. If the widget's type ever changes,
     this number changes with it. */
  /* `auto 1fr`, and the 1fr is load-bearing. The form spans both rows and is
     far taller than the lead above it; with two auto rows the browser
     distributes that height across BOTH spanned tracks, which inflates row 1
     and drops the LaunchGood card most of a screen below the paragraph it
     belongs under. Making row 2 the flexible track sends every spare pixel
     there instead, so row 1 stays exactly as tall as the lead and the card
     sits directly beneath it. `align-items: start` then keeps the card at the
     top of its now-tall row rather than floating in the middle of it. */
  .donate-layout { grid-template-columns: minmax(0, 1fr) 425px; grid-template-rows: auto 1fr; gap: 3rem; }
  .donate-layout__lead  { grid-column: 1; grid-row: 1; }
  .donate-layout__extra { grid-column: 1; grid-row: 2; }
  .donate-layout__aside { grid-column: 2; grid-row: 1 / span 2; }
  /* Degrade to a single column if the form is ever pulled from the page, so
     the copy is not left stranded in a 1fr track with 425px of dead space
     beside it where the form used to be. */
  .donate-layout:not(:has(.donate-layout__aside)) { grid-template-columns: 1fr; }
}

/* Statement callouts — the vision/mission pair on About. A modifier, not a
   change to .callout itself: most callouts on the site are quotes and notices,
   and giving those a hover response would imply they are interactive.
   Colour-only on purpose. A transform here would need its own suppression in
   the reduced-motion block above; shifting the fill does not. */
.callout--statement {
  transition: background-color var(--dur) var(--ease-out),
              border-inline-start-color var(--dur) var(--ease-out);
}
.callout--statement:hover {
  background: var(--brand-soft);
  border-inline-start-color: var(--brand-bright);
}

.policy-note {
  margin-top: 1.5rem;
  border: 1px dashed var(--line);
  background: var(--paper-alt);
  border-radius: 0.5rem;
  padding: 1rem 1.25rem;
  font-size: 0.9rem;
  color: var(--text-muted);
}

.stat-block .stat-value {
  display: block;
  font-family: var(--font-display);
  font-size: 2.25rem;
  font-weight: 700;
  color: var(--brand-deep);
}
.stat-block .stat-label { color: var(--text-muted); font-size: 0.9rem; }

.section { margin-top: 3.5rem; }
.section ul { padding-inline-start: 1.25rem; margin: 0.75rem 0 0; }
.section li { margin-bottom: 0.5rem; }

/* Buttons */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border-radius: 999px;
  padding: 0.7rem 1.5rem;
  font-weight: 600;
  font-size: 0.95rem;
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
  will-change: transform;
  transition: background var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out),
              box-shadow var(--dur) var(--ease-out),
              transform var(--dur) var(--ease-spring);
}
.btn:active { transform: translateY(1px) scale(0.99); transition-duration: 0.06s; }

/* Primary: logo blue + ink text (7.39:1 AAA). Hover BRIGHTENS -> 9.11:1.
   The light intensifies, and contrast goes up with it. */
.btn-primary { background: var(--brand); color: var(--ink); }
.btn-primary:hover {
  background: var(--brand-bright);
  transform: translateY(-2px);
  box-shadow: var(--shadow-lift);
}
.btn-secondary { background: transparent; color: var(--ink); border-color: var(--line); }
.btn-secondary:hover {
  border-color: var(--brand);
  color: var(--brand-deep);
  background: var(--brand-soft);
  transform: translateY(-2px);
}
.btn-sm { padding: 0.5rem 1.1rem; font-size: 0.85rem; }

/* Header */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--paper);
  border-bottom: 1px solid var(--line);
}
.site-header__bar {
  max-width: 72rem;
  margin: 0 auto;
  padding: 0.4rem 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.site-header__logo {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  text-decoration: none;
}
.site-header__logo img {
  display: block;
  transition: transform var(--dur) var(--ease-spring), filter var(--dur) var(--ease-out);
}
/* The flame catches light on hover. */
.site-header__logo:hover img {
  transform: scale(1.03);
  filter: drop-shadow(0 0 10px rgba(56, 182, 255, 0.55));
}
.site-nav {
  display: flex;
  align-items: center;
  gap: 2rem;
}
.site-nav a:not(.btn) {
  position: relative;
  text-decoration: none;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--text);
  transition: color var(--dur-fast) var(--ease-out);
}
/* Underline wipes in from the reading-start edge, so it tracks the direction
   the eye travels: left-to-right in English, right-to-left in Arabic. */
.site-nav a:not(.btn)::after {
  content: '';
  position: absolute;
  inset-inline: 0;
  bottom: -4px;
  height: 2px;
  border-radius: 2px;
  background: var(--brand);
  transform: scaleX(0);
  transform-origin: inline-end;
  transition: transform var(--dur) var(--ease-out);
}
.site-nav a:not(.btn):hover { color: var(--brand-deep); }
.site-nav a:not(.btn):hover::after,
.site-nav a:not(.btn):focus-visible::after { transform: scaleX(1); transform-origin: inline-start; }
.site-nav a[aria-current="page"] { color: var(--brand-deep); font-weight: 600; }
.site-nav a[aria-current="page"]::after { transform: scaleX(1); }
.nav-toggle {
  position: relative;
  z-index: 2;
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  width: 2.5rem;
  height: 2.5rem;
  border: none;
  background: transparent;
  cursor: pointer;
}
.nav-toggle__bar { width: 22px; height: 2px; background: var(--ink); transition: transform 0.2s ease, opacity 0.2s ease; }
.nav-toggle.is-open .nav-toggle__bar:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav-toggle.is-open .nav-toggle__bar:nth-child(2) { opacity: 0; }
.nav-toggle.is-open .nav-toggle__bar:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

@media (max-width: 860px) {
  .site-nav {
    position: fixed;
    z-index: 1;
    inset: 0;
    flex-direction: column;
    align-items: flex-start;
    gap: 1.5rem;
    padding: 4.5rem 1.5rem 2rem;
    overflow-y: auto;
    background: var(--paper);
    transform: translateY(-100%);
    transition: transform 0.25s ease;
  }
  .site-nav.is-open { transform: translateY(0); }
  .nav-toggle { display: flex; }
}

/* Footer */
.site-footer { background: var(--ink); color: var(--paper); margin-top: 1.25rem; }
.site-footer__inner {
  max-width: 72rem;
  margin: 0 auto;
  padding: 0.75rem 1.5rem 0.35rem;
  display: grid;
  gap: 0.6rem;
}
@media (min-width: 700px) {
  .site-footer__inner { grid-template-columns: repeat(3, 1fr); }
}
.site-footer__brand { font-family: var(--font-display); font-weight: 700; font-size: 0.8rem; margin: 0; }
.site-footer__tagline { margin-top: 0.2rem; max-width: 24rem; font-size: 0.64rem; line-height: 1.4; color: rgba(255,255,255,0.7); }
.site-footer__heading { font-size: 0.54rem; text-transform: uppercase; letter-spacing: 0.06em; color: rgba(255,255,255,0.5); margin: 0; }
.site-footer__col ul { list-style: none; margin: 0.3rem 0 0; padding: 0; }
.site-footer__col li { margin-bottom: 0.14rem; line-height: 1.3; }
.site-footer__inner .site-footer__col:nth-child(3) ul {
  columns: 2;
  column-gap: 1.25rem;
}
.site-footer__inner .site-footer__col:nth-child(3) li { break-inside: avoid; }
.site-footer__col a { text-decoration: none; font-size: 0.66rem; color: rgba(255,255,255,0.8); }
.site-footer__col a:hover { color: var(--brand); }
.site-footer__legal { max-width: 72rem; margin: 0 auto; padding: 0 1.5rem 0.4rem; font-size: 0.54rem; color: rgba(255,255,255,0.4); }

/* Program cards */
.program-cards { display: grid; gap: 1.5rem; margin-top: 3rem; }
@media (min-width: 700px) { .program-cards { grid-template-columns: repeat(3, 1fr); } }
.program-card {
  position: relative;
  display: block;
  padding: 1.75rem;
  border: 1px solid var(--line);
  border-radius: 0.75rem;
  text-decoration: none;
  color: inherit;
  background: var(--paper-alt);
  overflow: hidden;
  will-change: transform;
  transition: border-color var(--dur) var(--ease-out),
              box-shadow var(--dur) var(--ease-out),
              background var(--dur) var(--ease-out),
              transform var(--dur) var(--ease-spring);
}
/* Light sweeps up from the bottom edge on hover. */
.program-card::after {
  content: '';
  position: absolute;
  inset: auto 0 0 0;
  height: 3px;
  background: linear-gradient(90deg, var(--brand), var(--brand-bright));
  transform: scaleX(0);
  transform-origin: inline-start;
  transition: transform var(--dur) var(--ease-out);
}
.program-card:hover {
  border-color: var(--brand);
  background: var(--paper);
  transform: translateY(-6px);
  box-shadow: var(--shadow-lift);
}
.program-card:hover::after { transform: scaleX(1); }
.program-card h3 { margin-bottom: 0.5rem; transition: color var(--dur-fast) var(--ease-out); }
.program-card:hover h3 { color: var(--brand-deep); }
.program-card p { color: var(--text-muted); font-size: 0.9rem; }

/* Featured card — Sabeely, the MVP. Spans the full row; the two supporting
   pillars then split the row beneath it. The grid drops to 2 columns so they
   divide evenly — at 3 columns the pair would sit left with a dead third
   column beside them. */
.program-card--featured { border-color: var(--brand); background: var(--brand-soft); }
@media (min-width: 700px) {
  .program-cards--lead { grid-template-columns: repeat(2, 1fr); }
  .program-card--featured { grid-column: 1 / -1; }
}
.program-card--featured::after { transform: scaleX(1); opacity: 0.5; }
.program-card--featured:hover::after { opacity: 1; }
.program-card__tag {
  display: inline-block;
  margin-bottom: 0.6rem;
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
  background: var(--brand-deep);
  color: #fff;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* Role picker — three portals on the login page */
.role-picker { border: 0; padding: 0; margin: 0 0 2rem; }
.role-picker__legend {
  padding: 0;
  margin-bottom: 0.75rem;
  font-weight: 600;
  font-size: 0.9rem;
}
/* Four role cards: 1 column on phones, a 2x2 block on tablets, one row of four
   on desktop. Two breakpoints rather than repeat(4, 1fr), which would crush the
   cards at tablet widths, and rather than a single 3-column rule, which would
   orphan the fourth card onto a row of its own. */
.role-cards { display: grid; gap: 0.75rem; }
@media (min-width: 620px) { .role-cards { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .role-cards { grid-template-columns: repeat(4, 1fr); } }

.role-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  padding: 1rem 1.1rem;
  border: 1px solid var(--line);
  border-radius: 0.75rem;
  background: var(--paper-alt);
  cursor: pointer;
  will-change: transform;
  transition: border-color var(--dur) var(--ease-out),
              background var(--dur) var(--ease-out),
              box-shadow var(--dur) var(--ease-out),
              transform var(--dur) var(--ease-spring);
}
/* The radio stays in the a11y tree — keyboard and screen readers use it —
   but is visually replaced by the card itself. */
.role-card input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  margin: 0;
  pointer-events: none;
}
.role-card__name { font-weight: 700; font-size: 1rem; }
.role-card__desc { color: var(--text-muted); font-size: 0.8rem; line-height: 1.45; }

.role-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); border-color: var(--brand); }
.role-card:has(input:checked) {
  border-color: var(--brand);
  background: var(--brand-soft);
  box-shadow: var(--shadow-glow);
}
.role-card:has(input:checked) .role-card__name { color: var(--brand-deep); }
/* Focus ring must follow the hidden radio out onto the card. */
.role-card:has(input:focus-visible) { outline: 2px solid var(--brand-deep); outline-offset: 2px; }

/* Forms */
.form-field { margin-bottom: 1.25rem; }
.form-field label { display: block; font-weight: 600; font-size: 0.9rem; margin-bottom: 0.4rem; }
.form-field input, .form-field textarea {
  width: 100%;
  padding: 0.7rem 0.9rem;
  border: 1px solid var(--line);
  border-radius: 0.5rem;
  font-family: inherit;
  font-size: 0.95rem;
  background: #fff;
}
.form-note { margin-top: 1rem; font-size: 0.9rem; }
.form-note[data-state="success"] { color: var(--success); }
.form-note[data-state="error"] { color: var(--error); }
.form-note[data-state="failure"] { color: var(--error); }
/* In-flight and not-yet-connected are neither wins nor faults, so they stay in
   the muted voice rather than borrowing the success or error colour. */
.form-note[data-state="sending"],
.form-note[data-state="unconfigured"] { color: var(--text-muted); }

/* The button is disabled for the duration of the request. */
.btn[disabled] { opacity: 0.6; cursor: not-allowed; }
.form-note[hidden] { display: none; }

/* Reveal-on-scroll. --reveal-i is set by reveal.js to stagger siblings. */
[data-reveal] {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out);
  transition-delay: calc(var(--reveal-i, 0) * 60ms);
}
[data-reveal].is-visible { opacity: 1; transform: translateY(0); }

/* Home page chapters */
.home-stage { position: fixed; inset: 0; z-index: -1; }
.home-canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.home-fallback {
  position: absolute; inset: 0;
  background: radial-gradient(circle at 50% 30%, var(--brand-soft) 0%, var(--paper) 65%);
}

/* Sabeely spotlight — the MVP lead section */
.sabeely-spotlight {
  position: relative;
  overflow: hidden;
  background: linear-gradient(160deg, var(--brand-soft) 0%, var(--paper) 70%);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.sabeely-spotlight__inner {
  position: relative;
  max-width: 42rem;
  margin: 0 auto;
  padding: 5rem 1.5rem;
}
.sabeely-spotlight__logo {
  width: min(300px, 68vw);
  height: auto;
  margin-bottom: 2rem;
}
.sabeely-spotlight h2 { font-size: clamp(1.9rem, 4vw, 2.9rem); }
.sabeely-spotlight p { margin-top: 1.25rem; color: var(--text-muted); font-size: 1.05rem; max-width: 34rem; }
.sabeely-spotlight .chapter-cta { margin-top: 2rem; }

/* A slow drifting glow, echoing the home-page light. */
.sabeely-spotlight::before {
  content: '';
  position: absolute;
  top: -30%;
  inset-inline-end: -10%;
  width: 55%;
  height: 160%;
  background: radial-gradient(circle, rgba(56, 182, 255, 0.22) 0%, rgba(56, 182, 255, 0) 68%);
  animation: drift 14s ease-in-out infinite alternate;
  pointer-events: none;
}
@keyframes drift {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(-6%, 5%, 0) scale(1.15); }
}
.chapter { position: relative; padding: 0 1.5rem; }
.chapter:first-child { min-height: 100vh; display: flex; align-items: center; }
.chapter__inner {
  display: flex;
  flex-direction: column;
  justify-content: center;
  max-width: 42rem;
  margin: 0 auto;
  padding: 4rem 0;
}
.chapter__inner p { margin-top: 1.25rem; color: var(--text-muted); font-size: 1.05rem; max-width: 34rem; }
.chapter-cta { margin-top: 2rem; display: flex; gap: 1rem; flex-wrap: wrap; }

/* Quran verse block */
.quran-block { max-width: 34rem; margin: 2rem auto; text-align: center; padding: 2rem 1.5rem; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.quran-arabic { font-family: 'Amiri', serif; font-size: 1.75rem; line-height: 2.2; color: var(--ink); }
.quran-translation { margin-top: 1.25rem; font-style: italic; color: var(--text-muted); }
.quran-block cite { display: block; margin-top: 0.5rem; font-size: 0.8rem; color: var(--text-muted); font-style: normal; }

/* ============================================================
   Arabic / RTL
   ============================================================ */

/* Fraunces and Inter carry no Arabic glyphs.
   IBM Plex Sans Arabic takes BOTH display and body in Arabic. This is the
   Saudi Digital Government Authority standard — the DGA Platforms Code design
   system specifies IBM Plex Sans Arabic, and Saudi government sites such as
   itba.gov.sa load exactly this family. Matching it means Arabic readers meet
   the typographic conventions their government and banking services already
   use, which reads as competence rather than as a translated foreign site.

   This deliberately breaks the serif/sans split the English side uses: there
   is no Arabic display serif here, because DGA standards do not have one.
   Amiri is retained ONLY for Qur'anic text below — scripture is not UI, and
   DGA typography standards do not govern how an ayah is set. */
html[lang="ar"] {
  --font-sans: 'IBM Plex Sans Arabic', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-display: 'IBM Plex Sans Arabic', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}
/* Plex Arabic headings need slightly tighter weight handling than Fraunces,
   which carries its emphasis in the serifs rather than in stroke weight. */
html[lang="ar"] h1 { font-weight: 700; }
html[lang="ar"] h2,
html[lang="ar"] h3 { font-weight: 600; }

/* Arabic script sits taller than Latin at the same point size and needs more
   leading to stay readable. */
html[lang="ar"] body { line-height: 1.85; }
html[lang="ar"] h1,
html[lang="ar"] h2,
html[lang="ar"] h3 { line-height: 1.5; letter-spacing: 0; }

/* Arabic is cursive — letters join, so tracking must never be applied. */
html[lang="ar"] [style*="letter-spacing"],
html[lang="ar"] .eyebrow,
html[lang="ar"] .btn { letter-spacing: 0; }

/* Qur'anic text is already Arabic and is never routed through the dictionary.
   Pin its direction so it renders correctly even while the page is in English. */
.quran-arabic { direction: rtl; text-align: center; unicode-bidi: isolate; }

/* Latin fragments inside Arabic prose — "One Light International", the EIN,
   URLs — need isolating or the bidi algorithm reorders the punctuation around
   them. */
html[lang="ar"] .ltr,
html[lang="ar"] [dir="ltr"] { unicode-bidi: isolate; direction: ltr; }

/* Language toggle */
.lang-toggle {
  position: relative;
  z-index: 2;
  flex: 0 0 auto;
  margin-inline-start: auto;
  margin-inline-end: 0.75rem;
  padding: 0.35rem 0.85rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: transparent;
  color: var(--text-muted);
  font-family: var(--font-sans);
  font-size: 0.85rem;
  font-weight: 600;
  line-height: 1.6;
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out),
              background var(--dur-fast) var(--ease-out);
}
.lang-toggle:hover,
.lang-toggle:focus-visible {
  color: var(--brand-deep);
  border-color: var(--brand);
  background: var(--paper-alt);
}
/* The toggle's label is always in the language being offered, so it always
   needs the other script's face. */
.lang-toggle[lang="ar"] { font-family: 'IBM Plex Sans Arabic', var(--font-sans); }
.lang-toggle[lang="en"] { font-family: 'Inter', var(--font-sans); }

/* On desktop the nav already sits to the end of the bar, so the toggle should
   not also claim the free space. */
@media (min-width: 861px) {
  .lang-toggle { margin-inline-start: 1rem; margin-inline-end: 0; order: 1; }
}

/* "English governs" notice, injected by i18n.js on legally operative pages.
   Bordered on the reading-start edge and set apart from the page's own prose,
   because a reader must not mistake it for part of the policy it precedes. */
.legal-translation-note {
  margin: 0 0 2.5rem;
  padding: 1rem 1.25rem;
  border-inline-start: 3px solid var(--brand-deep);
  background: var(--paper-alt);
  border-start-end-radius: 0.5rem;
  border-end-end-radius: 0.5rem;
  font-size: 0.9rem;
  line-height: 1.7;
  color: var(--text-muted);
}
.legal-translation-note p { margin: 0; }
.legal-translation-note p + p {
  margin-top: 0.4rem;
  font-family: 'Inter', var(--font-sans);
  opacity: 0.85;
}

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

/* Stripe one-time amount picker. */
.amount-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.5rem; }
.amount-btn {
  padding: 0.65rem 0.5rem;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--paper);
  font: inherit;
  font-weight: 600;
  color: var(--text);
  cursor: pointer;
  transition: border-color var(--dur) var(--ease-out), background-color var(--dur) var(--ease-out);
}
.amount-btn:hover { border-color: var(--brand-deep); }
.amount-btn.is-selected {
  border-color: var(--brand-deep);
  background: var(--brand-soft);
  color: var(--brand-deep);
}
/* Shared by the custom-amount field and the optional email field beside it, so
   the two read as one form rather than two borrowed styles. */
.amount-other {
  display: flex; align-items: center; gap: 0.4rem;
  margin-top: 0.5rem; padding: 0 0.65rem;
  border: 1px solid var(--line); border-radius: 8px;
  background: var(--paper);
}
.amount-other input {
  flex: 1; min-width: 0;
  border: 0; background: transparent;
  padding: 0.65rem 0; font: inherit; color: var(--text);
}
/* Mouse focus is shown by the wrapper's border alone, so the input's own ring
   would double up. Keyboard focus is not negotiable though — this is the money
   field, and :focus-visible must keep the site-wide ring from the base rules. */
.amount-other input:focus:not(:focus-visible) { outline: none; }
.amount-other:focus-within { border-color: var(--brand-deep); }