/* Legal / policy pages — one template behind four frames:
 * terms-conditions, privacy-policy, cookie-policy, deposit-limits.
 * These frames pad the page 120 instead of 48. */

.page--legal { --container-pad: 120px; --container: 1200px; }

/* ── hero band: 1440×320, pad 0/120 ───────────────────────────────────── */
.legal-hero { background: var(--color-surface-3); }
.legal-hero__inner {
  position: relative;
  display: flex; align-items: center;
  min-height: 320px;
}
.legal-hero__stack { display: flex; flex-direction: column; gap: var(--space-16); width: 720px; }
.legal-hero__stack .eyebrow { font-size: var(--fs-3xs); line-height: 12px; letter-spacing: .18em; text-transform: uppercase; }
.legal-hero__stack .eyebrow--rule::before { width: 16px; }
.legal-hero__title {
  color: var(--color-text-alt);
  font-family: var(--font-display); font-weight: 900;
  font-size: 44px; line-height: 55px;
}
.legal-hero__lead { color: var(--color-muted-2); font-family: var(--font-alt); font-size: var(--fs-base); line-height: 21px; }
/* The frame's oversized watermark: transparent fill, so it reads as texture. */
.legal-hero__decor {
  position: absolute; right: 0; top: 50%; translate: 0 -50%;
  color: transparent; -webkit-text-stroke: 1px var(--color-border);
  font-family: var(--font-display); font-weight: 900;
  font-size: 130px; line-height: 161px;
  pointer-events: none; user-select: none;
}

/* ── body: sidebar 260 + article 860, gap 80, pad 80/120 ──────────────── */
.legal-body { padding-block: var(--space-80); background: var(--color-surface-2); }
.legal-body__inner { display: flex; align-items: flex-start; gap: var(--space-80); }

.legal-index {
  display: flex; flex-direction: column; gap: var(--space-24);
  width: 260px; flex: none;
  position: sticky; top: 130px;
}
.legal-index__title {
  color: var(--color-brand-2);
  font-family: var(--font-display); font-weight: 800;
  font-size: var(--fs-2xs); line-height: 14px; letter-spacing: 1.5px; text-transform: uppercase;
}
.legal-index__list { display: flex; flex-direction: column; }
.legal-index__item {
  display: flex; align-items: center; gap: var(--space-12);
  min-height: 41px; padding: 12px;
  text-decoration: none;
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.legal-index__item:hover { background: var(--color-surface-4); }
.legal-index__item.is-active { background: var(--color-chip); }
.legal-index__no {
  color: var(--color-muted-2);
  font-family: var(--font-display); font-weight: 800;
  font-size: var(--fs-2xs); line-height: 14px; letter-spacing: .5px;
}
.legal-index__label {
  color: var(--color-muted-2);
  font-family: var(--font-alt); font-weight: 500;
  font-size: var(--fs-sm); line-height: 17px;
}
.legal-index__item.is-active .legal-index__no { color: var(--color-brand-2); }
.legal-index__item.is-active .legal-index__label { color: var(--color-text-alt); font-weight: 700; }

.legal-article { display: flex; flex-direction: column; gap: var(--space-48); width: 860px; flex: none; }
.clause { display: flex; gap: var(--space-32); padding-bottom: var(--space-48); }

.clause__no {
  width: 64px; flex: none;
  color: var(--color-brand-2);
  font-family: var(--font-display); font-weight: 900;
  font-size: var(--fs-lead); line-height: 22px;
}
.clause__body { display: flex; flex-direction: column; gap: var(--space-16); min-width: 0; }
.clause__title {
  color: var(--color-text-alt);
  font-family: var(--font-display); font-weight: 800;
  font-size: var(--fs-body); line-height: 20px;
}
.clause__text, .clause__list li {
  color: var(--color-muted-2);
  font-family: var(--font-alt); font-size: var(--fs-base); line-height: 22px;
}
.clause__list { display: flex; flex-direction: column; gap: var(--space-8); }
.clause__list li { display: flex; gap: var(--space-8); }
.clause__list li::before { content: "•"; color: var(--color-brand-2); flex: none; }

/* ── mobile: the 390 legal frames ─────────────────────────────────────── */
@media (max-width: 1199px) {
  .page--legal { --container-pad: var(--container-pad-m); }

  /* hero 390×249: pad 32/16, gap 12 */
  .legal-hero__inner { flex-direction: column; align-items: flex-start; min-height: 0; padding-block: var(--space-32); }
  .legal-hero__stack { width: 100%; gap: var(--space-16); }
  .legal-hero__stack .eyebrow { font-size: 8px; line-height: 10px; }
  .legal-hero__stack .eyebrow--rule::before { width: 12px; }
  .legal-hero__title { font-size: var(--fs-h3); line-height: 35px; }
  .legal-hero__lead { font-family: var(--font-body); font-size: var(--fs-sm); line-height: 20px; }
  .legal-hero__decor { display: none; }

  /* index 390×… : pad 24/16, gap 16; article: pad 32/16, gap 32 */
  .legal-body { padding-block: 0; }
  .legal-body .container { padding-inline: 0; }
  .legal-body__inner { flex-direction: column; gap: 0; }
  .legal-index {
    position: static; width: 100%; gap: var(--space-16);
    padding: var(--space-24) var(--container-pad-m);
  }
  .legal-index__title { font-size: var(--fs-2xs); line-height: 14px; }
  .legal-index__list { gap: 1px; }
  .legal-index__item { min-height: 36px; padding: 10px 12px; gap: 10px; }
  .legal-index__item.is-active { box-shadow: inset 3px 0 0 var(--color-brand-2); }
  .legal-index__no { font-size: var(--fs-3xs); line-height: 12px; }
  .legal-index__label { font-family: var(--font-body); font-weight: 500; font-size: var(--fs-xs); line-height: 16px; }
  .legal-index__item.is-active .legal-index__label { font-weight: 700; }

  .legal-article { width: 100%; gap: var(--space-32); padding: var(--space-32) var(--container-pad-m); }
  /* The 390 frame stacks the number above the heading instead of beside it. */
  .clause { flex-direction: column; gap: var(--space-12); padding-bottom: var(--space-24); }
  .clause__no { width: auto; font-size: var(--fs-body); line-height: 20px; }
  .clause__body { gap: var(--space-12); }
  .clause__title { font-size: var(--fs-xs); line-height: 15px; }
  .clause__text, .clause__list li { font-family: var(--font-body); font-size: var(--fs-sm); line-height: 21px; }
}

/* 404 uses the legal hero; the two buttons sit under the lead. */
.legal-hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-12); margin-top: var(--space-8); }
.legal-hero__actions .btn--primary { background: var(--color-brand-2); }
.legal-hero__actions .btn--ghost { color: var(--color-text-alt); }

/* Deposit-limit tool (clause 10) */
.clause--tool { padding-top: var(--space-48); border-top: 1px solid var(--color-border); }
.limit-form { display: flex; flex-direction: column; gap: var(--space-20); padding: var(--space-24); background: var(--color-surface-3); }
.limit-form__periods { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-8); margin: 0; padding: 0; border: 0; }
.limit-form__periods legend { width: 100%; margin-bottom: var(--space-8); }
.limit-form__period { position: relative; }
.limit-form__period input { position: absolute; inset: 0; opacity: 0; }
.limit-form__period span {
  display: inline-flex; align-items: center; min-height: 44px; padding: 10px 16px;
  background: var(--color-surface-2); color: var(--color-text-alt); cursor: pointer;   /* 15:1; the chip grey gave 3.9 */
  font-family: var(--font-display); font-weight: 700; font-size: var(--fs-sm); line-height: 16px;
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.limit-form__period input:checked + span { background: var(--color-brand-2); color: var(--color-on-brand); }
.limit-form__period input:focus-visible + span { box-shadow: var(--focus-ring); }
.limit-form__period input:disabled + span { opacity: .5; cursor: not-allowed; }
.limit-form__amount { max-width: 320px; }
.limit-form__amount .field__label { color: var(--color-brand-2); letter-spacing: normal; }
.limit-form__amount input { background: var(--color-surface-2); color: var(--color-text-alt); }
.limit-form__submit { align-self: flex-start; background: var(--color-brand-2); }
.limit-form__current { color: var(--color-text-alt); }

/* The terms frame (72:586) draws the 390 hero with gap 12 and a 9/11 eyebrow. */
@media (max-width: 1199px) {
  .page--legal-terms .legal-hero__stack { gap: var(--space-12); }
  .page--legal-terms .legal-hero__stack .eyebrow { font-size: var(--fs-4xs); line-height: 11px; }
}