/* Pricing, the thank-you page and the policy pages. Everything else comes
   from styles.css (palette, type, nav, buttons, and the plan cards, which the
   home page shows too) and docs/docs.css (the reading layout); this adds a
   single-column layout for pages with no contents list. */

.docs.single {
  grid-template-columns: minmax(0, 1fr);
  max-width: 880px;
}

.doc .updated { font-family: var(--mono); font-size: 13px; color: var(--muted); margin: -6px 0 24px; }

/* Questions on these pages. Not .faq: that is the home page's whole FAQ
   section, padding and all. */
.qa dt { color: var(--ink); font-weight: 600; margin-top: 16px; }
.qa dd { margin: 4px 0 0; color: var(--ink-2); max-width: 70ch; }

/* The feedback page's two choices: side by side, stacked on a phone. */
.choices {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin: 8px 0 24px;
}
@media (max-width: 640px) { .choices { grid-template-columns: minmax(0, 1fr); } }
.choice {
  display: block;
  padding: 22px 22px 20px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-lg);
  background: var(--surface);
  color: var(--ink);
  text-decoration: none;
  transition: border-color .2s var(--ease), background .2s var(--ease);
}
.choice:hover, .choice:focus-visible { border-color: var(--accent-deep); background: var(--surface-2); }
.choice b { display: block; font-size: 20px; font-weight: 600; margin-bottom: 6px; color: var(--ink); }
.choice span { display: block; color: var(--ink-2); font-size: 15px; }
.choice .go { margin-top: 14px; color: var(--accent); font-family: var(--mono); font-size: 13px; }
.redirecting { font-family: var(--mono); font-size: 14px; color: var(--accent); }
.redirecting[hidden] { display: none !important; }