body{min-height:100vh;position:relative;isolation:isolate;background:#edf2f5}
body::before{content:"";position:absolute;z-index:-1;inset:0;pointer-events:none;background:radial-gradient(ellipse 600px 470px at 8% 20%,#f9a8b48c,transparent 76%),radial-gradient(ellipse 650px 550px at 100% 70%,#a6bcc959,transparent 78%),url('home-contours.svg') center top/cover no-repeat}
body::after{content:"";position:absolute;z-index:-1;top:80px;right:0;width:40%;height:680px;pointer-events:none;background-image:radial-gradient(#7c94a733 1px,transparent 1px);background-size:16px 16px;mask-image:linear-gradient(to left,#000,transparent)}
header{max-width:1280px;padding:18px 24px;border-bottom:1px solid #dce4eb}
header img{width:auto;height:56px;max-width:220px}
header>a:last-child{background:#ffffffc9;border:1px solid #dce4eb;border-radius:10px;padding:12px 16px;font-size:13px;font-weight:600;color:#52657a}
header>a:last-child:hover{background:white;color:#c92338}
.intro small{display:inline-block;padding:8px 12px;border:1px solid #f2cbd2;border-radius:999px;background:#fff7f8b3;color:#ae263d;font-size:10px;letter-spacing:1.3px}
.intro h1{background:linear-gradient(110deg,#cf2438,#c02674 28%,#7044b6 52%,#246caa 75%,#c92338);background-size:220% 100%;background-clip:text;-webkit-background-clip:text;color:#c92338;-webkit-text-fill-color:transparent;animation:loginHeadingColours 12s ease-in-out infinite alternate}
.welcome{position:relative;overflow:hidden;background:radial-gradient(ellipse at 0% 0%,#ffe3e8,transparent 65%),linear-gradient(115deg,#fff9fa,#f7fafc 65%,#e8f0f6);border:1px solid #dce4eb;color:#17243b;box-shadow:0 8px 28px #23354d0a}
.welcome h2{margin-top:4px;font-size:26px;letter-spacing:-.6px}
.welcome p{color:#52657a}
.benefit{border-color:#dce4eb;padding:18px 0}
.benefit b{color:#ae263d}.benefit span{color:#64748b}
.panel{background:#ffffffed;border-color:#dce4eb;box-shadow:0 12px 40px #23354d0a}
.tabs{background:#f1f4f7;border:1px solid #e2e8f0;border-radius:12px;padding:5px;gap:5px}
.tabs button{background:transparent;border:0;min-height:44px;line-height:1.4}
.tabs button.active{background:#d62828;box-shadow:0 3px 8px #d6282820}
.submit{min-height:44px;box-shadow:0 4px 12px #d6282822}.submit:hover{background:#b91c1c}
input{background:#fbfcfd}input:focus{background:white}
@keyframes loginHeadingColours{from{background-position:0% 50%}to{background-position:100% 50%}}
@media(prefers-reduced-motion:reduce){.intro h1{animation:none}}
@media(max-width:700px){header{padding:12px 16px;gap:16px}header img{height:46px;max-width:165px}header>a:last-child{font-size:11px;padding:10px;line-height:1.4}.welcome h2{font-size:23px}.shell{gap:18px}.intro{margin-bottom:24px}body::after{width:65%}}
/* Keep all login and registration content close to the top. */
header{padding-top:10px;padding-bottom:10px}
main{margin:16px auto 20px;max-width:1100px}
.intro{margin-bottom:18px}.intro h1{margin:8px 0;font-size:30px}.intro p{margin:6px 0;font-size:13px}.intro small{padding:6px 10px}
.shell{gap:22px;align-items:stretch}.welcome{padding:24px}.welcome h2{font-size:24px;margin:0 0 12px}.welcome p{margin:0 0 14px}.benefit{padding:14px 0}.benefit:last-child{padding-bottom:0}
.panel{padding:20px 24px}.panel h2{margin:16px 0 6px;font-size:20px}.help{margin:6px 0;line-height:1.5}.tabs button{min-height:40px;padding:8px 5px;font-size:12px}
label{margin-top:12px}input{padding:10px;margin-top:5px;min-height:40px}.submit{margin-top:16px;padding:10px;min-height:40px}.support{margin-top:14px}#message:empty{margin:0}
@media(min-width:701px) and (max-height:760px){header img{height:46px}main{margin-top:10px;margin-bottom:12px}.intro{margin-bottom:12px}.intro h1{font-size:27px}.intro small{padding:4px 10px}.welcome,.panel{padding:18px 22px}.welcome h2{font-size:22px}.benefit{padding:12px 0}.panel h2{margin-top:12px}label{margin-top:9px}input{padding:8px;min-height:36px}.submit{margin-top:12px;min-height:38px}.support{margin-top:10px}}
@media(max-width:700px){header{padding:8px 16px}main{margin:12px auto 18px}.intro h1{font-size:25px}.intro{margin-bottom:14px}.shell{display:flex;flex-direction:column;gap:16px}.panel{order:0;width:100%;padding:18px}.welcome{order:1;width:100%;padding:20px}.welcome h2{font-size:21px}.tabs button{font-size:11px}.intro p{line-height:1.5}}

body::after{height:min(680px,calc(100% - 80px))}
#registration{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 14px}
@media(max-width:400px){#registration{gap:0 10px}#registration label{font-size:11px}}