/* /kit-guide — a vertical staircase: each step shifts further right, photo and text alternate, gold path links them. */

.kg-intro{padding:clamp(40px,7vw,96px) 0 clamp(24px,4vw,48px);border-bottom:1px solid var(--line)}
.kg-intro__grid{display:grid;grid-template-columns:1.25fr .75fr;gap:clamp(24px,5vw,72px);align-items:end}
.kg-intro h1{max-width:16ch}
.kg-intro__lead{max-width:62ch;color:var(--muted);font-size:1.125rem}
.kg-note{background:var(--panel);border:1px solid var(--line);border-left:2px solid var(--coral);border-radius:var(--r);padding:22px 24px}
.kg-note p:last-child{margin:0}
.kg-label--coral{color:var(--coral)}

.kg-index{list-style:none;display:flex;flex-wrap:wrap;gap:8px 10px;margin-top:clamp(24px,4vw,40px);margin-bottom:0}
.kg-index li{margin:0}
.kg-index a{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 14px;border:1px solid var(--line-2);border-radius:2px;text-decoration:none;font-size:.95rem}
.kg-index a:hover{border-color:var(--gold)}
.kg-index__n{font-family:var(--font-mono);font-size:.8rem;color:var(--gold);font-variant-numeric:tabular-nums}

/* staircase */
.kg-stair{max-width:calc(var(--wrap) + 2 * var(--pad));margin-inline:auto;padding:clamp(32px,6vw,80px) var(--pad) 0}
.kg-step{--shift:0%;position:relative;scroll-margin-top:calc(var(--hd-h) + 16px)}
.kg-step--1{--shift:0%}   .kg-step--2{--shift:3.2%} .kg-step--3{--shift:6.4%}
.kg-step--4{--shift:9.6%} .kg-step--5{--shift:12.8%} .kg-step--6{--shift:16%}
.kg-step__inner{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(20px,4vw,56px);align-items:start;
  width:84%;margin-left:var(--shift)}
.kg-step--right .kg-step__photo{order:2}
.kg-step--right .kg-step__body{order:1}

.kg-step__photo{margin:0;position:relative}
.kg-step__photo img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;border:1px solid var(--line)}
.kg-step__photo figcaption{margin-top:10px}

.kg-step__body{position:relative;padding-top:6px}
.kg-step__num{position:absolute;top:-.35em;right:0;margin:0;font:600 clamp(4rem,9vw,7.5rem)/1 var(--font-head);color:var(--gold);opacity:.16;font-variant-numeric:tabular-nums;pointer-events:none}
.kg-step__body h2{margin-top:.2em}
.kg-step__lead{font-size:1.125rem;max-width:58ch}
.kg-step__cols{display:grid;grid-template-columns:1fr 1fr;gap:20px 28px;margin-top:1.4em}
.kg-step__cols h3,.kg-needs h3{font-family:var(--font-mono);font-weight:500;font-size:.8rem;letter-spacing:.08em;text-transform:uppercase;color:var(--teal);margin-bottom:.7em}

.kg-list{list-style:none;padding:0;margin:0}
.kg-list li{position:relative;padding-left:20px;margin:0 0 .55em;color:var(--muted);font-size:1rem}
.kg-list li::before{content:"";position:absolute;left:2px;top:.62em;width:6px;height:6px;border-radius:50%;background:var(--gold)}
.kg-list--check li::before{background:none;border:1px solid var(--coral);width:7px;height:7px;transform:rotate(45deg);border-radius:0}

.kg-needs{margin-top:1.4em;padding:18px 20px;background:var(--panel);border:1px solid var(--line);border-radius:var(--r)}
.kg-needs ul{list-style:none;padding:0;margin:0}
.kg-needs li{display:flex;flex-wrap:wrap;justify-content:space-between;gap:2px 16px;padding:9px 0;border-top:1px solid var(--line)}
.kg-needs li:first-child{border-top:0;padding-top:0}
.kg-needs li:last-child{padding-bottom:0}
.kg-needs__meta{font-family:var(--font-mono);font-size:.82rem;color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap}

/* the gold path between steps */
.kg-path{display:block;width:84%;height:clamp(70px,9vw,120px);margin:clamp(12px,2vw,24px) 0 clamp(12px,2vw,24px) calc(var(--shift) + 2%)}

/* closing band */
.kg-end{margin-top:clamp(56px,8vw,112px);padding:clamp(40px,6vw,80px) 0;background:var(--bg-2);border-top:1px solid var(--line)}
.kg-end__grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(20px,4vw,56px);align-items:start}
.kg-end p{max-width:60ch}
.kg-end__actions{display:flex;flex-wrap:wrap;gap:12px;margin:1.4em 0 0}

@media (max-width:1200px){
  .kg-step__cols{grid-template-columns:1fr}
}
@media (max-width:960px){
  .kg-step__inner{width:100%;margin-left:0;grid-template-columns:1fr}
  .kg-step--right .kg-step__photo{order:0}
  .kg-step__photo img{aspect-ratio:16/9}
  .kg-path{width:100%;margin-left:0}
  .kg-intro__grid,.kg-end__grid{grid-template-columns:1fr}
}
@media (max-width:560px){
  .kg-step__cols{grid-template-columns:1fr}
  .kg-step__num{font-size:4rem}
}