/* trancemoto.com legal pages — generated by tools/site_build/build_legal_pages.py; do not edit by hand.
   Tokens mirror the landing page (Carbon Sport DS). */
:root {
  --primary: #A01C2E; --primary-glow: rgba(160,28,46,.35);
  --secondary: #4878A8; --link: #8FB2D8;
  --bg-page: #050508; --surface-card: #0E0E18; --surface-input: #141420; --surface-highest: #1C1C2C;
  --text-primary: #E8EAF8; --text-secondary: #9A9AC0; --text-disabled: #6A6A8C;
  --warning: #E0B83A; --surface-warning: #2A2406;
  --r-md: 12px; --r-lg: 16px; --r-full: 100px;
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { background: var(--bg-page); color: var(--text-primary); font: 400 16px/1.7 'DM Sans', system-ui, sans-serif; }
a { color: var(--link); text-underline-offset: 3px; }
a:hover { color: var(--text-primary); }
a:focus-visible, summary:focus-visible { outline: 2px solid var(--link); outline-offset: 3px; border-radius: 4px; }

.site-nav { display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 18px max(16px, 4vw); border-bottom: 1px solid rgba(232,234,248,.06); }
.logo { font: 400 26px 'Bebas Neue', sans-serif; letter-spacing: .06em; color: var(--text-primary); text-decoration: none; }
.logo span { color: var(--primary); }
.site-nav .back { font-size: 13px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
  color: var(--text-secondary); text-decoration: none; padding: 12px 4px; }
.site-nav .back:hover { color: var(--text-primary); }

main { max-width: 760px; margin: 0 auto; padding: 48px 16px 80px; }
h1 { font: 700 clamp(28px, 5vw, 40px)/1.15 'DM Sans', sans-serif; letter-spacing: -.01em; margin-bottom: 20px; }
h2 { font-size: 22px; line-height: 1.3; margin: 48px 0 12px; scroll-margin-top: 16px; }
h3 { font-size: 17px; line-height: 1.4; margin: 28px 0 8px; scroll-margin-top: 16px; }
h4 { font-size: 15px; margin: 20px 0 6px; }
p, ul, ol, .table-wrap, .callout { margin: 0 0 16px; }
ul, ol { padding-left: 24px; }
li { margin-bottom: 6px; }
strong { font-weight: 700; }
code { font: 13px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace; background: var(--surface-input);
  padding: 2px 6px; border-radius: 6px; }
hr { border: 0; border-top: 1px solid rgba(232,234,248,.08); margin: 36px 0; }

.callout { background: var(--surface-card); border-radius: var(--r-lg); padding: 16px 20px; border-left: 3px solid var(--secondary); }
.table-wrap { overflow-x: auto; background: var(--surface-card); border-radius: var(--r-lg); }
table { border-collapse: collapse; width: 100%; min-width: 560px; font-size: 14px; line-height: 1.55; }
th, td { text-align: left; vertical-align: top; padding: 12px 16px; border-bottom: 1px solid rgba(232,234,248,.06); }
th { color: var(--text-secondary); font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; background: var(--surface-input); }
tr:last-child td { border-bottom: 0; }

.toc { background: var(--surface-card); border-radius: var(--r-lg); padding: 4px 20px; margin: 28px 0 8px; }
.toc summary { cursor: pointer; font-weight: 700; padding: 14px 0; min-height: 44px; }
.toc ol { columns: 2 260px; column-gap: 32px; padding-left: 22px; margin: 0 0 14px; }
.toc li { break-inside: avoid; margin-bottom: 4px; font-size: 14px; }

/* draft state only */
.draft-banner { background: var(--surface-warning); border: 1px solid var(--warning); border-radius: var(--r-lg);
  padding: 16px 20px; margin-bottom: 28px; font-size: 14px; line-height: 1.6; }
.draft-banner p { margin: 0 0 6px; }
mark.ph { background: var(--warning); color: #1a1500; padding: 1px 6px; border-radius: 6px; font-size: .92em; font-weight: 600; }

.site-footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px;
  padding: 36px max(16px, 4vw); border-top: 1px solid rgba(232,234,248,.06); }
.site-footer nav { display: flex; flex-wrap: wrap; gap: 4px 20px; }
.site-footer a { font-size: 13px; color: var(--text-secondary); text-decoration: none; padding: 10px 0; }
.site-footer a:hover { color: var(--text-primary); }
.site-footer small { font-size: 12px; color: var(--text-disabled); }

@media (max-width: 600px) {
  main { padding-top: 32px; }
  h2 { font-size: 20px; margin-top: 40px; }
  th, td { padding: 10px 12px; }
}
@media print {
  body { background: #fff; color: #000; }
  a { color: #000; }
  .site-nav, .site-footer, .toc { display: none; }
  .callout, .table-wrap { background: none; border: 1px solid #ccc; }
  th { background: #eee; color: #000; }
}