/* =================================================================
   Abdul Osama — Design Tokens
   Colors + Typography + Radii + Shadows + Spacing
   -----------------------------------------------------------------
   Identity "DUSK": the deep indigo → violet → royal-blue →
   luminescent-cyan gradient (off the YouTube cover), in its calmer,
   jewel-toned Dusk shading. SALMON gradient is the action accent;
   MINT EMERALD is the distinctive 5th brand color (taxonomy/success).
   Surfaces: Warm Paper (light) + the gradient itself (dark/brand).
   Arabic-first (RTL by default); Ghroob Geometric is the one typeface
   everywhere (2026-09-05), with the MORSALA (الحروف المرسلة) as the
   approved default for display headings. Cover palettes + block/rail
   utilities ship here too. Single source of truth — never hard-code hex
   downstream.

   Sourced from the design-system handoff bundle
   (Abdul Osama Design System-handoff.zip → colors_and_type.css).
   The ONLY local adaptation is the @font-face URL prefix:
   "assets/fonts/" → "/fonts/" so Laravel serves the .woff2 files from
   /public/fonts/.
   ================================================================= */

/* ---------- FONTS ----------
   PRIMARY: Ghroob Geometric (iwantype, licensed for web — /public/fonts/,
   seven weights, WOFF2 straight from the OTFs, nothing subset). ONE family
   carries the whole site under TWO CSS aliases, so components keep their
   CSS weights untouched and a rollback is a token flip:
     'Ghroob Geometric'      — display. Files matched to the old serif by
                               rendered ink, not by name: 700→SemiBold,
                               900→Bold (name-for-name ran a step too
                               heavy — Abdul caught it as "too bold").
     'Ghroob Geometric Text' — body/UI. The family's own ladder, 300–900.
   Latin fallbacks: DM Sans (display) / Manrope (body). Mono: Geist Mono.
   THMANYAH stays declared below and on disk as the ROLLBACK face — the
   typography block carries the exact lines to swap. Don't delete the
   files. It is deliberately NOT in the live stacks: a stack falls back
   per glyph, so one accented Latin letter would download it.
*/
/* No Google Fonts (2026-09-27): Ghroob carries Arabic AND Latin, so the
   DM Sans / Manrope / Geist Mono downloads were render-blocking weight for
   fallbacks nobody saw. Their names stay in the stacks as local fallbacks. */

@font-face{font-family:'Thmanyah Sans';src:url('/fonts/thmanyahsans-Light.woff2') format('woff2');font-weight:300;font-display:swap}
@font-face{font-family:'Thmanyah Sans';src:url('/fonts/thmanyahsans-Regular.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Thmanyah Sans';src:url('/fonts/thmanyahsans-Medium.woff2') format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:'Thmanyah Sans';src:url('/fonts/thmanyahsans-Bold.woff2') format('woff2');font-weight:700;font-display:swap}
@font-face{font-family:'Thmanyah Sans';src:url('/fonts/thmanyahsans-Black.woff2') format('woff2');font-weight:900;font-display:swap}
@font-face{font-family:'Thmanyah Serif Display';src:url('/fonts/thmanyahserifdisplay-Regular.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Thmanyah Serif Display';src:url('/fonts/thmanyahserifdisplay-Bold.woff2') format('woff2');font-weight:700;font-display:swap}
@font-face{font-family:'Thmanyah Serif Display';src:url('/fonts/thmanyahserifdisplay-Black.woff2') format('woff2');font-weight:900;font-display:swap}
/* Ghroob — display alias. Since 2026-09-27 (Abdul, via the Type Lab) every
   headline is ONE weight, Ghroob Bold: this face answers any weight a rule
   asks for, so the 700/800/900 scattered through design.css all render the
   same Bold. To go lighter or heavier, change this one file name. */
@font-face{font-family:'Ghroob Geometric';src:url('/fonts/ghroob-Bold.woff2') format('woff2');font-weight:1 1000;font-display:swap}
/* Ghroob — text alias (name for name) */
@font-face{font-family:'Ghroob Geometric Text';src:url('/fonts/ghroob-Light.woff2') format('woff2');font-weight:300;font-display:swap}
@font-face{font-family:'Ghroob Geometric Text';src:url('/fonts/ghroob-Regular.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Ghroob Geometric Text';src:url('/fonts/ghroob-Medium.woff2') format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:'Ghroob Geometric Text';src:url('/fonts/ghroob-SemiBold.woff2') format('woff2');font-weight:600;font-display:swap}
@font-face{font-family:'Ghroob Geometric Text';src:url('/fonts/ghroob-Bold.woff2') format('woff2');font-weight:700;font-display:swap}
@font-face{font-family:'Ghroob Geometric Text';src:url('/fonts/ghroob-ExtraBold.woff2') format('woff2');font-weight:800;font-display:swap}
@font-face{font-family:'Ghroob Geometric Text';src:url('/fonts/ghroob-Black.woff2') format('woff2');font-weight:900;font-display:swap}

/* IBM Plex Sans Arabic — body & UI (2026-09-27), and Aref Ruqaa Ink —
   the hero accent word. Both OFL, self-hosted (no Google request), split
   by script like Google serves them: a page downloads only the Arabic /
   Latin pieces and weights it actually uses (~35 KB per Plex weight). */
@font-face{font-family:'Aref Ruqaa Ink';src:url('/fonts/arefruqaaink-400-arabic.woff2') format('woff2');font-weight:400;font-display:swap;unicode-range:U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1}
@font-face{font-family:'Aref Ruqaa Ink';src:url('/fonts/arefruqaaink-400-latin-ext.woff2') format('woff2');font-weight:400;font-display:swap;unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Aref Ruqaa Ink';src:url('/fonts/arefruqaaink-400-latin.woff2') format('woff2');font-weight:400;font-display:swap;unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'IBM Plex Sans Arabic';src:url('/fonts/plexar-300-arabic.woff2') format('woff2');font-weight:300;font-display:swap;unicode-range:U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1}
@font-face{font-family:'IBM Plex Sans Arabic';src:url('/fonts/plexar-300-latin-ext.woff2') format('woff2');font-weight:300;font-display:swap;unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'IBM Plex Sans Arabic';src:url('/fonts/plexar-300-latin.woff2') format('woff2');font-weight:300;font-display:swap;unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'IBM Plex Sans Arabic';src:url('/fonts/plexar-400-arabic.woff2') format('woff2');font-weight:400;font-display:swap;unicode-range:U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1}
@font-face{font-family:'IBM Plex Sans Arabic';src:url('/fonts/plexar-400-latin-ext.woff2') format('woff2');font-weight:400;font-display:swap;unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'IBM Plex Sans Arabic';src:url('/fonts/plexar-400-latin.woff2') format('woff2');font-weight:400;font-display:swap;unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'IBM Plex Sans Arabic';src:url('/fonts/plexar-500-arabic.woff2') format('woff2');font-weight:500;font-display:swap;unicode-range:U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1}
@font-face{font-family:'IBM Plex Sans Arabic';src:url('/fonts/plexar-500-latin-ext.woff2') format('woff2');font-weight:500;font-display:swap;unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'IBM Plex Sans Arabic';src:url('/fonts/plexar-500-latin.woff2') format('woff2');font-weight:500;font-display:swap;unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'IBM Plex Sans Arabic';src:url('/fonts/plexar-600-arabic.woff2') format('woff2');font-weight:600;font-display:swap;unicode-range:U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1}
@font-face{font-family:'IBM Plex Sans Arabic';src:url('/fonts/plexar-600-latin-ext.woff2') format('woff2');font-weight:600;font-display:swap;unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'IBM Plex Sans Arabic';src:url('/fonts/plexar-600-latin.woff2') format('woff2');font-weight:600;font-display:swap;unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'IBM Plex Sans Arabic';src:url('/fonts/plexar-700-arabic.woff2') format('woff2');font-weight:700;font-display:swap;unicode-range:U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1}
@font-face{font-family:'IBM Plex Sans Arabic';src:url('/fonts/plexar-700-latin-ext.woff2') format('woff2');font-weight:700;font-display:swap;unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'IBM Plex Sans Arabic';src:url('/fonts/plexar-700-latin.woff2') format('woff2');font-weight:700;font-display:swap;unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}

/* Form controls don't inherit font-family by default — <button>, <input>,
   <textarea>, <select> fall back to the UA/system font. Force inheritance
   GLOBALLY (tokens.css loads on every surface) so brand type reaches every
   control, including Souq's <button class="sq-btn"> CTAs — the Souq layout
   never loads design.css, which is where this reset previously lived. */
button, input, textarea, select { font-family: inherit; }

/* Body dots. Ghroob FUSES its dots by default — a display signature that
   gets hard to read under ~20px — so paragraphs get conventional round
   dots (ss05). Display blocks set --ff-display themselves: the property
   REPLACES, it never merges, so a display block without one would inherit
   these round dots (BrandTypeTest enforces the rule). lnum keeps the learn
   digit policy (resources/css/app.css) alive for the fallback fonts. */
body { font-feature-settings: var(--ff-body); }

:root {
  /* ==============================================================
     BRAND CORE — the signature gradient lineage, "Dusk" shading
     (jewel-toned, calmer than the electric variant)
     ============================================================== */

  /* --- INDIGO / VIOLET (the deep crown of the gradient) --- */
  --abdul-indigo-950: #160640;
  --abdul-indigo-900: #1f0a52;   /* SIGNATURE deep indigo */
  --abdul-indigo-800: #2e108f;
  --abdul-violet-700: #3d18bf;   /* PRIMARY brand violet */
  --abdul-violet-600: #5526e0;

  /* --- BLUE / CYAN (the luminescent base of the gradient) --- */
  --abdul-blue-500: #3f74f0;     /* royal blue */
  --abdul-blue-400: #4aa3f5;     /* azure */
  --abdul-cyan-400: #34e0e8;     /* luminescent cyan — the glow */
  --abdul-cyan-300: #7fecf0;

  /* ==============================================================
     SALMON — the single action accent (replaces flat ember).
     Has DEPTH: a peach→pink-red gradient, plus solid stops.
     ============================================================== */
  --abdul-salmon-300: #ffb38c;
  --abdul-salmon-400: #ff9466;   /* peach end of the gradient */
  --abdul-salmon-500: #fc7164;   /* mid */
  --abdul-salmon-600: #f5536a;   /* PRIMARY — pink-red end */
  --abdul-salmon-700: #d83a52;

  /* --- legacy "ember" names → salmon, so nothing breaks --- */
  --abdul-ember-300: var(--abdul-salmon-300);
  --abdul-ember-400: var(--abdul-salmon-400);
  --abdul-ember-500: var(--abdul-salmon-600);
  --abdul-ember-600: var(--abdul-salmon-700);
  --abdul-ember-700: var(--abdul-salmon-700);

  /* ==============================================================
     MINT EMERALD — the distinctive 5th brand color.
     Role: taxonomy / categorization / success / data. Extends the
     cyan family toward green; complements the warm salmon.
     ============================================================== */
  --abdul-mint-300: #7fe8c4;
  --abdul-mint-400: #3ce0a6;
  --abdul-mint-500: #1fd896;     /* PRIMARY mint */
  --abdul-mint-600: #0f9b6c;     /* readable on light */
  --abdul-mint-700: #0a6e4d;

  /* ==============================================================
     WARM PAPER — the light canvas (replaces beige AND cool mist).
     Near-white with the faintest warmth; comfortable, not yellow,
     not cold. Darker steps stay neutral to avoid beige creep.
     ============================================================== */
  --abdul-paper-50:  #fffefb;    /* raised paper */
  --abdul-paper-100: #fcfbf8;    /* PRIMARY canvas */
  --abdul-paper-200: #f3f1ea;    /* sunken */
  --abdul-paper-300: #e6e3d9;    /* divider */
  --abdul-paper-400: #a8a496;    /* secondary text on paper */
  --abdul-paper-500: #7c7868;    /* metadata */

  /* --- legacy "sand"/"mist" names → paper, so nothing breaks --- */
  --abdul-sand-50:  var(--abdul-paper-50);
  --abdul-sand-100: var(--abdul-paper-100);
  --abdul-sand-200: var(--abdul-paper-200);
  --abdul-sand-300: var(--abdul-paper-300);
  --abdul-sand-400: var(--abdul-paper-400);
  --abdul-sand-500: var(--abdul-paper-500);
  --abdul-mist-50:  var(--abdul-paper-50);
  --abdul-mist-100: var(--abdul-paper-100);
  --abdul-mist-200: var(--abdul-paper-200);
  --abdul-mist-300: var(--abdul-paper-300);
  --abdul-mist-400: var(--abdul-paper-400);
  --abdul-mist-500: var(--abdul-paper-500);

  /* ==============================================================
     NEUTRALS — deep indigo-ink (pairs with the gradient)
     ============================================================== */
  --abdul-ink-950: #07051c;
  --abdul-ink-900: #100c2c;
  --abdul-ink-800: #1a1540;
  --abdul-ink-700: #282153;
  --abdul-ink-600: #3f3873;
  --abdul-ink-500: #645e96;
  --abdul-ink-400: #8d88b4;
  --abdul-ink-300: #b6b2d2;
  --abdul-ink-200: #d7d5e8;
  --abdul-ink-100: #ebeaf5;
  --abdul-ink-50:  #f5f5fb;
  --abdul-white:   #ffffff;

  /* ==============================================================
     GRADIENTS — the single most recognizable asset (Dusk shading).
     Bottom-anchored: cyan glows low, indigo crowns the top.
     Never tilt, never mirror.
     ============================================================== */
  --abdul-gradient-core: linear-gradient(180deg,
      #1f0a52 0%, #3d18bf 40%, #3f74f0 74%, #34e0e8 100%);
  --abdul-gradient-horizon: linear-gradient(160deg,
      #1f0a52 0%, #3d18bf 52%, #34e0e8 100%);
  --abdul-gradient-radial-glow: radial-gradient(
      ellipse 82% 72% at 50% 112%,
      #34e0e8 0%, #4aa3f5 16%, #3f74f0 33%, #3d18bf 55%, #2e108f 78%, #1f0a52 100%);
  /* The action accent as a gradient (use on CTAs, key underlines) */
  --abdul-gradient-salmon: linear-gradient(135deg, #ff9466 0%, #f5536a 100%);

  /* Legacy aliases — design.css references these names; without them the
     browser silently drops the declarations (transparent bg / no border). */
  --bg-base: var(--bg-canvas);
  --border-default: var(--abdul-ink-200);

  /* ---- LIVELY GRADIENTS — the brand is never flat ----
     Subtle by default: a gentle shift, not a harsh rainbow. Use these
     on buttons, chips, surfaces, icon tiles — anywhere a solid fill
     would feel dead. Body copy stays solid (see element defaults). */
  --abdul-gradient-violet: linear-gradient(135deg, #5526e0 0%, #3d18bf 55%, #3f74f0 100%);  /* primary buttons */
  --abdul-gradient-ink:    linear-gradient(135deg, #282153 0%, #100c2c 100%);                /* secondary / dark */
  --abdul-gradient-mint:   linear-gradient(135deg, #3ce0a6 0%, #0f9b6c 100%);                /* 5th-color fills */
  --abdul-gradient-cyan:   linear-gradient(135deg, #7fecf0 0%, #34e0e8 50%, #3f74f0 100%);
  /* Whisper-subtle surface gradients — barely there, just not flat */
  --abdul-gradient-paper:  linear-gradient(165deg, #fffefb 0%, #f6f3ec 100%);                 /* light cards/canvas */
  --abdul-gradient-raised: linear-gradient(165deg, #ffffff 0%, #f7f4ee 100%);

  /* Heading text gradient — switches per surface (see [data-theme]) */
  --grad-heading: linear-gradient(115deg, #1f0a52 0%, #3d18bf 55%, #3f74f0 100%);

  /* ==============================================================
     SEMANTIC — light mode (Warm Paper canvas)
     ============================================================== */
  --bg-canvas:     var(--abdul-paper-100);
  --bg-surface:    var(--abdul-paper-50);
  --bg-raised:     var(--abdul-white);
  --bg-sunken:     var(--abdul-paper-200);
  --bg-inverse:    var(--abdul-indigo-900);

  --fg-primary:    var(--abdul-ink-900);
  --fg-secondary:  var(--abdul-ink-700);
  --fg-tertiary:   var(--abdul-paper-500);
  --fg-muted:      var(--abdul-paper-400);
  --fg-inverse:    var(--abdul-paper-50);
  --fg-brand:      var(--abdul-violet-700);
  --fg-accent:     var(--abdul-salmon-600);
  /* Salmon-600 is 3.2:1 on paper — fine for buttons and display sizes,
     below WCAG AA for the 11–13px eyebrows and labels that use it. This
     is the same hue pulled dark enough to read (5.4:1). Use it for accent
     text under ~16px; keep --fg-accent for anything larger or filled. */
  --fg-accent-text: #c0303f;
  /* One vertical rhythm for the home page sections. Before this each
     section carried its own padding (96 / 112 / clamp…), which reads as
     uneven breathing room between blocks. */
  --section-y: clamp(56px, 8vw, 104px);

  --border-subtle: var(--abdul-paper-300);
  --border-strong: var(--abdul-ink-900);
  --border-brand:  var(--abdul-violet-700);

  --link:          var(--abdul-violet-700);
  --link-hover:    var(--abdul-salmon-600);

  /* Semantic state — success now keys off the brand mint */
  --success:       var(--abdul-mint-600);
  --warning:       #e0982a;
  --danger:        var(--abdul-salmon-700);
  --info:          var(--abdul-blue-500);

  /* ==============================================================
     TYPOGRAPHY — Ghroob Geometric headlines (Bold, swash only),
     IBM Plex Sans Arabic body, Aref Ruqaa Ink hero accent (2026-09-27)
     ============================================================== */
  --font-arabic:         'IBM Plex Sans Arabic', 'Noto Sans Arabic', sans-serif;
  --font-arabic-display: 'Ghroob Geometric', 'IBM Plex Sans Arabic', sans-serif;

  --font-display: 'Ghroob Geometric', 'DM Sans', sans-serif;
  --font-body:    'IBM Plex Sans Arabic', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono:    'Geist Mono', 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Ghroob's OpenType vocabulary, in the foundry's own names:
       ss04 square dots · dlig the meem ligature · ss01 MORSALA (the
       extended tails, الحروف المرسلة) · ss05 round dots (the unfused
       escape hatch).
     --ff-display = ss04+dlig on EVERY display block (test-enforced —
       font-feature-settings replaces, so a block without it inherits
       the body's round dots).
     --ff-swash   = the pair + morsala. Rationed to hero/section titles,
       .mursal, covers and single display lines: the tails drop below the
       baseline, so line-height 1.4+ and one line only.
     --ff-body    = ss05 (+lnum for the learn digit policy) on <body>.
     Floor ~20px for fused-dot display text. */
  /* 2026-09-27: Abdul kept ONLY the morsala. Square dots (ss04) and the
     special ligatures (dlig) are off; dots are the font's default. The body
     is Plex now, which needs no feature settings. */
  --ff-display: normal;
  --ff-swash:   "ss01" 1;
  --ff-body:    normal;
  --ff-normal:  normal;

  /* ROLLBACK TO THMANYAH — its faces are still declared above and its
     files are still in /fonts. Swap these four stacks and the three
     feature tokens, point the two preloads in
     site/src/layouts/Site.astro at thmanyahserifdisplay-Bold +
     thmanyahsans-Regular, bump OG_VERSION in src/lib/og.ts, done:
       --font-arabic:         'Thmanyah Sans', 'IBM Plex Sans Arabic', 'Noto Sans Arabic', sans-serif;
       --font-arabic-display: 'Thmanyah Serif Display', 'Thmanyah Sans', serif;
       --font-display: 'Thmanyah Serif Display', 'Thmanyah Sans', 'DM Sans', sans-serif;
       --font-body:    'Thmanyah Sans', 'Manrope', -apple-system, BlinkMacSystemFont, sans-serif;
       --ff-display: normal;   --ff-swash: "swsh" 1;   --ff-body: normal; */

  /* Fluid type scale (1.250 major third) */
  --fs-xs:   0.75rem;    /* 12 */
  --fs-sm:   0.875rem;   /* 14 */
  --fs-base: 1rem;       /* 16 */
  --fs-md:   1.125rem;   /* 18 */
  --fs-lg:   1.25rem;    /* 20 */
  --fs-xl:   1.5rem;     /* 24 */
  --fs-2xl:  1.875rem;   /* 30 */
  --fs-3xl:  2.375rem;   /* 38 */
  --fs-4xl:  3rem;       /* 48 */
  --fs-5xl:  3.75rem;    /* 60 */
  --fs-6xl:  4.75rem;    /* 76 */

  --lh-tight:   1.12;
  --lh-snug:    1.3;
  --lh-normal:  1.55;
  --lh-relaxed: 1.8;

  --tracking-tight:  -0.02em;
  --tracking-normal: 0;
  --tracking-wide:   0.04em;
  --tracking-caps:   0.1em;

  --fw-light:    300;
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;
  --fw-black:    900;

  /* ==============================================================
     SPACING — 4px base
     ============================================================== */
  --s-0:  0;
  --s-1:  0.25rem;
  --s-2:  0.5rem;
  --s-3:  0.75rem;
  --s-4:  1rem;
  --s-5:  1.5rem;
  --s-6:  2rem;
  --s-7:  3rem;
  --s-8:  4rem;
  --s-9:  6rem;
  --s-10: 8rem;

  /* ==============================================================
     RADII — soft, echoing the curved "A" monogram
     ============================================================== */
  --r-xs:   3px;
  --r-sm:   6px;
  --r-md:   10px;
  --r-lg:   14px;
  --r-xl:   20px;
  --r-2xl:  28px;
  --r-pill: 999px;
  --r-circle: 50%;

  /* ==============================================================
     SHADOWS — cool indigo tint
     ============================================================== */
  --shadow-xs: 0 1px 2px rgba(31, 10, 82, 0.08);
  --shadow-sm: 0 2px 6px rgba(31, 10, 82, 0.10);
  --shadow-md: 0 6px 18px rgba(31, 10, 82, 0.12), 0 2px 4px rgba(31, 10, 82, 0.08);
  --shadow-lg: 0 16px 36px rgba(31, 10, 82, 0.16), 0 4px 8px rgba(31, 10, 82, 0.08);
  --shadow-xl: 0 28px 60px rgba(31, 10, 82, 0.22);

  /* Glows — brand light spill */
  --glow-violet: 0 10px 32px rgba(61, 24, 191, 0.34);
  --glow-cyan:   0 10px 32px rgba(52, 224, 232, 0.36);
  --glow-salmon: 0 10px 30px rgba(245, 83, 106, 0.34);
  --glow-mint:   0 10px 30px rgba(31, 216, 150, 0.32);
  /* legacy alias */
  --glow-ember:  var(--glow-salmon);

  --ring-focus: 0 0 0 3px rgba(61, 24, 191, 0.42);

  /* ==============================================================
     MOTION
     ============================================================== */
  --dur-fast:   120ms;
  --dur-base:   200ms;
  --dur-slow:   380ms;
  --dur-slower: 640ms;
  --ease-standard: cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-entrance: cubic-bezier(0, 0, 0.2, 1);
  --ease-exit:     cubic-bezier(0.4, 0, 1, 1);

  /* ==============================================================
     LAYOUT
     ============================================================== */
  --container-sm:   640px;
  --container-md:   768px;
  --container-lg:   1024px;
  --container-xl:   1200px;
  --container-2xl:  1440px;
}

/* ------------------------------------------------------------------
   DARK / BRAND SURFACE — the GRADIENT itself as the dark canvas.
   Swap into a section with [data-theme="brand"] or .theme-brand.
   ------------------------------------------------------------------ */
[data-theme="brand"],
.theme-brand {
  --bg-canvas:    var(--abdul-gradient-core);
  --bg-surface:   rgba(255,255,255,0.07);
  --bg-raised:    var(--abdul-indigo-800);
  --bg-sunken:    var(--abdul-indigo-950);

  --fg-primary:   var(--abdul-paper-50);
  --fg-secondary: var(--abdul-ink-200);
  --fg-tertiary:  var(--abdul-ink-300);
  --fg-muted:     var(--abdul-ink-400);
  --fg-brand:     var(--abdul-cyan-400);
  --fg-accent:    var(--abdul-salmon-400);

  --border-subtle: rgba(255,255,255,0.14);
  --border-strong: rgba(255,255,255,0.32);
  --border-brand:  var(--abdul-cyan-400);
  --link:          var(--abdul-cyan-400);
  --link-hover:    var(--abdul-salmon-300);
  /* On the dark gradient surface, headings glow light→cyan */
  --grad-heading:  linear-gradient(115deg, #ffffff 0%, #cdeffb 55%, #7fecf0 100%);
}

/* ------------------------------------------------------------------
   ELEMENT DEFAULTS — apply to body.abdul-brand for out-of-the-box look.
   Arabic-first: RTL by default. Add dir="ltr" / .ltr for Latin blocks.
   ------------------------------------------------------------------ */
body.abdul-brand {
  /* Keep our existing body styling in design.css — these element defaults
     are intentionally NOT mass-applied because design.css already owns
     fine-grained typography per layout. The token vars above are the
     contract; everything in design.css inherits the new values. */
  font-family: var(--font-body);
}

/* Heading gradient (text fill) — opt-in via .grad-text or applied to
   .hero-title / .section-title in design.css for the splashy treatment. */
.grad-text {
  background: var(--grad-heading);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* Swash on/off toggles — for Arabic display flourishes. */
.mursal   { font-feature-settings: var(--ff-swash); }
.no-swash { font-feature-settings: var(--ff-normal); }

/* Gradient fill helpers (non-text): backgrounds. */
.grad-fill        { background: var(--abdul-gradient-violet); color: #fff; }
.grad-fill-salmon { background: var(--abdul-gradient-salmon); color: #fff; }
.grad-fill-mint   { background: var(--abdul-gradient-mint);   color: #06241a; }

/* ==================================================================
   COVER PALETTES — the Instagram-cover rotation as reusable tokens.
   Eight named recipes. Set data-cover="petrol|ember|mint|cyan|cream|
   violet|synth|sunset" on a cover root, then use the .cover-* utilities
   (surface / block / tag / serif / rail). Each palette carries its own
   background, text, accent, highlight-BLOCK pair, and RAIL color.
   ================================================================== */
[data-cover]{ /* default = petrol */
  --cover-bg:linear-gradient(165deg,#08231b,#0c2c22 55%,#1f0a52);
  --cover-text:#f4efe2; --cover-sub:#87b4a1;
  --cover-accent:#34e0e8; --cover-on-accent:#06241a;
  --cover-block-bg:#1fd896; --cover-block-fg:#06241a; --cover-rail:#34e0e8;
}
[data-cover="petrol"]{ --cover-bg:linear-gradient(165deg,#08231b,#0c2c22 55%,#1f0a52); --cover-text:#f4efe2; --cover-sub:#87b4a1; --cover-accent:#34e0e8; --cover-on-accent:#06241a; --cover-block-bg:#1fd896; --cover-block-fg:#06241a; --cover-rail:#34e0e8; }
[data-cover="ember"]{ --cover-bg:linear-gradient(150deg,#ff9466,#f5536a 68%,#ed3a12); --cover-text:#ffffff; --cover-sub:rgba(255,255,255,.88); --cover-accent:#1f0a52; --cover-on-accent:#ffffff; --cover-block-bg:#1f0a52; --cover-block-fg:#34e0e8; --cover-rail:#ffffff; }
[data-cover="mint"]{ --cover-bg:radial-gradient(120% 90% at 50% 0,#5cf0bd,#1fd896 55%,#0f9b6c); --cover-text:#06241a; --cover-sub:#0c7d57; --cover-accent:#3d18bf; --cover-on-accent:#ffffff; --cover-block-bg:#06241a; --cover-block-fg:#1fd896; --cover-rail:#0f7d5a; }
[data-cover="cyan"]{ --cover-bg:radial-gradient(120% 90% at 50% 0,#7fecf0,#34e0e8 55%,#15a8c4); --cover-text:#0a2540; --cover-sub:#0c5b6b; --cover-accent:#f5536a; --cover-on-accent:#ffffff; --cover-block-bg:#1f0a52; --cover-block-fg:#34e0e8; --cover-rail:#0a7d92; }
[data-cover="cream"]{ --cover-bg:linear-gradient(165deg,#fffefb,#f4efe2); --cover-text:#1f0a52; --cover-sub:#645e96; --cover-accent:#f5536a; --cover-on-accent:#ffffff; --cover-block-bg:#f5536a; --cover-block-fg:#ffffff; --cover-rail:#c9b8d6; }
[data-cover="violet"]{ --cover-bg:radial-gradient(92% 80% at 50% 112%,#2f6bff,#5a16e6 45%,#1f0a52 90%); --cover-text:#ffffff; --cover-sub:#cdbff5; --cover-accent:#34e0e8; --cover-on-accent:#06241a; --cover-block-bg:#1fd896; --cover-block-fg:#06241a; --cover-rail:#34e0e8; }
[data-cover="synth"]{ --cover-bg:linear-gradient(180deg,#0a0820,#1f0a52 60%,#3d18bf); --cover-text:#f4efe2; --cover-sub:#b6a8e8; --cover-accent:#ff7a2e; --cover-on-accent:#0a0820; --cover-block-bg:#34e0e8; --cover-block-fg:#0a0820; --cover-rail:#ff7a2e; }
[data-cover="sunset"]{ --cover-bg:linear-gradient(180deg,#ff9466,#f5536a 45%,#5a16e6); --cover-text:#ffffff; --cover-sub:rgba(255,255,255,.88); --cover-accent:#34e0e8; --cover-on-accent:#06241a; --cover-block-bg:#fffefb; --cover-block-fg:#1f0a52; --cover-rail:#34e0e8; }

.cover-surface{ background:var(--cover-bg); color:var(--cover-text); }
/* BLOCKS — stacked highlight-block headline. Wrap each line in its own
   .cover-block; the clone keeps padding intact across line breaks. */
.cover-block{
  display:inline; -webkit-box-decoration-break:clone; box-decoration-break:clone;
  font-family:var(--font-arabic); font-weight:var(--fw-black);
  background:var(--cover-block-bg); color:var(--cover-block-fg);
  padding:2px 16px; border-radius:11px; line-height:1.5;
}
.cover-tag{
  display:inline-block; font-family:var(--font-arabic); font-weight:800;
  background:var(--cover-accent); color:var(--cover-on-accent);
  padding:7px 18px; border-radius:8px; box-shadow:0 8px 20px rgba(0,0,0,.25);
}
.cover-serif{ font-family:var(--font-arabic-display); color:var(--cover-text); font-feature-settings:var(--ff-swash); line-height:1.14; }
/* RAILS — accent bars: a vertical spine or a horizontal rule. */
.cover-rail   { background:var(--cover-rail); border-radius:4px; }
.cover-rail-v { width:4px; align-self:stretch; background:var(--cover-rail); border-radius:4px; }
.cover-rail-h { height:3px; width:100%; background:var(--cover-accent); border-radius:4px; }

/* City skyline band — global so it renders on EVERY page's sky header
   (marketing, Souq, hub, learn), not only the home/learn heroes whose
   design.css also defines it. Injected by sky.js on [data-skyline]. */
/* ---------------------------------------------------------------------
   Framed hero — the "canvas" first fold.
   The dark sky floats on the paper canvas instead of bleeding edge to edge:
   page background shows around the hero on top/left/right, with matching
   rounded corners. Born on respond.abdulosama.com (Abdul liked it), now the
   house treatment for every hero. Desktop only; phones stay full-bleed —
   a 12px gutter on a 375px screen is just lost width.
   The fixed navbar floats over it unchanged, and sky.js's layers are
   position:absolute inside the hero, so overflow:hidden clips them cleanly.
   --------------------------------------------------------------------- */
@media (min-width: 900px) {
  .hero-inset {
    margin: 12px 12px 0;
    border-radius: 14px;   /* subtle curve — Abdul wanted it edgier than the cards */
    overflow: hidden;
  }
}

.sky-skyline {
  /* `position` + `bottom` are !important on purpose. Several page stylesheets
     carry a `[data-sky] > * { position: relative }` (site.css) — and hub.css a
     `.hub-hero[data-sky] > *` — that lifts hero CONTENT above the star canvas.
     Those rules match this injected band too, have equal/higher specificity,
     and load after tokens.css, so without !important they'd drop the skyline
     into normal flow and float it mid-hero (this happened on the blog/stack/
     partners/speaking/books/contact/404 heroes). It's a decorative seam band
     that must ALWAYS sit at the bottom, on every page — hence the override. */
  position: absolute !important; left: 0; right: 0; bottom: 0 !important;
  height: clamp(64px, 12vh, 150px);
  z-index: 0; pointer-events: none;
  background: linear-gradient(to top, #0a1450 0%, #131f5c 46%, rgba(19,31,92,0) 100%);
  -webkit-mask: url(/images/skyline.png?v=2) repeat-x bottom / auto 100%;
          mask: url(/images/skyline.png?v=2) repeat-x bottom / auto 100%;
  opacity: .5;
}
@media (prefers-reduced-motion: reduce) { .sky-skyline { opacity: .4; } }


/* ==============================================================
   HEADLINE ROOM + BODY RHYTHM + HERO ACCENT (Type Lab, 2026-09-27)
   Headings are painted with a gradient fill (background-clip:text),
   which only paints INSIDE the element's box — Ghroob's swash tails and
   dots reach past it and were cut off. Padding gives the paint room;
   one line-height keeps multi-line titles even. !important because
   design.css loads after this file and sets its own per-title values.
   ============================================================== */
.hero-title, .section-title, .bio-rich-title, .course-title, .b2b-title,
.li-section-title, .li-exp-title, .ao-book-title, .ao-stat b,
.ao-blog-hero h1, main h1, main h2 {
  line-height: 1.2 !important;
  padding-top: .2em !important;
  padding-bottom: .2em !important;
}
main p, main li { line-height: 1.6 !important; }
/* «عبدول» in the hero: Aref Ruqaa Ink, recoloured light for the dark sky. */
@font-palette-values --ruqaa-light { font-family: 'Aref Ruqaa Ink'; override-colors: 0 #ffffff88, 1 #ffffff, 2 #9fd8ff, 3 #9fd8ff88, 4 #9fd8ff; }
.hero-title .accent {
  font-family: 'Aref Ruqaa Ink', var(--font-arabic-display) !important;
  font-palette: --ruqaa-light;
  font-weight: 400 !important;
  font-feature-settings: normal !important;
  font-size: 1.6em;
  line-height: 1.3;
  display: inline-block;
  padding: 0 .08em;
  background: none !important;
  -webkit-text-fill-color: currentColor !important;
}

/* ==============================================================
   WhatsApp updates signup (components/Newsletter.astro) — shared by the
   marketing footer and the learn landing. .nl--dark on sky sections.
   ============================================================== */
.nl { max-width: 720px; margin: 0 auto; padding: 48px 20px; text-align: center; }
.nl-eyebrow { font-size: 14px; font-weight: 600; color: var(--fg-accent-text, #c0303f); margin-bottom: 6px; }
.nl-title { font-family: var(--font-arabic-display); font-feature-settings: var(--ff-swash); font-size: clamp(26px, 3.4vw, 38px); margin: 0 0 10px; color: var(--fg-primary, #16103a); }
.nl-sub { font-size: 16px; color: var(--fg-secondary, #4b4670); margin: 0 auto 22px; max-width: 56ch; }
.nl-form { display: grid; grid-template-columns: 1fr 1.2fr auto; gap: 10px; align-items: stretch; }
.nl-field { display: block; }
.nl-field input { width: 100%; height: 50px; padding: 0 16px; border-radius: 14px; border: 1.5px solid var(--border-strong, rgba(20,8,50,.18)); background: #fff; color: #16103a; font: inherit; font-size: 16px; box-sizing: border-box; }
.nl-field input:focus { outline: none; border-color: var(--abdul-violet-600, #6c4dff); box-shadow: 0 0 0 3px rgba(108,77,255,.15); }
.nl-btn { height: 50px; padding: 0 22px; border: 0; border-radius: 14px; background: var(--abdul-gradient-salmon, #f5536a); color: #fff; font: inherit; font-weight: 700; font-size: 16px; cursor: pointer; white-space: nowrap; }
.nl-btn:active { transform: scale(.98); }
.nl-btn[disabled] { opacity: .6; cursor: wait; }
.nl-msg { grid-column: 1 / -1; margin: 4px 0 0; font-size: 15px; font-weight: 600; }
.nl-msg.is-ok { color: #1f9d6a; } .nl-msg.is-err { color: #c0303f; }
.nl-consent { grid-column: 1 / -1; margin: 2px 0 0; font-size: 13px; color: var(--fg-tertiary, #6b6488); }
/* Spam trap: visually hidden in place. NOT left:-9999px — on right-to-left
   pages that offset is scrollable and made phones lay the page out ~10,000px wide. */
.nl-hp { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); opacity: 0; pointer-events: none; }
.nl-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.nl--dark .nl-title { color: #fff; } .nl--dark .nl-sub, .nl--dark .nl-consent { color: rgba(255,255,255,.78); }
.nl--dark .nl-eyebrow { color: #ff9aa4; } .nl--dark .nl-msg.is-ok { color: #5ef0b8; } .nl--dark .nl-msg.is-err { color: #ffb4bb; }
.nl--dark .nl-field input { border-color: rgba(255,255,255,.25); }
@media (max-width: 700px) { .nl-form { grid-template-columns: 1fr; } }
.learn-support { text-align: center; padding: 18px 16px 28px; font-size: 14px; color: var(--fg-tertiary, #6b6488); }
.learn-support a { color: var(--fg-accent-text, #c0303f); font-weight: 600; }

/* ==============================================================
   MOTION v1 (2026-09-27) — smooth and light, browser-native first.
   1. Page transitions: same-origin navigations cross-fade with the
      View Transitions API (no JS). The navbars keep their place.
   2. Scroll reveals: where the browser supports scroll-driven
      animations, [data-rv] is tied to scroll position on the compositor
      (motion.js adds .sd-motion and stops there); elsewhere motion.js
      keeps the IntersectionObserver fade (.js-motion, site.css).
   3. Reduced motion: everything below switches off.
   Only opacity/transform animate — never layout.
   ============================================================== */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) {
  animation-duration: 280ms;
  animation-timing-function: cubic-bezier(.2, .7, .2, 1);
}
::view-transition-old(root) { animation-name: vt-out; }
::view-transition-new(root) { animation-name: vt-in; }
@keyframes vt-out { to { opacity: 0; transform: translateY(-6px); } }
@keyframes vt-in { from { opacity: 0; transform: translateY(10px); } }
.ao-nav { view-transition-name: site-nav; }
.tnav { view-transition-name: learn-nav; }
::view-transition-group(site-nav), ::view-transition-group(learn-nav) { animation-duration: 0s; }

@keyframes rv-in  { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
@keyframes rv-pop { from { opacity: 0; transform: scale(.92) translateY(10px); } to { opacity: 1; transform: none; } }
@supports (animation-timeline: view()) {
  .sd-motion [data-rv] {
    animation: rv-in linear both;
    animation-timeline: view();
    /* staggered children start a little later in the same scroll range */
    /* a fixed distance, so tall sections aren't left half-faded */
    animation-range: entry calc(var(--rv-i, 0) * 40px) entry calc(160px + var(--rv-i, 0) * 40px);
  }
  .sd-motion .rv-stats > [data-rv] { animation-name: rv-pop; }
}

/* Desktop hover lift on course cards (the other cards already have theirs) */
@media (hover: hover) {
  .course-card { transition: transform .35s cubic-bezier(.2, .7, .2, 1), box-shadow .35s cubic-bezier(.2, .7, .2, 1); }
  .course-card:hover { transform: translateY(-4px); }
  .btn-primary { transition: transform .25s cubic-bezier(.2, .7, .2, 1), filter .25s; }
  .btn-primary:hover { transform: translateY(-2px); filter: brightness(1.06); }
}

@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  .sd-motion [data-rv] { animation: none; }
}
/* Home hero entrance (js/hero-motion.js): hidden only until the script
   has set its start states; an inline timer removes this after 3 s even
   if the script never runs. */
.hero-anim #hero-title, .hero-anim #hero .hero-tagline, .hero-anim #hero .hero-sub,
.hero-anim #hero .hero-cta-row, .hero-anim #hero .hero-badge { visibility: hidden; }
#hero-title .hw { display: inline-block; will-change: transform, opacity; }