/* Steam's original frames, scaled uniformly. The number is separate from the sprite. */
.button-link{text-decoration:none;display:flex;align-items:center;justify-content:center;gap:8px}
.form-label{display:block;margin:22px 0 8px;font-size:12px;color:#c5d4e6}
.text-input{width:100%;min-height:46px;padding:12px;border:1px solid #3c526c;border-radius:7px;background:#0c1420;color:#e5edf8;font:inherit;font-size:13px}
.text-input:focus{outline:2px solid #6da9ff;outline-offset:2px}
.consent{display:flex;align-items:flex-start;gap:10px;margin:20px 0;font-size:13px;line-height:1.6;color:#b5c7dc}
.consent input{margin-top:4px;accent-color:#69a7ff;flex-shrink:0}
.order-row{width:100%;text-align:left;background:transparent;border:0;border-bottom:1px solid #293b50;color:#dbe7f8;cursor:pointer;gap:15px}
.order-row:hover{background:#1b2b40}.order-row span{min-width:0}.order-row small{display:block;overflow-wrap:anywhere;color:#9eb4ce;line-height:1.7;font-size:11px}
.order-id{font-family:monospace;color:#8ba5c4;font-size:11px;overflow-wrap:anywhere}
.method-unavailable .method-tag{color:#8498b0;letter-spacing:0;font-size:9px}
.steam-button span{max-width:170px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
input[readonly]{color:#a9c8ed;cursor:default}.dialog-error{color:#ffb5b5;font-size:13px;line-height:1.6;margin-top:16px}
@media(max-width:700px){.steam-button span{max-width:120px}.preview-notice{line-height:1.5}.order-row{align-items:flex-start}.text-input{font-size:16px}}
.steam-level{--badge-size:32px;position:relative;display:inline-grid;place-items:center;width:var(--badge-size);height:var(--badge-size);min-width:var(--badge-size);flex-shrink:0;vertical-align:middle;font-family:Arial,sans-serif;font-size:calc(var(--badge-size)*.43);font-weight:400;letter-spacing:0;line-height:1;color:#e5e5e5}
.steam-frame{position:absolute;inset:0;display:block;border:2px solid #9b9b9b;border-radius:50%;pointer-events:none}
.steam-frame-sprite{border:0;border-radius:0;background-repeat:no-repeat;background-size:100% 1000%}
.steam-level-number{position:relative;font:inherit;color:#e5e5e5;text-shadow:1px 1px #1a1a1a;line-height:1}
.summary-level{--badge-size:56px}
.order-levels .steam-level{font-size:calc(var(--badge-size)*.43);font-weight:400;letter-spacing:0;line-height:1}
.profile-level{--badge-size:56px;margin-left:auto}
.demo-level{--badge-size:40px;margin-left:auto}
.input-level-frame{--badge-size:25px}
.input-level-frame .steam-frame{border-width:2px}
.order-levels>div{min-width:66px}
.order-levels>svg{margin-top:22px}
.order-caption{font-size:11px;color:#a7b7cc;margin-top:19px}
.order-details{font-size:12px}
.order-details>div{margin-bottom:13px}
.price-line>div>span{font-size:11px}
.calculation-note{font-size:10px;color:#8fa1b8}
.checkout-note{font-size:10px}
.profile-preview{width:min(100%,405px);margin-left:auto;border:1px solid #2e4058;border-radius:10px;background:linear-gradient(150deg,#1b2b40,#151e2c);overflow:hidden;box-shadow:0 12px 35px #0002}
.profile-preview-title{display:flex;align-items:center;gap:8px;padding:14px 19px;border-bottom:1px solid #34465e;background:#172333;color:#b3c0d3;font-size:9px;font-weight:600;letter-spacing:1px}
.profile-preview-title svg{width:18px;height:18px;color:#91a8c5}
.profile-preview-label{margin-left:auto;color:#8298b5;font-size:10px;font-weight:400;letter-spacing:0}
.preview-profile-head{display:flex;align-items:center;gap:14px;padding:24px 21px}
.preview-profile-head img{border:1px solid #426087;border-radius:2px;padding:3px;background:#0f1927}
.preview-profile-head>div{min-width:0}
.preview-profile-head>div>strong{font-size:16px;display:block;font-weight:500;color:#e3ecf8;white-space:nowrap}
.preview-profile-head>div>span{display:block;font-size:12px;color:#92a9c6;margin-top:7px}
.preview-profile-info{display:flex;justify-content:space-between;gap:15px;margin:0 22px 10px;font-size:11px;color:#a3b4cc}
.preview-profile-info strong{font-weight:500;color:#dae8f9}
.profile-xp-track{height:4px;border-radius:1px;background:#283e58;margin:0 22px;overflow:hidden}
.profile-xp-track>span{display:block;width:100%;height:100%;background:#638eb7}
.preview-profile-bottom{display:flex;justify-content:space-between;gap:15px;margin:11px 22px 21px;font-size:10px;color:#7f95b1}
.preview-profile-bottom>span:first-child{color:#a1b7d0}
.hero{min-height:315px;grid-template-columns:1.15fr 1fr;padding-block:35px;gap:38px}
.hero h1{font-size:46px;line-height:1.12}
.hero-description{font-size:14px}
.hero-points{gap:20px}
.hero-points>span{font-size:11px}
.section-intro h2{font-size:27px}
.eyebrow{font-size:10px;letter-spacing:1.2px;font-weight:600}
.level-field label{font-size:10px;letter-spacing:.7px}
.level-field:has(input[aria-invalid="true"]){border-color:#b3626d}
.field-error{font-size:12px;line-height:1.6}
.milestones>span{font-size:11px}
.milestones button{min-height:32px;min-width:43px;font-size:12px}
.level-totals>span{font-size:11px}
.level-totals strong{font-size:12px}
.payment-option>small{font-size:10px}
.payment-help{font-size:11px;line-height:1.7}
.heading-aside,.small-note{font-size:11px}
.benefit h3{font-size:13px}
.benefit p{font-size:12px}
.faq-list details p{font-size:13px}
.faq-list summary{font-size:14px}
.dialog-small{font-size:11px}
.demo-profile p{font-size:11px}
input[type=range]:disabled{cursor:not-allowed;opacity:.4}
@media(max-width:1100px){.hero{gap:25px;grid-template-columns:1fr .9fr}.hero h1{font-size:40px}.preview-profile-head{gap:10px;padding-inline:17px}.preview-profile-head img{width:52px;height:52px}.preview-profile-head>div>strong{font-size:14px}.profile-level{--badge-size:48px}.level-totals{gap:12px}.level-totals>span{font-size:10px}.level-totals strong{font-size:11px}}
@media(max-width:940px){.hero{gap:20px}.hero h1{font-size:37px}.hero-description{font-size:12px}.hero-points{gap:12px;flex-wrap:wrap}.hero-points>span{font-size:10px}.profile-preview-title{padding-inline:14px}.preview-profile-head{padding:20px 14px}.preview-profile-head img{width:44px;height:44px}.preview-profile-head>div>strong{font-size:12px}.profile-level{--badge-size:40px}.preview-profile-info{margin-inline:14px;font-size:10px}.profile-xp-track{margin-inline:14px}.preview-profile-bottom{margin-inline:14px;font-size:9px}.level-field label{font-size:8px}.level-totals{gap:10px}.heading-aside{display:none}.payment-option>small{font-size:10px}}
@media(max-width:700px){.hero{display:block;min-height:auto;padding:29px 0 30px}.hero h1{font-size:42px}.hero-description{font-size:13px;line-height:1.8}.hero-description br{display:none}.profile-preview{display:none}.hero-points{gap:10px 20px}.hero-points>span{font-size:10px}.section-intro h2{font-size:25px}.summary-level{--badge-size:56px}.level-field label{font-size:9px}.milestones{justify-content:space-between;gap:5px}.milestones>span{font-size:10px}.milestones button{min-width:34px;padding-inline:8px;font-size:11px}.level-totals{gap:8px}.level-totals>span{font-size:10px}.level-totals strong{font-size:11px}.payment-help{font-size:10px}.faq-list summary{font-size:13px}.faq-list details p{font-size:12px}.benefit p{font-size:11px}.order-details{font-size:12px}}
@media(max-width:380px){.hero h1{font-size:37px}.hero-points{gap:10px}.hero-points>span{font-size:9px}.level-field label{font-size:7px}.input-level-frame{--badge-size:20px}.milestones>span{display:none}.milestones button{min-width:36px}.level-totals{gap:8px;font-size:10px}.level-totals>span{font-size:9px}.level-totals strong{font-size:10px}.section-intro h2{font-size:22px}}