/* 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; }
.tick-wrap input { position: absolute; inset: 0; width: 100%; height: 100%; 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; } }