/*
Theme Name:   DiviNav v3
Theme URI:    https://divinav.com/
Description:  Brand-locked child theme of Twenty Twenty-Five for divinav.com — handles the homepage layout. Copy is editable in WP admin; layout and CSS live in code.
Author:       DiviNav
Author URI:   https://divinav.com/
Template:     twentytwentyfive
Version:      0.5.0
Text Domain:  divinav
*/

:root {
    --brand-primary: #3E2C1F;
    --brand-accent:  #E89B3C;
    --brand-surface: #FAF6EE;
    --brand-sage:    #7A8B6E;
    --brand-rule:    #C7CFC1;
    --brand-rule-strong: #7A8B6E;
}

/* ----- Shared base (front + inner pages) ----- */

body.divinav-front,
body.divinav-page {
    margin: 0;
    background: var(--brand-surface);
    color: var(--brand-primary);
    font-family: 'Source Serif 4', Georgia, serif;
    line-height: 1.6;
    font-size: 18px;
}

body.divinav-front a,
body.divinav-page a {
    color: var(--brand-accent);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: border-color 0.2s ease;
}
body.divinav-front a:hover,
body.divinav-page a:hover {
    border-bottom-color: var(--brand-accent);
}

.divinav-front .container,
.divinav-page .container {
    max-width: 720px;
    margin: 0 auto;
    padding: 0 1.5rem;
}

/* ----- Hero ----- */

.divinav-hero {
    text-align: center;
    padding: 2.5rem 1.5rem 4rem;
    background: var(--brand-surface);
}
/* Match the centered section-divider style instead of a full-width border. */
.divinav-hero::after {
    content: "";
    display: block;
    width: 200px;
    height: 1px;
    background: var(--brand-rule);
    margin: 3rem auto 0;
}

.divinav-brand-mark {
    display: block;
    margin: 0 auto 1.25rem;
    width: 180px;
    height: auto;
}

.divinav-brand-line {
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 0.78rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--brand-sage);
    margin: 0 0 2rem;
}

.divinav-hero h1 {
    font-family: 'Source Serif 4', Georgia, serif;
    /* Title is now 28 chars ("The Whole Bible in 365 Days.") so we can go
       back to a hero-scale size and still keep it on one line at desktop. */
    font-size: clamp(2rem, 5vw, 3.2rem);
    font-weight: 400;
    margin: 0 0 0.4rem;
    line-height: 1.1;
    color: var(--brand-primary);
    white-space: nowrap;
}
@media (max-width: 480px) {
    .divinav-hero h1 {
        white-space: normal;
        font-size: 1.9rem;
    }
}

.divinav-hero .hero-tagline {
    font-family: 'Source Serif 4', Georgia, serif;
    font-style: italic;
    font-size: clamp(1.3rem, 2.6vw, 1.7rem);
    color: var(--brand-primary);
    margin: 0 0 1.75rem;
    letter-spacing: 0.02em;
}

.divinav-hero .subhead {
    font-style: italic;
    font-size: 1.15rem;
    color: var(--brand-sage);
    margin: 0 auto 2.5rem;
    max-width: 540px;
    line-height: 1.5;
}

/* ----- Product render (homepage hero) ----- */

.divinav-products {
    display: flex;
    justify-content: center;
    margin: 2.5rem auto;
}

.divinav-product {
    position: relative;
    display: inline-block;
    transition: transform 0.35s ease;
}

.divinav-product img {
    width: 100%;
    max-width: 320px;
    height: auto;
    display: block;
    border-radius: 3px;
    box-shadow:
        0 1px 2px rgba(62, 44, 31, 0.18),
        0 12px 32px rgba(62, 44, 31, 0.20),
        0 4px 12px rgba(62, 44, 31, 0.12);
}

/* Hover-driven arrow markers that sit just outside the image and point at
   the matching section. Visible only when the corresponding feature callout
   below is hovered. Tip slides toward the page edge for a subtle motion cue. */
.divinav-pointer {
    position: absolute;
    width: 0;
    height: 0;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease, transform 0.25s ease;
}

/* Linguistic insight — left arrow at top of page, points right. */
.divinav-pointer[data-region="linguistic"] {
    top: 13%;
    left: -22px;
    border-top:    12px solid transparent;
    border-bottom: 12px solid transparent;
    border-left:   18px solid var(--brand-accent);
    transform: translateX(-8px);
}
/* Scripture body — left arrow midway down, points right. */
.divinav-pointer[data-region="scripture"] {
    top: 60%;
    left: -22px;
    border-top:    12px solid transparent;
    border-bottom: 12px solid transparent;
    border-left:   18px solid var(--brand-accent);
    transform: translateX(-8px);
}
/* Notes column — right arrow midway down, points left. */
.divinav-pointer[data-region="notes"] {
    top: 45%;
    right: -22px;
    border-top:    12px solid transparent;
    border-bottom: 12px solid transparent;
    border-right:  18px solid var(--brand-accent);
    transform: translateX(8px);
}

.divinav-product[data-active="linguistic"] .divinav-pointer[data-region="linguistic"],
.divinav-product[data-active="scripture"]  .divinav-pointer[data-region="scripture"],
.divinav-product[data-active="notes"]      .divinav-pointer[data-region="notes"] {
    opacity: 1;
    transform: translateX(0);
}

/* Mobile — the arrows shrink + sit closer to the image so they don't crowd
   narrow viewports. */
@media (max-width: 520px) {
    .divinav-pointer[data-region="linguistic"],
    .divinav-pointer[data-region="scripture"] {
        left: -14px;
        border-top:    9px solid transparent;
        border-bottom: 9px solid transparent;
        border-left:   12px solid var(--brand-accent);
    }
    .divinav-pointer[data-region="notes"] {
        right: -14px;
        border-top:    9px solid transparent;
        border-bottom: 9px solid transparent;
        border-right:  12px solid var(--brand-accent);
    }
}

@media (max-width: 520px) {
    .divinav-products {
        margin: 2rem auto;
    }
    .divinav-product img {
        max-width: 240px;
    }
}

/* Callouts below the render explaining the visible sections of the page.
   Three items: stack on mobile, 3-up on desktop. */
.divinav-features {
    list-style: none;
    margin: 0 auto 2.5rem;
    padding: 0;
    max-width: 660px;
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.25rem;
    text-align: center;
}
@media (min-width: 640px) {
    .divinav-features {
        /* minmax(0, 1fr) forces columns to share width equally even when a
           cell contains a long unbreakable token (otherwise grid widens the
           column to fit the content's intrinsic min-width). */
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 1.5rem;
    }
}
.divinav-features li {
    margin: 0;
    padding: 0.75rem 0.5rem;
    border-radius: 6px;
    cursor: default;
    transition: background-color 0.2s ease;
}
.divinav-features li[data-highlight]:hover {
    background-color: #fffaf2;
}
.divinav-features .feature-icon {
    display: block;
    font-size: 1.5rem;
    margin: 0 0 0.4rem;
    line-height: 1;
}
.divinav-features strong {
    display: block;
    color: var(--brand-primary);
    font-family: 'Source Serif 4', Georgia, serif;
    font-weight: 600;
    font-size: 1rem;
    margin: 0 0 0.25rem;
    line-height: 1.25;
}
.divinav-features .feature-desc {
    display: block;
    color: var(--brand-sage);
    font-size: 0.92rem;
    line-height: 1.45;
}

/* ----- Signup form ----- */

.divinav-signup {
    max-width: 460px;
    margin: 0 auto;
    background: #fff;
    border: 1px solid var(--brand-rule);
    border-radius: 6px;
    padding: 1.5rem;
    text-align: left;
}

.divinav-signup .signup-headline {
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--brand-sage);
    margin: 0 0 0.5rem;
}

.divinav-signup p {
    margin: 0 0 1rem;
    font-size: 0.95rem;
}

.divinav-signup input[type="email"] {
    width: 100%;
    padding: 0.85rem 1rem;
    border: 1px solid var(--brand-rule);
    background: var(--brand-surface);
    color: var(--brand-primary);
    font-family: inherit;
    font-size: 1rem;
    box-sizing: border-box;
    margin: 0 0 0.75rem;
}
.divinav-signup input[type="email"]:focus {
    outline: 2px solid var(--brand-accent);
    outline-offset: -1px;
}

.divinav-signup button {
    width: 100%;
    padding: 0.85rem 1.25rem;
    background: var(--brand-accent);
    color: #fff;
    border: none;
    cursor: pointer;
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 0.95rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.divinav-signup button:hover { filter: brightness(0.95); }

.divinav-signup .signup-fineprint {
    margin: 0.75rem 0 0;
    font-size: 0.78rem;
    color: var(--brand-sage);
}

.divinav-signup .signup-success {
    background: var(--brand-surface);
    border-left: 3px solid var(--brand-sage);
    padding: 0.85rem 1rem;
    margin: 0;
    font-style: italic;
    color: var(--brand-primary);
}

/* ----- Body content (the_content) ----- */

.divinav-body {
    padding: 4rem 1.5rem;
}

.divinav-body h2 {
    font-family: 'Source Serif 4', Georgia, serif;
    font-size: 1.75rem;
    font-weight: 400;
    margin: 2.5rem 0 0.75rem;
    color: var(--brand-primary);
}

.divinav-body h2:first-child { margin-top: 0; }

.divinav-body h3 {
    font-family: 'Source Serif 4', Georgia, serif;
    font-size: 1.25rem;
    font-weight: 600;
    margin: 2rem 0 0.5rem;
}

.divinav-body p { margin: 0 0 1rem; }

.divinav-body ul, .divinav-body ol {
    margin: 0 0 1rem 1.25rem;
    padding: 0;
}

.divinav-body img { max-width: 100%; height: auto; }

/* Subtle section divider — same treatment site-wide on home + inner pages. */
.divinav-body hr,
.divinav-body .wp-block-separator,
.divinav-page-content hr,
.divinav-page-content .wp-block-separator {
    border: 0;
    height: 1px;
    background: var(--brand-rule);
    width: 100%;
    max-width: 200px;
    margin: 3rem auto;
}

/* Feature list — 'What Makes It Different' grid */
.divinav-body .feature-list {
    list-style: none;
    margin: 1.5rem 0 2.5rem;
    padding: 0;
    display: grid;
    gap: 1.25rem;
}
@media (min-width: 600px) {
    .divinav-body .feature-list {
        grid-template-columns: 1fr 1fr;
        gap: 1.5rem 2rem;
    }
}
.divinav-body .feature-list li {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    margin: 0;
}
.divinav-body .feature-list .feature-icon {
    font-size: 1.5rem;
    flex-shrink: 0;
    width: 2.5rem;
    text-align: center;
    line-height: 1.2;
    padding-top: 0.1rem;
}
.divinav-body .feature-list .feature-text {
    flex: 1;
    font-size: 0.96rem;
    line-height: 1.5;
    color: var(--brand-primary);
}
.divinav-body .feature-list .feature-text strong {
    display: block;
    font-weight: 600;
    margin-bottom: 0.2rem;
    font-size: 1.05rem;
    color: var(--brand-primary);
}

/* WP block compatibility for Gutenberg-edited content */
.divinav-body .wp-block-columns {
    display: grid;
    gap: 1.5rem;
    margin: 2rem 0;
}
@media (min-width: 720px) {
    .divinav-body .wp-block-columns.has-3-columns {
        grid-template-columns: 1fr 1fr 1fr;
    }
    .divinav-body .wp-block-columns.has-2-columns {
        grid-template-columns: 1fr 1fr;
    }
}

.divinav-body .wp-block-column {
    background: #fff;
    border: 1px solid var(--brand-rule);
    border-top: 3px solid var(--brand-accent);
    border-radius: 6px;
    padding: 2rem 1.5rem 1.75rem;
    text-align: center;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.divinav-body .wp-block-column:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(62, 44, 31, 0.08);
}

/* Plan boxes are clickable: wrap their contents in <a class="plan-link">.
   Reset link colour/underline so the box still looks like a card, then add
   a small "See sample ›" CTA at the bottom that brightens on hover. */
.divinav-body .wp-block-column .plan-link {
    display: block;
    color: inherit;
    text-decoration: none;
    border-bottom: 0 !important;
}
.divinav-body .wp-block-column .plan-link:hover {
    border-bottom: 0 !important;
}
.divinav-body .wp-block-column .plan-cta {
    display: inline-block;
    margin-top: 0.85rem;
    color: var(--brand-sage);
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    transition: color 0.2s ease;
}
.divinav-body .wp-block-column:hover .plan-cta {
    color: var(--brand-accent);
}

.divinav-body .wp-block-column .plan-glyph {
    display: inline-block;
    margin: 0 auto 0.5rem;
    width: 80px;
    height: 32px;
}

.divinav-body .wp-block-column h3 {
    font-family: 'Source Serif 4', Georgia, serif;
    font-size: 1.1rem;
    font-weight: 600;
    margin: 0.75rem 0 0.5rem;
    line-height: 1.3;
    color: var(--brand-primary);
}

.divinav-body .wp-block-column p {
    font-size: 0.95rem;
    color: var(--brand-sage);
    font-style: italic;
    margin: 0;
    line-height: 1.5;
}

/* ----- Inner pages (page.php) ----- */

.divinav-page-header {
    background: var(--brand-surface);
    padding: 1.5rem 1.5rem;
}
.divinav-page-header::after {
    content: "";
    display: block;
    width: 200px;
    height: 1px;
    background: var(--brand-rule);
    margin: 1.25rem auto 0;
}

.divinav-page-header-inner {
    max-width: 720px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    flex-wrap: wrap;
}

/* Homepage header has no brand mark (the hero owns the big logo), so center
   the nav rather than letting it float against an empty left side. */
body.divinav-front .divinav-page-header-inner {
    justify-content: center;
}

.divinav-page-brand {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    border-bottom: 0 !important;
}
.divinav-page-brand img {
    display: block;
    height: 54px;
    width: auto;
}

.divinav-page-nav {
    display: flex;
    gap: 1.5rem;
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 0.85rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
.divinav-page-nav a {
    color: var(--brand-sage);
    border-bottom: 0 !important;
    font-weight: 600;
}
.divinav-page-nav a:hover {
    color: var(--brand-accent);
}

/* Hamburger toggle — hidden on desktop, visible at narrow widths. */
.divinav-page-nav-toggle {
    display: none;
    background: transparent;
    border: 0;
    padding: 0.4rem;
    margin: -0.4rem 0;
    color: var(--brand-sage);
    cursor: pointer;
    line-height: 0;
}
.divinav-page-nav-toggle:hover { color: var(--brand-accent); }
.divinav-page-nav-toggle svg { display: block; }

@media (max-width: 600px) {
    .divinav-page-header-inner {
        /* Logo (or empty) on left, hamburger on right. */
        flex-wrap: nowrap;
    }
    body.divinav-front .divinav-page-header-inner {
        /* Homepage has no logo; let the hamburger sit on the right. */
        justify-content: flex-end;
    }
    .divinav-page-nav-toggle {
        display: inline-flex;
    }
    .divinav-page-nav {
        /* Hidden by default; the JS toggle adds .is-open to reveal. The nav
           takes the full width and stacks vertically below the header bar. */
        display: none;
        flex-basis: 100%;
        flex-direction: column;
        gap: 0;
        margin: 1rem -1.5rem -1.5rem;
        padding: 0.5rem 1.5rem;
        border-top: 1px solid var(--brand-rule);
        background: var(--brand-surface);
    }
    .divinav-page-nav.is-open {
        display: flex;
    }
    .divinav-page-nav a {
        padding: 0.85rem 0;
        border-bottom: 1px solid var(--brand-rule) !important;
    }
    .divinav-page-nav a:last-child {
        border-bottom: 0 !important;
    }
}

.divinav-page-body {
    padding: 3rem 1.5rem 4rem;
    background: var(--brand-surface);
}

.divinav-page-inner {
    max-width: 720px;
    margin: 0 auto;
}

@media (max-width: 600px) {
    .divinav-page-body {
        padding: 2rem 1rem 3rem;
    }
}

.divinav-page-title {
    font-family: 'Source Serif 4', Georgia, serif;
    font-size: clamp(2rem, 4.5vw, 2.6rem);
    font-weight: 400;
    line-height: 1.15;
    margin: 0 0 0.5rem;
    color: var(--brand-primary);
    text-align: center;
}
.divinav-page-title::after {
    content: "";
    display: block;
    width: 48px;
    height: 2px;
    background: var(--brand-accent);
    margin: 1rem auto 1.5rem;
}

.divinav-page-content h2 {
    font-family: 'Source Serif 4', Georgia, serif;
    font-size: 1.5rem;
    font-weight: 600;
    margin: 2rem 0 0.75rem;
    color: var(--brand-primary);
}
.divinav-page-content h2:first-child { margin-top: 0; }

.divinav-page-content h3 {
    font-family: 'Source Serif 4', Georgia, serif;
    font-size: 1.2rem;
    font-weight: 600;
    margin: 1.5rem 0 0.5rem;
}

.divinav-page-content p {
    margin: 0 0 1rem;
}

.divinav-page-content ul,
.divinav-page-content ol {
    margin: 0 0 1rem 1.25rem;
    padding: 0;
}

.divinav-page-content img {
    max-width: 100%;
    height: auto;
}

/* Sample funnel card stretches full-width inside the inner column. */
.divinav-page-content .divinav-sample {
    margin-left: 0;
    margin-right: 0;
    max-width: none;
}
.divinav-page-content .divinav-pricing-grid {
    margin-left: 0;
    margin-right: 0;
}


/* ----- Footer ----- */

.divinav-footer {
    background: var(--brand-sage);
    color: #fff;
    padding: 3rem 1.5rem 2.5rem;
    text-align: center;
}
body.divinav-page .divinav-footer .container {
    max-width: 720px;
    padding: 0;
}

.divinav-footer .footer-mark {
    display: block;
    margin: 0 auto 1.25rem;
    width: 32px;
    height: 32px;
}

.divinav-footer .signature {
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 0.85rem;
    line-height: 1.7;
    margin: 0 0 1rem;
    opacity: 0.95;
}

.divinav-footer .signature strong {
    font-weight: 600;
    letter-spacing: 0.05em;
}

.divinav-footer .verse {
    font-family: 'Source Serif 4', Georgia, serif;
    font-style: italic;
    font-size: 0.95rem;
    margin: 1.25rem 0;
    opacity: 0.85;
}

.divinav-footer .credit {
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 0.72rem;
    letter-spacing: 0.05em;
    opacity: 0.7;
    margin: 1rem 0 0;
}

.divinav-footer .legal-links {
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 0.72rem;
    letter-spacing: 0.05em;
    opacity: 0.7;
    margin: 0.4rem 0 0;
}
.divinav-footer .legal-links a {
    color: inherit;
    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
}
.divinav-footer .legal-links a:hover {
    border-bottom-color: #fff;
    opacity: 1;
}

.divinav-footer a {
    color: #fff;
    border-bottom-color: rgba(255, 255, 255, 0.4);
}
.divinav-footer a:hover {
    border-bottom-color: #fff;
}


/* =================================================================== */
/* v3 (2026-05-21+) — Phase A polish + Phase B homepage selectors      */
/* =================================================================== */
/* Adds styling for the selectors introduced by header.php, footer.php,
   page-about.php, page-what-we-believe.php (Phase A), and front-page.php
   v3 rewrite (Phase B). Scoped enough to coexist with the v2 selectors
   above. Phase D polish will refine — this pass aims for structurally
   reviewable, not pixel-perfect. */


/* ----- Footer additions (Phase A) ----- */

.divinav-footer .footer-links {
    font-size: 0.9rem;
    margin: 0.6rem 0 0.3rem;
    letter-spacing: 0.02em;
}
.divinav-footer .footer-links a {
    color: inherit;
    border-bottom: 1px solid rgba(255, 255, 255, 0.4);
}
.divinav-footer .footer-links a:hover {
    border-bottom-color: #fff;
}


/* ----- Shared sign-off (About + Statement of Faith) ----- */

.divinav-page-content .signoff {
    margin-top: 2rem;
    color: var(--brand-rule-strong);
    font-size: 0.95rem;
    line-height: 1.5;
}

/* Centered scripture pull-quote (About page closer). Removes the browser
   default left indent + left-align so the verse reads as a centerpiece. */
.divinav-page-content blockquote.scripture {
    margin: 1.5rem auto;
    padding: 0;
    text-align: center;
    max-width: 38em;
}


/* ----- Founder photo figure (About + Front page) ----- */

.founder-photo {
    margin: 1.5rem 0 2rem;
    text-align: center;
}
.founder-photo img {
    max-width: 100%;
    height: auto;
    border-radius: 6px;
    box-shadow: 0 2px 10px rgba(62, 44, 31, 0.12);
}
.founder-photo figcaption {
    margin-top: 0.6rem;
    font-size: 0.9rem;
    color: var(--brand-rule-strong);
    font-style: italic;
}


/* =================================================================== */
/* v3 Homepage — front-page.php sections                                */
/* =================================================================== */

/* Wider container on the v3 homepage to accommodate three-tile rows. */
.divinav-front .divinav-v3-home .container {
    max-width: 1080px;
}

.divinav-v3-home section {
    padding: 3rem 0;
    border-bottom: 1px solid var(--brand-rule);
}
.divinav-v3-home section:last-of-type {
    border-bottom: none;
}

.divinav-v3-home .section-headline {
    text-align: center;
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--brand-primary);
    margin: 0 0 1.5rem;
    letter-spacing: 0.01em;
}


/* ----- HERO ----- */

.divinav-v3-hero {
    text-align: center;
    padding: 4rem 0 3rem;
}
.divinav-v3-hero .hero-verse {
    margin: 0 0 1.5rem;
    padding: 0;
    border: none;
    font-size: 1.4rem;
    line-height: 1.5;
    color: var(--brand-primary);
}
.divinav-v3-hero .hero-verse p {
    margin: 0 0 0.4rem;
}
.divinav-v3-hero .hero-verse cite {
    display: block;
    font-style: normal;
    font-size: 0.95rem;
    color: var(--brand-rule-strong);
}
.divinav-v3-hero .hero-subline {
    max-width: 36rem;
    margin: 0 auto 2rem;
    font-size: 1.15rem;
    line-height: 1.5;
    color: var(--brand-primary);
}
.divinav-v3-hero .hero-ctas {
    margin: 0 0 2rem;
}
.divinav-v3-hero .hero-badges {
    font-size: 0.85rem;
    color: var(--brand-rule-strong);
    letter-spacing: 0.04em;
    margin: 0;
}


/* ----- CTA buttons (used in hero + section CTAs) -----
 * Selectors are scoped with `body.divinav-front a.cta` etc. so they have
 * higher specificity than the base `body.divinav-front a` link rule (which
 * sets color: var(--brand-accent) and border-bottom on every anchor).
 * Without this, the primary button would render with orange text on its
 * orange background (invisible), and both buttons would carry a phantom
 * underline-border that distorts their effective height. */

body.divinav-front a.cta,
body.divinav-page a.cta {
    display: inline-block;
    padding: 0.7rem 1.4rem;
    margin: 0 0.3rem 0.5rem;
    border-radius: 4px;
    font-family: 'Inter', -apple-system, sans-serif;
    font-size: 1rem;
    font-weight: 600;
    border-bottom: none;
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
    line-height: 1.4;
}
body.divinav-front a.cta-primary,
body.divinav-page a.cta-primary {
    background: var(--brand-accent);
    color: #fff;
    border: 1px solid var(--brand-accent);
}
body.divinav-front a.cta-primary:hover,
body.divinav-page a.cta-primary:hover {
    background: #d68a2c;
    border-color: #d68a2c;
    color: #fff;
}
body.divinav-front a.cta-secondary,
body.divinav-page a.cta-secondary {
    background: transparent;
    color: var(--brand-primary);
    border: 1px solid var(--brand-rule-strong);
}
body.divinav-front a.cta-secondary:hover,
body.divinav-page a.cta-secondary:hover {
    background: var(--brand-rule);
    color: var(--brand-primary);
}


/* ----- WHO IS THIS FOR? Three purpose tiles ----- */

.divinav-v3-purposes .purpose-tile-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    margin-top: 1rem;
}
@media (max-width: 768px) {
    .divinav-v3-purposes .purpose-tile-row {
        grid-template-columns: 1fr;
    }
}
.purpose-tile {
    background: #fff;
    border: 1px solid var(--brand-rule);
    border-radius: 6px;
    padding: 1.5rem 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}
.purpose-tile h3 {
    margin: 0;
    font-size: 1.25rem;
    color: var(--brand-primary);
    text-align: center;
    border-bottom: 1px solid var(--brand-rule);
    padding-bottom: 0.6rem;
}
.purpose-tile .tile-promise {
    font-weight: 600;
    margin: 0;
    line-height: 1.45;
}
.purpose-tile .tile-detail {
    margin: 0;
    color: var(--brand-rule-strong);
    line-height: 1.5;
}
.purpose-tile .tile-price,
.purpose-tile .tile-free-badge {
    margin: 0;
    font-family: 'Inter', sans-serif;
    font-size: 0.9rem;
    font-weight: 600;
    text-align: center;
    color: var(--brand-accent);
    letter-spacing: 0.04em;
}
.purpose-tile .tile-free-badge {
    text-align: center;
    font-size: 1.05rem;
    letter-spacing: 0.18em;
    color: var(--brand-accent);
}
.purpose-tile .tile-cta {
    margin: auto 0 0;
    text-align: center;
    font-weight: 600;
}
.purpose-tile .tile-cta a {
    color: var(--brand-accent);
}
.purpose-tile .tile-fineprint {
    margin: 0;
    text-align: center;
    font-size: 0.8rem;
    color: var(--brand-rule-strong);
    font-style: italic;
}


/* ----- INSIDE THE JOURNAL — sample-page peek ----- */

.divinav-v3-sample-peek {
    text-align: center;
}
.divinav-v3-sample-peek .lede {
    font-size: 1.1rem;
    color: var(--brand-primary);
    margin: 0 0 1.5rem;
}
.divinav-v3-sample-peek .sample-peek-image {
    margin: 1rem auto 1.5rem;
}
.divinav-v3-sample-peek .sample-peek-image img {
    max-width: 100%;
    height: auto;
    box-shadow: 0 4px 18px rgba(62, 44, 31, 0.15);
    border-radius: 4px;
    transform: rotate(-1.5deg);
}
.divinav-v3-sample-peek .cross-product-note {
    font-size: 0.95rem;
    color: var(--brand-rule-strong);
    font-style: italic;
    max-width: 36rem;
    margin: 1rem auto;
}
.divinav-v3-sample-peek .section-cta {
    margin-top: 1.5rem;
}


/* ----- WHAT EARLY READERS ARE SAYING — quote cards ----- */

.divinav-v3-quotes .quote-card-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem;
    margin-top: 1rem;
}
@media (max-width: 768px) {
    .divinav-v3-quotes .quote-card-row {
        grid-template-columns: 1fr;
    }
}
.quote-card {
    background: #fff;
    border: 1px solid var(--brand-rule);
    border-radius: 6px;
    padding: 1.25rem;
}
.quote-card blockquote {
    margin: 0 0 0.75rem;
    padding: 0;
    font-size: 1rem;
    line-height: 1.5;
    color: var(--brand-primary);
}
.quote-card .quote-attrib {
    margin: 0;
    font-size: 0.9rem;
    color: var(--brand-rule-strong);
    font-style: italic;
}
.quote-card.quote-placeholder {
    background: rgba(199, 207, 193, 0.3);
    border-style: dashed;
}
.quote-card.quote-placeholder blockquote {
    color: var(--brand-rule-strong);
}


/* ----- WHY WE BUILT THIS — founder story ----- */

.divinav-v3-founder .founder-story {
    max-width: 38rem;
    margin: 0 auto;
}
.divinav-v3-founder .founder-story p {
    margin: 0 0 1rem;
    line-height: 1.65;
}
.divinav-v3-founder .signoff {
    color: var(--brand-rule-strong);
    margin-top: 1.5rem;
}
.divinav-v3-founder .section-cta {
    text-align: center;
    margin-top: 2rem;
}


/* ----- FINAL CTA ----- */

.divinav-v3-final-cta {
    text-align: center;
    background: var(--brand-rule);
    margin-top: 0;
}
.divinav-v3-final-cta .final-cta-line {
    font-size: 1.3rem;
    font-weight: 600;
    color: var(--brand-primary);
    max-width: 30rem;
    margin: 0 auto 1.5rem;
    line-height: 1.4;
}


/* =================================================================== */
/* v3 audience-aware refinements (2026-05-22)                          */
/* =================================================================== */
/* Hero rebuilt around a large stacked lockup + "Divine Navigation for"
   tagline; no CTA buttons above the fold. Sample-peek section replaced
   by the v2 [divinav_render] feature animation. Founder photo halved.
   Three purpose tiles get descriptive graphic slots. */


/* Hide the small nav-strip lockup on the homepage — the large hero
   lockup is the sole brand mark above the fold. The nav itself stays. */
body.divinav-front .divinav-page-brand {
    display: none;
}
/* With the brand-link hidden, the nav-strip's flex container would
   leave its space-between gap unused; right-align the nav cleanly. */
body.divinav-front .divinav-page-header-inner {
    justify-content: flex-end;
}


/* Remove the divider line below the hero on the homepage. The hero
   flows directly into "What we make" without a horizontal rule. */
body.divinav-front .divinav-v3-hero {
    border-bottom: none;
    padding-top: 3rem;
    padding-bottom: 3rem;
}


/* Hero lockup + tagline */
.divinav-v3-hero .hero-lockup {
    display: block;
    width: 100%;
    max-width: 320px;
    height: auto;
    /* Tight gap below the lockup so the tagline reads as part of the mark. */
    margin: 0 auto 0.4rem;
}
.divinav-v3-hero .hero-tagline {
    font-family: 'Source Serif 4', Georgia, serif;
    font-style: italic;
    font-size: 1.6rem;
    color: var(--brand-sage);
    text-align: center;
    margin: 0 0 2rem;
    letter-spacing: 0.01em;
}


/* Purpose-tile descriptive graphic — a small product visual at the
   top of each tile. Bible Reading uses cc_cover.png; Discipleship and
   Youth Ministry use placeholder graphics until their sample-page
   renderings are produced per user note: "as the sample pages are
   built it is important that the user gets a peek at what they are
   signing up for". */
.purpose-tile .tile-graphic {
    display: block;
    width: 100%;
    height: 140px;
    margin: -0.5rem 0 0.75rem;
    background: #FAF6EE;
    border-radius: 4px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}
.purpose-tile .tile-graphic img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    /* Frame each cover as a book so a cream-background cover (True North,
       Grounded) reads against the cream tile instead of blending in; also
       adds tasteful depth to the green Bible-Reading cover. */
    border: 1px solid var(--brand-rule);
    border-radius: 2px;
    box-shadow: 0 2px 9px rgba(60, 50, 40, 0.13);
}
.purpose-tile .tile-graphic-placeholder {
    color: var(--brand-rule-strong);
    font-family: 'Inter', sans-serif;
    font-size: 0.75rem;
    text-align: center;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    padding: 0 1rem;
}
/* Sage backdrop variant — used by the True North tile so its cream cover
   reads against sage instead of blending into the cream tile bg. Inverts
   the visual relationship the other two tiles have (sage cover on cream)
   so the row feels visually paired rather than asymmetric. */
.purpose-tile .tile-graphic-sage {
    background: var(--brand-sage);
}


/* Smaller founder photo — half-ish the previous size. The image renders
   at 50% of the founder section's container width. */
.divinav-v3-founder .founder-photo img {
    max-width: 50%;
    height: auto;
}


/* The v2 [divinav_render] feature-animation section already has styles
   for .divinav-features and .divinav-products / .divinav-product from
   the legacy CSS above. The v3 wrapper section sets its own padding
   and headline only. */
.divinav-v3-features-anim {
    text-align: center;
}
.divinav-v3-features-anim .features-closing {
    margin: 2rem auto 0;
    max-width: 36rem;
    font-style: italic;
    color: var(--brand-rule-strong);
    font-size: 1.05rem;
}



/* =================================================================== */
/* Purpose pages — /bible-reading/  /discipleship/  /youth-ministry/   */
/* =================================================================== */

/* Wider container to fit 3-card rows (same as v3 homepage). */
.divinav-page .divinav-purpose-page .container {
    max-width: 1080px;
}

/* ----- Page header (matches About/WWB chrome) ----- */
.divinav-purpose-page .purpose-header {
    text-align: center;
    padding: 3rem 0 2rem;
}
/* .divinav-page-title already has the amber 48px rule under it; we
   only need to size the lede that sits beneath. */
.divinav-purpose-page .purpose-lede {
    font-style: italic;
    font-size: 1.15rem;
    color: var(--brand-sage);
    margin: 0 auto;
    max-width: 56ch;
    line-height: 1.5;
}
.divinav-purpose-page .purpose-lede-accent em {
    color: var(--brand-accent);
    font-style: italic;
    font-size: 1.25rem;
}

/* ----- Section rhythm (matches v3 homepage) ----- */
.divinav-purpose-page .purpose-section {
    padding: 3rem 0;
    border-bottom: 1px solid var(--brand-rule);
    text-align: center;
}
.divinav-purpose-page .purpose-section:last-of-type {
    border-bottom: none;
}
.divinav-purpose-page .section-headline {
    text-align: center;
    font-family: 'Source Serif 4', Georgia, serif;
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--brand-primary);
    margin: 0 0 1.5rem;
    letter-spacing: 0.01em;
}
.divinav-purpose-page .subsection-label {
    font-family: 'Source Serif 4', Georgia, serif;
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--brand-primary);
    margin: 1.5rem 0 0.75rem;
}

/* ----- Plan / door / license cards: all use the same .purpose-tile
   pattern as homepage tiles (white bg, sage border, rounded). ----- */
.divinav-purpose-page .plan-card-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    margin: 1.5rem auto 0;
    max-width: 900px;
}
@media (max-width: 768px) {
    .divinav-purpose-page .plan-card-row { grid-template-columns: 1fr; max-width: 360px; }
}
.divinav-purpose-page .plan-card {
    background: #fff;
    border: 1px solid var(--brand-rule);
    border-top: 3px solid var(--brand-accent);
    border-radius: 6px;
    padding: 2rem 1.5rem 1.75rem;
    text-align: center;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.divinav-purpose-page .plan-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(62, 44, 31, 0.08);
}
/* Whole-card link wrapper — no underline, inherits color, removes the
   global anchor border-bottom so the card chrome reads as the affordance. */
.divinav-purpose-page .plan-card .plan-link {
    display: block;
    color: inherit;
    text-decoration: none;
    border-bottom: 0 !important;
}
.divinav-purpose-page .plan-card .plan-link:hover {
    border-bottom: 0 !important;
}
.divinav-purpose-page .plan-card .plan-glyph {
    display: inline-block;
    margin: 0 auto 0.5rem;
    width: 80px;
    height: 32px;
}
.divinav-purpose-page .plan-card h3 {
    font-family: 'Source Serif 4', Georgia, serif;
    font-size: 1.1rem;
    font-weight: 600;
    margin: 0.75rem 0 0.5rem;
    line-height: 1.3;
    color: var(--brand-primary);
    border: 0;
    padding: 0;
}
.divinav-purpose-page .plan-card .plan-pitch {
    font-size: 0.95rem;
    color: var(--brand-sage);
    font-style: italic;
    margin: 0;
    line-height: 1.5;
}
.divinav-purpose-page .plan-card .plan-cta {
    display: inline-block;
    margin-top: 0.85rem;
    color: var(--brand-sage);
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    transition: color 0.2s ease;
}
.divinav-purpose-page .plan-card:hover .plan-cta {
    color: var(--brand-accent);
}
/* Reserved for sample-peek / other purpose-page contexts that still use the
   .plan-best-for and .plan-cadence sub-labels — kept so older usages don't break. */
.divinav-purpose-page .plan-best-for {
    margin: auto 0 0;
    color: var(--brand-rule-strong);
    font-size: 0.95rem;
}
.divinav-purpose-page .plan-cadence {
    margin: 0;
    color: var(--brand-rule-strong);
    font-size: 0.9rem;
}

/* ----- What Makes It Different (icon trio over the journal preview) -----
   On /bible-reading/. Mirrors the live homepage's <ul class="divinav-features">
   treatment so a /bible-reading/ visitor sees the three substance benefits
   (audio · word studies · reflection space) before the journal page render. */
.divinav-purpose-page .divinav-features {
    list-style: none;
    padding: 0;
    margin: 1.5rem auto;
    max-width: 820px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
}
.divinav-purpose-page .divinav-features li {
    text-align: center;
}
.divinav-purpose-page .divinav-features .feature-icon {
    display: block;
    font-size: 1.55rem;
    margin-bottom: 0.45rem;
}
.divinav-purpose-page .divinav-features strong {
    display: block;
    color: var(--brand-primary);
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.3;
    margin-bottom: 0.4rem;
}
.divinav-purpose-page .divinav-features .feature-desc {
    display: block;
    color: var(--brand-sage);
    font-size: 0.92rem;
    line-height: 1.55;
}
@media (max-width: 640px) {
    .divinav-purpose-page .divinav-features {
        grid-template-columns: 1fr;
        gap: 1.25rem;
        max-width: 360px;
    }
}

/* ----- "Every product we publish is built with this kind of care" -----
   Front-page section. Body lede + a 3-image content trio showing real
   interior pages from Bible Reading, Middle School, and High School. Sized
   so the three portrait pages read as a unified set, with line labels
   underneath. (Not scoped to .divinav-purpose-page because this lives on
   the homepage, not a purpose page.) */
.divinav-v3-every-product .container { max-width: 1080px; }
.divinav-v3-every-product .every-product-lede {
    max-width: 62ch;
    margin: 1rem auto 1.5rem;
    text-align: center;
    font-size: 1.05rem;
    line-height: 1.6;
    color: var(--brand-primary);
}
.divinav-v3-every-product .content-trio {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.75rem;
    max-width: 960px;
    margin: 1.5rem auto 0;
    align-items: start;
}
.divinav-v3-every-product .content-trio-item {
    margin: 0;
    text-align: center;
}
.divinav-v3-every-product .content-trio-item img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 4px;
    border: 1px solid var(--brand-rule);
    box-shadow: 0 8px 24px rgba(62, 44, 31, 0.10);
}
.divinav-v3-every-product .content-trio-item figcaption {
    margin: 0.85rem 0 0;
    color: var(--brand-sage);
    font-family: 'Inter', sans-serif;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}
@media (max-width: 768px) {
    .divinav-v3-every-product .content-trio {
        grid-template-columns: 1fr;
        max-width: 360px;
        gap: 1.5rem;
    }
}

/* ----- Sample peek ----- */
.divinav-purpose-page .sample-peek-figure {
    margin: 1rem auto;
    max-width: 320px;
    transform: rotate(-2deg);
    transition: transform 0.4s ease;
}
.divinav-purpose-page .sample-peek-figure:hover { transform: rotate(0); }
.divinav-purpose-page .sample-peek-figure img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 3px;
    box-shadow: 0 12px 32px rgba(62,44,31,0.18), 0 4px 12px rgba(62,44,31,0.12);
}
.divinav-purpose-page .sample-peek-caption {
    max-width: 56ch;
    margin: 1.75rem auto 0;
    line-height: 1.55;
}
/* Placeholder variant (discipleship) */
.divinav-purpose-page .sample-peek-placeholder-box {
    max-width: 320px;
    margin: 1rem auto;
    aspect-ratio: 400 / 518;
    background: rgba(199, 207, 193, 0.15);
    border: 1px dashed var(--brand-rule-strong);
    border-radius: 3px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    text-align: center;
}
.divinav-purpose-page .placeholder-label {
    font-family: 'Inter', sans-serif;
    font-size: 0.78rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--brand-rule-strong);
    margin: 0 0 0.75rem;
}
.divinav-purpose-page .placeholder-text {
    font-style: italic;
    color: var(--brand-rule-strong);
    margin: 0;
    line-height: 1.5;
}

/* ----- Conversion CTA: emphasis section with sage tint, like homepage
   .divinav-v3-final-cta. ----- */
.divinav-purpose-page .conversion-cta {
    background: var(--brand-rule);
}
.divinav-purpose-page .conversion-cta .section-headline {
    font-size: 1.6rem;
    max-width: 32rem;
    margin-left: auto;
    margin-right: auto;
}
.divinav-purpose-page .cta-button-wrap {
    margin: 1rem 0 0;
}
.divinav-purpose-page .cta-button-pair {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
}

/* ----- Pricing recap ----- */
.divinav-purpose-page .pricing-tier-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
    max-width: 600px;
    margin: 1rem auto 1.5rem;
    align-items: end;
}
@media (max-width: 600px) {
    .divinav-purpose-page .pricing-tier-row { grid-template-columns: 1fr; gap: 1.5rem; }
}
.divinav-purpose-page .pricing-tier {
    text-align: center;
    border-left: 1px solid var(--brand-rule);
    padding: 0 1rem;
}
.divinav-purpose-page .pricing-tier:first-child { border-left: 0; }
@media (max-width: 600px) {
    .divinav-purpose-page .pricing-tier { border-left: 0; }
}
.divinav-purpose-page .tier-label {
    margin: 0 0 0.4rem;
    color: var(--brand-rule-strong);
}
.divinav-purpose-page .tier-price {
    margin: 0;
    font-family: 'Source Serif 4', Georgia, serif;
    font-size: 2.25rem;
    color: var(--brand-primary);
    line-height: 1;
}
.divinav-purpose-page .tier-period {
    margin: 0.4rem 0 0;
    color: var(--brand-rule-strong);
    font-size: 0.95rem;
}
.divinav-purpose-page .pricing-link {
    margin: 1rem 0 0;
}
.divinav-purpose-page .pricing-link a {
    color: var(--brand-accent);
    font-style: italic;
}

/* ----- Beta quotes: reuse homepage .quote-card pattern, just provide a
   wrapper grid so the cards stack in 1 or 2 columns based on count. ----- */
.divinav-purpose-page .beta-quotes .quote-card-row {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.25rem;
    max-width: 880px;
    margin: 1rem auto 0;
    align-items: start; /* don't stretch a short quote to match a long one */
}
@media (max-width: 768px) {
    .divinav-purpose-page .beta-quotes .quote-card-row { grid-template-columns: 1fr; }
}
.divinav-purpose-page .quote-card p {
    margin: 0 0 0.75rem;
    font-size: 1rem;
    line-height: 1.55;
    color: var(--brand-primary);
}
.divinav-purpose-page .quote-card cite {
    font-family: 'Inter', sans-serif;
    font-size: 0.8rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--brand-rule-strong);
    font-style: normal;
}

/* ----- FAQ accordion (native <details>) ----- */
.divinav-purpose-page .faq-accordion {
    max-width: 720px;
    margin: 0 auto;
}
.divinav-purpose-page .faq-item {
    border-top: 1px solid var(--brand-rule);
    padding: 0;
    text-align: left;
}
.divinav-purpose-page .faq-item:last-of-type {
    border-bottom: 1px solid var(--brand-rule);
}
.divinav-purpose-page .faq-item summary {
    cursor: pointer;
    padding: 1rem 0;
    font-size: 1.05rem;
    color: var(--brand-primary);
    list-style: none;
    display: flex;
    align-items: baseline;
    gap: 0.6rem;
}
.divinav-purpose-page .faq-item summary::-webkit-details-marker { display: none; }
.divinav-purpose-page .faq-item summary::before {
    content: "+";
    color: var(--brand-accent);
    font-weight: 400;
    font-size: 1.1em;
    transition: transform 0.2s ease;
    display: inline-block;
}
.divinav-purpose-page .faq-item[open] summary::before { transform: rotate(45deg); }
.divinav-purpose-page .faq-item p {
    margin: 0 0 1rem 1.6rem;
    line-height: 1.6;
    color: var(--brand-primary);
}

/* ----- Discipleship: Rick framing + lesson outline + email gate
       + For Small Groups ----- */
.divinav-purpose-page .rick-body {
    max-width: 60ch;
    margin: 0 auto;
    text-align: left;
}
.divinav-purpose-page .rick-body p {
    margin: 0 0 1rem;
    line-height: 1.6;
}
.divinav-purpose-page .rick-link {
    margin-top: 1.5rem;
    text-align: center;
}
.divinav-purpose-page .rick-link a {
    color: var(--brand-accent);
    font-weight: 600;
}

/* Rick video mini-players — self-hosted hls.js streams the recordings from
   Cru's Scene7 CDN (HLS). Compact, captioned, responsive (two-up on desktop,
   stacked on mobile). */
.divinav-purpose-page .rick-listen {
    max-width: 60ch;
    margin: 1.75rem auto 0;
    text-align: left;
}
.divinav-purpose-page .rick-listen-lead {
    margin: 0 0 0.9rem;
    line-height: 1.6;
}
.divinav-purpose-page .rick-listen-players {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
}
.divinav-purpose-page .rick-player {
    margin: 0;
}
.divinav-purpose-page .rick-video {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    background: #000;
    border: 1px solid var(--brand-rule);
    border-radius: 6px;
    box-shadow: 0 2px 10px rgba(62, 44, 31, 0.08);
}
.divinav-purpose-page .rick-player-cap {
    margin-top: 0.5rem;
    font-weight: 700;
    font-size: 0.98rem;
    color: var(--brand-primary);
}
.divinav-purpose-page .rick-player-cap span {
    font-weight: 400;
    color: var(--brand-sage);
}
.divinav-purpose-page .rick-listen-credit {
    margin: 0.75rem 0 0;
    font-size: 0.82rem;
    color: var(--brand-sage);
}
.divinav-purpose-page .rick-listen-credit a {
    color: var(--brand-accent);
}
@media (max-width: 560px) {
    .divinav-purpose-page .rick-listen-players {
        grid-template-columns: 1fr;
    }
}

/* ============================================================
   HOUSE STANDARD — definition list (.lesson-list)
   The canonical list style across the WHOLE site for any list whose
   items are a name + a short description: amber numbered marker, bold
   serif title, italic muted blurb on its own line, hairline rule
   between rows. Deliberately GLOBAL (not scoped to .divinav-purpose-page)
   so /about/, the purpose pages, and the homepage all share one look.
   Markup:
     <ol class="lesson-list">
       <li><span class="lesson-title">Name
             <span class="lesson-count">(qualifier)</span></span>
           <span class="lesson-blurb">Description.</span></li>
     </ol>
   NOTE: this is for name+description lists only. Short, order-neutral
   checklists (no description) stay plain bullet/grid lists — numbering
   and a blurb line don't apply to them.
   ============================================================ */
.lesson-list {
    list-style: none;
    counter-reset: lesson;
    padding: 0;
    margin: 0 auto;
    max-width: 60ch;
    text-align: left;
}
.lesson-list li {
    counter-increment: lesson;
    padding: 0.75rem 0 0.75rem 2.5rem;
    position: relative;
    border-bottom: 1px solid var(--brand-rule);
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1rem;
    align-items: baseline;
}
.lesson-list li::before {
    content: counter(lesson);
    position: absolute;
    left: 0;
    top: 0.75rem;
    font-family: 'Source Serif 4', Georgia, serif;
    font-size: 1rem;
    color: var(--brand-accent);
    font-weight: 600;
    min-width: 1.8rem;
    text-align: right;
    padding-right: 0.6rem;
}
.lesson-title { color: var(--brand-primary); }
/* flex-basis:100% forces the blurb onto its own line even when it's short
   (the discipleship list got the same effect only because every blurb was
   long enough to wrap; MS/HS blurbs like "Why and how" are not). */
.lesson-blurb { color: var(--brand-rule-strong); font-style: italic; flex-basis: 100%; }
/* Muted, roman parenthetical inside a lesson title — e.g. "(6 lessons)". */
.lesson-title .lesson-count { color: var(--brand-rule-strong); font-size: 0.88rem; font-style: normal; }

/* Empty-state shown until the 12-lesson outline content lands (B2). */
.lesson-list-pending {
    max-width: 56ch;
    margin: 0 auto;
    text-align: center;
    color: var(--brand-rule-strong);
    line-height: 1.6;
}

.divinav-purpose-page .email-gate-form {
    display: flex;
    gap: 0.5rem;
    max-width: 560px;
    margin: 1rem auto 0;
    flex-wrap: wrap;
    justify-content: center;
}
.divinav-purpose-page .email-gate-form input[type="email"] {
    flex: 1 1 240px;
    padding: 0.85rem 1rem;
    font-size: 1rem;
    font-family: inherit;
    border: 1px solid var(--brand-rule);
    border-radius: 3px;
    background: #fff;
    color: var(--brand-primary);
}
.divinav-purpose-page .email-gate-form button {
    font-family: 'Inter', sans-serif;
    font-size: 0.78rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    padding: 0.85rem 1.4rem;
    cursor: pointer;
    background: var(--brand-accent);
    color: #fff;
    border: 1px solid var(--brand-accent);
    border-radius: 3px;
    font-weight: 600;
}
.divinav-purpose-page .email-gate-form button:hover {
    background: #d68a2c;
    border-color: #d68a2c;
}
.divinav-purpose-page .email-gate-fineprint {
    margin: 1.25rem auto 0;
    max-width: 56ch;
    color: var(--brand-rule-strong);
    font-size: 0.95rem;
}
.screen-reader-text {
    position: absolute !important;
    width: 1px; height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
}

.divinav-purpose-page .small-groups-promise {
    font-size: 1.15rem;
    color: var(--brand-primary);
    margin: 0 0 1rem;
    line-height: 1.5;
}
.divinav-purpose-page .small-groups-credit {
    margin: 0;
    color: var(--brand-rule-strong);
}

/* ----- Youth Ministry: two-door split ----- */
.divinav-purpose-page .two-door-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem;
    max-width: 720px;
    margin: 1rem auto 0;
}
@media (max-width: 600px) {
    .divinav-purpose-page .two-door-row { grid-template-columns: 1fr; }
}
.divinav-purpose-page .door-card {
    background: #fff;
    border: 1px solid var(--brand-rule);
    border-radius: 6px;
    padding: 1.75rem 1.5rem;
    text-align: center;
    text-decoration: none !important;
    transition: border-color 0.2s ease, transform 0.2s ease;
    display: block;
    border-bottom: 1px solid var(--brand-rule);
}
.divinav-purpose-page .door-card:hover {
    border-color: var(--brand-accent);
    transform: translateY(-2px);
}
.divinav-purpose-page .door-tag {
    font-family: 'Inter', sans-serif;
    font-size: 0.72rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--brand-rule-strong);
    margin: 0 0 0.75rem;
}
.divinav-purpose-page .door-card h3 {
    font-family: 'Source Serif 4', Georgia, serif;
    font-size: 1.3rem;
    color: var(--brand-primary);
    margin: 0 0 0.75rem;
    font-weight: 500;
    padding-bottom: 0.6rem;
    border-bottom: 1px solid var(--brand-rule);
}
.divinav-purpose-page .door-promise {
    color: var(--brand-rule-strong);
    margin: 0 0 1.25rem;
}
.divinav-purpose-page .door-cta {
    color: var(--brand-accent);
    font-weight: 600;
    margin: 0;
}

/* ----- Youth Ministry: audience sections ----- */
.divinav-purpose-page .audience-section { scroll-margin-top: 80px; }
.divinav-purpose-page .audience-pull-quote {
    max-width: 60ch;
    margin: 0 auto 2rem;
    padding: 0;
    border: 0;
}
.divinav-purpose-page .audience-pull-quote p {
    font-size: 1.15rem;
    color: var(--brand-primary);
    line-height: 1.5;
    margin: 0;
    text-align: center;
}
.divinav-purpose-page .audience-trust {
    color: var(--brand-rule-strong);
    margin: 1.5rem auto;
    max-width: 56ch;
}
.divinav-purpose-page .whats-inside {
    max-width: 60ch;
    margin: 1rem auto 1.5rem;
    text-align: left;
}
.divinav-purpose-page .whats-inside .subsection-label {
    text-align: center;
}
.divinav-purpose-page .whats-inside-intro {
    margin: 0 0 1rem;
    line-height: 1.6;
}
/* Single column, stacked items. Descriptions vary in length, so a 2-col grid
   left ragged, misaligned rows; one column keeps every bullet on the same left
   edge and reads cleanly top to bottom. */
.divinav-purpose-page .mini-series-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}
.divinav-purpose-page .mini-series-list li {
    padding-left: 1.25rem;
    position: relative;
    line-height: 1.45;
}
.divinav-purpose-page .mini-series-list li::before {
    content: "•";
    position: absolute;
    left: 0;
    top: 0.05em;
    color: var(--brand-accent);
}

/* ----- Youth Ministry: leaders sample row ----- */
.divinav-purpose-page .leaders-sample-row {
    display: grid;
    grid-template-columns: 300px 1fr;
    gap: 2rem;
    max-width: 880px;
    margin: 1rem auto 2rem;
    align-items: start;
    text-align: left;
}
@media (max-width: 720px) {
    .divinav-purpose-page .leaders-sample-row { grid-template-columns: 1fr; }
}
.divinav-purpose-page .leaders-sample-figure {
    margin: 0;
    transform: rotate(-2deg);
}
.divinav-purpose-page .leaders-sample-figure img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 3px;
    box-shadow: 0 12px 32px rgba(62,44,31,0.18), 0 4px 12px rgba(62,44,31,0.12);
}
.divinav-purpose-page .leaders-sample-figure figcaption {
    text-align: center;
    margin-top: 0.75rem;
    font-style: italic;
    color: var(--brand-rule-strong);
    font-size: 0.9rem;
}
.divinav-purpose-page .leaders-sample-list ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
.divinav-purpose-page .leaders-sample-list li {
    padding: 0.4rem 0 0.4rem 1.2rem;
    position: relative;
    line-height: 1.5;
}
.divinav-purpose-page .leaders-sample-list li::before {
    content: "•";
    position: absolute;
    left: 0;
    color: var(--brand-accent);
}

/* ----- Youth Ministry: what's included grid ----- */
.divinav-purpose-page .leaders-included {
    max-width: 720px;
    margin: 1.5rem auto;
    text-align: left;
}
.divinav-purpose-page .leaders-included .subsection-label {
    text-align: center;
}
.divinav-purpose-page .leaders-included-grid {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.4rem 1.5rem;
}
@media (max-width: 600px) {
    .divinav-purpose-page .leaders-included-grid { grid-template-columns: 1fr; }
}
.divinav-purpose-page .leaders-included-grid li::before {
    content: "•";
    color: var(--brand-accent);
    margin-right: 0.4rem;
}

/* ----- Youth Ministry: license tiers ----- */
.divinav-purpose-page .license-tiers { max-width: 760px; margin: 1.5rem auto; }
.divinav-purpose-page .license-tiers .subsection-label { text-align: center; }
.divinav-purpose-page .license-tier-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
}
@media (max-width: 600px) {
    .divinav-purpose-page .license-tier-row { grid-template-columns: 1fr; }
}
.divinav-purpose-page .license-tier {
    background: #fff;
    border: 1px solid var(--brand-rule);
    border-radius: 6px;
    padding: 1.5rem 1rem;
    text-align: center;
}
.divinav-purpose-page .license-tier-tag {
    font-family: 'Inter', sans-serif;
    font-size: 0.72rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--brand-accent);
    margin: 0 0 0.75rem;
}
.divinav-purpose-page .license-tier-price {
    font-family: 'Source Serif 4', Georgia, serif;
    font-size: 1.9rem;
    color: var(--brand-primary);
    margin: 0 0 0.4rem;
    line-height: 1;
}
.divinav-purpose-page .license-tier-price-from { font-size: 1.4rem; }
/* List price (pre-launch) shown beneath the launch price — strike-through,
   smaller + dimmer so it reads as the savings comparison, not the offer. */
.divinav-purpose-page .license-tier-list {
    margin: -0.2rem 0 0.5rem;
    color: var(--brand-rule-strong);
    font-size: 0.85rem;
    text-decoration: line-through;
    text-decoration-color: var(--brand-rule-strong);
    text-decoration-thickness: 1px;
    opacity: 0.75;
}
.divinav-purpose-page .license-tier-scope {
    margin: 0;
    color: var(--brand-rule-strong);
    font-size: 0.9rem;
}
/* Range / breakdown note under the tier-row — explains product variation
   without cluttering the cards. */
.divinav-purpose-page .license-tier-range {
    max-width: 62ch;
    margin: 0.75rem auto 0;
    text-align: center;
    color: var(--brand-primary);
    font-size: 0.9rem;
    opacity: 0.85;
}
.divinav-purpose-page .license-tier-launch {
    margin: 1rem auto 0;
    color: var(--brand-accent);
    font-size: 0.95rem;
}
/* Bundle / charter line under the tier cards — readable note, CTA link stands out. */
.divinav-purpose-page .license-tier-bundle {
    max-width: 62ch;
    margin: 1rem auto 0;
    text-align: center;
    color: var(--brand-primary);
    font-size: 0.98rem;
}
/* Inline qualifier inside a subsection-label (e.g. "— per program"). */
.divinav-purpose-page .subsection-note {
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-size: 0.8rem;
    letter-spacing: normal;
    text-transform: none;
    color: var(--brand-rule-strong);
}
/* High School clusters: Mind / Body / Practice / World eyebrow above each list. */
.divinav-purpose-page .cluster-label {
    font-family: 'Inter', sans-serif;
    font-size: 0.72rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--brand-accent);
    margin: 1.25rem 0 0.4rem;
}
/* Muted lesson-count / "when to run it" tail on list items. */
.divinav-purpose-page .lesson-count {
    color: var(--brand-rule-strong);
    font-size: 0.88rem;
}

/* ----- Youth Ministry: leaders trust ----- */
.divinav-purpose-page .leaders-trust {
    max-width: 60ch;
    margin: 1.5rem auto;
}
.divinav-purpose-page .leaders-trust p {
    margin: 0.4rem 0;
    color: var(--brand-primary);
}

/* ----- Youth Ministry: cross-link footer ----- */
.divinav-purpose-page .cross-link-footer {
    background: rgba(199, 207, 193, 0.25);
}
.divinav-purpose-page .cross-link-intro {
    margin: 0 0 1rem;
    color: var(--brand-rule-strong);
    font-size: 1.05rem;
}
.divinav-purpose-page .cross-link-pair {
    display: flex;
    gap: 3rem;
    justify-content: center;
    flex-wrap: wrap;
    margin: 0;
}
.divinav-purpose-page .cross-link-pair a {
    color: var(--brand-accent);
    font-weight: 600;
}

/* ----- Blog (single posts + /blog/ index) ----- */

.divinav-post-eyebrow {
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.78rem;
    font-family: 'Inter', sans-serif;
    margin: 0 0 0.5rem;
    text-align: center;
}
.divinav-post-eyebrow a {
    color: var(--brand-sage);
    border-bottom: none;
}

.divinav-post-meta {
    font-family: 'Inter', sans-serif;
    font-size: 0.85rem;
    color: var(--brand-rule-strong);
    margin: 0 0 1.5rem;
}
.divinav-post .divinav-post-meta {
    text-align: center;
    margin-top: -0.5rem;
}

.divinav-post-cta {
    margin: 2.5rem 0 1.5rem;
    padding: 1.5rem;
    background: var(--brand-surface);
    border: 1px solid var(--brand-rule);
    border-radius: 8px;
    text-align: center;
}
.divinav-post-cta-lead {
    margin: 0 0 1rem;
    font-size: 1.05rem;
}
.divinav-post-cta-btn {
    display: inline-block;
    background: var(--brand-accent);
    color: #fff !important;
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    padding: 0.7rem 1.4rem;
    border-radius: 6px;
    border-bottom: none !important;
}
.divinav-post-cta-btn:hover { opacity: 0.92; }

.divinav-post-back {
    font-family: 'Inter', sans-serif;
    font-size: 0.9rem;
    margin: 1.5rem 0 0;
}

.divinav-blog-intro {
    text-align: center;
    color: var(--brand-rule-strong);
    font-size: 1.1rem;
    margin: 0 0 2.5rem;
}

.divinav-blog-list { margin: 0; }

.divinav-blog-card {
    padding: 0 0 2rem;
    margin: 0 0 2rem;
    border-bottom: 1px solid var(--brand-rule);
}
.divinav-blog-card:last-child { border-bottom: none; }

.divinav-blog-card-title {
    font-family: 'Source Serif 4', Georgia, serif;
    font-size: 1.5rem;
    font-weight: 600;
    margin: 0 0 0.4rem;
    line-height: 1.2;
}
.divinav-blog-card-title a {
    color: var(--brand-primary);
    border-bottom: none;
}
.divinav-blog-card-title a:hover { color: var(--brand-accent); }

.divinav-blog-card-excerpt { margin: 0.5rem 0 0.75rem; }

.divinav-blog-card-more {
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    font-size: 0.95rem;
}

/* Article tables (e.g. translation-comparison posts) */
.divinav-page-content table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.92rem;
    margin: 0.75rem 0 1.25rem;
}
.divinav-page-content th,
.divinav-page-content td {
    text-align: left;
    padding: 0.45rem 0.65rem;
    border-bottom: 1px solid var(--brand-rule);
    vertical-align: top;
}
.divinav-page-content thead th {
    font-family: 'Inter', sans-serif;
    font-size: 0.82rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--brand-rule-strong);
}

/* Collapsible <details>/<summary> (verse-comparison expanders) */
.divinav-page-content details {
    border: 1px solid var(--brand-rule);
    border-radius: 6px;
    padding: 0.25rem 1rem;
    margin: 0 0 0.75rem;
    background: #fff;
}
.divinav-page-content summary {
    cursor: pointer;
    font-family: 'Inter', sans-serif;
    padding: 0.55rem 0;
    list-style-position: inside;
}
.divinav-page-content details[open] > summary {
    margin-bottom: 0.5rem;
    border-bottom: 1px solid var(--brand-rule);
}
.divinav-page-content details table:last-child { margin-bottom: 0.5rem; }