/* Used Exclusively for Product Conversion Pages */

/*
  Light, minimalist theme for the "start..." product conversion / funnel pages.
  Deliberately different from the dark house style (css/general.css): cold ad
  traffic converts better on a clean, bright, approachable page. Brand thread is
  kept through the logo/product icon; the accent + CTA use indigo (#5b4ff0),
  which harmonizes with the product icon's purple-blue gradient.
*/


/* ---- Base ---- */
* { box-sizing: border-box; }

body {
  margin: 0;
  background: #ffffff;
  color: #1f2430;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

a { color: #5b4ff0; }
.accent { color: #5b4ff0; }


/* ---- Layout ---- */
.lp-header { text-align: center; padding: 34px 20px 10px; color: #141a22; }
.lp-wrap { max-width: 900px; margin: 0 auto; padding: 0 22px; }
.lp-section { padding: 52px 0; border-bottom: 1px solid #eef0f4; }

/* Quiet back-to-site link, aligned to the content column and kept muted so it
   gives homepage visitors a way out without distracting ad traffic. */
.lp-back { max-width: 900px; margin: 0 auto; padding: 18px 22px 0; }
.lp-back a { color: #8a94a0; text-decoration: none; font-size: 0.9em; }
.lp-back a:hover { color: #5b4ff0; text-decoration: underline; }


/* ---- Hero ---- */
.hero { text-align: center; padding: 56px 0 48px; }
.hero h1 { font-size: 2.9em; line-height: 1.15; color: #141a22; margin: 0 0 18px; font-weight: 800; letter-spacing: -0.5px; }
.hero h1 .accent { color: #5b4ff0; }
.hero p.sub { font-size: 1.17em; color: #54606c; max-width: 690px; margin: 0 auto 22px; }
.hero p.stance { font-size: 1.12em; color: #141a22; font-weight: 700; max-width: 640px; margin: 0 auto 30px; }
.hero p.oneliner { font-size: 1.28em; line-height: 1.3; color: #141a22; font-weight: 800; letter-spacing: -0.3px; max-width: 640px; margin: 0 auto 10px; }
.hero p.oneliner-why { font-size: 1.08em; line-height: 1.4; color: #54606c; font-weight: 500; max-width: 600px; margin: 0 auto 30px; }
.promise { font-size: 1.1em; color: #54606c; text-align: center; max-width: 680px; margin: 0 auto 34px; }


/* ---- The single dominant call-to-action (indigo accent used only here) ---- */
.cta {
  display: inline-block; background: #5b4ff0; color: #fff !important; font-weight: 700;
  font-size: 1.1em; text-decoration: none; padding: 16px 40px; border-radius: 9px;
  box-shadow: 0 6px 18px rgba(91,79,240,0.28);
  transition: transform .1s ease, box-shadow .15s ease, background .15s ease;
}
.cta:hover { background: #4a3fd6; transform: translateY(-2px); box-shadow: 0 10px 24px rgba(91,79,240,0.34); }
.cta:active { transform: translateY(0); }
.cta-note { display: block; margin-top: 20px; color: #8a94a0; font-size: 0.9em; }


/* ---- Section headers ---- */
.sec-title { font-size: 1.8em; color: #141a22; text-align: center; margin: 0 0 8px; font-weight: 800; }
.sec-sub { text-align: center; color: #8a94a0; margin: 0 0 34px; font-weight: 500; }


/* ---- Pain cards ---- */
.pain { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 20px; }
.pain li { background: #f7f8fa; border: 1px solid #e7e9ef; border-radius: 10px; padding: 22px; color: #3a444e; }


/* ---- How it works ---- */
.steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 26px; }
.step .num { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; background: #5b4ff0; color: #fff; font-weight: 700; font-size: 1.2em; margin-bottom: 14px; }
.step h4 { color: #141a22; margin: 0 0 8px; font-size: 1.15em; }
.step p { margin: 0; color: #54606c; }


/* ---- Screenshot showcase ( one large image + caption per row ) ---- */
.shot { max-width: 840px; margin: 0 auto 56px; text-align: center; }
.shot:last-child { margin-bottom: 0; }
.shot img { width: 100%; height: auto; border-radius: 12px; border: 1px solid #e7e9ef; box-shadow: 0 12px 34px rgba(20,26,34,0.10); display: block; }
/* For component snips that already include their own background + soft shading:
   let them float on the page with no extra frame ( avoids a double shadow ). */
.shot--bare img { border: none; box-shadow: none; border-radius: 0; }
.shot .cap { margin-bottom: 16px; }
.shot .cap h4 { color: #141a22; margin: 0 0 6px; font-size: 1.2em; }
.shot .cap p { margin: 0 auto; max-width: 600px; color: #54606c; line-height: 1.55; }
/* Demo video: mirror the framed screenshot look ( rounded, bordered, soft shadow ).
   max-width + aspect-ratio keep it fully responsive - it never overflows the
   phone viewport and always reserves the right height ( source is 2322x1380 ). */
.shot video { width: 100%; max-width: 100%; height: auto; aspect-ratio: 2322 / 1380; border-radius: 12px; border: 1px solid #e7e9ef; box-shadow: 0 12px 34px rgba(20,26,34,0.10); display: block; background: #000; object-fit: contain; }

/* ---- Scroll reveal ( only active once JS adds .js-reveal; visible by default otherwise ) ---- */
.js-reveal .reveal { opacity: 0; transform: translateY(24px); transition: opacity .5s ease, transform .5s ease; }
.js-reveal .reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .js-reveal .reveal { opacity: 1; transform: none; transition: none; }
}


/* ---- What you get ---- */
.getlist { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 12px 28px; padding: 0; margin: 0; list-style: none; }
.getlist li { padding-left: 42px; position: relative; line-height: 1.7; color: #3a444e; }
.getlist li::before { content: "\2713"; position: absolute; left: 0; top: -2px; color: #5b4ff0; font-weight: 700; font-size: 2em; line-height: 1.1; }


/* ---- Testimonial ( real, named agent - no card; sits on the open page as a human
   voice, with a soft oversized quote mark so it reads as a quote, not another box ) ---- */
.testimonial { text-align: center; }
.testimonial .quote { max-width: 680px; margin: 0 auto; padding: 0; }
.testimonial blockquote { position: relative; margin: 0; color: #2b3442; font-size: 1.35em; line-height: 1.6; font-style: italic; font-weight: 500; }
.testimonial blockquote::before { content: "\201C"; display: block; font-style: normal; font-weight: 800; font-size: 3.4em; line-height: 0.1; color: #d7d3fb; margin-bottom: 22px; }
.testimonial figcaption { margin-top: 22px; color: #54606c; }
.testimonial figcaption .who { color: #141a22; font-weight: 700; }
.testimonial figcaption .role { color: #54606c; }
.testimonial figcaption .site { display: block; margin-top: 8px; color: #8a94a0; font-size: 0.9em; text-decoration: none; }
.testimonial figcaption .site:hover { color: #5b4ff0; text-decoration: underline; }


/* ---- Pricing ---- */
.pricing { text-align: center; background: #f7f8fa; border: 1px solid #d7d3fb; border-radius: 14px; padding: 40px 26px; max-width: 520px; margin: 0 auto; box-shadow: 0 10px 30px rgba(20,26,34,0.06); }
.pricing .price { font-size: 2.8em; color: #141a22; font-weight: 800; line-height: 1; }
.pricing .price span { font-size: 0.34em; color: #8a94a0; font-weight: 600; }
/* Intro pricing: $50 first month is the headline, "then $95/month" sits right under it so renewal is never a surprise. */
.pricing .price-then { margin-top: 8px; color: #54606c; font-weight: 700; font-size: 1.05em; }
.pricing ul { list-style: none; padding: 0; margin: 20px 0 28px; color: #54606c; line-height: 2; }


/* ---- FAQ ---- */
.faq { max-width: 720px; margin: 0 auto; }
.faq .q { color: #141a22; font-weight: 700; margin: 24px 0 0; font-size: 1.05em; }
.faq .a { color: #54606c; margin: 6px 0 0; }


/* ---- Final CTA ---- */
.finalcta { text-align: center; padding: 66px 0; }
.finalcta h2 { font-size: 2.4em; color: #141a22; margin: 0 0 26px; font-weight: 800; }
.finalcta h2 .accent { color: #5b4ff0; }
/* Quiet free-trial offramp: a whisper under the loud paid CTA - deliberately small
   and muted so it never competes with the $50 button (see laddering in the plan). */
.trial-offramp { margin: 26px 0 0; }
.trial-offramp a { color: #8a94a0; font-size: 0.9em; text-decoration: none; }
.trial-offramp a:hover { color: #5b4ff0; text-decoration: underline; }


/* ---- Footer ---- */
.lp-footer { text-align: center; padding: 30px 20px 56px; color: #8a94a0; font-size: 0.95em; }
.lp-footer .seefeatures { display: inline-block; margin-bottom: 16px; color: #5b4ff0; text-decoration: none; font-weight: 600; }
.lp-footer .seefeatures:hover { text-decoration: underline; }
.lp-footer .btcnote { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 16px; color: #8a94a0; text-decoration: none; font-size: 1.05em; }
.lp-footer .btcnote img { height: 40px; width: auto; }
.lp-footer .btcnote:hover { text-decoration: underline; }
.lp-footer .legal a { color: #54606c; margin: 0 10px; text-decoration: none; }
.lp-footer .legal a:hover { text-decoration: underline; }


/* ---- Responsive ---- */
@media (max-width: 600px) {
  .hero h1 { font-size: 2.15em; }
  /* Keep the demo video inside the phone viewport, same framed look as desktop. */
  .shot video { border-radius: 10px; }
}