{} *{} {}
     


      #IE-warning {
        display: none;
        position: fixed;
        width: 100%;
        height: 100%;
        z-index: 9999;
        background: white;
      }
      .IE-warning-message {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        text-align: center;
      }
    



 /* ========================================================================== 1. Archive Banner Styles ========================================================================== */ #archive-banner { background-color: red; /* Or #c60f13 */ color: white; /* Base color for the banner */ text-align: center; padding: 12px 15px; font-weight: bold; font-size: 1.1em; line-height: 1.4; width: 100%; box-sizing: border-box; position: sticky; top: 0; z-index: 1000; /* Fix for potential fuzziness */ transform: translateZ(0); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* --- THIS IS THE KEY FIX --- */ /* Ensure *paragraphs* specifically within the banner are white */ #archive-banner p { margin: 0; /* Remove default paragraph margin */ text-align: center; /* Explicitly center text inside */ color: white; /* Override any other p color styles for the banner */ } /* If text is NOT in a <p> tag, you might need a more general rule, like: */ /* #archive-banner * { color: white !important; /* Force ALL elements inside banner white */ /* } */ /* Use the above rule cautiously if the <p> rule doesn't work */ /* ========================================================================== 2. General Body & Reset Styles ========================================================================== */ body { font-family: 'Open Sans', Arial, sans-serif; font-size: 16px; color: #051a32; /* Default text color for the page */ line-height: 1.7; margin: 0; padding: 0; background-color: #fffdf9; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } * { box-sizing: border-box; } strong { font-weight: bold; } em { font-style: italic; } /* ========================================================================== 3. Layout & Containers ========================================================================== */ /* Main Content Containers */ .sales-section-container, .explanation-section, .how-it-works-section, .authority-section, .opportunity-section, .included-items-section, .results-discover-section, .no-catch-section, .closing-faq-section, .site-footer .footer-content { /* Include footer content constrainer */ max-width: 800px; margin-left: auto; margin-right: auto; padding-left: 15px; padding-right: 15px; } /* Section specific styles (borders, padding) */ .explanation-section, .how-it-works-section, .authority-section, .opportunity-section, .included-items-section, .results-discover-section, .no-catch-section, .closing-faq-section { padding-top: 40px; padding-bottom: 40px; border-top: 1px solid #eee; } /* ========================================================================== 4. Typography (Headings, Paragraphs, Lists) ========================================================================== */ /* Headline Styles */ h1, h2, h3 { font-family: 'Sora', Helvetica, Arial, Lucida, sans-serif; color: #051a32; text-align: center; margin: 0 auto 0.75rem auto; line-height: 1.3; max-width: 95%; font-weight: normal; } h1 { font-size: 2.6em; font-weight: 800; margin-bottom: 15px; } h2 { font-size: 1.9em; font-weight: 700; margin-top: 40px; margin-bottom: 30px; } h3 { font-size: 1.4em; font-weight: 600; margin-top: 25px; margin-bottom: 15px; } /* Paragraph Styles */ p { text-align: left; margin-bottom: 1.2em; color: #051a32; /* Default paragraph color */ line-height: 1.7; } /* Centered Paragraph Variants */ p.sub-headline, .safe-checkout-text, .pricing-summary p, .students-count, .closing-remarks p, .site-footer p, .item-content p, .faq-answer p { /* Also center FAQ answers relative to their container */ text-align: center; } /* Explicitly left-align testimonial text */ .testimonial-card p { text-align: left; } p.sub-headline { font-size: 1.2em; color: #666; margin-top: 10px; margin-bottom: 30px; } h3.sub-headline-center { text-align: center; font-size: 1.4em; margin-top: 20px; margin-bottom: 10px; } h3.emphasis em, h3.emphasis strong { font-style: italic; font-weight: bold; } .highlight-red { color: #c60f13; } .underline u, .underline { text-decoration: underline; text-decoration-color: #ffa500; text-decoration-thickness: 2px; text-underline-offset: 3px; } /* List Styles (Features, Checklist, Emoji) */ .features-list, .checklist, .emoji-list { list-style: none; padding-left: 0; margin: 25px auto; max-width: 100%; } .features-list li, .checklist li, .emoji-list li { display: flex; align-items: baseline; margin-bottom: 15px; text-align: left; font-size: 1.05em; } .features-list .checkmark, .checklist .checkmark { color: #ffa500; font-size: 1.2em; line-height: inherit; margin-right: 10px; min-width: 1.3em; text-align: center; flex-shrink: 0; padding-top: 2px; /* Vertical fine-tuning */ } .features-list .list-item-text, .checklist .list-item-text, .emoji-list .list-item-text { color: #051a32; flex-grow: 1; } /* Emoji List Specifics (No Emojis needed) */ .problem-list li, .benefit-list li { padding-left: 0; } .problem-list li::before, .benefit-list li::before { content: ''; display: none; } /* Process List (How It Works) */ .process-list { list-style: none; padding-left: 0; counter-reset: process-counter; max-width: 100%; margin: 30px auto; } .process-list li { counter-increment: process-counter; margin-bottom: 20px; padding-left: 45px; position: relative; text-align: left; font-size: 1.1em; } .process-list li::before { content: counter(process-counter); position: absolute; left: 0; top: 2px; background-color: #ffa500; color: white; width: 30px; height: 30px; border-radius: 50%; text-align: center; line-height: 30px; font-weight: bold; } .process-list strong { display: block; margin-bottom: 5px; font-weight: bold; } /* ========================================================================== 5. Components & Sections ========================================================================== */ /* Top Bar */ .top-bar { display: flex; justify-content: space-between; align-items: center; padding: 15px 0; /* Vertical padding only within container */ border-bottom: 1px solid #eee; margin-bottom: 30px; flex-wrap: wrap; } .top-bar .logo { font-weight: bold; font-size: 1.1em; color: #051a32; text-align: left; flex-grow: 1; padding-right: 10px; /* Add space between logo and contact */ } .top-bar .contact-info { font-size: 0.9em; color: #666; text-align: right; white-space: nowrap; } /* CTA Section */ .cta-section { text-align: center; margin: 40px 0; } .cta-button { display: inline-block; background-color: #ffa500; color: #fff !important; /* Use !important to ensure white text on button */ padding: 18px 35px; font-size: 1.2em; font-weight: bold; text-decoration: none; border-radius: 6px; transition: background-color 0.3s ease; text-transform: uppercase; border: none; cursor: pointer; } .cta-button:hover { background-color: #e69500; color: #fff !important; } .cta-subtext { display: block; margin-top: 8px; font-size: 0.9em; color: #666; /* Subtext color - adjust if needed */ } /* Payment Section */ .payment-section { text-align: center; margin-bottom: 40px; } .safe-checkout-text { font-size: 0.9em; color: #666; margin-bottom: 15px; } .payment-icons { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 15px; } .payment-icons img { height: 28px; max-width: 65px; object-fit: contain; vertical-align: middle; } /* Image/Gallery Styles */ .proof-gallery img, .testimonial-gallery img, /* Note: Testimonial content is in cards now */ .discover-image-container img, .final-offer-image-container img, .item-image img, .how-it-works-section img { max-width: 100%; height: auto; border-radius: 8px; display: block; margin: 0 auto 20px auto; } /* Testimonial Section */ .testimonial-gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 25px; margin-top: 20px; /* Add some space above testimonials */ } .testimonial-card { border: 1px solid #e0e0e0; padding: 25px; background-color: #f9f9f9; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.05); text-align: left; display: flex; flex-direction: column; } .testimonial-card p:last-of-type { margin-bottom: 0; } .testimonial-card .stars { /* Renamed from inline style */ color: #f0ad4e; font-size: 1.3em; margin-bottom: 10px; line-height: 1; text-align: left; /* Already default, but explicit */ } .testimonial-card .testimonial-text { /* Optional class for main text */ font-size: 1em; color: #333; line-height: 1.6; margin-bottom: 15px; } .testimonial-card .testimonial-author { /* Renamed from inline style */ font-weight: bold; font-size: 1em; color: #111; margin: 0; text-align: left; /* Already default, but explicit */ } .testimonial-card .testimonial-title { /* Renamed from inline style */ font-style: italic; font-size: 0.9em; color: #555; margin: 0; text-align: left; /* Already default, but explicit */ } /* Included Items Section */ .item-card { display: flex; flex-direction: column; align-items: center; margin-bottom: 40px; border-bottom: 1px solid #eee; padding-bottom: 30px; text-align: center; } .item-card:last-child { border-bottom: none; padding-bottom: 0; } .item-image { margin-bottom: 20px; max-width: 400px; width: 100%; } .item-content { text-align: center; } .item-content h3 { font-size: 1.6em; margin-bottom: 10px; } .item-content p { text-align: center; /* Explicitly center */ } .bonus-tag { display: inline-block; background-color: #e69500; color: #fff; padding: 3px 8px; font-size: 0.8em; border-radius: 4px; margin-bottom: 10px; text-transform: uppercase; } .students-count { text-align: center; font-size: 1.1em; margin-top: 20px; color: #333; } .students-count .stars { color: #f0ad4e; font-size: 1.2em; display: block; margin-bottom: 5px; } /* Discover Area (within Results Section) */ .discover-area { background-color: #f9f9f9; padding: 30px; border-radius: 8px; margin-top: 20px; } .discover-area h2 { margin-bottom: 25px; } .discover-area .features-list { max-width: 100%; } /* No Catch & Pricing Section */ .no-catch-section p { max-width: 100%; text-align: left; /* Default paragraph alignment in this section */ } .no-catch-section h3.sub-headline-center, .no-catch-section .pricing-summary p, .no-catch-section .cta-section, .no-catch-section .highlight-red-text strong { text-align: center; /* Center specific elements */ } .no-catch-section .highlight-red-text strong { display: block; /* Make the centered strong tag block level */ } .pricing-summary { text-align: center; margin-top: 30px; } .pricing-summary .price { font-size: 2.5em; font-weight: bold; color: #051a32; margin-bottom: 5px; } .pricing-summary .original-price, .pricing-summary .original-price-inline { text-decoration: line-through; color: #999; font-size: 0.6em; font-weight: normal; margin-right: 10px; display: inline-block; /* Ensure it stays inline */ vertical-align: middle; /* Align nicely with main price */ } .pricing-summary .savings { font-size: 1.1em; color: #5da423; font-weight: bold; margin-bottom: 10px; } .pricing-summary .access-info { font-size: 1em; color: #333; } /* Closing Remarks & FAQ Section */ .closing-remarks p { max-width: 100%; text-align: left; /* Left align PS messages */ } .closing-remarks em { font-style: italic; } .closing-remarks .highlight-red-text strong { text-align: center; /* Center the final highlighted message */ display: block; } .faq-container { max-width: 100%; margin: 40px auto 0; } .faq-headline { margin-bottom: 20px; text-align: center; /* Center FAQ headline */ } .faq-item { border-bottom: 1px solid #eee; margin-bottom: 15px; } .faq-item:last-child { border-bottom: none; } .faq-question { font-weight: bold; cursor: pointer; padding: 15px 0; position: relative; list-style: none; /* Remove default marker */ font-size: 1.2em; text-align: left; padding-right: 30px; /* Space for the +/- icon */ } .faq-question::-webkit-details-marker { /* Hide default disclosure triangle */ display: none; } .faq-question::after { /* Custom +/- icon */ content: '+'; position: absolute; right: 0px; top: 50%; transform: translateY(-50%); font-size: 1.4em; line-height: 1; /* Ensure icon aligns vertically */ color: #ffa500; transition: transform 0.2s ease-in-out; } .faq-item[open] > summary.faq-question::after { content: '−'; /* Optional: Add rotation effect */ /* transform: translateY(-50%) rotate(180deg); */ } .faq-answer { padding: 5px 0 15px 15px; /* Indent answer slightly */ } .faq-answer p { margin-bottom: 0; text-align: left; /* Ensure answer text is left-aligned */ } /* ========================================================================== 6. Footer Styles ========================================================================== */ .site-footer { background-color: #333; color: #ccc; /* Default text color in footer */ padding: 30px 0; margin-top: 40px; font-size: 0.9em; /* Footer container spans full width */ max-width: 100%; /* Override section container width */ } .footer-content { /* Constraints are applied via the shared container class */ text-align: center; } .footer-content p { margin-bottom: 10px; line-height: 1.6; color: #ccc; /* Ensure footer paragraphs inherit footer color */ text-align: center; } .footer-content .copyright { font-weight: bold; } /* ========================================================================== 7. Responsiveness (Media Queries) ========================================================================== */ @media (max-width: 980px) { h1 { font-size: 2.2em; } h2 { font-size: 1.7em; } h3 { font-size: 1.35em; } .cta-button { font-size: 1.1em; padding: 15px 30px; } .pricing-summary .price { font-size: 2em; } .faq-question { font-size: 1.1em; } } @media (max-width: 767px) { /* Reduce container padding */ .sales-section-container, .explanation-section, .how-it-works-section, .authority-section, .opportunity-section, .included-items-section, .results-discover-section, .no-catch-section, .closing-faq-section, .site-footer .footer-content { padding-left: 10px; padding-right: 10px; } .top-bar { flex-direction: column; text-align: center; padding: 10px 0; } .top-bar .logo { margin-bottom: 10px; text-align: center; padding-right: 0; } .top-bar .contact-info { margin-top: 5px; text-align: center; } h1 { font-size: 1.9em; line-height: 1.2; max-width: 100%; } h2 { font-size: 1.5em; max-width: 100%; margin-top: 30px; margin-bottom: 25px;} h3 { font-size: 1.25em; max-width: 100%; } p.sub-headline { font-size: 1em; } .features-list .list-item-text, .emoji-list li, /* Target the li for font-size */ .checklist li { /* Target the li for font-size */ font-size: 0.95em; } /* Keep checklists aligned left on mobile */ .features-list li, .checklist li { display: flex; flex-direction: row; /* Ensure row layout */ align-items: baseline; /* Baseline align */ text-align: left; /* Left align text */ padding-left: 0; } .features-list .checkmark, .checklist .checkmark { margin-right: 10px; margin-bottom: 0; font-size: 1.2em; line-height: 1.7; /* Adjust if needed */ flex-shrink: 0; /* Prevent shrinking */ padding-top: 2px; /* Align checkmark */ } /* Ensure emoji list text also aligns left */ .emoji-list li { text-align: left; /* Align left */ padding-left: 0; /* Remove any potential indent */ } .cta-button { font-size: 1em; padding: 12px 25px; } .payment-icons img { height: 25px; } .process-list li { font-size: 1em; padding-left: 40px; } .testimonial-gallery { grid-template-columns: 1fr; gap: 15px;} /* Stack testimonials */ .pricing-summary .price { font-size: 1.8em; } .faq-question { font-size: 1em; } .site-footer { padding: 20px 10px; } } @media (max-width: 480px) { body { font-size: 15px; } h1 { font-size: 1.7em; } h2 { font-size: 1.35em; } h3 { font-size: 1.15em; } .features-list .list-item-text, .emoji-list li, .checklist li { font-size: 0.9em; } .payment-icons img { height: 22px; } .payment-icons { gap: 8px; } /* Reduce gap on smallest screens */ .cta-button { padding: 10px 20px; font-size: 0.95em;} .pricing-summary .price { font-size: 1.6em; } .pricing-summary .savings, .pricing-summary .access-info { font-size: 0.9em; } .faq-question { font-size: 0.95em; } .faq-answer { font-size: 0.9em; padding-left: 5px; } .top-bar .logo { font-size: 1em; } /* Adjust logo size */ .top-bar .contact-info { font-size: 0.8em; } }