/* Deposit Limits page (frames deposit-limits-v2 1440 / deposit-limits-mobile 390).
 * Every number is a fig-spec value; line-heights are the rounded text boxes.
 * The 390 frame rewrites part of the copy: .dl-d shows on 1200+, .dl-m on the mobile branch. */

.dl-m { display: none; }
.dl-br-m { display: none; }

/* ── shared pieces ─────────────────────────────────────────────────────── */
.dl-eyebrow {
  display: inline-flex; align-items: center; gap: var(--space-8);
  font-family: var(--font-body); font-weight: 800; font-size: 11px; line-height: 12px;
  letter-spacing: 1.54px; color: var(--color-brand);
}
.dl-eyebrow::before { content: ""; width: 12px; height: 2px; background: currentColor; }
.dl-head { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-16); width: 760px; max-width: 100%; }
.dl-head__num { font-family: var(--font-display); font-weight: 900; font-size: 32px; line-height: 40px; color: var(--color-brand); }
.dl-head__title {
  font-family: var(--font-display); font-weight: 900; font-size: 42px; line-height: 52px;
  letter-spacing: -1.5px; color: var(--color-text-light);
}
.dl-head__lead { font-size: 16px; line-height: 26px; color: var(--color-muted-3); }
.dl-head--soft .dl-eyebrow { color: var(--color-brand-3); }
.dl-head--soft .dl-head__title { color: var(--color-text); }
.dl-sec--light .dl-head__title { color: var(--color-bg); }
.dl-sec--light .dl-eyebrow, .dl-sec--light .dl-head__num { color: var(--color-brand-ink); }   /* a11y: brand on the light sections */

.dl-sec { display: flex; flex-direction: column; gap: var(--space-48); padding: 80px var(--container-pad); background: var(--color-surface); color: var(--color-text); }
.dl-sec--deep { background: var(--color-bg); }
.dl-sec--light { background: var(--color-light); color: var(--color-ink); }
.dl-sec__note { font-size: 14px; line-height: 15px; color: var(--color-muted-3); }

/* a rotated 0-width LINE between columns; its length sets the row height */
.dl-vdiv { flex: 0 0 auto; width: 0; border-left: 1px solid var(--color-line-dark); }
.dl-vdiv--120 { height: 120px; }
.dl-vdiv--140 { height: 140px; }
.dl-vdiv--180 { height: 180px; }
.dl-vdiv--280 { height: 280px; border-color: rgba(11, 11, 16, .071); }

.dl-link {
  display: inline-flex; align-items: center; gap: var(--space-4); padding: 0; border: 0; background: none; cursor: pointer;
  font-family: var(--font-body); font-weight: 700; color: var(--color-brand); text-decoration: none;
  transition: color var(--dur-fast) var(--ease);
}
.dl-link:hover { text-decoration: underline; }
.dl-link--15 { font-size: 15px; line-height: 16px; }
.dl-link--16 { font-size: 16px; line-height: 17px; }
.dl-link--soft { color: var(--color-brand-3); }
.dl-link__arrow { display: none; }
.tap-target { position: relative; }
.tap-target::after { content: ""; position: absolute; inset: -4px 0; }

/* ── hero ──────────────────────────────────────────────────────────────── */
.dl-hero { position: relative; display: flex; align-items: center; min-height: 635px; padding: 80px max(120px, calc((100% - 1200px) / 2));   /* the frame draws 120px sides; wider screens centre the 1200 content like the rest */ background: var(--color-surface); overflow: hidden; }
.dl-hero__left { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-32); width: 800px; max-width: 100%; position: relative; z-index: 1; }
.dl-hero__stack { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-24); width: 760px; max-width: 100%; }
.dl-hero__title {
  font-family: var(--font-display); font-weight: 900; font-size: 72px; line-height: 76px;
  letter-spacing: -2.88px; color: var(--color-text-light);
}
.dl-hero__lead { font-size: 20px; line-height: 30px; font-weight: 500; color: #a1a8b5; }
.dl-hero__cta { display: flex; align-items: center; gap: var(--space-24); }
.dl-hero__btn {
  display: inline-flex; align-items: center; justify-content: center; padding: 14px 28px; border: 0; border-radius: var(--radius-md);
  background: var(--color-brand); color: var(--color-text); cursor: pointer;
  font-family: var(--font-body); font-weight: 800; font-size: 15px; line-height: 16px; white-space: nowrap;
  transition: background-color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.dl-hero__btn:hover { background: var(--color-brand-hover); }
.dl-hero__btn:active { transform: translateY(1px); }
.dl-hero__status { display: none; align-items: center; gap: var(--space-6); font-size: 12px; line-height: 13px; color: var(--color-muted); }
.dl-hero__dot { width: 6px; height: 6px; border-radius: 50%; background: #22c55e; }
.dl-hero__note {
  width: 760px; max-width: 100%; padding: var(--space-16); border-radius: var(--radius-xs);
  background: var(--color-surface-2); box-shadow: inset 0 0 0 1px var(--color-line-dark);
  font-size: 14px; line-height: 15px; font-weight: 600; color: var(--color-muted-4);   /* mockup paints this #0b0b10 on #17171e (unreadable); lifted to the lead-text tone */
}
.dl-hero__media { position: absolute; right: 0; top: 80px; width: 520px; height: 475px; overflow: hidden; }
.dl-hero__pic, .dl-hero__pic img { width: 100%; height: 100%; }
.dl-hero__pic img { object-fit: cover; }
.dl-hero__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, #111116 0%, rgba(17, 17, 22, .5) 25%, rgba(17, 17, 22, 0) 60%); }

/* ── 01 basics ─────────────────────────────────────────────────────────── */
.dl-about__split { display: flex; gap: var(--space-64); }
.dl-about__text { width: 716px; flex: 1 1 0; font-size: 16px; line-height: 26px; color: var(--color-text-dark-4); }
.dl-flow { display: flex; flex-direction: column; gap: var(--space-16); width: 500px; flex: 0 0 500px; padding: var(--space-24); border-radius: var(--radius-md); box-shadow: inset 0 0 0 1px var(--color-line-light); }
.dl-flow__title { font-family: var(--font-display); font-weight: 900; font-size: 12px; line-height: 15px; color: var(--color-bg); }
.dl-flow__steps { display: flex; align-items: center; gap: var(--space-8); }
.dl-flow__node {
  padding: var(--space-8); border-radius: var(--radius-xs);
  background: var(--color-light-2); box-shadow: inset 0 0 0 1px rgba(11, 11, 16, .071);
  font-size: 12px; line-height: 13px; font-weight: 700; color: var(--color-bg); white-space: nowrap;
}
.dl-flow__node--blocked { background: var(--color-danger-bg); box-shadow: inset 0 0 0 1px var(--color-danger-line); font-size: 11px; line-height: 12px; font-weight: 800; color: #b42323; }   /* a11y: red on the light flow node */
.dl-flow__arrow { font-size: 12px; line-height: 13px; color: var(--color-brand); }

/* ── 02 what counts ────────────────────────────────────────────────────── */
.dl-counts__cols { display: flex; align-items: flex-start; gap: var(--space-64); }
.dl-counts__col { display: flex; flex-direction: column; gap: var(--space-24); width: 576px; flex: 1 1 0; }
.dl-counts__title { font-family: var(--font-display); font-weight: 900; font-size: 16px; line-height: 20px; color: var(--color-text-light); }
.dl-counts__rule { height: 1px; margin: 0 0 -1px; border: 0; background: rgba(11, 11, 16, .071); }
.dl-counts__mrule { display: none; }
.dl-counts__list { display: flex; flex-direction: column; gap: var(--space-16); font-size: 16px; line-height: 24px; color: var(--color-text-light); }
.dl-counts__note { font-size: 13px; line-height: 14px; color: var(--color-muted-3); }

/* ── 03 limit reached ──────────────────────────────────────────────────── */
.dl-reached { gap: var(--space-40); }
.dl-statements { display: flex; gap: var(--space-32); }
.dl-statement { display: flex; flex-direction: column; gap: var(--space-12); flex: 1 1 0; padding: var(--space-24); border-radius: var(--radius-md); box-shadow: inset 0 0 0 1px var(--color-line-dark); }
.dl-statement__label { font-size: 13px; line-height: 14px; color: var(--color-muted-3); }
.dl-statement__value { font-family: var(--font-display); font-weight: 900; font-size: 28px; line-height: 35px; color: var(--color-text); }
.dl-statement__value--blocked { color: var(--color-danger); }

/* ── 04 periods ────────────────────────────────────────────────────────── */
.dl-periods__cols { display: flex; align-items: flex-start; gap: var(--space-32); }
.dl-period { display: flex; flex-direction: column; gap: var(--space-16); width: 384px; flex: 1 1 0; }
.dl-period__label { display: flex; align-items: center; gap: var(--space-12); }
.dl-period__name { font-family: var(--font-display); font-weight: 900; font-size: 26px; line-height: 32px; color: var(--color-text-light); }
.dl-period__badge { display: inline-block; padding: 2px 8px; border-radius: var(--radius-xs); background: var(--color-brand); font-size: 11px; line-height: 12px; font-weight: 700; color: var(--color-text-light); white-space: nowrap; }
.dl-period__rule { height: 1px; margin: 0 0 -1px; border: 0; background: var(--color-line-dark); }
.dl-period__desc { font-size: 15px; line-height: 23px; color: var(--color-muted-3); }

/* ── 05 changing ───────────────────────────────────────────────────────── */
.dl-changes { box-shadow: inset 0 0 0 1px #000; }
.dl-changes__rows { display: flex; flex-direction: column; }
.dl-change { display: flex; justify-content: space-between; align-items: center; gap: var(--space-32); padding-block: var(--space-24); box-shadow: inset 0 1px 0 var(--color-line-dark); }
.dl-change__left { display: flex; align-items: center; gap: var(--space-32); min-width: 0; }
.dl-change__title { flex: 0 0 auto; font-family: var(--font-display); font-weight: 900; font-size: 16px; line-height: 20px; color: var(--color-text-light); white-space: nowrap; }
.dl-change__desc { font-size: 14px; line-height: 15px; color: var(--color-muted-3); }
.dl-change__tag { display: inline-block; padding: 6px 16px; border-radius: var(--radius-xs); background: var(--color-brand); font-size: 12px; line-height: 13px; font-weight: 800; color: var(--color-text); white-space: nowrap; }
.dl-change__tag--outline { padding: 6px 12px; background: none; box-shadow: inset 0 0 0 1px var(--color-brand); font-size: 11px; line-height: 12px; color: var(--color-brand); }
.dl-change__cooling { display: inline-flex; align-items: center; gap: var(--space-8); flex: 0 0 auto; }
.dl-change__days { font-family: var(--font-display); font-weight: 900; font-size: 20px; line-height: 25px; color: var(--color-brand); }
.dl-compare {
  display: flex; justify-content: space-between; align-items: center; gap: var(--space-24);
  padding: var(--space-20); border-radius: var(--radius-sm);
  background: var(--color-surface-2); box-shadow: inset 0 0 0 1px var(--color-line-dark);
}
.dl-compare__title { font-family: var(--font-display); font-weight: 900; font-size: 14px; line-height: 17px; color: var(--color-text-light); }
.dl-compare__nodes { display: flex; align-items: center; gap: var(--space-24); }
.dl-compare__node { font-size: 14px; line-height: 15px; font-weight: 700; color: var(--color-text-light); white-space: nowrap; }
.dl-compare__sep { font-size: 14px; line-height: 15px; color: var(--color-text-dark-4); }

/* ── 06 notifications ──────────────────────────────────────────────────── */
.dl-notify__split { display: flex; align-items: flex-start; gap: var(--space-64); }
.dl-notify__col { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-20); width: 576px; flex: 1 1 0; }
.dl-notify__title { font-family: var(--font-display); font-weight: 900; font-size: 18px; line-height: 22px; color: var(--color-text-light); }
.dl-notify__text { font-size: 16px; line-height: 26px; color: var(--color-muted-3); }

/* ── 07 review ─────────────────────────────────────────────────────────── */
.dl-review .dl-head__lead { max-width: 760px; }

/* ── limits vs BetStop + stronger restriction ──────────────────────────── */
.dl-vs__split { display: flex; align-items: flex-start; gap: var(--space-64); }
.dl-vs__col { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-16); width: 576px; flex: 1 1 0; }
.dl-vs__title { font-family: var(--font-display); font-weight: 900; font-size: 18px; line-height: 22px; color: var(--color-text); }
.dl-vs__rule { width: 100%; height: 1px; margin: 0 0 -1px; border: 0; background: var(--color-line-dark); }
.dl-vs__mrule { display: none; }
.dl-vs__lead { font-size: 15px; line-height: 16px; font-weight: 700; color: var(--color-brand-3); }
.dl-vs__text { font-size: 15px; line-height: 24px; color: var(--color-muted-3); }
.dl-stronger { gap: var(--space-24); align-items: flex-start; }
.dl-stronger__title { font-family: var(--font-display); font-weight: 900; font-size: 28px; line-height: 35px; color: var(--color-text-light); }
.dl-stronger__text { width: 760px; max-width: 100%; font-size: 16px; line-height: 26px; color: var(--color-muted-3); }
.dl-stronger__links { display: flex; align-items: center; gap: var(--space-32); }
.dl-stronger__note { font-size: 12px; line-height: 13px; color: var(--color-muted-3); }

/* ── important information ─────────────────────────────────────────────── */
.dl-info { gap: var(--space-24); align-items: flex-start; }
.dl-info__title { font-family: var(--font-display); font-weight: 900; font-size: 28px; line-height: 35px; color: var(--color-bg); }
.dl-info__body { display: contents; }
.dl-info__text { width: 760px; max-width: 100%; font-size: 16px; line-height: 26px; color: var(--color-text-dark-4); }
.dl-info__strong { width: 760px; max-width: 100%; font-size: 16px; line-height: 26px; font-weight: 600; color: var(--color-bg); }
.dl-info__link { font-size: 14px; line-height: 15px; font-weight: 800; color: var(--color-brand-ink); text-decoration: none; }
.dl-info__link:hover { text-decoration: underline; }

/* ── mobile branch (frame deposit-limits-mobile, 390) ─────────────────── */
@media (max-width: 1199px) {
  .dl-d { display: none !important; }
  .dl-m { display: initial; }
  .dl-br-m { display: inline; }
  p.dl-m, div.dl-m, hr.dl-m, span.dl-head__num { display: block; }
  .dl-link__arrow { display: inline; }

  .dl-eyebrow { font-size: 10px; line-height: 11px; letter-spacing: 1.5px; color: var(--color-muted); }
  .dl-eyebrow::before { display: none; }
  .dl-eyebrow--brand { color: var(--color-brand); letter-spacing: 2px; }
  .dl-eyebrow--brand::before { display: block; }
  .dl-sec--light .dl-eyebrow { color: var(--color-text-dark-4); }
  .dl-head { gap: 0; width: auto; }
  .dl-head__title { margin-top: var(--space-16); font-size: 24px; line-height: 30px; letter-spacing: 0; color: var(--color-text); }
  .dl-head--tight .dl-head__title { line-height: 28px; }
  .dl-head__lead { margin-top: var(--space-12); font-size: 15px; line-height: 23px; color: var(--color-text-light); }
  .dl-sec--light .dl-head__lead { color: var(--color-bg); }

  .dl-sec { gap: 0; padding: 64px var(--container-pad-m); background: var(--color-bg); }
  .dl-sec--light { background: var(--color-light); }
  .dl-vdiv { display: none; }
  .dl-link { font-size: 13px; line-height: 14px; }

  .dl-hero { flex-direction: column; align-items: stretch; gap: var(--space-24); min-height: 0; padding: 40px var(--container-pad-m); background: var(--color-bg); }
  .dl-hero__left { gap: var(--space-24); width: auto; }
  .dl-hero__stack { gap: var(--space-16); width: auto; }
  .dl-hero__title { font-size: 44px; line-height: 46px; letter-spacing: 0; color: var(--color-text); }
  .dl-hero__lead { font-size: 14px; line-height: 21px; font-weight: 400; color: var(--color-text); }
  .dl-hero__cta { flex-direction: column; align-items: flex-start; gap: var(--space-8); width: 100%; }
  .dl-hero__btn { width: 100%; }
  .dl-hero__status { display: flex; }
  .dl-hero__btn { height: 48px; padding: 0 16px; border-radius: var(--radius-10); font-size: 14px; line-height: 15px; }
  .dl-hero__media { position: static; width: 100%; height: 220px; border-radius: var(--radius-lg); }
  .dl-hero__media::after { display: none; }

  .dl-about__split { flex-direction: column; gap: var(--space-24); margin-top: var(--space-12); }
  .dl-about__text { width: auto; flex: none; font-size: 15px; line-height: 23px; color: var(--color-bg); }
  .dl-flow { width: auto; flex: none; }
  .dl-flow__steps { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--space-8); }
  .dl-flow__node { text-align: left; }

  .dl-counts__cols { flex-direction: column; align-items: stretch; gap: 0; margin-top: 44px; }   /* 12 + 32 spacers */
  .dl-counts__col { width: auto; flex: none; gap: var(--space-16); }
  .dl-counts__title { font-family: var(--font-body); font-weight: 800; font-size: 12px; line-height: 13px; color: var(--color-text); }
  .dl-counts__rule { display: none; }
  .dl-counts__mrule { height: 1px; margin: 32px 0 31px; border: 0; background: var(--color-ink); }
  .dl-counts__list { gap: 10px; font-size: 14px; line-height: 20px; color: var(--color-text); }

  .dl-statements { flex-direction: column; gap: var(--space-12); margin-top: var(--space-32); }
  .dl-statement { flex: none; gap: var(--space-8); padding: var(--space-16); border-radius: var(--radius-lg); }
  .dl-statement__label { font-size: 12px; line-height: 13px; font-weight: 800; color: var(--color-text-light); }
  .dl-statement__value { font-size: 20px; line-height: 25px; color: var(--color-text-light); }
  .dl-statement__value--blocked { color: var(--color-danger-3); }

  .dl-periods .dl-head__lead { font-size: 14px; line-height: 21px; color: var(--color-text); }
  .dl-periods__cols { flex-direction: column; align-items: stretch; gap: 0; margin-top: var(--space-32); }
  .dl-period { display: grid; grid-template-columns: 260px 1fr; grid-template-areas: "name badge" "desc badge"; align-items: center; row-gap: var(--space-4); width: auto; flex: none; padding-block: var(--space-16); }
  .dl-period + .dl-period { box-shadow: inset 0 1px 0 var(--color-ink); }
  .dl-period__label { display: contents; }
  .dl-period__name { grid-area: name; font-family: var(--font-body); font-weight: 800; font-size: 14px; line-height: 15px; color: var(--color-text); }
  .dl-period__badge { grid-area: badge; justify-self: end; }
  .dl-period__rule { display: none; }
  .dl-period__desc { grid-area: desc; font-size: 13px; line-height: 14px; color: var(--color-text); }

  .dl-changes { background: var(--color-surface); box-shadow: none; }
  .dl-changes__rows { margin-top: var(--space-32); }
  .dl-change { flex-direction: column; align-items: stretch; gap: var(--space-8); padding-block: var(--space-16); box-shadow: none; }
  .dl-change + .dl-change { box-shadow: inset 0 1px 0 var(--color-line-dark); }
  .dl-change__left { display: contents; }
  .dl-change__title { order: 1; font-size: 12px; line-height: 15px; }
  .dl-change__desc { order: 3; font-size: 13px; line-height: 18px; color: var(--color-muted-3); }   /* mockup #5c5c66 fails contrast on #111116; same tone as the desktop row */
  .dl-change { display: grid; grid-template-columns: 1fr auto; align-items: center; column-gap: var(--space-12); }
  .dl-change__title { grid-column: 1; grid-row: 1; }
  .dl-change__tag, .dl-change__cooling { grid-column: 2; grid-row: 1; justify-self: end; }
  .dl-change__desc { grid-column: 1 / -1; grid-row: 2; }
  .dl-change__tag { padding: 6px 16px; font-size: 11px; line-height: 12px; }
  .dl-compare { flex-direction: column; align-items: stretch; gap: var(--space-12); margin-top: var(--space-32); padding: var(--space-16); border-radius: var(--radius-lg); }
  .dl-compare__title { font-family: var(--font-body); font-weight: 800; font-size: 11px; line-height: 12px; }
  .dl-compare__nodes { flex-direction: column; align-items: stretch; gap: var(--space-8); }
  .dl-compare__node { display: flex; justify-content: space-between; font-size: 13px; line-height: 14px; font-weight: 400; }
  .dl-compare__v { font-weight: 800; color: var(--color-text-dark-4); }
  .dl-compare__v--brand { color: var(--color-brand); }
  .dl-compare__sep { height: 1px; background: var(--color-line-dark); }

  .dl-notify .dl-head__lead { font-size: 14px; line-height: 21px; color: var(--color-text); }
  .dl-notify__split { flex-direction: column; align-items: stretch; gap: 0; margin-top: var(--space-32); }
  .dl-notify__col { width: auto; flex: none; gap: 0; }
  .dl-notify__col:first-child { margin: -32px 0 32px; }   /* the mobile frame puts this paragraph under the heading, 12 below it */
  .dl-notify__col:first-child .dl-notify__text { margin-top: var(--space-12); font-size: 14px; line-height: 21px; color: var(--color-text); }
  .dl-notify__title { font-family: var(--font-body); font-weight: 800; font-size: 15px; line-height: 16px; color: var(--color-text); }
  .dl-notify__col--right .dl-notify__text { margin: var(--space-8) 0 var(--space-12); font-size: 13px; line-height: 18px; color: var(--color-text); }

  .dl-review { background: var(--color-light); }
  .dl-review .dl-eyebrow { color: var(--color-text-dark-4); }
  .dl-review .dl-head__title { color: var(--color-surface); }
  .dl-review .dl-head__lead { color: var(--color-surface); }

  .dl-vs__main { padding-bottom: 0; }
  .dl-vs__split { flex-direction: column; align-items: stretch; gap: 0; margin-top: 44px; }   /* 12 + 32 spacers */
  .dl-vs__col { width: auto; flex: none; gap: 0; }
  .dl-vs__title { font-family: var(--font-body); font-weight: 800; font-size: 12px; line-height: 13px; }
  .dl-vs__rule { display: none; }
  .dl-vs__lead { margin-top: var(--space-12); font-size: 13px; line-height: 14px; color: var(--color-brand); }
  .dl-vs__text { font-size: 14px; line-height: 20px; color: var(--color-text); }
  .dl-vs__mrule { height: 1px; margin: 36px 0 23px; border: 0; background: var(--color-ink); }   /* 12 + 24 above, 24 below */
  .dl-vs__col .dl-link { margin-top: var(--space-12); color: var(--color-brand); }
  .dl-stronger { gap: var(--space-12); margin: var(--space-32) var(--container-pad-m) 0; padding: var(--space-20); border-radius: var(--radius-lg); background: var(--color-surface-2); }
  .dl-vs { padding-bottom: 64px; background: var(--color-bg); }
  .dl-stronger__title { font-family: var(--font-body); font-weight: 800; font-size: 15px; line-height: 16px; color: var(--color-text); }
  .dl-stronger__text { width: auto; font-size: 13px; line-height: 18px; color: var(--color-text); }
  .dl-stronger__links { flex-direction: column; align-items: flex-start; gap: var(--space-8); }

  .dl-info { gap: 0; }
  .dl-info .dl-eyebrow { color: var(--color-brand); }
  .dl-info__title { margin-top: var(--space-8); font-size: 24px; line-height: 28px; }
  .dl-info__body { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-16); margin-top: var(--space-12); }
  .dl-info__text { width: auto; font-size: 15px; line-height: 23px; color: var(--color-bg); }
  .dl-info__strong { width: auto; }
}

@media (max-width: 389px) {
  .dl-period { grid-template-columns: minmax(0, 1fr) auto; }
  .dl-change { grid-template-columns: minmax(0, 1fr) auto; }
}