:root { color: #202124; font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; background: #f7f7f5; }
* { box-sizing: border-box; }
body { min-width: 320px; margin: 0; }
.page-shell { display: grid; min-height: 100vh; place-items: center; padding: 28px; background: radial-gradient(circle at 50% 0%, #ebf8ee 0, #f7f7f5 42%); }
.success-card { width: min(100%, 520px); padding: 44px; border: 1px solid #e2e5e1; border-radius: 20px; background: #fff; box-shadow: 0 20px 60px rgb(32 45 35 / 10%); text-align: center; }
.success-icon { display: grid; width: 60px; height: 60px; place-items: center; margin: 0 auto 22px; border-radius: 50%; background: #e7f6eb; color: #237442; }
.success-icon svg { width: 31px; fill: none; stroke: currentcolor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2.4; }
.success-icon.neutral-icon { background: #f0f1ef; color: #59605b; font-size: 28px; font-weight: 750; }
.success-icon.neutral-icon svg { display: none; }
.eyebrow { margin: 0 0 10px; color: #6d7470; font-size: 11px; font-weight: 750; letter-spacing: .13em; }
h1 { margin: 0; font-size: clamp(28px, 6vw, 36px); letter-spacing: -.8px; }
.subtitle { max-width: 410px; margin: 14px auto 27px; color: #646c66; font-size: 15px; line-height: 1.6; }
.subscription-details { display: grid; gap: 1px; margin: 0 0 26px; overflow: hidden; border: 1px solid #e8e9e6; border-radius: 12px; background: #e8e9e6; text-align: left; }
.subscription-details div { display: flex; justify-content: space-between; padding: 13px 15px; background: #fbfcfa; }
dt { color: #737a75; font-size: 13px; } dd { display: flex; align-items: center; gap: 6px; margin: 0; font-size: 13px; font-weight: 700; }
.active-dot { width: 7px; height: 7px; border-radius: 50%; background: #35a75b; }
.primary-button { display: block; width: 100%; padding: 13px 16px; border-radius: 10px; background: #202124; color: #fff; font-size: 14px; font-weight: 700; text-decoration: none; transition: background .15s ease, transform .15s ease; }
.primary-button:hover { background: #363a37; transform: translateY(-1px); }
.helper-text { margin: 11px 0 25px; color: #777d79; font-size: 12px; line-height: 1.45; }
.manage-note { padding-top: 21px; border-top: 1px solid #eceeeb; text-align: left; }
.manage-note strong { font-size: 13px; }.manage-note p { margin: 6px 0 0; color: #707772; font-size: 12px; line-height: 1.5; }
@media (max-width: 480px) { .success-card { padding: 34px 24px; } }