/* titro.live document pages — legal (privacy, terms, refunds + DE), 404, /auth/.
   Built by build.py render_legal / build_404 / build_auth. Uses the site tokens
   from /style.css (--ink, --paper, --tint, --line, --t2, --amber …).
   Layout: a tinted header band with the title and the doc switcher, then a
   two-column body — sticky contents on the left, a 68ch reading column right. */

.lg{background:var(--paper)}
.lg-in{max-width:1080px;margin:0 auto;padding-inline:max(20px,env(safe-area-inset-left,0px)) max(20px,env(safe-area-inset-right,0px))}

/* header band */
.lg-hero{background:var(--tint);border-bottom:1px solid var(--line);padding-block:56px 44px;margin-top:-60px;padding-top:116px}
.lg-tabs{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:28px}
.lg-tabs a{font-size:14px;font-weight:550;color:var(--t2);text-decoration:none;padding:7px 14px;border-radius:999px;
  border:1px solid var(--line2);background:var(--paper)}
.lg-tabs a:hover{color:var(--ink);border-color:var(--ink)}
.lg-tabs a[aria-current="page"]{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.lg-kick{font-family:var(--mono);font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--t2)}
.lg-hero h1{font-size:clamp(36px,5.6vw,60px);font-weight:600;letter-spacing:-.03em;line-height:1.02;margin:10px 0 18px;
  text-align:left;max-width:16ch;text-wrap:balance;hyphens:auto;-webkit-hyphens:auto;overflow-wrap:break-word}
.lg-hero h1 mark{background:var(--amber);color:var(--ink);padding:0 .08em;border-radius:6px}
.lg-lede{max-width:64ch;font-size:18px;line-height:1.6;color:var(--ink)}
.lg-lede p+p{margin-top:10px}
.lg-meta{display:flex;flex-wrap:wrap;gap:8px 22px;margin-top:22px;font-size:14px;color:var(--t2)}
.lg-meta span{display:inline-flex;align-items:center;gap:8px}
.lg-meta span::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--amber);flex:0 0 auto}

/* body */
.lg-grid{display:grid;grid-template-columns:240px minmax(0,1fr);gap:64px;padding-block:56px 96px}
.lg-toc{position:sticky;top:104px;align-self:start;font-size:14px}
.lg-toc p{font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--t3);margin-bottom:12px}
.lg-toc ol{list-style:none;display:grid;gap:2px;border-left:1px solid var(--line)}
.lg-toc a{display:flex;gap:10px;padding:6px 0 6px 14px;margin-left:-1px;border-left:2px solid transparent;color:var(--t2);text-decoration:none;line-height:1.35}
.lg-toc a:hover{color:var(--ink);border-left-color:var(--ink)}
.lg-toc a.on{color:var(--ink);font-weight:600;border-left-color:var(--amber)}
.lg-toc a b{font-weight:600;color:var(--t3);font-variant-numeric:tabular-nums;min-width:1.2em}
.lg-toc details{display:none}

.lg-doc{max-width:68ch;min-width:0}
.lg-sec{padding-block:6px 34px;scroll-margin-top:110px}
.lg-sec+.lg-sec{border-top:1px solid var(--line);padding-top:34px}
.lg-sec h2{display:flex;align-items:baseline;gap:14px;font-size:clamp(22px,2.6vw,28px);font-weight:600;letter-spacing:-.02em;
  line-height:1.2;text-align:left;margin:0 0 16px;max-width:none;text-wrap:balance;hyphens:auto;-webkit-hyphens:auto}
.lg-n{flex:0 0 auto;display:inline-grid;place-items:center;min-width:34px;height:34px;padding:0 8px;border-radius:9px;
  background:var(--amber);color:var(--ink);font-size:16px;font-weight:650;font-variant-numeric:tabular-nums;transform:translateY(-3px)}
.lg-doc p,.lg-doc li{font-size:16.5px;line-height:1.72;color:#2A2A2A}
.lg-doc p+p{margin-top:12px}
.lg-doc ul,.lg-doc ol{padding-left:1.2em;margin-top:10px;display:grid;gap:6px}
.lg-doc strong{font-weight:650;color:var(--ink)}
.lg-doc a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--amber);text-decoration-thickness:2px;text-underline-offset:3px}
.lg-doc h3{font-size:18px;font-weight:600;margin:22px 0 8px}

.lg-contact{margin-top:20px;background:var(--ink);color:var(--paper);border-radius:var(--r-lg);padding:28px 28px 30px;display:grid;gap:8px}
.lg-contact h2{font-size:22px;font-weight:600;letter-spacing:-.015em;color:var(--paper);text-align:left;margin:0;max-width:none}
.lg-contact p{color:#CFCFCF;font-size:16px;line-height:1.6}
.lg-contact .mail{font-family:var(--mono);font-size:15px;color:var(--ink);background:var(--amber);padding:3px 9px;border-radius:7px;
  justify-self:start;user-select:all;overflow-wrap:anywhere}

@media (max-width:900px){
  .lg-grid{grid-template-columns:minmax(0,1fr);gap:28px;padding-block:28px 72px}
  .lg-toc{position:static}
  .lg-toc > p,.lg-toc > ol{display:none}
  .lg-toc details{display:block;border:1px solid var(--line);border-radius:var(--r);padding:12px 16px;background:var(--paper)}
  .lg-toc summary{cursor:pointer;font-weight:600;color:var(--ink);list-style:none}
  .lg-toc summary::-webkit-details-marker{display:none}
  .lg-toc summary::after{content:"+";float:right;color:var(--t3);font-weight:400}
  .lg-toc details[open] summary::after{content:"\2212"}
  .lg-toc details ol{display:grid;margin-top:10px;border-left:0}
  .lg-toc details a{padding-left:0;border-left:0}
  .lg-hero{padding-block:100px 32px}
  .lg-doc p,.lg-doc li{font-size:16px}
}

/* 404 and /auth/: one centred status card on the tinted ground */
.st-ground{background:var(--tint);margin-top:-60px;padding:140px max(20px,env(safe-area-inset-right,0px)) 96px max(20px,env(safe-area-inset-left,0px));
  min-height:min(78vh,760px);display:grid;place-items:center}
.st-card{width:100%;max-width:560px;background:var(--paper);border:1px solid var(--line);border-radius:28px;padding:44px 40px 40px;
  text-align:center;box-shadow:0 30px 60px -40px rgba(0,0,0,.25)}
.st-card h1{font-size:clamp(32px,4.4vw,44px);font-weight:600;letter-spacing:-.03em;line-height:1.05;margin:0 auto 14px;max-width:16ch;text-wrap:balance}
.st-card h1 mark{background:var(--amber);color:var(--ink);padding:0 .08em;border-radius:6px}
.st-card > p,.st-card .sub{color:var(--t2);font-size:17px;line-height:1.55;max-width:40ch;margin:0 auto}
.st-code{font-family:var(--mono);font-size:13px;letter-spacing:.12em;color:var(--t3);margin-bottom:14px}
.st-card .btn{margin-top:26px}
.st-links{margin-top:30px;padding-top:24px;border-top:1px solid var(--line);display:grid;grid-template-columns:1fr 1fr;gap:4px 16px;text-align:left}
.st-links p{grid-column:1/-1;font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--t3);margin-bottom:6px}
.st-links a{color:var(--ink);text-decoration:none;font-size:15px;padding:6px 0;border-bottom:1px solid var(--line)}
.st-links a:hover{text-decoration:underline;text-decoration-color:var(--amber);text-decoration-thickness:2px}
/* /auth/'s script fills #authview — give it the card */
.st-ground #authview{width:100%;max-width:560px;background:var(--paper);border:1px solid var(--line);border-radius:28px;
  padding:44px 40px 40px;margin:0;box-shadow:0 30px 60px -40px rgba(0,0,0,.25)}
.st-ground #authview .card{border:0;padding:0;margin-top:18px;text-align:left}
@media (max-width:560px){.st-card,.st-ground #authview{padding:32px 22px 28px;border-radius:22px}.st-links{grid-template-columns:1fr}}