/* ============================================================
   Mote — Secondary pages (about, promises, legal, journey, etc.)
   Reuses tokens/base/orb + the components in home.css.
   ============================================================ */

/* Sub-page hero band (smaller than the home hero) */
.subpage-hero {
  text-align: center;
  padding-block: clamp(3.5rem, 11vh, 7rem) clamp(1.5rem, 4vh, 3rem);
}
.subpage-hero .orb { margin: 0 auto var(--sp-4); }
.subpage-hero h1 {
  font-size: var(--fs-h1);
  font-variation-settings: "SOFT" 65, "opsz" 90;
  max-width: 18ch;
  margin-inline: auto;
}
.subpage-hero .lead { margin: var(--sp-4) auto 0; }
.subpage-hero .eyebrow { margin-bottom: var(--sp-3); }

/* Long-form readable column (legal, journey body, about prose) */
.prose { max-width: 72ch; margin-inline: auto; color: var(--ink-2); }
.prose > * + * { margin-top: var(--sp-3); }
.prose h2 {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  color: var(--ink);
  margin-top: var(--sp-6);
  font-variation-settings: "SOFT" 55, "opsz" 40;
}
.prose h3 { font-family: var(--font-text); font-weight: 600; color: var(--ink); font-size: 1.05rem; margin-top: var(--sp-5); }
.prose p, .prose li { color: var(--ink-2); }
.prose ul, .prose ol { padding-left: 1.3em; }
.prose li + li { margin-top: 0.4rem; }
.prose strong { color: var(--ink); }
.prose a { color: var(--amber); text-decoration: underline; text-underline-offset: 2px; }
.prose .updated { font-family: var(--font-mono); font-size: var(--fs-caption); color: var(--ink-3); letter-spacing: 0.05em; }
.prose .lede { font-size: var(--fs-lead); color: var(--ink); }

/* A bordered callout (placeholder notes, key facts) */
.callout {
  border: 1px solid var(--hairline);
  border-left: 3px solid var(--amber);
  border-radius: var(--r);
  background: rgba(242,166,90,0.05);
  padding: var(--sp-4);
  font-size: var(--fs-small);
  color: var(--ink-2);
}
.callout--placeholder { border-left-color: var(--clay); background: rgba(199,122,82,0.06); }

/* FAQ (support) */
.faq { display: grid; gap: var(--sp-3); margin-top: var(--sp-5); max-width: 72ch; margin-inline: auto; }
.faq__item { background: var(--surface); border: 1px solid var(--hairline-soft); border-radius: var(--r-lg); padding: var(--sp-4) var(--sp-5); }
.faq__q { font-weight: 600; color: var(--ink); font-size: 1.05rem; }
.faq__a { color: var(--ink-2); font-size: var(--fs-small); margin-top: var(--sp-2); }

/* Journey / blog post lists (reuses .log-entry styling vibe) */
.post-list { display: grid; gap: var(--sp-3); margin-top: var(--sp-5); max-width: 760px; margin-inline: auto; }
.post-card { background: var(--surface); border: 1px solid var(--hairline-soft); border-radius: var(--r-lg); padding: var(--sp-5); }
.post-card .date { font-family: var(--font-mono); color: var(--amber); font-size: var(--fs-caption); }
.post-card h2 { font-family: var(--font-text); font-weight: 600; color: var(--ink); font-size: 1.2rem; margin: var(--sp-2) 0 0; }
.post-card p { color: var(--ink-2); font-size: var(--fs-small); margin-top: var(--sp-2); }
.post-card .tag { display: inline-block; margin-top: var(--sp-3); font-family: var(--font-mono); font-size: var(--fs-caption); color: var(--ink-3); }

/* Forms (creators application, subscribe) */
.field { margin-top: var(--sp-3); text-align: left; }
.field label { display: block; font-size: var(--fs-small); font-weight: 600; color: var(--ink); margin-bottom: 0.4rem; }
.field input, .field textarea, .field select {
  width: 100%;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--r);
  padding: 0.8em 1em;
  color: var(--ink);
  transition: border-color var(--dur-quick) var(--ease), box-shadow var(--dur-quick) var(--ease);
}
.field input::placeholder, .field textarea::placeholder { color: var(--ink-3); }
.field input:focus, .field textarea:focus, .field select:focus { outline: none; border-color: var(--amber); box-shadow: 0 0 0 4px var(--glow-amber-soft); }
.field textarea { min-height: 120px; resize: vertical; }
.form-card { max-width: 560px; margin: var(--sp-5) auto 0; background: var(--surface); border: 1px solid var(--hairline-soft); border-radius: var(--r-xl); padding: clamp(1.5rem, 4vw, 2.5rem); }

/* Asset list (press kit) */
.asset-list { list-style: none; padding: 0; display: grid; gap: var(--sp-2); margin-top: var(--sp-4); max-width: 72ch; margin-inline: auto; }
.asset-list li { display: flex; align-items: baseline; gap: 0.6em; color: var(--ink-2); font-size: var(--fs-small); }
.asset-list li::before { content: ""; width: 0.5em; height: 0.5em; border-radius: 50%; background: var(--amber); box-shadow: 0 0 8px var(--glow-amber); flex: none; transform: translateY(0.4em); }

/* Centered CTA block reused at the bottom of sub-pages */
.cta-band { text-align: center; margin-top: var(--sp-8); }
.cta-band .waitlist { margin: var(--sp-4) auto 0; }

/* Print: clean, readable legal/support pages (light bg, dark ink, no chrome) */
@media print {
  .hero-atmo, .orb-stage, .site-header, .site-footer, .motion-toggle, .lang-switch, .subpage-hero .orb { display: none !important; }
  body { background: #fff !important; color: #1a1a1a !important; }
  h1, h2, h3, .section-title, .eyebrow { color: #111 !important; }
  .prose p, .lead, .muted, p { color: #222 !important; }
  a { color: #111 !important; text-decoration: underline; }
  .room--light, .plan, .feature, .point, .faq__item, .honesty__item, .price-tier { box-shadow: none !important; border-color: #ccc !important; }
  .container, .container--narrow, .prose { max-width: none !important; }
}