/* RangeFinder — billing page styles */
/* The dashboard also styles .billing-card with display:flex, which would override
   the native [hidden] attribute. Force-hide hidden elements on this page. */
[hidden]{display:none !important}
.billing-main{padding:var(--space-12) 0 var(--space-16)}
.billing-head{margin-bottom:var(--space-8);max-width:640px}
.billing-head .eyebrow{font-size:var(--text-xs);font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:var(--color-accent);margin-bottom:.5rem}
.billing-head h1{font-family:var(--font-display);font-size:var(--text-3xl);font-weight:600;line-height:1.05;letter-spacing:-.02em;color:var(--color-text);margin-bottom:.6rem}
.billing-sub{font-size:var(--text-base);color:var(--color-text-muted);line-height:1.55}

.billing-banner{margin-bottom:var(--space-6);background:color-mix(in oklab,var(--color-primary) 10%,transparent);border:1px solid color-mix(in oklab,var(--color-primary) 30%,transparent);border-radius:var(--radius-md);padding:.85rem 1.1rem;font-size:var(--text-sm);color:var(--color-text)}
.billing-banner.error{background:color-mix(in oklab,#b33a3a 10%,transparent);border-color:color-mix(in oklab,#b33a3a 30%,transparent)}

.billing-card{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:var(--space-7);margin-bottom:var(--space-6)}
.billing-card-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.6rem;margin-bottom:var(--space-5)}
.billing-card-head h2{font-family:var(--font-display);font-size:var(--text-xl);font-weight:600;color:var(--color-text)}

.billing-status-pill{font-size:var(--text-xs);font-weight:600;border-radius:var(--radius-full);padding:.3rem .8rem;white-space:nowrap;background:color-mix(in oklab,var(--color-accent) 16%,transparent);color:var(--color-accent)}
.billing-status-pill.is-active{background:color-mix(in oklab,var(--color-primary) 16%,transparent);color:var(--color-primary)}
.billing-status-pill.is-pastdue{background:color-mix(in oklab,#b33a3a 16%,transparent);color:#b33a3a}
.billing-status-pill.is-canceled{background:var(--color-surface-offset-2);color:var(--color-text-muted)}
.billing-window-pill{font-size:var(--text-xs);font-weight:600;color:var(--color-primary);background:color-mix(in oklab,var(--color-primary) 12%,transparent);border-radius:var(--radius-full);padding:.3rem .8rem}

.billing-meta-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:var(--space-4);margin-bottom:var(--space-6)}
.billing-meta-grid dt{font-size:var(--text-xs);text-transform:uppercase;letter-spacing:.05em;color:var(--color-text-muted);font-weight:600;margin-bottom:.3rem}
.billing-meta-grid dd{font-size:var(--text-base);color:var(--color-text);font-weight:500;margin:0;font-variant-numeric:tabular-nums}

.billing-actions{display:flex;flex-wrap:wrap;gap:.6rem}
.billing-note{font-size:var(--text-sm);color:var(--color-text-muted);line-height:1.55;margin-bottom:var(--space-5)}

.billing-field{display:flex;flex-direction:column;gap:.4rem;margin-bottom:var(--space-6);max-width:420px}
.billing-field-label{font-size:var(--text-xs);font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--color-text-muted)}
.billing-field select{font-family:var(--font-body);font-size:var(--text-base);padding:.7rem .85rem;border:1px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-surface-offset);color:var(--color-text)}
.billing-field select:focus{outline:2px solid var(--color-primary);outline-offset:1px;border-color:var(--color-primary)}

.plan-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:var(--space-4)}
.plan-card{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:var(--space-6);display:flex;flex-direction:column;gap:.6rem}
.plan-card.is-current{border-color:var(--color-primary);box-shadow:0 0 0 3px color-mix(in oklab,var(--color-primary) 16%,transparent)}
.plan-card.is-selected{border-color:var(--color-accent);box-shadow:0 0 0 3px color-mix(in oklab,var(--color-accent) 18%,transparent);position:relative}
.plan-card.is-selected::after{content:"Selected";position:absolute;top:-.65rem;left:var(--space-6);background:var(--color-accent);color:#fff;font-size:var(--text-xs);font-weight:700;padding:.15rem .6rem;border-radius:var(--radius-full)}
.plan-card-name{font-family:var(--font-display);font-size:var(--text-lg);font-weight:600;color:var(--color-text)}
.plan-card-price{font-size:var(--text-2xl);font-weight:700;color:var(--color-text);font-variant-numeric:tabular-nums}
.plan-card-price .per{font-size:var(--text-sm);font-weight:500;color:var(--color-text-muted)}
.plan-card-features{list-style:none;padding:0;margin:.2rem 0;display:flex;flex-direction:column;gap:.35rem}
.plan-card-features li{font-size:var(--text-sm);color:var(--color-text-muted);padding-left:1.1rem;position:relative}
.plan-card-features li::before{content:"";position:absolute;left:0;top:.5em;width:.45rem;height:.45rem;border-radius:50%;background:var(--color-primary)}
.plan-card .btn{margin-top:auto}
.plan-card-unavailable{font-size:var(--text-xs);color:var(--color-text-faint);margin-top:.2rem}

.billing-gate-actions{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:var(--space-3)}

/* Plan carried in from a pricing CTA — highlighted so the choice reads as kept. */
.billing-selected{border-color:color-mix(in oklab,var(--color-primary) 45%,var(--color-border))}
.billing-selected-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:.6rem;margin:.2rem 0 var(--space-3)}
.billing-selected-head h2{font-family:var(--font-display);font-size:var(--text-2xl);font-weight:600;color:var(--color-text)}
.billing-selected-price{font-size:var(--text-xl);font-weight:700;color:var(--color-primary)}

@media(max-width:640px){
  .billing-head h1{font-size:var(--text-2xl)}
  .billing-card{padding:var(--space-5)}
}