/* Homepage blocks that show the real product (screenshots, plain copy) instead
   of illustrations. Sits on top of homepage-v2.css. */

/* ---- hero: copy left, real screenshots right ---- */
.hero-real{padding:70px 0 30px}
.hero-real-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:40px;align-items:center;padding-bottom:0}
.hero-real-copy{text-align:left;max-width:none;margin:0}
.hero-real-copy h1{font-size:60px;letter-spacing:-3px;margin:16px 0 18px}
.hero-real-copy>p{font-size:18px;line-height:1.6;color:#b5c8b8;max-width:560px;margin:0 0 26px}
.hero-real-copy>p b{color:#fff;font-weight:700}
.store-row{display:flex;flex-wrap:wrap;gap:10px}
.store-btn{display:inline-flex;align-items:center;gap:11px;padding:11px 16px 11px 12px;border-radius:12px;background:#fff;color:#0c1b0f;text-decoration:none;box-shadow:0 12px 28px rgba(0,0,0,.28);transition:.18s}
.store-btn:hover{transform:translateY(-2px)}
.store-btn img{width:26px;height:26px}
.store-btn small{display:block;font-size:10px;font-weight:700;letter-spacing:.6px;color:#657168;text-transform:uppercase}
.store-btn b{display:block;font:800 14px Manrope}
.hero-fine{display:block;margin-top:14px;color:#829d87;font-size:13px}
.hero-shots{position:relative;height:600px}
.hero-shots figure{position:absolute;margin:0}
.hero-shots img{display:block;height:auto}
.shot-phone{left:4%;top:0;width:262px;border:6px solid #1b241d;border-radius:30px;overflow:hidden;box-shadow:0 40px 90px rgba(0,0,0,.55);background:#0d0f0e}
.shot-phone img{width:100%}
.shot-ext{right:0;top:120px;width:300px;border-radius:18px;overflow:hidden;box-shadow:0 30px 70px rgba(0,0,0,.5);border:1px solid rgba(255,255,255,.08)}
.shot-ext img{width:100%}
.hero-shots figcaption{position:absolute;left:0;right:0;bottom:-2px;text-align:center;font-size:11.5px;color:#6f8a79}

/* ---- proof strip: one more figure ---- */
.proof-items div b{white-space:nowrap}

/* ---- how it works ---- */
.howto{background:#fff}
.howto .section-head p{color:var(--muted);font-size:17px}
.how-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.how-grid article{position:relative;padding:0;border:1px solid var(--line);border-radius:22px;background:#f5f8f4;overflow:hidden}
.how-grid figure{margin:0;height:330px;overflow:hidden;display:flex;justify-content:center;align-items:flex-start;padding:26px 26px 0;background:linear-gradient(180deg,#e8f3e5,#f5f8f4)}
.how-grid figure img{width:200px;height:auto;border-radius:22px;box-shadow:0 22px 50px rgba(9,45,15,.22);border:5px solid #1b241d;background:#0d0f0e}
.how-grid article:first-child figure img{width:240px;border:1px solid var(--line);border-radius:14px;background:#fff}
.how-n{position:absolute;top:18px;left:18px;width:34px;height:34px;display:grid;place-items:center;border-radius:50%;background:#0c1b0f;color:#7cf765;font:800 14px Manrope}
.how-grid h3{margin:22px 26px 8px;font-size:21px;letter-spacing:-.4px}
.how-grid p{margin:0 26px 26px;font-size:14.5px;line-height:1.65;color:#4a5a4d}
.how-grid p b{color:var(--ink)}

/* ---- free / pro / dedicated ---- */
.offer{background:var(--paper)}
.offer-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.offer-grid article{padding:30px 28px;border:1px solid var(--line);border-radius:22px;background:#fff}
.offer-grid article.offer-pro{border:2px solid #32d61e;box-shadow:0 26px 70px rgba(48,201,31,.16)}
.offer-grid h3{margin:0 0 8px;font-size:15px;letter-spacing:1px;text-transform:uppercase;color:#657168}
.offer-price{display:block;font:800 34px Manrope;letter-spacing:-1px;color:var(--ink);margin-bottom:16px}
.offer-price small{font:600 14px 'DM Sans';color:#657168;letter-spacing:0}
.offer-grid ul{list-style:none;margin:0 0 18px;padding:0;display:grid;gap:10px}
.offer-grid li{position:relative;padding-left:24px;font-size:14.5px;line-height:1.5;color:#2b3a2e}
.offer-grid li:before{content:'✓';position:absolute;left:0;color:#1f8a20;font-weight:900}
.offer-note{margin:26px 0 0;text-align:center;color:var(--muted);font-size:14px}
.offer-note a{color:#1c871d;font-weight:700}

/* ---- straight answers ---- */
.plain{background:#fff}
.plain-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:60px;align-items:start}
.plain-grid h2{font-size:40px;letter-spacing:-1.8px;margin:12px 0 14px}
.plain-grid>div>p{font-size:17px}
.plain-list{display:grid;gap:0;border-top:1px solid var(--line)}
.plain-list>div{padding:22px 0;border-bottom:1px solid var(--line)}
.plain-list b{display:block;font:800 17px Manrope;color:var(--ink);margin-bottom:6px}
.plain-list span{display:block;font-size:15px;line-height:1.65;color:#4a5a4d}
.plain-list a{color:#1c871d;font-weight:700}

/* ---- guides: text cards, no artwork ---- */
.learn .article-grid article{padding:26px 26px 22px;border:1px solid var(--line);border-radius:18px;background:#fff}
.learn .article-grid article small{display:block;margin-bottom:10px}
.learn .article-grid article h3{font-size:19px;line-height:1.35;margin:0 0 14px}

/* ---- payments ---- */
.paywith{background:var(--paper);padding:70px 0}
.paywith-row{display:flex;align-items:center;justify-content:space-between;gap:40px;flex-wrap:wrap}
.paywith-row h2{font-size:34px;letter-spacing:-1.4px;margin:10px 0 6px}
.paywith-row p{margin:0;color:var(--muted)}
.pay-logos{display:flex;flex-wrap:wrap;gap:12px}
.pay-logos span{display:inline-flex;align-items:center;gap:10px;padding:12px 18px;border-radius:12px;background:#fff;border:1px solid var(--line);font:800 14px 'DM Sans';color:var(--ink)}
.pay-logos img{border-radius:6px}
.pay-logos .pxjc-logo{display:inline-block;width:26px;height:26px;border-radius:7px;background:linear-gradient(135deg,#f4b400 50%,#d32f2f 50%)}
.pay-logos .pxusdt-logo{display:inline-grid;place-items:center;width:26px;height:26px;border-radius:50%;background:#26a17b;color:#fff;font:900 15px/1 'DM Sans';font-style:normal}

@media(max-width:980px){
  .hero-real-grid{grid-template-columns:1fr;gap:30px}
  .hero-real-copy{text-align:center}.hero-real-copy>p{margin:0 auto 24px}.store-row{justify-content:center}
  .hero-real-copy h1{font-size:44px;letter-spacing:-2px}
  .hero-shots{height:480px;max-width:520px;margin:0 auto;width:100%}
  .how-grid,.offer-grid{grid-template-columns:1fr}
  .plain-grid{grid-template-columns:1fr;gap:24px}
}
@media(max-width:600px){
  .hero-real{padding-top:44px}
  .hero-real-copy h1{font-size:36px}
  .hero-shots{height:420px}.shot-phone{width:190px;left:0}.shot-ext{width:230px;top:90px}
  .store-btn{flex:1 1 100%;justify-content:center}
  .how-grid figure{height:280px}
  .plain-grid h2{font-size:30px}
}