/* The document pages — Terms, Privacy, Security.
 *
 * This file is a LAYER ON TOP OF site.css, not a second stylesheet. Every
 * page here loads site.css first and gets the same tokens, the same type, the
 * same navy header and footer as the home page; this file adds only what a
 * legal document needs and a marketing page does not — a narrow reading
 * column, numbered clauses a customer can quote back at us, a contents list,
 * the plain-English gloss under each heading, and the sub-processor tables.
 *
 * It used to be a standalone stylesheet that re-declared the palette, the
 * font and the body rules, and built its own pale masthead with a "← Back to
 * RoofMap" link instead of the real nav. Two copies of a palette is two
 * places for a colour to drift, and a reader who followed a footer link from
 * the home page landed on something that looked like a different company.
 * So: nothing in here may re-declare a token, a font or a colour that
 * site.css already sets. Anything two pages need belongs in site.css.
 *
 * NOTE ON ORDER — site.css loads first, so a bare element selector here wins
 * on equal specificity. Where that is doing real work it is called out,
 * because the rule looks redundant until you know what it is overriding.
 */
:root{
  /* The only tokens site.css has no use for: the callout's tint. */
  --note:#f1f8fb; --note-line:#bfe3f0;
  --doc:860px;          /* ≈74ch at the site's 17px body — the same measure as .prose */
}

/* ── the reading column ──────────────────────────────────────────────
   The header and the footer keep site.css's full 1180px width, so they line
   up with every other page. Only the document itself narrows. */
.wrap.doc-head,
main.wrap{ max-width:var(--doc) }

/* ── title block ── */
.doc-head{ padding:46px 0 30px; border-bottom:1px solid var(--line) }
/* site.css sizes h1 for a hero (up to 62px). A document's title is a title. */
.doc-head h1{ font-size:clamp(28px,4.4vw,42px) }
.doc-head .sub{ margin:14px 0 0; font-size:17.5px; color:var(--body) }
.doc-head .dates{ margin-top:18px; font-size:13.5px; color:var(--muted) }
.doc-head .dates span + span::before{ content:'·'; margin:0 9px; color:var(--line) }

/* ── contents ── */
.toc{ margin:30px 0 0; padding:20px 24px; background:var(--paper-2); border:1px solid var(--line); border-radius:12px }
.toc h2{ margin:0 0 10px; font-size:11px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:var(--muted) }
.toc ol{ margin:0; padding:0; list-style:none; display:grid; grid-template-columns:repeat(auto-fill,minmax(330px,1fr)); gap:3px 26px; counter-reset:toc }
.toc li{ counter-increment:toc; font-size:14.5px }
.toc a{ color:var(--ink-2); text-decoration:none; display:block; padding:3px 0 }
.toc a::before{ content:counter(toc) '.'; color:var(--muted); font-variant-numeric:tabular-nums; margin-right:8px }
.toc a:hover{ color:var(--accent) }

/* ── body ──
   site.css gives every section 88px top AND bottom — right for a marketing
   page built of big bands, far too much for twenty numbered clauses. The
   shorthand has to be re-stated rather than just the top, or the 88px bottom
   survives and the clauses drift apart. */
main{ counter-reset:sec; padding-bottom:40px }
main section{ padding:38px 0 0 }
main section h2{
  color:var(--ink); font-size:21px; font-weight:800; letter-spacing:-.015em;
  line-height:1.25; margin:0 0 6px; scroll-margin-top:20px;
}
main section h2::before{
  counter-increment:sec; content:counter(sec) '.';
  color:var(--accent); margin-right:10px; font-variant-numeric:tabular-nums;
}
main section h3{ color:var(--ink-2); font-size:16.5px; font-weight:700; margin:22px 0 4px }
/* site.css sets p{margin:0} — its pages space their own blocks. A document
   is paragraphs, so they space themselves. */
main p{ margin:12px 0 }
main ul,main ol.plain{ margin:12px 0; padding-left:22px }
main li{ margin:6px 0 }
main strong{ color:var(--ink-2); font-weight:700 }
/* site.css sets a{color:inherit} for links inside coloured bands. In a
   document every link is a link and should look like one — scoped to the
   document so the navy header and footer keep their own treatment. */
main a,.doc-head a{ color:var(--accent) }
main a:hover,.doc-head a:hover{ color:var(--accent-deep) }
a:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; border-radius:2px }

/* The one-line plain-English gloss under each heading. It is not a summary
   for its own sake — a subscriber who reads only these should still know what
   they have agreed to. */
.gloss{
  margin:0 0 14px; font-size:15px; color:var(--muted); font-style:italic;
}

/* A clause worth not missing. Used sparingly — measurements, liability,
   whose customer data it is. Same shape as site.css's .answer and .anchor
   blocks, so a reader meets one treatment across the whole site. */
.callout{
  margin:18px 0; padding:16px 20px; background:var(--note);
  border:1px solid var(--note-line); border-left:4px solid var(--accent);
  border-radius:0 10px 10px 0; font-size:15.5px; color:var(--ink-2);
}
.callout p:first-child{ margin-top:0 }
.callout p:last-child{ margin-bottom:0 }

/* ── tables (sub-processors, retention) ── */
.tbl-wrap{ overflow-x:auto; margin:16px 0; position:relative }
/* On a phone the table scrolls inside its own box rather than pushing the
   page sideways. A reader who can't see the third column has to be told it
   is there, so the hint appears exactly when the scroll does. */
.tbl-wrap::after{
  content:'Swipe the table sideways for the rest →';
  display:none; padding-top:8px; font-size:12.5px; color:var(--muted); font-style:italic;
}
@media (max-width:620px){ .tbl-wrap::after{ display:block } }
.tbl-wrap table{ border-collapse:collapse; width:100%; min-width:520px; font-size:14.5px }
.tbl-wrap th,.tbl-wrap td{ text-align:left; vertical-align:top; padding:10px 14px 10px 0; border-bottom:1px solid var(--line) }
.tbl-wrap th{ font-size:11px; font-weight:800; letter-spacing:.09em; text-transform:uppercase; color:var(--muted); white-space:nowrap }
/* A provider's name, then what kind of thing it is. Two lines, always —
   relying on a block <strong> and a bare text node put the subtitle on the
   same line as a name that wrapped. */
.tbl-wrap td strong{ display:block; color:var(--ink-2) }
.tbl-wrap td .sub{ display:block; color:var(--muted); font-size:13px; line-height:1.4; margin-top:1px }

@media (max-width:560px){
  .doc-head{ padding-top:30px }
  .toc ol{ grid-template-columns:1fr }
}
@media print{
  header,footer,.toc{ display:none }
  body{ font-size:11pt } .wrap{ max-width:none; padding:0 }
  main section{ padding-top:20px; break-inside:avoid }
}