/* =====================================================================
   PASS-PM Academy — stylesheet
   ---------------------------------------------------------------------
   1. Runtime helpers   the handful of rules the binding attributes in
                        index.html rely on (data-if, hover classes)
   2. Keyframes         every named animation used by the illustrations
   3. @font-face        DM Sans, Space Grotesk, Tajawal (self-hosted woff2)
   4. Layout / RTL      responsive rules and the Arabic overrides, keyed
                        on the data-r="..." role attributes in the markup

   Element-level styling stays inline in index.html, as in the design it
   was built from; this file holds what an inline style cannot express.
   ===================================================================== */

/* ---------------------------------------------------------------------
   1. Runtime helpers
   --------------------------------------------------------------------- */

/* data-if wrappers must not introduce a box of their own, or they would
   break the grid/flex parents they sit inside. display:contents keeps
   their children as direct children of the real layout parent. */
.if { display: contents; }
.if[hidden] { display: none !important; }

/* View sections are toggled by the router. */
.view[hidden] { display: none !important; }

/* Hover treatments. These were inline hover styles in the source design,
   so each rule has to out-specify the element's own inline style. The
   card variants read their accent from --hv-color / --hv-bg, which
   app.js sets per item (certification colour, simulator colour, ...). */
.hv-text-violet:hover  { color: #A78BFA !important; }
.hv-text-lilac:hover   { color: #C4B5FD !important; }
.hv-chip:hover         { background: #F3E8FF !important; border-color: #DDD6FE !important; }
.hv-chip-strong:hover  { background: #F3E8FF !important; border-color: #C4B5FD !important; }
.hv-select:hover       { background: #F5F3FF !important; border-color: #6D28D9 !important; }
.hv-glass:hover        { background: rgba(255,255,255,0.1) !important; border-color: #fff !important; }
.hv-border-violet:hover{ border-color: #C4B5FD !important; }
.hv-lift:hover         { transform: translateY(-2px) !important; }
.hv-opaque:hover       { opacity: 1 !important; }
.hv-dim:hover          { opacity: 0.9 !important; }
.hv-thumb:hover        { opacity: 1 !important; transform: translateY(-4px) !important; }
.hv-cta:hover          { transform: translateY(-2px) !important; box-shadow: 0 8px 24px rgba(109,40,217,0.4) !important; }
.hv-cta-soft:hover     { transform: translateY(-2px) !important; box-shadow: 0 8px 28px rgba(109,40,217,0.4) !important; }
.hv-cta-strong:hover   { transform: translateY(-2px) !important; box-shadow: 0 8px 28px rgba(109,40,217,0.45) !important; }
.hv-card-lift:hover    { border-color: #C4B5FD !important; box-shadow: 0 6px 20px rgba(109,40,217,0.08) !important; transform: translateY(-2px) !important; }
.hv-card-lift-lg:hover { border-color: #C4B5FD !important; box-shadow: 0 8px 28px rgba(109,40,217,0.08) !important; transform: translateY(-3px) !important; }
.hv-card-glow:hover    { border-color: #C4B5FD !important; box-shadow: 0 8px 28px rgba(109,40,217,0.14) !important; }
.hv-card-float:hover   { border-color: #C4B5FD !important; box-shadow: 0 12px 32px rgba(109,40,217,0.12) !important; transform: translateY(-6px) !important; }
.hv-cert-card:hover    { border-color: var(--hv-color, #C4B5FD) !important; box-shadow: 0 8px 32px rgba(109,40,217,0.12) !important; transform: translateY(-4px) !important; }
.hv-sim-card:hover     { border-color: var(--hv-color, #C4B5FD) !important; box-shadow: 0 4px 20px rgba(0,0,0,0.08) !important; transform: translateY(-2px) !important; }
.hv-coach-card:hover   { border-color: var(--hv-color, #C4B5FD) !important; box-shadow: 0 4px 16px rgba(0,0,0,0.06) !important; transform: translateY(-2px) !important; }
.hv-other-cert:hover   { background: var(--hv-bg, #F3E8FF) !important; border-color: var(--hv-color, #C4B5FD) !important; }

/* ---------------------------------------------------------------------
   2. Keyframes
   --------------------------------------------------------------------- */
@keyframes aiNodePulse { 0%,100% { opacity: 0.7; } 50% { opacity: 1; } }
@keyframes aiLineDash { to { stroke-dashoffset: -20; } }
@keyframes aiFloatUp { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes aiGlow { 0%,100% { opacity: 0.15; } 50% { opacity: 0.35; } }
@keyframes acpCard1 { 0%,15% { transform:translateX(0); opacity:1; } 20%,35% { transform:translateX(88px); opacity:1; } 40%,55% { transform:translateX(176px); opacity:1; } 60%,80% { transform:translateX(264px); opacity:1; } 85%,100% { transform:translateX(0); opacity:0.3; } }
@keyframes acpCard2 { 0%,20% { transform:translateX(88px); opacity:1; } 25%,45% { transform:translateX(176px); opacity:1; } 50%,70% { transform:translateX(264px); opacity:1; } 75%,90% { transform:translateX(0); opacity:0.3; } 95%,100% { transform:translateX(0); opacity:1; } }
@keyframes acpFeedback { 0%,100% { stroke-dashoffset: 0; } 50% { stroke-dashoffset: -40; } }
@keyframes acpSprintPulse { 0%,70%,100% { opacity:0.5; } 75%,85% { opacity:1; } }
@keyframes rmpAlert { 0%,5% { opacity:0; } 10%,30% { opacity:1; } 35%,50% { opacity:0; } 55%,75% { opacity:1; } 80%,100% { opacity:0; } }
@keyframes rmpMitigate { 0%,30% { fill:#EF4444; } 50%,70% { fill:#F59E0B; } 85%,100% { fill:#10B981; } }
@keyframes rmpScore { 0%,20% { width:65%; } 40%,50% { width:55%; } 70%,100% { width:75%; } }
@keyframes rmpHeatCell { 0%,40% { opacity:0.15; } 50%,60% { opacity:0.5; } 70%,100% { opacity:0.15; } }
@keyframes renewSpin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes renewPulse { 0%,100% { transform: scale(1); opacity: 0.7; } 50% { transform: scale(1.15); opacity: 1; } }
@keyframes renewFadeUp { 0% { opacity: 0; transform: translateY(12px); } 100% { opacity: 1; transform: translateY(0); } }
@keyframes renewGlow { 0%,100% { box-shadow: 0 0 20px rgba(109,40,217,0.15); } 50% { box-shadow: 0 0 40px rgba(109,40,217,0.35); } }
@keyframes renewOrbit { from { transform: rotate(0deg) translateX(90px) rotate(0deg); } to { transform: rotate(360deg) translateX(90px) rotate(-360deg); } }
@keyframes renewDash { to { stroke-dashoffset: -60; } }
@keyframes renewCountUp { 0% { opacity: 0; transform: translateY(8px); } 40% { opacity: 1; transform: translateY(0); } }
@keyframes renewFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
@keyframes renewShimmer { 0% { background-position: -200% center; } 100% { background-position: 200% center; } }
@keyframes aboutFadeUp { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: translateY(0); } }
@keyframes aboutBarGrow { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes aboutCheckDraw { from { stroke-dashoffset: 200; } to { stroke-dashoffset: 0; } }
@keyframes aboutDotPop { 0% { transform: scale(0); opacity: 0; } 60% { transform: scale(1.3); } 100% { transform: scale(1); opacity: 1; } }
@keyframes aboutStepReveal { from { opacity: 0; transform: translateX(20px); } to { opacity: 1; transform: translateX(0); } }
[dir="rtl"] .about-step-reveal { animation-name: aboutStepRevealRTL !important; }
@keyframes wsFloat { 0%,100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-8px) rotate(3deg); } }
@keyframes wsFloat2 { 0%,100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-6px) rotate(-4deg); } }
@keyframes wsBuild { 0% { transform: scaleY(0); opacity: 0; } 100% { transform: scaleY(1); opacity: 1; } }
@keyframes wsHandMove { 0%,100% { transform: translateY(0); } 30% { transform: translateY(-12px); } 60% { transform: translateY(-4px); } }
@keyframes wsPulse { 0%,100% { opacity: 0.6; } 50% { opacity: 1; } }
@keyframes wsSnap { 0% { transform: translateY(-20px); opacity: 0; } 60% { transform: translateY(2px); opacity: 1; } 100% { transform: translateY(0); opacity: 1; } }
@keyframes aboutStepRevealRTL { from { opacity: 0; transform: translateX(-20px); } to { opacity: 1; transform: translateX(0); } }

/* ---------------------------------------------------------------------
   3. @font-face — self-hosted subsets, same slicing Google Fonts ships
   --------------------------------------------------------------------- */
/* latin-ext */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/dm-sans-latin-ext.woff2') format('woff2');
  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;
}
/* latin */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/dm-sans-latin.woff2') format('woff2');
  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;
}
/* latin-ext */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/dm-sans-latin-ext.woff2') format('woff2');
  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;
}
/* latin */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/dm-sans-latin.woff2') format('woff2');
  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;
}
/* latin-ext */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/dm-sans-latin-ext.woff2') format('woff2');
  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;
}
/* latin */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/dm-sans-latin.woff2') format('woff2');
  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;
}
/* latin-ext */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/dm-sans-latin-ext.woff2') format('woff2');
  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;
}
/* latin */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/dm-sans-latin.woff2') format('woff2');
  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;
}
/* vietnamese */
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/space-grotesk-vietnamese.woff2') format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/space-grotesk-latin-ext.woff2') format('woff2');
  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;
}
/* latin */
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/space-grotesk-latin.woff2') format('woff2');
  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;
}
/* vietnamese */
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/space-grotesk-vietnamese.woff2') format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/space-grotesk-latin-ext.woff2') format('woff2');
  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;
}
/* latin */
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/space-grotesk-latin.woff2') format('woff2');
  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;
}
/* vietnamese */
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/space-grotesk-vietnamese.woff2') format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/space-grotesk-latin-ext.woff2') format('woff2');
  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;
}
/* latin */
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/space-grotesk-latin.woff2') format('woff2');
  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;
}
/* vietnamese */
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/space-grotesk-vietnamese.woff2') format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/space-grotesk-latin-ext.woff2') format('woff2');
  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;
}
/* latin */
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/space-grotesk-latin.woff2') format('woff2');
  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;
}
/* arabic */
@font-face {
  font-family: 'Tajawal';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/tajawal-400-arabic.woff2') format('woff2');
  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;
}
/* latin */
@font-face {
  font-family: 'Tajawal';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/tajawal-400-latin.woff2') format('woff2');
  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;
}
/* arabic */
@font-face {
  font-family: 'Tajawal';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/tajawal-500-arabic.woff2') format('woff2');
  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;
}
/* latin */
@font-face {
  font-family: 'Tajawal';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/tajawal-500-latin.woff2') format('woff2');
  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;
}
/* arabic */
@font-face {
  font-family: 'Tajawal';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/tajawal-700-arabic.woff2') format('woff2');
  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;
}
/* latin */
@font-face {
  font-family: 'Tajawal';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/tajawal-700-latin.woff2') format('woff2');
  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;
}

/* ---------------------------------------------------------------------
   4. Layout, responsive behaviour and RTL overrides
   --------------------------------------------------------------------- */
[data-lang="rtl"] [data-r="hiw-eyebrow"] { font-size: 18px !important; font-weight: 600 !important; color: #00799E !important; letter-spacing: 0.5px !important; text-transform: none !important; }
[data-lang="rtl"] [data-r="hiw-h2"] { font-size: 32px !important; font-weight: 700 !important; line-height: 1.45 !important; }
[data-lang="rtl"] [data-r="hiw-step-t"] { font-size: 17.5px !important; font-weight: 700 !important; line-height: 1.5 !important; margin-bottom: 10px !important; }
[data-lang="rtl"] [data-r="hiw-step-d"] { font-size: 15px !important; font-weight: 500 !important; color: #39294F !important; line-height: 1.8 !important; }
@media (max-width: 768px) {
  [data-lang="rtl"] [data-r="hiw-h2"] { font-size: 26px !important; }
  [data-lang="rtl"] [data-r="hiw-step-t"] { font-size: 16.5px !important; }
  [data-lang="rtl"] [data-r="hiw-step-d"] { font-size: 15px !important; }
}
[data-lang="rtl"] [data-r="wyg-eyebrow"] { font-size: 18px !important; font-weight: 600 !important; color: #00799E !important; letter-spacing: 0.5px !important; text-transform: none !important; }
[data-r="wyg"][data-lang="rtl"] [data-r="rg"] > div { direction: rtl !important; text-align: right !important; }
[data-r="wyg"][data-lang="rtl"] [data-r="rg"] > div > svg { display: block !important; margin-left: auto !important; margin-right: 0 !important; }
[data-lang="rtl"] [data-r="wyg-t"], [data-lang="rtl"] [data-r="wyg-d"] { direction: rtl !important; text-align: right !important; }
[data-lang="rtl"] [data-r="wyg-t"] { font-weight: 700 !important; line-height: 1.5 !important; }
[data-lang="rtl"] [data-r="wyg-d"] { font-size: 17px !important; font-weight: 500 !important; color: #241F2E !important; line-height: 1.7 !important; }
@media (max-width: 768px) {
  [data-lang="rtl"] [data-r="wyg-d"] { font-size: 15px !important; }
}
[data-r="cpk"] [data-r="rg"] { align-items: stretch; }
[data-r="cpk-price"] { color: #6D28D9 !important; }
[data-lang="rtl"] [data-r="cpk-eyebrow"] { font-size: 18px !important; font-weight: 600 !important; color: #00799E !important; letter-spacing: 0.5px !important; text-transform: none !important; }
[data-lang="rtl"] [data-r="cpk-h2"] { font-size: 32px !important; font-weight: 700 !important; line-height: 1.45 !important; }
[data-lang="rtl"] [data-r="cpk-sub"] { font-size: 17px !important; color: #241F2E !important; line-height: 1.7 !important; }
[data-lang="rtl"] [data-r="cpk-abbrev"] { font-size: 17px !important; }
[data-lang="rtl"] [data-r="cpk-aud"] { font-size: 15px !important; font-weight: 500 !important; color: #241F2E !important; line-height: 1.75 !important; direction: rtl !important; text-align: center !important; }
[data-r="cpk"] [data-r="rg"] > div { align-items: center !important; text-align: center !important; }
[data-r="cpk"] [data-r="rg"] > div > img { margin-left: auto !important; margin-right: auto !important; }
[data-r="cpk"] [data-r="rg"] > div > div { width: 100% !important; text-align: center !important; }
[data-lang="rtl"] [data-r="cpk-from"] { font-size: 13px !important; color: #39294F !important; }
@media (max-width: 768px) {
  [data-lang="rtl"] [data-r="cpk-h2"] { font-size: 26px !important; }
  [data-lang="rtl"] [data-r="cpk-aud"] { font-size: 15px !important; }
}
[data-lang="rtl"] [data-r="tst-eyebrow"] { font-size: 18px !important; font-weight: 600 !important; color: #00799E !important; letter-spacing: 0.5px !important; text-transform: none !important; }
[data-lang="rtl"] [data-r="tst-h2"] { font-size: 32px !important; font-weight: 700 !important; line-height: 1.45 !important; }
[data-lang="rtl"] [data-r="tst-q"] { font-size: 15px !important; font-weight: 400 !important; font-style: normal !important; color: #241F2E !important; line-height: 1.8 !important; direction: rtl !important; text-align: right !important; }
[data-lang="rtl"] [data-r="tst-n"] { font-size: 15px !important; font-weight: 700 !important; color: #200F3B !important; direction: rtl !important; text-align: right !important; }
[data-lang="rtl"] [data-r="tst-r"] { font-size: 13px !important; color: #39294F !important; line-height: 1.6 !important; direction: rtl !important; text-align: right !important; }
[data-lang="rtl"] [data-r="tst-stars"] { direction: rtl !important; justify-content: flex-start !important; }
[data-lang="rtl"] [data-r="tst-foot"] { direction: rtl !important; }
[data-lang="rtl"] [data-r="tst-foot"] > img { margin-left: 0 !important; margin-right: auto !important; }
@media (max-width: 768px) {
  [data-lang="rtl"] [data-r="tst-h2"] { font-size: 26px !important; }
  [data-lang="rtl"] [data-r="tst-q"] { font-size: 15px !important; }
}
[data-lang="rtl"] [data-r="cfaq-q"], [data-lang="rtl"] [data-r="cfaq-a"] { direction: rtl !important; text-align: right !important; }
[data-r="cfaq"][data-lang="rtl"] [data-r="cfaq-q"] { flex: 1 1 auto !important; }
[data-lang="rtl"] [data-r="cfaq-eyebrow"] { font-size: 18px !important; font-weight: 600 !important; color: #00799E !important; letter-spacing: 0.5px !important; text-transform: none !important; }
[data-lang="rtl"] [data-r="cfaq-h2"], [data-lang="rtl"] [data-r="wyg-h2"], [data-lang="rtl"] [data-r="cta-h2"] { font-size: 32px !important; font-weight: 700 !important; line-height: 1.45 !important; }
[data-lang="rtl"] [data-r="cfaq-sub"] { font-size: 17px !important; color: #241F2E !important; line-height: 1.7 !important; }
[data-lang="rtl"] [data-r="cfaq-q"] { font-size: 17px !important; }
[data-lang="rtl"] [data-r="cfaq-a"] { font-size: 15px !important; color: #241F2E !important; line-height: 1.8 !important; }
@media (max-width: 768px) {
  [data-lang="rtl"] [data-r="cfaq-h2"], [data-lang="rtl"] [data-r="wyg-h2"], [data-lang="rtl"] [data-r="cta-h2"] { font-size: 26px !important; }
  [data-lang="rtl"] [data-r="cfaq-q"] { font-size: 15px !important; }
}
[data-lang="rtl"] [data-r="cg-eyebrow"] { font-size: 18px !important; font-weight: 600 !important; letter-spacing: 0 !important; text-transform: none !important; }
[data-lang="rtl"] [data-r="sg-cat"] { letter-spacing: 0 !important; text-transform: none !important; }
[data-lang="rtl"] [data-r="cg-sub"] { font-size: 17px !important; color: #241F2E !important; line-height: 1.75 !important; }
[data-lang="rtl"] [data-r="cg-name"] { font-size: 17.5px !important; line-height: 1.5 !important; color: #200F3B !important; direction: rtl !important; text-align: right !important; }
[data-lang="rtl"] [data-r="cg-aud"] { font-size: 15px !important; color: #241F2E !important; line-height: 1.75 !important; direction: rtl !important; text-align: right !important; }
[data-lang="rtl"] [data-r="cg-hours"], [data-lang="rtl"] [data-r="cg-langs"] { font-size: 12px !important; }
/* Global Arabic type scale — applies to every page */
[data-lang="rtl"] h1 { font-size: 42px; font-weight: 700; line-height: 1.4; }
[data-lang="rtl"] h2 { font-size: 32px; font-weight: 700; line-height: 1.45; }
[data-lang="rtl"] h3 { font-size: 22px; font-weight: 700; line-height: 1.5; }
@media (max-width: 768px) {
  [data-lang="rtl"] h1 { font-size: 30px; }
  [data-lang="rtl"] h2 { font-size: 26px; }
}
body { margin: 0; background: #ffffff; font-family: 'DM Sans', 'Tajawal', sans-serif; }
h1, h2, h3, h4 { font-family: 'Space Grotesk', 'Tajawal', sans-serif; }
a { color: #6D28D9; text-decoration: none; }
a:hover { color: #5B21B6; }
@keyframes float1 { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
@keyframes float2 { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-16px); } }
@keyframes float3 { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@keyframes teachLeft { 0%,100% { transform: rotate(-30deg); } 50% { transform: rotate(-15deg); } }
@keyframes teachRight { 0%,100% { transform: rotate(20deg); } 50% { transform: rotate(35deg); } }
@keyframes laptopGlow { 0%,100% { box-shadow: 0 0 0 rgba(167,139,250,0); } 50% { box-shadow: 0 0 20px rgba(167,139,250,0.15); } }
@keyframes codeLine1 { 0%,100% { width: 60%; } 50% { width: 75%; } }
@keyframes codeLine2 { 0%,100% { width: 80%; } 50% { width: 50%; } }
@keyframes codeLine3 { 0%,100% { width: 40%; } 50% { width: 65%; } }

/* === RESPONSIVE === */
/* Tablet */
@media (max-width: 1024px) {
  nav { padding: 0 24px !important; }
  [data-r="nav-links"] { font-size: 12px !important; gap: 10px !important; }
  section { padding-left: 32px !important; padding-right: 32px !important; }
  footer { padding-left: 32px !important; padding-right: 32px !important; }
  [data-r="rg"] { grid-template-columns: repeat(2, 1fr) !important; }
  [data-r="rs"] { grid-template-columns: 1fr !important; gap: 32px !important; }
  /* The artwork is authored in a 520×480 box with its pieces pinned to that
     box's edges (right: 40px, right: 20px, bottom: 0). Resizing the box does
     NOT scale the artwork — it drags every right- and bottom-anchored piece
     inward, which is what made the student collide with the coach and put
     the floating cards on top of the heads. Keep the authored box and scale
     it as one unit; margin-inline: calc(50% - 260px) re-centres the 520px
     box in any parent, and margin-bottom reclaims the height the transform
     frees but the layout still reserves: 480 × (scale − 1). */
  [data-r="hero-illust"] {
    width: 520px !important; max-width: none !important; height: 480px !important;
    transform: none !important; transform-origin: top center !important;
    position: relative !important; left: 0 !important;
    margin: 0 calc(50% - 260px) !important;
  }
  /* Stacking this row also has to re-align it on the cross axis: the inline
     style is align-items: flex-start, which in a column keeps every child
     pinned to the left. text-align alone only centred the words, leaving
     the accreditation card sitting ~67px left of centre. */
  [data-r="atp-flex"] { flex-direction: column !important; align-items: center !important; text-align: center !important; }
  [data-r="atp-flex"] > div { text-align: center !important; }
  [data-r="hero-img"] { max-width: 100% !important; width: 300px !important; height: 380px !important; }
  [data-r="breadcrumb"] { padding-left: 32px !important; padding-right: 32px !important; }
  [data-r="floating-badge"] { display: none !important; }
}
/* Phone */
@media (max-width: 640px) {
  nav { padding: 0 16px !important; height: 60px !important; }
  [data-r="nav-links"] { display: none !important; }
  [data-r="nav-login"] { display: none !important; }
  [data-r="nav-dashboard"] { display: none !important; }
  [data-r="lang-flags"] { order: 2; }
  [data-r="nav-cta"] { font-size: 11px !important; padding: 8px 12px !important; white-space: nowrap !important; }
  section { padding-left: 16px !important; padding-right: 16px !important; }
  footer { padding-left: 16px !important; padding-right: 16px !important; }
  [data-r="rg"] { grid-template-columns: 1fr !important; }
  [data-r="rs"] { grid-template-columns: 1fr !important; gap: 24px !important; }
  [data-r="thumb-rail"] { grid-template-columns: repeat(2, 1fr) !important; gap: 12px !important; }
  /* scale steps for the 520px box live in the mobile pass below */
  h1 br { display: none !important; }
  h1 { font-size: 24px !important; line-height: 1.3 !important; }
  h2 { font-size: 22px !important; }
  h3 { font-size: 17.5px !important; }
  p { word-wrap: break-word !important; overflow-wrap: break-word !important; }
  [data-r="hero-btns"] { flex-direction: column !important; }
  [data-r="hero-btns"] > span { text-align: center !important; }
  [data-r="hero-stats"] { flex-wrap: wrap !important; gap: 8px !important; font-size: 11px !important; }
  [data-r="cert-header"] { flex-direction: column !important; }
  [data-r="footer-bottom"] { flex-direction: column !important; text-align: center !important; gap: 8px !important; }
  [data-r="footer-bottom"] > div:last-child { text-align: center !important; max-width: 100% !important; }
  [data-r="hero-img"] { width: 100% !important; max-width: 280px !important; height: 340px !important; margin: 0 auto !important; display: block !important; }
  [data-r="breadcrumb"] { padding-left: 16px !important; padding-right: 16px !important; }
  [data-r="instructor-badges"] { flex-wrap: wrap !important; justify-content: center !important; }
  [data-r="floating-badge"] { display: none !important; }
  /* the badge is a circle (120×120 + border-radius: 50%); shrinking only
     its height made it an ellipse and object-fit: cover then cropped the
     seal top and bottom — scale both axes together */
  [data-r="atp-img"] { height: 100px !important; width: 100px !important; }
  [data-r="atp-title"] { font-size: 22px !important; }
  [data-r="atp-seal"] { width: 100% !important; max-width: 260px !important; margin: 0 auto !important; }
}

/* ===== RESPONSIVE HARDENING (authoritative — loaded last) ===== */

/* never let anything push the page sideways */
[data-lang] { overflow-x: hidden; }
img, svg, video { max-width: 100%; }
p, div, span, h1, h2, h3, li { overflow-wrap: break-word; }

/* ---------- TABLET ---------- */
@media (max-width: 1024px) {
  /* collapse wide grids (bullet grids "14px 1fr" are deliberately untouched) */
  [style*="repeat(4, 1fr)"] { grid-template-columns: repeat(2, 1fr) !important; }
  [style*="repeat(3, 1fr)"] { grid-template-columns: repeat(2, 1fr) !important; }
  [style*="1.6fr 1fr 1fr 1fr 1.2fr"] { grid-template-columns: repeat(2, 1fr) !important; row-gap: 28px !important; }
  /* asymmetric hero / feature splits go single-column */
  [style*="minmax(0, 860px)"],
  [style*="1fr 480px"],
  [style*="400px 1fr"],
  [style*="360px 1fr"],
  [style*="1fr 400px"] { grid-template-columns: 1fr !important; }
  /* release oversized fixed widths */
  [style*="width: 1200px"], [style*="width: 1100px"], [style*="width: 1024px"],
  [style*="width: 1000px"], [style*="width: 960px"], [style*="width: 900px"],
  [style*="width: 820px"], [style*="width: 800px"], [style*="width: 750px"],
  [style*="width: 720px"], [style*="width: 700px"] { width: 100% !important; max-width: 100% !important; }
  /* vertical rhythm: 64px top/bottom is too tall on a tablet */
  section { padding-top: 48px !important; padding-bottom: 48px !important; }
}

/* ---------- MOBILE ---------- */
@media (max-width: 640px) {
  /* every multi-column grid becomes one column */
  [style*="repeat(4, 1fr)"],
  [style*="repeat(3, 1fr)"],
  [style*="repeat(2, 1fr)"],
  [style*="grid-template-columns: 1fr 1fr"],
  [style*="1.6fr 1fr 1fr 1fr 1.2fr"],
  [style*="repeat(2, auto)"] { grid-template-columns: 1fr !important; }
  [style*="width: 680px"], [style*="width: 640px"], [style*="width: 620px"],
  [style*="width: 600px"], [style*="width: 580px"], [style*="width: 540px"],
  [style*="width: 520px"], [style*="width: 500px"], [style*="width: 460px"],
  [style*="width: 440px"], [style*="width: 420px"], [style*="width: 400px"],
  [style*="width: 380px"] { width: 100% !important; max-width: 100% !important; }
  section { padding-top: 36px !important; padding-bottom: 36px !important; }
  /* comfortable tap targets */
  a, [onclick], [role="button"] { min-height: 44px; }
  [data-r="nav-cta"], [data-r="cta"] a, [data-r="cta"] span { min-height: 44px; display: inline-flex !important; align-items: center; justify-content: center; }
}

/* ---------- MOBILE NAVIGATION ----------
   the links were previously hidden with no replacement, leaving the site
   unnavigable on a phone; restore them as a scrollable strip */
@media (max-width: 640px) {
  nav { flex-wrap: wrap !important; height: auto !important; padding: 10px 16px !important; row-gap: 4px !important; }
  [data-r="nav-links"] {
    display: flex !important; order: 3; width: 100% !important;
    overflow-x: auto !important; gap: 18px !important;
    padding: 6px 0 2px !important; font-size: 13px !important;
    scrollbar-width: none; -webkit-overflow-scrolling: touch;
  }
  [data-r="nav-links"]::-webkit-scrollbar { display: none; }
  [data-r="nav-links"] > * { flex: 0 0 auto !important; white-space: nowrap !important; }
  [dir="rtl"] [data-r="nav-links"] { direction: rtl !important; }
  /* Arabic needs more size than Latin at equal legibility */
  [data-lang="rtl"] [style*="font-size: 11px"] { font-size: 12.5px !important; }
  [data-lang="rtl"] [data-r="nav-cta"] { font-size: 12.5px !important; }
  /* decorative micro-labels inside illustrations */
  [style*="font-size: 9px"] { font-size: 11px !important; }
}

/* ===== REFINEMENT PASS (loaded last — overrides everything above) ===== */

/* --- screen-reader-only headings: present in the outline, invisible on screen --- */
[data-r="sr-only"] {
  position: absolute !important; width: 1px !important; height: 1px !important;
  padding: 0 !important; margin: -1px !important; overflow: hidden !important;
  clip: rect(0 0 0 0) !important; white-space: nowrap !important; border: 0 !important;
}

/* --- skip link: clipped until focused. Must NOT hide with a negative
       `left`: in RTL that extends the scrollable area and gave the
       Arabic pages a ~10,000px horizontal scroll. --- */
[data-r="skip-link"] {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; margin: -1px; padding: 0 !important;
}
[data-r="skip-link"]:focus {
  position: fixed; top: 0; inset-inline-start: 0;
  width: auto; height: auto; overflow: visible; clip: auto;
  margin: 0; padding: 10px 18px !important;
}

/* --- visible keyboard focus (nothing had any) --- */
a:focus-visible, button:focus-visible, input:focus-visible,
[role="button"]:focus-visible, [tabindex]:focus-visible {
  outline: 3px solid #6D28D9 !important;
  outline-offset: 2px !important;
  border-radius: 4px;
}
/* the dark sections need a light ring to be visible at all */
[style*="background: linear-gradient(135deg, #1E1040"] [role="button"]:focus-visible,
[style*="background: linear-gradient(135deg, #1E1040"] a:focus-visible,
footer a:focus-visible, footer [role="button"]:focus-visible, footer button:focus-visible {
  outline-color: #C4B5FD !important;
}
main:focus { outline: none; }

/* --- certification grid: the categories hold 1–2 certs, so a hard 3-column
       track left most rows two-thirds empty. Size the cards instead of the
       columns and pack them to the inline-start edge.
       `start` is the logical value, so cards read left-to-right in English
       and right-to-left in Arabic — a physical `center`/`left` would strand
       a lone card mid-row in both languages. --- */
[data-r="cg"] [data-r="rg"], [data-r="sg"] [data-r="rg"] {
  grid-template-columns: repeat(auto-fit, minmax(280px, 360px)) !important;
  justify-content: start !important;
}

/* --- TABLET NAV (641–1024px): the logo was collapsing to ~8px, the links
       wrapped onto three rows and the CTA overflowed the bar. Same
       treatment the ≤640px breakpoint already gets. --- */
@media (max-width: 1024px) and (min-width: 641px) {
  nav { flex-wrap: wrap !important; height: auto !important; padding: 10px 24px !important; row-gap: 6px !important; }
  [data-r="nav-logo"] { flex: 0 0 auto !important; }
  [data-r="nav-logo"] img { height: 34px !important; width: auto !important; max-width: none !important; }
  [data-r="nav-right"] { flex: 0 0 auto !important; margin-left: auto !important; }
  [data-r="nav-links"] {
    order: 3; width: 100% !important;
    overflow-x: auto !important; gap: 18px !important;
    padding: 4px 0 2px !important; font-size: 13px !important;
    scrollbar-width: none; -webkit-overflow-scrolling: touch;
  }
  [data-r="nav-links"]::-webkit-scrollbar { display: none; }
  [data-r="nav-links"] > * { flex: 0 0 auto !important; white-space: nowrap !important; }
  [data-r="nav-cta"] { white-space: nowrap !important; padding: 9px 16px !important; font-size: 13px !important; }
  [data-r="nav-login"], [data-r="nav-dashboard"] { white-space: nowrap !important; padding: 8px 10px !important; }
}
/* the logo must never be the flex item that gives way */
[data-r="nav-logo"] { flex: 0 0 auto !important; min-width: 0; }
[data-r="nav-logo"] img { flex: 0 0 auto !important; }

/* --- HEADER RHYTHM (desktop only, ≥1025px) -----------------------------
   Every gap in the bar was the same 24px — logo→nav, item→item and
   nav→right group — so the header read as one undifferentiated row with
   no grouping. Two changes, spacing only:
     1. labels never wrap (below ~1400px each one was breaking onto two
        lines, which is what read as "crowded");
     2. the gap between functional groups is made clearly larger than the
        gap between items, so [logo] [nav] [EN/AR · Login · CTA] read as
        three groups. `space-between` on <nav> turns the freed slack into
        that separation on its own.
   Font size, weight, family, colours, labels and the logo are untouched;
   the right-hand cluster keeps a deliberately tighter internal gap so it
   reads as one group. --------------------------------------------------- */
@media (min-width: 1025px) {
  [data-r="nav-links"] > * { white-space: nowrap !important; }
  [data-r="nav-right"] { gap: 12px !important; }
  /* the right cluster's own padding is trimmed to fund the separation
     above; the elements keep their full height and tap area */
  [data-r="nav-login"] { padding: 8px 10px !important; }
  [data-r="nav-cta"] { padding: 10px 18px !important; }
  [data-r="lang-flags"] > span { padding: 4px 7px !important; }
}

/* 1025–1399px: the bar is genuinely over capacity here — the six labels
   alone are 661px, and with the logo and the three controls only ~130px
   is left for all seven gaps. Previously every label broke onto two lines,
   which is what read as crowded. The padding and the controls' own padding
   yield instead, so the nav holds one line and the group separation still
   comes out larger than the item gap. */
@media (min-width: 1025px) and (max-width: 1399px) {
  nav { padding: 0 24px !important; }
  [data-r="nav-links"] { gap: 16px !important; }
  [data-r="nav-login"] { padding: 8px 6px !important; }
  [data-r="lang-flags"] > span { padding: 4px 6px !important; }
}

/* ≥1400px: the 64px inset is restored so the logo lines up with the hero
   and every section below it, and the freed width goes into the gaps. */
@media (min-width: 1400px) {
  nav { padding: 0 64px !important; }
  [data-r="nav-links"] { gap: 26px !important; }
}

/* --- tap targets: the previous rule inflated any inline-flex button that
       had its own padding. Bound it to real controls only. --- */
@media (max-width: 640px) {
  a, [onclick], [role="button"] { min-height: 0; }
  [data-r="hero-btns"] > *, [data-r="cta"] a {
    min-height: 44px; display: inline-flex !important;
    align-items: center; justify-content: center;
  }
  /* the nav CTA sits in a fixed-height bar: pad it to a comfortable
     target instead of stretching it to a 44px box */
  a[data-r="nav-cta"] {
    min-height: 0 !important; display: inline-flex !important;
    align-items: center; justify-content: center;
    padding: 10px 14px !important; line-height: 1.1 !important;
  }
  /* the logo may not collapse (that was the tablet bug) but it can size
     down, which keeps the bar to two rows rather than three */
  [data-r="nav-logo"] img { height: 30px !important; }
  [data-r="nav-right"] { gap: 8px !important; }
}

/* --- the WhatsApp button sat on top of hero content --- */
[data-r="wa-fab"] { z-index: 90 !important; }
@media (max-width: 640px) {
  [data-r="wa-fab"] { width: 52px !important; height: 52px !important; bottom: 20px !important; right: 20px !important; }
  [data-r="wa-fab"] svg { width: 24px !important; height: 24px !important; }
}

/* Scroll landing for the two in-page jumps.
   The nav is declared position: sticky, but the root wrapper carries
   overflow-x: hidden, which makes that wrapper (not the viewport) the
   sticky scrollport — so the header actually scrolls away instead of
   staying pinned. Reserving space for it therefore just exposed a strip of
   the PREVIOUS section above the target. With no header overhead, the
   section's own 64px padding is the only gap, which is the intended
   breathing room.
   If the sticky header is ever repaired, set this back to the nav height
   (~73px desktop / ~84px mobile) so the heading is not covered. */
#all-certifications, #learning-paths { scroll-margin-top: 0; }

/* Seven testimonials in a 3-column grid leaves the last one stranded alone
   on the left of its row; centre it instead. */
@media (min-width: 1025px) {
  [data-r="tst"] [data-r="rg"] > div:last-child:nth-child(3n + 1) { grid-column: 2; }
}

/* Instructor thumbnail rail. Its parent is capped at 900px and also holds
   the large profile above it, so rather than widening that box (which would
   reflow the portrait) the rail alone is given room for one row of six.
   calc(50% - 560px) re-centres a 1120px rail inside the 900px parent.
   Below this it falls back to a balanced 3 × 2, and to 2 columns on phones
   via the existing mobile rule. */
@media (min-width: 1200px) {
  [data-r="thumb-rail"] {
    width: 1120px !important;
    margin-left: calc(50% - 560px) !important;
    margin-right: calc(50% - 560px) !important;
    grid-template-columns: repeat(6, 1fr) !important;
  }
}
/* The generic "collapse repeat(3, 1fr)" hardening rules above would drop
   this rail to 2 columns on tablet and 1 on phones, which blows the
   thumbnails up to 460px. Pin the counts for this grid specifically. */
@media (min-width: 641px) and (max-width: 1199px) {
  [data-r="thumb-rail"] { grid-template-columns: repeat(3, 1fr) !important; }
}
@media (max-width: 640px) {
  [data-r="thumb-rail"] { grid-template-columns: repeat(2, 1fr) !important; }
}

/* LSP step labels: the tracking suits Latin caps but pulls Arabic letters
   apart, so it is removed in Arabic only. */
[data-lang="rtl"] [data-r="ws-step-label"] { letter-spacing: 0 !important; }
/* Workshops hero. The box was content-box with 64px padding a side, so below
   ~830px it computed WIDER than the viewport (471px inside 375px). The excess
   was swallowed by the `auto` margin that right-aligns it in Arabic — pushing
   the whole block off the left edge and clipping the heading and description.
   English had the identical bug mirrored to the right. border-box makes the
   padding live inside max-width, and the clamped padding keeps a sensible
   gutter on phones while preserving the authored 64px from ~1280px up. */
[data-r="ws-hero"] {
  box-sizing: border-box !important;
  max-width: min(700px, 100%) !important;
}
/* border-box alone stops the overflow; on phones 64px of gutter would leave
   only ~215px of text, so trade some padding back for line length. Desktop
   and tablet keep the authored 100px/64px/80px exactly. */
@media (max-width: 768px) {
  [data-r="ws-hero"] { padding: 64px 20px 56px !important; }
}

/* Amr Eltahan's bio only. His two paragraphs are much longer than the other
   instructors', so at full container width the lines run past a comfortable
   measure. Scoped via activeBioR so every other profile keeps its inline
   defaults (15px / 1.75 / 14px) untouched. Same type scale and colour as the
   rest of the page — only leading, spacing and measure change. */
[data-r="instr-bio-amr"] {
  font-size: 16px !important;
  line-height: 1.9 !important;
  margin: 0 0 20px !important;
  /* The column is ~636px, which at 16px runs ~76 characters per line — past a
     comfortable measure. 54ch lands it near 68. Measured, not guessed. */
  max-width: 54ch !important;
}
/* Arabic sets its own scale here, matching the [data-lang="rtl"] pattern used
   elsewhere: the script needs a touch more size and leading to read well. */
[data-lang="rtl"] [data-r="instr-bio-amr"] {
  font-size: 16.5px !important;
  line-height: 2.05 !important;
  max-width: 52ch !important;
}
/* Phones/tablets: let it reflow to the full column, keep the leading generous. */
@media (max-width: 768px) {
  [data-r="instr-bio-amr"] {
    font-size: 15.5px !important;
    line-height: 1.85 !important;
    margin: 0 0 18px !important;
    max-width: none !important;
  }
  [data-lang="rtl"] [data-r="instr-bio-amr"] {
    font-size: 16px !important;
    line-height: 2 !important;
    max-width: none !important;
  }
}

/* ===== MOBILE NAVIGATION PANEL =======================================
   Replaces the horizontally scrollable link strip. Measured: the strip
   needs 704px (EN) / 588px (AR); at 375px that hid 361px of links behind
   a swipe, and even at 768px it cleared by only 1px. So the panel takes
   over at ≤900px, which is every width where the row is broken or within
   ~150px of breaking. ≥901px is untouched — desktop keeps its inline row.

   It drops BELOW the bar rather than sliding in from a side, because the
   WhatsApp button is fixed at bottom-right (z-index 90); a right-hand
   drawer would sit on top of it. `position: absolute` inside the sticky
   <nav> keeps it glued under the header in both writing directions. */
/* The panel is deliberately FULL WIDTH — it spans the whole viewport under
   the header in both languages, so it is anchored to BOTH edges. Stated
   explicitly with physical properties (never inset-inline-*, never a
   logical or `auto` value) so no engine has to infer anything. */
[data-r="nav-panel"] {
  /* position: FIXED, pinned to the viewport — not absolute inside <nav>.
     Absolute positioning resolves against a containing block, which depends
     on the sticky <nav> being treated as positioned; where that assumption
     fails the panel falls back to its static position as the last flex child
     of the bar, i.e. hard against the trailing edge (the right, in English).
     Fixed + left:0 + right:0 is resolved against the viewport itself, so no
     containing block, flex fallback, writing direction or logical-property
     support can move it. The header is a fixed 64px + 1px border at these
     widths, so `top` is exact. Kept in CSS, not JS: React owns the style
     attribute and wipes inline overrides on every re-render. */
  position: fixed !important;
  top: 65px !important;
  left: 0 !important;
  right: 0 !important;
  width: auto !important;
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  box-sizing: border-box !important;
  float: none !important;
  z-index: 120;
  max-height: calc(100vh - 56px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  box-shadow: 0 18px 44px rgba(30, 16, 64, 0.16);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  /* Deliberately vertical-only. A clip-path wipe was tried here and removed:
     it is the least widely supported property in this component, and on an
     engine that renders it partially the panel appears cropped to one side —
     the exact symptom being chased. Opacity + translateY works everywhere. */
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
}
[data-r="nav-panel"][data-open="1"] { opacity: 1; visibility: visible; transform: none; }

/* Content alignment stated outright per direction — never left to `start`. */
[dir="ltr"] [data-r="nav-panel"] { direction: ltr; text-align: left; }
[dir="rtl"] [data-r="nav-panel"] { direction: rtl; text-align: right; }
[data-r="nav-scrim"] {
  z-index: 80;                    /* under the WhatsApp FAB (90) */
  background: rgba(15, 10, 35, 0.42);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.22s ease, visibility 0.22s;
}
[data-r="nav-scrim"][data-open="1"] { opacity: 1; visibility: visible; }
[data-r="mnav-item"]:hover { background: #F8FAFC; }
/* Background must not scroll under the open panel. The page scrolls on the
   root, so locking it here is sufficient. */
html.passpm-menu-open, html.passpm-menu-open body { overflow: hidden !important; }

@media (min-width: 901px) {
  /* desktop / large tablet: no panel, no burger, nothing changed */
  [data-r="nav-panel"], [data-r="nav-scrim"], [data-r="nav-burger"] { display: none !important; }
}

@media (max-width: 900px) {
  /* one tidy row: logo · CTA · burger — and never a second line */
  nav {
    flex-wrap: nowrap !important;
    height: 64px !important;
    padding: 0 16px !important;
    row-gap: 0 !important;
    position: relative;
  }
  [data-r="nav-links"] { display: none !important; }          /* replaced by the panel */
  /* physical margins, not margin-inline-start: older WebViews ignore the
     logical form, which would leave this cluster mid-row instead of pinned
     to the trailing edge. */
  [data-r="nav-right"] { gap: 10px !important; margin-left: auto !important; margin-right: 0 !important; }
  [dir="rtl"] [data-r="nav-right"] { margin-left: 0 !important; margin-right: auto !important; }
  [data-r="nav-burger"] { display: inline-flex !important; }
  /* these move into the panel, where there is room to tap them */
  [data-r="lang-flags"], [data-r="nav-login"], [data-r="nav-dashboard"] { display: none !important; }
  [data-r="nav-logo"] img { height: 32px !important; }
  [data-r="nav-cta"] {
    font-size: 13px !important; padding: 9px 14px !important;
    white-space: nowrap !important; min-height: 0 !important;
  }
  [data-r="nav-panel"] { max-height: calc(100vh - 65px); }
}

/* the tap target stays 44px at every width; the CTA gives way instead */
[data-r="nav-burger"] { box-sizing: border-box !important; }

/* very narrow phones: keep all three items on the single row */
@media (max-width: 360px) {
  nav { padding: 0 12px !important; }
  [data-r="nav-right"] { gap: 8px !important; }
  [data-r="nav-cta"] { font-size: 12px !important; padding: 8px 9px !important; }
  [data-r="nav-logo"] img { height: 26px !important; }
}

/* ===== MOBILE PASS (≤640px) ========================================== */

@media (max-width: 640px) {

  /* --- Arabic CTA text is longer than the English one, which pushed the
         whole right-hand cluster onto its own row (a 120px-tall sticky
         header). Tighten just enough that it sits beside the logo. --- */
  [dir="rtl"] [data-r="nav-cta"] { padding: 9px 10px !important; }
  [dir="rtl"] [data-r="nav-right"] { gap: 6px !important; }
  [dir="rtl"] [data-r="lang-flags"] { padding: 2px !important; }
  [dir="rtl"] [data-r="lang-flags"] > span { padding: 4px 5px !important; }

  /* --- footer bottom bar: the outer box stacked but its inner row kept
         copyright, the separator and the company name side by side in
         three narrow columns. --- */
  [data-r="footer-bottom"] > div { flex-direction: column !important; gap: 6px !important; align-items: center !important; text-align: center !important; }
  [data-r="footer-bottom"] > div > span:nth-child(2) { display: none !important; }

  /* --- the fixed WhatsApp button sat on top of the trademark line at the
         very bottom of the page --- */
  footer { padding-bottom: 92px !important; }

  /* --- instructor credential badges overflowed the viewport (7 × 48px on
         a 360px screen) and spilled past the photo --- */
  /* the coaching hero's inner column stayed 380px wide inside a 328px
     content box, which pushed the badge strip off the left edge.
     The hero illustration is exempt — it is deliberately a 520px box that
     is scaled down and re-centred with negative margins below. */
  [data-r="rs"] > div:not([data-r="hero-illust"]) { max-width: 100% !important; }
  [data-r="instructor-badges"] {
    max-width: 100% !important;
    width: auto !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 5px !important;
  }
  [data-r="instructor-badges"] img { width: 36px !important; height: 36px !important; }

  /* Restore the authored box here as well: the "release oversized fixed
     widths" rule above matches [style*="width: 520px"] and would otherwise
     flatten this to width:100%, which is the resize that broke the
     artwork's internal anchoring in the first place. */
  [data-r="hero-illust"] {
    width: 520px !important; max-width: none !important; height: 480px !important;
    position: relative !important; left: 0 !important;
    transform-origin: top center !important;
    margin: 0 calc(50% - 260px) !important;
  }
}

/* Hero illustration scale steps. The box stays 520×480 at every size; only
   the transform changes, so the artwork never re-flows and the pieces keep
   their authored relationship. Each step is the largest scale whose
   rendered width (520 × scale) still fits the narrowest viewport in its
   band, where the content box is the viewport minus 16px of section
   padding either side. margin-bottom = 480 × (scale − 1). */
@media (max-width: 551px) {
  [data-r="hero-illust"] { transform: scale(0.75) !important; margin-bottom: -120px !important; }
}
@media (max-width: 430px) {
  [data-r="hero-illust"] { transform: scale(0.63) !important; margin-bottom: -178px !important; }
}
@media (max-width: 360px) {
  [data-r="hero-illust"] { transform: scale(0.55) !important; margin-bottom: -216px !important; }
}

@media (prefers-reduced-motion: reduce) {
  /* animation-delay must be zeroed too: many reveals here use
     `fill-mode: both` with a delay, and collapsing only the duration
     would strand them at their `from` state (opacity 0) for the length
     of the delay — i.e. invisible content. */
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-delay: 0s !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    transition-delay: 0s !important;
    scroll-behavior: auto !important;
  }
}