/* ======================= accessibility widget UI ======================= */
.a11y-toggle{position:fixed;inset-inline-start:16px;bottom:16px;z-index:82;
  width:52px;height:52px;border-radius:var(--r-pill);border:2px solid #fff;
  background:var(--accent);color:#fff;cursor:pointer;display:grid;place-items:center;
  box-shadow:var(--sh-3);transition:transform var(--dur) var(--ease),background var(--dur) var(--ease)}
.a11y-toggle:hover{background:var(--accent-hover);transform:scale(1.06)}
@media (prefers-reduced-motion:reduce){.a11y-toggle:hover{transform:none}}
@media (max-width:767px){.a11y-toggle{bottom:70px;width:48px;height:48px}}

.a11y-panel{position:fixed;inset-inline-start:16px;bottom:78px;z-index:83;
  width:min(370px,calc(100vw - 32px));max-height:min(74vh,600px);overflow-y:auto;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-xl);
  box-shadow:var(--sh-3);opacity:0;transform:translateY(12px) scale(.98);
  transition:opacity .24s var(--ease),transform .24s var(--ease);overscroll-behavior:contain}
.a11y-panel.is-open{opacity:1;transform:none}
@media (max-width:767px){.a11y-panel{bottom:126px}}
@media (prefers-reduced-motion:reduce){.a11y-panel{transition:none}}
.a11y-head{position:sticky;top:0;background:var(--surface);z-index:1;
  display:flex;align-items:center;justify-content:space-between;
  padding:1.1rem 1.2rem .8rem;border-bottom:1px solid var(--line)}
.a11y-head h2{font-size:1.1rem;margin:0}
.a11y-close{width:34px;height:34px;border:1px solid var(--line);background:var(--surface);
  border-radius:var(--r-sm);cursor:pointer;font-size:1.3rem;line-height:1;color:var(--ink)}
.a11y-body{padding:1rem 1.2rem 1.3rem}
.a11y-group{margin-bottom:1.15rem}
.a11y-group h3{font-size:.8rem;font-weight:700;color:var(--ink-3);margin-bottom:.6rem;
  text-transform:none;letter-spacing:0}
.a11y-grid{display:grid;grid-template-columns:1fr 1fr;gap:.5rem}
.a11y-opt{font-family:var(--f-body);font-size:.885rem;font-weight:600;color:var(--ink-2);
  background:var(--paper);border:1.5px solid var(--line);border-radius:var(--r-sm);
  padding:.66rem .5rem;cursor:pointer;text-align:center;line-height:1.3;
  transition:all var(--dur) var(--ease)}
.a11y-opt:hover{border-color:var(--accent);color:var(--ink)}
.a11y-opt[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:#fff}
.a11y-actions{padding-top:.4rem;display:grid;gap:.7rem;justify-items:center}
.a11y-statement{font-size:.86rem;color:var(--ink-3)}
.a11y-guide{display:none;position:fixed;inset-inline:0;top:0;height:2.6rem;z-index:81;
  pointer-events:none;border-block:2px solid var(--accent);
  background:color-mix(in srgb,var(--accent) 9%,transparent);transform:translateY(-50%)}

/* ===================== accessibility display modes ===================== */
html.a11y-scaled{font-size:calc(100% * var(--a11y-scale,1))}
html.a11y-spacing body{letter-spacing:.055em;word-spacing:.14em}
html.a11y-line-h body,html.a11y-line-h p,html.a11y-line-h li{line-height:2.05}
html.a11y-readable body,html.a11y-readable h1,html.a11y-readable h2,
html.a11y-readable h3,html.a11y-readable .btn{
  font-family:Arial,'Assistant',sans-serif!important;letter-spacing:.012em}
html.a11y-align-right body,html.a11y-align-right p,html.a11y-align-right li,
html.a11y-align-right h1,html.a11y-align-right h2,html.a11y-align-right h3{text-align:right!important}

html.a11y-contrast-high{filter:contrast(1.42)}
html.a11y-mono{filter:grayscale(1)}
html.a11y-saturation-low{filter:saturate(.45)}
html.a11y-contrast-high .a11y-panel,html.a11y-mono .a11y-panel,
html.a11y-saturation-low .a11y-panel{filter:none}

html.a11y-contrast-dark{--paper:#000;--surface:#0B0F10;--stone:#101616;--stone-2:#161E1F;
  --line:#3E4A4B;--ink:#FFF;--ink-2:#E6ECEC;--ink-3:#C3CCCD;
  --accent:#6FE0EA;--accent-hover:#93ECF4;--accent-wash:#0F2A2C;--accent-ink:#B8F0F5}
html.a11y-contrast-dark .btn-primary{color:#00191C}
html.a11y-contrast-dark .site-footer{background:#000;border-top:1px solid #3E4A4B}
html.a11y-contrast-dark .sec-ink,html.a11y-contrast-dark .cta-band{background:#0B0F10;border:1px solid #3E4A4B}

html.a11y-contrast-light{--paper:#FFF;--surface:#FFF;--stone:#F2F2F2;--stone-2:#E8E8E8;
  --line:#767676;--ink:#000;--ink-2:#1A1A1A;--ink-3:#3D3D3D;
  --accent:#0A4A50;--accent-hover:#063337;--accent-wash:#E8F4F5;--accent-ink:#052E32}
html.a11y-contrast-light .site-footer{background:#000}

html.a11y-links a:not(.btn){text-decoration:underline!important;text-decoration-thickness:2px!important;
  text-underline-offset:3px;font-weight:700!important;
  background:color-mix(in srgb,var(--accent) 13%,transparent);
  padding:0 .16em;border-radius:3px}
html.a11y-headings h1,html.a11y-headings h2,html.a11y-headings h3,html.a11y-headings h4{
  outline:2.5px dashed var(--accent);outline-offset:5px;border-radius:3px}
html.a11y-focus-strong :focus-visible{outline:5px solid #FFB300!important;outline-offset:3px!important;
  box-shadow:0 0 0 9px rgba(255,179,0,.34)!important}
html.a11y-big-cursor,html.a11y-big-cursor *{
  cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='46' height='46' viewBox='0 0 46 46'%3E%3Cpath d='M9 4 36 21 23 23 17 38Z' fill='%23fff' stroke='%23000' stroke-width='2.4' stroke-linejoin='round'/%3E%3C/svg%3E") 6 3,auto!important}
html.a11y-no-motion *,html.a11y-no-motion *::before,html.a11y-no-motion *::after{
  animation-duration:0s!important;animation-iteration-count:1!important;
  transition-duration:0s!important;scroll-behavior:auto!important}
html.a11y-no-motion [data-reveal]{opacity:1!important;transform:none!important}

/* ============================== page shells ============================== */
/* interior page hero: same brand band as the home hero, shorter */
/* the curve is the last child of the band, so the bottom breathing room lives
   on the inner shell. Padding on the section itself would paint below the curve. */
.page-hero{position:relative;padding-bottom:0;text-align:center}
.page-hero > .shell{padding-bottom:clamp(2.2rem,1.6rem + 2.4vw,3.4rem)}
.page-hero .shell{position:relative}
.page-hero h1{max-width:22ch;margin-inline:auto;margin-bottom:.38em}
.page-hero .lead{max-width:56ch;margin-inline:auto;color:var(--on-brand-2)}
.page-hero .hero-cta{display:flex;flex-wrap:wrap;gap:.7rem;justify-content:center}
.crumbs{font-size:var(--t-xs);color:var(--on-brand-2);margin-bottom:1rem;opacity:.9}
.crumbs a{color:var(--on-brand-2);text-decoration:none}
.crumbs a:hover{color:#fff;text-decoration:underline}
.crumbs span{margin-inline:.4em}

.split{display:grid;grid-template-columns:1.3fr .7fr;
  gap:clamp(2rem,1.2rem + 3.2vw,3.6rem);align-items:start}
@media (max-width:959px){.split{grid-template-columns:1fr}}
.sticky-col{position:sticky;top:92px}
@media (max-width:959px){.sticky-col{position:static}}
.side-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:clamp(1.3rem,1rem + 1vw,1.7rem);box-shadow:var(--sh-2)}
.side-card h2{font-size:1.24rem;margin-bottom:.2em}
.side-card .panel-sub{font-size:var(--t-sm);color:var(--ink-3);margin-bottom:1.1rem}

/* ---- עמודת תוכן ----
   הבלוקים בעמוד עטופים ב-div בשביל אנימציית ה-reveal. בגלל זה
   h2:first-child התאפס בכל בלוק, והריווח שמעל הכותרת נעלם לגמרי
   בזמן שהריווח שמתחתיה נשמר. הריווח כאן יושב על ה-flow של העמודה
   ולא על הכותרת עצמה, ו-flex מונע קיפול (collapse) של מרג-ינים
   כך שהמרווחים הם בדיוק מה שנכתב כאן.
   הכלל הטיפוגרפי: הריווח מעל כותרת גדול מהריווח שמתחתיה, כדי
   שהכותרת תיקרא כשייכת לפסקה שאחריה ולא תרחף בין שתי פסקאות. */
.rich{display:flex;flex-direction:column;align-items:stretch}
.rich > *{margin-block:0}
.rich > * + *{margin-top:var(--flow)}
.rich > * + h2,
.rich > * + h3,
.rich > * + .rich-block,
.rich > * + .spec,
.rich > * + .ftable-wrap{margin-top:var(--flow-h)}
.rich h2{font-size:var(--t-h2-sub)}
.rich h3{font-size:var(--t-h3-sub)}
.rich p{color:var(--ink-2)}
.rich ul li{color:var(--ink-2)}
.rich-block{display:flex;flex-direction:column;gap:.72rem}
.rich-block > *{margin-block:0}
.rich-block h2,.rich-block h3{margin:0}

/* margin:0 גבר על .rich > * + * (אותה ספציפיות, מופיע אחריו) והתגיות
   נדבקו לכותרת שמעליהן. הריווח יושב כאן, ומי שצריך אחר דורס אותו inline. */
.zones{list-style:none;padding:0;margin:var(--flow) 0 0;display:flex;flex-wrap:wrap;gap:.6rem}
.zones li{margin:0}
.zones span{display:inline-flex;align-items:center;gap:.4rem;background:var(--b-50);
  border:1px solid var(--b-100);border-radius:var(--r-pill);padding:.5rem .95rem;
  font-size:.9rem;font-weight:600;color:var(--accent-strong)}
.zones svg{color:var(--accent)}
.zones a{text-decoration:none}
.zones a:hover span{background:var(--b-100);border-color:var(--b-300)}
/* articles */
.post-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  overflow:hidden;display:flex;flex-direction:column;text-decoration:none;color:inherit;
  transition:border-color var(--dur) var(--ease),box-shadow var(--dur) var(--ease),transform var(--dur) var(--ease)}
.post-card:hover{border-color:color-mix(in srgb,var(--accent) 42%,var(--line));
  box-shadow:var(--sh-2);transform:translateY(-3px)}
@media (prefers-reduced-motion:reduce){.post-card:hover{transform:none}}
.post-card .thumb{aspect-ratio:16/10;background:var(--stone);overflow:hidden}
.post-card .thumb img{width:100%;height:100%;object-fit:cover}
.post-card .body{padding:1.3rem;display:flex;flex-direction:column;flex:1}
.post-card h3{font-size:1.14rem;margin-bottom:.35em}
.post-card p{color:var(--ink-2);font-size:.95rem;margin-bottom:0}
.post-card time{font-size:var(--t-xs);color:var(--ink-3);margin-top:auto;padding-top:1rem}

.entry{max-width:72ch}
.entry h2{margin-top:1.9em}
.entry h3{margin-top:1.5em}
.entry img{border-radius:var(--r-lg);margin-block:1.6em}
.entry blockquote{margin:1.8em 0;padding-inline-start:1.2rem;
  border-inline-start:3px solid var(--accent);font-size:1.1rem;color:var(--ink)}

.legal{max-width:76ch}
.legal h2{margin-top:2em;font-size:1.32rem}
.legal h3{margin-top:1.6em;font-size:1.08rem}
.legal p,.legal li{color:var(--ink-2)}
.legal .updated{font-size:var(--t-sm);color:var(--ink-3);padding-bottom:1.4rem;
  border-bottom:1px solid var(--line);margin-bottom:2rem}