/* Base reset */
*,
*::before,
*::after{margin:0;padding:0;box-sizing:border-box;}
html,body{height:100%;font-family:'Open Sans',Arial,sans-serif;background:#0d1118;color:#222;}
a{color:#f06c3d;text-decoration:none;}a:hover{text-decoration:underline;}

/* ====== Header ====== */
.site-header{background:#1e242d;padding:0.85rem 0;}
.site-header .inner{width:92%;max-width:1400px;margin:0 auto;display:flex;align-items:center;gap:1.5rem;}
.logo{display:inline-flex;align-items:center;}
.ptsb-svg{height:32px;width:auto;}
.page-title{color:#fff;font-size:1.25rem;font-weight:600;flex:1;text-align:center;}

/* ====== Main ====== */
.hero{min-height:calc(100vh - 60px - 220px);background:radial-gradient(ellipse at center,rgba(255,255,255,0.06) 0%,rgba(255,255,255,0) 65%),#0d1118;padding:2rem 1rem 4rem;display:flex;flex-direction:column;align-items:center;text-align:center;}
.login-card{background:#fff7f5;border-radius:6px;padding:2rem 2.5rem;width:100%;max-width:560px;box-shadow:0 6px 18px rgba(0,0,0,0.25);text-align:left;}
.login-title{font-size:1.5rem;font-weight:700;margin-bottom:1.75rem;color:#222;}
.step{font-weight:600;font-size:1rem;color:#555;}
.login-form{display:flex;flex-direction:column;gap:1.25rem;}
.form-row label{font-weight:600;display:block;margin-bottom:0.35rem;}
.form-row label small{font-weight:400;display:block;font-size:0.75rem;color:#666;}
.login-form input{width:100%;padding:0.6rem 0.75rem;border:1px solid #ccc;border-radius:4px;font-size:1rem;}
.forgot-link{font-size:0.85rem;align-self:flex-start;}
.btn-continue{margin-top:1.25rem;align-self:flex-start;padding:0.65rem 1.75rem;border:none;border-radius:4px;background:#f06c3d;color:#fff;font-weight:700;font-size:1rem;cursor:pointer;transition:background-color .25s ease;}
.btn-continue:hover{background:#d95b2f;}
.info-columns{width:100%;max-width:900px;margin-top:2.5rem;display:grid;gap:1.5rem;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));}
.info-box{background:#fff;padding:1.75rem 2rem;border-radius:6px;box-shadow:0 6px 18px rgba(0,0,0,0.15);text-align:left;}
.info-box h3{font-size:1.25rem;font-weight:700;margin-bottom:1rem;}
.info-box.help h3{color:#222;}
.info-box.fraud h3{color:#d71921;}
.info-box ul{list-style-type:disc;padding-left:1.25rem;margin-bottom:1rem;}
.info-box li{margin-bottom:0.6rem;font-size:0.95rem;}
.contact{font-size:0.85rem;color:#444;}

/* ====== Footer ====== */
.site-footer{background:#fff;padding:2rem 1rem;}
.footer-inner{width:92%;max-width:1400px;margin:0 auto;display:flex;flex-wrap:wrap;gap:2.5rem;justify-content:space-between;}
.footer-col{flex:1 1 280px;max-width:380px;font-size:0.95rem;color:#333;line-height:1.45;}
.footer-heading{font-weight:700;font-size:1.1rem;margin:1rem 0 0.5rem;}
.footer-logo .ptsb-svg{height:38px;}
.icon-phone, .icon-help, .icon-location{margin-right:0.4rem;font-size:1rem;vertical-align:baseline;}
.site-footer a{color:#f06c3d;font-weight:600;}

/* ====== Responsive ====== */
@media (max-width:600px){
  .page-title{font-size:1rem;}
  .login-card{padding:1.5rem;}
  .footer-inner{gap:1.5rem;}
}


/* === Step 2 extras === */
.padlock-wrapper{
  display:flex;
  justify-content:center;
  margin-bottom:1rem;
}
.padlock{
  filter:drop-shadow(0 2px 4px rgba(0,0,0,.2));
}
.action-row{
  display:flex;
  justify-content:space-between;
  align-items:center;
}
.btn-cancel{
  background:#ccc;
  color:#000;
  padding:0.65rem 1.75rem;
  border-radius:4px;
  font-weight:700;
  font-size:1rem;
}
.btn-cancel:hover{background:#b3b3b3;}

/* === Success page === */
.hero-success{
  padding-top:3rem;
}
.success-card{
  background:#fff;
  border-radius:8px;
  padding:3rem 2.5rem 4rem;
  max-width:520px;
  width:100%;
  box-shadow:0 8px 22px rgba(0,0,0,0.25);
  text-align:center;
}
.success-card h2{
  font-size:1.6rem;
  margin:1.5rem 0 1rem;
  color:#0c8467;
}
.success-card p{
  font-size:1rem;
  margin-bottom:2rem;
}
.btn-home{
  display:inline-block;
  background:#f06c3d;
  color:#fff;
  padding:0.75rem 2rem;
  border-radius:4px;
  font-weight:700;
  font-size:1rem;
}
.btn-home:hover{background:#d95b2f;}


/* ==== Secure Notice Banner ==== */
.secure-banner{
  background:#fff;
  box-shadow:0 6px 18px rgba(0,0,0,0.15);
  width:100%;
  max-width:960px;
  margin:2rem auto 1.5rem;
  border-radius:6px;
  padding:1.75rem 2rem;
  text-align:left;
}
.secure-title{
  font-size:1.25rem;
  font-weight:700;
  color:#d71921;
  margin-bottom:0.75rem;
}
.secure-banner p{
  font-size:0.95rem;
  margin-bottom:0.6rem;
}
.secure-trust{
  margin-top:1rem;
  font-weight:600;
  color:#0c8467;
}