/* ── QuantPeak legal pages — shared shell ────────────────────────────────────
   The marketing page carries its whole design system inline; these documents
   need a small slice of it. Tokens, faces and accent values are COPIED from
   index.html rather than imported, so if a colour changes there it must change
   here too. Absolute asset paths for the same reason index.html uses them:
   Vercel 308-redirects /site/ to /site, after which relative URLs resolve one
   directory up and 404 silently.                                             */

@font-face{font-family:'Bric';src:url('/site/fonts/Bricolage.woff2') format('woff2');font-weight:200 800;font-display:swap}
@font-face{font-family:'Plex';src:url('/site/fonts/PlexSans.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'JBMono';src:url('/site/fonts/JetBrainsMono.woff2') format('woff2');font-weight:100 900;font-display:swap}

:root{
  color-scheme:dark;
  --ground:#000000; --ink:#FFFFFF; --muted:#8C8C8C; --dim:#787878;
  --rule:#191919; --rule-2:#2B2B2B;
  --surf-1:#0A0A0A; --surf-3:#050505;
  --cobalt:#2FAE8F; --alarm:#FF4B33; --amber:#F5A524;
  /* --cobalt is the brand green and is used for decoration. --link is the same
     hue pushed until it clears 4.5:1 as body text, because these documents are
     read, not glanced at: a disclaimer nobody can comfortably read is a weaker
     disclaimer. On black the brand green already clears at 7.57:1. */
  --link:var(--cobalt);
  --glass:rgba(255,255,255,.045); --glass-bd:rgba(255,255,255,.10);
  --shadow:0 18px 44px -26px rgba(0,0,0,.7);
}
html[data-theme="light"]{
  color-scheme:light;
  --ground:#F7F7F4; --ink:#0C0C0D; --muted:#5C5D63; --dim:#6E6F74;
  --rule:#E4E4DF; --rule-2:#D3D3CD;
  --surf-1:#FFFFFF; --surf-3:#F1F1ED;
  --cobalt:#238F74; --link:#1E7E66; --alarm:#D4341C; --amber:#A9720F;
  --glass:rgba(255,255,255,.55); --glass-bd:rgba(12,12,13,.09);
  --shadow:0 18px 44px -26px rgba(12,12,13,.22);
}
@media (prefers-color-scheme: light){
  html:not([data-theme]){
    color-scheme:light;
    --ground:#F7F7F4; --ink:#0C0C0D; --muted:#5C5D63; --dim:#6E6F74;
    --rule:#E4E4DF; --rule-2:#D3D3CD;
    --surf-1:#FFFFFF; --surf-3:#F1F1ED;
    --cobalt:#238F74; --link:#1E7E66; --alarm:#D4341C; --amber:#A9720F;
    --glass:rgba(255,255,255,.55); --glass-bd:rgba(12,12,13,.09);
  }
}

*{box-sizing:border-box}
html{background:var(--ground);-webkit-text-size-adjust:100%;scrollbar-width:none}
html::-webkit-scrollbar{display:none}
body{margin:0;font:400 16px/1.7 'Plex',system-ui,sans-serif;color:var(--ink);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}

/* ── shell ── */
.lwrap{max-width:760px;margin:0 auto;padding:0 24px}
.lnav{position:sticky;top:0;z-index:10;border-bottom:1px solid var(--rule);
  background:color-mix(in srgb,var(--ground) 82%,transparent);backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px)}
.lnav .lwrap{display:flex;align-items:center;justify-content:space-between;
  gap:16px;height:64px}
.lbrand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink)}
.lbrand svg{display:block;flex:none}
.lbrand b{font:600 19px 'Bric',system-ui,sans-serif;letter-spacing:-.01em}
.lbrand b i{font-style:normal;color:var(--link)}
.lnav-act{display:flex;align-items:center;gap:6px}
.lnav-act a,.lnav-act button{font:500 13px 'Plex',system-ui,sans-serif;color:var(--muted);
  text-decoration:none;padding:7px 11px;border-radius:8px;border:0;background:none;
  cursor:pointer;transition:color .15s,background .15s}
.lnav-act a:hover,.lnav-act button:hover{color:var(--ink);background:var(--glass)}
.lnav-act svg{display:block;width:16px;height:16px}

/* ── document ── */
main{padding:56px 0 88px}
.leyebrow{font:500 11px 'JBMono',monospace;letter-spacing:.14em;text-transform:uppercase;
  color:var(--link);margin:0 0 14px}
h1{font:600 clamp(2rem,5vw,2.9rem)/1.12 'Bric',system-ui,sans-serif;letter-spacing:-.025em;
  margin:0 0 14px;text-wrap:balance}
.lmeta{font:400 13px 'JBMono',monospace;color:var(--dim);margin:0 0 8px}
.lsummary{font:400 17px/1.65 'Plex',system-ui,sans-serif;color:var(--muted);
  margin:26px 0 0;padding:18px 20px;border-left:2px solid var(--cobalt);
  background:var(--surf-1);border-radius:0 10px 10px 0}
h2{font:600 1.32rem/1.3 'Bric',system-ui,sans-serif;letter-spacing:-.015em;
  margin:48px 0 12px;padding-top:26px;border-top:1px solid var(--rule);text-wrap:balance}
h2:first-of-type{border-top:0;padding-top:0}
h3{font:600 1.02rem/1.4 'Bric',system-ui,sans-serif;margin:28px 0 8px}
p,li{color:var(--muted)}
p{margin:0 0 15px}
ul,ol{margin:0 0 15px;padding-left:22px}
li{margin:0 0 7px}
li::marker{color:var(--dim)}
strong,b{color:var(--ink);font-weight:600}
a{color:var(--link);text-decoration:none}
/* The underline belongs to PROSE links only. As a bare `a` rule it also struck a
   line under the brand mark and the nav items: .lbrand and .lnav-act a set
   text-decoration:none, but neither declares border-bottom, so nothing overrode
   it. Scope it to where it means "this is a link in a sentence". */
main p a,main li a,main td a,.legalese a{
  border-bottom:1px solid color-mix(in srgb,var(--link) 35%,transparent)}
main p a:hover,main li a:hover,main td a:hover,.legalese a:hover{border-bottom-color:var(--link)}
a:focus-visible,button:focus-visible{outline:2px solid var(--cobalt);outline-offset:3px;border-radius:4px}
code{font:400 .89em 'JBMono',monospace;background:var(--surf-1);border:1px solid var(--rule);
  padding:1px 5px;border-radius:4px;color:var(--ink)}
hr{border:0;border-top:1px solid var(--rule);margin:40px 0}

/* a callout carrying a boundary the reader must not miss */
.lnote{margin:24px 0;padding:18px 20px;border-radius:12px;border:1px solid var(--rule-2);
  background:var(--surf-1)}
.lnote p:last-child,.lnote ul:last-child,.lnote li:last-child{margin-bottom:0}
.lnote-h{display:flex;align-items:center;gap:8px;font:600 12px 'JBMono',monospace;
  letter-spacing:.1em;text-transform:uppercase;margin:0 0 10px;color:var(--ink)}
.lnote-h svg{width:15px;height:15px;flex:none}
.lnote.warn{border-color:color-mix(in srgb,var(--alarm) 40%,var(--rule-2));
  background:color-mix(in srgb,var(--alarm) 6%,var(--surf-1))}
.lnote.warn .lnote-h{color:var(--alarm)}
.lnote.key{border-color:color-mix(in srgb,var(--cobalt) 40%,var(--rule-2));
  background:color-mix(in srgb,var(--cobalt) 6%,var(--surf-1))}
.lnote.key .lnote-h{color:var(--link)}

/* the allowed/forbidden table is the clearest statement of the no-advice line */
.ltable-wrap{overflow-x:auto;margin:0 0 15px}
table{border-collapse:collapse;width:100%;min-width:460px;font-size:14.5px}
th,td{text-align:left;padding:11px 14px;border-bottom:1px solid var(--rule);
  vertical-align:top;color:var(--muted)}
th{font:600 11px 'JBMono',monospace;letter-spacing:.09em;text-transform:uppercase;
  color:var(--ink);border-bottom-color:var(--rule-2)}
tbody tr:last-child td{border-bottom:0}
td.yes{color:var(--link)}
td.no{color:var(--alarm)}

/* ── footer ── */
.lfoot{border-top:1px solid var(--rule);padding:34px 0 46px;margin-top:20px}
.lfoot-links{display:flex;flex-wrap:wrap;gap:8px 20px;margin:0 0 20px}
.lfoot-links a{font:500 13.5px 'Plex',system-ui,sans-serif;color:var(--muted)}
.lfoot-links a:hover{color:var(--ink)}
.lfoot-links a[aria-current="page"]{color:var(--ink)}
.lfoot-btm{display:flex;flex-wrap:wrap;gap:6px 18px;justify-content:space-between;
  font:400 12.5px 'Plex',system-ui,sans-serif;color:var(--dim)}
.legalese{font:400 12px/1.6 'Plex',system-ui,sans-serif;color:var(--dim);margin:20px 0 0;
  max-width:none}

@media (max-width:560px){
  main{padding:38px 0 64px}
  .lwrap{padding:0 18px}
  .lnav-act a[data-hide-sm]{display:none}
}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms !important;transition-duration:.001ms !important}
}

/* ── print / PDF ──────────────────────────────────────────────────────────────
   These documents get printed and get uploaded to the payment provider as PDFs.
   The page defaults to a black ground, which would produce an unreadable legal
   document, so print always forces the light palette on white and drops the
   page chrome. Keep this in sync with the light tokens above. */
@media print{
  :root,html[data-theme="light"],html[data-theme="dark"]{
    --ground:#FFFFFF; --ink:#000000; --muted:#1A1A1A; --dim:#444444;
    --rule:#CCCCCC; --rule-2:#999999;
    --surf-1:#F5F5F5; --surf-3:#EEEEEE;
    --cobalt:#12604B; --link:#12604B; --alarm:#A62310; --amber:#7A5209;
  }
  html,body{background:#FFFFFF !important;color:#000000 !important}
  .lnav,.lfoot-links,.lnav-act{display:none !important}
  .lwrap{max-width:none;padding:0}
  main{padding:0}
  a{color:#000000 !important;border-bottom:0 !important}
  /* a printed link is dead unless its target is written out */
  main p a[href^="/"]::after,main li a[href^="/"]::after{
    content:" (quantpeak.com" attr(href) ")";font-size:.85em;color:#444444}
  h1{font-size:24pt}
  h2{font-size:14pt;margin:22pt 0 8pt;padding-top:10pt;break-after:avoid}
  h3{font-size:11.5pt;break-after:avoid}
  body{font-size:10.5pt;line-height:1.55}
  p,li{color:#1A1A1A;orphans:3;widows:3}
  .lnote,table,tr{break-inside:avoid}
  .ltable-wrap{overflow:visible}
  table{min-width:0}
  .lsummary{background:#F5F5F5;border-left:2pt solid #12604B}
  .lfoot{border-top:1pt solid #999999;margin-top:18pt;padding:12pt 0 0}
}