/*
 * legal.css — shared shell for the disclosures / privacy / terms pages.
 *
 * These pages exist to be read and cited, not to convert, so the type is set
 * for sustained reading (65ch measure, generous leading) rather than for the
 * marketing rhythm of index.html. Tokens are copied from index.html so the
 * pages still look like the same company; the layout deliberately is not.
 *
 * Kept as a separate file rather than inlined because three pages share it and
 * a stale copy of a disclosure is a compliance problem, not a style bug.
 *
 * ── DESIGN REFERENCES (Mobbin) ───────────────────────────────────────────────
 * The pattern every serious legal page converges on is a PERSISTENT SIDEBAR of
 * contents beside the document — not a box of links at the top. In a 3,000-word
 * disclosure the reader needs to know where they are, and a top-anchored list
 * scrolls away and abandons them.
 *
 *   Sidebar contents + document body .. Mistral AI "Legal terms and conditions"
 *      https://mobbin.com/sites/sections/d5310632-7c5b-4580-80a9-465115a25a80
 *      Taken: warm paper ground, oversized light headline, muted sidebar with a
 *      single accent marker on the active item. Closest thing to this brand's
 *      cream-and-brick palette in the whole set.
 *   Numbered contents + active state .. Miro "Terms of Service"
 *      https://mobbin.com/sites/sections/47c3e6ab-e2e1-401e-baa3-79e8954e5919
 *      Taken: numbered items with a filled active row, so position is legible.
 *   Print affordance ................... Intercom "Terms & Policies"
 *      https://mobbin.com/sites/sections/0b9f99df-a92f-41d6-a61d-06f9c8f5b46f
 *      Taken: an explicit print control. People genuinely print disclosures to
 *      send to their attorney.
 */

:root{
  --paper:#FAF8F5;
  --paper-2:#F3EFE9;
  --ink:#14110F;
  --ink-2:#241F1B;
  --brick:#9C3D2A;
  --brick-dk:#7E2F1F;
  --stone:#6B655E;
  --line:#E2DCD3;
  --serif:"Zodiak",Georgia,serif;
  --sans:"Switzer",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --wrap:1240px;
  --pad:clamp(20px,5vw,64px);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--sans);font-size:17px;line-height:1.65;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
h1,h2,h3{font-family:var(--serif);font-weight:400;letter-spacing:-.015em;line-height:1.12;margin:0}
a{color:var(--brick)}
a:hover{color:var(--brick-dk)}
button{font:inherit}
.wrap{max-width:var(--wrap);margin:0 auto;padding-inline:var(--pad)}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
:focus-visible{outline:2px solid var(--brick);outline-offset:3px;border-radius:2px}

/* ---------- nav ---------- */
.nav{
  position:sticky;top:0;z-index:50;background:rgba(250,248,245,.92);
  backdrop-filter:blur(10px);border-bottom:1px solid var(--line);
}
.nav-in{display:flex;align-items:center;justify-content:space-between;gap:24px;height:68px}
.brand{
  font-family:var(--mono);font-size:12px;letter-spacing:.2em;text-transform:uppercase;
  font-weight:500;text-decoration:none;white-space:nowrap;color:var(--ink);
}
.brand b{color:var(--brick);font-weight:500}
.nav-back{font-size:14.5px;text-decoration:none;color:var(--stone)}
.nav-back:hover{color:var(--ink)}

/* ---------- document ---------- */
.doc{padding:clamp(44px,6vw,76px) 0 clamp(56px,8vw,104px)}

/* Masthead spans the full measure; the sidebar starts below it, Mistral-style.
   The headline must NOT inherit the sidebar's column width — constrain it by
   character count so it breaks on 2-3 lines at any viewport, not 6. */
.doc-head{padding-bottom:clamp(34px,5vw,54px)}
.eyebrow{
  font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--stone);margin:0 0 16px;
}
.doc-head h1{font-size:clamp(34px,5.6vw,60px);max-width:24ch}
.doc-head .sub{margin:20px 0 0;color:var(--stone);font-size:clamp(16px,1.8vw,18.5px);max-width:54ch}
.updated{
  margin:22px 0 0;font-family:var(--mono);font-size:11.5px;color:var(--stone);
  display:flex;flex-wrap:wrap;gap:8px 18px;align-items:center;
}
.printlink{
  background:none;border:0;padding:0;cursor:pointer;color:var(--stone);
  font-family:var(--mono);font-size:11.5px;display:inline-flex;align-items:center;gap:6px;
}
.printlink:hover{color:var(--brick)}

/* two-column: sticky contents rail + the document */
.doc-grid{
  display:grid;grid-template-columns:minmax(190px,238px) minmax(0,1fr);
  gap:clamp(34px,6vw,86px);align-items:start;
  border-top:1px solid var(--line);padding-top:clamp(30px,4vw,46px);
}
@media (max-width:900px){
  .doc-grid{grid-template-columns:1fr;gap:0}
}

.doc-body{max-width:65ch}
.doc-body h2{
  font-size:clamp(22px,2.8vw,27px);margin:52px 0 0;
  padding-top:8px;
}
.doc-body h2:first-child{margin-top:38px}
.doc-body h3{font-family:var(--sans);font-size:17px;font-weight:600;margin:30px 0 0;letter-spacing:0}
.doc-body p{margin:14px 0 0}
.doc-body ul,.doc-body ol{margin:14px 0 0;padding-left:22px}
.doc-body li{margin:8px 0 0}
.doc-body strong{font-weight:600}

/* a claim we want someone to be able to point at */
.callout{
  margin:26px 0 0;padding:20px 22px;background:var(--paper-2);
  border-left:2px solid var(--brick);
}
.callout p:first-child{margin-top:0}

/* the definitional bits — kept visually distinct from prose */
.deflist{margin:20px 0 0;border-top:1px solid var(--line)}
.deflist div{
  display:grid;grid-template-columns:minmax(150px,26%) 1fr;gap:8px 26px;
  padding:15px 0;border-bottom:1px solid var(--line);
}
.deflist dt{font-weight:600;font-size:15.5px}
.deflist dd{margin:0;color:var(--stone);font-size:15.5px}
@media (max-width:620px){
  .deflist div{grid-template-columns:1fr;gap:4px}
  .deflist dd{font-size:15px}
}

/* ---------- contents rail (Mistral sidebar + Miro numbering) ---------- */
.toc{position:sticky;top:92px}
/* <details> is the mobile affordance. On desktop the list is always open and
   the rail heading does the labelling, so the summary must not double up. */
.toc summary{display:none}
.toc-h{
  margin:0 0 16px;font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--stone);
}
.toc ol{margin:0;padding:0;list-style:none;counter-reset:toc}
.toc li{counter-increment:toc;margin:0}
.toc a{
  display:grid;grid-template-columns:22px 1fr;gap:9px;align-items:baseline;
  padding:7px 10px 7px 8px;text-decoration:none;color:var(--stone);
  font-size:13.5px;line-height:1.4;border-left:2px solid transparent;
  transition:color .14s,border-color .14s,background .14s;
}
.toc a::before{
  content:counter(toc,decimal-leading-zero);
  font-family:var(--mono);font-size:10.5px;color:var(--line);
  transition:color .14s;
}
.toc a:hover{color:var(--ink);background:var(--paper-2)}
/* The active item is the whole point of a persistent rail — it answers
   "where am I in a 3,000-word document" without the reader scrolling to check. */
.toc a[aria-current="true"]{
  color:var(--ink);border-left-color:var(--brick);background:var(--paper-2);font-weight:500;
}
.toc a[aria-current="true"]::before{color:var(--brick)}

@media (max-width:900px){
  /* Collapsed above the document rather than dropped — on a phone a 10-item
     list between the headline and the first paragraph is a wall, but removing
     contents entirely from a legal page is worse. */
  .toc{position:static;margin:0 0 34px;border:1px solid var(--line);background:var(--paper-2)}
  .toc-details{padding:14px 16px}
  .toc summary{
    cursor:pointer;font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;
    text-transform:uppercase;color:var(--stone);list-style:none;
    display:flex;justify-content:space-between;align-items:center;
  }
  /* Collapsed by default on a phone: `open` is set in the markup for desktop,
     so it has to be actively overridden here rather than merely unset. */
  .toc-details:not([open]) ol{display:none}
  .toc summary::-webkit-details-marker{display:none}
  .toc summary::after{content:"+";font-size:15px;line-height:1}
  .toc-details[open] summary::after{content:"–"}
  .toc-h{display:none}
  .toc ol{margin-top:12px}
  .toc a{padding-left:0;border-left:0}
  .toc a[aria-current="true"]{background:none;border-left:0}
}

/* ---------- footer ---------- */
.foot{border-top:1px solid var(--line);padding:44px 0 56px;background:var(--paper-2)}
.foot-top{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:18px;padding-bottom:26px;border-bottom:1px solid var(--line);
}
.foot-links{display:flex;flex-wrap:wrap;gap:22px}
.foot-links a{font-size:14.5px;text-decoration:none;color:var(--stone)}
.foot-links a:hover{color:var(--ink)}
.disc{margin:24px 0 0;font-size:13px;line-height:1.62;color:var(--stone);max-width:88ch}
.disc strong{color:var(--ink-2);font-weight:600}
.eho{
  display:inline-flex;align-items:center;gap:8px;margin-top:18px;
  font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--stone);
}
.eho svg{flex:none}

@media print{
  /* People print these to send to their attorney, so the printed artifact is a
     real deliverable — the nav, the contents rail and the print button itself
     are all screen furniture and come out. */
  .nav,.foot-links,.toc,.printlink{display:none}
  body{background:#fff;font-size:10.5pt;line-height:1.5}
  .doc{padding:0}
  .doc-grid{display:block;border-top:0;padding-top:0}
  .doc-body,.doc-head{max-width:none}
  .doc-head h1{font-size:24pt}
  a{color:#000}
  /* Print the destination of a link — a printed cross-reference the reader
     can't follow is worse than no link. Skips in-page anchors and mailto. */
  .doc-body a[href^="http"]::after{content:" (" attr(href) ")";font-size:8.5pt;color:#555}
  /* a printed disclosure that splits a definition across pages is unreadable */
  .deflist div,.callout,.doc-body h2{break-inside:avoid}
  .doc-body h2{break-after:avoid}
  .foot{border-top:1px solid #ccc;background:none}
}