/* =========================================================
   STEP 2A — BASE + HERO
   The Anti-Ageing Protocol
========================================================= */


/* =========================================================
   ROOT VARIABLES
========================================================= */

.aap-course-page {

    --aap-bg: #f7f5f0;
    --aap-card: #ffffff;
    --aap-dark: #171717;
    --aap-text: #242424;
    --aap-muted: #777777;
    --aap-border: #e6e2da;

    --aap-accent: #b68b3c;
    --aap-accent-dark: #8f6929;

    --aap-success: #4f7a59;
    --aap-danger: #9c4141;

    --aap-radius: 20px;
    --aap-radius-sm: 12px;

    --aap-shadow:
        0 15px 45px rgba(0, 0, 0, 0.07);

    --aap-shadow-hover:
        0 22px 60px rgba(0, 0, 0, 0.11);

    --aap-container: 1180px;

    color: var(--aap-text);
    background: var(--aap-bg);

    font-family:
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Roboto,
        Helvetica,
        Arial,
        sans-serif;

    line-height: 1.6;

}


/* =========================================================
   RESET
========================================================= */

.aap-course-page *,
.aap-course-page *::before,
.aap-course-page *::after {
    box-sizing: border-box;
}


.aap-course-page img {
    max-width: 100%;
    height: auto;
}


.aap-course-page iframe {
    max-width: 100%;
}


.aap-course-page button,
.aap-course-page input,
.aap-course-page textarea,
.aap-course-page select {
    font: inherit;
}


/* =========================================================
   MAIN CONTAINER
========================================================= */

.aap-container {

    width: min(
        calc(100% - 40px),
        var(--aap-container)
    );

    margin-left: auto;
    margin-right: auto;

}


/* =========================================================
   GENERIC SECTION
========================================================= */

.aap-section {

    padding: 90px 0;

    position: relative;

}


.aap-section + .aap-section {
    padding-top: 30px;
}


/* =========================================================
   HERO
========================================================= */

.aap-hero {

    position: relative;

    padding: 85px 0 70px;

    overflow: hidden;



}


/* =========================================================
   HERO INNER
========================================================= */

.aap-hero-inner {

    position: relative;

    z-index: 2;

    max-width: 900px;

    margin: 0 auto;

    text-align: center;

}


/* =========================================================
   EYEBROW
========================================================= */

.aap-eyebrow {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 8px;

    margin-bottom: 18px;

    padding: 7px 15px;

    border: 1px solid
        rgba(182, 139, 60, 0.35);

    border-radius: 999px;

    background:
        rgba(255, 255, 255, 0.72);

    color: var(--aap-accent-dark);

    font-size: 12px;

    font-weight: 700;

    letter-spacing: 1.5px;

    text-transform: uppercase;

}


/* =========================================================
   HERO TITLE
========================================================= */

.aap-hero h1 {

    margin: 0;

    color: var(--aap-dark);

    font-size: clamp(
        38px,
        6vw,
        72px
    );

    line-height: 1.05;

    font-weight: 800;

    letter-spacing: -2.5px;

}


.aap-hero h1 span {

    color: var(--aap-accent);

}


/* =========================================================
   HERO DESCRIPTION
========================================================= */

.aap-hero-description {

    max-width: 760px;

    margin: 25px auto 0;

    color: #555555;

    font-size: clamp(
        17px,
        2vw,
        21px
    );

    line-height: 1.7;

}


/* =========================================================
   HERO SUBTITLE
========================================================= */

.aap-hero-subtitle {

    max-width: 700px;

    margin: 14px auto 0;

    color: var(--aap-muted);

    font-size: 15px;

    line-height: 1.7;

}


/* =========================================================
   HERO ACTIONS
========================================================= */

.aap-hero-actions {

    display: flex;

    align-items: center;

    justify-content: center;

    flex-wrap: wrap;

    gap: 12px;

    margin-top: 32px;

}


/* =========================================================
   BUTTON BASE
========================================================= */

.aap-button {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    min-height: 52px;

    padding: 0 26px;

    border: 0;

    border-radius: 999px;

    cursor: pointer;

    text-decoration: none;

    font-size: 14px;

    font-weight: 700;

    letter-spacing: 0.3px;

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease,
        background 0.25s ease;

}


.aap-button:hover {

    transform: translateY(-2px);

}


.aap-button:focus-visible {

    outline: 3px solid
        rgba(182, 139, 60, 0.35);

    outline-offset: 3px;

}


/* =========================================================
   PRIMARY BUTTON
========================================================= */

.aap-button-primary {

    background: #145033;
    margin-top: 10px;
    color: #ffffff;

    box-shadow:
        0 10px 28px
        rgba(0, 0, 0, 0.15);

}


.aap-button-primary:hover {

    background: #0b4629;

    color: #ffffff;

    box-shadow:
        0 14px 35px
        rgba(0, 0, 0, 0.2);

}


/* =========================================================
   GOLD BUTTON
========================================================= */

.aap-button-gold {

    background: var(--aap-accent);

    color: #ffffff;

    box-shadow:
        0 10px 28px
        rgba(182, 139, 60, 0.25);

}


.aap-button-gold:hover {

    background: var(--aap-accent-dark);

    color: #ffffff;

}


/* =========================================================
   SECONDARY BUTTON
========================================================= */

.aap-button-secondary {

    background: #ffffff;

    color: var(--aap-dark);

    border: 1px solid var(--aap-border);

}


.aap-button-secondary:hover {

    border-color:
        rgba(182, 139, 60, 0.45);

}


/* =========================================================
   LOADING STATE
========================================================= */

.aap-button.is-loading {

    opacity: 0.7;

    pointer-events: none;

}


.aap-button.is-loading::after {

    content: "";

    width: 15px;

    height: 15px;

    margin-left: 9px;

    border: 2px solid
        rgba(255,255,255,0.45);

    border-top-color: #ffffff;

    border-radius: 50%;

    animation:
        aap-spin 0.7s linear infinite;

}


@keyframes aap-spin {

    to {
        transform: rotate(360deg);
    }

}


/* =========================================================
   GENERIC SECTION HEADING
========================================================= */

.aap-section-heading {

    max-width: 760px;

    margin: 0 auto 25px;

    text-align: center;

}


.aap-section-heading .aap-eyebrow {

    margin-bottom: 14px;

}


.aap-section-heading h2 {

    margin: 0;

    color: var(--aap-dark);

    font-size: clamp(
        30px,
        4vw,
        38px
    );

    line-height: 1.12;

    letter-spacing: -1.5px;

    font-weight: 800;

}


.aap-section-heading p {

    margin: 16px auto 0;

    color: var(--aap-muted);

    font-size: 16px;

    line-height: 1.7;

}


/* =========================================================
   RESPONSIVE — TABLET
========================================================= */

@media (max-width: 900px) {

    .aap-section {

        padding: 70px 0;

    }


    .aap-hero {

        padding: 70px 0 55px;

    }


    .aap-hero h1 {

        letter-spacing: -1.8px;

    }

}


/* =========================================================
   RESPONSIVE — MOBILE
========================================================= */

@media (max-width: 600px) {

    .aap-container {

        width: min(
            calc(100% - 28px),
            var(--aap-container)
        );

    }


    .aap-section {

        padding: 55px 0;

    }


    .aap-section + .aap-section {

        padding-top: 15px;

    }


    .aap-hero {

        padding: 52px 0 42px;

    }


    .aap-hero h1 {

        font-size: 39px;

        letter-spacing: -1.4px;

    }


    .aap-hero-description {

        margin-top: 20px;

        font-size: 16px;

        line-height: 1.65;

    }


    .aap-hero-subtitle {

        font-size: 14px;

    }


    .aap-hero-actions {

        margin-top: 26px;

        flex-direction: column;

    }


    .aap-button {

        width: 100%;

        min-height: 50px;

    }


    .aap-section-heading {

        margin-bottom: 30px;

    }


    .aap-section-heading h2 {

        font-size: 31px;

        letter-spacing: -0.8px;

    }


    .aap-section-heading p {

        font-size: 15px;

    }

}


/* =========================================================
   ACCESSIBILITY
========================================================= */

@media (prefers-reduced-motion: reduce) {

    .aap-course-page *,
    .aap-course-page *::before,
    .aap-course-page *::after {

        scroll-behavior: auto !important;

        animation-duration: 0.01ms !important;

        animation-iteration-count: 1 !important;

        transition-duration: 0.01ms !important;

    }

}
/* =========================================================
   STEP 2B — MAIN PREVIEW VIDEO + 70% PURCHASE GATE
========================================================= */


/* =========================================================
   PREVIEW SECTION
========================================================= */

.aap-preview-section {

    position: relative;

    padding: 20px 0 20px;

}


.aap-preview-section .aap-section-heading {

    margin-bottom: 10px;

}


/* =========================================================
   PREVIEW WRAPPER
========================================================= */

.aap-preview-wrapper {

    width: min(
        100%,
        1000px
    );

    margin: 0 auto;

}


/* =========================================================
   VIDEO FRAME
========================================================= */

.aap-preview-player {

    position: relative;

    width: 100%;

    aspect-ratio: 16 / 9;

    overflow: hidden;

    background: #111111;

    border-radius: 22px;

    box-shadow:
        0 25px 70px
        rgba(0, 0, 0, 0.16);

}


/* =========================================================
   YOUTUBE IFRAME
========================================================= */

.aap-preview-player iframe {

    position: absolute;

    inset: 0;

    width: 100%;

    height: 100%;

    display: block;

    border: 0;

}


/* =========================================================
   PREVIEW VIDEO GATE
========================================================= */

.aap-preview-gate {

    position: absolute;

    inset: 0;

    z-index: 10;

    display: flex;

    align-items: center;

    justify-content: center;

    padding: 30px;

    background:
        linear-gradient(
            135deg,
            rgba(10, 10, 10, 0.94),
            rgba(28, 24, 18, 0.94)
        );

    opacity: 0;

    visibility: hidden;

    pointer-events: none;

    transition:
        opacity 0.45s ease,
        visibility 0.45s ease;

}


/* =========================================================
   GATE ACTIVE
========================================================= */

.aap-preview-gate.is-visible {

    opacity: 1;

    visibility: visible;

    pointer-events: auto;

}


/* =========================================================
   GATE CONTENT
========================================================= */

.aap-preview-gate-content {

    width: min(
        100%,
        520px
    );

    text-align: center;

    color: #ffffff;

}


/* =========================================================
   GATE EYEBROW
========================================================= */

.aap-preview-gate-eyebrow {

    display: inline-block;

    margin-bottom: 14px;

    padding: 7px 14px;

    border: 1px solid
        rgba(255, 255, 255, 0.2);

    border-radius: 999px;

    color: #d7b66d;

    font-size: 11px;

    font-weight: 800;

    letter-spacing: 1.6px;

    text-transform: uppercase;

}


/* =========================================================
   GATE HEADING
========================================================= */

.aap-preview-gate h3 {

    margin: 0;

    color: #ffffff;

    font-size: clamp(
        27px,
        4vw,
        42px
    );

    line-height: 1.12;

    letter-spacing: -1px;

    font-weight: 800;

}


/* =========================================================
   GATE TEXT
========================================================= */

.aap-preview-gate p {

    max-width: 450px;

    margin: 15px auto 0;

    color:
        rgba(255, 255, 255, 0.72);

    font-size: 15px;

    line-height: 1.65;

}


/* =========================================================
   GATE ACCESS TEXT
========================================================= */

.aap-preview-gate .aap-gate-access {

    margin-top: 9px;

    color:
        rgba(255, 255, 255, 0.92);

    font-size: 14px;

    font-weight: 600;

}


/* =========================================================
   GATE PURCHASE FORM
========================================================= */

.aap-preview-gate .aap-buy-form {

    margin-top: 25px;

}


/* =========================================================
   GATE BUY BUTTON
========================================================= */

.aap-preview-gate .aap-buy-button {

    min-width: 280px;

}


/* =========================================================
   GATE PAYMENT NOTE
========================================================= */

.aap-preview-gate .aap-payment-note {

    margin-top: 13px;

    color:
        rgba(255, 255, 255, 0.48);

    font-size: 11px;

    line-height: 1.5;

}


/* =========================================================
   GATED VIDEO STATE
========================================================= */

.aap-preview-player.is-gated {

    box-shadow:
        0 25px 80px
        rgba(0, 0, 0, 0.22);

}


/* =========================================================
   PREVIEW INFO BELOW VIDEO
========================================================= */

.aap-preview-info {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 20px;

    margin-top: 16px;

    padding: 0 4px;

}


.aap-preview-info-text {

    color: var(--aap-muted);

    font-size: 13px;

}


.aap-preview-info-text strong {

    color: var(--aap-dark);

}


/* =========================================================
   PREVIEW STATUS
========================================================= */

.aap-preview-status {

    display: inline-flex;

    align-items: center;

    gap: 7px;

    white-space: nowrap;

    color: var(--aap-success);

    font-size: 12px;

    font-weight: 700;

}


.aap-preview-status::before {

    content: "";

    width: 7px;

    height: 7px;

    border-radius: 50%;

    background: currentColor;

}


/* =========================================================
   ACCESS GRANTED PREVIEW
========================================================= */

.aap-course-page[data-course-access="1"]
.aap-preview-status {

    color: var(--aap-success);

}


.aap-course-page[data-course-access="1"]
.aap-preview-status::after {

    content: " Full Access";

}


/* =========================================================
   PREVIEW BOTTOM NOTE
========================================================= */

.aap-preview-note {

    max-width: 760px;

    margin: 24px auto 0;

    text-align: center;

    color: var(--aap-muted);

    font-size: 13px;

    line-height: 1.65;

}


/* =========================================================
   LOCK ICON
========================================================= */

.aap-preview-lock {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    width: 44px;

    height: 44px;

    margin-bottom: 18px;

    border: 1px solid
        rgba(255, 255, 255, 0.18);

    border-radius: 50%;

    background:
        rgba(255, 255, 255, 0.07);

    color: #d7b66d;

    font-size: 19px;

}


/* =========================================================
   PREVIEW LABEL
========================================================= */

.aap-preview-label {

    display: flex;

    align-items: center;

    gap: 9px;

    margin-bottom: 13px;

    color: var(--aap-accent-dark);

    font-size: 12px;

    font-weight: 800;

    letter-spacing: 1.4px;

    text-transform: uppercase;

}


.aap-preview-label::before {

    content: "";

    width: 24px;

    height: 1px;

    background:
        currentColor;

}


/* =========================================================
   ACCESS MESSAGE
========================================================= */

.aap-access-message {

    display: flex;

    align-items: center;

    gap: 12px;

    margin: 0 auto 25px;

    padding: 14px 18px;

    border: 1px solid
        rgba(79, 122, 89, 0.2);

    border-radius: var(--aap-radius-sm);

    background:
        rgba(79, 122, 89, 0.06);

    color: var(--aap-success);

    font-size: 13px;

    font-weight: 600;

}


/* =========================================================
   VIDEO FULLSCREEN SAFETY
========================================================= */

.aap-preview-player iframe {

    min-height: 0;

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 900px) {

    .aap-preview-section {

        padding-bottom: 65px;

    }


    .aap-preview-player {

        border-radius: 18px;

    }


    .aap-preview-info {

        align-items: flex-start;

    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 600px) {

    .aap-preview-section {

        padding: 10px 0 50px;

    }


    .aap-preview-wrapper {

        width: 100%;

    }


    .aap-preview-player {

        aspect-ratio: 16 / 9;

        border-radius: 14px;

        box-shadow:
            0 15px 40px
            rgba(0, 0, 0, 0.13);

    }


    .aap-preview-gate {

        padding: 20px;

    }


    .aap-preview-gate-content {

        width: 100%;

    }


    .aap-preview-lock {

        width: 38px;

        height: 38px;

        margin-bottom: 11px;

        font-size: 16px;

    }


    .aap-preview-gate-eyebrow {

        margin-bottom: 9px;

        padding: 5px 10px;

        font-size: 9px;

        letter-spacing: 1.2px;

    }


    .aap-preview-gate h3 {

        font-size: 25px;

        letter-spacing: -0.5px;

    }


    .aap-preview-gate p {

        margin-top: 10px;

        font-size: 12px;

        line-height: 1.5;

    }


    .aap-preview-gate .aap-gate-access {

        font-size: 12px;

    }


    .aap-preview-gate .aap-buy-form {

        margin-top: 17px;

    }


    .aap-preview-gate .aap-buy-button {

        width: 100%;

        min-width: 0;

    }


    .aap-preview-gate .aap-payment-note {

        margin-top: 8px;

        font-size: 9px;

    }


    .aap-preview-info {

        flex-direction: column;

        gap: 6px;

        margin-top: 12px;

    }


    .aap-preview-info-text {

        font-size: 11px;

    }


    .aap-preview-status {

        font-size: 11px;

    }


    .aap-preview-note {

        margin-top: 18px;

        font-size: 11px;

    }

}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

    .aap-preview-gate {

        transition: none;

    }

}
/* =========================================================
   STEP 2C — COURSE INTRO + BENEFITS
========================================================= */


/* =========================================================
   COURSE INTRO SECTION
========================================================= */

.aap-course-intro {

    padding: 20px 0 30px;


}


/* =========================================================
   INTRO CARD
========================================================= */

.aap-intro-card {

    position: relative;

    max-width: 960px;

    margin: 0 auto;

    padding: 30px;

    overflow: hidden;

    border: 1px solid var(--aap-border);

    border-radius: 24px;

    background: var(--aap-card);

    box-shadow: var(--aap-shadow);

}


/* Decorative glow */

.aap-intro-card::after {

    content: "";

    position: absolute;

    width: 260px;

    height: 260px;

    right: -100px;

    top: -110px;

    border-radius: 50%;

    background:
        rgba(182, 139, 60, 0.08);

    pointer-events: none;

}


/* =========================================================
   INTRO HEADING
========================================================= */

.aap-intro-card h2 {

    position: relative;

    z-index: 1;

    max-width: 720px;

    margin: 0;

    color: var(--aap-dark);

    font-size: clamp(
        30px,
        4vw,
        38px
    );

    line-height: 1.12;

    letter-spacing: -1.5px;

    font-weight: 800;

}


/* =========================================================
   INTRO TEXT
========================================================= */

.aap-intro-card p {

    position: relative;

    z-index: 1;

    max-width: 700px;

    margin: 18px 0 0;

    color: var(--aap-muted);

    font-size: 16px;

    line-height: 1.75;

}


/* =========================================================
   FEATURE PILLS
========================================================= */

.aap-feature-pills {

    position: relative;

    z-index: 1;

    display: flex;

    flex-wrap: wrap;

    gap: 9px;

    margin-top: 28px;

}


.aap-feature-pills{
    display:flex;
    flex-direction:column;
    gap:12px;
}

.aap-feature-pills .aap-feature-pill{
    display:flex;
    align-items:flex-start;
    gap:13px;
    width:100%;
    padding:14px 16px;
    border:1px solid #E6E0DA;
    border-radius:12px;
    background:#FAF7F3;
    color:#30332d;
    font-size:13px;
    font-weight:500;
    line-height:1.55;
    letter-spacing:0;
}

.aap-feature-pills .aap-feature-pill::before{
    content:"✓";
    display:flex;
    align-items:center;
    justify-content:center;
    width:22px;
    height:22px;
    min-width:22px;
    margin-top:1px;
    border-radius:50%;
    background:#D7E3DF;
    color:#7E9C95;
    font-size:12px;
    font-weight:800;
}

/* =========================================================
   BENEFITS SECTION
========================================================= */

.aap-benefits-section {

    padding: 70px 0 90px;

}


/* =========================================================
   BENEFITS GRID
========================================================= */

.aap-benefits-grid {

    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 18px;

}


/* =========================================================
   BENEFIT CARD
========================================================= */

.aap-benefit-card {

    position: relative;

    min-height: 245px;

    padding: 30px;

    overflow: hidden;

    border: 1px solid var(--aap-border);

    border-radius: var(--aap-radius);

    background: var(--aap-card);

    box-shadow:
        0 8px 30px
        rgba(0, 0, 0, 0.045);

    opacity: 0;

    transform: translateY(20px);

    transition:
        opacity 0.6s ease,
        transform 0.6s ease,
        box-shadow 0.25s ease,
        border-color 0.25s ease;

}


/* Reveal */

.aap-benefit-card.is-visible {

    opacity: 1;

    transform: translateY(0);

}


/* =========================================================
   CARD HOVER
========================================================= */

.aap-benefit-card:hover {

    border-color:
        rgba(182, 139, 60, 0.35);

    box-shadow: var(--aap-shadow-hover);

    transform: translateY(-5px);

}


/* =========================================================
   NUMBER
========================================================= */

.aap-benefit-number {

    display: flex;

    align-items: center;

    justify-content: center;

    width: 44px;

    height: 44px;

    margin-bottom: 25px;

    border-radius: 12px;

    background:
        rgba(182, 139, 60, 0.10);

    color: var(--aap-accent-dark);

    font-size: 12px;

    font-weight: 800;

    letter-spacing: 0.5px;

}


/* =========================================================
   BENEFIT TITLE
========================================================= */

.aap-benefit-card h3 {

    margin: 0;

    color: var(--aap-dark);

    font-size: 20px;

    line-height: 1.25;

    letter-spacing: -0.4px;

    font-weight: 750;

}


/* =========================================================
   BENEFIT DESCRIPTION
========================================================= */

.aap-benefit-card p {

    margin: 11px 0 0;

    color: var(--aap-muted);

    font-size: 14px;

    line-height: 1.65;

}


/* =========================================================
   DECORATIVE LINE
========================================================= */

.aap-benefit-card::after {

    content: "";

    position: absolute;

    right: 0;

    bottom: 0;

    width: 70px;

    height: 3px;

    background:
        var(--aap-accent);

    opacity: 0;

    transform: translateX(15px);

    transition:
        opacity 0.25s ease,
        transform 0.25s ease;

}


.aap-benefit-card:hover::after {

    opacity: 1;

    transform: translateX(0);

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 900px) {

    .aap-course-intro {

        padding-top: 60px;

    }


    .aap-intro-card {

        padding: 20px;

    }


    .aap-benefits-grid {

        grid-template-columns:
            repeat(2, minmax(0, 1fr));

    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 600px) {

    .aap-course-intro {

        padding: 15px 0 20px;

    }


    .aap-intro-card {

        padding: 32px 24px;

        border-radius: 18px;

    }


    .aap-intro-card h2 {

        font-size: 30px;

        letter-spacing: -0.8px;

    }


    .aap-intro-card p {

        font-size: 14px;

        line-height: 1.65;

    }


    .aap-feature-pills {

        gap: 7px;

        margin-top: 22px;

    }


    .aap-feature-pills span {

        min-height: 33px;

        padding: 0 11px;

        font-size: 10px;

    }


    .aap-benefits-section {

        padding: 50px 0 60px;

    }


    .aap-benefits-grid {

        grid-template-columns: 1fr;

        gap: 12px;

    }


    .aap-benefit-card {

        min-height: auto;

        padding: 25px;

    }


    .aap-benefit-number {

        width: 39px;

        height: 39px;

        margin-bottom: 20px;

    }


    .aap-benefit-card h3 {

        font-size: 18px;

    }


    .aap-benefit-card p {

        font-size: 13px;

    }

}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

    .aap-benefit-card {

        opacity: 1;

        transform: none;

        transition: none;

    }

}
/* =========================================================
   STEP 2D — PREMIUM VIDEOS
   27 LOCKED / UNLOCKED LESSONS
========================================================= */


/* =========================================================
   PREMIUM SECTION
========================================================= */

.aap-premium-section {

    padding: 10px 0 30px;


}


/* =========================================================
   PREMIUM HEADER
========================================================= */

.aap-premium-header {

    max-width: 780px;

    margin: 0 auto 10px;

    text-align: center;

}


.aap-premium-header h2 {

    margin: 0;

    color: var(--aap-dark);

    font-size: clamp(
        32px,
        4vw,
        50px
    );

    line-height: 1.1;

    letter-spacing: -1.5px;

    font-weight: 800;

}


.aap-premium-header p {

    margin: 0px auto 0;

    color: var(--aap-muted);

    font-size: 17px;

    line-height: 1.7;

}


/* =========================================================
   PREMIUM BROWSER
========================================================= */

.aap-premium-browser {

    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 18px;

}


/* =========================================================
   PREMIUM VIDEO CARD
========================================================= */

.aap-premium-card {

    position: relative;

    min-width: 0;

    overflow: hidden;

    border: 1px solid var(--aap-border);

    border-radius: 18px;

    background: #ffffff;

    box-shadow:
        0 8px 28px
        rgba(0, 0, 0, 0.045);

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease,
        border-color 0.25s ease;

}


.aap-premium-card:hover {

    transform: translateY(-4px);

    border-color:
        rgba(182, 139, 60, 0.35);

    box-shadow:
        0 18px 45px
        rgba(0, 0, 0, 0.09);

}


/* =========================================================
   VIDEO AREA
========================================================= */

.aap-premium-card .aap-video-frame {

    position: relative;

    width: 100%;

    aspect-ratio: 16 / 9;

    overflow: hidden;

    background: #161616;

}


/* =========================================================
   IFRAME
========================================================= */

.aap-premium-card .aap-video-frame iframe {

    position: absolute;

    inset: 0;

    width: 100%;

    height: 100%;

    display: block;

    border: 0;

}


/* =========================================================
   THUMBNAIL
========================================================= */

.aap-premium-thumbnail {

    position: absolute;

    inset: 0;

    background-position: center;

    background-size: cover;

    background-repeat: no-repeat;

}


/* =========================================================
   THUMBNAIL DARK OVERLAY
========================================================= */

.aap-premium-thumbnail::after {

    content: "";

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            180deg,
            rgba(0,0,0,0.05),
            rgba(0,0,0,0.55)
        );

}


/* =========================================================
   LOCKED PLACEHOLDER
========================================================= */

.aap-premium-locked-placeholder {

    position: absolute;

    inset: 0;

    display: flex;

    align-items: center;

    justify-content: center;

    flex-direction: column;

    padding: 25px;

background: linear-gradient(135deg, #242424e3, #111111d9);

    color: #ffffff;

    text-align: center;

}


/* =========================================================
   LOCK ICON
========================================================= */

.aap-lock-icon {

    display: flex;

    align-items: center;

    justify-content: center;

    width: 48px;

    height: 48px;

    margin-bottom: 13px;

    border: 1px solid
        rgba(255,255,255,0.18);

    border-radius: 50%;

    background:
        rgba(255,255,255,0.07);

    color: #d7b66d;

    font-size: 20px;

}


/* =========================================================
   LOCKED TEXT
========================================================= */

.aap-locked-text {

    color:
        rgba(255,255,255,0.85);

    font-size: 12px;

    font-weight: 700;

    letter-spacing: 1px;

    text-transform: uppercase;

}


.aap-locked-subtext {

    max-width: 210px;

    margin-top: 5px;

    color:
        rgba(255,255,255,0.52);

    font-size: 11px;

    line-height: 1.5;

}


/* =========================================================
   LOCK OVERLAY
========================================================= */

.aap-lock-overlay {

    position: absolute;

    inset: 0;

    z-index: 3;

    display: flex;

    align-items: center;

    justify-content: center;

    background:
        linear-gradient(
            180deg,
            rgba(0,0,0,0.08),
            rgba(0,0,0,0.48)
        );

    pointer-events: none;

}


/* =========================================================
   LOCK BADGE
========================================================= */

.aap-lock-badge {

    display: inline-flex;

    align-items: center;

    gap: 7px;

    padding: 8px 13px;

    border: 1px solid
        rgba(255,255,255,0.18);

    border-radius: 999px;

    background:
        rgba(0,0,0,0.58);

    backdrop-filter: blur(7px);

    color: #ffffff;

    font-size: 10px;

    font-weight: 800;

    letter-spacing: 1px;

    text-transform: uppercase;

}


/* =========================================================
   LESSON NUMBER
========================================================= */

.aap-premium-number {

    position: absolute;

    top: 13px;

    left: 13px;

    z-index: 5;

    display: flex;

    align-items: center;

    justify-content: center;

    min-width: 39px;

    height: 28px;

    padding: 0 10px;

    border-radius: 999px;

    background:
        rgba(0,0,0,0.68);

    color: #ffffff;

    font-size: 10px;

    font-weight: 800;

    letter-spacing: 0.6px;

    backdrop-filter: blur(6px);

}


/* =========================================================
   VIDEO CONTENT
========================================================= */

.aap-premium-card .aap-video-content {

    padding: 10px;

}


/* =========================================================
   LESSON TITLE
========================================================= */

.aap-premium-card .aap-video-content h3 {

    margin: 0;

    color: var(--aap-dark);

    font-size: 17px;

    line-height: 1.3;

    font-weight: 750;
    letter-spacing: 1px;

}


/* =========================================================
   LOCKED LESSON TITLE
========================================================= */

.aap-premium-card.is-locked
.aap-video-content h3 {

    color: #444444;

}


/* =========================================================
   UNLOCKED TEXT
========================================================= */

.aap-unlocked-text {

    display: inline-flex;

    margin-top: 8px;

    color: var(--aap-success);

    font-size: 10px;

    font-weight: 800;

    letter-spacing: 1px;

    text-transform: uppercase;

}


/* =========================================================
   LOCKED STATUS
========================================================= */

.aap-premium-card.is-locked
.aap-unlocked-text {

    color: #999999;

}


/* =========================================================
   UNLOCKED CARD
========================================================= */

.aap-premium-card.is-unlocked {

    border-color:
        rgba(79,122,89,0.20);

}


/* =========================================================
   UNLOCKED VIDEO HOVER
========================================================= */

.aap-premium-card.is-unlocked:hover {

    border-color:
        rgba(79,122,89,0.35);

}


/* =========================================================
   EMPTY VIDEO PLACEHOLDER
========================================================= */

.aap-video-placeholder {

    position: absolute;

    inset: 0;

    display: flex;

    align-items: center;

    justify-content: center;

    background:
        linear-gradient(
            135deg,
            #eeeeeb,
            #dedbd4
        );

}


.aap-play-placeholder {

    display: flex;

    align-items: center;

    justify-content: center;

    width: 52px;

    height: 52px;

    border-radius: 50%;

    background:
        rgba(255,255,255,0.82);

    color: var(--aap-accent-dark);

    font-size: 18px;

    box-shadow:
        0 8px 25px
        rgba(0,0,0,0.10);

}


/* =========================================================
   SAFETY — LOCKED IFRAMES
========================================================= */

.aap-premium-card.is-locked iframe {

    display: none !important;

}


/* =========================================================
   PREMIUM DIVIDER
========================================================= */

.aap-premium-divider {

    width: 70px;

    height: 2px;

    margin: 0 auto 30px;

    background:
        var(--aap-accent);

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 900px) {

    .aap-premium-section {

        padding: 65px 0 75px;

    }


    .aap-premium-browser {

        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        gap: 15px;

    }


    .aap-premium-card
    .aap-video-content {

        padding: 17px;

    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 600px) {

    .aap-premium-section {

        padding: 50px 0 60px;

    }


   


    .aap-premium-header h2 {

        font-size: 31px;

        letter-spacing: -0.8px;

    }





    .aap-premium-browser {

        grid-template-columns: 1fr;

        gap: 13px;

    }


    .aap-premium-card {

        border-radius: 15px;

    }


    .aap-premium-card
    .aap-video-content {

        padding: 15px 16px 17px;

    }


    .aap-premium-card
    .aap-video-content h3 {

        font-size: 16px;

    }


    .aap-lock-icon {

        width: 42px;

        height: 42px;

        font-size: 17px;

    }


    .aap-locked-text {

        font-size: 10px;

    }


    .aap-locked-subtext {

        font-size: 10px;

    }


    .aap-premium-number {

        top: 10px;

        left: 10px;

        min-width: 35px;

        height: 25px;

        font-size: 9px;

    }

}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

    .aap-premium-card {

        transition: none;

    }

}
/* =========================================================
   STEP 2E — BONUS VIDEOS
   HABIT 28 / 29 / 30
========================================================= */


/* =========================================================
   BONUS SECTION
========================================================= */

.aap-bonus-section {

    position: relative;

    padding: 30px 0 30px;

    background: #ffffff;

    overflow: hidden;

}


/* =========================================================
   BONUS BACKGROUND DETAIL
========================================================= */

.aap-bonus-section::before {

    content: "";

    position: absolute;

    width: 420px;

    height: 420px;

    left: -220px;

    top: 60px;

    border-radius: 50%;

    background:
        rgba(182, 139, 60, 0.055);

    pointer-events: none;

}


/* =========================================================
   BONUS HEADER
========================================================= */

.aap-bonus-header {

    position: relative;

    z-index: 1;

    max-width: 760px;

    margin: 0 auto 40px;

    text-align: center;

}


.aap-bonus-header h2 {

    margin: 0;

    color: var(--aap-dark);

    font-size: clamp(
        32px,
        4vw,
        48px
    );

    line-height: 1.1;

    letter-spacing: -1.4px;

    font-weight: 800;

}


.aap-bonus-header p {

    max-width: 650px;

    margin: 14px auto 0;

    color: var(--aap-muted);

    font-size: 15px;

    line-height: 1.7;

}


/* =========================================================
   BONUS BROWSER
========================================================= */

.aap-bonus-browser {

    position: relative;

    z-index: 1;

    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 18px;

}


/* =========================================================
   BONUS CARD
========================================================= */

.aap-bonus-card {

    position: relative;

    min-width: 0;

    overflow: hidden;

    border: 1px solid
        rgba(182, 139, 60, 0.24);

    border-radius: 20px;

    background:
        linear-gradient(
            180deg,
            #ffffff,
            #faf8f3
        );

    box-shadow:
        0 10px 35px
        rgba(0, 0, 0, 0.055);

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease,
        border-color 0.25s ease;

}


.aap-bonus-card:hover {

    transform: translateY(-5px);

    border-color:
        rgba(182, 139, 60, 0.48);

    box-shadow:
        0 20px 48px
        rgba(0, 0, 0, 0.10);

}


/* =========================================================
   BONUS VIDEO FRAME
========================================================= */

.aap-bonus-card .aap-video-frame {

    position: relative;

    width: 100%;

    aspect-ratio: 16 / 9;

    overflow: hidden;

    background: #171717;

}


/* =========================================================
   BONUS IFRAME
========================================================= */

.aap-bonus-card .aap-video-frame iframe {

    position: absolute;

    inset: 0;

    width: 100%;

    height: 100%;

    display: block;

    border: 0;

}


/* =========================================================
   BONUS THUMBNAIL
========================================================= */

.aap-bonus-thumbnail {

    position: absolute;

    inset: 0;

    background-position: center;

    background-size: cover;

    background-repeat: no-repeat;

}


/* =========================================================
   BONUS THUMBNAIL OVERLAY
========================================================= */

.aap-bonus-thumbnail::after {

    content: "";

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            180deg,
            rgba(0,0,0,0.03),
            rgba(0,0,0,0.52)
        );

}


/* =========================================================
   BONUS BADGE
========================================================= */

.aap-bonus-badge {

    position: absolute;

    top: 14px;

    right: 14px;

    z-index: 5;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    min-height: 28px;

    padding: 0 12px;

    border-radius: 999px;

    background:
        var(--aap-accent);

    color: #ffffff;

    font-size: 9px;

    font-weight: 800;

    letter-spacing: 1.2px;

    text-transform: uppercase;

    box-shadow:
        0 5px 16px
        rgba(0,0,0,0.16);

}


/* =========================================================
   BONUS NUMBER
========================================================= */

.aap-bonus-number {

    position: absolute;

    top: 14px;

    left: 14px;

    z-index: 5;

    display: flex;

    align-items: center;

    justify-content: center;

    min-width: 42px;

    height: 28px;

    padding: 0 10px;

    border-radius: 999px;

    background:
        rgba(0,0,0,0.68);

    color: #ffffff;

    font-size: 10px;

    font-weight: 800;

    letter-spacing: 0.5px;

    backdrop-filter: blur(6px);

}


/* =========================================================
   BONUS CONTENT
========================================================= */

.aap-bonus-card .aap-video-content {

    padding: 20px 21px 22px;

}


/* =========================================================
   BONUS TITLE
========================================================= */

.aap-bonus-card .aap-video-content h3 {

    margin: 0;

    color: var(--aap-dark);

    font-size: 18px;

    line-height: 1.3;

    font-weight: 750;

    letter-spacing: -0.3px;

}


/* =========================================================
   BONUS ACCESS TEXT
========================================================= */

.aap-bonus-access {

    display: inline-flex;

    align-items: center;

    gap: 6px;

    margin-top: 8px;

    color: var(--aap-success);

    font-size: 10px;

    font-weight: 800;

    letter-spacing: 1px;

    text-transform: uppercase;

}


/* =========================================================
   BONUS ACCESS DOT
========================================================= */

.aap-bonus-access::before {

    content: "";

    width: 6px;

    height: 6px;

    border-radius: 50%;

    background:
        currentColor;

}


/* =========================================================
   BONUS PLACEHOLDER
========================================================= */

.aap-bonus-card .aap-video-placeholder {

    background:
        linear-gradient(
            135deg,
            #f0ede5,
            #ddd7ca
        );

}


/* =========================================================
   BONUS PLAY PLACEHOLDER
========================================================= */

.aap-bonus-card
.aap-play-placeholder {

    width: 52px;

    height: 52px;

}


/* =========================================================
   BONUS EMPTY STATE
========================================================= */

.aap-bonus-empty {

    padding: 35px;

    border: 1px dashed
        var(--aap-border);

    border-radius: 18px;

    text-align: center;

    color: var(--aap-muted);

    font-size: 13px;

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 900px) {

    .aap-bonus-section {

        padding: 65px 0 75px;

    }


    .aap-bonus-browser {

        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        gap: 15px;

    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 600px) {

    .aap-bonus-section {

        padding: 50px 0 60px;

    }


    .aap-bonus-header {

        margin-bottom: 28px;

    }


    .aap-bonus-header h2 {

        font-size: 31px;

        letter-spacing: -0.8px;

    }


    .aap-bonus-header p {

        font-size: 13px;

    }


    .aap-bonus-browser {

        grid-template-columns: 1fr;

        gap: 13px;

    }


    .aap-bonus-card {

        border-radius: 16px;

    }


    .aap-bonus-card
    .aap-video-content {

        padding: 16px 17px 18px;

    }


    .aap-bonus-card
    .aap-video-content h3 {

        font-size: 16px;

    }


    .aap-bonus-badge {

        top: 10px;

        right: 10px;

        min-height: 25px;

        padding: 0 9px;

        font-size: 8px;

    }


    .aap-bonus-number {

        top: 10px;

        left: 10px;

        min-width: 37px;

        height: 25px;

        font-size: 9px;

    }


    .aap-bonus-access {

        font-size: 9px;

    }

}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

    .aap-bonus-card {

        transition: none;

    }

}
/* =========================================================
   STEP 2F — PDF JOURNAL + PURCHASE CTA
========================================================= */


/* =========================================================
   PDF / JOURNAL SECTION
========================================================= */

.aap-pdf-section {

    padding: 0px 0 30px;



}


/* =========================================================
   PDF CARD
========================================================= */
.aap-pdf-card {
    position: relative;

    display: grid;
    grid-template-columns: 64px minmax(0, 1fr) auto;

    align-items: center;
    gap: 28px;

    max-width: 1080px;
    margin: 0 auto;

    padding: 38px 42px;

    border: 1px solid var(--aap-border);
    border-radius: 22px;

    background: #ffffff;

    box-shadow:
        0 12px 40px rgba(0, 0, 0, 0.06);

    overflow: hidden;
}


/* =========================================================
   PDF DECORATION
========================================================= */

.aap-pdf-card::after {

    content: "";

    position: absolute;

    right: -90px;

    bottom: -110px;

    width: 260px;

    height: 260px;

    border-radius: 50%;

    background:
        rgba(182, 139, 60, 0.07);

    pointer-events: none;

}


/* =========================================================
   PDF CONTENT
========================================================= */

.aap-pdf-content {

    position: relative;

    z-index: 1;

}


.aap-pdf-content h3 {

    margin: 0;

    color: var(--aap-dark);

    font-size: 25px;

    line-height: 1.25;

    font-weight: 800;

    letter-spacing: -0.5px;

}


.aap-pdf-content p {

    max-width: 650px;

    margin: 9px 0 0;

    color: var(--aap-muted);

    font-size: 14px;

    line-height: 1.65;

}


/* =========================================================
   PDF ICON
========================================================= */

.aap-pdf-icon {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 58px;
    height: 68px;

    margin: 0;

    border-radius: 12px;

    background:
        rgba(182, 139, 60, 0.10);

    color: var(--aap-accent-dark);

    font-size: 20px;

    position: relative;
    z-index: 1;
}


/* =========================================================
   PDF ACTION
========================================================= */

.aap-pdf-action {

    position: relative;

    z-index: 1;

    flex-shrink: 0;

}


/* =========================================================
   PDF BUTTON
========================================================= */

.aap-pdf-button {

    min-width: 190px;

}


/* =========================================================
   PDF LOCKED STATE
========================================================= */

.aap-pdf-locked {

    display: flex;

    align-items: center;

    gap: 10px;

    color: #888888;

    font-size: 12px;

    font-weight: 700;

}


/* =========================================================
   PDF LOCK ICON
========================================================= */

.aap-pdf-lock-icon {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    width: 34px;

    height: 34px;

    border-radius: 50%;

    background: #f2f0ec;

    font-size: 14px;

}


/* =========================================================
   PDF STATUS
========================================================= */

.aap-pdf-status {

    display: block;

    margin-top: 7px;

    color: var(--aap-muted);

    font-size: 11px;

}


/* =========================================================
   PURCHASE SECTION
========================================================= */

.aap-purchase-section {

    position: relative;

    padding: 30px 0 30px;


    overflow: hidden;

}


/* =========================================================
   PURCHASE CARD
========================================================= */

.aap-purchase-card {
    position: relative;
    display: grid;
    grid-template-columns:
        minmax(0, 1.25fr)
        minmax(320px, 0.75fr);
    align-items: center;

    gap: 30px;

    max-width: 1080px;

    margin: 0 auto;

    padding: 48px;

    overflow: hidden;

    border-radius: 25px;

    background:
        linear-gradient(
            135deg,
            #151515 0%,
            #24201a 100%
        );

    box-shadow:
        0 25px 65px
        rgba(0, 0, 0, 0.17);

}


/* =========================================================
   PURCHASE DECOR
========================================================= */

.aap-purchase-card::before {

    content: "";

    position: absolute;

    width: 420px;

    height: 420px;

    right: -170px;

    top: -220px;

    border-radius: 50%;

    background:
        rgba(182, 139, 60, 0.13);

    pointer-events: none;

}


.aap-purchase-card::after {

    content: "";

    position: absolute;

    width: 240px;

    height: 240px;

    left: -140px;

    bottom: -150px;

    border-radius: 50%;

    background:
        rgba(255,255,255,0.025);

    pointer-events: none;

}


/* =========================================================
   PURCHASE CONTENT
========================================================= */

.aap-purchase-content {

    position: relative;

    z-index: 1;

}


.aap-purchase-content .aap-eyebrow {

    color: #d7b66d;

    border-color:
        rgba(215,182,109,0.30);

    background:
        rgba(215,182,109,0.07);

}


.aap-purchase-content h2 {

    max-width: 650px;

    margin: 0;

    color: #ffffff;

    font-size: clamp(
        36px,
        5vw,
        40px
    );

    line-height: 1.03;

    letter-spacing: -2px;

    font-weight: 800;

}


.aap-purchase-content p {

    max-width: 620px;

    margin: 17px 0 0;

    color:
        rgba(255,255,255,0.67);

    font-size: 15px;

    line-height: 1.7;

}


/* =========================================================
   PURCHASE BENEFITS
========================================================= */

.aap-purchase-benefits {

    display: grid;

    gap: 9px;

    margin-top: 25px;

}


.aap-purchase-benefit {

    display: flex;

    align-items: flex-start;

    gap: 10px;

    color:
        rgba(255,255,255,0.84);

    font-size: 15px;

    line-height: 1.5;

}


.aap-purchase-benefit::before {

    content: "✓";

    flex: 0 0 auto;

    color: #d7b66d;

    font-weight: 800;

}


/* =========================================================
   PRICE BOX
========================================================= */

.aap-purchase-price {

    position: relative;

    z-index: 1;

    padding: 30px 25px;

    text-align: center;

    border: 1px solid
        rgba(255,255,255,0.13);

    border-radius: 19px;

    background:
        rgba(255,255,255,0.075);

    backdrop-filter: blur(8px);

}


/* =========================================================
   PRICE
========================================================= */

.aap-purchase-price > span {

    display: block;

    color: #ffffff;

    font-size: 43px;

    line-height: 1;

    font-weight: 850;

    letter-spacing: -1.5px;

}


.aap-purchase-price small {

    display: block;

    margin: 9px 0 22px;

    color:
        rgba(255,255,255,0.55);

    font-size: 10px;

    line-height: 1.5;

}


/* =========================================================
   PURCHASE BUTTON
========================================================= */

.aap-purchase-price .aap-buy-button {

    width: 100%;

    min-height: 56px;

    background:
        var(--aap-accent);

    color: #ffffff;

    box-shadow:
        0 12px 30px
        rgba(182,139,60,0.25);

}


.aap-purchase-price .aap-buy-button:hover {

    background:
        var(--aap-accent-dark);

    box-shadow:
        0 15px 35px
        rgba(182,139,60,0.32);

}


/* =========================================================
   PAYMENT INFORMATION
========================================================= */

.aap-payment-note {

    margin: 13px auto 0;

    max-width: 280px;

    color:
        rgba(255,255,255,0.48);

    font-size: 10px;

    line-height: 1.55;

    text-align: center;

}


/* =========================================================
   NO REFUND NOTE
========================================================= */

.aap-no-refund {

    margin-top: 8px;

    color:
        rgba(255,255,255,0.42);

    font-size: 9px;

    line-height: 1.5;

    text-align: center;

}


/* =========================================================
   UNLOCKED STATE
========================================================= */

.aap-purchase-unlocked {

    position: relative;

    z-index: 1;

    padding: 16px 20px;

    border: 1px solid
        rgba(79,122,89,0.25);

    border-radius: 12px;

    background:
        rgba(79,122,89,0.10);

    color: #9bd0a5;

    font-size: 12px;

    font-weight: 700;

    text-align: center;

}


/* =========================================================
   PURCHASE FORM
========================================================= */

.aap-purchase-card .aap-buy-form {

    margin: 0;

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 900px) {

  .aap-pdf-card {
        grid-template-columns: 1fr;
        gap: 22px;
        padding: 32px;
    }

    .aap-pdf-action {
        width: 100%;
    }

    .aap-pdf-button {
        width: 100%;
    }


    .aap-purchase-card {

        grid-template-columns: 1fr;

        gap: 30px;

        padding: 40px;

    }


    .aap-purchase-price {

        max-width: 430px;

        width: 100%;

        margin: 0 auto;

    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 600px) {

    .aap-pdf-section {

        padding: 50px 0 55px;

    }


    .aap-pdf-card {

        padding: 26px 22px;

        border-radius: 17px;

    }


    .aap-pdf-content h3 {

        font-size: 21px;

    }


    .aap-pdf-content p {

        font-size: 13px;

    }


    .aap-pdf-button {

        min-width: 0;

    }


    .aap-purchase-section {

        padding: 55px 0 65px;

    }


    .aap-purchase-card {

        gap: 27px;

        padding: 32px 20px;

        border-radius: 19px;

    }


    .aap-purchase-content h2 {

        font-size: 37px;

        letter-spacing: -1px;

    }


    .aap-purchase-content p {

        font-size: 13px;

    }


    .aap-purchase-benefits {

        margin-top: 20px;

    }


    .aap-purchase-benefit {

        font-size: 12px;

    }


    .aap-purchase-price {

        padding: 25px 17px;

        border-radius: 16px;

    }


    .aap-purchase-price > span {

        font-size: 37px;

    }


    .aap-purchase-price .aap-buy-button {

        min-height: 52px;

    }

}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

    .aap-purchase-card,
    .aap-pdf-card {

        transition: none;

    }

}
/* =========================================================
   STEP 2G — FINAL MESSAGE + LEGAL FOOTER
========================================================= */


/* =========================================================
   FINAL MESSAGE SECTION
========================================================= */

.aap-final-message {

    position: relative;

    padding: 105px 20px 100px;

    overflow: hidden;

    text-align: center;

    background:
        linear-gradient(
            180deg,
            #ffffff 0%,
            #f7f5f0 100%
        );

}


/* =========================================================
   DECORATIVE CIRCLE
========================================================= */

.aap-final-message::before {

    content: "";

    position: absolute;

    top: 50%;

    left: 50%;

    width: 420px;

    height: 420px;

    transform:
        translate(-50%, -50%);

    border-radius: 50%;

    background:
        rgba(182, 139, 60, 0.055);

    pointer-events: none;

}


/* =========================================================
   HINDI MESSAGE
========================================================= */

.aap-final-hi {

    position: relative;

    z-index: 1;

    max-width: 850px;

    margin: 0 auto;

    color: var(--aap-dark);

    font-size: clamp(
        27px,
        4vw,
        43px
    );

    line-height: 1.25;

    letter-spacing: -0.7px;

    font-weight: 800;

    opacity: 0;

    transform:
        translateY(15px);

    transition:
        opacity 4s ease,
        transform 1.2s ease;

}


/* =========================================================
   ENGLISH MESSAGE
========================================================= */

.aap-final-en {

    position: relative;

    z-index: 1;

    max-width: 700px;

    margin: 18px auto 0;

    color: var(--aap-muted);

    font-size: 15px;

    line-height: 1.6;

    font-weight: 500;

    opacity: 0;

    transform:
        translateY(12px);

    transition:
        opacity 4s ease,
        transform 1.2s ease;

}


/* =========================================================
   VISIBLE STATE
========================================================= */

.aap-final-message.is-visible
.aap-final-hi {

    opacity: 1;

    transform:
        translateY(0);

}


.aap-final-message.is-visible
.aap-final-en {

    opacity: 1;

    transform:
        translateY(0);

    transition-delay: 0.35s;

}


/* =========================================================
   LEGAL FOOTER
========================================================= */

.aap-legal-footer {

    padding: 35px 20px 40px;

    border-top: 1px solid
        rgba(16, 27, 53, 0.08);

    background: #101010;

    color:
        rgba(255,255,255,0.55);

    text-align: center;

}


/* =========================================================
   LEGAL CONTENT
========================================================= */

.aap-legal-footer-inner {

    max-width: 900px;

    margin: 0 auto;

}


.aap-legal-footer p {

    margin: 0 auto;

    max-width: 850px;

    font-size: 10px;

    line-height: 1.7;

}


/* =========================================================
   COPYRIGHT
========================================================= */

.aap-legal-copyright {

    margin-top: 15px !important;

    color:
        rgba(255,255,255,0.35);

    font-size: 9px !important;

}


/* =========================================================
   DISCLAIMER
========================================================= */

.aap-legal-disclaimer {

    color:
        rgba(255,255,255,0.48);

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 600px) {

    .aap-final-message {

        padding: 75px 18px 70px;

    }


    .aap-final-message::before {

        width: 300px;

        height: 300px;

    }


    .aap-final-hi {

        font-size: 26px;

        line-height: 1.3;

    }


    .aap-final-en {

        margin-top: 15px;

        font-size: 13px;

    }


    .aap-legal-footer {

        padding: 28px 16px 32px;

    }


    .aap-legal-footer p {

        font-size: 9px;

        line-height: 1.65;

    }

}


/* =========================================================
   ACCESSIBILITY
========================================================= */

@media (prefers-reduced-motion: reduce) {

    .aap-final-hi,
    .aap-final-en {

        opacity: 1;

        transform: none;

        transition: none;

    }

}
/* =========================================================
   STEP 2H — MOBILE PURCHASE BAR + MOBILE OPTIMIZATION
   ========================================================= */

/* ---------- Sticky Mobile Buy Bar ---------- */

.aap-mobile-buy-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9999;

    display: none;

    padding: 10px 14px;
    background: rgba(15, 15, 15, 0.96);
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: 0 -8px 30px rgba(0, 0, 0, 0.18);

    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.aap-mobile-buy-bar-inner {
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.aap-mobile-buy-bar-copy {
    min-width: 0;
}

.aap-mobile-buy-bar-title {
    margin: 0 0 2px;
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.2;
}

.aap-mobile-buy-bar-price {
    margin: 0;
    color: rgba(255, 255, 255, 0.72);
    font-size: 12px;
    line-height: 1.2;
}

.aap-mobile-buy-bar .aap-buy-button {
    flex: 0 0 auto;
    min-width: 150px;
}


/* ---------- Button Compatibility ---------- */
/*
 * Existing master CSS uses .aap-btn.
 * New course markup may use either .aap-button or .aap-btn.
 * Keep both working.
 */

.aap-btn,
.aap-button {
    cursor: pointer;
}

.aap-btn-primary,
.aap-button-primary {
    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease,
        opacity 0.2s ease;
}

.aap-btn-primary:hover,
.aap-button-primary:hover {
    transform: translateY(-1px);
}

.aap-btn-primary:active,
.aap-button-primary:active, .aap-button-primary:focus {
    transform: translateY(0);
    color: #fff;
    border-radius: 30px;
    box-shadow: 0px 0px;
}
a:focus, a:active{  color: #fff;
    border-radius: 30px;
    box-shadow: 0px 0px;}

.aap-btn:disabled,
.aap-button:disabled {
    cursor: not-allowed;
    opacity: 0.65;
}


/* ---------- Mobile Course Spacing ---------- */

@media (max-width: 767px) {

    .aap-course-container,
    .aap-container {
        width: min(100% - 28px, 100%);
        margin-left: auto;
        margin-right: auto;
    }

    .aap-hero {
        padding-top: 34px;
        padding-bottom: 34px;
    }

    .aap-hero h1 {
        font-size: clamp(28px, 8vw, 40px);
        line-height: 1.08;
    }

    .aap-hero p {
        font-size: 15px;
        line-height: 1.65;
    }

    .aap-section {
        padding-top: 34px;
        padding-bottom: 34px;
    }

    .aap-section-title {
        font-size: 25px;
        line-height: 1.2;
    }

    .aap-section-subtitle {
        font-size: 14px;
        line-height: 1.6;
    }


    /* ---------- Main Preview ---------- */

    .aap-preview-section {
        padding-top: 24px;
        padding-bottom: 28px;
    }

    .aap-preview-video-wrapper,
    .aap-preview-video {
        border-radius: 12px;
    }

    .aap-preview-gate {
        padding: 18px;
    }

    .aap-preview-gate-inner {
        width: 100%;
    }

    .aap-preview-gate h3 {
        font-size: 22px;
    }

    .aap-preview-gate p {
        font-size: 14px;
    }


    /* ---------- Benefits ---------- */

    .aap-benefits-grid {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .aap-benefit-card {
        padding: 18px;
    }


    /* ---------- Premium Videos ---------- */

    .aap-premium-grid {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .aap-premium-card {
        border-radius: 12px;
    }


    /* ---------- Bonus Videos ---------- */

    .aap-bonus-grid {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .aap-bonus-card {
        border-radius: 12px;
    }


    /* ---------- Journal ---------- */

    .aap-pdf-card {
        padding: 20px;
    }


    /* ---------- Purchase ---------- */

    .aap-purchase-card {
        padding: 22px 18px;
        border-radius: 14px;
    }

    .aap-purchase-card h2 {
        font-size: 25px;
    }

    .aap-purchase-price {
        font-size: 28px;
    }

    .aap-purchase-card .aap-buy-button,
    .aap-purchase-card .aap-btn,
    .aap-purchase-card .aap-button {
        width: 100%;
    }


    /* ---------- Final Message ---------- */

    .aap-final-message {
        min-height: 220px;
        padding: 35px 18px;
    }

    .aap-final-message-hindi,
    .aap-final-message-english {
        font-size: 21px;
        line-height: 1.4;
    }


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

    .aap-legal-footer {
        padding-bottom: 95px;
    }


    /* ---------- Show Sticky Bar ---------- */

    .aap-mobile-buy-bar {
        display: block;
    }

}


/* ---------- Small Phones ---------- */

@media (max-width: 420px) {

    .aap-mobile-buy-bar {
        padding: 9px 10px;
    }

    .aap-mobile-buy-bar-inner {
        gap: 8px;
    }

    .aap-mobile-buy-bar-title {
        font-size: 12px;
    }

    .aap-mobile-buy-bar-price {
        font-size: 11px;
    }

    .aap-mobile-buy-bar .aap-buy-button,
    .aap-mobile-buy-bar .aap-btn,
    .aap-mobile-buy-bar .aap-button {
        min-width: 125px;
        padding-left: 12px;
        padding-right: 12px;
        font-size: 12px;
    }

}
/* =========================================================
   STEP 2I — FINAL CLEANUP & VIDEO / MESSAGE STATES
   ========================================================= */

/* ---------- Unified Purchase Buttons ---------- */

.aap-buy-button,
.aap-btn-primary,
.aap-button-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;

    text-decoration: none;
    border: 0;
    outline: none;

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease,
        opacity 0.25s ease;
}

.aap-buy-button:hover,
.aap-btn-primary:hover,
.aap-button-primary:hover {
    text-decoration: none;
    transform: translateY(-2px);
}

.aap-buy-button:active,
.aap-btn-primary:active,
.aap-button-primary:active {
    transform: translateY(0);
}


/* ---------- Loading State ---------- */

.aap-buy-button.is-loading,
.aap-btn-primary.is-loading,
.aap-button-primary.is-loading {
    pointer-events: none;
    opacity: 0.7;
}

.aap-buy-button.is-loading::after,
.aap-btn-primary.is-loading::after,
.aap-button-primary.is-loading::after {
    content: "";
    width: 14px;
    height: 14px;

    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;

    animation: aapButtonSpin 0.7s linear infinite;
}

@keyframes aapButtonSpin {
    to {
        transform: rotate(360deg);
    }
}


/* ---------- Locked Video ---------- */

.aap-premium-card.is-locked,
.aap-bonus-card.is-locked {
    position: relative;
}

.aap-video-lock-overlay,
.aap-lock-overlay {
    pointer-events: none;
}

.aap-premium-card.is-unlocked .aap-video-lock-overlay,
.aap-bonus-card.is-unlocked .aap-video-lock-overlay {
    display: none;
}


/* ---------- Preview Gate ---------- */

.aap-preview-gate {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    transition:
        opacity 0.4s ease,
        visibility 0.4s ease;
}

.aap-preview-gate.is-visible {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}


/* ---------- Final Message ---------- */

.aap-final-message-hindi,
.aap-final-message-english {
    opacity: 0;
    visibility: hidden;
    transform: translateY(12px);

    transition:
        opacity 4s ease,
        transform 4s ease,
        visibility 0s linear 4s;
}

.aap-final-message-hindi.is-visible,
.aap-final-message-english.is-visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);

    transition:
        opacity 4s ease,
        transform 4s ease,
        visibility 0s linear 0s;
}

.aap-final-message-hindi.is-fading-out,
.aap-final-message-english.is-fading-out {
    opacity: 0;
    transform: translateY(-8px);

    transition:
        opacity 4s ease,
        transform 4s ease;
}


/* ---------- Prevent Horizontal Overflow ---------- */

html,
body {
    max-width: 100%;
    overflow-x: hidden;
}

.aap-course-page,
.aap-course-container,
.aap-container {
    max-width: 100%;
}


/* ---------- Mobile Final Message ---------- */

@media (max-width: 767px) {

    .aap-final-message-hindi,
    .aap-final-message-english {
        font-size: 20px;
    }

    .aap-final-message-hindi.is-visible,
    .aap-final-message-english.is-visible {
        transform: translateY(0);
    }
    .aap-premium-locked-placeholder {
    padding: 8px;}
    .aap-lock-icon{background:transparent;border:0px solid;font-size: 12px;}
    .aap-premium-card .aap-video-content {
        padding: 10px;
    }
.aap-pdf-locked {
    display: block;padding: 15px;}
    .aap-pdf-icon {
    width: 45px;
    height: 30px;
    font-size: 15px;

}
    .aap-purchase-section {
        padding: 30px 0px;
    }
    .aap-eyebrow {
    margin-bottom: 5px;}
    .aap-pdf-icon {
    width: 47px;
    height: 30px;
    font-size: 13px;
}
.aap-course-page .aap-final-hi, .aap-course-page .aap-final-en {
    font-size: 20px;}
    .aap-course-page .aap-final-message{padding:20px}

}