:root{
  --forest: #1f3a2e;
  --forest-deep: #16281f;
  --forest-soft: #2c4d3c;
  --leaf: #5b8c62;
  --leaf-dark: #3f6b47;
  --leaf-soft: #e2ecdf;
  --sand: #f2ead8;
  --sand-warm: #ece0c7;
  --sand-dim: #c4b9a0;
  --ink: #22291f;
  --clay: #c98a4b;
  --clay-dark: #a86b34;
  --line: #ddd3ba;
  --white: #fffdf9;
  --max: 1120px;
  --radius: 14px;
  --shadow: 0 10px 30px -12px rgba(22,40,31,.18);
}

*,*::before,*::after{ box-sizing:border-box; }
a:focus-visible, button:focus-visible, [tabindex]:focus-visible{
  outline: 3px solid var(--clay);
  outline-offset: 2px;
  border-radius: 2px;
}
.skip-link{
  position:absolute; inset-inline-start:1rem; top:-3rem;
  background: var(--forest-deep); color:#fff;
  padding:.7rem 1.2rem; border-radius: var(--radius);
  z-index:1000; font-weight:600; text-decoration:none;
  transition: top .15s ease;
}
.skip-link:focus{ top:1rem; }
html:not(.lang-ready) body{ visibility:hidden; }

/* FLOATING WHATSAPP BUTTON — visible on every page while scrolling */
.whatsapp-float{
  position:fixed;
  bottom:20px;
  right:20px;
  width:56px;
  height:56px;
  background:#25D366;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 4px 14px rgba(0,0,0,.28);
  z-index:900;
  transition:transform .15s ease, box-shadow .15s ease;
}
.whatsapp-float:hover{
  transform:scale(1.07);
  box-shadow:0 6px 18px rgba(0,0,0,.34);
}
.whatsapp-float svg{ width:30px; height:30px; display:block; }
@media (max-width:480px){
  .whatsapp-float{ width:50px; height:50px; bottom:14px; right:14px; }
  .whatsapp-float svg{ width:26px; height:26px; }
}
@media (min-width:1024px){
  .whatsapp-float{ width:66px; height:66px; bottom:28px; right:28px; }
  .whatsapp-float svg{ width:36px; height:36px; }
}
html{ scroll-behavior:smooth; overflow-x:hidden; }
body{
  /* overflow-x:hidden was also set here, on top of html above. Setting it
     on both independently makes the browser auto-promote each one's
     overflow-y to "auto" too (a CSS default), turning html AND body into
     two separate scroll containers. That silently broke position:sticky
     on .site-header: the header stuck to the top of body's own (invisible)
     scroll position instead of the page's real scroll, so on mobile,
     scrolling the actual page just carried the header off-screen with it
     instead of keeping it pinned. Removed here so html is the single
     scroll container again. */
  margin:0;
  background: var(--white);
  color: var(--ink);
  font-family: 'Heebo', 'Assistant', sans-serif;
  line-height:1.7;
  font-size:17px;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{
  font-family:'Rubik', sans-serif;
  font-weight:600;
  line-height:1.25;
  color: var(--leaf-dark);
  margin: 0 0 .5em;
}
h1{ font-size: clamp(2rem, 4.2vw, 3.1rem); font-weight:700; }
h2{ font-size: clamp(1.5rem, 2.8vw, 2.1rem); }
h3{ font-size: clamp(1.15rem, 1.8vw, 1.4rem); }
p{ margin:0 0 1.1em; }
a{ color: var(--clay-dark); text-decoration:none; }
a:hover{ text-decoration:underline; }
ul,ol{ padding-inline-start: 1.3em; margin:0 0 1.1em; }
li{ margin-bottom:.45em; }
img{ max-width:100%; display:block; }

.wrap{ max-width: var(--max); margin-inline:auto; padding-inline: 1.5rem; }
.section{ padding-block: clamp(2.25rem, 5vw, 4rem); }
.section.alt{ background: var(--sand); }
.section-head{ max-width: 46rem; margin-bottom: 2.5rem; }
.eyebrow{
  display:inline-block;
  font-size:.8rem;
  letter-spacing:.06em;
  color: var(--clay-dark);
  font-weight:600;
  text-transform: uppercase;
  margin-bottom:.7em;
}
.lede{ font-size:1.15rem; color:#3c4536; }

/* Header */
.site-header{
  position: sticky; top:0; z-index: 50;
  background: rgba(255,253,249,.92);
  backdrop-filter: blur(8px);
  border-block-end: 1px solid var(--line);
}
.header-inner{
  max-width: var(--max); margin-inline:auto; padding-inline:1.5rem;
  display:flex; align-items:center; justify-content:space-between; gap:1.5rem;
  height:72px;
}
.logo{
  font-family:'Rubik', sans-serif;
  font-weight:700; font-size:1.3rem;
  color: var(--forest-deep);
  display:flex; align-items:center; gap:.5rem;
}
.logo span{ color: var(--clay-dark); }
.site-nav{
  display:flex; align-items:center; gap:1.7rem; flex-wrap:nowrap;
}
.site-nav a{
  color: var(--ink); font-weight:500; font-size:.97rem;
  padding-block:.3rem; white-space:nowrap;
  border-block-end: 2px solid transparent;
}
.site-nav a:hover{ text-decoration:none; border-block-end-color: var(--clay); }
.site-nav a.active{ color: var(--forest-deep); border-block-end-color: var(--forest-deep); font-weight:700; }
.nav-item-dropdown{ position:relative; }
.nav-dropdown-menu{
  display:none; position:absolute; top:100%; inset-inline-start:0; margin-top:.4rem;
  background:var(--white); border:1px solid var(--line); border-radius:var(--radius);
  padding:.5rem; min-width:15rem; box-shadow:var(--shadow); z-index:50;
  flex-direction:column; gap:.15rem;
}
.nav-item-dropdown:hover .nav-dropdown-menu,
.nav-item-dropdown:focus-within .nav-dropdown-menu,
.nav-item-dropdown.is-open .nav-dropdown-menu{ display:flex; }
.nav-dropdown-menu a{
  padding:.6rem .8rem !important; border-block-end:none !important;
  border-radius:8px; font-size:.92rem;
}
.nav-dropdown-menu a:hover{ background:var(--leaf-soft); border-block-end:none; }
.nav-actions{ display:flex; align-items:center; gap:.7rem; flex:none; margin-inline-start:1.2rem; }
.lang-btn{
  border:1px solid var(--line); background:var(--white);
  border-radius:999px; padding:.4rem 1rem; font-size:.85rem; font-weight:600;
  cursor:pointer; color: var(--forest-deep); font-family:inherit;
}
.lang-btn:hover{ border-color: var(--clay); }
.whatsapp-btn{
  display:flex; align-items:center; justify-content:center;
  width:34px; height:34px; border-radius:50%;
  background:#25D366; color:#fff;
  transition: opacity .15s ease;
}
.whatsapp-btn:hover{ opacity:.85; }
.nav-burger{
  display:none; background:none; border:none; cursor:pointer; padding:.4rem;
}
.nav-burger span{ display:block; width:24px; height:2px; background:var(--forest-deep); margin:5px 0; }

/* English nav labels run noticeably longer than their Hebrew equivalents
   (e.g. "Knowledge Center" vs "מרכז הידע"), which was overflowing the
   header well above the breakpoint below and pushing the WhatsApp
   icon / language toggle off-screen. Tighten spacing for English first... */
html[lang="en"] .site-nav{ gap:1.05rem; }
html[lang="en"] .site-nav a{ font-size:.9rem; }
html[lang="en"] .nav-actions{ margin-inline-start:.7rem; gap:.5rem; }

/* This breakpoint used to be 860px, on the assumption that Hebrew's nav
   labels always fit above that width. Measured directly and found false:
   the logo + full nav row + WhatsApp icon + language toggle only actually
   fit again above ~1135px. Between roughly 861px and 1135px the WhatsApp
   button and language toggle were pushed off the left edge of the screen
   entirely - invisible and unclickable - in Hebrew, at very ordinary
   laptop/small-desktop widths. Raised to 1150px (small safety margin)
   so Hebrew falls back to the mobile nav pattern in that range too,
   instead of silently overflowing off-screen. */
@media (max-width: 1150px){
  .site-nav{
    position:fixed; inset-inline:0; top:72px; background:var(--white);
    flex-direction:column; align-items:stretch; gap:0;
    border-block-end:1px solid var(--line);
    max-height:0; overflow:hidden; transition: max-height .25s ease;
  }
  .site-nav.open{ max-height: 70vh; overflow-y:auto; }
  .site-nav a{ padding:1rem 1.5rem; border-block-end:1px solid var(--line); }
  .nav-burger{ display:block; }
  .nav-item-dropdown{ display:block; }
  .nav-item-dropdown > a{ display:block; }
  .nav-dropdown-menu{ display:none !important; }
}
@media (max-width: 480px){
  .logo [data-lang], .logo .logo-sep{ display:none !important; }
}

/* Safety net: even after the English-specific tightening above, English
   labels still need more width than Hebrew to fit on one line without
   crowding out the WhatsApp icon / language toggle. Switch English to the
   already-working mobile nav pattern earlier (wider breakpoint) than
   Hebrew, instead of letting it silently overflow off-screen. */
@media (max-width: 1220px){
  html[lang="en"] .site-nav{
    position:fixed; inset-inline:0; top:72px; background:var(--white);
    flex-direction:column; align-items:stretch; gap:0;
    border-block-end:1px solid var(--line);
    max-height:0; overflow:hidden; transition: max-height .25s ease;
  }
  html[lang="en"] .site-nav.open{ max-height: 70vh; overflow-y:auto; }
  html[lang="en"] .site-nav a{ padding:1rem 1.5rem; border-block-end:1px solid var(--line); font-size:.97rem; }
  html[lang="en"] .nav-burger{ display:block; }
  html[lang="en"] .nav-item-dropdown{ display:block; }
  html[lang="en"] .nav-item-dropdown > a{ display:block; }
  html[lang="en"] .nav-dropdown-menu{ display:none !important; }
}

/* Buttons */
.btn{
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.85rem 1.6rem; border-radius:999px;
  font-weight:600; font-size:.98rem; cursor:pointer; border:none;
  font-family:inherit;
}
.btn:hover{ text-decoration:none; }
.btn-primary{ background: var(--clay); color:var(--white); }
.btn-primary:hover{ background: var(--clay-dark); }
.btn-outline{ background:transparent; border:1.5px solid var(--forest-deep); color:var(--forest-deep); }
.btn-outline:hover{ background: var(--forest-deep); color:var(--white); }
.btn-ghost{ background: var(--sand-warm); color: var(--forest-deep); }
.btn-row{ display:flex; flex-wrap:wrap; gap:.9rem; margin-top:1.6rem; }

/* Hero */
.hero{
  padding-block: clamp(3.5rem, 9vw, 6.5rem) clamp(2.5rem, 6vw, 4rem);
  background: linear-gradient(180deg, var(--sand) 0%, var(--white) 100%);
}
.hero .lede{ max-width:42rem; }

/* Chain / process flow diagram */
.flow{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:center;
  gap:0; margin-block: 2.5rem; position:relative; counter-reset: flownode;
}
.flow::before{
  content:''; position:absolute; inset-inline:6%; top:50%; height:2px;
  background: var(--line); z-index:0; transform:translateY(-50%);
}
.flow-node{
  counter-increment: flownode;
  background: var(--white); border:1.5px solid var(--line);
  border-radius:12px; padding:.85rem 1.25rem; margin:.35rem;
  font-size:.92rem; font-weight:600; color:var(--forest-deep);
  white-space:nowrap; position:relative; z-index:1;
  display:flex; flex-direction:column; align-items:center; gap:.25rem;
  min-width: 6rem; text-align:center;
}
.flow-node::before{
  content: counter(flownode);
  font-family:'Rubik', sans-serif; font-weight:700; font-size:.72rem;
  color: var(--clay-dark); background: var(--sand-warm);
  width:1.3rem; height:1.3rem; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
}
.flow-node.result{
  background: var(--clay); border-color:var(--clay-dark); color:var(--white);
}
.flow-node.result::before{ background:rgba(255,255,255,.25); color:var(--white); }
.flow-arrow{
  flex:none; width:22px; height:22px; margin:0 .1rem;
  color: var(--clay-dark); z-index:1; display:flex; align-items:center; justify-content:center;
}
.flow-arrow svg{ width:100%; height:100%; }
@media (max-width: 680px){
  .flow:not(.flow--vertical){ flex-direction:column; }
  .flow:not(.flow--vertical)::before{ inset-inline:auto; inset-block:6%; top:auto; left:50%; width:2px; height:auto; transform:translateX(-50%); }
  .flow:not(.flow--vertical) .flow-arrow{ transform:rotate(90deg); }
}
.flow--vertical{ flex-direction:column; }
.flow--vertical::before{ inset-inline:auto; inset-block:6%; top:auto; left:50%; width:2px; height:auto; transform:translateX(-50%); }
.flow--vertical .flow-node{ min-width:14rem; }

/* Cards */
.grid{ display:grid; gap:1.5rem; }
.grid-3{ grid-template-columns: repeat(3, 1fr); }
.grid-2{ grid-template-columns: repeat(2, 1fr); }
.grid-4{ grid-template-columns: repeat(4, 1fr); }
@media (max-width: 860px){ .grid-3, .grid-2{ grid-template-columns:1fr; } }
@media (max-width: 900px){ .grid-4{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px){ .grid-4{ grid-template-columns: 1fr; } }

.card{
  background: var(--white); border:1px solid var(--line);
  border-radius: var(--radius); padding:1.8rem;
}
.grid-4 .card{ padding:1.2rem; }
.card h3{ margin-bottom:.5rem; }
.card.on-sand{ background: var(--white); }

/* Section 02 (compare cards) — mobile-only "vs" divider + tighter mobile spacing */
.compare-vs{ display:none; }
@media (max-width:860px){
  .compare-vs{
    display:flex; align-items:center; justify-content:center;
    width:2.4rem; height:2.4rem; margin:0 auto;
    background: var(--leaf-soft); color: var(--leaf-dark);
    border-radius:50%; font-size:.8rem; font-weight:700;
  }
}
.compare-not{ margin:1.5rem auto 0; }
@media (max-width:860px){ .compare-not{ margin-top:2.2rem; } }
.compare-close{ margin-top:1.3rem; }
@media (max-width:860px){ .compare-close{ margin-top:2rem; } }

.icon-badge{
  width:44px; height:44px; border-radius:12px;
  background: var(--leaf-soft); color: var(--leaf-dark);
  display:flex; align-items:center; justify-content:center;
  margin-bottom:1rem; font-size:1.3rem;
}

.photo-box{
  background: var(--sand-warm); color: var(--sand-dim);
  display:flex; align-items:center; justify-content:center;
  text-align:center; font-size:.78rem; padding:1rem;
  border-radius: var(--radius);
}
.card-photo{ width:100%; aspect-ratio: 4/3; margin-bottom:1rem; }
.hero-photo{ width:100%; aspect-ratio: 16/10; margin-bottom:1.6rem; }
.bullets-tight{ margin:0; padding-inline-start:1.15em; }
.bullets-tight li{ margin-bottom:.3em; font-size:.9rem; color:#3c4536; }

/* Pull quote */
.pullquote{
  border-inline-start: 4px solid var(--clay);
  padding-inline-start: 1.3rem;
  font-family:'Rubik', sans-serif;
  font-size:1.3rem; color: var(--forest-deep);
  margin-block: 2rem; font-style:normal;
}

/* Steps (how it works) */
.steps{ counter-reset: step; display:flex; flex-direction:column; gap:0; }
.step{
  display:flex; gap:1.3rem; padding-block:1.6rem;
  border-block-end:1px solid var(--line);
}
.step:last-child{ border-block-end:none; }
.step-num{
  counter-increment: step;
  flex:none; width:2.6rem; height:2.6rem; border-radius:50%;
  background: var(--forest); color:var(--sand);
  display:flex; align-items:center; justify-content:center;
  font-family:'Rubik', sans-serif; font-weight:700;
}
.step-num::before{ content: counter(step); }

/* Population sections */
.pop-block{
  padding-block:2rem; border-block-end:1px solid var(--line);
}
.pop-block:last-of-type{ border-block-end:none; }
.pop-block h3{ display:flex; align-items:center; gap:.6rem; }
.tag{
  display:inline-block; background: var(--leaf-soft); color: var(--leaf-dark);
  font-size:.78rem; font-weight:700; padding:.25rem .7rem; border-radius:999px;
}
.tag-row{ display:flex; flex-wrap:wrap; justify-content:center; gap:.6rem; }

/* Knowledge hub: chapter table-of-contents */
.hub-toc{ display:flex; flex-direction:column; gap:.9rem; margin-top:1.8rem; }
.hub-toc a.card{
  display:flex; align-items:center; gap:1.1rem;
  text-decoration:none; color:inherit;
  transition: border-color .15s ease, background .15s ease;
}
.hub-toc a.card:hover{ border-color:var(--clay); background:var(--leaf-soft); }
.hub-toc-num{
  flex:none; width:2.4rem; height:2.4rem; border-radius:50%;
  background:var(--forest); color:var(--sand);
  display:flex; align-items:center; justify-content:center;
  font-family:'Rubik', sans-serif; font-weight:700; font-size:1.05rem;
}
.hub-toc-text h3{ margin:0 0 .25rem; font-size:1.05rem; }
.hub-toc-text p{ margin:0; font-size:.85rem; color:#3c4536; }

.not-fit{
  background: var(--forest-deep); color: var(--sand);
  border-radius: var(--radius); padding:2rem;
}
.not-fit h3{ color: var(--sand); }
.not-fit li{ color: var(--sand-dim); }
.not-fit li::marker{ color: var(--clay); }

/* FAQ */
details.faq-item{
  border-block-end:1px solid var(--line); padding-block:1.1rem;
}
details.faq-item summary{
  cursor:pointer; font-weight:700; font-size:1.05rem; color: var(--forest-deep);
  list-style:none; display:flex; justify-content:space-between; align-items:center; gap:1rem;
}
details.faq-item summary::-webkit-details-marker{ display:none; }
details.faq-item summary::after{
  content:'+'; font-size:1.4rem; color: var(--clay-dark); flex:none;
}
details.faq-item[open] summary::after{ content:'−'; }
details.faq-item p{ margin-top:.9rem; color:#3c4536; }

/* Contact */
.contact-grid{ display:grid; grid-template-columns: 1.1fr .9fr; gap:2.5rem; align-items:start; }
@media (max-width: 860px){ .contact-grid{ grid-template-columns:1fr; } }
.contact-card{
  background: var(--forest); color: var(--sand);
  border-radius: var(--radius); padding:2.2rem;
}
.contact-card h3{ color: var(--sand); }
.contact-line{
  display:flex; align-items:center; gap:.8rem;
  padding-block:.9rem; border-block-end:1px solid rgba(242,234,216,.15);
}
.contact-line:last-child{ border-block-end:none; }
.contact-line a{ color: var(--sand); font-weight:600; }
.placeholder-note{
  font-size:.82rem; color: var(--clay); background: rgba(201,138,75,.12);
  padding:.6rem .9rem; border-radius:8px; margin-top:1rem;
}

/* Footer */
.site-footer{
  background: var(--forest-deep); color: var(--sand-dim);
  padding-block: 3rem 2rem; margin-top: 4rem;
}
.footer-inner{
  max-width: var(--max); margin-inline:auto; padding-inline:1.5rem;
  display:flex; flex-wrap:wrap; justify-content:space-between; gap:2rem;
}
.footer-col h4{ color: var(--sand); font-size:.95rem; margin-bottom:.8rem; }
.footer-col a{ color: var(--sand-dim); display:block; margin-bottom:.5rem; font-size:.92rem; }
.footer-col a:hover{ color: var(--sand); }
.footer-bottom{
  max-width: var(--max); margin-inline:auto; padding-inline:1.5rem;
  margin-top:2.5rem; padding-top:1.5rem; border-block-start:1px solid rgba(242,234,216,.12);
  font-size:.8rem;
}

/* language visibility handled entirely via the [hidden] attribute, which
   main.js toggles per element. A single !important rule here guarantees it
   wins over any inline "style=display:..." on the element, and — unlike a
   data-lang-based override — never fights an element's own required display
   value (e.g. .whatsapp-float's display:flex) when it is shown again. */
[hidden]{ display:none !important; }

.section-quote-box{
  background: var(--sand); border-radius: var(--radius); padding: 2rem 2.2rem;
  margin-block: 2rem;
}

/* GLOSSARY — collapsible category accordions */
.glossary-cat{
  background:var(--white); border:1px solid var(--line); border-radius:var(--radius);
  margin-bottom:1rem; overflow:hidden;
}
.glossary-cat summary{
  cursor:pointer; padding:1.2rem 1.6rem; font-weight:700; font-size:1.1rem;
  list-style:none; display:flex; align-items:center; justify-content:space-between;
  gap:1rem; color:var(--forest-deep);
}
.glossary-cat summary::-webkit-details-marker{ display:none; }
.glossary-cat summary::after{
  content:'+'; font-size:1.5rem; font-weight:400; color:var(--clay); flex:none; line-height:1;
}
.glossary-cat[open] summary::after{ content:'\2212'; }
.glossary-cat summary .cat-count{
  font-weight:500; font-size:.82rem; color:var(--sand-dim); margin-inline-end:auto; white-space:nowrap;
}
.glossary-cat-body{ padding:0 1.6rem 1.2rem; border-block-start:1px solid var(--line); }
.glossary-term{ padding-block:1.1rem; border-block-end:1px solid var(--line); }
.glossary-term:last-child{ border-block-end:none; }
.glossary-term h4{ margin:0 0 .4rem; font-size:1rem; color:var(--ink); }
.glossary-term p{ margin:.3rem 0; font-size:.93rem; line-height:1.6; }
.glossary-term p strong{ color:var(--forest-soft); font-weight:600; }
.glossary-link a{ font-size:.88rem; font-weight:600; }