/* ==========================================================================
   site.css: the pricing, sign-in, account, legal and not-found pages. They sit on app.css (tokens, buttons,
   inputs) and landing.css (the navy bar, its links, the footer) and stay in the same flat style.
   ========================================================================== */

.site-main { width: 100%; max-width: 1296px; min-width: 0; margin: 0 auto; padding: 56px 24px 0; flex: 1; }
.site-main:focus { outline: none; }
.site-main--narrow { max-width: 468px; }
.site-main--doc { max-width: 808px; }
.site-h1 { margin: 0 0 12px; font: 600 clamp(32px, 3.4vw, 44px)/1.1 var(--font-ui); letter-spacing: -.035em; color: var(--ink); }
.site-lead { margin: 0; max-width: 600px; font-size: 16px; line-height: 1.6; color: var(--ink-2); }
.site-h2 { margin: 48px 0 12px; font: 600 20px/1.3 var(--font-ui); letter-spacing: -.01em; color: var(--ink); }
.site .btn { height: 40px; padding: 0 18px; font-size: 13.5px; font-weight: 600; }
.site .lp-topbar .btn { height: 32px; padding: 0 10px; font-size: 13px; font-weight: 400; }
.site .lp-topbar .btn--icon { width: 28px; height: 28px; padding: 0; }
.site .site-main .btn--primary, :root[data-theme="dark"] .site .site-main .btn--primary { background: var(--amber); border-color: var(--amber); color: #1f2a3a; }
.site .site-main .btn--primary:hover, :root[data-theme="dark"] .site .site-main .btn--primary:hover { background: #ffd04a; border-color: #ffd04a; }
.site .btn[aria-busy="true"] { cursor: progress; opacity: .7; }

/* One line of feedback above or below a form: plain text, coloured only for errors. */
.notice { margin: 0 0 20px; padding: 12px 14px; border-left: 3px solid var(--accent); background: var(--surface-2); font-size: 14px; line-height: 1.55; color: var(--ink-2); }
.notice--error { border-left-color: var(--down); color: var(--down); }
.notice--ok { border-left-color: var(--up); }
.notice:empty { display: none; }

/* --------------------------------------------------------------- pricing */
.plans-toggle { display: inline-flex; gap: 2px; padding: 2px; margin: 32px 0 0; border: 1px solid var(--line); border-radius: 4px; background: var(--surface-2); }
.plans-toggle button { height: 32px; padding: 0 14px; border: 0; border-radius: 2px; background: none; color: var(--ink-2); font-size: 13px; font-weight: 500; cursor: pointer; }
.plans-toggle button:hover { color: var(--ink); background: var(--line); }
.plans-toggle button[aria-pressed="true"] { color: var(--ink); background: var(--surface); box-shadow: 0 1px 3px rgba(16,24,40,.12); font-weight: 600; }
.plans-wrap { margin-top: 20px; border-block: 1px solid var(--line); }
.plans { width: 100%; border-collapse: collapse; table-layout: fixed; text-align: left; font-size: 14px; }
.plans th, .plans td { padding: 14px 20px 14px 0; border-bottom: 1px solid var(--line); vertical-align: top; line-height: 1.5; }
.plans tr:last-child > * { border-bottom: 0; }
.plans thead th { padding-block: 22px 18px; }
.plans thead th:first-child { width: 26%; }
.plans tbody th { font-weight: 500; color: var(--ink-2); }
.plans td { color: var(--ink); }
.plans__name { display: block; margin-bottom: 8px; font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.plans__price { display: block; font: 600 30px/1.1 var(--font-mono); letter-spacing: -.03em; color: var(--ink); }
.plans__per { display: block; margin-top: 6px; font-size: 13px; font-weight: 400; color: var(--muted); }
.plans__actions td { padding-block: 22px 26px; }
.plans__note { margin: 10px 0 0; font-size: 12.5px; color: var(--muted); }
.plans__note:empty { display: none; }
.facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 56px; margin: 0; }
.facts dt { margin: 0 0 6px; font-size: 15px; font-weight: 600; color: var(--ink); }
.facts dd { margin: 0; max-width: 520px; font-size: 14px; line-height: 1.65; color: var(--ink-2); }

/* --------------------------------------------------------------- forms (sign in, account) */
.form { display: flex; flex-direction: column; gap: 16px; margin-top: 28px; }
.field { display: flex; flex-direction: column; gap: 6px; font-size: 13px; font-weight: 500; color: var(--ink-2); }
.field .inp { height: 42px; padding: 0 12px; font-size: 15px; font-weight: 400; }
.field__hint { font-size: 12px; font-weight: 400; color: var(--muted); }
.form .btn { align-self: flex-start; }
.form__links { display: flex; flex-wrap: wrap; gap: 6px 24px; margin: 24px 0 0; font-size: 13.5px; }
.form__small { margin: 0; font-size: 12.5px; line-height: 1.6; color: var(--muted); }

.acct { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 0 40px; padding: 28px 0; border-top: 1px solid var(--line); }
.acct:first-of-type { margin-top: 32px; }
.acct__title { margin: 0; font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.acct__body { min-width: 0; font-size: 14px; line-height: 1.6; color: var(--ink-2); }
.acct__body p { margin: 0 0 12px; }
.acct__value { font-size: 17px; font-weight: 600; color: var(--ink); }
.acct__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.acct .form { max-width: 380px; margin-top: 8px; }
.acct details summary { cursor: pointer; color: var(--link); font-size: 13.5px; }
.acct details[open] summary { margin-bottom: 12px; }

/* --------------------------------------------------------------- legal documents */
.doc { font-size: 15px; line-height: 1.7; color: var(--ink-2); }
.doc__date { margin: 0 0 32px; font: 12.5px var(--font-mono); color: var(--muted); }
.doc h2 { margin: 36px 0 10px; font: 600 18px/1.35 var(--font-ui); color: var(--ink); }
.doc p, .doc ul { margin: 0 0 14px; }
.doc ul { padding-left: 20px; }
.doc li { margin-bottom: 6px; }
.doc a { text-decoration: underline; text-underline-offset: 3px; }

.site-404 { padding: 72px 0 40px; }
.site-404 p { margin: 0 0 24px; }

@media (max-width: 760px) {
  .site-main { padding: 36px 16px 0; }
  .plans { font-size: 13px; }
  .plans th, .plans td { padding-right: 12px; }
  .plans thead th:first-child { width: 30%; }
  .plans__price { font-size: 22px; }
  .plans .btn { padding: 0 12px; white-space: normal; height: auto; min-height: 40px; text-align: center; }
  .facts { grid-template-columns: 1fr; gap: 24px; }
  .acct { grid-template-columns: 1fr; gap: 12px; padding: 24px 0; }
  .form .btn { align-self: stretch; }
}