*{box-sizing:border-box}
:root{
  --blue:#064878;
  --dark:#444c54;
  --text:#111;
}
body{
  margin:0;
  font-family:Arial,Helvetica,sans-serif;
  background:#f1f1f1;
  color:var(--text);
}
a{color:#284b67}
.demo-banner{
  background:#fff2b3;
  border-bottom:1px solid #dec96f;
  text-align:center;
  padding:9px 12px;
  font-size:12px;
  font-weight:700;
  letter-spacing:.03em;
}
.page-shell{min-height:100vh}
.hidden{display:none!important}

/* Verify screen */
.verify-wrap{
  padding:62px 20px;
}
.verify-card{
  width:min(710px,100%);
  margin:0 auto;
  background:white;
  border:1px solid #c9c9c9;
  border-radius:7px;
  box-shadow:0 2px 5px rgba(0,0,0,.22);
  position:relative;
  padding-top:42px;
}
.security-header{
  position:absolute;
  left:4%;
  right:4%;
  top:-48px;
  height:90px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:white;
  box-shadow:0 4px 10px rgba(0,0,0,.22);
  border-radius:7px;
  font-size:28px;
  font-weight:700;
  color:#383838;
}
.security-header:before,.security-header:after{
  content:"";
  position:absolute;
  width:70px;
  height:14px;
  background:var(--blue);
  transform:rotate(-39deg);
}
.security-header:before{left:-13px;top:9px}
.security-header:after{right:-13px;bottom:9px}
.verify-content{padding:36px 32px 31px}
.verify-content h1{
  font-size:30px;
  font-weight:400;
  margin:0 0 34px;
}
.verify-content h2{
  font-size:23px;
  font-weight:400;
  margin:28px 0 18px;
}
.thin-line{height:1px;background:#ddd}
.verify-copy{
  line-height:1.55;
  color:#555;
  margin:17px 0 45px;
}
.sample-card,.dashboard-card{
  position:relative;
  background:
    radial-gradient(circle at 20% 30%,rgba(255,255,255,.75),transparent 1px) 0 0/8px 8px,
    linear-gradient(135deg,#d7d7d7,#b9bbbd);
  border-radius:6px;
  color:#303030;
  box-shadow:0 2px 7px rgba(0,0,0,.16);
}
.sample-card{
  width:300px;
  height:190px;
  margin:0 auto;
  padding:16px;
}
.small-brand{font-size:24px;font-weight:700;color:#234f92}
.small-sub{font-size:9px}
.sample-only{
  position:absolute;
  top:69px;
  left:44px;
  transform:rotate(-24deg);
  font-size:31px;
  font-weight:800;
  color:rgba(70,70,70,.31);
}
.card-line{
  margin-top:23px;
  font-size:14px;
  display:flex;
  gap:7px;
}
.card-line+.card-line{margin-top:12px}
.visa{
  position:absolute;
  right:15px;
  bottom:10px;
  font-size:29px;
  color:#1749a4;
  font-weight:900;
  font-style:italic;
}
form label{color:#6b6b6b}
.input-line{
  border-bottom:1px solid #c9c9c9;
  margin-top:5px;
}
.input-line input{
  width:100%;
  border:0;
  outline:none;
  padding:13px 4px;
  font-size:16px;
}
.primary{
  width:100%;
  border:0;
  border-radius:8px;
  margin-top:22px;
  padding:15px;
  background:var(--blue);
  color:white;
  font-size:14px;
  font-weight:700;
  cursor:pointer;
}
.primary:hover{filter:brightness(.92)}
.error{
  min-height:22px;
  color:#b00020;
  font-size:14px;
  padding-top:6px;
}
.token-box{
  margin-top:18px;
  padding:12px;
  background:#f7f7f7;
  border:1px solid #ddd;
  font-size:12px;
  text-align:center;
}
.token-box code{
  display:inline-block;
  margin:3px;
  padding:3px 6px;
  background:white;
  border:1px solid #d6d6d6;
}

/* dashboard */
.dashboard{
  width:100%;
  background:#eee;
  min-height:100vh;
}
.topbar{
  height:65px;
  background:var(--dark);
  color:#fff;
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:0 max(7vw,25px);
  font-size:13px;
}
.brand-row{
  width:min(930px,calc(100% - 30px));
  margin:0 auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:32px 0 64px;
}
.main-brand{
  font-size:58px;
  color:#3d444b;
  font-weight:300;
}
.main-brand span{color:#9ba5af}
.help{font-weight:700}
.content-card{
  width:min(930px,calc(100% - 30px));
  margin:0 auto 50px;
  background:#fff;
  padding:0 24px 35px;
}
.dark-rule{
  height:4px;
  background:#444c54;
}
.content-card>h1{
  margin:25px 0 16px;
  font-size:28px;
}
.manage-grid{
  display:grid;
  grid-template-columns:270px 1fr 130px;
  gap:28px;
  align-items:start;
}
.dashboard-card{
  width:240px;
  height:150px;
  padding:13px;
}
.dashboard-card .small-brand{font-size:18px}
.sample-only-small{
  top:57px;
  left:37px;
  font-size:22px;
}
.available-label{
  font-size:18px;
  font-weight:700;
}
.big-balance{
  font-size:44px;
  font-weight:700;
  color:#3a3a3a;
  margin:6px 0 18px;
}
.detail-line{line-height:1.45}
.detail-line a{margin-left:7px}
.full-card{
  margin:6px 0;
  padding:7px;
  background:#fff3c3;
  width:max-content;
  font-family:monospace;
}
.hidden-row{display:none}
.another-card{
  display:inline-block;
  margin-top:39px;
}
.print-link{
  padding-top:5px;
  font-size:14px;
  text-align:right;
}
.lower-rule{
  border-top:3px solid #46505a;
  margin-top:34px;
}
.content-card>p{font-size:14px}
.tab{
  margin-top:25px;
  width:193px;
  padding:11px 14px;
  color:#fff;
  background:#48545e;
  font-size:14px;
}
.balance-section h2,.transaction-section h2{
  font-size:19px;
  margin:25px 0 15px;
}
.summary-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  line-height:1.52;
  font-size:14px;
}
.summary-values{text-align:right;font-weight:700}
.transaction-section{
  border-top:5px solid #f0f0f0;
  margin-top:35px;
  padding-top:4px;
}
.transaction-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  font-size:13px;
}
.transaction-columns{
  display:flex;
  justify-content:space-between;
  padding-bottom:10px;
  border-bottom:1px solid #ddd;
  font-size:11px;
  font-weight:700;
  color:#999;
}
.transaction-row{
  display:flex;
  justify-content:space-between;
  border-bottom:1px solid #ddd;
  padding:13px 12px;
  line-height:1.45;
  font-size:13px;
}
.available-bottom{
  display:flex;
  justify-content:space-between;
  padding:23px 0;
  font-size:18px;
}
.fee-section{border-top:1px solid #ddd;padding-top:12px}
.fee-head,.fee-row{
  display:grid;
  grid-template-columns:1fr 1fr;
  font-size:11px;
}
.fee-head{padding:0 5px 10px}
.fee-row{
  width:62%;
  background:#eee;
  padding:12px 5px;
  line-height:1.5;
}
.demo-note{
  margin-top:28px;
  border:1px solid #dcc978;
  background:#fff6cc;
  padding:12px;
  font-size:12px;
  line-height:1.45;
}

@media(max-width:760px){
  .main-brand{font-size:39px}
  .brand-row{padding-bottom:35px}
  .manage-grid{grid-template-columns:1fr}
  .print-link{text-align:left}
  .fee-row{width:100%}
}