:root{
  --navy:#081e42; --navy-2:#0d2b5c;
  --pine:#081e42; --pine-2:#0d2b5c;
  --gold:#bf9653; --gold-2:#d4b483;
  --paper:#f6f7f9; --paper-2:#ececf0;
  --ink:#1b2130; --ink-soft:#4b5468;
  --line:#dcdfe6; --white:#ffffff; --myth:#a4433a; /* keep — used only for myth/fact contrast, not brand-facing */
  --radius:10px; --radius-lg:18px;
  --shadow:0 1px 2px rgba(20,34,56,.06),0 8px 24px rgba(20,34,56,.06);
  --maxw:1040px;
  --font-display:'Frank Ruhl Libre',serif;
  --font-body:'Assistant',sans-serif;
  --font-mono:'IBM Plex Mono',monospace;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--font-body);
  font-size:17px;line-height:1.65;-webkit-font-smoothing:antialiased}
img,svg{max-width:100%;display:block}
a{color:inherit}
:focus-visible{outline:3px solid var(--gold);outline-offset:2px;border-radius:4px}
@media (prefers-reduced-motion: reduce){*{animation-duration:.001ms !important;transition-duration:.001ms !important}}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 28px}

/* ---- header / footer ---- */
.site-header{position:sticky;top:0;z-index:50;background:rgba(246,247,249,.92);
  backdrop-filter:blur(6px);border-bottom:1px solid var(--line)}
.site-header-inner{display:flex;align-items:center;justify-content:space-between;padding:8px 28px;gap:20px}
.brand-lockup{display:flex;align-items:center;gap:10px;text-decoration:none;font-family:var(--font-display);
  font-weight:800;font-size:19px;color:var(--navy)}
.brand-lockup svg{width:26px;height:26px}
.site-header nav{display:flex;gap:26px;font-size:14.5px;font-weight:600}
.site-header nav a{text-decoration:none;color:var(--ink-soft)}
.site-header nav a:hover{color:var(--navy)}
.btn-sm{padding:10px 18px;font-size:13.5px}

.site-footer{border-top:1px solid var(--line);padding:40px 0;margin-top:80px}
.site-footer-inner{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:18px}
.site-footer nav{display:flex;gap:18px;font-size:13px}
.site-footer nav a{text-decoration:none;color:var(--ink-soft)}
.footer-note{font-family:var(--font-mono);font-size:12px;color:var(--ink-soft);margin:0;width:100%}

/* ---- eyebrow / cta / buttons ---- */
.eyebrow{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-mono);font-size:12.5px;
  letter-spacing:.08em;text-transform:uppercase;color:var(--pine-2);background:rgba(47,93,80,.08);
  padding:6px 14px;border-radius:999px;margin-bottom:18px}
.lede{font-size:20px;color:var(--navy);font-weight:500;max-width:680px}
.cta-row{display:flex;gap:12px;flex-wrap:wrap}
.btn{font-family:var(--font-body);font-weight:700;font-size:15px;padding:13px 26px;border-radius:999px;
  border:2px solid transparent;cursor:pointer;transition:transform .15s,box-shadow .15s;text-decoration:none;display:inline-block;
  -webkit-appearance:none;appearance:none;-webkit-tap-highlight-color:transparent;touch-action:manipulation;margin:0}
.btn-primary{background:var(--gold);color:var(--navy)}
.btn-primary:hover{transform:translateY(-1px);box-shadow:0 6px 18px rgba(184,134,59,.35)}
.btn-secondary{background:transparent;border-color:var(--navy);color:var(--navy)}

/* ---- content components (mirrors the brand book) ---- */
.trust-bar{display:flex;gap:26px;flex-wrap:wrap;font-size:14px;color:var(--ink-soft);
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:14px 0;margin:28px 0}
.trust-bar b{color:var(--navy)}

.service-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:14px}
.card{background:var(--white);border:1px solid var(--line);border-radius:var(--radius);padding:18px}
.card .badge{display:inline-block;background:var(--pine);color:#fff;font-size:11px;padding:3px 10px;
  border-radius:999px;margin-bottom:10px;font-family:var(--font-mono)}
.card h4{margin:0 0 6px;font-family:var(--font-display);color:var(--navy);font-size:17px}
.card p{margin:0;font-size:14px;color:var(--ink-soft)}

ol.steps{counter-reset:step;list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:16px}
ol.steps li{counter-increment:step;display:flex;gap:16px;align-items:flex-start}
ol.steps li::before{content:counter(step);flex:0 0 auto;width:34px;height:34px;border-radius:50%;
  background:var(--navy);color:#fff;display:flex;align-items:center;justify-content:center;font-family:var(--font-mono);font-size:14px}
ol.steps b{color:var(--navy);display:block;margin-bottom:2px}
ol.steps span{color:var(--ink-soft);font-size:14.5px}

.faq-item{border-bottom:1px solid var(--line);padding:16px 0}
.faq-item summary{cursor:pointer;font-weight:700;color:var(--navy)}
.faq-item p{color:var(--ink-soft);margin:10px 0 0;font-size:15px}

.checklist{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:10px}
.checklist li{display:flex;gap:10px;align-items:flex-start;font-size:15px}
.checklist li::before{content:"✓";flex:0 0 auto;width:20px;height:20px;border-radius:5px;
  background:rgba(47,93,80,.12);color:var(--pine);font-size:12px;display:flex;align-items:center;justify-content:center;margin-top:2px}

.timeline{display:flex;overflow-x:auto;padding:10px 0}
.timeline .stage{flex:1 0 140px;position:relative;padding:0 18px 0 0;text-align:center}
.timeline .stage::before{content:"";position:absolute;top:9px;right:0;left:-50%;height:2px;background:var(--line)}
.timeline .stage:first-child::before{display:none}
.timeline .dot{width:20px;height:20px;border-radius:50%;background:var(--gold);margin:0 auto 10px;
  border:3px solid var(--paper);box-shadow:0 0 0 2px var(--gold)}
.timeline .age{font-family:var(--font-mono);font-size:12px;color:var(--gold-2);font-weight:600}
.timeline .txt{font-size:13.5px;color:var(--ink-soft);margin-top:4px}

.scenario{background:var(--white);border:1px dashed var(--line);border-radius:var(--radius);padding:18px}
.scenario .tag{font-family:var(--font-mono);font-size:11px;background:var(--myth);color:#fff;
  padding:3px 10px;border-radius:999px;display:inline-block;margin-bottom:10px}

.pullquote{font-family:var(--font-display);font-size:clamp(22px,2.6vw,30px);line-height:1.42;color:var(--navy);
  border-inline-start:4px solid var(--gold);padding:6px 26px;margin:30px 0;font-weight:500}

.resource-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:8px}
.resource-list li{font-size:14px;color:var(--ink-soft);border-bottom:1px dotted var(--line);padding-bottom:8px}
.resource-list b{color:var(--navy)}

.value-chips{display:flex;flex-wrap:wrap;gap:10px}
.value-chips span{background:var(--navy);color:var(--white);font-size:13.5px;padding:8px 16px;
  border-radius:999px;font-weight:600}

table.compare{width:100%;border-collapse:collapse;font-size:14px}
table.compare th,table.compare td{padding:12px 14px;border:1px solid var(--line);text-align:right}
table.compare th{background:var(--navy);color:#fff;font-weight:600;font-family:var(--font-mono);font-size:12px}
table.compare tr:nth-child(even) td{background:var(--white)}

.todo{background:#fdf3d6;border:1px dashed #c9a227;color:#7a5f0a;border-radius:6px;
  padding:2px 10px;font-size:13px;font-family:var(--font-mono);display:inline-block}

/* ---- generic layout helpers for pages ---- */
.hero{padding:64px 0 40px}
h1{font-family:var(--font-display);font-weight:900;font-size:clamp(34px,5vw,54px);
  line-height:1.1;color:var(--navy);margin:0 0 18px}
h2{font-family:var(--font-display);font-size:clamp(24px,3vw,32px);color:var(--navy);margin:0 0 14px}
section{padding:48px 0;border-top:1px solid var(--line)}
section:first-of-type{border-top:none}

@media (max-width:720px){
  .site-header nav{display:none}
}

/* ---- additions to match the real content markup ---- */
h3{font-family:var(--font-display);font-size:19px;color:var(--navy);margin:22px 0 8px;font-weight:700}
p{margin:0 0 14px}
strong{color:var(--navy)}

.muted{color:var(--ink-soft)}

.section-soft{background:var(--paper-2);border-radius:var(--radius-lg);padding:36px 32px;margin:0 auto -1px}
.section-soft.wrap{max-width:var(--maxw)}

ul.plain{margin:0 0 14px;padding-inline-start:22px;display:flex;flex-direction:column;gap:10px}
ul.plain li{font-size:15.5px;color:var(--ink)}

.value-chips{display:flex;flex-wrap:wrap;gap:10px;margin:16px 0 0;padding:0;list-style:none}
.value-chips li{background:var(--navy);color:#fff;font-size:13.5px;padding:8px 16px;border-radius:999px;font-weight:600}

.toc{background:var(--white);border:1px solid var(--line);border-radius:var(--radius-lg);padding:22px 24px}
.toc-title{font-family:var(--font-mono);font-size:12px;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-soft);margin-bottom:12px;font-weight:600}
.toc-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px 24px;list-style:none;margin:0;padding:0}
.toc-grid a{color:var(--pine);text-decoration:none;font-size:14px}
.toc-grid a:hover{text-decoration:underline}

/* timeline: real content is a vertical stacked list of life-stages, not a horizontal dot path */
ul.timeline{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
ul.timeline li{padding:18px 0 18px 0;border-bottom:1px solid var(--line);border-inline-start:3px solid var(--gold);padding-inline-start:18px}
ul.timeline li:last-child{border-bottom:none}
ul.timeline .stage{font-family:var(--font-mono);font-size:13px;color:var(--navy);font-weight:700;display:block;margin-bottom:6px;letter-spacing:.01em}

.faq-item{border-bottom:1px solid var(--line);padding:16px 0}
.faq-item h3{margin:0 0 8px;font-size:16.5px}
.faq-item p{color:var(--ink-soft);font-size:15px}

.myth-fact{background:var(--white);border:1px solid var(--line);border-radius:var(--radius);padding:18px 20px;margin-bottom:14px}
.myth-fact .myth{color:var(--myth);font-weight:700;margin-bottom:6px;font-size:14.5px}
.myth-fact .fact{color:var(--pine);font-weight:700;margin-top:10px;margin-bottom:4px;font-family:var(--font-mono);font-size:12px;text-transform:uppercase;letter-spacing:.04em}

.resource-list{list-style:none;margin:0;padding:0}
.resource-list li{padding:12px 0;border-bottom:1px solid var(--line);font-size:14.5px;color:var(--ink-soft)}
.resource-list .name{font-weight:700;color:var(--navy);display:block;margin-bottom:2px;font-family:var(--font-display)}

.testimonial{border-inline-start:3px solid var(--gold);padding-inline-start:18px;margin-bottom:22px}
.testimonial p{font-size:16px;color:var(--ink);font-style:italic}
.testimonial .who{font-weight:600;color:var(--ink-soft);font-size:13.5px;margin-top:6px;font-family:var(--font-mono)}

.footer-grid{display:flex;flex-wrap:wrap;gap:30px;justify-content:space-between}
small.disclaimer{display:block;color:var(--ink-soft);margin-top:6px;font-size:12.5px;line-height:1.6}

/* real logo asset */
.logo-img{height:96px;width:auto}
.footer-mark{font-family:var(--font-display);font-weight:800;font-size:19px;color:#fff}
.site-footer{background:var(--navy)}
.site-footer nav a{color:#c9d2e0}
.footer-note{color:#c9d2e0}

/* ================= VISUAL POLISH PASS — real logo palette ================= */

/* rhythm: more air between sections */
section.wrap{padding:72px 0}
main#main > .wrap:first-child{padding-top:12px}

/* signature motif, straight off the real logo's own gold rule+dot —
   auto-applied between every real section, zero markup changes */
main#main > .wrap + .wrap{position:relative}
main#main > .wrap + .wrap::before{
  content:"";
  display:block;
  height:8px;
  width:110px;
  margin:0 auto 44px;
  background:
    radial-gradient(circle 3px at center, var(--gold) 99%, transparent 100%),
    linear-gradient(var(--gold-2), var(--gold-2));
  background-repeat:no-repeat;
  background-position:center center, center center;
  background-size:8px 8px, 100% 1px;
  opacity:.85;
}

/* hero: give it real presence */
main#main > .wrap:first-child h1{margin-bottom:22px}
.eyebrow{position:relative;padding-inline-start:20px}
.eyebrow::before{
  content:"";position:absolute;right:0;top:50%;transform:translateY(-50%);
  width:7px;height:7px;border-radius:50%;background:var(--gold)
}
.hero .lede, main#main > .wrap:first-child > .lede{font-size:20px}

/* section-soft: an intentional tinted band, not a plain grey box */
.section-soft{
  background:var(--paper-2);
  border-radius:20px;
  padding:44px 40px;
  position:relative;
  border-top:3px solid var(--gold);
}

/* typography scale + rhythm */
h1{letter-spacing:-.01em}
h2{letter-spacing:-.005em;margin-bottom:16px}
h2 + .lede{margin-top:-6px}

/* cards: gentle lift on hover, gold badge */
.card{transition:transform .18s ease, box-shadow .18s ease;background:#fff}
.card:hover{transform:translateY(-3px);box-shadow:0 10px 26px rgba(8,30,66,.10)}
.card .badge{background:var(--navy);color:var(--gold-2)}
.service-grid{gap:18px}

/* buttons: more weight, echo the logo's warm gold */
.btn-primary{background:var(--gold);color:var(--navy);box-shadow:0 1px 2px rgba(8,30,66,.12)}
.btn-primary:hover{background:var(--gold-2);box-shadow:0 10px 24px rgba(191,150,83,.35)}
.btn-secondary{border-color:var(--navy)}
.btn-secondary:hover{background:var(--navy);color:#fff}

/* glossary: reference-style two-column layout, no markup changes needed */
#glossary{column-count:2;column-gap:52px}
#glossary > h2, #glossary > .lede{column-span:all}
#glossary .faq-item{break-inside:avoid;margin-bottom:20px;padding:0 0 16px;border-bottom:1px solid var(--line)}

/* faq: clearer separation */
#faq .faq-item{padding:20px 0}

/* timeline: echo the same gold dot per stage instead of a plain border */
ul.timeline li{position:relative;padding-inline-start:26px;border-inline-start:none}
ul.timeline li::before{
  content:"";position:absolute;right:-1px;top:24px;width:9px;height:9px;
  border-radius:50%;background:var(--gold);box-shadow:0 0 0 3px var(--paper-2)
}
ul.timeline{border-inline-start:2px solid var(--line)}

/* final CTA: a real closing statement, navy band echoing the header */
#contact{background:var(--navy);color:#fff;text-align:center;padding:64px 48px}
#contact h2{color:#fff;font-size:clamp(26px,3.4vw,36px)}
#contact .lede{color:#c9d2e0;max-width:520px;margin:0 auto 30px}
#contact .cta-row{justify-content:center}
#contact .btn-secondary{border-color:#fff;color:#fff}
#contact .btn-secondary:hover{background:#fff;color:var(--navy)}

/* trust bar: quieter, more typographic */
.trust-bar{border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin:0}
.trust-bar .muted{max-width:var(--maxw);margin:0 auto;padding:18px 32px 18px 32px;font-size:14.5px;
  color:var(--ink-soft);position:relative;padding-inline-start:60px}
.trust-bar .muted::before{content:"";position:absolute;right:32px;top:50%;transform:translateY(-50%);
  width:34px;height:1px;background:var(--gold)}

@media (max-width:760px){
  #glossary{column-count:1}
  section.wrap{padding:52px 0}
  .section-soft{padding:30px 22px}
}

/* ================= DESIGN INVESTMENT PASS ================= */

/* logo: bigger, header adjusted to give it room */
.logo-img{height:150px;width:auto}
.site-header-inner{padding:4px 28px}
.site-header{border-bottom:1px solid var(--line)}

/* section-soft: subtle dot-grid texture for depth, not just flat tint */
.section-soft{
  background-color:var(--paper-2);
  background-image:radial-gradient(var(--line) 1px, transparent 1px);
  background-size:16px 16px;
  background-position:-4px -4px;
}

/* heading flourish: a short gold rule under every h2, tying back to the logo's own rule+dot */
h2{position:relative;padding-bottom:18px}
h2::after{
  content:"";position:absolute;bottom:0;right:0;width:64px;height:2px;background:var(--gold)
}
#contact h2::after{right:50%;transform:translateX(50%)}

/* buttons: richer, gently metallic gold */
.btn-primary{
  background:linear-gradient(155deg, var(--gold-2), var(--gold));
  color:var(--navy);font-weight:800;
  box-shadow:0 1px 2px rgba(8,30,66,.15), 0 8px 20px rgba(191,150,83,.22)
}
.btn-primary:hover{
  background:linear-gradient(155deg, var(--gold), var(--gold-2));
  box-shadow:0 1px 2px rgba(8,30,66,.18), 0 12px 28px rgba(191,150,83,.38);
  transform:translateY(-1px)
}
.btn{transition:transform .18s ease, box-shadow .18s ease, background .18s ease}

/* nav: quiet underline-on-hover instead of a flat color swap */
.site-header nav a{position:relative}
.site-header nav a::after{
  content:"";position:absolute;right:0;bottom:-4px;width:0;height:1.5px;background:var(--gold);
  transition:width .2s ease
}
.site-header nav a:hover::after{width:100%}
.site-header nav a:hover{color:var(--navy)}

/* testimonials: a real decorative mark, not just an italic line */
.testimonial{border-inline-start:none;padding-inline-start:0;position:relative;padding-right:38px}
.testimonial::before{
  content:"”";position:absolute;right:-4px;top:-14px;font-family:var(--font-display);
  font-size:56px;color:var(--gold);opacity:.55;line-height:1
}

/* scroll reveal */
.reveal{opacity:0;transform:translateY(16px);transition:opacity .55s ease, transform .55s ease}
.reveal.is-visible{opacity:1;transform:none}

/* card badges pick up the metallic gold too */
.card .badge{background:var(--navy);color:var(--gold-2);font-weight:700}

/* trust bar sits a touch further from the hero now that the watermark gives the hero more presence */
main#main > .wrap:first-child{padding-bottom:36px}

@media (max-width:760px){
  .logo-img{height:88px}
  main#main > .wrap:first-child{background-size:340px auto;background-position:left -30px top -10px}
}

/* ================= CENTER PASS: everything except the hero ================= */
main#main > .wrap:first-child ~ *{text-align:center}

main#main > .wrap:first-child ~ * .cta-row{justify-content:center}
main#main > .wrap:first-child ~ * .value-chips{justify-content:center}
main#main > .wrap:first-child ~ * .toc-grid{justify-content:center}
main#main > .wrap:first-child ~ * .card{text-align:center}
main#main > .wrap:first-child ~ * .service-grid{justify-content:center}

main#main > .wrap:first-child ~ * ol.steps{align-items:center}
main#main > .wrap:first-child ~ * ol.steps li{flex-direction:column;align-items:center;text-align:center;max-width:520px;margin:0 auto}

main#main > .wrap:first-child ~ * ul.timeline{border-inline-start:none;align-items:center}
main#main > .wrap:first-child ~ * ul.timeline li{text-align:center;padding-inline-start:0;padding-top:14px;max-width:560px;margin:0 auto}
main#main > .wrap:first-child ~ * ul.timeline li::before{right:50%;top:-2px;transform:translateX(50%);position:relative;display:block;margin:0 auto 10px}

main#main > .wrap:first-child ~ * .myth-fact,
main#main > .wrap:first-child ~ * .scenario,
main#main > .wrap:first-child ~ * .faq-item,
main#main > .wrap:first-child ~ * .resource-list li{text-align:center}
main#main > .wrap:first-child ~ * .resource-list .name{display:block}

main#main > .wrap:first-child ~ * .checklist{align-items:center}
main#main > .wrap:first-child ~ * .checklist li{justify-content:center;text-align:center}

main#main > .wrap:first-child ~ * table.compare th,
main#main > .wrap:first-child ~ * table.compare td{text-align:center}

main#main > .wrap:first-child ~ * .testimonial{text-align:center;padding-right:0;border-inline-start:none}
main#main > .wrap:first-child ~ * .testimonial::before{position:static;display:block;margin:0 auto 6px}

main#main > .wrap:first-child ~ * .pullquote{border-inline-start:none;border-top:3px solid var(--gold);padding:22px 0 0;text-align:center;margin:30px auto;max-width:640px}

/* trust bar: drop the right-aligned rule decoration and center the line itself */
.trust-bar .muted{padding-inline-start:0;text-align:center}
.trust-bar .muted::before{display:none}

/* toc box: center the title and grid within the box */
.toc{text-align:center}
.toc-grid{display:inline-flex;flex-wrap:wrap;justify-content:center}

/* heading rule centers only within the scoped area */
main#main > .wrap:first-child ~ * h2::after{right:50%;transform:translateX(50%)}

/* footer sits below everything either way */
.site-footer-inner{justify-content:center;text-align:center;flex-direction:column;gap:14px}
.site-footer nav{justify-content:center}

/* ================= CONTENT FLOW PASS ================= */
/* goal: a page with 15 sections and long lists (17 FAQs, 12 services) needs
   progressive disclosure + rhythm breaks, not more scrolling of flat text. */

/* --- reading progress rail: sits on the bottom edge of the sticky header --- */
.site-header{position:sticky;top:0;z-index:50}
.reading-progress{position:absolute;bottom:0;right:0;left:0;height:3px;background:transparent;overflow:hidden}
.reading-progress-bar{height:100%;width:0%;background:linear-gradient(90deg, var(--gold), var(--gold-2));
  transition:width .1s linear}

/* --- section index kicker: turns the flat stack into a numbered sequence --- */
/* only real content sections (<section class="wrap">) count; the hero (h1, no h2)
   is skipped so numbering starts at "01" from the first h2 section ("הסיפור שלי") */
main#main{counter-reset:section-index}
main#main > section.wrap:not(:first-child){counter-increment:section-index}
main#main > section.wrap > h2{position:relative}
main#main > section.wrap:not(:first-child) > h2::before{
  content:counter(section-index, decimal-leading-zero);
  display:block;
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:.12em;
  color:var(--gold-2);
  font-weight:600;
  margin-bottom:10px;
}

@media (max-width:760px){
  section.wrap > h2::before{font-size:11px}
}

/* --- FAQ: native <details>/<summary> accordion, no JS required --- */
#faq .faq-item{padding:0}
#faq .faq-item + .faq-item{margin-top:14px}
#faq details.faq-item{border:1px solid var(--line);border-radius:var(--radius);background:var(--white);
  padding:0;overflow:hidden;transition:box-shadow .18s ease,border-color .18s ease}
#faq details.faq-item[open]{border-color:var(--gold-2);box-shadow:0 6px 20px rgba(8,30,66,.07)}
#faq summary{cursor:pointer;list-style:none;padding:18px 54px 18px 20px;position:relative;
  -webkit-tap-highlight-color:transparent}
#faq summary::-webkit-details-marker{display:none}
#faq summary h3{margin:0;font-size:16.5px;padding-bottom:0}
#faq summary::after{
  content:"";position:absolute;left:20px;top:50%;transform:translateY(-50%) rotate(0deg);
  width:11px;height:11px;
  border-inline-end:2px solid var(--gold);border-block-end:2px solid var(--gold);
  transform-origin:center;
  transition:transform .2s ease;
}
#faq details[open] summary::after{transform:translateY(-30%) rotate(-135deg)}
#faq summary:hover h3{color:var(--pine-2)}
#faq .faq-a{padding:0 20px 20px}
#faq .faq-a p{margin:0 0 10px}
#faq .faq-a p:last-child{margin-bottom:0}
#faq .faq-a .todo{display:inline-block;margin-top:8px}

/* --- "who this fits" / "common mistakes": break a wall of bullets into scannable cards --- */
.fit-grid,.mistake-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px;margin-top:24px}
.fit-card,.mistake-card{background:var(--white);border:1px solid var(--line);border-radius:var(--radius);
  padding:20px 22px;transition:transform .18s ease,box-shadow .18s ease}
.fit-card:hover,.mistake-card:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(8,30,66,.08)}
.fit-icon,.mistake-icon{display:flex;align-items:center;justify-content:center;width:30px;height:30px;
  border-radius:50%;margin:0 auto 12px;font-family:var(--font-mono);font-size:13px;font-weight:700}
.fit-icon{background:rgba(191,150,83,.14);color:var(--gold);}
.mistake-icon{background:rgba(164,67,58,.1);color:var(--myth)}
.fit-card strong,.mistake-card strong{display:block;color:var(--navy);font-family:var(--font-display);
  font-size:16.5px;margin-bottom:6px}
.fit-card p,.mistake-card p{margin:0;font-size:14.5px;color:var(--ink-soft)}

@media (max-width:600px){
  .fit-grid,.mistake-grid{grid-template-columns:1fr}
}

/* --- icon system: consistent 24px stroke grid, one per service card --- */
.card-icon{
  display:flex;align-items:center;justify-content:center;
  width:44px;height:44px;border-radius:50%;
  background:rgba(191,150,83,.12);
  margin:0 auto 14px;
}
.card-icon svg{width:22px;height:22px;stroke:var(--gold);stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round;fill:none}
.card:hover .card-icon{background:var(--gold);transition:background .18s ease}
.card:hover .card-icon svg{stroke:var(--navy);transition:stroke .18s ease}

/* --- scrollspy: highlight the current section in the TOC while scrolling --- */
.toc-grid a.is-active{color:var(--navy);font-weight:700;position:relative}
.toc-grid a.is-active::before{
  content:"";position:absolute;right:-14px;top:50%;transform:translateY(-50%);
  width:5px;height:5px;border-radius:50%;background:var(--gold);
}

/* --- hero: soft signature gradient glow behind the monogram (2026 premium-minimal cue) --- */
main#main > .wrap:first-child{position:relative;isolation:isolate}
main#main > .wrap:first-child::after{
  content:"";position:absolute;inset:-40px -10% auto auto;z-index:-1;
  width:60%;height:420px;
  background:radial-gradient(ellipse at top left, rgba(191,150,83,.16), transparent 70%);
  pointer-events:none;
}

/* ================= LEAD CAPTURE MODAL ================= */
.lead-modal-overlay{
  position:fixed;inset:0;z-index:999;
  background:rgba(8,30,66,.6);
  display:flex;align-items:center;justify-content:center;
  padding:20px;
  opacity:0;visibility:hidden;
  transition:opacity .2s ease,visibility .2s ease;
}
.lead-modal-overlay.is-open{opacity:1;visibility:visible}
.lead-modal{
  background:var(--white);
  width:100%;max-width:440px;max-height:90vh;overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow);
  padding:36px 32px;
  position:relative;
  transform:translateY(12px);
  transition:transform .2s ease;
  text-align:right;
}
.lead-modal-overlay.is-open .lead-modal{transform:translateY(0)}
.lead-modal-close{
  position:absolute;top:16px;left:16px;
  width:32px;height:32px;border-radius:50%;
  border:1px solid var(--line);background:var(--white);
  color:var(--ink-soft);font-size:16px;line-height:1;
  cursor:pointer;display:flex;align-items:center;justify-content:center;
  transition:background .15s ease,color .15s ease;
}
.lead-modal-close:hover{background:var(--paper-2);color:var(--navy)}
.lead-modal h2{font-size:22px;padding-bottom:0;margin-bottom:8px}
.lead-modal h2::after{display:none}
.lead-modal .lede{font-size:15px;color:var(--ink-soft);font-weight:400;max-width:none;margin-bottom:24px}
.lead-modal .eyebrow{margin-bottom:16px}

.lead-field{margin-bottom:16px;text-align:right}
.lead-field label{display:block;font-size:13.5px;color:var(--ink-soft);margin-bottom:6px;font-weight:600}
.lead-field input{
  width:100%;padding:11px 14px;font-size:15px;font-family:var(--font-body);
  border:1px solid var(--line);border-radius:var(--radius);
  background:var(--paper);color:var(--ink);
}
.lead-field input:focus{outline:3px solid var(--gold);outline-offset:1px}
.lead-field input.invalid{border-color:var(--myth)}
.lead-field .err-msg{display:none;font-size:12.5px;color:var(--myth);margin-top:5px}
.lead-field.has-error .err-msg{display:block}

.lead-modal button[type="submit"]{width:100%;border:none;margin-top:4px;font-family:var(--font-body)}
.lead-modal button[type="submit"]:disabled{opacity:.6;cursor:default;transform:none !important}
.lead-fine{font-size:12px;color:var(--ink-soft);text-align:center;margin:14px 0 0}

.lead-state{display:none;text-align:center;padding:10px 0}
.lead-state.active{display:block}
.lead-state svg{margin:0 auto 14px}
.lead-state h2{font-size:20px}
.lead-state p{color:var(--ink-soft);font-size:14.5px}

body.lead-modal-locked{overflow:hidden}

@media (max-width:480px){
  .lead-modal{padding:28px 22px}
}

/* ================= FLOATING WHATSAPP BUTTON ================= */
.whatsapp-float{
  position:fixed;bottom:22px;left:22px;z-index:900;
  width:56px;height:56px;border-radius:50%;
  background:#25D366;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 4px 14px rgba(0,0,0,.25);
  transition:transform .15s ease,box-shadow .15s ease;
  -webkit-tap-highlight-color:transparent;
}
.whatsapp-float:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(0,0,0,.3)}
.whatsapp-float svg{width:30px;height:30px;display:block}

@media (max-width:480px){
  .whatsapp-float{bottom:16px;left:16px;width:50px;height:50px}
  .whatsapp-float svg{width:26px;height:26px}
}

/* ============================================================
   ACCESSIBILITY PANEL (תקן ישראלי 5568)
   כלי נגישות עצמאי - ללא תלות בשירות חיצוני
   ============================================================ */

/* --- קישור דילוג לתוכן --- */
.skip-link{position:absolute;top:-100px;right:16px;z-index:2000;background:var(--navy);color:#fff;
  padding:12px 20px;border-radius:0 0 8px 8px;font-weight:700;font-size:15px;text-decoration:none;
  transition:top .15s ease}
.skip-link:focus{top:0}

/* --- כפתור פתיחה צף --- */
.a11y-fab{position:fixed;bottom:22px;right:22px;z-index:1000;width:56px;height:56px;border-radius:50%;
  background:var(--navy);color:#fff;border:2px solid #fff;cursor:pointer;padding:0;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 4px 14px rgba(0,0,0,.25);transition:transform .15s ease,box-shadow .15s ease;
  -webkit-tap-highlight-color:transparent}
.a11y-fab:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(0,0,0,.3)}
.a11y-fab svg{width:32px;height:32px;display:block;fill:currentColor}

/* --- הפאנל --- */
.a11y-panel{position:fixed;bottom:90px;right:22px;z-index:1001;width:320px;max-width:calc(100vw - 32px);
  max-height:calc(100vh - 130px);overflow-y:auto;background:#fff;color:var(--ink);
  border:1px solid var(--line);border-radius:var(--radius-lg);
  box-shadow:0 10px 40px rgba(20,34,56,.22);padding:18px;display:none}
.a11y-panel.is-open{display:block}
.a11y-panel-head{display:flex;align-items:center;justify-content:space-between;gap:12px;
  border-bottom:1px solid var(--line);padding-bottom:12px;margin-bottom:14px}
.a11y-panel-head h2{margin:0;font-family:var(--font-display);font-size:18px;color:var(--navy)}
.a11y-close{background:transparent;border:none;cursor:pointer;font-size:20px;line-height:1;
  color:var(--ink-soft);padding:6px;border-radius:6px}
.a11y-close:hover{color:var(--navy);background:var(--paper-2)}

.a11y-group{margin-bottom:16px}
.a11y-group-title{font-family:var(--font-mono);font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--ink-soft);margin:0 0 8px}

/* גודל טקסט */
.a11y-size-row{display:flex;align-items:center;gap:8px}
.a11y-size-row button{flex:0 0 44px;height:44px;border-radius:8px;border:1px solid var(--line);
  background:var(--paper);color:var(--navy);font-size:20px;font-weight:700;cursor:pointer}
.a11y-size-row button:hover{background:var(--paper-2)}
.a11y-size-val{flex:1;text-align:center;font-family:var(--font-mono);font-size:14px;color:var(--navy);font-weight:600}

/* כפתורי הפעלה/כיבוי */
.a11y-toggles{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.a11y-toggle{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;
  min-height:74px;padding:10px 8px;border-radius:10px;border:1px solid var(--line);background:var(--paper);
  color:var(--navy);font-family:var(--font-body);font-size:12.5px;font-weight:600;line-height:1.3;
  text-align:center;cursor:pointer;transition:background .12s,border-color .12s}
.a11y-toggle:hover{background:var(--paper-2)}
.a11y-toggle svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round}
.a11y-toggle[aria-pressed="true"]{background:var(--navy);color:#fff;border-color:var(--navy)}

.a11y-reset{width:100%;margin-top:4px;padding:12px;border-radius:8px;border:1px solid var(--line);
  background:transparent;color:var(--ink-soft);font-family:var(--font-body);font-size:13.5px;font-weight:600;cursor:pointer}
.a11y-reset:hover{background:var(--paper-2);color:var(--navy)}

.a11y-panel-foot{border-top:1px solid var(--line);margin-top:14px;padding-top:12px;
  font-size:12.5px;color:var(--ink-soft);line-height:1.6}
.a11y-panel-foot a{color:var(--navy);font-weight:600}

@media (max-width:480px){
  .a11y-fab{bottom:16px;right:16px;width:50px;height:50px}
  .a11y-fab svg{width:28px;height:28px}
  .a11y-panel{bottom:76px;right:16px;left:16px;width:auto;max-width:none}
}

/* ============================================================
   מצבי הנגישות עצמם
   ============================================================ */

/* --- הגדלת טקסט (zoom על אזורי התוכן בלבד) --- */
html.a11y-zoomed .site-header,
html.a11y-zoomed main#main,
html.a11y-zoomed .site-footer{zoom:var(--a11y-zoom,1)}

/* --- ריווח שורות מוגדל --- */
html.a11y-spacing body,
html.a11y-spacing p,
html.a11y-spacing li,
html.a11y-spacing .lede,
html.a11y-spacing td,
html.a11y-spacing dd{line-height:2.1 !important;letter-spacing:.02em}

/* --- גופן קריא --- */
html.a11y-readable{--font-display:Arial,'Helvetica Neue',sans-serif;
  --font-body:Arial,'Helvetica Neue',sans-serif;--font-mono:Arial,sans-serif}
html.a11y-readable *{font-family:Arial,'Helvetica Neue',sans-serif !important;font-weight:500}
html.a11y-readable h1,html.a11y-readable h2,html.a11y-readable h3,
html.a11y-readable b,html.a11y-readable strong{font-weight:800}

/* --- הדגשת קישורים --- */
html.a11y-links a{text-decoration:underline !important;text-underline-offset:3px !important;
  text-decoration-thickness:2px !important;font-weight:700 !important;
  outline:2px dashed var(--gold);outline-offset:2px;border-radius:3px}

/* --- גווני אפור --- */
html.a11y-grayscale{filter:grayscale(100%)}

/* --- עצירת אנימציות --- */
html.a11y-noanim *,html.a11y-noanim *::before,html.a11y-noanim *::after{
  animation-duration:.001ms !important;animation-iteration-count:1 !important;
  transition-duration:.001ms !important;scroll-behavior:auto !important}
html.a11y-noanim .reveal{opacity:1 !important;transform:none !important}
html.a11y-noanim{scroll-behavior:auto}

/* --- סמן עכבר גדול --- */
html.a11y-cursor,html.a11y-cursor *{cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'%3E%3Cpath d='M10 4 L10 38 L18 30 L24 44 L30 41 L24 28 L36 28 Z' fill='%23000' stroke='%23fff' stroke-width='2.5'/%3E%3C/svg%3E") 8 4,auto !important}
html.a11y-cursor a,html.a11y-cursor button,html.a11y-cursor [role="button"],
html.a11y-cursor input,html.a11y-cursor label{cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'%3E%3Cpath d='M18 4 a4 4 0 0 1 8 0 v16 h2 v-4 a4 4 0 0 1 8 0 v4 h2 v-2 a4 4 0 0 1 8 0 v14 a12 12 0 0 1-12 12 h-8 a12 12 0 0 1-12-12 v-4' fill='%23000' stroke='%23fff' stroke-width='2.5'/%3E%3C/svg%3E") 14 4,pointer !important}

/* --- ניגודיות גבוהה (כהה) --- */
html.a11y-contrast{background:#000 !important}
html.a11y-contrast body{background:#000 !important;color:#fff !important}
html.a11y-contrast *{background-color:transparent !important;background-image:none !important;
  color:#fff !important;border-color:#fff !important;box-shadow:none !important;text-shadow:none !important}
html.a11y-contrast a,html.a11y-contrast a *{color:#ffdd00 !important;text-decoration:underline !important}
html.a11y-contrast .btn,html.a11y-contrast button:not(.a11y-close){
  background:#ffdd00 !important;color:#000 !important;border:2px solid #fff !important}
html.a11y-contrast .btn *,html.a11y-contrast button:not(.a11y-close) *{color:#000 !important}
html.a11y-contrast .site-header,html.a11y-contrast .site-footer,
html.a11y-contrast .card,html.a11y-contrast .faq-item,html.a11y-contrast .section-soft,
html.a11y-contrast .scenario,html.a11y-contrast .myth-fact,html.a11y-contrast .pullquote,
html.a11y-contrast .lead-modal{background:#000 !important;border:1px solid #fff !important}
html.a11y-contrast .lead-modal-overlay{background:rgba(0,0,0,.92) !important}
html.a11y-contrast img{opacity:.9}
html.a11y-contrast :focus-visible{outline:3px solid #ffdd00 !important;outline-offset:2px}

/* הפאנל עצמו חייב להישאר קריא גם במצב ניגודיות */
html.a11y-contrast .a11y-panel{background:#000 !important;border:2px solid #fff !important}
html.a11y-contrast .a11y-panel *{color:#fff !important;border-color:#fff !important}
html.a11y-contrast .a11y-toggle[aria-pressed="true"]{background:#ffdd00 !important;color:#000 !important}
html.a11y-contrast .a11y-toggle[aria-pressed="true"] *{color:#000 !important}
html.a11y-contrast .a11y-fab{background:#000 !important;color:#fff !important;border:2px solid #fff !important}

/* הסתרת הפאנל בהדפסה */
@media print{.a11y-fab,.a11y-panel,.whatsapp-float,.skip-link{display:none !important}}

/* --- הדגשת מיקוד (focus) חזקה --- */
html.a11y-highlight a:focus,html.a11y-highlight button:focus,
html.a11y-highlight input:focus,html.a11y-highlight select:focus,
html.a11y-highlight textarea:focus,html.a11y-highlight [tabindex]:focus{
  outline:4px solid #ff6b00 !important;outline-offset:3px !important;
  background:rgba(255,107,0,.12) !important;border-radius:4px}
html.a11y-highlight a:hover,html.a11y-highlight button:hover{
  outline:3px dotted #ff6b00 !important;outline-offset:2px !important}