/* ============================================================
   home.css: דף הבית (סוכן B5). תחילית hp-.
   רק טוקנים מ-styles.css: בלי ערכי צבע, בלי גודלי גופן ובלי ms ישירים.
   הכיוון (research/redesign-brief.md): כרטיס תצלום בשער עם בלוק כותרת
   חופף ופס בחירה צף (Policygenius), רצועת אמון, בנטו של כרטיסים
   בגוונים פסטליים עם כרטיס עוגן כהה אחד, ובלי קווי דיו.

   01 השער   02 רצועת אמון   03 המחירון (בנטו)   04 איך זה עובד
   05 שער המדורים   06 המדורים   07 מי מאחורי האתר   08 שאלות נפוצות
   09 פנייה קצרה
   ============================================================ */

/* ---------- 01 השער ---------- */
.hp-hero{padding-block:var(--s-5) var(--s-10)}
.hp-hero-card{position:relative}
.hp-hero-photo{margin:0}
.hp-hero-photo .photo-frame{aspect-ratio:16/8;border-radius:var(--radius-xl)}
.hp-hero-photo .photo-frame img{object-position:center 40%}

/* בלוק הכותרת: לבן, חופף לפינה הימנית-עליונה של התצלום. הפינה הפנימית בלבד מעוגלת,
   כך שהבלוק נראה כהמשך של העמוד ולא ככרטיס נוסף. */
.hp-hero-copy{position:absolute;top:0;right:0;max-width:min(58%,640px);background:var(--paper);padding:0 0 var(--s-6) var(--s-8);border-end-start-radius:var(--radius-xl)}
.hp-title{font-weight:500;font-size:var(--fs-h1);line-height:var(--lh-tight);letter-spacing:-.01em;max-width:15ch;margin:0 0 var(--s-4)}
.hp-deck{font-size:var(--fs-18);line-height:1.6;color:var(--ink-2);max-width:40ch;margin:0}
/* בנייד מוצג נוסח קצר של הפתיח, כדי שהשאלה הראשונה תישאר מעל הקפל */
.hp-deck-s{display:none}

/* המילה המסומנת: משקל רגיל, נטויה קלה, וקו יד בצבע המבטא מתחתיה */
.hp-mark{position:relative;display:inline-block;font-weight:400;font-style:italic;color:var(--ink);padding-inline:.04em}
.hp-mark-stroke{position:absolute;left:0;right:0;bottom:-.08em;width:100%;height:.22em;overflow:visible;pointer-events:none}
.hp-mark-stroke path{fill:none;stroke:var(--accent);stroke-width:3;stroke-linecap:round;vector-effect:non-scaling-stroke}

/* פס הבחירה הצף: לבן, פינות 16, צל, על תחתית התצלום */
.hp-hero-tool{position:absolute;left:var(--s-8);right:var(--s-8);bottom:var(--s-8)}
.hp-bar{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:var(--s-4);background:var(--surface);border-radius:16px;box-shadow:var(--shadow-2);padding:var(--s-4) var(--s-5)}
.hp-bar-cta{flex:none;min-height:52px}

/* הגיבוי (.hp-pick) והפותחן של השאלון (.wz--starter) מקבלים בדיוק אותו עיצוב,
   כדי שההחלפה ב-JS לא תזיז את העמוד. */
.hp-pick,.hp-bar .wz.wz--starter[data-variant="hero"]{background:none;border:0;box-shadow:none;padding:0;font-size:var(--fs-16);line-height:1.4}
.hp-pick,.hp-bar .wz--starter .wz-step{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-3) var(--s-4)}
.hp-pick-title,.hp-bar .wz--starter .wz-title{flex:none;font-family:var(--font-body);font-weight:600;font-size:var(--fs-16);line-height:1.3;color:var(--ink);margin:0;max-width:9ch}
.hp-pick-list,.hp-bar .wz-picks{display:flex;flex-wrap:wrap;gap:var(--s-2);margin:0;padding:0;flex:1;min-width:0}
.hp-pick-list a,.hp-bar .wz-pick{display:inline-flex;align-items:center;gap:var(--s-2);min-height:48px;padding:0 var(--s-4) 0 var(--s-5);background:var(--surface);border:1px solid var(--field-border);border-radius:var(--radius-pill);color:var(--ink);font-weight:500;font-size:var(--fs-15);line-height:1.2;text-decoration:none;white-space:nowrap;-webkit-tap-highlight-color:transparent;transition:background-color var(--dur-2) var(--ease),border-color var(--dur-2) var(--ease),color var(--dur-2) var(--ease),transform var(--dur-2) var(--ease),box-shadow var(--dur-2) var(--ease)}
.hp-pick-list a::before,.hp-bar .wz-pick::before{content:"";width:10px;height:10px;border-radius:50%;background:var(--tint-sage);box-shadow:inset 0 0 0 2px var(--anchor);flex:none}
.hp-pick-list li:nth-child(2) a::before,.hp-bar .wz-picks li:nth-child(2) .wz-pick::before{background:var(--tint-peach);box-shadow:inset 0 0 0 2px var(--accent)}
.hp-pick-list li:nth-child(3) a::before,.hp-bar .wz-picks li:nth-child(3) .wz-pick::before{background:var(--accent-tint);box-shadow:inset 0 0 0 2px var(--accent-strong)}
.hp-pick-list li:nth-child(4) a::before,.hp-bar .wz-picks li:nth-child(4) .wz-pick::before{background:var(--tint-sand);box-shadow:inset 0 0 0 2px var(--muted)}
.hp-pick-list .ic,.hp-bar .wz-pick .ic{flex:none;width:16px;height:16px;color:var(--muted);transition:transform var(--dur-1) var(--ease)}
.hp-pick-list a:hover,.hp-bar .wz-pick:hover{border-color:var(--anchor);color:var(--anchor);transform:translateY(-1px);box-shadow:var(--shadow-1)}
.hp-pick-list a:hover .ic,.hp-bar .wz-pick:hover .ic{transform:translateX(-3px);color:var(--anchor)}
.hp-pick-list a:active,.hp-bar .wz-pick:active{transform:scale(.98)}
.hp-pick-note,.hp-bar .wz--starter .wz-note{flex-basis:100%;margin:0;font-size:var(--fs-13);line-height:1.5;color:var(--muted)}
.hp-bar .wz--starter .wz-resume{flex-basis:100%;margin:0}

@media (max-width:1100px){
  .hp-hero-copy{max-width:min(64%,560px)}
  .hp-title{font-size:var(--fs-h2)}
}
@media (max-width:900px){
  /* בנייד: כותרת, רצועת תצלום נמוכה, ואז הפס. ארבע האפשרויות נשארות מעל הקפל ב-390x844. */
  .hp-hero{padding-block:var(--s-5) var(--s-6)}
  .hp-hero-card{display:flex;flex-direction:column}
  .hp-hero-copy{position:static;order:-1;max-width:none;padding:0 0 var(--s-5);border-radius:0}
  .hp-title{font-size:var(--fs-h2);max-width:18ch;margin-bottom:var(--s-3)}
  .hp-deck{font-size:var(--fs-16);max-width:56ch}
  .hp-hero-photo .photo-frame{aspect-ratio:2/1;border-radius:var(--radius-lg)}
  /* position:relative כדי שהפס יצויר מעל התצלום (שהתמונה בו ממוקמת absolute) */
  .hp-hero-tool{position:relative;z-index:1;inset:auto;margin:calc(-1 * var(--s-6)) var(--s-3) 0}
  .hp-bar{grid-template-columns:minmax(0,1fr);padding:var(--s-4)}
  .hp-pick-title,.hp-bar .wz--starter .wz-title{max-width:none;flex-basis:100%}
  .hp-pick-list,.hp-bar .wz-picks{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-2);flex-basis:100%}
  .hp-pick-list a,.hp-bar .wz-pick{white-space:normal;min-height:48px;padding:var(--s-2) var(--s-3) var(--s-2) var(--s-4);font-size:var(--fs-14);border-radius:var(--radius)}
  .hp-pick-list a span,.hp-bar .wz-pick span{flex:1;min-width:0}
  .hp-bar-cta{width:100%}
}
@media (max-width:600px){
  .hp-hero{padding-top:var(--s-4)}
  .hp-title{font-size:clamp(1.9rem,1.4rem + 2.6vw,2.4rem)}
  .hp-deck{font-size:var(--fs-15);line-height:1.5}
  .hp-deck-l{display:none}
  .hp-deck-s{display:inline}
  .hp-hero-tool{margin-inline:var(--s-2)}
  .hp-pick-note,.hp-bar .wz--starter .wz-note{display:none}
}

/* ---------- 02 רצועת אמון: ארבעה תאים, מרווח במקום קווים ---------- */
.hp-proof{margin-top:var(--s-6)}
.hp-proof-list{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s-6) var(--s-10)}
.hp-proof-list li{display:grid;gap:var(--s-1);min-width:0}
.hp-proof-num{font-family:var(--font-display);font-weight:500;font-size:var(--fs-h2);line-height:1;color:var(--ink);font-variant-numeric:lining-nums tabular-nums;letter-spacing:-.01em}
.hp-proof-num--sm{font-size:var(--fs-h3)}
.hp-proof-num--txt{font-size:var(--fs-h3)}
.hp-proof-list span{font-size:var(--fs-14);line-height:1.5;color:var(--muted)}
.hp-proof-list span a{color:var(--anchor);font-weight:500}
@media (max-width:900px){.hp-proof-list{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-5)}}
@media (max-width:600px){
  .hp-proof{margin-top:var(--s-5)}
  .hp-proof-list{gap:var(--s-4)}
  .hp-proof-num{font-size:var(--fs-h3)}
  .hp-proof-num--sm,.hp-proof-num--txt{font-size:var(--fs-h4)}
  .hp-proof-list span{font-size:var(--fs-13)}
}

/* ---------- 03 המחירון: בנטו ---------- */
.hp-desk{margin-top:var(--s-16);padding-block:var(--s-16)}
.hp-desk-head h2{max-width:24ch;margin:0 0 var(--s-3)}
.hp-desk-intro{max-width:66ch;margin:0;font-size:var(--fs-17);line-height:1.65}

html:not(.js) .hp-desk-live{display:none}
.js .hp-desk-nojs{display:none}
.hp-desk[data-state="error"] .hp-desk-live{display:none}
.hp-desk[data-state="error"] .hp-desk-nojs{display:block}
.hp-desk-nojs{margin-top:var(--s-6);padding:var(--s-5) var(--s-6);background:var(--surface);border-radius:var(--radius-lg)}
.hp-desk-nojs p{margin:0;max-width:70ch}

.hp-bento{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);grid-template-areas:"anchor chart" "table cta";gap:var(--s-5);margin-top:var(--s-10)}
.hp-bento > *{min-width:0;margin:0;border-radius:var(--radius-xl);padding:var(--s-8)}
.hp-bento-anchor{grid-area:anchor;background:var(--anchor);color:var(--on-anchor);--focus:var(--on-anchor)}
.hp-bento-chart{grid-area:chart;background:var(--surface)}
.hp-bento-table{grid-area:table;background:var(--tint-sand)}
.hp-bento-cta{grid-area:cta;background:var(--tint-peach);display:flex;flex-direction:column;justify-content:center}

/* בחירת הפרופיל, על הכהה: בקרים מפולחים בגלולות */
.hp-ctl{border:0;padding:0;margin:0 0 var(--s-5);min-width:0}
.hp-ctl-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-4)}
.hp-ctl legend,.hp-age label{display:block;padding:0;margin:0 0 var(--s-2);font-size:var(--fs-13);font-weight:500;line-height:1.4;color:var(--tint-sage)}
.hp-seg{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0;padding:3px;background:var(--anchor-2);border-radius:var(--radius-pill)}
.hp-seg .choice span{min-height:40px;padding:var(--s-1) var(--s-3);background:transparent;border:0;border-radius:var(--radius-pill);color:var(--on-anchor);font-size:var(--fs-14);font-weight:500}
.hp-seg .choice:hover span{background:rgba(255,255,255,.06)}
.hp-seg .choice input:checked + span{background:var(--surface);color:var(--anchor);font-weight:600;box-shadow:none}
.hp-age output{font-family:var(--font-display);font-weight:500;font-size:var(--fs-h4);line-height:1;color:var(--on-anchor);font-variant-numeric:lining-nums tabular-nums}
/* ציר מספרי, לכן LTR: הגיל הנמוך משמאל, כמו בתרשים (חוק RTL מס' 6) */
.hp-age-row{direction:ltr;display:grid;grid-template-columns:40px minmax(0,1fr) 40px;gap:var(--s-2);align-items:center}
.hp-age-btn{width:40px;height:40px;display:flex;align-items:center;justify-content:center;background:var(--anchor-2);border:1px solid transparent;border-radius:50%;color:var(--on-anchor);font-size:var(--fs-20);font-weight:500;line-height:1;cursor:pointer;transition:background-color var(--dur-1) var(--ease),color var(--dur-1) var(--ease)}
.hp-age-btn:hover{background:var(--surface);color:var(--anchor)}
.hp-age-btn[disabled]{opacity:.4;cursor:default;pointer-events:none}
.hp-age input[type="range"]{width:100%;height:var(--tap);margin:0;background:transparent;accent-color:var(--accent);cursor:pointer}
.hp-age input[type="range"][disabled]{cursor:default}
.hp-ctl-note{margin:0;font-size:var(--fs-12);line-height:1.5;color:var(--tint-sage);opacity:.85}

/* הקריאה: שני המספרים של הגיל שנבחר, על הכהה */
.hp-read{margin-top:var(--s-8);padding-top:var(--s-6);border-top:1px solid rgba(255,255,255,.12)}
.hp-read-who{margin:0 0 var(--s-4);font-size:var(--fs-14);font-weight:500;line-height:1.4;color:var(--accent-tint);min-height:1.4em}
.hp-read-nums{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-5)}
.hp-read-nums .figure-num{margin:0;min-width:0}
.hp-read-nums .figure-num b{font-size:clamp(2.2rem,1.6rem + 2vw,3.2rem);color:var(--on-anchor)}
/* .figure-num span מקטין כל span, גם את ה-.ils שבתוך המספר */
.hp-read-nums .figure-num b .ils{font-size:inherit;color:inherit}
.hp-read-nums .figure-num > span{color:var(--tint-sage)}
.hp-read-n{margin:var(--s-4) 0 0;font-size:var(--fs-13);line-height:1.5;color:var(--tint-sage);opacity:.85;min-height:1.5em}

/* התרשים: רצועה בין המחירון הנמוך לגבוה, לפי גיל */
.hp-chart figcaption,.hp-desk-table figcaption{margin:0 0 var(--s-4);font-family:var(--font-display);font-weight:500;font-size:var(--fs-h4);line-height:1.3;color:var(--ink)}
.hp-chart-plot{direction:ltr;width:100%;aspect-ratio:16 / 9;min-height:220px}
.hp-chart-plot svg{display:block;width:100%;height:100%;overflow:visible}
.hp-c-grid{stroke:var(--rule);stroke-width:1}
.hp-c-base{stroke:var(--field-border);stroke-width:1}
.hp-c-band{fill:var(--tint-sage);opacity:.7}
.hp-c-max{fill:none;stroke:var(--data-1);stroke-width:2;stroke-linejoin:round}
.hp-c-min{fill:none;stroke:var(--data-2);stroke-width:2.5;stroke-linejoin:round}
.hp-c-sel{stroke:var(--ink);stroke-width:1;stroke-dasharray:3 3}
.hp-c-dot-max{fill:var(--data-1)}
.hp-c-dot-min{fill:var(--data-2)}
.hp-c-lab{font-family:var(--font-body);font-size:var(--fs-12);fill:var(--muted);font-variant-numeric:lining-nums tabular-nums}
.hp-c-lab--on{fill:var(--ink);font-weight:600}
.hp-chart-key{display:flex;flex-wrap:wrap;gap:var(--s-1) var(--s-5);margin-top:var(--s-4);font-size:var(--fs-13);color:var(--muted)}
.hp-chart-key li{display:inline-flex;align-items:center;gap:var(--s-2)}
.hp-chart-key li::before{content:"";width:18px;height:0;border-top:2px solid var(--data-2)}
.hp-chart-key .hp-key-max::before{border-top:2px solid var(--data-1)}
.hp-chart-key .hp-key-sel::before{border-top:1px dashed var(--ink)}

/* הטבלה: אותם נתונים, לקריאה ולקוראי מסך */
.hp-desk table.data{min-width:0;background:var(--surface);border-radius:var(--radius)}
.hp-desk table.data th,.hp-desk table.data td{padding-inline:var(--s-4)}
.js .hp-desk-table .table-wrap{min-height:15rem}
.hp-desk-cta h3{font-weight:500;font-size:var(--fs-h3);line-height:1.2;margin:0 0 var(--s-3)}
.hp-desk-cta p{margin:0 0 var(--s-6);font-size:var(--fs-16);line-height:1.6;color:var(--ink-2)}

/* מקור, תאריך וההבהרות של הקובץ. נכתבים על ידי home.js מתוך prices.json */
.hp-desk-notes{margin-top:var(--s-6);display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-2) var(--s-10);align-items:start;font-size:var(--fs-13);line-height:1.6;color:var(--muted);min-height:6rem}
.hp-desk-notes p{margin:0 0 var(--s-2)}
.hp-desk-notes a{color:var(--muted)}
.hp-desk-notes b{color:var(--ink)}
.hp-desk-more{grid-column:1 / -1}
.hp-desk-more summary{display:flex;align-items:center;gap:var(--s-2);min-height:var(--tap);font-weight:600;color:var(--ink);cursor:pointer;list-style:none}
.hp-desk-more summary::-webkit-details-marker{display:none}
.hp-desk-more summary::after{content:"";flex:none;width:11px;height:11px;background:linear-gradient(var(--ink),var(--ink)) center/100% 2px no-repeat,linear-gradient(var(--ink),var(--ink)) center/2px 100% no-repeat;transition:transform var(--dur-2) var(--ease)}
.hp-desk-more[open] summary::after{transform:rotate(45deg)}
.hp-desk-more p{max-width:80ch}

.hp-desk-how{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s-5);margin-top:var(--s-8);font-size:var(--fs-15);line-height:1.6}
.hp-desk-how li{background:var(--surface);border-radius:var(--radius-lg);padding:var(--s-5) var(--s-6)}
.hp-desk-how b{display:block;color:var(--ink);font-size:var(--fs-16);margin-bottom:var(--s-1)}

@media (max-width:1000px){
  .hp-bento{grid-template-columns:minmax(0,1fr);grid-template-areas:"anchor" "chart" "table" "cta"}
}
@media (max-width:720px){
  .hp-desk{margin-top:var(--s-12);padding-block:var(--s-12)}
  .hp-desk-intro{font-size:var(--fs-16)}
  .hp-bento{margin-top:var(--s-8);gap:var(--s-4)}
  .hp-bento > *{padding:var(--s-5);border-radius:var(--radius-lg)}
  .hp-ctl-row{grid-template-columns:minmax(0,1fr)}
  .hp-ctl-note{display:none}
  .hp-read-nums{gap:var(--s-4)}
  .hp-desk-notes{grid-template-columns:minmax(0,1fr);min-height:13rem}
  .hp-desk-how{grid-template-columns:minmax(0,1fr);gap:var(--s-3)}
}

/* ---------- 04 איך זה עובד: ארבעה כרטיסים רכים, ספרות סריף קלות במבטא ---------- */
.hp-how .section-head{margin-top:var(--s-20)}
.hp-steps{counter-reset:hp-step;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s-5)}
.hp-steps li{counter-increment:hp-step;min-width:0;background:var(--paper-2);border-radius:var(--radius-lg);padding:var(--s-6)}
.hp-steps li:nth-child(2){background:var(--tint-sage)}
.hp-steps li:nth-child(3){background:var(--tint-peach)}
.hp-steps li:nth-child(4){background:var(--tint-sand)}
.hp-steps li::before{content:counter(hp-step,decimal-leading-zero);display:block;margin-bottom:var(--s-5);font-family:var(--font-display);font-weight:400;font-size:var(--fs-h1);line-height:.9;color:var(--accent);font-variant-numeric:lining-nums tabular-nums}
.hp-steps p{margin:0;font-size:var(--fs-15);line-height:1.6;color:var(--ink-2)}
.hp-steps .hp-step-t{margin:0 0 var(--s-2);font-family:var(--font-display);font-weight:500;font-size:var(--fs-h4);line-height:1.2;color:var(--ink)}
@media (max-width:900px){.hp-steps{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-4)}}
@media (max-width:560px){
  .hp-how .section-head{margin-top:var(--s-12)}
  .hp-steps{grid-template-columns:minmax(0,1fr);gap:var(--s-3)}
  .hp-steps li{display:grid;grid-template-columns:3.4rem minmax(0,1fr);column-gap:var(--s-3);padding:var(--s-5)}
  .hp-steps li::before{grid-row:1 / span 2;margin:0;font-size:var(--fs-h2)}
  .hp-steps li > *{grid-column:2}
}

/* ---------- 05 שער המדורים: שלושה כרטיסי תצלום, כותרת על לשונית לבנה ---------- */
.hp-covers{margin-top:var(--s-20)}
.hp-cover-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s-5)}
.hp-cover{position:relative;display:flex;flex-direction:column;min-width:0;color:inherit;text-decoration:none;border-radius:var(--radius-lg);overflow:hidden;background:var(--paper-2);transition:transform var(--dur-3) var(--ease),box-shadow var(--dur-3) var(--ease)}
.hp-cover .photo{width:100%;margin:0}
.hp-cover .photo-frame{border-radius:0;aspect-ratio:4/3}
.hp-cover .kicker{position:absolute;top:var(--s-4);right:var(--s-4);margin:0;background:rgba(255,255,255,.92);color:var(--anchor)}
.hp-cover-title{margin:0;padding:var(--s-5) var(--s-5) 0;font-family:var(--font-display);font-weight:500;font-size:var(--fs-h3);line-height:1.15;color:var(--ink);background:var(--surface);margin-top:calc(-1 * var(--s-5));margin-inline-end:var(--s-5);border-start-start-radius:var(--radius-lg);border-start-end-radius:var(--radius-lg);position:relative}
.hp-cover-deck{margin:0;padding:var(--s-2) var(--s-5) var(--s-6);font-size:var(--fs-15);line-height:1.55;color:var(--ink-2);background:var(--surface);flex:1}
.hp-cover:hover{transform:translateY(-2px);box-shadow:var(--shadow-1)}
.hp-cover:hover .hp-cover-title{color:var(--accent-strong)}
.hp-cover:focus-visible{outline-offset:4px}
@media (max-width:800px){
  .hp-covers{margin-top:var(--s-12)}
  .hp-cover-grid{grid-template-columns:minmax(0,1fr);gap:var(--s-4)}
  .hp-cover .photo-frame{aspect-ratio:16/9}
}

/* ---------- 06 המדורים ---------- */
.hp-sec .section-head{margin-top:var(--s-20)}
.hp-sec-grid{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr) minmax(0,1fr);gap:var(--s-5)}
.hp-sec-grid > *{min-width:0}
.hp-sec-main{padding-inline-end:var(--s-6)}
.hp-sec-title{font-weight:500;font-size:var(--fs-h3);line-height:1.2;max-width:22ch;margin:0 0 var(--s-3)}
.hp-sec-main > p{max-width:60ch}
.hp-sec-cta{margin:var(--s-6) 0 0}
.hp-sub{margin:0 0 var(--s-3);font-family:var(--font-body);font-size:var(--fs-13);font-weight:600;line-height:1.3;color:var(--anchor)}
/* "מה קובע את המחיר": כרטיס בגוון מרווה */
.hp-sec-price{background:var(--tint-sage);border-radius:var(--radius-lg);padding:var(--s-6)}
.hp-facts{font-size:var(--fs-15);line-height:1.6;margin-bottom:var(--s-4)}
.hp-facts b{color:var(--ink)}
.hp-sec-price > p{font-size:var(--fs-15);line-height:1.6}
.hp-sec-price ul.list li::before{background:var(--anchor)}
.hp-src{display:block;margin:var(--s-3) 0 0;font-size:var(--fs-12);line-height:1.55;color:var(--muted)}
.hp-src a{color:var(--muted)}

/* "מהמדור": כרטיס אפור חם, וכל טיזר כרטיס לבן */
.hp-sec-latest{background:var(--paper-2);border-radius:var(--radius-lg);padding:var(--s-6)}
.hp-latest{display:grid;gap:var(--s-3)}
.hp-latest .teaser{background:var(--surface);border-radius:var(--radius);padding:var(--s-4) var(--s-5);transition:transform var(--dur-2) var(--ease),box-shadow var(--dur-2) var(--ease)}
.hp-latest .teaser:hover{transform:translateY(-1px);box-shadow:var(--shadow-1)}
.hp-latest .teaser .kicker{font-size:var(--fs-12)}
.hp-latest:not(:has(.teaser)){display:none}
.hp-latest:has(.teaser) + .hp-latest-empty{display:none}
.hp-latest-empty{margin:0;font-size:var(--fs-15);color:var(--muted)}
.hp-latest-more{margin:var(--s-5) 0 0;font-size:var(--fs-15)}
.hp-latest-more a{min-height:var(--tap)}

/* בריאות: שלוש שכבות, מהבסיס למעלה. הסדר ב-DOM הוא 1, 2, 3; על המסך הבסיס למטה. */
.hp-layers{display:flex;flex-direction:column-reverse;gap:var(--s-2);margin:var(--s-5) 0 0}
.hp-layers li{display:grid;gap:2px;padding:var(--s-3) var(--s-5);background:var(--paper-2);border-radius:var(--radius)}
.hp-layers li:nth-child(2){margin-inline-start:9%;background:var(--tint-sand)}
.hp-layers li:nth-child(3){margin-inline-start:18%;background:var(--tint-peach)}
.hp-layers b{color:var(--ink);line-height:1.3}
.hp-layers span{font-size:var(--fs-14);line-height:1.5;color:var(--muted)}

/* חיים: שלושת המספרים שמשווים. איור סכמטי, ציר זמן משמאל לימין. */
.hp-three{margin:var(--s-5) 0 0;background:var(--paper-2);border-radius:var(--radius-lg);padding:var(--s-5)}
.hp-three-art{display:block;width:100%;height:auto;margin-bottom:var(--s-4)}
.hp-three-bars rect{fill:var(--paper-3);rx:3}
.hp-three-first{fill:var(--accent)}
.hp-three-avg{fill:none;stroke:var(--anchor);stroke-width:1.5;stroke-dasharray:5 4}
.hp-three-base{fill:none;stroke:var(--field-border);stroke-width:1.5}
.hp-three-key{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s-3) var(--s-5);font-size:var(--fs-14);line-height:1.5}
.hp-three-key b{display:block}
.hp-three-key li{position:relative;padding-inline-start:var(--s-6)}
/* מיקום פיזי (חוק RTL מס' 1): הסימן מימין לטקסט */
.hp-three-key li::before{content:"";position:absolute;right:0;top:.35em;width:12px;height:12px;border-radius:3px;background:var(--accent)}
.hp-three-key .hp-k-avg::before{top:.75em;width:14px;height:0;border-radius:0;background:none;border-top:2px dashed var(--anchor)}
.hp-three-key .hp-k-sum::before{background:var(--paper-3);box-shadow:inset 0 0 0 1px var(--field-border)}
.hp-three-key b{color:var(--ink)}

/* מחלות קשות: רשימת המינימום */
.hp-min{margin:var(--s-5) 0 0;background:var(--paper-2);border-radius:var(--radius-lg);padding:var(--s-5)}
.hp-min-t{margin:0 0 var(--s-3);font-size:var(--fs-15);font-weight:600;color:var(--ink)}
.hp-chips{display:flex;flex-wrap:wrap;gap:var(--s-2)}
.hp-chips li{padding:.35em .9em;background:var(--surface);border-radius:var(--radius-pill);font-size:var(--fs-14);font-weight:500;line-height:1.4;color:var(--ink)}

@media (max-width:980px){
  .hp-sec-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hp-sec-main{grid-column:1 / -1;padding-inline-end:0}
}
@media (max-width:600px){
  .hp-sec .section-head{margin-top:var(--s-12)}
  .hp-sec-grid{grid-template-columns:minmax(0,1fr);gap:var(--s-4)}
  .hp-sec-price,.hp-sec-latest{padding:var(--s-5)}
  .hp-three-key{grid-template-columns:minmax(0,1fr)}
  .hp-three-key b{display:inline}
  .hp-layers li:nth-child(2){margin-inline-start:6%}
  .hp-layers li:nth-child(3){margin-inline-start:12%}
  .hp-sec-cta .btn{display:flex;width:100%}
}

/* ---------- 07 מי מאחורי האתר: כרטיס עוגן כהה ---------- */
.hp-trust-grid .section-head{margin-top:var(--s-20)}
.hp-agent{background:var(--anchor);color:var(--on-anchor);border-radius:var(--radius-xl);padding:var(--s-8);--focus:var(--on-anchor);height:100%}
.hp-agent .kicker{background:rgba(255,255,255,.1);color:var(--accent-tint)}
.hp-agent a:not(.btn){color:var(--on-anchor);text-decoration-color:rgba(243,247,245,.4)}
.hp-agent a:not(.btn):hover{color:#fff}
.hp-agent-say{margin:0 0 var(--s-4);font-family:var(--font-display);font-weight:400;font-size:var(--fs-h3);line-height:1.3;color:var(--on-anchor);max-width:22em;text-wrap:balance}
.hp-agent > p{max-width:60ch;color:var(--tint-sage)}
.hp-agent-facts{margin:var(--s-5) 0;display:grid;gap:var(--s-2)}
.hp-agent-facts > div{display:grid;grid-template-columns:9rem minmax(0,1fr);gap:var(--s-4);padding:var(--s-3) var(--s-4);background:var(--anchor-2);border-radius:var(--radius);font-size:var(--fs-15);line-height:1.5}
.hp-agent-facts dt{font-weight:600;color:var(--on-anchor)}
.hp-agent-facts dd{margin:0;min-width:0;overflow-wrap:anywhere;color:var(--tint-sage)}
.hp-agent-foot{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:var(--s-5)}
.hp-agent-foot .btn--ghost{border-color:rgba(243,247,245,.4);color:var(--on-anchor)}
.hp-agent-foot .btn--ghost:hover{background:rgba(255,255,255,.08);border-color:var(--on-anchor);color:#fff}
.hp-agent-foot .link-arrow{color:var(--on-anchor)}
.hp-trust > .front-side .databox{height:100%}
@media (max-width:560px){
  .hp-agent{padding:var(--s-6) var(--s-5)}
  .hp-agent-facts > div{grid-template-columns:minmax(0,1fr);gap:0}
  .hp-agent-foot .btn{flex:1 1 auto}
}

/* ---------- 08 שאלות נפוצות ---------- */
.hp-faq .section-head{margin-top:var(--s-20);margin-bottom:var(--s-6)}
.hp-faq-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--s-5)}
.hp-faq-grid > div{min-width:0}
@media (max-width:820px){.hp-faq-grid{grid-template-columns:minmax(0,1fr)}}

/* ---------- 09 פנייה קצרה: כרטיס לבן, פינות 24, פאנל בגוון מרווה ---------- */
.hp-close{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:0;margin-top:var(--s-20);padding:0;align-items:stretch;background:var(--surface);border:1px solid var(--rule)}
/* .lead-box הכללי שם את הטופס על לוח לבן פנימי; כאן העמודה הימנית כבר ירוקה והטופס כבר על לבן */
.hp-close .hp-close-form [data-lead-form]{padding:0;border-radius:0}
.hp-close > *{min-width:0}
.hp-close-txt{background:var(--tint-sage);padding:var(--s-8)}
.hp-close-txt .kicker{background:rgba(255,255,255,.7);color:var(--anchor)}
.hp-close-txt > p:not(.kicker){max-width:48ch}
.hp-close-alt{margin:0;font-size:var(--fs-15);color:var(--ink-2)}
.hp-close-form{padding:var(--s-8)}
.hp-close-form .mount-fallback p{margin:0 0 var(--s-3)}
@media (max-width:820px){.hp-close{grid-template-columns:minmax(0,1fr);margin-top:var(--s-12)}.hp-close-txt,.hp-close-form{padding:var(--s-6) var(--s-5)}}

/* הדפסה: בלי כלי הבחירה ובלי כפתורים */
@media print{
  .hp-bar,.hp-desk-ctl,.hp-desk-cta,.hp-sec-cta,.hp-close,.hp-agent-foot{display:none !important}
}