/* סקשן 4 "למי זה מתאים?" — רשימת וי אינטראקטיבית (ממשיכה את רשימת המשימות של ההירו)
   סקשן 5 "מה נמדוד כאן?" — פס כהה, כרטיסי "אז / היום" של מתאמנות */

/* ---------- למי זה מתאים ---------- */
.s4 { position: relative; background: var(--paper); padding: clamp(100px, 12vw, 170px) 0; }
.s4__grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(30px, 6vw, 110px); align-items: start; }
.s4__head { position: sticky; top: 130px; }
.s4-title { margin: 0; font-weight: 600; font-size: clamp(52px, 6.4vw, 100px); line-height: .95; letter-spacing: -.025em; }
.s4__sub { margin: 22px 0 0; font-size: clamp(20px, 1.7vw, 25px); }
.s4__nudge { position: relative; display: inline-block; margin: 26px 0 0; font-size: clamp(24px, 2vw, 30px); color: var(--pink-deep); transform: rotate(-3deg); }
.s4__nudge svg { position: absolute; left: -84px; top: 30%; width: 78px; height: 52px; overflow: visible; }
.s4__nudge path { fill: none; stroke: var(--pink-deep); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }

.fit-list { list-style: none; margin: 0; padding: 0; }
.fit-row { position: relative; border-top: 1.5px solid rgba(28,26,25,.14); }
.fit-row:last-child { border-bottom: 1.5px solid rgba(28,26,25,.14); }
.fit-btn {
  position: relative; isolation: isolate; width: 100%; display: flex; align-items: flex-start; gap: 22px; text-align: right;
  padding: clamp(24px, 2.6vw, 36px) 12px; font-size: clamp(20px, 1.75vw, 26px); line-height: 1.45; color: var(--ink);
  transition: transform .45s var(--ease-spring);
}
.fit-btn::before {
  content: ""; position: absolute; inset: 6px 0; z-index: -1; border-radius: 4px 4px 18px 4px;
  background: var(--c); opacity: 0; transform: scaleY(.6) rotate(-.6deg); transition: opacity .35s, transform .45s var(--ease-spring);
}
.fit-btn:hover { transform: translateX(-6px); }
.fit-btn:hover::before { opacity: .45; transform: scaleY(1) rotate(-.6deg); }
.fit-btn:focus-visible { outline: 2px solid var(--pink-deep); outline-offset: 4px; }
.fit-btn .chk { position: relative; flex: 0 0 auto; width: 34px; height: 34px; margin-top: 3px; }
.fit-btn .chk svg { position: absolute; overflow: visible; }
.fit-btn .hd-box { inset: 0; width: 34px; height: 34px; }
.fit-btn .hd-box path { fill: none; stroke: var(--ink); stroke-width: 2.2; stroke-linejoin: round; }
.fit-btn .hd-check { width: 46px; height: 40px; top: -14px; right: -8px; }
.fit-btn .hd-check path { fill: none; stroke: var(--pink-deep); stroke-width: 4.6; stroke-linecap: round; stroke-linejoin: round; }
.fit-txt mark { color: inherit; padding: 0 .08em; background: linear-gradient(var(--c), var(--c)) right 70% / 0% 64% no-repeat; transition: background-size .6s cubic-bezier(.65, 0, .35, 1); }
.fit-row.is-on mark { background-size: 100% 64%; }

.fit-result { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-top: 34px; min-height: 60px; }
.fit-msg { margin: 0; font-size: clamp(25px, 2.1vw, 32px); color: var(--ink-soft); }
.fit-msg.is-all { color: var(--pink-deep); }
.fit-cta { opacity: 0; transform: translateY(10px); pointer-events: none; transition: opacity .4s, transform .5s var(--ease-spring), background .3s; }
.fit-result.has-some .fit-cta { opacity: 1; transform: none; pointer-events: auto; }

/* ---------- מה נמדוד כאן ---------- */
.s5 { position: relative; z-index: 3; background: var(--ink); color: var(--paper); padding: clamp(100px, 12vw, 170px) 0 0; overflow-x: clip; overflow-y: visible; }
/* הסקשן נגמר בגל כהה שגולש לוורוד של ההמלצות; הפולרואידים תלויים מעליו וחלקם התחתון יורד לוורוד */
.s5__wave { position: absolute; z-index: 0; left: 0; top: 100%; width: 100%; height: clamp(70px, 9vw, 140px); margin-top: -1px; fill: var(--ink); pointer-events: none; }
.s5 .line-stage { z-index: 1; }
/* גל גם בכניסה לסקשן — במקום קו ישר מול "למי זה מתאים?" */
.s5__wave-top { position: absolute; z-index: 0; left: 0; bottom: 100%; width: 100%; height: clamp(60px, 8vw, 130px); margin-bottom: -1px; fill: var(--ink); pointer-events: none; }
.s5__head { display: flex; align-items: flex-end; gap: clamp(16px, 3vw, 40px); flex-wrap: wrap; }
.s5-title { margin: 0; font-weight: 600; font-size: clamp(52px, 6.4vw, 100px); line-height: .95; letter-spacing: -.025em; }
.s5__hint { position: relative; margin: 0 0 .4em; display: inline-flex; align-items: center; gap: 12px; font-size: clamp(26px, 2.4vw, 36px); color: var(--yellow); transform: rotate(-4deg); }
.s5__scale { width: 46px; height: 46px; overflow: visible; }
.s5__scale path { fill: none; stroke: var(--paper); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.s5__scale path.x { stroke: var(--pink); stroke-width: 4; }
.s5__intro { margin: clamp(30px, 4vw, 56px) 0 0; max-width: 820px; font-size: clamp(22px, 2.2vw, 33px); line-height: 1.45; color: rgba(247,245,239,.86); }
.s5__intro mark { color: var(--ink); padding: 0 .12em; background: linear-gradient(var(--lime), var(--lime)) right / 0% 100% no-repeat; border-radius: 3px; }
.s5__label { display: flex; align-items: center; gap: 16px; margin: clamp(50px, 6vw, 80px) 0 0; font-size: 15px; letter-spacing: .06em; color: rgba(247,245,239,.6); }
.s5__label::after { content: ""; flex: 1; height: 1px; background: rgba(247,245,239,.18); }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* "אז והיום" — פולרואידים תלויים באטבים על חוט מקושת, שנע ברצף לאורך הקשת */
.line-stage { position: relative; height: var(--stage-h, 640px); margin-top: 10px; touch-action: pan-y; cursor: grab; }
.line-stage.is-drag { cursor: grabbing; }
.line-string { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.line-string path { fill: none; stroke: rgba(247,245,239,.55); stroke-width: 1.6; }
.line-cards { position: absolute; inset: 0; }
.pc { position: absolute; left: 0; top: 0; width: var(--cw, 300px); transform-origin: 50% 0; will-change: transform; user-select: none; -webkit-user-select: none; }
.pc__clip {
  position: absolute; z-index: 2; left: 50%; top: -14px; width: 20px; height: 34px; margin-left: -10px;
  background: var(--clip); border-radius: 4px 4px 3px 3px; box-shadow: 0 3px 6px rgba(0,0,0,.35), inset 0 -10px 0 rgba(0,0,0,.08);
}
.pc__clip::after { content: ""; position: absolute; left: 50%; top: 8px; width: 6px; height: 6px; margin-left: -3px; border-radius: 50%; background: rgba(255,255,255,.75); }
.pc__in {
  margin-top: 6px; padding: 12px 12px 18px; background: #fbfaf6; border-radius: 16px;
  box-shadow: 0 30px 50px -24px rgba(0,0,0,.75), 0 2px 0 rgba(0,0,0,.05);
}
.pc__photo { position: relative; height: calc(var(--cw, 300px) * .78); padding: 18px 18px 16px; border-radius: 10px; background: var(--c); overflow: hidden; color: var(--ink); display: flex; flex-direction: column; }
.pc__photo::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 1px 1px, rgba(28,26,25,.09) 1px, transparent 1.4px) 0 0 / 14px 14px; }
.pc__photo > * { position: relative; }
.pc .lbl { display: block; font-size: 12px; letter-spacing: .1em; opacity: .62; }
.pc__was { margin: 2px 0 0; font-size: calc(var(--cw, 300px) * .056); line-height: 1.3; }
.pc__was span { position: relative; display: inline; background: linear-gradient(var(--pink-deep), var(--pink-deep)) 0 58% / 100% 2.5px no-repeat; }
.pc[data-c="pink"] .pc__was span { background-image: linear-gradient(var(--ink), var(--ink)); }
.pc__now { margin-top: auto; }
.pc__now b { display: block; font-family: "Polin Condensed", var(--sans); font-weight: 900; font-size: calc(var(--cw, 300px) * .2); line-height: .88; letter-spacing: -.01em; }
.pc__now .unit { display: block; margin-top: 4px; font-size: calc(var(--cw, 300px) * .058); font-weight: 600; }
.pc__cap { padding: 14px 6px 0; color: var(--ink); }
.pc__q { margin: 0; font-family: var(--hand); font-size: calc(var(--cw, 300px) * .078); line-height: 1.12; }
.pc__who { display: block; margin-top: 10px; font-size: 14px; color: var(--ink-soft); }

@media (max-width: 900px) {
  .s4__grid { grid-template-columns: 1fr; gap: 24px; }
  .s4__head { position: static; }
  .s4__nudge svg { left: -70px; top: 80%; transform: rotate(-20deg); }
  .fit-btn { gap: 16px; padding: 22px 4px; }
  .fit-btn:hover { transform: none; }
}

/* התפריט הוא מלבן בהיר משלו — לא צריך להפוך צבעים מעל רקעים כהים/צבעוניים */