/* legal.css · the policy pages: /terms-of-service and /privacy-policy (2026-10-04). Archetype article-post, document variant
   (hawcx-page-layouts: hero-article + article-body). One stylesheet for every policy page; prefix lg-.
   Our theme: a short dark header set on the reading column (crumb, the document's title, its dates as label-over-value pairs on a dotted
   rule, no CTA), then one continuous white reading area, then the shared footer. No assets, no motion, no FAQ.
   The column: a 240px gutter holding the document's own table of contents (sticky, the section in view in ink) beside a 720px measure;
   under 900px the contents fold into a disclosure above the text. The legal text is verbatim from hawcx.com, so all styling is here. */

body.pg-legal .lg-grid{display:grid;grid-template-columns:240px minmax(0,720px);column-gap:64px;justify-content:center}

/* ---- header (dark) ---- */
body.pg-legal .lg-hero{padding:72px 0 64px}
body.pg-legal .lg-head{grid-column:2;min-width:0}
body.pg-legal .lg-hero .cl-crumb ol{margin-bottom:32px}
body.pg-legal .lg-hero .cl-h1{max-width:none}
body.pg-legal .lg-meta{display:flex;flex-wrap:wrap;gap:16px 56px;margin:40px 0 0;padding-top:24px;border-top:1px dotted rgba(255,255,255,.22)}
body.pg-legal .lg-meta dt{font-size:13px;line-height:18px;letter-spacing:.01em;color:rgba(255,255,255,.58)}
body.pg-legal .lg-meta dd{margin:4px 0 0;font-size:15px;line-height:22px;color:rgba(255,255,255,.86)}

/* ---- the reading area (white) ---- */
body.pg-legal .lg-doc{background:#fff;padding:88px 0 136px}

/* contents gutter */
body.pg-legal .lg-toc{position:sticky;top:112px;align-self:start;max-height:calc(100vh - 136px);overflow-y:auto;scrollbar-width:thin;overscroll-behavior:contain}
body.pg-legal .lg-toc-d{border:0}                                                   /* v4.css gives every details an FAQ rule */
body.pg-legal .lg-toc-d>summary{display:flex;align-items:center;justify-content:space-between;gap:12px;list-style:none;cursor:default;
  min-height:0;margin:0 0 14px;padding:0;font-size:13px;line-height:18px;font-weight:400;letter-spacing:.01em;color:var(--ink-60)}
body.pg-legal .lg-toc-d>summary::-webkit-details-marker{display:none}
body.pg-legal .lg-toc-t{display:inline-block;text-transform:lowercase}            /* "TABLE OF CONTENTS" / "Table of Contents" both read "Table of contents" */
body.pg-legal .lg-toc-t::first-letter{text-transform:uppercase}
body.pg-legal .lg-chev{display:none}
body.pg-legal .lg-toc ol{margin:0;padding:0;list-style:none;counter-reset:lg}
body.pg-legal .lg-toc li{counter-increment:lg}
body.pg-legal .lg-toc a{display:grid;grid-template-columns:26px minmax(0,1fr);padding:5px 0;font-size:14px;line-height:20px;color:var(--ink-60);transition:color .15s}
body.pg-legal .lg-toc a::before{content:counter(lg) ".";font-variant-numeric:tabular-nums;color:var(--ink-60)}
body.pg-legal .lg-toc a:hover,body.pg-legal .lg-toc a[aria-current]{color:var(--ink)}
body.pg-legal .lg-toc a[aria-current]::before{color:var(--ink)}
body.pg-legal .lg-toc ol.lg-uc a{font-size:12.5px;letter-spacing:.04em}             /* the Terms list is set in capitals on hawcx.com */
body.pg-legal .lg-toc a:focus-visible,body.pg-legal .lg-toc-d>summary:focus-visible{outline:2px solid var(--blue);outline-offset:2px;border-radius:4px}

/* the document */
body.pg-legal .lg-prose{min-width:0;font-size:16px;line-height:28px;letter-spacing:.002em;color:var(--ink-80)}
body.pg-legal .lg-prose>:first-child{margin-top:0}
body.pg-legal .lg-prose p{margin:0 0 16px}
body.pg-legal .lg-prose h2{margin:64px 0 18px;font-size:26px;line-height:34px;font-weight:300;letter-spacing:-.018em;color:var(--ink);scroll-margin-top:24px}
body.pg-legal .lg-prose h2.lg-uc{margin-top:60px;font-size:17px;line-height:26px;font-weight:500;letter-spacing:.045em}
body.pg-legal .lg-prose h3{margin:36px 0 12px;font-size:18px;line-height:27px;font-weight:500;letter-spacing:-.006em;color:var(--ink);scroll-margin-top:24px}
body.pg-legal .lg-prose h2+h3{margin-top:24px}
body.pg-legal .lg-prose strong{font-weight:500;color:var(--ink)}
body.pg-legal .lg-prose a{color:var(--ink);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;text-decoration-color:var(--ink-40);
  overflow-wrap:anywhere;transition:text-decoration-color .15s}
body.pg-legal .lg-prose a:hover{text-decoration-color:var(--ink)}
body.pg-legal .lg-prose a:focus-visible{outline:2px solid var(--blue);outline-offset:2px;border-radius:2px}
body.pg-legal .lg-prose #cookies{scroll-margin-top:24px}                             /* html already has scroll-padding-top:80px (v4.css); this adds air under the nav */
/* "a. …" clauses: the letter hangs in the margin */
body.pg-legal .lg-prose .lg-sub{position:relative;padding-left:28px}
body.pg-legal .lg-prose .lg-sub>.lg-n{position:absolute;left:0;top:0;color:var(--ink-60)}
body.pg-legal .lg-prose .lg-sub+p:not(.lg-sub){margin-top:20px}
/* a bold lead-in followed by its text ("Device Information We receive …") sits on its own line */
body.pg-legal .lg-prose .lg-lead>strong:first-child{display:block;margin-bottom:2px}
body.pg-legal .lg-prose ul,body.pg-legal .lg-prose ol{margin:0 0 20px;padding-left:22px}
body.pg-legal .lg-prose ul{list-style:disc}                                         /* v4.css resets every list */
body.pg-legal .lg-prose ol{list-style:decimal}
body.pg-legal .lg-prose li{padding-left:6px}
body.pg-legal .lg-prose li::marker{color:var(--ink-40)}
body.pg-legal .lg-prose li p{margin:0 0 10px}

@media (max-width:1100px){
  body.pg-legal .lg-grid{grid-template-columns:200px minmax(0,720px);column-gap:48px}
}
@media (max-width:900px){
  body.pg-legal .lg-grid{grid-template-columns:minmax(0,1fr);row-gap:0}
  body.pg-legal .lg-head{grid-column:1}
  body.pg-legal .lg-doc{padding:48px 0 96px}
  /* the contents fold into a disclosure above the text */
  body.pg-legal .lg-toc{position:static;max-height:none;overflow:visible;margin:0 0 40px;border-top:1px dotted var(--ink-15);border-bottom:1px dotted var(--ink-15)}
  body.pg-legal .lg-toc-d>summary{margin:0;min-height:52px;padding:14px 0;cursor:pointer;font-size:15px;line-height:22px;color:var(--ink)}
  body.pg-legal .lg-chev{display:block;flex:none;width:8px;height:8px;margin-right:2px;border-right:1.4px solid var(--ink-60);border-bottom:1.4px solid var(--ink-60);
    transform:translateY(-2px) rotate(45deg);transition:transform .2s}
  body.pg-legal .lg-toc-d[open] .lg-chev{transform:translateY(2px) rotate(225deg)}
  body.pg-legal .lg-toc ol{padding:0 0 16px}
}
@media (max-width:760px){
  body.pg-legal .lg-hero{padding:44px 0 48px}
  body.pg-legal .lg-hero .cl-crumb ol{margin-bottom:24px}
  body.pg-legal .lg-meta{gap:12px 40px;margin-top:28px;padding-top:20px}
  body.pg-legal .lg-prose{line-height:27px}
  body.pg-legal .lg-prose h2{margin-top:52px;font-size:23px;line-height:30px}
  body.pg-legal .lg-prose h2.lg-uc{margin-top:48px;font-size:16px;line-height:24px}
  body.pg-legal .lg-prose h3{font-size:17px;line-height:25px}
  body.pg-legal .lg-prose .lg-sub{padding-left:24px}
}
@media (prefers-reduced-motion:reduce){body.pg-legal .lg-chev,body.pg-legal .lg-toc a,body.pg-legal .lg-prose a{transition:none}}