/* How it works (card 1f). Tokens only (CONTRACT.md). The story's own styles are assets/how-story/story.css. */

.how-intro { padding-block: var(--space-8) var(--space-7); display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-5); }

/* ---- the five steps as plain text ---------------------------------------------------------------------------------------------
   Seen only when the story cannot run (no scripts, a bad story file, a story script that never started: how.js sets data-late on the
   story root after two seconds without data-ready). When the story runs, or is about to, the list stays in the page for screen
   readers and search engines and is hidden from sight. */
.how-steps { list-style: none; padding: 0; counter-reset: how-step; display: grid; gap: var(--space-4); }
.how-steps li {
  counter-increment: how-step; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-2) var(--space-5); align-items: start;
  padding: var(--space-5); border-radius: var(--r-card); background: var(--graphite);
}
.how-steps li::before {
  content: counter(how-step); grid-row: 1 / span 2;
  font-family: var(--font-display); font-size: var(--fs-1); line-height: 0.9; font-weight: 700; letter-spacing: -0.03em; color: var(--slate);
  min-width: 0.7em;
}
.how-steps p { color: var(--text-soft); max-width: 56ch; }
/* hidden while the story runs (data-ready="1") and while it is about to (nothing set yet, and not yet late); shown for "empty", "error" and "late" */
.js [data-scroll-story][data-ready="1"] ~ .how-steps,
.js [data-scroll-story]:not([data-ready]):not([data-late]) ~ .how-steps {
  position: absolute; width: min(100%, 60rem); height: 1px; margin: -1px 0 0; padding: 0; border: 0;
  overflow: hidden; clip-path: inset(50%);   /* as wide as a page column, so its headings do not wrap one word to a line */
}

/* ---- what we need from you / how long it takes ------------------------------------------------------------------------------- */
.how-needs {
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: var(--space-7);
  padding: var(--space-8); border-radius: var(--r-panel); background: var(--blueprint); color: var(--ink);
}
.how-needs-main { display: flex; flex-direction: column; gap: var(--space-5); }
.how-list { list-style: none; padding: 0; display: flex; flex-direction: column; gap: var(--space-3); }
.how-list li { position: relative; padding-left: var(--space-6); font-size: var(--fs-5); line-height: 1.4; max-width: 34ch; }
.how-list li::before { content: ""; position: absolute; left: 0; top: 0.5em; width: 12px; height: 12px; border-radius: 50%; background: var(--ink); }
.how-needs-time { display: flex; flex-direction: column; gap: var(--space-4); padding-top: var(--space-2); align-self: end; }
.how-time-title { font-family: var(--font-display); font-size: var(--fs-4); line-height: 1.15; font-weight: 700; letter-spacing: -0.01em; color: var(--slate); }
.how-time-line { font-family: var(--font-display); font-size: var(--fs-3); line-height: 1.12; font-weight: 700; letter-spacing: -0.015em; max-width: 20ch; text-wrap: balance; }
.how-time-rounds { font-size: var(--fs-6); line-height: 1.45; color: var(--slate); }
.how-time-rounds .num { color: var(--ink); font-weight: 600; }

/* ---- what we check ------------------------------------------------------------------------------------------------------------ */
.how-checks { display: grid; gap: var(--space-7); }
.how-checks-head { display: flex; flex-direction: column; gap: var(--space-4); max-width: 48rem; }
.how-check-list { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-7) var(--space-6); }
.how-check-list li { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-3); }
.how-check-list p { color: var(--text-soft); max-width: 34ch; }
.how-check-mark { width: 40px; height: 40px; margin-bottom: var(--space-2); color: var(--blueprint); }
.how-soon { font-size: var(--fs-5); line-height: 1.4; color: var(--text-soft); }
.how-soon strong { color: var(--paper); font-weight: 600; }

/* ---- the closing ------------------------------------------------------------------------------------------------------------- */
.how-close {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-5) var(--space-6);
  padding: var(--space-8); border-radius: var(--r-panel); background: var(--graphite);
}
.how-close .h-section { max-width: 24ch; }

@media (max-width: 1099.98px) {
  .how-check-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 759.98px) {
  .how-intro { padding-block: var(--space-7) var(--space-6); }
  .how-needs { grid-template-columns: minmax(0, 1fr); padding: var(--space-6) var(--space-5); gap: var(--space-6); }
  .how-needs-time { align-self: start; }
  .how-check-list { grid-template-columns: minmax(0, 1fr); gap: var(--space-6); }
  .how-close { padding: var(--space-6) var(--space-5); }
  .how-steps li { grid-template-columns: minmax(0, 1fr); }
  .how-steps li::before { grid-row: auto; }
}