:root{
  --navy:#071a34;--text:#071a34;--green:#22ad78;--green2:#159566;
  --yellow:#f7b900;--white:#fff;--cream:#f7f5ef;--muted:#606a7a;--line:#e9e3d7;
}
*{box-sizing:border-box} html{background:var(--navy)}
body{margin:0;min-height:100vh;font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;background:var(--navy);color:var(--text)}
button,input{font:inherit}
.page{min-height:100vh;background:linear-gradient(180deg,var(--navy) 0 52%,var(--cream) 52% 76%,var(--navy) 76% 100%)}
.hero-shell{max-width:930px;margin:auto;padding:84px 34px 0}
.hero-card{position:relative;overflow:hidden;min-height:845px;padding:66px 40px 48px;text-align:center;background:#fff;border-radius:48px;border:1px solid var(--line);box-shadow:0 28px 56px rgba(2,19,42,.12)}
.top-accent{position:absolute;left:0;right:0;top:0;height:13px;background:var(--green)}
.brand-pill{width:min(775px,100%);min-height:96px;margin:0 auto 44px;display:flex;align-items:center;justify-content:center;padding:16px 28px;border:2px solid #bfe6d3;border-radius:999px;background:#eaf7f1;color:#1c9f70;font-size:clamp(15px,2.3vw,27px);font-weight:800;letter-spacing:.22em}
.hero-card h1{margin:0;font-size:clamp(55px,9vw,88px);line-height:.98;letter-spacing:-.055em;font-weight:900}
.hero-card>p{margin:44px auto 58px;color:var(--muted);font-size:clamp(25px,4.8vw,50px);line-height:1.3}
.btn{width:100%;min-height:122px;border:0;border-radius:23px;cursor:pointer;transition:.18s ease}
.btn:active{transform:scale(.985)}
.yellow{background:var(--yellow);color:#0b0f14;font-size:clamp(30px,5vw,48px);font-weight:900;box-shadow:0 16px 34px rgba(247,185,0,.18)}
.yellow:hover{filter:brightness(1.04);transform:translateY(-2px)}
.footer{min-height:377px;margin-top:282px;padding:54px 22px 48px;text-align:center;display:flex;flex-direction:column;align-items:center;background:var(--navy)}
.footer a{color:#b3c1d5;text-decoration:none;font-size:clamp(23px,4vw,39px);font-weight:800}
.footer a+a{margin-top:48px}.footer p{max-width:760px;margin:46px 0 0;color:#7f91ad;font-size:clamp(17px,3.25vw,31px);line-height:1.4}
.overlay{position:fixed;inset:0;z-index:100;display:grid;place-items:center;padding:28px;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .24s ease,visibility .24s ease}
.overlay.open{opacity:1;visibility:visible;pointer-events:auto}
.backdrop{position:absolute;inset:0;background:rgba(3,22,47,.58);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.modal{position:relative;z-index:2;width:min(865px,100%);padding:56px 36px 48px;border-radius:42px;background:#fff;border:1px solid var(--line);box-shadow:0 24px 58px rgba(2,19,42,.24);transform:translateY(36px) scale(.985);opacity:0;transition:.28s cubic-bezier(.2,.8,.2,1)}
.overlay.open .modal:not(.hidden){transform:translateY(0) scale(1);opacity:1}
.modal h2{margin:0;font-size:clamp(38px,6.4vw,64px);line-height:1.04;letter-spacing:-.045em;font-weight:900}
.modal>p:not(.error){margin:28px 0 44px;color:#5d6676;font-size:clamp(23px,4.5vw,42px);line-height:1.5}
.green{background:var(--green);color:#fff;font-size:clamp(27px,4.7vw,42px);font-weight:900;box-shadow:0 18px 42px rgba(31,174,120,.18)}
.green:hover{background:var(--green2);transform:translateY(-2px)}
.secondary{margin-top:2px;background:#fff;color:var(--text);border:2px solid var(--line);font-size:clamp(25px,4.4vw,40px);font-weight:400}
.kicker{display:block;margin-bottom:18px;color:#56bb91;font-size:clamp(21px,3.5vw,33px);font-weight:900;letter-spacing:.08em}
#answer{width:100%;height:142px;margin:40px 0 28px;padding:0 28px;text-align:center;color:var(--text);background:#fff;border:2px solid var(--line);border-radius:27px;outline:none;font-size:clamp(26px,5vw,45px)}
#answer:focus{border-color:rgba(31,174,120,.65);box-shadow:0 0 0 5px rgba(31,174,120,.10)}
#answer.bad{border-color:#cf6666}
.error{display:none;margin:-8px 0 22px;color:#c53b3b;text-align:center;font-size:16px;font-weight:700}.error.show{display:block}
.hidden{display:none!important} body.modal-open{overflow:hidden}

@media(max-width:640px){
  .hero-shell{padding:40px 15px 0}.hero-card{min-height:540px;padding:34px 18px 26px;border-radius:30px}.top-accent{height:8px}
  .brand-pill{min-height:58px;margin-bottom:28px;padding:12px 16px;font-size:13px;letter-spacing:.17em}
  .hero-card h1{font-size:clamp(50px,15vw,72px)}.hero-card>p{margin:28px auto 36px;font-size:clamp(24px,7.6vw,34px)}
  .btn{min-height:74px;border-radius:18px}.yellow{font-size:30px}
  .footer{min-height:270px;margin-top:180px;padding:42px 18px 34px}.footer a{font-size:24px}.footer a+a{margin-top:36px}.footer p{margin-top:38px;font-size:17px}
  .overlay{padding:18px 14px}.modal{padding:32px 18px 24px;border-radius:28px}.modal h2{font-size:clamp(36px,10vw,47px)}
  .modal>p:not(.error){margin:18px 0 26px;font-size:24px}.green{font-size:27px}.secondary{font-size:25px}.kicker{font-size:20px}
  #answer{height:86px;margin:28px 0 22px;border-radius:20px;font-size:25px}
}