:root {
  --ink: #0B0F14;
  --brand: #0066FF;
  --brand2: #004DCC;
  --accent: #FFB020;
  --bg: #F3F5F8;
  --shadow: 0 16px 48px rgba(11, 15, 20, .09);
}

.topbar,
.public-header {
  min-height: 78px;
  height: auto;
  background: #0B0F14;
  border-bottom: 2px solid rgba(255, 176, 32, .85);
  color: #FFF;
}

.brand,
.escone-brand,
.brand-lockup {
  display: inline-flex;
  align-items: center;
}

.brand-lockup { gap: 14px; }
.brand { letter-spacing: 0; }
.escone-brand { gap: 10px; }
.escone-brand > img { width: 42px; height: 42px; object-fit: contain; }
.escone-wordmark { display: grid; line-height: 1; color: #FFF; }
.escone-wordmark > span { font-size: 21px; font-weight: 300; letter-spacing: .05em; white-space: nowrap; }
.escone-wordmark strong { font-weight: 900; }
.escone-wordmark small { margin-top: 6px; font-size: 7px; font-weight: 800; letter-spacing: .32em; white-space: nowrap; }
.escone-wordmark i { color: #FFB020; font-style: normal; }

.topbar nav { color: rgba(255,255,255,.82); }
.topbar nav > a:hover { color: #FFF; }
.topbar .org { color: rgba(255,255,255,.58); border-color: rgba(255,255,255,.2); }
.topbar .link { color: #FFB020; }
.topbar .button.small { background: #FFB020; border-color: #FFB020; color: #0B0F14; }
.topbar .button.small:hover { background: #FFC65C; border-color: #FFC65C; }
.company-mark { border: 1px solid rgba(255,255,255,.28); }

.eyebrow { color: #0066FF; }
.page-heading .eyebrow::before,
.hero .eyebrow::before { content: ''; display: inline-block; width: 24px; height: 3px; margin: 0 9px 3px 0; background: #FFB020; border-radius: 2px; }
.button.primary { background: #0066FF; border-color: #0066FF; }
.button.primary:hover { background: #004DCC; border-color: #004DCC; }
input:focus,
select:focus,
textarea:focus { outline: 3px solid rgba(0,102,255,.16); border-color: #0066FF; }

.public-page { background: radial-gradient(circle at 50% 0, rgba(0,102,255,.16), transparent 38%), #F3F5F8; }
.auth-card { border-top: 4px solid #0066FF; }
.login-brands { min-height: 76px; }
.login-brands .escone-brand > img { width: 64px; height: 64px; }
.login-brands .escone-wordmark > span { color: #0B0F14; font-size: 29px; }
.login-brands .escone-wordmark small { color: #0B0F14; font-size: 8px; }
.brand-divider { width: 1px; height: 58px; background: #D8DEE8; }

.module-card.active { position: relative; overflow: hidden; }
.module-card.active::before { content: ''; position: absolute; inset: 0 auto 0 0; width: 4px; background: linear-gradient(#0066FF 0 70%, #FFB020 70%); }
.module-card.active:hover { border-color: rgba(0,102,255,.45); }
.maintenance-banner { background: #FFF6E3; border-color: rgba(255,176,32,.55); color: #5C4105; }

footer { display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; background: #0B0F14; color: rgba(255,255,255,.72); border-top: 2px solid #0066FF; }
footer strong { color: #FFF; letter-spacing: .06em; }
footer span { color: #FFB020; font-size: 10px; font-weight: 800; letter-spacing: .2em; }
footer small { width: 100%; }

@media(max-width: 760px) {
  .topbar, .public-header { min-height: 68px; }
  .escone-brand > img { width: 36px; height: 36px; }
  .escone-wordmark > span { font-size: 18px; }
  .escone-wordmark small { display: none; }
  .login-brands .escone-wordmark small { display: block; }
  .company-mark { width: 34px; height: 34px; }
}