/* ==========================================================
   המדריך הקטן לצילום מהנייד
   שלב שלד. נייד בלבד.
   הכותרות והכתמים לפי הסקיל shovalga-blob-titles.
   ========================================================== */

@font-face{
  font-family:"ShovalgaHeadline";
  src:url("assets/fonts/ShovalgaHeadline.ttf") format("truetype");
  font-display:swap;
}

:root{
  --cream:#F9F4EA;
  --ink:#0D0A0A;
  --yellow:#FDBC11;
  --yellow-l:#FFE9B0;
  --blob-blue:#c1e2e9;
  --blob-turq:#57c6dd;
  --blob-sky:#ecf6f9;
  --sky-soft:#e6f3f7;

  --font-head:"ShovalgaHeadline","Assistant",sans-serif;
  --font-body:"Assistant","Arial Hebrew",Arial,sans-serif;

  /* כתמים אורגניים מצוירים ביד, נמתחים לפי גודל הטקסט */
  --blob-shape-a: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 100' preserveAspectRatio='none'%3E%3Cpath d='M6,54 C2,29 19,11 52,6 C92,0 143,2 174,9 C196,14 200,33 197,56 C194,80 174,95 137,97 C97,100 47,99 23,92 C6,87 9,71 6,54 Z' fill='%23000'/%3E%3C/svg%3E");
  --blob-shape-b: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 100' preserveAspectRatio='none'%3E%3Cpath d='M9,42 C13,17 36,4 74,3 C112,2 158,6 182,14 C199,20 202,42 196,63 C190,85 166,97 128,98 C88,99 43,95 22,86 C5,79 5,61 9,42 Z' fill='%23000'/%3E%3C/svg%3E");
  --blob-shape-c: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 100' preserveAspectRatio='none'%3E%3Cpath d='M4,58 C1,32 22,8 60,4 C99,0 149,5 178,13 C201,20 202,46 195,66 C187,88 161,98 122,99 C82,100 38,94 18,84 C3,76 6,72 4,58 Z' fill='%23000'/%3E%3C/svg%3E");
  --blob-shape-btn: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 100' preserveAspectRatio='none'%3E%3Cpath d='M87.53,0 Q88.53,0 120.61,3.34 Q152.69,6.68 165.12,10 Q177.54,13.33 181.7,16.66 Q185.87,20 189.21,23.33 Q192.55,26.66 194.42,29.99 Q196.29,33.33 197.64,36.66 Q198.99,39.99 199.45,43.33 Q199.92,46.66 199.88,49.99 Q199.83,53.32 199.44,56.66 Q199.04,59.99 198.25,63.32 Q197.45,66.65 195.58,69.98 Q193.72,73.32 189.53,76.64 Q185.35,79.97 179.19,83.31 Q173.04,86.65 153.1,89.97 Q133.16,93.3 115.95,96.64 Q98.75,99.98 97.37,99.98 Q95.99,99.98 70.16,96.64 Q44.33,93.3 37.77,89.97 Q31.2,86.65 25.67,83.31 Q20.15,79.97 15.79,76.64 Q11.44,73.32 8.79,69.98 Q6.13,66.65 4.23,63.32 Q2.33,59.99 1.21,56.66 Q0.09,53.32 0.26,49.99 Q0.43,46.66 0.91,43.33 Q1.39,39.99 2.72,36.66 Q4.05,33.33 5.02,29.99 Q5.98,26.66 6.39,23.33 Q6.81,20 9.35,16.66 Q11.88,13.33 22.08,10 Q32.27,6.68 59.41,3.34 Q86.54,0 87.53,0 Z' fill='%23000'/%3E%3C/svg%3E");
  /* גיליון נייר עם קצוות מתנדנדים, לפתקיות הבונוס */
  --paper-shape: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 120' preserveAspectRatio='none'%3E%3Cpath d='M3.5,5 C60,3.2 140,3.6 196.5,5.2 C197.8,5.3 198.4,6.2 198.3,7.5 C199,45 198.6,80 197.9,112.5 C197.85,113.8 197.1,114.6 195.8,114.7 C138,116.4 62,116 4.5,114.6 C3.2,114.55 2.6,113.8 2.65,112.5 C1.9,80 2.2,44 3,7.4 C3.05,6.1 2.3,5.1 3.5,5 Z' fill='%23000'/%3E%3C/svg%3E");
  --blob-shape-rect: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 100' preserveAspectRatio='none'%3E%3Cpath d='M16,6 C72,3.5 128,4 184,6 C190.5,6.4 196,11 195.5,17 C196.5,45 196,58 196,83 C196,89.5 190,94 183,94 C128,96.5 71,96 16,93.5 C9.5,93 4,89 4,83 C3.5,58 4,45 4.2,17 C4,11 10,6.2 16,6 Z' fill='%23000'/%3E%3C/svg%3E");

  --phone-w:min(68vw, 262px);
  --pad:22px;
  --r:18px;
}

*{box-sizing:border-box;margin:0;padding:0}
html{font-synthesis:none;-webkit-font-synthesis:none}
[hidden]{display:none !important}
html{scroll-behavior:smooth}
/* הקווים הגליים יוצאים מעט מעבר לקצה המסך, וכאן חוסמים גלילה אופקית */
html{overflow-x:clip}

body{
  background:var(--cream);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:18px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  /* clip ולא hidden: hidden הופך את הגוף למיכל גלילה,
     וכפתור שמגלגל לסעיף נתקע בו ולא מזיז את הדף */
  overflow-x:clip;
}

img,video{display:block;max-width:100%}
button,input{font:inherit;color:inherit}
button{background:none;border:none;cursor:pointer}

/* ==========================================================
   כותרות על כתמים
   ========================================================== */
.blob-title{
  position:relative;
  display:inline-block;
  font-family:var(--font-head);
  font-weight:400;
  font-size:min(50px, 12.8vw);
  line-height:.9;
  letter-spacing:-.012em;
  color:var(--ink);
  padding:10px 26px 7px;
  z-index:0;
  max-width:calc(100% - 12px);
}
.blob-title::before{
  content:"";
  position:absolute;inset:0;z-index:-1;
  background:var(--blob-blue);
  -webkit-mask-image:var(--blob-shape-a);mask-image:var(--blob-shape-a);
  -webkit-mask-size:100% 100%;mask-size:100% 100%;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
}
.blob-title.b::before{-webkit-mask-image:var(--blob-shape-b);mask-image:var(--blob-shape-b)}
.blob-title.c::before{-webkit-mask-image:var(--blob-shape-c);mask-image:var(--blob-shape-c)}

/* כותרת הפתיחה, כתב יד גדול ותת כותרת */
.blob-intro{
  position:relative;
  display:inline-block;
  text-align:center;
  padding-inline:36px;
  padding-top:16px;
  padding-bottom:23px;
  z-index:0;
  width:fit-content;
  max-width:calc(100% - 16px);
}
.blob-intro::before{
  content:"";
  position:absolute;inset:0;z-index:-1;
  background:var(--blob-blue);
  -webkit-mask-image:var(--blob-shape-rect);mask-image:var(--blob-shape-rect);
  -webkit-mask-size:100% 100%;mask-size:100% 100%;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
}
.blob-intro .title{
  display:block;
  font-family:var(--font-head);
  font-weight:400;
  font-size:min(60px, 15.4vw);
  line-height:.78;
  letter-spacing:-.012em;
  margin-bottom:0;
}
.blob-intro .sub{
  display:block;
  font-family:var(--font-body);
  font-weight:700;
  font-size:20px;
  line-height:1.25;
}

/* כתם קטן לכותרת משנה */
.mini-blob{
  position:relative;
  display:inline-block;
  font-family:var(--font-head);
  font-weight:400;
  font-size:min(36px, 9.2vw);
  line-height:.9;
  letter-spacing:-.03em;
  padding:.3em .78em .4em;
  z-index:0;
}
.mini-blob::before{
  content:"";
  position:absolute;inset:0;z-index:-1;
  background:var(--yellow);
  -webkit-mask-image:var(--blob-shape-b);mask-image:var(--blob-shape-b);
  -webkit-mask-size:100% 100%;mask-size:100% 100%;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
}

/* ==========================================================
   טיפוגרפיה של הגוף
   ========================================================== */
.lede{font-size:18px;max-width:296px}
.body{max-width:301px;line-height:1.48;margin-top:9px}
.body--big{font-size:1.12rem;line-height:1.9}

.hint{font-size:14px;opacity:.6}
.hint--lead{font-size:15px;opacity:.78;margin-top:2px}

.answer{
  min-height:4.4em;
  max-width:291px;
  line-height:1.55;
  font-weight:600;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
}
.answer{transition:opacity .15s ease}
.answer.is-swapping{opacity:0}
.answer .a1{font-weight:400}
.answer .a2{font-weight:700}
.answer--block{display:block;text-align:center}
.answer p{margin-bottom:.35em}
.answer p:last-child{margin-bottom:0}

.tip{
  position:relative;
  max-width:301px;
  font-size:18px;
  background:#fff;
  border-radius:var(--r);
  padding:14px 16px;
  box-shadow:0 2px 0 rgba(13,10,10,.06);
}
.tips{display:grid;gap:10px}

/* תיבת טיפ: רקע תכלת עדין, ועיגול מצויר ביד עם המילה טיפ בכתב היד */
.tip--note{
  background:var(--sky-soft);
  margin-top:14px;
  margin-inline:24px;
  width:calc(100% - 48px);   /* רוחב אחיד לכל תיבות הטיפ, גם כשהטקסט קצר */
  padding:22px 18px 18px;
  box-shadow:none;
}
.tip--note .tip__q{font-weight:700;margin-bottom:6px}

/* שתי הפסקאות שיש בהן שבירה ידנית באמצע. בלי זה נשארת בנייד
   מילה בודדת בשורה משלה, כי החצי הראשון ארוך מרוחב המסך. */
#s3 .body,#s5 .body{text-wrap:pretty}
/* עיגול הטיפ. כל המיקום והמידות יושבים בחמישה משתנים,
   כדי שהעורך (?badgeedit) יוכל לכוונן אותם בלי לדרוס את הסיבוב.
   העיגול נצמד למילה: הרוחב נגזר מהטקסט ומהאוויר שסביבו. */
:root{
  /* הערכים נמדדו בעורך החי ?badgeedit (25.8.2026) */
  --badge-air:12px;    /* האוויר בין המילה לקצה העיגול */
  --badge-font:48px;   /* גודל המילה */
  --badge-rot:9.5deg;  /* הנטייה */
  --badge-top:-22px;   /* כמה הוא עולה מעל התיבה */
  --badge-x:-24px;     /* כמה הוא יוצא הצידה */
  --badge-dy:-.02em;      /* הורדת המילה, כדי שהדיו יישב במרכז העיגול */
  --badge-ls:-.045em;   /* צמצום הרווח בין האותיות */
}
.tip__badge{
  position:absolute;
  top:var(--badge-top);inset-inline-start:var(--badge-x);
  width:auto;height:auto;
  aspect-ratio:1;
  padding-inline:var(--badge-air);
  display:grid;place-items:center;
  font-family:var(--font-head);
  font-size:var(--badge-font);line-height:1;
  color:var(--blob-turq);
  letter-spacing:var(--badge-ls);
  padding-top:var(--badge-dy);
  transform:rotate(var(--badge-rot));
  z-index:1;
}
.tip__badge::before{
  content:"";
  position:absolute;inset:0;z-index:-1;
  background:var(--cream);
  /* קו דק עם רעד קצר, אותו קו של מסגרת התיבה */
  border:1.8px solid var(--blob-turq);
  border-radius:50%;
  filter:url(#wob-fine);
}

/* משפט סיכום על כתם צהוב אורגני */
.sum{
  position:relative;
  display:inline-block;
  font-weight:700;
  font-size:20px;
  line-height:1.35;
  padding:15px 30px 16px;
  margin-top:8px;
  z-index:0;
  max-width:30ch;
}
.sum::before{
  content:"";
  position:absolute;inset:0;z-index:-1;
  background:var(--yellow-l);
  -webkit-mask-image:var(--blob-shape-rect);mask-image:var(--blob-shape-rect);
  -webkit-mask-size:100% 100%;mask-size:100% 100%;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
}

/* ==========================================================
   סיקווגל · קו החתימה של ShovalGA במעבר בין החלקים
   אותו מתכון של דף הנחיתה: פס לבן שקוף עבה, ולידו קו שחור דק מוסט.
   כל הערכים כאן, ונערכים בעורך החי ?sqedit.
   ========================================================== */
:root{
  --sq-h:72px;      /* גובה הקו. נמוך יותר = פחות גלי, יותר מתוח */
  --sq-mt:-24px;    /* מרווח מלמעלה */
  --sq-mb:-16px;    /* מרווח מלמטה */
  --sq-w:100vw;     /* רוחב הקו, ביחס לרוחב המסך */
  --sq-white:5;     /* עובי הפס הלבן */
  --sq-ink:1.6;     /* עובי הקו השחור */
  --sq-rot:7.5deg;  /* זווית. מגבירה את הנטייה למעלה בצד הגבוה */
}
.squig{
  width:var(--sq-w);
  max-width:none;
  /* מקצה לקצה של המסך: הקו יוצא מהריפוד של הדף ונשאר ממורכז */
  margin:var(--sq-mt) calc(50% - var(--sq-w) / 2) var(--sq-mb);
  line-height:0;
  /* ערך חיובי מגביר את הנטייה למעלה בצד הגבוה של הקו */
  transform:rotate(calc(-1 * var(--sq-rot)));
}
/* הקו שהצד השמאלי שלו גבוה מקבל את הזווית ההפוכה, שהנטייה תישאר סימטרית */
.squig[data-squig="b"]{transform:rotate(var(--sq-rot))}
.squig svg{display:block;width:100%;height:var(--sq-h);overflow:visible}
.squig .sq-white{stroke:rgba(255,255,255,.7);stroke-width:var(--sq-white)}
.squig .sq-ink{stroke:var(--ink);stroke-width:var(--sq-ink)}
.squig path{fill:none;stroke-linecap:round}

/* הקו נמשך לכיוון שלו כשמגיעים אליו בגלילה */
.squig.draw path{
  stroke-dasharray:var(--len) var(--len);
  stroke-dashoffset:var(--len);
}
.squig.draw.is-in path{
  stroke-dashoffset:0;
  transition:stroke-dashoffset 1.15s cubic-bezier(.42,0,.28,1);
}
@media (prefers-reduced-motion:reduce){
  .squig.draw path{stroke-dasharray:none;stroke-dashoffset:0}
}
/* סיקווגל עם נשימה. לקווים שמעל ומתחת "עכשיו את מצלמת",
   כדי שלחלק הקצר יהיה אוויר מסביב */
.squig--air{
  --sq-mt:22px;
  --sq-mb:22px;
}

/* סיקווגל פנימי בתוך חלק, מפריד רך לפני בלוק הבונוס */
.squig--in{
  --sq-h:54px;
  --sq-rot:5deg;
  /* אוויר לנשימה מעל ומתחת */
  margin-top:38px;
  margin-bottom:38px;
}

/* בעורך החי מכבים את ההנפשה. אחרת כל הזזת פס תופסת את הקו באמצע המשיכה */
body.sqedit-on .squig.draw path{
  stroke-dasharray:none !important;
  stroke-dashoffset:0 !important;
  transition:none !important;
}

.linkline a{color:var(--ink);text-decoration-color:var(--blob-turq);text-underline-offset:4px;font-weight:600;font-size:.92rem}


/* ==========================================================
   מבנה סעיף
   ========================================================== */
main{padding-inline:var(--pad)}

.sec{
  min-height:100svh;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  gap:16px;
  padding-block:56px;
}
.sec--intro{gap:16px}

.logo{width:88px;height:auto}
.logo--sm{width:56px}

/* ==========================================================
   כפתורים
   ========================================================== */
.btn{
  position:relative;
  min-height:48px;
  padding:12px 30px;
  font-weight:700;
  z-index:0;
}
.btn::before{
  content:"";
  position:absolute;inset:0;z-index:-1;
  background:var(--yellow);
  -webkit-mask-image:var(--blob-shape-btn);mask-image:var(--blob-shape-btn);
  -webkit-mask-size:100% 100%;mask-size:100% 100%;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
}
.btn:active{transform:translateY(2px)}
.btn--big{font-size:1.1rem;padding:14px 38px}

.pills{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.pill{
  min-height:44px;
  padding:10px 18px;
  border-radius:30px 26px 30px 24px / 26px 30px 24px 30px;
  background:#fff;
  border:2px solid rgba(13,10,10,.12);
  font-weight:600;font-size:.95rem;
}
.pill.is-on{background:var(--blob-blue);border-color:var(--ink)}
.pill--play .ico{
  display:inline-block;width:0;height:0;
  border-style:solid;
  border-width:6px 0 6px 9px;
  border-color:transparent transparent transparent var(--ink);
  margin-inline-start:8px;vertical-align:middle;
}
.pill--play.is-playing .ico{
  width:10px;height:11px;border:none;background:var(--ink);border-radius:2px;
}

.scrollhint{opacity:.45;animation:bob 1.8s ease-in-out infinite}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(6px)}}

/* ==========================================================
   מוקאפ הטלפון
   ========================================================== */
.phone{
  position:relative;
  width:var(--phone-w);
  aspect-ratio:300/542;
  flex:none;
  margin-top:14px;
}
.phone::after{
  content:"";
  position:absolute;inset:0;
  border:2.6px solid var(--ink);
  border-radius:36px;
  filter:url(#wob-fine);
  pointer-events:none;
  z-index:4;
}
.phone__speaker{
  position:absolute;
  top:1.6%;left:50%;
  width:24%;height:4px;
  transform:translateX(-50%);
  background:var(--ink);
  border-radius:4px;
  filter:url(#wob-fine);
  opacity:.85;z-index:5;
}
.phone__screen{
  position:absolute;
  left:3.333%;right:3.333%;
  top:4.059%;bottom:4.059%;
  border-radius:22px;
  overflow:hidden;
  background:#e9e3d6;
}

/* ---------- 1. לפני ואחרי ---------- */
.ba{position:absolute;inset:0;touch-action:none;--p:50}
.ba__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ba__img--top{clip-path:inset(0 0 0 calc(var(--p) * 1%))}
.ba__handle{
  position:absolute;top:0;bottom:0;
  left:calc(var(--p) * 1%);
  width:3px;background:var(--cream);
  transform:translateX(-1.5px);
  z-index:3;
}
.ba__grip{
  position:absolute;top:50%;left:50%;
  width:44px;height:44px;
  transform:translate(-50%,-50%);
  background:var(--cream);
  border:2.5px solid var(--ink);
  border-radius:50%;
}
.ba__grip::before,.ba__grip::after{
  content:"";position:absolute;top:50%;
  width:0;height:0;border-style:solid;
}
.ba__grip::before{left:7px;transform:translateY(-50%);border-width:6px 8px 6px 0;border-color:transparent var(--ink) transparent transparent}
.ba__grip::after{right:7px;transform:translateY(-50%);border-width:6px 0 6px 8px;border-color:transparent transparent transparent var(--ink)}
.ba__tag{
  position:absolute;top:12px;
  background:rgba(249,244,234,.9);
  padding:3px 10px;border-radius:20px;
  font-size:.75rem;font-weight:700;z-index:2;
}
.ba__tag--r{right:12px}
.ba__tag--l{left:12px}

/* ---------- החלפת תמונות ---------- */
.stack{position:absolute;inset:0}
.stack__img,.stack > .ph{
  position:absolute;inset:0;
  width:100%;height:100%;object-fit:cover;
  opacity:0;transition:opacity .25s ease;
}
.stack__img.is-on,.stack > .ph.is-on{opacity:1}

/* ---------- 3. חיתוך ---------- */
.crop{position:absolute;inset:0;touch-action:none;cursor:grab}
.crop:active{cursor:grabbing}
.crop__img{
  position:absolute;top:50%;left:50%;
  transform:translate(-50%,-50%) translate(var(--x,0px),var(--y,0px)) scale(var(--s,1));
  max-width:none;
  opacity:0;pointer-events:none;
  transition:opacity .2s ease;
}
.crop__img.is-on{opacity:1}

/* הדמות ממלאת את רוב הפריים, אז החלון גבוה. */
.crop__img[data-key="person"]{height:112%;width:auto}
/* המוצר קטן בפריים, אז אפשר להזיז אותו בין השלישים. */
.crop__img[data-key="product"]{height:66%;width:auto}

.crop__win{
  position:absolute;top:50%;left:50%;
  transform:translate(-50%,-50%);
  width:86%;aspect-ratio:9/16;
  border:2px solid rgba(249,244,234,.95);
  box-shadow:0 0 0 999px rgba(249,244,234,.66);
  pointer-events:none;z-index:2;
}
.crop[data-key="product"] .crop__win{aspect-ratio:4/5}

/* שורת הגדלה מתחת לטלפון: מינוס, תווית, פלוס */
.zoom{display:flex;align-items:center;gap:10px;margin-top:10px}
.zoom__lbl{font-size:14px;font-weight:600;opacity:.6}
.zbtn{
  width:38px;height:38px;
  display:grid;place-items:center;
  font-size:20px;font-weight:700;line-height:1;
  color:var(--ink);
  background:#fff;
  border:1.8px solid var(--ink);
  border-radius:50%;
  filter:url(#wob-fine);
  cursor:pointer;
}
.zbtn:active{transform:translateY(1px)}
.zbtn:disabled{opacity:.35;cursor:default}

.crop__ratio{
  position:absolute;bottom:10px;left:50%;
  transform:translateX(-50%);
  background:rgba(249,244,234,.92);
  padding:2px 12px;border-radius:20px;
  font-size:.72rem;font-weight:700;
  direction:ltr;z-index:3;pointer-events:none;
}
.g{position:absolute;background:rgba(249,244,234,.75)}
.g--v1,.g--v2{top:0;bottom:0;width:1px}
.g--v1{left:33.333%}
.g--v2{left:66.666%}
.g--h1,.g--h2{left:0;right:0;height:1px}
.g--h1{top:33.333%}
.g--h2{top:66.666%}

/* ---------- 4. גלריית יציבות ---------- */
/* ---------- קרוסלה אופקית, תמונה אחת גדולה והבאה מציצה ---------- */
.carousel{
  width:calc(100% + var(--pad) * 2);
  margin-inline:calc(var(--pad) * -1);
}
.carousel__track{
  --slide:min(72vw, 320px);
  display:flex;
  gap:12px;
  overflow-x:auto;
  overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;
  scroll-behavior:smooth;
  padding-inline:calc((100% - var(--slide)) / 2);
  padding-block:2px 4px;
  scrollbar-width:none;
  -ms-overflow-style:none;
}
.carousel__track::-webkit-scrollbar{display:none}
.slide{
  flex:0 0 var(--slide);
  scroll-snap-align:center;
  opacity:.55;
  transform:scale(.94);
  transition:opacity .28s ease, transform .28s ease;
}
.slide.is-on{opacity:1;transform:scale(1)}
.slide .ph{width:100%;box-shadow:0 3px 0 rgba(13,10,10,.06)}
.slide figcaption{font-size:.85rem;font-weight:600;padding-top:8px;text-align:center}

.dots{display:flex;justify-content:center;gap:8px;margin-top:12px}
.dots button{
  width:9px;height:9px;padding:0;
  border-radius:50%;
  background:rgba(13,10,10,.16);
  transition:background .2s ease, transform .2s ease;
}
.dots button.is-on{background:var(--yellow);transform:scale(1.3)}

.subblock{
  display:flex;flex-direction:column;align-items:center;gap:14px;
  padding-top:30px;margin-top:22px;
  border-top:2px dotted rgba(13,10,10,.15);
  width:100%;
}

.vid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

/* ---------- 6. גילוי הפריים ---------- */
.reveal{position:absolute;inset:0;cursor:pointer}
.reveal .vid{z-index:1}
.reveal__scrim{
  position:absolute;left:0;right:0;bottom:0;height:44%;
  z-index:2;pointer-events:none;
  background:linear-gradient(to top, rgba(13,10,10,.52), rgba(13,10,10,0));
  transition:opacity .3s;
}
.reveal.is-playing .reveal__scrim{opacity:0}

.reveal__cue{
  position:absolute;bottom:15px;left:50%;
  transform:translateX(-50%);
  z-index:3;
  display:inline-flex;align-items:center;gap:7px;
  white-space:nowrap;
  font-size:14.5px;font-weight:700;line-height:1;
  background:rgba(249,244,234,.95);
  color:var(--ink);
  border:2.5px solid var(--ink);
  border-radius:999px;
  padding:9px 13px 10px;
  animation:cueBob 2.4s ease-in-out infinite;
  transition:opacity .2s;
}
.reveal.is-playing .reveal__cue{opacity:0;pointer-events:none;animation:none}
.reveal.is-done .reveal__cue{animation:none}
.reveal__cue .i-tap{flex:none}
.reveal__t2{display:none}
.reveal.is-done .reveal__t1{display:none}
.reveal.is-done .reveal__t2{display:inline}
@keyframes cueBob{
  0%,100%{transform:translateX(-50%) translateY(0)}
  50%{transform:translateX(-50%) translateY(-4px)}
}

.reveal__bar{
  position:absolute;left:0;right:0;bottom:0;height:4px;z-index:4;
  background:rgba(13,10,10,.16);
  pointer-events:none;
}
.reveal__bar i{
  display:block;height:100%;
  background:var(--yellow);
  transform:scaleX(0);
  transform-origin:right center;
}

/* ---------- כפתור ניגון (חלק 5) ---------- */
.playbtn{
  position:absolute;top:50%;left:50%;
  transform:translate(-50%,-50%);
  width:62px;height:62px;
  display:grid;place-items:center;
  background:rgba(249,244,234,.92);
  border:1.8px solid var(--ink);
  border-radius:50%;
  filter:url(#wob-fine);
  z-index:3;
  padding-inline-start:4px;
}
.playbtn.is-hidden{opacity:0;pointer-events:none;transition:opacity .2s}
.playbtn svg{grid-area:1/1}
.playbtn .i-pause{display:none}
.playbtn.is-playing{padding-inline-start:0}
.playbtn.is-playing .i-play{display:none}
.playbtn.is-playing .i-pause{display:block}

/* ---------- 5. פריים קפוא של הקלטה ---------- */
.shot{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.scrim{
  position:absolute;inset:0;z-index:2;
  background:radial-gradient(60% 40% at 50% 50%, rgba(13,10,10,.26), rgba(13,10,10,0) 70%);
  pointer-events:none;
}

/* ---------- בונוס בסוף חלק 6: שתי פתקיות מודבקות ---------- */
.bonus{
  display:flex;
  flex-direction:column;
  align-items:center;
  width:100%;
  margin-top:0;
}
/* כותרת הבונוס על כתם תכלת, באותה שפה של כותרות החלקים */
.bonus__kicker{
  position:relative;
  display:inline-block;
  font-family:var(--font-head);
  font-weight:400;
  font-size:min(50px, 12.8vw);
  line-height:.9;
  letter-spacing:-.012em;
  padding:10px 26px 7px;
  z-index:0;
  max-width:calc(100% - 12px);
}
.bonus__kicker::before{
  content:"";
  position:absolute;inset:0;z-index:-1;
  background:var(--blob-blue);
  -webkit-mask-image:var(--blob-shape-b);mask-image:var(--blob-shape-b);
  -webkit-mask-size:100% 100%;mask-size:100% 100%;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
}
.bonus__lede{
  max-width:340px;
  margin-top:12px;
  font-size:16px;
  line-height:1.45;
  opacity:.72;
}

/* הפתקיות: אחת מעל השנייה, התחתונה מודבקת בטייפ שנוגע בעליונה */
.notes{
  width:100%;
  max-width:318px;
  margin-top:36px;
  display:flex;
  flex-direction:column;
  align-items:center;
}

/* העוטף מחזיק את ההצללה ואת הטייפ, כדי שהצל ילך לפי קצה הנייר */
.snote-wrap{
  position:relative;
  width:100%;
  filter:drop-shadow(0 4px 6px rgba(13,10,10,.17));
}
/* העליונה נשארת מעל, ככה הקצה שלה יושב על הטייפ של התחתונה ונראה מודבק מעליה */
.snote-wrap--1{z-index:2}
.snote-wrap--2{margin-top:7px;z-index:1}

.snote{
  padding:28px 20px 24px;
  text-align:center;
  color:var(--ink);
  background:
    linear-gradient(178deg, rgba(255,255,255,.5), rgba(255,255,255,0) 34%),
    linear-gradient(200deg, #F7F2E6 0%, #F4EDDF 62%, #F0E7D6 100%);
  -webkit-mask-image:var(--paper-shape);mask-image:var(--paper-shape);
  -webkit-mask-size:100% 100%;mask-size:100% 100%;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
}
.snote-wrap--1 .snote{transform:rotate(-2.3deg)}
.snote-wrap--2 .snote{transform:rotate(1.9deg)}

/* מסקנטייפ אמיתי של שובל, assets/img/tape.webp
   כל המיקום יושב בארבעה משתנים, כדי שהעורך החי (?tapeedit) יוכל להזיז ולסובב אותו */
.tape{
  position:absolute;
  top:0;
  left:50%;
  width:var(--tw, 116px);
  aspect-ratio:520/170;
  transform:translate(calc(-50% + var(--tx, 0px)), var(--ty, 0px)) rotate(var(--tr, 0deg));
  background:url("assets/img/tape.webp") center/100% 100% no-repeat;
}
.snote-wrap--1 .tape{--tx:0px; --ty:-16px; --tr:-2.6deg; --tw:116px}
/* הערכים נמדדו על ידי שובל בעורך החי (?tapeedit) */
.snote-wrap--2 .tape{--tx:6px; --ty:-11px; --tr:3.2deg;  --tw:116px}

.snote__t{
  font-family:var(--font-head);
  font-weight:400;
  font-size:42px;
  line-height:1;
  letter-spacing:-.012em;
}
.snote__p{
  margin-top:-4px;
  font-size:17px;
  line-height:1.5;
}

/* ---------- 8. סיום ---------- */
.done{
  position:relative;
  display:inline-block;
  font-weight:700;
  padding:.8em 1.5em .9em;
  z-index:0;max-width:30ch;
}
.done::before{
  content:"";
  position:absolute;inset:0;z-index:-1;
  background:var(--blob-blue);
  -webkit-mask-image:var(--blob-shape-c);mask-image:var(--blob-shape-c);
  -webkit-mask-size:100% 100%;mask-size:100% 100%;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
}

/* ---------- הכרטיסייה ---------- */
.sec--card{gap:18px}

/* הכותרת יושבת בשורה אחת, אז היא קצת קטנה יותר מכותרת רגילה */
.sec--card .blob-title{
  white-space:nowrap;
  font-size:min(44px, 11.1vw);
  padding-inline:20px;
}

/* התמונה של הכרטיסייה. רואים שהיא קיימת, ורואים חלק מהתוכן,
   והקצה התחתון נמוג אל תוך הקרם, כדי שברור שיש בה עוד. */
/* העוטף מחזיק את הנטייה ואת המסגרת. התמונה נחתכת בתוכו,
   ולכן המסגרת חיה מחוץ לחיתוך ויכולה לרעוד בלי להיקטע. */
.cardwrap{
  position:relative;
  width:fit-content;
  margin-inline:auto;
  transform:rotate(-2.4deg);
  /* רווח זהה מעל ומתחת, כדי שהכרטיסייה תעמוד בפני עצמה */
  margin-top:26px;
  margin-bottom:26px;
}
.cardwrap::after{
  content:"";
  position:absolute;inset:0;
  border:1.8px solid var(--ink);
  border-radius:16px;
  filter:url(#wob-fine);
  pointer-events:none;
  z-index:2;
}
.cardshot{
  position:relative;
  width:min(56vw,208px);
  aspect-ratio:9/13;
  overflow:hidden;
  border-radius:16px;
  box-shadow:0 12px 26px rgba(13,10,10,.14), 0 2px 0 rgba(13,10,10,.06);
  display:block;
}
.sec--card .body{margin-top:0}
.cardshot img{width:100%;height:auto;display:block}
.cardshot::after{
  content:"";
  position:absolute;left:0;right:0;bottom:0;height:38%;
  background:linear-gradient(to bottom, rgba(249,244,234,0) 0%, rgba(249,244,234,.9) 72%, var(--cream) 100%);
  pointer-events:none;
}

.mail{display:flex;flex-direction:column;align-items:center;gap:12px;width:100%;max-width:320px;margin-top:28px}

/* השורה שמסבירה בשביל מה המייל. שורה אחת ברוחב תיבת המייל,
   וכהה יותר משורת האישור שמתחתיה */
.mail__ask{
  font-size:13.5px;
  font-weight:700;
  line-height:1.45;
  opacity:.82;
  max-width:320px;
  /* צמודה לתיבת המייל. הפער כאן מקזז את ה gap של הטופס */
  margin-bottom:-6px;
}

/* אישור קבלת דיוור. תיבת סימון מצוירת ביד, מתחת לתיבת המייל.
   הכפתור נפתח רק אחרי שהיא מסמנת. */
.agree{
  display:flex;align-items:flex-start;gap:10px;
  width:100%;max-width:290px;
  text-align:start;cursor:pointer;
  /* נשימה לפני כפתור השליחה */
  margin-bottom:22px;
}
.agree__in{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.agree__box{flex:none;width:21px;height:21px;display:block;margin-top:2px}
.agree__box .tick{opacity:0;transition:opacity .15s ease}
.agree__in:checked + .agree__box .tick{opacity:1}
.agree__t{font-size:13.5px;line-height:1.42;opacity:.62}
.agree__in:checked ~ .agree__t{opacity:.85}
.agree__in:focus-visible + .agree__box{outline:2px solid var(--blob-turq);outline-offset:3px;border-radius:6px}

.btn:disabled{opacity:.38;cursor:default}
.btn:disabled:active{transform:none}

/* הכרטיסייה נחשפת מיד אחרי השליחה, כדי שאפשר יהיה לשמור אותה בלי לחכות למייל */
.got{display:flex;flex-direction:column;align-items:center;gap:12px;margin-top:8px}
.got__img{
  width:min(58vw,214px);
  border-radius:14px;
  box-shadow:0 10px 24px rgba(13,10,10,.15);
}

.mail__input{
  width:100%;min-height:50px;
  padding:12px 16px;
  background:#fff;
  border:2px solid rgba(13,10,10,.15);
  border-radius:16px;
  text-align:start;
}
.mail__input:focus{outline:none;border-color:var(--blob-turq)}

/* ---------- 10. הגדרות ---------- */
/* התיבה יושבת במסגרת דקה מצוירת ביד, באותו משקל של הסיקווגל,
   במקום מלבן ישר עם הצללה */
.acc{
  width:100%;max-width:340px;
  background:var(--cream);border-radius:var(--r);
  padding:4px 24px;text-align:start;
  position:relative;
}
.acc::after{
  content:"";
  position:absolute;inset:0;
  border:1.8px solid var(--ink);
  border-radius:20px;
  filter:url(#wob-fine);
  pointer-events:none;
}
/* כשהיא פתוחה הקו מתחזק קצת, וככה ברור מה פעיל בלי צבע ובלי צל */
.acc[open]::after{border-width:2.4px}
.acc summary{
  min-height:52px;display:flex;align-items:center;
  font-weight:700;cursor:pointer;list-style:none;
}
.acc summary::-webkit-details-marker{display:none}
/* פלוס ומינוס מצוירים, בעיגול, באותה שפה של החצים בקרוסלה.
   שני קווים כרקע, כדי שהפילטר יוכל לרעוד גם אותם. */
.acc summary::after{
  content:"";
  margin-inline-start:auto;
  flex:none;
  width:32px;height:32px;
  border:1.8px solid var(--ink);
  border-radius:50%;
  background-image:
    linear-gradient(var(--ink), var(--ink)),
    linear-gradient(var(--ink), var(--ink));
  background-size:13px 1.8px, 1.8px 13px;
  background-position:center;
  background-repeat:no-repeat;
  filter:url(#wob-fine);
  opacity:.85;
}
/* פתוחה: רק הקו האופקי נשאר */
.acc[open] summary::after{content:"";background-size:13px 1.8px, 0 0}
.acc__body{padding-bottom:15px;font-size:16.5px;line-height:1.55;opacity:.88}

/* מתקפל שיושב בתוך פרק, ולא רק בחלק ההגדרות */
.acc--solo{max-width:301px;margin-top:16px}
.acc--solo .acc__body p{margin-bottom:10px;line-height:1.5}
.acc--solo .acc__body p:last-child{margin-bottom:0}

/* קו צהוב דק שפותח את תחתית המדריך, באותו עובי של הקווים ברשימת האבחון */
.foot-rule{
  /* יוצא מהריווח הצדדי של הדף ונוגע בשני קצות המסך */
  align-self:stretch;
  width:auto;max-width:none;
  margin-inline:calc(var(--pad) * -1);
  margin-top:260px;margin-bottom:0;
  height:1px;border:0;border-radius:0;
  background:var(--yellow);
}
.foot{display:flex;flex-direction:column;align-items:center;gap:9px;padding-top:0}
.foot__who{display:flex;flex-direction:column;align-items:center;gap:1px}
.foot__name{font-weight:700;font-size:16.5px;opacity:.7}
/* התיוג לחיץ, עם קו צהוב דק מתחתיו */
.foot__handle{
  position:relative;
  display:inline-block;
  font-weight:700;
  font-size:17px;
  line-height:1.2;
  direction:ltr;
  color:var(--ink);
  text-decoration:none;
  opacity:.7;
  -webkit-tap-highlight-color:transparent;
}
.foot__handle:active{opacity:.6}

/* ---------- ריבוע אפור לקובץ שעוד לא צולם ---------- */
.ph{position:relative;background:#e4ded1;border-radius:12px;overflow:hidden}
.ph::after{
  content:attr(data-need);
  position:absolute;inset:0;
  display:grid;place-items:center;
  padding:8px;
  font-size:.72rem;font-weight:700;
  color:rgba(13,10,10,.45);
  text-align:center;
  direction:ltr;
  z-index:0;
}
.ph img{position:relative;z-index:1;width:100%;height:100%;object-fit:cover}
.ph--sq{aspect-ratio:1}
.ph--fill{position:absolute;inset:0;border-radius:0}

/* ---------- סרגל התקדמות, קו מצויר ביד ---------- */
.rail{
  position:fixed;
  left:6px;top:50%;
  transform:translateY(-50%);
  width:34px;height:min(62svh,460px);
  z-index:20;
  pointer-events:none;
  transition:opacity .35s ease;
}
/* המסלול הראשי נגמר בכרטיסייה, ובאזור הבונוס הסרגל מפנה את המקום */
.rail.is-done{opacity:0}
.rail svg{width:100%;height:100%;display:block;overflow:visible}
.rail .line{stroke:var(--ink);stroke-width:1.5;opacity:.26}
.rail .fill{
  stroke:var(--yellow);stroke-width:2.6;
  transition:stroke-dashoffset .55s ease;
}
.rail .stop .dot{
  fill:var(--cream);stroke:var(--ink);stroke-width:1.4;
  transform-box:fill-box;transform-origin:center;
  transition:transform .35s ease,fill .35s ease,opacity .25s ease;
}
.rail .stop .tick{opacity:0;transition:opacity .3s ease}
.rail .stop.is-past .dot{opacity:0}
.rail .stop.is-past .tick{opacity:1}
.rail .stop.is-now .dot{fill:var(--yellow);transform:scale(1.55)}

.defs{position:absolute;width:0;height:0;overflow:hidden}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .answer{transition:none}
  .stack__img,.stack > .ph{transition:none}
  .scrollhint{animation:none}
  .reveal__cue{animation:none}
}

/* ==========================================================
   נעילות הפתיחה. הערכים נמדדו על ידי שובל בעורך החי (?medit).
   הגדלים עצמם אחידים לכל המדריך, ויושבים למעלה בקובץ.
   ========================================================== */
.sec--intro .logo{width:88px;margin-bottom:22px}
.sec--intro .blob-intro{
  margin-top:0;
  padding-inline:28px;
  padding-top:16px;
  padding-bottom:20px;
}
.sec--intro .blob-intro .title{line-height:.78}
.sec--intro .blob-intro .sub{margin-top:4px}
.sec--intro .lede{margin-top:27px}
.sec--intro .btn{
  font-size:18px;
  margin-top:42px;
  padding-inline:21px;
  padding-top:10px;
  padding-bottom:12px;
}

/* סעיף קצר: בלי מסך שלם של רווח מסביב */
.sec--tight{
  min-height:auto;
  padding-block:56px;
  gap:16px;
}
.sec--tight .sum{
  margin-top:2px;
  max-width:36ch;
  /* טיפה גדול יותר, זה משפט הסיום של המדריך */
  font-size:22px;
  /* ריפוד קרוב יותר לשל כתם הכותרת */
  padding:12px 24px 13px;
}

/* חלק 6. הכותרת בשתי שורות, שורות קצת יותר צמודות ואוויר מעל הטקסט בכתם */
#s6 .blob-title{line-height:.82;padding-top:16px}
#s6 .tip--note{padding-bottom:24px}

/* כותרת עם אייקון לידה */
.titlerow{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
}
.titlerow .blob-title{
  margin:0;
  min-width:0;
  padding-inline:39px;
  /* אוויר אנכי נדיב יותר, כדי שהכתם הגדול לא יהיה הצפוף מבין השניים */
  padding-block:15px 12px;
  transform:translate(25px, -1px);
}
.titlerow .blob-title::before{
  -webkit-mask-image:var(--blob-shape-soft);
  mask-image:var(--blob-shape-soft);
}
.titlerow .bt-txt{transform:translate(-14px, -1px)}
.titleico{
  display:block;
  width:39px;
  flex:none;
  /* שכבה עליונה, כדי שהציור ישב מעל הכתם */
  position:relative;
  z-index:3;
  transform:translate(-40px, -3px);
}
/* הנטייה יושבת על הציור עצמו,
   כדי שהעורך החי יוכל להזיז את המסגרת בלי לאבד אותה */
.titleico svg{width:100%;height:auto;display:block;transform:rotate(-7deg)}

/* מילות הכותרת כשכבה משלהן,
   כדי שאפשר יהיה להזיז אותן בתוך הכתם */
.blob-title .bt-txt{display:inline-block}

/* כתם שבין העגלגל למלבני: צדדים ישרים יותר, פינות שנשארו מצוירות ביד */
:root{
  --blob-shape-soft: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 100' preserveAspectRatio='none'%3E%3Cpath d='M26,7 C80,3.2 124,2.6 176,7 C188.5,8 196.5,17 196,29.5 C198,48 198.5,57 196,73 C195,86.5 186.5,93.5 173,94.5 C120,97.4 77,97 25,94 C11.5,93 3.6,85 4,72 C2,54 1.8,44 4.2,28 C5,15 13,8 26,7 Z' fill='%23000'/%3E%3C/svg%3E");
}


/* ---------- טאבים קטנים בתוך מתקפל: אייפון או אנדרואיד ---------- */
/* אותה הגדרה, שתי דרכים. לכן סעיף אחד עם שתי לשוניות. */
.acc__body--tabs{opacity:1}
.ostabs{
  display:grid;
  grid-template-columns:auto auto 1fr;
  gap:8px;
  margin-top:2px;
}
.ostabs__in{display:none}
.ostabs__tab{
  position:relative;
  display:block;
  width:fit-content;
  text-align:center;
  font-family:var(--font-body);
  font-weight:700;
  font-size:16px;
  line-height:1;
  padding:11px 17px 12px;
  cursor:pointer;
  opacity:.5;
  z-index:0;
  transition:opacity .18s ease;
  -webkit-tap-highlight-color:transparent;
}
.ostabs__tab::before{
  content:"";
  position:absolute;inset:0;z-index:-1;
  background:var(--yellow);
  opacity:0;
  -webkit-mask-image:var(--blob-shape-soft);mask-image:var(--blob-shape-soft);
  -webkit-mask-size:100% 100%;mask-size:100% 100%;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  transition:opacity .18s ease;
}
.ostabs__in--i:checked ~ .ostabs__tab--i,
.ostabs__in--a:checked ~ .ostabs__tab--a{opacity:1}
.ostabs__in--i:checked ~ .ostabs__tab--i::before,
.ostabs__in--a:checked ~ .ostabs__tab--a::before{opacity:1}
.ostabs__p{
  grid-column:1 / -1;
  display:none;
  padding-top:12px;
}
.ostabs__in--i:checked ~ .ostabs__p--i,
.ostabs__in--a:checked ~ .ostabs__p--a{display:block}
/* שורה אחת שנכונה לשתי המערכות, ולכן יושבת מתחת ללשוניות */
.ostep{margin-bottom:7px;font-size:16.5px;line-height:1.55;font-weight:700}
.ostep:last-child{margin-bottom:0}
/* החץ בין הצעדים, דק ולא צועק */
.oarr{
  display:inline-block;
  margin-inline:5px;
  font-weight:400;
  opacity:.42;
  transform:translateY(-1px);
}
/* השורה המשנית שמתחת להוראה */
.onote{
  margin-top:10px;
  padding-top:10px;
  border-top:1px solid rgba(13,10,10,.12);
  font-size:15px;
  line-height:1.5;
  font-weight:400;
  opacity:.66;
}

/* כותרת הבונוס שבסוף: כתב יד ותת כותרת, טיפה קטנה משל הפתיחה */
.sec--set{min-height:auto;gap:11px;padding-block:44px 26px}
.sec--set .blob-intro{padding-inline:32px;padding-top:15px;padding-bottom:21px}
.sec--set .blob-intro .title{font-size:min(52px, 13.4vw);line-height:.8}
.sec--set .blob-intro .sub{font-size:19px;margin-top:3px}
.sec--set .body{margin-top:14px}
.sec--set .acc--solo{max-width:340px;margin-top:6px}

/* ==========================================================
   סיום המדריך: משפט אישי וכפתור לוואטסאפ
   יושב אחרי הבונוס ולפני הקו והתחתית
   ========================================================== */
.outro{
  display:flex;
  flex-direction:column;
  align-items:center;
  margin-top:74px;
}
/* השורה שסוגרת את המדריך, בבולד */
.outro__t{
  max-width:301px;
  font-size:19px;
  font-weight:700;
  line-height:1.45;
}
/* ההזמנה עצמה, קלה יותר כדי שהבולט שמעליה יוביל */
.outro__s{
  max-width:312px;
  margin-top:9px;
  font-size:16.5px;
  font-weight:300;
  line-height:1.6;
  opacity:.78;
}
.outro__btn{
  margin-top:37px;
  text-decoration:none;
  color:var(--ink);
  -webkit-tap-highlight-color:transparent;
}
/* הכפתור כבר סוגר את הסעיף, אז הנשימה עד הקו קצרה מהרגיל */
.outro + .foot-rule{margin-top:112px}

/* ==========================================================
   כפתור בכתב היד, עם תנועה קטנה שמזמינה ללחיצה
   ========================================================== */
/* כתב היד גדול מטבעו, ולכן הכפתור גדל איתו */
.btn--hand{
  font-family:var(--font-head);
  font-weight:400;
  font-size:30px;
  line-height:1;
  /* כתב היד יושב גבוה בתיבת האות, ולכן יש יותר אוויר מלמעלה */
  padding:22px 44px 20px;
  min-height:64px;
}
/* האייקון והמילים בשורה אחת, עם מרווח שמרגיש מצויר ולא מודבק */
.btn__row{display:inline-flex;align-items:center;justify-content:center;gap:12px}
/* בלי transform כאן, כדי שהגרירה בעורך תתחיל מאפס */
.btn__ico{width:36px;height:auto;display:block;flex:none;margin-top:-2px}

/* התעוררות פעם אחת כשמגיעים לכפתור, ואחריה נשימה איטית שממשיכה להזמין */
@keyframes btn-wake{
  0%{transform:translateY(11px) rotate(-2.4deg)}
  52%{transform:translateY(-5px) rotate(1.5deg)}
  76%{transform:translateY(2px) rotate(-.8deg)}
  100%{transform:translateY(0) rotate(0)}
}
@keyframes btn-breathe{
  0%,100%{transform:translateY(0) rotate(0)}
  50%{transform:translateY(-4px) rotate(-1deg)}
}
@media (prefers-reduced-motion: no-preference){
  .btn--wake.is-live{
    animation:btn-wake .82s cubic-bezier(.34,1.28,.5,1) both,
              btn-breathe 3.6s ease-in-out 1s infinite;
  }
  /* בלחיצה התנועה נעצרת, כדי שהשקיעה של הכפתור תורגש */
  .btn--wake:active{animation:none;transform:translateY(2px)}
  /* כל עוד הכפתור נעול הוא שקט, ומתעורר ברגע שאפשר ללחוץ עליו */
  .btn--wake:disabled{animation:none;transform:none}
}

/* הכפתור בסיום, גדול מכולם כי הוא הפעולה האחרונה */
/* הכפתור לוואטסאפ בנייד, בגודל שנמדד בעורך החי (24.8.2026) */
.outro__btn{font-size:44px;padding:15px 22px 12px}
.outro__btn .btn__ico{width:40px}