/* ============================================================================
   SWIRL Legal
   Editorial, restrained, typographic. Cream paper, ink, one warm accent.
   No pastel boxes, no soft-shadow cards. Hairlines and space do the work.
   ============================================================================ */

@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700;1,9..40,400;1,9..40,500&display=swap');

:root {
  --bg:          #FDFDF3;
  --ink:         #14140E;
  --ink-soft:    #3B3B33;
  --muted:       #6B6C60;
  --faint:       #9EA08F;
  --line:        #E3E5D2;
  --line-2:      #D3D5C0;
  --orange:      #EA5A0B;
  --orange-ink:  #AE4308;
  --wash:        #F6F6E7;

  --font: 'DM Sans', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --measure: 66ch;

  --s1: clamp(.8rem, .78rem + .1vw, .84rem);
  --s0: clamp(1.02rem, .99rem + .14vw, 1.08rem);
  --h3: clamp(1.12rem, 1.05rem + .3vw, 1.28rem);
  --h2: clamp(1.44rem, 1.28rem + .7vw, 1.85rem);
  --h1: clamp(2.6rem, 1.9rem + 3.1vw, 4.6rem);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 92px; }

body {
  margin: 0; background: var(--bg); color: var(--ink-soft);
  font-family: var(--font); font-size: var(--s0); line-height: 1.75;
  letter-spacing: -0.006em; font-weight: 400;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}

::selection { background: #16160f; color: #fdfdf3; }

/* progress */
.progress { position: fixed; inset: 0 auto auto 0; height: 2px; width: 0; background: var(--orange); z-index: 60; transition: width .1s linear; }

/* ---- header ---- */
.site-header { position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--bg) 86%, transparent);
  backdrop-filter: blur(12px) saturate(130%); -webkit-backdrop-filter: blur(12px) saturate(130%);
  border-bottom: 1px solid var(--line); }
.site-header .bar { max-width: 1120px; margin: 0 auto; padding: 15px clamp(20px, 4vw, 44px);
  display: flex; align-items: center; justify-content: space-between; }
.wordmark { font-weight: 700; font-size: 1.15rem; letter-spacing: -0.05em; color: var(--ink);
  text-transform: uppercase; text-decoration: none; line-height: 1; }
.wordmark .dot { color: var(--ink); }
.nav-docs { display: flex; gap: 26px; }
.nav-docs a { text-decoration: none; color: var(--muted); font-weight: 500; font-size: var(--s1);
  letter-spacing: .01em; padding: 4px 0; position: relative; transition: color .15s; white-space: nowrap; }
.nav-docs a:hover { color: var(--ink); }
.nav-docs a.active { color: var(--ink); }
.nav-docs a.active::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--orange); }

/* ---- layout ---- */
.shell { max-width: 1120px; margin: 0 auto; padding: 0 clamp(20px, 4vw, 44px); }
.layout { display: grid; grid-template-columns: 220px minmax(0,1fr); gap: clamp(32px, 6vw, 96px);
  align-items: start; padding: clamp(44px, 7vw, 96px) 0 120px; }

/* ---- toc ---- */
.toc { position: sticky; top: 92px; }
.toc-label { font-size: .68rem; letter-spacing: .18em; text-transform: uppercase; color: var(--faint);
  font-weight: 600; margin: 0 0 16px 1px; }
.toc ol { list-style: none; margin: 0; padding: 0; counter-reset: t; }
.toc li { counter-increment: t; }
.toc a { display: grid; grid-template-columns: 22px 1fr; align-items: baseline; gap: 4px;
  padding: 5px 0; color: var(--muted); text-decoration: none; font-size: .855rem; line-height: 1.35;
  transition: color .15s; }
.toc a::before { content: counter(t, decimal-leading-zero); color: var(--faint); font-size: .68rem;
  font-variant-numeric: tabular-nums; font-weight: 600; transition: color .15s; }
.toc a:hover { color: var(--ink); }
.toc a.active { color: var(--ink); font-weight: 500; }
.toc a.active::before { color: var(--orange); }

/* ---- article ---- */
.article { max-width: var(--measure); }
.kicker { font-size: .7rem; letter-spacing: .2em; text-transform: uppercase; color: var(--orange-ink); font-weight: 600; }
.doc-hero { margin-bottom: 8px; }
.doc-hero h1 { font-size: var(--h1); line-height: .98; letter-spacing: -0.045em; font-weight: 700;
  color: var(--ink); margin: 16px 0 0; }
.doc-hero .lede { font-size: clamp(1.1rem, 1rem + .5vw, 1.35rem); color: var(--muted); line-height: 1.5;
  font-weight: 400; margin: 22px 0 0; max-width: 42ch; }
.meta { margin: 26px 0 0; font-size: var(--s1); color: var(--muted); letter-spacing: 0; }
.meta b { color: var(--ink); font-weight: 600; }
.meta .sep { color: var(--line-2); margin: 0 10px; }

hr.rule { border: 0; border-top: 1px solid var(--line); margin: 40px 0 8px; }

section.block { scroll-margin-top: 92px; padding-top: 44px; }
h2 { font-size: var(--h2); line-height: 1.12; letter-spacing: -0.028em; font-weight: 700; color: var(--ink); margin: 10px 0 20px; }
h2 .num { display: block; font-size: .7rem; letter-spacing: .16em; color: var(--orange-ink);
  font-weight: 600; margin-bottom: 12px; font-variant-numeric: tabular-nums; }
h3 { font-size: var(--h3); font-weight: 600; letter-spacing: -0.015em; color: var(--ink); margin: 32px 0 10px; }
p { margin: 0 0 16px; }
.article a { color: var(--orange-ink); text-decoration: none; box-shadow: inset 0 -1px 0 color-mix(in srgb, var(--orange) 30%, transparent); transition: box-shadow .15s; }
.article a:hover { box-shadow: inset 0 -1px 0 var(--orange); }
strong { font-weight: 600; color: var(--ink); }

ul { list-style: none; margin: 0 0 18px; padding: 0; }
ul li { position: relative; padding-left: 22px; margin-bottom: 11px; }
ul li::before { content: ""; position: absolute; left: 2px; top: .72em; width: 5px; height: 5px; background: var(--orange); }

/* ---- editorial note ---- */
.note { margin: 28px 0; padding: 2px 0 2px 22px; border-left: 2px solid var(--ink); }
.note.accent { border-left-color: var(--orange); }
.note .k { display: block; font-size: .68rem; letter-spacing: .16em; text-transform: uppercase;
  font-weight: 600; color: var(--ink); margin-bottom: 8px; }
.note.accent .k { color: var(--orange-ink); }
.note p { margin: 0; color: var(--ink-soft); }

/* ---- table ---- */
.table-wrap { overflow-x: auto; margin: 24px 0; border-top: 1px solid var(--ink); }
table { width: 100%; border-collapse: collapse; font-size: var(--s1); min-width: 460px; }
thead th { text-align: left; font-weight: 600; color: var(--ink); padding: 13px 20px 13px 0;
  border-bottom: 1px solid var(--line-2); font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; }
tbody td { padding: 14px 20px 14px 0; border-bottom: 1px solid var(--line); color: var(--ink-soft); vertical-align: top; line-height: 1.55; }
tbody tr:last-child td { border-bottom: 0; }
tbody td:first-child { color: var(--ink); font-weight: 500; padding-right: 28px; }
thead th:last-child, tbody td:last-child { padding-right: 0; }

/* ---- contact ---- */
.contacts { margin: 24px 0 0; display: flex; flex-wrap: wrap; gap: 40px; }
.contacts .c .role { font-size: .66rem; letter-spacing: .14em; text-transform: uppercase; color: var(--faint); font-weight: 600; margin-bottom: 5px; }
.contacts .c a { font-size: var(--s0); font-weight: 500; }
.compliance { color: var(--muted); font-size: var(--s1); margin-top: 26px; }

/* ---- footer ---- */
.site-footer { border-top: 1px solid var(--line); }
.site-footer .inner { max-width: 1120px; margin: 0 auto; padding: 52px clamp(20px, 4vw, 44px) 64px; }
.site-footer .cols { display: flex; flex-wrap: wrap; gap: 40px 72px; justify-content: space-between; }
.site-footer h4 { font-size: .66rem; letter-spacing: .16em; text-transform: uppercase; color: var(--faint); font-weight: 600; margin: 0 0 14px; }
.site-footer a { color: var(--muted); text-decoration: none; display: block; margin-bottom: 8px; font-size: var(--s1); transition: color .15s; }
.site-footer a:hover { color: var(--ink); }
.site-footer .tag { color: var(--muted); font-size: var(--s1); max-width: 30ch; margin: 10px 0 0; }
.site-footer .legal-note { margin-top: 44px; padding-top: 24px; border-top: 1px solid var(--line); color: var(--faint); font-size: .78rem; line-height: 1.6; }

/* ---- landing ---- */
.land { padding: clamp(80px, 16vh, 190px) 0 clamp(48px, 8vh, 90px); }
.land .kicker { display: block; }
.land h1 { font-size: clamp(3.4rem, 2rem + 6vw, 7rem); line-height: .9; letter-spacing: -0.05em;
  font-weight: 700; color: var(--ink); margin: 18px 0 0; }
.land .lede { font-size: clamp(1.12rem, 1rem + .6vw, 1.4rem); color: var(--muted); max-width: 40ch; margin: 26px 0 0; line-height: 1.5; }
.index { margin: clamp(48px, 8vh, 88px) 0 0; border-top: 1px solid var(--ink); }
.index a { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: 24px;
  padding: 30px 4px 30px 0; border-bottom: 1px solid var(--line); text-decoration: none; color: inherit;
  transition: padding-left .25s cubic-bezier(.2,.7,.2,1); }
.index a:hover { padding-left: 12px; }
.index .idx { font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; color: var(--orange-ink); font-weight: 600; }
.index h2 { font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2.3rem); letter-spacing: -0.03em; color: var(--ink); margin: 8px 0 8px; font-weight: 700; }
.index p { color: var(--muted); margin: 0; max-width: 52ch; font-size: var(--s0); }
.index .arrow { color: var(--ink); flex: none; transition: transform .25s cubic-bezier(.2,.7,.2,1); }
.index a:hover .arrow { transform: translateX(6px); color: var(--orange); }

/* ---- mobile toc ---- */
.toc-toggle { display: none; }
@media (max-width: 880px) {
  .layout { grid-template-columns: 1fr; gap: 0; }
  .toc { position: static; order: -1; margin-bottom: 12px; border: 1px solid var(--line); }
  .toc-label { display: none; }
  .toc-toggle { display: flex; width: 100%; align-items: center; justify-content: space-between;
    background: none; border: 0; font: inherit; font-weight: 600; color: var(--ink); padding: 15px 16px; cursor: pointer; }
  .toc-toggle svg { color: var(--muted); transition: transform .2s; }
  .toc[open-list] .toc-toggle svg { transform: rotate(180deg); }
  .toc ol { max-height: 0; overflow: hidden; transition: max-height .28s ease; padding: 0 16px; }
  .toc[open-list] ol { max-height: 72vh; overflow-y: auto; padding: 2px 16px 14px; }
  .doc-hero { margin-top: 4px; }
  section.block { padding-top: 40px; }
  .index a { grid-template-columns: 1fr; }
  .index a:hover { padding-left: 0; }
  .index .arrow { display: none; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { transition: none !important; } }