/* DebutDeploy www — document/prose styles for the legal + company pages.
 *
 * Loaded AFTER assets/dd.css, which supplies the reset, fonts, palette and the
 * shared header/footer chrome. This file only styles the page bodies (.doc,
 * .prose-hero, .feature-grid, .doc-card …) and is aligned to the same tokens
 * as the design, so legal pages read as part of the same site.
 *
 * Note: dd.css resets `ul { list-style: none }` and `p, h1-h4 { margin: 0 }`
 * for the marketing layouts, so prose containers restore both below.
 */
:root {
  --paper: #f7f9fc;
  --card: #ffffff;
  --ink: #0b0d12;
  --ink-2: #4d5661;
  --ink-3: #8b939f;
  --line: #e5e8ee;
  --line-2: #d8dde6;
  --track: #eceff4;
  --accent: #2563eb;
  --accent-hover: #1b4ed1;
  --accent-soft: #eef3fe;
  --accent-line: #d8e3ff;
  --accent-ink: #1b4ed1;
  --ok: #15803d;
  --warn: #b45309;
  --warn-soft: #fef3e2;
  --warn-line: #f6d9a8;
}

html { scroll-behavior: smooth; }
.wrap { max-width: 1180px; margin: 0 auto; padding: 0 24px; }

/* ── buttons ──────────────────────────────────────────────── */
.btn {
  font-weight: 600; font-size: 14px; padding: 11px 20px; border-radius: 10px;
  text-decoration: none; cursor: pointer; transition: .18s;
  display: inline-flex; align-items: center; gap: 7px;
  border: 1px solid var(--accent); background: var(--accent); color: #fff;
}
.btn:hover { background: var(--accent-hover); border-color: var(--accent-hover); color: #fff; }
.btn-ghost { border: 1px solid var(--line-2); background: var(--card); color: var(--ink); }
.btn-ghost:hover { border-color: var(--accent); background: var(--card); color: var(--accent); }

/* ── document pages (legal / info) ────────────────────────── */
.doc { max-width: 780px; margin: 0 auto; padding: 64px 24px 32px; }
.doc-head { padding-bottom: 26px; margin-bottom: 34px; border-bottom: 1px solid var(--line); }

.eyebrow {
  display: inline-flex; align-items: center; gap: 12px;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--accent);
}
.eyebrow::before { content: ""; width: 22px; height: 2px; background: var(--accent); flex: none; }

.doc h1 {
  font-weight: 800; letter-spacing: -.035em; line-height: 1.05;
  font-size: clamp(32px, 5vw, 46px); margin: 20px 0 0;
}
.doc .updated {
  margin-top: 14px; font-family: 'IBM Plex Mono', monospace;
  font-size: 12px; color: var(--ink-3);
}
.doc h2 {
  font-weight: 700; letter-spacing: -.025em; font-size: 23px;
  margin: 44px 0 12px; scroll-margin-top: 90px;
}
.doc h3 { font-weight: 700; font-size: 16.5px; margin: 26px 0 8px; letter-spacing: -.015em; }
.doc p { color: var(--ink-2); margin: 12px 0; line-height: 1.65; }
.doc ul, .doc ol { color: var(--ink-2); margin: 12px 0 12px 4px; padding-left: 22px; }
.doc ul { list-style: disc; }
.doc ol { list-style: decimal; }
.doc li { margin: 7px 0; line-height: 1.6; }
.doc strong { color: var(--ink); font-weight: 700; }
.doc a { text-decoration: underline; text-underline-offset: 2px; }
.doc code {
  font-family: 'IBM Plex Mono', monospace; font-size: 13px;
  background: var(--track); border: 1px solid var(--line);
  border-radius: 6px; padding: 1px 6px;
}
.doc table { width: 100%; border-collapse: collapse; margin: 18px 0; font-size: 14px; }
.doc th, .doc td { text-align: left; padding: 12px 14px; border: 1px solid var(--line); vertical-align: top; }
.doc th {
  background: #fbfcfe; font-weight: 600; color: var(--ink);
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10.5px; letter-spacing: .09em; text-transform: uppercase;
}
.doc td { color: var(--ink-2); }

/* draft-for-legal-review banner */
.draft {
  display: flex; gap: 12px; align-items: flex-start;
  background: var(--warn-soft); border: 1px solid var(--warn-line);
  border-radius: 12px; padding: 15px 17px; margin-bottom: 30px;
  font-size: 14px; color: var(--warn); line-height: 1.6;
}
.draft strong { color: var(--warn); }
.draft svg { flex: none; margin-top: 1px; }

/* legal hub cards */
.card-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin-top: 8px; }
.doc-card {
  display: block; background: #fbfcfe; border: 1px solid var(--line);
  border-radius: 14px; padding: 20px 22px; text-decoration: none;
  transition: transform .2s, border-color .2s, box-shadow .2s;
}
.doc-card:hover {
  transform: translateY(-3px); border-color: #c9d4e8;
  box-shadow: 0 22px 40px -32px rgba(11, 13, 18, .4);
}
.doc-card h3 { color: var(--ink); font-weight: 700; font-size: 17px; margin: 0; letter-spacing: -.02em; }
.doc-card p { color: var(--ink-2); font-size: 13.5px; margin: 7px 0 0; line-height: 1.55; }

/* generic content section for about / contact / security */
.prose-hero { padding: 72px 24px 20px; }
.prose-hero h1 {
  font-weight: 800; letter-spacing: -.035em; line-height: 1.04;
  font-size: clamp(34px, 5.5vw, 54px); max-width: 18ch; text-wrap: balance;
}
.prose-hero p {
  color: var(--ink-2); font-size: clamp(16px, 2vw, 19px);
  max-width: 56ch; margin-top: 20px; line-height: 1.6; text-wrap: pretty;
}
.feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 8px; }
.feature {
  background: #fbfcfe; border: 1px solid var(--line);
  border-radius: 15px; padding: 24px;
}
.feature h3 {
  font-weight: 700; font-size: 16px; margin: 0 0 8px; letter-spacing: -.018em;
  display: flex; align-items: center; gap: 9px;
}
.feature p { color: var(--ink-2); font-size: 14px; margin: 0; line-height: 1.6; }

/* ── responsive ───────────────────────────────────────────────
 * Same breakpoints dd.css already uses (1140 / 900 / 760) so the prose pages
 * reflow in step with the marketing chrome. Desktop (1141px+) is untouched.
 * Nothing here shrinks type: these are legal documents and have to stay
 * legible, so the small screens get less padding, not smaller words.
 */

/* Below the desktop breakpoint the mono micro-type comes up to the 12px
   legibility floor. */
@media (max-width: 1140px) {
  .eyebrow { font-size: 12px; }
  .doc .updated { font-size: 12px; }
  .doc th { font-size: 12px; letter-spacing: .06em; }
}

@media (max-width: 900px) {
  /* dd.css sets `h2 { font-size: 30px !important }` for the marketing
     sections; left alone that makes a prose h2 *bigger* on a tablet than on a
     desktop, so the document scale is restored here (needs !important to beat
     that rule, not to win over anything in this file). */
  .doc h2 { font-size: 22px !important; margin-top: 38px; }
  .feature-grid, .card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
  .doc { padding: 44px 20px 28px; }
  .doc-head { padding-bottom: 20px; margin-bottom: 26px; }
  .doc h2 { font-size: 21px !important; margin-top: 32px; }
  /* .prose-hero doubles up with the .wrap gutter inside it (24px + 24px);
     drop the outer one so the hero copy gets the same gutter as the sections
     below it instead of 48px. */
  .prose-hero { padding: 44px 0 14px; }

  .feature-grid, .card-grid { grid-template-columns: minmax(0, 1fr); }
  .feature { padding: 20px; }
  .doc-card { padding: 18px 20px; }
  .draft { padding: 14px 15px; margin-bottom: 24px; }
  /* keep the CTAs a full 44px touch target */
  .btn { padding-top: 13px; padding-bottom: 13px; min-height: 44px; }

  /* long unbreakable tokens — addresses, [placeholders], URLs — must not push
     the document wider than the screen */
  .doc p, .doc li { overflow-wrap: break-word; }
  .doc code { overflow-wrap: anywhere; }

  /* Legal tables. The type stays at full size — these are contractual
     registers and squeezing them is not an option — so instead the table
     itself becomes the horizontal scroll container (display:block +
     overflow-x). The markup is hand-written with no wrapper element to hang
     that on, hence the table element doing the job. The page stays put; only
     the table moves sideways.
     min-width stops the auto layout from starving a column down to one word
     per line, and the cells give back some of their desktop padding so the
     common cases (the 2-column tables in privacy.html / sla.html) still fit a
     320px screen with no scrolling at all. */
  .doc table { display: block; overflow-x: auto; margin: 16px 0; }
  .doc th, .doc td { padding: 10px 11px; min-width: 112px; }
}