/* SecondFactor.ai — shared site chrome (header + footer).
   Loaded LAST on every page. This file is the single source of truth for the
   header/footer container width, spacing, colours and typography, so the home
   page (inline CSS) and inner pages (styles.css + motion.css) can't drift apart.
   Dropdown, burger and mobile-drawer mechanics stay in the page CSS (identical
   in both). */

/* ---- container geometry (shared by header, footer and footer bottom bar) ---- */
header.band .hd,footer.band .ft,footer.band .ftb{
  box-sizing:border-box!important;width:100%;max-width:1640px!important;margin:0 auto!important;
  padding-left:clamp(20px,4vw,80px)!important;padding-right:clamp(20px,4vw,80px)!important}

/* ---- header ---- */
header.band{position:sticky;top:0;z-index:60;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  background:rgba(247,250,255,.92)!important;border-bottom:1px solid rgba(31,36,80,.12)!important;color:#1f2450;transition:box-shadow .3s}
header.band.scrolled{box-shadow:0 14px 34px rgba(31,36,80,.12)}
header.band .hd{display:flex;align-items:center;flex-wrap:wrap;gap:30px!important;padding-top:10px!important;padding-bottom:10px!important}
header.band .navlinks{display:flex;align-items:center;gap:26px}
header.band .nav-a{font:400 14.5px/1 Sora,system-ui,sans-serif!important;letter-spacing:.01em!important;text-transform:none!important;color:rgba(31,36,80,.92)!important;transition:color .25s}
header.band .nav-a:hover,header.band .nav-a.on{color:#3078e8!important}
header.band .chdd-a{display:inline-flex;align-items:center;gap:6px}
header.band .chdd-a .caret{font-size:14px;opacity:.85;line-height:1}
header.band .hdcta{display:inline-flex;align-items:center;white-space:nowrap;padding:11px 20px;border:1px solid #3078e8;border-radius:0;
  background:#3078e8;color:#fff;font:400 14.5px/1 Sora,system-ui,sans-serif;letter-spacing:.06em;transition:background .2s,border-color .2s,transform .2s}
header.band .hdcta:hover{background:#2461c9;border-color:#2461c9;color:#fff;transform:translateY(-1px)}

/* ---- brand lockup (header + footer) ---- */
.brand{display:flex;align-items:center;gap:11px;color:#1f2450!important;text-decoration:none}
header.band .brand{margin-right:auto}
.brand-mk{width:32px;height:32px;display:grid;place-items:center;flex:none}
.brand-mk img{width:30px;height:30px;display:block}
.brand-tx{font:300 21px/1 Sora,system-ui,sans-serif;letter-spacing:.06em;color:#1f2450!important}
.brand-ac{color:#3078e8!important}
.brand-tld{opacity:.72}
footer.band .brand{gap:10px}
footer.band .brand-mk{width:26px;height:26px}
footer.band .brand-mk img{width:22px;height:22px}
footer.band .brand-tx{font-size:17px}

/* ---- footer ---- */
footer.band{position:relative;overflow:hidden;color:#1f2450!important;
  background:linear-gradient(165deg,#f4f8fe 0%,#dce8fb 48%,#cddff9 100%)!important;border-top:1px solid rgba(31,36,80,.12)}
footer.band:before{content:"";position:absolute;left:50%;top:-38%;width:clamp(680px,90vmax,1500px);aspect-ratio:1;transform:translateX(-50%);pointer-events:none;z-index:0;
  background:conic-gradient(from 210deg,transparent 0deg,rgba(48,120,232,.2) 48deg,rgba(48,120,232,.07) 105deg,transparent 165deg)!important;
  mask:radial-gradient(circle,transparent 63%,#000 64%,#000 65.5%,transparent 66.5%);
  -webkit-mask:radial-gradient(circle,transparent 63%,#000 64%,#000 65.5%,transparent 66.5%);
  animation:chromeSpin 38s linear infinite}
footer.band:after{content:"";position:absolute;left:50%;top:-8%;width:clamp(420px,60vmax,1000px);height:clamp(260px,40vmax,620px);transform:translateX(-50%);pointer-events:none;z-index:0;
  background:radial-gradient(50% 50% at 50% 50%,rgba(48,120,232,.12),transparent 70%)!important;animation:chromePulse 7s ease-in-out infinite}
footer.band > *{position:relative;z-index:2}
@keyframes chromeSpin{to{transform:translateX(-50%) rotate(360deg)}}
@keyframes chromePulse{0%,100%{opacity:.55}50%{opacity:1}}
footer.band .ft{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:40px;padding-top:clamp(44px,4.5vw,68px)!important;padding-bottom:30px!important}
footer.band .ft-brand p{font:300 14px/1.7 Sora,system-ui,sans-serif;color:rgba(31,36,80,.76)!important;margin:16px 0 0;max-width:32ch}
footer.band .ft-col{display:flex;flex-direction:column;gap:11px}
footer.band .nav-a{font:300 14.5px/1.3 Sora,system-ui,sans-serif!important;letter-spacing:.01em!important;text-transform:none!important;color:rgba(31,36,80,.78)!important;transition:color .2s}
footer.band .nav-a:hover{color:#3078e8!important}
footer.band .ft-social{display:inline-flex;width:17px}
footer.band .ft-social svg{display:block}
footer.band .ftb{display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;padding-top:20px!important;padding-bottom:46px!important;
  border-top:1px solid rgba(31,36,80,.12);font:300 13px/1.5 Sora,system-ui,sans-serif;color:rgba(31,36,80,.78)!important}
footer.band .ftb span{color:rgba(31,36,80,.78)!important}

/* ---- responsive ---- */
@media (max-width:1040px){
  header.band .hd{gap:16px!important;row-gap:10px!important}
  header.band .navlinks{gap:18px;order:3;width:100%}
  header.band .hdcta{order:2}
}
@media (max-width:860px){
  header.band .hd{flex-wrap:nowrap!important;gap:12px!important;padding:8px 20px!important}
  header.band .navlinks{order:initial;width:auto;align-items:stretch}
  header.band .signin{display:none}
  header.band .hdcta{padding:10px 16px;font-size:12px;order:2}
  header.band .burger{order:9;flex:none}
}
@media (max-width:420px){
  header.band .hdcta{display:none}
  header.band .signin{display:block;font-size:12px!important;white-space:nowrap;order:2}
}
@media (max-width:720px){
  footer.band .ft,footer.band .ftb{padding-left:20px!important;padding-right:20px!important}
  footer.band .ft{grid-template-columns:minmax(0,1fr);gap:28px}
  footer.band .ftb{padding-bottom:34px!important}
}
@media (max-width:480px){.brand-mk{width:28px;height:28px}.brand-mk img{width:26px;height:26px}.brand-tx{font-size:18px}}
@media (max-width:360px){.brand{gap:8px!important}.brand-mk{width:24px;height:24px}.brand-mk img{width:22px;height:22px}.brand-tx{font-size:16px}}
@media (prefers-reduced-motion:reduce){footer.band:before,footer.band:after{animation:none!important}}

/* ---- brand blue: small text uses the darker shade for AA contrast; buttons keep the logo blue ---- */
header.band .nav-a:hover,header.band .nav-a.on,footer.band .nav-a:hover{color:#2461c9!important}