/* The reading pages (privacy, billing): the landing page's ground, nav and type, one column of
   text. Loaded after styles.css, which brings the tokens, the font, the nav and the footer. */

.doc {
  max-width: 760px; margin: 0 auto;
  padding: calc(var(--nav-h) + clamp(48px, 9vw, 112px)) var(--gutter) clamp(72px, 10vw, 128px);
  color: var(--ink-2); font-size: 17px; line-height: 1.65;
}
.doc-eyebrow { margin: 0 0 14px; font-size: 14px; color: var(--ink-3); }
.doc h1 {
  margin: 0 0 18px; color: var(--ink-1);
  font-size: clamp(40px, 6vw, 64px); line-height: 1.04; letter-spacing: -.035em; text-wrap: balance;
}
.doc-lede { margin: 0 0 8px; font-size: 19px; line-height: 1.55; color: var(--ink-1); text-wrap: pretty; }
.doc-meta { margin: 0; font-size: 14px; color: var(--ink-3); }
.doc h2 {
  margin: 56px 0 14px; padding-top: 28px; border-top: 1px solid var(--line);
  color: var(--ink-1); font-size: 26px; line-height: 1.2; letter-spacing: -.02em; text-wrap: balance;
}
.doc h3 { margin: 32px 0 8px; color: var(--ink-1); font-size: 19px; line-height: 1.35; letter-spacing: -.01em; }
.doc h4 { margin: 22px 0 6px; color: var(--ink-1); font-size: 17px; font-weight: 700; }
.doc p { margin: 0 0 14px; text-wrap: pretty; }
.doc strong { color: var(--ink-1); }
.doc ul { margin: 0 0 16px; padding: 0; list-style: none; display: grid; gap: 8px; }
.doc li { position: relative; padding-left: 22px; }
.doc li::before {
  content: ''; position: absolute; left: 3px; top: .66em;
  width: 7px; height: 7px; border-radius: 50%; background: var(--lime);
}
.doc a { color: var(--lime); text-underline-offset: 3px; text-decoration-thickness: 1px; }
@media (hover: hover) { .doc a:hover { text-decoration-thickness: 2px; } }

/* The plan, at the top of the billing page */
.plan {
  display: grid; gap: 6px; margin: 36px 0 8px; padding: 26px 28px; border-radius: 22px;
  background: rgba(244, 244, 239, .04); border: 1px solid var(--line);
}
.plan-name { margin: 0; font-size: 15px; color: var(--ink-3); }
.plan-price { margin: 0; color: var(--ink-1); font-size: 44px; line-height: 1.1; letter-spacing: -.03em; }
.plan-price span { font-size: 18px; letter-spacing: 0; color: var(--ink-2); }
.plan-note { margin: 4px 0 0; font-size: 15px; line-height: 1.5; color: var(--ink-2); }

/* The header stays drawn as scrolled here, and a backdrop filter inside another one sees no
   page behind it, so the menu sheet takes the solid ground instead of the frosted one. */
.doc-page .nav-sheet { background: var(--bg); }