/* ==========================================================================
   how-i-work.css — How I Work page (كيف أعمل)
   --------------------------------------------------------------------------
   Page-scoped styles built on the global token system + shared components
   (nav, footer, buttons, glass, reveals). Every section uses a layout NOT
   used on Home or Programs (no-redundancy rule), in the same calm/premium
   language. Backgrounds alternate light ↔ deep so no two adjacent sections
   share a flat fill.
   ========================================================================== */

/* ==========================================================================
   SECTION 1 — HERO (calm asymmetric split + breathing "calm pulse")
   ========================================================================== */
.hiw-hero {
  position: relative;
  background:
    radial-gradient(60% 55% at 90% 2%, #efe7f4 0%, rgba(239, 231, 244, 0) 55%),
    radial-gradient(58% 60% at 2% 96%, #eef0fb 0%, rgba(238, 240, 251, 0) 55%),
    var(--grad-field);
  padding-block: clamp(2.5rem, 1.5rem + 5vw, 5.5rem) clamp(3.5rem, 2.5rem + 5vw, 6.5rem);
  overflow: hidden;
}
.hiw-hero__blob--1 {
  inset-block-start: -140px;
  inset-inline-end: -100px;
  inline-size: 440px;
  block-size: 440px;
  background: radial-gradient(circle at 30% 30%, #e6d8ea, rgba(230, 216, 234, 0));
}
.hiw-hero__blob--2 {
  inset-block-end: -170px;
  inset-inline-start: -130px;
  inline-size: 400px;
  block-size: 400px;
  background: radial-gradient(circle at 50% 50%, #cfd6f5, rgba(207, 214, 245, 0));
  opacity: 0.5;
}

/* Two-column: copy + media. Tablet keeps two columns; mobile stacks. */
.hiw-hero__inner {
  position: relative;
  z-index: 1;
  display: grid;
  gap: clamp(2.5rem, 1.4rem + 4vw, 4rem);
  align-items: center;
}
@media (min-width: 768px) {
  .hiw-hero__inner { grid-template-columns: 1.05fr 0.95fr; }
}

/* --- Copy column --- */
.hiw-hero__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.hiw-hero__title {
  font-size: clamp(1.95rem, 1.35rem + 2.6vw, 3rem);
  font-weight: var(--fw-extrabold);
  color: var(--color-heading);
  line-height: 1.32;
  letter-spacing: -0.01em;
  max-inline-size: 17ch;
}
.hiw-hero__lead {
  margin-block-start: var(--space-md);
  max-inline-size: 52ch;
}
.hiw-hero__lead p {
  font-size: var(--fs-lead);
  color: var(--color-body);
  line-height: var(--lh-body);
}
.hiw-hero__cta { margin-block-start: var(--space-lg); }

/* --- Media column --- */
.hiw-hero__media {
  position: relative;
  justify-self: center;
  inline-size: 100%;
  max-inline-size: 540px;
}
.hiw-hero__frame {
  position: relative;
  margin: 0;
  border-radius: var(--radius-xl);
  overflow: hidden;
  aspect-ratio: 5 / 6;             /* taller portrait frame — distinct from Programs' 4:3 */
  border: 6px solid var(--color-surface);
  box-shadow: var(--shadow-deep);
  background: var(--color-secondary-200);
}
.hiw-hero__frame img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  object-position: 50% 35%;
}
/* Brand tint so the photo harmonizes with the palette. */
.hiw-hero__frame-tint {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(160deg, rgba(30, 32, 83, 0.30) 0%, rgba(30, 32, 83, 0) 46%),
    linear-gradient(0deg, rgba(230, 216, 234, 0.55) 0%, rgba(230, 216, 234, 0) 40%);
}

/* --- Breathing "calm pulse" badge (overlaps the frame, inline-start/top) --- */
.hiw-hero__pulse {
  position: absolute;
  inset-block-start: clamp(-10px, -1vw, -6px);
  inset-inline-start: clamp(-14px, -1.4vw, -8px);
  inline-size: 96px;
  block-size: 96px;
  display: grid;
  place-items: center;
  z-index: 2;
}
.hiw-hero__pulse-ring {
  position: absolute;
  inset: 0;
  margin: auto;
  inline-size: 44px;
  block-size: 44px;
  border-radius: 50%;
  border: 1.5px solid rgba(var(--color-accent-rgb), 0.55);
  /* Slow, deliberate "breath" — three staggered rings expanding & fading. */
  animation: hiw-breathe 5.5s var(--ease-out) infinite;
  will-change: transform, opacity;
}
.hiw-hero__pulse-ring:nth-child(2) { animation-delay: 1.8s; }
.hiw-hero__pulse-ring:nth-child(3) { animation-delay: 3.6s; }
.hiw-hero__pulse-core {
  position: relative;
  display: grid;
  place-items: center;
  inline-size: 46px;
  block-size: 46px;
  border-radius: 50%;
  background: var(--color-surface);
  color: var(--color-accent);
  box-shadow: var(--shadow-raised);
}
@keyframes hiw-breathe {
  0%   { transform: scale(0.7); opacity: 0.85; }
  70%  { transform: scale(2.0); opacity: 0; }
  100% { transform: scale(2.0); opacity: 0; }
}

/* --- Steady gently-rising trend chip (glass), inline-end/bottom --- */
.hiw-hero__chip {
  position: absolute;
  inset-block-end: clamp(14px, 2vw, 26px);
  inset-inline-end: clamp(-14px, -1.4vw, -8px);
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  padding-block: 0.6rem;
  padding-inline: 0.85rem;
  border-radius: var(--radius-lg);
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(var(--glass-blur));
  backdrop-filter: blur(var(--glass-blur));
  border: 1px solid var(--glass-border);
  box-shadow: var(--shadow-raised);
}
.hiw-hero__chip-svg { display: block; flex-shrink: 0; }
.hiw-hero__chip-line {
  fill: none;
  stroke: #3aa76d;                 /* calm green — steady growth, never alarm-red */
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.hiw-hero__chip-dot { fill: #3aa76d; }
.hiw-hero__chip-label {
  font-size: var(--fs-small);
  font-weight: var(--fw-bold);
  color: var(--color-primary);
  white-space: nowrap;
}

/* Mobile: center the hero copy (per responsive guidelines), shrink badges. */
@media (max-width: 767px) {
  .hiw-hero__content { align-items: center; text-align: center; }
  .hiw-hero__title,
  .hiw-hero__lead { margin-inline: auto; }
  .hiw-hero__cta { justify-content: center; }
  .hiw-hero__media { max-inline-size: 420px; }
  .hiw-hero__pulse { inline-size: 80px; block-size: 80px; }
}

/* Respect reduced-motion: still the breath, keep the calm composition. */
@media (prefers-reduced-motion: reduce) {
  .hiw-hero__pulse-ring { animation: none; opacity: 0.4; transform: scale(1.4); }
}

/* ==========================================================================
   SECTION 2 — MYTH → REALITY  ("مش اللي بتشوفه بالأفلام")
   --------------------------------------------------------------------------
   Distinct background from the hero: a warmer lavender wash. Two-column
   editorial — copy at the inline-start, layered visual at the inline-end —
   the inverse arrangement of the hero, for varied flow.
   ========================================================================== */
.myth {
  background:
    radial-gradient(70% 60% at 8% 0%, #f1eaf6 0%, rgba(241, 234, 246, 0) 55%),
    var(--grad-field);
}
.myth__blob {
  inset-block-start: -120px;
  inset-inline-end: -120px;
  inline-size: 380px;
  block-size: 380px;
  background: radial-gradient(circle at 50% 50%, #e0d4f0, rgba(224, 212, 240, 0));
  opacity: 0.5;
}

.myth__inner {
  display: grid;
  gap: clamp(2.5rem, 1.4rem + 4vw, 4.5rem);
  align-items: center;
}
/* Two columns from tablet up; only true mobile (<600px) stacks. */
@media (min-width: 600px) {
  .myth__inner { grid-template-columns: 1.05fr 0.95fr; }
}

/* --- Copy --- */
.myth__title {
  text-align: start;
  max-inline-size: 20ch;
  line-height: 1.34;
}
.myth__text {
  margin-block-start: var(--space-lg);
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  max-inline-size: 56ch;
}
.myth__text p {
  font-size: var(--fs-body);
  color: var(--color-body);
  line-height: var(--lh-body);
}

/* --- Layered visual --- */
.myth__visual {
  position: relative;
  inline-size: 100%;
  max-inline-size: 540px;
  justify-self: center;
  /* Reserve room for the offset back layer so nothing clips. */
  padding-block-start: clamp(2.5rem, 1.5rem + 4vw, 4.5rem);
  padding-inline-end: clamp(1.5rem, 1rem + 2vw, 3rem);
}
@media (min-width: 600px) {
  .myth__visual { order: -1; }   /* place the visual at the inline-start (RTL: right) */
}

.myth__shot {
  margin: 0;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 5px solid var(--color-surface);
  background: var(--color-secondary-200);
}
.myth__shot img {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}

/* The "movies" stereotype: dimmed, desaturated, red-tinted, tilted back. */
.myth__shot--stereotype {
  position: absolute;
  inset-block-start: 0;
  inset-inline-end: 0;
  inline-size: 64%;
  aspect-ratio: 3 / 2;
  z-index: 1;
  transform: rotate(-4deg);
  box-shadow: var(--shadow-raised);
}
.myth__shot--stereotype img {
  filter: grayscale(0.7) contrast(0.95) brightness(0.9);
}
.myth__shot-tint {
  position: absolute;
  inset: 0;
  pointer-events: none;
  /* Cold red wash + dark veil — the anxiety of the "red screens". */
  background:
    linear-gradient(160deg, rgba(226, 106, 104, 0.45) 0%, rgba(30, 32, 83, 0.35) 100%);
  mix-blend-mode: multiply;
}

/* The calm reality: full-color, in front, gently tilted the other way. */
.myth__shot--reality {
  position: relative;
  inline-size: 78%;
  margin-block-start: clamp(3rem, 2rem + 4vw, 5rem);
  aspect-ratio: 4 / 3;
  z-index: 2;
  transform: rotate(2deg);
  box-shadow: var(--shadow-deep);
}

/* Small icon tags clarifying each layer (decorative, icon-only). */
.myth__tag {
  position: absolute;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 38px;
  block-size: 38px;
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-raised);
  z-index: 3;
}
.myth__tag--stereotype {
  inset-block-start: 10px;
  inset-inline-start: 10px;
  background: rgba(30, 32, 83, 0.82);
  color: var(--color-accent-200);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}
.myth__tag--reality {
  inset-block-end: 12px;
  inset-inline-end: 12px;
  background: #fff;
  color: #3aa76d;
}

/* Mobile only (<600px): center copy, keep the layered visual compact. */
@media (max-width: 599px) {
  .myth__title,
  .myth__text { margin-inline: auto; }
  .myth__visual { max-inline-size: 440px; }
  .myth__title { text-align: center; }
  .myth__text { text-align: start; }   /* long-form reading stays start-aligned */
}

/* ==========================================================================
   SECTION 3 — THREE IDEAS  ("ثلاث أفكار بسيطة")
   --------------------------------------------------------------------------
   Alternating editorial feature rows. Background shifts to a clean,
   near-white with cool accents — distinct from §2's lavender wash.
   ========================================================================== */
.ideas {
  background:
    radial-gradient(60% 50% at 95% 8%, #eaf0fb 0%, rgba(234, 240, 251, 0) 55%),
    var(--grad-field);
}
.ideas__blob--1 {
  inset-block-start: 8%;
  inset-inline-start: -130px;
  inline-size: 360px;
  block-size: 360px;
  background: radial-gradient(circle at 50% 50%, #d7e0f7, rgba(215, 224, 247, 0));
  opacity: 0.5;
}
.ideas__blob--2 {
  inset-block-end: 4%;
  inset-inline-end: -120px;
  inline-size: 340px;
  block-size: 340px;
  background: radial-gradient(circle at 50% 50%, var(--color-accent-200), rgba(var(--color-accent-rgb), 0));
  opacity: 0.35;
}

/* --- Slider shell: one full row per slide on every breakpoint --- */
.ideas__slider { position: relative; }
.ideas__viewport { overflow: hidden; }
.ideas__track {
  display: flex;
  gap: 0;
  will-change: transform;
}

/* --- Feature row = one slide --- */
.idea {
  flex: 0 0 100%;
  inline-size: 100%;
  display: grid;
  gap: clamp(1.5rem, 1rem + 3vw, 3.5rem);
  align-items: center;
  padding-block: var(--space-xs);
  padding-inline: clamp(0.25rem, 0.1rem + 1vw, 1.75rem);
}
/* Two columns from tablet up — only true mobile (<600px) stacks, per the
   "no tablet wrapping" rule. */
@media (min-width: 600px) {
  .idea { grid-template-columns: 0.95fr 1.05fr; }
  /* Reverse rows: swap the media to the inline-end side. */
  .idea--reverse .idea__media { order: 2; }
}

/* --- Pagination dots (active on all breakpoints for this slider) --- */
.ideas__dots {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 6px;
  margin-block-start: clamp(1.75rem, 1rem + 2vw, 2.75rem);
}
.ideas__dots .slider-dot {
  inline-size: 24px;
  block-size: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-pill);
  cursor: pointer;
}
.ideas__dots .slider-dot::before {
  content: "";
  inline-size: 8px;
  block-size: 8px;
  border-radius: var(--radius-pill);
  background: var(--color-secondary-400);
  transition: inline-size var(--dur-slow) var(--ease-out),
              background-color var(--dur-slow) var(--ease-out);
}
.ideas__dots .slider-dot.is-active::before {
  inline-size: 26px;
  background: var(--color-accent);
}

/* --- No-JS / no-GSAP fallback: native horizontal scroll-snap swipe --- */
.ideas__slider:not(.slider-ready) .ideas__viewport {
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.ideas__slider:not(.slider-ready) .ideas__viewport::-webkit-scrollbar { display: none; }
.ideas__slider:not(.slider-ready) .idea { scroll-snap-align: center; }

@media (prefers-reduced-motion: reduce) {
  .ideas__dots .slider-dot::before { transition: none; }
}

/* --- Body --- */
.idea__body { position: relative; }
.idea__index {
  display: inline-block;
  font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem);
  font-weight: var(--fw-extrabold);
  line-height: 1;
  color: var(--color-accent);
  opacity: 0.55;
  letter-spacing: 0.02em;
  margin-block-end: var(--space-2xs);
}
.idea__title {
  font-size: var(--fs-h3);
  font-weight: var(--fw-bold);
  color: var(--color-heading);
  line-height: var(--lh-snug);
  margin-block-end: var(--space-sm);
}
.idea__body p {
  font-size: var(--fs-body);
  color: var(--color-body);
  line-height: var(--lh-body);
  max-inline-size: 56ch;
}
.idea__body p + p { margin-block-start: var(--space-sm); }

/* --- Media / art card --- */
.idea__media {
  justify-self: center;
  inline-size: 100%;
  max-inline-size: 420px;
}
.idea__art {
  position: relative;
  display: grid;
  place-items: center;
  padding: clamp(1.25rem, 0.8rem + 2vw, 2rem);
  border-radius: var(--radius-xl);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-soft);
  overflow: hidden;
}
.idea__art svg {
  inline-size: 100%;
  block-size: auto;
}
/* Subtle soft glow behind each scene so the cards aren't flat. */
.idea__art::before {
  content: "";
  position: absolute;
  inset-block-start: -40%;
  inset-inline-end: -30%;
  inline-size: 70%;
  block-size: 70%;
  background: radial-gradient(circle, rgba(230, 216, 234, 0.5), rgba(230, 216, 234, 0));
  filter: blur(10px);
  pointer-events: none;
}

/* --- SVG scene palettes --- */
/* Idea 1: index basket */
.idea1-lines { color: var(--color-secondary-400); }
.idea1-dot {
  fill: var(--color-secondary);
  stroke: var(--color-primary-300);
  stroke-width: 1.5;
}
.idea1-card rect:first-child {
  fill: #fff;
  stroke: var(--color-primary);
  stroke-width: 2;
}
.idea1-bar { fill: var(--color-accent); }
.idea1-bar:nth-of-type(odd) { fill: var(--color-primary); }

/* Idea 2: monthly habit */
.idea2-cal rect { fill: #fff; stroke: var(--color-primary); stroke-width: 2; }
.idea2-cal line { color: var(--color-primary); }
.idea2-tick { fill: var(--color-accent); }
.idea2-col { fill: var(--color-secondary); }
.idea2-col:last-child { fill: var(--color-primary); }
.idea2-coin {
  fill: #ffd98a;
  stroke: #e0a93c;
  stroke-width: 1.5;
}

/* Idea 3: snowball compounding */
.idea3-slope { color: var(--color-secondary-400); }
.idea3-curve { color: var(--color-accent); stroke-dasharray: 1; }
.idea3-ball {
  fill: #fff;
  stroke: var(--color-primary);
  stroke-width: 2;
}
.idea3-ball:last-child { fill: var(--color-secondary); }

/* The drawn lines use the pathLength="1" trick for clean stroke reveals. */
.idea1-line { stroke-dasharray: 1; }

/* Mobile only (<600px): stack + center; paragraphs stay start-aligned. */
@media (max-width: 599px) {
  .idea__body { text-align: center; }
  .idea__index,
  .idea__title { text-align: center; }
  .idea__body p { margin-inline: auto; text-align: start; }
  .idea__media { max-inline-size: 340px; }
}

/* ==========================================================================
   SECTION 4 — HONESTY FIRST  ("الصراحة أولاً")
   --------------------------------------------------------------------------
   Immersive deep-tone band — the tonal contrast against the light §3. A warm
   lifestyle photo with a gentle parallax sits behind a brand overlay; the
   candid copy rests on the dark inline-start side.
   ========================================================================== */
.honesty {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  color: var(--color-on-dark);
  background: var(--color-primary-700);   /* fallback before the image paints */
  padding-block: clamp(4rem, 3rem + 6vw, 7.5rem);
}

/* --- Background media + soft overlay --- */
.honesty__media {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
}
.honesty__media img {
  position: absolute;
  inset-inline: 0;
  inset-block-start: -15%;
  inline-size: 100%;
  block-size: 130%;           /* extra height = headroom for the parallax drift */
  object-fit: cover;
  object-position: 50% 40%;
  will-change: transform;
}
.honesty__overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  /* Opaque on the inline-start (RTL: right) where the copy lives, fading to
     reveal the warm photo toward the inline-end. */
  background:
    linear-gradient(to left, rgba(21, 22, 59, 0.94) 0%, rgba(21, 22, 59, 0.78) 42%, rgba(30, 32, 83, 0.4) 100%),
    linear-gradient(0deg, rgba(21, 22, 59, 0.5) 0%, rgba(21, 22, 59, 0) 45%);
}
[dir="ltr"] .honesty__overlay {
  background:
    linear-gradient(to right, rgba(21, 22, 59, 0.94) 0%, rgba(21, 22, 59, 0.78) 42%, rgba(30, 32, 83, 0.4) 100%),
    linear-gradient(0deg, rgba(21, 22, 59, 0.5) 0%, rgba(21, 22, 59, 0) 45%);
}

/* --- Content --- */
.honesty__content {
  max-inline-size: 60ch;
}
@media (min-width: 768px) {
  .honesty__content { max-inline-size: 52ch; }
}
.honesty__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 52px;
  block-size: 52px;
  border-radius: var(--radius-pill);
  color: var(--color-secondary);
  background: rgba(255, 255, 255, 0.10);
  border: 1px solid rgba(255, 255, 255, 0.22);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  margin-block-end: var(--space-md);
}
.honesty__title {
  font-size: var(--fs-h2);
  font-weight: var(--fw-bold);
  color: #fff;
  line-height: var(--lh-snug);
  max-inline-size: 24ch;
}
.honesty__text {
  margin-block-start: var(--space-lg);
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}
.honesty__text p {
  font-size: var(--fs-body);
  color: var(--color-on-dark-muted);
  line-height: var(--lh-body);
}
/* The closing line — the calm-vs-fearful distinction — lifted in weight/color. */
.honesty__text-strong {
  position: relative;
  color: #fff !important;
  font-weight: var(--fw-semibold);
  padding-inline-start: var(--space-md);
  border-inline-start: 3px solid var(--color-accent);
}

/* Mobile: center the heading/badge; keep the long-form copy start-aligned.
   Use a near-uniform veil so full-width copy stays high-contrast. */
@media (max-width: 599px) {
  .honesty__content { margin-inline: auto; text-align: center; }
  .honesty__badge { margin-inline: auto; }
  .honesty__title { margin-inline: auto; }
  .honesty__text-strong { text-align: start; }
  .honesty__overlay,
  [dir="ltr"] .honesty__overlay {
    background: linear-gradient(0deg, rgba(21, 22, 59, 0.92) 0%, rgba(21, 22, 59, 0.8) 100%);
  }
}

/* Reduced-motion: the parallax helper no-ops in animations.js; image rests. */

/* ==========================================================================
   SECTION 5 — THE JOURNEY  ("رحلتك معي خطوة بخطوة")  · signature
   --------------------------------------------------------------------------
   overflow:VISIBLE host (so position:sticky works); decorative blobs are
   isolated in .journey__decor (its own overflow:hidden clip layer, a sibling
   of the sticky stage — never an ancestor).
   ========================================================================== */
.journey {
  position: relative;
  overflow: visible;            /* REQUIRED: any clipping ancestor disables sticky */
  padding-block: var(--space-section);
  background:
    radial-gradient(55% 45% at 6% 12%, #f1ecf8 0%, rgba(241, 236, 248, 0) 55%),
    var(--grad-field);
}
.journey__decor {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;             /* clips the blobs without touching the sticky stage */
  pointer-events: none;
}
.journey__blob--1 {
  inset-block-start: 12%;
  inset-inline-end: -120px;
  inline-size: 360px;
  block-size: 360px;
  background: radial-gradient(circle at 50% 50%, #e2d6f1, rgba(226, 214, 241, 0));
  opacity: 0.5;
}
.journey__blob--2 {
  inset-block-end: 6%;
  inset-inline-start: -130px;
  inline-size: 340px;
  block-size: 340px;
  background: radial-gradient(circle at 50% 50%, var(--color-accent-200), rgba(var(--color-accent-rgb), 0));
  opacity: 0.32;
}
.journey .container { position: relative; z-index: 1; }

.journey__layout {
  display: grid;
  gap: clamp(1.5rem, 1rem + 3vw, 3.5rem);
}
@media (min-width: 768px) {
  /* Stretch (default) so the aside is as tall as the steps column — giving the
     position:sticky stage room to travel. */
  .journey__layout { grid-template-columns: 0.8fr 1.2fr; align-items: stretch; }
}

/* --- Sticky instrument panel --- */
.journey__aside { display: none; }
@media (min-width: 768px) {
  .journey__aside { display: block; }
}
.journey__stage {
  position: sticky;
  inset-block-start: clamp(92px, 8vh, 120px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-md);
  block-size: clamp(360px, 56vh, 520px);
  padding: var(--space-lg) var(--space-md);
  border-radius: var(--radius-xl);
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(var(--glass-blur));
  backdrop-filter: blur(var(--glass-blur));
  border: 1px solid var(--glass-border);
  box-shadow: var(--shadow-soft);
}
.journey__count {
  display: flex;
  align-items: baseline;
  gap: 0.25rem;
  color: var(--color-muted);
  font-weight: var(--fw-semibold);
}
.journey__count strong {
  font-size: clamp(2.25rem, 1.6rem + 2vw, 3.25rem);
  font-weight: var(--fw-extrabold);
  color: var(--color-accent);
  line-height: 1;
}
/* The spine: line + growing fill + step ticks + traveling orb. */
.journey__spine {
  position: relative;
  flex: 1;
  inline-size: 22px;
  min-block-size: 160px;
}
.journey__spine-line,
.journey__spine-fill {
  position: absolute;
  inset-inline-start: 50%;
  transform: translateX(-50%);
  inline-size: 3px;
  border-radius: var(--radius-pill);
}
.journey__spine-line {
  inset-block: 0;
  background: var(--color-secondary-400);
  opacity: 0.6;
}
.journey__spine-fill {
  inset-block-start: 0;
  block-size: 100%;
  background: linear-gradient(180deg, var(--color-accent), var(--color-primary));
  transform: translateX(-50%) scaleY(1);   /* static full when no JS */
  transform-origin: top center;
}
.journey--live .journey__spine-fill { transform: translateX(-50%) scaleY(0); }
.journey__tick {
  position: absolute;
  inset-inline-start: 50%;
  inline-size: 9px;
  block-size: 9px;
  border-radius: 50%;
  background: var(--color-surface);
  border: 2px solid var(--color-secondary-400);
  transform: translate(-50%, -50%);
}
.journey__orb {
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 50%;
  inline-size: 18px;
  block-size: 18px;
  margin-inline-start: -9px;
  margin-block-start: -9px;
  border-radius: 50%;
  background: var(--color-accent);
  box-shadow: 0 0 0 5px rgba(var(--color-accent-rgb), 0.22), var(--shadow-raised);
  opacity: 0;                  /* shown only in live mode */
}
.journey--live .journey__orb { opacity: 1; }
.journey__stage-label {
  font-size: var(--fs-h4);
  font-weight: var(--fw-bold);
  color: var(--color-heading);
  text-align: center;
  min-block-size: 2.6em;
}

/* --- Steps in flow --- */
.journey__steps {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: clamp(1.75rem, 1rem + 3vw, 3rem);
}
.jstep {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-md);
  align-items: start;
}
.jstep__marker {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 52px;
  block-size: 52px;
  flex-shrink: 0;
  border-radius: var(--radius-pill);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  color: var(--color-primary);
  box-shadow: var(--shadow-soft);
  transition: background-color var(--dur) var(--ease-out),
              color var(--dur) var(--ease-out),
              transform var(--dur) var(--ease-out),
              box-shadow var(--dur) var(--ease-out);
}
.jstep__title {
  font-size: var(--fs-h3);
  font-weight: var(--fw-bold);
  color: var(--color-heading);
  line-height: var(--lh-snug);
  margin-block-end: var(--space-sm);
}
.jstep__body p {
  font-size: var(--fs-body);
  color: var(--color-body);
  line-height: var(--lh-body);
  max-inline-size: 60ch;
}
.jstep__body p + p { margin-block-start: var(--space-sm); }

/* Active step (set live by JS): marker fills with accent and lifts. */
.jstep.is-active .jstep__marker {
  background: var(--color-accent);
  color: #fff;
  transform: scale(1.08);
  box-shadow: var(--shadow-accent);
}

/* --- Mobile (<768px): static vertical timeline (no sticky panel) --- */
@media (max-width: 767px) {
  /* Connect the markers with a continuous line for a clean timeline. */
  .jstep { position: relative; }
  .jstep:not(:last-child) .jstep__marker::after {
    content: "";
    position: absolute;
    inset-block-start: 52px;
    inset-block-end: calc(-1 * clamp(1.75rem, 1rem + 3vw, 3rem));
    inset-inline-start: 26px;
    inline-size: 2px;
    background: var(--color-secondary-400);
    opacity: 0.55;
    transform: translateX(-50%);
  }
}

/* ==========================================================================
   SECTION 6 — WHAT MAKES IT DIFFERENT  ("بعلّمك كيف تفكر")
   --------------------------------------------------------------------------
   Two-card mindset contrast joined by a directional arrow. Background shifts
   to a cool, near-white tone — distinct from §5's lavender.
   ========================================================================== */
.think {
  background:
    radial-gradient(55% 45% at 92% 6%, #eaeef7 0%, rgba(234, 238, 247, 0) 55%),
    var(--grad-field);
}
.think__blob {
  inset-block-start: -110px;
  inset-inline-start: -110px;
  inline-size: 340px;
  block-size: 340px;
  background: radial-gradient(circle at 50% 50%, #dfe4f4, rgba(223, 228, 244, 0));
  opacity: 0.5;
}

.think__contrast {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-md);
}
@media (min-width: 600px) {
  .think__contrast {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: stretch;
    gap: clamp(1rem, 0.5rem + 1.5vw, 2rem);
  }
}

/* --- Contrast cards --- */
.think-card {
  inline-size: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  padding: clamp(1.5rem, 1rem + 1.6vw, 2.25rem);
  border-radius: var(--radius-lg);
}
.think-card p {
  font-size: var(--fs-body);
  color: var(--color-body);
  line-height: var(--lh-body);
}
.think-card__head {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}
.think-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 46px;
  block-size: 46px;
  flex-shrink: 0;
  border-radius: var(--radius-pill);
}
.think-card__tag {
  font-size: var(--fs-h4);
  font-weight: var(--fw-bold);
}

/* Quick-answer card: muted, lower-key — the anxious mindset. */
.think-card--quick {
  background: rgba(118, 122, 147, 0.07);
  border: 1px solid var(--color-border);
}
.think-card--quick .think-card__icon {
  background: rgba(118, 122, 147, 0.14);
  color: var(--color-muted);
}
.think-card--quick .think-card__tag { color: var(--color-muted); }
.think-card--quick p { color: var(--color-muted); }

/* Understanding card: elevated glass with an accent edge — the calm mindset. */
.think-card--deep {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-block-start: 3px solid var(--color-accent);
  box-shadow: var(--shadow-raised);
}
.think-card--deep .think-card__icon {
  background: var(--color-accent-200);
  color: var(--color-accent-600);
}
.think-card--deep .think-card__tag { color: var(--color-primary); }

/* --- Directional arrow between the two mindsets --- */
.think__arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: center;
  inline-size: 44px;
  block-size: 44px;
  flex-shrink: 0;
  border-radius: var(--radius-pill);
  background: var(--color-surface);
  color: var(--color-accent);
  box-shadow: var(--shadow-soft);
  border: 1px solid var(--color-border);
}
/* Mobile (stacked): point the arrow downward (quick → deep). */
@media (max-width: 599px) {
  .think__arrow { transform: rotate(-90deg); }
}

/* --- Closing statement --- */
.think__close {
  margin-block-start: clamp(2rem, 1.25rem + 2vw, 3rem);
  margin-inline: auto;
  max-inline-size: 64ch;
  text-align: center;
  font-size: var(--fs-lead);
  font-weight: var(--fw-medium);
  color: var(--color-heading);
  line-height: var(--lh-body);
  padding-block-start: var(--space-md);
  border-block-start: 2px solid var(--color-secondary-400);
}

/* ==========================================================================
   SECTION 7 — FAQ  ("أسئلة بتدور ببالك")
   --------------------------------------------------------------------------
   Shared accordion component (toggled by core/main.js). Replicated here since
   the page loads only how-i-work.css. Smooth open via grid-template-rows
   0fr → 1fr (animatable). Background = soft lavender, distinct from §6.
   ========================================================================== */
.faq {
  background: var(--grad-field);
}
.faq__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}
.faq-item {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
  overflow: hidden;
  transition: box-shadow var(--dur) var(--ease-out);
}
.faq-item.is-open { box-shadow: var(--shadow-raised); }
.faq-item h3 { margin: 0; }
.faq-item__head {
  inline-size: 100%;
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: clamp(1rem, 0.85rem + 0.6vw, 1.35rem) clamp(1rem, 0.85rem + 0.8vw, 1.5rem);
  text-align: start;
  font-family: var(--font-primary);
  color: var(--color-heading);
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-out);
}
.faq-item__head:hover { background-color: rgba(30, 32, 83, 0.025); }
.faq-item__q {
  flex: 1;
  font-size: var(--fs-h4);
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
}
.faq-item__chevron {
  flex-shrink: 0;
  display: inline-flex;
  color: var(--color-muted);
  transition: transform var(--dur) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.faq-item.is-open .faq-item__chevron { transform: rotate(180deg); color: var(--color-accent); }
.faq-item__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--dur-slow) var(--ease-out);
}
.faq-item.is-open .faq-item__panel { grid-template-rows: 1fr; }
/* Inner wrapper MUST stay padding-free: any padding here gives the grid item a
   non-zero minimum height, so the 0fr collapse can't reach zero and the answer
   leaks while closed. Padding lives on the paragraphs instead (overflow:hidden
   makes the inner's min contribution 0 → clean collapse). */
.faq-item__panel-inner { overflow: hidden; }
.faq-item__panel-inner p {
  padding: 0 clamp(1rem, 0.85rem + 0.8vw, 1.5rem) clamp(1.1rem, 0.9rem + 0.8vw, 1.5rem);
  font-size: var(--fs-body);
  color: var(--color-body);
  line-height: var(--lh-body);
}
/* Multi-paragraph answers: separate without re-adding top padding to the first. */
.faq-item__panel-inner p:not(:first-child) { padding-block-start: var(--space-xs); }

/* ==========================================================================
   SECTION 8 — THE MOST IMPORTANT NOTE  ("ملاحظتي الأهم")
   --------------------------------------------------------------------------
   A calm, centered manifesto on an elevated card. Soft warm-lavender field
   distinct from the FAQ's plain lavender.
   ========================================================================== */
.manifesto {
  background:
    radial-gradient(50% 45% at 50% 0%, rgba(var(--color-accent-rgb), 0.10) 0%, rgba(var(--color-accent-rgb), 0) 60%),
    var(--grad-field);
}
.manifesto__blob--1 {
  inset-block-start: 4%;
  inset-inline-start: -120px;
  inline-size: 320px;
  block-size: 320px;
  background: radial-gradient(circle at 50% 50%, #e2d6f1, rgba(226, 214, 241, 0));
  opacity: 0.55;
}
.manifesto__blob--2 {
  inset-block-end: 2%;
  inset-inline-end: -110px;
  inline-size: 300px;
  block-size: 300px;
  background: radial-gradient(circle at 50% 50%, var(--color-accent-200), rgba(var(--color-accent-rgb), 0));
  opacity: 0.4;
}

.manifesto__card {
  position: relative;
  text-align: center;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-raised);
  padding: clamp(2rem, 1.25rem + 3.5vw, 4rem) clamp(1.5rem, 1rem + 3vw, 3.5rem);
  display: flex;
  flex-direction: column;
  align-items: center;
}
.manifesto__mark {
  display: inline-flex;
  color: var(--color-secondary-400);
  margin-block-end: var(--space-sm);
}
.manifesto__title {
  font-size: var(--fs-h2);
  font-weight: var(--fw-extrabold);
  color: var(--color-heading);
  line-height: var(--lh-snug);
  max-inline-size: 24ch;
  margin-inline: auto;       /* center the constrained title box on all viewports */
  text-align: center;
}
.manifesto__body {
  margin-block-start: var(--space-lg);
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  max-inline-size: 60ch;
}
.manifesto__body p {
  font-size: var(--fs-lead);
  color: var(--color-body);
  line-height: var(--lh-body);
}
/* The peak line — the emotional resolution, lifted with the turtle motif. */
.manifesto__peak {
  margin-block-start: clamp(1.75rem, 1rem + 2vw, 2.75rem);
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-xs);
  padding-block-start: var(--space-lg);
  border-block-start: 2px solid var(--color-secondary-400);
  max-inline-size: 36ch;
  font-size: var(--fs-h3);
  font-weight: var(--fw-bold);
  color: var(--color-primary);
  line-height: var(--lh-snug);
}
.manifesto__peak-icon { color: var(--color-accent); }

/* ==========================================================================
   SECTION 9 — FINAL CTA  ("إذا فهمت الطريقة")
   --------------------------------------------------------------------------
   Deep, centered closing panel — the tonal close after the light manifesto.
   A distinct composition from the Programs split CTA: everything stacked and
   centered, with a warm accent glow.
   ========================================================================== */
.fcta {
  position: relative;
  overflow: hidden;
  background: var(--grad-deep);
  color: var(--color-on-dark);
  padding-block: clamp(4rem, 3rem + 6vw, 7.5rem);
  text-align: center;
}
.fcta__glow {
  position: absolute;
  inset-block-start: -10%;
  inset-inline-start: 50%;
  transform: translateX(-50%);
  inline-size: min(640px, 90%);
  block-size: 360px;
  background: var(--grad-accent-glow);
  pointer-events: none;
}
.fcta__blob {
  inset-block-end: -160px;
  inset-inline-end: -120px;
  inline-size: 360px;
  block-size: 360px;
  background: radial-gradient(circle at 50% 50%, rgba(74, 77, 138, 0.55), rgba(74, 77, 138, 0));
  opacity: 0.6;
}

.fcta__inner {
  position: relative;
  z-index: 1;
  max-inline-size: 760px;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.fcta__title {
  font-size: var(--fs-h2);
  font-weight: var(--fw-extrabold);
  color: #fff;
  line-height: var(--lh-snug);
  max-inline-size: 22ch;
  margin-inline: auto;
  text-align: center;
}
.fcta__text {
  margin-block-start: var(--space-md);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  max-inline-size: 58ch;
}
.fcta__text p {
  font-size: var(--fs-lead);
  color: var(--color-on-dark-muted);
  line-height: var(--lh-body);
}
.fcta__cta {
  margin-block-start: var(--space-xl);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-sm);
}
/* WhatsApp line (verbatim) as a calm pill link. */
.fcta__whats {
  margin-block-start: var(--space-lg);
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  padding-block: 0.65rem;
  padding-inline: 1.1rem;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.16);
  color: var(--color-on-dark);
  font-size: var(--fs-body);
  line-height: var(--lh-snug);
  transition: background-color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.fcta__whats:hover {
  background: rgba(255, 255, 255, 0.13);
  transform: translateY(-2px);
}
.fcta__whats-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 30px;
  block-size: 30px;
  flex-shrink: 0;
  border-radius: var(--radius-pill);
  background: #25d366;
  color: #fff;
}

/* Mobile: keep the WhatsApp pill comfortable for long text. */
@media (max-width: 599px) {
  .fcta__whats {
    border-radius: var(--radius-lg);
    text-align: start;
  }
}

/* ==========================================================================
   DISCLAIMER (تنويه) — slim, quiet educational notice above the footer
   ========================================================================== */
.disclaimer {
  background: var(--color-bg);
  border-block: 1px solid var(--color-border);
}
.disclaimer__inner {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: var(--space-xs);
  padding-block: var(--space-md);
  max-inline-size: 900px;
}
.disclaimer__icon {
  flex-shrink: 0;
  color: var(--color-muted);
  margin-block-start: 0.15em;
}
.disclaimer__text {
  font-size: var(--fs-small);
  color: var(--color-muted);
  line-height: var(--lh-body);
  text-align: center;
  max-inline-size: 80ch;
}

@media (max-width: 599px) {
  .disclaimer__inner { padding-inline: var(--gutter); }
  .disclaimer__text { text-align: start; }
}