/* Sign-in / subscribe / account UI. Uses the tokens from style.css. */
.gate-card{border:1px solid var(--border);background:var(--surface);border-radius:var(--r);padding:var(--s3);margin:var(--s3) 0}
.gate-card h2{margin-top:0}
.gate-actions{display:flex;flex-wrap:wrap;gap:var(--s1);margin:var(--s2) 0}
.gate-actions .btn,.gate-actions button{flex:1 1 12rem;justify-content:center;text-align:center}
.gate-field{display:block;margin:var(--s2) 0}
.gate-field input[type=email]{display:block;width:100%;font:inherit;padding:.55rem .7rem;margin-top:.3rem;min-height:44px;border:1px solid var(--border);border-radius:8px;background:var(--bg);color:var(--text)}
.gate-tos{display:flex;gap:.6rem;align-items:flex-start;margin:var(--s2) 0}
.gate-tos input{width:1.2rem;height:1.2rem;margin-top:.25rem;flex:none}
.gate-msg{margin-top:var(--s2)}
.gate-plans{display:grid;grid-template-columns:repeat(auto-fit,minmax(14rem,1fr));gap:var(--s2);margin:var(--s2) 0}
.gate-plan{border:1px solid var(--border);border-radius:var(--r);padding:var(--s2);background:var(--bg)}
.gate-plan .price{font-size:1.8rem;font-weight:700;margin:.2rem 0}
.gate-plan button{width:100%;justify-content:center}
.gate-sep{display:flex;align-items:center;gap:var(--s1);color:var(--muted);margin:var(--s2) 0}
.gate-sep::before,.gate-sep::after{content:"";flex:1;border-top:1px solid var(--border)}
.gate-dl{display:grid;grid-template-columns:max-content 1fr;gap:.3rem var(--s2)}
.gate-dl dt{color:var(--muted)}
.gate-dl dd{margin:0}
.wm{font-size:.8rem}

/* plan cards: equal height, buttons aligned at the bottom and styled the same */
.gate-plans{align-items:stretch}
.gate-plan{display:flex;flex-direction:column}
.gate-plan p{flex:1}
.gate-plan button{margin-top:auto;width:100%;justify-content:center}
.gate-plan h3{margin-top:0}

/* login page: centred, branded */
body[data-page="login"]{min-height:100vh;background:
  radial-gradient(52rem 26rem at 50% -8%,color-mix(in srgb,var(--c-ai) 16%,transparent),transparent 70%),
  radial-gradient(36rem 22rem at 0% 0%,color-mix(in srgb,var(--c-client) 14%,transparent),transparent 70%),var(--bg)}
.auth-page{max-width:29rem;margin:0 auto;padding:2.2rem var(--s2) 3rem;text-align:center}
.auth-hero img{display:block;margin:0 auto;border-radius:22px;box-shadow:0 12px 32px color-mix(in srgb,var(--c-ai) 38%,transparent)}
.auth-hero h1{font-size:1.75rem;margin:1.1rem 0 .35rem;letter-spacing:-.01em}
.auth-hero p{color:var(--muted);margin:0 auto;max-width:24rem}
body[data-page="login"] .gate-card{text-align:left;margin:1.6rem 0 1rem;padding:1.5rem;border-radius:16px;box-shadow:0 10px 34px rgba(15,23,42,.10)}
body[data-page="login"] .gate-card h2{font-size:1.15rem}
body[data-page="login"] .gate-actions button{flex:1 1 100%}
.auth-foot{font-size:.85rem;color:var(--muted);line-height:1.8}
.auth-foot a{color:var(--muted)}