/* ============================================================================
   pages.css — the inner pages: /account, /privacy, /terms, /reset-password.

   These were built against the old dark theme and had their own inline
   palettes. They now sit on tokens.css + chrome.css like the marketing page,
   so the nav, footer, wordmark and buttons are literally the same components.
   Everything here is what those two files do NOT already cover: the account
   cards, the legal prose scale, and the small shared page furniture.
   ========================================================================== */

/* ---------- page shell --------------------------------------------------- */

/* The marketing page runs to 1200px because it is a wide composition. These
   pages are read, not scanned, so they set to a measure instead. */
.wrap-tight { max-width: 820px; }
.wrap-prose { max-width: 760px; }

.page {
  padding: 64px 0 104px;
}
.page__head {
  margin-bottom: 34px;
}
.page__head h1 {
  /* tokens' h1 is the hero size — far too big for a document title. */
  font-size: clamp(31px, 3.4vw, 42px);
  line-height: 1.1;
  letter-spacing: -0.032em;
}
.page__sub {
  margin-top: 9px;
  font-size: 16.5px;
  color: var(--ink-mute);
}
.page__meta {
  margin-top: 10px;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

/* A slimmer nav for pages that are not selling anything: wordmark plus one
   action. Reuses .nav so the height, hairline and stickiness all match. */
.nav__back {
  font-size: 15px;
  color: var(--ink-mute);
  text-decoration: none;
  letter-spacing: -0.012em;
  transition: color .14s ease;
}
.nav__back:hover { color: var(--ink); }

/* ---------- account: cards ---------------------------------------------- */

.card {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-card);
  padding: 26px 28px;
  margin-bottom: 18px;
}
.card > h2 {
  margin: 0 0 4px;
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.card__note {
  margin: 10px 0 0;
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--ink-mute);
}

/* key/value rows */
.row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 18px;
  padding: 13px 0;
  border-bottom: 1px solid var(--line);
}
.row:last-of-type { border-bottom: 0; }
.row .k { font-size: 14.5px; color: var(--ink-mute); }
.row .v {
  font-family: var(--mono);
  font-size: 13px;
  text-align: right;
  color: var(--ink);
  letter-spacing: -0.004em;
}

.actions {
  display: flex; flex-wrap: wrap; gap: 10px;
  margin-top: 20px;
}
.actions .btn { text-decoration: none; }

/* tokens.css owns .btn / .btn-dark / .btn-ghost / .btn-red. Only the
   variants the account JS asks for are added here. */
.btn-sm { height: 34px; padding: 0 13px; font-size: 14px; }
.btn[disabled] { opacity: .55; cursor: not-allowed; }

/* ---------- account: status pills --------------------------------------- */

.pill {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid transparent;
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
}
/* Deep enough on white to clear 4.5:1 — the old values were tuned for a
   near-black background and would have been unreadable here. */
.pill.ok   { background: #eaf7ee; color: #1b7f3b; border-color: #b7e2c5; }
.pill.warn { background: #fef4e6; color: #96590a; border-color: #f2d5a6; }
.pill.off  { background: var(--bg-sunken); color: var(--ink-mute); border-color: var(--line-strong); }

/* ---------- account: banners ------------------------------------------- */

.banner {
  display: flex; align-items: flex-start; gap: 13px;
  padding: 17px 20px;
  margin-bottom: 22px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-card);
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--ink);
}
.banner b { display: block; margin-bottom: 2px; }
.banner a { color: var(--ink); text-decoration: underline; text-underline-offset: 2px; }
.banner.ok   { background: #f4fbf6; border-color: #c3e5cf; }
.banner.wait { background: #fffaf2; border-color: #f0dcb4; }

/* ---------- account: the licence key ------------------------------------ */

/* Shown exactly once, so it has to look like something you copy: monospace,
   selectable in one gesture, and visually separated from the rows above. */
.keybox {
  margin: 15px 0 0;
  padding: 14px 15px;
  background: var(--bg-sunken);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-ctl);
  font-family: var(--mono);
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink);
  word-break: break-all;
  user-select: all;
}
.keywarn {
  margin-top: 9px;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .09em;
  color: #96590a;
}

.loading {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: 14.5px;
  color: var(--ink-mute);
}
.synced {
  margin-top: 13px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .05em;
  color: var(--ink-faint);
}

/* currentColor, so it reads on a ghost button and in grey body copy alike */
.spinner {
  display: inline-block;
  width: 12px; height: 12px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  opacity: .65;
  animation: pgSpin .7s linear infinite;
  flex: none;
}
@keyframes pgSpin { to { transform: rotate(360deg); } }

/* ---------- toast ------------------------------------------------------- */
/* Same object as the marketing page's, which lives in pricing.css. Repeated
   rather than pulling that whole file in for one component. */
.toast {
  position: fixed;
  left: 50%; bottom: 26px;
  transform: translate(-50%, 12px);
  z-index: 300;
  max-width: min(520px, 90vw);
  padding: 10px 16px;
  border-radius: var(--r-ctl);
  background: #16171a;
  color: #fff;
  font-size: 14px;
  letter-spacing: -0.008em;
  opacity: 0;
  visibility: hidden;
  transition: opacity .22s ease, transform .22s ease, visibility .22s;
  pointer-events: none;
}
.toast.show { opacity: 1; visibility: visible; transform: translate(-50%, 0); }

/* ---------- legal prose ------------------------------------------------- */

.prose { font-size: 16.5px; line-height: 1.62; color: var(--ink); }
.prose p { margin: 0 0 15px; }
.prose > p:last-child { margin-bottom: 0; }

/* Each clause opens on a hairline, which is what gives a long policy its
   rhythm without needing numbered boxes. */
.prose h2 {
  margin: 46px 0 13px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
  font-size: clamp(19px, 1.5vw, 22px);
  line-height: 1.25;
  letter-spacing: -0.022em;
  font-weight: 500;
}
.prose h3 {
  margin: 26px 0 8px;
  font-size: 16.5px;
  line-height: 1.35;
  letter-spacing: -0.014em;
  font-weight: 500;
}
.prose ul { margin: 0 0 15px; padding-left: 21px; }
.prose li { margin: 6px 0; }
.prose strong { font-weight: 600; color: var(--ink); }
.prose a { color: var(--ink); text-decoration: underline; text-underline-offset: 2px; text-decoration-color: var(--line-strong); }
.prose a:hover { text-decoration-color: currentColor; }

.prose table {
  width: 100%;
  margin: 20px 0;
  border-collapse: collapse;
  font-size: 15px;
}
.prose th, .prose td {
  padding: 12px 13px;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--line);
}
.prose th {
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-faint);
  border-bottom-color: var(--line-strong);
}
.prose td { color: var(--ink); }
/* A policy table is the one thing on these pages that can outgrow the
   measure, so it scrolls in its own right rather than widening the page. */
.prose .tablewrap { overflow-x: auto; }

/* callouts */
.callout, .todo, .warn {
  margin: 24px 0;
  padding: 17px 20px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-card);
  font-size: 15px;
  line-height: 1.55;
}
.callout p, .todo p, .warn p { margin: 0 0 9px; }
.callout p:last-child, .todo p:last-child, .warn p:last-child { margin-bottom: 0; }
.callout { background: #f4fbf6; border-color: #c3e5cf; }
.todo    { background: #fffaf2; border-color: #f0dcb4; }
.warn    { background: #fdf4f4; border-color: #f0c9c9; }

/* ---------- narrow ------------------------------------------------------ */

@media (max-width: 760px) {
  .page { padding: 44px 0 76px; }
  .card { padding: 22px 20px; }
  .row { flex-direction: column; align-items: flex-start; gap: 5px; }
  .row .v { text-align: left; }
  .prose { font-size: 16px; }
  .prose h2 { margin-top: 38px; }
}

/* ---------- the standalone auth card (/reset-password) ------------------- */
/* Its own centred page rather than the site chrome: someone arriving from a
   reset email has one job, and a nav full of marketing links invites them to
   wander off mid-task. Named .authcard, not .card, because chrome.css already
   owns .foot and pages.css owns .card. */

.authpage {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 40px 22px;
  background: var(--bg-gradient);
}
.authcard {
  width: 100%;
  max-width: 412px;
  padding: 30px 30px 26px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--r-win);
  box-shadow: var(--shadow-win);
}
.authcard .ga-mark { margin-bottom: 22px; }
.authcard h1 {
  font-size: 25px;
  line-height: 1.2;
  letter-spacing: -0.026em;
}
.authcard__hint {
  margin: 8px 0 21px;
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--ink-mute);
}

.authcard label {
  display: block;
  margin-bottom: 6px;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--ink);
}
.authcard input {
  width: 100%;
  height: 42px;
  margin-bottom: 15px;
  padding: 0 13px;
  background: var(--bg);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-ctl);
  color: var(--ink);
  font: 400 15px/1 var(--font);
  letter-spacing: -0.011em;
  transition: border-color .14s ease, box-shadow .14s ease;
}
.authcard input:focus {
  outline: 0;
  border-color: rgba(0,0,0,.42);
  box-shadow: 0 0 0 3px rgba(0,0,0,.06);
}
.authcard input:last-of-type { margin-bottom: 0; }

.authcard .btn { width: 100%; margin-top: 18px; }

.authcard__foot {
  margin-top: 17px;
  text-align: center;
  font-size: 14px;
}
.authcard__foot a { color: var(--ink-mute); text-decoration: none; }
.authcard__foot a:hover { color: var(--ink); }

/* set by JS as `msg show err|ok`, so all four states must exist */
.msg {
  display: none;
  margin-top: 15px;
  padding: 11px 13px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-ctl);
  font-size: 14px;
  line-height: 1.45;
}
.msg.show { display: block; }
.msg.err  { background: #fdf4f4; border-color: #f0c9c9; color: #a3161d; }
.msg.ok   { background: #f4fbf6; border-color: #c3e5cf; color: #1b6b34; }

/* ---------- slim footer -------------------------------------------------- */
/* chrome.css's .foot already draws its own top hairline and 64px of padding
   above a link grid these pages do not have. Slimmer, and no .foot__rule —
   that would put a second hairline 64px below the first. */
.foot--slim { padding: 24px 0 28px; }
.foot--slim .foot__bar { padding-top: 0; }