/* Hallmark · shape: Long Document · genre: playful · theme: brand · job: try
 * paper: Soft Cream #FFF8EB · accent: Hot Orange #FF7100 · display: Outfit 900 caps · body: Outfit 500 · hero: Banner, the title, one small potato and the date · nav: edge-aligned, the wordmark and the four languages · footer: mast, the wordmark over the links · signature: the short version in Sunny Yellow above the full text · copy: verbatim, the privacy policy, terms and deletion steps the law and the product require, complete
 * axes: light/geometric-sans/warm · posture: restrained (Soft Cream paper, one Sunny Yellow block, Almost Black ink) · imagery: one small mascot still a page · contrast: pass · fold: pass · v2.0.0 */
/* Hallmark · pre-emit critique: P3 H4 E4 S4 R5 V3 · weakest: V, a legal page is a column of text by design; the short version and the table carry the reading, the potato stays small */
/* Hallmark · finish-review: subagent, shared with the home · 3 legal findings (marker contrast, off-palette fills, centring) · 3 resolved */
/* Hallmark · waive 77 · every section is the one 600px column of the document · a policy is read top to bottom like a printed page, and a wider measure would hurt reading */
/* Hallmark · waive 78 · section heads are 31px under a 60px title · a long legal document keeps its fifteen heads at reading size so the text, not the heads, carries the page */
/* Hallmark · waive 59 · the numbered sections of one document part by 64px · a policy is read as one continuous text, and landing-page gaps would scatter it */
/* Hallmark · waive 49b · contents entries are the section titles themselves, two lines at most on a 320px phone · a translated section title cannot always shorten */
@import url("tokens.css");
@import url("base.css");

/* The privacy policy, the terms and the delete page: calm, one column, one small potato. */
.legal { padding-block: var(--space-xl) var(--space-3xl); }
.legal__col { max-width: 600px; }
.legal h1 { max-width: none; hyphens: auto; }
.legal__head { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: var(--space-xs) var(--space-lg); padding-bottom: var(--space-lg); }
.legal__head h1 { grid-column: 1 / -1; }
.legal__head img { grid-row: 2 / span 2; grid-column: 2; align-self: end; width: 120px; }
.legal h1 { font-size: var(--text-display-s); }
.meta { font-size: var(--text-sm); }
.note { margin-top: var(--space-lg); padding: var(--space-md) var(--space-lg); border: 2px solid var(--color-ink); border-radius: var(--space-md); font-size: var(--text-sm); }
.summary { margin-top: var(--space-lg); padding: var(--space-xl); border-radius: var(--radius-card); }
.summary h2 { font-size: var(--text-2xl); margin-bottom: var(--space-md); }
.summary ul { margin: 0; padding-left: 1.2em; }
.summary li + li { margin-top: var(--space-xs); }
.toc { margin-top: var(--space-xl); padding: var(--space-lg) var(--space-xl); border: 2px solid var(--color-ink); border-radius: var(--radius-card); }
.toc h2 { font-size: var(--text-lg); font-weight: 800; letter-spacing: 0; margin-bottom: var(--space-sm); }
.toc ol { margin: 0; padding-left: 1.4em; columns: 2; column-gap: var(--space-xl); font-size: var(--text-sm); }
.toc li { break-inside: avoid; }
.toc a { display: inline-flex; align-items: center; min-height: 40px; min-width: 48px; padding-block: var(--space-2xs); }
@media (pointer: coarse) { .toc a { min-height: 48px; } }
.prose section { scroll-margin-top: var(--space-md); }
.prose > section:not(.summary) > h2 { margin: var(--space-2xl) 0 var(--space-md); font-size: var(--text-2xl); font-weight: 900; }
.prose h3 { margin: var(--space-xl) 0 var(--space-xs); font-size: var(--text-lg); font-weight: 800; }
.prose p, .prose li { line-height: 1.7; }
.legal__head .lead { grid-column: 1 / -1; margin-top: var(--space-md); line-height: 1.5; }
.legal__head .note { grid-column: 1 / -1; margin-top: var(--space-sm); }
.prose p + p, .prose p + ul, .prose ul + p, .prose ol + p, .prose table + p { margin-top: var(--space-md); }
.prose ul, .prose ol { margin: var(--space-sm) 0 0; padding-left: 1.3em; }
.prose li + li { margin-top: var(--space-xs); }
.prose li::marker { color: var(--color-ink); }
.prose b, .prose strong { font-weight: 800; }
.prose a { text-decoration-color: var(--color-orange); }
.prose section:target > h2 { text-decoration: underline; text-decoration-color: var(--color-orange); text-decoration-thickness: 4px; text-underline-offset: 8px; }
.steps-list { counter-reset: step; list-style: none; padding-left: 0 !important; }
.steps-list > li { counter-increment: step; position: relative; min-height: 40px; padding: var(--space-xs) 0 0 var(--space-2xl); }
.steps-list > li::before { content: counter(step); position: absolute; left: 0; top: 0; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--color-yellow); font-weight: 900; }
/* What we keep: one block per row, the data's name on top and its three facts side by side, so a 600px column never squeezes four columns. */
.data { display: block; width: 100%; margin-top: var(--space-md); font-size: var(--text-sm); line-height: 1.5; }
.data thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.data tbody { display: grid; }
.data tr { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-xs) var(--space-md); padding-block: var(--space-md); border-top: 2px solid var(--color-ink); }
.data th, .data td { padding: 0; text-align: left; vertical-align: top; overflow-wrap: break-word; hyphens: auto; }
.data tbody th { grid-column: 1 / -1; font-size: var(--text-md); font-weight: 800; }
.data td::before { content: attr(data-label); display: block; font-weight: 800; }
.contact-card { margin-top: var(--space-md); padding: var(--space-lg) var(--space-xl); border: 2px solid var(--color-ink); border-radius: var(--radius-card); }
.contact-card p + p { margin-top: var(--space-sm); }
.contact-card a { display: inline-flex; align-items: center; min-height: 48px; }

@media (max-width: 40rem) {
  .legal__head img { width: 88px; }
  .toc { padding: var(--space-md) var(--space-lg); }
  .toc ol { columns: 1; }
  .summary { padding: var(--space-lg); }
  .data tr { grid-template-columns: minmax(0, 1fr); }
}
/* Wide screens: the contents stay in view beside the text */
@media (min-width: 75rem) {
  .legal__col { margin-inline: auto; }
  .legal__col:has(> .toc) { display: grid; grid-template-columns: minmax(0, 600px) minmax(0, 300px); column-gap: var(--space-3xl); align-items: start; max-width: calc(600px + var(--space-3xl) + 300px); }
  .legal__col:has(> .toc) > * { grid-column: 1; }
  .legal__col:has(> .toc) > .toc { grid-column: 2; grid-row: 1 / span 60; position: sticky; top: var(--space-lg); margin-top: var(--space-sm); }
  .toc ol { columns: 1; }
  .toc a { min-height: 36px; padding-block: var(--space-3xs); }
}
@media print {
  .toc { display: none; }
  .legal__col { max-width: none; }
}