:root{
  --bg:#181818;
  --text:#f6f6f2;
  --muted:#a6a6a1;
  --line:rgba(255,255,255,.13);
  --accent:var(--color-interactive-on-dark);
}

*{box-sizing:border-box}

html,body{
  margin:0;
  min-height:100%;
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-family-base);
  letter-spacing:var(--type-body-spacing);
}

a{color:inherit;text-decoration:none}

.profile{display:grid;align-items:center}
.profile-photo-frame{display:block;border-radius:50%;overflow:hidden}
.profile-photo{width:100%;height:100%;object-fit:cover;object-position:47% 38%;display:block;transform:scale(1.1)}
.profile-name{margin:0}

.hero{
  min-height:calc(100svh - 120px);
  width:min(1540px,calc(100% - 64px));
  margin:0 auto;
  padding:64px 0 40px;
  display:grid;
  grid-template-rows:auto minmax(330px,1fr);
  gap:64px;
}

.intro{display:block}

h1{
  max-width:1480px;
  margin:0;
  font-size:var(--type-h1-size);
  line-height:var(--type-h1-line);
  font-weight:var(--type-h1-weight);
  letter-spacing:var(--type-h1-spacing);
}

.summary{
  max-width:920px;
  margin:40px 0 0;
  color:var(--muted);
  font-size:var(--type-body-size);
  line-height:var(--type-body-line);
  font-weight:var(--type-body-weight);
  letter-spacing:var(--type-body-spacing);
}

.banking-summary-intro{color:var(--text)}

.visual{
  position:relative;
  min-height:330px;
  margin:0;
  border:1px solid var(--line);
  border-radius:20px;
  overflow:hidden;
  background:#f4f4f3;
}

.visual img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:left top;
}

.visual:after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.15);
}

.rms-case{width:min(1540px,calc(100% - 64px));margin:0 auto}
.rms-section{padding-bottom:40px}
.rms-media-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
.rms-figure{min-width:0;margin:0}

.rms-frame{
  overflow:hidden;
  border:1px solid var(--line);
  border-radius:20px;
  background:#f4f4f3;
}

.rms-frame img{display:block;width:100%;height:auto}
.banking-web-comparison--login{background:var(--color-banking-web-login-background)}
.banking-web-comparison--dashboard{background:var(--color-banking-web-dashboard-background)}
#web-before-after .banking-placeholder{background:inherit}
.rms-media-grid .rms-frame{aspect-ratio:1}
.rms-media-grid .rms-frame img{width:100%;height:100%;object-fit:cover;object-position:left top}

.rms-caption{
  margin:12px 0 8px;
  color:var(--muted);
  font-size:var(--type-body-size);
  line-height:var(--type-body-line);
  font-weight:var(--type-body-weight);
  letter-spacing:var(--type-body-spacing);
}

.rms-context-media{display:grid;gap:24px}
.rms-conclusion{padding-top:48px}
.rms-contact{padding-top:48px;border-top:1px solid var(--line)}

.banking-visual .banking-placeholder{height:100%}
.rms-frame .banking-placeholder{height:100%;min-height:0}

.banking-directions-visual{
  height:auto;
  aspect-ratio:auto;
  padding:32px;
  border:0;
  border-radius:20px;
  background:var(--color-banking-visual-direction);
}

.banking-directions-visual:after{display:none}

.banking-directions-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:48px;
  width:100%;
}

.banking-direction{min-width:0;margin:0}

.banking-direction-caption{
  margin:0 0 12px;
  color:var(--color-ink);
  font-size:var(--type-body-small-bold-size);
  line-height:var(--type-body-small-bold-line);
  font-weight:var(--type-body-small-bold-weight);
  letter-spacing:var(--type-body-small-bold-spacing);
}

.banking-directions-grid img{
  display:block;
  width:100%;
  height:auto;
  border:0;
  border-radius:0;
  box-shadow:none;
  outline:0;
  object-fit:contain;
}

@media(min-width:1200px){
  .hero{min-height:0;grid-template-rows:auto auto;align-content:start}
  .visual{min-height:0;aspect-ratio:5184/3123}
  .banking-directions-visual{aspect-ratio:auto}
  .banking-rollout-visual{aspect-ratio:16/9}
  .visual img{height:auto;object-fit:contain}
}

@media(max-width:1199px){
  .hero{min-height:0;width:min(100% - 36px,980px);padding-top:40px;grid-template-rows:auto auto;gap:40px}
  .summary{max-width:none;margin-top:32px}
  .visual{height:auto;min-height:0;max-height:none;aspect-ratio:5184/3123}
  .banking-directions-visual{aspect-ratio:auto}
  .banking-rollout-visual{aspect-ratio:16/9}
  .visual img{width:100%;max-width:100%;height:auto;object-fit:contain;object-position:left top}
  .rms-case{width:min(100% - 36px,980px)}
  .rms-media-grid{gap:16px}
  .rms-context-media{gap:16px}
  .rms-conclusion{padding-top:40px}
  .rms-contact{padding-top:40px}
  .banking-placeholder{padding:40px}
}

@media(max-width:767px){
  .hero{width:calc(100% - 28px);padding-top:32px;padding-bottom:24px;gap:32px}
  .summary{margin-top:24px}
  .visual{width:calc(100% + 28px);height:calc(113vw - 31px);margin-right:-14px;margin-left:-14px;padding:0 14px;border:0;border-radius:0;aspect-ratio:auto;overflow-x:auto;overflow-y:hidden;background:transparent;scroll-padding-inline:14px;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .banking-directions-visual{height:auto;min-height:0;padding:24px 14px;border-radius:20px;background:var(--color-banking-visual-direction)}
  .banking-rollout-visual{aspect-ratio:auto}
  .visual:after{display:none}
  .visual::-webkit-scrollbar{display:none}
  .visual img{width:auto;max-width:none;height:100%;border:1px solid var(--line);border-radius:20px;object-fit:contain}
  .banking-directions-grid{width:calc(151vw - 42px);min-width:680px;gap:24px}
  .banking-directions-grid img{width:100%;max-width:100%;height:auto;border:0;border-radius:0;object-fit:contain}
  .banking-visual .banking-placeholder{width:calc(151vw - 42px);min-width:680px;height:100%;padding:24px;border:1px solid var(--line);border-radius:20px}
  .rms-case{width:calc(100% - 28px)}
  .rms-media-grid{grid-template-columns:1fr;gap:40px}
  .rms-context-media{gap:40px}
  .rms-conclusion{padding-top:28px}
  .rms-contact{padding-top:28px}
  .banking-placeholder{padding:24px;gap:28px}
}