/* KARWABAR MARKETING SITE (docs/35, D-439/D-440).
 *
 * VISUAL DIRECTION (Sami, 2026-08-27): white ground; NAVY #16345F primary;
 * SAFFRON #F1A31F accent; coral and green ONLY where they carry meaning
 * (green = completed/arrival, coral sparingly). Soft coloured circles at low
 * opacity BEHIND the content — large, few, slow, PLAIN CSS: our visitors are
 * on the same low-end Android phones and slow connections the app is built
 * for, so WebGL/canvas particles and cursor-driven effects are excluded by
 * design, not omitted (a landing page that takes fifteen seconds to render
 * has already lost them; a cursor effect does nothing on a touchscreen).
 * Reference intent (21st.dev container-scroll / gradient-orb) adapted, never
 * copied — D-190.
 *
 * NO WEBFONT, deliberately: the audience's Android devices ship Noto's
 * Arabic-script faces system-wide, and a half-megabyte font download against
 * a ~5 GB monthly data basket fails the site's own cost rule (doc 24 §8's
 * reasoning). The stack below prefers the system Naskh everywhere.
 *
 * RTL-FIRST: the documents default to lang="fa" dir="rtl"; every property
 * here is logical (start/end), so the English toggle mirrors for free.
 */

:root {
  --navy: #16345f;
  --saffron: #f1a31f;
  /* Saffron is 2.15:1 on white — fine as a fill, never as text. Group
     headings use this darkened form, because a label a reader must READ
     has to pass contrast (doc 08's computed-not-eyeballed rule). */
  --saffron-ink: #8a5a00;
  --coral: #e56a54;
  --green: #1f9d5b;
  --ink: #1b1d21;
  --muted: #5a6272;
  --ground: #ffffff;
  --card: #ffffff;
  --line: #e7e9ee;
  --radius: 16px;
  --radius-lg: 24px;
  --max: 1080px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  background: var(--ground);
  color: var(--ink);
  font-family: "Noto Naskh Arabic", "Noto Sans Arabic", "Segoe UI", Tahoma, "Noto Sans", sans-serif;
  font-size: 17px;
  line-height: 1.7;
  overflow-x: hidden;
}
html[lang="en"] body { font-size: 16px; line-height: 1.6; }

/* ---------- the orbs: large, few, slow, BEHIND everything ----------
   DRAWN AS GRADIENTS, NOT AS BLURRED CIRCLES (Sami's ruling, 2026-08-29).
   These used to be solid circles under `filter: blur(70px)`, which asks the
   GPU for three large Gaussians at load — on all thirteen pages, on the
   cheap Android this site is built for, right where LCP is measured — and
   holds their rasterised layers in memory afterwards.

   You do not need a blur filter to draw a blurry circle: a radial-gradient
   from a translucent colour to transparent IS that circle, drawn as an
   ordinary background at a fraction of the cost, with no visual change
   anyone can name. `currentColor` is what lets the token stay the source of
   the colour, so the palette is still stated once.

   The steady-state cost of the OLD version was already near zero — they
   animate `transform` only, so the blur rasterised once — but the initial
   raster and the layer memory were real, and this removes both. */
.orbs { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.orb {
  position: absolute;
  background: radial-gradient(closest-side, currentColor, transparent 100%);
  opacity: 0.20;
}
.orb-navy { width: 60vmax; height: 60vmax; color: var(--navy); inset-block-start: -20vmax; inset-inline-end: -20vmax; animation: drift-a 46s ease-in-out infinite alternate; }
.orb-saffron { width: 44vmax; height: 44vmax; color: var(--saffron); inset-block-start: 45%; inset-inline-start: -18vmax; animation: drift-b 58s ease-in-out infinite alternate; }
.orb-coral { width: 30vmax; height: 30vmax; color: var(--coral); inset-block-end: -12vmax; inset-inline-end: 10%; opacity: 0.14; animation: drift-a 70s ease-in-out infinite alternate-reverse; }
@keyframes drift-a { from { transform: translate(0, 0); } to { transform: translate(-6vmax, 5vmax); } }
@keyframes drift-b { from { transform: translate(0, 0); } to { transform: translate(5vmax, -6vmax); } }
@media (prefers-reduced-motion: reduce) {
  /* Only the drift needs stopping now. It used to leave the blur behind,
     which is the half a reader would have assumed this rule removed; with
     the orbs drawn as gradients there is no raster left to worry about. */
  .orb { animation: none; }
  html { scroll-behavior: auto; }
}

/* ---------- shell ---------- */
.wrap { max-width: var(--max); margin-inline: auto; padding-inline: 20px; }

header.site {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding-block: 14px; flex-wrap: wrap;
}
.logo { font-size: 24px; font-weight: 700; color: var(--navy); text-decoration: none; }
.logo b { color: var(--saffron); }
nav.site { display: flex; gap: 16px; flex-wrap: wrap; }
nav.site a { color: var(--navy); text-decoration: none; font-size: 15px; padding-block: 6px; }
nav.site a:hover { text-decoration: underline; }
.langs { display: flex; gap: 6px; }
.langs button {
  border: 1px solid var(--line); background: var(--card); color: var(--navy);
  padding: 6px 12px; border-radius: 999px; font: inherit; font-size: 14px; cursor: pointer;
}
.langs button[aria-pressed="true"] { background: var(--navy); color: #fff; border-color: var(--navy); }

/* ---------- hero ---------- */
.hero { display: grid; gap: 32px; padding-block: 40px 56px; align-items: center; }
@media (min-width: 860px) { .hero { grid-template-columns: 1.15fr 0.85fr; padding-block: 56px 72px; } }
.badge {
  display: inline-block; background: color-mix(in srgb, var(--saffron) 16%, white);
  color: var(--navy); border: 1px solid color-mix(in srgb, var(--saffron) 45%, white);
  padding: 6px 14px; border-radius: 999px; font-size: 14px;
}
.hero h1 { color: var(--navy); font-size: clamp(30px, 6vw, 52px); line-height: 1.35; margin-block: 18px 10px; }
.hero .sub { color: var(--muted); font-size: 18px; max-width: 34em; }
.cta { display: flex; gap: 12px; margin-block-start: 26px; flex-wrap: wrap; }
.btn {
  display: inline-block; text-decoration: none; font: inherit; font-size: 17px;
  padding: 14px 26px; border-radius: 999px; min-height: 48px;
}
.btn-primary { background: var(--navy); color: #fff; }
.btn-primary:hover { background: #1d4275; }
.btn-ghost { color: var(--navy); border: 1.5px solid var(--navy); background: transparent; }
.btn-ghost:hover { background: color-mix(in srgb, var(--navy) 6%, white); }

/* ---------- the phone (container-scroll intent, adapted): tilted, then
   straightening once scrolled into view. The screen inside is a DIMENSIONED
   SLOT drawn in CSS — the D-191 rule: never a stand-in pretending to be a
   real screenshot; the real one drops in at the design pass. ---------- */
.phone-stage { display: flex; justify-content: center; perspective: 1200px; }
.phone {
  width: min(270px, 70vw); aspect-ratio: 9 / 19; border-radius: 36px;
  background: var(--navy); padding: 10px; box-shadow: 0 30px 60px -30px rgba(22, 52, 95, 0.45);
  transform: rotate(-7deg) rotateY(-12deg) translateY(10px);
  transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}
.phone.straight { transform: rotate(0deg) rotateY(0deg) translateY(0); }
@media (prefers-reduced-motion: reduce) { .phone { transform: none; transition: none; } }
.phone-screen {
  width: 100%; height: 100%; border-radius: 28px; background: #faf8f4;
  display: flex; flex-direction: column; gap: 8px; padding: 12px; overflow: hidden;
}
.ps-bar { height: 34px; border-radius: 10px; background: var(--navy); }
.ps-hero { height: 76px; border-radius: 12px; background: linear-gradient(120deg, var(--navy), #2a62a8); }
.ps-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.ps-tile { aspect-ratio: 1; border-radius: 10px; background: color-mix(in srgb, var(--saffron) 24%, white); }
.ps-tile:nth-child(2) { background: color-mix(in srgb, var(--navy) 14%, white); }
.ps-tile:nth-child(4) { background: color-mix(in srgb, var(--green) 18%, white); }
.ps-tile:nth-child(6) { background: color-mix(in srgb, var(--navy) 10%, white); }
.ps-row { height: 44px; border-radius: 10px; background: #fff; border: 1px solid var(--line); }

/* ---------- sections ---------- */
section.block { padding-block: 44px; }
section.block h2 { color: var(--navy); font-size: clamp(24px, 4.4vw, 34px); margin-block-end: 8px; }
section.block > .wrap > p.lead { color: var(--muted); max-width: 40em; margin-block-end: 26px; }

.steps { display: grid; gap: 16px; }
@media (min-width: 760px) { .steps { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1020px) { .steps.four { grid-template-columns: repeat(4, 1fr); } }
.card {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: 22px; box-shadow: 0 14px 34px -26px rgba(22, 52, 95, 0.28);
}
.stepnum {
  display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; border-radius: 50%; background: var(--saffron); color: var(--navy);
  font-size: 20px; font-weight: 700; margin-block-end: 12px;
}
.card h3 { color: var(--navy); font-size: 19px; margin-block-end: 6px; }
.card p { color: var(--muted); font-size: 15.5px; }

.aud { display: grid; gap: 16px; }
@media (min-width: 860px) { .aud { grid-template-columns: repeat(2, 1fr); } }
.aud .card h3::before { content: "●"; color: var(--saffron); margin-inline-end: 8px; font-size: 12px; vertical-align: 3px; }

/* Deep pages: one column of step sections. */
.longsteps { display: grid; gap: 18px; max-width: 720px; }
.longsteps .card { padding: 26px; }
.plain-rule { border-inline-start: 4px solid var(--coral); padding-inline-start: 14px; }
.good { border-inline-start: 4px solid var(--green); padding-inline-start: 14px; }

/* ---------- video slots: NOTHING renders while empty (docs/35 §3) ---------- */
.video-slot { margin-block-start: 14px; }
.video-slot:empty { display: none; margin: 0; }
.video-facade {
  position: relative; width: 100%; aspect-ratio: 16 / 9; border: 0; padding: 0;
  border-radius: var(--radius); overflow: hidden; cursor: pointer; background: var(--navy); display: block;
}
.video-facade img { width: 100%; height: 100%; object-fit: cover; opacity: 0.85; display: block; }
.video-facade .play {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
}
.video-facade .play span {
  width: 62px; height: 62px; border-radius: 50%; background: var(--saffron);
  display: flex; align-items: center; justify-content: center; color: var(--navy); font-size: 24px;
  box-shadow: 0 10px 26px -10px rgba(0, 0, 0, 0.5);
}
.video-slot iframe { width: 100%; aspect-ratio: 16 / 9; border: 0; border-radius: var(--radius); display: block; }

/* ---------- footer ---------- */
footer.site { border-block-start: 1px solid var(--line); margin-block-start: 40px; padding-block: 28px 40px; }
footer.site .wrap { display: flex; flex-wrap: wrap; gap: 18px; justify-content: space-between; color: var(--muted); font-size: 14.5px; }
footer.site a { color: var(--navy); text-decoration: none; }
footer.site a:hover { text-decoration: underline; }

/* Identifiers and codes stay LTR inside RTL text (doc 08). */
.ltr { direction: ltr; unicode-bidi: isolate; }

/* THE HONESTY LINE (Sami, 2026-08-28) — the site ships before the pilot, so
   every page states plainly that Karwabar is not open yet. Saffron, because
   this is information rather than a problem (doc 08's colour meaning: red is
   for problems only). Logical properties throughout so it mirrors in Dari
   and Pashto without a second rule. */
.notopen {
  max-width: var(--max);
  margin-block: 0 8px;
  margin-inline: auto;
  padding: 10px 14px;
  border-inline-start: 4px solid var(--saffron);
  background: #fff8ec;
  color: var(--ink);
  font-size: 15px;
  line-height: 1.6;
  border-radius: 8px;
}
@media (max-width: 720px) { .notopen { margin-inline: 12px; font-size: 14px; } }

/* THE `hidden` ATTRIBUTE MUST ACTUALLY HIDE (found by rendering, 2026-08-28).
   The hero's download button carries `hidden` until a real store URL exists,
   and it was RENDERING ANYWAY: the UA rule `[hidden] { display: none }` loses
   to any author `display` rule, and `.btn` sets one. So the site showed a
   "Download the app" button pointing at "#" — a dead control on a page about
   an app nobody can download yet, which is the exact overclaim the honesty
   line exists to prevent. Author-level and !important so no later `display`
   can quietly resurrect it. */
[hidden] { display: none !important; }

/* ── NAVIGATION FOR THIRTEEN PAGES (docs/35 §4.1, Sami 2026-08-28) ─────────
   THE FOUR GROUPS ARE THE NAVIGATION. A row of thirteen links is not
   navigation on a phone, so the header carries a MENU BUTTON and the grouped
   list opens over the page. The same grouped list is baked into every page's
   FOOTER in plain HTML — one home per page, and a reader with no JavaScript
   still has every link. The overlay is built by cloning that footer nav, so
   the two can never disagree about what pages exist. */
.menu-btn {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 44px; padding: 8px 14px;
  border: 1px solid var(--line); border-radius: 999px;
  background: var(--card); color: var(--navy);
  font: inherit; font-size: 15px; cursor: pointer;
}
.menu-btn:hover { border-color: var(--navy); }
.menu-btn .bars { display: inline-block; width: 16px; height: 2px; background: currentColor;
  box-shadow: 0 5px 0 currentColor, 0 -5px 0 currentColor; }

.menu-panel[hidden] { display: none; }
.menu-panel {
  position: fixed; inset: 0; z-index: 60;
  background: rgba(11, 20, 38, 0.45);
  padding: 16px; overflow-y: auto;
}
.menu-sheet {
  max-width: 720px; margin-inline: auto; margin-block: 8px 40px;
  background: var(--ground); border-radius: 18px; padding: 20px 20px 28px;
  box-shadow: 0 24px 60px rgba(11, 20, 38, 0.28);
}
.menu-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.menu-close {
  min-width: 44px; min-height: 44px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--card); color: var(--ink);
  font: inherit; font-size: 20px; line-height: 1; cursor: pointer;
}

/* THE GROUPS, in both the overlay and the footer. */
.navgroups { display: grid; gap: 22px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.navgroup h3 {
  margin: 0 0 8px; font-size: 13px; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: var(--saffron-ink);
}
.navgroup ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.navgroup a {
  display: block; padding: 10px 10px; margin-inline: -10px;
  border-radius: 10px; color: var(--navy); text-decoration: none; font-size: 16px; line-height: 1.5;
}
.navgroup a:hover { background: rgba(22, 52, 95, .06); }
.navgroup a[aria-current="page"] { background: rgba(22, 52, 95, .09); font-weight: 700; }

/* ── PAGE BODY: a heading, a lead, then numbered steps ──────────────────── */
.page { padding-block: 28px 56px; }
.page h1 { font-size: clamp(28px, 5vw, 40px); line-height: 1.25; margin: 0 0 10px; color: var(--navy); }
.page .lead { font-size: 18px; line-height: 1.7; margin: 0 0 28px; max-width: 60ch; }
.steps { display: grid; gap: 18px; }
.step {
  background: var(--card); border: 1px solid var(--line); border-radius: 16px;
  padding: 18px 20px;
}
.step h2 { font-size: 19px; line-height: 1.4; margin: 0 0 6px; color: var(--navy); }
.step p { margin: 0; font-size: 16px; line-height: 1.75; max-width: 65ch; }
.step p + p { margin-top: 10px; }
/* A section describing something that does not exist yet says so, quietly. */
.step.later { border-inline-start: 4px solid var(--saffron); }
.step .later-note { margin-top: 10px; font-size: 15px; color: #6b5a3a; }

/* THE FOOTER NAV is real content, not a decoration: it is the no-JavaScript
   navigation and the source the overlay clones. */
.site-foot { border-top: 1px solid var(--line); margin-top: 40px; padding-block: 28px 48px; }
.site-foot .foot-note { margin-top: 24px; font-size: 14px; color: #5b6572; }

/* ═══════════════════════════════════════════════════════════════════════
 * THE MISSION REGISTER (Sami, 2026-08-29).
 *
 * His correction, and it is the whole brief: "my plain sentences instruction
 * was about the WRITING — the design became plain too, and that was wrong.
 * Simple words, sophisticated presentation."
 *
 * So the explanation pages keep their calm cards on white — they serve a
 * reader who has never used an app — and THIS material speaks to a different
 * reader: somebody deciding whether we are serious. Full-bleed colour blocks
 * rather than boxes on white, generous vertical space, small uppercase
 * letter-spaced labels above headings, numbers large and confident.
 *
 * Both registers coexist on purpose. Nothing here changes the thirteen pages.
 * ═══════════════════════════════════════════════════════════════════════ */

/* A LABEL, not a heading. Letter-spacing is applied ONLY to the Latin
   rendering: doc 08's letter-spacing:0 rule is about Perso-Arabic, where
   spacing pulls connected script apart and destroys legibility. The Dari and
   Pashto label earns its separation from weight and colour instead. */
.eyebrow {
  display: block;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--saffron-ink);
  margin-bottom: 0.75rem;
}
html[lang="en"] .eyebrow { letter-spacing: 0.14em; }

/* FULL-BLEED, escaping .wrap's max-width without the width:100vw trick that
   adds a horizontal scrollbar wherever the scrollbar has width. */
.bleed {
  margin-inline: calc(50% - 50vw);
  padding-inline: calc(50vw - 50%);
  width: auto;
}

/* THE STONE. Navy with fine gold veins — the app's Lapis Wallet (doc 08's
   signature surface) answering on the website, so somebody who meets the site
   and then the app meets ONE product. The veins are an inline SVG data URI
   rather than an image file: it weighs nothing on a metered connection, which
   is this site's own cost rule (doc 24 §8). */
.stone {
  position: relative;
  background: linear-gradient(135deg, #16345f 0%, #16345f 42%, #2a62a8 62%, #16345f 78%, #16345f 100%);
  color: #fff;
  overflow: hidden;
  padding-block: clamp(4rem, 12vw, 8.5rem);
}
.stone > * { position: relative; z-index: 1; }
.stone .eyebrow { color: var(--saffron); }

/* THE MISSION IS A CLAIM, so it is set like one: large, tight, short enough
   to be read in one breath. */
.mission-claim {
  font-size: clamp(1.9rem, 5.2vw, 3.4rem);
  line-height: 1.35;
  font-weight: 700;
  margin: 0 0 1.5rem;
  max-width: 22ch;
}
.mission-body {
  font-size: clamp(1.02rem, 2.2vw, 1.2rem);
  line-height: 1.85;
  max-width: 62ch;
  color: rgba(255, 255, 255, 0.9);
  margin: 0;
}

/* THE VEINS. A separate rule so the long data URI sits on one line of its own
   and the block above stays readable. */
.stone::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.5;
  background-size: 100% 100%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 60' preserveAspectRatio='none'%3E%3Cdefs%3E%3ClinearGradient id='v' x1='0' y1='0' x2='1' y2='0'%3E%3Cstop offset='0' stop-color='%23D8A63C' stop-opacity='0'/%3E%3Cstop offset='0.35' stop-color='%23D8A63C' stop-opacity='0.34'/%3E%3Cstop offset='0.62' stop-color='%23D8A63C' stop-opacity='0.2'/%3E%3Cstop offset='1' stop-color='%23D8A63C' stop-opacity='0'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M-8 44 C 16 34, 36 38, 56 24 S 88 10, 112 2' stroke='url(%23v)' stroke-width='0.35' fill='none'/%3E%3Cpath d='M-8 58 C 22 50, 42 52, 64 36 S 94 24, 112 16' stroke='url(%23v)' stroke-width='0.22' fill='none'/%3E%3Cpath d='M-8 28 C 14 22, 32 26, 50 12 S 86 0, 112 -6' stroke='url(%23v)' stroke-width='0.16' fill='none'/%3E%3Cpath d='M26 6 C 32 16, 34 22, 31 36' stroke='url(%23v)' stroke-width='0.14' fill='none'/%3E%3Cpath d='M68 48 C 72 40, 71 34, 76 26' stroke='url(%23v)' stroke-width='0.12' fill='none'/%3E%3C/svg%3E");
}

/* THE STATISTICS BAND. The caption is what makes a number an argument rather
   than a decoration, and the SOURCE is part of the figure — Sami's rule is
   that any number we publish has a real source we can name, so provenance
   sits one line under the number where a reader can check it, never in a
   footnote nobody scrolls to. */
.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: clamp(2rem, 5vw, 3.5rem);
  margin-top: 3rem;
}
.stat-figure {
  font-size: clamp(2.6rem, 7vw, 4.2rem);
  font-weight: 700;
  line-height: 1;
  color: var(--saffron);
  /* TABULAR, so a counting-up number cannot jitter its own width and shove
     the caption about while it climbs. */
  font-variant-numeric: tabular-nums;
}
.stat-cap {
  margin: 0.85rem 0 0;
  font-size: 1rem;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.88);
  max-width: 28ch;
}
.stat-src {
  display: block;
  margin-top: 0.6rem;
  font-size: 0.8rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.62);
}
.stat-src a { color: rgba(255, 255, 255, 0.85); }

/* BEFORE AND AFTER — pale left, navy right, a saffron arrow on the seam. A
   grid rather than floats so the halves stay the same height. */
.ba-row {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: stretch;
  margin-bottom: clamp(1.25rem, 3vw, 2rem);
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(22, 52, 95, 0.06), 0 12px 30px rgba(22, 52, 95, 0.07);
}
.ba-side {
  padding: clamp(1.6rem, 4vw, 2.6rem);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.ba-before { background: #f4f1ea; color: #4a4741; }
.ba-after { background: var(--navy); color: #fff; }
.ba-who { font-size: 0.78rem; font-weight: 700; text-transform: uppercase; margin: 0 0 0.6rem; opacity: 0.75; }
.ba-side p { margin: 0; font-size: 1.02rem; line-height: 1.8; }
.ba-side p + p { margin-top: 0.5rem; }
.ba-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--saffron);
  padding-inline: clamp(0.6rem, 2vw, 1.1rem);
  color: var(--navy);
}
.ba-arrow svg { width: 1.6rem; height: 1.6rem; display: block; }
/* MIRRORED WITH THE PAGE: in RTL "today" sits on the right, so the arrow has
   to point the other way. One transform, not a second glyph. */
html[dir="rtl"] .ba-arrow svg { transform: scaleX(-1); }
@media (max-width: 46rem) {
  .ba-row { grid-template-columns: 1fr; }
  .ba-arrow { padding-block: 0.5rem; }
  .ba-arrow svg,
  html[dir="rtl"] .ba-arrow svg { transform: rotate(90deg); }
}

/* THE PLATFORM ARGUMENT — a quiet block, deliberately. The evidence is the
   point, and a loud treatment would read as a sales pitch built on somebody
   else's country. */
.evidence { background: #fbfaf7; padding-block: clamp(3.5rem, 9vw, 6rem); }
.evidence-lead {
  font-size: clamp(1.15rem, 2.6vw, 1.45rem);
  line-height: 1.8;
  max-width: 60ch;
  margin: 0 0 2rem;
  color: #2b2f36;
}
.evidence-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
  gap: clamp(1.5rem, 4vw, 2.5rem);
}
.evidence-item h3 { margin: 0 0 0.6rem; font-size: 1.12rem; }
.evidence-item p { margin: 0; line-height: 1.8; color: #4a4f57; }
.evidence-item cite {
  display: block;
  margin-top: 0.7rem;
  font-size: 0.82rem;
  font-style: normal;
  line-height: 1.6;
  color: #6b7079;
}

/* AN IMAGE SLOT (Sami, 2026-08-29: every image admin-managed, like the video
   slots). EMPTY IS THE NORMAL STATE AND MUST LOOK FINISHED — no placeholder
   box, no broken-image icon, no grey rectangle apologising. Until a URL
   exists the slot draws a quiet abstract field made of the palette, which
   reads as design because it is.
   HIS REASONING, recorded: stock photography of Afghans is mostly conflict
   and aid imagery under editorial-only licences, and putting identifiable
   people on a commercial site without releases is not something we would do.
   AI images fill these slots next; our own photographs of real sellers and
   drivers replace them once the pilot exists. */
.img-slot { position: relative; border-radius: 18px; overflow: hidden; }
.img-slot img { display: block; width: 100%; height: 100%; object-fit: cover; }
.img-slot[data-empty="1"] {
  background:
    radial-gradient(120% 90% at 18% 12%, rgba(241, 163, 31, 0.22), transparent 60%),
    radial-gradient(110% 80% at 82% 88%, rgba(42, 98, 168, 0.24), transparent 62%),
    linear-gradient(140deg, #eef1f6 0%, #f7f4ee 100%);
}
.stone .img-slot[data-empty="1"] {
  background:
    radial-gradient(120% 90% at 18% 12%, rgba(241, 163, 31, 0.26), transparent 60%),
    radial-gradient(110% 80% at 82% 88%, rgba(255, 255, 255, 0.12), transparent 62%),
    linear-gradient(140deg, rgba(255, 255, 255, 0.09) 0%, rgba(255, 255, 255, 0.03) 100%);
}
.img-slot.ratio-wide { aspect-ratio: 16 / 9; }
.img-slot.ratio-tall { aspect-ratio: 4 / 5; }

/* GENTLE REVEALS. Motion supports the text and never competes: a short
   fade-and-rise as a section enters view, once. `prefers-reduced-motion`
   removes it ENTIRELY rather than shortening it — the point of that setting
   is no movement, not less movement. */
.reveal { opacity: 0; transform: translateY(14px); transition: opacity 620ms ease, transform 620ms ease; }
.reveal.seen { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}