/* =============================================================
   ReelCoach · בחירת מסלול - לפי קובץ העיצוב המאושר
   =============================================================
   כל המידות נמדדו מהרפרנס ב-1440x900 דרך getComputedStyle, ולא
   הועתקו מהכללים הכתובים בו. בדשבורד הלקח הזה עלה ביוקר: העתקת
   הערכים הכתובים נתנה עמוד גבוה ב-315 פיקסלים מהמקור, כי לקובץ
   יש שכבה רספונסיבית שמכווצת אותו בגובה חלון רגיל.

   **המחירים והקישורים אינם כאן.** הם נקראים מהעמוד החי עצמו, כדי
   ששינוי מחיר ב-pricing.html יופיע כאן מעצמו ולא ידרוש עדכון כפול.
   עמוד שמציג מחיר אחד ומחייב אחר הוא תקלה בחיוב.

   כל המחלקות בתחילית rc- אחרי שבדשבורד `.plan` התנגש עם מחלקה
   קיימת. בעמוד הזה יש `.plan`, `.plans`, `.price`, `.cta` ו-`.tool`
   משלו - בדיוק אותה מלכודת.
   ============================================================= */

body.rc-pricing{
  --rc-orange:#ff4d0a; --rc-paper:#f5f2ec; --rc-muted:#aaa7a2;
  --rc-line:#38383c; --rc-panel:#101011;
  background:#050505; color:var(--rc-paper);
  font-family:Assistant,Arial,sans-serif;
  isolation:isolate;
}
body.rc-pricing::before{
  content:"";position:fixed;inset:0;z-index:-1;
  background:linear-gradient(90deg,rgba(5,5,5,.98) 0%,rgba(5,5,5,.72) 48%,rgba(5,5,5,.22) 100%),
             url('/assets/court-hero.jpg') center/cover no-repeat !important;
  filter:saturate(.78) contrast(1.08) !important;
}
body.rc-pricing::after{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(circle at 72% 54%,rgba(255,77,10,.12),transparent 26%),
             linear-gradient(180deg,transparent 60%,#050505 100%);
}

/* **`.wrap` צר מהעיצוב, בדיוק כמו בדשבורד.** העמוד עוטף הכול
   במיכל עם max-width משלו, ולכן העמודות יצאו 335 במקום 411 והכרטיסים
   התארכו לגובה. הרוחב והריווח עוברים ל-`.rc-commerce`. */
body.rc-pricing .wrap{max-width:none;width:100%;margin:0;padding:0}
body.rc-pricing .wrap > header{padding-inline:clamp(20px,4vw,64px)}

body.rc-pricing .rc-commerce{
  width:min(1440px,100%);margin:auto;
  padding:42px clamp(20px,4vw,64px) 70px;
}

/* ---------- כותרת ---------- */
body.rc-pricing .rc-commerce-head{
  display:grid;grid-template-columns:minmax(0,2.1fr) minmax(300px,1fr);
  gap:40px;align-items:end;margin-bottom:32px;
}
body.rc-pricing .rc-eyebrow{
  font:600 14px "IBM Plex Mono",monospace;color:var(--rc-orange);
  letter-spacing:.08em;text-transform:uppercase;
}
body.rc-pricing .rc-commerce-head h1{
  font:700 70px/1.02 Heebo,Assistant,Arial,sans-serif;
  margin:10px 0;letter-spacing:-2px;color:var(--rc-paper);
}
body.rc-pricing .rc-commerce-lead{
  font-size:19px;color:#d1cec9;max-width:720px;line-height:1.5;margin:0;
}
body.rc-pricing .rc-promise{
  padding:20px 22px;border:1px solid rgba(245,242,236,.16);border-radius:14px;
  background:rgba(16,16,17,.82);font-size:16px;color:var(--rc-muted);line-height:1.5;
}
body.rc-pricing .rc-promise b{display:block;color:var(--rc-paper);margin-bottom:4px;font-size:17px}

/* ---------- שלושת המסלולים ---------- */
body.rc-pricing .rc-journey-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:16px;align-items:stretch;
}
body.rc-pricing .rc-journey-plan{
  display:flex;flex-direction:column;
  padding:24px;min-height:500px;
  border:1px solid rgba(245,242,236,.18);border-radius:16px;
  background:linear-gradient(160deg,rgba(31,31,34,.96),rgba(7,7,8,.96));
}
body.rc-pricing .rc-journey-plan.rc-featured{
  border:1px solid rgba(255,77,10,.62);
  background:linear-gradient(160deg,rgba(45,25,17,.94),rgba(7,7,8,.97));
}
body.rc-pricing .rc-recommend{
  align-self:stretch;text-align:center;
  padding:7px 11px;margin-bottom:12px;
  background:var(--rc-orange);color:#160702;
  font:800 14px Assistant,Arial,sans-serif;border-radius:999px;
}

/* ---------- ויזואל החבילה ---------- */
body.rc-pricing .rc-calendar-package{
  padding:14px 14px 12px;border:1px solid rgba(245,242,236,.13);
  border-radius:16px;background:rgba(5,5,6,.48);
}
body.rc-pricing .rc-calendar-head{
  display:flex;justify-content:space-between;align-items:baseline;
  font-size:15px;color:var(--rc-muted);margin-bottom:10px;
}
body.rc-pricing .rc-calendar-head strong{
  font:400 19px "IBM Plex Mono",monospace;color:var(--rc-paper);
}
body.rc-pricing .rc-month-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:6px}
body.rc-pricing .rc-month{
  display:grid;place-items:center;min-height:36px;
  font:400 14px "IBM Plex Mono",monospace;border-radius:6px;
  background:rgba(245,242,236,.035);border:1px solid rgba(245,242,236,.12);
  color:#68686f;
}
body.rc-pricing .rc-month.rc-on{
  background:rgba(255,77,10,.13);border-color:rgba(255,77,10,.34);color:#f8d2c3;
}
/* חודש המתנה מסומן בכיתוב ולא רק בצבע, כדי שלא יילך לאיבוד */
body.rc-pricing .rc-month.rc-gift{position:relative;border-color:var(--rc-orange);color:#ffd9c8}
body.rc-pricing .rc-month.rc-gift::after{
  content:"מתנה";position:absolute;bottom:1px;
  font:700 8px Assistant,Arial,sans-serif;color:var(--rc-orange);
}
body.rc-pricing .rc-package-caption{
  display:flex;justify-content:space-between;gap:10px;
  font-size:14px;color:var(--rc-muted);margin-top:10px;
}

/* ---------- טקסט ומחיר ---------- */
body.rc-pricing .rc-journey-plan h2{
  font:700 29px Heebo,Assistant,Arial,sans-serif;margin:14px 0 2px;color:var(--rc-paper);
}
body.rc-pricing .rc-plan-period{display:block;font-size:16px;color:var(--rc-muted)}
body.rc-pricing .rc-price-row{display:flex;align-items:baseline;gap:7px;margin:20px 0 5px}
body.rc-pricing .rc-amount{font:600 48px "IBM Plex Mono",monospace;color:var(--rc-paper)}
body.rc-pricing .rc-currency{font-size:21px;color:var(--rc-paper)}
body.rc-pricing .rc-monthly-line{font-size:17px;color:#d8d4cf;margin:0}
body.rc-pricing .rc-monthly-line .rc-amount{font-size:20px}
body.rc-pricing .rc-monthly-line .rc-currency{font-size:15px}
body.rc-pricing .rc-wasline{font-size:14px;color:var(--rc-muted);margin-top:6px}
body.rc-pricing .rc-reveal{font-size:16px;color:var(--rc-muted);line-height:1.45;margin:16px 0}
/* הכפתור נדחף לתחתית כדי שכל השלושה יהיו בקו אחד */
body.rc-pricing .rc-choose{
  margin-top:auto;display:grid;place-items:center;
  min-height:52px;padding:0 24px;border:0;border-radius:10px;
  background:var(--rc-paper);color:#111;
  font:800 16px Assistant,Arial,sans-serif;text-decoration:none;cursor:pointer;
  transition:filter .15s ease;
}
body.rc-pricing .rc-choose:hover{filter:brightness(.93)}
body.rc-pricing .rc-featured .rc-choose{background:var(--rc-orange);color:#fff}
body.rc-pricing .rc-featured .rc-choose:hover{filter:brightness(1.08)}

/* ---------- רצועת ההתנסות ---------- */
body.rc-pricing .rc-trial-strip{
  display:flex;align-items:center;gap:15px;flex-wrap:wrap;
  margin-top:16px;padding:18px 20px;
  border:1px solid rgba(245,242,236,.17);border-radius:16px;
  background:rgba(16,16,17,.92);
}
body.rc-pricing .rc-trial-strip b{font-size:17px;color:var(--rc-paper)}
body.rc-pricing .rc-trial-strip span{color:var(--rc-muted);font-size:16px}
body.rc-pricing .rc-trial-strip a{
  margin-inline-start:auto;min-height:44px;padding:10px 16px;
  display:inline-flex;align-items:center;
  border:1px solid #55555a;border-radius:10px;background:rgba(16,16,17,.8);
  color:var(--rc-paper);text-decoration:none;font-weight:600;white-space:nowrap;
}
body.rc-pricing .rc-trial-strip a:hover{border-color:var(--rc-orange);color:var(--rc-orange)}

/* ---------- המבנה הישן נשאר, מוסתר ---------- */
/* **הם לא ילדים ישירים של `.wrap`.** המבנה הוא
   `.wrap > main > .hero` ו-`.wrap > main > section > .plans`, ולכן
   הסלקטור עם `>` לא תפס אותם בכלל - בדיוק כמו הכותרת בדשבורד.
   הם נשארים בעמוד כי מהם נקראים המחירים והקישורים. */
body.rc-pricing .hero,
body.rc-pricing .plans{display:none !important}

@media (max-width:1080px){
  body.rc-pricing .rc-commerce-head{grid-template-columns:1fr}
  body.rc-pricing .rc-journey-grid{grid-template-columns:1fr}
  body.rc-pricing .rc-commerce-head h1{font-size:46px}
}

/* =============================================================
   המקטעים שמתחת לקפל - שוליים, ורוחב שורה שנוח לקרוא
   =============================================================
   **נסיגה שאני יצרתי.** כדי לשחרר את רוחב הרשת ביטלתי את ה-padding
   של `.wrap`, ואיתו נעלמו גם השוליים של המקטעים שמתחת - הכלים,
   השאלות הנפוצות והסיום - שהסתמכו עליו. הטקסט שם נדבק לקצה הימני
   של המסך בדיוק, אפס פיקסלים.

   הם מקבלים עכשיו בדיוק את אותם שוליים ואותו רוחב מרבי כמו גוש
   המסלולים שמעליהם, כדי שהעמוד ייקרא כעמוד אחד. ובנוסף רוחב שורה
   מוגבל לטקסט הרץ: שורת תשובה שנמתחת על 1,300 פיקסלים קשה לקריאה
   גם כשהשוליים תקינים. */
body.rc-pricing .wrap > main > section:not(:has(.rc-commerce)),
body.rc-pricing .wrap > main > .closing,
body.rc-pricing .wrap > footer{
  width:min(1440px,100%);
  margin-inline:auto;
  padding-inline:clamp(20px,4vw,64px);
}
/* טקסט רץ במידה קריאה. הכותרות והרשתות נשארות ברוחב המלא. */
body.rc-pricing .block > p,
body.rc-pricing .block > h2 + p,
body.rc-pricing .qa p,
body.rc-pricing .qa > div{max-width:900px}
body.rc-pricing .closing{
  border-radius:14px;
  border:1px solid rgba(245,242,236,.14);
  background:rgba(16,16,17,.82);
}

/* =============================================================
   האנימציה של לוח השנה - כפי שהיא בקובץ העיצוב
   =============================================================
   פספסתי אותה בסבב הראשון כי חיפשתי `@keyframes` ולא מצאתי. היא
   אינה keyframes אלא **שרשרת transition עם השהיה מדורגת**: לכל
   חודש יש `--i`, וה-transition-delay שלו הוא `--i * 38ms`. ברגע
   שמרחפים על הכרטיס החודשים הכלולים נדלקים בזה אחר זה, מד ההתקדמות
   מתמלא, והתיאור עולה מהעמעום. הכרטיס עצמו מתרומם 7 פיקסלים.

   כל הערכים - 38ms, 0.7s, cubic-bezier, scaleX(.72) - נקראו
   מהרפרנס דרך ה-CSSOM ולא הוערכו בעין. */
body.rc-pricing .rc-journey-plan{
  position:relative;overflow:hidden;
  transition:transform .35s,border-color .35s,box-shadow .35s;
}
body.rc-pricing .rc-journey-plan:hover,
body.rc-pricing .rc-journey-plan:focus-within{
  transform:translateY(-7px);
  border-color:var(--rc-orange);
  box-shadow:0 28px 70px rgba(0,0,0,.48),0 0 45px rgba(255,77,10,.1);
}
body.rc-pricing .rc-plan-visual{height:174px;position:relative;margin:-4px 0 8px}
body.rc-pricing .rc-calendar-package{
  height:100%;display:flex;flex-direction:column;gap:10px;overflow:hidden;
}
body.rc-pricing .rc-month{
  height:36px;position:relative;
  transition:color .35s,background .35s,border-color .35s,transform .35s,box-shadow .35s;
  transition-delay:calc(var(--i,0) * 38ms);
}
/* הדלקה מדורגת: החודשים הכלולים נדלקים לפי הסדר ולא בבת אחת */
body.rc-pricing .rc-journey-plan:hover .rc-month.rc-on,
body.rc-pricing .rc-journey-plan:focus-within .rc-month.rc-on{
  color:#fff;background:var(--rc-orange);border-color:var(--rc-orange);
  transform:translateY(-2px);box-shadow:0 7px 18px rgba(255,77,10,.22);
}
body.rc-pricing .rc-package-meter{
  height:4px;border-radius:99px;background:#343439;overflow:hidden;margin-top:auto;
}
body.rc-pricing .rc-package-fill{
  height:100%;width:var(--fill);background:var(--rc-orange);
  transform-origin:right center;transform:scaleX(.72);
  box-shadow:0 0 12px rgba(255,77,10,.55);
  transition:transform .7s cubic-bezier(.2,.8,.2,1);
}
body.rc-pricing .rc-journey-plan:hover .rc-package-fill,
body.rc-pricing .rc-journey-plan:focus-within .rc-package-fill{transform:scaleX(1)}
body.rc-pricing .rc-reveal{
  opacity:.45;transform:translateY(8px);transition:opacity .3s,transform .3s;
}
body.rc-pricing .rc-journey-plan:hover .rc-reveal,
body.rc-pricing .rc-journey-plan:focus-within .rc-reveal{opacity:1;transform:none}
/* תווית המתנה יושבת על גבול התא, כמו ברפרנס */
body.rc-pricing .rc-month.rc-gift::after{
  content:"מתנה";position:absolute;inset:auto 2px -7px;
  font:700 14px Assistant,Arial,sans-serif;color:var(--rc-orange);
  background:#101011;padding:0 3px;
}
/* **מי שמעדיף פחות תנועה מקבל פחות תנועה.** ההדגשה נשארת, ההנפשה לא. */
@media (prefers-reduced-motion:reduce){
  body.rc-pricing .rc-journey-plan,
  body.rc-pricing .rc-month,
  body.rc-pricing .rc-package-fill,
  body.rc-pricing .rc-reveal{transition:none}
  body.rc-pricing .rc-journey-plan:hover{transform:none}
  body.rc-pricing .rc-reveal{opacity:1;transform:none}
}

/* **המד נדחס לאפס, גם ברפרנס.** התוכן של החבילה מסתכם ב-178
   פיקסלים בתוך עטיפה של 174, ולכן flex מכווץ את האיבר הגמיש ביותר -
   מד ההתקדמות - עד שהוא נעלם. ברפרנס הוא אכן נמדד 0, אבל מד עם
   אנימציית מילוי נועד להיראות; זו תקלת פריסה ולא כוונה. `flex`
   מקובע מונע ממנו להתכווץ, וה-gap מתקצר ב-2 כדי שהשאר לא ייצר. */
body.rc-pricing .rc-calendar-package{gap:8px}
body.rc-pricing .rc-package-meter{flex:0 0 4px}
body.rc-pricing .rc-month-grid{flex:0 0 auto}