/* Google Ads landing pages (/calls-for-you/, /ai-receptionist/) on the
   redesigned homepage template, 2026-10-19 (founder: "use old screenshot and
   template fix that"). Loaded AFTER css/home.css and only adds the few blocks
   the ad pages have and the homepage does not; every colour, font, button,
   nav, footer, pricing card and dark-mode value comes from home.css tokens.
   No fixed widths wider than a 390px phone: columns use minmax()/max-width. */

/* Hero note under the store buttons (the homepage uses .hero-points). */
.lp .hero-note {
    display: flex; align-items: flex-start; gap: .5rem;
    margin-top: 22px; max-width: 34rem;
    color: var(--text-2); font-weight: 500; font-size: .95rem;
}

/* How it works: the vertical demo video next to the three steps. */
.lp-how {
    display: grid; grid-template-columns: minmax(0, 320px) minmax(0, 1fr);
    gap: 56px; align-items: center; max-width: 1000px; margin: 0 auto;
}
.lp-video { width: 100%; max-width: 320px; margin: 0 auto; }
.lp-steps { display: grid; gap: 16px; }
.lp-step {
    display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 16px; align-items: start;
    padding: 22px 24px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line);
}
.lp-step .step-num { margin: 0; }
.lp-step h3 { font-size: 1.18rem; margin-bottom: 4px; }
.lp-step p { color: var(--text-2); }

.lp-aside { max-width: 820px; margin: 36px auto 0; text-align: center; color: var(--text-2); }
.lp-aside a, .lp-aside-card a { color: var(--accent-text); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }

/* Examples: four cards, two per row. */
.lp-cases { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 1000px; margin: 0 auto; }
.lp .lp-case { display: block; }
.lp-case .lp-quote { margin-bottom: 8px; color: var(--accent-text); font-weight: 600; font-style: italic; }

.lp-aside-card {
    display: flex; align-items: flex-start; gap: 18px; max-width: 1000px; margin: 18px auto 0;
    padding: 26px; border-radius: var(--radius);
    background: linear-gradient(var(--surface), var(--surface)) padding-box, var(--grad-blue) border-box;
    border: 2px solid transparent; box-shadow: var(--shadow);
}
.lp-aside-card .cap-icon { flex-shrink: 0; margin: 0; }
.lp-aside-card h3 { font-size: 1.12rem; margin-bottom: 6px; }
.lp-aside-card p { color: var(--text-2); }

/* Pricing: the three paid plans (no Enterprise card here). */
.pricing-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 1000px; margin: 0 auto; }

.lp-kicker-light { color: rgba(255, 255, 255, .85); }

@media (max-width: 960px) {
    .lp .hero-note { justify-content: center; margin-left: auto; margin-right: auto; text-align: left; }
    .lp-how { grid-template-columns: minmax(0, 1fr); gap: 32px; }
    .lp-video { max-width: 300px; }
    .pricing-grid-3 { grid-template-columns: minmax(0, 1fr); max-width: 480px; }
}

@media (max-width: 640px) {
    .lp .hero-note { font-size: .9rem; }
    .lp-cases { grid-template-columns: minmax(0, 1fr); }
    .lp .lp-case { padding: 20px; }
    .lp-step { padding: 18px; gap: 14px; }
    .lp-aside-card { flex-direction: column; padding: 22px 20px; }
    .lp-video { max-width: min(78vw, 300px); }
}