*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--f-body);font-size:var(--t-body);line-height:1.7;
  font-weight:400;direction:rtl;text-align:right;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
img,svg,video{max-width:100%;height:auto;display:block}
h1,h2,h3,h4{font-family:var(--f-display);font-weight:800;color:var(--ink);margin:0 0 .5em;
  line-height:1.14;letter-spacing:-.018em;text-wrap:balance}
h1{font-size:var(--t-h1)}
h2{font-size:var(--t-h2)}
h3{font-size:var(--t-h3);font-weight:700;letter-spacing:-.01em;line-height:1.25}
p{margin:0 0 1.15em;text-wrap:pretty}
p:last-child{margin-bottom:0}
a{color:var(--accent);text-decoration-thickness:1px;text-underline-offset:3px}
a:hover{color:var(--accent-hover)}
strong,b{font-weight:700;color:var(--ink)}
ul,ol{margin:0 0 1.15em;padding-inline-start:1.3em}
li{margin-bottom:.4em}
:focus-visible{outline:3px solid var(--focus);outline-offset:3px;border-radius:4px}
::selection{background:var(--accent-wash);color:var(--accent-ink)}
hr{border:0;border-top:1px solid var(--line);margin:var(--sec) 0}

/* ---- layout primitives ---- */
.shell{width:100%;max-width:var(--shell);margin-inline:auto;padding-inline:var(--gut)}
.shell-narrow{width:100%;max-width:var(--shell-narrow);margin-inline:auto;padding-inline:var(--gut)}
.sec{padding-block:var(--sec)}
.sec-stone{background:var(--stone)}
.sec-ink{background:var(--ink);color:var(--paper)}
.sec-ink h2,.sec-ink h3{color:var(--paper)}
.prose{max-width:68ch}
.prose p{color:var(--ink-2)}
.lead{font-size:var(--t-lead);line-height:1.62;color:var(--ink-2)}
.center{text-align:center}
.skip-link{position:absolute;inset-inline-start:1rem;top:-6rem;z-index:999;
  background:var(--ink);color:var(--paper);padding:.8rem 1.2rem;border-radius:0 0 var(--r-sm) var(--r-sm)}
.skip-link:focus{top:0}
.visually-hidden{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* section heading block — stacked, never the split-header pattern */
.s-head{max-width:34ch;margin-bottom:clamp(2rem,1.2rem + 2.4vw,3.2rem)}
.s-head p{color:var(--ink-2);font-size:var(--t-lead);margin-top:.2em;max-width:52ch}
.s-head.wide{max-width:46ch}

/* ---- buttons ---- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.55em;
  font-family:var(--f-display);font-weight:700;font-size:1rem;line-height:1;
  padding:1.05em 1.9em;border-radius:var(--r-pill);border:1.5px solid transparent;
  cursor:pointer;text-decoration:none;white-space:nowrap;
  transition:background var(--dur) var(--ease),border-color var(--dur) var(--ease),
             color var(--dur) var(--ease),transform .12s var(--ease),box-shadow var(--dur) var(--ease);
}
/* לחיצה חייבת להרגיש. scale(.97) הוא הסף שבו האצבע מקבלת תשובה
   מיידית מהממשק, ו-.988 פשוט לא נראה. */
.btn:active{transform:scale(.97)}
.btn-primary{background:var(--accent);color:#fff;box-shadow:var(--sh-brand)}
.btn-primary:hover{background:var(--accent-hover);color:#fff}
.btn-outline{background:transparent;color:var(--ink);border-color:var(--line)}
.btn-outline:hover{background:var(--stone);border-color:var(--b-300);color:var(--ink)}
.btn-lg{font-size:1.06rem;padding:1.15em 2.2em}
.btn-block{width:100%}
/* on a brand band the hierarchy inverts: white is the loudest surface */
.band .btn-primary{background:#fff;color:var(--accent-strong);box-shadow:0 10px 30px rgba(7,40,44,.28)}
.band .btn-primary:hover{background:var(--b-50);color:var(--accent-strong)}
.band .btn-outline,.btn-ghost-light{background:rgba(255,255,255,.08);color:#fff;
  border-color:rgba(255,255,255,.42)}
.band .btn-outline:hover,.btn-ghost-light:hover{background:rgba(255,255,255,.18);color:#fff;
  border-color:rgba(255,255,255,.7)}
:root[data-theme="dark"] .btn-primary,
:root:not([data-theme="light"]) .btn-primary{color:#06272B}
@media (prefers-color-scheme:light){:root:not([data-theme="dark"]) .btn-primary{color:#fff}}
:root[data-theme="dark"] .band .btn-primary,
:root:not([data-theme="light"]) .band .btn-primary{color:var(--accent-strong)}
/* ---- forms ---- */
.field{display:flex;flex-direction:column;gap:.42rem;margin-bottom:1rem}
.field label{font-size:var(--t-sm);font-weight:600;color:var(--ink)}
.field .hint{font-size:var(--t-xs);color:var(--ink-3)}
.field input,.field textarea,.field select{
  font-family:var(--f-body);font-size:1rem;color:var(--ink);background:var(--surface);
  border:1.5px solid var(--line);border-radius:var(--r-sm);padding:.82rem .95rem;width:100%;
  transition:border-color var(--dur) var(--ease),box-shadow var(--dur) var(--ease);
}
.field input::placeholder,.field textarea::placeholder{color:var(--ink-3);opacity:1}
.field input:focus,.field textarea:focus,.field select:focus{
  outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-wash)}
.field textarea{min-height:120px;resize:vertical}
.field .err{font-size:var(--t-xs);color:#B3261E;font-weight:600}
:root[data-theme="dark"] .field .err,
:root:not([data-theme="light"]) .field .err{color:#F2B8B5}
@media (prefers-color-scheme:light){
  :root:not([data-theme="dark"]) .field .err{color:#B3261E}
}
.field input[aria-invalid="true"],.field textarea[aria-invalid="true"]{border-color:#B3261E}
.hp{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}