/* site.css: the legal pages (public/legal/*.html) and the not-found page (public/404.html). Load it after tokens.css.
   Every colour, size, radius, weight and outline comes from tokens.css (design kit v2). There is no :root colour, no hex colour, no url() and
   no @import here. The only literal lengths are the breakpoints: phone up to 767px, PC from 768px. Light only.
   The landing page does not load this file (it has landing.css). The footer rules below are the same lines as the landing footer.
   404.html: Cloudflare Pages returns it, with status 404, for any URL that does not exist. Without it Pages answers with the top page and
   status 200, and the assets folder would be remembered for a year. */

:root { color-scheme: only light; }
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; line-break: strict; word-break: auto-phrase; }
body { margin: 0; font-family: var(--font); font-size: var(--fs-body); font-weight: var(--w-regular); line-height: var(--lh-body);
  letter-spacing: var(--ls-body); color: var(--ink); background: var(--paper); }
h1, h2, p, ol, table { margin: 0; }
a { color: var(--navy); text-decoration-thickness: var(--ol-2); text-underline-offset: var(--ul-off); }
b, strong { font-weight: var(--w-bold); }
svg { display: block; }
:focus-visible { outline: var(--focus-w) solid var(--focus); outline-offset: var(--focus-off); }
h1, h2 { text-wrap: balance; }
p, li { text-wrap: pretty; }
/* a phrase that stays whole when the line breaks (legal lines carry these) */
.nw { display: inline-block; max-width: 100%; overflow-wrap: anywhere; }
.wrap { width: 100%; max-width: calc(var(--w-read) + var(--gut) * 2); margin: 0 auto; padding: 0 var(--gut); }

/* ---------------------------------------------------------------- header: the mark and the name */
header.site { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); min-height: var(--top-h); }
.brand { display: inline-flex; align-items: center; gap: var(--sp-2); min-height: var(--hit); color: var(--navy); font-size: var(--fs-h3);
  font-weight: var(--w-bold); line-height: var(--lh-ui); text-decoration: none; }
.mark { flex: none; width: var(--ic-l); height: var(--ic-l); }
.m-n { fill: var(--navy); } .m-w { fill: var(--white); } .m-y { fill: var(--yellow); stroke: var(--navy); stroke-width: var(--ol-2); }

/* ---------------------------------------------------------------- the buttons (the not-found page has one main button) */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2); min-height: var(--btn-h); padding: var(--sp-2) var(--sp-5);
  border: var(--ol-3) solid var(--navy); border-radius: var(--r-l); background: var(--white); color: var(--navy);
  font-size: var(--fs-body); font-weight: var(--w-bold); line-height: var(--lh-ui); letter-spacing: var(--ls-btn); text-decoration: none; cursor: pointer; }
.btn-primary { min-height: var(--cta-h); background: var(--yellow); box-shadow: var(--shadow-cta); }
.btn-wide { display: flex; width: 100%; }
@media (hover: hover) { .btn-primary:hover { background: var(--y-hover); } .btn:not(.btn-primary):hover { background: var(--sky-l); } }
.btn-primary:focus-visible { outline-offset: calc(var(--cta-lift) + var(--focus-off)); }
.btn-primary:active { transform: translateY(var(--press-shift)); box-shadow: var(--shadow-cta-down); }
.btn:not(.btn-primary):active { background: var(--sky); }

/* ---------------------------------------------------------------- the not-found page */
main { padding: var(--sp-6) 0 var(--sp-4); }
main p { margin-top: var(--sp-3); }
main .btn { margin-top: var(--sp-6); }

/* ---------------------------------------------------------------- the legal pages */
h1 { margin: var(--sp-5) 0 var(--sp-4); font-size: var(--fs-h1); font-weight: var(--w-bold); line-height: var(--lh-head); letter-spacing: var(--ls-head); }
.legal h2 { margin: var(--sp-7) 0 0; padding-top: var(--sp-5); border-top: var(--ol-1) solid var(--line); font-size: var(--fs-h3); font-weight: var(--w-bold);
  line-height: var(--lh-head); letter-spacing: var(--ls-head); scroll-margin-top: var(--sp-4); }
/* terms.html: one row of three links under the title (money, stopping, video rights); each jumps to its article */
.jump { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-3); }
.jump a { display: inline-flex; align-items: center; min-height: var(--hit); padding: 0 var(--sp-3); border: var(--ol-2) solid var(--navy); border-radius: var(--r-m);
  background: var(--white); color: var(--navy); font-size: var(--fs-body); font-weight: var(--w-bold); line-height: var(--lh-ui); text-decoration: none; }
@media (hover: hover) { .jump a:hover { background: var(--sky-l); } }
.jump a:active { background: var(--sky); }
.legal p { margin-top: var(--sp-3); }
.legal ol { margin-top: var(--sp-2); padding-left: var(--sp-7); }
.legal li + li { margin-top: var(--sp-1); }
.legal ol ol { margin: var(--sp-1) 0; padding-left: 0; list-style: none; counter-reset: sub; }
.legal ol ol > li { position: relative; padding-left: var(--sp-8); counter-increment: sub; }
.legal ol ol > li::before { content: "(" counter(sub) ")"; position: absolute; left: 0; }
.legal table { width: 100%; margin-top: var(--sp-4); border-collapse: collapse; border-top: var(--ol-3) solid var(--navy); }
.legal th, .legal td { padding: var(--sp-3) var(--sp-2); border-bottom: var(--ol-1) solid var(--line); text-align: left; vertical-align: top; overflow-wrap: anywhere; }
.legal th { width: calc(var(--w-label) + var(--sp-4)); font-size: var(--fs-label); font-weight: var(--w-bold); line-height: var(--lh-ui); }
.legal td { font-size: var(--fs-body); line-height: var(--lh-body); }
.note { margin-top: var(--sp-6); color: var(--muted); font-size: var(--fs-label); line-height: var(--lh-cond); }

/* ---------------------------------------------------------------- footer: three links 44 px tall, the operator line, the mail line (every page) */
footer { margin-top: var(--sp-10); padding: var(--sp-6) 0 var(--sp-8); border-top: var(--ol-3) solid var(--navy); font-size: var(--fs-label); line-height: var(--lh-cond); }
footer nav { display: flex; flex-wrap: wrap; gap: 0 var(--sp-5); }
footer a { display: inline-flex; align-items: center; min-height: var(--hit); }
footer div, footer p { margin-top: var(--sp-2); }
footer p:last-child { display: flex; flex-wrap: wrap; align-items: center; margin-top: 0; }

@media (max-width: 767px) {
  .legal table, .legal tbody, .legal tr, .legal th, .legal td { display: block; width: auto; }
  .legal tr { padding: var(--sp-3) 0; border-bottom: var(--ol-1) solid var(--line); }
  .legal th, .legal td { padding: 0; border: 0; }
  .legal th { margin-bottom: var(--sp-1); }
}
@media (min-width: 768px) {
  main { padding-top: var(--sp-8); }
  .btn-wide { display: inline-flex; width: auto; min-width: calc(var(--il-l) * 2); }
}