* {
    box-sizing:border-box
}
body {
    margin:0;
    background:linear-gradient(130deg,#f8f4f5 0,#fefffe 55%,#eaf9fb 100%);
    color:var(--color-text);
    font:16px/1.55 var(--font-family)
}
.site-header {
    position:sticky;
    top:0;
    z-index:20;
    background:var(--color-primary);
    border-bottom:1px solid rgba(254,255,254,.12);
    transition:.25s
}
.utility {
    display:flex;
    justify-content:space-between;
    align-items:center;
    max-width:1240px;
    margin:auto;
    padding:8px 28px;
    color:var(--color-bg);
    font-size:.76rem;
    background:var(--color-accent)
}
.utility-contact,.social-links {
    display:flex;
    align-items:center;
    gap:16px
}
.utility a {
    color:inherit;
    text-decoration:none
}
.social-links img {
    width:15px;
    height:15px;
    filter:brightness(0) invert(1);
    opacity:.9;
    transition:.2s
}
.social-links a:hover img {
    opacity:1;
    transform:translateY(-1px)
}
.faq-link {
    font-weight:800;
    padding-left:12px;
    border-left:1px solid rgba(254,255,254,.35)
}
.nav {
    display:flex;
    align-items:center;
    gap:28px;
    max-width:1240px;
    margin:auto;
    padding:14px 28px
}
.brand {
    display:flex;
    align-items:center;
    gap:10px;
    margin-right:auto;
    color:var(--color-bg);
    font-weight:800;
    line-height:1.05;
    text-decoration:none
}
.brand img {
    width:200px;
    height:60px;
    object-fit:contain
}
.brand small {
    font-size:.65rem;
    color:rgba(254,255,254,.68);
    font-weight:600;
    letter-spacing:.04em
}
.nav-links {
    display:flex;
    align-items:center;
    gap:21px
}
.nav-links a {
    font-size:.88rem;
    font-weight:650;
    color:var(--color-bg);
    text-decoration:none
}
.nav-links b {
    color:var(--color-highlight)
}
.header-cta {
    padding:9px 13px;
    border-radius:8px;
    background:var(--color-accent);
    color:var(--color-bg);
    text-decoration:none;
    font-size:.82rem;
    font-weight:750
}
.header-cta span {
    margin-left:5px
}
.site-header.scrolled {
    box-shadow:var(--shadow-soft)
}
.registration {
    position:relative;
    display:grid;
    grid-template-columns:248px minmax(0,800px);
    gap:34px;
    max-width:1120px;
    margin:42px auto 120px;
    padding:0 20px;
    align-items:start
}
.progress-drawer {
    position:sticky;
    top:126px;
    background:var(--color-accent);
    border:1px solid rgba(254,255,254,.08);
    border-radius:var(--radius-lg);
    box-shadow:var(--shadow-soft);
    padding:22px 16px;
    transition:width .25s,padding .25s
}
.drawer-heading {
    display:grid;
    gap:2px;
    padding:0 7px 15px;
    border-bottom:1px solid rgba(254,255,254,.14);
    font-size:.76rem;
    color:var(--color-dark);
    font-weight:800;
    text-transform:uppercase;
    letter-spacing:.07em
}
.drawer-heading strong {
    color:var(--color-bg);
    font-size:1rem;
    letter-spacing:0;
    text-transform:none
}
.stepper {
    display:grid;
    gap:3px;
    padding:15px 0;
    margin:0;
    list-style:none
}
.stepper button {
    display:flex;
    align-items:center;
    width:100%;
    gap:10px;
    padding:8px 7px;
    border:0;
    border-radius:8px;
    background:transparent;
    color:rgba(254,255,254,.72);
    font:650 .79rem var(--font-family);
    text-align:left;
    cursor:pointer;
    transition:.2s
}
.stepper span {
    display:grid;
    flex:none;
    place-items:center;
    width:25px;
    height:25px;
    border:1.5px solid rgba(254,255,254,.4);
    border-radius:50%;
    font-size:.72rem
}
.stepper .active button {
    background:rgba(30,180,202,.2);
    color:var(--color-bg)
}
.stepper .active span {
    border-color:var(--color-dark);
    color:var(--color-dark)
}
.stepper .done span {
    background:var(--color-accent);
    border-color:var(--color-accent);
    color:var(--color-bg)
}
.drawer-help {
    margin:0;
    padding:14px 7px 0;
    border-top:1px solid rgba(254,255,254,.14);
    color:rgba(254,255,254,.6);
    font-size:.72rem
}
.drawer-toggle {
    display:none
}
.form-area {
    min-width:0
}
.progress-mobile {
    display:none
}
.form-step {
    display:none;
    background:var(--color-bg);
    padding:34px;
    border-radius:var(--radius-lg);
    box-shadow:var(--shadow-soft);
    animation:fade .25s
}
.form-step.active {
    display:block
}
.form-step.confirmation {
    text-align:center;
    padding:70px 30px
}
.eyebrow {
    color:var(--color-primary);
    font-weight:700;
    text-transform:uppercase;
    font-size:.76rem;
    letter-spacing:.08em
}
h1,h2,h3 {
    line-height:1.2;
    margin:8px 0 18px;
    color:var(--color-primary)
}
h1,h2 {
    font-size:clamp(1.65rem,3vw,2.2rem)
}
h3 {
    font-size:1.05rem;
    margin-top:28px
}
em {
    color:var(--color-accent);
    font-size:.75rem;
    font-style:normal
}
.grid {
    display:grid;
    gap:16px
}
.grid.two {
    grid-template-columns:repeat(2,minmax(0,1fr))
}
.form-nav {
    position:sticky;
    bottom:0;
    z-index:5;
    display:flex;
    align-items:center;
    gap:12px;
    background:rgba(254,255,254,.96);
    padding:16px 0;
    margin-top:18px
}
.form-nav #saved {
    margin-right:auto;
    color:var(--color-text-muted);
    font-size:.8rem
}
.submit {
    display:none
}
.helper {
    font-size:.86rem;
    color:var(--color-text-muted)
}
.conditional {
    display:none;
    margin-top:18px;
    overflow:hidden
}
.conditional.show {
    display:block;
    animation:fade .25s
}
.success-icon {
    display:grid;
    place-items:center;
    width:72px;
    height:72px;
    background:#e7f8fb;
    color:var(--color-primary);
    border-radius:50%;
    font-size:2.5rem;
    margin:0 auto 18px
}
@keyframes fade {
    from {
        opacity:0;
        transform:translateY(5px)
    }
    to {
        opacity:1;
        transform:none
    }
}