/* ============================================================
   NAJDI BULLETIN V2 (round 6 — the two set pieces)
   Newsroom brutalism on the Najdi brand: desert sand / deep
   ink / Najdi green, faint dot grain; dark mode = green-black.
   Archivo Black + Archivo (EN) · Cairo (AR) · IBM Plex Mono.
   The LOGO DOT is Najdi green #1a8c52 in both modes.
   Round 6 adds (riffed from wisprflow.ai, drawn in the
   bulletin hand — square ends, 3px rules, no gradients):
   · the WATCHED WIRE hero — angled full-width wire of all 70
     acronyms: ghost text → square-lens magnifier → ink tape.
     Replaces the round-5 nav ticker.
   · the INBOX BAND — s01 with a CSS phone (the real daily
     email in cycling Gmail/Outlook/Yahoo chrome) over a
     diagonal river of regulator tiles.
   Surfaces: Brief (home) · Archive · Regulators · About · FAQ ·
   Detail · Email — the header nav navigates between them.
   Round 7 (same reference, brand untouched): pipeline chips over
   a chunkier lens (dot position UNCHANGED — open decision), the
   river as a full S-wave of borderless tiles with hard offset
   shadows, the geometric peeker over the band rule, four new
   sections (demo / cost / personas / closing band), hero promise
   chips, the quiet display register (.s-intro), the one-time
   language nudge. Hard offset shadows are allowed — they are the
   bulletin's "pop"; soft blurs remain banned.
   ============================================================ */

.bl {
  /* THE NAJDI PALETTE — the brand (decided round 4→5):
     desert sand / deep ink / Najdi green, faint dot grain */
  --bone: #ece4d0;
  --ink:  #211d14;
  --ink-2: #57503f;
  --ink-3: #877f6a;
  --accent: #0e6b3d;
  --on-accent: #f0f7ee;
  --accent-tint: #7cc8a0;
  --rule: #211d14;
  --hair: rgba(33, 29, 20, 0.17);
  --ticker-bg: #0d3b24;
  --ticker-fg: #e9e4d2;

  --black: "Archivo Black", "Arial Black", sans-serif;
  --sans: "Archivo", Arial, sans-serif;
  --cairo: "Cairo", Tahoma, sans-serif;
  --data: "IBM Plex Mono", ui-monospace, monospace;
  --kufi: "Noto Kufi Arabic", system-ui, sans-serif;

  background: var(--bone);
  background-image: radial-gradient(rgba(33, 29, 20, 0.05) 1px, transparent 1px);
  background-size: 22px 22px;
  color: var(--ink);
  font-family: var(--sans);
  min-height: calc(100vh - var(--barh));
  -webkit-font-smoothing: antialiased;
}

html[data-theme="dark"] .bl {
  --bone: #0c120e;
  --ink:  #e7e4d6;
  --ink-2: #b0ac9c;
  --ink-3: #767e6e;
  --accent: #2e9e63;
  --on-accent: #06160d;
  --rule: #e7e4d6;
  --hair: rgba(231, 228, 214, 0.16);
  --ticker-bg: #03130a;
  --ticker-fg: #d9e4d6;
  background-image: radial-gradient(rgba(231, 228, 214, 0.045) 1px, transparent 1px);
}

/* ---------- base ---------- */

.bl[dir="rtl"] { font-family: var(--cairo); }

/* Arabic: Cairo carries the display register; never letter-space */
.bl[dir="rtl"] .site-nav,
.bl[dir="rtl"] .group-head .count,
.bl[dir="rtl"] .t-label,
.bl[dir="rtl"] .t-date,
.bl[dir="rtl"] .m-block i,
.bl[dir="rtl"] .group-head,
.bl[dir="rtl"] .notation,
.bl[dir="rtl"] .stamp,
.bl[dir="rtl"] .rel,
.bl[dir="rtl"] .item .links,
.bl[dir="rtl"] .item .ipub,
.bl[dir="rtl"] .s-no,
.bl[dir="rtl"] .hero-cta,
.bl[dir="rtl"] .hero-note,
.bl[dir="rtl"] .bm-count,
.bl[dir="rtl"] .bm-link,
.bl[dir="rtl"] .s01-note,
.bl[dir="rtl"] .sub-form button,
.bl[dir="rtl"] .f-acro,
.bl[dir="rtl"] .f-count,
.bl[dir="rtl"] .counter .ck,
.bl[dir="rtl"] .t-acro,
.bl[dir="rtl"] .registry-note,
.bl[dir="rtl"] .s02-foot .browse,
.bl[dir="rtl"] .sf-links,
.bl[dir="rtl"] .sf-riyadh,
.bl[dir="rtl"] .back,
.bl[dir="rtl"] .kicker,
.bl[dir="rtl"] .detail-dates .dlabel,
.bl[dir="rtl"] .pdf-btn,
.bl[dir="rtl"] .demo-label,
.bl[dir="rtl"] .demo-note,
.bl[dir="rtl"] .cost-h,
.bl[dir="rtl"] .c-k {
  font-family: var(--cairo);
  letter-spacing: 0;
  text-transform: none;
}

.bl a { color: inherit; text-decoration: none; }
.bl ::selection { background: var(--accent); color: var(--on-accent); }

.bl .home  { max-width: 1520px; margin: 0 auto; padding: 0 32px 90px; }
.bl .shell { max-width: 900px;  margin: 0 auto; padding: 0 28px 90px; }

/* ---------- reveals ---------- */

.bl .reveal { opacity: 0; transform: translateY(22px); transition: opacity .5s ease, transform .5s cubic-bezier(.2, .7, .3, 1); }
.bl .reveal.in { opacity: 1; transform: none; }
.bl .lede.reveal { transition-delay: .08s; }
.bl .today-strip.reveal { transition-delay: .16s; }
.bl .headline.reveal { transition-delay: .22s; }
.bl .standing.reveal { transition-delay: .3s; }
.bl .m-blocks.reveal { transition-delay: .38s; }

/* ---------- nav (stacked lockup) ---------- */

/* round 7c (Monther): the nav is STICKY — always on top while
   scrolling, parked under the prototype control bar. Solid bone
   so content scrolls away beneath it. */
.bl .site-nav {
  position: sticky;
  top: var(--barh);
  z-index: 60;
  background: var(--bone);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 26px;
  max-width: none;
  margin: 0 auto;
  padding: 12px 32px;
  border-bottom: 3px solid var(--rule);
  font-family: var(--sans);
  font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
}

/* anchors targeted by the CTAs must clear the sticky nav */
.bl .s01, .bl .sclose { scroll-margin-top: calc(var(--barh) + 96px); }

.bl[dir="rtl"] .site-nav { font-size: 12.5px; font-weight: 600; }

.bl .nav-links { display: flex; flex-wrap: wrap; gap: 4px 22px; margin-inline-start: 22px; }
.bl .nav-link { color: var(--ink-2); padding: 8px 0; transition: color 100ms ease; }
.bl .nav-link.on { color: var(--ink); box-shadow: 0 3px 0 var(--accent); }
.bl .nav-link:hover { color: var(--accent); }

.bl .nav-tools { margin-inline-start: auto; display: flex; align-items: center; gap: 16px; }

.bl .nav-lang { display: inline-flex; align-items: center; }
.bl .nav-lang button { appearance: none; background: none; border: none; cursor: pointer; font: inherit; color: var(--ink-3); padding: 8px 4px; }
.bl .nav-lang button.on { color: var(--ink); }
.bl .nav-lang button:hover { color: var(--accent); }
.bl .nav-lang button[lang="ar"] { font-family: var(--cairo); letter-spacing: 0; }
.bl .nav-lang .lsep { color: var(--ink-3); }

.bl .nav-cta {
  background: var(--accent);
  color: var(--on-accent);
  padding: 10px 20px;
  transition: background-color 100ms ease, color 100ms ease;
}
.bl .nav-cta:hover { background: var(--ink); color: var(--bone); }

/* ⑩ Task D — the session-aware Login/Account control (outermost nav tool).
   Secondary to the filled Subscribe CTA: an outlined control. RTL-safe (logical
   border + no hard-coded side; the flex/dir layout mirrors order automatically). */
.bl .nav-account {
  color: var(--ink-2);
  padding: 9px 16px;
  border: 2px solid var(--rule);
  transition: color 100ms ease, border-color 100ms ease, background-color 100ms ease;
}
.bl .nav-account:hover { color: var(--accent); border-color: var(--accent); }

/* ---------- focus-visible (a11y — ⑩ Task C/D) ----------
   The chrome had no visible keyboard-focus ring; add one so keyboard users can
   see where they are (nav links, the new Login/Account, Subscribe, theme, lang,
   and any in-content link/button). */
.bl a:focus-visible,
.bl button:focus-visible,
.bl .nav-account:focus-visible,
.bl .nav-cta:focus-visible,
.bl .nav-theme:focus-visible,
.bl .nav-lang a:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

/* the #subscribe anchor target (tabindex=-1) rings only on keyboard focus, not
   when a mouse-clicked CTA jumps to it */
.bl .s01:focus { outline: none; }
.bl .s01:focus-visible { outline: 3px solid var(--accent); outline-offset: -4px; }

/* ---------- the WATCHED WIRE (round 6 — hero set piece) ----------
   One flowing track of all 70 acronyms + counts, rendered three
   times in perfect sync and clipped into regions: upstream the
   raw feed drifts as faint ghost text loose on the sand; through
   the lens window it flips green; downstream it rides a solid
   ink tape — read and recorded. The clip seams fall exactly
   under the lens frame strokes. The lens is the brand's square
   magnifier: the tape crossing it is the icon's bar, the green
   dot below it is the icon's dot (kin to bawadir-icon.svg). */

.bl .wire {
  /* round 7 §D: 180px glass, stroke 17 → frame half-widths 59.5
     (inner) / 76.5 (outer); 68px sits on the stroke centerline.
     Re-derive BOTH values if the lens is resized again. */
  --lenshalf: 68px;
  --tapeh: 32px;
  margin-inline: calc(50% - 50vw);
  overflow: hidden;
  /* top padding holds the chip headroom (lens overflows the rot by
     24px, chip + gap need ~46px more) */
  padding: 76px 0 46px;
}

.bl .wire-rot {
  position: relative;
  width: 108vw;
  margin-inline-start: -4vw;
  height: 132px;
  transform: rotate(-2deg);
}

.bl[dir="rtl"] .wire-rot { transform: rotate(2deg); }

.bl .wlayer {
  position: absolute;
  left: 0; right: 0; top: 50%;
  height: var(--tapeh);
  transform: translateY(-50%);
  display: flex;
  align-items: center;
}

.bl .wlayer.ghost   { height: 126px; z-index: 1; color: var(--ink-3); clip-path: inset(0 calc(50% + var(--lenshalf)) 0 0); }
.bl .wlayer.tape    { z-index: 2; background: var(--ink); color: var(--bone); overflow: hidden; clip-path: inset(0 0 0 calc(50% + var(--lenshalf))); }
.bl .wlayer.lenslit { height: 102px; z-index: 3; color: var(--accent); clip-path: inset(0 calc(50% - var(--lenshalf)) 0 calc(50% - var(--lenshalf))); }

/* RTL mirrors the flow: ghosts enter from the right, tape exits left */
.bl[dir="rtl"] .wlayer.ghost { clip-path: inset(0 0 0 calc(50% + var(--lenshalf))); }
.bl[dir="rtl"] .wlayer.tape  { clip-path: inset(0 calc(50% + var(--lenshalf)) 0 0); }

.bl .wtrack {
  display: inline-flex;
  flex: none;
  align-items: baseline;
  animation: blwireflow 90s linear infinite;
  will-change: transform;
}

/* LTR reads left→right: enter as ghost on the left, exit as tape */
@keyframes blwireflow { from { transform: translateX(-50%); } to { transform: translateX(0); } }
.bl[dir="rtl"] .wtrack { animation-name: blwireflow-rtl; }
@keyframes blwireflow-rtl { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* round-6 feedback: the strips never stop — no hover pause */

/* identical font metrics in all three copies keep the glyph
   positions aligned — only color/opacity/per-item transforms vary */
.bl .wk {
  flex: none;
  display: inline-flex;
  align-items: baseline;
  gap: 7px;
  padding-inline: 18px;
  font-family: var(--data);
  font-size: 12.5px;
  letter-spacing: .06em;
}

.bl .wk b { font-weight: 700; }

/* upstream: the raw feed — faint, loose, slightly unruly
   (vertical jitter only: horizontal alignment must hold).
   Round 7b: Monther asked for the upstream side SPREAD and MESSIER
   — amplitude roughly doubled, rotations widened, slight per-item
   scales added (scale is a transform, so the cross-copy offsetLeft
   alignment still holds; the seam snap hides under the 17px frame
   stroke as before). Horizontal offsets stay forbidden. */
.bl .ghost .wk { opacity: .42; }
.bl .ghost .wk:nth-child(3n)   { transform: translateY(-15px) rotate(-4.5deg) scale(.92); opacity: .3; }
.bl .ghost .wk:nth-child(3n+1) { transform: translateY(12px) rotate(2.8deg); opacity: .52; }
.bl .ghost .wk:nth-child(5n+2) { transform: translateY(-8px) rotate(5.5deg) scale(1.1); }
.bl .ghost .wk:nth-child(7n+3) { transform: translateY(20px) rotate(-2.5deg) scale(.85); opacity: .26; }
.bl .ghost .wk:nth-child(4n+2) { transform: translateY(-21px) rotate(1.6deg) scale(.95); opacity: .36; }
.bl .ghost .wk:nth-child(11n+5) { transform: translateY(16px) rotate(-6deg) scale(1.06); opacity: .46; }
.bl .ghost .wk:nth-child(13n+8) { transform: translateY(-12px) rotate(7deg); opacity: .22; }

/* in the lens window: spotted — green, bolder and bigger.
   Per-item scale only (a layer-level scale would multiply the
   track translation and desynchronize the three copies), and
   text-stroke for the bold (a font-weight change would alter
   glyph widths and break the cross-layer alignment). */
.bl .lenslit .wk { transform: scale(1.34); -webkit-text-stroke: .9px currentColor; }

/* ---------- the logo version of the wire (round-6 ask) ----------
   Same three synced layers; the items are the real regulator marks.
   Identical img boxes in every layer keep the alignment; only
   filters/backgrounds/scale differ: raw faint marks upstream →
   full color in the lens → mounted on sand chips riding the tape. */

.bl .wire--logos { --tapeh: 56px; }

.bl .wk-logo { padding-inline: 13px; align-items: center; }

.bl .wk-logo img {
  width: 46px; height: 46px;
  padding: 5px;
  box-sizing: border-box;
  object-fit: contain;
  display: block;
}

/* ghost logos: many marks are light-colored — without a faint square
   ring they vanish into the sand entirely (looked broken in RTL QA).
   :nth-child(n) lifts specificity over the jitter rules' opacities
   while keeping their transforms. */
.bl .ghost .wk-logo, .bl .ghost .wk-logo:nth-child(n) { opacity: .55; }
.bl .ghost .wk-logo img { filter: grayscale(1); box-shadow: 0 0 0 2px color-mix(in srgb, var(--ink) 30%, transparent); }
.bl .lenslit .wk-logo { transform: scale(1.3); }
.bl .lenslit .wk-logo img { background: #ece4d0; box-shadow: 0 0 0 2px var(--accent); }
.bl .tape .wk-logo img { background: #ece4d0; box-shadow: 0 0 0 2px #211d14; }

.bl .wlens {
  position: absolute;
  left: 50%; top: 50%;
  width: 180px; height: 180px;
  margin: -90px 0 0 -90px;
  color: var(--ink);
  z-index: 4;
}

/* ---------- the pipeline chips (round 7 §A) ----------
   One chip at a time pops above the lens narrating the pipeline,
   synced to the acronym passing through the glass. Square ink
   chip, sand text, green ✓ — NOT a rounded pill. Lives inside
   .wire-rot so it rides the wire's tilt. Never pauses on hover.
   Reduced-motion: the one server-rendered chip, static. */

.bl .wchips {
  position: absolute;
  left: 50%;
  bottom: calc(50% + 100px); /* lens half (90) + gap */
  transform: translateX(-50%);
  z-index: 5;
  pointer-events: none;
}

.bl .wchip {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  white-space: nowrap;
  background: var(--ink);
  color: var(--bone);
  font-family: var(--data);
  font-size: 11px;
  letter-spacing: .07em;
  padding: 8px 14px;
  transform-origin: 50% 100%;
}

.bl[dir="rtl"] .wchip { font-family: var(--cairo); letter-spacing: 0; font-size: 12.5px; }

/* the ✓ takes the opposite mode's green so it reads on the chip */
.bl .wc-check { color: #7cc8a0; }
html[data-theme="dark"] .bl .wc-check { color: #0e6b3d; }

.bl .wchip.pop { animation: blchippop .22s cubic-bezier(.2, .8, .3, 1.2) both; }
.bl .wchip.off { animation: blchipoff .18s ease-in both; }

@keyframes blchippop {
  from { opacity: 0; transform: translateY(9px) scale(.6); }
  70%  { transform: translateY(-1px) scale(1.04); }
  to   { opacity: 1; transform: none; }
}

@keyframes blchipoff {
  from { opacity: 1; transform: none; }
  to   { opacity: 0; transform: translateY(-7px) scale(.75); }
}

/* ---------- hero: the statement deck, then the wire, then today ---------- */

.bl .hero { padding: 52px 0 6px; }

.bl .hero-deck { text-align: center; }
.bl .hero-deck .lede-head { margin-inline: auto; }
.bl .hero-deck .lede { margin-inline: auto; }

.bl .hero-cta-row { margin-top: 36px; }
.bl .hero-cta-row.reveal { transition-delay: .16s; }

.bl .hero-cta {
  display: inline-block;
  background: var(--accent);
  color: var(--on-accent);
  font-family: var(--sans);
  font-weight: 700;
  font-size: 14px; letter-spacing: .12em; text-transform: uppercase;
  padding: 17px 46px;
  transition: background-color 100ms ease, color 100ms ease;
}

.bl .hero-cta:hover { background: var(--ink); color: var(--bone); }

.bl .hero-note { font-family: var(--data); font-size: 10.5px; letter-spacing: .06em; color: var(--ink-3); margin: 12px 0 0; }

/* §E5 promise chips — CUT in round 7c (Monther: "remove those"). */

/* round 7 §F: the quiet display register — large Archivo 400
   (Cairo 500 in AR), sentence case, generous air. The contrast
   foil that makes the Archivo Black shouting land harder. */
.bl .s-intro {
  font-family: var(--sans);
  font-weight: 400;
  font-size: clamp(19px, 1.4vw + 8px, 30px);
  line-height: 1.5;
  letter-spacing: -0.005em;
  color: var(--ink-2);
  max-width: 50ch;
  margin: 24px 0 0;
}

.bl[dir="rtl"] .s-intro { font-family: var(--cairo); font-weight: 500; line-height: 1.85; letter-spacing: 0; }

/* the today deck below the wire keeps the bulletin's left-set voice */
.bl .hero-below { padding-bottom: 16px; border-bottom: 6px solid var(--rule); }

.bl .lede-head {
  font-family: var(--black);
  font-size: clamp(38px, 5.5vw, 92px);
  line-height: 0.98;
  letter-spacing: -0.015em;
  text-transform: uppercase;
  margin: 0;
  max-width: 17ch;
}

.bl[dir="rtl"] .lede-head {
  font-family: var(--cairo);
  font-weight: 900;
  font-size: clamp(32px, 4.4vw, 70px);
  line-height: 1.25;
  letter-spacing: 0;
  text-transform: none;
  max-width: 26ch;
}

.bl .lede {
  font-size: clamp(16px, 1vw + 10px, 21px);
  line-height: 1.55;
  color: var(--ink-2);
  max-width: 58ch;
  margin: 24px 0 0;
}

.bl[dir="rtl"] .lede { line-height: 1.9; }

.bl .today-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 16px;
  margin-top: 40px;
  border-top: 3px solid var(--rule);
  padding-top: 18px;
}

.bl .t-label {
  background: var(--accent);
  color: var(--on-accent);
  font-family: var(--sans);
  font-weight: 700;
  font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  padding: 5px 13px;
}

.bl .t-date {
  font-family: var(--data);
  font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-2);
}

.bl[dir="rtl"] .t-date { font-size: 12px; }

.bl .headline {
  font-family: var(--black);
  font-size: clamp(26px, 2.9vw, 54px);
  line-height: 1.02;
  letter-spacing: -0.012em;
  text-transform: uppercase;
  margin: 16px 0 0;
  max-width: 24ch;
}

.bl[dir="rtl"] .headline {
  font-family: var(--cairo);
  font-weight: 900;
  font-size: clamp(24px, 2.5vw, 46px);
  line-height: 1.3;
  letter-spacing: 0;
  text-transform: none;
  max-width: 32ch;
}

.bl .headline::after { content: '_'; color: var(--accent); }

.bl .standing {
  font-size: clamp(16px, 1vw + 10px, 20px);
  line-height: 1.55;
  color: var(--ink-2);
  max-width: 62ch;
  margin: 18px 0 0;
}

.bl[dir="rtl"] .standing { line-height: 1.9; }

/* personalized counter line (ADR-0007 §6: "Reading N of your T regulators") */
.bl .counter-line {
  font-family: var(--data);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 16px 0 0;
}
.bl[dir="rtl"] .counter-line { font-family: var(--cairo); letter-spacing: 0; text-transform: none; }

.bl .m-blocks { display: flex; flex-wrap: wrap; gap: 0; margin-top: 28px; border: 3px solid var(--rule); }

.bl .m-block {
  flex: 1 1 auto;
  min-width: 110px;
  padding: 12px 18px 10px;
  border-inline-end: 3px solid var(--rule);
  display: flex; flex-direction: column;
}

.bl .m-block:last-child { border-inline-end: none; }

.bl .m-block .num { font-family: var(--black); font-size: clamp(22px, 2.2vw, 34px); line-height: 1; }
.bl[dir="rtl"] .m-block .num { font-family: var(--cairo); font-weight: 900; }
.bl .m-block:nth-child(2) .num { color: var(--accent); }
.bl .m-block i { font-style: normal; font-family: var(--data); font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); padding-top: 6px; }

/* ---------- regulator groups ---------- */

.bl .group { padding-top: 38px; }

.bl .group-head {
  display: flex; align-items: baseline; gap: 14px;
  font-family: var(--sans);
  font-weight: 700;
  font-size: 13px; letter-spacing: .1em; text-transform: uppercase;
  padding-bottom: 10px;
}

.bl[dir="rtl"] .group-head { font-size: 14px; }

.bl .group-head .acro { background: var(--ink); color: var(--bone); padding: 3px 9px; font-family: var(--data); font-size: 11px; letter-spacing: .1em; }
.bl .group-head .name { color: var(--ink-2); }
.bl .group-head .count { margin-inline-start: auto; font-family: var(--data); font-size: 10.5px; font-weight: 400; color: var(--ink-3); }

.bl .item {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr) minmax(230px, 300px);
  gap: 6px 26px;
  align-items: start;
  border-top: 3px solid var(--rule);
  padding: 18px 10px 16px;
  margin-inline: -10px;
  transition: background-color 90ms ease, color 90ms ease;
}

.bl .item:hover { background: var(--ink); color: var(--bone); }

.bl .item .no {
  font-family: var(--black);
  font-size: 22px;
  color: var(--ink-3);
  line-height: 1.1;
}

.bl[dir="rtl"] .item .no { font-family: var(--cairo); font-weight: 900; }
.bl .item:hover .no { color: var(--accent); }

.bl .item .title {
  font-family: var(--sans);
  font-weight: 700;
  font-size: clamp(19px, 1.3vw + 10px, 25px);
  line-height: 1.25;
  letter-spacing: -0.01em;
  display: block;
}

.bl[dir="rtl"] .item .title { font-family: var(--cairo); font-size: clamp(18px, 1.2vw + 9px, 23px); line-height: 1.6; letter-spacing: 0; }

.bl .item .notation {
  font-family: var(--data);
  font-size: 10.5px; letter-spacing: .04em;
  color: var(--ink-3);
  padding-top: 8px;
}

.bl[dir="rtl"] .item .notation { font-size: 11px; }
.bl .item:hover .notation { color: inherit; opacity: .7; }

.bl .item .iside { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; padding-top: 4px; }

.bl .stamp {
  display: inline-block;
  font-family: var(--sans);
  font-weight: 700;
  font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase;
  padding: 5px 10px;
}

.bl .stamp.now { background: var(--ink); color: var(--bone); }
.bl .item:hover .stamp.now { background: var(--bone); color: var(--ink); }
.bl .stamp.def { background: var(--accent); color: var(--on-accent); }
.bl .stamp.none { box-shadow: inset 0 0 0 2px currentColor; opacity: .55; }

.bl .rel { font-family: var(--data); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); margin-inline-start: 10px; }
.bl .rel.reference { box-shadow: 0 3px 0 var(--accent); padding-bottom: 2px; color: var(--ink-2); }
.bl .item:hover .rel { color: inherit; opacity: .8; }

.bl .item .links { display: flex; gap: 14px; font-family: var(--data); font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
.bl .item:hover .links { color: inherit; opacity: .8; }
.bl .item .links a:hover { color: var(--accent); }
.bl .item:hover .links a:hover { color: var(--accent); opacity: 1; }

.bl .item .ipub { font-family: var(--data); font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
.bl .item:hover .ipub { color: inherit; opacity: .7; }

/* ---------- the brief cut (round 6): shorter brief → archive ---------- */

.bl .brief-more {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px 26px;
  border-top: 3px solid var(--rule);
  padding: 18px 0 4px;
  margin-top: 0;
}

.bl .bm-count { font-family: var(--data); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }

.bl .bm-link {
  margin-inline-start: auto;
  font-family: var(--sans);
  font-weight: 700;
  font-size: 13px; letter-spacing: .08em; text-transform: uppercase;
  box-shadow: 0 3px 0 var(--accent);
  padding-bottom: 2px;
}

.bl .bm-link:hover { color: var(--accent); }

/* ---------- shared section heads ---------- */

.bl .s-head { display: flex; align-items: baseline; gap: 18px; }

.bl .s-no { font-family: var(--black); font-size: 15px; color: var(--accent); }
.bl[dir="rtl"] .s-no { font-family: var(--cairo); font-weight: 900; }

.bl .s-title {
  font-family: var(--black);
  font-size: clamp(28px, 3.4vw, 56px);
  line-height: 1.02;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  margin: 0;
}

.bl[dir="rtl"] .s-title { font-family: var(--cairo); font-weight: 900; line-height: 1.3; letter-spacing: 0; text-transform: none; }

.bl .s-sub { font-size: 16.5px; line-height: 1.6; color: var(--ink-2); max-width: 58ch; margin: 14px 0 0; }
.bl[dir="rtl"] .s-sub { line-height: 1.9; }

/* ---------- 01 rebuilt (round 6): the inbox band ----------
   The ink slab becomes the second set piece: copy + form on one
   side, a phone showing the actual daily email inside cycling
   mail-client chrome on the other, and a diagonal river of
   regulator tiles flowing behind the device — coverage proof. */

.bl .s01 {
  margin-top: 72px;
  margin-inline: calc(50% - 50vw);
  padding-inline: max(32px, calc(50vw - 760px));
  padding-block: 56px 50px;
  background: var(--ticker-bg);
  color: var(--ticker-fg);
  position: relative;
  overflow: hidden;
}

.bl .s01-grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(300px, 1fr);
  gap: 44px 72px;
  align-items: center;
}

.bl .s01-copy { min-width: 0; }

/* the river (round-6 rework): ONE strip of regulator LOGOS riding a
   curve behind the phone. Every tile travels the same offset-path;
   even negative delays spread them along it and the loop recycles —
   the strip never runs dry. EN flows left→right (per Monther), RTL
   reverses travel. No hover pause. The inline offset-distance each
   tile carries is the reduced-motion static fallback. */
.bl .river { position: absolute; inset: 0; z-index: 0; pointer-events: none; }

/* fixed 2600px coordinate space centered in the band — the curve's
   ends sit off-screen on any viewport up to ~2600px wide.
   The curve is a FULL S-wave — trough low under the copy side,
   crest high behind/above the phone, running off both corners.
   (Round 7d tried Monther's through-the-copy drawing + a backdrop
   blur pane behind the text; he REVERTED it same day — "before was
   better, remove the blur". This S-wave is the keeper; don't route
   the strip through the copy zone again.) */
.bl .rivpath {
  position: absolute;
  top: 50%; left: 50%;
  /* ⑩ Task B — the S-wave is KEPT but its whole vertical extent is bounded to
     ~300px so the curve's crest + trough PLUS the tile box always fit the band
     at every width → zero top/bottom clipping. The wide fixed width lets the
     wave bleed HORIZONTALLY off both sides (intended). Centered by the margins;
     `transform` below handles RTL mirroring + the mobile uniform down-scale. */
  width: 2600px; height: 300px;
  margin: -150px 0 0 -1300px;
  --riv-flip: 1;
  --riv-scale: 1;
  transform: scaleX(var(--riv-flip)) scale(var(--riv-scale));
  transform-origin: 50% 50%;
}

/* round ⑩ fix — on the desktop side-by-side layout the S-wave crest rose into
   the phone's SCREEN (logos slicing across the email mockup). Push the whole
   curve down so it flows behind the phone's lower third — the phone now stands
   in front, screen clear. Scoped >940px: the stacked mobile layout keeps the
   centered default (its overlap dynamic differs). */
@media (min-width: 941px) {
  .bl .rivpath { margin-top: 60px; }
}

/* RTL mirrors the GEOMETRY (the phone sits on the other side, the
   crest must follow it); travel then runs right→left for free.
   Round 6b only reversed travel direction, which left the crest on
   the wrong side — fixed here. Tile contents counter-flip below. */
.bl[dir="rtl"] .rivpath { --riv-flip: -1; }
.bl[dir="rtl"] .rtile img { transform: scaleX(-1); }

.bl .rtile {
  position: absolute;
  top: 0; left: 0;
  width: 64px; height: 64px;
  /* round 7 §B tile polish: borderless warm-white chip (judged
     #f7f3ea over #ffffff — pure white glares against the slab) +
     the brutalist hard offset shadow. NO blur, ever. */
  background: #f7f3ea;
  box-shadow: 7px 7px 0 var(--rsh);
  display: flex;
  align-items: center;
  justify-content: center;
  /* ⑩ Task B — shallow S inside the 300px box: control-point y stays within
     [50, 250] so the curve (and the 64px tile centered on it) never exceeds the
     band top/bottom. Even offset-distance spacing is set inline per tile. */
  offset-path: path('M -320 150 C 300 250, 950 250, 1300 150 C 1650 50, 2300 50, 2920 150');
  offset-rotate: auto;
  animation: blriver 75s linear infinite; /* keep in sync with RIVER_DUR in app.js */
}

/* round 7b: size steps removed — Monther wants ONE unified box
   size; depth now comes from the wave + tilt + shadows alone */

/* the shadow plate per theme: deeper-than-the-band green-ink on the
   light slab; the light slab's green as a plate on the dark slab */
.bl .s01 { --rsh: #051b10; }
html[data-theme="dark"] .bl .s01 { --rsh: #11402a; }

.bl .rtile img { max-width: 76%; max-height: 76%; display: block; }

@keyframes blriver { from { offset-distance: 0%; } to { offset-distance: 100%; } }

/* ---------- the geometric peeker (round 7 §C → 7c) ----------
   Round 7c (Monther): the glasses are a FIXED page companion now —
   hugging the inline-end edge (right in EN, left in AR), always
   visible while scrolling, slightly tucked into the edge. They
   slide in once shortly after load. The old band-rule slot (and
   its IO-clipping bug saga) is gone. */

.bl .peek-fix {
  position: fixed;
  top: 50%; /* round ⑩ nudge: was 54% — sat too low and the lens rims clipped
               INTO the hero wire tape; lifted so the glasses peer OVER the wire. */
  inset-inline-end: -14px; /* tucked into the edge — peeking, not parked */
  width: 132px;
  z-index: 30; /* over content, under the sticky nav (60) */
  pointer-events: none;
  color: var(--ink);
  animation: blpeekin .55s cubic-bezier(.2, .7, .3, 1) 1s both;
}

.bl[dir="rtl"] .peek-fix { animation-name: blpeekin-rtl; }

@keyframes blpeekin { from { transform: translateX(120%); } to { transform: none; } }
@keyframes blpeekin-rtl { from { transform: translateX(-120%); } to { transform: none; } }

.bl .peek-fix .peeker { display: block; width: 100%; height: auto; }

.bl .peeker .pupil { transition: transform .12s linear; }

/* no cursor (touch): a slow idle scan instead of tracking */
.bl .peeker.idle .pupil { animation: blpeekscan 7s ease-in-out infinite; }

@keyframes blpeekscan {
  0%, 16%, 100% { transform: translateX(0); }
  30%, 46%      { transform: translateX(-6px); }
  62%, 82%      { transform: translateX(6px); }
}

/* the phone — a real device, so the outline may round; everything
   on its screen is the actual email renderer's output, scaled */
.bl .phone-wrap { display: flex; justify-content: center; min-width: 0; position: relative; z-index: 2; }

.bl .phone {
  width: 292px;
  max-width: 100%;
  border: 3px solid var(--ticker-fg);
  border-radius: 38px;
  background: #08090a;
  padding: 10px;
}

.bl .ph-screen {
  background: #ffffff;
  border-radius: 28px;
  overflow: hidden;
  height: 560px;
  display: flex;
  flex-direction: column;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
}

.bl .ph-status {
  display: flex; justify-content: space-between; align-items: center;
  padding: 9px 18px 5px;
  font-family: var(--data); font-size: 11px; font-weight: 600;
  color: #1c2028; background: #ffffff;
  flex: none;
}

.bl .ph-sig { display: inline-flex; align-items: flex-end; gap: 2px; }
.bl .ph-sig i { width: 3px; background: #1c2028; display: block; }
.bl .ph-sig i:nth-child(1) { height: 4px; }
.bl .ph-sig i:nth-child(2) { height: 7px; }
.bl .ph-sig i:nth-child(3) { height: 10px; }

/* client chrome — CSS approximations, crossfaded by data-client.
   App name set in type + header bar color + generic glyphs only. */
.bl .ph-chrome { position: relative; height: 50px; flex: none; }

.bl .ph-bar {
  position: absolute; inset: 0;
  display: flex; align-items: center; gap: 11px;
  padding: 0 14px;
  opacity: 0;
  transition: opacity .55s ease;
}

.bl .phone[data-client="gmail"] .ph-bar.gmail,
.bl .phone[data-client="outlook"] .ph-bar.outlook,
.bl .phone[data-client="yahoo"] .ph-bar.yahoo { opacity: 1; }

.bl .ph-bar.gmail   { background: #ffffff; color: #5f6368; }
.bl .ph-bar.outlook { background: #0f6cbd; color: #ffffff; }
.bl .ph-bar.yahoo   { background: #5f01d1; color: #ffffff; }

.bl .ph-glyph { font-size: 17px; line-height: 1; }
.bl .ph-search { flex: 1; background: #f1f3f4; color: #5f6368; border-radius: 16px; font-size: 12.5px; padding: 8px 14px; }
.bl .ph-app { flex: 1; font-size: 15px; font-weight: 600; }
.bl .ph-ava { width: 26px; height: 26px; border-radius: 50%; background: #c4cdd6; flex: none; }
.bl .ph-ava.lite { background: rgba(255, 255, 255, .32); }

.bl .ph-from {
  display: flex; gap: 9px; align-items: center;
  padding: 10px 14px;
  background: #ffffff;
  border-bottom: 1px solid #e8e8e8;
  flex: none;
}

/* sender avatar = the icon on brand sand, same as the inbox frame */
.bl .ph-avatar { width: 30px; height: 30px; border-radius: 50%; background: #ece4d0; color: #211d14; display: inline-flex; align-items: center; justify-content: center; flex: none; }
.bl .ph-avatar svg { display: block; }
.bl .ph-lines { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; }
.bl .ph-name { display: flex; align-items: baseline; gap: 8px; font-size: 13px; color: #1c2028; }
.bl .ph-name b { font-weight: 600; }
.bl .ph-time { margin-left: auto; font-size: 10.5px; color: #80868b; font-family: var(--data); }
.bl .ph-subj { font-size: 11.5px; color: #5f6368; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.bl .ph-mail { flex: 1; overflow: hidden; background: #ece4d0; }
.bl .ph-scale { width: 580px; transform: scale(0.4586); transform-origin: top left; }

/* the Bawadir email is sand-and-ink inside the phone in BOTH page
   themes — the phone is a constant object in the dark slab */
html[data-theme="dark"] .bl .ph-mail .bl-email { background: #ece4d0; color: #211d14; }
html[data-theme="dark"] .bl .ph-mail .bl-email .em-rule { border-color: #211d14; }
html[data-theme="dark"] .bl .ph-mail .bl-email .em-group-head { border-color: #211d14; }
html[data-theme="dark"] .bl .ph-mail .bl-email .em-item { border-color: #cfc6ab; }
html[data-theme="dark"] .bl .ph-mail .bl-email .em-stamp.now { background: #211d14; color: #ece4d0; }
html[data-theme="dark"] .bl .ph-mail .bl-email .em-stamp.def { background: #0e6b3d; color: #ffffff; }
html[data-theme="dark"] .bl .ph-mail .bl-email .em-links a { color: #0e6b3d; }
html[data-theme="dark"] .bl .ph-mail .bl-email .em-standing { color: #57503f; }

.bl .s01 .s-no { color: var(--accent-tint); }
.bl .s01-pitch { font-size: 17px; line-height: 1.6; opacity: .8; max-width: 56ch; margin: 16px 0 0; }
.bl[dir="rtl"] .s01-pitch { line-height: 1.9; }

.bl .sub-form { display: flex; gap: 0; max-width: 620px; margin-top: 28px; border: 3px solid var(--ticker-fg); }

.bl .sub-form input {
  flex: 1; min-width: 0;
  /* solid slab color (was transparent): the round-6 river must not
     show through the field */
  background: var(--ticker-bg);
  border: none;
  color: inherit;
  font-family: var(--data);
  font-size: 14px;
  padding: 14px 18px;
  min-height: 52px;
}

.bl .sub-form input::placeholder { color: inherit; opacity: .45; }
.bl .sub-form input:focus { outline: none; background: color-mix(in srgb, var(--ticker-fg) 9%, var(--ticker-bg)); }

.bl .sub-form button {
  background: var(--accent);
  color: var(--on-accent);
  border: none;
  font-family: var(--sans);
  font-weight: 700;
  font-size: 13px; letter-spacing: .1em; text-transform: uppercase;
  padding: 14px 30px;
  min-height: 52px;
  cursor: pointer;
  transition: background-color 100ms ease, color 100ms ease;
}

.bl .sub-form button:hover { background: var(--ticker-fg); color: var(--ticker-bg); }

.bl .s01-note { font-family: var(--data); font-size: 10.5px; letter-spacing: .06em; opacity: .6; margin: 14px 0 0; }

/* ⑩ Task D4 — the S01 "already subscribed" state (signed-in): a short plain
   greeting (the s-title) + one CTA button to customize the digest, in place of
   the subscribe form. Button matches the slab's sub-form button styling. */
.bl .s01-member { margin: 26px 0 0; }
.bl .s01-member-link {
  display: inline-block;
  background: var(--accent);
  color: var(--on-accent);
  font-family: var(--sans);
  font-weight: 700;
  font-size: 13px; letter-spacing: .08em; text-transform: uppercase;
  padding: 14px 28px;
  transition: background-color 100ms ease, color 100ms ease;
}
.bl .s01-member-link:hover { background: var(--ticker-fg); color: var(--ticker-bg); }
.bl[dir="rtl"] .s01-member-link { font-family: var(--cairo); letter-spacing: 0; text-transform: none; }

/* ---------- the before/after demo (round 7 §E1) ----------
   A raw Arabic circular in the ghost register visibly becomes one
   clean tagged brief row. Scroll-triggered sequence: raw reveals →
   arrow lights → row lands → stamps pop → raw dims, read. Then the
   row flips EN⇄AR on a timer (§E6). Smaller moment than the hero. */

.bl .sdemo { padding: 76px 0 0; }

.bl .demo-grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) 64px minmax(0, 7fr);
  gap: 26px;
  align-items: center;
  margin-top: 36px;
}

.bl .demo-label {
  font-family: var(--data);
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 12px;
}

/* the raw feed: dense, slightly askew, ghost-loose on the sand */
.bl .demo-raw {
  font-family: var(--cairo);
  font-size: 13px;
  line-height: 2;
  text-align: justify;
  color: var(--ink-3);
  border: 1px solid var(--hair);
  padding: 20px 22px;
  transform: rotate(-1.4deg);
  opacity: .92;
  transition: opacity .6s ease 1.3s;
}

.bl[dir="rtl"] .demo-raw { transform: rotate(1.4deg); }
.bl .demo-grid.in .demo-raw { opacity: .55; } /* read — it dims */

.bl .demo-arrow {
  font-family: var(--sans);
  font-weight: 900;
  font-size: 44px;
  line-height: 1;
  color: var(--accent);
  text-align: center;
  opacity: 0;
  transition: opacity .35s ease .45s;
}

.bl .demo-grid.in .demo-arrow { opacity: 1; }

.bl .demo-result {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .5s ease .55s, transform .5s cubic-bezier(.2, .7, .3, 1) .55s;
}

.bl .demo-grid.in .demo-result { opacity: 1; transform: none; }

/* the stamps pop in last — the "tagged" beat */
.bl .demo-result .stamp,
.bl .demo-result .rel {
  opacity: 0;
  transform: scale(.6);
  transition: opacity .25s ease, transform .25s cubic-bezier(.2, .9, .3, 1.3);
}

.bl .demo-grid.in .demo-result .stamp { opacity: 1; transform: none; transition-delay: 1s; }
.bl .demo-grid.in .demo-result .rel   { opacity: 1; transform: none; transition-delay: 1.15s; }

/* the flip stage: both language copies stacked, crossfaded by the
   initDemoFlip timer. Reduced-motion shows the page language. */
.bl .demo-stage { display: grid; }

.bl .demo-copy {
  grid-area: 1 / 1;
  transition: opacity .5s ease;
  pointer-events: none;
}

.bl .demo-copy.main, .bl .demo-stage.flip .demo-copy.alt { pointer-events: auto; }
.bl .demo-copy.alt { opacity: 0; }
.bl .demo-stage.flip .demo-copy.alt { opacity: 1; }
.bl .demo-stage.flip .demo-copy.main { opacity: 0; pointer-events: none; }

/* the row is the standard .item, forced compact (it lives in a
   half-width column) and self-contained */
.bl .demo-copy .item {
  grid-template-columns: 44px minmax(0, 1fr);
  border-bottom: 3px solid var(--rule);
}

.bl .demo-copy .item .iside {
  grid-column: 2;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
  padding-top: 10px;
}

.bl .demo-note {
  font-family: var(--data);
  font-size: 10px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-top: 12px;
}

/* the embedded other-language copy can't inherit the page-level
   [dir] font rules — set both directions explicitly. This is the
   round-2 lesson again: the override list is part of the cost. */
.bl .demo-stage [dir="rtl"] .item .title { font-family: var(--cairo); letter-spacing: 0; line-height: 1.6; }
.bl .demo-stage [dir="rtl"] .item .no { font-family: var(--cairo); font-weight: 900; }
.bl .demo-stage [dir="rtl"] .notation,
.bl .demo-stage [dir="rtl"] .stamp,
.bl .demo-stage [dir="rtl"] .rel,
.bl .demo-stage [dir="rtl"] .links { font-family: var(--cairo); letter-spacing: 0; text-transform: none; }
.bl .demo-stage [dir="ltr"] .item .title { font-family: var(--sans); letter-spacing: -0.01em; line-height: 1.25; }
.bl .demo-stage [dir="ltr"] .item .no { font-family: var(--black); font-weight: 400; }
.bl .demo-stage [dir="ltr"] .notation,
.bl .demo-stage [dir="ltr"] .links { font-family: var(--data); letter-spacing: .04em; }
.bl .demo-stage [dir="ltr"] .stamp { font-family: var(--sans); letter-spacing: .1em; text-transform: uppercase; }
.bl .demo-stage [dir="ltr"] .rel { font-family: var(--data); letter-spacing: .08em; text-transform: uppercase; }

/* ---------- the cost split (round 7 §E2) ----------
   The 45wpm-vs-220wpm move: a two-column ruled scoreboard. */

.bl .scost { padding: 76px 0 0; }

.bl .cost {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border: 3px solid var(--rule);
  margin-top: 36px;
}

.bl .cost-col { padding: 22px 26px 24px; }
.bl .cost-col + .cost-col { border-inline-start: 3px solid var(--rule); }

.bl .cost-h {
  font-family: var(--sans);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-2);
  padding-bottom: 12px;
  border-bottom: 3px solid var(--rule);
}

.bl .cost-col.win .cost-h { color: var(--accent); border-bottom-color: var(--accent); }

.bl .cost-row {
  display: flex;
  align-items: baseline;
  gap: 18px;
  padding: 16px 0 13px;
  border-bottom: 1px solid var(--hair);
}

.bl .cost-row:last-child { border-bottom: none; }

.bl .c-v {
  font-family: var(--black);
  font-size: clamp(34px, 3vw, 56px);
  line-height: 1;
  letter-spacing: -0.01em;
  min-width: 2.4ch;
}

.bl[dir="rtl"] .c-v { font-family: var(--cairo); font-weight: 900; letter-spacing: 0; }
.bl .cost-col.win .c-v { color: var(--accent); }

.bl .c-k {
  font-family: var(--data);
  font-size: 10.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-3);
}

/* personas (§E3) — CUT in round 7b per Monther. */

/* ---------- the closing CTA band (round 7 §E4) ----------
   "Start flowing", translated: one last full-bleed slab before the
   footer. The form repeats; the nav CTA still targets s01. */

.bl .sclose {
  margin-top: 86px;
  margin-inline: calc(50% - 50vw);
  padding-inline: max(32px, calc(50vw - 760px));
  padding-block: 74px 64px;
  background: var(--ticker-bg);
  color: var(--ticker-fg);
  text-align: center;
}

.bl .sclose-line {
  font-family: var(--black);
  font-size: clamp(34px, 4.6vw, 84px);
  line-height: 1;
  letter-spacing: -0.015em;
  text-transform: uppercase;
  margin: 0;
}

.bl[dir="rtl"] .sclose-line {
  font-family: var(--cairo);
  font-weight: 900;
  line-height: 1.3;
  letter-spacing: 0;
  text-transform: none;
}

.bl .sclose .sub-form { margin: 36px auto 0; max-width: 560px; }
.bl .sclose .s01-note { margin-top: 16px; }

/* the closing band sits right above the footer — halve the gap */
.bl .sclose + .site-footer { margin-top: 44px; }

/* ---------- the language nudge (round 7 §E6, optional) ----------
   One quiet chip by the toggle, once per session. KILL CLAUSE:
   if it reads needy, delete .bw-nudge + .pulse + initLangNudge. */

.bl .nav-tools { position: relative; }

.bl .bw-nudge {
  position: absolute;
  top: calc(100% + 12px);
  inset-inline-end: 56px;
  z-index: 20;
  background: var(--ink);
  color: var(--bone);
  font-size: 11.5px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  white-space: nowrap;
  padding: 6px 11px;
  animation: blchippop .25s cubic-bezier(.2, .8, .3, 1.2) both;
}

.bl .bw-nudge[lang="ar"] { font-family: var(--cairo); }
.bl .bw-nudge.off { animation: blchipoff .3s ease-in both; }

.bl .nav-lang.pulse { animation: blnavpulse .9s ease-out 2; }

@keyframes blnavpulse {
  from { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 55%, transparent); }
  to   { box-shadow: 0 0 0 12px transparent; }
}

/* ---------- 02 coverage: the scoreboard ---------- */

.bl .s02 { padding: 76px 0 0; }

.bl .feat { margin-top: 28px; border-top: 3px solid var(--rule); }

.bl .feat-row {
  display: flex; align-items: baseline; gap: 20px;
  border-bottom: 3px solid var(--rule);
  padding: 14px 2px;
  transition: background-color 90ms ease, color 90ms ease;
}

.bl .feat-row:hover { background: var(--ink); color: var(--bone); }

.bl .f-acro { font-family: var(--data); font-size: 11.5px; font-weight: 600; letter-spacing: .1em; min-width: 80px; color: var(--accent); }
.bl .f-name { font-family: var(--sans); font-weight: 700; font-size: clamp(17px, 1.4vw, 24px); letter-spacing: -0.01em; }
.bl[dir="rtl"] .f-name { font-family: var(--cairo); letter-spacing: 0; }
.bl .f-leader { flex: 1; }
.bl .f-count { font-family: var(--data); font-size: 11px; color: var(--ink-3); white-space: nowrap; }
.bl .feat-row:hover .f-count { color: inherit; opacity: .8; }
.bl .f-count .num { font-family: var(--black); font-size: clamp(20px, 1.8vw, 30px); color: var(--ink); font-weight: 400; }
.bl[dir="rtl"] .f-count .num { font-family: var(--cairo); font-weight: 900; }
.bl .feat-row:hover .f-count .num { color: var(--accent); }

.bl .s02-foot { display: flex; flex-wrap: wrap; gap: 10px 26px; align-items: baseline; padding-top: 18px; }
.bl .registry-note { font-family: var(--data); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.bl .browse { font-family: var(--sans); font-weight: 700; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; box-shadow: 0 3px 0 var(--accent); padding-bottom: 2px; }
.bl .browse:hover { color: var(--accent); }

/* ---------- 03 tally: numbers that shout ---------- */

.bl .s03 { padding: 76px 0 0; }

.bl .counters {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border: 3px solid var(--rule);
  margin-top: 28px;
}

.bl .counter { padding: 26px 26px 20px; border-inline-end: 3px solid var(--rule); }
.bl .counter:last-child { border-inline-end: none; }

.bl .counter .cv {
  font-family: var(--black);
  font-size: clamp(34px, 4vw, 72px);
  line-height: 1;
  letter-spacing: -0.01em;
}

.bl[dir="rtl"] .counter .cv { font-family: var(--cairo); font-weight: 900; letter-spacing: 0; }
.bl .counter:first-child .cv { color: var(--accent); }
.bl .counter:last-child .cv { font-size: clamp(26px, 2.6vw, 48px); line-height: 1.2; }

.bl .counter .ck { font-family: var(--data); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); padding-top: 10px; }

/* ---------- 04 register: the flag wall ---------- */

.bl .s04 { padding: 76px 0 0; }

.bl .wall {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(148px, 1fr));
  gap: 0;
  border-top: 3px solid var(--rule);
  border-inline-start: 3px solid var(--rule);
  margin-top: 28px;
}

.bl .tile {
  border-inline-end: 3px solid var(--rule);
  border-bottom: 3px solid var(--rule);
  padding: 13px 14px 11px;
  display: flex; flex-direction: column; gap: 4px;
  min-height: 96px;
  transition: background-color 90ms ease, color 90ms ease;
}

.bl .tile:hover { background: var(--accent); color: var(--on-accent); }

.bl .t-acro { font-family: var(--black); font-size: 13px; letter-spacing: .02em; }
.bl[dir="rtl"] .t-acro { font-family: var(--data); font-weight: 700; }
.bl .t-name { font-size: 11.5px; line-height: 1.4; color: var(--ink-3); }
.bl[dir="rtl"] .t-name { font-family: var(--cairo); line-height: 1.6; }
.bl .tile:hover .t-name { color: inherit; opacity: .85; }
.bl .t-count { margin-top: auto; font-family: var(--data); font-size: 10px; color: var(--ink-3); }
.bl .tile:hover .t-count { color: inherit; opacity: .85; }

/* ---------- site footer ---------- */

.bl .site-footer { margin-top: 86px; border-top: 6px solid var(--rule); padding-top: 22px; }

.bl .sf-links {
  display: flex; flex-wrap: wrap; gap: 8px 24px;
  font-family: var(--sans);
  font-weight: 700;
  font-size: 12px; letter-spacing: .08em; text-transform: uppercase;
}

.bl .sf-links a:hover { color: var(--accent); }
.bl .sf-signoff { font-size: 14px; color: var(--ink-2); padding-top: 16px; }
.bl .sf-riyadh { font-family: var(--data); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); padding-top: 6px; }

/* ---------- detail (the bulletin article) ---------- */

.bl .back {
  display: inline-block;
  font-family: var(--sans);
  font-weight: 700;
  font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-2);
  margin: 30px 0 26px;
  box-shadow: 0 3px 0 var(--hair);
  padding-bottom: 2px;
}

.bl .back:hover { color: var(--accent); box-shadow: 0 3px 0 var(--accent); }

.bl .kicker {
  font-family: var(--data);
  font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-2);
  padding-bottom: 14px;
}

.bl .detail-title {
  font-family: var(--black);
  font-size: clamp(30px, 4vw, 54px);
  line-height: 1.04;
  letter-spacing: -0.012em;
  text-transform: uppercase;
  margin: 0 0 16px;
}

.bl[dir="rtl"] .detail-title { font-family: var(--cairo); font-weight: 900; line-height: 1.35; letter-spacing: 0; text-transform: none; font-size: clamp(26px, 3.2vw, 42px); }

.bl .detail-title-alt { font-size: 17px; line-height: 1.6; color: var(--ink-2); margin: 0 0 18px; max-width: 60ch; }
.bl .detail-title-alt[dir="rtl"] { font-family: var(--cairo); line-height: 1.85; }

.bl .stamp-row { padding-bottom: 8px; }

.bl .detail-summary {
  font-size: 18px; line-height: 1.65;
  border-top: 3px solid var(--rule);
  padding-top: 22px; margin-top: 16px;
  max-width: 64ch;
}

.bl[dir="rtl"] .detail-summary { line-height: 1.95; }

.bl .detail-dates { margin: 26px 0 30px; border-top: 3px solid var(--rule); max-width: 560px; }

.bl .detail-dates .drow {
  display: flex; justify-content: space-between; gap: 18px; align-items: baseline;
  padding: 11px 2px;
  border-bottom: 1px solid var(--hair);
  font-size: 14.5px;
}

.bl .detail-dates .dlabel { font-family: var(--data); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }

.bl .pdf-btn {
  display: inline-block;
  background: var(--accent);
  color: var(--on-accent);
  font-family: var(--sans);
  font-weight: 700;
  font-size: 13px; letter-spacing: .1em; text-transform: uppercase;
  padding: 14px 30px;
  transition: background-color 100ms ease, color 100ms ease;
}

.bl .pdf-btn:hover { background: var(--ink); color: var(--bone); }

.bl .footer .signoff { font-size: 13px; color: var(--ink-3); padding-top: 40px; }

/* ---------- the pages (round 5): shared page head ---------- */

.bl .page-head { padding: 48px 0 26px; border-bottom: 6px solid var(--rule); }

.bl .page-title {
  font-family: var(--black);
  font-size: clamp(36px, 4.6vw, 76px);
  line-height: 1;
  letter-spacing: -0.015em;
  text-transform: uppercase;
  margin: 0;
}

.bl[dir="rtl"] .page-title { font-family: var(--cairo); font-weight: 900; line-height: 1.3; letter-spacing: 0; text-transform: none; }
.bl .page-title::after { content: '_'; color: var(--accent); }

.bl .page-sub { font-size: clamp(15px, 1vw + 9px, 19px); line-height: 1.55; color: var(--ink-2); max-width: 58ch; margin: 18px 0 0; }
.bl[dir="rtl"] .page-sub { line-height: 1.9; }

/* ---------- archive ---------- */

.bl .arch { margin-top: 6px; }

.bl .arch-band {
  font-family: var(--sans);
  font-weight: 700;
  font-size: 13px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-2);
  padding: 34px 0 10px;
}

.bl[dir="rtl"] .arch-band { font-family: var(--cairo); letter-spacing: 0; text-transform: none; }

.bl .arch-row {
  display: flex;
  align-items: baseline;
  gap: 18px;
  border-top: 3px solid var(--rule);
  padding: 15px 10px 13px;
  margin-inline: -10px;
  transition: background-color 90ms ease, color 90ms ease;
}

.bl .arch-row:hover { background: var(--ink); color: var(--bone); }

.bl .a-no { font-family: var(--black); font-size: 17px; min-width: 96px; }
.bl[dir="rtl"] .a-no { font-family: var(--cairo); font-weight: 900; }
.bl .arch-row.live .a-no { color: var(--accent); }
.bl .arch-row:hover .a-no { color: var(--accent); }

.bl .a-date { font-family: var(--sans); font-weight: 600; font-size: 15.5px; }
.bl[dir="rtl"] .a-date { font-family: var(--cairo); }

.bl .a-leader { flex: 1; }

.bl .a-items, .bl .a-act {
  font-family: var(--data);
  font-size: 11px;
  color: var(--ink-3);
  white-space: nowrap;
}

.bl[dir="rtl"] .a-items, .bl[dir="rtl"] .a-act { font-family: var(--kufi); }

.bl .a-items .num, .bl .a-act .num { font-weight: 600; font-size: 13px; color: var(--ink); }
.bl .a-act .num { color: var(--accent); }
.bl .arch-row:hover .a-items, .bl .arch-row:hover .a-act { color: inherit; opacity: .8; }
.bl .arch-row:hover .a-items .num { color: inherit; }

.bl .a-read {
  font-family: var(--sans);
  font-weight: 700;
  font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--accent);
  min-width: 72px;
  text-align: end;
}

.bl[dir="rtl"] .a-read { font-family: var(--cairo); letter-spacing: 0; text-transform: none; }
.bl .a-read.dim { color: var(--ink-3); opacity: .5; }
.bl .arch-row:hover .a-read.dim { color: inherit; }

.bl .proto-note {
  font-family: var(--data);
  font-size: 10px;
  color: var(--ink-3);
  border-top: 3px solid var(--rule);
  padding-top: 12px;
  margin: 0;
}

.bl[dir="rtl"] .proto-note { font-family: var(--kufi); }

/* ---------- regulators directory ---------- */

.bl .dir { margin-top: 6px; }

.bl .dir-row {
  display: flex;
  align-items: baseline;
  gap: 18px;
  border-top: 3px solid var(--rule);
  padding: 14px 10px 12px;
  margin-inline: -10px;
  transition: background-color 90ms ease, color 90ms ease;
}

.bl .dir-row:hover { background: var(--ink); color: var(--bone); }

.bl .d-acro {
  font-family: var(--data);
  font-size: 11.5px; font-weight: 600; letter-spacing: .1em;
  color: var(--accent);
  min-width: 96px;
}

.bl .d-names { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.bl .d-name { font-family: var(--sans); font-weight: 700; font-size: clamp(16px, 1.2vw, 21px); letter-spacing: -0.01em; }
.bl[dir="rtl"] .d-name { font-family: var(--cairo); letter-spacing: 0; }
.bl .d-alt { font-size: 13px; color: var(--ink-3); }
.bl .d-alt[dir="rtl"] { font-family: var(--cairo); }
.bl .dir-row:hover .d-alt { color: inherit; opacity: .7; }

.bl .d-leader { flex: 1; }

.bl .d-count { font-family: var(--data); font-size: 11px; color: var(--ink-3); white-space: nowrap; }
.bl[dir="rtl"] .d-count { font-family: var(--kufi); }
.bl .d-count .num { font-family: var(--black); font-size: 17px; color: var(--ink); font-weight: 400; }
.bl[dir="rtl"] .d-count .num { font-family: var(--cairo); font-weight: 900; }
.bl .dir-row:hover .d-count { color: inherit; opacity: .8; }
.bl .dir-row:hover .d-count .num { color: var(--accent); }

/* ---------- about ---------- */

.bl .ab { max-width: 760px; }

.bl .ab-sec { border-top: 3px solid var(--rule); padding: 26px 0 8px; margin-top: 26px; }
.bl .ab-sec:first-child { margin-top: 10px; }

.bl .ab-h {
  font-family: var(--black);
  font-size: clamp(20px, 1.8vw, 30px);
  letter-spacing: -0.01em;
  text-transform: uppercase;
  margin: 0 0 14px;
}

.bl[dir="rtl"] .ab-h { font-family: var(--cairo); font-weight: 900; letter-spacing: 0; text-transform: none; }

.bl .ab-p { font-size: 17px; line-height: 1.65; color: var(--ink-2); margin: 0; }
.bl[dir="rtl"] .ab-p { line-height: 1.95; }

.bl .tag-demo { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; padding: 18px 0 6px; }

/* ---------- faq ---------- */

.bl .faq { max-width: 860px; margin-top: 6px; }

.bl .faq-item { border-top: 3px solid var(--rule); }

.bl .faq-item summary {
  display: flex;
  align-items: baseline;
  gap: 16px;
  list-style: none;
  cursor: pointer;
  padding: 17px 10px 15px;
  margin-inline: -10px;
  transition: background-color 90ms ease, color 90ms ease;
}

.bl .faq-item summary::-webkit-details-marker { display: none; }
.bl .faq-item summary:hover { background: var(--ink); color: var(--bone); }
.bl .faq-item summary:hover .q-no { color: var(--accent); }

.bl .q-no { font-family: var(--black); font-size: 15px; color: var(--ink-3); }
.bl[dir="rtl"] .q-no { font-family: var(--cairo); font-weight: 900; }

.bl .q { font-family: var(--sans); font-weight: 700; font-size: clamp(17px, 1.3vw, 22px); letter-spacing: -0.01em; }
.bl[dir="rtl"] .q { font-family: var(--cairo); letter-spacing: 0; }

.bl .q-mark { margin-inline-start: auto; font-family: var(--black); font-size: 18px; color: var(--accent); }
.bl .q-mark::before { content: '+'; }
.bl .faq-item[open] .q-mark::before { content: '–'; }

.bl .faq-item .a {
  font-size: 16px;
  line-height: 1.65;
  color: var(--ink-2);
  max-width: 64ch;
  margin: 0;
  padding: 2px 0 22px;
}

.bl[dir="rtl"] .faq-item .a { line-height: 1.95; }

/* ---------- email body — the Najdi brand (email-safe hexes) ---------- */

.bl-email {
  background: #ece4d0;
  color: #211d14;
  font-family: Arial, Helvetica, sans-serif;
  padding: 34px 36px 30px;
}

.bl-email[dir="rtl"] { font-family: Tahoma, Arial, sans-serif; }

html[data-theme="dark"] .bl-email { background: #0c120e; color: #e7e4d6; }

.bl-email .em-wordmark { text-align: center; font-size: 26px; font-weight: bold; padding-bottom: 10px; }

.bl-email .em-rule { border-top: 4px solid #211d14; margin: 0 0 16px; }
html[data-theme="dark"] .bl-email .em-rule { border-color: #e7e4d6; }

.bl-email .em-headline { font-size: 26px; font-weight: bold; text-transform: uppercase; line-height: 1.1; padding-bottom: 8px; }
.bl-email[dir="rtl"] .em-headline { text-transform: none; line-height: 1.45; }

.bl-email .em-dateline { font-size: 11.5px; letter-spacing: 2px; text-transform: uppercase; color: #877f6a; padding-bottom: 2px; }
.bl-email[dir="rtl"] .em-dateline { letter-spacing: 0; }
.bl-email .em-metrics { font-size: 11px; color: #877f6a; padding-bottom: 14px; }

.bl-email .em-standing { font-size: 15.5px; line-height: 1.6; color: #57503f; padding-bottom: 8px; }
.bl-email[dir="rtl"] .em-standing { line-height: 1.95; }
html[data-theme="dark"] .bl-email .em-standing { color: #b0ac9c; }

.bl-email .em-group-head { font-size: 13px; font-weight: bold; text-transform: uppercase; letter-spacing: 1px; padding: 18px 0 4px; border-bottom: 3px solid #211d14; }
.bl-email[dir="rtl"] .em-group-head { letter-spacing: 0; text-transform: none; }
html[data-theme="dark"] .bl-email .em-group-head { border-color: #e7e4d6; }

.bl-email .em-item { padding: 12px 0 10px; border-bottom: 1px solid #cfc6ab; }
html[data-theme="dark"] .bl-email .em-item { border-color: #21291f; }

.bl-email .em-item .no { font-size: 12px; font-weight: bold; color: #877f6a; }
.bl-email .em-item .ttl { font-size: 16.5px; font-weight: bold; line-height: 1.35; padding: 2px 0; }
.bl-email[dir="rtl"] .em-item .ttl { line-height: 1.7; }
.bl-email .em-item .ttl a { color: inherit; text-decoration: none; }
.bl-email .em-item .notation { font-size: 12px; color: #877f6a; padding-bottom: 4px; }

.bl-email .em-stamp { display: inline-block; font-size: 10px; font-weight: bold; letter-spacing: 1px; text-transform: uppercase; padding: 3px 8px; }
.bl-email[dir="rtl"] .em-stamp { letter-spacing: 0; }
.bl-email .em-stamp.now { background: #211d14; color: #ece4d0; }
html[data-theme="dark"] .bl-email .em-stamp.now { background: #e7e4d6; color: #0c120e; }
.bl-email .em-stamp.def { background: #0e6b3d; color: #ffffff; }
html[data-theme="dark"] .bl-email .em-stamp.def { background: #2e9e63; color: #06160d; }
.bl-email .em-stamp.none { border: 2px solid #877f6a; color: #877f6a; }
.bl-email .em-rel { font-size: 10.5px; letter-spacing: 1px; text-transform: uppercase; color: #877f6a; margin-inline-start: 8px; }
.bl-email[dir="rtl"] .em-rel { letter-spacing: 0; }

.bl-email .em-links { font-size: 12px; padding-top: 6px; }
.bl-email .em-links a { color: #0e6b3d; text-decoration: underline; }
html[data-theme="dark"] .bl-email .em-links a { color: #7cc8a0; }

.bl-email .em-footer { font-size: 11.5px; color: #877f6a; padding: 22px 0 4px; }
.bl-email .em-footer a { color: inherit; text-decoration: underline; }
.bl-email .em-footer .signoff { font-size: 12px; padding-top: 10px; }

/* ---------- responsive ---------- */

@media (max-width: 1100px) {
  .bl .item { grid-template-columns: 52px minmax(0, 1fr); }
  .bl .item .iside { grid-column: 2; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 8px 16px; padding-top: 10px; }
  .bl .counters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bl .counter:nth-child(2) { border-inline-end: none; }
  .bl .counter:nth-child(-n+2) { border-bottom: 3px solid var(--rule); }
}

@media (max-width: 940px) {
  .bl .s01-grid { grid-template-columns: minmax(0, 1fr); }
  .bl .phone-wrap { order: 2; }
  /* the demo stacks; the arrow points down the flow */
  .bl .demo-grid { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .bl .demo-arrow { transform: rotate(90deg); }
  .bl[dir="rtl"] .demo-arrow { transform: rotate(-90deg); }
}

@media (max-width: 720px) {
  .bl .home, .bl .shell { padding-inline: 18px; }
  .bl .site-nav { padding: 10px 18px; gap: 8px 16px; }
  .bl .nav-links { order: 3; flex-basis: 100%; margin-inline-start: 0; gap: 2px 18px; }
  .bl .hero { padding-top: 34px; }
  .bl .m-block { min-width: 96px; padding: 10px 12px 8px; }
  .bl .item .no { font-size: 17px; }
  .bl .s01 { padding-inline: 18px; }
  .bl .sub-form { flex-direction: column; border: none; gap: 12px; }
  .bl .sub-form input { border: 3px solid var(--ticker-fg); }
  .bl .feat-row { flex-wrap: wrap; gap: 4px 14px; }
  .bl .f-name { flex-basis: 100%; order: 2; }
  .bl .f-acro { order: 1; min-width: 0; }
  .bl .f-count { order: 1; margin-inline-start: auto; }
  .bl .f-leader { display: none; }
  .bl .wall { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
  /* the wire scales down with the page; the seams must stay under
     the (smaller) lens frame strokes. Round 7: 132px lens (0.733×
     the 180 desktop glass) → frame half-widths 43.6 / 56.1; 50px
     rides the stroke centerline. */
  .bl .wire { --lenshalf: 50px; padding: 58px 0 32px; }
  .bl .wire-rot { height: 104px; }
  .bl .wlens { width: 132px; height: 132px; margin: -66px 0 0 -66px; }
  .bl .wlayer.ghost { height: 98px; }
  .bl .wlayer.lenslit { height: 78px; }
  .bl .wire--logos { --tapeh: 44px; }
  .bl .wk-logo img { width: 36px; height: 36px; padding: 4px; }
  .bl .wchips { bottom: calc(50% + 76px); }
  .bl .wchip { font-size: 10px; padding: 6px 10px; }
  .bl .hero-cta { padding: 15px 36px; }
  .bl .phone { width: 258px; }
  .bl .ph-screen { height: 500px; }
  .bl .ph-scale { transform: scale(0.4); }
  /* ⑩ Task B — scale the whole frame+curve uniformly (not just the tiles) so
     the S keeps its proportions on narrow viewports and more of it shows. */
  .bl .rivpath { --riv-scale: .6; }
  .bl .peek-fix { width: 96px; inset-inline-end: -10px; top: auto; bottom: 14%; }
  .bl .cost { grid-template-columns: 1fr; }
  .bl .cost-col + .cost-col { border-inline-start: none; border-top: 3px solid var(--rule); }
  .bl .bm-link { margin-inline-start: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .bl * { animation: none !important; transition: none !important; }
  .bl .reveal { opacity: 1 !important; transform: none !important; }
  /* static wire (the lens highlight freezes on whatever acronym
     sits in the window); the river tiles fall back to their inline
     static offset-distance, spread along the curve; static Gmail.
     Round 7: one static pipeline chip (no cycling — the timers are
     all gated off `reduced`), peeker risen with pupils centered,
     demo at its final state in the page language, no nudge. */
  .bl .wtrack, .bl .rtile { animation: none !important; }
}