/* =========================================================================
   LEDGER - legal documents (terms.html, privacy.html)
   Same system as the home page: no cards, structure from full-width
   hairlines and a 38px index gutter, true-neutral greys at chroma 0,
   green reserved for money only (it never appears on these two pages).
   Tokens copied verbatim from website/index.html, live 2026-07-31.
   ========================================================================= */
:root{
  --bg:#FFFFFF;
  --bg-alt:#F1F1F1;
  --ink:#0E0E0E;
  --ink-2:#3F3F3F;
  --ink-3:#767676;      /* 4.6:1 on white */
  --hair:#DADADA;
  --hair-2:#B4B4B4;
  --acct:#2F6B21;       /* money only */
  --btn:#1F4D2E;        /* CTA fill. Deep forest, 9.7:1 with white. Not --acct: green still means money. */
  --acct-bg:#EAF3E5;
  --gutter:clamp(20px,4vw,56px);
  --idx:38px;
  --ease-out:cubic-bezier(.23,1,.32,1);
  --ease-soft:cubic-bezier(.16,1,.3,1);
}
*{box-sizing:border-box;margin:0;padding:0}
html{color-scheme:light;scroll-behavior:smooth}
body{
  background:var(--bg);color:var(--ink);
  font-family:Geist,ui-sans-serif,system-ui,sans-serif;
  font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased;
  font-variant-numeric:tabular-nums;
}
a{color:inherit}
img{max-width:100%;display:block}
.container{max-width:1320px;margin:0 auto;padding:0 var(--gutter)}
.m,.mono{font-family:'Geist Mono',ui-monospace,monospace;font-variant-numeric:tabular-nums}

/* ---- statement header ------------------------------------------------ */
.masthead{border-bottom:1px solid var(--ink);position:sticky;top:0;background:var(--bg);z-index:20}
.masthead-in{display:flex;align-items:center;justify-content:space-between;height:56px;gap:20px}
.masthead img{height:22px;width:auto}
.masthead .meta{display:flex;gap:28px;font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);white-space:nowrap}
.masthead .meta b{color:var(--ink);font-weight:500}
.cta{
  font-size:13px;font-weight:600;text-decoration:none;padding:8px 16px;
  background:var(--btn);color:#fff;
  transition:transform 140ms var(--ease-out),background 140ms ease,border-color 140ms ease;
}
.cta:active{transform:scale(.97)}
.cta:hover{background:#28623A}
.cta-open{background:transparent;color:var(--ink);border:1px solid var(--hair-2)}
.cta-open:hover{background:var(--bg-alt);border-color:var(--btn);color:var(--btn)}

/* ---- document title -------------------------------------------------- */
.legal-hero{border-bottom:1px solid var(--ink)}
.legal-hero .container{padding-top:clamp(44px,6vw,72px);padding-bottom:34px}
.legal-tag{
  font-family:'Geist Mono',ui-monospace,monospace;
  font-size:11.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-3);
}
.legal-hero h1{
  font-size:clamp(34px,5.4vw,64px);line-height:.98;letter-spacing:-.035em;font-weight:600;
  margin-top:14px;text-wrap:balance;
}
.legal-meta{
  font-family:'Geist Mono',ui-monospace,monospace;
  font-size:12.5px;color:var(--ink-3);margin-top:18px;
}

/* ---- body ------------------------------------------------------------ */
.legal-body .container{padding-bottom:8px}

/* the abstract callouts that sit above the contents list */
.legal-body>.container>.callout{margin-top:34px}

/* ---- table of contents ----------------------------------------------- */
.toc{margin-top:34px;border-bottom:1px solid var(--ink)}
.toc-title{
  border-top:1px solid var(--ink);
  padding:15px 0 12px;
  font-size:11.5px;letter-spacing:.09em;text-transform:uppercase;font-weight:500;color:var(--ink);
}
.toc ol{list-style:none;counter-reset:toc;columns:2;column-gap:56px}
.toc li{counter-increment:toc;break-inside:avoid}
.toc a{
  display:grid;grid-template-columns:var(--idx) 1fr;gap:24px;align-items:baseline;
  padding:11px 0;border-top:1px solid var(--hair);
  text-decoration:none;font-size:15px;transition:background 140ms ease;
}
.toc a:before{
  content:counter(toc,decimal-leading-zero);
  font-family:'Geist Mono',ui-monospace,monospace;font-size:12px;color:var(--ink-3);
}
.toc a:hover{background:#FAFAFA}

/* ---- sections as ledger bands ---------------------------------------- */
.section{border-top:1px solid var(--ink);padding-bottom:34px;scroll-margin-top:72px}
.section h2{
  display:flex;align-items:baseline;gap:24px;
  padding:26px 0 6px;
  font-size:22px;font-weight:600;letter-spacing:-.02em;text-wrap:balance;
}
.section-num{
  order:2;margin-left:auto;flex:none;
  font-family:'Geist Mono',ui-monospace,monospace;
  font-size:11.5px;font-weight:500;letter-spacing:.09em;color:var(--ink-3);
}
.section-num:before{content:"SEC "}

/* everything under a section title sits in the index gutter */
.section>*:not(h2){margin-left:var(--idx)}

.section h3{
  font-size:15px;font-weight:600;letter-spacing:-.005em;
  margin-top:24px;padding-top:14px;border-top:1px solid var(--hair);
}
.section p{font-size:15.5px;color:var(--ink-2);margin-top:10px;max-width:78ch;text-wrap:pretty}
.section ul,.section ol{margin-top:10px;padding-left:20px;max-width:78ch}
.section li{font-size:15.5px;color:var(--ink-2);margin-top:7px;text-wrap:pretty}
.section li::marker{color:var(--ink-3)}
.section strong{color:var(--ink);font-weight:600}
.section a{
  text-decoration:underline;text-underline-offset:2px;
  text-decoration-color:var(--hair-2);transition:text-decoration-color 140ms ease;
}
.section a:hover{text-decoration-color:var(--ink)}

/* ---- callouts: emphasis rows, never boxes ---------------------------- */
.callout{
  background:var(--bg-alt);
  border-top:1px solid var(--ink);border-bottom:1px solid var(--ink);
  padding:16px 18px;margin-top:24px;max-width:92ch;
}
.callout p{color:var(--ink);font-size:15px;margin-top:0;max-width:none}
.callout p+p{margin-top:10px}
.callout strong{font-weight:600}
.warning-callout{background:var(--bg);border-top-width:2px;border-bottom-width:2px}
.warning-callout p{font-size:14px;letter-spacing:.005em}

/* ---- data tables ----------------------------------------------------- */
.scroller{overflow-x:auto;max-width:100%;min-width:0;margin-top:22px}
.data-table{width:100%;min-width:520px;border-collapse:collapse;font-size:14.5px}
.data-table th{
  text-align:left;vertical-align:bottom;
  font-family:'Geist Mono',ui-monospace,monospace;
  font-size:11px;letter-spacing:.08em;text-transform:uppercase;font-weight:500;color:var(--ink-3);
  padding:0 20px 10px 0;border-bottom:1px solid var(--hair-2);
}
.data-table td{
  padding:11px 20px 11px 0;border-bottom:1px solid var(--hair);
  color:var(--ink-2);vertical-align:top;
}
.data-table td:first-child{color:var(--ink)}
.data-table th:last-child,.data-table td:last-child{padding-right:0;text-align:right}
.yes-tag,.no-tag{
  display:inline-block;font-family:'Geist Mono',ui-monospace,monospace;
  font-size:11px;letter-spacing:.08em;text-transform:uppercase;
  padding:2px 8px;border:1px solid var(--hair-2);color:var(--ink-3);
}
.no-tag{border-color:var(--ink);color:var(--ink);font-weight:500}

/* ---- footer ---------------------------------------------------------- */
footer{border-top:1px solid var(--ink);margin-top:26px}
.footer-inner{
  max-width:1320px;margin:0 auto;padding:20px var(--gutter) 40px;
  font-size:12.5px;color:var(--ink-3);
  display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;
}
.footer-links a{text-decoration:none;margin-left:20px}
.footer-links a:hover{color:var(--ink)}
.footer-links .active{color:var(--ink)}

/* ---- motion ----------------------------------------------------------
   Scroll-driven CSS only, off the main thread. Every element is fully
   visible if the browser or the reader opts out. Never gated on JS.
   ---------------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference){
  @supports (animation-timeline: view()){
    .section,.toc li,.legal-body>.container>.callout{
      animation:arrive 460ms var(--ease-soft) both;
      animation-timeline:view();
      animation-range:entry 0% entry 42%;
    }
    @keyframes arrive{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:none}}

    /* band rules draw across as each section arrives */
    .section{position:relative}
    .section:before{
      content:"";position:absolute;left:0;right:0;top:-1px;height:1px;background:var(--ink);
      transform-origin:left;animation:rule 560ms var(--ease-out) both;
      animation-timeline:view();animation-range:entry 0% entry 30%;
    }
    @keyframes rule{from{transform:scaleX(0)}to{transform:scaleX(1)}}

    .legal-hero h1{animation:arrive 640ms var(--ease-soft) both}
  }
}

/* ---- responsive ------------------------------------------------------ */
@media (max-width:1020px){
  .masthead .meta{display:none}
}
@media (max-width:900px){
  .toc ol{columns:1}
}
@media (max-width:640px){
  .cta{padding:8px 12px;font-size:12px}
  .section>*:not(h2){margin-left:0}
  .section h2{font-size:19px;padding-top:22px}
  .legal-meta{font-size:11.5px}
  .data-table{font-size:13.5px}
  .footer-links a{margin:0 20px 0 0}
}

/* ---- print ----------------------------------------------------------- */
@media print{
  .masthead,.cta{display:none}
  body{font-size:11pt;color:#000}
  .section{page-break-inside:auto}
  .section h2,.section h3{page-break-after:avoid}
  .callout{background:none;border-color:#000}
  a{text-decoration:none}
}