/* Legal pages (terms, privacy, refund, cookies, acceptable use) and the cookie banner.
   Built by _legal/build.py. Same fonts and colours as the landing page. */
@font-face { font-family: "TTCommons"; src: url("/assets/fonts/TTCommons-Regular.ttf") format("truetype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "TTCommons"; src: url("/assets/fonts/TTCommons-DemiBold.ttf") format("truetype"); font-weight: 600; font-display: swap; }

:root {
  --lg-primary: #ff7224;
  --lg-primary-dark: #d9561a;
  --lg-ink: #2f2628;
  --lg-text: #504246;
  --lg-muted: #7d6f72;
  --lg-peach: #f9e0d4;
  --lg-sand: #f6f1ee;
  --lg-line: #eadcd5;
  --lg-bg: #ffffff;
  --lg-font: "TTCommons", Helvetica, Arial, sans-serif;
}
.lg-ar { --lg-font: "Cairo", "TTCommons", Tahoma, Arial, sans-serif; }

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 88px; }
body.lg { margin: 0; background: var(--lg-bg); color: var(--lg-text); font: 400 18px/1.6 var(--lg-font); -webkit-font-smoothing: antialiased; }
.lg-ar { font-size: 17px; line-height: 1.85; }
.lg a { color: var(--lg-primary-dark); }
.lg a:hover { color: var(--lg-primary); }

.lg-skip { position: absolute; inset-inline-start: -999px; top: 8px; background: var(--lg-ink); color: #fff !important; padding: 8px 14px; border-radius: 8px; z-index: 20; }
.lg-skip:focus { inset-inline-start: 8px; }

/* header */
.lg-header { position: sticky; top: 0; z-index: 10; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px clamp(16px, 4vw, 48px); background: rgba(255, 255, 255, .94); backdrop-filter: blur(8px); border-bottom: 1px solid var(--lg-line); }
.lg-logo img { display: block; width: auto; height: 28px; }
.lg-header nav { display: flex; align-items: center; gap: clamp(10px, 2vw, 26px); flex-wrap: wrap; justify-content: flex-end; }
.lg-header nav a { color: var(--lg-text); text-decoration: none; font-size: 16px; }
.lg-header nav a:hover { color: var(--lg-primary); }
.lg .lg-btn { background: var(--lg-primary); color: #fff; padding: 9px 18px; border-radius: 999px; font-weight: 600; }
.lg .lg-btn:hover { background: var(--lg-primary-dark); color: #fff; }

/* title band */
.lg-hero { background: var(--lg-peach); padding: clamp(36px, 6vw, 72px) clamp(16px, 4vw, 48px) clamp(28px, 4vw, 48px); }
.lg-hero > * { max-width: 1120px; margin-inline: auto; }
.lg-crumbs { font-size: 15px; color: var(--lg-muted); }
.lg-crumbs a { color: var(--lg-muted); text-decoration: none; }
.lg-hero h1 { margin-block: 10px 6px; color: var(--lg-ink); font-size: clamp(34px, 5vw, 56px); line-height: 1.1; font-weight: 600; }
.lg-updated { margin: 0; color: var(--lg-muted); font-size: 16px; }

/* body */
.lg-layout { max-width: 1120px; margin: 0 auto; padding: 40px clamp(16px, 4vw, 48px) 72px; display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 56px; align-items: start; }
.lg-toc { position: sticky; top: 96px; font-size: 15px; line-height: 1.45; max-height: calc(100vh - 120px); overflow: auto; }
.lg-toc p { margin: 0 0 10px; font-weight: 600; color: var(--lg-ink); }
.lg-toc ol { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.lg-toc a { color: var(--lg-text); text-decoration: none; }
.lg-toc a:hover { color: var(--lg-primary); }
.lg-body { min-width: 0; max-width: 760px; }
.lg-body h2 { margin: 44px 0 12px; color: var(--lg-ink); font-size: 26px; line-height: 1.25; font-weight: 600; }
.lg-body h2:first-of-type { margin-top: 28px; }
.lg-body h3 { margin: 26px 0 8px; color: var(--lg-ink); font-size: 20px; font-weight: 600; }
.lg-body p, .lg-body li { margin: 0 0 12px; }
.lg-body ul { padding-inline-start: 22px; margin: 0 0 16px; }
.lg-body strong { color: var(--lg-ink); font-weight: 600; }
.lg-lead { font-size: 20px; color: var(--lg-ink); }
.lg-note { background: var(--lg-sand); border-inline-start: 4px solid var(--lg-primary); padding: 12px 16px; border-radius: 8px; font-size: 15px; }
.lg-body table { width: 100%; border-collapse: collapse; margin: 8px 0 20px; font-size: 16px; display: block; overflow-x: auto; }
.lg-body th, .lg-body td { text-align: start; vertical-align: top; padding: 10px 12px; border-bottom: 1px solid var(--lg-line); }
.lg-body th { background: var(--lg-sand); color: var(--lg-ink); font-weight: 600; white-space: nowrap; }
.lg-body code { font-size: .88em; background: var(--lg-sand); padding: 1px 6px; border-radius: 5px; direction: ltr; unicode-bidi: isolate; }

/* footer */
.lg-footer { background: var(--lg-sand); padding: 40px clamp(16px, 4vw, 48px) 28px; font-size: 16px; }
.lg-footer-cols { max-width: 1120px; margin: 0 auto 28px; display: flex; flex-wrap: wrap; gap: 32px 80px; }
.lg-footer-title { margin: 0 0 10px; font-weight: 600; color: var(--lg-ink); }
.lg-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.lg-footer a { color: var(--lg-text); text-decoration: none; }
.lg-footer a:hover, .lg-footer a[aria-current] { color: var(--lg-primary); }
.lg-legal-line { max-width: 1120px; margin: 0 auto; padding-top: 20px; border-top: 1px solid var(--lg-line); display: flex; align-items: center; gap: 16px; flex-wrap: wrap; color: var(--lg-muted); font-size: 14px; }
.lg-powered { display: inline-flex; direction: ltr; }

@media (max-width: 900px) {
  .lg-layout { grid-template-columns: 1fr; gap: 24px; padding-top: 24px; }
  .lg-toc { position: static; max-height: none; background: var(--lg-sand); border-radius: 12px; padding: 16px 18px; }
}
@media (max-width: 640px) {
  body.lg { font-size: 17px; }
  .lg-header { flex-wrap: wrap; }
  .lg-header nav a:not(.lg-btn):not([hreflang]) { display: none; }
  .lg-logo img { height: 24px; }
}