/* The four module pillar pages. Extends guides.css - same brand, same square
   black-stroked language - and adds the hero and the band ladder.
   Icons are Phosphor, inlined from /icons.svg. No emoji anywhere. */

.ico { width: 1em; height: 1em; flex: 0 0 auto; vertical-align: -0.125em; }
h2 .ico, .eyebrow .ico { color: var(--red); }

/* --- hero --- */
.mhero {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 0; align-items: stretch; border-bottom: 2px solid var(--stroke);
}
.mhero-text { padding: 54px 42px 56px; display: flex; flex-direction: column; justify-content: center;
              max-width: 640px; margin-left: auto; width: 100%; }
.mhero-img { border-left: 2px solid var(--stroke); background: var(--red-wash); }
.mhero-img img { width: 100%; height: 100%; object-fit: cover; display: block; }

.module h1 { margin-bottom: 14px; }
.module .eyebrow { display: flex; align-items: center; gap: 8px; }
.mhero .stat {
  border-left: 0; border-top: 2px solid var(--stroke); border-bottom: 2px solid var(--stroke);
  padding: 12px 0; margin: 8px 0 24px; font-weight: 600; color: var(--ink);
  display: flex; align-items: baseline; gap: 10px;
}
.mhero .stat .ico { color: var(--red); align-self: center; }
.cta-row { display: flex; gap: 10px; flex-wrap: wrap; margin: 0; }
.cta-row .btn { display: inline-flex; align-items: center; gap: 8px; margin: 0; }
.btn.ghost-dark { background: #fff; color: var(--ink); border-color: var(--stroke); }
.btn.ghost-dark:hover { background: var(--ink); color: #fff; border-color: var(--ink); }

/* --- the band ladder --- */
.bands { margin: 10px 0 0; }
.band { display: grid; grid-template-columns: 132px minmax(0, 1fr); gap: 24px;
        border-top: 2px solid var(--stroke); padding: 26px 0 22px; align-items: start; }
.band-step {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  border: 2px solid var(--stroke); background: var(--ink); color: #fff;
  padding: 10px 8px; font-family: var(--font-mono); font-weight: 600; font-size: 17px;
  position: sticky; top: 84px;
}
.band-step .arrow { width: .8em; height: .8em; opacity: .75; }
.band-step .to { color: #fff; }
.band .need { font: 600 12.5px var(--font-sans); text-transform: uppercase; letter-spacing: .07em;
              color: var(--red); display: flex; align-items: center; gap: 7px; margin-bottom: 10px; }
.band h3 { font-size: 20px; margin-bottom: 4px; }
.band .lede-bn { color: var(--purple); font-weight: 600; margin-bottom: 10px; }
ul.moves { list-style: none; margin: 14px 0 0; padding: 0; }
ul.moves li { display: flex; gap: 10px; align-items: flex-start; margin-bottom: 8px; font-size: 16px; }
ul.moves .ico { color: #1a7f38; margin-top: .28em; }

/* --- traps --- */
ul.traps { list-style: none; margin: 8px 0 0; padding: 0; }
ul.traps li { display: flex; gap: 12px; align-items: flex-start;
              border: 2px solid var(--stroke); padding: 16px 18px; margin-bottom: 12px; }
ul.traps .ico { color: var(--red); font-size: 22px; margin-top: .1em; }
ul.traps b { color: var(--ink); }
ul.traps .bn { color: var(--purple); font-weight: 600; }
ul.traps p { margin: 6px 0 0; font-size: 15.5px; }

.cards .card h2 { display: flex; align-items: center; gap: 9px; font-size: 17px; }
.cards .card .ico { color: var(--red); }

header.site .brand img { display: block; height: 30px; width: auto; }

@media (max-width: 860px) {
  .mhero { grid-template-columns: 1fr; }
  /* image first on a phone: it is what tells you which paper this page is about */
  .mhero-img { order: -1; border-left: 0; border-bottom: 2px solid var(--stroke); aspect-ratio: 16 / 9; }
  .mhero-text { padding: 34px 20px 38px; max-width: none; }
  .band { grid-template-columns: 1fr; gap: 12px; }
  .band-step { position: static; justify-self: start; padding: 8px 16px; }
}