/* Structured course landing (courses/landing.html + courses/landing/*.html).
   Sections alternate tones dynamically, so every component reads in both:
   cards keep dark text on --cl-surface; free text uses the slide's --jn-text/--jn-muted. */

.cl {
  --cl-radius: 1.25rem;
  --cl-line: rgb(255 255 255 / .16);
  --cl-soft: rgb(255 255 255 / .08);
  overflow-x: clip;
}
.cl .jn-slide--white { --cl-surface: var(--jn-cream); --cl-edge: var(--jn-border); }
.cl .jn-slide--green { --cl-surface: #fff; --cl-edge: transparent; }
.cl .jn-slide--white .jn-section-heading h2 { color: var(--jn-green); }
.cl .jn-section-heading h2 { letter-spacing: -.02em; }
.cl .jn-section-heading { margin-bottom: 2.25rem; }
.cl h3 { font-size: 1.0625rem; line-height: 1.35; }
.cl-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; }
.cl-button--ghost { color: #fff; border-color: rgb(255 255 255 / .35); background: transparent; }
.cl-button--ghost:hover { border-color: var(--jn-orange); color: #fff; }
.cl-note { margin-top: 1.5rem; font-size: .875rem; line-height: 1.7; color: var(--jn-muted); }
.cl-note--boxed { padding: 1.25rem 1.5rem; border-left: 3px solid var(--jn-orange); border-radius: var(--jn-radius-sm); background: var(--cl-soft); }
.cl .jn-slide--white .cl-note--boxed { background: var(--jn-cream); }
.cl-links a { color: var(--jn-orange); font-size: .875rem; font-weight: 700; text-decoration: none; }
.cl-split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 3rem; align-items: start; }
.cl-split .jn-section-heading { margin-bottom: 0; }

/* Cards: always dark text on a light surface. */
.cl :is(.cl-card, .cl-pain, .cl-results li, .cl-audience li, .cl-not-for, .cl-compare__col--after, .cl-module, .cl-level, .cl-format li,
        .cl-format-box, .cl-specs, .cl-package, .cl-price, .cl-bonus, .cl-steps li, .cl-review, .cl-sources, .cl-related a, .cl-offer) {
  --jn-text: #111; --jn-muted: #555; color: #111;
}

/* Hero */
.cl-hero { display: flex; align-items: center; }
.cl-hero__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(14rem, 20rem); gap: 4rem; align-items: center; }
.cl-hero__tags { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem; margin-bottom: 1.5rem; }
.cl-badge { padding: .4rem .85rem; border-radius: .4rem; background: var(--jn-orange); color: #fff; font-size: .6875rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.cl-hero__level { font-size: .75rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: rgb(255 255 255 / .7); }
.cl-hero__level + .cl-hero__level { padding-left: 1rem; border-left: 1px solid var(--cl-line); }
.cl-hero h1 { max-width: 40rem; font-size: clamp(1.75rem, 3.2vw, 2.25rem); line-height: 1.15; letter-spacing: -.02em; color: #fff; }
.cl-hero h1 span { color: var(--jn-orange); }
.cl-hero__tagline { margin-top: 1rem; font-size: .9375rem; font-weight: 600; color: var(--jn-orange); }
.cl-hero__lead { max-width: 38rem; margin-top: 1rem; font-size: clamp(.9375rem, 1.6vw, 1.125rem); line-height: 1.75; color: rgb(255 255 255 / .78); }
.cl-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr)); gap: .75rem; margin: 2rem 0; }
.cl-stats div { display: flex; flex-direction: column-reverse; justify-content: flex-end; padding: 1rem 1.1rem; border: 1px solid var(--cl-line); border-radius: var(--jn-radius-sm); background: var(--cl-soft); }
.cl-stats dt { font-size: 1.5rem; font-weight: 700; line-height: 1.15; color: #fff; }
.cl-stats dd { margin: .35rem 0 0; font-size: .6875rem; font-weight: 600; letter-spacing: .08em; line-height: 1.4; text-transform: uppercase; color: rgb(255 255 255 / .6); }
.cl-hero__mark { display: grid; place-items: center; aspect-ratio: 1; border: 1px solid var(--cl-line); border-radius: 50%; background: radial-gradient(circle at 50% 45%, rgb(255 255 255 / .09), transparent 70%); }
.cl-hero__mark img { width: 62%; height: auto; }

/* Offer and role */
.cl-offer { padding: 2rem; border-radius: var(--cl-radius); background: var(--cl-surface); border: 1px solid var(--cl-edge); }
.cl-offer h3 { margin-bottom: 1.25rem; color: var(--jn-green); }
.cl-cards { display: grid; gap: 1rem; margin: 0; padding: 0; list-style: none; }
.cl-cards--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cl-card { display: grid; align-content: start; gap: .5rem; padding: 1.5rem; border-radius: var(--cl-radius); background: var(--cl-surface); }
.cl-card__label { font-size: .6875rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--jn-orange-dark); }
.cl-card h3 { color: var(--jn-green); }
.cl-card p { font-size: .9375rem; line-height: 1.65; color: #444; }

/* Pains */
.cl-pains { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin: 0; padding: 0; list-style: none; }
.cl-pain { display: grid; align-content: start; gap: .6rem; padding: 1.5rem; border-radius: var(--cl-radius); background: var(--cl-surface); }
.cl-pain__num { font-size: .75rem; font-weight: 800; letter-spacing: .08em; color: var(--jn-orange-dark); }
.cl-pain h3 { color: var(--jn-green); }
.cl-pain p { font-size: .9375rem; line-height: 1.65; color: #444; }

/* Compare */
.cl-compare { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.cl-compare__col { padding: 1.75rem; border-radius: var(--cl-radius); }
.cl-compare__col h3 { margin-bottom: 1.25rem; font-size: .8125rem; letter-spacing: .1em; text-transform: uppercase; }
.cl-compare__col ul { display: grid; gap: .9rem; margin: 0; padding: 0; list-style: none; font-size: .9375rem; line-height: 1.6; }
.cl-compare__col--before { border: 1px solid var(--jn-border); color: var(--jn-muted); }
.cl .jn-slide--green .cl-compare__col--before { border-color: var(--cl-line); }
.cl-compare__col--before h3 { color: var(--jn-text); }
.cl-compare__col--before li { position: relative; padding-left: 1.6rem; }
.cl-compare__col--before li::before { content: "×"; position: absolute; left: 0; top: -.05rem; font-weight: 700; color: var(--jn-orange); }
.cl-compare__col--after { background: var(--cl-surface); }
.cl-compare__col--after h3 { color: var(--jn-green); }

/* Audience */
.cl-audience-wrap { display: grid; gap: 1rem; }
.cl-audience { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin: 0; padding: 0; list-style: none; }
.cl-audience li { display: grid; align-content: center; gap: .4rem; padding: 1.25rem 1.5rem; border-radius: var(--cl-radius); background: var(--cl-surface); }
.cl-audience h3 { color: var(--jn-green); font-size: 1rem; }
.cl-audience p { font-size: .9375rem; line-height: 1.6; color: #444; }
.cl-not-for { padding: 1.25rem 1.5rem; border: 1px dashed var(--jn-border); border-radius: var(--cl-radius); background: var(--cl-surface); }
.cl-not-for h3 { margin-bottom: .75rem; font-size: .8125rem; letter-spacing: .1em; text-transform: uppercase; color: var(--jn-orange-dark); }
.cl-not-for ul { display: grid; gap: .5rem; margin: 0; padding-left: 1.1rem; font-size: .9375rem; line-height: 1.55; color: #444; }

/* Results */
.cl-results { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin: 0; padding: 0; list-style: none; }
.cl-results li { position: relative; padding: 1.5rem 1.5rem 1.5rem 4rem; border-radius: var(--cl-radius); background: var(--cl-surface); }
.cl-results li::before { content: ""; position: absolute; left: 1.5rem; top: 1.5rem; width: 1.6rem; height: 1.6rem; border-radius: 50%; background: var(--jn-orange) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8.2l2.3 2.3 4.7-5' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 70% no-repeat; }
.cl-results h3 { color: var(--jn-green); }
.cl-results p { margin-top: .4rem; font-size: .9375rem; line-height: 1.6; color: #444; }
.cl-highlight { margin-top: 1.5rem; padding: 1.25rem 1.5rem; border-radius: var(--jn-radius-sm); background: var(--jn-orange); color: #fff; font-weight: 700; line-height: 1.5; }

/* Program */
.cl-program { display: grid; gap: .75rem; }
.cl-program__group { margin-top: 1rem; font-size: .75rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--jn-orange); }
.cl-module { border-radius: var(--jn-radius-sm); background: var(--cl-surface); }
.cl-module summary { display: flex; align-items: center; gap: 1rem; padding: 1.15rem 1.35rem; font-weight: 700; line-height: 1.45; color: var(--jn-green); cursor: pointer; list-style: none; }
.cl-module summary::-webkit-details-marker { display: none; }
.cl-module summary::after { content: "+"; flex-shrink: 0; display: grid; place-items: center; width: 1.6rem; height: 1.6rem; margin-left: auto; border-radius: 50%; background: rgb(1 60 53 / .07); color: var(--jn-orange-dark); font-size: 1.1rem; transition: rotate .3s ease, background .2s, color .2s; }
.cl-module[open] summary::after { rotate: 45deg; background: var(--jn-orange); color: #fff; }
.cl-module__num { flex-shrink: 0; display: grid; place-items: center; min-width: 2.4rem; height: 2.4rem; padding-inline: .5rem; border-radius: .6rem; background: var(--jn-green); color: #fff; font-size: .8125rem; white-space: nowrap; }
.cl-module__text { padding: 0 1.35rem 1rem 4.75rem; font-size: .9375rem; line-height: 1.65; color: #444; }
.cl-module .jn-checks { padding: 0 1.35rem 1.35rem 4.75rem; }
.cl-program__result { display: grid; gap: .4rem; margin-top: 1.5rem; padding: 1.5rem; border: 1px solid var(--cl-line); border-left: 3px solid var(--jn-orange); border-radius: var(--jn-radius-sm); color: var(--jn-muted); font-size: .9375rem; line-height: 1.7; }
.cl .jn-slide--white .cl-program__result { border-color: var(--jn-border); border-left-color: var(--jn-orange); }
.cl-program__result strong { color: var(--jn-text); }

/* Track */
.cl-track { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 1rem; margin: 0; padding: 0; list-style: none; }
.cl-level { position: relative; display: flex; flex-direction: column; gap: .5rem; padding: 1.5rem; border: 1px solid var(--cl-edge); border-radius: var(--cl-radius); background: var(--cl-surface); transition: translate .3s ease, box-shadow .3s ease, border-color .2s; }
.cl-level--current { border: 2px solid var(--jn-orange); }
.cl-level:not(.cl-level--current):hover { translate: 0 -4px; border-color: var(--jn-orange); box-shadow: 0 18px 40px rgb(1 60 53 / .12); }
.cl-level__label { font-size: .6875rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--jn-orange-dark); }
.cl-level h3 { font-size: 1.25rem; color: var(--jn-green); }
.cl-level h3 a { color: inherit; text-decoration: none; }
.cl-level h3 a::after { content: ""; position: absolute; inset: 0; }
.cl-level p { font-size: .9375rem; line-height: 1.6; color: #444; }
.cl-level__note { margin-top: auto; padding-top: .5rem; font-size: .75rem; font-weight: 700; color: var(--jn-green); }
.cl-level--current .cl-level__note { color: var(--jn-orange-dark); }

/* Format */
.cl-format-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 1rem; align-items: start; }
.cl-format-grid:has(> :only-child) { grid-template-columns: minmax(0, 1fr); }
.cl-specs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0; padding: .5rem 1.5rem; border-radius: var(--cl-radius); background: var(--cl-surface); }
.cl-specs div { padding: .9rem 0; border-bottom: 1px solid var(--jn-border); }
.cl-specs div:nth-child(odd) { padding-right: 1.5rem; }
.cl-specs div:nth-last-child(-n+2) { border-bottom: 0; }
.cl-specs dt { font-size: .6875rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--jn-muted); }
.cl-specs dd { margin: .25rem 0 0; font-size: .9375rem; font-weight: 600; line-height: 1.45; color: var(--jn-green); }
.cl-format-side { display: grid; gap: 1rem; }
.cl-format-box { padding: 1.5rem; border-radius: var(--cl-radius); background: var(--cl-surface); }
.cl-format-box h3 { margin-bottom: .75rem; color: var(--jn-green); }
.cl-format-box p { font-size: .9375rem; line-height: 1.65; color: #444; }
.cl-format { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: 1rem; margin: 1rem 0 0; padding: 0; list-style: none; }
.cl-format li { padding: 1.5rem; border-radius: var(--cl-radius); background: var(--cl-surface); }
.cl-format h3 { margin-bottom: .5rem; color: var(--jn-green); }
.cl-format p { font-size: .9375rem; line-height: 1.6; color: #444; }
.cl-notice { margin-top: 1rem; padding: 1.25rem 1.5rem; border-radius: var(--jn-radius-sm); background: #fff0ea; color: #7a2a10; font-size: .9375rem; line-height: 1.65; }

/* Price, packages, bonuses, instalment */
.cl-price { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); border: 2px solid var(--jn-green); border-radius: var(--cl-radius); background: #fff; overflow: hidden; }
.cl-price__card { padding: 2rem; }
.cl-price__name { font-size: .75rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--jn-orange-dark); }
.cl-price__amount { margin-top: .5rem; font-size: clamp(2.25rem, 5vw, 3rem); font-weight: 800; line-height: 1.1; color: var(--jn-green); }
.cl-price__note { margin: .35rem 0 1.5rem; font-size: .875rem; color: #666; }
.cl-price__aside { display: flex; flex-direction: column; justify-content: center; gap: .75rem; padding: 2rem; background: var(--jn-cream); }
.cl-price__aside p { font-size: .75rem; line-height: 1.6; color: #666; }
.cl-packages { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 1rem; align-items: stretch; }
.cl-package { display: flex; flex-direction: column; gap: .75rem; padding: 1.75rem; border: 1px solid var(--jn-border); border-radius: var(--cl-radius); background: #fff; }
.cl-package--featured { border: 2px solid var(--jn-orange); box-shadow: 0 18px 40px rgb(1 60 53 / .12); }
.cl-package__badge { align-self: flex-start; padding: .3rem .7rem; border-radius: .4rem; background: var(--jn-cream); color: var(--jn-green); font-size: .6875rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.cl-package--featured .cl-package__badge { background: var(--jn-orange); color: #fff; }
.cl-package h3 { font-size: 1.25rem; color: var(--jn-green); }
.cl-package__price { font-size: 2rem; font-weight: 800; line-height: 1.1; color: var(--jn-green); }
.cl-package__note { margin-top: -.35rem; font-size: .8125rem; color: #666; }
.cl-package__start { margin: 0; padding: .55rem .75rem; border-radius: .6rem; background: rgb(255 111 63 / .08); color: var(--jn-orange-dark); font-size: .8125rem; font-weight: 700; }
.cl-short { margin: 1.25rem 0 0; font-size: .875rem; color: var(--jn-muted); }
.cl-short a { color: var(--jn-orange-dark); font-weight: 700; text-decoration: none; }
.cl-short a:hover { text-decoration: underline; }
.jn-slide--green .cl-short { color: rgb(255 255 255 / .72); }
.jn-slide--green .cl-short a { color: var(--jn-orange); }
.cl-package .jn-checks { margin-bottom: .75rem; }
.cl-package .jn-checks li { font-size: .875rem; }
.cl-package .jn-button { margin-top: auto; }
.cl-bonuses { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: 1rem; margin-top: 1rem; }
.cl-bonus { display: flex; flex-direction: column; gap: .6rem; padding: 1.75rem; border: 1px solid var(--jn-border); border-radius: var(--cl-radius); background: #fff; }
.cl-bonus .jn-eyebrow { margin: 0; }
.cl-bonus h3 { color: var(--jn-green); }
.cl-bonus p { font-size: .9375rem; line-height: 1.6; color: #444; }
.cl-bonus__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 1rem; margin-top: auto; padding-top: .5rem; }
.cl-bonus__tag { padding: .3rem .75rem; border-radius: 999px; background: #fff0ea; color: #c2441a; font-size: .75rem; font-weight: 700; }
.cl-bonus__foot a { color: var(--jn-green); font-size: .875rem; font-weight: 700; text-decoration: none; }
.cl-bonus__foot a:hover { color: var(--jn-orange-dark); }
.cl-installment { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 2rem; margin-top: 1rem; padding: 2rem; border-radius: var(--cl-radius); background: var(--jn-green); color: #fff; --jn-text: #fff; --jn-muted: rgb(255 255 255 / .72); }
.cl .jn-slide--green .cl-installment { background: var(--jn-green-soft); border: 1px solid var(--cl-line); }
.cl-installment .jn-eyebrow { color: var(--jn-orange); }
.cl-installment__title { margin-bottom: .5rem; font-size: 1.25rem; color: #fff; }
.cl-installment__lead { font-size: 1rem; line-height: 1.7; color: rgb(255 255 255 / .82); }
.cl-installment__banks { margin-top: .75rem; font-size: .875rem; font-weight: 700; color: #fff; }
.cl-installment__benefits { margin-top: 1.25rem; }
.cl-installment__benefits li { color: rgb(255 255 255 / .88); }
.cl-installment__steps { display: grid; gap: .6rem; margin: 1.25rem 0 0; padding-left: 1.25rem; font-size: .9375rem; line-height: 1.55; color: rgb(255 255 255 / .82); }
.cl-installment__steps li::marker { color: var(--jn-orange); font-weight: 700; }
.cl-installment__calc { display: flex; flex-direction: column; gap: 1rem; }
.cl-installment__calc dl { display: grid; margin: 0; }
.cl-installment__calc dl div { display: flex; justify-content: space-between; gap: 1rem; padding: .65rem 0; border-bottom: 1px solid var(--cl-line); font-size: .875rem; }
.cl-installment__calc dt { color: rgb(255 255 255 / .65); }
.cl-installment__calc dd { margin: 0; font-weight: 700; text-align: right; }
.cl-installment__calc p { font-size: .8125rem; line-height: 1.6; color: rgb(255 255 255 / .65); }

/* Start steps */
.cl-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 1rem; margin: 0; padding: 0; list-style: none; }
.cl-steps li { display: grid; align-content: start; gap: .6rem; padding: 1.75rem; border-radius: var(--cl-radius); background: var(--cl-surface); }
.cl-steps__num { display: grid; place-items: center; width: 2.4rem; height: 2.4rem; border-radius: 50%; background: var(--jn-orange); color: #fff; font-weight: 800; }
.cl-steps h3 { color: var(--jn-green); }
.cl-steps p { font-size: .9375rem; line-height: 1.6; color: #444; }

/* Expert */
.cl-expert { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 3rem; align-items: center; }
.cl-expert:not(:has(.cl-expert__photo)) { grid-template-columns: minmax(0, 1fr); max-width: 52rem; }
.cl-expert__photo { margin: 0; overflow: hidden; border-radius: var(--cl-radius); }
.cl-expert__photo img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; }
.cl-expert h2 { color: var(--jn-text); }
.cl .jn-slide--white .cl-expert h2 { color: var(--jn-green); }
.cl-expert__role { margin-top: .6rem; color: var(--jn-orange); font-size: .9375rem; font-weight: 600; }
.cl-expert__bio { margin-top: 1rem; font-size: 1rem; line-height: 1.75; color: var(--jn-muted); }
.cl-expert__quote { margin: 1.25rem 0 0; padding-left: 1.25rem; border-left: 3px solid var(--jn-orange); font-style: italic; line-height: 1.7; color: var(--jn-text); }
.cl-expert__facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr)); gap: .75rem; margin: 1.5rem 0 0; }
.cl-expert__facts div { display: flex; flex-direction: column-reverse; padding: 1rem; border-radius: var(--jn-radius-sm); background: var(--cl-surface); }
.cl-expert__facts dt { font-size: 1.5rem; font-weight: 800; line-height: 1.1; color: var(--jn-green); }
.cl-expert__facts dd { margin: .3rem 0 0; font-size: .75rem; line-height: 1.4; color: #555; }
.cl-expert__sources { margin-top: 1.5rem; }
.cl-expert__sources h3 { margin-bottom: .5rem; font-size: .8125rem; letter-spacing: .1em; text-transform: uppercase; color: var(--jn-orange); }
.cl-expert__sources ul { display: grid; gap: .35rem; margin: 0; padding-left: 1.1rem; font-size: .875rem; line-height: 1.55; color: var(--jn-muted); }
.cl-expert .cl-links { margin-top: 1.5rem; }

/* Reviews */
.cl-reviews { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin: 0; padding: 0; list-style: none; }
.cl-review { display: flex; flex-direction: column; gap: 1rem; padding: 1.75rem; border-radius: var(--cl-radius); background: var(--cl-surface); }
.cl-review__result { align-self: flex-start; padding: .3rem .75rem; border-radius: 999px; background: #fff0ea; color: #c2441a; font-size: .75rem; font-weight: 700; }
.cl-review blockquote { margin: 0; padding-left: 1.25rem; border-left: 3px solid var(--jn-orange); font-size: .9375rem; line-height: 1.7; color: #333; }
.cl-review__author { display: grid; margin-top: auto; font-size: .8125rem; line-height: 1.45; color: #666; }
.cl-review__author strong { font-size: .9375rem; color: var(--jn-green); }

/* Sources and related posts */
.cl-sources { padding: 1.75rem; border-radius: var(--cl-radius); background: var(--cl-surface); }
.cl-sources h3 { margin-bottom: 1rem; color: var(--jn-green); }
.cl-sources ol { display: grid; gap: .6rem; margin: 0; padding-left: 1.25rem; font-size: .9375rem; line-height: 1.55; color: #333; }
.cl-sources ol li::marker { color: var(--jn-orange-dark); font-weight: 700; }
.cl-sources .cl-note { margin-top: 1rem; color: #555; }
.cl-related { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: .75rem; margin: 0; padding: 0; list-style: none; }
.cl-related a { display: flex; justify-content: space-between; align-items: center; gap: 1rem; height: 100%; padding: 1.25rem 1.5rem; border-radius: var(--jn-radius-sm); background: var(--cl-surface); color: var(--jn-green); font-weight: 700; line-height: 1.45; text-decoration: none; transition: translate .3s ease, box-shadow .3s ease; }
.cl-related a span { color: var(--jn-orange-dark); }
.cl-related a:hover { translate: 0 -3px; box-shadow: 0 14px 30px rgb(1 60 53 / .12); }

/* FAQ */
.cl-faq .jn-section-heading { margin-bottom: 1.75rem; }
.cl-faq__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; align-items: start; }
.cl .jn-slide--white .jn-faq-item { border: 1px solid var(--jn-border); }

/* Final CTA: full green slide, or a green card on white to keep the alternation. */
.cl-final { text-align: center; }
.cl-final__inner { display: grid; justify-items: center; }
.cl-final--white .cl-final__inner { padding: clamp(2rem, 5vw, 3.5rem); border-radius: var(--cl-radius); background: radial-gradient(ellipse at 95% 0, rgb(255 111 63 / .14), transparent 45%), var(--jn-green); }
.cl-final .jn-eyebrow { color: var(--jn-orange); }
.cl-final h2 { color: #fff; }
.cl-final h2 span { display: block; color: var(--jn-orange); }
.cl-final__inner > p { max-width: 36rem; margin: 1.25rem auto 2rem; font-size: 1rem; line-height: 1.7; color: rgb(255 255 255 / .78); }
.cl-final .cl-actions { justify-content: center; }
.cl-final .cl-final__urgency { margin: 1.25rem 0 0; font-size: .8125rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--jn-orange); }

/* Motion: content stays visible without support; reduced motion disables it in system.css. */
@keyframes cl-in { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes cl-rise { from { opacity: 0; transform: translateY(32px); } to { opacity: 1; transform: none; } }
.cl-hero__copy > *, .cl-hero__mark { animation: cl-in .7s cubic-bezier(.2, .7, .2, 1) both; }
.cl-hero__copy > :nth-child(2) { animation-delay: .08s; }
.cl-hero__copy > :nth-child(3) { animation-delay: .16s; }
.cl-hero__copy > :nth-child(4) { animation-delay: .24s; }
.cl-hero__copy > :nth-child(5) { animation-delay: .32s; }
.cl-hero__copy > :nth-child(6) { animation-delay: .4s; }
.cl-hero__mark { animation-delay: .3s; animation-duration: 1s; }
.cl :is(.cl-pain, .cl-audience li, .cl-bonus, .cl-steps li, .cl-card, .cl-results li, .cl-package) { transition: translate .3s ease, box-shadow .3s ease; }
.cl :is(.cl-pain, .cl-audience li, .cl-bonus, .cl-steps li, .cl-card, .cl-results li, .cl-package):hover { translate: 0 -4px; box-shadow: 0 18px 40px rgb(1 60 53 / .12); }
@supports (animation-timeline: view()) {
  .cl :is(.jn-section-heading, .cl-offer, .cl-card, .cl-pain, .cl-compare__col, .cl-results li, .cl-audience li, .cl-not-for, .cl-module,
          .cl-program__result, .cl-level, .cl-specs, .cl-format-box, .cl-format li, .cl-price, .cl-package, .cl-bonus, .cl-installment,
          .cl-steps li, .cl-expert, .cl-review, .cl-sources, .cl-related li, .jn-faq-item, .cl-final__inner) {
    animation: cl-rise linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 55%;
  }
  .cl :is(.cl-pain, .cl-card, .cl-results li, .cl-audience li, .cl-level, .cl-format li, .cl-package, .cl-bonus, .cl-steps li, .cl-review, .cl-related li):nth-child(2n) { animation-range: entry 8% entry 63%; }
  .cl :is(.cl-pain, .cl-results li, .cl-level, .cl-format li, .cl-package, .cl-steps li):nth-child(3n) { animation-range: entry 16% entry 71%; }
}

/* Responsive */
@media (min-width: 901px) {
  .cl > .cl-hero { min-height: calc(100svh - var(--jn-header-height) - 2.75rem); }
}
@media (max-width: 68rem) {
  .cl-pains, .cl-results { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .cl-hero__grid, .cl-split, .cl-price, .cl-installment, .cl-expert, .cl-format-grid { grid-template-columns: minmax(0, 1fr); }
  .cl-hero__grid { gap: 0; }
  .cl-hero__mark { display: none; }
  .cl-split { gap: 1.75rem; }
  .cl-faq__list, .cl-reviews, .cl-cards--2 { grid-template-columns: minmax(0, 1fr); }
  .cl-expert__photo { justify-self: center; width: 100%; max-width: 20rem; }
}
@media (max-width: 40rem) {
  .cl-pains, .cl-results, .cl-audience, .cl-compare, .cl-specs { grid-template-columns: minmax(0, 1fr); }
  .cl-specs div:nth-child(odd) { padding-right: 0; }
  .cl-specs div:nth-last-child(2) { border-bottom: 1px solid var(--jn-border); }
  .cl-actions .jn-button { flex: 1 1 100%; }
  .cl-price__card, .cl-price__aside, .cl-installment, .cl-offer { padding: 1.5rem 1.25rem; }
  .cl-module .jn-checks, .cl-module__text { padding-left: 1.35rem; }
  .cl-results li { padding-left: 3.75rem; }
}