/* Afterplay's public page (afterplay.html). Uses the site's tokens from css/site.css. */
.ap-head h1{letter-spacing:.02em}
.ap-cta{display:flex; flex-wrap:wrap; gap:.6rem; margin-top:1rem}
.ap-cta .btn--primary{font-size:1.35rem; min-height:3.5rem}   /* the main button, at the same height as the one beside it */
.ap-head > p.ap-sub{margin-top:.35rem; font-family:var(--body); font-weight:400; text-transform:none; font-size:1.05rem; color:#C8C8C8}
.ap-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(16rem,1fr)); gap:.9rem}
.ap-card{background:var(--card,#181818); border:1px solid var(--divider,#2c2c2c); padding:1rem 1.1rem}
.ap-card h3{margin:0 0 .35rem; font-family:var(--display); text-transform:uppercase; letter-spacing:.03em; font-size:1.05rem; color:var(--gold)}
.ap-card p{margin:0; font-size:.95rem; color:#d8d8d8; line-height:1.5}
.ap-lead{font-size:1.05rem; margin:0 0 .8rem}
.ap-muted{font-size:.88rem; color:#b4b4b4; line-height:1.5}
.ap-muted a,.ap-steps a{color:var(--gold)}
.ap-prices{display:grid; grid-template-columns:repeat(auto-fit,minmax(11rem,1fr)); gap:.9rem; margin:0 0 .9rem; max-width:46rem}
.ap-price{background:var(--card,#181818); border:1px solid var(--gold); padding:1rem 1.1rem; text-align:center}
.ap-price small{display:block; font-size:.75rem; text-transform:uppercase; letter-spacing:.08em; color:#b4b4b4}
.ap-price b{display:block; font-family:var(--display); font-size:2.6rem; line-height:1.1; color:var(--white,#f5f5f5)}
.ap-price span{display:block; font-size:.88rem; color:#d0d0d0}
.ap-steps{margin:0 0 1rem; padding-left:1.3rem; display:grid; gap:.5rem; max-width:46rem; line-height:1.5}
.ap-example{background:var(--card,#181818); border:1px solid var(--divider,#2c2c2c); padding:1rem 1.2rem; max-width:62rem}
.ap-ex-head h3{margin:.1rem 0; font-family:var(--display); text-transform:uppercase; font-size:1.5rem}
.ap-ex-head .eyebrow{margin:0}
.ap-ex-line{margin:.8rem 0; font-family:var(--display); text-transform:uppercase; letter-spacing:.02em; font-size:1.05rem; color:var(--gold)}
.ap-stats{display:grid; grid-template-columns:repeat(auto-fill,minmax(9.5rem,1fr)); gap:.4rem; margin:.7rem 0 0}
.ap-stats div{background:rgba(255,255,255,.04); padding:.45rem .6rem}
.ap-stats dt{font-size:.68rem; text-transform:uppercase; letter-spacing:.06em; color:#b4b4b4}
.ap-stats dd{margin:0; font-weight:600; font-variant-numeric:tabular-nums}
.ap-sec{border-top:1px solid var(--divider,#2c2c2c)}
.ap-sec summary{cursor:pointer; padding:.55rem 0; font-family:var(--display); text-transform:uppercase; letter-spacing:.03em}
.ap-sec ul{list-style:none; margin:0 0 .7rem; padding:0; display:grid; gap:.35rem}
.ap-sec li{display:flex; gap:.6rem; align-items:baseline; font-size:.93rem; line-height:1.45; color:#dcdcdc}
.ap-sec li.good{border-left:3px solid var(--win,#7FC98A); padding-left:.5rem}
.ap-sec li.bad{border-left:3px solid var(--loss,#E0705F); padding-left:.5rem}
.ap-t{flex:none; min-width:2.6rem; font-variant-numeric:tabular-nums; color:var(--gold); font-weight:600}
.ap-dot{flex:none; width:.4rem; height:.4rem; margin:0 1.1rem; border-radius:50%; background:#666; align-self:center}

.ap-soon{max-width:46rem}
.ap-soon .ap-cta{margin-top:1.2rem}

.ap-ai{margin-top:1.2rem; padding-top:1rem; border-top:2px solid var(--gold)}
.ap-ai .eyebrow{margin:0}
.ap-ai-sum{margin:0 0 .8rem; line-height:1.55; color:#e0e0e0}