@media (min-width: 768px) {

    /* 1. Top Banner */
    .top-banner {
        background-color: var(--color-banner-red);
        color: white;
        text-align: center;
        padding: 10px 0;
        font-weight: 600;
        font-size: 14px;
        letter-spacing: 0;
    }

    .top-banner span {
        color: #ffd700;
        margin-left: 5px;
    }

    /* 2. Hero Section */
    .hero-section {
        max-width: 1100px;
        margin: 0 auto;
        padding: 40px 20px;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .hero-top {
        text-align: center;
        margin-bottom: 50px;
    }

    .avatar-wrapper {
        width: 100px;
        height: 100px;
        border-radius: 50%;
        overflow: hidden;
        margin: 0 auto 30px;

    }

    .avatar-img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .pill-badge {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        border: 1px dashed var(--color-pink);
        border-radius: 30px;
        padding: 8px 18px;
        background: rgba(20, 18, 24, 0.2);
        margin-bottom: 35px;
        font-size: 20px;
        color: white;
    }

    .dot {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        display: inline-block;
    }

    .pulsing-green {
        background-color: var(--color-green);
        box-shadow: 0 0 0 0 rgba(1, 161, 0, 0.7);
        animation: pulse-green 2s infinite;
    }


    .live-status {
        display: inline-flex;
        align-items: center;
        gap: 12px;
        background: rgba(46, 204, 113, 0.1);
        border: 1px solid rgba(46, 204, 113, 0.2);
        padding: 8px 16px;
        border-radius: 50px;
        margin-bottom: 25px;
    }

    .status-text {
        font-size: 14px;
        font-weight: 500;
        color: var(--color-green);
        font-family: var(--font-body);
    }

    .live-tag {
        background: var(--color-green);
        color: white;
        font-size: 10px;
        font-weight: 700;
        padding: 2px 6px;
        border-radius: 4px;
        text-transform: uppercase;
    }

    .pink-dot {
        background-color: var(--color-pink);
    }

    .main-headline {
        font-family: var(--font-heading);
        font-size: 52px;
        line-height: 1.1;
        font-weight: 600;
        letter-spacing: 0;
        margin-bottom: 25px;
    }

    .hero-subtext {
        font-size: 22px;
        line-height: 1.5;
        color: rgba(255, 255, 255, 0.85);
        margin-bottom: 40px;
        max-width: 800px;
        margin-left: auto;
        margin-right: auto;
    }

    /* 3. Product Card */
    .product-card {
        background-color: var(--color-card-white);
        border-radius: 40px;
        color: #000;
        padding: 60px 50px;
        width: 100%;
        position: relative;
        box-shadow: var(--shadow-premium);
        transition: transform 0.3s ease, box-shadow 0.3s ease;
    }

    .product-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 30px 40px -10px rgba(0, 0, 0, 0.4);
    }

    .card-notion-logo {
        position: absolute;
        top: -30px;
        right: 30px;
        width: 80px;
        z-index: 5;
    }

    .card-notion-logo img {
        width: 100%;
    }

    .card-grid {
        display: grid;
        grid-template-columns: 1.1fr 1fr;
        gap: 40px;
        align-items: flex-start;
    }

    .card-left {
        display: flex;
        flex-direction: column;
        gap: 20px;
    }

    .laptop-img {
        width: 100%;
        height: auto;
    }

    .card-right {
        display: flex;
        flex-direction: column;
    }

    .product-title {
        font-family: var(--font-heading);
        font-size: 32px;
        font-weight: 600;
        line-height: 1.1;
        margin-bottom: 20px;
        letter-spacing: 0;
        color: #000;
    }

    .system-headline {
        font-family: var(--font-heading);
        font-size: 52px;
        font-weight: 600;
        line-height: 1.1;
        margin-bottom: 30px;
        letter-spacing: 0;
        text-transform: none;
        color: white;
    }

    .no-upper {
        text-transform: none;
    }

    .bold-title {
        font-family: var(--font-heading);
        font-weight: 600;
    }

    .review-row {
        display: flex;
        align-items: center;
        gap: 10px;
        margin-bottom: 25px;
    }

    .stars {
        display: inline-flex;
        gap: 4px;
        align-items: center;
    }

    .star-icon {
        width: 22px;
        height: 22px;
        object-fit: contain;
    }

    .review-count {
        color: #4b5563;
        font-size: 14px;
    }

    .centered-review-row {
        justify-content: center;
        margin-bottom: 40px;
    }

    .dark-review-count {
        color: #111 !important;
    }

    .live-status {
        background-color: #f0fdf4;
        border: 1px solid #dcfce7;
        border-radius: 12px;
        padding: 12px 18px;
        display: flex;
        align-items: center;
        gap: 12px;
        margin-bottom: 25px;
    }

    .feature-list {
        list-style: none;
        margin-bottom: 30px;
    }

    .feature-list li {
        display: flex;
        align-items: center;
        gap: 10px;
        margin-bottom: 10px;
        font-size: 16px;
        color: #1f2937;
    }

    .feature-list strong {
        font-weight: 700;
    }

    .price-section {
        display: flex;
        align-items: flex-end;
        gap: 14px;
        margin-bottom: 25px;
    }

    .price-left {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        position: relative;
        padding-top: 22px;
    }

    .was-label {
        font-family: var(--font-heading);
        font-size: 12px;
        font-weight: 700;
        color: #999;
        letter-spacing: 1px;
        text-transform: uppercase;
        position: absolute;
        top: 0;
        left: 0;
    }

    .old-price {
        font-family: var(--font-heading);
        font-size: 32px;
        color: #999;
        text-decoration: line-through;
        text-decoration-color: #ff60cc;
        text-decoration-thickness: 2px;
        font-weight: 400;
        line-height: 1;
        letter-spacing: -1px;
    }

    .price-arrow {
        font-size: 24px;
        color: #ff60cc;
        font-weight: 700;
        flex-shrink: 0;
        margin-bottom: 4px;
    }

    .price-right {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        position: relative;
        padding-top: 22px;
    }

    .discount-badge {
        font-family: var(--font-heading);
        font-size: 12px;
        font-weight: 800;
        background: #ff60cc;
        color: #000;
        border-radius: 20px;
        padding: 3px 10px;
        position: absolute;
        top: 0;
        right: 0;
        white-space: nowrap;
    }

    .new-price {
        font-family: var(--font-heading);
        color: var(--color-green);
        font-size: 48px;
        font-weight: 800;
        line-height: 1;
        letter-spacing: -1px;
        position: relative;
        display: inline-block;
        vertical-align: bottom;
    }

    .price-decimals {
        position: relative;
        display: inline-block;
        font-size: 0.55em;
        vertical-align: baseline;
        margin-left: 2px;
        line-height: 1;
    }

    .discount-badge {
        display: block;
        position: absolute;
        top: -24px;
        right: -29px;
        left: auto;
        transform: none;
        background-color: #ff60cc;
        color: #000;
        font-family: var(--font-heading);
        font-size: 11px;
        font-weight: 800;
        padding: 4px 10px;
        border-radius: 100px;
        white-space: nowrap;
        line-height: 1.2;
        text-align: center;
        min-width: max-content;
        box-sizing: border-box;
        z-index: 10;
    }

    .cta-button {
        background-color: var(--color-pink);
        color: #000;
        border: none;
        border-radius: 14px;
        padding: 24px 60px;
        cursor: pointer;
        display: inline-flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 4px;
        box-shadow: 0 8px 0 #d946ef;
        transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.3s, background-color 0.3s;
        margin-bottom: 20px;
        text-decoration: none;
        min-width: 340px;
        text-align: center;
    }

    .cta-button:hover {
        transform: translateY(-4px);
        box-shadow: 0 12px 20px rgba(217, 70, 239, 0.4), 0 8px 0 #d946ef;
        background-color: #ff80d5;
    }

    .cta-button:active {
        transform: translateY(4px);
        box-shadow: 0 4px 0 #d946ef;
        transition: transform 0.1s;
    }

    .cta-main-text {
        font-family: var(--font-heading);
        font-size: 28px;
        font-weight: 800;
        letter-spacing: 0;
        text-transform: uppercase;
    }

    .cta-sub-text {
        font-family: var(--font-heading);
        font-size: 14px;
        font-weight: 600;
        letter-spacing: 0;
    }

    .guarantee-text {
        text-align: center;
        font-size: 13px;
        color: #374151;
        font-weight: 600;
    }

    /* 4. Arrow */
    .bottom-arrow {
        margin-top: 40px;
        width: 120px;
    }

    .arrow-img {
        width: 100%;
    }

    /* 5. Testimonials Section */
    .testimonials-section {
        background-color: #f2eee3;
        padding: 60px 0 20px;
        color: #000;
    }

    .testimonials-title {
        font-family: var(--font-heading);
        font-size: 52px;
        font-weight: 600;
        line-height: 1.05;
        margin-bottom: 50px;
        letter-spacing: 0;
        text-transform: none;
        text-align: center;
        max-width: 1100px;
        margin-left: auto;
        margin-right: auto;
        padding: 0 20px;
    }

    .testimonial-slider {
        width: 100%;
        overflow: visible;
        padding-top: 10px;
    }

    .testimonial-track {
        display: flex;
        flex-direction: row;
        gap: 16px;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        padding-left: 50px;
        padding-right: 50px;
        scrollbar-width: none;
        cursor: grab;
        user-select: none;
        align-items: flex-start;
    }

    .testimonial-track:active {
        cursor: grabbing;
    }

    .testimonial-track::-webkit-scrollbar {
        display: none;
    }

    .testimonial-card {
        flex: 0 0 350px;
        background-color: #fff;
        color: #000;
        border-radius: 20px;
        padding: 20px;
        scroll-snap-align: center;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
        display: flex;
        flex-direction: column;
        transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        height: fit-content;
        margin-top: 5px;
        /* small top margin to give space for lift */
    }

    .testimonial-card:hover {
        transform: translateY(-5px);
    }

    .card-image-placeholder {
        width: 100%;
        height: 210px;
        background-color: #e5e7eb;
        border-radius: 12px;
    }

    .green-dot {
        background-color: var(--color-green);
    }

    .review-person-img {
        width: 100%;
        height: 210px;
        object-fit: cover;
        border-radius: 12px;
    }

    .card-content {
        padding: 20px 0 0;
        display: flex;
        flex-direction: column;
        gap: 10px;
        /* removed flex-grow to let content dictate height */
    }

    .stars {
        display: flex;
        gap: 3px;
    }

    .star-icon {
        width: 15px;
        height: auto;
    }

    .review-title {
        font-size: 18px;
        font-weight: 600;
        margin-top: 5px;
    }

    .review-text {
        font-size: 14px;
        line-height: 1.5;
        color: #4b5563;
    }

    .card-divider {
        border: 0;
        border-top: 1px solid #eee;
        margin: 10px 0;
    }

    .reviewer-info {
        display: flex;
        align-items: center;
        gap: 15px;
    }

    .reviewer-avatar {
        width: 40px;
        height: 40px;
        background-color: #fff7ed;
        color: #f97316;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: 800;
        font-size: 13px;
    }

    .reviewer-details {
        display: flex;
        flex-direction: column;
    }

    .reviewer-name {
        font-weight: 700;
        font-size: 15px;
    }

    .reviewer-meta {
        font-size: 13px;
        color: #6b7280;
    }

    .verified-tag {
        font-size: 12px;
        color: #6b7280;
        display: flex;
        align-items: center;
        gap: 6px;
    }

    /* 6. Problems Section */
    .problems-section {
        background-color: var(--color-bg-black);
        color: white;
        padding: 60px 0;
        text-align: center;
    }

    .problems-container {
        max-width: 700px;
        margin: 0 auto;
        padding: 0 20px;
    }

    .tagline {
        color: var(--color-pink);
        font-weight: 700;
        font-size: 14px;
        margin-bottom: 10px;
        letter-spacing: 1px;
    }

    .problem-cards {
        display: flex;
        flex-direction: column;
        gap: 20px;
        margin-bottom: 60px;
    }

    .problem-card {
        background: white;
        border-radius: 16px;
        padding: 40px;
        color: #000;
        box-shadow: var(--shadow-md);
        border-left: 4px solid var(--color-pink);
        text-align: left;
        transition: all 0.3s ease;
    }

    .problem-card:hover {
        transform: translateX(10px);
        background: #fffafa;
    }

    .card-title {
        font-size: 22px;
        font-weight: 600;
        margin-bottom: 15px;
    }

    .card-desc {
        font-size: 20px;
        line-height: 1.6;
        color: #000;
    }

    .card-pain-question {
        font-size: 22px;
        line-height: 1.55;
        color: #000;
        font-weight: 500;
        margin: 0;
    }

    .card-pain-question strong {
        font-weight: 600;
    }

    .punchline {
        font-family: var(--font-heading);
        font-size: 36px;
        line-height: 1.1;
        color: white;
        margin-bottom: 60px;
        position: relative;
        display: inline-block;
        letter-spacing: 0;
        font-weight: 600;
    }

    .brush-underline {
        position: absolute;
        bottom: -8px;
        left: -5%;
        width: 110%;
        height: 12px;
        background: var(--color-pink);
        z-index: -1;
        transform: rotate(-1deg);
        opacity: 0.7;
        border-radius: 20% 80% 20% 80% / 80% 20% 80% 20%;
    }

    .story-text {
        text-align: center;
        max-width: 600px;
        margin: 0 auto;
        font-size: 24px;
        line-height: 1.8;
        color: white;
    }

    .story-text p {
        margin-bottom: 30px;
    }

    .story-text strong {
        font-size: 22px;
    }

    .highlight-green {
        background-color: var(--color-green);
        color: white;
        padding: 2px 8px;
        border-radius: 4px;
    }

    .system-headline.dark-text,
    .provocative-cta {
        color: #111;
    }

    .provocative-cta {
        font-family: var(--font-heading);
        font-size: 32px;
        font-weight: 600;
        line-height: 1.05;
        letter-spacing: 0;
        margin-bottom: 40px;
        text-align: center;
        color: white;
    }

    /* 7. Features Showcase Section */
    .features-showcase {
        background-color: #f2eee3;
        padding: 80px 0;
        color: #111;
    }

    .features-intro {
        max-width: 900px;
        margin: 0 auto 60px;
        text-align: center;
    }

    .showcase-headline {
        font-size: 48px;
        line-height: 1.1;
        margin-bottom: 30px;
        letter-spacing: 0;
        font-weight: 600;
    }

    .benefits-list {
        list-style: none;
        padding: 0;
        display: inline-grid;
        grid-template-columns: repeat(2, 1fr);
        column-gap: 80px;
        row-gap: 20px;
        margin-bottom: 40px;
        font-size: 24px;
        font-weight: 500;
        text-align: left;
    }

    .benefits-list li {
        display: flex;
        align-items: center;
        gap: 12px;
    }

    .more-features-text {
        font-size: 22px;
        color: #111;
    }

    /* Removed 42px override to use standard 52px system-headline style */


    .large-media-showcase {
        max-width: 1000px;
        margin: 0 auto 100px;
    }

    .media-placeholder {
        background-color: #d1d5db;
        border-radius: 20px;
        width: 100%;
        aspect-ratio: 16 / 9;
    }

    .media-placeholder.large {
        aspect-ratio: 21 / 9;
    }

    .feature-cards-container {
        max-width: 1100px;
        margin: 0 auto;
        display: flex;
        flex-direction: column;
        gap: 80px;
    }

    .feature-card {
        display: flex;
        align-items: center;
        gap: 60px;
        background: transparent;
        padding: 60px;
        border-radius: 40px;
        position: relative;
        border: 1.5px solid rgba(0, 0, 0, 0.15);
        box-shadow: none;
    }

    .feature-card.alternate {
        flex-direction: row-reverse;
    }

    .feature-number {
        position: absolute;
        top: -30px;
        left: 50%;
        transform: translateX(-50%);
        width: 60px;
        height: 60px;
        background-color: var(--color-pink);
        color: white;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-family: var(--font-heading);
        font-size: 28px;
        font-weight: 400;
        z-index: 10;
    }

    .feature-content {
        flex: 1;
    }

    .feature-media {
        flex: 1.2;
    }

    .feature-image {
        width: 100%;
        height: auto;
        display: block;
        border-radius: 16px;
    }

    video.feature-image {
        border-radius: 0;
        clip-path: inset(0 2px 2px 0);
    }

    .feature-tag {
        font-size: 16px;
        font-weight: 700;
        color: #666;
        margin-bottom: 15px;
        letter-spacing: 1px;
    }

    .feature-title {
        font-size: 32px;
        line-height: 1.1;
        margin-bottom: 20px;
        font-weight: 600;
    }

    .feature-desc {
        font-size: 18px;
        line-height: 1.6;
        color: #000;
        margin-bottom: 20px;
    }

    .feature-result {
        margin-top: 25px;
        padding-top: 25px;
        border-top: 1px solid #eee;
    }

    .result-label {
        font-weight: 600;
        margin-bottom: 15px;
        font-size: 18px;
    }

    .check-list {
        list-style: none;
        padding: 0;
        margin: 0;
        display: flex;
        flex-direction: column;
        gap: 12px;
    }

    .check-list li {
        display: flex;
        align-items: center;
        gap: 10px;
        font-size: 18px;
        color: #000;
    }

    .showcase-cta {
        margin-top: 40px;
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .large-cta {
        /* Using unified cta size */
        padding: 24px 60px;
    }

    /* Value Table Section */
    .value-table-section {
        max-width: 680px;
        margin: 60px auto 0;
        text-align: center;
        padding: 0 20px;
    }

    .value-table-headline {
        font-family: var(--font-heading);
        font-size: 32px;
        font-weight: 400;
        line-height: 1.2;
        color: #111;
        letter-spacing: 0;
        margin-bottom: 14px;
        position: relative;
        display: inline-block;
    }

    .value-table-underline {
        width: 70%;
        height: 4px;
        background: #ff60cc;
        border-radius: 2px;
        margin: 10px auto 50px;
    }

    .value-table {
        display: flex;
        flex-direction: column;
        gap: 0;
        margin-bottom: 40px;
        text-align: left;
    }

    .value-row {
        display: flex;
        align-items: center;
        gap: 24px;
        padding: 16px 0;
        border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    }


    .value-badge {
        display: flex;
        align-items: center;
        justify-content: center;
        background: var(--color-green);
        color: white;
        border-radius: 12px;
        width: 50px;
        height: 50px;
        flex-shrink: 0;
    }

    .value-plus {
        font-size: 28px;
        font-weight: 700;
        font-family: var(--font-heading);
        line-height: 1;
    }

    .value-price {
        font-family: var(--font-heading);
        font-size: 20px;
        font-weight: 500;
        color: #111;
        white-space: nowrap;
        min-width: 110px;
    }

    .value-divider {
        width: 1px;
        height: 28px;
        background: rgba(0, 0, 0, 0.15);
        flex-shrink: 0;
    }

    .value-name {
        font-family: var(--font-heading);
        font-size: 17px;
        font-weight: 600;
        color: #111;
        letter-spacing: 0.3px;
    }

    .value-table-hr {
        border: none;
        border-top: 1px solid rgba(0, 0, 0, 0.12);
        margin: 4px 0 28px;
    }

    .value-total-text {
        font-family: var(--font-heading);
        font-size: 20px;
        color: #000;
        margin-bottom: 16px;
    }

    .value-special-container {
        margin-bottom: 32px;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 20px;
    }

    .value-special-label {
        font-family: var(--font-heading);
        font-size: 40px;
        font-weight: 500;
        color: #111;
        margin: 0;
    }

    .value-special-price-row {
        display: inline-flex;
        align-items: center;
        gap: 12px;
        vertical-align: middle;
    }

    .value-special-number {
        font-family: var(--font-heading);
        font-size: 48px;
        color: var(--color-green);
        font-weight: 800;
        display: inline-block;
        vertical-align: bottom;
    }

    /* Badge is now handled inside .price-decimals globally */

    .value-trust-badges {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 32px;
        font-family: var(--font-heading);
        font-size: 17px;
        font-weight: 700;
        color: #111;
        margin-bottom: 36px;
    }

    /* 8. Customer Reviews Section */
    .reviews-section {
        background-color: var(--color-bg-black);
        color: white;
        padding: 80px 0;
        text-align: center;
    }

    .reviews-container {
        max-width: 1200px;
        margin: 0 auto;
        padding: 0 20px;
    }

    .reviews-count-headline {
        font-family: var(--font-heading);
        font-size: 110px;
        margin-bottom: 0px;
        line-height: 0.9;
        font-weight: 600;
        letter-spacing: 0;
    }

    .reviews-rating-bar {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 15px;
        margin-bottom: 60px;
    }

    .stars {
        color: #ffb400;
        font-size: 24px;
    }

    .rating-text {
        font-family: var(--font-body);
        font-size: 16px;
        opacity: 0.8;
    }

    .reviews-grid {
        column-count: 3;
        column-gap: 20px;
        margin-top: 60px;
    }

    .review-img-card {
        width: 100%;
        margin-bottom: 20px;
        break-inside: avoid;
        border-radius: 20px;
        border: 1px solid rgba(255, 255, 255, 0.05);
        transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.4s ease;
        display: block;
    }

    .review-img-card:hover {
        transform: translateY(-5px) scale(1.01);
        border-color: rgba(255, 255, 255, 0.2);
        cursor: zoom-in;
    }

    .reviewer-name {
        font-weight: 600;
        font-size: 13px;
        display: flex;
        align-items: center;
        gap: 5px;
    }

    .verified-check {
        color: #4da6ff;
        font-size: 14px;
    }

    .highlight-pink {
        text-decoration: underline wavy var(--color-pink) 2px;
    }

    .highlight-blue {
        text-decoration: underline wavy #4da6ff 2px;
    }

    /* 9. Comparison Section (Chaos to Clarity) */
    .comparison-section {
        background-color: #f2eee3;
        padding: 60px 0;
        text-align: center;
        color: #111;
    }

    .comparison-container {
        max-width: 800px;
        margin: 0 auto;
        padding: 0 20px;
    }

    .comparison-intro {
        font-family: var(--font-body);
        font-size: 24px;
        line-height: 1.6;
        margin-bottom: 60px;
        color: rgb(17, 17, 17);
        font-weight: 400;
        max-width: 700px;
        text-align: center;
        margin-left: auto;
        margin-right: auto;
    }

    .chaos-pains-block {
        margin: 40px 0 80px;
        text-align: center;
    }

    .chaos-pains-headline {
        font-family: var(--font-heading);
        font-size: 32px;
        font-weight: 600;
        line-height: 57px;
        margin-bottom: 30px;
        letter-spacing: 0;
        color: #111;
    }

    .chaos-pains-subtitle {
        font-family: var(--font-body);
        font-size: 24px;
        line-height: 1.6;
        margin-bottom: 40px;
        color: rgb(17, 17, 17);
        max-width: 700px;
        text-align: center;
        margin-left: auto;
        margin-right: auto;
    }

    .chaos-pains-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
        margin-bottom: 60px;
    }

    .pain-column {
        display: flex;
        flex-direction: column;
        gap: 20px;
        flex: 1;
    }

    .pain-img {
        width: 100%;
        border-radius: 8px;
        box-shadow: var(--shadow-sm);
    }

    .chaos-pains-footer {
        text-align: center;
        max-width: 650px;
        margin: 0 auto;
        font-size: 24px;
        line-height: 1.8;
        color: #111;
    }

    .chaos-pains-footer p {
        margin-bottom: 25px;
    }

    .comparison-table {
        display: grid;
        grid-template-columns: 1fr 1fr;
        border-top: 1px solid rgba(0, 0, 0, 0.1);
        position: relative;
        text-align: left;
        color: #111;
    }

    .comparison-table::after {
        content: "";
        position: absolute;
        top: 0;
        bottom: 0;
        left: 50%;
        width: 1px;
        background: rgba(0, 0, 0, 0.1);
    }

    .comparison-header {
        font-family: var(--font-heading);
        font-size: 28px;
        padding: 30px 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 10px;
        text-align: center;
        border-bottom: 1px solid rgba(0, 0, 0, 0.1);
        color: #111;
    }

    .comparison-row {
        display: contents;
    }

    .comparison-cell {
        padding: 25px 20px;
        border-bottom: 1px solid rgba(0, 0, 0, 0.1);
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 15px;
        font-size: 18px;
        font-weight: 500;
        color: #111;
    }

    .old-way-cell {
        justify-content: center;
    }

    .system-cell {
        justify-content: center;
    }

    .comparison-icon {
        font-size: 24px;
        flex-shrink: 0;
    }

    .comparison-footer {
        margin-top: 80px;
        text-align: center;
        max-width: 800px;
        margin-left: auto;
        margin-right: auto;
    }

    .comparison-closing-text,
    .comparison-question {
        font-family: var(--font-body);
        font-size: 24px;
        line-height: 1.6;
        color: rgb(17, 17, 17);
        margin-bottom: 25px;
        text-align: center;
        max-width: 700px;
        margin-left: auto;
        margin-right: auto;
    }

    .comparison-question {
        margin-bottom: 50px;
    }

    .comparison-cta-wrap {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 15px;
    }

    .footer-headline {
        font-family: var(--font-heading);
        font-size: 32px;
        font-weight: 600;
        line-height: 1.05;
        letter-spacing: 0;
        position: relative;
        display: inline-block;
        color: #111;
        margin: 0;
    }

    .footer-highlight {
        position: absolute;
        bottom: -15px;
        left: 10%;
        width: 80%;
        height: 12px;
        background: var(--color-pink);
        opacity: 0.3;
        z-index: -1;
        border-radius: 50% 50% 50% 50% / 100% 100% 0% 0%;
    }

    /* 10. Refund Section */
    .refund-section {
        background-color: var(--color-bg-black);
        padding: 60px 0 20px;
        color: white;
        text-align: center;
    }

    .refund-container {
        max-width: 900px;
        margin: 0 auto;
        padding: 0 20px;
    }

    .refund-intro {
        font-size: 24px;
        opacity: 0.8;
        margin-top: 20px;
        line-height: 1.6;
    }

    .guarantee-badge-wrap {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 20px;
        margin: 20px 0;
        position: relative;
    }

    .guarantee-pill {
        background: #fff;
        color: #000;
        padding: 20px 40px;
        border-radius: 12px;
        font-size: 20px;
        font-weight: 700;
        box-shadow: 0 10px 30px rgba(255, 255, 255, 0.1);
    }

    .laurel-wreath {
        width: 150px;
        height: 150px;
        object-fit: contain;
    }

    .refund-list {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 15px;
        margin-top: 20px;
    }

    .refund-item {
        display: flex;
        align-items: center;
        gap: 10px;
        font-size: 24px;
    }

    /* 11. Final Offer Section */
    .final-offer-section {
        background-color: var(--color-bg-black);
        padding: 20px 0 60px;
        color: white;
    }

    .final-offer-container {
        max-width: 1100px;
        margin: 0 auto;
        padding: 0 20px;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .controversial-quote {
        font-family: var(--font-heading);
        font-size: 38px;
        margin: 0 auto 60px;
        line-height: 1.2;
        max-width: 800px;
        text-align: center;
        text-transform: uppercase;
    }

    .final-card-wrapper {
        position: relative;
        max-width: 950px;
        margin: 0 auto;
    }

    .notion-badge-float {
        position: absolute;
        top: -30px;
        right: -20px;
        width: 80px;
        height: 80px;
        background: white;
        padding: 10px;
        border-radius: 16px;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
        z-index: 20;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    /* 12. Footer */
    .main-footer {
        background-color: var(--color-bg-black);
        padding: 80px 0;
        border-top: 1px solid rgba(255, 255, 255, 0.05);
        text-align: center;
        color: rgba(255, 255, 255, 0.4);
    }

    .footer-logo {
        font-family: var(--font-heading);
        color: white;
        font-size: 24px;
        margin-bottom: 20px;
        letter-spacing: 2px;
    }

    .footer-links {
        display: flex;
        justify-content: center;
        gap: 30px;
        margin-bottom: 20px;
        list-style: none;
        padding: 0;
    }

    .footer-links a {
        color: rgba(255, 255, 255, 0.6);
        text-decoration: none;
        font-size: 14px;
        transition: color 0.3s;
    }

    .footer-links a:hover {
        color: var(--color-pink);
    }

    .footer-contact-info {
        margin-bottom: 30px;
    }

    .footer-contact-info a {
        color: white;
        text-decoration: none;
        font-size: 16px;
        opacity: 0.8;
        transition: opacity 0.3s;
    }

    .footer-contact-info a:hover {
        opacity: 1;
        color: var(--color-pink);
    }

    .copyright {
        font-size: 12px;
        opacity: 0.6;
    }

    /* 13. Author Section ("Who Am I?") */
    .author-section {
        background-color: var(--color-bg-black);
        padding: 80px 0 30px;
        color: white;
    }

    .author-container {
        max-width: 900px;
        margin: 0 auto;
        padding: 0 20px;
    }

    .author-grid {
        display: grid;
        grid-template-columns: 0.8fr 1.2fr;
        gap: 60px;
        align-items: center;
    }

    .author-img {
        width: 100%;
        border-radius: 30px;
        object-fit: cover;
        display: block;
    }

    .author-right {
        display: flex;
        flex-direction: column;
        gap: 15px;
    }

    .author-tag {
        font-family: var(--font-body);
        font-size: 18px;
        text-transform: uppercase;
        letter-spacing: 1px;
        color: rgba(255, 255, 255, 0.7);
        margin-bottom: 0px;
    }

    .author-title {
        font-family: var(--font-heading);
        font-size: 32px;
        font-weight: 600;
        line-height: 1.05;
        letter-spacing: 0;
        margin-bottom: 15px;
    }

    .author-bio {
        font-size: 18px;
        line-height: 1.6;
        opacity: 0.8;
        display: flex;
        flex-direction: column;
        gap: 15px;
    }

    /* Checkout Modal */
    .checkout-modal {
        display: none;
        position: fixed;
        inset: 0;
        background: rgba(20, 18, 24, 0.75);
        backdrop-filter: blur(6px);
        z-index: 99999;
        align-items: center;
        justify-content: center;
        padding: 20px;
    }

    .checkout-modal.active {
        display: flex;
        animation: fadeInModal 0.25s ease;
    }

    .checkout-modal-inner {
        position: relative;
        width: 100%;
        max-width: 780px;
        height: 88vh;
        background: #fff;
        border-radius: 20px;
        overflow: hidden;
        box-shadow: 0 40px 80px rgba(0, 0, 0, 0.5);
        animation: scaleInModal 0.3s cubic-bezier(0.22, 1, 0.36, 1);
    }

    .checkout-close-btn {
        position: absolute;
        top: 14px;
        right: 14px;
        z-index: 10;
        width: 36px;
        height: 36px;
        border-radius: 50%;
        border: none;
        background: var(--color-bg-black);
        color: #fff;
        font-size: 16px;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: background 0.2s;
    }

    .checkout-close-btn:hover {
        background: var(--color-pink);
    }

    .checkout-iframe {
        width: 100%;
        height: 100%;
        border: none;
        display: block;
    }

    /* 14. P.S. Section */
    .ps-section {
        background-color: var(--color-bg-black);
        padding: 10px 0 120px;
        color: white;
        text-align: center;
    }

    .ps-divider {
        border: 0;
        border-top: 1px solid rgba(255, 255, 255, 0.1);
        margin-bottom: 40px;
        width: 100%;
    }

    .ps-container {
        max-width: 750px;
        margin: 0 auto;
        padding: 0 20px;
        display: flex;
        flex-direction: column;
        gap: 35px;
    }

    .ps-title {
        font-family: var(--font-heading);
        font-size: 52px;
        font-weight: 600;
        line-height: 1.05;
        letter-spacing: 0;
        margin-bottom: 30px;
        color: white;
    }

    .ps-text {
        font-size: 24px;
        line-height: 1.7;
        opacity: 0.9;
        margin: 0;
        font-family: var(--font-body);
    }

    .ps-list {
        list-style: none;
        padding: 0;
        margin: 0;
        display: flex;
        flex-direction: column;
        gap: 15px;
    }

    .ps-list li {
        font-size: 24px;
        line-height: 1.7;
        opacity: 0.9;
        font-family: var(--font-body);
        text-align: center;
    }

    .ps-cta-container {
        margin-top: 30px;
    }

    .ps-cta-container .cta-button {
        margin: 0 auto 20px;
    }

    /* 15. FAQ Section */
    .faq-section {
        background-color: #f2eee3;
        padding: 100px 0;
        color: #000;
    }

    .faq-title {
        font-family: var(--font-heading);
        font-size: 52px;
        font-weight: 600;
        line-height: 1.05;
        letter-spacing: 0;
        text-align: center;
        margin-bottom: 60px;
        color: #111;
        text-transform: none;
    }

    .faq-container {
        max-width: 800px;
        margin: 0 auto;
        padding: 0 20px;
        display: flex;
        flex-direction: column;
        gap: 15px;
    }

    .faq-item {
        border: 1px solid rgba(0, 0, 0, 0.2);
        border-radius: 12px;
        background-color: transparent;
        overflow: hidden;
    }

    .faq-question {
        width: 100%;
        text-align: left;
        padding: 25px 30px;
        font-family: var(--font-heading);
        font-size: 24px;
        font-weight: 600;
        background: none;
        border: none;
        cursor: pointer;
        display: flex;
        justify-content: space-between;
        align-items: center;
        color: #111;
    }

    .faq-icon {
        font-size: 32px;
        font-weight: 300;
        line-height: 1;
        transition: transform 0.3s ease;
    }

    .faq-item.active .faq-icon {
        transform: rotate(45deg);
    }

    .faq-answer {
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.4s ease, padding 0.4s ease, opacity 0.4s ease;
        padding: 0 30px;
        font-family: var(--font-body);
        font-size: 18px;
        color: #333;
        line-height: 1.6;
        opacity: 0;
    }

    .faq-item.active .faq-answer {
        max-height: 400px;
        padding: 0 30px 30px;
        opacity: 1;
    }

    .faq-link {
        color: var(--color-pink);
        text-decoration: underline;
    }

    .feature-image {
        width: 100%;
        height: auto;
        margin-top: 25px;
        display: block;
        border-radius: 16px;
    }

    .footer-avatar {
        width: 60px;
        height: 60px;
        border-radius: 50%;
        margin-bottom: 15px;
        object-fit: cover;

    }
}