@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@400;500;600;700;800&display=swap');

:root{color-scheme:dark;font-family:'DM Sans',system-ui,sans-serif;background:#0b1110;color:#f5f7f3}
*{box-sizing:border-box}
body{margin:0;min-height:100vh;background:radial-gradient(circle at 50% -20%,#214f3a 0,#0b1110 42%)}
button,a{-webkit-tap-highlight-color:transparent}
button{font:inherit;cursor:pointer}
a{color:inherit;text-decoration:none}
.site-header,main,footer{max-width:1180px;margin:auto;padding-left:clamp(20px,4vw,56px);padding-right:clamp(20px,4vw,56px)}
.site-header{height:90px;display:flex;align-items:center;justify-content:space-between;gap:18px}
.brand{display:inline-flex;align-items:center;gap:11px;font-family:Manrope,system-ui,sans-serif;font-weight:800;font-size:18px;letter-spacing:-.04em}
.brand img{border-radius:11px}
.home-link{color:#a7b6aa;font-size:13px}.home-link:hover,.fine-print a:hover{color:#c2f3cd}
.intro{max-width:750px;padding:62px 0 38px}
.eyebrow,.plan-kicker{margin:0;color:#7fdaa3;letter-spacing:.18em;font-weight:800;font-size:11px}
h1,h2,p{margin-top:0}
h1{font-family:Manrope,system-ui,sans-serif;font-size:clamp(45px,7vw,82px);line-height:1.06;letter-spacing:-.065em;margin:16px 0 21px}
h1 em{font-style:normal;color:#82dfa5}
.intro>p:last-child{color:#aabbb0;line-height:1.65;font-size:16px;max-width:620px}
.account{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:22px 25px;margin:8px 0 12px;background:#15211b;border:1px solid #365144;border-radius:22px}
.account .eyebrow{margin-bottom:8px}
#account-label{font-size:16px;font-weight:700;margin-bottom:4px;word-break:break-word}
#plan-status{font-size:13px;color:#aabbb0;margin-bottom:0}
.account button,#cancel-button{background:#e5f5e7;border:0;border-radius:100px;color:#102319;font-weight:800;padding:13px 20px;white-space:nowrap}
#sign-out-button{background:#20372b;color:#e5f5e7}
#notice{min-height:24px;color:#a9dcbd;font-size:13px;margin:12px 4px 22px}
#notice.error{color:#ffadae}
.plans{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;align-items:stretch}
.plan-card{display:flex;flex-direction:column;background:#17231c;border:1px solid #375345;border-radius:27px;padding:29px 26px 26px;min-height:510px}
.plan-card.featured{background:linear-gradient(160deg,#235d3f,#193422 51%,#17231c);border-color:#6ad99a;box-shadow:0 20px 55px #0005}
.plan-card.current{border-color:#a7fac4;box-shadow:inset 0 0 0 1px #a7fac4}
.plan-kicker{min-height:17px}.plan-card h2{font-family:Manrope,system-ui,sans-serif;font-size:30px;letter-spacing:-.05em;margin:12px 0 16px}
.price{font-family:Manrope,system-ui,sans-serif;font-size:40px;font-weight:800;letter-spacing:-.05em;margin-bottom:12px}.price span{font-family:'DM Sans',system-ui,sans-serif;font-size:14px;font-weight:500;color:#aec2b1;letter-spacing:0}
.description{color:#bed0c1;font-size:14px;line-height:1.55;min-height:43px}
ul{list-style:none;margin:14px 0 25px;padding:0;display:grid;gap:14px;font-size:13px;line-height:1.5;color:#d6e6d8}
li{position:relative;padding-left:24px}li::before{content:'✓';position:absolute;left:0;color:#7ce1a2;font-weight:800}
.plan-button,.plan-state{margin-top:auto;min-height:48px;border:0;border-radius:100px;background:#b4efc3;color:#0f2b1c;font-weight:800;text-align:center;padding:14px 17px}
.plan-button:hover:not(:disabled){background:#d4ffdb}.plan-button:disabled{opacity:.55;cursor:not-allowed}
.plan-state{background:#253c2c;color:#b9eac4}.fine-print{max-width:790px;color:#91a798;line-height:1.65;font-size:12px;margin:28px 0 18px}
.fine-print a{text-decoration:underline}#cancel-button{margin:0 0 35px;background:#303d33;color:#fff}
footer{display:flex;justify-content:space-between;gap:20px;border-top:1px solid #304236;padding-top:25px;padding-bottom:35px;color:#91a798;font-size:12px}
@media(max-width:850px){.plans{grid-template-columns:1fr}.plan-card{min-height:auto}.intro{padding-top:30px}.account{align-items:flex-start;flex-direction:column}}