/* ============================================================
   Wazbuy: lead-first landing (Nov 2026)
   The free demo form, the comparison table, trust facts and the
   phone bottom bar. Loaded after site.css on index and features.
   ============================================================ */

/* ---------- Hero with the demo form ---------- */
.hero2--lead .hero2__grid { align-items: start; }
.hero2--lead .hero2__copy .lede { max-width: 40ch; }
.hero2--lead .hero2__stage { margin-top: 12px; }
.hero2--lead .hero2__trust { margin-top: 20px; }
@media (max-width: 1000px) {
  .hero2--lead .hero2__stage { margin-top: 36px; }
}

/* ---------- Lead card (the free demo form) ---------- */
.lead-card {
  margin-top: 28px; max-width: 520px;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: clamp(20px, 2.4vw, 28px); box-shadow: var(--sh-3);
  color: var(--text); text-align: left; scroll-margin-top: 96px;
}
.lead-card__h { font-family: var(--font-display); font-weight: 760; font-size: 22px; letter-spacing: -0.02em; line-height: 1.2; color: var(--text); }
.lead-card__sub { color: var(--muted); font-size: 15px; line-height: 1.5; margin-top: 6px; }
.lead-card .field { margin-top: 14px; }
.lead-card .field input, .lead-card .field select { padding: 13px 14px; font-size: 16px; }
.lead-card .field select { appearance: none; -webkit-appearance: none; padding-right: 40px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23586A60' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center; }
.lead-card .field select:invalid { color: var(--muted-2); }
.lead-card .field .opt { font-weight: 500; color: var(--muted-2); }
.lead-card .btn { margin-top: 18px; }
.lead-card .form-error { margin-top: 12px; }
.lead-card .form-consent { margin-top: 10px; }

/* +91 sits inside the number box so people don't type a 0 or the code again. */
.field > .field__tel { display: flex; align-items: stretch; margin: 0; font-size: inherit; font-weight: inherit; }
.field__tel i {
  font-style: normal; font-weight: 700; color: var(--muted); display: grid; place-items: center;
  padding: 0 12px; background: var(--paper-2); border: 1px solid var(--line); border-right: 0;
  border-radius: var(--r-sm) 0 0 var(--r-sm);
}
.field__tel input { border-radius: 0 var(--r-sm) var(--r-sm) 0 !important; min-width: 0; }

.lead-perks { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 14px 0 0; padding: 0; list-style: none; color: var(--muted); font-size: 13.5px; font-weight: 600; }
.lead-perks li { display: inline-flex; align-items: center; gap: 6px; }
.lead-perks svg { width: 15px; height: 15px; color: var(--brand); flex: none; }

.lead-alt { margin-top: 14px; font-size: 14px; color: var(--muted); }
.lead-alt a { color: var(--brand-700); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }

/* Thank-you state */
.lead-ok[hidden] { display: none; }
.lead-ok { text-align: left; }
.lead-ok__ico { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--accent-soft); color: var(--brand); }
.lead-ok__ico svg { width: 24px; height: 24px; }
.lead-ok h3 { margin-top: 14px; font-family: var(--font-display); font-weight: 760; font-size: 21px; letter-spacing: -0.02em; line-height: 1.25; color: var(--text); }
.lead-ok ol { margin: 14px 0 0; padding-left: 20px; color: var(--muted); font-size: 15px; line-height: 1.55; }
.lead-ok ol li + li { margin-top: 4px; }
.lead-ok .btn { margin-top: 18px; }
.btn--wa { background: #25D366; color: #fff; box-shadow: var(--sh-2); }
.btn--wa:hover { background: #1fbf5a; transform: translateY(-1px); }
.btn--wa svg { width: 20px; height: 20px; }

/* ---------- Comparison: the app alone vs with Wazbuy ---------- */
.cmp { margin-top: clamp(28px, 3.4vw, 48px); border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--card); box-shadow: var(--sh-2); overflow: hidden; }
.cmp table { width: 100%; border-collapse: collapse; font-size: 15.5px; line-height: 1.45; }
.cmp th, .cmp td { padding: 16px 20px; text-align: left; vertical-align: top; border-top: 1px solid var(--line-2); }
.cmp thead th { border-top: 0; background: var(--paper-2); font-size: 14px; font-weight: 800; color: var(--muted); }
.cmp thead th.cmp__us { color: var(--brand-700); background: color-mix(in oklab, var(--brand) 9%, var(--paper-2)); }
.cmp tbody th { font-weight: 750; color: var(--text); width: 26%; }
.cmp td { color: var(--muted); }
.cmp td.cmp__us { color: var(--text); font-weight: 600; background: color-mix(in oklab, var(--brand) 4%, transparent); }
.cmp td .mk { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; margin-right: 8px; vertical-align: -4px; }
.cmp td .mk svg { width: 12px; height: 12px; }
.cmp td .mk--no { background: var(--danger-bg); color: var(--danger); }
.cmp td .mk--yes { background: var(--accent-soft); color: var(--brand); }
@media (max-width: 680px) {
  .cmp { background: transparent; border: 0; box-shadow: none; overflow: visible; }
  .cmp table, .cmp tbody, .cmp tr, .cmp th, .cmp td { display: block; width: auto; }
  .cmp thead { display: none; }
  .cmp tr { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-md); padding: 14px 16px; box-shadow: var(--sh-1); }
  .cmp tr + tr { margin-top: 10px; }
  .cmp th, .cmp td { padding: 0; border: 0; background: none !important; }
  .cmp tbody th { font-size: 16px; }
  .cmp td { margin-top: 8px; font-size: 15px; }
  .cmp td::before { content: attr(data-label); display: block; font-size: 12px; font-weight: 800; letter-spacing: .02em; color: var(--muted-2); margin-bottom: 2px; }
  .cmp td.cmp__us::before { color: var(--brand-700); }
}

/* ---------- Section CTA rows ---------- */
.sec-cta { margin-top: clamp(26px, 3vw, 40px); display: flex; gap: 12px 18px; justify-content: center; align-items: center; flex-wrap: wrap; }
.sec-cta .lead-alt { margin: 0; }

/* ---------- Trust facts, four across ---------- */
.facts--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1100px) { .facts--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: none; } }
@media (max-width: 640px) { .facts--4 { grid-template-columns: 1fr; max-width: 560px; margin-inline: auto; } }

/* ---------- Final CTA with the form ---------- */
.cta-box--form { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 460px); gap: clamp(28px, 4vw, 56px); align-items: center; text-align: left; }
.cta-box--form .lede { margin: 18px 0 0; }
.cta-box--form .lead-card { margin-top: 0; max-width: none; }
.cta-ticks { list-style: none; margin: 24px 0 0; padding: 0; display: grid; gap: 10px; }
.cta-ticks li { display: flex; gap: 10px; align-items: center; color: rgba(255,255,255,0.86); font-weight: 600; font-size: 15.5px; }
.cta-ticks svg { width: 18px; height: 18px; color: var(--lime); flex: none; }
@media (max-width: 900px) {
  .cta-box--form { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .cta-box--form { padding: 28px 16px 16px; border-radius: var(--r-lg); }
}

/* ---------- Page hero for /features ---------- */
.page-hero .hero2__actions { margin-top: 28px; }

/* ---------- Phone bottom bar: free demo + WhatsApp ---------- */
.mbar { display: none; }
@media (max-width: 600px) {
  .mbar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 70;
    display: flex; gap: 10px; align-items: center;
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px));
    background: rgba(252,253,251,0.96); border-top: 1px solid var(--line);
    box-shadow: 0 -8px 24px -12px rgba(8,24,16,0.18);
    transition: transform .22s ease;
  }
  @supports (backdrop-filter: blur(8px)) { .mbar { background: rgba(252,253,251,0.86); backdrop-filter: blur(10px); } }
  .mbar.is-off { transform: translateY(110%); }
  .mbar .btn { flex: 1; padding-block: 13px; }
  .mbar__wa { width: 48px; height: 48px; flex: none; border-radius: 14px; display: grid; place-items: center; background: #25D366; color: #fff; }
  .mbar__wa svg { width: 26px; height: 26px; }
  .mbar ~ .wa-float { display: none; }
  body:has(.mbar) .footer { padding-bottom: 96px; }
}
@media (prefers-reduced-motion: reduce) { .mbar { transition: none; } }

/* ---------- Headings kept for search, styled like the text they replace ---------- */
.faq__q .faq__h { font: inherit; color: inherit; letter-spacing: inherit; margin: 0; }
.strip2 .strip2__h { text-align: center; font-family: var(--font-display); font-weight: 700; font-size: clamp(18px, 2vw, 23px); letter-spacing: -0.02em; margin-bottom: 28px; }
.strip2 .strip2__h b { color: var(--brand-600); }

/* ---------- Keep the demo button on the first screen ---------- */
.hero2--lead .hero2__grid h1 { font-size: clamp(34px, 4.1vw, 60px); }
.hero2--lead .hero2__copy .lede { font-size: clamp(17px, 1.35vw, 20px); margin-top: 16px; }
.hero2--lead .lead-card { margin-top: 22px; }
.lead-card.is-done .lead-card__h, .lead-card.is-done .lead-card__sub { display: none; }
@media (max-width: 600px) {
  .hero2--lead .hero2__grid h1 { font-size: clamp(30px, 8.6vw, 44px); }
  .hero2--lead .hero2__copy .lede { font-size: 17px; }
  .lead-card { padding: 18px 16px; }
}
/* Short laptop screens (1366x768): drop the card's sub line so the button still shows. */
@media (min-width: 1001px) and (max-height: 820px) {
  .hero2--lead { padding-top: 24px; }
  .hero2--lead .hero2__grid h1 { font-size: clamp(34px, 3.7vw, 52px); margin-top: 14px; }
  .hero2--lead .lead-card__sub { display: none; }
}

/* Comparison marks hang left of the text so wrapped lines stay aligned. */
.cmp td { position: relative; padding-left: 50px; }
.cmp td .mk { position: absolute; left: 20px; top: 17px; margin: 0; }
@media (max-width: 680px) {
  .cmp tbody th { width: auto; }
  .cmp td { padding: 0 0 0 28px; }
  .cmp td::before { margin-left: -28px; }
  .cmp td .mk { left: 0; top: 20px; }
}

/* The headline is wide here, so the order badge moves to the phone's right side. */
.hero2--lead .hero2__stage .fb-1 { left: auto; right: -16px; top: 96px; }
.hero2--lead .hero2__stage .fb-2 { right: auto; left: -16px; bottom: 96px; }