/* LeadsLean V3 — wide composition and reduced-scroll production layer.
   Presentation only. Loaded after visual-reviewed-v2.css. */

:root {
  --ll-wide-gutter: clamp(20px, 2vw, 38px);
  --ll-wide-max: 1840px;
}

/* One alignment grid for header, hero, body sections and footer. */
html body.visual-review-approved .container,
html body.visual-review-approved .hero > .container,
html body.visual-review-approved .site-header > .container,
html body.visual-review-approved .site-footer > .container {
  width: min(var(--ll-wide-max), calc(100% - (var(--ll-wide-gutter) * 2))) !important;
  max-width: none !important;
  margin-inline: auto !important;
}

/* Header now uses the same near-edge grid as the page. */
html body.visual-review-approved .header-row {
  min-height: 72px;
  gap: clamp(1rem, 2vw, 2.25rem);
}
html body.visual-review-approved .nav {
  gap: clamp(.12rem, .45vw, .55rem);
}
html body.visual-review-approved .nav a {
  padding-inline: clamp(.55rem, .7vw, .82rem);
}

/* Hero: wider, left-aligned, shorter and easier to scan. */
html body.visual-review-approved .hero {
  padding-top: clamp(46px, 4vw, 62px) !important;
  padding-bottom: clamp(34px, 3vw, 46px) !important;
}
html body.visual-review-approved .hero > .container {
  padding-left: 0 !important;
}
html body.visual-review-approved .hero h1 {
  max-width: 1500px !important;
  width: 100% !important;
  font-size: clamp(3.1rem, 4.65vw, 5.35rem) !important;
  line-height: .99 !important;
  letter-spacing: -.047em !important;
  text-wrap: pretty !important;
}
html body.visual-review-approved .hero .lede {
  max-width: 1240px !important;
  font-size: clamp(1.04rem, 1.25vw, 1.2rem) !important;
  line-height: 1.52 !important;
  margin-top: 20px !important;
}
html body.page-home.visual-review-approved .hero .hero-actions,
html body.visual-review-approved .hero .hero-actions {
  justify-content: flex-start !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  width: auto !important;
  margin-top: 1.65rem !important;
}
html body.visual-review-approved .hero-proof {
  width: auto !important;
  max-width: 1240px !important;
  text-align: left !important;
  margin-top: 1.2rem !important;
}

/* Reduce vertical bulk across the full site. */
html body.visual-review-approved main > .section {
  padding-top: clamp(34px, 3.2vw, 46px) !important;
  padding-bottom: clamp(34px, 3.2vw, 46px) !important;
}
html body.visual-review-approved h2 {
  max-width: 1320px !important;
  font-size: clamp(2rem, 3.15vw, 3.35rem) !important;
  line-height: 1.04 !important;
}
html body.visual-review-approved .lede {
  max-width: 1180px;
  line-height: 1.55;
  margin-top: 1.2rem;
}
html body.visual-review-approved .prose {
  max-width: 1040px;
}

/* Keep the green section rail but stop it consuming a large left margin. */
html body.visual-review-approved:not(.page-legal):not(.page-error) main > .section > .container {
  padding-left: 22px !important;
}
html body.visual-review-approved:not(.page-legal):not(.page-error) main > .section > .container::before {
  width: 3px;
}
html body.visual-review-approved .hero > .container {
  padding-left: 0 !important;
}

/* Make better use of horizontal space. */
html body.visual-review-approved .split {
  grid-template-columns: minmax(0, 1.38fr) minmax(300px, .62fr) !important;
  gap: clamp(28px, 3vw, 50px) !important;
}
html body.page-home.visual-review-approved .grid-3,
html body.page-sprint.visual-review-approved .grid-3,
html body.visual-review-approved .grid-3 {
  grid-template-columns: repeat(3, minmax(0,1fr)) !important;
}
html body.page-home.visual-review-approved .grid-3 > :nth-child(3),
html body.page-sprint.visual-review-approved .grid-3 > :nth-child(3) {
  grid-column: auto !important;
}
html body.visual-review-approved .grid-2,
html body.visual-review-approved .grid-3,
html body.visual-review-approved .article-grid,
html body.visual-review-approved .topic-grid {
  gap: 16px !important;
  margin-top: 22px !important;
}
html body.visual-review-approved .topic-grid,
html body.visual-review-approved .article-grid {
  grid-template-columns: repeat(3, minmax(0,1fr)) !important;
}
html body.visual-review-approved .card,
html body.visual-review-approved .article-card {
  padding: 22px 24px 25px 29px !important;
}

/* System/decision strips: 3-up instead of 2-up where space permits. */
html body.visual-review-approved .system-strip {
  grid-template-columns: repeat(3, minmax(0,1fr)) !important;
  gap: 12px !important;
  margin-top: 22px !important;
}
html body.visual-review-approved .system-strip--7 {
  grid-template-columns: repeat(4, minmax(0,1fr)) !important;
  gap: 12px !important;
  margin-top: 22px !important;
}
html body.visual-review-approved .system-strip div,
html body.visual-review-approved .system-strip--7 div {
  min-height: 70px !important;
  padding: 13px 16px !important;
}

/* Timelines can use three columns on wide screens. */
html body.visual-review-approved .flow {
  grid-template-columns: repeat(3, minmax(0,1fr)) !important;
  gap: 14px !important;
  margin-top: 22px !important;
}
html body.visual-review-approved .flow-item {
  min-height: 0 !important;
  padding: 18px 18px 18px 16px !important;
}

/* FAQs: two columns reduces page length while retaining readable answers. */
html body.visual-review-approved .faq {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0,1fr)) !important;
  gap: 0 28px !important;
  margin-top: 22px !important;
  border-top: 0 !important;
}
html body.visual-review-approved .faq details {
  border-top: 1px solid rgba(11,31,51,.12) !important;
  border-bottom: 0 !important;
  padding: 14px 0 !important;
}
html body.visual-review-approved .faq details p {
  max-width: none !important;
}

/* CTA panels should use the new page width instead of reading like a narrow card. */
html body.visual-review-approved .cta-panel {
  padding: clamp(28px, 3vw, 44px) !important;
}

/* Footer aligns to the same page grid. */
html body.visual-review-approved .site-footer .container {
  width: min(var(--ll-wide-max), calc(100% - (var(--ll-wide-gutter) * 2))) !important;
}

/* Mid-size screens: keep width benefits without forcing desktop density. */
@media (max-width: 1180px) {
  :root { --ll-wide-gutter: 24px; }
  html body.visual-review-approved .grid-3,
  html body.visual-review-approved .topic-grid,
  html body.visual-review-approved .article-grid {
    grid-template-columns: repeat(2, minmax(0,1fr)) !important;
  }
  html body.visual-review-approved .flow {
    grid-template-columns: repeat(2, minmax(0,1fr)) !important;
  }
  html body.visual-review-approved .system-strip,
  html body.visual-review-approved .system-strip--7 {
    grid-template-columns: repeat(2, minmax(0,1fr)) !important;
  }
}

/* Tablet: preserve the global alignment but simplify composition. */
@media (max-width: 900px) {
  :root { --ll-wide-gutter: 20px; }
  html body.visual-review-approved .split {
    grid-template-columns: 1fr !important;
    gap: 28px !important;
  }
  html body.visual-review-approved .faq {
    grid-template-columns: 1fr !important;
  }
  html body.visual-review-approved .hero h1 {
    font-size: clamp(2.75rem, 8vw, 4.6rem) !important;
  }
}

/* Mobile: normal reading gutters and one-column cards. */
@media (max-width: 700px) {
  :root { --ll-wide-gutter: 14px; }
  html body.visual-review-approved:not(.page-legal):not(.page-error) main > .section > .container {
    padding-left: 0 !important;
  }
  html body.visual-review-approved:not(.page-legal):not(.page-error) main > .section > .container::before {
    display: none !important;
  }
  html body.visual-review-approved .grid-2,
  html body.visual-review-approved .grid-3,
  html body.visual-review-approved .topic-grid,
  html body.visual-review-approved .article-grid,
  html body.visual-review-approved .flow,
  html body.visual-review-approved .system-strip,
  html body.visual-review-approved .system-strip--7 {
    grid-template-columns: 1fr !important;
  }
  html body.page-home.visual-review-approved .hero .hero-actions,
  html body.visual-review-approved .hero .hero-actions {
    flex-direction: column;
    align-items: stretch !important;
  }
  html body.visual-review-approved .hero-proof {
    text-align: left !important;
  }
}