/* Shared visual theme for supporting pages. Form and account states remain
   controlled by their original markup and scripts. */
:root {
  color-scheme: light;
  --bg: #fbfaf7;
  --panel: #ffffff;
  --panel-2: #f3f0e8;
  --text: #1b1a17;
  --muted: #5f5c56;
  --dim: #6d6a63;
  --line: rgba(27, 26, 23, .14);
  --line-strong: #1b1a17;
  --brass: #c58a3c;
  --brass-soft: #a5380b;
  --brass-glow: rgba(245, 209, 136, .35);
  --green: #35684a;
  --green-dim: rgba(53, 104, 74, .075);
  --red: #a93b32;
  --red-dim: rgba(169, 59, 50, .07);
  --radius-lg: 24px;
  --radius-md: 16px;
}

body { background: var(--bg); color: var(--text); }
::selection { background: #e8d6be; color: var(--text); }
header {
  background: rgba(251, 250, 247, .95);
  border-bottom: 1.5px solid var(--text);
  box-shadow: none;
}
nav { padding-top: 18px; padding-bottom: 18px; }
.wordmark { color: var(--text); }
.wordmark .mark > circle[fill]:not([fill="none"]) { fill: var(--brass); }
.wordmark .mark > circle[stroke] { stroke: #b98a55; }

.btn { border-radius: 8px; min-height: 46px; font-weight: 600; }
.btn-primary, .btn-solid, .nav-links .btn-primary, .nav-links .btn-solid {
  background: var(--text);
  color: #fff;
  border: 1.5px solid var(--text);
  box-shadow: 4px 4px 0 var(--text);
}
.btn-primary:hover, .btn-solid:hover,
.nav-links .btn-primary:hover, .nav-links .btn-solid:hover {
  background: #000;
  color: #fff;
  border-color: #000;
}
.btn-ghost { background: #fff; border: 1.5px solid var(--text); color: var(--text); }
.btn-ghost:hover { background: #f5d188; border-color: var(--text); }
.btn[disabled], .btn[aria-disabled="true"] {
  background: #e7e8df;
  color: #5e6757;
  border-color: var(--line-strong);
  box-shadow: none;
}
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible {
  outline: 2px solid #875b31;
  outline-offset: 4px;
}

.hero h1, .doc-head h1, .co-copy h1, .signup-copy h1, .wel-inner h1,
.origin h2, .section-head h2, .cta-box h2 {
  font-family: var(--font-body);
  font-weight: 600;
  letter-spacing: -.02em;
}
.hero h1 { font-size: clamp(38px, 5.5vw, 64px); line-height: 1.08; }
.doc-head h1 { font-size: clamp(36px, 5vw, 56px); line-height: 1.1; }
.co-copy h1, .signup-copy h1, .wel-inner h1 {
  font-size: clamp(34px, 4.2vw, 50px);
  line-height: 1.12;
}
.origin h2, .section-head h2, .cta-box h2 {
  font-size: clamp(28px, 3.2vw, 38px);
  line-height: 1.17;
}
.eyebrow { color: #6d6a63; letter-spacing: .11em; }

.card, .p-card, .cta-box, .form-shell, .plan-card, .step, .callout, .toc {
  border: 1.5px solid var(--text);
  border-radius: 16px;
  box-shadow: 4px 4px 0 var(--text);
}
.form-shell { background: var(--panel); border-radius: var(--radius-lg); }
.card, .cta-box { background: var(--panel); }
.p-card, .toc { background: var(--panel-2); }
.mono-avatar {
  background: #f5d188;
  color: #a5380b;
  border-color: var(--text);
}
.pull { border-left-color: var(--brass); }
.doc-body a { text-decoration-color: #bca17d; text-underline-offset: 3px; }
.callout { border-left-color: var(--brass); }
.doc-body p, .doc-body ul li { line-height: 1.75; }

.form-row input { background: #fff; border-color: #a6ad9e; border-radius: 12px; }
.form-row input::placeholder { color: #707768; opacity: 1; }
.form-row label { color: #454e3e; }
.consent-row { background: #f5f4ee; border-color: var(--line-strong); }
.consent-row input[type=checkbox] { background: #fff; border-color: #7e8874; }
.consent-row input[type=checkbox]:checked { background: #875b31; border-color: #875b31; }
.consent-row input[type=checkbox]:checked::after { border-color: #fffefa; }
.consent-row label { color: #505849; }
.consent-row.invalid, .form-error { border-color: rgba(169, 59, 50, .35); }
.co-after-call, .gnote { border-color: rgba(165, 114, 62, .25); }
.step-mark { background: #f0eee7; }
.step.done { background: #eff4ed; border-color: rgba(53, 104, 74, .23); }
.step.done .step-mark, .step-status.ok, .form-success-state .check {
  border-color: rgba(53, 104, 74, .3);
}

footer { background: var(--bg); border-top: 1.5px solid var(--text); }
.footer-col h4 { color: #5a6252; }
.reveal, .reveal.in { opacity: 1; transform: none; transition: none; }

@media (max-width: 600px) {
  nav { padding-top: 14px; padding-bottom: 14px; }
  .nav-links .btn { min-height: 42px; }
  .co-sec, .signup-sec, .wel-sec { padding-top: 42px; padding-bottom: 64px; }
  .form-body { padding: 22px; }
  .form-shell { border-radius: 20px; }
  .footer-top { gap: 28px 20px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .btn { transition: none; }
  .btn:hover { transform: none; }
}

.wordmark {font-family: var(--font-body); font-weight: 550; font-size: 22px; letter-spacing: -.7px;}

/* Top-bar "Log in" link (2026-10-05). Always visible, including on phones,
   where the other text links hide; one line, never wrapping. */
.nav-links .nav-login { font-size: 13.5px; font-weight: 500; color: var(--muted); white-space: nowrap; }
.nav-links .nav-login:hover, .nav-links .nav-login[aria-current="page"] { color: var(--text); }
.wordmark { white-space: nowrap; }
@media (max-width: 430px) {
  .wordmark { font-size: 18px; gap: 8px; }
  .wordmark .mark { width: 32px; height: 19px; }
  .nav-links { gap: 14px; }
  .nav-links .btn { padding: 8px 14px; min-height: 38px; font-size: 13.5px; }
}

/* One readable family for headings, text, labels and forms. */
:root {
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: var(--font-body);
  --font-wordmark: var(--font-body);
}
body, button, input, select, textarea { font-family: var(--font-body); }
body { font-size: 16px; }
h1, h2, h3, .pull p { letter-spacing: -.02em; }
.hero h1, .doc-head h1, .co-copy h1, .signup-copy h1, .wel-inner h1 { line-height: 1.2; }
.eyebrow, .doc-meta, .role, .card-foot .quiet, .p-card .num,
.footer-col h4, .footer-bottom span, .form-row .hint, .form-note,
.field label, .kv dt, .pill, .wel-ref, .step-status, .terms-strip dt {
  font-size: 13px;
  line-height: 1.6;
  letter-spacing: .03em;
}
.form-row input, .field input, select, textarea { font-size: 16px; }
.code-input { font-variant-numeric: tabular-nums; }
.footer-col a, .footer-brand p, .footer-bottom, .toc h2, .toc a,
.consent-row label, .co-after-call, .gnote { font-size: 14px; line-height: 1.65; }
.step-body, .co-copy, .signup-copy, .form-shell, .card { min-width: 0; }
@media (max-width: 600px) {
  .hero h1, .doc-head h1, .co-copy h1, .signup-copy h1, .wel-inner h1 { font-size: 34px; }
}
.consent-note, .plan-switch { font-size: 13px; }