:root { color-scheme: light; --navy:#11263b; --ink:#192b3e; --soft:#607288; --paper:#f4f7fa; --white:#fff; --border:#dfE7ed; --teal:#087e85; --teal-light:#e8f6f5; --shadow:0 30px 85px rgba(19,41,58,.09); }
* {box-sizing:border-box}
body { margin:0; background:linear-gradient(155deg,#eaf1f5 0%,var(--paper) 47%,#eef2f4 100%); color:var(--ink); font-family: 'Segoe UI',system-ui,-apple-system,BlinkMacSystemFont,Arial,sans-serif; min-height:100vh; }
.layout {max-width:1130px; min-height:100vh; margin:0 auto; padding:65px 32px; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,465px); align-items:center; gap:76px}
.brand {color:var(--navy); text-decoration:none; font-size:12px; font-weight:800; letter-spacing:.115em; display:inline-flex; align-items:center; gap:9px}
.brand-mark {display:inline-flex; align-items:center; justify-content:center; height:35px; width:35px; border-radius:12px; background:var(--navy); color:white; font-size:26px; line-height:1; font-weight:500; margin-right:5px}
.brand-muted {color:#7a91a3; letter-spacing:.08em}
.hero-label {margin-top:100px; color:var(--teal); letter-spacing:.14em; text-transform:uppercase; font-size:11px; font-weight:800}
h1 {max-width:550px; font-size:clamp(34px,4.3vw,58px); letter-spacing:-.055em; line-height:1.09; margin:17px 0 24px; font-weight:760; color:var(--navy)}
h1 span {color:#478b91}
.hero-description {font-size:16px; line-height:1.8; max-width:445px; color:#617485; margin:0}
.hero-note {font-size:12px; line-height:1.5; color:#496474; margin-top:39px; display:flex; gap:11px; align-items:center}
.note-dot {height:9px; width:9px; border-radius:50%; background:#34a59a; box-shadow:0 0 0 5px #d9edeb; flex-shrink:0}
.panel {border-radius:23px; background:var(--white); border:1px solid rgba(255,255,255,.65); box-shadow:var(--shadow); padding:36px}
.panel-top {display:flex; justify-content:space-between; align-items:center; gap:12px}
.eyebrow,.step-indicator {font-size:10px; font-weight:800; letter-spacing:.115em}
.eyebrow {color:#2f8290}.step-indicator {color:#9aaab6}
.progress-track {height:4px; background:#e9f0f2; margin:17px 0 35px; border-radius:5px; overflow:hidden}
.progress-value {height:100%; border-radius:5px; background:#13878e; transition:width .3s ease}
.progress-1{width:20%}.progress-2{width:40%}.progress-3{width:60%}.progress-4{width:80%}.progress-5{width:100%}
h2 {font-size:26px; letter-spacing:-.035em; line-height:1.2; margin:0 0 11px; font-weight:760}
.panel-subtitle {font-size:13.5px; line-height:1.75; color:#708092; margin:0 0 26px}
.choice-list {display:grid; gap:11px; margin-bottom:23px}
.choice {border:1px solid #e3e9ee; border-radius:13px; display:flex; align-items:center; min-height:80px; padding:15px; cursor:pointer; gap:12px; transition:border-color .2s,background .2s}
.choice:hover,.choice:has(input:checked) {border-color:#47a3a2;background:#f2fbfa}
.choice input {height:17px; width:17px; accent-color:var(--teal); flex:0 0 17px; margin:0}
.choice-content {display:grid;gap:4px;flex:1}
.choice-content strong {font-size:13px;font-weight:740;color:#1d3143}
.choice-content small {font-size:11px;line-height:1.5;color:#778898}
.choice-arrow {font-size:19px;color:#8fa4ae}
.primary,.secondary {width:100%; min-height:49px; border:0; border-radius:11px; font-size:13px; font-family:inherit; font-weight:750; cursor:pointer; padding:13px 16px;display:flex;align-items:center;justify-content:center;gap:10px}
.primary {background:var(--navy);color:white}.primary:hover {background:#214763}.primary span {font-size:17px}
.secondary {background:#ebf3f5;color:#214d60}.secondary:hover {background:#dcebef}
.field-label {display:block;font-size:12px;font-weight:750;color:#25394b;margin:0 0 10px}
.text-input {width:100%; border:1px solid #cedce6; border-radius:12px; padding:16px; color:var(--ink);font-size:16px;outline:0}
.text-input:focus {border-color:var(--teal);box-shadow:0 0 0 3px #d5eeed}
.field-hint {color:#82909b;font-size:11px;margin:10px 0 26px}
.consent {display:flex;align-items:flex-start;gap:10px;color:#566d7c;line-height:1.65;font-size:12px;margin-bottom:26px;cursor:pointer}
.consent input {margin-top:3px;flex-shrink:0;accent-color:var(--teal)}
.symbol {font-size:13px;font-weight:800;color:#168991;background:var(--teal-light);height:51px;width:51px;border-radius:15px;display:flex;align-items:center;justify-content:center;margin-bottom:23px}
.info-box {background:#eff7f8;border-left:3px solid #329397; padding:18px 19px; margin:10px 0 26px;display:grid;gap:8px;color:#3e6172;border-radius:0 11px 11px 0;font-size:12px;line-height:1.7}
.info-box strong {font-size:12px;color:#17525a}
.success-symbol {display:flex;align-items:center;justify-content:center;width:56px;height:56px;border-radius:18px;background:#e3f5ed;color:#17835e;font-size:31px;margin-bottom:22px}
.receipt {display:grid;gap:6px;padding:21px 23px;background:#f3f7f9;border-radius:13px;margin-bottom:20px}
.receipt span {font-size:10px;color:#7a8d9a;letter-spacing:.08em;font-weight:700}.receipt strong {font-size:23px;letter-spacing:.07em;color:#17394f}
.panel-footnote {color:#7a8996;font-size:12px;line-height:1.65;margin-bottom:24px}
.panel-footer {margin-top:27px;border-top:1px solid #eef2f4;padding-top:20px;font-size:10px;line-height:1.8;color:#9aa8b3;text-align:center}
.alert {background:#fff1f1;color:#a72d30;border:1px solid #f6c9c9;padding:13px 15px;border-radius:10px;font-size:12px;line-height:1.55;margin:-13px 0 22px}
button:focus-visible,a:focus-visible,input:focus-visible {outline:3px solid #32a5a1;outline-offset:3px}
@media(max-width:870px){.layout{max-width:620px;min-height:auto;padding:35px 18px 60px;grid-template-columns:1fr;gap:34px}.hero-label{margin-top:47px}h1{font-size:40px}.hero-note{margin-top:22px}.panel{padding:28px 24px}}
@media(max-width:420px){.panel{padding:25px 19px;border-radius:18px}h1{font-size:34px}.brand{font-size:10px}.choice{padding:13px}.choice-content strong{font-size:12px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;transition:none!important}}