/* community.html: the free Skool community. Stage hero with the one action, the four rooms as a row of printouts,
   the paid tier as the step up on a glass frame. */
.cm-hero h1{max-width:12ch}
.cm-hero .lede{margin-top:28px}
.rooms{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:39px 26px; counter-reset:room}
.room{display:flex; flex-direction:column; min-height:260px; padding-top:30px}
.room .thin-num{font-size:clamp(72px,7vw,112px); color:var(--paper-ink); align-self:flex-start}
.room h3{margin-top:auto; padding-top:39px; font-size:clamp(22px,2vw,27px); font-weight:500; letter-spacing:-.025em; line-height:1.15}
.room:nth-child(2){--pd:.3s} .room:nth-child(3){--pd:.45s} .room:nth-child(4){--pd:.6s}
@media (max-width:1000px){ .rooms{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:560px){ .rooms{grid-template-columns:minmax(0,1fr); gap:30px} .room{min-height:0; display:grid; grid-template-columns:auto 1fr; align-items:end; gap:0 22px} .room .hd{grid-column:1/-1} .room h3{padding-top:0; margin:0 0 6px} .room .thin-num{font-size:76px} }

.step{display:grid; grid-template-columns:minmax(0,1fr) auto; gap:26px 78px; align-items:end; padding:clamp(26px,4vw,52px)}
.step .muted{margin-top:12px; max-width:50ch}
.step .price{font-weight:200; font-size:clamp(64px,7vw,104px); line-height:.85; letter-spacing:-.06em; font-variant-numeric:tabular-nums}
.step .price small{font-size:17px; letter-spacing:0; color:var(--ink-muted); margin-left:12px; font-weight:400}
.step .go{display:inline-block; margin-top:18px; font-size:17px; font-weight:500}
@media (max-width:860px){ .step{grid-template-columns:minmax(0,1fr)} }