/* Plans, the paywall and the Settings billing card. Shared by /pricing (the landing's night sky: body.nx-deck) and the
   app (app.css charcoal). Built on app.css tokens; the pricing page adds its neon/glass overrides at the bottom. */

/* ---------- plan cards ---------- */
.plan-grid{ display:grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 1.6vw, 24px); align-items:stretch; }
.plan-card{ position:relative; display:flex; flex-direction:column; gap: 14px; min-width:0;
  background: var(--bg-raised); border:1px solid var(--line-strong); border-radius: var(--radius-lg); padding: clamp(20px, 2vw, 28px); }
.plan-card.is-popular{ border-color: var(--rec); box-shadow: 0 0 0 1px var(--rec) inset, 0 24px 60px -30px var(--rec-glow); }
.plan-top{ display:flex; align-items:center; justify-content:space-between; gap: 10px; }
.plan-name{ font-family: var(--font-display); font-weight:400; font-size: 1.9rem; line-height:1; letter-spacing:-.01em; }
.plan-badge{ font-family: var(--font-mono); font-size:.68rem; letter-spacing:.12em; text-transform:uppercase; color:#fff9f7;
  background: var(--rec); border-radius: var(--radius-pill); padding: 4px 10px; white-space:nowrap; }
.plan-blurb{ color: var(--ink-dim); font-size:.95rem; line-height:1.45; min-height: 2.9em; }
.plan-price{ display:flex; align-items:baseline; gap: 4px; margin-top: 4px; }
.plan-amt{ font-family: var(--font-ui); font-weight:700; font-size: clamp(2.4rem, 3.2vw, 3rem); letter-spacing:-.03em; line-height:1; font-variant-numeric: tabular-nums; }
.plan-per{ color: var(--ink-dim); font-size: 1rem; }
.plan-billing{ color: var(--ink-faint); font-size:.85rem; margin-top:-6px; min-height:1.3em; }
.plan-save{ color: var(--sage); font-weight:600; margin-left: 4px; }
.plan-yield{ display:grid; grid-template-columns: minmax(0,1fr) auto minmax(0,1fr); align-items:center; gap: 8px; padding: 12px 14px; border-radius: var(--radius-md);
  background: var(--bg-sunken); border:1px solid var(--line); color: var(--ink-dim); }
.plan-stat{ display:flex; flex-direction:column; gap: 2px; min-width:0; }
.plan-stat b{ color: var(--ink); font-size:1.35rem; line-height:1.1; font-variant-numeric: tabular-nums; letter-spacing:-.01em; }
.plan-stat span{ font-size:.78rem; color: var(--ink-faint); white-space:nowrap; }
.plan-approx{ color: var(--ink-faint); font-size:1.1rem; }
.plan-features{ display:flex; flex-direction:column; gap: 10px; margin: 2px 0 6px; }
.plan-features li{ display:flex; gap: 10px; align-items:flex-start; font-size:.95rem; line-height:1.4; }
.plan-features svg{ flex:none; width:18px; height:18px; margin-top:1px; color: var(--sage); }
.plan-cta{ margin-top:auto; }
.plan-cta.is-current{ border-color: var(--sage); color: var(--sage); background: var(--sage-dim); cursor: default; }
.plan-cta.is-soon{ color: var(--ink-faint); cursor: default; border-style: dashed; }
.plan-cta[aria-disabled="true"]:active{ transform:none; }

.plan-card.is-compact{ gap: 10px; padding: 18px; }
.plan-card.is-compact .plan-name{ font-size: 1.5rem; }
.plan-card.is-compact .plan-amt{ font-size: 2rem; }
.plan-card.is-compact .plan-yield{ padding: 9px 11px; }
.plan-card.is-compact .plan-stat b{ font-size: 1.1rem; }
.plan-card.is-compact .plan-cta{ margin-top: 4px; }

/* billing period toggle */
.plan-interval button{ display:inline-flex; align-items:center; gap: 8px; }
.plan-interval-save{ white-space:nowrap; font-family: var(--font-mono); font-size:.66rem; letter-spacing:.06em; text-transform:uppercase; color: var(--sage); }
.plan-interval button[aria-pressed="true"] .plan-interval-save{ color: #2f6b56; }

/* ---------- founding offer ---------- */
.founding{ display:flex; align-items:center; justify-content:space-between; gap: 20px 28px; flex-wrap:wrap;
  border-radius: var(--radius-lg); padding: 18px 22px; border:1px solid rgba(255,75,62,.55);
  background: linear-gradient(100deg, rgba(255,75,62,.16), rgba(224,64,154,.10) 55%, rgba(155,92,255,.10)); }
.founding-copy{ flex: 1 1 320px; min-width:0; }
.founding-eyebrow{ display:inline-flex; align-items:center; gap:8px; font-family: var(--font-mono); font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; color: var(--ink); }
.founding-eyebrow .dot{ width:7px; height:7px; border-radius:50%; background: var(--rec); box-shadow: 0 0 10px var(--rec); }
.founding-title{ margin-top: 8px; font-family: var(--font-display); font-size: clamp(1.5rem, 2.2vw, 1.9rem); line-height:1.1; }
.founding-title b{ font-weight:700; }
.founding-sub{ margin-top: 6px; color: var(--ink-dim); font-size:.92rem; max-width: 46em; }
.founding-cta{ flex: 0 0 auto; min-width: 240px; }

/* ---------- paywall modal ---------- */
.modal.paywall{ position:relative; max-width: 860px; max-height: calc(100svh - 32px); overflow-y:auto; padding: clamp(22px, 3vw, 36px); }
.paywall-close{ position:absolute; top: 14px; right: 14px; }
.paywall .founding{ margin-top: 20px; padding: 16px 18px; }
.paywall .founding-title{ font-size: 1.35rem; }
.paywall .founding-cta{ min-width: 220px; }
.paywall-bar{ display:flex; align-items:center; justify-content:space-between; gap: 12px; flex-wrap:wrap; margin: 22px 0 14px; }
.paywall-foot{ margin-top: 16px; font-size:.8rem; text-align:center; }

/* ---------- Settings: plan & billing ---------- */
.settings-card{ max-width: 560px; } /* the billing card needs the room; the other Settings cards match it */
.billing-card .billing-head{ display:flex; align-items:flex-start; justify-content:space-between; gap: 12px; }
.billing-plan{ font-family: var(--font-display); font-size: 2rem; line-height:1; margin-top: 8px; }
.billing-card .pill{ white-space:nowrap; flex:none; }
.billing-meta{ color: var(--ink-faint); font-size:.85rem; margin-top: 6px; }
.meter{ margin-top: 18px; }
.meter-row{ display:flex; justify-content:space-between; gap: 12px; font-size:.9rem; }
.meter-row .num{ font-family: var(--font-mono); font-size:.82rem; color: var(--ink-dim); white-space:nowrap; }
.meter-track{ margin-top: 8px; height: 8px; border-radius: 4px; background: var(--bg-sunken); border:1px solid var(--line); overflow:hidden; }
.meter-fill{ height:100%; border-radius: 4px; background: var(--sage); transition: width .4s var(--ease); }
.meter-fill.is-low{ background: var(--amber); }
.meter-fill.is-out{ background: var(--rec); }
.billing-alert{ margin-top: 16px; padding: 12px 14px; border-radius: var(--radius-md); font-size:.9rem; border:1px solid var(--line-strong); }
.billing-alert--warn{ border-color: rgba(224,167,94,.5); background: var(--amber-dim); }
.billing-actions{ margin-top: 20px; }
.billing-upgrade{ margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line); }
.billing-upgrade .plan-grid{ grid-template-columns: minmax(0, 1fr); gap: 10px; margin-top: 12px; }
.plan-row{ display:grid; grid-template-columns: minmax(0, 1fr) auto; align-items:center; gap: 4px 14px; padding: 12px 14px; border:1px solid var(--line-strong); border-radius: var(--radius-md); }
.plan-row.is-popular{ border-color: rgba(255,75,62,.6); }
.plan-row-name{ font-weight:600; }
.plan-row-price{ font-weight:400; color: var(--ink-dim); font-size:.9rem; margin-left: 6px; font-variant-numeric: tabular-nums; }
.plan-row-sub{ grid-column: 1; color: var(--ink-faint); font-size:.82rem; }
.plan-row .btn{ grid-row: 1 / span 2; grid-column: 2; }
.billing-success{ max-width: 560px; display:flex; gap: 14px; align-items:center; border-color: rgba(143,184,168,.5); background: linear-gradient(100deg, var(--sage-dim), transparent); margin-bottom: 20px; }
.billing-success .h3{ font-size: 1.1rem; }
.billing-success-ic{ flex:none; width:40px; height:40px; border-radius:50%; display:grid; place-items:center; background: var(--sage); color: var(--sage-ink); }
.billing-success-ic svg{ width:22px; height:22px; }

@media (max-width: 900px){
  .plan-grid{ grid-template-columns: minmax(0, 1fr); }
  .plan-blurb{ min-height:0; }
}
@media (max-width: 640px){
  .founding-cta{ min-width: 0; flex: 1 1 100%; }
  .modal.paywall{ padding: 22px 16px; }
  .paywall-bar .btn-ghost{ display:none; }
  .plan-interval{ width:100%; }
  .plan-interval button{ flex:1 1 auto; justify-content:center; padding-inline: 12px; }
  .plan-interval button[data-interval="month"]{ flex-grow: 0; }
}