/* =========================================================
   REDCODE AI — 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(1.9rem, 8.2vw, 5.5rem);  /* floor lowered so the headline fits 360px (was 2.6rem -> clipped) */
  --fs-h2:   clamp(1.9rem, 4.5vw, 3.2rem);
  --fs-h3:   clamp(1.2rem, 2.4vw, 1.55rem);
  --fs-body: clamp(1.02rem, 1.35vw, 1.18rem);
  --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(3rem, 7vw, 5.5rem);  /* tighter rhythm between sections */
  --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: -100%;
  background: var(--accent); color: #fff; padding: .7rem 1.1rem; border-radius: 10px;
  z-index: 200; transition: inset-block-start var(--dur-fast);
}
.skip-link:focus { inset-block-start: 1rem; }

/* ---------- 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); padding-inline: clamp(.7rem, 3.5vw, 1.4rem);
  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: 1.1rem;
}
/* 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.5rem; 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); }

/* =========================================================
   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; }
.chapter { display: flex; align-items: flex-start; gap: 1rem; }
.chapter:first-child { grid-column: 1 / -1; }
.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) */
.price-strike { font-family: var(--font-display); font-weight: 800; font-size: 1.6rem; color: var(--text-muted); text-decoration: line-through; text-decoration-color: var(--accent-2); 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: 90vh; overflow: auto;
  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; }
.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; }
}

/* =========================================================
   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: 2rem; block-size: 2rem; border-radius: 8px; cursor: pointer; font-size: 1rem; }
.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.6rem; block-size: 2.6rem; border-radius: 9px; cursor: pointer;
  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; }

@media (max-width: 520px) { .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; } }

/* =========================================================
   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; border-radius: 0 12px 12px 0; margin-block: 1.2em; color: var(--text-soft); }
.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: rgba(26,26,46,0.45); }
.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(--color-error); }
.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 5px rgba(244,124,32,0.45)) drop-shadow(0 0 11px rgba(232,160,32,0.30));
}
.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 "REDCODE AI". 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); }