:root{--blue:#1677ff;--ink:#17243d;--muted:#637089;--line:#e2e8f0;--soft:#f5f8fc;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:var(--ink);background:#fff}
*{box-sizing:border-box}
[hidden]{display:none!important}
body{margin:0;min-width:320px}
.account-header,.page{width:min(960px,calc(100% - 40px));margin-inline:auto}
.account-header{height:78px;display:flex;align-items:center;border-bottom:1px solid var(--line)}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:inherit;font-size:20px;font-weight:800;letter-spacing:-.035em}
.brand img{width:32px;height:32px;border-radius:8px}
.account-header>a:last-child{margin-left:auto;color:var(--blue);font-size:13px;font-weight:700}
.page{padding:82px 0 110px}
.account-title{text-align:center;max-width:620px;margin:0 auto 42px}
.account-title>p{color:var(--blue);font-size:12px;font-weight:800;letter-spacing:.11em;text-transform:uppercase}
.account-title h1{font-size:clamp(38px,5vw,58px);line-height:1.04;letter-spacing:-.06em;margin:12px 0 18px}
.account-title>span{color:var(--muted);font-size:16px;line-height:1.55}
.account-card{max-width:650px;margin:auto;border:1px solid var(--line);border-radius:14px;padding:34px;background:#fff;box-shadow:0 18px 50px rgba(45,67,98,.1)}
.account-card h2{font-size:27px;letter-spacing:-.04em;margin:0 0 9px}
.account-card section>p{font-size:14px;line-height:1.55;color:var(--muted);margin:0}
.account-card form{display:flex;gap:10px;align-items:end;margin-top:24px}
.account-card label{display:grid;gap:7px;flex:1;font-size:12px;font-weight:750}
.account-card input{width:100%;min-width:0;padding:12px;border:1px solid #c8d1df;border-radius:7px;font:inherit;color:var(--ink)}
.account-card input:focus{outline:2px solid #b8d5ff;border-color:var(--blue)}
button{border:0;border-radius:7px;padding:13px 18px;background:var(--blue);color:#fff;font:inherit;font-size:13px;font-weight:800;cursor:pointer;white-space:nowrap}
button:hover{background:#0d5fd4}
button:disabled{opacity:.45;cursor:not-allowed}
.quiet{background:transparent;color:var(--blue);padding:8px}
.quiet:hover{background:#eaf2ff}
.status-heading{display:flex;align-items:center;padding-bottom:25px;border-bottom:1px solid var(--line)}
.status-heading>div{display:grid;gap:4px}
.status-heading span,.subscription>span{font-size:11px;color:var(--muted);font-weight:750;text-transform:uppercase;letter-spacing:.08em}
.status-heading strong{font-size:15px}
.status-heading .quiet{margin-left:auto}
.subscription{display:grid;gap:9px;background:var(--soft);border-radius:10px;padding:23px;margin:25px 0}
.subscription strong{font-size:27px;letter-spacing:-.04em}
.subscription p{font-size:13px;color:var(--muted);line-height:1.5;margin:0}
#cancel{background:#fff;color:#c33;border:1px solid #efcaca}
#cancel:hover{background:#fff5f5}
#message:not(:empty){background:#eaf3ff;color:#185aa9;padding:11px 13px;border-radius:7px;font-size:13px;margin:0 0 20px}
@media(max-width:560px){.account-header{height:66px}
.page{padding:55px 0 80px}
.account-card{padding:23px}
.account-card form{align-items:stretch;flex-direction:column}
.account-card label{width:100%}
.status-heading{align-items:flex-start}
.subscription strong{font-size:23px}
}

.plans {
    margin-top: 30px;
    padding-top: 29px;
    border-top: 1px solid var(--line);
}

.plans-heading > span {
    color: var(--blue);
    font-size: 11px;
    font-weight: 750;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.plans-heading h2 {
    margin: 7px 0;
    font-size: 23px;
}

.plans-heading p {
    font-size: 13px !important;
}

.plan-grid {
    display: grid;
    grid-template-columns: repeat(3,minmax(0,1fr));
    gap: 14px;
    margin-top: 20px;
}

.plan-grid article {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 226px;
    padding: 18px;
    border: 1px solid var(--blue);
    border-radius: 10px;
    color: var(--blue);
}

.plan-grid article.featured {
    border: 2px solid #9900ff;
    color: #9900ff;
    box-shadow: 0 10px 24px rgb(153 0 255 / 14%);
}

.plan-grid h3 {
    margin: 0;
    font-size: 15px;
}

.plan-price {
    margin: 13px 0 7px;
    font-size: 34px;
    font-weight: 850;
    letter-spacing: -.06em;
}

.plan-price sup {
    font-size: 16px;
    vertical-align: top;
}

.plan-price span {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0;
}

.plan-grid article > p:not(.plan-price):not(.badge) {
    color: inherit !important;
    font-size: 12px !important;
    line-height: 1.45;
}

.plan-grid button {
    margin-top: auto;
    padding: 10px 12px;
    background: var(--blue);
}

.plan-grid .featured button,
.plan-grid .badge {
    background: #9900ff;
}

.plan-grid .badge {
    position: absolute;
    top: -11px;
    right: 10px;
    margin: 0;
    padding: 5px 7px;
    border-radius: 999px;
    color: #fff;
    font-size: 8px;
    font-weight: 850;
    letter-spacing: .04em;
}

.plan-grid .featured button:hover {
    background: #7d00d1;
}

@media(max-width:560px){
    .plan-grid {
        grid-template-columns: 1fr;
    }

    .plan-grid article {
        min-height: 0;
    }

    .plans {
        margin-top: 24px;
    }
}