/* Copyright 2026 LNB Federal Corporation. All rights reserved. */
/* Principal Developer: Laxmi Narayan Behera. */
/* LNB Federal brand frame shared by the Key Vault and the Payment Portal, copied from the homepage of
   https://www.lnbfederal.com: dark top strip with the U.S. flag and LNB Federal Corporation, white header with the
   LNB FEDERAL wordmark on one line, navy menu bar, navy title band with the line pattern, and the navy footer with the
   wordmark column, link columns, a #205493 hairline, centered bottom links and the centered copyright (owner,
   November 4, 2026: "The homepage is perfect for you to copy the header and footer design and apply wherever"). One
   source, internal/tools/brand/brand.css (with flag-us.svg), copied byte for byte into each application. */
.wrap { max-width: 1400px; margin: 0 auto; padding-left: 16px; padding-right: 16px; }
@media (min-width: 640px) { .wrap { padding-left: 24px; padding-right: 24px; } }
@media (min-width: 1024px) { .wrap { padding-left: 32px; padding-right: 32px; } }

/* Top strip */
.strip { background: #141414; color: #fff; font-size: 12px; }
@media (min-width: 640px) { .strip { font-size: 14px; } }
.strip-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; padding-top: 6px; padding-bottom: 6px; min-height: 40px; }
.strip-id { display: flex; align-items: center; gap: 12px; }
.strip-id img { width: 20px; height: 14px; display: block; flex: none; }
.strip-id b { font-weight: 700; }
.lang { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; }
.lang button { background: none; border: 0; color: #d1d5db; font: inherit; font-weight: 700; letter-spacing: .05em; padding: 4px 8px; min-height: 28px; cursor: pointer; }
.lang button:hover { color: #fff; }
.lang button[aria-pressed="true"] { background: #fff; color: #112e51; }
.lang .sep { color: #4b5563; }
.lang button:focus-visible, .strip a:focus-visible { outline: 2px solid #aebfd4; outline-offset: 2px; }
.strip .who { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; font-size: 12px; color: #d1d5db; }
@media (min-width: 640px) { .strip .who { font-size: 14px; } }
.strip .signout { color: #fff; font-weight: 700; text-decoration: none; }
.strip .signout:hover { text-decoration: underline; }

/* Header */
.top { background: #fff; border-bottom: 1px solid #e5e7eb; }
.top-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-top: 20px; padding-bottom: 20px; }
.wordmark { display: inline-block; padding: 4px; font-weight: 900; color: #112e51; font-size: 24px; letter-spacing: .08em; line-height: 1; white-space: nowrap; text-decoration: none; }
@media (min-width: 768px) { .wordmark { font-size: 30px; } }
.wordmark:focus-visible { outline: 4px solid #005ea2; outline-offset: 0; }

/* Menu bar */
.menu { background: #112e51; box-shadow: 0 4px 6px -1px rgba(0,0,0,.1), 0 2px 4px -2px rgba(0,0,0,.1); }
.menu-row { display: flex; overflow-x: auto; scrollbar-width: none; }
.menu-row::-webkit-scrollbar { display: none; }
.menu button { display: flex; align-items: center; gap: 4px; background: none; border: 0; border-bottom: 4px solid transparent; color: #fff; font: inherit; font-weight: 700; font-size: 12px; padding: 16px 8px 12px; cursor: pointer; white-space: nowrap; transition: background-color .15s; }
@media (min-width: 1280px) { .menu button { font-size: 13px; padding-left: 16px; padding-right: 16px; } }
.menu button[aria-selected="true"] { border-bottom-color: #fff; }
.menu button:hover, .menu button:focus-visible { background: #005ea2; outline: none; }
.menu button:focus-visible { box-shadow: inset 0 0 0 2px #fff; }

/* Title band */
.band { background: #112e51 url(/hero-lines.svg) center / cover no-repeat; color: #fff; padding: 48px 0; }
@media (min-width: 1024px) { .band { padding: 64px 0; } }
.band h1 { margin: 0; font-weight: 900; font-size: 30px; line-height: 1.1; letter-spacing: -0.025em; }
@media (min-width: 640px) { .band h1 { font-size: 36px; } }
@media (min-width: 1024px) { .band h1 { font-size: 48px; } }
.band .lede { margin: 20px 0 0; max-width: 768px; color: #e5e7eb; font-size: 18px; line-height: 1.625; }

/* Footer */
.foot { background: #112e51; color: #fff; padding-top: 40px; border-top: 1px solid rgba(255,255,255,.2); }
@media (min-width: 1024px) { .foot { padding-top: 56px; } }
.foot-grid { display: grid; grid-template-columns: 1fr; }
@media (min-width: 1024px) { .foot-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 40px; padding-bottom: 48px; border-bottom: 1px solid #205493; } }
.foot-brand { padding-bottom: 24px; border-bottom: 1px solid #205493; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
@media (min-width: 1024px) { .foot-brand { display: block; padding-bottom: 0; border-bottom: 0; } }
.foot-mark { display: block; color: #fff; font-weight: 900; font-size: 24px; letter-spacing: .08em; line-height: 1; white-space: nowrap; text-decoration: none; }
@media (min-width: 1024px) { .foot-mark { margin-bottom: 16px; } }
.foot-icons { display: flex; align-items: center; gap: 12px; }
@media (min-width: 1024px) { .foot-icons { margin-top: 24px; } }
.foot-icons a { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 9999px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); color: #d1d5db; transition: border-color .15s; }
@media (min-width: 1024px) { .foot-icons a { width: 36px; height: 36px; } }
.foot-icons a:hover { border-color: #aebfd4; }
.foot-icons svg { width: 16px; height: 16px; }
.foot-col { padding: 16px 0 20px; border-bottom: 1px solid #205493; }
@media (min-width: 1024px) { .foot-col { padding: 0; border-bottom: 0; } }
.foot-col h2 { margin: 0 0 12px; padding: 0; border: 0; font-size: 14px; font-weight: 700; color: #aebfd4; }
@media (min-width: 1024px) { .foot-col h2 { margin-bottom: 20px; } }
.foot-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; font-size: 14px; }
.foot-col a, .foot-links a { color: #d1d5db; text-decoration: none; }
.foot-col a:hover, .foot-col a:focus-visible, .foot-links a:hover, .foot-links a:focus-visible { color: #fff; text-decoration: underline; }
.foot a:focus-visible { outline: 2px solid #aebfd4; outline-offset: 2px; }
.foot-base { padding: 32px 0; display: flex; flex-direction: column; align-items: center; gap: 24px; font-size: 14px; color: #d1d5db; text-align: center; }
.foot-links { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 24px; margin: 0; padding: 0; }
.foot-note { margin: 0; color: #d1d5db; }
.foot .copy { margin: 0; color: #9ca3af; }