/* Legal documents. Formal and restrained, modelled on established SaaS legal pages. Layout follows
   what was measured on well-regarded sites at a 1280px desktop width (14 Sep 2026): Stripe uses a
   wide page with a sticky contents sidebar (270px) beside an ~810px text column and 15px/24px type;
   Canva sets an ~800px left-aligned column with 14px/22px type. Neither uses one narrow centred
   column with large gaps. Sub-clause numbers come from CSS counters inside .clauses so no number is
   typed into the sentences the disclosure tests match. */
:root{--ink:#1c1a17;--ink-2:#4a453e;--muted:#736b60;--line:#e8e3da;--bg:#fff;--panel:#f8f6f2;
  --accent:#8f4229;--max:1200px;--s1:6px;--s2:10px;--s3:14px;--s4:20px;--s5:28px;--s6:40px;--s7:56px}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:78px}
body{margin:0;background:var(--bg);color:var(--ink);
  font:16px/1.65 "IBM Plex Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif}
.wrap{max-width:var(--max);margin:0 auto;padding:0 32px}
a{color:var(--accent);text-underline-offset:2px;text-decoration-thickness:1px}
a:hover{color:var(--ink)}
a:focus-visible{outline:2px solid #8f4229;outline-offset:3px;border-radius:3px}

/* Header */
header{position:sticky;top:0;z-index:3;background:rgba(255,255,255,.97);border-bottom:1px solid var(--line)}
header .wrap{height:60px;display:flex;align-items:center;gap:18px}
.logo{font-weight:800;font-size:1.05rem;color:var(--ink);text-decoration:none;display:flex;align-items:center;gap:8px}
.back{display:none}
.nav{margin-left:auto;display:flex;flex-wrap:wrap;gap:4px 22px;font-size:.9rem}
.nav a{text-decoration:none;color:var(--muted);padding:8px 0}
.nav a:hover{color:var(--ink)}
.nav a[aria-current="page"]{color:var(--ink);font-weight:600;box-shadow:inset 0 -2px 0 var(--accent)}

/* Document header */
main{padding:var(--s6) 0 var(--s7)}
.eyebrow{display:none}
h1,h2,h3{color:var(--ink);letter-spacing:-.01em;line-height:1.3}
h1{font-size:2.25rem;font-weight:700;margin:0 0 var(--s2)}
.meta,.updated{color:var(--muted);font-size:.9rem;margin:0 0 var(--s4);padding-bottom:var(--s4);border-bottom:1px solid var(--line)}
.lede{font-size:1.05rem;color:var(--ink-2);max-width:none;margin-bottom:var(--s4)}
h2{font-size:1.25rem;font-weight:700;margin:var(--s6) 0 var(--s3)}
h3{font-size:1.05rem;font-weight:700;margin:var(--s5) 0 var(--s2)}
p{margin:0 0 var(--s3)}
ul,ol{margin:0 0 var(--s3);padding-left:1.4rem}
li{margin-bottom:6px}

/* Plain-language summary: explicitly not part of the document */
.summary,.note{border:0;border-left:3px solid var(--accent);background:var(--panel);border-radius:0 6px 6px 0;
  padding:var(--s4) var(--s5);margin:var(--s4) 0}
.summary h2{font-size:1rem;margin:0 0 var(--s2);padding:0;text-transform:none}
.summary h2::after{content:" (summary, not part of this document)";font-weight:400;color:var(--muted)}
.summary ul{margin:0}
.summary p:last-child{margin-bottom:0}

/* Contents */
.toc{border:1px solid var(--line);border-radius:6px;background:#fff;padding:var(--s4) var(--s5);margin:var(--s4) 0}
.toc h2{font-size:.95rem;margin:0 0 var(--s2);padding:0}
.toc ol{columns:2;gap:32px;margin:0;padding-left:1.4rem}
.toc li{break-inside:avoid;margin-bottom:4px}
.toc a{text-decoration:none;color:var(--ink-2)}
.toc a:hover{color:var(--accent);text-decoration:underline}

/* Desktop: a page with a contents list gets it as a sticky left sidebar (Stripe pattern), and the
   document fills the rest of the width. Done in CSS alone so terms.html / privacy.html -- whose
   content hashes drive legal acceptance -- do not change. */
@media(min-width:1024px){
  main .wrap:has(> .toc){display:grid;grid-template-columns:250px minmax(0,1fr);column-gap:64px;row-gap:0;align-items:start}
  main .wrap:has(> .toc) > *{grid-column:2}
  main .wrap:has(> .toc) > .toc{grid-column:1;grid-row:1 / span 60;position:sticky;top:84px;align-self:start;
    max-height:calc(100vh - 104px);overflow:auto;margin:6px 0 0;padding:0 0 0 2px;border:0;background:none}
  main .wrap:has(> .toc) > .toc ol{columns:1;padding-left:1.25rem;font-size:.88rem}
  main .wrap:has(> .toc) > .toc li{margin-bottom:8px;line-height:1.4}
  main .wrap:has(> .toc) > .toc h2{font-size:.78rem;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
  /* Pages without a contents list keep a comfortable reading column rather than 1200px lines. */
  main .wrap:not(:has(> .toc)){max-width:960px}
}

/* Numbered sub-clauses: section number from the h2, clause number from each paragraph/list */
.clauses{counter-reset:sec}
.clauses h2{counter-increment:sec;counter-reset:cl;padding-top:var(--s4);border-top:1px solid var(--line)}
.clauses h2.unnumbered{counter-increment:none}
.clauses h2:not(.unnumbered)::before{content:counter(sec) ".  ";}
.clauses h2 .num{display:none}
.clauses > p,.clauses > section > p{counter-increment:cl;position:relative;padding-left:3.2em}
.clauses > p::before,.clauses > section > p::before{content:counter(sec) "." counter(cl);position:absolute;left:0;
  color:var(--muted);font-variant-numeric:tabular-nums;font-size:.92em}
.clauses > p.plain,.clauses > section > p.plain{counter-increment:none;padding-left:0}
.clauses > p.plain::before,.clauses > section > p.plain::before{content:none}
.clauses > ul,.clauses > section > ul,.clauses > ol,.clauses > section > ol{padding-left:4.4em}
.clauses ol[type="a"]{list-style-type:lower-alpha}
/* Plain-English note under a clause heading: a reading guide, not numbered as a clause */
.in-short{background:var(--panel);border-left:3px solid var(--line);padding:10px 16px;margin:0 0 var(--s3);font-size:.92rem;color:var(--ink-2)}
.in-short b{color:var(--ink)}
.clauses .summary p,.clauses .toc p{padding-left:0}
.clauses .summary p::before{content:none}

/* Definitions */
dl.defs{margin:0 0 var(--s3)}
dl.defs dt{font-weight:700;margin-top:var(--s2)}
dl.defs dd{margin:2px 0 0 0;color:var(--ink-2)}

/* Tables */
.table-wrap{overflow-x:auto;margin:var(--s4) 0;border:1px solid var(--line)}
.table-wrap:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
table,.tbl{width:100%;border-collapse:collapse;font-size:.92rem}
.table-wrap table{min-width:620px}
th,td{padding:10px 14px;text-align:left;vertical-align:top;border-bottom:1px solid var(--line)}
th{background:var(--panel);font-weight:600;color:var(--ink)}
tr:last-child td,tr:last-child th{border-bottom:0}
.tbl{border:1px solid var(--line);margin:var(--s4) 0}
.tbl th{width:28%}

/* Legal hub */
.cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0;margin:var(--s4) 0;border-top:1px solid var(--line)}
.card{padding:var(--s4) var(--s3) var(--s4) 0;border-bottom:1px solid var(--line);background:none;border-radius:0}
.card h2{font-size:1.02rem;margin:0 0 var(--s1);padding:0}
.card p{font-size:.93rem;color:var(--ink-2);margin-bottom:var(--s1)}
.card a{font-weight:600}
.section-rule{border:0;border-top:1px solid var(--line);margin:var(--s6) 0}
.fine{font-size:.88rem;color:var(--muted)}
code{font-size:.9em;background:var(--panel);padding:1px 5px}

/* Footer */
footer{border-top:1px solid var(--line);padding:var(--s5) 0;color:var(--muted);font-size:.88rem}
footer p{margin:0 0 var(--s1)}

@media(max-width:680px){
  .wrap{padding:0 18px}
  h1{font-size:1.75rem}
  h2{font-size:1.15rem;margin:var(--s5) 0 var(--s2)}
  .summary,.note,.toc{padding:var(--s3) var(--s3)}
  header .wrap{height:auto;flex-wrap:wrap;padding-top:10px;padding-bottom:6px}
  .nav{margin-left:0;width:100%;gap:2px 16px}
  main{padding:var(--s5) 0 var(--s6)}
  .toc ol{columns:1}
  .cards{grid-template-columns:1fr}
  .clauses > p,.clauses > section > p{padding-left:2.8em}
}
@media print{header,footer,.toc{display:none}.clauses > p::before{color:#000}a{color:#000}
  main .wrap{display:block!important}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}