/* ============================================================
   Cylocybe — consolidated Grow Kit Guides page.
   Rides on cylocybe-product.css + cylocybe-product-kit.css (the .cylo-product
   design system: .sec/.eye/h2/.marks/.stonenote/.faq/.kit-steps/.spec). This
   file adds only the page-specific bits: hero, the kit selector grid, and the
   reveal-on-click guide panels.
   ============================================================ */

/* hero — shared page-header geometry (tokens in style.css :root) */
.cylo-guides .guides-hero{padding:var(--hero-top) 0 5vh;width:min(100% - 2 * var(--page-gutter),var(--page-max));margin-inline:auto;position:relative}
.cylo-guides .guides-hero__inner{max-width:none}
.cylo-guides .guides-hero .eye{font-size:var(--hero-eye-size);letter-spacing:var(--hero-eye-track);margin-bottom:var(--hero-eye-gap)}
.cylo-guides .guides-hero__h1{font-family:var(--anton);font-weight:400;font-size:var(--hero-h1-size);line-height:var(--hero-h1-line);letter-spacing:var(--hero-h1-track);margin:0 0 var(--hero-h1-gap);color:var(--ink)}
.cylo-guides .guides-hero__lede{font-size:var(--hero-lede-size);color:var(--hero-lede-color);line-height:var(--hero-lede-line);margin:0;max-width:var(--measure)}
.cylo-guides .guides-hero__lede a{color:var(--orange);border-bottom:1px solid var(--orange-soft)}

/* kit selector */
.cylo-guides .gkit-groups{margin-top:2vh}
.cylo-guides .gkit-group{margin-top:2.6rem}
.cylo-guides .gkit-group:first-child{margin-top:1rem}
.cylo-guides .gkit-group__h{font-size:.7rem;letter-spacing:.22em;text-transform:uppercase;font-weight:700;color:var(--orange);margin:0 0 1rem}
.cylo-guides .gkit-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:1rem}
.cylo-guides .gkit-card{display:flex;flex-direction:column;gap:.35rem;text-align:left;cursor:pointer;background:var(--panel);border:1px solid var(--hair);border-radius:5px;padding:1.3rem 1.4rem;font:inherit;transition:border-color .2s,background .2s,transform .2s}
.cylo-guides .gkit-card:hover{border-color:var(--orange-soft);transform:translateY(-3px)}
.cylo-guides .gkit-card[aria-pressed="true"]{border-color:var(--orange);background:rgba(255,154,82,.08)}
.cylo-guides .gkit-card__nm{font-family:var(--display);font-style:italic;font-weight:700;font-size:1.3rem;color:var(--ink)}
.cylo-guides .gkit-card__sum{font-size:.92rem;color:var(--soft);line-height:1.45}
.cylo-guides .gkit-card__meta{font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;font-weight:700;color:var(--mute);margin-top:.3rem}

/* guide panels (revealed on click) */
.cylo-guides .gkit-stage{scroll-margin-top:80px}
.cylo-guides .gkit-prompt{display:flex;align-items:center;gap:.6rem;color:var(--mute);font-size:1.05rem;font-style:italic;padding:2vh 0}
.cylo-guides .gkit-prompt[hidden]{display:none}
.cylo-guides .gkit-prompt__arrow{font-style:normal;color:var(--orange);font-size:1.3rem}
.cylo-guides .gkit-panel{animation:gkitfade .35s ease}
@keyframes gkitfade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.cylo-guides .gkit-panel__h{font-family:var(--anton);font-weight:400;font-size:clamp(2.2rem,5vw,3.6rem);line-height:.98;letter-spacing:-.015em;margin:.4rem 0 1rem}
.cylo-guides .gkit-panel__strip{display:flex;flex-wrap:wrap;gap:1rem 1.8rem;align-items:center;border-top:1px solid var(--hair);border-bottom:1px solid var(--hair);padding:1rem 0;margin:0 0 2rem}
.cylo-guides .gkit-panel__strip span{font-size:.85rem;color:var(--soft)}
.cylo-guides .gkit-panel__strip b{display:block;font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;color:var(--mute);font-weight:700;margin-bottom:.2rem}
.cylo-guides .gkit-panel__buy{margin-left:auto;font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;font-weight:700;color:var(--orange)}
/* the per-kit guide_html reuses .kit-steps/.spec/.stonenote/.marks/.kitbox; give them a little breathing room here */
.cylo-guides .gkit-panel__body > h3{font-family:var(--anton);font-weight:400;font-size:1.6rem;letter-spacing:-.01em;margin:2.4rem 0 .8rem;color:var(--ink)}
.cylo-guides .gkit-panel__body > p{color:var(--soft);font-size:1.08rem;line-height:1.7;max-width:46rem;margin:0 0 1.1rem}
.cylo-guides .gkit-panel__body ul{color:var(--soft);font-size:1.02rem;line-height:1.6;max-width:46rem}

/* ============================================================
   Method steps — the MonoBox "How it works" convention.
   The generated guide_html uses .kit-steps/.kit-step markup, but those
   styles only ship scoped to .cylo-kit (the product pages). On the guides
   page the wrapper is .cylo-guides, so the steps fell back to unstyled,
   cramped blocks. Re-state the canonical step look here, scoped to
   .cylo-guides, byte-for-byte matching the product .kit-step look:
   big orange Anton number, bold Anton step title, grey body, uppercase
   meta, hairline divider between steps, generous spacing. Markup already
   carries the number (.kit-step__n), title (h3), body (p) and meta (p.meta),
   so this is purely presentational. .kitbox / .stonenote / .marks / .spec
   live in the same blobs and are likewise re-stated for parity. */
.cylo-guides .kit-steps{margin:2.6rem 0 1.5rem;counter-reset:kstep}
.cylo-guides .kit-step{display:grid;grid-template-columns:auto 1fr;gap:1.6rem;padding:1.7rem 0;border-bottom:1px solid var(--hair);align-items:start}
.cylo-guides .kit-step:last-child{border-bottom:0}
.cylo-guides .kit-step__n{font-family:var(--anton);font-weight:400;font-size:2.7rem;line-height:.8;color:var(--orange);min-width:2.4rem;font-variant-numeric:tabular-nums}
.cylo-guides .kit-step h3{font-family:var(--anton);font-weight:400;font-size:1.45rem;letter-spacing:-.01em;color:var(--ink);margin:.15rem 0 .55rem}
.cylo-guides .kit-step p{font-size:1.05rem;line-height:1.7;margin:0 0 .6rem;color:var(--soft);max-width:46rem}
.cylo-guides .kit-step p:last-child{margin-bottom:0}
.cylo-guides .kit-step p strong{color:var(--ink);font-weight:600}
.cylo-guides .kit-step .meta{display:inline-block;margin-top:.4rem;font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;font-weight:700;color:var(--mute)}
@media(max-width:560px){
  .cylo-guides .kit-step{grid-template-columns:1fr;gap:.4rem}
  .cylo-guides .kit-step__n{font-size:2.2rem}
}

/* "What is in your kit" boxes + the highlighted notes that share the blob */
.cylo-guides .kitbox{display:grid;grid-template-columns:1fr 1fr;gap:1.2rem;margin:1.6rem 0 2rem}
@media(max-width:760px){.cylo-guides .kitbox{grid-template-columns:1fr}}
.cylo-guides .kitbox__col{background:var(--panel);border:1px solid var(--hair);border-radius:4px;padding:1.6rem 1.5rem}
.cylo-guides .kitbox__h{font-family:var(--display);font-style:italic;font-weight:700;font-size:1.3rem;color:var(--ink);margin:0 0 .8rem}
.cylo-guides .kitbox__col ul{list-style:none;margin:0;padding:0;max-width:none}
.cylo-guides .kitbox__col li{font-size:.96rem;color:var(--soft);line-height:1.5;padding:.5rem 0 .5rem 1.4rem;position:relative;border-bottom:1px solid rgba(255,255,255,.05)}
.cylo-guides .kitbox__col li:last-child{border-bottom:0}
.cylo-guides .kitbox__col li::before{content:"";position:absolute;left:0;top:1.05rem;width:7px;height:7px;border-radius:50%;background:var(--orange)}
.cylo-guides .gkit-panel__body .stonenote{background:rgba(255,154,82,.08);border:1px solid var(--orange-soft);border-radius:4px;padding:1.3rem 1.5rem;margin:1.8rem 0}
.cylo-guides .gkit-panel__body .stonenote b{color:var(--orange)}
.cylo-guides .gkit-panel__body .stonenote p{margin:.5rem 0 0;color:var(--soft);font-size:1rem;line-height:1.6}

.cylo-guides .gkit-panel__back{margin-top:2.5rem}
.cylo-guides .gkit-panel__back a{font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:var(--mute)}
.cylo-guides .gkit-panel__back a:hover{color:var(--orange)}