/* ============================================================================
   MrMurse - How It Works page styles
   ----------------------------------------------------------------------------
   Page-specific composition only. Reuses Phase 0 tokens and components; adds
   the layouts unique to this page (the hero weekly-workflow preview, the
   compare columns, the use-case tag groups). No new colors, no new visual
   language. Every value references a token.
   ========================================================================== */

/* ---- Hero: align the workflow preview comfortably beside the copy.
   The shared .hero / .hero__grid / .hero__title / .hero__sub / .hero__cta now
   live in components.css (HERO component). This page only tweaks alignment. --- */
.hiw-hero { align-items: center; }

/* ---- Weekly workflow preview (distinct from the Home loop) ----------------
   A vertical sequence of compact step cards on a connecting rail, in the same
   surface language as the Home product cards.                                */
.flow { position: relative; display: grid; gap: var(--space-4); padding-left: var(--space-2); }
.flow__rail {
  position: absolute; left: 32px; top: 28px; bottom: 28px; width: 2px;
  background: linear-gradient(var(--accent), var(--accent-2));
  opacity: .35; border-radius: var(--radius-pill);
}
.flow__step {
  position: relative; display: flex; align-items: center; gap: var(--space-4);
  background: var(--surface); border: var(--border-width) solid var(--border);
  border-radius: var(--radius-md); padding: var(--space-3) var(--space-4);
  box-shadow: var(--shadow-sm);
}
.flow__chip {
  flex-shrink: 0; width: 44px; height: 44px; border-radius: var(--radius-sm);
  background: var(--c-teal-tint-10); color: var(--accent);
  display: inline-flex; align-items: center; justify-content: center;
  border: var(--border-width) solid var(--surface);
  box-shadow: 0 0 0 2px var(--c-teal-tint-18);
}
.flow__chip .icon { width: 20px; height: 20px; }
.flow__chip--end { background: var(--c-navy); color: #fff; box-shadow: 0 0 0 2px var(--accent); }
.flow__body { display: flex; flex-direction: column; min-width: 0; }
.flow__title { font-size: var(--fs-body-sm); font-weight: var(--fw-bold); color: var(--text-primary); }
.flow__meta { font-size: var(--fs-caption); color: var(--text-muted); margin-top: 1px; }
.flow__step--end { border-color: var(--c-teal-tint-18); }

/* check-list: shared pattern (also defined for the Home page). Redefined here
   because this page does not load home.css. Keeps the feedback column styled. */
.check-list { display: grid; gap: var(--space-3); margin-top: var(--space-5); }
.check-list li { display: flex; gap: var(--space-3); align-items: flex-start; font-size: var(--fs-body-sm); color: var(--text-body); }
.check-list .icon { color: var(--accent); flex-shrink: 0; margin-top: 2px; }

/* ---- The weekly loop: step cards with an index label --------------------- */
.steps-grid { margin-top: var(--space-7); }
.step-index {
  display: inline-block; font-size: var(--fs-caption); font-weight: var(--fw-bold);
  letter-spacing: var(--ls-wide); text-transform: uppercase; color: var(--accent-strong);
  margin-bottom: var(--space-2);
}
.feature-card .icon-chip { margin-bottom: var(--space-4); }

/* Step cards flex so the focus footer pins to the bottom for an even row. */
.steps-grid .feature-card { display: flex; flex-direction: column; }
.steps-grid .feature-card .card__text { margin-bottom: var(--space-5); }

/* Per-step focus footer: gray label + listed topics, divided from the card. */
.step-focus {
  margin-top: auto; padding-top: var(--space-4);
  border-top: var(--border-width) solid var(--border);
  display: grid; gap: var(--space-2);
}
.step-focus__row {
  font-size: var(--fs-body-sm); font-weight: var(--fw-semibold); color: var(--text-primary);
}
.step-focus__label {
  display: block; font-size: var(--fs-caption); font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-wide); text-transform: uppercase; color: var(--text-muted);
  margin-bottom: 1px;
}

/* Extra breathing room between the onboarding intro and the first step. */
.onboard--spaced { margin-top: var(--space-3); }

/* ---- Feedback surface: the assigned follow-up row ------------------------- */
.assigned {
  display: flex; gap: var(--space-3); align-items: flex-start;
  margin-top: var(--space-5); padding: var(--space-4);
  background: var(--c-teal-tint-08); border: var(--border-width) solid var(--c-teal-tint-18);
  border-radius: var(--radius-sm);
}
.assigned__ic { flex-shrink: 0; color: var(--accent); margin-top: 1px; }
.assigned__txt { font-size: var(--fs-body-sm); color: var(--text-body); }
.assigned__txt b { color: var(--text-primary); }

/* ---- Compare: scattered vs. system --------------------------------------- */
.compare { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-5); }
.compare__col {
  border: var(--border-width) solid var(--border); border-radius: var(--radius-lg);
  padding: var(--space-6); background: var(--surface);
}
.compare__col--muted { background: var(--bg-alt); }
.compare__col--brand { border-color: var(--c-teal-tint-18); box-shadow: var(--shadow-sm); }
.compare__head { margin-bottom: var(--space-4); }
.compare__label {
  font-size: var(--fs-eyebrow); font-weight: var(--fw-bold); letter-spacing: var(--ls-wide);
  text-transform: uppercase; color: var(--text-muted);
}
.compare__label--brand { color: var(--accent-strong); }
.compare__list { display: grid; gap: var(--space-3); }
.compare__list li { display: flex; gap: var(--space-3); align-items: flex-start; font-size: var(--fs-body-sm); color: var(--text-body); }
.compare__mark { flex-shrink: 0; width: 24px; height: 24px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; margin-top: 1px; }
.compare__mark--x { background: var(--bg-alt); color: var(--text-muted); }
.compare__col--muted .compare__mark--x { background: #ECEFF1; }
.compare__mark--check { background: var(--c-teal-tint-10); color: var(--accent); }

/* ---- Use cases: grouped tag rows ----------------------------------------- */
.usecases { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-5); }
.usecase-group {
  background: var(--surface); border: var(--border-width) solid var(--border);
  border-radius: var(--radius-lg); padding: var(--space-6) var(--space-5);
}
.usecase-group__title { font-size: var(--fs-h4); margin-bottom: var(--space-4); }
.tag-row { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.tag-pill {
  font-size: var(--fs-body-sm); font-weight: var(--fw-semibold); color: var(--text-body);
  background: var(--bg-alt); border: var(--border-width) solid var(--border);
  padding: 6px 14px; border-radius: var(--radius-pill);
}

/* ---- Onboarding timeline: keep a comfortable max width ------------------- */
.onboard { max-width: 760px; margin-inline: auto; }

/* ---- Responsive ---------------------------------------------------------- */
@media (max-width: 920px) {
  .hiw-hero { text-align: left; }
  .compare { grid-template-columns: 1fr; }
  .usecases { grid-template-columns: 1fr; }
}
@media (max-width: 920px) {
  /* hero copy centers on stack like Home, but the workflow preview reads better
     left-aligned, so keep it full width under the copy */
  .hiw-hero .hero__visual { width: 100%; }
  .flow { max-width: 460px; margin-inline: auto; }
}

/* ---------------------------------------------------- STUDENT JOURNEY ------
   Multi-week example showing the loop adapting over time. A 4-column grid of
   "week" cards that collapses on smaller screens. */
.journey {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-5);
  margin-top: var(--space-7);
}
.journey__week {
  background: var(--surface); border: var(--border-width) solid var(--border);
  border-radius: var(--radius-lg); padding: var(--space-5);
  box-shadow: var(--shadow-sm); display: flex; flex-direction: column;
}
.journey__tag {
  font-size: var(--fs-eyebrow); font-weight: var(--fw-bold);
  letter-spacing: var(--ls-wide); text-transform: uppercase;
  color: var(--accent-strong);
}
.journey__title { font-size: var(--fs-h4); margin-top: var(--space-2); }
.journey__text { font-size: var(--fs-body-sm); color: var(--text-body); margin-top: var(--space-3); flex-grow: 1; }
.journey__focus {
  font-size: var(--fs-body-sm); color: var(--text-primary); font-weight: var(--fw-semibold);
  margin-top: var(--space-4); padding-top: var(--space-4);
  border-top: var(--border-width) solid var(--border);
  display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap;
}
@media (max-width: 920px) {
  .journey { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .journey { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------- FEEDBACK EMPHASIS ----
   Give the feedback summary surface slightly more width than the copy so the
   product example reads as the focal point of the section. Stacks on tablet
   via the base .split rule. */
@media (min-width: 921px) {
  .split.system { grid-template-columns: 0.92fr 1.08fr; }
}