@import url('https://api.fontshare.com/v2/css?f[]=general-sans@300,400,500,600,700&display=swap');
/* =====================================================================
   AKHBR PROGRAMME, shared design system
   Static multi page Arabic site, RTL primary, no build step.
   This stylesheet is the single source of truth for the visual language
   on every subpage. Tokens, theme system, navbar, buttons, cursor,
   loader and the code-card terminal are copied to match index.html
   pixel for pixel. Everything below the base layer is the shared
   component API that page workers build against.
   NOTE on copy: zero dashes anywhere, in text or comment. Commas only.
   ===================================================================== */

/* ============= FONT FACE ============= */
@font-face {
  font-family: 'UthmanTaha';
  src: url('../fonts/UthmanTN1-Ver10.otf') format('opentype');
  font-weight: 400; font-display: swap;
}

/* ============= DESIGN TOKENS ============= */
:root {
  --font-arabic-display: 'Mada', system-ui, sans-serif;
  --font-arabic-text: 'UthmanTaha', 'General Sans', serif;
  --font-display-en: 'Fraunces', 'Times New Roman', serif;
  --font-english: 'General Sans', system-ui, sans-serif;

  --c-akhbr-green: #1B3A1B;
  --c-deep-green: #0F2410;
  --c-champagne: #C9A961;
  --c-champagne-deep: #9F8440;
  --c-ivory: #F7F2E9;
  --c-pearl: #FBF8F1;
  --c-obsidian: #0E1410;
  --c-stone: #6B6657;

  --c-coral: #E74C3C;

  --ease-std: cubic-bezier(0.4,0,0.2,1);
  --ease-reveal: cubic-bezier(0.16,1,0.3,1);

  /* Sizing tokens (theme independent). One home for the values that recur
     across nav hit areas, cards and CTAs so a future tweak lands once.
     --tap-min is the WCAG comfortable minimum touch target (handoff Phase 3),
     used to size the invisible hit overlays on the toggles and hamburger. */
  --tap-min: 44px;
  --card-radius: 20px;
}

/* ============= THEME TOKENS ============= */
:root,
body.theme-light {
  --c-bg:        var(--c-ivory);
  --c-bg-soft:   var(--c-pearl);
  --c-fg:        var(--c-obsidian);
  --c-fg-muted:  #54503F;
  --c-rail:      var(--c-champagne-deep);
  --c-rail-dot:  var(--c-akhbr-green);
  /* Accent color reserved for SMALL gold text on the light surfaces (badges,
     chips, table highlights, card numbers). A deeper shade of the same brand
     gold so it clears WCAG AA 4.5:1 on ivory/pearl, where --c-champagne-deep
     (3.2:1) only passes at large display sizes. Clears 4.5:1 on ivory, pearl,
     and the champagne-tinted table header alike. */
  --c-accent-text: #7E6630;
  /* Error text shade, deeper than --c-coral so small error copy and the
     required-field mark read at AA 4.5:1 on the light surfaces. */
  --c-error-text: #C8321F;
  --c-nav-bg:    rgba(247, 242, 233, 0.55);
  --c-nav-bg-2:  rgba(247, 242, 233, 0.72);
  --c-nav-border: rgba(14, 20, 16, 0.06);
  --c-nav-link:  rgba(14, 20, 16, 0.66);
  --c-nav-link-h: var(--c-akhbr-green);
  --c-loader-bg: var(--c-deep-green);
  --scrim-top: rgba(247,242,233,0.85);
  --scrim-top-mid: rgba(247,242,233,0.45);
  --scrim-top-end: rgba(247,242,233,0);
  --scrim-bot: rgba(247,242,233,0.75);
  --scrim-bot-mid: rgba(247,242,233,0.4);
  --scrim-bot-end: rgba(247,242,233,0);
  --scrim-radial: rgba(247,242,233,0.78);
  --scrim-radial-mid: rgba(247,242,233,0.4);
  --scrim-radial-end: rgba(247,242,233,0);
}
body.theme-dark {
  --c-bg:        var(--c-deep-green);
  --c-bg-soft:   #14281A;
  --c-fg:        var(--c-ivory);
  --c-fg-muted:  #a59e8c;
  --c-rail:      var(--c-champagne);
  --c-rail-dot:  var(--c-champagne);
  /* On the deep-green dark surfaces the bright --c-champagne already clears
     AA at small sizes (7.3:1), so the accent text token maps straight to it. */
  --c-accent-text: var(--c-champagne);
  /* Lighter coral on dark so small error copy clears AA on the dark surfaces
     (the base --c-coral only reaches 4.08:1 there). */
  --c-error-text: #EC6657;
  --c-nav-bg:    rgba(15, 36, 16, 0.55);
  --c-nav-bg-2:  rgba(15, 36, 16, 0.78);
  --c-nav-border: rgba(247, 242, 233, 0.10);
  --c-nav-link:  rgba(247, 242, 233, 0.7);
  --c-nav-link-h: var(--c-champagne);
  --c-loader-bg: #061509;
  --scrim-top: rgba(15,36,16,0.85);
  --scrim-top-mid: rgba(15,36,16,0.45);
  --scrim-top-end: rgba(15,36,16,0);
  --scrim-bot: rgba(15,36,16,0.78);
  --scrim-bot-mid: rgba(15,36,16,0.4);
  --scrim-bot-end: rgba(15,36,16,0);
  --scrim-radial: rgba(15,36,16,0.7);
  --scrim-radial-mid: rgba(15,36,16,0.4);
  --scrim-radial-end: rgba(15,36,16,0);
}

/* ============= RESET / BASE ============= */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
html, body { background: var(--c-bg); color: var(--c-fg); margin: 0; padding: 0; }
body {
  font-family: var(--font-english);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  min-height: 100dvh;
  transition: background-color 0.4s var(--ease-std), color 0.4s var(--ease-std);
}
img, svg, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; }
ul { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4, h5, h6, p { margin: 0; }
:focus-visible { outline: 2px solid var(--c-champagne); outline-offset: 3px; border-radius: 4px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* dark mode editorial helpers (mirrors index.html) */
body.theme-dark .eyebrow { color: var(--c-fg-muted); }
body.theme-dark .nav-wordmark { color: var(--c-champagne); }
body.theme-dark .hamburger span { background: var(--c-champagne); }

/* =====================================================================
   LOADER (Three Cartouche Pulse)
   ===================================================================== */
.loader {
  position: fixed; inset: 0; z-index: 9999;
  display: flex; align-items: center; justify-content: center;
  gap: clamp(24px, 6vw, 64px); background: #0F2410;
  transition: opacity 0.5s var(--ease-std);
}
.loader.is-hidden { opacity: 0; pointer-events: none; }
.loader .cartouche {
  width: clamp(52px, 9vw, 92px); height: auto;
  animation: cartouche-pulse 1.6s var(--ease-std) infinite;
}
.loader .cartouche:nth-child(2) { animation-delay: 0.2s; }
.loader .cartouche:nth-child(3) { animation-delay: 0.4s; }
@keyframes cartouche-pulse {
  0%,100% { opacity: 0.3; transform: scale(0.96); }
  45%     { opacity: 1;   transform: scale(1.04); }
}

/* =====================================================================
   NAVBAR, Apple style glass (raised max width to seat 5 links + actions)
   ===================================================================== */
.navbar {
  position: fixed; top: 16px; left: 50%; transform: translateX(-50%);
  z-index: 1000; width: calc(100% - 32px); max-width: 980px;
  background: var(--c-nav-bg);
  -webkit-backdrop-filter: saturate(180%) blur(28px);
  backdrop-filter: saturate(180%) blur(28px);
  border-radius: 60px; padding: 12px 24px;
  border: 1px solid var(--c-nav-border);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.4) inset,
    0 -1px 0 rgba(14,20,16,0.04) inset,
    0 12px 36px -12px rgba(14, 20, 16, 0.18),
    0 2px 8px rgba(14, 20, 16, 0.06);
  transition: 0.3s var(--ease-std);
}
.navbar.scrolled {
  background: var(--c-nav-bg-2);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.4) inset,
    0 -1px 0 rgba(14,20,16,0.05) inset,
    0 16px 44px -12px rgba(14, 20, 16, 0.28),
    0 4px 12px rgba(14, 20, 16, 0.08);
}
.nav-inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.nav-brand { display: flex; align-items: center; gap: 10px; }
.nav-wordmark { font-family: 'Mada', sans-serif; font-weight: 900; font-size: 22px; color: var(--c-akhbr-green); letter-spacing: -0.01em; line-height: 1; }
.nav-links { display: flex; align-items: center; gap: 16px; }
/* Effective tap/click height >= 44px (handoff Phase 3): the padding-block
   grows the hit area while an equal negative margin-block pulls the layout
   back, so the desktop navbar row height and alignment are unchanged. line
   keeps the visual baseline. white-space:nowrap stays so the desktop nav row
   never wraps at 1280px. */
.nav-link {
  font-family: 'Mada', sans-serif; font-size: 15px; font-weight: 600;
  color: var(--c-nav-link); transition: color 0.3s var(--ease-std);
  text-decoration: none; white-space: nowrap;
  display: inline-flex; align-items: center;
  line-height: 1.2;
  padding-block: 13px; margin-block: -13px;
  border-radius: 8px;
}
.nav-link:hover { color: var(--c-nav-link-h); }
.nav-link.is-current { color: var(--c-nav-link-h); }
.nav-link:focus-visible {
  outline: 2px solid var(--c-champagne);
  outline-offset: 2px;
}
.nav-actions { display: flex; align-items: center; gap: 10px; }
.btn-nav { font-family: 'General Sans', sans-serif; font-size: 15px; font-weight: 600; color: #0F2410; background: #C9A961; padding: 9px 20px; border-radius: 30px; transition: 0.3s var(--ease-std); border: none; cursor: pointer; box-shadow: 0 2px 8px rgba(159,132,64,0.32); white-space: nowrap; }
.btn-nav:hover { filter: brightness(1.06); box-shadow: 0 4px 14px rgba(159,132,64,0.4); }

/* ============= THEME TOGGLE, sun / moon pill ============= */
.theme-toggle {
  position: relative;
  width: 56px; height: 30px;
  border-radius: 9999px;
  background: rgba(14, 20, 16, 0.08);
  border: 1px solid var(--c-nav-border);
  cursor: pointer; padding: 0;
  display: inline-flex; align-items: center;
  flex-shrink: 0;
  transition: background 0.3s var(--ease-std);
}
body.theme-dark .theme-toggle { background: rgba(247, 242, 233, 0.10); }
.theme-toggle .tt-puck {
  position: absolute;
  top: 3px; left: 3px;
  width: 24px; height: 24px;
  border-radius: 50%;
  background: var(--c-akhbr-green);
  color: var(--c-ivory);
  display: flex; align-items: center; justify-content: center;
  box-shadow:
    0 2px 6px rgba(14,20,16,0.18),
    0 1px 0 rgba(255,255,255,0.18) inset;
  transition: transform 0.35s var(--ease-std), background 0.3s var(--ease-std), color 0.3s var(--ease-std);
}
body.theme-dark .theme-toggle .tt-puck {
  transform: translateX(26px);
  background: var(--c-champagne);
  color: var(--c-deep-green);
}
.theme-toggle .tt-icon-bg {
  position: absolute;
  top: 0; bottom: 0;
  display: flex; align-items: center; justify-content: center;
  width: 30px;
  color: var(--c-fg-muted);
  pointer-events: none;
  transition: opacity 0.3s ease;
}
.theme-toggle .tt-sun  { right: 0; opacity: 1; }
.theme-toggle .tt-moon { left: 0; opacity: 0.35; }
body.theme-dark .theme-toggle .tt-sun  { opacity: 0.35; }
body.theme-dark .theme-toggle .tt-moon { opacity: 1; }
@media (max-width: 768px) {
  .theme-toggle { width: 48px; height: 28px; }
  .theme-toggle .tt-puck { width: 22px; height: 22px; top: 2px; left: 2px; }
  body.theme-dark .theme-toggle .tt-puck { transform: translateX(20px); }
  .theme-toggle .tt-icon-bg { width: 26px; }
}

/* ============= LANGUAGE TOGGLE, EN / ع pill ============= */
.lang-toggle {
  font-family: 'Mada', sans-serif;
  font-size: 13px; font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1;
  color: var(--c-akhbr-green);
  background: rgba(14, 20, 16, 0.08);
  border: 1px solid var(--c-nav-border);
  border-radius: 9999px;
  height: 30px; min-width: 38px;
  padding: 0 12px;
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  cursor: pointer;
  transition: background 0.3s var(--ease-std), color 0.3s var(--ease-std), box-shadow 0.3s var(--ease-std);
}
.lang-toggle:hover {
  color: var(--c-accent-text);
  background: rgba(14, 20, 16, 0.12);
  box-shadow: 0 2px 8px rgba(14, 20, 16, 0.08);
}
body.theme-dark .lang-toggle {
  color: var(--c-champagne);
  background: rgba(247, 242, 233, 0.10);
}
body.theme-dark .lang-toggle:hover {
  color: var(--c-ivory);
  background: rgba(247, 242, 233, 0.16);
}
@media (max-width: 768px) {
  .lang-toggle { height: 28px; min-width: 34px; padding: 0 10px; font-size: 12px; }
}

/* Touch hit areas (handoff Phase 3): on mobile/tablet the toggles and the
   hamburger keep their small VISUAL shape but gain an invisible centered
   overlay that guarantees a >= 44x44 tappable area. The overlay is a
   transparent ::before centered on the control via inset:50% + translate, so
   it expands symmetrically without shifting the visible pill. pointer-events
   stay on (the ::before forwards taps to its host button). */
@media (max-width: 920px) {
  .theme-toggle, .lang-toggle, .hamburger { position: relative; }
  .theme-toggle::before,
  .lang-toggle::before,
  .hamburger::before {
    content: "";
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 100%; height: 100%;
    min-width: var(--tap-min);
    min-height: var(--tap-min);
  }
}

/* ============================================================
   English typography. The site is Arabic-first, so almost every text element
   carries an explicit 'Mada' (the Arabic display face). In English we default
   everything to General Sans, then opt display headings/numerals/accents back
   into Fraunces, keep the terminal monospace, and keep the Arabic logo in Mada.
   The element-level selectors below are specificity (0,1,1), so they beat the
   bare class rules (0,1,0) site-wide, including inline homepage and page-local
   styles, regardless of source order. Scoped to html[lang="en"] so Arabic mode
   is never touched. */
/* 1. General Sans is the English default for every text-bearing element. */
html[lang="en"] body,
html[lang="en"] p, html[lang="en"] span, html[lang="en"] a,
html[lang="en"] li, html[lang="en"] button, html[lang="en"] label,
html[lang="en"] input, html[lang="en"] textarea, html[lang="en"] select,
html[lang="en"] h1, html[lang="en"] h2, html[lang="en"] h3,
html[lang="en"] h4, html[lang="en"] h5, html[lang="en"] h6,
html[lang="en"] div, html[lang="en"] strong, html[lang="en"] em,
html[lang="en"] figcaption, html[lang="en"] blockquote,
html[lang="en"] td, html[lang="en"] th, html[lang="en"] summary {
  font-family: 'General Sans', 'Mada', system-ui, sans-serif;
}
/* 2. Display headings, titles, numerals and accents use the brand serif
   (Fraunces). Listed after group 1 so they win on equal specificity. */
html[lang="en"] .headline-xl,
html[lang="en"] .headline-xl.is-uth,
html[lang="en"] .section-title,
html[lang="en"] .uth,
html[lang="en"] .about-mo-name,
html[lang="en"] .hero-close-mobile,
html[lang="en"] .hero-close-mobile .hcm-line,
html[lang="en"] .hero-close-mobile .hcm-accent,
html[lang="en"] .feature-title,
html[lang="en"] .price-name,
html[lang="en"] .member-name,
html[lang="en"] .course-card-title,
html[lang="en"] .uf-hero-h1,
html[lang="en"] .uf-card-title,
html[lang="en"] .stat-num,
html[lang="en"] .price-amount,
html[lang="en"] .course-card-no,
html[lang="en"] .uf-hero-en,
html[lang="en"] .uf-num,
html[lang="en"] .signature-role,
html[lang="en"] .step-num,
html[lang="en"] .stat-en {
  font-family: 'Fraunces', 'Mada', 'Times New Roman', serif;
}
/* 3. The terminal/code motif stays monospace in English. */
html[lang="en"] .terminal__title,
html[lang="en"] .terminal__body {
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
}
/* 4. The Arabic brand wordmark (the logo) stays in the Arabic face. */
html[lang="en"] .nav-wordmark { font-family: 'Mada', sans-serif; }
/* 5. A few elements get 'Mada' from higher-specificity (parent-scoped) rules;
   re-assert General Sans with matching depth so their Latin text reads right. */
html[lang="en"] .feature-card .feature-text,
html[lang="en"] .form-success .form-success-title,
html[lang="en"] .form-success .form-success-text,
html[lang="en"] .journey-rail .stop .label,
html[lang="en"] .fit-card .fit-name,
html[lang="en"] .fit-card .fit-why {
  font-family: 'General Sans', 'Mada', system-ui, sans-serif;
}
/* The base hero headings use white-space:nowrap (tuned for the short Arabic
   phrases). The English translations are longer, so in LTR they must wrap and
   balance instead of overflowing the viewport. Higher specificity than the
   inline .headline-xl rule, so this wins regardless of source order. */
html[lang="en"] .headline-xl,
html[lang="en"] .headline-xl.is-uth {
  white-space: normal;
  text-wrap: balance;
  overflow-wrap: break-word;
}
html[lang="en"] .headline-xl.is-uth {
  font-size: clamp(1.5rem, 4vw, 3.2rem);
  line-height: 1.2;
  max-width: 24ch;
  margin-inline: auto;
}

/* ============= HAMBURGER + MOBILE MENU ============= */
.hamburger { display: none; flex-direction: column; gap: 5px; padding: 8px; background: transparent; border: 0; cursor: pointer; }
.hamburger span { width: 22px; height: 2px; background: var(--c-akhbr-green); border-radius: 2px; transition: 0.3s var(--ease-std); display: block; }
.hamburger.active span:nth-child(1) { transform: rotate(45deg) translate(5px,5px); }
.hamburger.active span:nth-child(2) { opacity: 0; }
.hamburger.active span:nth-child(3) { transform: rotate(-45deg) translate(5px,-5px); }
.mobile-menu { display: none; flex-direction: column; align-items: center; gap: 16px; padding: 20px 0 12px; }
.mobile-menu.open { display: flex; }
/* Stacked menu links get a real >= 44px tap row: cancel the desktop nav-link
   negative margin (margin-block:0) and use upright padding instead. */
.mobile-menu .nav-link {
  font-size: 16px;
  padding-block: 11px; margin-block: 0;
  min-height: var(--tap-min);
  justify-content: center;
}
@media (max-width: 900px) {
  .nav-links { display: none; }
  .hamburger { display: flex; }
  .navbar { padding: 10px 20px; border-radius: 50px; }
  .nav-actions .btn-nav { display: none; }
  .mobile-menu.open .btn-nav { display: inline-flex; }
  /* Mobile menu reads as a near-OPAQUE sheet over any map frame (handoff
     Phase 3). Solid rgba fallback first, then the themed token at >= 0.97
     alpha, with the existing glass blur kept. The menu bleeds to the navbar
     inner edges (negative inline margins match the 20px navbar padding) and
     rounds its bottom corners so it sits flush under the rounded bar. */
  .mobile-menu.open {
    margin-inline: -20px;
    margin-top: 6px;
    padding: 18px 20px 16px;
    background: rgba(247, 242, 233, 0.98);
    background: color-mix(in srgb, var(--c-bg) 98%, transparent);
    -webkit-backdrop-filter: saturate(180%) blur(28px);
    backdrop-filter: saturate(180%) blur(28px);
    border-top: 1px solid var(--c-nav-border);
    border-radius: 0 0 28px 28px;
  }
  body.theme-dark .mobile-menu.open {
    background: rgba(15, 36, 16, 0.98);
    background: color-mix(in srgb, var(--c-bg) 98%, transparent);
  }
}

/* =====================================================================
   FIGMA CURSOR (follows pointer; label changes contextually)
   ===================================================================== */
html, body { cursor: none; }
a, button, [role="button"], input, textarea, select,
.btn-nav, .btn-press, .btn-press-green, .btn-ghost, .hamburger, .nav-link { cursor: none; }
@media (hover: none) and (pointer: coarse) {
  html, body, a, button, [role="button"], input, textarea, select,
  .btn-nav, .btn-press, .btn-press-green, .btn-ghost, .hamburger, .nav-link { cursor: auto; }
  .figma-cursor { display: none; }
}
body.theme-dark .figma-cursor svg path { fill: var(--c-champagne); stroke: var(--c-deep-green); }
body.theme-dark .figma-cursor .tag { background: var(--c-champagne); color: var(--c-deep-green); }
.figma-cursor {
  position: fixed; top: 0; left: 0;
  z-index: 10000;
  pointer-events: none;
  transform: translate3d(-200px, -200px, 0);
  will-change: transform;
  display: flex; flex-direction: column; align-items: flex-start;
  opacity: 0;
  transition: opacity 0.18s var(--ease-std);
  direction: ltr;
}
.figma-cursor.is-visible { opacity: 1; }
.figma-cursor .tag {
  margin-top: 2px; margin-inline-start: 18px;
  border-radius: 9999px;
  background: var(--c-akhbr-green);
  padding: 5px 12px;
  font-family: 'General Sans', sans-serif;
  font-size: 12px; font-weight: 600;
  color: var(--c-ivory);
  white-space: nowrap;
  box-shadow: 0 4px 14px rgba(14,20,16,0.22);
  letter-spacing: 0.01em;
  transition: background-color 0.2s var(--ease-std);
}
@media (hover: none) and (pointer: coarse) { .figma-cursor { display: none; } }

/* =====================================================================
   BUTTONS, Figma style (default base)
   ===================================================================== */
.btn-press, .btn-press-green, .btn-ghost {
  position: relative; display: inline-flex; align-items: center; gap: 10px;
  min-height: 56px; padding: 16px 32px;
  font-family: 'Mada', sans-serif; font-weight: 600; font-size: 15px;
  letter-spacing: 0.02em; border: none; border-radius: 9999px; cursor: pointer;
  transition: box-shadow 0.3s ease, transform 0.3s ease, background 0.3s ease, color 0.3s ease;
  white-space: normal; line-height: 1.3; text-align: center;
  justify-content: center;
}
.btn-press { color: #0F2410; background: #C9A961; box-shadow: #9F8440 0 8px 0 0; }
.btn-press:hover  { box-shadow: #9F8440 0 5px 0 0; transform: translateY(1px); }
.btn-press:active { box-shadow: #9F8440 0 0 0 0;  transform: translateY(8px); transition: 150ms; }
.btn-press-green { color: #F7F2E9; background: #1B3A1B; box-shadow: #0A1A0B 0 8px 0 0; }
.btn-press-green:hover  { box-shadow: #0A1A0B 0 5px 0 0; transform: translateY(1px); }
.btn-press-green:active { box-shadow: #0A1A0B 0 0 0 0;  transform: translateY(8px); transition: 150ms; }
.btn-press svg, .btn-press-green svg, .btn-ghost svg { transition: transform 0.3s ease; }
.btn-press:hover svg, .btn-press-green:hover svg, .btn-ghost:hover svg { transform: translateX(-5px); }

/* ghost button, transparent + bordered + theme aware */
.btn-ghost {
  color: var(--c-fg);
  background: var(--c-bg-soft);
  border: 1.5px solid rgba(159,132,64,0.45);
  box-shadow: 0 8px 22px -14px rgba(14,20,16,0.4);
}
.btn-ghost:hover {
  background: rgba(201,169,97,0.14);
  border-color: rgba(159,132,64,0.75);
  transform: translateY(-1px);
}
.btn-ghost:active { transform: translateY(0); }
body.theme-dark .btn-ghost { color: var(--c-ivory); background: rgba(247,242,233,0.08); border-color: rgba(201,169,97,0.42); }
body.theme-dark .btn-ghost:hover { background: rgba(247,242,233,0.14); border-color: rgba(201,169,97,0.65); }

/* small size modifier */
.btn-sm {
  min-height: 44px;
  padding: 11px 22px;
  font-size: 14px;
  gap: 8px;
}

/* ============= BUTTONS, Apple style glass override ============= */
body.style-apple .btn-press,
body.style-apple .btn-press-green {
  box-shadow:
    0 1px 0 rgba(255,255,255,0.35) inset,
    0 -1px 0 rgba(14,20,16,0.06) inset,
    0 12px 30px -10px rgba(14,20,16,0.25),
    0 2px 8px rgba(14,20,16,0.08);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  border: 1px solid rgba(14,20,16,0.06);
  transform: none;
}
body.style-apple .btn-press {
  background: rgba(201, 169, 97, 0.78);
  color: #0F2410;
}
body.style-apple .btn-press:hover {
  background: rgba(201, 169, 97, 0.92);
  transform: translateY(-1px);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.4) inset,
    0 -1px 0 rgba(14,20,16,0.06) inset,
    0 16px 36px -10px rgba(14,20,16,0.32),
    0 4px 12px rgba(14,20,16,0.1);
}
body.style-apple .btn-press:active { transform: translateY(0); }
body.style-apple .btn-press-green {
  background: rgba(27, 58, 27, 0.78);
  color: var(--c-ivory);
  border-color: rgba(247,242,233,0.08);
}
body.style-apple .btn-press-green:hover {
  background: rgba(27, 58, 27, 0.92);
  transform: translateY(-1px);
}
body.style-apple .btn-press-green:active { transform: translateY(0); }
body.theme-dark.style-apple .btn-press { background: rgba(201,169,97,0.65); }
body.theme-dark.style-apple .btn-press-green { background: rgba(247,242,233,0.10); color: var(--c-ivory); border-color: rgba(247,242,233,0.18); }
body.theme-dark.style-apple .btn-press-green:hover { background: rgba(247,242,233,0.16); }

/* =====================================================================
   LAYOUT PRIMITIVES
   ===================================================================== */
.akhbr-container {
  width: 100%;
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: clamp(20px, 5vw, 48px);
}
/* =====================================================================
   MAP VIDEO BACKGROUND (shared, behind all content on every page)
   Fixed full bleed live MENA map at z-index 0. Content layers (sections,
   subhero, footer) sit at z-index 1 so they paint above it, while the
   transparent gaps reveal the map. Top and bottom scrims fade the map
   into the page background, theme aware via the --scrim-* vars. The
   scroll driven play/pause lives in akhbr.js.
   ===================================================================== */
.map-video-bg { position: fixed; inset: 0; z-index: 0; pointer-events: none; }
.map-video-bg video,
.map-video-bg .fallback { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* The MENA framing/zoom is baked into the video file, so render it 1:1 (cover). */
.map-video-bg video { transition: filter 0.5s var(--ease-std); }
.map-video-bg .fallback {
  background:
    radial-gradient(60% 50% at 58% 52%, rgba(27,58,27,0.10) 0%, rgba(27,58,27,0) 60%),
    radial-gradient(40% 30% at 40% 60%, rgba(201,169,97,0.12) 0%, rgba(201,169,97,0) 60%),
    var(--c-bg);
}
.map-video-bg::before,
.map-video-bg::after { content: ''; position: absolute; left: 0; right: 0; pointer-events: none; }
.map-video-bg::before { top: 0; height: 240px; background: linear-gradient(to bottom, var(--scrim-top) 0%, var(--scrim-top-mid) 40%, var(--scrim-top-end) 100%); }
.map-video-bg::after { bottom: 0; height: 280px; background: linear-gradient(to top, var(--scrim-bot) 0%, var(--scrim-bot-mid) 40%, var(--scrim-bot-end) 100%); }
body.theme-dark .map-video-bg video { filter: brightness(0.85) saturate(0.85); }

/* Legibility halo: any bare text sitting directly over the live map gets a
   soft glow in the page background color (ivory in light, deep green in
   dark) so it separates cleanly from the moving map. Section headings and
   eyebrows are always bare (never inside cards), so this is safe globally;
   on solid backgrounds the glow is the same color as the bg, so invisible.
   Use .text-on-video for any other loose text over the map. */
.text-on-video,
.section-head .eyebrow,
.section-head .section-sub,
.subhero .eyebrow,
.subhero .section-sub {
  /* dense halo: tight repeated layers build a near solid backing of the
     page color hugging the glyphs, so even small muted text reads over
     the busy map without a hard panel. */
  text-shadow:
    0 0 3px var(--c-bg), 0 0 3px var(--c-bg), 0 0 6px var(--c-bg),
    0 0 6px var(--c-bg), 0 0 14px var(--c-bg), 0 0 14px var(--c-bg),
    0 0 28px var(--c-bg), 0 0 48px var(--c-bg);
}
body.theme-dark .text-on-video,
body.theme-dark .section-head .eyebrow,
body.theme-dark .section-head .section-sub,
body.theme-dark .subhero .eyebrow,
body.theme-dark .subhero .section-sub {
  text-shadow:
    0 0 3px var(--c-bg), 0 0 3px var(--c-bg), 0 0 6px var(--c-bg),
    0 0 6px var(--c-bg), 0 0 14px var(--c-bg), 0 0 14px var(--c-bg),
    0 0 28px var(--c-bg), 0 0 48px var(--c-bg), 0 2px 10px rgba(0,0,0,0.55);
}

/* =====================================================================
   READABILITY SURFACES OVER THE LIVE MAP (handoff Phase 1)
   The single source of truth for the section-surface contract. Every
   readability fix for dense copy over the moving map happens HERE so the
   behavior stays consistent across subpages (a parallel worker mirrors
   this identical block inline in index.html, so the two MUST match).
   Each color-mix carries an rgba() fallback line BEFORE it for browsers
   without color-mix support. Surfaces are z-index 1 (never 0/negative)
   so they paint ABOVE the fixed map video, never behind it.
   ===================================================================== */
.section-surface {
  position: relative;
  z-index: 1;
  background: rgba(247, 242, 233, 0.965);
  background: color-mix(in srgb, var(--c-bg) 96%, transparent);
  border-block: 1px solid var(--c-nav-border);
}
body.theme-dark .section-surface {
  background: rgba(15, 36, 16, 0.965);
  background: color-mix(in srgb, var(--c-bg) 96%, transparent);
}
.section-surface-soft {
  background: rgba(251, 248, 241, 0.965);
  background: color-mix(in srgb, var(--c-bg-soft) 96%, transparent);
}
body.theme-dark .section-surface-soft {
  background: rgba(20, 40, 26, 0.965);
  background: color-mix(in srgb, var(--c-bg-soft) 96%, transparent);
}
.section-surface-dark {
  position: relative;
  z-index: 1;
  background: var(--c-obsidian);
  color: var(--c-ivory);
  border-block: 1px solid rgba(201, 169, 97, 0.18);
}
.section-surface-transparent-top {
  background: linear-gradient(to bottom, transparent 0%, var(--c-bg) 14%, var(--c-bg) 100%);
}
body.theme-dark .section-surface-transparent-top {
  background: linear-gradient(to bottom, transparent 0%, var(--c-bg) 14%, var(--c-bg) 100%);
}
.readable-over-map { position: relative; isolation: isolate; }
.readable-over-map::before {
  content: "";
  position: absolute;
  inset: -0.7em -1em;
  z-index: -1;
  border-radius: 16px;
  background: rgba(247, 242, 233, 0.88);
  background: color-mix(in srgb, var(--c-bg) 88%, transparent);
}
body.theme-dark .readable-over-map::before {
  background: rgba(15, 36, 16, 0.88);
  background: color-mix(in srgb, var(--c-bg) 88%, transparent);
}

.akhbr-section {
  position: relative;
  z-index: 1;
  padding-block: clamp(64px, 11vh, 140px);
}
.akhbr-section.is-tight { padding-block: clamp(40px, 7vh, 88px); }

.section-head {
  display: flex; flex-direction: column; align-items: center;
  text-align: center;
  gap: clamp(10px, 1.6vh, 18px);
  max-width: 760px;
  margin-inline: auto;
  margin-bottom: clamp(40px, 6vh, 72px);
  position: relative;
  isolation: isolate;
}
.section-head.is-start { align-items: flex-start; text-align: start; margin-inline: 0; }
/* Readability backing behind the heading block so even small muted sub
   text reads clearly over the live map. NOT a box: a soft, borderless,
   feathered white cloud (no hard edge, no border, no shadow, no blur
   panel) that reads as a diffuse glow. isolation on .section-head keeps
   this ::before safe at z-index:-1. */
.section-head::before {
  /* Intentionally disabled (handoff Phase 1, task 5). No decorative cloud or
     blob backing by design: headings rely on the hero white halo (text-shadow
     above) for a consistent hero-like look, and dense sections get readability
     from the .section-surface bands instead. Do NOT re-add a blob here. */
  content: none;
}
body.theme-dark .section-head::before {
  background: radial-gradient(ellipse 78% 125% at 50% 45%,
    rgba(8, 20, 9, 0.92) 0%,
    rgba(8, 20, 9, 0.76) 40%,
    rgba(8, 20, 9, 0.45) 62%,
    rgba(8, 20, 9, 0) 82%);
}
@media (max-width: 540px) {
  .section-head::before { inset-inline: clamp(-16px, -5vw, -28px); }
}

/* Reusable soft cloud for any floating text element (e.g. a value line).
   Same feathered, borderless recipe as the section head backing. */
.cloud-bg { position: relative; isolation: isolate; }
.cloud-bg::before {
  /* Intentionally disabled (handoff Phase 1, task 5). No decorative cloud by
     design: loose text uses the hero-style halo on the glyphs themselves, and
     bands (.section-surface) cover dense areas. For a local readable backing
     on floating text, use .readable-over-map instead of re-adding a blob. */
  content: none;
}
body.theme-dark .cloud-bg::before {
  background: radial-gradient(ellipse 78% 125% at 50% 45%,
    rgba(8, 20, 9, 0.92) 0%,
    rgba(8, 20, 9, 0.76) 40%,
    rgba(8, 20, 9, 0.45) 62%,
    rgba(8, 20, 9, 0) 82%);
}

.eyebrow {
  font-family: 'General Sans', sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  font-size: 12px;
  font-weight: 600;
  color: var(--c-fg-muted);
  direction: ltr;
  display: inline-block;
}
/* eyebrow can also read RTL Arabic when needed */
.eyebrow.is-rtl { direction: rtl; letter-spacing: 0.04em; }

.section-title {
  font-family: 'Mada', sans-serif;
  font-weight: 900;
  color: var(--c-fg);
  font-size: clamp(1.9rem, 5vw, 3.4rem);
  line-height: 1.1;
  letter-spacing: -0.018em;
  margin: 0;
  /* Soft white halo, identical to the hero headline, so every heading reads
     cleanly over the live map with no panel or cloud behind it. */
  text-shadow:
    0 0 24px var(--c-bg),
    0 0 48px var(--c-bg),
    0 0 80px rgba(247, 242, 233, 0.85),
    0 2px 6px rgba(14, 20, 16, 0.08);
}
.section-title .uth {
  font-family: 'UthmanTaha', 'General Sans', serif;
  font-weight: 400;
  color: var(--c-champagne-deep);
  letter-spacing: 0;
  font-size: 1.05em;
  padding-inline: 0.08em;
  vertical-align: -0.04em;
}
body.theme-dark .section-title {
  color: var(--c-ivory);
  text-shadow:
    0 0 24px var(--c-deep-green),
    0 0 48px var(--c-deep-green),
    0 0 80px rgba(15, 36, 16, 0.85),
    0 2px 8px rgba(0, 0, 0, 0.4);
}
body.theme-dark .section-title .uth { color: var(--c-champagne); }

.section-sub {
  font-family: 'Mada', sans-serif;
  font-weight: 500;
  color: var(--c-fg-muted);
  font-size: clamp(1.05rem, 1.5vw, 1.22rem);
  line-height: 1.6;
  max-width: 560px;
  margin: 0 auto;
}
.section-head.is-start .section-sub { margin-inline: 0; }

/* =====================================================================
   SURFACES + CARDS
   ===================================================================== */
.card {
  position: relative;
  background: var(--c-bg-soft);
  border: 1px solid var(--c-nav-border);
  border-radius: var(--card-radius);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.35) inset,
    0 12px 32px -16px rgba(14,20,16,0.18),
    0 2px 8px rgba(14,20,16,0.05);
  transition: transform 0.35s var(--ease-std), box-shadow 0.35s var(--ease-std), border-color 0.35s var(--ease-std);
}
.card:hover {
  transform: translateY(-4px);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.4) inset,
    0 20px 44px -16px rgba(14,20,16,0.26),
    0 4px 14px rgba(14,20,16,0.08);
}
body.theme-dark .card {
  box-shadow:
    0 1px 0 rgba(247,242,233,0.05) inset,
    0 12px 32px -16px rgba(0,0,0,0.55),
    0 2px 8px rgba(0,0,0,0.3);
}
body.theme-dark .card:hover {
  box-shadow:
    0 1px 0 rgba(247,242,233,0.07) inset,
    0 20px 48px -16px rgba(0,0,0,0.6),
    0 4px 14px rgba(0,0,0,0.35);
}
.card-pad { padding: clamp(20px, 3vw, 32px); }

/* ---------- course card ---------- */
.course-card {
  display: flex; flex-direction: column;
  background: var(--c-bg-soft);
  border: 1px solid var(--c-nav-border);
  border-radius: var(--card-radius);
  overflow: hidden;
  transition: transform 0.35s var(--ease-std), box-shadow 0.35s var(--ease-std), border-color 0.35s var(--ease-std);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.35) inset,
    0 12px 32px -16px rgba(14,20,16,0.16),
    0 2px 8px rgba(14,20,16,0.05);
}
.course-card:hover {
  transform: translateY(-6px);
  border-color: rgba(201,169,97,0.55);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.4) inset,
    0 22px 50px -18px rgba(14,20,16,0.28),
    0 0 0 1px rgba(201,169,97,0.25),
    0 4px 14px rgba(159,132,64,0.18);
}
body.theme-dark .course-card {
  box-shadow:
    0 1px 0 rgba(247,242,233,0.05) inset,
    0 12px 32px -16px rgba(0,0,0,0.55),
    0 2px 8px rgba(0,0,0,0.3);
}
body.theme-dark .course-card:hover {
  border-color: rgba(201,169,97,0.6);
  box-shadow:
    0 1px 0 rgba(247,242,233,0.07) inset,
    0 22px 54px -18px rgba(0,0,0,0.6),
    0 0 0 1px rgba(201,169,97,0.4),
    0 4px 16px rgba(201,169,97,0.25);
}
/* ---------- course card media: designed numbered tile ----------
   The 14 course PNGs do not exist, so the DEFAULT state of .course-card-media
   (no <img>) must look intentional and premium, not like an empty box (handoff
   Phase 4). It is a designed numbered tile: a brand gradient, a subtle layered
   pattern (fine champagne hairlines + corner glow + an embossed ring), and a
   large elegant Fraunces numeral. A fixed 4/3 aspect ratio keeps the grid even.
   Phase accent variants below (.course-card[data-phase="1".."4"]) keep the 14
   cards from looking identical; the base treatment here is the sensible default
   when no data-phase is present, so a card looks finished regardless. */
.course-card-media {
  position: relative;
  aspect-ratio: 4 / 3;
  width: 100%;
  overflow: hidden;
  background:
    /* soft warm glow in the upper start corner */
    radial-gradient(125% 100% at 78% 16%, rgba(201,169,97,0.26) 0%, rgba(201,169,97,0) 58%),
    /* fine champagne hairline grid, low-key texture (no blobs) */
    repeating-linear-gradient(45deg, rgba(201,169,97,0.06) 0 1px, transparent 1px 22px),
    repeating-linear-gradient(-45deg, rgba(201,169,97,0.05) 0 1px, transparent 1px 22px),
    /* base brand gradient */
    linear-gradient(150deg, var(--c-akhbr-green) 0%, var(--c-deep-green) 100%);
  display: flex; align-items: center; justify-content: center;
}
/* embossed inner ring + hairline frame for a finished, designed edge */
.course-card-media::after {
  content: '';
  position: absolute; inset: 0;
  z-index: 1;
  pointer-events: none;
  border: 1px solid rgba(201,169,97,0.16);
  box-shadow:
    0 1px 0 rgba(247,242,233,0.06) inset,
    0 -40px 60px -30px rgba(14,20,16,0.55) inset;
}
.course-card-media.is-square { aspect-ratio: 1 / 1; }
/* If a raster image is ever supplied it covers the tile; the .no-img class
   (added by a legacy onerror handler) is harmless because the designed tile
   IS the default look already. */
.course-card-media img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: 1;
  transition: transform 0.5s var(--ease-std);
}
.course-card:hover .course-card-media img { transform: scale(1.04); }
/* The large elegant numeral, the centerpiece of the tile. Strong champagne on
   the dark brand ground (high contrast), with a soft depth shadow + crisp top
   highlight so it reads as engraved metal rather than flat text. Sits above the
   ::after frame. Subtle lift on hover. */
.course-card-media .course-card-no {
  position: relative;
  z-index: 2;
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-weight: 600;
  font-size: clamp(3.6rem, 9vw, 5.6rem);
  line-height: 1;
  color: var(--c-champagne);
  letter-spacing: -0.01em;
  text-shadow:
    0 1px 0 rgba(247,242,233,0.18),
    0 2px 22px rgba(14,20,16,0.55),
    0 0 48px rgba(201,169,97,0.28);
  transition: transform 0.45s var(--ease-std);
}
.course-card:hover .course-card-media .course-card-no { transform: translateY(-2px) scale(1.03); }

/* ---- Phase accent variants (handoff Phase 4) ----
   The index.html worker adds data-phase="1".."4" to each .course-card; these
   four treatments vary the tile ground and numeral so the 14 cards are not
   identical. P1 champagne-forward, P2 deep green, P3 obsidian, P4 gold-on-green.
   The default (no data-phase) keeps the base green tile above. */
.course-card[data-phase="1"] .course-card-media {
  background:
    radial-gradient(125% 100% at 78% 16%, rgba(201,169,97,0.42) 0%, rgba(201,169,97,0) 60%),
    repeating-linear-gradient(45deg, rgba(247,242,233,0.05) 0 1px, transparent 1px 22px),
    linear-gradient(150deg, var(--c-champagne-deep) 0%, var(--c-akhbr-green) 100%);
}
.course-card[data-phase="1"] .course-card-media .course-card-no { color: var(--c-ivory); }

.course-card[data-phase="2"] .course-card-media {
  background:
    radial-gradient(125% 100% at 78% 16%, rgba(201,169,97,0.20) 0%, rgba(201,169,97,0) 58%),
    repeating-linear-gradient(-45deg, rgba(201,169,97,0.05) 0 1px, transparent 1px 22px),
    linear-gradient(150deg, var(--c-akhbr-green) 0%, #081A09 100%);
}
.course-card[data-phase="2"] .course-card-media .course-card-no { color: var(--c-champagne); }

.course-card[data-phase="3"] .course-card-media {
  background:
    radial-gradient(125% 100% at 78% 16%, rgba(201,169,97,0.18) 0%, rgba(201,169,97,0) 56%),
    repeating-linear-gradient(45deg, rgba(201,169,97,0.05) 0 1px, transparent 1px 24px),
    linear-gradient(150deg, #1A211B 0%, var(--c-obsidian) 100%);
}
.course-card[data-phase="3"] .course-card-media .course-card-no { color: var(--c-champagne); }

.course-card[data-phase="4"] .course-card-media {
  background:
    radial-gradient(125% 110% at 78% 14%, rgba(201,169,97,0.34) 0%, rgba(201,169,97,0) 60%),
    repeating-linear-gradient(45deg, rgba(201,169,97,0.08) 0 1px, transparent 1px 20px),
    repeating-linear-gradient(-45deg, rgba(201,169,97,0.06) 0 1px, transparent 1px 20px),
    linear-gradient(150deg, var(--c-deep-green) 0%, #0A1F0C 100%);
}
.course-card[data-phase="4"] .course-card-media .course-card-no {
  color: var(--c-champagne);
  text-shadow:
    0 1px 0 rgba(247,242,233,0.22),
    0 2px 22px rgba(14,20,16,0.55),
    0 0 56px rgba(201,169,97,0.42);
}

.course-card-phase {
  position: absolute; top: 12px; inset-inline-start: 12px;
  z-index: 3;
  font-family: 'General Sans', sans-serif;
  font-size: 12px; font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--c-deep-green);
  background: var(--c-champagne);
  padding: 4px 10px;
  border-radius: 9999px;
  box-shadow: 0 2px 8px rgba(159,132,64,0.35);
}
.course-card-body { padding: clamp(16px, 2.4vw, 22px); display: flex; flex-direction: column; gap: 8px; }
.course-card-no {
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-weight: 500;
  font-size: 1.4rem;
  color: var(--c-accent-text);
  line-height: 1;
}
body.theme-dark .course-card-no { color: var(--c-champagne); }
.course-card-title {
  font-family: 'Mada', sans-serif;
  font-weight: 700;
  font-size: clamp(1.05rem, 1.6vw, 1.25rem);
  line-height: 1.3;
  color: var(--c-fg);
}
.course-card-meta {
  font-family: 'Mada', sans-serif;
  font-weight: 500;
  font-size: 0.9rem;
  color: var(--c-fg-muted);
  display: flex; align-items: center; gap: 6px;
}
.course-card-meta::before {
  content: '';
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--c-rail-dot);
  flex-shrink: 0;
}

/* ---------- feature card ---------- */
.feature-card {
  display: flex; flex-direction: column; gap: 14px;
  padding: clamp(22px, 3vw, 32px);
  background: var(--c-bg-soft);
  border: 1px solid var(--c-nav-border);
  border-radius: var(--card-radius);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.35) inset,
    0 12px 32px -16px rgba(14,20,16,0.14),
    0 2px 8px rgba(14,20,16,0.04);
  transition: transform 0.35s var(--ease-std), box-shadow 0.35s var(--ease-std), border-color 0.35s var(--ease-std);
}
.feature-card:hover {
  transform: translateY(-4px);
  border-color: rgba(201,169,97,0.4);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.4) inset,
    0 20px 44px -16px rgba(14,20,16,0.24),
    0 4px 14px rgba(159,132,64,0.14);
}
body.theme-dark .feature-card {
  box-shadow:
    0 1px 0 rgba(247,242,233,0.05) inset,
    0 12px 32px -16px rgba(0,0,0,0.5),
    0 2px 8px rgba(0,0,0,0.28);
}
.feature-card .feature-icon {
  width: 52px; height: 52px;
  border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  background:
    linear-gradient(150deg, rgba(201,169,97,0.18) 0%, rgba(201,169,97,0.06) 100%);
  border: 1px solid rgba(201,169,97,0.28);
  color: var(--c-champagne-deep);
  flex-shrink: 0;
}
body.theme-dark .feature-card .feature-icon { color: var(--c-champagne); }
.feature-card .feature-icon svg { width: 26px; height: 26px; }
.feature-card .feature-title {
  font-family: 'Mada', sans-serif;
  font-weight: 700;
  font-size: clamp(1.05rem, 1.6vw, 1.25rem);
  color: var(--c-fg);
  line-height: 1.3;
}
.feature-card .feature-text {
  font-family: 'Mada', sans-serif;
  font-weight: 500;
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--c-fg-muted);
}

/* ---------- reusable initials avatar (handoff Phase 4) ----------
   A self-contained, theme-aware fallback for a missing member photo (e.g.
   the missing team-heikal.jpg on about.html). It mirrors the look of the
   existing photo/initials avatars on about.html (.team-member .member-avatar:
   a 92px circle, brand green gradient ground, champagne Fraunces initials) but
   carries ALL its styling here so it is reusable without the inline rule. Drop
   it on a div holding the initials, e.g. <div class="member-avatar-initials"
   aria-hidden="true">خ ه</div>. Works in light and dark (the ground is brand
   green in both, like the existing avatars). NOTE: 92px matches the RENDERED
   avatar size on about.html; the 264px on the <img> tags is only the source
   raster dimension, not the on-screen circle. */
.member-avatar-initials {
  width: 92px; height: 92px;
  border-radius: 50%;
  display: grid; place-items: center;
  margin: 0 auto clamp(10px, 1.6vh, 16px);
  background: linear-gradient(150deg, var(--c-akhbr-green), var(--c-deep-green));
  border: 1px solid rgba(201, 169, 97, 0.5);
  color: var(--c-champagne);
  font-family: 'Fraunces', serif; font-weight: 600;
  font-size: 1.7rem; line-height: 1;
  letter-spacing: 0.02em;
  overflow: hidden;
  -webkit-user-select: none; user-select: none;
}

/* =====================================================================
   GRIDS
   ===================================================================== */
.grid { display: grid; gap: clamp(16px, 2.4vw, 28px); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) {
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
}

/* =====================================================================
   VALUE STACK / TERMINAL CARD (code-card)
   Copied from index.html so the reveal-driven morph still works, plus
   an .is-static variant for pages that do not script the morph.
   ===================================================================== */
.code-card {
  background-color: #0E1410;
  border: 1px solid rgba(201,169,97,0.18);
  border-radius: 20px;
  box-shadow:
    0 24px 60px -20px rgba(14,20,16,0.55),
    0 6px 18px rgba(14,20,16,0.18);
  overflow: hidden;
  width: 100%;
  max-width: 580px;
  margin: 0 auto;
  /* Stage 0, a thin horizontal pill (60x12px) pinned to card center. */
  clip-path: inset(calc(50% - 6px) calc(50% - 30px) calc(50% - 6px) calc(50% - 30px) round 9999px);
  transition: clip-path 1.05s cubic-bezier(0.65, 0, 0.35, 1);
  will-change: clip-path;
}
/* Stage 1, pill stretches into the header bar (about 280x56px, top aligned). */
.code-card.stage-1 {
  clip-path: inset(0 calc(50% - 140px) calc(100% - 56px) calc(50% - 140px) round 28px);
}
/* Stages 2+, the full card is revealed. */
.code-card.stage-2,
.code-card.stage-3,
.code-card.stage-4 {
  clip-path: inset(0 0 0 0 round 20px);
}
/* Static variant, renders fully open with all lines visible (no morph). */
.code-card.is-static {
  clip-path: inset(0 0 0 0 round 20px);
  transition: none;
  will-change: auto;
}
.code-card.is-static .code-card-line {
  opacity: 1;
  transform: none;
  transition: none;
}

.code-card-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 22px;
  border-bottom: 1px solid rgba(201,169,97,0.14);
  direction: ltr;
}
.code-card-title {
  font-family: 'General Sans', sans-serif;
  font-weight: 700; font-size: 12px;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: rgba(247,242,233,0.6);
}
.code-card-dots { display: flex; gap: 7px; }
.code-card-dots span { width: 11px; height: 11px; border-radius: 50%; display: block; }
.code-card-dots span:nth-child(1) { background: #ff5f57; }
.code-card-dots span:nth-child(2) { background: #ffbd2e; }
.code-card-dots span:nth-child(3) { background: #28ca42; }
.code-card-body {
  padding: 10px 22px 20px;
  direction: rtl;
}
.code-card-line {
  display: flex; justify-content: space-between; align-items: center;
  padding: 14px 4px;
  border-bottom: 1px solid rgba(247,242,233,0.06);
  font-family: 'UthmanTaha', 'General Sans', serif;
  font-size: 17px;
  opacity: 0;
  transform: translateY(10px);
  transition:
    opacity 0.55s var(--ease-reveal),
    transform 0.55s var(--ease-reveal);
}
.code-card.stage-3 .code-card-line,
.code-card.stage-4 .code-card-line {
  opacity: 1;
  transform: translateY(0);
  transition-delay: calc(var(--i, 0) * 110ms);
}
.code-card-line:last-child { border-bottom: none; }
.code-line-num {
  font-family: 'General Sans', sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: rgba(247,242,233,0.55);
  width: 28px; text-align: center;
  margin-inline-end: 14px; flex-shrink: 0;
  direction: ltr;
}
.code-line-text { color: rgba(247,242,233,0.78); flex: 1; text-align: start; }
.code-line-value {
  font-family: 'General Sans', sans-serif; font-weight: 600;
  color: #C9A961;
  font-variant-numeric: tabular-nums; white-space: nowrap;
  font-size: 15px;
  direction: ltr;
}
.code-card-line.code-total {
  background: rgba(201,169,97,0.08);
  border: 1px solid rgba(201,169,97,0.16);
  border-radius: 14px;
  padding: 18px 14px;
  margin-top: 12px;
}
.code-total .code-line-text { color: #F7F2E9; font-weight: 600; }
.code-total .code-line-value { font-size: 20px; color: #C9A961; }
.code-total .code-line-num { color: #C9A961; font-size: 15px; }
.code-card.stage-4 .code-card-line.code-total {
  animation: code-total-pulse 1.6s var(--ease-std);
}
@keyframes code-total-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(201,169,97,0); background: rgba(201,169,97,0.08); }
  35%  { box-shadow: 0 0 0 14px rgba(201,169,97,0); background: rgba(201,169,97,0.22); }
  100% { box-shadow: 0 0 0 0 rgba(201,169,97,0); background: rgba(201,169,97,0.08); }
}
@media (max-width: 540px) {
  .code-card { max-width: 100%; }
  .code-card.stage-1 {
    clip-path: inset(0 calc(50% - 120px) calc(100% - 52px) calc(50% - 120px) round 26px);
  }
  .code-card-header { padding: 12px 18px; }
  .code-card-body   { padding: 8px 16px 16px; }
  .code-card-line   { font-size: 15.5px; padding: 12px 2px; }
  .code-line-value  { font-size: 13.5px; }
  .code-total .code-line-value { font-size: 17px; }
}

/* =====================================================================
   PRICING
   ===================================================================== */
.pricing-grid {
  display: grid;
  gap: clamp(18px, 2.6vw, 28px);
  grid-template-columns: repeat(3, 1fr);
  align-items: stretch;
}
@media (max-width: 900px) { .pricing-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .pricing-grid { grid-template-columns: 1fr; } }

.price-card {
  position: relative;
  display: flex; flex-direction: column;
  background: var(--c-bg-soft);
  border: 1px solid var(--c-nav-border);
  border-radius: 22px;
  padding: clamp(24px, 3vw, 36px);
  transition: transform 0.35s var(--ease-std), box-shadow 0.35s var(--ease-std), border-color 0.35s var(--ease-std);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.35) inset,
    0 12px 32px -16px rgba(14,20,16,0.16),
    0 2px 8px rgba(14,20,16,0.05);
}
.price-card:hover {
  transform: translateY(-4px);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.4) inset,
    0 20px 46px -16px rgba(14,20,16,0.26),
    0 4px 14px rgba(14,20,16,0.08);
}
body.theme-dark .price-card {
  box-shadow:
    0 1px 0 rgba(247,242,233,0.05) inset,
    0 12px 32px -16px rgba(0,0,0,0.55),
    0 2px 8px rgba(0,0,0,0.3);
}
/* featured card, champagne ring + lift */
.price-card.is-featured {
  border-color: rgba(201,169,97,0.7);
  box-shadow:
    0 0 0 2px rgba(201,169,97,0.45),
    0 1px 0 rgba(255,255,255,0.4) inset,
    0 24px 54px -18px rgba(159,132,64,0.4),
    0 4px 16px rgba(159,132,64,0.18);
  transform: translateY(-6px);
}
body.theme-dark .price-card.is-featured {
  box-shadow:
    0 0 0 2px rgba(201,169,97,0.6),
    0 1px 0 rgba(247,242,233,0.07) inset,
    0 24px 58px -18px rgba(0,0,0,0.6),
    0 4px 18px rgba(201,169,97,0.3);
}
/* "الأكثر اختياراً" ribbon, set text via [data-ribbon] or the .price-ribbon span */
.price-ribbon,
.price-card.is-featured::before {
  position: absolute;
  top: -13px; inset-inline: 0;
  margin-inline: auto; width: max-content;
  font-family: 'General Sans', sans-serif;
  font-size: 12px; font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--c-deep-green);
  background: var(--c-champagne);
  padding: 5px 16px;
  border-radius: 9999px;
  white-space: nowrap;
  box-shadow: 0 4px 12px rgba(159,132,64,0.4);
  z-index: 2;
}
/* CSS fallback ribbon when the page does not add a .price-ribbon span */
.price-card.is-featured::before {
  content: attr(data-ribbon);
}
.price-card.is-featured:not([data-ribbon])::before { content: 'الأكثر اختياراً'; }
/* if an explicit .price-ribbon element exists, hide the pseudo to avoid doubling */
.price-card.is-featured:has(.price-ribbon)::before { content: none; }

.price-head {
  display: flex; flex-direction: column; gap: 6px;
  padding-bottom: clamp(16px, 2vw, 22px);
  margin-bottom: clamp(16px, 2vw, 22px);
  border-bottom: 1px solid var(--c-nav-border);
}
.price-name {
  font-family: 'Mada', sans-serif;
  font-weight: 700;
  font-size: 1.15rem;
  color: var(--c-fg);
}
.price-amount {
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-weight: 600;
  font-size: clamp(2.2rem, 5vw, 3rem);
  line-height: 1;
  color: var(--c-champagne-deep);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}
body.theme-dark .price-amount { color: var(--c-champagne); }
.price-period {
  font-family: 'Mada', sans-serif;
  font-weight: 500;
  font-size: 0.9rem;
  color: var(--c-fg-muted);
}
.price-note {
  font-family: 'Mada', sans-serif;
  font-weight: 500;
  font-size: 0.9rem;
  color: var(--c-fg-muted);
  line-height: 1.5;
}
.price-list {
  display: flex; flex-direction: column; gap: 12px;
  margin-bottom: clamp(20px, 3vw, 28px);
  flex: 1;
}
.price-list li {
  position: relative;
  display: flex; align-items: flex-start; gap: 10px;
  font-family: 'Mada', sans-serif;
  font-weight: 500;
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--c-fg);
}
.price-list li::before {
  content: '';
  flex-shrink: 0;
  width: 18px; height: 18px;
  margin-top: 2px;
  border-radius: 50%;
  background:
    var(--c-champagne)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%230F2410' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E")
    center / 12px no-repeat;
}
.price-list li.is-muted { color: var(--c-fg-muted); }
.price-list li.is-off::before {
  background: var(--c-nav-border);
  background-image: none;
}
.price-cta { margin-top: auto; display: flex; }
.price-cta > * { width: 100%; }

/* =====================================================================
   CURRENCY TOGGLE + TIERED PRICING (Waiting List / Release / Official)
   International (USD) is the default; Egypt (EGP) is one tap away.
   ===================================================================== */
.currency-toggle-wrap {
  display: flex;
  justify-content: center;
  margin-bottom: clamp(28px, 4vh, 44px);
}
.currency-toggle {
  display: inline-flex;
  gap: 4px;
  padding: 5px;
  background: var(--c-bg-soft);
  border: 1px solid var(--c-nav-border);
  border-radius: 9999px;
  box-shadow: 0 2px 12px -4px rgba(14,20,16,0.12), 0 1px 0 rgba(255,255,255,0.4) inset;
}
body.theme-dark .currency-toggle {
  box-shadow: 0 2px 12px -4px rgba(0,0,0,0.5), 0 1px 0 rgba(247,242,233,0.05) inset;
}
.currency-btn {
  font-family: 'Mada', sans-serif;
  font-weight: 600;
  font-size: 0.95rem;
  line-height: 1;
  color: var(--c-fg);
  background: transparent;
  border: none;
  border-radius: 9999px;
  padding: 11px 22px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  transition: background 0.32s var(--ease-std), color 0.32s var(--ease-std), box-shadow 0.32s var(--ease-std);
}
.currency-btn .cur-flag { font-size: 1.05em; line-height: 1; }
.currency-btn:hover { color: var(--c-akhbr-green); }
.currency-btn.is-active,
.currency-btn.is-active:hover {
  color: #F7F2E9;
  background: var(--c-akhbr-green);
  box-shadow: 0 8px 18px -8px rgba(27,58,27,0.55);
}

#pricing.is-tiers .price-card { text-align: center; align-items: center; }
#pricing.is-tiers .price-card:not(.is-featured) { justify-content: center; }
#pricing.is-tiers .price-head {
  width: 100%;
  border-bottom: none;
  padding-bottom: 0;
  margin-bottom: clamp(18px, 2.4vw, 26px);
  align-items: center;
}
#pricing.is-tiers .price-cta { width: 100%; }
#pricing.is-tiers .price-currency {
  font-family: 'General Sans', 'Mada', sans-serif;
  font-weight: 600;
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--c-fg-muted);
}
#pricing.is-tiers .price-amount {
  margin: 4px 0 2px;
  transition: opacity 0.22s var(--ease-std), transform 0.22s var(--ease-std);
}
#pricing.is-tiers .price-amount.is-swapping { opacity: 0; transform: translateY(4px); }
#pricing.is-tiers .price-note { max-width: 24ch; margin-inline: auto; }
#pricing.is-tiers .price-ribbon { text-align: center; max-width: calc(100% - 28px); }
.pricing-egp-note { text-align: center; margin-top: clamp(20px, 3vh, 32px); }
@media (prefers-reduced-motion: reduce) {
  #pricing.is-tiers .price-amount,
  #pricing.is-tiers .price-amount.is-swapping { transition: none; transform: none; }
}

/* =====================================================================
   FORMS
   ===================================================================== */
.form-card {
  background: var(--c-bg-soft);
  border: 1px solid var(--c-nav-border);
  border-radius: 22px;
  padding: clamp(24px, 4vw, 44px);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.35) inset,
    0 16px 40px -18px rgba(14,20,16,0.2),
    0 2px 8px rgba(14,20,16,0.05);
}
body.theme-dark .form-card {
  box-shadow:
    0 1px 0 rgba(247,242,233,0.05) inset,
    0 16px 40px -18px rgba(0,0,0,0.55),
    0 2px 8px rgba(0,0,0,0.3);
}
.field { display: flex; flex-direction: column; gap: 8px; margin-bottom: clamp(16px, 2.4vw, 22px); }
.field-label {
  font-family: 'Mada', sans-serif;
  font-weight: 600;
  font-size: 0.92rem;
  color: var(--c-fg);
}
.field-label .req { color: var(--c-error-text); margin-inline-start: 2px; }
.input, .select, .textarea {
  width: 100%;
  min-height: 50px;
  padding: 12px 16px;
  font-family: 'Mada', sans-serif;
  font-size: 1rem;
  color: var(--c-fg);
  background: var(--c-bg);
  border: 1px solid var(--c-nav-border);
  border-radius: 12px;
  direction: rtl;
  text-align: start;
  transition: border-color 0.25s var(--ease-std), box-shadow 0.25s var(--ease-std), background 0.25s var(--ease-std);
  -webkit-appearance: none; appearance: none;
}
.textarea { min-height: 120px; resize: vertical; line-height: 1.6; padding-top: 14px; }
/* Placeholder uses the muted token at full opacity so it still reads at AA
   on both themes (the prior 0.7 opacity dropped it to ~2.9:1 on light). */
.input::placeholder, .textarea::placeholder { color: var(--c-fg-muted); opacity: 1; }
.input:focus, .select:focus, .textarea:focus {
  outline: none;
  border-color: var(--c-champagne);
  box-shadow: 0 0 0 3px rgba(201,169,97,0.28);
  background: var(--c-bg-soft);
}
.select {
  cursor: pointer;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%236B6657' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: left 14px center;
  padding-inline-start: 16px;
  padding-inline-end: 42px;
}
body.theme-dark .select {
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23a59e8c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
}
.field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(14px, 2vw, 20px);
}
@media (max-width: 600px) { .field-row { grid-template-columns: 1fr; } }

/* Country dial-code + phone number side by side (waiting-list signup) */
.phone-combo { display: flex; flex-wrap: wrap; gap: 10px; }
.phone-combo .phone-code { width: auto; flex: 1 1 150px; min-width: 0; }
.phone-combo .phone-num { flex: 2 1 170px; min-width: 0; }

/* =====================================================================
   SLIDING SIGNUP · English-level gate (step 1) slides into the form (step 2)
   ===================================================================== */
.akhbr-slide { position: relative; overflow: hidden; }
.akhbr-slide > [data-akhbr-step] { display: none; }
.akhbr-slide.show-gate    > [data-akhbr-step="gate"],
.akhbr-slide.show-form    > [data-akhbr-step="form"],
.akhbr-slide.show-success > [data-akhbr-step="success"] { display: block; }
.akhbr-slide.is-animating > [data-akhbr-step] { animation: akhbrStepIn 0.45s var(--ease-reveal) both; }
@keyframes akhbrStepIn {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}

.akhbr-gate { text-align: center; }
.gate-question {
  font-family: 'Mada', sans-serif;
  font-weight: 700;
  font-size: clamp(1.15rem, 2.4vw, 1.4rem);
  color: var(--c-fg);
  margin-bottom: clamp(16px, 2.4vw, 22px);
  line-height: 1.45;
}
.gate-options { display: flex; flex-direction: column; gap: 10px; }
.gate-option {
  width: 100%;
  text-align: start;
  font-family: 'Mada', sans-serif;
  font-weight: 600;
  font-size: 1rem;
  color: var(--c-fg);
  background: var(--c-bg);
  border: 1px solid var(--c-nav-border);
  border-radius: 14px;
  padding: 15px 18px;
  min-height: 56px;
  cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  transition: border-color 0.25s var(--ease-std), background 0.25s var(--ease-std), transform 0.2s var(--ease-std), box-shadow 0.25s var(--ease-std);
}
.gate-option::after {
  content: '';
  width: 10px; height: 10px; flex-shrink: 0;
  border-radius: 50%;
  background: var(--c-nav-border);
  transition: background 0.25s var(--ease-std);
}
.gate-option:hover {
  border-color: var(--c-champagne);
  transform: translateY(-2px);
  box-shadow: 0 10px 24px -14px rgba(159,132,64,0.5);
}
.gate-option:focus-visible { outline: 2px solid var(--c-champagne); outline-offset: 2px; }
/* good-fit hint (mirrors the source site's ok / best states) */
.gate-option-ok, .gate-option-best { border-color: rgba(27,58,27,0.32); }
.gate-option-ok::after, .gate-option-best::after { background: var(--c-akhbr-green); }
body.theme-dark .gate-option { background: var(--c-bg-soft); }
/* below-threshold selection: blocked, with a kind notice */
.gate-option.is-blocked { border-color: rgba(179,38,30,0.5); }
.gate-option.is-blocked::after { background: rgba(179,38,30,0.7); }
.gate-reject {
  margin-top: 16px;
  padding: 14px 16px;
  border-radius: 12px;
  background: rgba(201,169,97,0.12);
  border: 1px solid rgba(201,169,97,0.45);
  font-family: 'Mada', sans-serif;
  font-weight: 600;
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--c-fg);
  text-align: center;
}
.gate-reject:not([hidden]) { animation: akhbrStepIn 0.35s var(--ease-reveal) both; }

.gate-back {
  display: inline-flex; align-items: center; gap: 6px;
  background: none; border: none; cursor: pointer;
  font-family: 'Mada', sans-serif; font-weight: 600; font-size: 0.9rem;
  color: var(--c-fg-muted);
  padding: 2px 0; margin-bottom: 12px;
  transition: color 0.2s var(--ease-std);
}
.gate-back:hover { color: var(--c-akhbr-green); }
.gate-back svg { width: 16px; height: 16px; }
@media (prefers-reduced-motion: reduce) {
  .akhbr-slide.is-animating > [data-akhbr-step] { animation: none; }
  .gate-option:hover { transform: none; }
}

/* custom checkbox, RTL */
.checkbox {
  display: flex; align-items: flex-start; gap: 10px;
  cursor: pointer;
  font-family: 'Mada', sans-serif;
  font-weight: 500;
  font-size: 0.92rem;
  color: var(--c-fg);
  line-height: 1.5;
}
.checkbox input {
  position: absolute; opacity: 0; width: 0; height: 0;
}
.checkbox .box {
  flex-shrink: 0;
  width: 22px; height: 22px;
  margin-top: 1px;
  border-radius: 7px;
  border: 1.5px solid var(--c-nav-border);
  background: var(--c-bg);
  display: flex; align-items: center; justify-content: center;
  transition: background 0.2s var(--ease-std), border-color 0.2s var(--ease-std);
}
.checkbox .box svg { width: 14px; height: 14px; opacity: 0; transform: scale(0.6); transition: opacity 0.2s var(--ease-std), transform 0.2s var(--ease-std); color: var(--c-deep-green); }
.checkbox input:checked + .box {
  background: var(--c-champagne);
  border-color: var(--c-champagne);
}
.checkbox input:checked + .box svg { opacity: 1; transform: scale(1); }
.checkbox input:focus-visible + .box { box-shadow: 0 0 0 3px rgba(201,169,97,0.3); }

.form-actions {
  display: flex; flex-wrap: wrap; gap: 14px;
  margin-top: clamp(20px, 3vw, 28px);
  align-items: center;
}
.form-note {
  font-family: 'Mada', sans-serif;
  font-weight: 500;
  font-size: 0.9rem;
  color: var(--c-fg-muted);
  line-height: 1.5;
}

/* error states */
.field.is-error .input,
.field.is-error .select,
.field.is-error .textarea {
  border-color: var(--c-coral);
  box-shadow: 0 0 0 3px rgba(231,76,60,0.18);
}
.field-error {
  font-family: 'Mada', sans-serif;
  font-weight: 500;
  font-size: 0.85rem;
  color: var(--c-error-text);
  line-height: 1.4;
}

/* hidden success banner, shown by JS */
.form-success {
  display: none;
  text-align: center;
  padding: clamp(28px, 4vw, 44px);
  border-radius: 18px;
  background:
    radial-gradient(120% 100% at 50% 0%, rgba(201,169,97,0.16) 0%, rgba(201,169,97,0) 60%),
    var(--c-bg-soft);
  border: 1px solid rgba(201,169,97,0.4);
}
.form-success.is-visible { display: block; animation: fade-up 0.5s var(--ease-reveal); }
.form-success .form-success-icon {
  width: 56px; height: 56px; margin: 0 auto 16px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--c-champagne);
  color: var(--c-deep-green);
}
.form-success .form-success-title {
  font-family: 'Mada', sans-serif;
  font-weight: 700;
  font-size: 1.3rem;
  color: var(--c-fg);
  margin-bottom: 8px;
}
.form-success .form-success-text {
  font-family: 'Mada', sans-serif;
  font-weight: 500;
  font-size: 0.95rem;
  color: var(--c-fg-muted);
  line-height: 1.6;
}
@keyframes fade-up {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* =====================================================================
   MODAL
   ===================================================================== */
.modal-overlay {
  position: fixed; inset: 0;
  z-index: 9000;
  display: none;
  align-items: center; justify-content: center;
  padding: clamp(16px, 4vw, 32px);
  background: rgba(14,20,16,0.5);
  -webkit-backdrop-filter: saturate(160%) blur(10px);
  backdrop-filter: saturate(160%) blur(10px);
  opacity: 0;
  transition: opacity 0.3s var(--ease-std);
}
.modal-overlay.is-open { display: flex; opacity: 1; }
.modal {
  position: relative;
  width: 100%;
  max-width: 560px;
  max-height: 88vh;
  overflow-y: auto;
  background: var(--c-bg-soft);
  border: 1px solid var(--c-nav-border);
  border-radius: 22px;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.4) inset,
    0 30px 80px -24px rgba(14,20,16,0.5),
    0 6px 20px rgba(14,20,16,0.18);
  transform: translateY(16px) scale(0.98);
  opacity: 0;
  transition: transform 0.35s var(--ease-reveal), opacity 0.35s var(--ease-reveal);
}
.modal-overlay.is-open .modal { transform: translateY(0) scale(1); opacity: 1; }
body.theme-dark .modal {
  box-shadow:
    0 1px 0 rgba(247,242,233,0.06) inset,
    0 30px 80px -24px rgba(0,0,0,0.65),
    0 6px 20px rgba(0,0,0,0.4);
}
.modal-head {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: clamp(20px, 3vw, 28px) clamp(20px, 3vw, 28px) clamp(14px, 2vw, 18px);
  border-bottom: 1px solid var(--c-nav-border);
}
.modal-title {
  font-family: 'Mada', sans-serif;
  font-weight: 700;
  font-size: clamp(1.2rem, 2.4vw, 1.5rem);
  color: var(--c-fg);
  line-height: 1.3;
}
/* macOS traffic-light close: a red circle showing an x glyph (faint at
   rest, full on hover/focus). Anchored absolutely so it works without
   any markup change. Targets both .modal-close and [data-modal-close]. */
.modal-close,
[data-modal-close] {
  width: 30px; height: 30px;
  border-radius: 50%;
  background: #ff5f57;
  border: 1px solid rgba(0, 0, 0, 0.12);
  padding: 0;
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  position: absolute;
  inset-block-start: 16px;
  inset-inline-end: 16px;
  color: rgba(74, 10, 6, 0.55);
  font-size: 15px;
  line-height: 1;
  transition: color 0.15s, filter 0.15s;
  z-index: 5;
}
.modal-close::before,
[data-modal-close]::before {
  content: '\00d7';
  font-weight: 700;
}
.modal-close:hover,
.modal-close:focus-visible,
[data-modal-close]:hover,
[data-modal-close]:focus-visible {
  color: #4a0a06;
  filter: brightness(1.06);
}
/* hide any legacy inline glyph/svg inside the close so the ::before x is
   the only mark shown */
.modal-close svg,
[data-modal-close] svg { display: none; }
.modal-body { padding: clamp(18px, 3vw, 28px); }
body.modal-open { overflow: hidden; }

/* =====================================================================
   ACCORDION
   ===================================================================== */
.accordion { display: flex; flex-direction: column; gap: 12px; }
.accordion-item {
  background: var(--c-bg-soft);
  border: 1px solid var(--c-nav-border);
  border-radius: 16px;
  overflow: hidden;
  transition: border-color 0.3s var(--ease-std), box-shadow 0.3s var(--ease-std);
}
.accordion-item.is-open {
  border-color: rgba(201,169,97,0.4);
  box-shadow: 0 8px 24px -14px rgba(14,20,16,0.2);
}
.accordion-head {
  width: 100%;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: clamp(16px, 2.4vw, 22px) clamp(18px, 2.6vw, 26px);
  background: transparent;
  border: none;
  cursor: pointer;
  text-align: start;
  font-family: 'Mada', sans-serif;
  font-weight: 700;
  font-size: clamp(1rem, 1.6vw, 1.15rem);
  color: var(--c-fg);
  line-height: 1.4;
}
.accordion-head .accordion-chevron {
  flex-shrink: 0;
  width: 22px; height: 22px;
  color: var(--c-champagne-deep);
  transition: transform 0.35s var(--ease-std), color 0.3s var(--ease-std);
}
body.theme-dark .accordion-head .accordion-chevron { color: var(--c-champagne); }
.accordion-item.is-open .accordion-head .accordion-chevron { transform: rotate(180deg); }
.accordion-body {
  height: 0;
  overflow: hidden;
  transition: height 0.35s var(--ease-std);
}
.accordion-body-inner {
  padding: 0 clamp(18px, 2.6vw, 26px) clamp(18px, 2.6vw, 24px);
  font-family: 'Mada', sans-serif;
  font-weight: 500;
  font-size: 0.98rem;
  line-height: 1.7;
  color: var(--c-fg-muted);
}

/* =====================================================================
   STATS
   ===================================================================== */
.stat { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; }
.stat.is-start { align-items: flex-start; text-align: start; }
.stat-num {
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-weight: 600;
  font-size: clamp(2.4rem, 6vw, 3.6rem);
  line-height: 1;
  color: var(--c-champagne-deep);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}
body.theme-dark .stat-num { color: var(--c-champagne); }
/* Mada variant for purely Arabic numerals/labels */
.stat-num.is-mada { font-family: 'Mada', sans-serif; font-style: normal; font-weight: 900; }
.stat-label {
  font-family: 'Mada', sans-serif;
  font-weight: 500;
  font-size: 0.95rem;
  color: var(--c-fg-muted);
  line-height: 1.4;
}

/* =====================================================================
   MISC: badge, pill, tag-chip, divider
   ===================================================================== */
.badge {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: 'General Sans', sans-serif;
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.04em;
  padding: 4px 12px;
  border-radius: 9999px;
  color: var(--c-deep-green);
  background: var(--c-champagne);
}
.badge.is-soft {
  color: var(--c-accent-text);
  background: rgba(201,169,97,0.14);
  border: 1px solid rgba(201,169,97,0.3);
}
body.theme-dark .badge.is-soft { color: var(--c-champagne); }
.badge.is-green { color: var(--c-ivory); background: var(--c-akhbr-green); }

.pill {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: 'Mada', sans-serif;
  font-weight: 600;
  font-size: 0.85rem;
  padding: 7px 16px;
  border-radius: 9999px;
  color: var(--c-fg);
  background: var(--c-bg-soft);
  border: 1px solid var(--c-nav-border);
}
.pill::before {
  content: '';
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--c-rail-dot);
  box-shadow: 0 0 0 3px rgba(201,169,97,0.18);
}

.tag-chip {
  display: inline-flex; align-items: center;
  font-family: 'General Sans', sans-serif;
  font-weight: 500;
  font-size: 0.85rem;
  padding: 5px 14px;
  border-radius: 9999px;
  color: var(--c-fg-muted);
  background: var(--c-bg-soft);
  border: 1px solid var(--c-nav-border);
  transition: color 0.25s var(--ease-std), border-color 0.25s var(--ease-std);
}
.tag-chip.is-active,
.tag-chip:hover {
  color: var(--c-accent-text);
  border-color: rgba(201,169,97,0.5);
}
body.theme-dark .tag-chip.is-active,
body.theme-dark .tag-chip:hover { color: var(--c-champagne); }

.divider {
  border: none;
  height: 1px;
  background: var(--c-nav-border);
  margin-block: clamp(28px, 5vh, 56px);
}
.divider.is-soft {
  background: linear-gradient(to right, transparent, var(--c-nav-border) 20%, var(--c-nav-border) 80%, transparent);
}

/* =====================================================================
   TIER TABLE (sponsors). Real table on desktop, stacked cards on phones
   via data-label pattern.
   ===================================================================== */
.tier-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-family: 'Mada', sans-serif;
  background: var(--c-bg-soft);
  border: 1px solid var(--c-nav-border);
  border-radius: 18px;
  overflow: hidden;
}
.tier-table thead th {
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--c-fg);
  text-align: start;
  padding: 16px 18px;
  background: rgba(201,169,97,0.10);
  border-bottom: 1px solid var(--c-nav-border);
}
.tier-table thead th.is-highlight { color: var(--c-accent-text); }
body.theme-dark .tier-table thead th.is-highlight { color: var(--c-champagne); }
.tier-table tbody td {
  padding: 14px 18px;
  font-weight: 500;
  font-size: 0.92rem;
  color: var(--c-fg-muted);
  border-bottom: 1px solid var(--c-nav-border);
  vertical-align: top;
}
.tier-table tbody tr:last-child td { border-bottom: none; }
.tier-table tbody th[scope="row"] {
  padding: 14px 18px;
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--c-fg);
  text-align: start;
  border-bottom: 1px solid var(--c-nav-border);
}
.tier-table tbody tr:last-child th[scope="row"] { border-bottom: none; }
.tier-table .tier-yes { color: var(--c-akhbr-green); font-weight: 700; }
body.theme-dark .tier-table .tier-yes { color: var(--c-champagne); }
/* The "not included" marker stays de-emphasized but must still clear AA for
   non-text UI (3:1); 0.5 opacity dropped it to ~2.1:1, so 0.8 is the floor. */
.tier-table .tier-no { color: var(--c-fg-muted); opacity: 0.8; }
.tier-table col.is-featured,
.tier-table .is-featured-col {
  background: rgba(201,169,97,0.07);
}

/* phone: each row becomes a stacked card using data-label */
@media (max-width: 720px) {
  .tier-table, .tier-table thead, .tier-table tbody,
  .tier-table tr, .tier-table th, .tier-table td { display: block; width: 100%; }
  .tier-table { border: none; background: transparent; overflow: visible; }
  .tier-table thead { display: none; }
  .tier-table tbody tr {
    background: var(--c-bg-soft);
    border: 1px solid var(--c-nav-border);
    border-radius: 16px;
    margin-bottom: 14px;
    overflow: hidden;
  }
  .tier-table tbody th[scope="row"] {
    background: rgba(201,169,97,0.10);
    font-size: 1.05rem;
    border-bottom: 1px solid var(--c-nav-border);
  }
  .tier-table tbody td {
    display: flex; justify-content: space-between; align-items: center; gap: 16px;
    text-align: end;
  }
  .tier-table tbody td::before {
    content: attr(data-label);
    font-weight: 700;
    color: var(--c-fg);
    text-align: start;
    flex-shrink: 0;
  }
}

/* =====================================================================
   SUBPAGE HERO (compact, for about / sponsors / careers)
   Premium but lighter than the homepage hero. No map video.
   ===================================================================== */
.subhero {
  position: relative;
  z-index: 1;
  overflow: hidden;
  padding-top: clamp(120px, 18vh, 180px);
  padding-bottom: clamp(56px, 10vh, 110px);
  background: transparent;
  isolation: isolate;
}
/* Legibility scrim over the live map (handoff Phase 1, task 4). A DIRECTIONAL
   wash: strongest behind the centered headline/subtitle block (top center,
   ~32% down), feathering to transparent toward the edges where the map stays
   visible as atmosphere. Built so subhero text reads WITHOUT leaning on the
   text-shadow alone. Layer 1 is a solid-ish ellipse hugging the text block,
   layer 2 a soft vertical fade that keeps the reading column legible while the
   side/bottom edges open back up to the map, layer 3 the brand champagne warmth.
   rgba fallbacks come FIRST, the color-mix versions (tied to the theme --c-bg,
   ~0.55 to 0.78 alpha) refine on supporting browsers. z-index:-2 keeps it above
   the fixed map but below .subhero-inner (z-index:1) inside this isolated
   stacking context, so it never sits behind the page map. */
.subhero::before {
  content: '';
  position: absolute; inset: 0;
  z-index: -2;
  background:
    radial-gradient(68% 58% at 50% 30%, rgba(247,242,233,0.92) 0%, rgba(247,242,233,0.78) 38%, rgba(247,242,233,0.42) 60%, rgba(247,242,233,0) 80%),
    linear-gradient(to bottom, rgba(247,242,233,0.55) 0%, rgba(247,242,233,0.5) 42%, rgba(247,242,233,0.18) 78%, rgba(247,242,233,0) 100%),
    radial-gradient(60% 60% at 50% 0%, rgba(201,169,97,0.14) 0%, rgba(201,169,97,0) 62%);
  background:
    radial-gradient(68% 58% at 50% 30%,
      color-mix(in srgb, var(--c-bg) 92%, transparent) 0%,
      color-mix(in srgb, var(--c-bg) 78%, transparent) 38%,
      color-mix(in srgb, var(--c-bg) 42%, transparent) 60%,
      transparent 80%),
    linear-gradient(to bottom,
      color-mix(in srgb, var(--c-bg) 55%, transparent) 0%,
      color-mix(in srgb, var(--c-bg) 50%, transparent) 42%,
      color-mix(in srgb, var(--c-bg) 18%, transparent) 78%,
      transparent 100%),
    radial-gradient(60% 60% at 50% 0%, rgba(201,169,97,0.14) 0%, rgba(201,169,97,0) 62%);
}
body.theme-dark .subhero::before {
  background:
    radial-gradient(68% 58% at 50% 30%, rgba(15,36,16,0.94) 0%, rgba(15,36,16,0.8) 38%, rgba(15,36,16,0.44) 60%, rgba(15,36,16,0) 80%),
    linear-gradient(to bottom, rgba(15,36,16,0.58) 0%, rgba(15,36,16,0.52) 42%, rgba(15,36,16,0.2) 78%, rgba(15,36,16,0) 100%),
    radial-gradient(60% 60% at 50% 0%, rgba(201,169,97,0.12) 0%, rgba(201,169,97,0) 62%);
  background:
    radial-gradient(68% 58% at 50% 30%,
      color-mix(in srgb, var(--c-bg) 94%, transparent) 0%,
      color-mix(in srgb, var(--c-bg) 80%, transparent) 38%,
      color-mix(in srgb, var(--c-bg) 44%, transparent) 60%,
      transparent 80%),
    linear-gradient(to bottom,
      color-mix(in srgb, var(--c-bg) 58%, transparent) 0%,
      color-mix(in srgb, var(--c-bg) 52%, transparent) 42%,
      color-mix(in srgb, var(--c-bg) 20%, transparent) 78%,
      transparent 100%),
    radial-gradient(60% 60% at 50% 0%, rgba(201,169,97,0.12) 0%, rgba(201,169,97,0) 62%);
}
/* faint grain via tiled SVG noise */
.subhero::after {
  content: '';
  position: absolute; inset: 0;
  z-index: -1;
  opacity: 0.4;
  pointer-events: none;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E");
}
body.theme-dark .subhero::after { opacity: 0.5; }
.subhero-inner {
  position: relative;
  z-index: 1;
  max-width: 820px;
  margin-inline: auto;
  text-align: center;
  display: flex; flex-direction: column; align-items: center;
  gap: clamp(14px, 2.2vh, 24px);
}
.subhero .section-title { font-size: clamp(2.1rem, 6vw, 4rem); }
.subhero .section-sub { max-width: 620px; }
.subhero .subhero-ctas {
  display: flex; flex-wrap: wrap; gap: 16px; justify-content: center;
  margin-top: clamp(8px, 1.4vh, 16px);
}
@media (max-width: 540px) {
  .subhero .subhero-ctas { flex-direction: column; align-items: stretch; width: 100%; max-width: 360px; }
}

/* =====================================================================
   FOOTER
   ===================================================================== */
.site-footer {
  position: relative;
  z-index: 1;
  background: var(--c-bg-soft);
  border-top: 1px solid var(--c-nav-border);
  padding-block: clamp(48px, 8vh, 88px) clamp(28px, 4vh, 40px);
  margin-top: clamp(40px, 8vh, 100px);
}
.footer-inner { /* uses .akhbr-container alongside */ }
.footer-top {
  display: grid;
  grid-template-columns: minmax(220px, 1.4fr) 2fr;
  gap: clamp(32px, 5vw, 72px);
  padding-bottom: clamp(32px, 5vh, 56px);
  border-bottom: 1px solid var(--c-nav-border);
}
@media (max-width: 820px) { .footer-top { grid-template-columns: 1fr; gap: 40px; } }
.footer-brand { display: flex; flex-direction: column; gap: 14px; align-items: flex-start; }
.footer-brand .footer-mark { display: flex; align-items: center; gap: 10px; }
.footer-brand .footer-mark svg { height: 36px; width: auto; }
.footer-brand .footer-wordmark {
  font-family: 'Mada', sans-serif;
  font-weight: 900;
  font-size: 24px;
  color: var(--c-akhbr-green);
  letter-spacing: -0.01em;
  line-height: 1;
}
body.theme-dark .footer-brand .footer-wordmark { color: var(--c-champagne); }
.footer-tagline {
  font-family: 'UthmanTaha', 'General Sans', serif;
  font-weight: 400;
  font-size: 1.15rem;
  color: var(--c-fg-muted);
  line-height: 1.6;
  max-width: 280px;
}
.footer-cols {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(24px, 4vw, 48px);
}
@media (max-width: 560px) { .footer-cols { grid-template-columns: 1fr 1fr; gap: 28px; } }
.footer-col { display: flex; flex-direction: column; gap: 12px; }
.footer-col h4 {
  font-family: 'Mada', sans-serif;
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--c-fg);
  margin-bottom: 4px;
}
.footer-col a {
  font-family: 'Mada', sans-serif;
  font-weight: 500;
  font-size: 0.92rem;
  color: var(--c-fg-muted);
  transition: color 0.25s var(--ease-std);
  width: fit-content;
}
.footer-col a {
  border-radius: 6px;
}
.footer-col a:hover { color: var(--c-nav-link-h); }
.footer-col a:focus-visible,
.footer-legal a:focus-visible,
.footer-bottom a:focus-visible {
  outline: 2px solid var(--c-champagne);
  outline-offset: 2px;
}
.footer-bottom {
  display: flex; flex-direction: column; gap: 8px;
  align-items: center;
  text-align: center;
  padding-top: clamp(24px, 4vh, 36px);
}
.footer-legal {
  font-family: 'Mada', sans-serif;
  font-weight: 500;
  font-size: 0.85rem;
  color: var(--c-fg-muted);
  line-height: 1.7;
}
.footer-copy {
  font-family: 'Mada', sans-serif;
  font-weight: 500;
  font-size: 0.85rem;
  color: var(--c-fg-muted);
}
/* Footer + inline legal/email links get comfortable tap rows on mobile
   (handoff Phase 3). Desktop density is preserved: the generous padding is
   scoped to the mobile breakpoint only. inline-flex + align-items keeps the
   text vertically centered inside the taller hit row. */
@media (max-width: 820px) {
  .footer-col a {
    display: inline-flex; align-items: center;
    min-height: var(--tap-min);
    padding-block: 6px;
  }
  .footer-legal a,
  .footer-bottom a {
    display: inline-block;
    padding-block: 8px;
    line-height: 1.5;
  }
}

/* =====================================================================
   REVEAL ON SCROLL
   ===================================================================== */
.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition:
    opacity 0.7s var(--ease-reveal),
    transform 0.7s var(--ease-reveal);
  transition-delay: var(--reveal-delay, 0ms);
  will-change: opacity, transform;
}
.reveal.is-in {
  opacity: 1;
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* =====================================================================
   REDUCED MOTION (loader / cursor / code-card / journey)
   ===================================================================== */
@media (prefers-reduced-motion: reduce) {
  .loader .cartouche { animation: none; opacity: 1; }
  .figma-cursor { transition: none; }
  .code-card,
  .code-card.stage-1,
  .code-card.stage-2,
  .code-card.stage-3,
  .code-card.stage-4 { clip-path: inset(0 0 0 0 round 20px); transition: none; }
  .code-card-line { opacity: 1; transform: none; transition: none; }
  .code-card.stage-4 .code-card-line.code-total { animation: none; }
  .form-success.is-visible { animation: none; }
  .nav-dropdown__caret { transition: none; }
  .journey-rail .stop,
  .journey-rail .stop .dot,
  .journey-rail .stop .label,
  .journey-rail .doodle-line path { transition: none; }
  *,
  *::before,
  *::after { scroll-behavior: auto !important; }
}

/* =====================================================================
   TERMINAL, reusable window-chrome component. Always dark obsidian
   regardless of theme (it is a terminal). In RTL the traffic-light dots
   sit on the start (right) side, which is fine.
   ===================================================================== */
.terminal {
  /* Always a fully OPAQUE dark window, never translucent, in any theme.
     Solid hex fallback first, then the token (both resolve to obsidian),
     and backdrop-filter forced off so nothing behind it bleeds through. */
  background-color: #0E1410;
  background-color: var(--c-obsidian);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border: 1px solid rgba(201, 169, 97, 0.18);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 30px 80px -42px rgba(0, 0, 0, 0.75);
}
.terminal__bar {
  display: flex; align-items: center; gap: 8px;
  height: 40px; padding: 0 16px;
  background: #161d17;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.terminal__dots { display: flex; gap: 8px; }
.terminal__dot { width: 12px; height: 12px; border-radius: 50%; }
.terminal__dot--red { background: #ff5f57; }
.terminal__dot--yellow { background: #febc2e; }
.terminal__dot--green { background: #28c840; }
.terminal__title {
  margin-inline: auto;
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
  font-size: 0.82rem;
  color: rgba(247, 242, 233, 0.7);
  letter-spacing: 0.02em;
}
.terminal__body {
  padding: clamp(22px, 3.2vw, 36px);
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
  color: var(--c-ivory);
  font-size: 15px;
  line-height: 1.8;
}

/* =====================================================================
   NAV SECTIONS-DROPDOWN, separates flat PAGE links from grouped homepage
   SECTIONS. RTL-correct (opens below, aligned to the start edge),
   theme-aware, floats above content (z-index 60). Stacks inside the
   mobile hamburger menu naturally.
   ===================================================================== */
.nav-dropdown { position: relative; }
.nav-dropdown__btn {
  display: inline-flex; align-items: center; gap: 6px;
  background: none; border: none; cursor: pointer;
  font: inherit; color: inherit; padding: 0;
}
.nav-dropdown__caret { font-size: 0.7em; transition: transform 0.2s; }
.nav-dropdown.is-open .nav-dropdown__caret { transform: rotate(180deg); }
.nav-dropdown__menu {
  position: absolute;
  inset-inline-end: 0;
  inset-block-start: calc(100% + 12px);
  min-width: 220px;
  display: none;
  flex-direction: column;
  gap: 2px;
  padding: 8px;
  border-radius: 14px;
  background: var(--c-bg-soft);
  border: 1px solid var(--c-nav-border);
  box-shadow: 0 22px 54px -26px rgba(14, 20, 16, 0.45);
  z-index: 60;
}
.nav-dropdown.is-open .nav-dropdown__menu { display: flex; }
.nav-dropdown__item {
  display: block;
  padding: 10px 12px;
  border-radius: 9px;
  color: var(--c-fg);
  text-decoration: none;
  white-space: nowrap;
  font-size: 0.95rem;
}
.nav-dropdown__item:hover { background: rgba(27, 58, 27, 0.08); }
body.theme-dark .nav-dropdown__item:hover { background: rgba(201, 169, 97, 0.12); }
/* Inside the mobile menu, let the dropdown items stack in flow rather
   than float as an absolute popover. */
.mobile-menu .nav-dropdown { width: 100%; text-align: center; }
.mobile-menu .nav-dropdown__menu {
  position: static;
  min-width: 0;
  background: none;
  border: none;
  box-shadow: none;
  padding: 6px 0 0;
  align-items: center;
}

/* =====================================================================
   JOURNEY RAIL, fixed hand-drawn doodle navigator on subpages. Ported
   verbatim from the homepage (index.html keeps its own inline copy) so
   every subpage gets the identical doodle: an SVG line plus numbered
   circular dots with vertical labels, pinned on the LEFT. Auto-built by
   akhbr.js, which injects this exact DOM into subpages:
     <aside class="journey-rail">
       <div class="doodle-line"><svg><path/></svg></div>
       <a class="stop" href="#id"><span class="dot">1</span>
          <span class="label">…</span></a> …
     </aside>
   Floats above content (z-index 40); hidden under 960px.
   ===================================================================== */
.journey-rail {
  position: fixed;
  /* Pinned to the LEFT edge. inset-inline-end/right explicitly cleared so
     no leaked logical-property value resolves the opposite edge and the
     stops never drift toward the page center. */
  inset-inline-end: auto;
  right: auto;
  left: clamp(20px, 3vw, 40px);
  top: 38%;
  transform: translateY(-50%);
  z-index: 40;
  display: flex; flex-direction: column; align-items: center;
  gap: clamp(28px, 5vh, 56px);
  pointer-events: none;
  direction: ltr;
}
@media (max-width: 960px) { .journey-rail { display: none; } }
.journey-rail .doodle-line {
  position: absolute;
  left: 50%; transform: translateX(-50%);
  top: -28px; bottom: -28px;
  width: 28px;
  z-index: 0;
}
.journey-rail .doodle-line svg { width: 100%; height: 100%; overflow: visible; display: block; }
/* doodle line uses theme-aware rail color */
.journey-rail .doodle-line path {
  stroke: var(--c-rail);
  stroke-width: 1.5;
  fill: none;
  stroke-linecap: round;
  stroke-dasharray: 1200;
  stroke-dashoffset: 1200;
  transition: stroke-dashoffset 1.4s cubic-bezier(0.4,0,0.2,1);
  opacity: 0.85;
}
.journey-rail .doodle-line path.is-drawn { stroke-dashoffset: 0; }
.journey-rail .stop {
  position: relative; z-index: 2;
  display: flex; align-items: center; gap: 14px;
  transition: opacity 0.4s cubic-bezier(0.4,0,0.2,1);
  opacity: 0.45;
  /* the rail wrapper is pointer-events:none so it never blocks the page;
     re-enable pointer events on the stops themselves so each is clickable
     and scrolls to its section. */
  pointer-events: auto;
  text-decoration: none;
  cursor: pointer;
}
.journey-rail .stop.is-active { opacity: 1; }
.journey-rail .stop .dot {
  width: 38px; height: 38px; border-radius: 50%;
  background: var(--c-bg);
  border: 1.5px solid var(--c-rail-dot);
  display: flex; align-items: center; justify-content: center;
  font-family: 'Fraunces', serif; font-style: italic;
  font-weight: 600; font-size: 16px;
  color: var(--c-rail-dot);
  transition: 0.35s cubic-bezier(0.4,0,0.2,1);
  box-shadow: 0 3px 10px rgba(14,20,16,0.12);
}
.journey-rail .stop.is-active .dot {
  background: var(--c-rail-dot);
  border-color: var(--c-rail-dot);
  color: var(--c-bg);
  transform: scale(1.15);
  box-shadow: 0 6px 18px rgba(14,20,16,0.24);
}
/* Dark-mode journey rail, high-contrast champagne palette so the
   hand-drawn doodle pops against the deep-green page. */
body.theme-dark .journey-rail .doodle-line path {
  stroke: var(--c-champagne);
  stroke-width: 2;
  opacity: 1;
}
body.theme-dark .journey-rail .stop .dot {
  background: rgba(15, 36, 16, 0.55);
  -webkit-backdrop-filter: saturate(180%) blur(8px);
  backdrop-filter: saturate(180%) blur(8px);
  border: 1.5px solid var(--c-champagne);
  color: var(--c-champagne);
  box-shadow:
    0 1px 0 rgba(247,242,233,0.12) inset,
    0 6px 16px rgba(0,0,0,0.5);
}
body.theme-dark .journey-rail .stop.is-active .dot {
  background: var(--c-champagne);
  border-color: var(--c-champagne);
  color: var(--c-deep-green);
  box-shadow:
    0 0 0 6px rgba(201,169,97,0.22),
    0 8px 22px rgba(201,169,97,0.45),
    0 2px 8px rgba(0,0,0,0.5);
}
body.theme-dark .journey-rail .stop .label {
  color: var(--c-champagne);
  text-shadow: 0 1px 4px rgba(0,0,0,0.5);
}
.journey-rail .stop .label {
  font-family: 'Mada', sans-serif;
  font-size: 13.5px; font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--c-rail-dot);
  writing-mode: vertical-rl;
  opacity: 0;
  transition: opacity 0.35s cubic-bezier(0.4,0,0.2,1);
}
.journey-rail .stop.is-active .label { opacity: 1; }

/* =====================================================================
   SMALL PHONE HARDENING (<= 430px, tuned at 390px)
   Shared chrome reads cleanly on the smallest common phones: no clipped
   or overflowing text, sensible tap targets, no horizontal scroll. Only
   shared components are touched here. Map video layering is untouched.
   ===================================================================== */
@media (max-width: 430px) {
  /* No element may force the page wider than the viewport. */
  html, body { overflow-x: hidden; }

  /* NAVBAR: hug the edges a touch more and keep the inner row from
     crowding the wordmark against the toggles. */
  .navbar { width: calc(100% - 20px); padding: 9px 14px; }
  .nav-inner { gap: 8px; }
  .nav-wordmark { font-size: 20px; }
  .nav-actions { gap: 8px; }
  /* Match the tighter navbar padding so the opaque menu sheet bleeds exactly
     to the bar edges (navbar padding is 14px here, not 20px). The >= 44px tap
     rows on the links come from the base .mobile-menu .nav-link rule. */
  .mobile-menu.open { margin-inline: -14px; border-radius: 0 0 24px 24px; }
  .mobile-menu .btn-nav { width: 100%; max-width: 280px; text-align: center; justify-content: center; }

  /* BUTTONS: full width pressed CTAs read better than side by side on a
     narrow screen; keep a generous tap target and let long labels wrap. */
  .btn-press, .btn-press-green { width: 100%; padding: 15px 22px; }
  .btn-sm { width: auto; }

  /* CARDS: tighten inner padding so content is not cramped against edges
     and long unbroken strings (URLs, handles) wrap instead of overflowing. */
  .card-pad { padding: 18px; }
  .feature-card, .price-card, .form-card { padding: 20px; }
  .course-card-title,
  .feature-card .feature-title,
  .price-name,
  .accordion-head { overflow-wrap: anywhere; }

  /* FOOTER: single column of links is cleaner than a squeezed 2 up grid
     at this width; keep everything left aligned and readable. */
  .footer-cols { grid-template-columns: 1fr; gap: 22px; }
  .footer-brand .footer-wordmark { font-size: 22px; }
  .footer-tagline { max-width: 100%; }
  .footer-legal, .footer-copy { overflow-wrap: anywhere; }

  /* MODAL: use nearly the full width and cap height so the body scrolls
     rather than pushing the close button off screen. */
  .modal-overlay { padding: 12px; }
  .modal { max-height: 90vh; border-radius: 18px; }
  .modal-head { padding: 18px 18px 12px; }
  .modal-title { font-size: 1.2rem; padding-inline-end: 36px; }

  /* TABLE: stacked rows (already triggered under 720px) get tighter,
     wrap safe cells so values never spill past the card edge. */
  .tier-table tbody td { gap: 10px; }
  .tier-table tbody td,
  .tier-table tbody th[scope="row"] { overflow-wrap: anywhere; }

  /* FORMS: number style/zoom guard, keep inputs from triggering iOS zoom
     while staying readable. */
  .input, .select, .textarea { font-size: 1rem; }
}