
/* ═══════════════════════════════════════════════════════════════
   אותה שפה בדיוק של הדפים שלהם: לבן, נייבי 0B1242, כתום F38420,
   Alef לגוף ו-Rubik לכותרות, טריזים אלכסוניים ומספרי-ענק. נמדדה
   מדף המאסטר ספיקר פרו, שנמדד בעצמו מדף הכנס החי.

   🔴 הכלל שאסור לשבור: לבן על כתום נותן 2.6:1 ונכשל בנגישות.
      נייבי על כתום נותן 6.6:1 — ולכן כל שטח כתום נושא טקסט נייבי.

   הדף מחויב למראה בהיר אחד, כמו המותג עצמו, ולכן הרקע והצבעים
   נצבעים במפורש ואין גרסה כהה.
   ═══════════════════════════════════════════════════════════════ */
:root{
  --paper:#FFFFFF;
  --paper-2:#F3F6FC;
  --navy:#0B1242;
  --navy-2:#16205C;
  --ink:#39405A;
  --ink-2:#6C7492;
  --orange:#F38420;
  --orange-2:#D96D0C;
  --orange-soft:#FDF0E2;
  --line:#DCE3F0;
  --e1:0 1px 2px rgba(11,18,66,.05),0 5px 14px rgba(11,18,66,.06);
  --e2:0 10px 26px rgba(11,18,66,.09),0 26px 60px rgba(11,18,66,.1);
  --r:20px;
  --pad:clamp(48px,7vw,96px);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;direction:rtl;background:var(--paper);color:var(--ink);
  font-family:'Alef',system-ui,-apple-system,'Segoe UI',Arial,sans-serif;
  font-size:17.5px;line-height:1.75;font-weight:400;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
p{margin:0 0 16px}
p:last-child{margin-bottom:0}
h1,h2,h3{font-family:'Rubik','Alef',system-ui,sans-serif;color:var(--navy);margin:0}
h1{font-size:clamp(31px,6.2vw,52px);line-height:1.05;font-weight:900;letter-spacing:-.03em}
h2{font-size:clamp(26px,5vw,40px);line-height:1.1;font-weight:800;letter-spacing:-.025em}
h3{font-size:clamp(18px,3.4vw,22px);line-height:1.3;font-weight:700;letter-spacing:-.015em}
:focus-visible{outline:3px solid var(--orange);outline-offset:3px;border-radius:6px}

.wrap{width:min(760px,90vw);margin-inline:auto}
section{padding:var(--pad) 0;position:relative}
.eyebrow{
  font-family:'Rubik','Alef',sans-serif;font-size:13px;font-weight:700;
  letter-spacing:.11em;color:var(--orange-2);margin:0 0 13px;
}
.h1-sub{
  margin-top:12px;font-family:'Rubik','Alef',sans-serif;font-weight:700;
  font-size:clamp(17px,3.3vw,23px);line-height:1.3;letter-spacing:-.02em;
  color:var(--orange-2);
}
.h2-sub{
  margin-top:10px;font-family:'Rubik','Alef',sans-serif;font-weight:700;
  font-size:clamp(16px,3vw,20px);line-height:1.35;color:var(--orange);
}
.lead{font-size:clamp(17.5px,2.4vw,20px);line-height:1.72;color:var(--ink);margin-top:22px}
.rule{width:72px;height:4px;border-radius:99px;background:var(--orange);margin:20px 0 0;border:0}
.sec-head{margin-bottom:38px}

/* הרצועה שפותחת את הדף, כמו הרצועה של הכנס */
.strip{
  background:var(--orange);color:var(--navy);text-align:center;
  font-family:'Rubik','Alef',sans-serif;font-weight:700;font-size:14.5px;
  letter-spacing:.02em;padding:11px 16px;line-height:1.45;
}

/* טריז אלכסוני בין שני שדות רקע — הסימן המובהק של הדפים שלהם */
.soft{background:var(--paper-2);position:relative}
.soft::before,.soft::after{
  content:'';position:absolute;left:0;right:0;height:64px;
  background:var(--paper-2);pointer-events:none;
}
.soft::before{top:-63px;clip-path:polygon(0 100%,100% 0,100% 100%)}
.soft::after{bottom:-63px;clip-path:polygon(0 0,100% 0,0 100%)}
@media(max-width:700px){
  .soft::before,.soft::after{height:36px}
  .soft::before{top:-35px}
  .soft::after{bottom:-35px}
}

/* ---------- העובדה שהכל תלוי בה ---------- */
.keystone{
  margin-top:40px;background:var(--navy);border-radius:var(--r);
  padding:clamp(24px,4vw,34px);box-shadow:var(--e2);
  display:flex;gap:18px;align-items:flex-start;
}
.keystone .mark{font-size:30px;line-height:1.1;flex:none}
.keystone b{
  display:block;font-family:'Rubik','Alef',sans-serif;font-weight:800;
  font-size:clamp(19px,3.4vw,24px);line-height:1.3;color:#fff;
  letter-spacing:-.02em;margin-bottom:8px;
}
.keystone p{color:#C9D0E6;font-size:16.5px;line-height:1.68;margin:0}

/* ---------- שלושת הצעדים, עם מספרי-הענק ---------- */
.step{
  display:grid;grid-template-columns:auto minmax(0,1fr);
  gap:clamp(16px,3vw,28px);align-items:start;
  padding:34px 0;border-top:1px solid var(--line);
}
.step:first-of-type{border-top:0;padding-top:6px}
.step .n{
  font-family:'Rubik','Alef',sans-serif;font-weight:700;
  font-size:clamp(52px,10vw,86px);line-height:.8;color:var(--orange);
  letter-spacing:-.05em;
}
.step h3{margin-bottom:8px}
.step p{font-size:16.5px;color:var(--ink)}

/* ---------- מסגרות לצילומי המסך ---------- */
figure{margin:22px 0 0}
.shot{
  border:1px solid var(--line);border-radius:16px;overflow:hidden;
  box-shadow:var(--e1);background:var(--paper);
}
.shot.phone{width:min(320px,100%);margin-inline:auto;border-radius:22px}
.shot.wide{background:var(--navy)}
.bartop{
  display:flex;gap:6px;padding:9px 13px;background:var(--paper-2);
  border-bottom:1px solid var(--line);
}
.bartop i{width:9px;height:9px;border-radius:50%;background:#D4DCEC;display:block}
figcaption{
  margin-top:11px;font-size:14.5px;line-height:1.6;color:var(--ink-2);
  text-align:center;
}
figcaption b{color:var(--orange-2);font-weight:700}

/* ---------- שני הכרטיסים ---------- */
.two{display:grid;gap:16px;grid-template-columns:1fr}
@media(min-width:640px){.two{grid-template-columns:1fr 1fr}}
.card{
  background:var(--paper);border:1px solid var(--line);border-radius:var(--r);
  padding:24px;box-shadow:var(--e1);
}
.card .ico{font-size:24px;line-height:1;margin-bottom:12px}
.card h3{margin-bottom:8px}
.card p{font-size:16px;color:var(--ink)}
.card .when{
  margin-top:14px;background:var(--paper-2);border-radius:12px;
  padding:11px 14px;font-size:14.5px;color:var(--navy);line-height:1.55;
}
.card .when b{font-family:'Rubik','Alef',sans-serif;font-weight:700}

/* ---------- ארבע העובדות ---------- */
.facts{display:grid;gap:0;margin-top:6px}
.fact{padding:22px 0;border-bottom:1px solid var(--line)}
.fact:first-child{padding-top:4px}
.fact:last-child{border-bottom:0}
.fact h3{font-size:18px;margin-bottom:6px}
.fact p{font-size:16px;color:var(--ink-2)}

/* ---------- הערה כתומה ---------- */
.note{
  margin-top:26px;background:var(--orange-soft);
  border-inline-start:4px solid var(--orange);
  border-radius:0 14px 14px 0;padding:18px 20px;
  font-size:16px;line-height:1.65;color:var(--navy);
}
.note b{font-family:'Rubik','Alef',sans-serif;font-weight:700}
.tag{
  display:inline-block;background:var(--navy);color:#fff;border-radius:8px;
  padding:1px 9px;font-size:14.5px;font-weight:700;white-space:nowrap;
}

/* ---------- הקישורים ---------- */
.links{display:grid;gap:12px;margin-top:4px}
.link{
  background:var(--paper);border:1px solid var(--line);border-radius:16px;
  padding:18px 20px;box-shadow:var(--e1);
}
.link .lt{font-family:'Rubik','Alef',sans-serif;font-weight:700;color:var(--navy);
  font-size:17px;margin-bottom:3px}
.link .ld{font-size:15px;color:var(--ink-2);margin:0 0 11px}
.slot{
  display:block;background:var(--paper-2);border:1px dashed #C6D0E4;
  border-radius:11px;padding:11px 14px;font-size:14.5px;color:var(--ink-2);
}

a.slot{
  border-style:solid;border-color:#B9C6E0;background:#fff;text-decoration:none;
  direction:ltr;text-align:start;word-break:break-all;
  font-size:13px;line-height:1.55;color:var(--navy);
  transition:border-color .15s ease;
}
a.slot:hover,a.slot:focus-visible{border-color:var(--navy)}
a.slot .go{
  display:block;direction:rtl;text-align:start;word-break:normal;
  font-family:'Rubik','Alef',sans-serif;font-weight:600;font-size:14.5px;
  color:var(--ink-2);margin-bottom:7px;
}

/* ---------- הסיום ---------- */
.end{background:var(--navy);color:#C9D0E6;text-align:center}
.end h2{color:#fff}
.end p{font-size:17px;margin-top:16px}
.end .rule{margin-inline:auto}
