/* Ridgeline — membership, packages, checkout */
.billing .save { display: inline-block; margin-left: 6px; padding: 2px 8px; border-radius: 10px; font-size: 11px; font-weight: 650; background: var(--accent-soft); color: var(--accent-text); }
.billing [aria-checked="true"] .save { background: rgba(255,255,255,.2); color: inherit; }
:root:not([data-theme="dark"]) .billing [aria-checked="true"] .save { background: var(--accent); color: #fff; }
.plan { position: relative; padding: 22px var(--s5); border-radius: var(--r-xl); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line-2); display: grid; gap: 12px; }
.plan--pop { box-shadow: inset 0 0 0 2px var(--ink); }
.plan--cur { background: var(--pine-soft); }
.plan__flag { position: absolute; top: -12px; left: 20px; padding: 4px 12px; border-radius: 999px; background: var(--ink); color: var(--bg); font-size: 12px; font-weight: 650; letter-spacing: .02em; }
.plan__name { font-size: 26px; font-weight: 650; letter-spacing: -.04em; }
.plan__price { display: flex; align-items: baseline; gap: 6px; }
.plan__price .unit { font-size: 15px; margin-left: 0; }
.grid2 > .btn { padding: 0 10px; white-space: nowrap; }
.plan__f { display: grid; gap: 9px; margin: 6px 0 8px; }
.plan__f li { display: flex; gap: 10px; align-items: flex-start; font-size: 15px; line-height: 1.35; }
.plan__f .icon { color: var(--pine-text); margin-top: 1px; flex: none; }
.matrix { border-radius: var(--r-l); overflow: hidden; box-shadow: inset 0 0 0 1px var(--line); background: var(--surface); }
.matrix__h, .matrix__r { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; align-items: center; padding: 12px 14px; font-size: 13px; gap: 6px; text-align: center; }
.matrix__h { font-size: 13px; background: var(--surface-2); } .matrix__h b { font-weight: 650; }
.matrix__r span:first-child, .matrix__h span:first-child { text-align: left; font-weight: 520; }
.matrix__r + .matrix__r { box-shadow: inset 0 1px 0 var(--line); }
.tick { color: var(--good); display: inline-grid; } .dash { color: var(--ink-3); font-style: normal; }
.mcard { padding: 24px; }
.mcard .kv dt { color: var(--inv-ink-2); } .mcard .kv dd { color: var(--inv-ink); } .mcard .kv > div + div { box-shadow: inset 0 1px 0 var(--inv-line); }
.mcard .link { color: #FF9A74; }
.pkg { display: grid; grid-template-columns: 84px 1fr; gap: 14px; padding: 12px; align-items: center; }
.pkg__img { width: 84px; height: 104px; border-radius: 16px; overflow: hidden; background: var(--bg-2); }
.pm .icon { color: var(--ink-2); }
.terms { display: flex; gap: 12px; align-items: flex-start; cursor: pointer; position: relative; color: var(--ink-2); }
.terms input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; cursor: pointer; margin: 0; }
.terms__box { flex: none; width: 24px; height: 24px; border-radius: 8px; display: grid; place-items: center; box-shadow: inset 0 0 0 2px var(--line-2); color: transparent; margin-top: 1px; transition: all .15s; }
.terms input:checked + .terms__box { background: var(--ink); color: var(--bg); box-shadow: none; }
.terms input:focus-visible + .terms__box { outline: 2.5px solid var(--focus); outline-offset: 2px; }
.done { min-height: 80%; display: grid; justify-items: center; align-content: center; text-align: center; gap: 18px; padding-top: 56px; }
.done__ico { width: 88px; height: 88px; border-radius: 50%; display: grid; place-items: center; background: var(--good); color: var(--bg); animation: pop .5s var(--ease) both; }

.mcard .notice .link { color: var(--accent-text); }
.mcard .notice { color: var(--ink); }

/* card form */
.cardform__num { position: relative; } .cardform__num .input { padding-right: 112px; }
.cardform__brand { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); font-size: 13px; font-weight: 600; color: var(--ink-2); pointer-events: none; }
.cardform .field .error[hidden] { display: none; } .cardform .field .error:not([hidden]) { display: block; }
#newcard { margin-top: 4px; }