/* ChanSpace — shared layout for simple prose pages in the Organic design
   system: about.html, contact.html, how-it-works.html, policy.html,
   reset-password.html. Nav/footer live in organic-shared.css, tokens/
   components in organic-tokens.css; this file is just the article layout
   these five pages have in common. */

.static-page { max-width: 760px; margin: 0 auto; padding: 40px 0 90px; }

.eyebrow {
  display: block; font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--color-accent-700); margin: 0 0 12px;
}

.static-page h1 { font-size: 38px; max-width: 22ch; overflow-wrap: anywhere; }
.static-page h2 { margin-top: 42px; }
.static-page p { font-size: 15.5px; line-height: 1.75; max-width: 66ch; }

.static-page ul,
.static-page ol {
  margin: 0 0 22px; padding-left: 22px;
  display: flex; flex-direction: column; gap: 10px;
}
.static-page li { font-size: 15px; line-height: 1.65; max-width: 64ch; }
.static-page li strong { color: var(--color-text); }

/* ===== how-it-works: numbered step list ===== */
.how-steps { counter-reset: step; list-style: none; padding-left: 0; gap: 14px; }
.how-steps li {
  position: relative; padding: 16px 18px 16px 58px;
  background: var(--color-surface); border-radius: var(--radius-md);
}
.how-steps li::before {
  counter-increment: step; content: counter(step);
  position: absolute; left: 16px; top: 16px; width: 28px; height: 28px;
  border-radius: 50%; background: var(--color-accent); color: var(--color-bg);
  font-family: var(--font-heading); font-size: 14px;
  display: grid; place-items: center;
}
.how-note { font-size: 14px; color: color-mix(in srgb, var(--color-text) 60%, transparent); font-style: italic; margin: 0 0 28px; }

/* ===== contact page ===== */
.contact-info {
  background: var(--color-surface); border-radius: var(--radius-md);
  padding: 20px 24px; margin: 0 0 28px;
  display: flex; flex-direction: column; gap: 8px;
}
.contact-info p { margin: 0; font-size: 15.5px; }
.contact-line-row { display: flex; align-items: center; gap: 14px; }
.contact-line-qr { border-radius: var(--radius-sm); flex-shrink: 0; }

/* ===== reset-password: narrow auth card ===== */
.static-page .auth-card { max-width: 420px; margin: 0 auto; padding: 28px; gap: 4px; }
.static-page .auth-card h2 { margin-top: 0; }
.static-page .auth-card .subtext { font-size: 14px; margin: 0 0 20px; }
.static-page .field-label { display: block; font-size: 13px; margin: 16px 0 6px; }
.static-page .field-error {
  color: var(--color-accent-700); font-size: 13.5px; margin: 12px 0 0;
  background: var(--color-accent-100); border-radius: var(--radius-sm); padding: 10px 12px;
}
.static-page .field-success {
  color: var(--color-accent-2-800); font-size: 13.5px; margin: 16px 0 0;
  background: var(--color-accent-2-100); border-radius: var(--radius-sm); padding: 10px 12px;
}
.static-page .note { font-size: 13.5px; text-align: center; margin: 18px 0 0; }

/* ===== article pages (e.g. article.html) ===== */
.static-page h3 { font-size: 18px; margin-top: 28px; }
.article-table-wrap { overflow-x: auto; margin: 0 0 24px; }
.article-table-wrap.is-wide .table { min-width: 560px; }
.article-disclaimer {
  font-size: 15.5px; line-height: 1.65; margin: 28px 0; padding: 14px 18px;
  background: var(--color-surface); border: 1px solid var(--color-divider);
  border-radius: var(--radius-md); color: color-mix(in srgb, var(--color-text) 75%, transparent);
}

@media (max-width: 640px) {
  .static-page { padding: 24px 0 70px; }
  .static-page h1 { font-size: 27px; }
}