/* ==========================================================================
   Opaya · legal pages (Privacy, Terms, Disclosures), after site.css
   Generated by tools/build.mjs from content/*.md. The header is in its light
   state from the top. An Italiana title with a quiet rise, the effective date,
   then a sticky table of contents beside the document on desktop (a collapsible
   "Contents" on phones and tablets). Running text keeps a measure of about
   70 characters in Instrument Sans. Print shows only the document.
   ========================================================================== */
.legal { --measure: 36rem; --toc-w: 248px; }   /* 36rem: about 70 characters a line at 17px */

/* 1. Page head ----------------------------------------------------------------- */
.legal-head { padding-top: 96px; padding-bottom: 56px; }
.legal-title {
  margin-top: 26px; max-width: 12em;
  font-size: clamp(40px, calc(14px + 4.6vw), 84px); line-height: .94;
  text-wrap: balance;
}
.legal-date { margin-top: 28px; display: flex; flex-wrap: wrap; gap: 4px 12px; font: 400 12.5px/18px var(--mono); letter-spacing: .04em; text-transform: uppercase; color: var(--grey-text); }
.legal-date-k { color: var(--ink); }

/* 2. Body: the table of contents beside the document ----------------------------- */
.legal-body {
  display: grid; grid-template-columns: var(--toc-w) minmax(0, 1fr); column-gap: clamp(48px, 6.5vw, 112px);
  align-items: start;
  padding-top: 64px; padding-bottom: var(--section);
  position: relative;
}
.legal-body::before { content: ""; position: absolute; top: 0; left: var(--gutter); right: var(--gutter); height: 1px; background: var(--line); }

/* Contents: sticky on desktop, the active section marked with a sage square. */
.toc { position: sticky; top: calc(var(--header) + 32px); max-height: calc(100vh - var(--header) - 64px); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; padding-bottom: 8px; }
.toc[data-more] { -webkit-mask-image: linear-gradient(#000 calc(100% - 48px), transparent); mask-image: linear-gradient(#000 calc(100% - 48px), transparent); }
.toc-summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; list-style: none; cursor: default; }
.toc-summary::-webkit-details-marker { display: none; }
.toc-chev { display: none; width: 14px; height: 14px; flex: none; transition: transform 220ms var(--ease); }
.toc-list { margin-top: 20px; display: grid; gap: 2px; }
.toc-list a {
  position: relative; display: block;
  padding: 6px 0 6px 18px;
  font: 500 14px/19px var(--sans); letter-spacing: -0.005em;
  color: var(--grey-text); text-decoration: none;
  transition: color 180ms var(--ease);
}
.toc-list--num a { display: grid; grid-template-columns: 26px minmax(0, 1fr); }
.toc-list a::before { content: ""; position: absolute; left: 0; top: 12px; width: 6px; height: 6px; background: var(--sage); transform: scale(0); transition: transform 200ms var(--ease); }
.toc-num { font: 400 12px/19px var(--mono); letter-spacing: .02em; color: var(--grey-text); font-variant-numeric: tabular-nums; }
.toc-list a[aria-current] { color: var(--ink); }
.toc-list a[aria-current]::before { transform: none; }
.toc-list a:focus-visible { outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) { .toc-list a:hover { color: var(--ink); } }

/* 3. The document ------------------------------------------------------------------ */
.doc { min-width: 0; font: 500 17px/28px var(--sans); color: #22201D; }
.doc p, .doc ul, .doc ol, .doc-notice, .doc-glance { max-width: var(--measure); }
.doc .table-wrap, .doc .glba { max-width: 860px; }
.doc strong { font-weight: 600; color: var(--ink); }
.doc em { font-style: italic; }
.doc a:not(.heading-anchor):not(.ulink) {
  color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px;
  text-decoration-color: color-mix(in srgb, currentColor 38%, transparent);
  transition: text-decoration-color 180ms var(--ease);
  overflow-wrap: anywhere;
}
.doc a:not(.heading-anchor):not(.ulink):hover, .doc a:not(.heading-anchor):not(.ulink):focus-visible { text-decoration-color: currentColor; }

.doc-pre { margin-bottom: 72px; display: grid; gap: 28px; }
.doc-intro { font: 500 20px/30px var(--sans); letter-spacing: -0.012em; color: var(--ink); text-wrap: pretty; }
.doc-notice { padding: 22px 26px 24px; background: var(--white); box-shadow: inset 2px 0 0 var(--forest); }
.doc-notice p { font: 600 16.5px/26px var(--sans); color: var(--ink); max-width: none; }
.doc-glance { padding: 26px 28px 24px; background: var(--white); border-radius: var(--r); }
.doc-glance .label { margin-bottom: 14px; }
.doc-glance ul { max-width: none; }

.doc-section { scroll-margin-top: calc(var(--header) + 8px); }
.doc-section + .doc-section { margin-top: 80px; padding-top: 64px; border-top: 1px solid var(--line-soft); }
.doc-section > * + * { margin-top: 1em; }
.doc h2 {
  position: relative;
  font-family: var(--display); font-weight: 400; text-transform: uppercase; letter-spacing: -0.02em;
  font-size: clamp(28px, calc(18px + 1.2vw), 38px); line-height: 1.02;
  color: var(--ink); text-wrap: balance; max-width: 20em;
  scroll-margin-top: calc(var(--header) + 32px);
}
.doc h2 .heading-num { display: block; margin-bottom: 14px; font: 400 12.5px/16px var(--mono); letter-spacing: .04em; color: var(--grey-text); }
.doc-section > h2 + * { margin-top: 28px; }
.doc h3, .doc h4 {
  position: relative;
  margin-top: 44px; max-width: var(--measure);
  font: 600 19px/26px var(--sans); letter-spacing: -0.015em; color: var(--ink);
  scroll-margin-top: calc(var(--header) + 32px);
}
.doc h3 + *, .doc h4 + * { margin-top: 12px; }
.doc h3 .heading-num { margin-right: 6px; font: 400 13px/26px var(--mono); letter-spacing: .02em; color: var(--grey-text); }

/* Heading anchors: shown on hover and keyboard focus. */
.heading-anchor {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.1em; margin-left: .2em;
  font: 400 .62em/1 var(--mono); color: var(--sage); text-decoration: none;
  opacity: 0; transition: opacity 160ms var(--ease);
  vertical-align: .18em;
}
.doc h2 .heading-anchor { font-size: .5em; vertical-align: .3em; }
.heading-anchor:focus-visible { opacity: 1; outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) { :is(h2, h3, h4):hover > .heading-anchor { opacity: 1; } }

/* Lists: sage squares, numbers in the label face; nested lists step in. */
.doc ul, .doc ol { display: grid; gap: .55em; }
.doc li { position: relative; padding-left: 22px; }
.doc ul > li::before { content: ""; position: absolute; left: 2px; top: .7em; width: 6px; height: 6px; background: var(--sage); }
.doc ul ul > li::before { background: transparent; box-shadow: inset 0 0 0 1px var(--sage); }
.doc ol { counter-reset: li; }
.doc ol > li { counter-increment: li; padding-left: 28px; }
.doc ol > li::before { content: counter(li) "."; position: absolute; left: 0; top: 0; font: 400 13px/28px var(--mono); color: var(--grey-text); }
.doc li > ul, .doc li > ol, .doc li > p { margin-top: .5em; }

/* All-caps disclaimers keep a little tracking and a smaller size, so they stay readable. */
.doc .caps { font-size: 15.5px; line-height: 26px; letter-spacing: .02em; }

/* Token placeholders: the token's own paragraph (e.g. the SIPC statement) is framed. */
.doc .token-para { padding: 14px 18px; border: 1px dashed rgba(166, 105, 42, .5); }

/* 4. Tables --------------------------------------------------------------------- */
.table-wrap { margin-top: 1.4em; }
.doc table { width: 100%; border-collapse: collapse; font: 500 15px/23px var(--sans); }
.doc thead th { padding: 0 16px 10px 0; border-bottom: 1px solid var(--line); text-align: left; vertical-align: bottom; font: 400 11.5px/16px var(--mono); letter-spacing: .04em; text-transform: uppercase; color: var(--grey-text); }
.doc tbody th, .doc tbody td { padding: 14px 16px 14px 0; border-bottom: 1px solid var(--line-soft); text-align: left; vertical-align: top; }
.doc tbody th[scope="row"] { font-weight: 600; color: var(--ink); }
.doc td p + p, .doc td p + ul, .doc td ul + p, .doc th p + p { margin-top: 10px; }
.doc td ul { display: grid; gap: 4px; margin-top: 6px; }
.doc td li, .doc th li { padding-left: 16px; }
.doc td li::before, .doc th li::before { top: .6em; width: 5px; height: 5px; }
.doc .table--cols-3 thead th:nth-child(1) { width: 26%; }
/* Three-column tables keep their shape and scroll inside the wrapper on small screens, with
   soft edge shadows that show only while there is more to see. */
.table-wrap--scroll { overflow-x: auto; overscroll-behavior-x: contain; }
.table-wrap--scroll table { min-width: 560px; }
.table-wrap--scroll {
  background:
    linear-gradient(to right, var(--stone) 30%, rgba(246, 245, 243, 0)) left center / 40px 100% no-repeat local,
    linear-gradient(to left, var(--stone) 30%, rgba(246, 245, 243, 0)) right center / 40px 100% no-repeat local,
    radial-gradient(farthest-side at 0 50%, rgba(12, 10, 8, .14), rgba(12, 10, 8, 0)) left center / 12px 100% no-repeat scroll,
    radial-gradient(farthest-side at 100% 50%, rgba(12, 10, 8, .14), rgba(12, 10, 8, 0)) right center / 12px 100% no-repeat scroll;
}
.table-wrap--scroll:focus-visible { outline-offset: 4px; }

/* The GLBA Consumer Privacy Notice: the model form as one framed sheet. */
.doc .glba { margin-top: 36px; }
.glba-rev { font: 400 12.5px/18px var(--mono) !important; letter-spacing: .04em; text-transform: uppercase; color: var(--grey-text); }
.glba-sheet { margin-top: 12px; background: var(--white); box-shadow: 0 0 0 1px var(--line-soft); }
.glba .table-wrap { margin: 0; }
.glba .table-wrap--scroll {
  background:
    linear-gradient(to right, var(--white) 30%, rgba(255, 255, 255, 0)) left center / 40px 100% no-repeat local,
    linear-gradient(to left, var(--white) 30%, rgba(255, 255, 255, 0)) right center / 40px 100% no-repeat local,
    radial-gradient(farthest-side at 0 50%, rgba(12, 10, 8, .14), rgba(12, 10, 8, 0)) left center / 12px 100% no-repeat scroll,
    radial-gradient(farthest-side at 100% 50%, rgba(12, 10, 8, .14), rgba(12, 10, 8, 0)) right center / 12px 100% no-repeat scroll;
}
.glba .table-wrap + .table-wrap { border-top: 1px solid var(--line-soft); }
.doc .glba table { font-size: 15px; line-height: 23px; }
.doc .glba th, .doc .glba td { padding: 16px 20px; border-bottom: 1px solid var(--line-soft); vertical-align: top; }
.doc .glba tbody tr:last-child > * { border-bottom: 0; }
.doc .glba tbody th[scope="row"] { width: 30%; }
.doc .glba thead th { padding: 12px 20px; background: var(--stone); border-bottom: 1px solid var(--line-soft); }
.glba caption {
  caption-side: top; text-align: left;
  padding: 12px 20px; background: var(--stone); border-bottom: 1px solid var(--line-soft);
  font: 400 11.5px/16px var(--mono); letter-spacing: .04em; text-transform: uppercase; color: var(--ink);
}
.doc .glba-facts thead th { background: var(--forest); color: var(--white); border-bottom: 0; vertical-align: middle; padding-block: 20px; }
.doc .glba-facts thead th:first-child { width: 30%; }
.doc .glba-facts thead th:last-child { font: 400 22px/26px var(--display); letter-spacing: -0.01em; text-transform: uppercase; text-wrap: balance; }
.doc .glba-reasons thead th:nth-child(1) { width: 52%; }
.doc .glba-reasons tbody th[scope="row"] { width: auto; font-weight: 500; }
.doc .glba-reasons tbody th strong { font-weight: 600; }

/* 5. End of the document ------------------------------------------------------------- */
.doc-end {
  max-width: var(--measure);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px;
  margin-top: 96px; padding-top: 24px; border-top: 1px solid var(--line);
}
.legal-date--end { margin-top: 0; }

/* 6. Phones and tablets: "Contents" collapses above the document ------------------------ */
@media (max-width: 1023px) {
  .legal-body { grid-template-columns: minmax(0, 1fr); padding-top: 0; }
  .legal-body::before { display: none; }
  .toc { position: relative; top: auto; max-height: none; overflow: visible; margin-bottom: 48px; border-block: 1px solid var(--line); padding: 0; }
  .toc-summary { min-height: 56px; padding: 16px 0; cursor: pointer; }
  .toc-chev { display: block; }
  .toc-details[open] .toc-chev { transform: rotate(180deg); }
  .toc-summary:focus-visible { outline-offset: -2px; }
  .toc-list { margin-top: 0; padding-bottom: 20px; }
}
@media (max-width: 767px) {
  .legal-head { padding-top: 56px; padding-bottom: 36px; }
  .legal-title { margin-top: 20px; }
  .legal-date { margin-top: 20px; }
  .doc { font-size: 16.5px; line-height: 27px; }
  .doc-pre { margin-bottom: 56px; gap: 22px; }
  .doc-intro { font-size: 18px; line-height: 27px; }
  .doc-notice { padding: 18px 18px 20px; }
  .doc-glance { padding: 20px 20px 18px; }
  .doc-section + .doc-section { margin-top: 56px; padding-top: 44px; }
  .doc h3, .doc h4 { margin-top: 36px; font-size: 18px; line-height: 25px; }
  .doc .glba th, .doc .glba td { padding: 14px 14px; }
  .doc .glba thead th { padding: 12px 14px; }
  .glba caption { padding: 12px 14px; }
  .doc .glba-facts thead th:last-child { font-size: 19px; line-height: 23px; }
  .doc-end { margin-top: 64px; }
}
@media (prefers-reduced-motion: reduce) {
  .toc-chev, .toc-list a, .toc-list a::before, .heading-anchor { transition: none; }
}

/* 7. Print: just the document ---------------------------------------------------------- */
@media print {
  @page { margin: 18mm 16mm; }
  body { background: #fff; color: #000; }
  .skip, .site-header, .menu, .toc, .site-footer, .heading-anchor, .doc-end .ulink { display: none !important; }
  .legal-head { padding: 0 0 18px; }
  .legal-title { font-size: 34px; color: #000; }
  .rise-line { animation: none !important; }
  .legal-body { display: block; padding: 18px 0 0; }
  .legal-body::before { display: none; }
  .doc { font-size: 10.5pt; line-height: 1.5; color: #000; }
  .doc p, .doc ul, .doc ol, .doc .table-wrap, .doc .glba, .doc-notice, .doc-glance, .doc h3, .doc-end { max-width: none; }
  .doc h2 { font-size: 18pt; break-after: avoid; }
  .doc h3, .doc h4 { break-after: avoid; }
  .doc tr, .doc li { break-inside: avoid; }
  .doc-section + .doc-section { margin-top: 24pt; padding-top: 18pt; }
  .doc-glance, .doc-notice, .glba-sheet { background: none; box-shadow: none; border: 1px solid #999; }
  .table-wrap--scroll { overflow: visible; background: none; }
  .table-wrap--scroll table { min-width: 0; }
  .doc a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 85%; color: #444; }
  .token { background: none !important; border: 1px dashed #999; }
}