/* =========================================================
   AI Architect — Landing page
   Aesthetic: "Authority + Action" — warm-white base · navy authority · orange action · NO red (A1+B2+C1)
   RTL-first. Logical properties only. GPU-safe motion.
   ========================================================= */

:root {
  /* color — "Authority + Action": warm-white base · navy authority · orange action · NO red (B2) */
  --bg:            #FFFFFF;   /* base white (60%) — user-set: pure white */
  --bg-elev:       #FFFFFF;   /* white surface (cards, modal) */
  --surface:       rgba(15,31,61,0.04);   /* navy-tint fill on light */
  --surface-2:     rgba(15,31,61,0.07);
  --hairline:      #E2E0DA;   /* light gray border/divider */
  --hairline-strong: rgba(15,31,61,0.20);
  --text:          #1A1A2E;   /* near-black (headings/base) — 15.9:1 on --bg */
  --text-muted:    #6A6A7C;   /* muted captions — 4.9:1 (AA) */
  --accent:        #F47C20;   /* CTA orange (action, 10%) */
  --accent-2:      #D4620E;   /* deeper orange — hover + large-text callouts (3.5:1 large) */
  --glow-a:        rgba(244,124,32,0.28);  /* soft orange CTA halo */
  --glow-b:        rgba(244,124,32,0.16);

  /* authority + named accents */
  --color-dark:    #0F1F3D;   /* deep navy — hero/footer/dark sections (30%) */
  --color-gold:    #E8A020;   /* social proof only: stars, badges, "most popular" */
  --color-error:   #C0392B;   /* semantic error ONLY (accessible 5:1; NOT the brand red) */
  --claude-clay:   #D87854;   /* Claude Code logo terracotta — sampled from assets/claude-code-blocks.png (5.25:1 on navy) */
  /* ---- section-variety palette (additive; breaks the flat 2-tone) — AA verified ---- */
  --bg-cream:       #FFFFFF;   /* user: pure white (was warm sand #F5F1E8) */
  --bg-cream-2:     #FFFFFF;   /* user: pure white (was deeper sand #F3EEE3) */
  --wash-gold:      #FFFFFF;   /* user: pure white (was gold wash #F9F6EF) */
  --wash-trust:     #FFFFFF;   /* user: pure white (was trust wash #F1F4F2) */
  --navy-lift:      #16273F;   /* soft lighter navy (top of depth gradient; white 15:1) */
  --navy-deep:      #0C1A33;   /* deeper navy (bottom of depth gradient) */
  --gold-edge:      rgba(232,160,32,0.55);  /* gold hairline — social-proof cards */
  --accent-edge:    rgba(244,124,32,0.5);   /* orange hairline — action-adjacent cards */
  --grain-strength: 0.025;     /* film-grain opacity on light sections (single knob) */

  /* aurora retired (C1 flat light) — kept transparent so any stray reference is invisible */
  --aurora-crimson: transparent; --aurora-rose: transparent; --aurora-violet: transparent;
  --aurora-magenta: transparent; --aurora-teal: transparent;

  /* TRUST — soft green (guarantee, checkmarks, secure-payment cue) */
  --trust:         #2D7A4F;
  --trust-2:       #2D7A4F;
  --trust-strong:  #246A43;
  --trust-glow:        rgba(45,122,79,0.18);
  --trust-glow-soft:   rgba(45,122,79,0.10);
  --trust-ring:        rgba(45,122,79,0.30);

  /* dark text ramp on the warm-white base */
  --text-strong:   #2A2A3A;
  --heading:       #1A1A2E;
  --text-body:     #3D3D4E;   /* charcoal long-form body — 9.9:1 */
  --text-soft:     #5A5A6C;   /* secondary copy — ~6:1 (AA) */

  --warm-glow-soft: rgba(244,124,32,0.07);   /* faint warm underlight on the offer card */

  /* type — luxury editorial: high-contrast Hebrew serif display + humanist sans body/UI */
  --font-display: 'Frank Ruhl Libre', 'David Libre', Georgia, serif;
  --font-body:    'Assistant', system-ui, sans-serif;
  --font-impact:  'Heebo', system-ui, sans-serif;   /* heavy grotesk — the scarcity hook only */
  --font-title:   'Heebo', system-ui, sans-serif;   /* section titles — heavy geometric grotesk (user 2026-06-18) */
  --fs-hero: clamp(2.05rem, 8.4vw, 5.75rem);  /* floor keeps the headline on 360px; ceiling lifted for desktop presence */
  --fs-h2:   clamp(1.95rem, 4.7vw, 3.55rem);
  --fs-h3:   clamp(1.22rem, 2.4vw, 1.6rem);
  --fs-body: clamp(1.04rem, 1.35vw, 1.2rem);
  --fs-small: 0.9rem;
  --lh-body:  1.75;          /* Hebrew long-form on dark wants a touch more leading */
  --lh-tight: 1.12;          /* big DISPLAY line-height (hero) */
  --lh-heading: 1.2;         /* multi-line Hebrew section headings need a touch more leading than Latin */
  --flow:     1.15em;        /* single source of truth for paragraph rhythm */
  --tracking-heading: 0;  /* Hebrew: NEVER add/subtract letter-spacing (hebrew-rtl skill) */

  /* space / radius */
  --space-section: clamp(3.5rem, 8.5vw, 8rem);  /* confident, editorial breathing room (airier on desktop) */
  --radius:       1.5rem;
  --radius-inner: 1.125rem;
  --maxw: 1180px;
  --maxw-narrow: 760px;

  /* motion */
  --ease-signature: cubic-bezier(0.22, 0.61, 0.16, 1);
  --ease-out:       cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out-expo:  cubic-bezier(0.16, 1, 0.3, 1);  /* named alias for the count-up + offer reveal */
  --dur-fast: 220ms; --dur-mid: 520ms; --dur-slow: 820ms;
  --dur-reveal-offer: 720ms;  /* offer price-card emphasis reveal */
  --dur-count: 1600ms;        /* trust counter odometer roll */
  --reveal-rise: 28px;        /* shared reveal travel distance (token-ised) */
  --orb-drift: 26s;           /* ambient orb drift cycle (reduced-motion disables) */
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.7;
  color: var(--text);
  background: var(--bg);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-kerning: normal;
  -webkit-tap-highlight-color: transparent; /* no grey flash on mobile tap (we have :active + focus) */
}
a, button, summary, input, .btn { touch-action: manipulation; } /* kill the 300ms double-tap-zoom delay */
img, svg, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
/* honor the `hidden` attribute even on elements given display:grid/flex elsewhere
   (used to keep unfilled scaffolds — value ledger, testimonials — out of the page) */
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }

.num { font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; }

/* ---------- skip link ---------- */
.skip-link {
  position: absolute; inset-inline-start: 1rem; inset-block-start: 1rem;
  background: var(--accent); color: #fff; padding: .7rem 1.1rem; border-radius: 10px;
  z-index: 200; transform: translateY(calc(-100% - 2rem)); transition: transform var(--dur-fast);  /* GPU-safe: move via transform, not top */
}
.skip-link:focus { transform: none; }

/* ---------- layout ---------- */
.container { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: clamp(1.2rem, 4vw, 2.5rem); }
.container.narrow { max-width: var(--maxw-narrow); }
.center { text-align: center; }
.section { padding-block: var(--space-section); position: relative; }
/* anchor jumps (smooth-scroll) land below the sticky nav instead of under it */
.section[id], #main, #video-intro { scroll-margin-block-start: 5.5rem; }

/* NOTE: the per-section ::before "colour journey" glows were REMOVED. Each painted a glow at its
   section's TOP edge (at … 0%) that faded downward, so stacked sections produced a brightness step
   — a visible horizontal SEAM at every section boundary. The fixed aurora (orbs + base-wash) now
   carries colour smoothly and seamlessly across the whole page, so those glows were both redundant
   and the sole cause of the banding. */

/* ---------- atmosphere: animated AURORA + grain (deep colored light that opposes the black) ---------- */
.bg-atmosphere { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
/* rich STATIC base wash — colour is present even under reduced-motion (orbs add the motion) */
.bg-atmosphere::before {
  content: ""; position: absolute; inset: -12%; filter: blur(46px);
  background:
    radial-gradient(36% 30% at 84% -4%, var(--aurora-crimson), transparent 60%),
    radial-gradient(34% 30% at 10% 10%, var(--aurora-violet),  transparent 62%),
    radial-gradient(42% 36% at 52% 118%, var(--aurora-rose),   transparent 60%),
    radial-gradient(28% 26% at 98% 64%, var(--aurora-magenta), transparent 60%);
}
/* PERF: blur is baked ONCE into the compositor layer; orbs only translate (never scale),
   so the expensive blur is never re-rasterized per frame. */
.orb { position: absolute; border-radius: 50%; filter: blur(80px); will-change: transform; }
.orb-1 { inline-size: 54vw; block-size: 54vw; inset-block-start: -14vw; inset-inline-end: -10vw;
  background: radial-gradient(circle at 50% 50%, var(--aurora-crimson), transparent 72%); opacity: 1; }
.orb-2 { inline-size: 50vw; block-size: 50vw; inset-block-start: 36vh; inset-inline-start: -16vw;
  background: radial-gradient(circle at 50% 50%, var(--aurora-violet), transparent 72%); opacity: .96; }
.orb-3 { inline-size: 46vw; block-size: 46vw; inset-block-start: 70vh; inset-inline-end: 0vw;
  background: radial-gradient(circle at 50% 50%, var(--aurora-rose), transparent 72%); opacity: .92; }
.grain {
  position: absolute; inset: 0; opacity: .035; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
main, .nav-wrap, .footer { position: relative; z-index: 1; }

/* ---------- glass primitive ---------- */
.glass {
  background: linear-gradient(160deg, rgba(255,255,255,0.07), rgba(255,255,255,0.025));
  border: 1px solid var(--hairline);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  box-shadow: 0 1px 0 rgba(255,255,255,0.06) inset, 0 24px 60px -28px rgba(0,0,0,0.8);
}

/* =========================================================
   NAV
   ========================================================= */
.nav-wrap { position: sticky; inset-block-start: 0; z-index: 100;
  padding-block-start: clamp(.45rem,1.4vw,.9rem);   /* smaller banner (user) */
  padding-inline: env(safe-area-inset-right) env(safe-area-inset-left); /* clear the notch on landscape */ }
.nav {
  max-width: var(--maxw); margin-inline: auto;
  display: flex; align-items: center; gap: 1.5rem;
  padding-block: .4rem; padding-inline-start: 1.25rem; padding-inline-end: .7rem; border-radius: 999px;
  width: calc(100% - clamp(1.6rem, 6vw, 3rem)); margin-inline: auto;
}
.brand { display: inline-flex; align-items: center; gap: .55rem; font-family: var(--font-display); }
.brand-mark { inline-size: 1.45rem; block-size: 1.45rem; border-radius: 7px;
  background: var(--claude-clay);  /* match the CLAUDE CODE logo clay (user) */
  box-shadow: 0 0 16px rgba(216,120,84,0.35); }
.brand-name { font-weight: 900; letter-spacing: .01em; font-size: 1.06rem; }
.brand-ai { color: var(--accent); margin-inline-start: .18em; }
.nav-links { display: flex; gap: 1.6rem; margin-inline-start: auto; font-weight: 600; }
.nav-links a { position: relative; color: var(--text-muted); transition: color var(--dur-fast); }
.nav-links a::after { content: ""; position: absolute; inset-inline: 0; inset-block-end: -.4rem; block-size: 2px;
  border-radius: 2px; background: var(--accent); transform: scaleX(0);
  transition: transform var(--dur-mid) var(--ease-signature); } /* center-out (default origin) -> RTL-neutral */
.nav-links a:hover { color: var(--text); }
.nav-links a:hover::after, .nav-links a:focus-visible::after { transform: scaleX(1); }
.nav-cta { margin-inline-start: .25rem; }
.nav-toggle { display: none; }

.mobile-menu { position: absolute; inset-inline: clamp(.8rem,3vw,1.5rem); inset-block-start: calc(100% + .5rem);
  display: flex; flex-direction: column; gap: .25rem; padding: 1rem; border-radius: 1.25rem; }
.mobile-menu[hidden] { display: none; }
.mobile-menu a { padding: .8rem 1rem; border-radius: 12px; color: var(--text-muted); font-weight: 600; }
.mobile-menu a:hover { background: var(--surface); color: var(--text); }
.mobile-menu .btn { margin-block-start: .4rem; justify-content: center; }

/* =========================================================
   NAV — MINIMAL (index only): persistent hamburger, no pill, no brand.
   Scoped to .nav-minimal so the funnel/legal pages keep their brand back-link nav.
   ========================================================= */
.nav-minimal { position: fixed; inset-block-start: 0; inset-inline: 0;
  padding-block-start: clamp(.55rem, 2.2vw, 1rem);
  /* guard against the notch in landscape (start=right in RTL) — mirrors .nav-wrap */
  padding-inline: max(clamp(.7rem, 3.5vw, 1.4rem), env(safe-area-inset-right)) max(clamp(.7rem, 3.5vw, 1.4rem), env(safe-area-inset-left));
  pointer-events: none; }                       /* hero stays clickable; toggle + menu re-enable below */
.nav-minimal .nav { display: flex; max-width: var(--maxw); margin-inline: auto;
  background: none; border: 0; box-shadow: none; padding: 0; width: auto; border-radius: 0; }
/* the "2 lines" — a persistent, always-legible frosted button on the inline-end side (LEFT in RTL).
   The subtle scrim keeps the white lines visible as the page scrolls over navy AND white sections. */
.nav-minimal .nav-toggle {
  display: inline-flex; flex-direction: column; gap: 6px; margin-inline-start: auto;
  align-items: center; justify-content: center; pointer-events: auto;
  inline-size: 46px; block-size: 46px; padding: .65rem; border-radius: 13px; cursor: pointer;
  background: rgba(15,31,61,0.42); border: 1px solid rgba(255,255,255,0.16);
  backdrop-filter: blur(10px) saturate(120%); -webkit-backdrop-filter: blur(10px) saturate(120%);
  box-shadow: 0 10px 26px -12px rgba(0,0,0,0.55);
  transition: background var(--dur-fast), border-color var(--dur-fast); }
.nav-minimal .nav-toggle:hover { background: rgba(15,31,61,0.58); border-color: rgba(255,255,255,0.30); }
.nav-minimal .nav-toggle span { inline-size: 22px; block-size: 2px; background: #fff; border-radius: 2px;
  transition: transform var(--dur-mid) var(--ease-signature), opacity var(--dur-fast); }
.nav-minimal .nav-toggle[aria-expanded="true"] span:first-child { transform: translateY(4px) rotate(45deg); }
.nav-minimal .nav-toggle[aria-expanded="true"] span:last-child { transform: translateY(-4px) rotate(-45deg); }
/* dropdown drops from the button, anchored to its (inline-end / LEFT) side; interactive despite the wrapper. */
.nav-minimal .mobile-menu { pointer-events: auto;
  inset-inline-start: auto; inset-inline-end: clamp(.7rem, 3.5vw, 1.4rem);
  inline-size: min(20rem, calc(100vw - 1.6rem)); }

/* =========================================================
   BUTTONS  (button-in-button trailing icon, magnetic press)
   ========================================================= */
.btn {
  --pad: .85rem 1.5rem;
  display: inline-flex; align-items: center; gap: .65rem; justify-content: center;
  font-family: var(--font-display); font-weight: 700; font-size: 1rem;
  padding: var(--pad); border-radius: 999px; border: 1px solid transparent; cursor: pointer;
  transition: transform var(--dur-fast) var(--ease-signature),
              box-shadow var(--dur-mid) var(--ease-signature),
              background var(--dur-mid), border-color var(--dur-mid);
}
/* promote a compositor layer only while interacting, not for the life of the page */
.btn:hover, .btn:active { will-change: transform; }
.btn:active { transform: scale(.97); }
.btn-sm { --pad: .55rem 1.1rem; font-size: .92rem; }
.btn-lg { --pad: 1.05rem 2rem; font-size: 1.08rem; }
.btn-block { width: 100%; }

.btn-primary {
  color: #fff;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  box-shadow: 0 10px 30px -8px var(--glow-a), 0 0 0 1px rgba(255,255,255,0.08) inset;
}
.btn-primary:hover { box-shadow: 0 16px 44px -10px var(--glow-a), 0 0 0 1px rgba(255,255,255,0.14) inset; transform: translateY(-2px); }
.btn-ghost { color: var(--text); background: var(--surface); border-color: var(--hairline); }
.btn-ghost:hover { background: var(--surface-2); border-color: var(--hairline-strong); transform: translateY(-2px); }

/* trailing icon nested circle */
.btn-icon {
  inline-size: 1.7em; block-size: 1.7em; border-radius: 50%;
  display: grid; place-items: center; font-size: .82em; line-height: 1;
  background: rgba(255,255,255,0.16);
  transition: transform var(--dur-mid) var(--ease-signature), background var(--dur-mid);
}
.btn:hover .btn-icon { transform: translateX(-4px) scale(1.06); background: rgba(255,255,255,0.26); }
.play-dot { color: var(--accent); display: inline-grid; place-items: center; font-size: .9em; }

/* =========================================================
   TYPOGRAPHY HELPERS
   ========================================================= */
/* demoted from a 9x-repeated bordered pill to a quiet kicker + short accent rule */
.eyebrow {
  /* centered by default so every section follows the same header structure */
  display: flex; justify-content: center; align-items: center; gap: .6rem;
  width: auto; margin-inline: auto;
  font-family: var(--font-display); font-weight: 600;
  /* Hebrew: no uppercase, no letter-spacing */
  font-size: .82rem;
  color: var(--text-soft); padding: 0; border: 0; background: none;
  margin-block-end: .85rem;   /* sits closer to its title -> reads as one header unit */
}
/* symmetric diamond on BOTH sides of every (now-centered) eyebrow */
.eyebrow::before, .eyebrow::after {
  content: ""; inline-size: .4rem; block-size: .4rem; border-radius: 1px;
  transform: rotate(45deg); background: linear-gradient(135deg, var(--accent), var(--accent-2));
  flex: none; box-shadow: 0 0 10px -1px var(--glow-a);
}
.eyebrow.center { display: flex; justify-content: center; width: auto; margin-inline: auto; }
.section-title {
  font-family: var(--font-title); font-weight: 900; line-height: var(--lh-heading);   /* Heebo Black — heavy geometric grotesk */
  font-size: var(--fs-h2); letter-spacing: var(--tracking-heading); margin-block-end: 1.85rem; max-width: 26ch;
  text-wrap: balance; /* even ragging on 2-3 line Hebrew headings */
  margin-inline: auto; text-align: center; /* centered header structure, page-wide */
}
.section-title.center { margin-inline: auto; text-align: center; max-width: 26ch; }
/* color-journey wins: demote hero headline phrase OFF red -> near-white (red reserved for CTA + ₪297) */
.accent-text {
  background: linear-gradient(120deg, var(--heading), #c9c9d4);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.prose p { color: var(--text-body); text-align: center; margin-inline: auto; margin-block-end: var(--flow); max-width: 64ch; text-wrap: pretty; }
.prose p.pull { font-family: var(--font-display); font-weight: 800; font-size: clamp(1.5rem,4vw,2.4rem);
  color: var(--text); margin-block: .5rem; }
.aside { color: var(--text-soft); font-size: .92em; }

/* =========================================================
   HERO
   ========================================================= */
.hero { padding-block-start: clamp(6rem, 14vw, 9rem); padding-block-end: var(--space-section); }
/* gate/decision pages (qualify, questionnaire, payment): center the single question in the viewport */
.hero.gate { min-block-size: 100svh; display: flex; align-items: center; }
.hero-inner { display: flex; flex-direction: column; align-items: center; text-align: center; }
.hero-title {
  font-family: var(--font-display); font-weight: 900; letter-spacing: var(--tracking-heading);
  font-size: var(--fs-hero); line-height: var(--lh-tight); max-width: 16ch; margin-block-end: 1.6rem;
  text-wrap: balance;
}
/* SCARCITY / loss-aversion hook — user-directed: the single STRONGEST moment in the hero.
   Heavy grotesk (breaks from the elegant serif); colour is the warm clay from the theme block
   (var(--claude-clay), B2 no-red) — emphasis carried by weight + clay against the navy. */
.hero-title .accent-text {
  display: inline-block; max-width: 100%;  /* allow the heavy phrase to WRAP instead of overflowing narrow screens */
  font-family: var(--font-impact); font-weight: 900;
}
.hero-sub { color: var(--text-soft); max-width: 54ch; font-size: clamp(1.05rem,1.6vw,1.3rem); line-height: 1.55; margin-block-end: 2.4rem; text-wrap: pretty; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center; margin-block-end: clamp(2.5rem,6vw,4rem); }
/* hero: make the single red primary dominate the quiet ghost (one dominant action) */
.hero-cta .btn-primary { box-shadow: 0 14px 40px -10px var(--glow-a), 0 0 0 1px rgba(255,255,255,0.10) inset; }
.hero-cta .btn-primary:hover { box-shadow: 0 20px 56px -12px var(--glow-a), 0 0 0 1px rgba(255,255,255,0.16) inset; transform: translateY(-2px); }
.hero-cta .btn-ghost { background: transparent; border-color: var(--hairline); color: var(--text-muted); box-shadow: none; }
.hero-cta .btn-ghost:hover { color: var(--text); background: var(--surface); border-color: var(--hairline-strong); }
@media (min-width: 521px) { .hero-cta .btn-primary { font-size: 1.16rem; padding-block: 1.15rem; } }

/* video frame (double-bezel) */
.video-frame {
  inline-size: 100%; max-inline-size: 900px; margin-inline: auto; padding: .6rem;
  border-radius: var(--radius); background: var(--surface); border: 1px solid var(--hairline);
  box-shadow: 0 40px 90px -40px rgba(0,0,0,0.9);
}
.video-frame.wide { max-inline-size: 980px; }
.video-placeholder {
  position: relative; aspect-ratio: 16/9; border-radius: var(--radius-inner);
  display: grid; place-items: center; gap: .8rem;
  background:
    radial-gradient(80% 120% at 50% 0%, color-mix(in srgb, var(--accent) 12%, transparent), transparent 60%),
    linear-gradient(160deg, #16223D, #0C1426);
  border: 1px solid var(--hairline); overflow: hidden;
}
.play-btn {
  inline-size: 4.5rem; block-size: 4.5rem; border-radius: 50%; display: grid; place-items: center;
  color: #fff;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  box-shadow: 0 0 0 10px rgba(244,124,32,0.12), 0 14px 40px -10px var(--glow-a);
  transition: transform var(--dur-mid) var(--ease-signature);
}
.play-btn svg { inline-size: 1.7rem; block-size: 1.7rem; margin-inline-start: .12rem; } /* optical-centre the triangle */
.play-dot svg { inline-size: .95em; block-size: .95em; }
.video-placeholder:hover .play-btn { transform: scale(1.07); }
.video-label { font-family: var(--font-display); font-weight: 600; color: var(--text-muted); }
/* real lesson video — fills the frame at 16:9 like the placeholder did (native controls, RTL-safe) */
.video-el { display: block; inline-size: 100%; aspect-ratio: 16/9; border-radius: var(--radius-inner);
  background: #0C1426; object-fit: cover; border: 1px solid var(--hairline); }

/* hero training video: muted autoplay while in view + a click-to-unmute pill (JS: initHeroVideo). */
.video-player { position: relative; }
.video-player .video-el { cursor: pointer; }
.video-sound {
  position: absolute; inset-block-end: .9rem; inset-inline-end: .9rem; z-index: 2;
  display: inline-flex; align-items: center; gap: .5rem;
  min-block-size: 44px; padding: .55rem .95rem;
  font-family: var(--font-display); font-weight: 700; font-size: .95rem; line-height: 1; color: #fff;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  border: 0; border-radius: 999px; cursor: pointer;
  box-shadow: 0 10px 30px -10px var(--glow-a), 0 0 0 6px rgba(244,124,32,0.10);
  transition: transform var(--dur-mid) var(--ease-signature), box-shadow var(--dur-mid);
}
.video-sound:hover { transform: scale(1.05); }
.video-sound:focus-visible { outline: 3px solid var(--accent-2); outline-offset: 3px; }
.video-sound-ic { display: inline-flex; }
.video-sound-ic svg { inline-size: 1.15rem; block-size: 1.15rem; }
/* once sound is on (user clicked) OR autoplay is suppressed (reduced motion → native controls), hide the pill */
.video-player.is-sound .video-sound,
.video-player.is-manual .video-sound { display: none; }
/* subtle pulse invites the click; killed under reduced/stopped motion */
@keyframes videoSoundPulse {
  0%, 100% { box-shadow: 0 10px 30px -10px var(--glow-a), 0 0 0 6px rgba(244,124,32,0.10); }
  50%      { box-shadow: 0 10px 30px -10px var(--glow-a), 0 0 0 12px rgba(244,124,32,0); }
}
.video-player:not(.is-sound):not(.is-manual) .video-sound { animation: videoSoundPulse 2.4s var(--ease-signature) infinite; }
@media (prefers-reduced-motion: reduce) { .video-sound { animation: none !important; } }
body.a11y-stopmotion .video-sound { animation: none !important; }

/* =========================================================
   CARDS
   ========================================================= */
/* softened matte glass (lower white-gradient + inset) — premium, not frosted; static, no backdrop-blur */
.card {
  position: relative; border-radius: var(--radius); padding: clamp(1.1rem, 2.4vw, 1.55rem);
  background: linear-gradient(165deg, rgba(255,255,255,0.035), rgba(255,255,255,0.012));
  border: 1px solid var(--hairline);
  box-shadow: 0 1px 0 rgba(255,255,255,0.035) inset, 0 24px 60px -36px rgba(0,0,0,0.9);
  transition: transform var(--dur-mid) var(--ease-signature), border-color var(--dur-mid), box-shadow var(--dur-mid);
}
.card:hover { transform: translateY(-5px); border-color: var(--hairline-strong);
  box-shadow: 0 1px 0 rgba(255,255,255,0.08) inset, 0 36px 80px -36px rgba(0,0,0,1); }

/* ---- chapters ---- */
.chapters { display: grid; gap: 1.1rem; grid-template-columns: repeat(auto-fit, minmax(260px,1fr)); margin-block-start: 3rem; align-items: start; }
.chapter { display: flex; align-items: flex-start; gap: 1rem; }
.chapter:first-child { grid-column: 1 / -1; }
/* featured full-width card: center numeral+title so it doesn't read as a ~65% empty void
   (only where it's actually full-width; ≤860px it's grid-column:auto -> normal card, untouched) */
@media (min-width: 861px) { .chapter:first-child { justify-content: center; } }
.chapter-num {
  font-family: var(--font-display); font-weight: 900; font-size: 2rem; line-height: 1;
  background: linear-gradient(135deg, #ffffff, #9aa0b5);
  -webkit-background-clip: text; background-clip: text; color: transparent; flex: none;
}
.chapter h3 { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-h3); line-height: 1.3; }

/* ---- bonuses ---- */
.bonus-grid { display: grid; gap: 1.2rem; grid-template-columns: repeat(auto-fit, minmax(250px,1fr)); margin-block-start: 3rem; }
/* premium icon chip (near-white line icon — red stays reserved for the CTA) */
.bonus-icon { display: inline-grid; place-items: center; inline-size: 2.6rem; block-size: 2.6rem;
  margin-block-end: .8rem; border-radius: .85rem; color: var(--text-strong);
  background: linear-gradient(160deg, rgba(255,255,255,0.08), rgba(255,255,255,0.02));
  border: 1px solid var(--hairline); box-shadow: inset 0 1px 0 rgba(255,255,255,0.06); }
.bonus-icon svg { inline-size: 1.35rem; block-size: 1.35rem; }
.bonus h3 { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-h3); margin-block-end: .5rem; }
.bonus p { color: var(--text-strong); }

/* =========================================================
   PRICING
   ========================================================= */
/* start-aligned multi-line value copy (RTL-correct, reads as a reasoned argument not a slogan) */
.value-stack { text-align: start; margin-block-end: 2.5rem; }
.value-stack p { font-family: var(--font-display); font-weight: 600; font-size: clamp(1.1rem,2.2vw,1.5rem); line-height: 1.4; color: var(--text); margin-block-end: .4rem; text-wrap: balance; }

/* itemized value ledger (name start, ₪ end — RTL-safe flex, no physical props) */
.value-items { display: grid; gap: .15rem; margin-block: 1.4rem 0; text-align: start; }
.value-items li { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
  padding-block: .7rem; border-block-end: 1px solid var(--hairline);
  color: var(--text-body); font-family: var(--font-display); font-weight: 600; }
.value-items li:last-child { border-block-end: none; }
.value-items .vi-price { color: var(--text-strong); font-variant-numeric: tabular-nums; white-space: nowrap; }
.value-items .vi-total { margin-block-start: .4rem; padding-block-start: .8rem;
  border-block-start: 1px solid var(--hairline-strong); border-block-end: none; color: var(--text); }
.value-items .vi-total .vi-price { color: var(--text-strong); font-size: 1.2rem; }

/* price-card: TRUST frame (calm teal hairline + warm offer underlight). Static — NO backdrop-blur (perf §2) */
.price-card { border-radius: var(--radius); padding: clamp(1.8rem, 4vw, 3rem);
  backdrop-filter: none; -webkit-backdrop-filter: none;
  position: relative; overflow: hidden;
  border: 1px solid var(--trust-ring);
  background:
    radial-gradient(120% 80% at 50% 0%, var(--warm-glow-soft), transparent 60%),
    linear-gradient(165deg, rgba(255,255,255,0.07), rgba(255,255,255,0.025)), var(--bg-elev);
  box-shadow: 0 1px 0 rgba(255,255,255,0.06) inset, 0 30px 70px -34px rgba(0,0,0,0.85), 0 0 0 1px var(--trust-glow-soft); }
.price-row { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.price-label { color: var(--text-muted); font-weight: 600; }
/* ₪497 strike: softened warm accent-2 so the live ₪297 out-reds it (two reds, ranked) */
/* value anchor (₪497 "שווי ... לפחות") — deliberately NOT struck: a line-through reads as a former/sale price,
   which Israeli 1991 sale-price regs forbid without a genuine prior price. Shown as a plain value figure. */
.price-strike { font-family: var(--font-display); font-weight: 800; font-size: 1.6rem; color: var(--text-muted); opacity: .85; }
.price-note { color: var(--text-soft); text-align: start; margin-block: var(--flow); max-width: 60ch; }
/* calm trust divider frames the ₪297 so the single red number pops (figure-ground) */
.price-final { display: flex; flex-direction: column; align-items: center; gap: .3rem; text-align: center;
  padding-block: 1.8rem; margin-block: 1rem; border-block: 1px solid var(--trust-glow-soft); }
.price-final-label { color: var(--text-strong); font-weight: 600; }
/* ₪297: protected red anchor — the page's single richest red (Von Restorff climax) */
.price-big { font-family: var(--font-display); font-weight: 900; font-size: clamp(3rem, 9vw, 5rem); line-height: 1;
  background: linear-gradient(120deg, var(--accent), var(--accent-2)); -webkit-background-clip: text; background-clip: text; color: transparent;
  text-shadow: 0 0 38px var(--glow-a); filter: drop-shadow(0 6px 24px var(--glow-a)); }

.form-title { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-h3); line-height: 1.4; text-align: center; color: var(--heading); margin-block: 1.5rem 1.5rem; }
.lead-form { display: grid; gap: 1rem; }
.field { display: grid; gap: .45rem; text-align: start; }
.field label { font-weight: 600; font-size: .95rem; color: var(--text); }
.field input {
  font-family: var(--font-body); font-size: 1.05rem; color: var(--text);
  padding: .9rem 1.1rem; border-radius: 14px; border: 1px solid var(--hairline);
  background: rgba(0,0,0,0.25); transition: border-color var(--dur-fast), box-shadow var(--dur-fast);
  width: 100%;
}
.field input::placeholder { color: rgba(160,160,173,0.6); }
/* calm TRUST focus (not red 'danger') at the payment moment; red kept ONLY for real errors */
.field input:focus { outline: none; border-color: var(--trust); box-shadow: 0 0 0 3px var(--trust-glow); }
.field input:user-invalid { border-color: var(--color-error); }
.form-secure { display: inline-flex; align-items: center; justify-content: center; gap: .4rem; width: 100%;
  color: var(--trust); font-weight: 600; font-size: var(--fs-small); margin-block-start: .6rem; opacity: .92; }
.i-lock { inline-size: 1.05em; block-size: 1.05em; flex: none; }
.form-message { text-align: center; font-weight: 600; min-block-size: 1.2em; }
.form-message.success { color: var(--trust); }
.form-message.error { color: var(--color-error); }

/* =========================================================
   LEAD POPUP (native <dialog>) - same trust frame as the price-card
   ========================================================= */
.price-cta-wrap { display: grid; gap: .2rem; margin-block-start: 1.5rem; }
.price-cta-wrap .form-secure { margin-block-start: .8rem; }

/* lock background scroll while the modal is open (where :has is supported; harmless otherwise) */
html:has(.lead-dialog[open]) { overflow: hidden; }

.lead-dialog {
  position: fixed; inset: 0; margin: auto;
  inline-size: min(34rem, 92vw); max-block-size: 90dvh; overflow: auto;  /* dvh: respect the dynamic viewport so the submit button never hides behind the mobile keyboard/URL bar */
  padding: clamp(1.7rem, 4vw, 2.6rem);
  border-radius: var(--radius); color: var(--text);
  border: 1px solid var(--trust-ring);
  background:
    radial-gradient(120% 70% at 50% 0%, var(--warm-glow-soft), transparent 60%),
    linear-gradient(165deg, rgba(255,255,255,0.07), rgba(255,255,255,0.025)), var(--bg-elev);
  box-shadow: 0 1px 0 rgba(255,255,255,0.06) inset, 0 40px 100px -30px rgba(0,0,0,0.9), 0 0 0 1px var(--trust-glow-soft);
}
.lead-dialog::backdrop {
  background: rgba(5,4,10,0.62);
  backdrop-filter: blur(8px) saturate(120%);
  -webkit-backdrop-filter: blur(8px) saturate(120%);
}
.lead-dialog .form-title { margin-block: .2rem 1.5rem; padding-inline-end: 2.4rem; } /* clear the close button */
/* entrance (transform/opacity only; reduced-motion neutralizes via the global rule) */
.lead-dialog[open] { animation: dialog-pop var(--dur-mid) var(--ease-out) both; }
.lead-dialog[open]::backdrop { animation: backdrop-fade var(--dur-fast) ease both; }
@keyframes dialog-pop { from { opacity: 0; transform: translateY(14px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes backdrop-fade { from { opacity: 0; } to { opacity: 1; } }

.dialog-close {
  position: absolute; inset-block-start: .85rem; inset-inline-end: .85rem;   /* RTL: end = left */
  inline-size: 2.75rem; block-size: 2.75rem; display: grid; place-items: center;  /* 44px tap target */
  border-radius: 50%; border: 1px solid var(--hairline); color: var(--text-muted);
  background: var(--surface); cursor: pointer;
  transition: color var(--dur-fast), border-color var(--dur-fast), background var(--dur-fast);
}
.dialog-close:hover { color: var(--text); border-color: var(--hairline-strong); background: var(--surface-2); }
.dialog-close svg { inline-size: 1.15rem; block-size: 1.15rem; }

/* consent gate - whole row is the click target; native checkbox tinted to the calm trust colour */
.consent { display: flex; align-items: flex-start; gap: .7rem; cursor: pointer; text-align: start; padding-block: .3rem; }
.consent input[type="checkbox"] {
  flex: none; inline-size: 1.3rem; block-size: 1.3rem; margin-block-start: .12rem;
  accent-color: var(--trust); cursor: pointer;
}
.consent-text { color: var(--text-soft); font-size: .92rem; line-height: 1.5; }
/* privacy link must read as a link (global `a` resets color+underline) */
.consent-text a { color: var(--trust); text-decoration: underline; text-underline-offset: 2px; }

/* center every text element inside the lead modal (per request).
   scoped to .lead-dialog so the funnel forms on other pages are untouched.
   title / button / form-message are already centered elsewhere. */
.lead-dialog .field input { text-align: center; }
.lead-dialog .field label { text-align: start; }   /* label above each field -> right side (RTL), per user */
.lead-dialog .consent { justify-content: center; text-align: center; }

/* disabled submit (consent unchecked): clearly inert, no hover lift */
.btn:disabled, .btn[disabled] { opacity: .45; cursor: not-allowed; box-shadow: none; transform: none; }
.btn:disabled:hover, .btn[disabled]:hover { transform: none; box-shadow: none; }

/* =========================================================
   STATS
   ========================================================= */
.stat-grid { display: grid; gap: 1.2rem; grid-template-columns: repeat(auto-fit, minmax(200px,1fr)); margin-block-start: 3rem; }
.stat { text-align: center; }
/* stats sit in the cool/trust zone — near-white (not red) so they don't fight the calm or spend the red budget */
.stat-num { font-family: var(--font-display); font-weight: 900; font-size: clamp(2.5rem,6vw,3.6rem); line-height: 1;
  background: linear-gradient(120deg, var(--heading), #aeb4c6); -webkit-background-clip: text; background-clip: text; color: transparent; display: block; margin-block-end: .5rem; }
.stat-label { color: var(--text-muted); font-weight: 600; }

/* =========================================================
   ABOUT
   ========================================================= */
.founders { display: flex; gap: 1.5rem; margin-block: 2rem 2.5rem; flex-wrap: wrap; justify-content: center; }
.founder { display: flex; align-items: center; gap: .9rem; }
/* photo-ready frame: drop an <img> inside and it covers; initials remain a graceful fallback.
   neutral shadow (no red) keeps the about/trust zone in the cool half of the journey */
.avatar { inline-size: 4rem; block-size: 4rem; border-radius: 50%; display: grid; place-items: center;
  font-family: var(--font-display); font-weight: 800; font-size: 1.2rem; color: #fff;
  background: linear-gradient(135deg, #1b1b25, #0c0c12); border: 1px solid var(--hairline-strong);
  box-shadow: 0 0 24px -8px rgba(0,0,0,.6); overflow: hidden; }
.avatar img { inline-size: 100%; block-size: 100%; object-fit: cover; }
.founder figcaption { font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; }

/* =========================================================
   FAQ
   ========================================================= */
.faq-list { display: grid; gap: 1rem; margin-block-start: 2.5rem; }
.faq-item { padding: 0; overflow: hidden; }
.faq-item summary {
  list-style: none; cursor: pointer; padding: 1.2rem 1.5rem;
  font-family: var(--font-display); font-weight: 700; font-size: 1.1rem;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+"; font-size: 1.5rem; color: var(--text-muted); flex: none;
  transition: transform var(--dur-mid) var(--ease-signature);
}
.faq-item[open] summary { color: var(--text-strong); }
.faq-item[open] summary::after { transform: rotate(45deg); }
/* FAQ answers are reassurance copy — lift to readable, start-aligned. padding shorthand is block/inline-symmetric -> RTL-safe.
   (Native <details> toggle kept for a11y/keyboard; no height animation to avoid a half-broken accordion across browsers.) */
.faq-body { padding: 0 1.5rem 1.3rem; color: var(--text-soft); text-align: start; max-width: 64ch; }
/* soften the native <details> snap: fade + slide the panel content in on open (reduced-motion neutralizes it) */
.faq-item[open] .faq-body { animation: faq-reveal var(--dur-mid) var(--ease-out) both; }
@keyframes faq-reveal { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
.todo-answer { opacity: .5; font-style: italic; }

/* =========================================================
   FINAL CTA + FOOTER
   ========================================================= */
.final-cta { text-align: center; }
.final-cta .section-title { margin-inline: auto; }
.final-cta .hero-sub { margin-inline: auto; }
.footer { padding-block: 3rem; border-block-start: 1px solid var(--hairline); margin-block-start: 2rem;
  padding-block-end: calc(3rem + env(safe-area-inset-bottom)); } /* clear the home indicator */
.footer-inner { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.2rem; flex-wrap: wrap; text-align: center; }
.footer-brand { font-size: 1.1rem; }
.footer-copy { color: var(--text-muted); font-size: var(--fs-small); }

/* ---------- thumb-zone sticky CTA (mobile only) ---------- */
.mobile-cta {
  position: fixed; z-index: 90; display: none; /* desktop: off */
  inset-inline: clamp(1rem, 6vw, 2rem); inset-block-end: calc(.9rem + env(safe-area-inset-bottom));
  align-items: center; justify-content: center; gap: .6rem;
  padding-block: 1.05rem; border-radius: 999px;
  font-family: var(--font-display); font-weight: 800; font-size: 1.12rem; color: #fff;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  box-shadow: 0 14px 36px -8px var(--glow-a), 0 0 0 1px rgba(255,255,255,0.12) inset;
  transform: translateY(180%); opacity: 0; visibility: hidden;
  transition: transform var(--dur-mid) var(--ease-signature), opacity var(--dur-mid) ease, visibility 0s linear var(--dur-mid);
}
.mobile-cta.is-shown { transform: none; opacity: 1; visibility: visible; transition-delay: 0s; }
.mobile-cta .btn-icon { background: rgba(255,255,255,0.18); }
@media (max-width: 860px) { .mobile-cta { display: flex; } }

/* =========================================================
   PAYMENT TRUST CUE (calm teal family — reinforces 'safe' at the button)
   ========================================================= */
.pay-badges { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center; margin-block-start: .7rem; }
.pay-badge { font-family: var(--font-display); font-weight: 700; font-size: .68rem; letter-spacing: .06em;
  padding: .3rem .6rem; border-radius: 8px; color: var(--trust);
  border: 1px solid var(--trust-ring); background: var(--trust-glow-soft); }

/* =========================================================
   MID-PAGE CTA (on-ramp into the ₪297 offer; near-white line, red only on the button)
   ========================================================= */
.mid-cta { padding-block: clamp(3rem, 7vw, 5rem); text-align: center; }
.mid-cta-line { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.25rem, 3vw, 1.9rem);
  color: var(--heading); margin-block-end: 1.4rem; max-width: 24ch; margin-inline: auto; }

/* =========================================================
   TESTIMONIALS / SOCIAL PROOF (scaffold — real quotes only; calm/cool to fit the trust zone)
   ========================================================= */
.tst-grid { display: grid; gap: 1.2rem; grid-template-columns: repeat(auto-fit, minmax(260px,1fr)); margin-block-start: 3rem; }
.tst { display: flex; flex-direction: column; gap: 1.2rem; min-block-size: 11rem; }
.tst-quote { color: var(--text-body); text-align: start; font-size: 1.05rem; line-height: 1.7; min-block-size: 4.5em; }
.tst-quote::before { content: "\201D"; color: var(--text-muted); font-family: var(--font-display);
  font-size: 2.2rem; line-height: 0; display: block; margin-block-end: .4rem; }
.tst-by { display: flex; align-items: center; gap: .8rem; margin-block-start: auto; }
.tst-avatar { inline-size: 3rem; block-size: 3rem; box-shadow: none; }
.tst-name { font-family: var(--font-display); font-weight: 700; }

/* =========================================================
   REVEAL ANIMATIONS (JS adds .is-visible)
   ========================================================= */
/* hidden state is GATED on .js (set by an inline <head> script) so that with NO JavaScript
   the page renders fully visible — price + form included — instead of a blank page. */
.js .reveal { opacity: 0; transform: translateY(var(--reveal-rise));
  transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out); }
.reveal.is-visible { opacity: 1; transform: none; }
/* stagger children within a grid/list */
.is-visible { transition-delay: var(--reveal-delay, 0ms); }

/* ---- purposeful OFFER reveal (the ₪297 card is the page's payoff -> single deepest entrance) ---- */
.js .price-card.reveal { transform: translateY(34px) scale(.985); }
.price-card.reveal.is-visible { transform: none; }
.js .reveal-pop { transform: translateY(40px) scale(.96); }
.reveal-pop.is-visible { transform: none; }
/* a sub-1.5% settle on the price number after the card lands (transform-only, color-agnostic) */
@keyframes offer-settle { 0% { transform: scale(.965); } 60% { transform: scale(1.012); } 100% { transform: scale(1); } }
.price-card.reveal.is-visible .price-big { animation: offer-settle var(--dur-reveal-offer) var(--ease-out-expo) both; animation-delay: 120ms; }

/* ---- trust-counter settle when an odometer finishes rolling ---- */
.stat-num[data-count].count-done { animation: offer-settle 360ms var(--ease-out-expo) both; }

/* ---- form-submit feedback (purchase moment): shake on invalid, settle on success ---- */
@keyframes form-shake { 10%,90%{transform:translateX(-1px);} 20%,80%{transform:translateX(2px);} 30%,50%,70%{transform:translateX(-3px);} 40%,60%{transform:translateX(3px);} }
.lead-form.invalid-shake { animation: form-shake 420ms var(--ease-out) both; }
.form-message.success { animation: offer-settle 320ms var(--ease-out-expo) both; }

/* ---- ultra-slow ambient orb drift (transform-only on big pre-blurred layers ≈ free) ---- */
/* PERF: translate ONLY — never scale a blurred layer (scaling re-rasterizes the 80px blur
   every frame = jank). Translating a pre-blurred compositor layer is a near-free GPU move. */
@keyframes orb-drift-a { 0% { transform: translate3d(0,0,0); } 100% { transform: translate3d(-6%, 7%, 0); } }
@keyframes orb-drift-b { 0% { transform: translate3d(0,0,0); } 100% { transform: translate3d(7%, -6%, 0); } }
@keyframes orb-drift-c { 0% { transform: translate3d(0,0,0); } 100% { transform: translate3d(-5%, -8%, 0); } }
.orb-1 { animation: orb-drift-a var(--orb-drift) ease-in-out infinite alternate; }
.orb-2 { animation: orb-drift-b calc(var(--orb-drift) * 1.3) ease-in-out infinite alternate; }
.orb-3 { animation: orb-drift-c calc(var(--orb-drift) * 1.65) ease-in-out infinite alternate; }

/* =========================================================
   UI STAYS SANS — display headlines/numbers are the serif; controls & labels are Assistant
   (placed after component rules so it wins by source order)
   ========================================================= */
.brand, .btn, .eyebrow, .nav-links a, .video-label, .form-title,
.faq-item summary, .pay-badge, .field label {
  font-family: var(--font-body);
}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 860px) {
  .nav-links, .nav-cta { display: none; }
  .nav-toggle {
    display: inline-flex; flex-direction: column; gap: 5px; margin-inline-start: auto;
    align-items: center; justify-content: center;
    min-inline-size: 44px; min-block-size: 44px;  /* WCAG 2.5.5 tap target */
    background: none; border: none; cursor: pointer; padding: .5rem;
  }
  .nav-toggle span { inline-size: 24px; block-size: 2px; background: var(--text); border-radius: 2px;
    transition: transform var(--dur-mid) var(--ease-signature), opacity var(--dur-fast); }
  .nav-toggle[aria-expanded="true"] span:first-child { transform: translateY(3.5px) rotate(45deg); }
  .nav-toggle[aria-expanded="true"] span:last-child { transform: translateY(-3.5px) rotate(-45deg); }
  .chapter:first-child { grid-column: auto; }
  /* PERF: lighten the heavy aurora on mobile GPUs — less blur + drop the 3rd orb (memory) */
  .orb { filter: blur(55px); }
  .orb-3 { display: none; }
  .bg-atmosphere::before { filter: blur(32px); }
}
@media (max-width: 520px) {
  /* smaller, less bulky buttons on phones */
  .btn-lg { --pad: .8rem 1.4rem; font-size: 1rem; }
  .btn-lg .btn-icon { font-size: .72em; }
  .hero-cta { flex-direction: column; align-items: center; width: 100%; gap: .7rem; }
  .hero-cta .btn { width: auto; min-inline-size: 14rem; }
  .mobile-cta { padding-block: .8rem; font-size: 1rem; inset-inline: clamp(1.5rem, 14vw, 4rem); }
  .price-row { flex-direction: column; gap: .3rem; align-items: flex-start; }
  .value-items li { gap: .6rem; }
  .tst-grid { grid-template-columns: 1fr; }
  .founders { flex-direction: column; align-items: center; }
  .founder { justify-content: center; }   /* center avatar+name so the photo never overflows the right edge in RTL */
}

/* =========================================================
   REDUCED MOTION — real static experience
   ========================================================= */
/* cross-page crossfade between same-origin pages (progressive enhancement — a no-op where unsupported) */
@view-transition { navigation: auto; }

@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  html { scroll-behavior: auto; }
  .js .reveal { opacity: 1; transform: none; transition: none; }
  /* neutralize the new emphasis transforms -> real static experience */
  .js .price-card.reveal, .js .reveal-pop { transform: none; }
  *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
  .orb-1, .orb-2, .orb-3 { animation: none; }
  .lead-form.invalid-shake, .form-message.success { animation: none; }
  .orb { filter: blur(80px); }
}

/* =========================================================
   ACCESSIBILITY WIDGET  (functional; persisted via localStorage)
   ========================================================= */
:root { --a11y-scale: 1; }
html { font-size: calc(100% * var(--a11y-scale)); }

.a11y { position: fixed; inset-block-end: calc(1.1rem + env(safe-area-inset-bottom));
  inset-inline-start: calc(1.1rem + env(safe-area-inset-left)); z-index: 95; }
.a11y-toggle {
  inline-size: 2.9rem; block-size: 2.9rem; border-radius: 50%; cursor: pointer;  /* 46px — smaller, still >=44px WCAG/IS-5568 legal min */
  display: grid; place-items: center; color: #fff; border: 1px solid rgba(255,255,255,0.18);
  /* navy background + shadow come from the LIGHT THEME override below (single source of truth) */
  transition: transform var(--dur-fast) var(--ease-signature), box-shadow var(--dur-mid);
}
.a11y-toggle:hover { transform: translateY(-2px) scale(1.04); }
.a11y-toggle svg { inline-size: 1.55rem; block-size: 1.55rem; }
.a11y-panel {
  position: absolute; inset-block-end: calc(100% + .6rem); inset-inline-start: 0;
  inline-size: min(19rem, 78vw); padding: 1rem; border-radius: 1.1rem;
  display: flex; flex-direction: column; gap: .5rem;
  background: linear-gradient(160deg, #14141c, #0b0b10); border: 1px solid var(--hairline-strong);
  box-shadow: 0 30px 70px -28px rgba(0,0,0,1);
}
.a11y-panel[hidden] { display: none; }
.a11y-head { display: flex; align-items: center; justify-content: space-between; margin-block-end: .2rem; }
.a11y-head h2 { font-family: var(--font-display); font-weight: 700; font-size: 1.15rem; color: var(--heading); }
.a11y-close { background: var(--surface); border: 1px solid var(--hairline); color: var(--text);
  inline-size: 2.75rem; block-size: 2.75rem; border-radius: 8px; cursor: pointer; font-size: 1rem; }  /* 44px min tap target */
.a11y-row { display: flex; align-items: center; justify-content: space-between; gap: .5rem;
  background: var(--surface); border: 1px solid var(--hairline); border-radius: 12px; padding: .35rem; }
.a11y-row .a11y-label { font-weight: 600; font-size: .92rem; color: var(--text-soft); }
.a11y-step { inline-size: 2.75rem; block-size: 2.75rem; border-radius: 9px; cursor: pointer;  /* 44px min tap target */
  background: var(--surface-2); border: 1px solid var(--hairline); color: var(--text);
  font-family: var(--font-display); font-weight: 700; font-size: 1rem; }
.a11y-step:hover { background: var(--accent); color: #fff; }
.a11y-opt, .a11y-reset, .a11y-statement {
  text-align: start; padding: .7rem .9rem; border-radius: 11px; cursor: pointer;
  font-weight: 600; font-size: .95rem; color: var(--text); border: 1px solid var(--hairline);
  background: var(--surface); transition: background var(--dur-fast), border-color var(--dur-fast); display: block; }
.a11y-opt:hover, .a11y-reset:hover, .a11y-statement:hover { background: var(--surface-2); border-color: var(--hairline-strong); }
.a11y-opt[aria-pressed="true"] { background: rgba(45,212,167,0.16); border-color: var(--trust-ring); color: var(--trust); }
.a11y-opt[aria-pressed="true"]::after { content: " ✓"; color: var(--trust); }
.a11y-reset { color: var(--accent); text-align: center; margin-block-start: .2rem; }
.a11y-statement { color: var(--trust-2); text-align: center; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* ---- applied accessibility modes ---- */
body.a11y-contrast { --bg:#000; --bg-elev:#000; --text:#fff; --heading:#fff; --text-strong:#fff;
  --text-body:#fff; --text-soft:#f0f0f0; --text-muted:#eaeaea; --hairline:rgba(255,255,255,.55);
  --hairline-strong:rgba(255,255,255,.8); --surface:rgba(255,255,255,.1);
  --color-dark:#000; --accent-2:#ffe600; }
/* navy authority sections also go pure-black in high-contrast mode (they set background directly) */
body.a11y-contrast .hero, body.a11y-contrast .final-cta,
body.a11y-contrast .footer, body.a11y-contrast .funnel-legal { background:#000; }
body.a11y-contrast .bg-atmosphere { display: none; }
body.a11y-contrast .accent-text, body.a11y-contrast .price-big, body.a11y-contrast .stat-num,
body.a11y-contrast .chapter-num { background: none !important; -webkit-text-fill-color: #ffe600; color: #ffe600 !important; }
body.a11y-contrast a:not(.btn) { color: #ffe600 !important; }

body.a11y-links a:not(.btn):not(.a11y-statement) { text-decoration: underline !important;
  text-underline-offset: 3px; text-decoration-thickness: 2px; outline: 1px dashed currentColor; outline-offset: 2px; }

body.a11y-readable, body.a11y-readable :not(.a11y *) {
  font-family: 'Assistant', Arial, sans-serif !important; letter-spacing: normal !important; }

body.a11y-stopmotion *, body.a11y-stopmotion *::before, body.a11y-stopmotion *::after {
  animation: none !important; transition: none !important; }
body.a11y-stopmotion .reveal, body.a11y-stopmotion [data-reveal] { opacity: 1 !important; transform: none !important; filter: none !important; }
body.a11y-stopmotion .bg-atmosphere .orb { animation: none !important; }

/* lift the a11y launcher above the sticky mobile CTA wherever that CTA shows (≤860px), not only phones */
@media (max-width: 860px) { .a11y { inset-block-end: calc(5.5rem + env(safe-area-inset-bottom)); } }

/* ---------- footer legal ---------- */
.footer-brand-col { display: flex; flex-direction: column; gap: .4rem; align-items: center; }
.footer-id { color: var(--text-muted); font-size: var(--fs-small); max-width: 40ch; }
.footer-legal { display: flex; flex-wrap: wrap; gap: 1.1rem; justify-content: center; }
.footer-legal a { color: var(--text-soft); font-weight: 600; font-size: var(--fs-small); position: relative; }
.footer-legal a:hover { color: var(--text); }
.footer-copy { margin-block-start: 1.4rem; color: var(--text-muted); font-size: var(--fs-small); text-align: center; }
@media (max-width: 600px) {
  .footer-inner { flex-direction: column; gap: 1.2rem; align-items: center; }
  /* 3 proof numbers stack cleanly instead of the awkward 2-over-1 auto-fit wrap */
  .stat-grid { grid-template-columns: 1fr; max-inline-size: 22rem; margin-inline: auto; }
}

/* =========================================================
   LEGAL PAGES (privacy / terms / accessibility statement)
   ========================================================= */
.legal-header { position: sticky; inset-block-start: 0; z-index: 100;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: clamp(1rem,3vw,1.5rem) clamp(1.2rem,5vw,3rem);
  padding-inline-end: calc(clamp(1.2rem,5vw,3rem) + env(safe-area-inset-right));
  backdrop-filter: blur(14px); background: rgba(8,6,14,0.6); border-block-end: 1px solid var(--hairline); }
.legal-back { color: var(--text-soft); font-weight: 600; font-size: .95rem; }
.legal-back:hover { color: var(--text); }
.legal { max-width: 50rem; margin-inline: auto; padding: clamp(2.5rem,7vw,5rem) clamp(1.2rem,5vw,2.5rem) 4rem; position: relative; z-index: 1; }
.legal h1 { font-family: var(--font-display); font-weight: 700; font-size: clamp(2rem,5vw,3rem);
  color: var(--heading); line-height: 1.2; margin-block-end: 1.6rem; }
.legal h2 { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.3rem,3vw,1.7rem);
  color: var(--heading); margin-block: 2.2rem .8rem; }
.legal h3 { font-family: var(--font-display); font-weight: 600; font-size: 1.12rem; color: var(--text-strong); margin-block: 1.4rem .5rem; }
.legal p { color: var(--text-body); line-height: var(--lh-body); margin-block-end: 1em; max-width: 64ch; }
.legal ul { display: flex; flex-direction: column; gap: .5rem; margin-block-end: 1.2em; padding-inline-start: 1.2rem; }
.legal li { color: var(--text-body); line-height: 1.65; position: relative; padding-inline-start: 1rem; }
.legal li::before { content: ""; position: absolute; inset-inline-start: 0; inset-block-start: .65em;
  inline-size: .35rem; block-size: .35rem; border-radius: 50%; background: var(--accent); }
.legal blockquote { border-inline-start: 3px solid var(--trust-ring); background: var(--trust-glow-soft);
  padding: 1rem 1.2rem; margin-block: 1.2em; color: var(--text-soft);
  /* square the accent-bar (inline-start) side, round the far side — follows RTL, not physical L/R */
  border-start-start-radius: 0; border-end-start-radius: 0; border-start-end-radius: 12px; border-end-end-radius: 12px; }
.legal .ph { background: rgba(244,124,32,0.14); color: var(--accent-2); border: 1px dashed rgba(244,124,32,0.5);
  border-radius: 6px; padding: 0 .35em; font-size: .9em; unicode-bidi: isolate; }
.legal strong { color: var(--text); font-weight: 700; }
.legal a { color: var(--trust-2); text-decoration: underline; text-underline-offset: 3px; }
.legal .legal-updated { color: var(--text-muted); font-size: var(--fs-small); margin-block-end: 2rem; }

/* ---------- minimal legal footer on funnel pages ---------- */
.funnel-legal { display: flex; flex-direction: column; gap: .5rem; align-items: center; text-align: center;
  padding: 2rem 1.2rem calc(2rem + env(safe-area-inset-bottom)); border-block-start: 1px solid var(--hairline);
  color: var(--text-muted); font-size: var(--fs-small); position: relative; z-index: 1; }
.funnel-legal nav { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center; }
.funnel-legal a { color: var(--text-soft); font-weight: 600; }
.funnel-legal a:hover { color: var(--text); }

/* =========================================================
   LIGHT THEME — "Authority + Action" re-theme (C1 flat · B2 no red · A1 keep Hebrew fonts)
   Additive overrides on the token-driven base. Reviewable + revertible as one unit.
   Source: course_landing_color_theme.md · plan: PRD-color-retheme.md
   ========================================================= */
/* C1 — kill the aurora + grain entirely (flat light) */
.bg-atmosphere { display: none !important; }

/* nav / glass primitive -> solid white pill, flat (no backdrop-blur) */
.glass {
  background: #fff; border: 1px solid var(--hairline);
  backdrop-filter: none; -webkit-backdrop-filter: none;
  box-shadow: 0 1px 2px rgba(15,31,61,0.05), 0 18px 40px -28px rgba(15,31,61,0.22);
}
/* nav + mobile menu -> NAVY pill (user: "background behind the top tab in blue"); blends with the navy hero.
   In-scope token inversion flips brand-name / links / hamburger to light. The orange CTA keeps its own
   hardcoded near-black ink (.btn-primary color is #1A1A2E), so no white-on-orange contrast break. */
.nav.glass, .mobile-menu.glass {
  background: var(--color-dark); color: #fff;  /* explicit: brand-name inherits color (no token re-read) */
  --heading:#fff; --text:#fff; --text-strong:#EEF1F7; --text-body:#DFE3EC;
  --text-soft:#C2C8D6; --text-muted:#A6ADBF;
  --hairline: rgba(255,255,255,0.18); --hairline-strong: rgba(255,255,255,0.32);
  --surface: rgba(255,255,255,0.06); --surface-2: rgba(255,255,255,0.10);
}
/* the menu's text links must read CLEARLY on the navy panel — bright near-white (not the muted token). */
.mobile-menu.glass a:not(.btn) { color: #EEF1F7; }
.mobile-menu.glass a:not(.btn):hover { background: var(--surface); color: #fff; }
/* the orange CTA inside the menu: force near-black ink. (the .mobile-menu a rule above out-specifies
   .btn-primary's own color, so without this the CTA text rendered muted gray-blue ON orange = unreadable.) */
.mobile-menu .btn-primary { color: #1A1A2E; }

/* navy AUTHORITY sections — redefine tokens in-scope so every descendant inverts to light text.
   Rhythm (breaks the warm-white expanse per the theme file's section guide): hero, solution,
   structure (curriculum), pricing, about, final-cta, footer all carry navy → navy every 2-3 sections. */
.hero, .final-cta, .footer, .funnel-legal,
.section.solution, .section.structure, #pricing, .section.about {
  background: var(--color-dark); color: #fff;
  --heading:#FFFFFF; --text:#FFFFFF; --text-strong:#EEF1F7; --text-body:#DFE3EC;
  --text-soft:#C2C8D6; --text-muted:#A6ADBF;
  --hairline: rgba(255,255,255,0.16); --hairline-strong: rgba(255,255,255,0.30);
  --surface: rgba(255,255,255,0.06); --surface-2: rgba(255,255,255,0.10);
}
/* white cards are SELF-CONTAINED light surfaces: dark text even when they sit inside a navy band */
.card, .price-card, .lead-dialog {
  --heading:#1A1A2E; --text:#1A1A2E; --text-strong:#2A2A3A; --text-body:#3D3D4E;
  --text-soft:#5A5A6C; --text-muted:#6A6A7C;
  --hairline:#E2E0DA; --hairline-strong:rgba(15,31,61,0.20);
  color: var(--text);
}
/* lift card definition so they read on warm-white too (was barely 3% lighter than the bg) */
.card { box-shadow: 0 1px 2px rgba(15,31,61,0.05), 0 18px 44px -30px rgba(15,31,61,0.30); }

/* ---- hero → next section: CRISP navy edge (no white feather/blur) + a subtle navy drop-shadow
   cast DOWN onto the light section below (user 2026-06-18: removed the blur; the shadow lives in
   the light-section ::before below). The hero bg stays SOLID navy (inherits the navy-sections rule). ---- */
.hero:not(.gate) {
  padding-block-end: clamp(2.5rem, 5vw, 4rem);     /* normal bottom padding; no fade */
}
/* navy footer flows straight out of the navy final-cta — kill the old 2rem warm-white gap + divider
   (invisible in the old all-dark theme; now they'd show a white strip between two navy blocks) */
.footer { margin-block-start: 0; border-block-start: 0; }
.funnel-legal { border-block-start: 0; }

/* focus ring: deeper orange reads on BOTH warm-white (3.5:1) and navy (6:1) */
:focus-visible { outline-color: var(--accent-2); }

/* skip-link -> navy (white-on-orange fails AA) */
.skip-link { background: var(--color-dark); color: #fff; }

/* CTA: orange fill + NEAR-BLACK text (white-on-orange = 2.71 fails AA), flat shadow */
.btn-primary { color: #1A1A2E; background: var(--accent);
  box-shadow: 0 8px 22px -10px var(--glow-a), 0 0 0 1px rgba(15,31,61,0.05) inset; }
.btn-primary:hover { background: var(--accent-2);
  box-shadow: 0 12px 30px -10px var(--glow-a); transform: translateY(-2px); }
.hero-cta .btn-primary, .hero-cta .btn-primary:hover { box-shadow: 0 10px 26px -10px var(--glow-a); }
.mobile-cta { color: #1A1A2E; }
.mobile-cta .btn-icon { background: rgba(15,31,61,0.14); }
.btn:hover .btn-icon { background: rgba(15,31,61,0.20); }
.btn-icon { background: rgba(15,31,61,0.12); }
.hero .btn-icon, .final-cta .btn-icon, .mobile-cta .btn-icon { background: rgba(255,255,255,0.18); }

/* gradient TEXT -> solid (light-on-dark clips vanish on warm-white) */
.accent-text { background: none; -webkit-text-fill-color: var(--heading); color: var(--heading); }
.stat-num { background: none; -webkit-text-fill-color: var(--heading); color: var(--heading); }
.price-big { background: none; -webkit-text-fill-color: var(--heading); color: var(--heading);
  text-shadow: none; filter: none; }
/* chapter numerals: deeper orange as a large-text callout (3.5:1 ≥ large-text AA) */
.chapter-num { background: none; -webkit-text-fill-color: var(--accent-2); color: var(--accent-2); }

/* hero scarcity hook — Claude Code clay emphasis on the navy hero (matches the CLAUDE CODE logo; 5.25:1 AA large, B2-clean, no red) */
.hero-title .accent-text { background: none; -webkit-text-fill-color: var(--claude-clay); color: var(--claude-clay); filter: none; }

/* video well -> navy (red radial removed) */
.video-placeholder { background:
  radial-gradient(80% 120% at 50% 0%, color-mix(in srgb, var(--accent) 12%, transparent), transparent 60%),
  linear-gradient(160deg, #16223D, #0C1426); }
.play-btn { box-shadow: 0 0 0 10px rgba(244,124,32,0.12), 0 14px 40px -10px var(--glow-a); }

/* inputs -> light surface */
.field input { background: #fff; color: var(--text); border-color: var(--hairline); }
.field input::placeholder { color: var(--text-muted); }  /* #6A6A7C = 5.3:1 AA (was rgba(26,26,46,.45) = 2.86:1, failed) */
.field input:user-invalid { border-color: var(--color-error); }
.form-message.success { color: var(--trust); }
.form-message.error { color: var(--color-error); }

/* elevation -> soft NAVY shadows (no hard black, Rules §5) */
.card { box-shadow: 0 1px 2px rgba(15,31,61,0.04), 0 22px 50px -34px rgba(15,31,61,0.20); }
.card:hover { box-shadow: 0 2px 6px rgba(15,31,61,0.06), 0 30px 64px -34px rgba(15,31,61,0.28); }
.video-frame { box-shadow: 0 30px 70px -40px rgba(15,31,61,0.28); }
.price-card { background:
  radial-gradient(120% 80% at 50% 0%, var(--warm-glow-soft), transparent 60%), #fff;
  box-shadow: 0 1px 2px rgba(15,31,61,0.05), 0 28px 64px -36px rgba(15,31,61,0.25); }
.lead-dialog { background:
  radial-gradient(120% 70% at 50% 0%, var(--warm-glow-soft), transparent 60%), #fff;
  box-shadow: 0 30px 80px -30px rgba(15,31,61,0.40); }
.lead-dialog::backdrop { background: rgba(15,31,61,0.50); }

/* avatar -> navy */
.avatar { background: linear-gradient(135deg, #1D3057, #0F1F3D); color: #fff;
  box-shadow: 0 8px 20px -10px rgba(15,31,61,0.40); }

/* accessibility widget -> theme fit (navy launcher, white panel) */
.a11y-toggle { background: linear-gradient(135deg, #1D3057, #0F1F3D); color: #fff;
  border-color: rgba(255,255,255,0.18); box-shadow: 0 10px 26px -8px rgba(15,31,61,0.50); }
.a11y-panel { background: #fff; border: 1px solid var(--hairline);
  box-shadow: 0 26px 60px -28px rgba(15,31,61,0.35); }
.a11y-step:hover { background: var(--color-dark); color: #fff; }
.a11y-reset { color: var(--text); }  /* reset is not an error — red is reserved for real errors (Rules §3); --text = ~15:1 on the panel */
.a11y-statement { color: var(--trust); }

/* legal pages */
.legal-header { background: rgba(255,255,255,0.96); border-block-end: 1px solid var(--hairline);
  backdrop-filter: none; -webkit-backdrop-filter: none; }   /* C1: no glass blur */
.legal li::before { background: var(--trust); }                /* green markers (file: green = value) */
.legal a { color: var(--trust); }
/* P1 — placeholder text is legally-mandated merchant fields (IS 5568): dark ink (accent-2 on its tint = 3.1:1 FAIL); keep orange dashed border as the to-fill cue */
.legal .ph { background: rgba(244,124,32,0.14); color: var(--text); border-color: rgba(244,124,32,0.55); }

/* cards need a SOLID white surface to read on warm-white (translucent-white gradients blend in) */
.card { background: #fff; }
.bonus-icon { background: rgba(15,31,61,0.04); color: var(--text-strong); } /* navy ink — keep orange exclusive to CTAs */
.tst-avatar { background: linear-gradient(135deg, #1D3057, #0F1F3D); }

/* P1 — wordmark "AI": orange on warm-white (nav pill + legal header) = 2.53:1 (FAIL).
   Track heading color: navy on light surfaces, white on the navy footer. Orange stays on the .brand-mark square. */
.brand-ai { color: var(--heading); }
/* trust-pressed toggle: drop the old teal remnant for the new green token */
.a11y-opt[aria-pressed="true"] { background: var(--trust-glow-soft); }


/* =========================================================
   SECTION VARIETY — depth + warmth + semantic washes (additive)
   Breaks the flat navy/white 2-tone. GPU-safe; AA verified.
   Layers (by source order) onto the "Authority + Action" theme block.
   ========================================================= */

/* (a) LIGHT sections: warm 2nd/3rd tone instead of all-identical #FAFAFA */
.section.problem, .section.audience { background: var(--bg-cream); }
.section.lesson-peek, .section.bonuses { background: var(--bg-cream-2); }

/* (b) NAVY sections: soft top-down DEPTH instead of a flat slab (hero/footer excluded) */
.section.solution, .section.structure, #pricing, .section.about, .final-cta {
  background:
    radial-gradient(120% 70% at 50% 0%, var(--navy-lift), transparent 62%),
    linear-gradient(to bottom, var(--color-dark) 0%, var(--navy-deep) 100%);
}

/* (c) SEMANTIC WASH — gold behind the social-proof stats */
.section.stats { background: var(--wash-gold); }

/* (d) NAVY DROP-SHADOW at navy→light seams — a short, soft navy shadow cast DOWN onto the light
   section, just below the crisp navy edge above (user 2026-06-18: a drop-shadow, not a blurry feather). */
.section.lesson-peek::before, .section.bonuses::before, .section.stats::before {
  content: ""; position: absolute; inset-inline: 0; inset-block-start: 0;
  block-size: clamp(18px, 3vw, 30px); pointer-events: none; z-index: 0;
  background: linear-gradient(to bottom, rgba(15,31,61,0.30), rgba(15,31,61,0.10) 45%, transparent);
}
/* hero → SECOND section only: WAVY navy divider (user 2026-06-18, ref photo). The navy hero flows
   down in a gentle wave into the white .problem section. SVG navy wave at .problem's top edge: flat
   top sits flush under the hero's navy; wavy bottom edge meets the white. preserveAspectRatio=none +
   size 100% 100% stretches it across any width. */
.section.problem::before {
  content: ""; position: absolute; inset-inline: 0; inset-block-start: -1px;   /* -1px: no hairline gap under the hero */
  block-size: clamp(42px, 6vw, 72px); pointer-events: none; z-index: 1;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 100' preserveAspectRatio='none'%3E%3Cpath d='M0,0 L1200,0 L1200,54 Q900,88 600,54 Q300,22 0,54 Z' fill='%230F1F3D'/%3E%3C/svg%3E") top center / 100% 100% no-repeat;
}
/* lift ALL content above the thread-rail (z-index:1) — hero included, since the rail
   spans the full #main height and would otherwise draw over the hero title/CTA/video. */
.section > .container, .hero > .container { position: relative; z-index: 1; }

/* thin GOLD accent rule into the proof zone */
.section.stats { position: relative; }
.section.stats::after {
  content: ""; position: absolute; inset-block-start: 0; inset-inline: 50%;
  inline-size: clamp(40px, 8vw, 72px); block-size: 3px; transform: translateX(50%);
  border-radius: 3px; background: linear-gradient(90deg, transparent, var(--gold-edge), transparent);
}

/* (e) CARD treatment variety — accent top-hairline per group */
.section.structure .chapter.card { border-block-start: 2px solid var(--hairline-strong); }
.section.stats .stat.card { border-block-start: 2px solid var(--gold-edge); }
.section.bonuses .bonus.card { border-block-start: 2px solid var(--accent-edge); }

/* (f) FILM-GRAIN on light sections (editorial paper feel; static pseudo, no scroll repaint) */
/* NOTE: no `isolation: isolate` here — it would make each section a level-0 stacking context,
   trapping its content BELOW the thread-rail (z-index:1) so the journey line draws OVER cards/text.
   #main already establishes a stacking context, so the grain's mix-blend stays section-local without it.
   Without isolation these sections layer like the navy ones: section bg < thread < .container content. */
.section.problem, .section.audience, .section.lesson-peek, .section.bonuses, .section.stats {
  position: relative; }
.section.problem::after, .section.audience::after,
.section.lesson-peek::after, .section.bonuses::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  opacity: var(--grain-strength); mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* (g) a11y high-contrast must stay pure black — neutralize the new tints + textures */
body.a11y-contrast .section.problem, body.a11y-contrast .section.audience,
body.a11y-contrast .section.lesson-peek, body.a11y-contrast .section.bonuses,
body.a11y-contrast .section.stats { background: #000 !important; }
body.a11y-contrast .section::before, body.a11y-contrast .section::after { display: none !important; }
body.a11y-contrast .section.solution, body.a11y-contrast .section.structure,
body.a11y-contrast #pricing, body.a11y-contrast .section.about,
body.a11y-contrast .final-cta { background: #000 !important; }

/* =========================================================
   SCROLL-THREAD — serpentine "journey spine" (ported from Litman carousel)
   JS builds a width-aware sine path; scroll sets --thread (0..1) to draw it via
   stroke-dashoffset; a glowing tip rides the leading edge (getPointAtLength).
   Layered z-index:1 inside #main → over section backgrounds, under .container content.
   ========================================================= */
.thread-rail { position: absolute; inset: 0; pointer-events: none; z-index: 1; }
.thread-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.thread-track { fill: none; stroke: rgba(244,124,32,0.15); stroke-width: 1.25; stroke-linecap: round; stroke-linejoin: round; }
.thread-draw {
  fill: none; stroke: url(#threadGrad); stroke-width: 2.25; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 1 1; stroke-dashoffset: calc(1 - var(--thread, 0));  /* pathLength=1 → normalized draw */
  filter: drop-shadow(0 0 6px rgba(244,124,32,0.45));  /* single blur pass — the draw-length changes every rAF frame, so keep the per-frame filter cheap (Rules §4) */
}
.thread-tip {
  position: absolute; top: 0; left: 0;   /* physical: JS transform uses LTR SVG px */
  width: 13px; height: 13px; margin: -6.5px 0 0 -6.5px; border-radius: 50%;
  background: var(--color-gold);
  box-shadow: 0 0 0 4px rgba(232,160,32,0.16), 0 0 22px 5px rgba(244,124,32,0.5);
}
.thread-static .thread-tip { display: none; }
.thread-static .thread-draw { stroke-dashoffset: 0; }
@media (prefers-reduced-motion: reduce) {
  .thread-draw { stroke-dashoffset: 0 !important; }
  .thread-tip { display: none !important; }
}
/* in high-contrast a11y mode, hide the decorative thread entirely */
body.a11y-contrast .thread-rail { display: none; }

/* ---------- Claude lockup (the tool taught — nominative, on the navy hero) ---------- */
.claude-lockup { display: inline-flex; align-items: center; gap: .65rem; margin-block-start: 1.4rem;
  flex-wrap: wrap; justify-content: center; }
.claude-lockup-label { color: rgba(255,255,255,0.72); font-weight: 600; font-size: .95rem; }
.claude-accent { inline-size: 1.5rem; block-size: 1.5rem; display: block; }   /* orange mark — reads on any bg */
.claude-chip { display: inline-flex; align-items: center; padding: .42rem .95rem; border-radius: 999px;
  background: #fff; box-shadow: 0 8px 22px -10px rgba(0,0,0,0.55), 0 0 0 1px rgba(0,0,0,0.05) inset; }
.claude-chip img { height: 1.4rem; width: auto; display: block; }
@media (max-width: 520px) { .claude-lockup-label { width: 100%; text-align: center; } }

/* Claude mark heading the curriculum section (orange — shows on navy) */
.claude-mark-deco { display: block; inline-size: 2.6rem; block-size: 2.6rem; margin-inline: auto; margin-block-end: .9rem; }

/* ---------- tilted CLAUDE CODE graphic — on the LEFT side of the hero, behind the content ---------- */
.hero { position: relative; }
.hero-inner { position: relative; z-index: 2; }   /* all hero text stays ABOVE the side graphic */
/* <picture> wrappers must be layout-transparent so absolute-positioning / display-toggling lands on the child <img> */
.hero > picture, .claude-lockup > picture { display: contents; }
.hero-claudecode {
  position: absolute; z-index: 1; margin: 0; height: auto; pointer-events: none;
  inset-inline-end: clamp(1.25rem, 3.5vw, 5rem);   /* nudged a bit RIGHT (away from the left edge) */
  inset-block-start: clamp(2.5rem, 5vw, 6.5rem);   /* nudged a bit DOWN */
  width: clamp(252px, 25.2vw, 386px);              /* +20% larger */
  transform: rotate(-15deg); transform-origin: center;   /* tilt — change -15deg to taste */
  filter: drop-shadow(0 16px 34px rgba(0,0,0,0.4));
}
/* below desktop there is no side gutter (text is full-width) — hide so it never overlaps text */
@media (max-width: 1023px) { .hero-claudecode { display: none; } }
@media (prefers-reduced-motion: reduce) { .hero-claudecode { filter: none; } }

/* ---------- mobile: CLAUDE CODE blocks graphic replaces the small Claude chip ---------- */
.claudecode-mobile { display: none; }
@media (max-width: 1023px) {
  .claude-lockup { flex-direction: column; gap: .45rem; margin-block-start: 1.6rem; }
  .claude-chip { display: none; }
  .claudecode-mobile {
    display: block; width: min(248px, 64%); height: auto; margin-block-start: .2rem;
    transform: rotate(-5deg); transform-origin: center;
    filter: drop-shadow(0 10px 22px rgba(0,0,0,0.45));
  }
}
/* ---------- mobile hero rhythm (premium spacing) ---------- */
@media (max-width: 520px) {
  .hero-cta { gap: .8rem; margin-block-end: 1.8rem; }
  .video-frame { margin-block-start: 2rem; }
}

/* =========================================================
   PAYMENT — Tranzila iframe checkout (payment.html)
   White .price-card on the navy gate (tokens already reset to dark-on-white by the
   .card/.price-card scope). The Tranzila form bg is white, so it reads as one card.
   ========================================================= */
/* Sticky footer + navy fill: page is ≥100dvh navy so no white strip shows under the footer
   when the content is shorter than the viewport. (#main grows; footer pins to the bottom.) */
body.pay-page { min-block-size: 100dvh; display: flex; flex-direction: column; background: var(--color-dark);
  /* PAYMENT-GRADE FONT (user request): a clean Arial-led system sans for Hebrew + Latin instead of the
     editorial serif — trustworthy/transactional, matches the Tranzila form, and also restyles the
     English "AI Architect". Scoped to the pay page; the marketing pages keep their serif identity. */
  --font-display: Arial, 'Arial Hebrew', 'Helvetica Neue', Helvetica, system-ui, sans-serif;
  --font-body:    Arial, 'Arial Hebrew', 'Helvetica Neue', Helvetica, system-ui, sans-serif;
  --font-impact:  Arial, 'Arial Hebrew', 'Helvetica Neue', Helvetica, system-ui, sans-serif; }
body.pay-page #main { flex: 1 0 auto; display: flex; flex-direction: column; }

/* ONE-SCREEN: strip chrome so the fixed-height Tranzila iframe + its trust footer fit without
   scrolling. Override .hero's big top padding (0,3,0 beats .hero 0,1,0); no min-100svh centering. */
/* default: the short step-1 card (+ success/fail cards) sit vertically centered in the screen;
   once the tall Tranzila iframe shows we top-align (.is-paying) — payment.html FLIP-animates the move. */
.hero.gate.pay-gate { min-block-size: auto; flex: 1; flex-direction: column; justify-content: safe center;
  align-items: stretch; padding-block: clamp(3.5rem, 7vh, 4rem) 0.5rem; }   /* top clears the floating hamburger; tiny bottom. `safe` center: fall back to top instead of clipping a card taller than the gate (short viewports / tall business form) */
.hero.gate.pay-gate.is-paying { justify-content: flex-start; }   /* must out-specify the base .hero.gate.pay-gate centering */
.pay-gate .hero-inner { width: 100%; padding-block: 0;
  padding-inline: clamp(0.75rem, 3vw, 2rem); }   /* tighter gutter than the default container → a bit more card+iframe width */

/* invoice-name gate (step 1) + confirm line (step 2) */
.invoice-gate { margin-block: .2rem 0; }
.invoice-gate .field { margin-block-end: .9rem; }
.invoice-gate .btn { width: 100%; }
.invoice-gate .btn:disabled { opacity: .5; cursor: not-allowed; transform: none; box-shadow: none; }
.invoice-error { color: var(--color-error); font-weight: 600; font-size: var(--fs-small);
  margin-block: -.5rem 0 .7rem; text-align: start; }
.invoice-confirm { display: flex; align-items: baseline; gap: .5rem; flex-wrap: wrap;
  justify-content: space-between; color: var(--text-muted); font-size: var(--fs-small); margin-block-end: .7rem; }
.invoice-confirm strong { color: var(--heading); font-weight: 700; }
.invoice-edit { background: none; border: 0; padding: 0; font: inherit; cursor: pointer;
  color: var(--accent-2); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }

/* purchase-type radios (step A) — 44px rows, selected = orange ring */
.buy-type { border: 0; margin: 0 0 1rem; padding: 0; display: grid; gap: .5rem; }
.buy-type legend { padding: 0; margin-block-end: .5rem; font-weight: 600; font-size: .95rem; color: var(--text); }
.radio-row { display: flex; align-items: center; gap: .6rem; min-block-size: 44px; padding: .55rem .85rem;
  border: 1px solid var(--hairline); border-radius: 12px; cursor: pointer; font-weight: 600; color: var(--text); }
.radio-row:hover { border-color: var(--hairline-strong); }
.radio-row input { accent-color: var(--accent); inline-size: 1.15rem; block-size: 1.15rem; flex: none; margin: 0; }
.radio-row:has(input:checked) { border-color: var(--accent); background: rgba(244,124,32,0.06); }

/* business billing step (step B) */
.step-title { font-family: var(--font-display); font-weight: 700; font-size: 1.1rem; color: var(--heading);
  margin-block: 0 1rem; text-align: start; }
#business-step .field { margin-block-end: .75rem; }
.field-row { display: flex; gap: .75rem; }
.field-row .field { flex: 1; }
.opt { color: var(--text-muted); font-weight: 500; font-size: .85em; }   /* "(לא חובה)" hint — used in fields + consent */

/* VAT-inclusive label under the price (index pricing block) */
.price-vat { color: var(--text-muted); font-size: var(--fs-small); font-weight: 600; margin-block-start: .15rem; }
/* checkout point-of-sale fine-print (VAT + terms/refund acknowledgement) */
.pay-fineprint { color: var(--text-muted); font-size: var(--fs-small); text-align: start; margin-block: 0 1rem; }
.pay-fineprint a { color: var(--accent-2); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
/* results page — low-emphasis "back to questionnaire" link (inherits the card's text colour) */
.res-back { display: inline-block; margin-block-start: .9rem; color: inherit; opacity: .72; font-size: var(--fs-small);
  font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.res-back:hover { opacity: 1; }
.step-actions { display: flex; gap: .7rem; margin-block-start: .4rem; }
.step-actions .btn { width: auto; }                 /* override .invoice-gate .btn full-width */
.step-actions .btn-primary { flex: 1; }
.step-actions .btn-ghost { flex: none; border: 1px solid var(--hairline-strong); color: var(--text); }

/* compact legal footer on the one-screen pay page (full footer elsewhere = 2rem padding) */
.funnel-legal-tight { padding-block: .7rem calc(.7rem + env(safe-area-inset-bottom)); gap: .35rem; }
.funnel-legal-tight nav { gap: .85rem; }

.pay-card { margin-block-start: 0; padding: clamp(0.8rem, 2.2vw, 1.25rem) clamp(0.55rem, 1.8vw, 1rem); }  /* slimmer inline padding gives the iframe more horizontal room */
.pay-order { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  padding-block-end: .55rem; margin-block-end: .65rem; border-block-end: 1px solid var(--hairline); }
.pay-order-name { font-family: var(--font-display); font-weight: 700; font-size: clamp(1rem, 2.4vw, 1.2rem); color: var(--heading); }
.pay-order-amount { font-family: var(--font-display); font-weight: 900; font-size: 1.45rem; color: var(--heading);
  font-variant-numeric: tabular-nums; }

.pay-frame { position: relative; border-radius: 14px; overflow: hidden;
  border: 1px solid var(--hairline); background: #fff; min-block-size: 600px; }
/* Height = the Hebrew card form + Tranzila's full trust footer (logo + 3D-Secure/Firewall/
   SSL/Level-1-PCI seals + the bottom Tranzila wordmark line). Raised 500→600px so the footer
   fits WITHOUT an inner iframe scroll (user request); the page may scroll a little instead.
   ponytail: a cross-origin iframe can't self-size → fixed; bump if a terminal config still clips. */
#tranzila-frame { display: block; width: 100%; min-block-size: 600px; block-size: 600px; border: 0; }
.pay-loader { position: absolute; inset: 0; display: grid; place-items: center; gap: .8rem;
  background: #fff; color: var(--text-muted); font-weight: 600; text-align: center; }
.pay-loader[hidden] { display: none; }
.pay-spinner { inline-size: 1.8rem; block-size: 1.8rem; margin-inline: auto; border-radius: 50%;
  border: 3px solid var(--hairline); border-block-start-color: var(--accent); animation: pay-spin .8s linear infinite; }
@keyframes pay-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .pay-spinner { animation-duration: 2.4s; } }

/* smooth fade-in of the payment iframe once the card has slid up to the top */
#pay-step2 { animation: pay-reveal .45s cubic-bezier(0.32, 0.72, 0, 1) both; }
@keyframes pay-reveal { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { #pay-step2 { animation: none; } }

/* success / fail state cards */
.pay-card.center { text-align: center; }
.pay-card.center .price-note { margin-inline: auto; max-width: 46ch; text-align: center; }
.pay-card.center .btn { margin-block-start: 1.4rem; }
.pay-state-icon { inline-size: 3.2rem; block-size: 3.2rem; border-radius: 50%; display: grid; place-items: center;
  margin: 0 auto 1rem; }
.pay-state-icon svg { inline-size: 1.7rem; block-size: 1.7rem; }
.pay-state-icon.trust { background: var(--trust-glow-soft); color: var(--trust); }
.pay-state-icon.err { background: rgba(192,57,43,0.10); color: var(--color-error); }

/* =========================================================
   PRICING — discount savings line + countdown (rendered by promo.js; default-OFF / hidden)
   ========================================================= */
/* visually-hidden but screen-reader-available (used by promo.js's polite countdown live region on every
   page that loads promo.js; also reused by payment.html's order-total live region). */
.pay-sr { position: absolute; inline-size: 1px; block-size: 1px; margin: -1px; padding: 0; border: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
/* savings line under the "now" price (revealed only in genuine-discount mode) */
.price-saving { margin-block-start: .5rem; font-weight: 700; color: var(--trust-strong);
  font-size: var(--fs-small); }
.price-saving .num { font-variant-numeric: tabular-nums; }
/* a struck "before" price for genuine-discount mode (distinct from the "שווי" value anchor) */
.price-before { color: var(--text-muted); text-decoration: line-through; text-decoration-thickness: 2px;
  font-weight: 700; }
.price-before .num { font-variant-numeric: tabular-nums; }

/* COUNTDOWN promo bar. STICKY at the top: scrolls with the page until it pins to the top, then stays
   visible while the user scrolls down. It keeps its slot in normal flow (no CLS, content below is never
   covered). z-index 90 sits above page content (z 1) but below the fixed nav hamburger (z 100) so the
   menu button stays tappable on top of the bar. Navy surface, orange accent, NO red.
   Mounts are [data-countdown-mount] and stay hidden until promo.js confirms an active window. */
[data-countdown-mount] { display: block; }
[data-countdown-mount][hidden] { display: none; }
.promo-bar { position: sticky; inset-block-start: 0; z-index: 90;
  background: linear-gradient(180deg, var(--navy-lift), var(--color-dark));
  color: #fff; text-align: center; padding-block: .6rem; padding-inline: clamp(.8rem, 3vw, 1.5rem);
  border-block-end: 1px solid rgba(255,255,255,0.12); }
.promo-cd { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .5rem .85rem; }
.promo-cd-label { font-family: var(--font-body); font-weight: 700; color: #fff; font-size: var(--fs-small); }
/* monospace HH:MM:SS-style timer (fixed-width cells + colon separators; digits tick in place, no jitter) */
.promo-cd-time { display: inline-flex; align-items: flex-start; gap: .12rem; direction: ltr;
  font-family: ui-monospace, 'SF Mono', 'Menlo', 'Consolas', 'Courier New', monospace;
  font-variant-numeric: tabular-nums; line-height: 1; }
.promo-cd-cell { display: inline-flex; flex-direction: column; align-items: center; min-inline-size: 2.4ch; }
.promo-cd-num { font-size: clamp(1.45rem, 4.5vw, 1.8rem); font-weight: 800; line-height: 1; color: var(--accent);
  font-variant-numeric: tabular-nums; }
.promo-cd-sep { font-size: clamp(1.3rem, 4vw, 1.6rem); font-weight: 700; line-height: 1;
  color: rgba(255,255,255,0.45); padding-block-start: .04em; }
.promo-cd-cap { margin-block-start: .28rem; font-size: .6rem; font-weight: 600; color: rgba(255,255,255,0.72); }
.promo-cd-ended { color: rgba(255,255,255,0.85); font-weight: 700; font-size: var(--fs-small); text-align: center; }

/* countdown mirror inside a light card (e.g. preview discount card) — accents for a light surface */
.promo-cd--card .promo-cd-label { color: var(--text); }
.promo-cd--card .promo-cd-num { color: var(--accent-2); }       /* large bold ≥18.66px → 3:1 large-text AA on light */
.promo-cd--card .promo-cd-sep { color: var(--hairline-strong); }
.promo-cd--card .promo-cd-cap { color: var(--text-muted); }

/* MOBILE: stack the bar to two centered rows (label over timer) and shrink the cells so all four units
   (ימים:שעות:דקות:שניות) fit without clipping. The content is centered across the full bar width; the
   fixed hamburger sits at the top-inline-end corner and the centered label/timer are narrow enough to
   clear it (no padding shove needed — symmetric padding keeps it visually centered).
   The card mirror (preview) keeps its single-row centered layout — it has no corner hamburger. */
@media (max-width: 520px) {
  .promo-bar { padding-block: .5rem; }
  .promo-bar .promo-cd { flex-direction: column; gap: .28rem; }
  .promo-bar .promo-cd-label { font-size: .8rem; }
  .promo-bar .promo-cd-num { font-size: 1.3rem; }
  .promo-bar .promo-cd-sep { font-size: 1.15rem; }
  .promo-bar .promo-cd-cell { min-inline-size: 2ch; }
  .promo-bar .promo-cd-cap { font-size: .55rem; margin-block-start: .18rem; }
}

/* ============ WHY CLAUDE CODE — honest 3-card tool comparison ============ */
.section.why-cc { background: var(--bg); }
.whycc-mark {
  display: inline-flex; align-items: center; justify-content: center;
  inline-size: 2.2rem; block-size: 2.2rem; border-radius: 50%;
  font-size: 1.05rem; font-weight: 700; margin-block-end: .75rem;
  background: rgba(106, 106, 124, 0.12); color: var(--text-muted);
}
.whycc-us .whycc-mark { background: rgba(45, 122, 79, 0.14); color: var(--trust); }
.whycc-us.card { border-block-start: 2px solid var(--accent); }
.whycc-note { margin-block-start: 2rem; font-weight: 600; color: var(--heading); }
/* high-contrast a11y mode: force the tinted marks to pure black-on-white (project mandatory block) */
body.a11y-contrast .whycc-mark { background: #fff !important; color: #000 !important; border: 1px solid #000; }