:root{
  --color-primary:#0b3d91;
  --color-accent:#0b5cff;
  --text:#ffffff;
  --muted:rgba(255,255,255,0.75);
  --bg:#071427; /* dark navy */
  --radius:10px;
  --container:920px;
  --font-sans:Inter,system-ui,-apple-system,"Segoe UI",Roboto,Arial;
}
*{box-sizing:border-box}
body{font-family:var(--font-sans);color:var(--text);background:var(--bg);margin:0;-webkit-font-smoothing:antialiased}
.container{max-width:var(--container);margin:0 auto;padding:0 20px}
h1{font-size:44px;color:#ffffff;margin:6px 0;font-weight:800;line-height:1.02;text-transform:none}
h2{font-size:20px;color:var(--color-accent);margin-top:20px}
p{margin:10px 0;color:var(--muted)}
input[type="email"],input,textarea{width:100%;max-width:420px;padding:12px;border:1px solid rgba(255,255,255,0.12);border-radius:8px;font-size:15px;background:rgba(255,255,255,0.06);color:var(--text)}
.button,button,a.cta{display:inline-block;background:var(--color-accent);color:#fff;padding:12px 22px;border-radius:8px;border:none;font-weight:700;text-decoration:none}
.checklist{background:#0f2030;padding:18px;border-radius:10px}
:focus{outline:3px solid rgba(11,92,255,0.12);outline-offset:2px}

/* Header / Hero */
.site-header{border-bottom:1px solid rgba(255,255,255,0.06);padding:18px 0}
.site-logo{font-weight:800;color:#ffffff;font-size:18px}
.hero{background:linear-gradient(180deg, rgba(11,61,145,0.12), rgba(11,61,145,0.06));padding:32px;border-radius:12px;margin-bottom:22px}
.hero p.lead{color:var(--muted);font-size:17px}

/* Main / layout */
.site-main{padding:64px 12px;display:block;text-align:center}
.site-main > .container{padding-top:20px}
.site-main form{margin:22px auto;display:flex;flex-direction:column;align-items:center;gap:12px}
.site-main input[type="email"]{margin:0 auto}
.site-main .button{min-width:220px}

/* Constrain the readable measure and make body text left-aligned (ragged-right) */
.lead{max-width:720px;margin:0 auto;text-align:left}
.lead p, .lead li{color:var(--muted);line-height:1.65;font-size:16px}
/* Headings: responsive, avoid excessive wrapping */
.lead h1, .lead h2{color:#ffffff;word-break:keep-all;hyphens:auto}
/* Left-align main headings to match list alignment and improve reading flow */
/* Make H1 wider and centered to reduce line breaks; keep h2 left-aligned */
.lead h1{font-size:clamp(32px,5.2vw,64px);max-width:none;margin:0 0 14px 0;letter-spacing:-0.6px;line-height:1.02;text-align:center;position:relative;left:50%;transform:translateX(-50%);width:min(1100px,96vw)}
.lead h2{font-size:20px;text-align:left}

/* Section separators and spacing */
.lead h2{margin-top:42px;padding-top:18px;border-top:1px solid rgba(255,255,255,0.04)}

/* Center the list block while keeping item text left-aligned, slightly wider */
.lead ul{list-style-position:outside;padding-left:1.2rem;margin-left:auto;margin-right:auto;max-width:760px;text-align:left}
.lead li{margin:0.9rem 0}
.lead p.lead-brief{max-width:760px;margin:0 auto 18px;color:var(--muted);text-align:left}

/* Paragraph spacing and grouping */
.lead p{margin:0.6rem 0;color:var(--muted);line-height:1.7}
.lead p + ul{margin-top:6px;margin-bottom:18px}
.lead h2{font-size:20px}

/* Center the list block while keeping item text left-aligned */
.lead ul{list-style-position:outside;padding-left:1.2rem;margin-left:auto;margin-right:auto;max-width:640px;text-align:left}
.lead li{margin:0.6rem 0}
.lead p.lead-brief{max-width:760px;margin:0 auto 18px;color:var(--muted);text-align:center}

/* Make lists visually lighter and avoid full-justification feel */
body, .lead{word-break:normal;hyphens:none}

@media(min-width:900px){
  .lead{max-width:760px}
}

@media(min-width:900px){
  h1{font-size:56px}
  .site-main{padding:92px 16px}
}