/* legal: the public text pages (terms, privacy ... FAQ, 404, 500). Builds on /landing/tokens.css, base.css and end.css
 * (the footer). Class prefix .lg-. Black, Geist body, Google Sans Flex headings, hairlines, pure-white primary button. */

.lg { background: var(--lp-page); color: var(--lp-ink); }

/* ---------------------------------------------------------------- header */
.lg-head { position: sticky; top: 0; z-index: 20; height: var(--lp-nav-h); background: rgba(10, 10, 10, .88); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-bottom: 1px solid rgba(255, 255, 255, .07); }
.lg-head__in { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; max-width: 1280px; height: 100%; margin: 0 auto; padding: 0 var(--lp-gutter); }
.lg-brand { display: inline-flex; align-items: center; gap: 9px; justify-self: start; margin-left: -8px; padding: 6px 8px; border-radius: 10px; color: var(--lp-ink); font: 700 18px/1 var(--lp-font-display); letter-spacing: -0.01em; transition: background-color 160ms ease; }
.lg-brand img { width: 24px; height: 24px; }
.lg-brand:hover { background: var(--lp-hover); }
.lg-nav { display: flex; align-items: center; gap: 2px; }
.lg-nav a,
.lg-login { display: inline-flex; align-items: center; height: 36px; padding: 0 12px; border-radius: 10px; color: rgba(250, 250, 250, .78); font: 500 14px/1 var(--lp-font-body); transition: background-color 160ms ease, color 160ms ease; }
.lg-nav a:hover,
.lg-login:hover { background: var(--lp-hover); color: #fff; }
.lg-head__right { justify-self: end; display: flex; align-items: center; gap: 8px; }
.lg-cta { height: 40px; padding: 0 18px; font-size: 14px; font-weight: 500; }
.lg-brand:focus-visible,
.lg-nav a:focus-visible,
.lg-login:focus-visible,
.lg-doc a:focus-visible,
.lg-q summary:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* ---------------------------------------------------------------- the page */
.lg-main { width: 100%; max-width: 760px; margin: 0 auto; padding: 64px var(--lp-gutter) 120px; min-height: 60vh; }
.lg-doc { color: rgba(250, 250, 250, .78); font: 400 15px/26px var(--lp-font-body); overflow-wrap: anywhere; }
.lg-doc h1 { margin: 0 0 8px; color: var(--lp-ink); font: 600 40px/44px var(--lp-font-display); letter-spacing: -0.025em; }
.lg-updated { margin: 0 0 40px; color: var(--lp-ink-3); font-size: 13px; line-height: 20px; }
.lg-doc h2 { margin: 44px 0 10px; color: var(--lp-ink); font: 600 22px/30px var(--lp-font-display); letter-spacing: -0.015em; scroll-margin-top: 88px; }
.lg-doc h3 { margin: 28px 0 8px; color: var(--lp-ink); font: 600 16px/24px var(--lp-font-body); scroll-margin-top: 88px; }
.lg-doc p { margin: 0 0 14px; }
.lg-doc ul,
.lg-doc ol { margin: 0 0 16px; padding-left: 22px; }
.lg-doc ul { list-style: disc; }
.lg-doc ol { list-style: decimal; }
.lg-doc li { margin: 0 0 6px; padding-left: 4px; }
.lg-doc li::marker { color: var(--lp-ink-3); }
.lg-doc strong { color: var(--lp-ink); font-weight: 600; }
.lg-doc a { color: #fff; text-decoration: underline; text-decoration-color: rgba(255, 255, 255, .35); text-underline-offset: 3px; transition: text-decoration-color 160ms ease; }
.lg-doc a:hover { text-decoration-color: #fff; }
.lg-doc code { padding: 1px 6px; border-radius: 6px; background: var(--lp-surface-2); color: var(--lp-ink); font: 400 13px/20px var(--lp-font-mono); }

/* a decision that still needs the owner: loud on purpose so it cannot ship by accident */
.lg-todo { padding: 1px 6px; border-radius: 6px; background: rgba(249, 115, 22, .16); color: #fdba74; font: 500 13px/20px var(--lp-font-mono); }

/* tables scroll inside their own box; the page never scrolls sideways */
.lg-table { margin: 0 0 20px; overflow-x: auto; border: 1px solid var(--lp-hair); border-radius: 12px; -webkit-overflow-scrolling: touch; }
.lg-table table { width: 100%; min-width: 520px; border-collapse: collapse; font-size: 14px; line-height: 22px; }
.lg-table th,
.lg-table td { padding: 10px 14px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--lp-hair); }
.lg-table th { color: var(--lp-ink-muted); font-weight: 500; white-space: nowrap; }
.lg-table tr:last-child td { border-bottom: 0; }

/* FAQ: one closed row per question, plain browser disclosure */
.lg-q { border-bottom: 1px solid var(--lp-hair); }
.lg-q summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 52px; padding: 12px 8px; margin: 0 -8px; border-radius: 10px; color: var(--lp-ink); font: 500 16px/24px var(--lp-font-body); list-style: none; cursor: pointer; transition: background-color 160ms ease; }
.lg-q summary::-webkit-details-marker { display: none; }
.lg-q summary::after { content: ""; flex: none; width: 8px; height: 8px; border-right: 1.5px solid var(--lp-ink-3); border-bottom: 1.5px solid var(--lp-ink-3); transform: rotate(45deg); transition: transform 160ms ease; }
.lg-q[open] summary::after { transform: rotate(-135deg); }
.lg-q summary:hover { background: var(--lp-hover); }
.lg-q__a { padding: 4px 0 16px; }
.lg-doc h2 + .lg-q { border-top: 1px solid var(--lp-hair); }

/* 404 and 500 */
.lg-err { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; padding-top: 12vh; }
.lg-err__code { margin: 0; color: var(--lp-ink-3); font: 400 14px/20px var(--lp-font-mono); }
.lg-err h1 { margin: 0; color: var(--lp-ink); font: 600 40px/44px var(--lp-font-display); letter-spacing: -0.025em; }
.lg-err__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; }

@media (max-width: 720px) {
  .lg-nav { display: none; }
  .lg-login { display: none; }
  .lg-head__in { grid-template-columns: 1fr auto; }
  .lg-main { padding: 40px var(--lp-gutter) 80px; }
  .lg-doc h1,
  .lg-err h1 { font-size: 32px; line-height: 38px; }
  .lg-doc h2 { margin-top: 36px; font-size: 20px; line-height: 28px; }
  .lg-doc a { display: inline; }
}
@media (max-width: 380px) {
  .lg-cta { padding: 0 14px; }
  .lg-main { padding-left: 16px; padding-right: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .lg *, .lg *::before, .lg *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}