/* The older marketing pages (web-header.php: /features, /purchase, the landing and feature pages, /compare)
   in the new site's look: its type, purple, rounded forms and buttons, and room for the new top bar.
   Loaded after the old stylesheets and site.css, so it only restyles; the page layouts stay. */
body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; letter-spacing: 0; color: #1e1b2e; }
input, select, textarea, button { font-family: inherit; }

/* The new top bar and footer, which on these pages sit outside oppys.css's reset */
.sn, .sn *, .sf, .sf * { box-sizing: border-box; }
.sn a, .sf a { text-decoration: none; }
.sn img, .sf img { display: block; }
.sf .wrap { margin: 0 auto; padding: 0 24px; text-align: left; }
.sf h4 { margin: 0 0 12px; }
.sf p { margin: 0; line-height: 1.6; }
.sn-in { text-align: left; }
/* The old bar's spacer and side menu aren't used anymore */
.nav-space { display: none; }

/* Headings and highlights: purple instead of the yellow marker */
.highlight { background: none; color: #5b33c9; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.land-area h1, .feat-why h1, .feat-steps h1, .feat-faq h1 { color: #1e1b2e; font-weight: 800; letter-spacing: -0.8px; }
.land-area h1 { font-size: 40px; line-height: 1.12; }

/* Landing hero: the new purple behind the photo */
.land-banner .land-shape { background: linear-gradient(160deg, #3a1c9c, #2a1470); }
.land-banner { background-color: #f7f5fc; }

/* The signup card */
.form-large { background: rgba(255,255,255,.92); border: 1px solid #e9e6f2; border-radius: 20px; box-shadow: 0 24px 60px rgba(42,20,112,.18); }
.form-large h2 { font-weight: 800; letter-spacing: -0.4px; color: #1e1b2e; }
.form-large label { font-weight: 700; color: #3a3850; }
.form-large input, .form-large select { border: 1px solid #d9d4ea; border-radius: 10px; background: #fff; padding: 12px; font-size: 15px; letter-spacing: 0; }
.form-large input:focus, .form-large select:focus { outline: none; border-color: #7a4dff; box-shadow: 0 0 0 3px rgba(122,77,255,.18); }
.form-large button, .action-big { border-radius: 12px; background: linear-gradient(90deg, #7a4dff, #5b33c9); box-shadow: 0 10px 28px rgba(91,51,201,.3); font-weight: 800; letter-spacing: .5px; }
.form-large button:hover, .action-big:hover { background: linear-gradient(90deg, #6a3fe6, #4923a5); }

/* Section cards on the feature pages */
.feat-why-item { border-radius: 16px; background: #f7f5fc; }
.feat-step-num { background: #5b33c9; }
.feat-faq-item h3 { font-weight: 800; }
.land-testimonial { border-radius: 16px; }

/* /features and /purchase keep their layouts; their purple bands use the new purple */
.purple-section { background: linear-gradient(160deg, #3a1c9c, #2a1470); }
.btn-green.btn-long { border-radius: 12px; }

@media (max-width: 600px) {
	.land-area h1 { font-size: 30px; }
}

/* /purchase: plan and billing-period cards as light cards, the picked one in the new purple
   (body-prefixed to win over the page's own <style>) */
body .plan-options label, body .plan-periods .period { background: #fff; color: #1e1b2e; border: 1.5px solid #e2ddf0; box-shadow: 0 4px 14px rgba(42,20,112,.05); }
body .plan-options label:hover, body .plan-periods .period:hover { background: #f7f5fc; border-color: #b9a6f2; }
body .plan-options label.selected, body .plan-periods .period.selected { background: linear-gradient(135deg, #6a3fe6, #3a1c9c); color: #fff; border-color: transparent; box-shadow: 0 12px 30px rgba(91,51,201,.28); }
body .step-current { color: #5b33c9; }
body .step-current .step { background-color: #5b33c9; }