/* Noveriq content pages - agent pages, guides, comparisons.

   These are the pages someone lands on from a search, not from the homepage.
   That changes what they have to do: convince a stranger who arrived mid-
   sentence, with no hero and no scroll behind them, that this page answers
   the exact question they typed. So every one of them opens with the answer,
   not with the product.

   The reading column is legal.css's: one narrow measure, plain type, no
   cards competing with the prose. What this file adds on top is the three
   things a legal page never needs - a code block, a comparison table, and a
   closing offer - plus the agent identity strip.

   Everything structural (nav, footer, colour, type scale, .wrap) comes from
   styles.css. Nothing here redefines a token. */

.doc {
  background: var(--wash);
  /* the nav is fixed and solid on these pages, so the section clears it itself */
  padding-block: clamp(116px, 13vw, 156px) clamp(72px, 8vw, 104px);
}

/* Measure before page width, same as the legal pages. Prose is read one line
   at a time no matter how wide the window is. Tables and code opt out of this
   below, because they are scanned, not read. */
.doc .wrap { max-width: 720px; }

/* ─────────────────────────── the head ───────────────────────────── */

.doc-head {
  padding-bottom: clamp(28px, 3.2vw, 38px);
  margin-bottom: clamp(30px, 3.6vw, 42px);
  border-bottom: 1px solid var(--edge);
}

/* What kind of page this is: "Guide", "Works with", "Compared". It sits above
   the title because a searcher's first question is not what this says, it is
   whether they are in the right kind of document. */
.doc-eyebrow {
  margin: 0 0 14px;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--iris);
}

.doc-head h1 {
  margin: 0;
  font-size: clamp(30px, 4.6vw, 44px);
  line-height: 1.1;
  letter-spacing: -.028em;
  color: var(--ink);
  text-wrap: balance;
}

/* The one-paragraph answer. On a guide this is the whole point: someone who
   reads only this line should already have what they came for, and everything
   below is the detail for the people who need it. */
.doc-lede {
  margin: 18px 0 0;
  font-size: 18px;
  line-height: 1.6;
  letter-spacing: -.012em;
  color: var(--graphite);
}

.doc-meta {
  margin: 16px 0 0;
  font-size: 13.5px;
  color: var(--mist);
  letter-spacing: -.005em;
}

/* ─────────────────────── the agent identity strip ────────────────── */

/* Only on the per-agent pages. The mark is the app's own brand asset, tinted
   through the same CSS mask the notch tints it with, so this row cannot drift
   from what the product actually draws. */
.doc-agent {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 20px;
}
.doc-agent .compat-mark { width: 26px; height: 26px; }
.doc-agent span {
  font-size: 15px;
  font-weight: 500;
  letter-spacing: -.01em;
  color: var(--mist);
}

/* ───────────────────────────── prose ────────────────────────────── */

.doc-body > section + section { margin-top: clamp(34px, 3.8vw, 46px); }

/* The nav is fixed, so an anchor jump without this lands with the heading
   tucked underneath it. Same offset the nav itself reads; the two have to
   agree or the table of contents lights the wrong row. */
.doc-body h2[id],
.doc-body h3[id] { scroll-margin-top: var(--nav-offset); }

.doc-body h2 {
  margin: 0 0 14px;
  font-size: clamp(21px, 2.4vw, 25px);
  line-height: 1.24;
  letter-spacing: -.021em;
  color: var(--ink);
  text-wrap: balance;
}

.doc-body h3 {
  margin: 30px 0 10px;
  font-size: 17px;
  line-height: 1.35;
  letter-spacing: -.014em;
  color: var(--ink);
}

.doc-body p {
  margin: 0 0 16px;
  font-size: 16.5px;
  line-height: 1.68;
  letter-spacing: -.008em;
  color: var(--slate);
}
.doc-body p:last-child { margin-bottom: 0; }

.doc-body strong { color: var(--ink); font-weight: 600; }

.doc-body a {
  color: var(--amethyst);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}
.doc-body a:hover { color: var(--iris); }

.doc-body ul,
.doc-body ol {
  margin: 0 0 16px;
  padding-left: 22px;
  color: var(--slate);
  font-size: 16.5px;
  line-height: 1.68;
  letter-spacing: -.008em;
}
.doc-body li { margin-bottom: 9px; }
.doc-body li:last-child { margin-bottom: 0; }

/* ──────────────────────────── code ──────────────────────────────── */

.doc-body code {
  font-family: var(--font-mono);
  font-size: .88em;
  padding: .12em .38em;
  border-radius: var(--r-small);
  background: var(--paper);
  border: 1px solid var(--edge);
  color: var(--amethyst);
}

/* A command someone is meant to run, or a file they are meant to recognise.
   It scrolls inside itself: a long path must never make the page scroll
   sideways, because on a phone that breaks every line of prose with it. */
.doc-pre {
  margin: 0 0 20px;
  padding: 16px 18px;
  border-radius: var(--r-card);
  background: var(--ink);
  overflow-x: auto;
}
.doc-pre code {
  display: block;
  padding: 0;
  border: 0;
  background: none;
  color: #e6e2f5;
  font-size: 13.5px;
  line-height: 1.65;
  white-space: pre;
}
.doc-pre code .c { color: #8b88a0; }   /* comment */
.doc-pre code .k { color: #b7a2e8; }   /* key, flag */

/* ─────────────────────────── tables ─────────────────────────────── */

/* Comparison pages live on these. Same rule as code: the table scrolls, the
   page does not. */
.doc-tablewrap {
  margin: 0 0 20px;
  overflow-x: auto;
  border: 1px solid var(--edge);
  border-radius: var(--r-card);
  background: var(--paper);
}
.doc-table {
  width: 100%;
  min-width: 520px;
  border-collapse: collapse;
  font-size: 15px;
  letter-spacing: -.008em;
}
.doc-table th,
.doc-table td {
  padding: 12px 16px;
  text-align: left;
  border-bottom: 1px solid var(--edge);
  color: var(--slate);
  vertical-align: top;
}
.doc-table thead th {
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--mist);
  white-space: nowrap;
}
.doc-table tbody tr:last-child th,
.doc-table tbody tr:last-child td { border-bottom: 0; }
.doc-table tbody th {
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
}
/* The column that is us. Tinted, not bolded: a comparison table that shouts
   its own column stops reading as a comparison. */
.doc-table .is-ours { background: var(--wash); color: var(--ink); }

/* ─────────────────────────── callout ────────────────────────────── */

/* For the sentence on a page that has to be true out of context - the honest
   limit, the thing we do not do. It is set apart so nobody can quote the page
   without it. */
.doc-note {
  margin: 0 0 20px;
  padding: 16px 20px;
  border-radius: var(--r-card);
  background: var(--paper);
  border: 1px solid var(--edge);
  border-left: 3px solid var(--iris);
}
.doc-note p { margin: 0; font-size: 15.5px; color: var(--graphite); }
.doc-note p + p { margin-top: 10px; }

/* ──────────────────────── the closing offer ─────────────────────── */

.doc-cta {
  margin-top: clamp(44px, 5vw, 60px);
  padding: clamp(26px, 3vw, 34px);
  border-radius: var(--r-card-lg);
  background: var(--paper);
  border: 1px solid var(--edge);
  text-align: center;
}
.doc-cta h2 {
  margin: 0 0 10px;
  font-size: clamp(20px, 2.3vw, 24px);
  line-height: 1.22;
  letter-spacing: -.021em;
  color: var(--ink);
  text-wrap: balance;
}
.doc-cta p {
  margin: 0 auto 20px;
  max-width: 44ch;
  font-size: 16px;
  line-height: 1.6;
  color: var(--slate);
  letter-spacing: -.008em;
}
.doc-cta .doc-fine {
  margin: 14px auto 0;
  font-size: 13.5px;
  color: var(--mist);
}

/* ──────────────────────── related pages ─────────────────────────── */

/* Every content page ends pointing at its siblings. This is not decoration:
   a page nothing links to is a page Google reaches late or never, which is
   exactly how /terms sat unindexed for a week. */
.doc-related {
  margin-top: clamp(40px, 4.5vw, 56px);
  padding-top: clamp(24px, 2.8vw, 32px);
  border-top: 1px solid var(--edge);
}
.doc-related h2 {
  margin: 0 0 16px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--mist);
}
.doc-related ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 12px;
}
.doc-related a {
  display: inline-flex;
  align-items: center;
  height: 34px;
  padding: 0 16px;
  border-radius: var(--r-pill);
  background: var(--paper);
  border: 1px solid var(--edge);
  font-size: 14.5px;
  font-weight: 500;
  letter-spacing: -.01em;
  color: var(--graphite);
  text-decoration: none;
}
.doc-related a:hover { border-color: var(--iris); color: var(--ink); }

/* ───────────────────────── the index page ───────────────────────── */

/* /guides lists every guide. One row each, title over the question it
   answers, because the question is what the visitor recognises. */
/* Written as .doc-body .doc-index, not .doc-index, because the index sits
   inside .doc-body and `.doc-body ul` above sets a 22px indent for prose
   lists. A bare .doc-index loses that fight on specificity and the rows sit
   indented from the heading they belong under. */
.doc-body .doc-index,
.doc-index { margin: 0; padding: 0; list-style: none; }
.doc-index li { border-bottom: 1px solid var(--edge); }
.doc-index li:last-child { border-bottom: 0; }
.doc-index a {
  display: block;
  padding: 20px 0;
  text-decoration: none;
}
.doc-index a:hover .doc-index-title { color: var(--iris); }
.doc-index-title {
  display: block;
  font-size: 17.5px;
  font-weight: 600;
  letter-spacing: -.016em;
  color: var(--ink);
}
.doc-index-sub {
  display: block;
  margin-top: 5px;
  font-size: 15px;
  line-height: 1.55;
  letter-spacing: -.008em;
  color: var(--mist);
}