/* Legacy Bank & Trust / LBT Bank & Trust rebrand splash.
   Desktop (>=1280px) and phone values come from the Figma Splash frames. */

@font-face { font-family: "Poppins"; font-weight: 400; font-style: normal; font-display: swap; src: url("fonts/poppins-400-latin.woff2?v=20261104") format("woff2"); }
@font-face { font-family: "Poppins"; font-weight: 600; font-style: normal; font-display: swap; src: url("fonts/poppins-600-latin.woff2?v=20261104") format("woff2"); }
@font-face { font-family: "Inter"; font-weight: 100 900; font-style: normal; font-display: swap; src: url("fonts/inter-latin-wght-normal.woff2?v=20261104") format("woff2"); }

:root {
  --ink: #425466;
  --ink-eyebrow: #435466;
  --ink-heading: #0e4570;
  --link: #005a8b;
  --pill: #eeeeee;
  --cta: #fcca0b;
  --cta-hover: #eebd00;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: #fff; color: var(--ink); font: 400 16px/25px "Inter", system-ui, -apple-system, "Segoe UI", sans-serif; }
img { display: block; }

.splash { position: relative; min-height: 100vh; overflow: hidden; background: #fff; }

/* Arrow: 663x828 at the 1440 frame, 200x250 at the 390 frame. The image is cropped to 97% of its height, as in Figma, to drop its faint bottom edge. */
.arrow { position: absolute; top: 0; right: 0; width: clamp(200px, 46.04vw, 900px); aspect-ratio: 663 / 828; overflow: hidden; }
.arrow img { width: 100%; height: 103.09%; max-width: none; }

.content { position: relative; display: flex; flex-direction: column; align-items: center; gap: 36px; padding: 43px 16px 72px; }

.eyebrow { margin: 0; padding: 8.8px 13.6px; border-radius: 9.6px; background: var(--pill); color: var(--ink-eyebrow); font: 400 16px/24px "Poppins", system-ui, sans-serif; }

.lockup { display: flex; flex-direction: column; align-items: center; gap: 16px; margin: 0; font: 400 18px/27px "Poppins", system-ui, sans-serif; color: var(--ink); }
.lockup-old { width: 270px; height: auto; }
.lockup-new { width: 196px; height: auto; }

.notice { width: 100%; max-width: 720px; display: flex; flex-direction: column; gap: 24px; }
.notice h2 { margin: 0; color: var(--ink-heading); font: 600 20px/24px "Poppins", system-ui, sans-serif; }
.notice p { margin: 0; text-wrap: pretty; }
.notice strong { font-weight: 600; }
.notice a { color: var(--link); text-decoration: underline; }

.badges { display: flex; flex-wrap: wrap; gap: 16px; }
.badge { display: block; height: 44px; border-radius: 6px; }
.badge-apple { width: 131.63px; }
.badge-apple img { width: 100%; height: 100%; }
/* Google's PNG carries its own transparent padding; clip to the badge artwork as in Figma rather than editing the file. */
.badge-google { position: relative; width: 147.71px; overflow: hidden; }
.badge-google img { position: absolute; left: -7.27%; top: -24.4%; width: 114.54%; height: 148.81%; max-width: none; }

.button { display: inline-block; padding: 12px 22px; border-radius: 8px; background: var(--cta); color: var(--ink-heading); font: 600 16px/20px "Poppins", system-ui, sans-serif; text-decoration: none; transition: background-color .15s ease; }
.button:hover { background: var(--cta-hover); }

a:focus-visible { outline: 3px solid var(--link); outline-offset: 3px; }

/* Manual breaks from the design: each set only applies at the column width it was written for. */
.br-wide, .br-phone { display: none; }
@media (min-width: 350px) and (max-width: 479px) { .br-phone { display: inline; } }
@media (min-width: 752px) { .br-wide { display: inline; } }

@media (min-width: 1280px) {
  .content { display: block; padding: 131px 0 72px; }
  .eyebrow { width: max-content; margin: 0 auto; padding: 11px 16.5px; border-radius: 12px; font-size: 20px; line-height: 30px; }
  .lockup { flex-direction: row; justify-content: center; gap: 28px; width: 711.45px; height: 112px; margin: 97px auto 0; font-size: 24px; line-height: 36px; }
  .lockup-old { width: 340px; }
  .lockup-new { width: 238.45px; }
  .notice { margin: 48px auto 0; width: 720px; }
  .button { display: block; width: max-content; margin: 36px auto 0; padding: 16px 32px; font-size: 20px; line-height: 30px; }
}

@media (prefers-reduced-motion: reduce) { .button { transition: none; } }