/*
Theme Name:  Beat The Age
Theme URI:   https://beattheage.co.il
Description: ערכת-בת של Twenty Twenty-Five. מחזיקה את עמודי שלב 0 (דף הנחיתה, המדריך, מדיניות פרטיות, תנאי שימוש) כתבניות קוד מלאות, ומשאירה את הבלוג לערכת האם.
Author:      רותם שקרל
Template:    twentytwentyfive
Version:     1.0.0
Text Domain: beattheage
*/

/* ==========================================================================
   מנצחים את הגיל · beattheage.co.il · שלב 0
   ערכה בהירה. הטורקיז #61ebca מסמן ולא מקשט. Assistant מוטמע מקומית.
   המבנה: התמונה היא רקע של כל העמוד, מעליה צעיף לבן שמתחזק כלפי מטה,
   והטופס יושב בכרטיס לבן מרחף. מובייל קודם.
   ========================================================================== */

@font-face {
  font-family: 'Assistant';
  src: url('assets/fonts/Assistant-VariableFont_wght.ttf') format('truetype-variations');
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}

.t-light {
  --ink:       #0a1211;
  --ink-mid:   #3c4b48;
  --ink-low:   #66726f;
  --line:      #e3eaec;
  --line-soft: #eef3f4;
  --field:     #ffffff;
  --sky:       #dce8f4;
  --turq:      #61ebca;
  --turq-hi:   #4ee0bc;
  --on-turq:   #04120d;
  --mark-ink:  #06120e;
  --mark-bg:   #61ebca;
  --card-sh:   0 1px 2px rgba(14,38,50,.05),
               0 8px 20px rgba(14,38,50,.07),
               0 26px 56px rgba(14,38,50,.10);
  --btn-sh:    0 6px 18px rgba(43,190,157,.32);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: #fff;
  color: var(--ink);
  font-family: 'Assistant', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

mark {
  color: var(--mark-ink);
  background: var(--mark-bg);
  font-weight: 800;
  padding: .02em .16em;
  border-radius: 3px;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

/* ==========================================================================
   הרקע
   ========================================================================== */

.page { position: relative; min-height: 100svh; overflow: hidden; }

.bg {
  position: absolute;
  inset: -3svh 0 auto 0;  /* מעוגן לראש העמוד, מוסט מעט למעלה. בדסקטופ נדרס */
  z-index: 0;
}
.bg img {
  width: 100%;
  height: auto;
  display: block;
}

/* הצעיף: שקוף למעלה כדי שרותם והשמיים ייראו, ונסגר ללבן מלא מתחת לכרטיס */
.bg__veil {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg,
      rgba(255,255,255,.97) 0%,
      rgba(255,255,255,.93) 11%,
      rgba(255,255,255,.80) 22%,
      rgba(255,255,255,.46) 31%,
      rgba(255,255,255,.14) 39%,
      rgba(255,255,255,.05) 52%,
      rgba(255,255,255,.42) 68%,
      rgba(255,255,255,.86) 82%,
      #ffffff 94%,
      #ffffff 100%);
}

/* ==========================================================================
   הפריסה
   ========================================================================== */

.page__inner {
  position: relative;
  z-index: 1;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  padding: 0 18px 18svh;
}
/* מרווח שמפנה את המסך הראשון לרותם, והכרטיס מציץ בתחתיתו ומזמין גלילה */
.head { margin-bottom: 24svh; }

.head {
  flex: 0 0 auto;
  padding: 92px 4px 0;
  max-width: 460px;
  margin-inline: auto;
  width: 100%;
  text-align: center;
}

.card {
  width: 100%;
  max-width: 460px;
  margin: 0 auto;
  padding: 24px 20px 20px;
  background: #fff;
  border: 1px solid var(--line-soft);
  border-radius: 20px;
  box-shadow: var(--card-sh);
}

/* ==========================================================================
   טיפוגרפיה
   ========================================================================== */

.t {
  margin: 0;
  font-size: clamp(2.65rem, 11.5vw, 3.3rem);
  font-weight: 800;
  line-height: .96;
  letter-spacing: -.024em;
}

.rule {
  display: block;
  width: 50px;
  height: 4px;
  margin: 16px auto 0;
  background: var(--turq);
  border-radius: 3px;
}

.sub {
  margin: 18px auto 0;
  max-width: 27ch;
  font-size: clamp(1.14rem, 4.8vw, 1.28rem);
  font-weight: 700;
  line-height: 1.38;
}
.sub span { display: block; }

.by {
  margin: 16px 0 0;
  font-size: .92rem;
  font-weight: 700;
  letter-spacing: .15em;
  color: var(--ink-mid);
}

/* ---------- תוכן הכרטיס ---------- */
.card__lede span { display: block; }
.card__lede {
  margin: 0;
  font-size: .96rem;
  line-height: 1.55;
  color: var(--ink-mid);
}
.card__name mark { padding: .06em .2em; border-radius: 4px; }
.card__name {
  margin: 9px 0 0;
  font-size: 1.09rem;
  font-weight: 800;
  line-height: 1.3;
  letter-spacing: -.012em;
}

/* כותרת המשנה של הנכס, מתחת לשמו. שתי השורות נושאות סימון טורקיז,
   כי יחד הן שם המדריך המלא ולא שם ותיאור. */
.card__desc {
  margin: 6px 0 0;
  font-size: 1rem;
  font-weight: 800;
  line-height: 1.4;
  letter-spacing: -.01em;
}
.card__desc mark { padding: .06em .2em; border-radius: 4px; }

.bullets {
  margin: 16px 0 0;
  padding: 15px 0 0;
  border-top: 1px solid var(--line);
  list-style: none;
  display: grid;
  gap: 10px;
}
.bullets li {
  position: relative;
  padding-right: 27px;
  font-size: .95rem;
  font-weight: 600;
  line-height: 1.45;
}
.bullets li::before {
  content: '';
  position: absolute;
  right: 0;
  top: .1em;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--turq);
}
.bullets li::after {
  content: '';
  position: absolute;
  right: 5.5px;
  top: .48em;
  width: 7px;
  height: 3.5px;
  border-left: 2px solid var(--on-turq);
  border-bottom: 2px solid var(--on-turq);
  transform: rotate(-45deg);
}

/* ==========================================================================
   טופס
   ========================================================================== */

.form { margin-top: 20px; }

.form__cta {
  margin: 0 0 11px;
  font-size: 1.02rem;
  font-weight: 800;
  line-height: 1.35;
  letter-spacing: -.012em;
  text-align: center;
}
.form__fields { display: grid; gap: 9px; }

.form input[type="text"],
.form input[type="email"],
.form input[type="tel"] {
  width: 100%;
  height: 52px;
  padding: 0 15px;
  font: inherit;
  font-size: 1rem;
  direction: rtl;
  text-align: right;
  color: var(--ink);
  background: var(--field);
  border: 1.5px solid var(--line);
  border-radius: 12px;
  outline: none;
  transition: border-color .16s ease, box-shadow .16s ease;
}
.form input::placeholder { color: var(--ink-low); opacity: 1; }
.form input:focus {
  border-color: var(--turq);
  box-shadow: 0 0 0 3.5px color-mix(in srgb, var(--turq) 26%, transparent);
}

/* ---------- צ׳קבוקס ---------- */
.check {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 14px 0 0;
  cursor: pointer;
}
.check input { position: absolute; opacity: 0; width: 0; height: 0; }
.check__box {
  flex: 0 0 auto;
  width: 21px;
  height: 21px;
  margin-top: 1px;
  border: 1.5px solid #cfdadd;
  border-radius: 6px;
  background: #fff;
  position: relative;
  transition: background .14s ease, border-color .14s ease;
}
.check__box::after {
  content: '';
  position: absolute;
  inset: 0;
  margin: auto;
  width: 10px;
  height: 5px;
  border-left: 2.2px solid var(--on-turq);
  border-bottom: 2.2px solid var(--on-turq);
  transform: rotate(-45deg) translateY(-2px);
  opacity: 0;
  transition: opacity .14s ease;
}
.check input:checked + .check__box { background: var(--turq); border-color: var(--turq); }
.check input:checked + .check__box::after { opacity: 1; }
.check input:focus-visible + .check__box {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--turq) 30%, transparent);
}
.check__txt { font-size: .82rem; line-height: 1.5; color: var(--ink-low); }

/* ---------- כפתור ---------- */
.btn {
  display: block;
  width: 100%;
  height: 56px;
  margin-top: 16px;
  font: inherit;
  font-size: 1.1rem;
  font-weight: 800;
  letter-spacing: -.01em;
  color: var(--on-turq);
  background: var(--turq);
  border: 0;
  border-radius: 12px;
  cursor: pointer;
  box-shadow: var(--btn-sh);
  transition: background .16s ease, transform .08s ease, box-shadow .16s ease;
}
.btn:hover  { background: var(--turq-hi); box-shadow: 0 8px 22px rgba(43,190,157,.4); }
.btn:active { transform: translateY(1px); }

.fine {
  margin: 13px 0 0;
  font-size: .76rem;
  line-height: 1.55;
  color: var(--ink-low);
  text-align: center;
}
.fine a { color: inherit; text-underline-offset: 3px; }
.linklike {
  font: inherit; color: inherit; background: none; border: 0; padding: 0;
  text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
}

/* ==========================================================================
   דסקטופ: התמונה בצד שמאל, התוכן מימין
   ========================================================================== */

@media (min-width: 900px) {
  /* בדסקטופ התמונה חוזרת לכיסוי מלא של העמודה. התנהגות רוחב-מלא היא של המובייל בלבד. */
  .bg { inset: 0 auto 0 0; width: 46%; height: auto; }   /* צד שמאל הפיזי */
  .bg img { height: 100%; object-fit: cover; }
  .bg img { object-position: 50% 28%; }
  .bg__veil {
    background: linear-gradient(90deg,
      rgba(255,255,255,0) 0%,
      rgba(255,255,255,.10) 62%,
      rgba(255,255,255,.75) 88%,
      #ffffff 100%);
  }

  .page__inner {
    display: grid;
    grid-template-columns: 54% 46%;
    align-items: center;
    padding: 48px 0;
  }
  .head, .card { margin-inline: 0; }
  .head { margin-bottom: 22px; }   /* מאפס את מרווח המובייל */
  .head {
    grid-column: 1;
    grid-row: 1;
    text-align: right;
    padding: 0 5vw;
    max-width: none;
    align-self: end;
    margin-bottom: 22px;
  }
  .head .rule { margin-inline: 0; }
  .head .sub  { margin-inline: 0; max-width: 30ch; }

  .card {
    grid-column: 1;
    grid-row: 2;
    align-self: start;
    margin: 0 5vw;
    max-width: 470px;
    padding: 26px 24px 22px;
  }

  .t   { font-size: clamp(2.9rem, 3.9vw, 3.8rem); }
  .sub { font-size: 1.1rem; }
}

@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

/* ==========================================================================
   פופ-אפ אישור אחרי שליחה
   ========================================================================== */

.modal {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: grid;
  place-items: center;
  padding: 22px;
  background: rgba(10,25,22,.42);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  animation: fade .18s ease;
}
.modal[hidden] { display: none; }

.modal__box {
  width: 100%;
  max-width: 380px;
  padding: 30px 24px 24px;
  background: #fff;
  border-radius: 20px;
  box-shadow: var(--card-sh);
  text-align: center;
  animation: rise .22s cubic-bezier(.2,.8,.3,1);
}

/* וי טורקיז בעיגול */
.modal__tick {
  display: block;
  width: 54px;
  height: 54px;
  margin: 0 auto 16px;
  border-radius: 50%;
  background: var(--turq);
  position: relative;
}
.modal__tick::after {
  content: '';
  position: absolute;
  inset: 0;
  margin: auto;
  width: 20px;
  height: 10px;
  border-left: 3px solid var(--on-turq);
  border-bottom: 3px solid var(--on-turq);
  transform: rotate(-45deg) translateY(-3px);
}

.modal__t {
  margin: 0 0 20px;
  font-size: 1.16rem;
  font-weight: 800;
  line-height: 1.35;
  letter-spacing: -.014em;
  text-wrap: balance;
}

/* הודעת המייל בפופ-אפ. קטנה מהכותרת בכוונה: היא מידע תפעולי, לא הבשורה. */
.modal__note {
  margin: -8px 0 20px;
  font-size: .88rem;
  line-height: 1.6;
  color: var(--ink-mid);
  text-wrap: pretty;
}

.modal .btn {
  margin-top: 0;
  text-decoration: none;
  display: grid;
  place-items: center;
}

@keyframes fade { from { opacity: 0 } }
@keyframes rise { from { opacity: 0; transform: translateY(12px) } }

/* ==========================================================================
   עמוד המדריך (doc). מסמך קריאה ארוך, מובייל קודם.
   ========================================================================== */

.doc {
  background:
    linear-gradient(180deg, #eaf1f9 0%, #f6fafc 30%, #ffffff 62%);
  background-attachment: fixed;
}

.doc__head {
  max-width: 640px;
  margin: 0 auto;
  padding: 52px 22px 30px;
  text-align: center;
}
.doc__brand {
  margin: 0;
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .2em;
  color: var(--ink-low);
}
.doc__t {
  margin: 12px 0 0;
  font-size: clamp(2.5rem, 11vw, 3.3rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.024em;
}
.doc__sub {
  margin: 14px auto 0;
  /* 26ch ולא 22ch, וגם nowrap על הסימון: "אסטרטגיית לונג׳ביטי אישית" הוא
     שם הנכס והוא נשבר לפני "אישית". שם לא נשבר באמצע. */
  max-width: 26ch;
  font-size: clamp(1.05rem, 4.4vw, 1.2rem);
  font-weight: 700;
  line-height: 1.4;
}
.doc__by {
  margin: 16px 0 0;
  font-size: .84rem;
  font-weight: 700;
  letter-spacing: .15em;
  color: var(--ink-low);
}

/* הערת המייל בראש המדריך. מתחת לקרדיט, קטנה, ולא נכנסת לגוף המסמך. */
.doc__mail {
  margin: 22px auto 0;
  max-width: 40ch;
  padding: 12px 16px;
  border-radius: 10px;
  background: rgba(43, 190, 157, .08);
  font-size: .86rem;
  line-height: 1.6;
  color: var(--ink-mid);
  text-wrap: pretty;
}

/* ---------- גוף המסמך ---------- */
.doc__body {
  max-width: 640px;
  margin: 0 auto;
  padding: 8px 22px 10px;
}

.doc__body h2 {
  margin: 46px 0 16px;
  font-size: clamp(1.5rem, 6.2vw, 1.85rem);
  font-weight: 800;
  line-height: 1.22;
  letter-spacing: -.018em;
  position: relative;
  padding-top: 20px;
}
.doc__body h2::before {
  content: '';
  position: absolute;
  top: 0; right: 0;
  width: 40px;
  height: 3px;
  background: var(--turq);
  border-radius: 2px;
}
.doc__body > h2:first-child { margin-top: 22px; }

.doc__body h3 {
  margin: 30px 0 10px;
  font-size: 1.12rem;
  font-weight: 800;
  line-height: 1.3;
  letter-spacing: -.012em;
}
.doc__body h3.pillar {
  padding: 9px 14px;
  background: #f1f6f8;
  border-right: 3px solid var(--turq);
  border-radius: 0 9px 9px 0;
}

.doc__body p {
  margin: 0 0 18px;
  font-size: 1.06rem;
  line-height: 1.78;
}
.doc__body strong { font-weight: 800; }

/* ---------- טיזר לספר ---------- */
.teaser {
  margin: 26px 0;
  padding: 18px 20px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: 0 2px 10px rgba(14,38,50,.05);
}
.teaser p {
  margin: 0 !important;
  font-size: 1rem !important;
  line-height: 1.65 !important;
  color: var(--ink-mid);
}
.teaser strong { color: var(--ink); }

/* ---------- טופס התחתית ---------- */
.doc__cta {
  max-width: 500px;
  margin: 46px auto 0;
  padding: 28px 22px 24px;
  background: #fff;
  border: 1px solid var(--line-soft);
  border-radius: 20px;
  box-shadow: var(--card-sh);
}
.doc__cta h2 {
  margin: 0 0 10px;
  font-size: 1.3rem;
  font-weight: 800;
  line-height: 1.28;
  letter-spacing: -.016em;
}
.doc__cta > p {
  margin: 0 0 18px;
  font-size: .99rem;
  line-height: 1.6;
  color: var(--ink-mid);
}
.doc__cta .fine { text-align: center; }

/* ---------- פוטר ---------- */
.doc__foot {
  max-width: 640px;
  margin: 44px auto 0;
  padding: 26px 22px 46px;
  border-top: 1px solid var(--line);
}
.doc__disc {
  margin: 0;
  font-size: .82rem;
  line-height: 1.65;
  color: var(--ink-low);
}
.doc__meta {
  margin: 16px 0 0;
  font-size: .8rem;
  color: var(--ink-low);
  letter-spacing: .02em;
}
.doc__meta a { color: inherit; text-underline-offset: 3px; }

@media (min-width: 900px) {
  .doc__head { padding-top: 76px; }
  .doc__body p { font-size: 1.1rem; }
}
.doc__sub span { display: block; }
.doc__sub span + span { margin-top: 5px; }
/* שם הנכס נשאר בשורה אחת. הוא נשבר לפני "אישית" והיה נקרא כשתי כותרות. */
.doc__sub mark { white-space: nowrap; }

/* ---------- הנעה לפעולה ממוסגרת: ההודעה באינסטגרם ---------- */
.dm {
  margin: 34px 0;
  padding: 22px 20px 20px;
  background: linear-gradient(180deg, #eefcf8 0%, #ffffff 100%);
  border: 2px solid var(--turq);
  border-radius: 16px;
  box-shadow: 0 6px 22px rgba(43,190,157,.16);
  position: relative;
}
.dm__icon {
  display: block;
  width: 42px;
  height: 42px;
  margin: 0 auto 12px;
  border-radius: 12px;
  background: var(--turq);
  position: relative;
}
/* בועת הודעה */
.dm__icon::before {
  content: '';
  position: absolute;
  inset: 0;
  margin: auto;
  width: 20px;
  height: 15px;
  border: 2.4px solid var(--on-turq);
  border-radius: 4px;
  transform: translateY(-1px);
}
.dm__icon::after {
  content: '';
  position: absolute;
  left: 13px;
  bottom: 9px;
  width: 6px;
  height: 6px;
  background: var(--turq);
  border-right: 2.4px solid var(--on-turq);
  border-bottom: 2.4px solid var(--on-turq);
  transform: rotate(45deg) skew(-8deg,-8deg);
}
.dm p {
  margin: 0 !important;
  font-size: 1.02rem !important;
  line-height: 1.7 !important;
  text-align: center;
}
.dm a {
  direction: ltr;              /* בלי זה השטרודל נבלע בכיווניות העברית ומופיע בצד הלא נכון */
  unicode-bidi: isolate;
  display: inline-block;
  color: var(--ink);
  font-weight: 800;
  background: var(--turq);
  padding: .04em .3em;
  border-radius: 5px;
  text-decoration: none;
  white-space: nowrap;
}
.dm a:hover { background: var(--turq-hi); }

/* ---------- שני בלוקים זה לצד זה (:::pair) ----------
   מחליף שתי פסקאות מקבילות. שתי עמודות במסך רחב, נערמות במסך צר.
   הרצועה הטורקיז מסמנת את הכותרת, אותה שפה של h2 בגוף המסמך. */
.pair {
  display: grid;
  gap: 12px;
  margin: 26px 0;
}
.pair__card {
  padding: 18px 20px 16px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: 0 2px 10px rgba(14,38,50,.05);
}
.pair__card h4 {
  margin: 0 0 8px;
  padding-top: 12px;
  font-size: 1.02rem;
  font-weight: 800;
  line-height: 1.3;
  letter-spacing: -.012em;
  position: relative;
}
.pair__card h4::before {
  content: '';
  position: absolute;
  top: 0; right: 0;
  width: 28px; height: 3px;
  background: var(--turq);
  border-radius: 2px;
}
.pair__card p {
  margin: 0 !important;
  font-size: 1rem !important;
  line-height: 1.65 !important;
  color: var(--ink-mid);
}
.pair__card strong { color: var(--ink); }

@media (min-width: 700px) {
  .pair { grid-template-columns: 1fr 1fr; gap: 14px; }
}

/* ---------- טבלאות בגוף המדריך ----------
   כאן יושבת רק הטיפוגרפיה של טבלאות המדריך. **כללי הקיפול לכרטיסים
   ירדו מכאן ב-2026-08-17 והם חלים עכשיו על כל טבלה, ראו את הבלוק
   המשותף למטה.** מה שהיה כתוב כאן קודם, "הטבלאות של המסמכים המשפטיים
   גוללות בתוך עצמן וזה בסדר שם", התברר כלא נכון: נמדד על החי שכל ארבע
   הטבלאות ב-/privacy דורשות 460px ומקבלות 329px, ובטבלת הספקים עמודת
   "מיקום השרתים" יצאה לגמרי מהמסך. כלומר גילוי ההעברה לחו״ל היה מה
   שהכי קשה לראות בטלפון, ושם רוב הגולשים. */
.doc--guide .tablewrap {
  margin: 24px 0 26px;
  border-radius: 14px;
}
.doc--guide .tablewrap table { font-size: .97rem; line-height: 1.6; }
.doc--guide .tablewrap thead th { background: #f1f6f8; font-size: .92rem; }
.doc--guide .tablewrap th,
.doc--guide .tablewrap td { padding: .8rem .9rem; }
/* שם התחום או שם הבדיקה. בלי רוחב מינימלי הוא נדחס ונשבר לארבע שורות. */
.doc--guide .tablewrap td:first-child,
.doc--guide .tablewrap th:first-child { min-width: 9.5rem; }
.doc--guide .tablewrap td:first-child { font-weight: 800; color: var(--ink); }

/* טבלת מדדים ומספרים. תאים קצרים, נשארת טבלה בכל רוחב מסך. */
.doc--guide .tablewrap--compact table { min-width: 0; }
.doc--guide .tablewrap--compact th,
.doc--guide .tablewrap--compact td { padding: .7rem .8rem; }
.doc--guide .tablewrap--compact td:not(:first-child) {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* ---------- קיפול טבלה לכרטיסים במסך צר · חל על כל טבלה ----------
   **לא מתוחם למשפחת עמודים.** הכלל הזה ישב עד 2026-08-17 תחת
   `.doc--guide` בלבד, ולכן כל עמוד שנוסף אחריו נפל בשקט לגלילה אופקית.
   טבלה שגוללת הצידה בטלפון היא טבלה שהעמודות האחרונות שלה לא נקראות,
   ובמסמך משפטי דווקא הן נושאות את הגילוי. `tablewrap--compact` (תאים
   קצרים, מספרים) נשארת טבלה בכל רוחב, וזו ההחרגה היחידה. */
@media (max-width: 699px) {
  .tablewrap:not(.tablewrap--compact) {
    overflow-x: visible;
    border: 0;
    border-radius: 0;
  }
  .tablewrap:not(.tablewrap--compact) table { min-width: 0; }
  /* הכותרת יורדת מהמסך אבל נשארת לקוראי מסך */
  .tablewrap:not(.tablewrap--compact) thead {
    position: absolute;
    width: 1px; height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
  }
  .tablewrap:not(.tablewrap--compact) tr {
    display: block;
    margin-bottom: 12px;
    padding: 4px 16px 12px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 14px;
    box-shadow: 0 2px 10px rgba(14,38,50,.05);
  }
  .tablewrap:not(.tablewrap--compact) td {
    display: block;
    padding: 12px 0 0;
    border-bottom: 0;
  }
  .tablewrap:not(.tablewrap--compact) td::before {
    content: attr(data-label);
    display: block;
    margin-bottom: 3px;
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .09em;
    color: var(--ink-low);
  }
  /* בעמודה הראשונה הערך עצמו הוא הכותרת של הכרטיס, אז התווית מיותרת */
  .tablewrap:not(.tablewrap--compact) td:first-child {
    padding-top: 14px;
    font-size: 1.06rem;
  }
  .tablewrap:not(.tablewrap--compact) td:first-child::before { content: none; }
  /* טבלה של שתי עמודות: אחרי כותרת הכרטיס יש תא יחיד, והוא מובן מעצמו.
     התווית שם רק חוזרת על עצמה בכל כרטיס. בטבלה של שלוש עמודות היא נשארת. */
  .tablewrap:not(.tablewrap--compact) td:nth-child(2):last-child::before {
    content: none;
  }
  .tablewrap:not(.tablewrap--compact) tbody tr:last-child td { border-bottom: 0; }

  /* במדריך העמודה הראשונה כבר מודגשת בכלל משלה. במסמך המשפטי אין כזה,
     ובלי זה כותרת הכרטיס נראית כמו עוד שורת טקסט. */
  .doc--legal .tablewrap:not(.tablewrap--compact) td:first-child {
    font-weight: 700;
    color: var(--ink);
    line-height: 1.45;
  }
}

/* שורת עותק המתנה מתחת לטופס הראשי */
.gift {
  margin: 13px 0 0;
  padding: 9px 12px;
  text-align: center;
  font-size: .89rem;
  font-weight: 800;
  line-height: 1.4;
  color: var(--ink);
  background: #eefcf8;
  border: 1px solid var(--turq);
  border-radius: 9px;
}

/* קישורי הפוטר הקטנים לא נשברים באמצע ביטוי (כלל אפס-מילה-יתומה, כמו בריל ובקרוסלה) */
.fine a, .fine .linklike,
.doc__meta a, .doc__meta .linklike { white-space: nowrap; }

/* בלוק ההודעה מתחת לטופס (חובת היידוע, סעיף 11). קטן, אפור, קריא, לא צועק. */
.notice {
  margin-top: 1.1rem; padding-top: .9rem;
  border-top: 1px solid rgba(0,0,0,.08);
  font-size: .76rem; line-height: 1.55; color: var(--muted, #66726f);
  text-align: right;
}
.notice p { margin: 0 0 .5rem; }
.notice p:last-child { margin-bottom: 0; }
.notice__t { font-weight: 700; }
.notice__links { margin-top: .7rem; }
.notice a, .notice .linklike { color: inherit; text-underline-offset: 3px; white-space: nowrap; }
.doc__cta .notice { text-align: center; }

/* ==========================================================================
   מסמכים משפטיים · /privacy ו-/terms
   אותו שלד של .doc, בתוספת טבלאות, רשימות ממוספרות ורמת כותרת רביעית.
   הרף כאן הוא קריאוּת ולא יופי: מסמך שאי אפשר לסרוק בעין לא מגן על אף אחד.
   ========================================================================== */

.doc--legal .doc__head { padding-bottom: 6px; }
.doc--legal .doc__body { font-size: .95rem; }
.doc--legal .doc__body h2 { margin-top: 2.2rem; }
.doc--legal .doc__body h3 {
  margin: 1.5rem 0 .5rem;
  font-size: 1rem; font-weight: 800; color: var(--ink);
}
.doc--legal .doc__body h4 {
  margin: 1.1rem 0 .4rem;
  font-size: .93rem; font-weight: 700; color: var(--ink-mid);
}
.doc--legal .doc__body ol { margin: .6rem 0 1rem; padding-inline-start: 1.3rem; }
.doc--legal .doc__body ol li { margin-bottom: .4rem; line-height: 1.7; }

/* טבלת ספקים וטבלת תקופות שמירה. מ-700px ומעלה טבלה רגילה, ומתחת לזה
   היא מתקפלת לכרטיסים דרך הבלוק המשותף למעלה. `min-width` כאן מבטיח
   שהיא לא נדחסת בדסקטופ, והקיפול מאפס אותו בטלפון. */
.tablewrap {
  margin: 1rem 0 1.4rem;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--line);
  border-radius: 10px;
}
.tablewrap table {
  width: 100%; min-width: 460px;
  border-collapse: collapse;
  font-size: .86rem; line-height: 1.55;
  text-align: right;
}
.tablewrap th, .tablewrap td {
  padding: .6rem .75rem;
  border-bottom: 1px solid var(--line-soft);
  vertical-align: top;
}
.tablewrap thead th {
  background: #f6fafb;
  font-weight: 800; color: var(--ink);
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
.tablewrap tbody tr:last-child td { border-bottom: 0; }

/* ציטוט במסמך משפטי. שקט, לא טיזר. */
.quote {
  margin: 1rem 0;
  padding: .8rem 1rem;
  border-inline-start: 3px solid var(--line);
  background: #fafcfc;
  border-radius: 0 8px 8px 0;
}
.quote p { margin: 0; font-size: .9rem; color: var(--ink-mid); }

/* חיווי שגיאה לצ׳קבוקס ההסכמה. הצ׳קבוקס עצמו מוסתר מהעין, ולכן בועת
   הוולידציה של הדפדפן לא יכולה להיתלות עליו והמשתמש נשאר בלי תשובה.
   הסימון כאן נתלה על הריבוע המעוצב, שהוא מה שרואים בפועל. */
.check--err .check__box {
  border-color: #c0393d;
  box-shadow: 0 0 0 3px rgba(192, 57, 61, .16);
}
.check__err {
  margin: .55rem 0 0;
  font-size: .84rem;
  line-height: 1.5;
  font-weight: 700;
  color: #a3272b;
}

/* שגיאת שליחה בטופס. מופיעה רק כשהשליחה נכשלה בפועל. */
.form__err {
  margin: .7rem 0 0;
  font-size: .82rem; line-height: 1.5;
  color: #a3272b;
  text-align: center;
}

/* ---------- מלכודת דבש. מוסתרת מהעין, אבל קיימת ב-DOM ----------
   לא להסתיר עם left שלילי גדול: במסמך RTL זה לא מוציא את האלמנט מהמסך
   אלא מותח את קנבס הגלילה שמאלה, והעמוד מקבל גלילה אופקית של 10,000 פיקסל.
   החיתוך למטה מסתיר בלי להשפיע על הפריסה. */
.hp {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ---------- הודעת שגיאה בטופס ---------- */
.form__err {
  margin: 10px 0 0;
  padding: 10px 12px;
  border-radius: 8px;
  background: #fdecec;
  color: #8a1c1c;
  font-size: .86rem;
  line-height: 1.5;
}

/* ---------- עמוד ביניים בשורש ---------- */
.soon {
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: 32px 20px;
  text-align: center;
}
.soon__inner { max-width: 34rem; }
.soon__t {
  font-size: clamp(2.1rem, 9vw, 3.4rem);
  font-weight: 800;
  letter-spacing: -.02em;
  margin: 0;
  color: var(--ink);
}
.soon__rule {
  display: block;
  width: 84px;
  height: 4px;
  margin: 20px auto 24px;
  border-radius: 2px;
  background: var(--turq);
}
.soon__p {
  font-size: 1.05rem;
  line-height: 1.65;
  color: var(--ink-mid);
  margin: 0 0 8px;
}
/* ההנעה בעמוד הביניים. הכפתור הוא הרכיב היחיד שמושך עין בעמוד הזה,
   ולכן הוא לא צריך להיות רחב מדי כדי לעבוד. */
.soon__lede {
  margin-top: 22px;
}
.soon__cta {
  margin: 24px 0 0;
}
.soon__cta .btn {
  display: inline-grid;
  place-items: center;
  margin-top: 0;
  min-width: 15rem;
  text-decoration: none;
}

.soon__foot {
  margin-top: 40px;
  font-size: .82rem;
  color: var(--ink-low);
}
.soon__foot a { color: inherit; text-underline-offset: 3px; }

/* ==========================================================================
   באנר ההסכמה ומסך הבחירה לפי קטגוריה
   המפרט: final-cookie-banner.md. שלושת הכפתורים שווי משקל, זו דרישה
   משפטית ולא עיצובית: "רק ההכרחיות" בולט בדיוק כמו "מאשרים הכל".
   ========================================================================== */

.consent {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: 40; /* מתחת לפופ-אפ ההצלחה (50), שלא יסתיר אותו */
  padding: 6px;
}
.consent[hidden] { display: none; }

.consent__bar {
  max-width: 780px;
  margin: 0 auto;
  padding: 7px 11px 6px;
  background: #fff;
  border: 1px solid var(--line-soft);
  border-radius: 12px;
  box-shadow: 0 -2px 10px rgba(14,38,50,.06), 0 8px 24px rgba(14,38,50,.14);
}

.consent__t {
  margin: 0 0 6px;
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: -.01em;
}

/* במובייל הטקסט קומפקטי בכוונה: הבאנר יושב מעל הטופס, וכל שורה
   מיותרת בו היא שדה שמוסתר. הנוסח לא קוצר, רק העימוד. */
.consent__txt {
  margin: 0 0 7px;
  font-size: .73rem;
  line-height: 1.38;
  color: var(--ink-mid);
}
.consent__txt strong { color: var(--ink); }

.consent__btns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}

/* הכפתורים יורשים את .btn ומכווצים לגובה באנר */
.consent__btn {
  width: auto;
  height: 32px;
  margin-top: 0;
  font-size: .8rem;
  border-radius: 8px;
  box-shadow: none;
}

.consent__foot {
  margin: 5px 0 0;
  font-size: .69rem;
  line-height: 1.3;
  color: var(--ink-low);
  text-align: center;
}
.consent__foot a { color: inherit; text-underline-offset: 3px; }

/* הגרסה הקצרה בכל רוחב מסך, והכותרת יורדת (רותם, 2026-08-17: "שיהיה
   בתחתית קטן, שלא יפריע לאתר"). מה שנשאר הוא כל מה שנושא משקל:
   שקיימות עוגיות, שחלקן מודדות ומפרסמות, **שהן פועלות כברירת מחדל**,
   ושאפשר לכבות. שלושת המסלולים נשמרים: שני הכפתורים שווי המשקל,
   ובשורה מתחתם בחירה לפי קטגוריה וקישור למדיניות. הנוסח לא נגעו בו. */
.consent--full { display: none; }

/* מסך נמוך מאוד: הבאנר מתכווץ עוד, כי שם הוא הכי מסוכן לטופס. */
@media (max-height: 700px) {
  .consent__txt { font-size: .7rem; margin-bottom: 5px; }
  .consent__btn { height: 30px; }
}

/* מרוחב זה ומעלה הבאנר נכנס לשורה אחת: טקסט משמאל, שני הכפתורים
   לצידו, ושורת הקישורים מתחת ברוחב מלא. */
@media (min-width: 700px) {
  .consent { padding: 8px; }
  .consent__bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 14px;
    padding: 8px 14px;
  }

  .consent__txt  { flex: 1 1 280px; margin: 0; font-size: .77rem; }
  .consent__btns { grid-template-columns: auto auto; gap: 8px; }
  .consent__btn  { height: 32px; font-size: .82rem; padding-inline: 16px; }
  .consent__foot { flex-basis: 100%; margin: 0; font-size: .7rem; }
}

/* ---------- מסך הבחירה לפי קטגוריה ---------- */

.consent-prefs {
  position: fixed;
  inset: 0;
  z-index: 45;
  display: grid;
  place-items: center;
  padding: 22px;
  background: rgba(10,25,22,.42);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  animation: fade .18s ease;
}
.consent-prefs[hidden] { display: none; }
body.has-consent-prefs { overflow: hidden; }

.consent-prefs__box {
  width: 100%;
  max-width: 420px;
  max-height: 86dvh;
  overflow-y: auto;
  padding: 22px 20px 18px;
  background: #fff;
  border-radius: 20px;
  box-shadow: var(--card-sh);
  animation: rise .22s cubic-bezier(.2,.8,.3,1);
}

.consent-prefs__t {
  margin: 0 0 14px;
  font-size: 1.16rem;
  font-weight: 800;
  letter-spacing: -.01em;
}

.consent-prefs__row {
  padding: 12px 0;
  border-top: 1px solid var(--line-soft);
}

.consent-prefs__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.consent-prefs__name { font-weight: 700; }

.consent-prefs__state {
  font-size: .78rem;
  color: var(--ink-low);
}

.consent-prefs__desc {
  margin: 6px 0 0;
  font-size: .82rem;
  line-height: 1.55;
  color: var(--ink-low);
}

.consent-prefs__save {
  height: 48px;
  margin-top: 14px;
  font-size: 1rem;
}

/* מתג הקטגוריה. RTL: הכפתור נע מימין (כבוי) לשמאל (דלוק) דרך מיקום לוגי. */
.consent-toggle {
  position: relative;
  flex: 0 0 auto;
  width: 44px;
  height: 26px;
  padding: 0;
  background: var(--line);
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  transition: background .16s ease;
}
.consent-toggle__knob {
  position: absolute;
  top: 3px;
  inset-inline-start: 3px;
  width: 20px;
  height: 20px;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 1px 3px rgba(14,38,50,.25);
  transition: transform .16s ease;
}
.consent-toggle[aria-checked="true"] { background: var(--turq); }
.consent-toggle[aria-checked="true"] .consent-toggle__knob {
  /* RTL: קצה ההתחלה הוא ימין, אז הכפתור נע שמאלה, כלומר X שלילי */
  transform: translateX(-18px);
}
.consent-toggle:focus-visible {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--turq) 30%, transparent);
}

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

.a11y {
  position: fixed;
  left: 10px;          /* שמאל פיזי בכוונה, כדי לא ליפול על תוכן RTL */
  bottom: 150px;       /* מעל הבאנר, גם בגרסת המובייל הגבוהה שלו */
  z-index: 35;         /* מתחת לבאנר ההסכמה (40) ולפופ-אפ (50) */
}

.a11y__btn {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  padding: 0;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(14,38,50,.14);
  transition: box-shadow .16s ease, transform .08s ease;
}
.a11y__btn:hover  { box-shadow: 0 4px 14px rgba(14,38,50,.22); }
.a11y__btn:active { transform: translateY(1px); }
.a11y__btn:focus-visible {
  outline: 2px solid var(--turq);
  outline-offset: 2px;
}

/* איקון הנגישות הבינלאומי, מצויר ב-CSS כדי לא לגרור קובץ */
.a11y__icon {
  position: relative;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--turq);
}
.a11y__icon::before {   /* ראש */
  content: '';
  position: absolute;
  top: 2.5px; left: 50%;
  width: 4px; height: 4px;
  margin-left: -2px;
  border-radius: 50%;
  background: var(--on-turq);
}
.a11y__icon::after {    /* גוף וזרועות */
  content: '';
  position: absolute;
  top: 8px; left: 50%;
  width: 12px; height: 8px;
  margin-left: -6px;
  border-top: 2px solid var(--on-turq);
  border-left: 2px solid var(--on-turq);
  border-right: 2px solid var(--on-turq);
  border-radius: 1px 1px 4px 4px;
}

.a11y__panel {
  position: absolute;
  left: 0;
  bottom: 46px;
  width: 208px;
  padding: 12px;
  background: #fff;
  border: 1px solid var(--line-soft);
  border-radius: 14px;
  box-shadow: 0 10px 30px rgba(14,38,50,.18);
  text-align: right;
}
.a11y__panel[hidden] { display: none; }

.a11y__t {
  margin: 0 0 8px;
  font-size: .9rem;
  font-weight: 800;
}

.a11y__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}
.a11y__label { font-size: .8rem; color: var(--ink-mid); }
.a11y__steps { display: flex; gap: 5px; }

.a11y__step {
  width: 30px; height: 28px;
  font: inherit; font-size: .8rem; font-weight: 700;
  color: var(--ink);
  background: var(--line-soft);
  border: 0; border-radius: 7px;
  cursor: pointer;
}
.a11y__step:hover { background: var(--line); }

.a11y__opt {
  display: block;
  width: 100%;
  margin-bottom: 5px;
  padding: 7px 9px;
  font: inherit; font-size: .8rem;
  text-align: right;
  color: var(--ink);
  background: var(--line-soft);
  border: 0; border-radius: 7px;
  cursor: pointer;
}
.a11y__opt:hover { background: var(--line); }
.a11y__opt[aria-pressed="true"] {
  color: var(--on-turq);
  background: var(--turq);
  font-weight: 700;
}

.a11y__reset {
  display: block;
  width: 100%;
  margin: 8px 0 6px;
  padding: 6px;
  font: inherit; font-size: .78rem;
  color: var(--ink-low);
  background: none;
  border: 1px solid var(--line);
  border-radius: 7px;
  cursor: pointer;
}

.a11y__link {
  display: block;
  font-size: .74rem;
  color: var(--ink-low);
  text-align: center;
  text-underline-offset: 3px;
}

.a11y__step:focus-visible,
.a11y__opt:focus-visible,
.a11y__reset:focus-visible,
.a11y__link:focus-visible {
  outline: 2px solid var(--turq);
  outline-offset: 1px;
}

/* ---------- מה שההעדפות עושות בפועל ---------- */

/* גודל טקסט. rem נגזר מהשורש, אז שינוי כאן מגדיל את כל העמוד יחד. */
html.a11y-scaled { font-size: calc(100% * var(--a11y-scale, 1)); }

/* הפאנל עצמו לא גדל, אחרת הוא בורח מהמסך בהגדלה מקסימלית */
html.a11y-scaled .a11y__panel { font-size: 16px; }

html.a11y-contrast body {
  background: #fff;
}
html.a11y-contrast,
html.a11y-contrast .sub,
html.a11y-contrast .card__lede,
html.a11y-contrast .bullets li,
html.a11y-contrast .notice,
html.a11y-contrast .notice p,
html.a11y-contrast .check__txt,
html.a11y-contrast .fine,
html.a11y-contrast .doc__meta,
html.a11y-contrast .consent__txt,
html.a11y-contrast .consent__foot {
  color: #000 !important;
}
html.a11y-contrast .bg { opacity: .12; }   /* התמונה יורדת, הטקסט מנצח */
html.a11y-contrast mark { background: #ffec3d; color: #000; }

html.a11y-links a {
  text-decoration: underline !important;
  text-underline-offset: 2px;
  font-weight: 700;
}

html.a11y-spacing body {
  line-height: 1.9 !important;
  letter-spacing: .02em;
}
html.a11y-spacing p { margin-bottom: 1.1em; }

html.a11y-stopmotion *,
html.a11y-stopmotion *::before,
html.a11y-stopmotion *::after {
  animation: none !important;
  transition: none !important;
  scroll-behavior: auto !important;
}

@media (min-width: 700px) {
  .a11y { bottom: 120px; }
}

/* ==========================================================================
   🔴 כלל ספציפיות לכל מה שמתחת, ואל תסירו את הקידומת `.doc__body`

   `.doc__body p` הוא (0,1,1) וגובר על מחלקה בודדת (0,1,0). כלומר כל כלל
   שמנסה לקבוע גודל, מרווח או יישור לפסקה בתוך גוף המסמך ונכתב כמחלקה
   לבדה, **מתבטל בשקט**. זה קרה כאן שלוש פעמים ביום אחד: שורת ההפרש
   במחשבון נדחפה 10 פיקסלים לצד, והמילה "תודה" בעמוד הבונוס נשארה בגודל
   רגיל למרות שהוגדרה ענקית. **בשתי הפעמים הקוד נראה נכון והמסך אמר אחרת.**

   הכלל: מחלקה שחלה על <p> בתוך .doc__body נכתבת עם הקידומת.
   ========================================================================== */

/* ==========================================================================
   כרטיסי סקשן לעמודי הספר והכלי (משותף ל-doc--bonus ול-doc--tool)
   אותו כרטיס לבן מרחף של האתר (גבול line-soft, רדיוס 20, צל card-sh),
   ברוחב טור המסמך. שדרוג עיצוב לבקשת רותם, 2026-09-01, מתוך השפה הקיימת
   בלבד: אפס צבע חדש, אפס גופן חדש.
   ========================================================================== */

.pcard {
  background: #fff;
  border: 1px solid var(--line-soft);
  border-radius: 20px;
  box-shadow: var(--card-sh);
  padding: 28px 22px;
  margin: 0 0 22px;
}
@media (min-width: 700px) { .pcard { padding: 34px 30px; } }

/* h2 בתוך כרטיס: בלי המרווח הענק של זרימת מסמך, עם פס הטורקיז הקיים */
.pcard > h2 { margin-top: 0; }
/* הרכיב האחרון בכרטיס לא גורר מרווח תחתון, כדי שהריפוד יהיה סימטרי */
.pcard > :last-child { margin-bottom: 0; }

/* כרטיס מודגש: הרקע הטורקיז הרך הקיים (הגוון של בלוק ההנעה הממוסגר).
   אחד לעמוד, על הדבר שהקורא אמור לקחת. */
.pcard--focus {
  background: #eefcf8;
  border-color: color-mix(in srgb, var(--turq) 30%, #fff);
}

/* כפתור-קישור בתוך כרטיס: מלוא הרוחב, כמו כפתורי הטפסים באתר */
.pcard .btn {
  display: block;
  width: 100%;
  text-decoration: none;
  text-align: center;
  line-height: 56px;
  margin-top: 20px;
}

/* ==========================================================================
   עמוד הבונוס לקוראי הספר (/book-bonus · היעד של ההפניה המודפסת /bonus)
   ========================================================================== */

.doc--bonus .doc__head { padding-bottom: 22px; }
.doc--bonus .doc__body { padding-top: 0; }

/* פסקת פתיחה גדולה מעט מהגוף, כי היא נקראת ראשונה */
.bonus__hero p { font-size: 1.12rem; }
.bonus__hero .bonus__thanks { font-weight: 600; color: var(--ink); }

/* רכיב הווי בזרימת כרטיס: בלי קו הכרטיס-טופס העליון */
.doc--bonus .bullets { border-top: 0; padding-top: 0; margin: 0 0 18px; }
.doc--bonus .bullets li { font-size: 1rem; }

.doc__body .bonus__ig a,
.doc__body .bonus__hint a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* שורת הסגירה: ממורכזת, חמה, מחוץ לכרטיסים */
.doc__body .bonus__close {
  margin: 30px 0 6px;
  text-align: center;
  font-size: 1.06rem;
  font-weight: 700;
  color: var(--ink-mid);
}

/* ==========================================================================
   מחשבון הגיל הביולוגי (/tools/biological-age · היעד של ההפניה המודפסת /gil)

   **טור אחד, שדה מתחת לשדה** (הכרעת רותם, 2026-09-02, על רינדור).
   גריד דו-טורי נוסה ונפסל: השדות אינם באותו אורך, השורה האחרונה נשארה
   חסרה, והטופס נקרא מבולגן וקשה למילוי. **טופס שממלאים תוך כדי הקלדה
   מתדפיס נקרא בעמודה אחת**, וזו גם הצורה של הכלי המקורי.
   ========================================================================== */

/* שורת תווית האמון: גלולה שקטה */
.doc__body .tool__evidence {
  display: inline-block;
  margin: 4px 0 0;
  padding: 7px 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: .82rem;
  color: var(--ink-mid);
  background: #fff;
}
.doc__body .tool__evidence a { color: inherit; text-underline-offset: 3px; }
@media (max-width: 699px) { .tool__evidence { border-radius: 14px; } }

.doc--tool .doc__body > ul.bullets { border-top: 0; padding-top: 0; margin: 0 0 22px; }
.doc--tool .doc__body > ul.bullets li { font-size: 1rem; }

/* --- השדות: טור אחד, והתווית בצד ולא מעל --- */
/* הכרעת רותם 2026-09-02 על הרינדור: "השדות רחבים מדי, שיהיה ברוחב של 4 ספרות,
   ותכניס את שם המדד מהצד ולא מעל, לחסוך אורך של העמוד". שורה אחת לשדה
   חוסכת כ-28 פיקסלים לכל אחד מעשרת השדות. */
.tool { margin: 0 0 22px; }

.tf { margin: 0 0 14px; }
.tf:last-of-type { margin-bottom: 4px; }

.tf__label {
  flex: 1 1 auto;
  min-width: 0;
  align-self: center;
  font-size: .95rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--ink);
  text-wrap: balance;
}
/* הקיצור הלועזי הוא מה שמופיע בתדפיס, ולכן הוא נשאר ליד השם ולא יורד */
.tf__en {
  font-size: .82em;
  font-weight: 600;
  color: var(--ink-low);
  white-space: nowrap; /* "hs-CRP" לא נשבר באמצע הקיצור */
}
.tf__opt {
  font-size: .78em;
  font-weight: 600;
  color: var(--ink-low);
  white-space: nowrap;
}
.tf__row { display: flex; gap: 8px; align-items: stretch; }
.tf__in {
  flex: 0 0 74px;
  width: 74px;
  min-width: 0;
  text-align: center;
  height: 52px;
  padding: 0 15px;
  font: inherit;
  font-size: 1rem;
  text-align: start;
  color: var(--ink);
  background: var(--field);
  border: 1.5px solid var(--line);
  border-radius: 12px;
  outline: none;
  transition: border-color .16s ease, box-shadow .16s ease;
}
.tf__in::placeholder { color: var(--ink-low); opacity: 1; }
.tf__in:focus {
  border-color: var(--turq);
  box-shadow: 0 0 0 3.5px color-mix(in srgb, var(--turq) 26%, transparent);
}

/* בורר היחידה ברוחב קבוע, כדי שכל השדות ייגמרו באותו קו אנכי */
.tf__unit {
  flex: 0 0 86px;
  width: 86px;
  height: 52px;
  padding: 0 10px;
  font: inherit;
  font-size: .88rem;
  color: var(--ink-mid);
  background: var(--field);
  border: 1.5px solid var(--line);
  border-radius: 12px;
}
.tf__unit--fixed {
  display: grid;
  place-items: center;
  background: transparent;
  border-color: var(--line-soft);
}
.doc__body .tf__hint, .tf__note {
  margin: 7px 0 0;
  padding-inline-start: 4px;
  font-size: .82rem;
  line-height: 1.55;
  color: var(--ink-low);
}
.doc__body .tf__err {
  margin: 7px 0 0;
  font-size: .84rem;
  line-height: 1.5;
  color: #a3272b; /* משפחת האדום הקיימת של מצבי שגיאה */
}
.tf__check { margin-top: 12px; }

.tool__trust {
  margin: 22px 0 0;
  font-size: .82rem;
  color: var(--ink-low);
  text-align: center;
}
.tool .btn { margin-top: 12px; }
.doc__body .tool__syserr {
  margin: 12px 0 0;
  padding: 10px 14px;
  border-radius: 10px;
  background: #fdecec;
  color: #8a1c1c;
  font-size: .9rem;
}

/* --- מסך התוצאה --- */
/* 🔴 כל הכללים כאן מקודמים תחת .doc--tool בכוונה. `.doc__body p` הוא
   (0,1,1) ולכן הוא גובר על מחלקה בודדת, וזה מה שביטל בשקט את
   `margin: auto` ודחף את שורת ההפרש 10 פיקסלים לצד אחד. נתפס במדידה,
   לא בעין. זה בדיוק דפוס שורה 10 בצ׳ק-ליסט: כלל שנכון בהקשר שבו נכתב
   ושגוי הקשר אחד משם. */
.tool__enter[hidden], .tool__out[hidden] { display: none; }

.doc__body .tool__back { margin: 0 0 14px; font-size: .9rem; }
.doc__body .tool__back .linklike { font-weight: 700; color: var(--ink-mid); }

.tool__result { text-align: center; }
.doc--tool .tool__result > h2 { text-align: center; margin-top: 0; }
.doc--tool .tool__result h2::before { right: 50%; transform: translateX(50%); }
.doc--tool .tool__result > h2:focus { outline: none; }
.doc--tool .tool__numline {
  margin: 14px 0 0;
  font-size: clamp(4.4rem, 24vw, 6.4rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.024em;
}
/* בגודל הזה הסימון הופך לגוש, ולכן הריפוד מהודק לספרות עצמן. הטורקיז
   נשאר על המספר, כי הוא הדבר שהקורא בא בשבילו. */
.tool__num { padding: 0 .06em; border-radius: 10px; line-height: 1.02; }
.tool__years {
  display: block;
  margin-top: 20px;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: .12em;
  color: var(--ink-low);
}
.doc--tool .tool__diff {
  margin: 16px auto 0;
  max-width: 30ch;
  font-size: 1.2rem;
  font-weight: 800;
  line-height: 1.45;
}
.tool__bar {
  position: relative;
  height: 4px;
  margin: 26px 8px 10px;
  border-radius: 2px;
  background: var(--line);
}
.tool__dot {
  position: absolute;
  top: 50%;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  transform: translate(50%, -50%);
  border: 3px solid #fff;
  box-shadow: 0 1px 4px rgba(14,38,50,.25);
}
.tool__dot--chrono { background: var(--ink-low); }
.tool__dot--bio    { background: var(--ink); }
.doc__body .tool__barlabels { font-size: .84rem; color: var(--ink-mid); }

.doc--tool .tool__crpnote,
.doc--tool .tool__thnote {
  margin: 16px auto 0;
  max-width: 46ch;
  font-size: .86rem;
  line-height: 1.6;
  color: var(--ink-mid);
}

.doc--tool .tool__result > p { margin-inline: auto; }
.doc--tool .tool__result h3 {
  margin-top: 30px;
  padding-top: 18px;
  border-top: 1px solid var(--line-soft);
}
.tool__pulls {
  list-style: none;
  margin: 12px 0 14px;
  padding: 0;
  display: grid;
  gap: 8px;
}
.tool__pulls li {
  padding: 10px 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  font-size: .95rem;
  font-weight: 600;
  background: #fff;
}

.tool__full { margin-top: 6px; }
.tool__full summary {
  cursor: pointer;
  font-weight: 700;
  text-underline-offset: 3px;
  padding: 6px 0;
}
/* הרווח בין הכותרת למה שנפתח מתחתיה. בלעדיו הטקסט נדבק לכותרת ברגע
   שפותחים, וזה בדיוק הרגע שבו הקורא צריך להבחין שנוסף משהו. */
.tool__full[open] summary { margin-bottom: 14px; }
.tool__full { margin-bottom: 4px; }
.doc--tool .tool__mort { font-size: .95rem; color: var(--ink-mid); margin-bottom: 0; }
.doc--tool .tool__prop { color: var(--ink-mid); max-width: 46ch; margin-inline: auto; }
.doc--tool .tool__disc {
  margin-top: 20px;
  padding-top: 14px;
  border-top: 1px solid var(--line-soft);
  font-size: .84rem;
  line-height: 1.6;
  color: var(--ink-low);
}

/* --- ההנעה שאחרי התוצאה --- */
.tool__form { margin-top: 20px; }
.doc__body .tool__formlede {
  margin: 0 0 14px;
  font-size: .9rem;
  color: var(--ink-mid);
}
.tool__form .form { margin-top: 0; }

/* --- השאלות: כל אחת נפתחת בלחיצה --- */
.faq {
  border-top: 1px solid var(--line-soft);
  margin-top: 6px;
}
.faq__item { border-bottom: 1px solid var(--line-soft); }
.faq__q {
  display: block;
  position: relative;
  padding: 17px 0 17px 30px;
  font-size: 1.02rem;
  font-weight: 700;
  line-height: 1.45;
  color: var(--ink);
  cursor: pointer;
  list-style: none;
}
.faq__q::-webkit-details-marker { display: none; }

/* הפלוס שנהיה מינוס. בצד שמאל הפיזי, שלא יתנגש בטקסט RTL */
.faq__q::after {
  content: '';
  position: absolute;
  left: 4px;
  top: 50%;
  width: 13px;
  height: 13px;
  margin-top: -6px;
  background:
    linear-gradient(var(--ink-mid), var(--ink-mid)) center/13px 2px no-repeat,
    linear-gradient(var(--ink-mid), var(--ink-mid)) center/2px 13px no-repeat;
  transition: transform .18s ease;
}
.faq__item[open] .faq__q::after {
  background: linear-gradient(var(--ink-mid), var(--ink-mid)) center/13px 2px no-repeat;
}
.faq__q:focus-visible {
  outline: 2px solid var(--turq);
  outline-offset: 3px;
  border-radius: 6px;
}
.faq__a {
  margin: 0 0 20px;
  font-size: .98rem;
  line-height: 1.75;
  color: var(--ink-mid);
}

/* רכיב שמוגדר לו display מפורש מתעלם מ-hidden, ולכן כל אחד כזה מקבל כלל
   משלו. זו המוסכמה שכבר קיימת בקובץ (.modal[hidden], .consent[hidden]).
   נתפס על הרינדור: הכפתור "שלח לי את חמשת הצעדים" נשאר על המסך אחרי
   שהטופס נפתח, כי ל-.btn יש display:block. */
.btn[hidden] { display: none; }
.tool__pulls[hidden] { display: none; }

/* ==========================================================================
   עמוד חוות הדעת על הספר (/book-bonus/feedback)
   טופס באתר ולא Google Form (הכרעת רותם 2026-09-02). נבנה מרכיבי הטופס
   הקיימים: אותו גובה שדה, אותה טבעת מיקוד, אותו אדום למצבי שגיאה.
   ========================================================================== */

.doc__body .fb__lede { font-size: 1.06rem; }

.fb__q { margin: 0 0 26px; padding: 0; border: 0; }
.fb__q:last-of-type { margin-bottom: 20px; }

.fb__label {
  display: block;
  margin: 0 0 9px;
  padding: 0;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.45;
  color: var(--ink);
}

.fb__area,
.fb__in {
  width: 100%;
  padding: 12px 15px;
  font: inherit;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--ink);
  background: var(--field);
  border: 1.5px solid var(--line);
  border-radius: 12px;
  outline: none;
  resize: vertical;
  transition: border-color .16s ease, box-shadow .16s ease;
}
.fb__in { height: 52px; padding: 0 15px; }
.fb__area:focus,
.fb__in:focus {
  border-color: var(--turq);
  box-shadow: 0 0 0 3.5px color-mix(in srgb, var(--turq) 26%, transparent);
}

/* אפשרויות בחירה: כפתורי גלולה, ולא עיגולי רדיו זעירים שקשה לפגוע בהם */
.fb__opts { display: flex; flex-wrap: wrap; gap: 8px; }
.fb__opt { position: relative; }
.fb__opt input {
  position: absolute;
  opacity: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  cursor: pointer;
}
.fb__opt span {
  display: block;
  padding: 10px 16px;
  border: 1.5px solid var(--line);
  border-radius: 999px;
  font-size: .95rem;
  font-weight: 600;
  color: var(--ink-mid);
  background: #fff;
  transition: border-color .14s ease, background .14s ease, color .14s ease;
}
.fb__opt input:checked + span {
  border-color: var(--turq);
  background: #eefcf8;
  color: var(--ink);
}
.fb__opt input:focus-visible + span {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--turq) 30%, transparent);
}
.fb__opts--scale .fb__opt span { min-width: 52px; text-align: center; }

.doc__body .fb__hint {
  margin: 8px 0 0;
  font-size: .82rem;
  line-height: 1.55;
  color: var(--ink-low);
}
.doc__body .fb__err {
  margin: 8px 0 0;
  font-size: .84rem;
  color: #a3272b; /* משפחת האדום הקיימת */
}
.doc__body .fb__notice {
  margin: 4px 0 0;
  font-size: .78rem;
  line-height: 1.6;
  color: var(--ink-low);
}
.doc__body .fb__syserr {
  margin: 12px 0 0;
  padding: 10px 14px;
  border-radius: 10px;
  background: #fdecec;
  color: #8a1c1c;
  font-size: .9rem;
}
.fb[hidden] { display: none; }

.fb__done { text-align: center; }
.fb__donet {
  margin: 0;
  font-size: 1.15rem;
  font-weight: 800;
  line-height: 1.5;
}

/* המילה "תודה" בעמוד הבונוס. גדולה בכוונה: זה המשפט היחיד בעמוד שהוא
   כולו רגש, והוא נאמר לפני שמבקשים משהו. */
.doc__body .bonus__thanks { margin-bottom: 6px; }
.doc__body .bonus__thanks-big {
  margin: 0 0 18px;
  font-size: clamp(2.4rem, 11vw, 3.2rem);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -.024em;
  color: var(--ink);
}

/* גיל ומין באותה שורה: שתי שאלות קצרות שלא צריכות שורה שלמה כל אחת */
.fb__q--pair { display: grid; gap: 18px; }
@media (min-width: 560px) {
  .fb__q--pair { grid-template-columns: 120px 1fr; gap: 16px; align-items: start; }
}
.fb__q--pair fieldset { margin: 0; padding: 0; border: 0; }
.fb__in--short { max-width: 120px; }
.fb__opt-tag {
  font-size: .78em;
  font-weight: 600;
  color: var(--ink-low);
}

/* הקישור למחשבון בעמוד הבית. קטן ומתחת לכפתור בכוונה: הכפתור הוא ההנעה,
   וזה ניווט. שני כפתורים טורקיז באותו מסך מבטלים זה את זה. */
.soon__also {
  margin-top: 18px;
  font-size: .92rem;
  color: var(--ink-mid);
}
.soon__also a { color: inherit; text-underline-offset: 3px; }