/* Pages not yet moved to the marketing design (account, legal, and the
   pages whose slices are still to come). Scoped to main.page so the design's shared
   class names (.card, .plan, .faq, .lead, ...) keep their marketing look elsewhere. */
.page {
  --fg: #1c2330;
  --muted: #5b6574;
  --line: #e3e7ee;
  --card: #f6f8fb;
  --accent: #6b3fa0;
  --accent-fg: #ffffff;
  --warn-bg: #fff6db;
  --warn-line: #e8c55a;
  max-width: 960px;
  margin: 0 auto;
  padding: 108px 16px 48px;
  color: var(--fg);
}
.page a { color: var(--accent); }
.page h1 { font-size: clamp(1.7rem, 5vw, 2.4rem); line-height: 1.2; margin: 0 0 16px; font-weight: 800; }
.page h2 { font-size: 1.3rem; margin: 32px 0 8px; font-weight: 700; }
.page h3 { margin: 16px 0 8px; }
.page p { margin: 1em 0; }
.page .lead { font-size: 1.15rem; color: var(--muted); max-width: 46em; }
.page .muted { color: var(--muted); }
.page .button { display: inline-block; padding: 12px 22px; border-radius: 6px; background: var(--accent); color: var(--accent-fg); font-weight: 600; text-decoration: none; }

.page .grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 400px), 1fr)); gap: 16px; }
.page .card, .page .plan { background: var(--card); border: 1px solid var(--line); border-radius: 8px; padding: 4px 20px 16px; color: var(--fg); }
.page .card h2 { font-size: 1.1rem; margin-top: 16px; }
.page .plan { max-width: 560px; overflow: visible; }
.page .plan::after { content: none; }
.page .plan ul { display: block; margin: 1em 0; }
.page .plan li { display: list-item; font-size: inherit; color: var(--fg); }
.page .plan .prices { list-style: none; padding: 0; }
.page .prices strong { font-size: 1.6rem; }
.page .plan .checks { padding-left: 20px; list-style: disc; }

.page .faq { max-width: none; margin: 0; }
.page .faq dt { font-weight: 600; margin-top: 20px; }
.page .faq dd { margin: 4px 0 0; }

.page .notice, .page .draft { background: var(--warn-bg); border: 1px solid var(--warn-line); border-radius: 6px; padding: 10px 14px; }
.page .placeholder { font-style: italic; color: var(--muted); }

.page .table-wrap { overflow-x: auto; }
.page table { border-collapse: collapse; width: 100%; }
.page th, .page td { text-align: left; padding: 6px 10px; border-bottom: 1px solid var(--line); vertical-align: top; }
.page td form { margin: 0; }

.page .form input[type="email"], .page .form input[type="text"], .page .form textarea { width: 100%; max-width: 28em; padding: 10px 12px; border: 1px solid var(--line); border-radius: 6px; background: #fff; color: var(--fg); font: inherit; }
.page .form button { border: 0; cursor: pointer; font: inherit; font-weight: 600; }
.page .link-button { background: none; border: 0; padding: 0; color: var(--accent); font: inherit; cursor: pointer; text-decoration: underline; }