@import url('https://fonts.googleapis.com/css2?family=Fredoka:wght@300..700&family=Pacifico&family=Poppins:wght@400;500;600&display=swap');

.bg-lavender-bg {
    background-color: var(--theme-lavender-bg, #F2F0FF);
}

:root {
    --theme-lavender-bg: #F2F0FF;
    --theme-lavender-bg-very-light: #F8F7FF; /* Very Light Lavender for FAQ content */
    --theme-lavender-bg-darker: #E0D8FF;
    --theme-purple-text: #5D3FD3;
    --theme-hero-start: #D946EF;
    --theme-hero-end: #8B5CF6;
    --theme-accent-pink: #EC4899;
    --theme-accent-blue: #3B82F6;
    --theme-light-bg: #F5F3FF;
    --theme-light-blue-bg: #EFF6FF;
    --theme-dark-purple: #581C87;
    --theme-button-text: #FFFFFF;
    --theme-text-dark: #333333; /* General dark text */
    --theme-text-light: #FFFFFF; /* General light text */
    --theme-header-gradient-start: #FFFDE7; /* Very pale creamy yellow for gradient */
    --theme-header-gradient-end: #FFD54F;   /* Sunny medium yellow for gradient */
    --theme-header-icon-color: #000000; /* Black for header icons */
    --theme-logo-text-color: #FFFFFF; /* White for logo text */
    --theme-accent-orange: #F97316; /* Vibrant Orange */

    /* Philosophy Section Colors */
    --theme-philosophy-yellow: #FFFBEB; /* Soft Yellow, similar to image */
    --theme-philosophy-pink: #FFF0F5;   /* Soft Pink, similar to image */
    --theme-philosophy-blue: #EBF5FF;   /* Soft Blue, similar to image */
    --theme-philosophy-card-bg: #FFFFFF;
    --theme-philosophy-button-bg: var(--theme-hero-end, #8B5CF6); /* Purple */
    --theme-philosophy-button-text: var(--theme-text-light, #FFFFFF);
    --theme-philosophy-section-bg: var(--theme-lavender-bg, #F2F0FF);
    --theme-philosophy-main-title-color: var(--theme-purple-text, #5D3FD3);
    --theme-philosophy-card-title-color: var(--theme-purple-text, #5D3FD3);
    --theme-philosophy-card-text-color: #555555; /* Darker gray for readability */
}

/*
Theme Name: JapanTrip Theme
Theme URI: https://example.com/japantrip-theme
Author: Your Name
Author URI: https://example.com
Description: A WordPress theme based on the japantrip.html page.
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: landing-page, custom-theme
Text Domain: japantriptheme
*/

/* Page Hero Section (for About, FAQ, etc.) */
.page-hero-section {
    background-color: transparent;
    color: var(--theme-text-light, #FFFFFF); /* Default to white text */
}

.page-hero-section h1,
.page-hero-section h2,
.page-hero-section p {
    color: var(--theme-text-light, #FFFFFF); /* Ensure all text within is white */
}

/* Page Container Gradient */
#page-container {
    background-image: linear-gradient(
        to bottom,
        #FFD54F 0px,
        #F97316 40px,
        #EC4899 80px,
        #8B5CF6 300px,
        #6D28D9 600px,
        #5B21B6 1000px,
        #5B21B6 100%
    );
}

/* Site Announcement Banner */
.site-announcement-banner {
    background-color: var(--theme-accent-pink);
    color: #ffffff;
    text-align: center;
    font-size: 0.875rem; /* 14px */
    line-height: 1.4;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
}

.site-announcement-banner__content p {
    margin-bottom: 0.5em; /* Space between paragraphs */
}

.site-announcement-banner__content p:last-child {
    margin-bottom: 0;
}

/* Main Header Styles */

.site-logo-link,
.site-logo-link:hover {
    text-decoration: none !important;
}

#page-container > header {
    background-image: none !important;
    background-color: transparent !important;
    color: var(--theme-text-light); /* Keep text color if needed, or adjust if it clashes */
}

#page-container > header .container {
    background-color: transparent !important; /* Ensure inner container is also transparent */
}

/* Header Logo Text */
#page-container > header .flex.items-center.gap-2 > .flex.flex-col > span {
    font-family: 'Fredoka';
    font-weight: 400;
    font-size: 0.95rem; /* Slightly larger for better Pacifico readability */
    line-height: 1.2; /* Adjust line height for two lines of Pacifico */
    /* Color will be inherited from the .font-semibold/.font-bold rule below */
}

/* Header Logo Text - ensure it uses the correct header icon color */
#page-container > header .font-semibold,
#page-container > header .font-bold {   
    color: var(--theme-logo-text-color, #FFFFFF) !important; /* White */
}

/* Header Navigation Links (excluding buttons) */
#page-container > header nav > a:not(.btn),
#page-container > header #mobile-menu nav > a:not(.btn) {
    font-family: 'Poppins', sans-serif;
    font-weight: 700; /* bold */
    color: var(--theme-text-light, #FFFFFF) !important; /* White text */
    text-decoration: none;
    transition: color 0.3s ease;
}

#page-container > header nav > a:not(.btn):hover,
#page-container > header #mobile-menu nav > a:not(.btn):hover {
    color: var(--theme-accent-pink); /* Pink accent on hover for black text */
}

/* Mobile menu specific hover for non-buttons if different background behavior is needed */
#page-container > header #mobile-menu nav > a:not(.btn):hover {
    background-color: rgba(0, 0, 0, 0.05); /* Slight dark highlight on hover */
}

/* Header 'GET FREE PROPOSAL' Button */
#page-container > header .btn.btn-white {
    background-color: var(--theme-accent-pink);
    color: var(--theme-text-light);
    border: 1px solid var(--theme-text-light);
    border-radius: 0.375rem; /* approx rounded-lg */
    padding: 0.5rem 1rem; /* Tailwind py-2 px-4 */
    font-family: 'Poppins', sans-serif;
    font-weight: 600; /* semibold */
    font-size: 1rem; /* Standard font size, adjust if needed */
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

#page-container > header .btn.btn-white:hover {
    background-color: #E05A9A; /* Slightly darker pink for hover, adjust as needed */
    color: var(--theme-text-light);
    border-color: var(--theme-text-light);
}

/* Mobile Menu Button */
#mobile-menu-button {
    background-color: var(--theme-purple-text, #5D3FD3) !important;
    /* Tailwind classes p-2 and rounded-md should still apply for padding and border-radius */
}

#mobile-menu-button:hover {
    background-color: var(--theme-dark-purple, #581C87) !important; /* Darker purple on hover */
}

/* Hero Section Background */
.hero-section-gradient {
    background: transparent !important; /* Allow main gradient to show through */
}

.hero-section-gradient h1,
.hero-section-gradient h2,
.hero-section-gradient h3,
.hero-section-gradient p {
    color: var(--theme-text-light) !important; /* Ensure text is white */
}

@media (max-width: 767px) { /* Apply styles for screens up to 767px wide (below md breakpoint) */
    .hero-section-gradient h1,
    .hero-section-gradient h2,
    .hero-section-gradient h3,
    .hero-section-gradient p {
        text-align: center !important;
    }

    .btn-hero-primary {
        display: block !important;
        margin-left: auto !important;
        margin-right: auto !important;
        /* If it takes full width, uncomment and adjust: */
        /* width: fit-content; */ 
        /* max-width: 90%; */
    }
}

.testimonials-section-transparent-bg {
    background: transparent;
}

/* 'How it Works' Section Styling */
.how-it-works-section {
    background-color: var(--theme-lavender-bg);
}

.how-it-works-section h2 {
    color: var(--theme-text-dark) !important;
}

.why-choose-us-section {
    background-color: var(--theme-lavender-bg-very-light) !important;
}

/* 'What's Included' Section Styling */
.whats-included-section {
    background-color: var(--theme-lavender-bg-darker);
}

.whats-included-section h2,
.whats-included-section h3,
.whats-included-section p {
    color: var(--theme-purple-text);
}

/* 'Is This Service Right For You?' Section */
.is-this-service-right-section {
    background-color: var(--theme-lavender-bg);
}

.is-this-service-right-section h2,
.is-this-service-right-section h3,
.is-this-service-right-section p,
.is-this-service-right-section ul li {
    color: var(--theme-purple-text);
}

/* Call to Action Section (Discover Japan's Wonders) */
.cta-discover-section {
    background-color: var(--theme-dark-purple, #581C87); /* Solid dark purple background */
    color: var(--theme-text-light, #FFFFFF); /* Ensure text is white */
}

.cta-discover-section h2,
.cta-discover-section p {
    color: var(--theme-text-light, #FFFFFF); /* Ensure text elements are white */
}

.cta-discover-section .btn-primary {
    background-color: var(--theme-text-light);
    color: var(--theme-hero-end);
    border-color: var(--theme-text-light);
}

.cta-discover-section .btn-primary:hover {
    background-color: #f0f0f0; /* Slightly off-white for hover */
    border-color: #f0f0f0;
}

.cta-discover-section .btn-outline {
    background-color: var(--theme-hero-start);
    color: var(--theme-text-light);
    border-color: var(--theme-text-light);
}

.cta-discover-section .btn-outline:hover {
    background-color: var(--theme-accent-pink-darker); /* Darker Pink for hover */
    border-color: var(--theme-text-light);
}

/* testimonials-section */
.testimonials-section-btn.btn-primary {
    background-color: var(--theme-text-light, #FFFFFF) !important; /* White background */
    color: var(--theme-purple-text, #5D3FD3) !important; /* Purple text from hero */
    border: 2px solid var(--theme-purple-text, #5D3FD3) !important; /* Purple border from hero */
    white-space: nowrap !important;
    font-size: 0.95rem !important;
    padding-top: 0.75rem !important;
    padding-bottom: 0.75rem !important;
    padding-left: 1.5rem !important;
    padding-right: 1.5rem !important;
    border-radius: 9999px !important; /* pill shape */
    font-weight: 600 !important; /* semibold */
    text-decoration: none !important; /* Remove underline */
    text-align: center !important;
}

.testimonials-section-btn.btn-primary:hover {
    background-color: #e0e0e0 !important; /* Darker off-white for better contrast */
    color: #4B2BB7 !important; /* Slightly darker purple for better contrast */
    border-color: #4B2BB7 !important; /* Matching border */
    box-shadow: 0 2px 4px rgba(0,0,0,0.1) !important; /* Subtle shadow for depth */
}

.testimonials-section-btn.btn-outline {
    background-color: var(--theme-hero-start, #D946EF) !important; /* Pinker Purple background from hero */
    color: var(--theme-text-light, #FFFFFF) !important; /* White text */
    border: 2px solid var(--theme-hero-start, #D946EF) !important; /* Matching border from hero */
    white-space: nowrap !important;
    font-size: 0.95rem !important;
    padding-top: 0.75rem !important;
    padding-bottom: 0.75rem !important;
    padding-left: 1.5rem !important;
    padding-right: 1.5rem !important;
    border-radius: 9999px !important; /* pill shape */
    font-weight: 600 !important; /* semibold */
    text-align: center !important;
    text-decoration: none !important; /* Remove underline */
}

.testimonials-section-btn.btn-outline:hover {
    background-color: #C539D5 !important; /* Darker, more saturated pink for better contrast */
    border-color: #C539D5 !important; /* Matching border */
    color: var(--theme-text-light, #FFFFFF) !important; /* Keep white text */
    box-shadow: 0 2px 4px rgba(0,0,0,0.1) !important; /* Subtle shadow for depth */
}

/* Why Choose Us Section Styles */
.why-choose-us-section {
    background-color: var(--theme-lavender-bg, #F2F0FF) !important; /* Standard lavender background */
}

.why-choose-us-section h2 {
    color: #000000 !important; /* Specifically for the 'Why choose us?' section title */
}

.why-choose-us-section h3 {
    color: #000000 !important; /* Ensure subheadings are black */
}

.why-choose-us-section p {
    color: #000000; /* black for paragraph text */
}

/* Why Choose Us Buttons - Force Side-by-Side Layout */
@media (min-width: 640px) { /* sm breakpoint */
    #why-choose-us-buttons {
        flex-direction: row !important;
    }
    
    #why-choose-us-buttons > a {
        width: auto !important;
        max-width: 300px;
    }
}

/* Mobile Menu Button Icon */
#page-container > header #mobile-menu-button svg {
    stroke: var(--theme-text-light);
}

/* Mobile Menu Background - if it's separate */
#page-container > header #mobile-menu {
    background-color: var(--theme-hero-end); /* Match header gradient or a darker variant */
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

/* Header Logo Icon */
#page-container > header .items-center.gap-2 > .w-10.h-10 {
    /* Outer part of the logo icon - should be transparent to show header gradient */
    background-image: none; /* Remove any explicit background */
    background-color: transparent;
}

#page-container > header .items-center.gap-2 > .w-10.h-10 > .w-5.h-5 {
    background-color: var(--theme-button-text); /* Inner circle is white */
}

/* Reset & Base Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

main#main-content.flex-1 {
    background-color: transparent; /* Ensure it's transparent to show parent gradient */
    /* background-image property removed */
}

body {
    font-family: 'Fredoka', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    color: #333;
    line-height: 1.5;
}

img {
    max-width: 100%;
    height: auto;
    display: block; /* Helps with alignment issues sometimes */
}

.min-h-screen {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.flex-1 {
    flex: 1;
}

/* Layout & Containers */
.mx-auto {
    margin-left: auto;
    margin-right: auto;
}

.max-w-4xl {
    max-width: 896px;
    margin-left: auto;
    margin-right: auto;
}

.max-w-6xl {
    max-width: 1152px;
    margin-left: auto;
    margin-right: auto;
}

/* Padding Utilities */
.px-4 { padding-left: 1rem; padding-right: 1rem; }
.px-6 { padding-left: 1.5rem; padding-right: 1.5rem; }
.py-2 { padding-top: 0.5rem; padding-bottom: 0.5rem; }
.py-4 { padding-top: 1rem; padding-bottom: 1rem; }
.py-6 { padding-top: 1.5rem; padding-bottom: 1.5rem; }
.py-8 { padding-top: 2rem; padding-bottom: 2rem; }
.p-3 { padding: 0.75rem; }
.p-4 { padding: 1rem; }
.p-5 { padding: 1.25rem; }
.p-6 { padding: 1.5rem; }
.pl-5 { padding-left: 1.25rem; }
.pb-10 { padding-bottom: 2.5rem; } /* Equivalent to former mb-10 */


/* Margin Utilities */
.mb-1 { margin-bottom: 0.25rem; }
.mb-2 { margin-bottom: 0.5rem; }
.mb-3 { margin-bottom: 0.75rem; }
.mb-4 { margin-bottom: 1rem; }
.mb-5 { margin-bottom: 1.25rem; }
.mb-6 { margin-bottom: 1.5rem; }
.mb-8 { margin-bottom: 2rem; }
.mb-10 { margin-bottom: 2.5rem; } /* Added from previous targeted CSS */
.mt-2 { margin-top: 0.5rem; }
.mt-4 { margin-top: 1rem; }
.mt-6 { margin-top: 1.5rem; }
.mt-10 { margin-top: 2.5rem; }
.mr-2 { margin-right: 0.5rem; }


/* Flexbox & Grid */
.flex { display: flex; }
.flex-col { flex-direction: column; }
.flex-wrap { flex-wrap: wrap; }
.items-center { align-items: center; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }

.gap-2 { gap: 0.5rem; }
.gap-3 { gap: 0.75rem; }
.gap-4 { gap: 1rem; }
.gap-6 { gap: 1.5rem; }
.gap-8 { gap: 2rem; }

.grid { display: grid; }
.grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }


/* Typography */
.text-center { text-align: center; }
.text-xs { font-size: 0.75rem; }
.text-sm { font-size: 0.875rem; }
.text-base { font-size: 1rem; }
.text-lg { font-size: 1.125rem; }
.text-xl { font-size: 1.25rem; }
.text-2xl { font-size: 1.5rem; }
.text-4xl { font-size: 2.25rem; }
.text-6xl { font-size: 3.75rem; } /* Added from previous targeted CSS */


.font-medium { font-weight: 500; }
.font-semibold { font-weight: 600; }
.font-bold { font-weight: 700; }
.italic { font-style: italic; }

/* Colors */
.bg-white { background-color: #FFFFFF; }
.bg-gray-50 { background-color: #F9FAFB; }
.bg-gray-100 { background-color: #F3F4F6; }
.bg-blue-light { background-color: #EBF3FA; }
.bg-red { background-color: #E63E31; }
.bg-blue { background-color: #2D5C9E; }
.bg-blue-dark { background-color: #1e3a8a; }

.text-black { color: #000000; }
.text-white { color: #FFFFFF; }
.text-gray-500 { color: #6B7280; }
.text-gray-600 { color: #4B5563; }
.text-gray-700 { color: #374151; }
.text-red { color: #D13B40; }
.text-blue { color: #2D5C9E; }
.text-blue-dark { color: #1e3a8a; }
.text-burgundy { color: #8B1D1D; }

.border-red { border-color: #D13B40; }

/* Utility Classes */
.rounded { border-radius: 0.25rem; }
.rounded-lg { border-radius: 0.5rem; }
.rounded-full { border-radius: 9999px; }

.shadow-sm { box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); }
.shadow-md { box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); }

.border-t { border-top-width: 1px; border-top-style: solid; border-top-color: #E5E7EB; }
.border-r { border-right-width: 1px; border-right-style: solid; border-right-color: #E5E7EB; }
.border-2 { border-width: 2px; border-style: solid; }
.border-black { border-color: #000000; }
.border-gray-300 { border-color: #D1D5DB; }

.object-contain { object-fit: contain; }
.object-cover { object-fit: cover; }

.w-4 { width: 1rem; }
.w-5 { width: 1.25rem; }
.w-6 { width: 1.5rem; }
.w-10 { width: 2.5rem; }
.w-12 { width: 3rem; }
.w-24 { width: 6rem; }
.w-48 { width: 12rem; }
.w-80 { width: 20rem; } /* For base video size */
.w-full { width: 100%; }


.h-4 { height: 1rem; }
.h-5 { height: 1.25rem; }
.h-6 { height: 1.5rem; }
.h-10 { height: 2.5rem; }
.h-12 { height: 3rem; }
.h-24 { height: 6rem; }
.h-48 { height: 12rem; }
.h-80 { height: 20rem; } /* For base video size */
.h-full { height: 100%; }


.list-disc { list-style-type: disc; }

.space-y-1 > * + * { margin-top: 0.25rem; }
.space-y-4 > * + * { margin-top: 1rem; }

.absolute { position: absolute; }
.relative { position: relative; }

.top-16 { top: 4rem; }
.left-0 { left: 0; }
.right-0 { right: 0; }
.top-1\/2 { top: 50%; }
.left-1\/2 { left: 50%; }
.z-50 { z-index: 50; }

.hidden { display: none; }

/* Background opacity classes are applied through combinations */
.bg-blue.bg-opacity-50 {
    background-color: rgba(45, 92, 158, 0.5); /* #2D5C9E with 0.5 opacity */
}

/* Base Order Utilities */
.order-1 { order: 1; }
.order-2 { order: 2; }

/* Justify Content Utilities */
.justify-end { justify-content: flex-end; }

/* Responsive Utilities for 'sm' breakpoint (typically 640px and up) */
@media (min-width: 640px) {
    .sm\:w-96 {
        width: 24rem;
    }
    .sm\:h-96 {
        height: 24rem;
    }
}

/* Responsive Utilities for 'lg' breakpoint (typically 1024px and up) */
@media (min-width: 1024px) {
    .lg\:grid-cols-2 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .lg\:order-1 {
        order: 1;
    }
    .lg\:order-2 {
        order: 2;
    }
    .lg\:justify-end {
        justify-content: flex-end;
    }
}

/* Responsive Utilities for 'md' breakpoint (typically 768px and up) */
@media (min-width: 768px) {
    .md\:w-\[20rem\] {
        width: 20rem;
    }
    .md\:h-\[20rem\] {
        height: 20rem;
    }
    .md\:-top-5 {
        top: -1.25rem;
    }
    .md\:-right-5 {
        right: -1.25rem;
    }
    .md\:w-10 {
        width: 2.5rem;
    }
    .md\:h-10 {
        height: 2.5rem;
    }
    .md\:-bottom-8 {
        bottom: -2rem;
    }
    .md\:-left-8 {
        left: -2rem;
    }
    .md\:w-16 {
        width: 4rem;
    }
    .md\:h-16 {
        height: 4rem;
    }
}

.transform-center {
    transform: translate(-50%, -50%);
}

.bg-blue.bg-opacity-50 {
    background-color: rgba(45, 92, 158, 0.5); /* #2D5C9E with 0.5 opacity */
}

/* Background opacity 90 is applied through combinations */
.bg-white.bg-opacity-90 {
     background-color: rgba(255, 255, 255, 0.9); /* white with 0.9 opacity */
}
.bg-white.bg-opacity-90 {
     background-color: rgba(255, 255, 255, 0.9); /* white with 0.9 opacity */
}

.hover\:underline:hover { text-decoration: underline; }
.hover\:bg-gray-100:hover { background-color: #F3F4F6; }
.hover\:bg-blue-100:hover { background-color: #DBEAFE; }
.hover\:bg-red-50:hover { background-color: #FEF2F2; }
/* .hover\:bg-red:hover { background-color: #B8353A; } /* Original btn-primary hover is slightly different */


/* Buttons (using a mix of original targeted styles and the more comprehensive ones) */
.btn {
    display: inline-block;
    font-family: 'Fredoka', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    font-size: 1.25rem;
    padding: 1rem 2.5rem;
    border-radius: 9999px; /* Fully rounded pill shape */
    text-decoration: none;
    text-align: center;
    transition: background 0.2s, color 0.2s, border-color 0.2s;
    cursor: pointer;
    line-height: 1;
    border: none;
    box-shadow: none;
}
.btn:focus {
    outline: 2px solid #8B5CF6;
    outline-offset: 2px;
}
.btn:hover {
    opacity: 0.92;
}

/* Add any additional custom styles here */


/* Hero Section Button Styling to match 'Discover Japan's Wonders' section */
#hero-action-buttons .btn-primary {
    background-color: var(--theme-text-light, #FFFFFF) !important; /* White background */
    color: var(--theme-purple-text, #5D3FD3) !important; /* Purple text */
    border: 2px solid var(--theme-purple-text, #5D3FD3) !important; /* Purple border to match outline style */
    padding-top: 0.75rem !important;
    padding-bottom: 0.75rem !important;
    padding-left: 1.5rem !important;
    padding-right: 1.5rem !important;
    border-radius: 9999px !important;
    font-weight: 600 !important;
}

#hero-action-buttons .btn-outline {
    background-color: var(--theme-hero-start, #D946EF) !important; /* Purple background */
    color: var(--theme-text-light, #FFFFFF) !important; /* White text */
    border: 2px solid #FFFFFF !important; /* White border */
    padding-top: 0.75rem !important;
    padding-bottom: 0.75rem !important;
    padding-left: 1.5rem !important;
    padding-right: 1.5rem !important;
    border-radius: 9999px !important;
    font-weight: 600 !important;
}

/* Hover states to slightly darken/lighten */
#hero-action-buttons .btn-primary:hover {
    background-color: #f0f0f0 !important; /* Slightly off-white */
    color: var(--theme-purple-text, #5D3FD3) !important;
}

#hero-action-buttons .btn-outline:hover {
    background-color: #7A4EDD !important; /* Slightly darker purple */
    border-color: #FFFFFF !important; /* Pure white border on hover */
    color: var(--theme-text-light, #FFFFFF) !important;
}

/* FAQ Page Content Wrapper Background */
.faq-page-content-wrapper {
    background-color: var(--theme-lavender-bg, #F2F0FF); /* Light lavender background */
    padding-top: 2.5rem; /* 40px */
    padding-bottom: 3.5rem; /* 56px - Increased for more bottom space */
}

/* Testimonials Section Lavender Background */
.testimonials-section-lavender-bg {
    background-color: var(--theme-lavender-bg-very-light, #F8F7FF);
}

.testimonials-section-lavender-bg h2 {
    color: var(--theme-purple-text, #5D3FD3);
}

.why-choose-us-section h2 {
    color: #000000 !important; /* Specifically for the 'Why choose us?' section title */
}

.testimonials-section-lavender-bg .text-center a {
    background-color: transparent !important; /* Override Tailwind bg-green-500 */
    color: var(--theme-purple-text, #5D3FD3) !important; /* Override Tailwind text-white */
    font-weight: normal; /* Override Tailwind font-semibold */
    text-decoration: underline;
    padding: 0; /* Remove button padding */
    border: none; /* Remove any potential border */
    border-radius: 0; /* Remove button border-radius */
}

.testimonials-section-lavender-bg .text-center a:hover {
    background-color: transparent !important; /* Ensure hover doesn't bring back a bg */
    color: var(--theme-purple-text, #5D3FD3); /* Keep text color, maybe slightly darker if desired */
    text-decoration: none; /* Optional: remove underline on hover */
}

.testimonial-bubble {
    background-color: var(--theme-lavender-bg-very-light, #F8F7FF);
    color: var(--theme-purple-text, #5D3FD3);
    border: 2px solid var(--theme-purple-text, #5D3FD3);
    /* The p-3 and rounded-lg classes from index.php will handle padding and border-radius */
}

/* Ensure all text within the bubble, including the icon, uses the purple color */
.testimonial-bubble p,
.testimonial-bubble .text-blue {
    color: var(--theme-purple-text, #5D3FD3) !important; /* Override Tailwind text-blue for icon */
}

/* Hero section CTA button styles */
.btn-hero-primary {
    background: #fff;
    color: var(--theme-purple-text);
    border: 2px solid var(--theme-purple-text);
    border-radius: 9999px;
    transition: background 0.2s, color 0.2s, border-color 0.2s;
    display: inline-block !important; /* Centered by parent's text-align: center */
}
.btn-hero-primary:hover {
    background: #f3f3f3;
    color: var(--theme-purple-text);
}

.btn-hero-outline {
    background: transparent;
    color: #fff;
    border: 2px solid #fff;
}
.btn-hero-outline:hover {
    background: rgba(255,255,255,0.12);
    color: #fff;
    border-color: #fff;
}

/* For spacing between hero buttons */
.hero-btn-group {
    display: flex;
    justify-content: center; /* Center buttons horizontally */
    gap: 1rem; /* Space between buttons, works for row and column */
    /* flex-direction will be handled by Tailwind: flex-col md:flex-row */
}

.btn-primary {
    background-color: #E63E31; /* Original targeted style */
    color: white;
    border: none; /* From comprehensive */
}
.btn-primary:hover {
    background-color: #c43429; /* Original targeted style hover */
}

.btn-outline {
    border: 2px solid #333; /* Original targeted style */
    color: #333; /* Original targeted style */
    background-color: transparent;
}
.btn-outline:hover {
    background-color: #333; /* Original targeted style hover */
    color: white; /* Original targeted style hover */
}

.btn-white {
    background-color: white;
    color: #2D5C9E; /* text-blue from original targeted style */
    border: 2px solid #2D5C9E; /* Original targeted style, using text-blue color */
}
.btn-white:hover {
    background-color: #f0f0f0; /* Original targeted style hover */
    border-color: #1e3a8a; /* Darker blue for border on hover from original targeted style */
}


/* Background Images (from comprehensive list, adjust paths as needed) */
.bg-cover { background-size: cover; }
.bg-center { background-position: center; }

.bg-testimonials {
    background-image: url('images/mt-fuji-landscape.jpg');
    background-blend-mode: overlay;
    background-color: rgba(45, 92, 158, 0.7); 
}

.bg-discover {
   background-image: url('images/japanese-sushi.jpg');
    background-position: center;
}

/* Media Queries */
@media (min-width: 768px) { /* md breakpoint (tablets and larger) */
    .md\:flex { display: flex; }
    .md\:hidden { display: none; }
    .md\:block { display: block; }

    .md\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

    .md\:gap-6 { gap: 1.5rem; }

    .md\:py-8 { padding-top: 2rem; padding-bottom: 2rem; }
    .md\:px-6 { padding-left: 1.5rem; padding-right: 1.5rem; }
    .md\:p-6 { padding: 1.5rem; }


    .md\:text-lg { font-size: 1.125rem; }
    .md\:text-xl { font-size: 1.25rem; }
    .md\:text-2xl { font-size: 1.5rem; }
    .md\:text-4xl { font-size: 2.25rem; }
    .md\:text-6xl { font-size: 3.75rem; }

    .md\:mb-8 { margin-bottom: 2rem; }
}

/* Founder's Story Section Styles */

/* New Our Philosophy Section Styles */
.philosophy-section {
    background-color: var(--theme-philosophy-section-bg, #F2F0FF);
    /* The py-12 class in HTML provides 3rem top/bottom padding. 
       We can override or add to the bottom padding here if more space is needed below the cards 
       but before the next section, and we want that space to be lavender. */
    padding-bottom: 6rem; /* Increase bottom padding to 96px, adjust as needed */
}

.philosophy-main-title {
    color: var(--theme-philosophy-main-title-color, #5D3FD3);
}

.philosophy-card {
    background-color: var(--theme-philosophy-card-bg, #FFFFFF);
    border-radius: 1rem; /* 16px */
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    overflow: hidden; /* Ensures the image area corners are also rounded */
    display: flex;
    flex-direction: column;
}

.philosophy-card-image-area {
    height: 10rem; /* 160px */
    display: flex;
    align-items: center;
    justify-content: center;
    border-top-left-radius: 1rem;
    border-top-right-radius: 1rem;
}

.bg-philosophy-yellow {
    background-color: var(--theme-philosophy-yellow, #FFFBEB);
}

.bg-philosophy-pink {
    background-color: var(--theme-philosophy-pink, #FFF0F5);
}

.bg-philosophy-blue {
    background-color: var(--theme-philosophy-blue, #EBF5FF);
}

.philosophy-icon {
    font-size: 3rem; /* 48px, adjust as needed */
    line-height: 1;
}

.philosophy-card-title {
    color: var(--theme-philosophy-card-title-color, #5D3FD3);
    font-weight: 600; /* semibold */
}

.philosophy-card-description {
    color: var(--theme-philosophy-card-text-color, #555555);
    min-height: 4.5em; /* Adjust to ensure cards have similar text block height, approx 3 lines */
    font-size: 0.875rem; /* 14px */
}

.btn-philosophy-explore {
    background-color: var(--theme-philosophy-button-bg, #8B5CF6);
    color: var(--theme-philosophy-button-text, #FFFFFF);
    padding: 0.75rem 1.5rem; /* 12px 24px */
    border-radius: 9999px; /* pill shape */
    text-transform: uppercase;
    font-weight: 600; /* semibold */
    font-size: 0.875rem; /* 14px */
    letter-spacing: 0.05em;
    transition: background-color 0.3s ease;
    display: inline-block; /* To allow padding and centering if needed */
}

.btn-philosophy-explore:hover {
    background-color: var(--theme-purple-text, #5D3FD3); /* Darker purple on hover */
}

/* End New Our Philosophy Section Styles */

/* Founder's Story Section Styles */
.founder-story-section {
    background-color: var(--theme-lavender-bg, #F2F0FF);
    /* Add padding to the section if the title needs space from the card with the new bg */
    /* padding-top: 2rem; /* Example: Adjust as needed */
    /* padding-bottom: 2rem; /* Example: Adjust as needed */
}

.founder-mission-section {
    background-color: var(--theme-lavender-bg-darker);
    /* Add padding to the section if the title needs space from the card with the new bg */
    /* padding-top: 2rem; /* Example: Adjust as needed */
    /* padding-bottom: 2rem; /* Example: Adjust as needed */
}

/* Add underlines to section titles */
.mission-section .section-title,
.founder-story-section .section-title {
    color: var(--theme-purple-text, #5D3FD3);
    text-align: center;
    font-size: 2rem; /* approx text-3xl */
    font-weight: bold;
    position: relative;
    padding-bottom: 0.75rem;
    margin-bottom: 1.5rem;
}

.mission-section .section-title::after,
.founder-story-section .section-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 80px;
    height: 8px;
    background-color: var(--theme-purple-text, #5D3FD3);
}


.founder-story-card {
    background-color: transparent;
    border-radius: 0.5rem; /* rounded-lg */
    padding: 1.5rem; /* p-6 */
    max-width: 900px;
    margin: 0 auto;
}

.founder-story-card .content-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center; /* Center items when stacked */
    gap: 2rem; /* increased gap */
}

@media (min-width: 768px) { /* md breakpoint */
    .founder-story-card {
        padding: 2rem; /* md:p-8 */
    }
    .founder-story-card .content-wrapper {
        flex-direction: row;
        align-items: flex-start; /* Align to top when horizontal */
    }
}

.founder-story-card .founder-image-container {
    flex-shrink: 0;
}

.founder-story-card .founder-image {
    width: 10rem; /* increased from 8rem */
    height: 10rem; /* increased from 8rem */
    border-radius: 50%;
    border: 4px solid var(--theme-purple-text, #5D3FD3); /* Changed to purple to match theme */
    object-fit: cover;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

@media (min-width: 768px) { /* md breakpoint */
    .founder-story-card .founder-image {
        width: 10rem; /* w-40 */
        height: 10rem; /* h-40 */
    }
}

.founder-story-card .founder-text-content {
    text-align: center; /* Center text when stacked */
}

@media (min-width: 768px) { /* md breakpoint */
    .founder-story-card .founder-text-content {
        text-align: left; /* Align text left when horizontal */
    }
}

.founder-story-card .founder-name {
    font-size: 1.5rem; /* text-2xl */
    font-weight: bold;
    color: var(--theme-purple-text, #5D3FD3);
    margin-bottom: 0.25rem;
}

.founder-story-card .founder-title {
    font-size: 1.125rem; /* text-lg */
    color: var(--theme-purple-text, #5D3FD3); /* Changed to purple to match theme */
    margin-bottom: 1.5rem;
}

.founder-story-card .founder-bio {
    text-align: center; /* Center on mobile */
    color: var(--theme-purple-text, #5D3FD3); /* Purple text */
}

@media (min-width: 768px) { /* md breakpoint (tablet and above) */
    .founder-story-card .founder-bio {
        text-align: left; /* Left-aligned on larger screens */
    }
}

/* Override for Mission section - always centered */
.mission-section .founder-bio {
    text-align: center !important;
}

/* Simple card borders */
.founder-story-card {
    border: 2px solid var(--theme-purple-text, #5D3FD3);
    border-radius: 0.5rem;
    padding: 1.5rem;
    margin-bottom: 2rem;
    background-color: white;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
}

.founder-story-card .founder-bio p {
    font-size: 0.875rem; /* text-sm */
    color: var(--theme-purple-text, #5D3FD3); /* Purple text */
    line-height: 1.6;
    margin-bottom: 0.75rem;
}
.founder-story-card .founder-bio p:last-child {
    margin-bottom: 0;
}

/* FAQ Styles */
.faq-section {
    margin-bottom: 0rem; 
    padding-top: 2.5rem; /* Added to create space above the title */
}

.faq-section-title {
    font-size: 1.25rem;
    font-weight: 600;
    color: #333;
    margin-top: 0; /* Space now handled by parent's padding-top */
    margin-bottom: 2.5rem; /* Increased for more space below title */
    padding-left: 1rem;
    border-left: 3px solid #E53E3E;
}

.faq-item {
    background: white;
    border-radius: 0.5rem;
    margin-bottom: 1rem;
    /* overflow: hidden; */ /* Temporarily removed to test if it affects height/spacing */
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}

.faq-question {
    padding: 1rem 2.5rem 1rem 1rem;
    font-weight: 500;
    color: #2D3748;
    cursor: pointer;
    position: relative;
    transition: all 0.3s ease;
}

.faq-question:hover {
    color: #E53E3E;
}

.faq-question::after {
    content: '';
    position: absolute;
    right: 1rem;
    top: 50%;
    transform: translateY(-50%);
    width: 1rem;
    height: 1rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%232D3748'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    transition: transform 0.3s ease;
}

.faq-item.active .faq-question::after {
    transform: translateY(-50%) rotate(180deg);
}

.faq-answer {
    padding: 0 1rem;
    max-height: 0;
    overflow: hidden;
    color: #4A5568;
    transition: all 0.3s ease;
}

.faq-item.active .faq-answer {
    padding: 0 1rem 1rem 1rem;
    max-height: 500px;
}

/* Legal Pages Styles */
.legal-page-content {
    margin-bottom: 4rem;
    padding-bottom: 2rem;
}

.legal-content h3 {
    color: #2B6CB0;
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid #E2E8F0;
}

.legal-content p {
    color: #4A5568;
    line-height: 1.7;
    margin-bottom: 1rem;
}

.list-container {
    padding-left: 1rem;
    margin-bottom: 1.5rem;
}

.legal-content ul {
    list-style-type: disc;
    padding-left: 1.5rem;
    color: #4A5568;
}

.legal-content ul li {
    margin-bottom: 0.75rem;
    line-height: 1.5;
    padding-left: 0.5rem;
}

.legal-content ul li:last-child {
    margin-bottom: 0;
}

.legal-content a {
    color: #2B6CB0;
    text-decoration: none;
    transition: all 0.2s ease;
}

.legal-content a:hover {
    text-decoration: underline;
}

/* Footer Links */
.site-footer a {
    color: #4A5568;
    text-decoration: none;
    transition: all 0.2s ease;
}

.site-footer a:hover {
    text-decoration: underline;
}

.site-footer .flex a {
    margin-right: 1rem;
    border-right: 1px solid #E2E8F0;
    padding-right: 1rem;
}

.site-footer .flex a:last-child {
    margin-right: 0;
    border-right: none;
    padding-right: 0;
}

.legal-notice {
    background-color: #F7FAFC;
    border-radius: 0.5rem;
    padding: 1rem;
    margin-bottom: 1.5rem;
    border-left: 4px solid #2B6CB0;
}

.legal-notice p {
    margin-bottom: 0;
    font-size: 0.875rem;
    color: #4A5568;
    line-height: 1.5;
}

@media (min-width: 640px) { /* sm breakpoint (large mobiles and up) */
    .sm\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* --- Team Page: Alternating Rows Layout --- */
.team-page-section { background-color: var(--theme-lavender-bg, #F2F0FF); padding: 3rem 1rem 4rem; }
.team-page-inner { max-width: 896px; margin: 0 auto; }
.team-page-title {
    color: var(--theme-purple-text, #5D3FD3); font-size: 2rem; font-weight: 700;
    text-align: center; position: relative; padding-bottom: 0.75rem; margin-bottom: 1rem;
}
.team-page-title::after {
    content: ''; position: absolute; bottom: 0; left: 50%;
    transform: translateX(-50%); width: 80px; height: 8px; background: var(--theme-purple-text, #5D3FD3);
}
.team-page-intro {
    text-align: center; font-family: 'Poppins', sans-serif; font-weight: 600;
    color: #4B5563; margin-bottom: 2.5rem; max-width: 700px; margin-left: auto; margin-right: auto;
}

.alt-rows {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.alt-row {
    background: #fff;
    border-radius: 1rem;
    overflow: hidden;
    display: flex;
    transition: transform 0.3s, box-shadow 0.3s;
}
.alt-row:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(93, 63, 211, 0.18);
}

.alt-row:nth-child(even) {
    flex-direction: row-reverse;
}

.alt-row-img-area {
    flex-shrink: 0;
    width: 220px;
    min-width: 220px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
}

/* Cycle through 3 pastel colors */
.alt-row:nth-child(3n+1) .alt-row-img-area { background-color: var(--theme-lavender-bg-darker, #E0D8FF); }
.alt-row:nth-child(3n+2) .alt-row-img-area { background-color: var(--theme-philosophy-pink, #FFF0F5); }
.alt-row:nth-child(3n+3) .alt-row-img-area { background-color: var(--theme-philosophy-blue, #EBF5FF); }

.alt-row-img-area img {
    width: 160px; height: 160px;
    border-radius: 50%;
    border: 4px solid var(--theme-purple-text, #5D3FD3);
    object-fit: cover;
    box-shadow: 0 4px 8px rgba(0,0,0,0.15);
}

/* Scale down Ayu's illustration to match photo portrait sizes */
.alt-row:nth-child(7) .alt-row-img-area img {
    transform: scale(0.85);
}

.alt-row-body {
    flex: 1;
    padding: 1.5rem 2rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.alt-row-name {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--theme-purple-text, #5D3FD3);
    margin-bottom: 0.25rem;
}

.alt-row-role {
    font-family: 'Poppins', sans-serif;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--theme-hero-start, #D946EF);
    margin-bottom: 0.75rem;
}

.alt-row-bio {
    font-family: 'Poppins', sans-serif;
    font-size: 0.8rem;
    color: var(--theme-purple-text, #5D3FD3);
    line-height: 1.6;
}

@media (max-width: 768px) {
    .alt-row,
    .alt-row:nth-child(even) {
        flex-direction: column;
        text-align: center;
    }
    .alt-row:hover {
        transform: none;
    }
    .alt-row-img-area {
        width: 100%;
        min-width: auto;
        padding: 1.5rem 0;
    }
    .alt-row-img-area img {
        width: 140px;
        height: 140px;
    }
    .alt-row-body {
        padding: 1.25rem 1.5rem 1.5rem;
    }
    .alt-row-name {
        font-size: 1.15rem;
    }
    .alt-row-bio {
        font-size: 0.78rem;
    }
    .team-page-title {
        font-size: 1.6rem;
    }
    .team-page-intro {
        font-size: 0.85rem;
    }
}
@media (max-width: 480px) {
    .team-page-section {
        padding: 2rem 0.75rem 3rem;
    }
    .alt-row-img-area {
        padding: 1.25rem 0;
    }
    .alt-row-img-area img {
        width: 120px;
        height: 120px;
        border-width: 3px;
    }
    .alt-row-body {
        padding: 1rem 1rem 1.25rem;
    }
    .alt-row-name {
        font-size: 1.05rem;
    }
    .alt-row-role {
        font-size: 0.78rem;
    }
    .alt-row-bio {
        font-size: 0.75rem;
        line-height: 1.5;
    }
}

/* ========================================
   TRIP EXAMPLE PAGE STYLES (Shared across all mockups)
   ======================================== */

/* --- Shared Section Title --- */
.trip-ex-section-title {
    color: var(--theme-purple-text, #5D3FD3);
    font-size: 1.75rem;
    font-weight: 700;
    text-align: center;
    position: relative;
    padding-bottom: 0.75rem;
    margin-bottom: 2rem;
}
.trip-ex-section-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 6px;
    background: var(--theme-purple-text, #5D3FD3);
    border-radius: 3px;
}

/* --- Quote Styles --- */
.trip-ex-quote {
    background: white;
    border-left: 4px solid var(--theme-hero-start, #D946EF);
    border-radius: 0.5rem;
    padding: 1.25rem 1.5rem;
    margin: 1.5rem auto;
    max-width: 640px;
}
.trip-ex-quote p {
    color: var(--theme-purple-text, #5D3FD3);
    font-style: italic;
    font-size: 0.9rem;
    line-height: 1.7;
    margin: 0;
}
.trip-ex-quote--large {
    border-left-width: 5px;
}
.trip-ex-quote--large p {
    font-size: 1rem;
}

/* --- Route Visual --- */
.trip-ex-route-visual {
    background: white;
    border-radius: 1rem;
    padding: 1.25rem 1.5rem;
    border: 2px solid var(--theme-purple-text, #5D3FD3);
}
.trip-ex-route-stops {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}
.trip-ex-route-stop {
    background: var(--theme-lavender-bg, #F2F0FF);
    color: var(--theme-purple-text, #5D3FD3);
    font-weight: 600;
    font-size: 0.8rem;
    padding: 0.4rem 0.8rem;
    border-radius: 9999px;
    white-space: nowrap;
}
.trip-ex-route-arrow {
    color: var(--theme-hero-start, #D946EF);
    font-weight: 700;
    font-size: 1.1rem;
}

/* --- For You Grid --- */
.trip-ex-for-you-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}
@media (min-width: 768px) {
    .trip-ex-for-you-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}
.trip-ex-for-you-card {
    background: white;
    border-radius: 0.75rem;
    padding: 1.25rem;
    border: 1px solid var(--theme-lavender-bg-darker, #E0D8FF);
}

/* --- Combine Box --- */
.trip-ex-combine-box {
    background: white;
    border-radius: 0.75rem;
    padding: 1.25rem;
    border: 2px dashed var(--theme-hero-start, #D946EF);
}

/* --- Steps --- */
.trip-ex-steps {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    max-width: 560px;
    margin: 0 auto;
}
.trip-ex-step {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    background: white;
    border-radius: 0.75rem;
    padding: 1rem 1.25rem;
}
.trip-ex-step-number {
    flex-shrink: 0;
    width: 2rem;
    height: 2rem;
    background: var(--theme-purple-text, #5D3FD3);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.875rem;
}

/* --- Highlight Grid --- */
.trip-ex-highlights-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    max-width: 600px;
    margin: 0 auto;
}
@media (max-width: 480px) {
    .trip-ex-highlights-grid {
        grid-template-columns: 1fr;
    }
}
.trip-ex-highlight-item {
    background: white;
    border-radius: 0.75rem;
    padding: 1rem;
    text-align: center;
    border: 1px solid var(--theme-lavender-bg-darker, #E0D8FF);
}
.trip-ex-highlight-icon {
    font-size: 1.5rem;
    display: block;
    margin-bottom: 0.5rem;
}
.trip-ex-highlight-item p {
    font-size: 0.8rem;
    color: #555;
    margin: 0;
}


/* ========================================
   V1 - STORY FLOW SPECIFIC STYLES
   ======================================== */

/* Profile Card */
.trip-ex-profile-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
    background: white;
    border-radius: 1rem;
    padding: 2rem;
    border: 2px solid var(--theme-purple-text, #5D3FD3);
    margin-bottom: 1.5rem;
}
@media (min-width: 768px) {
    .trip-ex-profile-card {
        flex-direction: row;
        align-items: flex-start;
    }
}
.trip-ex-profile-card__image img {
    width: 140px;
    height: 140px;
    border-radius: 50%;
    object-fit: cover;
    border: 4px solid var(--theme-purple-text, #5D3FD3);
}
.trip-ex-profile-card__info {
    text-align: center;
}
@media (min-width: 768px) {
    .trip-ex-profile-card__info {
        text-align: left;
    }
}

/* Tags */
.trip-ex-profile-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1rem;
    justify-content: center;
}
@media (min-width: 768px) {
    .trip-ex-profile-tags {
        justify-content: flex-start;
    }
}
.trip-ex-tag {
    background: var(--theme-lavender-bg, #F2F0FF);
    color: var(--theme-purple-text, #5D3FD3);
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.25rem 0.75rem;
    border-radius: 9999px;
}

/* Detail rows */
.trip-ex-profile-details {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}
.trip-ex-detail-row {
    font-size: 0.8rem;
    color: #555;
}
.trip-ex-detail-label {
    font-weight: 600;
    color: var(--theme-purple-text, #5D3FD3);
    margin-right: 0.25rem;
}

/* Checklist */
.trip-ex-checklist {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    max-width: 560px;
    margin: 0 auto 1.5rem;
}
.trip-ex-checklist-item {
    background: white;
    padding: 0.75rem 1rem;
    border-radius: 0.5rem;
    font-size: 0.85rem;
    color: #555;
    padding-left: 2rem;
    position: relative;
}
.trip-ex-checklist-item::before {
    content: '\2713';
    position: absolute;
    left: 0.75rem;
    color: var(--theme-hero-start, #D946EF);
    font-weight: 700;
}

/* Delivery Timeline */
.trip-ex-delivery-timeline {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    max-width: 500px;
    margin: 0 auto 2rem;
}
.trip-ex-delivery-step {
    display: flex;
    align-items: baseline;
    gap: 1rem;
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--theme-lavender-bg-darker, #E0D8FF);
}
.trip-ex-delivery-step--highlight {
    border-bottom-color: var(--theme-hero-start, #D946EF);
}
.trip-ex-delivery-time {
    font-weight: 700;
    font-size: 0.75rem;
    color: var(--theme-purple-text, #5D3FD3);
    min-width: 100px;
    flex-shrink: 0;
}
.trip-ex-delivery-step--highlight .trip-ex-delivery-time {
    color: var(--theme-hero-start, #D946EF);
}
.trip-ex-delivery-desc {
    font-size: 0.8rem;
    color: #555;
}

/* Brochure Contents */
.trip-ex-brochure-contents {
    background: white;
    border-radius: 0.75rem;
    padding: 1.25rem 1.5rem;
    max-width: 500px;
    margin: 0 auto;
}
.trip-ex-brochure-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}
.trip-ex-brochure-list li {
    font-size: 0.8rem;
    color: #555;
    padding-left: 1.25rem;
    position: relative;
}
.trip-ex-brochure-list li::before {
    content: '\25CF';
    position: absolute;
    left: 0;
    color: var(--theme-hero-start, #D946EF);
    font-size: 0.5rem;
    top: 0.3rem;
}

/* Day Cards */
.trip-ex-day-card {
    background: white;
    border-radius: 1rem;
    margin-bottom: 1.25rem;
    overflow: hidden;
}
.trip-ex-day-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.5rem;
    background: var(--theme-lavender-bg, #F2F0FF);
    border-bottom: 2px solid var(--theme-lavender-bg-darker, #E0D8FF);
}
.trip-ex-day-number {
    flex-shrink: 0;
    background: var(--theme-purple-text, #5D3FD3);
    color: white;
    font-weight: 700;
    font-size: 0.75rem;
    padding: 0.3rem 0.75rem;
    border-radius: 9999px;
    white-space: nowrap;
}
.trip-ex-day-title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--theme-purple-text, #5D3FD3);
    margin: 0;
}
.trip-ex-day-subtitle {
    font-size: 0.8rem;
    color: var(--theme-hero-start, #D946EF);
    margin: 0;
    font-weight: 500;
}
.trip-ex-day-body {
    padding: 1rem 1.5rem;
}
.trip-ex-day-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.trip-ex-day-list li {
    font-size: 0.8rem;
    color: #555;
    padding: 0.35rem 0 0.35rem 1.25rem;
    position: relative;
    line-height: 1.5;
}
.trip-ex-day-list li::before {
    content: '\25CF';
    position: absolute;
    left: 0;
    color: var(--theme-hero-start, #D946EF);
    font-size: 0.4rem;
    top: 0.65rem;
}
.trip-ex-day-quote {
    background: var(--theme-lavender-bg, #F2F0FF);
    border-left: 3px solid var(--theme-hero-start, #D946EF);
    border-radius: 0.375rem;
    padding: 0.75rem 1rem;
    margin-top: 0.75rem;
    font-style: italic;
    font-size: 0.8rem;
    color: var(--theme-purple-text, #5D3FD3);
    line-height: 1.6;
}


/* ========================================
   V2 - CARD GRID SPECIFIC STYLES
   ======================================== */

/* Profile Strip */
.trip-ex-v2-profile-strip {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem;
    padding: 1.5rem 0;
}
.trip-ex-v2-profile-avatar {
    flex-shrink: 0;
}
.trip-ex-v2-avatar-circle {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--theme-purple-text, #5D3FD3);
    color: white;
    font-weight: 700;
    font-size: 1.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
}
.trip-ex-v2-profile-text {
    flex: 1;
    min-width: 200px;
}
.trip-ex-v2-profile-budget {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}
.trip-ex-v2-budget-amount {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--theme-purple-text, #5D3FD3);
}
.trip-ex-v2-budget-label {
    font-size: 0.7rem;
    color: var(--theme-hero-start, #D946EF);
    font-weight: 600;
}

/* Info Grid */
.trip-ex-v2-info-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}
@media (min-width: 768px) {
    .trip-ex-v2-info-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}
.trip-ex-v2-info-card {
    background: white;
    border-radius: 0.75rem;
    padding: 1.25rem;
    text-align: center;
    border: 1px solid var(--theme-lavender-bg-darker, #E0D8FF);
}
.trip-ex-v2-info-icon {
    font-size: 1.5rem;
    margin-bottom: 0.5rem;
}

/* Questionnaire Card */
.trip-ex-v2-questionnaire-card {
    background: white;
    border-radius: 0.75rem;
    padding: 1.5rem;
    border: 1px solid var(--theme-lavender-bg, #F2F0FF);
}
.trip-ex-v2-pill-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}
.trip-ex-v2-pill {
    background: var(--theme-lavender-bg, #F2F0FF);
    color: var(--theme-purple-text, #5D3FD3);
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.35rem 0.85rem;
    border-radius: 9999px;
}

/* Delivery Cards */
.trip-ex-v2-delivery-cards {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
}
@media (min-width: 768px) {
    .trip-ex-v2-delivery-cards {
        grid-template-columns: repeat(3, 1fr);
    }
}
.trip-ex-v2-delivery-card {
    background: white;
    border-radius: 0.75rem;
    padding: 1rem;
    text-align: center;
    border: 1px solid var(--theme-lavender-bg-darker, #E0D8FF);
}
.trip-ex-v2-delivery-card--accent {
    border-color: var(--theme-hero-start, #D946EF);
    background: #FFF0F5;
}
.trip-ex-v2-dc-time {
    font-weight: 700;
    font-size: 1.1rem;
    color: var(--theme-purple-text, #5D3FD3);
    margin-bottom: 0.25rem;
}
.trip-ex-v2-delivery-card--accent .trip-ex-v2-dc-time {
    color: var(--theme-hero-start, #D946EF);
}
.trip-ex-v2-delivery-card p {
    color: #555;
    margin: 0;
}

/* Day Grid */
.trip-ex-v2-day-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}
@media (min-width: 768px) {
    .trip-ex-v2-day-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}
.trip-ex-v2-day-card {
    background: white;
    border-radius: 0.75rem;
    padding: 1.25rem;
    border: 1px solid var(--theme-lavender-bg-darker, #E0D8FF);
    display: flex;
    flex-direction: column;
}
.trip-ex-v2-day-card--featured {
    border-color: var(--theme-hero-start, #D946EF);
    border-width: 2px;
}
@media (min-width: 768px) {
    .trip-ex-v2-day-card--featured {
        grid-column: span 2;
    }
}
.trip-ex-v2-day-badge {
    display: inline-block;
    background: var(--theme-purple-text, #5D3FD3);
    color: white;
    font-weight: 700;
    font-size: 0.65rem;
    padding: 0.2rem 0.6rem;
    border-radius: 9999px;
    margin-bottom: 0.5rem;
    width: fit-content;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.trip-ex-v2-day-title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--theme-purple-text, #5D3FD3);
    margin: 0 0 0.15rem;
}
.trip-ex-v2-day-tagline {
    font-size: 0.75rem;
    color: var(--theme-hero-start, #D946EF);
    font-weight: 500;
    margin: 0 0 0.75rem;
}
.trip-ex-v2-day-bullets {
    list-style: none;
    padding: 0;
    margin: 0;
    flex: 1;
}
.trip-ex-v2-day-bullets li {
    font-size: 0.8rem;
    color: #555;
    padding: 0.2rem 0 0.2rem 1rem;
    position: relative;
    line-height: 1.5;
}
.trip-ex-v2-day-bullets li::before {
    content: '\25CF';
    position: absolute;
    left: 0;
    color: var(--theme-hero-start, #D946EF);
    font-size: 0.35rem;
    top: 0.55rem;
}
.trip-ex-v2-day-mini-quote {
    margin-top: 0.75rem;
    font-style: italic;
    font-size: 0.8rem;
    color: var(--theme-purple-text, #5D3FD3);
    border-top: 1px solid var(--theme-lavender-bg-darker, #E0D8FF);
    padding-top: 0.75rem;
}

/* Feedback Pills */
.trip-ex-v2-feedback-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: center;
    margin-top: 1.5rem;
}
.trip-ex-v2-feedback-pill {
    background: white;
    color: var(--theme-purple-text, #5D3FD3);
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.4rem 0.85rem;
    border-radius: 9999px;
    border: 1px solid var(--theme-lavender-bg-darker, #E0D8FF);
}

/* CTA Steps */
.trip-ex-v2-cta-steps {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.75rem;
}
@media (min-width: 768px) {
    .trip-ex-v2-cta-steps {
        grid-template-columns: repeat(4, 1fr);
    }
}
.trip-ex-v2-cta-step {
    background: white;
    border-radius: 0.75rem;
    padding: 1.25rem;
    text-align: center;
}
.trip-ex-v2-cta-step-num {
    width: 2rem;
    height: 2rem;
    background: var(--theme-purple-text, #5D3FD3);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.875rem;
    margin: 0 auto 0.5rem;
}


/* ========================================
   V3 - VERTICAL TIMELINE SPECIFIC STYLES
   ======================================== */

/* Profile Bar */
.trip-ex-v3-profile-bar {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.75rem;
    align-items: center;
}
.trip-ex-v3-profile-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0 0.75rem;
}
.trip-ex-v3-profile-label {
    font-size: 0.6rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--theme-hero-start, #D946EF);
    font-weight: 600;
}
.trip-ex-v3-profile-value {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--theme-purple-text, #5D3FD3);
}
.trip-ex-v3-profile-divider {
    width: 1px;
    height: 28px;
    background: var(--theme-purple-text, #5D3FD3);
    opacity: 0.3;
}
@media (max-width: 480px) {
    .trip-ex-v3-profile-divider {
        display: none;
    }
    .trip-ex-v3-profile-bar {
        gap: 0.5rem;
    }
}

/* Countdown */
.trip-ex-v3-countdown {
    max-width: 480px;
    margin: 0 auto;
    position: relative;
    padding-left: 2rem;
}
.trip-ex-v3-countdown::before {
    content: '';
    position: absolute;
    left: 0.55rem;
    top: 0.5rem;
    bottom: 0.5rem;
    width: 2px;
    background: var(--theme-lavender-bg-darker, #E0D8FF);
}
.trip-ex-v3-countdown-item {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    margin-bottom: 1rem;
    position: relative;
}
.trip-ex-v3-cd-dot {
    flex-shrink: 0;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--theme-purple-text, #5D3FD3);
    margin-top: 0.2rem;
    position: relative;
    z-index: 1;
    margin-left: -1.7rem;
}
.trip-ex-v3-cd-dot--accent {
    background: var(--theme-hero-start, #D946EF);
    width: 14px;
    height: 14px;
    margin-left: calc(-1.7rem - 1px);
}
.trip-ex-v3-cd-content {
    display: flex;
    flex-direction: column;
}
.trip-ex-v3-cd-time {
    font-weight: 700;
    font-size: 0.8rem;
    color: var(--theme-purple-text, #5D3FD3);
}
.trip-ex-v3-countdown-item--accent .trip-ex-v3-cd-time {
    color: var(--theme-hero-start, #D946EF);
}
.trip-ex-v3-cd-desc {
    font-size: 0.8rem;
    color: #555;
}

/* Vertical Timeline */
.trip-ex-v3-timeline {
    position: relative;
    padding-left: 3rem;
}
.trip-ex-v3-timeline::before {
    content: '';
    position: absolute;
    left: 1.1rem;
    top: 0;
    bottom: 0;
    width: 3px;
    background: var(--theme-lavender-bg, #F2F0FF);
    border-radius: 2px;
}
.trip-ex-v3-tl-item {
    position: relative;
    margin-bottom: 1.5rem;
}
.trip-ex-v3-tl-item--highlight .trip-ex-v3-tl-card {
    border-color: var(--theme-hero-start, #D946EF);
    border-width: 2px;
}
.trip-ex-v3-tl-marker {
    position: absolute;
    left: -3rem;
    top: 0.75rem;
    width: 2.2rem;
    height: 2.2rem;
    border-radius: 50%;
    background: var(--theme-purple-text, #5D3FD3);
    color: white;
    font-weight: 700;
    font-size: 0.8rem;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
    border: 3px solid var(--theme-lavender-bg-darker, #E0D8FF);
}
.trip-ex-v3-tl-item--highlight .trip-ex-v3-tl-marker {
    background: var(--theme-hero-start, #D946EF);
}
.trip-ex-v3-tl-card {
    background: white;
    border-radius: 0.75rem;
    padding: 1.25rem;
    border: 1px solid var(--theme-lavender-bg-darker, #E0D8FF);
}
.trip-ex-v3-tl-title {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--theme-purple-text, #5D3FD3);
    margin: 0 0 0.75rem;
}
.trip-ex-v3-tl-sep {
    color: var(--theme-hero-start, #D946EF);
    font-weight: 400;
    margin: 0 0.25rem;
}
.trip-ex-v3-tl-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.trip-ex-v3-tl-list li {
    font-size: 0.8rem;
    color: #555;
    padding: 0.25rem 0 0.25rem 1rem;
    position: relative;
    line-height: 1.5;
}
.trip-ex-v3-tl-list li::before {
    content: '\25CF';
    position: absolute;
    left: 0;
    color: var(--theme-hero-start, #D946EF);
    font-size: 0.35rem;
    top: 0.55rem;
}
.trip-ex-v3-tl-quote {
    background: var(--theme-lavender-bg, #F2F0FF);
    border-left: 3px solid var(--theme-hero-start, #D946EF);
    border-radius: 0.375rem;
    padding: 0.75rem 1rem;
    margin-top: 0.75rem;
    font-style: italic;
    font-size: 0.8rem;
    color: var(--theme-purple-text, #5D3FD3);
    line-height: 1.6;
}


/* ========================================
   V4 - MAGAZINE EDITORIAL SPECIFIC STYLES
   ======================================== */

/* Magazine Heading */
.trip-ex-v4-magazine-heading {
    color: var(--theme-purple-text, #5D3FD3);
    font-size: 1.75rem;
    font-weight: 700;
    margin-bottom: 1.5rem;
    padding-bottom: 0.5rem;
    border-bottom: 3px solid var(--theme-hero-start, #D946EF);
    display: inline-block;
}

/* Article Intro */
.trip-ex-v4-article-intro {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}
@media (min-width: 768px) {
    .trip-ex-v4-article-intro {
        flex-direction: row;
    }
}
.trip-ex-v4-intro-sidebar {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    background: white;
    border-radius: 0.75rem;
    padding: 1.25rem;
    border-left: 4px solid var(--theme-purple-text, #5D3FD3);
}
@media (min-width: 768px) {
    .trip-ex-v4-intro-sidebar {
        width: 180px;
    }
}
.trip-ex-v4-sidebar-block {
    display: flex;
    flex-direction: column;
}
.trip-ex-v4-sidebar-label {
    font-size: 0.6rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--theme-hero-start, #D946EF);
    font-weight: 600;
}
.trip-ex-v4-sidebar-value {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--theme-purple-text, #5D3FD3);
}
.trip-ex-v4-intro-body {
    flex: 1;
}
.trip-ex-v4-intro-body p {
    font-size: 0.875rem;
    color: #555;
    line-height: 1.7;
    margin-bottom: 0.75rem;
}

/* Drop cap */
.trip-ex-v4-dropcap::first-letter {
    float: left;
    font-size: 3.5rem;
    font-weight: 700;
    color: var(--theme-purple-text, #5D3FD3);
    line-height: 0.8;
    padding-right: 0.5rem;
    padding-top: 0.15rem;
    font-family: 'Pacifico', cursive;
}

/* Pullquote */
.trip-ex-v4-pullquote {
    border-left: none;
    border-top: 3px solid var(--theme-hero-start, #D946EF);
    border-bottom: 3px solid var(--theme-hero-start, #D946EF);
    padding: 1rem 0;
    margin: 1.5rem 0;
    font-style: italic;
    font-size: 1.1rem;
    color: var(--theme-purple-text, #5D3FD3);
    line-height: 1.6;
    font-weight: 500;
}

/* Delivery Row */
.trip-ex-v4-delivery-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 1.5rem;
}
.trip-ex-v4-del-chip {
    background: white;
    color: var(--theme-purple-text, #5D3FD3);
    font-size: 0.7rem;
    font-weight: 600;
    padding: 0.4rem 0.75rem;
    border-radius: 9999px;
    border: 1px solid var(--theme-lavender-bg, #F2F0FF);
}
.trip-ex-v4-del-chip--accent {
    background: var(--theme-hero-start, #D946EF);
    color: white;
    border-color: var(--theme-hero-start, #D946EF);
}

/* Day Pair (two-column) */
.trip-ex-v4-day-pair {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
    margin-bottom: 1rem;
}
@media (min-width: 768px) {
    .trip-ex-v4-day-pair {
        grid-template-columns: 1fr 1fr;
    }
}
.trip-ex-v4-day-block {
    background: white;
    border-radius: 0.75rem;
    padding: 1.25rem;
}
.trip-ex-v4-day-block--solo {
    max-width: 50%;
}
@media (max-width: 767px) {
    .trip-ex-v4-day-block--solo {
        max-width: 100%;
    }
}
.trip-ex-v4-day-label {
    display: inline-block;
    background: var(--theme-purple-text, #5D3FD3);
    color: white;
    font-weight: 700;
    font-size: 0.65rem;
    padding: 0.2rem 0.5rem;
    border-radius: 9999px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.5rem;
}
.trip-ex-v4-day-heading {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--theme-purple-text, #5D3FD3);
    margin: 0 0 0.5rem;
}

/* Day Feature (full-width accent) */
.trip-ex-v4-day-feature {
    background: white;
    border-radius: 0.75rem;
    padding: 1.5rem;
    border: 2px solid var(--theme-hero-start, #D946EF);
    margin-bottom: 1rem;
}
.trip-ex-v4-feature-quote {
    background: var(--theme-lavender-bg, #F2F0FF);
    border-left: 3px solid var(--theme-hero-start, #D946EF);
    border-radius: 0.375rem;
    padding: 0.75rem 1rem;
    font-style: italic;
    font-size: 0.85rem;
    color: var(--theme-purple-text, #5D3FD3);
    line-height: 1.6;
}

/* Verdict Grid */
.trip-ex-v4-verdict-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-top: 1.5rem;
}
@media (max-width: 480px) {
    .trip-ex-v4-verdict-grid {
        grid-template-columns: 1fr;
    }
}
.trip-ex-v4-verdict-item {
    background: white;
    border-radius: 0.75rem;
    padding: 1rem;
}
.trip-ex-v4-verdict-item p {
    margin: 0.25rem 0 0;
}

/* For You List */
.trip-ex-v4-for-you-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    max-width: 600px;
}
.trip-ex-v4-for-you-item {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
}
.trip-ex-v4-for-you-marker {
    flex-shrink: 0;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--theme-hero-start, #D946EF);
    margin-top: 0.35rem;
}
.trip-ex-v4-for-you-item p {
    margin: 0.15rem 0 0;
}

/* Final Steps */
.trip-ex-v4-final-steps {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    max-width: 560px;
    margin: 0 auto;
}
.trip-ex-v4-final-step {
    display: flex;
    align-items: center;
    gap: 1rem;
    background: white;
    border-radius: 0.75rem;
    padding: 0.75rem 1.25rem;
}
.trip-ex-v4-fs-num {
    flex-shrink: 0;
    width: 2rem;
    height: 2rem;
    background: var(--theme-purple-text, #5D3FD3);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.875rem;
}
.trip-ex-v4-fs-text {
    font-size: 0.85rem;
    color: #555;
}


/* ========================================
   MAGAZINE FEATURE LAYOUT STYLES
   (Trip Example - Magazine Feature template)
   ======================================== */

/* === MAGAZINE CONTENT AREA === */
.magazine-content {
    background: #fff;
    border-radius: 1.5rem 1.5rem 0 0;
    overflow: hidden;
}

/* === FULL BLEED HERO === */
.mag-hero {
    position: relative;
    width: 100%;
    height: 85vh;
    min-height: 550px;
    max-height: 800px;
    overflow: hidden;
}
.mag-hero img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 40%;
}
.mag-hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to bottom,
        rgba(0,0,0,0.05) 0%,
        rgba(0,0,0,0.15) 40%,
        rgba(88,28,135,0.85) 100%
    );
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 4rem 3rem;
}
.mag-hero-label {
    display: inline-block;
    background: var(--theme-accent-pink);
    color: #fff;
    padding: 0.35rem 1.2rem;
    border-radius: 2px;
    font-family: 'Poppins', sans-serif;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    margin-bottom: 1.25rem;
    width: fit-content;
}
.mag-hero h1 {
    font-family: 'Fredoka', sans-serif;
    font-size: 4rem;
    font-weight: 700;
    color: #fff;
    line-height: 1.05;
    margin-bottom: 0.75rem;
    max-width: 700px;
}
.mag-hero .subtitle {
    font-family: 'Poppins', sans-serif;
    font-size: 1.15rem;
    font-weight: 400;
    color: rgba(255,255,255,0.9);
    max-width: 500px;
    line-height: 1.5;
}

/* === ARTICLE CONTAINER === */
.article-wrap {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 2rem;
}
.article-narrow {
    max-width: 720px;
    margin: 0 auto;
}

/* === META BAR (under hero) === */
.meta-bar {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 2rem;
    padding: 2.5rem 0;
    border-bottom: 1px solid #e5e0f5;
    margin-bottom: 3rem;
}
.meta-bar-item {
    font-family: 'Poppins', sans-serif;
    font-size: 0.8rem;
    color: #666;
}
.meta-bar-item strong {
    display: block;
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--theme-purple-text);
    margin-bottom: 0.15rem;
}

/* === DROP CAP === */
.magazine-content .dropcap::first-letter {
    float: left;
    font-family: 'Fredoka', sans-serif;
    font-size: 4.5rem;
    font-weight: 700;
    line-height: 0.8;
    padding-right: 0.5rem;
    padding-top: 0.15rem;
    color: var(--theme-purple-text);
}

/* === PULL QUOTE === */
.pull-quote {
    padding: 2.5rem 0;
    margin: 2.5rem 0;
    border-top: 3px solid var(--theme-accent-pink);
    border-bottom: 3px solid var(--theme-accent-pink);
    text-align: center;
}
.pull-quote p {
    font-family: 'Fredoka', sans-serif;
    font-size: 1.75rem;
    font-weight: 500;
    color: var(--theme-purple-text);
    line-height: 1.4;
    font-style: italic;
    max-width: 680px;
    margin: 0 auto;
}
.pull-quote .pq-author {
    font-family: 'Poppins', sans-serif;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--theme-accent-pink);
    margin-top: 1rem;
    font-style: normal;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

/* === SECTION DIVIDER === */
.section-divider {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    margin: 3.5rem 0;
}
.section-divider::before,
.section-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--theme-lavender-bg-darker);
}
.section-divider span {
    font-size: 1.25rem;
    color: var(--theme-accent-pink);
}

/* === MAGAZINE SECTION HEADER === */
.mag-section-header {
    text-align: center;
    margin-bottom: 2.5rem;
}
.mag-section-header .kicker {
    font-family: 'Poppins', sans-serif;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--theme-accent-pink);
    margin-bottom: 0.5rem;
}
.mag-section-header h2 {
    font-family: 'Fredoka', sans-serif;
    font-size: 2.25rem;
    font-weight: 700;
    color: var(--theme-text-dark);
    line-height: 1.15;
}
.mag-section-header.light h2 {
    color: #fff;
}
.mag-section-header.light .kicker {
    color: rgba(255,255,255,0.7);
}

/* === TWO-COLUMN TEXT === */
.two-col-text {
    column-count: 1;
    column-gap: 2.5rem;
    font-family: 'Poppins', sans-serif;
    font-size: 0.9rem;
    line-height: 1.8;
    color: var(--theme-text-dark);
    text-align: center;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}
.two-col-text p {
    margin-bottom: 1rem;
}

/* === PROFILE GRID (magazine style) === */
.profile-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0;
    background: transparent;
    border: 1px solid var(--theme-lavender-bg-darker);
    border-radius: 0.75rem;
    overflow: hidden;
    margin: 2rem 0;
}
.profile-grid-item {
    background: var(--theme-lavender-bg);
    padding: 1.25rem 1.5rem;
    flex: 1 1 calc(33.333%);
    min-width: 0;
    border-right: 1px solid var(--theme-lavender-bg-darker);
    border-bottom: 1px solid var(--theme-lavender-bg-darker);
}
.profile-grid-item:nth-child(3),
.profile-grid-item:nth-child(5) {
    border-right: none;
}
.profile-grid-item:nth-child(n+4) {
    flex: 1 1 50%;
    border-bottom: none;
}
.profile-grid-item .pg-label {
    font-family: 'Poppins', sans-serif;
    font-size: 0.6rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--theme-accent-pink);
    margin-bottom: 0.35rem;
}
.profile-grid-item .pg-value {
    font-family: 'Fredoka', sans-serif;
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--theme-text-dark);
}

/* === PHOTO + TEXT PAIR (60/40) === */
.photo-text-pair {
    display: grid;
    grid-template-columns: 3fr 2fr;
    gap: 0;
    margin: 3rem 0;
    min-height: 420px;
}
.photo-text-pair.reversed {
    grid-template-columns: 2fr 3fr;
}
.photo-text-pair .pair-image {
    overflow: hidden;
}
.photo-text-pair .pair-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    min-height: 420px;
}
.photo-text-pair .pair-text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 3rem;
    background: var(--theme-lavender-bg);
}
.photo-text-pair.reversed .pair-text {
    background: var(--theme-lavender-bg-darker);
}
.photo-text-pair .pair-text h3 {
    font-family: 'Fredoka', sans-serif;
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--theme-purple-text);
    margin-bottom: 1rem;
}
.photo-text-pair .pair-text p,
.photo-text-pair .pair-text li {
    font-family: 'Poppins', sans-serif;
    font-size: 0.85rem;
    color: var(--theme-text-dark);
    line-height: 1.7;
}
.photo-text-pair .pair-text ul {
    list-style: none;
    padding: 0;
}
.photo-text-pair .pair-text ul li {
    padding: 0.35rem 0;
    padding-left: 1.25rem;
    position: relative;
}
.photo-text-pair .pair-text ul li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.75rem;
    width: 6px;
    height: 6px;
    background: var(--theme-accent-pink);
    border-radius: 50%;
}

/* === FULL WIDTH IMAGE === */
.full-width-image {
    width: 100%;
    margin: 3rem 0;
    overflow: hidden;
}
.full-width-image img {
    width: 100%;
    height: 500px;
    object-fit: cover;
}
.full-width-image.extra-tall img {
    height: 600px;
}
.full-width-image figcaption {
    font-family: 'Poppins', sans-serif;
    font-size: 0.7rem;
    color: #999;
    text-align: right;
    padding: 0.5rem 2rem;
    font-style: italic;
}

/* === DAY BANNER (full-width hero-style) === */
.day-banner {
    position: relative;
    width: 100%;
    height: 360px;
    overflow: hidden;
    margin: 0;
}
.day-banner img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.day-banner-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: flex-end;
    padding: 2.5rem 3rem;
}
.day-banner-overlay .day-tag {
    font-family: 'Poppins', sans-serif;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: #fff;
    background: var(--theme-accent-pink);
    padding: 0.3rem 0.9rem;
    border-radius: 2px;
    margin-bottom: 0.5rem;
    display: inline-block;
}
.day-banner-overlay h3 {
    font-family: 'Fredoka', sans-serif;
    font-size: 2.25rem;
    font-weight: 700;
    color: #fff;
    line-height: 1.15;
    text-shadow: 0 2px 20px rgba(0,0,0,0.4);
}
.day-banner-overlay .day-sub {
    font-family: 'Poppins', sans-serif;
    font-size: 0.9rem;
    color: rgba(255,255,255,0.9);
    margin-top: 0.25rem;
}

/* Day banner color overlays */
.day-banner-overlay.day-1 { background: linear-gradient(to top, rgba(139,92,246,0.88) 0%, rgba(139,92,246,0.2) 60%, transparent 100%); }
.day-banner-overlay.day-2 { background: linear-gradient(to top, rgba(236,72,153,0.88) 0%, rgba(236,72,153,0.2) 60%, transparent 100%); }
.day-banner-overlay.day-3 { background: linear-gradient(to top, rgba(249,115,22,0.88) 0%, rgba(249,115,22,0.2) 60%, transparent 100%); }
.day-banner-overlay.day-4 { background: linear-gradient(to top, rgba(59,130,246,0.88) 0%, rgba(59,130,246,0.2) 60%, transparent 100%); }
.day-banner-overlay.day-5 { background: linear-gradient(to top, rgba(16,185,129,0.88) 0%, rgba(16,185,129,0.2) 60%, transparent 100%); }
.day-banner-overlay.day-6 { background: linear-gradient(to top, rgba(99,102,241,0.88) 0%, rgba(99,102,241,0.2) 60%, transparent 100%); }
.day-banner-overlay.day-7 { background: linear-gradient(to top, rgba(217,70,239,0.88) 0%, rgba(217,70,239,0.2) 60%, transparent 100%); }

/* === DAY ARTICLE BODY === */
.day-article {
    padding: 2.5rem 0 1rem;
}
.day-article p {
    font-family: 'Poppins', sans-serif;
    font-size: 0.9rem;
    line-height: 1.8;
    color: var(--theme-text-dark);
    margin-bottom: 1rem;
}
.day-article .activity-list {
    list-style: none;
    padding: 0;
    margin: 1rem 0;
}
.day-article .activity-list li {
    font-family: 'Poppins', sans-serif;
    font-size: 0.875rem;
    color: var(--theme-text-dark);
    padding: 0.5rem 0;
    padding-left: 1.5rem;
    position: relative;
    border-bottom: 1px solid #f3f0ff;
}
.day-article .activity-list li:last-child { border-bottom: none; }
.day-article .activity-list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.85rem;
    width: 8px;
    height: 8px;
    background: var(--theme-hero-end);
    border-radius: 50%;
}

/* === OPTIONS INLINE === */
.day-options-inline {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin: 1.5rem 0;
}
.day-option-card {
    background: var(--theme-lavender-bg);
    border-radius: 0.75rem;
    padding: 1.25rem 1.5rem;
}
.day-option-card .opt-label {
    font-family: 'Poppins', sans-serif;
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--theme-purple-text);
    margin-bottom: 0.4rem;
}
.day-option-card p {
    font-family: 'Poppins', sans-serif;
    font-size: 0.825rem;
    line-height: 1.6;
    color: var(--theme-text-dark);
    margin-bottom: 0;
}

/* === HIGHLIGHT BOX === */
.highlight-box {
    background: var(--theme-lavender-bg);
    border-left: 4px solid var(--theme-hero-end);
    border-radius: 0 0.5rem 0.5rem 0;
    padding: 1rem 1.5rem;
    margin: 1.5rem 0;
    font-family: 'Poppins', sans-serif;
    font-size: 0.85rem;
    color: var(--theme-purple-text);
    font-style: italic;
}

/* === PHOTO PAIR (side by side) === */
.photo-pair {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
    margin: 2rem 0;
}
.photo-pair img {
    width: 100%;
    height: 320px;
    object-fit: cover;
    border-radius: 0.5rem;
}

/* === TIMELINE (magazine version) === */
.mag-timeline {
    position: relative;
    padding-left: 3rem;
    margin: 2rem 0;
}
.mag-timeline::before {
    content: '';
    position: absolute;
    left: 0.75rem;
    top: 0;
    bottom: 0;
    width: 2px;
    background: linear-gradient(to bottom, var(--theme-accent-pink), var(--theme-hero-end));
}
.mag-timeline-item {
    position: relative;
    margin-bottom: 2rem;
    padding-left: 1.5rem;
}
.mag-timeline-item::before {
    content: '';
    position: absolute;
    left: -2.5rem;
    top: 0.2rem;
    width: 14px;
    height: 14px;
    background: #fff;
    border: 3px solid var(--theme-accent-pink);
    border-radius: 50%;
}
.mag-timeline-item .tl-time {
    font-family: 'Poppins', sans-serif;
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--theme-accent-pink);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}
.mag-timeline-item p {
    font-family: 'Poppins', sans-serif;
    font-size: 0.875rem;
    color: var(--theme-text-dark);
    margin-top: 0.2rem;
    line-height: 1.6;
}
.mag-timeline-item p strong {
    color: var(--theme-purple-text);
}

/* === BROCHURE GRID (magazine) === */
.mag-brochure-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    border: 1px solid var(--theme-lavender-bg-darker);
    border-radius: 0.75rem;
    overflow: hidden;
    margin: 2rem 0;
}
.mag-brochure-item {
    padding: 1.5rem;
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    border-bottom: 1px solid var(--theme-lavender-bg-darker);
    border-right: 1px solid var(--theme-lavender-bg-darker);
    background: #fff;
}
.mag-brochure-item:nth-child(even) {
    border-right: none;
}
.mag-brochure-item:nth-last-child(-n+2) {
    border-bottom: none;
}
.mag-brochure-icon {
    width: 40px;
    height: 40px;
    background: var(--theme-lavender-bg);
    border-radius: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 1.2rem;
}
.mag-brochure-item h4 {
    font-family: 'Fredoka', sans-serif;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--theme-purple-text);
    margin-bottom: 0.2rem;
}
.mag-brochure-item p {
    font-family: 'Poppins', sans-serif;
    font-size: 0.75rem;
    color: #666;
    line-height: 1.5;
}

/* === FEEDBACK SECTION === */
.feedback-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin: 2rem 0;
}
.feedback-card {
    background: var(--theme-lavender-bg);
    border-radius: 0.75rem;
    padding: 1.25rem 1.5rem;
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
}
.feedback-card .fc-check {
    width: 24px;
    height: 24px;
    background: var(--theme-hero-end);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: #fff;
    font-size: 0.75rem;
    font-weight: 700;
}
.feedback-card p {
    font-family: 'Poppins', sans-serif;
    font-size: 0.85rem;
    color: var(--theme-text-dark);
    line-height: 1.5;
}

/* === FOR YOU LIST === */
.for-you-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 2rem;
    margin: 2rem 0;
}
.for-you-card {
    text-align: center;
    padding: 2rem 1.5rem;
    background: var(--theme-lavender-bg);
    border-radius: 1rem;
}
.for-you-card h4 {
    font-family: 'Fredoka', sans-serif;
    font-size: 1rem;
    font-weight: 700;
    color: var(--theme-purple-text);
    margin-bottom: 0.75rem;
}
.for-you-card p {
    font-family: 'Poppins', sans-serif;
    font-size: 0.825rem;
    color: var(--theme-text-dark);
    line-height: 1.6;
}

/* === COMBINE SECTION === */
.combine-visual {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
    flex-wrap: wrap;
    margin: 2rem 0;
}
.combine-box {
    background: var(--theme-lavender-bg);
    border-radius: 0.75rem;
    padding: 1.5rem 2rem 0.75rem;
    font-family: 'Fredoka', sans-serif;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--theme-text-dark);
    text-align: center;
    max-width: 300px;
}
.combine-plus {
    font-size: 2rem;
    font-weight: 700;
    color: var(--theme-accent-pink);
}

/* === CTA SECTION (DARK) === */
.mag-cta-section {
    background: var(--theme-dark-purple);
    color: #fff;
    padding: 5rem 2rem;
}
.cta-steps-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
    margin: 2.5rem 0;
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
}
.cta-step-card {
    text-align: center;
}
.cta-step-card .step-num {
    width: 44px;
    height: 44px;
    background: rgba(255,255,255,0.15);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 0.75rem;
    font-family: 'Fredoka', sans-serif;
    font-weight: 700;
    font-size: 1.15rem;
    color: #fff;
}
.cta-step-card h4 {
    font-family: 'Fredoka', sans-serif;
    font-size: 0.9rem;
    font-weight: 700;
    color: #fff;
    margin-bottom: 0.35rem;
}
.cta-step-card p {
    font-family: 'Poppins', sans-serif;
    font-size: 0.75rem;
    color: rgba(255,255,255,0.8);
    line-height: 1.5;
}

/* === MAGAZINE BUTTONS === */
.mag-cta-section .btn-primary {
    display: inline-block;
    background: #fff;
    color: var(--theme-hero-end);
    border: 2px solid #fff;
    border-radius: 9999px;
    padding: 0.85rem 2rem;
    font-family: 'Fredoka', sans-serif;
    font-weight: 600;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.3s;
    text-align: center;
    text-decoration: none;
}
.mag-cta-section .btn-primary:hover { background: #f0f0f0; border-color: #f0f0f0; }

.mag-cta-section .btn-outline {
    display: inline-block;
    background: var(--theme-hero-start);
    color: #fff;
    border: 2px solid #fff;
    border-radius: 9999px;
    padding: 0.85rem 2rem;
    font-family: 'Fredoka', sans-serif;
    font-weight: 600;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.3s;
    text-align: center;
    text-decoration: none;
}
.mag-cta-section .btn-outline:hover { background: #C539D5; }

.cta-buttons {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.75rem;
    margin-top: 2rem;
}

/* === SECTION BACKGROUNDS === */
.bg-lavender { background: var(--theme-lavender-bg); }
.bg-lavender-dark { background: var(--theme-lavender-bg-darker); }
.bg-white { background: #fff; }
.bg-light { background: var(--theme-lavender-bg-very-light); }
.section-pad { padding: 4rem 2rem; }
.section-pad-lg { padding: 5rem 2rem; }

/* === ROUTE FLOW (magazine) === */
.route-flow-mag {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 0.75rem;
    margin: 2rem 0;
}
.route-flow-mag .route-stop {
    background: #fff;
    color: var(--theme-purple-text);
    font-family: 'Fredoka', sans-serif;
    font-weight: 600;
    font-size: 0.9rem;
    padding: 0.6rem 1.25rem;
    border-radius: 9999px;
    border: 2px solid var(--theme-hero-end);
}
.route-flow-mag .route-arrow {
    color: var(--theme-purple-text);
    font-size: 1.4rem;
    font-weight: 700;
}

/* === IMAGE FLOAT (wrap text) === */
.img-float-right {
    float: right;
    width: 45%;
    margin: 0 0 1.5rem 2rem;
    border-radius: 0.5rem;
    overflow: hidden;
}
.img-float-right img {
    width: 100%;
    height: auto;
    object-fit: cover;
}
.img-float-left {
    float: left;
    width: 45%;
    margin: 0 2rem 1.5rem 0;
    border-radius: 0.5rem;
    overflow: hidden;
}
.img-float-left img {
    width: 100%;
    height: auto;
    object-fit: cover;
}
.clearfix::after {
    content: '';
    display: table;
    clear: both;
}

/* ========================================
   MAGAZINE CUSTOMIZATION: PORTRAIT & DYNAMIC PHOTOS
   ======================================== */

/* === TRAVELLER PORTRAIT (overlapping hero) === */
.mag-traveller-intro {
    position: relative;
    z-index: 10;
    margin-top: -5.5rem;
    text-align: center;
    margin-bottom: 1rem;
}
.mag-traveller-portrait {
    width: 240px;
    height: 240px;
    border-radius: 50%;
    overflow: hidden;
    margin: 0 auto;
    border: 5px solid #fff;
    box-shadow: 0 8px 32px rgba(88, 28, 135, 0.25);
}
.mag-traveller-portrait img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 20%;
}
.mag-traveller-info {
    margin-top: 1rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
}
.mag-traveller-name {
    font-family: 'Fredoka', sans-serif;
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--theme-purple-text);
}
.mag-traveller-tagline {
    font-family: 'Poppins', sans-serif;
    font-size: 0.8rem;
    font-weight: 500;
    color: #888;
    letter-spacing: 0.05em;
}

/* === PHOTO SHAPE CLASSES === */
.mag-shape-soft {
    border-radius: 1.25rem !important;
}
.mag-shape-round {
    border-radius: 2.5rem !important;
}
.mag-shape-organic {
    border-radius: 30% 70% 60% 40% / 60% 30% 70% 40% !important;
}
.mag-shape-leaf {
    border-radius: 0.5rem 3rem 0.5rem 3rem !important;
}

/* === MOSAIC GRIDS (asymmetric photo layouts) === */
.mag-mosaic {
    display: grid;
    gap: 1rem;
    margin: 2.5rem 0;
}

/* Phones: large left + small right, bottom-aligned */
.mag-mosaic--phones {
    grid-template-columns: 3fr 2fr;
    align-items: end;
}
.mag-mosaic--phones .mag-mosaic-lg img {
    width: 100%;
    height: 400px;
    object-fit: cover;
}
.mag-mosaic--phones .mag-mosaic-sm img {
    width: 100%;
    height: 300px;
    object-fit: cover;
}

/* Brochure: wide left + tall right */
.mag-mosaic--brochure {
    grid-template-columns: 1.4fr 1fr;
    align-items: stretch;
    margin-bottom: 2.5rem;
}
.mag-mosaic--brochure .mag-mosaic-wide img {
    width: 100%;
    height: 100%;
    min-height: 340px;
    object-fit: cover;
}
.mag-mosaic--brochure .mag-mosaic-tall img {
    width: 100%;
    height: 100%;
    min-height: 340px;
    object-fit: cover;
}

/* Editorial: hero left + accent right, staggered heights */
.mag-mosaic--editorial {
    grid-template-columns: 5fr 3fr;
    align-items: center;
}
.mag-mosaic--editorial .mag-mosaic-hero img {
    width: 100%;
    height: 420px;
    object-fit: cover;
}
.mag-mosaic--editorial .mag-mosaic-accent img {
    width: 100%;
    height: 340px;
    object-fit: cover;
}

/* === SHAPED PHOTO-TEXT PAIRS === */
.photo-text-pair.mag-shaped {
    margin-left: 2rem;
    margin-right: 2rem;
    border-radius: 1.5rem;
    overflow: hidden;
}

/* Alternate shape for variety */
.photo-text-pair.mag-shaped.mag-shaped--alt {
    border-radius: 2.5rem 0.75rem 2.5rem 0.75rem;
}

/* === FEATURE PHOTO (centered, not full-bleed) === */
.mag-feature-photo {
    margin: 3rem 0;
    overflow: hidden;
}
.mag-feature-photo img {
    width: 100%;
    height: 550px;
    object-fit: cover;
}
.mag-feature-photo figcaption {
    font-family: 'Poppins', sans-serif;
    font-size: 0.7rem;
    color: #999;
    text-align: center;
    padding: 0.75rem 0 0;
    font-style: italic;
}

/* === MAGAZINE RESPONSIVE === */
@media (max-width: 900px) {
    .mag-hero h1 { font-size: 2.5rem; }
    .two-col-text { column-count: 1; }
    .photo-text-pair,
    .photo-text-pair.reversed,
    .photo-text-pair[style*="grid-template-columns"] {
        grid-template-columns: 1fr !important;
    }
    .photo-text-pair .pair-image img { min-height: 280px; }
    .photo-text-pair .pair-text {
        padding: 2rem 1.5rem;
    }
    .photo-text-pair.mag-shaped {
        margin-left: 1rem;
        margin-right: 1rem;
        border-radius: 1.25rem;
    }
    .photo-text-pair.mag-shaped.mag-shaped--alt {
        border-radius: 1.25rem;
    }
    .profile-grid-item { flex: 1 1 50%; }
    .profile-grid-item:nth-child(n+4) { flex: 1 1 50%; }
    .for-you-grid { grid-template-columns: 1fr; }
    .cta-steps-grid { grid-template-columns: 1fr 1fr; }
    .feedback-grid { grid-template-columns: 1fr; }
    .day-options-inline { grid-template-columns: 1fr; }
    .mag-brochure-grid { grid-template-columns: 1fr; }
    .mag-brochure-item { border-right: none !important; }
    .img-float-right, .img-float-left {
        float: none;
        width: 100%;
        margin: 1rem 0;
    }
    .mag-mosaic--phones,
    .mag-mosaic--brochure,
    .mag-mosaic--editorial {
        grid-template-columns: 1fr;
    }
    .mag-mosaic--phones .mag-mosaic-lg img,
    .mag-mosaic--phones .mag-mosaic-sm img {
        height: 300px;
    }
    .mag-mosaic--editorial .mag-mosaic-hero img {
        height: 320px;
    }
    .mag-mosaic--editorial .mag-mosaic-accent img {
        height: 280px;
    }
    .route-flow-mag .route-arrow {
        font-size: 1rem;
    }
    .route-flow-mag .route-stop {
        font-size: 0.8rem;
        padding: 0.5rem 1rem;
    }
}
@media (max-width: 767px) {
    /* --- Hero --- */
    .mag-hero { height: 55vh; min-height: 350px; max-height: 450px; }
    .mag-hero h1 { font-size: 1.8rem; max-width: 100%; }
    .mag-hero-overlay { padding: 1.5rem 1.25rem; }
    .mag-hero .subtitle { font-size: 0.85rem; max-width: 100%; }
    .mag-hero-label { font-size: 0.6rem; margin-bottom: 0.75rem; }

    /* --- Layout containers --- */
    .article-wrap { padding: 0 1rem; }
    .article-narrow { max-width: 100%; }
    .section-pad { padding: 2rem 1rem; }
    .section-pad-lg { padding: 2.5rem 1rem; }
    .magazine-content { border-radius: 0; }

    /* --- Override inline font styles on magazine paragraphs --- */
    .magazine-content .article-narrow p,
    .magazine-content .article-wrap > .article-narrow > p,
    .magazine-content .two-col-text p,
    .magazine-content .day-article p {
        font-size: 0.85rem !important;
        line-height: 1.7 !important;
    }
    .magazine-content .dropcap {
        font-size: 0.85rem !important;
        line-height: 1.7 !important;
    }
    .magazine-content .dropcap::first-letter {
        font-size: 2.5rem;
    }

    /* --- Traveller portrait --- */
    .mag-traveller-intro { margin-top: 0; margin-bottom: 0.5rem; padding-top: 1.5rem; }
    .mag-traveller-portrait { width: 120px; height: 120px; }
    .mag-traveller-name { font-size: 1.3rem; }
    .mag-traveller-tagline { font-size: 0.7rem; }

    /* --- Meta bar --- */
    .meta-bar { flex-direction: column; gap: 0.75rem; padding: 1.5rem 0; margin-bottom: 2rem; }
    .meta-bar-item { text-align: center; font-size: 0.75rem; }

    /* --- Profile grid --- */
    .profile-grid-item,
    .profile-grid-item:nth-child(n+4) { flex: 1 1 100%; border-right: none; }

    /* --- Pull quotes --- */
    .pull-quote { padding: 1.25rem; margin: 1.5rem 0; }
    .pull-quote p { font-size: 1.1rem !important; line-height: 1.5 !important; }
    .pq-author { font-size: 0.8rem; }

    /* --- Photo pairs --- */
    .photo-text-pair .pair-text { padding: 1.5rem 1.25rem; }
    .photo-text-pair .pair-text h3 { font-size: 1.15rem; }
    .photo-text-pair .pair-text p,
    .photo-text-pair .pair-text li { font-size: 0.8rem !important; }
    .photo-text-pair .pair-image img { min-height: 220px; }
    .photo-text-pair.mag-shaped { margin-left: 0; margin-right: 0; border-radius: 0.75rem; }
    .photo-text-pair.mag-shaped.mag-shaped--alt { border-radius: 0.75rem; }

    /* --- Feature photo --- */
    .mag-feature-photo { margin: 1.5rem 0; }
    .mag-feature-photo img { height: 250px; border-radius: 0.75rem !important; }

    /* --- Day banners --- */
    .day-banner { height: 220px; }
    .day-banner-overlay h3 { font-size: 1.3rem; }
    .day-tag { font-size: 0.6rem; padding: 0.25rem 0.7rem; }
    .day-sub { font-size: 0.75rem; }

    /* --- Day content --- */
    .day-options-inline { gap: 0.75rem; }
    .day-option-card { padding: 0.75rem 1rem; }
    .day-option-card p { font-size: 0.8rem; }
    .activity-list li { font-size: 0.8rem; padding: 0.3rem 0; }

    /* --- Section headers --- */
    .mag-section-header { margin-bottom: 1.5rem; }
    .mag-section-header h2 { font-size: 1.3rem; }
    .mag-section-header .kicker { font-size: 0.6rem; }

    /* --- Mosaics --- */
    .mag-mosaic--brochure .mag-mosaic-wide img,
    .mag-mosaic--brochure .mag-mosaic-tall img { min-height: 200px; }
    .mag-mosaic--editorial .mag-mosaic-hero img { height: 240px; }
    .mag-mosaic--editorial .mag-mosaic-accent img { height: 200px; }
    .mag-mosaic--phones .mag-mosaic-sm img { height: 240px; }

    /* --- Brochure grid --- */
    .mag-brochure-item { padding: 1rem; }

    /* --- Timeline --- */
    .mag-timeline { padding-left: 2.25rem; }
    .mag-timeline-item { padding-left: 0.75rem; margin-bottom: 1.5rem; }
    .mag-timeline-item::before { left: -1.85rem; width: 10px; height: 10px; }
    .mag-timeline-item p { font-size: 0.8rem; }

    /* --- Route flow --- */
    .route-flow-mag { flex-direction: column; gap: 0.4rem; }
    .route-flow-mag .route-arrow { transform: rotate(90deg); font-size: 0.9rem; }
    .route-flow-mag .route-stop { font-size: 0.78rem; padding: 0.45rem 0.9rem; }

    /* --- Feedback --- */
    .feedback-grid { gap: 0.75rem; }
    .feedback-card { padding: 0.75rem 1rem; }
    .feedback-card p { font-size: 0.8rem; }

    /* --- For you --- */
    .for-you-card { padding: 1.25rem 1rem; }
    .for-you-card h4 { font-size: 0.9rem; }
    .for-you-card p { font-size: 0.78rem; }

    /* --- Combine section --- */
    .combine-visual { flex-direction: column; gap: 0.25rem; margin: 1rem 0; }
    .combine-box { max-width: 100%; padding: 1rem 1.25rem; font-size: 0.85rem; }
    .combine-plus { font-size: 1.25rem; }

    /* --- CTA section --- */
    .mag-cta-section { padding: 2.5rem 1rem; }
    .cta-step-card h4 { font-size: 0.85rem; }
    .cta-step-card p { font-size: 0.7rem; }
    .cta-buttons { flex-direction: column; align-items: center; }
    .cta-buttons a { width: 100%; max-width: 320px; }
    .mag-cta-section .btn-primary,
    .mag-cta-section .btn-outline {
        padding: 0.75rem 1.5rem;
        font-size: 0.85rem;
        width: 100%;
        max-width: 320px;
    }

    /* --- Photo pair: override inline grid-template-columns --- */
    .photo-pair { grid-template-columns: 1fr; }
    .photo-pair img { height: 260px; }
    .full-width-image img { height: 300px; }
    .cta-steps-grid { grid-template-columns: 1fr; }
}

/* === MAGAZINE - SMALL MOBILE (480px and below) === */
@media (max-width: 480px) {
    .mag-hero { height: 45vh; min-height: 280px; max-height: 380px; }
    .mag-hero h1 { font-size: 1.5rem; }
    .mag-hero-overlay { padding: 1.25rem 0.75rem; }
    .mag-hero .subtitle { font-size: 0.75rem; }
    .mag-hero-label { font-size: 0.55rem; padding: 0.25rem 0.65rem; margin-bottom: 0.5rem; }

    .article-wrap { padding: 0 0.75rem; }
    .section-pad { padding: 1.5rem 0.75rem; }
    .section-pad-lg { padding: 2rem 0.75rem; }

    .mag-traveller-intro { margin-top: 0; padding-top: 1rem; }
    .mag-traveller-portrait { width: 90px; height: 90px; }
    .mag-traveller-name { font-size: 1.1rem; }
    .mag-traveller-tagline { font-size: 0.6rem; }

    .meta-bar { padding: 1rem 0; margin-bottom: 1.5rem; gap: 0.5rem; }
    .meta-bar-item { font-size: 0.7rem; }

    .magazine-content .article-narrow p,
    .magazine-content .dropcap,
    .magazine-content .two-col-text p,
    .magazine-content .day-article p {
        font-size: 0.8rem !important;
        line-height: 1.65 !important;
    }

    .pull-quote p { font-size: 0.95rem !important; }
    .pull-quote { padding: 1rem; }
    .mag-section-header h2 { font-size: 1.15rem; }
    .mag-section-header .kicker { font-size: 0.55rem; }

    .day-banner { height: 180px; }
    .day-banner-overlay h3 { font-size: 1.1rem; }

    .photo-text-pair .pair-image img { min-height: 180px; }
    .photo-text-pair .pair-text { padding: 1rem 0.75rem; }
    .photo-text-pair .pair-text h3 { font-size: 1rem; }

    .mag-feature-photo img { height: 200px; }
    .mag-cta-section { padding: 2rem 0.75rem; }
    .mag-cta-section .btn-primary,
    .mag-cta-section .btn-outline {
        font-size: 0.78rem;
        padding: 0.65rem 1rem;
    }
    .mag-mosaic--brochure .mag-mosaic-wide img,
    .mag-mosaic--brochure .mag-mosaic-tall img { min-height: 180px; }
    .mag-mosaic--editorial .mag-mosaic-hero img { height: 180px; }
    .mag-mosaic--editorial .mag-mosaic-accent img { height: 160px; }

    .feedback-card { padding: 0.75rem; }
    .for-you-card { padding: 1rem 0.75rem; }
    .combine-box { padding: 1rem; font-size: 0.8rem; }
    .combine-plus { font-size: 1.5rem; }
}

/* ========================================
   CAREERS PAGE STYLES
   ======================================== */

/* Pull quote intro */
.careers-pullquote-section {
    background: #fff;
    padding: 3.5rem 1.5rem;
}
.careers-pullquote {
    max-width: 750px;
    margin: 0 auto;
    text-align: center;
}
.careers-pullquote blockquote {
    font-size: 1.25rem;
    font-weight: 300;
    line-height: 1.8;
    color: var(--theme-purple-text);
    position: relative;
    font-style: italic;
    padding: 0 1.5rem;
}
.careers-pullquote blockquote::before {
    content: '\201C';
    font-size: 5rem;
    color: var(--theme-lavender-bg-darker);
    position: absolute;
    top: -2rem;
    left: -1rem;
    font-family: Georgia, serif;
    line-height: 1;
}
.careers-attribution {
    margin-top: 1rem;
    font-size: 0.85rem;
    color: #999;
}

/* Careers sections */
.careers-section { padding: 3.5rem 1.5rem; }
.careers-section-inner { max-width: 900px; margin: 0 auto; }
.careers-bg-white { background: #fff; }
.careers-bg-lavender { background: var(--theme-lavender-bg); }

.careers-kicker {
    text-transform: uppercase;
    letter-spacing: 0.2em;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--theme-accent-pink);
    margin-bottom: 0.5rem;
    text-align: center;
}
.careers-heading {
    font-family: 'Fredoka', sans-serif;
    font-size: 2rem;
    font-weight: 700;
    color: var(--theme-purple-text);
    margin-bottom: 2rem;
    text-align: center;
}
.careers-roles-subtitle {
    color: #666;
    margin-bottom: 2rem;
    font-size: 0.95rem;
    text-align: center;
}

/* Work style strip */
.careers-work-strip {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1px;
    background: var(--theme-lavender-bg-darker);
    border-radius: 1rem;
    overflow: hidden;
    margin-bottom: 2rem;
}
.careers-work-item {
    background: #fff;
    padding: 1.5rem;
    text-align: center;
}
.careers-work-item p {
    font-size: 0.85rem;
    color: #555;
    line-height: 1.5;
}
.careers-work-item strong {
    color: var(--theme-purple-text);
    display: block;
    margin-bottom: 0.25rem;
}
@media (min-width: 640px) {
    .careers-work-strip { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 900px) {
    .careers-work-strip { grid-template-columns: repeat(4, 1fr); }
}

/* Language policy */
.careers-lang-policy {
    background: linear-gradient(135deg, var(--theme-lavender-bg), #F8F7FF);
    border-radius: 1rem;
    padding: 2rem;
    max-width: 800px;
    margin: 0 auto;
    position: relative;
    border-left: 5px solid var(--theme-hero-end);
}
.careers-lang-policy h3 {
    font-family: 'Fredoka', sans-serif;
    color: var(--theme-purple-text);
    font-size: 1.05rem;
    font-weight: 600;
    margin-bottom: 0.75rem;
}
.careers-lang-policy p {
    font-size: 0.88rem;
    color: #555;
    line-height: 1.7;
}

/* Role rows */
.careers-role-card {
    margin-bottom: 2rem;
    border-radius: 1.25rem;
    overflow: hidden;
    box-shadow: 0 2px 16px rgba(93, 63, 211, 0.08);
    border-top: 4px solid transparent;
}
.careers-line-pink { border-top-color: var(--theme-accent-pink); }
.careers-line-blue { border-top-color: var(--theme-accent-blue); }
.careers-line-yellow { border-top-color: var(--theme-accent-orange); }

.careers-role-content {
    padding: 2rem 2.5rem;
    background: #fff;
}
.careers-role-content h3 {
    font-family: 'Fredoka', sans-serif;
    font-size: 1.4rem;
    font-weight: 600;
    color: var(--theme-purple-text);
    margin-bottom: 0.25rem;
}
.careers-jp-sub {
    font-size: 0.85rem;
    color: #999;
    margin-bottom: 0.75rem;
}
.careers-about-text {
    font-size: 0.9rem;
    color: #555;
    line-height: 1.7;
    margin-bottom: 1rem;
}
.careers-req-label {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--theme-accent-pink);
    font-weight: 600;
    margin-bottom: 0.35rem;
    margin-top: 0.75rem;
}
.careers-req-text {
    font-size: 0.85rem;
    color: #666;
    line-height: 1.6;
}
.careers-role-content ul {
    list-style: none;
    padding: 0;
}
.careers-role-content ul li {
    font-size: 0.85rem;
    color: #666;
    line-height: 1.7;
    padding-left: 1rem;
    position: relative;
}
.careers-role-content ul li::before {
    content: '\2022';
    color: var(--theme-hero-end);
    font-weight: bold;
    position: absolute;
    left: 0;
}

@media (min-width: 768px) {
    .careers-role-content { padding: 2rem 2.5rem; }
}

/* Interview process route flow */
.careers-route-flow {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    max-width: 600px;
    margin: 0 auto;
}
.careers-route-step {
    display: flex;
    align-items: flex-start;
    gap: 1.25rem;
}
.careers-route-marker {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-shrink: 0;
}
.careers-route-dot {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--theme-hero-start), var(--theme-hero-end));
    color: #fff;
    font-weight: 700;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    justify-content: center;
}
.careers-route-line {
    width: 3px;
    flex: 1;
    min-height: 30px;
    background: var(--theme-lavender-bg-darker);
    margin-top: 4px;
}
.careers-route-step:last-child .careers-route-line { display: none; }
.careers-route-content h4 {
    font-family: 'Fredoka', sans-serif;
    font-size: 1rem;
    font-weight: 600;
    color: var(--theme-purple-text);
    margin-bottom: 0.25rem;
}
.careers-route-content p {
    font-size: 0.85rem;
    color: #666;
    line-height: 1.5;
}

/* Info columns */
.careers-info-columns {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
}
.careers-info-col {
    background: var(--theme-lavender-bg);
    border-radius: 1rem;
    padding: 1.5rem;
    border-top: 4px solid;
}
.careers-info-pink { border-color: var(--theme-accent-pink); }
.careers-info-purple { border-color: var(--theme-purple-text); }
.careers-info-gradient { border-color: var(--theme-hero-end); }
.careers-info-col h4 {
    font-family: 'Fredoka', sans-serif;
    color: var(--theme-purple-text);
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 0.75rem;
}
.careers-info-col p,
.careers-info-col li {
    font-size: 0.85rem;
    color: #666;
    line-height: 1.6;
}
.careers-info-col ul {
    list-style: disc;
    padding-left: 1.25rem;
}
@media (min-width: 768px) {
    .careers-info-columns { grid-template-columns: 1fr 1fr 1fr; }
}

/* Careers mobile */
@media (max-width: 767px) {
    .careers-section { padding: 2.5rem 1rem; }
    .careers-heading { font-size: 1.6rem; }
    .careers-pullquote blockquote { font-size: 1.05rem; }
    .careers-role-content { padding: 1.25rem; }
    .careers-role-content h3 { font-size: 1.2rem; }
    .careers-lang-policy { padding: 1.5rem; }
}
@media (max-width: 480px) {
    .careers-section { padding: 2rem 0.75rem; }
    .careers-heading { font-size: 1.3rem; }
    .careers-pullquote blockquote { font-size: 0.95rem; padding: 0 0.5rem; }
    .careers-pullquote blockquote::before { font-size: 3rem; top: -1rem; left: -0.5rem; }
    .careers-role-content { padding: 1.5rem 1.25rem; }
}

/* ==========================================================================
   Article Page Styles (Partner Voices / Mockup E)
   ========================================================================== */

/* Hero */
.article-hero {
    background: var(--theme-lavender-bg);
    padding: 4rem 1.5rem;
    text-align: center;
    border-bottom: 1px solid #e5e5e5;
}
.article-hero-inner { max-width: 700px; margin: 0 auto; }
.article-hero h1 {
    font-family: 'Fredoka', sans-serif;
    font-size: 2.75rem;
    color: var(--theme-purple-text);
    line-height: 1.2;
    margin-bottom: 1rem;
}
.article-hero-subtitle {
    font-size: 1.125rem;
    color: #666;
    font-weight: 300;
}

/* Sections */
.article-section { padding: 3.5rem 1.5rem; }
.article-inner { max-width: 800px; margin: 0 auto; padding: 0; }
.article-bg-white { background: #fff; }
.article-bg-faint { background: #fafafa; }

/* Body text */
.article-inner p {
    font-family: 'Poppins', sans-serif;
    font-size: 1rem;
    color: #444;
    line-height: 1.9;
    margin-bottom: 1.5rem;
}
.article-context {
    font-size: 1rem;
    color: #555;
    line-height: 1.9;
    margin-bottom: 1.5rem;
}
.article-note {
    font-style: italic;
    color: #6B7280 !important;
    border-left: 3px solid var(--theme-lavender-bg-darker);
    padding-left: 1rem;
}

/* Lead quote (large, prominent) */
.article-lead-quote {
    font-family: 'Fredoka', sans-serif;
    font-size: 2.25rem;
    font-weight: 500;
    line-height: 1.3;
    color: var(--theme-purple-text);
    margin-bottom: 1rem;
}
.article-attribution {
    font-family: 'Poppins', sans-serif;
    font-size: 1rem;
    color: var(--theme-accent-pink);
    font-weight: 600;
    margin-bottom: 2.5rem;
}

/* Supporting quotes */
.article-supporting-quotes {
    margin-top: 2.5rem;
    padding-top: 1.5rem;
    border-top: 2px solid var(--theme-lavender-bg);
}
.article-supporting-quote {
    margin-bottom: 1.75rem;
    padding-left: 1.5rem;
    border-left: 3px solid var(--theme-accent-pink);
}
.article-supporting-quote p {
    font-size: 0.95rem !important;
    color: #555 !important;
    font-style: italic;
    margin: 0 !important;
    line-height: 1.7;
}
.article-supporting-quote footer {
    margin-top: 0.5rem;
    font-style: normal;
    font-weight: 500;
    color: var(--theme-purple-text);
    font-size: 0.875rem;
}

/* Gradient divider between sections */
.article-divider {
    width: 60px;
    height: 3px;
    background: linear-gradient(90deg, var(--theme-hero-start), var(--theme-hero-end));
    margin: 0 auto;
}

/* Closing section */
.article-closing {
    background: linear-gradient(135deg, var(--theme-lavender-bg) 0%, #fff 100%);
    padding: 4rem 1.5rem;
    text-align: center;
}
.article-closing-quote {
    font-family: 'Fredoka', sans-serif !important;
    font-size: 1.75rem !important;
    font-weight: 500;
    line-height: 1.5 !important;
    color: var(--theme-purple-text) !important;
    max-width: 750px;
    margin: 0 auto 1.5rem !important;
}
.article-closing-note {
    font-style: italic;
    font-size: 0.9rem !important;
    color: #888 !important;
}

/* Article About Link Card (used on about page) */
.article-link-card {
    display: block;
    background: #fff;
    border-radius: 1rem;
    padding: 1.75rem 2rem;
    box-shadow: 0 2px 12px rgba(93, 63, 211, 0.08);
    border-left: 4px solid var(--theme-purple-text);
    text-decoration: none;
    transition: box-shadow 0.2s ease, transform 0.2s ease;
    margin: 1.5rem auto;
    max-width: 600px;
}
.article-link-card:hover {
    box-shadow: 0 4px 20px rgba(93, 63, 211, 0.15);
    transform: translateY(-2px);
}
.article-link-card h3 {
    font-family: 'Fredoka', sans-serif;
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--theme-purple-text);
    margin-bottom: 0.5rem;
}
.article-link-card p {
    font-family: 'Poppins', sans-serif;
    font-size: 0.85rem;
    color: #6B7280;
    line-height: 1.6;
    margin: 0;
}
.article-link-card .article-link-arrow {
    font-size: 0.8rem;
    color: var(--theme-accent-pink);
    font-weight: 600;
    margin-top: 0.75rem;
    display: inline-block;
}

@media (max-width: 767px) {
    .article-section { padding: 2rem 1rem; }
    .article-heading { font-size: 1.4rem; }
    .article-quote { padding: 1rem 1.25rem; }
    .article-link-card { padding: 1.25rem 1.5rem; }
}
@media (max-width: 480px) {
    .article-section { padding: 1.5rem 0.75rem; }
    .article-heading { font-size: 1.25rem; }
    .article-inner p { font-size: 0.9rem; }
    .article-quote { padding: 0.75rem 1rem; }
}