/* NAVO v7, "מהערימה לדרך"
   Palette: decision 27 (+ one warm paper, #FBF6EE). Heebo 400 + 800 only. Light surfaces only. */

:root {
  --bg: #F4F9FA;
  --surface: #D2E8EC;
  --surface-soft: #E6F1F3;
  --petrol: #1B6A87;
  --petrol-deep: #155670;   /* hover only */
  --ink: #0F3442;
  --ink-soft: #3A5966;      /* secondary text, a lighter ink */
  --mandarin: #F28B3C;      /* warm touch only, never text */
  --paper: #FBF6EE;
  --on-petrol: #F4F9FA;
  --rule: rgba(15, 52, 66, .16);

  --ease: cubic-bezier(.22, 1, .36, 1);
  --gutter: clamp(16px, 4vw, 56px);
  --max: 1240px;
  --read: 66ch;
  --section: clamp(56px, 6vw, 88px);
  --gap: clamp(32px, 4vw, 48px);   /* inside a section: from the heading block to the content, and from the content to its closing line or button (as in "how it works") */

  --fs-small: 1rem;              /* 16px, the floor for any text */
  --fs-body: 1.0625rem;          /* 17px */
  --fs-lede: clamp(1.125rem, 1.02rem + .4vw, 1.3125rem);
  --fs-h3: clamp(1.25rem, 1.15rem + .5vw, 1.5rem);
  --fs-h2: clamp(1.75rem, 1.35rem + 1.5vw, 2.625rem);
  --fs-h1: clamp(2.5rem, 1.4rem + 3.9vw, 5.25rem);

  --font-head: "Heebo", system-ui, sans-serif;
  --font-body: "Rubik", "Heebo", system-ui, sans-serif;

  --hh: 84px;   /* the sticky header's height: everything else that sticks or pins sits under it */
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--hh) + 24px); }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--fs-body);
  line-height: 1.65;
  overflow-x: clip;
}
img { display: block; max-width: 100%; height: auto; }
h1, h2, h3, h4 { margin: 0; font-family: var(--font-head); font-weight: 800; line-height: 1.12; text-wrap: balance; letter-spacing: -.01em; }
p, li, dd, blockquote, figcaption { text-wrap: pretty; }
p { margin: 0; }
strong, b, dt { font-weight: 800; font-family: var(--font-head); }
em { font-style: normal; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--petrol); outline-offset: 3px; border-radius: 4px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.skip {
  position: absolute; inset-inline-start: 16px; top: -100px; z-index: 50;
  background: var(--ink); color: var(--bg); padding: 12px 18px; border-radius: 8px; text-decoration: none;
}
.skip:focus { top: 16px; }

.wrap { width: min(100% - 2 * var(--gutter), var(--max)); margin-inline: auto; }
.flow > * + * { margin-top: 1em; }
.h2 { font-size: var(--fs-h2); }
.h3 { font-size: var(--fs-h3); }
.lede { font-size: var(--fs-lede); line-height: 1.55; max-width: 44ch; margin-top: 20px; color: var(--ink); }
.after { margin-top: var(--gap); max-width: var(--read); }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 0 22px;
  border-radius: 12px; border: 2px solid var(--petrol);   /* the brand's rounded square, the same corner as the mandarin square (decision 53) */
  font: 800 1rem/1.2 "Heebo", system-ui, sans-serif;
  text-decoration: none; white-space: nowrap;
  transition: background-color .2s var(--ease), color .2s var(--ease), transform .2s var(--ease);
}
.btn .ico { width: 20px; height: 20px; flex: none; }
.btn--primary { background: var(--petrol); color: var(--on-petrol); }
/* a WhatsApp button is a speech bubble: one corner, at the end of the reading line, comes to a near point (decision 54) */
.btn--primary:hover { background: var(--petrol-deep); border-color: var(--petrol-deep); }
.btn--quiet { background: transparent; color: var(--petrol); }
.btn--quiet:hover { background: var(--surface-soft); }
.btn:active { transform: translateY(1px); }
.btn--sm { min-height: 44px; padding: 0 18px; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; }

.textlink {
  color: var(--petrol); font-weight: 800; text-decoration: underline;
  text-decoration-thickness: 2px; text-underline-offset: 5px;
}
.textlink:hover { text-decoration-color: var(--ink); }
/* touch: the link looks the same, but its tap area grows to 44px tall around it */
.textlink, .foot__base a { position: relative; }
.textlink::after, .foot__base a::after { content: ""; position: absolute; inset: -10px -4px; }
.after .textlink { display: inline-block; }

/* ---------- header ---------- */
/* the header sticks on every page (מירב, 1.11). Its height never changes, so nothing jumps; once the page moves it only gains a hairline shadow */
.top { position: sticky; top: 0; z-index: 35; background: var(--bg); transition: box-shadow .3s var(--ease); }
.top.is-scrolled { box-shadow: 0 1px 0 var(--rule), 0 10px 24px -22px rgba(15, 52, 66, .5); }
.top__in {
  width: min(100% - 2 * var(--gutter), 1440px); margin-inline: auto;
  display: flex; align-items: center; gap: 32px; height: var(--hh);
}
.mark {
  font-weight: 800; font-size: 1.375rem; letter-spacing: .14em; text-decoration: none; color: var(--ink);
  line-height: 1; margin: 0;
}
/* the small mandarin square of the folder tabs, right after the O like a full stop (מירב, 7.11). In CSS, so the editable text stays just "NAVO" */
.mark { direction: ltr; unicode-bidi: isolate; }
.mark--inline { font-size: inherit; line-height: inherit; display: inline-block; margin-inline-end: .14em; }   /* the right side (it is LTR): air between the square and a Hebrew word before it */   /* the logo inside a heading takes the heading's size */
.mark::after { content: ""; display: inline-block; width: .3em; height: .3em; border-radius: 2px; background: var(--mandarin); margin-inline-start: .02em; }
/* the wave (main.js): each letter turns petrol in turn, then the square gives a small nod */
.mark.is-wave .mark__l { animation: mark-wave .9s var(--ease) calc(var(--i) * .2s) both; }
.mark.is-wave::after { animation: mark-dot .7s var(--ease) .95s both; }   /* a small, soft nod, no bounce (מירב, 7.11) */
@keyframes mark-wave { 0%, 100% { color: var(--ink); } 25%, 55% { color: var(--petrol); } }
@keyframes mark-dot { 0%, 100% { scale: 1; } 45% { scale: 1.2; } }
.nav ul { display: flex; gap: 28px; list-style: none; margin: 0; padding: 0; }
.nav a { text-decoration: none; font-size: var(--fs-small); padding: 10px 0; display: inline-block; }
.nav a:hover { color: var(--petrol); text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 2px; }
.top__end { margin-inline-start: auto; display: flex; align-items: center; gap: 20px; }
.lang { font-size: var(--fs-small); text-decoration: none; padding: 12px 4px; display: inline-block; min-width: 44px; text-align: center; }
/* touch targets in the header, 44px each way, with the same look and the same gaps */
.top .mark { padding-block: 11px; }
@media (min-width: 1081px) { .nav ul { gap: 12px; margin-inline: -8px; } .nav a { padding-inline: 8px; } }
.lang:hover { color: var(--petrol); }
.menu { display: none; }

/* ---------- hero ---------- */
.hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 46vw);
  grid-template-areas: "text photo";
  min-height: clamp(540px, calc(100svh - 84px), 760px);
}
.hero__text {
  grid-area: text; align-self: center;
  padding-inline: max(var(--gutter), calc((100vw - 1440px) / 2 + var(--gutter))) clamp(32px, 5vw, 88px);
  padding-block: 40px 72px;
}
.hero__title { font-size: var(--fs-h1); line-height: .98; letter-spacing: -.025em; }
.hero__title .line { display: block; }
.hero__title em { color: var(--petrol); }
.hero__sub { font-size: var(--fs-lede); line-height: 1.5; max-width: 30ch; margin-top: clamp(24px, 3vw, 40px); }
.hero .actions { margin-top: 36px; }
/* tablet: the text column is narrow, so the two buttons often stack. Each then fills the column, one edge for both, as on the phone */
@media (min-width: 720px) and (max-width: 1080px) { .hero .actions .btn { flex: 1 1 auto; } }
.hero__note { margin-top: 18px; font-size: var(--fs-small); color: var(--ink-soft); }

.hero__photo { grid-area: photo; margin: 0; position: relative; min-height: 100%; }
.hero__photo picture, .hero__photo img { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero__photo img { object-fit: cover; object-position: 47% 30%; }
.hero__trust {
  position: absolute; inset-inline-start: 0; bottom: 0;
  width: min(25rem, 82%);
  background: var(--bg); color: var(--ink);
  padding: 22px 28px 0 28px;
  font-size: var(--fs-small); line-height: 1.6;
}

.about {
  display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 40px clamp(40px, 5vw, 72px);   /* the side column is as wide as the title and the photo, so the text sits close to them (מירב, 8.11) */
  padding-block: var(--section);
  border-top: 1px solid var(--rule);
}
.about .h2 { position: sticky; top: calc(var(--hh) + 32px); align-self: start; }
.about__body { max-width: var(--read); }

/* ---------- guide: folder with tabs ---------- */
.guide { padding-block: var(--section) calc(var(--section) * .8); }
.folder { margin-top: var(--gap); max-width: 1040px; }
.folder__tabs { display: flex; gap: 6px; padding-inline-start: 24px; position: relative; z-index: 2; }
.tab {
  appearance: none; border: 0; cursor: pointer;
  font: 800 1.1875rem/1.2 "Heebo", system-ui, sans-serif; color: var(--ink);
  min-height: 48px; padding: 12px 24px 10px;
  border-radius: 14px 14px 0 0;
  background: var(--surface);
  position: relative; top: 6px;
  transition: top .2s var(--ease), background-color .2s var(--ease);
}
.tab:nth-child(even) { background: var(--surface-soft); }
.tab:hover { top: 2px; }
.tab[aria-selected="true"] { background: var(--paper); top: 0; }
.tab[aria-selected="true"]::after {
  content: ""; position: absolute; top: 12px; inset-inline-end: 10px;
  width: 8px; height: 8px; border-radius: 2px; background: var(--mandarin);
}
.folder__pages { position: relative; z-index: 1; }
.sheet {
  background: var(--paper);
  border-radius: 0 0 18px 18px;
  border-start-end-radius: 18px;
  padding: clamp(24px, 4vw, 48px) clamp(20px, 4vw, 48px) clamp(28px, 4vw, 48px);
  box-shadow: 0 8px 0 -2px var(--surface), 0 16px 0 -4px var(--surface-soft), 0 24px 40px -28px rgba(15, 52, 66, .35);
}
.js .sheet[hidden] { display: none; }
/* from 720 the tabs sit in the middle (below), so no tab meets the sheet's top corners: both are round */
@media (min-width: 720px) { .sheet { border-start-start-radius: 18px; } }
.sheet__head { max-width: 640px; }
.sheet h3 { font-size: var(--fs-h3); }
.sheet__teaser { margin-top: 12px; font-size: var(--fs-lede); line-height: 1.5; color: var(--ink-soft); }
.sheet__body { max-width: 640px; margin-top: 28px; }
.sheet__body > p, .sheet__intro > p { font-size: var(--fs-small); line-height: 1.6; }  /* the opening paragraphs sit in one editable block in the site */
.part { border-top: 1px solid var(--rule); }
.part:last-child { border-bottom: 1px solid var(--rule); }
.sheet__body > p + .part, .sheet__intro + .part { margin-top: 24px; }
.sheet__body > .part + .part { margin-top: 0; }
.part summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 20px;
  min-height: 52px; padding: 12px 0;
}
.part summary::-webkit-details-marker { display: none; }
.part h4 { font-size: 1.0625rem; line-height: 1.4; }
.part summary::after, .qa summary::after {
  content: ""; flex: none; width: 16px; height: 16px;
  background: linear-gradient(var(--petrol), var(--petrol)) center / 16px 2px no-repeat,
              linear-gradient(var(--petrol), var(--petrol)) center / 2px 16px no-repeat;
  transition: transform .3s var(--ease);
}
.part[open] summary::after, .qa[open] summary::after { transform: rotate(45deg); }
.part__body { padding: 0 0 24px; font-size: var(--fs-small); line-height: 1.65; }
.part__body ul, .part__body ol { padding-inline-start: 1.4em; margin-block: 0; }
.part__body li + li { margin-top: .4em; }
.part__body ul li::marker { color: var(--petrol); }
.part__body ol li::marker { color: var(--petrol); font-weight: 800; }
.sheet__cta { margin-top: 32px; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 28px; }
.sheet__cta .btn--quiet { border-color: rgba(27, 106, 135, .45); }
.sheet__cta .btn--quiet:hover { border-color: var(--petrol); background: var(--bg); }
/* the door to the topic's own page: the same "go" link as the topic page cards (.tp-more__go), underlined on hover only */
.sheet__more {
  display: inline-flex; align-items: center; min-height: 48px;
  color: var(--petrol); font: 800 1rem/1.2 var(--font-head); text-decoration: none;
}
.sheet__more::after { content: "\00a0\2190"; content: "\00a0\2190" / ""; }
.sheet__more:hover { text-decoration: underline; text-underline-offset: 5px; }
/* the sheet's top: title, subtitle and the two actions (מירב, 1.11).
   It never moves or changes size; a separate fixed pin (below) carries the compact copy while reading, so nothing in the page jumps.
   It is one grid of two rows: the title and the button share the first row, the subtitle and the full page link the second,
   so each pair sits on one line; both actions start on the same edge, with equal air on both sides of the hairline. */
.sheet__bar {
  padding-bottom: 20px;
  display: grid; grid-template-columns: max-content minmax(0, 1fr); column-gap: 24px; row-gap: 12px;
  grid-template-areas: "title title" "sub sub" "btn more";
  justify-items: start; align-items: center;
}
.sheet__bar .sheet__head, .sheet__bar .sheet__cta { display: contents; }
.sheet__bar h3 { grid-area: title; margin: 0; }
.sheet__bar .sheet__teaser { grid-area: sub; margin: 0; }
.sheet__bar .btn { grid-area: btn; white-space: nowrap; }
.sheet__bar .sheet__more { grid-area: more; display: inline-block; min-height: 0; padding-block: 14px; white-space: nowrap; }  /* inline-block, so it sits on the subtitle's baseline by its text */
@media (min-width: 1081px) {
  .sheet__bar {
    grid-template-columns: minmax(0, 640px) auto;
    grid-template-areas: "title btn" "sub more";
    column-gap: 28px; justify-content: space-between;   /* no hairline, the actions at the far edge, like the pin (מירב, 7.11) */
  }
  /* row two sits on one baseline */
  .sheet__bar .sheet__teaser, .sheet__bar .sheet__more { align-self: baseline; }
  /* no full page link yet (its page is not public, decision 43): the button stands alone, centred on the title and subtitle */
  .sheet__bar:not(:has(.sheet__more)) .btn { grid-row: 1 / span 2; align-self: center; }
}
/* the pin: a fixed, compact copy of the open sheet's top. It lies over the page and takes no room in it,
   slides in once the sheet's own top has scrolled away, and is pushed up by the sheet's bottom edge, so it leaves exactly with the sheet */
.sheet__pin {
  position: fixed; top: var(--hh); z-index: 30;   /* under the header, so it slides away beneath it */
  display: grid; grid-template-columns: minmax(0, 1fr) auto auto; column-gap: 28px; align-items: center;   /* the title takes the room, the actions sit at the far edge: the same air on both sides (מירב, 7.11) */
  padding: 12px clamp(20px, 4vw, 48px);
  background: var(--paper); box-shadow: 0 1px 0 var(--rule), 0 12px 24px -20px rgba(15, 52, 66, .45);
  visibility: hidden; opacity: 0;
  transition: opacity .25s var(--ease), visibility .25s;
}
.sheet__pin.is-on { visibility: visible; opacity: 1; }
.sheet__pin__title { grid-column: 1; grid-row: 1; margin: 0; font: 800 1.125rem/1.3 var(--font-head); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sheet__pin .btn { grid-column: 2; grid-row: 1; white-space: nowrap; }
.sheet__pin .sheet__more { grid-column: 3; grid-row: 1; white-space: nowrap; }
.sheet__pin:not(:has(.sheet__more)) { grid-template-columns: minmax(0, 1fr) auto; }   /* the button alone: no empty column after it */
@media (max-width: 1080px) {
  .sheet__pin { grid-template-columns: minmax(0, 1fr) auto; column-gap: 16px; }
  .sheet__pin .sheet__more { display: none; }
  .sheet__pin .btn { grid-column: 2; min-height: 40px; }
  .sheet__pin__title { font-size: 1rem; }
}
@media (prefers-reduced-motion: reduce) { .sheet__pin { transition: none; } }

/* ---------- quotes: three different papers on one surface ---------- */
.quotes { padding-block: var(--section); background: var(--surface-soft); }
.notes {
  list-style: none; margin: calc(var(--gap) + 4px) 0 0; padding: 0;   /* +4: the tilted papers reach a little past their boxes */
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr) minmax(0, .9fr); align-items: start;
}
.note figure { margin: 0; }
.note { position: relative; background: var(--paper); box-shadow: 0 1px 0 rgba(15, 52, 66, .06), 0 18px 30px -24px rgba(15, 52, 66, .45); }
.note blockquote { margin: 0; font-size: var(--fs-small); line-height: 1.7; }
.note figcaption { margin-top: 18px; font-weight: 800; }
/* 1: a lined notepad page */
.note--1 {
  transform: rotate(-1.6deg); margin-top: 28px; z-index: 1;
  padding: 44px 30px 28px; border-radius: 2px;
  background-image: repeating-linear-gradient(180deg, transparent 0 calc(1.7em - 1px), var(--surface) calc(1.7em - 1px) 1.7em);
  background-position: 0 44px; background-size: 100% calc(100% - 72px); background-repeat: no-repeat;
  font-size: var(--fs-small);
}
/* 2: a letter, folded in three and opened again */
.note--2 {
  transform: rotate(.9deg); margin-inline: -14px; z-index: 2;
  padding: 40px 36px 36px; border-radius: 1px;
  background-image:
    linear-gradient(180deg, transparent calc(33.3% - 1px), rgba(15, 52, 66, .07) 33.3%, transparent calc(33.3% + 1px), rgba(15, 52, 66, .025) calc(33.3% + 2px), transparent calc(33.3% + 16px)),
    linear-gradient(180deg, transparent calc(66.6% - 1px), rgba(15, 52, 66, .07) 66.6%, transparent calc(66.6% + 1px), rgba(15, 52, 66, .025) calc(66.6% + 2px), transparent calc(66.6% + 16px));
}
/* 3: a small card on cooler stock */
.note--3 {
  transform: rotate(-.8deg); margin-top: 72px; z-index: 1;
  padding: 30px 26px 26px; border-radius: 10px; background: var(--bg);
  box-shadow: 0 0 0 1px var(--rule), 0 18px 30px -24px rgba(15, 52, 66, .45);
}
.quotes__note { margin-top: calc(var(--gap) + 4px); font-size: var(--fs-small); color: var(--ink-soft); max-width: var(--read); }

/* ---------- faq ---------- */
.faq { padding-block: var(--section) calc(var(--section) * .6); }
.qas { margin-top: var(--gap); max-width: 56rem; border-top: 1px solid var(--rule); }
.qa { border-bottom: 1px solid var(--rule); }
.qa summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 24px;
  min-height: 56px; padding: 14px 0; font-weight: 800; font-size: 1.0625rem; line-height: 1.45;
}
.qa summary::-webkit-details-marker { display: none; }
.qa__a { padding: 0 0 26px; max-width: var(--read); }
.qa__a p + p { margin-top: 12px; }

/* ---------- seo ---------- */
.seo { padding-block: calc(var(--section) * .6) var(--section); }
.seo p { max-width: var(--read); margin-top: 1em; color: var(--ink-soft); }

/* ---------- closing: the letter rises out of the same paper envelope as the road objects ---------- */
.closing {
  --lw: min(100vw - 2 * var(--gutter), 640px);   /* the letter */
  --ew: calc(var(--lw) / .7);                     /* the envelope (the letter fills 70% of it, like the card inside) */
  --eh: calc(var(--ew) * .9978);
  padding: calc(var(--eh) * .16) var(--gutter) var(--section);
  overflow-x: clip;
}
.envelope { position: relative; width: var(--lw); margin-inline: auto; padding-bottom: calc(var(--eh) * .22); }
.envelope__back, .envelope__front {
  position: absolute; bottom: 0; left: 50%; width: var(--ew); transform: translateX(-50%); pointer-events: none;
}
.envelope__back img, .envelope__front img { width: 100%; }
.envelope__back { z-index: 0; }
.envelope__front { z-index: 2; }
.letter {
  position: relative; z-index: 1; text-align: center;
  min-height: calc(var(--eh) * .5);
  background: var(--paper); border-radius: 3px;
  padding: clamp(32px, 5vw, 56px) clamp(20px, 4vw, 48px) calc(var(--eh) * .2 + 24px);
  box-shadow: 0 1px 0 rgba(15, 52, 66, .06), 0 -10px 30px -24px rgba(15, 52, 66, .35);
}
.letter__title { font-size: var(--fs-h2); line-height: 1.04; letter-spacing: -.02em; max-width: 13ch; margin-inline: auto; }
.letter__body { margin: 20px auto 0; font-size: var(--fs-lede); line-height: 1.5; max-width: 34ch; }
.letter .actions { margin-top: 32px; justify-content: center; }
.letter__note { margin-top: 16px; font-size: var(--fs-small); color: var(--ink-soft); }

/* the contact form on the letter (decision 42): two required fields, two optional, one consent line.
   Field edges are dark enough for 3:1 on the paper; the focus ring is ink, like everywhere else. */
.cform { margin: 32px auto 0; max-width: 30rem; text-align: start; position: relative; }
.cform__fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 16px; }
.field { display: grid; gap: 6px; align-content: start; min-width: 0; }
.field--wide, .cform__sum, .cform__go, .cform__fail { grid-column: 1 / -1; }
.field label { font-size: var(--fs-small); line-height: 1.4; color: var(--ink); }
.field__opt { color: var(--ink-soft); }
.cform input[type="text"], .cform input[type="tel"], .cform input[type="email"], .cform textarea {
  width: 100%; min-height: 48px; padding: 10px 14px; font: inherit; font-size: var(--fs-body); line-height: 1.4; color: var(--ink);
  background: #fff; border: 1.5px solid rgba(15, 52, 66, .6); border-radius: 12px;
}
.cform textarea { min-height: 112px; resize: vertical; }
[dir="rtl"] .cform input[dir="ltr"] { text-align: right; }
.cform input:focus-visible, .cform textarea:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; border-color: var(--petrol); }
.cform input[aria-invalid="true"], .cform textarea[aria-invalid="true"] { border-color: #A3261E; border-width: 2px; }
.field__hint { font-size: var(--fs-small); color: var(--ink-soft); text-wrap: pretty; }
.field__err, .cform__sum { font-size: var(--fs-small); color: #A3261E; text-wrap: pretty; }
.field__err:empty, .cform__sum:empty { display: none; }
.field--check { grid-template-columns: auto minmax(0, 1fr); column-gap: 12px; align-items: start; }
.field--check input { width: 24px; height: 24px; margin: 1px 0 0; accent-color: var(--petrol); cursor: pointer; }
.field--check label { text-wrap: pretty; cursor: pointer; }
.field--check label a { color: var(--petrol); text-decoration: underline; text-underline-offset: 3px; }
.field--check .field__err { grid-column: 2; }
.cform__go { margin-top: 6px; text-align: center; }
.cform__go .btn { min-width: 12rem; }
.cform__go .btn[aria-busy="true"] { opacity: .7; cursor: progress; }
.cform__fail { display: none; padding: 14px 16px; border-radius: 12px; background: var(--surface-soft); text-wrap: pretty; }
.cform[data-state="error"] .cform__fail { display: block; }
.cform__done { display: none; text-align: center; padding: 8px 0 4px; }
.cform__done:focus { outline: none; }
.cform__done-title { font: 800 var(--fs-h3)/1.2 var(--font-head); text-wrap: balance; }
.cform__done p + p { margin: 10px auto 0; max-width: 34ch; text-wrap: pretty; color: var(--ink-soft); }
.cform[data-state="sent"] .cform__fields { display: none; }
.cform[data-state="sent"] .cform__done { display: block; }
.cform__trap { position: absolute; inset-inline-start: -10000px; top: 0; width: 1px; height: 1px; overflow: hidden; }
/* phone (מירב, 5.11: the form must look good on a phone, not only work): one column, everything full width,
   17px in the fields so iOS does not zoom on focus, the consent line one big tap area, the button full width */
@media (max-width: 520px) {
  /* the whole envelope fits the screen (its paper is 85% of the picture), 10px from each edge.
     The letter is a little wider than the card in the picture, 78%, so the form keeps its room; its sides tuck under the pocket */
  .closing { --ew: calc((100vw - 20px) / .85); --lw: calc(var(--ew) * .78); }
  .closing .letter { padding-inline: 18px; }
  .cform { margin-top: 28px; }
  .cform__fields { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .field--check { padding: 12px 14px; margin-inline: -4px; border-radius: 12px; background: var(--bg); }
  .field--check input { width: 28px; height: 28px; margin: 0; }
  .field--check label { min-height: 28px; padding-block: 2px; }
  .cform__go .btn { width: 100%; min-height: 52px; }
  .cform__done-title { font-size: 1.375rem; }
}

/* ---------- footer ---------- */
/* bottom: just enough air (מירב, 1.11: too much space under the footer). The floating bubble steps aside when the footer's last line comes into view (main.js) */
.foot { border-top: 1px solid var(--rule); padding: 64px var(--gutter) 32px; }
.foot__in {
  width: min(100%, var(--max)); margin-inline: auto;
  display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 40px 64px;
}
/* the footer mark is LTR inside an RTL column (decision 50): it shrinks to its word, so it sits on the column's start edge, above the disclaimer, in both languages */
.foot__brand .mark { width: fit-content; }
.foot__disclaimer { margin-top: 16px; max-width: 52ch; font-size: var(--fs-small); line-height: 1.65; color: var(--ink-soft); }
.foot__links { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; align-content: start; }
/* two columns: the first link's text sits on the mark's line, not 13px under it (the links are 48px tall for touch) */
@media (min-width: 720px) { .foot__links { margin-top: -13px; } }
.foot__links a { display: inline-flex; align-items: center; min-height: 48px; min-width: 44px; padding: 11px 0; text-decoration: none; font-size: var(--fs-small); }
.foot__links a:hover { color: var(--petrol); text-decoration: underline; text-underline-offset: 5px; }
.foot__base {
  grid-column: 1 / -1; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 8px 24px;
  padding-top: 24px; border-top: 1px solid var(--rule); font-size: var(--fs-small); line-height: 1.5; color: var(--ink-soft);
}
/* one line, one size, one baseline: the credit is plain text, underlined on hover only */
.foot__base a { color: var(--ink); text-decoration: none; }
.foot__base a:hover { color: var(--petrol); text-decoration: underline; text-underline-offset: 4px; }

/* ---------- floating whatsapp: always visible, a compact bubble so it sits in the margin, not on the text ---------- */
.float {
  position: fixed; z-index: 40; bottom: 20px; inset-inline-end: 20px;
  display: block; width: 64px; height: 64px;
  border-radius: 50%; color: var(--on-petrol); text-decoration: none;
  box-shadow: 0 14px 28px -14px rgba(15, 52, 66, .6);
  transition: transform .3s var(--ease);
}
.float:hover { transform: translateY(-2px); }
.float { transition: transform .3s var(--ease), opacity .3s var(--ease), visibility .3s; }
.float.is-away { animation: none; opacity: 0; visibility: hidden; transform: translateY(12px); }  /* the footer has its own WhatsApp link */
.float picture { display: block; }
.float img { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; object-position: 50% 30%; border: 3px solid var(--petrol); background: var(--surface); }
.float__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.float__badge {
  display: grid; place-items: center; position: absolute; bottom: -2px; inset-inline-start: -4px;
  width: 28px; height: 28px; border-radius: 50%; background: var(--petrol); border: 2px solid var(--on-petrol);
}
.float__badge .ico { width: 15px; height: 15px; }

/* ---------- tablet and down ---------- */
@media (max-width: 1080px) {
  .nav { display: none; }
  .top__cta { display: none; }
  .menu {
    display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%;
    border: 2px solid var(--rule); background: transparent; cursor: pointer; color: var(--ink);
  }
  .menu__bars, .menu__bars::before, .menu__bars::after {
    display: block; width: 18px; height: 2px; background: currentColor; border-radius: 2px; position: relative;
    transition: transform .25s var(--ease), background-color .25s var(--ease);
  }
  .menu__bars::before, .menu__bars::after { content: ""; position: absolute; inset-inline-start: 0; }
  .menu__bars::before { top: -6px; }
  .menu__bars::after { top: 6px; }
  .menu[aria-expanded="true"] .menu__bars { background: transparent; }
  .menu[aria-expanded="true"] .menu__bars::before { transform: translateY(6px) rotate(45deg); }
  .menu[aria-expanded="true"] .menu__bars::after { transform: translateY(-6px) rotate(-45deg); }
  .nav.is-open {
    display: block; position: absolute; top: 100%; inset-inline: 0;
    background: var(--bg); border-bottom: 1px solid var(--rule); padding: 8px var(--gutter) 20px;
  }
  .nav.is-open ul { flex-direction: column; gap: 0; }
  .nav.is-open a { padding: 12px 0; font-size: 1.1875rem; }

  .about { grid-template-columns: 1fr; }
  .about .h2 { position: static; }
}

/* ---------- phones ---------- */
@media (max-width: 719px) {
  :root { --hh: 68px; }
  .top__in { gap: 12px; }
  .mark { font-size: 1.375rem; }
  .top__end { gap: 8px; }

  .hero { grid-template-columns: 1fr; grid-template-areas: "photo" "text"; min-height: 0; }
  .hero__photo { height: auto; min-height: 0; }
  .hero__photo picture { position: relative; display: block; height: clamp(300px, 58svh, 520px); }
  .hero__photo img { object-position: 46% 24%; }
  .hero__trust { position: static; width: auto; padding: 18px var(--gutter) 0; background: none; }
  .hero__text { padding: 24px var(--gutter) 56px; }
  .hero__title { font-size: clamp(2.5rem, 11.5vw, 3.25rem); }
  .hero .actions { margin-top: 28px; }
  .actions .btn { flex: 1 1 100%; }
  .btn { white-space: normal; text-align: center; padding-block: 12px; }


  .folder__tabs { padding-inline-start: 8px; gap: 4px; overflow-x: auto; scrollbar-width: none; padding-top: 8px; margin-top: -8px; }
  .tab { padding: 14px 12px 12px; font-size: var(--fs-small); flex: none; }
  .tab[aria-selected="true"]::after { top: 6px; inset-inline-end: 5px; }   /* the narrow tab: the square goes into the corner, off the word */
  .sheet { border-start-end-radius: 0; }

  .notes { grid-template-columns: 1fr; gap: 0; }
  .note--1, .note--2, .note--3 { margin: 0; }
  .note--2 { margin-top: -10px; margin-inline: 8px -6px; }
  .note--3 { margin-top: 18px; margin-inline: 18px 6px; }
  .note { padding: 30px 22px 24px; }

  .letter { padding-bottom: calc(var(--eh) * .2 + 76px); }   /* the wider letter: the button stays clear of the pocket's side flaps */

  .foot__in { grid-template-columns: 1fr; }
  .foot { padding-bottom: 24px; }

  .float { bottom: 14px; inset-inline-end: 12px; width: 56px; height: 56px; }
  .float img { width: 56px; height: 56px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* ---------- על שרה: צילום בצד הכותרת (מירב, 30.10) ---------- */
.about__side { position: sticky; top: calc(var(--hh) + 32px); align-self: start; display: grid; gap: 28px; }
.about .about__side .h2 { position: static; }
.about__photo { display: block; max-width: 360px; }
.about__photo img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 30%; border-radius: 12px; }
@media (max-width: 1080px) { .about__side { position: static; } }   /* one column (from 1080, as .about): a sticky photo would slide over the text */
@media (max-width: 860px) {
  .about__photo { max-width: 280px; }
}

/* ---------- תנועה: כניסה פעם אחת לכל רכיב, ולופים קטנים (מירב, 30.10: "חסר קצת הנפשות") ---------- */
@media (prefers-reduced-motion: no-preference) {
  /* ההירו: השורות עולות, הצילום נחשף מהצד, שורת האמון נכנסת אחרונה */
  .motion .hero__title .line { animation: rise .9s var(--ease) both; }
  .motion .hero__title .line + .line { animation-delay: .12s; }
  .motion .hero__sub { animation: rise .8s var(--ease) .28s both; }
  .motion .hero .actions { animation: rise .8s var(--ease) .38s both; }
  .motion .hero__note { animation: fade .8s var(--ease) .5s both; }
  .motion .hero__photo picture { animation: unveil 1.2s var(--ease) .05s both; }
  .motion .hero__photo img { animation: settle 1.8s var(--ease) both; }
  .motion .hero__trust { animation: rise .8s var(--ease) .7s both; }

  /* כל מה שמסומן נכנס כשמגיעים אליו */
  .motion [data-reveal] { opacity: 0; translate: 0 22px; transition: opacity .7s var(--ease), translate .8s var(--ease); transition-delay: calc(var(--i, 0) * 70ms); }
  .motion [data-reveal].in { opacity: 1; translate: 0 0; }

  /* הפתקים נוחתים על המשטח אחד אחרי השני */
  .motion .note[data-reveal] { translate: 0 40px; scale: .96; transition: opacity .6s var(--ease), translate .9s var(--ease), scale .9s var(--ease); transition-delay: calc(var(--i, 0) * 140ms); }
  .motion .note[data-reveal].in { scale: 1; }
  .note { transition: transform .4s var(--ease), box-shadow .4s var(--ease); }
  .note:hover { transform: rotate(0deg) translateY(-4px); z-index: 3; }

  /* המכתב עולה מתוך המעטפה */
  .motion .letter[data-reveal] { translate: 0 90px; opacity: 1; transition: translate 1.1s var(--ease) .15s; }
  .motion .letter[data-reveal].in { translate: 0 0; }

  /* הבועה הצפה נכנסת, ומדי פעם נוקשת בעדינות */
  .motion .float { animation: pop .7s var(--ease) 1.2s both; }
  .float__badge { animation: nudge 9s ease-in-out 4s infinite; }

  /* דף בתיקייה מחליק פנימה כשמחליפים לשונית */
  .sheet:not([hidden]) { animation: slide .5s var(--ease) both; }

  .btn:hover { transform: translateY(-2px); }
  .about__photo img { transition: transform .8s var(--ease); }
  .about__photo:hover img { transform: scale(1.02); }
}
@keyframes rise { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes unveil { from { clip-path: inset(0 0 0 100%); } to { clip-path: inset(0 0 0 0); } }
@keyframes settle { from { transform: scale(1.08); } to { transform: scale(1); } }
@keyframes bob { 0%, 100% { translate: 0 0; } 50% { translate: 0 -5px; } }
@keyframes pop { from { opacity: 0; translate: 0 16px; scale: .85; } to { opacity: 1; translate: 0 0; scale: 1; } }
@keyframes nudge { 0%, 92%, 100% { rotate: 0deg; } 94% { rotate: -12deg; } 96% { rotate: 10deg; } 98% { rotate: -6deg; } }
@keyframes slide { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* ---------- הטקסט הרץ ברוביק (מירב, 1.11), והיבו בכותרות, בכפתורים ובכל מה שבמשקל 800 ---------- */
.textlink, .mark, .note figcaption, .qa summary, .part__body ol li::marker { font-family: var(--font-head); }

/* ---------- הגריד ממורכז (מירב, 30.10): כותרות הסקשנים והבלוקים יושבים במרכז ---------- */
.centered > .h2, .centered > .h3, .centered > .lede,
.centered .wrap > .h2, .centered .wrap > .lede,
.audience .h2, .audience .lede, .why .h2, .why .lede { text-align: center; margin-inline: auto; }
.lede { max-width: 46ch; }
.after { margin-inline: auto; text-align: center; }
.qas { margin-inline: auto; }
.qa summary { text-align: start; text-wrap: pretty; }   /* a question never leaves one word alone on its second line */
.seo > p { margin-inline: auto; }
/* a heading over running text sits on the text's own edge, in the same centered column (מירב, 1.11) */
.seo > .h3 { text-align: start; margin-inline: auto; }
.seo > p, .seo > .h3 { max-width: 43rem; }  /* one width in rem, so the heading and the text share the same edge (ch would differ with the font size) */
.quotes__note { margin-inline: auto; text-align: center; }

.intro { padding-block: calc(var(--section) * 1.2) var(--section); text-align: start; }
/* one centered column, text aligned to its reading edge (מירב, 1.11): both paragraphs share the same width so their edges line up */
.intro p { margin-inline: auto; max-width: 48rem; text-wrap: pretty; }
.centered .lede, .audience .lede, .why .lede, .aud__hint, .after, .quotes__note, .how__note { text-wrap: balance; }
.intro p:first-child { font-size: clamp(1.25rem, 1rem + .9vw, 1.75rem); line-height: 1.5; }
.intro p + p { margin-top: 24px; font-size: var(--fs-lede); line-height: 1.6; color: var(--ink-soft); }

/* ---------- למי השירות מתאים: כרטיסים לסימון ---------- */
.audience { padding-block: var(--section); }
.aud__hint { margin: 14px auto 0; text-align: center; color: var(--ink-soft); }
.persons {
  list-style: none; margin: var(--gap) auto 0; padding: 0; max-width: 1120px;   /* the same outer edges as the tiles of "why NAVO" */
  display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px;
}
.persons li { grid-column: span 2; display: flex; }
.persons li:nth-child(4) { grid-column: 2 / span 2; }
.persons li:nth-child(5) { grid-column: 4 / span 2; }
.person {
  appearance: none; cursor: pointer; width: 100%; text-align: start; color: var(--ink);
  font: inherit; font-size: var(--fs-body); line-height: 1.5;
  position: relative; display: grid; grid-template-rows: auto 1fr; gap: 16px; align-content: start;
  padding: 24px 24px 26px; border-radius: 20px;
  background: var(--paper); border: 2px solid var(--rule);
  box-shadow: 0 14px 30px -26px rgba(15, 52, 66, .55);
  transition: border-color .25s var(--ease), transform .3s var(--ease), box-shadow .3s var(--ease), background-color .25s var(--ease);
}
.person:hover { transform: translateY(-3px); border-color: rgba(27, 106, 135, .5); box-shadow: 0 22px 36px -26px rgba(15, 52, 66, .6); }
.person[aria-pressed="true"] { border-color: var(--petrol); background: #fff; }
.person__ico { width: 64px; height: 64px; fill: none; stroke: var(--petrol); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.person__ico .f { fill: var(--surface); }
.person__ico .dot { fill: var(--petrol); stroke: none; }
.person__ico .ghost { stroke-dasharray: 2 6; opacity: .5; }
.person__ico .t { fill: var(--petrol); stroke: none; font: 800 14px/1 "Heebo", sans-serif; text-anchor: middle; }
.person__tick {
  position: absolute; top: 18px; inset-inline-end: 18px; width: 28px; height: 28px; border-radius: 50%;
  border: 2px solid var(--rule); display: grid; place-items: center; transition: background-color .25s var(--ease), border-color .25s var(--ease);
}
.person__tick svg { width: 16px; height: 16px; fill: none; stroke: var(--on-petrol); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 20; stroke-dashoffset: 20; transition: stroke-dashoffset .35s var(--ease) .05s; }
.person[aria-pressed="true"] .person__tick { background: var(--petrol); border-color: var(--petrol); }
.person[aria-pressed="true"] .person__tick svg { stroke-dashoffset: 0; }
.aud__send { margin-top: var(--gap); text-align: center; }

/* ---------- איך זה עובד: הקו שמתיישר (כיוון A, 5.11.2026) ----------
   A normal section: the four steps are always visible and scrolling only moves the page.
   The line itself tells the story in space, not in time: a tight tangle by step 1, waves between 2 and 3, straight into 4.
   main.js builds the line from where the four numbers really sit, so it reads the page's direction and layout by itself.
   When a step comes into view the line draws to its stop and the object enters as the line arrives; then the objects bob quietly. */
.how { background: var(--surface-soft); }
.how__in { width: min(100% - 2 * var(--gutter), var(--max)); margin-inline: auto; padding-block: var(--section); }
.how__head { text-align: center; }
.how__title { font-size: var(--fs-h2); line-height: 1.1; }
.how__note { margin: 20px auto 0; font-size: var(--fs-lede); line-height: 1.45; max-width: 34ch; color: var(--ink-soft); }
.how__road { position: relative; margin-top: clamp(32px, 4vw, 48px); }
.how__svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; visibility: hidden; }
.how.is-set .how__svg { visibility: visible; }   /* without JS there is no line, only the four steps */
.how__ghost, .how__line { fill: none; stroke: var(--petrol); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.how__ghost { opacity: .22; stroke-dasharray: 1 7; }
.how__start { fill: var(--mandarin); }

.steps { position: relative; list-style: none; margin: 0; padding: 0; display: grid; }
.step { display: grid; }
.step__obj { display: flex; align-items: flex-end; justify-content: center; }
.step__obj picture { display: contents; }
.step__obj img { width: auto; height: auto; max-width: 100%; max-height: 100%; }
.step__num {
  position: relative; z-index: 1; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%;
  background: var(--petrol); color: var(--on-petrol); font: 800 1.0625rem/1 var(--font-head);
  box-shadow: 0 0 0 5px var(--surface-soft);   /* the line stops short of the number, as if it passes under it */
}
.how .steps .step__num { border-radius: 50%; }   /* stays round in edit mode too, where every editable text gets small corners */
.step__text { font: 800 var(--fs-h3)/1.3 var(--font-head); letter-spacing: -.01em; }   /* a short title under the number, not a sentence */
.how__go { margin-top: clamp(32px, 4vw, 48px); text-align: center; }

/* wide screens: four columns in reading order. A row of objects, the row of the line the numbers sit on, a row of text */
@media (min-width: 900px) {
  .steps { grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 24px; }
  .step { grid-template-rows: 190px 112px auto; justify-items: center; text-align: center; }
  .step__obj { height: 100%; width: 100%; }
  .step[data-step="2"] .step__obj img { max-height: 88%; }
  .step__num { align-self: end; }
  .step__text { margin-top: 18px; max-width: 16rem; }
}

/* phone and tablet: one axis down the side. The line runs through the numbers and the curls go out toward the margin, never into the text.
   The whole road, curls included, is one block centred on the screen, so the air is the same on both sides (מירב, 7.11) */
@media (max-width: 899px) {
  .steps { row-gap: 44px; width: fit-content; max-width: 100%; margin-inline: auto; padding-inline-start: 9px; }   /* the curls reach just this far, so both edges get the same air */
  .step { grid-template-columns: 76px minmax(0, 1fr); grid-template-areas: "rail obj" "num text"; column-gap: 8px; row-gap: 14px; }
  /* each step is one group: the picture and the title share one axis, the middle of the column, and the number sits beside the title (מירב, 7.11) */
  .step__obj { grid-area: obj; height: 150px; justify-content: center; }
  .step__obj img { max-width: min(100%, 250px); }
  .step__num { grid-area: num; justify-self: start; margin-inline-start: 6px; align-self: center; }
  .step__text { grid-area: text; align-self: center; justify-self: center; text-align: center; }
}

/* playing: only with JS and no request for less motion. Until the line arrives the object waits and the number is pale. The text is always visible */
.how--play .step:not(.is-in) .step__obj { opacity: 0; }
.how--play .step:not(.is-in) .step__num { background: var(--surface); color: var(--ink-soft); }
.how--play .step__num { transition: background-color .35s var(--ease), color .35s var(--ease); }
.how--play .step.is-in[data-step="1"] .step__obj { animation: in-drop 1s var(--ease) both; }
.how--play .step.is-in[data-step="2"] .step__obj { animation: in-grow .9s cubic-bezier(.3, 1.5, .5, 1) both; }
.how--play .step.is-in[data-step="3"] .step__obj { animation: in-slide 1s var(--ease) both; }
.how--play .step.is-in[data-step="4"] .step__obj { animation: in-drop 1s var(--ease) both; }   /* like the first (מירב, 7.11) */
.how--play .step.is-in .step__num { animation: in-pop .5s cubic-bezier(.3, 1.6, .5, 1) both; }
/* the loop: once the line is done each object bobs at its own pace, and it pauses while the section is off screen */
.how--play.is-done .step__obj img { animation: bob 6s ease-in-out infinite; }
.how--play.is-done .step:nth-child(2) .step__obj img { animation-delay: -1.5s; }
.how--play.is-done .step:nth-child(3) .step__obj img { animation-delay: -3s; }
.how--play.is-done .step:nth-child(4) .step__obj img { animation-delay: -4.5s; }
.how.is-off .step__obj img { animation-play-state: paused; }

/* ---------- למה NAVO (31.10, אחרי סוכן הדמיון ומומחה הארט): שלושה מוקדים בלבד.
   The section title, then the wide tile (claim on the right, the table on the left, the one orange dot),
   then the two quiet tiles read as one strip. One line language for every drawing (2px petrol, no fill),
   one right edge for every text, one loop in the whole section (the rings). */
.why { padding-block: var(--section); }
.bento {
  list-style: none; margin: var(--gap) auto 0; padding: 0; max-width: 1120px;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px;
  grid-template-areas: "inside inside" "heart clear";
}
.tile { border-radius: 20px; padding: 48px;   /* one corner for every card on the page, like the audience cards */ display: flex; flex-direction: column; align-items: flex-start; background: var(--surface-soft); }
.tile h3 { font-size: var(--fs-h3); line-height: 1.25; }
.tile p { margin-top: 8px; font-size: var(--fs-body); line-height: 1.6; color: var(--ink-soft); }
.tile__art { width: 72px; height: 72px; flex: none; margin-bottom: 28px; }

.tile--inside {
  grid-area: inside; background: var(--surface); min-height: 320px;
  display: grid; grid-template-columns: 400px minmax(0, 1fr); grid-template-rows: 1fr auto auto 1fr;
  column-gap: 48px; align-items: start;
}
.tile--inside h3 { grid-column: 1; grid-row: 2; font-size: clamp(1.5rem, 1.1rem + 1.2vw, 2rem); line-height: 1.15; color: var(--ink); }
.tile--inside p { grid-column: 1; grid-row: 3; margin-top: 12px; color: var(--ink); }
.tile--inside .table-art { grid-column: 2; grid-row: 1 / -1; align-self: center; justify-self: center; width: 100%; max-width: 440px; }
.tile--heart { grid-area: heart; }
.tile--clear { grid-area: clear; }

/* the table: a plain paper top, two empty committee seats, you, and Sara who comes to sit beside you */
.table-art { position: relative; padding-block: 28px; }
.table-art svg { display: block; width: 100%; height: auto; overflow: visible; }
.table-art__label { position: absolute; inset-inline: 0; text-align: center; font-size: 1rem; line-height: 1.4; color: var(--ink-soft); }
.table-art__label--far { top: 0; }
.table-art__label--near { bottom: 0; }
.ta-table { fill: var(--paper); }
.ta-seat { fill: none; stroke: var(--petrol); stroke-width: 2; }
.ta-you { fill: var(--petrol); }
.ta-sara { fill: var(--mandarin); offset-path: path("M 540 172 C 470 172 400 172 338 172"); offset-distance: 100%; offset-rotate: 0deg; }

/* the rings: two, in the same line as the table */
.breath { position: relative; }
.breath span { position: absolute; border-radius: 50%; border: 2px solid var(--petrol); }
.breath span:nth-child(1) { inset: 0; opacity: .35; }
.breath span:nth-child(2) { inset: 14px; opacity: .7; }
.breath::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 1.5px solid var(--petrol); opacity: 0; pointer-events: none; }
.ticks circle { transform-box: fill-box; transform-origin: center; }

/* the ticks: three drawn lines, ticked */
.ticks { fill: none; stroke: var(--petrol); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ticks .ln { opacity: .35; }

@media (prefers-reduced-motion: no-preference) {
  .motion .ta-sara { offset-distance: 0%; }
  .motion .tile--inside.in .ta-sara { animation: cross 2.4s var(--ease) .4s forwards; }
  /* the rings (מירב, 1.11: small, gentle motion): they breathe in turns, one in while the other out, and every few seconds a soft ripple leaves the outer ring, like a calm pulse */
  .motion .tile--heart.in .breath span { animation: breathe 6s ease-in-out .6s infinite; }
  .motion .tile--heart.in .breath span:nth-child(2) { animation-name: breathe-in; }
  .motion .tile--heart.in .breath::after { animation: ripple 6s ease-out 1.8s infinite; }
  /* the list: the lines write themselves, the ticks follow, and then, once in a while, a quiet check runs down the list */
  .motion .ticks .ln { stroke-dasharray: 1; stroke-dashoffset: 1; }
  .motion .ticks .tk { stroke-dasharray: 14; stroke-dashoffset: 14; }
  .motion .tile--clear.in .ticks .ln { animation: tick .7s var(--ease) .3s forwards, glow 8s ease-in-out 3s infinite; }
  .motion .tile--clear.in .ticks .tk { animation: tick .4s var(--ease) .9s forwards; }
  .motion .tile--clear.in .ticks circle { animation: pop 8s var(--ease) 3s infinite; }
  .motion .tile--clear.in .ticks g:nth-child(2) .ln { animation-delay: .45s, 3.25s; }
  .motion .tile--clear.in .ticks g:nth-child(3) .ln { animation-delay: .6s, 3.5s; }
  .motion .tile--clear.in .ticks g:nth-child(2) .tk { animation-delay: 1.1s; }
  .motion .tile--clear.in .ticks g:nth-child(3) .tk { animation-delay: 1.3s; }
  .motion .tile--clear.in .ticks g:nth-child(2) circle { animation-delay: 3.25s; }
  .motion .tile--clear.in .ticks g:nth-child(3) circle { animation-delay: 3.5s; }
}
/* the entrances of the objects in "how it works" */
@keyframes in-drop { 0% { opacity: 0; transform: translateY(-70px) rotate(-9deg); } 55% { opacity: 1; transform: translateY(8px) rotate(2deg); } 78% { transform: translateY(-4px) rotate(-1deg); } 100% { transform: none; } }
@keyframes in-grow { 0% { opacity: 0; transform: translateY(30px) scale(.7); } 100% { opacity: 1; transform: none; } }
@keyframes in-slide { 0% { opacity: 0; transform: translateX(90px) rotate(8deg); } 100% { opacity: 1; transform: none; } }
@keyframes in-shadow { 0% { opacity: 0; scale: .3 1; } 100% { opacity: 1; scale: 1 1; } }
@keyframes in-pop { 0% { opacity: 0; scale: .4; } 100% { opacity: 1; scale: 1; } }
@keyframes cross { to { offset-distance: 100%; } }
@keyframes tick { to { stroke-dashoffset: 0; } }
@keyframes breathe { 0%, 100% { scale: .94; } 50% { scale: 1.04; } }
@keyframes breathe-in { 0%, 100% { scale: 1.06; } 50% { scale: .92; } }
@keyframes ripple { 0% { opacity: 0; scale: 1; } 8% { opacity: .35; } 45%, 100% { opacity: 0; scale: 1.35; } }
@keyframes glow { 0%, 12%, 100% { opacity: .35; } 6% { opacity: .8; } }
@keyframes pop { 0%, 12%, 100% { scale: 1; } 6% { scale: 1.15; } }

@media (max-width: 960px) {
  .persons { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .persons li, .persons li:nth-child(4) { grid-column: auto; }
  .persons li:nth-child(5) { grid-column: 1 / -1; }
  .tile { border-radius: 20px; padding: 32px; }
  .tile__art { width: 64px; height: 64px; margin-bottom: 24px; }
  .tile--inside { grid-template-columns: 300px minmax(0, 1fr); column-gap: 32px; min-height: 0; }
}
@media (max-width: 640px) {
  .persons { grid-template-columns: 1fr; gap: 12px; }
  .persons li:nth-child(5) { grid-column: auto; }
  /* the icon over the text, as on wide screens: beside it, the text had only about 200px, 23 to 28 characters a line, under the 40 floor for a card caption */
  .person { padding: 18px 18px 20px; gap: 12px; }
  .person__ico { width: 48px; height: 48px; }
  .bento { grid-template-columns: 1fr; grid-template-areas: "inside" "heart" "clear"; gap: 12px; }
  .tile { padding: 24px; }
  .tile__art { width: 56px; height: 56px; margin-bottom: 20px; }
  .tile--inside { grid-template-columns: 1fr; grid-template-rows: auto; }
  .tile--inside h3, .tile--inside p { grid-row: auto; }
  .tile--inside .table-art { grid-column: 1; grid-row: auto; order: 3; margin-top: 24px; padding-block: 24px; }  /* on a phone the claim comes before the drawing */
}

/* ---------- מדריך הזכויות: על משטח תכלת, כדי שהדף בולט, ובמרכז ---------- */
.guide.centered { width: auto; background: var(--surface); padding-inline: var(--gutter); }
.guide > .h2, .guide > .lede { max-width: var(--max); }
.folder { margin-inline: auto; }
.folder__tabs { justify-content: center; padding-inline-start: 0; }
.tab { background: var(--surface-soft); box-shadow: inset 0 0 0 1px rgba(15, 52, 66, .1); }
.tab:nth-child(even) { background: var(--bg); }
.tab[aria-selected="true"] { box-shadow: none; }
.sheet { box-shadow: 0 8px 0 -2px var(--surface-soft), 0 16px 0 -4px var(--bg), 0 28px 50px -30px rgba(15, 52, 66, .5); text-align: start; }
@media (max-width: 719px) { .folder__tabs { justify-content: flex-start; } }
/* the photo settles from a slight zoom: keep it inside its frame so the page never scrolls sideways */
.hero__photo picture { overflow: clip; }

/* ---------- legal pages: privacy, terms, accessibility ---------- */
.legal { padding-block: var(--section); }
.legal__title, .legal__body { max-width: var(--read); }
.legal__body { margin-top: 32px; }
.legal__body h2 { font-size: var(--fs-h3); line-height: 1.3; margin-top: 2em; }
.legal__body ul { padding-inline-start: 1.4em; }
.legal__body li + li { margin-top: .4em; }
.legal__body li::marker { color: var(--petrol); }

/* ---------- a section hidden from the site (decision 30) ----------
   Only in edit mode and in the draft preview. On the site a hidden section is not in the HTML at all. */
section[data-hidden] { position: relative; outline: 2px dashed var(--petrol); outline-offset: -10px; }
.sec-off {
  position: absolute; top: 18px; inset-inline-start: 18px; z-index: 5; margin: 0;
  padding: 6px 14px; border-radius: 999px; border: 2px solid var(--petrol);
  background: var(--paper); color: var(--ink); font: 800 1rem/1.2 var(--font-head);
}

/* the guide's tabs on a phone: the strip scrolls sideways, and a soft fade marks the side where more tabs wait (main.js) */
@media (max-width: 719px) {
  .folder__tabs.fade-l, .folder__tabs.fade-r {
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 var(--fade-l, 0px), #000 calc(100% - var(--fade-r, 0px)), transparent 100%);
            mask-image: linear-gradient(to right, transparent 0, #000 var(--fade-l, 0px), #000 calc(100% - var(--fade-r, 0px)), transparent 100%);
  }
  .folder__tabs.fade-l { --fade-l: 56px; }
  .folder__tabs.fade-r { --fade-r: 56px; }
}