/* Peel plans — the page a visitor sees before creating an account. Builds on account-page.css. */
main.plans-main { display:block; max-width:1160px; padding:56px 20px 70px; text-align:center; }
.plans-h { font-size:clamp(28px,4vw,40px); letter-spacing:-.02em; margin:0 0 10px; }
.plans-sub { color:var(--muted); max-width:640px; margin:0 auto 34px; }
.plans { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; text-align:left; }
.plan { background:var(--panel); border:1px solid var(--line); border-radius:16px; padding:26px 24px 22px; display:flex; flex-direction:column; }
.plan h2 { margin:0; font-size:28px; letter-spacing:-.02em; }
.plan-tag { color:var(--muted); margin:4px 0 0; }
.plan-price { margin:22px 0 24px; display:flex; align-items:baseline; gap:8px; min-height:44px; }
.plan-price b { font-size:34px; letter-spacing:-.02em; } .plan-price b.talk { font-size:26px; line-height:44px; }
.plan-price span { color:var(--dim); font-size:13px; }
.plan-cta { display:block; width:100%; text-align:center; padding:12px 14px; border-radius:10px; border:1px solid var(--line);
  background:var(--panel2); color:var(--ink); font:inherit; font-weight:600; cursor:pointer; text-decoration:none; }
.plan-cta:hover { border-color:var(--teal); text-decoration:none; }
.plan-cta.primary { background:var(--teal); border-color:var(--teal); color:#081915; }
.plan-note { color:var(--dim); font-size:12.5px; text-align:center; margin:9px 0 0; }
.plan-feats { list-style:none; margin:20px 0 0; padding:18px 0 0; border-top:1px solid var(--line); display:grid; gap:9px; color:var(--muted); font-size:14px; }
.plan-feats li::before { content:"✓ "; color:var(--teal); }
.plan-planned { color:var(--dim); font-size:12px; margin:12px 0 0; }
.plans-fine { color:var(--dim); font-size:12.5px; margin:26px auto 0; max-width:720px; }
#waitlist { background:var(--panel); color:var(--ink); border:1px solid var(--line); border-radius:14px; padding:22px 24px; width:min(420px,calc(100vw - 28px)); text-align:left; }
#waitlist::backdrop { background:rgba(4,8,12,.7); }
/* No <dialog>.showModal (old browsers): the script adds .no-dialog and toggles [open] by hand. */
#waitlist.no-dialog:not([open]) { display:none; }
#waitlist.no-dialog[open] { display:block; position:fixed; left:50%; top:50%; transform:translate(-50%,-50%); z-index:1000; margin:0;
  box-shadow:0 0 0 100vmax rgba(4,8,12,.7), 0 18px 48px rgba(0,0,0,.5); }
#waitlist h2 { margin:0; font-size:20px; }
#waitlist label { display:block; margin:14px 0 0; font-size:13px; color:var(--muted); }
#waitlist label > span { display:block; margin-bottom:4px; }
#waitlist input[type=text], #waitlist input[type=email] { width:100%; background:var(--bg); color:var(--ink); border:1px solid var(--line); border-radius:8px; padding:9px 11px; font:inherit; }
#waitlist label.check { display:flex; gap:8px; align-items:flex-start; } #waitlist label.check > span { margin:0; }
#waitlist .hp { position:absolute; left:-9999px; width:1px; height:1px; opacity:0; }
#waitlist .msg { min-height:18px; margin:10px 0 0; font-size:13px; color:var(--muted); } #waitlist .msg.ok { color:var(--ok); } #waitlist .msg.bad { color:var(--bad); }
.wl-actions { display:flex; justify-content:flex-end; gap:10px; margin-top:12px; }
.wl-actions button { padding:9px 16px; border-radius:9px; border:1px solid var(--line); background:var(--panel2); color:var(--ink); font:inherit; cursor:pointer; }
.wl-actions button.primary { background:var(--teal); border-color:var(--teal); color:#081915; font-weight:700; }
@media (max-width:880px) { .plans { grid-template-columns:1fr; } }

/* the $100 card: REPL / REPL + API chosen inside one card */
.plan-opts { display:flex; gap:8px; margin:14px 0 0; flex-wrap:wrap; }
.plan-opts button { font:inherit; font-size:14px; padding:8px 12px; border-radius:9px; border:1px solid var(--line); background:transparent; color:var(--dim); cursor:pointer; }
.plan-opts button b { color:var(--text, #e6edf3); }
.plan-opts button.on { border-color:var(--teal); background:rgba(130,222,207,.10); }
.plan-opt[hidden] { display:none; }
.plan-opt { display:flex; flex-direction:column; flex:1; }