/* sm-page.css: the sm-proof.html page composition (SM-PAGE fix 6, round 2). Loads after sm-hud.css.
   Mock A is the first screen: wordmark lockup, the display headline, the sub and one primary CTA in the open zenith sky, and
   three instrument captions leader-lined to the globes. About, Pillars, How and the footer follow on one dark ground, with the
   lower rows of the same plate behind the About column. Art-locked blocks stay physical (drawn scenes never mirror);
   text columns are anchored to ONE edge per language: left gutter in EN, right gutter in AR. */

.sm { --mk-vh: max(852px, min(calc(100vh - 48px), 897px)); /* design height 1512 x 945 (897) and 1440 x 900 (852); a shorter window keeps the 852 stage and shows less of the sea, so the towers never rise into the copy; taller windows get dark ground */ }

/* ── ghost header CTA: the body CTA is the one primary per screen ─────────────── */
.sm .sm-nav .sm-nav-cta { background: var(--hud-n0); color: var(--hud-l3); }

/* primary CTA ring: a 2 px #29b1da ring on a wrapper (the contrast tool and the eye read the same boundary).
   In forced-colors mode the ring becomes a real border on the button, so the boundary survives. */
.sm .hud-ring { display: inline-flex; box-sizing: border-box; padding: 2px; background: var(--hud-ifc); }
.sm .hud-ring > .hud-cta { border: 0; }
@media (forced-colors: active) { .sm .hud-ring { padding: 0; } .sm .hud-ring > .hud-cta { border: 2px solid ButtonText; } }

/* ── marks: the same cyan square before every pillar and step name ──────────────── */
.sm .pf-name::before, .sm .hw-name::before { content: ''; display: inline-block; inline-size: 8px; block-size: 8px; margin-inline-end: 10px; background: var(--hud-hl); vertical-align: middle; position: relative; inset-block-start: -2px; }
.sm .pf-ro { display: none; }
.sm .mk-world { display: none; }

/* ── footer follow link ──────────────────────────────────────────────────────── */
.sm .sm-footer-follow { margin: 0; color: var(--hud-l3); text-decoration: underline; text-decoration-color: var(--hud-ifc); text-decoration-thickness: 2px; text-underline-offset: 5px; }

/* ── desktop and tablet ──────────────────────────────────────────────────────── */
@media (min-width: 768px) {
  .sm .pf-stage {
    --pl: max(calc(min(var(--gutter), 72px) - var(--ox)), 72px);   /* left inset, section coordinates, minus the stage offset */
    --pr: max(calc(min(var(--gutter), 72px) - var(--oxr)), 72px);  /* right inset */
    padding-block-start: var(--mk-vh);
    background: var(--hud-n1); /* the lower rows of the plate are flat N1: the ground continues them with no seam */
  }
  .sm .pf-stage .pf-scene-box { position: absolute; inset-block-start: 0; inset-inline: 0; inline-size: 100%; block-size: calc(var(--mk-vh) + 240px); z-index: 0; }
  .sm .pf-stage .pf-scene { inset-block-start: calc(var(--mk-vh) - 760px); inline-size: 100%; }

  .sm .mk-world { display: block; position: absolute; inset-block-start: calc(var(--mk-vh) - 760px); left: var(--ox); inline-size: 1440px; block-size: 760px; z-index: 2; pointer-events: none; }
  .sm .mk-leaders { position: absolute; inset: 0; overflow: visible; }
  .sm .mk-lead polyline { fill: none; stroke: var(--hud-c1); stroke-width: 2; }
  .sm .mk-lead .mk-tick { fill: var(--hud-c3); }

  /* one caption treatment: no frame; the leader (with its start tick) anchors each caption. Only the instrument varies. */
  .sm .mk-cap { position: absolute; left: var(--x); top: var(--y); inline-size: 180px; block-size: 48px; box-sizing: border-box; display: flex; flex-direction: column; justify-content: center; gap: 6px; padding: 0; }
  .sm .mk-cap .mk-cap-name { margin: 0; }
  .sm .mk-bar, .sm .mk-bar i { display: block; block-size: 6px; }
  .sm .mk-bar { inline-size: 100%; background: repeating-linear-gradient(90deg, var(--hud-n3) 0 6px, transparent 6px 8px); }
  .sm .mk-bar i { inline-size: calc(var(--v) * 100%); background: repeating-linear-gradient(90deg, var(--hud-c2) 0 6px, transparent 6px 8px); }
  .sm .mk-bin { margin: 0; color: var(--hud-l0); letter-spacing: 2px; line-height: 25px; }
  .sm .mk-cap--sig { flex-direction: row; align-items: center; justify-content: space-between; gap: 10px; }
  .sm .mk-sig { flex: none; fill: var(--hud-c2); }
  .sm .mk-sig .off { fill: var(--hud-n3); }

  /* the copy block: open zenith sky, one anchored column */
  .sm .mk-copy {
    position: absolute; z-index: 2; inset-block-start: 36px; left: calc(var(--ox) + var(--pl));
    display: flex; flex-direction: column; align-items: flex-start; gap: 18px;
    max-inline-size: min(760px, calc(100% - var(--ox) - var(--pl) - var(--gutter)));
  }
  [dir="rtl"] .sm .mk-copy { left: auto; right: calc(var(--oxr) + var(--pr)); inset-block-start: 24px; gap: 10px; }
  .sm .mk-wordmark { margin: 0; line-height: 0; inline-size: 328px; max-inline-size: 100%; }
  .sm .mk-wordmark img { display: block; inline-size: 100%; block-size: auto; image-rendering: pixelated; }
  .sm .mk-display { margin: 0; font-size: 62.5px; line-height: 76px; letter-spacing: 6px; text-wrap: balance; }
  .sm .mk-sub { margin: 0; max-inline-size: 40ch; }

  /* About + Pillars: ONE two-column screen on the same ground. Copy on the start side, the three objects on the end side.
     In AR the grid runs right to left (copy right, objects left); the objects are placed, never mirrored. */
  .sm .pf-split {
    position: relative; z-index: 2; display: grid; grid-template-columns: minmax(0, 480px) minmax(0, 1fr); column-gap: 36px; align-items: center;
    padding-block: 40px 96px;
    margin-left: calc(var(--ox) + var(--pl)); margin-right: calc(var(--oxr) + var(--pr));
  }
  .sm .pf-about { position: static; display: flex; flex-direction: column; align-items: flex-start; gap: 18px; padding: 0; margin: 0; inline-size: auto; }
  .sm .pf-about p, .sm .pf-about h2 { margin: 0; }
  .sm .pf-title { font-size: 37.5px; line-height: 44px; letter-spacing: 2px; text-wrap: balance; }
  .sm .pf-readout { inline-size: 100%; }
  .sm .pf-body-col { margin: 8px 0 0; padding: 0; }
  .sm .pf-ends { display: flex; justify-content: flex-end; }
  .sm .pf-ends .pf-pillars { position: static; margin: 0; display: grid; grid-template-columns: repeat(3, 260px); gap: 0; justify-content: end; align-items: stretch; direction: ltr; flex-wrap: nowrap; max-inline-size: none; }
  [dir="rtl"] .sm .pf-ends .pf-pillars { direction: rtl; flex-direction: row; justify-content: start; }
  .sm .pf-ends .pf-pillar { inline-size: 260px; flex: none; }
  .sm .pf-ends .pf-canvas { margin-inline: -20px; }
  .sm .pf-ends .pf-card { margin: 12px 10px 0; }

  /* How title: top of the plate, on the language's own edge (never mirrored art, anchored text) */
  [dir="rtl"] .sm .hw-plate[data-scene="physical"] { left: auto; right: calc(var(--oxr) + max(calc(min(var(--gutter), 72px) - var(--oxr)), 72px)); }
}

/* narrower than the authored two-column screen: copy first, the objects below */
@media (min-width: 768px) and (max-width: 1339px) {
  .sm .pf-split { display: block; padding-block: 24px 72px; }
  .sm .pf-about { max-inline-size: 760px; margin-block-end: 56px; }
  .sm .pf-ends { justify-content: center; }
  .sm .pf-ends .pf-pillars { grid-template-columns: repeat(auto-fit, 260px); justify-content: center; gap: 32px 20px; max-inline-size: 840px; }
  [dir="rtl"] .sm .pf-ends .pf-pillars { justify-content: center; }
}

/* cards: one note system for pillars and steps (a dim rule on top, the cyan mark, no box) */
.sm .hud-note { border-block-start: 2px solid var(--hud-frame); padding: 12px 0 0; background: transparent; }
.sm .pf-card.hud-note, .sm .hw-card.hud-note { padding: 12px 0 0; }

/* hero row: CTA with the status readout beside it */
.sm .mk-row { display: flex; align-items: center; flex-wrap: wrap; gap: 14px 22px; }
.sm .mk-meta { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; color: var(--hud-l2); text-transform: uppercase; letter-spacing: 2px; }
.sm .mk-meta li { display: flex; align-items: center; gap: 10px; line-height: 28px; }
.sm .mk-meta .hud-mark { margin: 0; background: var(--hud-c1); }

/* ── phone: one column on one ground; the hero text ends above the towers ─────── */
@media (max-width: 767px) {
  .sm .pf-stage { padding-block-start: 0; }
  .sm .mk-copy { position: static; display: flex; flex-direction: column; align-items: flex-start; gap: 14px; padding: 28px 22px 0; }
  .sm .mk-wordmark { margin: 0; line-height: 0; inline-size: 100%; max-inline-size: 100%; }
  .sm .mk-wordmark img { display: block; inline-size: 100%; max-inline-size: 100%; block-size: auto; image-rendering: pixelated; }
  .sm .mk-display { margin: 0; font-size: 37.5px; line-height: 44px; letter-spacing: 0; text-wrap: balance; }
  .sm .mk-sub { margin: 0; }
  .sm .sm-nav .sm-nav-cta-ring { display: none; }
  .sm .mk-meta li { font-size: 18px; line-height: 22px; letter-spacing: 1px; white-space: nowrap; }
  .sm .pf-ro { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 0; padding: 22px 22px 0; list-style: none; }
  .sm .pf-ro li { margin: 0; display: flex; flex-direction: column; gap: 8px; min-inline-size: 0; }
  .sm .pf-ro .hud-label { font-size: 18px; line-height: 20px; letter-spacing: 1px; white-space: nowrap; }
  .sm .ro-bar, .sm .ro-bar i { display: block; block-size: 5px; }
  .sm .ro-bar { inline-size: 100%; background: repeating-linear-gradient(90deg, var(--hud-n3) 0 5px, transparent 5px 7px); }
  .sm .ro-bar i { inline-size: 74%; background: repeating-linear-gradient(90deg, var(--hud-c2) 0 5px, transparent 5px 7px); }
  .sm .ro-bin { margin: 0; font-size: 18px; line-height: 18px; letter-spacing: 1px; color: var(--hud-l0); }
  .sm .ro-sig { fill: var(--hud-c2); } .sm .ro-sig .off { fill: var(--hud-n3); }
  .sm .pf-stage .pf-scene-box { position: relative; block-size: 600px; margin-block-start: calc(28px + var(--snap, 0px)); inset: auto; }
  .sm .pf-split { display: block; padding: 0; }
  .sm .pf-about { padding: 36px 22px 24px; display: flex; flex-direction: column; gap: 16px; }
  .sm .pf-title { font-size: 37.5px; line-height: 44px; letter-spacing: 0; }
  /* equal gutters: 22 px on both edges in both languages; blocks sit on the language's own edge */
  .sm .pf-ends { padding: 24px 22px 40px; }
  .sm .pf-ends .pf-card { margin: 12px 0 0; }
  .sm .hw-paper { padding: 28px 22px 0; }
  .sm .hw-plate[data-scene="physical"] { margin-inline-start: 0; }
  .sm .hw-stations { padding: 16px 22px 24px; }
}

/* About readout: three rows in the start column (one line each, a divider between rows) */
.sm .pf-readout { display: flex; flex-direction: column; grid-template-columns: none; inline-size: 100%; margin: 4px 0 0; border-block-start: 2px solid var(--hud-frame); }
.sm .pf-cell, .sm .pf-cell + .pf-cell { display: flex; align-items: flex-start; gap: 10px; padding: 10px 0; border-inline-start: 0; border-block-end: 0; }
.sm .pf-cell + .pf-cell { border-block-start: 2px solid var(--hud-frame); }
.sm .pf-cell .hud-label { letter-spacing: 2px; }
.sm .mk-sub { max-inline-size: 56ch; }
@media (min-width: 768px) {
  [dir="rtl"] .sm .mk-meta { gap: 0; }
}

/* optical start edge: the headline stem is the column edge; the wordmark art, the subtitle and the CTA are nudged onto it (EN 113 px at 1512, AR mirrored by the right edge) */
@media (min-width: 768px) {
  .sm .mk-wordmark { margin-inline-start: -2px; }
  .sm .mk-sub { margin-inline-start: 4px; }
  .sm .mk-row { margin-inline-start: 5px; }
  [dir="rtl"] .sm .mk-wordmark { margin-inline: 0 -8px; }
  [dir="rtl"] .sm .mk-sub, [dir="rtl"] .sm .mk-row { margin-inline-start: 0; }
}
/* AR reading order of the objects (innovate rightmost); the markup carries an inline direction:ltr for the drawn scene, so this must win */
[dir="rtl"] .sm .pf-ends .pf-pillars { direction: rtl !important; }

/* ── fix 8 ─────────────────────────────────────────────────────────────────────────── */
/* the lockup, cut in two: CYBERTHON, and 2026 aligned to the wordmark's end edge (EN right end; AR left end, the inline-end of the composition).
   art/sm-hero wordmark-desk.png is 219 x 49 art px: rows 0 to 32 the wordmark, rows 33 to 48 the year (art x 89 to 128). */
.sm .mk-wordmark { --w: 328px; --k: calc(var(--w) / 219); display: block; inline-size: var(--w); max-inline-size: none; line-height: 0; }
.sm .mk-wordmark span { display: block; inline-size: 100%; background: url('../../art/sm-hero/out/wordmark-desk.png') no-repeat; background-size: var(--w) auto; image-rendering: pixelated; }
.sm .mk-wordmark .wm-a { block-size: calc(var(--k) * 33); background-position: 0 0; }
.sm .mk-wordmark .wm-b { block-size: calc(var(--k) * 16); background-position: calc(var(--k) * 89) calc(var(--k) * -33); }
[dir="rtl"] .sm .mk-wordmark .wm-b { background-position: calc(var(--k) * -85) calc(var(--k) * -33); }

/* TBA is plain text (no faux link) */
.sm .tba-inline { color: inherit; background: none; padding: 0; text-decoration: none; }

/* AR title: the cyan iḍāfa may wrap between its two words (both stay cyan) so balance can even out the three lines */
[dir="rtl"] .sm .pf-title { text-wrap: balance; }
[dir="rtl"] .sm .pf-title .hud-hl { white-space: normal; }

@media (min-width: 768px) {
  /* captions: one rhythm, the instrument below the word in all three */
  .sm .mk-cap--gauge { block-size: 37px; }
  .sm .mk-cap--bin { block-size: 56px; }
  .sm .mk-cap--sig { block-size: 55px; flex-direction: column; align-items: flex-start; justify-content: center; gap: 6px; }
  /* the headline block rides the art: line 1 above the sky seam, line 2 below it, 12 px or more each side at the design height */
  .sm .mk-copy { inset-block-start: max(24px, calc(var(--mk-vh) - 873px)); gap: 12px; } /* 873 = 846 + 27: the patronage line (24 px + the 12 px gap, less the 9 px the floor cannot give) takes the room, the headline keeps its place against the sky seam */
  .sm .mk-display { line-height: 80px; }
  [dir="rtl"] .sm .mk-copy { inset-block-start: 24px; }
  /* the shelf lands on the content margin, not 20 px past it; copy column 464 */
  .sm .pf-split { grid-template-columns: minmax(0, 464px) minmax(0, 1fr); column-gap: 40px; padding-block: 40px 56px; }
  .sm .pf-ends .pf-pillars, [dir="rtl"] .sm .pf-ends .pf-pillars { justify-content: end; margin-inline-end: 20px; }
}
@media (min-width: 768px) and (max-width: 1339px) {
  .sm .pf-ends .pf-pillars, [dir="rtl"] .sm .pf-ends .pf-pillars { margin-inline-end: 0; justify-content: center; }
}

/* ── phone first screen: the globes lead ─────────────────────────────────────────────── */
@media (max-width: 767px) {
  .sm .mk-wordmark { --w: calc(100vw - 44px); }
  .sm .mk-copy { padding: 20px 22px 0; gap: 10px; }
  .sm .mk-meta { display: none; }
  .sm .mk-row { margin: 4px 0 0; }
  .sm .pf-ro { position: relative; z-index: 2; box-sizing: border-box; block-size: 62px; margin-block-end: -62px; padding: 14px 22px 0; }
  .sm .pf-ro li { display: grid; justify-items: start; align-content: start; gap: 8px; }
  .sm .pf-stage .pf-scene-box { block-size: 580px; margin-block-start: calc(16px + var(--snap, 0px)); }
  .sm .pf-stage .pf-scene { inset-block-start: -200px; }
}

/* ── fix 9 ─────────────────────────────────────────────────────────────────────────── */
/* the lockup's year sits under THON, on the Latin wordmark's right end in both languages */
[dir="rtl"] .sm .mk-wordmark .wm-b { background-position: calc(var(--k) * 89) calc(var(--k) * -33); }

/* hero status: ONE quiet pixel-caps line under the CTA, separated by a middle dot, no bullets */
@media (min-width: 768px) {
  .sm .mk-row { flex-direction: column; align-items: flex-start; gap: 14px; }
  .sm .mk-meta { display: block; margin: 0; padding: 0; font-size: 12.5px; line-height: 20px; letter-spacing: 1px; color: var(--hud-l2); white-space: nowrap; text-transform: uppercase; }
  .sm .mk-meta .mk-sep { margin-inline: 10px; color: var(--hud-c1); }
}

/* phone: the caption row sits in the sky band, clear of the seam (labels start 14 px below the scene top edge);
   the three instruments share one 64 x 22 box so the columns carry the same weight */
@media (max-width: 767px) {
  .sm .pf-ro { block-size: 78px; margin-block-end: -78px; padding: 30px 22px 0; }
  .sm .ro-bar, .sm .ro-bin, .sm .ro-sig { display: block; inline-size: 64px; block-size: 22px; box-sizing: border-box; }
  .sm .ro-bar { background: none; position: relative; }
  .sm .ro-bar::before { content: ''; position: absolute; inset: 6px 0 6px; background: repeating-linear-gradient(90deg, var(--hud-n3) 0 5px, transparent 5px 7px); }
  .sm .ro-bar i { position: absolute; inset-block: 6px; inset-inline-start: 0; inline-size: 74%; block-size: auto; background: repeating-linear-gradient(90deg, var(--hud-c2) 0 5px, transparent 5px 7px); }
  .sm .ro-bin { font-size: 18px; line-height: 22px; letter-spacing: 7px; white-space: nowrap; overflow: hidden; }
  .sm .pf-stage .pf-scene-box { margin-block-start: calc(16px + var(--snap, 0px)); }
}
@media (min-width: 768px) { [dir="rtl"] .sm .mk-copy { inset-block-start: 10px; } } /* lifts the AR status line off the cloud sprite edge */

/* ── fix 10 ────────────────────────────────────────────────────────────────────────── */
/* phone binary: the desktop's two groups at natural tracking, on its word's start edge (the digits are an isolated LTR run in a block that follows the page direction) */
@media (max-width: 767px) {
  .sm .ro-bin { display: block; inline-size: max-content; min-inline-size: 0; max-inline-size: 100%; overflow: visible; font-size: 18px; line-height: 22px; letter-spacing: 1px; text-align: start; white-space: nowrap; }
}
/* the signal's lit bars sit on the word's start edge in AR too (a glyph in an instrument, not a drawn scene) */
@media (max-width: 767px) { [dir="rtl"] .sm .ro-sig { transform: scaleX(-1); } }
@media (max-width: 767px) { .sm .ro-bin { color: var(--hud-l2); } }

/* ── fix 14: no sideways scroll below 344 px. The 300 px station (and its 300 px canvas) never exceeds the column; the object's
   transparent margin takes the difference. From 344 px up this changes nothing. ── */
@media (max-width: 767px) {
  .sm .hw-station { inline-size: min(300px, 100%); max-inline-size: 100%; }
  .sm .hw-canvas { margin-inline: min(0px, calc((100% - 300px) / 2)); }
}

/* ── SHELL 15b: the Arabic hero keeps clear of its own leader captions ───────────────────────────────────────────────
   768 to 1439: the captions (and their leaders) give way to the phone's three-column readout under the CTA, right-aligned (the status line
   would otherwise run into INNOVATE). 1440 and up: the status line stacks into a 280 px column and the captions mirror like the phone's. */
@media (min-width: 768px) and (max-width: 1439px) {
  [dir="rtl"] .sm .mk-world { display: none; }
  [dir="rtl"] .sm .mk-copy > .pf-ro {
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; inline-size: 340px; max-inline-size: 100%; margin: 6px 0 0; padding: 0; list-style: none; position: relative;
  }
  [dir="rtl"] .sm .pf-ro li { margin: 0; display: grid; justify-items: start; align-content: start; gap: 8px; min-inline-size: 0; }
  [dir="rtl"] .sm .pf-ro .hud-label { white-space: nowrap; }
  [dir="rtl"] .sm .ro-bar, [dir="rtl"] .sm .ro-bin, [dir="rtl"] .sm .ro-sig { display: block; inline-size: 64px; block-size: 22px; box-sizing: border-box; }
  [dir="rtl"] .sm .ro-bar { position: relative; background: none; }
  [dir="rtl"] .sm .ro-bar::before { content: ''; position: absolute; inset: 6px 0 6px; background: repeating-linear-gradient(90deg, var(--hud-n3) 0 5px, transparent 5px 7px); }
  [dir="rtl"] .sm .ro-bar i { position: absolute; inset-block: 6px; inset-inline-start: 0; inline-size: 74%; block-size: auto; background: repeating-linear-gradient(90deg, var(--hud-c2) 0 5px, transparent 5px 7px); }
  [dir="rtl"] .sm .ro-bin { margin: 0; line-height: 22px; letter-spacing: 1px; white-space: nowrap; color: var(--hud-l2); inline-size: max-content; }
  [dir="rtl"] .sm .ro-sig { fill: var(--hud-c2); transform: scaleX(-1); }
  [dir="rtl"] .sm .ro-sig .off { fill: var(--hud-n3); }
  [dir="rtl"] .sm .ro-bar, [dir="rtl"] .sm .ro-sig { margin-inline-start: 2px; inline-size: 62px; }
}
@media (min-width: 1440px) {
  [dir="rtl"] .sm .mk-meta { max-inline-size: 280px; white-space: normal; }
  [dir="rtl"] .sm .mk-meta > span:not(.mk-sep) { display: block; }
  [dir="rtl"] .sm .mk-meta .mk-sep { display: none; }
  [dir="rtl"] .sm .mk-cap { align-items: flex-end; padding-right: 12px; text-align: right; }
  [dir="rtl"] .sm .mk-cap .mk-cap-name { text-align: right; }
  [dir="rtl"] .sm .mk-bar, [dir="rtl"] .sm .mk-sig { transform: scaleX(-1); }
  [dir="rtl"] .sm .mk-cap--sig { align-items: flex-end; }
}
/* phone: the readout now lives inside .mk-copy; it keeps its old place (the copy column already pads the gutters, and the flex gap is taken back) */
@media (max-width: 767px) { .sm .mk-copy > .pf-ro { padding-inline: 0; margin-block-start: -10px; align-self: stretch; inline-size: auto; } }

/* ── SHELL 16: the Arabic status rows stay clear of the right tower's spire at 1280 to 1511 ───────────────────────────────────────────────
   The spire stands at art x 1245 (plus the stage offset) and runs down from y vh - 477. Status text must not sit on it, so the status block moves
   into the CTA's row, on the CTA's inline-end, with its own inline-end 37 px past the button: 90 px left of the spire.
   1280 to 1439: the three-column readout goes beside the CTA (the single status line stays under it).
   1440 and up (1512 included: its spire tip touched the third row), windows 900 px tall or more: the stacked status rows go beside the CTA (above the captions and above the spire tip).
   Shorter windows keep the stack under the CTA, which is what clears the captions. Nothing else in the hero moves. */
@media (min-width: 768px) and (max-width: 1439px) {
  [dir="rtl"] .sm .mk-copy { display: grid; grid-template-columns: auto auto; justify-content: start; align-items: center; column-gap: 37px; row-gap: 12px; }
  [dir="rtl"] .sm .mk-copy > :not(.mk-row):not(.pf-ro) { grid-column: 1 / -1; }
  [dir="rtl"] .sm .mk-copy > .mk-row { display: contents; }
  [dir="rtl"] .sm .mk-copy > .mk-row > .px-outer { grid-column: 1; grid-row: 4; justify-self: start; }
  [dir="rtl"] .sm .mk-copy > .pf-ro { grid-column: 2; grid-row: 4; margin: 0; align-self: center; }
  [dir="rtl"] .sm .mk-copy > .mk-row > .mk-meta { grid-column: 1 / -1; grid-row: 5; }
}
@media (min-width: 1440px) {
  [dir="rtl"] .sm .mk-copy { display: grid; grid-template-columns: auto auto; justify-content: start; align-items: center; column-gap: 37px; row-gap: 12px; }
  [dir="rtl"] .sm .mk-copy > :not(.mk-row) { grid-column: 1 / -1; }
  [dir="rtl"] .sm .mk-copy > .mk-row { display: contents; }
  [dir="rtl"] .sm .mk-copy > .mk-row > .px-outer { grid-column: 1; grid-row: 4; justify-self: start; }
  [dir="rtl"] .sm .mk-copy > .mk-row > .mk-meta { grid-column: 2; grid-row: 4; }
}

/* ── SHELL 18: the English hero on tablet widths (768 to 1279) ──────────────────────────────────────────────────────────────────
   The towers stay in frame below 1440, so they stand under the leader captions and the status line. As in Arabic, the captions give way to the three-column
   readout, which sits in the button's row, to the button's inline-end, with the status line under them. */
@media (min-width: 768px) and (max-width: 1279px) {
  html:not([dir="rtl"]) .sm .mk-world { display: none; }
  html:not([dir="rtl"]) .sm .mk-copy { display: grid; grid-template-columns: auto auto; justify-content: start; align-items: center; column-gap: 37px; row-gap: 12px; }
  html:not([dir="rtl"]) .sm .mk-copy > :not(.mk-row):not(.pf-ro) { grid-column: 1 / -1; }
  html:not([dir="rtl"]) .sm .mk-copy > .mk-row { display: contents; }
  html:not([dir="rtl"]) .sm .mk-copy > .mk-row > .px-outer { grid-column: 1; grid-row: 5; justify-self: start; }
  html:not([dir="rtl"]) .sm .mk-copy > .pf-ro { grid-column: 2; grid-row: 5; align-self: center; }
  html:not([dir="rtl"]) .sm .mk-copy > .mk-row > .mk-meta { grid-column: 1 / -1; grid-row: 6; }
  html:not([dir="rtl"]) .sm .mk-copy > .pf-ro {
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; inline-size: 340px; max-inline-size: 100%; margin: 0; padding: 0; list-style: none; position: relative;
  }
  html:not([dir="rtl"]) .sm .pf-ro li { margin: 0; display: grid; justify-items: start; align-content: start; gap: 8px; min-inline-size: 0; }
  html:not([dir="rtl"]) .sm .pf-ro .hud-label { font-size: 18px; line-height: 20px; letter-spacing: 1px; white-space: nowrap; }
  html:not([dir="rtl"]) .sm .ro-bar, html:not([dir="rtl"]) .sm .ro-bin, html:not([dir="rtl"]) .sm .ro-sig { display: block; inline-size: 64px; block-size: 22px; box-sizing: border-box; }
  html:not([dir="rtl"]) .sm .ro-bar { position: relative; background: none; }
  html:not([dir="rtl"]) .sm .ro-bar::before { content: ''; position: absolute; inset: 6px 0 6px; background: repeating-linear-gradient(90deg, var(--hud-n3) 0 5px, transparent 5px 7px); }
  html:not([dir="rtl"]) .sm .ro-bar i { position: absolute; inset-block: 6px; inset-inline-start: 0; inline-size: 74%; block-size: auto; background: repeating-linear-gradient(90deg, var(--hud-c2) 0 5px, transparent 5px 7px); }
  html:not([dir="rtl"]) .sm .ro-bin { margin: 0; font-size: 18px; line-height: 22px; letter-spacing: 1px; white-space: nowrap; color: var(--hud-l2); inline-size: max-content; }
  html:not([dir="rtl"]) .sm .ro-sig { fill: var(--hud-c2); }
  html:not([dir="rtl"]) .sm .ro-sig .off { fill: var(--hud-n3); }
}
/* 768 to 899, English: the readout would sit on the towers (they stand under the middle of the copy column at that width), so it is dropped; the Pillars row follows in the next screen */
@media (min-width: 768px) and (max-width: 899px) { html:not([dir="rtl"]) .sm .mk-copy > .pf-ro { display: none; } }

/* ── SHELL 19: Arabic air at 960 to 1439 ──────────────────────────────────────────────────────────────────────
   The single status line sits 10 px closer to the button, so its ink ends at least 20 px above the tallest spire tip. */
@media (min-width: 960px) and (max-width: 1439px) {
  [dir="rtl"] .sm .mk-copy > .mk-row > .mk-meta { margin-block-start: -10px; }
}

/* ── ROUND 4 (R4-SHELL) ────────────────────────────────────────────────────────────────────────────────────────────
   the patronage line (first row of the copy block), the longer sub, the phone's two chips, About's lede, the AR Final title */
.sm .mk-patron { margin: 0; display: flex; align-items: center; gap: 14px; color: var(--hud-prose); }
.sm .mk-patron .hud-label { color: var(--hud-prose); font-size: 18px; line-height: 24px; letter-spacing: 1px; }
[dir="rtl"] .sm .mk-patron .hud-label { font-size: 20px; line-height: 28px; letter-spacing: 0; }
.sm .mk-patron-logo { display: block; flex: none; block-size: 44px; inline-size: auto; image-rendering: auto; }
@media (min-width: 768px) {
  .sm .mk-patron-logo { block-size: 56px; }
  .sm .mk-patron { margin-inline-start: 4px; }
}
@media (max-width: 767px) {
  .sm .mk-meta { display: block; margin: 0; color: var(--hud-prose); text-transform: uppercase; font-size: 18px; line-height: 22px; letter-spacing: 1px; white-space: normal; }
  [dir="rtl"] .sm .mk-meta { font-size: 20px; line-height: 28px; letter-spacing: 0; }
  .sm .mk-row { flex-direction: column; align-items: flex-start; gap: 14px; }
}
.sm .pf-lede { max-inline-size: 60ch; }

/* Arabic, 768 and up: the patronage line sits beside the wordmark, on its inline-end side (out of the flow), so the copy block
   grows by one sub line only and the status rows stay above the towers and the captions. English keeps it above the wordmark. */
@media (min-width: 768px) {
  [dir="rtl"] .sm .mk-patron { position: absolute; inset-block-start: 0; inset-inline-start: 364px; block-size: 73px; inline-size: max-content; max-inline-size: min(420px, calc(100vw - 364px - 160px)); margin: 0; }
}

/* Arabic status, 768 to 1439: under the three-word readout (the CTA's neighbour), wrapped in the readout's own width, so its ink stays off the right tower's spire.
   1440 and up: the stacked rows sit at the top of the CTA's row, clear of the first caption. */
@media (min-width: 768px) and (max-width: 1439px) {
  [dir="rtl"] .sm .mk-copy > .mk-row > .mk-meta { grid-column: 2; grid-row: 5; justify-self: start; max-inline-size: 340px; white-space: normal; margin-block-start: 0; }
  [dir="rtl"] .sm .mk-meta > span:not(.mk-sep) { display: block; }
  [dir="rtl"] .sm .mk-meta .mk-sep { display: none; }
}
@media (min-width: 960px) and (max-width: 1439px) {
  [dir="rtl"] .sm .mk-copy > .mk-row > .mk-meta { margin-block-start: 0; }
}
@media (min-width: 1440px) {
  [dir="rtl"] .sm .mk-copy > .mk-row > .mk-meta { align-self: start; }
}
/* English 768 to 899: the sub's line ends left of the tallest spire (it stood on it at 600 px from the edge) */
@media (min-width: 768px) and (max-width: 899px) { html:not([dir="rtl"]) .sm .mk-sub { max-inline-size: 500px; } }
@media (max-width: 767px) { html:not([dir="rtl"]) .sm .mk-patron .hud-label { font-size: 12.5px; line-height: 18px; } }

/* the hero copy is first painted once its faces are in (build_page.mjs sets and clears the class; no JavaScript: never set) */
.fw-wait .sm .mk-copy, .fw-wait.sm .mk-copy, html.fw-wait .mk-copy { visibility: hidden; }