/* flow.css — what happens after the free lesson.
   Two jobs, two pages. On /course it turns the locked stages from grey bars into
   a legible route: each card says what the stage is, the first order you will
   hear, and what it measures. On /pricing it carries the ask: what the one
   payment opens, and — stated, not buried — what it does not.
   Loaded after account.css; reads the same tokens with the same fallbacks. */

/* ---------------------------------------------------------------- course: the route */

/* The mission's own tagline, quoted the way the mission library wrote it. It is
   the concrete hook — "the 17% dive over the roundabout" sells the stage better
   than any copy written about it. */
.co-hook {
  margin: 10px 0 0; padding-left: 12px;
  border-left: 2px solid var(--line-2, #2e343d);
  font-size: var(--text-sm, 13px); color: var(--ink-2, #a4b0bc);
  max-width: 60ch; line-height: 1.5;
}

/* The first instruction the instructor will actually give — one cue of many,
   a taste of the teaching without handing over the syllabus. */
.co-cue-line {
  margin: 10px 0 0; max-width: 70ch;
  font-family: var(--font-mono, monospace); font-size: var(--text-xs, 12px);
  color: var(--ink-3, #6b7885); line-height: 1.6;
}
.co-cue-line span {
  display: inline-block; margin-right: 8px;
  font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-4, #47525d);
}

/* One coral action for the whole ladder, after the stages have made the case.
   The per-stage links above it stay quiet. */
.co-route {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--s4, 16px) var(--s6, 32px);
  margin-top: var(--s3, 12px); padding: var(--s5, 24px);
  border: 1px solid var(--ac-coral-line, rgba(255, 95, 62, .34));
  border-radius: var(--r-lg, 12px);
  background:
    radial-gradient(90% 140% at 0% 0%, var(--ac-coral-soft, rgba(255, 95, 62, .12)) 0%, transparent 55%),
    var(--panel-grad, linear-gradient(180deg, #12161b, #0c0f13));
}
.co-route > div { flex: 1 1 380px; }
.co-route h3 { font-size: var(--text-md, 17px); margin-bottom: 4px; }
.co-route p { font-size: var(--text-sm, 13px); color: var(--ink-2, #a4b0bc); max-width: 62ch; line-height: 1.55; }
.co-route .ac-btn { flex: none; }

/* Filled from /api/pricing after render; until then it says nothing numeric,
   because a price the server did not confirm does not go on the page. */
.co-route-price {
  display: block; margin-top: 8px;
  font-family: var(--font-mono, monospace); font-size: var(--text-xs, 12px);
  color: var(--ink-3, #6b7885);
}

@media (max-width: 900px) {
  .co-route { padding: var(--s4, 16px); }
  .co-route .ac-btn { width: 100%; }
  .co-hook { max-width: none; }
}

/* ---------------------------------------------------------------- pricing: the ask */

/* Scope line in the buy card: what the payment opens and what stays free. */
.pr-scope {
  font-family: var(--font-mono, monospace); font-size: var(--text-xs, 12px);
  color: var(--ink-3, #6b7885); margin: 0 0 var(--s2, 8px);
}

/* Heading over the inclusions list, matching the compare/FAQ heading register. */
.pr-open h2 { font-family: 'Satoshi', sans-serif; font-weight: 700; font-size: var(--text-xl, 22px); margin: 0 0 var(--s2, 8px); }
.pr-open > p { font-size: var(--text-sm, 13px); color: var(--ink-3, #6b7885); margin: 0; max-width: 60ch; line-height: 1.6; }
.pr-open .pr-incl { margin-top: var(--s5, 24px); }

/* What the purchase does not include. Same table rhythm as the inclusions list,
   but with a plain dash instead of a tick — these are facts, not failures. */
.pr-gaps { margin-top: var(--s8, 64px); }
.pr-gaps h2 { font-family: 'Satoshi', sans-serif; font-weight: 700; font-size: var(--text-xl, 22px); margin: 0 0 var(--s2, 8px); }
.pr-gaps > p { font-size: var(--text-sm, 13px); color: var(--ink-3, #6b7885); margin: 0 0 var(--s5, 24px); max-width: 60ch; line-height: 1.6; }
.pr-gaps ul { list-style: none; padding: 0; margin: 0; }
.pr-gaps li {
  display: flex; gap: var(--s3, 12px); padding: var(--s3, 12px) 0;
  border-top: 1px solid var(--line, #23282f);
  font-size: var(--text-sm, 13px); line-height: 1.5; color: var(--ink-2, #a4b0bc);
}
.pr-gaps li:last-child { border-bottom: 1px solid var(--line, #23282f); }
.pr-gaps li b { color: var(--ink, #e9edf1); font-weight: 600; }
.pr-gaps .dash { flex: 0 0 auto; color: var(--ink-4, #47525d); font-family: var(--font-mono, monospace); margin-top: 1px; }

/* Phones: the price card leads, loses its stickiness, and the table breathes. */
@media (max-width: 860px) {
  .pr-grid aside { order: -1; }
  .pr-card { position: static; padding: var(--s5, 24px); }
  .pr-amount { font-size: 52px; }
  .pr-hero { padding: var(--s6, 32px) 0 var(--s5, 24px); margin-bottom: var(--s6, 32px); }
  .pr-table th, .pr-table td { padding: var(--s3, 12px) var(--s2, 8px); }
  .pr-incl { margin-top: var(--s5, 24px); }
}