/* ==========================================================================
   עיצוב רך (15.10) לשלושה עמודים: "הסיפור שלי", "ארגז הכלים לעסק שלך" ודף הבית. אותה שפה עיצובית כמו עמודי השירות (css/lean-soft.css חל גם כאן,
   כי ה-body הוא גם body.lean-soft), וכאן רק מה שייחודי לשלושת העמודים האלה. הכול מוגבל ל-body.pg-soft ולמחלקת העמוד (pg-about / pg-toolbox / pg-home).
   נבנה לפי ui-ux-pro-max (הנתונים של הסקיל עצמו, ראו design-system/MASTER.md):
   - סגנון "Soft UI Evolution" + אלמנטים של "Trust & Authority" (תעודות, מדדים, המלצות): צללים רכים, רדיוס גדול, מדליוני אייקונים, ניגודיות AA+.
   - דפוסי עמוד: דף הבית "Trust & Authority + Conversion" + "Hero + Testimonials + CTA"; הסיפור שלי "Storytelling" (ציר זמן); ארגז הכלים "Lead Magnet".
   - צבעי האתר הקיימים; Heebo; תנועה 200-600ms רק transform/opacity; מטרות מגע 44px+; פוקוס גלוי; hover רק במכשירים עם עכבר; prefers-reduced-motion.
   ========================================================================== */

body.pg-soft .sp-section,
body.pg-soft .sp-testi { padding: 56px 0; }
body.pg-soft .testimonials { background: var(--sp-cream); }

/* תגית קטנה בכרטיסים */
body.pg-soft .pg-tag { display: inline-flex; align-self: flex-start; padding: 4px 14px; font-size: 0.82rem; font-weight: 700; line-height: 1.5; color: var(--sp-rose-ink); background: var(--sp-blush); border-radius: 999px; }
body.pg-soft .pg-link,
body.pg-soft .pg-tool-cta { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-weight: 800; color: var(--sp-rose-ink); }
body.pg-soft .pg-link svg,
body.pg-soft .pg-tool-cta svg { width: 20px; height: 20px; flex: none; display: block; transition: transform 0.25s var(--sp-ease); }

/* שורת "תעודות": תואר, רקע, ניסיון, התמחות (הסיפור שלי + דף הבית) */
body.pg-soft .pg-creds { list-style: none; margin: 22px 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; max-width: 640px; }
body.pg-soft .pg-creds li { display: flex; align-items: center; gap: 12px; padding: 10px 14px; font-size: 1rem; font-weight: 600; line-height: 1.4; color: var(--sp-text); background: rgba(255, 255, 255, 0.86); border: 1.5px solid var(--sp-rose-light); border-radius: 18px; }
body.pg-soft .pg-creds strong { font-weight: 800; color: var(--sp-rose-ink); }
body.pg-soft .pg-creds .sp-mini { background: var(--sp-blush); }

/* ציטוט: כרטיס רך (הסיפור שלי ודף הבית) */
body.pg-soft .pg-quote { margin: 0; padding: 22px 26px; background: #fff; border: 1.5px solid var(--sp-rose-light); border-radius: 24px; box-shadow: var(--sp-shadow); }
body.pg-soft .pg-quote p { margin: 0; font-size: 1.25rem; font-weight: 700; line-height: 1.75; color: var(--sp-ink); text-wrap: balance; }

/* ==================== ארגז הכלים ==================== */
body.pg-toolbox .pg-tb-hero { padding: 134px 0 36px; text-align: center; background: radial-gradient(circle at 85% 12%, rgba(231, 201, 195, 0.5), transparent 55%), radial-gradient(circle at 10% 90%, rgba(244, 228, 222, 0.75), transparent 50%), var(--sp-cream); }
body.pg-toolbox .pg-tb-hero .eyebrow { margin-bottom: 14px; }
body.pg-toolbox .pg-tb-hero h1 { margin: 0 0 12px; font-size: clamp(2rem, 4vw, 3.1rem); font-weight: 800; line-height: 1.15; letter-spacing: -0.015em; color: var(--sp-ink); }
body.pg-toolbox .pg-tb-hero .lead { max-width: 560px; margin: 0 auto; font-size: 1.15rem; line-height: 1.8; color: var(--sp-soft); }
body.pg-toolbox .pg-tb-tools { padding: 28px 0 56px; }
body.pg-toolbox .pg-tool-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; align-items: stretch; }
body.pg-toolbox .pg-tool-grid > li { display: flex; }
body.pg-toolbox .pg-tool { display: flex; flex: 1; flex-direction: column; align-items: flex-start; padding: 30px 28px 24px; color: inherit; background: #fff; border: 1.5px solid var(--sp-rose-light); border-radius: 26px; box-shadow: var(--sp-shadow); transition: transform 0.25s var(--sp-ease), box-shadow 0.25s var(--sp-ease), border-color 0.25s; }
body.pg-toolbox .pg-tool .sp-medal { width: 64px; height: 64px; margin-bottom: 18px; }
body.pg-toolbox .pg-tool .sp-medal svg { width: 30px; height: 30px; }
body.pg-toolbox .pg-tool h2 { margin: 12px 0 8px; font-size: 1.3rem; font-weight: 800; line-height: 1.35; color: var(--sp-ink); }
body.pg-toolbox .pg-tool p { margin: 0 0 20px; font-size: 1rem; line-height: 1.75; color: var(--sp-soft); }
body.pg-toolbox .pg-tool-cta { margin-top: auto; padding: 8px 20px; background: #fff; border: 1.5px solid var(--sp-rose-light); border-radius: 999px; transition: background 0.25s, color 0.25s, border-color 0.25s; }
body.pg-toolbox .pg-tool--soon { background: transparent; border-style: dashed; border-color: rgba(87, 80, 74, 0.32); box-shadow: none; }
body.pg-toolbox .pg-tool--soon .sp-medal { background: var(--sp-blush); }
body.pg-toolbox .pg-note { display: flex; align-items: center; justify-content: center; gap: 12px; margin: 34px auto 0; font-size: 1.02rem; font-weight: 600; color: var(--sp-soft); text-align: center; }
body.pg-toolbox .pg-cta-band { position: relative; overflow: hidden; padding: 52px 0 56px; text-align: center; color: #fff; background: linear-gradient(135deg, var(--sp-rose-dark) 0%, var(--sp-rose-ink) 100%); }
body.pg-toolbox .pg-cta-band::before { content: ""; position: absolute; width: 420px; height: 420px; top: -230px; right: -170px; border-radius: 50%; background: radial-gradient(circle, rgba(255, 255, 255, 0.16), transparent 70%); pointer-events: none; }
body.pg-toolbox main .pg-cta-band .section-title { margin: 0 0 10px; color: #fff; }
body.pg-toolbox main .pg-cta-band .section-lead { max-width: 560px; margin: 0 auto 22px; color: rgba(255, 255, 255, 0.92); }
body.pg-toolbox .pg-cta-band .btn { min-height: 52px; padding: 14px 34px; font-size: 1rem; }

/* ==================== הסיפור שלי ==================== */
body.pg-about .hero { padding-top: 134px; padding-bottom: 48px; }
body.pg-about .pg-ab-hero .hero-media { max-width: 460px; }
body.pg-about .pg-ab-hero h1 { margin-bottom: 14px; }
body.pg-about .pg-story { padding: 52px 0 56px; }
body.pg-about .pg-timeline { list-style: none; max-width: 840px; margin: 0 auto; padding: 0; }
body.pg-about .pg-step { position: relative; display: grid; grid-template-columns: 60px 1fr; column-gap: 24px; padding-bottom: 36px; align-items: start; }
body.pg-about .pg-step:last-child { padding-bottom: 0; }
body.pg-about .pg-step::before { content: ""; position: absolute; inset-inline-start: 29px; top: 66px; bottom: 6px; border-inline-start: 2px dashed var(--sp-line); }
body.pg-about .pg-step:last-child::before { display: none; }
body.pg-about .pg-step .sp-medal { width: 60px; height: 60px; }
body.pg-about .pg-step > p { margin: 0; padding-top: 6px; font-size: 1.1rem; line-height: 1.9; color: var(--sp-text); }
body.pg-about .pg-qmark { font-family: Georgia, 'Times New Roman', serif; font-size: 2.6rem; line-height: 1; padding-top: 14px; color: var(--sp-rose-dark); background: var(--sp-blush); }
body.pg-about .pg-story-cta { margin: 40px 0 0; text-align: center; }
body.pg-about .pg-story-cta .btn { min-height: 52px; padding: 14px 34px; font-size: 1rem; }
body.pg-about .pg-values .sp-get-list { margin-top: 30px; }

/* ==================== דף הבית ==================== */
body.pg-home .pg-home-hero { padding-bottom: 52px; }
body.pg-home .hero-pull-quote.compact p { text-wrap: balance; }
/* כרטיס הציטוט הקצר: הצורה לפי הטקסט (בלי שטח לבן ריק משמאל) והטקסט גדול יותר (בקשתה 15.10) */
body.pg-home .hero-pull-quote.compact { width: fit-content; max-width: 340px; padding: 14px 22px; }
body.pg-home .hero-pull-quote.compact p { max-width: 11.6em; font-size: 1.15rem; line-height: 1.6; }
@media (max-width: 980px) { body.pg-home .hero-pull-quote.compact { margin-inline: auto; } }

body.pg-home .pg-home-hero h1 { font-size: clamp(1.9rem, 3.4vw, 2.7rem); }
body.pg-home .pg-prompt { margin: 24px 0 10px; font-size: 1rem; font-weight: 700; color: var(--sp-char); }
body.pg-home .pg-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; max-width: 640px; }
body.pg-home .pg-chips a { display: inline-flex; align-items: center; min-height: 44px; padding: 8px 18px; font-size: 0.95rem; font-weight: 700; line-height: 1.3; color: var(--sp-rose-ink); background: #fff; border: 1.5px solid var(--sp-rose-light); border-radius: 999px; transition: background 0.2s, color 0.2s, border-color 0.2s, transform 0.2s var(--sp-ease); }
body.pg-home .pg-allsvc { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; margin-top: 8px; font-weight: 700; color: var(--sp-rose-ink); text-decoration: underline; text-underline-offset: 4px; }
body.pg-home .pg-allsvc svg { width: 18px; height: 18px; display: block; }
body.pg-home .pg-trust { max-width: 580px; margin: 18px 0 0; padding: 16px 20px; background: rgba(255, 255, 255, 0.84); border: 1px solid var(--sp-rose-light); border-radius: 22px; }
body.pg-home .pg-facts { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); }
body.pg-home .pg-facts li { padding: 0 16px; border-inline-start: 1px solid var(--sp-rose-light); }
body.pg-home .pg-facts li:first-child { padding-inline-start: 0; border-inline-start: 0; }
body.pg-home .pg-facts li:last-child { padding-inline-end: 0; }
body.pg-home .pg-facts strong { display: block; font-size: 1.3rem; font-weight: 800; line-height: 1.25; color: var(--sp-ink); }
body.pg-home .pg-facts span { display: block; margin-top: 3px; font-size: 0.88rem; line-height: 1.45; color: var(--sp-soft); text-wrap: balance; }

/* שירותים: שני כרטיסים ראשיים ושירותים נוספים */
body.pg-home .pg-svcs .section-lead { margin-bottom: 30px; }
body.pg-home .pg-main-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
body.pg-home .pg-main { display: flex; flex-direction: column; align-items: flex-start; padding: 34px 32px 26px; color: inherit; background: #fff; border: 2px solid var(--sp-rose-light); border-radius: 30px; box-shadow: var(--sp-shadow); transition: transform 0.25s var(--sp-ease), box-shadow 0.25s var(--sp-ease), border-color 0.25s; }
body.pg-home .pg-main .sp-medal { width: 68px; height: 68px; margin-bottom: 18px; }
body.pg-home .pg-main .sp-medal svg { width: 32px; height: 32px; }
body.pg-home .pg-medal-solid { color: #fff; background: var(--sp-rose-dark); border-color: var(--sp-rose-dark); }
body.pg-home .pg-main h3 { margin: 12px 0 10px; font-size: 1.55rem; font-weight: 800; line-height: 1.3; color: var(--sp-ink); }
body.pg-home .pg-main p { margin: 0 0 20px; font-size: 1.04rem; line-height: 1.8; color: var(--sp-soft); }
body.pg-home .pg-main .pg-link { margin-top: auto; }
/* הכרטיס של "ניהול כספים לעסקים" בצבעי העמוד שלו (פחם עמוק + סלמון, כמו css/deep-bold.css) */
body.pg-home .pg-main--dark { background: linear-gradient(160deg, #3b3531 0%, #2b2623 100%); border-color: #2b2623; box-shadow: 0 18px 44px rgba(35, 31, 29, 0.28); }
body.pg-home .pg-main--dark .sp-medal { color: #38332f; background: #f2b1a8; border-color: #f2b1a8; box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25); }
body.pg-home .pg-main--dark .pg-tag { color: #38332f; background: #f2b1a8; }
body.pg-home .pg-main--dark h3 { color: #fff; }
body.pg-home .pg-main--dark p { color: #e6dcd7; }
body.pg-home .pg-main--dark .pg-link { color: #f2b1a8; }
body.pg-home .pg-more-title { display: flex; align-items: center; gap: 16px; margin: 44px 0 18px; font-size: 1.25rem; font-weight: 800; color: var(--sp-char); }
body.pg-home .pg-more-title::after { content: ""; flex: 1; border-top: 1.5px dashed var(--sp-line); }
/* שירותים נוספים: כרטיסים מסתובבים (אותו רכיב כמו "איך אני עובדת"): בחזית אייקון, תגית וכותרת; בגב הטקסט והקישור "לפרטים נוספים" */
body.pg-home .pg-more-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }
body.pg-home .pg-flip-title { display: flex; flex: 1; flex-direction: column; align-items: flex-start; gap: 6px; min-width: 0; }
body.pg-home .pg-flip-title h3 { width: 100%; }
body.pg-home .pg-flip-title .pg-sub { display: block; }   /* הסוגריים תמיד בשורה השנייה (בקשתה) */
body.pg-home .pg-flip-link { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; margin-top: 8px; font-weight: 800; color: var(--sp-rose-ink); }
body.pg-home .pg-flip-link svg { width: 18px; height: 18px; flex: none; display: block; transition: transform 0.25s var(--sp-ease); }
body.pg-home .js-flip .sp-flip { min-height: 164px; }
body.pg-home .js-flip .sp-flip-front { flex-direction: column; align-items: flex-start; justify-content: center; gap: 8px; padding: 14px 18px; }
body.pg-home .js-flip .sp-flip-plus { position: absolute; top: 14px; left: 14px; }
body.pg-home .js-flip .sp-flip-back { flex-direction: column; align-items: flex-start; justify-content: center; gap: 0; padding: 12px 18px 8px; }
body.pg-home .js-flip .sp-flip-back p { font-size: 0.93rem; line-height: 1.55; padding-inline-end: 26px; }
body.pg-home .js-flip .sp-flip-back .pg-flip-link { margin-top: 2px; color: #f2b1a8; }
@media (min-width: 1200px) {
  body.pg-home .pg-more-grid { grid-template-columns: repeat(4, 1fr); }
  body.pg-home .js-flip .sp-flip { min-height: 182px; }
}

/* אודות (תמצית) */
body.pg-home .pg-teaser-grid { display: grid; grid-template-columns: 0.82fr 1.18fr; gap: 56px; align-items: center; }
body.pg-home .pg-teaser-media { position: relative; max-width: 440px; margin-inline: auto; }
body.pg-home .pg-teaser-media img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; object-position: center top; border-radius: 220px 220px 28px 28px; box-shadow: var(--sp-shadow-hover); }
body.pg-home .pg-badge { position: absolute; bottom: 26px; inset-inline-end: -16px; padding: 14px 20px; text-align: center; color: #fff; background: linear-gradient(160deg, #605852 0%, #4a433e 100%); border-radius: 20px; box-shadow: var(--sp-shadow-hover); }
body.pg-home .pg-badge strong { display: block; font-size: 1.9rem; font-weight: 800; line-height: 1.1; color: var(--sp-rose-light); }
body.pg-home .pg-badge span { font-size: 0.9rem; }
body.pg-home .pg-teaser-lead { margin: 0 0 18px; font-size: 1.1rem; line-height: 1.8; color: var(--sp-text); }
body.pg-home .pg-teaser .pg-quote { margin-bottom: 6px; padding: 18px 22px; }
body.pg-home .pg-teaser .pg-quote p { font-size: 1.1rem; font-weight: 600; text-wrap: pretty; }   /* בלי "איזון" שמצמצם את השורות ומשאיר רווח ריק בתוך הכרטיס; pretty רק מונע מילה בודדת בשורה האחרונה */
body.pg-home .pg-teaser .pg-creds { margin: 18px 0 24px; }
body.pg-home .pg-teaser .pg-creds li { font-size: 0.95rem; padding: 8px 12px; }

/* המלצות: קרוסלת גוגל מצומצמת, כמו בעמודי השירות */
body.pg-soft .google-carousel-label { margin: 28px 0 10px; font-size: 1rem; }
body.pg-soft .google-carousel { margin-bottom: 30px; }
body.pg-soft .google-review.testi-card { padding: 16px 20px 14px; box-shadow: none; border: 1.5px solid var(--sp-rose-light); }   /* בלי צל: הוא נחתך בקצוות חלון הקרוסלה */
body.pg-soft .google-review .review-head { margin-bottom: 8px; }
body.pg-soft .google-review .stars { margin-bottom: 6px; }
body.pg-soft .google-review .review-meta { margin-top: 8px; font-size: 0.8rem; }
body.pg-soft .google-review .owner-reply { margin-top: 10px; padding: 8px 12px; border-radius: 12px; font-size: 0.86rem; }
body.pg-soft .google-review .owner-reply strong { color: var(--sp-rose-ink); }
body.pg-soft .carousel-dots { bottom: -26px; }
body.pg-soft .testimonials p.text-center[style] { margin-top: 18px !important; }
body.pg-soft .contact p[style*="margin-top"] { margin-top: 20px !important; }

/* מטרות מגע: חיצי הקרוסלה וכפתור השליחה בטופס לפחות 44px */
body.pg-soft .carousel-arrow { width: 44px; height: 44px; }
body.pg-soft .contact-form .btn { min-height: 48px; }

/* hover רק במכשירים עם עכבר (במגע ה-hover נתקע) */
@media (hover: hover) {
  body.pg-toolbox .pg-tool:hover { transform: translateY(-4px); border-color: var(--sp-rose); box-shadow: var(--sp-shadow-hover); }
  body.pg-toolbox .pg-tool--soon:hover { box-shadow: none; }
  body.pg-toolbox .pg-tool:hover .pg-tool-cta { color: #fff; background: var(--sp-rose-dark); border-color: var(--sp-rose-dark); }
  body.pg-home .pg-main--dark:hover { border-color: #231f1d; box-shadow: 0 24px 54px rgba(35, 31, 29, 0.36); }
  body.pg-home .pg-main:hover { transform: translateY(-4px); border-color: var(--sp-rose); box-shadow: var(--sp-shadow-hover); }
  body.pg-home .pg-chips a:hover { color: #fff; background: var(--sp-rose-dark); border-color: var(--sp-rose-dark); transform: translateY(-1px); }
  body.pg-soft a:hover > .pg-link svg,
  body.pg-home .pg-flip-link:hover svg,
  body.pg-soft a:hover > .pg-tool-cta svg { transform: translateX(-4px); }
}

/* ==================== מסכים צרים ==================== */
@media (max-width: 1000px) {
  body.pg-toolbox .pg-tool-grid { grid-template-columns: 1fr; max-width: 560px; margin-inline: auto; }
  body.pg-home .pg-main-pair { grid-template-columns: 1fr; }
  body.pg-home .pg-teaser-grid { grid-template-columns: 1fr; gap: 36px; }
  body.pg-home .pg-teaser-media { max-width: 380px; }
}
@media (max-width: 560px) {
  body.pg-home .pg-chips { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  body.pg-home .pg-chips a { width: 100%; height: 100%; justify-content: center; text-align: center; padding: 8px 12px; font-size: 0.92rem; }
}
@media (max-width: 720px) {
  body.pg-about .hero { padding-top: 130px; }
  body.pg-soft .sp-section,
  body.pg-soft .sp-testi { padding: 40px 0; }
  body.pg-toolbox .pg-tb-hero { padding: 130px 0 28px; }
  body.pg-toolbox .pg-tb-tools { padding: 20px 0 40px; }
  body.pg-toolbox .pg-cta-band { padding: 40px 0 44px; }
  body.pg-toolbox .pg-tool { padding: 24px 22px 20px; }
  body.pg-about .pg-step { grid-template-columns: 44px 1fr; column-gap: 14px; padding-bottom: 28px; }
  body.pg-about .pg-step .sp-medal { width: 44px; height: 44px; }
  body.pg-about .pg-step .sp-medal svg { width: 22px; height: 22px; }
  body.pg-about .pg-step::before { inset-inline-start: 21px; top: 50px; }
  body.pg-about .pg-step > p { font-size: 1.04rem; line-height: 1.85; padding-top: 2px; }
  body.pg-about .pg-qmark { font-size: 2rem; padding-top: 10px; }
  body.pg-about .pg-quote { padding: 18px 18px; }
  body.pg-about .pg-quote p { font-size: 1.12rem; }
  body.pg-soft .pg-creds { grid-template-columns: 1fr; }
  body.pg-home .pg-facts { grid-template-columns: 1fr; gap: 8px; }
  body.pg-home .pg-facts li,
  body.pg-home .pg-facts li:first-child,
  body.pg-home .pg-facts li:last-child { display: flex; align-items: baseline; gap: 12px; padding: 0; border: 0; }
  body.pg-home .pg-facts strong { flex: none; min-width: 5.8em; font-size: 1.05rem; }
  body.pg-home .pg-facts span { margin: 0; font-size: 0.92rem; }
  body.pg-home .pg-trust { max-width: 100%; padding: 14px 16px; }
  body.pg-home .pg-main { padding: 26px 22px 20px; }
  body.pg-home .pg-main h3 { font-size: 1.35rem; }
  /* בנייד הכרטיסים הם שורות שנפתחות (כמו ב"איך אני עובדת"): חוזרים לפריסה של שורה, והקישור בצבע כהה על רקע בהיר */
  body.pg-home .pg-more-grid { grid-template-columns: 1fr; }
  body.pg-home .js-flip .sp-flip { min-height: 0; }
  body.pg-home .js-flip .sp-flip-front { flex-direction: row; align-items: center; justify-content: flex-start; gap: 14px; padding: 10px 14px; }
  body.pg-home .js-flip .sp-flip-plus { position: static; }
  body.pg-home .js-flip .sp-flip-back { gap: 0; }
  body.pg-home .js-flip .sp-flip-back .pg-flip-link { color: var(--sp-rose-ink); }
  body.pg-home .pg-more-title { margin-top: 34px; }
  body.pg-home .pg-badge { bottom: 18px; inset-inline-end: -6px; }
}