/* Shared base for the landing pages and serero.co.il: the font, tokens, reset, buttons,
   the form, and small utilities. page.css sets the look on top of this (direction A),
   and the checklist document itself is styled in guide.css. */

/* One font for headings and text alike: Heebo, the owner's choice for the site and
   then for the landing pages and the checklists (2026-09-24). It is served from this
   site, not from Google; the files and their licence (SIL Open Font License 1.1) are
   in /assets/fonts. One variable file per script covers every weight. The Hebrew face
   comes last on purpose: where ranges overlap, a browser tries the last face first, so
   the space and ₪ (both in the Hebrew file too) come from the Hebrew file that is
   already loading, instead of pulling in a Latin file or cutting every line of Hebrew
   into short runs while the Latin file is on its way. The Latin file still loads for
   digits and punctuation. The hyphen stays Latin: in "L-00138636" it is kerned
   against the L. */
@font-face {
  font-family: "Heebo"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url(/assets/fonts/heebo-latin-ext.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Heebo"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url(/assets/fonts/heebo-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Heebo"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url(/assets/fonts/heebo-hebrew.woff2) format("woff2");
  unicode-range: U+0020, U+00A0, U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F;
}

:root {
  --navy: #021B41;
  --navy-2: #0A2A5A;
  --navy-3: #173B72;
  --gold: #C28722;
  --gold-hover: #D39A36;
  --gold-soft: #E7CC93;
  --gold-ink: #86580E;       /* gold for small text on white: 5.6:1 */
  --ink: #1B2130;
  --muted: #535E75;          /* 6.4:1 on white */
  --line: #D7DDE7;          /* dividers only */
  --line-strong: #B7C1D1;
  --edge: #7F8A9E;          /* borders of things you can click: 3.5:1 on white */
  --edge-hover: #5C6880;
  --mist: #F2F4F8;
  --paper: #FFFFFF;
  --error: #B42318;
  --error-bg: #FDECEA;

  --font-text: "Heebo", "Arial Hebrew", Arial, sans-serif;
  --font-display: var(--font-text);

  --r-card: 18px;   /* panels and sheets */
  --r-box: 14px;    /* boxes inside a panel */
  --r-ctl: 12px;    /* things you click */
  --r-sm: 8px;      /* small inputs and rows */
  --r-pill: 999px;

  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --shadow-soft: 0 1px 2px rgba(2, 27, 65, .06), 0 10px 24px -12px rgba(2, 27, 65, .22);
  --shadow-lift: 0 2px 6px rgba(2, 27, 65, .08), 0 30px 60px -28px rgba(2, 27, 65, .45);
}
/* The pages are drawn for a light screen. Without this, phones that darken sites by force
   (Chrome's auto-dark and the like) turn the gold button's navy label white. */
:root { color-scheme: only light; }

*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 16px;
  /* The form is replaced by the checklist in place; without this the browser keeps
     the old scroll position anchored to content that just disappeared. */
  overflow-anchor: none;
}
body {
  margin: 0;
  font-family: var(--font-text);
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--ink);
  background: var(--paper);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
img { max-width: 100%; height: auto; display: block; }
h1, h2, h3, h4, h5, h6, p, ul, ol, figure, blockquote, dl, dd { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
[hidden] { display: none !important; }
strong { font-weight: 700; }

:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; border-radius: 4px; }
[data-focus]:focus { outline: none; }
::selection { background: rgba(194, 135, 34, .3); color: var(--navy); }
input, textarea { caret-color: var(--gold); accent-color: var(--navy); }

/* A licence number, or a sum and its unit, is read as one piece and never split by a line break. */
.nowrap { white-space: nowrap; }
.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;
}
.skip {
  position: absolute; inset-inline-start: 12px; top: -80px; z-index: 60;
  padding: 10px 16px; background: var(--navy); color: #fff; border-radius: var(--r-ctl);
  text-decoration: none; font-weight: 700;
}
.skip:focus { top: 12px; }

.wrap { width: min(100% - 40px, 1180px); margin-inline: auto; }
.icon {
  width: 22px; height: 22px; flex: none;
  fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}
.ltr { direction: ltr; unicode-bidi: isolate; }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 54px; padding: 12px 26px; border: 0; border-radius: var(--r-ctl);
  font-weight: 700; font-size: 1.0625rem; line-height: 1.2; text-decoration: none;
  transition: transform .2s var(--ease-out), background-color .2s, box-shadow .2s, color .2s;
}
.btn:active { transform: translateY(1px); }
.btn .icon { width: 20px; height: 20px; stroke-width: 2.2; }
.btn-gold { background: var(--gold); color: var(--navy); }
.btn-gold:hover { background: var(--gold-hover); }
.btn-navy { background: var(--navy); color: #fff; }
.btn-navy:hover { background: var(--navy-3); }
.btn-ghost { background: transparent; color: inherit; box-shadow: inset 0 0 0 2px currentColor; }
.btn-ghost:hover { background: rgba(127, 127, 127, .08); }
.btn-block { display: flex; width: 100%; }
.btn[aria-disabled="true"] { opacity: .55; cursor: not-allowed; }
/* Windows contrast themes drop backgrounds and shadows; a real border keeps each button's edge. */
@media (forced-colors: active) { .btn { border: 2px solid ButtonBorder; } }
.linkish {
  background: none; border: 0; padding: 0; color: inherit; text-decoration: underline;
  text-underline-offset: 3px; font-size: .9375rem;
}

/* The lead form */
.lead-form { display: grid; gap: 24px; }
.form-note { font-size: .9375rem; color: var(--muted); }
.field { display: grid; gap: 10px; min-width: 0; margin: 0; padding: 0; border: 0; }
.field > label, .field > legend { padding: 0; font-weight: 700; font-size: 1.03rem; color: var(--navy); line-height: 1.35; }
.field > legend { margin-bottom: 10px; }
.opt { font-weight: 400; color: var(--muted); }
.hint { font-size: .9375rem; color: var(--muted); line-height: 1.5; margin-top: -2px; }
.field input[type="text"], .field input[type="tel"], .field input[type="email"] {
  width: 100%; min-height: 54px; padding: 12px 16px;
  border: 2px solid var(--edge); border-radius: var(--r-ctl); background: #fff;
  font-size: 1.0625rem; transition: border-color .15s, box-shadow .15s;
}
.field input:hover { border-color: var(--edge-hover); }
.field input:focus { outline: none; border-color: var(--navy); box-shadow: 0 0 0 4px rgba(194, 135, 34, .28); }
.field input[aria-invalid="true"] { border-color: var(--error); }
.field input[type="tel"] { direction: ltr; text-align: right; }
.field input::placeholder { color: #8A94A8; }

.chips { display: flex; flex-wrap: wrap; gap: 10px; }
.chip { position: relative; display: inline-flex; }
.chip input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.chip span {
  display: inline-flex; align-items: center; gap: 10px; min-height: 46px; padding: 9px 18px;
  border: 2px solid var(--edge); border-radius: var(--r-pill); background: #fff;
  font-weight: 600; font-size: 1rem; line-height: 1.3; color: var(--ink);
  transition: background-color .15s, border-color .15s, color .15s;
}
.chip:hover span { border-color: var(--edge-hover); }
.chip input:checked + span { background: var(--navy); border-color: var(--navy); color: #fff; }
/* Every option shows its own empty marker: a square to tick, a circle to pick. */
.chip span::before {
  content: ""; width: 17px; height: 17px; flex: none; border-radius: 4px;
  box-shadow: inset 0 0 0 2px var(--edge); transition: background-color .15s, box-shadow .15s;
}
.chip input[type="radio"] + span::before { border-radius: 50%; }
.chip input:checked + span::before { box-shadow: inset 0 0 0 2px var(--gold-soft); }
.chip input[type="checkbox"]:checked + span::before {
  box-shadow: none;
  background: var(--gold) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.4l2.9 2.9L12.6 5' fill='none' stroke='%23021B41' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 14px no-repeat;
}
.chip input[type="radio"]:checked + span::before { box-shadow: inset 0 0 0 4px var(--navy); background: var(--gold); }
.chip input:focus-visible + span { outline: 3px solid var(--gold); outline-offset: 2px; }
/* The form script marks each input of an unanswered group, so the frame is found next to it. */
.chip input[aria-invalid="true"] + span { border-color: #E4A59F; }
/* On a narrow phone every option gets its own full-width row, not a staircase. Short
   answers (sums, ages, places) sit two to a row, so the form stays close to one screen. */
@media (max-width: 460px) {
  .chips { display: grid; gap: 8px; }
  .chips-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .chip span { width: 100%; height: 100%; border-radius: var(--r-ctl); }
  .chips-2 .chip span { padding-inline: 12px; gap: 8px; }
}

.consent {
  display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: start;
  padding: 16px 18px; border-radius: var(--r-ctl); background: var(--mist);
}
.tick-wrap { position: relative; width: 26px; height: 26px; margin-top: 1px; }
/* The box shows at 26px, but the invisible input reaches 9px past it on every side: a 44px target for a finger. */
.tick-wrap input { position: absolute; inset: -9px; width: auto; height: auto; margin: 0; opacity: 0; cursor: pointer; }
.tick-box {
  display: block; width: 26px; height: 26px; border-radius: 6px; background: #fff;
  box-shadow: inset 0 0 0 2px var(--edge); transition: background-color .15s, box-shadow .15s;
}
.tick-wrap input:checked + .tick-box {
  box-shadow: none;
  background: var(--navy) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.4l2.9 2.9L12.6 5' fill='none' stroke='%23C28722' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 18px no-repeat;
}
.tick-wrap input:focus-visible + .tick-box { outline: 3px solid var(--gold); outline-offset: 2px; }
.tick-wrap input[aria-invalid="true"] + .tick-box { box-shadow: inset 0 0 0 2px var(--error); }
.consent label { font-size: .9688rem; line-height: 1.6; color: var(--ink); cursor: pointer; }
.consent a { color: var(--navy); font-weight: 700; text-underline-offset: 3px; }

/* The handover line between the quick questions and the two typed details. */
.form-step {
  margin-block-start: 4px; padding-block-start: 20px; border-block-start: 1px solid var(--line);
  font-weight: 700; color: var(--navy); font-size: 1.03rem;
}

.error { color: var(--error); font-size: .9375rem; font-weight: 700; line-height: 1.4; }
.form-status { padding: 12px 14px; border-radius: var(--r-ctl); background: var(--error-bg); color: var(--error); font-weight: 700; }
.after-note { font-size: .9375rem; color: var(--muted); text-align: center; margin-top: -8px; }
/* The lead form in steps (owner's choice A, 2026-09-25): one question per screen, then the two details.
   Without the script every step shows at once, as one long form. */
.lead-last { display: grid; gap: 24px; }
.lead-form.is-stepped .form-step { margin-block-start: 0; padding-block-start: 0; border-block-start: 0; font-size: 1.2rem; }
.lead-form.is-stepped [data-step] > legend { font-size: 1.2rem; }
.lead-form.is-stepped .chips { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
.lead-form.is-stepped .chip span { width: 100%; min-height: 54px; border-radius: var(--r-ctl); padding-inline: 16px; }
.lead-form.is-stepped [data-step]:focus { outline: none; }
.step-prog { display: flex; align-items: center; gap: 12px; }
.step-bar { flex: 1; height: 6px; border-radius: var(--r-pill); background: var(--mist); overflow: hidden; }
.step-bar i { display: block; height: 100%; border-radius: inherit; background: var(--gold); transition: width .35s var(--ease-out); }
.step-n { font-size: .9375rem; font-weight: 700; color: var(--muted); white-space: nowrap; }
.step-nav { display: flex; align-items: center; gap: 12px; }
.step-nav .btn { flex: 1; }
.step-back {
  min-height: 48px; padding: 8px 6px; border: 0; background: none; cursor: pointer;
  font: inherit; font-weight: 700; color: var(--gold-ink);
}
.step-back:hover { text-decoration: underline; text-underline-offset: 4px; }
.lead-form.is-stepped [data-step]:not([hidden]) { animation: step-in .28s var(--ease-out); }
@keyframes step-in { from { opacity: 0; transform: translateX(-12px); } }
@media (prefers-reduced-motion: reduce) {
  .lead-form.is-stepped [data-step]:not([hidden]) { animation: none; }
  .step-bar i { transition: none; }
}
.hp { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* Entrances. Only when scripts run, and never under reduced motion. */
.js [data-reveal] { opacity: 0; transform: translateY(22px); transition: opacity .8s var(--ease-out), transform .8s var(--ease-out); }
.js [data-reveal].is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js [data-reveal] { opacity: 1; transform: none; transition: none; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* A small bar that follows the phone reader until the form is on screen. */
.sticky-cta {
  position: fixed; inset-inline: 12px; bottom: 12px; z-index: 40;
  transform: translateY(140%); transition: transform .35s var(--ease-out);
}
.sticky-cta.is-on { transform: none; }
.sticky-cta .btn { width: 100%; box-shadow: 0 10px 30px -10px rgba(2, 27, 65, .6); }
@media (min-width: 1000px) { .sticky-cta { display: none; } }
/* Keyboard focus that the page scrolls to stops above the bar, never under it (QA, 2026-09-29: a question
   near the end of the landing page was hidden under the bar). The site sets its own values in www.css. */
@media (max-width: 999px) { html { scroll-padding-bottom: 88px; } }

/* Direction A, "המדריך": the owner's brand at full strength. Deep navy, fine gold
   lines, an embossed YS, and the checklist shown as a real booklet. Heebo (base.css)
   carries the display lines and the reading text alike. */

/* The brand's divider: a gold line broken by a small diamond, as in the logo. */
.rule {
  position: relative; display: block; width: 120px; height: 2px;
  background: linear-gradient(to left, var(--gold) 0 42%, transparent 42% 58%, var(--gold) 58% 100%);
}
.rule::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 9px; height: 9px;
  background: var(--gold); transform: translate(-50%, -50%) rotate(45deg);
}

/* Header, laid over the navy hero */
.site-header { position: absolute; inset-inline: 0; top: 0; z-index: 20; }
.is-unlocked .site-header { position: relative; background: var(--navy); }
.header-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-block: 18px; }
.brand { width: clamp(128px, 11vw, 158px); height: auto; }
.header-cta {
  display: none; padding: 10px 20px; border-radius: var(--r-pill);
  color: #fff; font-weight: 700; text-decoration: none;
  box-shadow: inset 0 0 0 1.5px rgba(231, 204, 147, .55);
  transition: background-color .2s, box-shadow .2s;
}
.header-cta:hover { background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 1.5px var(--gold-soft); }
@media (min-width: 700px) { .header-cta { display: inline-flex; } }
@media (forced-colors: active) { .header-cta { border: 2px solid ButtonBorder; } }

/* Hero */
.hero {
  position: relative; overflow: hidden; isolation: isolate; color: #fff;
  background:
    radial-gradient(1100px 620px at 6% 10%, rgba(29, 70, 132, .55), transparent 60%),
    radial-gradient(900px 600px at 100% 100%, rgba(12, 45, 96, .9), transparent 62%),
    var(--navy);
  padding-block: clamp(108px, 12vw, 152px) clamp(72px, 8vw, 124px);
}
.hero-lines {
  position: absolute; inset-inline: 0; bottom: -70px; z-index: -1;
  width: 100%; height: clamp(360px, 46vw, 640px);
  fill: none; stroke: var(--gold); stroke-width: 1.15;
}
.hero-grid { display: grid; gap: clamp(36px, 5vw, 56px); align-items: center; }
@media (min-width: 1000px) {
  .hero-grid {
    grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr);
    grid-template-areas: "copy art" "tail art";
    align-items: start; column-gap: clamp(44px, 5vw, 72px); row-gap: 30px;
  }
  .hero-copy { grid-area: copy; align-self: end; }
  .hero-art { grid-area: art; align-self: center; }
  .hero-tail { grid-area: tail; }
}
.h1-scene {
  display: block; max-width: 36ch; margin-bottom: 18px;
  font-weight: 600; font-size: clamp(1.12rem, 1rem + .55vw, 1.45rem); line-height: 1.5; color: #C3CFE4;
}
.h1-question {
  display: block; font-family: var(--font-display); font-weight: 800;
  font-size: clamp(2.6rem, 1.45rem + 4.1vw, 4.7rem); line-height: 1.04; text-wrap: balance;
}
.h1-question em { font-style: normal; color: var(--gold-soft); }
.hero-sub { max-width: 54ch; margin-top: 24px; font-size: clamp(1.06rem, 1rem + .3vw, 1.24rem); line-height: 1.7; color: #D6DEEC; }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; margin-top: 34px; }
.btn-hero { min-height: 60px; padding-inline: 30px; font-size: 1.12rem; box-shadow: 0 14px 30px -14px rgba(1, 10, 26, .75); }
.btn-hero .icon { transition: transform .25s var(--ease-out); }
.btn-hero:hover .icon { transform: translateX(-4px); }
.hero-link {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding-block: 6px;
  color: #fff; font-weight: 700; text-decoration: none;
  border-bottom: 2px solid rgba(231, 204, 147, .45); transition: border-color .2s;
}
.hero-link:hover { border-color: var(--gold-soft); }
.hero-tail { display: grid; gap: 0; }
.hero-facts { display: flex; flex-wrap: wrap; gap: 12px 26px; color: #C3CFE4; font-weight: 600; font-size: .98rem; }
.hero-facts li { display: inline-flex; align-items: center; gap: 9px; }
.hero-facts .icon { width: 20px; height: 20px; color: var(--gold-soft); }
.byline {
  display: flex; align-items: center; gap: 14px; max-width: 54ch; margin-top: 34px; padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, .14); color: #C3CFE4; font-size: .95rem; line-height: 1.5;
}
.byline img { width: 50px; height: 50px; border-radius: 50%; box-shadow: 0 0 0 2px var(--navy), 0 0 0 4px var(--gold); }
.byline strong { color: #fff; }
/* On a phone his portrait opens the hero, as on serero.co.il (the owner's option A of two previews, 2026-10-10): his
   face is in the first screen, the scene line and the question laid over the portrait's faded lower edge, and the
   byline below keeps its words but drops its small photo. The booking button stays whole in a 664px in-app screen
   (584-644 at 390x664). A screen under 601px tall (a small phone, or a short in-app browser) keeps the hero as it
   was, with the small photo by the name. Computers keep the booklet beside the words. Every class here is the
   landing pages' own: page.css also goes out in serero.co.il's stylesheet. */
.lp-portrait { display: none; }
@media (max-width: 759px) and (min-height: 601px) {
  .lp-portrait { position: relative; display: block; width: min(40vw, 156px); margin: 0 0 -84px; margin-inline-start: auto; }
  .lp-portrait img {
    position: relative; z-index: 1; display: block; width: 100%; height: auto; filter: drop-shadow(0 26px 34px rgba(0, 6, 20, .38));
    -webkit-mask-image: linear-gradient(to bottom, #000 52%, transparent 90%), linear-gradient(to right, transparent 0, #000 16%);
    -webkit-mask-composite: source-in;
    mask-image: linear-gradient(to bottom, #000 52%, transparent 90%), linear-gradient(to right, transparent 0, #000 16%);
    mask-composite: intersect;
  }
  .lp-arc { position: absolute; z-index: 0; left: -9%; top: -4%; width: 118%; height: auto; overflow: visible; }
  .lp-line { fill: none; stroke: var(--gold); stroke-width: 1.5; stroke-linecap: round; stroke-dasharray: 60 100; }
  .lp-line-2 { stroke: var(--gold-soft); stroke-width: 1; opacity: .5; stroke-dasharray: 32 100; }
  .hero-copy > h1, .p-hero-copy > .p-scene, .p-hero-copy > h1 { position: relative; z-index: 2; }
  .hero-grid .hero-sub { margin-top: 18px; }
  .hero-grid .hero-actions { margin-top: 24px; }
  [data-hero]:has(.lp-portrait) .byline img { display: none; }
}
@media (max-width: 759px) and (min-height: 601px) and (max-height: 650px) { .lp-portrait { width: min(36vw, 132px); margin-bottom: -76px; } }
/* A contrast theme lays a plate behind every line of text, which would cut a band out of the photo, and with the
   headline under it the button would leave the first screen: there the hero stays as it was. */
@media (max-width: 759px) and (min-height: 601px) and (forced-colors: active) {
  .lp-portrait { display: none; }
  [data-hero]:has(.lp-portrait) .byline img { display: revert; }
}
@media (prefers-reduced-motion: no-preference) {
  .lp-line { animation: lp-arc-draw 1.9s var(--ease-out) .35s both; }
  .lp-line-2 { animation: lp-arc-draw-2 1.9s var(--ease-out) .6s both; }
}
@keyframes lp-arc-draw { from { stroke-dashoffset: 60; } }
@keyframes lp-arc-draw-2 { from { stroke-dashoffset: 32; } }

/* The booklet */
.hero-art { position: relative; display: grid; place-items: center; padding-block: 8px 28px; }
.book {
  position: relative; width: min(70vw, 380px); aspect-ratio: 210 / 297; container-type: inline-size;
  transform: perspective(1800px) rotateY(-16deg) rotateX(5deg) rotateZ(-2deg);
  filter: drop-shadow(0 48px 46px rgba(0, 6, 20, .5)) drop-shadow(0 12px 14px rgba(0, 6, 20, .32));
}
@media (min-width: 1000px) { .book { width: min(32vw, 420px); } }
/* On a phone who wrote it (the photo and the licence) comes before the picture of the
   booklet, and the booklet is smaller. It used to push the byline 1,064px down. */
@media (max-width: 999px) {
  .hero-tail { order: 1; }
  .hero-art { order: 2; }
  .book { width: min(52vw, 300px); }
}
.book-sheet {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: flex-end; gap: 3.6cqw;
  padding: 10cqw 9cqw; border-radius: 6px; background: #FBFCFE; text-align: left;
  transform: translate(-34%, 9%) rotate(-11deg);
}
.mini-num { font-family: var(--font-display); font-weight: 800; font-size: 17cqw; line-height: .8; color: var(--gold); }
.mini-title { margin-bottom: 1.6cqw; font-family: var(--font-display); font-weight: 800; font-size: 6.6cqw; line-height: 1.1; color: var(--navy); }
.mini-line { display: block; flex: none; width: var(--w, 80%); height: 1.8cqw; border-radius: 99px; background: #DCE2EC; }
.mini-box { display: flex; flex-direction: column; gap: 2.8cqw; padding: 4.6cqw; border-radius: 3cqw; background: #EEF2F8; }
.mini-mark { background: rgba(194, 135, 34, .55); }

.book-cover {
  position: absolute; inset: 0; overflow: hidden; border-radius: 10px 3px 3px 10px;
  background: linear-gradient(165deg, #FFFFFF 0%, #F7F9FC 52%, #ECF0F6 100%);
  box-shadow: -2px 2px 0 #E2E7EF, -4px 4px 0 #FFFFFF, -6px 6px 0 #DAE0EA, -8px 8px 0 #FFFFFF, -10px 10px 0 #D2D9E5;
}
.book-cover::after {
  content: ""; position: absolute; inset-block: 0; right: 0; width: 7cqw; pointer-events: none;
  background: linear-gradient(to left, rgba(2, 27, 65, .14), rgba(2, 27, 65, 0));
}
.emboss { position: absolute; left: -18cqw; top: 26cqw; width: 80cqw; aspect-ratio: 580 / 720; }
.emboss > span {
  position: absolute; inset: 0;
  -webkit-mask: url(/v/mark-mask.db11b68cf2.webp) center / contain no-repeat;
  mask: url(/v/mark-mask.db11b68cf2.webp) center / contain no-repeat;
}
.emboss-shade { background: rgba(2, 27, 65, .16); transform: translate(.7cqw, 1cqw); }
.emboss-light { background: #FFFFFF; transform: translate(-.5cqw, -.6cqw); }
.emboss-face { background: linear-gradient(150deg, #F5F7FA 10%, #E8ECF3 62%, #F1F4F8 100%); }
.cover-lines { position: absolute; inset: 0; width: 100%; height: 100%; fill: none; stroke: var(--gold); stroke-width: .9; }
.cover-body { position: absolute; inset-inline: 9cqw; top: 10cqw; display: flex; flex-direction: column; align-items: flex-start; gap: 2cqw; }
.cover-mark { width: 10cqw; height: auto; margin-bottom: 5cqw; }
.cover-title { font-family: var(--font-display); font-weight: 800; font-size: 12.6cqw; line-height: 1; color: var(--navy); }
.cover-rule {
  position: relative; display: block; width: 50cqw; height: max(1.5px, .5cqw); margin-block: 2.4cqw;
  background: linear-gradient(to left, var(--gold) 0 43%, transparent 43% 57%, var(--gold) 57% 100%);
}
.cover-rule::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 2.3cqw; height: 2.3cqw;
  background: var(--gold); transform: translate(-50%, -50%) rotate(45deg);
}
.cover-sub { font-weight: 700; font-size: 4.5cqw; color: var(--navy); }
.cover-foot { position: absolute; inset-inline-start: 9cqw; bottom: 8cqw; font-weight: 600; font-size: 3.3cqw; color: var(--muted); }

@media (prefers-reduced-motion: no-preference) {
  .book { animation: book-in 1.5s var(--ease-out) .1s both; }
  .hero-copy > * { animation: rise .9s var(--ease-out) both; }
  .hero-copy > :nth-child(2) { animation-delay: .08s; }
  .hero-copy > :nth-child(3) { animation-delay: .16s; }
  .hero-copy > :nth-child(4) { animation-delay: .24s; }
  .hero-copy > :nth-child(5) { animation-delay: .32s; }
}
@keyframes book-in {
  from { opacity: 0; transform: perspective(1800px) rotateY(-32deg) rotateX(12deg) rotateZ(-7deg) translateY(46px); }
}
@keyframes rise { from { opacity: 0; transform: translateY(18px); } }

/* Sections */
.section { padding-block: clamp(76px, 9vw, 128px); }
.section-head { max-width: 780px; margin-bottom: clamp(36px, 5vw, 56px); }
.section-head h2 {
  font-family: var(--font-display); font-weight: 700; font-size: clamp(2.1rem, 1.5rem + 2.2vw, 3.3rem);
  line-height: 1.08; color: var(--navy); text-wrap: balance;
}
.section-head p { max-width: 62ch; margin-top: 16px; font-size: clamp(1.06rem, 1rem + .3vw, 1.2rem); color: var(--muted); }

/* What's inside */
.toc { display: grid; }
@media (min-width: 900px) { .toc { grid-template-columns: 1fr 1fr; column-gap: clamp(40px, 5vw, 76px); } }
.toc li { display: grid; grid-template-columns: 70px minmax(0, 1fr); gap: 16px; align-items: start; padding-block: 24px; border-top: 1px solid var(--line); }
.toc-num { font-family: var(--font-display); font-weight: 800; font-size: 3.5rem; line-height: .82; color: var(--gold); }
.toc h3 { font-size: 1.3rem; font-weight: 800; line-height: 1.3; color: var(--navy); }
.toc p { margin-top: 6px; color: var(--muted); }
.extras { display: grid; gap: 18px; margin-top: clamp(40px, 5vw, 64px); }
@media (min-width: 760px) { .extras { grid-template-columns: repeat(3, 1fr); } }
.extras li { padding: 28px 26px 26px; border-radius: var(--r-card); background: var(--mist); }
.extras .icon { width: 46px; height: 46px; margin-bottom: 18px; padding: 11px; border-radius: 50%; background: var(--navy); color: var(--gold-soft); }
.extras h3 { font-family: var(--font-display); font-weight: 700; font-size: 1.55rem; color: var(--navy); }
.extras p { margin-top: 6px; color: var(--muted); }
.quote { display: grid; justify-items: center; gap: 24px; margin-top: clamp(64px, 8vw, 104px); text-align: center; }
.quote blockquote {
  max-width: 30ch; font-family: var(--font-display); font-weight: 700;
  font-size: clamp(1.6rem, 1.15rem + 1.7vw, 2.55rem); line-height: 1.32; color: var(--navy); text-wrap: balance;
}
.quote figcaption { display: inline-flex; align-items: center; gap: 12px; font-weight: 700; color: var(--navy); }
.quote figcaption img { width: 46px; height: 46px; border-radius: 50%; box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--gold); }

/* A full chapter, before the form */
.sample { background: var(--mist); }
.sample-sheet { max-width: 900px; margin-inline: auto; }
.sample .g-done, .sample .g-callback { display: none; }
.sample-cta { margin-top: 40px; text-align: center; }

/* The form */
/* clip, not hidden: hidden turns the section into its own scroll box, and then the
   reassurance column next to the form never stays in view. hidden stays as the fallback
   for browsers without clip. */
.form-section {
  position: relative; overflow: hidden; overflow: clip; isolation: isolate; color: #fff;
  background: radial-gradient(1000px 640px at 94% 0%, rgba(29, 70, 132, .5), transparent 60%), var(--navy);
}
.form-grid { display: grid; gap: 40px; align-items: start; }
@media (min-width: 1000px) {
  .form-grid { grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); gap: 76px; }
  .form-intro { position: sticky; top: 40px; }
}
/* Below the two columns the three reassurances move under the form card, so the first question
   shows right under the heading when "get the checklist" lands here (owner, 2026-09-25). */
@media (max-width: 999px) {
  .form-intro { display: contents; }
  .form-intro h2 { order: 0; }
  .form-card { order: 1; }
  .assure { order: 2; margin-top: 0; }
}
.form-intro h2 { font-family: var(--font-display); font-weight: 700; font-size: clamp(2.1rem, 1.5rem + 2.2vw, 3.3rem); line-height: 1.08; text-wrap: balance; }
.assure { display: grid; gap: 18px; margin-top: 32px; }
.assure li { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 12px; color: #D6DEEC; font-size: 1.06rem; }
.assure .icon { margin-top: 3px; color: var(--gold-soft); }
.form-card { padding: clamp(24px, 4vw, 44px); border-radius: var(--r-card); background: #fff; color: var(--ink); box-shadow: 0 34px 80px -34px rgba(0, 0, 0, .65); }

/* About */
.about { padding-block: clamp(76px, 9vw, 128px); }
.about-grid { display: grid; gap: 48px; align-items: center; }
@media (min-width: 900px) { .about-grid { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 80px; } }
.about-photo {
  width: min(100%, 420px); margin-inline: auto; aspect-ratio: 1; padding: 10px; border-radius: 50%;
  background: conic-gradient(from 205deg, var(--gold) 0 23%, var(--navy) 23% 100%);
}
.about-photo img { width: 100%; height: 100%; object-fit: cover; border: 7px solid #fff; border-radius: 50%; }
.about-copy h2 { font-family: var(--font-display); font-weight: 700; font-size: clamp(2.1rem, 1.5rem + 2vw, 3.1rem); line-height: 1.1; color: var(--navy); }
.about-id { margin-top: 10px; font-weight: 700; color: var(--gold-ink); }
.path { margin-top: 28px; }
.path-step { position: relative; display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 14px; padding-block: 16px; }
.path-step:not(:last-child)::after {
  content: ""; position: absolute; inset-inline-start: 22px; top: 66px; bottom: -8px; width: 2px;
  background: linear-gradient(var(--gold), rgba(194, 135, 34, .12));
}
.path-num {
  display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%;
  background: var(--navy); color: var(--gold-soft); font-family: var(--font-display); font-weight: 800; font-size: 1.35rem;
}
.path h3 { font-size: 1.2rem; font-weight: 800; color: var(--navy); }
.path p { margin-top: 4px; color: var(--muted); }
.about-free { margin-top: 10px; font-weight: 700; color: var(--navy); }
.disclosure { margin-top: 24px; padding: 22px 24px; border-radius: var(--r-card); background: var(--mist); }
.disclosure h3 { font-weight: 800; color: var(--navy); }
.disclosure p { margin-top: 4px; }
.about-ref { margin-top: 18px; color: var(--muted); }

/* FAQ */
.faq { padding-block: clamp(64px, 8vw, 112px); background: var(--mist); }
.faq-wrap { display: grid; gap: 28px; }
@media (min-width: 900px) { .faq-wrap { grid-template-columns: minmax(0, .75fr) minmax(0, 1.25fr); gap: 80px; } }
.faq h2 { font-family: var(--font-display); font-weight: 700; font-size: clamp(2rem, 1.5rem + 1.8vw, 2.9rem); line-height: 1.1; color: var(--navy); }
.faq-list { display: grid; gap: 12px; }
.faq details { border-radius: var(--r-ctl); background: #fff; }
.faq summary {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 22px;
  font-weight: 800; font-size: 1.12rem; color: var(--navy); cursor: pointer; list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq details p { padding: 0 22px 22px; }
.faq details a { color: var(--navy); font-weight: 700; }
.faq-mark {
  flex: none; width: 32px; height: 32px; border-radius: 50%;
  background:
    linear-gradient(var(--navy), var(--navy)) center / 12px 2px no-repeat,
    linear-gradient(var(--navy), var(--navy)) center / 2px 12px no-repeat,
    var(--mist);
}
.faq details[open] .faq-mark { background: linear-gradient(var(--gold), var(--gold)) center / 12px 2px no-repeat, var(--navy); }

/* Footer */
.site-footer { padding-block: 56px 112px; background: var(--navy); color: #C3CFE4; }
@media (min-width: 1000px) { .site-footer { padding-bottom: 64px; } }
.foot-grid { display: grid; gap: 24px; }
@media (min-width: 900px) { .foot-grid { grid-template-columns: auto minmax(0, 1fr); gap: 60px; align-items: start; } }
.foot-logo { width: 150px; }
.foot-lic { color: #fff; font-weight: 700; }
.foot-links { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 8px; }
.foot-links a { display: inline-flex; align-items: center; min-height: 44px; color: var(--gold-soft); font-weight: 700; text-underline-offset: 3px; }
.foot-disclaimer { max-width: 64ch; margin-top: 14px; font-size: .92rem; line-height: 1.6; }

/* The privacy policy and the accessibility statement */
.doc-header { position: relative; background: var(--navy); }
.doc { max-width: 760px; padding-block: clamp(36px, 5vw, 64px) clamp(56px, 8vw, 96px); }
.doc h1 { font-family: var(--font-display); font-weight: 700; font-size: clamp(2rem, 1.5rem + 2vw, 2.8rem); line-height: 1.15; color: var(--navy); }
.doc h2 { margin-top: 34px; font-family: var(--font-display); font-weight: 700; font-size: clamp(1.3rem, 1.1rem + .8vw, 1.65rem); line-height: 1.25; color: var(--navy); }
.doc p { margin-top: 12px; line-height: 1.8; }
.doc ul { display: grid; gap: 8px; margin-top: 12px; }
.doc li { position: relative; padding-inline-start: 24px; line-height: 1.75; }
.doc li::before { content: ""; position: absolute; inset-inline-start: 2px; top: .7em; width: 8px; height: 8px; background: var(--gold); transform: rotate(45deg); }
.doc a { color: var(--navy); font-weight: 700; text-underline-offset: 3px; }
.doc .draft { margin-top: 20px; padding: 16px 18px; border-radius: var(--r-box); background: var(--mist); font-weight: 700; color: var(--navy); }

/* After the form, and at the top of the working pages: a one-line thank-you on navy, then
   the checklist at a glance with the offer beside it, then the reader. The checklist comes
   first; saving and printing are one quiet line. */
.after-top {
  color: #fff; padding-block: 26px 28px;
  background: radial-gradient(900px 500px at 8% 0%, rgba(29, 70, 132, .55), transparent 60%), var(--navy);
}
.after-top h1, .after-top h2 { font-family: var(--font-display); font-weight: 800; font-size: clamp(1.7rem, 1.3rem + 1.6vw, 2.5rem); line-height: 1.15; text-wrap: balance; }
.after-top h1 + p, .after-top h2 + p { max-width: 60ch; margin-top: 10px; color: #D6DEEC; }
/* The result of saving the link: copied, or the address itself. */
.share-status { max-width: 60ch; margin-top: 12px; font-weight: 700; color: var(--gold-soft); overflow-wrap: anywhere; }

.glance-band { padding-block: 20px 4px; background: var(--mist); }
.glance-grid { display: grid; gap: 20px; align-items: start; }
@media (min-width: 1000px) { .glance-grid { grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: 44px; } }
.glance { padding: 20px 20px 14px; border-radius: var(--r-card); background: #fff; box-shadow: var(--shadow-soft); container-type: inline-size; }
.glance-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 14px; }
.glance-head h2, .glance-head h3 { font-family: var(--font-display); font-weight: 800; font-size: 1.45rem; line-height: 1.2; color: var(--navy); }
.glance-intro { margin-top: 6px; font-size: .98rem; color: var(--muted); }
.glance-list { display: grid; margin-top: 12px; border-top: 2px solid var(--navy); }
.glance-list li { display: grid; grid-template-columns: minmax(0, 1fr) 26px; gap: 12px; align-items: center; padding-block: 11px; border-bottom: 1px solid var(--line); }
.glance-list a { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 1px 10px; color: inherit; text-decoration: none; }
.glance-n { grid-row: span 2; font-family: var(--font-display); font-weight: 800; font-size: 1.3rem; line-height: 1.25; color: var(--gold-ink); }
.glance-t { font-weight: 800; font-size: 1.06rem; line-height: 1.35; color: var(--navy); }
.glance-q { font-size: .95rem; line-height: 1.5; color: var(--muted); }
.glance-list a:hover .glance-t { text-decoration: underline; text-decoration-color: var(--gold); text-underline-offset: 3px; }
/* The parents' list is the fridge page's own, brought up here on screen. */
.glance .gp-glance-list { margin-top: 12px; }
.glance-foot { margin-top: 12px; font-size: .95rem; color: var(--muted); }
/* The padding widens what a thumb can hit to 44px without moving the line (QA, 2026-09-29). */
.glance-foot a { padding-block: 11px; color: var(--navy); font-weight: 700; text-underline-offset: 3px; }
.glance-band .booking { box-shadow: var(--shadow-soft); }
.after-quiet { margin-top: 16px; font-size: .95rem; color: var(--muted); }
/* Links inside a line of text: the padding widens what a thumb can hit without moving the line. */
.after-quiet .linkish, .after-end .linkish { padding-block: 10px; }
.after-quiet .linkish { font-weight: 700; color: var(--navy); }
.after-quiet .share-status { color: var(--navy); }
/* "Not you?" waits at the very end, after the checklist. */
.after .reader-wrap { padding-bottom: 40px; }
.after-end { padding-block: 0 44px; background: var(--mist); font-size: .95rem; color: var(--muted); }
.after-end .wrap { display: block; }

/* The working pages (/checklist, /parents-checklist): a plain navy header, no hero under it. */
.site-header.is-solid { position: relative; background: var(--navy); }
.brand-link { display: inline-flex; }
.booking { padding: 28px; border-radius: var(--r-card); background: #fff; color: var(--ink); box-shadow: 0 26px 60px -30px rgba(0, 0, 0, .6); }
.booking h2, .booking h3 { font-family: var(--font-display); font-weight: 800; font-size: 1.7rem; line-height: 1.15; color: var(--navy); }
.booking p { margin-block: 10px 20px; color: var(--muted); }
/* The calendar is Calendly's, in English, so the card says what waits there, and what to
   do when no time fits. */
.booking .booking-note { margin-block: 14px 0; font-size: .92rem; line-height: 1.55; }
/* Shown only when the form was valid but the lead did not reach the CRM. No WhatsApp message
   will bring the link, so the one gold "save the link" button sits here. */
.after-warn {
  max-width: 60ch; margin-top: 16px; padding: 14px 16px; border-radius: var(--r-ctl);
  background: rgba(231, 204, 147, .14); box-shadow: inset 0 0 0 1px rgba(231, 204, 147, .45);
  color: #fff; font-weight: 700;
}
.after-warn .btn { margin-top: 12px; }

/* serero.co.il. The same world as the checklists, direction A ("המדריך"): base.css and
   page.css load first, and this file adds only what the site has and the landing pages
   don't: the navigation, the portrait hero, the inner pages and the articles. */

/* No paragraph or list item ends on a lone word (the owner's yes, 2026-10-09: 48 such endings on a phone and 18 on a
   computer before, none after); headings keep their own balance. The page's scrollbar takes the brand's navy. */
p, li { text-wrap: pretty; }
html { scrollbar-color: var(--navy-3) var(--mist); }

/* Header, laid over every page's navy band: the brand on the start side; the pages and the
   intro call on the end side. Under 1000px the pages move into a menu, under 700px the call too. */
.nav-header .header-row { gap: 12px; }
.nav { display: none; margin-inline-start: auto; }
.nav ul { display: flex; align-items: center; gap: 2px; }
.nav a {
  display: inline-flex; align-items: center; min-height: 44px; padding-inline: 14px; border-radius: var(--r-pill);
  color: #D6DEEC; font-weight: 700; text-decoration: none; transition: color .2s, background-color .2s;
}
.nav a:hover { color: #fff; background: rgba(255, 255, 255, .07); }
.nav a[aria-current] { color: #fff; box-shadow: inset 0 -2px 0 var(--gold); border-radius: 0; }
.nav-header .header-cta { gap: 8px; align-items: center; min-height: 44px; }
.nav-header .header-cta .icon { width: 18px; height: 18px; color: var(--gold-soft); }

.menu { position: relative; margin-inline-start: auto; }
.menu > summary {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 16px; border-radius: var(--r-pill);
  color: #fff; font-weight: 700; list-style: none; cursor: pointer;
  box-shadow: inset 0 0 0 1.5px rgba(231, 204, 147, .55); transition: background-color .2s;
}
.menu > summary::-webkit-details-marker { display: none; }
.menu > summary .icon { width: 20px; height: 20px; color: var(--gold-soft); }
.menu[open] > summary { background: rgba(255, 255, 255, .08); }
.menu:not([open]) .menu-panel { display: none; }
.menu-panel {
  position: absolute; inset-inline-end: 0; top: calc(100% + 10px); z-index: 30;
  display: grid; min-width: 232px; padding: 8px; border-radius: var(--r-box);
  background: #fff; box-shadow: var(--shadow-lift);
}
.menu-panel a {
  display: flex; align-items: center; gap: 10px; min-height: 48px; padding-inline: 14px; border-radius: var(--r-sm);
  color: var(--navy); font-weight: 700; text-decoration: none;
}
.menu-panel a:hover { background: var(--mist); }
.menu-panel a[aria-current] { background: var(--mist); box-shadow: inset -3px 0 0 var(--gold); }
.menu-panel .icon { width: 20px; height: 20px; color: var(--gold-ink); }
/* The menu leads with the first step: the calendar, then WhatsApp, then the pages. Real
   borders, not inset shadows, so both keep their edge in Windows contrast themes. Wide enough
   for the booking label on one line, "לשיחת היכרות בוואטסאפ" too, while the calendar waits. */
.menu-panel { min-width: min(300px, 100vw - 40px); }
.menu-panel a.menu-book {
  justify-content: center; min-height: 54px; border: 1.5px solid transparent; border-radius: var(--r-ctl);
  background: var(--gold); color: var(--navy); font-weight: 800;
}
.menu-panel a.menu-book:hover { background: var(--gold-hover); }
.menu-panel a.menu-book .icon { color: var(--navy); }
.menu-panel a.menu-wa {
  justify-content: center; margin-top: 8px; border: 1.5px solid var(--edge); border-radius: var(--r-ctl);
}
.menu-panel a.menu-wa:hover { border-color: var(--edge-hover); }
.menu-sep { height: 1px; margin: 10px 6px 6px; background: var(--line); }
/* Windows contrast themes drop the inset shadows that draw these edges and the current-page mark,
   and would leave an icon's own colour on the theme's background. */
@media (forced-colors: active) {
  .menu > summary { border: 2px solid ButtonBorder; }
  .menu-panel { border: 1px solid CanvasText; }
  .nav a[aria-current], .menu-panel a[aria-current] { text-decoration: underline; text-underline-offset: 5px; }
  /* Important, because the icons' own colours are set by more specific rules further down, and SVG keeps an
     author colour in a contrast theme (Chrome's preserve-parent-color). */
  .icon, .area-icon, .loop-mark, .article-art, .stars { color: CanvasText !important; }
  /* The logo's wordmark is white: on a light contrast theme it keeps its own navy plate. */
  .brand, .foot-logo { forced-color-adjust: none; padding: 4px; border-radius: 8px; background: var(--navy); }
}
@media (min-width: 700px) and (max-width: 999px) {
  .nav-header .header-cta { margin-inline-start: auto; }
  .menu { margin-inline-start: 0; }
}
@media (min-width: 1000px) {
  .nav { display: block; }
  .menu { display: none; }
}

/* The second button on navy: a gold hairline, like the header's. */
.btn-line { background: transparent; color: #fff; box-shadow: inset 0 0 0 1.5px rgba(231, 204, 147, .6); }
.btn-line:hover { background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 1.5px var(--gold-soft); }
.btn-line .icon { color: var(--gold-soft); }
.home-hero .btn-line, .page-hero .btn-line, .close .btn-line { min-height: 60px; padding-inline: 26px; font-size: 1.08rem; }
/* On a phone the two hero buttons stack at the same width, on every page that has them. */
@media (max-width: 520px) { .home-hero .hero-actions .btn, .page-hero .hero-actions .btn { width: 100%; } }

.hero-note, .close-phone { margin-top: 18px; color: #C3CFE4; font-size: .98rem; }
.hero-note a, .close-phone a { position: relative; color: #fff; font-weight: 700; text-underline-offset: 4px; text-decoration-color: rgba(231, 204, 147, .55); }
/* The phone number is the main way to call: a thumb-sized hit area around it, without moving the
   text or stretching the focus ring over the line above. */
.hero-note a::after, .close-phone a::after { content: ""; position: absolute; inset: -12px -6px; }
.hero-note a:hover, .close-phone a:hover { text-decoration-color: var(--gold-soft); }
/* The home page's first booking button says what the call is, as the phone bar does: the time and the cost were in
   the note under the buttons, below the fold of a phone's in-app browser (design review, 2026-10-10). WhatsApp and
   the phone became one quiet line under it, so the first screen has one action. */
.btn-book { justify-content: space-between; gap: 18px; min-width: min(100%, 320px); padding-block: 8px; text-align: start; }
.book-text { display: grid; gap: 1px; }
.book-text b { font-size: 1.1rem; font-weight: 800; line-height: 1.25; }
.book-text span { font-size: .9rem; font-weight: 600; line-height: 1.3; }
/* On a phone the quiet line is two lines, WhatsApp and then the phone, 26px apart: wrapped where it happened to break,
   the two links' hit areas overlapped and a tap low on "לכתוב" dialled (design review, 2026-10-10). */
@media (max-width: 519px) { :is(.hero-note, .close-phone) .note-or { display: block; margin-top: 26px; } }

/* A link that leads on: navy words over a gold underline, and an arrow that nudges forward. */
.more-link {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; justify-self: start;
  color: var(--navy); font-weight: 800; text-decoration: none;
  border-bottom: 2px solid rgba(194, 135, 34, .45); transition: border-color .2s;
}
.more-link:hover { border-color: var(--gold); }
.more-link .icon { width: 18px; height: 18px; color: var(--gold-ink); transition: transform .25s var(--ease-out); }
.more-link:hover .icon { transform: translateX(-3px); }
/* The focus ring: the darker gold on every light ground (6.4:1 on white, 5.6:1 on mist, where the brand gold is
   only 3.1:1 and 2.8:1), and the brand gold where the ground is navy, and on the floating phone bar, which
   passes over both. */
:focus-visible { outline-color: var(--gold-ink); }
.nav-header :focus-visible, .home-hero :focus-visible, .page-hero :focus-visible, .steps :focus-visible, .free :focus-visible,
.review-lead :focus-visible, .booking-card :focus-visible, .close :focus-visible, .www-footer :focus-visible,
.calc-navy :focus-visible, .book-bar :focus-visible, .skip:focus-visible { outline-color: var(--gold); }
.menu-panel :focus-visible { outline-color: var(--gold-ink); }
/* Selected text on the same navy grounds: white on a light gold (7:1), where the default, navy on a pale gold, comes
   out navy on dark olive. */
.nav-header ::selection, .home-hero ::selection, .page-hero ::selection, .steps ::selection, .free ::selection,
.review-lead ::selection, .booking-card ::selection, .close ::selection, .www-footer ::selection,
.calc-navy ::selection { background: rgba(231, 204, 147, .35); color: #fff; }
/* The gold lines behind a hero can pass under the ring of a focused button; a navy halo on both sides of the
   ring keeps it clear of them. The buttons keep their own shadow and hairline. */
.home-hero .btn:focus-visible, .page-hero .btn:focus-visible { box-shadow: 0 0 0 9px var(--navy); }
.home-hero .btn-hero:focus-visible, .page-hero .btn-hero:focus-visible { box-shadow: 0 0 0 9px var(--navy), 0 14px 30px -14px rgba(1, 10, 26, .75); }
.home-hero .btn-line:focus-visible, .page-hero .btn-line:focus-visible { box-shadow: inset 0 0 0 1.5px rgba(231, 204, 147, .6), 0 0 0 9px var(--navy); }

/* ---------- Home ---------- */

/* The sections below the first screen are laid out only as they come near it, so a mid-range phone paints the
   first screen without first shaping the whole page's Hebrew text (about 0.4 s sooner, measured). Scroll
   anchoring stays on for the site (base.css turns it off for the landing page's form), so a section that takes
   its real height above the reader never moves the text in view. */
html { overflow-anchor: auto; }
.home-hero ~ section:not(.close) { content-visibility: auto; contain-intrinsic-size: auto 1300px; }
@media (min-width: 760px) { .home-hero ~ section:not(.close) { contain-intrinsic-size: auto 600px; } }

/* Hero: the headline and the three ways to reach him on the start side; the portrait on the
   end side, standing on the hero's bottom edge inside a thin gold arc, as in the brand photo.
   On a phone the portrait opens the hero instead (the phone block after the arcs). */
.home-hero { padding-block: clamp(112px, 10vw, 148px) 0; }
/* Its lines run 40px past its foot: clipped, not hidden, so a jump to something inside it (find in page, a script's
   scrollIntoView) can never scroll the hero itself and leave its words 40px high (QA, 2026-10-10). */
.home-hero { overflow: clip; }
.home-hero .hero-lines { bottom: -40px; }
.home-hero-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 30px; }
@media (min-width: 1000px) {
  .home-hero-grid {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
    column-gap: clamp(40px, 5vw, 88px); align-items: end;
  }
  .home-hero-copy { align-self: center; padding-bottom: clamp(64px, 7vw, 112px); }
}
.home-h1 {
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(2.55rem, 1.3rem + 4.4vw, 5.1rem); line-height: 1.03; text-wrap: balance;
}
.home-h1 em { font-style: normal; color: var(--gold-soft); }
/* The line breaks only between its three phrases: tomorrow, the decision, today. Each phrase
   wraps inside itself only if it cannot fit a line at all (a 320px phone with enlarged text
   spacing), so the headline never runs off the screen. */
.h1-phrase { display: inline-block; max-width: 100%; }
.home-id {
  margin-top: 24px;
  color: #C3CFE4; font-size: clamp(1rem, .96rem + .2vw, 1.12rem); font-weight: 600; line-height: 1.45;
}
.home-id strong { color: #fff; font-weight: 800; }
.home-hero .hero-sub { max-width: 50ch; margin-top: 16px; }
.home-hero .hero-actions { margin-top: 30px; }

.portrait { position: relative; justify-self: center; width: min(78vw, 380px); margin: 6px 0 0; }
@media (min-width: 1000px) { .portrait { width: min(36vw, 470px); margin: 0; } }
/* A tablet (760-999px) gets the computer's hero at a smaller size: the portrait beside the words, and the first
   screen reaches the three areas. */
@media (min-width: 760px) and (max-width: 999px) {
  .home-hero-grid { grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); column-gap: 28px; align-items: end; }
  .home-hero-copy { align-self: center; padding-bottom: 64px; }
  .home-h1 { font-size: clamp(2.3rem, .9rem + 3.4vw, 3rem); }
  .home-hero .portrait { width: min(36vw, 340px); margin: 0; }
}
/* The photo was cropped at his left shoulder; the fade keeps that straight edge from showing. */
.portrait img {
  position: relative; z-index: 1; width: 100%; filter: drop-shadow(0 26px 34px rgba(0, 6, 20, .38));
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 16%);
  mask-image: linear-gradient(to right, transparent 0, #000 16%);
}
.portrait-arc { position: absolute; z-index: 0; left: -9%; top: -4%; width: 118%; height: auto; overflow: visible; }
.arc-glow { fill: url(#arc-glow); }
.arc-line { fill: none; stroke: var(--gold); stroke-width: 1.5; stroke-linecap: round; stroke-dasharray: 60 100; }
.arc-line-2 { stroke: var(--gold-soft); stroke-width: 1; opacity: .5; stroke-dasharray: 32 100; }
/* On a phone the portrait opens the hero (the owner's option A of two previews, 2026-10-09): his face and the
   headline are the first thing seen, the headline laid over the portrait's lower edge, which fades into the navy.
   It used to close the hero, a whole screen down, with a small round photo by the name standing in for it. */
@media (max-width: 759px) {
  .home-hero { padding-block: 92px 46px; }
  .home-hero-grid { gap: 0; }
  .home-hero .portrait { order: -1; justify-self: end; width: min(56vw, 220px); margin: 0 0 -92px; }
  .home-hero .portrait img {
    -webkit-mask-image: linear-gradient(to bottom, #000 52%, transparent 90%), linear-gradient(to right, transparent 0, #000 16%);
    -webkit-mask-composite: source-in;
    mask-image: linear-gradient(to bottom, #000 52%, transparent 90%), linear-gradient(to right, transparent 0, #000 16%);
    mask-composite: intersect;
  }
  .home-hero-copy { position: relative; z-index: 2; }
  .home-id { margin-top: 18px; }
}
/* A short phone screen (an in-app browser, or a phone browser showing its bars, about 664px) would end above the
   booking button: there the portrait comes down a size, so the button shows whole in the first screen (QA,
   2026-10-09; at 390x664 it moved from 632-692 to inside the screen). */
@media (max-width: 759px) and (max-height: 760px) {
  .home-hero .portrait { width: min(46vw, 180px); margin-bottom: -84px; }
}
@media (max-width: 759px) and (max-height: 650px) { .home-hero .portrait { width: min(40vw, 150px); } }
/* A contrast theme lays a solid plate behind every line of text, which would cut a band out of the photo: there the
   headline starts under the portrait instead (QA, 2026-10-09). */
@media (max-width: 759px) and (forced-colors: active) { .home-hero .portrait { margin-bottom: 0; } }

@media (prefers-reduced-motion: no-preference) {
  .home-hero-copy > *, .page-hero-copy > * { animation: rise .9s var(--ease-out) both; }
  .home-hero-copy > :nth-child(2), .page-hero-copy > :nth-child(2) { animation-delay: .08s; }
  .home-hero-copy > :nth-child(3), .page-hero-copy > :nth-child(3) { animation-delay: .16s; }
  .home-hero-copy > :nth-child(4), .page-hero-copy > :nth-child(4) { animation-delay: .24s; }
  .home-hero-copy > :nth-child(5), .page-hero-copy > :nth-child(5) { animation-delay: .32s; }
  .portrait img { animation: rise 1.2s var(--ease-out) .12s both; }
  .arc-line { animation: arc-draw 1.9s var(--ease-out) .35s both; }
  .arc-line-2 { animation: arc-draw-2 1.9s var(--ease-out) .6s both; }
  /* On the home page the face comes first and the words just after it (design review, 2026-10-10: the headline was
     sharp while the portrait, on the slower settle spring, was still a ghost): the portrait starts at once on the
     reveal spring, and each line of the copy .15s later than on the other pages. */
  .home-hero .portrait img { animation-delay: 0s; }
  .m-on .home-hero .portrait img { animation-duration: var(--dur-reveal); animation-timing-function: var(--spring-reveal); }
  .home-hero .home-hero-copy > :nth-child(1) { animation-delay: .15s; }
  .home-hero .home-hero-copy > :nth-child(2) { animation-delay: .23s; }
  .home-hero .home-hero-copy > :nth-child(3) { animation-delay: .31s; }
  .home-hero .home-hero-copy > :nth-child(4) { animation-delay: .39s; }
  .home-hero .home-hero-copy > :nth-child(5) { animation-delay: .47s; }
}
@keyframes arc-draw { from { stroke-dashoffset: 60; } }
@keyframes arc-draw-2 { from { stroke-dashoffset: 32; } }

/* Proof right after the first screen (design review, 2026-10-10: the first review came at screen 5.75 of 12.5 on a
   phone): the long review's first sentence, word for word, under the reviews' gold quotation mark, with its stars and
   name. The whole review still leads the reviews further down. On mist, between the navy hero and the white areas. */
.home-proof { padding-block: clamp(44px, 5vw, 64px) clamp(36px, 4vw, 52px); background: var(--mist); }
.proof-quote { position: relative; max-width: 860px; margin: 0; padding-top: 26px; }
.proof-quote .review-mark {
  position: absolute; top: 0; inset-inline-start: 0; width: clamp(40px, 4vw, 52px); height: auto;
  fill: var(--gold); transform: scaleX(-1); filter: none;
}
.proof-quote blockquote { padding-top: 26px; }
.proof-quote blockquote p {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(1.4rem, 1.05rem + 1.1vw, 1.95rem); line-height: 1.45; color: var(--navy); text-wrap: pretty;
}
.proof-quote figcaption { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin-top: 16px; }
.proof-quote .stars { margin: 0; }
.proof-quote .rv-who { font-weight: 800; color: var(--navy); }
.proof-quote .rv-src { font-weight: 600; color: var(--muted); white-space: nowrap; }
.proof-quote .rv-src::before { content: "· "; }

/* Three areas, one portfolio: a ledger under one navy rule, not cards. Rows on a phone, three columns on a tablet,
   rows beside the ring on a computer. */
.areas-list { display: grid; border-top: 2px solid var(--navy); }
.area { display: grid; align-content: start; gap: 12px; padding-block: 28px 30px; border-bottom: 1px solid var(--line); }
.area h3 {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(1.7rem, 1.35rem + 1.1vw, 2.2rem); line-height: 1.12; color: var(--navy);
}
.area .rule { width: 84px; margin-block: 2px 4px; }
/* One icon per area, in the thin gold line of the crib mobile; the symbols are in partials/icons.html. */
.area-icon { width: 52px; height: 52px; color: var(--gold-ink); }
.area p { max-width: 42ch; color: var(--muted); }
@media (min-width: 760px) and (max-width: 999px) {
  .areas-list { grid-template-columns: repeat(3, minmax(0, 1fr)); padding-top: 34px; }
  .area { padding-block: 0; padding-inline: clamp(24px, 3vw, 40px); border-bottom: 0; border-inline-start: 1px solid var(--line); }
  .area:first-child { padding-inline-start: 0; border-inline-start: 0; }
  .area:last-child { padding-inline-end: 0; }
  /* The three "עוד על..." links sit on one line, however long each sentence above them. */
  .area { display: flex; flex-direction: column; }
  .area .more-link { margin-top: auto; align-self: flex-start; }
}
/* In three tablet columns the area names come down a size, so each stays on one line. */
@media (min-width: 760px) and (max-width: 899px) { .area h3 { font-size: 1.6rem; } }
/* The headline drawn (the owner's option B of two previews, 2026-10-09): one gold ring on a navy disc, in three arcs,
   each area's drawing on its own arc, "תיק אחד" in the middle. It keeps its colours in a contrast theme, as a picture.
   On a computer it stands beside the three areas, now rows; on phones and tablets, since 2026-10-10 (his option A of
   two previews, over placing it after the areas), it sits centred between the headline it draws and the areas. */
.areas-ring { display: block; width: min(66vw, 270px); height: auto; margin: 28px auto 6px; overflow: visible; forced-color-adjust: none; }
@media (min-width: 760px) and (max-width: 999px) { .areas-ring { width: 300px; margin-block: 34px 0; } }
.ring-disc { fill: url(#ring-navy); }
.ring-inner { fill: none; stroke: var(--gold-soft); stroke-opacity: .4; stroke-width: 1; stroke-dasharray: 2 4; }
.ring-arc { fill: none; stroke: var(--gold); stroke-width: 2; stroke-linecap: round; }
.ring-node circle { fill: var(--navy-2); stroke: var(--gold); stroke-width: 1.5; }
.ring-node use { color: var(--gold-soft); }
.ring-label { fill: var(--gold-soft); font-family: var(--font-display); font-weight: 800; font-size: 40px; }
/* It draws itself once when it is almost whole on the screen (the owner's yes to an animated preview, 2026-10-10;
   site.js adds .mc-wait, then .mc-play, as on the charts): the disc comes up, the three areas pop onto it in the list's
   order (clockwise from the top), the arcs draw between them and close the circle (pathLength 1 in index.html), then
   the dashed inner ring and "תיק אחד". Under two seconds; reduced motion, no script and print show it at once. The
   disc is opaque within its first eighth of a second, so the navy never shows washed out on the white (design
   review, 2026-10-10). */
@media screen and (prefers-reduced-motion: no-preference) {
  :is(.mc-wait, .mc-play) :is(.ring-disc, .ring-node) { transform-box: fill-box; transform-origin: center; }
  .mc-wait .ring-disc { opacity: 0; transform: scale(.94); }
  .mc-play .ring-disc { animation: ring-disc .5s ease-out both; }
  .mc-wait .ring-node { opacity: 0; transform: scale(.6); }
  .mc-play .ring-node { animation: ring-pop .5s cubic-bezier(.3, 1.35, .5, 1) both; }
  .mc-play .ring-node:nth-of-type(1) { animation-delay: .15s; }
  .mc-play .ring-node:nth-of-type(2) { animation-delay: .35s; }
  .mc-play .ring-node:nth-of-type(3) { animation-delay: .55s; }
  :is(.mc-wait, .mc-play) .ring-arc { stroke-dasharray: 1 1; }
  .mc-wait .ring-arc { stroke-dashoffset: 1; }
  .mc-play .ring-arc { animation: mc-draw .4s cubic-bezier(.45, .05, .25, 1) both; }
  .mc-play .ring-arc:nth-of-type(1) { animation-delay: .6s; }
  .mc-play .ring-arc:nth-of-type(2) { animation-delay: .85s; }
  .mc-play .ring-arc:nth-of-type(3) { animation-delay: 1.1s; }
  .mc-wait :is(.ring-inner, .ring-label) { opacity: 0; }
  .mc-play .ring-inner { animation: mc-in .6s ease-out .9s both; }
  .mc-play .ring-label { animation: mc-in .45s ease-out 1.3s both; }
}
@keyframes ring-disc { from { opacity: 0; transform: scale(.94); } 25% { opacity: 1; } to { opacity: 1; transform: none; } }
@keyframes ring-pop { from { opacity: 0; transform: scale(.6); } to { opacity: 1; transform: none; } }
@media (min-width: 1000px) {
  .areas .wrap { display: grid; grid-template-columns: minmax(0, 1fr) clamp(340px, 30vw, 420px); column-gap: clamp(56px, 7vw, 120px); align-items: center; }
  .areas .section-head, .areas-list { grid-column: 1; }
  .area { grid-template-columns: 52px minmax(0, 1fr) auto; column-gap: 22px; row-gap: 6px; align-items: center; padding-block: 26px; }
  .area .area-icon { grid-row: 1 / span 2; align-self: start; }
  .area h3 { grid-column: 2; font-size: clamp(1.6rem, 1.3rem + .8vw, 2rem); }
  .area .rule { display: none; }
  .area p { grid-column: 2; max-width: 54ch; }
  .area .more-link { grid-column: 3; grid-row: 1 / span 2; }
  .areas-ring { grid-column: 2; grid-row: 2; align-self: center; width: 100%; margin: 0; }
}
/* On a phone the three areas are rows, not three tall panels: the icon, the name and an arrow on one line, the
   sentence under it, and the whole row opens the area on Services (the link keeps its words for screen readers). */
@media (max-width: 759px) {
  .area {
    position: relative; grid-template-columns: 40px minmax(0, 1fr) 44px; column-gap: 14px; row-gap: 2px;
    align-items: center; padding-block: 18px 20px;
  }
  .area .area-icon { width: 40px; height: 40px; }
  .area h3 { font-size: 1.4rem; }
  .area .rule { display: none; }
  .area p { grid-column: 2 / -1; max-width: none; font-size: 1rem; line-height: 1.6; }
  .area .more-link {
    grid-row: 1; grid-column: 3; justify-self: end; width: 44px; min-height: 44px; justify-content: center;
    border: 0; font-size: 0;
  }
  .area .more-link .icon { width: 20px; height: 20px; }
  .area .more-link::after { content: ""; position: absolute; inset: 0; }
}

/* How it works, as a journey (the owner's choice B of two previews, 2026-10-10): the section on navy, the four steps
   as stations on one gold route, each with its own drawn icon (sprite s-*) and its number on a gold badge. The route
   does not stop at step 4. In a column (under 1100px) it runs down the start side into the yearly meeting's mark;
   with the steps in a row it runs past the last one, turns down at the left, comes back along the top of the yearly
   meeting and drops into its mark. Then what is free, with its own booking button on a computer. */
.steps {
  --mark: 56px; --pad: 16px; --loop-gap: clamp(40px, 5vw, 60px); --loop-pad: clamp(28px, 3vw, 40px);
  color: #fff; -webkit-print-color-adjust: exact; print-color-adjust: exact;
  background: radial-gradient(1000px 600px at 92% 0%, rgba(29, 70, 132, .5), transparent 60%), var(--navy);
}
.steps .section-head h2 { color: #fff; }

/* The logo's Y mark as a faint watermark, in two places only: behind the steps and the referral line. */
.has-mark { position: relative; overflow: hidden; isolation: isolate; }
.has-mark::before {
  content: ""; position: absolute; z-index: -1; aspect-ratio: 580 / 720; pointer-events: none;
  background: var(--navy); opacity: .035;
  -webkit-mask: url(/v/mark-mask.db11b68cf2.webp) center / contain no-repeat;
  mask: url(/v/mark-mask.db11b68cf2.webp) center / contain no-repeat;
}
.steps.has-mark::before { height: min(88%, 620px); left: -3%; top: 50%; transform: translateY(-50%); background: #fff; opacity: .04; }
.referral.has-mark::before { height: 88%; left: 50%; top: 50%; transform: translate(-50%, -50%); opacity: .045; }
@media (max-width: 699px) { .steps.has-mark::before { height: 300px; left: -70px; top: 36px; transform: none; } }
@media (max-width: 459px) { .steps.has-mark::before { left: -120px; } }
@media (forced-colors: active) { .has-mark::before { display: none; } }
.steps-list { position: relative; display: grid; }
.step {
  position: relative; display: grid; grid-template-columns: calc(var(--mark) + 10px) minmax(0, 1fr); column-gap: 14px;
  padding-block: var(--pad);
}
.step-num {
  position: relative; grid-row: span 2; display: grid; place-items: center; width: var(--mark); height: var(--mark);
  border-radius: 50%; background: var(--navy-2); color: var(--gold-soft);
  box-shadow: inset 0 0 0 1.5px var(--gold), 0 0 0 6px rgba(194, 135, 34, .12);
}
.step-icon { width: 30px; height: 30px; }
.step-num b {
  position: absolute; top: -6px; inset-inline-start: -6px; display: grid; place-items: center; width: 24px; height: 24px;
  border-radius: 50%; background: var(--gold); color: var(--navy); box-shadow: 0 0 0 3px var(--navy);
  font-family: var(--font-display); font-weight: 800; font-size: .8rem; line-height: 1;
}
/* The steps' titles were 1.22rem over 17px text, barely a step up; on a phone the home page's subheadings now come in
   three sizes: 25.6px (the yearly meeting, the checklists), 22.4px (the areas, the articles), 20.8px (the steps). */
.step h3 { font-weight: 800; font-size: 1.3rem; line-height: 1.35; color: #fff; text-wrap: balance; }
.step p { max-width: 60ch; margin-top: 4px; color: #C3CFE4; }
/* The route: from each station down to the next, and from the last one on into the yearly meeting's mark. */
.step::after {
  content: ""; position: absolute; inset-inline-start: calc(var(--mark) / 2 - 1px); width: 2px;
  top: calc(var(--pad) + var(--mark) + 6px); bottom: calc(6px - var(--pad)); background: var(--gold);
}
.step:last-child::after { bottom: calc(-1 * (var(--loop-gap) + var(--loop-pad) + var(--mark) / 2)); }
@media (min-width: 1100px) {
  .steps { --mark: 64px; }
  /* The row keeps a 40px lane at its left end for the route to turn down in, inside the page's margins at any width. */
  .steps-list { grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: clamp(32px, 4vw, 64px); padding-inline-end: 40px; }
  .step { grid-template-columns: minmax(0, 1fr); align-content: start; padding-block: 0; }
  .step-num { grid-row: auto; margin-bottom: 22px; }
  .step-icon { width: 34px; height: 34px; }
  .step::after {
    inset-inline-start: calc(var(--mark) + 6px); inset-inline-end: calc(6px - clamp(32px, 4vw, 64px));
    top: calc(var(--mark) / 2 - 1px); bottom: auto; width: auto; height: 2px;
  }
  /* Past the last station to the left edge, down, and back along the top of the yearly meeting (.service-loop). */
  .step:last-child::after { inset-inline-end: -12px; bottom: auto; }
  .steps-list::after {
    content: ""; position: absolute; inset-inline-end: 0; width: 34px;
    top: calc(var(--mark) / 2 - 1px); bottom: calc(-1 * var(--loop-gap) - 2px);
    border: 2px solid var(--gold); border-inline-start: 0; border-start-end-radius: 26px; border-end-end-radius: 26px;
  }
}
.steps-foot {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 22px 40px;
  margin-top: clamp(40px, 5vw, 60px); padding-top: clamp(28px, 3vw, 36px); border-top: 1px solid rgba(255, 255, 255, .2);
}
.steps-free {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(1.55rem, 1.25rem + 1vw, 2.05rem); line-height: 1.2; color: #fff; text-wrap: balance;
}
/* On a computer there is no phone bar, and after the hero the next button was the closing band's, some 4,000px
   down: the promise that the first steps cost nothing now carries its own. Below 1000px the phone bar does that. */
.steps-foot .btn { display: none; }
@media (min-width: 1000px) { .steps-foot .btn { display: inline-flex; } }
/* Without the button (under 1000px) the line follows the last list, so its own rule would double that list's. */
@media (max-width: 999px) { .steps-foot { padding-top: 0; border-top: 0; } }
/* After step 4 the work comes back around: the yearly service meeting, what it checks, and what
   comes up between meetings. The offer's differentiator, set as the section's second peak; the route ends in its mark. */
.service-loop { position: relative; margin-top: var(--loop-gap); padding-top: var(--loop-pad); }
.loop-head { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; column-gap: 16px; }
.loop-mark {
  position: relative; z-index: 1; width: var(--mark); height: var(--mark); padding: 8px; border-radius: 50%;
  color: var(--gold-soft); background: var(--navy-2);
  box-shadow: inset 0 0 0 1.5px var(--gold), 0 0 0 6px rgba(194, 135, 34, .12);
}
@media (min-width: 1100px) {
  .service-loop::after {
    content: ""; position: absolute; top: 0; height: 2px; inset-inline-end: 28px;
    inset-inline-start: calc(var(--mark) / 2 + 26px); background: var(--gold);
  }
  .service-loop::before {
    content: ""; position: absolute; top: 0; height: var(--loop-pad); width: 28px; inset-inline-start: calc(var(--mark) / 2 - 1px);
    border-top: 2px solid var(--gold); border-inline-start: 2px solid var(--gold); border-start-start-radius: 26px;
  }
}
.loop-head h3 {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(1.6rem, 1.25rem + 1.2vw, 2.2rem); line-height: 1.15; color: #fff; text-wrap: balance;
}
.loop-sub { margin-top: 6px; color: #C3CFE4; font-size: 1.06rem; }
.loop-grid { display: grid; gap: 28px; margin-top: clamp(24px, 3vw, 36px); }
@media (min-width: 760px) { .loop-grid { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); column-gap: clamp(32px, 4vw, 64px); } }
.loop-grid h4 { font-weight: 800; font-size: 1.12rem; color: #fff; }
.loop-grid h4 + p { margin-top: 4px; color: #C3CFE4; }
.loop-list { margin-top: 12px; border-top: 1px solid rgba(231, 204, 147, .4); }
.loop-list li { position: relative; padding-block: 11px; padding-inline-start: 24px; border-bottom: 1px solid rgba(255, 255, 255, .13); line-height: 1.55; }
.loop-list li::before {
  content: ""; position: absolute; inset-inline-start: 3px; top: calc(11px + .62em);
  width: 8px; height: 8px; background: var(--gold); transform: rotate(45deg);
}
/* The five things that come up between meetings are short: two to a row, so the list stays compact; the fifth takes
   the whole row, so no cell stands empty under a rule of its own (design review, 2026-10-10). */
.loop-triggers { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 24px; }
.loop-triggers li:last-child:nth-child(odd) { grid-column: 1 / -1; }
/* On a phone the steps sit a little closer. The five between-meeting cases keep the list's look: set as
   pill tags they read as buttons that did nothing when tapped (QA, 2026-09-25). */
@media (max-width: 759px) {
  .loop-triggers { column-gap: 16px; }
  .loop-list li { padding-block: 8px; }
  .steps { --pad: 12px; }
}
/* A contrast theme drops backgrounds and shadows: the route keeps the theme's text colour, the stations an outline. */
@media (forced-colors: active) {
  .step::after, .service-loop::after { forced-color-adjust: none; background: CanvasText; }
  .step-num, .loop-mark, .step-num b { outline: 1.5px solid; outline-offset: -1.5px; }
  .loop-mark { background: Canvas; color: CanvasText; box-shadow: none; }
}
/* In the column the route draws itself down as the reader comes to it, each station lights up as the route reaches
   it, and the yearly meeting's mark turns once when its turn comes (design review, 2026-10-10: one gold line from
   the arc around the portrait to the close). site.js adds the gold run (.route-run, one element from the first
   station to the yearly meeting's mark, on its own layer) and stretches it with the scroll, and sets .is-live and
   each station's .is-lit; the drawn segments stay underneath as a faint track. Only in the column and with motion
   on; otherwise the route is simply whole, and so is a computer's row. A station not reached yet keeps its shape at
   about half strength, and changes state at once. One element stretched, not a value on every station, and no fades
   on the stations: both made a slow phone repaint the section on every frame of the scroll (28 slow frames to 2). */
.route-run { display: none; }
@media screen and (prefers-reduced-motion: no-preference) and (max-width: 1099px) {
  .steps.is-live .wrap { position: relative; }
  .steps.is-live .route-run {
    display: block; position: absolute; inset-inline-start: calc(var(--mark) / 2 - 1px); width: 2px;
    background: var(--gold); transform-origin: top; will-change: transform;
  }
  .steps.is-live .step::after { opacity: .22; }
  .steps.is-live :is(.step:not(.is-lit) .step-num, .service-loop:not(.is-lit) .loop-mark) {
    color: rgba(231, 204, 147, .62); box-shadow: inset 0 0 0 1.5px rgba(194, 135, 34, .5), 0 0 0 6px rgba(194, 135, 34, 0);
  }
  .steps.is-live .step:not(.is-lit) .step-num b { transform: scale(.75); opacity: .65; }
  .steps.is-live .service-loop.is-lit .loop-mark { animation: m-turn 1.2s ease-in-out; }
}

/* Step 3 shows what comes out of the meeting (the owner's yes after a preview, 2026-10-11): a small white sheet with the
   report's name and its first chapters, and the way to /דוח-ניתוח-התיק, where the whole report is told chapter by chapter
   and the work around it step by step. No client's data, no example numbers (the owner: the service, not sample
   portfolios). In the column it keeps to the step's text column. */
.report-peek { display: grid; justify-items: start; gap: 12px; margin-top: 16px; color: inherit; text-decoration: none; }
@media (max-width: 1099px) { .step > .report-peek { grid-column: 2; } }
.peek-sheet {
  display: grid; gap: 10px; width: 100%; max-width: 340px; padding: 14px 14px 16px; border-radius: 6px;
  background: #fff; color: var(--ink); box-shadow: 0 18px 30px -18px rgba(0, 0, 0, .6);
  transition: transform .3s var(--ease-out);
}
.peek-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-bottom: 8px; border-bottom: 1px solid var(--line); }
.peek-brand { display: flex; align-items: center; gap: 6px; font-family: var(--font-display); font-weight: 800; font-size: .9rem; color: var(--navy); }
.peek-brand img { width: 18px; height: auto; }
.peek-stamp { padding: 2px 7px; border: 1px dashed var(--gold-ink); border-radius: 4px; color: var(--gold-ink); font-weight: 800; font-size: .68rem; }
.peek-name { font-family: var(--font-display); font-weight: 800; font-size: 1.05rem; color: var(--navy); }
.peek-lines { display: grid; gap: 6px; }
.peek-lines > span { display: flex; align-items: center; gap: 7px; padding-bottom: 6px; border-bottom: 1px solid var(--line); font-weight: 700; font-size: .8rem; color: var(--navy); }
.peek-lines > span:last-child { padding-bottom: 0; border-bottom: 0; opacity: .5; }
.peek-lines b { padding: 1px 5px; border-radius: 4px; background: var(--navy); color: var(--gold-soft); font-size: .62rem; }
.peek-go { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; color: var(--gold-soft); font-weight: 800; }
.peek-go .icon { width: 18px; height: 18px; transition: transform .25s var(--ease-out); }
.report-peek:hover .peek-sheet { transform: translateY(-2px); }
.report-peek:hover .peek-go .icon { transform: translateX(-4px); }
@media (forced-colors: active) { .peek-sheet { border: 1px solid CanvasText; } .peek-lines b { outline: 1px solid; } }

/* Reviews: one long review set large on navy, the three short ones beside it. */
.reviews-head {
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 10px 28px;
  margin-bottom: clamp(32px, 4vw, 52px);
}
.reviews-head h2 {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(2.1rem, 1.5rem + 2.2vw, 3.3rem); line-height: 1.08; color: var(--navy);
}
.reviews-grid { display: grid; column-gap: 56px; }
.review { margin: 0; padding-block: 24px; border-top: 1px solid var(--line); }
.review blockquote p { font-size: 1.1rem; line-height: 1.65; color: var(--ink); }
.review figcaption { margin-top: 12px; font-weight: 800; color: var(--navy); }
.review figcaption span { font-weight: 600; color: var(--muted); }
.review-lead {
  margin-bottom: 28px; padding: clamp(28px, 4vw, 48px); border-top: 0; border-radius: var(--r-card); color: #fff;
  background: radial-gradient(700px 420px at 100% 0%, rgba(29, 70, 132, .6), transparent 60%), var(--navy);
  box-shadow: var(--shadow-lift);
}
.review-lead blockquote p {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(1.45rem, 1.1rem + 1.25vw, 2.05rem); line-height: 1.42; color: #fff;
}
.review-lead figcaption { margin-top: 22px; color: var(--gold-soft); }
.review-lead figcaption span { color: #C3CFE4; }
/* A large gold quotation mark over the long review's top edge, and by every name the round initial Google itself
   shows for a reviewer without a photo (the owner's yes after a preview, 2026-10-09). The initial is for the eye
   only; a screen reader reads the name as before. */
.review-lead { position: relative; }
.review-mark {
  position: absolute; top: -24px; inset-inline-start: clamp(24px, 4vw, 44px); width: clamp(52px, 5vw, 68px); height: auto;
  fill: var(--gold); transform: scaleX(-1); filter: drop-shadow(0 8px 14px rgba(2, 27, 65, .35));
}
.review-lead .stars { margin-top: 18px; }
.review figcaption { display: flex; align-items: center; gap: 12px; }
.review .rv-initial {
  display: grid; place-items: center; flex: none; width: 38px; height: 38px; border-radius: 50%;
  background: var(--navy); color: var(--gold-soft); font-weight: 800; font-size: 1.25rem; line-height: 1;
}
.review-lead .rv-initial { background: var(--gold); color: var(--navy); }
.review figcaption .rv-who { min-width: 0; font-weight: 800; color: inherit; }
.review figcaption .rv-src { white-space: nowrap; }
.review figcaption .rv-src::before { content: "· "; }
/* On a phone the source goes under the name, without the dot, so no line starts with one (QA, 2026-10-09); and the
   quotation mark keeps clear of the link above the long review. */
@media (max-width: 759px) {
  .review figcaption .rv-src { display: block; }
  .review figcaption .rv-src::before { content: none; }
  .reviews-head { margin-bottom: 56px; }
}
@media (forced-colors: active) { .review .rv-initial { border: 1px solid CanvasText; } .review-mark { fill: CanvasText; } }
.stars { display: flex; gap: 3px; margin-bottom: 14px; color: var(--gold); }
.stars svg { width: 18px; height: 18px; fill: currentColor; }
@media (min-width: 760px) {
  .reviews-grid { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); }
  .review-lead { grid-row: span 3; align-self: start; margin-bottom: 0; }
  .review-lead + .review { padding-top: 0; border-top: 0; }
}

/* The two free checklists, on navy: the booklet of the 7 checks, and the crib mobile of the parents' page. */
.free {
  position: relative; overflow: hidden; overflow: clip; color: #fff;
  background: radial-gradient(1000px 600px at 92% 0%, rgba(29, 70, 132, .5), transparent 60%), var(--navy);
}
.free .section-head h2 { color: #fff; }
/* What happens after the tap is said once, for both checklists (design review, 2026-10-10: it was printed in each). */
.free .section-head p { color: #C3CFE4; }
.free-list { display: grid; gap: 22px; }
@media (min-width: 760px) { .free-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; } }
.free-link {
  display: grid; gap: 22px; height: 100%; padding: clamp(22px, 3vw, 34px);
  border-radius: var(--r-card); color: inherit; text-decoration: none;
  background: rgba(255, 255, 255, .035); box-shadow: inset 0 0 0 1px rgba(231, 204, 147, .26);
  transition: background-color .25s, box-shadow .25s;
}
.free-link:hover { background: rgba(255, 255, 255, .065); box-shadow: inset 0 0 0 1px rgba(231, 204, 147, .6); }
/* Side by side the two pictures share one height, so the titles line up; stacked, each keeps its own. */
.free-art { display: grid; place-items: center; }
@media (min-width: 760px) { .free-art { height: clamp(200px, 19vw, 240px); } }
.free-book {
  position: relative; width: clamp(138px, 12vw, 166px); aspect-ratio: 210 / 297; container-type: inline-size;
  transform: rotate(-3deg); filter: drop-shadow(0 22px 24px rgba(0, 6, 20, .5));
  transition: transform .4s var(--ease-out);
}
.free-link:hover .free-book { transform: rotate(-1deg) translateY(-4px); }
.free-mobile { display: block; width: auto; height: clamp(176px, 16vw, 212px); overflow: visible; }
.free-text h3 { font-family: var(--font-display); font-weight: 800; font-size: clamp(1.6rem, 1.35rem + .8vw, 2rem); line-height: 1.15; }
.free-text p { margin-top: 6px; color: #D6DEEC; }
/* Said before the tap, not after it: the checklist asks for a name and a phone. */
.free-text .free-note { margin-top: 10px; font-size: .95rem; color: #C3CFE4; }
.free-go { display: inline-flex; align-items: center; gap: 8px; margin-top: 14px; color: var(--gold-soft); font-weight: 800; }
.free-go .icon { width: 18px; height: 18px; transition: transform .25s var(--ease-out); }
.free-link:hover .free-go .icon { transform: translateX(-4px); }
/* The crib mobile, drawn as on the parents' page. */
.p-mobile-hook { fill: none; stroke: var(--gold-soft); stroke-width: 2; }
.p-mobile-cord { fill: none; stroke: rgba(231, 204, 147, .55); stroke-width: 1.2; }
.p-mobile-bar { fill: none; stroke: var(--gold); stroke-width: 3; stroke-linecap: round; }
.p-mobile-shape { fill: none; stroke: var(--gold-soft); stroke-width: 2.2; stroke-linejoin: round; stroke-linecap: round; }
.p-mobile-coin { fill: rgba(194, 135, 34, .2); }
.p-mobile-sign { fill: var(--gold-soft); font-family: var(--font-text); font-weight: 700; font-size: 17px; }

/* Articles: a plain index of titles under one navy rule. */
.article-list { display: grid; border-top: 2px solid var(--navy); }
.article-list a { display: grid; gap: 6px; padding-block: 24px; border-bottom: 1px solid var(--line); color: inherit; text-decoration: none; }
@media (min-width: 900px) { .article-list a { padding-block: 28px; } }
/* The titles are h3 under the home page's heading and h2 on the articles page (/articles). */
.article-list :is(h2, h3) {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(1.4rem, 1.2rem + .6vw, 1.7rem); line-height: 1.22; color: var(--navy); text-wrap: balance;
}
.article-list p { color: var(--muted); }
.article-go { display: inline-flex; align-items: center; gap: 8px; color: var(--navy); font-weight: 800; white-space: nowrap; }
.article-go .icon { width: 18px; height: 18px; color: var(--gold-ink); transition: transform .25s var(--ease-out); }
.article-list a:hover :is(h2, h3) { text-decoration: underline; text-decoration-thickness: 2px; text-decoration-color: var(--gold); text-underline-offset: 6px; }
/* The home page's list ends with the way to all of them. */
.articles-all { margin-top: 18px; }
.article-list a:hover .article-go .icon { transform: translateX(-4px); }
/* Each article has a cover: its drawing in the brand's gold inside the portrait's two gold arcs, over a few of the
   hero's gold lines, on a navy tile (the owner's yes after a preview, 2026-10-09; until then a thin gold ring).
   The cover stands beside the text, the title, its line and the way in stacked; from 900px it is larger. */
.article-list a { grid-template-columns: 76px minmax(0, 1fr); column-gap: 16px; }
.article-list a > :not(.article-art) { grid-column: 2; }
.article-art {
  grid-row: 1 / span 3; align-self: start; display: grid; place-items: center; width: 76px; height: 76px; border-radius: 12px;
  color: var(--gold-soft);
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ccircle cx='50' cy='50' r='47' fill='none' stroke='%23C28722' stroke-width='1.4' stroke-linecap='round' pathLength='100' stroke-dasharray='60 100' transform='rotate(148 50 50)'/%3E%3Ccircle cx='50' cy='50' r='41' fill='none' stroke='%23E7CC93' stroke-opacity='.5' stroke-width='1' stroke-linecap='round' pathLength='100' stroke-dasharray='32 100' transform='rotate(212 50 50)'/%3E%3C/svg%3E") center / 66px 66px no-repeat,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 40' preserveAspectRatio='none'%3E%3Cg fill='none' stroke='%23C28722' stroke-width='.8'%3E%3Cpath stroke-opacity='0.12' d='M-4 34 C 40 14, 100 44, 164 18'/%3E%3Cpath stroke-opacity='0.22' d='M-4 31.8 C 40 11.8, 100 41.8, 164 15.8'/%3E%3Cpath stroke-opacity='0.34' d='M-4 29.6 C 40 9.6, 100 39.6, 164 13.6'/%3E%3Cpath stroke-opacity='0.44' d='M-4 27.4 C 40 7.4, 100 37.4, 164 11.4'/%3E%3Cpath stroke-opacity='0.34' d='M-4 25.2 C 40 5.2, 100 35.2, 164 9.2'/%3E%3Cpath stroke-opacity='0.22' d='M-4 23 C 40 3, 100 33, 164 7'/%3E%3Cpath stroke-opacity='0.12' d='M-4 20.8 C 40 0.8, 100 30.8, 164 4.8'/%3E%3C/g%3E%3C/svg%3E") bottom / 100% 46% no-repeat,
    radial-gradient(90px 70px at 85% 0%, rgba(29, 70, 132, .75), transparent 72%),
    var(--navy);
  transition: transform .3s var(--ease-out), box-shadow .3s var(--ease-out);
}
.article-art svg { width: 36px; height: 36px; }
.article-list a:hover .article-art { transform: translateY(-2px); box-shadow: 0 14px 24px -14px rgba(2, 27, 65, .7); }
@media (min-width: 900px) {
  .article-list a { grid-template-columns: 184px minmax(0, 1fr); grid-template-rows: auto auto 1fr; column-gap: 36px; row-gap: 8px; align-items: start; }
  .article-art { width: 184px; height: 128px; border-radius: 14px; background-size: 112px 112px, 100% 44%, auto, auto; }
  .article-art svg { width: 60px; height: 60px; }
  .article-list p { max-width: 62ch; }
  .article-go { margin-top: 4px; }
}
@media (max-width: 399px) {
  .article-list a { grid-template-columns: 64px minmax(0, 1fr); column-gap: 14px; }
  .article-art { width: 64px; height: 64px; background-size: 56px 56px, 100% 46%, auto, auto; }
  .article-art svg { width: 30px; height: 30px; }
}
@media (forced-colors: active) { .article-art { border: 1px solid CanvasText; } }

/* The close: the first step, and the same three ways to take it. */
.close {
  position: relative; overflow: hidden; overflow: clip; color: #fff;
  padding-block: clamp(76px, 9vw, 120px) clamp(56px, 6vw, 84px);
  background: radial-gradient(1000px 560px at 8% 0%, rgba(29, 70, 132, .55), transparent 60%), var(--navy);
}
.close-grid { display: grid; gap: 30px; }
@media (min-width: 1000px) { .close-grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); align-items: center; gap: 72px; } }
.close h2 {
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(2.2rem, 1.5rem + 2.6vw, 3.7rem); line-height: 1.06; text-wrap: balance;
}
.close .rule { margin-top: 24px; }
.close-actions { display: grid; gap: 14px; justify-items: start; }
.close-actions .btn { width: min(100%, 340px); }
.close-phone { margin-top: 4px; }
/* On the home page the close is signed: his face inside the portrait's two gold arcs and his name over the first
   step, so the page ends with the person it opens with (design review, 2026-10-10). The arcs draw themselves once
   when the band is almost whole on the screen (site.js, as the charts and the ring), closing the gold line that
   opened around the portrait. WhatsApp and the phone are one quiet line, as in the hero. */
.close-who { display: flex; align-items: center; gap: 16px; margin-bottom: clamp(22px, 3vw, 30px); }
.close-face { position: relative; flex: none; width: 112px; height: 112px; }
.close-face img { position: absolute; inset: 13px; width: 86px; height: 86px; border-radius: 50%; }
.close-arc { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.ca-line { fill: none; stroke: var(--gold); stroke-width: 2.2; stroke-linecap: round; stroke-dasharray: 60 100; }
.ca-line-2 { stroke: var(--gold-soft); stroke-width: 1.4; opacity: .55; stroke-dasharray: 32 100; }
.close-who p { display: grid; gap: 2px; color: #C3CFE4; font-size: 1.02rem; line-height: 1.35; }
.close-who strong { color: #fff; font-size: 1.18rem; font-weight: 800; }
@media screen and (prefers-reduced-motion: no-preference) {
  .mc-wait .ca-line { stroke-dashoffset: 60; }
  .mc-wait .ca-line-2 { stroke-dashoffset: 32; }
  .mc-play .ca-line { animation: ca-draw 1.3s var(--ease-out) both; }
  .mc-play .ca-line-2 { animation: ca-draw-2 1.3s var(--ease-out) .25s both; }
}
@keyframes ca-draw { from { stroke-dashoffset: 60; } to { stroke-dashoffset: 0; } }
@keyframes ca-draw-2 { from { stroke-dashoffset: 32; } to { stroke-dashoffset: 0; } }
@media (forced-colors: active) { .ca-line { stroke: CanvasText; } }
/* On an article the closing band is a strip: the reader has just had the sign-off and two more articles. */
.wrap:has(> .article) ~ .close { padding-block: clamp(44px, 5vw, 64px); }
.wrap:has(> .article) ~ .close h2 { font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.3rem); }
.wrap:has(> .article) ~ .close .rule { margin-top: 16px; }

/* On a phone, the calendar follows the reader from the end of the first screen (on an article, from the end of
   the sign-off) to the closing
   band (site.js). The bar is base.css's .sticky-cta; hidden, it also leaves the tab order. */
.book-bar {
  bottom: calc(12px + env(safe-area-inset-bottom, 0px)); visibility: hidden;
  transition: transform .35s var(--ease-out), visibility 0s linear .35s;
}
.book-bar.is-on { visibility: visible; transition: transform .35s var(--ease-out); }
.book-bar .btn {
  justify-content: space-between; min-height: 62px; padding: 10px 22px 10px 20px;
  border: 1.5px solid transparent; text-align: start;
}
.book-bar-text { display: grid; gap: 1px; }
.book-bar-text b { font-size: 1.06rem; font-weight: 800; }
.book-bar-text span { font-size: .9rem; font-weight: 600; }
@media (min-width: 560px) { .book-bar { inset-inline: max(12px, calc((100vw - 460px) / 2)); } }
/* Keyboard focus stops short of the bottom edge, so the whole ring shows; while the bar can show, it stops
   above the bar, never under it. */
html { scroll-padding-bottom: 16px; }
@media (max-width: 999px) { html { scroll-padding-bottom: 96px; } }
/* On a short screen (a phone on its side, or a page zoomed 400%) the bar would take too much of it. */
@media (max-height: 500px) { .book-bar { display: none; } }

/* ---------- Inner pages ---------- */

/* /דוח-ניתוח-התיק (the owner's yes after a preview, 2026-10-11; first named "מה מקבלים", renamed by him the same day): the analysis report as a white sheet on mist, its seven
   chapters as in his analysis product's client document, each with what it gives, then the work around it. No
   client's data and no numbers on purpose; the sheet says so in its stamp. */
.report-section { background: var(--mist); }
.report-sheet {
  max-width: 860px; margin-inline: auto; padding: clamp(22px, 5vw, 56px); border-radius: 6px; background: #fff; color: var(--ink);
  box-shadow: 0 1px 0 rgba(2, 27, 65, .06), 0 24px 48px -28px rgba(2, 27, 65, .45);
}
.report-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; padding-bottom: 18px; border-bottom: 1px solid var(--line); }
.report-brand { display: flex; align-items: center; gap: 10px; }
.report-brand img { width: 30px; height: auto; }
.report-brand > span { display: grid; line-height: 1.2; }
.report-brand b { font-family: var(--font-display); font-weight: 800; font-size: 1.15rem; color: var(--navy); }
.report-brand span span { font-size: .78rem; font-weight: 600; color: var(--gold-ink); }
.report-sheet .report-stamp {
  max-width: 14ch; margin: 0; padding: 6px 10px; border: 1.5px dashed var(--gold-ink); border-radius: 6px; transform: rotate(-3deg);
  color: var(--gold-ink); font-weight: 800; font-size: .78rem; line-height: 1.3; text-align: center;
}
.report-title { margin-top: 22px; font-family: var(--font-display); font-weight: 800; font-size: clamp(1.6rem, 1.2rem + 1.8vw, 2.3rem); line-height: 1.15; color: var(--navy); }
.report-sheet .report-intro { max-width: 60ch; margin-top: 10px; color: var(--muted); line-height: 1.65; }
.report-chapters { margin-top: 22px; border-top: 2px solid var(--navy); }
.report-chapters li { display: grid; grid-template-columns: 38px minmax(0, 1fr); gap: 12px; padding-block: 14px; border-bottom: 1px solid var(--line); }
.rc-num { display: grid; place-items: center; height: 26px; border-radius: 6px; background: var(--navy); color: var(--gold-soft); font-family: var(--font-display); font-weight: 800; font-size: .85rem; }
.report-chapters b { display: block; font-weight: 800; color: var(--navy); }
.report-chapters li > span:last-child > span { display: block; margin-top: 2px; color: var(--muted); line-height: 1.6; }
.practice-list { max-width: 860px; border-top: 2px solid var(--navy); counter-reset: practice; }
.practice-list li { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 4px 14px; padding-block: 18px; border-bottom: 1px solid var(--line); counter-increment: practice; }
.practice-list li::before {
  content: counter(practice); grid-row: span 2; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%;
  background: var(--gold); color: var(--navy); font-weight: 800;
}
.practice-list b { font-weight: 800; font-size: 1.12rem; color: var(--navy); }
.practice-list span { color: var(--muted); line-height: 1.65; }
@media (forced-colors: active) {
  .report-sheet { border: 1px solid CanvasText; }
  .rc-num, .practice-list li::before { outline: 1px solid; }
}

/* A compact navy band with the page's title, under the same header as the home page. */
.page-hero {
  position: relative; overflow: hidden; overflow: clip; isolation: isolate; color: #fff;
  background:
    radial-gradient(1000px 560px at 6% 0%, rgba(29, 70, 132, .55), transparent 60%),
    radial-gradient(800px 520px at 100% 100%, rgba(12, 45, 96, .9), transparent 62%),
    var(--navy);
  padding-block: clamp(118px, 11vw, 150px) clamp(52px, 6vw, 84px);
}
.page-hero .hero-lines { bottom: -150px; height: clamp(300px, 36vw, 480px); }
.page-title {
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(2.5rem, 1.55rem + 3.3vw, 4.3rem); line-height: 1.04; text-wrap: balance;
}
.page-sub { max-width: 60ch; margin-top: 18px; color: #C3CFE4; font-size: clamp(1.02rem, .96rem + .25vw, 1.15rem); font-weight: 600; line-height: 1.55; text-wrap: pretty; }
.page-lead { max-width: 56ch; margin-top: 18px; color: #D6DEEC; font-size: clamp(1.06rem, 1rem + .3vw, 1.22rem); line-height: 1.7; text-wrap: pretty; }
/* On a computer the band's empty end half carries the embossed YS of the share cards (the owner's yes after a
   preview, 2026-10-09), so a page opened from a shared link goes on from its preview card. The words keep the start
   side, and a title with a colon breaks after it (.title-line), as on the card. About keeps its portrait there; phones
   and tablets have no room for it. The layers are the booklet's emboss (page.css) in navy, as in design/share. */
.page-emboss { display: none; }
@media (min-width: 1000px) {
  .page-hero:not(.has-portrait) > .page-hero-copy { padding-inline-end: clamp(300px, 28vw, 400px); }
  .page-hero:not(.has-portrait) .page-emboss {
    display: block; position: absolute; z-index: -1; pointer-events: none;
    inset-inline-end: max(20px, calc((100% - 1180px) / 2 + 10px));
    top: clamp(100px, 8vw, 118px); bottom: 34px; margin-block: auto;
    height: min(400px, 30vw, calc(100% - clamp(100px, 8vw, 118px) - 34px)); aspect-ratio: 580 / 720;
  }
  .page-emboss > span {
    position: absolute; inset: 0;
    -webkit-mask: url(/v/mark-mask.db11b68cf2.webp) center / contain no-repeat; mask: url(/v/mark-mask.db11b68cf2.webp) center / contain no-repeat;
  }
  .page-emboss .emboss-shade { background: rgba(0, 0, 0, .45); transform: translate(6px, 9px); }
  .page-emboss .emboss-light { background: rgba(231, 204, 147, .4); transform: translate(-3px, -4px); }
  .page-emboss .emboss-face { background: linear-gradient(150deg, #0E3470 10%, #06244F 62%, #0B2E63 100%); }
  /* Beside the mark an article's title takes two lines: a size smaller there, and less air under the byline, so the
     text starts about where it did before the mark (QA, 2026-10-09: the band had grown by one title line). */
  .page-hero:has(.article-meta) .page-title { font-size: clamp(2.6rem, 1.4rem + 2.4vw, 3.6rem); }
  .page-hero:has(.article-meta) > .page-hero-copy { padding-bottom: clamp(24px, 3vw, 40px); }
}
@media (forced-colors: active) { .page-hero .page-emboss { display: none; } }
/* A title with a colon breaks after it, at every width; in the article lists only on a phone, where the title
   wraps anyway (QA, 2026-10-09). */
.page-title .title-line { display: block; }
@media (max-width: 899px) { .article-list .title-line { display: block; } }

/* About: the title and his licence beside the portrait, which stands on the band's edge. */
.page-hero.has-portrait { padding-bottom: 0; }
.page-hero-grid { display: grid; gap: 28px; }
@media (min-width: 1000px) {
  .page-hero-grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); column-gap: clamp(40px, 5vw, 88px); align-items: end; }
  .page-hero-copy { align-self: center; padding-bottom: clamp(56px, 6vw, 96px); }
  .has-portrait .portrait { width: min(32vw, 400px); }
}
@media (max-width: 999px) { .has-portrait .portrait { width: min(70vw, 320px); } }
/* On a tablet the same arrangement as on a computer, at a smaller size. */
@media (min-width: 760px) and (max-width: 999px) {
  .page-hero-grid { grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); column-gap: 28px; align-items: end; }
  .has-portrait .page-hero-copy { align-self: center; padding-bottom: 56px; }
  .has-portrait .portrait { width: min(34vw, 320px); margin: 0; }
}

/* About's approach: one reading column. */
.approach-grid { display: grid; gap: 28px; max-width: 62ch; }
.approach h2, .block-title {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(1.9rem, 1.45rem + 1.7vw, 2.8rem); line-height: 1.1; color: var(--navy); text-wrap: balance;
}
.approach-grid > div > p { margin-top: 14px; max-width: 56ch; font-size: 1.08rem; }
/* About: the areas as one row of links to Services; the home page already shows them in full. */
.areas-links { display: grid; margin-top: clamp(22px, 3vw, 32px); border-top: 2px solid var(--navy); }
.areas-links a {
  display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; align-items: center; column-gap: 14px; min-height: 68px;
  padding-block: 12px; border-bottom: 1px solid var(--line); color: var(--navy); font-size: 1.15rem; font-weight: 800; text-decoration: none;
}
.areas-links .area-icon { width: 40px; height: 40px; }
.areas-links .go { width: 18px; height: 18px; color: var(--gold-ink); transition: transform .25s var(--ease-out); }
.areas-links a:hover span { text-decoration: underline; text-decoration-thickness: 2px; text-decoration-color: var(--gold); text-underline-offset: 5px; }
.areas-links a:hover .go { transform: translateX(-3px); }
@media (min-width: 760px) { .areas-links { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 40px; } }

/* "אתם לא מספר": three things he does, each proven by what happens, not by a claim. */
.proof-list { display: grid; gap: 0; margin-top: clamp(28px, 3vw, 40px); border-top: 2px solid var(--navy); }
.proof-list li { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 14px; padding-block: 22px; border-bottom: 1px solid var(--line); }
.proof-list li::before { content: ""; width: 12px; height: 12px; margin: 9px 6px 0; background: var(--gold); transform: rotate(45deg); }
.proof-list strong { display: block; font-size: 1.2rem; font-weight: 800; color: var(--navy); }
.proof-list p { margin-top: 2px; color: var(--muted); }
@media (min-width: 760px) {
  .proof-list { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 40px; border-bottom: 1px solid var(--line); }
  .proof-list li { grid-template-columns: minmax(0, 1fr); gap: 12px; padding-block: 28px; border-bottom: 0; align-content: start; }
  .proof-list li::before { margin: 0 2px; }
}
.referral { padding-block: clamp(64px, 8vw, 104px); background: var(--mist); text-align: center; }
.referral p {
  max-width: 26ch; margin-inline: auto; font-family: var(--font-display); font-weight: 700;
  font-size: clamp(1.7rem, 1.25rem + 1.8vw, 2.7rem); line-height: 1.36; color: var(--navy); text-wrap: balance;
}
.referral .rule { margin: 26px auto 0; }

/* Services: three quiet icon links to the areas, then one section per area. */
.jump-areas { display: flex; gap: clamp(12px, 3vw, 36px); margin-top: 30px; }
.jump-areas a { display: grid; justify-items: center; gap: 10px; min-width: 88px; color: #fff; font-weight: 800; text-decoration: none; }
.jump-areas .ring {
  display: grid; place-items: center; width: 76px; height: 76px; border-radius: 50%;
  box-shadow: inset 0 0 0 1px rgba(231, 204, 147, .45); transition: box-shadow .25s var(--ease-out), background-color .25s;
}
.jump-areas .area-icon { width: 42px; height: 42px; color: var(--gold-soft); }
.jump-areas a:hover .ring { background: rgba(255, 255, 255, .05); box-shadow: inset 0 0 0 1.5px var(--gold-soft); }
.jump-areas .lbl { display: inline-flex; align-items: center; gap: 4px; }
.jump-areas .lbl .icon { width: 16px; height: 16px; color: var(--gold-soft); }
@media (max-width: 459px) {
  .jump-areas { justify-content: space-between; gap: 6px; }
  .jump-areas a { flex: 1; min-width: 0; font-size: .9rem; }
  .jump-areas .ring { width: 64px; height: 64px; }
  .jump-areas .area-icon { width: 36px; height: 36px; }
  .jump-areas .lbl { text-align: center; text-wrap: balance; }
  .jump-areas .lbl .icon { display: none; }
}
.service { scroll-margin-top: 16px; }
.service-head .area-icon { width: 60px; height: 60px; margin-bottom: 14px; }
.service:nth-of-type(even) { background: var(--mist); }
.service-grid { display: grid; gap: 28px; }
@media (min-width: 760px) { .service-grid { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); column-gap: clamp(48px, 6vw, 96px); align-items: start; } }
.service-head h2 {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(2.1rem, 1.5rem + 2.2vw, 3.3rem); line-height: 1.08; color: var(--navy);
}
.service-head .rule { margin-block: 18px 20px; }
.service-head p { max-width: 50ch; font-size: 1.1rem; line-height: 1.75; }
.service-list { display: grid; border-top: 2px solid var(--navy); }
.service-list li { padding-block: 18px; border-bottom: 1px solid var(--line); }
.service-list strong { display: block; font-size: 1.18rem; font-weight: 800; color: var(--navy); }
.service-list span { display: block; margin-top: 2px; color: var(--muted); }
.service-note { display: flex; gap: 10px; margin-top: 18px; font-size: .96rem; color: var(--muted); }
.service-note .icon { width: 20px; height: 20px; margin-top: 3px; color: var(--gold-ink); }
/* Each area that has articles links to them, with each article's drawing from the articles page. On a phone the
   links close the area, after the products; from 900px they stand under the area's opening words. */
.service-reads ul { display: grid; gap: 2px; }
.reads-label { margin-bottom: 6px; font-size: .92rem; font-weight: 700; color: var(--muted); }
.service-reads a {
  display: grid; grid-template-columns: 44px minmax(0, 1fr); align-items: center; column-gap: 12px; min-height: 48px;
  padding-block: 4px; color: var(--navy); font-weight: 700; line-height: 1.35; text-decoration: none;
}
/* The small version of the cover: too small for the arcs and the lines, so the navy tile and the drawing only. */
.service-reads .article-art {
  grid-row: auto; align-self: center; width: 44px; height: 44px; border-radius: 10px;
  background: radial-gradient(40px 30px at 85% 0%, rgba(29, 70, 132, .75), transparent 72%), var(--navy);
}
.service-reads .article-art svg { width: 26px; height: 26px; }
.service-reads a:hover .read-title { text-decoration: underline; text-decoration-thickness: 2px; text-decoration-color: var(--gold); text-underline-offset: 5px; }
.service-reads a:hover .article-art { transform: translateY(-2px); box-shadow: 0 10px 18px -10px rgba(2, 27, 65, .7); }
@media (min-width: 760px) {
  .service-grid:has(> .service-reads) { grid-template-rows: auto 1fr; }
  .service-grid:has(> .service-reads) > :nth-child(2) { grid-row: 1 / span 2; }
  .service-grid > .service-reads { grid-column: 1; grid-row: 2; }
}
.service-how { padding: 24px 26px; border-radius: var(--r-card); background: #fff; box-shadow: var(--shadow-soft); }
.service:nth-of-type(odd) .service-how { background: var(--mist); box-shadow: none; }
.service-how h3 { font-weight: 800; font-size: 1.2rem; color: var(--navy); }
.service-how p { margin-top: 6px; }

/* Contact: the intro call first, then every other way, each one a whole row to tap. */
.contact-grid { display: grid; gap: 28px; align-items: start; }
@media (min-width: 1000px) { .contact-grid { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 56px; } }
.booking-card {
  padding: clamp(26px, 3.5vw, 40px); border-radius: var(--r-card); color: #fff;
  background: radial-gradient(640px 400px at 100% 0%, rgba(29, 70, 132, .6), transparent 60%), var(--navy);
  box-shadow: var(--shadow-lift);
}
.booking-card h2 { font-family: var(--font-display); font-weight: 800; font-size: clamp(1.9rem, 1.5rem + 1.3vw, 2.5rem); line-height: 1.1; text-wrap: balance; }
.booking-card p { margin-top: 10px; color: #D6DEEC; }
.booking-card .btn { margin-top: 24px; }
/* On a phone the calendar button spans the card, like the other main buttons. */
@media (max-width: 520px) { .booking-card .btn { width: 100%; } }
.booking-card .booking-note { margin-top: 14px; font-size: .95rem; color: #C3CFE4; }
.contact-list { display: grid; border-top: 2px solid var(--navy); }
.contact-list a {
  display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; gap: 16px; align-items: center;
  padding-block: 18px; border-bottom: 1px solid var(--line); color: inherit; text-decoration: none;
}
.contact-list .icon-dot {
  display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%;
  background: var(--navy); color: var(--gold-soft);
}
.contact-list .icon-dot .icon { width: 22px; height: 22px; }
.contact-list b { display: block; font-size: .95rem; font-weight: 700; color: var(--muted); }
.contact-list span.value { display: block; font-size: 1.18rem; font-weight: 800; color: var(--navy); overflow-wrap: anywhere; }
/* A number or an address in Latin letters still lines up on the start side, under its label. */
.contact-list span.value[dir="ltr"] { text-align: right; }
.contact-list .go { width: 20px; height: 20px; color: var(--gold-ink); transition: transform .25s var(--ease-out); }
.contact-list a:hover .value { text-decoration: underline; text-decoration-color: var(--gold); text-underline-offset: 4px; }
.contact-list a:hover .go { transform: translateX(-4px); }
/* The calendar card comes right under the band, so a laptop shows its button in the first screen; WhatsApp and
   the phone lead the list, and email, the office and Facebook are quieter rows. */
.contact-section { padding-top: clamp(36px, 4vw, 56px); }
.contact-list .contact-minor a { padding-block: 10px; }
.contact-list .contact-minor span.value { font-size: 1.02rem; font-weight: 700; }
/* The minor rows keep the full-size icon circle: smaller circles read as a mismatch, not as rank (QA, 2026-09-25). */

/* The legal drafts sit on the same band as the other pages, at about 70 characters a line. */
.doc-page .doc { max-width: 70ch; padding-top: clamp(28px, 4vw, 48px); }
/* On a phone the gold lines sit lower, clear of the title band's last line. */
@media (max-width: 699px) { .page-hero .hero-lines { bottom: -210px; } }

/* Not found. */
.lost { padding-block: clamp(48px, 7vw, 88px); }
.lost ul { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }

/* Footer: the licence line, then how to reach him, the pages, and the fine print. */
.www-footer { padding-block: 48px 56px; border-top: 1px solid rgba(231, 204, 147, .2); }
.foot-contact { display: flex; flex-wrap: wrap; gap: 0 24px; margin-top: 8px; }
.foot-contact a {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px;
  color: #fff; font-weight: 600; text-decoration: none;
}
.foot-contact a:hover { text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--gold-soft); }
.foot-contact .icon { width: 18px; height: 18px; color: var(--gold-soft); }
.foot-contact a[data-booking] { color: var(--gold-soft); }
/* A short page name ("אודות") still gets a full-size tap target. */
.www-footer .foot-links a { min-width: 44px; justify-content: center; }

/* A plain mist section. */
.mist { background: var(--mist); }

/* ---------- Articles ---------- */

/* The title band carries who wrote it and when it was checked; the text below is set for reading. */
.article-meta { display: grid; grid-template-columns: 42px minmax(0, 1fr); align-items: center; gap: 12px; max-width: 60ch; margin-top: 24px; color: #C3CFE4; font-size: .98rem; font-weight: 600; line-height: 1.5; }
.article-meta img { width: 42px; height: 42px; border-radius: 50%; box-shadow: 0 0 0 2px var(--navy), 0 0 0 4px var(--gold); }
.article-meta strong { color: #fff; }
/* About 70 characters a line, like the legal pages. */
.article { max-width: 70ch; padding-block: clamp(40px, 5vw, 72px) clamp(56px, 7vw, 96px); }
.article > * + * { margin-top: 16px; }
.article h2 {
  margin-top: clamp(44px, 5vw, 60px); font-family: var(--font-display); font-weight: 700;
  font-size: clamp(1.7rem, 1.35rem + 1.2vw, 2.3rem); line-height: 1.15; color: var(--navy); text-wrap: balance;
}
.article h3 { margin-top: 30px; font-weight: 800; font-size: 1.25rem; line-height: 1.35; color: var(--navy); }
.article h2 + *, .article h3 + * { margin-top: 12px; }
.article p { font-size: 1.1rem; line-height: 1.85; }
.article ul, .article ol { display: grid; gap: 10px; }
.article li { position: relative; padding-inline-start: 24px; font-size: 1.08rem; line-height: 1.75; }
.article li::before { content: ""; position: absolute; inset-inline-start: 2px; top: .72em; width: 8px; height: 8px; background: var(--gold); transform: rotate(45deg); }
.article strong { color: var(--navy); }
/* A worked number, always with the assumptions it rests on. */
.calc { padding: 20px 22px; border-radius: var(--r-box); background: var(--mist); }
.calc p { font-size: 1.06rem; }
.calc .assume { margin-top: 8px; font-size: .95rem; line-height: 1.6; color: var(--muted); }
/* A worked example with its chart (tools/charts.mjs writes the drawing into a partial from the article's own numbers;
   the owner's choice B of two previews, 2026-10-10): the box in navy, the lines in gold and white. Two drawings, a
   narrow one for phones, so the labels keep their size; screen readers get the drawing's label. */
.calc.calc-navy {
  color: #fff; -webkit-print-color-adjust: exact; print-color-adjust: exact;
  background: radial-gradient(520px 300px at 92% 0%, rgba(29, 70, 132, .6), transparent 65%), var(--navy);
}
.calc.calc-navy .assume { color: #C3CFE4; }
.calc.calc-navy :is(strong, a) { color: #fff; }
.money-fig { margin-block: 14px 4px; }
.article .money-fig + * { margin-top: 12px; }
.money-fig svg { display: block; width: 100%; height: auto; overflow: visible; font-family: var(--font-text); }
.money-fig .mf-narrow { display: none; }
@media (max-width: 679px) { .money-fig .mf-wide { display: none; } .money-fig .mf-narrow { display: block; } }
/* Between phone and tablet widths the phone drawing keeps a phone size, centred, instead of growing with the box;
   from 680px the wide one is shown at 93% of its size or more, so its labels stay about 12px. */
.money-fig .mf-narrow svg { max-width: 360px; margin-inline: auto; }
/* On the narrowest phones the drawing also takes the box's side padding, so its labels stay readable. */
@media (max-width: 379px) { .calc-navy .money-fig { margin-inline: -12px; } }
.mc-grid { stroke: rgba(231, 204, 147, .18); stroke-width: 1; }
.mc-axis { stroke: rgba(231, 204, 147, .55); stroke-width: 1.4; }
.mc-tick { fill: #C3CFE4; font-size: calc(var(--mc-fs) * .86); font-weight: 600; }
.mc-area { fill: rgba(231, 204, 147, .2); }
.mc-line { fill: none; stroke-linecap: round; }
.mc-dep { stroke: #D6DEEC; stroke-width: 3; }
.mc-prod { stroke: var(--gold); stroke-width: 3.5; }
.mc-dot-start { fill: #fff; }
.mc-dot-dep { fill: #D6DEEC; }
.mc-dot-prod { fill: var(--gold); }
.mc-end { fill: #fff; font-size: var(--mc-fs); font-weight: 800; }
.mc-end.mc-end-prod { fill: var(--gold-soft); }
.mc-name { fill: #C3CFE4; font-size: calc(var(--mc-fs) * .85); font-weight: 600; }
.mc-gap { fill: var(--gold-soft); font-size: calc(var(--mc-fs) * .92); font-weight: 800; }
.mc-halo { paint-order: stroke; stroke: var(--navy-2); stroke-width: 4; stroke-linejoin: round; }
/* A legend above the plot, when labels beside the line ends would not fit (the pension, study-fund and child-savings
   articles). */
.mc-key { fill: #fff; font-size: var(--mc-fs); font-weight: 800; }
.mc-key.mc-key-gap { fill: var(--gold-soft); }
/* Columns against a dashed line at what the index did (the dollar article). */
.mc-bar { fill: var(--gold); }
.mc-row { fill: #fff; font-size: calc(var(--mc-fs) * .9); font-weight: 600; }
.mc-ref { stroke: #D6DEEC; stroke-width: 1.6; stroke-dasharray: 6 5; }
.mc-ref-label { fill: #D6DEEC; font-size: calc(var(--mc-fs) * .9); font-weight: 700; }
/* The charts draw themselves once, when a third of the drawing is on the screen (the owner's yes to a preview,
   2026-10-10; site.js adds .mc-wait, then .mc-play): the lines from today to the end (pathLength 1, from
   tools/charts.mjs), then the band, the end dots and the sums; the columns rise in reading order after the index
   line, each value after its column. All in under two seconds. Under reduced motion, without the script and in
   print, the drawing is simply there. */
@media screen and (prefers-reduced-motion: no-preference) {
  :is(.mc-wait, .mc-play) path.mc-line { stroke-dasharray: 1 1; }
  .mc-wait path.mc-line { stroke-dashoffset: 1; }
  .mc-play path.mc-line { animation: mc-draw 1.4s cubic-bezier(.45, .05, .25, 1) both; }
  .mc-wait :is(.mc-area, .mc-dot-prod, .mc-dot-dep, .mc-end, .mc-name, .mc-gap, .mc-ref, .mc-ref-label) { opacity: 0; }
  .mc-play .mc-area { animation: mc-in .55s ease-out 1.05s both; }
  .mc-play :is(.mc-dot-prod, .mc-dot-dep) { animation: mc-in .3s ease-out 1.25s both; }
  .mc-play :is(.mc-end, .mc-name, .mc-gap) { animation: mc-in .5s ease-out 1.35s both; }
  :is(.mc-wait, .mc-play) .mc-bar { transform-box: fill-box; transform-origin: 50% 100%; }
  .mc-wait .mc-bar { transform: scaleY(0); }
  .mc-play :is(.mc-ref, .mc-ref-label) { animation: mc-in .45s ease-out both; }
  .mc-play .mc-bar { animation: mc-grow .75s cubic-bezier(.3, 1.25, .5, 1) both; }
  .mc-play .mc-bar:nth-of-type(1) { animation-delay: .35s; }
  .mc-play .mc-bar:nth-of-type(2) { animation-delay: .55s; }
  .mc-play .mc-bar:nth-of-type(3) { animation-delay: .75s; }
  .mc-play .mc-bar + .mc-end { animation: mc-in .4s ease-out both; }
  .mc-play .mc-bar:nth-of-type(1) + .mc-end { animation-delay: .9s; }
  .mc-play .mc-bar:nth-of-type(2) + .mc-end { animation-delay: 1.1s; }
  .mc-play .mc-bar:nth-of-type(3) + .mc-end { animation-delay: 1.3s; }
}
@keyframes mc-draw { to { stroke-dashoffset: 0; } }
@keyframes mc-in { to { opacity: 1; } }
@keyframes mc-grow { from { transform: scaleY(0); } to { transform: scaleY(1); } }
/* A contrast theme drops the box's navy: the drawing keeps its own, as a picture. */
@media (forced-colors: active) { .money-fig { forced-color-adjust: none; padding: 10px; border-radius: var(--r-sm); background: var(--navy); } }
.numbers { width: 100%; border-collapse: collapse; font-size: 1.04rem; font-variant-numeric: tabular-nums; }
.numbers caption { padding-bottom: 10px; text-align: start; font-weight: 800; color: var(--navy); }
.numbers th, .numbers td { padding: 12px 10px; border-bottom: 1px solid var(--line); text-align: start; vertical-align: top; }
.numbers thead th { border-bottom: 2px solid var(--navy); font-weight: 800; color: var(--navy); }
.numbers tbody th { font-weight: 800; color: var(--navy); white-space: nowrap; }
/* Under 360px a long row label on one line leaves the numbers too little room, and the table pushes the page sideways
   (the dollar article's did at 320px): there the labels wrap, balanced so that parallel rows break alike. */
@media (max-width: 359px) { .numbers tbody th { white-space: normal; text-wrap: balance; } }
/* Still to be checked before it goes public; the release check refuses a page with one. */
.todo {
  padding: 3px 6px; border-radius: 4px; background: rgba(194, 135, 34, .2); color: var(--gold-ink); font-weight: 700;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
/* The article signs off once, under the site's navy rule: who wrote it, then one next step (the free checklist,
   softer than the call), then the small print. On a phone the next step takes the full width. */
.article-sign {
  display: grid; grid-template-columns: 64px minmax(0, 1fr); column-gap: 18px; align-items: start;
  margin-top: clamp(44px, 5vw, 60px); padding-top: 28px; border-top: 2px solid var(--navy);
}
.article .article-sign > *, .article .sign-next > * { margin-top: 0; }
.article-sign > img { width: 64px; height: 64px; border-radius: 50%; box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--gold); }
.sign-who p { font-size: 1rem; line-height: 1.65; }
.article .sign-who p + p { margin-top: 6px; }
.article .sign-next {
  grid-column: 1 / -1; display: grid; justify-items: start; gap: 10px;
  margin-top: 26px; padding-top: 24px; border-top: 1px solid var(--line);
}
.article .sign-next h2 { font-size: clamp(1.35rem, 1.2rem + .6vw, 1.65rem); }
.sign-next p { color: var(--muted); }
.sign-next .btn { margin-top: 6px; }
.article-updated { font-size: .95rem; color: var(--muted); }
.article .article-sign .article-updated { grid-column: 1 / -1; margin-top: 22px; }
@media (min-width: 560px) {
  .article .sign-next, .article .article-sign .article-updated { grid-column: 2; }
}
@media (max-width: 559px) {
  .sign-next .btn { justify-self: stretch; }
}
/* After the article: two related ones, in the articles page's rows with a smaller cover (the reading column is
   narrower than the page), and the way to all of them. */
.article:has(+ .article-more) { padding-bottom: 0; }
.article-more { max-width: 70ch; padding-block: clamp(52px, 6vw, 76px) clamp(56px, 7vw, 96px); }
.article-more > h2 {
  margin-bottom: 18px; font-family: var(--font-display); font-weight: 700;
  font-size: clamp(1.5rem, 1.3rem + .8vw, 1.9rem); line-height: 1.2; color: var(--navy);
}
.article-more .article-list a { padding-block: 22px; }
.article-more .article-list h3 { font-size: clamp(1.2rem, 1.1rem + .4vw, 1.4rem); }
.article-more .more-link { margin-top: 18px; }
@media (min-width: 900px) {
  .article-more .article-list a { grid-template-columns: 132px minmax(0, 1fr); column-gap: 24px; }
  .article-more .article-art { width: 132px; height: 96px; background-size: 84px 84px, 100% 44%, auto, auto; }
  .article-more .article-art svg { width: 46px; height: 46px; }
}
/* The three short articles (from the golden posts): a lower title band, so the text starts sooner, and from 1100px
   the sign-off stands beside the text, in the half of the width the reading column leaves empty. */
.page-hero-short { padding-block: clamp(100px, 8.5vw, 118px) clamp(30px, 3.4vw, 46px); }
.page-hero-short .page-title { font-size: clamp(2.1rem, 1.35rem + 2.4vw, 3.3rem); }
.page-hero-short .page-lead { margin-top: 14px; }
.page-hero-short .article-meta { margin-top: 18px; }
.article-body > * + * { margin-top: 16px; }
@media (min-width: 1100px) {
  .article.short-read {
    display: grid; grid-template-columns: minmax(0, 62ch) minmax(300px, 360px); column-gap: clamp(56px, 6vw, 104px);
    align-items: start; max-width: none;
  }
  .article.short-read .article-sign { grid-column: 2; grid-row: 1; margin-top: 0; position: sticky; top: 28px; }
  .article.short-read .sign-next, .article.short-read .article-sign .article-updated { grid-column: 1 / -1; }
  .article.short-read .sign-next .btn { justify-self: stretch; }
}
/* A link inside the running text, in a paragraph or a list, reads as one: navy words over a gold underline. */
.article :is(p, li) a { color: var(--navy); font-weight: 700; text-underline-offset: 3px; text-decoration-color: var(--gold); }
/* The long articles open with what they say, in three lines, on the same mist as the worked numbers. */
.article-brief { padding: 18px 22px 22px; border-radius: var(--r-box); background: var(--mist); }
.article .article-brief h2 { margin-top: 0; font-family: var(--font-text); font-weight: 800; font-size: 1.25rem; line-height: 1.4; }
.article-brief ul { margin-top: 10px; }
.article-brief li { font-size: 1.02rem; line-height: 1.65; }

/* A long article's contents ("בתוך המאמר", built by tools/build-www.mjs from its headings; the owner's option A,
   2026-10-06). On a phone and a tablet: a folded row under the brief. A tap on a part folds it back (site.js). */
.article h2[id] { scroll-margin-top: 24px; }
.toc-fold { border: 1px solid var(--line-strong); border-radius: var(--r-box); background: #fff; }
.toc-fold > summary {
  display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 12px 18px;
  list-style: none; cursor: pointer; font-weight: 800; color: var(--navy);
}
.toc-fold > summary::-webkit-details-marker { display: none; }
.toc-fold .toc-n { color: var(--muted); font-size: .95rem; font-weight: 600; }
.toc-fold > summary .icon { width: 20px; height: 20px; margin-inline-start: auto; color: var(--gold-ink); transition: transform .2s var(--ease-out); }
.toc-fold[open] > summary .icon { transform: rotate(180deg); }
.toc-fold nav { padding: 0 18px 12px; border-top: 1px solid var(--line); }
.toc-list { display: grid; margin: 0; padding: 0; list-style: none; }
.article .toc-list li, .toc-side .toc-list li { padding: 0; font-size: 1rem; line-height: 1.45; }
.article .toc-list li::before { content: none; }
.article .toc-list a, .toc-side .toc-list a { display: block; padding-block: 11px; color: var(--ink); font-weight: 600; text-decoration: none; }
.article .toc-list a:hover, .toc-side .toc-list a:hover { color: var(--navy); text-decoration: underline; text-decoration-color: var(--gold); text-underline-offset: 3px; }
.toc-side { display: none; }
/* On a computer the empty side of the page becomes a column that stays in view while reading, until the article
   ends: the parts, the one being read marked in gold, and under them the free checklist, which steps aside once the
   sign-off that carries it comes into view. The reading column keeps its own 70ch, so the first track sizes to it. */
@media (min-width: 1100px) {
  .toc-fold { display: none; }
  .wrap:has(> .toc-side) { display: grid; grid-template-columns: auto minmax(240px, 290px); justify-content: start; column-gap: clamp(56px, 6vw, 112px); }
  .wrap:has(> .toc-side) > .article { grid-column: 1; grid-row: 1; }
  .wrap:has(> .toc-side) > .article-more { grid-column: 1; }
  .toc-side { display: block; grid-column: 2; grid-row: 1; padding-block: clamp(40px, 5vw, 72px) clamp(56px, 7vw, 96px); }
  /* A short screen scrolls the column on its own; the padding keeps a focused link's ring inside it. */
  .toc-side-in { position: sticky; top: 32px; max-height: calc(100vh - 64px); overflow-y: auto; padding-bottom: 8px; padding-inline-end: 8px; }
  .toc-h { font-size: 1rem; font-weight: 800; color: var(--navy); }
  .toc-side .toc-list { margin-top: 12px; padding-inline-start: 18px; border-inline-start: 1px solid var(--line-strong); }
  .toc-side .toc-list a { position: relative; padding-block: 7px; color: var(--muted); font-size: .97rem; }
  .toc-side .toc-list a[aria-current] { color: var(--navy); font-weight: 800; }
  .toc-side .toc-list a[aria-current]::before {
    content: ""; position: absolute; inset-inline-start: -19.5px; top: 7px; bottom: 7px; width: 3px; border-radius: 2px; background: var(--gold);
  }
  .toc-next {
    display: grid; justify-items: start; gap: 8px; margin-top: 30px; padding: 20px 20px 22px;
    border-radius: var(--r-box); background: var(--mist); transition: opacity .25s var(--ease-out), visibility .25s;
  }
  .toc-next-h { font-size: 1.12rem; font-weight: 800; line-height: 1.35; color: var(--navy); }
  .toc-next-p { font-size: .97rem; line-height: 1.55; color: var(--muted); }
  .toc-next .btn { margin-top: 6px; }
  .toc-side.is-end .toc-next { opacity: 0; visibility: hidden; }
}
@media (forced-colors: active) {
  .toc-side .toc-list a[aria-current]::before { forced-color-adjust: none; background: Highlight; }
}
@media print { .toc-fold, .toc-side { display: none; } }

/* The motion layer for the landing pages and serero.co.il (owner's approved list, 2026-09-28).
   Nothing here changes a colour, a font, a text or the layout: only how things move. The landing
   pages load it after their other stylesheets; tools/build-www.mjs puts it last in the site's one
   stylesheet. The demo of every move is design/motion/.

   The language: one shape at a time changes its size, corners and colour, and the text inside it
   swaps with a short blur (its own exit and entrance, so two texts never show on top of each
   other). Every move is a spring from tools/springs.mjs, and passes its target by under 1% at most:
   no bounce, glow, gradient or particles.

   It all waits for the m-on class on <html>, which every page carries (the demo takes it away to
   show the old motion). Under reduced motion, base.css's global rule already stops every transition
   and animation here, and motion.js makes each change at once. */

/* springs:start (written by tools/springs.mjs; edit the springs there, not here) */
:root {
  --spring-press: var(--ease-out); --dur-press: 223ms;
  --spring-snap: var(--ease-out); --dur-snap: 334ms;
  --spring-morph: var(--ease-out); --dur-morph: 447ms;
  --spring-trail: var(--ease-out); --dur-trail: 517ms;
  --spring-fade: var(--ease-out); --dur-fade: 306ms;
  --spring-exit: var(--ease-out); --dur-exit: 188ms;
  --spring-reveal: var(--ease-out); --dur-reveal: 646ms;
  --spring-settle: var(--ease-out); --dur-settle: 1175ms;
  --spring-draw: var(--ease-out); --dur-draw: 1528ms;
}
@supports (transition-timing-function: linear(0, 1)) {
  :root {
    /* a button pressed and let go; 279ms, passes the target by 0.50% */
    --spring-press: linear(0, 0.0211, 0.0745, 0.1479, 0.2321, 0.3204, 0.408, 0.4917, 0.5693, 0.6397, 0.7023, 0.7571, 0.8044, 0.8446, 0.8784, 0.9064, 0.9293, 0.9479, 0.9627, 0.9744, 0.9834, 0.9902, 0.9953, 0.999, 1.0016, 1.0033, 1.0043, 1.0048, 1.005, 1.0049, 1.0047, 1.0043, 1.0039, 1.0035, 1.003, 1.0026, 1.0022, 1.0019, 1.0015, 1.0013, 1);
    --dur-press: 279ms;
    /* ticks, markers, the leading edge of an indicator; 417ms, passes the target by 0.77% */
    --spring-snap: linear(0, 0.021, 0.0745, 0.1482, 0.2331, 0.3224, 0.4111, 0.496, 0.5749, 0.6464, 0.71, 0.7656, 0.8134, 0.854, 0.8879, 0.9159, 0.9386, 0.9568, 0.9711, 0.9822, 0.9905, 0.9967, 1.0011, 1.0042, 1.0061, 1.0072, 1.0077, 1.0077, 1.0074, 1.0069, 1.0063, 1.0056, 1.0049, 1.0042, 1.0036, 1.003, 1.0025, 1.002, 1.0016, 1.0013, 1);
    --dur-snap: 417ms;
    /* a shape changing its size and corners; 559ms, passes the target by 0.15% */
    --spring-morph: linear(0, 0.0193, 0.0682, 0.1356, 0.2133, 0.2952, 0.3771, 0.4558, 0.5297, 0.5974, 0.6586, 0.7129, 0.7607, 0.8021, 0.8378, 0.8681, 0.8937, 0.9152, 0.933, 0.9476, 0.9596, 0.9692, 0.977, 0.9832, 0.988, 0.9917, 0.9946, 0.9968, 0.9984, 0.9996, 1.0004, 1.0009, 1.0013, 1.0014, 1.0015, 1.0015, 1.0015, 1.0014, 1.0013, 1.0011, 1);
    --dur-morph: 559ms;
    /* the trailing edge of an indicator; 646ms, no overshoot */
    --spring-trail: linear(0, 0.0229, 0.0788, 0.1532, 0.236, 0.3207, 0.4029, 0.4801, 0.5508, 0.6145, 0.671, 0.7206, 0.7637, 0.8009, 0.8328, 0.86, 0.8831, 0.9027, 0.9191, 0.9329, 0.9444, 0.9541, 0.9621, 0.9688, 0.9743, 0.9789, 0.9827, 0.9858, 0.9884, 0.9905, 0.9922, 0.9936, 0.9948, 0.9958, 0.9965, 0.9972, 0.9977, 0.9981, 0.9985, 0.9988, 1);
    --dur-trail: 646ms;
    /* content coming in: opacity and blur; 382ms, no overshoot */
    --spring-fade: linear(0, 0.0229, 0.0788, 0.1532, 0.236, 0.3207, 0.4029, 0.4801, 0.5508, 0.6145, 0.671, 0.7205, 0.7637, 0.8009, 0.8328, 0.86, 0.8831, 0.9026, 0.9191, 0.9329, 0.9444, 0.9541, 0.9621, 0.9688, 0.9743, 0.9789, 0.9827, 0.9858, 0.9883, 0.9905, 0.9922, 0.9936, 0.9948, 0.9958, 0.9965, 0.9972, 0.9977, 0.9981, 0.9985, 0.9988, 1);
    --dur-fade: 382ms;
    /* content going out; 235ms, no overshoot */
    --spring-exit: linear(0, 0.0229, 0.0787, 0.1531, 0.2359, 0.3205, 0.4027, 0.4799, 0.5506, 0.6143, 0.6708, 0.7204, 0.7635, 0.8007, 0.8327, 0.8599, 0.883, 0.9025, 0.919, 0.9328, 0.9444, 0.954, 0.962, 0.9687, 0.9743, 0.9788, 0.9826, 0.9858, 0.9883, 0.9904, 0.9922, 0.9936, 0.9948, 0.9957, 0.9965, 0.9972, 0.9977, 0.9981, 0.9985, 0.9988, 1);
    --dur-exit: 235ms;
    /* a section or a headline entering the page; 808ms, no overshoot */
    --spring-reveal: linear(0, 0.0229, 0.0788, 0.1531, 0.236, 0.3206, 0.4028, 0.48, 0.5507, 0.6144, 0.6709, 0.7205, 0.7636, 0.8008, 0.8328, 0.86, 0.8831, 0.9026, 0.9191, 0.9329, 0.9444, 0.9541, 0.9621, 0.9688, 0.9743, 0.9789, 0.9826, 0.9858, 0.9883, 0.9905, 0.9922, 0.9936, 0.9948, 0.9958, 0.9965, 0.9972, 0.9977, 0.9981, 0.9985, 0.9988, 1);
    --dur-reveal: 808ms;
    /* a large picture settling into place (the booklet, the portrait); 1469ms, no overshoot */
    --spring-settle: linear(0, 0.0229, 0.0788, 0.1532, 0.2361, 0.3207, 0.403, 0.4802, 0.5509, 0.6146, 0.6711, 0.7206, 0.7638, 0.801, 0.8329, 0.8601, 0.8832, 0.9027, 0.9191, 0.9329, 0.9445, 0.9541, 0.9621, 0.9688, 0.9743, 0.9789, 0.9827, 0.9858, 0.9884, 0.9905, 0.9922, 0.9936, 0.9948, 0.9958, 0.9965, 0.9972, 0.9977, 0.9981, 0.9985, 0.9988, 1);
    --dur-settle: 1469ms;
    /* a fine line drawing itself (the arcs behind the portrait); 1910ms, no overshoot */
    --spring-draw: linear(0, 0.0229, 0.0788, 0.1532, 0.236, 0.3207, 0.4029, 0.4801, 0.5508, 0.6145, 0.671, 0.7205, 0.7637, 0.8009, 0.8328, 0.86, 0.8831, 0.9026, 0.9191, 0.9329, 0.9444, 0.9541, 0.9621, 0.9688, 0.9743, 0.9789, 0.9827, 0.9858, 0.9883, 0.9905, 0.9922, 0.9936, 0.9948, 0.9958, 0.9965, 0.9972, 0.9977, 0.9981, 0.9985, 0.9988, 1);
    --dur-draw: 1910ms;
  }
}
/* springs:end */

/* The tick drawings, as the forms already use them: navy on gold (the answer cards), gold on navy (the boxes). */
:root {
  --m-tick-navy: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.4l2.9 2.9L12.6 5' fill='none' stroke='%23021B41' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --m-tick-gold: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.4l2.9 2.9L12.6 5' fill='none' stroke='%23C28722' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* 1. A press: the button sinks a little and springs back when let go. A full-width button sinks less,
   so its edges do not travel further than a small one's. */
.m-on .btn { transition: transform var(--dur-press) var(--spring-press), background-color .2s, box-shadow .2s, color .2s; }
.m-on .btn:active { transform: scale(var(--m-press, .97)); }
.m-on .btn-block, .m-on .sticky-cta .btn { --m-press: .985; }
.m-on .step-back, .m-on .g-callback-toggle, .m-on .menu > summary { transition: transform var(--dur-press) var(--spring-press), background-color .15s, color .15s; }
.m-on .step-back:active, .m-on .g-callback-toggle:active, .m-on .menu > summary:active { transform: scale(.96); }
.m-on .chip span {
  transition: background-color var(--dur-fade) var(--spring-fade), border-color var(--dur-fade) var(--spring-fade),
    color var(--dur-fade) var(--spring-fade), transform var(--dur-press) var(--spring-press);
}
.m-on .chip:active span { transform: scale(.985); }

/* 3. A tick: the marker comes in on a small spring, then the tick draws itself from its short arm to its
   long one (a cover of the marker's own colour slides off it). motion.js adds .m-popping when a visitor
   ticks; a tick restored on load, or one set by its twin, just shows. */
@keyframes m-pop { from { transform: scale(.55); } }
@keyframes m-wipe-14 { from { background-size: 100% 100%, 14px 14px, auto; } }
@keyframes m-wipe-18 { from { background-size: 100% 100%, 18px 18px, auto; } }
.m-on .chip span.m-popping::before { animation: m-pop var(--dur-snap) var(--spring-snap); }
.m-on .chip input[type="checkbox"]:checked + span.m-popping::before {
  background: linear-gradient(var(--gold), var(--gold)) right center / 0% 100% no-repeat, var(--m-tick-navy) center / 14px 14px no-repeat, var(--gold);
  animation: m-pop var(--dur-snap) var(--spring-snap), m-wipe-14 var(--dur-fade) var(--spring-fade) 80ms backwards;
}
.m-on .tick-box { transition: background-color var(--dur-fade) var(--spring-fade), box-shadow var(--dur-fade) var(--spring-fade); }
.m-on .tick-wrap input:checked + .tick-box.m-popping {
  background: linear-gradient(var(--navy), var(--navy)) right center / 0% 100% no-repeat, var(--m-tick-gold) center / 18px 18px no-repeat, var(--navy);
  animation: m-pop var(--dur-snap) var(--spring-snap), m-wipe-18 var(--dur-fade) var(--spring-fade) 80ms backwards;
}
.m-on .toc-n.m-popping { animation: m-pop var(--dur-snap) var(--spring-snap); }

/* 2. The form in steps. The script moves the old step out and the new one in (blur, and a short slide
   in the reading direction), and the card follows the new step's height. The old keyframe goes. */
.m-on .lead-form.is-stepped [data-step]:not([hidden]) { animation: none; }
.m-on .step-bar i { transition: width var(--dur-morph) var(--spring-morph); }
.m-stage { position: relative; }
.m-stage.m-moving { overflow: clip; overflow-clip-margin: 8px; }
/* Text that the script swaps in place (a counter): an inline box cannot move, a block can. */
.m-on [data-progress], .m-on .step-n { display: inline-block; }

/* 4. The send button becomes a circle that turns, then a tick. The label and the circle are two layers
   of the same button (motion.js adds them), so the shape never breaks while its content changes. */
.m-part { display: inline-flex; align-items: center; justify-content: center; gap: inherit; }
.m-spin { position: absolute; inset: 0; display: grid; place-items: center; opacity: 0; pointer-events: none; }
.m-spin svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; overflow: visible; }
.m-spin .m-track { opacity: .26; }
.m-spin .m-turn { transform-box: fill-box; transform-origin: center; }
.m-spin .m-arc { stroke-dasharray: .26 1; }
.m-spin .m-check { stroke-dasharray: 1 1; stroke-dashoffset: 1; }
@keyframes m-turn { to { transform: rotate(360deg); } }
.m-on .m-shape { position: relative; overflow: hidden; }
.m-on .m-shape.btn-block { margin-inline: auto; }
.m-on .m-busy .m-turn { animation: m-turn .9s linear infinite; }

/* 6 and 7. One indicator for a set of choices: a navy shape laid over the current one, holding a white
   copy of its label. Its two edges ride different springs (the script picks which edge leads), so the
   leading edge stretches ahead and the trailing one catches up. The choices under it keep their plain
   look, so nothing flashes before the shape arrives. */
.m-ind, .m-ind-label { display: none; }
.m-on .m-ind-host { position: relative; }
.m-on .m-ind {
  position: absolute; z-index: 1; display: block; margin: 0; padding: 0; list-style: none; pointer-events: none;
  border-radius: var(--m-ind-r, var(--r-ctl)); background: var(--navy);
  transition:
    left var(--m-dl, var(--dur-morph)) var(--m-el, var(--spring-morph)),
    right var(--m-dr, var(--dur-morph)) var(--m-er, var(--spring-morph)),
    top var(--m-dt, var(--dur-morph)) var(--m-et, var(--spring-morph)),
    bottom var(--m-db, var(--dur-morph)) var(--m-eb, var(--spring-morph)),
    opacity var(--dur-fade) var(--spring-fade), transform var(--dur-snap) var(--spring-snap);
}
.m-on .m-ind.m-still { transition: none; }
.m-on .m-ind.m-away { opacity: 0; transform: scale(.86); }
.m-on .m-ind-label { position: absolute; z-index: 2; display: flex; margin: 0; pointer-events: none; }

/* The contents bar: the current chapter keeps its plain chip underneath. */
.m-on .reader-nav .m-ind-host a[aria-current] { background: var(--mist); color: var(--ink); }
.m-on .reader-nav .m-ind-host a[aria-current] .toc-n { box-shadow: inset 0 0 0 1.5px var(--line-strong); }
.m-on .reader-nav .m-ind-host a[aria-current].is-done .toc-n { box-shadow: none; }
@media (min-width: 1000px) { .m-on .reader-nav .m-ind-host a[aria-current] { background: transparent; } }
.m-on .reader-nav .m-ind-label { background: transparent; color: #fff; }
.m-on .reader-nav .m-ind-label .toc-n { box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .5); }
.m-on .reader-nav .m-ind-label.is-done .toc-n { background: var(--gold); box-shadow: none; color: var(--navy); }
/* The summary's answers: the picked one keeps the plain look underneath; the copy on the shape is white,
   with the gold dot the picked marker has. */
.m-on .m-ind-host .chip input:checked + span { background: #fff; border-color: var(--edge); color: var(--ink); }
.m-on .m-ind-host .chip input[type="radio"]:checked + span::before { box-shadow: inset 0 0 0 2px var(--edge); background: transparent; }
.m-on .m-ind-label.chip span { background: transparent; border-color: transparent; color: #fff; }
.m-on .m-ind-label.chip span::before { box-shadow: inset 0 0 0 4px var(--navy); background: var(--gold); }
.m-on .m-ind-host.chips { --m-ind-r: var(--r-pill); }
@media (max-width: 460px) { .m-on .m-ind-host.chips { --m-ind-r: var(--r-ctl); } }

/* 8. "Leave details": the box grows to the form's height while the pill's shape opens into it. */
.m-ghost { position: absolute; z-index: 0; pointer-events: none; background: var(--navy); }
.m-on .g-callback { position: relative; }
.m-on .g-callback > :not(.m-ghost) { position: relative; z-index: 1; }

/* 9. The floating bar grows out of a small gold circle to its full width, like an island, and its text
   comes in once there is room for it; going away, the text leaves first and the shape shrinks back.
   The shape is a clip on the full-width button, so nothing is laid out again while it grows (design review,
   2026-10-10: animating the width moved the button and its text on every frame, 75 small layout shifts in one
   scroll of the home page). A clip also cuts the button's own shadow, so the bar draws it around the clip. */
.m-on .sticky-cta {
  transform: none; visibility: hidden; transition: visibility 0s linear var(--dur-morph);
  filter: drop-shadow(0 9px 11px rgba(2, 27, 65, .3));
}
.m-on .sticky-cta.is-on { visibility: visible; transition: none; }
.m-on .sticky-cta .btn {
  display: flex; white-space: nowrap; box-shadow: none;
  clip-path: inset(0 calc(50% - 28px) round 28px); opacity: 0; transform: translateY(16px) scale(.86);
  transition: clip-path var(--dur-morph) var(--spring-morph) 40ms,
    opacity var(--dur-exit) var(--spring-exit) 160ms, transform var(--dur-morph) var(--spring-morph) 90ms;
}
.m-on .sticky-cta.is-on .btn {
  clip-path: inset(0 round var(--r-ctl)); opacity: 1; transform: none;
  transition: clip-path var(--dur-morph) var(--spring-morph) 90ms,
    opacity var(--dur-exit) var(--spring-exit), transform var(--dur-snap) var(--spring-snap);
}
/* The keyboard focus ring is drawn outside the button, where the clip would cut it. */
.m-on .sticky-cta.is-on .btn:focus-visible { clip-path: none; }
@media (forced-colors: active) { .m-on .sticky-cta { filter: none; } }
.m-on .sticky-cta .btn > * { opacity: 0; filter: blur(4px); transition: opacity var(--dur-exit) var(--spring-exit), filter var(--dur-exit) var(--spring-exit); }
.m-on .sticky-cta.is-on .btn > * { opacity: 1; filter: none; transition: opacity var(--dur-fade) var(--spring-fade) 230ms, filter var(--dur-fade) var(--spring-fade) 230ms; }
.m-on .book-bar .btn { clip-path: inset(0 calc(50% - 28px) round 31px); }
.m-on .book-bar.is-on .btn { clip-path: inset(0 round var(--r-ctl)); }

/* 10. FAQ: the plus turns half a circle and loses its upright stroke on the way, ending as the minus,
   while its circle turns navy. The script opens and closes the answer at the height of its text. */
@property --m-bar { syntax: "<color>"; inherits: false; initial-value: #021B41; }
@property --m-bg { syntax: "<color>"; inherits: false; initial-value: #F2F4F8; }
@property --m-v { syntax: "<length>"; inherits: false; initial-value: 12px; }
.m-on .faq-mark {
  background:
    linear-gradient(var(--m-bar), var(--m-bar)) center / 12px 2px no-repeat,
    linear-gradient(var(--m-bar), var(--m-bar)) center / 2px var(--m-v) no-repeat,
    var(--m-bg);
  transition: --m-bar var(--dur-fade) var(--spring-fade), --m-bg var(--dur-fade) var(--spring-fade),
    --m-v var(--dur-snap) var(--spring-snap), transform var(--dur-morph) var(--spring-morph);
}
.m-on .faq details[open] .faq-mark { --m-bar: var(--gold); --m-bg: var(--navy); --m-v: 0px; transform: rotate(180deg); }
.m-on .faq details.m-closing .faq-mark { --m-bar: var(--navy); --m-bg: var(--mist); --m-v: 12px; transform: none; }
.m-on .faq details.m-moving { overflow: clip; }

/* The ring by "בדקתם N מתוך 7" (owner, with the list): a gold arc that fills as chapters are ticked.
   It shows no number of its own; the count beside it says it in words. Its markup carries
   display="none", so a page without this stylesheet (the direction-B prototype) never shows it. */
.m-ring { display: none; }
.m-on .m-ring { display: inline-block; width: 22px; height: 22px; margin-inline-end: 8px; vertical-align: -5px; transform: rotate(-90deg); }
.m-ring circle { fill: none; stroke-width: 3; }
.m-ring .m-ring-track { stroke: var(--line); }
.m-ring .m-ring-fill { stroke: var(--gold); stroke-linecap: butt; stroke-dasharray: 1 1; stroke-dashoffset: calc(1 - var(--done, 0)); transition: stroke-dashoffset var(--dur-morph) var(--spring-morph); }

/* The contents bar's gold line fills on the same spring. */
.m-on .progress-bar::before { transition: transform var(--dur-morph) var(--spring-morph); }

/* Entrances that already exist: the same moves, on springs. Only their pace changes; whether they run at
   all is still up to page.css and www.css (never under reduced motion). */
.m-on.js [data-reveal] { transition: opacity var(--dur-reveal) var(--spring-reveal), transform var(--dur-reveal) var(--spring-reveal); }
.m-on .hero-copy > *, .m-on .home-hero-copy > *, .m-on .page-hero-copy > * { animation-duration: var(--dur-reveal); animation-timing-function: var(--spring-reveal); }
.m-on .book, .m-on .portrait img { animation-duration: var(--dur-settle); animation-timing-function: var(--spring-settle); }
.m-on .arc-line, .m-on .arc-line-2 { animation-duration: var(--dur-draw); animation-timing-function: var(--spring-draw); }

/* With reduced motion every change is made at once: base.css stops the durations, and this stops the
   delays too (QA, 2026-09-29: the floating bar showed empty for a moment before its text). */
@media (prefers-reduced-motion: reduce) {
  .m-on *, .m-on *::before, .m-on *::after { transition-delay: 0s !important; animation-delay: 0s !important; }
}

/* The tick a link-like button shows when it answers ("הקישור הועתק"). */
.linkish .icon { width: 18px; height: 18px; vertical-align: -4px; stroke-width: 2.2; }

/* The page change after the form: the old view leaves before the new one comes, so the two never mix. */
.m-on::view-transition-old(root) { animation: m-vt-out var(--dur-exit) var(--spring-exit) both; }
.m-on::view-transition-new(root) { animation: m-vt-in var(--dur-reveal) var(--spring-reveal) 120ms both; }
@keyframes m-vt-out { to { opacity: 0; } }
@keyframes m-vt-in { from { opacity: 0; transform: translateY(14px); } }