/* ==========================================================================
   Deposit limits — masthead
   ========================================================================== */
.dl-masthead__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  height: 240px;
  padding-block: 48px;
}
.dl-masthead__lead { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.dl-meta { display: flex; align-items: center; gap: 12px; color: var(--c-text); font: 700 11px/14px var(--f-sans); }
.dl-meta::after { content: ''; flex: 0 0 120px; height: 1px; background: var(--c-line-2); }
.dl-masthead__titles { display: flex; flex-direction: column; gap: 4px; }
.dl-masthead__over { color: var(--c-accent); font: 700 10px/13px var(--f-sans); }
.dl-masthead__title { font: 700 72px/64px var(--f-narrow); text-transform: uppercase; }
.dl-masthead__title span { display: block; }
.dl-masthead__aside { flex: 0 0 380px; display: flex; flex-direction: column; align-items: flex-end; gap: 16px; }
.dl-masthead__texts { display: flex; flex-direction: column; gap: 8px; text-align: right; }
.dl-masthead__copy { color: var(--c-text); font: 400 15px/22px var(--f-sans); }
.dl-masthead__sub { color: #666; font: 400 14px/20px var(--f-sans); }
.dl-masthead__crumb { color: var(--c-gray-2); font: 700 10px/13px var(--f-sans); }

/* ==========================================================================
   Workspace: limit panel + support rail
   ========================================================================== */
.dl-workspace__inner { display: flex; align-items: flex-start; gap: 40px; padding-block: 0 64px; }

.dl-panel {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 39px;
  border: 1px solid var(--c-line-2);
  border-radius: 4px;
  background: var(--c-white);
}
.dl-panel__head { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.dl-panel__title { color: var(--c-text); font: 700 11px/14px var(--f-sans); }
.dl-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 7px;
  border: 1px solid var(--c-line-2);
  border-radius: 12px;
  color: var(--c-text);
  font: 700 10px/13px var(--f-sans);
  white-space: nowrap;
}
.dl-badge__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--c-success); box-shadow: 0 0 0 0 rgba(16, 185, 129, .45); animation: dl-pulse 2.4s ease-out infinite; }
@keyframes dl-pulse {
  0% { box-shadow: 0 0 0 0 rgba(16, 185, 129, .45); }
  70%, 100% { box-shadow: 0 0 0 6px rgba(16, 185, 129, 0); }
}
.dl-panel__sub { color: #666; font: 400 13px/17px var(--f-sans); }
.dl-rule { height: 1px; margin-bottom: -1px; background: var(--c-line-2); }

.dl-limit { display: flex; flex-direction: column; gap: 8px; }
.dl-limit__label { color: var(--c-gray-2); font: 700 10px/13px var(--f-sans); }
.dl-limit__row { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.dl-limit__currency { color: var(--c-text); font: 500 18px/23px var(--f-sans); }
.dl-limit__amount { color: var(--c-ink); font: 700 96px/88px var(--f-narrow); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.dl-limit__amount.is-updated { animation: dl-bump .5s var(--ease); }
@keyframes dl-bump { 0% { opacity: .2; transform: translateY(8px); } 100% { opacity: 1; transform: none; } }
.dl-limit__period { color: var(--c-ink); font: 700 14px/18px var(--f-sans); }

.dl-panel__text { color: var(--c-text); font: 400 13px/21px var(--f-sans); }

.dl-change { align-self: flex-start; width: 200px; height: 45px; padding: 0 16px; }

/* Pending / confirmation notice */
.dl-notice {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 14px 16px;
  background: var(--c-paper);
  box-shadow: inset 4px 0 0 var(--c-accent);
  animation: dl-in .35s var(--ease);
}
.dl-notice--success { box-shadow: inset 4px 0 0 var(--c-success); }
.dl-notice__icon { margin-top: 2px; color: var(--c-accent); }
.dl-notice--success .dl-notice__icon { color: var(--c-success); }
.dl-notice__body { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-width: 0; }
.dl-notice__title { color: var(--c-ink); font: 700 11px/14px var(--f-sans); }
.dl-notice__text { color: var(--c-text); font: 400 13px/19px var(--f-sans); }
.dl-notice__action { margin-top: 4px; color: var(--c-accent); font: 700 11px/14px var(--f-sans); transition: color .2s var(--ease); }
.dl-notice__action:hover { color: var(--c-ink); }
@keyframes dl-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

/* Inline editor */
.dl-editor {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 23px;
  border: 1px solid var(--c-line-2);
  border-radius: 2px;
  background: #FAFAF8;
  animation: dl-in .35s var(--ease);
}
.dl-editor__title { color: var(--c-ink); font: 700 11px/14px var(--f-sans); }
.dl-editor__fields { display: flex; gap: 16px; }
.dl-field { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.dl-field--amount { flex: 1 1 auto; }
.dl-field--period { flex: 0 0 200px; }
.dl-field__label { color: var(--c-ink); font: 700 11px/14px var(--f-sans); }
.dl-field__control {
  position: relative;
  display: flex;
  align-items: center;
  height: 52px;
  border: 1px solid var(--c-line-2);
  border-radius: 2px;
  background: var(--c-white);
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.dl-field__control:focus-within { border-color: var(--c-accent); box-shadow: inset 0 0 0 1px var(--c-accent); }
.dl-field__control.has-error { border-color: #C0392B; box-shadow: inset 0 0 0 1px #C0392B; }
.dl-field__prefix { padding-left: 15px; color: var(--c-text); font: 500 15px/20px var(--f-sans); }
.dl-field__input {
  flex: 1 1 auto;
  min-width: 0;
  width: 100%;
  height: 100%;
  padding: 0 15px 0 8px;
  border: 0;
  border-radius: 2px;
  background: transparent;
  color: var(--c-ink);
  font: 700 20px/26px var(--f-sans);
  -webkit-appearance: none;
  appearance: none;
}
.dl-field__input:focus { outline: none; }
.dl-field__select { padding: 0 40px 0 15px; font: 400 15px/20px var(--f-sans); cursor: pointer; }
.dl-field__chevron { position: absolute; top: 50%; right: 16px; margin-top: -7px; color: var(--c-text); pointer-events: none; }
.dl-field__hint { color: var(--c-gray-2); font: 400 12px/16px var(--f-sans); }
.dl-editor__preview { color: var(--c-text); font: 400 13px/19px var(--f-sans); }
.dl-editor__preview.is-increase { color: #9A4A12; }
.dl-editor__error { color: #C0392B; font: 600 13px/18px var(--f-sans); }
.dl-editor__actions { display: flex; flex-wrap: wrap; gap: 12px; }
.dl-editor__btn { min-width: 140px; height: 45px; padding: 0 20px; }

/* Rail */
.dl-rail { flex: 0 0 380px; display: flex; flex-direction: column; gap: 24px; }
.dl-rail__title { font: 700 22px/22px var(--f-narrow); text-transform: uppercase; }
.dl-rail__title span { display: block; }
.dl-card {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 19px;
  border: 1px solid var(--c-line-2);
  border-radius: 2px;
  background: var(--c-white);
}
.dl-card__label { color: var(--c-accent); font: 700 10px/13px var(--f-sans); }
.dl-card__text { color: var(--c-text); font: 400 13px/18px var(--f-sans); }
.dl-card__links { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.dl-card__links li { display: flex; }
.dl-card__link { color: var(--c-accent); font: 700 11px/14px var(--f-sans); white-space: nowrap; transition: color .2s var(--ease); }
.dl-card__link--lead { font-size: 12px; line-height: 16px; }
.dl-card__link--solo { align-self: flex-start; }
.dl-card__link:hover { color: var(--c-ink); }
.dl-card__help { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.dl-card__heading { color: var(--c-ink); font: 700 12px/16px var(--f-sans); }
.dl-card__phone { color: var(--c-ink); font: 700 22px/30px var(--f-narrow); transition: color .2s var(--ease); }
.dl-card__phone:hover { color: var(--c-accent); }
.dl-card__note { color: var(--c-gray-2); font: 400 11px/14px var(--f-sans); }

/* ==========================================================================
   How it works (dark)
   ========================================================================== */
.dl-how { background: var(--c-ink); color: var(--c-white); }
.dl-how__inner { --pad-x: 60px; display: flex; flex-direction: column; gap: 40px; padding-block: 48px; }
.dl-how__head { display: flex; flex-direction: column; gap: 8px; }
.dl-how__eyebrow { color: var(--c-accent); font: 800 10px/13px var(--f-sans); }
.dl-how__title { font: 700 36px/40px var(--f-narrow); text-transform: uppercase; }
.dl-how__title span { display: block; }
.dl-steps { display: flex; align-items: center; gap: 68px; }
.dl-step { position: relative; flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.dl-step__num { color: var(--c-accent); font: 700 48px/65px var(--f-narrow); }
.dl-step__title { font: 700 16px/22px var(--f-narrow); }
.dl-step__text { color: var(--c-gray-2); font: 400 13px/20px var(--f-sans); }
.dl-step__note { margin-top: -4px; padding: 4px 0 4px 12px; box-shadow: inset 4px 0 0 var(--c-accent); font: 700 13px/18px var(--f-sans); }
.dl-step__arrow { position: absolute; top: calc(50% + 2px); right: -44px; color: #333; }

/* ==========================================================================
   Tablet
   ========================================================================== */
@media (max-width: 1199.98px) {
  .dl-rail { flex-basis: 320px; }
  .dl-how__inner { --pad-x: 40px; }
  .dl-steps { gap: 48px; }
  .dl-step__arrow { right: -34px; }
  .dl-editor__fields { flex-wrap: wrap; }
  .dl-field--amount { flex-basis: 220px; }
  .dl-field--period { flex: 1 1 160px; }
}

@media (max-width: 1023.98px) {
  .dl-masthead__aside { flex-basis: 300px; }
  .dl-masthead__title { font-size: 64px; line-height: 58px; }
  .dl-workspace__inner { flex-direction: column; align-items: stretch; }
  .dl-rail { flex-basis: auto; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; gap: 20px; }
  .dl-rail__title { grid-column: 1 / -1; }
  .dl-card__link { white-space: normal; }

  .dl-steps { flex-direction: column; align-items: stretch; gap: 0; }
  .dl-step { gap: 12px; padding: 20px 0; }
  .dl-step + .dl-step { box-shadow: inset 0 1px 0 #333; }
  .dl-step__arrow { display: none; }
}

/* ==========================================================================
   Mobile
   ========================================================================== */
@media (max-width: 767.98px) {
  .dl-masthead,
  .dl-workspace,
  .dl-how__inner { --pad-x: 16px; }

  .dl-masthead__inner { flex-direction: column; align-items: stretch; gap: 20px; height: auto; padding-block: 32px; }
  .dl-masthead__lead { gap: 20px; }
  .dl-meta { font-size: 10px; line-height: 13px; }
  .dl-meta::after { flex: 1 1 auto; }
  .dl-masthead__titles { gap: 8px; }
  .dl-masthead__title { font-size: 56px; line-height: 52px; }
  .dl-masthead__aside { flex-basis: auto; align-items: flex-start; gap: 20px; }
  .dl-masthead__texts { gap: 12px; text-align: left; }
  .dl-masthead__sub { font-size: 13px; line-height: 18px; }
  .dl-masthead__crumb { color: var(--c-text); font-size: 9px; line-height: 12px; }

  .dl-workspace__inner { gap: 32px; padding-block: 0 40px; }
  .dl-panel { gap: 20px; padding: 19px; border-color: #E0DDD8; }
  .dl-panel__title { font-size: 10px; line-height: 13px; }
  .dl-badge { border-color: var(--c-success); font-size: 9px; line-height: 12px; }
  .dl-panel__sub { line-height: 18px; }
  .dl-rule { background: #E0DDD8; }
  .dl-limit { gap: 20px; }
  .dl-limit__label { margin-bottom: -14px; }
  .dl-limit__amount { font-size: 72px; line-height: 64px; }
  .dl-panel__text { line-height: 20px; }
  .dl-change { width: 170px; height: 48px; }

  .dl-editor { padding: 15px; }
  .dl-editor__fields { flex-direction: column; }
  .dl-field--amount,
  .dl-field--period { flex: none; }
  .dl-editor__btn { flex: 1 1 0; min-width: 0; }

  .dl-rail { display: flex; align-items: stretch; gap: 20px; }
  .dl-rail__title { font-size: 28px; line-height: 32px; }
  .dl-card__links { gap: 10px; }
  .dl-card__link { line-height: 16px; }
  .dl-card__link--lead { font-size: 13px; line-height: 18px; }
  .dl-card__help { gap: 6px; }
  .dl-card__note { color: var(--c-text); line-height: 16px; }

  .dl-how__inner { gap: 24px; padding-block: 40px; }
  .dl-how__eyebrow { font-weight: 700; }
  .dl-how__title { font-size: 32px; line-height: 36px; }
  .dl-step__num { line-height: 40px; }
  .dl-step__text { line-height: 18px; }
  .dl-step__note { margin-top: 0; line-height: 17px; }
}