/* Deposit limits — frames deposit-limits-page (12:4) and mobile-deposit-limits (41:438). Numbers from gen.js / fig-outline. */

/* ── 03 hero ──────────────────────────────────────────────────────────── */
.dlhero { display: flex; flex-direction: column; gap: 24px; min-height: 340px; padding: 64px var(--container-pad); background: var(--color-purple); }   /* frame is FIXED 340: content ends 34px short of the bottom padding */
.dlhero__eyebrow { display: flex; gap: 8px; align-self: flex-start; font-weight: 800; font-size: 12px; line-height: 16px; text-transform: uppercase; color: var(--color-text); }
.dlhero__brand { color: var(--color-brand); }
.dlhero__text { display: flex; flex-direction: column; gap: 16px; max-width: 900px; }
.dlhero__title { font-family: var(--font-display); font-size: 56px; line-height: 60px; text-transform: uppercase; color: var(--color-text); }
.dlhero__lead { font-size: 18px; line-height: 26px; color: var(--color-text); }
.dlhero__sub { font-size: 14px; line-height: 20px; color: var(--color-muted); }

/* ── 04 workspace: limit panels + directory ───────────────────────────── */
.dlws { display: flex; align-items: flex-start; gap: 48px; padding: 48px var(--container-pad) 64px; background: var(--color-bg); }
.dl-col { position: relative; display: flex; flex-direction: column; gap: 32px; flex: 1; min-width: 0; }
.dlform { display: contents; }

/* log-in plate over the panels (visitor not signed in) */
.dl-gate { position: absolute; inset: 0; z-index: 2; display: flex; align-items: flex-start; justify-content: center; padding: 64px 24px; border-radius: 6px; background: rgba(11, 12, 14, .72); backdrop-filter: blur(3px); }
.dl-gate__card { display: flex; flex-direction: column; gap: 12px; width: 420px; max-width: 100%; padding: 32px; border-radius: 6px; background: var(--color-surface); box-shadow: inset 0 0 0 1px var(--color-border), var(--shadow-sheet); text-align: center; position: sticky; top: 112px; }
.dl-gate__title { font-family: var(--font-display); font-size: 20px; line-height: 22px; text-transform: uppercase; color: var(--color-text); }
.dl-gate__text { font-size: 14px; line-height: 20px; color: var(--color-muted); }
.dl-gate__actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 8px; }
.dl-gate__btn { padding: 12px 24px; border-radius: var(--radius-sm); font-size: 13px; line-height: 17px; }

.dlcard { display: flex; flex-direction: column; gap: 28px; padding: 32px; border-radius: 6px; background: var(--color-card); box-shadow: inset 0 0 0 1px var(--color-border-light); }
.dlcard--edit { gap: 24px; }
.dlcard--review { gap: 24px; box-shadow: inset 0 0 0 2px var(--color-brand); }
.dlcard__head { display: flex; flex-direction: column; gap: 6px; }
.dlcard__title { font-family: var(--font-narrow); font-weight: 700; font-size: 18px; line-height: 24px; text-transform: uppercase; color: var(--color-ink); }
.dlcard__lead { font-size: 13px; line-height: 17px; color: var(--color-muted-2); }
.dlcard__line { display: none; }
.limit-now { display: flex; flex-direction: column; gap: 8px; padding: 24px; border-radius: var(--radius-sm); background: var(--color-card-2); box-shadow: inset 0 0 0 1px var(--color-border-light); }
.limit-now__label { font-weight: 700; font-size: 11px; line-height: 14px; text-transform: uppercase; color: var(--color-muted-2); }
.limit-now__row { display: flex; align-items: baseline; gap: 12px; min-height: 49px; }
.limit-now__amount { font-family: var(--font-mono); font-weight: 800; font-size: 38px; line-height: 49px; color: var(--color-ink); }
.limit-now__per { font-weight: 600; font-size: 16px; line-height: 21px; color: var(--color-muted-2); }
.limit-meta { display: flex; align-items: center; gap: 24px; min-height: 72px; padding: 16px; border-radius: var(--radius-sm); background: var(--color-card-2); box-shadow: inset 0 0 0 1px var(--color-border-light); }
.limit-meta__item { display: flex; flex-direction: column; gap: 4px; flex: 1; min-width: 0; }
.limit-meta__item dt { font-weight: 700; font-size: 11px; line-height: 14px; text-transform: uppercase; color: var(--color-muted-2); }
.limit-meta__item dd { font-weight: 700; font-size: 14px; line-height: 18px; color: var(--color-ink); }
.limit-meta__mono { font-family: var(--font-mono); }
.limit-meta__sep { flex: none; width: 0; height: 40px; margin: 0 -1px 0 0; border: 0; border-left: 1px solid var(--color-border-light); }   /* the frame's 40px LINE, rotated: 0 in flow */
.dlcard__actions { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.dlcard__btn { border-radius: var(--radius-sm); font-size: 13px; line-height: 17px; }
.dlcard__btn--change { width: 180px; min-height: 44px; padding: 0; }
.dlcard__note { font-size: 12px; line-height: 16px; color: var(--color-muted-2); }

.dlgroup { display: flex; flex-direction: column; gap: 8px; min-width: 0; margin: 0; padding: 0; border: 0; }
.dlgroup__label { font-weight: 700; font-size: 13px; line-height: 17px; text-transform: uppercase; color: var(--color-ink); }
.period { display: flex; gap: 12px; }
.period__opt { position: relative; display: flex; align-items: center; justify-content: center; flex: 1; min-height: 41px; padding: 12px 0; border-radius: var(--radius-sm); box-shadow: inset 0 0 0 1px var(--color-border-light); cursor: pointer; transition: background-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease); }
.period__opt:hover { background: var(--color-card-2); }
.period__text { font-weight: 700; font-size: 13px; line-height: 17px; text-transform: uppercase; color: var(--color-muted-2); }
.period__opt:has(.period__input:checked) { background: var(--color-brand); box-shadow: none; }
.period__opt:has(.period__input:checked) .period__text { font-weight: 800; color: var(--color-ink); }
.period__opt:has(.period__input:focus-visible) { box-shadow: var(--focus-ring-light); }
.amount { display: flex; align-items: center; gap: 12px; min-height: 49px; padding: 14px; border-radius: var(--radius-sm); background: var(--color-card-2); box-shadow: inset 0 0 0 1px var(--color-border-light); }
.amount:focus-within { box-shadow: inset 0 0 0 1px var(--color-brand), var(--focus-ring-light); }
.amount__currency, .amount__input { font-family: var(--font-mono); font-weight: 800; font-size: 16px; line-height: 21px; color: var(--color-ink); }
.dl-col .dlform .field .amount__input.amount__input { flex: 1;   /* outweighs components.css .field input:not(…) */ min-width: 0; min-height: 0; padding: 0; border: 0; background: none; outline: none; }
.dlform .field.has-error .amount { box-shadow: inset 0 0 0 1px var(--color-red); }
.dlcard__row { display: flex; align-items: center; align-self: flex-start; gap: 16px; }
.dlcard__btn--review { padding: 12px 24px; background: var(--color-surface); color: var(--color-text); font-weight: 700; }
.dlcard__btn--review:hover { background: var(--color-surface-2); }
.dlcard__btn--confirm { padding: 12px 24px; }
.dlcard__cancel { font-weight: 700; font-size: 13px; line-height: 17px; color: var(--color-muted-2); text-decoration: none; }
.dlcard__cancel:hover { color: var(--color-ink); text-decoration: underline; }
.compare { display: flex; align-items: center; gap: 24px; min-height: 84px; padding: 20px; border-radius: var(--radius-sm); background: var(--color-card-2); }
.compare__col { display: flex; flex-direction: column; gap: 4px; flex: 1; min-width: 0; }
.compare__label { font-weight: 700; font-size: 11px; line-height: 14px; text-transform: uppercase; color: var(--color-muted-2); }
.compare__label--new { color: var(--color-red); }
.compare__value { font-family: var(--font-mono); font-weight: 800; font-size: 20px; line-height: 26px; color: var(--color-muted-2); }
.compare__value--new { color: var(--color-ink); }
.compare__arrow { display: flex; flex: none; width: 24px; height: 24px; color: var(--color-muted-2); }
.compare__arrow-icon { width: 24px; height: 24px; }
.compare__arrow-icon--down { display: none; }
.dlcard__cooling { font-size: 13px; line-height: 20px; color: var(--color-muted-2); }

.dldir { display: flex; flex-direction: column; gap: 24px; flex: 0 0 360px; width: 360px; padding: 24px; border-radius: 6px; background: var(--color-surface); box-shadow: inset 0 0 0 1px var(--color-border); }
.dldir__title { font-family: var(--font-narrow); font-weight: 700; font-size: 16px; line-height: 22px; text-transform: uppercase; color: var(--color-text); }
.dldir__stack { display: contents; }
.dldir__block { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.dldir__eyebrow { font-family: var(--font-mono); font-weight: 700; font-size: 12px; line-height: 16px; text-transform: uppercase; color: var(--color-brand); }
.dldir__name { align-self: stretch; font-weight: 800; font-size: 14px; line-height: 18px; text-transform: uppercase; color: var(--color-text); }
.dldir__text { align-self: stretch; font-size: 13px; line-height: 18px; color: var(--color-muted); }
.dldir__link { font-weight: 700; font-size: 13px; line-height: 17px; text-transform: uppercase; color: var(--color-brand); text-decoration: none; }
.dldir__link:hover, .dldir__phone:hover { text-decoration: underline; }
.dldir__line { align-self: stretch; height: 1px; margin: 0 0 -1px; border: 0; background: var(--color-border); }   /* Figma LINE: 1px paint, 0 in flow */
.dldir__call { display: flex; flex-direction: column; align-items: flex-start; align-self: stretch; gap: 4px; }
.dldir__phone { font-family: var(--font-mono); font-weight: 800; font-size: 20px; line-height: 26px; color: var(--color-brand); text-decoration: none; }
.dldir__note { font-size: 11px; line-height: 14px; color: var(--color-muted); }

/* ── 05 how your limit works ──────────────────────────────────────────── */
.dlhow { display: flex; flex-direction: column; gap: 32px; padding: 64px var(--container-pad); background: var(--color-bg); box-shadow: inset 0 1px 0 var(--color-border), inset 0 -1px 0 var(--color-border); }
.dlhow__title, .dltools__title { font-family: var(--font-display); font-size: 28px; line-height: 30px; text-transform: uppercase; color: var(--color-text); }
.dlsteps { display: flex; align-items: flex-start; gap: 24px; min-height: 209px; }
.dlstep { display: flex; flex-direction: column; gap: 16px; flex: 1; min-width: 0; padding: 32px; border-radius: 6px; }
.dlstep--purple { background: var(--color-purple); }
.dlstep--light { background: var(--color-card-2); box-shadow: inset 0 0 0 1px var(--color-border-light); }
.dlstep--dark { background: var(--color-surface); box-shadow: inset 0 0 0 1px var(--color-border); }
.dlstep__num { font-family: var(--font-mono); font-weight: 800; font-size: 28px; line-height: 36px; color: var(--color-brand); }
.dlstep--light .dlstep__num { color: var(--color-purple); }
.dlstep__title { font-weight: 700; font-size: 18px; line-height: 23px; color: var(--color-text); }
.dlstep--light .dlstep__title { color: var(--color-ink); }
.dlstep__text { font-size: 13px; line-height: 18px; color: var(--color-muted); }
.dlstep--purple .dlstep__text { color: var(--color-text); opacity: .9; }
.dlstep--light .dlstep__text { color: var(--color-muted-2); }

/* ── 06 other tools ───────────────────────────────────────────────────── */
.dltools { display: flex; flex-direction: column; gap: 32px; padding: 64px var(--container-pad); background: var(--color-bg); }
.tools { display: flex; flex-direction: column; }
.tools__line { display: none; }
.tool { box-shadow: inset 0 -1px 0 var(--color-border); transition: background-color var(--dur-fast) var(--ease); }
.tool:hover { background: var(--color-surface); }
.tool__row { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 66px; padding: 20px 16px; }
.tool__left { display: flex; align-items: center; gap: 32px; min-width: 0; }
.tool__num { font-family: var(--font-mono); font-weight: 800; font-size: 16px; line-height: 21px; color: var(--color-purple); }
.tool__title { font-family: var(--font-display); font-size: 24px; line-height: 26px; text-transform: uppercase; color: var(--color-text); white-space: nowrap; }
.tool__desc { flex: none; width: 250px; font-size: 14px; line-height: 18px; color: var(--color-muted); }   /* fixed 250px box in the frame */
.tool__link { font-weight: 700; font-size: 13px; line-height: 17px; color: var(--color-brand); text-decoration: none; white-space: nowrap; }
.tool__link:hover { text-decoration: underline; }

/* ── mobile (390 frame) ───────────────────────────────────────────────── */
@media (max-width: 1199px) {
  .dlhero { gap: 12px; min-height: 0; padding: 24px var(--container-pad); }
  .dlhero__eyebrow { gap: 6px; font-size: 11px; line-height: 14px; }
  .dlhero__brand { color: #f5a623; }   /* one-off amber from the mobile frame */
  .dlhero__text { gap: 8px; max-width: none; }
  .dlhero__title { font-size: 42px; line-height: 44px; }
  .dlhero__lead { font-size: 14px; line-height: 20px; }
  .dlhero__sub { font-size: 12px; line-height: 18px; }

  .dlws { display: block; padding: 0; }
  .dl-col { display: block; }
  .dl-gate { padding: 24px var(--container-pad); border-radius: 0; }
  .dl-gate__card { width: auto; padding: 24px; top: 72px; }
  .dlcard, .dlcard--edit, .dlcard--review { gap: 20px; padding: 16px var(--container-pad); border-radius: 0; background: var(--color-card-2); box-shadow: none; }
  .dlcard--edit { box-shadow: inset 0 1px 0 var(--color-border-light), inset 0 -1px 0 var(--color-border-light); }
  .dlcard__head { gap: 4px; }
  .dlcard__title { font-size: 16px; line-height: 22px; }
  .dlcard__line { display: block; height: 1px; margin: 0 0 -1px; border: 0; background: var(--color-border-light); }
  .limit-now { gap: 4px; padding: 16px; background: var(--color-card); }
  .limit-now__row { flex-direction: column; align-items: flex-start; gap: 2px; min-height: 0; }
  .limit-now__per { font-weight: 700; font-size: 13px; line-height: 17px; text-transform: uppercase; }
  .limit-meta { flex-direction: column; align-items: stretch; gap: 12px; min-height: 0; padding: 0; background: none; box-shadow: none; }
  .limit-meta__item { flex-direction: row; align-items: center; justify-content: space-between; gap: 12px; flex: none; min-height: 17px; }
  .limit-meta__item dd { font-size: 13px; line-height: 17px; }
  .limit-meta__sep { width: auto; height: 1px; margin: 0 0 -1px; border: 0; background: var(--color-border-light); }
  .dlcard__actions { align-items: stretch; gap: 12px; }
  .dlcard__btn--change { width: 100%; min-height: 52px; font-size: 14px; line-height: 18px; }

  .dlgroup__label { font-size: 12px; line-height: 16px; }
  .period { gap: 4px; min-height: 48px; padding: 4px; border-radius: var(--radius-sm); background: var(--color-card); box-shadow: inset 0 0 0 1px var(--color-border-light); }
  .period__opt { min-height: 40px; box-shadow: none; }
  .period__text { font-size: 12px; line-height: 16px; }
  .amount { min-height: 52px; background: var(--color-card); }
  .dlcard__row { flex-direction: column; align-items: stretch; align-self: auto; gap: 12px; }
  .dlcard__btn--review { min-height: 52px; padding: 0; background: var(--color-bg); }
  .dlcard__btn--confirm { min-height: 56px; padding: 0; font-size: 14px; line-height: 18px; }
  .dlcard__cancel { text-align: center; }
  .compare { flex-direction: column; align-items: stretch; gap: 12px; min-height: 0; padding: 0; background: none; }
  .compare__col { flex: none; padding: 16px; border-radius: var(--radius-sm); background: var(--color-card); box-shadow: inset 0 0 0 1px var(--color-border-light); }
  .compare__col--new { box-shadow: inset 0 0 0 2px var(--color-brand); }
  .compare__label { font-size: 10px; line-height: 13px; }
  .compare__arrow { align-self: center; width: 16px; height: 16px; }
  .compare__arrow-icon--right { display: none; }
  .compare__arrow-icon--down { display: block; width: 16px; height: 16px; }
  .dlcard__cooling { min-height: 78px; padding: 12px; border-radius: var(--radius-sm); background: #fff9e6; box-shadow: inset 0 0 0 1px #ffe0b2; font-size: 12px; line-height: 18px; color: #b78103; }   /* amber strip from the mobile frame */

  .dldir { flex: none; width: auto; gap: 20px; padding: 20px; border-radius: 0; background: var(--color-bg); box-shadow: inset 0 1px 0 var(--color-border), inset 0 -1px 0 var(--color-border); }
  .dldir__stack { display: flex; flex-direction: column; gap: 20px; }
  .dldir__block { gap: 8px; }
  .dldir__block--help { gap: 10px; }
  .dldir__call { gap: 2px; }

  .dlhow { gap: 20px; padding: 20px; box-shadow: none; }
  .dlhow__title, .dltools__title { font-size: 20px; line-height: 22px; }
  .dlsteps { flex-direction: column; align-items: stretch; gap: 16px; min-height: 0; }
  .dlstep { gap: 8px; flex: none; padding: 20px; }
  .dlstep--light, .dlstep--dark { box-shadow: none; }
  .dlstep--dark { box-shadow: inset 0 0 0 1px var(--color-border); }
  .dlstep__num { font-size: 24px; line-height: 31px; }
  .dlstep__title { font-size: 16px; line-height: 21px; }

  .dltools { gap: 16px; padding: 20px; box-shadow: inset 0 1px 0 var(--color-border), inset 0 -1px 0 var(--color-border); }
  .tools__line { display: block; height: 1px; margin: 0 0 -1px; border: 0; background: var(--color-border); }
  .tool { box-shadow: none; }
  .tool:hover { background: none; }
  .tool__row { display: grid; grid-template-columns: auto 1fr auto; column-gap: 12px; row-gap: 6px; align-items: center; min-height: 0; padding: 12px 0; }
  .tool__left { display: contents; }
  .tool__num { grid-column: 1; grid-row: 1; font-size: 14px; line-height: 18px; }
  .tool__title { grid-column: 2; grid-row: 1; font-size: 18px; line-height: 20px; }
  .tool__desc { grid-column: 1 / -1; grid-row: 2; width: auto; font-size: 13px; line-height: 17px; }
  .tool__link { grid-column: 3; grid-row: 1; font-size: 12px; line-height: 16px; }
}