/* Legal pages (templates/storefront/legal/*): a readable article on the cool canvas. */
.legal { max-width: 900px; padding-top: clamp(16px, 2.4vw, 32px); padding-bottom: clamp(32px, 5vw, 64px); }
.lg-hero { position: relative; overflow: hidden; isolation: isolate; border-radius: 28px; padding: clamp(22px, 4vw, 40px); background: linear-gradient(135deg, var(--mint), var(--surface) 65%); box-shadow: var(--shadow); }
.lg-hero::after { content: ""; position: absolute; z-index: -1; right: -70px; top: -90px; width: 260px; height: 260px; border-radius: 50%; border: 44px solid color-mix(in srgb, var(--brand) 10%, transparent); }
.lg-hero .crumbs { margin-bottom: 14px; }
.lg-hero h1 { font-size: clamp(1.9rem, 1.3rem + 2vw, 3rem); font-weight: 800; margin-top: 8px; }
.lg-hero p { color: var(--ink-2); margin-top: 10px; max-width: 64ch; }
.lg-tabs { margin-top: 18px; }
.lg-body { background: var(--surface); color: var(--ink); border-radius: 24px; box-shadow: var(--shadow); margin-top: 16px; padding: clamp(20px, 4vw, 48px); font-size: 1rem; line-height: 1.75; }
.lg-body > *:first-child { margin-top: 0; }
.lg-body h2 { font-size: 1.35rem; font-weight: 800; margin: 2em 0 .5em; padding-top: 1em; border-top: 1px solid var(--line); line-height: 1.2; }
.lg-body h2:first-child { border-top: 0; padding-top: 0; }
.lg-body h3 { font-size: 1.08rem; font-weight: 800; margin: 1.5em 0 .4em; line-height: 1.25; }
.lg-body p { margin: 0 0 1em; color: var(--ink-2); max-width: 72ch; }
.lg-body ul, .lg-body ol { margin: .4em 0 1.2em; padding-left: 1.4em; color: var(--ink-2); max-width: 70ch; }
.lg-body li { margin-bottom: .4em; }
.lg-body li::marker { color: var(--brand); }
.lg-body a { color: var(--brand); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.lg-body strong, .lg-body b { color: var(--ink); }
.lg-body table { width: 100%; border-collapse: collapse; margin: 1em 0; font-size: .92rem; }
.lg-body th, .lg-body td { text-align: left; padding: 10px; border-bottom: 1px solid var(--line); }
.lg-body blockquote { margin: 1em 0; padding: 12px 16px; border-radius: 14px; background: var(--mint); color: var(--ink); }
.lg-empty { color: var(--muted); }

/* grievance */
.lg-steps { list-style: none; margin: 16px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.lg-steps li { background: var(--surface); border-radius: 22px; padding: 18px; box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 6px; transition: transform .35s var(--ease); }
.lg-steps li:hover { transform: translateY(-4px); }
.lg-n { width: 40px; height: 40px; border-radius: 13px; background: var(--brand); color: var(--on-brand); display: grid; place-items: center; font-family: var(--f-display); font-weight: 800; margin-bottom: 6px; }
.lg-steps b { font-size: 1rem; }
.lg-steps li > span:last-child { font-size: .86rem; color: var(--muted); }
.lg-cta { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 16px; }
.lg-officer { background: var(--surface); border-radius: 24px; box-shadow: var(--shadow); padding: clamp(20px, 3vw, 32px); margin-top: 16px; }
.lg-officer h2 { font-size: 1.35rem; font-weight: 800; }
.lg-sub { color: var(--muted); font-size: .9rem; margin-top: 6px; }
.lg-officer dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin: 18px 0 0; }
.lg-officer .wide { grid-column: 1 / -1; }
.lg-officer dt { font-size: .7rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.lg-officer dd { margin: 4px 0 0; }
.lg-officer dd span { display: block; font-size: .84rem; color: var(--ink-2); }
.lg-officer dd a { color: var(--brand); font-weight: 800; }
.lg-warn { margin-top: 8px; font-size: .84rem; color: var(--hot); font-weight: 700; }
@media (max-width: 767px) {
  .lg-steps, .lg-officer dl { grid-template-columns: 1fr; }
  .lg-body { font-size: .95rem; }
}