/* ==========================================================================
   Israeli Hebrew Institute — design system
   Palette and type mirror the IHI application design system exactly.
   ========================================================================== */

/* ── Tokens ─────────────────────────────────────────────────────────────── */
:root {
  /* Brand — identical to the app */
  --navy:        #082052;
  --navy-deep:   #05132F;
  --navy-tint:   #E7E2D3;
  --cream:       #F8F0E5;
  --surface:     #FFFFFF;
  --border:      #E3D6BE;
  --text:        #082052;
  --text-2:      #6B6355;
  --success:     #2F6F4F;
  --warning:     #B7791F;
  --danger:      #B3261E;

  /* Marketing accent — carried over from the existing site, CTAs only.
     --accent is the brand orange and is used where WCAG's large-text rule
     applies (display headings, rules, decoration). --accent-solid and
     --accent-ink are darkened so white-on-fill and small orange text both
     clear 4.5:1 against cream. Same hue, same family, legible. */
  --accent:       #E8542A;
  --accent-solid: #C0431C;
  --accent-ink:   #B8441F;
  --accent-hover: #A93A16;

  --peach:        #FFE4D6;   /* carried over from the previous site */
  --peach-deep:   #FFD3BE;

  --whatsapp:     #25D366;
  --whatsapp-dk:  #1EBE5D;

  /* Motion */
  --ease:      cubic-bezier(0.16, 1, 0.30, 1);
  --ease-io:   cubic-bezier(0.76, 0, 0.24, 1);
  --dur:       0.9s;

  /* Layout */
  --wide:   1180px;
  --narrow: 760px;
  --gutter: clamp(20px, 5vw, 48px);
  --section-y: clamp(88px, 12vw, 168px);
}

/* ── Reset ──────────────────────────────────────────────────────────────── */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

html {
  scroll-behavior: smooth;           /* the fallback when Lenis is not running */
  scroll-padding-top: 92px;          /* the fixed bar */
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: 'Heebo', system-ui, -apple-system, 'Segoe UI', sans-serif;
  background: var(--cream);
  color: var(--text);
  font-size: 16px;
  line-height: 1.65;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img, svg { display: block; max-width: 100%; }
a { color: inherit; }

::selection { background: var(--navy); color: var(--cream); }

/* Focus visibility — keyboard users only, never a mouse-click halo */
:focus-visible {
  outline: 2.5px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Skip link — first stop for a screen reader or keyboard user */
.skip-link {
  position: absolute; top: -100px; left: 16px; z-index: 10000;
  background: var(--navy); color: var(--cream);
  padding: 12px 22px; border-radius: 8px;
  font-size: 14px; font-weight: 500; text-decoration: none;
  transition: top 0.2s var(--ease);
}
.skip-link:focus { top: 16px; }

/* ── Typography ─────────────────────────────────────────────────────────── */
.display {
  font-size: clamp(34px, 5vw, 66px);
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -0.035em;
  color: var(--navy);
}
.h2 {
  font-size: clamp(28px, 3.7vw, 50px);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -0.025em;
  color: var(--navy);
}
.h3 {
  font-size: clamp(18px, 1.5vw, 21px);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--navy);
}
.lead {
  font-size: clamp(17px, 1.5vw, 19px);
  font-weight: 300;
  line-height: 1.75;
  color: var(--text-2);
}
.body { font-size: 16px; color: var(--text-2); line-height: 1.75; }
.small { font-size: 14px; color: var(--text-2); }

.eyebrow {
  display: inline-block;
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--text-2);
  position: relative;
  padding-left: 30px;
}
/* The eyebrow rule draws itself right-to-left, the way Hebrew is written */
.eyebrow::before {
  content: ''; position: absolute; left: 0; top: 50%;
  width: 20px; height: 1.5px; background: var(--accent);
  transform-origin: right center;
  transition: transform 0.7s var(--ease) 0.15s;
}
.js .eyebrow::before { transform: scaleX(0); }
.js .reveal.is-in .eyebrow::before,
.js .eyebrow.is-in::before { transform: scaleX(1); }

em, .accent-text { font-style: normal; color: var(--accent); }

/* ── Layout ─────────────────────────────────────────────────────────────── */
.section { padding: var(--section-y) var(--gutter); position: relative; scroll-margin-top: 92px; }
#stages, #method, #community, #free, #contact { scroll-margin-top: 92px; }
.wrap        { max-width: var(--wide);   margin-inline: auto; }
.wrap-narrow { max-width: var(--narrow); margin-inline: auto; }
.center { text-align: center; }
.stack-sm > * + * { margin-top: 14px; }
.stack    > * + * { margin-top: 22px; }
.stack-lg > * + * { margin-top: 36px; }

.section--tint   { background: var(--navy-tint); }
.section--peach  { background: var(--peach); }
.section--peach .card,
.section--peach .offer,
.section--peach .contact-item { border-color: rgba(8,32,82,0.13); }
.section--navy   { background: var(--navy); color: var(--cream); }
.section--navy .h2, .section--navy .display { color: var(--cream); }
.section--navy .lead, .section--navy .body, .section--navy .eyebrow { color: rgba(248,240,229,0.66); }

/* ── Scroll reveals ─────────────────────────────────────────────────────── */
.js .reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
  will-change: opacity, transform;
}
.reveal.is-in { opacity: 1; transform: none; }
.d1 { transition-delay: 0.09s; }
.d2 { transition-delay: 0.18s; }
.d3 { transition-delay: 0.27s; }
.d4 { transition-delay: 0.36s; }
.d5 { transition-delay: 0.45s; }

/* Headings wipe open from the right — the direction Hebrew is read */
.js .wipe {
  clip-path: inset(0 0 0 100%);
  transition: clip-path 1.15s var(--ease);
  will-change: clip-path;
}
.wipe.is-in { clip-path: inset(0 0 0 0%); }

/* ── Buttons ────────────────────────────────────────────────────────────── */
.btn {
  --btn-bg: var(--navy);
  --btn-fg: var(--cream);
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-family: inherit; font-size: 15px; font-weight: 500; letter-spacing: 0.015em;
  padding: 17px 34px;
  border: 1.5px solid var(--btn-bg);
  border-radius: 10px;
  background: transparent;
  color: var(--btn-fg);
  text-decoration: none;
  cursor: pointer;
  overflow: hidden;
  isolation: isolate;
  transition: color 0.42s var(--ease), border-color 0.3s var(--ease), transform 0.3s var(--ease);
}
/* The fill sweeps in from the right, then retreats to the right on exit */
.btn::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: var(--btn-bg);
  transform: scaleX(1); transform-origin: right center;
  transition: transform 0.48s var(--ease-io);
}
.btn:hover::before, .btn:focus-visible::before { transform: scaleX(0); }
.btn:hover, .btn:focus-visible { color: var(--btn-bg); }
.btn:active { transform: translateY(1px); }
.btn svg { width: 18px; height: 18px; flex: none; }

.btn--accent    { --btn-bg: var(--accent-solid); --btn-fg: #FFF; }
.btn--wa        { --btn-bg: var(--whatsapp); --btn-fg: var(--navy); }
/* Inverting a WhatsApp button would leave green text on cream, so it keeps
   its navy label and shows the green only as a ring. */
.btn--wa:hover, .btn--wa:focus-visible { color: var(--navy); }
.btn--lg        { font-size: 16px; padding: 20px 42px; }
.btn--ghost     { --btn-bg: var(--navy); --btn-fg: var(--navy); }
.btn--ghost::before { transform: scaleX(0); }
.btn--ghost:hover::before, .btn--ghost:focus-visible::before { transform: scaleX(1); }
.btn--ghost:hover, .btn--ghost:focus-visible { color: var(--cream); }
.section--navy .btn--ghost { --btn-fg: var(--cream); --btn-bg: var(--cream); }
.section--navy .btn--ghost:hover { color: var(--navy); }

/* ── Inline links ───────────────────────────────────────────────────────── */
.link {
  color: var(--accent-ink);
  text-decoration: none;
  font-weight: 500;
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 0% 1.5px;
  background-position: right bottom;   /* grows right-to-left */
  background-repeat: no-repeat;
  transition: background-size 0.4s var(--ease);
  padding-bottom: 2px;
}
.link:hover, .link:focus-visible { background-size: 100% 1.5px; }

/* ── Navigation ─────────────────────────────────────────────────────────── */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 14px var(--gutter);
  background: var(--cream);
  backdrop-filter: blur(16px) saturate(1.4);
  -webkit-backdrop-filter: blur(16px) saturate(1.4);
  border-bottom: 1px solid transparent;
  transition: border-color 0.35s var(--ease), padding 0.35s var(--ease), background 0.35s;
}
.nav.is-scrolled { border-bottom-color: var(--border); padding-block: 9px; background: rgba(248,240,229,0.97); }
.nav__logo { height: clamp(34px, 4vw, 50px); width: auto; }
.nav__logo-link { display: inline-block; line-height: 0; }
.nav__links { display: flex; align-items: center; gap: clamp(16px, 2.4vw, 34px); }
.nav__link {
  font-size: 13.5px; font-weight: 500; letter-spacing: 0.02em;
  color: var(--navy); text-decoration: none; position: relative; padding: 4px 0;
}
.nav__link::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1.5px;
  background: var(--accent);
  transform: scaleX(0); transform-origin: right center;
  transition: transform 0.4s var(--ease);
}
.nav__link:hover::after, .nav__link:focus-visible::after { transform: scaleX(1); }
.nav__cta {
  font-size: 13px; font-weight: 500; padding: 10px 20px; border-radius: 8px;
}
@media (max-width: 860px) {
  .nav__links .nav__link { display: none; }
}

/* ── Intro: the logo assembles from vertical strokes ────────────────────── */
.splash { display: none; }
.js .splash {
  display: grid;
  position: fixed; inset: 0; z-index: 9999;
  place-items: center;
  background: var(--cream);
  transition: opacity 0.65s var(--ease);
}
.splash.is-gone { opacity: 0; pointer-events: none; }
.splash__logo-box {
  position: relative;
  width: min(78vw, 620px);
  transform-origin: center center;
}
.splash__logo { width: 100%; height: auto; }
/* Cream bands sit over the logo and lift away one by one */
.splash__bands { position: absolute; inset: -4% -2%; display: flex; }
.splash__band {
  flex: 1 1 0;
  background: var(--cream);
  transform: scaleY(1);
  transform-origin: bottom center;
}
.splash.is-opening .splash__band {
  animation: bandLift 0.66s var(--ease) forwards;
}
@keyframes bandLift { to { transform: scaleY(0); } }
/* Three navy strokes drop in ahead of the reveal — the IHI monogram's bones */
.splash__strokes {
  position: absolute; inset: 0;
  display: flex; align-items: center; gap: 2.2%;
  padding-left: 14%;
  pointer-events: none;
}
.splash__stroke {
  width: 2.4%; height: 46%;
  background: var(--navy);
  transform: translateY(-160%);
  opacity: 0;
}
.splash.is-opening .splash__stroke { animation: strokeDrop 0.62s var(--ease) forwards; }
@keyframes strokeDrop {
  0%   { transform: translateY(-160%); opacity: 0; }
  55%  { opacity: 1; }
  100% { transform: translateY(0); opacity: 0; }
}

/* ── Hero ───────────────────────────────────────────────────────────────── */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center;
  padding: 138px var(--gutter) 96px;
  background: var(--navy-tint);
  overflow: hidden;
}
.hero > * { position: relative; z-index: 2; }
.hero .display { max-width: 630px; margin-inline: auto; }
.hero__sub { max-width: 54ch; margin: 26px auto 0; }
.hero__actions {
  margin-top: 44px;
  display: flex; flex-wrap: wrap; gap: 14px;
  justify-content: center; align-items: center;
}
/* .course-wrap is a positioned shell around its button; without this it
   stretches while the button inside it does not, and that one button sits
   higher than the other two. */
.course-wrap { display: flex; }
.hero .hero__actions .btn,
.hero .hero__actions .course-wrap .btn {
  min-height: 60px; padding-block: 0;
}

/* The hero buttons are solid and hover by shifting their own fill, rather
   than running the sweep the rest of the site uses. */
.hero .hero__actions .btn { transition: background-color 0.18s ease, color 0.18s ease; }
.hero .hero__actions .btn::before { display: none; }

.hero .hero__actions .btn--accent {
  background: var(--accent-solid); color: #fff; border-color: var(--accent-solid);
}
.hero .hero__actions .btn--accent:hover,
.hero .hero__actions .btn--accent:focus-visible {
  background: #A93A16; border-color: #A93A16; color: #fff;   /* ~12% darker */
}
.hero .hero__actions .btn--navy {
  background: var(--navy); color: var(--cream); border-color: var(--navy);
}
.hero .hero__actions .btn--navy:hover,
.hero .hero__actions .btn--navy:focus-visible {
  background: #123064; border-color: #123064; color: var(--cream);  /* ~12% lighter */
}
.hero__trust {
  margin-top: 34px;
  font-size: 12.5px; letter-spacing: 0.05em; color: var(--text-2);
  display: inline-flex; align-items: center; gap: 12px;
}
.hero__trust::before, .hero__trust::after {
  content: ''; width: 34px; height: 1px; background: rgba(8,32,82,0.22);
}

/* The signature glyph: ח whose crossbar slides down until it reads as H */
.hero__glyph {
  position: absolute; z-index: 1;
  right: -6%; bottom: -12%;
  width: clamp(280px, 42vw, 620px);
  opacity: 0.055;
  pointer-events: none;
}
.hero__glyph path { fill: var(--navy); }

/* ── Ambient Hebrew letters drifting behind the page ────────────────────── */
.letterfield {
  position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0;
}
.letterfield span {
  position: absolute;
  font-weight: 800; line-height: 1;
  color: var(--navy);
  user-select: none;
  will-change: transform;
}

/* ── Scroll rail of Hebrew letters ──────────────────────────────────────── */
.rail {
  position: fixed; right: 26px; top: 50%; transform: translateY(-50%);
  z-index: 60; display: none;
  transition: opacity 0.4s var(--ease);
  flex-direction: column; align-items: flex-end; gap: 13px;
  pointer-events: none;
}
@media (min-width: 1240px) { .rail { display: flex; } }
.rail__item {
  display: flex; align-items: center; gap: 9px;
  opacity: 0.2;
  transform-origin: right center;
  transition: opacity 0.45s var(--ease), transform 0.45s var(--ease);
}
.rail__he {
  font-size: 17px; font-weight: 700; color: var(--navy); line-height: 1;
  min-width: 18px; text-align: center;
}
.rail__lat {
  font-size: 10px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--accent-ink);
  opacity: 0; transform: translateX(6px);
  transition: opacity 0.4s var(--ease), transform 0.4s var(--ease);
}
.rail__item.is-active { opacity: 1; transform: scale(1.45); }
.rail__item.is-active .rail__lat { opacity: 1; transform: none; }
.rail__item.is-near { opacity: 0.5; }
.rail.on-dark .rail__he { color: var(--cream); }
/* the alphabet steps out of the way while a row is scrolling sideways */
.rail.is-muted { opacity: 0; pointer-events: none; }

/* ── Cards ──────────────────────────────────────────────────────────────── */
.grid   { display: grid; gap: 20px; }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.grid-4 { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }

.card {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 32px 30px 34px;
  overflow: hidden;
  transition: transform 0.42s var(--ease), border-color 0.42s var(--ease), box-shadow 0.42s var(--ease);
}
.card:hover {
  transform: translateY(-4px);
  border-color: rgba(8,32,82,0.28);
  box-shadow: 0 18px 44px -22px rgba(8,32,82,0.42);
}
/* A single Hebrew letter surfaces in the corner on hover */
.card__letter {
  position: absolute; right: 14px; bottom: -12px;
  font-size: 108px; font-weight: 800; line-height: 1;
  color: var(--navy);
  opacity: 0; transform: translateY(14px) rotate(-4deg);
  transition: opacity 0.5s var(--ease), transform 0.6s var(--ease);
  pointer-events: none; user-select: none;
}
.card:hover .card__letter { opacity: 0.07; transform: translateY(0) rotate(0deg); }
.card__num {
  font-size: 13px; font-weight: 700; letter-spacing: 0.16em;
  color: var(--accent-ink); margin-bottom: 16px;
  position: relative; height: 1em;
}
/* on the route, each step number is a filled marker */
.trail__stop .card__num {
  display: inline-grid; place-items: center;
  height: auto; min-width: 44px;
  padding: 6px 12px; margin-bottom: 18px;
  border-radius: 100px;
  background: var(--accent-solid); color: #fff;
  letter-spacing: 0.14em;
}
.trail__stop .card__num span { position: static; grid-area: 1 / 1; }
.trail__stop .card__num .is-hebrew { position: absolute; }
.card__num span {
  position: absolute; inset: 0;
  transition: opacity 0.35s var(--ease), transform 0.35s var(--ease);
}
.card__num .is-latin  { opacity: 1; transform: none; }
.card__num .is-hebrew { opacity: 0; transform: translateY(-6px); }
.card:hover .card__num .is-latin  { opacity: 0; transform: translateY(6px); }
.card:hover .card__num .is-hebrew { opacity: 1; transform: none; }
.card .h3 { margin-bottom: 10px; }
.card__icon { font-size: 26px; line-height: 1; margin-bottom: 16px; display: block; }

/* ── Free-resource cards ────────────────────────────────────────────────── */
.offer {
  display: flex; flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 36px 32px;
  position: relative; overflow: hidden;
  transition: transform 0.42s var(--ease), box-shadow 0.42s var(--ease), border-color 0.42s;
}
.offer:hover { transform: translateY(-4px); box-shadow: 0 20px 50px -26px rgba(8,32,82,0.45); border-color: rgba(8,32,82,0.28); }
.offer__tag {
  align-self: flex-start;
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--success); background: rgba(47,111,79,0.1);
  padding: 5px 12px; border-radius: 6px; margin-bottom: 20px;
}
.offer .body { flex: 1; margin: 12px 0 26px; }
.offer .btn { align-self: flex-start; }

/* ── Marquee rows (videos, reviews) ─────────────────────────────────────── */
.marquee { overflow: hidden; position: relative; }
.marquee::before, .marquee::after {
  content: ''; position: absolute; top: 0; bottom: 0; width: clamp(40px, 8vw, 130px); z-index: 3;
  pointer-events: none;
}
.marquee::before { left: 0;  background: linear-gradient(90deg, var(--mq-fade, var(--cream)), transparent); }
.marquee::after  { right: 0; background: linear-gradient(270deg, var(--mq-fade, var(--cream)), transparent); }
.marquee__track { display: flex; align-items: stretch; gap: 20px; width: max-content; will-change: transform; }
.marquee__track--slow { animation: marquee 70s linear infinite; }
.marquee__track--fast { animation: marquee 74s linear infinite; }
@keyframes marquee { to { transform: translateX(-50%); } }
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee:hover .marquee__track > * { opacity: 0.45; transition: opacity 0.35s var(--ease); }
.marquee__track > *:hover { opacity: 1 !important; }

.vcard, .qcard {
  flex: none;
  width: calc((min(100vw, 1560px) - 2 * var(--gutter) - 40px) / 3);
  max-width: 460px;
}
@media (max-width: 899px) {
  .vcard, .qcard { width: calc((100vw - 2 * var(--gutter) - 20px) / 2); }
}
@media (max-width: 700px) {
  .vcard, .qcard { width: calc(100vw - 2 * var(--gutter) - 34px); max-width: 420px; }
}
.vcard__thumb {
  display: block; position: relative; border-radius: 12px; overflow: hidden;
  aspect-ratio: 16 / 9; background: var(--border);
  border: 1px solid var(--border);
}
.vcard__thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.7s var(--ease); }
.vcard:hover .vcard__thumb img { transform: scale(1.06); }
.vcard__play {
  position: absolute; inset: 0; display: grid; place-items: center;
  background: rgba(8,32,82,0.22);
  transition: background 0.35s var(--ease);
}
.vcard:hover .vcard__play { background: rgba(8,32,82,0.4); }
.vcard__play span {
  width: 48px; height: 48px; border-radius: 50%;
  background: rgba(248,240,229,0.94); color: var(--navy);
  display: grid; place-items: center; font-size: 15px; padding-left: 3px;
  transition: transform 0.35s var(--ease);
}
.vcard:hover .vcard__play span { transform: scale(1.12); }
.vcard__name { margin-top: 12px; font-size: 14px; font-weight: 600; color: var(--navy); }
.vcard__desc { font-size: 13px; color: var(--text-2); line-height: 1.5; margin-top: 2px; }

.qcard {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 14px; padding: 28px 26px;
  display: flex; flex-direction: column;
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease);
}
.qcard:hover { transform: translateY(-4px); box-shadow: 0 18px 44px -24px rgba(8,32,82,0.4); }
.qcard__stars { color: var(--accent); font-size: 13px; letter-spacing: 0.12em; margin-bottom: 14px; }
.qcard__text { font-size: 15px; line-height: 1.68; color: var(--text); flex: 1; }
.qcard__by { margin-top: 18px; font-size: 14px; font-weight: 600; color: var(--navy); }
.qcard__when { font-size: 12px; color: var(--text-2); letter-spacing: 0.03em; }

/* ── Contact ────────────────────────────────────────────────────────────── */
.contact-grid { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.contact-item {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 14px; padding: 26px 24px;
}
.contact-item__label {
  font-size: 11px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--text-2); margin-bottom: 10px;
}
.contact-item__value { font-size: 16px; font-weight: 500; color: var(--navy); line-height: 1.55; }

/* ── Footer ─────────────────────────────────────────────────────────────── */
.footer {
  background: var(--navy); color: rgba(248,240,229,0.72);
  padding: clamp(56px, 8vw, 88px) var(--gutter) 40px;
  font-size: 14px;
}
.footer a { color: rgba(248,240,229,0.72); text-decoration: none; }
.footer a:hover, .footer a:focus-visible { color: var(--cream); }
.footer__top {
  display: grid; gap: 40px;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  padding-bottom: 40px; border-bottom: 1px solid rgba(248,240,229,0.14);
}
.footer__logo { height: 44px; width: auto; filter: brightness(0) invert(1); opacity: 0.92; }
.footer__h {
  font-size: 11px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase;
  color: rgba(248,240,229,0.62); margin-bottom: 16px;
}
.footer__list { list-style: none; display: grid; gap: 10px; }
.footer__bottom {
  padding-top: 26px; display: flex; flex-wrap: wrap; gap: 12px 26px;
  justify-content: space-between; font-size: 13px; color: rgba(248,240,229,0.66);
}

/* ── Cookie notice ──────────────────────────────────────────────────────── */
.cookiebar {
  position: fixed; right: var(--gutter); bottom: 20px; left: auto; z-index: 9000;
  width: min(440px, calc(100vw - 2 * var(--gutter)));
  background: var(--navy); color: rgba(248,240,229,0.86);
  border-radius: 14px; padding: 18px 22px;
  display: flex; flex-wrap: wrap; align-items: center; gap: 14px 20px;
  justify-content: space-between;
  font-size: 13.5px; line-height: 1.6;
  box-shadow: 0 24px 60px -20px rgba(8,32,82,0.6);
  transform: translateY(180%);
  transition: transform 0.7s var(--ease);
}
.cookiebar.is-up { transform: none; }
@media (max-width: 620px) { .cookiebar { left: var(--gutter); width: auto; } }
.cookiebar a { color: var(--accent); text-decoration: underline; }
.cookiebar button {
  background: var(--accent-solid); color: #fff; border: 0; cursor: pointer;
  font-family: inherit; font-size: 13px; font-weight: 600;
  padding: 10px 22px; border-radius: 8px; white-space: nowrap;
  transition: background 0.25s var(--ease);
}
.cookiebar button:hover { background: var(--accent-hover); }
.cookiebar a { color: #F0A88E; }

/* ── Floating WhatsApp ──────────────────────────────────────────────────── */
.wa-float {
  position: fixed; left: 22px; bottom: 22px; z-index: 8000;
  width: 56px; height: 56px; border-radius: 50%;
  background: var(--whatsapp); color: var(--navy);
  border: 2px solid var(--navy);
  display: grid; place-items: center;
  box-shadow: 0 14px 34px -10px rgba(8,32,82,0.45);
  opacity: 0; transform: translateY(20px) scale(0.85);
  transition: opacity 0.5s var(--ease), transform 0.5s var(--ease), background 0.25s;
}
.wa-float.is-up { opacity: 1; transform: none; }
.wa-float:hover { background: var(--whatsapp-dk); transform: scale(1.07); }
.wa-float svg { width: 27px; height: 27px; }

/* ── Legal / long-form document pages ───────────────────────────────────── */
.doc { padding: 140px var(--gutter) var(--section-y); }
.doc__meta { font-size: 13px; color: var(--text-2); margin-top: 14px; }
.doc h2 {
  font-size: clamp(21px, 2.3vw, 27px); font-weight: 700; color: var(--navy);
  letter-spacing: -0.02em; margin: 52px 0 14px; scroll-margin-top: 110px;
}
.doc h3 { font-size: 17px; font-weight: 600; color: var(--navy); margin: 28px 0 8px; }
.doc p, .doc li { font-size: 15.5px; line-height: 1.82; color: var(--text-2); }
.doc p + p { margin-top: 14px; }
.doc ul, .doc ol { margin: 12px 0 12px 22px; display: grid; gap: 9px; }
.doc strong { color: var(--navy); font-weight: 600; }
.doc__toc {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 14px; padding: 26px 28px; margin-top: 40px;
}
.doc__toc ol { margin: 0 0 0 18px; gap: 7px; }
.doc__toc a { color: var(--navy); text-decoration: none; font-size: 14.5px; }
.doc__toc a:hover { color: var(--accent); }
.callout {
  border-left: 3px solid var(--accent);
  background: var(--surface);
  border-radius: 0 12px 12px 0;
  padding: 20px 24px; margin: 22px 0;
}
.callout--warn { border-left-color: var(--warning); background: rgba(183,121,31,0.07); }
.callout p { color: var(--text); }

/* A Hebrew gloss on a legal heading. Grow's site audit is run in Hebrew against
   an English site, and their checklist names these sections by their Hebrew
   terms — so the heading carries both. Sits on its own line on narrow screens. */
.h2__he {
  display: inline-block; margin-inline-start: 10px;
  font-size: 0.72em; font-weight: 500; color: var(--text-2);
  letter-spacing: 0; vertical-align: middle;
}

.terms-table {
  width: 100%; border-collapse: collapse; margin: 18px 0 6px;
  font-size: 14.5px; line-height: 1.7;
}
.terms-table th, .terms-table td {
  text-align: left; padding: 12px 14px;
  border-bottom: 1px solid var(--border); vertical-align: top;
}
.terms-table th {
  color: var(--navy); font-weight: 600; font-size: 13px;
  text-transform: uppercase; letter-spacing: 0.06em;
  border-bottom-width: 1.5px;
}
.terms-table td { color: var(--text-2); }
.terms-table tr:last-child td { border-bottom: 0; }
/* Three columns of prose don't survive a phone. Below the breakpoint each row
   becomes its own stacked block, labelled by the header it belongs to. */
@media (max-width: 640px) {
  .terms-table, .terms-table tbody, .terms-table tr, .terms-table td { display: block; width: 100%; }
  .terms-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .terms-table tr {
    border: 1px solid var(--border); border-radius: 12px;
    padding: 6px 4px; margin-bottom: 12px; background: var(--surface);
  }
  .terms-table td { border-bottom: 0; padding: 8px 14px; }
  .terms-table td::before {
    content: attr(data-label); display: block;
    font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.06em;
    color: var(--navy); font-weight: 600; margin-bottom: 3px;
  }
}

/* ── Payment page ───────────────────────────────────────────────────────── */
.pay-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 18px; padding: clamp(28px, 4vw, 44px);
  box-shadow: 0 26px 70px -40px rgba(8,32,82,0.45);
}
.pay-rows { list-style: none; display: grid; gap: 0; margin: 26px 0 4px; }
.pay-rows li {
  display: flex; justify-content: space-between; gap: 18px;
  padding: 14px 0; border-bottom: 1px solid var(--border);
  font-size: 15px;
}
.pay-rows li:last-child { border-bottom: 0; }
.pay-rows span:first-child { color: var(--text-2); }
.pay-rows span:last-child { color: var(--navy); font-weight: 500; text-align: right; }

.consent {
  display: flex; gap: 14px; align-items: flex-start;
  background: var(--cream); border: 1.5px solid var(--border);
  border-radius: 12px; padding: 20px 22px; margin: 30px 0 22px;
  cursor: pointer;
  transition: border-color 0.3s var(--ease), background 0.3s var(--ease);
}
.consent:hover { border-color: rgba(8,32,82,0.3); }
.consent.is-checked { border-color: var(--success); background: rgba(47,111,79,0.06); }
.consent.is-error { border-color: var(--danger); background: rgba(179,38,30,0.06); }
.consent input {
  width: 22px; height: 22px; flex: none; margin-top: 2px;
  accent-color: var(--accent); cursor: pointer;
}
.consent label { font-size: 15px; line-height: 1.6; color: var(--text); cursor: pointer; }
.pay-submit { width: 100%; }
.pay-submit[aria-disabled="true"] {
  opacity: 0.42; cursor: not-allowed; filter: grayscale(0.5);
}
.pay-error { color: var(--danger); font-size: 14px; font-weight: 500; margin-top: 12px; display: none; }
.pay-error.is-on { display: block; }

/* ── Anyone who asked their system to calm down gets a calm site ────────── */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .marquee__track { animation: none !important; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .reveal { opacity: 1 !important; transform: none !important; }
  .wipe   { clip-path: none !important; }
  .eyebrow::before { transform: scaleX(1) !important; }
  .letterfield, .splash { display: none !important; }
}

/* ── Hero aleph watermark ───────────────────────────────────────────────── */
.hero__aleph {
  position: absolute; z-index: 1;
  right: -3%; bottom: -14%;
  font-size: clamp(280px, 34vw, 520px);
  font-weight: 800; line-height: 0.8;
  color: var(--navy); opacity: 0.03;
  user-select: none; pointer-events: none;
  animation: alephDrift 9s ease-in-out infinite;
}
@keyframes alephDrift {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50%      { transform: translateY(-14px) rotate(-1.2deg); }
}

/* ── Brand strip: the ח → H moment ──────────────────────────────────────── */
.brandstrip { padding: clamp(64px, 8vw, 104px) var(--gutter); text-align: center; }

/* ── The letter holds the screen while it changes ─────────────────────────
   Scrolling through here is deliberately slow: the section is more than two
   screens tall and a sticky panel stays put, so the bar's whole descent from
   chet to H happens while the reader is looking straight at it. */
.brandstrip-pin { position: relative; }
.js .brandstrip-pin { height: 330vh; }
.js .brandstrip-pin__inner {
  position: sticky; top: 0;
  height: 100svh;
  display: grid; align-content: center;
  overflow: hidden;
}
.js .brandstrip-pin .brandstrip { padding-block: 0; }
.brandstrip-pin .brandstrip { position: relative; z-index: 2; }
@media (max-width: 767px) {
  .js .brandstrip-pin { height: 265vh; }
}
.brandstrip__glyph {
  width: clamp(112px, 12vw, 168px);
  margin: 0 auto 34px;
}
.brandstrip__glyph path { fill: var(--cream); }
.brandstrip__line {
  font-size: clamp(22px, 2.8vw, 34px); font-weight: 700;
  letter-spacing: -0.02em; color: var(--cream); line-height: 1.25;
}
.brandstrip__sub {
  margin-top: 14px; font-size: clamp(15px, 1.4vw, 17px); font-weight: 300;
  color: rgba(248,240,229,0.62); max-width: 44ch; margin-inline: auto; line-height: 1.7;
}

/* ── Proverb block ──────────────────────────────────────────────────────── */
.proverb {
  background: var(--surface); border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: 0 16px 16px 0;
  padding: clamp(26px, 3.4vw, 40px);
  margin: 44px auto 0; max-width: 780px; text-align: left;
}

/* ── Draft markers — every one of these must be resolved before publishing ── */
.todo {
  display: inline;
  background: #FFF3D6;
  border-bottom: 2px solid var(--warning);
  color: #7A4E08;
  font-weight: 600;
  padding: 1px 5px;
  border-radius: 3px;
}
.draft-banner {
  background: #FFF3D6; border: 1.5px solid var(--warning);
  border-radius: 12px; padding: 18px 22px; margin-bottom: 34px;
  font-size: 14.5px; line-height: 1.7; color: #7A4E08;
}
.draft-banner strong { color: #5C3A05; }

/* ── Mobile navigation ──────────────────────────────────────────────────── */
.nav__toggle {
  display: none;
  width: 42px; height: 42px; flex: none;
  align-items: center; justify-content: center;
  background: transparent; border: 1.5px solid var(--border);
  border-radius: 9px; cursor: pointer; padding: 0;
}
.nav__toggle span {
  position: relative; display: block; width: 17px; height: 1.8px;
  background: var(--navy); border-radius: 2px;
  transition: transform 0.35s var(--ease), background 0.2s;
}
.nav__toggle span::before, .nav__toggle span::after {
  content: ''; position: absolute; left: 0; width: 17px; height: 1.8px;
  background: var(--navy); border-radius: 2px;
  transition: transform 0.35s var(--ease), top 0.25s var(--ease);
}
.nav__toggle span::before { top: -6px; }
.nav__toggle span::after  { top:  6px; }
.nav__toggle[aria-expanded="true"] span { background: transparent; }
.nav__toggle[aria-expanded="true"] span::before { top: 0; transform: rotate(45deg); }
.nav__toggle[aria-expanded="true"] span::after  { top: 0; transform: rotate(-45deg); }

@media (max-width: 860px) {
  .nav__toggle { display: inline-flex; }
  .nav__links {
    /* anchored to the fixed bar, not to the viewport */
    position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--cream);
    border-bottom: 1px solid var(--border);
    padding: 8px var(--gutter) 22px;
    box-shadow: 0 22px 44px -26px rgba(8,32,82,0.5);
    clip-path: inset(0 0 100% 0);
    transition: clip-path 0.42s var(--ease);
  }
  .nav__links.is-open { clip-path: inset(0 0 0 0); }
  .nav__links .nav__link {
    display: block;
    font-size: 17px; font-weight: 500;
    padding: 15px 2px;
    border-bottom: 1px solid var(--border);
  }
  .nav__links .nav__link::after { display: none; }
  .nav__cta { margin-top: 18px; font-size: 15px; padding: 15px 20px; }
}

/* ══════════════════════════════════════════════════════════════════════════
   The WhatsApp call in the bar gets its own signature, not the sweep
   ══════════════════════════════════════════════════════════════════════════ */
.nav__cta {
  position: relative;
  overflow: visible;
  background: var(--accent-solid);
  border-color: var(--accent-solid);
  color: #fff;
}
.nav__cta::before { display: none; }          /* no sweeping fill here */
/* a ring breathes outward every few seconds, twice, then rests */
.nav__cta::after {
  content: ''; position: absolute; inset: 0;
  border-radius: inherit;
  border: 1.5px solid var(--accent-solid);
  opacity: 0; pointer-events: none;
}
.js .nav__cta::after { animation: ctaRing 5.5s var(--ease) infinite; }
@keyframes ctaRing {
  0%           { transform: scale(1);    opacity: 0.65; }
  14%, 100%    { transform: scale(1.32); opacity: 0; }
}
.nav__cta:hover, .nav__cta:focus-visible {
  color: #fff;
  background: var(--accent-hover);
  border-color: var(--accent-hover);
  transform: translateY(-1px);
}
.nav__cta:hover::after, .nav__cta:focus-visible::after { animation: none; opacity: 0; }
/* the label steps aside and the glyph arrives */
.nav__cta .cta-label { transition: transform 0.4s var(--ease); display: inline-block; }
.nav__cta .cta-glyph {
  width: 0; overflow: hidden; opacity: 0;
  display: inline-flex; align-items: center;
  transition: width 0.4s var(--ease), opacity 0.35s var(--ease) 0.06s;
}
.nav__cta .cta-glyph svg { width: 16px; height: 16px; flex: none; }
.nav__cta:hover .cta-glyph, .nav__cta:focus-visible .cta-glyph { width: 24px; opacity: 1; }
.nav__cta:hover .cta-label, .nav__cta:focus-visible .cta-label { transform: translateX(2px); }

@media (prefers-reduced-motion: reduce) {
  .js .nav__cta::after { animation: none; }
    }

/* A single Hebrew letter as the card's mark — no emoji anywhere on the site */
.card__mark {
  display: block;
  font-size: 42px; font-weight: 800; line-height: 1;
  color: var(--accent-ink);
  margin-bottom: 20px;
}

/* ── The club's seven levels ─────────────────────────────────────────────
   A single strip under the community cards. The letters are decoration and
   are hidden from screen readers; the sentence beside them carries the whole
   meaning, so nothing is lost when they are not read out. */
.club-levels {
  margin-top: 40px;
  display: flex; align-items: center; gap: 26px; flex-wrap: wrap;
  justify-content: center;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 26px 30px;
}
.club-levels__letters {
  display: flex; align-items: baseline; gap: 10px;
  font-size: 30px; font-weight: 800; line-height: 1;
  color: var(--accent-ink);
}
/* Each letter a step paler than the one before: the row reads as a climb
   rather than as seven equal things. */
.club-levels__letters span:nth-child(1) { opacity: 1; }
.club-levels__letters span:nth-child(2) { opacity: 0.9; }
.club-levels__letters span:nth-child(3) { opacity: 0.8; }
.club-levels__letters span:nth-child(4) { opacity: 0.7; }
.club-levels__letters span:nth-child(5) { opacity: 0.6; }
.club-levels__letters span:nth-child(6) { opacity: 0.5; }
.club-levels__letters span:nth-child(7) { opacity: 0.4; }
.club-levels__note {
  flex: 1 1 340px; min-width: 0;
  font-size: 15px; line-height: 1.75; color: var(--text-2); margin: 0;
}
@media (max-width: 700px) {
  .club-levels { flex-direction: column; align-items: flex-start; gap: 16px; padding: 22px 20px; }
  .club-levels__note { flex-basis: auto; }
}

/* ══════════════════════════════════════════════════════════════════════════
   THE THREE STAGES — the page locks while you scroll through them
   The section is tall; a sticky panel holds still inside it, and scroll
   progress decides which stage is on screen.
   ══════════════════════════════════════════════════════════════════════════ */
.stages { position: relative; }
.js .stages { height: 340vh; }
@media (max-width: 900px) { .js .stages { height: 300vh; } }

.stages__pin {
  padding: var(--section-y) var(--gutter);
}
.js .stages__pin {
  position: sticky; top: 0;
  height: 100svh;
  display: grid; align-content: center;
  padding: clamp(74px, 11vh, 118px) var(--gutter) clamp(40px, 6vh, 70px);
  overflow: hidden;
}
.stages__inner { width: 100%; max-width: var(--wide); margin-inline: auto; position: relative; z-index: 2; }
.stages__head { text-align: center; }
.stages__head .h2 { margin-top: 18px; }
.stages__head .lead { max-width: 58ch; margin: 18px auto 0; }

.stages__deck {
  position: relative;
  margin-top: clamp(22px, 3.4vh, 50px);
  min-height: clamp(300px, 44vh, 370px);
}
.stage {
  display: grid; gap: clamp(18px, 3vw, 46px);
  grid-template-columns: 1fr;
  align-items: center;
  text-align: center;
}
.js .stage {
  position: absolute; inset: 0;
  opacity: 0; transform: translateY(26px);
  transition: opacity 0.28s ease, transform 0.5s var(--ease);
  pointer-events: none;
}
.js .stage.is-active {
  opacity: 1; transform: none; pointer-events: auto;
  transition: opacity 0.5s ease 0.2s, transform 0.7s var(--ease) 0.12s;
}
.js .stage.is-past { opacity: 0; transform: translateY(-30px); }
@media (min-width: 860px) {
  .stage { grid-template-columns: minmax(150px, 230px) 1fr; text-align: left; }
}
.stage:not(:first-child) { margin-top: clamp(40px, 7vw, 80px); }
.js .stage:not(:first-child) { margin-top: 0; }

.stage__glyph {
  font-size: clamp(66px, 13vw, 172px);
  font-weight: 800; line-height: 0.82;
  color: var(--accent-solid);
  letter-spacing: -0.02em;
}
.section--navy .stage__glyph { color: var(--peach); }
.stage__tag {
  display: block;
  font-size: 11px; font-weight: 700; letter-spacing: 0.22em;
  text-transform: uppercase; color: var(--accent-ink);
  margin-bottom: 12px;
}
.section--navy .stage__tag { color: var(--peach-deep); }
.stage h3 {
  font-size: clamp(23px, 3.1vw, 38px); font-weight: 700;
  letter-spacing: -0.025em; line-height: 1.15; color: var(--navy);
  margin-bottom: 14px; text-wrap: balance;
}
.section--navy .stage h3 { color: var(--cream); }
.stage p {
  font-size: clamp(14.5px, 1.45vw, 18px); line-height: 1.7;
  color: var(--text-2); max-width: 54ch;
}
.section--navy .stage p { color: rgba(248,240,229,0.72); }
@media (min-width: 860px) { .stage p { margin-inline: 0; } }
@media (max-width: 859px) { .stage p { margin-inline: auto; } }

.stages__meter {
  display: flex; justify-content: center; align-items: center; gap: 10px;
  margin-top: clamp(24px, 4vh, 46px);
}
.stages__meter i {
  width: 46px; height: 3px; border-radius: 2px;
  background: rgba(255,228,214,0.24);
  transition: background 0.5s var(--ease), width 0.5s var(--ease);
}
.stages__meter i.is-on { background: var(--peach); width: 74px; }
.stages__meter span {
  font-size: 11px; font-weight: 700; letter-spacing: 0.2em;
  text-transform: uppercase; color: rgba(248,240,229,0.6);
  margin-left: 8px;
}

/* letters crossing the panel — shared by both navy bands */
.stages__flyers,
.brandstrip__flyers { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 1; }
.stages__flyers b,
.brandstrip__flyers b {
  position: absolute;
  font-weight: 800; line-height: 1;
  color: var(--peach); opacity: 0.055;
  will-change: transform;
}

/* ══════════════════════════════════════════════════════════════════════════
   THE ROUTE — the four method cards sit along a walking trail
   ══════════════════════════════════════════════════════════════════════════ */
.trail { position: relative; }

/* ── The method plays as a sequence of camera moves ───────────────────────
   The section is several screens tall with a sticky panel inside it. Scroll
   position — never scroll events — picks the stage, so a fast flick lands on
   the right one instead of queueing them up. Stage 0 holds on the heading and
   the proverb; stages 1-4 move the camera to each step along the route. */
.method-pin { position: relative; margin-top: clamp(46px, 7vw, 76px); }
.js .method-pin { height: calc(100vh + 5 * 132vh); }
.js .method-pin__inner {
  position: sticky; top: 0;
  height: 100svh;
  display: grid; align-content: center;
  padding: 84px 0 26px;
  overflow: hidden;
}
/* the two stages occupy the same cell and cross-fade */
.js .method-stage { grid-area: 1 / 1; }
/* The outgoing layer clears before the incoming one arrives, so the two
   never sit on top of each other mid-transition. */
.js .method-stage--intro,
.js .method-stage--trail {
  transition: opacity 0.28s ease, transform 0.7s var(--ease);
}
.js .method-stage--intro { opacity: 0; transform: scale(0.94); }
.js .method-stage--intro.is-live {
  opacity: 1; transform: none;
  transition: opacity 0.45s ease 0.2s, transform 0.7s var(--ease);
}
/* once the sequence moves on, the camera pushes through the intro */
.js .method-stage--intro.is-past { opacity: 0; transform: scale(1.14); }

.js .method-stage--trail { opacity: 0; transform: scale(0.96); pointer-events: none; }
.js .method-stage--trail.is-live {
  opacity: 1; transform: none; pointer-events: auto;
  transition: opacity 0.45s ease 0.2s, transform 0.7s var(--ease);
}

.js .method-pin .trail { transition: transform 0.75s var(--ease); will-change: transform; }

/* compact enough that all four steps sit in one screen while pinned */
.js .method-pin .card { padding: 15px 22px 17px; border-radius: 12px; }
.js .method-pin .trail__stop .card__num { padding: 4px 10px; margin-bottom: 8px; font-size: 11.5px; min-width: 38px; }
.js .method-pin .trail__stop .h3 { font-size: clamp(15px, 1.4vw, 17px); margin-bottom: 5px; }
.js .method-pin .trail__stop .body { font-size: clamp(13px, 1.2vw, 14.5px); line-height: 1.58; }
.js .method-pin .trail__stops { gap: clamp(6px, 1.1vh, 14px); }
.js .method-pin .proverb { margin-top: 30px; }

.js .trail__stop {
  transition: transform 0.45s var(--ease), opacity 0.45s var(--ease), box-shadow 0.45s var(--ease);
}
.js .method-pin .trail__stop { opacity: 0.3; transform: scale(0.94); }
.js .method-pin .trail__stop.is-step {
  opacity: 1; transform: scale(1.05);
  box-shadow: 0 24px 52px -24px rgba(8,32,82,0.55);
}

/* Phones get the focus effect without the page being held hostage. */
@media (max-width: 767px) {
  .js .method-pin { height: auto; }
  .js .method-pin__inner { position: static; height: auto; overflow: visible; }
  .js .method-stage { grid-area: auto; opacity: 1 !important; transform: none !important; }
  .js .method-pin .trail__stop { opacity: 1; transform: none; }
  .js .brandstrip-pin { height: auto; }
  .js .brandstrip-pin__inner { position: static; height: auto; overflow: visible; }
  .js .method-pin .card { padding: 26px 24px 28px; }
  .js .trail__stop.reveal { transform: translateY(24px) scale(0.94); }
  .js .trail__stop.reveal.is-in { transform: none; }
}
.trail__map { position: absolute; inset: 0; pointer-events: none; }
.trail__map svg { width: 100%; height: 100%; display: block; }
.trail__line {
  fill: none;
  stroke: var(--border);
  stroke-width: 2;
  stroke-linecap: butt;
  /* non-scaling-stroke also pins the dash units to screen pixels, so 8/8
     stays 8/8 no matter how far the viewBox is stretched */
  vector-effect: non-scaling-stroke;
  stroke-dasharray: 8 8;
}
.trail__line--walked {
  stroke: var(--accent-solid);
  stroke-width: 2.5;
  stroke-dasharray: 8 8;
}
/* the dashes crawl forward, so the route reads as a live thing */
.js .trail__line { animation: trailCrawl 1.9s linear infinite; }
@keyframes trailCrawl { to { stroke-dashoffset: -16; } }

/* The single marker on the route. Scroll drives it — forward and back.
   It rides under the cards: with the camera zoomed on one of them, a marker
   above would land on top of that card's own text. */
.trail__walker {
  position: absolute; z-index: 1;
  display: flex; align-items: center; gap: 9px;
  transform: translate(-50%, -50%);
  pointer-events: none; user-select: none;
  opacity: 0;
  transition: opacity 0.35s var(--ease);
}
.trail__walker.is-on { opacity: 1; }
.trail__walker b {
  font-size: 36px; font-weight: 800; line-height: 1;
  color: var(--navy);
  text-shadow: 0 3px 10px rgba(8,32,82,0.28);
}
.trail__count {
  font-style: normal;
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.16em;
  color: var(--accent-ink);
  background: var(--cream);
  padding: 3px 7px; border-radius: 5px;
  box-shadow: 0 1px 4px rgba(8,32,82,0.14);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.section--tint .trail__count { background: var(--navy-tint); }
@media (max-width: 620px) { .trail__count { display: none; } }
.trail__path--wide { display: none; }
@media (min-width: 900px) {
  .trail__path--wide { display: block; }
  .trail__path--tall { display: none; }
}
.trail__stops { position: relative; z-index: 2; display: grid; gap: clamp(26px, 5vw, 54px); }
.trail__stop { width: 100%; border-top: 3px solid var(--accent-solid); }

/* ── Weighted scrolling ───────────────────────────────────────────────────
   Lenis drives the page with a lerp so free scrolling carries some mass.
   Page-level CSS scroll-snap is deliberately absent: a snap point and a
   lerped scroll fight each other and the page stutters between them. */
html.lenis, html.lenis body { height: auto; }
html.lenis { scroll-behavior: auto !important; }   /* Lenis owns it now */
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }

@media (min-width: 900px) {
  .trail__stop { width: min(430px, 46%); }
  .trail__stop:nth-child(even) { margin-inline-start: auto; }
}

/* ══════════════════════════════════════════════════════════════════════════
   A light runs the perimeter of anything worth clicking
   ══════════════════════════════════════════════════════════════════════════ */
@property --spark-angle { syntax: '<angle>'; initial-value: 0deg; inherits: false; }

.btn--accent, .btn--wa, .nav__cta { isolation: isolate; }
.btn--accent::after, .btn--wa::after, .nav__cta::after {
  content: '';
  position: absolute; inset: -1.5px;
  border-radius: inherit;
  padding: 2px;
  background: conic-gradient(
    from var(--spark-angle),
    transparent 0deg 216deg,
    rgba(255,255,255,0.28) 250deg,
    rgba(255,255,255,0.95) 274deg,
    rgba(255,255,255,0.28) 298deg,
    transparent 332deg 360deg);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
          mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
  z-index: 2;
  opacity: 0;
}
.js .btn--accent::after, .js .btn--wa::after, .js .nav__cta::after {
  opacity: 1;
  animation: sparkRun 3.4s linear infinite;
}
@keyframes sparkRun { to { --spark-angle: 360deg; } }
.btn--wa::after {
  background: conic-gradient(
    from var(--spark-angle),
    transparent 0deg 216deg,
    rgba(8,32,82,0.22) 250deg,
    rgba(8,32,82,0.8) 274deg,
    rgba(8,32,82,0.22) 298deg,
    transparent 332deg 360deg);
}
.btn--accent:hover::after, .btn--wa:hover::after, .nav__cta:hover::after {
  animation-duration: 1.5s;
}

@media (prefers-reduced-motion: reduce) {
  .js .stages { height: auto !important; }
  .js .stages__pin { position: static; height: auto; overflow: visible; }
  .js .stage { position: static; opacity: 1 !important; transform: none !important; pointer-events: auto; }
  .js .stage:not(:first-child) { margin-top: 48px; }
  .stages__flyers, .brandstrip__flyers { display: none; }
  .trail__line { animation: none; }
  .trail__walker { display: none; }
  .js .method-pin { height: auto; }
  .js .method-pin__inner { position: static; height: auto; overflow: visible; }
  .js .method-stage { grid-area: auto; opacity: 1 !important; transform: none !important; }
  .js .method-pin .trail__stop { opacity: 1; transform: none; }
  .js .brandstrip-pin { height: auto; }
  .js .brandstrip-pin__inner { position: static; height: auto; overflow: visible; }
  .js .btn--accent::after, .js .btn--wa::after, .js .nav__cta::after { animation: none; opacity: 0; }
}

/* trail path layers */
.trail__path--wide { position: absolute; inset: 0; }
/* a fixed-width gutter for the route keeps it clear of the cards at every
   screen size, instead of a percentage that drifts under them */
.trail__path--tall { position: absolute; left: 0; top: 0; bottom: 0; width: 46px; }
@media (max-width: 899px) {
  .trail__stops { padding-left: 64px; }
}
@media (max-width: 420px) {
  .trail__path--tall { width: 34px; }
  .trail__stops { padding-left: 48px; }
}

/* a little more warmth behind the hero */
.hero {
  background: linear-gradient(168deg, var(--peach) 0%, var(--navy-tint) 55%, var(--navy-tint) 100%);
}

/* the floating WhatsApp button sits bottom-left; keep the stage meter clear of it */
@media (max-width: 760px) {
  .js .stages__pin { padding-bottom: 92px; }
  .stages__meter { flex-wrap: wrap; row-gap: 8px; }
}

/* ══════════════════════════════════════════════════════════════════════════
   HERO — a ring of the alphabet turning behind the headline
   ══════════════════════════════════════════════════════════════════════════ */
/* The ring centres on the headline, not on the hero — the hero's own middle
   sits down among the buttons because of the space the fan needs above them. */
.hero__head { position: relative; z-index: 2; margin-top: 26px; width: 100%; }
.hero__head > .display,
.hero__head > .hero__sub { position: relative; z-index: 1; }
/* The ring encircles the whole text block and is wide enough that the
   letters travel well outside it. The extra hero padding below keeps the top
   of the arc clear of the fixed bar. */
/* A true circle: square box, equal radii, no non-uniform scaling anywhere.
   Centred with left/top + translate rather than inset:0 + margin:auto — an
   absolutely positioned box wider than its container is over-constrained, the
   spec drops `right`, and margin:auto silently stops centring it. */
.hero__ring {
  position: absolute; left: 50%; top: 50%;
  width: min(104vw, 880px); aspect-ratio: 1;
  transform: translate(-50%, -50%);
  z-index: 0;
  pointer-events: none;
}
@media (max-width: 700px) {
  .hero__ring { width: min(150vw, 880px); }
}
.hero__ring svg { width: 100%; height: 100%; overflow: visible; }
/* each letter is its own element now, placed at an exact angle — no
   letter-spacing, which is what made the run uneven along a path */
.hero__ring text {
  font-family: inherit;
  font-size: 40px; font-weight: 500;
  fill: var(--accent-ink);
  opacity: 0.34;
}
@media (max-width: 700px) { .hero__ring text { font-size: 46px; } }
.hero__ring-dash {
  fill: none;
  stroke: var(--navy); stroke-opacity: 0.14;
  stroke-width: 1.2; stroke-dasharray: 3 9;
}
.js .hero__ring-outer { animation: ringSpin 130s linear infinite;         transform-origin: 50% 50%; }
.js .hero__ring-inner { animation: ringSpin 220s linear infinite reverse; transform-origin: 50% 50%; }
@keyframes ringSpin { to { transform: rotate(360deg); } }

/* ══════════════════════════════════════════════════════════════════════════
   The beginners-course button deals a fan of teacher cards
   ══════════════════════════════════════════════════════════════════════════ */
.course-wrap { position: relative; display: inline-block; }
.course-wrap .btn {
  position: relative; z-index: 2;
  background: var(--navy-tint);       /* the cards tuck away behind it */
}

.fan {
  position: absolute; left: 50%; bottom: calc(100% - 26px);
  width: 0; height: 0;
  pointer-events: none; z-index: 0;
}
.mini {
  pointer-events: auto;
  position: absolute; left: -52px; bottom: 0;
  width: 104px; aspect-ratio: 2 / 3;
  padding: 0; border: 0; border-radius: 10px; overflow: hidden;
  background: var(--cream); cursor: pointer;
  transform-origin: 50% 115%;
  box-shadow: 0 14px 28px -14px rgba(8,32,82,0.55), 0 0 0 3px #fff;
  transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.mini img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; }
/* a play button sits on every card */
.mini::after {
  content: ''; position: absolute; left: 50%; bottom: 10px;
  transform: translateX(-50%);
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--accent-solid);
  box-shadow: 0 2px 6px rgba(0,0,0,0.35);
}
.mini::before {
  content: ''; position: absolute; z-index: 1; left: 50%; bottom: 17px;
  transform: translateX(-40%);
  border-left: 9px solid #fff;
  border-top: 6px solid transparent; border-bottom: 6px solid transparent;
}
.m1 { transform: rotate(-22deg); z-index: 1; }
.m2 { transform: rotate(0deg) translateY(-8px); z-index: 3; }
.m3 { transform: rotate(22deg); z-index: 2; }
/* The whole cluster lifts and grows as one object — one transform, one
   transition — instead of each card animating on its own. */
.fan {
  transform-origin: 50% 100%;
  transition: transform 0.32s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.course-wrap:hover .fan,
.course-wrap:focus-within .fan { transform: scale(1.09) translateY(-10px); }
.mini:focus-visible { outline: 2.5px solid var(--accent-solid); outline-offset: 3px; }
.fan-label {
  position: absolute; left: 50%; transform: translateX(-50%);
  bottom: calc(100% + 152px); top: auto;   /* clears the top of the fan */
  font-size: 12px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--accent-ink); white-space: nowrap;
}

/* the fan deals itself out of the button on load */
@keyframes fanDeal { from { transform: rotate(0) translateY(60px); opacity: 0; } }
.js .m1, .js .m2, .js .m3 { animation: fanDeal 0.7s 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
.js .m2 { animation-delay: 0.6s; }
.js .m3 { animation-delay: 0.7s; }

/* room above the button row for the fan to occupy */
.hero__actions { padding-top: 182px; }

/* The three buttons stop fitting on one line at about 870px. Rather than let
   them wrap unpredictably — which drops the fan straight onto the button above
   it — stack them deliberately below 900 and move the clearance with the fan. */
@media (max-width: 900px) {
  .hero__actions {
    flex-direction: column; align-items: center;
    padding-top: 0;
  }
  /* Stacked, the row reads top to bottom, and the ask must not be the second
     thing read. On desktop the three sit left-middle-right in source order;
     here the middle one climbs back to the top. */
  .hero__actions .btn--accent { order: -1; }
  .course-wrap { margin-top: 186px; }
}
@media (max-width: 700px) {
  .mini { width: 78px; left: -39px; }
  .fan-label { bottom: calc(100% + 116px); font-size: 11px; }
  .course-wrap { margin-top: 148px; }
}

/* ── The popover player ───────────────────────────────────────────────── */
.player {
  position: fixed; inset: 0; z-index: 9500;
  background: rgba(8,32,82,0.74);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  display: grid; place-items: center;
  padding: 74px 5vw 5vw;              /* room above for the close control */
}
.player[hidden] { display: none; }
/* the box clips its own corners, so the close control lives outside it */
.player__stage { position: relative; width: min(92vw, 720px); }
.player__box {
  position: relative; width: 100%; aspect-ratio: 16 / 9;
  background: #000; border-radius: 14px; overflow: hidden;
  box-shadow: 0 30px 80px rgba(0,0,0,0.5);
}
.player__frame, .player__frame iframe {
  position: absolute; inset: 0; width: 100%; height: 100%; border: 0;
}
/* a bare white glyph disappears over a pale page behind the blur, so the
   close control carries its own disc */
.player__close {
  position: absolute; top: -52px; right: 0;
  width: 40px; height: 40px; padding: 0;
  display: grid; place-items: center;
  background: rgba(248,240,229,0.16); border: 1.5px solid rgba(248,240,229,0.5);
  border-radius: 50%; color: #fff;
  font-size: 26px; line-height: 1; cursor: pointer;
  transition: background 0.2s var(--ease), border-color 0.2s var(--ease);
}
.player__close:hover { background: rgba(248,240,229,0.3); border-color: var(--cream); }
.player__close:focus-visible { outline: 2.5px solid var(--peach); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  .js .hero__ring-outer, .js .hero__ring-inner { animation: none; }
  .mini, .js .m1, .js .m2, .js .m3 { transition: none; animation: none; }
}

/* ══════════════════════════════════════════════════════════════════════════
   The daily-word button deals its own fan — same tilt, stacking, radius and
   shadow as the teacher one; only the card's proportion differs
   ══════════════════════════════════════════════════════════════════════════ */
.word-wrap { position: relative; display: flex; }
.word-wrap .btn { position: relative; z-index: 2; }

.mini--word {
  aspect-ratio: 4 / 5;          /* the cards are 2334x2917 */
  pointer-events: none;         /* they illustrate; they do not click */
  cursor: default;
}
.mini--word::before, .mini--word::after { display: none; }   /* no play button */
.mini--word img { object-position: center top; }

/* slightly narrower than the teacher cards so the two fans keep their distance */
.fan--words .mini { left: -48px; width: 96px; }
.word-wrap:hover .fan--words,
.word-wrap:focus-within .fan--words { transform: scale(1.09) translateY(-10px); }

@media (max-width: 900px) {
  .word-wrap { margin-top: 158px; }
}
@media (max-width: 700px) {
  .fan--words .mini { left: -36px; width: 72px; }
  .word-wrap .fan-label { bottom: calc(100% + 104px); }
  .word-wrap { margin-top: 134px; }
}

/* ══════════════════════════════════════════════════════════════════════════
   Checkout details form
   ══════════════════════════════════════════════════════════════════════════ */
.payform { margin-top: 30px; }
.payform__legend {
  font-size: 19px; font-weight: 600; color: var(--navy);
  margin: 0 0 4px;
}
.payform__note { font-size: 14px; color: var(--text-2); margin: 0 0 20px; }
.payform__grid {
  display: grid; gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.payfield--wide { grid-column: 1 / -1; }
.payfield label {
  display: block;
  font-size: 12.5px; font-weight: 600; letter-spacing: 0.05em;
  text-transform: uppercase; color: var(--text-2);
  margin-bottom: 7px;
}
.payfield label .req { color: var(--accent-ink); }
.payfield input,
.payfield select {
  width: 100%;
  font-family: inherit; font-size: 15.5px; color: var(--navy);
  background: var(--cream);
  border: 1.5px solid var(--border); border-radius: 10px;
  padding: 13px 15px;
  transition: border-color 0.18s ease, background 0.18s ease;
}
.payfield select { cursor: pointer; }
.payfield input:hover, .payfield select:hover { border-color: rgba(8,32,82,0.3); }
.payfield input:focus, .payfield select:focus {
  outline: 2.5px solid var(--accent-solid); outline-offset: 2px;
  border-color: transparent; background: var(--surface);
}
.payfield.is-bad input, .payfield.is-bad select { border-color: var(--danger); background: rgba(179,38,30,0.05); }
.payfield__err {
  display: none;
  font-size: 13px; font-weight: 500; color: var(--danger); margin-top: 6px;
}
.payfield.is-bad .payfield__err { display: block; }

/* Hebrew halves of the bilingual blocks read right-to-left */
.rtl { direction: rtl; text-align: right; }
.consent .rtl { display: block; margin-top: 8px; }
.doc .rtl h3 { margin-top: 0; }
.doc .rtl ul, .doc .rtl ol { margin-left: 0; margin-right: 22px; }
.lang-split {
  display: grid; gap: 22px;
  grid-template-columns: 1fr;
  border-inline-start: 3px solid var(--border);
  padding-inline-start: 22px;
  margin-top: 16px;
}
@media (min-width: 900px) { .lang-split { grid-template-columns: 1fr 1fr; gap: 34px; } }
.lang-split > section > h3 {
  font-size: 12px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--accent-ink); margin: 0 0 10px;
}