:root{--page-title-display:none;}/* Start custom CSS *//* Teens page only. Everything else comes from the shared pf.css. */

/* Hero: white-to-blue wash with an orange glow and a tall framed photo (as on the original). */
.pf.pf .pf-hero-split { background: radial-gradient(circle at 93% 9%, rgba(224,120,53,.15), transparent 27%), linear-gradient(135deg, #fff 0%, #F4F8FA 100%); }
@media (min-width: 768px) { .pf.pf .pf-hero-split .pf-split { grid-template-columns: .96fr 1.04fr; } }
.pf.pf .teens-hero-img img { height: 530px; object-fit: cover; }
@media (max-width: 767px) { .pf.pf .teens-hero-img img { height: auto; } }

/* Tighter padding in the five narrow "More than lessons" cards. */
.pf.pf .teens-more .pf-card { padding-left: 18px; padding-right: 18px; }

/* Space around the videos in the teen-video and closing sections. */
.pf.pf .teens-cta-video { margin: 30px auto 6px; }
.pf.pf .teens-video-note { margin-top: 22px; }

/* Two price cards side by side, at the original width. */
.pf.pf .teens-prices { max-width: 940px; margin: 0 auto; }

/* Video labels in the three perspective cards. */
.pf.pf .teens-persp .pf-card { padding: 16px; }
body .pf.pf .teens-persp .pf-card p { margin-top: 14px; color: var(--pf-navy); font-size: 13px; font-weight: 700; }

/* Bookstore photo of the book, centred in its white frame. */
.pf.pf .teens-book { max-width: 440px; margin: 0 auto; }

/* Media badge card and caption. */
.pf.pf .teens-trophy { max-width: 980px; margin: 0 auto; }
.pf.pf .teens-trophy-caption { margin-top: 32px; }
.pf.pf .teens-trophy-caption strong { color: var(--pf-orange); font-size: 18px; }

/* Faith options: title then a muted description line. */
.pf.pf .teens-options span { display: inline-block; margin-top: 4px; color: var(--pf-muted); font-family: var(--pf-sans); font-size: 14px; line-height: 1.55; }

/* Space above the closing note in the World section. */
.pf.pf .teens-world-note { margin-top: 30px; }

/* Alvin: teal section, white card, bold sans headline, photo and audio player. */
.pf.pf .teens-alvin { background: #173D54; }
.pf.pf .teens-alvin-card { padding: 48px 50px 44px; border-radius: 34px; background: #fff; color: var(--pf-text); }
.pf.pf .teens-alvin-card .pf-eyebrow { color: var(--pf-orange); }
.pf.pf .teens-alvin-card h2 { margin-bottom: 12px; color: #292929; font-family: var(--pf-sans); font-weight: 800; letter-spacing: -1px; line-height: 1.08; }
.pf.pf .teens-alvin-card h3 { color: #292929; }
.pf.pf .teens-alvin-card .pf-lead, .pf.pf .teens-alvin-card .pf-muted { color: #686868; }
.pf.pf .teens-music { width: 76px; height: 76px; margin: 0 auto 16px; background: #FDEBDD; font-size: 30px; }
.pf.pf .teens-alvin-player { display: grid; grid-template-columns: 255px 1fr; margin: 30px 0 22px; overflow: hidden; border: 1px solid #E4E4E4; border-radius: 20px; background: #F8F8F8; text-align: left; }
.pf.pf .teens-alvin-photo img { width: 100%; height: 100%; object-fit: cover; }
.pf.pf .teens-alvin-audio { padding: 30px 34px; }
.pf.pf .teens-alvin-audio audio { width: 100%; margin: 14px 0; }
.pf.pf .teens-more-to-live { max-width: 900px; margin: 34px auto 0; }
@media (max-width: 767px) {
	.pf.pf .teens-alvin-card { padding: 34px 22px; }
	.pf.pf .teens-alvin-player { grid-template-columns: 1fr; }
	.pf.pf .teens-alvin-audio { padding: 22px; }
}/* End custom CSS */