/* ================= WAIVER — LEGAL & SUPPORT DOCUMENTS =================
   Standalone stylesheet for /terms, /privacy and /support.

   Why not styles.css? That file is the design system for the Waiver web APP --
   dense dashboard chrome, zero long-form document styles. These three pages are
   documents people actually read. Reusing styles.css would mean overriding most
   of it. So this file is the DOCUMENT half of the same SERIES system: same
   grounds and greens off the app mark, retuned for reading a thousand words at a
   time.

   SERIES (the Xbox-console look) is now the whole site. These pages match it:
   a near-black ground, a green breath of ambience, white body copy floating on a
   dark frosted sheet, Xbox green links, one amber accent. This used to be the
   LIGHT half (bright turf, dark ink); that is gone. Do not reintroduce a light
   ground here -- the site is dark now.

   The ambient wash still runs behind these pages. Each one carries
   <body data-waiver-bg="doc">, the same shader as the app; its "doc" theme was
   repainted to the SERIES dark ground at a lower mix than the dashboard, because
   a wall of small type wants a calmer field around it than a dashboard does. The
   copy itself rides on the dark .doc sheet, so the wash is what you see AROUND
   the document, not through the sentences.

   Same no-build convention as the rest of the site: plain CSS, no bundler. The
   SERIES faces (Inter / Saira Condensed / JetBrains Mono) load from Google Fonts
   in each page <head>, exactly as index.html does. (waiver-bg.js is the one
   sanctioned CDN import.)

   HARD RULE: no purple, ever. Xbox green / amber / ink only. */

:root {
  /* ---- ground (SERIES dark) ---- */
  --paper: #0F1115;                          /* the ground the shader washes over */
  --bg-deep: #080A0D;                         /* corners / deepest ground */
  --surface: #191B1F;                         /* the doc sheet body */
  --surface-2: #22252B;                       /* one step up: chips, brand tile */
  --paper-lift: rgba(34, 37, 43, 0.72);       /* frosted card: the wash reads through */
  --paper-raise: rgba(44, 48, 55, 0.85);      /* one step above lift */

  /* ---- brand greens, SERIES (Xbox) ---- */
  --teal: #107C10;   /* --xbg      the literal Xbox brand green */
  --aqua: #16A916;   /* --xbg-bright */
  --lime: #3CDC3C;   /* --xbg-glow the hottest green, used for links + edges */

  /* ---- text on the dark ground ---- */
  --ink: #FFFFFF;         /* primary body copy */
  --ink-2: #C2C8D0;       /* secondary copy */
  --ink-3: #9EA4AC;       /* tertiary — meta lines, list markers */
  --accent: #3CDC3C;      /* links */
  --accent-ink: #5BE85B;  /* link hover / pressed */
  --amber: #E0A535;       /* callout rules and headings */
  --amber-deep: #E0A535;  /* amber on the green contact fill */

  --line: rgba(255, 255, 255, 0.08);          /* hairline */
  --line-strong: rgba(60, 220, 60, 0.28);     /* emphasised hairline (green) */
  --radius: 2px;

  --font-body: "Inter", "Segoe UI", -apple-system, BlinkMacSystemFont, sans-serif;
  --font-head: "Saira Condensed", "Segoe UI", Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html {
  /* Anchor links from the table of contents must not hide the heading under
     the top of the viewport. */
  scroll-behavior: smooth;
  scroll-padding-top: 24px;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-body);
  /* Fallback for the ambient shader: this is what ships when there is no WebGL,
     or when the CDN that serves three.js cannot be reached. It has to look like
     the same page either way -- the SERIES dark ground with a breath of green. */
  background:
    radial-gradient(800px 400px at 15% 0%, rgba(16, 124, 16, 0.18), transparent 60%),
    radial-gradient(900px 500px at 100% 100%, rgba(60, 220, 60, 0.05), transparent 65%),
    radial-gradient(700px 700px at 50% 50%, rgba(255, 255, 255, 0.012), transparent 70%),
    linear-gradient(180deg, #0F1115 0%, #080A0D 100%);
  background-attachment: fixed;
  background-color: var(--paper);
  color: var(--ink);
  font-size: 17px;
  line-height: 1.72;
  -webkit-font-smoothing: antialiased;
  min-height: 100%;
}

/* ---------- Shell ----------
   The sheet. The copy floats on a dark frosted sheet so the ambient wash can run
   AROUND the text rather than under it -- white body copy stays at full contrast
   on the near-black surface (>14:1) while the green breath lives in the margins. */
.doc {
  width: 100%;
  max-width: 820px;
  margin: 22px auto 40px;
  padding: 30px 34px 60px;
  background: rgba(25, 27, 31, 0.92);
  -webkit-backdrop-filter: saturate(140%) blur(16px);
  backdrop-filter: saturate(140%) blur(16px);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35), 0 18px 50px rgba(0, 0, 0, 0.45);
}

/* ---------- Masthead ---------- */
.doc-head {
  border-bottom: 1px solid var(--line);
  padding-bottom: 22px;
  margin-bottom: 30px;
}

.doc-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: inherit;
}

.doc-brand img {
  width: 44px;
  height: 44px;
  border-radius: var(--radius);
  object-fit: contain;
  background: var(--surface-2);
  border: 1px solid var(--line);
  flex: 0 0 auto;
}

.doc-brand .wordmark {
  font-family: var(--font-head);
  font-style: normal;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 18px;
  line-height: 1.05;
}

.doc-brand .wordmark span {
  display: block;
  font-family: var(--font-body);
  font-style: normal;
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
  font-size: 12px;
  color: var(--ink-3);
  margin-top: 2px;
}

h1 {
  font-family: var(--font-head);
  font-style: normal;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  line-height: 1.04;
  font-size: clamp(30px, 8vw, 46px);
  margin-top: 22px;
}

.doc-meta {
  margin-top: 10px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-3);
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

/* The one line that establishes the naming: the app is Waiver, the domain is
   waiver.games, the operator is RIGHT AT HOME ENT INC, and the same service
   went out earlier on the web as Hard Knocks Fantasy. Every document opens
   with it, because reviewers notice a name mismatch and draw the wrong
   conclusion from it. */
.doc-standfirst {
  margin-top: 18px;
  font-size: 17px;
  color: var(--ink-2);
  border-left: 3px solid var(--lime);
  padding-left: 15px;
}

/* ---------- Long-form type ---------- */
h2 {
  font-family: var(--font-head);
  font-style: normal;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  line-height: 1.14;
  font-size: clamp(21px, 5vw, 25px);
  margin: 46px 0 12px;
  padding-top: 4px;
  color: var(--ink);
}

h2:first-of-type { margin-top: 34px; }

h3 {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 17px;
  letter-spacing: 0.01em;
  margin: 26px 0 8px;
  color: var(--amber);
}

p { margin: 0 0 15px; }
p:last-child { margin-bottom: 0; }

ul, ol { margin: 0 0 15px; padding-left: 22px; }
li { margin-bottom: 9px; }
li:last-child { margin-bottom: 0; }
li::marker { color: var(--ink-3); }

strong { font-weight: 700; color: var(--ink); }
em { font-style: italic; }

a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--line-strong);
  /* Long URLs (Apple's Report a Problem, Clerk's policy) must never blow out
     the layout on a phone. */
  overflow-wrap: anywhere;
}

a:hover, a:focus-visible { color: var(--accent-ink); text-decoration-color: var(--accent-ink); }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }

hr {
  border: 0;
  border-top: 1px solid var(--line);
  margin: 40px 0;
}

/* ---------- Table of contents ---------- */
.toc {
  /* Translucent on purpose -- the ambient wash runs behind these pages too. */
  background: var(--paper-lift);
  -webkit-backdrop-filter: saturate(140%) blur(14px);
  backdrop-filter: saturate(140%) blur(14px);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 18px 20px;
  margin-top: 30px;
}

.toc h2 {
  margin: 0 0 10px;
  font-size: 13px;
  letter-spacing: 0.14em;
  color: var(--ink-3);
  padding-top: 0;
}

.toc ol { margin: 0; padding-left: 20px; font-size: 15px; }
.toc li { margin-bottom: 5px; }
.toc a { text-decoration: none; color: var(--accent); }
.toc a:hover { color: var(--accent-ink); text-decoration: underline; }

/* ---------- Callouts ---------- */
.callout {
  background: var(--paper-lift);
  -webkit-backdrop-filter: saturate(140%) blur(14px);
  backdrop-filter: saturate(140%) blur(14px);
  border: 1px solid var(--line);
  border-left: 4px solid var(--lime);
  border-radius: var(--radius);
  padding: 18px 20px;
  margin: 20px 0;
}

/* The Guideline 5.3 paragraph and the account-deletion path. These have to be
   impossible to skim past. */
.callout.gold { border-left-color: var(--amber); background: var(--paper-raise); }

.callout .callout-h {
  font-family: var(--font-head);
  font-style: normal;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 13px;
  color: var(--amber);
  margin-bottom: 8px;
}

/* ---------- Definition-style rows (data tables, without a <table>) ---------- */
.rows { margin: 18px 0; }

.row {
  border-top: 1px solid var(--line);
  padding: 14px 0;
}

.row:last-child { border-bottom: 1px solid var(--line); }

.row .k {
  font-weight: 700;
  color: var(--ink);
  font-size: 15px;
  letter-spacing: 0.01em;
  margin-bottom: 3px;
}

.row .v { color: var(--ink-2); font-size: 16px; }

/* ---------- FAQ ---------- */
.faq { margin: 22px 0; }

.faq details {
  border-top: 1px solid var(--line);
  padding: 4px 0;
}

.faq details:last-of-type { border-bottom: 1px solid var(--line); }

.faq summary {
  cursor: pointer;
  list-style: none;
  padding: 15px 34px 15px 0;
  font-weight: 700;
  font-size: 16px;
  color: var(--ink);
  position: relative;
}

.faq summary::-webkit-details-marker { display: none; }

.faq summary::after {
  content: "+";
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 22px;
  font-weight: 400;
  color: var(--amber);
  line-height: 1;
}

.faq details[open] summary::after { content: "\2212"; }
.faq summary:hover { color: var(--accent); }
.faq .faq-body { padding: 0 0 16px; color: var(--ink-2); }
.faq .faq-body p { margin-bottom: 12px; }

/* ---------- Steps (support: getting started) ---------- */
.steps { counter-reset: step; list-style: none; padding: 0; margin: 22px 0; }

.steps li {
  counter-increment: step;
  position: relative;
  padding-left: 46px;
  margin-bottom: 18px;
  min-height: 32px;
}

/* Bright green disc, dark numeral -- the same trade SERIES makes on every
   primary button: green surface, near-black glyph. --bg-deep on --lime clears
   AAA. */
.steps li::before {
  content: counter(step);
  position: absolute;
  left: 0;
  top: 1px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--teal), var(--lime));
  color: var(--bg-deep);
  font-weight: 800;
  font-size: 15px;
  display: grid;
  place-items: center;
  line-height: 1;
}

.steps li b { color: var(--ink); }

/* ---------- Contact card ---------- */
/* The SERIES "gate" surface: a dark-green gradient over the ground, a green glow
   border, white copy. A bright solid-green fill would drop white body text under
   AA on the light end of the gradient; this dark treatment keeps every line well
   past 7:1 and matches the app's gate/turn cards exactly. */
.contact {
  background: linear-gradient(135deg, rgba(16, 124, 16, 0.30) 0%, rgba(10, 77, 10, 0.60) 100%);
  border: 1px solid var(--lime);
  border-radius: var(--radius);
  padding: 24px;
  margin: 26px 0;
  color: #FFFFFF;
  box-shadow: 0 0 20px rgba(16, 124, 16, 0.20);
}

/* Links inside the gate card run green-glow and go white on hover. */
.contact a { color: var(--lime); text-decoration-color: var(--line-strong); }
.contact a:hover { color: #FFFFFF; text-decoration-color: #FFFFFF; }

.contact .email {
  font-family: var(--font-head);
  font-style: normal;
  font-weight: 700;
  font-size: clamp(19px, 5.2vw, 26px);
  letter-spacing: 0.03em;
  display: inline-block;
  margin-top: 6px;
  color: var(--amber);
  text-decoration-color: var(--amber);
}

/* ---------- Footer ---------- */
.doc-foot {
  margin-top: 56px;
  padding-top: 22px;
  border-top: 1px solid var(--line);
  font-size: 14px;
  color: var(--ink-3);
}

.doc-foot nav {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 22px;
  margin-bottom: 14px;
}

.doc-foot nav a { font-weight: 700; text-decoration: none; color: var(--accent); }
.doc-foot nav a:hover { color: var(--accent-ink); text-decoration: underline; }
.doc-foot p { margin-bottom: 6px; }

/* ---------- Phone ---------- */
@media (max-width: 560px) {
  body { font-size: 16px; line-height: 1.68; }
  .doc { padding: 22px 17px 52px; margin: 12px auto 24px; border-radius: var(--radius); }
  .callout, .toc, .contact { padding: 16px 16px; }
  .doc-brand img { width: 38px; height: 38px; }
  .steps li { padding-left: 40px; }
  .steps li::before { width: 28px; height: 28px; font-size: 14px; }
}

/* Respect a reduced-motion preference: the only motion here is smooth scroll. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}