/* Wavely — account.css */
.account { padding-block: var(--s-32) var(--s-96); display: grid; gap: var(--s-24); }
.account .signin { max-width: 400px; margin: 0; padding: var(--s-24); display: grid; gap: var(--s-16); }
.account .signin form { display: grid; gap: var(--s-16); }
.account__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--s-12); margin-bottom: var(--s-16); }
.plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--s-16); }
.plan { display: grid; gap: var(--s-8); align-content: start; padding: var(--s-24); }
.plan .tier { justify-self: start; }
.plan--featured { border-color: rgb(255 90 31 / .45); }
.plan__price { display: flex; align-items: baseline; gap: var(--s-4); margin-top: var(--s-8); }
.plan__per { font-size: var(--fs-14); color: var(--text-muted); }
.plan__stats { font-size: var(--fs-14); }
.plan .btn { margin-top: var(--s-8); }
.account__fine { max-width: 70ch; }
.account__fine a { color: var(--text); text-decoration: underline; text-underline-offset: 2px; }
.billing { display: grid; gap: var(--s-8); padding: var(--s-24); max-width: 480px; }
.billing .btn { justify-self: start; margin-top: var(--s-8); }