/* Kinsake landing v4 · the privacy and terms pages.
   Loaded after site.css, which supplies the tokens, fonts, themes, the split stage, the hero, the table,
   the interface fragments, the footer and the motion. This file adds only what the two documents need. */

/* draft marks: a clause still waiting for the owner or a lawyer, flat in the accent so nobody misses it */
.draft { background: var(--accent); color: var(--accent-ink); }
p.draft { max-width: 62ch; padding: 0.75rem 1rem; }
mark.draft { padding: 0.05em 0.15em; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.draft b { font-weight: 600; }
.hero__note.draft { max-width: none; margin-top: 1.25rem; padding: 0.625rem 0.875rem; color: var(--accent-ink); }

/* reading text: full ink, a 62ch measure, real list bullets */
.prose p, .prose ul { max-width: 62ch; }
.prose h2 + * { margin-top: 1.75rem; }
.prose h3 { margin-top: 2.25rem; font-size: var(--step-body); font-weight: 500; line-height: 1.35; }
.prose h3 + * { margin-top: 0.75rem; }
.prose * + p, .prose * + ul, .prose * + figure { margin-top: 1rem; }
.prose ul { list-style: disc; padding-left: 1.25em; }
.prose ul ul { margin-top: 0.625rem; list-style: circle; }
.prose li + li { margin-top: 0.625rem; }
.prose li::marker { color: var(--muted); }
.prose a { text-underline-offset: 0.2em; text-decoration-thickness: 0.07em; }
.prose b { font-weight: 600; }
.prose .lead { font-size: var(--step-lead); line-height: 1.4; max-width: 36ch; }

/* the document column, beside the stage */
.doc { padding: clamp(4rem, 8vw, 7.5rem) 0 var(--section); }
.doc > * + .doc__part { margin-top: clamp(4.5rem, 8vw, 7rem); }
.doc__ui { margin-top: 2.5rem; }
.doc__ui figcaption, .doc .ev--film figcaption { margin-top: 0.75rem; max-width: 46ch; font-size: var(--step-small); color: var(--muted); }
.doc .ev--film { max-width: 600px; margin-top: 2rem; background: none; }
.doc .ev--film figcaption { margin-top: 0; }

/* a whole field for the clause that matters most on the page */
.band { margin: 20px; padding: var(--section) calc(var(--field-pad) - 20px); background: var(--f1); color: var(--f1-ink); }
.band__grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 3rem clamp(2rem, 5vw, 5rem); margin-top: 3.5rem; align-items: start; }
.band__ui { display: grid; gap: 1.25rem; max-width: 380px; }
.band__ui .ev { margin-top: 0; }
.band .prose li::marker { color: var(--f1-muted); }

/* the privacy table groups rows two, three or four at a time, so the tone step is set per row */
.seen.seen--policy .seen__table tbody tr:not(.gap) td { background: none; }
.seen.seen--policy .seen__table tbody tr.step td { background: var(--f1-step); }

@media (max-width: 63.99em) {
  .doc { order: 5; margin: 0 var(--margin); padding-top: 5rem; }
  .band { margin: 12px; padding: 5rem 1rem; }
  .band__grid { grid-template-columns: 1fr; margin-top: 2.5rem; }
}

/* an eight-letter page word (SECURITY) needs a smaller giant on a phone so its last letter stays on screen */
@media (max-width: 39.99em) {
  .hero__name--long { font-size: 35vw; }
}