/* ============================================
   LUANGIAI.VN - COMPLETE STYLESHEET
   WordPress/Breakdance Compatible
   
   MOBILE-FIRST APPROACH
   =====================
   - Base styles target mobile (< 768px)
   - Use min-width media queries to enhance for larger screens
   - 80% of traffic is mobile - optimize for that first
   
   WCAG 2.1 AA COMPLIANCE
   ======================
   - Typography: 16px minimum body text
   - Line height: 1.5 minimum for body text
   - Touch targets: 44px × 44px minimum
   - Color contrast: 4.5:1 for normal text, 3:1 for large text
   
   BREAKPOINTS
   ===========
   - Mobile: < 481px (small phones)
   - Mobile+: 481px - 640px (large phones)
   - Tablet: 641px - 767px
   - Desktop: 768px+
   - Large Desktop: 1024px+
   ============================================ */

/* ============================================
   CSS VARIABLES
   ============================================ */
:root {
    /* Colors */
    --color-background: #FEF9EF;
    --color-foreground: #2A2B2F;
    --color-primary: #B05B36;
    --color-primary-foreground: #ffffff;
    --color-secondary: #D4927A;
    --color-muted: #F5EFE0;
    --color-muted-foreground: #666666;
    --color-accent: #E5B299;
    --color-border: #2A2B2F;
    --color-step-card: #F5EEE2;
    --color-card: #FEF9EF;
    --color-input-background: #F5EFE0;
    
    /* Border Radius */
    --radius: 0.75rem;
    --radius-sm: 0.375rem;
    --radius-lg: 0.75rem;
    --radius-xl: 1rem;
    --radius-full: 9999px;
    
    /* Font stacks with Vietnamese-capable fallbacks */
    --font-serif: 'Lora', 'Times New Roman', serif;
    --font-sans: 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --font-heading: 'Lora', 'Times New Roman', serif;
    --font-weight-medium: 500;
    --font-weight-normal: 400;
    
    /* WCAG Touch Target Sizes */
    --touch-target-min: 2.75rem; /* 44px - WCAG 2.1 AAA */
    --touch-target-comfortable: 3rem; /* 48px - Google Material */
    
    /* WCAG Typography */
    --font-size-min: 1rem; /* 16px - prevents iOS zoom */
    --line-height-body: 1.6; /* WCAG recommends 1.5+ */
    --line-height-heading: 1.2;
    
    /* Mobile-First Spacing Scale */
    --space-xs: 0.25rem;  /* 4px */
    --space-sm: 0.5rem;   /* 8px */
    --space-md: 1rem;     /* 16px */
    --space-lg: 1.5rem;   /* 24px */
    --space-xl: 2rem;     /* 32px */
    --space-2xl: 3rem;    /* 48px */
    --space-3xl: 4rem;    /* 64px */
}

/* ============================================
   RESET & BASE
   ============================================ */
*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    font-size: 16px;
}

body {
    background-color: var(--color-background);
    color: var(--color-foreground);
    font-family: var(--font-sans);
    font-weight: var(--font-weight-normal);
    line-height: 1.6;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* Lazy loading styles */
img.lazy-load {
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
}

img.lazy-load.loaded {
    opacity: 1;
}

img[loading="lazy"] {
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: loading 1.5s infinite;
}

@keyframes loading {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

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

ul {
    list-style: none;
}

/* ============================================
   HEADER PROMO BANNER
   Dismissible promotional banner above header
   Fixed position - moves with header on scroll
   Height is dynamic (set via JS) to handle multi-line text
   Body padding is set via JS to clear header + banner (universal fix)
   @since 2.1.0
   ============================================ */

/* CSS custom property for banner height - set by JS, default 0 */
:root {
    --promo-banner-height: 0px;
}

.promo-banner {
    width: 100%;
    padding: 0.5rem 0;
    font-family: var(--font-sans);
    font-size: 0.875rem; /* 14px */
    line-height: 1.4;
    text-align: center;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 51; /* Above header (header is z-index: 50) */
}

/* Header position is set dynamically via JS based on banner height */
/* This CSS rule is a fallback; JS also sets header.style.top directly */
.promo-banner + .header {
    top: var(--promo-banner-height);
}

/* Body padding is now set universally via JS (works for all pages including Breakdance) */
/* JS sets: document.body.style.paddingTop = (headerHeight + bannerHeight) + 'px' */

.promo-banner .container {
    position: relative;
}

.promo-banner__content {
    display: block;
    position: relative;
    text-align: center;
    padding: 0 3rem; /* Space for close button on both sides */
}

.promo-banner__text {
    display: inline;
    text-align: center;
}

.promo-banner__text a {
    color: inherit;
    text-decoration: underline;
    font-weight: 600;
}

.promo-banner__text a:hover {
    text-decoration: none;
    opacity: 0.9;
}

.promo-banner__close {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    border: none;
    color: inherit;
    cursor: pointer;
    padding: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0.8;
    transition: opacity 0.2s ease;
    min-width: 44px; /* WCAG touch target */
    min-height: 44px;
}

.promo-banner__close:hover {
    opacity: 1;
}

.promo-banner__close svg {
    width: 16px;
    height: 16px;
}

/* Hidden state for dismissed banner */
.promo-banner.is-hidden {
    display: none;
}

/* When banner is hidden, reset header position */
.promo-banner.is-hidden + .header {
    top: 0;
}

/* Mobile adjustments */
@media (max-width: 640px) {
    .promo-banner {
        padding: 0.5rem 0; /* Keep consistent padding for multi-line */
        font-size: 0.8125rem; /* 13px */
    }
    
    .promo-banner__content {
        padding: 0 2.5rem; /* More space for close button */
    }
}

/* ============================================
   CONTENT LISTS - Article/Post Styling
   Restore list styling for content areas
   ============================================ */

/* Unordered lists in content */
article ul,
.entry-content ul,
.post-content ul,
.page-content ul,
.content ul {
    list-style: disc;
    padding-left: 1.5rem;
    margin: 1rem 0;
}

/* Ordered lists in content */
article ol,
.entry-content ol,
.post-content ol,
.page-content ol,
.content ol {
    list-style: decimal;
    padding-left: 1.5rem;
    margin: 1rem 0;
}

/* List items in content */
article li,
.entry-content li,
.post-content li,
.page-content li,
.content li {
    margin-bottom: 0.5rem;
    line-height: 1.6; /* WCAG compliant */
    color: var(--color-foreground);
}

article li:last-child,
.entry-content li:last-child,
.post-content li:last-child,
.page-content li:last-child,
.content li:last-child {
    margin-bottom: 0;
}

/* Nested lists */
article ul ul,
.entry-content ul ul,
article ol ol,
.entry-content ol ol {
    margin: 0.5rem 0;
}

/* Nested list style variations */
article ul ul,
.entry-content ul ul {
    list-style: circle; /* Hollow circles for nested */
}

article ul ul ul,
.entry-content ul ul ul {
    list-style: square; /* Squares for deeply nested */
}

/* ============================================
   MOBILE-FIRST ACCESSIBILITY FOUNDATION
   WCAG 2.1 AA Compliance
   ============================================ */

/* Touch Targets - Ensure all interactive elements are 44px minimum */
a, button, input, select, textarea,
[role="button"], [role="link"], [role="checkbox"], [role="radio"] {
    /* Ensure minimum touch target via padding/min-height */
    min-height: var(--touch-target-min);
}

/* Radio & Checkbox - w-4 h-4 → w-5 h-5 (20px) */
input[type="radio"],
input[type="checkbox"] {
    width: 1.25rem;  /* 20px - w-5 */
    height: 1.25rem; /* 20px - h-5 */
    min-height: 1.25rem;
    accent-color: var(--color-primary);
    cursor: pointer;
}

/* Radio/Checkbox container for proper touch area */
.form__radio-group,
.form__checkbox-group {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 2.75rem; /* 44px touch target */
    padding: 0.25rem 0;
}

/* Links in body text need adequate touch spacing */
p a, li a, td a {
    display: inline-block;
    padding: 0.25rem 0;
    margin: -0.25rem 0;
}

/* Focus States - WCAG requires visible focus indicators */
:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

/* Remove default focus outline only when :focus-visible is supported */
:focus:not(:focus-visible) {
    outline: none;
}

/* Skip Link for Keyboard Navigation */
.skip-link {
    position: absolute;
    top: -100%;
    left: 0;
    background: var(--color-primary);
    color: var(--color-primary-foreground);
    padding: 0.75rem 1.5rem;
    z-index: 9999;
    text-decoration: none;
    font-weight: 500;
}

.skip-link:focus {
    top: 0;
}

/* Screen Reader Only - Hide visually but keep accessible */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Reduce Motion for users who prefer it */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ============================================
   TYPOGRAPHY - Figma Design System
   Mobile-First Responsive Scale
   ============================================ */

/* Headings - Mobile First */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-serif);
    font-weight: 500;
    line-height: var(--line-height-heading);
    margin-bottom: var(--space-md);
}

/* 
   FIGMA TYPOGRAPHY SCALE:
   H1: text-2xl sm:text-3xl md:text-4xl lg:text-5xl
   H2: text-xl sm:text-2xl md:text-3xl lg:text-4xl  
   H3: text-lg sm:text-xl md:text-2xl
   H4: text-base md:text-lg
*/

/* Mobile Typography Scale (base) - text-2xl, text-xl, text-lg, text-base */
h1 { 
    font-size: 1.5rem;    /* 24px - text-2xl */
    line-height: 1.2;
}
h2 { 
    font-size: 1.25rem;   /* 20px - text-xl */
    line-height: 1.25;
}
h3 { 
    font-size: 1.125rem;  /* 18px - text-lg */
    line-height: 1.3;
}
h4 { 
    font-size: 1rem;      /* 16px - text-base */
    line-height: 1.4;
    font-family: var(--font-serif);
}
h5 {
    font-size: 1rem;      /* 16px */
    line-height: 1.4;
}
h6 {
    font-size: 0.875rem;  /* 14px */
    line-height: 1.5;
}

/* Body Text - text-sm md:text-base for labels/body */
p { 
    font-size: 0.875rem;  /* 14px - text-sm mobile */
    line-height: var(--line-height-body);
    margin-bottom: var(--space-md);
}

/* Small text - 14px minimum (no 12px) */
small, .text-sm {
    font-size: 0.875rem;  /* 14px - minimum readable */
    line-height: 1.5;
}

/* Text-base utility */
.text-base {
    font-size: 1rem;      /* 16px */
    line-height: 1.5;
}

/* Small Phone (640px+) - sm: breakpoint */
@media (min-width: 640px) {
    h1 { font-size: 1.875rem; }  /* 30px - text-3xl */
    h2 { font-size: 1.5rem; }    /* 24px - text-2xl */
    h3 { font-size: 1.25rem; }   /* 20px - text-xl */
}

/* Tablet Typography (768px+) - md: breakpoint */
@media (min-width: 768px) {
    h1 { font-size: 2.25rem; }   /* 36px - text-4xl */
    h2 { font-size: 1.875rem; }  /* 30px - text-3xl */
    h3 { font-size: 1.5rem; }    /* 24px - text-2xl */
    h4 { font-size: 1.125rem; }  /* 18px - text-lg */
    
    /* Body text scales up */
    p { font-size: 1rem; }       /* 16px - text-base */
    
    .text-sm { font-size: 1rem; } /* text-sm md:text-base */
}

/* Desktop Typography (1024px+) - lg: breakpoint */
@media (min-width: 1024px) {
    h1 { font-size: 3rem; }      /* 48px - text-5xl */
    h2 { font-size: 2.25rem; }   /* 36px - text-4xl */
}

/* Italic skewed primary text in headings */
h1 .text-primary,
h2 .text-primary,
h3 .text-primary {
    font-style: italic;
    display: inline-block;
    color: var(--color-primary);
}

/* ============================================
   UTILITY CLASSES - Mobile First
   ============================================ */

/* Container - Mobile First with comfortable padding */
.container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 var(--space-md); /* 16px on mobile */
}

@media (min-width: 768px) {
    .container {
        padding: 0 var(--space-lg); /* 24px on tablet */
    }
}

@media (min-width: 1024px) {
    .container {
        padding: 0 var(--space-xl); /* 32px on desktop */
    }
}

/* Section Spacing - Mobile First: py-8 md:py-12 lg:py-16 */
.section {
    padding: 2rem 0; /* 32px - py-8 mobile */
}

@media (min-width: 768px) {
    .section {
        padding: 3rem 0; /* 48px - py-12 tablet */
    }
}

@media (min-width: 1024px) {
    .section {
        padding: 4rem 0; /* 64px - py-16 desktop */
    }
}

.text-primary { color: var(--color-primary); }
.text-foreground { color: var(--color-foreground); }
.text-muted { color: var(--color-muted-foreground); }
.font-normal { font-weight: 400; }
.font-medium { font-weight: 500; }
.italic { font-style: italic !important; }
.not-italic { font-style: normal !important; }
.text-left { text-align: left !important; }
.text-center { text-align: center !important; }
.flex { display: flex !important; }
.flex-col { flex-direction: column !important; }
.items-center { align-items: center !important; }
.justify-center { justify-content: center !important; }
.gap-3 { gap: 0.75rem !important; }
.gap-2 { gap: 0.5rem !important; }
.mb-4 { margin-bottom: 1rem !important; }
.mb-6 { margin-bottom: 1.5rem !important; }
.p-6 { padding: 1.5rem !important; }
.h-full { height: 100% !important; }
.flex-1 { flex: 1 !important; }
.text-sm { font-size: 0.875rem !important; }
.text-base { font-size: 1rem !important; }

/* Mobile-first flex utilities for h1 */
.flex.justify-center.items-center.gap-2 {
    flex-wrap: wrap;
    gap: 0.25rem; /* Mobile default */
}

@media (min-width: 481px) {
    .flex.justify-center.items-center.gap-2 {
        gap: 0.5rem; /* Tablet+ */
    }
}

/* Whitespace nowrap utility */
.whitespace-nowrap {
    white-space: nowrap;
}

/* Responsive Display Utilities */
.hidden-mobile { display: none; }

@media (min-width: 768px) {
    .hidden-mobile { display: grid; }
}

/* ============================================
   BUTTONS - WCAG & Touch Target Compliant
   ============================================ */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2.75rem; /* 44px touch target - WCAG 2.1 AAA */
    padding: 0.75rem 1.5rem;
    font-size: 1rem; /* 16px minimum - WCAG */
    font-weight: var(--font-weight-medium);
    border-radius: 9999px;
    border: 2px solid transparent;
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: var(--font-sans);
    background: none;
    /* Ensure adequate touch spacing */
    margin: 0.25rem;
}

.btn--primary {
    background-color: var(--color-primary);
    color: var(--color-primary-foreground);
    border-color: var(--color-primary);
}

.btn--primary:hover {
    background-color: var(--color-foreground);
    color: var(--color-background);
    border-color: var(--color-foreground);
}

.btn--outline {
    background-color: transparent;
    color: var(--color-primary);
    border-color: var(--color-primary);
}

.btn--outline:hover {
    background-color: var(--color-foreground);
    color: var(--color-background);
    border-color: var(--color-foreground);
}

.btn--lg {
    min-height: 3rem; /* 48px touch target */
    padding: 0.875rem 2rem;
    font-size: 1.125rem;
}

.btn--full-width {
    width: 100%;
}

/* Form submit button: min-h-[48px] */
.btn--submit {
    margin-top: 2rem;
    min-height: 3rem; /* 48px */
}

/* CTA Button - prominent action */
.btn--cta {
    min-height: 3rem; /* 48px */
    padding: 0.875rem 1.5rem;
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: 0.025em;
}

.btn--desktop-only {
    display: none;
}

@media (min-width: 768px) {
    .btn--desktop-only {
        display: inline-flex;
    }
}

/* ============================================
   BADGE
   ============================================ */
/* Badge: text-sm md:text-sm, px-3 py-1 consistent */
.badge {
    display: inline-block;
    padding: 0.25rem 0.75rem; /* py-1 px-3 */
    font-size: 0.875rem; /* 14px - text-sm */
    font-weight: 500;
    border-radius: 0.375rem;
    border: 1px solid var(--color-border);
    background-color: transparent;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Zodiac rating badges: px-3 py-1 md:px-4 md:py-1.5 */
.zodiac-badge,
.rating-badge {
    display: inline-block;
    padding: 0.25rem 0.75rem; /* py-1 px-3 */
    font-size: 0.875rem; /* text-sm */
    font-weight: 500;
    border-radius: 9999px;
}

@media (min-width: 768px) {
    .zodiac-badge,
    .rating-badge {
        padding: 0.375rem 1rem; /* py-1.5 px-4 */
        font-size: 1rem; /* text-base */
    }
}

.zodiac-badge--good,
.rating-badge--good {
    background-color: var(--color-rating-good, #10B981);
    color: var(--color-foreground);
}

.zodiac-badge--bad,
.rating-badge--bad {
    background-color: var(--color-rating-bad, #EF4444);
    color: var(--color-background);
}

.zodiac-badge--medium,
.rating-badge--medium {
    background-color: var(--color-primary);
    color: var(--color-background);
}

/* Color badges (feng shui): px-3 py-1 md:px-4 md:py-1.5 */
.color-badge {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    font-size: 0.875rem;
    border-radius: 9999px;
}

@media (min-width: 768px) {
    .color-badge {
        padding: 0.375rem 1rem;
        font-size: 1rem;
    }
}

/* ============================================
   HEADER
   ============================================ */
.header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 50;
    background-color: rgba(254, 249, 239, 0.9);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(42, 43, 47, 0.1);
    /* Hide/show on scroll - animated via JS */
    transform: translateY(0);
    transition: transform 0.3s ease-in-out, box-shadow 0.2s ease;
    will-change: transform;
}

.header__content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.875rem 0; /* Reduced padding */
    min-height: 3.75rem; /* 60px minimum height */
}

@media (min-width: 768px) {
    .header__content {
        padding: 1rem 0; /* 16px padding on desktop */
        min-height: 4rem; /* 64px on desktop */
    }
}

.logo {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    text-decoration: none;
    color: var(--color-foreground);
    transition: opacity 0.2s ease;
}

.logo:hover {
    opacity: 0.8;
}

/* Text-only logo styling */
.logo--text-only .logo__text {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--color-primary);
}

/* Custom logo image optimization */
.logo img {
    max-height: 40px;
    width: auto;
    height: auto;
}

.logo__text {
    font-size: 1.125rem;
    font-weight: 500;
}

.nav {
    display: none;
    align-items: center;
    gap: 2rem;
}

/* WordPress Menu Structure - Maximum Specificity with ID */
nav.nav > ul#menu-menu-1,
nav.nav > ul.nav__menu,
.header__container nav.nav > ul.nav__menu,
ul#menu-menu-1.nav__menu {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 2rem !important;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Target WordPress generated menu items - Use !important to override WP defaults */
nav.nav > ul.nav__menu > li,
nav.nav > ul.nav__menu > li.menu-item {
    margin: 0 !important;
    padding: 0 !important;
    display: block !important;
    list-style: none !important;
}

nav.nav > ul.nav__menu > li > a,
nav.nav > ul.nav__menu > li.menu-item > a {
    color: var(--color-foreground);
    text-decoration: none;
    transition: color 0.2s;
    white-space: nowrap;
    display: flex;
    align-items: center;
    min-height: var(--touch-target-min); /* 44px touch target */
    padding: 0.5rem 0;
}

nav.nav > ul.nav__menu > li > a:hover,
nav.nav > ul.nav__menu > li.menu-item > a:hover {
    color: var(--color-primary);
}

/* Fallback for nav__link class */
.nav__link {
    color: var(--color-foreground);
    text-decoration: none;
    transition: color 0.2s;
    white-space: nowrap;
}

.nav__link:hover {
    color: var(--color-primary);
}

/* ---- Desktop Dropdown Sub-Menus ---- */
.nav__menu .menu-item-has-children {
    position: relative;
}

/* Dropdown chevron */
nav.nav > ul.nav__menu > li.menu-item-has-children > a::after,
.nav__menu .menu-item-has-children > a::after {
    content: '';
    display: inline-block;
    width: 0.35em;
    height: 0.35em;
    border-right: 1.5px solid var(--color-muted-foreground);
    border-bottom: 1.5px solid var(--color-muted-foreground);
    transform: rotate(45deg) translateY(-1px);
    margin-left: var(--space-xs);
    transition: transform 0.25s ease, border-color 0.2s ease;
    flex-shrink: 0;
}

.nav__menu .menu-item-has-children:hover > a::after {
    transform: rotate(-135deg) translateY(0);
    border-color: var(--color-primary);
}

/* Dropdown panel */
.nav__menu .sub-menu {
    display: none;
    position: absolute;
    top: calc(100% + 0.25rem);
    left: 50%;
    transform: translateX(-50%);
    min-width: 240px;
    background-color: var(--color-card);
    border: 1px solid rgba(42, 43, 47, 0.08);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    padding: var(--space-sm);
    list-style: none;
    z-index: 100;
    margin: 0;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0.2s ease;
}

.nav__menu .menu-item-has-children:hover > .sub-menu {
    display: block;
    opacity: 1;
    visibility: visible;
}

.nav__menu .sub-menu li {
    margin: 0;
    padding: 0;
    list-style: none;
}

.nav__menu .sub-menu li a {
    display: block;
    padding: 0.625rem var(--space-lg);
    color: var(--color-foreground);
    text-decoration: none;
    font-family: var(--font-sans);
    font-size: 0.9375rem;
    font-weight: var(--font-weight-normal);
    line-height: var(--line-height-body);
    white-space: nowrap;
    border-radius: var(--radius-sm);
    transition: background-color 0.15s ease, color 0.15s ease;
}

.nav__menu .sub-menu li a:hover {
    background-color: var(--color-step-card);
    color: var(--color-primary);
}

/* Active/current page highlight in dropdown */
.nav__menu .sub-menu li.current-menu-item > a {
    color: var(--color-primary);
    font-weight: var(--font-weight-medium);
    background-color: rgba(176, 91, 54, 0.06);
}

/* Nested sub-menus (level 3+) */
.nav__menu .sub-menu .menu-item-has-children > .sub-menu {
    top: 0;
    left: 100%;
    transform: translateX(0);
}

@media (min-width: 768px) {
    .nav {
        display: flex;
    }
}

.mobile-menu-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    cursor: pointer;
    min-width: var(--touch-target-min); /* 44px touch target */
    min-height: var(--touch-target-min);
    padding: 0.5rem;
}

@media (min-width: 768px) {
    .mobile-menu-btn {
        display: none;
    }
}

.mobile-menu {
    display: none;
    border-top: 1px solid rgba(42, 43, 47, 0.1);
    background-color: var(--color-background);
}

.mobile-menu.active {
    display: block;
}

.mobile-menu__nav {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1rem 0;
}

/* WordPress Mobile Menu Structure */
.mobile-menu__list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.mobile-menu__list li {
    margin: 0;
    padding: 0;
}

.mobile-menu__list a,
.mobile-menu__link {
    color: var(--color-foreground);
    text-decoration: none;
    display: flex;
    align-items: center;
    min-height: var(--touch-target-min); /* 44px touch target */
    padding: 0.75rem 0;
    font-size: 1rem; /* WCAG: 16px minimum */
    transition: color 0.2s;
}

.mobile-menu__list a:hover,
.mobile-menu__link:hover {
    color: var(--color-primary);
}

/* ---- Mobile Dropdown Sub-Menus ---- */
.mobile-menu__list .menu-item-has-children {
    position: relative;
}

.mobile-menu__list .menu-item-has-children > .sub-menu-toggle {
    position: absolute;
    top: 0;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--touch-target-min);
    height: var(--touch-target-min);
    background: none;
    border: none;
    cursor: pointer;
    color: var(--color-muted-foreground);
    padding: 0;
    transition: color 0.2s ease;
}

.mobile-menu__list .menu-item-has-children > .sub-menu-toggle:hover {
    color: var(--color-primary);
}

.mobile-menu__list .menu-item-has-children > .sub-menu-toggle::after {
    content: '';
    display: block;
    width: 0.45em;
    height: 0.45em;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: rotate(45deg);
    transition: transform 0.25s ease;
}

.mobile-menu__list .menu-item-has-children > .sub-menu-toggle.open::after {
    transform: rotate(-135deg);
}

.mobile-menu__list .sub-menu,
.mobile-menu .sub-menu,
#mobileMenu .sub-menu {
    display: none !important;
    list-style: none;
    margin: 0;
    padding: var(--space-xs) 0 var(--space-xs) var(--space-md);
    border-left: 2px solid var(--color-accent);
    margin-left: var(--space-sm);
}

.mobile-menu__list .sub-menu.open,
.mobile-menu .sub-menu.open,
#mobileMenu .sub-menu.open {
    display: block !important;
}

.mobile-menu__list .sub-menu li {
    margin: 0;
    padding: 0;
}

.mobile-menu__list .sub-menu a {
    font-size: 0.9375rem;
    padding: var(--space-sm) 0;
    min-height: var(--touch-target-min);
    color: var(--color-foreground);
    transition: color 0.15s ease;
}

.mobile-menu__list .sub-menu a:hover {
    color: var(--color-primary);
}

.mobile-menu__list .sub-menu li.current-menu-item > a {
    color: var(--color-primary);
    font-weight: var(--font-weight-medium);
}

/* ============================================
   HERO SECTION
   ============================================ */
.hero {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    overflow: hidden;
    padding-top: 0.5rem; /* Mobile default */
}

@media (min-width: 769px) {
    .hero {
        padding-top: 1rem; /* Tablet+ */
    }
}

.hero__bg-image {
    position: absolute;
    top: 0;
    right: 0;
    width: 40%;
    height: 100%;
    display: none;
}

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

@media (min-width: 1024px) {
    .hero__bg-image {
        display: block;
    }
}

.hero__content {
    position: relative;
    z-index: 10;
    width: 100%;
    background-color: var(--color-background);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    padding: 2rem 0 2rem; /* Mobile default */
}

@media (min-width: 769px) {
    .hero__content {
        padding: 3rem 0 2rem; /* Tablet+ */
    }
}

@media (min-width: 1024px) {
    .hero__content {
        margin-right: 40%;
    }
}

.hero__main {
    flex: 1;
    display: flex;
    align-items: center;
}

.hero__grid {
    display: grid;
    gap: 2rem;
    align-items: center;
    margin-top: 0.5rem; /* Mobile default */
    width: 100%;
}

@media (min-width: 769px) {
    .hero__grid {
        margin-top: 1rem; /* Tablet+ */
    }
}

@media (min-width: 1024px) {
    .hero__grid {
        grid-template-columns: 1.2fr 0.8fr;
        gap: 3rem;
        margin-top: 1.5rem;
    }
}

.hero__text {
    text-align: center;
}

@media (min-width: 1024px) {
    .hero__text {
        text-align: left;
        padding-left: 5rem;
    }
}

.hero__heading {
    margin-bottom: 1.5rem;
    font-weight: 500;
}

.hero__description {
    margin-bottom: 2rem;
    font-weight: 400;
}

.hero__form-wrapper {
    width: 100%;
}

@media (min-width: 1024px) {
    .hero__form-wrapper {
        min-width: 560px;
        margin-left: auto;
        margin-right: -16rem;
    }
}

.hero__form-card {
    background-color: rgba(254, 249, 239, 0.95);
    backdrop-filter: blur(24px);
    border-radius: 1.5rem;
    border: 1px solid var(--color-border);
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    padding: 2rem;
}

@media (min-width: 768px) {
    .hero__form-card {
        border-radius: 2rem;
        padding: 2.5rem;
    }
}

@media (min-width: 1024px) {
    .hero__form-card {
        padding: 3rem;
    }
}

.hero__form-title {
    margin-bottom: 2rem;
    text-align: center;
}

.hero__testimonial {
    padding-bottom: 2rem;
    max-width: 42rem;
    margin: 0.5rem auto 0;
}

@media (min-width: 1024px) {
    .hero__testimonial {
        margin: 0.5rem 0 0;
        padding-left: 5rem;
    }
}

/* ============================================
   FORM
   ============================================ */
.form__group {
    margin-bottom: 1.5rem;
}

.form__group--spacing {
    margin-bottom: 1.5rem;
}

.form__note {
    margin-top: -0.5rem;
    margin-bottom: 1.5rem;
}

.form__grid {
    display: grid !important;
    grid-template-columns: 1fr !important; /* Mobile: single column */
    gap: 1.5rem !important;
}

/* Desktop: two columns */
@media (min-width: 641px) {
    .form__grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 1rem !important;
    }
}

.form__label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 500;
}

.form__input,
.form__select {
    width: 100%;
    height: 2.75rem; /* 44px touch target - WCAG compliant */
    padding: 0.5rem 0.75rem;
    border-radius: 0.5rem;
    border: 1px solid var(--color-border);
    background-color: var(--color-input-background);
    font-family: var(--font-sans);
    font-size: 1rem; /* WCAG: 16px minimum prevents iOS zoom */
    color: var(--color-foreground);
    transition: color 0.2s ease, box-shadow 0.2s ease;
    outline: none;
}

/* Date/time inputs - mobile-first */
input[type="date"].form__input,
input[type="time"].form__input {
    width: 100% !important;
    height: 2.75rem !important; /* 44px touch target */
    font-size: 1rem !important; /* WCAG: 16px minimum */
    padding: 0.5rem 0.75rem !important;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    box-sizing: border-box !important;
}

.form__select {
    padding: 0.5rem 0.75rem;
}

.form__input:focus,
.form__select:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(176, 91, 54, 0.1);
}

.form__privacy-notice {
    font-size: 0.75rem;
    color: var(--color-muted-foreground);
    text-align: center;
    margin-top: 1.5rem;
}

.form__helper-text {
    font-size: 0.875rem;
    color: var(--color-muted-foreground);
    margin-top: 0.5rem;
    text-align: left;
}

/* ============================================
   TESTIMONIAL QUOTE
   ============================================ */
.testimonial-quote {
    padding: 0.5rem 0;
    text-align: center;
}

@media (min-width: 1024px) {
    .testimonial-quote {
        text-align: left;
    }
}

.testimonial-quote__text {
    color: var(--color-primary);
    font-style: italic;
    margin-bottom: 0.75rem;
    display: inline-block;
}

.testimonial-quote__author {
    font-size: 0.875rem;
}

/* ============================================
   SECTION
   ============================================ */
.section {
    padding: 2.5rem 1rem;
}

@media (min-width: 768px) {
    .section {
        padding: 4rem 1.5rem;
    }
}

.section--no-top-padding {
    padding-top: 0;
}

.section__header {
    text-align: center;
    margin-bottom: 3rem;
}

@media (min-width: 768px) {
    .section__header {
        margin-bottom: 4rem;
    }
}

.section__header .badge {
    margin-bottom: 1rem;
}

.section__title {
    margin-bottom: 1.5rem;
}

.section__description {
    max-width: 48rem;
    margin: 0 auto;
}

/* ============================================
   SERVICE CARDS
   ============================================ */
.services-grid {
    display: grid;
    gap: 1.5rem;
    margin-bottom: 2rem;
    max-width: 80rem;
    margin-left: auto;
    margin-right: auto;
}

@media (min-width: 768px) {
    .services-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 2rem;
        margin-bottom: 3rem;
    }
}

.service-card {
    text-align: center;
    padding: 1rem;
    background-color: var(--color-step-card);
    border-radius: var(--radius);
}

@media (min-width: 768px) {
    .service-card {
        padding: 1.5rem;
    }
}

.service-card__number {
    color: var(--color-primary);
    margin-bottom: 0.5rem;
    margin-top: 1rem;
}

.service-card__title {
    margin-bottom: 0.5rem;
}

.service-card__badge {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.service-card__badge-text {
    color: var(--color-primary);
    margin: 0;
}

.service-card__description {
    line-height: 1.6;
    margin-bottom: 1rem;
    font-size: 0.875rem;
}

@media (min-width: 768px) {
    .service-card__description {
        font-size: 1rem;
    }
}

.service-card__icon-box {
    background-color: var(--color-step-card);
    border-radius: 0.5rem;
    padding: 1rem;
    height: 6rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

@media (min-width: 768px) {
    .service-card__icon-box {
        padding: 1.5rem;
        height: 8rem;
    }
}

.service-card__icon-box--muted {
    background-color: rgba(245, 239, 224, 0.3);
}

.service-card__icon {
    width: 5rem;
    height: 5rem;
    object-fit: contain;
}

@media (min-width: 768px) {
    .service-card__icon {
        width: 7rem;
        height: 7rem;
    }
}

/* ============================================
   CTA GROUP
   ============================================ */
.cta-group {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    flex-wrap: wrap;
}

/* ============================================
   ICONS
   ============================================ */
.icon {
    width: 16px;
    height: 16px;
}

.icon--check {
    color: var(--color-primary);
}

.star-icon {
    width: 12px;
    height: 12px;
    color: var(--color-primary);
}

/* ============================================
   SCROLLING TEXT
   ============================================ */
.scrolling-header {
    text-align: center;
    margin-bottom: 4rem;
}

@media (min-width: 768px) {
    .scrolling-header {
        margin-bottom: 7rem;
    }
}

.scrolling-header__title {
    margin-bottom: 1.5rem;
}

@media (min-width: 768px) {
    .scrolling-header__title {
        margin-bottom: 2rem;
    }
}

.check-list {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    max-width: 56rem;
    margin: 0 auto;
}

@media (min-width: 640px) {
    .check-list {
        flex-direction: row;
    }
}

@media (min-width: 768px) {
    .check-list {
        gap: 1.5rem;
    }
}

.check-list__item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.check-circle {
    width: 1.25rem;
    height: 1.25rem;
    border-radius: 50%;
    border: 2px solid var(--color-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.check-circle__icon {
    width: 0.75rem;
    height: 0.75rem;
    color: var(--color-primary);
    stroke-width: 3;
}

.check-list__text {
    font-size: 0.875rem;
}

@media (min-width: 768px) {
    .check-list__text {
        font-size: 1rem;
    }
}

.scroll-container {
    width: 100%;
    overflow: hidden;
    white-space: nowrap;
    margin-bottom: 1.5rem;
}

.scroll-container--ltr {
    margin-bottom: 0;
}

.scroll-content {
    display: inline-block;
    white-space: nowrap;
}

.scroll-item {
    display: inline-block;
    font-size: 1.125rem;
    font-family: var(--font-sans);
}

.scroll-item::after {
    content: '•';
    display: inline-block;
    margin: 0 1.5rem;
    font-size: 1.5rem;
    color: #888888;
}

.scroll-container--rtl .scroll-content,
.scroll-container-rtl .scroll-content {
    animation: scroll-rtl 90s linear infinite;
}

.scroll-container--ltr .scroll-content,
.scroll-container-ltr .scroll-content {
    animation: scroll-ltr 90s linear infinite;
}

/* Alternative class names for React compatibility */
.scroll-container-rtl,
.scroll-container-ltr {
    width: 100%;
    overflow: hidden;
    white-space: nowrap;
}

@keyframes scroll-rtl {
    0% { transform: translateX(0); }
    100% { transform: translateX(-33.333%); }
}

@keyframes scroll-ltr {
    0% { transform: translateX(-33.333%); }
    100% { transform: translateX(0); }
}

/* ============================================
   SYSTEMS GRID
   ============================================ */
.systems-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
}

@media (min-width: 768px) {
    .systems-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .systems-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

.systems-grid__item {
    padding: 1.5rem;
    border-bottom: 1px solid var(--color-foreground);
}

@media (min-width: 768px) {
    .systems-grid__item {
        padding: 2rem;
        border-bottom: none;
    }
    
    .systems-grid__item:nth-child(1),
    .systems-grid__item:nth-child(2) {
        border-right: 1px solid var(--color-foreground);
    }
}

@media (min-width: 1024px) {
    .systems-grid__item:nth-child(4),
    .systems-grid__item:nth-child(5) {
        border-right: 1px solid var(--color-foreground);
        border-top: 1px solid var(--color-foreground);
    }
}

.systems-grid__item--cta {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    background-color: var(--color-step-card);
    border-top: 1px solid var(--color-foreground);
}

.systems-grid__title {
    margin-bottom: 0.5rem;
}

.systems-grid__category {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.systems-grid__category span {
    font-size: 0.875rem;
}

.systems-grid__list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.systems-grid__list li {
    font-size: 0.875rem;
}

@media (min-width: 768px) {
    .systems-grid__list li {
        font-size: 1rem;
    }
}

.systems-grid__cta-content {
    margin-bottom: 1.5rem;
}

.systems-grid__cta-title {
    margin-bottom: 0;
}

/* ============================================
   COMPARISON
   ============================================ */
.comparison-grid {
    display: grid;
    gap: 1.5rem;
    margin-bottom: 4rem;
}

@media (min-width: 1024px) {
    .comparison-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 2rem;
    }
}

.comparison-card {
    background-color: var(--color-background);
    border: 1px solid rgba(245, 239, 224, 0.5);
    border-radius: var(--radius);
    padding: 1.5rem;
}

@media (min-width: 768px) {
    .comparison-card {
        padding: 2rem;
    }
}

.comparison-card--highlight {
    background-color: var(--color-step-card);
    border-color: var(--color-primary);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

.comparison-card__title {
    margin-bottom: 1.5rem;
    font-size: 1.25rem;
    font-weight: 500;
}

@media (min-width: 768px) {
    .comparison-card__title {
        font-size: 1.5rem;
    }
}

/* Comparison card header - icon and title on same line */
.comparison-card__header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}

.comparison-card__header .comparison-card__title {
    margin: 0;
    margin-bottom: 0;
    flex: 1;
}

.comparison-card__icon {
    flex-shrink: 0;
}

.comparison-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.comparison-list__item {
    display: flex;
    gap: 0.75rem;
    align-items: flex-start;
}

.comparison-icon {
    width: 1.25rem;
    height: 1.25rem;
    border-radius: 50%;
    border: 2px solid var(--color-foreground);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-top: 0.25rem;
}

.comparison-icon--check {
    border-color: var(--color-primary);
}

.comparison-icon--cross {
    border-color: var(--color-foreground);
}

.comparison-icon__svg {
    width: 0.75rem;
    height: 0.75rem;
}

.comparison-icon--check .comparison-icon__svg {
    color: var(--color-primary);
}

.comparison-icon--cross .comparison-icon__svg {
    color: var(--color-foreground);
}

.comparison-list__text {
    line-height: 1.6;
    font-size: 0.875rem;
}

@media (min-width: 768px) {
    .comparison-list__text {
        font-size: 1rem;
    }
}

/* ============================================
   TESTIMONIALS
   ============================================ */
.testimonials {
    position: relative;
    overflow: hidden;
    width: 100vw;
    margin-left: calc(-50vw + 50%);
}

.testimonials__scroll {
    display: flex;
    flex-wrap: nowrap;
    width: max-content;
    animation: scroll-testimonials 60s linear infinite;
}

.testimonials__scroll:hover {
    animation-play-state: paused;
}

@keyframes scroll-testimonials {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

/* Auto-scroll modifier - ensures animation runs smoothly */
.testimonials--auto-scroll .testimonials__scroll {
    animation: scroll-testimonials 60s linear infinite;
    animation-play-state: running;
    will-change: transform;
}

.testimonials--auto-scroll:hover .testimonials__scroll {
    animation-play-state: paused;
}

/* Ensure animation is not paused by default */
.testimonials--auto-scroll {
    overflow: hidden;
}

/* Reduce motion for accessibility - only applies if user has system preference set */
@media (prefers-reduced-motion: reduce) {
    .testimonials--auto-scroll .testimonials__scroll {
        animation: scroll-testimonials 120s linear infinite; /* Slower but still moving */
    }
}

.testimonial-card {
    flex-shrink: 0;
    width: 320px;
    margin: 0 0.75rem;
    background-color: rgba(254, 249, 239, 0.5);
    backdrop-filter: blur(4px);
    border: 1px solid rgba(42, 43, 47, 0.05);
    border-radius: var(--radius);
    padding: 1rem;
}

@media (min-width: 640px) {
    .testimonial-card {
        width: 360px;
    }
}

@media (min-width: 768px) {
    .testimonial-card {
        width: 400px;
        margin: 0 1rem;
        padding: 1.5rem;
    }
}

.testimonial-card__stars {
    display: flex;
    gap: 0.125rem;
    margin-bottom: 1rem;
}

.testimonial-card__text {
    color: var(--color-muted-foreground);
    margin-bottom: 1.5rem;
    line-height: 1.6;
    font-style: italic;
    min-height: 100px;
    font-size: 0.875rem;
}

@media (min-width: 768px) {
    .testimonial-card__text {
        min-height: 120px;
        font-size: 1rem;
    }
}

.testimonial-card__author {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.testimonial-card__avatar {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    background-color: rgba(176, 91, 54, 0.1);
    border: 2px solid rgba(176, 91, 54, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 0.875rem;
    color: var(--color-primary);
}

@media (min-width: 768px) {
    .testimonial-card__avatar {
        width: 3rem;
        height: 3rem;
        font-weight: 500;
    }
}

.testimonial-card__info-name {
    font-size: 0.875rem;
}

@media (min-width: 768px) {
    .testimonial-card__info-name {
        font-weight: 500;
    }
}

.testimonial-card__info-category {
    font-size: 0.75rem;
    color: var(--color-muted-foreground);
}

@media (min-width: 768px) {
    .testimonial-card__info-category {
        font-size: 0.875rem;
    }
}

.testimonials-cta {
    text-align: center;
    margin-top: 3rem;
}

/* ============================================
   FEATURED ARTICLES SECTION
   Blog articles for internal linking (SEO)
   ============================================ */
.featured-articles {
    padding: 2rem 1rem;
    background-color: var(--color-background);
}

@media (min-width: 768px) {
    .featured-articles {
        padding: 3rem 1.5rem;
    }
}

@media (min-width: 1024px) {
    .featured-articles {
        padding: 5rem 1.5rem;
    }
}

.featured-articles__header {
    margin-bottom: 2rem;
}

@media (min-width: 768px) {
    .featured-articles__header {
        margin-bottom: 3rem;
    }
}

@media (min-width: 1024px) {
    .featured-articles__header {
        margin-bottom: 4rem;
    }
}

.featured-articles__header .badge {
    margin-bottom: 0.75rem;
    display: inline-block;
}

@media (min-width: 768px) {
    .featured-articles__header .badge {
        margin-bottom: 1rem;
    }
}

.featured-articles__title {
    margin-bottom: 1rem;
    font-family: var(--font-serif);
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--color-foreground);
}

@media (min-width: 768px) {
    .featured-articles__title {
        font-size: 2rem;
        margin-bottom: 1.5rem;
    }
}

@media (min-width: 1024px) {
    .featured-articles__title {
        font-size: 2.5rem;
    }
}

.featured-articles__description {
    max-width: 48rem;
    margin: 0 auto;
    color: var(--color-foreground);
    font-size: 0.875rem;
    line-height: 1.6;
}

@media (min-width: 768px) {
    .featured-articles__description {
        font-size: 1rem;
    }
}

/* Articles Grid - 1 col mobile, 2 col tablet, 3 col desktop */
.featured-articles__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}

@media (min-width: 768px) {
    .featured-articles__grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.5rem;
    }
}

@media (min-width: 1024px) {
    .featured-articles__grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 2rem;
    }
}

/* Article Card */
.article-card {
    display: block;
    text-decoration: none;
    color: inherit;
    background-color: var(--color-background);
    border: 1px solid rgba(42, 43, 47, 0.1);
    border-radius: var(--radius);
    overflow: hidden;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.article-card:hover {
    transform: scale(1.02);
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
}

.article-card__image-wrapper {
    aspect-ratio: 16 / 10;
    overflow: hidden;
}

.article-card__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.article-card:hover .article-card__image {
    transform: scale(1.05);
}

.article-card__content {
    padding: 1rem;
}

@media (min-width: 768px) {
    .article-card__content {
        padding: 1.5rem;
    }
}

.article-card__title {
    font-family: var(--font-serif);
    font-size: 1rem;
    font-weight: 500;
    color: var(--color-foreground);
    margin-bottom: 0.5rem;
    transition: color 0.2s ease;
    line-height: 1.4;
}

@media (min-width: 768px) {
    .article-card__title {
        font-size: 1.125rem;
    }
}

.article-card:hover .article-card__title {
    color: var(--color-primary);
}

.article-card__excerpt {
    font-size: 0.875rem;
    color: var(--color-foreground);
    line-height: 1.6;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

@media (min-width: 768px) {
    .article-card__excerpt {
        font-size: 1rem;
    }
}

/* View All CTA */
.featured-articles__cta {
    margin-top: 2rem;
}

@media (min-width: 768px) {
    .featured-articles__cta {
        margin-top: 3rem;
    }
}

.featured-articles__cta .btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.featured-articles__cta .btn svg {
    transition: transform 0.2s ease;
}

.featured-articles__cta .btn:hover svg {
    transform: translateX(4px);
}

/* ============================================
   COMMUNITY SECTION
   ============================================ */
.community-section {
    background-color: var(--color-step-card);
}

.community-card {
    max-width: 72rem;
    margin: 0 auto;
}

.community-card__content {
    background-color: var(--color-background);
    border-radius: var(--radius);
    padding: 2rem;
}

@media (min-width: 768px) {
    .community-card__content {
        padding: 3rem;
    }
}

@media (min-width: 1024px) {
    .community-card__content {
        padding: 4rem;
    }
}

.community-header {
    text-align: center;
    margin-bottom: 3rem;
}

.community-header__title {
    margin-bottom: 1.5rem;
}

.community-header__description {
    max-width: 48rem;
    margin: 0 auto;
}

.community-features {
    display: grid;
    gap: 1rem;
    margin-bottom: 3rem;
}

@media (min-width: 768px) {
    .community-features {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.5rem;
    }
}

.community-feature {
    background-color: rgba(254, 249, 239, 0.5);
    backdrop-filter: blur(4px);
    border-radius: 0.5rem;
    padding: 1rem;
    border: 1px solid var(--color-foreground);
}

@media (min-width: 768px) {
    .community-feature {
        padding: 1.5rem;
    }
}

.community-feature__content {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
}

.community-feature__title {
    margin-bottom: 0.5rem;
}

.community-feature__description {
    line-height: 1.6;
    font-size: 0.875rem;
}

@media (min-width: 768px) {
    .community-feature__description {
        font-size: 1rem;
    }
}

.community-cta {
    text-align: center;
    margin-bottom: 3rem;
}

.community-image {
    border-radius: 0.75rem;
    overflow: hidden;
}

@media (min-width: 768px) {
    .community-image {
        border-radius: 1rem;
    }
}

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

/* ============================================
   FAQ SECTION
   ============================================ */
.faq-container {
    max-width: 56rem;
    margin: 0 auto;
}

.faq-header {
    text-align: center;
    margin-bottom: 3rem;
}

.faq-header__title {
    margin-bottom: 1rem;
}

.faq-header__description {
    max-width: 48rem;
    margin: 0 auto;
}

/* FAQ Accordion: space-y-3 md:space-y-4 */
.accordion {
    display: flex;
    flex-direction: column;
    gap: 0.75rem; /* space-y-3 mobile */
}

@media (min-width: 768px) {
    .accordion {
        gap: 1rem; /* space-y-4 tablet+ */
    }
}

/* FAQ Accordion: px-4 md:px-5 lg:px-6 xl:px-8 */
.accordion-item {
    border: none;
    border-radius: 0.75rem; /* rounded-lg */
    padding: 0 1rem; /* px-4 mobile */
    background-color: var(--color-step-card);
    transition: background-color 0.2s;
}

@media (min-width: 768px) {
    .accordion-item {
        border-radius: 1rem; /* rounded-xl */
        padding: 0 1.25rem; /* px-5 */
    }
}

@media (min-width: 1024px) {
    .accordion-item {
        border-radius: 1.5rem; /* rounded-2xl */
        padding: 0 1.5rem; /* px-6 */
    }
}

@media (min-width: 1280px) {
    .accordion-item {
        padding: 0 2rem; /* px-8 */
    }
}

.accordion-item:hover {
    background-color: rgba(245, 238, 226, 0.8);
}

.accordion-trigger {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    text-align: left;
    background: none;
    border: none;
    min-height: var(--touch-target-min); /* 44px touch target */
    padding: 1rem 0; /* Comfortable mobile padding */
    cursor: pointer;
    font-family: var(--font-sans);
    font-size: 1rem; /* WCAG: 16px minimum */
    font-weight: 500;
    color: var(--color-foreground);
}

@media (min-width: 768px) {
    .accordion-trigger {
        padding: 1.25rem 0;
        font-size: 1.125rem;
    }
}

.accordion-trigger:hover {
    text-decoration: none;
}

.accordion-trigger span {
    padding-right: 1rem;
}

.accordion-icon {
    flex-shrink: 0;
    transition: transform 0.2s;
    color: var(--color-foreground);
    stroke: currentColor;
}

.accordion-item.active .accordion-icon {
    transform: rotate(180deg);
}

.accordion-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
}

.accordion-item.active .accordion-content {
    max-height: 500px;
}

.accordion-content-inner {
    padding-bottom: 1.5rem;
    color: var(--color-muted-foreground);
    line-height: var(--line-height-body); /* WCAG 1.5+ */
    font-size: 1rem; /* WCAG: 16px minimum */
}

.faq-contact {
    margin-top: 3rem;
    text-align: center;
    padding: 1.5rem;
    background-color: var(--color-step-card);
    border-radius: 1rem;
}

@media (min-width: 768px) {
    .faq-contact {
        padding: 2rem;
    }
}

.faq-contact p {
    margin-bottom: 0.5rem;
    font-size: 0.875rem;
}

@media (min-width: 768px) {
    .faq-contact p {
        font-size: 1rem;
    }
}

.faq-contact a {
    color: var(--color-primary);
    font-weight: 500;
    text-decoration: none;
    transition: color 0.2s;
}

.faq-contact a:hover {
    color: var(--color-accent);
}

/* ============================================
   FOOTER
   ============================================ */
.footer {
    background-color: var(--color-step-card);
    padding: 3rem 0;
}

@media (min-width: 768px) {
    .footer {
        padding: 4rem 0;
    }
}

.footer__cta {
    text-align: center;
    max-width: 56rem;
    margin: 0 auto 3rem;
}

.footer__cta-content {
    padding: 2rem 0;
}

.footer__cta-title {
    margin-bottom: 1rem;
}

@media (min-width: 768px) {
    .footer__cta-title {
        margin-bottom: 1.5rem;
    }
}

.footer__cta-description {
    margin-bottom: 1.5rem;
    font-size: 0.875rem;
}

@media (min-width: 768px) {
    .footer__cta-description {
        margin-bottom: 2rem;
        font-size: 1rem;
    }
}

.footer__cta-buttons {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    justify-content: center;
}

/* Footer buttons - mobile-first full width */
.footer__cta-buttons .btn,
.footer__cta-buttons a.btn {
    width: 100%;
    min-height: 2.75rem; /* 44px touch target */
}

@media (min-width: 641px) {
    .footer__cta-buttons .btn,
    .footer__cta-buttons a.btn {
        width: auto;
        padding: 0.75rem 2rem !important;
        font-size: 1rem !important;
        box-sizing: border-box;
    }
}

@media (min-width: 640px) {
    .footer__cta-buttons {
        flex-direction: row;
    }
}

.footer__content-wrapper {
    background-color: var(--color-background);
    border-radius: 1rem;
    overflow: hidden;
}

@media (min-width: 768px) {
    .footer__content-wrapper {
        border-radius: 1.5rem;
    }
}

.footer__content {
    padding: 2rem 1rem;
}

@media (min-width: 768px) {
    .footer__content {
        padding: 3rem 1.5rem;
    }
}

@media (min-width: 1024px) {
    .footer__content {
        padding: 3rem;
    }
}

.footer__grid {
    display: grid;
    gap: 1.5rem;
    margin-bottom: 1.5rem;
}

@media (min-width: 768px) {
    .footer__grid {
        grid-template-columns: repeat(4, 1fr);
        gap: 2rem;
        margin-bottom: 2rem;
    }
}

.footer__brand {
    grid-column: span 1;
}

@media (min-width: 768px) {
    .footer__brand {
        grid-column: span 2;
    }
}

.footer__brand .logo {
    margin-bottom: 1rem;
}

.footer__description {
    font-size: 0.75rem;
    color: var(--color-muted-foreground);
    margin-bottom: 1.5rem;
    max-width: 28rem;
}

@media (min-width: 768px) {
    .footer__description {
        font-size: 0.875rem;
    }
}

.footer__social {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.footer__badge {
    height: 2.5rem;
}

@media (min-width: 768px) {
    .footer__badge {
        height: 3rem;
    }
}

.footer__social-link {
    color: var(--color-muted-foreground);
    transition: color 0.2s;
}

.footer__social-link:hover {
    color: var(--color-primary);
}

.footer__social-link svg {
    width: 24px;
    height: 24px;
}

.footer__links-title {
    margin-bottom: 1rem;
    font-size: 0.875rem;
}

@media (min-width: 768px) {
    .footer__links-title {
        font-size: 1rem;
    }
}

.footer__links-list {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.footer__links-list div,
.footer__links-list a {
    font-size: 0.75rem;
    color: var(--color-muted-foreground);
    line-height: 1.3;
}

.footer__links-list a {
    text-decoration: none;
    transition: color 0.2s ease;
}

.footer__links-list a:hover {
    color: var(--color-primary);
}

@media (min-width: 768px) {
    .footer__links-list div,
    .footer__links-list a {
        font-size: 0.875rem;
    }
}

.footer__divider {
    height: 1px;
    background-color: var(--color-border);
    margin: 1.5rem 0;
}

@media (min-width: 768px) {
    .footer__divider {
        margin: 2rem 0;
    }
}

.footer__bottom {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 0.75rem;
    color: var(--color-muted-foreground);
}

@media (min-width: 768px) {
    .footer__bottom {
        font-size: 0.875rem;
    }
}

.footer__bottom-center {
    display: block;
    width: 100%;
    text-align: center;
}

/* Birth Chart Display Styles - Removed legacy code */
/* All chart styling moved to responsive section below */

/* Ensure the chart container from API is displayed at full size */
#chartContent .chart-container {
    margin: 0 auto;
}

/* ============================================
   NOTE: ALL WooCommerce styles removed in v2.7.3
   All WooCommerce pages are built with Breakdance
   Breakdance handles ALL WooCommerce styling completely
   This ensures zero conflicts and optimal performance
   ============================================ */

/* ============================================
   READING PACKAGES SECTION
   ============================================ */

.reading-packages__headers {
    display: none;
}

@media (min-width: 768px) {
    .reading-packages__headers {
        display: grid;
        grid-template-columns: 1fr;
        gap: 1rem;
        margin-bottom: 1.5rem;
    }
}

@media (min-width: 1024px) {
    .reading-packages__headers {
        grid-template-columns: 3fr 2fr;
    }
}

.reading-packages__header-left,
.reading-packages__header-right {
    border-bottom: 1px solid var(--color-foreground);
    padding-bottom: 1rem;
}

.reading-packages__header-left p,
.reading-packages__header-right p {
    margin: 0;
    color: var(--color-foreground);
}

.reading-packages__grid {
    display: grid !important;
    grid-template-columns: 1fr;
    gap: 1rem;
    margin-bottom: 2rem;
}

@media (min-width: 640px) {
    .reading-packages__grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 1rem;
        margin-bottom: 3rem;
    }
}

@media (min-width: 1024px) {
    .reading-packages__grid {
        grid-template-columns: repeat(5, 1fr) !important;
        gap: 1rem;
    }
}

/* CTA Card in grid - full width on mobile */
.reading-packages__cta-card {
    grid-column: 1 / -1;
}

@media (min-width: 1024px) {
    .reading-packages__cta-card {
        grid-column: span 2;
    }
}

/* Reading Packages Section Overrides */
.reading-packages .service-card {
    text-align: left;
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    height: 100%;
    justify-content: center;
}

.reading-packages .service-card__title {
    font-style: italic;
    margin-bottom: 1rem;
}

.reading-packages .service-card__description {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    flex: 1;
}

.reading-packages .service-card__description p {
    margin-bottom: 0;
    color: var(--color-foreground);
}

.reading-packages__cta-card {
    grid-column: span 1;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

@media (min-width: 640px) {
    .reading-packages__cta-card {
        grid-column: span 2;
    }
}

@media (min-width: 1024px) {
    .reading-packages__cta-card {
        grid-column: span 2;
    }
}

.reading-packages .comparison-card__title {
    margin-bottom: 1.5rem;
    text-align: center;
}

.reading-packages .comparison-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-bottom: 1rem;
    flex: 1;
}

/* Check icon wrapper: w-5 h-5 md:w-6 md:h-6 */
.check-icon-wrapper {
    width: 1.25rem;  /* 20px - w-5 mobile */
    height: 1.25rem; /* 20px - h-5 mobile */
    border-radius: 50%;
    border: 2px solid var(--color-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

@media (min-width: 768px) {
    .check-icon-wrapper {
        width: 1.5rem;  /* 24px - w-6 */
        height: 1.5rem; /* 24px - h-6 */
    }
}

/* Checkmark icon: w-3 h-3 md:w-3.5 md:h-3.5 */
.check-icon {
    width: 0.75rem;  /* 12px - w-3 mobile */
    height: 0.75rem; /* 12px - h-3 mobile */
    color: var(--color-primary);
}

@media (min-width: 768px) {
    .check-icon {
        width: 0.875rem;  /* 14px - w-3.5 */
        height: 0.875rem; /* 14px - h-3.5 */
    }
}

/* CheckCircle2 icon: w-6 h-6 md:w-7 md:h-7 */
.check-circle-icon {
    width: 1.5rem;  /* 24px - w-6 mobile */
    height: 1.5rem; /* 24px - h-6 mobile */
    color: var(--color-primary);
}

@media (min-width: 768px) {
    .check-circle-icon {
        width: 1.75rem;  /* 28px - w-7 */
        height: 1.75rem; /* 28px - h-7 */
    }
}

/* ============================================
   ENCYCLOPEDIA PAGE
   Matches React design exactly
   ============================================ */

/* Encyclopedia Page Title - Legacy, use .custom-page__title for new pages */
.encyclopedia-page__title {
    font-family: var(--font-serif);
    font-weight: 500;
    line-height: 1.2;
    font-size: 2rem;
    margin-bottom: 1.5rem;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
    text-align: center;
}

@media (min-width: 481px) {
    .encyclopedia-page__title {
        font-size: 2.25rem;
    }
}

@media (min-width: 768px) {
    .encyclopedia-page__title {
        font-size: 3rem;
    }
}

@media (min-width: 1024px) {
    .encyclopedia-page__title {
        font-size: 3.5rem;
    }
}

/* Utility Classes - Reusable across site */
.flex-wrap {
    flex-wrap: wrap;
}

.inline-flex {
    display: inline-flex;
}

/* Encyclopedia Section - Now uses .custom-page-section unified styles */
/* Legacy class kept for backwards compatibility */
.encyclopedia-section {
    padding-top: 1rem;
    padding-bottom: 3rem;
    background-color: var(--color-background);
    min-height: 100vh;
}

@media (min-width: 768px) {
    .encyclopedia-section {
        padding-top: 2rem;
        padding-bottom: 4rem;
    }
}

@media (min-width: 1024px) {
    .encyclopedia-section {
        padding-top: 3rem;
        padding-bottom: 5rem;
    }
}

/* Container - matches max-w-7xl (1280px) */
.encyclopedia-container {
    max-width: 1280px;
}

/* Header - Now uses standard .section__header and .section__title classes */
/* Removed encyclopedia-header styles - using consistent page title styling */

/* Layout - matches grid-cols-1 lg:grid-cols-[280px_1fr] gap-6 lg:gap-8 xl:gap-12 */
.encyclopedia-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    width: 100%;
    max-width: 72rem; /* max-w-6xl */
    margin-left: auto;
    margin-right: auto;
}

@media (min-width: 1024px) {
    .encyclopedia-layout {
        grid-template-columns: 280px 1fr;
        gap: 2rem;
    }
}

@media (min-width: 1280px) {
    .encyclopedia-layout {
        gap: 3rem;
    }
}

/* Sidebar - matches space-y-4 md:space-y-6 */
.encyclopedia-sidebar {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    width: 100%;
    max-width: 100%;
}

@media (min-width: 768px) {
    .encyclopedia-sidebar {
        gap: 1.5rem;
    }
}

/* Search */
.encyclopedia-search {
    position: relative;
}

.encyclopedia-search__icon {
    position: absolute;
    left: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    width: 1.25rem;
    height: 1.25rem;
    color: var(--color-muted-foreground);
    pointer-events: none;
}

/* Input - matches min-h-[44px] pl-9 md:pl-10 bg-step-card border border-border rounded-md */
.encyclopedia-search__input {
    width: 100%;
    min-width: 0;
    min-height: 2.75rem; /* 44px touch target */
    height: 2.75rem;
    padding: 0.5rem 0.75rem 0.5rem 2.25rem;
    background-color: var(--color-step-card);
    border: 1px solid var(--color-border);
    border-radius: 0.375rem;
    font-family: var(--font-sans);
    font-size: 0.875rem;
    line-height: 1.5;
    color: var(--color-foreground);
    transition: color 0.15s, box-shadow 0.15s;
    outline: none;
}

@media (min-width: 768px) {
    .encyclopedia-search__input {
        padding-left: 2.5rem;
        font-size: 1rem;
    }
}


.encyclopedia-search__input:focus-visible,
.encyclopedia-search__input:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(176, 91, 54, 0.5);
}

.encyclopedia-search__input::placeholder {
    color: var(--color-muted-foreground);
}

/* Filters - matches mb-3 */
.encyclopedia-filters__label {
    margin-bottom: 0.75rem;
    color: var(--color-foreground);
}

/* Filter Tags - matches flex flex-wrap gap-2 */
.encyclopedia-filters__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

/* Filters inline under title */
.encyclopedia-filters--inline {
    margin-top: 2.5rem;
}

.encyclopedia-filters--inline .encyclopedia-filters__tags {
    justify-content: center;
    max-width: 56rem;
    margin: 0 auto;
}

/* Limit category buttons - 5 per row on desktop */
.encyclopedia-filters--inline .encyclopedia-filter-tag {
    flex: 0 0 auto;
}

@media (min-width: 768px) {
    .encyclopedia-filters--inline .encyclopedia-filters__tags {
        gap: 0.75rem;
    }
}

/* Filter Tag - matches px-3 py-1.5 rounded-full border */
.encyclopedia-filter-tag {
    display: inline-block;
    padding: 0.375rem 0.75rem;
    border-radius: 9999px;
        font-size: 0.875rem;
    line-height: 1.5;
    font-weight: 400;
    background-color: var(--color-step-card);
    color: var(--color-foreground);
    border: 1px solid var(--color-border);
    cursor: pointer;
    transition: all 0.2s;
    font-family: var(--font-sans);
    text-decoration: none;
    white-space: nowrap;
    -webkit-appearance: button;
    appearance: button;
}

.encyclopedia-filter-tag:hover {
    border-color: var(--color-primary);
    background-color: var(--color-step-card);
}

.encyclopedia-filter-tag.active,
.encyclopedia-filter-tag.active:hover,
.encyclopedia-filter-tag.active:focus,
.encyclopedia-filter-tag.active:active {
    background-color: var(--color-primary);
    color: var(--color-primary-foreground);
    border-color: var(--color-primary);
}

.encyclopedia-filter-tag:focus {
    outline: none;
}

.encyclopedia-filter-tag:focus-visible {
    outline: 2px solid var(--color-ring);
    outline-offset: 2px;
}

/* Results header */
.encyclopedia-results-header {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.5rem;
    padding: 0.75rem 1rem;
    background-color: var(--color-step-card);
    border-radius: 0.5rem;
    margin-top: 2rem;
    margin-bottom: 1.5rem;
    font-size: 0.9375rem;
    color: var(--color-muted-foreground);
}

.encyclopedia-results-category strong {
    color: var(--color-foreground);
}

/* Content container */
.encyclopedia-content {
    max-width: 72rem;
    margin-left: auto;
    margin-right: auto;
}

/* Category Wrapper - matches space-y-8 md:space-y-10 lg:space-y-12 */
.encyclopedia-wrapper {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

@media (min-width: 768px) {
    .encyclopedia-wrapper {
        gap: 2.5rem;
    }
}

@media (min-width: 1024px) {
    .encyclopedia-wrapper {
        gap: 3rem;
    }
}

/* Category Section - matches space-y-3 md:space-y-4 */
.encyclopedia-category {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

@media (min-width: 768px) {
    .encyclopedia-category {
        gap: 1rem;
    }
}

.encyclopedia-category {
    transition: opacity 0.15s ease-in-out;
}

/* Category Header - matches flex items-center gap-3 mb-3 */
.encyclopedia-category__header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}

/* Category Icon - matches w-10 h-10 md:w-12 md:h-12 */
.encyclopedia-category__icon {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    border: 2px solid var(--color-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background-color: transparent;
}

@media (min-width: 768px) {
    .encyclopedia-category__icon {
        width: 3rem;
        height: 3rem;
    }
}

.encyclopedia-category__icon svg {
    width: 1.25rem;
    height: 1.25rem;
    color: var(--color-primary);
}

@media (min-width: 768px) {
    .encyclopedia-category__icon svg {
        width: 1.5rem;
        height: 1.5rem;
    }
}

.encyclopedia-category__header h2 {
    margin: 0;
}

/* Archive Link - matches inline-flex items-center gap-1 text-sm md:text-base text-primary */
.encyclopedia-category__archive {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    color: var(--color-primary);
    text-decoration: none;
    font-size: 0.875rem;
    /* Button reset for when used as <button> */
    background: none;
    border: none;
    padding: 0;
    font-family: inherit;
    cursor: pointer;
    transition: all 0.2s;
    width: auto; /* Prevent stretching */
}

@media (min-width: 768px) {
    .encyclopedia-category__archive {
        font-size: 1rem;
    }
}

.encyclopedia-category__archive:hover {
    text-decoration: underline;
}

/* Archive Icon - matches w-3 h-3 md:w-4 md:h-4 group-hover:translate-x-1 */
.encyclopedia-category__archive-icon {
    width: 0.75rem;
    height: 0.75rem;
    transition: transform 0.2s;
}

@media (min-width: 768px) {
    .encyclopedia-category__archive-icon {
        width: 1rem;
        height: 1rem;
    }
}

.encyclopedia-category__archive:hover .encyclopedia-category__archive-icon {
    transform: translateX(0.25rem);
}

/* Meta - matches flex items-center gap-3 flex-wrap */
.encyclopedia-category__meta {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

/* Badge - matches px-3 py-1 rounded-full bg-background border border-border */
.encyclopedia-category__badge {
    padding: 0.25rem 0.75rem;
    border-radius: 9999px;
    background-color: var(--color-background);
    border: 1px solid var(--color-border);
}

.encyclopedia-category__badge span {
    font-size: 1rem;
    line-height: 1.6;
}

/* Articles - matches space-y-2 md:space-y-3 */
.encyclopedia-articles {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

@media (min-width: 768px) {
    .encyclopedia-articles {
        gap: 0.75rem;
    }
}

/* Article Card - matches Card p-3 md:p-4 bg-step-card border border-border shadow-none */
.encyclopedia-article {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem;
    background-color: var(--color-step-card);
    border: 1px solid var(--color-border);
    border-radius: 0.75rem;
    box-shadow: none;
    transition: all 0.2s;
    cursor: pointer;
    text-decoration: none;
    color: inherit;
    width: 100%;
    box-sizing: border-box;
}

@media (min-width: 768px) {
    .encyclopedia-article {
        gap: 1rem;
        padding: 1rem;
    }
}

.encyclopedia-article:hover,
.encyclopedia-article:focus-visible {
    border-color: var(--color-primary);
}

.encyclopedia-article:focus-visible {
    outline: 2px solid var(--color-ring);
    outline-offset: 2px;
}

.encyclopedia-article__content {
    flex: 1;
    min-width: 0;
}

.encyclopedia-article__content h4,
.encyclopedia-article__title {
    margin: 0;
    font-size: 1.125rem;
    line-height: 1.5;
    font-family: var(--font-serif);
    font-weight: 400;
}

/* Arrow - matches w-5 h-5 text-muted-foreground group-hover:text-primary group-hover:translate-x-1 */
.encyclopedia-article__arrow {
    flex-shrink: 0;
    color: var(--color-muted-foreground);
    transition: all 0.2s;
}

.encyclopedia-article__arrow svg {
    width: 1.25rem;
    height: 1.25rem;
}

.encyclopedia-article:hover .encyclopedia-article__arrow,
.encyclopedia-article:focus-visible .encyclopedia-article__arrow {
    color: var(--color-primary);
    transform: translateX(0.25rem);
}

/* Empty State - matches text-center py-12 */
.encyclopedia-empty {
    text-align: center;
    padding-top: 3rem;
    padding-bottom: 3rem;
}

.encyclopedia-empty p {
    margin: 0;
}

/* Pagination */
.encyclopedia-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
    margin-top: 3rem;
    padding-top: 2rem;
    flex-wrap: wrap;
}

.encyclopedia-pagination__link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.5rem;
    height: 2.5rem;
    padding: 0 0.75rem;
    border-radius: 0.5rem;
    background-color: var(--color-card);
    border: 1px solid var(--color-border);
    color: var(--color-foreground);
    font-size: 0.875rem;
    font-weight: 500;
    text-decoration: none;
    transition: all 0.15s ease;
    font-size: 0.9375rem;
    text-decoration: none;
    transition: all 0.2s ease;
}

.encyclopedia-pagination__link:hover {
    border-color: var(--color-primary);
    color: var(--color-primary);
    background-color: rgba(176, 91, 54, 0.05);
}

.encyclopedia-pagination__link:focus-visible {
    outline: 2px solid var(--color-ring);
    outline-offset: 2px;
}

.encyclopedia-pagination__link.encyclopedia-pagination__current {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
    color: #FEF9EF;
    pointer-events: none;
}

.encyclopedia-pagination__link.encyclopedia-pagination__current:hover {
    background-color: var(--color-primary);
    color: #FEF9EF;
}

.encyclopedia-pagination__prev,
.encyclopedia-pagination__next {
    gap: 0.375rem;
    font-weight: 500;
}

.encyclopedia-pagination__prev svg,
.encyclopedia-pagination__next svg {
    width: 1rem;
    height: 1rem;
}

.encyclopedia-pagination__dots {
    color: var(--color-muted-foreground);
    padding: 0 0.25rem;
    font-weight: 400;
}

@media (max-width: 640px) {
    .encyclopedia-pagination {
        gap: 0.375rem;
    }
    
    .encyclopedia-pagination__link {
        min-width: 2.25rem;
        height: 2.25rem;
        font-size: 0.875rem;
        padding: 0 0.5rem;
    }

    .encyclopedia-pagination__link:not(.encyclopedia-pagination__prev):not(.encyclopedia-pagination__next):not(.encyclopedia-pagination__current) {
        display: none;
    }
    
    .encyclopedia-pagination__prev,
    .encyclopedia-pagination__next {
        padding: 0 0.625rem;
    }
}

/* ============================================
   SIDEBAR & WIDGETS STYLING
   ============================================ */

/* Sidebar Container */
.sidebar,
#secondary {
    padding: 0;
}

/* Widget Base Styles */
.widget {
    background-color: var(--color-card);
    border: 1px solid var(--color-border);
    border-radius: 0.75rem;
    padding: 1.5rem;
    margin-bottom: 2rem;
}

.widget:last-child {
    margin-bottom: 0;
}

/* Widget Titles */
.widget-title,
.widget .widgettitle {
    font-family: var(--font-heading);
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--color-foreground);
    margin-bottom: 1rem;
    padding-bottom: 0.75rem;
    border-bottom: 2px solid var(--color-border);
}

/* Widget Lists */
.widget ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.widget ul li {
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--color-border);
}

.widget ul li:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.widget ul li:first-child {
    padding-top: 0;
}

.widget ul li a {
    color: var(--color-foreground);
    text-decoration: none;
    transition: color 0.2s ease;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.widget ul li a:hover {
    color: var(--color-primary);
}

/* Widget Post Count */
.widget ul li .count,
.widget ul li .post-count {
    background-color: var(--color-muted);
    color: var(--color-muted-foreground);
    font-size: 0.75rem;
    padding: 0.125rem 0.5rem;
    border-radius: 1rem;
    margin-left: 0.5rem;
}

/* Search Widget */
.widget_search .search-form {
    position: relative;
    display: flex;
    gap: 0.5rem;
}

.widget_search .search-field {
    flex: 1;
    padding: 0.75rem 1rem;
    border: 1px solid var(--color-border);
    border-radius: 0.5rem;
    font-size: 0.875rem;
    background-color: var(--color-input-background);
    color: var(--color-foreground);
    transition: border-color 0.2s ease;
}

.widget_search .search-field:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(176, 91, 54, 0.1);
}

.widget_search .search-submit {
    padding: 0.75rem 1.5rem;
    background-color: var(--color-primary);
    color: var(--color-primary-foreground);
    border: none;
    border-radius: 0.5rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.widget_search .search-submit:hover {
    background-color: var(--color-foreground);
    transform: translateY(-2px);
}

/* Categories Widget */
.widget_categories select,
.widget_archive select {
    width: 100%;
    padding: 0.75rem 1rem;
    border: 1px solid var(--color-border);
    border-radius: 0.5rem;
    background-color: var(--color-input-background);
    color: var(--color-foreground);
    font-size: 0.875rem;
    cursor: pointer;
}

/* Recent Posts Widget */
.widget_recent_entries ul li {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.widget_recent_entries .post-date {
    font-size: 0.75rem;
    color: var(--color-muted-foreground);
}

/* Tag Cloud Widget */
.widget_tag_cloud .tagcloud,
.wp-block-tag-cloud {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.widget_tag_cloud .tagcloud a,
.wp-block-tag-cloud a {
    display: inline-block;
    padding: 0.375rem 0.75rem;
    background-color: var(--color-muted);
    color: var(--color-foreground);
    border-radius: 0.375rem;
    font-size: 0.875rem !important;
    text-decoration: none;
    transition: all 0.2s ease;
}

.widget_tag_cloud .tagcloud a:hover,
.wp-block-tag-cloud a:hover {
    background-color: var(--color-primary);
    color: var(--color-primary-foreground);
    transform: translateY(-2px);
}

/* Calendar Widget */
.widget_calendar table {
    width: 100%;
    border-collapse: collapse;
}

.widget_calendar caption {
    font-weight: 600;
    margin-bottom: 0.5rem;
    color: var(--color-foreground);
}

.widget_calendar th,
.widget_calendar td {
    padding: 0.5rem;
    text-align: center;
    border: 1px solid var(--color-border);
}

.widget_calendar th {
    background-color: var(--color-muted);
    font-weight: 600;
    font-size: 0.75rem;
}

.widget_calendar td a {
    color: var(--color-primary);
    font-weight: 600;
    text-decoration: none;
}

.widget_calendar td a:hover {
    text-decoration: underline;
}

/* ============================================
   Birth Chart Mobile Responsive Styles
   ============================================ */

/* Birth chart container */
#birthChartResult {
    padding-left: 1rem;
    padding-right: 1rem;
}

/* Chart content wrapper - Prepared for JavaScript wrapper scaling */
#chartContent {
    width: 100%;
    overflow-x: hidden; /* Only prevent horizontal scroll */
    overflow-y: visible; /* Allow full height */
}

/* Responsive wrapper styles (created by JavaScript) */
#laso-wrapper-responsive {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden; /* Only prevent horizontal scroll */
    overflow-y: visible; /* Allow full height to show */
    position: relative;
    margin: 0 auto;
}

#laso-wrapper-responsive .chart-container {
    /* JavaScript will apply transform and width dynamically */
}

/* Base table styles */
#chartContent table {
    margin: 0 auto;
}

/* Birth Chart Page - Mobile-First Responsive */
/* Mobile default styles */
body.page-template-page-birth-chart #birthChartResult {
    padding: 0;
    overflow-x: hidden;
    overflow-y: visible;
    margin-top: 0;
    max-width: 100vw;
}

body.page-template-page-birth-chart #birthChartResult .container {
    padding: 0;
    max-width: 100%;
}

body.page-template-page-birth-chart #birthChartResult > .container > div[style] {
    overflow-x: hidden;
    overflow-y: visible;
    padding: 0;
    min-width: auto !important;
    width: 100%;
    max-width: 100vw;
}

body.page-template-page-birth-chart #chartContent {
    overflow-x: hidden;
    overflow-y: visible;
    width: 100%;
    min-width: auto !important;
    max-width: 100vw;
    display: flex;
    justify-content: center;
    align-items: flex-start;
}

body.page-template-page-birth-chart #birthChartResult .section__title {
    font-size: 1.5rem;
    margin-bottom: 1.5rem;
    padding: 0 1rem;
    overflow-wrap: break-word;
    word-wrap: break-word;
    hyphens: auto;
}

body.page-template-page-birth-chart #birthChartResult > .container > div[style*="max-width: 52rem"] {
    margin-top: 1rem;
}

body.page-template-page-birth-chart,
body.page-template-page-birth-chart .site,
body.page-template-page-birth-chart .site-main,
body.page-template-page-birth-chart .section {
    overflow-x: hidden;
    max-width: 100vw;
}

/* Remove gap between header and hero on birth chart page */
/* Let JS handle body padding for header, but pull hero up behind header */
body.page-template-page-birth-chart .site-main {
    padding-top: 0;
    margin-top: 0;
}

body.page-template-page-birth-chart .hero {
    /* Pull hero up behind the fixed header + banner */
    margin-top: calc(-1 * var(--header-total-height, 5rem));
    padding-top: 0;
}

body.page-template-page-birth-chart .hero__content {
    /* Account for negative margin - add padding to content */
    padding-top: calc(var(--header-total-height, 5rem) + 2rem);
}

@media (min-width: 769px) {
    body.page-template-page-birth-chart .hero__content {
        padding-top: calc(var(--header-total-height, 5rem) + 3rem);
    }
}

body.page-template-page-birth-chart #birthChartResult,
body.page-template-page-birth-chart #chartContent,
body.page-template-page-birth-chart #chartContent > * {
    max-width: 100vw;
    overflow-x: hidden;
}

body.page-template-page-birth-chart h3 {
    font-size: 1.125rem;
}

/* Tablet (768px+) */
@media (min-width: 768px) {
    body.page-template-page-birth-chart #birthChartResult .container {
        padding: 0 1rem;
    }
    
    body.page-template-page-birth-chart #birthChartResult > .container > div[style*="max-width: 52rem"] {
        margin-top: 2rem;
    }
    
    body.page-template-page-birth-chart #birthChartResult .section__title {
        font-size: 2rem;
    }
    
    body.page-template-page-birth-chart h3 {
        font-size: 1.5rem;
    }
}

/* Desktop (1024px+) */
@media (min-width: 1024px) {
    body.page-template-page-birth-chart #birthChartResult .container {
        max-width: 100%;
        padding: 0 2rem;
    }
}

/* ============================================
   TỬ VI 2026 PAGE - CUSTOM STYLES
   ============================================ */

/* Utility Classes for Tử Vi 2026 Page */
.whitespace-nowrap { white-space: nowrap; }
.mx-auto { margin-left: auto; margin-right: auto; }
.max-w-2xl { max-width: 42rem; }
.bg-card { background-color: var(--color-card); }
.border-foreground\/20 { border-color: rgba(42, 43, 47, 0.2); }
.shadow-md { box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); }

/* Sticky CTA Button (Mobile): p-4 */
.sticky-cta {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 40;
    padding: 1rem; /* p-4 */
    background-color: rgba(254, 249, 239, 0.95);
    backdrop-filter: blur(12px);
    border-top: 1px solid rgba(42, 43, 47, 0.2);
}

/* Hide sticky CTA on tablet+ */
@media (min-width: 768px) {
    .sticky-cta {
        display: none;
    }
}

/* Space-Y utilities - space-y-3 md:space-y-4 pattern */
.space-y-3 > * + * { margin-top: 0.75rem; }
.space-y-4 > * + * { margin-top: 1rem; }
.space-y-6 > * + * { margin-top: 1.5rem; }
.space-y-8 > * + * { margin-top: 2rem; }

@media (min-width: 768px) {
    .space-y-3 > * + * { margin-top: 1rem; } /* space-y-3 md:space-y-4 */
}
.grid { display: grid; }
.grid-cols-2 { display: grid; grid-template-columns: repeat(2, 1fr); }

/* Grid gaps: gap-4 md:gap-6 lg:gap-8 */
.gap-4 { gap: 1rem; }
.gap-6 { gap: 1.5rem; }
.gap-8 { gap: 2rem; }

/* Responsive grid gaps */
.gap-responsive {
    gap: 1rem; /* gap-4 mobile */
}

@media (min-width: 768px) {
    .gap-responsive {
        gap: 1.5rem; /* gap-6 tablet */
    }
}

@media (min-width: 1024px) {
    .gap-responsive {
        gap: 2rem; /* gap-8 desktop */
    }
}
.w-full { width: 100%; }
.px-4 { padding-left: 1rem; padding-right: 1rem; }
.py-3 { padding-top: 0.75rem; padding-bottom: 0.75rem; }
.px-6 { padding-left: 1.5rem; padding-right: 1.5rem; }
.py-4 { padding-top: 1rem; padding-bottom: 1rem; }
.px-8 { padding-left: 2rem; padding-right: 2rem; }
.pt-32 { padding-top: 8rem; }
.pb-16 { padding-bottom: 4rem; }
.py-12 { padding-top: 3rem; padding-bottom: 3rem; }
.py-16 { padding-top: 4rem; padding-bottom: 4rem; }
.py-20 { padding-top: 5rem; padding-bottom: 5rem; }

/* 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-6 { margin-bottom: 1.5rem; }
.mb-8 { margin-bottom: 2rem; }
.mb-12 { margin-bottom: 3rem; }
.mt-2 { margin-top: 0.5rem; }
.mt-4 { margin-top: 1rem; }
.mt-12 { margin-top: 3rem; }
.pr-4 { padding-right: 1rem; }

/* Responsive utilities */
@media (min-width: 768px) {
    .md\:px-6 { padding-left: 1.5rem; padding-right: 1.5rem; }
    .md\:py-20 { padding-top: 5rem; padding-bottom: 5rem; }
}
.rounded-lg { border-radius: 0.75rem; }
.focus\:outline-none:focus { outline: none; }
.focus\:border-primary:focus { border-color: var(--color-primary); }
.focus\:ring-2:focus { box-shadow: 0 0 0 2px rgba(176, 91, 54, 0.2); }
.focus\:ring-primary\/20:focus { box-shadow: 0 0 0 2px rgba(176, 91, 54, 0.2); }
.uppercase { text-transform: uppercase; }
.tracking-wide { letter-spacing: 0.025em; }
.bg-primary { background-color: var(--color-primary); }
.bg-step-card { background-color: var(--color-step-card); }
.bg-card { background-color: var(--color-card); }
.bg-background { background-color: var(--color-background); }
.text-primary-foreground { color: var(--color-primary-foreground); }
.hover\:shadow-lg:hover { box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); }
.hover\:scale-105:hover { transform: scale(1.05); }
.transition-all { transition: all 0.2s ease; }
.text-xs { font-size: 0.75rem; }
.text-sm { font-size: 0.875rem; }
.text-lg { font-size: 1.125rem; }
.text-foreground { color: var(--color-foreground); }
.text-muted-foreground { color: var(--color-muted-foreground); }
.w-4 { width: 1rem; }
.h-4 { height: 1rem; }
.cursor-pointer { cursor: pointer; }

/* Badge Component */
.badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem 1rem;
    font-size: 0.75rem;
    font-weight: 600;
    border-radius: 0.375rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.badge--outline {
    background: transparent;
    border: 1px solid var(--color-border);
    color: var(--color-foreground);
}

/* Scrolling Text with Dots */
.scroll-item-with-dot {
    position: relative;
    padding-right: 2rem;
}

.scroll-item-with-dot::after {
    content: '•';
    position: absolute;
    right: 0.75rem;
    color: var(--color-primary);
    font-size: 1.25rem;
}

/* Zodiac Grid */
.zodiac-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0;
}

@media (min-width: 768px) {
    .zodiac-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (min-width: 1024px) {
    .zodiac-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

.zodiac-card {
    padding: 1.25rem 1rem;
    border-right: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
    transition: background-color 0.2s ease;
    cursor: pointer;
}

@media (min-width: 768px) {
    .zodiac-card {
    padding: 2rem;
}
}

/* Remove right border on last column */
.zodiac-card:nth-child(2n) {
    border-right: none;
}

@media (min-width: 768px) {
    .zodiac-card:nth-child(2n) {
        border-right: 1px solid var(--color-border);
    }
    .zodiac-card:nth-child(3n) {
        border-right: none;
    }
}

@media (min-width: 1024px) {
    .zodiac-card:nth-child(3n) {
        border-right: 1px solid var(--color-border);
    }
    .zodiac-card:nth-child(4n) {
        border-right: none;
    }
}

/* Remove bottom border on last row */
.zodiac-card:nth-last-child(-n+2) {
    border-bottom: none;
}

@media (min-width: 768px) {
    .zodiac-card:nth-last-child(-n+2) {
        border-bottom: 1px solid var(--color-border);
    }
    .zodiac-card:nth-last-child(-n+3) {
        border-bottom: none;
    }
}

@media (min-width: 1024px) {
    .zodiac-card:nth-last-child(-n+3) {
        border-bottom: 1px solid var(--color-border);
    }
    .zodiac-card:nth-last-child(-n+4) {
        border-bottom: none;
    }
}

.zodiac-card:hover {
    background-color: rgba(245, 238, 226, 0.3);
}

.zodiac-card__content {
    text-align: center;
}

.zodiac-card__title {
    margin-bottom: 0.25rem;
    font-size: 1rem;
}

@media (min-width: 768px) {
    .zodiac-card__title {
        margin-bottom: 0.5rem;
        font-size: inherit;
    }
}

.zodiac-card__years {
    font-size: 0.75rem;
    color: var(--color-foreground);
    margin-bottom: 0.5rem;
}

@media (min-width: 768px) {
    .zodiac-card__years {
    font-size: 0.875rem;
        margin-bottom: 0.75rem;
    }
}

.zodiac-card__badge-wrapper {
    margin-bottom: 0.75rem;
}

@media (min-width: 768px) {
    .zodiac-card__badge-wrapper {
        margin-bottom: 1rem;
    }
}

.zodiac-badge {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    border-radius: 9999px;
    font-size: 0.875rem;
    font-weight: 500;
}

.bg-rating-good {
    background-color: #A7F3D0;
    color: var(--color-foreground);
}

.bg-rating-bad {
    background-color: #FCA5A5;
    color: var(--color-background);
}

.zodiac-card__link {
    color: var(--color-primary);
    font-size: 0.875rem;
    font-weight: 500;
    text-decoration: none;
}

.zodiac-card__link:hover {
    text-decoration: underline;
}

/* Table Card */
/* Table Card: p-4 md:p-6 lg:p-8 */
.table-card {
    background-color: var(--color-step-card);
    border-radius: 0.75rem;
    padding: 1rem; /* p-4 mobile */
}

@media (min-width: 768px) {
    .table-card {
        padding: 1.5rem; /* p-6 tablet */
    }
}

@media (min-width: 1024px) {
    .table-card {
        padding: 2rem; /* p-8 desktop */
    }
}

.table-card__title {
    margin-bottom: 1rem;
    font-size: 1rem;
    line-height: 1.3;
}

@media (min-width: 768px) {
    .table-card__title {
        margin-bottom: 1.5rem;
        font-size: 1.25rem;
    }
}

.table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* Desktop: Standard table layout */
.data-table {
    width: 100%;
    border-collapse: collapse;
}

.data-table thead th {
    padding: 0.75rem 1rem;
    text-align: left;
    font-weight: 600;
    color: var(--color-foreground);
    font-size: 0.875rem;
    white-space: nowrap;
}

.data-table tbody td {
    padding: 1rem;
    color: var(--color-muted-foreground);
    border-bottom: 1px solid var(--color-border);
    font-size: 0.875rem;
}

.data-table tbody tr:last-child td {
    border-bottom: none;
}

/* Data Table - Mobile-First (use card layout on mobile, table on desktop) */
/* Mobile: Cards are shown via .table-mobile-cards, tables hidden via .table-desktop */
/* See .table-mobile-cards section for mobile card styles */

/* Desktop table enhancements */
@media (min-width: 768px) {
    .data-table thead th {
        padding: 0.75rem 1rem;
        font-size: 0.875rem;
    }
    
    .data-table tbody td {
        padding: 0.75rem 1rem;
        font-size: 0.875rem;
    }
}

/* Mobile Card Layout for Tables */
.table-mobile-cards {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.table-desktop {
    display: none;
}

@media (min-width: 768px) {
    .table-mobile-cards {
        display: none;
    }
    
    .table-desktop {
        display: block;
    }
}

.table-mobile-card {
    background: var(--color-card);
    border: 1px solid rgba(42, 43, 47, 0.1);
    border-radius: var(--radius-lg);
    padding: 1rem;
}

.table-mobile-card__header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.table-mobile-card__title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-foreground);
    margin: 0;
}

.table-mobile-card__meta {
    font-size: 0.875rem;
    color: var(--color-muted-foreground);
    margin-bottom: 0.5rem;
}

.table-mobile-card__note {
    font-size: 0.875rem;
    color: var(--color-foreground);
    margin: 0;
}

/* Status/Severity Badges: px-3 py-1 consistent */
.severity-badge {
    display: inline-block;
    padding: 0.25rem 0.75rem; /* py-1 px-3 */
    border-radius: 9999px;
    font-size: 0.875rem; /* text-sm - 14px minimum */
    white-space: nowrap;
}

.severity-badge--severe {
    background-color: #FEE2E2;
    color: #991B1B;
}

.severity-badge--medium {
    background-color: #FED7AA;
    color: #9A3412;
}

.severity-badge--mild {
    background-color: #FEF3C7;
    color: #92400E;
}

/* Feature List */
.feature-list {
    list-style: none;
    padding: 0;
}

.feature-list__item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
    color: var(--color-muted-foreground);
}

/* Bullet points: w-2 h-2 md:w-2.5 md:h-2.5 */
.feature-list__dot {
    width: 0.5rem;  /* 8px - w-2 mobile */
    height: 0.5rem; /* 8px - h-2 mobile */
    background-color: var(--color-primary);
    border-radius: 50%;
    flex-shrink: 0;
}

@media (min-width: 768px) {
    .feature-list__dot {
        width: 0.625rem;  /* 10px - w-2.5 */
        height: 0.625rem; /* 10px - h-2.5 */
    }
}

/* CTA Card Inline */
.cta-card-inline {
    background-color: var(--color-card);
    border-radius: 0.75rem;
    padding: 1.5rem;
    display: block;
    text-align: center;
}

@media (min-width: 768px) {
    .cta-card-inline {
        padding: 2rem;
    display: inline-block;
    }
}

.cta-card-inline__title {
    font-size: 1rem;
    margin-bottom: 1.25rem;
    color: var(--color-foreground);
    line-height: 1.5;
}

@media (min-width: 768px) {
    .cta-card-inline__title {
        font-size: 1.125rem;
        margin-bottom: 1.5rem;
    }
}

/* Feng Shui Cards */
.feng-shui-card {
    text-align: center;
    padding: 1.5rem;
    background-color: var(--color-step-card);
    border-radius: 0.75rem;
    box-shadow: none;
    border: 1px solid var(--color-border);
}

@media (min-width: 768px) {
    .feng-shui-card {
        padding: 2rem;
        border-radius: 1rem;
        border: none;
    }
}

.feng-shui-card__header {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 1rem;
}

.feng-shui-card__icon {
    width: 1.5rem;
    height: 1.5rem;
    color: var(--color-primary);
    margin-bottom: 0.75rem;
}

.feng-shui-card__title {
    margin-bottom: 0;
    color: var(--color-foreground);
}

.feng-shui-card__content {
    color: var(--color-foreground);
}

.feng-shui-section {
    margin-bottom: 0.75rem;
}

.feng-shui-section:last-child {
    margin-bottom: 0;
}

/* Color Tags */
.color-tags {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
}

.color-tag {
    padding: 0.25rem 0.75rem;
    border-radius: 9999px;
    font-size: 0.875rem;
}

.color-tag--blue {
    background-color: #DBEAFE;
    color: #1E40AF;
}

.color-tag--black {
    background-color: #1F2937;
    color: #FFFFFF;
}

.color-tag--white {
    background-color: #F3F4F6;
    color: #1F2937;
}

.color-tag--gray {
    background-color: #D1D5DB;
    color: #1F2937;
}

.color-tag--yellow {
    background-color: #FEF3C7;
    color: #92400E;
}

.color-tag--brown {
    background-color: #FED7AA;
    color: #92400E;
}

.color-tag--avoid {
    text-decoration: line-through;
    opacity: 0.6;
}

/* Feng Shui Note */
.feng-shui-note {
    background-color: rgba(176, 91, 54, 0.1);
    padding: 1rem;
    border-radius: 0.5rem;
    border: 1px solid rgba(176, 91, 54, 0.2);
    margin-top: 1rem;
}

/* Tử Vi 2026 Hero Section - Legacy styles kept for backwards compatibility */
/* Now uses .custom-page-section and .custom-page__title unified styles */
.tuvi-hero {
    padding: 1rem 1rem 3rem;
}

@media (min-width: 768px) {
    .tuvi-hero {
        padding: 2rem 1.5rem 4rem;
    }
}

@media (min-width: 1024px) {
    .tuvi-hero {
        padding: 3rem 1.5rem 5rem;
    }
}

.tuvi-hero__header {
    text-align: center;
    margin-bottom: 2rem;
}

@media (min-width: 768px) {
    .tuvi-hero__header {
        margin-bottom: 3rem;
    }
}

/* Legacy title styles - use .custom-page__title for consistency */
.tuvi-hero__title {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
    line-height: 1.2;
    font-size: 2rem;
    font-family: var(--font-serif);
    font-weight: 500;
    margin-bottom: 1.5rem;
}

@media (min-width: 481px) {
    .tuvi-hero__title {
        font-size: 2.25rem;
    }
}

@media (min-width: 768px) {
    .tuvi-hero__title {
        font-size: 3rem;
    }
}

@media (min-width: 1024px) {
    .tuvi-hero__title {
        font-size: 3.5rem;
    }
}

.tuvi-hero__subtitle {
    font-size: 1rem;
    color: var(--color-foreground);
    margin-bottom: 1.5rem;
}

@media (min-width: 768px) {
    .tuvi-hero__subtitle {
        font-size: 1.125rem;
    }
}

/* Philosophy Section */
.philosophy-section {
    padding: 2.5rem 1rem;
    background-color: var(--color-step-card);
}

@media (min-width: 768px) {
    .philosophy-section {
        padding: 5rem 1.5rem;
    }
}

.philosophy-card {
    max-width: 72rem;
    margin-left: auto;
    margin-right: auto;
}

.philosophy-card__inner {
    position: relative;
    overflow: hidden;
    border: none;
    box-shadow: none;
    border-radius: 0.75rem;
    background-color: #FEF9EF;
    padding: 1.5rem;
}

@media (min-width: 768px) {
    .philosophy-card__inner {
        padding: 3rem;
    }
}

@media (min-width: 1024px) {
    .philosophy-card__inner {
        padding: 4rem;
    }
}

.philosophy-text {
    color: var(--color-foreground);
    max-width: 48rem;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.6;
    font-size: 0.9375rem;
}

@media (min-width: 768px) {
    .philosophy-text {
        line-height: 1.75;
        font-size: 1rem;
    }
}

.philosophy-cta-wrapper {
    margin-bottom: 2.5rem;
}

@media (min-width: 768px) {
    .philosophy-cta-wrapper {
        margin-bottom: 4rem;
    }
}

/* CTA buttons in philosophy section */
.bc-cta-buttons {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    align-items: center;
    margin-bottom: 1rem;
}

@media (min-width: 768px) {
    .bc-cta-buttons {
        flex-direction: row;
        justify-content: center;
        gap: 1.5rem;
    }
}

.bc-cta-buttons .btn {
    min-width: 280px;
}

@media (min-width: 768px) {
    .bc-cta-buttons .btn {
        min-width: 200px;
    }
}

.philosophy-cta-title {
    font-size: 1rem;
    margin-bottom: 1.25rem;
    font-weight: 500;
    line-height: 1.5;
}

@media (min-width: 768px) {
    .philosophy-cta-title {
        font-size: 1.25rem;
        margin-bottom: 1.5rem;
    }
}

.philosophy-cta-note {
    font-size: 0.875rem;
    color: var(--color-muted-foreground);
    margin-top: 1rem;
}

.philosophy-image {
    margin-bottom: 0;
    border-radius: 0.5rem;
    overflow: hidden;
}

@media (min-width: 768px) {
    .philosophy-image {
        margin-bottom: 0;
        border-radius: 1rem;
    }
}

.philosophy-image img {
    width: 100%;
    height: 250px;
    object-fit: cover;
}

@media (min-width: 768px) {
    .philosophy-image img {
        height: 400px;
    }
}

@media (min-width: 1024px) {
    .philosophy-image img {
        height: 500px;
    }
}

.btn--full {
    width: 100%;
    justify-content: center;
}

/* Scroll to Form Behavior */
.scroll-to-form {
    scroll-behavior: smooth;
}

/* Grid Utility */
.md\:grid-cols-2 {
    display: grid;
    grid-template-columns: 1fr;
}

@media (min-width: 768px) {
    .md\:grid-cols-2 {
        grid-template-columns: repeat(2, 1fr);
    }
}

.md\:grid-cols-3 {
    display: grid;
    grid-template-columns: 1fr;
}

@media (min-width: 768px) {
    .md\:grid-cols-3 {
        grid-template-columns: repeat(3, 1fr);
    }
}

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

@media (min-width: 768px) {
    .md\:gap-8 {
        gap: 2rem;
    }
}

/* Responsive Typography for Tử Vi Page */
.md\:mb-12 {
    margin-bottom: 2rem;
}

@media (min-width: 768px) {
    .md\:mb-12 {
        margin-bottom: 3rem;
    }
}

/* End of Tử Vi 2026 Custom Styles */

/* ============================================
   PAGE TEMPLATE STYLES
   Replacing inline styles from PHP templates
   ============================================ */

/* Generic Page Template (page.php) */
.page-section {
    padding-top: 8rem;
}

.page-container {
    max-width: 1024px;
}

.entry-header--centered {
    margin-bottom: 2rem;
    text-align: center;
}

.entry-title--page {
    font-family: var(--font-heading);
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--color-foreground);
}

.entry-content--page {
    color: var(--color-foreground);
    line-height: 1.75;
}

/* ============================================
   CUSTOM PAGES - Unified Styling
   Consistent page title, padding, and container
   for: Birth Chart, Tử Vi 2026, Encyclopedia
   ============================================ */

/* Section - Consistent padding across all custom pages */
.custom-page-section {
    padding-top: 1rem;
    padding-bottom: 3rem;
    background-color: var(--color-background);
}

@media (min-width: 768px) {
    .custom-page-section {
        padding-top: 2rem;
        padding-bottom: 4rem;
    }
}

@media (min-width: 1024px) {
    .custom-page-section {
        padding-top: 3rem;
        padding-bottom: 5rem;
    }
}

/* Container - Default narrow (for forms) */
.custom-page-container {
    max-width: 42rem;
    margin-left: auto;
    margin-right: auto;
}

/* Container - Wide variant (for encyclopedia, content pages) */
.custom-page-container--wide {
    max-width: 1280px;
    margin-left: auto;
    margin-right: auto;
}

/* Page Title - Unified styling matching Encyclopedia */
.custom-page__title {
    font-family: var(--font-serif);
    font-weight: 500;
    line-height: 1.2;
    font-size: 2rem;
    margin-bottom: 1.5rem;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
    text-align: center;
}

@media (min-width: 481px) {
    .custom-page__title {
        font-size: 2.25rem;
    }
}

@media (min-width: 768px) {
    .custom-page__title {
        font-size: 3rem;
    }
}

@media (min-width: 1024px) {
    .custom-page__title {
        font-size: 3.5rem;
    }
}

/* Legacy support - map old classes to new unified system */
.birth-chart-section {
    padding-top: 1rem;
    padding-bottom: 3rem;
}

@media (min-width: 768px) {
    .birth-chart-section {
        padding-top: 2rem;
        padding-bottom: 4rem;
    }
}

@media (min-width: 1024px) {
    .birth-chart-section {
        padding-top: 3rem;
        padding-bottom: 5rem;
    }
}

.birth-chart-container {
    max-width: 42rem;
}

/* Tử Vi 2026 Page - Container Variants (legacy) */
.tuvi-container--narrow {
    max-width: 42rem;
    margin-left: auto;
    margin-right: auto;
}

.tuvi-container--wide {
    max-width: 1400px;
}

/* Form Placeholder (when FluentForm not configured) */
.form-placeholder {
    text-align: center;
    padding: 3rem 2rem;
    background: var(--color-muted);
    border-radius: 0.5rem;
    border: 2px dashed var(--color-border);
}

.form-placeholder__icon {
    margin: 0 auto 1rem;
    opacity: 0.5;
}

.form-placeholder__title {
    font-size: 1rem;
    font-weight: 500;
    margin-bottom: 0.5rem;
    color: var(--color-foreground);
}

.form-placeholder__description {
    font-size: 0.875rem;
    color: var(--color-muted-foreground);
    margin-bottom: 1rem;
}

.form-placeholder__hint {
    font-size: 0.75rem;
    color: var(--color-primary);
    background: rgba(176, 91, 54, 0.1);
    padding: 0.75rem 1rem;
    border-radius: 0.375rem;
    display: inline-block;
}

/* Section Header Spacing Variants */
.section__header--lg {
    margin-bottom: 3rem;
}

/* ============================================
   BIRTH CHART PAGE - NEW DESIGN (v2.0)
   Matches React/TSX design exactly
   ============================================ */

/* ----------------------------------------
   BC HERO SECTION
   ---------------------------------------- */
.bc-hero {
    padding: 4rem 0;
}

@media (min-width: 640px) {
    .bc-hero {
        padding: 5rem 0;
    }
}

@media (min-width: 768px) {
    .bc-hero {
        padding: 7rem 0;
    }
}

@media (min-width: 1024px) {
    .bc-hero {
        padding: 9rem 0;
    }
}

.bc-hero__container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 1rem;
}

@media (min-width: 768px) {
    .bc-hero__container {
        padding: 0 1.5rem;
    }
}

@media (min-width: 1024px) {
    .bc-hero__container {
        padding: 0 2rem;
    }
}

.bc-hero__grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 2rem !important;
    align-items: center !important;
}

@media (min-width: 768px) {
    .bc-hero__grid {
        grid-template-columns: 55% 45% !important;
        gap: 2rem !important;
    }
}

@media (min-width: 1024px) {
    .bc-hero__grid {
        grid-template-columns: 60% 40% !important;
        gap: 3rem !important;
    }
}

.bc-hero__content {
    text-align: center;
}

@media (min-width: 768px) {
    .bc-hero__content {
        text-align: left;
    }
}

.bc-hero__title {
    font-family: var(--font-serif);
    font-weight: 500;
    font-size: 1.5rem;
    line-height: 1.2;
    margin-bottom: 1rem;
}

@media (min-width: 640px) {
    .bc-hero__title {
        font-size: 1.875rem;
    }
}

@media (min-width: 768px) {
    .bc-hero__title {
        font-size: 2.25rem;
        margin-bottom: 1.5rem;
    }
}

@media (min-width: 1024px) {
    .bc-hero__title {
        font-size: 3rem;
    }
}

.bc-hero__subtitle {
    font-size: 0.875rem;
    line-height: 1.6;
    color: var(--color-foreground);
    max-width: 42rem;
    margin: 0 auto 2rem;
}

@media (min-width: 768px) {
    .bc-hero__subtitle {
        font-size: 1rem;
        margin-bottom: 2.5rem;
    }
}

@media (min-width: 768px) {
    .bc-hero__subtitle {
        margin-left: 0;
        margin-right: 0;
    }
}

/* Trust Badges */
.bc-trust-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

@media (min-width: 768px) {
    .bc-trust-list {
        gap: 1rem;
    }
}

.bc-trust-item {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    justify-content: center;
}

@media (min-width: 768px) {
    .bc-trust-item {
        justify-content: flex-start;
    }
}

.bc-trust-item span {
    font-size: 0.875rem;
    color: var(--color-foreground);
    text-align: left;
}

@media (min-width: 768px) {
    .bc-trust-item span {
        font-size: 1rem;
    }
}

.bc-trust-icon {
    width: 1.25rem;
    height: 1.25rem;
    min-width: 1.25rem;
    max-width: 1.25rem;
    color: var(--color-primary);
    flex-shrink: 0;
    margin-top: 0.125rem;
}

@media (min-width: 768px) {
    .bc-trust-icon {
        width: 1.5rem;
        height: 1.5rem;
        min-width: 1.5rem;
        max-width: 1.5rem;
    }
}

/* Ensure all BC page SVGs have proper sizing */
.bc-hero svg,
.bc-section svg,
.bc-form-card svg {
    flex-shrink: 0;
}

/* Form Card */
.bc-hero__form-wrapper {
    width: 100%;
}

.bc-form-card {
    background-color: var(--color-card) !important;
    border: 1px solid var(--color-border) !important;
    border-radius: 0.75rem !important;
    padding: 1.5rem !important;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25) !important;
}

@media (min-width: 640px) {
    .bc-form-card {
        border-radius: 1rem;
        padding: 2rem;
    }
}

@media (min-width: 768px) {
    .bc-form-card {
        padding: 2.5rem;
    }
}

/* ----------------------------------------
   BC FORM STYLES
   ---------------------------------------- */
.bc-form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

@media (min-width: 768px) {
    .bc-form {
        gap: 1.25rem;
    }
}

.bc-form__group {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.bc-form__row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
}

@media (min-width: 768px) {
    .bc-form__row {
        gap: 1rem;
    }
}

.bc-form__label {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--color-foreground);
}

@media (min-width: 768px) {
    .bc-form__label {
        font-size: 1rem;
    }
}

.bc-form__input,
.bc-form__select {
    width: 100%;
    min-height: 3rem; /* 48px touch target */
    padding: 0.5rem 0.75rem;
    font-size: 1rem;
    font-family: var(--font-sans);
    color: var(--color-foreground);
    background-color: var(--color-step-card);
    border: 1px solid var(--color-border);
    border-radius: 0.5rem;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.bc-form__input:focus,
.bc-form__select:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(176, 91, 54, 0.1);
}

.bc-form__input::placeholder {
    color: var(--color-muted-foreground);
}

.bc-form__submit {
    margin-top: 0.5rem;
}

.bc-form__privacy {
    font-size: 0.875rem;
    color: var(--color-muted-foreground);
    text-align: center;
    margin-top: 1rem;
    margin-bottom: 0;
}

.bc-error {
    margin-top: 1rem;
    padding: 1rem;
    background-color: #fee2e2;
    border: 1px solid #fecaca;
    color: #991b1b;
    border-radius: 0.5rem;
}

/* ----------------------------------------
   BC SECTIONS
   ---------------------------------------- */
.bc-section {
    padding: 2rem 0;
}

@media (min-width: 768px) {
    .bc-section {
        padding: 3rem 0;
    }
}

@media (min-width: 1024px) {
    .bc-section {
        padding: 5rem 0;
    }
}

/* Ensure container inside bc-section has proper padding */
.bc-section > .container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 1rem;
}

@media (min-width: 768px) {
    .bc-section > .container {
        padding: 0 1.5rem;
    }
}

@media (min-width: 1024px) {
    .bc-section > .container {
        padding: 0 2rem;
    }
}

.bc-section--privacy {
    padding: 2rem 1rem;
}

@media (min-width: 768px) {
    .bc-section--privacy {
        padding: 3rem 1.5rem;
    }
}

@media (min-width: 1024px) {
    .bc-section--privacy {
        padding: 4rem 1.5rem;
    }
}

.bc-section--muted {
    background-color: var(--color-step-card);
}

.bc-section--testimonials {
    overflow: hidden;
}

.bc-section__cta {
    display: flex;
    justify-content: center;
    margin-top: 2rem;
}

@media (min-width: 768px) {
    .bc-section__cta {
        margin-top: 2.5rem;
    }
}

@media (min-width: 1024px) {
    .bc-section__cta {
        margin-top: 3rem;
    }
}

.bc-container--narrow {
    max-width: 80rem; /* Extended for 3-column cards */
    margin: 0 auto;
}

.bc-container--medium {
    max-width: 72rem;
    margin: 0 auto;
}

/* ----------------------------------------
   BC ALERT
   ---------------------------------------- */
.bc-alert {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 1rem;
    background-color: var(--color-step-card);
    border: 1px solid rgba(176, 91, 54, 0.2);
    border-radius: 0.5rem;
}

@media (min-width: 768px) {
    .bc-alert {
        border-radius: 0.75rem;
    }
}

.bc-alert__icon {
    width: 1.25rem;
    height: 1.25rem;
    color: var(--color-primary);
    flex-shrink: 0;
    margin-top: 0.125rem;
}

.bc-alert__text {
    font-size: 0.875rem;
    color: var(--color-foreground);
    margin: 0;
    line-height: 1.6;
}

@media (min-width: 768px) {
    .bc-alert__text {
        font-size: 1rem;
    }
}

/* ----------------------------------------
   BC COMPARISON GRID & FEATURE CARDS
   ---------------------------------------- */
.bc-comparison-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
    margin-bottom: 2rem !important;
}

@media (min-width: 768px) {
    .bc-comparison-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 1.5rem !important;
        margin-bottom: 2.5rem !important;
    }
}

@media (min-width: 1024px) {
    .bc-comparison-grid {
        gap: 2rem !important;
        margin-bottom: 3rem !important;
    }
}

.bc-feature-card {
    background-color: var(--color-background) !important;
    border: 1px solid rgba(42, 43, 47, 0.1) !important;
    border-radius: 0.75rem !important;
    padding: 1.5rem !important;
}

@media (min-width: 768px) {
    .bc-feature-card {
        padding: 2rem;
    }
}

.bc-feature-card--primary {
    background-color: var(--color-step-card);
    border-color: var(--color-primary);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

.bc-feature-card__header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}

.bc-feature-card__icon {
    width: 1.5rem;
    height: 1.5rem;
    color: var(--color-primary);
    flex-shrink: 0;
}

.bc-feature-card__icon--muted {
    color: var(--color-foreground);
}

.bc-feature-card__title {
    font-size: 1.125rem;
    font-weight: 500;
    margin: 0;
}

@media (min-width: 768px) {
    .bc-feature-card__title {
        font-size: 1.25rem;
    }
}

.bc-feature-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    list-style: none;
    padding: 0;
    margin: 0;
}

.bc-feature-item {
    display: flex;
    gap: 0.75rem;
    align-items: flex-start;
}

.bc-feature-item__icon {
    width: 1.25rem;
    height: 1.25rem;
    border-radius: 50%;
    border: 2px solid var(--color-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-top: 0.25rem;
}

.bc-feature-item__icon svg {
    width: 0.75rem;
    height: 0.75rem;
    color: var(--color-primary);
}

.bc-feature-item__icon--muted {
    border-color: var(--color-foreground);
}

.bc-feature-item__icon--muted svg {
    color: var(--color-foreground);
}

.bc-feature-item__content {
    flex: 1;
}

.bc-feature-item__content strong {
    display: block;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-foreground);
    margin-bottom: 0.25rem;
}

@media (min-width: 768px) {
    .bc-feature-item__content strong {
        font-size: 1rem;
    }
}

.bc-feature-item__content p {
    font-size: 0.875rem;
    color: var(--color-muted-foreground);
    margin: 0;
    line-height: 1.5;
}

@media (min-width: 768px) {
    .bc-feature-item__content p {
        font-size: 1rem;
    }
}

/* ----------------------------------------
   BC STEPS GRID
   ---------------------------------------- */
.bc-steps-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
    max-width: 1280px !important;
    margin: 0 auto 2rem !important;
}

@media (min-width: 768px) {
    .bc-steps-grid {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 1.5rem !important;
        margin-bottom: 2rem !important;
    }
}

@media (min-width: 1024px) {
    .bc-steps-grid {
        gap: 2rem !important;
        margin-bottom: 3rem !important;
    }
}

.bc-step-card {
    background-color: var(--color-step-card) !important;
    border: 1px solid rgba(42, 43, 47, 0.1) !important;
    border-radius: 0.75rem !important;
    padding: 1rem !important;
    text-align: center !important;
}

@media (min-width: 768px) {
    .bc-step-card {
        padding: 1.5rem;
    }
}

.bc-step-card__number {
    display: block;
    font-size: 0.875rem;
    color: var(--color-primary);
    margin-bottom: 0.5rem;
    margin-top: 1rem;
}

@media (min-width: 768px) {
    .bc-step-card__number {
        font-size: 1rem;
    }
}

.bc-step-card__title {
    font-size: 1.125rem;
    font-weight: 500;
    margin-bottom: 0.5rem;
}

.bc-step-card__badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.bc-step-card__badge-icon {
    width: 1rem;
    height: 1rem;
    color: var(--color-primary);
}

.bc-step-card__badge span {
    font-size: 0.875rem;
    color: var(--color-primary);
}

@media (min-width: 768px) {
    .bc-step-card__badge span {
        font-size: 1rem;
    }
}

.bc-step-card__desc {
    font-size: 0.875rem;
    color: var(--color-foreground);
    line-height: 1.6;
    margin-bottom: 1rem;
}

@media (min-width: 768px) {
    .bc-step-card__desc {
        font-size: 1rem;
    }
}

.bc-step-card__icon-wrapper {
    background-color: var(--color-step-card);
    border-radius: 0.5rem;
    padding: 1rem;
    height: 6rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

@media (min-width: 768px) {
    .bc-step-card__icon-wrapper {
        padding: 1.5rem;
        height: 8rem;
    }
}

.bc-step-card__icon-circle {
    width: 4rem;
    height: 4rem;
    border-radius: 50%;
    background-color: rgba(176, 91, 54, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
}

@media (min-width: 768px) {
    .bc-step-card__icon-circle {
        width: 6rem;
        height: 6rem;
    }
}

.bc-step-card__icon {
    width: 2rem;
    height: 2rem;
    color: var(--color-primary);
}

@media (min-width: 768px) {
    .bc-step-card__icon {
        width: 3rem;
        height: 3rem;
    }
}

/* ----------------------------------------
   BC EDUCATIONAL SECTION
   ---------------------------------------- */
.bc-edu-section {
    margin-bottom: 2rem;
}

@media (min-width: 768px) {
    .bc-edu-section {
        margin-bottom: 3rem;
    }
}

@media (min-width: 1024px) {
    .bc-edu-section {
        margin-bottom: 4rem;
    }
}

.bc-edu-section:last-child {
    margin-bottom: 0;
}

.bc-edu-heading {
    font-size: 1.25rem;
    font-weight: 500;
    text-align: center;
    margin-bottom: 1.5rem;
}

@media (min-width: 768px) {
    .bc-edu-heading {
        font-size: 1.5rem;
        margin-bottom: 2rem;
    }
}

.bc-edu-subheading {
    font-size: 1.125rem;
    font-weight: 500;
    text-align: center;
    margin-bottom: 1rem;
}

@media (min-width: 768px) {
    .bc-edu-subheading {
        margin-bottom: 1.5rem;
    }
}

.bc-edu-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
}

@media (min-width: 768px) {
    .bc-edu-grid {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 1.5rem !important;
    }
}

@media (min-width: 1024px) {
    .bc-edu-grid {
        gap: 2rem !important;
    }
}

.bc-edu-card {
    background-color: var(--color-background);
    border: 1px solid rgba(42, 43, 47, 0.1);
    border-radius: 0.75rem;
    padding: 1.5rem;
    text-align: center;
}

@media (min-width: 768px) {
    .bc-edu-card {
        padding: 2rem;
    }
}

.bc-edu-card__icon {
    width: 4rem;
    height: 4rem;
    border-radius: 50%;
    background-color: rgba(176, 91, 54, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1rem;
}

@media (min-width: 768px) {
    .bc-edu-card__icon {
        width: 5rem;
        height: 5rem;
        margin-bottom: 1.5rem;
    }
}

.bc-edu-card__icon span {
    font-size: 1.875rem;
}

@media (min-width: 768px) {
    .bc-edu-card__icon span {
        font-size: 2.25rem;
    }
}

.bc-edu-card__title {
    font-size: 1.125rem;
    font-weight: 500;
    margin-bottom: 0.75rem;
    text-align: center;
}

@media (min-width: 768px) {
    .bc-edu-card__title {
        margin-bottom: 1rem;
    }
}

.bc-edu-card__desc {
    font-size: 0.875rem;
    color: var(--color-foreground);
    line-height: 1.6;
    margin: 0;
}

@media (min-width: 768px) {
    .bc-edu-card__desc {
        font-size: 1rem;
    }
}

/* Time Card */
.bc-time-card {
    background-color: var(--color-background);
    border: 1px solid rgba(176, 91, 54, 0.2);
    border-radius: 0.75rem;
    padding: 1.5rem;
    max-width: 56rem;
    margin: 0 auto;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

@media (min-width: 768px) {
    .bc-time-card {
        padding: 2rem;
    }
}

@media (min-width: 1024px) {
    .bc-time-card {
        padding: 2.5rem;
    }
}

.bc-time-card__content {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

@media (min-width: 768px) {
    .bc-time-card__content {
        flex-direction: row;
        gap: 1.5rem;
    }
}

.bc-time-card__icon {
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    background-color: rgba(176, 91, 54, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

@media (min-width: 768px) {
    .bc-time-card__icon {
        width: 4rem;
        height: 4rem;
    }
}

.bc-time-card__icon svg {
    width: 1.5rem;
    height: 1.5rem;
    color: var(--color-primary);
}

@media (min-width: 768px) {
    .bc-time-card__icon svg {
        width: 2rem;
        height: 2rem;
    }
}

.bc-time-card__text {
    flex: 1;
}

.bc-time-card__text > p {
    font-size: 0.875rem;
    color: var(--color-foreground);
    line-height: 1.6;
    margin-bottom: 1rem;
}

@media (min-width: 768px) {
    .bc-time-card__text > p {
        font-size: 1rem;
    }
}

.bc-time-card__alert {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 0.75rem;
    background-color: rgba(176, 91, 54, 0.05);
    border: 1px solid rgba(176, 91, 54, 0.3);
    border-radius: 0.5rem;
}

.bc-time-card__alert-icon {
    width: 1rem;
    height: 1rem;
    color: var(--color-primary);
    flex-shrink: 0;
    margin-top: 0.125rem;
}

.bc-time-card__alert p {
    font-size: 0.875rem;
    color: var(--color-foreground);
    margin: 0;
    line-height: 1.5;
}

@media (min-width: 768px) {
    .bc-time-card__alert p {
        font-size: 1rem;
    }
}

.bc-time-card__link {
    padding-top: 1rem;
    border-top: 1px solid var(--color-border);
}

.bc-time-card__link a {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--color-primary);
    font-size: 0.875rem;
    font-weight: 500;
    text-decoration: none;
    transition: text-decoration 0.2s;
}

@media (min-width: 768px) {
    .bc-time-card__link a {
        font-size: 1rem;
    }
}

.bc-time-card__link a:hover {
    text-decoration: underline;
}

.bc-time-card__link svg {
    width: 1rem;
    height: 1rem;
}

/* Links Grid */
.bc-links-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
}

@media (min-width: 640px) {
    .bc-links-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

@media (min-width: 768px) {
    .bc-links-grid {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 1.5rem !important;
    }
}

.bc-link-card {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 1.5rem;
    background-color: var(--color-background);
    border: 1px solid rgba(42, 43, 47, 0.1) !important;
    border-radius: 0.75rem;
    text-decoration: none;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.bc-link-card:hover {
    border-color: rgba(176, 91, 54, 0.5);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

.bc-link-card__emoji {
    font-size: 1.5rem;
    flex-shrink: 0;
}

@media (min-width: 768px) {
    .bc-link-card__emoji {
        font-size: 1.875rem;
    }
}

.bc-link-card__content {
    flex: 1;
}

.bc-link-card__title {
    font-size: 1rem;
    font-weight: 500;
    color: var(--color-foreground);
    margin: 0 0 0.25rem;
    transition: color 0.2s;
}

.bc-link-card:hover .bc-link-card__title {
    color: var(--color-primary);
}

.bc-link-card__desc {
    font-size: 0.875rem;
    color: var(--color-muted-foreground);
    margin: 0;
    line-height: 1.5;
}

@media (min-width: 768px) {
    .bc-link-card__desc {
        font-size: 1rem;
    }
}

/* ----------------------------------------
   BC CTA CARD
   ---------------------------------------- */
.bc-cta-card {
    max-width: 72rem;
    margin: 0 auto;
}

.bc-cta-card__content {
    position: relative;
    overflow: hidden;
    border-radius: 0.5rem;
    background-color: var(--color-background);
    padding: 1rem;
}

@media (min-width: 768px) {
    .bc-cta-card__content {
        border-radius: 0.75rem;
        padding: 2rem;
    }
}

@media (min-width: 1024px) {
    .bc-cta-card__content {
        border-radius: 1rem;
        padding: 3rem 4rem;
    }
}

.bc-cta-card__header {
    text-align: center;
    margin-bottom: 1.5rem;
}

@media (min-width: 768px) {
    .bc-cta-card__header {
        margin-bottom: 2rem;
    }
}

@media (min-width: 1024px) {
    .bc-cta-card__header {
        margin-bottom: 3rem;
    }
}

.bc-cta-card__title {
    font-size: 1.5rem;
    font-weight: 500;
    margin-bottom: 1rem;
}

@media (min-width: 768px) {
    .bc-cta-card__title {
        font-size: 2.25rem;
        margin-bottom: 1.5rem;
    }
}

.bc-cta-card__desc {
    font-size: 0.875rem;
    color: var(--color-foreground);
    line-height: 1.6;
    max-width: 48rem;
    margin: 0 auto;
}

@media (min-width: 768px) {
    .bc-cta-card__desc {
        font-size: 1rem;
    }
}

@media (min-width: 1024px) {
    .bc-cta-card__desc {
        font-size: 1.125rem;
    }
}

.bc-cta-card__action {
    text-align: center;
    margin-top: 1rem;
    margin-bottom: 2rem;
}

@media (min-width: 768px) {
    .bc-cta-card__action {
        margin-top: 1.5rem;
        margin-bottom: 3rem;
    }
}

.bc-cta-card__action-text {
    font-size: 1rem;
    font-weight: 500;
    margin-bottom: 1rem;
}

@media (min-width: 768px) {
    .bc-cta-card__action-text {
        font-size: 1.125rem;
        margin-bottom: 1.5rem;
    }
}

@media (min-width: 1024px) {
    .bc-cta-card__action-text {
        font-size: 1.25rem;
    }
}

.bc-cta-card__note {
    font-size: 0.875rem;
    color: var(--color-muted-foreground);
    margin-top: 1rem;
}

@media (min-width: 768px) {
    .bc-cta-card__note {
        font-size: 1rem;
    }
}

.bc-cta-card__image {
    border-radius: 0.5rem;
    overflow: hidden;
}

@media (min-width: 768px) {
    .bc-cta-card__image {
        border-radius: 0.75rem;
    }
}

@media (min-width: 1024px) {
    .bc-cta-card__image {
        border-radius: 1rem;
    }
}

.bc-cta-card__image img {
    width: 100%;
    height: 250px;
    object-fit: cover;
}

@media (min-width: 768px) {
    .bc-cta-card__image img {
        height: 400px;
    }
}

@media (min-width: 1024px) {
    .bc-cta-card__image img {
        height: 500px;
    }
}

/* ----------------------------------------
   BC FAQ
   ---------------------------------------- */
.bc-faq {
    max-width: 56rem;
    margin: 0 auto;
}

.bc-faq__contact {
    margin-top: 2rem;
    text-align: center;
    padding: 1rem;
    background-color: var(--color-step-card);
    border-radius: 0.5rem;
}

@media (min-width: 768px) {
    .bc-faq__contact {
        margin-top: 2.5rem;
        padding: 1.5rem;
        border-radius: 0.75rem;
    }
}

@media (min-width: 1024px) {
    .bc-faq__contact {
        margin-top: 3rem;
        padding: 2rem;
        border-radius: 1rem;
    }
}

.bc-faq__contact p {
    font-size: 0.875rem;
    margin-bottom: 0.5rem;
}

@media (min-width: 768px) {
    .bc-faq__contact p {
        font-size: 1rem;
    }
}

.bc-faq__contact p:last-child {
    margin-bottom: 0;
}

.bc-faq__contact a {
    color: var(--color-primary);
    font-weight: 500;
    text-decoration: none;
    transition: color 0.2s;
}

.bc-faq__contact a:hover {
    color: var(--color-accent);
}

/* ----------------------------------------
   BC FEATURES CARD (Result Section)
   ---------------------------------------- */
.bc-features-card {
    padding: 1.5rem;
    border: 1px solid var(--color-border);
    border-radius: 0.75rem;
    background-color: var(--color-card);
}

.bc-features-card__title {
    margin-bottom: 1rem;
    text-align: center;
}

.bc-features-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.bc-features-item {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
}

.bc-features-icon {
    width: 1.25rem;
    height: 1.25rem;
    color: var(--color-primary);
    margin-top: 0.125rem;
    flex-shrink: 0;
}

.bc-features-item span {
    color: var(--color-foreground);
}

/* ============================================
   BIRTH CHART PAGE - LAYOUT EXTENSIONS
   Only unique styles not covered by existing classes
   ============================================ */

/* ----------------------------------------
   BC HERO - 2 Column Layout (unique to this page)
   ---------------------------------------- */
.bc-hero-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
    align-items: start;
}

@media (min-width: 768px) {
    .bc-hero-grid {
        grid-template-columns: 55% 45%;
        gap: 2.5rem;
    }
}

@media (min-width: 1024px) {
    .bc-hero-grid {
        grid-template-columns: 58% 42%;
        gap: 3rem;
    }
}

.bc-hero-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.bc-hero-content h1 {
    font-size: 1.875rem;
    line-height: 1.2;
    margin-bottom: 1rem;
}

@media (min-width: 768px) {
    .bc-hero-content h1 {
        font-size: 2.25rem;
    }
}

@media (min-width: 1024px) {
    .bc-hero-content h1 {
        font-size: 2.75rem;
    }
}

.bc-hero-subtitle {
    font-size: 1.125rem;
    color: var(--color-muted-foreground);
    margin-bottom: 1.5rem;
    line-height: 1.6;
}

/* ----------------------------------------
   BC GRID LAYOUTS
   ---------------------------------------- */
/* 2 columns grid - for comparison section */
.bc-grid-2 {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    margin-bottom: 2rem;
}

@media (min-width: 768px) {
    .bc-grid-2 {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* 3 columns grid - for steps and educational sections */
.bc-grid-3 {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
}

@media (min-width: 640px) {
    .bc-grid-3 {
        grid-template-columns: repeat(2, 1fr);
        gap: 2rem;
    }
}

@media (min-width: 1024px) {
    .bc-grid-3 {
        grid-template-columns: repeat(3, 1fr);
        gap: 2.5rem;
    }
}

/* Service cards in bc-grid need more breathing room */
.bc-grid-3 .service-card {
    padding: 2rem;
}

@media (min-width: 768px) {
    .bc-grid-3 .service-card {
        padding: 2.5rem;
    }
}

/* ============================================
   BIRTH CHART PAGE - FORM UTILITIES
   ============================================ */

/* Privacy notice (used below form) */
.bc-form-privacy {
    font-size: 0.8125rem;
    color: #666;
    text-align: center;
    margin-top: 0.75rem;
    line-height: 1.5;
}

/* Birth chart form container - adds gap between fields */
.bc-form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* Hero trust badges for birth chart page */
.hero__trust-badges {
    margin-top: 2rem;
}

.hero__trust-badges .comparison-list__item {
    margin-bottom: 0.75rem;
}

@media (min-width: 1024px) {
    .hero__trust-badges {
        margin-top: 2.5rem;
    }
    
    .hero__trust-badges .comparison-list__item {
        justify-content: flex-start;
    }
}

.bc-info-box {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 1rem;
    background-color: #F5EEE2;
    border: 1px solid rgba(176, 91, 54, 0.2);
    border-radius: 0.5rem;
}

.bc-info-box p {
    margin: 0;
    font-size: 0.875rem;
}

.bc-link-card {
    padding: 1.5rem;
    border: 1px solid rgba(42, 43, 47, 0.1);
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    text-decoration: none;
    color: inherit;
    transition: border-color 0.2s ease;
}

.bc-link-card:hover {
    border-color: var(--color-primary);
}

.bc-link-card__icon {
    font-size: 1.5rem;
    flex-shrink: 0;
}

.bc-link-card__title {
    font-weight: 500;
    margin: 0 0 0.25rem;
}

.bc-link-card__desc {
    font-size: 0.875rem;
    margin: 0;
    color: var(--color-muted-foreground);
}

/* Override bc-edu-card center alignment for link cards */
.bc-link-card.bc-edu-card {
    text-align: left;
}

.bc-blog-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--color-primary);
    text-decoration: none;
    font-weight: 500;
}

.bc-blog-link:hover {
    text-decoration: underline;
}

/* ----------------------------------------
   BC PERFORMANCE OPTIMIZATION CLASSES
   ---------------------------------------- */

/* Container width variants */
.bc-container--narrow {
    max-width: 80rem; /* Extended for 3-column cards */
}

.bc-container--medium {
    max-width: 56rem;
    margin-left: auto;
    margin-right: auto;
}

/* Educational section background */
.bc-section--muted {
    background-color: #F5EEE2;
}

/* Educational card styling */
.bc-edu-card {
    background-color: var(--color-background);
    border-radius: 0.75rem;
    border: 1px solid rgba(42, 43, 47, 0.1);
    padding: 2rem;
}

@media (min-width: 768px) {
    .bc-edu-card {
        padding: 2.5rem;
    }
}

/* Icon box variants */
.bc-icon-box {
    width: 100%;
    max-width: 200px;
    height: 150px;
    margin: 0 auto 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: 0.5rem;
}

@media (min-width: 768px) {
    .bc-icon-box {
        max-width: 250px;
        height: 180px;
    }
}

.bc-icon-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 0.5rem;
}

.bc-icon-box span {
    width: auto;
    height: auto;
}

.bc-icon-box--emoji {
    font-size: 2.5rem;
}

@media (min-width: 768px) {
    .bc-icon-box--emoji {
        font-size: 3rem;
    }
}

/* Birth time importance card */
.bc-time-card {
    background-color: var(--color-background);
    border-radius: 0.75rem;
    border: 1px solid rgba(176, 91, 54, 0.2);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
    padding: 1.5rem 2rem;
}

.bc-time-card__content {
    display: flex;
    align-items: flex-start;
    gap: 1.5rem;
    margin-bottom: 1.5rem;
}

@media (max-width: 640px) {
    .bc-time-card__content {
        flex-direction: column;
        gap: 1rem;
    }
}

.bc-time-card__icon {
    flex-shrink: 0;
    width: 4rem;
    height: 4rem;
    border-radius: 50%;
    background-color: rgba(176, 91, 54, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
}

.bc-time-card__text {
    flex: 1;
}

.bc-time-card__text p {
    margin-bottom: 1rem;
    line-height: 1.75;
}

.bc-time-card__note {
    background-color: rgba(176, 91, 54, 0.05);
    border: 1px solid rgba(176, 91, 54, 0.3);
    border-radius: 0.5rem;
    padding: 1rem;
}

.bc-time-card__footer {
    border-top: 1px solid rgba(42, 43, 47, 0.1);
    padding-top: 1rem;
}

/* Result section container */
.bc-result-container {
    max-width: 100%;
}

.bc-result-chart {
    width: 100%;
    overflow-x: auto;
    padding: 1rem 0;
}

.bc-result-form {
    max-width: 52rem;
    margin: 3rem auto;
    padding: 0 1rem;
}

.bc-result-features {
    max-width: 52rem;
    margin: 2rem auto;
    padding: 0 1rem;
}

/* CTA note text */
.bc-cta-note {
    font-size: 0.875rem;
    color: #666;
    margin-top: 1rem;
}

/* SVG sprite icon styling */
.check-icon-wrapper--dark {
    border-color: #2A2B2F;
}

.cross-icon {
    stroke: #2A2B2F;
}

/* Comparison item text styles (moved from inline) */
.comparison-item__title {
    display: block;
}

.comparison-item__desc {
    font-size: 0.875rem;
    color: var(--color-muted-foreground);
}

/* Contact CTA box */
.bc-contact-cta {
    margin-top: 2rem;
    text-align: center;
    padding: 1rem;
    background-color: #F5EEE2;
    border-radius: 0.5rem;
}

.bc-contact-cta p:first-child {
    margin-bottom: 0.5rem;
}

.bc-contact-cta p:last-child {
    margin: 0;
}

/* Content visibility for below-fold sections (performance) */
#comparison,
.bc-grid-3,
.philosophy-section,
.accordion {
    content-visibility: auto;
    contain-intrinsic-size: auto 400px;
}

/* Testimonials: JS-based duplication for infinite scroll
   The testimonials are duplicated via JavaScript on page load for smooth infinite scroll */