/* ==========================================================================
   משרד עורכי דין מאור גרצנשטיין — Core Design System
   v1.0 · Pure CSS3 · RTL-first · No frameworks
   --------------------------------------------------------------------------
   Contents
   01. Tokens
   02. Reset & base
   03. Layout primitives
   04. Typography
   05. Buttons & links
   06. Header / navigation
   07. Hero
   08. Trust strip
   09. Practice cards
   09g. People (team page)
   10. Contact & forms
   11. Footer
   12. Mobile action bar
   12b. Floating WhatsApp + lead popup
   13. Article components (TLDR / TOC / FAQ / shortcodes)
   13b. Articles (hub, cards, article page)
   14. Motion & accessibility
   ========================================================================== */

/* ==========================================================================
   01. Tokens
   ========================================================================== */

:root {
  /* --- Color ------------------------------------------------------------
     navy    : trust, authority. Headings + hero canvas.
     ink     : sampled from the firm's own logo (#2e3d6c). Bridges the new
               palette to the existing mark. Used for strokes, rules, tiles.
     emerald : action. Reserved for things the visitor can do.
     paper   : the page.                                                   */
  --navy-900: #0f172a;
  --navy-800: #1e293b;
  --navy-700: #334155;

  --ink-600: #2e3d6c;
  --ink-500: #3d5089;
  --ink-050: rgba(46, 61, 108, 0.07);

  --emerald-600: #059669;
  --emerald-700: #047857;
  --emerald-800: #036049;
  --emerald-050: rgba(5, 150, 105, 0.09);

  --paper: #f8fafc;
  --surface: #ffffff;
  --line: #e2e8f0;
  --line-strong: #cbd5e1;
  --muted: #64748b;
  --muted-invert: rgba(226, 232, 240, 0.78);

  /* --- Type -------------------------------------------------------------
     System fonts only — no web-font request, no render-blocking, no FOUT.
     Each OS supplies its own Hebrew-capable UI face: Segoe UI on Windows,
     San Francisco on Apple, Roboto/Noto on Android. */
  --font-display: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans Hebrew", Arial, sans-serif;
  --font-body: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans Hebrew", Arial, sans-serif;

  --step--1: clamp(0.82rem, 0.79rem + 0.14vw, 0.9rem);
  --step-0: clamp(1rem, 0.96rem + 0.2vw, 1.08rem);
  --step-1: clamp(1.15rem, 1.08rem + 0.35vw, 1.32rem);
  --step-2: clamp(1.38rem, 1.26rem + 0.6vw, 1.75rem);
  --step-3: clamp(1.7rem, 1.45rem + 1.2vw, 2.4rem);
  --step-4: clamp(2.1rem, 1.6rem + 2.4vw, 3.6rem);

  /* --- Space ------------------------------------------------------------ */
  --space-2xs: 0.375rem;
  --space-xs: 0.625rem;
  --space-s: 1rem;
  --space-m: 1.5rem;
  --space-l: 2.25rem;
  --space-xl: 3.5rem;
  --space-2xl: clamp(2.5rem, 4.5vw, 4rem);

  --wrap: 1180px;
  --wrap-narrow: 760px;

  /* --- Shape & elevation ------------------------------------------------ */
  --radius: 16px;
  --radius-lg: 24px;
  --radius-pill: 999px;

  --shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.06);
  --shadow-s: 0 2px 8px rgba(15, 23, 42, 0.06), 0 1px 2px rgba(15, 23, 42, 0.04);
  --shadow-m: 0 10px 30px rgba(15, 23, 42, 0.08), 0 2px 6px rgba(15, 23, 42, 0.04);
  --shadow-l: 0 24px 60px rgba(15, 23, 42, 0.12), 0 4px 12px rgba(15, 23, 42, 0.06);
  --shadow-cta: 0 8px 20px rgba(5, 150, 105, 0.28);

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --logo-h: 100px;
  --logo-h-compact: 64px;
  --header-h: 132px;
  --header-h-compact: 92px;
}

/* ==========================================================================
   02. Reset & base
   ========================================================================== */

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

* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h-compact) + 16px);
}

body {
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.7;
  color: var(--navy-800);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

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

img { height: auto; }

input,
button,
textarea,
select {
  font: inherit;
  color: inherit;
}

::selection {
  background: var(--emerald-600);
  color: #fff;
}

/* Skip link — first stop for keyboard and screen-reader users */
.skip-link {
  position: absolute;
  inset-inline-start: var(--space-s);
  top: -100px;
  z-index: 200;
  padding: 0.7rem 1.2rem;
  border-radius: var(--radius);
  background: var(--navy-900);
  color: #fff;
  font-weight: 700;
  text-decoration: none;
  transition: top 0.2s var(--ease);
}

.skip-link:focus { top: var(--space-s); }

/* ==========================================================================
   03. Layout primitives
   ========================================================================== */

.wrap {
  width: min(100% - 2.5rem, var(--wrap));
  margin-inline: auto;
}

.section { padding-block: var(--space-2xl); }

/* בעמוד מחשבון, בין הכלי לבין הטקסט שמסביר אותו נערמו שתי ריפודי
   סקשן מלאים — 57.6 ועוד 57.6 בדסקטופ, שהם פער של 151 פיקסלים. זה
   קורא כאילו העמוד נגמר והתחיל עמוד אחר. הריפוד של הסקשן הראשון
   לבדו מספיק כדי להפריד ביניהם.

   ממוקד ל-.calc-layout כדי שלא ייגע בשאר האתר, שבו הפרדה מלאה בין
   סקשנים היא דווקא נכונה. */
.section:has(.calc-layout) + .section { padding-block-start: 0; }

/* עמודה צרה לקריאה רצופה. --wrap-narrow היה טוקן בלי מחלקה מאז ש-.prose
   איבד את התקרה שלו; דפי טקסט ארוך (מדיניות פרטיות, תנאי שימוש, הצהרת
   נגישות) צריכים אותה, אחרת השורה נמתחת על 1180px ואי אפשר לקרוא. */
.wrap-narrow {
  width: min(100% - 2.5rem, var(--wrap-narrow));
  margin-inline: auto;
}

.section-tight { padding-block: var(--space-xl); }

.section-head {
  max-width: 80%;
  margin-bottom: var(--space-l);
}

/* 80% of a phone-width container is too narrow to be useful — headings there
   get the full measure. */
@media (max-width: 767px) {
  .section-head { max-width: 100%; }
}

.section-head-center {
  margin-inline: auto;
  text-align: center;
}

.grid-3 {
  display: grid;
  gap: var(--space-m);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
}

/* ארבעה פריטים ברשת של שלושה משאירים אחד לבד בשורה שנייה, וזה נראה
   כמו תקלה. במקרה הזה — ורק בו — עוברים לשתיים על שתיים.

   התנאי `> :nth-child(4):last-child` אומר "הרביעי הוא גם האחרון", כלומר
   בדיוק ארבעה ילדים ישירים. שלושה, שישה או שניים לא נוגעים בזה. */
@media (min-width: 700px) {
  .grid-3:has(> :nth-child(4):last-child) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ==========================================================================
   04. Typography
   ========================================================================== */

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.18;
  letter-spacing: -0.015em;
  color: var(--navy-900);
  text-wrap: balance;
}

h1 { font-size: var(--step-4); font-weight: 900; }
h2 { font-size: var(--step-3); }
h3 { font-size: var(--step-2); }
h4 { font-size: var(--step-1); }

/* דרגת כותרת היא סמנטיקה, גודל כותרת הוא עיצוב — ולא תמיד רוצים אותו דבר.
   מאפשר להשתמש ב-h2 כשהמבנה דורש, בלי לנפח את הגודל על המסך. */
.as-h3 { font-size: var(--step-2); }
.as-h4 { font-size: var(--step-1); }

p { text-wrap: pretty; }

.lede {
  font-size: var(--step-1);
  line-height: 1.62;
  color: var(--navy-700);
}

.muted { color: var(--muted); }

.mt-s { margin-block-start: var(--space-s); }
.mt-m { margin-block-start: var(--space-m); }
.mb-s { margin-block-end: var(--space-s); }
.mb-m { margin-block-end: var(--space-m); }
.measure-narrow { max-width: 38ch; }

/* Eyebrow — Hebrew has no capitals, so the label reads as a label through
   weight, tracking and color instead of case. */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-display);
  font-size: var(--step--1);
  font-weight: 700;
  letter-spacing: 0.09em;
  color: var(--emerald-700);
  margin-bottom: var(--space-xs);
}

.eyebrow::before {
  content: "";
  inline-size: 22px;
  block-size: 2px;
  border-radius: 2px;
  background: currentColor;
  opacity: 0.55;
}

.eyebrow-invert { color: #6ee7b7; }

/* The ink stroke: the firm's mark is a signed line, so the signature is the
   page's structural motif. Draws right-to-left, the way Hebrew is written. */
.ink-stroke {
  display: block;
  inline-size: min(100%, 420px);
  block-size: auto;
  margin-block-start: 0.35rem;
  color: var(--emerald-600);
}

.ink-stroke path { fill: currentColor; }

/* ==========================================================================
   05. Buttons & links
   ========================================================================== */

.btn {
  /* emerald-600 on white text is 3.76:1 — fails AA. 700 clears it at 5.5:1. */
  --btn-bg: var(--emerald-700);
  --btn-fg: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  padding: 0.85rem 1.6rem;
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-family: var(--font-display);
  font-size: var(--step-0);
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.18s var(--ease), background-color 0.18s var(--ease),
    box-shadow 0.18s var(--ease), border-color 0.18s var(--ease);
}

.btn svg { inline-size: 20px; block-size: 20px; flex: none; }

.btn-primary { box-shadow: var(--shadow-cta); }

.btn-primary:hover {
  --btn-bg: var(--emerald-800);
  transform: translateY(-2px);
  box-shadow: 0 12px 26px rgba(4, 120, 87, 0.34);
}

.btn-ghost {
  --btn-bg: transparent;
  --btn-fg: var(--navy-900);
  border-color: var(--line-strong);
}

.btn-ghost:hover {
  --btn-bg: var(--surface);
  border-color: var(--ink-600);
  transform: translateY(-2px);
  box-shadow: var(--shadow-s);
}

.btn-ghost-invert {
  --btn-bg: rgba(255, 255, 255, 0.06);
  --btn-fg: #fff;
  border-color: rgba(255, 255, 255, 0.28);
}

.btn-ghost-invert:hover {
  --btn-bg: rgba(255, 255, 255, 0.13);
  border-color: rgba(255, 255, 255, 0.5);
  transform: translateY(-2px);
}

.btn-sm { padding: 0.55rem 1.1rem; font-size: var(--step--1); }

.btn-block { inline-size: 100%; }

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.btn-row-center { justify-content: center; }

/* Stretches the row's buttons to the full grid width, so a lone CTA lines up
   with the cards above it instead of floating at one edge. */
.btn-row-full .btn { flex: 1 1 220px; }

/* Text link with the ink motif as an animated underline */
.link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--ink-600);
  font-weight: 700;
  text-decoration: none;
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 0% 2px;
  background-position: 100% 100%;
  background-repeat: no-repeat;
  transition: background-size 0.28s var(--ease), color 0.2s var(--ease);
}

.link:hover,
.link:focus-visible {
  color: var(--emerald-700);
  background-size: 100% 2px;
}

.link svg {
  inline-size: 16px;
  block-size: 16px;
  transition: transform 0.22s var(--ease);
}

.link:hover svg { transform: translateX(-4px); }

/* ==========================================================================
   06. Header / navigation
   ========================================================================== */

.header {
  position: sticky;
  top: 0;
  z-index: 100;
  isolation: isolate;
  border-bottom: 1px solid transparent;
  transition: border-color 0.25s var(--ease), box-shadow 0.25s var(--ease);
}

/* NOTE: the blur lives here, not on .header. backdrop-filter on an element
   makes it the containing block for position:fixed descendants — which
   collapsed the mobile menu to a sliver. Keep it off .header. */
.header::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(248, 250, 252, 0.86);
  backdrop-filter: blur(14px) saturate(1.4);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
}

.header-scrolled {
  --header-h: var(--header-h-compact);
  --logo-h: var(--logo-h-compact);
  border-bottom-color: var(--line);
  box-shadow: var(--shadow-xs);
}

.header-inner {
  display: flex;
  align-items: center;
  gap: var(--space-m);
  block-size: var(--header-h);
  transition: block-size 0.28s var(--ease);
}

.brand {
  display: flex;
  align-items: center;
  flex: none;
  text-decoration: none;
}

.brand img {
  block-size: var(--logo-h);
  inline-size: auto;
  transition: block-size 0.28s var(--ease);
}

.nav {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  margin-inline-end: auto;
}

.nav a {
  padding: 0.5rem 0.65rem;
  border-radius: var(--radius-pill);
  color: var(--navy-800);
  font-size: 0.95rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 0.18s var(--ease), color 0.18s var(--ease);
}

.nav a:hover {
  background: var(--ink-050);
  color: var(--ink-600);
}

.nav a[aria-current="page"] {
  background: var(--ink-050);
  color: var(--ink-600);
  font-weight: 700;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex: none;
}

.header-phone {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  color: var(--navy-900);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.95rem;
  text-decoration: none;
  direction: ltr;
}

.header-phone svg { inline-size: 17px; block-size: 17px; color: var(--emerald-600); }

.header-phone:hover { color: var(--emerald-700); }

/* Menu trigger: a labelled word, not an unexplained box. Two rules that
   fold into an X, so the control states what it will do. */
.nav-toggle {
  display: none;
  align-items: center;
  gap: 0.55rem;
  padding: 0.5rem 0.2rem;
  border: 0;
  background: none;
  cursor: pointer;
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--navy-900);
}

.nav-toggle-bars {
  display: grid;
  gap: 5px;
  inline-size: 22px;
}

.nav-toggle-bars span {
  display: block;
  block-size: 2.5px;
  border-radius: 2px;
  background: currentColor;
  transition: transform 0.26s var(--ease);
}

.nav-toggle[aria-expanded="true"] .nav-toggle-bars span:first-child {
  transform: translateY(3.75px) rotate(45deg);
}

.nav-toggle[aria-expanded="true"] .nav-toggle-bars span:last-child {
  transform: translateY(-3.75px) rotate(-45deg);
}

.nav-foot { display: none; }

@media (max-width: 1200px) {
  /* Full sheet rather than a cramped dropdown — with a 104px bar there
     isn't room for a small panel to feel deliberate. */
  .nav {
    position: fixed;
    inset: var(--header-h) 0 0 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding-block: var(--space-m) calc(var(--space-l) + env(safe-area-inset-bottom));
    padding-inline: max(1.25rem, calc((100% - 520px) / 2));
    background: var(--surface);
    overflow-y: auto;
    overscroll-behavior: contain;
    transform: translateY(-8px);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.24s var(--ease), transform 0.24s var(--ease),
      visibility 0.24s;
  }

  .nav-open {
    transform: translateY(0);
    opacity: 1;
    visibility: visible;
  }

  .nav a {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.7rem;
    padding: 1.05rem 0.25rem;
    text-align: center;
    border-radius: 0;
    border-bottom: 1px solid var(--line);
    font-family: var(--font-display);
    font-size: var(--step-1);
    font-weight: 700;
  }

  .nav a::after {
    content: "";
    inline-size: 8px;
    block-size: 8px;
    border-left: 2.5px solid var(--line-strong);
    border-bottom: 2.5px solid var(--line-strong);
    transform: rotate(45deg);
    transition: border-color 0.18s var(--ease), transform 0.18s var(--ease);
  }

  .nav a:hover { background: none; }

  .nav a:hover::after {
    border-color: var(--emerald-600);
    transform: rotate(45deg) translate(2px, -2px);
  }

  .nav-foot {
    display: grid;
    gap: 0.65rem;
    margin-block-start: var(--space-m);
  }

  .nav-foot a::after { content: none; }

  .nav-toggle {
    display: inline-flex;
    margin-inline-end: auto;
  }

  .header-phone span { display: none; }

  body.menu-open { overflow: hidden; }
}

@media (max-width: 560px) {
  .header-actions .btn { display: none; }
}

/* ==========================================================================
   07. Hero
   ========================================================================== */

.hero {
  position: relative;
  overflow: hidden;
  padding-block: clamp(3.5rem, 7vw, 6rem) var(--space-2xl);
  background: linear-gradient(200deg, var(--navy-900) 0%, #16223c 55%, var(--navy-800) 100%);
  color: #fff;
  isolation: isolate;
}

/* An oversized impression of the same signature stroke, pressed into the
   page like the sheet underneath a signed document. */
.hero-watermark {
  position: absolute;
  inset-block-start: 8%;
  inset-inline-start: -12%;
  inline-size: 130%;
  color: #fff;
  opacity: 0.045;
  transform: rotate(-7deg);
  pointer-events: none;
  z-index: -1;
}

.hero-watermark path { fill: currentColor; }

.hero h1 { color: #fff; }

.hero-lede {
  max-width: 56ch;
  margin-block-start: var(--space-m);
  font-size: var(--step-1);
  line-height: 1.62;
  color: var(--muted-invert);
}

.hero-inner { max-width: 62ch; }

.hero .btn-row { margin-block-start: var(--space-l); }

/* Three pillars, stated in the hero as the three moments a signature matters */
.pillars {
  display: grid;
  gap: 0.75rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr));
  margin-block-start: var(--space-xl);
}

.pillar {
  display: block;
  padding: 1.1rem 1.25rem;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.05);
  color: #fff;
  text-decoration: none;
  transition: background-color 0.2s var(--ease), border-color 0.2s var(--ease),
    transform 0.2s var(--ease);
}

.pillar:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(110, 231, 183, 0.55);
  transform: translateY(-3px);
}

.pillar-name {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  font-family: var(--font-display);
  font-size: var(--step-0);
  font-weight: 700;
  line-height: 1.3;
}

.pillar-name svg {
  inline-size: 16px;
  block-size: 16px;
  flex: none;
  color: #6ee7b7;
  transition: transform 0.2s var(--ease);
}

.pillar:hover .pillar-name svg { transform: translateX(-4px); }

/* The document at the centre of each area — the concrete artifact, not a tagline */
.pillar-doc {
  display: block;
  margin-block-start: 0.3rem;
  font-size: var(--step--1);
  line-height: 1.5;
  color: var(--muted-invert);
}

/* ==========================================================================
   08. Trust strip
   ========================================================================== */

.trust {
  background: var(--surface);
  border-block-end: 1px solid var(--line);
}

.trust-grid {
  display: grid;
  gap: 0;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  padding-block: var(--space-l);
}

.trust-item {
  padding: var(--space-xs) var(--space-m);
  border-inline-end: 1px solid var(--line);
}

.trust-item:last-child { border-inline-end: 0; }

.trust-item h2 {
  font-size: var(--step-0);
  margin-block-end: 0.25rem;
}

.trust-item p {
  font-size: var(--step--1);
  line-height: 1.55;
  color: var(--muted);
}

@media (max-width: 720px) {
  .trust-item {
    border-inline-end: 0;
    border-block-end: 1px solid var(--line);
    padding-block: var(--space-s);
  }
  .trust-item:last-child { border-block-end: 0; }
}

/* ==========================================================================
   09. Practice cards
   ========================================================================== */

.card {
  display: flex;
  flex-direction: column;
  padding: var(--space-m);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-s);
  transition: transform 0.24s var(--ease), box-shadow 0.24s var(--ease),
    border-color 0.24s var(--ease);
}

.card:hover {
  transform: translateY(-4px);
  border-color: var(--ink-500);
  box-shadow: var(--shadow-m);
}

.card-icon {
  display: grid;
  place-items: center;
  inline-size: 52px;
  block-size: 52px;
  margin-block-end: var(--space-s);
  border-radius: 14px;
  background: var(--ink-050);
  color: var(--emerald-700);
}

.card-icon svg { inline-size: 26px; block-size: 26px; }

.card h3 { margin-block-end: 0.4rem; }

.card > p:not(.eyebrow) {
  color: var(--muted);
  font-size: var(--step-0);
}

.card-list {
  margin-block: var(--space-s) var(--space-m);
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.45rem;
}

.card-list li {
  position: relative;
  padding-inline-start: 1.55rem;
  font-size: var(--step--1);
  line-height: 1.55;
  color: var(--navy-700);
}

.card-list li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: 0.55em;
  inline-size: 7px;
  block-size: 7px;
  border-radius: 50%;
  background: var(--emerald-600);
}

.card-foot {
  margin-block-start: auto;
  padding-block-start: var(--space-s);
  border-block-start: 1px solid var(--line);
}

/* ==========================================================================
   09b. Colour band
   --------------------------------------------------------------------------
   The one saturated surface on the page. Emerald is otherwise reserved for
   things you can click, so inside this band the buttons invert to white —
   the hierarchy stays intact, it just runs the other way round.
   ========================================================================== */

.band {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: linear-gradient(215deg, #0b7a5c 0%, var(--emerald-700) 42%, #0a6552 100%);
  color: #fff;
}

.band h2,
.band h3 { color: #fff; }

.band .eyebrow { color: #d1fae5; }

.band .lede { color: rgba(236, 253, 245, 0.86); }

.band-watermark {
  position: absolute;
  inset-block-end: -6%;
  inset-inline-end: -18%;
  inline-size: 105%;
  color: #fff;
  opacity: 0.07;
  transform: rotate(6deg);
  pointer-events: none;
  z-index: -1;
}

.band-watermark path { fill: currentColor; }

.btn-light {
  --btn-bg: #fff;
  --btn-fg: var(--emerald-700);
}

.btn-light:hover {
  --btn-bg: #ecfdf5;
  transform: translateY(-2px);
  box-shadow: 0 12px 26px rgba(2, 44, 34, 0.28);
}

/* Tool cards — translucent so the gradient reads through them */
.tool {
  display: flex;
  flex-direction: column;
  padding: var(--space-m);
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, 0.09);
  color: #fff;
  text-decoration: none;
  transition: background-color 0.22s var(--ease), border-color 0.22s var(--ease),
    transform 0.22s var(--ease);
}

.tool:hover {
  background: rgba(255, 255, 255, 0.16);
  border-color: rgba(255, 255, 255, 0.5);
  transform: translateY(-4px);
}

.tool-icon {
  display: grid;
  place-items: center;
  inline-size: 46px;
  block-size: 46px;
  margin-block-end: var(--space-s);
  border-radius: 13px;
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
}

.tool-icon svg { inline-size: 23px; block-size: 23px; }

.tool h3 {
  font-size: var(--step-1);
  margin-block-end: 0.35rem;
}

.tool p {
  font-size: var(--step--1);
  line-height: 1.6;
  color: rgba(236, 253, 245, 0.84);
}

.tool-go {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-block-start: auto;
  padding-block-start: var(--space-s);
  font-family: var(--font-display);
  font-size: var(--step--1);
  font-weight: 700;
  color: #d1fae5;
}

.tool-go svg {
  inline-size: 15px;
  block-size: 15px;
  transition: transform 0.22s var(--ease);
}

.tool:hover .tool-go svg { transform: translateX(-4px); }

/* ==========================================================================
   09c. Inner-page header
   --------------------------------------------------------------------------
   Quieter than the homepage hero: this is a page you arrived at on purpose,
   so it orients rather than persuades.
   ========================================================================== */

.page-hero {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding-block: var(--space-xl) var(--space-l);
  background: linear-gradient(200deg, var(--navy-900) 0%, #16223c 60%, var(--navy-800) 100%);
  color: #fff;
}

.page-hero h1 {
  font-size: var(--step-3);
  color: #fff;
}

.page-hero .lede {
  max-width: 58ch;
  margin-block-start: var(--space-s);
  color: var(--muted-invert);
}

.page-hero .btn-row { margin-block-start: var(--space-m); }

.page-hero-watermark {
  position: absolute;
  inset-block-end: -20%;
  inset-inline-start: -10%;
  inline-size: 120%;
  color: #fff;
  opacity: 0.05;
  transform: rotate(-5deg);
  pointer-events: none;
  z-index: -1;
}

.page-hero-watermark path { fill: currentColor; }

/* Breadcrumbs */
.crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  margin: 0 0 var(--space-s);
  padding: 0;
  list-style: none;
  font-size: var(--step--1);
  color: rgba(203, 213, 225, 0.7);
}

.crumbs a {
  color: rgba(203, 213, 225, 0.9);
  text-decoration: none;
}

.crumbs a:hover { color: #6ee7b7; }

.crumbs li + li::before {
  content: "‹";
  margin-inline-end: 0.4rem;
  opacity: 0.55;
}

/* ==========================================================================
   09d. Process timeline
   --------------------------------------------------------------------------
   A deal is a sequence, so it's drawn as one: a single rule with numbered
   stops, running right-to-left the way the page reads.
   ========================================================================== */

.process {
  counter-reset: step;
  display: grid;
  gap: var(--space-m);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr));
  position: relative;
}

.step {
  counter-increment: step;
  position: relative;
  padding-block-start: var(--space-m);
  border-block-start: 2px solid var(--line);
}

.step::before {
  content: counter(step);
  position: absolute;
  inset-block-start: -17px;
  inset-inline-start: 0;
  display: grid;
  place-items: center;
  inline-size: 32px;
  block-size: 32px;
  border-radius: 50%;
  background: var(--emerald-600);
  color: #fff;
  font-family: var(--font-display);
  font-size: 0.9rem;
  font-weight: 900;
}

.step h3 {
  font-size: var(--step-1);
  margin-block-end: 0.35rem;
}

.step p {
  font-size: var(--step--1);
  line-height: 1.6;
  color: var(--muted);
}

/* ==========================================================================
   09e. Data table
   ========================================================================== */

.table-wrap {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-xs);
}

.table {
  inline-size: 100%;
  border-collapse: collapse;
  font-size: var(--step--1);
}

.table caption {
  padding: var(--space-s) var(--space-m);
  border-block-end: 1px solid var(--line);
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--navy-900);
  text-align: start;
}

.table th,
.table td {
  padding: 0.75rem var(--space-m);
  text-align: start;
  border-block-end: 1px solid var(--line);
}

.table th {
  background: var(--paper);
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--navy-900);
  white-space: nowrap;
}

.table tbody tr:last-child td { border-block-end: 0; }

.table td:last-child {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--emerald-700);
  white-space: nowrap;
}

.table-note {
  margin-block-start: var(--space-xs);
  font-size: 0.8rem;
  line-height: 1.6;
  color: var(--muted);
}

/* ==========================================================================
   09f. Confirmation page
   ========================================================================== */

.thanks {
  max-width: 56ch;
  margin-inline: auto;
  padding-block: var(--space-l);
  text-align: center;
}

.thanks-mark {
  display: grid;
  place-items: center;
  inline-size: 72px;
  block-size: 72px;
  margin: 0 auto var(--space-m);
  border-radius: 50%;
  background: var(--emerald-050);
  color: var(--emerald-600);
}

.thanks-mark svg { inline-size: 34px; block-size: 34px; }

.thanks-links {
  margin-block-start: var(--space-xl);
  padding-block-start: var(--space-m);
  border-block-start: 1px solid var(--line);
}

.thanks-links p { margin-block-end: var(--space-xs); }

/* The 404 numeral: large, but held back to the palette's quietest ink so it
   reads as context rather than an error shouted at the visitor. */
.notfound-code {
  font-family: var(--font-display);
  font-size: clamp(4.5rem, 14vw, 8rem);
  font-weight: 900;
  line-height: 0.9;
  letter-spacing: -0.04em;
  color: var(--line-strong);
  margin-block-end: var(--space-s);
}

/* ==========================================================================
   09g. People — עמוד הצוות
   --------------------------------------------------------------------------
   התמונות עוד לא נכנסו. ‎.person-photo מחזיקה יחס גובה־רוחב קבוע ומציירת
   צללית ברקע, כך שהפריסה נראית זהה לפני ואחרי שהקבצים ייכנסו ל‑
   /assets/team/ — לא יהיה קפיצת לייאאוט ביום שמוסיפים אותם.
   ========================================================================== */

.people {
  display: grid;
  gap: var(--space-m);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr));
}

.person {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-s);
  overflow: hidden;
  transition: transform 0.28s var(--ease), box-shadow 0.28s var(--ease);
}

.person:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-m);
}

/* הצללית היא רקע, לא אלמנט — ברגע שנכנס <img> הוא מכסה אותה. */
.person-photo {
  aspect-ratio: 4 / 5;
  border-block-end: 1px solid var(--line);
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232e3d6c' stroke-opacity='0.3' stroke-width='1.3' stroke-linecap='round'%3E%3Ccircle cx='12' cy='8.6' r='3.7'/%3E%3Cpath d='M4.9 20.4c0-3.9 3.2-6.5 7.1-6.5s7.1 2.6 7.1 6.5'/%3E%3C/svg%3E")
      center / 42% no-repeat,
    var(--ink-050);
}

.person-photo img {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}

.person-body {
  padding: var(--space-s) var(--space-m) var(--space-m);
}

.person-name {
  font-family: var(--font-display);
  font-size: var(--step-1);
  font-weight: 700;
  line-height: 1.3;
  color: var(--navy-900);
}

.person-role {
  margin-block-start: 0.25rem;
  font-size: var(--step--1);
  color: var(--muted);
}

/* ==========================================================================
   10. Contact & forms
   ========================================================================== */

.contact { background: var(--paper); }

.contact-grid {
  display: grid;
  gap: var(--space-l);
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  align-items: start;
}

@media (max-width: 900px) {
  .contact-grid { grid-template-columns: 1fr; }
}

.form-panel {
  padding: clamp(1.25rem, 3vw, 2.25rem);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-m);
}

.field-row {
  display: grid;
  gap: var(--space-s);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
}

.field { margin-block-end: var(--space-s); }

.field label {
  display: block;
  margin-block-end: 0.35rem;
  font-family: var(--font-display);
  font-size: var(--step--1);
  font-weight: 700;
  color: var(--navy-900);
}

.field .req { color: var(--emerald-700); }

.field input,
.field select,
.field textarea {
  inline-size: 100%;
  padding: 0.75rem 0.9rem;
  border: 1px solid var(--line-strong);
  border-radius: 12px;
  background: var(--surface);
  color: var(--navy-900);
  font-size: var(--step-0);
  transition: border-color 0.18s var(--ease), box-shadow 0.18s var(--ease);
}

.field textarea { resize: vertical; min-block-size: 120px; }

.field select {
  appearance: none;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: left 0.9rem center;
  background-size: 18px;
  padding-inline-end: 2.6rem;
}

.field input::placeholder,
.field textarea::placeholder { color: #94a3b8; }

.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--emerald-600);
  box-shadow: 0 0 0 4px var(--emerald-050);
}

.field input:user-invalid,
.field textarea:user-invalid,
.field select:user-invalid,
/* קבוצת תאריך שנכשלה בבדיקה. :user-invalid לבדו לא מספיק כאן: התאריכים
   של ההוצאות נדרשים רק אם הוזן סכום, וזה תנאי שהדפדפן לא מכיר. */
.datefield.is-invalid select {
  border-color: #dc2626;
  box-shadow: 0 0 0 4px rgba(220, 38, 38, 0.09);
}

.consent {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  margin-block: var(--space-s);
  font-size: var(--step--1);
  line-height: 1.55;
  color: var(--muted);
}

.consent input {
  flex: none;
  inline-size: 20px;
  block-size: 20px;
  margin-block-start: 0.15rem;
  accent-color: var(--emerald-600);
}

.form-note {
  margin-block-start: var(--space-s);
  font-size: var(--step--1);
  line-height: 1.55;
  color: var(--muted);
  text-align: center;
}

.form-status {
  display: none;
  margin-block-end: var(--space-s);
  padding: 0.8rem 1rem;
  border-radius: 12px;
  font-size: var(--step--1);
  font-weight: 600;
}

.form-status-visible { display: block; }

.form-status-error {
  background: rgba(220, 38, 38, 0.08);
  border: 1px solid rgba(220, 38, 38, 0.3);
  color: #b91c1c;
}

/* Contact details column */
.contact-aside {
  display: grid;
  gap: var(--space-s);
}

.contact-card {
  padding: var(--space-m);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-s);
}

.contact-card-dark {
  background: var(--navy-900);
  border-color: var(--navy-900);
  color: #fff;
}

.contact-card-dark h3 { color: #fff; }

.contact-card-dark p { color: var(--muted-invert); font-size: var(--step--1); }

.contact-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.9rem;
}

.contact-list a,
.contact-list span {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  color: var(--navy-900);
  font-weight: 600;
  text-decoration: none;
  transition: color 0.18s var(--ease);
}

.contact-list a:hover { color: var(--emerald-700); }

.contact-list svg {
  inline-size: 20px;
  block-size: 20px;
  flex: none;
  color: var(--emerald-600);
}

.contact-list .ltr { direction: ltr; }

/* ==========================================================================
   11. Footer
   ========================================================================== */

.footer {
  padding-block: var(--space-xl) var(--space-m);
  background: var(--navy-900);
  color: var(--muted-invert);
  font-size: var(--step--1);
}

.footer-grid {
  display: grid;
  gap: var(--space-l);
  grid-template-columns: 1.6fr 1fr 1fr 1fr;
  padding-block-end: var(--space-l);
  border-block-end: 1px solid rgba(255, 255, 255, 0.12);
}

@media (max-width: 900px) {
  .footer-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 520px) {
  .footer-grid { grid-template-columns: 1fr; }
}

.footer img {
  block-size: 52px;
  inline-size: auto;
  margin-block-end: var(--space-s);
  /* The mark is navy ink; lift it to near-white on the dark ground */
  filter: brightness(0) invert(1);
  opacity: 0.92;
}

.footer h2 {
  margin-block-end: var(--space-xs);
  font-size: var(--step-0);
  color: #fff;
}

.footer ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.5rem;
}

.footer a {
  color: var(--muted-invert);
  text-decoration: none;
  transition: color 0.18s var(--ease);
}

.footer a:hover { color: #6ee7b7; }

.socials {
  display: flex;
  gap: 0.6rem;
  margin-block-start: var(--space-s);
}

.socials a {
  display: grid;
  place-items: center;
  inline-size: 40px;
  block-size: 40px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 12px;
  transition: background-color 0.18s var(--ease), border-color 0.18s var(--ease);
}

.socials a:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(110, 231, 183, 0.6);
}

.socials svg { inline-size: 19px; block-size: 19px; }

.disclaimer {
  padding-block: var(--space-m);
  font-size: 0.8rem;
  line-height: 1.7;
  color: rgba(203, 213, 225, 0.62);
  border-block-end: 1px solid rgba(255, 255, 255, 0.12);
}

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-s);
  padding-block-start: var(--space-m);
  font-size: 0.8rem;
}

.footer-bottom ul {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-s);
}

/* ==========================================================================
   12. Mobile action bar
   ========================================================================== */

.action-bar { display: none; }

@media (max-width: 767px) {
  :root {
    --logo-h: 75px;
    --logo-h-compact: 54px;
    --header-h: 104px;
    --header-h-compact: 78px;
  }

  .action-bar {
    position: fixed;
    inset-inline: 0;
    inset-block-end: 0;
    z-index: 90;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.6rem;
    padding: 0.7rem 0.9rem calc(0.7rem + env(safe-area-inset-bottom));
    background: rgba(255, 255, 255, 0.94);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-block-start: 1px solid var(--line);
  }

  body { padding-block-end: 84px; }
}

/* ==========================================================================
   13. Article components (CMS-rendered pages)
   ========================================================================== */

.prose > * + * { margin-block-start: var(--space-s); }

.prose h2 { margin-block-start: var(--space-l); }

.prose h3 { margin-block-start: var(--space-m); }

.prose ul,
.prose ol { padding-inline-start: 1.3rem; }

.prose li + li { margin-block-start: 0.35rem; }

.prose a { color: var(--ink-600); font-weight: 600; }

.mlb-i { inline-size: 1.15em; block-size: 1.15em; flex: none; vertical-align: -0.15em; }

.article-layout .prose p {
  text-align: justify;
}

.article-layout .prose ol {
  text-align: justify;
}

.tldr {
  padding: var(--space-m);
  border: 1px solid var(--line);
  border-inline-start: 4px solid var(--emerald-600);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-xs);
}

.toc {
  padding: var(--space-m);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}

.toc ol { margin: 0; padding-inline-start: 1.2rem; }

.toc li + li { margin-block-start: 0.45rem; }

/* קו תחתון רק במעבר עכבר: ברשימה של חמישה־שישה פריטים, קו תחת כל אחד
   מהם מתחרה עם הטקסט עצמו על תשומת הלב. */
.toc a {
  color: var(--navy-700);
  text-decoration: none;
  font-size: var(--step--1);
  line-height: 1.5;
}

.toc a:hover {
  color: var(--emerald-700);
  text-decoration: underline;
}

.faq-item {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  margin-block-end: 0.6rem;
  overflow: hidden;
}

/* Two per row. align-items:start keeps an opened item from stretching its
   neighbour to match height. */
.faq-grid {
  display: grid;
  gap: 0.7rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
  align-items: start;
}

.faq-grid .faq-item { margin-block-end: 0; }

.faq-item summary {
  padding: 1rem 1.15rem;
  font-family: var(--font-display);
  font-weight: 700;
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.faq-item summary::-webkit-details-marker { display: none; }

/* The marker is a single "+" that rotates into an "×" — one glyph, one
   transform, so the state change reads as motion rather than a swap. */
.faq-item summary::after {
  content: "+";
  font-size: 1.4rem;
  line-height: 1;
  color: var(--emerald-600);
  flex: none;
  transition: transform 0.3s var(--ease);
}

.faq-item[open] summary::after { transform: rotate(45deg); }

.faq-item summary:hover { background: var(--paper); }

.faq-item .faq-body {
  padding: 0 1.15rem 1.15rem;
  color: var(--navy-700);
}

/* --- Opening animation ---------------------------------------------------
   Two layers, on purpose:

   1. ::details-content animates the panel's actual height. Newer browsers
      only — but where it works, the card grows smoothly instead of jumping.
   2. The keyframe on .faq-body fades and lifts the text. Works everywhere,
      so browsers without (1) still get a soft reveal rather than a snap.
   ------------------------------------------------------------------------ */

@keyframes faq-reveal {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: translateY(0); }
}

.faq-item[open] .faq-body {
  animation: faq-reveal 0.32s var(--ease) both;
}

@supports selector(::details-content) {
  :root { interpolate-size: allow-keywords; }

  .faq-item::details-content {
    block-size: 0;
    overflow: hidden;
    transition: block-size 0.32s var(--ease), content-visibility 0.32s allow-discrete;
  }

  .faq-item[open]::details-content { block-size: auto; }
}

/* התוצאה יושבת לצד הטופס בדסקטופ ודביקה בגלילה, כדי שאפשר יהיה לשנות שדה
   ולראות את המספר זז בלי לגלול. במובייל היא פשוט מתחת.

   לפני החישוב הראשון אין תוצאה, ולכן אין שתי עמודות: הטופס לבדו בשתי
   עמודות היה נדחק לצד אחד עם חצי עמוד ריק לידו. הפיצול קורה רק כשיש
   באמת מה לשים בעמודה השנייה. */
.calc-layout {
  display: grid;
  gap: var(--space-l);
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
  justify-items: center;
}

/* טופס לבדו לא נמתח על 1180px — זו עמודת קריאה, לא טבלה. */
.calc-layout > * {
  inline-size: 100%;
  max-inline-size: 640px;
}

@media (min-width: 1024px) {
  .calc-layout:has(.calc-out:not([hidden])) {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    justify-items: stretch;
  }

  .calc-layout:has(.calc-out:not([hidden])) > * { max-inline-size: none; }

  .calc-layout .calc-out {
    position: sticky;
    inset-block-start: calc(var(--header-h-compact) + var(--space-s));
  }
}

/* --- שדה תאריך: יום / חודש / שנה ----------------------------------------
   לא <input type="date">. הפורמט שלו נקבע לפי הלוקאל של הדפדפן ולא לפי
   שפת הדף, כך שגולש עם דפדפן אמריקאי רואה mm/dd/yyyy ואין דרך לכפות
   אחרת. וגם: הבורר המובנה נועד לתאריכים קרובים, ורכישה מ-1998 דורשת בו
   מאות לחיצות אחורה. שם החודש כתוב במילים, ולכן אין שאלה מה יום ומה חודש.
   ------------------------------------------------------------------------ */
.field-label {
  display: block;
  margin-block-end: 0.35rem;
  font-family: var(--font-display);
  font-size: var(--step--1);
  font-weight: 700;
  color: var(--navy-800);
}

/* תאריך הוא רצף משמאל לימין גם בתוך טקסט עברי: 10/09/2026 נקרא יום, חודש,
   שנה בכיוון הזה, וכך גם נראה הפקד הטבעי של הדפדפן. ה-direction כאן הוא מה
   שמסדר את שלוש התיבות ככה, בלי להפוך את סדר ה-DOM — כלומר Tab וקורא מסך
   עדיין עוברים יום ← חודש ← שנה, הסדר שבו אומרים תאריך. */
.datefield {
  direction: ltr;
  display: grid;
  grid-template-columns: 4.4rem minmax(0, 1fr) 5.4rem;
  gap: 0.35rem;
  /* היום והשנה ברוחב קבוע, והחודש לוקח את מה שנשאר — וכשהשדה תופס את
     כל רוחב הטופס "מה שנשאר" היה 422 פיקסלים לשם חודש. תיבה שהתוכן
     הרחב ביותר שלה הוא "ספטמבר" לא צריכה יותר משליש מזה, ותאריך
     מתוח על כל הרוחב גם מפסיק להיראות כמו תאריך אחד.

     התקרה כאן היא בדיוק הרוחב שיוצא ממילא כששני שדות תאריך יושבים זה
     לצד זה ב-.calc-pair, כך ששדה רחב ושדה בזוג נראים עכשיו אותו דבר.
     בנייד ממילא אין הפרש — שם הטופס צר מהתקרה. */
  max-inline-size: 20rem;

  /* התקרה משאירה שארית רוחב בתוך ה-.field, ובלי זה השדה נצמד לתחילת
     השורה והשארית נערמת כולה בצד אחד — מה שנראה כמו שדה שנקטע, לא
     כמו שדה מעוצב. מרווח אוטומטי משני הצדדים מפזר אותה שווה בשווה.
     כשהשדה צר מהתקרה (נייד, או שני תאריכים ב-.calc-pair) אין שארית
     והשורה הזו לא עושה דבר. */
  margin-inline: auto;
}

/* .field select שומר 2.6rem בצד לחץ הפתיחה — יותר מדי כשהתיבה רחבה
   ארבעה תווים. כאן החץ קטן וקרוב יותר, אחרת "2005" נחתך ל-"005". */
.datefield select {
  direction: rtl;   /* שמות החודשים עברית, והחץ נשאר בצד שמאל עם הריווח שלו */
  inline-size: 100%;
  font-size: var(--step--1);
  padding: 0.72rem 0.5rem;
  padding-inline-end: 1.6rem;
  background-position: left 0.4rem center;
  background-size: 14px;
}

/* --- מחשבונים -------------------------------------------------------------
   נבנה על .calculator ו-.calculator-result שכבר קיימים מתחת, ומוסיף רק את
   מה שחסר: פריסת השדות, גילוי הדרגתי של הוצאות, ופירוט התוצאה.
   ------------------------------------------------------------------------ */
.calc-grid {
  display: grid;
  gap: var(--space-s);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr));
}

/* שורת סכום+תאריך של אותה הוצאה נשארת יחידה אחת גם כשהרשת מתפצלת. */
.calc-pair {
  display: grid;
  gap: var(--space-s);
  grid-template-columns: 1fr 1fr;
}

@media (max-width: 480px) {
  .calc-pair { grid-template-columns: 1fr; }
}

.calc-opt {
  padding: var(--space-s);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper);
}

.calc-opt + .calc-opt { margin-block-start: 0.6rem; }

.calc-opt > summary {
  font-family: var(--font-display);
  font-weight: 700;
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.calc-opt > summary::-webkit-details-marker { display: none; }

.calc-opt > summary::after {
  content: "+";
  font-size: 1.3rem;
  line-height: 1;
  color: var(--emerald-600);
  flex: none;
  transition: transform 0.25s var(--ease);
}

.calc-opt[open] > summary::after { transform: rotate(45deg); }

.calc-opt[open] > summary { margin-block-end: var(--space-s); }

/* --- התוצאה --------------------------------------------------------------
   שני מצבים: סרגל המתנה קצר, ואז התשובה. הסרגל אינו מודד כלום — התוצאה
   מוכנה לפני שהוא מתחיל — והוא שם כי מספר שקופץ מיד נקרא כאילו לא נבדק
   דבר. מי שביקש פחות תנועה מדלג עליו לגמרי (ראו את השאילתה בסוף הסעיף).
   ------------------------------------------------------------------------ */
.calc-out[hidden] { display: none; }
.calc-progress[hidden] { display: none; }
#calcAnswer[hidden] { display: none; }

.calc-progress { padding-block: var(--space-m); }

.calc-progress-label {
  margin: 0 0 0.75rem;
  text-align: center;
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--muted);
}

.calc-progress-track {
  display: block;
  block-size: 6px;
  border-radius: 999px;
  background: var(--line);
  overflow: hidden;
}

.calc-progress-bar {
  display: block;
  block-size: 100%;
  border-radius: inherit;
  background: var(--emerald-600);
  transform-origin: right center;   /* RTL: הסרגל מתמלא מימין לשמאל */
  animation: calc-fill 1.1s var(--ease) both;
}

@keyframes calc-fill {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

/* שאלת כן/לא בטופס מחשבון. fieldset כדי שקורא מסך יקשור את האפשרויות
   לשאלה, ובלי המסגרת והריווח שהדפדפן נותן לו כברירת מחדל. */
.calc-q {
  margin: 0 0 var(--space-s);
  padding: 0;
  border: 0;
}

.calc-q > legend {
  padding: 0;
  margin-block-end: 0.35rem;
  font-family: var(--font-display);
  font-size: var(--step--1);
  font-weight: 700;
  color: var(--navy-800);
}

.calc-q .calc-note { margin-block: 0 0.5rem; }

/* flex ולא grid: "כן"/"לא" יושבים זה לצד זה גם ב-390px, בעוד ש"לא, זו
   הדירה היחידה שלי" לוקח שורה שלמה. עם grid שתי האפשרויות חולקות את אותו
   רוחב מינימלי, ולכן או ששתיהן נערמות או שהארוכה נחתכת. */
.calc-choice {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.calc-choice label { flex: 1 1 auto; }

/* שבע אפשרויות קצרות ("0.5%") מסתדרות יפה ברשת שווה ולא ב-flex: עם flex
   הן נערמות 3+3+1 ברוחבים שונים, כי כל תווית תופסת את רוחב התוכן שלה. */
.calc-choice-tight {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(4.25rem, 1fr));
}

.calc-choice-tight label {
  justify-content: center;
  padding-inline: 0.5rem;
  font-variant-numeric: tabular-nums;
}

/* העיגול מיותר כשהבחירה כבר מסומנת במילוי ובמסגרת, והוא גוזל חצי
   מהרוחב בתיבה ברוחב 4rem. הוא נשאר במקומו למקלדת ולקורא מסך — רק
   נעלם מהעין, ו-:focus-within כבר מצייר טבעת מסביב לתווית. */
.calc-choice-tight input {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.calc-choice label {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.72rem 0.9rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper);
  font-size: var(--step--1);
  cursor: pointer;
  transition: border-color 0.18s var(--ease), background 0.18s var(--ease);
}

.calc-choice input { flex: none; accent-color: var(--emerald-600); }

.calc-choice label:hover { border-color: var(--emerald-600); }

/* הבחירה עצמה מסומנת, לא רק העיגול — בנייד העיגול קטן מכדי לקרוא ממנו
   את המצב במבט. */
.calc-choice label:has(input:checked) {
  border-color: var(--emerald-600);
  background: var(--emerald-050);
}

.calc-choice label:focus-within {
  outline: 2px solid var(--emerald-600);
  outline-offset: 2px;
}

/* המשפט שמתחת למספר — מה שבאמת צריך לדעת, בלי מונחי מס. */
.calc-headline {
  margin-block-start: var(--space-s);
  text-align: center;
  color: var(--muted);
  font-size: var(--step--1);
}

/* --- מרכז המחשבונים, מקובץ לפי שלב ---------------------------------------
   הכלים מסודרים לפי מה שהמבקר עומד לעשות ולא לפי סוג המס. עם 27 מחשבונים
   רשת שטוחה הופכת לקטלוג שאי אפשר לסרוק בעין; שלוש שאלות אפשר.

   כלי מופיע בקבוצה אחת בלבד — הבית הטבעי שלו — וקבוצה שצריכה כלי מקבוצה
   אחרת מקשרת אליו במשפט. כרטיס משוכפל בשתי קבוצות הוא אותו רעש שרצינו
   להוריד.
   ------------------------------------------------------------------------ */
.calc-group + .calc-group { margin-block-start: var(--space-l); }

/* ------------------------------------------------------------------
   שורה אחרונה חלקית — ממלאת את הרוחב במקום להשאיר משבצת ריקה.

   קבוצה של חמישה כרטיסים ברשת של שלושה נותנת 3+2, והמשבצת השלישית
   בשורה השנייה נשארת ריקה. זה לא נראה כמו בחירה, זה נראה כמו כרטיס
   שנפל.

   הפתרון הוא flex ולא grid, וזו בדיוק הסיבה: ב-grid מספר המסלולים
   קבוע מראש ופריט בשורה אחרונה לא יודע שנשארו מקומות פנויים לידו.
   ב-flex-wrap כל פריט הוא `flex: 1 1 300px` — הבסיס קובע כמה נכנסים
   בשורה, והגדילה מחלקת ביניהם את מה שנשאר. שורה של שניים מתחלקת
   לחצי-חצי בלי שאף אחד יספור כרטיסים.

   flex-basis נשאר 300px, אותו מספר שהיה ב-minmax, כדי שנקודות
   המעבר בין שלוש, שתיים ואחת יישארו איפה שהיו.

   (הסיבה שהיה כאן auto-fill ולא auto-fit נשארת נכונה — כרטיס בודד
   לא צריך להימתח על 1180 פיקסלים — והיא מטופלת עכשיו בכלל של
   הארבעה למטה ובתקרה על כרטיס אחרון בודד.) */
.calc-group .grid-3 {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-m);
}

.calc-group .grid-3 > * {
  flex: 1 1 300px;
  max-inline-size: 100%;
}

/* ארבעה כרטיסים הם 2×2 ולא 3+1 — הכלל היה קיים כ-grid-template-columns,
   וכאן הוא אותו כלל בשפה של flex. */
@media (min-width: 700px) {
  .calc-group .grid-3:has(> :nth-child(4):last-child) > * {
    flex-basis: calc(50% - var(--space-m) / 2);
  }
}

/* היה כאן ניסיון לתקרה על כרטיס אחרון שנשאר לבד, כדי שלא יימתח על כל
   הרוחב. הוא ירד, ומשתי סיבות:

   הוא נלחם בכלל הארבעה שמעליו — הרביעי הוא גם 3n+1 וגם :last-child,
   אז הוא קיבל תקרה של שליש בזמן שאחיו היו על חצי, והשורה יצאה
   779+377. וגם אילו התנאי היה מדויק, הוא היה צריך וריאציה נפרדת לכל
   מספר עמודות — חשבון כמויות שנשבר בשקט ברגע שמוסיפים כרטיס.

   ומעבר לזה הוא סתר את מה שהתבקש: כרטיס בודד שנמתח על כל הרוחב הוא
   בדיוק *לא* משבצת ריקה. */

.calc-group > h3 {
  font-size: var(--step-1);
  margin-block-end: 0.25rem;
}

.calc-group-note {
  margin-block: 0 var(--space-s);
  color: var(--muted);
}

.calc-group-more {
  margin-block-start: var(--space-s);
  font-size: var(--step--1);
  color: var(--muted);
}

.calc-group-more a { color: var(--emerald-700); font-weight: 700; }

/* כותרת הכרטיס ירדה ל-h4 כי היא יושבת עכשיו מתחת לכותרת הקבוצה. */
.card h4 { margin-block-end: 0.4rem; }

/* תיבת סימון בטופס מחשבון — "אני לא יודע מתי". */
.calc-check {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  /* שטח נגיעה אמיתי. השורה הזו הייתה גבוהה 22px עם תיבה של 13px, בעוד
     שכל שאר הפקדים בטופס הם 48px — כלומר הפקד היחיד בעמוד שצריך כוונון
     של אצבע. הריפוד השלילי משאיר את היישור לטקסט שמסביב במקומו. */
  min-block-size: 44px;
  padding-inline: 0.35rem;
  margin-inline-start: -0.35rem;
  margin-block: 0.2rem 0;
  font-size: var(--step--1);
  cursor: pointer;
  border-radius: 10px;
}

.calc-check:hover { background: var(--ink-050); }

/* מיקוד נראה, כי הקלט עצמו קטן מכדי להיות סימן המיקוד היחיד. */
.calc-check:focus-within {
  outline: 2px solid var(--emerald-600);
  outline-offset: 2px;
}

.calc-check input {
  flex: none;
  accent-color: var(--emerald-600);
  inline-size: 20px;
  block-size: 20px;
}

/* "מה השאלה הבאה" — קישור שקט מתחת לפירוט. בכוונה טקסט ולא כפתור:
   הפעולה הראשית בתיבה היא יצירת הקשר, וזה רק המשך הדרך למי שעוד אוסף
   מספרים. */
.calc-next {
  margin-block: var(--space-s) 0;
  padding-block-start: var(--space-s);
  border-block-start: 1px solid var(--line);
  font-size: var(--step--1);
  color: var(--muted);
  text-align: center;
}

.calc-next a { color: var(--emerald-700); font-weight: 700; }

/* הפירוט מקופל. .calc-opt כבר נותן את המסגרת ואת הפלוס שמסתובב. */
.calc-how { margin-block-start: var(--space-m); }
.calc-how .calc-breakdown { margin-block-start: 0; }
.calc-how > summary { font-size: var(--step--1); }

@keyframes calc-in {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

.calc-out { animation: calc-in 0.32s var(--ease) both; }

/* תוצאה ששייכת לנתונים הקודמים.

   מעומעמת ומרוככת, ולא מוסתרת: היא עדיין שימושית להשוואה מול המספר
   הבא, והעלמה שלה תוך כדי הקלדה מרגישה כמו תקלה. מה שהיא כן מפסיקה
   להיות זה התשובה לשאלה שעל המסך. `filter: saturate()` מוריד ממנה את
   הירוק — הצבע ששמור באתר לפעולה — בלי לפגוע בניגודיות של הטקסט. */
.calc-out.is-stale {
  /* העמעום יושב בתוך filter ולא ב-opacity, ובכוונה.

     ל-.calc-out יש `animation: calc-in ... both`, ו-both אומר שהפריים
     האחרון של האנימציה ממשיך לחול גם אחרי שהיא נגמרה. הפריים הזה כולל
     `opacity: 1` — **ואנימציה גוברת על הצהרה רגילה בקסקייד**. כלומר
     `opacity: 0.55` כאן פשוט לא היה נכנס לתוקף, בשקט: המחלקה הוחלה,
     ההודעה הופיעה, והשקיפות נשארה 1.

     filter אינו מונפש כאן, ולכן opacity() בתוכו עובד. */
  filter: saturate(0.3) opacity(0.55);
  transition: filter 0.18s var(--ease);
}

.calc-out.is-stale::before {
  content: "הנתונים השתנו — לחצו ״חשבו מחדש״ כדי לעדכן.";
  display: block;
  margin-block-end: var(--space-s);
  padding: 0.55rem 0.8rem;
  border-radius: 10px;
  background: var(--paper);
  border: 1px dashed var(--line);
  font-size: var(--step--1);
  font-weight: 700;
  color: var(--ink-600);
  text-align: center;
}

@media (prefers-reduced-motion: reduce) {
  .calc-out.is-stale { transition: none; }
}

.calc-breakdown {
  margin-block-start: var(--space-m);
  border-block-start: 1px solid var(--line);
}

.calc-breakdown div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-s);
  padding-block: 0.6rem;
  border-block-end: 1px solid var(--line);
  font-size: var(--step--1);
}

.calc-breakdown dt { color: var(--muted); }

.calc-breakdown dd { margin: 0; font-weight: 700; font-variant-numeric: tabular-nums; }

.calc-breakdown .is-total dt,
.calc-breakdown .is-total dd { color: var(--navy-900); font-size: var(--step-0); }

.calc-note {
  margin-block-start: var(--space-s);
  font-size: var(--step--1);
  color: var(--muted);
}

.calc-flag {
  margin-block-start: var(--space-s);
  padding: 0.7rem 0.9rem;
  border-inline-start: 3px solid var(--emerald-600);
  border-radius: var(--radius);
  background: var(--emerald-050);
  font-size: var(--step--1);
  color: var(--emerald-800);
}

.calc-flag[hidden] { display: none; }

/* ------------------------------------------------------------------
   שלושה מצבים לאותה תיבה, כי היא עושה שלוש עבודות שונות.

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

   is-caution הוא ל"יש כאן מלכוד" — שמאות שיורדת מהמחיר, מבחן שלא
   מתקיים, הון עצמי דק. **אין כאן גוון חדש**: הוא בנוי מאותם טוקנים
   נייטרליים של §01, כי הכנסת צבע אזהרה למערכת היא החלטה גדולה יותר
   מהבעיה שהיא פותרת. מה שהוא כן עושה הוא להפסיק להיראות כמו בשורה
   טובה.

   is-provisional הוא קטגוריה בפני עצמה, והיא לא על מצב הקורא אלא על
   **מהימנות המספר עצמו**. המסגר מקווקו מכל הצדדים ולא פס בצד אחד,
   ובזה הוא מצטרף לאוצר מילים שכבר קיים בעמוד: ההודעה על תוצאה
   שהתיישנה מקווקוות גם היא. מקווקו כאן אומר "לא סופי".
   ------------------------------------------------------------------ */
.calc-flag.is-caution {
  border-inline-start-color: var(--ink-500);
  background: var(--paper);
  color: var(--ink-600);
}

.calc-flag.is-provisional {
  border-inline-start: 0;
  border: 1px dashed var(--ink-500);
  background: var(--paper);
  color: var(--ink-600);
}

/* Shortcode component shells: [checklist] [calculator] [red_flag_quiz] */
.checklist,
.calculator,
.quiz {
  padding: var(--space-m);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-s);
}

.checklist ul { list-style: none; padding: 0; display: grid; gap: 0.6rem; }

.checklist li {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
}

.calculator-result {
  margin-block-start: var(--space-s);
  padding: var(--space-s);
  border-radius: var(--radius);
  background: var(--emerald-050);
  font-family: var(--font-display);
  font-size: var(--step-2);
  font-weight: 900;
  color: var(--emerald-700);
  text-align: center;
}

/* ==========================================================================
   13b. Articles — מרכז המאמרים, כרטיסי מאמר, ועמוד המאמר עצמו
   --------------------------------------------------------------------------
   שלושה שימושים לאותן מחלקות, בכוונה:

   1. /articles          — כל המאמרים, עם סינון לפי תחום וחיפוש חופשי.
   2. עמודי התחום        — רצועת "מאמרים אחרונים" (.latest-articles).
   3. עמוד המאמר         — רצועת "מאמרים נוספים בתחום" בתחתית.

   הכרטיס (.art-card) זהה בשלושתם, כך ש-Make מייצר בלוק HTML אחד בלבד
   ומזריק אותו לכל מקום. אל תיצור וריאנט חדש לכל מיקום.
   ========================================================================== */

/* --- רצועה שעדיין ריקה מסתירה את עצמה ------------------------------------
   לפני שהמאמר הראשון נוצר, אזור ה-Make בעמודי התחום ריק. במקום כותרת
   שמובילה לשום דבר, הרצועה כולה נעלמת עד שנכנס אליה כרטיס ראשון.
   :not(:has()) ולא :empty — כי :empty נשבר מרווח שורה אחד.
   ------------------------------------------------------------------------ */
.latest-articles:not(:has(.art-card)) { display: none; }

/* רשת בלי כרטיסים נעלמת גם היא — למשל "מאמרים נוספים בתחום" בסוף מאמר
   שהוא היחיד בתחום שלו. הכותרת והקישור לכל המאמרים נשארים. */
.art-grid:not(:has(.art-card)) { display: none; }

/* תיבת תוכן העניינים מתחילה ריקה — site.js ממלא אותה מכותרות המאמר.
   מאמר עם פחות משתי כותרות משאיר אותה ריקה, והיא נעלמת. */
.toc:not(:has(li)) { display: none; }

/* ובלי תוכן עניינים, הטקסט לוקח את כל הרוחב במקום להשאיר עמודה ריקה. */
@media (min-width: 1000px) {
  .article-layout:not(:has(.toc li)) { grid-template-columns: minmax(0, 1fr); }
}

/* --- סרגל הסינון והחיפוש -------------------------------------------------- */
.art-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-s);
  margin-block-end: var(--space-l);
}

.art-search {
  position: relative;
  flex: 1 1 260px;
  max-width: 380px;
}

.art-search svg {
  position: absolute;
  inset-inline-start: 0.9rem;
  inset-block-start: 50%;
  translate: 0 -50%;
  inline-size: 19px;
  block-size: 19px;
  color: var(--muted);
  pointer-events: none;
}

.art-search input {
  inline-size: 100%;
  /* לוגי ולא פיזי: הזכוכית ממוקמת ב-inset-inline-start, כלומר בצד ימין
     בעברית. ריפוד שמאלי קבוע היה משאיר אותה בדיוק מעל הטקסט. */
  padding: 0.75rem 1rem;
  padding-inline-start: 2.7rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-pill);
  background: var(--surface);
  font: inherit;
  color: var(--navy-900);
}

.art-search input::placeholder { color: var(--muted); }

.art-search input:focus-visible { border-color: var(--emerald-600); }

/* צ'יפים של תחומים. כפתורים ולא קישורים: הם לא מנווטים לשום מקום,
   הם מסננים רשימה שכבר נמצאת בדף. */
.art-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.art-chip {
  padding: 0.5rem 1.05rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-pill);
  background: var(--surface);
  font-family: var(--font-display);
  font-size: var(--step--1);
  font-weight: 700;
  color: var(--navy-700);
  cursor: pointer;
  transition: background 0.2s var(--ease), border-color 0.2s var(--ease),
    color 0.2s var(--ease);
}

.art-chip:hover {
  border-color: var(--ink-500);
  background: var(--paper);
}

.art-chip[aria-pressed="true"] {
  border-color: var(--emerald-600);
  background: var(--emerald-600);
  color: #fff;
}

/* --- רשת הכרטיסים -------------------------------------------------------- */
.art-grid {
  display: grid;
  gap: var(--space-m);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 310px), 1fr));
  align-items: start;
}

.art-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-s);
  text-decoration: none;
  color: inherit;
  transition: transform 0.24s var(--ease), box-shadow 0.24s var(--ease),
    border-color 0.24s var(--ease);
}

.art-card:hover {
  transform: translateY(-4px);
  border-color: var(--ink-500);
  box-shadow: var(--shadow-m);
}

/* יחס קבוע: התמונה תופסת את אותו מקום עוד לפני שהיא נטענת, כך שהרשת
   לא קופצת (CLS). */
.art-card-media {
  aspect-ratio: 16 / 9;
  background: var(--ink-050);
  overflow: hidden;
}

.art-card-media img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  transition: scale 0.4s var(--ease);
}

.art-card:hover .art-card-media img { scale: 1.04; }

.art-card-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: var(--space-m);
}

.art-card h3 {
  font-size: var(--step-1);
  line-height: 1.35;
  margin-block: 0.6rem 0.45rem;
}

.art-card p {
  font-size: var(--step--1);
  line-height: 1.65;
  color: var(--muted);
}

.art-card .art-meta { margin-block-start: auto; }

/* תווית התחום. הצבע נקבע לפי data-category על הכרטיס — ערך אחד
   מתוך ה-enum של Airtable, אותו ערך בדיוק שמופיע בטופס הפנייה. */
.art-tag {
  align-self: flex-start;
  padding: 0.28rem 0.7rem;
  border-radius: var(--radius-pill);
  background: var(--ink-050);
  font-family: var(--font-display);
  font-size: 0.76rem;
  font-weight: 800;
  color: var(--ink-600);
}

.art-card[data-category="Real_Estate_Law"] .art-tag {
  background: rgba(46, 61, 108, 0.09);
  color: var(--ink-600);
}

.art-card[data-category="Family_Law"] .art-tag {
  background: rgba(180, 83, 9, 0.1);
  color: #a15a09;
}

.art-card[data-category="Inheritance_Wills_POA"] .art-tag {
  background: var(--emerald-050);
  color: var(--emerald-800);
}

.art-card[data-category="Calculators_Tools"] .art-tag {
  background: rgba(51, 65, 85, 0.09);
  color: var(--navy-700);
}

.art-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem;
  padding-block-start: var(--space-s);
  font-size: var(--step--1);
  color: var(--muted);
}

.art-meta > * + *::before {
  content: "·";
  margin-inline-end: 0.45rem;
  opacity: 0.7;
}

/* --- מצבי הרשימה: אין תוצאות, ועוד מאמרים ------------------------------- */
.art-count {
  font-size: var(--step--1);
  color: var(--muted);
}

.art-empty {
  padding: var(--space-xl) var(--space-m);
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius-lg);
  text-align: center;
  color: var(--muted);
}

/* המאפיין hidden של HTML שווה ל-display:none בגיליון של הדפדפן — וכל
   כלל display משלנו גובר עליו. .art-card הוא display:flex, ולכן כרטיס
   שהסינון הסתיר היה נשאר על המסך. כל אלמנט ש-articles.js מכבה ומדליק
   חייב להופיע כאן. */
.art-card[hidden],
.art-more[hidden] { display: none; }

/* מוסתר כברירת מחדל ומוצג ב-JS. חוץ ממקרה אחד: כשאין בדף אף כרטיס
   (עוד לא נוצר מאמר), הוא מופיע גם בלי JS. */
.art-empty[hidden] { display: none; }

.art-list:not(:has(.art-card)) + .art-empty[hidden] { display: block; }

.art-more { margin-block-start: var(--space-l); text-align: center; }

/* --- עמוד המאמר ---------------------------------------------------------- */

/* הסקשן הראשון של המאמר צמוד ל-hero: הריפוד העליון שלו יורד לאפס, כדי
   שתמונת הפתיחה תוכל לעלות ולשבת בדיוק על קו התפר. */
.article-intro { padding-block-start: 0; }

/* תמונת הפתיחה, מורמת אל תוך ה-page-hero הכהה שמעליה. */
.article-media {
  margin-block-start: calc(var(--space-l) * -1);
  margin-block-end: var(--space-l);
}

.article-media img {
  inline-size: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-l);
}

.article-media figcaption {
  margin-block-start: var(--space-xs);
  font-size: var(--step--1);
  color: var(--muted);
  text-align: center;
}

/* גוף המאמר: תוכן עניינים דביק בצד, טקסט לצידו. במובייל התוכן
   העניינים עולה למעלה ומפסיק להיות דביק. */
.article-layout {
  display: grid;
  gap: var(--space-l);
  grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 1000px) {
  .article-layout { grid-template-columns: 260px minmax(0, 1fr); }

  .article-layout .toc {
    position: sticky;
    inset-block-start: calc(var(--header-h-compact) + var(--space-s));
    align-self: start;
  }
}



.prose figure {
  margin-block: var(--space-l);
}

.prose figure img {
  inline-size: 100%;
  border-radius: var(--radius);
  box-shadow: var(--shadow-s);
}

.prose figcaption {
  margin-block-start: var(--space-xs);
  font-size: var(--step--1);
  color: var(--muted);
}

/* שורת החתימה מתחת לכותרת המאמר, בתוך ה-hero הכהה. */
.article-byline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem;
  margin-block-start: var(--space-s);
  font-size: var(--step--1);
  color: var(--muted-invert);
}

.article-byline > * + *::before {
  content: "·";
  margin-inline-end: 0.45rem;
  opacity: 0.7;
}

/* ==========================================================================
   12b. כפתור וואטסאפ צף, ופופ-אפ איסוף פרטים
   --------------------------------------------------------------------------
   שניהם מוזרקים ב-site.js ולא כתובים ב-17 קבצי ה-HTML. הם לא תוכן שגוגל
   סורק — הכפתור מפנה לדומיין חיצוני והפופ-אפ לא קיים בלי JavaScript — ולכן
   אין סיבה לשכפל אותם, בניגוד לפוטר שדווקא חייב להיות HTML סטטי.
   ========================================================================== */

/* --- הכפתור הצף ----------------------------------------------------------
   דסקטופ בלבד. במובייל כבר יש .action-bar קבועה עם וואטסאפ וטלפון, ושני
   כפתורי וואטסאפ באותו מסך זה רעש.
   ------------------------------------------------------------------------ */
.wa-float { display: none; }

@media (min-width: 768px) {
  .wa-float {
    position: fixed;
    inset-block-end: 26px;
    inset-inline-start: 26px;
    z-index: 60;
    display: grid;
    place-items: center;
    inline-size: 60px;
    block-size: 60px;
    border-radius: 50%;
    background: #25d366;
    color: #fff;
    box-shadow: 0 6px 20px rgba(15, 23, 42, 0.28);
    transition: transform 0.22s var(--ease), box-shadow 0.22s var(--ease);
  }

  .wa-float:hover {
    transform: scale(1.07);
    box-shadow: 0 10px 28px rgba(37, 211, 102, 0.42);
  }

  .wa-float svg { inline-size: 33px; block-size: 33px; }
}

/* --- הפופ-אפ -------------------------------------------------------------- */
.pop-backdrop {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  padding: var(--space-s);
  background: rgba(15, 23, 42, 0.62);
  animation: pop-fade 0.25s var(--ease) both;
}

.pop-backdrop[hidden] { display: none; }

@keyframes pop-fade { from { opacity: 0; } to { opacity: 1; } }

.pop {
  position: relative;
  inline-size: min(100%, 460px);
  max-block-size: calc(100dvh - 2rem);
  overflow-y: auto;
  padding: var(--space-l);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-l);
  animation: pop-rise 0.3s var(--ease) both;
}

@keyframes pop-rise {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}

.pop h2 { font-size: var(--step-2); }

.pop-close {
  position: absolute;
  inset-block-start: 10px;
  inset-inline-end: 10px;
  inline-size: 40px;
  block-size: 40px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--muted);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
}

.pop-close:hover { background: var(--paper); color: var(--navy-900); }

.pop .field + .field { margin-block-start: var(--space-s); }

/* במובייל זה לא חלון מרכזי אלא מגירה שנפתחת מלמטה. גוגל מחשיב חלון
   שמכסה את המסך בנייד כ-intrusive interstitial ומוריד על זה דירוג —
   וכל האסטרטגיה של האתר הזה היא חיפוש אורגני. */
@media (max-width: 767px) {
  .pop-backdrop {
    place-items: end center;
    padding: 0;
    background: rgba(15, 23, 42, 0.5);
  }

  .pop {
    inline-size: 100%;
    max-block-size: 82dvh;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    padding-block-end: calc(var(--space-l) + env(safe-area-inset-bottom, 0px));
    animation-name: pop-sheet;
  }

  @keyframes pop-sheet {
    from { transform: translateY(100%); }
    to { transform: translateY(0); }
  }
}

body.pop-open { overflow: hidden; }

/* ==========================================================================
   14. Motion & accessibility
   ========================================================================== */

:focus-visible {
  outline: 3px solid var(--emerald-600);
  outline-offset: 3px;
  border-radius: 6px;
}

.hero :focus-visible { outline-color: #6ee7b7; }

.visually-hidden {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* One orchestrated moment: the hero settles, then signs itself. */
@keyframes rise {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes sign {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

.rise {
  opacity: 0;
  animation: rise 0.6s var(--ease) forwards;
}

.rise-1 { animation-delay: 0.05s; }
.rise-2 { animation-delay: 0.14s; }
.rise-3 { animation-delay: 0.23s; }
.rise-4 { animation-delay: 0.32s; }

.ink-stroke {
  transform: scaleX(0);
  transform-origin: 100% 50%;
  animation: sign 0.85s var(--ease) 0.45s forwards;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-delay: 0ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .rise { opacity: 1; transform: none; }
  .ink-stroke { transform: none; }

  /* ::details-content isn't matched by the * rule above, so it needs
     naming explicitly. */
  .faq-item::details-content { transition: none !important; }
  .faq-item[open] .faq-body { animation: none !important; }
}

@media print {
  .header, .action-bar, .footer, .hero-watermark { display: none; }
  body { background: #fff; }
}