/* Deposit Limits — betaces-deposit-limits-page (1440) / -mobile (390). */

/* ── 02-page-intro ────────────────────────────────────────────────────── */
.limits-intro { padding: var(--space-40) var(--section-gutter); background: var(--color-cream); }
.limits-intro__left { display: grid; gap: var(--space-16); align-content: start; min-height: 250px; max-width: 800px; }
.limits-intro__h {
  font-size: 56px; font-weight: 700; line-height: 52px; letter-spacing: var(--ls-h1);
  text-transform: uppercase; color: var(--color-ink);
}
.limits-intro__lede { font-size: var(--fs-body); line-height: 22px; color: var(--color-muted); }

/* ── 03-limit-dashboard ───────────────────────────────────────────────── */
.limit-dash {
  display: grid; gap: var(--space-32);
  padding: 60px var(--container-pad); background: var(--color-brand); color: var(--color-cream);
}
/* The dashboard hero is drawn at a fixed 260px whether or not a limit is set. */
.limit-dash__hero { display: grid; gap: var(--space-16); align-content: start; min-height: 260px; }
/* Пока лимит не установлен, панель показывает, как она будет выглядеть, —
   и честно помечена как пример. */
.limit-dash__label { display: flex; align-items: center; gap: var(--space-12); }
.limit-dash__example {
  padding: 3px var(--space-8); border-radius: var(--radius-sm);
  background: var(--color-cream); color: var(--color-ink);
  font-size: var(--fs-micro); font-weight: 800; line-height: 13px; letter-spacing: var(--ls-label);
}
.limit-dash__label { font-size: var(--fs-body-sm); font-weight: 700; line-height: 18px; color: var(--color-accent); }
.limit-dash__display { display: grid; gap: var(--space-8); }
.limit-dash__caption { font-size: 16px; font-weight: 700; line-height: 21px; }
/* В макете AUD и «/ PER WEEK» выровнены по верху числа, а не по базовой линии. */
.limit-dash__amount { display: flex; align-items: flex-start; gap: var(--space-24); }
/* В макете: AUD 24 ExtraBold кремовым, сумма 160 лаймом, «/ PER WEEK» 48 кремовым. */
.limit-dash__cur { font-family: var(--font-body); font-size: 24px; font-weight: 800; line-height: 31px; }
.limit-dash__value {
  font-family: var(--font-display); font-size: 160px; font-weight: 700; line-height: 140px;
  letter-spacing: -4px; color: var(--color-accent);
}
.limit-dash__cycle {
  font-family: var(--font-display); font-size: var(--fs-h4); font-weight: 700; line-height: 54px;
  color: var(--color-cream);
}
/* Пустое состояние: вместо суммы одна строка призыва, набранная скромнее. */
.limit-dash__amount--empty .limit-dash__cycle { font-size: var(--fs-h5); line-height: 42px; color: var(--color-accent); }

.limit-scale { display: grid; gap: var(--space-12); }
.limit-scale__labels { display: flex; align-items: flex-start; justify-content: space-between; padding-block: var(--space-4); }
.limit-scale__labels span { display: grid; gap: var(--space-4); }
.limit-scale__labels b { font-family: var(--font-display); font-size: var(--fs-h6); font-weight: 700; line-height: 22px; }
.limit-scale__labels i { font-style: normal; font-size: var(--fs-label); line-height: 14.3px; color: var(--color-on-brand-soft); }
.limit-scale__right { text-align: right; justify-items: end; }
.limit-scale__track { height: 4px; border-radius: var(--radius-sm); background: var(--color-brand-deep); overflow: hidden; }
.limit-scale__fill { display: block; height: 100%; background: var(--color-cream); }
.limit-scale__meta {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-16);
  padding-block: var(--space-4); font-size: var(--fs-label); line-height: 14.3px;
}
.limit-scale__flag { font-weight: 700; color: var(--color-accent); }

.limit-actions { display: grid; gap: var(--space-24); }
.limit-actions__buttons { display: flex; align-items: center; gap: var(--space-16); }
.limit-actions__buttons .btn { height: 48px; padding: 12px var(--space-24); }
.limit-actions__how { font-size: var(--fs-ui); font-weight: 700; line-height: 17px; color: var(--color-cream); text-decoration: none; }
.limit-actions__how:hover { color: var(--color-accent); }
.limit-actions__note { font-size: var(--fs-meta); line-height: 16px; }

.limit-form__inner { display: grid; gap: var(--space-16); padding-top: var(--space-16); max-width: 560px; }
.limit-form .field__label { color: var(--color-on-brand-soft); }
.limit-form__submit { display: flex; align-items: center; gap: var(--space-16); flex-wrap: wrap; }
.limit-form .form__note { color: var(--color-on-brand-soft); }

.limit-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-32); }
.limit-stats dt { font-size: var(--fs-label); line-height: 14.3px; color: var(--color-on-brand-soft); }
.limit-stats dd { margin: 2px 0 0; font-family: var(--font-display); font-size: var(--fs-h6); font-weight: 700; line-height: 22px; }

/* ── 06-how-it-works-intro ────────────────────────────────────────────── */
.limits-how {
  display: grid; gap: var(--space-24);
  padding: var(--section-pad-y-sm) var(--container-pad) var(--space-40);
  background: var(--color-cream);
}
.limits-how__h {
  font-family: var(--font-display); font-size: var(--fs-h3); font-weight: 700; line-height: 52px;
  text-transform: uppercase; color: var(--color-ink);
}
.limits-how__lede { max-width: 680px; font-size: var(--fs-body); line-height: 20px; color: var(--color-muted); }

/* ── steps ────────────────────────────────────────────────────────────── */
/* The three step frames are FIXED height in the mockup — the whitespace inside
   them is a spacing decision, not a by-product of the content — so the heights
   are carried over rather than derived. min-height, not height: long copy still
   grows the block instead of spilling out of it. */
.limit-step {
  display: flex; align-items: flex-start; gap: var(--space-48);
  padding: var(--space-48) var(--container-pad); background: var(--color-cream);
}
.limit-step--1 { min-height: 589px; }
.limit-step--2, .limit-step--3 { min-height: 405px; }
.limit-step__text { min-height: 309px; }
.limit-step--alt { background: var(--color-cream-2); }
.limit-step__text { width: 500px; flex: none; display: grid; gap: var(--space-24); }
.limit-step__num { font-family: var(--font-display); font-size: 96px; font-weight: 700; line-height: 96px; color: var(--color-brand); }
.limit-step__h {
  font-family: var(--font-display); font-size: var(--fs-h5); font-weight: 700; line-height: 40px;
  text-transform: uppercase; color: var(--color-ink);
}
.limit-step__note { font-size: var(--fs-body); line-height: 24px; color: var(--color-muted); }
.limit-step__diagram {
  flex: 1; min-width: 0; display: grid; gap: var(--space-32); align-content: start;
  padding: var(--space-40); background: var(--color-cream-2); border-radius: var(--radius-md);
}
.limit-step--alt .limit-step__diagram { background: var(--color-cream); }
.limit-step__diagram figcaption { font-size: var(--fs-label); font-weight: 700; line-height: 14.3px; color: var(--color-muted); }
/* 01: выбор цикла — выбранный синим с лаймовой чертой под ним */
.limit-cycles { display: flex; align-items: flex-end; gap: var(--space-24); }
.limit-cycles span { font-family: var(--font-display); font-size: 18px; font-weight: 700; line-height: 24px; color: var(--color-muted-3); }
.limit-cycles .is-on { position: relative; color: var(--color-brand); }
.limit-cycles .is-on::after {
  content: ""; position: absolute; left: 0; bottom: -6px;
  width: 32px; height: 2px; background: var(--color-accent);
}
.limit-step__photo { display: block; height: 180px; overflow: hidden; border-radius: var(--radius-sm); }
.limit-step__photo img { width: 100%; height: 100%; object-fit: cover; }

/* 02: три депозита через плюс, ниже линия и вывод синим */
.limit-flow { display: flex; align-items: center; gap: var(--space-12); }
.limit-flow span {
  display: grid; place-items: center; min-width: 80px; height: 41px; padding: 0 var(--space-12);
  background: var(--color-cream-2); border-radius: var(--radius-sm);
  font-size: var(--fs-ui); font-weight: 700; line-height: 17px; color: var(--color-ink);
}
.limit-step--alt .limit-flow span { background: var(--color-cream); }
.limit-flow i { font-style: normal; font-size: 18px; color: var(--color-muted-3); }
.limit-flow__result {
  display: flex; align-items: center; gap: var(--space-16);
  font-size: var(--fs-body-sm); font-weight: 700; line-height: 18px; color: var(--color-brand);
}
.limit-flow__line { width: 120px; height: 1px; background: var(--color-border); }

/* 03: START — ACTIVE PERIOD — [RESET] */
.limit-timeline { display: flex; align-items: center; gap: var(--space-16); }
.limit-timeline b,
.limit-timeline span:not(.limit-timeline__line) { font-size: var(--fs-label); font-weight: 700; line-height: 14px; }
.limit-timeline b { color: var(--color-ink); }
.limit-timeline span:not(.limit-timeline__line) { color: var(--color-muted); font-weight: 400; }
.limit-timeline__line { flex: 1; max-width: 120px; height: 1px; background: var(--color-border); }
.limit-timeline em {
  font-style: normal; padding: 4px var(--space-8);
  background: var(--color-brand); color: var(--color-cream); border-radius: var(--radius-sm);
  font-size: var(--fs-label); font-weight: 700; line-height: 14px;
}
.limit-step__example { display: grid; gap: var(--space-4); }
.limit-step__example span { font-size: var(--fs-label); line-height: 14.3px; color: var(--color-muted); }
.limit-step__example b { font-family: var(--font-display); font-size: var(--fs-h5); font-weight: 700; line-height: 40px; color: var(--color-ink); }

/* ── 10-quick-summary-banner ──────────────────────────────────────────── */
.limits-summary {
  display: grid; gap: var(--space-16);
  padding: var(--space-40) var(--container-pad); background: var(--color-ink); color: var(--color-cream);
}
.limits-summary__h {
  font-family: var(--font-display); font-size: var(--fs-h4); font-weight: 700; line-height: 54px;
  text-transform: uppercase;
}
.limits-summary__flow { display: flex; flex-wrap: wrap; gap: var(--space-12); font-size: var(--fs-body-sm); font-weight: 500; line-height: 18px; }
.limits-summary__flow i { font-style: normal; font-weight: 700; color: var(--color-accent); }

/* ── 11-support-section ───────────────────────────────────────────────── */
.limits-support {
  display: flex; align-items: flex-start; gap: var(--space-48);
  padding: var(--section-pad-y-sm) var(--container-pad); background: var(--color-cream-2);
}
.limits-support__left { width: 420px; flex: none; display: grid; gap: var(--space-24); }
.limits-support__h {
  font-family: var(--font-display); font-size: 48px; font-weight: 700; line-height: 44px;
  text-transform: uppercase; color: var(--color-ink);
}
.limits-support__lede { font-size: var(--fs-body-sm); line-height: 21px; color: var(--color-muted); }
.limits-support__rows { flex: 1; min-width: 0; }
.support-row {
  display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: var(--space-16);
  align-items: start; padding: var(--space-24) 0;
  box-shadow: inset 0 1px 0 var(--color-border);
}
.support-row:first-child { box-shadow: none; }
.support-row__num { font-family: var(--font-display); font-size: var(--fs-title); font-weight: 700; line-height: 27px; color: var(--color-brand); }
.support-row__h { font-family: var(--font-display); font-size: var(--fs-card); font-weight: 700; line-height: 24px; color: var(--color-ink); }
.support-row__note { margin-top: var(--space-8); font-size: var(--fs-ui); line-height: 18px; color: var(--color-muted); }
.support-row__phone { display: grid; gap: var(--space-4); margin-top: var(--space-12); }
.support-row__phone span { font-size: var(--fs-label); font-weight: 700; line-height: 14.3px; color: var(--color-muted); }
.support-row__phone a {
  font-family: var(--font-display); font-size: var(--fs-h5); font-weight: 700; line-height: 40px;
  color: var(--color-brand); text-decoration: none;
}

/* ── 12-quick-actions ─────────────────────────────────────────────────── */
.limits-tools {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-24);
  height: 65px; padding: 0 var(--container-pad);
  background: var(--color-cream);
  box-shadow: inset 0 1px 0 var(--color-border);
}
.limits-tools__label { font-size: var(--fs-label); font-weight: 700; line-height: 14.3px; color: var(--color-muted); }
.limits-tools a {
  font-size: var(--fs-ui); font-weight: 700; line-height: 17px; color: var(--color-brand); text-decoration: none;
  transition: color var(--dur-fast) var(--ease);
}
.limits-tools a:hover { color: var(--color-ink); }

/* ── mobile ───────────────────────────────────────────────────────────── */
@media (max-width: 1199px) {
  .limits-intro { padding: var(--space-24) var(--container-pad-mobile); }
  .limits-intro__h { font-size: 38px; line-height: 36px; }
  .limits-intro__lede { font-size: var(--fs-ui); line-height: 18px; }

  /* The desktop frames fix these heights; the mobile frames do not. */
  .limits-intro__left, .limit-dash__hero,
  .limit-step__text, .limit-step--1, .limit-step--2, .limit-step--3 { min-height: 0; }
  .limit-dash { gap: var(--space-24); padding: var(--space-32) var(--container-pad-mobile); }
  .limit-dash__amount { flex-wrap: wrap; gap: var(--space-8); }
  .limit-dash__value { font-size: 72px; line-height: 72px; letter-spacing: -2px; }
  .limit-dash__cur { font-size: var(--fs-h6); line-height: 30px; }
  .limit-stats { grid-template-columns: 1fr; gap: var(--space-12); }
  .limit-actions__buttons { flex-direction: column; align-items: stretch; }

  .limits-how { gap: var(--space-12); padding: var(--space-32) var(--container-pad-mobile) var(--space-24); }
  .limits-how__h { font-size: var(--fs-h5); line-height: 38px; }
  .limits-how__lede { font-size: var(--fs-ui); line-height: 20px; }

  .limit-step { flex-direction: column; gap: var(--space-24); padding: var(--space-32) var(--container-pad-mobile); }
  .limit-step__text { width: auto; gap: var(--space-12); }
  .limit-step__num { font-size: 56px; line-height: 56px; }
  .limit-step__h { font-size: var(--fs-h6); line-height: 32px; }
  .limit-step__note { font-size: var(--fs-ui); line-height: 20px; }
  .limit-step__diagram { gap: var(--space-16); padding: var(--space-20); }

  .limits-summary { gap: var(--space-12); padding: var(--space-24) var(--container-pad-mobile); }
  .limits-summary__h { font-size: var(--fs-h5); line-height: 38px; }
  .limits-summary__flow { font-size: var(--fs-ui); line-height: 18px; }

  .limits-support { flex-direction: column; gap: var(--space-24); padding: var(--space-32) var(--container-pad-mobile); }
  .limits-support__left { width: auto; gap: var(--space-12); }
  .limits-support__h { font-size: 36px; line-height: 36px; }
  .support-row { grid-template-columns: 32px minmax(0, 1fr); gap: var(--space-12); padding: var(--space-16) 0; }
  .support-row__phone a { font-size: var(--fs-h6); line-height: 30px; }

  .limits-tools { height: auto; gap: var(--space-12); padding: var(--space-24) var(--container-pad-mobile); }
}