/* ==========================================================================
   סדר — audience theme pass
   Warm, legible, restaurant-first. Loaded after tokens.css / styles.css.
   ========================================================================== */

:root {
  --section-y: clamp(64px, 7vw, 112px);
  --paper-warm: #f2e7d3;
  --forest: #123a2a;
  --cream: #f8f2e7;
  --terracotta: #b0512a;
  --terracotta-soft: #f0d9c8;
}

/* ---------- Navigation ---------------------------------------------------- */

.nav__row { height: 72px; }
.nav__links a:not(.btn) { font-size: var(--t-body); font-weight: 600; }
.nav.is-stuck { background: color-mix(in srgb, var(--c-bg) 88%, transparent); }

/* ---------- Hero ---------------------------------------------------------- */

.hero { padding-top: clamp(36px, 5vw, 72px); }
.hero__copy .lead { max-width: 48ch; }
.hero__eyebrow { font-size: var(--t-caption); }
.hero .h1 em {
  font-style: normal;
  color: var(--c-accent);
}
.hero__note { font-size: var(--t-small); margin-top: -10px; }

/* Objection-handling row under the hero CTA */
.trust {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.trust li {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: var(--t-small);
  font-weight: 500;
  color: var(--c-muted);
}
.trust svg { width: 18px; height: 18px; flex: none; color: var(--c-accent); }

/* ---------- Buttons ------------------------------------------------------- */

.btn--lg { min-height: 56px; padding-inline: var(--s-6); font-size: var(--t-body-lg); }
.btn--primary {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), 0 12px 26px -16px rgba(28, 107, 71, .8);
}
.btn--primary:hover { transform: translateY(-2px); }
.btn:focus-visible,
.billing button:focus-visible,
.nav__toggle:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--c-accent) 42%, transparent);
  outline-offset: 3px;
}

/* ---------- Section rhythm ------------------------------------------------ */

.section--tint { background: var(--paper-warm); }
.section--ink { background: var(--forest); color: var(--cream); }
.section--ink .h2,
.section--ink .h3,
.section--ink .eyebrow { color: var(--cream); }
.section--ink .eyebrow::before { background: #e9c9a8; }
.section-head .eyebrow {
  padding: 5px 12px;
  border-radius: var(--r-pill);
  background: color-mix(in srgb, var(--c-accent) 8%, transparent);
}
.section--ink .section-head .eyebrow { background: rgba(248, 242, 231, .1); }

/* ---------- Metrics band -------------------------------------------------- */

.section--ink .metric { border-top-color: rgba(248, 242, 231, .26); }
.section--ink .metric strong {
  color: var(--cream);
  font-size: clamp(40px, 4.4vw, 56px);
  letter-spacing: -.02em;
}
.section--ink .metric span { color: rgba(248, 242, 231, .84); font-size: var(--t-small); }
.section--ink .metric:nth-child(even) strong { color: var(--cream); }

/* ---------- Steps --------------------------------------------------------- */

.step::before {
  content: counter(s);
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--c-accent-soft);
  color: var(--c-accent-text);
  font-family: var(--f-body);
  font-weight: 800;
  font-size: var(--t-body-lg);
  line-height: 1;
}

/* ---------- Product visuals ----------------------------------------------- */

.spot,
.scene { background: linear-gradient(160deg, var(--c-surface), var(--paper-warm)); }
.spot { border-radius: var(--r-xl); }

/* ---------- Testimonial --------------------------------------------------- */

.qf {
  background: var(--c-surface);
  border: var(--bw) solid var(--c-border);
  border-radius: var(--r-xl);
  padding: clamp(26px, 4vw, 56px);
  box-shadow: var(--sh-md);
}
.qf blockquote { font-size: var(--t-h2); line-height: 1.28; }
.qf .avatar {
  width: 52px;
  height: 52px;
  font-size: var(--t-body);
  background: var(--terracotta-soft);
  color: #8a3f06;
}
.qf__stat { background: var(--c-accent-soft); border-color: transparent; }
.qf__stat strong { color: var(--c-accent); }

/* ---------- Pricing ------------------------------------------------------- */

.billing { padding: 6px; }
.billing button { min-height: 48px; font-size: var(--t-body); }
.billing .save { font-size: var(--t-caption); }

.tiers { gap: 20px; }
.tier { padding: var(--s-7) var(--s-6); }
.price strong { font-size: var(--t-display); letter-spacing: -.02em; }
.price span { font-size: var(--t-small); }

.tier--featured {
  background: var(--forest);
  border-color: var(--forest);
  color: var(--cream);
  box-shadow: 0 28px 56px -26px rgba(18, 58, 42, .65);
}
.tier--featured .h3,
.tier--featured .price strong { color: var(--cream); }
.tier--featured .price span,
.tier--featured .muted { color: rgba(248, 242, 231, .74); }
.tier--featured .ticks li { color: rgba(248, 242, 231, .92); }
.tier--featured .ticks svg { color: #e9c9a8; }
.tier--featured .btn--ghost,
.tier--featured .btn--primary {
  background: var(--cream);
  border-color: var(--cream);
  color: var(--forest);
  box-shadow: none;
}
.tier--featured .btn--ghost:hover,
.tier--featured .btn--primary:hover { background: #fff; transform: translateY(-1px); }
.tier--featured .tier__tag {
  background: var(--terracotta);
  color: #fff;
  text-transform: none;
  letter-spacing: 0;
  font-size: var(--t-caption);
  padding: 6px 14px;
}

/* ---------- Closing CTA --------------------------------------------------- */

.ctas {
  background: var(--forest);
  border-color: var(--forest);
  color: var(--cream);
  box-shadow: 0 34px 64px -34px rgba(18, 58, 42, .6);
}
.ctas .h1 { color: var(--cream); }
.ctas .h1 em { font-style: normal; color: #e9c9a8; }
.ctas .lead { color: rgba(248, 242, 231, .84); }
.ctas .ticks li { color: rgba(248, 242, 231, .9); }
.ctas .ticks svg { color: #e9c9a8; }
.ctas .form label { color: var(--cream); }
.ctas .form input {
  background: var(--cream);
  border-color: transparent;
  color: var(--c-text);
}
.ctas .form input::placeholder { color: #6f756b; }
.ctas .form__note { color: rgba(248, 242, 231, .72); }
.ctas .form__ok { color: #bfe3c9; }
.ctas .btn--primary { background: var(--cream); color: var(--forest); box-shadow: none; }

/* ---------- Footer -------------------------------------------------------- */

.footer {
  background: var(--paper-warm);
  border-top-color: var(--c-border);
  padding-block: var(--s-7) var(--s-5);
}
.footer__legal { margin-top: var(--s-6); }

/* ---------- Mobile sticky CTA -------------------------------------------- */

.sticky-cta { display: none; }

@media (max-width: 760px) {
  body { padding-bottom: 88px; }

  .sticky-cta {
    position: fixed;
    inset-inline: 10px;
    bottom: 10px;
    z-index: 80;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 12px;
    border: var(--bw) solid var(--c-border);
    border-radius: 16px;
    background: color-mix(in srgb, var(--c-surface) 94%, transparent);
    -webkit-backdrop-filter: saturate(1.3) blur(12px);
    backdrop-filter: saturate(1.3) blur(12px);
    box-shadow: 0 18px 40px -18px rgba(22, 37, 29, .45);
    visibility: hidden;
    transform: translateY(150%);
    opacity: 0;
    pointer-events: none;
    transition: transform var(--dur-base) var(--ease), opacity var(--dur-base) var(--ease), visibility 0s linear var(--dur-base);
  }
  .sticky-cta.is-on {
    visibility: visible;
    transform: none;
    opacity: 1;
    pointer-events: auto;
    transition: transform var(--dur-base) var(--ease), opacity var(--dur-base) var(--ease), visibility 0s;
  }
  .sticky-cta__copy { display: grid; gap: 1px; line-height: 1.2; min-width: 0; }
  .sticky-cta__copy strong { font-size: var(--t-small); font-weight: 700; white-space: nowrap; }
  .sticky-cta__copy span { font-size: var(--t-caption); color: var(--c-muted); white-space: nowrap; }
  .sticky-cta .btn { flex: none; min-height: 46px; padding-inline: 16px; font-size: var(--t-small); }

  .hero__eyebrow { font-size: var(--t-caption); }
  .qf { padding: 24px 20px; }
  .tier { padding: var(--s-6) var(--s-5); }
  .section--ink .metric strong { font-size: clamp(34px, 9vw, 44px); }
}

@media (prefers-reduced-motion: reduce) {
  .sticky-cta { transition: none; }
}