/* ═══════════════════════════════════════════════════════════════════════════
   מגנוליה — the document layer.  (step 12 · legal-shield-il + local-seo-il)
   Loaded by the legal pages and the branch pages only. The accessibility
   layer that every page needs lives in /a11y.css.

   styles.css has no prose typography: it resets <ul>, sets no rhythm on <p>,
   and every home-page section is a bespoke composition. A תקנון is a READING
   document — 3,000 words of Hebrew someone has to follow under stress, usually
   on a phone, usually after a purchase went wrong.

   Nothing new is invented here. Sage ground, one hue (h148), the single
   hairline --c-line, 0 radius, 0 shadow, no red, no gold as CSS. The one
   addition is a measure — 66ch — because a clause run to the full 1440px rail
   is unreadable, and unreadable terms are, in practice, undisclosed terms.
   ═══════════════════════════════════════════════════════════════════════════ */

.doc{ padding:0 var(--rail) 120px; }

.doc__head{ padding:64px 0 0; }
.doc__eyebrow{
  display:block; font-size:var(--t-meta); color:var(--c-ink-muted); margin:0 0 18px;
}
.doc__title{
  font-family:"Magnolia Display","Magnolia",sans-serif;
  font-size:var(--t-head); line-height:var(--lh-head); letter-spacing:var(--tr-head);
  font-weight:var(--w-strong); font-variation-settings:'wght' 600;
  margin:0 0 26px;
}
.doc__lede{
  font-size:var(--t-lead); line-height:var(--lh-lead);
  font-weight:var(--w-light); font-variation-settings:'wght' 300;
  max-width:52ch; margin:0 0 40px;
}
.doc__meta{
  display:flex; flex-wrap:wrap; gap:6px 34px;
  border-block:1px solid var(--c-line); padding:16px 0;
  font-size:var(--t-meta); color:var(--c-ink-muted); margin:0 0 72px;
}
.doc__meta b{ font-weight:var(--w-strong); font-variation-settings:'wght' 600; color:var(--c-ink); }

/* A standing index, and the text. Sticky, because a forty-clause document that
   can only be navigated by scrolling is a document nobody navigates. */
.doc__rig{ display:grid; grid-template-columns:230px 1fr; gap:0 64px; align-items:start; }
.doc__toc{ position:sticky; top:32px; max-height:82vh; overflow:auto; overscroll-behavior:contain; }
.doc__toc h2{
  font-size:var(--t-meta); color:var(--c-ink-muted); margin:0 0 14px;
  font-weight:var(--w-body); font-variation-settings:'wght' 400;
}
.doc__toc ol{ margin:0; padding:0; list-style:none; counter-reset:toc; }
.doc__toc li{ counter-increment:toc; margin-bottom:9px; font-size:var(--t-meta); line-height:1.4; }
.doc__toc a{ color:var(--c-ink-muted); }
.doc__toc a::before{ content:counter(toc) ". "; }
.doc__toc a:hover{ color:var(--c-ink); }

/* THE MEASURE. 680px at 17px Hebrew ≈ 67 characters per line — inside the
   45–75 band, measured with the real face rather than assumed.
   ⚠ NOT `66ch`: `ch` is the advance of the digit ZERO, and in Narkiss Block
   that is 10.9px against a 10.1px average Hebrew character. Every ch-based
   measure in this face therefore runs ~8% long, and `ch` means nothing at all
   in a script that has no zero. Px here, deliberately. */
.doc__body{ max-width:680px; }

/* ── prose ─────────────────────────────────────────────────────────────── */
/* ⚠ styles.css sets `section{ padding:110px var(--rail) }` for the home page's
   full-bleed compositions — 210px of inline padding. A clause is a <section>
   too, so without this reset the reading column collapsed from 680px to 297px
   and ran at 29 characters per line. Measured, not spotted by eye. */
.doc__s{ padding:56px 0 0; border-top:1px solid var(--c-line); margin-top:56px; }
.doc__s:first-of-type{ border-top:0; margin-top:0; padding-top:0; }
.doc__n{ display:block; font-size:var(--t-meta); color:var(--c-ink-muted); margin-bottom:10px; }

.doc__body h2{
  font-family:"Magnolia Display","Magnolia",sans-serif;
  font-size:var(--t-sub); line-height:var(--lh-sub); letter-spacing:-0.01em;
  font-weight:var(--w-strong); font-variation-settings:'wght' 600;
  margin:0 0 20px;
}
.doc__body h3{
  font-size:var(--t-body); line-height:1.4;
  font-weight:var(--w-strong); font-variation-settings:'wght' 600;
  margin:34px 0 10px;
}
.doc__body p{ margin:0 0 18px; line-height:var(--lh-body); }
.doc__body p:last-child{ margin-bottom:0; }
.doc__body strong{ font-weight:var(--w-strong); font-variation-settings:'wght' 600; }
.doc__body a{ border-bottom:1px solid var(--c-line); }
.doc__body a:hover{ border-bottom-color:var(--c-ink); }

/* Markers come back. styles.css strips them site-wide, which is right for a
   nav and wrong for a clause with four conditions in it. */
.doc__ul{ list-style:disc; padding-inline-start:1.35em; margin:0 0 18px; }
.doc__ol{ list-style:hebrew; padding-inline-start:1.9em; margin:0 0 18px; }
.doc__body li{ margin-bottom:9px; line-height:var(--lh-body); }

/* ── the statutory block ───────────────────────────────────────────────
   Where the law says something the business's own published policy does not.
   The most important element in these three documents — marked with the sunk
   ground and a rule, never with a colour. This system has no red, and a
   "warning colour" would be the first crack in it. */
.law{
  background:var(--c-ground-sunk);
  border-inline-start:2px solid var(--c-ink);
  padding:22px 24px; margin:0 0 20px;
}
.law__k{ display:block; font-size:var(--t-meta); color:var(--c-ink-muted); margin-bottom:8px; }
.law p:last-child{ margin-bottom:0; }

/* ── key / value rows ──────────────────────────────────────────────────── */
.kv{ border-top:1px solid var(--c-line); margin:0 0 22px; }
.kv div{
  display:grid; grid-template-columns:150px 1fr; gap:0 22px;
  padding:13px 0; border-bottom:1px solid var(--c-line);
}
.kv dt{ font-size:var(--t-meta); color:var(--c-ink-muted); }
.kv dd{ margin:0; }

/* ── tables ────────────────────────────────────────────────────────────── */
.tbl{ width:100%; border-collapse:collapse; margin:0 0 22px; font-size:var(--t-body); }
.tbl th,.tbl td{ text-align:start; padding:12px 0; border-bottom:1px solid var(--c-line); vertical-align:top; }
.tbl th{ font-size:var(--t-meta); color:var(--c-ink-muted);
  font-weight:var(--w-body); font-variation-settings:'wght' 400; }
.tbl td+td,.tbl th+th{ padding-inline-start:22px; }
.tbl caption{ text-align:start; font-size:var(--t-meta); color:var(--c-ink-muted); padding-bottom:10px; }

/* ── FAQ — visible text first, JSON-LD second. Schema that answers what the
   page does not is a manipulation signal, so the DOM is the source. ─────── */
.faq{ border-top:1px solid var(--c-line); }
.faq__q{ border-bottom:1px solid var(--c-line); padding:24px 0; }
.faq__q h3{ margin:0 0 12px; font-size:var(--t-lead); line-height:1.35;
  font-weight:var(--w-strong); font-variation-settings:'wght' 600; }
.faq__q p:last-child{ margin-bottom:0; }

/* ── branch pages — local-seo-il ───────────────────────────────────────── */
.crumb{ font-size:var(--t-meta); color:var(--c-ink-muted); padding:32px 0 0; }
.crumb a{ border-bottom:1px solid var(--c-line); }
.crumb p{ margin:0; }
.crumb .sep{ color:var(--c-ink-muted); margin:0 7px; }

.br__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:0 var(--gut);
  border-top:1px solid var(--c-line); }
.br__b{ padding:20px 0; border-bottom:1px solid var(--c-line); }
.br__name{ display:block; font-weight:var(--w-strong); font-variation-settings:'wght' 600; }
.br__l{ display:block; font-size:var(--t-meta); color:var(--c-ink-muted); margin-top:4px; }
.br__city{ margin:56px 0 18px; font-size:var(--t-sub); line-height:var(--lh-sub);
  font-weight:var(--w-strong); font-variation-settings:'wght' 600; }
.br__city:first-of-type{ margin-top:0; }
.br__index{ display:flex; flex-wrap:wrap; gap:8px 22px;
  border-block:1px solid var(--c-line); padding:18px 0; margin:0 0 56px;
  font-size:var(--t-meta); }
.br__index a{ color:var(--c-ink-muted); }
.br__index a:hover{ color:var(--c-ink); }
.br__hours{ white-space:pre-line; }

@media (max-width:900px){
  .doc__rig{ grid-template-columns:1fr; gap:0; }
  .doc__toc{ position:static; max-height:none; border-bottom:1px solid var(--c-line);
    padding-bottom:28px; margin-bottom:44px; }
  .doc__body{ max-width:none; }
  .doc__meta{ gap:6px 20px; margin-bottom:48px; }
  .kv div{ grid-template-columns:1fr; gap:3px; }
  .br__grid{ grid-template-columns:1fr; }
}

@media print{
  .nav,.foot,.doc__toc{ display:none; }
  .doc__rig{ grid-template-columns:1fr; }
  .doc{ padding:0; }
}