/* Shared by welcome.html and account.html: the landing page's palette and
   type, cut down to a single centred column. */
:root {
  --ink: #0A0D14;
  --panel: #141B2B;
  --panel-hi: #1B2437;
  --line: #26314A;
  --text: #EDF0F6;
  --muted: #97A4BC;
  --muted-dim: #737F98;
  --brass: #E8B458;
  --brass-hot: #FFD07A;
  --good: #7FB886;
  --bad: #E0776A;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  --display: Cinzel, "Trajan Pro", Georgia, serif;
  --body: "Crimson Pro", Georgia, "Times New Roman", serif;
}

* { box-sizing: border-box; }
/* Hidden means hidden. Without this, any rule that sets `display` (section
   is a grid) beats the hidden attribute, and every step of a page shows at
   once -- which is exactly what the sign-in page did. */
[hidden] { display: none !important; }
body {
  margin: 0; min-height: 100vh; background: var(--ink); color: var(--text);
  font: 400 18px/1.6 var(--body); -webkit-font-smoothing: antialiased;
  background-image: radial-gradient(105% 55% at 50% -10%, rgba(232, 180, 88, .13), transparent 62%);
  padding: 0 16px;
}
header { max-width: 620px; margin: 0 auto; padding: 22px 0; }
header a { font: 400 19px/1 var(--display); letter-spacing: .04em; color: var(--text); text-decoration: none; }
header a i { font-style: normal; font-weight: 700; color: var(--brass); }

main { max-width: 620px; margin: 5vh auto 80px; display: grid; gap: 22px; }
h1 { margin: 0; font: 400 clamp(26px, 4vw, 38px)/1.15 var(--display); text-wrap: balance; }
h2 { margin: 0 0 6px; font: 400 20px/1.25 var(--display); }
p { margin: 0; }
.lede { color: var(--muted); }
.meta { color: var(--muted-dim); font-size: 15px; }

section {
  background: var(--panel); border: 1px solid var(--line); border-radius: 10px;
  padding: 22px 24px; display: grid; gap: 12px;
}

.key {
  font: 600 clamp(17px, 3.4vw, 24px)/1.3 var(--mono); letter-spacing: .06em;
  color: var(--brass-hot); background: var(--ink); border: 1px dashed var(--brass);
  border-radius: 8px; padding: 16px; text-align: center; word-break: break-all;
  user-select: all;
}

ol { margin: 0; padding-left: 22px; display: grid; gap: 4px; }

form { display: grid; gap: 10px; }
label { font-size: 15px; color: var(--muted); }
input {
  font: 500 16px/1.2 var(--mono); color: var(--text); background: var(--ink);
  border: 1px solid var(--line); border-radius: 7px; padding: 12px 13px; width: 100%;
}
input:focus-visible, button:focus-visible { outline: 2px solid var(--brass); outline-offset: 2px; }

button {
  justify-self: start; cursor: pointer; border: 0; border-radius: 999px;
  background: var(--brass); color: #1A1204; font: 600 16px/1 var(--body);
  padding: 12px 22px;
}
button:hover { background: var(--brass-hot); }
button.quiet { background: transparent; color: var(--brass); border: 1px solid var(--line); }
button[disabled] { opacity: .55; cursor: default; }

.status { font-size: 15.5px; min-height: 1.5em; }
.status.good { color: var(--good); }
.status.bad { color: var(--bad); }

.row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }

@media (prefers-reduced-motion: no-preference) {
  .pulse { animation: pulse 1.6s ease-in-out infinite; }
  @keyframes pulse { 50% { opacity: .45; } }
}

/* Long-form documents: privacy, terms, refunds. */
main.doc { max-width: 720px; gap: 0; margin-top: 3vh; }
main.doc h1 { margin-bottom: 6px; }
main.doc h2 { margin: 34px 0 10px; font-size: 22px; }
main.doc h3 { margin: 22px 0 6px; font: 600 18px/1.3 var(--body); color: var(--text); }
main.doc p, main.doc li { color: #D6DCE8; }
main.doc p + p { margin-top: 12px; }
main.doc ul, main.doc ol { margin: 10px 0 0; padding-left: 22px; display: grid; gap: 8px; }
main.doc a { color: var(--brass); }
main.doc .updated { color: var(--muted-dim); font-size: 15px; margin-bottom: 18px; }
main.doc .summary {
  background: var(--panel); border: 1px solid var(--line); border-radius: 10px;
  padding: 18px 22px; margin: 8px 0 6px;
}
main.doc .summary ul { margin-top: 6px; }
main.doc table { width: 100%; border-collapse: collapse; margin-top: 12px; font-size: 16px; }
main.doc th, main.doc td { text-align: left; vertical-align: top; padding: 10px 12px; border-bottom: 1px solid var(--line); }
main.doc th { color: var(--muted); font-weight: 600; }
.table-scroll { overflow-x: auto; }
.draft-banner {
  border: 1px solid var(--brass); border-radius: 8px; padding: 12px 16px; margin-bottom: 18px;
  color: var(--brass-hot); background: rgba(232, 180, 88, .08); font-size: 15.5px;
}
.fill { background: rgba(232, 180, 88, .22); color: var(--brass-hot); padding: 0 4px; border-radius: 4px; }
/* The way back to the site from the account page: the mark in the header is
   a link too, but nobody reads a logo as a button (the owner, 2026-09-22). */
.account-back { margin: 0 0 18px; font-size: 15px; }
.account-back a { color: var(--muted); }
.account-back a:hover { color: var(--brass); }

.doc-nav { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 40px; font-size: 15px; }
.doc-nav a { color: var(--muted); }
.doc-nav a:hover { color: var(--brass); }
.table-scroll + p { margin-top: 14px; }
/* A paragraph that follows a list had no top margin at all, so the sentence
   after a set of bullets sat tight against the last one and read as part of
   it. Seen on /compare and /first-session, and true of every doc page. */
main.doc ul + p, main.doc ol + p { margin-top: 14px; }

/* A link that looks like the primary button (sign in, download). */
a.button-link {
  display: inline-block; padding: 12px 22px; border-radius: 999px;
  background: var(--brass); color: #1A1204; font: 600 16px/1 var(--body);
  text-decoration: none;
}
/* main.doc a (above) is more specific than a.button-link, so inside a doc
   page the button's label took the brass link colour -- brass on brass, an
   invisible button. Seen on /pricing. */
main.doc a.button-link { color: #1A1204; }
a.button-link:hover { background: var(--brass-hot); }
a.button-link:focus-visible { outline: 2px solid var(--brass); outline-offset: 2px; }
a.button-link[hidden] { display: none; }

a.quiet-link { color: var(--brass); font-size: 16px; }