/* /founders — landing page for the self-help × small-business-owner audience.
   Inherits everything from /styles.css. This file only adds what that page
   needs and does not exist elsewhere: a proof strip, a two-column "the pattern"
   section, and a founder-specific quote layout. Tokens come from :root. */

.fd .hero{max-height:980px}
.fd .hero h1{font-size:clamp(46px,6.4vw,92px);text-wrap:balance}
.fd .hero-content{max-width:820px}
.fd .hero-content p{max-width:600px}

/* A single line of proof under the fold. Deliberately quiet. */
.fd-proof{background:#e9ecdf;padding:26px max(5vw,24px);border-bottom:1px solid var(--line)}
.fd-proof ul{list-style:none;margin:0 auto;padding:0;max-width:1100px;display:flex;flex-wrap:wrap;gap:14px 40px;justify-content:center;font-size:13px;color:var(--muted);letter-spacing:.02em}
.fd-proof li{display:flex;align-items:center;gap:10px}
.fd-proof li:before{content:'';width:6px;height:6px;border-radius:50%;background:#93ae72;flex-shrink:0}

/* "The pattern" — text beside a tall image, the shape the homepage cases use. */
.fd-pattern{display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:center;max-width:1200px;margin:auto}
.fd-pattern img{width:100%;height:560px;object-fit:cover;border-radius:var(--radius)}
.fd-pattern h2{font-size:clamp(32px,4vw,54px);margin-bottom:24px}
.fd-pattern p{color:var(--muted);font-size:17px}
.fd-pattern p strong{color:var(--ink);font-weight:500}

/* Three founder scenarios. Text-only cards, numbered like the steps section. */
.fd-scenarios .grid{max-width:1200px;margin:auto}
.fd-scenario{border-top:1px solid var(--line);padding:28px 0 8px}
.fd-scenario h3{font-size:24px;margin-bottom:14px;letter-spacing:-.02em}
.fd-scenario p{color:var(--muted);font-size:15px}
.fd-scenario .number{margin-bottom:22px}

/* The one testimonial that matters here gets its own room. */
.fd-quote{background:#263429;color:#f4f4e9;max-width:none;text-align:center}
.fd-quote blockquote{margin:0 auto 28px;max-width:860px;font-family:'Host Grotesk','DM Sans',sans-serif;font-size:clamp(24px,3vw,40px);line-height:1.3;letter-spacing:-.03em;text-wrap:balance}
.fd-quote figcaption{font-size:13px;color:#c2cbb5}
.fd-quote figcaption strong{display:block;color:#f4f4e9;font-weight:500;font-size:15px;margin-bottom:4px}
.fd-quote .fd-more{margin-top:50px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;max-width:1100px;margin-left:auto;margin-right:auto;text-align:left}
.fd-quote .fd-more figure{margin:0;padding:24px;background:#344332;border-radius:var(--radius)}
.fd-quote .fd-more blockquote{font-family:'DM Sans',sans-serif;font-size:15px;line-height:1.6;letter-spacing:0;margin-bottom:16px;text-wrap:pretty}

/* Break up the paper run at the bottom of the page.
   After the dark quote, How-it-works / Pricing / FAQ were three consecutive
   #f6f5ef sections — the homepage never runs more than two — so the page went
   flat exactly where the decision gets made. Sage on How-it-works matches the
   homepage, which uses .steps for the same content. */
.fd-how{background:#e9ecdf;max-width:none}
.fd-how>*{max-width:1600px;margin-inline:auto}

/* Pricing, single card, inherits .price-card. */
.fd-price{max-width:520px;margin:auto}
.fd-upgrade{margin:26px 0 0;padding-top:22px;border-top:1px solid var(--line);font-size:13px;line-height:1.6;color:var(--muted)}
.fd-upgrade strong{color:var(--ink);font-weight:500}
.fd-price .price-card{text-align:left}
.fd-price .fd-terms{font-size:12px;color:var(--muted);text-align:center;margin-top:16px}

@media(max-width:1100px){.fd-pattern{gap:40px}.fd-pattern img{height:460px}}
@media(max-width:800px){
  .fd-pattern{grid-template-columns:1fr}
  .fd-pattern img{height:360px;order:-1}
  .fd-quote .fd-more{grid-template-columns:1fr}
  .fd-proof ul{gap:10px 24px;font-size:12px}
}
@media(max-width:540px){
  .fd .hero h1{font-size:44px}
  .fd-scenarios .three{grid-template-columns:1fr}
  .fd-quote blockquote{font-size:24px}
}