/* NusuAI: site accent + page styles for the secondary pages (privacy, 404). Family system: assets/shared/tokens.css.
   Accent follows the one-pager's lavender. */
:root {
  --accent: #5E5590;
  --highlight: #A9A1D8;
}

/* hero */
.hero { padding: var(--s7) 0 var(--s6); }
.hero .eyebrow { display: block; margin-bottom: var(--s3); }
.hero h1 { max-width: 15ch; margin-bottom: var(--s3); }
.hero .lede { font-size: 1.2rem; color: var(--muted); max-width: 56ch; margin-bottom: var(--s4); }
.hero .cta-row { display: flex; gap: var(--s2); flex-wrap: wrap; }

/* proof strip */
.proof { font-size: var(--text-small); color: var(--muted); border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); padding: var(--s3) 0; }
.proof b { color: var(--ink); font-weight: 600; }

/* process spine */
.spine { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--s2); padding-left: 0; }
.spine li { list-style: none; border-top: 2px solid var(--hairline); padding-top: var(--s2); }
.spine li.hot { border-top-color: var(--highlight); }
.spine b { font-family: var(--font-mono); font-size: var(--text-label); text-transform: uppercase; letter-spacing: 0.1em; display: block; margin-bottom: var(--s1); }
.spine p { font-size: var(--text-small); color: var(--muted); }
.spine-note { margin-top: var(--s3); font-style: italic; color: var(--muted); font-size: var(--text-small); }

/* plain-terms dual register */
.plain { border-left: 2px solid var(--highlight); padding-left: var(--s2); margin-top: var(--s2); font-size: var(--text-small); color: var(--muted); font-style: italic; }

/* engagement rows reuse .rows/.row; artifacts */
.artifact { font-family: var(--font-mono); font-size: var(--text-label); color: var(--accent); border: 1px solid var(--hairline); border-radius: var(--radius); padding: 0.2rem 0.6rem; display: inline-block; margin-top: var(--s2); }

/* objections band */
.straight { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s4); }
.straight article { border-top: 2px solid var(--accent); padding-top: var(--s2); }
.straight h3 { margin-bottom: var(--s1); }
.straight p { font-size: var(--text-small); color: var(--muted); }

@media (max-width: 820px) {
  .spine, .straight { grid-template-columns: 1fr; }
}