* {
     margin: 0;
     padding: 0;
     box-sizing: border-box
 }

 :root {
     --bg: #faf9f7;
     --white: #fff;
     --border: #eae8e4;
     --text: #18181b;
     --text-2: #52525b;
     --text-3: #a1a1aa;
     --accent: #b91c1c;
     --accent-hover: #a51b1b;
     --accent-light: #fef2f2;
     --green: #16a34a;
     --green-hover: #15903f;
     --gold: #d97706;
     --r: 8px;
     --shadow-sm: 0 1px 2px rgba(0, 0, 0, .04), 0 1px 3px rgba(0, 0, 0, .06);
     --shadow-md: 0 2px 4px rgba(0, 0, 0, .04), 0 4px 8px rgba(0, 0, 0, .06);
     --shadow-lg: 0 4px 8px rgba(0, 0, 0, .04), 0 8px 16px rgba(0, 0, 0, .08);
     --border-shadow: 0 1px 0 var(--border), 0 1px 3px rgba(0, 0, 0, .03)
 }

 html {
     scroll-behavior: smooth !important;
 }

 body {
     font-family: 'Roboto', sans-serif !important;
     background: var(--bg) !important;
     color: var(--text) !important;
     -webkit-font-smoothing: antialiased !important;
     line-height: 1.6 !important;
     margin: 0 !important;
     padding: 0 !important;
     font-size: 16px !important;
 }

 /* WordPress Reset Overrides - Targeted */
 #custom-landing-page p,
 #custom-landing-page h1,
 #custom-landing-page h2,
 #custom-landing-page h3,
 #custom-landing-page ul,
 #custom-landing-page li,
 #custom-landing-page span,
 #custom-landing-page a,
 #custom-landing-page div,
 #custom-landing-page img {
     box-sizing: border-box !important;
 }

 /* Restore margins that were stripped */
 p {
     margin-bottom: 1em;
     /* Removed !important to allow context */
 }

 .hero-desc {
     margin-bottom: 28px !important;
     /* Force this specific margin back */
 }

 img {
     border: none;
     box-shadow: none;
     max-width: 100%;
     height: auto;
     border-radius: 0;
 }

 a {
     text-decoration: none;
     color: inherit
 }

 .mobile-only {
     display: none;
 }

 .container {
     max-width: 1120px;
     margin: 0 auto;
     padding: 0 24px
 }

 /* === THRIVE WIDTH LOCK === */
 /* Forces strict width - prevents page builder from stretching */
 html,
 body {
     max-width: 100vw !important;
     overflow-x: hidden !important;
 }

 header,
 .hero,
 .stats,
 .story,
 .geniuses,
 .cta,
 .pricing,
 .testimonials,
 .faq,
 .trust,
 footer,
 .section {
     max-width: 100vw !important;
     width: 100% !important;
     overflow-x: hidden !important;
     box-sizing: border-box !important;
     margin-left: 0 !important;
     margin-right: 0 !important;
     padding-left: 0 !important;
     padding-right: 0 !important;
 }

 /* Lock inner containers to design width */
 header .container,
 .hero .container,
 .stats .container,
 .story .container,
 .geniuses .container,
 .cta .container,
 .pricing .container,
 .testimonials .container,
 .faq .container,
 .trust .container,
 footer .container {
     max-width: 1120px !important;
     width: 100% !important;
     margin-left: auto !important;
     margin-right: auto !important;
     padding-left: 24px !important;
     padding-right: 24px !important;
     box-sizing: border-box !important;
 }

 /* Buttons - subtle hover */
 .btn {
     display: inline-flex;
     align-items: center;
     justify-content: center;
     gap: 8px;
     font-family: inherit;
     font-weight: 600;
     font-size: 14px;
     border: none;
     border-radius: var(--r);
     cursor: pointer;
     transition: all .2s ease
 }

 .btn-primary {
     padding: 14px 28px;
     background: var(--accent);
     color: var(--white);
     box-shadow: var(--shadow-sm), 0 2px 4px rgba(185, 28, 28, .15)
 }

 .btn-primary:hover {
     background: var(--accent-hover);
     box-shadow: var(--shadow-md), 0 4px 12px rgba(185, 28, 28, .2);
     transform: translateY(-1px)
 }

 .btn-primary:active {
     transform: translateY(0);
     box-shadow: 0 1px 2px rgba(0, 0, 0, .1)
 }

 .btn-primary svg {
     width: 16px;
     height: 16px
 }

 .btn-secondary {
     padding: 13px 24px;
     background: var(--white);
     color: var(--text);
     border: 1px solid var(--border);
     box-shadow: var(--shadow-sm)
 }

 .btn-secondary:hover {
     border-color: #d4d4d8;
     box-shadow: var(--shadow-md);
     transform: translateY(-1px)
 }

 .btn-secondary:active {
     transform: translateY(0)
 }

 .btn-expand {
     padding: 12px 24px;
     background: var(--white);
     color: var(--text);
     border: 1px solid var(--border);
     border-radius: var(--r);
     box-shadow: var(--shadow-sm)
 }

 .btn-expand:hover {
     box-shadow: var(--shadow-md);
     transform: translateY(-1px)
 }

 /* Header */
 header {
     position: fixed;
     top: 0 !important;
     left: 0;
     right: 0;
     z-index: 100;
     background: rgba(250, 249, 247, .95);
     backdrop-filter: blur(12px);
     box-shadow: 0 1px 0 var(--border), 0 2px 6px rgba(0, 0, 0, .05)
 }

 .header-inner {
     display: flex;
     justify-content: space-between;
     align-items: center;
     height: 64px
 }

 .logo {
     display: flex;
     align-items: center;
     gap: 12px
 }

 .logo-icon {
     font-family: 'Instrument Serif', serif !important;
     font-size: 22px;
     font-style: italic;
     color: var(--accent);
     font-weight: 400
 }

 .logo-text {
     font-weight: 700;
     font-size: 15px;
     /* Restoring to likely intended size,consistent w/ other files */
     letter-spacing: -.02em;
     color: var(--text)
 }

 .nav {
     display: flex;
     gap: 32px
 }

 .nav a {
     font-size: 14px;
     color: var(--text-2);
     font-weight: 500;
     transition: color .2s
 }

 .nav a:hover {
     color: var(--text)
 }

 .header-cta .btn-primary {
     padding: 10px 20px;
     font-size: 13px;
     animation: pulseGlow 2s infinite
 }

 /* Hero */
 .hero {
     padding: 120px 0 80px;
     box-shadow: 0 1px 0 var(--border), 0 6px 12px rgba(0, 0, 0, .08);
     overflow-x: hidden;
 }

 .hero-grid {
     display: grid;
     grid-template-columns: 1fr 320px;
     gap: 64px;
     align-items: center;
     max-width: 1000px;
     margin: 0 auto
 }

 .hero-tag {
     display: inline-flex;
     align-items: center;
     gap: 8px;
     padding: 6px 12px;
     background: var(--accent-light);
     border-radius: var(--r);
     font-size: 12px;
     font-weight: 600;
     color: var(--accent);
     margin-bottom: 20px;
     box-shadow: var(--shadow-sm)
 }

 .hero-tag-dot {
     width: 6px;
     height: 6px;
     background: var(--green);
     border-radius: 50%;
     animation: pulse 2s infinite
 }

 @keyframes pulse {

     0%,
     100% {
         opacity: 1
     }

     50% {
         opacity: .4
     }
 }

 .hero h1 {
     font-size: clamp(36px, 5vw, 52px);
     font-weight: 900;
     line-height: 1.15;
     letter-spacing: -.03em;
     margin-bottom: 16px;
     max-width: 580px;
 }

 .hero h1 em {
     font-family: 'Instrument Serif', serif !important;
     font-style: italic !important;
     font-weight: 400 !important;
 }

 .hero-desc {
     font-size: 17px;
     color: var(--text-2);
     line-height: 1.75;
     margin-bottom: 28px;
     max-width: 480px
 }

 .hero-actions {
     display: flex;
     gap: 12px;
     margin-bottom: 32px
 }

 .hero-meta {
     display: flex;
     gap: 24px;
     padding-top: 24px;
     position: relative
 }

 .hero-meta::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     width: 420px;
     height: 1px;
     background: var(--border)
 }

 .hero-meta-item {
     font-size: 13px;
     color: var(--text-2)
 }

 .hero-meta-item strong {
     color: var(--text);
     font-weight: 700
 }

 /* Book Cover - 20% more 3D */
 /* Book Cover - 20% more 3D */
 .hero-book {
     position: relative;
     perspective: 1000px;
     display: flex;
     justify-content: center;
     align-items: center;
     overflow: clip;
     /* Fix double scrollbar - clip contains glow effect */
     /* Compensate for 80px padding + original offsets + 20px extra lift */
     /* Reduced padding (40px) and asymmetric margins to shift right and lift */
     /* Symmetric margins for perfect centering with 50px padding:-90px top,-50px sides,-50px bottom */
     margin: -90px -50px -50px -50px;
     padding: 50px;
     left: 30px;
     /* Extra padding to show glow/shadow within clipped area */
     pointer-events: none;
     /* Prevent padding from blocking clicks */
 }

 .book-wrapper {
     position: relative;
     width: 350px;
     transform-style: preserve-3d;
     transform: rotateY(-20deg);
     transition: transform .4s ease;
 }

 .book-wrapper:hover {
     transform: rotateY(-28deg) rotateX(8deg) scale(1.04) !important;
     cursor: pointer;
 }

 .book-wrapper,
 .book-cover {
     pointer-events: auto;
 }

 /* Polish Flag Badge - Ribbon Style */
 .book-flag {
     position: absolute;
     top: -5px;
     right: -20px;
     width: 44px;
     height: 28px;
     border-radius: 2px;
     overflow: visible;
     box-shadow: 0 2px 6px rgba(0, 0, 0, .25), 0 4px 12px rgba(0, 0, 0, .15);
     z-index: -1;
     transform: rotate(12deg) perspective(100px) rotateY(-5deg);
     border: none
 }

 .book-flag::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     height: 50%;
     background: linear-gradient(180deg, #ffffff 0%, #f8f8f8 50%, #f0f0f0 100%);
     border-radius: 2px 2px 0 0
 }

 .book-flag::after {
     content: '';
     position: absolute;
     bottom: 0;
     left: 0;
     right: 0;
     height: 50%;
     background: linear-gradient(180deg, #dc2626 0%, #b91c1c 50%, #991b1b 100%);
     border-radius: 0 0 2px 2px
 }

 .book-shadow {
     position: absolute;
     bottom: -20px;
     left: 20px;
     right: -20px;
     height: 80%;
     background: radial-gradient(ellipse at center, rgba(0, 0, 0, .3) 0%, transparent 70%);
     filter: blur(16px);
     z-index: -1;
     opacity: .4;
 }

 .book-cover {
     width: 330px;
     border-radius: 0;
     box-shadow: none;
     position: relative;
     overflow: visible;
     transform-style: preserve-3d;
 }

 .book-cover::before {
     display: none;
 }

 .book-cover::after {
     display: none;
 }

 .book-cover img {
     width: 100%;
     height: auto;
     display: block;
 }

 /* Stats */
 .stats {
     padding: 56px 0;
     background: var(--white);
     box-shadow: 0 -1px 0 var(--border), 0 1px 0 var(--border), inset 0 1px 5px rgba(0, 0, 0, .045), 0 6px 12px rgba(0, 0, 0, .08)
 }

 .stats-grid {
     display: grid;
     grid-template-columns: repeat(4, 1fr);
     gap: 20px
 }

 .stat {
     text-align: center;
     padding: 24px 16px;
     opacity: 0;
     transform: translateY(30px);
     transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1)
 }

 .stat.animate {
     opacity: 1;
     transform: translateY(0)
 }

 .stat:nth-child(1) {
     transition-delay: 0s
 }

 .stat:nth-child(2) {
     transition-delay: 0.1s
 }

 .stat:nth-child(3) {
     transition-delay: 0.2s
 }

 .stat:nth-child(4) {
     transition-delay: 0.3s
 }

 .stat-num {
     font-size: 48px;
     font-weight: 900;
     letter-spacing: -.03em;
     color: var(--text);
     position: relative;
     display: inline-block
 }

 .stat-num::after {
     content: '';
     position: absolute;
     bottom: 4px;
     left: 50%;
     transform: translateX(-50%) scaleX(0);
     width: 32px;
     height: 3px;
     background: var(--accent);
     border-radius: 2px;
     transition: transform 0.4s ease 0.4s
 }

 .stat.animate .stat-num::after {
     transform: translateX(-50%) scaleX(1)
 }

 .stat-label {
     font-size: 14px;
     color: var(--text-2);
     margin-top: 12px;
     font-weight: 500
 }

 /* Section */
 .section {
     padding: 64px 0
 }

 .section-header {
     margin-bottom: 40px
 }

 .section-header h2 {
     font-size: clamp(24px, 3vw, 32px);
     font-weight: 900;
     letter-spacing: -.02em;
     margin-bottom: 8px
 }

 .section-header h2 em {
     font-family: 'Instrument Serif', serif !important;
     font-style: italic;
     font-weight: 400
 }

 .section-header p {
     font-size: 15px;
     color: var(--text-2)
 }

 /* Story Section */
 .story {
     padding: 80px 0;
     background: var(--white);
     box-shadow: 0 -1px 0 var(--border), 0 1px 0 var(--border), inset 0 1px 5px rgba(0, 0, 0, .045), 0 6px 12px rgba(0, 0, 0, .08)
 }

 .story-header {
     text-align: center;
     max-width: 600px;
     margin: 0 auto 56px
 }

 .story-header h2 {
     font-size: clamp(28px, 4vw, 40px);
     font-weight: 900;
     letter-spacing: -.02em;
     margin-bottom: 16px
 }

 .story-header h2 em {
     font-family: 'Instrument Serif', serif !important;
     font-style: italic;
     font-weight: 400
 }

 .story-header p {
     font-size: 17px;
     color: var(--text-2);
     line-height: 1.75
 }

 .story-grid {
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 48px;
     align-items: center;
     margin-bottom: 56px
 }

 .story-content {
     font-size: 16px;
     color: var(--text-2);
     line-height: 1.85
 }

 .story-content p {
     margin-bottom: 20px
 }

 .story-content strong {
     color: var(--text);
     font-weight: 700
 }

 .story-image {
     background: linear-gradient(135deg, #f5f5f4, #e7e5e4);
     border-radius: var(--r);
     aspect-ratio: 4/3;
     display: flex;
     align-items: center;
     justify-content: center;
     position: relative;
     overflow: hidden;
     box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
 }

 .story-image-placeholder {
     font-family: 'Instrument Serif', serif !important;
     font-size: 48px;
     color: rgba(0, 0, 0, .06)
 }

 .story-image-label {
     position: absolute;
     bottom: 16px;
     left: 16px;
     background: var(--white);
     padding: 8px 12px;
     border-radius: 6px;
     font-size: 11px;
     font-weight: 600;
     color: var(--text);
     box-shadow: var(--shadow-sm)
 }

 .story-quote {
     max-width: 700px;
     margin: 0 auto 56px;
     text-align: center
 }

 .story-quote blockquote {
     font-family: 'Instrument Serif', serif !important;
     font-size: clamp(24px, 3vw, 28px);
     font-style: italic;
     color: var(--text);
     line-height: 1.5;
     margin-bottom: 16px
 }

 .story-quote cite {
     font-size: 13px;
     color: var(--text-2);
     font-style: normal
 }

 .story-cta {
     text-align: center;
     max-width: 720px;
     margin: 0 auto;
     padding: 64px 48px 56px;
     background: var(--bg);
     border-radius: 20px;
     box-shadow: inset 0 0 0 1px var(--border)
 }

 .story-cta h3 {
     font-size: clamp(28px, 4vw, 32px);
     font-weight: 900;
     margin-bottom: 12px;
     letter-spacing: -0.02em
 }

 .story-cta h3 em {
     font-family: 'Instrument Serif', serif !important;
     font-style: italic;
     font-weight: 400
 }

 .story-cta p {
     font-size: 16px;
     color: var(--text-2);
     line-height: 1.7;
     margin-bottom: 24px;
     max-width: 520px;
     margin-left: auto;
     margin-right: auto
 }

 .story-cta-book-wrapper {
     margin: 48px 0 56px;
     position: relative
 }

 .story-cta-book-wrapper+.story-cta-features {
     margin-top: 0
 }

 .story-cta-book-wrapper img {
     max-width: 440px;
     width: 100%;
     filter: drop-shadow(0 20px 40px rgba(0, 0, 0, 0.18));
     transform: perspective(1000px) rotateY(6deg) rotateX(2deg);
     transition: transform 0.4s ease
 }

 .story-cta-book-wrapper img:hover {
     transform: perspective(1000px) rotateY(2deg) rotateX(1deg) scale(1.02)
 }

 .story-cta-features {
     display: flex;
     flex-direction: column;
     align-items: center;
     gap: 10px;
     margin-bottom: 40px
 }

 .story-cta-features-inner {
     display: flex;
     flex-direction: column;
     align-items: flex-start;
     gap: 10px
 }

 .story-cta-feature {
     display: flex;
     align-items: center;
     gap: 8px;
     font-size: 16px;
     color: var(--text-2)
 }

 .story-cta-feature .check-icon {
     width: 18px;
     height: 18px;
     border-radius: 50%;
     background: #a1a1aa;
     display: flex;
     align-items: center;
     justify-content: center;
     flex-shrink: 0
 }

 .story-cta-feature .check-icon svg {
     width: 10px;
     height: 10px;
     color: var(--white)
 }

 @media (max-width:640px) {
     .story-cta {
         padding: 48px 28px 44px;
         border-radius: 16px
     }

     .story-cta p {
         font-size: 16px;
         line-height: 1.85
     }

     .story-cta-book-wrapper {
         margin: 36px 0 44px
     }

     .story-cta-book-wrapper img {
         max-width: 320px
     }

     .story-cta-features {
         flex-direction: column;
         align-items: center;
         gap: 12px;
         margin-bottom: 32px
     }
 }

 /* Geniuses */
 .geniuses {
     padding: 80px 0;
     background: linear-gradient(180deg, #27272a 0%, #18181b 100%);
     color: var(--white);
     box-shadow: 0 -8px 20px rgba(0, 0, 0, .12), 0 8px 20px rgba(0, 0, 0, .12)
 }

 .geniuses .section-header {
     text-align: center;
     margin-bottom: 56px
 }

 .geniuses .section-header h2 {
     color: var(--white);
     font-size: clamp(28px, 4vw, 40px);
     margin-bottom: 16px
 }

 .geniuses .section-header p {
     color: rgba(255, 255, 255, .5)
 }

 .genius-grid {
     display: grid;
     grid-template-columns: repeat(4, 1fr);
     gap: 12px
 }

 .genius-card {
     background: rgba(255, 255, 255, .03);
     border: 1px solid rgba(255, 255, 255, .06);
     border-radius: 16px;
     padding: 24px;
     text-align: center;
     transition: all .3s;
     position: relative;
     overflow: hidden
 }

 .genius-card::before {
     content: '';
     position: absolute;
     top: 0;
     left: 50%;
     transform: translateX(-50%);
     width: 50px;
     height: 2px;
     background: linear-gradient(90deg, transparent, var(--accent), transparent)
 }

 .genius-card.hidden {
     display: none
 }

 .genius-card:hover {
     background: rgba(255, 255, 255, .06);
     transform: translateY(-4px)
 }

 .genius-initials {
     font-size: 40px;
     font-weight: 900;
     color: rgba(255, 255, 255, .03);
     margin-bottom: 8px;
     line-height: 1
 }

 .genius-badge {
     display: inline-block;
     font-size: 9px;
     font-weight: 600;
     color: rgba(255, 255, 255, .5);
     background: rgba(255, 255, 255, .06);
     padding: 4px 10px;
     border-radius: 4px;
     margin-bottom: 12px;
     text-transform: uppercase;
     letter-spacing: .08em
 }

 .genius-name {
     font-size: 16px;
     font-weight: 700;
     margin-bottom: 12px
 }

 .genius-name em {
     font-family: 'Instrument Serif', serif !important;
     font-style: italic;
     font-weight: 400;
     color: var(--gold)
 }

 .genius-desc {
     font-size: 13px;
     color: rgba(255, 255, 255, .45);
     line-height: 1.6
 }

 .genius-footer {
     text-align: center;
     margin-top: 32px;
     display: flex;
     flex-direction: column;
     align-items: center;
     gap: 12px
 }

 .genius-footer .btn-expand {
     background: rgba(255, 255, 255, .05);
     color: var(--white);
     border-color: rgba(255, 255, 255, .1);
     box-shadow: 0 2px 8px rgba(0, 0, 0, .2)
 }

 .genius-footer .btn-expand:hover {
     background: rgba(255, 255, 255, .08)
 }

 .genius-counter {
     font-size: 12px;
     color: rgba(255, 255, 255, .4)
 }

 /* CTA */
 .cta {
     padding: 64px 0;
     background: var(--bg)
 }

 .cta-card {
     background: var(--accent);
     border-radius: 16px;
     padding: 48px;
     display: flex;
     flex-direction: column;
     align-items: center;
     text-align: center;
     gap: 24px;
     max-width: 640px;
     margin: 0 auto;
     box-shadow: 0 -1px 0 rgba(0, 0, 0, .2), 0 4px 12px rgba(0, 0, 0, .15)
 }

 .cta h2 {
     font-size: clamp(22px, 2.5vw, 28px);
     font-weight: 900;
     color: var(--white);
     max-width: 400px;
     line-height: 1.5
 }

 .cta h2 em {
     font-family: 'Instrument Serif', serif !important;
     font-style: italic;
     font-weight: 400
 }

 .cta-right {
     display: flex;
     align-items: center;
     gap: 24px
 }

 .cta-stat {
     text-align: center;
     color: var(--white);
     background: rgba(255, 255, 255, .1);
     padding: 16px 24px;
     border-radius: 12px;
     border: 1px solid rgba(255, 255, 255, .15)
 }

 .cta-stat-num {
     font-size: 32px;
     font-weight: 900;
     line-height: 1.1
 }

 .cta-stat-label {
     font-size: 12px;
     opacity: .85;
     font-weight: 500;
     margin-top: 4px;
     text-align: center
 }

 .cta .btn {
     background: var(--white);
     color: var(--accent);
     box-shadow: var(--shadow-md)
 }

 .cta .btn:hover {
     background: #f5f5f5;
     box-shadow: var(--shadow-lg)
 }

 /* Pricing */
 .pricing {
     padding: 80px 0;
     background: var(--white);
     box-shadow: 0 -1px 0 var(--border), 0 1px 0 var(--border), inset 0 1px 5px rgba(0, 0, 0, .045), 0 6px 12px rgba(0, 0, 0, .08);
     scroll-margin-top: 100px
 }

 .pricing .section-header {
     text-align: center;
     margin-bottom: 16px
 }

 .pricing .section-header h2 {
     font-size: clamp(28px, 4vw, 40px)
 }

 .pricing-subtitle {
     text-align: center;
     margin-bottom: 32px
 }

 .pricing-subtitle p {
     font-size: 15px;
     color: var(--text-2)
 }

 .pricing-subtitle strong {
     color: var(--text)
 }

 .price-grid {
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 24px;
     max-width: 900px;
     margin: 0 auto;
     list-style: none;
     align-items: start
 }

 .price-card {
     background: var(--bg);
     border: 2px solid var(--border);
     border-radius: 24px;
     overflow: visible;
     position: relative;
     transition: all .3s;
     box-shadow: var(--shadow-sm)
 }

 .price-card:hover {
     border-color: #d4d4d8;
     box-shadow: var(--shadow-lg);
     transform: translateY(-4px)
 }

 .price-card.featured {
     border-color: var(--accent);
     border-width: 2px
 }

 .price-card.featured::before {
     display: none;
 }

 /* Badge */
 .price-badge {
     position: absolute;
     top: -12px;
     left: 50%;
     transform: translateX(-50%);
     background: var(--accent);
     color: var(--white);
     font-family: 'Roboto', sans-serif;
     font-size: 10px;
     font-style: normal;
     font-weight: 700;
     padding: 6px 14px;
     border-radius: 100px;
     z-index: 5;
     box-shadow: var(--shadow-lg), 0 0 0 3px var(--white);
     white-space: nowrap;
     border: none;
     text-transform: uppercase;
     letter-spacing: 0.1em;
 }

 /* Package Visual - 20% taller */
 .price-visual {
     height: 240px;
     display: flex;
     align-items: center;
     justify-content: center;
     padding: 24px;
     position: relative;
     background: linear-gradient(135deg, #f5f5f4 0%, #e7e5e4 100%);
     border-radius: 22px 22px 0 0;
     overflow: hidden
 }

 .price-mockup {
     display: flex;
     align-items: flex-end;
     justify-content: center;
     gap: 12px;
     transform: perspective(600px) rotateX(5deg)
 }

 .mockup-book {
     width: 80px;
     height: 120px;
     background: linear-gradient(135deg, #292524, #1c1917);
     border-radius: 3px 8px 8px 3px;
     box-shadow: 10px 10px 30px rgba(0, 0, 0, .25);
     position: relative;
     display: flex;
     align-items: center;
     justify-content: center
 }

 .mockup-book::before {
     content: '';
     position: absolute;
     left: 0;
     top: 0;
     bottom: 0;
     width: 6px;
     background: linear-gradient(90deg, rgba(0, 0, 0, .3), transparent)
 }

 .mockup-book span {
     font-family: 'Instrument Serif', serif !important;
     font-size: 10px;
     font-style: italic;
     color: rgba(255, 255, 255, .2);
     padding: 8px;
     text-align: center
 }

 .mockup-tablet {
     width: 70px;
     height: 90px;
     background: linear-gradient(135deg, #3b82f6, #1d4ed8);
     border-radius: 8px;
     box-shadow: 8px 8px 24px rgba(59, 130, 246, .3);
     display: flex;
     align-items: center;
     justify-content: center
 }

 .mockup-tablet span {
     font-size: 9px;
     font-weight: 700;
     color: rgba(255, 255, 255, .5)
 }

 .mockup-phone {
     width: 40px;
     height: 70px;
     background: linear-gradient(135deg, #8b5cf6, #6d28d9);
     border-radius: 6px;
     box-shadow: 6px 6px 20px rgba(139, 92, 246, .3);
     display: flex;
     align-items: center;
     justify-content: center
 }

 .mockup-phone span {
     font-size: 7px;
     font-weight: 700;
     color: rgba(255, 255, 255, .5)
 }

 .mockup-headphones {
     width: 50px;
     height: 50px;
     background: linear-gradient(135deg, #10b981, #047857);
     border-radius: 50%;
     box-shadow: 6px 6px 20px rgba(16, 185, 129, .3);
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 20px
 }

 .mockup-art {
     width: 60px;
     height: 80px;
     background: linear-gradient(135deg, #f59e0b, #d97706);
     border-radius: 6px;
     box-shadow: 6px 6px 20px rgba(245, 158, 11, .3);
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 24px
 }

 .price-body {
     padding: 32px
 }

 .price-header {
     margin-bottom: 20px
 }

 .price-name {
     font-family: 'Roboto', sans-serif;
     font-size: 26px;
     font-weight: 900;
     margin-bottom: 4px;
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
 }

 .price-name em {
     font-family: 'Instrument Serif', serif !important;
     font-style: italic;
     font-weight: 400
 }

 .price-desc {
     font-size: 14px;
     color: var(--text-2)
 }

 .price-amount {
     padding: 20px 0;
     border-top: 1px solid var(--border);
     border-bottom: 1px solid var(--border);
     margin-bottom: 20px
 }

 .price-old {
     font-size: 14px;
     color: var(--text-3);
     text-decoration: line-through;
     margin-bottom: 4px
 }

 .price-now {
     font-family: 'Roboto', sans-serif;
     font-size: 44px;
     font-weight: 900;
     line-height: 1;
     color: var(--accent);
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
 }

 .price-now span {
     font-family: 'Roboto', sans-serif;
     font-size: 16px;
     font-weight: 700;
     color: var(--text);
 }

 .price-save {
     display: inline-block;
     background: var(--accent);
     color: white;
     font-size: 11px;
     font-weight: 700;
     padding: 4px 10px;
     border-radius: 6px;
     margin-top: 8px
 }

 .price-card:first-child .price-save {
     background: var(--green);
 }

 .price-features {
     margin-bottom: 24px
 }

 .price-features div {
     display: flex;
     align-items: flex-start;
     flex-wrap: nowrap;
     gap: 8px;
     font-size: 14px;
     padding: 10px 0;
     border-bottom: 1px solid rgba(0, 0, 0, .04)
 }

 .price-features div:last-child {
     border: none
 }

 .price-features svg {
     width: 18px;
     height: 18px;
     flex-shrink: 0;
     color: var(--green);
     margin-top: 1px
 }

 .price-features strong {
     color: var(--text);
     display: inline;
     margin: 0;
 }

 /* Buttons - subtle hover */
 .price-btn {
     width: 100%;
     padding: 18px 32px;
     font-size: 15px;
     font-weight: 700;
     border-radius: 12px;
     border: none;
     outline: none;
     cursor: pointer;
     transition: all .2s;
     display: flex;
     align-items: center;
     justify-content: center;
     gap: 8px;
     box-shadow: var(--shadow-sm)
 }

 .price-btn-primary {
     background: var(--accent);
     color: var(--white);
     box-shadow: var(--shadow-sm), 0 2px 4px rgba(185, 28, 28, .15)
 }

 .price-btn-primary:hover {
     background: var(--accent-hover);
     transform: translateY(-2px);
     box-shadow: var(--shadow-md), 0 4px 12px rgba(185, 28, 28, .2)
 }

 .price-btn-green {
     background: var(--green);
     color: var(--white);
     box-shadow: var(--shadow-sm), 0 2px 4px rgba(22, 163, 74, .15)
 }

 .price-btn-green:hover {
     background: var(--green-hover);
     transform: translateY(-2px);
     box-shadow: var(--shadow-md), 0 4px 12px rgba(22, 163, 74, .2)
 }

 .price-btn svg {
     width: 18px;
     height: 18px
 }

 .price-btn:focus,
 .price-btn:focus-visible {
     outline: none;
     box-shadow: var(--shadow-sm)
 }

 /* FAQ Section */
 .faq {
     padding: 80px 0;
     background: var(--bg);
     box-shadow: 0 -1px 0 var(--border), 0 1px 0 var(--border), inset 0 3px 8px rgba(0, 0, 0, .04), inset 0 -3px 8px rgba(0, 0, 0, .04)
 }

 .faq .section-header {
     text-align: center;
     margin-bottom: 48px
 }

 .faq .section-header h2 {
     font-size: clamp(28px, 4vw, 40px);
     font-weight: 900;
     letter-spacing: -.02em;
     margin-bottom: 12px
 }

 .faq .section-header h2 em {
     font-family: 'Instrument Serif', serif !important;
     font-style: italic;
     font-weight: 400
 }

 .faq .section-header p {
     font-size: 16px;
     color: var(--text-2)
 }

 .faq-list {
     max-width: 800px;
     margin: 0 auto
 }

 .faq-item {
     background: var(--white);
     border: 1px solid var(--border);
     border-radius: 16px;
     margin-bottom: 12px;
     overflow: hidden;
     transition: all .3s ease;
     box-shadow: var(--shadow-sm)
 }

 .faq-item:hover {
     border-color: #d4d4d8;
     box-shadow: var(--shadow-md)
 }

 .faq-item.active {
     border-color: var(--accent);
     box-shadow: 0 4px 20px rgba(185, 28, 28, .1)
 }

 .faq-question {
     display: flex;
     align-items: center;
     justify-content: space-between;
     gap: 16px;
     padding: 20px 24px;
     cursor: pointer;
     font-size: 16px;
     font-weight: 600;
     color: var(--text);
     background: none;
     border: none;
     width: 100%;
     text-align: left;
     transition: background .2s
 }

 .faq-question:hover {
     background: rgba(0, 0, 0, .02)
 }

 .faq-icon {
     width: 28px;
     height: 28px;
     border-radius: 50%;
     background: var(--accent-light);
     display: flex;
     align-items: center;
     justify-content: center;
     flex-shrink: 0;
     transition: all .3s ease
 }

 .faq-icon svg {
     width: 14px;
     height: 14px;
     color: var(--accent);
     transition: transform .3s ease
 }

 .faq-item.active .faq-icon {
     background: var(--accent);
     transform: rotate(180deg)
 }

 .faq-item.active .faq-icon svg {
     color: var(--white)
 }

 .faq-answer {
     max-height: 0;
     overflow: hidden;
     transition: max-height .4s ease, padding .3s ease
 }

 .faq-item.active .faq-answer {
     max-height: 500px
 }

 .faq-answer-inner {
     padding: 20px 24px 24px 24px;
     font-size: 15px;
     color: var(--text-2);
     line-height: 1.75;
     border-top: 1px solid var(--border);
     margin-top: 0
 }

 .faq-answer-inner strong {
     color: var(--text)
 }

 /* Trust */
 .trust {
     padding: 32px 0;
     background: var(--white);
     box-shadow: 0 -1px 0 var(--border), 0 1px 0 var(--border)
 }

 .trust-inner {
     display: flex;
     justify-content: center;
     gap: 40px
 }

 .trust-item {
     display: flex;
     align-items: center;
     gap: 8px;
     font-size: 13px;
     font-weight: 500;
     color: var(--text-2)
 }

 .trust-item svg {
     width: 18px;
     height: 18px;
     color: var(--green)
 }

 /* Publisher Section (inside Trust) */
 .publisher-divider {
     width: 100vw;
     height: 1px;
     background: var(--border);
     margin: 24px 0;
     margin-left: calc(-50vw + 50%);
 }

 .publisher-section {
     text-align: center;
     padding: 16px 0 8px;
 }

 .publisher-label {
     display: block;
     font-size: 14px;
     color: var(--text-2);
     margin-bottom: 14px;
     font-variant: small-caps;
     letter-spacing: 0.08em;
     font-weight: 500;
 }

 .publisher-logo {
     width: 64px;
     height: 64px;
     border-radius: 50%;
     object-fit: cover;
     border: 1px solid var(--border);
     box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
     transition: all 300ms;
 }

 .publisher-logo:hover {
     border-color: var(--text-3);
     box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
 }

 .publisher-section {
     padding-bottom: 2px;
 }

 /* Story CTA Top */
 .story-cta-top {
     margin-top: 78px;
 }

 @media(max-width:1200px), (pointer:coarse) {
     .story-cta-top {
         margin-top: 48px !important;
     }
 }

 /* Footer */
 footer {
     padding: 20px 0 120px;
     background: var(--bg);
     box-shadow: 0 -1px 0 var(--border), 0 -1px 3px rgba(0, 0, 0, .03)
 }

 .footer-inner {
     display: flex;
     justify-content: space-between;
     align-items: center;
     flex-wrap: wrap;
     /* Safety for small screens */
     gap: 20px;
 }

 .footer-left {
     display: flex;
     align-items: center;
     gap: 24px;
     flex: 1;
     /* Allow it to take up space */
 }

 .footer-logo {
     display: flex;
     align-items: center;
     gap: 8px;
     margin-right: 24px;
     line-height: 1;
     /* Fix vertical alignment */
 }

 .footer-logo-icon {
     font-family: 'Instrument Serif', serif !important;
     font-size: 18px;
     font-style: italic;
     color: var(--accent);
     line-height: 1;
 }

 .footer-logo-text {
     font-weight: 700;
     font-size: 15px;
     /* Increase slightly to match */
     line-height: 1;
     padding-top: 2px;
     /* Optical fix */
 }

 .footer-copy {
     font-size: 13px;
     /* Increase slightly for better match */
     color: var(--text-3);
     line-height: 1;
     padding-top: 4px;
     /* Optical fix to match logo baseline */
     position: relative;
     top: -3px;
     /* Moved 1px higher from -2px */
 }

 .footer-copy .heart {
     display: inline-flex;
     align-items: center;
     padding: 0 4px;
 }

 .footer-copy .heart img {
     width: 14px;
     height: auto;
     border: none;
     box-shadow: none;
     margin: 0;
     transform: translateY(2px);
     /* 2px down as requested */
 }

 .footer-links {
     display: flex;
     align-items: center;
     gap: 6px
 }

 .footer-link {
     font-size: 12px;
     color: var(--text-2);
     padding: 8px 14px;
     border-radius: 8px;
     transition: all .2s;
     border: 1px solid var(--border);
     background: var(--white);
     box-shadow: var(--shadow-sm)
 }

 .footer-link:hover {
     border-color: var(--accent);
     box-shadow: var(--shadow-md)
 }

 @media(max-width:1200px), (pointer:coarse) {
     footer {
         padding: 20px 0 100px !important;
     }

     /* Prevent horizontal scroll */
     html,
     body {
         overflow-x: hidden !important;
     }

     .desktop-only {
         display: none !important;
     }

     .mobile-only {
         display: inline !important;
     }

     .hero-grid {
         grid-template-columns: 1fr;
         max-width: 100%;
         text-align: center;
         display: flex;
         flex-direction: column;
     }

     /* Reduce top padding on mobile */
     .hero {
         padding-top: 100px;
         padding-bottom: 60px;
     }

     /* Show book on mobile - positioned after hero-content (which contains h1) */
     .hero-book {
         display: flex;
         justify-content: center;
         /* Mobile margins logic:Original (-30px) - 20px = -50px top */
         /* Mobile margins logic:Reduced further by 20px (user request) */
         /* Mobile margins logic:Reduced further by 20px (user request) to create positive space? Or less negative? User said "give 20px more... because no spacing" -> likely means shift towards 0 or positive. Current was -50. New -30. */
         /* Mobile margins logic:Added 20px vertical spacing (user request) */
         /* Mobile margins logic:Reverted to 0 (user request) */
         margin: 0;
         margin-left: 0 !important;
         /* Force center override */
         order: 3;
         /* After h1 */
         padding: 50px;
         /* Reduced padding for mobile */
     }

     .book-wrapper,
     .book-cover {
         width: 90% !important;
         max-width: 430px !important;
         margin-left: 0 !important;
     }

     .hero-content {
         order: 1;
         display: contents;
         /* Let children flow into parent flex */
     }

     /* Control order of hero-content children at hero-grid level */
     .hero-tag {
         order: 1;
         margin-bottom: 6px;
     }

     .hero-content h1 {
         order: 2;
     }

     .hero-desc {
         order: 4;
     }

     .hero-actions {
         order: 5;
     }

     .hero-meta {
         order: 6;
         margin-top: 12px;
     }

     /* Remove line break in h1 on mobile */
     .hero-content h1 br {
         display: none;
     }

     .book-wrapper {
         width: 270px;
         transform: rotateY(-9deg) rotateX(2deg) scale(1.01) !important;
         transition: transform 0.4s ease;
     }

     .book-wrapper:hover {
         /* Reduced 3D effect by 20% for mobile */
         transform: rotateY(-9deg) rotateX(2deg) scale(1.01) !important;
     }

     .book-cover img {
         /* Mobile shadow height reduced by ~5-10% (8px -> 7px) */
         box-shadow: 0 7px 18px -6px rgba(0, 0, 0, 0.45) !important;
     }

     .book-cover {
         width: 100% !important;
         /* Fix inherited fixed width */
     }

     /* Manifesto Scaling */
     .manifesto-book {
         max-width: 624px !important;
         width: 100% !important;
         height: auto !important;
     }

     /* Hero meta horizontal on mobile */
     .hero-meta {
         justify-content: center;
         flex-wrap: wrap;
     }

     .hero-meta::before {
         width: 100%;
         left: 0;
     }

     /* Buttons better on mobile */
     .hero-actions {
         justify-content: center;
         flex-wrap: wrap;
     }

     .btn-primary,
     .btn-secondary {
         font-size: 13px;
         padding: 12px 20px;
     }

     .story-grid {
         grid-template-columns: 1fr;
         margin-bottom: 20px !important;
     }

     .story-quote {
         margin-top: 56px;
     }

     .story-image {
         display: block;
         /* Show on mobile */
         box-shadow: var(--shadow-lg);
         border-radius: 12px;
         width: 100%;
     }

     .genius-grid {
         grid-template-columns: 1fr
     }

     .price-grid {
         grid-template-columns: 1fr;
         gap: 40px;
     }

     /* Stats full width on mobile like geniuses */
     .stats {
         margin-left: -24px;
         margin-right: -24px;
         padding-left: 24px;
         padding-right: 24px;
     }

     .cta-card {
         flex-direction: column;
         text-align: center
     }

     .price-card.featured {
         order: -1
     }

     /* Book Parts Box - full width on mobile */
     #bookPartsBox {
         max-width: 100% !important;
         width: 100% !important;
     }
 }

 @media(max-width:1200px), (pointer:coarse) {
     .nav {
         display: none;
         /* Hide nav on mobile */
     }

     .stats-grid {
         grid-template-columns: repeat(2, 1fr);
         gap: 16px;
     }

     .genius-grid {
         grid-template-columns: 1fr
     }

     /* Keep hero-meta horizontal on small screens too */
     .hero-meta {
         flex-direction: row;
         flex-wrap: wrap;
         gap: 12px 20px;
         justify-content: center;
     }

     .hero-meta-item {
         font-size: 12px;
     }


     .trust-inner {
         flex-direction: column;
         align-items: flex-start;
         gap: 16px;
         width: fit-content;
         margin: 0 auto;
         padding-left: 0;
     }

     .trust-item {
         justify-content: flex-start;
         text-align: left;
     }

     /* Footer better spacing on mobile */
     .footer-inner {
         flex-direction: column;
         gap: 24px;
         text-align: center;
         padding: 10px 10px;
     }

     .footer-left {
         flex-direction: column;
         gap: 12px
     }

     .footer-copy {
         margin-top: 4px;
         margin-bottom: 2px;
         top: 0;
     }

     .footer-copy img {
         width: 1em !important;
         height: 1em !important;
         margin: 0 2px;
         vertical-align: middle;
     }

     .footer-logo {
         margin-right: 0;
         justify-content: center;
     }

     .footer-links {
         margin-top: 0;
     }

     /* Sticky CTA - reduced padding */
     .sticky-cta {
         padding: 19px 24px 11px !important;
     }

     /* Hero tighter spacing for iPhone - minimal */
     /* Hero tighter spacing for iPhone - minimal */
     /* Reduced space above header by 20px (was 90 -> 70) -> Back to 90px */
     .hero {
         /* Increased padding to prevent header overlap with nav */
         padding-top: 100px !important;
         padding-bottom: 30px !important;
     }

     .hero-book {
         /* Small mobile:Original (0 0 -10) - Padding (50) - zmniejszono o 10px */
         margin: -90px 0 -80px !important;
         padding: 30px !important;
         left: 0 !important;
     }

     .hero-tag {
         margin-bottom: -30px !important;
     }

     /* Reduced spacing by 15px above header */
     /* Aggressively reduced spacing as requested */
     /* Aggressively reduced spacing as requested */
     .hero h1 {
         margin-top: -10px !important;
         margin-bottom: 32px !important;
         line-height: 1.1 !important;
     }

     /* Reduced massive 30px below description + bigger line height */
     .hero-desc {
         order: 4;
         padding-top: 35px;
         margin-bottom: -30px !important;
         line-height: 1.85 !important;
         max-width: 80% !important;
         margin-left: auto !important;
         margin-right: auto !important;
         /* Changed from center (default) to left */
     }

     /* Reduced massive 40px below buttons */
     .hero-actions {
         margin-bottom: -40px !important;
     }

     /* Stats centered on iPhone */
     .stats {
         text-align: center !important;
     }

     .stats-grid {
         justify-items: center !important;
     }

     /* H1 max-width only on mobile to prevent awkward wrapping */
     .hero h1 {
         max-width: 550px;
     }

     /* CTA card - consistent with other boxes + shadow inherited from global */
     .cta-card {
         border-radius: 16px !important;
     }

     /* Geniuses - full width on mobile,no rounded corners */
     .geniuses {
         border-radius: 0 !important;
         border: none !important;
     }

     /* FAQ question better line-height */
     .faq-question {
         line-height: 1.5 !important;
         font-size: 15px !important;
     }

     /* Fix pricing images on mobile - Keep large */
     /* Fix pricing images on mobile - Keep large */
     .price-visual {
         height: auto !important;
         /* Unlock fixed height to allow image to grow */
         padding: 35px 20px 60px 20px !important;
     }

     .price-visual img {
         transform: none !important;
         width: 100% !important;
         max-width: none !important;
         height: auto !important;
         /* Ensure aspect ratio */
         margin: 0 auto;
         object-fit: contain !important;
     }

     /* Shift Premium Package Image Left on Mobile */
     .price-card.featured .price-visual img {
         transform: none !important;
     }

     /* Ultra package image - shift up and left on mobile */
     .ultra-content .price-visual img {
         transform: none !important;
     }

     /* Add spacing for 69zl package */
     .price-card:not(.featured) .price-visual {
         padding-top: 35px !important;
     }
 }

 /* ===== EPIC FEATURES ===== */
 /* 1. Countdown Timer */
 .countdown-wrapper {
     display: flex;
     align-items: center;
     gap: 16px;
     margin-top: 12px;
     padding: 12px 16px;
     background: linear-gradient(135deg, #fef2f2 0%, #fff5f5 100%);
     border: 1px solid rgba(185, 28, 28, 0.15);
     border-radius: 12px;
     max-width: fit-content
 }

 .countdown-label {
     font-size: 12px;
     font-weight: 600;
     color: var(--accent);
     text-transform: uppercase;
     letter-spacing: 0.5px
 }

 .countdown-timer {
     display: flex;
     gap: 8px
 }

 .countdown-item {
     display: flex;
     flex-direction: column;
     align-items: center;
     min-width: 42px
 }

 .countdown-num {
     font-size: 20px;
     font-weight: 900;
     color: var(--accent);
     line-height: 1;
     font-variant-numeric: tabular-nums
 }

 .countdown-unit {
     font-size: 9px;
     color: var(--text-2);
     text-transform: uppercase;
     letter-spacing: 0.5px;
     margin-top: 2px
 }

 .countdown-sep {
     font-size: 18px;
     font-weight: 700;
     color: var(--accent);
     opacity: 0.5;
     animation: blink 1s infinite
 }

 @keyframes blink {

     0%,
     100% {
         opacity: 0.5
     }

     50% {
         opacity: 0
     }
 }

 /* 2. Live Sales Notifications */
 .sales-notification {
     position: fixed;
     bottom: 100px;
     left: 24px;
     background: var(--white);
     border: 1px solid var(--border);
     border-radius: 12px;
     padding: 12px 16px;
     display: flex;
     align-items: center;
     gap: 12px;
     box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
     z-index: 1000;
     transform: translateX(-120%);
     transition: transform 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
     max-width: 320px
 }

 .sales-notification.show {
     transform: translateX(0)
 }

 .sales-notification-icon {
     width: 40px;
     height: 40px;
     background: var(--green);
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     flex-shrink: 0
 }

 .sales-notification-icon svg {
     width: 20px;
     height: 20px;
     color: white
 }

 .sales-notification-content {
     flex: 1
 }

 .sales-notification-title {
     font-size: 13px;
     font-weight: 600;
     color: var(--text);
     margin-bottom: 2px
 }

 .sales-notification-time {
     font-size: 11px;
     color: var(--text-3)
 }

 /* 3. Sticky CTA Bar */
 .sticky-cta {
     position: fixed;
     bottom: 0;
     left: 0;
     right: 0;
     background: var(--white);
     border-top: 1px solid var(--border);
     padding: 24px 24px 20px;
     display: flex;
     justify-content: center;
     align-items: center;
     gap: 24px;
     z-index: 999;
     z-index: 999;
     transform: translateY(100%);
     transition: transform 0.3s ease;
     box-shadow: 0 -3px 16px rgba(0, 0, 0, 0.08)
 }

 .sticky-cta.show {
     transform: translateY(0)
 }

 .sticky-cta-price {
     display: flex;
     align-items: baseline;
     gap: 8px
 }

 .sticky-cta-old {
     font-size: 14px;
     color: var(--text-3);
     text-decoration: line-through
 }

 .sticky-cta-now {
     font-size: 24px;
     font-weight: 900;
     color: var(--accent)
 }

 .sticky-cta .btn-primary {
     animation: pulseGlow 2s infinite
 }

 .sticky-cta-close {
     position: absolute;
     right: 12px;
     top: -10px;
     background: var(--white);
     border: 1px solid var(--border);
     border-radius: 50%;
     width: 24px;
     height: 24px;
     font-size: 16px;
     color: var(--text-3);
     cursor: pointer;
     display: flex;
     align-items: center;
     justify-content: center;
     line-height: 1;
     transition: all 0.2s;
     box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1)
 }

 .sticky-cta-close:hover {
     color: var(--text);
     background: var(--bg);
     border-color: var(--text-3)
 }

 /* 5. Enhanced Scarcity Indicator */
 .scarcity-bar {
     display: flex;
     align-items: center;
     gap: 12px;
     margin-top: 8px
 }

 .scarcity-progress {
     flex: 1;
     max-width: 200px;
     height: 8px;
     background: #eee;
     border-radius: 4px;
     overflow: hidden;
     position: relative
 }

 .scarcity-fill {
     height: 100%;
     background: linear-gradient(90deg, var(--accent) 0%, #dc2626 100%);
     border-radius: 4px;
     width: 68%;
     animation: scarcityPulse 2s infinite
 }

 @keyframes scarcityPulse {

     0%,
     100% {
         opacity: 1
     }

     50% {
         opacity: 0.8
     }
 }

 .scarcity-text {
     font-size: 12px;
     font-weight: 600;
     color: var(--accent)
 }

 .scarcity-dot {
     width: 8px;
     height: 8px;
     background: var(--accent);
     border-radius: 50%;
     animation: pulse 1.5s infinite
 }

 .scarcity-badge {
     display: flex;
     align-items: center;
     justify-content: center;
     gap: 10px;
     margin: 36px auto 61px;
     padding: 10px 20px;
     background: linear-gradient(135deg, #fef2f2 0%, #fff5f5 100%);
     border: 1px solid #fecaca;
     border-radius: 28px;
     font-size: 14px;
     font-weight: 500;
     color: #991b1b;
     letter-spacing: -0.01em;
     box-shadow: 0 2px 8px rgba(185, 28, 28, 0.08);
     max-width: fit-content;
 }

 .scarcity-badge strong {
     font-weight: 700;
     color: #b91c1c;
 }

 /* 6. Pulsing CTA Buttons */
 @keyframes pulseGlow {

     0%,
     100% {
         box-shadow: var(--shadow-sm), 0 2px 4px rgba(185, 28, 28, .15), 0 0 0 0 rgba(185, 28, 28, 0.4)
     }

     50% {
         box-shadow: var(--shadow-sm), 0 2px 4px rgba(185, 28, 28, .15), 0 0 0 8px rgba(185, 28, 28, 0)
     }
 }

 .btn-primary.pulse,
 .btn-pulse {
     animation: pulseGlow 2s infinite
 }

 .price-btn-green {
     background: var(--green);
     color: var(--white);
 }

 .price-btn-green:hover {
     background: var(--green-hover);
 }

 .btn-green-pulse {
     animation: pulseGlowGreen 2s infinite
 }

 @keyframes pulseGlowGreen {

     0%,
     100% {
         box-shadow: var(--shadow-sm), 0 2px 4px rgba(22, 163, 74, .15), 0 0 0 0 rgba(22, 163, 74, 0.4)
     }

     50% {
         box-shadow: var(--shadow-sm), 0 2px 4px rgba(22, 163, 74, .15), 0 0 0 8px rgba(22, 163, 74, 0)
     }
 }

 /* 7. Testimonials Section */
 .testimonials {
     padding: 80px 0;
     background: var(--white);
     box-shadow: inset 0 1px 0 var(--border), inset 0 -1px 0 var(--border)
 }

 .testimonials .section-header {
     text-align: center;
     margin-bottom: 48px
 }

 .testimonials .section-header h2 {
     font-size: clamp(28px, 4vw, 40px);
     font-weight: 900;
     letter-spacing: -.02em;
     margin-bottom: 12px
 }

 .testimonials .section-header h2 em {
     font-family: 'Instrument Serif', serif !important;
     font-style: italic;
     font-weight: 400
 }

 .testimonials-grid {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     gap: 24px
 }

 .testimonial-card {
     background: var(--bg);
     border: 1px solid var(--border);
     border-radius: 16px;
     padding: 24px;
     transition: all 0.3s ease
 }

 .testimonial-card:hover {
     transform: translateY(-4px);
     box-shadow: var(--shadow-lg);
     border-color: var(--accent)
 }

 .testimonial-stars {
     display: flex;
     gap: 2px;
     margin-bottom: 12px
 }

 .testimonial-stars svg {
     width: 16px;
     height: 16px;
     fill: #facc15;
     color: #facc15
 }

 .testimonial-text {
     font-size: 14px;
     color: var(--text-2);
     line-height: 1.7;
     margin-bottom: 16px;
     font-style: italic
 }

 .testimonial-author {
     display: flex;
     align-items: center;
     gap: 12px
 }

 .testimonial-avatar {
     width: 40px;
     height: 40px;
     background: linear-gradient(135deg, var(--accent) 0%, #dc2626 100%);
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     font-weight: 700;
     color: white;
     font-size: 14px
 }

 .testimonial-info {
     flex: 1
 }

 .testimonial-name {
     font-size: 13px;
     font-weight: 600;
     color: var(--text)
 }

 .testimonial-badge {
     font-size: 11px;
     color: var(--green);
     display: flex;
     align-items: center;
     gap: 4px
 }

 .testimonial-badge svg {
     width: 12px;
     height: 12px
 }

 /* 8. Money-Back Guarantee Badge */
 .guarantee-badge {
     display: flex;
     align-items: center;
     justify-content: center;
     gap: 12px;
     padding: 16px 24px;
     background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
     border: 2px solid var(--green);
     border-radius: 12px;
     margin-top: 24px
 }

 .guarantee-badge svg {
     width: 32px;
     height: 32px;
     color: var(--green);
     flex-shrink: 0
 }

 .guarantee-text {
     font-size: 14px;
     color: var(--text)
 }

 .guarantee-text strong {
     color: var(--green);
     font-weight: 700
 }

 /* 9. Price Anchoring Enhancement */
 .price-old-big {
     font-size: 24px !important;
     color: var(--text-3);
     text-decoration: line-through;
     position: relative
 }

 .price-save-badge {
     display: inline-block;
     padding: 4px 10px;
     background: var(--green);
     color: white;
     font-size: 11px;
     font-weight: 700;
     border-radius: 20px;
     margin-left: 8px;
     animation: bounceIn 0.5s ease
 }

 @keyframes bounceIn {
     0% {
         transform: scale(0)
     }

     50% {
         transform: scale(1.2)
     }

     100% {
         transform: scale(1)
     }
 }

 /* 10. Micro-interactions */
 .genius-card {
     transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
 }

 .genius-card:hover {
     transform: translateY(-4px) scale(1.01);
     box-shadow: 0 12px 24px rgba(0, 0, 0, 0.1)
 }

 .price-card {
     transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1)
 }

 .price-card:hover {
     transform: translateY(-3px);
     box-shadow: 0 12px 24px rgba(0, 0, 0, 0.1)
 }

 .faq-item {
     transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1)
 }

 .faq-item:hover {
     transform: none
 }

 /* Instant wysyłka text */
 .instant-shipping {
     text-align: center;
     margin-top: 32px;
     padding: 16px;
     background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
     border-radius: 12px;
     border: 1px solid rgba(22, 163, 74, 0.2)
 }

 .instant-shipping-text {
     font-size: 16px;
     font-weight: 700;
     color: var(--green);
     display: flex;
     align-items: center;
     justify-content: center;
     gap: 8px
 }

 .instant-shipping-text svg {
     width: 20px;
     height: 20px
 }

 @media(max-width:1200px), (pointer:coarse) {
     .testimonials-grid {
         grid-template-columns: 1fr
     }

     .sticky-cta {
         padding: 10px 16px;
         gap: 16px
     }

     .sales-notification {
         bottom: 100px;
         left: 12px;
         right: 12px;
         max-width: none
     }
 }

 @media(max-width:1200px), (pointer:coarse) {
     .countdown-wrapper {
         flex-direction: column;
         align-items: flex-start;
         gap: 8px
     }

     .sticky-cta-price {
         display: block;
         /* Show on mobile too */
     }

     .price-visual {
         min-height: auto !important;
         padding-bottom: 60px !important;
         /* Keep some bottom space for badges */
         height: auto !important;
     }
 }

 /* === UX/DESIGN IMPROVEMENTS 2025-2026 === */
 /* 1. Smooth Scroll - already in html{scroll-behavior:smooth}*/
 /* 2. Parallax Effect Prep */
 .hero-book {
     will-change: transform
 }

 /* 3. Blur Reveal Animation for Sections - excluding .hero and .genius */
 .section-reveal {
     opacity: 0;
     transform: translateY(40px);
     filter: blur(8px);
     transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1)
 }

 .section-reveal.revealed {
     opacity: 1;
     transform: translateY(0);
     transform: translateY(0);
     filter: blur(0)
 }

 /* Optimization:Hint browser about heavy animations */
 .section-reveal,
 .book-wrapper,
 .hero-book {
     will-change: transform, opacity, filter
 }

 /* Optimization:Skip rendering for off-screen heavy content */
 .geniuses,
 .faq,
 .footer-section {
     content-visibility: auto;
     contain-intrinsic-size: 800px
         /* Approximate height estimate */
 }

 /* 4. Improved Typography - Hero heading enhancement */
 .hero h1 {
     font-size: clamp(2.5rem, 5vw, 3.5rem);
     line-height: 1.1;
     letter-spacing: -0.02em
 }

 .hero-desc {
     font-size: clamp(1rem, 2vw, 1.125rem);
     max-width: 520px
 }

 /* 5. Cursor Feedback Effects */
 .btn,
 .genius-card,
 .faq-item,
 .price-card,
 .nav-link,
 .testimonial-card {
     cursor: pointer
 }

 .btn:active {
     cursor: grabbing
 }

 /* 6. Enhanced Card Depth for Genius Cards - REVERTED per user request */
 /* Restoring original interaction but keeping subtle cursor */
 .genius-card {
     cursor: pointer
 }

 /* 7. Loading Skeleton Animation */
 @keyframes shimmer {
     0% {
         background-position: -200% 0
     }

     100% {
         background-position: 200% 0
     }
 }

 .skeleton {
     background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
     background-size: 200% 100%;
     animation: shimmer 1.5s infinite
 }

 /* 8. Improved Focus States for Accessibility */
 .btn:focus-visible,
 .nav-link:focus-visible,
 a:focus-visible {
     outline: 2px solid var(--accent);
     outline-offset: 3px;
     border-radius: 4px
 }

 .price-card:focus-within,
 .genius-card:focus-within {
     outline: none
 }

 /* 9. Section Dividers - subtle gradient lines */
 .section-divider {
     height: 1px;
     background: linear-gradient(90deg, transparent 0%, var(--border) 20%, var(--border) 80%, transparent 100%);
     margin: 0
 }

 /* 10. Image Reveal Animation */
 .book-reveal {
     opacity: 0;
     transform: translateY(30px) rotateY(-15deg) scale(0.95);
     transition: all 1s cubic-bezier(0.4, 0, 0.2, 1)
 }

 .book-reveal.revealed {
     opacity: 1;
     transform: translateY(0) rotateY(-22deg) scale(1)
 }

 /* Staggered reveal delays for sections */
 .section-reveal:nth-of-type(1) {
     transition-delay: 0s
 }

 .section-reveal:nth-of-type(2) {
     transition-delay: 0.05s
 }

 .section-reveal:nth-of-type(3) {
     transition-delay: 0.1s
 }

 /* Improved visual hierarchy */
 .section-title {
     font-size: clamp(1.75rem, 4vw, 2.25rem);
     letter-spacing: -0.01em
 }

 /* Smooth transitions for all interactive elements */
 * {
     transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1)
 }

 /* === NEW FEATURES 2025/2026 === */
 /* 1. Reading Progress Bar */
 .progress-container {
     position: fixed;
     top: 0;
     left: 0;
     width: 100%;
     height: 3px;
     background: transparent;
     z-index: 1001;
     pointer-events: none;
 }

 .progress-bar {
     height: 100%;
     background: var(--accent);
     width: 0%;
     transition: width 0.1s;
 }

 /* 2. Smart Sticky Header state */
 header.hide-nav {
     transform: translateY(-100%);
 }

 header {
     transition: transform 0.3s ease;
 }

 /* 3. Hero Book Premium Glow */
 .book-cover {
     box-shadow: none;
     background: transparent;
 }

 .book-glow {
     display: none !important;
 }

 /* Manifesto Book Styling */
 .manifesto-book {
     max-width: 500px;
     display: inline-block;
     background: transparent !important;
     border: none !important;
     border-radius: 0 !important;
     box-shadow: none !important;
     filter: drop-shadow(0 5px 10px rgba(0, 0, 0, 0.45));
     transform: perspective(1000px) rotateY(9deg) rotateX(2deg) scale(1.01) translateZ(0) !important;
     outline: 1px solid transparent;
     backface-visibility: hidden;
     will-change: transform;
     transition: transform 0.4s ease;
 }

 .manifesto-book:hover {
     transform: perspective(1000px) rotateY(4deg) rotateX(2deg) scale(1.03) translateZ(0) !important;
     cursor: pointer;
 }

 @keyframes pulseGlowBg {
     0% {
         opacity: 0.4;
         transform: translate(-50%, -50%) scale(0.95);
     }

     100% {
         opacity: 0.7;
         transform: translate(-50%, -50%) scale(1.05);
     }
 }

 /* 4. Look Inside Modal */
 .modal-overlay {
     position: fixed;
     inset: 0;
     background: rgba(0, 0, 0, 0.8);
     z-index: 2000;
     display: flex;
     align-items: center;
     justify-content: center;
     opacity: 0;
     visibility: hidden;
     transition: all 0.3s;
     backdrop-filter: blur(5px);
 }

 .modal-overlay.active {
     opacity: 1;
     visibility: visible;
 }

 .modal-content {
     background: var(--bg);
     width: 90%;
     max-width: 900px;
     height: 85vh;
     border-radius: 12px;
     position: relative;
     display: flex;
     flex-direction: column;
     transform: scale(0.95);
     transition: transform 0.3s;
 }

 .modal-overlay.active .modal-content {
     transform: scale(1);
 }

 .modal-close {
     position: absolute;
     top: 16px;
     right: 16px;
     width: 32px;
     height: 32px;
     border-radius: 50%;
     background: var(--white);
     border: 1px solid var(--border);
     display: flex;
     align-items: center;
     justify-content: center;
     cursor: pointer;
     z-index: 10;
     font-size: 20px;
 }

 .modal-body {
     flex: 1;
     overflow-y: auto;
     padding: 40px;
     text-align: center;
 }

 .modal-pages {
     display: grid;
     gap: 20px;
     justify-items: center;
 }

 .modal-page-img {
     max-width: 100%;
     box-shadow: var(--shadow-md);
     border: 1px solid var(--border);
 }

 /* Tag Badges (Unified Style) */
 .tag-badges-container {
     position: absolute;
     bottom: 15px;
     left: 0;
     right: 0;
     display: flex;
     gap: 5px;
     z-index: 2;
     pointer-events: none;
     justify-content: center;
     flex-wrap: wrap;
 }

 .tag-badge {
     background: var(--white);
     padding: 6px 10px;
     border-radius: 6px;
     font-size: 10px;
     font-weight: 700;
     color: var(--text);
     box-shadow: var(--shadow-sm);
     line-height: 1;
     text-transform: uppercase;
     letter-spacing: 0.05em;
 }

 .tag-badge.bonus-artbook {
     background: #F5F4F3;
 }

 .artbook-tooltip {
     position: relative;
     display: inline-flex;
     align-items: center;
     cursor: help;
 }

 .artbook-tooltip .tooltip-icon {
     width: 14px;
     height: 14px;
     background: rgba(0, 0, 0, 0.08);
     border-radius: 50%;
     display: inline-flex;
     align-items: center;
     justify-content: center;
     font-size: 10px;
     font-weight: 600;
     color: var(--text-2);
     margin-left: -1px;
     position: relative;
     top: 2px;
 }

 .artbook-tooltip .tooltip-text {
     visibility: hidden;
     opacity: 0;
     position: absolute;
     bottom: calc(100% + 8px);
     left: 50%;
     transform: translateX(-50%);
     background: #18181b;
     color: #fff;
     padding: 12px 16px;
     border-radius: 8px;
     font-size: 13px;
     font-weight: 400;
     line-height: 1.6;
     text-align: left;
     width: 280px;
     z-index: 1000;
     box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
     transition: opacity 0.2s, visibility 0.2s;
 }

 .artbook-tooltip .tooltip-text::after {
     content: '';
     position: absolute;
     top: 100%;
     left: 50%;
     transform: translateX(-50%);
     border: 6px solid transparent;
     border-top-color: #18181b;
 }

 .artbook-tooltip:hover .tooltip-text {
     visibility: visible;
     opacity: 1;
 }

 /* Center Pricing Header & Amount */
 .price-header,
 .price-amount {
     text-align: center;
 }

 /* 5. Audio Preview */
 .audio-preview-btn {
     display: inline-flex;
     align-items: center;
     gap: 8px;
     background: var(--white);
     border: 1px solid var(--border);
     padding: 6px 12px;
     border-radius: 20px;
     font-size: 11px;
     font-weight: 600;
     color: var(--text-2);
     cursor: pointer;
     margin-left: 8px;
     transition: all 0.2s;
 }

 .audio-preview-btn:hover {
     border-color: var(--accent);
     color: var(--accent);
 }

 .audio-preview-btn.playing {
     background: var(--accent-light);
     color: var(--accent);
     border-color: var(--accent);
 }

 .audio-wave {
     display: flex;
     align-items: center;
     gap: 2px;
     height: 12px;
 }

 .audio-bar {
     width: 2px;
     background: currentColor;
     animation: soundWave 1s infinite;
     animation-play-state: paused;
 }

 .audio-preview-btn.playing .audio-bar {
     animation-play-state: running;
 }

 .audio-bar:nth-child(1) {
     height: 6px;
     animation-duration: 0.8s;
 }

 .audio-bar:nth-child(2) {
     height: 10px;
     animation-duration: 0.6s;
 }

 .audio-bar:nth-child(3) {
     height: 8px;
     animation-duration: 0.9s;
 }

 @keyframes soundWave {

     0%,
     100% {
         transform: scaleY(1);
     }

     50% {
         transform: scaleY(0.5);
     }
 }

 /* 6. Geniuses Filters */
 .genius-filters {
     display: flex;
     justify-content: center;
     flex-wrap: wrap;
     gap: 12px;
     margin-bottom: 32px;
 }

 .filter-btn {
     padding: 8px 16px;
     border-radius: 20px;
     border: 1px solid rgba(255, 255, 255, 0.1);
     background: rgba(255, 255, 255, 0.05);
     color: rgba(255, 255, 255, 0.6);
     font-size: 13px;
     font-weight: 500;
     cursor: pointer;
     transition: all 0.2s;
 }

 .filter-btn:hover,
 .filter-btn.active {
     background: var(--white);
     color: var(--text);
     border-color: var(--white);
 }

 /* 7. Money Back Seal */
 .money-back-seal {
     margin-top: 16px;
     display: flex;
     align-items: center;
     justify-content: center;
     gap: 8px;
     font-size: 12px;
     color: var(--text-2);
     font-weight: 500;
 }

 .seal-icon {
     width: 24px;
     height: 24px;
     color: var(--accent);
 }

 /* 8. Trust Payment Icons */
 .payment-icons {
     display: flex;
     justify-content: center;
     gap: 12px;
     margin-top: 16px;
     opacity: 0.6;
     filter: grayscale(1);
     transition: filter 0.3s;
 }

 .payment-icons:hover {
     filter: grayscale(0);
 }

 .payment-icon {
     height: 20px;
     width: auto;
 }

 /* Scarcity Pill - Floating badge like POPULARNE */
 .scarcity-pill {
     position: absolute;
     top: -12px;
     left: 50%;
     transform: translateX(-50%);
     display: inline-flex;
     align-items: center;
     gap: 8px;
     padding: 6px 14px;
     border-radius: 100px;
     font-family: 'Roboto', sans-serif;
     font-size: 11px;
     font-weight: 500;
     z-index: 5;
     box-shadow: var(--shadow-lg), 0 0 0 3px var(--white);
     white-space: nowrap;
     border: 1px solid transparent;
 }

 .scarcity-pill strong {
     font-weight: 700;
 }

 .scarcity-dot {
     width: 6px;
     height: 6px;
     border-radius: 50%;
     flex-shrink: 0;
 }

 /* Scarcity Pill Color Variants - Subtle backgrounds */
 .scarcity-pill-red {
     background: linear-gradient(135deg, #fef2f2 0%, #fff5f5 100%);
     border-color: #fecaca;
     color: #991b1b;
 }

 .scarcity-pill-red strong {
     color: #b91c1c;
 }

 .scarcity-pill-red .scarcity-dot {
     background: #dc2626;
     animation: livePulseRed 1.5s ease-in-out infinite;
 }

 @keyframes livePulseRed {
     0% {
         box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.5);
         transform: scale(1);
     }

     50% {
         box-shadow: 0 0 0 4px rgba(220, 38, 38, 0);
         transform: scale(1.1);
     }

     100% {
         box-shadow: 0 0 0 0 rgba(220, 38, 38, 0);
         transform: scale(1);
     }
 }

 .scarcity-pill-green {
     background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
     border-color: #bbf7d0;
     color: #166534;
 }

 .scarcity-pill-green strong {
     color: #16a34a;
 }

 .scarcity-pill-green .scarcity-dot {
     background: #22c55e;
     animation: livePulseGreen 1.5s ease-in-out infinite;
 }

 @keyframes livePulseGreen {
     0% {
         box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.5);
         transform: scale(1);
     }

     50% {
         box-shadow: 0 0 0 4px rgba(34, 197, 94, 0);
         transform: scale(1.1);
     }

     100% {
         box-shadow: 0 0 0 0 rgba(34, 197, 94, 0);
         transform: scale(1);
     }
 }

 .scarcity-pill-gold {
     background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%);
     border-color: #fcd34d;
     color: #92400e;
 }

 .scarcity-pill-gold strong {
     color: #d97706;
 }

 .scarcity-pill-gold .scarcity-dot {
     background: #f59e0b;
     animation: livePulseGold 1.5s ease-in-out infinite;
 }

 @keyframes livePulseGold {
     0% {
         box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.5);
         transform: scale(1);
     }

     50% {
         box-shadow: 0 0 0 4px rgba(245, 158, 11, 0);
         transform: scale(1.1);
     }

     100% {
         box-shadow: 0 0 0 0 rgba(245, 158, 11, 0);
         transform: scale(1);
     }
 }

 /* 10. Footer Manifest */
 .footer-manifest {
     max-width: 800px;
     margin: 0 auto 40px;
     text-align: center;
     padding: 0 20px;
 }

 .footer-manifest p {
     font-family: 'Instrument Serif', serif;
     font-size: 20px;
     font-style: italic;
     color: var(--text-2);
     line-height: 1.5;
 }

 /* 11. Modal Button in Hero */
 .btn-look-inside {
     display: inline-flex;
     align-items: center;
     gap: 8px;
     padding: 12px 24px;
     background: rgba(255, 255, 255, 0.8);
     border: 1px solid var(--border);
     border-radius: var(--r);
     font-size: 14px;
     font-weight: 600;
     color: var(--text);
     backdrop-filter: blur(4px);
     cursor: pointer;
     transition: all 0.2s;
     margin-top: 16px;
 }

 .btn-look-inside:hover {
     background: var(--white);
     transform: translateY(-2px);
     box-shadow: var(--shadow-md);
 }

 @media(max-width:1200px), (pointer:coarse) {
     .btn-look-inside {
         width: 100%;
         justify-content: center;
     }
 }

 /* Override Thrive Architect box-sizing conflict */
 /* Thrive adds .thrv_wrapper with content-box which breaks our layout */
 .thrv_wrapper div,
 .thrv_wrapper .story-cta,
 .thrv_wrapper .cta-card,
 .thrv_wrapper .price-visual,
 .thrv_wrapper .price-card {
     box-sizing: border-box !important;
 }

 /* Force full-width for dark background section */
 .thrv_wrapper .geniuses,
 .thrv_wrapper #geniuses {
     width: 100vw !important;
     max-width: 100vw !important;
     margin-left: calc(-50vw + 50%) !important;
     margin-right: calc(-50vw + 50%) !important;
 }

 /* Ultra Package Styles - Logic & Design */
 .ultra-package-container {
     max-width: 500px;
     /* Desktop width matched to single premium box */
     margin: 56px auto 0;
     background: var(--bg);
     border: 2px solid #A86602;
     border-radius: 24px;
     overflow: hidden;
     position: relative;
     transition: all .3s;
     box-shadow: var(--shadow-sm);
 }

 @media (max-width:1200px) {
     .ultra-package-container {
         max-width: 900px !important;
         /* User explicitly requested 900px here */
         width: 100% !important;
         margin-top: 40px !important;
     }
 }

 .ultra-package-container:hover {
     border-color: #8a5401;
     box-shadow: var(--shadow-lg);
     transform: translateY(-4px);
 }

 /* Gold Top Bar - hidden, replaced by scarcity badge */
 .ultra-package-container::before {
     display: none;
 }

 .ultra-toggle {
     width: 100%;
     background: none;
     border: none;
     padding: 24px 32px;
     display: flex;
     align-items: center;
     justify-content: space-between;
     cursor: pointer;
     text-align: center;
     border-radius: 24px 24px 0 0;
     transition: background 0.2s;
 }

 .ultra-toggle:hover {
     background: rgba(0, 0, 0, 0.02);
 }

 .ultra-header-content {
     display: flex;
     flex-direction: column;
     gap: 4px;
     align-items: center;
     flex: 1;
 }

 .ultra-title {
     font-family: 'Roboto', sans-serif;
     font-size: 26px;
     font-weight: 900;
     color: var(--text);
     margin-bottom: 4px;
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
 }

 .ultra-title em {
     font-family: 'Instrument Serif', serif !important;
     font-style: italic;
     font-weight: 400;
     color: #A86602;
 }

 .ultra-price {
     font-family: 'Roboto', sans-serif;
     font-size: 44px;
     font-weight: 900;
     color: #A86602;
     line-height: 1;
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
 }

 .ultra-price span {
     font-family: 'Roboto', sans-serif;
     font-size: 16px;
     font-weight: 700;
     color: var(--text);
 }

 .ultra-icon {
     color: var(--text-2);
     transition: transform 0.3s ease;
     width: 28px;
     height: 28px;
     flex-shrink: 0;
 }

 .ultra-toggle.active .ultra-icon {
     transform: rotate(180deg);
 }

 .ultra-content {
     display: none;
     padding: 0;
 }

 .ultra-content.open {
     display: block;
     animation: slideDown 0.4s ease-out;
 }

 @keyframes slideDown {
     from {
         opacity: 0;
         transform: translateY(-10px);
     }

     to {
         opacity: 1;
         transform: translateY(0);
     }
 }

 .ultra-body {
     padding: 32px;
 }

 .price-btn-gold {
     background: linear-gradient(135deg, #A86602 0%, #8a5401 100%);
     color: white;
     box-shadow: 0 4px 6px rgba(168, 102, 2, 0.2);
     border: none;
 }

 .price-btn-gold:hover {
     background: linear-gradient(135deg, #976002 0%, #8a5401 100%);
     box-shadow: 0 6px 12px rgba(168, 102, 2, 0.3);
     transform: translateY(-2px);
 }

 .btn-gold-pulse {
     animation: pulseGlowGold 2s infinite;
 }

 @keyframes pulseGlowGold {

     0%,
     100% {
         box-shadow: 0 4px 6px rgba(168, 102, 2, 0.2), 0 0 0 0 rgba(168, 102, 2, 0.4);
     }

     50% {
         box-shadow: 0 4px 6px rgba(168, 102, 2, 0.2), 0 0 0 8px rgba(168, 102, 2, 0);
     }
 }

 /* Sample Chapters v2 - Anthropic Style */
 .sample-chapters-v2 {
     padding: 80px 0;
     background: var(--white);
     border-top: 1px solid var(--border);
     border-bottom: 1px solid var(--border);
 }

 /* Responsive Header Sizing */
 .sample-chapters-v2 .section-header h2 {
     font-size: clamp(28px, 4vw, 40px);
     letter-spacing: -.02em;
     margin-bottom: 16px;
 }

 .sample-chapters-v2 .section-header p {
     font-size: 17px;
     color: var(--text-2);
     line-height: 1.75;
 }

 /* Carousel */
 .chapter-carousel-wrapper {
     position: relative;
     margin-top: 48px;
     overflow: visible;
     padding: 10px;
     margin: 48px -10px 0 -10px;
 }

 .chapter-carousel {
     display: grid;
     grid-template-columns: repeat(2, 1fr);
     gap: 20px;
     transition: transform 0.4s ease;
 }

 .chapter-box {
     background: var(--bg);
     border: 1px solid var(--border);
     border-radius: 16px;
     padding: 32px;
     display: flex;
     flex-direction: column;
     min-height: 340px;
     transition: all 0.3s ease;
 }

 .chapter-box:hover {
     box-shadow: var(--shadow-md);
     transform: translateY(-1px);
 }

 .chapter-box-header {
     padding-bottom: 20px;
     border-bottom: 1px solid var(--border);
     margin-bottom: 20px;
 }

 .chapter-box-badge {
     display: inline-block;
     width: fit-content;
     background: var(--white);
     padding: 6px 10px;
     border-radius: 6px;
     font-size: 10px;
     font-weight: 700;
     color: var(--text);
     box-shadow: var(--shadow-sm);
     /* Updated shadow */
     line-height: 1;
     text-transform: uppercase;
     letter-spacing: 0.05em;
     margin-bottom: 12px;
 }

 .chapter-box-name {
     font-size: 24px;
     font-weight: 900;
     color: var(--text);
     margin-bottom: 6px;
 }

 .chapter-box-name em {
     font-family: 'Instrument Serif', serif !important;
     font-style: italic;
     font-weight: 400;
 }

 .chapter-box-subtitle {
     font-size: 16px;
     color: var(--text-2);
     line-height: 1.7;
     font-weight: 600;
 }

 .chapter-box-body {
     flex: 1;
 }

 .chapter-box-quote {
     font-family: 'Instrument Serif', serif;
     font-size: 56px;
     line-height: 1;
     color: var(--accent);
     margin-bottom: 4px;
     opacity: 0.35;
 }

 .chapter-box-text {
     font-size: 16px;
     line-height: 1.7;
     color: var(--text-2);
 }

 .chapter-box-text strong {
     color: var(--text);
     font-weight: 600;
 }

 .chapter-box-more {
     margin-top: 20px;
     padding-top: 10px;
     font-size: 14px;
     color: var(--text-3);
     opacity: 0.7;
 }

 /* Navigation */
 .chapter-nav {
     display: flex;
     justify-content: space-between;
     align-items: center;
     margin-top: 16px;
     padding: 0 10px;
 }

 .chapter-nav-counter {
     font-size: 14px;
     line-height: 44px;
     font-weight: 500;
     color: var(--text-3);
 }

 .chapter-nav-counter span:first-child {
     font-weight: 700;
     color: var(--text);
 }

 .chapter-nav-chapters {
     display: none;
     /* Removed manual list */
 }

 .chapter-nav-arrows {
     display: flex;
     gap: 8px;
 }

 .chapter-nav-btn {
     width: 44px;
     height: 44px;
     display: flex;
     align-items: center;
     justify-content: center;
     background: var(--bg);
     border: 1px solid var(--border);
     border-radius: 8px;
     cursor: pointer;
     transition: all 0.2s ease;
     color: var(--text);
 }

 .chapter-nav-btn:hover:not(:disabled) {
     background: var(--white);
     border-color: var(--text-3);
     box-shadow: var(--shadow-sm);
 }

 .chapter-nav-btn:disabled {
     opacity: 0.4;
     cursor: not-allowed;
 }

 /* Mobile:Single card carousel */
 @media (max-width:768px) {
     .sample-chapters-v2 {
         padding: 60px 0;
     }

     .chapter-carousel-wrapper {
         margin: 0 -10px;
         padding: 10px;
         overflow: visible;
     }

     .chapter-carousel {
         display: block;
     }

     .chapter-box {
         padding: 24px;
         min-height: auto;
     }

     .chapter-box:not(.active) {
         display: none !important;
     }

     .chapter-box.active {
         display: flex !important;
         animation: none;
     }

     .chapter-box-name {
         font-size: 20px;
     }

     .chapter-box-quote {
         font-size: 40px;
     }

     .chapter-box-more {
         margin-bottom: 10px;
     }

     .chapter-nav {
         margin-top: 16px;
         padding-top: 0;
     }
 }

 /* Desktop:Show all boxes for now to let JS handle it,but we override grid */
 @media (min-width:769px) {
     .chapter-carousel {
         display: grid;
         grid-template-columns: repeat(2, 1fr);
     }

     /* Hide all boxes except 0-1 by default (page 1) */
     .chapter-box[data-index="2"],
     .chapter-box[data-index="3"],
     .chapter-box[data-index="4"],
     .chapter-box[data-index="5"],
     .chapter-box[data-index="6"],
     .chapter-box[data-index="7"] {
         display: none;
     }

     /* Page 2: show boxes 2-3 */
     .chapter-carousel.page-2 .chapter-box[data-index="0"],
     .chapter-carousel.page-2 .chapter-box[data-index="1"] {
         display: none;
     }

     .chapter-carousel.page-2 .chapter-box[data-index="2"],
     .chapter-carousel.page-2 .chapter-box[data-index="3"] {
         display: flex;
     }

     /* Page 3: show boxes 4-5 */
     .chapter-carousel.page-3 .chapter-box[data-index="0"],
     .chapter-carousel.page-3 .chapter-box[data-index="1"],
     .chapter-carousel.page-3 .chapter-box[data-index="2"],
     .chapter-carousel.page-3 .chapter-box[data-index="3"] {
         display: none;
     }

     .chapter-carousel.page-3 .chapter-box[data-index="4"],
     .chapter-carousel.page-3 .chapter-box[data-index="5"] {
         display: flex;
     }

     /* Page 4: show boxes 6-7 */
     .chapter-carousel.page-4 .chapter-box[data-index="0"],
     .chapter-carousel.page-4 .chapter-box[data-index="1"],
     .chapter-carousel.page-4 .chapter-box[data-index="2"],
     .chapter-carousel.page-4 .chapter-box[data-index="3"],
     .chapter-carousel.page-4 .chapter-box[data-index="4"],
     .chapter-carousel.page-4 .chapter-box[data-index="5"] {
         display: none;
     }

     .chapter-carousel.page-4 .chapter-box[data-index="6"],
     .chapter-carousel.page-4 .chapter-box[data-index="7"] {
         display: flex;
     }
 }

 /* Lazy loading - native browser handles it,no custom CSS needed */
 .ultra-body .price-desc {
     max-width: 280px;
     margin: 0 auto;
 }

 /* Final CTA & btn-large (changes 16, 21) */
 .final-cta {
     border: 2px solid var(--accent);
     box-shadow: 0 8px 32px rgba(185, 28, 28, 0.1);
 }

 .final-cta h3 {
     color: var(--accent);
 }

 .btn-large {
     padding: 18px 36px !important;
     font-size: 16px !important;
 }

 /* Hero HOT badge (change 5) */
 .hero-tag-hot {
     background: var(--accent);
     color: #fff;
     padding: 2px 6px;
     border-radius: 4px;
     font-size: 10px;
     font-weight: 700;
     margin-right: 4px;
     letter-spacing: 0.5px;
     animation: hotPulse 2s ease-in-out infinite;
 }

 @keyframes hotPulse {

     0%,
     100% {
         transform: scale(1);
     }

     50% {
         transform: scale(1.05);
     }
 }

 /* Testimonials subheader (change 15) */
 .testimonials-subheader {
     font-size: 17px !important;
     color: var(--text-2);
     margin-top: 16px;
 }

 /* Mobile: reduce margin-top above first story-cta box by half */
 @media(max-width:1200px), (pointer:coarse) {
     .story-cta:not(.final-cta) {
         margin-top: 30px !important;
     }

     .hero-actions .btn {
         min-width: 220px;
     }

     .hero-actions .btn-secondary {
         margin-top: 5px;
     }
 }

 /* ===== PROMO COUNTDOWN TIMER - Premium 11/10 ===== */
 .promo-countdown {
     display: flex;
     flex-direction: column;
     align-items: center;
     gap: 26px;
     margin: 8px auto 0;
     padding: 0;
 }

 .promo-countdown-label {
     font-size: 17px;
     font-weight: 400;
     color: var(--text-2);
     letter-spacing: 0;
 }

 .promo-countdown-timer {
     display: flex;
     align-items: center;
     gap: 5px;
 }

 .promo-countdown-unit {
     display: flex;
     flex-direction: row;
     align-items: baseline;
     gap: 5px;
     background: linear-gradient(180deg, #ffffff 0%, #fafafa 100%);
     border: 1px solid var(--border);
     padding: 12px 16px;
     border-radius: 11px;
     min-width: auto;
     box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.8);
     position: relative;
     transition: all 0.2s ease;
 }

 .promo-countdown-unit:hover {
     transform: translateY(-2px);
     box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08), 0 2px 4px rgba(0, 0, 0, 0.06);
 }

 .promo-countdown-num {
     font-family: 'Roboto', sans-serif;
     font-size: 29px;
     font-weight: 900;
     color: var(--accent);
     line-height: 1;
     font-variant-numeric: tabular-nums;
     text-shadow: 0 1px 2px rgba(185, 28, 28, 0.1);
 }

 .promo-countdown-desc {
     font-size: 11px;
     font-weight: 600;
     color: var(--text-3);
     text-transform: lowercase;
     letter-spacing: 0.02em;
 }

 .promo-countdown-sep {
     font-size: 24px;
     font-weight: 300;
     color: var(--accent);
     opacity: 0.3;
     margin: 0 2px;
 }

 /* Ultra Price Styles */
 .ultra-price-wrapper {
     display: flex;
     flex-direction: column;
     gap: 4px;
     align-items: center;
 }

 .ultra-price-old {
     font-size: 14px;
     color: var(--text-3);
     text-decoration: line-through;
     font-weight: 500;
     margin-bottom: 4px;
 }

 .ultra-price-save {
     display: inline-block;
     background: linear-gradient(135deg, #A86602 0%, #8a5401 100%);
     color: white;
     font-size: 11px;
     font-weight: 700;
     padding: 4px 10px;
     border-radius: 6px;
     margin-top: 6px;
 }

 /* Promo Countdown Mobile */
 @media(max-width:768px) {
     .promo-countdown {
         gap: 26px;
         margin-bottom: 0;
     }

     .promo-countdown-label {
         font-size: 17px;
     }

     .promo-countdown-timer {
         gap: 5px;
     }

     .promo-countdown-unit {
         padding: 11px 14px;
         border-radius: 10px;
         gap: 5px;
     }

     .promo-countdown-num {
         font-size: 26px;
     }

     .promo-countdown-desc {
         font-size: 10px;
     }

     .promo-countdown-sep {
         font-size: 22px;
     }

     .scarcity-badge {
         margin-top: 36px;
         font-size: 14px;
     }
 }



 /* ============================================= */
 /* FINAL PACKAGE IMAGES — one rule to rule them all */
 /* ============================================= */
 .pricing .price-visual {
     height: auto !important;
     min-height: auto !important;
     padding: 35px 20px 60px 20px !important;
     overflow: visible !important;
     display: flex !important;
     align-items: center !important;
     justify-content: center !important;
 }

 .pricing .price-visual img {
     width: 100% !important;
     height: auto !important;
     max-height: 300px !important;
     object-fit: contain !important;
     display: block !important;
     transform: none !important;
     margin: 0 !important;
     padding: 0 !important;
 }

 .pricing .tag-badges-container {
     bottom: 15px !important;
 }

 /* Tablet - bigger images faster */
 @media (min-width: 601px) and (max-width: 1024px) {
     .pricing .price-visual img {
         max-height: 400px !important;
     }
 }

 /* Mobile + Tablet - first package (single book): scale up */
 @media (max-width: 1024px) {
     .pricing .price-grid .price-card:first-child .price-visual img {
         transform: scale(1.25) !important;
     }
 }

 /* Ultra package spacing - same as others everywhere */
 .pricing .ultra-content .price-visual {
     padding: 35px 20px 60px 20px !important;
 }

/* FAQ images - mobile */
@media (max-width: 900px) {
    .faq-answer-inner img {
        margin: 0 auto -15px auto !important;
        max-width: 400px !important;
        width: 100% !important;
    }
}


/* Artbook FAQ image - tighter top on mobile */
@media (max-width: 900px) {
    #faq-artbook-img {
        margin-top: -5px !important;
    }
}