/* Shared layout for the site's plain content pages (install, privacy, ...) — reuses site.css's
   tokens, fonts and header/footer pieces (.toprow, .brand, .mode-toggle, .site-foot, .q/.faq),
   this file just adds the parts those pages need that the single-page hero markup doesn't:
   a page header bar, an article column, and step/FAQ list styling. */

.doc-header {
  max-width: 900px;
  margin: 0 auto;
  padding: 18px 32px 0;
}

.doc-crumb {
  display: block;
  margin: 28px 0 8px;
  font-size: 13px;
  color: var(--ink3);
  text-decoration: none;
}
.doc-crumb:hover { color: var(--ink); }

.doc-article {
  max-width: 720px;
  margin: 0 auto;
  padding: 0 32px 80px;
}
.doc-eyebrow {
  margin: 0;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink3);
}
.doc-article h1 {
  margin: 10px 0 0;
  font-weight: 600;
  font-size: clamp(2rem, 4vw, 2.9rem);
  line-height: 1.05;
  letter-spacing: -0.03em;
}
.doc-lede { margin: 18px 0 0; font-size: 17px; line-height: 1.6; color: var(--ink2); max-width: 56ch; }
.doc-platform-ctas { display: flex; flex-wrap: wrap; gap: 12px; margin: 28px 0 0; }
.doc-meta { margin: 14px 0 0; font-size: 13px; color: var(--ink3); }
.doc-article h2 {
  margin: 56px 0 14px;
  font-weight: 600;
  font-size: 1.5rem;
  letter-spacing: -0.02em;
}
.doc-article h3 {
  margin: 0 0 6px;
  font-weight: 600;
  font-size: 1rem;
}
.doc-article p { margin: 0 0 14px; font-size: 15px; line-height: 1.7; color: var(--ink2); }
.doc-article ul { margin: 0 0 14px; padding-left: 20px; font-size: 15px; line-height: 1.7; color: var(--ink2); }
.doc-article li { margin-bottom: 4px; }
.doc-article strong { color: var(--ink); }
/* Plain inline prose links only — excludes .get, which brings its own fixed button colors
   (site.css's .get-dark sets white text on a dark pill) that this would otherwise outrank via
   the extra element-selector specificity of "a" here. */
.doc-article a:not(.get) { color: var(--ink); }

.doc-callout {
  margin: 0 0 14px;
  padding: 14px 18px;
  border-radius: var(--tile);
  background: var(--card);
  font-size: 14px;
  line-height: 1.6;
  color: var(--ink2);
}
.doc-callout strong { color: var(--ink); }

.doc-steps { counter-reset: doc-step; list-style: none; margin: 0 0 8px; padding: 0; }
.doc-steps li {
  position: relative;
  counter-increment: doc-step;
  padding: 2px 0 24px 40px;
  margin: 0;
}
.doc-steps li::before {
  content: counter(doc-step);
  position: absolute;
  left: 0;
  top: 0;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--card-on);
  color: var(--ink);
  font-size: 13px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}
.doc-steps h3 { margin-bottom: 4px; }
.doc-steps p { margin-bottom: 0; }

.doc-article .faq { padding: 0; max-width: none; margin: 0 0 8px; }
.doc-article .faq-grid { columns: 1; }

.doc-more {
  margin: 0 0 14px;
  padding-left: 20px;
  font-size: 14px;
  line-height: 1.8;
}
.doc-more a { color: var(--ink2); text-decoration: none; }
.doc-more a:hover { color: var(--ink); text-decoration: underline; }

@media (max-width: 700px) {
  .doc-header, .doc-article { padding-inline: 16px; }
}