/* The three legal pages: תקנון, מדיניות פרטיות, הצהרת נגישות.
 *
 * Lifted out of those pages' inline <style> blocks, exactly as thanks.html and
 * checkout-failed.html were before them. The production CSP sends
 * `style-src 'self'` with no 'unsafe-inline' and no hash, so a <style> element
 * is dropped by the browser and the page renders as an unstyled wall of text —
 * which is what these three were doing live, on the very documents a customer
 * is sent to before paying.
 *
 * One file for all three: the blocks differed only in that privacy.html adds
 * the data tables and accessibility.html omitted h3/ol. The union is safe —
 * a rule for an element a page does not contain costs it nothing.
 */

:root{
  --c-bg:#F7EAD6; --c-surface:#FFF7E8; --c-surface-2:#E8CFA4; --c-border:#C08A4E;
  --c-text:#2E1C0A; --c-muted:#5A3E20;
  --c-brand:#256B25; --c-brand-strong:#194B19; --c-brand-soft:#DCEBCD;
  --c-accent:#C7331B; --c-accent-strong:#9E230F; --c-accent-soft:#F7DACF;
  --c-warn:#8F5E06; --c-warn-soft:#FBEBC7;
  --r-md:12px; --r-lg:18px;
  --font:"Assistant","Rubik","Heebo","Noto Sans Hebrew","Arial Hebrew",system-ui,-apple-system,"Segoe UI",sans-serif;
}
*{box-sizing:border-box}
body{margin:0;background:var(--c-bg);color:var(--c-text);font-family:var(--font);
     font-size:17px;line-height:1.75;-webkit-text-size-adjust:100%}
.wrap{max-width:880px;margin:0 auto;padding:28px 20px 90px}
a{color:var(--c-brand-strong)}
.crumb{font-size:.92rem;color:var(--c-muted)}
.crumb a{color:var(--c-muted);text-decoration:underline}
header.hero{background:linear-gradient(135deg,var(--c-brand-strong),var(--c-brand));
     color:#FFF7E8;border-radius:var(--r-lg);padding:30px 26px;margin:16px 0 28px}
header.hero h1{margin:0 0 8px;font-size:clamp(1.5rem,4vw,2.05rem);line-height:1.25}
header.hero p{margin:0;opacity:.94;font-size:1rem}
.draftflag{display:inline-block;margin-bottom:14px;background:var(--c-warn-soft);
     color:var(--c-warn);border:1px solid var(--c-warn);border-radius:999px;
     padding:5px 14px;font-size:.85rem;font-weight:700}
section{background:var(--c-surface);border:1px solid var(--c-border);
     border-radius:var(--r-lg);padding:22px 24px;margin-bottom:18px}
h2{margin:0 0 12px;font-size:1.2rem;color:var(--c-brand-strong);
   border-bottom:2px solid var(--c-brand-soft);padding-bottom:8px}
h3{margin:16px 0 6px;font-size:1.02rem}
p{margin:0 0 10px}
ol,ul{margin:0 0 10px;padding-inline-start:22px}
li{margin:6px 0}
.ph{background:var(--c-warn-soft);color:var(--c-warn);border:1px dashed var(--c-warn);
    border-radius:6px;padding:0 6px;font-weight:700;white-space:nowrap}
.note{border-inline-start:5px solid var(--c-brand);background:var(--c-brand-soft);
     padding:12px 16px;border-radius:var(--r-md);margin:12px 0;font-size:.95rem}
.note--accent{border-inline-start-color:var(--c-accent);background:var(--c-accent-soft)}
.muted{color:var(--c-muted);font-size:.9rem}
footer.page{color:var(--c-muted);font-size:.88rem;text-align:center;padding-top:14px}

/* privacy.html's data tables. The .scroll wrapper is what keeps a wide table
   from forcing the whole page sideways on a phone. */
.scroll{overflow-x:auto;margin:12px 0}
table{border-collapse:collapse;width:100%;min-width:520px;font-size:.92rem}
th,td{border:1px solid var(--c-border);padding:8px 10px;text-align:start;vertical-align:top}
th{background:var(--c-surface-2);color:var(--c-brand-strong);font-weight:700}

/* Navigation between the three documents — the breadcrumb at the top and the
   links at the foot. These were bare inline anchors: the tappable box was the
   glyph height, around 20px, against a 44px minimum. On a phone they are the
   only way from one legal page to another, so they are given a real box rather
   than relying on the reader landing on the text itself. */
.crumb a,
footer.page a{
  display:inline-block;
  min-block-size:44px;
  padding-inline:8px;
  padding-block:11px;
  line-height:22px;
}

/* Phone and email in the contact sections, matching checkout-failed.html's
   pattern: tap-to-call rather than a string to copy out by hand. */
.contactlink{
  display:inline-block;
  min-block-size:44px;
  padding-block:11px;
  line-height:22px;
  color:var(--c-brand-strong);
}

@media (max-width:520px){
  body{font-size:16px}
  section{padding:18px}
  table{min-width:0}
}