/* The Terms, Privacy and FFmpeg source pages. /styles.css gives the tokens, the fonts' names, the top bar and the pink .btn; these rules
   lay out one readable column of long text that works at 360 px. Dark, like the main page. No script runs on these pages,
   so the top bar keeps its dark ground from the start (.solid) instead of taking it on scroll. */
.legal { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; }
.legal .topbar .btn-meter { width: 32px; height: 32px; }
.legal-col {
  flex: 1; width: 100%; max-width: 46rem; min-width: 0; margin: 0 auto;
  padding: calc(64px + clamp(32px, 8vh, 80px)) var(--gut) 88px;
  overflow-wrap: break-word;
}
.legal-col a { color: var(--ink); text-decoration-color: var(--pink); text-underline-offset: .18em; }
.legal-col a:hover { color: var(--pink); }
.legal-title { font-size: clamp(44px, 10vw, 84px); margin-bottom: 18px; }
.legal-date { color: var(--muted); font-size: 15px; margin-bottom: 40px; }

/* ---------- The Terms and Privacy pages, in the help center's look: a big two-tone head over a little timeline, then the
   pinned list of sections beside the text, each section opening on a numbered tile in one of the lanes' colors. ---------- */
.legal-wide { max-width: 1240px; padding-top: calc(64px + clamp(28px, 7vh, 72px)); }
.legal { --gold: #F0B526; --violet: #A07CF5; --sand: #D9C1A0; --raise: #2E2823; --text: #ECE5DB; --rule-strong: rgba(246, 242, 236, .22); }

/* How far down the page you are: the pink playhead along the bar's lower edge (a scroll-driven animation; where a browser
   has none, there is simply no line). */
.legal-progress { position: absolute; left: 0; bottom: -1px; height: 2px; width: 100%; transform-origin: 0 50%; transform: scaleX(0); background: var(--pink); box-shadow: 0 0 10px rgba(240, 83, 122, .7); pointer-events: none; }
@supports (animation-timeline: scroll()) {
  .legal-progress { animation: legal-read linear both; animation-timeline: scroll(root); }
}
@keyframes legal-read { to { transform: scaleX(1); } }

.legal-hero { position: relative; margin-bottom: clamp(48px, 8vh, 88px); }
/* Wide: the title on the left, what the page is and its date beside it, at its foot (as the help center's head). */
@media (min-width: 1001px) {
  .legal-hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 440px); column-gap: 5vw; align-items: end; }
  .legal-kicker { grid-column: 1 / -1; }
  .legal-hero-side { padding-bottom: 14px; }
  .legal-hero-side .legal-sub { margin-top: 0; }
}
.legal-kicker { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 22px; font: 600 14px/1 var(--body); }
.legal-kicker span { padding: 7px 12px; border-radius: 999px; background: color-mix(in srgb, var(--pink) 16%, transparent); color: #F46C8D; }
.legal-col .legal-kicker a { padding: 7px 13px; border-radius: 999px; background: var(--raise); color: var(--ink); text-decoration: none; box-shadow: inset 0 0 0 1px var(--rule); transition: box-shadow .2s; }
.legal-col .legal-kicker a:hover { color: var(--ink); box-shadow: inset 0 0 0 1px var(--pink); }
.legal-wide .legal-title { font-size: clamp(60px, 11vw, 168px); font-weight: 800; font-stretch: 75%; line-height: .84; letter-spacing: -.03em; margin-bottom: 0; }
.legal-wide .legal-title span { display: block; padding-bottom: .04em; }
.legal-wide .legal-title span:nth-child(2) { color: var(--pink); padding-left: .55em; }
.legal-sub { margin-top: 24px; max-width: 42ch; color: var(--muted); font-size: clamp(17px, 1.3vw, 20px); line-height: 1.5; text-wrap: pretty; }
.legal-wide .legal-date { display: inline-flex; align-items: center; gap: 9px; margin: 22px 0 0; padding: 7px 13px 7px 11px; border-radius: 999px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--rule); color: var(--muted); font-size: 14px; }
.legal-wide .legal-date::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--teal); box-shadow: 0 0 8px rgba(43, 198, 181, .7); }
.legal-wide .legal-date time { color: var(--ink); font-family: var(--display); font-stretch: 90%; font-weight: 600; font-variant-numeric: tabular-nums; }

/* The little timeline under the head: three lanes of clips and the playhead crossing them. */
.legal-lanes { position: relative; display: grid; gap: 5px; max-width: 560px; margin-top: 32px; padding: 0 0 2px; }
.legal-lanes span { position: relative; height: 9px; }
.legal-lanes b { position: absolute; top: 0; bottom: 0; left: var(--x); width: var(--w); border-radius: 3px; background: color-mix(in srgb, var(--pink) 78%, transparent); }
.legal-lanes span:nth-child(2) b { background: color-mix(in srgb, var(--ink) 22%, transparent); }
.legal-lanes span:nth-child(3) b { background: color-mix(in srgb, var(--teal) 60%, transparent); }
.legal-lanes i { position: absolute; top: -8px; bottom: -6px; left: 38%; width: 2px; background: var(--pink); box-shadow: 0 0 10px rgba(240, 83, 122, .6); }
.legal-lanes i::before { content: ""; position: absolute; left: -5px; top: -2px; width: 12px; height: 9px; border-radius: 3px 3px 6px 6px; background: var(--pink); }
@media (prefers-reduced-motion: no-preference) {
  .legal-lanes i { animation: legal-run 9s linear infinite; }
  .legal-wide .legal-title span { animation: legal-cut .95s cubic-bezier(.65, 0, .25, 1) both; }
  .legal-wide .legal-title span:nth-child(2) { animation-delay: .16s; }
}
@keyframes legal-run { from { left: 0; } to { left: calc(100% - 2px); } }
@keyframes legal-cut { from { clip-path: inset(-20% 100% -20% 0); } to { clip-path: inset(-20% -10% -20% 0); } }

/* The list of sections pinned beside the text, and the text. */
.legal-doc { display: grid; grid-template-columns: 264px minmax(0, 760px); column-gap: clamp(36px, 5vw, 88px); align-items: start; }
.legal-wide .legal-toc {
  position: sticky; top: 84px; max-height: calc(100vh - 108px); overflow-y: auto; overscroll-behavior: contain; margin: 0;
  padding: 2px 8px 16px 0; scrollbar-width: thin; scrollbar-color: var(--rule-strong) transparent;
}
.legal-wide .legal-toc h2 { margin: 0 0 12px 6px; font: 600 14px/1 var(--body); color: var(--muted); }
.legal-wide .legal-toc ol { list-style: none; padding: 0; columns: auto; counter-reset: toc; display: grid; gap: 1px; }
.legal-wide .legal-toc li { counter-increment: toc; margin: 0; padding: 0; font-size: 14.5px; }
.legal-wide .legal-toc a {
  display: flex; align-items: center; gap: 11px; padding: 4px 10px 4px 4px; border-radius: 11px;
  color: var(--muted); font-weight: 600; line-height: 1.25; text-decoration: none; transition: background-color .2s, color .2s;
}
.legal-wide .legal-toc a::before {
  content: counter(toc); flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 9px;
  background: color-mix(in srgb, var(--a) 15%, transparent); color: var(--a);
  font: 700 14px/1 var(--display); font-stretch: 85%; font-variant-numeric: tabular-nums; transition: background-color .25s, color .25s;
}
.legal-wide .legal-toc .is-annex a::before { content: "A"; }
.legal-wide .legal-toc a:hover { background: var(--raise); color: var(--ink); }
.legal-wide .legal-toc a:hover::before { background: var(--a); color: var(--paper); }

/* Each section takes the next of the lanes' five colors, in the list and in the text alike. */
.legal-toc li:nth-child(5n+1), .legal-body section:nth-child(5n+1) { --a: var(--pink); }
.legal-toc li:nth-child(5n+2), .legal-body section:nth-child(5n+2) { --a: var(--teal); }
.legal-toc li:nth-child(5n+3), .legal-body section:nth-child(5n+3) { --a: var(--gold); }
.legal-toc li:nth-child(5n+4), .legal-body section:nth-child(5n+4) { --a: var(--violet); }
.legal-toc li:nth-child(5n+5), .legal-body section:nth-child(5n+5) { --a: var(--sand); }

/* The plain-words summary at the top. */
.legal-summary { padding: 26px clamp(20px, 4vw, 32px) 28px; border-radius: 20px; background: var(--surface); box-shadow: 0 0 0 1px var(--rule); margin-bottom: 40px; }
.legal-summary h2 { font: 700 22px/1.15 var(--display); font-stretch: 85%; letter-spacing: -.01em; margin: 0 0 14px; }
.legal-summary ul { list-style: disc; padding-left: 1.2em; }
.legal-summary li { margin-bottom: 9px; }
.legal-summary li:last-child { margin-bottom: 0; }
.legal-summary li::marker { color: var(--pink); }
.legal-summary p { margin-top: 18px; color: var(--muted); font-size: 15px; }

/* On this page. */
.legal-toc { margin-bottom: 48px; }
.legal-toc h2 { font: 600 15px/1 var(--body); color: var(--muted); margin-bottom: 12px; }
.legal-toc ol { list-style: decimal; padding-left: 1.5em; columns: 2 16rem; column-gap: 2.5rem; }
.legal-toc li { padding-left: .2em; margin-bottom: 6px; font-size: 16px; break-inside: avoid; }
.legal-toc li::marker { color: var(--muted); }
.legal-toc a { text-decoration: none; }
.legal-toc a:hover { text-decoration: underline; }

/* The long text. */
.legal-body section { --a: var(--pink); padding-top: 36px; border-top: 1px solid var(--rule); margin-top: 36px; scroll-margin-top: 84px; }
.legal-body section:first-child { margin-top: 0; }
.legal-wide .legal-body section { padding-top: 44px; margin-top: 52px; }
.legal-wide .legal-body section:first-child { padding-top: 0; border-top: 0; }
.legal-body h2 { font: 700 clamp(24px, 4.4vw, 30px)/1.1 var(--display); font-stretch: 85%; letter-spacing: -.015em; margin-bottom: 16px; }
.legal-wide .legal-body h2 { display: flex; align-items: center; gap: 14px; margin-bottom: 20px; font-size: clamp(30px, 3.4vw, 46px); font-weight: 800; font-stretch: 78%; line-height: .98; letter-spacing: -.025em; color: var(--ink); text-wrap: balance; }
.legal-n {
  flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 13px;
  background: var(--a); color: var(--paper); font: 800 21px/1 var(--display); font-stretch: 82%; font-variant-numeric: tabular-nums; letter-spacing: 0;
}
.legal-body section:target .legal-n { box-shadow: 0 0 0 5px color-mix(in srgb, var(--a) 22%, transparent); }
.legal-body h3 { font: 700 19px/1.2 var(--display); font-stretch: 88%; margin: 24px 0 8px; }
.legal-wide .legal-body h3 { display: flex; align-items: center; gap: 12px; margin: 36px 0 10px; color: var(--ink); font-size: clamp(21px, 1.9vw, 25px); font-stretch: 84%; letter-spacing: -.01em; scroll-margin-top: 84px; }
.legal-wide .legal-body h3::before { content: ""; flex: none; width: 18px; height: 9px; border-radius: 3px; background: var(--a); }
.legal-body p, .legal-body li { font-size: 17px; line-height: 1.65; color: var(--ink); }
.legal-wide .legal-body p, .legal-wide .legal-body li { color: var(--text); font-size: 17.5px; line-height: 1.7; }
.legal-body p + p { margin-top: 14px; }
.legal-body ul, .legal-body ol { list-style: disc; padding-left: 1.3em; margin: 12px 0 14px; }
.legal-body ol { list-style: decimal; }
.legal-body li { margin-bottom: 8px; padding-left: .15em; }
.legal-body li::marker { color: var(--pink); }
.legal-wide .legal-body ul { list-style: none; padding-left: 0; margin: 14px 0 18px; }
.legal-wide .legal-body ul > li { position: relative; margin: 9px 0; padding-left: 24px; }
.legal-wide .legal-body ul > li::before { content: ""; position: absolute; left: 3px; top: .66em; width: 8px; height: 8px; border-radius: 2px; background: var(--a); }
.legal-body ul ul { margin: 8px 0 4px; }
.legal-body strong { font-weight: 700; }
.legal-wide .legal-body strong { color: var(--ink); font-weight: 650; }
.legal-col .legal-body a { color: var(--ink); text-decoration-color: color-mix(in srgb, var(--a) 70%, transparent); text-decoration-thickness: 1px; text-underline-offset: 3px; }
.legal-col .legal-body a:hover { color: var(--ink); text-decoration-color: var(--pink); }
.legal-body .caps { font-size: 15px; line-height: 1.6; letter-spacing: .01em; }
.legal-wide .legal-body .caps {
  position: relative; margin: 18px 0; padding: 20px 24px 21px 36px; border-radius: 20px;
  background: color-mix(in srgb, var(--a) 10%, var(--surface)); color: var(--ink); font-size: 14.5px; line-height: 1.65;
}
.legal-wide .legal-body .caps::before { content: ""; position: absolute; left: 15px; top: 20px; bottom: 20px; width: 4px; border-radius: 4px; background: var(--a); }
.legal-address { font-style: normal; margin-top: 14px; line-height: 1.6; }
.legal-wide .legal-address {
  position: relative; display: inline-block; margin-top: 10px; padding: 18px 24px 18px 36px; border-radius: 20px;
  background: var(--surface); box-shadow: inset 0 0 0 1px var(--rule); color: var(--ink); font-size: 17px; line-height: 1.6;
}
.legal-wide .legal-address::before { content: ""; position: absolute; left: 15px; top: 18px; bottom: 18px; width: 4px; border-radius: 4px; background: var(--a); }

/* A table in the long text (the Privacy Policy's legal bases). Scrolls sideways on its own at phone width, never the page. */
.legal-table { overflow-x: auto; margin: 18px 0 20px; border-radius: 18px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--rule); }
.legal-body table { width: 100%; border-collapse: collapse; font-size: 16px; line-height: 1.5; }
.legal-body th, .legal-body td { text-align: left; vertical-align: top; padding: 13px 16px; border-bottom: 1px solid var(--rule); color: var(--text); }
.legal-body tr:last-child td { border-bottom: 0; }
.legal-body th { font-weight: 700; color: var(--muted); font-size: 14px; }

/* What the owner still has to fill in or confirm. Loud on purpose, so none is published by mistake. */
mark.todo { background: rgba(240, 83, 122, .2); color: var(--ink); box-shadow: 0 0 0 1px var(--pink); border-radius: 4px; padding: 0 .25em; }

/* The footer: the copyright band from the main page, with the two links. */
.legal-foot { background: var(--paper); border-top: 1px solid var(--rule); }
.legal-foot .foot { margin-top: 0; }

/* Below the wide width: the list of sections comes first, as a card, and is not pinned. */
@media (max-width: 1000px) {
  .legal-doc { grid-template-columns: minmax(0, 1fr); }
  .legal-wide .legal-toc { position: static; max-height: none; overflow: visible; margin-bottom: 48px; padding: 18px 14px 16px; border-radius: 22px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--rule); }
  .legal-wide .legal-toc ol { grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); column-gap: 8px; }
}
@media (max-width: 760px) {
  .legal-col { padding-top: calc(52px + 36px); padding-bottom: 64px; }
  .legal-wide .legal-body p, .legal-wide .legal-body li { font-size: 16.5px; }
  .legal-wide .legal-body section { padding-top: 32px; margin-top: 36px; }
  .legal-n { width: 38px; height: 38px; border-radius: 11px; font-size: 18px; }
  .legal-wide .legal-body .caps { padding: 16px 16px 17px 30px; }
  .legal-wide .legal-body .caps::before { left: 12px; }
  /* The table's rows become stacked cards: the activity, then its legal basis under it. */
  .legal-body thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .legal-body :is(table, tbody, tr, td) { display: block; }
  .legal-body tr { padding: 14px 16px; border-bottom: 1px solid var(--rule); }
  .legal-body tr:last-child { border-bottom: 0; }
  .legal-body td { padding: 0; border: 0; }
  .legal-body td:first-child { margin-bottom: 4px; color: var(--ink); font-weight: 650; }
  .legal-date { margin-bottom: 28px; }
  .legal-body p, .legal-body li { font-size: 16px; }
  .legal-body section { padding-top: 28px; margin-top: 28px; }
}
.legal-body .hash { font-family: ui-monospace, Menlo, monospace; font-size: .85em; overflow-wrap: anywhere; }