/* 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; }
.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; } }

/* 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; }

/* 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; }
}
.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); }
.glance-foot a { 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. */

/* 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); }

/* 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, .free :focus-visible,
.review-lead :focus-visible, .booking-card :focus-visible, .close :focus-visible, .www-footer :focus-visible,
.book-bar :focus-visible, .skip:focus-visible { outline-color: var(--gold); }
.menu-panel :focus-visible { outline-color: var(--gold-ink); }
/* 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 a small round photo sits by the name, and the portrait closes the hero. */
.home-hero { padding-block: clamp(112px, 10vw, 148px) 0; }
.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 {
  display: flex; align-items: center; gap: 12px; 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-id-photo { flex: none; width: 46px; height: 46px; border-radius: 50%; box-shadow: 0 0 0 2px var(--navy), 0 0 0 4px var(--gold); }
@media (min-width: 1000px) { .home-id-photo { display: none; } }
.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, so the round
   photo by the name is redundant, 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-id-photo { display: none; }
  .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; }

@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; }
}
@keyframes arc-draw { from { stroke-dashoffset: 60; } }
@keyframes arc-draw-2 { from { stroke-dashoffset: 32; } }

/* Three areas, one portfolio: a ledger of three columns under one navy rule, not cards. */
.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) {
  .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; } }
/* 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.45rem; }
  .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: four numbered steps joined by a gold line, then the service that follows, and what is free,
   with its own booking button on a computer. A column until 1100px, one row of four above. */
.steps { background: var(--mist); }

/* 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%); }
.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 { display: grid; }
.step { position: relative; display: grid; grid-template-columns: 58px minmax(0, 1fr); column-gap: 14px; padding-block: 16px; }
.step p { max-width: 60ch; }
.step-num {
  grid-row: span 2; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%;
  background: var(--navy); color: var(--gold-soft);
  font-family: var(--font-display); font-weight: 800; font-size: 1.4rem;
}
.step h3 { font-weight: 800; font-size: 1.22rem; line-height: 1.35; color: var(--navy); text-wrap: balance; }
.step p { margin-top: 4px; color: var(--muted); }
.step:not(:last-child)::after {
  content: ""; position: absolute; inset-inline-start: 23px; top: 70px; bottom: -6px; width: 2px;
  background: linear-gradient(var(--gold), rgba(194, 135, 34, .12));
}
@media (min-width: 1100px) {
  .steps-list { grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: clamp(32px, 4vw, 64px); }
  .step { grid-template-columns: minmax(0, 1fr); align-content: start; padding-block: 0; }
  .step-num { grid-row: auto; width: 56px; height: 56px; margin-bottom: 20px; font-size: 1.6rem; }
  .step:not(:last-child)::after {
    inset-inline-start: 72px; inset-inline-end: calc(12px - clamp(32px, 4vw, 64px));
    top: 27px; bottom: auto; width: auto; height: 2px;
    background: linear-gradient(to left, var(--gold), rgba(194, 135, 34, .15));
  }
}
.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 var(--line-strong);
}
.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: var(--navy); 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; } }
/* 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. */
.service-loop { margin-top: clamp(40px, 5vw, 60px); padding-top: clamp(28px, 3vw, 40px); border-top: 2px solid var(--navy); }
.loop-head { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: 16px; }
.loop-mark { width: clamp(52px, 5vw, 64px); height: clamp(52px, 5vw, 64px); color: var(--gold); }
.loop-head h3 {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(1.55rem, 1.25rem + 1.2vw, 2.2rem); line-height: 1.15; color: var(--navy); text-wrap: balance;
}
.loop-sub { margin-top: 6px; color: var(--muted); 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: var(--navy); }
.loop-grid h4 + p { margin-top: 4px; color: var(--muted); }
.loop-list { margin-top: 12px; border-top: 1px solid var(--line-strong); }
.loop-list li { position: relative; padding-block: 11px; padding-inline-start: 24px; border-bottom: 1px solid var(--line); 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. */
.loop-triggers { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 24px; }
/* 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; }
  .step { padding-block: 12px; }
}

/* 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; }
.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; }
.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 { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr) auto; column-gap: 44px; align-items: baseline; 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.35rem, 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 carries a small drawing in the brand's gold line, inside a thin gold ring.
   On a phone the drawing stands beside the text; above 900px it opens the row. */
.article-list a { grid-template-columns: 52px 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: 52px; height: 52px; border-radius: 50%;
  color: var(--gold-ink); box-shadow: inset 0 0 0 1px rgba(194, 135, 34, .4); transition: background-color .25s;
}
.article-art svg { width: 32px; height: 32px; }
.article-list a:hover .article-art { background: rgba(194, 135, 34, .08); }
@media (min-width: 900px) {
  .article-list a { grid-template-columns: 60px minmax(0, 1fr) minmax(0, 1.05fr) auto; column-gap: 32px; }
  .article-list a > :not(.article-art) { grid-column: auto; }
  .article-art { grid-row: auto; align-self: center; width: 60px; height: 60px; }
  .article-art svg { width: 36px; height: 36px; }
}
@media (max-width: 399px) {
  .article-list a { grid-template-columns: 44px minmax(0, 1fr); column-gap: 12px; }
  .article-art { width: 44px; height: 44px; }
  .article-art svg { width: 28px; height: 28px; }
}
@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 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 ---------- */

/* 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; }

/* 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: 40px 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;
}
.service-reads .article-art { grid-row: auto; align-self: center; width: 40px; height: 40px; }
.service-reads .article-art svg { width: 24px; height: 24px; }
.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 { background: rgba(194, 135, 34, .08); }
@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); }
.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; }
/* 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 but stacked at every width (the reading column
   is too narrow for the four-column row), 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 { grid-template-columns: 52px minmax(0, 1fr); column-gap: 16px; align-items: start; padding-block: 22px; }
.article-more .article-list a > :not(.article-art) { grid-column: 2; }
.article-more .article-art { grid-row: 1 / span 3; align-self: start; width: 52px; height: 52px; }
.article-more .article-art svg { width: 32px; height: 32px; }
.article-more .article-list h3 { font-size: clamp(1.2rem, 1.1rem + .4vw, 1.4rem); }
.article-more .more-link { margin-top: 18px; }
@media (max-width: 399px) {
  .article-more .article-list a { grid-template-columns: 44px minmax(0, 1fr); column-gap: 12px; }
  .article-more .article-art { width: 44px; height: 44px; }
  .article-more .article-art svg { width: 28px; height: 28px; }
}
/* 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 reads as one: navy words over a gold underline. */
.article p 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; }