/* הון בעצמי - landing.css · "בית פיננסי חם"
   Mobile-first. Loaded after tokens.css. No external deps. Compositor-only motion.
   Sections keyed to docs/landing-site/01-design-spec.md §3 (color rhythm) + §5 (art direction). */

/* ============================ fonts ============================ */
@font-face {
  font-family: 'Discovery FS';
  src: url('/fonts/Discovery_Fs-Medium.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Discovery FS';
  src: url('/fonts/Discovery_Fs-Bold.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Talent FS';
  src: url('/fonts/Talent_FS-Regular.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Talent FS';
  src: url('/fonts/Talent_FS-Medium.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Talent FS';
  src: url('/fonts/Talent_FS-Bold.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Talent FS';
  src: url('/fonts/Talent_FS-Black.woff2') format('woff2');
  font-weight: 900; font-style: normal; font-display: swap;
}

/* ============================ reset / base ============================ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: 'Talent FS', system-ui, sans-serif;
  font-weight: 400;
  font-size: var(--text-body);
  line-height: 1.7;
  color: var(--text);
  background: var(--cream);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img, svg, picture { max-width: 100%; display: block; }
/* below-fold <picture> wrappers are layout-transparent so the existing img CSS still applies
   (the hero .hero-figure picture is deliberately excluded, it is a styled box) */
.card-feature picture, .story-figure picture, .story-sign picture { display: contents; }
a { color: inherit; }
button { font-family: inherit; cursor: pointer; }
h1, h2, h3 { margin: 0; line-height: 1.15; }
p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }
:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; border-radius: 4px; }

/* Discovery display type; headings are always navy, never caramel */
.display { font-family: 'Discovery FS', 'Talent FS', system-ui, sans-serif; }
.num { unicode-bidi: isolate; }

/* skip link */
.skip-link {
  position: absolute; right: 12px; top: -60px; z-index: 110;
  background: var(--blue-dark); color: var(--cream);
  padding: 10px 18px; border-radius: 10px; font-weight: 700;
  transition: top .2s var(--ease-out-expo); text-decoration: none;
}
.skip-link:focus { top: 12px; }

/* ============================ layout ============================ */
.wrap { width: 100%; max-width: 1180px; margin-inline: auto; padding-inline: clamp(1.15rem, 5vw, 3rem); }
.section { padding-block: var(--space-section); position: relative; }
.kicker {
  font-family: 'Discovery FS', sans-serif; font-weight: 500;
  font-size: var(--text-kicker); letter-spacing: 0.02em;
  color: var(--caramel-action); margin: 0 0 .75rem;
}
.section-title {
  font-family: 'Discovery FS', sans-serif; font-weight: 700;
  font-size: var(--text-section); color: var(--blue-dark);
  line-height: 1.18;
}
.lead { color: var(--text-soft); max-width: 54ch; margin-top: 1rem; }

/* ============================ buttons ============================ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  font-family: 'Discovery FS', sans-serif; font-weight: 700;
  font-size: 1.0625rem; text-decoration: none; border: 0;
  padding: 17px 34px; border-radius: var(--radius-button);
  transition: transform .16s var(--ease-out-expo), background-color .16s, box-shadow .16s;
  position: relative;
}
.btn-primary {
  background: var(--caramel-action); color: var(--white);
  box-shadow: 0 8px 22px -12px rgba(159, 101, 57, .8);
}
.btn-primary:hover { background: var(--caramel-hover); transform: translateY(-1px); box-shadow: 0 14px 28px -12px rgba(159, 101, 57, .9); }
.btn-primary:active { transform: translateY(0); }
.btn-ghost {
  background: transparent; color: var(--caramel-action);
  border: 1.5px solid var(--caramel-action); padding: 15.5px 32px;
}
.btn-ghost:hover { background: var(--caramel-pale); transform: translateY(-1px); }
.btn-block { width: 100%; }
.btn-lg { padding: 19px 38px; font-size: 1.125rem; }

/* ============================ header ============================ */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(250, 247, 242, 0.96);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border);
}
.header-inner { display: flex; align-items: center; justify-content: space-between; min-height: 66px; }
.wordmark {
  font-family: 'Discovery FS', sans-serif; font-weight: 700;
  font-size: 1.375rem; color: var(--blue-dark); text-decoration: none;
  display: inline-flex; align-items: center; gap: .5rem;
}
.wordmark .mark { height: 48px; width: auto; flex: none; }
.header-cta {
  opacity: 0; visibility: hidden; transform: translateY(-4px);
  transition: opacity .3s var(--ease-out-expo), transform .3s var(--ease-out-expo), visibility .3s;
  padding: 11px 22px; font-size: .95rem;
}
.header-cta.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }

/* ============================ hero (mobile-first) ============================ */
.hero { background: var(--cream); position: relative; overflow: hidden; padding-top: clamp(2rem, 6vw, 3rem); }
.hero-inner { position: relative; z-index: 2; }
.hero-text { max-width: 640px; margin-inline: auto; text-align: center; }
.hero h1 {
  font-family: 'Discovery FS', sans-serif; font-weight: 700;
  /* mobile: sized so each side of the <br> fits one line at 375/390 (F-05, 2 lines);
     320 falls to the permitted 3-line exception. tablet/desktop restore --text-hero at >=768. */
  font-size: clamp(1.8rem, 7.3vw, 2.25rem); color: var(--blue-dark);
  line-height: 1.12; margin: .35rem 0 0; text-wrap: balance;
}
/* deck line under the H1 (LP-FIX-2 L-01); body font per 01§2, blue-dark like a heading.
   balance keeps it from dropping a one-word orphan line. */
.hero .hero-tagline {
  color: var(--blue-dark); font-weight: 500; font-size: 1.06rem;
  max-width: 50ch; margin: .85rem auto 0; text-wrap: balance;
}
.hero .hero-sub { color: var(--text-soft); max-width: 52ch; margin: 1.15rem auto 0; }
.hero-cta-row { margin-top: 1.6rem; display: flex; flex-direction: column; align-items: center; gap: .7rem; }
.hero-cta-row .btn { width: 100%; max-width: 360px; }
.microline { font-size: .95rem; color: var(--text-soft); max-width: 44ch; margin: 0 auto; }
.microline strong { color: var(--caramel-action); font-weight: 700; }

/* hero image: the mobile photo stays complete; the desktop arch is restored at 1024px */
.hero-figure { position: relative; margin: 2.2rem auto -2rem; width: 92%; max-width: 420px; z-index: 2; }
/* 12.8 הפתרון הסופי: האוויר נמצא בתוך קובץ hero-mobile3 עצמו (המקור הלא-חתוך של צילום
   החולצה השחורה, שבו הכתר שלם, בתוספת רקע סטודיו מעל שורה 0), ולכן ה-CSS פשוט: קשת על
   התמונה המלאה ביחס הטבעי שלה. אפס חיתוך. */
.hero-figure img {
  width: 100%; height: auto; aspect-ratio: auto; object-fit: cover;
  border-radius: 999px 999px 28px 28px;
  box-shadow: 0 30px 60px -30px rgba(44, 70, 96, .45);
}

/* trust shelf pills */
/* mobile: 2x2 grid so the four client strings land in two rows (L-02). The strings are long, so
   the pill text wraps inside its own cell rather than the shelf wrapping to four rows.
   >=768 it goes back to a flowing flex shelf. (Codex F-01) */
.shelf { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; margin-top: 1.7rem; }
/* LP-RESP-1: מתחת ל-360 כל תא ברוחב כ-145px, והמחרוזות של לאה ארוכות מכדי להישבר שם
   ליותר ממילה בשורה. עמודה אחת נותנת להן רוחב מלא. מ-360 ומעלה ה-2x2 נשאר כפי שנקבע. */
@media (max-width: 359px) {
  .shelf { grid-template-columns: 1fr; }
}
/* LP-RESP-1: במובייל אלה לא גלולות אלא כרטיסים רב-שורתיים, ולכן הרדיוס כאן 16px.
   `999px` על תיבה בגובה ארבע שורות הופך אותה לאליפסה, והפינות אוכלות את הרוחב השימושי,
   ואז הטקסט נשבר למילה בשורה ומגדיל עוד את הגובה. הרדיוס העגול לגמרי נעוץ מחדש
   ב-768+, שם המדף חוזר להיות זורם והפילים חד-שורתיים, וזו הצורה שאושרה. */
.pill {
  display: flex; align-items: flex-start; gap: .45rem;
  background: rgba(255, 255, 255, 0.78);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  border: 1px solid var(--border); border-radius: 16px;
  padding: .7rem .85rem; font-size: .9rem; color: var(--text); font-weight: 500;
  box-shadow: 0 6px 16px -12px rgba(44, 70, 96, .5);
}
.pill svg { width: 16px; height: 16px; margin-top: .2em; color: var(--caramel-action); flex: none; }
.pill.pill-price { font-weight: 700; color: var(--blue-dark); }
/* the "resting on a shelf" stagger (01§4) belongs to the flowing flex shelf; in the mobile 2x2 grid
   it would just misalign two equal-height cells, so it starts at 768 with the flex layout. */

/* ============================ section 3: pain (blue-pale) ============================ */
.pain { background: var(--blue-pale); position: relative; }
.pain::before { /* arch overlap with hero */
  content: ""; position: absolute; top: -34px; left: 50%; transform: translateX(-50%);
  width: 220px; height: 34px; background: var(--blue-pale);
  border-radius: 220px 220px 0 0;
}
.pain-intro { max-width: 60ch; }
.feeling-list { margin-top: 2rem; display: grid; gap: 1.1rem; }
.feeling {
  display: grid; grid-template-columns: auto 1fr; gap: .8rem; align-items: start;
  max-width: 44ch; margin-inline-start: 0;
}
.feeling .dot { width: 12px; height: 12px; margin-top: .55rem; border-radius: 50%; background: var(--caramel); flex: none; }
.no-shame {
  margin-top: 2.4rem; background: var(--white); border-radius: var(--radius-card);
  border-inline-start: 3px solid var(--caramel);
  padding: 1.6rem 1.5rem; max-width: 62ch;
  box-shadow: 0 18px 40px -28px rgba(44, 70, 96, .4);
}
.no-shame h3 {
  font-family: 'Discovery FS', sans-serif; font-weight: 500;
  font-size: 1.3rem; color: var(--blue-dark); margin-bottom: .6rem;
}
.no-shame strong { color: var(--blue-dark); }

/* ============================ section 4: bridge (gradient) ============================ */
.bridge { background: linear-gradient(180deg, var(--blue-pale) 0%, var(--caramel-pale) 100%); }
.bridge-pairs { margin-top: 2rem; display: grid; gap: 1.25rem; max-width: 760px; }
.pair {
  display: grid; grid-template-columns: 1fr auto 1.1fr; align-items: center; gap: .9rem;
  background: rgba(255, 255, 255, 0.55); border-radius: 14px; padding: 1rem 1.15rem;
}
.pair .from { color: var(--text-soft); font-size: .98rem; }
.pair .to { font-family: 'Discovery FS', sans-serif; font-weight: 700; color: var(--blue-dark); }
.pair .arrow { color: var(--caramel-action); font-size: 1.3rem; line-height: 1; }
.bridge-close { margin-top: 2rem; font-weight: 500; max-width: 60ch; color: var(--text); }
/* F-06: under 480px stack each pair (from over to, arrow points down) so neither side is
   crushed into a ~100px column and breaks into thin unreadable lines */
@media (max-width: 479px) {
  .bridge-pairs { gap: 1rem; }
  .pair { grid-template-columns: 1fr; justify-items: center; text-align: center; gap: .5rem; padding: 1.15rem 1.2rem; }
  .pair .from { font-size: 1.02rem; }
  .pair .arrow { transform: rotate(-90deg); line-height: 1; }
  .pair .to { font-size: 1.08rem; }
}

/* ============================ section 5: club (cream bento) ============================ */
.club { background: var(--cream); }
/* visual sub-title above the bento (LP-FIX-2 L-04): the club h2 now carries Leah's section-5 line.
   deliberately NOT a heading, an h3 here would sit as a sibling of the bento card h3s and expose an
   empty heading section to screen-reader heading navigation (Codex F-06). */
.club-sub {
  font-family: 'Discovery FS', sans-serif; font-weight: 500;
  font-size: 1.35rem; color: var(--blue-dark); margin-top: 2.4rem;
}
.bento { margin-top: 1.2rem; display: grid; grid-template-columns: 1fr; gap: 1.1rem; }
/* named course library (LP-FIX-2 L-05): compact chips, never a long paragraph */
.course-chips {
  display: flex; flex-wrap: wrap; gap: .4rem; margin: 0 0 .8rem; padding: 0; list-style: none;
}
.course-chips li {
  background: var(--caramel-pale); border-radius: 999px;
  padding: .3rem .7rem; font-size: .88rem; color: var(--blue-dark); font-weight: 500;
}
.card {
  border-radius: var(--radius-card); padding: 1.5rem 1.4rem; background: var(--white);
  border: 1px solid var(--border);
}
.card h3 { font-family: 'Discovery FS', sans-serif; font-weight: 500; font-size: var(--text-card-title); color: var(--blue-dark); margin-bottom: .5rem; }
.card p { color: var(--text-soft); font-size: 1rem; }
.card p + p { margin-top: .55rem; }
.card .card-ico { width: 34px; height: 34px; color: var(--caramel-action); margin-bottom: .8rem; }
.card-feature { border: 0; box-shadow: 0 22px 46px -30px rgba(44, 70, 96, .5); border-radius: 20px; }
.card-feature .thumb {
  width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; object-position: center 30%;
  border-radius: 999px 999px 14px 14px; margin-bottom: 1rem;
  background: var(--caramel-pale);
}
/* C5 (לאה, 5.8): "הייתי נותנת מקום לספריה הדיגיטלית יותר מהקורס כסף בכיסים".
   הספרייה היא כרטיס-הפתיחה: ראשונה ברשת, רוחב מלא מ-768, כותרת ואייקון גדולים יותר.
   כסף בכיסים נשאר `.card-feature` (בשביל עיצוב ה-thumb) אבל מפסיק לתפוס רוחב מלא. */
.card-lead { border: 0; box-shadow: 0 22px 46px -30px rgba(44, 70, 96, .5); border-radius: 20px; }
.card-lead h3 { font-size: clamp(1.3rem, 1.15rem + 0.5vw, 1.6rem); }
.card-lead .card-ico { width: 40px; height: 40px; }
.card-lead .course-chips { margin-bottom: 1rem; }
.card-lead .course-chips li { font-size: .95rem; padding: .35rem .8rem; }
.card-value { color: var(--blue-dark); font-weight: 500; }
.card-navy { background: var(--blue-dark); color: var(--cream); border: 0; }
.card-navy h3 { color: var(--white); }
.card-navy p { color: var(--gold-on-navy-text); }
.card-navy .card-ico { color: var(--caramel); }
.card-caramel { background: var(--caramel-pale); border: 0; }
.club-bridge { margin-top: 2.2rem; text-align: center; }
.club-bridge p { font-family: 'Discovery FS', sans-serif; font-weight: 500; color: var(--blue-dark); font-size: 1.2rem; margin-bottom: 1.1rem; }

/* ============================ section 6: how (white) ============================ */
.how { background: var(--white); }
/* FIX-2: עוגן הזמן שמעל הצעדים. אותה טיפוגרפיה כמו .lead, בלי margin-top כפול
   (ל-.steps כבר יש 2.4rem משלו), כדי שהוא ייקרא כהמשך של הכותרת ולא כפסקה נוספת. */
.how-anchor { color: var(--text-soft); max-width: 54ch; margin-top: 1rem; }
.steps-wrap { position: relative; display: flow-root; }
/* hairline thread connecting the three step circles (§6, §7.1); horizontal only once the steps sit in a row */
.steps-thread { display: none; }
.steps { margin-top: 2.4rem; display: grid; gap: 2rem; position: relative; }
.step { display: grid; grid-template-columns: auto 1fr; gap: 1.1rem; align-items: start; }
.step-num {
  width: 58px; height: 58px; border-radius: 50%; background: var(--caramel-pale);
  display: grid; place-items: center; flex: none;
  font-family: 'Discovery FS', sans-serif; font-weight: 700; font-size: 1.5rem; color: var(--blue-dark);
}
.step h3 { font-family: 'Discovery FS', sans-serif; font-weight: 500; font-size: 1.2rem; color: var(--blue-dark); margin-bottom: .3rem; }
.step p { color: var(--text-soft); font-size: 1rem; }
.tech-calm {
  margin-top: 2.4rem; text-align: center; max-width: 60ch; margin-inline: auto;
  color: var(--text); font-weight: 500;
}

/* ============================ section 7: story (cream + blob) ============================ */
.story { background: var(--cream); position: relative; overflow: hidden; }
.story-blob {
  position: absolute; z-index: 0; width: 420px; height: 420px; border-radius: 46% 54% 60% 40% / 52% 44% 56% 48%;
  background: var(--caramel-pale); opacity: .7; filter: blur(2px);
  top: 8%; inset-inline-start: -140px;
}
.story-grid { position: relative; z-index: 1; display: grid; gap: 1.8rem; }
.story-figure { position: relative; max-width: 360px; margin-inline: auto; }
.story-figure img { width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 999px 999px 24px 24px; box-shadow: 0 30px 60px -32px rgba(44, 70, 96, .5); }
.pull-quote {
  font-family: 'Discovery FS', sans-serif; font-weight: 500; font-size: clamp(1.35rem, 1rem + 2vw, 2rem);
  color: var(--blue); line-height: 1.3; margin: 0 0 1.4rem;
}
.story-body p { margin-bottom: 1rem; color: var(--text); }
.story-body .cred { text-decoration: underline; text-decoration-color: var(--caramel); text-underline-offset: 3px; }
.story-sign { display: flex; align-items: center; gap: .8rem; margin-top: 1.4rem; }
.story-sign img { width: 62px; height: 62px; border-radius: 50%; object-fit: cover; }
.story-sign .name { font-family: 'Discovery FS', sans-serif; font-weight: 700; color: var(--blue-dark); font-size: 1.3rem; }

/* ============================ section 8: proof (blue band) ============================ */
.proof { background: var(--blue); color: var(--white); }
.proof .section-title { color: var(--white); }
.proof-honesty { color: var(--blue-pale); max-width: 60ch; margin-top: 1rem; }
.bubbles { margin-top: 2.2rem; display: grid; gap: 1.1rem; }
.bubble {
  background: var(--white); color: var(--text); border-radius: 16px 16px 16px 4px;
  padding: 1.2rem 1.3rem; max-width: 40ch; position: relative;
  box-shadow: 0 18px 40px -26px rgba(0, 0, 0, .5);
}
.bubble p { font-size: 1rem; }
.bubble .who { display: block; margin-top: .7rem; font-size: .85rem; color: var(--text-soft); font-weight: 500; }
.bubble:nth-child(even) { margin-inline-start: auto; }
/* LP-PROOF-2: כפתור "לקריאת כל הביקורות" + מיכל יתר העדויות. הסקשן כהה, ולכן
   הכפתור בלבן כדי לעמוד בניגודיות. */
.proof-more-btn {
  display: block; margin: 1.6rem auto 0;
  color: var(--white); border-color: var(--white);
}
.proof-more-btn:hover { color: var(--blue-dark); background: var(--white); }
.proof-all { margin-top: 1.4rem; }
/* באג 16.8 (ממצא תמיר): `.bubbles { display:grid }` דורס את כלל ה-UA של
   [hidden] (display:none), ולכן היתר הוצגו למרות ה-hidden. אותה מלכודת
   [hidden] שנתפסה כבר שלוש פעמים בריפו (ראו app-qa-1-gate). הכלל כאן מחזיר
   ל-hidden את המילה האחרונה. */
.proof-all[hidden] { display: none; }

/* ============================ section 9: price (cream) ============================ */
.price { background: var(--cream); }
.price-card {
  margin: 2.2rem auto 0; max-width: 27rem; background: var(--white);
  border-radius: 20px; border: 1px solid var(--border);
  box-shadow: 0 30px 60px -34px rgba(44, 70, 96, .45); overflow: hidden;
  position: relative;
}
.price-free { padding: 1.6rem 1.6rem 1.3rem; }
.price-free h3 { font-family: 'Discovery FS', sans-serif; font-weight: 500; color: var(--blue-dark); font-size: 1.3rem; margin-bottom: .9rem; }
.checklist { display: grid; gap: .6rem; }
.checklist li { display: grid; grid-template-columns: auto 1fr; gap: .55rem; align-items: start; font-size: 1rem; }
.checklist .ck { width: 18px; height: 18px; margin-top: .2rem; color: var(--caramel); flex: none; }
.price-div { height: 1px; background: var(--hairline); margin: 0 1.6rem; }
.price-full { padding: 1.5rem 1.6rem 1.8rem; position: relative; }
.price-launch-label { text-align: center; color: var(--caramel-action); font-weight: 700; margin-bottom: .2rem; }
.price-tag { display: flex; flex-wrap: wrap; align-items: baseline; gap: .4rem .65rem; justify-content: center; }
.price-tag .amount { font-family: 'Discovery FS', sans-serif; font-weight: 700; font-size: var(--text-price); color: var(--blue-dark); line-height: 1; }
.price-tag .per { color: var(--text-soft); font-family: 'Talent FS'; font-weight: 500; }
.price-tag .price-old { color: var(--text-soft); font-size: .95rem; white-space: nowrap; }
.price-tag .price-old s { color: var(--text-soft); text-decoration-thickness: 2px; }
.price-swash { display: block; width: 120px; height: 10px; margin: .2rem auto .3rem; color: var(--caramel); }
/* LAUNCH-SWITCH-1: שורת "בתוקף עד 2.9"; מוסרת ע"י landing.js אחרי נקודת החיתוך */
.price-until { text-align: center; color: var(--caramel-action); font-weight: 700; font-size: .9rem; margin: .15rem 0 .3rem; }
.price-note { text-align: center; color: var(--text-soft); font-size: .95rem; font-style: italic; }
/* LP-LAUNCH-1-FIX-1: המסלול השנתי מוצג באותו דפוס של החודשי, מחיר השקה מודגש ומחיר מלא בקו חוצה */
.price-annual { font-style: normal; margin-top: .35rem; }
.price-annual [data-annual-price="current"] { color: var(--blue-dark); font-weight: 700; }
.price-annual s { color: var(--text-soft); text-decoration-thickness: 2px; font-weight: 400; }
.price-waitline { text-align: center; color: var(--blue-dark); font-weight: 500; margin-top: .5rem; font-size: .98rem; }
.price-sticker {
  position: absolute; top: -12px; inset-inline-end: 14px; transform: rotate(-2deg);
  background: var(--caramel-pale); color: var(--caramel-action);
  font-family: 'Discovery FS', sans-serif; font-weight: 700; font-size: .8rem;
  padding: .4rem .8rem; border-radius: 8px; box-shadow: 0 8px 18px -12px rgba(159, 101, 57, .7);
}
.price-included { margin-top: 1.4rem; }
.price-included li { display: grid; grid-template-columns: auto 1fr; gap: .55rem; align-items: start; font-size: .98rem; margin-bottom: .5rem; }
.price-included .ck { width: 18px; height: 18px; margin-top: .2rem; color: var(--caramel-action); flex: none; }
.price-card .btn { margin-top: 1.5rem; }
.price-derisk { color: var(--text-soft); font-size: .95rem; margin-top: 1rem; }
.price-quote { text-align: center; max-width: 48ch; margin: 2rem auto 0; color: var(--text-soft); font-style: italic; }
.price-reassure { text-align: center; max-width: 54ch; margin: 1.4rem auto 0; color: var(--text); }

/* ============================ section 10: faq (blue-pale) ============================ */
.faq { background: var(--blue-pale); }
.accordion { margin-top: 2rem; max-width: 780px; display: grid; gap: .85rem; }
.acc-item { background: var(--white); border-radius: 14px; border: 1px solid var(--border); overflow: hidden; }
.acc-trigger {
  width: 100%; text-align: start; background: transparent; border: 0;
  padding: 1.15rem 1.3rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  font-family: 'Discovery FS', sans-serif; font-weight: 500; font-size: 1.08rem; color: var(--blue-dark);
}
.acc-trigger .plus { width: 22px; height: 22px; flex: none; color: var(--caramel-action); transition: transform .25s var(--ease-out-expo); }
.acc-trigger[aria-expanded="true"] .plus { transform: rotate(45deg); }
/* collapsed panel: visibility:hidden also removes the answer from the a11y tree +
   tab order (max-height:0 alone does not); delay hiding until the collapse finishes */
.acc-panel { max-height: 0; overflow: hidden; visibility: hidden; transition: max-height .3s var(--ease-out-expo), visibility 0s linear .3s; }
.acc-panel-inner { padding: 0 1.3rem 1.25rem; color: var(--text-soft); }
/* panel is a sibling of the <h3> that wraps the trigger, so key expansion off a
   JS-toggled class on .acc-item (works without :has()) */
.acc-item.is-open .acc-panel { max-height: 600px; visibility: visible; transition: max-height .3s var(--ease-out-expo), visibility 0s; }

/* ============================ section 11: final CTA + form (navy) ============================ */
.final { background: var(--blue-dark); color: var(--cream); position: relative; overflow: hidden; }
.final .linework { position: absolute; inset: 0; opacity: .08; z-index: 0; color: var(--caramel); pointer-events: none; }
.final-inner { position: relative; z-index: 1; max-width: 620px; margin-inline: auto; text-align: center; }
.final h2 { font-family: 'Discovery FS', sans-serif; font-weight: 700; font-size: var(--text-section); color: var(--cream); }
.final-body { color: var(--blue-pale); margin-top: 1rem; }
.final-quote { color: var(--gold-on-navy-text); font-style: italic; margin: 1.8rem auto 0; max-width: 50ch; }
.final-fire { font-family: 'Discovery FS', sans-serif; font-weight: 700; font-size: 1.4rem; color: var(--cream); margin: 1.4rem 0 1.8rem; }

/* form */
.lead-form { background: var(--cream); color: var(--text); border-radius: 20px; padding: 1.8rem 1.6rem; text-align: start; box-shadow: 0 30px 70px -34px rgba(0, 0, 0, .6); }
.lead-form h3 { font-family: 'Discovery FS', sans-serif; font-weight: 700; color: var(--blue-dark); font-size: 1.5rem; }
.lead-form .form-sub { color: var(--text-soft); font-size: .98rem; margin-top: .5rem; }
.field { margin-top: 1.15rem; }
.field label { display: block; font-weight: 700; font-size: .95rem; color: var(--text); margin-bottom: .4rem; }
.field input[type="text"], .field input[type="tel"] {
  width: 100%; height: 56px; border-radius: 12px; border: 1.5px solid var(--border);
  background: var(--white); padding: 0 1rem; font-family: inherit; font-size: 1.05rem; color: var(--text);
  transition: border-color .15s;
}
.field input:focus { border-color: var(--blue); }
/* keep the 3px keyboard ring (07§3); only drop the outline for pointer focus */
.field input:focus:not(:focus-visible) { outline: none; }
.field input:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }
.field input[dir] { direction: ltr; text-align: right; }
.consent { margin-top: 1.15rem; display: grid; grid-template-columns: auto 1fr; gap: .6rem; align-items: start; }
.consent input { width: 20px; height: 20px; margin-top: .2rem; accent-color: var(--caramel-action); flex: none; }
.consent label { font-size: .9rem; color: var(--text-soft); line-height: 1.5; }
.consent a { color: var(--caramel-action); }
.field-error { color: var(--caramel-action); font-size: .88rem; margin-top: .4rem; min-height: 1px; }
.form-submit { margin-top: 1.4rem; }
.lead-form .btn-primary { background: var(--caramel); color: var(--text); }
.lead-form .btn-primary:hover { background: var(--caramel-hover); color: var(--white); }
.form-reassure { text-align: center; font-size: .88rem; color: var(--text-soft); margin-top: .9rem; }
.honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; opacity: 0; pointer-events: none; }
.form-after { color: var(--blue-pale); font-size: .92rem; margin-top: 1.1rem; }
.form-success { display: none; text-align: center; padding: 1rem .5rem; }
.form-success h3 { font-family: 'Discovery FS', sans-serif; font-weight: 700; color: var(--blue-dark); font-size: 1.4rem; margin-bottom: .6rem; }
.form-success p { color: var(--text-soft); }
.is-submitting .btn-primary { opacity: .75; pointer-events: none; }

/* ============================ footer (navy) ============================ */
.site-footer { background: var(--navy-footer); color: var(--cream); padding-block: 2.6rem; border-top: 3px solid var(--hairline); }
.footer-mark { font-family: 'Discovery FS', sans-serif; font-weight: 500; font-size: 1.6rem; color: var(--caramel); }
.footer-role { color: var(--gold-on-navy-text); font-size: .95rem; margin-top: .3rem; }
.footer-links { display: flex; flex-wrap: wrap; gap: .5rem 1.2rem; margin-top: 1.3rem; }
.footer-links a { color: var(--blue-pale); text-decoration: none; font-size: .95rem; }
.footer-links a:hover { text-decoration: underline; }
.footer-tag { color: var(--gold-on-navy-text); margin-top: 1.4rem; font-size: .95rem; }
.footer-copy { color: var(--gold-on-navy-text); opacity: .7; font-size: .82rem; margin-top: 1rem; }

/* ============================ whatsapp bubble (G4: JS-injected only when a number is configured) ============================ */
.wa-bubble {
  position: fixed; inset-inline-start: 18px; inset-block-end: 18px; z-index: 90;
  width: 56px; height: 56px; border-radius: 50%; background: #25D366; color: #fff;
  display: grid; place-items: center; box-shadow: 0 10px 26px -8px rgba(0, 0, 0, .5);
  border: 3px solid var(--cream);
  opacity: 0; transform: scale(.6); pointer-events: none;
  transition: opacity .3s var(--ease-out-expo), transform .3s var(--ease-out-expo);
}
.wa-bubble svg { width: 30px; height: 30px; }
.wa-bubble.wa-show { opacity: 1; transform: scale(1); pointer-events: auto; }
.wa-bubble.wa-hide { opacity: 0 !important; transform: scale(.6) !important; pointer-events: none; }
@media (max-width: 640px) { .wa-bubble { width: 48px; height: 48px; } .wa-bubble svg { width: 26px; height: 26px; } }

/* ============================ hairline thread ============================ */
.hairline-svg { position: absolute; z-index: 0; pointer-events: none; overflow: visible; }
.hairline-svg path { fill: none; stroke: var(--caramel); stroke-width: 1.5; }

/* ============================ reveal animation ============================ */
.reveal { opacity: 0; transform: translateY(14px); transition: opacity .5s var(--ease-out-expo), transform .5s var(--ease-out-expo); }
.reveal.is-in { opacity: 1; transform: none; }
.reveal-stagger > * { opacity: 0; transform: translateY(14px); transition: opacity .5s var(--ease-out-expo), transform .5s var(--ease-out-expo); }
.reveal-stagger.is-in > * { opacity: 1; transform: none; }
.reveal-stagger.is-in > *:nth-child(2) { transition-delay: .07s; }
.reveal-stagger.is-in > *:nth-child(3) { transition-delay: .14s; }
.reveal-stagger.is-in > *:nth-child(4) { transition-delay: .21s; }
.reveal-stagger.is-in > *:nth-child(5) { transition-delay: .28s; }
.reveal-stagger.is-in > *:nth-child(6) { transition-delay: .35s; }

/* hero load animation */
.hero-anim .kicker { opacity: 0; animation: fadeUp .4s var(--ease-out-expo) .05s forwards; }
.hero-anim h1 { opacity: 0; animation: fadeUp .55s var(--ease-out-expo) .12s forwards; }
.hero-anim .hero-tagline { opacity: 0; animation: fadeUp .5s var(--ease-out-expo) .19s forwards; }
.hero-anim .hero-sub { opacity: 0; animation: fadeUp .5s var(--ease-out-expo) .25s forwards; }
.hero-anim .hero-cta-row { opacity: 0; animation: fadeUp .5s var(--ease-out-expo) .35s forwards; }
/* hero image is the desktop LCP element: scale-only (opacity stays 1) so LCP is not delayed */
.hero-anim .hero-figure { animation: heroScale .9s var(--ease-out-expo); }
@keyframes fadeUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes heroScale { from { transform: scale(1.03); } to { transform: scale(1); } }

/* ============================ reduced motion ============================ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .reveal, .reveal-stagger > * { opacity: 1 !important; transform: none !important; }
  .hero-anim .kicker, .hero-anim h1, .hero-anim .hero-tagline, .hero-anim .hero-sub, .hero-anim .hero-cta-row { opacity: 1 !important; }
  .acc-panel { transition: none; }
}

/* ============================ tablet (768+) ============================ */
@media (min-width: 768px) {
  .hero-text { max-width: 620px; }
  .shelf { display: grid; grid-template-columns: 1fr 1fr; justify-content: center; }
  /* LP-RESP-1: מכאן ומעלה הפילים חד-שורתיים, ולכן חוזרים לגלולה המקורית ולריפוד שלה.
     הרדיוס והריפוד נעוצים כאן במפורש כדי שהשינוי של המובייל לא ידלוף לדסקטופ. */
  .pill { align-items: center; border-radius: 999px; padding: .5rem .95rem; }
  .pill svg { margin-top: 0; }
  /* slightly staggered heights so the pills read as resting on a shelf, not a flat badge strip (01§4) */
  .shelf .pill:nth-child(1) { transform: translateY(-3px); }
  .shelf .pill:nth-child(3) { transform: translateY(3px); }
  /* LP-FIX-2: --text-hero (max 4.5rem) was calibrated for the old two-word H1. Leah's H1 is a
     51-char sentence and rendered 4 lines at 1024/1440, pushing the CTA below the fold (07§1).
     Measured sweep of 6 caps x 3 vw-terms x 3 hero tracks: this is the largest scale that still
     holds 3 lines and the fold at 1366x768. Hero/section-title contrast 1.40 at 1366+ (was 1.64
     with the old two-word H1, 1.13 with the first attempt at this fix). Codex F-02. */
  .hero h1 { font-size: clamp(2.1rem, 1.2rem + 3.2vw, 3.85rem); }
  .bento { grid-template-columns: 1fr 1fr; }
  /* C5: הבכורה הרוחבית עברה מכסף בכיסים לספרייה הדיגיטלית */
  .card-lead { grid-column: 1 / -1; }
  .card-lead-body { display: grid; grid-template-columns: 1fr 1fr; gap: 1.4rem; align-items: start; }
  .steps { grid-template-columns: repeat(3, 1fr); gap: 1.6rem; }
  .step { grid-template-columns: 1fr; text-align: center; justify-items: center; }
  /* thread runs through the circle centers (measured: circle centers sit 14px below the ol top) */
  .steps-thread { display: block; position: absolute; top: calc(2.4rem + 14px); left: 0; right: 0; width: 100%; height: 58px; z-index: 0; opacity: .45; }
  .step-num { position: relative; z-index: 1; }
  .bubbles { grid-template-columns: 1fr 1fr; align-items: start; }
  .footer-inner { display: flex; justify-content: space-between; align-items: flex-start; gap: 2rem; flex-wrap: wrap; }
}

/* ============================ desktop (1024+) ============================ */
@media (min-width: 1024px) {
  .hero { padding-block: clamp(3rem, 5vw, 4.5rem) 0; }
  /* text track widened 52%->56% (LP-FIX-2, Codex F-02): the extra 43px lets the H1 hold its
     scale at 3 lines instead of dropping to a 4th line at 1440. */
  .hero-inner { display: grid; grid-template-columns: 56% 44%; align-items: center; gap: 2rem; min-height: 86vh; max-height: 760px; }
  .hero-text { text-align: start; margin: 0; }
  .hero .hero-tagline { margin-inline: 0; }   /* start-aligned column: no auto-centering */
  .hero-cta-row { align-items: flex-start; }
  .hero-cta-row .btn { width: auto; }
  .microline { margin: 0; }
  /* C3 (LP-COPY-2): הצ'יפ של הפורום התארך ב-14 תווים בנוסח של לאה, ובעמודת הטקסט הצרה של
     הדסקטופ (607px) המדף הזורם גלש ל-3 שורות ב-1366/1440 ול-4 ב-1024. חוזרים כאן לרשת 2x2,
     בדיוק כמו במובייל ומאותו נימוק (Codex F-01): שתי שורות מובטחות בכל רוחב, והטקסט נשבר
     בתוך התא במקום לפרק את המדף. הסטגר של "מונח על מדף" נשאר ב-768-1023, שם המדף עוד זורם. */
  .shelf { display: grid; grid-template-columns: 1fr 1fr; justify-content: start; }
  .shelf .pill:nth-child(1), .shelf .pill:nth-child(3) { transform: none; }
  /* same <picture> element now fills the right grid cell */
  .hero-figure {
    display: block; position: relative; margin: 0; width: 100%; max-width: none;
    align-self: stretch; z-index: 2;
  }
  .hero-figure img {
    width: 100%; height: 100%; min-height: 520px; max-height: 720px;
    aspect-ratio: auto; object-fit: cover; object-position: center top;
    border-radius: 999px 999px 28px 28px;
    box-shadow: 0 40px 80px -40px rgba(44, 70, 96, .55);
  }
  .hero-figure::after { /* soft cream wash blending image edge into the text column */
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(270deg, rgba(250,247,242,0) 62%, rgba(250,247,242,.5) 100%);
    border-radius: 999px 999px 28px 28px;
  }
  /* §5.7: image column LEFT, text RIGHT (RTL: text in the inline-start/right track, image ordered to the left) */
  .story-grid { grid-template-columns: 58% 42%; align-items: center; gap: 3rem; }
  .story-body { order: 1; }
  .story-figure { order: 2; margin: 0; }
  .pull-quote { margin-inline-end: -3rem; position: relative; z-index: 2; }
  .bento { grid-template-columns: repeat(3, 1fr); }
  /* C5: הספרייה פרושה על שלוש העמודות (הכלל ב-768 כבר נותן 1/-1), הצ'יפים והטקסט זה לצד זה */
  .club-highlight-tall { grid-row: span 1; }
  .lead-form { max-width: 480px; margin-inline: auto; }
}

@media (min-width: 1024px) and (max-width: 1023px) { /* guard */ }