/* Marketing landing page (phase 6.2). Deliberately its own stylesheet, not
   folded into style.css: these rules (nav scroll-state, hero gradient,
   stat/step/pricing grids, scroll-reveal) are only ever used on one page and
   would otherwise bloat the CSS every authenticated screen also has to load.
   Reuses the shared design tokens (--brand/--surface/--text/... from
   style.css's :root and [data-theme="dark"]) so the page stays on-brand and
   themeable without redefining a second palette. */

.lp-skip-link {
  position: absolute;
  top: -48px;
  left: 8px;
  z-index: 200;
  background: var(--surface);
  color: var(--text);
  padding: 10px 16px;
  border-radius: 8px;
  border: 1px solid var(--border);
  text-decoration: none;
  transition: top 0.15s ease;
}

.lp-skip-link:focus {
  top: 8px;
}

.lp-body {
  overflow-x: hidden;
}

.lp-container {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 24px;
}

.lp-container-narrow {
  max-width: 820px;
}

.lp-section {
  padding: 88px 0;
}

.lp-section-sub {
  color: var(--text-muted);
  font-size: 17px;
  max-width: 640px;
  margin: -8px 0 40px;
}

.lp-eyebrow {
  display: inline-block;
  color: var(--brand);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: 12px;
}

/* ---- Nav ---- */

/* position: fixed (not sticky) is what makes "transparent over the hero"
   actually work — the nav needs to visually sit ON TOP of the hero's
   gradient rather than push it down in normal flow, or the transparent
   state just shows the plain page background instead (unreadable white nav
   text on the light theme's off-white page). Every .lp-section already has
   88px/56px of top padding (comfortably more than this nav's ~64-70px
   height), so once the nav goes solid on scroll it never actually clips a
   heading — no extra scroll-margin/padding hack needed on the sections. */
.lp-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}

.lp-nav.lp-nav-solid {
  background: var(--surface);
  border-bottom-color: var(--border);
}

.lp-nav-inner {
  max-width: 1180px;
  margin: 0 auto;
  padding: 14px 24px;
  display: flex;
  align-items: center;
  gap: 24px;
}

.lp-logo {
  font-family: "Space Grotesk", system-ui, sans-serif;
  font-weight: 700;
  font-size: 20px;
  text-decoration: none;
  color: var(--lp-nav-fg, var(--text));
  margin-right: auto;
}

.lp-nav.lp-nav-solid .lp-logo,
.lp-nav.lp-nav-solid .lp-nav-links a {
  color: var(--text);
}

/* Scoped to .lp-nav-inner specifically, NOT the whole .lp-nav — the
   transparent-over-hero state only ever applies to that bar. .lp-mobile-menu
   is a sibling of .lp-nav-inner (both live inside <header class="lp-nav">)
   but is always its own opaque var(--surface) panel regardless of scroll
   position; matching on .lp-nav alone would force its links white too and
   make them invisible against that panel — a real contrast bug caught while
   screenshotting the mobile menu open. */
.lp-nav:not(.lp-nav-solid) .lp-nav-inner .lp-logo,
.lp-nav:not(.lp-nav-solid) .lp-nav-inner .lp-nav-links a {
  color: #fff;
}

.lp-nav-links {
  display: flex;
  align-items: center;
  gap: 28px;
}

.lp-nav-links a {
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  opacity: 0.9;
}

.lp-nav-links a:hover {
  opacity: 1;
}

.lp-nav-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.lp-nav:not(.lp-nav-solid) .lp-nav-inner .icon-btn {
  border-color: rgba(255, 255, 255, 0.5);
  color: #fff;
  background: transparent;
}

.lp-theme-toggle {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  min-height: 40px;
  padding: 0;
  border-radius: 50%;
}

.lp-theme-icon {
  width: 18px;
  height: 18px;
}

.lp-theme-icon-moon {
  display: none;
}

:root[data-theme="dark"] .lp-theme-icon-sun {
  display: none;
}

:root[data-theme="dark"] .lp-theme-icon-moon {
  display: block;
}

.lp-nav:not(.lp-nav-solid) .lp-nav-inner .lp-link-btn {
  color: #fff;
}

.lp-link-btn {
  color: var(--text);
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  padding: 10px 12px;
}

.lp-hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 4px;
  width: 44px;
  height: 44px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--surface);
  cursor: pointer;
}

.lp-hamburger span {
  display: block;
  width: 18px;
  height: 2px;
  background: var(--text);
  border-radius: 2px;
}

.lp-mobile-menu {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 8px 24px 20px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}

.lp-mobile-menu a {
  padding: 12px 4px;
  color: var(--text);
  text-decoration: none;
  font-weight: 500;
  min-height: 44px;
  display: flex;
  align-items: center;
}

.lp-mobile-divider {
  border: none;
  border-top: 1px solid var(--border);
  margin: 4px 0;
}

.lp-mobile-cta {
  text-align: center;
  margin-top: 4px;
}

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

.lp-hero {
  position: relative;
  background: linear-gradient(
    135deg,
    color-mix(in srgb, var(--brand-dark) 55%, black) 0%,
    color-mix(in srgb, var(--brand) 35%, black) 55%,
    color-mix(in srgb, var(--brand-dark) 25%, black) 100%
  );
  color: #fff;
  padding: 64px 0 96px;
  overflow: hidden;
}

.lp-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 82% 8%, rgba(255, 255, 255, 0.16), transparent 55%);
  pointer-events: none;
}

.lp-hero-inner {
  position: relative;
  max-width: 1180px;
  margin: 0 auto;
  padding: 48px 24px 0;
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 56px;
  align-items: center;
}

.lp-hero-copy h1 {
  font-size: 44px;
  line-height: 1.12;
  color: #fff;
  margin-bottom: 20px;
}

.lp-hero-sub {
  font-size: 18px;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.88);
  max-width: 520px;
  margin: 0 0 32px;
}

.lp-hero-ctas {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.lp-hero-ctas .lp-link-btn {
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 8px;
}

.lp-btn-lg {
  padding: 14px 28px;
  font-size: 16px;
  font-weight: 600;
}

.lp-hero-trust {
  margin: 20px 0 0;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.7);
}

/* Decorative "app mockup" card — pure CSS, no screenshots, so it stays crisp
   and fast on every connection/device. */
.lp-hero-visual {
  display: flex;
  justify-content: center;
}

.lp-mock-window {
  width: 100%;
  max-width: 420px;
  background: var(--surface);
  border-radius: 14px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
  padding: 18px;
  color: var(--text);
}

.lp-mock-titlebar {
  display: flex;
  gap: 6px;
  margin-bottom: 14px;
}

.lp-mock-titlebar span {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--border);
}

.lp-mock-search {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 12px;
  margin-bottom: 14px;
}

.lp-mock-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--brand);
  flex-shrink: 0;
}

.lp-mock-search-text {
  font-size: 13px;
  color: var(--text-muted);
}

.lp-mock-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
}

.lp-mock-avatar {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: var(--brand-weak);
  flex-shrink: 0;
}

/* Short "found lead -> personalized opening line" preview text (phase
   value-prop rewrite) — was a plain decorative gray bar before; real
   (illustrative) copy communicates the personalization step at a glance
   instead of an abstract shape. Single line + ellipsis since the row is
   narrow (avatar + chip already take a fixed chunk of the 420px card). */
.lp-mock-line {
  flex: 1;
  min-width: 0;
  font-size: 11.5px;
  line-height: 1.4;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.lp-mock-line strong {
  color: var(--text);
  font-weight: 600;
}

.lp-mock-chip {
  font-size: 11px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 999px;
  white-space: nowrap;
}

.lp-mock-chip-ok {
  background: var(--success-weak);
  color: var(--success);
}

.lp-mock-chip-sent {
  background: var(--info-weak);
  color: var(--info);
}

.lp-mock-reply {
  margin-top: 14px;
  padding: 12px;
  border-radius: 10px;
  background: var(--brand-weak);
  border: 1px solid var(--border);
}

.lp-mock-chip-reply {
  background: var(--success-weak);
  color: var(--success);
}

.lp-mock-reply-text {
  margin: 8px 0 0;
  font-size: 12.5px;
  line-height: 1.5;
  font-style: italic;
  color: var(--text);
}

/* ---- Stats ---- */

.lp-stats-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
}

.lp-stat-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 24px;
}

.lp-stat-num {
  display: block;
  font-family: "Space Grotesk", system-ui, sans-serif;
  font-weight: 700;
  font-size: 34px;
  color: var(--brand);
  margin-bottom: 8px;
}

.lp-stat-line {
  font-size: 14px;
  color: var(--text);
  margin: 0 0 12px;
  line-height: 1.5;
}

.lp-stat-source {
  display: block;
  font-size: 12px;
  color: var(--text-muted);
}

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

.lp-steps-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
}

.lp-step-card {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 28px 22px 22px;
}

.lp-step-num {
  position: absolute;
  top: -14px;
  left: 20px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--brand);
  color: #fff;
  font-weight: 700;
  font-size: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.lp-step-icon {
  display: inline-flex;
  width: 32px;
  height: 32px;
  color: var(--brand);
  margin-bottom: 12px;
}

.lp-step-icon svg {
  width: 100%;
  height: 100%;
}

.lp-step-card h3 {
  margin-bottom: 6px;
}

.lp-step-card p {
  color: var(--text-muted);
  font-size: 14px;
  margin: 0;
}

/* ---- Benefits ---- */

.lp-benefits-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}

.lp-benefit-tile {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 24px;
}

.lp-benefit-icon {
  display: inline-flex;
  width: 30px;
  height: 30px;
  color: var(--brand);
  background: var(--brand-weak);
  border-radius: 8px;
  padding: 6px;
  margin-bottom: 14px;
}

.lp-benefit-icon svg {
  width: 100%;
  height: 100%;
}

.lp-benefit-tile h3 {
  font-size: 16px;
  margin-bottom: 6px;
}

.lp-benefit-tile p {
  color: var(--text-muted);
  font-size: 14px;
  margin: 0;
}

/* ---- Why us ---- */

.lp-why-section {
  background: var(--surface-2);
}

.lp-why-inner {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 48px;
  align-items: start;
}

.lp-why-copy h2 {
  font-size: 30px;
  line-height: 1.25;
}

.lp-why-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
  grid-column: 1 / -1;
}

.lp-why-inner .lp-why-copy {
  grid-column: 1;
}

.lp-why-inner .lp-why-list {
  grid-column: 2;
  grid-row: 1;
}

.lp-why-list li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 15px;
  line-height: 1.5;
}

.lp-why-check {
  display: inline-flex;
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  color: var(--success);
  margin-top: 1px;
}

.lp-why-check svg {
  width: 100%;
  height: 100%;
}

.lp-why-stat {
  grid-column: 2;
  margin: 8px 0 0;
  font-size: 14px;
  color: var(--text);
  background: var(--brand-weak);
  border-radius: 8px;
  padding: 14px 16px;
}

.lp-why-stat .lp-stat-source {
  display: inline;
}

/* ---- Social proof ---- */

.lp-proof-header {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.lp-proof-header h2 {
  margin-bottom: 0;
}

.lp-testimonial-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  margin-top: 16px;
}

.lp-testimonial-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 22px;
}

.lp-testimonial-card p {
  font-size: 14px;
  color: var(--text-muted);
  font-style: italic;
  margin: 0 0 14px;
}

.lp-testimonial-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}

.lp-metric-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  margin-top: 32px;
  padding-top: 32px;
  border-top: 1px solid var(--border);
}

.lp-metric {
  text-align: center;
}

.lp-metric-num {
  display: block;
  font-family: "Space Grotesk", system-ui, sans-serif;
  font-weight: 700;
  font-size: 28px;
  color: var(--text-muted);
}

.lp-metric span:last-child {
  font-size: 13px;
  color: var(--text-muted);
}

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

.lp-pricing-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  align-items: stretch;
}

.lp-pricing-card {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 28px 24px;
  display: flex;
  flex-direction: column;
}

.lp-pricing-card-highlight {
  border-color: var(--brand);
  box-shadow: 0 8px 28px rgba(47, 111, 91, 0.16);
}

.lp-pricing-badge {
  position: absolute;
  top: -12px;
  left: 24px;
  background: var(--brand);
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 999px;
}

.lp-pricing-tagline {
  color: var(--text-muted);
  font-size: 14px;
  margin: 0 0 18px;
}

.lp-pricing-features {
  list-style: none;
  margin: 0 0 24px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: 14px;
  flex: 1;
}

.lp-pricing-features li {
  padding-left: 20px;
  position: relative;
}

.lp-pricing-features li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 7px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--brand);
}

.lp-pricing-cta {
  text-align: center;
}

.lp-pricing-note {
  text-align: center;
  color: var(--text-muted);
  font-size: 13px;
  margin: 24px 0 0;
}

/* ---- FAQ ---- */

.lp-faq-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.lp-faq-item {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
}

.lp-faq-item h3 {
  margin: 0;
}

.lp-faq-question {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: transparent;
  border: none;
  cursor: pointer;
  font-family: "Space Grotesk", system-ui, sans-serif;
  font-weight: 600;
  font-size: 15px;
  color: var(--text);
  padding: 18px 20px;
  min-height: 44px;
  text-align: left;
}

.lp-faq-caret {
  flex-shrink: 0;
  width: 10px;
  height: 10px;
  border-right: 2px solid var(--text-muted);
  border-bottom: 2px solid var(--text-muted);
  transform: rotate(45deg);
  transition: transform 0.15s ease;
}

.lp-faq-question[aria-expanded="true"] .lp-faq-caret {
  transform: rotate(225deg);
}

.lp-faq-answer {
  padding: 0 20px 18px;
  color: var(--text-muted);
  font-size: 14px;
  line-height: 1.55;
}

.lp-faq-answer p {
  margin: 0;
}

/* ---- Final CTA band ---- */

.lp-final-cta {
  background: linear-gradient(
    120deg,
    color-mix(in srgb, var(--brand-dark) 55%, black) 0%,
    color-mix(in srgb, var(--brand) 40%, black) 100%
  );
  padding: 64px 0;
  text-align: center;
}

.lp-final-cta-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
}

.lp-final-cta h2 {
  color: #fff;
  font-size: 30px;
  max-width: 620px;
  margin: 0;
}

/* ---- Contact page (app/templates/contact.html) ---- */
/* This page has no .lp-hero, so .lp-section's normal 88px top padding (sized
   to clear the nav) reads as cramped for a single, short, centered section —
   a bit of extra top padding here is purely aesthetic, not required for the
   nav-clipping reason that padding otherwise exists for. */

.lp-contact-section {
  padding-top: 160px;
  text-align: center;
}

.lp-contact-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0 auto;
}

.lp-contact-icon {
  display: inline-flex;
  width: 44px;
  height: 44px;
  color: var(--brand);
  background: var(--brand-weak);
  border-radius: 14px;
  padding: 10px;
  margin-bottom: 20px;
}

.lp-contact-icon svg {
  width: 100%;
  height: 100%;
}

.lp-contact-sub {
  margin-left: auto;
  margin-right: auto;
}

.lp-contact-email-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.lp-copy-btn {
  width: 44px;
  min-height: 44px;
  padding: 0;
  border-radius: 50%;
  flex-shrink: 0;
}

.lp-copy-icon {
  width: 17px;
  height: 17px;
}

.lp-copy-icon-done {
  display: none;
  color: var(--success, #2f6f5b);
}

.lp-copy-btn.is-copied .lp-copy-icon-default {
  display: none;
}

.lp-copy-btn.is-copied .lp-copy-icon-done {
  display: block;
}

.lp-copy-btn.is-copied {
  border-color: var(--success, #2f6f5b);
  color: var(--success, #2f6f5b);
}

.lp-contact-back {
  margin-top: 32px;
}

.lp-contact-back a {
  color: var(--text-muted);
  text-decoration: none;
  font-size: 14px;
}

.lp-contact-back a:hover {
  color: var(--text);
  text-decoration: underline;
}

@media (max-width: 600px) {
  .lp-contact-section {
    padding-top: 128px;
  }
}

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

.lp-footer {
  background: var(--surface-2);
  border-top: 1px solid var(--border);
  padding: 40px 0;
}

.lp-footer-inner {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr;
  gap: 24px;
  align-items: start;
}

.lp-footer-brand p {
  color: var(--text-muted);
  font-size: 13px;
  margin: 8px 0 0;
  max-width: 260px;
}

.lp-footer-links {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.lp-footer-links a {
  color: var(--text-muted);
  text-decoration: none;
  font-size: 14px;
}

.lp-footer-links a:hover {
  color: var(--brand);
}

.lp-footer-meta {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: flex-end;
  text-align: right;
  font-size: 13px;
  color: var(--text-muted);
}

/* ---- Scroll reveal ----
   Progressive enhancement: .lp-reveal elements are fully visible by default
   (so a JS failure/block never hides content — see landing.js). Only once
   landing.js has run does it tag <body class="lp-js"> and the hidden/fade-in
   states below actually apply; prefers-reduced-motion is checked in JS too,
   so a reduced-motion visitor never gets the .lp-js class's hidden state at
   all rather than getting it and having the transition merely skipped. */

body.lp-js .lp-reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

body.lp-js .lp-reveal.lp-in-view {
  opacity: 1;
  transform: none;
}

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

  .lp-faq-caret {
    transition: none;
  }
}

/* ---- Focus states ---- */

.lp-nav-links a:focus-visible,
.lp-link-btn:focus-visible,
.lp-logo:focus-visible,
.lp-hamburger:focus-visible,
.lp-faq-question:focus-visible,
.lp-footer-links a:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}

.lp-nav:not(.lp-nav-solid) .lp-nav-links a:focus-visible,
.lp-nav:not(.lp-nav-solid) .lp-link-btn:focus-visible,
.lp-nav:not(.lp-nav-solid) .lp-logo:focus-visible {
  outline-color: #fff;
}

/* ---- Responsive ---- */

@media (max-width: 1023px) {
  .lp-hero-inner {
    grid-template-columns: 1fr;
    gap: 40px;
    text-align: center;
  }

  .lp-hero-copy {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .lp-hero-sub {
    max-width: 100%;
  }

  .lp-hero-visual {
    max-width: 420px;
    /* min-width: 0 overrides the grid item's automatic min-width:auto
       (which resolves to the subtree's min-content size) — without it, the
       real text now inside .lp-mock-line (white-space: nowrap, so its
       min-content IS its full unwrapped width) forces this whole card wider
       than the viewport on narrow phones regardless of max-width, a classic
       CSS grid "min-content blowout". Caught via an actual mobile-viewport
       screenshot, not a hypothetical — see the sibling .lp-mock-line note. */
    min-width: 0;
    width: 100%;
    margin: 0 auto;
  }

  .lp-stats-grid,
  .lp-steps-grid,
  .lp-benefits-grid,
  .lp-testimonial-grid,
  .lp-pricing-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .lp-why-inner {
    grid-template-columns: 1fr;
  }

  .lp-why-inner .lp-why-copy,
  .lp-why-inner .lp-why-list,
  .lp-why-stat {
    grid-column: 1;
  }

  .lp-footer-inner {
    grid-template-columns: 1fr 1fr;
  }

  .lp-footer-meta {
    align-items: flex-start;
    text-align: left;
  }
}

@media (max-width: 860px) {
  .lp-nav-links,
  .lp-nav-actions {
    display: none;
  }

  .lp-hamburger {
    display: inline-flex;
  }

  .lp-mobile-menu[hidden] {
    display: none;
  }
}

@media (min-width: 861px) {
  .lp-mobile-menu {
    display: none !important;
  }
}

@media (max-width: 640px) {
  .lp-section {
    padding: 56px 0;
  }

  .lp-hero {
    padding: 36px 0 64px;
  }

  .lp-hero-copy h1 {
    font-size: 30px;
  }

  .lp-hero-sub {
    font-size: 16px;
  }

  .lp-hero-ctas {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
  }

  .lp-hero-ctas .btn,
  .lp-hero-ctas .lp-link-btn {
    text-align: center;
  }

  .lp-stats-grid,
  .lp-steps-grid,
  .lp-benefits-grid,
  .lp-testimonial-grid,
  .lp-metric-strip,
  .lp-pricing-grid {
    grid-template-columns: 1fr;
  }

  .lp-footer-inner {
    grid-template-columns: 1fr;
  }

  .lp-footer-meta {
    align-items: flex-start;
    text-align: left;
  }

  .lp-final-cta h2 {
    font-size: 24px;
  }
}