/* ==========================================================================
   ניקיון פרפקטי, גיליון סגנון אחד לדף אחד.

   הדף הזה הוא לא דף קריאה. הוא המסך שבין הקלקה על מודעה בגוגל לבין הודעה
   בוואטסאפ, והוא נקרא כמעט תמיד בטלפון, ביד אחת, בשלוש שניות. לכן מובייל
   תחילה, והמסך הרחב הוא התוספת.

   סדר העדיפויות על המסך הראשון, לפני כל גלילה: מה מקבלים, איך מקבלים, ואיפה
   לוחצים. התמונה קצרה בכוונה כדי שהכפתור יישאר מעל הקיפול גם במסך נמוך.

   פעולה אחת, ואין לה מתחרה: אין תפריט, אין טופס, אין קישור יוצא ואין מספר
   טלפון ללחוץ עליו במקום. הירוק הוא הצבע הרווי היחיד בדף, והוא שמור לכפתור
   בלבד. המחירים, הניסיון והשירותים הם אפור ושקט: הם עונים על "האם זה מתאים
   לי", לא מתחרים על הלחיצה.
   ========================================================================== */

:root {
  --teal-900: #0f4a52;
  --teal-700: #17636b;
  --teal-500: #238a95;
  --teal-100: #e2f1f3;
  --sand-50: #fbf8f3;
  --ink: #16302f;
  --ink-soft: #4a625f;
  --line: #e7ded2;
  --wa: #25d366;
  --wa-deep: #12a34c;
  --white: #ffffff;
  --radius: 22px;
  --shadow: 0 18px 44px rgba(15, 74, 82, 0.16);
  --dock: 86px;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100svh;
  display: flex;
  padding: 12px 12px calc(12px + var(--dock));
  background: radial-gradient(120% 70% at 50% 0%, var(--teal-100) 0%, var(--sand-50) 58%);
  color: var(--ink);
  font-family: "Assistant", "Segoe UI", Arial, sans-serif;
  font-size: 17px;
  line-height: 1.5;
}

img { max-width: 100%; display: block; }

/* --- הכרטיס, וזה כל הדף --------------------------------------------------
   `margin: auto` ולא `align-items: center`: כשהתוכן גבוה מהמסך, מרכוז של פלקס
   גוזר את החלק העליון ואי אפשר לגלול אליו. שוליים אוטומטיים מרכזים כשיש מקום
   ומוותרים כשאין. */
.card {
  width: 100%;
  max-width: 440px;
  margin: auto;
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
  text-align: center;
}

.card__art { position: relative; background: var(--teal-100); }

.card__art img {
  width: 100%;
  height: auto;
  aspect-ratio: 12 / 4.2;
  object-fit: cover;
  object-position: 50% 64%;
}

.brand {
  position: absolute;
  inset-inline-start: 12px;
  bottom: 10px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: 999px;
  background: rgba(15, 74, 82, 0.92);
  color: var(--white);
  font-family: "Rubik", "Segoe UI", Arial, sans-serif;
  font-size: 14px;
  font-weight: 700;
}

.brand svg { width: 14px; height: 14px; fill: #ffd166; flex: none; }

.card__body { padding: 18px 18px 20px; }

/* --- מה מקבלים ------------------------------------------------------------ */
h1 {
  margin: 0;
  font-family: "Rubik", "Segoe UI", Arial, sans-serif;
  font-size: 27px;
  font-weight: 800;
  line-height: 1.18;
  letter-spacing: -0.015em;
  color: var(--teal-900);
}

.sub {
  margin: 9px 0 0;
  font-size: 16.5px;
  color: var(--ink-soft);
}

/* --- הפעולה היחידה -------------------------------------------------------- */
.cta {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 16px;
  padding: 18px 16px;
  border-radius: 16px;
  background: linear-gradient(160deg, var(--wa), var(--wa-deep));
  color: var(--white);
  font-family: "Rubik", "Segoe UI", Arial, sans-serif;
  font-size: 20px;
  font-weight: 700;
  text-decoration: none;
  box-shadow: 0 12px 26px rgba(18, 163, 76, 0.4);
}

.cta::before {
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: 22px;
  border: 2px solid var(--wa);
  opacity: 0;
  animation: ring 2s ease-out infinite;
}

.cta:active { transform: translateY(1px); }
.cta svg { width: 26px; height: 26px; fill: currentColor; flex: none; }

@keyframes ring {
  0%   { opacity: 0.9; transform: scale(0.98); }
  70%  { opacity: 0; transform: scale(1.06); }
  100% { opacity: 0; transform: scale(1.06); }
}

@media (prefers-reduced-motion: reduce) {
  .cta::before { animation: none; }
}

.micro {
  margin: 11px 0 0;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--teal-700);
}

.micro i { color: #b7cdcf; font-style: normal; margin: 0 3px; }

.services {
  margin: 14px 0 0;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  font-size: 15px;
  color: var(--ink-soft);
}

/* --- המחירים --------------------------------------------------------------
   טבלה בלי טבלה: שם מימין, מחיר משמאל, וקו דק בין שורות. המספרים מיושרים
   לקצה אחד כדי שאפשר יהיה לסרוק אותם במבט אחד מלמעלה למטה. */
.prices__head {
  margin: 16px 0 0;
  font-family: "Rubik", "Segoe UI", Arial, sans-serif;
  font-size: 15px;
  font-weight: 700;
  color: var(--teal-900);
  letter-spacing: 0.01em;
}

.prices {
  margin: 8px 0 0;
  padding: 4px 12px;
  list-style: none;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fdfbf8;
  text-align: start;
}

.prices li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 0;
  font-size: 15px;
  color: var(--ink-soft);
}

.prices li + li { border-top: 1px solid #f0e9df; }

.prices b {
  font-family: "Rubik", "Segoe UI", Arial, sans-serif;
  font-size: 15px;
  font-weight: 700;
  color: var(--teal-900);
  white-space: nowrap;
}

.note {
  margin: 10px 0 0;
  font-size: 13px;
  color: #8b9c99;
}

.trust {
  margin: 14px 0 0;
  padding-top: 13px;
  border-top: 1px solid var(--line);
  font-size: 13.5px;
  font-weight: 600;
  color: var(--teal-700);
}

/* --- הכפתור הצף -----------------------------------------------------------
   הוא מוסתר כל עוד הכפתור הראשי על המסך, כי שני כפתורים ירוקים זהים זה מעל
   זה נראים כמו באנר ולא כמו פעולה. ברגע שהראשי נגלל החוצה, הצף עולה במקומו
   ומלווה את הקריאה עד למטה. */
.dock {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: 20;
  padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
  background: rgba(251, 248, 243, 0.94);
  backdrop-filter: blur(8px);
  border-top: 1px solid var(--line);
  transform: translateY(115%);
  transition: transform 0.22s ease-out;
}

.dock--on { transform: none; }

.dock .cta { margin: 0; padding: 15px 16px; font-size: 19px; }
.dock .cta::before { animation: none; }

/* --- מסך גבוה, יש מקום לנשום --------------------------------------------- */
@media (min-height: 740px) {
  .card__art img { aspect-ratio: 12 / 5; }
  .card__body { padding: 22px 22px 24px; }
  h1 { font-size: 29px; }
}

/* --- מסך רחב --------------------------------------------------------------
   אין כאן מובייל ואין דסקטופ, יש כרטיס אחד. במסך רחב הוא רק מתרווח קצת,
   והכפתור הצף מיותר: הכרטיס כולו נראה בלי לגלול. */
@media (min-width: 900px) {
  body { padding-bottom: 24px; font-size: 18px; }
  .card { max-width: 480px; }
  h1 { font-size: 31px; }
  .cta { font-size: 21px; }
  .dock { display: none; }
}