/* ==========================================================================
 *  WhatsapAI — homepage stylesheet
 *  Tokens & scale lifted from WhatsApp marketing CSS (static.whatsapp.net)
 *  — see ._adhc typography, #111b21 / #25d366 / #43cd66, pill buttons.
 *  Loaded ONLY on /index.php. Scoped under .page-home.
 * ========================================================================== */

/* Variable font — same file WhatsApp serves for “WhatsApp Sans Var” */
@font-face {
  font-family: "WhatsApp Sans Var";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("https://static.whatsapp.net/rsrc.php/yN/r/fQtw5exLIdT.woff2") format("woff2");
}

/* Hard reset on html/body — kill the browser's default 8px body margin
   and any html margins so the hero photo can reach the very top edge of
   the viewport without a white/dark sliver appearing above it. */
html, body { margin: 0; padding: 0; }

.page-home {
  /* WhatsApp brand palette (from their compiled CSS) */
  --wa-green: #25d366;
  --wa-green-hover: #43cd66;
  --wa-green-dark: #1ebe5a;
  --wa-green-deep: #128c7e;
  --wa-teal: #075e54;

  --wa-ink: #111b21;            /* primary UI / button text on green */
  --wa-text: #111b21;           /* headlines */
  --wa-body: #1c1e21;           /* body (Facebook legacy token on wa.com) */
  --wa-text-2: #3b4a54;
  --wa-text-3: #667781;
  --wa-line: #e9edef;
  --wa-line-2: #d1d7db;
  --wa-border-strong: #111b21;
  --wa-bg: #ffffff;
  --wa-bg-soft: #f8f9fa;        /* alternates (Meta family) */
  --wa-bg-soft-2: #f0f2f5;
  --wa-bg-mint: #e7fce3;
  --wa-chat-bg: #efeae2;
  --wa-bubble-out: #d9fdd3;
  --wa-bubble-in: #ffffff;
  --wa-footer-bg: #111b21;
  --wa-footer-text: #e9edef;
  --wa-footer-muted: #8696a0;
  --wa-footer-rule: #33463f;

  --wa-radius: 14px;
  --wa-radius-lg: 24px;
  --wa-shadow-sm: 0 1px 2px rgba(17, 27, 33, .06);
  --wa-shadow-md: 0 8px 28px rgba(17, 27, 33, .10);
  --wa-shadow-lg: 0 24px 60px rgba(17, 27, 33, .18);

  /* WhatsApp Sans for Latin; Hebrew/Cyrillic fall back gracefully */
  --wa-font: "WhatsApp Sans Var", "Helvetica Neue", Helvetica, Arial, "Noto Sans Hebrew", "Noto Sans", sans-serif;

  background: var(--wa-bg);
  color: var(--wa-text);
  font-family: var(--wa-font);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  margin: 0;
  padding: 0;
  line-height: 1.5;
}

.page-home *,
.page-home *::before,
.page-home *::after { box-sizing: border-box; }

.page-home a { color: inherit; text-decoration: none; }
.page-home img, .page-home svg { display: block; }
.page-home picture, .page-home video { max-width: 100%; }

/* Skip link (whatsapp.com pattern) */
.page-home .wa-skip {
  position: absolute;
  left: -9999px;
  top: 12px;
  z-index: 1000;
  padding: 10px 16px;
  background: var(--wa-green);
  color: var(--wa-ink);
  font-weight: 500;
  font-size: 14px;
  border-radius: 50px;
}
.page-home .wa-skip:focus {
  left: 12px;
  outline: 2px solid var(--wa-ink);
  outline-offset: 2px;
}

/* Container */
.page-home .wa-container {
  width: 100%;
  max-width: 1250px;
  margin: 0 auto;
  padding: 0 24px;
}
@media (max-width: 640px) {
  .page-home .wa-container { padding: 0 18px; }
}

/* ==========================================================================
 *  Top navigation — sticky white bar with green CTA pill on the right
 * ========================================================================== */
/* Header sits OVER the cream hero — transparent at the top, gets the
   cream band on scroll. position: fixed (not sticky) so it does NOT take
   any space in the normal flow; this lets <main> start at y=0 and the
   hero photo background reach the very top of the viewport. */
.page-home .wa-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  background: transparent;
  border-bottom: 0;
  transition: background .2s ease;
}
.page-home .wa-nav.is-scrolled {
  background: rgba(246, 240, 228, .72);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
}
.page-home .wa-nav-inner {
  display: flex;
  align-items: center;
  gap: 32px;
  padding: 16px 0;
  min-height: 72px;
}

/* Logo — circle with hairline border + green icon + green wordmark */
.page-home .wa-logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
  margin-inline-end: auto; /* pushes nav to the right cluster */
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--wa-green-deep);
}
.page-home .wa-logo-mark {
  width: 38px; height: 38px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid rgba(17, 27, 33, .12);
  display: grid; place-items: center;
}
.page-home .wa-logo-mark svg {
  width: 22px; height: 22px;
  color: var(--wa-green);
}
.page-home .wa-logo-name {
  font-size: 22px;
  font-weight: 700;
  color: var(--wa-green-deep);
  line-height: 1;
}

/* Nav links — plain text, no pill, with subtle hover */
.page-home .wa-nav-links {
  display: flex;
  align-items: center;
  gap: 8px;
}
.page-home .wa-nav-link {
  font-size: 15px;
  font-weight: 500;
  color: var(--wa-ink);
  padding: 10px 14px;
  border-radius: 8px;
  background: transparent;
  border: 1px solid transparent;
  transition: background .15s ease, color .15s ease;
}
.page-home .wa-nav-link:hover { background: rgba(17, 27, 33, .06); }
.page-home .wa-nav-link.is-active { color: var(--wa-green-deep); }
.page-home .wa-nav-link.is-active::after { display: none; }

/* Right action cluster — Sign in (outline) + Connect (green) */
.page-home .wa-nav-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

/* Header buttons are the compact size (48px), not the hero size */
.page-home .wa-nav .wa-btn {
  min-height: 44px;
  padding: 10px 22px;
  font-size: 15px;
  gap: 8px;
}
.page-home .wa-nav .wa-btn svg { width: 16px; height: 16px; }

/* Outlined pill — matches ._asxh on wa.com (#fff bg, #111B21 border) */
.page-home .wa-btn-outline {
  background: #fff;
  color: var(--wa-ink);
  border: 1px solid var(--wa-border-strong);
}
.page-home .wa-btn-outline:hover {
  background: var(--wa-green);
  border-color: var(--wa-green);
  color: var(--wa-ink);
}
.page-home .wa-btn-outline svg { color: var(--wa-ink); stroke: var(--wa-ink); }

/* Mobile: stack everything */
@media (max-width: 900px) {
  .page-home .wa-nav-inner {
    flex-wrap: wrap;
    gap: 12px;
    padding: 12px 0;
    min-height: 0;
  }
  .page-home .wa-logo { margin-inline-end: 0; }
  .page-home .wa-nav-links {
    order: 3;
    width: 100%;
    justify-content: center;
    flex-wrap: wrap;
  }
  .page-home .wa-nav-actions {
    margin-inline-start: auto;
    flex-wrap: wrap;
    justify-content: flex-end;
  }
}
@media (max-width: 520px) {
  .page-home .wa-nav-actions .wa-btn-outline { display: none; }
}
.page-home .wa-lang a {
  font-size: 11px; font-weight: 700; letter-spacing: .06em;
  color: var(--wa-text-3);
  padding: 6px 9px; border-radius: 999px;
}
.page-home .wa-lang a.is-active { background: var(--wa-ink); color: #fff; }

@media (max-width: 900px) {
  .page-home .wa-nav-inner { flex-wrap: wrap; }
  .page-home .wa-nav-links { width: 100%; justify-content: flex-start; }
}

/* Buttons — ._a805 / primary green + dark label on wa.com */
.page-home .wa-btn {
  display: inline-flex;
  align-items: center; justify-content: center;
  gap: 10px;
  font-family: inherit;
  font-weight: 500;
  font-size: 16px;
  line-height: 1;
  min-height: 52px;
  padding: 16px 32px;
  border-radius: 50px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background .25s ease, color .25s ease, border-color .25s ease, box-shadow .2s ease;
  white-space: nowrap;
  box-sizing: border-box;
}
.page-home .wa-btn svg { width: 18px; height: 18px; flex-shrink: 0; }
.page-home .wa-btn-primary {
  background: var(--wa-green);
  color: var(--wa-ink);
  border-color: var(--wa-green);
}
.page-home .wa-btn-primary svg { color: var(--wa-ink); stroke: var(--wa-ink); }
.page-home .wa-btn-primary:hover {
  background: var(--wa-green-hover);
  border-color: var(--wa-border-strong);
  color: var(--wa-ink);
}
.page-home .wa-btn-ghost {
  background: #fff;
  color: var(--wa-body);
  border-color: var(--wa-border-strong);
}
.page-home .wa-btn-ghost:hover {
  background: var(--wa-green);
  border-color: var(--wa-green);
  color: var(--wa-ink);
}
.page-home .wa-btn-onlight {
  background: #fff;
  color: var(--wa-ink);
  border-color: #fff;
}
.page-home .wa-btn-onlight svg { color: var(--wa-ink); stroke: var(--wa-ink); }
.page-home .wa-btn-onlight:hover {
  background: var(--wa-green-hover);
  border-color: var(--wa-border-strong);
  color: var(--wa-ink);
}
.page-home .wa-btn-lg { min-height: 60px; padding: 16px 64px; font-size: 16px; }

/* ==========================================================================
 *  HERO — white background, massive headline, green CTA pill, phone on right
 * ========================================================================== */
/* Nav height tracker — used to extend the hero up under the (transparent)
   sticky header so the photo background reaches the very top of the page
   instead of leaving a white strip below the nav. */
.page-home {
  --wa-nav-h: 72px;
}
.page-home .wa-hero {
  position: relative;
  /* Nav is position:fixed so it doesn't take space — the hero starts at
     y=0 naturally. We just compensate the inner padding so the headline
     and phone mock sit BELOW where the nav is floating. */
  padding: calc(56px + var(--wa-nav-h)) 0 88px;
  overflow: hidden;
  background-color: #f6f0e4;
  background-image: url('/assets/top.png');
  background-repeat: no-repeat;
  background-position: right center;
  background-size: auto 100%;
}
@media (max-width: 980px) {
  .page-home .wa-hero { padding: calc(48px + var(--wa-nav-h)) 0 72px; }
}
@media (max-width: 900px) {
  /* Mobile nav wraps and gets taller; bump the offset accordingly. */
  .page-home { --wa-nav-h: 110px; }
}

/* RTL: mirror the photo via ::before so we can scaleX(-1) without
   flipping any text on top of it. Anchored on the left side. */
[dir="rtl"] .page-home .wa-hero { background-image: none; }
[dir="rtl"] .page-home .wa-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url('/assets/top.png');
  background-repeat: no-repeat;
  background-position: right center; /* after scaleX(-1) this lands on the left */
  background-size: auto 100%;
  transform: scaleX(-1);
  pointer-events: none;
  z-index: 0;
}
[dir="rtl"] .page-home .wa-hero > * { position: relative; z-index: 1; }
.page-home .wa-hero-grid {
  position: relative;
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 64px;
  align-items: center;
}
@media (max-width: 980px) {
  .page-home .wa-hero { padding: 48px 0 72px; }
  .page-home .wa-hero-grid { grid-template-columns: 1fr; gap: 48px; }
}

.page-home .wa-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 12px; font-weight: 500; letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--wa-green-deep);
  background: var(--wa-bg-mint);
  padding: 8px 14px; border-radius: 999px;
  margin-bottom: 24px;
}
.page-home .wa-eyebrow .dot {
  width: 7px; height: 7px; border-radius: 50%; background: var(--wa-green);
  box-shadow: 0 0 0 0 rgba(37,211,102,.5);
  animation: wa-pulse 1.8s infinite;
}
@keyframes wa-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(37,211,102,.45); }
  70%  { box-shadow: 0 0 0 10px rgba(37,211,102,0); }
  100% { box-shadow: 0 0 0 0 rgba(37,211,102,0); }
}

/* ._adhc h1 scale on whatsapp.com */
.page-home .wa-h1 {
  font-family: inherit;
  font-weight: 400;
  font-size: 40px;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--wa-text);
  margin: 0 0 24px;
}
@media (min-width: 768px) {
  .page-home .wa-h1 { font-size: 64px; }
}
@media (min-width: 1024px) {
  .page-home .wa-h1 {
    font-size: 80px;
    line-height: 88px;
    letter-spacing: -0.04em;
  }
}
.page-home .wa-h1 em {
  font-style: normal;
  color: var(--wa-green-deep);
}

.page-home .wa-hero-lead {
  font-size: 16px;
  line-height: 22px;
  letter-spacing: -0.01em;
  color: var(--wa-body);
  max-width: 560px;
  margin: 0 0 32px;
}
@media (min-width: 1024px) {
  .page-home .wa-hero-lead {
    font-size: 18px;
    line-height: 25px;
  }
}

.page-home .wa-cta-row {
  display: flex; gap: 14px; flex-wrap: wrap;
  align-items: center;
  margin-bottom: 26px;
}
.page-home .wa-link {
  font-weight: 500; font-size: 16px;
  color: var(--wa-green-deep);
  padding: 12px 8px;
}
.page-home .wa-link:hover { color: var(--wa-teal); }
.page-home .wa-link::after { content: " →"; transition: margin .15s ease; }
.page-home .wa-link:hover::after { margin-inline-start: 4px; }

.page-home .wa-trust {
  display: flex; gap: 22px; flex-wrap: wrap;
  font-size: 14px; color: var(--wa-text-3);
}
.page-home .wa-trust span {
  display: inline-flex; align-items: center; gap: 7px;
}
.page-home .wa-trust svg { width: 16px; height: 16px; color: var(--wa-green); }

/* ==========================================================================
 *  Phone mockup — modeled after whatsapp.com hero (Android device)
 * ========================================================================== */
.page-home .wa-phone {
  position: relative;
  width: 100%;
  max-width: 360px;
  margin: 0 auto;
  aspect-ratio: 9 / 19;
  background: #ffffff;
  border: 1px solid #e7e1d3;
  border-radius: 44px;
  padding: 6px;
  box-shadow:
    0 24px 60px rgba(17, 27, 33, .14),
    0 6px 18px rgba(17, 27, 33, .08);
}
.page-home .wa-phone-screen {
  position: relative;
  width: 100%; height: 100%;
  border-radius: 38px;
  background: #efe7de;
  overflow: hidden;
  display: flex; flex-direction: column;
}

/* Android system status bar */
.page-home .wa-phone-status {
  position: relative;
  z-index: 3;
  height: 34px;
  padding: 0 18px;
  display: flex; align-items: center; justify-content: space-between;
  background: #ffffff;
  color: #111b21;
  font-size: 13px;
  font-weight: 600;
}
.page-home .wa-phone-status .sys {
  display: inline-flex; align-items: center; gap: 5px;
}
.page-home .wa-phone-status .sys svg { width: 14px; height: 14px; }

/* Chat header */
.page-home .wa-phone-header {
  background: #ffffff;
  color: #111b21;
  padding: 8px 14px 12px;
  display: flex; align-items: center; gap: 10px;
}
.page-home .wa-phone-header .back {
  width: 22px; height: 22px; color: #111b21; flex: none;
}
.page-home .wa-phone-header .av {
  width: 36px; height: 36px; border-radius: 50%;
  background: #d9efe1;
  display: grid; place-items: center;
  flex: none;
  overflow: hidden;
}
.page-home .wa-phone-header .av svg { width: 22px; height: 22px; color: #128c7e; }
.page-home .wa-phone-header .meta {
  line-height: 1.15; flex: 1; min-width: 0;
}
.page-home .wa-phone-header .meta b {
  display: block; font-weight: 600; font-size: 15px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.page-home .wa-phone-header .meta small {
  display: block; font-weight: 400; font-size: 12px; color: #54656f;
}
.page-home .wa-phone-header .actions {
  display: inline-flex; align-items: center; gap: 14px; color: #111b21;
}
.page-home .wa-phone-header .actions svg { width: 18px; height: 18px; }

/* Chat body — WhatsApp doodle (light) */
.page-home .wa-chat {
  position: relative;
  flex: 1;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: 0;
  background-color: #efe7de;
  background-image:
    radial-gradient(circle at 12px 12px, rgba(17,27,33,.06) 1.1px, transparent 1.4px),
    radial-gradient(circle at 32px 28px, rgba(17,27,33,.05) 1px, transparent 1.4px);
  background-size: 44px 44px, 44px 44px;
  background-position: 0 0, 22px 22px;
}

/* ─── Live chat stream ───────────────────────────────────────────────────
   The stream is anchored to the BOTTOM of the chat area (just like a real
   WhatsApp): new messages appear at the bottom and push older ones up.
   When the stack grows taller than the viewport, the oldest bubbles slide
   out through the top edge (mask-image fade). JavaScript reveals messages
   one by one and swaps typing-indicator bubbles for the real reply.

   IMPORTANT: hidden messages MUST NOT take layout space — otherwise the
   bottom-anchored stack would start out already overflowing the viewport
   and the first real bubbles would appear above the visible area. */
/* The stream is a normal flex column with overflow-y:auto. Bubbles flow
   top→bottom in document order. JS appends new bubbles at the bottom and
   eases scrollTop to follow them — older bubbles never move, only the
   viewport scrolls. This is the secret sauce that kills the "jump" and
   "overlap" complaints (mirrors the architecture used at waai.co.il).

   Initial-paint trick: the stream is `visibility: hidden` until JS sets
   scrollTop to the bottom, at which point JS adds .is-ready and the
   stream becomes visible. Without this the user briefly sees the prefill
   top-aligned (because that is the browser's default scroll position)
   before the JS snap kicks in — they read it as "messages appear from
   the middle and build down". With the hide+snap+reveal sequence the
   first visible frame is already pinned to the bottom. */
.page-home .wa-chat-stream {
  flex: 1 1 0;
  min-height: 0;
  height: 0;                    /* sibling of `flex: 1 1 0` to force scroll */
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px 10px 8px;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  scroll-behavior: auto;        /* JS handles smooth scroll with custom easing */
  visibility: hidden;
  /* Soft fade at top & bottom so messages dissolve as they scroll out of
     view at the top and emerge as they enter from the bottom. Middle stays
     fully opaque. The mask is applied to the scroll viewport, not the
     content, so it stays anchored to the chat frame as the user scrolls. */
  -webkit-mask-image: linear-gradient(
    to bottom,
    transparent 0,
    #000 64px,
    #000 calc(100% - 48px),
    transparent 100%
  );
          mask-image: linear-gradient(
    to bottom,
    transparent 0,
    #000 64px,
    #000 calc(100% - 48px),
    transparent 100%
  );
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
          mask-size: 100% 100%;
}
.page-home .wa-chat-stream.is-ready { visibility: visible; }
/* Defensive fallback: if JS fails to run within 1.5s (network errors,
   broken CSP, etc.) reveal the stream anyway so users always see the
   conversation. Animation does the reveal — once .is-ready lands, the
   inline style above wins because higher specificity. */
.page-home .wa-chat-stream { animation: wa-stream-fallback-reveal 0s linear 1.5s forwards; }
@keyframes wa-stream-fallback-reveal { to { visibility: visible; } }
/* Hide the scrollbar — the chat must look like a phone screen. */
.page-home .wa-chat-stream::-webkit-scrollbar { display: none; width: 0; height: 0; }
.page-home .wa-chat-stream { -ms-overflow-style: none; scrollbar-width: none; }

/* Hide animated scene templates so they never paint — JS extracts their
   bubbles and removes the wrappers from the DOM on init. */
.page-home .wa-chat .wa-scene[data-template] { display: none !important; }

/* Bubbles are full-width flex rows; the bubble inside aligns left/right
   via justify-content. Always visible (no display toggling) — JS just
   appends them and the @keyframes fades them in from below. */
.page-home .wa-msg {
  display: flex;
  width: 100%;
  animation: wa-bubble-in .26s cubic-bezier(.22,.61,.36,1) both;
  will-change: transform, opacity;
}
.page-home .wa-msg.in   { justify-content: flex-start; }
.page-home .wa-msg.out  { justify-content: flex-end; }

@keyframes wa-bubble-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Prefilled bubbles render statically (no entrance animation) — the chat
   must look already-populated on first paint. */
.page-home .wa-msg[data-prefill] { animation: none; }

.page-home .wa-msg .bubble {
  position: relative;
  max-width: 78%;
  padding: 6px 9px 5px;
  border-radius: 8px;
  font-size: 13px;
  line-height: 1.35;
  color: #111b21;
  box-shadow: 0 1px 0.5px rgba(11,20,26,.13);
  display: inline-flex; align-items: flex-end; gap: 8px;
}
.page-home .wa-msg.in  .bubble { background: #ffffff; border-top-left-radius: 0; }
.page-home .wa-msg.out .bubble { background: #d9fdd3; border-top-right-radius: 0; }

.page-home .wa-msg .bubble .text { white-space: pre-wrap; }
.page-home .wa-msg .bubble .time {
  font-size: 10px; color: #667781; white-space: nowrap;
  display: inline-flex; align-items: center; gap: 3px;
  align-self: flex-end;
  margin-bottom: -1px;
}
.page-home .wa-msg.out .bubble .time svg { width: 14px; height: 10px; color: #53bdeb; }

/* Typing indicator */
.page-home .wa-msg .bubble.typing {
  padding: 9px 12px;
  display: inline-flex; align-items: center; gap: 4px;
}
.page-home .wa-msg .bubble.typing .d {
  width: 5px; height: 5px; border-radius: 50%;
  background: #8696a0;
  animation: wa-blink 1.2s infinite;
}
.page-home .wa-msg .bubble.typing .d:nth-child(2) { animation-delay: .15s; }
.page-home .wa-msg .bubble.typing .d:nth-child(3) { animation-delay: .30s; }

@keyframes wa-blink { 0%,80%,100% { opacity: .3; } 40% { opacity: 1; } }

/* ─── Rich bubbles: product card ─────────────────────────────────────── */
.page-home .wa-msg .bubble.bubble-card {
  flex-direction: column;
  align-items: stretch;
  padding: 4px 4px 5px;
  width: 210px;
  max-width: 84%;
  gap: 4px;
}
.page-home .bubble-card .card-img {
  height: 130px;
  border-radius: 6px;
  background: #efe7de center/cover no-repeat;
  display: grid; place-items: center;
  position: relative;
  overflow: hidden;
}
.page-home .bubble-card .card-img::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 60%, rgba(0,0,0,.08));
  pointer-events: none;
}
.page-home .bubble-card .card-img svg { width: 56px; height: 56px; position: relative; z-index: 1; }
.page-home .bubble-card .card-body {
  padding: 4px 6px 0;
  display: flex; flex-direction: column; gap: 2px;
}
.page-home .bubble-card .card-body b {
  display: block; font-size: 13px; font-weight: 600; color: #111b21; line-height: 1.2;
}
.page-home .bubble-card .card-body .sub {
  font-size: 11px; color: #667781;
}
.page-home .bubble-card .price {
  font-size: 14px; font-weight: 700; color: #128c7e;
  display: inline-flex; align-items: baseline; gap: 6px;
  margin-top: 2px;
}
.page-home .bubble-card .price s {
  color: #8696a0; font-weight: 400; font-size: 11px;
}
.page-home .bubble-card .card-body small {
  display: block; color: #667781; font-size: 10.5px; margin-top: 2px;
}
.page-home .bubble-card > .time {
  align-self: flex-end; padding: 0 6px;
}

/* ─── Rich bubbles: standalone photo (e.g. dish snapshot) ───────────── */
.page-home .wa-msg .bubble.bubble-photo {
  flex-direction: column;
  align-items: stretch;
  padding: 4px 4px 5px;
  width: 220px;
  max-width: 84%;
  gap: 4px;
}
.page-home .bubble-photo .photo {
  height: 180px;
  border-radius: 6px;
  background: #efe7de center/cover no-repeat;
  position: relative;
  overflow: hidden;
}
.page-home .bubble-photo .photo::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 65%, rgba(0,0,0,.10));
  pointer-events: none;
}
.page-home .bubble-photo .caption {
  padding: 1px 6px 0;
  font-size: 13px;
  line-height: 1.35;
  color: #111b21;
  word-wrap: break-word;
}
.page-home .bubble-photo > .time {
  align-self: flex-end; padding: 0 6px;
}

/* ─── Rich bubbles: contact form ─────────────────────────────────────── */
.page-home .wa-msg .bubble.bubble-form {
  flex-direction: column;
  align-items: stretch;
  padding: 8px 10px 6px;
  width: 220px;
  max-width: 86%;
  gap: 0;
}
.page-home .bubble-form .form-row {
  display: flex; align-items: center; justify-content: space-between;
  font-size: 12px;
  border-bottom: 1px solid rgba(17,27,33,.08);
  padding: 6px 0;
}
.page-home .bubble-form .form-row:last-of-type { border-bottom: 0; }
.page-home .bubble-form .form-row .lbl { color: #667781; font-weight: 500; }
.page-home .bubble-form .form-row .val { color: #111b21; font-weight: 600; max-width: 60%; text-align: end; }
.page-home .bubble-form > .time { align-self: flex-end; margin-top: 4px; }

/* ─── Rich bubbles: order receipt ────────────────────────────────────── */
.page-home .wa-msg .bubble.bubble-order {
  flex-direction: column;
  align-items: stretch;
  padding: 10px 12px 8px;
  width: 220px;
  max-width: 86%;
  gap: 0;
}
.page-home .bubble-order .order-head {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px; font-weight: 700; color: #128c7e;
  padding-bottom: 7px; margin-bottom: 7px;
  border-bottom: 1px solid rgba(17,27,33,.08);
}
.page-home .bubble-order .order-head svg { width: 14px; height: 14px; color: #128c7e; }
.page-home .bubble-order .order-row {
  display: flex; justify-content: space-between;
  font-size: 12px; color: #3b4a54;
  padding: 2px 0;
}
.page-home .bubble-order .order-total {
  display: flex; justify-content: space-between;
  margin-top: 6px; padding-top: 7px;
  border-top: 1px solid rgba(17,27,33,.08);
  font-size: 13px; color: #111b21;
}
.page-home .bubble-order .order-total b { font-weight: 700; color: #111b21; }
.page-home .bubble-order > small {
  display: block; color: #667781; font-size: 11px; margin-top: 6px;
}
.page-home .bubble-order > .time { align-self: flex-end; margin-top: 4px; }

/* Bottom input bar */
.page-home .wa-phone-input {
  padding: 8px 10px 14px;
  display: flex; align-items: center; gap: 8px;
  background: transparent;
}
.page-home .wa-phone-input .field {
  flex: 1;
  background: #ffffff;
  border-radius: 999px;
  height: 38px;
  padding: 0 12px;
  display: flex; align-items: center; gap: 10px;
  color: #54656f;
  box-shadow: 0 1px 0.5px rgba(11,20,26,.10);
}
.page-home .wa-phone-input .field .ph {
  flex: 1; font-size: 13px; color: #8696a0;
}
.page-home .wa-phone-input .field .ic {
  width: 18px; height: 18px; flex: none; color: #54656f;
}
.page-home .wa-phone-input .mic {
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--wa-green); color: #ffffff;
  border: 0; cursor: default;
  display: grid; place-items: center;
  box-shadow: 0 4px 10px rgba(37,211,102,.3);
}
.page-home .wa-phone-input .mic svg { width: 18px; height: 18px; }

/* RTL: mirror back arrow & action icons stay on the same visual side */
[dir="rtl"] .page-home .wa-phone-header .back { transform: scaleX(-1); }

/* ==========================================================================
 *  Feature sections — alternating, big two-column layout
 * ========================================================================== */
.page-home .wa-section {
  padding: 72px 0;
  border-top: 1px solid var(--wa-line);
}
.page-home .wa-section.alt { background: var(--wa-bg-soft); }
.page-home .wa-section.mint { background: var(--wa-bg-mint); }

.page-home .wa-section-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 72px;
  align-items: center;
}
.page-home .wa-section-grid.reverse {
  direction: rtl;     /* flips columns */
}
.page-home .wa-section-grid.reverse > * {
  direction: ltr;     /* restore content direction */
}
[dir="rtl"] .page-home .wa-section-grid.reverse { direction: ltr; }
[dir="rtl"] .page-home .wa-section-grid.reverse > * { direction: rtl; }

@media (max-width: 880px) {
  .page-home .wa-section { padding: 64px 0; }
  .page-home .wa-section-grid { grid-template-columns: 1fr; gap: 36px; direction: ltr; }
  .page-home .wa-section-grid.reverse { direction: ltr; }
  [dir="rtl"] .page-home .wa-section-grid,
  [dir="rtl"] .page-home .wa-section-grid.reverse { direction: rtl; }
  .page-home .wa-section-art { order: -1; }
  .page-home .wa-section-grid.reverse .wa-section-art { order: 0; }
}

.page-home .wa-section-eyebrow {
  font-size: 12px; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--wa-green-deep);
  margin-bottom: 14px;
}
/* ._adhc h2 / h3 stepped scale */
.page-home .wa-h2 {
  font-family: inherit;
  font-weight: 400;
  font-size: 32px;
  line-height: 38px;
  letter-spacing: -1px;
  color: var(--wa-text);
  margin: 0 0 18px;
}
@media (min-width: 768px) {
  .page-home .wa-h2 {
    font-size: 40px;
    line-height: 44px;
    letter-spacing: -0.03em;
  }
}
@media (min-width: 1024px) {
  .page-home .wa-h2 {
    font-size: 60px;
    line-height: 66px;
    letter-spacing: -0.03em;
  }
}
.page-home .wa-h2 em {
  font-style: normal;
  font-weight: 400;
  color: var(--wa-green-deep);
}
.page-home .wa-section-text p {
  font-size: 16px;
  line-height: 22px;
  letter-spacing: -0.01em;
  color: var(--wa-body);
  max-width: 480px;
  margin: 0 0 18px;
}
@media (min-width: 1024px) {
  .page-home .wa-section-text p {
    font-size: 18px;
    line-height: 25px;
  }
}

/* ── Section illustrations (pure CSS/SVG mocks) ──────────────────────── */

/* QR scan card */
.page-home .wa-art-qr {
  width: 100%; max-width: 420px;
  margin: 0 auto;
  aspect-ratio: 1.1 / 1;
  background: #fff;
  border: 1px solid var(--wa-line);
  border-radius: 22px;
  box-shadow: var(--wa-shadow-md);
  padding: 28px;
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 14px;
  position: relative;
}
.page-home .wa-art-qr-head {
  display: flex; align-items: center; gap: 10px;
  font-weight: 600; color: var(--wa-text);
}
.page-home .wa-art-qr-head .icon {
  width: 30px; height: 30px; border-radius: 8px;
  background: var(--wa-bg-mint);
  display: grid; place-items: center;
}
.page-home .wa-art-qr-head .icon svg { width: 16px; height: 16px; color: var(--wa-green-deep); }
.page-home .wa-art-qr-grid {
  border: 2px dashed var(--wa-line-2);
  border-radius: 18px;
  display: grid; place-items: center;
  background:
    linear-gradient(135deg, rgba(37,211,102,.06) 0%, rgba(255,255,255,0) 60%),
    #fafbfb;
  position: relative;
}
.page-home .wa-art-qr-grid::after {
  /* "scan line" */
  content: "";
  position: absolute; left: 12%; right: 12%;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--wa-green), transparent);
  border-radius: 2px;
  top: 22%;
  box-shadow: 0 0 12px rgba(37,211,102,.6);
  animation: wa-scan 2.8s ease-in-out infinite;
}
@keyframes wa-scan {
  0%   { top: 18%; opacity: .15; }
  50%  { top: 78%; opacity: 1; }
  100% { top: 18%; opacity: .15; }
}
.page-home .wa-art-qr-svg { width: 60%; height: 60%; }
.page-home .wa-art-qr-foot {
  display: flex; gap: 10px; align-items: center;
  font-size: 13px; color: var(--wa-text-3);
}
.page-home .wa-art-qr-foot .step {
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--wa-green); color: #fff;
  display: grid; place-items: center;
  font-size: 12px; font-weight: 700;
}

/* Chat bubbles cluster (for "Replies in seconds") */
.page-home .wa-art-chat {
  width: 100%; max-width: 460px;
  margin: 0 auto;
  background: var(--wa-chat-bg);
  background-image: radial-gradient(rgba(11,20,26,.05) 1px, transparent 1px);
  background-size: 14px 14px;
  border-radius: 22px;
  padding: 22px;
  display: flex; flex-direction: column; gap: 10px;
  box-shadow: var(--wa-shadow-md);
  border: 1px solid var(--wa-line);
}
.page-home .wa-art-chat .b {
  max-width: 80%;
  padding: 10px 14px;
  border-radius: 14px;
  font-size: 14px;
  line-height: 1.4;
  box-shadow: 0 1px 1px rgba(11,20,26,.06);
}
.page-home .wa-art-chat .b.in  { background: #fff; border-top-left-radius: 4px; align-self: flex-start; }
.page-home .wa-art-chat .b.out { background: var(--wa-bubble-out); border-top-right-radius: 4px; align-self: flex-end; }
.page-home .wa-art-chat .b small {
  display: block; margin-top: 4px;
  font-size: 11px; color: var(--wa-text-3); text-align: end;
}

/* Toggle illustration (for "Pause or detach") */
.page-home .wa-art-toggle {
  width: 100%; max-width: 420px;
  margin: 0 auto;
  aspect-ratio: 1.4 / 1;
  background: #fff;
  border: 1px solid var(--wa-line);
  border-radius: 22px;
  padding: 28px;
  box-shadow: var(--wa-shadow-md);
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 18px;
}
.page-home .wa-art-toggle-head {
  display: flex; align-items: center; gap: 10px;
}
.page-home .wa-art-toggle-head .av {
  width: 38px; height: 38px; border-radius: 50%;
  background: linear-gradient(135deg, var(--wa-green), var(--wa-green-deep));
  display: grid; place-items: center;
}
.page-home .wa-art-toggle-head .av svg { width: 18px; height: 18px; color: #fff; }
.page-home .wa-art-toggle-head .meta { line-height: 1.2; }
.page-home .wa-art-toggle-head .meta b { font-size: 15px; color: var(--wa-text); }
.page-home .wa-art-toggle-head .meta small { display: block; font-size: 12px; color: var(--wa-text-3); }
.page-home .wa-art-toggle-row {
  align-self: center;
  display: grid; grid-template-columns: 1fr auto; align-items: center;
  gap: 18px;
  padding: 16px 18px;
  background: var(--wa-bg-mint);
  border: 1px solid rgba(37,211,102,.25);
  border-radius: 14px;
}
.page-home .wa-art-toggle-row .label { font-weight: 600; color: var(--wa-text); }
.page-home .wa-art-toggle-row .label small { display: block; font-weight: 500; color: var(--wa-text-3); font-size: 12px; margin-top: 2px; }
.page-home .wa-toggle {
  width: 56px; height: 32px;
  background: var(--wa-green);
  border-radius: 999px;
  position: relative;
  box-shadow: inset 0 1px 2px rgba(11,20,26,.10);
}
.page-home .wa-toggle::after {
  content: "";
  position: absolute; top: 3px; left: 27px;
  width: 26px; height: 26px;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 2px 4px rgba(11,20,26,.18);
  transition: left .25s ease;
  animation: wa-toggle-bounce 4s ease-in-out infinite;
}
@keyframes wa-toggle-bounce {
  0%, 45%   { left: 27px; }
  50%, 95%  { left: 3px; }
  100%      { left: 27px; }
}
.page-home .wa-art-toggle-foot {
  display: flex; gap: 10px;
  font-size: 13px; color: var(--wa-text-3);
}
.page-home .wa-art-toggle-foot span {
  display: inline-flex; align-items: center; gap: 6px;
}
.page-home .wa-art-toggle-foot svg { width: 14px; height: 14px; color: var(--wa-green); }

/* ==========================================================================
 *  Pricing teaser — 3 cards in WhatsApp style
 * ========================================================================== */
.page-home .wa-pricing {
  padding: 96px 0;
  background: var(--wa-bg-soft);
  border-top: 1px solid var(--wa-line);
}
.page-home .wa-pricing-head {
  text-align: center;
  max-width: 640px; margin: 0 auto 44px;
}
.page-home .wa-pricing-head .wa-h2 { margin-bottom: 12px; }
.page-home .wa-pricing-head p {
  color: var(--wa-body);
  font-size: 16px;
  line-height: 22px;
  margin: 0;
}
@media (min-width: 1024px) {
  .page-home .wa-pricing-head p { font-size: 18px; line-height: 25px; }
}
.page-home .wa-plans {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  align-items: stretch;
}
@media (max-width: 880px) {
  .page-home .wa-plans { grid-template-columns: 1fr; max-width: 420px; margin: 0 auto; }
}
.page-home .wa-plan {
  background: #fff;
  border: 1px solid var(--wa-line);
  border-radius: 20px;
  padding: 30px 28px;
  display: flex; flex-direction: column; gap: 16px;
  box-shadow: var(--wa-shadow-sm);
  position: relative;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.page-home .wa-plan:hover {
  transform: translateY(-3px);
  box-shadow: var(--wa-shadow-md);
  border-color: var(--wa-line-2);
}
.page-home .wa-plan.is-popular {
  border-color: var(--wa-green);
  box-shadow: 0 0 0 3px rgba(37,211,102,.18), var(--wa-shadow-md);
}
.page-home .wa-plan-badge {
  position: absolute; top: -12px; left: 50%; transform: translateX(-50%);
  background: var(--wa-green); color: var(--wa-ink);
  font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  padding: 5px 12px; border-radius: 999px;
}
.page-home .wa-plan-name {
  font-size: 20px; font-weight: 500; margin: 0;
}
.page-home .wa-plan-desc {
  margin: -8px 0 0;
  font-size: 14px; color: var(--wa-text-3);
}
.page-home .wa-plan-price {
  display: baseline;
  margin-top: 4px;
}
.page-home .wa-plan-price .num {
  font-size: 44px; font-weight: 400; color: var(--wa-text);
  line-height: 1; letter-spacing: -0.03em;
}
.page-home .wa-plan-price .per {
  font-size: 14px; color: var(--wa-text-3);
  margin-inline-start: 6px;
}
.page-home .wa-plan-features {
  list-style: none; margin: 0; padding: 16px 0 0;
  border-top: 1px solid var(--wa-line);
  display: grid; gap: 10px;
  font-size: 14px; color: var(--wa-text-2);
}
.page-home .wa-plan-features li {
  display: grid; grid-template-columns: 18px 1fr; gap: 10px; align-items: start;
}
.page-home .wa-plan-features li svg {
  width: 16px; height: 16px; margin-top: 2px;
  color: var(--wa-green);
}
.page-home .wa-plan-cta {
  margin-top: auto;
  width: 100%;
  justify-content: center;
}
.page-home .wa-plan:not(.is-popular) .wa-plan-cta {
  background: #fff;
  color: var(--wa-body);
  border: 1px solid var(--wa-border-strong);
}
.page-home .wa-plan:not(.is-popular) .wa-plan-cta:hover {
  background: var(--wa-green);
  border-color: var(--wa-green);
  color: var(--wa-ink);
}
.page-home .wa-plan.is-popular .wa-plan-cta {
  color: var(--wa-ink);
}
.page-home .wa-plan.is-popular .wa-plan-cta:hover {
  border-color: var(--wa-border-strong);
}

/* AI-model picker — общий стиль с pricing.php, перенесённый под
 * визуальные токены home (border, shadow, accent). Сидит над CTA-кнопкой,
 * между списком фич и кнопкой; на мобильных не разъезжается. */
.page-home .wa-plan-model {
  margin-top: 14px;
  display: grid;
  gap: 6px;
}
.page-home .wa-plan-model-label {
  font: 600 11px/1.2 var(--wa-font);
  color: var(--wa-text-2);
  text-transform: uppercase;
  letter-spacing: .08em;
  display: inline-flex; align-items: center; gap: 6px;
}
.page-home .wa-plan-model-recommended {
  font: 500 10px/1 var(--wa-font);
  color: var(--wa-green-deep);
  text-transform: lowercase;
  letter-spacing: 0;
  background: var(--wa-bg-mint);
  padding: 3px 7px; border-radius: 999px;
}
.page-home .wa-plan-model-select {
  -webkit-appearance: none; -moz-appearance: none; appearance: none;
  width: 100%;
  font: 500 14px/1.2 var(--wa-font);
  color: var(--wa-body);
  background: #fff;
  border: 1px solid var(--wa-line);
  border-radius: 12px;
  padding: 11px 36px 11px 12px;
  cursor: pointer;
  transition: border-color .12s ease, box-shadow .12s ease;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2354656f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 14px;
}
[dir="rtl"] .page-home .wa-plan-model-select {
  padding: 11px 12px 11px 36px;
  background-position: left 12px center;
}
.page-home .wa-plan-model-select:hover { border-color: var(--wa-border-strong); }
.page-home .wa-plan-model-select:focus-visible {
  outline: 0; border-color: var(--wa-green);
  box-shadow: 0 0 0 3px var(--wa-bg-mint);
}
.page-home .wa-plan-model-select optgroup { font-weight: 600; color: var(--wa-text-2); }
.page-home .wa-plan-model-select option   { color: var(--wa-body); padding: 4px 0; }

/* ==========================================================================
 *  Final CTA banner
 * ========================================================================== */
.page-home .wa-cta-band {
  padding: 88px 0;
  background:
    radial-gradient(900px 500px at 90% 20%, rgba(255,255,255,.18), transparent 70%),
    linear-gradient(135deg, var(--wa-teal) 0%, var(--wa-green-deep) 60%, var(--wa-green) 130%);
  color: #fff;
  text-align: center;
}
.page-home .wa-cta-band .wa-h2 {
  color: #fff;
  font-weight: 400;
  font-size: 32px;
  line-height: 38px;
  letter-spacing: -1px;
  margin-bottom: 16px;
}
@media (min-width: 768px) {
  .page-home .wa-cta-band .wa-h2 {
    font-size: 40px;
    line-height: 44px;
  }
}
@media (min-width: 1024px) {
  .page-home .wa-cta-band .wa-h2 {
    font-size: 48px;
    line-height: 53px;
    letter-spacing: -0.03em;
  }
}
.page-home .wa-cta-band p {
  font-size: 16px;
  line-height: 22px;
  color: rgba(255,255,255,.92);
  max-width: 560px; margin: 0 auto 28px;
}
@media (min-width: 1024px) {
  .page-home .wa-cta-band p { font-size: 18px; line-height: 25px; }
}

/* ==========================================================================
 *  Dark footer (WhatsApp-style)
 * ========================================================================== */
.page-home .wa-footer {
  background: var(--wa-footer-bg);
  color: var(--wa-footer-text);
  padding: 64px 0 28px;
}
.page-home .wa-footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 40px;
  padding-bottom: 40px;
  border-bottom: 1px solid var(--wa-footer-rule);
}
@media (max-width: 880px) {
  .page-home .wa-footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 32px 24px;
  }
}
@media (max-width: 520px) {
  .page-home .wa-footer-grid { grid-template-columns: 1fr; }
}

.page-home .wa-footer-brand {
  display: flex; flex-direction: column; gap: 16px;
}
.page-home .wa-footer-brand .wa-logo-name { color: #fff; font-size: 20px; }
.page-home .wa-footer-brand .wa-logo-name small { color: var(--wa-footer-muted); }
.page-home .wa-footer-brand p {
  margin: 0; font-size: 14px; line-height: 1.6;
  color: var(--wa-footer-muted);
  max-width: 320px;
}

.page-home .wa-footer-col h4 {
  font-size: 13px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase;
  color: #fff;
  margin: 6px 0 18px;
}
.page-home .wa-footer-col ul {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 12px;
}
.page-home .wa-footer-col a {
  font-size: 14px; color: var(--wa-footer-muted);
  transition: color .15s ease;
}
.page-home .wa-footer-col a:hover { color: #fff; }
.page-home .wa-footer-col .lang-row {
  display: flex; gap: 10px;
}
.page-home .wa-footer-col .lang-row a {
  font-weight: 700; font-size: 12px; letter-spacing: .08em;
  padding: 6px 10px; border-radius: 999px;
  border: 1px solid rgba(233,237,239,.18);
}
.page-home .wa-footer-col .lang-row a.is-active {
  background: var(--wa-green); color: #fff; border-color: var(--wa-green);
}

.page-home .wa-footer-bottom {
  padding-top: 22px;
  display: flex; justify-content: space-between; gap: 12px;
  flex-wrap: wrap;
  font-size: 12px; color: var(--wa-footer-muted);
}

/* ==========================================================================
 *  RTL support (Hebrew)
 * ========================================================================== */
[dir="rtl"] .page-home .wa-eyebrow .dot,
[dir="rtl"] .page-home .wa-trust svg,
[dir="rtl"] .page-home .wa-plan-features li svg {
  /* keep markers in place — they're decorative */
}
[dir="rtl"] .page-home .wa-link::after { content: " ←"; }

/* ==========================================================================
 *  Accessibility — reduced motion
 * ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .page-home .wa-eyebrow .dot,
  .page-home .wa-msg .bubble.typing .d,
  .page-home .wa-art-qr-grid::after,
  .page-home .wa-toggle::after { animation: none !important; }

  /* Disable bubble entrance animations and JS-driven scrolling (JS skips
     the loop entirely when prefers-reduced-motion is set). */
  .page-home .wa-msg { animation: none !important; }
  .page-home .wa-chat-stream { scroll-behavior: auto !important; }
}

/* ==========================================================================
 *  PRICING PAGE — overrides & extra components
 *
 *  Загружаем тот же `home.css`, что и на главной: page-pricing наследует
 *  все токены, nav, кнопки, карточки тарифов, дропдаун AI-моделей,
 *  cta-band и футер. Здесь — только то, чего нет на главной:
 *    • text-only hero (без фото-фона телефона)
 *    • billing-toggle (Месяц/Год пилюля)
 *    • compare-table (большая таблица сравнения)
 *    • faq-accordion (<details>)
 * ========================================================================== */

/* — Hero без фоновой иллюстрации, контент по центру —
 *
 *  На главной hero — split-grid (текст + телефон). Тут — короткий
 *  заголовок над тарифами, без иллюстрации, чуть мягче по высоте.
 *  Сохраняем тот же кремовый фон-токен (#f6f0e4), чтобы сохранить
 *  визуальную преемственность бренда.
 */
.page-pricing .wa-hero {
  background-image: none;
  background-color: #f6f0e4;
  padding: calc(56px + var(--wa-nav-h)) 0 56px;
  text-align: center;
}
[dir="rtl"] .page-pricing .wa-hero { background-image: none; }
[dir="rtl"] .page-pricing .wa-hero::before { content: none; }
.page-pricing .wa-hero .wa-container {
  max-width: 800px;
}
.page-pricing .wa-hero .wa-eyebrow { margin-inline: auto; }
.page-pricing .wa-hero .wa-h1 {
  margin-inline: auto;
  max-width: 760px;
}
.page-pricing .wa-hero-lead {
  margin-inline: auto;
  max-width: 620px;
}

/* — Billing toggle — пилюля с двумя кнопками Месяц/Год —
 *
 *  Внутренний "стакан" белого цвета смещается влево/вправо при выборе.
 *  Сохраняем зелёный акцент бренда для активной опции.
 */
.page-pricing .wa-billing-toggle {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: rgba(17, 27, 33, .06);
  border: 1px solid var(--wa-line);
  border-radius: 999px;
  padding: 4px;
  margin-top: 24px;
}
.page-pricing .wa-billing-toggle-btn {
  background: transparent;
  border: 0; cursor: pointer;
  font: 500 14px/1 var(--wa-font);
  color: var(--wa-text-2);
  padding: 10px 18px;
  border-radius: 999px;
  transition: background .15s ease, color .15s ease, box-shadow .15s ease;
}
.page-pricing .wa-billing-toggle-btn:hover { color: var(--wa-text); }
.page-pricing .wa-billing-toggle-btn.is-active {
  background: #fff;
  color: var(--wa-ink);
  box-shadow: var(--wa-shadow-sm);
}

/* — Pricing standalone — оборачиваем wa-plans в свою секцию
 *  чтобы не зависеть от .wa-pricing-head с лидом */
.page-pricing .wa-pricing {
  padding: 32px 0 88px;
  background: var(--wa-bg);
}

/* — Period suffix (/мес + НДС, /год + НДС) — рядом с ценой —
 *  На главной .wa-plan-price .per — короткая статичная подпись.
 *  На pricing она меняется JS при переключении биллинга. */
.page-pricing .wa-plan-price .per {
  white-space: nowrap;
}

/* — Compare table —
 *
 *  Большая горизонтальная таблица сравнения. Sticky-первая колонка
 *  на мобильных, чтобы не терялся контекст при горизонтальном скролле.
 *  Заголовки колонок — те же имена тарифов; popular-колонка чуть
 *  подсвечена green-tint фоном для ассоциации с popular-карточкой выше.
 */
.page-pricing .wa-compare {
  padding: 80px 0 24px;
  background: var(--wa-bg-soft);
}
.page-pricing .wa-compare-title {
  font-family: var(--wa-font);
  font-weight: 400;
  font-size: clamp(28px, 3.8vw, 40px);
  line-height: 1.15;
  letter-spacing: -0.02em;
  text-align: center;
  margin: 0 0 32px;
  color: var(--wa-text);
}
.page-pricing .wa-compare-wrap {
  border: 1px solid var(--wa-line);
  border-radius: var(--wa-radius-lg);
  background: #fff;
  overflow: hidden;
  box-shadow: var(--wa-shadow-sm);
}
.page-pricing .wa-compare-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
  color: var(--wa-text);
}
.page-pricing .wa-compare-table thead th {
  background: var(--wa-bg-soft);
  font: 600 14px/1.2 var(--wa-font);
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--wa-text-2);
  padding: 18px 20px;
  text-align: start;
  border-bottom: 1px solid var(--wa-line);
}
.page-pricing .wa-compare-table thead th.is-popular {
  background: var(--wa-bg-mint);
  color: var(--wa-green-deep);
}
.page-pricing .wa-compare-table tbody th {
  text-align: start;
  font-weight: 500;
  color: var(--wa-text-2);
  padding: 16px 20px;
  background: #fff;
  border-bottom: 1px solid var(--wa-line);
  white-space: nowrap;
}
.page-pricing .wa-compare-table tbody td {
  padding: 16px 20px;
  border-bottom: 1px solid var(--wa-line);
  color: var(--wa-text);
  font-weight: 500;
}
.page-pricing .wa-compare-table tbody td.is-popular {
  background: rgba(231, 252, 227, .35);
}
.page-pricing .wa-compare-table tbody tr:last-child th,
.page-pricing .wa-compare-table tbody tr:last-child td {
  border-bottom: 0;
}
@media (max-width: 720px) {
  .page-pricing .wa-compare-wrap { overflow-x: auto; }
  .page-pricing .wa-compare-table { min-width: 640px; }
}

/* — FAQ accordion (native <details>) —
 *
 *  Использую нативный <details>/<summary> для бесплатного a11y и keyboard
 *  navigation; chevron поворачивается через CSS-transform по [open].
 */
.page-pricing .wa-faq {
  padding: 80px 0;
  background: var(--wa-bg);
}
.page-pricing .wa-faq-title {
  font-family: var(--wa-font);
  font-weight: 400;
  font-size: clamp(28px, 3.8vw, 40px);
  line-height: 1.15;
  letter-spacing: -0.02em;
  text-align: center;
  margin: 0 0 32px;
  color: var(--wa-text);
}
.page-pricing .wa-faq-list {
  max-width: 800px;
  margin: 0 auto;
  display: grid;
  gap: 12px;
}
.page-pricing .wa-faq-item {
  background: #fff;
  border: 1px solid var(--wa-line);
  border-radius: var(--wa-radius);
  overflow: hidden;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.page-pricing .wa-faq-item[open] {
  border-color: var(--wa-line-2);
  box-shadow: var(--wa-shadow-sm);
}
.page-pricing .wa-faq-item summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 22px;
  font: 500 16px/1.4 var(--wa-font);
  color: var(--wa-text);
}
.page-pricing .wa-faq-item summary::-webkit-details-marker { display: none; }
.page-pricing .wa-faq-chev {
  width: 20px; height: 20px;
  flex-shrink: 0;
  color: var(--wa-text-3);
  transition: transform .2s ease;
}
.page-pricing .wa-faq-item[open] .wa-faq-chev { transform: rotate(180deg); }
.page-pricing .wa-faq-item p {
  margin: 0;
  padding: 0 22px 20px;
  color: var(--wa-text-2);
  font-size: 15px;
  line-height: 1.55;
}

/* — Compare jump-link below cards —
 *  Маленькая ссылка-anchor под сеткой тарифов, ведёт к таблице. */
.page-pricing .wa-compare-jump {
  text-align: center;
  margin-top: 28px;
}

/* ==========================================================================
 *  TEMP DEBUG — hide the phone shell, keep only messages visible.
 *  Delete this whole block to restore the phone mockup.
 * ========================================================================== */
.page-home .wa-phone {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
}
.page-home .wa-phone-screen {
  background: transparent !important;
  border-radius: 0 !important;
}
.page-home .wa-phone-status,
.page-home .wa-phone-header,
.page-home .wa-phone-input {
  display: none !important;
}
.page-home .wa-chat {
  background: transparent !important;
  background-image: none !important;
}