/*
 * Landing-page design system.
 *
 * The components both designed landing pages share — the hero, the lead
 * paragraph, the feature grid, the icon-card grid, the checklist rows, the
 * drag rail, the icon and the card recipe every one of them resolves to.
 * Nothing here names a page: page-specific sections live in seo-reseller.css
 * and orm.css, which load on top of this and add only what they alone need.
 *
 * Everything is scoped to .lp-page, so it can never leak into another template.
 */
.lp-page {
  --lp-num-font: "Poppins", var(--heading-font);
  --lp-soft: #f4f8ff;
  --lp-card: #f7f9fd;
  --lp-coral: #f9736a;
  --lp-coral-soft: #ffece9;
  --lp-indigo: #4f46e5;
  --lp-indigo-soft: #eceafe;

  /* One card recipe for the whole page. Before this the sections carried five
     different surfaces (#f7f7fb, #f7f9fd, a grey-mauve gradient, a pink-grey
     gradient) and five radii between 6px and 16px, so nothing read as a set.
     Everything below now resolves to these. */
  --lp-card-r: var(--r);
  --lp-card-bg: var(--white);
  --lp-card-line: #e8edf6;
  --lp-card-shadow: 0 1px 2px rgba(13, 21, 38, 0.04);
  --lp-card-shadow-hover: 0 18px 40px rgba(13, 21, 38, 0.1);
  --lp-card-line-hover: rgba(22, 104, 255, 0.3);
  --lp-lift: transform 0.32s ease, box-shadow 0.32s ease, border-color 0.32s ease;
}

/* Cards sit still for anyone who asked motion to stop. */
@media (prefers-reduced-motion: reduce) {
  .lp-page {
      --lp-lift: box-shadow 0.32s ease, border-color 0.32s ease;
    }
}

.lp-page .lp-lead {
  max-width: 900px;
  margin: -10px auto 0;
  color: #6b7280;
  font-size: clamp(15px, 1.2vw, 17px);
}

/* ---------- Hero ---------- */
.lp-hero {
  background: var(--lp-soft);
  /* top padding clears the fixed header (14px offset + ~68px pill), the same
     allowance .hero-inner makes on the front page */
  padding-block: clamp(120px, 11vw, 170px) clamp(50px, 6vw, 90px);
}

.lp-hero-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: clamp(30px, 5vw, 70px);
  align-items: center;
}

.lp-hero-title {
  font-family: var(--heading-font);
  font-size: clamp(38px, 5vw, 68px);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: #0b1020;
  margin-bottom: 24px;
}

.lp-hero-text {
  color: #5c6779;
  font-size: clamp(15px, 1.15vw, 17px);
  line-height: 1.75;
  max-width: 62ch;
  margin-bottom: 28px;
}

.lp-hero-points {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 28px;
  margin-bottom: 34px;
}

.lp-hero-points li {
  display: flex;
  align-items: center;
  gap: 12px;
  color: #3f4757;
  font-size: 15.5px;
}

.lp-tick {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 22px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--blue);
  color: #fff;
}

.lp-tick .lp-icon {
  width: 13px;
  height: 13px;
  stroke-width: 2.6;
}

.lp-hero-art img {
  display: block;
  width: 100%;
  height: auto;
}

/* the design puts the disc on the left of this button and inverts the fill */
.lp-page .btn-ink {
  background-color: #0b0b0b;
  border-color: #0b0b0b;
}

.lp-page .btn-ink:hover {
  background-color: var(--blue);
  border-color: var(--blue);
}

.lp-page .btn-arrow-left {
  padding: 14px 30px 14px 65px;
}

.lp-page .btn-arrow-left .icon-circle {
  right: auto;
  left: 10px;
  background-color: #fff;
}

.lp-page .btn-arrow-left .icon-circle svg path {
  fill: #0b0b0b;
}

.lp-page .btn-arrow-left:hover {
  padding: 14px 30px 14px 65px;
}

.lp-page .btn-arrow-left:hover .icon-circle {
  right: auto;
  left: 10px;
}

.lp-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(18px, 2vw, 30px);
}

.lp-card {
  background: var(--lp-card-bg);
  border: 1px solid var(--lp-card-line);
  border-radius: var(--lp-card-r);
  box-shadow: var(--lp-card-shadow);
  padding: 34px 30px 40px;
  transition: var(--lp-lift);
}

.lp-card:hover {
  transform: translateY(-6px);
  border-color: var(--lp-card-line-hover);
  box-shadow: var(--lp-card-shadow-hover);
}

.lp-card h3 {
  font-size: 19px;
  font-weight: 700;
  margin-bottom: 14px;
}

.lp-card p {
  margin: 0;
  color: #5c6779;
  line-height: 1.7;
  font-size: 15px;
}

/* ---------- Benefits ---------- */
.lp-feature-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(18px, 2.2vw, 34px);
  margin-top: clamp(32px, 4vw, 52px);
}

.lp-feature {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  gap: 22px;
  align-items: start;
  background: var(--lp-card-bg);
  border: 1px solid var(--lp-card-line);
  border-radius: var(--lp-card-r);
  box-shadow: var(--lp-card-shadow);
  padding: 32px 34px;
  transition: var(--lp-lift);
}

.lp-feature:hover {
  transform: translateY(-4px);
  border-color: var(--lp-card-line-hover);
  box-shadow: var(--lp-card-shadow-hover);
}

/* Tinted squircle rather than a solid coral disc — the same icon language the
   pricing rows and the trust grid already use, so the three sections match. */
.lp-feature-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 16px;
  background: var(--lp-coral-soft);
  color: var(--lp-coral);
}

.lp-feature-icon .lp-icon {
  width: 26px;
  height: 26px;
}

.lp-feature h3 {
  font-size: 19px;
  font-weight: 700;
  margin-bottom: 10px;
}

.lp-feature p {
  margin: 0;
  color: #5c6779;
  font-size: 15px;
  line-height: 1.7;
}

/* ---------- How we work ---------- */
/* The layout is the shared .flow component in style.css. This page only
   restyles the numeral: Plus Jakarta builds "5" from overlapping contours, so a
   hollow stroke drew the seam between them as a notch — Poppins' digits are
   single contours. Poppins is enqueued site-wide in inc/enqueue.php. */
.lp-page .flow {
  --flow-num-font: var(--lp-num-font);
}

/* runs past the right edge in the design, so it scrolls instead of wrapping */
.lp-rail {
  overflow-x: auto;
  padding-block: 10px 12px;
  scrollbar-width: thin;
}

/* with JS the rail auto-scrolls and is grabbable, so the scrollbar and any
   snapping would only fight the drag */
.lp-rail--js {
  cursor: grab;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.lp-rail--js::-webkit-scrollbar {
  display: none;
}

.lp-rail--js.is-dragging {
  cursor: grabbing;
  user-select: none;
}

.lp-rail-track {
  display: flex;
  gap: clamp(16px, 1.8vw, 26px);
  width: max-content;
}

/* ---------- Pricing ---------- */
/* was a pink-grey (#f7f3f4) that matched nothing else on the page — retuned to
   the same cool tint as --lp-soft so the two bands belong to one palette */
.lp-checklist-section {
  background: linear-gradient(120deg, #f6f9ff 0%, #f3f6fd 55%, #eef3fd 100%);
  padding-block: clamp(50px, 6vw, 92px);
}

.lp-checklist-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: clamp(30px, 5vw, 80px);
  align-items: start;
}

/* Sticky only while there are two columns to be sticky against. Stacked, the
   copy is its own grid row: it has no travel to sit still through, and pinning
   it there parks the heading over the list as it scrolls past. */
@media (min-width: 961px) {
  .lp-checklist-copy {
    position: sticky;
    top: clamp(96px, 9vw, 124px);
  }
}

.lp-checklist-copy .heading-main {
  font-size: clamp(30px, 3.6vw, 50px);
  margin-bottom: 20px;
}

.lp-checklist-copy p {
  color: #5c6779;
  line-height: 1.8;
  margin-bottom: 32px;
}

.lp-page .btn-indigo {
  background-color: var(--lp-indigo);
  border-color: var(--lp-indigo);
}

.lp-page .btn-indigo:hover {
  background-color: #3f37c9;
  border-color: #3f37c9;
}

.lp-checklist {
  display: grid;
  gap: 16px;
}

.lp-checklist li {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) 26px;
  align-items: center;
  gap: 18px;
  background: var(--lp-card-bg);
  border: 1px solid transparent;
  border-radius: 14px;
  padding: 18px 22px;
  box-shadow: 0 6px 20px rgba(17, 19, 24, 0.05);
  transition: var(--lp-lift);
}

/* nudges right rather than up: these are rows in a stack, and a lift would
   break the even rhythm between them */
.lp-checklist li:hover {
  transform: translateX(5px);
  border-color: rgba(79, 70, 229, 0.28);
  box-shadow: 0 14px 30px rgba(17, 19, 24, 0.09);
}

.lp-checklist-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--lp-indigo-soft);
  color: var(--lp-indigo);
}

.lp-checklist-icon .lp-icon {
  width: 22px;
  height: 22px;
}

.lp-checklist-label {
  color: #2c3444;
  font-size: 15.5px;
}

.lp-checklist-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #dcd9fb;
  color: var(--lp-indigo);
}

.lp-checklist-check .lp-icon {
  width: 15px;
  height: 15px;
  stroke-width: 2.4;
}

/* ---------- Responsive ----------
   Every shared component collapses here. These used to live in
   seo-reseller.css alongside that page's own breakpoints; a second page
   reusing the components meant they had to move with them. */
@media (max-width: 1100px) {
  .lp-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 960px) {
  .lp-hero-inner,
  .lp-checklist-inner {
    grid-template-columns: minmax(0, 1fr);
  }

  /* Stacked order puts the artwork between the heading and the body copy: the
     copy wrapper goes display:contents so its children become grid items that
     can be reordered around the sibling art column. */
  .lp-hero-inner {
    gap: 0;
  }

  .lp-hero-copy {
    display: contents;
  }

  .lp-hero-title {
    order: -2;
  }

  .lp-hero-art {
    order: -1;
    margin-bottom: 28px;
  }

  .lp-feature-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 640px) {
  .lp-cards {
    grid-template-columns: minmax(0, 1fr);
  }

  .lp-hero-points {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ---------- Justified body copy ----------
   Multi-line prose only. Centred leads (.lp-lead) stay centred — justify has
   nothing to align against there. Short single-line copy (.lp-feature p,
   .lp-card p) is left ragged for the same reason. text-wrap: pretty keeps the
   last line from stranding a single word.

   Scoped to .lp-page: .flow-body is a shared component the front page also
   renders, and the front page is not justified. */
.lp-page .lp-hero-text,
.lp-page .lp-checklist-copy p,
.lp-page .flow-body p,
.lp-page .faq-ans-in p {
  text-align: justify;
  text-justify: inter-word;
  text-wrap: pretty;
  hyphens: auto;
}

/* Phone measure is ~35 characters — too short to justify without visible word
   gaps, so the copy goes back to ragged-right here. */
@media (max-width: 640px) {
  .lp-page .lp-hero-text,
  .lp-page .lp-checklist-copy p,
  .lp-page .flow-body p,
  .lp-page .faq-ans-in p {
    text-align: left;
    hyphens: manual;
  }
}