/* Document pages (support, privacy, terms, delete account). They wear the landing's chrome —
   its tokens, fonts, floating nav, day/night theme and footer come from landing.css — and this
   file adds only the document: a short sky band for the title, then one readable column. */

/* ── The title band: the landing's sky, cut short ── */
.doc-hero {
  position: relative; overflow: hidden; isolation: isolate;
  padding: calc(env(safe-area-inset-top, 0px) + 136px) 20px 104px;
  background: linear-gradient(180deg, var(--sky-1) 0%, var(--sky-2) 38%, var(--sky-3) 70%, var(--sky-4) 88%, var(--bg) 100%);
  color: var(--hero-ink);
  text-align: center;
}
.doc-hero .stars { inset: 0; }
.doc-hero .puff { opacity: 0.55; }
.doc-hero .puff-a { top: auto; bottom: 34px; }
.doc-hero .puff-b { top: 120px; }
.doc-hero-copy { position: relative; max-width: 760px; margin-inline: auto; }
.doc-hero .eyebrow { margin-bottom: 20px; }
.doc-hero h1 {
  font-size: clamp(38px, 6vw, 68px); font-weight: 800;
  line-height: 1; letter-spacing: -0.024em;
}
.doc-hero .lede { max-width: 36em; margin-top: 18px; }
.doc-alt { margin-top: 16px; font-size: 15px; color: var(--hero-ink-2); }
.doc-alt a { color: var(--hero-ink); font-weight: 600; text-underline-offset: 3px; }

/* ── The column ── */
.doc {
  position: relative; z-index: 1;
  max-width: 760px; margin-inline: auto; padding: 8px 20px 0;
  color: var(--ink-2);
}
.doc h2 {
  margin: 56px 0 14px; color: var(--ink);
  font-size: clamp(24px, 3vw, 30px); font-weight: 800; line-height: 1.15; letter-spacing: -0.015em;
}
.doc h2:first-child { margin-top: 24px; }
.doc h3 { margin: 30px 0 8px; color: var(--ink); font-size: 20px; font-weight: 700; line-height: 1.25; }
.doc p { margin: 0 0 14px; text-wrap: pretty; }
.doc b, .doc strong { color: var(--ink); font-weight: 650; }
.doc a { color: var(--accent-text); font-weight: 600; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.doc a:hover { text-decoration-thickness: 2px; }
.doc ul, .doc ol { margin: 0 0 16px; padding-left: 1.3em; }
.doc li { margin: 6px 0; padding-left: 4px; }
.doc li::marker { color: var(--accent-text); }
.doc .small { font-size: 14px; color: var(--ink-3); }
.doc section { padding: 0; }

/* numbered steps: amber counters, like the app's onboarding dots */
.doc ol.steps { list-style: none; padding: 0; counter-reset: step; }
.doc ol.steps li {
  counter-increment: step; position: relative;
  margin: 12px 0; padding: 14px 18px 14px 60px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 18px;
}
.doc ol.steps li::before {
  content: counter(step);
  position: absolute; left: 16px; top: 50%; translate: 0 -50%;
  width: 30px; height: 30px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--accent); color: var(--accent-ink);
  font: 800 15px/1 var(--font-display);
}

/* tables and callouts sit on soft cards */
.doc table {
  width: 100%; margin: 16px 0 24px;
  border-collapse: separate; border-spacing: 0;
  background: var(--surface); border: 1px solid var(--line); border-radius: 20px; overflow: hidden;
  font-size: 15px; line-height: 1.5;
}
.doc th, .doc td { padding: 12px 16px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); }
.doc tr:last-child > th, .doc tr:last-child > td { border-bottom: 0; }
.doc th { color: var(--ink); font-weight: 650; }
.doc table:not(.kv) tr:first-child > th { background: var(--soft); }
.doc table.kv th { width: 34%; color: var(--ink-3); font-weight: 500; }
.doc .card {
  margin: 20px 0; padding: 20px 22px;
  background: var(--soft); border-radius: 22px;
}
.doc .card > :last-child { margin-bottom: 0; }

/* ── Support FAQ: native <details>, no script; the first item ships open ── */
.doc .faq { margin-top: 8px; }
.doc .faq-title { margin-top: 24px; }
.doc .faq details {
  margin: 10px 0;
  background: var(--surface); border: 1px solid var(--line); border-radius: 20px;
  transition: box-shadow 0.2s;
}
.doc .faq details[open] { box-shadow: var(--shadow); }
.doc .faq summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 18px 20px;
  color: var(--ink); font: 700 18px/1.3 var(--font-display);
}
.doc .faq summary::-webkit-details-marker { display: none; }
.doc .faq summary::after {
  content: "+"; flex: none;
  width: 30px; height: 30px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--soft); color: var(--accent-text);
  font: 500 20px/1 var(--font-body);
}
.doc .faq details[open] summary::after { content: "\2212"; background: var(--accent); color: var(--accent-ink); }
.doc .faq details > div { padding: 0 20px 18px; }
.doc .faq details > div p { margin: 0; }

.doc-foot { margin-top: 72px; }
.doc-foot footer { margin-top: 0; }

@media (max-width: 640px) {
  .doc-hero { padding: calc(env(safe-area-inset-top, 0px) + 104px) 16px 84px; }
  .doc-hero .puff-b { display: none; }
  .doc, .doc-hero-copy { padding-inline: 16px; }
  .doc-hero-copy { padding-inline: 0; }
  .doc th, .doc td { padding: 10px 12px; }
  .doc table.kv th { width: 40%; }
  /* a three-column table can't breathe at phone width: each row becomes a small card */
  .doc table:not(.kv), .doc table:not(.kv) tbody, .doc table:not(.kv) tr, .doc table:not(.kv) td { display: block; }
  .doc table:not(.kv) tr:first-child { display: none; }
  .doc table:not(.kv) td { padding: 2px 16px; border: 0; }
  .doc table:not(.kv) td:first-child { padding-top: 14px; color: var(--ink); font-weight: 650; }
  .doc table:not(.kv) td:last-child { padding-bottom: 14px; color: var(--ink-3); border-bottom: 1px solid var(--line); }
  .doc table:not(.kv) tr:last-child td:last-child { border-bottom: 0; }
  .doc .faq summary { padding: 16px; font-size: 17px; }
  .doc .faq details > div { padding: 0 16px 16px; }
}