/* Document pages: /privacy, /support, /terms.
 *
 * A SUPPLEMENT to the site stylesheet, never a replacement — the tokens, the
 * reset, the nav, the .cta, the grain and the footer all come from page.html's
 * CSS, which these pages load first. Everything here is scoped to .doc-wrap,
 * .doc-body or .doc-close so nothing can leak back onto the homepage.
 *
 * The documents differ from the homepage in three deliberate ways: one narrow
 * column, a longer line height, and no animation. They are read top to bottom,
 * often on a phone, sometimes by a store reviewer in a hurry.
 *
 * Contrast pairs are in tools/contrast.mjs and are checked, not judged. */

/* ---------- the column ---------- */
.doc-wrap{max-width:860px}
.doc-body,
.doc-wrap header.doc{font-size:17px;line-height:1.7}

/* ---------- head ---------- */
/* A quiet echo of the hero's light field — same reds, no shader. */
header.doc{position:relative;padding:74px 0 8px}
/* Sized against the viewport rather than the column: a percentage inset here
 * is a percentage of an 860px column, which on a phone hangs 140px off each
 * side of the screen. body{overflow-x:hidden} hides that but the page still
 * scrolls sideways under a thumb. */
header.doc::before{
  content:"";position:absolute;z-index:0;pointer-events:none;
  top:-72px;left:50%;transform:translateX(-50%);
  width:min(1100px,96vw);height:400px;
  background:
    radial-gradient(closest-side,rgba(211,47,47,.34),transparent 72%) 24% 38%/60% 84% no-repeat,
    radial-gradient(closest-side,rgba(255,138,128,.15),transparent 72%) 80% 46%/54% 74% no-repeat;
}
/* The wash is a positioned pseudo-element, so the content above it has to be
 * positioned too — z-index:-1 would put it behind body's own background,
 * which is painted (html carries the theme colour), not propagated. */
header.doc > *{position:relative;z-index:1}
header.doc h1{font-size:clamp(38px,7.4vw,66px);line-height:.94;letter-spacing:-.045em}
.doc-wrap .stamp{
  font-family:var(--mono);font-size:12px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--dim);margin:20px 0 0;line-height:1.6;
}
.doc-wrap header.doc .lede{color:var(--muted);font-size:19px;margin:22px 0 0;max-width:56ch}

/* ---------- plain-language summary box ---------- */
.summary{
  border:1px solid rgba(255,84,73,.34);border-left:3px solid var(--accent);
  background:linear-gradient(100deg,#25171A,#101012 70%);
  border-radius:12px;padding:28px 30px;margin:36px 0 0;
}
.summary h2{font-size:20px;letter-spacing:-.02em;line-height:1.2;margin:0 0 15px}
.summary ul{margin:0;padding-left:20px;display:grid;gap:10px}
.summary li{color:var(--muted);font-size:16.5px;line-height:1.6}
.summary li b{color:var(--ink);font-weight:600}

/* ---------- table of contents ---------- */
nav.toc{margin:42px 0 0;border-top:1px solid var(--edge);padding-top:24px}
nav.toc p{
  font-family:var(--mono);font-size:12px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--dim);margin:0 0 14px;
}
nav.toc ol{margin:0;padding:0;list-style:none;counter-reset:toc;
           display:grid;grid-template-columns:repeat(2,1fr);gap:2px 26px}
nav.toc li{counter-increment:toc}
nav.toc a{display:flex;gap:12px;padding:9px 0;text-decoration:none;
          color:var(--muted);font-size:15.5px;line-height:1.45}
nav.toc a::before{content:counter(toc,decimal-leading-zero);
                  font-family:var(--mono);font-size:12px;color:var(--dim);
                  padding-top:2px;flex:none}
nav.toc a:hover{color:var(--ink)}

/* ---------- body ---------- */
.doc-body{padding:12px 0 24px}
.doc-body section.s{padding-top:48px;scroll-margin-top:88px}
.doc-body h2{font-size:clamp(23px,3.4vw,30px);line-height:1.12;margin:0 0 16px}
.doc-body h3{font-size:19px;font-weight:700;letter-spacing:-.02em;line-height:1.3;margin:28px 0 10px}
.doc-body p{margin:0 0 16px;color:var(--muted)}
.doc-body p strong,.doc-body li strong{color:var(--ink);font-weight:600}
.doc-body ul,.doc-body ol{margin:0 0 16px;padding-left:22px;display:grid;gap:9px}
.doc-body li{color:var(--muted)}
.doc-body a{color:var(--red);text-decoration:underline;text-underline-offset:3px;
            text-decoration-thickness:1px;text-decoration-color:rgba(255,84,73,.45)}
.doc-body a:hover{color:var(--ink);text-decoration-color:currentColor}
.doc-body code{font-family:var(--mono);font-size:.86em;color:var(--red);
               background:rgba(255,84,73,.10);padding:1px 5px;border-radius:3px}

/* a definition-style block: "what we collect", "what to send us" */
.doc-body dl.rows{margin:0 0 18px;display:grid;gap:1px;background:var(--edge);
                  border:1px solid var(--edge);border-radius:10px;overflow:hidden}
.doc-body dl.rows > div{background:var(--ground);padding:17px 19px}
.doc-body dl.rows dt{font-family:var(--mono);font-size:12px;letter-spacing:.06em;
                     text-transform:uppercase;color:var(--red);margin:0 0 7px}
.doc-body dl.rows dd{margin:0;color:var(--muted);font-size:16px;line-height:1.6}

/* a callout for the things that matter most */
.note{border:1px solid var(--edge-2);border-radius:10px;padding:19px 21px;
      margin:0 0 18px;background:var(--ground)}
.note p:last-child{margin-bottom:0}
.note .tag{font-family:var(--mono);font-size:12px;letter-spacing:.14em;
           text-transform:uppercase;color:var(--red);display:block;margin-bottom:9px}

/* tables (store disclosure appendix) */
.scroller{overflow-x:auto;margin:0 0 18px;border:1px solid var(--edge);border-radius:10px}
.doc-body table{width:100%;border-collapse:collapse;font-size:15.5px;min-width:540px}
.doc-body th,.doc-body td{text-align:left;padding:13px 15px;vertical-align:top;
                          border-bottom:1px solid var(--edge);color:var(--muted)}
.doc-body tbody tr:last-child td{border-bottom:0}
.doc-body thead th{font-family:var(--mono);font-size:12px;letter-spacing:.1em;
                   text-transform:uppercase;color:var(--dim);
                   border-bottom:1px solid var(--edge-2);background:var(--ground)}
.doc-body td:first-child{color:var(--ink)}

/* contact block */
.contact{border:1px solid var(--edge);border-radius:12px;padding:25px 27px;
         background:var(--ground);margin:14px 0 0}
.contact .who{font-family:var(--display);font-weight:800;font-size:20px;
              letter-spacing:-.02em;margin:0 0 8px;color:var(--ink)}
.contact p{margin:0 0 7px}
.contact p:last-child{margin-bottom:0}
.contact a.mail{font-family:var(--mono);font-size:16px;color:var(--red);
                text-decoration:none;border-bottom:1px solid rgba(255,84,73,.4)}
.contact a.mail:hover{color:var(--ink);border-bottom-color:var(--ink)}

/* ---------- the closing block, smaller than the homepage's ---------- */
.close.doc-close{padding:96px 0 0;margin-top:56px}
.close.doc-close h2{font-size:clamp(28px,4.6vw,50px)}
.close.doc-close p{font-size:16.5px}

@media (max-width:900px){
  header.doc{padding:46px 0 4px}
  nav.toc ol{grid-template-columns:1fr}
  .close.doc-close{padding-top:72px;margin-top:40px}
}
@media (max-width:640px){
  .doc-body,.doc-wrap header.doc{font-size:16.5px}
  .summary{padding:23px 21px}
  .doc-wrap header.doc .lede{font-size:17.5px}
}

/* A document is read, not performed. */
.doc-wrap *,.doc-close *{animation:none!important}