/* ============================================================
   Skillova — Global Stylesheet
   ------------------------------------------------------------
   Files:
     1. Design tokens (CSS custom properties)
     2. Reset & base styles
     3. Utilities (container, buttons)
     4. Navbar component
     5. Entrance animations
     6. Responsive / media queries

   Conventions:
     - All colors, spacing, radii, fonts & motion live as
       custom properties in :root so future sections can reuse
       the exact same design system without refactoring.
     - Brand color (--clr-brand) is reserved for accents only.
     - Big editorial typography is a deliberate focus: the brand
       leans on strong type instead of icons/cards.
   ============================================================ */

/* ============================================================
   1. DESIGN TOKENS
   ============================================================ */
:root {
  /* --- Colors -------------------------------------------------- */
  --clr-bg: #FFFFFF;            /* Background primary              */
  --clr-bg-subtle: #F8FAFC;     /* Background subtle                */
  --clr-bg-subtle-2: #F3F6FA;   /* Background secondary subtle      */
  --clr-brand: #193A6D;         /* Brand — accents only             */
  --clr-heading: #0F172A;       /* Heading / strong text            */
  --clr-text: #64748B;          /* Secondary text                   */
  --clr-border: #E5EAF0;        /* Border color                     */

  /* Reserved for the footer only — a deep near-black navy, noticeably
     darker than --clr-brand so the footer reads as "dark", not as
     another blue CTA block. */
  --clr-footer-bg: #0B1B33;

  /* --- Typography ---------------------------------------------- */
  --font-primary: 'Cairo', 'Segoe UI', Tahoma, 'Noto Naskh Arabic',
    'Noto Kufi Arabic', system-ui, -apple-system, sans-serif;

  /* Font-size scale — large editorial sizes included for the
     strong-typography-driven brand. Base = 16px */
  --fs-xs: 0.75rem;     /* 12px — captions / labels     */
  --fs-sm: 0.875rem;    /* 14px — small body / meta     */
  --fs-base: 1rem;      /* 16px — default body          */
  --fs-md: 1.125rem;    /* 18px — emphasized body       */
  --fs-lg: 1.25rem;     /* 20px — small headings        */
  --fs-xl: 1.5rem;      /* 24px — subheadings           */
  --fs-2xl: 1.875rem;   /* 30px — section titles        */
  --fs-3xl: 2.25rem;    /* 36px — hero / big headings   */
  --fs-4xl: 3rem;       /* 48px — display              */
  --fs-5xl: 4rem;       /* 64px — large editorial display */
  --fs-6xl: 5rem;       /* 80px — hero display (rare)  */

  /* Line heights */
  --leading-tight: 1.15;
  --leading-snug: 1.4;
  --leading-normal: 1.6;
  --leading-loose: 1.8;

  /* Font weights (Cairo supports these) */
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-extrabold: 800;

  /* --- Spacing scale (4px base) -------------------------------- */
  --space-1: 0.25rem;   /* 4px   */
  --space-2: 0.5rem;    /* 8px   */
  --space-3: 0.75rem;   /* 12px  */
  --space-4: 1rem;      /* 16px  */
  --space-5: 1.5rem;    /* 24px  */
  --space-6: 2rem;      /* 32px  */
  --space-7: 2.5rem;    /* 40px  */
  --space-8: 3rem;      /* 48px  */
  --space-9: 4rem;      /* 64px  */
  --space-10: 5rem;     /* 80px  */
  --space-11: 6rem;     /* 96px  */
  --space-12: 8rem;     /* 128px */

  /* Layout */
  --container-max: 75rem;     /* 1200px max content width */
  --container-pad: 1.25rem;   /* horizontal gutter         */
  --navbar-height: 4.5rem;    /* 72px                     */
  --announce-bar-h: 3.25rem;  /* 52px announcement strip  */

  /* --- Border radius scale ------------------------------------- */
  --radius-sm: 0.375rem;   /* 6px   — small elements    */
  --radius-md: 0.625rem;   /* 10px  — inputs, chips     */
  --radius-lg: 1rem;       /* 16px  — cards             */
  --radius-xl: 1.5rem;     /* 24px  — large cards/boxes */
  --radius-full: 9999px;   /* pills / buttons           */

  /* --- Shadows ------------------------------------------------ */
  --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.05);
  --shadow-md: 0 4px 12px rgba(15, 23, 42, 0.08);
  --shadow-lg: 0 12px 32px rgba(15, 23, 42, 0.12);

  /* --- Motion: transitions & easing ---------------------------- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);       /* snappy exit   */
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);  /* smooth mid    */
  --ease-spring: cubic-bezier(0.34, 1.3, 0.42, 1);/* subtle bounce */
  --dur-fast: 150ms;
  --dur-base: 300ms;
  --dur-slow: 500ms;
  --dur-slower: 800ms;

  /* Entrance-animation timing helpers (JS-driven, one-time) */
  --nav-entrance-delay: 100ms;
}

/* ============================================================
   2. RESET & BASE STYLES
   ============================================================ */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  /* Smooth scroll for in-page nav anchors */
  scroll-behavior: smooth;
  /* Keep section anchor targets clear of the sticky navbar. Only the
     navbar's own height is accounted for — the announcement bar is in
     normal flow and scrolls away, so it must not reserve anchor space. */
  scroll-padding-top: var(--navbar-height);
  -webkit-text-size-adjust: 100%;
}

body {
  background-color: var(--clr-bg);
  color: var(--clr-text);
  font-family: var(--font-primary);
  font-size: var(--fs-base);
  font-weight: var(--fw-regular);
  line-height: var(--leading-normal);
  /* RTL is inherited from <html dir="rtl">; set word-break defaults
     that behave well for Arabic */
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 {
  color: var(--clr-heading);
  font-weight: var(--fw-bold);
  line-height: var(--leading-tight);
  margin: 0;
}

p { margin: 0; }

a {
  color: var(--clr-brand);
  text-decoration: none;
  /* RTL-safe inline-base fallback (Arabic rarely uses underline offset) */
}

ul, ol { list-style: none; }

img, svg, video {
  max-width: 100%;
  display: block;
  height: auto;
}

button {
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
  color: inherit;
  background: none;
  border: none;
  cursor: pointer;
}

input, select, textarea {
  font-family: inherit;
}

/* Respect prefers-reduced-motion: disable smooth scroll &
   entrance animations for users who opt out */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
}

/* ============================================================
   3. UTILITIES
   ============================================================ */
/* Centered, max-width content container */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

/* Base button pattern */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 0.75rem 1.5rem;
  border-radius: var(--radius-md);
  font-family: var(--font-primary);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-sm);
  white-space: nowrap;
  transition:
    background-color var(--dur-base) var(--ease-out),
    color var(--dur-base) var(--ease-out),
    transform var(--dur-base) var(--ease-out),
    box-shadow var(--dur-base) var(--ease-out);
}

/* Primary (brand) button */
.btn--primary {
  background-color: var(--clr-brand);
  color: #fff;
  box-shadow: var(--shadow-sm);
}

.btn--primary:hover {
  background-color: var(--clr-brand);
  /* Slightly darker + slight lift */
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  filter: brightness(0.92);
}

.btn--primary:active {
  transform: translateY(0);
  box-shadow: var(--shadow-sm);
}

/* -- Two-line stacked CTA (btn--stacked) -------------------------- */
/* Turns a CTA into a two-line button: bold main label (.btn__label)
   with a smaller, quieter microcopy line (.btn__subtext) beneath it.
   Column direction stacks the two spans inside the same inline-flex
   .btn. The spans are made positioned + z-index:1 so they always
   render ABOVE the .btn--shimmer ::before sweep layer (which is also
   positioned but paints at the z-auto/0 level), keeping the two-line
   content independent of the shimmer effect. */
.btn--stacked {
  flex-direction: column;
  gap: var(--space-1);
  text-align: center;
}

.btn--stacked > .btn__label,
.btn--stacked > .btn__subtext {
  position: relative;
  z-index: 1;
}

.btn--stacked > .btn__label {
  line-height: var(--leading-tight);
  white-space: nowrap;
}

.btn--stacked > .btn__subtext {
  display: block;
  font-size: var(--fs-xs);
  font-weight: var(--fw-regular);
  line-height: 1.25;
  opacity: 0.85;
  white-space: normal;
}

/* Desktop navbar CTA: keep the two-line button compact so it still
   fits inside the 72px navbar and the link row (slightly tighter
   padding than the base .btn; the subtext may wrap to a second line
   at narrower desktop widths without breaking the navbar height). */
.navbar__cta.btn--stacked {
  padding: 0.5rem 1.25rem;
}

/* -- Shimmer attention CTA ---------------------------------------- */
/* Premium "shine" treatment for the consultation-booking CTAs
   (.btn--shimmer, shared by the desktop navbar, mobile drawer, hero
   and final CTA buttons). Two independent, continuously looping
   effects:
     1. Shimmer: a diagonal bright highlight band (::before gradient)
        sweeps across the button surface. The button clips it with
        overflow: hidden so it stays inside the rounded shape. It
        holds off-screen between sweeps so it never feels busy.
     2. Attention: a soft brand-blue glow on the button's own
        box-shadow "breathes" up and down (2.6s), layered on top of
        the button's normal resting shadow so the base look is kept.
   Both effects are disabled for prefers-reduced-motion below. */
.btn--shimmer {
  --cta-rest-shadow: var(--shadow-sm);
  position: relative;
  overflow: hidden;
  animation: btnAttention 2.6s ease-in-out infinite;
}

/* Hero / Final CTA buttons rest on a stronger shadow — keep it. */
.btn--shimmer.btn--hero {
  --cta-rest-shadow: var(--shadow-md);
}

/* Hero CTA only: layer a subtle, continuous pulse-zoom (transform
   scale only — no layout reflow) on top of the shared btnAttention
   glow on the SAME element via a comma-separated animation shorthand,
   so both effects run simultaneously. Scoped through .hero__actions so
   the final CTA (which also uses .btn--hero .btn--shimmer) and the
   navbar/drawer shimmer CTAs are untouched. */
.hero__actions .btn--hero {
  animation:
    btnAttention 2.6s ease-in-out infinite,
    heroCtaPulseZoom 2.8s var(--ease-in-out) infinite;
}

/* Shimmer: diagonal light band sweeping left -> right, off-screen at
   both ends so only the pass across the button is visible. */
.btn--shimmer::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    115deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0) 42%,
    rgba(255, 255, 255, 0.65) 50%,
    rgba(255, 255, 255, 0) 58%,
    rgba(255, 255, 255, 0) 100%
  );
  transform: translateX(-150%);
  pointer-events: none;
  animation: btnShimmer 3s ease-in-out infinite;
}

/* Desktop navbar CTA keeps its one-time entrance animation; rebundle
   it alongside the looping attention pulse (this selector outranks
   the base .btn--shimmer animation rule). The shimmer lives on
   ::before, so it runs independently in both cases. */
.navbar__cta[data-animate='cta'] {
  animation:
    navCta var(--dur-slow) var(--ease-out) forwards,
    btnAttention 2.6s ease-in-out infinite;
  animation-delay: calc(var(--nav-entrance-delay) + 5 * 110ms + 60ms);
}

@keyframes btnShimmer {
  /* Pause off the left edge, sweep across, pause off the right edge,
     then loop. */
  0%,
  28% {
    transform: translateX(-150%);
  }
  72%,
  100% {
    transform: translateX(150%);
  }
}

@keyframes btnAttention {
  0%,
  100% {
    box-shadow: var(--cta-rest-shadow), 0 0 0 0 rgba(25, 58, 109, 0);
  }
  50% {
    box-shadow: var(--cta-rest-shadow), 0 14px 30px rgba(25, 58, 109, 0.55);
  }
}

/* Hero CTA pulse-zoom: gentle breathing scale (transform only, so no
   clipping/layout shift). Animates transform only, while btnAttention
   animates box-shadow only — different properties, so the two can run
   on the same element without conflict. */
@keyframes heroCtaPulseZoom {
  0%,
  100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.035);
  }
}

/* Respect prefers-reduced-motion: fully remove both effects. Without
   the animations, the shimmer element rests off-screen (translateX
   -150%) and the base button shadows apply again. */
@media (prefers-reduced-motion: reduce) {
  .btn--shimmer,
  .btn--shimmer::before,
  .hero__actions .btn--hero {
    animation: none;
  }
}

/* -- Floating mobile CTA (compact FAB-style pill, bottom-left) ----- */
/* Persistent corner CTA shown only on mobile (≤900px = the project's
   single mobile breakpoint at 56.25rem). Anchored to the viewport
   bottom-LEFT (away from the RTL reading flow); offsets ride on top of
   any notch safe-area insets via env(). Compact pill sized to its text
   with base .btn padding, floated above page content with --shadow-lg
   (passed to .btn--shimmer via --cta-rest-shadow so the attention pulse
   keeps resting on the strong shadow). Reuses the .btn--shimmer surface
   (shimmer band + resting glow) shared with the navbar/drawer/hero/final
   CTAs. While the qualification funnel is open, JS toggles .is-hidden so
   this button never overlaps #funnel, and its z-index (900) stays below
   the funnel's (9999). */
.btn--float-mobile {
  --cta-rest-shadow: var(--shadow-lg);
  --float-cta-bottom: calc(var(--space-4) + env(safe-area-inset-bottom));
  --float-cta-left: calc(var(--space-5) + env(safe-area-inset-left));
  position: fixed;
  bottom: var(--float-cta-bottom);
  left: var(--float-cta-left);
  z-index: 900;
  width: auto;
  max-width: calc(100% - var(--container-pad) * 2);
  border-radius: var(--radius-full);
}

/* Two-line pill: keep it compact (tighter than base .btn padding)
   so the floating capsule stays pill-shaped, not oversized. */
.btn--float-mobile.btn--stacked {
  padding: 0.7rem 1.25rem;
}

/* Funnel open → take the button out of the visual + accessibility
   tree without rearranging layout (visibility keeps its fixed spot). */
.btn--float-mobile.is-hidden {
  visibility: hidden;
}

/* Fully hidden on desktop — the project's mobile breakpoint is 900px
   (56.25rem), so anything ≥ that never shows the floating CTA. */
@media (min-width: 56.25rem) {
  .btn--float-mobile {
    display: none;
  }
}

/* ============================================================
   3b. ANNOUNCEMENT BAR
   ------------------------------------------------------------
   A slim, full-width urgency strip sitting in the NORMAL document
   flow as the very first element in <body> (above the sticky navbar).
   It is not sticky/fixed, so it scrolls away naturally with the page —
   once it has scrolled out of view, the sticky navbar takes its
   place flush at top: 0, so no space is ever left reserved above it.
   The CTA is a real focusable link that reuses the [data-open-funnel]
   handler shared by all other CTAs on the page.
   ============================================================ */
.announcement-bar {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: var(--announce-bar-h); /* 52px — slim strip */
  background-color: var(--clr-brand);
  color: #fff;
  padding-inline: var(--space-3);
}

.announcement-bar__inner {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  width: 100%;
  max-width: var(--container-max);
  height: 100%;
  white-space: nowrap;
}

.announcement-bar__message {
  font-family: var(--font-primary);
  font-size: var(--fs-base);
  font-weight: var(--fw-medium);
  line-height: 1;
}

.announcement-bar__mobile {
  display: none;
}

/* Inverted pill CTA — white/light background on the brand strip */
.announcement-bar__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: #fff;
  color: var(--clr-brand);
  font-family: var(--font-primary);
  font-size: var(--fs-base);
  font-weight: var(--fw-semibold);
  line-height: 1;
  padding: 0.5rem 1rem; /* 8px 16px */
  border-radius: var(--radius-full);
  white-space: nowrap;
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition:
    background-color var(--dur-base) var(--ease-out),
    color var(--dur-base) var(--ease-out),
    transform var(--dur-base) var(--ease-out);
}

.announcement-bar__cta:hover {
  background-color: var(--clr-bg-subtle-2);
  transform: translateY(-1px);
}

.announcement-bar__cta:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

/* Smaller screens: shorten the message, keep the CTA pill, prevent
   wrapping/overflow so the whole bar stays on a single line. */
@media (max-width: 480px) {
  .announcement-bar {
    height: 2.625rem;     /* 42px */
    padding-inline: var(--space-2);
  }

  :root {
    --announce-bar-h: 2.625rem; /* bar is slimmer on phones */
  }

  .announcement-bar__full {
    display: none;
  }

  .announcement-bar__mobile {
    display: inline;
  }

  .announcement-bar__inner {
    gap: var(--space-2);
  }

  .announcement-bar__message {
    font-size: var(--fs-sm);
  }

  .announcement-bar__cta {
    font-size: var(--fs-sm);
    padding: 0.35rem 0.75rem; /* 5.6px 12px */
  }
}

/* ============================================================
   4. NAVBAR COMPONENT
   ============================================================ */
.navbar {
  position: sticky;
  top: 0;              /* sticks flush to the viewport top once the
                          announcement bar above it has scrolled away */
  inset-inline: 0;
  z-index: 1000;
  height: var(--navbar-height);
  background-color: var(--clr-bg); /* white, no shadow on load */
  display: flex;
  align-items: center;
  transition:
    box-shadow var(--dur-slow) var(--ease-in-out),
    background-color var(--dur-slow) var(--ease-in-out),
    backdrop-filter var(--dur-slow) var(--ease-in-out);
}

/* Scroll state — added via JS after scrolling >40px */
.navbar[data-scrolled='true'] {
  background-color: rgba(255, 255, 255, 0.88);
  box-shadow: var(--shadow-md);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

.navbar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  height: 100%;
}

/* --- Logotype ------------------------------------------------ */
.navbar__logo {
  font-family: var(--font-primary);
  font-size: var(--fs-lg);
  font-weight: var(--fw-extrabold);
  letter-spacing: 0.04em;
  color: var(--clr-brand);
  line-height: 1;
}

/* Localized/Arabic-alternative accent */
.navbar__logo em {
  font-style: normal;
  color: var(--clr-heading);
}

/* --- Desktop nav links --------------------------------------- */
.navbar__nav {
  display: flex;
  align-items: center;
}

.navbar__links {
  display: flex;
  align-items: center;
  gap: var(--space-6);
}

.navbar__link {
  position: relative;
  color: var(--clr-heading);
  font-size: var(--fs-base);
  font-weight: var(--fw-medium);
  padding-block: var(--space-2);
  transition: color var(--dur-base) var(--ease-out);
}

/* Subtle brand underline on hover */
.navbar__link::after {
  content: '';
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  height: 2px;
  background-color: var(--clr-brand);
  border-radius: var(--radius-full);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform var(--dur-base) var(--ease-out);
}

.navbar__link:hover {
  color: var(--clr-brand);
}

.navbar__link:hover::after {
  transform: scaleX(1);
}

/* --- Navbar actions (CTA + hamburger) ------------------------- */
.navbar__actions {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

/* --- Hamburger toggle (hidden on desktop) --------------------- */
.navbar__toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  padding: var(--space-2);
  border-radius: var(--radius-md);
  background-color: var(--clr-bg-subtle);
  transition: background-color var(--dur-base) var(--ease-out);
}

.navbar__toggle:hover {
  background-color: var(--clr-bg-subtle-2);
}

.navbar__toggle-bar {
  display: block;
  height: 2px;
  width: 100%;
  border-radius: var(--radius-full);
  background-color: var(--clr-heading);
  transition:
    transform var(--dur-base) var(--ease-in-out),
    opacity var(--dur-base) var(--ease-in-out);
}

/* Open state -> X icon */
.navbar__toggle[aria-expanded='true'] .navbar__toggle-bar:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.navbar__toggle[aria-expanded='true'] .navbar__toggle-bar:nth-child(2) {
  opacity: 0;
}
.navbar__toggle[aria-expanded='true'] .navbar__toggle-bar:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* --- Mobile drawer -------------------------------------------- */
.navbar__mobile {
  display: none;
}

/* ============================================================
   5. ENTRANCE ANIMATIONS (one-time, JS-driven)
   ============================================================ */
.animate-item {
  opacity: 0;
}

/* Logo slides in first */
[data-animate='logo'] {
  animation: navLogo var(--dur-slower) var(--ease-spring) forwards;
  animation-delay: 0ms;
}

/* Nav links fade in with stagger */
[data-animate='link'] {
  animation: navLink var(--dur-slow) var(--ease-out) forwards;
  animation-delay: calc(
    var(--nav-entrance-delay) + var(--stagger) * 110ms
  );
}

/* CTA fades in last */
[data-animate='cta'] {
  animation: navCta var(--dur-slow) var(--ease-out) forwards;
  animation-delay: calc(
    var(--nav-entrance-delay) + 5 * 110ms + 60ms
  );
}

@keyframes navLogo {
  from {
    opacity: 0;
    transform: translateX(-16px); /* RTL start direction */
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes navLink {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes navCta {
  from {
    opacity: 0;
    transform: translateY(10px) scale(0.96);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* ============================================================
   HERO SECTION
   ============================================================ */
.hero {
  position: relative;
  /* The navbar is sticky and already occupies its own space in normal
     flow above the hero, so no navbar-height compensation is needed
     here — only the intended editorial breathing room. */
  padding-top: var(--space-10);
  padding-bottom: var(--space-9);
  background-color: var(--clr-bg);
  /* generous horizontal breathing room for the editorial layout */
}

/* --- Hero layout grid: 55% text / 45% visual ----------------- */
.hero__grid {
  display: grid;
  grid-template-columns: 55fr 45fr;
  align-items: center;
  gap: var(--space-9);
}

/* --- Text content (visually on right in RTL) ------------------ */
.hero__content {
  max-width: 40rem;
}

/* Eyebrow label */
.hero__eyebrow {
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--clr-brand);
  margin-bottom: var(--space-5);
}

/* Headline */
.hero__title {
  font-size: var(--fs-4xl);
  font-weight: var(--fw-extrabold);
  color: var(--clr-heading);
  line-height: var(--leading-tight);
  margin-bottom: var(--space-5);
}

/* Brand-colored emphasis within text (Sales/Closing/etc.) */
.hero__accent {
  color: var(--clr-brand);
  font-weight: inherit;
}

/* Description paragraph */
.hero__desc {
  font-size: var(--fs-md);
  color: var(--clr-text);
  line-height: var(--leading-loose);
  margin-bottom: var(--space-6);
}

/* CTA */
.hero__actions {
  margin-bottom: var(--space-6);
}

/* Prominent hero CTA (larger than navbar CTA) */
.btn--hero {
  font-size: var(--fs-md);
  font-weight: var(--fw-bold);
  padding: 1rem 2rem;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  /* Micro-interaction on hover: scale + shadow lift */
  transition:
    transform var(--dur-base) var(--ease-spring),
    box-shadow var(--dur-base) var(--ease-out),
    filter var(--dur-base) var(--ease-out);
}

.btn--hero:hover {
  transform: translateY(-3px) scale(1.03);
  box-shadow: var(--shadow-lg);
  filter: brightness(0.94);
}

.btn--hero:active {
  transform: translateY(0) scale(0.99);
}

/* Tagline row */
.hero__tagline {
  font-size: var(--fs-sm);
  color: var(--clr-text);
  font-weight: var(--fw-medium);
}

.hero__dot {
  color: var(--clr-brand);
  margin-inline: var(--space-2);
  font-weight: var(--fw-bold);
}

/* --- Visual composition (right side in RTL = visual-left) ----- */
.hero__visual {
  position: relative;
  /* slight upward pull helps balance against taller text column */
  margin-top: calc(var(--space-3) * -1);
}

.hero__visual-inner {
  position: relative;
}

/* Decorative blurred blue blob behind the visual */
.hero__blob {
  position: absolute;
  inset-inline-end: 8%;
  inset-block-start: 4%;
  width: 88%;
  height: 88%;
  border-radius: 50%;
  background: radial-gradient(
    circle at 30% 30%,
    rgba(25, 58, 109, 0.16),
    rgba(25, 58, 109, 0.04) 60%,
    transparent 70%
  );
  filter: blur(28px);
  z-index: 0;
  pointer-events: none;
}

/* Video frame: sizes the hero visual. Height is derived from width at a
   strict 16:9 (horizontal YouTube) ratio on all breakpoints. */
.hero__media {
  position: relative;
  z-index: 1;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-xl);
  /* subtle multi-stop gradient "muted tone" box */
  background: linear-gradient(
    160deg,
    var(--clr-bg-subtle-2) 0%,
    var(--clr-bg-subtle) 50%,
    var(--clr-bg-subtle-2) 100%
  );
  border: 1px solid var(--clr-border);
  box-shadow: var(--shadow-md);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Embeddable area for the real video. Sizes to fill the whole frame,
   so the <video> inside auto-fills with no further CSS. */
.hero__media-embed {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: var(--radius-xl);
  overflow: hidden;
  z-index: 1;
}

/* Native HTML5 video: fills the frame with cover cropping, matches the
   rounded corners of the container, and shows native controls. */
.hero__media-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* iOS-only (best-effort): attempt to hide the native time readouts
   ("00:07" / "-04:31") in the video's control bar. Scoped via the
   `.is-ios` class added by JS only on iPhone/iPad — any browser on iOS
   (Safari + Chrome + Firefox, incl. the iPadOS-as-Mac edge case) — so
   Android (handled by the ≤900px block below) and desktop (>900px, which
   intentionally keeps the readout) are never affected.

   Honest caveat: since iOS 16+ Apple rebuilt the inline media controls as
   a private "modern media controls" shadow tree that no longer exposes
   these legacy -webkit-media-controls-* time pseudo-elements to author CSS
   the way desktop WebKit does, so display:none here is unreliable on
   iPhone across versions (iOS forces WebKit, so this is genuinely
   iOS-wide, not browser-specific). The declarations stay deliberately
   conservative: cropping/resizing -webkit-media-controls-panel or
   -webkit-media-controls-enclosure to push the text off-frame would also
   crop play/pause, skip ±10s, the scrubber and mute — all of which must
   remain usable. A guaranteed remove needs a custom (non-native) controls
   UI. */
.hero__media-video.is-ios::-webkit-media-controls-current-time-display,
.hero__media-video.is-ios::-webkit-media-controls-time-remaining-display,
.hero__media-video.is-ios::-webkit-media-controls-time-label {
  display: none !important;
  visibility: hidden !important;
  width: 0 !important;
  margin: 0 !important;
}

/* Soft pulsing glow around the video frame's outer edge (brand blue).
   A blurred pseudo-element sits just outside the rounded border and
   gently "breathes" — subtle, ambient, not a hard neon ring. */
.hero__media::before {
  content: '';
  position: absolute;
  inset: -7px;
  border-radius: inherit;
  background: rgba(25, 58, 109, 0.55);
  filter: blur(20px);
  z-index: -1;
  opacity: 0.12;
  animation: heroGlowPulse 3s var(--ease-in-out) infinite;
  pointer-events: none;
}

/* Gentle "breathing" pulse of the glow opacity (premium, not flashy). */
@keyframes heroGlowPulse {
  0%, 100% {
    opacity: 0.12;
  }
  50% {
    opacity: 0.45;
  }
}

/* Respect prefers-reduced-motion: keep the soft static glow (no pulse)
   instead of the breathing animation. */
@media (prefers-reduced-motion: reduce) {
  .hero__media::before {
    animation: none;
    opacity: 0.28;
  }
}

/* Custom centered mute/unmute control layered over the video (in
   addition to the native controls bar). Circular, semi-transparent navy
   (the site footer navy) with a blurred backdrop so it reads clearly
   over the footage without hiding it. */
.hero__media-mute {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  width: 64px;
  height: 64px;
  padding: 0;
  border: none;
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  background-color: rgba(11, 27, 51, 0.55);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  box-shadow: var(--shadow-lg);
  cursor: pointer;
  /* Subtle continuous bounce (transform only) layered on top of the
     existing centering/fade behavior; see heroMuteBounce keyframes. */
  animation: heroMuteBounce 1.8s var(--ease-in-out) infinite;
  transition:
    opacity var(--dur-base) var(--ease-out),
    transform var(--dur-fast) var(--ease-out),
    background-color var(--dur-fast) var(--ease-out),
    box-shadow var(--dur-fast) var(--ease-out);
}

.hero__media-mute:hover,
.hero__media-mute:focus-visible {
  background-color: rgba(11, 27, 51, 0.7);
  transform: translate(-50%, -50%) scale(1.06);
  box-shadow: var(--shadow-lg), 0 0 0 1px rgba(255, 255, 255, 0.1);
  outline: none;
}

.hero__media-mute:active {
  transform: translate(-50%, -50%) scale(0.98);
}

/* Speaker icons: 24x24 stroke style, matching the site icon set. */
.hero__mute-icon {
  width: 30px;
  height: 30px;
  fill: none;
}

/* Show only the icon matching the current mute state. */
.hero__media-mute.is-muted .hero__mute-icon--unmuted {
  display: none;
}

.hero__media-mute:not(.is-muted) .hero__mute-icon--muted {
  display: none;
}

/* Fade the button out once unmuted (least intrusive), reappearing on
   hover/tap of the video. Hidden buttons can't be focused or clicked. */
.hero__media-mute.is-faded {
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
}

/* Continuous gentle bounce for the centered mute button. The base
   centering translate(-50%, -50%) is baked into every keyframe so the
   animation never overrides the centering or "jumps" out of position
   mid-fade. Opacity stays fully owned by the JS-driven fade logic —
   transform and opacity are independent properties, so the two don't
   fight (the button keeps gliding smoothly during fade-out/in). */
@keyframes heroMuteBounce {
  0%,
  100% {
    transform: translate(-50%, -50%) translateY(0);
  }
  50% {
    transform: translate(-50%, -50%) translateY(-4px);
  }
}

/* Respect prefers-reduced-motion: no bounce — button rests centered
   (consistent with the reduced-motion pattern used for decorative
   animations such as .btn--shimmer / .hero__media::before). */
@media (prefers-reduced-motion: reduce) {
  .hero__media-mute {
    animation: none;
  }
}

/* --- Entrance animations (one-time) --------------------------- */
/* Text column fades up as a unit */
.hero__content {
  animation: heroFadeUp var(--dur-slow) var(--ease-out) both;
  animation-delay: calc(var(--nav-entrance-delay) + 5 * 110ms + 120ms);
}

/* Visual slides in from the side (RTL: from the left) */
.hero__visual-inner {
  animation: heroVisualIn var(--dur-slower) var(--ease-spring) both;
  animation-delay: calc(var(--nav-entrance-delay) + 5 * 110ms + 260ms);
}

@keyframes heroFadeUp {
  from {
    opacity: 0;
    transform: translateY(24px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes heroVisualIn {
  from {
    opacity: 0;
    transform: translateX(28px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* ============================================================
   PROOF STRIP (beneath hero)
   Continuous infinite marquee — full-bleed edge-to-edge track.
   ============================================================ */
.proof {
  background-color: var(--clr-bg-subtle);
  border-top: 1px solid var(--clr-border);
  padding-block: var(--space-5);
  /* clip the looping track so it never causes horizontal scroll */
  overflow: hidden;
}

/* The running track: holds the list twice (2 x .proof__list),
   animated translateX(0 -> -50%) for a seamless loop. Wrapped in
   direction:ltr so the transform math stays predictable, while the
   items themselves keep their authored Arabic/English text. */
.proof__track {
  direction: ltr;
  display: flex;
  width: max-content;
  animation: proofMarquee 28s linear infinite;
}

/* Pause the marquee on hover/focus for accessibility */
.proof__track:hover,
.proof__track:focus-within {
  animation-play-state: paused;
}

@keyframes proofMarquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

.proof__list {
  display: flex;
  align-items: center;
  justify-content: center;
  /* dot spacing between items in the continuous strip */
  gap: 0 var(--space-12);
  margin: 0;
  padding-inline-start: var(--space-12);
  flex-shrink: 0;
}

.proof__item {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--clr-text);
  white-space: nowrap;
}

/* Brand-blue accent dot before each item — glows with a soft,
   traveling pulse (staggered via animation-delay below) */
.proof__dot {
  width: 0.4rem;
  height: 0.4rem;
  border-radius: 50%;
  background-color: var(--clr-brand);
  flex-shrink: 0;
  animation: proofDotGlow 2.4s ease-in-out infinite;
}

@keyframes proofDotGlow {
  0%, 100% {
    box-shadow: 0 0 4px 1px rgba(25, 58, 109, 0.35);
  }
  50% {
    box-shadow: 0 0 10px 3px rgba(25, 58, 109, 0.6);
  }
}

/* Stagger each dot's glow so it reads as a traveling light, not a
   synchronized blink. Applied to every instance (both list copies). */
.proof__list:nth-child(1) .proof__item:nth-child(1) .proof__dot { animation-delay: 0s; }
.proof__list:nth-child(1) .proof__item:nth-child(2) .proof__dot { animation-delay: 0.3s; }
.proof__list:nth-child(1) .proof__item:nth-child(3) .proof__dot { animation-delay: 0.6s; }
.proof__list:nth-child(1) .proof__item:nth-child(4) .proof__dot { animation-delay: 0.9s; }
.proof__list:nth-child(2) .proof__item:nth-child(1) .proof__dot { animation-delay: 0s; }
.proof__list:nth-child(2) .proof__item:nth-child(2) .proof__dot { animation-delay: 0.3s; }
.proof__list:nth-child(2) .proof__item:nth-child(3) .proof__dot { animation-delay: 0.6s; }
.proof__list:nth-child(2) .proof__item:nth-child(4) .proof__dot { animation-delay: 0.9s; }

/* Respect reduced-motion: no marquee, no glow — show items
   statically in a centered row. The duplicated (aria-hidden) list
   copy is hidden and the track is centered to fall back cleanly. */
@media (prefers-reduced-motion: reduce) {
  .proof__track {
    animation: none;
    width: 100%;
    justify-content: center;
  }

  .proof__track .proof__list:nth-child(2) {
    display: none;
  }

  .proof__dot {
    animation: none;
    box-shadow: 0 0 4px 1px rgba(25, 58, 109, 0.35);
  }
}

/* ============================================================
   PROBLEM SECTION
   Editorial typographic composition.
   NOTE: No cards and no grid-of-boxes here — this is a clean
   sequence of typographic statements with a distinct two-column
   editorial split on desktop.
   ============================================================ */
.problem {
  background-color: var(--clr-bg-subtle); /* subtle separation */
  padding-block: var(--space-11) var(--space-10);
}

/* --- Top heading --------------------------------------------- */
.problem__heading {
  font-size: var(--fs-3xl);
  font-weight: var(--fw-extrabold);
  color: var(--clr-heading);
  line-height: var(--leading-snug);
  max-width: 38rem;
  /* RTL start alignment = right; generous space below before
     the composition starts */
  text-align: start;
  margin-bottom: var(--space-10);
}

/* --- Two-column editorial composition ------------------------ */
.problem__composition {
  display: grid;
  grid-template-columns: 1fr 1fr; /* statement | numbered list */
  gap: var(--space-9);
  align-items: start;
}

/* Visually-right column: the big section-defining statement */
.problem__statement {
  position: sticky;
  top: calc(var(--navbar-height) + var(--space-6));
}

.problem__big {
  font-size: var(--fs-5xl);
  font-weight: var(--fw-extrabold);
  color: var(--clr-heading);
  line-height: var(--leading-tight);
  max-width: 18ch;
}

/* Visually-left column: stacked typographic lines (no boxes) */
.problem__list {
  display: flex;
  flex-direction: column;
}

/* Each problem line — a single typographic row, not a card */
.problem__item {
  display: flex;
  align-items: baseline;
  gap: var(--space-5);
  /* generous vertical rhythm between statements */
  padding-block: var(--space-6);
  /* thin horizontal divider separates the refined editorial list */
  border-bottom: 1px solid var(--clr-border);
}

.problem__item:first-child {
  padding-top: 0;
}

/* Thin brand-blue accent line on the RTL-start side of each item */
.problem__item::before {
  content: '';
  flex-shrink: 0;
  width: 3px;
  align-self: stretch;
  background-color: var(--clr-brand);
  border-radius: var(--radius-full);
}

/* Small numbered label */
.problem__number {
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  color: var(--clr-brand);
  letter-spacing: 0.06em;
  /* tabular feel */
  font-variant-numeric: tabular-nums;
}

/* The problem text itself */
.problem__item p {
  font-size: var(--fs-xl);
  font-weight: var(--fw-semibold);
  color: var(--clr-heading);
  line-height: var(--leading-snug);
}

/* --- Closing statements (emotional climax) ------------------- */
.problem__closing {
  margin-top: var(--space-11);
  max-width: 46rem;
}

.problem__close-line {
  font-size: var(--fs-md);
  font-weight: var(--fw-medium);
  color: var(--clr-heading);
  margin-bottom: var(--space-4);
}

/* The very large, dominating final statement */
.problem__close-big {
  font-size: var(--fs-4xl);
  font-weight: var(--fw-extrabold);
  color: var(--clr-heading);
  line-height: var(--leading-tight);
}

/* Brand-blue emphasis tied back to Hero's accent treatment */
.problem__accent {
  color: var(--clr-brand);
}

/* --- Scroll reveal (JS adds .is-visible) ---------------------- */
/* Initial hidden state */
.p-reveal {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity var(--dur-slower) var(--ease-out),
    transform var(--dur-slower) var(--ease-out);
}

/* Revealed state */
.p-reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Sequence: heading -> big statement -> per-line stagger ->
   closing lines -> big closing emphasis */
.problem__heading.p-reveal {
  transition-duration: var(--dur-slow);
}
.problem__big.p-reveal {
  transition-delay: 120ms;
}
.problem__item.p-reveal {
  /* one after another, tied to scroll position */
  transition-delay: calc(var(--reveal-delay) * 130ms);
}
.problem__close-line.p-reveal {
  transition-delay: 220ms;
}
/* Final statement gets more emphasis: slower + subtle scale-in */
.problem__close-big.p-reveal {
  transform: translateY(24px) scale(0.98);
  transition-duration: var(--dur-slower);
  transition-delay: 340ms;
}
.problem__close-big.p-reveal.is-visible {
  transform: translateY(0) scale(1);
}

/* ============================================================
   SKILLOVA METHOD SECTION
   Scroll-driven horizontal journey/flow.
   NOTE: This is a connected flow (continuous line + markers),
   NOT a set of cards. Progress fill and stage activation are
   driven by scroll position via JS (js/main.js): JS writes a
   width/height inline style on .method__line-fill and toggles
   [data-active] on each stage.
   ============================================================ */
.method {
  background-color: var(--clr-bg); /* full contrast vs Problem above */
  padding-block: var(--space-11) var(--space-10);
  overflow: hidden;
}

/* --- Heading & subline --------------------------------------- */
.method__heading {
  font-size: var(--fs-4xl);
  font-weight: var(--fw-extrabold);
  color: var(--clr-heading);
  line-height: var(--leading-tight);
  text-align: center;
}

.method__support {
  margin-top: var(--space-4);
  font-size: var(--fs-md);
  font-weight: var(--fw-medium);
  color: var(--clr-text);
  text-align: center;
  max-width: 42rem;
  margin-inline: auto;
}

/* Inline Latin terms inside RTL sentences */
.method__lat {
  direction: ltr;
  unicode-bidi: isolate;
}

.method__subline {
  margin-top: var(--space-4);
  font-size: var(--fs-sm);
  color: var(--clr-text);
  letter-spacing: 0.16em;
  text-align: center;
  /* muted, label-like style */
  text-transform: uppercase;
  font-weight: var(--fw-medium);
}

/* --- Flow / journey component -------------------------------- */
.method__flow {
  position: relative;
  margin-top: var(--space-11);
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  align-items: start;
  /* space for the two columns of text around each marker row */
  padding-top: var(--space-8);
}

/* Continuous connecting line running through the markers */
.method__line {
  position: absolute;
  top: 0;
  inset-inline: 0;
  height: 3px;
  background-color: rgba(229, 234, 240, 0.55); /* very light track */
  border-radius: var(--radius-full);
  pointer-events: none;
}

/* Brand-blue fill overlay — its width is set by JS via inline style */
.method__line-fill {
  position: absolute;
  top: 0;
  bottom: 0;
  inset-inline-start: 0;
  width: 0%;
  background-color: var(--clr-brand);
  border-radius: var(--radius-full);
  transition: width 60ms linear; /* smooth, ties to scroll */
  will-change: width;
  /* Visible glow on the filled portion so it "lights up" instead of
     just changing color — stronger than the page background. */
  box-shadow:
    0 0 10px rgba(25, 58, 109, 0.5),
    0 0 22px rgba(25, 58, 109, 0.28);
}

/* --- Traveling pulse head (rides the fill's leading edge) ------ */
.method__pulse {
  position: absolute;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background-color: var(--clr-brand);
  /* Travel-axis position is set via JS (insetInlineStart for the
     horizontal layout, top for the vertical rail). The negative
     logical margins below center the dot ON that point and on the
     3px line's cross-axis — RTL-safe because they use logical
     inline/block properties, not physical transforms. */
  inset-inline-start: 0;
  top: 0;
  margin-inline-start: -6px;  /* center on the horizontally-traveling point */
  margin-block-start: -6px;   /* center on the 3px line (cross-axis) */
  /* Bright core + soft blurred halo: reads as a moving light. */
  box-shadow:
    0 0 8px 2px var(--clr-brand),
    0 0 20px 6px rgba(25, 58, 109, 0.35);
  /* Continuous gentle "breathing" glow-loop while it travels. */
  animation: methodPulseGlow 1.8s ease-in-out infinite;
  will-change: transform;
}

@keyframes methodPulseGlow {
  0%,
  100% {
    transform: scale(1);
    box-shadow:
      0 0 8px 2px var(--clr-brand),
      0 0 20px 6px rgba(25, 58, 109, 0.35);
  }
  50% {
    transform: scale(1.15);
    box-shadow:
      0 0 12px 4px var(--clr-brand),
      0 0 28px 10px rgba(25, 58, 109, 0.5);
  }
}

/* --- Each stage ---------------------------------------------- */
.method__stage {
  position: relative;
  text-align: center;
  padding-inline: var(--space-3);
}

/* Circular marker dot sitting exactly on the line */
.method__marker {
  position: absolute;
  top: 0;
  /* center on the connecting line */
  inset-inline-start: 50%;
  transform: translate(-50%, -50%);
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background-color: var(--clr-border); /* muted default */
  border: 3px solid var(--clr-bg); /* create "ring" over the line */
  /* spring-timed: the activation is a small "arrival" pop (scale +
     glow burst), not an instant color swap */
  transition:
    background-color var(--dur-base) var(--ease-spring),
    transform var(--dur-base) var(--ease-spring),
    box-shadow var(--dur-base) var(--ease-spring);
  will-change: transform;
  z-index: 1;
}

/* Stage label (English word) above the marker */
.method__label {
  margin-top: var(--space-6);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--clr-text); /* muted default */
  letter-spacing: 0.04em;
  /* muted sits slightly lower; active lifts up with tightened tracking */
  transition:
    color var(--dur-base) var(--ease-out),
    letter-spacing var(--dur-base) var(--ease-out),
    transform var(--dur-base) var(--ease-out);
}

/* Arabic description beneath */
.method__desc {
  margin-top: var(--space-3);
  font-size: var(--fs-base);
  color: var(--clr-text);
  line-height: var(--leading-snug);
  opacity: 0.6; /* muted default */
  transition:
    color var(--dur-base) var(--ease-out),
    opacity var(--dur-base) var(--ease-out),
    transform var(--dur-base) var(--ease-out);
}

/* --- Active state (set by JS when fill reaches a stage) ------- */
/* Marker: solid brand + a pronounced, spring-y scale-up with a glow
   "arrival" ring (a bit stronger than .career__node's, per the
   section's flagship-intensity role). Composes on the base centering
   transform. */
.method__stage[data-active='true'] .method__marker {
  background-color: var(--clr-brand);
  transform: translate(-50%, -50%) scale(1.18);
  /* soft blurred glow, NOT a hard flat ring — a single clean circle */
  box-shadow: 0 0 12px rgba(25, 58, 109, 0.45);
}

/* Label: lift up + tighten tracking for a deliberate motion. */
.method__stage[data-active='true'] .method__label {
  color: var(--clr-brand);
  font-weight: var(--fw-bold);
  letter-spacing: 0.02em;
  transform: translateY(0);
}

/* Desc: lift up alongside. */
.method__stage[data-active='true'] .method__desc {
  color: var(--clr-heading);
  opacity: 1;
  transform: translateY(0);
}

/* Muted resting lift-off so the active "arrival" is visible as motion
   (label/desc start 6px lower). */
.method__stage[data-active='false'] .method__label,
.method__stage[data-active='false'] .method__desc {
  transform: translateY(6px);
}

/* --- Section reveal (fade up, reused pattern) ----------------- */
.m-reveal {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity var(--dur-slower) var(--ease-out),
    transform var(--dur-slower) var(--ease-out);
}

.m-reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ============================================================
   CURRICULUM SECTION
   Grid of module "cards". These ARE cards, but deliberately
   distinct from a generic icon+title+text template: a large muted
   background number does the heavy lifting, and only 3-4 modules
   carry a small brand-blue line icon (the rest are pure
   typography). Flat & clean — no heavy shadows.
   ============================================================ */
.curriculum {
  background-color: var(--clr-bg-subtle); /* subtle separation */
  padding-block: var(--space-11) var(--space-10);
}

/* --- Heading -------------------------------------------------- */
.curriculum__heading {
  font-size: var(--fs-4xl);
  font-weight: var(--fw-extrabold);
  color: var(--clr-heading);
  line-height: var(--leading-tight);
  text-align: center;
  margin-bottom: var(--space-10);
}

/* --- Module grid: 2 cols x 5 rows ----------------------------- */
.curriculum__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-5);
}

/* --- Module card ---------------------------------------------- */
.curriculum__card {
  position: relative;
  background-color: var(--clr-bg);
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-lg);
  padding: var(--space-7);
  /* generous room so the number can sit large in the background */
  overflow: hidden;
  /* subtle, gentle hover lift */
  transition:
    transform var(--dur-base) var(--ease-spring),
    box-shadow var(--dur-base) var(--ease-out);
}

/* Flat/minimal by default; shadow only appears on hover */
.curriculum__card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}

/* --- Large background number ---------------------------------- */
.curriculum__number {
  position: absolute;
  inset-block-start: -0.5rem;
  inset-inline-start: -0.15rem;
  font-size: var(--fs-6xl); /* 80px — big editorial accent */
  font-weight: var(--fw-extrabold);
  line-height: 1;
  /* light/muted, blended into the card — NOT full brand/dark */
  color: var(--clr-border);
  /* kept behind the text layer for legibility */
  z-index: 0;
  user-select: none;
  pointer-events: none;
  /* hover micro-animation: subtle translate/scale */
  transition: transform var(--dur-slow) var(--ease-out);
}

.curriculum__card:hover .curriculum__number {
  transform: translateY(-6px) scale(1.06);
}

/* --- Card body (text sits above the number) ------------------- */
.curriculum__body {
  position: relative;
  z-index: 1;
}

/* Title row that can optionally hold an icon */
.curriculum__head {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

/* Module title */
.curriculum__title {
  font-size: var(--fs-xl);
  font-weight: var(--fw-bold);
  color: var(--clr-heading);
  line-height: var(--leading-snug);
  margin-bottom: var(--space-3);
}

/* Small brand-blue line icon (only on select modules) */
.curriculum__icon {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  color: var(--clr-brand);
  stroke-width: 2;
}

/* Description */
.curriculum__text {
  font-size: var(--fs-base);
  color: var(--clr-text);
  line-height: var(--leading-snug);
}

/* Inline Latin terms inside RTL sentences */
.curriculum__lat {
  direction: ltr;
  unicode-bidi: isolate;
}

/* --- Grid reveal (batches/waves, via JS) ----------------------- */
.c-reveal {
  opacity: 0;
  transform: translateY(24px) scale(0.98);
  transition:
    opacity var(--dur-slow) var(--ease-out),
    transform var(--dur-slow) var(--ease-out);
}

.c-reveal.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* Quick stagger: cards within a revealed batch pop in one after
   the other. --delay is set on each card by JS (batch index). */
.curriculum__card.c-reveal {
  transition-delay: calc(var(--delay, 0) * 90ms);
}

/* ============================================================
   LIVE SESSIONS + ONE-TO-ONE COACHING SECTION
   Split editorial layout in two alternating parts.
   NOTE: Not cards, not a grid-of-boxes. Each part is a clean
   two-column split (text | visual), mirrored for the second part
   to create rhythm. All visuals are pure CSS/HTML/SVG mockups.
   Alternating side-entrance reveals are driven by JS adding
   .is-visible to .l-reveal / .l-visual.
   ============================================================ */
.live {
  background-color: var(--clr-bg); /* full white contrast */
  padding-block: var(--space-11) var(--space-10);
  overflow: hidden;
}

/* --- Section heading ----------------------------------------- */
.live__heading {
  font-size: var(--fs-4xl);
  font-weight: var(--fw-extrabold);
  color: var(--clr-heading);
  line-height: var(--leading-tight);
  text-align: center;
  margin-bottom: var(--space-11);
}

/* --- Each editorial part: two-column split ------------------- */
.live__part {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-9);
  align-items: center;
}

.live__part + .live__part {
  margin-top: var(--space-11);
}

/* Text column */
.live__text {
  max-width: 34rem;
}

/* Small label (brand-blue, bold) */
.live__label {
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
  color: var(--clr-brand);
  margin-bottom: var(--space-4);
}

/* Descriptive paragraph */
.live__copy {
  font-size: var(--fs-lg);
  color: var(--clr-text);
  line-height: var(--leading-loose);
}

/* --- Inline notes/tags (not cards) --------------------------- */
.live__tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-5);
}

.live__tag {
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--clr-brand);
  padding: 0.35rem 0.85rem;
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-full);
  background-color: var(--clr-bg-subtle);
  white-space: nowrap;
  transition:
    border-color var(--dur-base) var(--ease-out),
    color var(--dur-base) var(--ease-out),
    transform var(--dur-base) var(--ease-out),
    box-shadow var(--dur-base) var(--ease-out);
}

/* --- Visual column ------------------------------------------- */
.live__visual {
  position: relative;
}

/* --- Live Session Interface panel ----------------------------- */
.session-panel {
  background-color: var(--clr-bg);
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  /* reveal: fades + scales in (96% -> 100%), like .prep__panel */
  opacity: 0;
  transform: scale(0.96);
  transition:
    opacity var(--dur-slow) var(--ease-out),
    transform var(--dur-slow) var(--ease-out);
}

.session-panel.is-visible {
  opacity: 1;
  transform: scale(1);
}

/* Top bar: platform name (start) + LIVE indicator (end) */
.session-panel-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-4) var(--space-6);
  border-bottom: 1px solid var(--clr-border);
  background-color: var(--clr-bg-subtle);
}

.session-platform {
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  letter-spacing: 0.14em;
  color: var(--clr-heading);
  text-transform: uppercase;
}

.session-live {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  letter-spacing: 0.08em;
  color: var(--clr-brand);
}

/* LIVE dot: soft continuous pulse (reads as "currently live") */
.session-live-dot {
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 50%;
  background-color: var(--clr-brand);
  animation: sessionLivePulse 2.2s ease-in-out infinite;
}

@keyframes sessionLivePulse {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(25, 58, 109, 0);
    opacity: 1;
  }
  50% {
    box-shadow: 0 0 0 5px rgba(25, 58, 109, 0.25);
    opacity: 0.75;
  }
}

/* Session body */
.session-body {
  padding: var(--space-6);
}

.session-head {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.session-meta {
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.04em;
  color: var(--clr-text);
  text-transform: uppercase;
}

.session-topic {
  font-size: var(--fs-xl);
  font-weight: var(--fw-extrabold);
  color: var(--clr-heading);
  line-height: var(--leading-tight);
}

/* Thin divider */
.session-divider {
  border: none;
  border-top: 1px solid var(--clr-border);
  margin: var(--space-5) 0;
}

/* Sample customer objection — distinct quoted callout */
.session-quote {
  font-size: var(--fs-3xl);
  font-weight: var(--fw-extrabold);
  color: var(--clr-brand);
  line-height: var(--leading-tight);
  text-align: center;
  /* hidden initially; pops in via is-visible */
  opacity: 0;
  transform: scale(0.94);
  transition:
    opacity var(--dur-base) var(--ease-out),
    transform var(--dur-base) var(--ease-spring);
  transition-delay: 220ms;
}

.session-quote.is-visible {
  opacity: 1;
  transform: scale(1);
}

/* Prompt text fade-in */
.session-prompt {
  margin-top: var(--space-2);
  text-align: center;
  font-size: var(--fs-md);
  font-weight: var(--fw-semibold);
  color: var(--clr-text);
  opacity: 0;
  transform: translateY(8px);
  transition:
    opacity var(--dur-base) var(--ease-out),
    transform var(--dur-base) var(--ease-out);
  transition-delay: 300ms;
}

.session-prompt.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Feature list with brand-blue checkmarks */
.session-features {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: var(--space-3);
}

.session-feature {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--clr-heading);
  /* hidden initially; each waits its --delay */
  opacity: 0;
  transform: translateY(10px);
  transition:
    opacity var(--dur-base) var(--ease-out),
    transform var(--dur-base) var(--ease-out);
  transition-delay: calc(var(--delay, 0) * 120ms + 400ms);
}

.session-feature.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.session-feature-check {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  border-radius: var(--radius-full);
  background-color: var(--clr-brand);
  border: 2px solid var(--clr-brand);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}

.session-feature-icon {
  width: 11px;
  height: 11px;
  display: block;
}

/* --- Feedback received badge (per-scenario cycle) --------------- */
.session-badge {
  margin-top: var(--space-4);
  text-align: center;
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  color: var(--clr-brand);
  opacity: 0;
  transform: translateY(6px);
  transition:
    opacity var(--dur-base) var(--ease-out),
    transform var(--dur-base) var(--ease-out);
}

.session-badge.sp-is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* --- Panel hover lift (matches dashboard panel hover) ----------- */
.session-panel:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-lg), 0 6px 20px rgba(15, 23, 42, 0.06);
}

/* Override hover when panel is animating entrance — prevents
   hover from replacing the entrance scale transform mid-flight.
   Matches specificity (0,1,0) but wins via later source order. */
.session-panel.is-visible:hover {
  transform: translateY(-3px);
}

/* --- Reduced motion: show final static state ------------------- */
@media (prefers-reduced-motion: reduce) {
  .session-panel {
    opacity: 1;
    transform: scale(1);
    transition: none;
  }

  .session-quote,
  .session-prompt,
  .session-feature,
  .session-badge {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .session-live-dot {
    animation: none;
    box-shadow: 0 0 0 0 rgba(25, 58, 109, 0);
    opacity: 1;
  }

  .session-panel:hover {
    transform: translateY(0);
  }
}

/* ============================================================
   SESSION PANEL — LOOPING SCENARIO ANIMATION STATES
   JS-driven class toggles control the story loop. Each element
   starts hidden (opacity 0) and becomes visible via .sp-is-visible.
   Exit transitions fire automatically when the class is removed.
   ============================================================ */
.session-head {
  opacity: 0;
  transform: translateY(8px);
  transition:
    opacity var(--dur-base) var(--ease-out),
    transform var(--dur-base) var(--ease-out);
}

.session-platform.sp-is-visible,
.session-head.sp-is-visible {
  opacity: 1;
  transform: translateY(0);
}

.session-live {
  opacity: 0;
  transition: opacity var(--dur-base) var(--ease-out);
}

.session-live.sp-is-visible {
  opacity: 1;
}

/* LIVE dot: continuous subtle pulse — runs indefinitely once started */
@keyframes sessionLiveBreath {
  0%, 100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.7;
    transform: scale(0.88);
  }
}

.session-live-dot.is-pulsing {
  animation: sessionLiveBreath 2.5s ease-in-out infinite;
}

.session-quote {
  opacity: 0;
  transform: scale(0.94);
  transition:
    opacity 450ms var(--ease-out),
    transform 450ms var(--ease-spring);
}

.session-quote.sp-is-visible {
  opacity: 1;
  transform: scale(1);
}

.session-prompt {
  opacity: 0;
  transform: translateY(10px);
  transition:
    opacity var(--dur-base) var(--ease-out),
    transform var(--dur-base) var(--ease-out);
}

.session-prompt.sp-is-visible {
  opacity: 1;
  transform: translateY(0);
}

.session-feature {
  opacity: 0;
  transform: translateX(8px);
  transition:
    opacity var(--dur-base) var(--ease-out),
    transform var(--dur-base) var(--ease-out);
}

.session-feature.sp-is-visible {
  opacity: 1;
  transform: translateX(0);
}

.session-feature-check {
  transform: scale(0.7);
  transition: transform var(--dur-base) var(--ease-spring);
}

.session-feature.sp-is-visible .session-feature-check {
  transform: scale(1);
}

/* ============================================================
   LIVE SESSIONS — TEXT COLUMN ONE-TIME REVEAL
   Heading fades up first, paragraph follows ~100ms after, then
   the four pills stagger in sequence. After reveal, elements
   stay static — no looping.
   ============================================================ */
.live-text-reveal {
  opacity: 0;
  transform: translateY(16px);
  transition:
    opacity var(--dur-slow) var(--ease-out),
    transform var(--dur-slow) var(--ease-out);
}

.live-text-reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Heading reveals first (0ms delay) */
.live__label--head.live-text-reveal {
  transition-delay: 0ms;
}

/* Paragraph follows ~100ms after heading */
.live__label-sub.live-text-reveal {
  transition-delay: 100ms;
}

/* Copy paragraph ~120ms after sub heading */
.live__copy.live-text-reveal {
  transition-delay: 120ms;
}

/* Pills stagger in sequence, each 120ms apart, starting ~250ms in */
.live__tag.live-text-reveal:nth-child(1) { transition-delay: 250ms; }
.live__tag.live-text-reveal:nth-child(2) { transition-delay: 370ms; }
.live__tag.live-text-reveal:nth-child(3) { transition-delay: 490ms; }
.live__tag.live-text-reveal:nth-child(4) { transition-delay: 610ms; }

/* Pill hover: border becomes more visible, slight lift */
.live__tag:hover {
  border-color: var(--clr-brand);
  color: var(--clr-heading);
  transform: translateY(-2px);
  box-shadow: var(--shadow-sm);
}

/* --- One-to-One Coaching: two-line heading -------------------- */
.live__label--head {
  font-size: var(--fs-2xl);
  line-height: var(--leading-tight);
  margin-bottom: var(--space-1);
}

.live__label-sub {
  font-size: var(--fs-xl);
  font-weight: var(--fw-bold);
  color: var(--clr-heading);
  line-height: var(--leading-tight);
  margin-bottom: var(--space-4);
}

/* --- Coaching process: step-flow (reuses the "Paid / Skill"
       career-path flow visual pattern — small bold labels joined
       by thin arrows, wrapping gracefully on narrow screens) ---- */
.live__flow {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: var(--space-3) var(--space-2);
  margin-top: var(--space-6);
}

.live__flow-stage {
  text-align: center;
}

.live__flow-label {
  font-size: var(--fs-md);
  font-weight: var(--fw-bold);
  color: var(--clr-heading);
  white-space: nowrap;
}

/* Thin elegant arrow between stages */
.live__flow-arrow {
  flex: 0 0 auto;
  width: 1.25rem;
  height: 1.25rem;
  display: block;
  fill: none;
  stroke: var(--clr-text);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* --- Coaching Progress Dashboard panel ------------------------ */
.coach-panel {
  background-color: var(--clr-bg);
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}

/* Window chrome (top bar: dots + title) */
.coach-panel-top {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-4) var(--space-6);
  border-bottom: 1px solid var(--clr-border);
  background-color: var(--clr-bg-subtle);
}

.coach-panel-dots {
  position: absolute;
  inset-inline-start: var(--space-5);
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  gap: var(--space-2);
}

.coach-dot {
  width: 10px;
  height: 10px;
  border-radius: var(--radius-full);
  background-color: var(--clr-border);
  display: block;
}

.coach-panel-title {
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  letter-spacing: 0.14em;
  color: var(--clr-brand);
  text-transform: uppercase;
}

/* --- Progress list -------------------------------------------- */
.coach-progress {
  padding: var(--space-6);
}

.coach-progress-sublabel {
  display: block;
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  letter-spacing: 0.06em;
  color: var(--clr-brand);
  margin-bottom: var(--space-5);
}

/* Each skill row: hidden initially, staggers in via --delay */
.coach-progress-row {
  margin-bottom: var(--space-5);
  opacity: 0;
  transform: translateY(12px);
  transition:
    opacity var(--dur-base) var(--ease-out),
    transform var(--dur-base) var(--ease-out);
}

.coach-progress-row:last-child {
  margin-bottom: 0;
}

.coach-progress-row.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Rows reveal top-to-bottom, ~200ms apart (set --delay in JS) */
.coach-progress-row {
  transition-delay: calc(var(--delay, 0) * 200ms + 350ms);
}

/* Label + percentage on one line */
.coach-progress-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-2);
}

.coach-progress-name {
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--clr-heading);
}

.coach-progress-pct {
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  color: var(--clr-brand);
}

/* Rounded track + brand-blue fill (animates 0% -> target) */
.coach-progress-bar {
  height: 8px;
  border-radius: var(--radius-full);
  background-color: var(--clr-bg-subtle);
  border: 1px solid var(--clr-border);
  overflow: hidden;
}

.coach-progress-fill {
  display: block;
  width: 0;
  height: 100%;
  border-radius: var(--radius-full);
  background-color: var(--clr-brand);
  /* width animates to --bar-pct when its row is visible */
  transition: width var(--dur-base) var(--ease-out);
  transition-delay: calc(var(--delay, 0) * 200ms + 350ms);
}

.coach-progress-row.is-visible .coach-progress-fill {
  width: var(--bar-pct, 0%);
}

/* --- Status lines (checkmarks) -------------------------------- */
.coach-status-list {
  margin: 0;
  padding: 0 var(--space-6) var(--space-6);
  list-style: none;
}

.coach-status {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--clr-heading);
  /* hidden initially; fade in after the bars, staggered via --delay */
  opacity: 0;
  transform: translateY(10px);
  transition:
    opacity var(--dur-base) var(--ease-out),
    transform var(--dur-base) var(--ease-out);
  transition-delay: calc(var(--delay, 0) * 200ms + 350ms);
}

.coach-status.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.coach-status + .coach-status {
  margin-top: var(--space-3);
}

.coach-status-check {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  border-radius: var(--radius-full);
  background-color: var(--clr-brand);
  border: 2px solid var(--clr-brand);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}

.coach-status-check-icon {
  width: 11px;
  height: 11px;
  display: block;
}

.coach-status--next {
  color: var(--clr-text);
  font-weight: var(--fw-medium);
}

/* Respect prefers-reduced-motion: show the final dashboard state
   immediately (full bars, rows + status visible, no transitions). */
@media (prefers-reduced-motion: reduce) {
  .coach-progress-row,
  .coach-status {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .coach-progress-fill {
    width: var(--bar-pct, 0%);
    transition: none;
  }
}

/* --- Center connecting statement ----------------------------- */
.live__closing {
  margin-top: var(--space-12);
  text-align: center;
  max-width: 46rem;
  margin-inline: auto;
}

.live__closing-text {
  font-size: var(--fs-3xl);
  font-weight: var(--fw-extrabold);
  color: var(--clr-heading);
  line-height: var(--leading-snug);
}

.live__accent {
  color: var(--clr-brand);
}

/* --- Reveals (JS adds .is-visible) ---------------------------- */
/* Text fades up normally */
.l-reveal {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity var(--dur-slower) var(--ease-out),
    transform var(--dur-slower) var(--ease-out);
}

.l-reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Visual mockups slide in from the side (alternating) */
.l-visual {
  opacity: 0;
  transition:
    opacity var(--dur-slower) var(--ease-out),
    transform var(--dur-slower) var(--ease-spring);
}

.live__part .l-visual {
  /* Part 1 (RTL): slides from the left (visual sits on the left).
     Small delay so the text fades up first, then the visual. */
  transform: translateX(-32px);
  transition-delay: 140ms;
}

.live__part--alt .l-visual {
  /* Part 2 (mirrored): slides from the right */
  transform: translateX(32px);
  transition-delay: 140ms;
}

.l-visual.is-visible {
  opacity: 1;
  transform: translateX(0);
}

/* Center statement: fades up with slight scale-in emphasis */
.live__closing.l-reveal {
  transform: translateY(24px) scale(0.98);
}

.live__closing.l-reveal.is-visible {
  transform: translateY(0) scale(1);
}

/* ============================================================
   CAREER PATH SECTION
   Signature section — a large scroll-driven vertical timeline.
   Structure:
     .career__timeline  (relative; holds the vertical line)
       .career__line    (muted track)
         .career__fill  (brand-blue overlay, height driven by JS)
       .career__step    (half-width row, alternates left/right)
         .career__node  (circular marker on the line)
         .career__card  (number + title + description)
   Progress handles a per-step [data-state]: 'upcoming' | 'active'
   | 'completed', toggled by JS (js/main.js) as the fill scrolls.
   ============================================================ */
.career {
  background-color: var(--clr-bg-subtle); /* subtle separation */
  padding-block: var(--space-11) var(--space-10);
}

/* --- Heading -------------------------------------------------- */
.career__heading {
  font-size: var(--fs-4xl);
  font-weight: var(--fw-extrabold);
  color: var(--clr-heading);
  line-height: var(--leading-tight);
  text-align: center;
  margin-bottom: var(--space-11);
}

/* --- Timeline container --------------------------------------- */
.career__timeline {
  position: relative;
  max-width: 64rem;
  margin-inline: auto;
  /* flush edge so odd/even half-steps and auto-margins land exactly */
  padding-block: var(--space-3);
}

/* Continuous vertical line, physically centered */
.career__line {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 3px;
  background-color: var(--clr-border); /* muted track */
  border-radius: var(--radius-full);
  pointer-events: none;
}

/* Brand-blue fill overlay — height set by JS */
.career__fill {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 0%;
  background-color: var(--clr-brand);
  border-radius: var(--radius-full);
  transition: height 60ms linear; /* smooth, tied to scroll */
  will-change: height;
}

/* --- Each step (alternating left/right) ----------------------- */
.career__step {
  position: relative;
  width: 50%;
  padding-block: var(--space-7);
  padding-inline: var(--space-8);
}

/* Physical alternation: odd -> left half, even -> right half */
.career__step:nth-child(odd) {
  margin-right: auto; /* push to the LEFT (physical) */
  text-align: end;    /* text faces the center line */
}

.career__step:nth-child(even) {
  margin-left: auto;  /* push to the RIGHT (physical) */
  text-align: start;  /* text faces the center line */
}

/* --- Node (circular marker ON the line) ----------------------- */
.career__node {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  border-radius: 50%;
  /* hollow default (upcoming) */
  background-color: var(--clr-bg-subtle);
  border: 2px solid var(--clr-border);
  z-index: 2;
  transition:
    background-color var(--dur-base) var(--ease-out),
    box-shadow var(--dur-base) var(--ease-out);
}

.career__step:nth-child(odd) .career__node {
  right: -9px;  /* center on the line at the step's inner edge */
}

.career__step:nth-child(even) .career__node {
  left: -9px;   /* center on the line at the step's inner edge */
}

/* --- Stage number / title / description ----------------------- */
.career__num {
  display: block;
  font-size: var(--fs-4xl); /* large, prominent (part of the node story) */
  font-weight: var(--fw-extrabold);
  line-height: 1;
  color: var(--clr-border); /* muted by default (upcoming) */
  margin-bottom: var(--space-3);
  transition: color var(--dur-base) var(--ease-out);
}

.career__title {
  font-size: var(--fs-xl);
  font-weight: var(--fw-bold);
  color: var(--clr-heading);
  letter-spacing: 0.02em;
  margin-bottom: var(--space-3);
  /* Never clip / truncate long stage titles (e.g. "PROVE YOURSELF"):
     wrap normally and break a long unbroken word only if truly needed. */
  white-space: normal;
  overflow-wrap: break-word;
  transition: color var(--dur-base) var(--ease-out);
}

.career__desc {
  font-size: var(--fs-base);
  color: var(--clr-text);
  line-height: var(--leading-snug);
  transition: color var(--dur-base) var(--ease-out);
}

/* --- Mobile-only horizontal strip + modal (DESKTOP HIDDEN) ----- */
/* These replace the vertical timeline on ≤900px and must never show
   on desktop. Default display:none; flipped to flex/block only inside
   the CAREER PATH — RESPONSIVE 900px media query. */
.career__strip,
.career__dots,
.career__modal {
  display: none;
}

/* --- Step states (driven by JS) ------------------------------- */
/* The k-reveal handles the step's translateY entrance; the state
   scale is applied to the card so the two transforms never clash. */
.career__card {
  transition: transform var(--dur-slow) var(--ease-out);
  /* upcoming (default): slightly smaller */
  transform: scale(0.97);
}

/* Completed: fully legible, filled node, not emphasized */
.career__step[data-state='completed'] .career__node {
  background-color: var(--clr-brand);
  border-color: var(--clr-brand);
}

.career__step[data-state='completed'] .career__num {
  color: var(--clr-text);
}

.career__step[data-state='completed'] .career__card {
  transform: scale(1);
}

/* Active: full emphasis — solid node, glow, larger card */
.career__step[data-state='active'] .career__node {
  background-color: var(--clr-brand);
  border-color: var(--clr-brand);
  box-shadow: 0 0 0 6px rgba(25, 58, 109, 0.18);
}

.career__step[data-state='active'] .career__card {
  transform: scale(1.03);
}

.career__step[data-state='active'] .career__num {
  color: var(--clr-brand);
}

.career__step[data-state='active'] .career__title {
  color: var(--clr-heading);
}

.career__step[data-state='active'] .career__desc {
  color: var(--clr-heading);
}

/* --- Section reveal (fade up, reused pattern) ------------------ */
.k-reveal {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity var(--dur-slower) var(--ease-out),
    transform var(--dur-slower) var(--ease-out);
}

.k-reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Timeline steps reveal with a quick top-down stagger */
.career__step.k-reveal {
  transition-delay: calc(var(--step-delay, 0) * 70ms);
}

/* ============================================================
   CAREER PREPARATION SECTION
   A single, unified "Career Workspace / Dashboard" mockup — NOT
   a grid of cards. One believable product panel (pure CSS/HTML/
   SVG) builds a career profile step-by-step, synced with a left
   text column that highlights one content block at a time.
   Reveal choreography (driven by js/main.js):
     1. .prep__panel              — fades & scales in first
     2. .prep__block-label        — "YOUR CAREER PROFILE" appears
     3. .prep__row (top→bot)      — each profile item reveals with
        its checkmark while the matching left text block activates
        (previous block dims)
     4. .prep__meter / .prep__fill — readiness bar fills to 85%
     5. .prep__ready              — final "CAREER READY" flow state
        cross-fades in over the building state
   ============================================================ */
.prep {
  background-color: var(--clr-bg); /* full white contrast */
  padding-block: var(--space-11) var(--space-10);
  overflow: hidden;
}

/* --- Heading block (centered, two-line thought) -------------- */
.prep__head {
  text-align: center;
  max-width: 46rem;
  margin-inline: auto;
  margin-bottom: var(--space-10);
}

.prep__lead {
  font-size: var(--fs-xl);
  font-weight: var(--fw-semibold);
  color: var(--clr-heading);
  margin-bottom: var(--space-2);
}

.prep__heading {
  font-size: var(--fs-3xl);
  font-weight: var(--fw-extrabold);
  color: var(--clr-heading);
  line-height: var(--leading-tight);
}

/* --- Composition: panel + notes ------------------------------ */
.prep__layout {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: var(--space-8);
  align-items: center;
}

/* --- Dashboard / Workspace panel ----------------------------- */
.prep__panel {
  background-color: var(--clr-bg);
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  /* initial hidden state for the panel-first reveal */
  opacity: 0;
  transform: scale(0.92) translateY(20px);
  transition:
    opacity var(--dur-slow) var(--ease-out),
    transform var(--dur-slow) var(--ease-out);
}

.prep__panel.is-visible {
  opacity: 1;
  transform: scale(1) translateY(0);
}

/* --- Window chrome (top bar: dots + title) ------------------- */
.prep__panel-top {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-4) var(--space-6);
  border-bottom: 1px solid var(--clr-border);
  background-color: var(--clr-bg-subtle);
}

.prep__dots {
  position: absolute;
  inset-inline-start: var(--space-5);
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  gap: var(--space-2);
}

.prep__dot {
  width: 10px;
  height: 10px;
  border-radius: var(--radius-full);
  background-color: var(--clr-border);
  display: block;
}

.prep__panel-title {
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  letter-spacing: 0.14em;
  color: var(--clr-brand);
  text-transform: uppercase;
}

/* --- Building state (profile checklist + readiness) ---------- */
.prep__building {
  padding-block: var(--space-2);
  position: relative;
  transition: opacity var(--dur-slow) var(--ease-out);
}

/* Faded out as the final CAREER READY state cross-fades over it */
.prep__building.prep-is-hidden {
  opacity: 0;
}

/* --- Block one: YOUR CAREER PROFILE ------------------------- */
.prep__block {
  padding: var(--space-4) var(--space-6);
}

.prep__block + .prep__block {
  padding-top: var(--space-2);
}

.prep__block-label {
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--clr-brand);
  margin-bottom: var(--space-4);
  opacity: 0;
  transform: translateY(6px);
  transition:
    opacity var(--dur-base) var(--ease-out),
    transform var(--dur-base) var(--ease-out);
}

.prep__block.is-visible .prep__block-label,
.prep__block-label.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.prep__list {
  margin: 0;
  padding: 0;
}

/* --- Each profile row: indicator + label --------------------- */
.prep__row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) 0;
  /* initial hidden state; revealed top-to-bottom by JS */
  opacity: 0;
  transform: translateY(16px);
  transition:
    opacity var(--dur-base) var(--ease-out),
    transform var(--dur-base) var(--ease-out);
}

.prep__row.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* --- Indicator (brand-blue filled check once reached) -------- */
.prep__check {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--clr-bg-subtle);
  border: 2px solid var(--clr-border);
  color: var(--clr-bg); /* white stroke once filled */
  /* pop/scale-in micro-animation, just after its row appears */
  transform: scale(0);
  transition: transform var(--dur-slow) var(--ease-spring);
}

.prep__row.is-visible .prep__check {
  transform: scale(1);
}

.prep__check-icon {
  width: 14px;
  height: 14px;
  opacity: 0;
  transition: opacity var(--dur-base) var(--ease-out);
}

.prep__row.is-visible .prep__check-icon {
  opacity: 1;
}

/* Reached row: turn the indicator brand-blue */
.prep__row[data-reached='true'] .prep__check {
  background-color: var(--clr-brand);
  border-color: var(--clr-brand);
}

/* --- Row label ----------------------------------------------- */
.prep__label {
  font-size: var(--fs-md);
  font-weight: var(--fw-semibold);
  color: var(--clr-heading);
}

/* Not yet reached: muted label, but still readable once row shown */
.prep__row.is-visible[data-reached='false'] .prep__label {
  color: var(--clr-text);
  font-weight: var(--fw-medium);
}

/* --- Thin divider between the two blocks --------------------- */
.prep__divider {
  height: 1px;
  background-color: var(--clr-border);
  margin-inline: var(--space-6);
}

/* --- Block two: PROFILE READINESS --------------------------- */
.prep__block--readiness .prep__block-label {
  margin-bottom: var(--space-3);
}

.prep__meter {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  opacity: 0;
  transform: translateY(8px);
  transition:
    opacity var(--dur-base) var(--ease-out),
    transform var(--dur-base) var(--ease-out);
}

.prep__meter.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.prep__track {
  flex: 1;
  height: 12px;
  border-radius: var(--radius-full);
  background-color: var(--clr-bg-subtle);
  overflow: hidden;
  border: 1px solid var(--clr-border);
}

.prep__fill {
  display: block;
  height: 100%;
  width: 0%;
  border-radius: var(--radius-full);
  background-color: var(--clr-brand);
  transition: width 1.4s var(--ease-out);
}

.prep__pct {
  font-size: var(--fs-md);
  font-weight: var(--fw-extrabold);
  color: var(--clr-brand);
  flex: 0 0 auto;
  min-width: 3.5ch;
  text-align: end;
}

.prep__ready-line {
  font-size: var(--fs-sm);
  color: var(--clr-text);
  margin-top: var(--space-3);
  opacity: 0;
  transform: translateY(6px);
  transition:
    opacity var(--dur-base) var(--ease-out),
    transform var(--dur-base) var(--ease-out);
}

.prep__ready-line.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* --- Final transformation state: CAREER READY flow ----------- */
.prep__ready {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-8) var(--space-6);
  text-align: center;
  overflow-y: auto;
  opacity: 0;
  transform: scale(0.96);
  transition:
    opacity var(--dur-slow) var(--ease-out),
    transform var(--dur-slow) var(--ease-out);
}

.prep__ready.is-visible {
  opacity: 1;
  transform: scale(1);
}

/* Keep the final state out of the flow until JS reveals it */
.prep__ready[hidden] {
  display: none;
}

.prep__ready-title {
  font-size: var(--fs-2xl);
  font-weight: var(--fw-extrabold);
  color: var(--clr-heading);
  margin-bottom: var(--space-5);
  letter-spacing: 0.02em;
}

.prep__ready-check {
  color: var(--clr-brand);
}

/* Step-flow: bold labels joined by thin arrows (reuses the
   coaching / paid-practice flow visual pattern) */
.prep__flow {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--space-3) var(--space-2);
  margin-bottom: var(--space-3);
}

.prep__flow-stage {
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  letter-spacing: 0.06em;
  color: var(--clr-heading);
  white-space: nowrap;
  opacity: 0;
  transform: translateY(6px);
  transition:
    opacity var(--dur-base) var(--ease-out),
    transform var(--dur-base) var(--ease-out);
}

.prep__flow-arrow {
  flex: 0 0 auto;
  width: 1.25rem;
  height: 1.25rem;
  display: block;
  fill: none;
  stroke: var(--clr-brand);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0;
  transition: opacity var(--dur-base) var(--ease-out);
}

.prep__ready.is-visible .prep__flow-stage,
.prep__ready.is-visible .prep__flow-arrow {
  opacity: 1;
  transform: translateY(0);
}

/* --- Synced text blocks (only one prominent at a time) ------- */
.prep__notes {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  justify-content: center;
}

.prep__note {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
  /* Default state: all notes are visible but dimmed so the
     visitor can glance back at earlier steps. The JS adds
     is-active to the current step and un-dims it. */
  opacity: 0.55;
  transform: translateY(8px);
  transition:
    opacity var(--dur-base) var(--ease-out),
    transform var(--dur-base) var(--ease-out);
}

.prep__note.is-active {
  opacity: 1;
  transform: translateY(0);
}

.prep__note-icon {
  flex: 0 0 auto;
  font-size: var(--fs-2xl);
  line-height: 1;
  filter: grayscale(0.2);
  transition: transform var(--dur-base) var(--ease-spring);
}

.prep__note.is-active .prep__note-icon {
  transform: scale(1.08);
}

.prep__note-body {
  min-width: 0;
}

.prep__note-label {
  display: block;
  font-size: var(--fs-base);
  font-weight: var(--fw-bold);
  color: var(--clr-heading);
  margin-bottom: var(--space-1);
}

.prep__note-text {
  font-size: var(--fs-base);
  color: var(--clr-text);
  line-height: var(--leading-loose);
}

/* ============================================================
   PAID PRACTICE SECTION
   Restrained, premium tone — pure typography + a clean 4-stage
   flow diagram. No coins / money emojis / confetti / flashy
   colors. Structure:
     .paid__heading  (big typographic statement, fades up first)
     .paid__flow     (desktop: LTR horizontal spine; mobile: LTR
                      vertical spine down the start side)
       .paid__line   (thin muted track)
         .paid__fill (brand-blue overlay, width/height by JS)
       .paid__stage  ("NN — EN" label | ring marker | AR sub-label)
     .paid__note     (neutral disclaimer, fades in last)
   A scroll-driven fill (reuses bindScrollFill in js/main.js) draws
   the connecting line from LEARN -> BUILD EXPERIENCE, emphasizing
   each stage ([data-active]) once the fill reaches it.
   ============================================================ */
.paid {
  background-color: var(--clr-bg-subtle-2); /* #F3F6FA */
  padding-block: var(--space-11) var(--space-10);
  overflow: hidden;
}

/* --- Big typographic statement -------------------------------- */
.paid__heading {
  font-size: var(--fs-4xl);
  font-weight: var(--fw-extrabold);
  color: var(--clr-heading);
  line-height: var(--leading-tight);
  text-align: center;
  max-width: 46rem;
  margin-inline: auto;
  margin-bottom: var(--space-11);
}

/* --- Reveal pattern (statement + note, one-time) -------------- */
.paid-reveal {
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity var(--dur-slower) var(--ease-out),
    transform var(--dur-slower) var(--ease-out);
}

.paid-reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* --- Flow diagram (desktop horizontal LTR spine) -------------- */
.paid__flow {
  position: relative;   /* anchors the connecting line */
  direction: ltr;       /* English pipeline reads left-to-right */
  display: grid;
  grid-auto-columns: 1fr;
  align-items: stretch;
  max-width: 56rem;
  margin-inline: auto;
}

/* Thin muted connecting line, centered through the stage markers */
.paid__line {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  transform: translateY(-50%);
  height: 2px;
  background-color: var(--clr-border);
  border-radius: var(--radius-full);
  pointer-events: none;
}

/* Brand-blue fill overlay — width set by JS (horizontal mode) */
.paid__fill {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 0%;
  background-color: var(--clr-brand);
  border-radius: var(--radius-full);
  transition: width 60ms linear; /* smooth, tied to scroll */
  will-change: width;
}

/* --- Each stage (column: EN label | marker | AR label) -------- */
.paid__stage {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding-block: var(--space-5);
}

/* Main label — a Latin "NN — LABEL" run inside an RTL document, so it
   is isolated LTR exactly like the other inline Latin fragments (see
   .method__lat). Muted until the fill reaches the stage. */
.paid__stage-en {
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
  letter-spacing: 0.02em;
  color: var(--clr-text);
  direction: ltr;
  unicode-bidi: isolate;
  transition: color var(--dur-base) var(--ease-out);
}

/* Stage marker — a hand-drawn inline SVG downward chevron-arrow,
   vertically centered so it sits ON the line (the flow reads top-to-
   bottom on mobile, joined by the vertical rail). Before the fill
   arrives the arrow is a muted --clr-brand tint (an empty "socket");
   once the stage becomes active the arrow fills/lights in --clr-brand
   with a soft glow + gentle scale-up. Active vs upcoming stays
   "muted vs brand", driven entirely by [data-active] from the
   scroll-fill logic — this rule only restyles. */
.paid__marker {
  display: block;
  width: 22px;
  height: 22px;
  margin-block: auto;
  fill: none;
  stroke: rgba(25, 58, 109, 0.3);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition:
    stroke var(--dur-base) var(--ease-out),
    filter var(--dur-base) var(--ease-out),
    transform var(--dur-base) var(--ease-out);
}

/* Small secondary Arabic sub-label */
.paid__stage-ar {
  font-size: var(--fs-xs);
  color: var(--clr-text);
  line-height: var(--leading-snug);
  text-align: center;
  max-width: 11rem;
}

/* --- Stage state: emphasized once reached --------------------- */
.paid__stage[data-active='true'] .paid__stage-en {
  color: var(--clr-heading);
}

/* Active: the arrow lights up in --clr-brand with a soft halo glow
   and a gentle scale-up so the transition still feels alive. */
.paid__stage[data-active='true'] .paid__marker {
  stroke: var(--clr-brand);
  filter: drop-shadow(0 0 6px rgba(25, 58, 109, 0.35));
  transform: scale(1.12);
}

/* Keep the arrow vertically centered on the rail AND scaled once
   active, so the mobile translateY centering isn't overridden. */
@media (max-width: 56.25rem) { /* 900px */
  .paid__stage[data-active='true'] .paid__marker {
    transform: translateY(-50%) scale(1.12);
  }
}

/* --- Neutral disclaimer note (fades in last, calmly) ---------- */
.paid__note {
  max-width: 40rem;
  margin-inline: auto;
  margin-top: var(--space-10);
  text-align: center;
  font-size: var(--fs-sm);
  color: var(--clr-text);
  line-height: var(--leading-normal);
}

.paid__note.paid-reveal {
  transition-delay: 600ms; /* appears after the statement */
}

/* ============================================================
   CAREER COMMUNITY SECTION
   "Landed on a job platform" — a single unified Career Board panel.
   Structure (top to bottom):
     .community__head        (lead + brand title + subline, reveals 1st)
     .community__board       (unified board panel)
       .community__bar       (small uppercase title row, reveal 2nd)
       .community__search    (decorative, non-interactive; typewriter)
         .community__typewriter-text + .community__typewriter-caret
       .community__tabs      (nav-style tabs + sliding underline)
         .community__tab     (active tab holds the underline)
       .community__feed-note (illustrative label, not misleading)
       .community__list
         .community__job     (title + meta | category tag | hover arrow)
           .community__new-badge ("New" pops in on the first row)
     .community__closing     (short paragraph below the board)
     .community__bridge      (mini flow bridging to "Skill Into a Service":
                              YOUR SKILL -> Employee / Freelancer / Provider)
   Reveal sequence (js/main.js): head -> board -> search (typewriter
   begins) -> tabs -> listings stagger + "New" badge -> ONE-TIME filter
   demo cycle -> manual control. All mockups are illustrative.
   ============================================================ */
.community {
  background-color: var(--clr-bg); /* full white contrast */
  padding-block: var(--space-11) var(--space-10);
  overflow: hidden;
}

/* --- Heading block (centered) --------------------------------- */
.community__head {
  text-align: center;
  max-width: 48rem;
  margin-inline: auto;
  margin-bottom: var(--space-9);
}

.community__lead {
  font-size: var(--fs-lg);
  font-weight: var(--fw-medium);
  color: var(--clr-heading);
  margin-bottom: var(--space-2);
}

.community__title {
  font-size: var(--fs-3xl);
  font-weight: var(--fw-extrabold);
  color: var(--clr-brand); /* the real section title, brand-blue */
  line-height: var(--leading-tight);
}

.community__sub {
  font-size: var(--fs-md);
  color: var(--clr-text);
  line-height: var(--leading-snug);
  margin-top: var(--space-3);
}

/* --- Unified Career Board panel ------------------------------- */
.community__board {
  max-width: 56rem;              /* tidy board width, centered */
  margin-inline: auto;
  background-color: var(--clr-bg);
  border: 1px solid var(--clr-border);  /* light border, no heavy shadows */
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

/* Top bar / title */
.community__bar {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-4) var(--space-6);
  background-color: var(--clr-bg-subtle);
  border-bottom: 1px solid var(--clr-border);
}

.community__bar-label {
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--clr-brand);
}

/* --- Decorative search bar ------------------------------------ */
.community__search {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin: var(--space-5) var(--space-6);
  padding: 0.65rem 1rem;
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-md);
  background-color: var(--clr-bg-subtle);
  /* purely decorative — must not read as clickable */
  cursor: not-allowed;
  user-select: none;
}

.community__search-icon {
  flex: 0 0 auto;
  width: 1.1rem;
  height: 1.1rem;
  display: block;
  stroke: var(--clr-text);
  opacity: 0.7;
}

.community__typewriter {
  min-height: 1.4em;
  display: inline-flex;
  align-items: center;
  gap: 2px;
  font-size: var(--fs-base);
  color: var(--clr-text);
}

.community__typewriter-text {
  white-space: nowrap;
}

/* Blinking caret for the typewriter */
.community__typewriter-caret {
  width: 2px;
  height: 1.1em;
  background-color: var(--clr-brand);
  animation: communityCaret 0.9s step-end infinite;
}

@keyframes communityCaret {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

/* --- Category tabs + sliding underline ------------------------ */
.community__tabs {
  position: relative;
  display: flex;
  gap: var(--space-2);
  padding: 0 var(--space-6);
  border-bottom: 1px solid var(--clr-border);
}

.community__tab {
  position: relative;
  appearance: none;
  background: none;
  border: none;
  padding: var(--space-3) var(--space-2);
  margin-bottom: -1px;
  cursor: pointer;
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--clr-text);
  transition: color var(--dur-base) var(--ease-out);
}

.community__tab-txt {
  white-space: nowrap;
}

.community__tab:hover {
  color: var(--clr-heading);
}

.community__tab.is-active {
  color: var(--clr-brand);
}

/* Animated underline that slides between tabs */
.community__tab-indicator {
  position: absolute;
  bottom: -1px;
  left: 0;
  height: 3px;
  border-radius: var(--radius-full) var(--radius-full) 0 0;
  background-color: var(--clr-brand);
  transition:
    transform var(--dur-base) var(--ease-out),
    width var(--dur-base) var(--ease-out);
  will-change: transform, width;
}

/* --- Illustrative label (not a live board) -------------------- */
.community__feed-note {
  font-size: var(--fs-sm);
  color: var(--clr-text);
  background-color: var(--clr-bg-subtle);
  padding: var(--space-3) var(--space-6);
  border-bottom: 1px solid var(--clr-border);
}

/* --- Job listing rows ----------------------------------------- */
.community__list {
  /* bottom border removed per-row; list ends cleanly */
}

.community__job {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-5) var(--space-6);
  border-bottom: 1px solid var(--clr-border);
  position: relative;
  transition: background-color var(--dur-base) var(--ease-out);
}

.community__job:last-child {
  border-bottom: none;
}

/* Filtered list: rows fade out/in while switching category */
.community__job.is-hidden {
  display: none;
}

.community__job.is-fading {
  transition:
    opacity var(--dur-base) var(--ease-out),
    transform var(--dur-base) var(--ease-out);
}

/* Subtle hover: background tint + small arrow appears (illustrative) */
.community__job:hover {
  background-color: var(--clr-bg-subtle);
}

.community__job-main {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  min-width: 0;
}

.community__job-title {
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
  color: var(--clr-heading);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.community__job-meta {
  font-size: var(--fs-sm);
  color: var(--clr-text);
  line-height: var(--leading-snug);
}

/* "New" badge — pops in on the first listing after reveal */
.community__new-badge {
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--clr-brand);
  background-color: var(--clr-bg-subtle);
  border: 1px solid var(--clr-brand);
  border-radius: var(--radius-full);
  padding: 0.1rem 0.55rem;
  display: inline-block;
}

/* --- Category tag (brand-blue outline pill) ------------------- */
.community__tag {
  flex: 0 0 auto;
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  color: var(--clr-brand);
  border: 1px solid var(--clr-brand);
  border-radius: var(--radius-full);
  padding: 0.3rem 0.8rem;
  white-space: nowrap;
}

/* --- Hover arrow (suggests viewable, though illustrative) ----- */
.community__job-arrow {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  color: var(--clr-brand);
  opacity: 0;
  transform: translateX(6px);
  transition:
    opacity var(--dur-base) var(--ease-out),
    transform var(--dur-base) var(--ease-out);
}

.community__job-arrow svg {
  width: 1.25rem;
  height: 1.25rem;
  display: block;
}

.community__job:hover .community__job-arrow {
  opacity: 1;
  transform: translateX(0);
}

/* --- Closing paragraph below the board ------------------------ */
.community__closing {
  max-width: 48rem;
  margin: var(--space-7) auto 0;
  text-align: center;
  font-size: var(--fs-base);
  color: var(--clr-text);
  line-height: var(--leading-loose);
}

/* --- Mini bridge flow (YOUR SKILL -> Employee/Freelancer/Provider) */
.community__bridge {
  margin-top: var(--space-10);
  text-align: center;
}

.community__bridge-root {
  font-size: var(--fs-sm);
  font-weight: var(--fw-extrabold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--clr-brand);
  display: inline-block;
}

.community__bridge-line {
  display: block;
  width: 200px;
  max-width: 100%;
  height: 40px;
  margin: var(--space-1) auto 0;
  color: var(--clr-brand);
  opacity: 0.65;
}

.community__bridge-branches {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-4) var(--space-6);
  margin-top: var(--space-1);
}

.community__bridge-branch {
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--clr-heading);
}

/* --- Reveal pattern (heading / board / closing / bridge) ------ */
.community-reveal {
  opacity: 0;
  transform: translateY(18px);
  transition:
    opacity var(--dur-base) var(--ease-out),
    transform var(--dur-base) var(--ease-out);
}

.community-reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Stagger: each reveal target waits --delay * 120ms (set by JS) */
.community-reveal {
  transition-delay: calc(var(--delay, 0) * 120ms);
}

/* Board internals revealed sequentially by JS (search, tabs, note, list) */
.community-part {
  opacity: 0;
  transform: translateY(12px);
  transition:
    opacity var(--dur-base) var(--ease-out),
    transform var(--dur-base) var(--ease-out);
}

.community-part.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ============================================================
   SKILL TO SERVICE SECTION
   A completely different visual pattern: an interactive-feeling
   "skill map" (hub-and-spoke radial diagram, pure CSS/SVG, no
   external assets) — NOT a grid, NOT cards.
   Structure:
     .skill__head   — two-line heading, fades up first (skill-reveal)
     .skill__map    — anchors a central SKILL node; on desktop a
                      radial hub draws SVG branch lines outward to
                      8 service labels; on mobile a vertical trunk
                      (skill__trunk) with stacked labels.
       .skill__core (central anchor, scales/fades in)
       .skill__lines (SVG lines, draw outward via dashoffset)
       .skill__branch x8 (pop in at end of each line)
     .skill__path   — Employee -> Freelancer -> Service Provider ->
                      Sales Professional (reuses Paid flow pattern),
                      fades up last
   Multi-step reveal (all triggered by .skill__map.is-visible +
   .skill-reveal.is-visible, ordered purely through transition-delay):
     1. heading (0s) -> 2. core (~0.1s) -> 3. lines draw (~0.4s,
        staged by --i) -> 4. branches pop (~0.55s, staged) ->
      5. career path row (~1.7s)
   ============================================================ */
.skill {
  background-color: var(--clr-bg-subtle); /* #F8FAFC */
  padding-block: var(--space-11) var(--space-11);
  overflow: hidden;
}

/* --- Heading block (centered, generous spacing) --------------- */
.skill__head {
  text-align: center;
  max-width: 46rem;
  margin-inline: auto;
  margin-bottom: var(--space-10);
}

.skill__lead {
  font-size: var(--fs-xl);
  font-weight: var(--fw-medium);
  color: var(--clr-heading);
  margin-bottom: var(--space-2);
}

.skill__title {
  font-size: var(--fs-3xl);
  font-weight: var(--fw-extrabold);
  color: var(--clr-heading);
  line-height: var(--leading-tight);
}

/* --- Reveal pattern for heading + career path ---------------- */
.skill-reveal {
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity var(--dur-slower) var(--ease-out),
    transform var(--dur-slower) var(--ease-out);
}

.skill-reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.skill__head.skill-reveal {
  transition-delay: 0s;   /* heading fades up first */
}

/* --- Skill map (hub-and-spoke container) ---------------------- */
.skill__map {
  position: relative;                 /* anchors lines + branches */
  min-height: 30rem;                  /* room for the radial diagram */
  max-width: 46rem;
  margin-inline: auto;
}

/* --- Central SKILL anchor node -------------------------------- */
.skill__core {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 7.5rem;
  height: 7.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-full);
  background-color: var(--clr-brand);
  color: var(--clr-bg);
  font-size: var(--fs-lg);
  font-weight: var(--fw-extrabold);
  letter-spacing: 0.06em;
  box-shadow: 0 0 0 12px rgba(25, 58, 109, 0.07);
  z-index: 2;
  /* initial hidden: faded + slightly small */
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.8);
  transition:
    opacity var(--dur-base) var(--ease-out),
    transform var(--dur-base) var(--ease-spring);
}

.skill__map.is-visible .skill__core {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
  transition-delay: 0.1s;   /* step 2: core appears after heading */
}

/* --- Branching lines (SVG, drawn outward on reveal) ----------- */
.skill__lines {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  display: block;
  pointer-events: none;
}

/* Each line starts "woven away" (dashoffset = length) and draws
   in (dashoffset -> 0) once revealed. Length is set on the SVG by
   JS as --len so all symmetric spokes share one value. */
.skill__lines line {
  stroke: var(--clr-brand);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-dasharray: var(--len, 1000);
  stroke-dashoffset: var(--len, 1000);
  transition: stroke-dashoffset 0.5s var(--ease-out);
  transition-delay: calc(0.45s + var(--i) * 0.11s);  /* step 3 */
}

.skill__map.is-visible .skill__lines line {
  stroke-dashoffset: 0;
}

/* --- Mobile vertical trunk connector -------------------------- */
.skill__trunk {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 2px;
  background-color: var(--clr-border);
  border-radius: var(--radius-full);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 0.8s var(--ease-out);
  display: none;                 /* desktop: hidden (radial lines used) */
  z-index: 1;
}

.skill__map.is-visible .skill__trunk {
  transform: scaleY(1);
}

/* --- Each service branch label -------------------------------- */
.skill__branch {
  position: absolute;            /* desktop: positioned by JS */
  top: 50%;
  left: 50%;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  white-space: nowrap;
  z-index: 2;
  /* initial hidden: faded + slightly small */
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.6);
  transition:
    opacity var(--dur-base) var(--ease-out),
    transform var(--dur-base) var(--ease-spring);
  transition-delay: calc(0.55s + var(--i) * 0.13s); /* step 4 */
}

.skill__map.is-visible .skill__branch {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

.skill__branch-dot {
  flex: 0 0 auto;
  width: 7px;
  height: 7px;
  border-radius: var(--radius-full);
  background-color: var(--clr-brand);
}

.skill__branch-label {
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--clr-heading);
  line-height: var(--leading-snug);
}

/* --- Career path row (reuses Paid flow pattern) --------------- */
.skill__path {
  direction: ltr;                 /* English flow reads left-to-right */
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--space-3) var(--space-2);
  margin-top: var(--space-11);
}

.skill__path.skill-reveal {
  transition-delay: 1.7s;         /* step 5: appears after the map */
}

.skill__path-stage {
  text-align: center;
}

.skill__path-label {
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
  color: var(--clr-heading);
  white-space: nowrap;
}

/* Thin elegant arrow between stages */
.skill__path-arrow {
  flex: 0 0 auto;
  width: 1.5rem;
  height: 1.5rem;
  display: block;
  fill: none;
  stroke: var(--clr-text);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ============================================================
   WHO IS THIS FOR SECTION
   Audience segments as an ASYMMETRIC bento grid — deliberately NOT
   the uniform grid of the Curriculum section. A 4-column CSS Grid
   where cells vary in width (grid-column span) to create visual
   hierarchy:
     row 1 (prominent): 🎓 span 2 | 👨💼 span 1 | 💼 span 1
     row 2 (denser):    🌍 span 1 | 📈 span 1 | 🤝 span 2
     row 3 (denser):    🚀 span 1 | 💻 span 1 | 💰 span 2
   Flat, restrained cards (white / #F8FAFC tints, thin border, NO
   heavy shadows) with a subtle hover lift. The whole grid reveals
   as ONE cohesive group with a small stagger (js/main.js).
   ============================================================ */
.aud {
  background-color: var(--clr-bg); /* full white contrast */
  padding-block: var(--space-11) var(--space-10);
  overflow: hidden;
}

/* --- Heading (centered, large, bold) -------------------------- */
.aud__heading {
  font-size: var(--fs-4xl);
  font-weight: var(--fw-extrabold);
  color: var(--clr-heading);
  line-height: var(--leading-tight);
  text-align: center;
  max-width: 44rem;
  margin-inline: auto;
  margin-bottom: var(--space-10);
}

/* Inline Latin term inside the RTL heading */
.aud__lat {
  direction: ltr;
  unicode-bidi: isolate;
}

/* --- Bento grid (asymmetric spans) ---------------------------- */
.aud__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-5);
}

/* --- Card base ------------------------------------------------ */
.aud__card {
  grid-column: span 1;
  display: flex;
  flex-direction: column;
  background-color: var(--clr-bg);
  border: 1px solid var(--clr-border);  /* thin border, no heavy shadow */
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  transition:
    transform var(--dur-base) var(--ease-out),
    box-shadow var(--dur-base) var(--ease-out);
}

/* Subtle background tint for some cells (adds bento depth) */
.aud__card--tint {
  background-color: var(--clr-bg-subtle); /* #F8FAFC */
}

/* Prominent feature cell: spans 2 columns, largest */
.aud__card--feature,
.aud__card--wide {
  grid-column: span 2;
}

/* Feature cell: larger icon to anchor the hierarchy */
.aud__card--feature .aud__icon .aud__icon-svg {
  width: 36px;
  height: 36px;
}

.aud__card--feature .aud__title {
  font-size: var(--fs-2xl);
}

/* Hover: very subtle lift + soft shadow (flat -> slightly raised) */
.aud__card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}

/* --- Icon / SVG ------------------------------------------------ */
.aud__icon {
  color: var(--clr-brand);
  margin-bottom: var(--space-4);
}

.aud__icon .aud__icon-svg {
  display: block;
  width: 28px;
  height: 28px;
}

/* --- Title ---------------------------------------------------- */
.aud__title {
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
  color: var(--clr-heading);
  line-height: var(--leading-tight);
  margin-bottom: var(--space-2);
}

/* --- Description ---------------------------------------------- */
.aud__desc {
  font-size: var(--fs-base);
  color: var(--clr-text);
  line-height: var(--leading-snug);
}

/* --- Reveal pattern (heading + cards, subtle group stagger) --- */
.aud-reveal {
  opacity: 0;
  transform: translateY(18px);
  transition:
    opacity var(--dur-base) var(--ease-out),
    transform var(--dur-base) var(--ease-out);
}

.aud-reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* A single quick group "pop": each card waits a tiny --delay so the
   grid reads as one cohesive block, not a long one-by-one sequence. */
.aud__card.aud-reveal {
  transition-delay: calc(var(--delay, 0) * 40ms);
}

/* ============================================================
   WHAT YOU GET SECTION
   A unified "Program Overview" composition — NOT a checklist, NOT
   the bento grid of Who-Is-This-For, NOT the plain Curriculum grid.
   It reads as ONE connected hub-and-spoke:
     hub:   "SKILLOVA PROGRAM" brand-blue pill (the anchor)
     spokes: 4 labeled feature clusters in 4 columns below it,
             separated only by THIN vertical dividers (no heavy
             bordered boxes — it stays one connected overview)
             Training / Practice / Career / Opportunities
     each cluster: short bold title + clean text list with small
             brand-blue accent dots (no per-item icons/cards)
     footnote: small asterisk note beneath the composition
   Calm reveal (js/main.js): hub fades/scales first, then the 4
   clusters fade up in quick succession (light stagger).
   ============================================================ */
.get {
  background-color: var(--clr-bg-subtle); /* #F8FAFC */
  padding-block: var(--space-11) var(--space-10);
}

/* --- Heading (centered, large, bold) -------------------------- */
.get__heading {
  font-size: var(--fs-4xl);
  font-weight: var(--fw-extrabold);
  color: var(--clr-heading);
  line-height: var(--leading-tight);
  text-align: center;
  max-width: 44rem;
  margin-inline: auto;
}

/* --- Central "SKILLOVA PROGRAM" hub label -------------------- */
.get__hub-wrap {
  text-align: center;
  margin-top: var(--space-6);
  margin-bottom: var(--space-10);
}

.get__hub {
  display: inline-block;
  font-size: var(--fs-2xl);
  font-weight: var(--fw-extrabold);
  letter-spacing: 0.05em;
  color: var(--clr-bg);              /* white text on brand pill */
  background-color: var(--clr-brand); /* #193A6D brand-blue */
  padding: var(--space-2) var(--space-6);
  border-radius: var(--radius-full);
}

/* --- 4 feature clusters (one connected grid) ------------------ */
.get__clusters {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
}

.get__cluster {
  padding-inline: var(--space-7);
}

/* Thin vertical dividers between columns (not first child has a
   leading-edge divider); generous padding provides the separation.
   Stays an overview, not 4 separate boxes. */
.get__cluster:first-child {
  padding-inline-start: 0;
}

.get__cluster:last-child {
  padding-inline-end: 0;
}

.get__cluster:not(:first-child) {
  border-inline-start: 1px solid var(--clr-border);
}

/* --- Cluster title -------------------------------------------- */
.get__cluster-title {
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
  color: var(--clr-heading);
  line-height: var(--leading-tight);
  margin-bottom: var(--space-4);
}

/* --- Clean feature list (accent dots, no per-item icons/cards) - */
.get__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.get__list li {
  position: relative;
  padding-inline-start: var(--space-6);
  font-size: var(--fs-base);
  color: var(--clr-text);
  line-height: var(--leading-snug);
}

.get__list li:not(:last-child) {
  margin-bottom: var(--space-3);
}

/* Small brand-blue accent dot before each item */
.get__list li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: 0.6em;
  width: 0.4rem;
  height: 0.4rem;
  border-radius: var(--radius-full);
  background-color: var(--clr-brand);
  opacity: 0.75;
}

/* --- Footnote (small, secondary) ------------------------------ */
.get__footnote {
  text-align: center;
  font-size: var(--fs-sm);
  color: var(--clr-text);
  margin-top: var(--space-7);
}

/* Inline Latin terms inside RTL sentences */
.get__lat {
  direction: ltr;
  unicode-bidi: isolate;
}

/* --- Reveal pattern (calm, elegant) --------------------------- */
.reveal-wyg {
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity var(--dur-base) var(--ease-out),
    transform var(--dur-base) var(--ease-out);
  transition-delay: var(--wyg-delay, 0s);
}

.reveal-wyg.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* The hub label scales in (instead of a plain slide) to feel like
   the "anchor" the clusters attach to. */
.get__hub-wrap.reveal-wyg {
  transform: scale(0.86);
}

.get__hub-wrap.reveal-wyg.is-visible {
  transform: scale(1);
}

/* Subtle quick internal stagger for list items (fast, elegant, and
   calmer than Curriculum/Dashboard): each li waits the parent
   cluster's --wyg-delay plus a tiny per-item --wyg-item offset. */
.get__list li {
  opacity: 0;
  transform: translateY(6px);
  transition:
    opacity var(--dur-fast) var(--ease-out),
    transform var(--dur-fast) var(--ease-out);
  transition-delay: calc(var(--wyg-delay, 0s) + var(--wyg-item, 0s));
}

.reveal-wyg.is-visible .get__list li {
  opacity: 1;
  transform: translateY(0);
}

/* ============================================================
   WHY SKILLOVA SECTION
   The calmest, most premium-feeling part of the page — a PURE
   TYPOGRAPHY "Five Principles" composition (no cards, no grid of
   boxes, no bento, no radial diagram, no dashboard, no timeline,
   effectively no icons). Structure:
     heading      علاش Skillova؟  (centered)
     wordmark     SKILLOVA         oversized brand-blue type, the
                                   typographic anchor (NOT the pill
                                   used in What-You-Get)
     5 principles LEARN / IMPROVE / PRACTICE / BUILD EXPERIENCE /
                                   FIND OPPORTUNITIES — five equal
                                   typographic columns, each a large
                                   bold English word + a one-line
                                   Arabic description, separated only
                                   by a thin vertical divider
     closing      a large bold statement tying it all together,
                                   with a subtle scale-in
   White bg (--clr-bg) for full contrast over the #F8FAFC
   What-You-Get section above. Calm reveal (js/main.js): heading
   fades up -> wordmark scales in -> 5 principles in sequence ->
   closing statement last. Gentle --ease-out only (no bounce).
   ============================================================ */
.why {
  background-color: var(--clr-bg); /* full white contrast */
  padding-block: var(--space-11) var(--space-10);
}

/* --- Heading (centered, large, bold) -------------------------- */
.why__heading {
  font-size: var(--fs-4xl);
  font-weight: var(--fw-extrabold);
  color: var(--clr-heading);
  line-height: var(--leading-tight);
  text-align: center;
  max-width: 44rem;
  margin-inline: auto;
  margin-bottom: var(--space-8);
}

/* --- Central SKILLOVA wordmark (typographic anchor) ----------- */
.why__wordmark-wrap {
  text-align: center;
  margin-bottom: var(--space-10);
}

/* Pure oversized brand type — NOT a pill/button. No background
   fill; the weight+size alone make it the anchor. */
.why__wordmark {
  display: inline-block;
  font-size: var(--fs-6xl);
  font-weight: var(--fw-extrabold);
  letter-spacing: 0.08em;
  color: var(--clr-brand);
  line-height: 1;
}

/* --- Five principles (equal typographic columns) -------------- */
.why__principles {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0;
}

.why__principle {
  padding-inline: var(--space-6);
}

/* Thin vertical dividers between columns (same logic as
   .get__clusters) — connected composition, not separate boxes. */
.why__principle:first-child {
  padding-inline-start: 0;
}

.why__principle:last-child {
  padding-inline-end: 0;
}

.why__principle:not(:first-child) {
  border-inline-start: 1px solid var(--clr-border);
}

/* Large bold English principle name */
.why__name {
  display: block;
  font-size: var(--fs-xl);
  font-weight: var(--fw-extrabold);
  color: var(--clr-heading);
  line-height: var(--leading-tight);
  margin-bottom: var(--space-3);
}

/* One-line Arabic description beneath it */
.why__desc {
  font-size: var(--fs-base);
  color: var(--clr-text);
  line-height: var(--leading-snug);
}

/* Inline Latin terms inside RTL sentences */
.why__lat {
  direction: ltr;
  unicode-bidi: isolate;
}

/* --- Closing statement ---------------------------------------- */
/* Large and bold (role similar to .problem__close-big) */
.why__close {
  font-size: var(--fs-3xl);
  font-weight: var(--fw-extrabold);
  color: var(--clr-heading);
  line-height: var(--leading-snug);
  text-align: center;
  max-width: 44rem;
  margin-inline: auto;
  margin-top: var(--space-9);
}

/* --- Reveal pattern (calm, gentle --ease-out) ----------------- */
.w-reveal {
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity var(--dur-slow) var(--ease-out),
    transform var(--dur-slow) var(--ease-out);
  /* Timing driven by js/main.js --why-delay (heading -> wordmark ->
     principles in sequence -> closing) */
  transition-delay: var(--why-delay, 0s);
}

.w-reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* The wordmark scales in (typographic anchor for the principles) */
.why__wordmark-wrap.w-reveal {
  transform: scale(0.92);
}

.why__wordmark-wrap.w-reveal.is-visible {
  transform: scale(1);
}

/* Closing statement: slower + subtle scale-in (like
   .problem__close-big) for extra emphasis, revealed last. */
.why__close.w-reveal {
  transform: translateY(24px) scale(0.98);
  transition-duration: var(--dur-slower);
}

.why__close.w-reveal.is-visible {
  transform: translateY(0) scale(1);
}

/* ============================================================
   ABOUT SKILLOVA SECTION
   A deliberately human, calm "about the brand" split layout — a
   breather after the data-driven sections. Two columns on desktop:
   roughly 40% image / 60% text. In RTL the first grid item sits on
   the RIGHT, so the TEXT is column 1 (60%) and the portrait visual
   is column 2 (40%, visually LEFT) — same grid + logical-property
   approach as .hero__grid (which is 55/45) and .live__part.
   The visual is the real trainer photo in an editorial PORTRAIT
   frame (4/5, Hero's muted gradient + border + shadow treatment),
   surrounded by faint "UI system" chips (SALES/CLOSING/COACHING/
   PRACTICE) and a floating SKILLOVA ACADEMY badge overlapping the
   bottom edge. A soft blurred brand-blue halo (::before) breathes
   slowly behind it.
   Text column: eyebrow → Skillova heading → tagline → lead copy
   with inline skill tags → three stat rows (LEARN / PRACTICE /
   OPPORTUNITY, LTR Latin labels + Arabic line) → trainer-name
   placeholder footer.
   Animation strength is LOW (⭐⭐), one light stagger sequence:
   image slides/fades in first, then eyebrow, heading, tagline,
   lead block, then the three stats one after another — calm, no
   heavy per-line effect. Each step is an element with
   .about-reveal + its own --a-delay (CSS-driven), shown once via
   one IntersectionObserver (js/main.js). White bg (--clr-bg).
   ============================================================ */
.about {
  background-color: var(--clr-bg); /* full white contrast */
  padding-block: var(--space-11) var(--space-10);
  overflow: hidden;
}

/* --- Two-column split: 60% text / 40% visual ------------------ */
.about__grid {
  display: grid;
  grid-template-columns: 3fr 2fr; /* text(60%) right, visual(40%) left in RTL */
  gap: var(--space-9);
  align-items: center;
}

/* --- Text column (60%) ---------------------------------------- */
.about__text {
  max-width: 40rem;
}

/* Eyebrow label (reuses Hero's eyebrow convention) */
.about__eyebrow {
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--clr-brand);
  margin-bottom: var(--space-4);
}

/* Heading */
.about__heading {
  font-size: var(--fs-4xl);
  font-weight: var(--fw-extrabold);
  color: var(--clr-heading);
  line-height: var(--leading-tight);
  margin-bottom: var(--space-5);
}

/* Body paragraph */
.about__copy {
  font-size: var(--fs-md);
  color: var(--clr-text);
  line-height: var(--leading-loose);
}

/* Emphasized inline skill terms (brand-blue accent, like .hero__accent) */
.about__skills {
  font-size: var(--fs-md);
  line-height: var(--leading-loose);
  margin-top: var(--space-3);
}

.about__accent {
  color: var(--clr-brand);
  font-weight: var(--fw-bold);
}

.about__sep {
  color: var(--clr-brand);
  margin-inline: var(--space-2);
}

/* --- Two standalone statement lines --------------------------- */
/* Medium-large weight (stepped up from .live__copy, but calmer than
   .problem__close-big) */
.about__statement {
  font-size: var(--fs-xl);
  font-weight: var(--fw-semibold);
  color: var(--clr-text);
  line-height: var(--leading-snug);
  margin-top: var(--space-5);
}

/* The more-emphasized second statement (bold, brand-blue) */
.about__statement--strong {
  font-weight: var(--fw-extrabold);
  color: var(--clr-brand);
}

/* Short tagline — the one-line promise, slightly larger/semibold */
.about__tagline {
  font-size: var(--fs-xl);
  font-weight: var(--fw-semibold);
  color: var(--clr-heading);
  line-height: var(--leading-snug);
}

/* Lead copy block: intro + inline skill tags + two mission paras */
.about__lead {
  margin-top: var(--space-4);
}

.about__lead .about__copy + .about__copy,
.about__lead .about__copy + .about__skills {
  margin-top: var(--space-3);
}

.about__lead .about__skills + .about__copy {
  margin-top: var(--space-4);
}

/* --- Three stat-style rows (LEARN / PRACTICE / OPPORTUNITY) ---- */
.about__stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-4);
  margin-top: var(--space-6);
}

.about__stat {
  position: relative;
  padding-block: var(--space-4) var(--space-3);
  transition: transform var(--dur-base) var(--ease-out);
}

/* Thin brand underline that expands in on hover (bottom-border). */
.about__stat::after {
  content: "";
  position: absolute;
  bottom: 0;
  inset-inline: 0;
  height: 2px;
  background-color: var(--clr-brand);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform var(--dur-slow) var(--ease-in-out);
}

.about__stat:hover {
  transform: translateY(-3px);
}

.about__stat:hover::after {
  transform: scaleX(1);
}

/* Big, bold Latin label — direction:ltr like .skill__path/.why__wordmark */
.about__stat-label {
  display: block;
  direction: ltr; /* English stat names read left-to-right inside RTL */
  font-size: var(--fs-xl);
  font-weight: var(--fw-extrabold);
  letter-spacing: 0.05em;
  color: var(--clr-brand);
  line-height: var(--leading-tight);
}

/* Short Arabic line underneath the English stat name */
.about__stat-desc {
  margin-top: var(--space-2);
  font-size: var(--fs-base);
  color: var(--clr-text);
  line-height: var(--leading-snug);
}

/* --- Trainer credentials (editorial signature block) ---------- */
.about__creds {
  border-top: 1px solid var(--clr-border);
  padding-top: var(--space-5);
  margin-top: var(--space-6);
}

/* Name — bold heading style (same tone as the old placeholder) */
.about__creds-name {
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
  color: var(--clr-heading);
  line-height: var(--leading-tight);
  margin-bottom: var(--space-1);
}

/* Subtitle/role line — smaller, secondary */
.about__creds-role {
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--clr-text);
  margin-bottom: var(--space-4);
}

/* Bio paragraph — muted, secondary */
.about__creds-bio {
  font-size: var(--fs-sm);
  color: var(--clr-text);
  line-height: var(--leading-snug);
}

/* Checkmark bullet list (brand-blue ✓ in a soft badge) */
.about__creds-list {
  margin: var(--space-4) 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: var(--space-2);
}

.about__creds-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--clr-text);
  line-height: var(--leading-snug);
}

.about__creds-check {
  flex: 0 0 auto;
  width: 1.15rem;
  height: 1.15rem;
  border-radius: var(--radius-full);
  background-color: var(--clr-bg-subtle);
  border: 1px solid var(--clr-border);
  color: var(--clr-brand);
  font-size: 0.72rem;
  font-weight: var(--fw-bold);
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Divider between the bullets and the tag row */
.about__creds-divider {
  border: none;
  border-top: 1px solid var(--clr-border);
  margin: var(--space-5) 0;
}

/* --- Areas of expertise -------------------------------------- */
.about__creds-tags-title {
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--clr-heading);
  margin-bottom: var(--space-3);
}

/* Small chip/pill row (wraps on narrow screens) */
.about__creds-tags {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.about__creds-tag {
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  color: var(--clr-brand);
  background-color: var(--clr-bg-subtle);
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-full);
  padding: 0.3rem 0.9rem;
  white-space: nowrap;
}

/* Inline Latin terms inside RTL sentences */
.about__lat {
  direction: ltr;
  unicode-bidi: isolate;
}

/* --- Portrait photo (40%, visual) --------------------------------- */
.about__visual {
  position: relative;
  isolation: isolate; /* keep ::before glow inside this stacking context */
}

/* Full, tall portrait-style photo slot (4/5 aspect ratio) using
   Hero's soft muted gradient + border + shadow treatment. */
.about__portrait {
  position: relative;
  aspect-ratio: 4 / 5;
  border-radius: var(--radius-xl);
  background: linear-gradient(
    160deg,
    var(--clr-bg-subtle-2) 0%,
    var(--clr-bg-subtle) 50%,
    var(--clr-bg-subtle-2) 100%
  );
  border: 1px solid var(--clr-border);
  box-shadow: var(--shadow-md);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

/* Real trainer photo — fills the portrait slot, crop-to-frame.
   object-position: top keeps the head fully visible (crop from the
   bottom instead), since the photo is narrower than the 4/5 slot. */
.about__portrait-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
  /* subtle entrance settle: starts slightly zoomed, eases to 1 */
  transform: scale(1.055);
  transition: transform var(--dur-slower) var(--ease-out);
}

.about__visual.is-visible .about__portrait-img {
  transform: scale(1);
}

/* --- Inner wrapper: holds portrait + chips + badge, floats slowly --- */
.about__visual-inner {
  position: relative;
  will-change: transform;
}

/* Very slow, barely-noticeable float — starts only after the 0.8s
   entrance has settled (delay 1.1s), then loops forever. */
.about__visual.is-visible .about__visual-inner {
  animation: aboutFloat 7s var(--ease-in-out) infinite;
  animation-delay: 1.1s;
}

@keyframes aboutFloat {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-5px);
  }
}

/* --- Faint "UI system" chips around the frame -------------------- */
/* Low-opacity brand pills straddling the frame's edges/corners so
   they never cover the trainer's face (which sits upper-center). */
.about__chip {
  position: absolute;
  z-index: 2;
  padding: var(--space-1) var(--space-3);
  border: 1px solid rgba(25, 58, 109, 0.16);
  border-radius: var(--radius-full);
  background-color: rgba(25, 58, 109, 0.07);
  color: var(--clr-brand);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  letter-spacing: 0.12em;
  direction: ltr; /* English chip labels read left-to-right */
  white-space: nowrap;
}

.about__chip--tl { top: -0.8rem;    left: -0.8rem; }
.about__chip--tr { top: 1.5rem;     right: -0.7rem; }
.about__chip--bl { bottom: 4.5rem;  left: -0.9rem; }
.about__chip--br { bottom: -0.8rem; right: 1.2rem; }

/* --- Floating SKILLOVA ACADEMY badge (overlaps frame bottom) ----- */
.about__badge {
  position: absolute;
  bottom: -1.5rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  padding: var(--space-3) var(--space-5);
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-lg);
  background-color: var(--clr-bg);
  box-shadow: var(--shadow-md);
  text-align: center;
  white-space: nowrap;
}

.about__badge-title {
  display: block;
  font-size: var(--fs-xs);
  font-weight: var(--fw-extrabold);
  letter-spacing: 0.16em;
  color: var(--clr-brand);
}

.about__badge-sub {
  display: block;
  direction: ltr; /* Learn → Practice → Opportunity reads LTR */
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--clr-text);
  margin-top: var(--space-1);
}

/* Small centered label making the placeholder intent obvious —
   muted brand-blue, no icon. */
.about__portrait-label {
  font-size: var(--fs-md);
  font-weight: var(--fw-semibold);
  color: var(--clr-brand);
  opacity: 0.55;
  letter-spacing: 0.04em;
}

/* --- Reveal pattern (calm, LOW energy) ------------------------ */
/* Both columns share this hidden base; timing via --a-delay. */
.a-reveal {
  opacity: 0;
  transition:
    opacity var(--dur-slower) var(--ease-out),
    transform var(--dur-slower) var(--ease-out);
  transition-delay: var(--a-delay, 0s);
}

.a-reveal.is-visible {
  opacity: 1;
}

/* Visual: slow fade + slight scale/translate (deliberate, calm) */
.about__visual.a-reveal {
  transform: translateX(-20px) scale(0.96);
}

.about__visual.a-reveal.is-visible {
  transform: translateX(0) scale(1);
}

/* Text: gentle fade up as one block, shortly after the image */
.about__text.a-reveal {
  transform: translateY(20px);
}

.about__text.a-reveal.is-visible {
  transform: translateY(0);
}

/* --- Per-element stagger reveal (rebuilt text column) ----------- */
/* The visual column keeps its whole-block .a-reveal; each text
   child (eyebrow → heading → tagline → lead → stats → creds) is its
   own faded-up unit, revealed once the section enters viewport and
   sequenced purely by the --a-delay values mapped below. */
.about-reveal {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity var(--dur-slower) var(--ease-out),
    transform var(--dur-slower) var(--ease-out);
  transition-delay: var(--a-delay, 0s);
}

.about-reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Stagger timing (image = 0s on the .a-reveal visual above) */
.about__eyebrow.about-reveal { --a-delay: 100ms; }
.about__heading.about-reveal { --a-delay: 200ms; }
.about__tagline.about-reveal { --a-delay: 300ms; }
.about__lead.about-reveal   { --a-delay: 400ms; }
.about__stat.about-reveal:nth-child(1) { --a-delay: 550ms; }
.about__stat.about-reveal:nth-child(2) { --a-delay: 650ms; }
.about__stat.about-reveal:nth-child(3) { --a-delay: 750ms; }
.about__creds.about-reveal  { --a-delay: 900ms; }

/* --- Animated branded glow halo around the trainer portrait ------ */
.about__visual::before {
  content: "";
  position: absolute;
  inset: -1rem;
  z-index: -1;
  border-radius: var(--radius-xl);
  pointer-events: none;
  background: radial-gradient(
    55% 55% at 50% 50%,
    rgba(25, 58, 109, 0.28) 0%,
    rgba(25, 58, 109, 0) 70%
  );
  filter: blur(16px);
  opacity: 0.35;
  transform: scale(0.96);
  will-change: transform, opacity;
  animation: aboutGlowPulse 4.5s var(--ease-in-out) infinite;
}

@keyframes aboutGlowPulse {
  0%, 100% {
    opacity: 0.35;
    transform: scale(0.96);
  }
  50% {
    opacity: 0.8;
    transform: scale(1.04);
  }
}

/* Reduced motion: static, non-animated glow + fully revealed states */
@media (prefers-reduced-motion: reduce) {
  .about__visual::before {
    animation: none !important;
    opacity: 0.45;
    transform: scale(1);
  }

  .about__visual-inner,
  .about__portrait-img {
    animation: none !important;
    transform: none !important;
    transition: none !important;
  }

  .about-reveal,
  .about__visual.a-reveal {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* ============================================================
   TESTIMONIALS SECTION
   A calm, credible "students' words" section — deliberately few
   cards (no reviews wall), and NOT the uniform Curriculum grid nor
   the Audience bento grid. Desktop layout is an ASYMMETRIC 3-column
   row:  small | FEATURED (center anchor, bigger) | small.
   Only real testimonials live here, so every quote/name/photo is
   bracketed placeholder copy and there are NO star ratings — the
   words carry all the weight. Cards are flat/thin-bordered, no heavy
   shadows (the featured card gets a touch of --shadow-md).
   Reveal (.t-reveal, js/main.js): heading fades up, then the cards
   fade together with a small stagger (⭐⭐ light intensity).
   On mobile (≤900px) the row becomes a SIMPLE MANUAL carousel — one
   slide visible at a time, prev/next buttons + dots, basic swipe.
   Navigation is USER-TRIGGERED only (never auto-advancing).
   ============================================================ */
.testi {
  background-color: var(--clr-bg-subtle); /* #F8FAFC */
  padding-block: var(--space-11) var(--space-10);
  overflow: hidden;
}

/* --- Heading (centered) -------------------------------------- */
.testi__heading {
  font-size: var(--fs-4xl);
  font-weight: var(--fw-extrabold);
  color: var(--clr-heading);
  line-height: var(--leading-tight);
  text-align: center;
  max-width: 44rem;
  margin-inline: auto;
  margin-bottom: var(--space-10);
}

/* --- Asymmetric 3-column row: small | featured | small -------- */
.testi__grid {
  display: grid;
  grid-template-columns: 1fr 1.4fr 1fr;
  gap: var(--space-5);
  align-items: stretch;
}

/* --- Card base (flat, thin border, no heavy shadow) ---------- */
.testi__card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-lg);
  background-color: var(--clr-bg);
  padding: var(--space-6);
}

/* Side cards: more muted — no shadow, smaller type/avatar */
.testi__card--side {
  box-shadow: none;
}

/* Featured card: the visual anchor — more padding + a touch of
   shadow for extra emphasis */
.testi__card--featured {
  padding: var(--space-8);
  box-shadow: var(--shadow-md);
}

/* --- Placeholder avatar (muted circle, thin brand-blue border,
       like .live__coach-avatar) ------------------------------- */
.testi__avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background-color: var(--clr-bg-subtle-2);
  border: 2px solid var(--clr-brand);
  flex: 0 0 auto;
  margin-bottom: var(--space-5);
}

.testi__card--featured .testi__avatar {
  width: 72px;
  height: 72px;
}

/* --- Quote (minimal, quotation-mark-free typography) ---------- */
.testi__quote {
  font-size: var(--fs-base);
  color: var(--clr-text);
  line-height: var(--leading-snug);
  font-weight: var(--fw-medium);
}

.testi__card--featured .testi__quote {
  font-size: var(--fs-xl);
  color: var(--clr-heading);
}

/* --- Name line (bold, small, em dash, below the quote) -------- */
.testi__name {
  margin-top: var(--space-2);
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  color: var(--clr-heading);
}

/* --- Star rating (small, muted, understated) ------------------ */
/* A single small 5-star row per card, just above the name. Kept
   tiny and brand-blue (no bright gold cliché) so the student's words
   stay the main focus — stars are a quiet cue, not a dominant
   element. Sized proportionally with each card's scale. */
.testi__stars {
  font-size: var(--fs-sm);
  line-height: 1;
  color: var(--clr-brand);
  letter-spacing: 0.15em;
  margin-top: var(--space-4);
}

.testi__stars span {
  display: inline-block;
}

.testi__card--side .testi__stars {
  font-size: var(--fs-xs);
  letter-spacing: 0.1em;
  margin-top: var(--space-3);
}

/* --- Manual carousel controls (hidden on desktop) ------------- */
.testi__nav {
  display: none;
  align-items: center;
  justify-content: center;
  gap: var(--space-5);
  margin-top: var(--space-8);
}

.testi__btn {
  width: 2.75rem;   /* comfortable touch target */
  height: 2.75rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-full);
  background-color: var(--clr-bg);
  color: var(--clr-brand);
  cursor: pointer;
  transition:
    background-color var(--dur-base) var(--ease-out),
    transform var(--dur-base) var(--ease-out);
}

.testi__btn:hover {
  background-color: var(--clr-bg-subtle-2);
  transform: translateY(-2px);
}

.testi__btn svg {
  width: 1.25rem;
  height: 1.25rem;
  display: block;
}

/* Dot indicators */
.testi__dots {
  display: flex;
  gap: var(--space-2);
}

.testi__dot {
  width: 10px;
  height: 10px;
  padding: 0;
  border-radius: var(--radius-full);
  border: 1px solid var(--clr-border);
  background-color: var(--clr-bg-subtle-2);
  cursor: pointer;
  transition:
    background-color var(--dur-base) var(--ease-out),
    transform var(--dur-base) var(--ease-out);
}

.testi__dot.testi__dot--active,
.testi__dot:hover {
  background-color: var(--clr-brand);
  border-color: var(--clr-brand);
  transform: scale(1.15);
}

/* --- Reveal pattern (light, calm) ----------------------------- */
.t-reveal {
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity var(--dur-slow) var(--ease-out),
    transform var(--dur-slow) var(--ease-out);
  /* heading 0 -> featured -> sides, via --t-delay set in js/main.js */
  transition-delay: var(--t-delay, 0s);
}

.t-reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Mobile-only: a quick crossfade/slide when switching slides
   (short duration, --ease-out, no bounce). */
@keyframes testiFade {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ============================================================
   OFFER SECTION
   The main conversion moment. One of the only places on the site
   allowed to use --clr-brand as a FULL section background. Centered
   on that blue field floats a WHITE offer panel — rounded, generous
   padding, --shadow-lg, max-width ~40rem — so it reads as a distinct
   card floating on the blue, not full-bleed white.
   Inside (in order): a white heading above the panel, a small
   light-tinted SKILLOVA PROGRAM label pill, a genuinely-SHORT
   feature list (accent-dot pattern, no icons), the price (XXXX DA
   literal placeholder), a muted optional strikethrough old-price
   placeholder, a large brand-blue CTA (.btn--hero treatment), and a
   muted bracketed scarcity note.
   Animation LOW (⭐⭐): the panel fades/scales in once as a whole;
   CTA hover reuses the existing .btn--hero / .btn--primary treatment.
   ============================================================ */
.offer {
  background-color: var(--clr-brand); /* #193A6D — full blue section */
  padding-block: var(--space-11) var(--space-10);
}

/* --- Heading (white text, above the panel) ------------------- */
.offer__heading {
  font-size: var(--fs-3xl);
  font-weight: var(--fw-extrabold);
  color: #fff; /* white on the blue field */
  line-height: var(--leading-tight);
  text-align: center;
  max-width: 44rem;
  margin-inline: auto;
  margin-bottom: var(--space-9);
}

/* --- White floating panel ------------------------------------ */
.offer__panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: var(--clr-bg); /* white card on blue */
  border-radius: var(--radius-xl);
  padding: var(--space-9) var(--space-8);
  box-shadow: var(--shadow-lg);
  max-width: 40rem;
  margin-inline: auto;
  text-align: center;
}

/* --- Program label (small, light-tinted pill) ----------------- */
.offer__label {
  display: inline-block;
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  letter-spacing: 0.05em;
  color: var(--clr-brand);
  background-color: var(--clr-bg-subtle); /* light tint on white panel */
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-full);
  padding: var(--space-1) var(--space-4);
  margin-bottom: var(--space-6);
}

/* --- Short conversion-focused list (accent dots, no icons) ---- */
.offer__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.offer__list li {
  position: relative;
  padding-inline-start: var(--space-6);
  font-size: var(--fs-base);
  color: var(--clr-heading);
  line-height: var(--leading-snug);
  text-align: start;
}

.offer__list li:not(:last-child) {
  margin-bottom: var(--space-3);
}

/* Small brand-blue accent dot (reuse .get__list li::before pattern) */
.offer__list li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: 0.6em;
  width: 0.4rem;
  height: 0.4rem;
  border-radius: var(--radius-full);
  background-color: var(--clr-brand);
  opacity: 0.75;
}

/* --- Pricing ------------------------------------------------ */
.offer__pricing {
  margin-top: var(--space-7);
}

.offer__price {
  font-size: var(--fs-5xl);
  font-weight: var(--fw-extrabold);
  color: var(--clr-brand);
  line-height: 1;
}

/* --- Primary CTA (large brand-blue button) -------------------- */
.offer__cta {
  margin-top: var(--space-7);
}

/* CTA micro-interaction on hover reuses .btn--hero:hover
   (lift/scale/shadow/filter) — no need for anything more elaborate. */

/* --- Muted scarcity / context note --------------------------- */
.offer__note {
  font-size: var(--fs-sm);
  color: var(--clr-text);
  line-height: var(--leading-snug);
  max-width: 30rem;
  margin-inline: auto;
  margin-top: var(--space-5);
}

/* --- Reveal pattern (LOW energy: one whole-panel entrance) ---- */
.o-reveal {
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity var(--dur-slow) var(--ease-out),
    transform var(--dur-slow) var(--ease-out);
  transition-delay: var(--offer-delay, 0s);
}

.o-reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* The panel scales in as well, for a soft "rise" off the blue. */
.offer__panel.o-reveal {
  transform: translateY(20px) scale(0.97);
}

.offer__panel.o-reveal.is-visible {
  transform: translateY(0) scale(1);
}

/* ============================================================
   FAQ SECTION
   A clean, low-key counterpoint after the high-intensity Offer
   panel. Returns to simplicity: NO cards here — each question is a
   plain typographic row separated only by a border-bottom, no boxed
   backgrounds / shadows / rounded containers. Two columns on
   desktop (~35% / 65%):
     left  (visually RIGHT in RTL): section heading + short intro
     right (visually LEFT in RTL) : the accordion of FAQ rows
   Accordion is keyboard- and screen-reader-friendly: a <button>
   trigger with aria-expanded / aria-controls, and the answer in a
   region (aria-hidden when closed). The answer height animates
   smoothly from 0 -> auto via the grid-template-rows 0fr/1fr trick
   (--dur-slow, --ease-out) — no abrupt show/hide. A small CSS-drawn
   plus indicator rotates 45° into an "x" when open.
   Minimal animation (⭐): one gentle fade-up of the whole section on
   scroll into view (IntersectionObserver + .is-visible). The accordion
   animates independently of the reveal. White bg (--clr-bg).
   ============================================================ */
.faq {
  background-color: var(--clr-bg); /* full white contrast */
  padding-block: var(--space-11) var(--space-10);
}

/* --- Two-column split: intro (right) / accordion (left) ------ */
.faq__grid {
  display: grid;
  grid-template-columns: 35fr 65fr;
  gap: var(--space-9);
  align-items: start;
}

/* --- Intro column -------------------------------------------- */
.faq__heading {
  font-size: var(--fs-4xl);
  font-weight: var(--fw-extrabold);
  color: var(--clr-heading);
  line-height: var(--leading-tight);
  margin-bottom: var(--space-4);
}

.faq__lead {
  font-size: var(--fs-base);
  color: var(--clr-text);
  line-height: var(--leading-snug);
  max-width: 22rem;
}

/* --- Accordion rows ------------------------------------------ */
.faq__list {
  width: 100%;
  border-top: 1px solid var(--clr-border);
}

/* Each row separated by a bottom border — no cards, no shadows. */
.faq__item:not(:last-child) {
  border-bottom: 1px solid var(--clr-border);
}

.faq__item:last-child {
  border-bottom: 1px solid var(--clr-border);
}

.faq__q {
  margin: 0;
}

/* Question trigger (full-row button). Question text on one side,
   the toggle indicator on the other (RTL: far end = left). */
.faq__trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  padding-block: var(--space-5);
  padding-inline: 0;
  text-align: start;
  color: var(--clr-heading);
  font-family: var(--font-primary);
  font-size: var(--fs-md);
  font-weight: var(--fw-bold);
  line-height: var(--leading-snug);
  cursor: pointer;
  transition: color var(--dur-base) var(--ease-out);
}

.faq__trigger:hover {
  color: var(--clr-brand);
}

/* --- Toggle indicator: CSS-drawn plus that rotates to "x" ----- */
.faq__icon {
  position: relative;
  flex: 0 0 auto;
  width: 1rem;
  height: 1rem;
  color: var(--clr-brand);
  transition: transform var(--dur-base) var(--ease-out);
}

.faq__icon::before,
.faq__icon::after {
  content: "";
  position: absolute;
  top: 50%;
  inset-inline-start: 50%;
  background-color: currentColor;
  transform: translate(-50%, -50%);
}

.faq__icon::before {
  width: 100%;
  height: 2px;
}

.faq__icon::after {
  width: 2px;
  height: 100%;
}

/* Rotating the symmetric plus by 45° turns it into an "x". */
.faq__item.is-open .faq__icon {
  transform: rotate(45deg);
}

/* --- Animated answer (grid-template-rows 0fr -> 1fr) ---------- */
.faq__a {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--dur-slow) var(--ease-out);
}

.faq__a-inner {
  overflow: hidden;
  min-height: 0;
  color: var(--clr-text);
  font-size: var(--fs-base);
  line-height: var(--leading-normal);
  padding-top: var(--space-2);
  padding-bottom: var(--space-5);
  padding-inline-end: var(--space-3);
}

.faq__item.is-open .faq__a {
  grid-template-rows: 1fr;
}

/* --- Reveal pattern (minimal, ⭐) ----------------------------- */
.faq-reveal {
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity var(--dur-slow) var(--ease-out),
    transform var(--dur-slow) var(--ease-out);
  /* heading/intro (0) then accordion (0.1s), via --faq-delay */
  transition-delay: var(--faq-delay, 0s);
}

.faq-reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ============================================================
   FINAL CTA SECTION
   The page's emotional send-off before the footer. Calm, centered,
   purely typographic — explicitly NOT a repeat of the Offer section
   (no blue bg, no price panel, no feature list). A soft
   --clr-bg-subtle band separates it from the white FAQ section above
   for a cleaner transition.

   Layout:
     - big closing statement (extrabold, page-h1-like scale)
     - a tight centered stack of short English lines (medium weight)
     - the "🚀 جاهز تبدأ؟" line + primary CTA grouped together
     - a small muted Latin tagline

   Animation (moderate, ⭐⭐⭐): every part is a .finalcta-reveal; a
   single IntersectionObserver triggers the whole group, and CSS
   transition-delay (data-delay × 90ms, set via JS --delay) orders the
   stagger: statement(0) → lines(1..8) → kick+CTA(9) → tagline(10).
   CTA hover reuses the existing .btn--hero micro-interaction.
   ============================================================ */
.finalcta {
  background-color: var(--clr-bg-subtle);
  padding-block: var(--space-11) var(--space-10);
}

.finalcta__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

/* --- 1. Large closing statement ------------------------------ */
.finalcta__statement {
  margin: 0 0 var(--space-5);
  max-width: 34rem;
  font-size: var(--fs-5xl);
  font-weight: var(--fw-extrabold);
  color: var(--clr-heading);
  line-height: var(--leading-tight);
}

/* --- 2. Short lines stack (single centered column) ----------- */
.finalcta__lines {
  margin: 0 0 var(--space-6);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  /* English phrasing — force LTR so each line + period reads naturally. */
  direction: ltr;
}

.finalcta__line {
  font-size: var(--fs-lg);
  font-weight: var(--fw-medium);
  color: var(--clr-heading);
}

/* --- 3. Punchy kick + CTA grouped ---------------------------- */
.finalcta__act {
  margin-bottom: var(--space-6);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-5);
}

.finalcta__kick {
  margin: 0;
  font-size: var(--fs-2xl);
  font-weight: var(--fw-bold);
  color: var(--clr-heading);
}

/* --- 4. Muted Latin tagline ---------------------------------- */
.finalcta__tagline {
  margin: 0;
  font-size: var(--fs-base);
  color: var(--clr-text);
  /* Latin text — keep LTR ordering for the em-dash + periods. */
  direction: ltr;
}

/* --- Reveal + stagger ---------------------------------------- */
.finalcta-reveal {
  opacity: 0;
  transform: translateY(18px);
  transition:
    opacity var(--dur-base) var(--ease-out),
    transform var(--dur-base) var(--ease-out);
  /* Order the sequence: --delay (set by JS from data-delay) × 90ms. */
  transition-delay: calc(var(--delay, 0) * 90ms);
}

.finalcta-reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ============================================================
   FOOTER
   A clean, compact, low-key footer (not a marketing section).
   Deep dark-navy background (--clr-footer-bg) — noticeably darker
   than the Offer section's brand blue, so it reads as "footer
   dark," not as another blue CTA block. Static (no reveal).

   Desktop: logo + tagline on the visual-right (RTL), nav links
   toward the visual-left; a thin light divider; then a centered
   muted copyright line (year filled dynamically by js/main.js).
   ============================================================ */
.site-footer {
  background-color: var(--clr-footer-bg);
  color: #fff;
  padding-block: var(--space-8) var(--space-9);
}

/* --- Top row: brand (right) + nav links (left) ---------------- */
.site-footer__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
  flex-wrap: wrap;
}

/* --- Brand (logotype + tagline) ------------------------------- */
.site-footer__brand {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

/* Logotype echoes the navbar's SKILL<em>OVA</em>, recolored for the
   dark background: white text, the em a slightly muted white tone
   (mirroring how .navbar__logo distinguishes its em). */
.site-footer__logo {
  font-family: var(--font-primary);
  font-size: var(--fs-lg);
  font-weight: var(--fw-extrabold);
  letter-spacing: 0.04em;
  line-height: 1;
  color: #fff;
  text-decoration: none;
}

.site-footer__logo em {
  font-style: normal;
  color: rgba(255, 255, 255, 0.72);
}

/* Muted light tagline beneath the logotype. */
.site-footer__tagline {
  margin: 0;
  font-size: var(--fs-sm);
  color: rgba(255, 255, 255, 0.65);
  /* Latin text — keep LTR ordering for the em-dash + periods. */
  direction: ltr;
}

/* --- Nav links ------------------------------------------------- */
.site-footer__links {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-6);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Understated links: muted light by default, brightening to white on
   hover; no underline by default (a subtle white underline appears on
   hover, echoing .navbar__link's hover philosophy, dark-adapted). */
.site-footer__link {
  position: relative;
  color: rgba(255, 255, 255, 0.72);
  font-size: var(--fs-base);
  font-weight: var(--fw-medium);
  text-decoration: none;
  padding-block: var(--space-2);
  transition: color var(--dur-base) var(--ease-out);
}

.site-footer__link::after {
  content: '';
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  height: 2px;
  background-color: rgba(255, 255, 255, 0.85);
  border-radius: var(--radius-full);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform var(--dur-base) var(--ease-out);
}

.site-footer__link:hover {
  color: #fff;
}

.site-footer__link:hover::after {
  transform: scaleX(1);
}

/* --- Divider ------------------------------------------------ */
.site-footer__divider {
  height: 1px;
  background-color: rgba(255, 255, 255, 0.12);
  border: 0;
  margin-block: var(--space-6);
}

/* --- Copyright --------------------------------------------- */
.site-footer__copyright {
  margin: 0;
  font-size: var(--fs-sm);
  color: rgba(255, 255, 255, 0.6);
  text-align: center;
}

/* ============================================================
   6. RESPONSIVE
   ============================================================ */
@media (max-width: 56.25rem) { /* 900px */
  /* Collapse center links into hamburger menu */
  .navbar__nav {
    display: none;
  }

  .navbar__toggle {
    display: inline-flex;
  }

  .navbar__cta {
    display: none; /* CTA moves into the mobile drawer */
  }

  /* Mobile three-zone rail: hamburger | centered logo | blank spacer.
     Grid 1fr/auto/1fr keeps the middle (logo) track dead-center while
     the two outer 1fr tracks are equal-width — the empty right track
     acts as an invisible spacer balancing the 40px toggle on the left
     (in RTL the toggle-column sits visually LTR-left). */
  .navbar__inner {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
  }

  .navbar__logo {
    grid-column: 2;
    justify-self: center;
    /* one-time entrance: fade + tiny drop + settle to scale 1 */
    animation: navLogoMobile var(--dur-slower) var(--ease-out) forwards;
  }

  .navbar__actions {
    grid-column: 3;
    justify-self: end;
  }

  /* Mobile drawer: full-screen overlay (RTL-correct) */
  .navbar__mobile {
    position: fixed;
    inset-block-start: var(--navbar-height);
    inset-inline: 0;
    background-color: var(--clr-bg);
    border-top: 1px solid var(--clr-border);
    box-shadow: var(--shadow-lg);
    padding: var(--space-6) var(--space-5) var(--space-8);
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
    /* slide-down entrance via transform */
    animation: mobileDrawer var(--dur-slow) var(--ease-out) forwards;
    overflow-y: auto;
    max-height: calc(100vh - var(--navbar-height));
  }

  /* The drawer is shown/hidden via the `hidden` attribute (set by JS
     in setMobileMenu). Because the rule above sets display:flex, it
     would otherwise override the UA stylesheet's
     [hidden] { display: none } — leaving the drawer stuck open (and
     the page scroll-locked) on mobile, since no dismiss path could
     actually hide it. This slightly higher-specificity rule makes
     `hidden` win again so every close path (re-tap the toggle, tap a
     link, tap outside the drawer, or press Escape) reliably hides it
     and restores page scrolling. */
  .navbar__mobile[hidden] {
    display: none;
  }

  .navbar__mobile-links {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
  }

  .navbar__mobile-link {
    display: block;
    padding: var(--space-4);
    border-radius: var(--radius-md);
    color: var(--clr-heading);
    font-size: var(--fs-lg);
    font-weight: var(--fw-semibold);
    transition:
      background-color var(--dur-base) var(--ease-out),
      color var(--dur-base) var(--ease-out);
  }

  .navbar__mobile-link:hover {
    background-color: var(--clr-bg-subtle);
    color: var(--clr-brand);
  }

  .navbar__mobile-cta {
    width: 100%;
  }
}

/* Mobile logo entrance: fade-in + tiny slide-down + soft scale-settle.
   Independent of the desktop navLogo slide, scoped to ≤900px above,
   and fires once on page load (CSS-only, no scroll re-trigger). */
@keyframes navLogoMobile {
  from {
    opacity: 0;
    transform: translateY(-6px) scale(0.96);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Reduced motion: logo shows instantly in its final static state —
   opacity 1, no transform — regardless of the entrance animation. */
@media (prefers-reduced-motion: reduce) {
  .navbar__logo {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

@keyframes mobileDrawer {
  from {
    opacity: 0;
    transform: translateY(-12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Slightly smaller padding on small phones */
@media (max-width: 30rem) { /* 480px */
  .navbar__logo {
    font-size: var(--fs-md);
  }
}

/* ============================================================
   HERO — RESPONSIVE
   ============================================================ */
/* Tablet: tighten gap & shrink headline */
@media (max-width: 62rem) { /* 992px */
  .hero__grid {
    gap: var(--space-6);
  }

  .hero__title {
    font-size: var(--fs-3xl);
  }
}

/* Tablet/mobile: stack vertically, text first then visual */
@media (max-width: 56.25rem) { /* 900px */
  .hero {
    padding-top: var(--space-8);
    padding-bottom: var(--space-8);
  }

  .hero__grid {
    grid-template-columns: 1fr;
    /* Vertical rhythm between the stacked rows comes from explicit
       margins on each reordered row below (gap is 0 so the child
       margins remain the single source of spacing). */
    gap: 0;
  }

  /* Collapse the text wrapper into the grid so its lines become
     direct grid items — this lets CSS `order` interleave the video
     composition between the description and the CTA without moving
     any HTML. */
  .hero__content {
    display: contents;
    max-width: none;
    /* the unit fade-up is re-applied to the now-separate text rows */
    animation: none;
  }

  /* Keep the "text column fades up as a unit" effect: every text row
     gets the same fade-up keyframe + delay, so the group still appears
     together exactly like the old single-box fade. */
  .hero__content .hero__eyebrow,
  .hero__content .hero__title,
  .hero__content .hero__desc,
  .hero__content .hero__actions,
  .hero__content .hero__tagline {
    animation: heroFadeUp var(--dur-slow) var(--ease-out) both;
    animation-delay: calc(var(--nav-entrance-delay) + 5 * 110ms + 120ms);
  }

  /* Mobile reading order: heading -> desc -> video visual -> CTA -> tags */
  .hero__eyebrow { order: 1; }
  .hero__title   { order: 2; }
  .hero__desc    { order: 3; }
  .hero__visual  { order: 4; }
  .hero__actions { order: 5; }
  .hero__tagline { order: 6; }

  /* Rhythm between the reordered rows (grid-item margins never
     collapse, so they define the spacing explicitly): tight around
     the heading block, extra air around the video. */
  .hero__desc   { margin-bottom: var(--space-7); }
  .hero__visual { margin-bottom: var(--space-7); }

  /* Re-center visual */
  .hero__visual {
    margin-top: 0;
    max-width: 34rem;
    width: 100%;
    margin-inline: auto;
  }
}

/* ============================================================
   HERO — DESKTOP STACKED LAYOUT (min-width: 900px)
   ------------------------------------------------------------
   On desktop only, switch from the two-column side-by-side hero to a
   single-column stacked layout: eyebrow+headline+description on top
   (centered, full width), then the large 16:9 video below, then the
   CTA + tagline centered beneath. The mobile stacked layout
   (max-width: 56.25rem) is left completely untouched.
   ============================================================ */
@media (min-width: 56.25rem) {
  .hero__grid {
    grid-template-columns: 1fr;
    gap: var(--space-8);
  }

  /* Collapse the text wrapper so its rows become direct grid items,
     letting CSS `order` interleave the video between the description
     and the CTA without moving any HTML (same technique as mobile). */
  .hero__content {
    display: contents;
    max-width: none;
  }

  /* Reading order: eyebrow+headline+desc -> video -> CTA -> tagline */
  .hero__eyebrow { order: 1; }
  .hero__title   { order: 2; }
  .hero__desc    { order: 3; }
  .hero__visual  { order: 4; }
  .hero__actions { order: 5; }
  .hero__tagline { order: 6; }

  /* Preserve the "text fades up as a unit" entrance on the now-separate
     rows (identical to the mobile approach). */
  .hero__content .hero__eyebrow,
  .hero__content .hero__title,
  .hero__content .hero__desc,
  .hero__content .hero__actions,
  .hero__content .hero__tagline {
    animation: heroFadeUp var(--dur-slow) var(--ease-out) both;
    animation-delay: calc(var(--nav-entrance-delay) + 5 * 110ms + 120ms);
  }

  /* Top text: centered, comfortably wide */
  .hero__eyebrow,
  .hero__title,
  .hero__desc {
    text-align: center;
    width: 100%;
    max-width: 48rem;
    margin-inline: auto;
  }

  /* Tighten the headline->description and description->video vertical
     spacing (~45% closer) so the text and video feel visually connected.
     The uniform grid gap is compensated with negative bottom margins
     (project idiom, cf. .hero__visual), so no other desktop gap changes. */
  .hero__title {
    margin-bottom: calc(var(--space-2) * -1); /* gap to desc = 40px */
  }

  .hero__desc {
    margin-bottom: calc(var(--space-1) * -1); /* gap to video = 44px */
  }

  /* Video: large & centered, keeps its 16:9 ratio and rounded frame */
  .hero__visual {
    margin-top: 0;
    width: 100%;
    max-width: 64rem;
    margin-inline: auto;
  }

  /* CTA + tagline: centered below the video */
  .hero__actions,
  .hero__tagline {
    text-align: center;
  }

  /* Enlarge the hero CTA on desktop (~25% bigger) so it reads as the
     primary action beneath the video. The shimmer / attention-pulse
     animations are layered via ::before and scale with the button, so
     they keep working at the new size. */
  .btn--hero {
    font-size: 1.375rem;                              /* 22px (vs 18px) */
    padding: 1.25rem 2.5rem;                          /* 20/40px (vs 16/32) */
    border-radius: calc(var(--radius-lg) * 1.25);     /* 20px (vs 16px) */
  }

  /* Pull the trust line close beneath the CTA so it reads as directly
     associated with the button. Compensates the uniform grid gap with
     a negative bottom margin (project idiom), landing on ~ --space-3
     instead of the previous ~80px. */
  .hero__actions {
    margin-bottom: calc(var(--space-3) * -3);         /* gap to tagline = 12px */
  }
}

/* Small phones: extra-tight type */
@media (max-width: 30rem) { /* 480px */
  .hero {
    padding-top: var(--space-6);
    padding-bottom: var(--space-6);
  }

  .hero__title {
    font-size: var(--fs-2xl);
  }

  .hero__desc {
    font-size: var(--fs-base);
  }

  .btn--hero {
    width: 100%;
    padding: 0.9rem 1.25rem;
  }

  /* Mute button: slightly smaller on compact phones, still tappable */
  .hero__media-mute {
    width: 52px;
    height: 52px;
  }

  .hero__mute-icon {
    width: 26px;
    height: 26px;
  }

  /* Mobile only: hide the native WebKit video time readouts (current time
     and time-remaining, e.g. "00:06" / "-04:31") beside the scrubber in the
     native controls bar, while keeping play/pause, skip, scrubber and mute
     visible and functional. Scoped to the ≤900px window — desktop (above
     900px) keeps the readout. This pseudo-element rule works on Android;
     iOS gets its own best-effort, .is-ios-scoped rule in the base hero
     styles (iOS's modern controls no longer honor these selectors). */
  .hero__media-video::-webkit-media-controls-current-time-display,
  .hero__media-video::-webkit-media-controls-time-remaining-display {
    display: none !important;
  }

  /* Proof strip: tighter marquee spacing on narrow widths */
  .proof__list {
    gap: 0 var(--space-9);
    padding-inline-start: var(--space-9);
  }
}

/* ============================================================
   PROBLEM — RESPONSIVE
   ============================================================ */
/* Tablet: shrink headline sizes, reduce column gap */
@media (max-width: 62rem) { /* 992px */
  .problem__heading {
    font-size: var(--fs-2xl);
  }

  .problem__composition {
    gap: var(--space-6);
  }

  .problem__big {
    font-size: var(--fs-4xl);
  }

  .problem__close-big {
    font-size: var(--fs-3xl);
  }
}

/* Mobile: stack — big statement above the numbered list */
@media (max-width: 56.25rem) { /* 900px */
  .problem {
    padding-block: var(--space-9) var(--space-8);
  }

  .problem__composition {
    grid-template-columns: 1fr;
    gap: var(--space-7);
  }

  /* no longer sticky when stacked */
  .problem__statement {
    position: static;
  }

  .problem__big {
    max-width: none;
  }

  .problem__item {
    gap: var(--space-4);
    padding-block: var(--space-5);
  }
}

/* Small phones: extra-tight editorial type */
@media (max-width: 30rem) { /* 480px */
  .problem {
    padding-block: var(--space-8) var(--space-7);
  }

  .problem__heading {
    font-size: var(--fs-2xl);
    margin-bottom: var(--space-7);
  }

  .problem__big {
    font-size: var(--fs-3xl);
  }

  .problem__item p {
    font-size: var(--fs-lg);
  }

  .problem__closing {
    margin-top: var(--space-9);
  }

  .problem__close-big {
    font-size: var(--fs-2xl);
  }
}

/* ============================================================
   SKILLOVA METHOD — RESPONSIVE
   ============================================================ */
/* Tablet: slightly tighter, shrink heading */
@media (max-width: 62rem) { /* 992px */
  .method__heading {
    font-size: var(--fs-3xl);
  }
}

/* Mobile/tablet: switch to VERTICAL flow (line down the start side) */
@media (max-width: 56.25rem) { /* 900px */
  .method {
    padding-block: var(--space-9) var(--space-8);
  }

  /* Rebuild the flow as a vertical stack */
  .method__flow {
    display: flex;
    flex-direction: column;
    margin-top: var(--space-9);
    padding-top: 0;
    padding-inline-start: 0;
    position: relative;
    gap: var(--space-7);
  }

  /* Vertical connecting line down the start (left) side */
  .method__line {
    top: 0;
    bottom: 0;
    inset-inline-start: 0;
    width: 3px;
    height: auto;
    inset-inline-end: auto;
  }

  /* Fill grows downward instead of sideways */
  .method__line-fill {
    top: 0;
    bottom: auto;
    inset-inline-start: 0;
    height: 0%;
    width: 100%;
    /* JS toggles height for vertical mode */
  }

  /* Stage becomes a horizontal row (text right of the rail) */
  .method__stage {
    position: relative;
    text-align: start;
    padding-inline: 0;
    /* rail-to-text gap; marker sits in this zone, centered on rail */
    padding-inline-start: var(--space-8);
  }

  /* Marker on the rail, vertically centered with the stage.
     Horizontal centering: the 3px rail's center sits 1.5px from the
     flow start edge; the 16px marker needs its own center there, so
     its inline-start edge is placed at (1.5px - 8px) = -6.5px. */
  .method__marker {
    inset-inline-start: -6.5px;
    top: var(--space-4); /* roughly first line of text */
    transform: translateY(-50%);
  }

  /* Pulse in rail mode: travel-axis is top (set by JS); the cross-axis
     centers on the 3px rail (its center sits 1.5px from the flow start
     edge, so a 12px pulse's start edge goes at -4.5px, mirroring the
     marker's -6.5px for a 16px dot). margin-block-start stays -6px to
     center the dot on the vertically-traveling point. */
  .method__pulse {
    inset-inline-start: -4.5px;
    margin-inline-start: 0;
  }

  /* Active marker — MOBILE override. The base active rule flips the
     transform to the desktop form translate(-50%,-50%) scale(1.18),
     which would REINTRODUCE a physical translateX(-50%) and shove the
     dot ~8px sideways off the rail (mobile centers via inset-inline,
     not translateX). Keep the rail's translateY(-50%) centering and
     only scale + glow, so the active dot stays exactly on the line. */
  .method__stage[data-active='true'] .method__marker {
    transform: translateY(-50%) scale(1.18);
    box-shadow: 0 0 12px rgba(25, 58, 109, 0.45);
  }

  .method__label {
    margin-top: 0;
  }

  .method__desc {
    margin-top: var(--space-2);
  }
}

/* Small phones: extra-tight */
@media (max-width: 30rem) { /* 480px */
  .method {
    padding-block: var(--space-8) var(--space-7);
  }

  .method__heading {
    font-size: var(--fs-2xl);
  }

  .method__support {
    font-size: var(--fs-base);
  }

  .method__subline {
    font-size: var(--fs-xs);
    letter-spacing: 0.1em;
  }
}

/* ============================================================
   CURRICULUM — RESPONSIVE
   ============================================================ */
/* Tablet: keep 2 columns (fits comfortably), shrink heading */
@media (max-width: 56.25rem) { /* 900px */
  .curriculum {
    padding-block: var(--space-9) var(--space-8);
  }

  .curriculum__heading {
    font-size: var(--fs-3xl);
    margin-bottom: var(--space-8);
  }

  .curriculum__grid {
    gap: var(--space-4);
  }

  .curriculum__card {
    padding: var(--space-6);
  }

  .curriculum__number {
    font-size: var(--fs-5xl); /* slightly smaller for tablets */
  }
}

/* Mobile: collapse to 1 column */
@media (max-width: 40rem) { /* 640px */
  .curriculum__grid {
    grid-template-columns: 1fr;
  }
}

/* Small phones: extra-tight heading + padding */
@media (max-width: 30rem) { /* 480px */
  .curriculum {
    padding-block: var(--space-8) var(--space-7);
  }

  .curriculum__heading {
    font-size: var(--fs-2xl);
    margin-bottom: var(--space-7);
  }

  .curriculum__card {
    padding: var(--space-5);
  }

  .curriculum__number {
    font-size: var(--fs-4xl); /* keep number readable on small cards */
  }
}

/* ============================================================
   LIVE SESSIONS + COACHING — RESPONSIVE
   ============================================================ */
/* Tablet: shrink heading, reduce column gap */
@media (max-width: 62rem) { /* 992px */
  .live__heading {
    font-size: var(--fs-3xl);
    margin-bottom: var(--space-9);
  }

  .live__part {
    gap: var(--space-6);
  }

  .live__copy {
    font-size: var(--fs-md);
  }

  .live__closing-text {
    font-size: var(--fs-2xl);
  }
}

/* Mobile/tablet: stack both parts into a single column.
   Consistent order: text then visual.
   Alternation simplifies to a single-column order on small screens. */
@media (max-width: 56.25rem) { /* 900px */
  .live {
    padding-block: var(--space-9) var(--space-8);
  }

  .live__part {
    grid-template-columns: 1fr;
    gap: var(--space-7);
  }

  .live__part + .live__part {
    margin-top: var(--space-10);
  }

  .live__text {
    max-width: none;
  }

  /* Mirror part keeps same stacked order (text first, then visual) */
  .live__part--alt .live__visual {
    order: 2;
  }

  /* Side-entrance slides become gentler upward reveals on small
     screens (both parts move together from the same direction). */
  .live__part .l-visual,
  .live__part--alt .l-visual {
    transform: translateY(24px);
  }

  .l-visual.is-visible {
    transform: translateY(0);
  }

  .live__closing {
    margin-top: var(--space-10);
  }
}

/* Small phones: extra-tight */
@media (max-width: 30rem) { /* 480px */
  .live {
    padding-block: var(--space-8) var(--space-7);
  }

  .live__heading {
    font-size: var(--fs-2xl);
    margin-bottom: var(--space-8);
  }

  .live__label {
    font-size: var(--fs-base);
  }

  .live__label-sub {
    font-size: var(--fs-lg);
  }

  .live__closing-text {
    font-size: var(--fs-xl);
  }

  /* Tighter coaching flow + dashboard on narrow screens */
  .live__flow-label {
    font-size: var(--fs-sm);
  }

  .coach-progress {
    padding: var(--space-5);
  }

  .coach-status-list {
    padding-inline: var(--space-5);
    padding-bottom: var(--space-5);
  }
}

/* --- Reduced motion: looping animation + text reveal ---------- */
@media (prefers-reduced-motion: reduce) {
  .session-panel-top,
  .session-head,
  .session-live,
  .session-quote,
  .session-prompt,
  .session-feature,
  .session-badge {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  .session-feature-check {
    transform: scale(1) !important;
    transition: none !important;
  }

  .session-live-dot.is-pulsing {
    animation: none;
  }

  .live-text-reveal {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  .live-text-reveal:nth-child(n) {
    transition-delay: 0ms !important;
  }

  /* Badge hidden in static state */
  .session-badge::after {
    content: none !important;
  }

  .session-badge {
    display: none !important;
  }
}

/* ============================================================
   CAREER PATH — RESPONSIVE
   ============================================================ */
/* Tablet: shrink heading + stage number */
@media (max-width: 62rem) { /* 992px */
  .career__heading {
    font-size: var(--fs-3xl);
    margin-bottom: var(--space-9);
  }

  .career__num {
    font-size: var(--fs-3xl);
  }
}

/* Mobile/tablet: single vertical line on the start side, all
   stages stacked to the other side (no alternating on narrow). */
@media (max-width: 56.25rem) { /* 900px */
  .career {
    padding-block: var(--space-9) var(--space-8);
  }

  /* Timeline inline-start MUST stay 0 (never padded) on mobile. The
     vertical line (which is a DIRECT child of .career__timeline, so its
     inset-inline-start: 0 resolves against the timeline's PADDING box)
     sits at the physical start edge (right in RTL) at 0. The .career__step
     rows are normal-flow children of the timeline, so they sit inside the
     timeline's CONTENT box. If we gave the timeline padding-inline-start,
     the line would stay at 0 (padding box) while the steps + nodes would
     shift inward by the padding — breaking the node/line correspondence
     by exactly that amount. Therefore the node's rail gap is reserved by
     .career__step's own padding-inline-start (2.5rem), not the timeline. */
  .career__timeline {
    padding-inline-start: 0;
  }

  /* Line: a direct child of .career__timeline; inset-inline-start: 0
     anchors it to the timeline's padding-box start edge (0px, right in
     RTL). This is the reference both nodes center against. */
  .career__line {
    left: auto;
    inset-inline-start: 0;
    transform: none;
    width: 3px; /* actual value read from this file */
  }

  /* All steps full-width, stacked to the end (left in RTL). The step's
     padding-inline-start: 2.5rem (40px) reserves the rail lane between
     the 3px line and the text. In RTL inline-start == physical right,
     the SAME side the line and node sit on, so the text is guaranteed a
     clear lane: node's far edge is at +10.5px (from -7.5 + 18px), 40px
     of padding gives the text ~29.5px of visible clearance before a glyph
     can start. padding-inline-end stays 0 (left side needs no rail). */
  .career__step,
  .career__step:nth-child(odd),
  .career__step:nth-child(even) {
    width: 100%;
    margin: 0;
    padding-inline-end: 0;
    padding-inline-start: 2.5rem; /* 40px — dedicated rail lane */
    text-align: start;
  }

  /* Node centered EXACTLY on the line, computed via calc so it stays
     correct if dimensions change. Only the 3px .career__line width and
     18px .career__node width are needed (both read directly from this
     file): the node's inline-start edge is
       calc(-1 * (18px / 2 - 3px / 2)) = calc(-1 * (9px - 1.5px))
                                     = calc(-7.5px)
     Because the node is a child of .career__step (position:relative,
     which sits flush at the timeline's content start, i.e. 0px in RTL),
     and the line sits at the timeline's padding start (0px in RTL), both
     resolve -7.5px / 0 against the same origin. Node center at -7.5 +
     9 = 1.5px === line center at 0 + 1.5 = 1.5px. */
  .career__node,
  .career__step:nth-child(odd) .career__node,
  .career__step:nth-child(even) .career__node {
    inset-inline-start: calc(-1 * (18px / 2 - 3px / 2)); /* = calc(-7.5px) */
    right: auto;
    left: auto;
  }

  /* Never allow stage titles to be clipped or truncated on mobile:
     normal wrapping, visible overflow, and no ellipsis — "PROVE YOURSELF"
     (and any future longer title) wraps to a second line in full. */
  .career__title {
    white-space: normal;
    overflow: visible;
    overflow-wrap: break-word;
    text-overflow: clip;
  }

  /* ------------------------------------------------------------
     MOBILE HORIZONTAL STRIP + MODAL
     Replaces the old vertical timeline on ≤900px entirely: the
     timeline is hidden, and a swipeable scroll-snap row of compact
     stage columns (tap -> modal) is shown in its place. Desktop is
     untouched because .career__strip/.career__dots/.career__modal
     default to display:none and only become visible here, while
     .career__timeline is hidden only at this width.
     ------------------------------------------------------------ */
  /* The old vertical timeline (and its node/text geometry) no longer
     renders at this width — the strip fully replaces it. */
  .career__timeline {
    display: none;
  }

  /* Horizontal swipeable, snap-scrolling stage row */
  .career__strip {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    gap: var(--space-4);
    margin-inline: calc(var(--space-4) * -1); /* bleed to screen edges */
    padding-inline: var(--space-4);
    /* spare snap-room so the first/last columns can still center */
    padding-block: var(--space-2);
    scrollbar-width: none; /* hide scrollbar in Firefox */
  }
  .career__strip::-webkit-scrollbar {
    display: none; /* hide scrollbar in WebKit */
  }

  /* Each compact stage column */
  .career__col {
    flex: 0 0 auto;
    width: 8rem;            /* 128px */
    min-height: 9.5rem;     /* 152px */
    scroll-snap-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: var(--space-3);
    border-radius: var(--radius-md);
    border: 1px solid var(--clr-border);
    background-color: var(--clr-bg);
    cursor: pointer;
    text-align: center;
    /* ambient brand-blue glow — low intensity by default */
    box-shadow: 0 0 0 rgba(25, 58, 109, 0);
    animation: careerGlowPulse 3.2s var(--ease-in-out) infinite;
    transition:
      box-shadow var(--dur-base) var(--ease-out),
      transform var(--dur-base) var(--ease-out);
  }

  /* Centered/active column: visibly stronger glow */
  .career__col[data-active='true'] {
    box-shadow: 0 0 0 rgba(25, 58, 109, 0);
    animation: careerGlowPulseActive 3.2s var(--ease-in-out) infinite;
    border-color: var(--clr-brand);
  }

  @keyframes careerGlowPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(25, 58, 109, 0.06), 0 4px 12px rgba(15, 23, 42, 0.06); }
    50%      { box-shadow: 0 0 14px 2px rgba(25, 58, 109, 0.16), 0 6px 16px rgba(15, 23, 42, 0.08); }
  }
  @keyframes careerGlowPulseActive {
    0%, 100% { box-shadow: 0 0 0 0 rgba(25, 58, 109, 0.22), 0 4px 14px rgba(25, 58, 109, 0.22); }
    50%      { box-shadow: 0 0 20px 4px rgba(25, 58, 109, 0.42), 0 8px 20px rgba(25, 58, 109, 0.3); }
  }

  /* Column: large muted number */
  .career__col-num {
    font-size: var(--fs-3xl);
    font-weight: var(--fw-extrabold);
    line-height: 1;
    color: var(--clr-border);
  }

  /* Column title — sized to fit, wraps, never clips */
  .career__col-title {
    font-size: var(--fs-sm);
    font-weight: var(--fw-bold);
    color: var(--clr-heading);
    line-height: var(--leading-tight);
    letter-spacing: 0.02em;
    white-space: normal;
    overflow-wrap: break-word;
  }

  /* Tappable affordance icon (chevron), subtle continuous bounce */
  .career__col-icon {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: var(--clr-brand);
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round;
    animation: careerBounce 1.8s var(--ease-in-out) infinite;
  }
  @keyframes careerBounce {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(4px); }
  }

  /* Progress dots row below the strip */
  .career__dots {
    display: flex;
    justify-content: center;
    gap: var(--space-2);
    margin-top: var(--space-4);
  }
  .career__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: var(--clr-border);
    transition:
      background-color var(--dur-base) var(--ease-out),
      transform var(--dur-base) var(--ease-out);
  }
  .career__dot[data-active='true'] {
    background-color: var(--clr-brand);
    transform: scale(1.35);
  }

  /* Modal overlay: dimmed fixed backdrop + centered white card.
     Transitions via data-open so we can fade/scale on open and close. */
  .career__modal {
    position: fixed;
    inset: 0;
    z-index: 1200;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-5);
    background-color: rgba(15, 23, 42, 0.55);
    opacity: 0;
    visibility: hidden;
    transition:
      opacity var(--dur-base) var(--ease-out),
      visibility var(--dur-base) var(--ease-out);
  }
  .career__modal[data-open='true'] {
    opacity: 1;
    visibility: visible;
  }

  /* White card */
  .career__modal-card {
    position: relative;
    width: 100%;
    max-width: 22rem;
    padding: var(--space-7) var(--space-6);
    border-radius: var(--radius-xl);
    background-color: var(--clr-bg);
    box-shadow: var(--shadow-lg);
    text-align: center;
    transform: scale(0.92);
    transition: transform var(--dur-base) var(--ease-out);
  }
  .career__modal[data-open='true'] .career__modal-card {
    transform: scale(1);
  }

  .career__modal-close {
    position: absolute;
    inset-inline-end: var(--space-3);
    inset-block-start: var(--space-3);
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 50%;
    background-color: var(--clr-bg-subtle);
    color: var(--clr-text);
    font-size: var(--fs-lg);
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition:
      background-color var(--dur-fast) var(--ease-out),
      transform var(--dur-fast) var(--ease-out);
  }
  .career__modal-close:hover {
    background-color: var(--clr-border);
    transform: scale(1.06);
  }

  .career__modal-num {
    display: block;
    font-size: var(--fs-4xl);
    font-weight: var(--fw-extrabold);
    line-height: 1;
    color: var(--clr-brand);
    margin-bottom: var(--space-2);
  }

  .career__modal-title {
    font-size: var(--fs-xl);
    font-weight: var(--fw-extrabold);
    color: var(--clr-heading);
    margin-bottom: var(--space-3);
  }

  .career__modal-desc {
    font-size: var(--fs-base);
    color: var(--clr-text);
    line-height: var(--leading-snug);
  }
}

/* Small phones: extra-tight */
@media (max-width: 30rem) { /* 480px */
  .career {
    padding-block: var(--space-8) var(--space-7);
  }

  .career__heading {
    font-size: var(--fs-2xl);
    margin-bottom: var(--space-8);
  }

  .career__num {
    font-size: var(--fs-2xl);
  }

  .career__title {
    font-size: var(--fs-lg);
  }

  .career__timeline {
    /* Keep the timeline's inline-start at 0 on narrow phones too. If we
       padded it here, the line (anchored to the timeline padding-box at
       inset-inline-start: 0) would stay at 0 while the flow steps (and
       their absolutely-positioned nodes) shift inward by the padding —
       breaking the node/line correspondence by exactly that amount. So
       the rail gap must come from .career__step's padding-inline-start,
       never from a timeline padding shift. */
    padding-inline-start: 0;
  }
}

/* ============================================================
   CAREER PREPARATION — RESPONSIVE
   ============================================================ */
/* Tablet: shrink headings, stack panel + notes into one column */
@media (max-width: 62rem) { /* 992px */
  .prep__heading {
    font-size: var(--fs-2xl);
  }

  .prep__lead {
    font-size: var(--fs-lg);
  }

  .prep__head {
    margin-bottom: var(--space-9);
  }

  .prep__layout {
    grid-template-columns: 1fr;   /* panel above, notes below */
    gap: var(--space-8);
  }

  .prep__notes {
    max-width: 34rem;
    margin-inline: auto;
  }
}

/* Small phones: extra-tight paddings & full-width panel */
@media (max-width: 30rem) { /* 480px */
  .prep {
    padding-block: var(--space-8) var(--space-7);
  }

  .prep__heading {
    font-size: var(--fs-xl);
  }

  .prep__lead {
    font-size: var(--fs-md);
  }

  .prep__head {
    margin-bottom: var(--space-8);
  }

  /* Full-width panel + roomier touch targets inside rows */
  .prep__panel {
    width: 100%;
  }

  .prep__block {
    padding-inline: var(--space-4);
  }

  .prep__divider {
    margin-inline: var(--space-4);
  }

  .prep__row {
    padding-block: var(--space-4);
  }

  .prep__check {
    width: 26px;
    height: 26px;
  }

  .prep__ready {
    padding-inline: var(--space-4);
  }

  .prep__note {
    gap: var(--space-3);
  }
}

/* --- Reduced motion: show the final CAREER READY state directly */
@media (prefers-reduced-motion: reduce) {
  /* Hide the step-by-step building state (the JS never reveals it) */
  .prep__building {
    display: none;
  }

  /* Final flow state shown immediately, fully opaque and in-flow */
  .prep__ready {
    display: flex;
    position: static;
    inset: auto;
    padding-block: var(--space-8);
    opacity: 1;
    transform: none;
    transition: none;
  }

  .prep__ready .prep__flow-stage,
  .prep__ready .prep__flow-arrow {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .prep__ready-line,
  .prep__ready-title {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  /* All notes fully visible, none dimmed */
  .prep__note {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  .prep__panel {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ============================================================
   PAID PRACTICE — RESPONSIVE
   ============================================================ */
/* Tablet: shrink the statement */
@media (max-width: 62rem) { /* 992px */
  .paid__heading {
    font-size: var(--fs-3xl);
    margin-bottom: var(--space-9);
  }
}

/* Mobile/tablet: switch to a vertical LTR spine down the start
   (left) side, mirroring the Method/Career vertical pattern. */
@media (max-width: 56.25rem) { /* 900px */
  .paid {
    padding-block: var(--space-9) var(--space-8);
  }

  .paid__heading {
    font-size: var(--fs-3xl);
  }

  /* Rebuild the flow as a vertical stack; rail on the left (LTR) */
  .paid__flow {
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
    padding-inline-start: 0;  /* stage supplies the rail gap */
  }

  /* Vertical connecting line down the start (left) side */
  .paid__line {
    top: 0;
    bottom: 0;
    left: 0;
    right: auto;
    transform: none;
    width: 2px;
    height: auto;
  }

  /* Fill grows downward instead of sideways (JS sets height) */
  .paid__fill {
    top: 0;
    bottom: auto;
    left: 0;
    height: 0%;
    width: 100%;
  }

  /* Stage becomes a column of text, indented off the rail */
  .paid__stage {
    position: relative;
    align-items: flex-start;
    text-align: start;
    padding-block: var(--space-3);
    padding-inline-start: var(--space-8); /* rail gap */
  }

  .paid__stage-en {
    font-size: var(--fs-md);
  }

  .paid__stage-ar {
    text-align: start;
    margin-top: var(--space-1);
    max-width: none;
  }

  /* Marker on the rail, aligned with the EN label's first line.
     The 2px rail's center sits 1px from the flow start edge; the
     (now 22px) marker needs its own center there, so its inline-start
     edge is (1px - 11px). Vertically it centres on the first line. */
  .paid__marker {
    position: absolute;
    inset-inline-start: -10px;
    top: var(--space-4);
    margin-block: 0;
    transform: translateY(-50%);
  }
}

/* Small phones: extra-tight */
@media (max-width: 30rem) { /* 480px */
  .paid {
    padding-block: var(--space-8) var(--space-7);
  }

  .paid__heading {
    font-size: var(--fs-2xl);
    margin-bottom: var(--space-8);
  }

  .paid__note {
    margin-top: var(--space-8);
    font-size: var(--fs-xs);
  }

  .paid__flow {
    gap: var(--space-5);
  }
}

/* ============================================================
   CAREER COMMUNITY — RESPONSIVE
   ============================================================ */
/* Tablet: shrink heading; the board is already a single column. */
@media (max-width: 62rem) { /* 992px */
  .community__title {
    font-size: var(--fs-2xl);
  }

  .community__head {
    margin-bottom: var(--space-8);
  }

  /* Tabs wrap gracefully on narrower widths */
  .community__tabs {
    flex-wrap: wrap;
    gap: var(--space-1) var(--space-3);
  }

  .community__tab {
    padding-block: var(--space-3);
  }
}

/* Small phones: extra-tight, rows stay readable & tappable */
@media (max-width: 30rem) { /* 480px */
  .community {
    padding-block: var(--space-8) var(--space-7);
  }

  .community__title {
    font-size: var(--fs-xl);
  }

  .community__lead {
    font-size: var(--fs-md);
  }

  .community__sub {
    font-size: var(--fs-base);
  }

  .community__head {
    margin-bottom: var(--space-7);
  }

  /* Rows: tighter padding, wrap the tag/arrow so nothing overflows */
  .community__job {
    flex-wrap: wrap;
    padding: var(--space-4) var(--space-4);
    gap: var(--space-2) var(--space-3);
  }

  .community__job-main {
    flex: 1 1 auto;
  }

  .community__job-title {
    font-size: var(--fs-md);
  }

  .community__feed-note {
    font-size: var(--fs-xs);
  }

  .community__search,
  .community__tabs {
    margin-inline: var(--space-4);
  }

  .community__tabs {
    padding-inline: var(--space-4);
  }
}

/* --- Reduced motion: static board, no typewriter/demo --------- */
@media (prefers-reduced-motion: reduce) {
  .community__typewriter-caret {
    animation: none;
    opacity: 1;
  }

  /* No demo cycle: "All" stays active, all listings visible */
  .community__job.is-hidden {
    display: block;
  }

  .community__job {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  .community-reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .community-reveal.community__new-badge {
    opacity: 1;
  }

  .community__tab-indicator {
    transition: none;
  }
}

/* ============================================================
   SKILL TO SERVICE — RESPONSIVE
   ============================================================ */
/* Tablet: shrink heading + career path labels */
@media (max-width: 62rem) { /* 992px */
  .skill__title {
    font-size: var(--fs-2xl);
  }

  .skill__head {
    margin-bottom: var(--space-9);
  }

  .skill__path {
    margin-top: var(--space-9);
  }
}

/* Mobile/tablet: switch the radial hub to a BRANCHING MAP — central
   SKILL node at the top, a vertical trunk centered beneath it, and
   8 service labels alternating left/right off the trunk in a
   herringbone pattern.  Layout is a simple flex column (normal flow,
   no grid, no absolute positioning on branches) so every branch
   naturally stacks one below the next.  The zigzag is achieved with
   alternating margin-inline offsets via :nth-child — no JS toggle. */
@media (max-width: 56.25rem) { /* 900px */
  .skill {
    padding-block: var(--space-9) var(--space-9);
  }

  /* ---- Map: simple vertical flex stack (normal flow) ----------- */
  .skill__map {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-height: 0;
    max-width: 30rem;
  }

  /* ---- Core: static, centered hub at the top ------------------- */
  .skill__core {
    position: static;
    align-self: center;
    transform: scale(0.8);
    opacity: 0;
    transition:
      opacity var(--dur-base) var(--ease-out),
      transform var(--dur-base) var(--ease-spring);
  }

  .skill__map.is-visible .skill__core {
    opacity: 1;
    transform: scale(1);
    transition-delay: 0.1s; /* step 2: core appears after heading */
  }

  /* ---- Radial SVG lines hidden; trunk + connectors replace them */
  .skill__lines {
    display: none;
  }

  /* ---- Trunk: centered vertical line beneath the core ---------- */
  .skill__trunk {
    display: block;
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 0;
    transform: translateX(-50%) scaleY(0);
    transform-origin: top;
  }

  /* ---- Branches: normal-flow rows, alternating left/right ----- */
  .skill__branch {
    position: relative;
    top: auto;
    left: auto;
    display: flex;
    align-items: center;
    gap: var(--space-1);
    white-space: nowrap;
    z-index: 2;
    /* normal-flow defaults — no absolute, no translate centering */
    opacity: 0;
    transform: scale(0.6);
    transition:
      opacity var(--dur-base) var(--ease-out),
      transform var(--dur-base) var(--ease-spring);
    transition-delay: calc(0.55s + var(--i) * 0.13s); /* step 4 */
    padding-block: var(--space-3);
  }

  /* Override the desktop visible-state transform (translate centering
     + scale) so branches are correctly positioned in normal flow. */
  .skill__map.is-visible .skill__branch {
    opacity: 1;
    transform: scale(1);
  }

  /* Zigzag: odd branches (Sales, Appointment Setting, Customer
     Service, Sales Support) shift toward the start side; even
     branches (Closing, Lead Qualification, Follow-up, LinkedIn)
     shift toward the end side.  Margin offsets work in normal
     flow — no absolute positioning, no overlap risk. */
  .skill__branch:nth-child(odd) {
    align-self: flex-start;
    margin-inline-start: var(--space-3);
  }

  .skill__branch:nth-child(even) {
    align-self: flex-end;
    margin-inline-end: var(--space-3);
  }

  /* Connector stubs: short brand-blue 2px bars extending from the
     label toward the trunk.  Odd branches have the stub on the end
     side (right in LTR / left in RTL) pointing toward center;
     even branches have it on the start side pointing toward center. */
  .skill__branch::before {
    content: '';
    position: absolute;
    top: 50%;
    width: 16px;
    height: 2px;
    background-color: var(--clr-brand);
    border-radius: var(--radius-full);
    transform: translateY(-50%);
    opacity: 0;
    transition: opacity var(--dur-base) var(--ease-out);
  }

  .skill__branch:nth-child(odd)::before {
    inset-inline-end: 100%;
    margin-inline-end: 2px;
  }

  .skill__branch:nth-child(even)::before {
    inset-inline-start: 100%;
    margin-inline-start: 2px;
  }

  .skill__map.is-visible .skill__branch::before {
    opacity: 1;
    transition-delay: calc(0.55s + var(--i) * 0.13s);
  }

  /* Branch dots: inline next to labels (not pinned to a rail) */
  .skill__branch .skill__branch-dot {
    position: relative;
    top: auto;
    inset-inline-start: auto;
    transform: none;
  }

  /* ---- Career path wraps into a tidy center-aligned row -------- */
  .skill__path {
    gap: var(--space-2) var(--space-1);
  }

  .skill__path .skill__path-arrow {
    width: 1.25rem;
    height: 1.25rem;
  }
}

/* Small phones: extra-tight */
@media (max-width: 30rem) { /* 480px */
  .skill {
    padding-block: var(--space-8) var(--space-8);
  }

  .skill__title {
    font-size: var(--fs-xl);
  }

  .skill__lead {
    font-size: var(--fs-md);
  }

  .skill__head {
    margin-bottom: var(--space-8);
  }

  .skill__core {
    width: 6rem;
    height: 6rem;
    font-size: var(--fs-md);
  }

  .skill__path {
    margin-top: var(--space-8);
  }

  .skill__path-label {
    font-size: var(--fs-md);
  }
}

/* ============================================================
   WHO IS THIS FOR — RESPONSIVE
   ============================================================ */
/* Tablet: shrink heading; collapse the bento tiers into a clean
   2-column layout, dropping the asymmetry spans. */
@media (max-width: 62rem) { /* 992px */
  .aud__heading {
    font-size: var(--fs-3xl);
    margin-bottom: var(--space-9);
  }

  .aud__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Everything back to a single column of flow */
  .aud__card,
  .aud__card--feature,
  .aud__card--wide {
    grid-column: span 1;
  }

  .aud__card--feature .aud__title {
    font-size: var(--fs-xl);
  }
}

/* Small phones: single stacked column, fully legible */
@media (max-width: 30rem) { /* 480px */
  .aud {
    padding-block: var(--space-8) var(--space-7);
  }

  .aud__heading {
    font-size: var(--fs-2xl);
    margin-bottom: var(--space-8);
  }

  .aud__grid {
    grid-template-columns: 1fr;
    gap: var(--space-4);
  }

  .aud__card {
    padding: var(--space-5);
  }

  .aud__title {
    font-size: var(--fs-md);
  }
}

/* ============================================================
   WHAT YOU GET — RESPONSIVE
   ============================================================ */
/* Tablet: 4 columns become 2x2; vertical dividers are dropped and
   replaced with horizontal dividers (border-top) between the rows. */
@media (max-width: 62rem) { /* 992px */
  .get__heading {
    font-size: var(--fs-3xl);
  }

  .get__hub {
    font-size: var(--fs-xl);
  }

  .get__clusters {
    grid-template-columns: repeat(2, 1fr);
    column-gap: var(--space-6);
    row-gap: var(--space-6);
  }

  .get__cluster {
    padding-inline: 0;
  }

  /* Turn off the vertical dividers for the 2-col layout */
  .get__cluster:not(:first-child) {
    border-inline-start: none;
  }

  /* Horizontal divider above the second-row clusters (3rd & 4th),
     so stacked rows read as connected but separated. */
  .get__cluster:nth-child(n + 3) {
    border-top: 1px solid var(--clr-border);
    padding-top: var(--space-6);
  }
}

/* Small phones: single stacked column with horizontal dividers
   between every cluster. */
@media (max-width: 30rem) { /* 480px */
  .get {
    padding-block: var(--space-8) var(--space-7);
  }

  .get__heading {
    font-size: var(--fs-2xl);
  }

  .get__hub {
    font-size: var(--fs-lg);
    padding: var(--space-1) var(--space-5);
  }

  .get__hub-wrap {
    margin-bottom: var(--space-8);
  }

  .get__clusters {
    grid-template-columns: 1fr;
    row-gap: 0;
  }

  .get__cluster:nth-child(n + 2) {
    border-top: 1px solid var(--clr-border);
    padding-top: var(--space-6);
    margin-top: var(--space-4);
  }

  .get__cluster-title {
    font-size: var(--fs-md);
  }
}

/* ============================================================
   WHY SKILLOVA — RESPONSIVE
   ============================================================ */
/* Tablet: shrink heading + wordmark, keep the 5-column row but
   tighten the column padding so the principles still fit. */
@media (max-width: 62rem) { /* 992px */
  .why__heading {
    font-size: var(--fs-3xl);
  }

  .why__wordmark {
    font-size: var(--fs-5xl);
  }

  .why__principle {
    padding-inline: var(--space-4);
  }

  .why__name {
    font-size: var(--fs-lg);
  }
}

/* Mobile: stack the five principles into a single vertical column.
   The vertical dividers are dropped and replaced with horizontal
   (border-top) dividers between each principle — mirroring the
   .get__clusters collapse already used in What-You-Get. */
@media (max-width: 56.25rem) { /* 900px */
  .why__heading {
    margin-bottom: var(--space-6);
  }

  .why__wordmark {
    font-size: var(--fs-4xl);
  }

  .why__wordmark-wrap {
    margin-bottom: var(--space-8);
  }

  .why__principles {
    grid-template-columns: 1fr;
    gap: 0;
  }

  /* Drop the vertical dividers; each principle under the first gets
     a horizontal top divider. */
  .why__principle {
    padding-inline: 0;
  }

  .why__principle:not(:first-child) {
    border-inline-start: none;
  }

  .why__principle:nth-child(n + 2) {
    border-top: 1px solid var(--clr-border);
    padding-top: var(--space-5);
    margin-top: var(--space-5);
  }

  .why__name {
    font-size: var(--fs-lg);
    margin-bottom: var(--space-2);
  }

  .why__close {
    font-size: var(--fs-2xl);
    margin-top: var(--space-8);
  }
}

/* Small phones: reduce heading/closing sizes further, tighten the
   vertical rhythm. */
@media (max-width: 30rem) { /* 480px */
  .why {
    padding-block: var(--space-8) var(--space-7);
  }

  .why__heading {
    font-size: var(--fs-2xl);
    margin-bottom: var(--space-5);
  }

  .why__wordmark {
    font-size: var(--fs-3xl);
  }

  .why__wordmark-wrap {
    margin-bottom: var(--space-7);
  }

  .why__principle:nth-child(n + 2) {
    padding-top: var(--space-4);
    margin-top: var(--space-4);
  }

  .why__name {
    font-size: var(--fs-md);
  }

  .why__desc {
    font-size: var(--fs-sm);
  }

  .why__close {
    font-size: var(--fs-xl);
    margin-top: var(--space-7);
  }
}

/* ============================================================
   ABOUT SKILLOVA — RESPONSIVE
   ============================================================ */
/* Tablet: shrink heading/paragraph sizes, tighten the column gap. */
@media (max-width: 62rem) { /* 992px */
  .about__grid {
    gap: var(--space-6);
  }

  .about__heading {
    font-size: var(--fs-3xl);
  }

  .about__statement {
    font-size: var(--fs-lg);
  }

  .about__tagline {
    font-size: var(--fs-lg);
  }

  .about__stats {
    gap: var(--space-3);
  }

  .about__stat-label {
    font-size: var(--fs-lg);
  }
}

/* Mobile: stack vertically — image first (smaller, centered, with a
   capped max-width so it doesn't dominate), then the text full-width. */
@media (max-width: 56.25rem) { /* 900px */
  .about {
    padding-block: var(--space-8);
  }

  .about__grid {
    grid-template-columns: 1fr;
    gap: var(--space-7);
  }

  /* Three stats stack into one column for a clean mobile read */
  .about__stats {
    grid-template-columns: 1fr;
    gap: var(--space-2);
    margin-top: var(--space-5);
  }

  .about__stat {
    padding-block: var(--space-3) var(--space-2);
  }

  /* Image first in source order shown first when stacked (in RTL the
     grid still renders items top-to-bottom as placed; cap its width) */
  .about__visual {
    max-width: 22rem;
    width: 100%;
    margin-inline: auto;
    order: -1; /* ensure the visual sits above the text when stacked */
  }

  .about__text {
    max-width: none;
  }
}

/* Small phones: further reduce font sizes & vertical padding. */
@media (max-width: 30rem) { /* 480px */
  .about {
    padding-block: var(--space-7);
  }

  .about__copy,
  .about__skills {
    font-size: var(--fs-base);
  }

  .about__statement {
    font-size: var(--fs-md);
  }

  .about__statement--strong {
    font-size: var(--fs-lg);
  }

  .about__creds-name {
    font-size: var(--fs-base);
  }

  .about__tagline {
    font-size: var(--fs-md);
  }

  .about__badge {
    padding: var(--space-2) var(--space-4);
    border-radius: var(--radius-md);
  }

  .about__badge-sub {
    font-size: var(--fs-xs);
  }

  .about__visual {
    max-width: 18rem;
  }
}

/* ============================================================
   TESTIMONIALS — RESPONSIVE
   ============================================================ */
/* Tablet: keep the 3-column row but tone down the featured card so
   it doesn't dominate too much. */
@media (max-width: 62rem) { /* 992px */
  .testi__grid {
    grid-template-columns: 1fr 1.3fr 1fr;
    gap: var(--space-4);
  }

  .testi__card--featured {
    padding: var(--space-6);
  }

  .testi__card--featured .testi__quote {
    font-size: var(--fs-lg);
  }

  .testi__card--featured .testi__avatar {
    width: 60px;
    height: 60px;
  }

  .testi__heading {
    font-size: var(--fs-3xl);
  }
}

/* Mobile: the 3-column row becomes a SIMPLE MANUAL carousel — one
   slide visible at a time (starting on the featured), with prev/next
   buttons + dots. Navigation is user-triggered only (no autoplay).
   js/main.js toggles .testi__slider--on when below this breakpoint. */
@media (max-width: 56.25rem) { /* 900px */
  .testi__heading {
    margin-bottom: var(--space-8);
  }

  .testi__grid {
    display: block; /* simple vertical track; active slide shown */
  }

  .testi__grid.testi__slider--on .testi__slide {
    display: none;
  }

  .testi__grid.testi__slider--on .testi__slide.testi__slide--active {
    display: block;
    animation: testiFade var(--dur-base) var(--ease-out);
  }

  /* A single visible card in the carousel: centered, capped width */
  .testi__grid.testi__slider--on .testi__card {
    max-width: 30rem;
    margin-inline: auto;
  }

  /* Show the manual controls */
  .testi__nav {
    display: flex;
  }
}

/* Small phones: tighten card padding/fonts; controls stay large and
   easily tappable. */
@media (max-width: 30rem) { /* 480px */
  .testi {
    padding-block: var(--space-8) var(--space-7);
  }

  .testi__heading {
    font-size: var(--fs-2xl);
    margin-bottom: var(--space-7);
  }

  .testi__card {
    padding: var(--space-5);
  }

  .testi__card--featured {
    padding: var(--space-5);
  }

  .testi__card--featured .testi__quote {
    font-size: var(--fs-md);
  }

  .testi__card--featured .testi__avatar {
    width: 56px;
    height: 56px;
  }

  .testi__name {
    font-size: var(--fs-xs);
  }

  .testi__nav {
    gap: var(--space-4);
    margin-top: var(--space-6);
  }
}

/* ============================================================
   OFFER — RESPONSIVE
   ============================================================ */
/* Tablet: reduce heading & price sizes, keep the panel comfortable. */
@media (max-width: 62rem) { /* 992px */
  .offer__heading {
    font-size: var(--fs-2xl);
  }

  .offer__price {
    font-size: var(--fs-4xl);
  }

  .offer__panel {
    padding: var(--space-8);
  }
}

/* Mobile: panel comes closer to full width with side margins,
   reduce its padding. */
@media (max-width: 56.25rem) { /* 900px */
  .offer__heading {
    font-size: var(--fs-2xl);
    margin-bottom: var(--space-7);
  }

  .offer__panel {
    padding: var(--space-7) var(--space-6);
  }
}

/* Small phones: CTA becomes full-width (mirrors Hero's small-phone
   .btn--hero pattern); tighten fonts & padding further. */
@media (max-width: 30rem) { /* 480px */
  .offer {
    padding-block: var(--space-8) var(--space-8);
  }

  .offer__heading {
    font-size: var(--fs-xl);
  }

  .offer__panel {
    padding: var(--space-6) var(--space-5);
    border-radius: var(--radius-lg);
  }

  .offer__list li {
    font-size: var(--fs-sm);
  }

  .offer__price {
    font-size: var(--fs-3xl);
  }

  .offer__cta {
    width: 100%;
    padding: 0.9rem 1.25rem;
  }

  .offer__note {
    font-size: var(--fs-xs);
  }
}

/* ============================================================
   FAQ — RESPONSIVE
   ============================================================ */
/* Tablet: reduce heading size, tighten the column gap. */
@media (max-width: 62rem) { /* 992px */
  .faq__grid {
    gap: var(--space-6);
  }

  .faq__heading {
    font-size: var(--fs-3xl);
  }
}

/* Mobile: stack to a single column — heading/intro on top, the
   accordion full-width below. */
@media (max-width: 56.25rem) { /* 900px */
  .faq {
    padding-block: var(--space-9) var(--space-8);
  }

  .faq__grid {
    grid-template-columns: 1fr;
    gap: var(--space-7);
  }

  .faq__lead {
    max-width: none;
  }
}

/* Small phones: tighten row padding & fonts; keep the trigger/icon
   comfortably tappable. */
@media (max-width: 30rem) { /* 480px */
  .faq {
    padding-block: var(--space-8) var(--space-7);
  }

  .faq__heading {
    font-size: var(--fs-2xl);
  }

  .faq__trigger {
    font-size: var(--fs-base);
    padding-block: var(--space-4);
  }

  .faq__a-inner {
    font-size: var(--fs-sm);
  }

  .faq__icon {
    width: 0.875rem;
    height: 0.875rem;
  }
}

/* ============================================================
   FINAL CTA — RESPONSIVE
   ============================================================ */
/* Tablet: scale the statement/line/kick fonts proportionally. */
@media (max-width: 62rem) { /* 992px */
  .finalcta__statement {
    font-size: var(--fs-4xl);
  }

  .finalcta__line {
    font-size: var(--fs-base);
  }

  .finalcta__kick {
    font-size: var(--fs-xl);
  }
}

/* Mobile: keep the stacked lines single-column & centered; tighten
   the vertical rhythm between them. */
@media (max-width: 56.25rem) { /* 900px */
  .finalcta {
    padding-block: var(--space-9) var(--space-8);
  }

  .finalcta__lines {
    gap: var(--space-1);
  }

  .finalcta__act {
    gap: var(--space-4);
  }
}

/* Small phones: reduce fonts further, make the CTA full-width (mirrors
   the Hero/Offer full-width mobile button pattern), tighten padding. */
@media (max-width: 30rem) { /* 480px */
  .finalcta {
    padding-block: var(--space-8) var(--space-7);
  }

  .finalcta__statement {
    font-size: var(--fs-2xl);
  }

  .finalcta__line {
    font-size: var(--fs-sm);
  }

  .finalcta__kick {
    font-size: var(--fs-lg);
  }

  .finalcta__act .btn {
    width: 100%;
    padding: 0.9rem 1.25rem;
  }
}

/* ============================================================
   FOOTER — RESPONSIVE
   ============================================================ */
/* Tablet: slightly tighten the gap between brand and links. */
@media (max-width: 62rem) { /* 992px */
  .site-footer__top {
    gap: var(--space-5);
  }
}

/* Mobile: stack vertically & center everything for a clean read —
   logo+tagline first, then the nav link row (wrapping/centered),
   then the divider, then centered copyright. */
@media (max-width: 56.25rem) { /* 900px */
  .site-footer {
    padding-block: var(--space-7) var(--space-8);
  }

  .site-footer__top {
    flex-direction: column;
    align-items: center;
    gap: var(--space-6);
  }

  .site-footer__brand {
    align-items: center;
  }

  .site-footer__links {
    justify-content: center;
  }
}

/* Small phones: tighten padding/fonts; keep the link row wrapping
   with adequate spacing so links stay easily tappable. */
@media (max-width: 30rem) { /* 480px */
  .site-footer {
    padding-block: var(--space-6) var(--space-7);
  }

  .site-footer__links {
    gap: var(--space-4) var(--space-5);
  }

  .site-footer__link {
    font-size: var(--fs-sm);
  }

  .site-footer__copyright {
    font-size: var(--fs-xs);
  }
}

/* ================================================================
   QUALIFICATION FUNNEL — FULL-SCREEN OVERLAY
   ----------------------------------------------------------------
   Covers the entire viewport above every other element.  Opened via
   JS when any [data-open-funnel] CTA is clicked.  Uses existing
   design tokens exclusively — no new colours or fonts.
   ================================================================ */

/* ---------- Overlay shell -------------------------------------- */
.funnel {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  background: var(--clr-bg);
  opacity: 0;
  visibility: hidden;
  transform: scale(0.97);
  transition:
    opacity var(--dur-base) var(--ease-out),
    visibility var(--dur-base),
    transform var(--dur-base) var(--ease-out);
}

.funnel[aria-hidden="false"] {
  opacity: 1;
  visibility: visible;
  transform: scale(1);
}

/* ---------- Top bar -------------------------------------------- */
.funnel__topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-4) var(--container-pad);
  min-height: var(--navbar-height);
  border-bottom: 1px solid var(--clr-border);
  flex-shrink: 0;
}

.funnel__logo {
  font-family: var(--font-primary);
  font-size: var(--fs-lg);
  font-weight: var(--fw-extrabold);
  letter-spacing: 0.04em;
  color: var(--clr-brand);
  line-height: 1;
  text-decoration: none;
}

.funnel__logo em {
  font-style: normal;
  color: var(--clr-heading);
}

.funnel__step-count {
  font-family: var(--font-primary);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--clr-text);
  letter-spacing: 0.04em;
}

/* ---------- Progress bar --------------------------------------- */
.funnel__progress {
  height: 3px;
  background: var(--clr-border);
  flex-shrink: 0;
  overflow: hidden;
}

.funnel__progress-fill {
  height: 100%;
  width: calc(100 / 7 * 1%); /* 1 of 7 steps ≈ 14.29% */
  background: var(--clr-brand);
  border-radius: 0 var(--radius-full) var(--radius-full) 0;
  transition: width var(--dur-slow) var(--ease-out);
}

/* ---------- Close button --------------------------------------- */
.funnel__close {
  position: absolute;
  top: var(--space-4);
  left: var(--space-4); /* RTL: close sits on the left */
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-full);
  background: var(--clr-bg);
  color: var(--clr-heading);
  font-size: var(--fs-xl);
  line-height: 1;
  cursor: pointer;
  transition:
    border-color var(--dur-fast),
    background var(--dur-fast);
}

.funnel__close:hover {
  border-color: var(--clr-brand);
  background: var(--clr-bg-subtle);
}

/* ---------- Body / scroll area --------------------------------- */
.funnel__body {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-8) var(--container-pad) var(--space-6);
  display: flex;
  justify-content: center;
}

/* ---------- Step container ------------------------------------- */
.funnel__step {
  display: none;
  flex-direction: column;
  width: 100%;
  max-width: 36rem; /* 576px — comfortable reading width */
}

.funnel__step.is-active {
  display: flex;
}

/* ---------- Heading -------------------------------------------- */
.funnel__heading {
  font-family: var(--font-primary);
  font-size: var(--fs-2xl);
  font-weight: var(--fw-bold);
  color: var(--clr-heading);
  line-height: var(--leading-tight);
  text-align: center;
  margin-bottom: var(--space-7);
}

/* ---------- Options list --------------------------------------- */
.funnel__options {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

/* Single option row */
.funnel__option {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  padding: var(--space-4) var(--space-5);
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-lg);
  background: var(--clr-bg);
  color: var(--clr-heading);
  font-family: var(--font-primary);
  font-size: var(--fs-md);
  font-weight: var(--fw-medium);
  line-height: 1;
  cursor: pointer;
  text-align: start;
  transition:
    border-color var(--dur-fast),
    background var(--dur-fast),
    box-shadow var(--dur-fast);
}

.funnel__option:hover {
  border-color: var(--clr-brand);
  background: var(--clr-bg-subtle-2);
}

.funnel__option:focus-visible {
  outline: 2px solid var(--clr-brand);
  outline-offset: 2px;
}

/* Emoji (optional — last option "أخرى" has none) */
.funnel__option-emoji {
  flex-shrink: 0;
  font-size: var(--fs-xl);
  line-height: 1;
}

/* Label text */
.funnel__option-label {
  flex: 1;
}

/* Checkmark indicator (hidden by default, shown on .is-selected) */
.funnel__option-check {
  flex-shrink: 0;
  width: 1.25rem;
  height: 1.25rem;
  border: 2px solid var(--clr-border);
  border-radius: var(--radius-full);
  transition:
    border-color var(--dur-fast),
    background var(--dur-fast);
}

/* Selected state */
.funnel__option.is-selected {
  border-color: var(--clr-brand);
  background: var(--clr-bg-subtle-2);
  box-shadow: 0 0 0 1px var(--clr-brand);
}

.funnel__option.is-selected .funnel__option-check {
  border-color: var(--clr-brand);
  background: var(--clr-brand);
  /* CSS-only checkmark via box-shadow trick */
  box-shadow:
    inset 0 0 0 2px var(--clr-bg),
    inset 0 -2px 0 0 var(--clr-bg);
}

/* ---------- Back link ------------------------------------------ */
.funnel__back {
  display: inline-block;
  margin-top: auto;
  padding-top: var(--space-6);
  font-family: var(--font-primary);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--clr-text);
  text-decoration: none;
  cursor: pointer;
  transition: color var(--dur-fast);
}

.funnel__back:hover {
  color: var(--clr-brand);
}

/* Hide back on step 1 (no previous step) */
.funnel__back.is-first-step {
  visibility: hidden;
  pointer-events: none;
}

/* ---------- Multi-select panel (Step 4) ----------------------- */
.funnel__multiselect {
  display: none;
  margin-top: var(--space-6);
  padding: var(--space-5);
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-lg);
  background: var(--clr-bg-subtle);
}

.funnel__multiselect[aria-hidden="false"] {
  display: block;
}

.funnel__multiselect-desc {
  font-family: var(--font-primary);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--clr-text);
  margin-bottom: var(--space-4);
}

.funnel__checkboxes {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.funnel__checkbox {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-md);
  background: var(--clr-bg);
  font-family: var(--font-primary);
  font-size: var(--fs-base);
  font-weight: var(--fw-medium);
  color: var(--clr-heading);
  cursor: pointer;
  transition:
    border-color var(--dur-fast),
    background var(--dur-fast);
}

.funnel__checkbox:hover {
  border-color: var(--clr-brand);
  background: var(--clr-bg-subtle-2);
}

.funnel__checkbox input {
  display: none;
}

.funnel__checkbox-visual {
  flex-shrink: 0;
  width: 1.25rem;
  height: 1.25rem;
  border: 2px solid var(--clr-border);
  border-radius: var(--radius-sm);
  transition:
    border-color var(--dur-fast),
    background var(--dur-fast);
}

.funnel__checkbox input:checked + .funnel__checkbox-visual {
  border-color: var(--clr-brand);
  background: var(--clr-brand);
  box-shadow: inset 0 0 0 2px var(--clr-bg);
}

.funnel__continue-btn {
  margin-top: var(--space-5);
  width: 100%;
}

.funnel__continue-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

/* ---------- Transition screen (after Step 7) ------------------ */
.funnel__transition-text {
  font-family: var(--font-primary);
  font-size: var(--fs-md);
  color: var(--clr-text);
  line-height: var(--leading-normal);
  text-align: center;
  margin-bottom: var(--space-8);
}

.funnel__transition-action {
  display: flex;
  justify-content: center;
}

.funnel__calendar-btn {
  width: auto;
}

/* ---------- Calendar Step (Step 8) ----------------------------- */
.funnel__step--calendar {
  gap: 0;
}

.funnel__calendar-desc {
  font-family: var(--font-primary);
  font-size: var(--fs-md);
  color: var(--clr-text);
  line-height: var(--leading-normal);
  text-align: center;
  margin-bottom: var(--space-7);
}

/* ---- Date scroller (horizontal pill row) ---- */
.funnel__date-scroller {
  display: flex;
  flex-shrink: 0;
  overflow-x: auto;
  padding-bottom: var(--space-3);
  margin-bottom: var(--space-6);
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.funnel__date-scroller::-webkit-scrollbar {
  display: none;
}

.funnel__date-pill {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  margin-inline-end: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-lg);
  background: var(--clr-bg);
  cursor: pointer;
  white-space: nowrap;
  scroll-snap-align: start;
  transition:
    border-color var(--dur-fast),
    background var(--dur-fast),
    box-shadow var(--dur-fast);
  min-width: 4.5rem;
  min-height: 4.5rem;
}

.funnel__date-pill:last-child {
  margin-inline-end: 0;
}

.funnel__date-pill:hover {
  border-color: var(--clr-brand);
  background: var(--clr-bg-subtle-2);
}

.funnel__date-pill.is-selected {
  border-color: var(--clr-brand);
  background: var(--clr-bg-subtle-2);
  box-shadow: 0 0 0 1px var(--clr-brand);
}

.funnel__date-pill-day {
  font-family: var(--font-primary);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--clr-text);
  line-height: 1;
  white-space: nowrap;
  direction: rtl;
  unicode-bidi: plaintext;
}

.funnel__date-pill-num {
  font-family: var(--font-primary);
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
  color: var(--clr-heading);
  line-height: 1;
  white-space: nowrap;
  direction: rtl;
  unicode-bidi: plaintext;
}

.funnel__date-pill.is-selected .funnel__date-pill-day,
.funnel__date-pill.is-selected .funnel__date-pill-num {
  color: var(--clr-brand);
}

/* ---- Time slots grid ---- */
.funnel__timeslots {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-3);
  margin-bottom: var(--space-5);
}

.funnel__timeslots-placeholder,
.funnel__timeslots-loading-text,
.funnel__timeslots-error-text {
  grid-column: 1 / -1;
  font-family: var(--font-primary);
  font-size: var(--fs-sm);
  color: var(--clr-text);
  text-align: center;
  padding: var(--space-8) 0;
}

/* Individual time slot — reuses funnel__option visual pattern */
.funnel__timeslot {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  width: 100%;
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-lg);
  background: var(--clr-bg);
  color: var(--clr-heading);
  font-family: var(--font-primary);
  font-size: var(--fs-base);
  font-weight: var(--fw-medium);
  line-height: 1;
  cursor: pointer;
  text-align: center;
  transition:
    border-color var(--dur-fast),
    background var(--dur-fast),
    box-shadow var(--dur-fast);
}

.funnel__timeslot:hover:not(.funnel__timeslot--booked) {
  border-color: var(--clr-brand);
  background: var(--clr-bg-subtle-2);
}

.funnel__timeslot:focus-visible {
  outline: 2px solid var(--clr-brand);
  outline-offset: 2px;
}

/* Booked (disabled) state */
.funnel__timeslot--booked {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
  text-decoration: line-through;
}

/* Selected state — mirrors .funnel__option.is-selected */
.funnel__timeslot.is-selected {
  border-color: var(--clr-brand);
  background: var(--clr-bg-subtle-2);
  box-shadow: 0 0 0 1px var(--clr-brand);
}

/* ---- Loading spinner ---- */
.funnel__loader {
  width: 1.75rem;
  height: 1.75rem;
  border: 3px solid var(--clr-border);
  border-top-color: var(--clr-brand);
  border-radius: 50%;
  margin: 0 auto var(--space-3);
  animation: funnel-spin 0.7s linear infinite;
}

@keyframes funnel-spin {
  to { transform: rotate(360deg); }
}

/* ---- Error retry button ---- */
.funnel__timeslots-retry {
  display: inline-block;
  margin-top: var(--space-3);
  padding: var(--space-2) var(--space-5);
  border: 1px solid var(--clr-brand);
  border-radius: var(--radius-full);
  background: transparent;
  color: var(--clr-brand);
  font-family: var(--font-primary);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  cursor: pointer;
  transition:
    background var(--dur-fast),
    color var(--dur-fast);
}

.funnel__timeslots-retry:hover {
  background: var(--clr-brand);
  color: #fff;
}

/* ---- Confirm button area ---- */
.funnel__calendar-confirm {
  display: flex;
  justify-content: center;
  padding-top: var(--space-4);
}

.funnel__calendar-confirm-btn {
  width: auto;
}

.funnel__calendar-confirm-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

/* ---------- Responsive ----------------------------------------- */
@media (max-width: 30rem) { /* 480px */
  .funnel__heading {
    font-size: var(--fs-xl);
    margin-bottom: var(--space-5);
  }

  .funnel__option {
    padding: var(--space-3) var(--space-4);
    font-size: var(--fs-base);
  }

  .funnel__body {
    padding: var(--space-6) var(--container-pad) var(--space-5);
  }

  .funnel__multiselect {
    padding: var(--space-4);
  }

  .funnel__checkbox {
    padding: var(--space-2) var(--space-3);
    font-size: var(--fs-sm);
  }

  .funnel__transition-text {
    font-size: var(--fs-sm);
  }

  .funnel__calendar-desc {
    font-size: var(--fs-sm);
    margin-bottom: var(--space-5);
  }

  .funnel__date-scroller {
    margin-bottom: var(--space-5);
  }

  .funnel__date-pill {
    margin-inline-end: var(--space-2);
    padding: var(--space-2) var(--space-3);
    min-width: 3.75rem;
    min-height: 4rem;
  }

  .funnel__date-pill-num {
    font-size: var(--fs-base);
  }

  .funnel__timeslots {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-2);
  }

  .funnel__timeslot {
    padding: var(--space-2) var(--space-3);
    font-size: var(--fs-sm);
  }
}

/* ============================================================
   CONTACT STEP (Step 9) — first text inputs in the funnel
   ----------------------------------------------------------------
   Clean, minimal inputs: white background, --clr-border by
   default, brand border on focus. Reuses funnel option rows for
   the contact-preference selector.
   ============================================================ */
.funnel__contact-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.funnel__field {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.funnel__field-label {
  font-family: var(--font-primary);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--clr-text);
}

.funnel__field-optional {
  font-weight: var(--fw-regular);
  opacity: 0.8;
}

.funnel__input,
.funnel__textarea {
  width: 100%;
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-md);
  background: var(--clr-bg);
  color: var(--clr-heading);
  font-family: var(--font-primary);
  font-size: var(--fs-base);
  line-height: var(--leading-snug);
  transition:
    border-color var(--dur-fast),
    box-shadow var(--dur-fast),
    background var(--dur-fast);
}

.funnel__textarea {
  resize: vertical;
  min-height: 5.5rem;
}

.funnel__input::placeholder,
.funnel__textarea::placeholder {
  color: var(--clr-text);
  opacity: 1;
}

.funnel__input:focus-visible,
.funnel__textarea:focus-visible {
  outline: none;
  border-color: var(--clr-brand);
  box-shadow: 0 0 0 3px rgba(25, 58, 109, 0.12);
}

.funnel__input.is-invalid,
.funnel__textarea.is-invalid {
  border-color: #dc2626;
}

.funnel__input.is-invalid:focus-visible,
.funnel__textarea.is-invalid:focus-visible {
  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.12);
}

.funnel__input.is-valid,
.funnel__textarea.is-valid {
  border-color: #16a34a;
}

.funnel__input.is-valid:focus-visible,
.funnel__textarea.is-valid:focus-visible {
  box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.12);
}

.funnel__field-error {
  font-family: var(--font-primary);
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  color: #b91c1c;
}

.funnel__field-error[hidden] {
  display: none;
}

/* Preference selector — two option rows side by side */
.funnel__options--inline {
  flex-direction: row;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.funnel__step--contact .funnel__options--inline .funnel__option {
  flex: 1 1 10rem;
  justify-content: flex-start;
}

/* Submit button */
.funnel__submit-btn {
  width: 100%;
  margin-top: var(--space-2);
}

.funnel__submit-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

.funnel__submit-btn.is-loading {
  opacity: 0.75;
  pointer-events: none;
}

/* Global (non-field) error box on the contact step */
.funnel__contact-error {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-1);
  padding: var(--space-3) var(--space-4);
  border: 1px solid #fecaca;
  border-radius: var(--radius-md);
  background: #fef2f2;
  font-family: var(--font-primary);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: #b91c1c;
  text-align: center;
}

.funnel__contact-error[hidden] {
  display: none;
}

.funnel__contact-rebook {
  display: inline-block;
  padding: var(--space-2) var(--space-4);
  border: 1px solid var(--clr-brand);
  border-radius: var(--radius-full);
  background: transparent;
  color: var(--clr-brand);
  font-family: var(--font-primary);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  cursor: pointer;
  transition:
    background var(--dur-fast),
    color var(--dur-fast);
}

.funnel__contact-rebook:hover {
  background: var(--clr-brand);
  color: #fff;
}

.funnel__contact-rebook[hidden] {
  display: none;
}

/* ============================================================
   SUCCESS STEP (Step 10) — terminal confirmation screen
   ============================================================ */
.funnel__step--success {
  align-items: center;
  justify-content: center;
  text-align: center;
}

.funnel__success-details {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-bottom: var(--space-6);
}

.funnel__success-line {
  font-family: var(--font-primary);
  font-size: var(--fs-md);
  line-height: var(--leading-normal);
}

.funnel__success-label {
  color: var(--clr-text);
  font-weight: var(--fw-medium);
}

.funnel__success-value {
  color: var(--clr-heading);
  font-weight: var(--fw-bold);
}

.funnel__success-text {
  font-family: var(--font-primary);
  font-size: var(--fs-md);
  color: var(--clr-text);
  line-height: var(--leading-normal);
  margin-bottom: var(--space-8);
}

.funnel__success-action {
  display: flex;
  justify-content: center;
}

.funnel__secondary-btn {
  background: transparent;
  border: 1px solid var(--clr-brand);
  color: var(--clr-brand);
  box-shadow: none;
}

.funnel__secondary-btn:hover {
  background: var(--clr-brand);
  color: #fff;
  box-shadow: var(--shadow-sm);
}

/* Hide step counter + progress on the terminal success screen */
.funnel--complete .funnel__step-count,
.funnel--complete .funnel__progress {
  display: none;
}

/* ---------- Responsive (contact + success steps) ------------ */
@media (max-width: 30rem) { /* 480px */
  .funnel__input,
  .funnel__textarea {
    padding: var(--space-3);
  }

  .funnel__contact-form {
    gap: var(--space-4);
  }

  .funnel__step--contact .funnel__options--inline .funnel__option {
    flex: 1 1 100%;
  }

  .funnel__success-line {
    font-size: var(--fs-sm);
  }
}