/* apiant.ai legal documents: /tos and /privacy (and /betatos when it moves over).
   One layout for every legal page, so the three cannot drift apart the way the
   buttons once did. Tokens come from /site.css; this file defines none.

   Markup contract, kept deliberately plain so the text can be edited by hand:
     <div class="legal rail">
       <nav class="toc" id="toc" aria-label="Contents"></nav>   filled by /legal.js
       <article class="doc">
         <header class="doc-head"><h1>..</h1><p class="updated">..</p></header>
         <div class="preamble">..</div>                          optional
         <section id="s1"><h2>1. ..</h2> <p>, <ul>, <ol>, <table> </section>
       </article>
     </div>
   A new section needs only its <section id> and <h2>; the contents list is built
   from them at load, so there is no second list of headings to keep in step. */

.legal{
  display:grid; grid-template-columns:minmax(0,1fr); gap:0;
  padding-top:40px; padding-bottom:24px;
  font-family:var(--display); color:var(--dim);
}
@media (min-width:1040px){
  .legal{grid-template-columns:250px minmax(0,1fr); column-gap:64px; padding-top:64px}
}

/* ---- the document ----------------------------------------------------- */
.doc{max-width:60ch; min-width:0; font-size:17px; line-height:1.65}
.doc-head{padding-bottom:28px; margin-bottom:8px; border-bottom:1px solid var(--line-2)}
.doc h1{
  font-weight:300; font-size:clamp(30px,4.4vw,46px); line-height:1.08;
  letter-spacing:-.015em; color:var(--ink); text-wrap:balance; overflow-wrap:break-word;
}
.doc .updated{
  margin-top:16px; font-family:var(--mono); font-size:12px; line-height:1.4;
  letter-spacing:.08em; text-transform:uppercase; color:var(--v1);
}

.doc section{scroll-margin-top:88px; padding-top:40px}
.doc h2{
  font-weight:600; font-size:21px; line-height:1.3; letter-spacing:-.01em;
  color:var(--ink); margin:0 0 16px; text-wrap:balance; overflow-wrap:break-word;
}
.doc h3{
  font-weight:600; font-size:17px; line-height:1.35; color:var(--ink);
  margin:32px 0 10px;
}
.doc h2 + h3{margin-top:8px}
.doc p{margin:0 0 16px}
.doc strong{font-weight:600; color:var(--ink)}
.doc em{font-style:italic}
.doc a{color:var(--v1); text-decoration:underline; text-decoration-color:rgba(248,164,52,.4);
  text-underline-offset:3px; text-decoration-thickness:1px; overflow-wrap:anywhere}
.doc a:hover{text-decoration-color:var(--v1)}
.doc a:focus-visible,.toc a:focus-visible{outline:2px solid var(--v2); outline-offset:3px; border-radius:2px}

/* "In Short:" summaries in the privacy notice: the plain-language line under
   each heading, set off so a reader can skim the notice by them alone. */
.doc p.in-short{padding:2px 0 2px 16px; border-left:2px solid var(--v1); color:var(--ink)}
.doc p.in-short em{font-style:normal}

.doc ul,.doc ol{margin:0 0 16px; padding-left:1.4em}
.doc li{margin:0 0 8px; padding-left:.25em}
.doc li::marker{color:var(--label)}
.doc ol > li::marker{font-family:var(--mono); font-size:.8em}
.doc li > ul,.doc li > ol{margin:10px 0 4px}

.doc .callout{
  margin:28px 0 8px; padding:18px 20px; border-radius:14px;
  background:var(--bg-2); border:1px solid var(--line-2);
}
.doc .callout p:last-child{margin-bottom:0}

/* The privacy notice carries its own table of contents inside the text. */
.doc .doc-toc ol{columns:1}
.doc .doc-toc li{margin-bottom:6px}

.table-wrap{margin:8px 0 24px; overflow-x:auto; -webkit-overflow-scrolling:touch;
  border:1px solid var(--line-2); border-radius:12px}
.doc table{width:100%; border-collapse:collapse; font-size:15px; line-height:1.5}
.doc th{
  text-align:left; font-family:var(--mono); font-weight:500; font-size:11px;
  letter-spacing:.12em; text-transform:uppercase; color:var(--muted);
  padding:12px 14px; background:var(--bg-2); border-bottom:1px solid var(--line-2);
}
.doc td{padding:12px 14px; vertical-align:top; border-top:1px solid var(--line)}
.doc tr:first-child td{border-top:0}
.doc td:first-child{width:24%; color:var(--ink); font-weight:600}
.doc td code{font-family:var(--mono); font-size:13px}

/* ---- contents ---------------------------------------------------------
   Phone and tablet: a "Contents" button above the text opens the list.
   Desktop: the list is a sticky column that scrolls on its own. */
.toc{font-size:14px; line-height:1.4; min-width:0; margin-bottom:8px}
.toc-h{display:none; margin:0 0 6px; padding:0 12px; font-family:var(--mono); font-size:11px;
  letter-spacing:.16em; text-transform:uppercase; color:var(--label)}
.toc-btn{
  width:100%; cursor:pointer; display:flex; align-items:center; justify-content:space-between;
  min-height:48px; padding:0 16px; background:transparent; border:1px solid var(--line-2); border-radius:12px;
  font-family:var(--mono); font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted);
}
.toc-btn::after{content:""; width:8px; height:8px; border-right:1.5px solid currentColor;
  border-bottom:1.5px solid currentColor; transform:translateY(-3px) rotate(45deg); transition:transform .15s}
.toc.open .toc-btn::after{transform:translateY(2px) rotate(-135deg)}
.toc ol{display:none; list-style:none; margin:10px 0 0; padding:4px 0; max-height:60vh; overflow-y:auto;
  border:1px solid var(--line); border-radius:12px;
  scrollbar-width:thin; scrollbar-color:rgba(255,255,255,.16) transparent}
.toc.open ol{display:block}
.toc li{margin:0}
.toc a{display:flex; gap:10px; padding:8px 12px; border-left:2px solid transparent;
  color:var(--muted); text-decoration:none}
.toc a:hover{color:var(--ink)}
.toc a[aria-current="true"]{color:var(--ink); border-left-color:var(--v1)}
.toc .n{flex:none; min-width:2.6em; font-family:var(--mono); font-size:12px; line-height:1.55; color:var(--label)}
.toc a[aria-current="true"] .n{color:var(--v1)}
.toc .t{min-width:0; overflow-wrap:break-word}
.toc-btn:focus-visible{outline:2px solid var(--v2); outline-offset:3px}

@media (min-width:1040px){
  .toc{position:sticky; top:88px; align-self:start; margin:0;
    max-height:calc(100vh - 112px); display:flex; flex-direction:column}
  .toc-h{display:block}
  .toc-btn{display:none}
  .toc ol{display:block; flex:1 1 auto; min-height:0; max-height:none; margin:0; padding:0;
    border:0; border-radius:0; overflow-y:auto; overscroll-behavior:contain}
  .toc a{padding:6px 12px}
}

/* Phones: a size down so a line carries a readable number of words, and a
   table that fits the column instead of scrolling sideways. */
@media (max-width:600px){
  .doc{font-size:16px}
  .doc h2{font-size:19px}
  .doc table{font-size:13.5px}
  .doc th{padding:10px 8px; letter-spacing:.02em; font-size:10px}
  .doc td{padding:10px 8px}
  .doc td:first-child{width:auto}
  /* Phone: each row becomes a small card, the column name above each value. */
  .doc table,.doc tbody,.doc tr,.doc td{display:block; width:auto}
  .doc thead{display:none}
  .doc tr{padding:12px 12px 6px; border-top:1px solid var(--line)}
  .doc tbody tr:first-child{border-top:0}
  .doc td{padding:0 0 8px; border:0}
  .doc td[data-label]::before{content:attr(data-label); display:block; font-family:var(--mono); font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--label); margin-bottom:2px}
  .doc td:first-child::before{display:none}
}


/* The consent banner comes from a shared script with its own stylesheet; bring
   its type and link colour onto the brand here rather than forking it. */
.cc-banner,.cc-banner *{font-family:var(--display)}
.cc-banner .cc-text a{color:var(--v1)}

/* ---- print: the document only, dark on white ------------------------ */
@media print{
  @page{margin:18mm 16mm}
  html,body{background:#fff !important; color:#111 !important}
  header.sm,.sf,.toc,.cc-banner,.cc-overlay,#hubspot-messages-iframe-container{display:none !important}
  .legal{display:block; padding:0; width:auto; max-width:none}
  .doc{max-width:none; font-size:10.5pt; line-height:1.5; color:#111}
  .doc h1,.doc h2,.doc h3,.doc strong{color:#000}
  .doc h1{font-size:22pt; font-weight:400}
  .doc .updated{color:#444}
  .doc-head{border-color:#bbb}
  .doc section{padding-top:14pt}
  .doc h2{font-size:13pt; break-after:avoid}
  .doc h3{font-size:11pt; break-after:avoid}
  .doc p,.doc li{orphans:3; widows:3}
  .doc a{color:#000; text-decoration:underline}
  .doc p.in-short{border-left-color:#999; color:#111}
  .doc .callout,.table-wrap{background:none; border-color:#bbb}
  .table-wrap{overflow:visible}
  .doc th{background:#eee; color:#333; border-color:#bbb}
  .doc td{border-color:#ccc}
  .doc tr{break-inside:avoid}
  .doc li::marker{color:#555}
}