/* ============================================================
   Cylocybe — shared content/legal page typography.
   Rides on cylocybe-product.css (.cylo-product tokens + .sec). Spacing + type
   scale are deliberately generous to match the homepage's rhythm (the user
   asked for the same breathing room and font sizes as template-cylocybe-home).
   ============================================================ */
.cylo-page{font-family:var(--san)}

/* hero — shared page-header geometry (tokens in style.css :root) */
.cylo-page__hero{padding:var(--hero-top) 0 3vh;width:min(100% - 2 * var(--page-gutter),var(--page-max));margin-inline:auto}
.cylo-page__hero-inner{max-width:none}
.cylo-page__hero .eye{font-size:var(--hero-eye-size);letter-spacing:var(--hero-eye-track);margin-bottom:var(--hero-eye-gap)}
.cylo-page__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-page__lede{font-family:var(--san);font-size:var(--hero-lede-size);color:var(--hero-lede-color);line-height:var(--hero-lede-line);margin:0;max-width:var(--measure)}

/* Body shares the header's container so its left edge lines up with the h1
   (same min(…,--page-max) as .cylo-page__hero). Overrides .cylo-product .sec's
   5vw gutter + .sec__inner's 1180px-centred width — content pages only. */
.cylo-product.cylo-page .sec{padding-inline:0}
.cylo-product.cylo-page .sec__inner.cylo-page__body{width:min(100% - 2 * var(--page-gutter),var(--page-max));max-width:none;margin-inline:auto}

/* long-form body — roomy vertical rhythm */
.cylo-page__body{max-width:50rem;font-family:var(--san);padding:2vh 0 10vh}
.cylo-page__body h2{font-family:var(--anton);font-weight:400;font-size:clamp(1.9rem,4.4vw,3rem);line-height:1.02;letter-spacing:-.01em;color:var(--ink);margin:4.5rem 0 1.4rem}
.cylo-page__body h2:first-child{margin-top:.5rem}
.cylo-page__body h3{font-family:var(--display);font-style:italic;font-weight:700;font-size:clamp(1.35rem,2.4vw,1.6rem);color:var(--ink);margin:3rem 0 .8rem}
.cylo-page__body p{font-size:1.18rem;line-height:1.85;color:var(--soft);margin:0 0 1.5rem}
.cylo-page__body p strong,.cylo-page__body li strong{color:var(--ink);font-weight:600}
.cylo-page__body a{color:var(--orange);border-bottom:1px solid var(--orange-soft)}
.cylo-page__body ul,.cylo-page__body ol{margin:0 0 2rem;padding-left:0;list-style:none}
.cylo-page__body li{position:relative;color:var(--soft)}
/* bulleted lists */
.cylo-page__body ul li{padding:.7rem 0 .7rem 1.7rem;font-size:1.13rem;line-height:1.7;border-bottom:1px solid rgba(255,255,255,.05)}
.cylo-page__body ul li:last-child{border-bottom:0}
.cylo-page__body ul li::before{content:"";position:absolute;left:0;top:1.5rem;width:7px;height:7px;border-radius:50%;background:var(--orange)}
/* numbered procedures rendered as MonoBox-style steps: big orange Anton number,
   optional bold step title (.cylo-step__t), body, optional meta (.cylo-step__m).
   Matches the "How it works" step convention on the product pages. */
.cylo-page__body ol{counter-reset:cylp;margin:2.6rem 0}
.cylo-page__body ol li{counter-increment:cylp;border-top:1px solid var(--hair);padding:1.7rem 0 1.7rem 4.4rem;font-size:1.13rem;line-height:1.72}
.cylo-page__body ol li::before{content:counter(cylp);position:absolute;left:0;top:1.45rem;font-family:var(--anton);font-weight:400;font-size:2.7rem;line-height:.75;color:var(--orange)}
.cylo-page__body .cylo-step__t{display:block;font-family:var(--anton);font-weight:400;font-size:1.45rem;line-height:1.05;letter-spacing:.005em;color:var(--ink);margin:.1rem 0 .55rem}
.cylo-page__body .cylo-step__m{display:block;margin-top:.65rem;font-size:.76rem;letter-spacing:.14em;text-transform:uppercase;color:var(--mute);font-weight:700}

/* plain-English callout */
.cylo-page__body .note{background:rgba(255,154,82,.08);border:1px solid var(--orange-soft);border-left:3px solid var(--orange);border-radius:6px;padding:1.5rem 1.7rem;margin:2.6rem 0}
.cylo-page__body .note p{font-size:1.1rem}
.cylo-page__body .note p:last-child{margin-bottom:0}
.cylo-page__body .note b,.cylo-page__body .note strong{color:var(--orange)}
.cylo-page__body hr{border:0;border-top:1px solid var(--hair);margin:3.5rem 0}
.cylo-page__body pre{background:#0c0c0c;border:1px solid var(--hair);border-left:3px solid var(--orange);border-radius:6px;padding:1.4rem 1.6rem;margin:1.8rem 0;font-family:ui-monospace,Menlo,Consolas,monospace;font-size:.9rem;line-height:1.7;color:var(--soft);white-space:pre-wrap;overflow-wrap:break-word}
.cylo-page__updated{font-size:.85rem;color:var(--mute);font-style:italic;margin-top:3.5rem}

/* password gate (Bonus Ball) styled to match the dark theme */
.cylo-page__body .post-password-form{max-width:32rem;margin:1.5rem 0}
.cylo-page__body .post-password-form label{display:block;color:var(--soft);font-size:1.1rem}
.cylo-page__body .post-password-form input[type=password]{display:block;width:100%;margin:.7rem 0 1.1rem;padding:.9rem 1rem;background:#0c0c0c;border:1px solid var(--hair);border-radius:6px;color:var(--ink);font-size:1.05rem;box-sizing:border-box}
.cylo-page__body .post-password-form input[type=password]:focus{outline:none;border-color:var(--orange)}
.cylo-page__body .post-password-form input[type=submit]{padding:.9rem 1.8rem;background:var(--orange);color:#1a0f06;border:0;border-radius:6px;font-weight:700;font-size:1rem;cursor:pointer;font-family:inherit}
.cylo-page__body .post-password-form input[type=submit]:hover{filter:brightness(1.08)}

/* reviews wall (rebuilt /reviews/) */
.cylo-reviews{display:grid;grid-template-columns:repeat(auto-fill,minmax(15rem,1fr));gap:1.2rem;margin:2.6rem 0}
.cylo-review{background:rgba(255,255,255,.03);border:1px solid var(--hair);border-radius:8px;padding:1.4rem 1.5rem;margin:0}
.cylo-review__stars{color:var(--orange);letter-spacing:2px;font-size:1rem;margin-bottom:.7rem}
.cylo-review blockquote{margin:0 0 1rem;padding:0;border:0}
.cylo-review blockquote p{margin:0 0 .5rem;font-size:1.02rem;line-height:1.6;color:var(--soft)}
.cylo-review blockquote p:last-child{margin-bottom:0}
.cylo-review figcaption{font-size:.85rem;color:var(--mute)}
.cylo-review__author{color:var(--ink);font-weight:600}
.cylo-review__prod a{color:var(--orange)}

@media (max-width:600px){
  .cylo-page__hero{padding:calc(60px + 7vh) 0 2.5vh}
  .cylo-page__body p{font-size:1.1rem}
}