/* ==========================================================================
   HOW WE EVALUATE · page-specific
   Tokens, nav, sub hero, buttons and footer come from site.css.

   This page is the long form of what the Storm page summarises. Storm gives the
   three guarantees and the six stage titles; this one gives the stages in full,
   the engineering controls underneath them, and the questions a technical buyer
   actually asks. It is meant to survive being handed to someone whose job is to
   attack the methodology.
   ========================================================================== */

/* ---- Three guarantees, stated compactly. The Storm page carries the same
   three, so here they are the frame rather than the argument. ---- */
.guarantees { list-style: none; margin: 0; padding: 0; display: grid; gap: 2rem; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.guarantees li { border-block-start: 2px solid var(--accent); padding-block-start: 1.15rem; }
.guarantees h3 { font-size: 1.2rem; margin-block-end: 0.5rem; }
.guarantees p { color: var(--ink-2); font-size: 0.95rem; }

/* ---- The six stages ---- */
.stages { list-style: none; margin: 0; padding: 0; }
.stages > li { padding-block: 2.5rem; border-block-start: 1px solid var(--line); }
.stages > li:last-child { border-block-end: 1px solid var(--line); }
@media (min-width: 900px) {
  .stages > li { display: grid; grid-template-columns: 11rem minmax(0, 1fr); gap: 0 3.5rem; }
}
.stages__tag { display: block; font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); padding-block-start: 0.4rem; }
.stages h3 { font-size: 1.3rem; margin-block-end: 0.8rem; }
.stages p { color: var(--ink-2); max-inline-size: 42rem; }
.stages p + p { margin-block-start: 0.9rem; }
.stages__note {
  display: inline-block;
  margin-block-start: 1.1rem;
  font-family: var(--mono);
  font-size: 0.72rem;
  color: var(--sea);
  background: rgba(61, 107, 107, 0.09);
  padding: 0.38rem 0.65rem;
  border-radius: 5px;
}
@media (max-width: 899px) { .stages__tag { margin-block-end: 0.6rem; padding-block-start: 0; } }

/* ---- Engineering controls ---- */
.controls { list-style: none; margin: 0; padding: 0; display: grid; gap: 2.25rem; grid-template-columns: repeat(auto-fit, minmax(255px, 1fr)); }
.controls li { border-block-start: 2px solid var(--ink); padding-block-start: 1.15rem; }
.controls h3 { font-size: 1.1rem; margin-block-end: 0.55rem; }
.controls p { color: var(--ink-2); font-size: 0.95rem; }