/* Legal pages (Terms, Privacy Policy) · Quern: a calm, readable reading layout. Tokens only (tokens.css). */
.tm-b1 { width: 680px; height: 500px; left: 36%; top: 0; background: radial-gradient(closest-side, rgb(var(--sage-glow) / .17), transparent); animation: drift 20s ease-in-out infinite alternate; }
.tm-b2 { width: 420px; height: 420px; left: 2%; top: 20%; background: radial-gradient(closest-side, rgb(var(--ink-rgb) / .09), transparent); animation: drift 26s ease-in-out infinite alternate-reverse; }

/* ---------- hero ---------- */
.tm-hero { position: relative; padding: 128px 0 var(--space-16); }
.tm-hero__in { max-width: calc(248px + var(--space-16) + var(--reading) + 2 * var(--gutter)); display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-6); }
.tm-h1 { margin: 0; font-weight: 500; font-size: clamp(52px, 8vw, 112px); line-height: .95; letter-spacing: -.035em; }
.tm-meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-5); }
.tm-pill { background: var(--clay-soft); color: var(--clay); }
.tm-pill i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; animation: tm-pulse 2.4s ease-in-out infinite; }
@keyframes tm-pulse { 0%, 100% { opacity: .4; } 50% { opacity: 1; } }
.tm-meta__date { font-size: var(--text-small); color: var(--ink-4); }
.tm-draft { max-width: 760px; display: grid; grid-template-columns: 20px 1fr; gap: var(--space-4); padding: var(--space-5) var(--space-6); border-radius: var(--radius-tile); margin-top: var(--space-2); }
.tm-draft svg { margin-top: 3px; color: var(--accent-2); }
.tm-draft a { color: var(--accent); text-decoration: underline; text-decoration-color: rgb(var(--glow) / .4); text-underline-offset: 3px; }
.tm-draft a:hover { color: var(--ink-max); text-decoration-color: currentColor; }
.tm-draft p { margin: 0; font-size: 15px; line-height: 1.65; color: var(--ink-3); }
.tm-draft strong { color: var(--ink); font-weight: 600; }

/* ---------- placeholders and notes ---------- */
.ph { font-family: var(--font-mono); font-size: .8em; letter-spacing: .02em; color: var(--ink-1); white-space: nowrap;
  padding: 2px 7px; border-radius: 6px; background: rgb(var(--fg) / .06); box-shadow: inset 0 0 0 1px rgb(var(--fg) / .1); }

/* ---------- the terms: contents + reading column ---------- */
.tm-body { position: relative; padding: var(--space-8) 0 var(--space-24); }
.tm-grid { display: grid; grid-template-columns: 248px minmax(0, var(--reading)); justify-content: center; gap: var(--space-16); align-items: start; }
.tm-toc { position: sticky; top: calc(var(--header-h) + var(--space-8)); }
.tm-toc__card { position: relative; padding: var(--space-5) var(--space-2) var(--space-4) 0; }
.tm-toc__label { display: block; font-size: 11px; letter-spacing: .14em; color: var(--ink-4); padding-left: var(--space-5); margin-bottom: var(--space-3); }
.tm-toc__bar { position: absolute; left: 0; top: 52px; bottom: var(--space-4); width: 1.5px; border-radius: 2px; background: rgb(var(--fg) / .1); overflow: hidden; }
.tm-toc__bar i { position: absolute; inset: 0; background: var(--accent); transform-origin: top; transform: scaleY(0); box-shadow: 0 0 8px rgb(var(--glow) / .7); }
.tm-toc ol { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.tm-toc a { position: relative; display: flex; gap: 10px; padding: 7px var(--space-3) 7px var(--space-5); border-radius: 0 var(--space-3) var(--space-3) 0; font-size: var(--text-small); line-height: 1.4;
  color: var(--ink-3); text-decoration: none; transition: color var(--dur-quick), background var(--dur-calm) var(--ease-enter); }
.tm-toc a span { flex: none; width: 18px; font-family: var(--font-mono); font-size: 11.5px; line-height: 19.6px; color: var(--ink-4); transition: color var(--dur-quick); }
.tm-toc a:hover { color: var(--ink-max); background: rgb(var(--fg) / .04); }
.tm-toc a[aria-current="true"] { color: var(--ink-max); background: linear-gradient(90deg, rgb(var(--glow) / .1), transparent); }
.tm-toc a[aria-current="true"] span { color: var(--accent); }
.tm-toc a::before { content: ""; position: absolute; left: -1.5px; top: 9px; bottom: 9px; width: 4px; border-radius: 2px; background: var(--accent); opacity: 0;
  transform: scaleY(.3); transition: opacity var(--dur-calm), transform var(--dur-calm) var(--ease-enter); box-shadow: 0 0 10px rgb(var(--glow) / .8); }
.tm-toc a[aria-current="true"]::before { opacity: 1; transform: none; }

.tm-doc { min-width: 0; }
.tm-sec { padding: var(--space-8) 0; border-top: 1px solid rgb(var(--fg) / .08); scroll-margin-top: calc(var(--header-h) + var(--space-4)); }
.tm-sec:first-child { border-top: 0; padding-top: var(--space-5); }
.tm-sec h2 { margin: 0 0 var(--space-4); font: 500 clamp(26px, 2.6vw, 32px)/1.15 var(--font-serif); letter-spacing: -.015em; color: var(--ink-head); text-wrap: balance; }
.tm-n { font-family: var(--font-mono); font-size: .5em; font-weight: 400; letter-spacing: .04em; color: var(--accent-2); vertical-align: .32em; margin-right: var(--space-1); }
.tm-sec p { margin: 0 0 var(--space-4); font-size: 17px; line-height: 1.75; color: var(--ink-2); text-wrap: pretty; }
.tm-sec p:last-child { margin-bottom: 0; }
.tm-sec strong { color: var(--ink); font-weight: 600; }
.tm-sec em { font-style: italic; color: var(--ink); }
.tm-sec a { color: var(--accent); text-decoration: underline; text-decoration-color: rgb(var(--glow) / .4); text-underline-offset: 3px; transition: text-decoration-color var(--dur-quick), color var(--dur-quick); }
.tm-sec a:hover { color: var(--ink-max); text-decoration-color: currentColor; }
.tm-sec ul { list-style: none; margin: 0 0 var(--space-5); padding: 0; display: flex; flex-direction: column; gap: 10px; }
.tm-sec li { position: relative; padding-left: var(--space-6); font-size: 17px; line-height: 1.65; color: var(--ink-2); }
.tm-sec li::before { content: ""; position: absolute; left: 6px; top: .72em; width: 6px; height: 6px; border-radius: 50%; background: var(--accent-2); box-shadow: 0 0 8px rgb(var(--glow) / .5); }
.tm-sec p.tm-tbd { font-size: 15px; line-height: 1.6; font-style: italic; color: var(--ink-3); padding: var(--space-3) var(--space-4); border-radius: var(--space-3);
  background: rgb(var(--fg) / .03); border: 1px dashed rgb(var(--fg) / .16); }
/* a table (the Privacy Policy's "what we collect"): rows of three, stacked into labelled blocks on phones */
.tm-table { margin: 0 0 var(--space-5); border-radius: var(--radius-tile); border: 1px solid rgb(var(--fg) / .1); overflow: auto; }
.tm-table:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.tm-table table { width: 100%; border-collapse: collapse; font-size: 15px; line-height: 1.6; color: var(--ink-2); }
.tm-table th { text-align: left; font: 500 11px/1.4 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-4); padding: var(--space-3) var(--space-4); background: rgb(var(--fg) / .03); border-bottom: 1px solid rgb(var(--fg) / .1); }
.tm-table td { vertical-align: top; padding: var(--space-4); border-top: 1px solid rgb(var(--fg) / .07); text-wrap: pretty; }
.tm-table tr:first-child td { border-top: 0; }
.tm-table td:first-child { width: 34%; }
.tm-table td:last-child { width: 24%; color: var(--ink-3); }
.tm-sign { margin: var(--space-4) 0 0; padding-top: var(--space-6); border-top: 1px solid rgb(var(--fg) / .08); font-family: var(--font-serif); font-size: 18px; color: var(--ink-3); }

.tm-end { margin-top: var(--space-12); padding: var(--space-6) var(--space-6) var(--space-6) var(--space-8); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-4); border-radius: var(--radius-card); }
.tm-end .mono { font-size: 12px; letter-spacing: .14em; color: var(--sage-600); }
.tm-end__links { display: flex; flex-wrap: wrap; gap: 10px; }
.tm-end .btn { min-height: 48px; padding: 0 var(--space-6); }
.tm-end__primary { background: var(--primary); color: #FFFFFF; }
.tm-end__primary:hover { color: #FFFFFF; transform: translateY(-2px); }
.tm-end__ghost { background: transparent; color: var(--paper-ink); border: 1px solid rgb(var(--paper-ink-rgb) / .16); }
.tm-end__ghost:hover { color: var(--paper-ink); background: rgb(var(--paper-ink-rgb) / .04); transform: translateY(-2px); }

/* ---------- light theme ---------- */
:root[data-theme="light"] .ph { background: rgb(var(--fg) / .05); }

/* ---------- narrower screens: the contents sit above the text ---------- */
@media (max-width: 1000px) {
  .tm-hero__in { max-width: calc(var(--reading) + 2 * var(--gutter)); }
  .tm-grid { grid-template-columns: minmax(0, var(--reading)); gap: var(--space-8); }
  .tm-toc { position: static; }
  .tm-toc__card { padding: var(--space-5) var(--space-4) var(--space-4) 0; border-radius: var(--radius-tile); background: rgb(var(--fg) / .025); border: 1px solid rgb(var(--fg) / .08); }
  .tm-toc__bar { display: none; }
  .tm-toc a::before { left: 0; }
}
@media (max-width: 640px) {
  .tm-hero__in { max-width: none; }
  .tm-hero { padding: var(--space-16) 0 var(--space-12); }
  .tm-draft { padding: var(--space-4); gap: var(--space-3); }
  .tm-sec { padding: var(--space-6) 0; }
  .tm-sec p, .tm-sec li { font-size: var(--text-body); }
  .ph { white-space: normal; word-break: break-all; }
  .tm-end { padding: var(--space-5); }
  .tm-table { border: 0; border-radius: 0; overflow: visible; }
  .tm-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .tm-table table, .tm-table tbody, .tm-table tr, .tm-table td { display: block; width: auto; }
  .tm-table tr { padding: var(--space-4); margin-bottom: var(--space-3); border-radius: var(--radius-tile); border: 1px solid rgb(var(--fg) / .1); background: rgb(var(--fg) / .02); }
  .tm-table td, .tm-table td:first-child, .tm-table td:last-child { width: auto; padding: 0; border: 0; }
  .tm-table td + td { margin-top: var(--space-3); }
  .tm-table td + td::before { content: attr(data-label); display: block; font: 500 11px/1.4 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-4); margin-bottom: 2px; }
  .tm-end .btn { flex: 1 1 auto; }
}
@media (prefers-reduced-motion: reduce) {
  .tm-b1, .tm-b2, .tm-pill i { animation: none !important; }
}