/* One turquoise-green panel colour across the SmartBank introduction and section headings. */
.smartbank-page { --smartbank-panel: #076575; }
.service-page.smartbank-page .related-heading { background: var(--smartbank-panel); }
.service-page .smartbank-hero-panel {
  min-width: 0;
  padding: clamp(22px, 2.6vw, 34px);
  border: 2px solid #5da6a4;
  border-left-width: 6px;
  border-radius: 18px;
  background: var(--smartbank-panel);
  color: #ffffff;
  box-shadow: 0 12px 30px #00000026;
}
.service-page .smartbank-hero-panel h1 { color: #ffffff; font-size: clamp(2.2rem, 3.7vw, 3.8rem); }
.service-page .smartbank-hero-panel h1 em { color: #fff1c0; }
.service-page .smartbank-hero-panel .lede { color: #f0f7fb; font-weight: 600; }
.service-page .smartbank-hero-panel .eyebrow { color: #d7edf5; }
.service-page .smartbank-hero-panel .breadcrumbs { color: #d7edf5; margin-bottom: 24px; }
.service-page .smartbank-hero-panel .breadcrumbs a { color: #fff1c0; font-weight: 700; }
.service-page .smartbank-hero-panel .smartbank-terms { color: #e2f1f2; font-weight: 600; line-height: 1.6; }
.service-page .smartbank-hero-panel .button-outline { background: #123f60; border-color: #123f60; color: #fff; }
.service-page .smartbank-hero-panel .button-outline:hover,
.service-page .smartbank-hero-panel .button-outline:focus-visible { background: #0b2942; border-color: #0b2942; }
.service-page .smartbank-hero-panel .button:focus-visible,
.service-page .smartbank-hero-panel .breadcrumbs a:focus-visible { outline: 3px solid #fff1c0; outline-offset: 4px; }
@media (max-width: 560px) {
  .service-page .smartbank-hero-panel { padding: 22px 18px; border-left-width: 4px; border-radius: 14px; }
  .service-page .smartbank-hero-panel .button-row { gap: 10px; }
  .service-page .smartbank-hero-panel .button { width: 100%; }
}

/* Preserve the full supplied workflow image without stretching or cropping. */
.service-page.smartbank-page .smartbank-landing-hero { gap: 28px; }
.service-page.smartbank-page .smartbank-workflow-figure { min-width: 0; padding: 14px; border: 2px solid #5da6a4; border-radius: 18px; background: #dceae1; color: #123047; }
.service-page .smartbank-workflow-figure > .smartbank-workflow-trigger { display: block; border-radius: 10px; }
.service-page .smartbank-workflow-figure .smartbank-workflow-image { display: block; width: 100%; height: auto; max-height: none; object-fit: contain; border-radius: 8px; }
.service-page .smartbank-workflow-figure figcaption { padding: 14px 4px 4px; font-size: 1rem; line-height: 1.45; text-align: center; }
.service-page .smartbank-workflow-figure figcaption strong { display: block; }
.service-page .smartbank-workflow-figure figcaption span { display: block; margin-top: 5px; font-size: .9rem; }
.service-page .smartbank-workflow-figure > .smartbank-workflow-trigger:focus-visible { outline: 3px solid #123f60; outline-offset: 4px; }

/* Native modal keeps the diagram on the current page and scales with the viewport. */
.service-page .smartbank-workflow-trigger { width: 100%; padding: 0; border: 0; background: transparent; cursor: zoom-in; }
.smartbank-workflow-dialog { box-sizing: border-box; width: min(94vw, 140dvh); max-width: none; max-height: 94dvh; margin: auto; padding: max(14px, 1vw); border: 2px solid #5da6a4; border-radius: 16px; background: #dceae1; color: #123047; box-shadow: 0 20px 80px #0007; overflow: auto; }
.smartbank-workflow-dialog::backdrop { background: #071a2bdd; }
.smartbank-workflow-dialog-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: max(10px, .6vw); }
.smartbank-workflow-dialog h2 { margin: 0; color: #123047; font-size: max(1.2rem, 1.4vw); line-height: 1.3; }
.smartbank-workflow-close { flex-shrink: 0; border: 0; border-radius: 8px; padding: max(10px, .5vw) max(16px, .8vw); color: #fff; background: #076575; font: inherit; font-size: max(1rem, 1.1vw); font-weight: 800; cursor: pointer; }
.smartbank-workflow-close:hover { background: #124e5b; }
.smartbank-workflow-close:focus-visible { outline: 3px solid #123f60; outline-offset: 3px; }
.smartbank-workflow-dialog > img { display: block; width: 100%; height: auto; max-height: 78dvh; object-fit: contain; border-radius: 8px; }
body.smartbank-lightbox-open { overflow: hidden; }