/* Reuse the single WOFF2 preload instead of fetching a second hashed copy. */
@font-face { font-family: boxicons; font-weight: 400; font-style: normal; font-display: swap; src: url('../../theme/v6/vendor/boxicons/fonts/boxicons.woff2') format('woff2'); }
/* Scoped to the Digital Banking experiment. Artwork is original and transparent. */
.db-hero { isolation: isolate; background: radial-gradient(ellipse 55% 70% at 12% 5%, rgba(39,133,88,.15), transparent 72%), #0b0e0d; min-height: min(920px, 100svh); padding: 160px 0 80px; }
.db-hero::before { content: ''; position: absolute; z-index: -1; width: 65%; height: 80%; left: -18%; top: -24%; background: radial-gradient(ellipse, rgba(75,156,118,.08), transparent 65%); pointer-events: none; }
.db-hero .db-hero-layout { display: grid; grid-template-columns: 47% 53%; align-items: center; }
.db-hero .db-hero-copy { position: relative; z-index: 2; }
.db-hero .db-hero-copy h1 { font-size: clamp(2.5rem, 3.8vw, 3.7rem); line-height: 1.15; letter-spacing: -.035em; font-weight: 400; }
.db-hero .db-hero-copy p { max-width: 560px; font-size: 1.05rem !important; line-height: 1.75; }
.db-hero .db-hero-copy ul { font-size: .88rem !important; }
.db-hero-features { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 14px 24px; padding: 0; margin: 0; list-style: none; text-align: left; }
.db-hero-features li { display: flex; align-items: flex-start; gap: 10px; min-width: 0; line-height: 1.5; }
.db-hero-features li::before { content: ''; flex: 0 0 8px; width: 8px; height: 8px; margin-top: calc((1.5em - 8px) / 2); border: 1.5px solid #74bd9f; border-radius: 50%; }
.db-hero-features li span { min-width: 0; }

.db-hero-motion { position: relative; width: clamp(108%, calc(100vw - 760px), 125%); margin-left: 4%; aspect-ratio: 1440 / 1400; align-self: center; }
.db-hero-motion::before { content: ''; position: absolute; inset: 15% 5% 5%; background: radial-gradient(ellipse, rgba(116,215,173,.09), transparent 67%); pointer-events: none; }
.db-hero-art { display: block; position: relative; width: 100%; height: auto; aspect-ratio: 1440 / 1400; object-fit: contain; }
@media (max-width: 1199.98px) {
 .db-hero { min-height: auto; padding-top: 145px; }
 .db-hero .db-hero-copy h1 { font-size: 2.75rem; }
 .db-hero-motion { width: 108%; margin-left: 4%; }
}
@media (max-width: 991.98px) {
 .db-hero { padding: 120px 0 36px; }
 .db-hero .db-hero-layout { grid-template-columns: minmax(0, 1fr); }
 .db-hero .db-hero-copy { max-width: 680px; margin: auto; text-align: center; }
 .db-hero .db-hero-copy p { margin-left: auto; margin-right: auto; }
 .db-hero-features { max-width: 600px; margin-inline: auto; }
 .db-hero-motion { width: min(100%, 760px); margin: 12px auto 0; }
}
@media (max-width: 575.98px) {
 .db-hero { padding-top: 105px; }
 .db-hero .db-hero-copy h1 { font-size: 2.25rem; }
 .db-hero .db-hero-copy p { font-size: .98rem !important; }
 .db-hero .db-hero-copy .border-top { margin-top: 1.25rem !important; padding-top: 1rem !important; }
 .db-hero .db-hero-copy ul { font-size: .8rem !important; }
 .db-hero-features { grid-template-columns: minmax(0, 1fr); width: fit-content; max-width: 100%; gap: 12px; }
 .db-hero-motion { width: calc(100% + 32px); max-width: none; margin-left: -16px; }
}
/* Mobile frames the glass configuration above the primary app. */
@media (max-width: 575.98px) {
 .db-hero-motion { aspect-ratio: 1000 / 1800; overflow: hidden; }
 .db-hero-art { position: absolute; width: 100%; max-width: none; height: 100%; left: 0; top: 0; }
}

/* Responsive placement keeps one shared vector app, rather than duplicate devices. */
.db-art-admin--mobile { display: none; }
.db-art-device { transform: translate(770px, 65px) scale(1.36); }
.db-hero-art [data-layer] { transform-origin: 0 0; }
.db-hero-motion noscript img { display: block; width: 100%; height: auto; }
@media (max-width: 575.98px) {
 .db-art-admin--desktop { display: none; }
 .db-art-admin--mobile { display: inline; }
 .db-art-device { transform: translate(603.2px, 445px) scale(1.4); }
}

/* Each app view has its own HTML compositor layer. Static SVG device shadows stay outside. */
.db-phone-live { position: absolute; left: 53.472222%; top: 4.642857%; width: 40.044444%; height: 88.4%; border-radius: 12.264151% / 5.714286%; overflow: hidden; isolation: isolate; font-family: "Source Sans Pro", sans-serif; pointer-events: none; }
.db-phone-live [data-layer], .db-phone-live svg { position: absolute; inset: 0; width: 100%; height: 100%; transform-origin: 0 0; }
.db-phone-live svg { display: block; overflow: hidden; }
.db-phone-live [data-layer="context"], .db-phone-live [data-layer="payment"], .db-phone-live [data-layer="review"], .db-phone-live [data-layer="receipt"], .db-phone-live [data-layer="accounts"], .db-phone-live [data-layer="exchange"], .db-phone-live [data-layer="receive"] { will-change: transform; }
@media (max-width: 575.98px) {
 .db-phone-live { left: 20.32%; top: 24.722222%; width: 59.36%; height: 70.777778%; }
}