/* Dark, one-question-per-screen layout modeled on agentcalls.io/agent/signup */
:root{
  --accent:#188BF6; --accent-deep:#1221D5;
  --bg:#000; --text:#fff;
  --t-80:rgba(255,255,255,.8); --t-65:rgba(255,255,255,.65); --t-50:rgba(255,255,255,.5); --t-35:rgba(255,255,255,.35);
  --field:rgba(255,255,255,.06); --field-hover:rgba(255,255,255,.09); --line:rgba(255,255,255,.1); --line-2:rgba(255,255,255,.18);
  --err:#FF6B6B;
  --font:"Inter Tight","Helvetica Neue",Arial,sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--bg);color:var(--text);font-family:var(--font);font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased;min-height:100vh;overflow-x:hidden}
a{color:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:10px}
button{font-family:inherit}

/* background: faint grid + blue glow */
.bg{position:fixed;inset:0;pointer-events:none;z-index:0}
.grid{position:absolute;inset:0;opacity:.1;background-image:linear-gradient(rgba(148,163,184,.18) 1px,transparent 1px),linear-gradient(90deg,rgba(148,163,184,.18) 1px,transparent 1px);background-size:44px 44px}
.glow{position:absolute;left:50%;top:38%;width:1100px;height:700px;max-width:160vw;transform:translate(-50%,-50%);filter:blur(48px);background:radial-gradient(rgba(10,118,227,.2) 0%,rgba(18,33,213,.1) 45%,transparent 70%)}

.top{position:relative;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:20px 28px}
@media (max-width:520px){.top{padding:16px}}
.brand{display:flex;align-items:center;text-decoration:none}
.brand img.logo{height:30px;width:auto;filter:invert(1) hue-rotate(180deg)}
.brand img.mark{height:26px;width:26px}
.brand span{font-weight:600;font-size:19px;letter-spacing:-.02em;margin-left:9px}
.top-right{display:flex;align-items:center;gap:18px;font-size:13.5px;color:var(--t-65)}
.top-right a{color:#fff;text-decoration:underline;text-underline-offset:3px}
@media (max-width:640px){.top-right .login{display:none}}

.shell{position:relative;z-index:1;width:100%;max-width:394px;margin:0 auto;padding:clamp(28px,9vh,96px) 0 64px}
@media (max-width:440px){.shell{padding-left:16px;padding-right:16px}}
.shell.wide{max-width:860px;padding-left:16px;padding-right:16px}

.progress{display:flex;align-items:center;gap:6px;margin-bottom:34px}
[hidden]{display:none!important}
.progress i{flex:1;height:3px;border-radius:999px;background:rgba(255,255,255,.12);transition:background .3s ease}
.progress i.on{background:#0A76E3}
.progress b{font-weight:400;font-size:10px;color:var(--t-50);margin-left:8px;letter-spacing:.04em}

.head{text-align:center}
.eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:10px;letter-spacing:2.5px;text-transform:uppercase;color:rgba(255,255,255,.6)}
.eyebrow::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--accent-deep)}
.head h1{font-weight:400;font-size:38px;letter-spacing:-1px;line-height:1.25;margin:14px 0 0;text-wrap:balance}
@media (max-width:440px){.head h1{font-size:32px}}
.head p{font-size:14px;color:var(--t-50);margin:12px 0 0}
.loading{color:var(--t-50);text-align:center}

.fields{display:grid;gap:18px;margin-top:40px}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.lbl{display:block;font-size:12px;letter-spacing:.6px;color:var(--t-65);margin-bottom:8px}
.lbl.q{font-size:13px;letter-spacing:0;color:var(--t-80);text-transform:none}
.hint{font-size:12px;color:var(--t-35);margin-top:7px}
input[type=text],input[type=email],input[type=tel],input[type=number],select,textarea{
  width:100%;height:48px;font:inherit;font-size:16px;color:#fff;background:var(--field);border:1px solid transparent;border-radius:16px;padding:0 16px;
  transition:border-color .15s ease,background .15s ease,box-shadow .15s ease}
textarea{height:auto;min-height:84px;padding:12px 16px;resize:vertical}
select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23ffffff99' stroke-width='2.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 16px center;padding-right:40px}
select option{background:#0b0f19;color:#fff}
input::placeholder,textarea::placeholder{color:var(--t-35)}
input:hover,select:hover,textarea:hover{background:var(--field-hover)}
input:focus,select:focus,textarea:focus{outline:none;border-color:rgba(24,139,246,.7);box-shadow:0 0 0 4px rgba(24,139,246,.15)}
.invalid input,.invalid select,.invalid textarea,.invalid .opts{box-shadow:0 0 0 1px var(--err);border-radius:16px}

/* option tiles (checkbox / radio look) */
.opts{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.opts.one{grid-template-columns:1fr}
.opt{appearance:none;display:flex;align-items:center;gap:10px;min-height:46px;padding:10px 14px;background:var(--field);border:1px solid transparent;border-radius:14px;color:var(--t-80);font-size:13.5px;text-align:left;cursor:pointer;transition:background .15s ease,border-color .15s ease}
.opt:hover{background:var(--field-hover)}
.opt .box{flex:none;width:15px;height:15px;border:1.5px solid var(--line-2);border-radius:4px;display:grid;place-items:center}
.opt.radio .box{border-radius:50%}
.opt .price{margin-left:auto;font-size:12px;color:var(--t-50)}
.opt[aria-pressed=true]{border-color:rgba(24,139,246,.75);background:rgba(24,139,246,.1);color:#fff}
.opt[aria-pressed=true] .box{background:var(--accent);border-color:var(--accent)}
.opt[aria-pressed=true] .box::after{content:"";width:7px;height:4px;border-left:2px solid #fff;border-bottom:2px solid #fff;transform:translateY(-1px) rotate(-45deg)}
.opt.radio[aria-pressed=true] .box::after{width:5px;height:5px;border:0;border-radius:50%;background:#fff;transform:none}
.states{grid-template-columns:repeat(auto-fill,minmax(52px,1fr));gap:6px}
.states .opt{min-height:36px;padding:6px 0;justify-content:center;font-size:12.5px;border-radius:10px}
.states .opt .box{display:none}
.days{grid-template-columns:repeat(7,1fr);gap:6px}
.days .opt{justify-content:center;padding:8px 0;font-size:12.5px;border-radius:10px;min-height:38px}
.days .opt .box{display:none}

/* buttons */
.actions{display:flex;align-items:center;gap:12px;margin-top:30px}
.btn{appearance:none;flex:1;height:48px;display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;border-radius:999px;background:#fff;color:#000;font-size:15px;font-weight:500;cursor:pointer;text-decoration:none;box-shadow:0 0 40px rgba(10,118,227,.22);transition:transform .15s ease,background .15s ease,opacity .15s ease}
.btn:hover{background:#eef3ff}
.btn:active{transform:scale(.99)}
.btn[disabled]{opacity:.45;cursor:not-allowed}
.btn.blue{background:#0A76E3;color:#fff}
.btn.blue:hover{background:#1784f0}
.back{appearance:none;flex:none;width:48px;height:48px;border-radius:50%;border:0;background:var(--field);color:var(--t-65);cursor:pointer;display:grid;place-items:center}
.back:hover{background:var(--field-hover);color:#fff}
.note{text-align:center;font-size:11px;color:var(--t-35);margin:18px 0 0}
.err{color:var(--err);font-size:13px;text-align:center;margin:14px 0 0}

/* review */
.review{margin-top:36px;padding:16px 18px;border:1px solid var(--line);border-radius:16px;background:rgba(255,255,255,.03);font-size:13.5px;display:grid;gap:4px}
.review b{font-weight:500;color:#fff;font-size:14px}
.review span{color:var(--t-65)}
.agree{display:flex;gap:10px;align-items:flex-start;margin-top:18px;font-size:12px;line-height:1.55;color:var(--t-65);cursor:pointer}
.agree input{flex:none;width:15px;height:15px;margin:2px 0 0;accent-color:var(--accent)}
.agree a{color:#fff}

/* balance (plan-style cards) */
.plans-head{text-align:left}
.plans-head .eyebrow::before{display:none}
.plans-head h1{font-size:34px}
.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:28px}
@media (max-width:720px){.plans{grid-template-columns:1fr}}
.plan{appearance:none;text-align:left;color:#fff;background:rgba(255,255,255,.035);border:1px solid var(--line);border-radius:18px;padding:20px 18px 18px;cursor:pointer;display:flex;flex-direction:column;gap:6px;transition:border-color .15s ease,background .15s ease}
.plan:hover{border-color:var(--line-2)}
.plan[aria-pressed=true]{border-color:rgba(24,139,246,.8);background:rgba(24,139,246,.08)}
.plan .tag{font-size:9.5px;letter-spacing:2px;text-transform:uppercase;color:var(--t-50)}
.plan .name{font-size:17px;font-weight:500;margin-top:6px}
.plan .amt{font-size:34px;letter-spacing:-1px;font-weight:500;margin-top:6px}
.plan .amt small{font-size:13px;color:var(--t-50);font-weight:400;letter-spacing:0;margin-left:4px}
.plan .desc{font-size:12.5px;color:var(--t-50)}
.plan .pick{margin-top:14px;height:38px;border-radius:10px;display:grid;place-items:center;font-size:13px;background:rgba(255,255,255,.06);color:var(--t-80)}
.plan[aria-pressed=true] .pick{background:#0A76E3;color:#fff}
.custom-row{display:flex;align-items:center;gap:12px;margin-top:16px;font-size:13px;color:var(--t-65);flex-wrap:wrap}
.custom-row input{width:160px}
.billing-note{font-size:11.5px;color:var(--t-35);margin-top:14px}
.terms-box{margin-top:18px;padding:14px 16px;border:1px solid var(--line);border-radius:14px;background:rgba(255,255,255,.03)}
.terms-box .agree{margin-top:0}
.terms-box .fine{font-size:11px;color:var(--t-35);margin:6px 0 0 25px}
.total-row{display:flex;justify-content:space-between;font-size:14px;color:var(--t-80);margin-top:18px;padding:0 4px}
.total-row b{font-weight:500;color:#fff}

/* done */
.done-icon{width:52px;height:52px;margin:0 auto 6px;border-radius:14px;background:rgba(24,139,246,.12);border:1px solid rgba(24,139,246,.35);display:grid;place-items:center}
.steps{list-style:none;margin:34px 0 0;padding:0;display:grid;gap:14px}
.steps li{display:grid;grid-template-columns:28px 1fr;gap:12px;font-size:13.5px;color:var(--t-65)}
.steps li b{display:block;color:#fff;font-weight:500;font-size:14px}
.steps .n{width:28px;height:28px;border-radius:50%;background:var(--field);display:grid;place-items:center;font-size:12px;color:#fff}

/* email code */
.verify{max-width:360px;margin:0 auto;padding:30px 26px 22px;border:1px solid var(--line);border-radius:22px;background:rgba(255,255,255,.03);text-align:center}
.verify-icon{width:48px;height:48px;margin:0 auto 16px;border-radius:50%;background:rgba(24,139,246,.12);border:1px solid rgba(24,139,246,.3);display:grid;place-items:center}
.verify h1{font-weight:400;font-size:26px;letter-spacing:-.6px;margin:0}
.verify p{font-size:13px;color:var(--t-50);margin:8px 0 0;line-height:1.5}
.verify p b{color:#fff;font-weight:500}
.code{display:flex;justify-content:center;gap:8px;margin:24px 0 20px}
.code .digit{width:44px;height:52px;padding:0;text-align:center;font-size:22px;border-radius:12px;border:1px solid var(--line)}
@media (max-width:380px){.code{gap:6px}.code .digit{width:38px;height:48px}}
.verify .btn{width:100%}
.resend{font-size:12px!important;color:var(--t-35)!important;margin-top:16px!important}
.linkish{appearance:none;background:none;border:0;color:var(--t-50);font-size:12.5px;cursor:pointer;margin-top:10px;padding:4px}
.linkish:hover{color:#fff}
.linkish.inline{margin:0;padding:0;color:#fff;text-decoration:underline;font-size:12px}