/* Explainer home */
.hm { padding-bottom: 96px; }
.hm h1 { font-size: clamp(2.2rem, 5.2vw, 3.8rem); line-height: 1.05; letter-spacing: -.02em; margin: 0 0 24px; font-weight: 700; }
.hm h2 { font-size: clamp(1.6rem, 3vw, 2.2rem); letter-spacing: -.01em; margin: 0 0 16px; }
.hm p { max-width: 62ch; line-height: 1.65; color: var(--text); margin: 0 0 16px; }
.hm-hero { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: 48px; align-items: center; padding-top: 72px; padding-bottom: 72px; }
.hm-lead { font-size: 1.15rem; color: var(--muted); }
.hm-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.hm-hero-tower .tw-svg { width: 100%; max-width: 360px; margin: 0 auto; display: block; overflow: visible; filter: drop-shadow(0 0 40px rgba(255, 200, 40, .22)); }
.hm-hero-tower .tw-svg > rect:first-of-type, .hm-hero-tower .tw-ground, .hm-hero-tower .tw-star { display: none; }
.hm-sec { padding-top: 72px; padding-bottom: 24px; }
.hm-sub { color: var(--muted); }
/* climb diagram: written bottom-to-top, shown with the first step at the bottom */
.hm-climb { list-style: none; margin: 40px 0 0; padding: 0; display: flex; flex-direction: column-reverse; }
.hm-step { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 32px; align-items: stretch; }
.hm-art { display: flex; flex-direction: column; justify-content: flex-end; align-items: center; }
.hm-txt { padding: 28px 0; align-self: center; }
.hm-txt h3 { font-size: 1.2rem; margin: 0 0 8px; }
.hm-txt p { margin: 0; color: var(--muted); }
.hm-band { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; width: 150px; flex: none; height: 72px; padding: 14px 14px; box-sizing: border-box; background: var(--surface); border: 2px solid var(--border-strong); border-bottom-width: 4px; }
.hm-band i { background: var(--border); border-radius: 2px; transition: background .6s cubic-bezier(.16, 1, .3, 1), box-shadow .6s cubic-bezier(.16, 1, .3, 1); }
.hm-band + .hm-band { border-bottom-width: 4px; }
.hm-ledge { width: 170px; height: 8px; margin: 0 0 0; background: var(--border-strong); border-radius: 2px; transition: background .6s cubic-bezier(.16, 1, .3, 1); }
.hm-roof { display: flex; gap: 12px; width: 150px; padding: 0 0 0; align-items: flex-end; }
.hm-roof b { flex: 1; height: 34px; background: var(--surface); border: 2px solid var(--border-strong); border-radius: 4px; transition: background .6s cubic-bezier(.16, 1, .3, 1); }
.hm-beacon { width: 16px; height: 16px; border-radius: 50%; background: var(--border-strong); margin-bottom: 14px; transition: background .6s cubic-bezier(.16, 1, .3, 1), box-shadow .6s cubic-bezier(.16, 1, .3, 1); }
.hm-step.lit .hm-band i { background: var(--accent); box-shadow: 0 0 12px rgba(255, 198, 26, .55); }
.hm-step.lit .hm-band { border-color: var(--accent); }
.hm-step.lit .hm-ledge { background: var(--accent); }
.hm-step.lit .hm-roof b { background: var(--accent); border-color: var(--accent); }
.hm-step.lit .hm-beacon { background: var(--accent); box-shadow: 0 0 18px 4px rgba(255, 198, 26, .6); }
.hm-anim .hm-step:not(.lit) .hm-band i { background: var(--border); box-shadow: none; }
.hm-anim .hm-txt { opacity: .45; transform: translateY(10px); transition: opacity .7s cubic-bezier(.16, 1, .3, 1), transform .7s cubic-bezier(.16, 1, .3, 1); }
.hm-anim .hm-step.lit .hm-txt { opacity: 1; transform: none; }
.hm-step.lit .hm-band i:nth-child(2) { transition-delay: .08s; } .hm-step.lit .hm-band i:nth-child(3) { transition-delay: .16s; } .hm-step.lit .hm-band i:nth-child(4) { transition-delay: .24s; }
/* the six towers */
.hm-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px 48px; margin-top: 32px; }
.hm-tw { display: flex; flex-direction: column; gap: 6px; color: var(--text); text-decoration: none; border-top: 2px solid var(--border-strong); padding-top: 14px; transition: border-color .3s cubic-bezier(.16, 1, .3, 1); }
.hm-tw:hover, .hm-tw:focus-visible { border-top-color: var(--accent); }
.hm-tw strong { font-size: 1.2rem; }
.hm-tag { color: var(--muted); line-height: 1.5; }
.hm-meta { font-size: .9rem; color: var(--muted); }
.hm-prog { font-size: .9rem; color: var(--accent); }
/* ranks */
.hm-ranks { list-style: none; margin: 24px 0; padding: 0; display: flex; flex-wrap: wrap; gap: 12px 40px; }
.hm-ranks li { display: flex; flex-direction: column; color: var(--muted); }
.hm-ranks li b { color: var(--text); font-size: 1.1rem; }
.hm-ranks li.on b { color: var(--accent); }
.hm-you { color: var(--accent) !important; }
@media (max-width: 800px) {
  .hm-hero { grid-template-columns: 1fr; gap: 32px; padding-top: 40px; padding-bottom: 40px; }
  .hm-hero-tower { order: -1; } .hm-hero-tower .tw-svg { max-width: 220px; }
  .hm-grid { grid-template-columns: 1fr; gap: 28px; }
  .hm-step { grid-template-columns: 96px minmax(0, 1fr); gap: 20px; }
  .hm-band, .hm-roof { width: 96px; } .hm-band { padding: 10px 8px; gap: 6px; height: 64px; } .hm-ledge { width: 110px; }
  .hm-sec { padding-top: 48px; }
}
@media (prefers-reduced-motion: reduce) { .hm *, .hm *::before { transition: none !important; } .hm-anim .hm-txt { opacity: 1; transform: none; } }
/* how a tower works: one pinned tower beside the steps; parts light as their step scrolls past */
.hm-how { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 56px; align-items: start; margin-top: 40px; }
.hm-pin { position: sticky; top: 96px; }
.hm-tower { width: 100%; height: auto; display: block; overflow: visible; }
.hm-how .hm-climb { flex-direction: column; margin: 0; gap: 0; }
.hm-how .hm-step { display: block; padding: 0 0 22vh; }
.hm-how .hm-step:last-child { padding-bottom: 8vh; }
.hm-t-wall { fill: #1f190b; stroke: #4a3b18; stroke-width: 1.5; transition: fill .6s cubic-bezier(.16,1,.3,1), stroke .6s; }
.hm-t-win { fill: #0b0904; transition: fill .5s cubic-bezier(.16,1,.3,1); }
.hm-t-ledge, .hm-t-post { fill: #4a3b18; stroke: #4a3b18; stroke-width: 3; transition: fill .5s, stroke .5s; }
.hm-t-board { fill: #1f190b; stroke: #4a3b18; stroke-width: 1.5; transition: fill .5s, stroke .5s; }
.hm-t-beacon { fill: #4a3b18; transition: fill .5s; }
.hm-t-ground { fill: #4a3b18; }
.lit-f12 .hm-t-fl[data-k="f12"] .hm-t-wall, .lit-f34 .hm-t-fl[data-k="f34"] .hm-t-wall, .lit-f5 .hm-t-fl[data-k="f5"] .hm-t-wall { fill: #3a2e10; stroke: var(--accent); }
.lit-f12 .hm-t-fl[data-k="f12"] .hm-t-win, .lit-f34 .hm-t-fl[data-k="f34"] .hm-t-win, .lit-f5 .hm-t-fl[data-k="f5"] .hm-t-win { fill: #ffd84a; }
.hm-t-fl .hm-t-win:nth-child(3) { transition-delay: .08s; } .hm-t-fl .hm-t-win:nth-child(4) { transition-delay: .16s; } .hm-t-fl .hm-t-win:nth-child(5) { transition-delay: .24s; }
.lit-skip .hm-t-ledge { fill: var(--accent); stroke: var(--accent); }
.lit-roof .hm-t-board, .lit-roof .hm-t-post { fill: var(--accent); stroke: var(--accent); }
.lit-cert .hm-t-beacon { fill: #ffe27a; filter: drop-shadow(0 0 8px #ffc61a); }
@media (max-width: 760px) {
  .hm-how { grid-template-columns: 1fr; gap: 20px; }
  .hm-pin { top: 72px; z-index: 2; width: 120px; margin: 0 auto; padding: 8px; background: rgba(13, 11, 6, .85); border-radius: 12px; }
  .hm-how .hm-step { padding-bottom: 14vh; }
}
@media (prefers-reduced-motion: reduce) { .hm-t-wall, .hm-t-win, .hm-t-ledge, .hm-t-post, .hm-t-board, .hm-t-beacon { transition: none; } }