:root { color-scheme: light; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color: #202b32; background: #f3f4f0; }
* { box-sizing: border-box; }
body { margin: 0; }
main { width: min(100% - 40px, 720px); margin: 0 auto; padding: 34px 0 24px; }
header { display: flex; align-items: center; gap: 12px; margin: 0 0 32px 4px; }
.brand { display: grid; place-content: center; width: 38px; height: 38px; background: #213d38; color: white; border-radius: 11px; font-size: 23px; font-weight: 650; text-decoration: none; position: relative; }
.brand span { color: #cbdf8c; position: absolute; right: 5px; bottom: 2px; }
.wordmark { font-size: 14px; font-weight: 600; letter-spacing: -.2px; }
.card { border: 1px solid #e1e5df; border-radius: 24px; background: white; padding: 40px; box-shadow: 0 14px 55px #253d3410; }
.eyebrow { margin: 0 0 23px; color: #7a857d; font-size: 10px; letter-spacing: 1.8px; font-weight: 650; }
.status { display: inline-flex; align-items: center; gap: 8px; color: #356d50; font-size: 12px; padding: 7px 11px; background: #edf5ed; border-radius: 30px; }
.dot { width: 6px; height: 6px; border-radius: 50%; background: #548e5c; }
h1 { font-size: clamp(32px, 6vw, 48px); line-height: 1.12; letter-spacing: -1.7px; font-weight: 650; margin: 24px 0 18px; }
.intro { max-width: 440px; color: #78817e; font-size: 15px; line-height: 1.7; margin: 0 0 34px; }
.steps { border-top: 1px solid #e9ece7; margin-bottom: 26px; }
.step { display: grid; grid-template-columns: 34px 1fr auto; align-items: start; gap: 14px; padding: 20px 0; border-bottom: 1px solid #e9ece7; }
.number { display: grid; place-items: center; width: 30px; height: 30px; border: 1px solid #e7ebe5; border-radius: 9px; font-size: 11px; color: #a1aaa3; }
.number.ready { background: #213d38; color: white; border-color: #213d38; }
h2 { font-size: 14px; font-weight: 650; margin: 0 0 5px; }
.step p { color: #7c8680; font-size: 12px; line-height: 1.6; margin: 0; max-width: 335px; }
.tag { padding: 4px 8px; background: #edf5ed; color: #477356; border-radius: 5px; font-size: 10px; white-space: nowrap; }
.tag.pending { background: #f3f4f1; color: #8e9690; }
aside { background: #f6f7f3; border-radius: 10px; padding: 15px 17px; color: #7d857d; font-size: 12px; line-height: 1.7; }
footer { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 27px; }
.release { color: #a3aaa2; font-size: 9px; letter-spacing: .6px; }
footer a { color: #597263; font-size: 11px; text-decoration: none; }
a:focus-visible { outline: 2px solid #356d50; outline-offset: 5px; }
.bottom { color: #a2aaa1; font-size: 10px; text-align: center; margin: 22px 0 0; }
@media (max-width: 520px) { main { width: min(100% - 24px, 720px); padding-top: 22px; } header { margin-bottom: 22px; } .card { padding: 26px 22px; border-radius: 18px; } .step { gap: 10px; grid-template-columns: 30px 1fr; } .tag { grid-column: 2; justify-self: start; } footer { align-items: flex-start; flex-direction: column-reverse; gap: 14px; } }