/*
 * Joy Concept — Blog & Inner Page Styles
 * Covers: page hero, blog archive, single post, about page,
 * resources page, author bio, share links, pagination.
 * Loaded on all posts, archives, and inner pages.
 *
 * Table of contents:
 * 1.  Page Hero (shared across inner pages)
 * 2.  Blog Filter Nav
 * 3.  Pagination
 * 4.  Empty State
 * 5.  Newsletter Strip (blog page bottom CTA)
 * 6.  Single Post Hero
 * 7.  Single Post Featured Image
 * 8.  Post Tags
 * 9.  Post Share
 * 10. Author Bio
 * 11. About Page Hero
 * 12. About Story
 * 13. Credentials Grid
 * 14. About Quote
 * 15. Resources Grid
 * 16. Bloodwork CTA
 */


/* ─────────────────────────────────────────────────────────────────────────────
   1. PAGE HERO — shared header used across all inner pages
   ───────────────────────────────────────────────────────────────────────────── */

.jc-page-hero {
    padding-top:    calc( var(--jc-nav-h) + clamp(3rem, 6vw, 5rem) );
    padding-bottom: clamp(3rem, 6vw, 5rem);
    padding-inline: var(--jc-gutter);
    position:       relative;
    overflow:       hidden;
}

/* Decorative ring */
.jc-page-hero::after {
    content:       '';
    position:      absolute;
    top:           -60px;
    right:         -60px;
    width:         260px;
    height:        260px;
    border-radius: 50%;
    border:        1px solid rgba(184, 134, 27, 0.1);
    pointer-events: none;
}

.jc-page-hero__inner {
    max-width:   var(--jc-container);
    margin-inline: auto;
}

.jc-page-hero__title {
    font-family:   var(--jc-serif);
    font-size:     clamp(2.4rem, 5vw, 4.2rem);
    font-weight:   300;
    line-height:   var(--jc-lh-tight);
    color:         var(--jc-white);
    margin-bottom: var(--jc-sp-3);
}

.jc-page-hero__title em {
    font-style: italic;
    color:      var(--jc-gold-light);
}

.jc-page-hero__sub {
    font-size:   var(--jc-text-md);
    color:       rgba(255, 255, 255, 0.6);
    line-height: var(--jc-lh-relaxed);
    max-width:   560px;
    margin-top:  var(--jc-sp-3);
}


/* ─────────────────────────────────────────────────────────────────────────────
   2. BLOG FILTER NAV
   ───────────────────────────────────────────────────────────────────────────── */

.jc-blog-filter {
    background:    var(--jc-white);
    border-bottom: 1px solid var(--jc-border);
    padding:       0 var(--jc-gutter);
    position:      sticky;
    top:           var(--jc-nav-h);
    z-index:       var(--jc-z-raised);
}

.jc-blog-filter__nav {
    max-width:   var(--jc-container);
    margin-inline: auto;
    display:     flex;
    gap:         0;
    overflow-x:  auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.jc-blog-filter__nav::-webkit-scrollbar { display: none; }

.jc-blog-filter__item {
    display:         block;
    font-family:     var(--jc-sans);
    font-size:       var(--jc-text-sm);
    font-weight:     400;
    color:           var(--jc-muted);
    text-decoration: none;
    padding:         var(--jc-sp-4) var(--jc-sp-5);
    border-bottom:   2px solid transparent;
    white-space:     nowrap;
    transition:      color var(--jc-transition), border-color var(--jc-transition);
    letter-spacing:  var(--jc-ls-wide);
}

.jc-blog-filter__item:hover {
    color:         var(--jc-green);
    border-color:  var(--jc-border);
}

.jc-blog-filter__item.is-active {
    color:        var(--jc-green);
    font-weight:  500;
    border-color: var(--jc-green);
}


/* ─────────────────────────────────────────────────────────────────────────────
   3. PAGINATION
   ───────────────────────────────────────────────────────────────────────────── */

.jc-pagination {
    margin-top: var(--jc-sp-12);
    display:    flex;
    justify-content: center;
}

.jc-pagination .nav-links {
    display:     flex;
    align-items: center;
    gap:         var(--jc-sp-2);
    flex-wrap:   wrap;
    justify-content: center;
}

.jc-pagination .page-numbers {
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    min-width:       40px;
    height:          40px;
    padding:         0 var(--jc-sp-3);
    font-family:     var(--jc-sans);
    font-size:       var(--jc-text-sm);
    font-weight:     400;
    color:           var(--jc-muted);
    text-decoration: none;
    border:          1px solid var(--jc-border);
    border-radius:   var(--jc-radius-sm);
    transition:      background-color var(--jc-transition),
                     color var(--jc-transition),
                     border-color var(--jc-transition);
}

.jc-pagination .page-numbers:hover {
    background-color: var(--jc-green-pale);
    border-color:     var(--jc-green);
    color:            var(--jc-green);
}

.jc-pagination .page-numbers.current {
    background-color: var(--jc-green);
    border-color:     var(--jc-green);
    color:            var(--jc-white);
    font-weight:      500;
}

.jc-pagination .page-numbers.dots {
    border:  none;
    background: none;
}


/* ─────────────────────────────────────────────────────────────────────────────
   4. EMPTY STATE
   ───────────────────────────────────────────────────────────────────────────── */

.jc-empty-state {
    text-align:  center;
    padding:     var(--jc-sp-20) var(--jc-sp-8);
    display:     flex;
    flex-direction: column;
    align-items: center;
    gap:         var(--jc-sp-5);
}

.jc-empty-state__text {
    font-size:   var(--jc-text-md);
    color:       var(--jc-subtle);
    font-style:  italic;
}


/* ─────────────────────────────────────────────────────────────────────────────
   5. NEWSLETTER STRIP (blog page bottom)
   ───────────────────────────────────────────────────────────────────────────── */

.jc-newsletter-strip__inner {
    max-width:       var(--jc-container);
    margin-inline:   auto;
    padding-inline:  var(--jc-gutter);
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    gap:             var(--jc-sp-8);
    flex-wrap:       wrap;
}

.jc-newsletter-strip__title {
    font-family:   var(--jc-serif);
    font-size:     var(--jc-text-2xl);
    font-weight:   300;
    color:         var(--jc-white);
    line-height:   var(--jc-lh-snug);
    margin-bottom: var(--jc-sp-1);
}

.jc-newsletter-strip__sub {
    font-size: var(--jc-text-sm);
    color:     rgba(255, 255, 255, 0.55);
}

@media (max-width: 640px) {
    .jc-newsletter-strip__inner { flex-direction: column; align-items: flex-start; }
    .jc-newsletter-strip__inner .jc-btn { width: 100%; text-align: center; }
}


/* ─────────────────────────────────────────────────────────────────────────────
   6. SINGLE POST HERO
   ───────────────────────────────────────────────────────────────────────────── */

.jc-post-hero {
    padding-top:    calc( var(--jc-nav-h) + clamp(3rem, 6vw, 5rem) );
    padding-bottom: clamp(3rem, 6vw, 4.5rem);
    padding-inline: var(--jc-gutter);
}

.jc-post-hero .jc-container {
    /* Inherits jc-container--content width */
}

.jc-post-hero__meta {
    display:       flex;
    align-items:   center;
    gap:           var(--jc-sp-3);
    margin-bottom: var(--jc-sp-5);
    flex-wrap:     wrap;
}

.jc-post-hero__sep {
    color: rgba(255, 255, 255, 0.3);
    font-size: var(--jc-text-xs);
}

.jc-post-hero__read {
    font-size:   var(--jc-text-xs);
    color:       rgba(255, 255, 255, 0.55);
    font-weight: 400;
}

/* Override badge colours for dark background */
.jc-post-hero .jc-badge {
    background:  rgba(255, 255, 255, 0.12);
    color:       var(--jc-gold-light);
    border:      1px solid rgba(255, 255, 255, 0.15);
}

.jc-post-hero__title {
    font-family:   var(--jc-serif);
    font-size:     clamp(2rem, 4.5vw, 3.8rem);
    font-weight:   300;
    color:         var(--jc-white);
    line-height:   var(--jc-lh-tight);
    margin-bottom: var(--jc-sp-5);
}

.jc-post-hero__byline {
    display:     flex;
    align-items: center;
    gap:         var(--jc-sp-3);
    flex-wrap:   wrap;
}

.jc-post-hero__author {
    font-size:   var(--jc-text-sm);
    color:       rgba(255, 255, 255, 0.7);
    font-weight: 500;
}

.jc-post-hero__date {
    font-size: var(--jc-text-xs);
    color:     rgba(255, 255, 255, 0.45);
}

.jc-post-hero__byline span[aria-hidden] {
    color: rgba(255, 255, 255, 0.25);
}


/* ─────────────────────────────────────────────────────────────────────────────
   7. SINGLE POST — FEATURED IMAGE
   ───────────────────────────────────────────────────────────────────────────── */

.jc-post-image {
    margin-top: calc( -2rem );
}

.jc-post-image .jc-container {
    padding-inline: var(--jc-gutter);
    max-width:      calc( var(--jc-content) + (var(--jc-gutter) * 2) );
}

.jc-post-image__img {
    width:         100%;
    aspect-ratio:  16 / 7;
    object-fit:    cover;
    border-radius: var(--jc-radius-md);
    box-shadow:    var(--jc-shadow-lg);
}


/* ─────────────────────────────────────────────────────────────────────────────
   8. POST TAGS
   ───────────────────────────────────────────────────────────────────────────── */

.jc-post-tags {
    display:     flex;
    align-items: center;
    gap:         var(--jc-sp-2);
    flex-wrap:   wrap;
    margin-top:  var(--jc-sp-8);
    padding-top: var(--jc-sp-6);
    border-top:  1px solid var(--jc-border);
}

.jc-post-tags__label {
    font-size:      var(--jc-text-xs);
    font-weight:    500;
    letter-spacing: var(--jc-ls-wider);
    text-transform: uppercase;
    color:          var(--jc-subtle);
}

.jc-post-tags__tag {
    display:         inline-block;
    font-size:       var(--jc-text-xs);
    color:           var(--jc-muted);
    background:      var(--jc-cream-dark);
    border:          1px solid var(--jc-border);
    border-radius:   var(--jc-radius-full);
    padding:         0.25em 0.8em;
    text-decoration: none;
    transition:      background-color var(--jc-transition),
                     color var(--jc-transition);
}

.jc-post-tags__tag:hover {
    background-color: var(--jc-green-pale);
    color:            var(--jc-green);
    border-color:     var(--jc-green);
}


/* ─────────────────────────────────────────────────────────────────────────────
   9. POST SHARE
   ───────────────────────────────────────────────────────────────────────────── */

.jc-post-share {
    display:     flex;
    align-items: center;
    gap:         var(--jc-sp-5);
    flex-wrap:   wrap;
    margin-top:  var(--jc-sp-8);
    padding-top: var(--jc-sp-6);
    border-top:  1px solid var(--jc-border);
}

.jc-post-share__label {
    font-size:      var(--jc-text-xs);
    font-weight:    500;
    letter-spacing: var(--jc-ls-wider);
    text-transform: uppercase;
    color:          var(--jc-subtle);
    flex-shrink:    0;
}

.jc-post-share__links {
    display:  flex;
    gap:      var(--jc-sp-3);
    flex-wrap: wrap;
}

.jc-post-share__link {
    font-size:       var(--jc-text-xs);
    font-weight:     500;
    letter-spacing:  var(--jc-ls-wide);
    text-transform:  uppercase;
    color:           var(--jc-muted);
    text-decoration: none;
    padding:         var(--jc-sp-2) var(--jc-sp-4);
    border:          1px solid var(--jc-border);
    border-radius:   var(--jc-radius-full);
    transition:      background-color var(--jc-transition),
                     color var(--jc-transition),
                     border-color var(--jc-transition);
}

.jc-post-share__link:hover {
    background-color: var(--jc-green);
    color:            var(--jc-white);
    border-color:     var(--jc-green);
}


/* ─────────────────────────────────────────────────────────────────────────────
   10. AUTHOR BIO
   ───────────────────────────────────────────────────────────────────────────── */

.jc-author-bio {
    display:       flex;
    gap:           var(--jc-sp-6);
    align-items:   flex-start;
    padding:       var(--jc-sp-8);
    background:    var(--jc-white);
    border:        1px solid var(--jc-border);
    border-radius: var(--jc-radius-md);
}

.jc-author-bio__avatar {
    width:            72px;
    height:           72px;
    border-radius:    50%;
    background:       var(--jc-green);
    display:          flex;
    align-items:      center;
    justify-content:  center;
    flex-shrink:      0;
}

.jc-author-bio__initials {
    font-family:  var(--jc-serif);
    font-size:    var(--jc-text-xl);
    font-weight:  300;
    color:        var(--jc-gold-light);
}

.jc-author-bio__name {
    font-family:   var(--jc-serif);
    font-size:     var(--jc-text-xl);
    font-weight:   500;
    color:         var(--jc-green);
    margin-bottom: var(--jc-sp-1);
}

.jc-author-bio__role {
    font-size:      var(--jc-text-xs);
    font-weight:    500;
    letter-spacing: var(--jc-ls-wide);
    text-transform: uppercase;
    color:          var(--jc-gold);
    margin-bottom:  var(--jc-sp-4);
}

.jc-author-bio__text {
    font-size:     var(--jc-text-sm);
    color:         var(--jc-muted);
    line-height:   var(--jc-lh-relaxed);
    margin-bottom: var(--jc-sp-4);
}

@media (max-width: 560px) {
    .jc-author-bio {
        flex-direction: column;
        gap:            var(--jc-sp-4);
    }
}


/* ─────────────────────────────────────────────────────────────────────────────
   11. ABOUT PAGE HERO
   ───────────────────────────────────────────────────────────────────────────── */

.jc-about-hero {
    padding-top:    calc( var(--jc-nav-h) + clamp(3rem, 6vw, 5rem) );
    padding-bottom: 0;
    overflow:       hidden;
}

.jc-about-hero__grid {
    max-width:             var(--jc-container);
    margin-inline:         auto;
    padding-inline:        var(--jc-gutter);
    display:               grid;
    grid-template-columns: 1.1fr 1fr;
    gap:                   clamp(2rem, 5vw, 5rem);
    align-items:           flex-end;
}

.jc-about-hero__content {
    padding-bottom: clamp(3rem, 6vw, 5rem);
}

.jc-about-hero__title {
    font-family:   var(--jc-serif);
    font-size:     clamp(2.5rem, 5vw, 4.5rem);
    font-weight:   300;
    color:         var(--jc-white);
    line-height:   var(--jc-lh-tight);
    margin-bottom: var(--jc-sp-3);
}

.jc-about-hero__title em {
    font-style: italic;
    color:      var(--jc-gold-light);
}

.jc-about-hero__role {
    font-size:      var(--jc-text-xs);
    font-weight:    400;
    letter-spacing: var(--jc-ls-widest);
    text-transform: uppercase;
    color:          rgba(255, 255, 255, 0.42);
    margin-bottom:  var(--jc-sp-6);
}

/* Credential pills */
.jc-about-hero__pills {
    display:   flex;
    flex-wrap: wrap;
    gap:       var(--jc-sp-2);
}

.jc-about-hero__pill {
    display:        inline-block;
    font-size:      var(--jc-text-xs);
    font-weight:    400;
    color:          rgba(255, 255, 255, 0.7);
    background:     rgba(255, 255, 255, 0.08);
    border:         1px solid rgba(255, 255, 255, 0.12);
    border-radius:  var(--jc-radius-full);
    padding:        0.3em 0.85em;
    white-space:    nowrap;
}

/* Photo column */
.jc-about-hero__image {
    align-self: flex-end;
}

.jc-about-hero__photo {
    width:            100%;
    aspect-ratio:     4 / 5;
    object-fit:       cover;
    object-position:  top center;
    border-radius:    var(--jc-radius-md) var(--jc-radius-md) 0 0;
    display:          block;
}

.jc-about-hero__photo-placeholder {
    width:           100%;
    aspect-ratio:    4 / 5;
    background:      linear-gradient( 160deg, var(--jc-green-mid), var(--jc-green) );
    border-radius:   var(--jc-radius-md) var(--jc-radius-md) 0 0;
    display:         flex;
    align-items:     center;
    justify-content: center;
    border:          1px solid rgba(255, 255, 255, 0.1);
}

.jc-about-hero__photo-placeholder span {
    font-size:   var(--jc-text-sm);
    color:       rgba(255, 255, 255, 0.3);
    font-style:  italic;
}

@media (max-width: 768px) {
    .jc-about-hero__grid  { grid-template-columns: 1fr; }
    .jc-about-hero__image { display: none; }
}


/* ─────────────────────────────────────────────────────────────────────────────
   12. ABOUT STORY (WordPress editor content wrapper)
   ───────────────────────────────────────────────────────────────────────────── */

.jc-about-story__content { margin-top: var(--jc-sp-8); }

.jc-about-story__placeholder {
    font-size:   var(--jc-text-base);
    color:       var(--jc-subtle);
    font-style:  italic;
    background:  var(--jc-cream-dark);
    border:      1px dashed var(--jc-border);
    border-radius: var(--jc-radius);
    padding:     var(--jc-sp-6);
    text-align:  center;
}


/* ─────────────────────────────────────────────────────────────────────────────
   13. CREDENTIALS GRID (About page)
   ───────────────────────────────────────────────────────────────────────────── */

.jc-creds-grid {
    display:               grid;
    grid-template-columns: repeat(3, 1fr);
    gap:                   var(--jc-sp-5);
    margin-top:            var(--jc-sp-10);
}

.jc-cred-card {
    background:    var(--jc-cream);
    border:        1px solid var(--jc-border);
    border-radius: var(--jc-radius);
    padding:       var(--jc-sp-6);
    transition:    box-shadow var(--jc-transition), border-color var(--jc-transition);
}

.jc-cred-card:hover {
    box-shadow:   var(--jc-shadow);
    border-color: var(--jc-gold);
}

.jc-cred-card__icon {
    width:           44px;
    height:          44px;
    border-radius:   50%;
    background:      var(--jc-green-pale);
    display:         flex;
    align-items:     center;
    justify-content: center;
    color:           var(--jc-green);
    margin-bottom:   var(--jc-sp-4);
}

.jc-cred-card__title {
    font-family:   var(--jc-serif);
    font-size:     var(--jc-text-xl);
    font-weight:   400;
    color:         var(--jc-green);
    margin-bottom: var(--jc-sp-3);
    line-height:   var(--jc-lh-snug);
}

.jc-cred-card__body {
    font-size:   var(--jc-text-sm);
    color:       var(--jc-muted);
    line-height: var(--jc-lh-relaxed);
}

@media (max-width: 900px) { .jc-creds-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .jc-creds-grid { grid-template-columns: 1fr; } }


/* ─────────────────────────────────────────────────────────────────────────────
   14. ABOUT QUOTE
   ───────────────────────────────────────────────────────────────────────────── */

.jc-about-quote {
    text-align: center;
}

.jc-about-quote__text {
    font-family:   var(--jc-serif);
    font-size:     clamp(1.5rem, 3vw, 2.4rem);
    font-weight:   300;
    font-style:    italic;
    color:         var(--jc-white);
    line-height:   var(--jc-lh-snug);
    margin-bottom: var(--jc-sp-5);
    position:      relative;
}

.jc-about-quote__cite {
    font-style:     normal;
    font-size:      var(--jc-text-sm);
    color:          var(--jc-gold-light);
    letter-spacing: var(--jc-ls-wide);
}


/* ─────────────────────────────────────────────────────────────────────────────
   15. RESOURCES GRID
   ───────────────────────────────────────────────────────────────────────────── */

.jc-resources-grid {
    display:               grid;
    grid-template-columns: repeat(2, 1fr);
    gap:                   var(--jc-sp-5);
    margin-top:            var(--jc-sp-10);
}

/* Domain label — small URL shown at bottom of resource card */
.jc-resource-card__domain {
    font-size:      var(--jc-text-xs);
    color:          var(--jc-subtle);
    letter-spacing: var(--jc-ls-wide);
    margin-top:     var(--jc-sp-2);
    font-style:     italic;
}

@media (max-width: 640px) {
    .jc-resources-grid { grid-template-columns: 1fr; }
}


/* ─────────────────────────────────────────────────────────────────────────────
   16. BLOODWORK CTA (Resources page)
   ───────────────────────────────────────────────────────────────────────────── */

.jc-bloodwork-cta {
    background:    var(--jc-white);
    border:        1px solid var(--jc-border);
    border-radius: var(--jc-radius-md);
    padding:       var(--jc-sp-8) var(--jc-sp-10);
    display:       flex;
    align-items:   center;
    justify-content: space-between;
    gap:           var(--jc-sp-8);
    position:      relative;
    overflow:      hidden;
}

.jc-bloodwork-cta::before {
    content:          '';
    position:         absolute;
    top:              0;
    left:             0;
    width:            4px;
    height:           100%;
    background-color: var(--jc-gold);
    border-radius:    var(--jc-radius-xs) 0 0 var(--jc-radius-xs);
}

.jc-bloodwork-cta__title {
    font-family:   var(--jc-serif);
    font-size:     var(--jc-text-2xl);
    font-weight:   400;
    color:         var(--jc-green);
    line-height:   var(--jc-lh-snug);
    margin-bottom: var(--jc-sp-3);
}

.jc-bloodwork-cta__title em {
    font-style: italic;
}

.jc-bloodwork-cta__desc {
    font-size:     var(--jc-text-sm);
    color:         var(--jc-muted);
    line-height:   var(--jc-lh-relaxed);
    max-width:     480px;
    margin-bottom: var(--jc-sp-5);
}

.jc-bloodwork-cta__badge {
    flex-shrink: 0;
    width:       80px;
    height:      80px;
    border-radius: 50%;
    background:  var(--jc-gold);
    display:     flex;
    align-items: center;
    justify-content: center;
    box-shadow:  var(--jc-shadow-md);
}

.jc-bloodwork-cta__badge-text {
    font-family:  var(--jc-serif);
    font-size:    var(--jc-text-lg);
    font-weight:  500;
    color:        var(--jc-white);
    font-style:   italic;
}

@media (max-width: 640px) {
    .jc-bloodwork-cta {
        flex-direction: column;
        padding:        var(--jc-sp-6);
        align-items:    flex-start;
    }
    .jc-bloodwork-cta__badge { display: none; }
}

/* ─── Free Guide Preview Page ─────────────────────────────────────────────── */

.jc-guide-preview {
    display:               grid;
    grid-template-columns: 1fr 1.4fr;
    gap:                   clamp(3rem, 6vw, 5rem);
    align-items:           center;
    margin-bottom:         var(--jc-sp-10);
}

.jc-guide-preview__content {}

.jc-guide-preview__desc {
    font-size:     var(--jc-text-md);
    color:         var(--jc-muted);
    line-height:   var(--jc-lh-relaxed);
    margin-bottom: var(--jc-sp-6);
    max-width:     480px;
}

.jc-guide-preview__list {
    list-style:    none;
    display:       flex;
    flex-direction: column;
    gap:           var(--jc-sp-3);
    margin-bottom: var(--jc-sp-8);
}

.jc-guide-preview__list li {
    display:     flex;
    align-items: flex-start;
    gap:         var(--jc-sp-3);
    font-size:   var(--jc-text-sm);
    color:       var(--jc-ink);
    line-height: var(--jc-lh-relaxed);
}

.jc-guide-preview__list li svg {
    color:       var(--jc-gold);
    flex-shrink: 0;
    margin-top:  3px;
}

.jc-guide-preview__cta-box {
    background:    var(--jc-cream-dark);
    border:        1px solid var(--jc-border);
    border-radius: var(--jc-radius-md);
    padding:       var(--jc-sp-6);
}

.jc-guide-preview__cta-label {
    font-size:     var(--jc-text-sm);
    color:         var(--jc-muted);
    line-height:   var(--jc-lh-relaxed);
    margin-bottom: var(--jc-sp-4);
}

.jc-guide-preview__privacy {
    font-size:   var(--jc-text-xs);
    color:       var(--jc-subtle);
    margin-top:  var(--jc-sp-3);
    text-align:  center;
    letter-spacing: var(--jc-ls-wide);
}

@media (max-width: 768px) {
    .jc-guide-preview {
        grid-template-columns: 1fr;
    }
    .jc-guide-preview__mockup {
        order: -1;
    }
}


/* ─────────────────────────────────────────────────────────────────────────────
   17. FREE GUIDE PREVIEW (page-free-guide.php)
   ───────────────────────────────────────────────────────────────────────────── */

.jc-guide-preview {
    display:               grid;
    grid-template-columns: 1fr 1.4fr;
    gap:                   clamp( 3rem, 6vw, 6rem );
    align-items:           center;
    padding-block:         var(--jc-sp-8);
}

.jc-guide-preview__mockup {
    display:         flex;
    justify-content: center;
}

.jc-guide-preview__desc {
    font-size:     var(--jc-text-md);
    color:         var(--jc-muted);
    line-height:   var(--jc-lh-relaxed);
    margin-bottom: var(--jc-sp-6);
    margin-top:    var(--jc-sp-4);
}

.jc-guide-preview__list {
    list-style:    none;
    margin-bottom: var(--jc-sp-8);
    display:       flex;
    flex-direction: column;
    gap:           var(--jc-sp-3);
}

.jc-guide-preview__list li {
    display:     flex;
    align-items: flex-start;
    gap:         var(--jc-sp-3);
    font-size:   var(--jc-text-sm);
    color:       var(--jc-ink);
    line-height: var(--jc-lh-relaxed);
}

.jc-guide-preview__list li svg {
    color:      var(--jc-gold);
    flex-shrink: 0;
    margin-top:  2px;
}

.jc-guide-preview__cta-box {
    background:    var(--jc-green);
    border-radius: var(--jc-radius-md);
    padding:       var(--jc-sp-6) var(--jc-sp-8);
}

.jc-guide-preview__cta-label {
    font-size:     var(--jc-text-sm);
    color:         rgba(255,255,255,.7);
    margin-bottom: var(--jc-sp-4);
    line-height:   var(--jc-lh-relaxed);
}

.jc-guide-preview__privacy {
    font-size:   var(--jc-text-xs);
    color:       rgba(255,255,255,.35);
    margin-top:  var(--jc-sp-3);
    text-align:  center;
    letter-spacing: var(--jc-ls-wide);
}

@media (max-width: 680px) {
    .jc-guide-preview {
        grid-template-columns: 1fr;
    }
    .jc-guide-preview__mockup {
        order: -1;
    }
}