/* ================================================================
   OfekVisa — design system
   Implements docs/07-wireframes-and-cro.md.
   No framework. No icon fonts — inline SVG only. Every rule works
   in both RTL and LTR; logical properties throughout, except the
   two places where physical direction is deliberate.
   ================================================================ */

:root {
  --ofek-radius: 12px;
  --ofek-radius-sm: 8px;
  --ofek-shadow: 0 1px 2px rgba(16,24,40,.05), 0 6px 20px rgba(16,24,40,.06);
  --ofek-shadow-lg: 0 10px 30px rgba(16,24,40,.10);
  --ofek-ring: 0 0 0 1px var(--wp--preset--color--line, #DFE4EC);
  --ofek-ink-2: #3C4759;
}

/* --- Section rhythm ---------------------------------------------
   ⚠️ Full-bleed is done with a pseudo-element BACKGROUND, never with
   negative margins + padding on the element itself.
   WordPress's constrained layout caps these groups at contentSize;
   a negative-margin bleed then fights that cap — the element cannot
   widen, the padding still applies, and the content box collapses to
   near-zero (symptom: one word per line). Painting the background
   behind the box avoids the whole class of bug.
   ---------------------------------------------------------------- */
.ofek-section { padding-block: clamp(2.5rem, 6vw, 4.5rem); position: relative; }
.ofek-section--tint::before {
  content: "";
  position: absolute;
  inset-block: 0;
  inset-inline-start: 50%;
  transform: translateX(-50%);
  width: 100vw;
  background: var(--wp--preset--color--surface, #F6F8FB);
  z-index: -1;
  pointer-events: none;
}
[dir="rtl"] .ofek-section--tint::before { transform: translateX(50%); }
.ofek-section > :first-child { margin-block-start: 0; }
.ofek-section > :last-child  { margin-block-end: 0; }

/* --- Icons ------------------------------------------------------- */
.ofek-i { width: 1.25em; height: 1.25em; flex: none; vertical-align: -.2em; }
.ofek-i--sm { width: 1em; height: 1em; }

/* --- Buttons ----------------------------------------------------- */
.ofek-btn-row { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; }
.ofek-btn {
  display: inline-flex; align-items: center; gap: .55rem;
  padding: .85rem 1.4rem;
  border-radius: var(--ofek-radius-sm);
  font-weight: 600; font-size: 1.0625rem; line-height: 1.2;
  text-decoration: none !important;
  border: 1px solid transparent;
  transition: transform .12s ease, box-shadow .12s ease, background-color .12s ease;
}
.ofek-btn:active { transform: translateY(1px); }
.ofek-btn--wa {
  background: var(--wp--preset--color--whatsapp, #25D366); color: #06301A !important;
  box-shadow: 0 1px 2px rgba(16,24,40,.08), 0 4px 14px rgba(37,211,102,.28);
}
.ofek-btn--wa:hover { background: #1EBB59; }
.ofek-btn--tel {
  background: var(--wp--preset--color--base, #fff);
  color: var(--wp--preset--color--primary, #1B2A4A) !important;
  border-color: var(--wp--preset--color--line, #DFE4EC);
  box-shadow: 0 1px 2px rgba(16,24,40,.05);
}
.ofek-btn--tel:hover { border-color: var(--wp--preset--color--primary, #1B2A4A); }

/* --- CTA card ---------------------------------------------------- */
.ofek-cta {
  background: var(--wp--preset--color--base, #fff);
  box-shadow: var(--ofek-ring), var(--ofek-shadow);
  border-radius: var(--ofek-radius);
  padding: clamp(1.25rem, 3vw, 1.75rem);
  margin-block: 2rem;
}
.ofek-cta__lead { font-weight: 700; font-size: 1.1875rem; margin: 0 0 .9rem; }
.ofek-cta__note {
  display: flex; align-items: center; gap: .4rem;
  margin: .9rem 0 0; font-size: .9375rem;
  color: var(--wp--preset--color--muted, #5B667C);
}

/* Standalone CTA bars (not the hero one, which resets its own box —
   see .ofek-hero .ofek-cta below) sat full-width inside their
   section — up to 1040px — while their content stayed right-aligned,
   which read as a mostly-empty box with a cluster of controls in one
   corner. Capping and centring makes the box hug its own content. */
.ofek-section > .ofek-cta {
  max-width: 640px;
  margin-inline: auto;
}

/* Hero compact variant (phoneStyle:"text") — the phone fallback line
   and status pill had no styling at all and fell back to bare
   browser defaults. */
.ofek-cta__phone {
  margin: .65rem 0 0;
  font-size: .9375rem;
  color: var(--wp--preset--color--muted, #5B667C);
}
.ofek-cta__phone-link {
  color: var(--wp--preset--color--primary, #1B2A4A);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: var(--wp--preset--color--line, #DFE4EC);
}
.ofek-cta__phone-link:hover { text-decoration-color: currentColor; }
.ofek-cta__status { margin-block-start: .6rem; }

/* --- Header ------------------------------------------------------ */
.ofek-header { border-block-end: 1px solid var(--wp--preset--color--line, #DFE4EC); }
.ofek-header__bar { align-items: center; gap: 1rem; }
.ofek-header__right { align-items: center; gap: 1.25rem; }
.ofek-header .wp-block-site-title a { color: var(--wp--preset--color--primary, #1B2A4A); }

.ofek-hdr-cta {
  display: inline-flex; align-items: center; gap: .45rem;
  background: var(--wp--preset--color--whatsapp, #25D366);
  color: #06301A !important;
  font-weight: 700; font-size: .9375rem; line-height: 1;
  padding: .6rem .95rem; border-radius: 999px;
  text-decoration: none !important; white-space: nowrap;
  transition: background-color .12s ease;
}
.ofek-hdr-cta:hover { background: #1EBB59; }
/* Sticky bar covers mobile, so the header CTA collapses to the icon. */
@media (max-width: 600px) {
  .ofek-hdr-cta { padding: .55rem; border-radius: 50%; }
  .ofek-hdr-cta__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
}

/* --- Hero -------------------------------------------------------- */
.ofek-hero {
  padding-block: clamp(1.5rem, 4vw, 3rem) clamp(2rem, 5vw, 3rem);
  position: relative;
}
/* Gradient painted behind, same technique as the tint — no box changes. */
.ofek-hero::before {
  content: "";
  position: absolute;
  inset-block: 0;
  inset-inline-start: 50%;
  transform: translateX(-50%);
  width: 100vw;
  background: radial-gradient(55rem 20rem at var(--ofek-hero-x, 82%) -20%, rgba(27,42,74,.10), transparent 64%);
  z-index: -1;
  pointer-events: none;
}
[dir="rtl"] .ofek-hero::before { transform: translateX(50%); }
[dir="ltr"] .ofek-hero { --ofek-hero-x: 18%; }

/* ⭐ Two columns: text + a media slot that reserves its space even when
   empty, so adding the founder photo later cannot reflow the page. */
.ofek-hero__grid {
  display: grid; gap: clamp(1.5rem, 4vw, 2.5rem);
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  align-items: center;
}
@media (max-width: 860px) {
  .ofek-hero__grid { grid-template-columns: 1fr; }
  .ofek-hero__media { order: -1; max-width: 260px; }
}

/* ⭐ Text reads from the natural side, not centred. */
.ofek-hero__text { text-align: start; }
.ofek-hero h1 { margin-block: 0 .6rem; max-width: 18ch; text-wrap: balance; }
.ofek-hero .ofek-lede { max-width: 46ch; margin-block: 0 1.25rem; }
.ofek-hero .ofek-cta { margin-block: 0 1.25rem; padding: 0; background: none; box-shadow: none; }
.ofek-hero .ofek-badges { margin-block-start: 1.75rem; }

.ofek-hero__media { position: relative; }
.ofek-hero__media img,
.ofek-hero__ph {
  display: block; width: 100%; aspect-ratio: 4 / 5;
  border-radius: var(--ofek-radius); object-fit: cover;
}
.ofek-hero__ph {
  background:
    linear-gradient(160deg, var(--wp--preset--color--primary-soft, #EEF2F8), #E3E9F3);
  box-shadow: var(--ofek-ring);
}
/* Empty slot holds layout on desktop but is not shown on small screens. */
@media (max-width: 860px) { .ofek-hero__media.is-empty { display: none; } }

/* --- Status pill -------------------------------------------------- */
.ofek-pill {
  display: inline-flex; align-items: center; gap: .45rem;
  background: var(--wp--preset--color--primary-soft, #EEF2F8);
  color: var(--wp--preset--color--primary, #1B2A4A);
  border-radius: 999px; padding: .45rem .8rem;
  font-size: .8438rem; font-weight: 600; white-space: nowrap;
}
.ofek-pill__dot {
  width: .5rem; height: .5rem; border-radius: 50%;
  background: var(--wp--preset--color--muted, #5B667C); flex: none;
}
/* The one deliberate non-WhatsApp green: it means "answered right now". */
.ofek-pill.is-open .ofek-pill__dot {
  background: var(--wp--preset--color--whatsapp, #25D366);
  box-shadow: 0 0 0 3px rgba(37,211,102,.22);
}

/* --- Trust badges ------------------------------------------------ */
/* ⚠️ Exactly 4 across on desktop, 2x2 on mobile — auto-fit produced
   orphan cards at intermediate widths. Explicit counts, no orphans. */
.ofek-badges {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: .75rem;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
@media (max-width: 1000px) { .ofek-badges { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 420px)  { .ofek-badges { grid-template-columns: 1fr; } }
.ofek-badge {
  display: flex; align-items: flex-start; gap: .7rem;
  background: var(--wp--preset--color--base, #fff);
  box-shadow: var(--ofek-ring);
  border-radius: var(--ofek-radius-sm);
  padding: .85rem .95rem;
}
.ofek-badge__ico {
  display: grid; place-items: center; flex: none;
  width: 2.25rem; height: 2.25rem; border-radius: 50%;
  background: rgba(27,42,74,.08);
  color: var(--wp--preset--color--primary, #1B2A4A);
}
.ofek-badge__txt { display: flex; flex-direction: column; line-height: 1.35; }
.ofek-badge__txt strong { font-size: .9375rem; }
.ofek-badge__txt span { font-size: .8125rem; color: var(--wp--preset--color--muted, #5B667C); }

/* --- Card grid --------------------------------------------------- */
.ofek-cards {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(245px, 1fr));
}
.ofek-card {
  background: var(--wp--preset--color--base, #fff);
  box-shadow: var(--ofek-ring), var(--ofek-shadow);
  border-radius: var(--ofek-radius);
  padding: 1.25rem;
  display: flex; flex-direction: column; gap: .5rem;
  transition: box-shadow .15s ease, transform .15s ease;
}
.ofek-card:hover { box-shadow: var(--ofek-ring), var(--ofek-shadow-lg); transform: translateY(-2px); }
.ofek-card__ico {
  display: grid; place-items: center;
  width: 2.5rem; height: 2.5rem; border-radius: var(--ofek-radius-sm);
  background: rgba(27,42,74,.08); color: var(--wp--preset--color--primary, #1B2A4A);
}
.ofek-card h3 { margin: .25rem 0 0; font-size: 1.1875rem; }
.ofek-card p  { margin: 0; font-size: .9688rem; color: var(--ofek-ink-2); }
.ofek-card__link {
  margin-block-start: auto; padding-block-start: .5rem;
  font-weight: 600; font-size: .9375rem; text-decoration: none;
}
/* Directional arrow — the one place direction is intentional. */
.ofek-card__link::after { content: " \2190"; }
[dir="ltr"] .ofek-card__link::after { content: " \2192"; }

/* --- Scenario cards ---------------------------------------------- */
.ofek-scenarios {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: .875rem;
  grid-template-columns: repeat(auto-fit, minmax(285px, 1fr));
}
.ofek-scenario {
  background: var(--wp--preset--color--base, #fff);
  border-radius: var(--ofek-radius);
  box-shadow: var(--ofek-ring);
  padding: 1.1rem 1.25rem;
  border-inline-start: 3px solid var(--wp--preset--color--primary, #1B2A4A);
}
.ofek-scenario h3 { margin: 0 0 .35rem; font-size: 1.0625rem; font-weight: 700; }
.ofek-scenario p  { margin: 0; font-size: .9375rem; color: var(--ofek-ink-2); }

/* --- Lede / relief ----------------------------------------------- */
.ofek-lede { font-size: clamp(1.125rem, 2.2vw, 1.3125rem); line-height: 1.6; color: var(--ofek-ink-2); }
.ofek-relief {
  font-size: clamp(1.1875rem, 2.4vw, 1.4375rem);
  font-weight: 600; line-height: 1.5;
  background: var(--wp--preset--color--primary-soft, #EEF2F8);
  border-inline-start: 4px solid var(--wp--preset--color--primary, #1B2A4A);
  border-radius: var(--ofek-radius-sm);
  padding: 1.1rem 1.25rem; margin-block: 1.75rem;
}

/* --- Trust block ------------------------------------------------- */
.ofek-trust {
  margin-block-start: 3.5rem; padding: clamp(1.25rem, 3vw, 1.75rem);
  background: var(--wp--preset--color--surface, #F6F8FB);
  border-radius: var(--ofek-radius);
}
.ofek-trust > h2 { margin-block-start: 0; font-size: 1.375rem; }
.ofek-credentials p { margin: 0; }
.ofek-disclaimer {
  font-size: .9375rem; line-height: 1.65; color: #475467;
  background: var(--wp--preset--color--base, #fff);
  border-inline-start: 3px solid var(--wp--preset--color--primary, #1B2A4A);
  border-radius: var(--ofek-radius-sm);
  padding: .9rem 1.1rem; margin-block-start: 1.25rem;
}

/* --- Byline ------------------------------------------------------ */
.ofek-byline {
  font-size: .9063rem; line-height: 1.55;
  color: var(--wp--preset--color--muted, #5B667C);
  border-block: 1px solid var(--wp--preset--color--line, #DFE4EC);
  padding-block: .75rem; margin-block: 1.5rem;
}
.ofek-byline strong { color: var(--wp--preset--color--contrast, #111A2E); font-weight: 600; }

/* --- Official sources -------------------------------------------- */
.ofek-official {
  background: var(--wp--preset--color--surface, #F6F8FB);
  border-radius: var(--ofek-radius); padding: 1.25rem; margin-block: 2rem;
}
.ofek-official h2 { font-size: 1.0625rem; margin-block-start: 0; }
.ofek-official ul { margin-block-end: 0; }

/* --- FAQ ---------------------------------------------------------- */
.ofek-faq { margin-block-start: 2.5rem; }
.ofek-faq__item {
  border: 1px solid var(--wp--preset--color--line, #DFE4EC);
  border-radius: var(--ofek-radius-sm);
  padding: .875rem 1.1rem; margin-block-end: .625rem;
  background: var(--wp--preset--color--base, #fff);
}
.ofek-faq__item summary {
  cursor: pointer; font-weight: 600; list-style: none;
  display: flex; justify-content: space-between; gap: 1rem;
}
.ofek-faq__item summary::-webkit-details-marker { display: none; }
.ofek-faq__item summary::after { content: "+"; font-weight: 400; color: var(--wp--preset--color--muted, #5B667C); }
.ofek-faq__item[open] summary::after { content: "\2212"; }
.ofek-faq__a { padding-block-start: .6rem; font-size: .9688rem; color: var(--ofek-ink-2); }
.ofek-faq__a p:last-child { margin-block-end: 0; }

/* --- Build markers — ⛔ must not survive to production ------------- */
.ofek-todo {
  background: #FFFAEB; border: 1px dashed #F79009;
  border-radius: var(--ofek-radius-sm);
  padding: .75rem 1rem; font-size: .9063rem; color: #93370D;
}

/* --- Sticky bar --------------------------------------------------- */
.ofek-sticky {
  background: var(--wp--preset--color--base, #fff);
  box-shadow: 0 -6px 20px rgba(16,24,40,.14);
  padding: .5rem; gap: .5rem;
}
.ofek-sticky a {
  min-height: 52px; border-radius: var(--ofek-radius-sm);
  gap: .5rem; font-size: 1.0313rem; font-weight: 700;
}
.ofek-sticky .ofek-wa  { background: #25D366; color: #06301A; }
.ofek-sticky .ofek-tel {
  background: var(--wp--preset--color--base, #fff);
  color: var(--wp--preset--color--primary, #1B2A4A);
  box-shadow: inset 0 0 0 1px var(--wp--preset--color--line, #DFE4EC);
}
/* Desktop has the inline CTAs; the bar is a mobile affordance. */
@media (min-width: 768px) { .ofek-sticky { display: none; } }

/* --- Header / footer --------------------------------------------- */
.wp-block-site-title a { text-decoration: none; }
.wp-block-navigation a { text-decoration: none; }
.wp-block-navigation a:hover { text-decoration: underline; }

/* --- Lists in body copy ------------------------------------------ */
.wp-block-list li { margin-block-end: .4rem; }

/* --- Footer: navy ------------------------------------------------- */
footer.wp-block-group.ofek-footer,
footer.wp-block-group {
  background: var(--wp--preset--color--primary, #1B2A4A) !important;
  color: #C9D3E4;
  border-block-start: 0 !important;
}
footer.wp-block-group a { color: #FFFFFF; }
footer.wp-block-group .ofek-disclaimer {
  color: #C9D3E4;
  background: rgba(255,255,255,.05);
  border-inline-start-color: var(--wp--preset--color--whatsapp, #25D366);
}
footer.wp-block-group .ofek-disclaimer strong { color: #FFFFFF; }
footer.wp-block-group bdi { color: #FFFFFF; }

/* --- Nav --------------------------------------------------------- */
.wp-block-navigation a { color: var(--wp--preset--color--primary, #1B2A4A); }

/* ================================================================
   PASS 2 — amber accent system, aliveness, motion
   Amber is an ACCENT ONLY: never on buttons, never on large areas.
   green = WhatsApp · navy = primary/secondary · amber = emphasis
   ================================================================ */

/* --- Two-colour headline (reusable) ------------------------------
   Max ONE amber phrase per heading, only where it carries meaning. */
.ofek-hl-accent { color: var(--wp--preset--color--amber, #E8A33D); }
.ofek-hl-break  { display: block; }

/* --- Horizon line: the wordmark motif under section headings ----- */
.ofek-section > h2::after,
.ofek-hl-line::after {
  content: "";
  display: block;
  width: 64px; height: 3px; border-radius: 3px;
  background: var(--wp--preset--color--amber, #E8A33D);
  margin-block-start: .7rem;
}

/* --- Trust badges: equal heights, amber-tint icon circles -------- */
.ofek-badges { align-items: stretch; }
.ofek-badge { height: 100%; align-items: center; }
.ofek-badge__ico {
  background: var(--wp--preset--color--amber-tint, #FDF3E3);
  color: var(--wp--preset--color--primary, #1B2A4A);
}
.ofek-badge__ico .ofek-i { width: 20px; height: 20px; }
.ofek-badge__txt strong {
  font-weight: 500; font-size: .9375rem;
  color: var(--wp--preset--color--primary, #1B2A4A);
}
.ofek-badge__txt span { font-size: .8125rem; color: var(--wp--preset--color--muted, #5B667C); }

/* --- Numbers strip ----------------------------------------------- */
.ofek-stats {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 1rem;
  grid-template-columns: repeat(3, minmax(0,1fr));
  text-align: center;
}
@media (max-width: 620px) { .ofek-stats { grid-template-columns: 1fr; gap: .75rem; } }
.ofek-stat {
  background: var(--wp--preset--color--base, #fff);
  box-shadow: var(--ofek-ring); border-radius: var(--ofek-radius);
  padding: 1.25rem 1rem;
}
.ofek-stat__n {
  display: block; font-weight: 900; line-height: 1;
  font-size: clamp(1.75rem, 4vw, 2.375rem);
  color: var(--wp--preset--color--primary, #1B2A4A);
  font-variant-numeric: tabular-nums;
}
.ofek-stat__l { display: block; margin-block-start: .4rem; font-size: .9063rem; color: var(--wp--preset--color--muted, #5B667C); }

/* --- Tool cards: action framing ---------------------------------- */
.ofek-cards--tools .ofek-card { border-block-start: 3px solid var(--wp--preset--color--amber, #E8A33D); }
.ofek-cards--tools .ofek-card__ico {
  background: var(--wp--preset--color--amber-tint, #FDF3E3);
  color: var(--wp--preset--color--primary, #1B2A4A);
}
.ofek-cards--tools .ofek-card__link::after { content: ""; }

/* --- Founder quote ----------------------------------------------- */
.ofek-quote {
  display: grid; gap: 1.5rem; align-items: center; margin: 0;
  grid-template-columns: 132px minmax(0,1fr);
  background: var(--wp--preset--color--primary, #1B2A4A);
  color: #EAF0FA;
  border-radius: var(--ofek-radius);
  padding: clamp(1.5rem, 4vw, 2.25rem);
}
@media (max-width: 620px) { .ofek-quote { grid-template-columns: 1fr; justify-items: start; } }
.ofek-quote__img { width: 132px; height: 132px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 4px rgba(232,163,61,.35); }
.ofek-quote__mark { width: 34px; height: 34px; color: var(--wp--preset--color--amber, #E8A33D); }
.ofek-quote blockquote { margin: .35rem 0 .9rem; }
.ofek-quote blockquote p {
  margin: 0; font-size: clamp(1.0625rem, 2.2vw, 1.25rem);
  line-height: 1.6; font-weight: 500;
}
.ofek-quote figcaption { font-size: .875rem; color: #B9C6DC; }
.ofek-quote figcaption strong { color: #fff; }

/* --- Last updated / recent updates -------------------------------- */
.ofek-updated { font-size: .875rem; color: var(--wp--preset--color--muted, #5B667C); }
.ofek-updates ul { list-style: none; margin: 0; padding: 0; }
.ofek-updates li { display: flex; gap: .75rem; padding-block: .4rem; border-block-end: 1px solid var(--wp--preset--color--line, #DFE4EC); }
.ofek-updates time { color: var(--wp--preset--color--muted, #5B667C); font-size: .875rem; min-width: 5.5rem; }

/* --- Micro-motion ------------------------------------------------- */
.ofek-reveal { opacity: 0; transform: translateY(14px); transition: opacity .5s ease, transform .5s ease; }
.ofek-reveal.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .ofek-reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
  .ofek-card:hover { transform: none; }
  .ofek-pill.is-open .ofek-pill__dot { animation: none !important; }
}

/* Pulsing dot — only while actually open */
@keyframes ofek-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(37,211,102,.55); }
  70%  { box-shadow: 0 0 0 7px rgba(37,211,102,0); }
  100% { box-shadow: 0 0 0 0 rgba(37,211,102,0); }
}
.ofek-pill.is-open .ofek-pill__dot { animation: ofek-pulse 2.2s ease-out infinite; }

/* --- FAQ accordion: works with zero JS via <details> -------------- */
.ofek-faq__item[open] { border-color: var(--wp--preset--color--amber, #E8A33D); }
.ofek-faq__item summary:hover { color: var(--wp--preset--color--primary, #1B2A4A); }

/* --- Brand lockup ------------------------------------------------- */
.ofek-brand {
  display: inline-flex; align-items: center; gap: .6rem;
  text-decoration: none !important; line-height: 1;
}
.ofek-brand__mark { display: block; width: auto; height: 40px; }
.ofek-brand__name {
  font-weight: 900; font-size: 1.25rem; letter-spacing: -.01em;
  color: var(--wp--preset--color--primary, #1B2A4A);
}
@media (max-width: 600px) {
  .ofek-brand__mark { height: 32px; }
  .ofek-brand__name { font-size: 1.0625rem; }
}
/* Footer sits on navy — the mark and name invert. */
footer .ofek-brand__name { color: #fff; }

/* ================================================================
   PASS 3 — inner-page templates
   The homepage design system, propagated to every service, guide,
   situation, tool and trust page. Same tokens, same motifs:
   navy workhorse · one amber accent per heading · horizon line
   under every h2 · Heebo 900/700/400 · motion that respects
   prefers-reduced-motion.
   ⚠️ Logical properties only — these pages run RTL (he) and LTR (en).
   ================================================================ */

/* --- Page shell + rhythm ----------------------------------------- */
.ofek-page { padding-block-end: clamp(2rem, 5vw, 3.5rem); }

.ofek-page__title {
  font-weight: 900;
  font-size: clamp(2rem, 4.6vw, 2.875rem);
  line-height: 1.14;
  letter-spacing: -0.015em;
  color: var(--wp--preset--color--primary, #1B2A4A);
  margin-block: 0 1rem;
  text-wrap: balance;
}
/* The two-colour headline works here exactly as on the homepage —
   the accent span is injected server-side from _ofek_h1_accent. */
.ofek-page__title .ofek-hl-accent { color: var(--wp--preset--color--amber, #E8A33D); }

/* h2 — horizon line, and enough air above that sections read as
   sections without needing a wrapper element per block. */
.ofek-page .wp-block-post-content > h2 {
  font-weight: 900;
  font-size: clamp(1.5rem, 3vw, 1.9375rem);
  line-height: 1.25;
  color: var(--wp--preset--color--primary, #1B2A4A);
  margin-block: clamp(2.25rem, 5vw, 3.25rem) .9rem;
  padding-block-start: clamp(1.25rem, 3vw, 2rem);
  border-block-start: 1px solid var(--wp--preset--color--line, #DFE4EC);
}
.ofek-page .wp-block-post-content > h2::after {
  content: "";
  display: block;
  width: 64px; height: 3px; border-radius: 3px;
  background: var(--wp--preset--color--amber, #E8A33D);
  margin-block-start: .7rem;
}
/* First h2 needs no rule above it — the lede already separates it. */
.ofek-page .wp-block-post-content > h2:first-of-type {
  border-block-start: 0; padding-block-start: 0;
}

.ofek-page .wp-block-post-content > h3 {
  font-weight: 700;
  font-size: clamp(1.125rem, 2.2vw, 1.3125rem);
  line-height: 1.35;
  color: var(--wp--preset--color--primary, #1B2A4A);
  margin-block: 1.75rem .5rem;
}

/* ⚠️ Do NOT cap the measure here.
   WP's constrained layout already caps every direct child at
   contentSize (760px) and forces `margin-left/right: auto !important`.
   Adding a narrower max-width therefore does not narrow the column —
   it CENTRES the element inside the 760px one, and the !important
   means a margin override cannot win it back. That is what put the
   h1, the h2s and the body copy on three different edges.
   One measure, set once, in theme.json. */
.ofek-page .wp-block-post-content > p { margin-block: 0 1rem; }

/* Body links: navy, amber underline. Reads as a link without
   introducing a third colour. */
.ofek-page .wp-block-post-content p > a,
.ofek-page .wp-block-post-content li > a {
  color: var(--wp--preset--color--primary, #1B2A4A);
  text-decoration-color: var(--wp--preset--color--amber, #E8A33D);
  text-decoration-thickness: 2px;
  text-underline-offset: .18em;
  font-weight: 600;
}
.ofek-page .wp-block-post-content p > a:hover,
.ofek-page .wp-block-post-content li > a:hover {
  color: var(--wp--preset--color--primary-dark, #101B31);
  background: var(--wp--preset--color--amber-tint, #FDF3E3);
}

/* --- Tables ------------------------------------------------------
   ⚠️ Wide tables scroll inside their own box; the page body must
   never scroll horizontally. */
.ofek-table { margin-block: 1.5rem; overflow-x: auto; }
.ofek-table table {
  width: 100%; border-collapse: collapse;
  font-size: .9688rem; line-height: 1.55;
  background: var(--wp--preset--color--base, #fff);
  border: 1px solid var(--wp--preset--color--line, #DFE4EC);
  border-radius: var(--ofek-radius-sm);
  overflow: hidden;
}
.ofek-table th,
.ofek-table td {
  padding: .7rem .9rem;
  text-align: start;
  border-block-end: 1px solid var(--wp--preset--color--line, #DFE4EC);
  vertical-align: top;
}
.ofek-table thead th {
  background: var(--wp--preset--color--primary, #1B2A4A);
  color: #fff; font-weight: 700; border-block-end: 0;
}
.ofek-table tbody tr:last-child th,
.ofek-table tbody tr:last-child td { border-block-end: 0; }
.ofek-table tbody tr:nth-child(even) { background: var(--wp--preset--color--surface, #F6F8FB); }
.ofek-table tbody th { font-weight: 600; color: var(--wp--preset--color--primary, #1B2A4A); }

/* Hours: today gets the amber tick. Computed server-side from the
   live business-hours table — never hard-coded. */
.ofek-hours table { max-width: 26rem; }
.ofek-hours tr.is-today th,
.ofek-hours tr.is-today td {
  background: var(--wp--preset--color--amber-tint, #FDF3E3);
  font-weight: 700;
}
.ofek-hours tr.is-today th { box-shadow: inset 3px 0 0 0 var(--wp--preset--color--amber, #E8A33D); }
[dir="rtl"] .ofek-hours tr.is-today th { box-shadow: inset -3px 0 0 0 var(--wp--preset--color--amber, #E8A33D); }
.ofek-hours__pill { margin-block-start: .9rem; }

/* --- NAP ---------------------------------------------------------- */
.ofek-nap {
  background: var(--wp--preset--color--surface, #F6F8FB);
  border-radius: var(--ofek-radius);
  padding: 1.1rem 1.25rem; margin-block: 1.25rem;
}
.ofek-nap p { margin-block: 0 .5rem; }
.ofek-nap p:last-child { margin-block-end: 0; font-size: .9375rem; color: var(--ofek-ink-2); }

/* --- Numbered triage list ---------------------------------------- */
.ofek-triage { counter-reset: ofek-t; list-style: none; padding-inline-start: 0; margin-block: 1.25rem; }
.ofek-triage li {
  counter-increment: ofek-t;
  position: relative;
  padding-inline-start: 2.75rem;
  margin-block-end: .85rem;
  min-height: 2rem;
}
.ofek-triage li::before {
  content: counter(ofek-t);
  position: absolute; inset-inline-start: 0; inset-block-start: -.1rem;
  width: 2rem; height: 2rem; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--wp--preset--color--amber-tint, #FDF3E3);
  color: var(--wp--preset--color--primary, #1B2A4A);
  font-weight: 700; font-size: .9375rem;
}

/* --- Ordered lists in body copy ---------------------------------- */
.ofek-page .wp-block-post-content > ol.wp-block-list:not(.ofek-triage) li { margin-block-end: .5rem; }

/* --- Relief / lede on inner pages -------------------------------- */
.ofek-page .ofek-lede { margin-block: 0 1.25rem; }

/* --- Motion: sections rise once, then stop being observed -------- */
.ofek-page .ofek-table,
.ofek-page .ofek-relief { will-change: auto; }

@media (max-width: 600px) {
  .ofek-page__title { font-size: clamp(1.75rem, 7.5vw, 2.125rem); max-width: none; }
  .ofek-table table { font-size: .9063rem; }
  .ofek-table th, .ofek-table td { padding: .6rem .7rem; }
}

/* --- ⚠️ 100vw vs. the scrollbar --------------------------------------
   The full-bleed backgrounds (.ofek-hero::before, .ofek-section--tint
   ::before) are 100vw wide. `100vw` includes the vertical scrollbar,
   so on any platform that reserves space for one — Windows desktop —
   they are ~8-17px wider than the viewport and the whole page gains a
   horizontal scroll. Measured at 8px on the homepage at 390px.

   `overflow-x: clip` rather than `hidden`: clip does not create a
   scroll container, so position:sticky inside (the mobile CTA bar)
   keeps working. hidden would silently break it.
   -------------------------------------------------------------------- */
.wp-site-blocks { overflow-x: clip; }

/* --- Anchor landing (RTL QA gate 15) -----------------------------------
   Jumping to #some-heading scrolls it flush to the viewport top, where
   the sticky header covers it. scroll-margin on the targets is more
   reliable than scroll-padding on the root, because it survives any
   scroll container the layout introduces later.
   ---------------------------------------------------------------------- */
html { scroll-behavior: smooth; scroll-padding-block-start: 5rem; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

.ofek-page h2[id], .ofek-page h3[id],
.ofek-section h2[id], .ofek-section h3[id],
:target { scroll-margin-block-start: 5rem; }

/* --- Breadcrumbs (RTL QA gate 4) ---------------------------------------
   DOM order is always home → … → current; the SEPARATOR GLYPH flips per
   direction, not the markup. Reversing the list would desync it from the
   BreadcrumbList schema, which is ordered by `position`.
   ---------------------------------------------------------------------- */
.ofek-crumbs { margin-block: 0 1rem; font-size: .875rem; line-height: 1.5; }
.ofek-crumbs ol {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; align-items: center; gap: .35rem;
}
.ofek-crumbs li { display: inline-flex; align-items: center; gap: .35rem; }
.ofek-crumbs a { color: var(--wp--preset--color--muted, #5B667C); text-decoration: none; }
.ofek-crumbs a:hover { color: var(--wp--preset--color--primary, #1B2A4A); text-decoration: underline; }
.ofek-crumbs__sep { color: var(--wp--preset--color--line, #DFE4EC); }
.ofek-crumbs [aria-current="page"] {
  color: var(--wp--preset--color--contrast, #111A2E); font-weight: 600;
}
/* The current page can be long; never let it push the row into a scroll. */
@media (max-width: 600px) {
  .ofek-crumbs [aria-current="page"] {
    max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
}

/* --- Hebrew descenders (RTL QA gate 16) — investigated, no change ------
   Measured on 26 headings: scrollHeight exceeds clientHeight by 3-4px,
   which looks like clipping and is not. Every one has `overflow-y:
   visible` and NO ancestor with a non-visible overflow, so the ink
   renders in full — glyph ink simply extends past the line box, which is
   normal for Hebrew descenders (ק ן ף ץ ך) at display weights.
   ⛔ Do not "fix" this by adding leading: the display line-heights are an
   approved design decision, and scrollHeight is not a clipping test.
   The test that matters is whether an ancestor clips.
   ---------------------------------------------------------------------- */


/* ================================================================
   PASS 4 — design v2, promoted sitewide 2026-08-09.
   Previewed at /preview-v2/ scoped to body.ofek-v2; approved and
   unscoped. Rationale in docs/25-design-v2-preview.
   Three things worth not relearning:
     · The constrained-layout max-width cap applies at EVERY level of
       the chain — main > post-content > section > child. Lifting one
       level alone does nothing; the parent box still caps the child.
     · `ch` is the width of "0", and Heebo's digits are ~0.29em, so a
       15ch cap on a 48px Hebrew headline resolves to ~210px and forces
       five lines. ⛔ Never size Hebrew headlines in ch.
     · ⛔ Hebrew is never negatively tracked. Latin keeps its tracking.
   ================================================================ */
/* ----------------------------------------------------------------
   2.1 — Hebrew is never negatively tracked.
   Negative tracking is a Latin display convention: it compensates for
   loose sidebearings on large Latin caps. Hebrew has no capitals and
   tighter native sidebearings, so tightening closes the counters of
   ם ס ע ט and crowds the descenders of ק ן ף ץ ך.
   Latin keeps its tracking — it needs it.
   ---------------------------------------------------------------- */
html,
h1, h2, h3,
.ofek-page__title,
.ofek-brand__name,
.ofek-stat__n { letter-spacing: 0; }

[dir="ltr"] h1,
[lang="en"] h1 { letter-spacing: -0.01em; }

/* ----------------------------------------------------------------
   2.3 — Weight scale. 900 was the DEFAULT heading weight, which left
   nothing in reserve. Move headings into the middle of the range and
   keep 900 for the one phrase that should be loudest.
   ---------------------------------------------------------------- */
h1, .ofek-page__title,
.ofek-hero h1            { font-weight: 800; }
h2,
.ofek-section > h2       { font-weight: 700; }
h3,
.ofek-card h3,
.ofek-scenario h3        { font-weight: 600; }
.ofek-hl-accent          { font-weight: 900; }   /* ⭐ reserved */

/* Lede moves to the primary ink — it was set in the secondary colour,
   which is why the opening paragraph read washed. */
.ofek-lede { color: #111A2E; }

/* ----------------------------------------------------------------
   2.2 — Measure, in two layers.

   The old page solved this with ONE width (760px) doing both jobs, and
   it did neither: 760 is too narrow for a hero and a card grid, and far
   too wide for prose — 18px Hebrew set ~92 characters per line where
   comfortable is 55–75. Hebrew tolerates long lines LESS than Latin
   because it has no capitals to mark sentence starts.

   So: STRUCTURE gets one wide anchor edge, PROSE is narrower inside it
   but pinned to the same edge. One edge, two measures.
   ⚠️ RULE 10: a narrower max-width on a constrained child CENTRES it,
   and WP's margins carry !important — hence the pinned start margin.
   ---------------------------------------------------------------- */
/* ⚠️ The cap is applied at every level of the constrained chain, so it
   has to be lifted at every level. `main` caps .wp-block-post-content,
   which caps .ofek-hero / .ofek-section, which caps their children —
   widening only the grandchildren does nothing, because the parent box
   is still 760 wide. */
main.wp-block-group > *,
.wp-block-post-content,
.wp-block-post-content > *,
.ofek-section > *,
.ofek-hero > * { max-width: 1040px; }

.ofek-section > p,
.ofek-section > .wp-block-list,
.wp-block-post-content > p,
.wp-block-post-content > .wp-block-list {
  max-width: 62ch;
  margin-inline: 0 auto !important;
}
.ofek-hero .ofek-lede { max-width: 46ch; }
/* The two ofek-hl-break spans already force the headline's two lines —
   a ch-cap on top of them only forces a third and fourth. */
.ofek-hero h1 { max-width: none; }

/* ----------------------------------------------------------------
   2.4 — Raise the type floor. Nothing below 15px; body-adjacent text
   at 16px. 13px Hebrew is genuinely hard to read: Hebrew has no
   x-height/cap-height distinction to aid recognition at small sizes.
   ---------------------------------------------------------------- */
.ofek-card p,
.ofek-scenario p,
.ofek-faq__a,
.ofek-table,
.ofek-badge__txt strong { font-size: 1rem; }
.ofek-badge__txt span,
.ofek-byline,
.ofek-crumbs,
.ofek-stat__l           { font-size: .9375rem; }
.ofek-card h3,
.ofek-scenario h3       { font-size: 1.125rem; }
.ofek-card__link        { font-size: 1rem; }

/* ----------------------------------------------------------------
   1.2 — Delete the card chrome.
   ring + 20px ambient shadow + 12px radius + hover lift is the SaaS
   card signature. Depth implies interactivity; most of these are not
   buttons. Information sits ON the page, not floating above it.
   ---------------------------------------------------------------- */
.ofek-card,
.ofek-badge,
.ofek-stat,
.ofek-scenario,
.ofek-faq__item {
  box-shadow: none;
  border: 1px solid #DFE4EC;
  border-radius: 4px;
}
.ofek-card:hover {
  box-shadow: none;
  transform: none;
  border-color: #1B2A4A;
}
.ofek-cta {
  box-shadow: none;
  border: 1px solid #DFE4EC;
  border-radius: 4px;
}
.ofek-btn { border-radius: 3px; }
.ofek-btn--wa { box-shadow: none; }

/* ----------------------------------------------------------------
   1.3 — One icon system, not two. Badge icons sat on amber-tint
   circles, card icons on navy-8% rounded squares. Strip the
   containers; the glyph carries the colour.
   ---------------------------------------------------------------- */
.ofek-badge__ico { display: none; }
.ofek-badge {
  display: block;
  border: 0;
  border-inline-start: 2px solid #E8A33D;
  border-radius: 0;
  padding: .2rem 0 .2rem .9rem;
  padding-inline-start: .9rem;
}
.ofek-badges { gap: 1.25rem 1.75rem; }

.ofek-card__ico,
.ofek-cards--tools .ofek-card__ico {
  background: none;
  width: auto; height: auto;
  color: #E8A33D;
  justify-content: start;
}
.ofek-card__ico .ofek-i { width: 22px; height: 22px; }

/* ----------------------------------------------------------------
   1.4 + 3.4 — Stop the white/pale-grey zebra. #F6F8FB is 4% off white:
   it costs a colour and buys no separation, and alternating it is what
   a page does when it has no other way to say "new section".
   Sections separate with space and a hairline at the content measure.
   ---------------------------------------------------------------- */
.ofek-section--tint::before { display: none; }
.ofek-section + .ofek-section {
  border-block-start: 1px solid #DFE4EC;
}

/* ----------------------------------------------------------------
   3.2 — Navy gets a surface. It was 2.5% of the page and existed only
   as letterforms; authority in this register comes from MASS of a dark
   colour. Masthead + one full-bleed section + the existing footer.
   ---------------------------------------------------------------- */
.ofek-header {
  background: #1B2A4A !important;
  border-block-end: 0;
}
.ofek-header .ofek-brand__name { color: #FFFFFF; }
.ofek-header .wp-block-navigation a { color: #D7DFEE; }
.ofek-header .wp-block-navigation a:hover { color: #FFFFFF; }
.ofek-header .wp-block-navigation__responsive-container-open { color: #FFFFFF; }

/* 1.1 — the masthead now shares the content measure. It was 1160px
   against a 760px body: in RTL the logo sat 199px outboard of the
   anchor edge of every element below it. */
.ofek-header__bar {
  max-width: 1040px;
  margin-inline: auto;
  width: 100%;
}

/* The differentiation section, full-bleed navy — replaces the grey
   tint it used to sit on. */
.ofek-section--dark { position: relative; color: #E7EDF8; }
.ofek-section--dark::before {
  content: "";
  position: absolute; inset-block: 0; inset-inline-start: 50%;
  transform: translateX(-50%);
  width: 100vw; background: #1B2A4A; z-index: -1; pointer-events: none;
}
[dir="rtl"] .ofek-section--dark::before,
.ofek-section--dark::before { transform: translateX(50%); }
.ofek-section--dark h2 { color: #FFFFFF; }
.ofek-section--dark p { color: #D7DFEE; }
.ofek-section--dark strong { color: #FFFFFF; }
.ofek-section--dark .ofek-hl-accent { color: #F0B75E; }
/* the quote card is already navy — on navy it needs its own edge */
.ofek-section--dark .ofek-quote {
  background: #16233D;
  border: 1px solid rgba(255,255,255,.10);
}

/* ----------------------------------------------------------------
   3.3 — Amber was 0.10% of the page — quieter than the WhatsApp green
   at 0.16%. Stop spending it on 96%-luminance tints; spend it on rules
   and marks so it actually reaches threshold.
   ⛔ Frequency is unchanged. This raises AREA, not occurrences.
   ---------------------------------------------------------------- */
.ofek-section > h2::after,
.wp-block-post-content > h2::after {
  width: 120px;
  height: 4px;
}
.ofek-scenario {
  border-inline-start: 3px solid #E8A33D;
}
.ofek-cards--tools .ofek-card {
  border-block-start: 3px solid #E8A33D;
}

/* ----------------------------------------------------------------
   1.5 — Hero portrait at scale. 306px was too small to be a portrait
   and too large to be an avatar. 3:4 crop, near-square corners, and a
   column wide enough for it to be a statement.
   🔶 Source is 600x800 — adequate at 1x, soft on a 2x display.
      Replace with a real photograph shot at 1600px on the long edge.
   ---------------------------------------------------------------- */
.ofek-hero__grid {
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: clamp(1.75rem, 4vw, 3.5rem);
  align-items: center;
}
.ofek-hero__media img,
.ofek-hero__ph {
  aspect-ratio: 3 / 4;
  border-radius: 2px;
}
/* ⛔ No ch-cap on the headline. `ch` is the width of "0", and Heebo's
   digits are narrow (~0.29em), so 15ch resolved to ~210px and forced
   the H1 to five lines inside a 471px column. The two ofek-hl-break
   spans already define where it breaks. */

@media (max-width: 860px) {
  .ofek-hero__grid { grid-template-columns: 1fr; }
  /* ⚠️ Prior review: on mobile the photo pushed the value proposition
     below the fold. Headline first, portrait after the CTA. */
  .ofek-hero__media { order: 2; max-width: 320px; margin-inline: 0 auto; }
  .ofek-hero__text  { order: 1; }
}

/* ----------------------------------------------------------------
   Footer — already navy. Align it to the same measure as the masthead.
   ---------------------------------------------------------------- */
footer.wp-block-group .ofek-footer__inner { max-width: 1040px; margin-inline: auto; }

/* --- ⚠️ Navy masthead: contrast fixes -------------------------------------
   1) NAV LINK COLOUR. Core emits
        .wp-block-navigation .wp-block-navigation-item__content.wp-block-navigation-item__content
        { color: inherit }
      — a DOUBLED class, specificity (0,3,0), which beats
      `.ofek-header .wp-block-navigation a` at (0,2,1). The link therefore
      ignored our colour and inherited body ink (#111A2E) onto a #1B2A4A
      header: near-black on navy.
      ⭐ Because core forces `inherit`, the lever is the CONTAINER colour,
      not the anchor. Colour the container and the links follow.
   2) The open mobile overlay has a WHITE background, so it must invert
      back to dark ink or it becomes light-on-white.
   -------------------------------------------------------------------------- */
.ofek-header .wp-block-navigation,
.ofek-header .wp-block-navigation__container,
.ofek-header .wp-block-navigation__responsive-container-content { color: #E7EDF8; }
.ofek-header .wp-block-navigation a:hover { color: #FFFFFF; }
.ofek-header .wp-block-navigation__responsive-container-open { color: #FFFFFF; }

/* ⛔ The overlay is white — invert, or the menu disappears on mobile. */
.ofek-header .wp-block-navigation__responsive-container.is-menu-open,
.ofek-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
  background: #FFFFFF;
  color: #1B2A4A;
}
.ofek-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close { color: #1B2A4A; }

/* The wordmark and the light logo variant. */
.ofek-header .ofek-brand__name { color: #FFFFFF; }
footer .ofek-brand__name { color: #FFFFFF; }

/* Hero supporting line — sits between the H1 and the company lede.
   It carries the reader's situation, so it outranks the lede visually. */
.ofek-hero__support {
  font-size: clamp(1.0625rem, 2vw, 1.1875rem);
  line-height: 1.6;
  font-weight: 600;
  color: #111A2E;
  max-width: 44ch;
  margin-block: 0 .85rem;
}
.ofek-hero .ofek-lede {
  font-size: 1rem;
  color: var(--ofek-ink-2);
  font-weight: 400;
}

/* ----------------------------------------------------------------
   1.6 — Hero refinement pass (2026-08-11), promoted from preview-v4.
   Portrait ~18% smaller share of the grid (was 1.15fr/1fr, image
   ≈46.5% → now 1.55fr/0.85fr, image ≈35%), tighter vertical rhythm
   through the text stack so the CTA reads as its conclusion, and the
   CTA's leftover 1px border (from the base .ofek-cta rule, 1.2 above)
   removed — the hero already strips padding/background/shadow.
   ---------------------------------------------------------------- */
.ofek-hero__grid {
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 0.85fr);
}
.ofek-hero__media {
  max-width: 340px;
  margin-inline-start: auto;
}
.ofek-hero__media img {
  object-position: center 12%;
}
.ofek-hero h1 { margin-block-end: .5rem; }
.ofek-hero .ofek-hero__support { margin-block-end: .875rem; }
.ofek-hero .ofek-cta { margin-block-end: .75rem; border: none; }

/* Hero CTA row (2026-08-11): back to two real buttons — the compact
   phoneStyle:"text" mode ("או התקשרו" as an underlined text line)
   read as an afterthought and Shlomi rejected it. The WA button gets
   a size bump here only: it is THE action of the page. */
.ofek-hero .ofek-btn--wa {
  font-size: 1.125rem;
  padding: 1rem 1.75rem;
}
.ofek-hero .ofek-btn--tel { padding: .95rem 1.4rem; }

/* "לא פשוט" — accent size only, ~88% of the headline. Colour is
   deliberately NOT overridden here: it stays the plain
   var(--wp--preset--color--amber) from .ofek-hl-accent (line ~376) —
   a darker/desaturated variant was tried in preview-v4 and reverted
   per Shlomi's call, keep at the original amber going forward. */
.ofek-hero .ofek-hl-accent { font-size: 0.88em; }

/* Header decluttering, HOME ONLY — "לאזרחים אמריקאים" is item 5 of 8
   in the live menu (verified against rendered HTML; the nav link has
   no href server-side, so this can't target by URL). Scoped to
   body.home, which WordPress sets on the front page regardless of
   language — every other page keeps the full 8-item menu. */
body.home .wp-block-navigation__container > .wp-block-navigation-item:nth-child(5) {
  display: none;
}

/* Trust badges, HOME ONLY — quieter divider than the amber accent
   line at 1.3 above, which read as a corporate-deck accent rather
   than a calm separator. Scoped to body.home because the same
   .ofek-badge class is shared with the trust-strip block used on
   situation/service pages, which keep the amber line. */
body.home .ofek-badge { border-inline-start: 1px solid #DFE4EC; }

/* --- Publish-aware links: de-linked anchor text reads as plain prose --- */
.ofek-link-pending { color: inherit; text-decoration: none; cursor: text; }

/* --- Tool engine UI (assets/tool.js) ------------------------------ */
.ofek-tool-mount { max-width: 40rem; margin-inline: auto; }

.ofek-tool-progress {
  block-size: 6px; border-radius: 999px; overflow: hidden;
  background: var(--wp--preset--color--line, #DFE4EC);
  margin-block-end: var(--wp--preset--spacing--40, 1.75rem);
}
.ofek-tool-progress__fill {
  display: block; block-size: 100%;
  background: var(--wp--preset--color--amber, #E8A33D);
  transition: inline-size 220ms ease-out;
}
@media (prefers-reduced-motion: reduce) { .ofek-tool-progress__fill { transition: none; } }

.ofek-tool-step { display: flex; flex-direction: column; gap: 1rem; }
.ofek-tool-q { font-size: 1.375rem; font-weight: 900; margin: 0; }
.ofek-tool-help { color: var(--wp--preset--color--muted, #5B667C); margin: -.5rem 0 0; font-size: .9375rem; }

.ofek-tool-opts { display: flex; flex-direction: column; gap: .625rem; }
.ofek-tool-opt {
  text-align: start; padding: .875rem 1.125rem; border-radius: 10px;
  border: 1px solid var(--wp--preset--color--line, #DFE4EC);
  background: var(--wp--preset--color--base, #fff);
  font-size: 1rem; font-family: inherit; cursor: pointer;
  transition: border-color 120ms, background 120ms;
}
.ofek-tool-opt:hover, .ofek-tool-opt:focus-visible {
  border-color: var(--wp--preset--color--amber, #E8A33D);
  background: var(--wp--preset--color--amber-tint, #FDF3E3);
}

.ofek-tool-input {
  width: 100%; padding: .75rem 1rem; border-radius: 10px;
  border: 1px solid var(--wp--preset--color--line, #DFE4EC);
  font-family: inherit; font-size: 1rem; box-sizing: border-box;
}
.ofek-tool-input:focus-visible { border-color: var(--wp--preset--color--primary, #1B2A4A); }

.ofek-tool-back {
  align-self: flex-start; background: none; border: none; cursor: pointer;
  color: var(--wp--preset--color--muted, #5B667C); font-size: .9375rem;
  padding: .25rem 0; text-decoration: underline;
}

.ofek-tool-result { display: flex; flex-direction: column; gap: 1rem; }
.ofek-tool-result__verdict { font-size: 1.25rem; font-weight: 900; margin: 0; }
.ofek-tool-result__reason { color: var(--wp--preset--color--muted, #5B667C); margin: 0; }
.ofek-tool-result__steps { margin: 0; padding-inline-start: 1.25rem; display: flex; flex-direction: column; gap: .5rem; }
.ofek-tool-result__guide { margin: 0; }

/* --- Tool result disclaimer + print (document checklist) ---------- */
.ofek-tool-disclaimer {
  font-size: .8125rem; color: var(--wp--preset--color--muted, #5B667C);
  border-inline-start: 3px solid var(--wp--preset--color--line, #DFE4EC);
  padding-inline-start: .875rem; margin: 0;
}

@media print {
  header, footer, nav, .ofek-sticky, .ofek-crumbs,
  .ofek-trust-strip, .ofek-btn-row, .ofek-tool-progress,
  .ofek-tool-result__guide, .ofek-trust { display: none !important; }
  .ofek-tool-result__steps { padding-inline-start: 1.5rem; }
  body { padding: 0 !important; }
}

/* ----------------------------------------------------------------
   1.7 — "איך זה עובד" as a timeline (2026-08-11, promoted from
   preview-v5). These are sequential steps, not independent entry
   points, so the card chrome was working against the content.
   Desktop only — a wrapped/stacked connector line reads worse than
   no line at all.
   ---------------------------------------------------------------- */
@media (min-width: 900px) {
  .ofek-cards--timeline { position: relative; }
  .ofek-cards--timeline::before {
    content: "";
    position: absolute;
    top: 1.375rem;
    inset-inline: 12%;
    height: 2px;
    background: var(--wp--preset--color--line, #DFE4EC);
    z-index: 0;
  }
  .ofek-cards--timeline .ofek-card {
    background: none;
    border: none;
    box-shadow: none;
    padding-inline: .5rem;
    position: relative;
    z-index: 1;
    text-align: center;
    align-items: center;
  }
  .ofek-cards--timeline .ofek-card__ico {
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 50%;
    background: var(--wp--preset--color--base, #fff);
    border: 2px solid var(--wp--preset--color--amber, #E8A33D);
    color: var(--wp--preset--color--primary, #1B2A4A);
    font-weight: 700;
    font-size: 1rem;
    line-height: 1;
    display: grid;
    place-items: center;
    justify-content: center;
    box-sizing: border-box;
    padding: 0;
    margin-inline: auto;
  }
}

/* 1.8 — Tools as a product panel, not another card grid (promoted
   from preview-v5). This is the section that's a genuine
   differentiator — interactive tools, not just pages — and it read
   identically to every other deck on the page. */
.ofek-cards--tools .ofek-card {
  background: var(--wp--preset--color--amber-tint, #FDF3E3);
  border-color: transparent;
}
.ofek-cards--tools .ofek-card__link {
  display: inline-flex;
  align-items: center;
  margin-block-start: .4rem;
  padding: .55rem 1rem;
  background: var(--wp--preset--color--primary, #1B2A4A);
  color: #fff;
  border-radius: var(--ofek-radius-sm);
  font-weight: 600;
  text-decoration: none;
}
.ofek-cards--tools .ofek-card__link:hover { background: #24365C; }

/* 1.9 — Secondary body text floor (promoted from preview-v5). Card
   copy sat at 15.5px and scenario copy at 15px, both under the
   site's own stated 16px body-adjacent floor ("2.4 — Raise the type
   floor" above). */
.ofek-card p,
.ofek-scenario p {
  font-size: 1rem;
}

/* ----------------------------------------------------------------
   2.0 — Case-study cards (2026-08-11, first used on
   /situations/emergency-appointment/). Distinct from every other
   deck on the site on purpose: scenarios are white + navy edge,
   tools are amber-tint + navy buttons — cases get soft-navy panels
   with a visa-type chip. Flat (no shadow), per the "delete the card
   chrome" decision at 1.2.
   ⛔ Content rules live in the vault's case-database.md: anonymised,
   situation → outcome only, no method, mandatory footer disclaimer.
   ---------------------------------------------------------------- */
.ofek-cases {
  list-style: none; margin: 1.5rem 0 0; padding: 0;
  display: grid; gap: 1rem;
  /* 340px floor → 2×2 at the 1040px content width, not an orphaned 3+1. */
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
}
.ofek-case {
  background: var(--wp--preset--color--primary-soft, #EEF2F8);
  border-radius: var(--ofek-radius-sm);
  padding: 1.4rem 1.5rem;
  display: flex; flex-direction: column; gap: .6rem;
}
.ofek-case__tag {
  align-self: flex-start;
  font-size: .8125rem; font-weight: 700; line-height: 1;
  color: var(--wp--preset--color--primary, #1B2A4A);
  background: #fff;
  border: 1px solid var(--wp--preset--color--line, #DFE4EC);
  border-radius: 999px;
  padding: .3rem .7rem;
}
.ofek-case h3 { margin: 0; font-size: 1.125rem; font-weight: 700; }
.ofek-case p  { margin: 0; font-size: 1rem; color: var(--ofek-ink-2); }
.ofek-case__result { color: #111A2E; font-weight: 500; }

/* ----------------------------------------------------------------
   2.1 — WhatsApp buttons, premium pass (2026-08-11, owner rejected
   the neon look). The raw brand green (#25D366) with dark-green
   text read cheap at button scale. Deep green + WHITE text + pill
   radius, matching the header pill's shape language. AA check:
   #168742 vs #fff ≈ 4.9:1 — passes for normal text.
   ⚠️ The status-pill dot (.ofek-pill__dot) deliberately KEEPS the
   bright #25D366 — as a 8px dot it reads as "online now", not as a
   surface, and the brightness is the point there.
   ---------------------------------------------------------------- */
.ofek-btn--wa {
  background: #168742;
  color: #FFFFFF !important;
  border-radius: 999px;
  box-shadow: 0 2px 10px rgba(22, 135, 66, .25);
}
.ofek-btn--wa:hover { background: #126E36; }
/* The phone button matches the pill shape so the pair reads as one
   family — quiet white secondary next to the green primary. */
.ofek-btn--tel { border-radius: 999px; }

.ofek-hdr-cta { background: #168742; color: #FFFFFF !important; }
.ofek-hdr-cta:hover { background: #126E36; }

.ofek-sticky .ofek-wa { background: #168742; color: #FFFFFF; }