/* =========================================================================
   12 רגעים, דף נחיתה גרסה ב' (12-moments/b/index.html)
   פסי צבע מלאים לרוחב המסך (קרם / ורוד / מנטה בלבד), טקסט ותמונה זה לצד זה
   במחשב, עמודה אחת בנייד. הטוקנים, .btn, .field, .accordion-toggle,
   .howitworks-step, .contact-photo, .signature באים מ-css/styles.css.
   ========================================================================= */

html { scroll-behavior: smooth; }
body.landing-b {
  /* גוונים מקומיים לדף הזה, באותן משפחות צבע של הפרויקט:
     ורוד בהיר לרקע פסים = ורוד הפרויקט מעורבב חצי-חצי עם הקרם;
     מנטה בינוני לקו התחתון = מנטה הפרויקט מעורבב חצי-חצי עם המנטה הכהה */
  --color-pink-soft: #fbe4e7;
  --color-mint-mid: #8ab39c;
  background: var(--color-cream);
  overflow-x: hidden;
}

.band { position: relative; padding: clamp(3rem, 8vw, 6rem) 1.25rem; }
.band-cream { background: var(--color-cream); }
.band-pink { background: var(--color-pink-soft); }
.band-mint { background: var(--color-mint); }
.band-inner { max-width: 68rem; margin-inline: auto; }
.band h2 { font-size: clamp(1.7rem, 4vw, 2.7rem); line-height: 1.25; margin-bottom: 1.2rem; text-wrap: balance; }
.band p { font-size: 1.05rem; }
.lead-text { font-size: clamp(1.15rem, 2vw, 1.4rem) !important; line-height: 1.65; font-weight: 600; color: var(--color-ink); }

/* כניסה עדינה בגלילה (הכיתה נוספת ב-JS) */
.reveal { opacity: 0; transform: translateY(3rem); transition: opacity 800ms ease, transform 800ms cubic-bezier(0.22, 0.8, 0.3, 1); }
.reveal.is-visible { opacity: 1; transform: none; }

/* פריסה: טקסט + תמונה */
.split { display: grid; gap: 2rem; align-items: center; }
.split-text { text-align: right; }
@media (min-width: 900px) {
  .split { grid-template-columns: 1fr 1fr; gap: 4rem; }
}

/* תמונות בהטיה קלה, נטייה תלת-ממדית עם עכבר (JS) */
.tilt-img {
  display: block;
  width: 100%;
  height: auto;
  margin-inline: auto;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card-hover);
  transform: rotate(var(--rest-rot, -2deg));
  transition: transform 200ms ease-out, box-shadow 200ms ease-out;
  will-change: transform;
}
.band picture { display: block; }
.intro-photo { max-width: 26rem; --rest-rot: -2deg; }
.closing-photo { max-width: 34rem; --rest-rot: 1.5deg; }

/* ---------- הירו ---------- */
.hero-b {
  text-align: center;
  padding-block: clamp(2rem, 7vh, 4.5rem) clamp(2.2rem, 6vh, 3.5rem);
}
.hero-hearts { height: clamp(2.8rem, 6vh, 3.6rem); width: auto; margin: 0 auto 0.7rem; }
.hero-b-inner { max-width: 60rem; margin-inline: auto; }
.js [data-typing]:not(.is-ready) { visibility: hidden; }
.hero-b h1 {
  font-size: clamp(2.2rem, 5.2vw, 4.4rem);
  line-height: 1.15;
  font-weight: 700;
  color: var(--color-ink);
  text-wrap: balance;
  margin: 0 0 1.1rem;
}
.hero-b h2.hero-sub {
  font-size: clamp(1.2rem, 2.4vw, 1.9rem);
  line-height: 1.4;
  font-weight: 500;
  color: var(--color-ink);
  max-width: 50rem;
  margin: 0 auto 1.5rem;
  text-wrap: balance;
}

/* הקלדה: כל אות נחשפת בנפרד, כך שהפריסה קבועה מההתחלה */
.ch { opacity: 0; }
.ch.on { opacity: 1; }
.ch.cur { box-shadow: inset 3px 0 0 var(--color-pink-deep); }
.w { white-space: nowrap; }

/* קו תחתון ישר בגוון מנטה: מתחת ל"לתת לקשר ביניכן" בהירו, ובכותרות "ערכת 12 רגעים" ו"המתנה האידיאלית".
   העובי משותף (--ul-h), כפול מהמקור: כ-0.36 מגודל הטקסט של ההסבר בהירו. בכותרות הוא מצטייר כשהפס נכנס למסך. */
body.landing-b { --ul-h: clamp(0.43rem, 0.86vw, 0.68rem); }
.ul {
  background-image: linear-gradient(var(--color-mint-mid), var(--color-mint-mid));
  background-repeat: no-repeat;
  background-position: 100% 100%;
  background-size: 100% var(--ul-h);
  padding-bottom: 0.1em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  transition: background-size 800ms ease 900ms;
}
.hero-wait .ul { background-size: 0 var(--ul-h); }
.js .reveal:not(.is-visible) .ul { background-size: 0 var(--ul-h); }
.reveal .ul { transition-delay: 350ms; padding-bottom: 0.08em; }
.nw { white-space: nowrap; }

.hero-fade { transition: opacity 700ms ease, transform 700ms ease; transition-delay: var(--d, 0ms); }
.hero-wait .hero-fade { opacity: 0; transform: translateY(1rem); }

/* שורת "כדורים" */
.pills {
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem 1.7rem;
  list-style: none;
  margin: 0 0 1.6rem;
  padding: 0.85rem 1.9rem;
  background: var(--color-white);
  border-radius: 999px;
  box-shadow: var(--shadow-card);
  font-weight: 600;
  font-size: 0.98rem;
}
.pills li { display: flex; align-items: center; }
.pills li::before {
  content: "";
  width: 0.45rem; height: 0.45rem;
  background: var(--color-pink-deep);
  transform: rotate(45deg);
  margin-inline-end: 0.6rem;
  flex-shrink: 0;
}
@media (max-width: 639.98px) {
  .pills { display: grid; grid-template-columns: 1fr 1fr; border-radius: 1.4rem; padding: 1rem 1.1rem; gap: 0.6rem 0.9rem; text-align: right; font-size: 0.9rem; }
}
.btn-lg { font-size: 1.15rem; padding: 1rem 2.4rem; }
@media (max-width: 639.98px) { .btn-lg { font-size: 1.02rem; padding: 0.9rem 1.2rem; } }
.btn-liquid-pink { color: var(--color-pink-deep); border-color: var(--color-pink-deep); }
.btn-liquid-pink::before { background: var(--color-pink); }
.band-pink .btn-liquid-pink { background: var(--color-white); }

/* ---------- פס שני: טקסט + תמונה, הכל במסך אחד במחשב ---------- */
.intro-text p { font-size: clamp(1.1rem, 1.6vw, 1.35rem); line-height: 1.7; }
.intro-text .lead-text { font-size: clamp(1.35rem, 2.3vw, 1.95rem) !important; line-height: 1.55; margin-bottom: 0; }
@media (min-width: 900px) {
  .band-intro { padding-block: clamp(2rem, 6vh, 3.5rem); }
  .intro-split { grid-template-columns: 3fr 2fr; gap: 3.5rem; }
  .intro-photo { width: auto; max-width: 100%; max-height: min(78vh, 40rem); }
}

/* ---------- "בשבילכן אם" ---------- */
.fit-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.9rem; }
.fit-list li {
  position: relative;
  padding-inline-start: 1.6rem;
  font-size: 1.12rem;
  line-height: 1.55;
}
.fit-list li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: 0.6em;
  width: 0.5rem; height: 0.5rem;
  background: var(--color-pink-deep);
  transform: rotate(45deg);
}

/* ---------- יתרונות ---------- */
.center { text-align: center; }
.benefits-b { display: grid; gap: 1.1rem; margin: 2rem 0; text-align: right; }
.benefit-b { background: var(--color-white); border-radius: var(--radius-md); padding: 1.6rem; box-shadow: var(--shadow-card); }
.benefit-b .benefit-title { font-size: 1.2rem; font-weight: 700; margin-bottom: 0.4rem; }
.benefit-b p:last-child { margin: 0; color: var(--color-ink-soft); font-size: 1rem; }
.benefits-closing { max-width: 44rem; margin: 0 auto; font-weight: 700; color: var(--color-ink); font-size: clamp(1.1rem, 2vw, 1.35rem) !important; line-height: 1.6; }
@media (min-width: 760px) { .benefits-b { grid-template-columns: repeat(3, 1fr); } }

/* ---------- פס תמונות (בלי כותרת): כולן באותו מלבן לרוחב 3:2 ----------
   מחשב: גוללים עם חצים. נייד: התמונה הפעילה במרכז, השכנות מציצות ועמומות, מסגרת ורודה מצטיירת סביבה, נקודות מתחת */
.gallery-b { padding-block: clamp(2rem, 5vw, 3.5rem); }
.gallery-strip {
  --iw: min(76vw, 20rem);
  display: flex;
  gap: 0.9rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  margin-inline: -1.25rem;
  padding: 0.5rem calc(50% + 1.25rem - var(--iw) / 2) 1rem;
}
.gallery-strip::-webkit-scrollbar { display: none; }
.gallery-strip:focus-visible { outline: var(--focus-ring); outline-offset: var(--focus-ring-offset); }
.g-item { flex: 0 0 auto; width: var(--iw); scroll-snap-align: center; margin: 0; opacity: 0.55; transition: opacity 350ms ease; }
.g-item.is-active { opacity: 1; }
/* המסגרת קבועה (3:2). תמונה בפרופורציה אחרת נכנסת בשלמותה, והרקע מטושטש מאותה תמונה, בלי חיתוך */
.g-frame, .offer-photo { position: relative; overflow: hidden; }
.g-frame { aspect-ratio: 3 / 2; border-radius: var(--radius-md); box-shadow: var(--shadow-card); background: var(--color-white); }
.g-frame::before, .offer-photo::before { content: ""; position: absolute; inset: -12%; background: var(--bg) center / cover no-repeat; filter: blur(22px); opacity: 0.85; }
.g-frame img { position: relative; display: block; width: 100%; height: 100%; object-fit: contain; }
.gallery-dots { display: flex; justify-content: center; gap: 0.45rem; margin-top: 0.2rem; }
.gallery-dots span { width: 0.5rem; height: 0.5rem; border-radius: 999px; background: rgba(162, 77, 109, 0.28); transition: width 250ms ease, background-color 250ms ease; }
.gallery-dots span.on { width: 1.4rem; background: var(--color-pink-deep); }
.gallery-nav { display: none; }
@media (min-width: 900px) {
  .gallery-strip { --iw: 26rem; margin-inline: -1.25rem; padding-inline: 1.25rem; scroll-padding-inline: 1.25rem; gap: 1.1rem; }
  .g-item { opacity: 1; scroll-snap-align: start; }
  .gallery-dots { display: none; }
  .gallery-nav { display: flex; justify-content: center; gap: 0.9rem; margin-top: 0.3rem; }
  .gallery-nav[hidden] { display: none; }
}
.g-arrow { width: 2.9rem; height: 2.9rem; border-radius: 50%; border: 2px solid var(--color-pink-deep); background: var(--color-white); color: var(--color-pink-deep); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; box-shadow: var(--shadow-card); transition: transform var(--transition-fast); }
.g-arrow:hover:not(:disabled) { transform: translateY(-2px); }
.g-arrow:disabled { opacity: 0.35; cursor: default; box-shadow: none; }

/* ---------- מה מחכה לכן: ארבעה ריבועים, שורה אחת במחשב ---------- */
.inside-cards { display: grid; gap: 1rem; text-align: right; margin-top: 1.6rem; }
.inside-card { background: var(--color-white); border-radius: var(--radius-md); padding: 1.4rem; box-shadow: var(--shadow-card); }
.inside-card.mint { background: var(--color-mint); }
.inside-card h3 { font-size: 1.12rem; margin-bottom: 0.5rem; }
.inside-card p { color: var(--color-ink-soft); font-size: 0.98rem; margin-bottom: 0.5rem; }
.inside-card p:last-child { margin-bottom: 0; }
.inside-card ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.4rem; }
.inside-card li { position: relative; padding-inline-start: 1rem; font-size: 0.98rem; color: var(--color-ink-soft); }
.inside-card li::before { content: "•"; position: absolute; inset-inline-start: 0; color: var(--color-mint-deep); }
@media (min-width: 620px) { .inside-cards { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .inside-cards { grid-template-columns: repeat(4, 1fr); } }

/* ---------- איך זה עובד: שלושה בלוקים אחד מתחת לשני, עם האיורים הקטנים ---------- */
.how-b .howitworks-steps { max-width: 46rem; margin: 2rem auto 2rem; gap: 1.1rem; }
.how-b .howitworks-step { background: var(--color-white); align-items: center; gap: 1.2rem; padding: 1.3rem 1.5rem; }
.how-b .step-num { width: 3.4rem; height: 3.4rem; }
.how-b .step-icon { width: 2.1rem; height: 2.1rem; }
.how-b .howitworks-steps .howitworks-step:nth-child(1) .step-icon,
.how-b .howitworks-steps .howitworks-step:nth-child(2) .step-icon { width: 2.5rem; height: 2.5rem; }
.how-b .howitworks-step h3 { font-size: clamp(1.05rem, 1.6vw, 1.25rem); margin-bottom: 0.25rem; }
.how-b .howitworks-step p { font-size: clamp(0.95rem, 1.3vw, 1.05rem); line-height: 1.6; }
.how-closing { text-align: center; font-size: clamp(1.3rem, 2.6vw, 1.9rem) !important; font-weight: 700; color: var(--color-ink); margin: 0; }

/* ---------- אני מורן ---------- */
.about-b .contact-photo { width: 12.5rem; height: 12.5rem; margin: 0 auto; }
.about-b .signature { width: 9rem; height: auto; margin: 0.5rem 0 0; }
@media (min-width: 900px) {
  .about-split { grid-template-columns: 5fr 8fr; }
  .about-b .contact-photo { width: 17rem; height: 17rem; }
}

/* ---------- תמונת הקופסה ליד המחיר (במחשב בלבד) ----------
   המסגרת קבועה ביחס של התמונה עצמה (6:5, box-price.jpg 1200x1000), ולא נמתחת
   לגובה הטופס: אחרת כשהטופס גדל (למשל בבחירת משלוח) נוסף לה רקע מטושטש.
   החלפת התמונה ביחס אחר = לעדכן כאן את aspect-ratio. */
.offer-col { display: grid; gap: 1.5rem; align-content: start; }
.offer-photo { display: none; }
@media (min-width: 900px) {
  .offer-col { align-self: start; }
  .offer-photo { display: block; aspect-ratio: 6 / 5; border-radius: var(--radius-md); box-shadow: var(--shadow-card-hover); background: var(--color-white); }
  .offer-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
}

/* ---------- מחיר + טופס ---------- */
.form-band { scroll-margin-top: 1rem; }
.offer-card { background: var(--color-white); border-radius: var(--radius-lg); padding: 2rem; box-shadow: var(--shadow-card); text-align: center; }
.pricing-badge { display: block; width: fit-content; margin: 0 auto 1rem; background: var(--color-pink); color: var(--color-pink-deep); font-weight: 700; font-size: 0.9rem; padding: 0.4rem 1.1rem; border-radius: 999px; }
.pricing-line { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center; gap: 0.2rem 0.7rem; margin-bottom: 1.4rem; line-height: 1; }
.price-new, .price-old { font-size: clamp(1.85rem, 5vw, 3.2rem); font-weight: 700; line-height: 1; }
.price-new { color: var(--color-mint-deep); }
.price-old { position: relative; color: var(--color-ink-soft); opacity: 0.55; text-decoration: none; }
.price-old::after { content: ""; position: absolute; inset-inline: -0.08em; top: 52%; height: 0.07em; min-height: 2px; background: currentColor; border-radius: 2px; }
.price-new small, .price-old small { font-size: 0.5em; font-weight: 600; }
.price-was { font-size: 1.05rem; color: var(--color-ink-soft); }
.pricing-line:has(+ .pricing-shipping) { margin-bottom: 0.7rem; }
.pricing-shipping { font-size: 0.9rem; color: var(--color-ink-soft); margin: 0 0 1.4rem; }
.offer-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.6rem; text-align: right; }
.offer-list li { position: relative; padding-inline-start: 1.5rem; }
.offer-list li::before { content: ""; position: absolute; inset-inline-start: 0; top: 0.6em; width: 0.45rem; height: 0.45rem; background: var(--color-mint-deep); transform: rotate(45deg); }
@media (max-width: 639.98px) { .offer-card { padding: 1.6rem 1.1rem; } }
.form-card { background: var(--color-white); border-radius: var(--radius-lg); padding: 1.8rem; box-shadow: var(--shadow-card); max-width: 30rem; width: 100%; margin-inline: auto; text-align: right; }
.form-card h2 { font-size: 1.4rem; text-align: center; margin-bottom: 1.2rem; }
@media (min-width: 900px) { .form-split { grid-template-columns: 5fr 6fr; align-items: stretch; } }

/* ---------- כמה מילים ממני + שאלות ---------- */
.narrow { max-width: 46rem; margin-inline: auto; }
.narrow h2 { text-align: center; }
.faq-item { background: var(--color-white); border-radius: var(--radius-md); box-shadow: var(--shadow-card); margin-bottom: 0.7rem; overflow: hidden; }
.faq-item .accordion-toggle { padding: 1rem 1.2rem; font-size: 1.02rem; }
.faq-answer { padding: 0 1.2rem 1.1rem; color: var(--color-ink-soft); font-size: 1rem; margin: 0; }
.faq-answer a { color: var(--color-mint-deep); font-weight: 700; }

/* ---------- סגירה ---------- */
.closing-b .closing-line { font-size: clamp(2rem, 5vw, 3.2rem); font-weight: 700; line-height: 1.25; color: var(--color-ink); margin-bottom: 1.5rem; text-wrap: balance; }
.closing-b .closing-line { text-align: center; }
.closing-b .cl-part { display: block; }
.closing-b .signature { width: 9rem; height: auto; margin: 1rem 0 0; }
.closing-b .closing-photo { max-width: 100%; }
@media (min-width: 900px) {
  .closing-b .split { grid-template-columns: 1fr 1fr; gap: 3rem; }
  .closing-b .closing-line { font-size: clamp(1.8rem, 3.2vw, 2.3rem); }
}
@media (max-width: 899.98px) { .closing-b .closing-photo { max-width: 85%; } }
@media (max-width: 899.98px) { .closing-b .split-text { text-align: center; } .closing-b .signature { margin-inline: auto; } }

.footer-b { background: var(--color-cream); text-align: center; font-size: 0.9rem; color: var(--color-ink-soft); padding: 2rem 1.25rem 7rem; }
.footer-b p { margin-bottom: 0.6rem; }
.footer-b a { color: var(--color-mint-deep); font-weight: 700; }

/* ---------- פס רכישה צף (מחשב + נייד) ---------- */
.sticky-b {
  position: fixed;
  z-index: 30;
  inset-inline: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  background: var(--color-white);
  box-shadow: 0 -6px 20px rgba(43,43,44,0.12);
  padding: 0.7rem 1rem calc(0.7rem + env(safe-area-inset-bottom, 0px));
}
.sticky-b-price { margin: 0; display: flex; flex-direction: column; line-height: 1.2; font-size: 1.02rem; font-weight: 700; }
.sticky-old { font-weight: 400; color: var(--color-ink-soft); opacity: 0.6; text-decoration: line-through; }
.sticky-b .btn { padding: 0.65rem 1.4rem; min-height: 44px; white-space: nowrap; }
@media (min-width: 640px) {
  .sticky-b-price { flex-direction: row; align-items: baseline; gap: 0.7rem; font-size: 1.2rem; }
  .sticky-b { inset-inline: 0; margin-inline: auto; bottom: 1rem; width: min(34rem, calc(100% - 2rem)); border-radius: 999px; box-shadow: var(--shadow-card-hover); padding: 0.55rem 0.7rem 0.55rem 1.4rem; }
}

@media (prefers-reduced-motion: reduce) {
  .reveal, .hero-fade { opacity: 1; transform: none; }
  .tilt-img { transform: none; }
  .ch { opacity: 1; }
}

/* קישור "יש לך קוד קופון?" בטופס: מוצג עד שלוחצים עליו, ואז נעלם ומפנה מקום לשדה */
.coupon-toggle { display: block; color: var(--color-mint-deep); font-weight: 700; text-decoration: underline; font-size: 0.9rem; margin: -0.3rem 0 1rem; padding: 0; min-height: auto; }
.coupon-toggle:hover, .coupon-toggle:focus-visible { color: var(--color-pink-deep); }

/* שורת קוד הקופון: שדה + כפתור "החל קוד" זה לצד זה, והודעת תוצאה מתחת */
.coupon-row { display: flex; gap: 0.6rem; align-items: center; }
.coupon-row input { flex: 1 1 auto; }
.coupon-apply { flex: 0 0 auto; display: inline-block; color: var(--color-mint-deep); font-weight: 700; text-decoration: underline; font-size: 0.9rem; padding: 0.4rem 0; min-height: 44px; background: none; border: none; cursor: pointer; font-family: inherit; }
.coupon-apply:hover, .coupon-apply:focus-visible { color: var(--color-pink-deep); }
.coupon-apply:disabled { opacity: 0.6; cursor: default; }
#coupon-msg { margin-top: 0.4rem; }
.coupon-msg-ok { color: var(--color-mint-deep); font-weight: 700; }
/* סה"כ לתשלום מעל כפתור התשלום: מתעדכן לפי משלוח/איסוף וקופון */
.order-total { display: flex; justify-content: space-between; align-items: baseline; margin: 1rem 0 0.8rem; padding-top: 0.9rem; border-top: 1px solid rgba(43, 43, 44, 0.12); font-size: 1rem; }
.order-total strong { font-size: 1.25rem; color: var(--color-mint-deep); }