/* Information pages (How it works, Terms, Privacy, ...) — on top of home.css. */

.doc-hero {
  padding: 150px 0 70px;
  background:
    radial-gradient(circle at 12% 20%, rgba(215, 255, 56, .09), transparent 26rem),
    radial-gradient(circle at 87% 18%, rgba(86, 217, 218, .055), transparent 31rem);
}

.doc-eyebrow {
  display: inline-block;
  color: var(--acid);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.doc-hero h1 {
  max-width: 820px;
  margin: 18px 0 0;
  font-size: clamp(40px, 6vw, 76px);
  font-weight: 730;
  letter-spacing: -.055em;
  line-height: 1.02;
}

.doc-hero p {
  margin: 24px 0 0;
  color: var(--muted);
  font-size: 19px;
  line-height: 1.7;
}

.doc-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 22px;
  margin-top: 34px;
}

.doc-link {
  color: var(--ink);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: var(--line-strong);
  text-underline-offset: 5px;
}

.doc-section { padding: 60px 0; }
.doc-section-alt { background: linear-gradient(180deg, rgba(255,255,255,.015), transparent); }

.doc-h2 {
  margin: 0 0 30px;
  font-size: clamp(30px, 3.6vw, 46px);
  font-weight: 730;
  letter-spacing: -.05em;
}

.step-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.step-card,
.fact-card {
  padding: 28px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}

.step-no {
  display: inline-grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  color: #080a08;
  background: var(--acid);
  font-weight: 800;
}

.step-card h2,
.fact-card h3 {
  margin: 18px 0 10px;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -.03em;
}

.step-card p,
.fact-card p {
  margin: 0;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.7;
}

.step-card .step-note {
  margin-top: 14px;
  color: var(--acid-soft);
  font-size: 14px;
}

.fact-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
}

.fact-card h3 { margin-top: 0; font-size: 19px; }

.doc-cta { padding: 20px 0 60px; }
.doc-cta h2 { margin: 0; font-size: clamp(32px, 4vw, 52px); font-weight: 730; letter-spacing: -.05em; }
.doc-cta p { margin: 14px 0 0; color: var(--muted); font-size: 18px; }

@media (max-width: 980px) {
  .step-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fact-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
  .doc-hero { padding: 120px 0 40px; }
  .step-list,
  .fact-grid { grid-template-columns: 1fr; }
}

/* Legal pages: a contents list on the left, short lines on the right. */
.doc-hero-legal { padding-bottom: 30px; }
.doc-draft {
  display: inline-block;
  margin-top: 18px !important;
  padding: 8px 14px;
  border: 1px solid var(--orange);
  border-radius: 10px;
  color: var(--orange) !important;
  font-size: 15px !important;
}
.doc-todo {
  padding: 2px 8px;
  border-radius: 6px;
  color: #080a08;
  background: var(--acid);
  font-size: 14px;
  font-weight: 700;
}
.legal-grid {
  display: grid;
  grid-template-columns: 250px minmax(0, 1fr);
  gap: 60px;
  align-items: start;
}
.legal-toc {
  position: sticky;
  top: 100px;
  display: grid;
  gap: 8px;
  font-size: 14px;
}
.legal-toc strong { margin-bottom: 6px; color: var(--ink); }
.legal-toc a { color: var(--muted); text-decoration: none; }
.legal-toc a:hover { color: var(--acid); }
.legal-body { max-width: 760px; }
.legal-body article { padding: 0 0 34px; scroll-margin-top: 100px; }
.legal-body h2 { margin: 0 0 14px; font-size: 24px; font-weight: 700; letter-spacing: -.03em; }
.legal-body p,
.legal-body li { margin: 0 0 8px; color: var(--muted); font-size: 16px; line-height: 1.7; }
.legal-body ul { margin: 0; padding-left: 20px; }
.legal-body a { color: var(--ink); text-decoration-color: var(--line-strong); text-underline-offset: 4px; }

@media (max-width: 860px) {
  .legal-grid { grid-template-columns: 1fr; gap: 30px; }
  .legal-toc { position: static; }
}

/* Tables on legal pages (cookies, company details) */
.legal-table-wrap { margin: 6px 0 16px; overflow-x: auto; }
.legal-table { width: 100%; border-collapse: collapse; font-size: 15px; }
.legal-table th,
.legal-table td { padding: 12px 14px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; line-height: 1.6; }
.legal-table thead th { color: var(--ink); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; }
.legal-table td { color: var(--muted); }
.legal-table td:first-child { color: var(--ink); white-space: nowrap; }
.legal-facts th { width: 200px; color: var(--ink); font-weight: 600; }
.legal-facts td:first-child { white-space: normal; color: var(--muted); }

/* Small notes under sections, and the FAQ questions */
.doc-note { margin: 18px 0 0; color: var(--acid-soft); font-size: 15px; line-height: 1.6; }
.faq-list details { border-bottom: 1px solid var(--line); }
.faq-list summary { padding: 16px 0; color: var(--ink); font-size: 17px; font-weight: 600; cursor: pointer; list-style: none; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after { float: right; content: "+"; color: var(--acid); font-weight: 700; }
.faq-list details[open] summary::after { content: "–"; }
.faq-list details p { padding: 0 0 16px; }