/* ==========================================================================
   עושים שנה — מערכת עיצוב
   ========================================================================== */
/* גופן המכתבים: OH Agam Naim, מיזם ״אות.חיים״ (שנה קופל). מותר לשימוש מסחרי ובאתר שבבעלותנו; אין להפיץ את הקובץ */
@font-face{ font-family:'Agam Naim'; src:url("../fonts/OHAgamNaim-Regular.woff2") format("woff2"), url("../fonts/OHAgamNaim-Regular.woff") format("woff"); font-weight:400; font-display:swap; }

:root{
  /* קרקע וטקסט */
  --sand:#FAF6EE;
  --sand-2:#EFE8DC;
  --sand-3:#E2D8C7;
  --white:#FBF8F2;
  --card:rgba(251,248,242,.88);
  --charcoal:#2A2622;
  --charcoal-soft:#6B635A;
  --charcoal-mute:#938A7E;
  --line:#D9D0C2;

  /* קו הגובה — הצבע החום של המפה */
  --contour:#A8785A;

  /* סימוני שביל: ארבעת הצבעים הרשמיים */
  --blaze-red:#B4542E;
  --blaze-blue:#2F5D8C;
  --blaze-green:#4F7A4A;
  --blaze-black:#2A2622;

  --terracotta:#B4542E;
  --terracotta-dark:#8E3F1F;
  --terracotta-soft:#F2E2D7;
  --sage:#4F7A4A;
  --sage-dark:#3C5E38;
  --sage-soft:#E4EBE2;

  /* מסלול פעיל (משתנה לפי מגדר) */
  --track:var(--blaze-green);
  --track-dark:#3C5E38;
  --track-soft:#E4EBE2;

  /* מפה: קצוות חדים, לא גלולות */
  --radius:6px;
  --radius-sm:4px;
  --radius-lg:8px;

  /* טוקן צל אחד לכל האתר. סימטרי — לא מתהפך ב-RTL */
  --shadow:0 8px 24px rgba(42,38,34,.07);
  --shadow-sm:var(--shadow);
  --shadow-lg:var(--shadow);

  --ease:cubic-bezier(.22,.61,.36,1);
  --maxw:1180px;
}
[data-gender="f"]{ --track:var(--blaze-blue); --track-dark:#24486D; --track-soft:#E2E8EF; }

*,*::before,*::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} *{animation:none!important;transition:none!important} }

body{
  margin:0;
  font-family:'Varela Round','Assistant','Heebo',-apple-system,BlinkMacSystemFont,'Segoe UI',Arial,sans-serif;
  font-size:18px; line-height:1.75; letter-spacing:0; color:var(--charcoal);
  background-color:var(--sand);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
body::before{ /* נייר מכתבים עדין - הרקע של כל האתר */
  content:""; position:fixed; inset:0; pointer-events:none; z-index:0;
  background:url("../img/paper.jpg?v=1") 0 0/600px repeat;
}
#app{ position:relative; z-index:1; }

html{ font-synthesis:none; }
h1,h2,h3,h4{ font-family:'Varela Round','Assistant',Arial,sans-serif; font-weight:400; line-height:1.15; margin:0 0 .5em; letter-spacing:0; text-wrap:balance; }
p{ text-wrap:pretty; overflow-wrap:break-word; }
em{ font-style:normal; font-weight:600; }   /* אין נטוי בעברית */
p{ margin:0 0 1em; }
a{ color:var(--terracotta-dark); text-decoration:none; }
a:hover{ text-decoration:underline; }
img,svg{ max-width:100%; }
:focus-visible{ outline:3px solid var(--terracotta); outline-offset:3px; border-radius:6px; }

.wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:22px; }
.center{ text-align:center; }
.hide{ display:none !important; }
.sr{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }

/* ---------- כפתורים ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5em;
  font:inherit; font-weight:600; font-size:16px; line-height:1;
  padding:15px 28px; border-radius:var(--radius-sm); border:1.5px solid transparent;
  cursor:pointer; transition:background-color .18s var(--ease), color .18s var(--ease), border-color .18s var(--ease);
  text-decoration:none !important; white-space:nowrap;
}
.btn-primary{ background:var(--terracotta); color:#fff; }
.btn-primary:hover{ background:var(--terracotta-dark); }
.btn-ghost{ background:transparent; color:var(--charcoal); border-color:var(--line); }
.btn-ghost:hover{ background:var(--white); border-color:var(--charcoal-mute); }
.btn-soft{ background:var(--white); color:var(--charcoal); border-color:var(--line); }
.btn-soft:hover{ border-color:var(--track); color:var(--track-dark); }
.btn-lav{ background:var(--track); color:#fff; }
.btn-lav:hover{ background:var(--track-dark); }
.ar{ display:inline-block; transform:scaleX(-1); font-size:1.05em; line-height:1; }
.btn-sm{ padding:10px 18px; font-size:14.5px; }
.btn-block{ width:100%; }
.btn[disabled]{ opacity:.45; pointer-events:none; }

/* ---------- Header ---------- */
.hdr{
  position:sticky; top:0; z-index:60; backdrop-filter:saturate(1.3) blur(14px);
  background:rgba(250,246,240,.86); border-bottom:1px solid transparent; transition:border-color .25s, box-shadow .25s;
}
.hdr.scrolled{ border-bottom-color:var(--line); box-shadow:var(--shadow); }
.hdr-in{ display:flex; align-items:center; gap:18px; height:72px; }
.logo{ display:flex; align-items:center; gap:10px; font-family:'Varela Round','Assistant',Arial,sans-serif; font-weight:400; font-size:22px; color:var(--charcoal); text-decoration:none !important; letter-spacing:0; }
.logo:hover{ color:var(--terracotta-dark); }
.logo-mark{ width:34px; height:34px; flex:none; }
.nav{ display:flex; gap:4px; margin-inline-start:auto; }
.nav a{ color:var(--charcoal-soft); font-size:15.5px; font-weight:500; padding:9px 14px; border-radius:var(--radius-sm); transition:.18s; text-decoration:none !important; }
.nav a:hover{ color:var(--charcoal); background:var(--sand-2); }
.hdr .btn{ flex:none; }
.burger{ display:none; margin-inline-start:auto; background:none; border:1.5px solid var(--line); border-radius:12px; width:44px; height:44px; cursor:pointer; align-items:center; justify-content:center; }
.burger span{ display:block; width:19px; height:2px; background:var(--charcoal); border-radius:2px; position:relative; transition:.2s; }
.burger span::before,.burger span::after{ content:""; position:absolute; inset-inline-start:0; width:19px; height:2px; background:var(--charcoal); border-radius:2px; transition:.2s; }
.burger span::before{ top:-6px; } .burger span::after{ top:6px; }
.burger[aria-expanded="true"] span{ background:transparent; }
.burger[aria-expanded="true"] span::before{ transform:rotate(45deg); top:0; }
.burger[aria-expanded="true"] span::after{ transform:rotate(-45deg); top:0; }

.mnav{ display:none; border-top:1px solid var(--line); background:var(--sand); padding:10px 0 18px; }
.mnav.open{ display:block; }
.mnav a{ display:block; padding:13px 22px; color:var(--charcoal); font-weight:500; border-radius:10px; }
.mnav a:hover{ background:var(--sand-2); text-decoration:none; }
.mnav .btn{ margin:10px 22px 0; width:calc(100% - 44px); }

/* ---------- Hero ---------- */
.hero{ padding:74px 0 40px; position:relative; }
.hero-grid{ display:grid; grid-template-columns:1.05fr .95fr; gap:52px; align-items:center; }
/* סימון שביל: פס צבע בין שני פסים לבנים — הסימן שמסמן שאתה בדרך */

.hero h1{ font-size:clamp(35px,5.2vw,60px); margin-bottom:.35em; }
.hero h1 em{ font-style:normal; color:var(--terracotta); position:relative; white-space:nowrap; }
/* קו שביל מתחת למילים — לא בלוק צבע */
.hero h1 em::after{ /* קו בעיפרון כתום, משורבט ביד */
  content:""; position:absolute; inset-inline:-3%; bottom:-.24em; height:.34em;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 30' preserveAspectRatio='none'%3E%3Cfilter id='p' x='-5%25' y='-50%25' width='110%25' height='200%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.7 0.5' numOctaves='2' seed='7' result='n'/%3E%3CfeDisplacementMap in='SourceGraphic' in2='n' scale='2.6' result='d'/%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.4' numOctaves='1' seed='3' result='g'/%3E%3CfeColorMatrix in='g' type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 -2.0 1.85' result='ga'/%3E%3CfeComposite in='d' in2='ga' operator='in'/%3E%3C/filter%3E%3Cg fill='none' stroke='%23B4542E' stroke-linecap='round' stroke-linejoin='round' filter='url(%23p)'%3E%3Cpath d='M5 17 C 30 12, 62 19, 98 14 S 160 10, 204 15 S 262 13, 292 9' stroke-width='5.2'/%3E%3Cpath d='M14 21 C 58 17, 104 22, 150 18 S 236 15, 286 16' stroke-width='3' opacity='.7'/%3E%3C/g%3E%3C/svg%3E") center/100% 100% no-repeat;
}
.lead{ font-size:19.5px; color:var(--charcoal-soft); max-width:56ch; }
.hero-cta{ display:flex; flex-wrap:wrap; gap:12px; margin-top:30px; }
.hero-note{ margin-top:18px; font-size:14.5px; color:#5A5249; }
.hero .lead{ color:#4A433C; }

.hero{ padding-block:64px 52px; }
.hero-grid{ gap:56px; }
.hero-art{ position:relative; }
/* הירו: קולאז' החוויות על כל אזור הכותרת; המלל בכרטיס זכוכית מעליו */
.hero{
  /* התמונה במלואה, ברוחב מלא וביחס המקורי 3:2 - בלי חיתוך, בלי טשטוש ובלי הכהיה. רק הכרטיס שקוף */
  aspect-ratio:3/2; min-height:0;
  display:flex; align-items:flex-start; overflow:hidden; padding-block:clamp(28px,4vw,72px) 0;
  background:#CDB48E url("../img/hero-collage-2.webp?v=1") center top/100% auto no-repeat;
}
.hero > .wrap{ width:100%; position:relative; z-index:1; }
.hero-grid{ display:block; }
.hero-art{ display:none; }
.hero-copy{
  max-width:452px; margin-inline-start:-12px;
  /* שקוף: התמונה נראית דרך הכרטיס, עם טשטוש קל שמשאיר את המלל קריא */
  background:rgba(250,246,238,.56);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  border:1px solid rgba(255,255,255,.55); border-radius:18px;
  padding:34px 34px 30px;
  box-shadow:0 24px 60px rgba(40,30,20,.28), 0 2px 8px rgba(40,30,20,.12);
}
.hero-copy h1, .hero-copy .lead, .hero-copy .hero-note{ text-shadow:0 0 14px rgba(250,246,238,1), 0 0 4px rgba(250,246,238,1), 0 0 1px rgba(250,246,238,1); }
.hero-copy h1{ margin-top:0; font-size:clamp(35px,4vw,52px); }
.hero-copy h1{ margin-bottom:.28em; }
.hero-sub{ margin:0 0 10px; font-size:clamp(19px,1.7vw,23px); line-height:1.4; color:#7A3215; }
.hero-copy .lead{ font-size:17.5px; line-height:1.65; margin:0 0 10px; color:#2E2924; }
.hero-small{ margin:0; font-size:15px; line-height:1.6; color:#2E2924; }
.hero-copy .hero-sub, .hero-copy .hero-small{ text-shadow:0 0 14px rgba(250,246,238,1), 0 0 4px rgba(250,246,238,1), 0 0 1px rgba(250,246,238,1); }
.hero-copy .hero-note{ font-size:15px; color:#2E2924; }
.hero-copy .hero-cta{ margin-top:26px; }




/* ---------- Sections ---------- */
section{ position:relative; }
.sec{ padding:76px 0; }
.sec-head{ max-width:62ch; margin:0 auto 46px; text-align:center; }
.sec-head h2{ font-size:clamp(28px,3.6vw,40px); }
.sec-head p{ font-size:18px; color:var(--charcoal-soft); margin:0; }
.sec-alt{ background:linear-gradient(180deg,transparent,rgba(226,216,199,.30) 12%,rgba(226,216,199,.30) 88%,transparent); }
.sec-sand{ position:relative; isolation:isolate; }
.sec-sand::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:rgba(226,214,192,.28);
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 9%,#000 91%,transparent);
  mask-image:linear-gradient(180deg,transparent,#000 9%,#000 91%,transparent);
}

/* פס ציטוט רגשי */
.quote-band{ padding:64px 0; }
.quote-band blockquote{
  margin:0 auto; max-width:34ch; text-wrap:balance; text-align:center;
  font-family:'Varela Round','Assistant',Arial,sans-serif; font-size:clamp(24px,3.4vw,36px); font-weight:400; line-height:1.4; color:var(--charcoal);
}
.quote-band .sig{ margin-top:18px; font-size:15px; color:var(--charcoal-mute); font-family:'Varela Round','Assistant',Arial,sans-serif; font-weight:500; }

/* ---------- איך זה עובד ---------- */
.steps{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:22px; align-items:stretch; counter-reset:s; padding-top:14px; }
.step{ background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:26px 22px 24px; position:relative; box-shadow:var(--shadow-sm); }
.step{ padding-top:34px; }
.step{ padding-top:56px; }
/* אבן אמיתית על כל כרטיס - אותו גודל ואותו מיקום בכולם, המספר חרוט עליה */
.step-stone{ position:absolute; top:-40px; inset-inline-start:14px; width:108px; display:block; }
.step-stone .peb-mini{ width:108px; opacity:1; }
.step-stone b{
  position:absolute; inset:0 0 18% 0; display:grid; place-items:center;
  font-family:'Varela Round','Assistant',Arial,sans-serif; font-size:28px; font-weight:400; line-height:1; color:#2A221A;
  text-shadow:0 0 6px rgba(255,246,228,.9), 0 1px 0 rgba(255,255,255,.7);
}
.step{ display:flex; flex-direction:column; height:100%; box-sizing:border-box; }
.step h3{ font-size:20.5px; margin:8px 0 10px; min-height:1.3em; }
.step p{ font-size:15.5px; line-height:1.75; color:#4A433C; margin:0; text-wrap:pretty; }

/* ---------- רשת החוויות ---------- */
.env-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(268px,1fr)); gap:18px; }
.env-card{
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  padding:24px 22px; text-align:start; cursor:pointer; font:inherit; color:inherit;
  display:flex; flex-direction:column; gap:10px; position:relative; overflow:hidden;
  transition:transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s;
  box-shadow:var(--shadow-sm);
}
.env-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow); border-color:var(--track); }
.env-card::after{ content:""; position:absolute; inset-block:0; inset-inline-start:0; width:4px; background:var(--track); opacity:0; transition:.2s; }
.env-card:hover::after{ opacity:1; }
.env-num{ display:flex; align-items:center; gap:10px; }
.env-num .peb{ width:34px; height:auto; flex:none; }
.env-num b{ font-family:'Varela Round','Assistant',Arial,sans-serif; font-size:13px; font-weight:700; color:var(--charcoal-mute); letter-spacing:0; }
.env-card h3{ font-size:20.5px; margin:0; }
.env-card .q{ font-family:'Varela Round','Assistant',Arial,sans-serif; font-size:19px; color:var(--terracotta-dark); line-height:1.45; }
.env-card p{ font-size:15px; color:var(--charcoal-soft); margin:0; }
.env-card .more{ margin-top:auto; padding-top:10px; font-size:14px; font-weight:600; color:var(--track-dark); }
.badge-draft{ position:absolute; top:14px; inset-inline-end:14px; background:var(--sand-3); color:var(--charcoal-soft); font-size:11px; font-weight:700; padding:4px 9px; border-radius:var(--radius-sm); font-family:'Varela Round','Assistant',Arial,sans-serif; }


/* ---------- טעימה ממעטפה ---------- */
/* (לא בשימוש) */ .demo-toolbar{ display:flex; flex-direction:column; align-items:center; gap:12px; margin:0 auto 34px; text-align:center; }
.demo-ask{ margin:0; font-size:19px; color:var(--charcoal); }
.demo-hint{ margin:0; font-size:15.5px; line-height:1.6; color:#4A433C; max-width:60ch; text-wrap:balance; }
.demo-hint b{ font-weight:400; color:var(--terracotta-dark); }
/* מתג בר/בת מצווה: גלולה גדולה, בצבעי הכפתורים של הפתיחה */
.gt.gt-big{ margin:0; padding:6px; gap:6px; border-radius:999px; background:#FFFDF8; border:1px solid var(--line); box-shadow:0 6px 18px rgba(70,50,25,.10); }
.gt.gt-big button{ font-size:18px; font-weight:400; padding:12px 34px; min-height:50px; border-radius:999px; color:#4A433C; }
.gt.gt-big button:hover{ background:var(--sand-2); }
.gt.gt-big button[data-g="m"][aria-pressed="true"]{ background:#B4542E; color:#fff; }
.gt.gt-big button[data-g="f"][aria-pressed="true"]{ background:#4E7B4F; color:#fff; }
.gt.gt-big button:focus-visible{ outline:3px solid var(--terracotta-dark); outline-offset:2px; }
.demo-frame{
  max-width:880px; margin-inline:auto; background:var(--white); border:1px solid var(--line);
  border-radius:22px; overflow:hidden; box-shadow:var(--shadow);
}
.demo-chrome{ display:flex; gap:7px; padding:13px 18px; background:var(--sand-2); border-bottom:1px solid var(--line); }
.demo-chrome span{ width:10px; height:10px; border-radius:50%; background:var(--sand-3); }
.demo-hd{ padding:22px 26px 0; }
.demo-hd h3{ font-size:23px; margin:0 0 4px; }
.demo-hd .q{ font-family:'Varela Round','Assistant',Arial,sans-serif; font-size:20px; color:var(--terracotta-dark); margin:0; }
.demo-frame .dtabs{ padding-inline:26px; border-bottom:1px solid var(--line); margin-top:14px; }
.demo-bd{ padding:24px 26px 30px; position:relative; }
.demo-frame{ position:relative; }

.demo-bd h4{ font-size:18px; margin:24px 0 8px; }
.demo-bd p{ font-size:16px; color:var(--charcoal-soft); }
.demo-lead{ font-size:16px; color:var(--charcoal-soft); margin-top:0; }
.demo-bd .choice{ cursor:default; }
/* פרטי הילד.ה */
.demo-who{ display:flex; flex-direction:column; align-items:center; gap:14px; margin:0 auto 34px; text-align:center;
  max-width:760px; background:rgba(255,253,248,.85); border:1px solid var(--line); border-radius:20px; padding:24px 26px; box-shadow:0 8px 24px rgba(70,50,25,.08); }
.demo-who-row{ display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:center; gap:16px 22px; }
.demo-name{ display:flex; flex-direction:column; gap:6px; text-align:start; font-size:14.5px; color:#4A433C; }
.demo-name input{ font:inherit; font-size:18px; min-height:50px; width:240px; max-width:100%; box-sizing:border-box; padding:0 18px;
  border:1px solid #CDBB9C; border-radius:999px; background:#FFFDF8; color:var(--charcoal); }
.demo-name input:focus-visible{ outline:3px solid var(--terracotta-dark); outline-offset:2px; }
/* בחירת חוויה בטעימה: כרטיסים לחיצים */
.demo-bd .demo-choice{ cursor:pointer; font:inherit; text-align:start; width:100%; transition:border-color .15s, background .15s, transform .15s; }
.demo-bd .demo-choice:hover{ border-color:var(--track); transform:translateY(-2px); }
.demo-bd .demo-choice:focus-visible{ outline:3px solid var(--terracotta-dark); outline-offset:2px; }
.demo-lead b{ font-weight:400; color:var(--terracotta-dark); }
.demo-next{ margin-top:22px; display:flex; flex-direction:column; align-items:center; gap:10px; text-align:center; }
.demo-next p{ margin:0; font-size:16px; color:#4A433C; }
.demo-bd .choice[data-sel]{ border-color:var(--track); background:var(--track-soft); }
.demo-bd .choice[data-sel]::after{ content:"✓"; position:absolute; top:16px; inset-inline-end:18px; color:var(--track-dark); font-weight:700; font-size:18px; }
.demo-letter{ box-shadow:none; }
.packlist{ list-style:none; margin:0; padding:0; display:grid; gap:12px; }
.packlist li{ background:var(--sand-2); border-radius:var(--radius-sm); padding:15px 17px; }
.packlist b{ display:block; font-size:15px; margin-bottom:4px; }
.packlist span{ font-size:15.5px; color:var(--charcoal-soft); }

/* ---------- שאר המעטפות ---------- */
.rest{ max-width:880px; margin:40px auto 0; }
.rest-head{ text-align:center; font-size:14px; font-weight:700; letter-spacing:0; color:var(--charcoal-mute); margin-bottom:18px; font-family:'Varela Round','Assistant',Arial,sans-serif; }
.rest-list{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:10px 18px; }
.rest-list li{ display:flex; align-items:center; gap:11px; background:rgba(255,253,250,.72); border:1px solid var(--line); border-radius:var(--radius-sm); padding:8px 14px 8px 18px; }
.rest-list .peb-mini{ width:32px; }
.rest-list span{ display:flex; flex-direction:column; min-width:0; }
.rest-list b{ font-size:15px; line-height:1.3; }
.rest-list em{ font-style:normal; font-size:13px; color:var(--charcoal-mute); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* ---------- הדגשת התאמה מגדרית ---------- */
.split{ display:grid; grid-template-columns:1fr 1fr; gap:44px; align-items:center; }
.gender-demo{ background:var(--white); border:1px solid var(--line); border-radius:var(--radius-lg); padding:30px; box-shadow:var(--shadow); }
.gt{ display:inline-flex; background:var(--sand-2); border-radius:var(--radius-sm); padding:5px; gap:4px; margin-bottom:22px; }
.gt button{ font:inherit; font-size:15px; font-weight:600; border:0; background:none; padding:9px 22px; border-radius:var(--radius-sm); cursor:pointer; color:var(--charcoal-soft); transition:.18s; }
.gt button[aria-pressed="true"]{ background:var(--track); color:#fff; box-shadow:none; }
.gender-demo .demo-text{ font-family:'Varela Round','Assistant',Arial,sans-serif; font-size:20px; line-height:1.85; min-height:6.5em; }
.gender-demo mark{ background:var(--track-soft); color:var(--track-dark); border-radius:5px; padding:1px 4px; font-weight:700; }

.tick-list{ list-style:none; margin:0; padding:0; display:grid; gap:14px; }
.tick-list li{ display:flex; gap:12px; align-items:flex-start; font-size:16.5px; }
.tick-list svg{ flex:none; margin-top:4px; }

/* ---------- תמחור ---------- */
.plans{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; align-items:stretch; }
.plan{ background:var(--card); border:1px solid var(--line); border-radius:var(--radius-lg); padding:32px 28px; box-shadow:var(--shadow-sm); position:relative; display:flex; flex-direction:column; }
.plan.featured{ border-color:var(--terracotta); box-shadow:var(--shadow); }
.plan .flag{ position:absolute; top:-13px; inset-inline-start:50%; transform:translateX(50%); background:var(--terracotta); color:#fff; font-size:12.5px; font-weight:700; padding:5px 16px; border-radius:var(--radius-sm); font-family:'Varela Round','Assistant',Arial,sans-serif; white-space:nowrap; }
.plan h3{ font-size:23px; margin-bottom:2px; }
.plan .sub{ font-size:14.5px; color:var(--charcoal-mute); margin-bottom:18px; }
.plan .price{ font-family:'Varela Round','Assistant',Arial,sans-serif; font-size:44px; font-weight:400; line-height:1; color:var(--charcoal); }
.plan .pnote{ font-size:14px; color:var(--charcoal-mute); margin:6px 0 22px; }
.plan .who{ font-size:15px; color:var(--charcoal-soft); background:var(--sand-2); border-radius:var(--radius-sm); padding:13px 15px; margin:0 0 18px; }
.plan .who b{ color:var(--charcoal); }
.plan .ul-head{ font-size:13px; font-weight:700; letter-spacing:0; color:var(--charcoal-mute); margin:0 0 10px; font-family:'Varela Round','Assistant',Arial,sans-serif; }
.plan .foot{ font-size:13.5px; color:var(--charcoal-mute); border-top:1px solid var(--line); padding-top:13px; margin:0 0 20px; }
.plan ul{ list-style:none; margin:0 0 22px; padding:0; display:grid; gap:11px; }
.plan li{ display:flex; gap:10px; font-size:15.5px; color:var(--charcoal-soft); align-items:flex-start; }
.plan li svg{ flex:none; margin-top:4px; }
.plan .btn{ margin-top:auto; }
.vat{ text-align:center; font-size:14px; color:var(--charcoal-mute); margin-top:22px; }

/* ---------- FAQ ---------- */
.faq{ max-width:780px; margin-inline:auto; display:grid; gap:10px; }
.faq details{ background:var(--card); border:1px solid var(--line); border-radius:var(--radius-sm); overflow:hidden; transition:border-color .2s; }
.faq details[open]{ border-color:var(--track); }
.faq summary{ cursor:pointer; padding:19px 22px; font-weight:600; font-size:17px; list-style:none; display:flex; justify-content:space-between; gap:16px; align-items:center; }
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{ content:"+"; font-size:24px; color:var(--terracotta); font-weight:400; line-height:1; flex:none; transition:transform .2s; }
.faq details[open] summary::after{ transform:rotate(45deg); }
.faq .a{ padding:0 22px 20px; color:var(--charcoal-soft); font-size:16px; }

/* ---------- CTA סיום ---------- */
.final{ padding:80px 0; }
.final-box{
  background:var(--charcoal); color:var(--sand); border-radius:var(--radius-lg); padding:58px 40px; text-align:center; position:relative; overflow:hidden;
}
.final-box::before{ content:""; position:absolute; inset:0; background:radial-gradient(600px 300px at 80% 0%, rgba(217,93,57,.28), transparent 60%); }
.final-box > *{ position:relative; }
.final-box h2{ color:#fff; font-size:clamp(27px,3.6vw,38px); }
.final-box .final-kicker{ color:rgba(250,246,240,.62); font-size:clamp(17px,1.8vw,20px); font-weight:600; letter-spacing:.01em; margin:0 auto 6px; }
.final-box p{ color:rgba(250,246,240,.78); max-width:52ch; margin-inline:auto; font-size:18px; }

/* ---------- Footer ---------- */
.ftr{ border-top:1px solid var(--line); padding:44px 0 34px; font-size:15px; color:var(--charcoal-soft); }
.ftr-in{ display:flex; flex-wrap:wrap; gap:26px; justify-content:space-between; align-items:flex-start; }
.ftr-links{ display:flex; flex-wrap:wrap; gap:18px; }
.ftr-links a{ color:var(--charcoal-soft); }
.ftr .fine{ width:100%; font-size:13.5px; color:var(--charcoal-mute); border-top:1px solid var(--line); padding-top:18px; margin-top:8px; }

/* ==========================================================================
   האזור האישי
   ========================================================================== */
.app-top{ background:var(--white); border-bottom:1px solid var(--line); }
.app-top-in{ display:flex; align-items:center; gap:16px; height:68px; }
.app-top .logo{ font-size:19px; }
.app-tabs{ display:flex; gap:4px; margin-inline-start:auto; background:var(--sand-2); padding:5px; border-radius:var(--radius-sm); }
.app-tabs button{ font:inherit; font-size:15px; font-weight:600; border:0; background:none; padding:9px 20px; border-radius:var(--radius-sm); cursor:pointer; color:var(--charcoal-soft); }
.app-tabs button[aria-selected="true"]{ background:var(--white); color:var(--charcoal); box-shadow:var(--shadow-sm); }

.banner{ padding:34px 0 8px; }
.banner-card{
  background:linear-gradient(135deg, var(--track-soft), var(--white) 62%);
  border:1px solid var(--line); border-radius:var(--radius-lg); padding:28px 32px;
  display:flex; flex-wrap:wrap; gap:26px; align-items:center; justify-content:space-between; box-shadow:var(--shadow-sm);
}
.banner h1{ font-size:clamp(23px,3vw,31px); margin:0 0 6px; }
.banner .sub{ color:var(--charcoal-soft); font-size:16px; margin:0; }
.countdown{ display:flex; gap:10px; }
.cd{ background:var(--white); border:1px solid var(--line); border-radius:14px; min-width:74px; padding:11px 8px; text-align:center; }
.cd b{ display:block; font-family:'Varela Round','Assistant',Arial,sans-serif; font-size:28px; line-height:1; color:var(--track-dark); }
.cd span{ font-size:12px; color:var(--charcoal-mute); }

.progress-row{ display:flex; align-items:center; gap:14px; margin-top:20px; }
.bar{ flex:1; height:9px; background:var(--sand-3); border-radius:var(--radius-sm); overflow:hidden; }
.bar i{ display:block; height:100%; background:linear-gradient(90deg,var(--track),var(--track-dark)); border-radius:var(--radius-sm); transition:width .5s var(--ease); }
.progress-row b{ font-size:14.5px; font-weight:600; color:var(--charcoal-soft); white-space:nowrap; font-family:'Varela Round','Assistant',Arial,sans-serif; }

/* --- שביל אבני הדרך --- */
.path-sec{ padding:34px 0 70px; }
#viewPath{ position:relative; isolation:isolate; }
#viewPath::before{
  content:""; position:absolute; inset:14px 0 34px; z-index:-1; border-radius:var(--radius-lg);
  background:rgba(226,214,192,.34);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.4), inset 0 30px 60px -30px rgba(47,62,70,.14);
}
.path-wrap{ position:relative; }
.path-svg{ position:absolute; inset:0; width:100%; height:100%; pointer-events:none; }
.path-grid{ position:relative; display:grid; grid-template-columns:repeat(7,1fr); gap:44px 10px; padding:34px 0 14px; }
.stone{
  background:none; border:0; padding:0; cursor:pointer; font:inherit; display:flex; flex-direction:column; align-items:center; gap:9px;
  transition:transform .2s var(--ease);
}
.stone:hover{ transform:translateY(-5px); }
.peb-wrap{ position:relative; display:block; width:100%; max-width:88px; margin-inline:auto; }
.peb{ display:block; width:100%; height:auto; transition:opacity .18s var(--ease); }
/* מצב האבן: עתידית חתומה, נוכחית מלאה, שנפתחה — מלאה */
.peb[data-st="todo"], .peb-mini[data-st="todo"]{ opacity:.62; filter:saturate(.55) brightness(1.04); }
.peb[data-st="active"], .peb-mini[data-st="active"]{ opacity:1; }
.peb[data-st="done"], .peb-mini[data-st="done"]{ opacity:.82; }
.peb-wrap b{
  position:absolute; inset:0 0 18% 0; display:grid; place-items:center;
  font-family:'Varela Round','Assistant',Arial,sans-serif; font-size:23px; font-weight:400; line-height:1; color:#2F2A24;
  text-shadow:0 1px 0 rgba(255,255,255,.55), 0 -1px 0 rgba(0,0,0,.18);
}
.stone[data-state="todo"] .peb-wrap b{ color:rgba(47,42,36,.72); }
.stone[data-state="active"] .peb-wrap b{ color:var(--terracotta-dark); }
.peb-wrap.is-active::before{
  content:""; position:absolute; inset:-9% -5%; border-radius:50%;
  border:2.5px dashed var(--terracotta); opacity:.75;
}
.stone:hover .peb{ opacity:1; }
.peb-mini{ width:30px; height:auto; flex:none; }
.stone .lbl{ font-size:12.5px; font-weight:600; color:var(--charcoal-soft); text-align:center; line-height:1.3; max-width:11ch; font-family:'Varela Round','Assistant',Arial,sans-serif; }
.stone[data-state="done"] .lbl{ color:var(--track-dark); }
.stone .tick{ font-size:11px; color:var(--charcoal-mute); }

/* --- מגירה --- */
.scrim{ position:fixed; inset:0; background:rgba(47,62,70,.42); backdrop-filter:blur(3px); opacity:0; pointer-events:none; transition:opacity .28s; z-index:90; }
.scrim.open{ opacity:1; pointer-events:auto; }
.drawer{
  position:fixed; top:0; bottom:0; right:0; width:min(620px,100%); background:var(--sand); z-index:100;
  transform:translateX(105%); transition:transform .34s var(--ease); display:flex; flex-direction:column;
  box-shadow:var(--shadow-lg); visibility:hidden;
}
.drawer.open{ transform:translateX(0); visibility:visible; }
.drawer-hd{ padding:22px 26px 0; background:var(--white); border-bottom:1px solid var(--line); }
.drawer-hd .row{ display:flex; align-items:flex-start; gap:14px; }
.drawer-hd h2{ font-size:25px; margin:0 0 4px; }
.drawer-hd .q{ font-family:'Varela Round','Assistant',Arial,sans-serif; font-size:21px; color:var(--terracotta-dark); margin:0; line-height:1.4; }
.xbtn{ margin-inline-start:auto; flex:none; width:38px; height:38px; border-radius:50%; border:1px solid var(--line); background:var(--sand); cursor:pointer; font-size:19px; line-height:1; color:var(--charcoal-soft); }
.xbtn:hover{ background:var(--sand-2); color:var(--charcoal); }
.dtabs{ display:flex; gap:2px; margin-top:18px; overflow-x:auto; }
.dtabs button{ font:inherit; font-size:14.5px; font-weight:600; border:0; background:none; padding:12px 15px; cursor:pointer; color:var(--charcoal-mute); border-bottom:3px solid transparent; white-space:nowrap; }
.dtabs button[aria-selected="true"]{ color:var(--terracotta-dark); border-bottom-color:var(--terracotta); }
.drawer-bd{ flex:1; overflow-y:auto; padding:26px; -webkit-overflow-scrolling:touch; }
.panel h3{ font-size:19px; margin:26px 0 10px; }
.panel h3:first-child{ margin-top:0; }
.panel p{ font-size:16.5px; color:var(--charcoal-soft); }
.note{ background:var(--white); border-inline-start:4px solid var(--track); border-radius:var(--radius-sm); padding:17px 19px; margin:0 0 18px; font-size:16px; }
.note b{ display:block; margin-bottom:5px; color:var(--charcoal); font-size:15px; }
.note.research{ border-inline-start-color:var(--terracotta); background:var(--terracotta-soft); }
.note.research p{ color:var(--charcoal); margin:0; }

.choices{ display:grid; gap:12px; }
.choice{
  background:var(--white); border:1.5px solid var(--line); border-radius:var(--radius); padding:18px 20px;
  cursor:pointer; text-align:start; font:inherit; color:inherit; transition:.18s; position:relative;
}
.choice:hover{ border-color:var(--track); }
.choice[aria-pressed="true"]{ border-color:var(--track); background:var(--track-soft); }
.choice[aria-pressed="true"]::after{ content:"✓"; position:absolute; top:16px; inset-inline-end:18px; color:var(--track-dark); font-weight:700; font-size:18px; }
.choice b{ display:block; font-size:17px; margin-bottom:5px; color:var(--charcoal); }
.choice span{ font-size:15px; color:var(--charcoal-soft); }

.pack-fields{ display:grid; gap:16px; }
.field label{ display:block; font-size:14.5px; font-weight:600; margin-bottom:7px; }
.field .hint{ font-weight:400; color:var(--charcoal-mute); font-size:13.5px; }
input,textarea,select{
  width:100%; font:inherit; font-size:16px; padding:13px 15px; border:1.5px solid var(--line);
  border-radius:var(--radius-sm); background:var(--white); color:var(--charcoal); transition:border-color .18s;
}
input:focus,textarea:focus,select:focus{ border-color:var(--track); outline:none; }
textarea{ min-height:88px; resize:vertical; }
.drawer-ft{ padding:16px 26px; background:var(--white); border-top:1px solid var(--line); display:flex; gap:10px; flex-wrap:wrap; }
.drawer-ft .btn{ flex:1; min-width:150px; }

/* --- המכתב --- */
.letter{
  font-family:'Agam Naim','Varela Round',cursive; /* כתב היד של המכתבים: אגם נעים, ממיזם ההנצחה ״אות.חיים״ */
  background:#FFFCF6; border:1px solid var(--line); border-radius:var(--radius);
  padding:40px 38px; box-shadow:var(--shadow-sm); position:relative;
  background-image:linear-gradient(180deg, rgba(232,220,203,.28), transparent 120px);
}
.letter .lq{ font-family:'Agam Naim','Varela Round',cursive; font-size:40px; color:var(--terracotta-dark); text-align:center; margin:0 0 26px; line-height:1.4; }
.letter .greet{ font-family:'Agam Naim','Varela Round',cursive; font-size:38px; margin:0 0 16px; color:var(--charcoal); }
.letter .body p{ font-family:'Agam Naim','Varela Round',cursive; font-size:30px; line-height:1.55; color:var(--charcoal); white-space:pre-line; }
.letter .pick{ background:var(--track-soft); border:1px dashed var(--track); border-radius:var(--radius-sm); padding:18px 20px; margin:24px 0; }
.letter .pick .k{ font-size:14px; color:var(--track-dark); margin-bottom:6px; font-family:'Varela Round','Assistant',Arial,sans-serif; }
.letter .pick b{ font-family:'Agam Naim','Varela Round',cursive; font-weight:400; font-size:32px; display:block; margin-bottom:5px; }
.letter .pick span{ font-size:25px; line-height:1.5; color:var(--charcoal-soft); }
.letter .packbox{ border-top:1px solid var(--line); margin-top:26px; padding-top:20px; }
.letter .packbox h4{ font-family:'Agam Naim','Varela Round',cursive; font-size:28px; margin:0 0 12px; }
.letter .packbox ul{ margin:0; padding-inline-start:20px; font-size:25px; line-height:1.5; color:var(--charcoal-soft); }
.letter .packbox li{ margin-bottom:7px; }
.letter .brand{ margin:34px 0 0; font-size:12.5px; color:var(--charcoal-mute); letter-spacing:0; text-align:center; font-family:'Varela Round','Assistant',Arial,sans-serif; border-top:1px solid var(--line); padding-top:14px; }
.letter .sign{ margin-top:30px; text-align:start; font-family:'Agam Naim','Varela Round',cursive; font-size:36px; color:var(--charcoal); }
.letter-empty{ text-align:center; color:var(--charcoal-mute); padding:44px 20px; }

.letter.editing{ outline:2px dashed var(--terracotta); outline-offset:8px; background:#fff; }
.letter.editing:focus{ outline-color:var(--terracotta-dark); }
.open-card{ margin-top:0; margin-bottom:6px; border-style:dashed; }
.open-card h3{ font-family:'Varela Round','Assistant',Arial,sans-serif; }

/* --- אלבום --- */
.album{ display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:18px; }
.mem{ background:var(--white); border:1px solid var(--line); border-radius:var(--radius); padding:20px; box-shadow:var(--shadow-sm); }
.mem .top{ display:flex; align-items:center; gap:10px; margin-bottom:12px; }
.mem .peb{ width:28px; height:22px; flex:none; }
.mem h4{ font-size:17px; margin:0; }
.mem .date{ font-size:12.5px; color:var(--charcoal-mute); margin-inline-start:auto; font-family:'Varela Round','Assistant',Arial,sans-serif; }
.mem dl{ margin:0; font-size:15px; }
.mem dt{ font-weight:600; color:var(--charcoal); font-size:13.5px; margin-top:10px; }
.mem dd{ margin:2px 0 0; color:var(--charcoal-soft); }
.empty{ text-align:center; padding:70px 20px; color:var(--charcoal-mute); }
.empty svg{ margin-bottom:16px; opacity:.6; }

/* --- מודאל הרשמה --- */
.modal{ position:fixed; inset:0; z-index:120; display:grid; place-items:center; padding:20px; overflow-y:auto; }
.modal-card{
  background:var(--sand); border-radius:var(--radius-lg); width:min(560px,100%); padding:34px 32px;
  box-shadow:var(--shadow-lg); position:relative; margin:auto;
}
.modal-card h2{ font-size:27px; margin-bottom:6px; }
.modal-card > p{ color:var(--charcoal-soft); margin-bottom:24px; }
.form-grid{ display:grid; gap:17px; }
.form-2{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.seg{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.seg button{
  font:inherit; font-size:16px; font-weight:600; padding:15px; border-radius:var(--radius-sm);
  border:1.5px solid var(--line); background:var(--white); cursor:pointer; color:var(--charcoal-soft); transition:.18s;
}
.seg button[aria-pressed="true"]{ border-color:var(--track); background:var(--track-soft); color:var(--track-dark); }
.err{ color:var(--terracotta-dark); font-size:14px; min-height:1.2em; }

/* --- טוסט --- */
.toast{
  position:fixed; inset-block-end:26px; inset-inline-start:50%; transform:translate(50%,140%);
  background:var(--charcoal); color:#fff; padding:14px 24px; border-radius:var(--radius-sm); font-size:15.5px; font-weight:500;
  box-shadow:var(--shadow-lg); z-index:200; transition:transform .34s var(--ease); max-width:90vw; text-align:center;
}
.toast.show{ transform:translate(50%,0); }

/* ==========================================================================
   רספונסיביות
   ========================================================================== */
/* כרטיס "מה הלאה" */
.next-card{ background:var(--white); border:1px solid var(--line); border-radius:var(--radius-lg); padding:26px 30px; margin-top:34px;
  display:flex; flex-wrap:wrap; gap:20px; align-items:center; justify-content:space-between; box-shadow:var(--shadow-sm); }
.next-card .k{ font-size:13px; font-weight:700; letter-spacing:0; color:var(--terracotta); margin-bottom:6px; font-family:'Varela Round','Assistant',Arial,sans-serif; }
.next-card h3{ font-size:22px; margin:0 0 4px; }
.next-card p{ margin:0; color:var(--charcoal-soft); font-size:15.5px; max-width:56ch; }

@media (max-width:1040px){
  .steps{ grid-template-columns:repeat(2,1fr); gap:28px 20px; }
  .plans{ grid-template-columns:1fr; max-width:520px; margin-inline:auto; }
  .plan.featured{ order:-1; }
}
@media (max-width:900px){
  .nav{ display:none; }
  .hdr .btn{ display:none; }
  .burger{ display:flex; }
  .hero{ padding:46px 0 24px; }
  .hero-grid{ grid-template-columns:1fr; gap:34px; }
  .hero-art{ order:-1; max-width:560px; margin-inline:auto; width:100%; }
  .split{ grid-template-columns:1fr; gap:30px; }
  .sec{ padding:56px 0; }
  .path-grid{ grid-template-columns:repeat(5,1fr); gap:34px 8px; }
  .app-tabs{ font-size:14px; }
}
@media (max-width:620px){
  body{ font-size:16.5px; }
  .wrap{ padding-inline:18px; }
  .hero h1{ font-size:33px; }
  .lead{ font-size:17.5px; }
  .hero-cta .btn{ width:100%; }
  .steps{ grid-template-columns:1fr; }
  .env-grid{ grid-template-columns:1fr; }
  .demo-hd{ padding:18px 18px 0; }
  .demo-frame .dtabs{ padding-inline:18px; }
  .demo-bd{ padding:20px 18px 24px; max-height:none; }
  .demo-hd h3{ font-size:20px; }
  .rest-list{ grid-template-columns:1fr; }
  .final-box{ padding:40px 22px; }
  .path-grid{ grid-template-columns:repeat(3,1fr); gap:30px 6px; }
  .next-card{ padding:22px; }
  .next-card .btn{ width:100%; }
  .banner-card{ padding:22px; }
  .countdown{ width:100%; }
  .cd{ flex:1; min-width:0; }
  .app-top-in{ height:60px; }
  .app-top .logo span{ display:none; }
  .app-tabs{ width:100%; margin:0; justify-content:center; }
  .app-top-in{ flex-wrap:wrap; height:auto; padding-block:12px; gap:12px; }
  .drawer{ width:100%; top:auto; bottom:0; height:94vh; border-start-start-radius:var(--radius-lg); border-start-end-radius:var(--radius-lg); transform:translateY(105%); }
  .drawer.open{ transform:translateY(0); }
  .drawer-bd{ padding:20px; }
  .drawer-hd{ padding:18px 20px 0; }
  .drawer-ft{ padding:14px 20px calc(14px + env(safe-area-inset-bottom)); }
  .letter{ padding:26px 20px; }
  .letter .body p{ font-size:26px; }
  .form-2{ grid-template-columns:1fr; }
  .modal-card{ padding:26px 20px; }
  .ftr-in{ flex-direction:column; gap:18px; }
}

/* ==========================================================================
   הדפסה — המכתב בלבד
   ========================================================================== */
@media print{
  @page{ size:A4; margin:16mm 15mm; }
  body{ background:#fff !important; font-size:12pt; }
  .hdr,.app-top,.banner,.path-sec,.drawer-hd,.drawer-ft,.dtabs,.ftr,.scrim,.toast,.no-print{ display:none !important; }
  .drawer{ position:static !important; transform:none !important; width:100% !important; height:auto !important; box-shadow:none !important; background:#fff !important; }
  .drawer-bd{ overflow:visible !important; padding:0 !important; }
  .panel:not(#panel-letter){ display:none !important; }
  .letter{ border:0; box-shadow:none; padding:0; background:#fff; }
  .letter .lq{ font-size:30pt; }
  .letter .greet{ font-size:27pt; }
  .letter .body p{ font-size:20pt; line-height:1.5; }
  .letter .pick{ background:#F7F2EA !important; border:1px dashed #999; -webkit-print-color-adjust:exact; print-color-adjust:exact; }
  .letter .sign{ font-size:25pt; }
  .letter .brand{ font-size:8.5pt; color:#9aa4a8; }
  a{ color:inherit; text-decoration:none; }
}

/* הירו במובייל: הקולאז' מלמעלה, הכרטיס עולה עליו */
@media (max-width:900px){
  .hero{ display:block; aspect-ratio:auto; height:auto; max-height:none; min-height:0; padding-block:0; padding:0 0 28px; background-size:100% auto; background-position:center top; background-color:#EFE7DA; }
  .hero::before{ display:none; }
  .hero{ background-size:100% auto; }
  .hero-copy{ margin-top:calc(66.667vw - 28px); margin-inline-start:0; padding:26px 22px 24px; max-width:none; }
}

/* ---------- קריאות לפעולה לאורך הדף ---------- */
.cta-band{ background:linear-gradient(135deg,#B4542E 0%,#9A4422 100%); margin-block:40px; padding:6px 0; position:relative; overflow:hidden; }
.cta-band-alt{ background:linear-gradient(135deg,#4E7B4F 0%,#3D6440 100%); }
.cta-band .cta-band-in{ background:none !important; box-shadow:none !important; border-radius:0; }
.cta-band-in{
  display:flex; flex-wrap:wrap; align-items:center; gap:18px 28px;
  background:linear-gradient(135deg,#B4542E 0%,#9A4422 100%); color:#FFF8EE;
  border-radius:20px; padding:34px 36px; position:relative; overflow:hidden;
  box-shadow:0 18px 40px rgba(142,63,31,.28);
}
.cta-band-alt .cta-band-in{ background:linear-gradient(135deg,#4E7B4F 0%,#3D6440 100%); box-shadow:0 18px 40px rgba(61,100,64,.28); }
/* מעטפה גדולה ושקופה ברקע, כמו חותמת */
.cta-band-in::after{ /* מעטפה שלמה ושקופה מאחורי הכפתור */
  content:""; position:absolute; inset-inline-end:28px; top:50%; width:132px; height:88px; pointer-events:none;
  transform:translateY(-50%) rotate(-8deg); opacity:.32;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 180 120'%3E%3Cg fill='none' stroke='%23FFF8EE' stroke-width='2.4' stroke-linejoin='round' stroke-linecap='round'%3E%3Crect x='4' y='4' width='172' height='112' rx='8'/%3E%3Cpath d='M6 8 L90 70 L174 8'/%3E%3Cpath d='M6 114 L68 54 M174 114 L112 54'/%3E%3Ccircle cx='90' cy='70' r='11'/%3E%3C/g%3E%3C/svg%3E") center/contain no-repeat;
}
.cta-ico{ width:56px; height:56px; flex:none; fill:rgba(255,248,238,.16); stroke:#FFF8EE; stroke-width:2.2; stroke-linejoin:round; stroke-linecap:round; }
.cta-text{ flex:1 1 360px; min-width:0; display:flex; flex-direction:column; gap:6px; position:relative; z-index:1; }
.cta-line{ margin:0; font-size:clamp(23px,2.6vw,30px); line-height:1.3; color:#FFFFFF; }
.cta-sub{ margin:0; font-size:17px; line-height:1.6; color:rgba(255,248,238,.92); }
.cta-go{
  position:relative; z-index:1; flex:none; display:inline-flex; align-items:center; gap:10px;
  min-height:56px; padding:0 30px; border-radius:14px; font-size:18.5px; text-decoration:none !important;
  background:#FFF8EE; color:#7A3215; box-shadow:0 6px 16px rgba(0,0,0,.18);
  transition:transform .2s var(--ease), box-shadow .2s var(--ease);
}
.cta-band-alt .cta-go{ color:#2F5232; }
@media (min-width:621px){ .cta-go{ margin-inline-end:150px; } }
.cta-go:hover{ transform:translateY(-2px); box-shadow:0 10px 22px rgba(0,0,0,.22); }
.cta-go:focus-visible{ outline:3px solid #FFF8EE; outline-offset:3px; }
@media (max-width:620px){
  .demo-who{ padding:20px 16px; }
  .demo-name, .demo-name input{ width:100%; }
  .cta-band-in{ padding:24px 20px; }
  .cta-ico{ width:44px; height:44px; }
  .cta-go{ width:100%; justify-content:center; }
  .cta-band-in::after{ display:none; }
}

/* הירו בטאבלט: כרטיס צר יותר, כדי שהרג'ום במרכז הקולאז' יישאר גלוי */
@media (min-width:901px) and (max-width:1200px){
  .hero-copy{ max-width:380px; padding:26px 26px 24px; }
  .hero-copy h1{ font-size:36px; }
  .hero-copy .lead{ font-size:16px; }
  .hero-sub{ font-size:18px; }
  .hero-small{ font-size:14px; }
  .hero-copy .hero-cta{ margin-top:18px; }
}

/* איך זה עובד: שני טורים במסך בינוני, כרטיסים שווים בגובה */
@media (min-width:621px) and (max-width:1100px){
  .steps{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:44px 22px; }
}