:root {
  --slate: #2E3A47;
  --blue: #00ADEF;
  --cyan: #00D1C8;
  --bg: #F7F9FB;
  --text: #1B2430;
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: var(--bg); color: var(--text); font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; }

/* Full-bleed header */
.site-header.flush { background: #fff; border-bottom: 1px solid #E6EDF3; width: 100%; }
.site-header.flush .logo { height: 150px; display: block; margin: 14px 0; } /* larger for readable tagline */

.wrap { max-width: 980px; margin: 0 auto; padding: 20px; }

.hero { text-align: left; padding: 40px 20px; }
.hero h1 { font-size: 52px; margin: 16px 0 8px; color: var(--slate); }
.hero .tag { font-size: 22px; line-height: 1.7; color: #24303B; max-width: 760px; }

.benefits { list-style: none; padding: 0; margin: 24px 0; display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 12px 24px; }
.benefits li { background: white; border: 1px solid #E6EDF3; border-radius: 14px; padding: 12px 14px; }

.signup { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.signup input[type=email] { flex: 1 1 280px; padding: 14px 16px; border: 1px solid #BFD3E2; border-radius: 12px; font-size: 16px; }
.signup button { padding: 14px 20px; background: var(--blue); color: white; border: none; border-radius: 12px; font-weight: 700; cursor: pointer; }
.signup .note { width: 100%; font-size: 13px; color: #5A6B7A; margin: 6px 0 0; }

.foot { text-align: center; color: #6C7A87; font-size: 14px; padding-bottom: 30px; }

@media (max-width: 640px) {
  .site-header.flush .logo { height: 110px; margin: 12px 0; }
  .hero { padding: 28px 20px 32px; }
  .hero .tag { font-size: 18px; }
}