* { box-sizing: border-box; }
:root { color-scheme: light; font-family: "Segoe UI", system-ui, sans-serif; color: #183d34; background: #eeeae1; }
body { margin: 0; min-height: 100vh; display: grid; place-items: center; padding: 40px; background: radial-gradient(ellipse at 15% 15%, #d9e5dc, transparent 55%), #eeeae1; }
.bank-shell { width: min(1160px, 100%); display: grid; grid-template-columns: 1.08fr 1fr; min-height: 660px; border-radius: 28px; overflow: hidden; background: #fcfaf5; box-shadow: 0 26px 80px #12372f20; }
.bank-art { background: #082c29; color: #f5eddc; position: relative; display: flex; flex-direction: column; justify-content: space-between; padding: 38px; overflow: hidden; }
.wordmark { display: flex; align-items: center; gap: 12px; font-weight: 700; letter-spacing: .16em; font-size: 14px; z-index: 1; }
.atom { font-size: 35px; color: #c8e6ac; line-height: 1; }
.bank-art img { width: calc(100% + 76px); margin: 0 -38px; height: auto; object-fit: contain; }
.art-caption { font-size: 10px; letter-spacing: .18em; display: flex; align-items: center; gap: 10px; color: #c8d7c6; }
.status-dot { width: 7px; height: 7px; background: #d4d989; border-radius: 50%; box-shadow: 0 0 14px #d4d98970; }
.bank-welcome { padding: 78px 54px 34px; display: flex; flex-direction: column; align-items: flex-start; }
.eyebrow { color: #668478; font-size: 10px; font-weight: 700; letter-spacing: .2em; margin-bottom: 27px; }
h1 { font-family: Georgia, "Times New Roman", serif; font-weight: 400; font-size: clamp(38px, 4vw, 53px); line-height: 1.1; letter-spacing: -.045em; margin: 0 0 25px; }
h1 span { color: #246749; }
.intro { font-size: 18px; line-height: 1.6; margin: 0 0 18px; }
.description { color: #758077; font-size: 14px; line-height: 1.8; max-width: 350px; margin: 0 0 30px; }
.google-button { display: flex; align-items: center; justify-content: space-between; gap: 15px; width: 100%; padding: 17px 20px; border-radius: 10px; text-decoration: none; background: #194f3c; color: #fffdf5; font-size: 14px; font-weight: 600; box-shadow: 0 7px 18px #194f3c18; transition: background .15s, transform .15s; }
.google-button:hover { background: #22694e; transform: translateY(-2px); }
.google-button:focus-visible { outline: 3px solid #bb902e; outline-offset: 5px; }
.google-mark { display: grid; place-items: center; width: 24px; height: 24px; background: #fff; color: #245842; border-radius: 50%; font-size: 16px; font-weight: 800; }
.private-note { font-size: 11px; color: #7b897f; align-self: center; margin-top: 15px; }
.private-note span { margin-right: 5px; }
[role="alert"], .setup-note { border-radius: 8px; padding: 12px 16px; background: #efe7d2; color: #604c25; font-size: 14px; line-height: 1.5; }
.welcome-footer { width: 100%; margin-top: auto; padding-top: 38px; display: flex; justify-content: space-between; align-items: center; color: #819084; font-size: 9px; letter-spacing: .13em; }
.welcome-footer span:last-child { color: #b4934e; font-size: 24px; }
@media (max-width: 800px) { body { padding: 22px; } .bank-shell { grid-template-columns: 1fr; max-width: 530px; } .bank-art { padding: 25px; height: 330px; } .bank-art img { width: 100%; height: 235px; margin: -10px 0; object-fit: contain; } .wordmark { font-size: 11px; } .atom { font-size: 25px; } .art-caption { font-size: 8px; } .bank-welcome { padding: 38px 32px 25px; } .eyebrow { margin-bottom: 20px; } h1 { font-size: 42px; } .welcome-footer { padding-top: 20px; } }
@media (max-width: 380px) { body { padding: 12px; } .bank-welcome { padding: 30px 23px 22px; } h1 { font-size: 36px; } .bank-art { height: 290px; } .bank-art img { height: 195px; } }
@media (prefers-reduced-motion: reduce) { .google-button { transition: none; } }