/* The Source Finance — legal pages (Terms & conditions, Privacy policy).
   Title block, then numbered sections in a readable column with the contents list beside it
   (contents list styles in reading.css). */

.legal { padding: 140px 0 120px; }
.legal__wrap { width: 100%; max-width: 1248px; margin-inline: auto; padding-inline: 24px; }

/* Title block: label, h1, "Last updated", draft notice */
.legal__head { max-width: 720px; margin-inline: auto; display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; }
.legal__updated { font-family: var(--f-mono); font-size: 12px; line-height: 1.3; letter-spacing: .06em; text-transform: uppercase; color: var(--muted-2); }
.legal__notice { margin-top: 14px; max-width: 640px; padding: 16px 20px; text-align: left; }
.legal__notice .feature__text { font-size: 14px; line-height: 1.35; }

/* Contents beside a column of about 70 characters per line */
.legal__grid { margin-top: 80px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 572px) minmax(0, 1fr); column-gap: 64px; }
.legal__aside { grid-column: 1; justify-self: end; width: 100%; max-width: 240px; }
.legal__body { grid-column: 2; min-width: 0; font-size: 17px; line-height: 1.7; color: var(--muted); }
.legal__intro > * + * { margin-top: 16px; }
.legal__intro { padding-bottom: 8px; font-size: 18px; line-height: 1.6; color: var(--fg); }

.legal__sec { margin-top: 48px; padding-top: 40px; border-top: 1px solid rgba(255, 255, 255, .08); }
.legal__sec > * + * { margin-top: 16px; }
.legal__h { display: flex; align-items: baseline; gap: 14px; font-variation-settings: "opsz" 32; font-weight: 400; font-size: 28px; line-height: 1.2; letter-spacing: -.025em; color: var(--fg); text-wrap: balance; scroll-margin-top: 104px; }
.legal__sec > .legal__h + * { margin-top: 18px; }
.legal__n { flex: none; display: inline-flex; align-items: center; justify-content: center; min-width: 34px; height: 24px; padding: 0 7px; border-radius: 7px; background: rgba(255, 255, 255, .06); box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, .12); font-family: var(--f-mono); font-size: 12px; font-weight: 400; letter-spacing: .04em; color: var(--muted); transform: translateY(-3px); }
.legal__h3 { display: flex; align-items: baseline; gap: 12px; font-family: var(--f-display); font-variation-settings: "opsz" 32; font-weight: 500; font-size: 19px; line-height: 1.35; letter-spacing: -.015em; color: var(--fg); }
.legal__sec > * + .legal__h3 { margin-top: 32px; }
.legal__h3 .legal__n { min-width: 0; height: 22px; font-size: 11px; color: var(--muted-2); transform: translateY(-2px); }

.legal__body ul { display: flex; flex-direction: column; gap: 8px; }
.legal__body li { position: relative; padding-left: 24px; }
.legal__body li::before { content: ""; position: absolute; left: 4px; top: .82em; width: 8px; height: 1.5px; border-radius: 2px; background: var(--muted-3); }
.legal__body b { font-weight: 500; color: var(--fg); }
.legal__body strong { font-weight: 600; color: var(--fg); }
.legal__body a { color: var(--fg); text-decoration: underline; text-underline-offset: 4px; text-decoration-color: rgba(201, 165, 78, .5); transition: text-decoration-color .25s; }
.legal__body a:hover { text-decoration-color: var(--accent); }

/* ---------- Tablet ---------- */
@media (max-width: 1199px) {
  .legal__grid { grid-template-columns: minmax(0, 1fr); max-width: 572px; margin: 56px auto 0; }
  .legal__aside, .legal__body { grid-column: 1; }
  .legal__aside { justify-self: stretch; max-width: none; margin-bottom: 40px; }
}

/* ---------- Phone ---------- */
@media (max-width: 809px) {
  .legal { padding: 120px 0 96px; }
  .legal__wrap { padding-inline: 16px; }
  .legal__grid { margin-top: 40px; }
  .legal__aside { margin-bottom: 32px; }
  .legal__body { font-size: 16px; line-height: 1.65; }
  .legal__intro { font-size: 17px; }
  .legal__sec { margin-top: 36px; padding-top: 32px; }
  .legal__h { font-size: 23px; gap: 12px; }
}