    :root {
      --brand: #b42d11;
      --brand-dark: #8f240e;
      --accent: #b42d11;
      --accent-dark: #8f240e;
      --ink: #222222;
      --muted: #777777;
      --bg: #ffffff;
      --bg-soft: #f8f8f8;
      --dark: #171717;
      --container: 1140px; /* default; overridden by breakpoints below */
      --radius: 14px;
      --shadow: 0 10px 30px rgba(0,0,0,.08);
    }

    html {
      scroll-behavior: smooth;
    }

    /* ===== Responsive container widths ===== */
    @media (max-width: 1280px){ :root{ --container: 1040px; } }
    @media (max-width: 1024px){ :root{ --container: 920px; } }
    @media (max-width: 900px){ :root{ --container: 800px; } }
    @media (max-width: 768px){ :root{ --container: 680px; } }
    @media (max-width: 640px){ :root{ --container: 560px; } }

    /* Base */
    *,*::before,*::after{box-sizing:border-box}
    html,body{height:100%}
    body{
      margin:0;
      font-family:"Raleway","Helvetica Neue",Helvetica,Arial,sans-serif;
      color:var(--ink);
      font-size:clamp(16px, 1.25vw, 20px);
      line-height:1.6;
      -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
      background:var(--bg);
    }
    img{max-width:100%;height:auto;display:block}
    a{color:var(--brand);text-decoration:none;font-weight:600}
    a:hover{color:var(--brand-dark)}

    .container{max-width:var(--container);margin:0 auto;padding:0 20px}

    .HeaderHtml, .FooterHtml, .MeterHtml {
      padding: 0 !important;
    }

    .at a:hover, .at a:focus {
      color: #6b6b6b !important;
    }

    .ngp-form {
        margin: 0 auto;
        max-width: 100% !important;
    }

    #learn {
      padding: clamp(48px, 7vw, 96px) 0;
    }

    .cta-band {
      padding: 46px 0;
    }

    form.clearfix {
      max-width: 970px;
      margin: auto !important;
    }

    .at input[type=checkbox]:checked+span:before {
        background-color: var(--brand) !important;
        border-color: var(--brand-dark) !important;
    }

    .at .btn-at-primary {
      background: var(--brand) !important;
    }

    .at .btn-at-primary:hover {
      background: var(--brand-dark) !important;
    }

    /* Grid */
    .row{display:flex;flex-wrap:wrap;gap:clamp(20px, 4vw, 32px)}
    .col{flex:1 1 320px;min-width:0}

    /* Typography */
    .eyebrow{display:block;text-transform:uppercase;letter-spacing:.18em;font-weight:600;opacity:.9}
    h1{font-size:clamp(28px, 4vw, 52px);line-height:1.15;margin:.35em 0 .2em}
    .subhead{font-size:clamp(16px, 2.2vw, 22px);opacity:.95;margin:0 0 1em}
    .lead{font-size:clamp(17px, 1.6vw, 20px);color:#333}

    /* Buttons */
    .btn{display:inline-block;padding:clamp(12px, 1.4vw, 14px) clamp(18px, 2vw, 22px);border:2px solid currentColor;border-radius:999px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;font-size:clamp(13px, 1vw, 14px);line-height:1;transition:all .2s ease}
    .btn.primary{background:var(--accent);color:#fff;border-color:var(--accent)}
    .btn.primary:hover{background:var(--accent-dark);border-color:var(--accent-dark)}
    .btn.ghost{color:#fff;border-color:#fff}
    .btn.ghost:hover{background:#fff;color:#111}
    .cta-group{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:18px}
    .hero-title{color: #ffffff !important;}
    @media (max-width:480px){
      .cta-group{gap:10px}
      .btn{width:100%;text-align:center}
    }

    /* Hero */
    .hero{position:relative;min-height:min(90vh, 820px);display:grid;place-items:center;text-align:center;color:#fff;overflow:hidden}
    .hero__bg{position:absolute;inset:0;background:#000 center/cover no-repeat;z-index:0;transform:scale(1.02)}
    .hero__overlay{position:absolute;inset:0;background:linear-gradient(180deg, rgba(0,0,0,.55), rgba(0,0,0,.35));z-index:1}
    /* Add horizontal padding on small screens so the badge isn't against the edge */
    .hero__inner{position:relative;z-index:2;padding:clamp(40px, 6vw, 64px) clamp(24px, 6vw, 48px)}
    /* Make the badge (book image) larger and responsive */
    .badge{height:clamp(325px, 26vw, 365px);margin:10px auto 18px;filter:drop-shadow(0 4px 16px rgba(0,0,0,.25))}

    @media (max-height:540px) and (orientation:landscape){
      .hero{min-height:60vh}
    }

    @media (prefers-reduced-motion: reduce){
      .hero__bg{transform:none}
    }

    /* Content blocks */
    blockquote{margin:0;padding:clamp(18px, 3vw, 24px);border-left:4px solid var(--brand);background:var(--bg-soft);font-family:"Merriweather",Georgia,Times,serif;font-style:italic;box-shadow:var(--shadow);border-radius:8px}
    blockquote .author{display:block;margin-top:10px;font-size:14px;color:#555;font-style:normal}

    .feature-image{border-radius:12px;box-shadow:var(--shadow)}

    .card{background:#fff;border-radius:var(--radius);box-shadow:var(--shadow);padding:clamp(18px, 3.2vw, 28px)}
    .kicker{font-weight:700;color:var(--brand);text-transform:uppercase;letter-spacing:.12em;font-size:12px;margin-bottom:6px}

    /* Form */
    .form-wrap{background:#fff;border-radius:var(--radius);box-shadow:var(--shadow);padding:clamp(18px, 3.2vw, 28px)}
    form{display:grid;gap:14px}
    label{font-size:13px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:#444}
    input[type="text"],input[type="email"]{appearance:none;width:100%;padding:14px 16px;border:1px solid #e5e5e5;border-radius:10px;font:inherit}
    input[type="text"]:focus,input[type="email"]:focus{outline:2px solid var(--brand);border-color:transparent}
    .form-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
    @media (max-width:640px){.form-row{grid-template-columns:1fr}}

    /* CTA band */
    .cta-band{background:var(--bg-soft);text-align:center;padding:46px 0;border-top:1px solid #eee;border-bottom:1px solid #eee}
