/* The article typography — the one copy. Linked by every static page with
   an <article class="article"> (the three policy pages in public/ and the
   guides in flavor/biz/guides/, right after /site.css) and inlined into the
   app through the @import at the top of src/styles.css, which is how the
   legal pages opened inside the app (features/marketing/LegalPage) render exactly as
   their static files do. A net in src/shared/staticPages.test.ts checks every
   such page links it. */
/* Guides — a page read straight through, and so narrower than the landing page */
.article {
  max-width: 720px;
  margin-inline: auto;
  padding-block: 30px 10px;
  /* The static page body's own values (site.css sets line-height 1.6 and
     leaves the browser's 16px), written out so the article reads the same
     inside the app, whose body is 14px with a normal line-height. */
  font-size: 16px;
  line-height: 1.6;
}
.article h1 {
  font-size: clamp(24px, 4vw, 34px);
  font-weight: 800;
  line-height: 1.3;
  margin: 0 0 10px;
}
.article .lead {
  font-size: 18px;
  color: var(--text-2);
  margin: 0 0 6px;
}
.article h2 {
  font-size: 21px;
  text-align: start;
  margin: 28px 0 10px;
}
.article h3 {
  font-size: 17px;
  font-weight: 700;
  margin: 20px 0 6px;
}
.article p,
.article li {
  color: var(--text-2);
}
.article p {
  margin: 0 0 12px;
}
.article ul,
.article ol {
  margin: 0 0 12px;
  padding-inline-start: 22px;
}
.article li {
  margin-bottom: 6px;
}
/* :not(.btn) — without it this rule beats .btn's text colour (the more
   specific selector), and a primary button inside a guide gets --link
   text. In the light theme --link and --primary are exactly the same
   blue, so the label disappears entirely against the button — and in
   dark they differ, which is why it looked fine there. */
.article a:not(.btn) {
  color: var(--link);
}
.article strong {
  color: var(--text);
}
.article table {
  border-collapse: collapse;
  width: 100%;
  min-width: 420px;
  font-size: 14px;
}
.article th,
.article td {
  border: 1px solid var(--hairline);
  padding: 8px 10px;
  text-align: start;
}
.article th {
  background: var(--surface-2);
  font-weight: 600;
  color: var(--text);
}
/* The end of a guide — back to the product */
.article .cta {
  justify-content: start;
  margin-top: 18px;
}