/* The three legal documents, on the landing page's shell and tokens.
   Same construction as guide.css and pricing.css: one scoped stylesheet, no new
   colour, no new geometry.

   GROUPING IS CARRIED BY SPACE, NOT BY RULES. The only hairlines on these pages
   are the two tables' row rules, which are the table rather than a gap between
   two blocks of copy. Do not add a divider between clauses.

   THE TERMS NUMBER THEIR CLAUSES AND THE OTHER TWO DO NOT, deliberately. The
   Terms document numbers its own sections and is referred to by clause number,
   so the count is real. Nothing in the Privacy or Refund policy is ordered, and
   numbering either one would be the invented index DESIGN_OBSERVATIONS.md bans
   by name. */

.legalPage .siteHeader{transform:translateX(-50%);--shell-offset:0px}

/* .sectionEyebrow and the visually-hidden helper live in pricing.css, which
   these pages do not load, so they are declared here. pricing.css only ever
   places the eyebrow on a dark slab, so its ink is wrong here; these pages have
   no slab and need the foreground coral. Same trap, and same note, as
   guide.css. If these ever move into landing.css, delete them from here. */
.legalPage .sectionEyebrow{display:block;color:var(--accent-ink);font-size:12px;letter-spacing:.08em;font-weight:700;margin-bottom:22px}
.legalPage .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}

.legalPage h1,.legalPage h2{margin:0;font-weight:400;letter-spacing:-.04em;line-height:1;text-wrap:balance}
.legalPage h1{font-size:clamp(32px,4vw,56px)}
/* Smaller than the guide's h2. These pages carry twelve to fifteen headings
   rather than four, so a display-scale h2 would turn the document into a list
   of headlines with copy underneath. */
.legalPage h2{font-size:clamp(22px,2.3vw,30px)}
.legalPage p{font-size:16px;line-height:1.65}

/* Lead ------------------------------------------------------------------- */
.legalLead{padding-block:118px 0;display:grid;grid-template-columns:1fr 1.2fr;gap:6vw;align-items:start}
.legalStandfirst{margin:0;color:var(--muted);max-width:56ch}
.legalMeta{margin:32px 0 0;display:grid;gap:6px;color:var(--muted)}
/* .legalPage p and .legalMeta p have identical specificity, so these have to
   be stated on the paragraph itself and stay later in the file. */
.legalMeta p{margin:0;font-size:13px;line-height:1.5}
.legalMeta b{color:var(--ink);font-weight:700}
.legalMeta a{color:inherit;text-decoration:underline;text-underline-offset:3px}
.legalMeta a:hover{color:var(--accent-ink)}
/* NO DATE, deliberately. These documents describe accounts, cloud saving and
   passes as things that work, so version 1.0 is dated the day the service opens
   rather than the day it was written. Until then the commencement line below
   says so, which is true and needs no placeholder. AT PUBLICATION: replace this
   line with the effective date, in all three pages and in the matching
   01_Code/legal/*.md, and set the same date on the payment provider's account.
   The rest of the pre-publication checklist is in the handoff. */
.legalCommence{color:var(--accent-ink);font-weight:700;max-width:34ch}

/* Clauses ----------------------------------------------------------------- */
.legalBody{padding-block:clamp(54px,5.6vw,84px) 0;display:grid;gap:clamp(42px,4.4vw,68px)}
.legalClause{display:grid;grid-template-columns:1fr 1.2fr;gap:6vw;align-items:start}
/* The clause number sits above its heading in the same coral kicker treatment
   the guide's walkthrough uses. counter-reset is on the list, so inserting or
   moving a clause renumbers the page rather than the author. */
.legalBody--numbered{counter-reset:clause}
.legalBody--numbered .clauseHead::before{
  counter-increment:clause;content:counter(clause,decimal-leading-zero);
  display:block;margin-bottom:13px;
  font-size:12px;font-weight:700;letter-spacing:.08em;color:var(--accent-ink)
}
.clauseCopy>:first-child{margin-top:0}
.clauseCopy>:last-child{margin-bottom:0}
.clauseCopy p{margin:0 0 16px;color:var(--muted);max-width:66ch}
.clauseCopy strong{color:var(--ink);font-weight:700}
.clauseCopy a{color:inherit;text-decoration:underline;text-underline-offset:4px}
.clauseCopy a:hover{color:var(--accent-ink)}

/* Lists carry a short neutral dash, not a coral dot: a dot in this product has
   to report live state, and these are typographic markers. The dash is the
   editorial line colour, so it is theme-aware without being an accent. */
.clauseList{list-style:none;margin:0 0 16px;padding:0;display:grid;gap:15px;max-width:66ch}
.clauseList li{position:relative;padding-left:22px;font-size:15px;line-height:1.6;color:var(--muted)}
.clauseList li::before{content:"";position:absolute;left:0;top:.68em;width:9px;height:1.5px;background:var(--line)}
.clauseList strong{color:var(--ink);font-weight:700}

/* Tables ------------------------------------------------------------------
   Row rules, padding and type copied from .pricingTable so the three site
   tables are one object. Row rules are the table, not a divider between blocks
   of copy, which is why they survive the no-separator rule. */
.legalTable{width:100%;border-collapse:collapse;table-layout:fixed;text-align:left;margin:0 0 16px;font-variant-numeric:tabular-nums}
.legalTable th,.legalTable td{padding:13px 18px;vertical-align:top;border-bottom:1px solid var(--line);font-size:14px;line-height:1.45;overflow-wrap:break-word;color:var(--muted)}
.legalTable thead th{padding-block:16px;border-top:1px solid var(--line);color:var(--ink);font-weight:700}
.legalTable tbody th{color:var(--ink);font-weight:700}
/* The first column carries a heading of its own here, unlike the pricing
   page where that cell is empty, so both the head and the body cell have to
   lose the left padding or the column heading sits indented from its own
   rows. Same at the right edge, so the table ends on the measure. */
.legalTable th:first-child,.legalTable td:first-child{padding-left:0}
.legalTable th:last-child,.legalTable td:last-child{padding-right:0}

/* Close -------------------------------------------------------------------
   One line, and no links. It used to carry the other two policies, which the
   footer directly beneath it now lists properly, so the page ended with the
   same three links twice inside about two hundred pixels. */
.legalClose{padding-block:clamp(48px,5vw,72px) 0}
.legalClose p{font-size:12px;color:var(--muted);margin:0;line-height:1.6;max-width:72ch}

.legalPage a:focus-visible{outline:2px solid var(--accent-ink);outline-offset:5px}

/* Narrow ------------------------------------------------------------------ */
@media(max-width:1080px){
  .legalClause{grid-template-columns:1fr;gap:20px}
  .clauseCopy p,.clauseList{max-width:70ch}
}
@media(max-width:760px){
  .legalLead{grid-template-columns:1fr;gap:24px;padding-top:110px}
  .legalPage .legalStandfirst{font-size:15px}
  .legalMeta{margin-top:22px}
  .legalBody{padding-top:44px;gap:38px}
  .legalTable th,.legalTable td{padding:11px 8px;font-size:12px}
  .legalClose{padding-top:40px}
}
@media(prefers-reduced-motion:reduce){.legalPage{scroll-behavior:auto}}