.checkout-page{min-height:calc(100vh - 79px)}
.checkout-hero{padding:72px 0 32px}
.checkout-hero h1{font-size:clamp(2.4rem,5vw,4.2rem)}
.checkout-shell{width:min(650px,92vw);margin:0 auto 82px}
.checkout-panel{padding:32px}
.checkout-panel h2{margin:0;font-size:1.55rem}
.checkout-panel>p{margin:10px 0 26px;color:var(--muted)}
.checkout-form{display:grid;gap:17px}
.checkout-form label{display:grid;gap:8px;color:#d5d2cf;font-size:.86rem;font-weight:700}
.checkout-form input[type="text"],.checkout-form input[type="email"]{width:100%;padding:13px 14px;border:1px solid #30333a;border-radius:8px;background:#0b0c0e;color:#fff}
.checkout-form input:focus{outline:0;border-color:var(--accent);box-shadow:0 0 0 3px rgba(225,29,46,.14)}
.checkout-form .terms-check{display:flex;align-items:flex-start;gap:10px;margin-top:3px;color:var(--muted);font-size:.83rem;font-weight:500;line-height:1.5}
.checkout-form .terms-check input{margin-top:4px;accent-color:var(--accent)}
.checkout-form button{width:100%;margin-top:4px}
.checkout-error{margin:0 0 18px!important;padding:12px 14px;border:1px solid #6b2932;border-radius:8px;background:#1b0e11;color:#ffb4bc!important}
.checkout-summary{display:flex;justify-content:space-between;gap:20px;margin:0 0 22px;padding:14px 0;border-block:1px solid #292c32;color:#a9aaaf}
.checkout-summary strong{color:#f0eeeb;font-size:1.1rem}
@media(max-width:560px){.checkout-panel{padding:23px}.checkout-hero{padding-top:52px}}

.site-header .brand {
    height: 42px;
    align-items: center;
}

.site-header .brand-mark {
    display: grid;
    flex: 0 0 42px;
    place-items: center;
    line-height: 0;
}

.site-header .brand-mark img {
    width: 42px;
    height: 42px;
}

.site-header .brand-name {
    display: flex;
    align-items: center;
    height: 42px;
    line-height: 1;
}

.checkout-hero h1 {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: .22em;
}

.checkout-hero h1 .heading-start,
.checkout-hero h1 .accent {
    display: inline-block;
    line-height: 1.08;
}

.checkout-hero .container {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.checkout-hero h1 {
    justify-content: center;
}

.checkout-hero .hero-copy {
    margin-inline: auto;
}