/* ===== How it works page ===== */

/* Hero figure: engagement path */
.path { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-xl); padding: var(--space-6); box-shadow: var(--shadow-lg); position: relative; }
.path__list { position: relative; padding-block: var(--space-5) var(--space-3); display: grid; gap: var(--space-5); }
.path__list::before { content: ''; position: absolute; left: 15px; top: calc(var(--space-5) + 16px); bottom: calc(var(--space-3) + 16px); width: 2px; background: linear-gradient(var(--brand-purple), var(--color-primary-line)); border-radius: 2px; }
.path__list li { display: grid; grid-template-columns: 32px 1fr auto; gap: var(--space-4); align-items: center; position: relative; }
.path__n { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--color-surface); border: 2px solid var(--brand-purple); color: var(--color-primary); font-size: .7rem; font-weight: 500; position: relative; z-index: 1; }
.path__list b { display: block; font-size: var(--text-sm); font-weight: 600; }
.path__list div span { display: block; font-size: var(--text-xs); color: var(--color-text-muted); }
.path__gate { font-style: normal; font-family: var(--font-mono); font-size: .7rem; font-weight: 500; padding: 2px 8px; border-radius: var(--radius-full); color: var(--color-ok); background: var(--color-ok-soft); white-space: nowrap; }
.path figcaption { color: var(--color-text-faint); padding-top: var(--space-4); border-top: 1px solid var(--color-divider); }

/* Engagement stages */
.stages { display: grid; gap: var(--space-5); margin-top: var(--space-12); counter-reset: none; }
.stage { display: grid; grid-template-columns: .85fr 1.15fr; gap: clamp(var(--space-8), 5vw, var(--space-16)); padding: clamp(var(--space-6), 3vw, var(--space-10)); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-xl); scroll-margin-top: var(--space-24); }
.stage__intro { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-3); }
.stage__n { color: var(--color-primary); text-transform: uppercase; letter-spacing: .1em; }
.stage__intro p { color: var(--color-text-muted); }
.stage__intro .tag { margin-top: var(--space-1); }
.stage__body { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-5) var(--space-8); align-content: start; }
.stage__body > div { display: grid; gap: var(--space-1); align-content: start; padding-top: var(--space-4); border-top: 1px solid var(--color-divider); }
.stage__body dt { font-family: var(--font-mono); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: .08em; color: var(--color-text-faint); }
.stage__body dd { font-size: var(--text-sm); color: var(--color-text-muted); }
.stage__body .stage__gate { border-top: 0; padding: var(--space-4); border-radius: var(--radius-md); background: var(--color-ok-soft); }
.stage__body .stage__gate dt { color: var(--color-ok); }
.stage__body .stage__gate dd { color: var(--color-text); font-weight: 500; }

/* What we need from you */
.needs { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-5); margin-top: var(--space-12); }
.needs li { display: grid; align-content: start; gap: var(--space-2); padding: var(--space-6); border-radius: var(--radius-lg); background: var(--color-bg); border: 1px solid var(--color-border); }
.needs .mono { color: var(--color-primary); }
.needs b { font-size: var(--text-base); font-weight: 600; }
.needs p { font-size: var(--text-sm); color: var(--color-text-muted); }

/* Pricing */
.price .panel { display: flex; flex-direction: column; gap: var(--space-3); }
.price .panel h3 { margin-bottom: 0; }
.price .label { margin-bottom: 0; }
.price .ticks { margin-top: var(--space-3); padding-top: var(--space-5); border-top: 1px solid var(--color-divider); }
.price__notes { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-6); margin-top: var(--space-6); }
.price__note { padding: var(--space-5) var(--space-6); border-radius: var(--radius-lg); background: var(--color-primary-soft); border: 1px solid var(--color-primary-line); display: grid; gap: var(--space-2); align-content: start; }
.price__note .mono { color: var(--color-primary); text-transform: uppercase; letter-spacing: .1em; }
.price__note p:not(.mono) { font-size: var(--text-sm); color: var(--color-text-muted); }
.price__note .link { display: inline-block; margin-top: var(--space-2); }

.faq__list details p .link { display: inline-block; margin-top: var(--space-2); }

@media (max-width: 1080px) {
  .needs { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 960px) {
  .stage { grid-template-columns: 1fr; }
}
@media (max-width: 860px) {
  .price__notes { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .stage__body, .needs { grid-template-columns: 1fr; }
  .path__list li { grid-template-columns: 32px 1fr; row-gap: var(--space-2); }
  .path__gate { grid-column: 2; justify-self: start; }
}
.price .panel .label { color: var(--color-primary); }