/* apply/app.css — StanzaX rental-application funnel (navy / amber / white). */
:root{
  --navy:#0a2562; --navy-2:#123080; --amber:#f5a200; --ink:#15213b; --ink-2:#3a4568;
  --ink-3:#5b6685; --line:#dfe4ee; --surface:#ffffff; --bg:#eef1f7; --ok:#067647;
  --err:#b42318; --radius:14px;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:var(--sans); color:var(--ink); background:var(--bg);
  -webkit-font-smoothing:antialiased; line-height:1.5; min-height:100vh;
}
.bg{
  position:fixed; inset:0; z-index:-1;
  background:radial-gradient(120% 80% at 50% -10%, #16307d 0%, #0a2562 45%, #071a49 100%);
}
.shell{max-width:600px; margin:0 auto; padding:26px 20px 40px; min-height:100vh; display:flex; flex-direction:column}
.brand{text-align:center; color:#fff; margin:8px 0 18px}
.brand-mark{font-size:30px; font-weight:800; letter-spacing:.02em}
.brand-kicker{font-size:12.5px; letter-spacing:.16em; text-transform:uppercase; color:#b9c6ee; margin-top:3px}

.steps{display:flex; gap:7px; justify-content:center; margin:0 0 16px}
.step-dot{width:8px; height:8px; border-radius:50%; background:#ffffff40; transition:background .2s,transform .2s}
.step-dot.on{background:var(--amber)}
.step-dot.done{background:#ffffffbb}

.stage{background:var(--surface); border-radius:var(--radius); box-shadow:0 18px 50px rgba(4,14,45,.28); padding:26px 24px; flex:1}
.card-title{font-size:21px; font-weight:750; margin:0 0 6px; letter-spacing:-.01em}
.card-sub{color:var(--ink-3); font-size:14px; margin:0 0 20px}

label.f{display:block; margin:0 0 14px}
label.f > span{display:block; font-size:12.5px; font-weight:650; color:var(--ink-2); margin:0 0 5px}
label.f .hint{font-weight:400; color:var(--ink-3)}
input[type=text],input[type=email],input[type=tel],input[type=date],input[type=number],textarea,select{
  width:100%; font:inherit; font-size:15px; padding:11px 13px; border:1.4px solid var(--line);
  border-radius:10px; background:#fff; color:var(--ink); transition:border-color .15s, box-shadow .15s;
}
input:focus,textarea:focus,select:focus{outline:none; border-color:var(--navy-2); box-shadow:0 0 0 3px #12308024}
textarea{resize:vertical; min-height:64px}
.row2{display:grid; grid-template-columns:1fr 1fr; gap:0 12px}
.row3{display:grid; grid-template-columns:1fr 1fr 1fr; gap:0 12px}
.row-addr{display:grid; grid-template-columns:1fr 90px; gap:0 12px}
@media(max-width:460px){.row2,.row3{grid-template-columns:1fr} .row-addr{grid-template-columns:1fr 76px}}

/* Group heading inside a step ("Where you live now", "Work & income") */
.subhead{display:flex; align-items:baseline; gap:8px; margin:20px 0 12px; padding-top:14px; border-top:1px solid var(--line)}
.subhead:first-child{margin-top:0; padding-top:0; border-top:none}
.subhead span{font-size:12px; font-weight:750; letter-spacing:.08em; text-transform:uppercase; color:var(--navy)}
.subhead i{font-style:normal; font-size:12px; color:var(--ink-3)}

/* YES / NO segmented control */
.ynrow{display:flex; align-items:center; gap:12px; margin:0 0 14px; flex-wrap:wrap}
.ynlab{font-size:12.5px; font-weight:650; color:var(--ink-2); flex:1; min-width:150px}
.yn{display:flex; gap:6px; flex:none}
.yn-b{font:inherit; font-size:14px; font-weight:650; min-width:62px; padding:9px 16px; cursor:pointer;
      border:1.4px solid var(--line); border-radius:10px; background:#fff; color:var(--ink-2);
      transition:background .15s, color .15s, border-color .15s}
.yn-b.on{background:var(--navy); border-color:var(--navy); color:#fff}
.sub-when{overflow:hidden; margin:0 0 4px}
.sub-when.hide{display:none}

/* Big two-option picker (co-applicant yes/no) */
.picker{display:flex; flex-direction:column; gap:10px; margin:0 0 4px}
.pick{display:block; width:100%; text-align:left; font:inherit; cursor:pointer; background:#fff;
      border:1.6px solid var(--line); border-radius:12px; padding:15px 17px; transition:border-color .15s, box-shadow .15s}
.pick:hover{border-color:var(--navy-2); box-shadow:0 0 0 3px #12308014}
.pick b{display:block; font-size:15.5px; color:var(--ink)}
.pick i{display:block; font-style:normal; font-size:13px; color:var(--ink-3); margin-top:2px}

/* Repeating-row card tag (occupant / reference number) */
.rowtag{font-size:11.5px; font-weight:750; letter-spacing:.06em; text-transform:uppercase;
        color:var(--ink-3); margin:0 0 10px}

/* Review recap above the signature */
.recap{border:1.4px solid var(--line); border-radius:11px; padding:4px 14px; margin:0 0 16px; background:#fbfcfe}
.recap-r{display:flex; gap:12px; justify-content:space-between; align-items:baseline;
         padding:9px 0; border-bottom:1px solid var(--line); font-size:13.5px}
.recap-r:last-child{border-bottom:none}
.recap-r span{color:var(--ink-3)}
.recap-r b{text-align:right; color:var(--ink)}

/* Typed e-signature */
input.sig{font-family:Georgia,"Times New Roman",serif; font-size:21px; font-style:italic;
          color:var(--navy); padding:12px 14px; letter-spacing:.01em}

.btnrow{margin:4px 0}

/* Property banner injected above the step dots on an agent-minted ?t= link */
.applying{margin:2px 0 16px; padding:10px 14px; border-radius:10px;
          border:1px solid rgba(255,255,255,.18); border-left:3px solid var(--amber);
          background:rgba(255,255,255,.08)}
.applying-k{display:block; font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:#b9c6ee}
.applying-v{display:block; font-size:14.5px; font-weight:650; color:#fff; margin-top:2px}
.applying-s{display:block; font-size:12.5px; color:#b9c6ee; margin-top:2px}

.check{display:flex; gap:11px; align-items:flex-start; padding:13px; border:1.4px solid var(--line); border-radius:11px; margin:0 0 12px; cursor:pointer}
.check input{margin-top:2px; width:18px; height:18px; flex:none; accent-color:var(--navy)}
.check .ctxt{font-size:13.5px; color:var(--ink-2)}

.refcard{border:1.4px solid var(--line); border-radius:11px; padding:14px; margin:0 0 12px; position:relative}
.refcard .rm{position:absolute; top:8px; right:10px; background:none; border:none; color:var(--ink-3); cursor:pointer; font-size:18px; line-height:1}

.actions{display:flex; gap:10px; margin-top:20px; align-items:center}
.btn{font:inherit; font-size:15px; font-weight:650; padding:12px 20px; border-radius:11px; border:1.6px solid transparent; cursor:pointer; transition:transform .05s, filter .15s}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--navy); color:#fff; border-color:var(--navy)}
.btn-primary:hover{filter:brightness(1.08)}
.btn-amber{background:var(--amber); color:#1a1200; border-color:var(--amber)}
.btn-ghost{background:#fff; color:var(--navy); border-color:var(--line)}
.btn-link{background:none; border:none; color:var(--ink-3); cursor:pointer; font:inherit; text-decoration:underline}
.spacer{flex:1}
.btn[disabled]{opacity:.55; cursor:default}

.note{background:#f6f8fc; border:1px solid var(--line); border-radius:10px; padding:12px 14px; font-size:13px; color:var(--ink-2); margin:0 0 16px}
.legal{font-size:12px; color:var(--ink-3); line-height:1.55; max-height:210px; overflow:auto; border:1px solid var(--line); border-radius:10px; padding:13px 15px; margin:0 0 14px; background:#fbfcfe}
.err-msg{color:var(--err); font-size:13px; margin:8px 0 0; min-height:18px}
.pill{display:inline-block; background:#eaf1ff; color:var(--navy); font-size:11.5px; font-weight:650; padding:3px 9px; border-radius:999px; margin:0 0 12px}

.done-ico{width:60px;height:60px;border-radius:50%;background:#e7f6ee;display:flex;align-items:center;justify-content:center;margin:0 auto 16px;font-size:30px}
.center{text-align:center}

.brand-foot{display:flex; gap:10px; justify-content:center; align-items:center; color:#9fb0e0; font-size:11.5px; margin-top:20px}
.dot-sep{opacity:.6}
.hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}