/* US Bank "Access Online" mock — shared styles. */
* { box-sizing: border-box; }
html, body {
  margin: 0;
  padding: 0;
  font-family: Arial, Helvetica, "Helvetica Neue", sans-serif;
  font-size: 14px;
  color: #1c1c1c;
  background: #ffffff;
}
a { color: #1b6ef3; text-decoration: none; cursor: pointer; }
a:hover { text-decoration: underline; }

:root {
  --usb-red: #d6001c;
  --navy: #00256b;
  --heading: #002d72;
  --link: #1b6ef3;
  --header-strip: #eef1fb;
  --footer: #1a1a4e;
  --btn: #1565c0;
  --btn-hover: #114a96;
  --subnav: #1466b8;
  --section-bar: #e6f0fb;
  --tbl-head: #e8edf3;
  --row-alt: #eaf4fb;
  --border: #c9d2de;
}

/* ---------- header ---------- */
.topbar {
  background: var(--header-strip);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 26px;
  border-bottom: 1px solid #dfe5f2;
}
.brand { display: flex; align-items: center; gap: 14px; }
.logo {
  display: inline-flex;
  align-items: center;
  font-weight: 800;
  font-size: 22px;
  letter-spacing: -0.5px;
}
.logo .mark {
  background: var(--usb-red);
  color: #fff;
  padding: 2px 7px;
  border-radius: 4px;
  margin-right: 4px;
  font-style: italic;
}
.logo .word { color: var(--navy); }
.brand .product { color: var(--navy); font-size: 20px; font-weight: 400; }
.brand .product b { font-weight: 700; }
.topbar .right { display: flex; align-items: center; gap: 26px; font-size: 14px; }
.topbar .right .menu { color: #333; cursor: pointer; }
.topbar .right .logout { color: var(--link); font-weight: 700; }

/* ---------- nav ---------- */
.mainnav {
  background: #fff;
  border-bottom: 1px solid #e3e3e3;
  padding: 0 22px;
  display: flex;
  gap: 4px;
  position: relative;
  z-index: 50;
}
.navitem { position: relative; }
.navitem > a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 16px 14px;
  color: var(--link);
  font-weight: 600;
  border-bottom: 3px solid transparent;
}
.navitem > a .chev { font-size: 10px; }
.navitem.active > a { border-bottom-color: var(--link); }
.navitem:hover > a { text-decoration: none; }

/* dropdown panels */
.dropdown {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background: #fff;
  min-width: 230px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.18);
  border: 1px solid #e3e3e3;
  padding: 6px 0;
}
.navitem:hover > .dropdown { display: block; }
.dropdown .label { padding: 10px 18px; font-weight: 700; color: #1c1c1c; }
.dropdown a.item,
.dropdown .submenu > a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
  padding: 11px 18px;
  color: var(--link);
  font-weight: 600;
  white-space: nowrap;
}
.dropdown a.item:hover,
.dropdown .submenu:hover > a { background: #1f55e0; color: #fff; text-decoration: none; }

.submenu { position: relative; }
.submenu > .dropdown { top: 0; left: 100%; }
.submenu:hover > .dropdown { display: block; }
.submenu > a .arrow { font-size: 11px; }

/* ---------- page ---------- */
main { padding: 26px 30px 60px; min-width: 900px; }
h1.page { color: var(--heading); font-size: 26px; margin: 0 0 2px; }
h2.sub  { color: var(--heading); font-size: 18px; margin: 0 0 14px; font-weight: 700; }
.guide { color: var(--link); font-size: 13px; margin-left: 8px; white-space: nowrap; }
.guide::before { content: "\1F5E8  "; }

.muted { color: #444; }
.tiny { font-size: 12px; }
.note { color: #333; font-size: 13px; margin: 12px 0; max-width: 520px; }
.welcome-sub { color: var(--heading); font-weight: 700; font-size: 12px; margin: 2px 0 18px; }

/* card account box */
.acctbox {
  border: 2px solid #2f6cc4;
  background: #f4f9ff;
  padding: 10px 14px;
  font-size: 13px;
  max-width: 940px;
  position: relative;
}
.acctbox .switch { position: absolute; top: 10px; right: 14px; }
.acctbox b { font-weight: 700; }

/* blue subnav (Transaction Management / Order Maintenance) */
.subnav {
  background: var(--subnav);
  display: flex;
  gap: 0;
  max-width: 940px;
  margin-top: 4px;
}
.subnav a {
  color: #fff;
  padding: 9px 16px;
  border-right: 1px solid rgba(255,255,255,0.4);
  font-weight: 600;
}
.subnav a:hover { background: rgba(255,255,255,0.12); text-decoration: none; }
.subnav a.cur { font-weight: 800; }

/* section bar */
.secbar {
  background: var(--section-bar);
  padding: 7px 12px;
  font-weight: 700;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid #d4e2f3;
  margin-top: 18px;
}
.secbar .toggle { color: #555; margin-right: 6px; font-weight: 700; }
.secbar .links a { font-weight: 600; font-size: 13px; margin-left: 14px; }
.section { padding: 14px 4px; }

.infoline { color: var(--heading); font-weight: 700; margin: 18px 0; }
.infoline::before { content: "\2139  "; color: var(--link); }

/* generic two-column key/value */
.kv { display: grid; grid-template-columns: max-content 1fr; gap: 4px 18px; align-items: baseline; }
.kv .k { color: #1c1c1c; }
.kv .v { font-weight: 400; }

/* dashboard layout */
.dash-cols { display: flex; gap: 48px; flex-wrap: wrap; align-items: flex-start; }
.dash-acct { min-width: 420px; }
.dash-switch { min-width: 150px; }
.dash-links { min-width: 230px; }
.colhead { font-weight: 700; margin-bottom: 8px; }
.acct-rows { line-height: 1.75; }
.acct-rows .row { display: flex; gap: 10px; }
.acct-rows .row .k { min-width: 150px; color: #1c1c1c; }
.divline { border-top: 1px solid #d7d7d7; margin: 10px 0; max-width: 440px; }
.quicklinks a { display: block; margin-bottom: 7px; }
.infodot {
  display: inline-block; width: 15px; height: 15px; border-radius: 50%;
  border: 1px solid var(--link); color: var(--link); font-size: 10px; text-align: center;
  line-height: 14px; font-style: italic; font-weight: 700; vertical-align: middle;
}

/* buttons */
.btn {
  background: var(--btn);
  color: #fff;
  border: none;
  padding: 9px 16px;
  font-size: 14px;
  font-weight: 700;
  border-radius: 3px;
  cursor: pointer;
}
.btn:hover { background: var(--btn-hover); }
.btn.sm { padding: 6px 12px; font-size: 13px; }

/* tables */
table.grid { border-collapse: collapse; width: 100%; max-width: 1500px; font-size: 13px; }
table.grid th, table.grid td { padding: 7px 10px; text-align: left; vertical-align: top; }
table.grid thead th { background: var(--tbl-head); border-bottom: 1px solid var(--border); font-weight: 700; }
table.grid tbody tr:nth-child(even) { background: var(--row-alt); }
table.grid td.num, table.grid th.num { text-align: right; }
.cr { color: #1c1c1c; }

.lilinks { font-size: 13px; margin: 8px 0; }
.lilinks a { color: var(--link, #0c5a9e); text-decoration: underline; cursor: pointer; }
table.grid td.li-rm { white-space: nowrap; }
table.litotals { border-collapse: collapse; max-width: 1100px; width: 100%; font-size: 13px; margin-top: 10px; }
table.litotals td { padding: 3px 10px; }
table.litotals td.lab { text-align: right; width: 60%; }
table.litotals td.amt { text-align: right; width: 20%; }
table.litotals td.pct { text-align: right; width: 20%; }
table.litotals tr.rule td { border-top: 1px solid var(--border); padding-top: 8px; }

.titlebar { background: #ededed; padding: 7px 10px; font-weight: 700; max-width: 470px; }

/* forms */
.formsec { margin-top: 6px; }
.formsec h3 { font-size: 15px; margin: 16px 0 8px; }
.fgrid { display: grid; grid-template-columns: repeat(3, minmax(220px, 1fr)); gap: 12px 26px; max-width: 1200px; }
.field { display: flex; flex-direction: column; gap: 3px; }
.field label { font-weight: 700; font-size: 13px; }
.field label .req { color: var(--usb-red); }
.field input[type=text], .field input[type=date], .field select, .field textarea, input.inp, select.inp {
  border: 1px solid #767676; padding: 5px 6px; font-size: 13px; font-family: inherit;
}
.field.calc input { background: #eef2f7; }
textarea.box { width: 100%; max-width: 940px; height: 84px; border: 1px solid #767676; padding: 6px; font-family: inherit; }
.hr { border: none; border-top: 1px solid #6a3fb5; margin: 16px 0; max-width: 1200px; }
.reqnote { font-size: 13px; margin: 8px 0; }
.reqnote .req { color: var(--usb-red); }
.radios label { display: block; margin: 4px 0; }

/* order detail */
.ordersummary { display: flex; gap: 70px; flex-wrap: wrap; margin: 16px 0 4px; font-size: 13px; }
.ordersummary .acct-rows .row .k { font-weight: 700; }
.tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--border); margin-top: 14px; max-width: 1000px; }
.tabs .tab {
  padding: 7px 16px; background: #eef2f7; border: 1px solid var(--border);
  border-bottom: none; color: var(--link); font-weight: 600;
}
.tabs .tab.cur { background: #fff; color: #1c1c1c; font-weight: 700; }
.formsec .field span { font-size: 13px; }

/* match page */
.match-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; max-width: 1500px; }
.daterange { margin: 10px 0; }
.daterange .inp { width: 120px; }

/* footer */
footer.foot {
  background: var(--footer);
  color: #fff;
  padding: 26px 30px 60px;
  margin-top: 40px;
}
footer.foot a { color: #fff; display: block; margin-bottom: 14px; font-weight: 600; }
.helpfab {
  position: fixed; right: 22px; bottom: 18px;
  width: 38px; height: 38px; border-radius: 50%;
  background: #fff; border: 2px solid var(--footer); color: var(--footer);
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 18px;
}

/* login */
.login-wrap { display: flex; justify-content: center; padding: 60px 20px; }
.login-card {
  border: 1px solid #d7dde7; border-radius: 6px; padding: 30px 34px;
  width: 380px; box-shadow: 0 2px 10px rgba(0,0,0,0.06);
}
.login-card h1 { color: var(--heading); font-size: 22px; margin: 0 0 18px; }
.login-card .field { margin-bottom: 16px; }
.login-card input { width: 100%; }
.login-card .btn { width: 100%; }
.login-err { color: var(--usb-red); font-size: 13px; margin-bottom: 12px; }
.login-msg { color: #1c6b2e; font-size: 13px; margin-bottom: 12px; }
.login-hint { font-size: 12px; color: #666; margin-top: 18px; line-height: 1.5; }

/* "Sign in with Nexus" — the only way in. The mark is an alpha-knockout PNG used
   as a mask, so we can fill it any color (dark on the card, white on the button). */
.sso-mark {
  display: inline-block; width: 30px; height: 30px; flex: none;
  background: #1b2430;
  -webkit-mask: url(nexus-mark.png) center / contain no-repeat;
          mask: url(nexus-mark.png) center / contain no-repeat;
}
.sso-mark.sm { width: 20px; height: 20px; background: #fff; }
.sso-brand {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 0 18px; margin-bottom: 4px; border-bottom: 1px solid #edf0f4;
}
.sso-by { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: #8a93a0; }
.sso-name { font-size: 19px; font-weight: 800; color: #1b2430; line-height: 1.1; }
.sso-btn {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; margin-top: 18px; padding: 12px 16px;
  background: #1b2430; border: 1px solid #1b2430;
}
.sso-btn:hover { background: #28323f; }
.sso-btn:disabled { opacity: .65; cursor: default; }