/* lx.css — /privacy (Vera's spec, Sep 28 2026): "The Tabbed Binder". A
   lawyer's binder with thumb-index tabs: one per section, the one you are
   reading slides out red. home.css supplies the base; every class is lx-.
   The legal wording is untouched; only the markup around it changed. */
.lx { --rule: #E7E4DC; --mono: "IBM Plex Mono", ui-monospace, monospace; }

/* hero: the cover and the index page */
.lx-hero { padding: clamp(150px, 16vw, 200px) 0 140px; }
.lx-hero h1 { font-size: clamp(40px, 5vw, 64px); line-height: 1.06; letter-spacing: -0.02em; max-width: 12em; }
.lx-stamp { display: inline-grid; grid-template-columns: repeat(2, auto); gap: 14px 40px; margin-top: 40px; padding: 22px 26px; border: 1.5px solid var(--snow-2); font: 400 13px var(--mono); color: var(--snow-2); }
.lx-stamp dt { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; }
.lx-stamp dd { color: var(--snow); margin-top: 4px; }
.lx-stamp div:first-child { grid-column: 1 / -1; }
.lx-stamp div:first-child dd { font: 500 40px/1.1 var(--head); letter-spacing: -.02em; }
.lx .lx-stamp a { color: var(--snow); border-bottom: 1px solid currentColor; }
.lx-index { margin-top: 80px; padding-top: 32px; border-top: 1px solid var(--line-d); }
.lx-index__t { font: 500 12px var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--snow-2); }
.lx-index__cols { display: grid; grid-template-columns: 1fr 1fr; gap: 0 64px; margin-top: 20px; }
.lx-index ol { list-style: none; counter-reset: lx var(--start, 0); }
.lx-index ol[start="13"] { counter-reset: lx 12; }
.lx-index li { counter-increment: lx; border-bottom: 1px solid var(--line-d); }
.lx-index a { display: grid; grid-template-columns: 52px 1fr; align-items: baseline; padding: 12px 0; color: var(--snow); font-size: 16px; transition: color 150ms; }
.lx-index a::before { content: counter(lx); font: 500 20px var(--mono); color: var(--snow-2); }
.lx-index a:hover { color: var(--red-soft); }

/* the binder: a rail of tabs beside the pages */
.lx-binder { display: grid; grid-template-columns: 88px minmax(0, 68ch); justify-content: center; gap: 0 clamp(32px, 5vw, 72px); padding: 150px 24px 140px; }
.lx-rail { position: sticky; top: 92px; align-self: start; display: grid; gap: 3px; }
.lx-rail__l { font: 500 10px var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); margin: 0 0 4px; }
.lx-tab--a + .lx-rail__l { margin-top: 12px; }
.lx-tab { display: grid; place-items: center; width: 40px; height: 24px; font: 500 12px var(--mono); border-radius: 0 6px 6px 0; transition: transform 250ms cubic-bezier(.2,.7,.2,1), background 250ms, color 250ms; }
.lx-tab--a { background: var(--dark); color: var(--snow); }
.lx-tab--b { border: 1.5px solid var(--red); color: var(--red); background: #FFF; }
.lx-tab:hover { transform: translateX(6px); }
.lx-tab.is-here { transform: translateX(12px); background: var(--red); border-color: var(--red); color: #FFF; }


.lx-part + .lx-part { margin-top: 140px; }
.lx-divider { display: inline-block; height: 40px; line-height: 40px; padding: 0 20px; border-radius: 12px 12px 0 0; font: 500 13px var(--mono); letter-spacing: .12em; text-transform: uppercase; }
.lx-divider--a { background: var(--dark); color: var(--snow); }
.lx-divider--b { border: 1.5px solid var(--red); border-bottom: 0; color: var(--red); }
.lx-part h2 { font-size: clamp(36px, 4vw, 54px); line-height: 1.08; color: var(--ink); padding-top: 22px; border-top: 2px solid var(--ink); }
.lx-intro { font-size: 19px; color: var(--ink-2); margin-top: 22px; }

.lx-body { font-size: 17px; line-height: 1.7; color: var(--ink-2); }
.lx-body h3 { font: 600 24px/1.25 var(--head); color: var(--ink); margin-top: 72px; scroll-margin-top: 96px; }
.lx-body h3:first-child { margin-top: 64px; }
.lx-n { display: block; font: 600 56px/1 var(--head); color: var(--ink-2); opacity: .45; letter-spacing: -.04em; margin-bottom: 10px; }
.lx-body p, .lx-body ul, .lx-body ol { margin-top: 16px; }
.lx-body ul, .lx-body ol { padding-left: 22px; display: grid; gap: 8px; }
.lx-body ul { list-style: none; padding-left: 0; }
.lx-body ul li { position: relative; padding-left: 24px; }
.lx-body ul li::before { content: ""; position: absolute; left: 0; top: .82em; width: 12px; border-top: 2px solid var(--red); }
.lx-body strong { color: var(--ink); font-weight: 600; }
.lx-body a, .lx .link-quiet { color: var(--ink); border-bottom: 1px solid currentColor; }
.lx-scroll { overflow-x: auto; margin-top: 22px; border: 1px solid var(--line-l); border-radius: 8px; background: #FFF; }
.lx-table { width: 100%; border-collapse: collapse; font-size: 14px; line-height: 1.5; min-width: 560px; }
.lx-table th, .lx-table td { text-align: left; vertical-align: top; padding: 12px 16px; border-bottom: 1px solid var(--rule); }
.lx-table thead th { font: 500 11px var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); }
.lx-table tr:last-child td, .lx-table tr:last-child th { border-bottom: 0; }
.lx-micro { font-size: 14px; color: var(--ink-2); margin-top: 64px; padding-top: 20px; border-top: 1px solid var(--line-l); }

.lx-jump { display: none; }
.lx-jump:not(.is-shown) { display: none !important; }

@media (max-width: 860px) {
  .lx-index__cols { grid-template-columns: 1fr; }
  .lx-binder { grid-template-columns: minmax(0, 1fr); padding: 110px 20px; }
  .lx-rail { display: none; }
  .lx-stamp { grid-template-columns: 1fr; }
  .lx-jump { display: block; position: fixed; right: 16px; bottom: 16px; z-index: 40; padding: 10px 18px; border-radius: 999px; background: var(--dark); color: var(--snow); font-size: 14px; font-weight: 500; }
  body[data-scene="dark"] .lx-jump { background: var(--snow); color: var(--dark); }
}
@media (prefers-reduced-motion: reduce) { .lx-tab { transition: none; } }