@charset "UTF-8";

/* Reset & Basics */
html {
    width: 100%;
    height: 100%;
    background-color: #333;
    /* Dark background for PC view */
}

body {
    margin: 0 auto;
    /* Center body */
    padding: 0;
    width: 100%;
    max-width: 600px;
    /* Restrict width for PC */
    height: 100%;
    overflow: hidden;
    font-family: "Noto Sans JP", sans-serif;
    color: #333;
    background-color: #fff;
    /* White background for content */
    position: relative;
    /* Context for fixed elements if needed */
}

/* Video Background */
/* Slide Background (Video/Image) */
.slide-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    overflow: hidden;
    /* Ensure it stays behind content */
}

.slide-background video,
.slide-background img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Default Background Image for all slides */
.slide-background {
    background-image: url('../images/common_bg.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* Remove global fixed video styles if present or reuse name if preferred, 
   but switching to per-slide structure. */
/* Fixed Footer Button Restore */
.fixed-footer-btn {
    position: fixed;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    width: 95%;
    max-width: 400px;
    background: linear-gradient(to right, #B08D55, #d4af37);
    color: white;
    text-decoration: none;
    border-radius: 5px;
    padding: 10px 15px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
    z-index: 1000;
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow: visible !important;
    /* Fix logo clipping */
    height: 70px;
}

.fixed-footer-btn .btn-shine {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.4) 50%, rgba(255, 255, 255, 0) 100%);
    transform: skewX(-20deg) translateX(-150%);
    animation: shine 3s infinite;
}

@keyframes shine {
    0% {
        transform: skewX(-20deg) translateX(-150%);
    }

    20% {
        transform: skewX(-20deg) translateX(150%);
    }

    100% {
        transform: skewX(-20deg) translateX(150%);
    }
}

.footer-sub-text {
    font-size: 0.7rem;
    text-align: center;
    margin-bottom: 2px;
}

.footer-main-text {
    font-size: 1.3rem;
    font-weight: bold;
    text-align: center;
    line-height: 1;
}

.footer-price-small {
    position: absolute;
    left: 10px;
    bottom: 5px;
    background: #c62828;
    color: white;
    font-size: 0.6rem;
    padding: 3px 5px;
    border-radius: 3px;
    line-height: 1.1;
    text-align: center;
    top: 50%;
    transform: translateY(-50%);
    bottom: auto;
    left: 15px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

.footer-price-small span {
    font-size: 1.1rem;
    font-weight: bold;
}

.footer-arrow::after {
    content: '';
    display: inline-block;
    width: 8px;
    height: 8px;
    border-top: 2px solid white;
    border-right: 2px solid white;
    transform: rotate(45deg);
    margin-left: 5px;
    margin-bottom: 2px;
}

/* Swiper */
.swiper {
    width: 100%;
    height: 100%;
}

.swiper-slide {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    /* Align content to top */
    align-items: center;
    padding: 20px;
    padding-bottom: 90px;
    box-sizing: border-box;
    overflow-y: auto;
    background: transparent;
}

.slide-content {
    width: 100%;
    max-width: 600px;
    text-align: center;
    margin: 0 auto;
    background: rgba(255, 255, 255, 0.0);
}



/* Page 1 Header Adjustments */
.p3-link-text {
    white-space: nowrap !important;
}

/* Page 1 Reform Styles (Hari Nature Style) */
/* Page 1 Specific Overrides */
.swiper-slide.page-1 {
    padding-bottom: 0 !important;
    /* Allow content to reach bottom */
    justify-content: space-between;
}

/* Fix: Remove static background for Page 1 so video shows immediately */
.page-1 .slide-background {
    background-image: none !important;
    background: #000;
    /* Fallback to black if needed, or transparent */
}

.page-1-content {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
    padding: 0;
    padding-top: 60px;
    width: 100%;
    /* Ensure content takes full height but leaves space for fixed footer naturally via layout if needed, 
       but here we want the price bar to SIT ON TOP of the footer visually. */
    padding-bottom: 75px;
    /* Adjusted to exact zero gap (75px) */
}

/* Header Area */
.p1-header {
    position: absolute;
    top: 10px;
    left: 0;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 0 10px;
    box-sizing: border-box;
    z-index: 20;
}

/* Bottom Offer Area - Full Width - Flex Row Refactor */
.p1-bottom-offer {
    position: relative;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    /* Move everything to the left */
    align-items: flex-end;
    width: 100%;
    flex-wrap: nowrap;
    padding-left: 0;
    /* Maximize left alignment */
    margin-bottom: 0;
    bottom: 0px;
    position: relative;
}

.p1-seal {
    width: 32vw !important;
    max-width: 125px;
    height: 32vw !important;
    max-height: 125px;
    background: radial-gradient(circle, #fff 40%, #B08D55 100%);
    border: 3px solid #B08D55;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
    font-size: 1.5rem !important;
    font-weight: 900;
    text-align: center;
    color: #4a3b2a;
    position: relative;
    /* Not absolute */
    flex-shrink: 0;
    /* Don't shrink */
    margin-right: 10px;
    /* Clear gap */
    bottom: 0;
    /* Reset bottom */
    left: 0;
    /* Reset left */
    z-index: 20;
    line-height: 1.2 !important;
}



/* New Text Group Wrapper */
.p1-text-group {
    display: flex;
    flex-direction: column;
    align-items: center !important;
    /* Center align text stack */
    justify-content: flex-end;
    margin-left: 0;
    z-index: 10;
    gap: 0 !important;
    position: relative;
    flex: 1;
    /* Take available space */
}


/* Page 1 Right Tagline - Reset */
/* High Specificity Override */
/* Page 1 Bottom Wrapper - Flex Column for Stacking */
.p1-bottom-wrapper {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    width: 100%;
    position: relative;
    padding-bottom: 10px;
}

/* Page 1 Right Tagline - Reset to Static Centered */
.page-1-content .p1-tagline-right {
    font-size: clamp(14px, 4.5vw, 27px) !important;
    /* Capped at 27px (=4.5vw@600px) to prevent oversized text on PC */
    font-weight: bold;
    letter-spacing: normal;
    text-align: center !important;
    margin: 0 0 -50px 0 !important;
    /* Forced pull-down to touch price box */
    color: #333;
    line-height: 1.2;
    width: 100% !important;
    position: relative !important;
    /* In flow */
    left: auto !important;
    transform: none !important;
    bottom: auto !important;
    right: auto !important;
    z-index: 15;
    white-space: nowrap;
    background: transparent;
}

.p1-price-box {
    background: #fff;
    padding: 5px 15px;
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
    margin: 0;
    /* Reset margins */
    position: relative;
    z-index: 10;

    border: 2px solid #8BC34A;

    /* Keep Green border for price? or Gold? User didn't specify, keep generic or gold? Actually logic suggests consistency. Staying safe with existing unless I see it was gold. */
    /* Wait, previous view didn't show border color in snippet, but likely it was. */
}



/* Page 25 Overflow Fix */
.page-25 .slide-content {
    overflow-y: visible !important;
    height: auto !important;
    padding-bottom: 350px !important;
    display: block !important;
}

/* Force scroll on the SLIDE wrapper for Page 25 */
.swiper-slide.page-25 {
    overflow-y: scroll !important;
    -webkit-overflow-scrolling: touch;
    height: 100%;
    pointer-events: auto !important;
    /* Ensure touch events work */
}

/* Compact company info for mobile */
.company-info-box {
    margin-top: 20px !important;
    padding-bottom: 80px !important;
}

.p25-shop-name {
    font-size: 1.5rem !important;
    /* Slightly smaller */
    margin-bottom: 10px !important;
}

.p25-address {
    font-size: 1rem !important;
}

.p1-logo {
    font-size: 1.2rem;
    font-weight: bold;
    color: #333;
    background: rgba(255, 255, 255, 0.9);
    padding: 5px 10px;
    border-radius: 4px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.p1-flag {
    /* Converted to #B08D55 */
    background: linear-gradient(to bottom, #B08D55, #f5e6d3, #B08D55);
    color: #fff;
    /* Changed text to white for better contrast vs dark gold? Or keep brown #5d4037? Let's check user intent. "Gold" usually implies dark text on light gold, or white on dark gold. B08D55 is a medium brown-gold. Let's keep dark text #5d4037 on gradient unless it's too dark. 
    Actually B08D55 is quite dark. White text might be better or very dark brown. 
    User said "This gold". Let's try white text on the solid buttons, and dark brown on the light gradients. */
    color: #4a3b2a;
    padding: 10px 15px;
    text-align: center;
    font-weight: bold;
    font-family: "Shippori Mincho", serif;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 85%, 0 100%);
    box-shadow: 0 4px 5px rgba(0, 0, 0, 0.3);
    line-height: 1.1;
}

.p1-flag-big {
    font-size: 1.6rem;
    color: #333;
}

.p1-flag-small {
    font-size: 0.8rem;
}

/* Campaign Ribbon */
.p1-ribbon {
    position: absolute;
    top: 50px;
    left: 0px;
    background: #e53935;
    color: white;
    padding: 5px 20px 5px 15px;
    font-weight: bold;
    font-size: 1rem;
    transform: rotate(-5deg);
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
    z-index: 15;
    border: 1px solid white;
}

.p1-ribbon::before {
    content: '';
    position: absolute;
    top: -5px;
    left: 5px;
    border-right: 5px solid transparent;
    border-bottom: 5px solid #b71c1c;
    border-left: 5px solid transparent;
    transform: rotate(45deg);
}

/* Main Visual Center - Spread Layout */
.p1-main-visual {
    margin-top: 40px;
    text-align: right;
    /* Shift text focus slightly */
    padding-right: 20px;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    /* Align to right like reference image often has model on left */
    width: 100%;
    box-sizing: border-box;
}

.p1-catch-small {
    font-size: 1rem;
    color: #333;
    font-weight: bold;
    text-shadow: 2px 2px 0 #fff;
    margin-bottom: 10px;
    background: rgba(255, 255, 255, 0.6);
    /* Added semi-transparent white bg */
    border-radius: 8px;
    /* Added rounded corners for box look */
    padding: 10px;
    /* Increased padding */
}

.p1-keywords {
    display: flex;
    justify-content: flex-end;
    /* Align right */
    align-items: center;
    gap: 0;
    margin-bottom: 0;
    padding-left: 0;
    /* Remove left padding */
    padding-right: 10px;
    /* Add right padding */
    width: 100%;
    box-sizing: border-box;
    flex-wrap: nowrap;
}

.p1-kw-box {
    background: linear-gradient(135deg, #B08D55 0%, #e8d5b5 100%);
    color: #3e2b1d;
    font-size: 1.5rem !important;
    /* Much bigger */
    font-weight: bold;
    padding: 2px 2px;
    border-radius: 0;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    transform: skewX(-10deg);
    white-space: nowrap;
}

.p1-kw-box span {
    display: block;
    transform: skewX(10deg);
}

.p1-x {
    font-size: 1.3rem !important;
    color: #fff;
    text-shadow: 0 0 3px #000;
    margin: 0;
}

.p1-text-small {
    font-size: 1.2rem !important;
    color: #333;
    font-weight: bold;
    text-shadow: 1px 1px 0 #fff;
    white-space: nowrap;
    margin-left: 2px;
}

.p1-impact-copy {
    font-size: 2rem;
    font-weight: 900;
    color: #fff;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
    line-height: 1.2;
    margin-bottom: 15px;
    text-align: right;
    margin-right: 10px;
}


.p1-big-text {
    font-size: clamp(2.5rem, 10vw, 3.5rem);
    /* Scalable font size */
    font-family: "Shippori Mincho", serif;
    font-style: italic;
    margin: 0 5px;
    color: #fff;
}

/* Bottom Offer Area - Handled in Override Block above for positioning */
/* Keeping structure for safe cascading if needed, but ensuring no conflicts */

.p1-seal::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    border: 2px dashed #bcaaa4;
    border-radius: 50%;
    opacity: 0.5;
}

/* Bottom Offer Area - Handled in Wrapper */
/* Duplicate .p1-bottom-offer removed */

/* Duplicate .p1-price-box removed */
.p1-price-box {
    background: linear-gradient(to bottom, #B08D55, #f5e6d3, #B08D55);
    padding: 5px 15px 5px 10px;
    /* Minimal left padding */
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
    margin: 0;
    position: relative;
    z-index: 10;
    border: 2px solid #fff;
}

.p1-price-label {
    display: flex;
    flex-direction: column;
    margin-right: 0;
    margin-bottom: 0;
    /* Reduced from 5px */
    align-items: flex-start;
    /* Ensure left alignment */
}

.p1-label-normal {
    font-size: 0.8rem;
    text-decoration: line-through;
    opacity: 0.8;
    line-height: 1;
    /* Tighten line height */
    color: #4a3b2a;
    /* Dark brown for visibility on gold */
}

.p1-label-menu {
    font-size: 24px !important;
    /* Force decent size, compensated for scale */
    font-weight: bold;
    background: #fff;
    color: #B08D55;
    padding: 2px 8px;
    display: inline-block;
    border-radius: 4px;
    margin-top: 2px;
    /* reduced margin */
    line-height: 1.1;
    /* Tighten line height */
}

/* Re-adding p1-price-value correctly */
.p1-price-value {
    font-size: 1rem;
    font-weight: bold;
    text-align: left;
    line-height: 0.8;
    /* Tighter line height as requested */
    display: flex;
    align-items: baseline;
    margin-top: 0px;
    /* Reduced margin */
    white-space: nowrap;
    /* Prevent wrapping */
}

.p1-price-num {
    font-size: 2.5rem;
    /* Reduced to fit */
    color: #c62828;
    /* Deep red for price */
    text-shadow: 1px 1px 0 #fff;
    margin-right: 2px;
}

.p1-price-unit {
    font-size: 1.0rem;
    /* Reduced to fit */
    color: #fff;
    text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.2);
}

/* Page 1 Seal Text - Enlarged */
.seal-inner span {
    display: block;
    line-height: 1.2;
    font-size: 1.0rem;
    /* Reduced from 1.3rem */
    font-weight: 800;
    letter-spacing: 0.05em;
}

/* Page 1 Header Right Stack */
.p1-header-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 5px;
}

/* Page 1 Swap Text Background */
.p1-text-bg {
    background: rgba(255, 255, 255, 0.95);
    padding: 2px 10px;
    border-radius: 4px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    color: #333;
    display: inline-block;
}

/* Page 2 Styles */
/* Slideshow Animation for Page 2 */
.slideshow-container {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

/* Page 2 Specific: Raise images by CTA height */
.page-2 .slideshow-container {
    height: calc(100% - 80px);
    /* Shift up by approx CTA height */
}

.slide-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    animation: slideshowFade 5.2s infinite;
}

@keyframes slideshowFade {
    0% {
        opacity: 0;
        animation-timing-function: ease-in;
    }

    5% {
        opacity: 1;
        animation-timing-function: ease-out;
    }

    25% {
        opacity: 1;
    }

    30% {
        opacity: 0;
    }

    100% {
        opacity: 0;
    }
}

.img-1 {
    animation-delay: 0s;
}

.img-2 {
    animation-delay: 1.3s;
}

.img-3 {
    animation-delay: 2.6s;
}

.img-4 {
    animation-delay: 3.9s;
}

.p2-header-container {
    position: absolute;
    top: 5%;
    left: 0;
    width: 100%;
    z-index: 10;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.p2-top-banner.transparent {
    background: none;
    box-shadow: none;
    padding: 0;
    width: 100%;
}

.p2-sub-banner {
    background: rgba(255, 255, 255, 0.95);
    padding: 10px 10px;
    font-size: 1.5rem;
    font-weight: bold;
    color: #B08D55;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    width: 100%;
    text-align: center;
}

.p2-circle-container {
    position: absolute;
    bottom: 12%;
    left: 0;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    gap: 15px;
    /* approx 5% */
    padding: 0 10px;
    box-sizing: border-box;
    z-index: 10;
}

.p2-circle {
    background: #fff;
    border: 3px solid #B08D55;
    /* Gold border */
    border-radius: 50%;
    width: 29%;
    /* "Just Right" Size (approx 1/3) */
    max-width: 105px;
    /* Cap size */
    aspect-ratio: 1 / 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    position: relative;
}

.p2-circle-label {
    font-size: 0.85rem;
    /* Slightly Larger */
    font-weight: bold;
    color: #333;
    margin-bottom: 0;
    white-space: nowrap;
    position: absolute;
    top: 15%;
    /* Moved up slightly to make room */
    line-height: 1.1;
}

.p2-circle-num {
    font-size: 2.1rem;
    /* Increased from 1.8rem */
    font-weight: bold;
    color: #e53935;
    /* Red number */
    line-height: 1;
    margin-top: 14px;
    display: flex;
    align-items: baseline;
    justify-content: center;
}

.p2-unit {
    font-size: 0.9rem;
    /* Slightly Larger */
    color: #333;
    margin-left: 1px;
    font-weight: bold;
}

/* Fixed Footer Button Overrides */
.fixed-footer-btn {
    display: flex !important;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    line-height: 1.2;
    padding: 5px 20px !important;
    height: auto !important;
    min-height: 70px;
    /* Increased min-height */
    text-align: center;
}

.footer-sub-text {
    font-size: 1.15rem;
    /* Increased by 1.2x */
    font-weight: normal;
    margin-bottom: 2px;
    display: block;
}

.footer-main-text {
    font-size: 1.5rem;
    font-weight: bold;
    letter-spacing: 0.05em;
    display: block;
    line-height: 1.1;
    display: flex;
    /* Allow alignment of arrow */
    justify-content: center;
    align-items: center;
}

.footer-arrow {
    display: inline-block;
    width: 30px;
    height: 24px;
    background-color: #fff;
    clip-path: polygon(0% 25%, 60% 25%, 60% 0%, 100% 50%, 60% 100%, 60% 75%, 0% 75%);
    margin-left: 10px;
    transform: translateY(1px);
}

/* Footer Price Badge Fixed */
/* Page 2 Keyword Wrapper - Scaled 1.2x */
.p2-kw-wrapper {
    transform: scale(1.2);
    transform-origin: center;
    display: inline-block;
    margin: 10px 0;
}

/* Footer Price Badge Fixed - Vertically Centered */
.footer-price-small {
    position: absolute;
    top: 50%;
    /* Center vertically */
    transform: translateY(-50%);
    /* Adjust for height */
    left: 20px;
    /* Moved right to prevent cutoff */
    font-size: 0.85rem;
    color: #B08D55;
    background: #fff;
    padding: 4px 10px;
    border-radius: 4px;
    font-weight: bold;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    text-shadow: none;
    line-height: 1.2;
    text-align: center;
    z-index: 20;
}

/* Page 3 Redesign Styles */
/* Page 3 Layout Adjustments */
.page-3-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    height: 100%;
    padding-top: 20px;
    /* Moved higher */
    padding-bottom: 250px;
}

.p3-ribbon-gold {
    position: absolute;
    top: 10px;
    /* Moved to top edge */
    left: 5%;
    width: 90%;
    background: linear-gradient(to bottom, #F4EBD0, #B08D55);
    color: #333;
    font-weight: bold;
    font-size: 1.1rem;
    padding: 10px 0;
    text-align: center;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
    z-index: 10;
}

/* ... (course box margin stays small, it follows flow if not absolute) ... */

/* Bouncing Arrow Animation */
@keyframes bounce-arrow {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(10px);
    }
}

.p3-arrow-down {
    display: inline-block;
    width: 40px;
    height: 55px;
    background-color: #B08D55;
    clip-path: polygon(35% 0, 65% 0, 65% 60%, 100% 60%, 50% 100%, 0 60%, 35% 60%);
    /* Block Arrow Shape */
    margin: 0 15px;
    animation: bounce-arrow 1.5s infinite ease-in-out;
    vertical-align: middle;
}

.p3-course-box {
    background: #fffde7;
    /* Light gold/beige */
    border: 5px solid #B08D55;
    /* Gold border */
    border-radius: 8px;
    width: 90%;
    padding: 10px;
    margin-top: 10px;
    /* Minimized gap */
    box-sizing: border-box;
    text-align: center;
}

.p3-course-header {
    background: transparent;
    /* Transparent for new layout */
    color: #333;
    display: flex;
    /* Changed to Flex for vertical stack */
    flex-direction: column;
    align-items: center;
    padding: 5px;
    border-radius: 0;
    font-weight: bold;
    font-size: 1.1rem;
    margin-bottom: 10px;
}

.p3-course-badge {
    /* Legacy override or handled inline for specificity, keeping clean here */
    font-weight: bold;
}

.p3-photo-grid {
    display: flex;
    justify-content: space-around;
    align-items: flex-start;
    gap: 5px;
}

.p3-photo-item {
    width: 32%;
    /* Max width for 3 items with gap */
    display: flex;
    flex-direction: column;
    align-items: center;
}

.p3-photo-item img {
    width: 100%;
    /* transform: scale(1.2); Removed */
    transform-origin: center;
    aspect-ratio: 1/1;
    /* Square */
    object-fit: cover;
    border-radius: 4px;
    margin-bottom: 25px;
    /* Increased margin to clear caption */
}

.main-ba-img {
    width: 100%;
    max-height: 550px;
    /* Increased further */
    object-fit: contain;
    /* Changed to contain to show full image including grid */
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    background: #fff;
}

.p3-caption {
    font-size: 0.8rem;
    font-weight: bold;
    color: #fff;
    background: #B08D55;
    padding: 2px 10px;
    border-radius: 4px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    margin-top: -10px;
    /* Pull up slightly to be closer to image if needed, or keep standard. Image has 25px margin. */
    z-index: 10;
    position: relative;
}

.p3-lead-wrapper {
    margin: 5px 0;
    /* Minimize again */
    text-align: center;
}

.p3-lead-text {
    font-size: 1.4rem;
    /* Increased */
    font-weight: bold;
    margin-bottom: 5px;
}

.p3-highlight {
    background: #ffe082;
    /* Gold highlight */
    padding: 0 2px;
}

.p3-lead-sub {
    font-size: 1.3rem;
    /* Increased */
    font-weight: bold;
}

.p3-highlight-red {
    color: #e53935;
}

.p3-price-box {
    background: linear-gradient(to bottom, #fffde7, #fff9c4);
    /* Beige gradient */
    border: 1px solid #fff59d;
    padding: 15px;
    width: 90%;
    border-radius: 4px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    box-sizing: border-box;
}

.p1-tagline-right {
    position: absolute;
    top: -45px;
    right: 0;
    background-color: #fff !important;
    /* Force white */
    color: #B08D55;
    font-weight: 900;
    font-size: 1.1rem;
    /* Slightly bigger than 1.0 to fix "too small" */
    padding: 8px 15px;
    /* Ensure box is visible */
    border-radius: 20px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    z-index: 100;
    /* High z-index */
    white-space: nowrap;
    letter-spacing: 0.1em;
    display: inline-block;
}

.p3-price-row-upper {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
    border-bottom: 1px solid #ddd;
    padding-bottom: 10px;
}

.p3-price-label {
    border: 1px solid #333;
    padding: 2px 5px;
    font-size: 0.8rem;
}

.p3-price-old {
    text-decoration: none;
    /* Remove default line, use custom red only */
    font-size: 1.2rem;
    color: #333;
    position: relative;
}

/* Red strikethrough attempt overlay */
.p3-price-old::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 1px;
    background: red;
    top: 50%;
    left: 0;
    transform: rotate(-10deg);
}

.p3-triangle-down {
    color: #e53935;
    font-size: 1.2rem;
}

.p3-price-row-main {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
}

.p3-discount-badge {
    background: #ef5350;
    color: #fff;
    padding: 5px 10px;
    font-size: 0.9rem;
    font-weight: bold;
    text-align: center;
    line-height: 1.1;
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2);
}

.p3-price-main {
    font-size: 2.8rem;
    color: #e53935;
    /* Red */
    font-family: "Times New Roman", serif;
    /* Elegant font */
    font-weight: bold;
    line-height: 1;
}

.p3-unit-main {
    font-size: 1.0rem;
    color: #e53935;
}

.p3-tax {
    font-size: 0.7rem;
    color: #e53935;
}

.p3-bottom-link {
    margin-top: 20px;
    font-weight: bold;
    font-size: 1.2rem;
    color: #333;
    display: flex;
    justify-content: center;
    width: 100%;
    align-items: center;
    gap: 5px;
}

.p3-link-text {
    border-bottom: 2px solid #FFD54F;
    /* Underline */
}

.p3-arrow-down {
    color: #81c784;
    /* Green arrow */
    font-size: 1.5rem;
}

.gold-ribbon-bar:after {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 50%;
    transform: translateX(-50%);
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 5px solid #B08D55;
}

.course-name-box {
    font-weight: bold;
    margin-bottom: 15px;
    font-size: 1.1rem;
}

.photo-grid-3 {
    display: flex;
    gap: 5px;
    justify-content: center;
    margin-bottom: 15px;
}

.photo-item {
    width: 33%;
}

.photo-item img {
    width: 100%;
    height: 80px;
    object-fit: cover;
    border-radius: 4px;
}

.photo-item caption {
    display: block;
    font-size: 0.6rem;
    color: #555;
    margin-top: 3px;
}

.mid-lead {
    margin: 15px 0;
    font-size: 1rem;
    line-height: 1.4;
}

.price-tag-large {
    background: rgba(255, 255, 255, 0.85);
    /* Translucent */
    padding: 15px;
    border: 3px solid #ff5252;
    border-radius: 8px;
    position: relative;
    display: inline-block;
    width: 90%;
}

.price-old {
    text-decoration: line-through;
    color: #888;
    font-size: 0.9rem;
}

.price-new {
    color: #ff5252;
    font-weight: 900;
    font-size: 1.8rem;
}

.floating-tag {
    position: absolute;
    top: -15px;
    left: -10px;
    background: #ff5252;
    color: white;
    padding: 5px 10px;
    font-size: 0.8rem;
    font-weight: bold;
    transform: rotate(-10deg);
    box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
}

.arrow-down {
    margin-top: 15px;
    font-weight: bold;
    color: #ff5252;
    animation: bounce 1s infinite alternate;
}

@keyframes bounce {
    from {
        transform: translateY(0);
    }

    to {
        transform: translateY(5px);
    }
}

/* Page 4 Styles */
.v-cut-header {
    background: rgba(51, 51, 51, 0.9);
    /* Translucent */
    color: white;
    padding: 15px;
    font-size: 1.3rem;
    margin-bottom: 30px;
    clip-path: polygon(0 0, 100% 0, 100% 85%, 50% 100%, 0 85%);
}

/* Page 4: Problem List Redesign */
/* Page 4: Problem List Redesign - Open Center Layout */
.problem-bubbles {
    position: relative;
    height: 400px;
    /* Reduced height further */
    width: 100%;
    margin-top: 5px;
}

.bubble {
    position: absolute;
    width: 150px;
    height: 130px;
    /* Changed fill to #e0e0e0 (Gray) */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 160'%3E%3Cpath d='M40,80 A30,30 0 0,1 50,30 A40,40 0 0,1 120,30 A40,40 0 0,1 170,60 A30,30 0 0,1 170,110 A30,30 0 0,1 110,120 L100,150 L90,120 A40,40 0 0,1 40,80 Z' fill='%23e0e0e0' stroke='%23000' stroke-width='4' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-color: transparent;
    color: #000;
    font-weight: 900;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-size: 0.85rem;
    line-height: 1.3;
    padding: 15px 15px 35px 15px;
    /* Extra bottom padding for tail area */
    z-index: 5;
    border: none;
    border-radius: 0;
    box-shadow: none;
}

/* Remove CSS tails */
.bubble::before,
.bubble::after {
    display: none;
}

/* Left Column */
/* Left Column */
.b1 {
    top: 80px;
    /* Moved down significantly from -20px */
    left: -2%;
}

/* b2 deleted */

.b3 {
    bottom: 0px;
    /* Moved down to very bottom */
    left: -3%;
}

/* Right Column */
.b4 {
    top: -25px;
    /* Moved up significantly */
    right: -2%;
}

.b5 {
    bottom: 90px;
    /* Moved up significantly as requested */
    right: -3%;
}


/* Page 5 Styles */
.solution-header {
    font-size: 1.2rem;
    margin-bottom: 5px;
    /* Reduced margin */
    color: #333;
    font-weight: bold;
    line-height: 1.5;
}

.photo-grid-4 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
    /* Reduced gap as width is wider */
    width: 90%;
    /* Mobile First: Wide container */
    margin: 0 auto 5px;
}

.p-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    position: relative;
}

/* Page 5 Grid Items */
.page-5 .p-item img {
    width: 100%;
    border-radius: 5px;
    margin-bottom: 5px;
    transform: none;
    /* Remove scale, rely on width */
    transform-origin: center;
}

/* Page 12 Grid Items (Reset Scale) */
.page-12 .p-item img {
    transform: none;
    width: 100%;
}

.p5-label {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    background: #B08D55;
    /* Gold background */
    color: white;
    font-size: 0.8rem;
    padding: 3px 0;
    text-align: center;
    font-weight: bold;
}

.solution-arrow {
    width: 0;
    height: 0;
    border-left: 20px solid transparent;
    border-right: 20px solid transparent;
    border-top: 25px solid #B08D55;
    /* Gold triangle */
    margin: 5px auto;
    /* Reduced margin */
}

.solution-lead {
    font-size: 1.4rem;
    font-weight: 900;
    color: #333;
}

.highlight-distortion {
    color: #e53935 !important;
    /* Red for distortion */
    font-weight: bold;
    font-size: 1.8rem;
    /* Increased heavily */
}

.highlight-disorder {
    color: #e53935 !important;
    /* Red for disorder */
    font-weight: bold;
    font-size: 1.8rem;
    /* Increased heavily */
}

.solution-desc {
    background: rgba(255, 255, 255, 0.9);
    padding: 10px;
    /* Reduced padding */
    border-radius: 8px;
    margin-bottom: 10px;
    /* Reduced margin */
    display: inline-block;
    font-weight: bold;
    line-height: 1.6;
    font-size: 1.3rem;
    /* Increased by ~1.3x */
}

.solution-final {
    font-size: 1.6rem;
    /* Reduced from 1.8rem (approx 0.9x) */
    font-weight: bold;
    color: #B08D55;
    border-bottom: 3px solid #B08D55;
    display: inline-block;
    padding-bottom: 5px;
    margin-bottom: 100px;
    /* Increased margin to clear CTA */
}

/* Page 6/7 Evidence */
.evidence-header {
    background: #B08D55;
    color: white;
    padding: 10px;
    width: 100%;
    margin-bottom: 20px;
    font-weight: bold;
}

.ba-container,
.face-ba-container {
    width: 95%;
    margin: 0 auto 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
}

.ba-item {
    flex: 1;
    /* Allow side-by-side */
    max-width: 48%;
    /* Ensure gap */
}

.ba-item img {
    width: 100%;
    border-radius: 5px;
}

.ba-label {
    display: block;
    font-size: 0.8rem;
    font-weight: bold;
}

.ba-icon {
    font-size: 1.5rem;
    color: #ccc;
}

.evidence-desc {
    font-size: 1.1rem;
    line-height: 1.5;
    background: rgba(255, 255, 255, 0.85);
    /* Translucent */
    padding: 10px;
    border-radius: 8px;
}

.highlight-pink {
    color: #ff5252;
    font-weight: bold;
    font-size: 1.2rem;
}

.main-ba-img {
    width: 100%;
    max-width: 300px;
    border-radius: 10px;
}

/* Page 8 Education */
.edu-header {
    font-size: 1.3rem;
    color: #B08D55;
    border-bottom: 2px solid #B08D55;
    display: inline-block;
    margin-bottom: 5px;
    /* Reduced from 10px */
}

.edu-sub {
    font-size: 1rem;
    margin-bottom: 10px;
    /* Reduced from 20px */
}

.edu-diagram {
    border: 2px solid #B08D55;
    /* Changed to solid */
    padding: 10px;
    /* Reduced from 20px */
    margin: 5px auto;
    /* Reduced from 10px */
    width: 80%;
    background: rgba(255, 255, 255, 0.85);
    /* Translucent */
    border-radius: 10px;
    transform: scale(1.3);
    /* Scale Page 8 diagram 1.3x */
    transform-origin: center;
}

.brain-memory-box {
    font-weight: bold;
    color: #B08D55;
}

.edu-text {
    font-size: 0.9rem;
    text-align: left;
    margin: 10px auto;
    /* Reduced from 15px */
    width: 90%;
    line-height: 1.4;
    /* Reduced from 1.6 */
    background: rgba(255, 255, 255, 0.8);
    padding: 8px;
    /* Reduced from 10px */
    border-radius: 5px;
}

/* Page 9 Anxiety Redesign */
.page-9 .slide-background {
    background: linear-gradient(to bottom, #4a4a4a 0%, #2a2a2a 100%);
}

.p9-container {
    width: 100%;
    height: 100%;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 10px;
}

.p9-triangle-top {
    position: relative;
    background: #333;
    color: white;
    font-weight: bold;
    font-size: 1.2rem;
    padding: 10px 20px 20px;
    clip-path: polygon(0 0, 100% 0, 50% 100%);
    margin-bottom: 20px;
    z-index: 10;
}

.p9-handwriting {
    font-family: "Shippori Mincho", serif;
    color: #fff;
    font-size: 1.3rem;
    margin-bottom: 20px;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
    width: 100%;
    text-align: center;
}

.p9-handwriting::after {
    content: none !important;
    display: none !important;
    border: none !important;
}



.p9-bubble-right {
    background: rgba(80, 80, 80, 0.9);
    color: white;
    padding: 15px;
    border-radius: 10px;
    width: 60%;
    margin-left: auto;
    /* Align right */
    margin-right: 10px;
    margin-bottom: 5px;
    /* Changed from -20px to 5px to reduce overlap/separate */
    position: relative;
    z-index: 5;
    text-align: left;
    font-size: 0.95rem;
}



.p9-box-black {
    background: #000;
    color: white;
    padding: 20px;
    border-radius: 15px;
    width: 70%;
    margin-right: auto;
    /* Align left */
    margin-left: 10px;
    margin-top: -10px;
    /* Added slight negative margin for "slight" overlap instead of "bubble's large negative margin" */
    margin-bottom: 30px;
    position: relative;
    z-index: 10;
    text-align: center;
    font-size: 1rem;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
    border: 1px solid #333;
}

.point-header-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    margin-bottom: 10px;
    width: 100%;
}

.point-badge {
    background: #B08D55;
    color: white;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: bold;
    font-size: 0.9rem;
    flex-shrink: 0;
    line-height: 1.1;
    text-align: center;
    margin: 0;
}

.reason-desc {
    font-size: 1.3rem;
    line-height: 1.6;
}

.reason-title {
    font-size: 17.28px !important;
    font-weight: bold;
    color: #333;
    text-align: left;
    margin: 0;
    flex-grow: 1;
}

.p9-arrow-row {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-bottom: 10px;
}

/* Page 13 Arrow Animation: Thick Block Arrow Shape */
.green-arrow {
    width: 60px;
    height: 60px;
    position: relative;
    background: transparent !important;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 10px;
    border: none;
}

.green-arrow::before {
    content: '';
    display: block;
    width: 40px;
    height: 30px;
    background-color: #B08D55;
    /* Solid Gold Fill */
    /* Triangle pointing right */
    clip-path: polygon(0% 20%, 60% 20%, 60% 0%, 100% 50%, 60% 100%, 60% 80%, 0% 80%);
    animation: arrow-move 1.5s infinite;
}

@keyframes arrow-move {
    0% {
        transform: translateX(-5px);
        opacity: 0.8;
    }

    50% {
        transform: translateX(5px);
        opacity: 1;
    }

    100% {
        transform: translateX(-5px);
        opacity: 0.8;
    }
}





.p9-bottom-text {
    color: white;
    font-weight: bold;
    font-size: 1.1rem;
}

.p9-bottom-highlight {
    color: #B08D55;
    font-size: 1.3rem;
    font-weight: 900;
}

/* Page 10 Reason */
.reason-header {
    background: #B08D55;
    color: white;
    width: 100%;
    padding: 10px;
    font-weight: bold;
    margin-bottom: 20px;
}

.point-badge {
    background: #B08D55;
    color: white;
    border-radius: 50%;
    width: 60px;
    height: 60px;
    line-height: 60px;
    margin: 0 auto;
    font-weight: bold;
    border: 2px solid white;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

.reason-title {
    font-size: 1.3rem;
    margin: 10px 0 20px;
}

.compare-chart {
    display: flex;
    width: 95%;
    margin: 0 auto;
    border: 1px solid #ccc;
}

.compare-left {
    flex: 1;
    background: rgba(51, 51, 51, 0.9);
    /* Translucent */
    color: white;
    padding: 20px 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
}

.compare-right {
    flex: 1;
    background: rgba(255, 255, 255, 0.85);
    /* Translucent */
    padding: 20px 5px;
    border: 2px solid #B08D55;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.reason-desc {
    font-size: 0.85rem;
    text-align: left;
    padding: 15px;
    background: rgba(255, 255, 255, 0.85);
    /* Translucent */
    margin: 20px auto;
    width: 90%;
    border-radius: 5px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

/* Page 11 Styles */
.orange-box {
    background: rgba(255, 243, 224, 0.9);
    /* Translucent #fff3e0 */
    padding: 20px;
    border-radius: 10px;
    margin-bottom: 20px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
    font-size: 0.95rem;
    line-height: 1.6;
    text-align: left;
    width: 90%;
    margin-left: auto;
    margin-right: auto;
}

.reason-img {
    width: 90%;
    border-radius: 8px;
    margin-bottom: 20px;
}

/* Page 12 Styles */
.menu-icons-row {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 20px;
}

.menu-icons-row span {
    background: #B08D55;
    color: white;
    padding: 10px 15px;
    border-radius: 20px;
    font-weight: bold;
}

/* Page 13 Styles */
.catch-on-photo {
    font-size: 1.2rem;
    background: rgba(255, 255, 255, 0.85);
    /* Translucent */
    padding: 5px 15px;
    font-weight: bold;
    color: #d32f2f;
    display: inline-block;
    margin-bottom: 10px;
    border-radius: 5px;
}

.green-arrow {
    font-weight: bold;
    color: #B08D55;
    align-self: center;
    font-size: 0.8rem;
}

/* Page 14-16 Reviews Redesign */

/* Stats Container (3 Columns) */
.review-stats-container {
    display: flex;
    justify-content: center;
    gap: 5px;
    width: 95%;
    margin: 10px auto 15px;
}

.stat-item {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Gold Circle / Wreath Simulation */
/* Gold Circle / Wreath Simulation */
.stat-circle {
    width: 25vw;
    /* Responsive width for mobile */
    max-width: 90px;
    height: 25vw;
    /* Responsive height */
    max-height: 90px;
    border: 2px solid #e0c080;
    /* Brighter inner ring */
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background: radial-gradient(circle at 30% 30%, #fffcf5, #f9f0d5);
    /* Subtle gradient bg */
    position: relative;
    box-shadow: 0 4px 10px rgba(176, 141, 85, 0.4), inset 0 0 10px rgba(255, 215, 0, 0.2);
    /* Enhanced shadow & inner glow */
}

.stat-circle {
    width: 65px;
    /* Further reduced from 80px */
    height: 65px;
    border-radius: 50%;
    background: #fff;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin: -2px auto 5px;
    /* Adjusted margins */
    position: relative;
    box-shadow: 0 3px 5px rgba(184, 134, 11, 0.3);
    border: 2px solid #ffd700;
    /* Bright gold */
    filter: drop-shadow(0 0 2px gold);
    /* Glow */
}

.review-stats-container {
    margin-top: -10px;
    /* Pull up */
}

/* Crown Icon - Doubled Size & Luxurious */
/* Crown Icon - Doubled Size & Luxurious */
.stat-circle::after {
    content: '👑';
    position: absolute;
    top: -28px;
    /* Adjusted for 65px circle */
    left: 50%;
    transform: translateX(-50%);
    font-size: 1.8rem;
    /* Scaled down crown */
    line-height: 1;
    text-shadow: 0 2px 2px rgba(0, 0, 0, 0.2);
    /* Drop shadow for depth */
    filter: drop-shadow(0 0 2px gold);
    /* Glow */
}

/* Wreath / Laurel Simulation - Enhanced */
.stat-circle::before {
    content: '';
    position: absolute;
    top: -4px;
    left: -4px;
    right: -4px;
    bottom: -4px;
    border-radius: 50%;
    border: 3px dotted #b8860b;
    /* Darker gold for contrast */
    border-top-color: transparent;
    border-bottom-color: #ffd700;
    /* Brighter gold at bottom */
    border-left-color: #d4af37;
    border-right-color: #d4af37;
    pointer-events: none;
    box-shadow: 0 0 5px rgba(212, 175, 55, 0.5);
    /* Glowing wreath */
}

.stat-label {
    font-size: 0.7rem;
    /* Reduced from 0.95rem */
    color: #555;
    line-height: 1;
    margin-bottom: -1px;
    /* Reset spacing */
    text-align: center;
    z-index: 2;
    font-weight: bold;
    letter-spacing: -0.5px;
    transform: none;
    /* Removed scale transform */
    white-space: nowrap;
}

.stat-value {
    color: #d4af37;
    /* Gold */
    font-weight: bold;
    font-size: 1.3rem;
    /* Reduced from 1.6rem */
    line-height: 1;
    font-family: "Didot", serif;
    z-index: 2;
    text-shadow: 1px 1px 0px #fff;
    margin-top: 0px;
}

.stat-unit {
    font-size: 0.9rem;
    /* Increased from 0.8rem */
    margin-left: 0px;
}

.stat-sub {
    font-size: 0.7rem;
    /* Increased from 0.6rem */
}

/* Review Box (Card Style) */
.review-box.card-style {
    background: #ffffff;
    border: 1px solid #f0e6d2;
    /* Light gold border */
    border-radius: 12px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
    /* Soft drop shadow */
    padding: 10px 10px;
    /* Further reduced padding */
    width: 90%;
    margin: 5px auto 40px;
    /* Further reduced margins */
    position: relative;
    text-align: center;
}

.stars {
    color: #FFD700;
    /* Gold stars */
    font-size: 1.0rem;
    /* Reduced size */
    margin-bottom: 5px;
    /* Reduced margin */
    letter-spacing: 2px;
}

.review-title {
    font-weight: bold;
    font-size: 0.9rem;
    /* Reduced size */
    color: #333;
    margin-bottom: 8px;
    /* Reduced margin */
    border-bottom: 1px dashed #dcdcdc;
    padding-bottom: 5px;
    /* Reduced padding */
    display: inline-block;
    width: 100%;
}

.review-body {
    font-size: 0.8rem;
    /* Reduced size */
    line-height: 1.4;
    /* Tighter line height */
    color: #555;
    text-align: left;
    margin-bottom: 8px;
    /* Reduced margin */
}

.review-name {
    font-size: 0.7rem;
    /* Reduced size */
    color: #888;
    text-align: right;
    font-style: italic;
}

/* Legacy styles kept/integrated to prevent breaks if used elsewhere */
.review-laurel-simple {
    font-weight: bold;
    display: none;
    /* Hide if unused */
}

.review-lead {
    font-size: 1rem;
    margin-bottom: 5px;
    /* Reduced from 20px */
    font-weight: bold;
    background: rgba(255, 255, 255, 0.7);
    padding: 2px 5px;
    /* Reduced padding */
    border-radius: 5px;
    color: #B08D55;
}



.review-box {
    /* Fallback for other pages if they use review-box without card-style */
    background: rgba(255, 255, 255, 0.9);
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    width: 90%;
    margin: 0 auto;
    text-align: left;
}

.review-photo {
    width: 72%;
    /* Reduced to 0.8x of 90% */
    border-radius: 8px;
    margin: 10px auto;
    display: block;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

/* Page 17 Atmosphere */
.atmosphere-header {
    font-size: 1.3rem;
    margin-bottom: 10px;
    color: #B08D55;
    font-weight: bold;
}

.gold-bar-simple {
    background: #b08d55;
    color: white;
    padding: 5px;
    width: 100%;
    margin-bottom: 15px;
    font-size: 0.9rem;
}

.atmosphere-photo-container {
    position: relative;
    width: 100%;
    height: auto;
    /* Allow content to define height */
    overflow: hidden;
}

.atmosphere-photo-container img,
.atmosphere-photo-container video {
    width: 100%;
    height: auto;
    /* Maintain aspect ratio */
    display: block;
    object-fit: contain;
    /* Ensure full visibility */
}

.overlay-text-centered {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(255, 255, 255, 0.8);
    padding: 20px;
    border-radius: 5px;
    font-size: 1.2rem;
    font-family: "Shippori Mincho", serif;
}

/* Page 18 Anxiety */
.anxiety-grid {
    display: flex;
    gap: 10px;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 30px;
}

.jagged-bubble {
    background: rgba(0, 0, 0, 0.9);
    /* Translucent */
    color: #fff;
    padding: 15px;
    clip-path: polygon(0% 0%, 100% 0%, 100% 85%, 75% 85%, 75% 100%, 50% 85%, 0% 85%);
    width: 120px;
    font-size: 0.8rem;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 80px;
    margin-bottom: 10px;
}

.relief-text-large {
    font-size: 1.5rem;
    font-weight: bold;
    color: #333;
}

.text-gold-shadow {
    color: #d4af37;
    text-shadow: 1px 1px 0 #000;
    font-size: 2rem;
}

/* Page 19 Offer */
.offer-head {
    font-size: 1.5rem;
    margin-bottom: 10px;
}

.offer-sub {
    font-size: 0.9rem;
    margin-bottom: 20px;
}

.feature-3-col {
    display: flex;
    justify-content: center;
    gap: 5px;
    margin-bottom: 20px;
    font-size: 0.8rem;
    font-weight: bold;
}

.feature-3-col div {
    background: rgba(255, 255, 255, 0.9);
    /* Translucent */
    padding: 10px;
    border-radius: 5px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    width: 33%;
}

.ticket-box {
    border: 2px dashed #333;
    background: rgba(255, 248, 225, 0.9);
    /* Translucent #fff8e1 */
    padding: 20px;
    width: 90%;
    margin: 0 auto;
    position: relative;
}

.ticket-title {
    font-weight: bold;
    font-size: 1.2rem;
    margin-bottom: 10px;
}

.ticket-tags {
    color: #666;
    font-size: 0.9rem;
    margin-bottom: 10px;
}

.ticket-note {
    font-weight: bold;
    color: #d32f2f;
    margin-bottom: 10px;
}

.ticket-price {
    font-size: 2.5rem;
    color: #d32f2f;
    font-weight: bold;
}

/* Page 20-22 Flow */
.flow-bar {
    background: #d4af37;
    color: white;
    padding: 10px;
    width: 100%;
    font-weight: bold;
    margin-bottom: 20px;
}

.flow-step-num {
    font-size: 1.1rem;
    font-weight: bold;
    margin-bottom: 15px;
}

.step-circle {
    background: #B08D55;
    color: #fff;
    padding: 5px 10px;
    border-radius: 50%;
    margin-right: 5px;
}

.flow-img {
    width: 90%;
    border-radius: 8px;
    margin-bottom: 15px;
}

/* Page 20 Specific Image Adjustment (Show 2-7 area) */
.page-20 .flow-img {
    height: 220px;
    /* Restrict height to force crop */
    object-fit: cover;
    object-position: center 20%;
    /* Shift view to display upper-middle area */
}

.flow-text {
    font-size: 0.9rem;
    text-align: left;
    width: 90%;
    margin: 0 auto 20px;
    line-height: 1.6;
    background: rgba(255, 255, 255, 0.8);
    padding: 10px;
    border-radius: 5px;
}

.flow-nav {
    font-size: 0.8rem;
    color: #888;
}

.flow-nav .active {
    color: #333;
    font-weight: bold;
}

/* Page 23 Reservation */
.reservation-bar {
    background: rgba(255, 255, 255, 0.9);
    /* Translucent */
    border: 1px solid #ddd;
    padding: 10px;
    border-radius: 20px;
    display: inline-block;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    margin-bottom: 20px;
}

.step-box {
    background: rgba(255, 253, 231, 0.9);
    /* Translucent light gold */
    border: 1px solid #B08D55;
    padding: 15px;
    border-radius: 10px;
    width: 90%;
    margin: 0 auto;
}

.step-head {
    font-weight: bold;
    font-size: 1.1rem;
    color: #B08D55;
    border-bottom: 1px solid #B08D55;
    padding-bottom: 5px;
    margin-bottom: 5px;
}

/* Page 11 Specifics for text fitting */
.p11-line-1 {
    display: inline-block;
    font-size: 0.75rem;
    /* Reduced to fit on one line */
    white-space: nowrap;
    letter-spacing: -0.05em;
    /* Tighten to fit */
    font-weight: bold;
}

.p11-line-others {
    font-size: 0.75rem;
    /* Match the first line size */
    font-weight: bold;
}

.reason-title {
    font-size: 1.1rem;
    color: #B08D55;
    border-bottom: 2px solid #ddd;
    padding-bottom: 5px;
    margin-bottom: 15px;
}

.step-desc {
    font-size: 0.9rem;
    color: #333;
}

.step-arrow {
    color: #ccc;
    font-size: 1rem;
    margin: 5px 0;
}

.urgent-text {
    margin-top: 20px;
    font-weight: bold;
    font-size: 1.1rem;
}

/* Page 24 Final Offer */
.gold-bg-bar {
    background: #d4af37;
    color: white;
    padding: 10px;
    width: 100%;
    font-weight: bold;
    margin-bottom: 10px;
}

.final-sub {
    margin-bottom: 20px;
}

.course-green-box {
    border: 2px solid #B08D55;
    padding: 10px;
    color: #B08D55;
    font-weight: bold;
    width: 90%;
    margin: 0 auto 10px;
    background: rgba(255, 255, 255, 0.9);
    /* Translucent */
}

.final-price-area {
    margin: 20px 0;
}

.red-border-tag {
    border: 2px solid #ff5252;
    color: #ff5252;
    display: inline-block;
    padding: 5px 15px;
    font-weight: bold;
    margin-bottom: 10px;
}

.price-final {
    font-size: clamp(2rem, 8vw, 3rem);
    /* Scalable font size */
    color: #d32f2f;
    font-weight: 900;
}

.final-link {
    color: #333;
    text-decoration: underline;
    font-weight: bold;
    margin-top: 20px;
    font-size: 1.1rem;
}

/* Page 19 Offer Redesign */
.p19-container {
    padding-top: 5px;
    width: 100%;
}

.p19-header-text {
    font-size: clamp(1rem, 4vw, 1.3rem);
    /* Increased back slightly */
    font-weight: bold;
    text-align: center;
    margin-bottom: 5px;
    line-height: 1.3;
}

.p19-feature-grid {
    display: flex;
    justify-content: space-between;
    gap: 4px;
    margin-bottom: 10px;
    width: 98%;
    margin: 0 auto 10px;
}

.p19-feature-card {
    background: #fff;
    border-radius: 6px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    width: 32%;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.p19-card-header {
    background: #B08D55;
    color: white;
    font-size: 0.8rem;
    /* Increased from 0.7rem */
    padding: 4px 0;
    text-align: center;
    font-weight: bold;
}

.p19-card-img {
    width: 100%;
    height: 70px;
    object-fit: cover;
}

.p19-card-text {
    font-size: 0.8rem;
    /* Increased from 0.65rem */
    padding: 4px;
    text-align: center;
    color: #333;
    line-height: 1.2;
    flex-grow: 1;
    font-weight: bold;
    /* Added bold for visibility */
}

/* Ticket Style */
.p19-ticket {
    background: linear-gradient(135deg, #fffde7 0%, #fff9c4 100%);
    border: 2px solid #B08D55;
    border-radius: 12px;
    padding: 10px 5px;
    /* Tight padding */
    position: relative;
    width: 96%;
    margin: 0 auto;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    text-align: center;
}

/* Cutout circles for ticket effect */
.p19-ticket::before,
.p19-ticket::after {
    content: '';
    position: absolute;
    top: 50%;
    width: 16px;
    height: 16px;
    background: #f5f5f5;
    border-radius: 50%;
    transform: translateY(-50%);
    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.1);
}

.p19-ticket::before {
    left: -8px;
    border-right: 2px solid #B08D55;
}

.p19-ticket::after {
    right: -8px;
    border-left: 2px solid #B08D55;
}


.p19-ticket-title-badge {
    background: #fff;
    border: 1px solid #B08D55;
    color: #B08D55;
    padding: 3px 20px;
    border-radius: 20px;
    font-weight: bold;
    font-size: 1.1rem;
    /* Increased from 1rem */
    display: inline-block;
    margin-bottom: 5px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.p19-tag-row {
    display: flex;
    justify-content: center;
    gap: 4px;
    margin-bottom: 5px;
}

.p19-tag {
    background: #B08D55;
    color: #fff;
    font-size: 0.85rem;
    /* Increased from 0.75rem */
    padding: 4px 10px;
    border-radius: 8px;
}

.p19-note {
    font-size: 1rem;
    /* Increased from 0.9rem */
    font-weight: bold;
    color: #333;
    margin-bottom: 2px;
    text-align: center;
    background: linear-gradient(transparent 60%, #fff176 60%);
    display: inline-block;
}

.p19-price-row {
    display: flex;
    justify-content: center;
    align-items: baseline;
    margin-top: 0;
}

.p19-price-main {
    font-size: 3.5rem;
    /* Kept large */
    color: #e53935;
    font-weight: 900;
    line-height: 1;
    text-shadow: 2px 2px 0 #fff;
}

.p19-price-unit {
    font-size: 1.5rem;
    /* Increased */
    color: #333;
    font-weight: bold;
}

.p19-time-circle {
    position: absolute;
    top: 15px;
    right: 15px;
    width: 65px;
    height: 65px;
    background: #B08D55;
    /* Gold */
    border-radius: 50%;
    color: #fff;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-size: 0.7rem;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
    border: 2px solid #fff;
    z-index: 10;
}

.p19-time-val {
    font-size: 1.4rem;
    font-weight: bold;
    line-height: 1;
}



.qa-header {
    font-size: 1.15rem;
    /* Reduced from clamp/1.8rem */
    margin-bottom: 10px;
    /* Reduced from 20px */
    color: #333;
    font-weight: bold;
    text-align: center;
    margin-top: 10px;
}

/* Compact FAQ Layout */
.qa-item {
    margin-bottom: 8px;
    /* Reduced from 15px */
    width: 96%;
    margin: 0 auto 8px;
    background: rgba(255, 255, 255, 0.95);
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
    /* Lighter shadow */
    text-align: left;
}

.q-box {
    background: #fcfcfc;
    padding: 8px 12px;
    /* Reduced padding */
    font-weight: bold;
    color: #B08D55;
    font-size: 0.8rem;
    /* Reduced from 1rem */
    border-bottom: 1px solid #eee;
    line-height: 1.3;
}

.a-box {
    padding: 8px 12px;
    /* Reduced padding */
    font-size: 0.75rem;
    /* Reduced from 0.95rem */
    line-height: 1.4;
    color: #444;
}

.page-25 .slide-content {
    padding-bottom: 250px !important;
    /* Force extra padding */
}

/* =========================================
   Global Font Size Reduction Updates (Correction128)
   ========================================= */

/* 1. Global Base Font Size Reset */
html,
body {
    font-size: 14px !important;
    /* Force smaller base if overridden elsewhere */
}

/* 2. Scaled Down Headers */
.qa-header,
.reason-title,
.solution-title,
.problem-title,
.catch-copy-large,
.flow-bar,
.p19-header-text,
.p3-lead-text,
.why-lead {
    transform-origin: center;
    transform: scale(0.9);
    /* 10% reduction */
}

/* 3. Page 1 Specific Reductions */
.p1-logo {
    font-size: 1rem !important;
    padding: 2px 8px !important;
}

.p1-flag-big {
    font-size: 1rem !important;
}

.p1-flag-small {
    font-size: 0.65rem !important;
}

.ribbon-text {
    font-size: 0.8rem !important;
}

.p1-catch-small {
    font-size: 1rem !important;
    /* Catch copy container */
}

.p1-catch-small span {
    /* Allow inline styles to work */
    font-size: inherit;
}

.p1-label-normal,
.p1-label-menu {
    font-size: 0.7rem !important;
}

.p1-price-num {
    font-size: 2.5rem !important;
}

.p1-price-unit {
    font-size: 1rem !important;
}

.p1-tagline-right {
    font-size: 0.8rem !important;
    /* Reduced to half of 1.6rem */
}

/* 4. Other Specific Adjustments */
.p3-price-val {
    font-size: 2.5rem !important;
}

.p19-price-main {
    font-size: 2.5rem !important;
}

.urgent-text {
    font-size: 1rem !important;
}

.final-sub {
    font-size: 0.9rem !important;
}

/* FAQ Text Reduction */
.q-box {
    font-size: 0.9rem !important;
}

.a-box {
    font-size: 0.85rem !important;
}

/* General Paragraphs */
p,
.review-body,
.reason-desc,
.solution-desc,
.problem-text,
.flow-text {
    font-size: 0.85rem !important;
    line-height: 1.6;
}



/* =========================================
   Correction149 Updates (Smaller Seal)
   ========================================= */


/* Page 20/22 Flow Image/Video Adjustment */
.page-20 .flow-img,
.page-22 .flow-img {
    width: 100%;
    height: 270px;
    /* Increased by 1.5x from 180px */
    object-fit: cover;
    object-position: center 20%;
    /* Shifted down to show approx area 2-7 (cutting top 10%) */
    border-radius: 6px;
    margin-bottom: 10px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.p1-seal {
    width: 70px !important;
    max-width: 70px !important;
    height: 70px !important;
    max-height: 70px !important;
    font-size: 0.5rem !important;
    /* Keep positioning relative/absolute as per base, but size is key */
}

.p1-seal .seal-inner {
    line-height: 1.1 !important;
}

/* Compact Page 19 Container */
.p19-container {
    padding: 5px 10px;
    /* Reduced padding */
    height: 100vh;
    /* Use full viewport height */
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    overflow: hidden;
    /* Prevent scrolling if possible */
    justify-content: flex-start;
}

/* Ensure content scales on small screens */
@media (max-height: 700px) {
    .p19-green-ticket {
        transform: scale(0.9);
        margin-bottom: 5px;
    }
}

/* =========================================
   Page 19 Redesign - Green Ticket Style
   ========================================= */

.p19-container {
    padding: 10px;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    overflow-y: auto;
    /* Allow scrolling if needed */
}

.p19-top-message {
    text-align: center;
    margin-bottom: 20px;
}

.p19-main-title {
    font-size: 1.2rem;
    font-weight: bold;
    color: #333;
    line-height: 1.4;
    margin-bottom: 10px;
}

.highlight-gold {
    background: linear-gradient(transparent 60%, #ffe082 60%);
    font-size: 1.3rem;
}

.p19-sub-text {
    font-size: 0.9rem;
    line-height: 1.6;
    color: #555;
    font-weight: bold;
}

.text-red {
    color: #e53935;
    font-weight: bold;
}

.text-underline-gold {
    border-bottom: 2px solid #ffd700;
    color: #b08d55;
}

/* Mini Grid */
.p19-mini-grid {
    display: flex;
    justify-content: space-between;
    width: 100%;
    gap: 5px;
    margin-bottom: 20px;
}

.p19-mini-card {
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    width: 32%;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.mini-card-head {
    background: #B08D55;
    /* Gold/Brown */
    color: #fff;
    font-weight: bold;
    font-size: 0.7rem;
    padding: 3px 0;
    text-align: center;
}

.p19-mini-card img {
    width: 100%;
    height: 60px;
    object-fit: cover;
}

.mini-card-desc {
    font-size: 0.55rem;
    padding: 5px;
    line-height: 1.3;
    color: #555;
    flex-grow: 1;
}

.centered-desc {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    font-weight: bold;
    font-size: 0.7rem;
    /* Slightly larger for short text */
}

.text-bold {
    font-weight: bold;
    color: #B08D55;
}

/* Green Ticket */
/* Gold Ticket (formerly Green) */
.p19-green-ticket {
    background: linear-gradient(135deg, #f0e6ce 0%, #dbbf9e 100%);
    /* Gold/Beige Gradient */
    width: 95%;
    border-radius: 12px;
    padding: 10px;
    /* Reduced padding */
    position: relative;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
    color: #fff;
    margin-bottom: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    border: 1px solid #B08D55;
}

/* Dashed Line and Cutouts */
.ticket-dashed-line {
    width: 100%;
    border-top: 2px dashed rgba(255, 255, 255, 0.6);
    margin: 10px 0;
    position: relative;
}

.ticket-dashed-line::before,
.ticket-dashed-line::after {
    content: '';
    position: absolute;
    width: 24px;
    height: 24px;
    background: #f5f5f5;
    /* Adjusted to match common bg */
    border-radius: 50%;
    top: -13px;
    z-index: 2;
}

.ticket-dashed-line::before {
    left: -27px;
}

.ticket-dashed-line::after {
    right: -27px;
}

/* Content Top */
.ticket-content-top {
    width: 100%;
    text-align: center;
}

.ticket-title-pill {
    background: #fff;
    color: #333;
    font-weight: bold;
    border-radius: 20px;
    padding: 5px 15px;
    display: inline-block;
    border: 2px solid #B08D55;
    /* Gold border */
    margin-bottom: 5px;
    /* Compact margin */
    font-size: 1rem;
    box-shadow: 0 2px 0 rgba(0, 0, 0, 0.1);
}

.ticket-tags {
    display: flex;
    justify-content: center;
    gap: 5px;
    margin-bottom: 10px;
}

.ticket-tag {
    background: rgba(255, 255, 255, 0.3);
    border: 1px solid #fff;
    border-radius: 15px;
    padding: 3px 10px;
    font-size: 0.8rem;
    font-weight: bold;
}

.ticket-note {
    font-weight: bold;
    font-size: 0.9rem;
    line-height: 1.4;
    text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.1);
}

.ticket-note-highlight {
    font-size: 1.2rem;
    color: #fff;
    text-decoration: underline;
    text-decoration-color: #ffd700;
    text-underline-offset: 3px;
}

/* Content Bottom */
.ticket-content-bottom {
    width: 100%;
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding-top: 5px;
}

.time-circle {
    background: #ffe082;
    /* Gold/Yellow circle */
    width: 70px;
    height: 70px;
    border-radius: 50%;
    color: #333;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    box-shadow: 0 3px 5px rgba(0, 0, 0, 0.2);
    border: 2px solid #fff;
}

.time-label {
    font-size: 0.6rem;
    font-weight: bold;
}

.time-val {
    font-size: 1.4rem;
    font-weight: 900;
    line-height: 1;
}



.price-val {
    font-size: 3.5rem;
    font-family: "Didot", serif;
    line-height: 1;
}

/* =========================================
   User Request: Increase CTA Price by 1.5x
   ========================================= */

/* Footer CTA Price (was ~12px -> now ~18px/1.3rem) */
.footer-price-small {
    font-size: 1.3rem !important;
    /* increased from ~0.85rem */
    line-height: 1.2;
    font-weight: bold;
}

/* Final Page CTA Price (was ~25px -> now ~38px/2.7rem) */
.price-new {
    font-size: 2.7rem !important;
    /* increased from ~1.8rem */
    font-weight: 900;
}

/* Page 1 Right Tagline */
/* Page 1 Right Tagline - Duplicate Removed */

/* Ensure container handles larger text */
.fixed-footer-btn {
    padding: 5px 15px;
    /* Adjust padding if needed */
}

.footer-sub-text {
    font-size: 0.9rem;
    /* 1.3x (was 0.7) */
    font-weight: bold;
}

.footer-main-text {
    font-size: 1.5rem;
    /* 1.3x (was 1.1) */
    font-weight: bold;
}

.footer-arrow {
    font-size: 1.5rem;
    /* Match main text */
}

/* Page 18 Arrows */
.relief-arrow-container {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15px;
    margin-top: 10px;
}

.relief-arrow {
    width: 40px;
    height: 60px;
    background: #B08D55;
    /* Gold */
    clip-path: polygon(25% 0, 75% 0, 75% 60%, 100% 60%, 50% 100%, 0 60%, 25% 60%);
    /* Arrow Shape */
    animation: arrowBounce 1.5s infinite ease-in-out;
}

@keyframes arrowBounce {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(10px);
    }
}

.relief-text-large {
    font-size: 1.2rem;
    font-weight: bold;
    text-align: center;
    margin-top: 20px;
    line-height: 1.4;
}

.text-gold-shadow {
    font-size: 2rem;
    color: #B08D55;
    text-shadow: 2px 2px 0 #fff, -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, 1px 1px 0 #fff;
    font-weight: 900;
}

/* Page 11 Text Sizing - Adjusted to match Page 12 Match & Weight Variation */
.p11-line-1 {
    font-size: 1rem !important;
    font-weight: bold;
    /* Bold for emphasis */
    line-height: 1.6;
    display: inline-block;
    margin-bottom: 5px;
}

.p11-line-others {
    font-size: 1rem !important;
    font-weight: normal;
    /* Normal weight for contrast */
    line-height: 1.6;
}

/* Page 18 Anxiety Layout - Refined for Overlap */
.page-18 .slide-background {
    background-image: url('../images/page18_bg.jpg') !important;
    background-size: cover;
    background-position: center bottom;
}

.page-18 .slide-content {
    justify-content: flex-start;
    padding-top: 20px;
    /* Reduced padding to move "But!" up */
}

.triangle-down-bubble {
    font-size: 1.6rem;
    /* Reduced from 1.8rem */
    font-weight: 900;
    color: #333;
    margin-bottom: 10px;
    /* Reduced margin */
    position: relative;
    display: inline-block;
    padding-bottom: 10px;
    z-index: 20;
    /* Ensure on top */
}


/* V-shape underline for 'But!' */
.triangle-down-bubble::after {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 50%;
    transform: translateX(-50%) rotate(45deg);
    width: 20px;
    height: 20px;
    border-bottom: 3px solid #333;
    border-right: 3px solid #333;
}

.anxiety-grid {
    position: relative;
    width: 100%;
    height: 300px;
    /* Reduced height */
    margin-top: 10px;
}

.jagged-bubble {
    position: absolute;
    background: #333;
    /* Dark Gray for Anxiety */
    color: #fff;
    padding: 15px 10px;
    /* Reduced padding */
    font-size: 0.7rem;
    /* Reduced from 0.8rem */
    font-weight: bold;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    clip-path: polygon(20% 0%, 40% 20%, 60% 0%, 80% 20%, 100% 0%, 80% 40%, 100% 60%, 80% 80%, 100% 100%, 60% 80%, 40% 100%, 20% 80%, 0% 100%, 20% 60%, 0% 40%, 20% 20%);
    width: 110px;
    /* Reduced size */
    height: 110px;
    /* Reduced size */
    box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.3);
    line-height: 1.3;
}

/* Bubble 1: Left Top */
.jagged-bubble:nth-child(1) {
    top: 50px;
    left: 0%;
    /* Further left */
    transform: rotate(-15deg);
}

/* Bubble 2: Center Top (Highest) */
.jagged-bubble:nth-child(2) {
    top: 0px;
    /* Highest point */
    left: 50%;
    transform: translateX(-50%) rotate(5deg);
    z-index: 2;
    background: #222;
    width: 125px;
    /* Slightly larger but smaller than before */
    height: 125px;
}

/* Bubble 3: Right Top */
.jagged-bubble:nth-child(3) {
    top: 50px;
    right: 0%;
    /* Further right */
    transform: rotate(15deg);
}

.page-18 .relief-text-large {
    position: absolute;
    bottom: 90px;
    /* Adjusted bottom */
    width: 100%;
    left: 0;
    background: rgba(255, 255, 255, 0.7);
    /* More opaque for readability */
    padding: 15px 0;
    z-index: 10;
}

/* Page 23 Reservation Layout */
.page-23 .slide-content {
    justify-content: flex-start;
    padding-top: 60px;
    background: #fffbf0;
    /* Light Gold/Beige */
}

.p23-header {
    background: #B08D55;
    /* Gold */
    color: #fff;
    padding: 10px 15px;
    border-radius: 5px;
    font-size: 1rem;
    font-weight: bold;
    margin-bottom: 20px;
    display: inline-block;
    width: 90%;
    margin-left: auto;
    margin-right: auto;
}

.p23-flex-container {
    display: flex;
    justify-content: space-between;
    /* Use space between to maximize use of width */
    align-items: flex-start;
    /* Top align so bubble doesnt stretch weirdly if video is tall */
    gap: 5px;
    /* Small gap for mobile */
    width: 96%;
    margin: 0 auto;
}

.p23-video-frame {
    width: 45%;
    /* Fixed width */
    max-width: 170px;
    border: 6px solid #333;
    border-radius: 15px;
    overflow: hidden;
    background: #000;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
    align-self: center;
    /* Vertically center the phone relative to the bubble area */
}

.p23-video {
    width: 100%;
    display: block;
    height: auto;
}

/* Speech Bubble */
.p23-step-bubble {
    width: 53%;
    /* Take remaining space */
    background: #fff;
    border-radius: 10px;
    padding: 15px 5px;
    /* Narrow padding */
    position: relative;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    text-align: center;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 250px;
    /* Ensure height matches phone roughly */
}

.p23-step-bubble::after {
    content: '';
    position: absolute;
    top: 50%;
    /* Center arrow */
    left: -8px;
    transform: translateY(-50%);
    border-width: 8px 8px 8px 0;
    border-style: solid;
    border-color: transparent #fff transparent transparent;
}

.p23-step-item {
    font-size: 0.8rem;
    margin-bottom: 5px;
    color: #333;
    font-weight: bold;
    line-height: 1.3;
}

.p23-step-highlight {
    color: #d32f2f;
    font-size: 0.95rem;
}

.p23-arrow-down {
    color: #B08D55;
    /* Gold */
    font-size: 1rem;
    margin: -3px 0 3px;
}

.p23-bottom-text {
    margin-top: 20px;
    font-size: 1.1rem;
    font-weight: bold;
    color: #333;
}

.p23-bottom-text .highlight {
    color: #ff7043;
    border-bottom: 3px solid #ffcc00;
}

.p23-big-arrows {
    display: flex;
    justify-content: center;
    gap: 20px;
    font-size: 3rem;
    color: #B08D55;
    /* Gold */
    margin-top: 5px;
    line-height: 1;
}

/* Page 13 Image Flip Animation */
.page-13 .ba-item:last-child img {
    opacity: 0;
    transform: perspective(600px) rotateY(90deg);
    transition: all 0.5s;
    transform-origin: center;
}

.page-13.swiper-slide-active .ba-item:last-child img {
    animation: imageFlipIn 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
    animation-delay: 0.3s;
}

@keyframes imageFlipIn {
    0% {
        opacity: 0;
        transform: perspective(600px) rotateY(90deg);
    }

    100% {
        opacity: 1;
        transform: perspective(600px) rotateY(0deg);
    }
}

.text-sparkle-gold {
    background: linear-gradient(45deg, #B67B03 0%, #DAAF08 25%, #FEE9A0 50%, #DAAF08 75%, #B67B03 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    font-weight: bold;
    filter: drop-shadow(1px 1px 0 #fff) drop-shadow(-1px -1px 0 #fff) drop-shadow(1px -1px 0 #fff) drop-shadow(-1px 1px 0 #fff);
}

.p1-catch-small {
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
    padding: 0 !important;
}

.text-white-gold-outline {
    color: #ffffff !important;
    background: none !important;
    -webkit-text-fill-color: #ffffff !important;
    text-shadow: 2px 2px 0 #B67B03, -2px -2px 0 #B67B03, 2px -2px 0 #B67B03, -2px 2px 0 #B67B03, 0 0 10px rgba(182, 123, 3, 0.5) !important;
    font-weight: bold;
}

.text-brown-white-outline {
    color: #4E342E;
    text-shadow: 2px 2px 0 #fff, -2px -2px 0 #fff, 2px -2px 0 #fff, -2px 2px 0 #fff, 2px 0px 0 #fff, -2px 0px 0 #fff, 0px 2px 0 #fff, 0px -2px 0 #fff;
}

/* Dual DOM Layering for Gold Text */
.text-white-outline-layer {
    color: transparent;
    -webkit-text-stroke: 4px white;
    /* This creates the thick white outline behind the text */
}

.text-gold-fill-layer {
    /* Sparkly Gold Gradient: Alternating Dark Gold and Bright Highlight */
    background: linear-gradient(45deg, #B67B03 0%, #FEE9A0 20%, #B67B03 40%, #FEE9A0 60%, #B67B03 80%, #FEE9A0 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    /* No shadow on the fill itself to avoid white bleed */
}

/* Darken Page 1 Video overlay REMOVED (Reverted to original brightness) */
/* .page-1 .slide-background::after { content: ''; ... } */

/* Mekuri (Flip) Animation */
@keyframes mekuri-turn {
    0% {
        transform: rotateY(90deg);
        opacity: 0;
    }

    100% {
        transform: rotateY(0deg);
        opacity: 1;
    }
}

.mekuri-target {
    opacity: 0;
    /* Hidden initially */
    transform: rotateY(90deg);
    /* Initial state */
    transition: opacity 0.1s;
}

.mekuri-active {
    animation: mekuri-turn 1.2s ease-out forwards;
    opacity: 1;
}