/* ============================================================
   neto.news — clean native design system
   No frameworks, no jQuery. Hebrew RTL native.
   ============================================================ */

/* Reset */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; tab-size: 4; scroll-behavior: smooth; }
img, picture, video, canvas, svg { display: block; max-width: 100%; height: auto; }
input, button, textarea, select { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }
[hidden] { display: none !important; }
ul, ol { list-style: none; }

/* Tokens */
:root {
  --c-red: #E31E24;
  --c-red-dark: #B81519;
  --c-red-soft: #FEE2E2;
  --c-ink: #0F1620;
  --c-text: #1F2937;
  --c-muted: #6B7280;
  --c-faint: #9CA3AF;
  --c-border: #E5E7EB;
  --c-border-strong: #D1D5DB;
  --c-bg: #FFFFFF;
  --c-bg-soft: #F9FAFB;
  --c-bg-tint: #F3F4F6;
  --c-success: #10B981;
  --c-success-soft: #ECFDF5;

  --ff-sans: 'Heebo', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
  --fs-xs: 0.8125rem;
  --fs-sm: 0.9375rem;
  --fs-base: 1rem;
  --fs-md: 1.0625rem;
  --fs-lg: 1.25rem;
  --fs-xl: 1.5rem;
  --fs-2xl: 2rem;
  --fs-3xl: 2.5rem;

  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px;
  --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px; --sp-9: 96px;

  --r-sm: 4px; --r-md: 8px; --r-lg: 12px; --r-xl: 20px; --r-pill: 999px;

  --sh-sm: 0 1px 2px rgba(15,22,32,.06);
  --sh-md: 0 4px 12px rgba(15,22,32,.06), 0 2px 4px rgba(15,22,32,.04);
  --sh-lg: 0 12px 28px rgba(15,22,32,.10), 0 4px 8px rgba(15,22,32,.05);

  --maxw: 1180px;
  --gutter: clamp(16px, 4vw, 32px);
}

html, body {
  background: var(--c-bg);
  color: var(--c-text);
  font-family: var(--ff-sans);
  font-size: var(--fs-md);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

/* Anti-scroll-x defense (iOS Safari) */
html, body { width: 100%; max-width: 100vw; overflow-x: hidden; overscroll-behavior-x: none; }
@supports (overflow-x: clip) { html, body { overflow-x: clip; } }

h1, h2, h3, h4 { font-family: var(--ff-sans); color: var(--c-ink); line-height: 1.2; font-weight: 800; letter-spacing: -0.01em; }
a { transition: color .15s ease; }

.container { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }

/* ============================================================
   Buttons
   ============================================================ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  padding: 12px 26px;
  border-radius: var(--r-pill);
  font-weight: 700; font-size: var(--fs-base);
  transition: all .15s ease;
  cursor: pointer; border: 1px solid transparent;
  text-align: center;
}
.btn--primary { background: var(--c-red); color: #fff; box-shadow: 0 4px 12px rgba(227,30,36,.22); }
.btn--primary:hover { background: var(--c-red-dark); transform: translateY(-1px); box-shadow: 0 6px 16px rgba(227,30,36,.28); }
.btn--ghost { background: transparent; color: var(--c-ink); border-color: var(--c-border-strong); }
.btn--ghost:hover { background: var(--c-bg-tint); }
.btn--lg { padding: 16px 36px; font-size: var(--fs-md); }
.btn--block { display: flex; width: 100%; }
.btn:disabled { opacity: .55; cursor: not-allowed; }

/* ============================================================
   Topbar (logo only — NOT sticky)
   ============================================================ */
.topbar { background: var(--c-bg); border-bottom: 1px solid var(--c-border); }
.topbar__inner {
  display: flex; align-items: center;
  /* RTL: flex-start = right side. The logo sits on the right edge of the topbar. */
  justify-content: flex-start;
  height: 64px;
}
.topbar__logo { display: inline-flex; align-items: center; }
.topbar__logo img { height: 40px; width: auto; }
@media (max-width: 720px) {
  .topbar__inner { height: 56px; }
  .topbar__logo img { height: 34px; }
}

/* Lead-page topbar — uses the page's sub-brand logo, kept centered as a letterhead */
.topbar--lead { position: static; padding-block: var(--sp-3); }
.topbar--lead .topbar__inner { height: auto; justify-content: center; }
.topbar__page-logo {
  max-height: 56px;
  max-width: 220px;
  height: auto;
  width: auto;
  display: block;
}
@media (max-width: 640px) {
  .topbar__page-logo { max-height: 44px; max-width: 170px; }
}

/* ============================================================
   Footer — minimal (used on articles + home + content)
   ============================================================ */
.foot {
  background: var(--c-bg-soft);
  color: var(--c-muted);
  padding-block: var(--sp-5);
  margin-top: var(--sp-7);
  border-top: 1px solid var(--c-border);
}
.foot__inner { display: flex; flex-direction: column; gap: var(--sp-3); }
.foot__row {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-4); flex-wrap: wrap;
}
.foot__brand-text { font-size: var(--fs-sm); color: var(--c-ink); font-weight: 700; }
.foot__nav { display: flex; gap: var(--sp-4); flex-wrap: wrap; }
.foot__nav a { color: var(--c-muted); font-size: var(--fs-sm); }
.foot__nav a:hover { color: var(--c-red); }
.foot__legal { font-size: var(--fs-xs); color: var(--c-faint); line-height: 1.55; max-width: 80ch; }

/* Lead-page footer */
.foot--lead {
  background: var(--c-bg-soft); color: var(--c-muted);
  padding-block: var(--sp-4); margin-top: 0;
  border-top: 1px solid var(--c-border);
}
.foot__lead {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: var(--sp-2); font-size: var(--fs-xs);
}
.foot__lead a { color: var(--c-red); text-decoration: underline; }
.foot__sep { color: var(--c-faint); }
.foot__seal { display: inline-flex; align-items: center; gap: 4px; }

/* ============================================================
   Homepage (news portal)
   ============================================================ */
.home { padding-block: var(--sp-5) var(--sp-8); }
.home__top { margin-bottom: var(--sp-7); }
.home__feature-row {
  display: grid;
  grid-template-columns: 1.55fr 1fr;
  gap: var(--sp-5);
  align-items: start;
}
@media (max-width: 880px) { .home__feature-row { grid-template-columns: 1fr; } }

.news-feat {
  display: flex; flex-direction: column;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--c-bg);
  border: 1px solid var(--c-border);
  transition: transform .15s ease, box-shadow .15s ease;
}
.news-feat:hover { transform: translateY(-2px); box-shadow: var(--sh-md); }
.news-feat__img {
  aspect-ratio: 16 / 9;
  background: var(--c-bg-tint);
  overflow: hidden;
}
.news-feat__img img { width: 100%; height: 100%; object-fit: cover; }
.news-feat__body { padding: var(--sp-5); }
.news-feat__cat {
  display: inline-block;
  padding: 3px 10px;
  background: var(--cat-c, var(--c-red));
  color: #fff; font-size: var(--fs-xs); font-weight: 700;
  border-radius: var(--r-sm); margin-bottom: var(--sp-3);
}
.news-feat__title {
  font-size: clamp(1.4rem, 3vw, 1.875rem);
  line-height: 1.25; color: var(--c-ink);
  margin-bottom: var(--sp-3);
}
.news-feat:hover .news-feat__title { color: var(--c-red); }
.news-feat__sum { color: var(--c-muted); font-size: var(--fs-base); margin-bottom: var(--sp-3); }
.news-feat__more { color: var(--c-red); font-weight: 700; font-size: var(--fs-sm); }

.home__secondary { display: flex; flex-direction: column; gap: var(--sp-3); }
.home__sec-title {
  font-size: var(--fs-sm); font-weight: 700; color: var(--c-ink);
  padding-bottom: var(--sp-2); border-bottom: 2px solid var(--c-red);
  margin-bottom: var(--sp-2);
}

.news-card {
  display: flex; gap: var(--sp-3);
  background: var(--c-bg);
  border-radius: var(--r-md);
  overflow: hidden;
  padding: 0;
}
.news-card--md { flex-direction: column; border: 1px solid var(--c-border); transition: transform .15s, box-shadow .15s, border-color .15s; }
.news-card--md:hover { transform: translateY(-2px); box-shadow: var(--sh-md); border-color: var(--c-red); }
.news-card--md .news-card__img { aspect-ratio: 16 / 10; }

.news-card--sm { grid-template-columns: 90px 1fr; display: grid; align-items: start; padding: var(--sp-2) 0; border-bottom: 1px solid var(--c-border); }
.news-card--sm:last-child { border-bottom: 0; }
.news-card--sm .news-card__img { width: 90px; height: 90px; flex-shrink: 0; border-radius: var(--r-sm); }
.news-card--sm .news-card__title { font-size: var(--fs-sm); line-height: 1.35; }
.news-card--sm .news-card__body { padding: 0; }

.news-card__img { background: var(--c-bg-tint); overflow: hidden; }
.news-card__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .25s ease; }
.news-card:hover .news-card__img img { transform: scale(1.05); }
.news-card__no-img { width: 100%; height: 100%; background: linear-gradient(135deg, #1F2937, #374151); }
.news-card__body { padding: var(--sp-3) 0 var(--sp-3); display: flex; flex-direction: column; gap: 4px; }
.news-card--md .news-card__body { padding: var(--sp-3) var(--sp-4) var(--sp-4); }
.news-card__tag { align-self: flex-start; font-size: var(--fs-xs); font-weight: 700; color: var(--tag-c, var(--c-red)); text-transform: uppercase; letter-spacing: .04em; }
.news-card__title { font-size: var(--fs-base); line-height: 1.3; color: var(--c-ink); font-weight: 700; transition: color .15s ease; }
.news-card:hover .news-card__title { color: var(--c-red); }
.news-card__sum { color: var(--c-muted); font-size: var(--fs-sm); line-height: 1.5; }

.home__cats { display: flex; flex-direction: column; gap: var(--sp-7); }
.news-cat__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--sp-4); }
.news-cat__title { display: flex; align-items: center; gap: var(--sp-3); font-size: var(--fs-xl); color: var(--c-ink); }
.news-cat__bar { width: 4px; height: 24px; background: var(--cat-c, var(--c-red)); border-radius: 2px; }
.news-cat__all { font-size: var(--fs-sm); color: var(--cat-c, var(--c-red)); font-weight: 700; }
.news-cat__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: var(--sp-5);
}

/* ============================================================
   News article page — 2-column with sticky sidebar
   ============================================================ */
.news-art { padding-block: var(--sp-5) var(--sp-7); background: var(--c-bg); }
.news-art__container {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: clamp(24px, 4vw, 56px);
  max-width: 1100px;
  margin-inline: auto;
  align-items: start;
}
@media (max-width: 900px) {
  .news-art__container { grid-template-columns: 1fr; }
}
.news-art__main { min-width: 0; max-width: 720px; }

.news-art__crumb { margin-bottom: var(--sp-3); }
.news-art__cat {
  display: inline-block;
  background: var(--c-ink); color: #fff;
  font-size: var(--fs-xs); font-weight: 800;
  padding: 6px 14px;
  letter-spacing: .02em;
}

.news-art__hero {
  margin: 0 0 var(--sp-4);
  width: 100%;
  border-radius: var(--r-lg);
  overflow: hidden;
}
.news-art__hero img {
  width: 100%;
  max-height: 420px;
  height: auto;
  object-fit: cover;
  display: block;
}
/* Wide panoramic hero (e.g. /tikon/ Knesset photo) — full bleed above
   the title. No negative margins (caused the category badge above to
   clip). The hero sits BEFORE the head, separated by space below. */
.news-art__hero--wide {
  margin: 0 calc(-1 * var(--gutter)) var(--sp-5);
  border-radius: 0;
  position: relative;
  width: calc(100% + 2 * var(--gutter));
  overflow: hidden;
}
.news-art__hero--wide img {
  width: 100%;
  max-height: 320px;
  object-fit: cover;
  object-position: center;
  display: block;
}
@media (max-width: 720px) {
  .news-art__hero--wide { margin-inline: calc(-1 * var(--gutter)); margin-bottom: var(--sp-4); }
  .news-art__hero--wide img { max-height: 180px; }
}
/* Category badge sits between hero and title now — give it room to breathe */
.news-art__crumb { margin-bottom: var(--sp-3); }
.news-art__head { margin-top: 0; }

.news-art__head { margin-bottom: var(--sp-5); }
.news-art__title { font-size: clamp(1.625rem, 3.6vw, 2.4rem); line-height: 1.2; color: var(--c-ink); margin-bottom: var(--sp-4); }
.news-art__meta {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-4); padding-block: var(--sp-3);
  border-top: 1px solid var(--c-border); border-bottom: 1px solid var(--c-border);
}
.news-art__byline { font-size: var(--fs-xs); color: var(--c-muted); }
.news-art__share { display: flex; gap: var(--sp-2); }
.news-art__share-btn {
  width: 36px; height: 36px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  color: #fff;
  transition: transform .15s ease, opacity .15s ease;
}
.news-art__share-btn:hover { transform: scale(1.06); }
.news-art__share-btn--wa { background: #25D366; }
.news-art__share-btn--email { background: #EF4444; }
.news-art__share-btn--fb { background: #1877F2; }

.news-art__body { font-size: var(--fs-md); line-height: 1.85; color: var(--c-text); }
.news-art__lede {
  font-size: 1.1875rem; line-height: 1.65; color: var(--c-ink);
  font-weight: 500;
  margin-bottom: var(--sp-5);
}

.news-art__cta {
  margin-top: var(--sp-6);
  padding: var(--sp-5);
  background: var(--c-bg-soft);
  border: 1px solid var(--c-border);
  border-inline-start: 4px solid var(--c-red);
  border-radius: var(--r-md);
  display: flex; justify-content: space-between; align-items: center; gap: var(--sp-4);
}
@media (max-width: 580px) { .news-art__cta { flex-direction: column; align-items: stretch; text-align: center; } }
.news-art__cta-body h3 { font-size: var(--fs-lg); margin-bottom: 4px; }
.news-art__cta-body p { color: var(--c-muted); font-size: var(--fs-sm); }

/* Embedded quiz block at the bottom of an article (when page has its own quiz) */
.art-quiz {
  margin-top: var(--sp-7);
  background: var(--c-bg-soft);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  padding: var(--sp-5);
  scroll-margin-top: 80px;
}
.art-quiz__head {
  display: flex; align-items: center; gap: var(--sp-3);
  margin-bottom: var(--sp-4); padding-bottom: var(--sp-3);
  border-bottom: 1px solid var(--c-border);
}
.art-quiz__avatar { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; box-shadow: 0 2px 6px rgba(0,0,0,.08); }
.art-quiz__name { font-weight: 800; color: var(--c-ink); font-size: var(--fs-md); display: inline-flex; align-items: center; gap: 6px; }
.art-quiz__dot { width: 8px; height: 8px; border-radius: 50%; background: #22C55E; box-shadow: 0 0 0 3px rgba(34,197,94,.2); }
.art-quiz__online { color: #22C55E; font-size: var(--fs-xs); font-weight: 600; }
.art-quiz__role { color: var(--c-muted); font-size: var(--fs-xs); }

/* In-article age-group CTA grid (the 4 image cards) */
.age-cta {
  margin: var(--sp-6) 0;
  padding: var(--sp-5);
  background: var(--c-bg-soft);
  border-radius: var(--r-lg);
}
.age-cta__title {
  font-size: var(--fs-lg); text-align: center; margin-bottom: var(--sp-4);
  color: var(--c-ink);
}
.age-cta__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-3);
}
@media (max-width: 580px) { .age-cta__grid { grid-template-columns: repeat(2, 1fr); } }
.age-card {
  display: flex; flex-direction: column;
  border-radius: var(--r-md); overflow: hidden;
  background: var(--c-bg); border: 1px solid var(--c-border);
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s;
}
.age-card:hover { transform: translateY(-3px); box-shadow: var(--sh-md); border-color: var(--c-red); }
.age-card__img { aspect-ratio: 1; overflow: hidden; }
.age-card__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .25s; }
.age-card:hover .age-card__img img { transform: scale(1.05); }
.age-card__label {
  text-align: center;
  padding: var(--sp-3) var(--sp-2);
  font-weight: 700; font-size: var(--fs-base);
  color: var(--c-ink);
}
.age-card:hover .age-card__label { background: var(--c-red); color: #fff; }

/* Sticky sidebar CTA on article pages */
.art-side { position: sticky; top: 16px; align-self: start; }
@media (max-width: 900px) {
  .art-side { position: static; margin-top: var(--sp-6); }
}
.art-side__card {
  background: var(--c-bg);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  padding: var(--sp-5);
  box-shadow: var(--sh-md);
  text-align: center;
}
.art-side__avatar {
  width: 80px; height: 80px;
  border-radius: 50%;
  object-fit: cover;
  margin: 0 auto var(--sp-3);
  display: block;
  background: var(--c-bg-tint);
  box-shadow: 0 2px 8px rgba(0,0,0,.08);
}
.art-side__title {
  font-size: var(--fs-lg);
  font-weight: 800;
  margin-bottom: var(--sp-2);
  color: var(--c-ink);
  line-height: 1.3;
}
.art-side__text {
  font-size: var(--fs-sm);
  color: var(--c-muted);
  margin-bottom: var(--sp-4);
  line-height: 1.5;
}
.art-side__buttons {
  display: flex; flex-direction: column;
  gap: var(--sp-2);
}

/* Orange status-CTA buttons (used in sidebar) */
.btn--orange {
  background: #F37021;
  color: #fff;
  border-radius: var(--r-md);
  padding: 14px 24px;
  font-weight: 700;
  font-size: var(--fs-base);
  box-shadow: 0 2px 6px rgba(243,112,33,.25);
}
.btn--orange:hover { background: #D85D14; transform: translateY(-1px); box-shadow: 0 4px 10px rgba(243,112,33,.32); }

/* article-body shared (used inside news-art and content pages) */
.article-body { font-size: var(--fs-md); line-height: 1.85; }
.article-body h2 { margin-top: var(--sp-6); margin-bottom: var(--sp-3); font-size: var(--fs-xl); }
.article-body h3 { margin-top: var(--sp-5); margin-bottom: var(--sp-3); font-size: var(--fs-lg); font-weight: 700; }
.article-body p { margin-bottom: var(--sp-4); }
.article-body p:empty, .article-body p:has(> br:only-child) { display: none; }
.article-body ul, .article-body ol { margin: var(--sp-4) 0; padding-inline-start: var(--sp-5); list-style: disc; }
.article-body ol { list-style: decimal; }
.article-body li { margin-bottom: 6px; }
.article-body figure {
  margin: var(--sp-5) auto;
  text-align: center;
  max-width: 540px;
}
.article-body figure img {
  width: 100%;
  max-height: 280px;
  height: auto;
  object-fit: contain;
  border-radius: var(--r-md);
  display: block;
  margin-inline: auto;
}
.article-body blockquote {
  border-inline-start: 4px solid var(--c-red);
  background: var(--c-bg-soft);
  padding: var(--sp-3) var(--sp-5);
  border-radius: var(--r-md);
  margin: var(--sp-5) 0;
  font-style: italic; color: var(--c-ink);
}
.article-body a { color: var(--c-red); text-decoration: underline; text-underline-offset: 2px; }
.article-body strong, .article-body b { color: var(--c-ink); font-weight: 700; }

/* ============================================================
   Lead-capture page (chat-bubble UI with Roi)
   ============================================================ */
.lead {
  background: linear-gradient(180deg, #FAFBFD 0%, #EEF1F5 100%);
  min-height: calc(100vh - 120px);
  padding-block: var(--sp-7) var(--sp-7);
}
.lead__inner {
  max-width: 460px;
  margin-inline: auto;
  text-align: center;
}

.lead-chat {
  background: var(--c-bg);
  border-radius: 18px;
  box-shadow: 0 10px 32px rgba(15,22,32,.08), 0 2px 6px rgba(15,22,32,.04);
  overflow: hidden;
  text-align: start;
  margin-bottom: var(--sp-4);
}
.lead-chat__head {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-5);
  border-bottom: 1px solid var(--c-border);
  background: linear-gradient(180deg, #FFFFFF 0%, #FAFBFD 100%);
}
.lead-chat__avatar {
  width: 52px; height: 52px;
  border-radius: 50%;
  object-fit: cover;
  background: #F1F4F8;
  box-shadow: 0 2px 6px rgba(15,22,32,.08);
  flex-shrink: 0;
}
.lead-chat__who { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.lead-chat__name {
  font-size: var(--fs-base); font-weight: 800; color: var(--c-ink);
  display: flex; align-items: center; gap: var(--sp-2);
}
.lead-chat__status {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: var(--fs-xs); color: var(--c-success); font-weight: 600;
}
.lead-chat__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--c-success); box-shadow: 0 0 0 3px rgba(16,185,129,.2); animation: pulse-dot 2s ease-in-out infinite; }
@keyframes pulse-dot { 0%, 100% { box-shadow: 0 0 0 3px rgba(16,185,129,.2); } 50% { box-shadow: 0 0 0 6px rgba(16,185,129,.1); } }
.lead-chat__role { font-size: var(--fs-xs); color: var(--c-muted); line-height: 1.4; }
.lead-chat__body { padding: var(--sp-5); background: #FAFBFD; }

/* Style the quiz inside chat */
.lead-chat .quiz__progress { margin-bottom: var(--sp-4); height: 4px; background: #E5E7EB; border-radius: var(--r-pill); overflow: hidden; }
.lead-chat .quiz__progress-bar { height: 100%; background: linear-gradient(90deg, var(--c-red), var(--c-red-dark)); }
.lead-chat .quiz__step-title {
  position: relative;
  background: var(--c-bg);
  border-radius: 14px;
  padding: 12px 16px;
  font-size: var(--fs-sm);
  font-weight: 500;
  line-height: 1.55;
  color: var(--c-ink);
  box-shadow: 0 1px 3px rgba(15,22,32,.06);
  margin-bottom: var(--sp-4);
  max-width: 95%;
}
.lead-chat .quiz__step-title::after {
  content: ""; position: absolute;
  top: -5px; right: 16px;
  width: 10px; height: 10px;
  background: var(--c-bg);
  transform: rotate(45deg);
  box-shadow: -1px -1px 1px rgba(15,22,32,.04);
}
.lead-chat .quiz__step-sub { margin-inline-start: var(--sp-3); margin-bottom: var(--sp-4); font-size: var(--fs-xs); color: var(--c-muted); }

.lead-trust {
  display: flex; flex-wrap: wrap; gap: var(--sp-4); justify-content: center;
  font-size: var(--fs-xs); color: var(--c-muted);
  margin-top: var(--sp-4);
}
.lead-trust li { display: inline-flex; align-items: center; gap: 4px; }
.lead-trust li::before { content: "✓"; color: var(--c-success); font-weight: 700; }

/* ============================================================
   Form fields
   ============================================================ */
.field { display: flex; flex-direction: column; gap: var(--sp-2); margin-bottom: var(--sp-3); }
.field__label { font-size: var(--fs-sm); font-weight: 600; color: var(--c-text); }
.field__input {
  appearance: none;
  border: 1px solid var(--c-border-strong);
  border-radius: 10px;
  padding: 12px 14px;
  font-size: var(--fs-base);
  background: var(--c-bg);
  transition: border-color .15s, box-shadow .15s;
  width: 100%;
  text-align: right !important;        /* RTL alignment for all text inputs */
  direction: rtl;
}
/* Phone / email / numeric inputs: keep digits in LTR reading order
   but align them to the right side of the box. */
.field__input[type="tel"],
.field__input[type="email"],
.field__input[inputmode="numeric"],
.field__input[inputmode="tel"] {
  direction: ltr !important;
  text-align: right !important;
  unicode-bidi: plaintext;
}
/* Placeholder also right-aligned */
.field__input::placeholder { text-align: right; opacity: .6; }
.field__input:focus { outline: none; border-color: var(--c-red); box-shadow: 0 0 0 4px rgba(227,30,36,.12); }
.field__input--error { border-color: var(--c-red); background: #FEF2F2; }
.field__error {
  font-size: var(--fs-xs);
  color: var(--c-red);
  margin-top: var(--sp-1);
  display: none;
  font-weight: 600;
  padding: 8px 12px;
  background: #FEF2F2;
  border-radius: 8px;
  border-inline-start: 3px solid var(--c-red);
  line-height: 1.4;
}
.field--invalid .field__error { display: block; animation: errIn .25s ease; }
@keyframes errIn {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.field--invalid { animation: field-shake .35s ease; }
@keyframes field-shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-4px); }
  75% { transform: translateX(4px); }
}

/* Soft 'needs attention' hint — pulsing border around the field. Used when
   phone is valid but accept is still unchecked (proactive UX hint). */
.field--needs-attention .field__check {
  background: #FFFBEB;
  border-radius: 8px;
  padding: 8px 10px;
  animation: needs-pulse 1.8s ease-in-out infinite;
}
.field--needs-attention .field__check input[type="checkbox"] {
  outline: 2px solid #F59E0B;
  outline-offset: 3px;
  border-radius: 2px;
}
@keyframes needs-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(245, 158, 11, .3); }
  50%      { box-shadow: 0 0 0 6px rgba(245, 158, 11, .08); }
}

.field__options { display: grid; gap: var(--sp-2); }
.field__options--2col { grid-template-columns: 1fr 1fr; }
.field__option {
  position: relative;
  padding: 12px 14px;
  border: 1px solid var(--c-border-strong);
  border-radius: 10px;
  background: var(--c-bg);
  color: var(--c-text);
  font-weight: 600; font-size: var(--fs-base);
  cursor: pointer; user-select: none;
  transition: all .15s ease;
  text-align: center;
}
.field__option input { position: absolute; opacity: 0; pointer-events: none; }
.field__option:hover { border-color: var(--c-red); background: #FFF8F8; }
.field__option.is-selected { border-color: var(--c-red); background: var(--c-red); color: #fff; }

.field__check { display: flex; align-items: flex-start; gap: var(--sp-3); cursor: pointer; padding: 4px 0; font-size: var(--fs-sm); color: var(--c-muted); line-height: 1.5; }
.field__check input { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--c-red); flex-shrink: 0; }
.field__check-label { color: var(--c-muted); }
.field__check-label a { color: var(--c-red); text-decoration: underline; }

.field__options--image { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-2); }
.field__option--image { display: flex; flex-direction: column; align-items: center; gap: var(--sp-2); padding: var(--sp-3); }
.field__option--image img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--r-sm); }

/* Slider field (hon — wealth amount) */
.field--slider .field__label { display: flex; justify-content: space-between; align-items: baseline; }
.field__slider-out { font-weight: 700; color: var(--c-red); font-variant-numeric: tabular-nums; }
.field__slider {
  width: 100%;
  -webkit-appearance: none; appearance: none;
  height: 6px; background: var(--c-bg-tint);
  border-radius: var(--r-pill);
  outline: none;
  margin: var(--sp-3) 0 var(--sp-1);
}
.field__slider::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--c-red);
  box-shadow: 0 2px 6px rgba(227,30,36,.4);
  cursor: pointer;
  border: 3px solid #fff;
}
.field__slider::-moz-range-thumb {
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--c-red);
  box-shadow: 0 2px 6px rgba(227,30,36,.4);
  cursor: pointer;
  border: 3px solid #fff;
}
.field__slider-ticks {
  display: flex; justify-content: space-between;
  font-size: var(--fs-xs); color: var(--c-muted);
  margin-bottom: var(--sp-3);
}
.field__slider-num { text-align: center; font-weight: 600; }

/* OTP field */
.field--otp { align-items: center; }
.otp-box {
  display: flex; gap: var(--sp-2); justify-content: center;
  direction: ltr;  /* OTP digits read LTR */
  margin-block: var(--sp-3);
  transition: transform .15s;
}
.otp-box--shake { animation: otp-shake .4s ease-in-out; }
@keyframes otp-shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-8px); }
  40% { transform: translateX(8px); }
  60% { transform: translateX(-6px); }
  80% { transform: translateX(6px); }
}
.otp-status--err ~ .otp-resend { animation: pulse-soft 1.2s ease infinite; }
@keyframes pulse-soft { 0%,100% { opacity: 1; } 50% { opacity: .6; } }
.otp-digit {
  width: 56px; height: 64px;
  text-align: center;
  font-size: 24px; font-weight: 700;
  border: 1px solid var(--c-border-strong);
  border-radius: var(--r-md);
  background: var(--c-bg);
  caret-color: var(--c-red);
  transition: border-color .15s, box-shadow .15s, transform .1s;
}
.otp-digit:focus {
  outline: none;
  border-color: var(--c-red);
  box-shadow: 0 0 0 4px rgba(227,30,36,.12);
  transform: translateY(-1px);
}
.otp-status {
  text-align: center; font-size: var(--fs-sm);
  margin-block: var(--sp-2);
  min-height: 22px;
}
.otp-status--pending { color: var(--c-muted); }
.otp-status--ok { color: var(--c-success); }
.otp-status--err { color: var(--c-red); }
.otp-resend {
  background: transparent;
  color: var(--c-red);
  font-size: var(--fs-sm);
  font-weight: 600;
  text-decoration: underline;
  padding: var(--sp-2);
  margin-inline: auto;
  display: block;
}
.otp-resend:disabled { color: var(--c-faint); cursor: not-allowed; text-decoration: none; }
@media (max-width: 480px) {
  .otp-digit { width: 48px; height: 56px; font-size: 22px; }
}

.quiz__step { display: none; animation: stepIn .25s ease; }
.quiz__step.is-active { display: block; }
@keyframes stepIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
.quiz__buttons { display: flex; gap: var(--sp-2); justify-content: space-between; margin-top: var(--sp-4); }
.quiz__buttons .btn { flex: 1; padding: 12px 18px; border-radius: 10px; font-size: var(--fs-base); }
.quiz__back { background: transparent !important; color: var(--c-muted) !important; border: 1px solid var(--c-border-strong) !important; box-shadow: none !important; flex: 0 1 auto !important; }
.quiz__back:hover { background: var(--c-bg-tint) !important; }
.quiz__step:first-of-type .quiz__back { display: none; }
.quiz__success { display: none; flex-direction: column; align-items: center; text-align: center; padding: var(--sp-7) var(--sp-4); }
.quiz__success.is-shown { display: flex; }
.quiz__success-icon { width: 72px; height: 72px; border-radius: 50%; background: var(--c-success-soft); color: var(--c-success); display: inline-flex; align-items: center; justify-content: center; font-size: 36px; margin-bottom: var(--sp-3); }
.quiz__success-title { font-size: var(--fs-xl); margin-bottom: var(--sp-2); color: var(--c-ink); }
.quiz__success-text { color: var(--c-muted); max-width: 32ch; }

/* ============================================================
   Thanks + 404 + content pages
   ============================================================ */
.thanks { min-height: 60vh; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: var(--sp-7) var(--sp-4); }
.thanks__icon { width: 88px; height: 88px; border-radius: 50%; background: var(--c-success-soft); color: var(--c-success); display: inline-flex; align-items: center; justify-content: center; font-size: 44px; margin-bottom: var(--sp-4); }
.thanks__title { font-size: clamp(1.625rem, 4vw, 2.25rem); margin-bottom: var(--sp-3); }
.thanks__text { color: var(--c-muted); font-size: var(--fs-md); max-width: 48ch; margin-bottom: var(--sp-5); }

.error-page { min-height: 60vh; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: var(--sp-3); padding: var(--sp-7) var(--sp-4); }
.error-page__code { font-size: clamp(4.5rem, 13vw, 8rem); font-weight: 900; color: var(--c-red); line-height: 1; }

/* Utilities */
.muted { color: var(--c-muted); }
.center { text-align: center; }
.mt-3 { margin-top: var(--sp-3); }
.mt-5 { margin-top: var(--sp-5); }
.mb-5 { margin-bottom: var(--sp-5); }
.hidden { display: none !important; }

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