/* =====================================================================
   TRIOTY — "من الرسايل لمتجر حقيقي"
   A scroll-driven WebGL chapter piece. Arabic-first, RTL.
   Palette and type are the locked Trioty tokens; nothing invented.
   ===================================================================== */

:root {
  /* brand — locked */
  --navy:      #0E1628;
  --gold:      #FAB95B;
  --gold-deep: #E09500;
  --cream:     #FEFCF8;

  /* derived for dark surfaces (the whole piece sits on navy) */
  --ink-0:  rgba(254, 252, 248, 1);
  --ink-1:  rgba(254, 252, 248, 0.72);
  --ink-2:  rgba(254, 252, 248, 0.46);
  --ink-3:  rgba(254, 252, 248, 0.16);
  --hair:   rgba(254, 252, 248, 0.12);
  --navy-2: #0A1120;

  /* the ground the scrims and veil are mixed from */
  --ground: 10, 17, 32;
  --accent: var(--gold);

  --ar: 'Tajawal', system-ui, -apple-system, sans-serif;
  --la: 'Space Grotesk', system-ui, -apple-system, sans-serif;

  /* navy type on cream already has ~15:1 contrast, so its scrim can be
     lighter than the one light type needs on navy */
  --scrim-k: 1;

  --gutter: clamp(20px, 5vw, 72px);
  --measure: 34ch;
}

/* =====================================================================
   CREAM — the palette the live site actually uses. Same layout, inverted
   ground: cream paper, navy ink, gold demoted to accents only. Toggle
   with the button in the nav, ?theme=cream, or ?theme=dark.
   ===================================================================== */
[data-theme="cream"] {
  --ink-0: rgba(14, 22, 40, 1);
  --ink-1: rgba(38, 44, 58, 0.82);
  --ink-2: rgba(38, 44, 58, 0.56);
  --ink-3: rgba(14, 22, 40, 0.18);
  --hair:  rgba(14, 22, 40, 0.14);

  --ground: 254, 252, 248;
  --scrim-k: 0.76;
  /* #FAB95B is too light to be readable type on cream — the deep gold is
     the accessible form of the same accent */
  --accent: var(--gold-deep);
}

[data-theme="cream"] body,
[data-theme="cream"] #pre { background: var(--cream); }

/* the vignette becomes a soft warm edge rather than a black one */
[data-theme="cream"] #veil {
  background: radial-gradient(ellipse 122% 88% at 50% 45%,
    rgba(254, 252, 248, 0) 46%,
    rgba(226, 217, 200, 0.34) 80%,
    rgba(214, 203, 183, 0.55) 100%);
}
[data-theme="cream"] #grain { opacity: 0.022; mix-blend-mode: multiply; }

/* No backdrop blur on paper: blurring white cards under a translucent
   cream layer drags their shadows up into a visible gray band. */
[data-theme="cream"] .nav {
  background: linear-gradient(to bottom,
    rgba(254, 252, 248, 0.97) 0%,
    rgba(254, 252, 248, 0.92) 62%,
    rgba(254, 252, 248, 0) 100%);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

[data-theme="cream"] .kicker { color: var(--gold-deep); }
[data-theme="cream"] .kicker::before { background: var(--gold-deep); }
[data-theme="cream"] .fact b { color: var(--gold-deep); }
[data-theme="cream"] .steps em { color: var(--gold-deep); }
[data-theme="cream"] .rail a.on { color: var(--gold-deep); }
[data-theme="cream"] .rail a.on i { background: var(--gold-deep); }
[data-theme="cream"] .note b { color: var(--gold-deep); }

[data-theme="cream"] .btn-ghost { color: var(--navy); border-color: rgba(14, 22, 40, 0.24); }
[data-theme="cream"] .btn-ghost:hover { border-color: rgba(14, 22, 40, 0.5); }

[data-theme="cream"] .counter { -webkit-text-stroke-color: rgba(14, 22, 40, 0.13); }

[data-theme="cream"] .steps li { background: rgba(255, 255, 255, 0.82); }
[data-theme="cream"] .pays span { background: rgba(255, 255, 255, 0.86); }
[data-theme="cream"] .note {
  background: rgba(250, 185, 91, 0.14);
  border-color: rgba(224, 149, 0, 0.34);
}

[data-theme="cream"] .foot { background: #F1EADC; }
[data-theme="cream"] .foot a:hover { color: var(--gold-deep); }

/* A dark scrim works because it *deepens* — the scene recedes and light
   type lifts off it. A light scrim does the opposite: it brightens, and
   since the scene is also light everything merges into one bright mush.
   Navy type on cream already has ~15:1 contrast and needs far less help,
   so the cream scrim is roughly a third of the strength and clears fast. */
[data-theme="cream"] .sec::before {
  background: linear-gradient(to left,
    rgba(var(--ground), 0.72) 0%,
    rgba(var(--ground), 0.42) 24%,
    rgba(var(--ground), 0.10) 48%,
    rgba(var(--ground), 0) 64%);
}
[data-theme="cream"] .sec.flip::before {
  background: linear-gradient(to right,
    rgba(var(--ground), 0.72) 0%,
    rgba(var(--ground), 0.42) 24%,
    rgba(var(--ground), 0.10) 48%,
    rgba(var(--ground), 0) 64%);
}
[data-theme="cream"] .sec.fin::before {
  background: radial-gradient(ellipse 58% 48% at 50% 48%,
    rgba(var(--ground), 0.66) 0%,
    rgba(var(--ground), 0.30) 56%,
    rgba(var(--ground), 0) 100%);
}
[data-theme="cream"].no-webgl body,
[data-theme="cream"].no-webgl #veil {
  background:
    radial-gradient(ellipse 90% 60% at 78% 12%, rgba(250, 185, 91, 0.26), transparent 62%),
    var(--cream);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--navy);
  color: var(--ink-0);
  font-family: var(--ar);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

body.is-locked { overflow: hidden; height: 100vh; }

:lang(en), .la { font-family: var(--la); }

/* ------------------------------------------------------------ canvas */

#gl {
  position: fixed;
  inset: 0;
  z-index: 0;
  display: block;
  width: 100%;
  height: 100%;
  transition: opacity 0.5s ease;
}

/* past the cinematic the canvas is switched off, not just covered */
.gl-off #gl { opacity: 0; }
.gl-off .rail { opacity: 0; pointer-events: none; }
.rail { transition: opacity 0.4s ease; }

/* the film grain / vignette lives in CSS so it costs nothing per frame */
#veil {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(ellipse 120% 85% at 50% 45%,
      rgba(var(--ground), 0) 42%,
      rgba(var(--ground), 0.55) 78%,
      rgba(var(--ground), 0.9) 100%);
}

#grain {
  position: fixed;
  inset: -50%;
  z-index: 2;
  pointer-events: none;
  opacity: 0.035;
  background-repeat: repeat;
  will-change: transform;
}

/* no-WebGL: the page still reads, on a painted navy ground */
.no-webgl #gl,
.no-webgl #grain,
/* there is no camera to talk about, so stop promising one */
.no-webgl .scroll-hint { display: none; }

.no-webgl body,
.no-webgl #veil {
  background:
    radial-gradient(ellipse 90% 60% at 78% 12%, rgba(250, 185, 91, 0.16), transparent 62%),
    radial-gradient(ellipse 70% 50% at 20% 88%, rgba(250, 185, 91, 0.07), transparent 60%),
    var(--navy);
}

/* ------------------------------------------------------------ preloader */

#pre {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: grid;
  place-content: center;
  gap: 22px;
  justify-items: center;
  background: var(--navy);
  transition: opacity 0.7s ease, visibility 0.7s;
}
#pre.done { opacity: 0; visibility: hidden; }

#pre .mark { width: 46px; height: 46px; opacity: 0.95; }

#pre .bar {
  width: min(210px, 46vw);
  height: 2px;
  background: var(--ink-3);
  overflow: hidden;
}
#pre .fill {
  height: 100%;
  width: 0%;
  background: var(--gold);
  transition: width 0.25s ease;
}
#pre .pct {
  font-family: var(--la);
  font-size: 11px;
  letter-spacing: 0.22em;
  color: var(--ink-2);
}

/* ------------------------------------------------------------ chrome */

.nav {
  position: fixed;
  inset-inline: 0;
  top: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px var(--gutter);
  background: linear-gradient(to bottom, rgba(var(--ground), 0.86), rgba(var(--ground), 0));
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--ink-0);
}
.brand img { width: 26px; height: 26px; display: block; }
.brand span {
  font-family: var(--la);
  font-weight: 700;
  font-size: 17px;
  letter-spacing: -0.01em;
}

.nav-right { display: flex; align-items: center; gap: 10px; }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 9px;
  padding: 10px 18px;
  font-family: var(--ar);
  font-weight: 500;
  font-size: 15px;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.18s ease, background 0.18s ease, border-color 0.18s ease;
}
.btn:active { transform: translateY(1px); }

/* HARD RULE: on gold, ink is navy — never white. */
.btn-gold { background: var(--gold); color: var(--navy); }
.btn-gold:hover { background: #ffc774; }

.btn-ghost {
  background: transparent;
  color: var(--ink-0);
  border: 1px solid var(--hair);
}
.btn-ghost:hover { border-color: rgba(254, 252, 248, 0.34); }

.btn-lg { padding: 15px 30px; font-size: 17px; border-radius: 11px; }

/* chapter rail — sits on the inline-end edge (visually left in RTL) */
.rail {
  position: fixed;
  inset-inline-end: clamp(14px, 2.2vw, 30px);
  top: 50%;
  transform: translateY(-50%);
  z-index: 35;
  display: grid;
  gap: 16px;
  justify-items: center;
}
.rail a {
  display: grid;
  gap: 7px;
  justify-items: center;
  text-decoration: none;
  font-family: var(--la);
  font-size: 10px;
  letter-spacing: 0.14em;
  color: var(--ink-2);
  transition: color 0.35s ease;
}
.rail i {
  display: block;
  width: 1px;
  height: 20px;
  background: var(--ink-3);
  transition: background 0.35s ease, height 0.35s ease;
}
.rail a.on { color: var(--gold); }
.rail a.on i { background: var(--gold); height: 32px; }

/* ------------------------------------------------------------ layout */

main { position: relative; z-index: 10; }

.sec {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  padding: 118px var(--gutter) 92px;
  pointer-events: none;
}
.sec > .wrap {
  position: relative;
  z-index: 1;
  pointer-events: auto;
  max-width: 1240px;
  width: 100%;
  margin-inline: auto;
}

/* A scrim under the copy. The model is live behind it and its brightness
   is not something the type can negotiate with, so the type brings its
   own ground — heaviest on the edge the column sits on. */
.sec::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(to left,
    rgba(var(--ground), 0.92) 0%,
    rgba(var(--ground), 0.78) 26%,
    rgba(var(--ground), 0.28) 54%,
    rgba(var(--ground), 0) 72%);
}
.sec.flip::before {
  background: linear-gradient(to right,
    rgba(var(--ground), 0.92) 0%,
    rgba(var(--ground), 0.78) 26%,
    rgba(var(--ground), 0.28) 54%,
    rgba(var(--ground), 0) 72%);
}
/* the closing wide is the one shot meant to be seen whole, so its scrim
   holds the type and then gets out of the way quickly */
.sec.fin::before {
  background: radial-gradient(ellipse 62% 52% at 50% 48%,
    rgba(var(--ground), 0.82) 0%,
    rgba(var(--ground), 0.48) 58%,
    rgba(var(--ground), 0) 100%);
}

.col { max-width: 660px; }
.col-narrow { max-width: 540px; }

/* chapter 02/03 push their column to the opposite edge so the model
   is never covered twice from the same side */
.sec.flip .col { margin-inline-start: auto; }

/* ------------------------------------------------------------ type */

.kicker {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--la);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.2em;
  color: var(--gold);
  margin: 0 0 20px;
}
.kicker::before {
  content: '';
  width: 26px;
  height: 1px;
  background: var(--gold);
  opacity: 0.55;
}

h1, h2 {
  margin: 0;
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.015em;
  text-wrap: balance;
}
h1 { font-size: clamp(38px, 7.4vw, 88px); }
h2 { font-size: clamp(30px, 5vw, 62px); }

.lede {
  margin: 22px 0 0;
  max-width: var(--measure);
  font-size: clamp(16px, 1.9vw, 20px);
  line-height: 1.68;
  color: var(--ink-1);
  text-wrap: pretty;
}

.sub {
  margin: 14px 0 0;
  font-size: 14px;
  line-height: 1.6;
  color: var(--ink-2);
}

.cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 34px;
}

/* the big Latin counterpoint — Arabic never rotates, so the vertical
   display type is Latin only and the Arabic carries the weight */
.counter {
  position: absolute;
  inset-inline-end: clamp(52px, 7vw, 128px);
  bottom: clamp(40px, 8vh, 96px);
  font-family: var(--la);
  font-weight: 700;
  font-size: clamp(48px, 11vw, 150px);
  line-height: 0.82;
  letter-spacing: -0.05em;
  color: transparent;
  -webkit-text-stroke: 1px rgba(254, 252, 248, 0.11);
  pointer-events: none;
  user-select: none;
}

/* ------------------------------------------------------------ pieces */

.facts {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 40px;
  margin-top: 40px;
  padding-top: 26px;
  border-top: 1px solid var(--hair);
}
.fact b {
  display: block;
  font-family: var(--la);
  font-size: clamp(24px, 3.4vw, 38px);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--gold);
  line-height: 1;
}
.fact span {
  display: block;
  margin-top: 7px;
  font-size: 13px;
  color: var(--ink-2);
}

.steps {
  list-style: none;
  margin: 34px 0 0;
  padding: 0;
  display: grid;
  gap: 1px;
  background: var(--hair);
  border: 1px solid var(--hair);
  border-radius: 12px;
  overflow: hidden;
}
.steps li {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 16px 18px;
  background: rgba(var(--ground), 0.66);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink-1);
}
.steps em {
  flex: none;
  font-family: var(--la);
  font-style: normal;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--gold);
  padding-top: 3px;
}

.note {
  margin-top: 30px;
  padding: 15px 18px;
  border-radius: 11px;
  border: 1px solid rgba(250, 185, 91, 0.26);
  background: rgba(250, 185, 91, 0.07);
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--ink-1);
  max-width: var(--measure);
}
.note b { color: var(--gold); font-weight: 700; }

.pays {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 26px;
}
.pays span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  padding: 7px 13px;
  border-radius: 999px;
  border: 1px solid var(--hair);
  color: var(--ink-1);
  background: rgba(var(--ground), 0.5);
}

/* Until a real logo file lands in assets/pay/ the chip carries the
   method's brand colour instead — a cue, not a counterfeit mark. */
.pays span.pay-dot::before {
  content: '';
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--c, var(--accent));
  flex: none;
}
/* cod is a mark with no wordmark: the icon takes the dot's place and the
   label stays, on one line */
.pays span.pay-icon img {
  height: 15px;
  width: auto;
  display: block;
  flex: none;
}
/* on the same white plate as the wordmark chips, so the icon stays navy */
.pays span.pay-icon {
  padding: 5px 13px;
  background: #FFFFFF;
  border-color: rgba(14, 22, 40, 0.12);
  color: #0E1628;
}

/* same reasoning as the 3D chips: the marks are drawn for light grounds,
   so they get their own white plate rather than sitting on navy */
.pays span.pay-logo {
  padding: 4px 10px;
  background: #FFFFFF;
  border-color: rgba(14, 22, 40, 0.12);
}
/* a mark supplied as white lettering can only sit on a dark ground */
.pays span.pay-logo.pay-dark {
  background: #0B0B0B;
  border-color: rgba(255, 255, 255, 0.16);
}
.pays span.pay-logo img {
  height: 20px;
  width: auto;
  max-width: 84px;
  display: block;
}
.pays.big span.pay-logo img { height: 24px; max-width: 104px; }

/* ============================================================ the rest
   Past the cinematic the page stops being a stage and becomes a
   document. It gets an opaque ground so the canvas behind it is not
   just invisible but genuinely switched off. */

#rest {
  position: relative;
  z-index: 12;
  background: var(--navy);
}
[data-theme="cream"] #rest { background: var(--cream); }

.band {
  position: relative;
  padding: clamp(64px, 9vw, 128px) var(--gutter);
  border-top: 1px solid var(--hair);
}
.band .wrap { max-width: 1120px; margin-inline: auto; }
.band .wrap.narrow { max-width: 760px; }

.band.alt { background: rgba(255, 255, 255, 0.025); }
[data-theme="cream"] .band.alt { background: rgba(14, 22, 40, 0.028); }

.h-mid {
  font-size: clamp(26px, 4.2vw, 50px);
  margin-top: 14px;
}
.lede.wide { max-width: 62ch; }
.sub.center, .cta-row.center, .pays.center { justify-content: center; text-align: center; }
.cta-row.center { display: flex; }
.sub.center { margin-inline: auto; }

.link { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }

/* the numbers */
.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 22px;
  margin-top: 44px;
  padding-top: 32px;
  border-top: 1px solid var(--hair);
}
.stat b {
  display: block;
  font-family: var(--la);
  font-size: clamp(34px, 5.4vw, 58px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--accent);
}
.stat span {
  display: block;
  margin-top: 10px;
  font-size: 14.5px;
  color: var(--ink-2);
}

.pays.big span { font-size: 15px; padding: 10px 20px; }

/* the three pains / the four features */
.cards3, .cards4 {
  display: grid;
  gap: 16px;
  margin-top: 42px;
}
.cards3 { grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); }
.cards4 { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }

.pcard, .fcard {
  padding: 26px 24px 24px;
  border: 1px solid var(--hair);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.03);
}
[data-theme="cream"] .pcard,
[data-theme="cream"] .fcard { background: #FFFFFF; }

.pcard em, .fcard em {
  font-family: var(--la);
  font-style: normal;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--accent);
}
.pcard h3, .fcard h3 {
  margin: 12px 0 10px;
  font-size: 19px;
  font-weight: 700;
  color: var(--ink-0);
}
.pcard p, .fcard p {
  margin: 0;
  font-size: 15px;
  line-height: 1.65;
  color: var(--ink-1);
}
.pcard .fix {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--hair);
  font-size: 14px;
  color: var(--accent);
  font-weight: 500;
}

/* pricing */
.price {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 12px;
  margin-top: 36px;
}
.price b {
  font-size: clamp(52px, 9vw, 92px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--ink-0);
}
.price b small { font-size: 0.42em; font-weight: 500; }
.price span { font-size: 17px; color: var(--ink-2); }

.ticks {
  list-style: none;
  margin: 30px auto 0;
  padding: 0;
  display: grid;
  gap: 12px;
  max-width: 420px;
}
.ticks li {
  position: relative;
  padding-inline-start: 30px;
  font-size: 16px;
  color: var(--ink-1);
}
.ticks li::before {
  content: '';
  position: absolute;
  inset-inline-start: 4px;
  top: 0.42em;
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--accent);
}

/* faq */
.faq { margin-top: 36px; border-top: 1px solid var(--hair); }
.faq details { border-bottom: 1px solid var(--hair); }
.faq summary {
  list-style: none;
  cursor: pointer;
  padding: 20px 0;
  font-size: clamp(16px, 2vw, 18.5px);
  font-weight: 500;
  color: var(--ink-0);
  display: flex;
  align-items: center;
  gap: 14px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: '+';
  margin-inline-start: auto;
  font-family: var(--la);
  font-size: 21px;
  color: var(--accent);
  flex: none;
}
.faq details[open] summary::after { content: '–'; }
.faq details p {
  margin: 0;
  padding: 0 0 22px;
  max-width: 60ch;
  font-size: 15.5px;
  line-height: 1.75;
  color: var(--ink-1);
}

.band-cta { text-align: center; }
.band-stats { text-align: center; }
.band-stats .kicker { justify-content: center; }
.band-cta .kicker { justify-content: center; }
.band-stats .lede, .band-cta .lede { margin-inline: auto; }

/* ============================================================ LTR
   The scrim is a physical gradient, so it has to flip with the writing
   direction — in English the column is on the left and the heavy end of
   the scrim belongs there. */
[dir="ltr"] .sec::before {
  background: linear-gradient(to right,
    rgba(var(--ground), 0.92) 0%,
    rgba(var(--ground), 0.78) 26%,
    rgba(var(--ground), 0.28) 54%,
    rgba(var(--ground), 0) 72%);
}
[dir="ltr"] .sec.flip::before {
  background: linear-gradient(to left,
    rgba(var(--ground), 0.92) 0%,
    rgba(var(--ground), 0.78) 26%,
    rgba(var(--ground), 0.28) 54%,
    rgba(var(--ground), 0) 72%);
}
[dir="ltr"][data-theme="cream"] .sec::before {
  background: linear-gradient(to right,
    rgba(var(--ground), 0.72) 0%,
    rgba(var(--ground), 0.42) 24%,
    rgba(var(--ground), 0.10) 48%,
    rgba(var(--ground), 0) 64%);
}
[dir="ltr"][data-theme="cream"] .sec.flip::before {
  background: linear-gradient(to left,
    rgba(var(--ground), 0.72) 0%,
    rgba(var(--ground), 0.42) 24%,
    rgba(var(--ground), 0.10) 48%,
    rgba(var(--ground), 0) 64%);
}

/* Latin copy sets in Space Grotesk throughout */
[lang="en"] body { font-family: var(--la); }
[lang="en"] .btn { font-family: var(--la); }

/* ------------------------------------------------------------ closing */

.fin { text-align: center; }
.fin .col { max-width: 780px; margin-inline: auto; }
.fin .cta-row { justify-content: center; }

.foot {
  position: relative;
  z-index: 12;
  background: var(--navy-2);
  padding: 44px var(--gutter) 40px;
  border-top: 1px solid var(--hair);
  display: flex;
  flex-wrap: wrap;
  gap: 14px 28px;
  align-items: center;
  justify-content: space-between;
  font-size: 13px;
  color: var(--ink-2);
}
[data-theme="cream"] .foot { background: #F1EADC; }
.foot a { color: var(--ink-1); text-decoration: none; }
.foot a:hover { color: var(--gold); }

/* ------------------------------------------------------------ reveal */

[data-rv] {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.9s cubic-bezier(0.2, 0.7, 0.25, 1),
              transform 0.9s cubic-bezier(0.2, 0.7, 0.25, 1);
  transition-delay: var(--d, 0ms);
}
[data-rv].in { opacity: 1; transform: none; }

/* word-by-word heading reveal */
.w {
  display: inline-block;
  opacity: 0;
  transform: translateY(0.42em);
  transition: opacity 0.72s cubic-bezier(0.2, 0.7, 0.25, 1),
              transform 0.72s cubic-bezier(0.2, 0.7, 0.25, 1);
  transition-delay: var(--d, 0ms);
}
.in .w, .w.in { opacity: 1; transform: none; }

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

@media (max-width: 900px) {
  /* There is no "opposite side" on a phone — the column is the whole
     width. So the split becomes vertical: the model keeps the top of the
     frame and the copy takes the bottom, rather than the two sharing the
     middle with a scrim over both.

     Every desktop variant has to be named here. [dir="ltr"] .sec::before
     and [dir="ltr"][data-theme="cream"] .sec::before out-specify a bare
     .sec::before, so the old single mobile rule silently lost to them —
     which is why English on a phone kept the desktop side gradient and
     buried the model behind 78% opacity while Arabic did not. */
  .sec::before,
  .sec.flip::before,
  .sec.fin::before,
  [dir] .sec::before,
  [dir] .sec.flip::before,
  [dir][data-theme] .sec::before,
  [dir][data-theme] .sec.flip::before,
  [dir][data-theme] .sec.fin::before {
    /* Clear to 32%, because that is where the model lives, then up fast.
       Chapter 02's column starts highest of any (46%, it keeps the
       payment row), so the ground has to be readable by then. */
    background: linear-gradient(to bottom,
      rgba(var(--ground), 0) 0%,
      rgba(var(--ground), 0) 32%,
      rgba(var(--ground), calc(0.62 * var(--scrim-k))) 46%,
      rgba(var(--ground), calc(0.90 * var(--scrim-k))) 58%,
      rgba(var(--ground), calc(0.94 * var(--scrim-k))) 100%);
  }

  /* the copy drops to the bottom so the model owns the top of the frame */
  .sec { align-items: flex-end; }

  /* The supporting detail is what makes the column 500-680px tall, which
     on an 812px screen leaves the model nowhere to be. Desktop has a
     whole empty half to spend on it; a phone does not, and a chapter the
     reader cannot see the dashboard in has failed at its one job. The
     kicker, heading and lede carry the chapter on their own. */
  .sec .facts,
  .sec .steps,
  .sec .note,
  .sec .sub:not(.scroll-hint) { display: none; }

  .rail { display: none; }
  .counter { font-size: clamp(44px, 17vw, 96px); inset-inline-end: var(--gutter); opacity: 0.75; }
  .sec { min-height: 100svh; padding: 104px var(--gutter) 80px; }
  .sec.flip .col { margin-inline-start: 0; }
  .lede { font-size: 16.5px; }
  .facts { gap: 12px 26px; }
}

@media (max-width: 560px) {
  .nav { padding: 11px var(--gutter); }
  .band { padding: clamp(52px, 11vw, 80px) var(--gutter); }
  .cards3, .cards4 { gap: 12px; }
  .nav .btn { padding: 9px 14px; font-size: 14px; }
  .brand span { font-size: 15px; }
  .counter { display: none; }
  .btn-lg { padding: 14px 22px; font-size: 16px; }
}

/* ------------------------------------------------------------ a11y */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  [data-rv], .w {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  #grain { display: none; }
  .btn { transition: none; }
}

.skip {
  position: absolute;
  inset-inline-start: -9999px;
  top: 8px;
  z-index: 100;
  padding: 10px 16px;
  border-radius: 8px;
  background: var(--gold);
  color: var(--navy);
  font-weight: 500;
  text-decoration: none;
}
.skip:focus { inset-inline-start: 12px; }

:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
  border-radius: 4px;
}

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

/* ============================================================== apply
   The application form. It is the page's only conversion mechanism, so
   it sits on its own raised card rather than floating on the band: on
   the navy palette a bare form disappears into the ground. */

#applyMount { margin-top: clamp(26px, 4vw, 40px); }

.ap-card {
  max-width: 34rem;
  margin: 0 auto;
  display: grid;
  gap: 18px;
  text-align: start;
  padding: clamp(22px, 3.4vw, 32px);
  border-radius: 18px;
  background: rgba(var(--ground), 0.55);
  border: 1px solid var(--hair);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
[data-theme="cream"] .ap-card {
  background: #FFFFFF;
  border-color: rgba(14, 22, 40, 0.10);
  box-shadow: 0 18px 44px -28px rgba(14, 22, 40, 0.5);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.ap-f { display: grid; gap: 8px; }
.ap-l { font-size: 14px; font-weight: 600; color: var(--ink-1); }
.ap-h { font-size: 12.5px; color: var(--ink-2); }

.ap-i {
  width: 100%;
  font: inherit;
  font-size: 16px;           /* 16px or iOS zooms the page on focus */
  color: var(--ink-0);
  padding: 12px 14px;
  border-radius: 11px;
  border: 1px solid var(--ink-3);
  background: rgba(var(--ground), 0.6);
  transition: border-color .16s ease, box-shadow .16s ease;
}
[data-theme="cream"] .ap-i { background: #FDFBF7; }
.ap-i:focus-visible {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(250, 185, 91, 0.22);
}
select.ap-i { appearance: none; cursor: pointer; }

.ap-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.ap-chip {
  font: inherit;
  font-size: 14px;
  cursor: pointer;
  padding: 8px 14px;
  border-radius: 9999px;
  color: var(--ink-1);
  background: transparent;
  border: 1px solid var(--ink-3);
  transition: background .16s ease, border-color .16s ease, color .16s ease;
}
.ap-chip:hover { border-color: var(--ink-2); }
.ap-chip.on {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--navy);        /* gold always carries navy text */
  font-weight: 600;
}
.ap-chip:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(250, 185, 91, 0.3);
}

.ap-err {
  margin: 0;
  font-size: 14.5px;
  font-weight: 600;
  color: #FF8A8A;
}
[data-theme="cream"] .ap-err { color: #C2261B; }

.ap-go { width: 100%; justify-content: center; margin-top: 4px; }
.ap-go[disabled] { opacity: .62; cursor: default; }

.ap-done { text-align: center; gap: 10px; }
.ap-done-t {
  margin: 0;
  font-size: clamp(20px, 2.6vw, 26px);
  font-weight: 700;
  color: var(--ink-0);
}
.ap-done-b { margin: 0; font-size: 16px; line-height: 1.6; color: var(--ink-1); }

/* ========================================================= icon buttons
   Theme and language were word buttons, which cost enough width that both
   had to be hidden under 720px — on a bilingual site that left a phone
   with no way to switch language at all. As icons they fit, so they stay. */

.icon-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: 38px;
  height: 38px;
  padding: 0;
  flex: none;
  cursor: pointer;
  border-radius: 10px;
  color: var(--ink-1);
  background: transparent;
  border: 1px solid var(--ink-3);
  transition: color .18s ease, border-color .18s ease, background .18s ease;
}
/* no display here: it would out-specify the .i-sun / .i-moon hide rule
   below and both theme icons would show at once. Flex blockifies them. */
.icon-btn svg { width: 18px; height: 18px; }
.icon-btn:hover { color: var(--ink-0); border-color: var(--ink-2); }
.icon-btn:focus-visible {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(250, 185, 91, 0.28);
}
.icon-btn[aria-expanded="true"] {
  color: var(--ink-0);
  border-color: var(--ink-2);
  background: rgba(var(--ground), 0.5);
}

/* A 34px control is a fine mouse target and a poor thumb one. The hit
   area grows to the 44px minimum without the button growing with it, so
   the bar stays tight — the 7px gap absorbs the overhang exactly. */
@media (pointer: coarse) {
  .icon-btn::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 44px;
    height: 44px;
    transform: translate(-50%, -50%);
  }
}

/* The globe says "language"; the code says which one you'd get — a globe
   alone leaves the reader guessing between two they can't see. */
#langBtn { width: auto; padding: 0 9px; gap: 5px; }
.icon-tag {
  font-family: var(--la);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 1;
}
[lang="ar"] .icon-tag::after { content: 'EN'; }
[lang="en"] .icon-tag::after { content: 'ع'; font-family: var(--ar); font-size: 13px; }

/* Each button shows the state it switches *to*, which is the convention
   readers already have from every other site. */
.i-sun, .i-moon { display: none; }
[data-theme="dark"] .i-sun { display: block; }
[data-theme="cream"] .i-moon { display: block; }

/* ============================================================ jump menu
   The chapter rail is a progress indicator that happens to be clickable,
   and it disappears under 900px. This is the actual "take me there"
   control, and it lists the document sections the rail never covered. */

.jump-wrap { position: relative; display: inline-flex; }

.jump {
  position: absolute;
  /* Anchored to the trigger's outer edge, which is now the bar's outer
     edge: aligning the other side would push the panel off-screen. */
  inset-inline-end: 0;
  top: calc(100% + 9px);
  z-index: 60;
  width: min(272px, calc(100vw - var(--gutter) * 2));
  max-height: min(70vh, 520px);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 7px;
  border-radius: 14px;
  background: rgba(var(--ground), 0.94);
  border: 1px solid var(--hair);
  box-shadow: 0 26px 60px -30px rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  animation: jumpIn .16s ease both;
}
[data-theme="cream"] .jump {
  background: #FFFFFF;
  border-color: rgba(14, 22, 40, 0.10);
  box-shadow: 0 26px 60px -32px rgba(14, 22, 40, 0.42);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
@keyframes jumpIn { from { opacity: 0; transform: translateY(-6px); } }

.jump a {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 9px 11px;
  border-radius: 9px;
  text-decoration: none;
  color: var(--ink-1);
  font-size: 14.5px;
  line-height: 1.3;
  transition: background .14s ease, color .14s ease;
}
.jump a:hover { background: rgba(var(--ground), 0.6); color: var(--ink-0); }
[data-theme="cream"] .jump a:hover { background: #F3EFE6; }
.jump a:focus-visible {
  outline: none;
  background: rgba(var(--ground), 0.6);
  box-shadow: inset 0 0 0 1px var(--accent);
}
.jump a.on { color: var(--accent); font-weight: 600; }

.jump b {
  font-family: var(--la);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.13em;
  color: var(--ink-2);
  flex: none;
  min-width: 2ch;
}
.jump a.on b { color: var(--accent); }

.jump hr {
  height: 1px;
  margin: 6px 9px;
  border: 0;
  background: var(--hair);
}

/* ------------------------------------------------- nav, small screens */

@media (max-width: 860px) {
  /* the demo store keeps its own nav entry on desktop; on a phone the
     jump menu carries it instead, so the bar keeps only what must be
     reachable in one tap */
  .nav-demo { display: none; }
}

@media (max-width: 560px) {
  .nav-right { gap: 7px; }
  /* the bar gained three controls; nothing in it may wrap to a second
     line trying to fit */
  .nav .btn { white-space: nowrap; }
  .icon-btn { width: 34px; height: 34px; border-radius: 9px; }
  .icon-btn svg { width: 17px; height: 17px; }
  #langBtn { padding: 0 8px; }

  /* a dropdown pinned to one corner is a poor phone target: full width,
     anchored under the bar, is easier to hit and easier to read */
  /* fixed, not absolute: inside the trigger's relative wrapper an inset
     would resolve against the button, not the viewport */
  .jump {
    position: fixed;
    inset-inline: var(--gutter);
    top: 74px;                     /* clears the 68px bar at this width */
    width: auto;
    /* the phone has the height to show nearly the whole list — capping at
       460px left 280px of viewport empty and pushed the language and
       theme rows below the menu's own scroll fold */
    max-height: min(100vh - 96px, 640px);
    max-height: min(100dvh - 96px, 640px);
  }
  .jump a { padding: 11px 12px; font-size: 15.5px; }
}


/* --------------------------------------------- tools inside the menu

   Language and theme are in the bar and in the menu both. That is not an
   oversight: the bar is for the reader who already knows the control is
   there, and the menu is where someone goes to look for it. Both routes
   click the same button, so there is one implementation, not two. */

.jump-tool {
  display: flex;
  align-items: center;
  gap: 11px;
  width: 100%;
  padding: 9px 11px;
  border: 0;
  border-radius: 9px;
  cursor: pointer;
  font: inherit;
  font-size: 14.5px;
  text-align: start;
  color: var(--ink-1);
  background: transparent;
  transition: background .14s ease, color .14s ease;
}
.jump-tool:hover { background: rgba(var(--ground), 0.6); color: var(--ink-0); }
[data-theme="cream"] .jump-tool:hover { background: #F3EFE6; }
.jump-tool:focus-visible {
  outline: none;
  background: rgba(var(--ground), 0.6);
  box-shadow: inset 0 0 0 1px var(--accent);
}
.jump-tool svg { width: 17px; height: 17px; flex: none; }
/* the globe carries its own code tag in the bar; in the menu the row is
   already labelled, so the tag would just repeat itself */
.jump-tool .icon-tag { display: none; }
.jump-tool .tool-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2ch;
  flex: none;
}

/* Language and theme live in the menu only. They stay in the markup —
   the menu clones their icons and clicks them, so the switch has exactly
   one implementation — but the bar keeps just the menu, the demo store
   and the call to action. Deleting this rule puts them back. */
.nav #langBtn,
.nav #themeBtn { display: none; }

/* Arabic is a cursive script: letters join, and letter-spacing severs
   those joins so the word arrives in pieces. The kicker is the only
   tracked-out label carrying running Arabic — everywhere else the
   tracking sits on digits, which have nothing to join. It was also asking
   for the Latin display face, which has no Arabic in it at all, so the
   text fell through to whatever the system happened to offer. */
[lang="ar"] .kicker {
  font-family: var(--ar);
  letter-spacing: 0;
  font-size: 12.5px;
  font-weight: 700;
}