/* /how-it-works/ -- the site-level explainer the homepage hero's "How It Works"
   button lands on (2026-09-25). Reuses the house tokens and the hub path's
   pillar accents (guides green, forecasts blue, studios orange, keyed off the
   pillar, never the category -- see _includes/CLAUDE.md). */
.hiw { max-width: var(--max); margin: 0 auto; padding: var(--s-6) var(--pad) 72px; box-sizing: border-box; }
.hiw-sec + .hiw-sec { margin-top: clamp(48px, 6vw, 80px); }
.hiw-sec h2 {
  margin: 0 0 var(--s-3); font-family: var(--fb); font-weight: 700; line-height: 1.1;
  font-size: clamp(24px, 2.8vw, 32px); color: var(--text); text-wrap: balance;
}
.hiw .hiw-lede { margin: 0 0 var(--s-5); max-width: 62ch; font-size: var(--t-read); line-height: 1.7; color: var(--sub); }
.hiw h3 { margin: 0; font-family: var(--fb); font-weight: 700; font-size: var(--t-h3); line-height: 1.2; color: var(--text); }
.hiw p { margin: 0; }
.hiw a { text-decoration: none; }

/* The three decisions */
.hiw-decisions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-4); }
.hiw-dec {
  display: flex; flex-direction: column; gap: var(--s-3);
  padding: var(--s-5); background: var(--card); border: 1px solid var(--border); border-radius: var(--r-md);
}
.hiw-dec__who { font-size: var(--t-read); line-height: 1.55; color: var(--text); }
.hiw-dec > p:not(.hiw-dec__who) { font-size: var(--t-body); line-height: 1.65; color: var(--sub); flex: 1; }
.hiw-dec__links { list-style: none; margin: var(--s-2) 0 0; padding: var(--s-3) 0 0; border-top: 1px solid var(--border); display: grid; gap: var(--s-2); }
.hiw-dec__links a,
.hiw-step > a {
  display: inline-flex; align-items: center; gap: 5px;
  font-family: var(--fd); font-weight: 600; font-size: var(--t-ui); letter-spacing: .06em; text-transform: uppercase;
}
.hiw-dec__links li:nth-child(1) a { color: var(--guide); }
.hiw-dec__links li:nth-child(2) a { color: var(--projection); }
.hiw-dec__links li:nth-child(3) a { color: var(--studio); }

/* Context, then cases, then you. No ordinals (dropped 2026-09-25): the order is
   carried by the homepage's device, one rule running through the three pillar
   colours with a node at each stop (home.css "The path"). Stacked, the rule
   turns vertical and runs node to node. */
.hiw-path {
  --node: 15px; position: relative; list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-5);
}
.hiw-path::before {
  content: ""; position: absolute; left: 0; right: 0; top: calc(var(--node) / 2); height: 1px;
  background: linear-gradient(90deg, var(--guide), var(--projection) 50%, var(--studio));
}
.hiw-step { position: relative; display: flex; flex-direction: column; gap: var(--s-2); padding-top: calc(var(--node) + var(--s-4)); }
.hiw-step--guides { --k: var(--guide); }
.hiw-step--forecasts { --k: var(--projection); }
.hiw-step--studios { --k: var(--studio); }
.hiw-step__node {
  position: absolute; top: 0; left: 0; width: var(--node); height: var(--node);
  border-radius: var(--r-circle); background: var(--k); box-sizing: border-box;
}
.hiw-step p { font-size: var(--t-body); line-height: 1.65; color: var(--sub); flex: 1; max-width: 40ch; }
.hiw-step > a { margin-top: var(--s-2); align-self: flex-start; color: var(--k); }

/* Studios */
.hiw-studios { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-4); }
.hiw-studio { padding: var(--s-4) var(--s-5); border-left: 2px solid var(--studio); display: grid; gap: var(--s-2); align-content: start; }
.hiw-studio p { font-size: var(--t-body); line-height: 1.65; color: var(--sub); }
.hiw-points { list-style: none; margin: var(--s-6) 0 0; padding: 0; display: grid; gap: var(--s-3); max-width: 72ch; }
.hiw-points li { font-size: var(--t-read); line-height: 1.7; color: var(--sub); }
.hiw-points strong { color: var(--text); }
.hiw-points a, .hiw-end p a { color: var(--orange); border-bottom: 1px solid var(--studio-border); }
.hiw-points a:hover, .hiw-end p a:hover { border-bottom-color: var(--orange); }

/* Where to start */
.hiw-end p { max-width: 68ch; font-size: var(--t-read); line-height: 1.7; color: var(--sub); }
.hiw-end__ctas { margin-top: var(--s-5); display: flex; gap: var(--s-3); flex-wrap: wrap; }
.hiw-end__ctas .btn-ghost:hover, .hiw-end__ctas .btn-ghost:focus-visible { color: var(--text); }

@media (max-width: 900px) {
  .hiw-decisions, .hiw-studios { grid-template-columns: 1fr; }
  .hiw-path { grid-template-columns: 1fr; gap: 0; }
  .hiw-path::before { display: none; }
  .hiw-step { padding: 0 0 var(--s-6) calc(var(--node) + var(--s-4)); }
  .hiw-step:last-child { padding-bottom: 0; }
  .hiw-step__node { top: 3px; }
  .hiw-step:not(:last-child)::after {
    content: ""; position: absolute; left: calc(var(--node) / 2); top: calc(var(--node) + 3px); bottom: 3px; width: 1px;
  }
  .hiw-step--guides::after { background: linear-gradient(180deg, var(--guide), var(--projection)); }
  .hiw-step--forecasts::after { background: linear-gradient(180deg, var(--projection), var(--studio)); }
  .hiw-step p { max-width: none; }
}
@media (max-width: 480px) {
  .hiw { padding-left: 16px; padding-right: 16px; }
  .hiw-dec { padding: var(--s-4); }
  .hiw-end__ctas a { flex: 1 1 100%; justify-content: center; }
}