.billing-page { padding-bottom: 60px; }
.billing-current{display:flex;align-items:center;justify-content:space-between;margin:28px 0;padding:20px 24px;border:1px solid var(--line);border-radius:6px;background:#fff}.billing-current small,.billing-current strong,.billing-current span{display:block}.billing-current small{color:var(--muted);font-size:8px;letter-spacing:.13em}.billing-current strong{margin:5px 0 2px;font:600 23px "Playfair Display"}.billing-current span{color:var(--good);font-size:10px}.billing-current button,.plan-grid article>button{border:1px solid var(--line);border-radius:4px;background:#fff;padding:11px 16px;font-size:11px;font-weight:700}.plan-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.plan-grid article{position:relative;padding:28px;border:1px solid var(--line);border-radius:7px;background:#fff}.plan-grid article.featured{border:2px solid var(--berry)}.plan-grid p{margin:0;color:var(--berry);font-size:8px;font-weight:700;letter-spacing:.14em}.plan-grid h2{margin:8px 0 20px;font:600 25px "Playfair Display"}.plan-grid article>strong{font:600 27px "Playfair Display"}.plan-grid article>strong small{font:600 10px "DM Sans"}.plan-grid article>span{display:block;margin-top:3px;color:var(--muted);font-size:9px}.plan-grid ul{min-height:112px;margin:22px 0;padding:18px 0 0;border-top:1px solid var(--line);list-style:none}.plan-grid li{margin:9px 0;color:var(--muted);font-size:11px}.plan-grid li::before{margin-right:7px;color:var(--good);content:"✓"}.plan-grid article>button{width:100%}.plan-grid article.current{box-shadow:inset 0 0 0 2px var(--good)}.billing-note{color:var(--muted);text-align:center;font-size:9px;margin-top:22px}@media(max-width:850px){.plan-grid{grid-template-columns:1fr}.plan-grid ul{min-height:0}}@media(max-width:550px){.billing-current{align-items:flex-start;gap:16px;flex-direction:column}.billing-current button{width:100%}}

/* Interactive feedback for billing actions: pointer, hover, press, and a busy state while Stripe opens. */
.billing-current button,.plan-grid article>button{cursor:pointer;transition:background-color .15s,border-color .15s,filter .15s,transform .1s}
.billing-current button:hover:not(:disabled),.plan-grid article>button:not(.primary):hover:not(:disabled){border-color:var(--ink);background:#faf7f2}
.plan-grid article>button.primary:hover:not(:disabled){filter:brightness(.92)}
.billing-current button:active:not(:disabled),.plan-grid article>button:active:not(:disabled){transform:translateY(1px)}
.billing-current button:focus-visible,.plan-grid article>button:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.billing-current button:disabled,.plan-grid article>button:disabled{cursor:default}
.billing-current button[aria-busy="true"],.plan-grid article>button[aria-busy="true"]{cursor:progress;opacity:.75}
/* Once subscribed, "Más popular" no longer competes with the current-plan highlight. */
.plan-grid.subscribed article.featured:not(.current){border:1px solid var(--line)}

/* Full feature lists: keep cards aligned and mark features that are not built yet. */
.plan-grid article{display:flex;flex-direction:column}
.plan-grid ul{flex:1}
.plan-grid li b{color:var(--ink);font-weight:600}
.plan-grid li.soon{color:#a59d98}
.plan-grid li.soon::before{color:#c9c1bb;content:"○"}
.plan-grid li.soon small{margin-left:4px;padding:1px 6px;border-radius:99px;background:#f1efed;color:var(--muted);font-size:8px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;white-space:nowrap}