.hero{padding:80px 0 72px;background:radial-gradient(ellipse at top,#eef2ff 0%,#ffffff 60%)}
    .hero-inner{max-width:820px;margin:0 auto;text-align:center}
    .hero h1{font-size:56px;line-height:1.1;font-weight:800;letter-spacing:-.02em;color:#0f172a;margin-bottom:22px}
    .hero h1 span{background:linear-gradient(135deg,#4f46e5,#8b5cf6);-webkit-background-clip:text;background-clip:text;color:transparent}
    .hero p.lead{font-size:19px;color:#4b5563;margin-bottom:32px;max-width:640px;margin-left:auto;margin-right:auto}
    .hero-cta{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-bottom:16px}
    .hero-note{font-size:13px;color:#6b7280}
    .hero-note strong{color:#111827}

    .features{padding:80px 0}
    .features h2{font-size:34px;font-weight:800;text-align:center;margin-bottom:14px;color:#0f172a}
    .features p.sub{text-align:center;color:#6b7280;font-size:17px;margin-bottom:56px}
    .features-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
    .feat{background:#fff;border:1px solid #f1f5f9;border-radius:14px;padding:28px}
    .feat .icon{width:44px;height:44px;border-radius:10px;background:#eef2ff;color:#4f46e5;display:flex;align-items:center;justify-content:center;margin-bottom:16px}
    .feat h3{font-size:17px;font-weight:700;margin-bottom:8px;color:#111827}
    .feat p{font-size:14px;color:#6b7280;line-height:1.6}

    .checklist{padding:64px 0;background:#f9fafb}
    .checklist-inner{max-width:720px;margin:0 auto;text-align:center}
    .checklist h2{font-size:28px;font-weight:800;margin-bottom:32px;color:#0f172a}
    .checklist-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px 32px;text-align:left}
    .checklist-grid .item{display:flex;align-items:center;gap:10px;font-size:14px;color:#374151;padding:6px 0}
    .checklist-grid .item svg{flex-shrink:0;color:#059669}
    @media(max-width:640px){.checklist-grid{grid-template-columns:1fr}}

    .pricing-preview{padding:72px 0;background:#ffffff}
    .pricing-preview h2{font-size:34px;font-weight:800;text-align:center;margin-bottom:14px;color:#0f172a}
    .pricing-preview p.sub{text-align:center;color:#6b7280;font-size:17px;margin-bottom:48px}
    .plans{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;max-width:960px;margin:0 auto}
    .plan{background:#fff;border:1px solid #e5e7eb;border-radius:14px;padding:30px 26px;position:relative}
    .plan.highlight{border:2px solid #4f46e5;transform:translateY(-4px)}
    .plan .ribbon{position:absolute;top:-12px;left:50%;transform:translateX(-50%);background:#4f46e5;color:#fff;padding:4px 14px;border-radius:20px;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.5px}
    .plan h3{font-size:19px;font-weight:700;color:#111827;margin-bottom:6px}
    .plan .desc{font-size:13px;color:#6b7280;margin-bottom:18px;min-height:36px}
    .plan .price{font-size:40px;font-weight:800;color:#111827;margin-bottom:2px}
    .plan .price span{font-size:15px;font-weight:500;color:#6b7280}
    .plan ul{list-style:none;margin:22px 0;font-size:14px;color:#374151}
    .plan li{padding:6px 0;display:flex;align-items:center;gap:8px}
    .plan li svg{flex:0 0 auto}

    .cta{padding:90px 0;text-align:center}
    .cta h2{font-size:36px;font-weight:800;margin-bottom:14px;color:#0f172a}
    .cta p{font-size:17px;color:#6b7280;margin-bottom:28px}

    @media (max-width:860px){
        .hero h1{font-size:40px}
        .features-grid{grid-template-columns:1fr}
        .plans{grid-template-columns:1fr;max-width:420px}
        .plan.highlight{transform:none}
    }

    /* ───── Extracted from former inline style="" attributes
       (IndiSocials compliance — keep styles in CSS, not in markup). ───── */

    /* Hero eyebrow pill rendered only when the editor has provided a
       non-empty translation for hero_eyebrow. */
    .hero-eyebrow{
        display:inline-block;
        background:#eef2ff;
        color:#4f46e5;
        padding:6px 14px;
        border-radius:20px;
        font-size:12px;
        font-weight:600;
        letter-spacing:.3px;
        margin-bottom:18px;
    }

    /* Full-width primary CTA used inside each pricing card. */
    .plan .btn.is-full-width{
        width:100%;
        text-align:center;
    }