/* Template preview pages — themed per creator style via --acc / --acc2 / --bg */
* { margin: 0; padding: 0; box-sizing: border-box; }
body.tmpl { font-family: 'Inter', system-ui, sans-serif; background: var(--bg, #0a0a0a); color: #e8e8e8; line-height: 1.6; -webkit-font-smoothing: antialiased; }
a { color: inherit; }
.tmpl-banner { background: var(--acc); color: #0a0a0a; text-align: center; padding: 9px 16px; font-size: 13px; font-weight: 600; }
.tmpl-banner a { color: #0a0a0a; text-decoration: underline; }
.tmpl-nav { display: flex; justify-content: space-between; align-items: center; padding: 22px 6vw; }
.tmpl-logo { font-family: 'Geist', 'Inter', sans-serif; font-size: 24px; letter-spacing: 3px; color: #fff; }
.tmpl-book { background: var(--acc); color: #0a0a0a; padding: 10px 22px; border-radius: 40px; font-size: 13px; font-weight: 600; text-decoration: none; }
.tmpl-hero { text-align: center; padding: 96px 6vw 104px; background: radial-gradient(120% 90% at 50% 0%, var(--acc2), var(--bg) 66%); }
.tmpl-hero .eyebrow { color: var(--acc); letter-spacing: 4px; text-transform: uppercase; font-size: 12px; }
.tmpl-hero h1 { font-family: 'Geist', 'Inter', sans-serif; font-size: clamp(46px, 9vw, 100px); color: #fff; margin: 18px 0; line-height: 1; letter-spacing: -1px; }
.tmpl-hero p { color: #cfcfcf; font-size: clamp(16px, 2vw, 20px); max-width: 46ch; margin: 0 auto 32px; font-weight: 300; }
.tmpl-cta { display: inline-block; background: var(--acc); color: #0a0a0a; padding: 15px 36px; border-radius: 44px; font-weight: 600; text-decoration: none; letter-spacing: .5px; }
.tmpl-sec { padding: 74px 6vw; max-width: 1120px; margin: 0 auto; }
.tmpl-sec h2 { font-family: 'Geist', 'Inter', sans-serif; font-size: 32px; text-align: center; color: #fff; margin-bottom: 40px; }
.tmpl-gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.tmpl-gallery span { aspect-ratio: 3/4; border-radius: 12px; background: linear-gradient(150deg, var(--acc2), #000); border: 1px solid rgba(255,255,255,0.08); position: relative; overflow: hidden; }
.tmpl-gallery span::after { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 50% 28%, var(--acc), transparent 62%); opacity: .22; }
.tmpl-rates { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.tmpl-rate { border: 1px solid rgba(255,255,255,0.1); border-radius: 16px; padding: 30px; text-align: center; }
.tmpl-rate .rt { color: var(--acc); font-size: 12px; letter-spacing: 2px; text-transform: uppercase; }
.tmpl-rate .rp { font-family: 'Geist', 'Inter', sans-serif; font-size: 40px; color: #fff; margin: 10px 0; }
.tmpl-rate .rd { color: #aaa; font-size: 14px; }
.tmpl-about { text-align: center; max-width: 640px; margin: 0 auto; color: #cfcfcf; font-size: 1.05rem; font-weight: 300; }
.tmpl-foot { text-align: center; padding: 54px 6vw; border-top: 1px solid rgba(255,255,255,0.08); color: #8a8a8a; font-size: 14px; }
.tmpl-foot a { color: var(--acc); }
@media (max-width: 800px) { .tmpl-gallery, .tmpl-rates { grid-template-columns: 1fr 1fr; } }
@media (max-width: 540px) { .tmpl-gallery, .tmpl-rates { grid-template-columns: 1fr; } }