/* ============================================================
   Market Simulation page (market-simulation.html), loaded after
   landing.css and how-it-works.css. The page reuses the chapter layout
   of How It Works (hiw-*); every class here starts with sim-.
   ============================================================ */

/* --- Hero: the six tools as linked cards, three per row on desktop --- */
.sim-index .hiw-step-card h3 { margin-top: 12px; }
.sim-index .hiw-step-num { font-size: 2rem; }
.sim-index .sim-question {
  margin-bottom: 8px;
  font-size: 0.98rem;
  font-weight: 600;
  line-height: 1.45;
  color: var(--color-ink);
}
/* Phones: compact cards (how-it-works.css) that keep the question under the title */
@media (max-width: 719px) {
  .sim-index .hiw-step-card { grid-template-columns: 48px minmax(0, 1fr); row-gap: 3px; }
  .sim-index .hiw-step-num { grid-row: 1 / span 2; font-size: 1.8rem; }
  .sim-index .hiw-step-card h3 { margin: 0; }
  .sim-index .sim-question {
    display: block;
    grid-column: 2;
    margin: 0;
    font-size: 0.88rem;
    font-weight: 500;
    color: var(--color-text-muted);
  }
}
@media (min-width: 1100px) {
  .sim-index { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
  /* Six tools, not a sequence: no "then" chevrons between the cards. */
  .sim-index > li:not(:last-child)::after { content: none; }
}

/* --- Shared setup: what every tool starts from --- */
.sim-setup {
  padding: var(--section-py) 0;
  background: var(--color-bg);
  border-bottom: 1px solid var(--color-border);
}
.sim-setup-head { max-width: 760px; margin-bottom: 8px; }
.sim-setup-head .section-desc { max-width: none; margin-bottom: 0; }
.sim-setup .hiw-panel { margin-top: 32px; }

/* --- Chapter body: the recording runs wide under the heading, the lists follow
       in two columns. On desktop both line up with the heading next to the number. --- */
.sim-chapter-visual,
.sim-chapter-text { max-width: 920px; }
.sim-chapter-text {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 30px 48px;
  margin-top: 36px;
}
.sim-chapter-text .hiw-split + .hiw-split { margin-top: 0; }
.sim-chapter-body .hiw-more { margin-top: 18px; }
@media (min-width: 720px) {
  .sim-chapter-text { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sim-chapter-text .sim-note { grid-column: 1 / -1; }
}
@media (min-width: 1024px) {
  /* .hiw-chapter-head: 150px number column plus a 40px gap */
  .sim-chapter-body { margin-left: 190px; }
}

/* --- The recording and its caption; "View larger" is an icon on the video
       (landing.css, .method-carousel__zoom) --- */
.sim-loop { position: relative; margin: 0; max-width: none; }
.sim-loop-caption {
  margin-top: 12px;
  font-size: 0.84rem;
  line-height: 1.55;
  color: var(--color-text-muted);
}
.sim-loop-caption strong { font-weight: 600; color: var(--color-ink); }

/* A screenshot in place of a recording (Survey Analysis page). App screenshots
   are kept smaller than the recordings; "View larger" shows them in full. */
.model-loop img { display: block; width: 100%; height: auto; }
.sim-chapter-visual.sa-visual { max-width: 620px; }
.sa-shot { margin: 0; }
.sa-shot + .sa-shot { margin-top: 28px; }
/* Two views of one analysis: side by side from tablet width */
@media (min-width: 768px) {
  .sim-chapter-visual.sa-visual--pair {
    max-width: 920px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 28px;
    align-items: start;
  }
  .sa-visual--pair .sa-shot + .sa-shot { margin-top: 0; }
}

/* A short plain note under the lists: no stripe, no tinted box. */
.sim-note {
  margin: 0;
  padding-top: 18px;
  border-top: 1px solid var(--color-border);
  font-size: 0.88rem;
  line-height: 1.6;
  color: var(--color-text-muted);
}
.sim-note strong { font-weight: 600; color: var(--color-ink); }