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

/* Hide broken/empty images to prevent broken-image icon */
img[src=""], img:not([src]) { visibility: hidden; width: 0; height: 0; overflow: hidden; position: absolute; }
body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    color: #1a1a1a;
    background: #fff;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

/* Match the reference Inter tracking in the review label. */
.create-page .hero-trust-reviews-text,
.create-page .hero-trust-reviews-text strong {
    font-family: Inter, "Inter Fallback", Inter, -apple-system, BlinkMacSystemFont, sans-serif !important;
    letter-spacing: -0.12px !important;
}

@media (min-width:769px) {
    .page-tool .hero-split-layout {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
}
a { text-decoration: none; color: inherit; }
ul { list-style: none; }
img { max-width: 100%; display: block; }
button { cursor: pointer; border: none; background: none; font-family: inherit; }

/* ===== PROMO BAR ===== */
.promo-bar {
    background: #000;
    color: #fff;
    text-align: center;
    padding: 8px 40px 8px 16px;
    font-size: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}
.promo-bar-inner { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; justify-content: center; }
.promo-bar-countdown { display: flex; align-items: center; gap: 4px; }
.promo-bar-time-unit { display: flex; flex-direction: column; align-items: center; gap: 0; }
.promo-bar-time-num { font-size: 14px; font-weight: 700; letter-spacing: 2px; color: #fff; }
.promo-bar-time-label { font-size: 7px; letter-spacing: 1px; color: #999; }
.promo-bar-time-sep { font-size: 14px; font-weight: 700; color: #fff; margin: 0 2px; }
.promo-bar-text { font-size: 12px; }
.promo-bar-cta { background: #fff; color: #1a1a1a; padding: 4px 12px; border-radius: 4px; font-weight: 700; font-size: 12px; cursor: pointer; border: none; }
.promo-bar-apply { text-decoration: underline; font-size: 12px; color: #fff; }
.promo-bar-close {
    position: absolute; right: 16px; top: 50%; transform: translateY(-50%);
    color: #fff; opacity: 0.7; cursor: pointer;
    background: none; border: none; padding: 4px; display: flex;
}
.promo-bar-close:hover { opacity: 1; }

/* ===== CREATE HEADER ===== */
.create-header {
    background: #fff;
    border-bottom: 1px solid #e5e5e5;
    position: sticky;
    top: 0;
    z-index: 100;
    padding: 0 24px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: 100%;
}
.header-left { display: flex; align-items: center; gap: 12px; }
.menu-hamburger {
    display: flex; flex-direction: column; justify-content: center; gap: 4px;
    padding: 8px; background: none; border: none; cursor: pointer;
    width: 32px; height: 32px;
}
.menu-hamburger span {
    display: block; width: 18px; height: 2px; background: #1a1a1a; border-radius: 1px;
}
.create-logo {
    font-size: 18px; font-weight: 400; letter-spacing: -0.5px; color: #1a1a1a;
    text-decoration: none;
}
.create-logo span { font-weight: 400; }
.create-header-actions { display: flex; align-items: center; gap: 12px; }
.desktop-header-nav { display: flex; align-items: center; gap: 24px; margin-right: 12px; }
.desktop-nav-link {
    font-size: 14px; font-weight: 400; color: #333; text-decoration: none;
    cursor: pointer; user-select: none; display: flex; align-items: center; gap: 4px;
}
.desktop-nav-link:hover { color: #000; }
.ai-tools-dropdown-wrapper { position: relative; }
.ai-tools-dropdown {
    display: none; position: absolute; top: 100%; right: 0;
    background: #fff; border: 1px solid #e5e5e5; border-radius: 8px;
    min-width: 220px; box-shadow: 0 8px 24px rgba(0,0,0,0.12);
    padding: 8px 0; z-index: 200;
}
.ai-tools-dropdown.open { display: block; }
.ai-tool-link {
    display: block; padding: 10px 20px; font-size: 14px; color: #333;
    transition: background 0.15s;
}
.ai-tool-link:hover { background: #f5f5f5; }
.browse-catalog-btn {
    background: #1a1a1a; color: #fff; padding: 10px 20px;
    border-radius: 6px; font-size: 13px; font-weight: 600;
    letter-spacing: 0.5px; text-transform: uppercase;
    cursor: pointer; border: none; white-space: nowrap;
    transition: background 0.2s;
}
.browse-catalog-btn:hover { background: #333; }
.header-search-icon-mobile {
    display: none; align-items: center; justify-content: center;
    width: 36px; height: 36px; border-radius: 8px;
    background: #f5f5f5; cursor: pointer; border: none; color: #1a1a1a;
}
/* Legacy class support */
.btn-primary {
    background: #1a1a1a; color: #fff; padding: 10px 20px;
    border-radius: 6px; font-size: 13px; font-weight: 600;
    letter-spacing: 0.5px; text-transform: uppercase;
    transition: background 0.2s;
    display: inline-block; text-align: center;
}
.btn-primary:hover { background: #333; }

/* ===== CONTENT WRAPPER ===== */
.create-page { min-height: 100vh; display: flex; flex-direction: column; }
.content-wrapper { flex: 1; }
.create-main { max-width: 1400px; margin: 0 auto; padding: 0 24px; }

.btn-secondary {
    background: transparent; color: #1a1a1a; padding: 12px 24px;
    border: 1px solid #1a1a1a; border-radius: 8px; font-size: 13px; font-weight: 700;
    letter-spacing: 0.5px; text-transform: uppercase;
    transition: all 0.2s;
    display: inline-block; text-align: center;
}
.btn-secondary:hover { background: #1a1a1a; color: #fff; }
.btn-full { width: 100%; }

/* ===== MAIN CONTENT ===== */
.main-content {
    min-height: calc(100vh - 56px);
}

/* Page-specific header nav - hide Earn $250 on ALL pages */

/* ===== HERO SECTION ===== */
.hero-section {
    padding: 40px 24px 60px;
    max-width: 1400px;
    margin: 0 auto;
}
.hero-inner { display: flex; align-items: center; gap: 40px; }
.hero-left { flex: 1; }
.hero-right { flex: 1; max-width: 560px; }
.hero-badge, .hero-stat-badge {
    display: inline-flex; align-items: center; gap: 8px;
    background: #1a1a1a; color: #fff;
    padding: 8px 16px; border-radius: 20px;
    font-size: 13px; font-weight: 500;
    margin-bottom: 24px;
    border: 1px solid #1a1a1a;
}
.hero-stat-badge-dark {
    background: #1a1a1a; color: #fff;
    border-color: #1a1a1a;
}
.hero-stat-badge-icon {
    flex-shrink: 0;
}
.hero-title {
    font-size: 52px; font-weight: 400; line-height: 1.1;
    letter-spacing: -1px; margin-bottom: 16px;
    text-transform: uppercase;
}
.hero-line1 {
    transition: opacity 0.3s ease, transform 0.3s ease;
    display: inline-block;
}
.hero-line-furniture {
    display: block;
    font-size: 64px; font-weight: 400; line-height: 1.1;
    letter-spacing: -1px; text-transform: uppercase;
    color: #1a1a1a;
}
.hero-line-brands {
    display: block;
    font-size: 18px; font-weight: 400; line-height: 1.4;
    color: #666; text-transform: none; margin-top: 8px;
}
.brand-logos-line {
    display: flex; flex-direction: column; align-items: flex-start; gap: 8px;
    margin-top: 12px; margin-bottom: 24px;
}
.furniture-from-label {
    font-size: 18px; color: #1a1a1a; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.5px;
}
.brand-logo-img {
    height: 32px; opacity: 0.85;
}

/* Hero Split Layout */
.hero-split-layout { display: flex; align-items: center; gap: 40px; }
.hero-split-left { flex: 1; }
.hero-split-right { flex: 1; max-width: 560px; }
.hero-split-title { font-size: 52px; font-weight: 400; line-height: 1.1; letter-spacing: -1px; text-transform: uppercase; }
.hero-split-title-line1 { display: block; }
.hero-split-title-line2 { display: block; }
.hero-split-title-line3 { display: block; font-size: 16px; color: #666; text-transform: uppercase; margin-top: 8px; font-weight: 400; letter-spacing: 0; }
.hero-rotating-words { display: inline-block; position: relative; }
.hero-rotating-word { display: none; }
.hero-rotating-word:first-child { display: inline; }
.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; }
.hero-split-brands-logos { display: flex; align-items: center; gap: 20px; margin-top: 12px; margin-bottom: 24px; }
.hero-brand-logo { height: 24px; opacity: 1; filter: none; transition: opacity 0.2s; }
.hero-brand-logo:hover { opacity: 1; }
.hero-brand-ikea { height: 28px; }
.hero-brand-amazon { height: 22px; }
.hero-brand-wayfair { height: 26px; }
.hero-brand-potterybarn { height: 24px; }
.hero-brand-ashley { height: 22px; }

/* Hero Desktop Slideshow */
.hero-desktop-slideshow { position: relative; border-radius: 16px; overflow: hidden; aspect-ratio: 1; background: #f0f0f0; }
.hero-desktop-slide { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 10%; opacity: 0; transition: opacity 0.8s ease; }
.hero-desktop-slide:first-child { opacity: 1; }
.hero-desktop-slide--active { opacity: 1; }

/* Mobile Hero */
.mobile-only { display: none; }
.desktop-only { display: block; }
.hero-wallpaper-section { position: relative; min-height: 100vh; display: flex; align-items: flex-end; padding: 24px; background: url('/static/images/hero-after.jpg') center/cover no-repeat; }
.hero-wallpaper-section::before { content: ''; position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(0,0,0,0.1), rgba(0,0,0,0.6)); }
.hero-content-wrapper { position: relative; z-index: 1; width: 100%; }
.hero-mobile-banner { margin-bottom: 16px; }
.hero-mobile-title { font-size: 36px; font-weight: 400; line-height: 1.1; text-transform: uppercase; color: #fff; }
.hero-mobile-title-line1 { display: block; margin-bottom: 4px; }
.hero-mobile-title-line2 { display: block; font-size: 32px; text-transform: lowercase; font-weight: 400; }
.hero-mobile-title-line3 { display: block; font-size: 16px; color: rgba(255,255,255,0.7); text-transform: none; margin-top: 8px; font-weight: 400; }
.hero-mobile-banner .hero-stat-badge { margin-bottom: 20px; }
.hero-brands-row { display: flex; align-items: center; gap: 12px; margin-top: 16px; }
.hero-brands-row .hero-brand-logo { opacity: 0.85; filter: brightness(0) invert(1); height: 20px; }
.hero-brands-row-dark { margin-bottom: 20px; }
.hero-mobile-slideshow { position: relative; border-radius: 12px; overflow: hidden; aspect-ratio: 16/10; margin-top: 20px; background: rgba(0,0,0,0.2); }
.hero-slide { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 0.8s ease; }
.hero-slide:first-child { opacity: 1; }
.hero-slide--active { opacity: 1; }

@media (max-width: 768px) {
    .mobile-only { display: block; }
    .desktop-only { display: none; }
}
/* Create Input */
.create-input-wrapper { position: relative; margin-top: clamp(15px, 3vh, 40px); margin-left: auto; margin-right: auto; width: 100%; max-width: min(730px, 85vw); }
.create-input-container { background: #fff; border: 1px solid #e5e5e5; border-radius: 48px; overflow: hidden; transition: border-color 0.2s; }
.create-input-container:focus-within { border-color: #1a1a1a; }
.create-input { width: 100%; border: none; background: transparent; font-size: 15px; color: #333; outline: none; font-family: inherit; padding: 16px; resize: none; min-height: 48px; line-height: 1.5; }
.create-input::placeholder { color: #999; }
.create-input-actions { display: flex; align-items: center; padding: 8px 12px 8px 20px; border-top: 1px solid #e5e5e5; gap: 8px; }
.add-image-btn-wrap { display: flex; align-items: center; }
.brand-style-button-container { flex: 1; }
.input-action-btn { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: #666; letter-spacing: 0.5px; text-transform: uppercase; padding: 8px; border-radius: 6px; cursor: pointer; background: none; border: none; transition: background 0.15s; }
.input-action-btn:hover { background: #f5f5f5; }
.input-action-btn:focus-visible { outline: 2px solid #1a1a1a; outline-offset: 2px; border-radius: 6px; }
.input-action-btn.has-image { color: #1a1a1a; background: #f0f0f0; }
.add-image-btn-label { font-size: 12px; }
.input-divider { width: 1px; height: 20px; background: #e5e5e5; margin-left: auto; }
.submit-arrow-btn { width: 48px; height: 48px; border-radius: 50%; background: #1a1a1a; color: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; border: none; flex-shrink: 0; transition: background 0.15s, opacity 0.15s; }
.submit-arrow-btn:hover { background: #333; }
.submit-arrow-btn:focus-visible { outline: 2px solid #1a1a1a; outline-offset: 2px; }
.submit-arrow-btn:disabled { opacity: 0.45; cursor: not-allowed; }
.submit-arrow-btn:disabled:hover { background: #1a1a1a; }

/* Hero Bar Preview */
.hero-bar-preview { position: relative; margin-top: 8px; border-radius: 8px; overflow: hidden; display: none; }
.hero-bar-preview img { width: 100%; max-height: 120px; object-fit: cover; border-radius: 8px; display: block; }
.hero-preview-remove { position: absolute; top: 6px; right: 6px; width: 24px; height: 24px; border-radius: 50%; background: rgba(0,0,0,0.6); color: #fff; border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background 0.15s; }
.hero-preview-remove:hover { background: rgba(0,0,0,0.8); }
.hero-preview-remove:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* Hero Bar Error */
.hero-bar-error { color: #c53030; font-size: 13px; margin-top: 8px; padding: 8px 12px; background: #fff5f5; border: 1px solid #fed7d7; border-radius: 8px; display: none; }

/* Hero Bar AI Not Configured */
.hero-bar-ai-notice { color: #666; font-size: 13px; margin-top: 8px; padding: 10px 14px; background: #f7f7f7; border: 1px solid #e5e5e5; border-radius: 8px; text-align: center; }

/* Hero Submit Spinner */
.hero-submit-spinner {
    display: inline-block;
    width: 18px; height: 18px;
    border: 2px solid rgba(255,255,255,0.3);
    border-top-color: #fff;
    border-radius: 50%;
    animation: heroSpin 0.6s linear infinite;
}
@keyframes heroSpin { to { transform: rotate(360deg); } }
.brand-logos { display: flex; align-items: center; gap: 24px; margin-bottom: 32px; flex-wrap: wrap; }
.brand { font-size: 18px; font-weight: 800; color: #999; letter-spacing: -0.3px; }
.brand-img { height: 28px; opacity: 0.6; filter: grayscale(100%); }

/* Hero Single Image */
.hero-image-single {
    width: 100%; border-radius: 16px; overflow: hidden;
}
.hero-image-single img {
    width: 100%; height: auto; display: block; object-fit: cover;
    aspect-ratio: 4/3;
}

/* Prompt Input */
.hero-prompt {
    background: transparent; border: none;
    border-radius: 0; padding: 0;
    border-bottom: 1px solid #e5e5e5;
}
.prompt-input-wrapper { display: flex; flex-direction: column; gap: 12px; }
.prompt-input {
    width: 100%; border: none; background: transparent;
    font-size: 15px; color: #333; outline: none;
    font-family: inherit; padding: 8px 0;
}
.prompt-input::placeholder { color: #999; }
.prompt-actions { display: flex; align-items: center; justify-content: space-between; }
.upload-btn {
    display: flex; align-items: center; gap: 6px;
    font-size: 12px; font-weight: 600; color: #666;
    letter-spacing: 0.5px; text-transform: uppercase;
}
.upload-btn .upload-icon { font-size: 14px; }
.submit-btn {
    width: 40px; height: 40px; border-radius: 50%;
    background: #1a1a1a; color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: 18px; transition: background 0.2s;
}
.submit-btn:hover { background: #333; }

/* Hero Slider */
.hero-slider {
    position: relative; border-radius: 16px; overflow: hidden;
    aspect-ratio: 4/3; background: #f0f0f0;
}
.slider-before, .slider-after {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
}
.slider-before img, .slider-after img {
    width: 100%; height: 100%; object-fit: cover;
}
.slider-after { clip-path: inset(0 0 0 50%); }
.slider-tag {
    position: absolute; top: 16px; left: 16px;
    background: rgba(0,0,0,0.6); color: #fff;
    padding: 4px 12px; border-radius: 4px;
    font-size: 11px; font-weight: 600; letter-spacing: 1px;
    z-index: 2;
}
.tag-after { left: auto; right: 16px; background: #1a1a1a; }
.slider-handle {
    position: absolute; top: 0; bottom: 0; left: 50%;
    width: 3px; background: #fff; z-index: 3;
    transform: translateX(-50%);
    cursor: ew-resize;
}
.slider-handle span {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    width: 40px; height: 40px; border-radius: 50%;
    background: #fff; box-shadow: 0 2px 8px rgba(0,0,0,0.2);
    display: flex; align-items: center; justify-content: center;
    font-size: 12px; color: #333;
}

/* ===== SOCIAL PROOF BAR ===== */
.social-proof-bar {
    border-top: 1px solid #e5e5e5;
    border-bottom: 1px solid #e5e5e5;
    padding: 20px 24px;
}
.proof-inner {
    max-width: 1400px; margin: 0 auto;
    display: flex; align-items: center; gap: 40px;
    justify-content: flex-end;
}
.proof-avatars { display: flex; }
.avatar {
    width: 36px; height: 36px; border-radius: 50%;
    background: #ddd; border: 2px solid #fff;
    margin-left: -8px; background-size: cover; background-position: center;
}
.avatar:nth-child(1) { background-color: #4a90d9; }
.avatar:nth-child(2) { background-color: #e67e22; }
.avatar:nth-child(3) { background-color: #2ecc71; }
.avatar:nth-child(4) { background-color: #9b59b6; }
.avatar:first-child { margin-left: 0; }
.proof-text { display: flex; flex-direction: column; font-size: 13px; }
.proof-text strong { font-weight: 600; }
.proof-text span { color: #666; font-size: 12px; }
.proof-divider { width: 1px; height: 32px; background: #e5e5e5; }
.proof-rating { display: flex; flex-direction: column; font-size: 13px; align-items: flex-start; }
.proof-rating strong { font-weight: 600; }
.proof-rating span { color: #666; font-size: 12px; }
.stars { color: #f5a623; font-size: 14px; letter-spacing: 2px; }

/* ===== TRY IT YOURSELF ===== */
.try-section { padding: 80px 24px; max-width: 1400px; margin: 0 auto; }
.try-inner { }

/* Demo Section (Try It Yourself) */
.demo-section { padding: 80px 24px; max-width: 1100px; margin: 0 auto; }
.demo-section-title {
    font-size: 32px; font-weight: 700; letter-spacing: -0.3px;
    text-align: center; margin-bottom: 8px; color: #1a1a1a;
}
.demo-section-subtitle {
    font-size: 15px; color: #666; text-align: center; margin-bottom: 40px;
}
.demo-layout { display: flex; gap: 40px; align-items: flex-start; }
.demo-panel { flex: 0 0 280px; display: flex; flex-direction: column; gap: 20px; }
.demo-panel-label {
    font-size: 12px; font-weight: 600; text-transform: uppercase;
    letter-spacing: 1px; color: #666; margin-bottom: 8px;
}
.demo-styles { display: flex; gap: 8px; flex-wrap: wrap; }
.demo-style-pill {
    padding: 8px 16px; border: 1px solid #d9d9d9;
    border-radius: 20px; font-size: 13px; font-weight: 500;
    color: #333; transition: all 0.15s; cursor: pointer;
    background: #fff; white-space: nowrap;
}
.demo-style-pill:hover { border-color: #1a1a1a; }
.demo-style-pill:focus-visible { outline: 2px solid #1a1a1a; outline-offset: 2px; }
.demo-style-pill-active, .demo-style-pill.demo-style-pill-active {
    background: #1a1a1a; color: #fff; border-color: #1a1a1a;
}

/* Budget Locked */
.demo-budget-locked-wrap { position: relative; }
.demo-budget-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; }
.demo-budget-value { font-size: 14px; font-weight: 600; color: #1a1a1a; }
.demo-budget-slider {
    -webkit-appearance: none; width: 100%; height: 4px;
    background: #e5e5e5; border-radius: 2px; outline: none;
}
.demo-budget-slider::-webkit-slider-thumb {
    -webkit-appearance: none; width: 18px; height: 18px;
    border-radius: 50%; background: #1a1a1a; cursor: pointer;
    box-shadow: 0 2px 6px rgba(0,0,0,0.2);
}
.demo-budget-slider::-moz-range-thumb {
    width: 18px; height: 18px; border-radius: 50%;
    background: #1a1a1a; cursor: pointer; border: none;
}
.demo-budget-range { display: flex; justify-content: space-between; font-size: 12px; color: #999; margin-top: 4px; }
.demo-budget-locked-overlay {
    position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 6px;
    background: rgba(255,255,255,0.85); backdrop-filter: blur(2px);
    border-radius: 8px; font-size: 12px; font-weight: 600; color: #666;
    text-decoration: none; letter-spacing: 0.5px; cursor: pointer;
    transition: background 0.15s;
}
.demo-budget-locked-overlay:hover { background: rgba(255,255,255,0.95); }
.demo-budget-locked-overlay:focus-visible { outline: 2px solid #1a1a1a; outline-offset: 2px; }

/* Start Button */
.demo-generate-btn {
    width: 100%; padding: 14px 24px; border: none;
    border-radius: 10px; font-size: 15px; font-weight: 600;
    cursor: pointer; transition: all 0.15s; text-align: center;
}
.demo-start-btn { background: #1a1a1a; color: #fff; }
.demo-start-btn:hover { background: #333; }
.demo-start-btn:focus-visible { outline: 2px solid #1a1a1a; outline-offset: 2px; }

/* Preview Wrapper */
.demo-preview-wrapper { flex: 1; min-width: 0; }
.demo-preview { position: relative; width: 100%; }
.demo-slider-container {
    position: relative; border-radius: 12px; overflow: hidden;
    aspect-ratio: 16/10; background: #f0f0f0; user-select: none;
    -webkit-user-select: none; touch-action: none;
}
.demo-slide-img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Before / After layers */
.demo-slider-after { position: absolute; inset: 0; }
.demo-slider-before { position: absolute; inset: 0; clip-path: inset(0 85% 0 0); }

/* Labels */
.demo-slider-label {
    position: absolute; z-index: 5;
    font-size: 11px; font-weight: 600; text-transform: uppercase;
    letter-spacing: 1px; color: #fff; padding: 4px 10px;
    background: rgba(0,0,0,0.5); border-radius: 4px;
    pointer-events: none;
}
.demo-slider-label-before { bottom: 12px; left: 12px; }
.demo-slider-label-after { bottom: 12px; right: 12px; }

/* Slider divider line */
.demo-slider-divider {
    position: absolute; top: 0; bottom: 0; width: 2px;
    background: #fff; z-index: 4; pointer-events: none;
    transform: translateX(-50%);
}

/* Slider handle */
.demo-slider-handle {
    position: absolute; top: 50%; width: 36px; height: 36px;
    border-radius: 50%; background: #fff;
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
    z-index: 6; cursor: ew-resize;
    transform: translate(-50%, -50%);
    display: flex; align-items: center; justify-content: center;
    transition: box-shadow 0.15s;
}
.demo-slider-handle:hover { box-shadow: 0 2px 12px rgba(0,0,0,0.3); }
.demo-slider-handle:active { box-shadow: 0 2px 16px rgba(0,0,0,0.4); }

/* Hotspots */
.demo-hotspot {
    position: absolute; z-index: 10;
    transform: translate(-50%, -50%);
    opacity: 0; pointer-events: none;
    transition: opacity 0.25s;
}
.demo-hotspot-active { opacity: 1; pointer-events: auto; }
.demo-hotspot-dot {
    width: 22px; height: 22px; border-radius: 50%;
    background: rgba(255,255,255,0.9); border: 2px solid #fff;
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; position: relative;
    animation: hotspotPulse 2s ease-in-out infinite;
}
.demo-hotspot-dot-inner {
    width: 8px; height: 8px; border-radius: 50%; background: #1a1a1a;
}
@keyframes hotspotPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.15); }
}

/* Hotspot product card */
.demo-hotspot-card {
    position: absolute; bottom: calc(100% + 10px); left: 50%;
    transform: translateX(-50%); z-index: 20;
    background: #fff; border-radius: 10px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.15);
    padding: 10px; display: flex; gap: 10px;
    align-items: center; min-width: 240px;
    opacity: 0; pointer-events: none;
    transition: opacity 0.2s, transform 0.2s;
    transform: translateX(-50%) translateY(4px);
}
.demo-hotspot-active .demo-hotspot-card {
    opacity: 1; pointer-events: auto;
    transform: translateX(-50%) translateY(0);
}
.demo-hotspot-card::after {
    content: ''; position: absolute; top: 100%; left: 50%;
    transform: translateX(-50%);
    border: 6px solid transparent; border-top-color: #fff;
}
.demo-hotspot-card-img {
    flex-shrink: 0; width: 56px; height: 56px;
    border-radius: 8px; overflow: hidden; background: #f5f5f5;
}
.demo-hotspot-card-img img { width: 100%; height: 100%; object-fit: cover; }
.demo-hotspot-card-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.demo-hotspot-card-name { font-size: 12px; font-weight: 600; color: #1a1a1a; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.demo-hotspot-card-brand { font-size: 11px; color: #666; }
.demo-hotspot-card-price { font-weight: 600; color: #1a1a1a; }
.demo-hotspot-card-cta {
    font-size: 11px; font-weight: 700; color: #2bbbad;
    text-decoration: none; margin-top: 2px; white-space: nowrap;
}
.demo-hotspot-card-cta:hover { text-decoration: underline; }

/* Mobile card (below slider on mobile) */
.demo-mobile-card { display: none; }

.section-title {
    font-size: 36px; font-weight: 800; letter-spacing: -0.5px;
    margin-bottom: 40px;
}

/* ===== UPLOAD SECTION ===== */
.upload-section { padding: 0 24px 60px; max-width: 1000px; margin: 0 auto; }
.upload-inner { }
.upload-zone-outer {
    border: 2px dashed #d9d9d9; border-radius: 16px;
    padding: 40px; text-align: center; cursor: pointer;
    transition: all 0.3s; position: relative;
}
.upload-zone-outer:hover { border-color: #2bbbad; background: #f9fffe; }
.upload-zone-outer.dragover { border-color: #2bbbad; background: #e8f8f5; }
.upload-icon { font-size: 32px; color: #ccc; margin-bottom: 8px; }
.file-input-hidden { display: none; }

/* ===== DEMO CTA (Upload Your Own Photo) ===== */
.demo-cta {
    display: flex; flex-direction: column; align-items: center;
    padding: 48px 24px; margin-top: 40px;
    background: #f9f9f9; border-radius: 16px; text-align: center;
}
.demo-cta-icon { color: #999; margin-bottom: 12px; }
.demo-cta-title { font-size: 14px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: #1a1a1a; margin-bottom: 8px; }
.demo-cta-sub { font-size: 14px; color: #666; max-width: 400px; }

/* ===== STATS SECTION (inside demo) ===== */
.stats-section { padding: 48px 0 0; text-align: center; }
.stats-tagline { font-size: 20px; font-weight: 700; color: #1a1a1a; margin-bottom: 32px; }
.stats-row { display: flex; align-items: center; justify-content: center; gap: 32px; flex-wrap: wrap; }
.stats-item { display: flex; flex-direction: column; align-items: center; }
.stats-number { font-size: 48px; font-weight: 800; color: #1a1a1a; letter-spacing: -0.5px; }
.stats-label { font-size: 12px; font-weight: 500; color: #999; margin-top: 4px; text-transform: uppercase; letter-spacing: 0.5px; }
.stats-divider { width: 1px; height: 40px; background: #e5e5e5; }
.demo-testimonials-grid { margin-top: 40px; }

.budget-amount { font-size: 22px; font-weight: 800; color: #1a1a1a; letter-spacing: 0; }
.budget-labels-try {
    display: flex; justify-content: space-between;
    font-size: 12px; color: #999; margin-top: 4px;
}

/* Start Design Button */
.btn-start-design {
    display: block; width: 100%; margin-top: 28px;
    background: #2bbbad; color: #fff; text-align: center;
    padding: 16px; border-radius: 8px;
    font-size: 16px; font-weight: 700;
    transition: background 0.2s; cursor: pointer;
}
.btn-start-design:hover { background: #25a09a; }

/* ===== EXPLORE AI TOOLS (Horizontal Scroll) ===== */
.create-tools-section { padding: 60px 24px 80px; max-width: 1400px; margin: 0 auto; }
.create-tools-title {
    font-size: 28px; font-weight: 800; text-align: center;
    text-transform: uppercase; letter-spacing: -0.3px; margin-bottom: 32px;
}
.create-tools-wrap { position: relative; }
.create-tools-scroll {
    display: flex; gap: 20px; overflow-x: auto;
    scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
    padding-bottom: 16px; scrollbar-width: thin;
}
.create-tools-scroll::-webkit-scrollbar { height: 6px; }
.create-tools-scroll::-webkit-scrollbar-track { background: #f0f0f0; border-radius: 3px; }
.create-tools-scroll::-webkit-scrollbar-thumb { background: #ccc; border-radius: 3px; }
.create-tool-card {
    flex: 0 0 280px; scroll-snap-align: start;
    border: 1px solid #e5e5e5; border-radius: 12px;
    overflow: hidden; transition: box-shadow 0.2s, transform 0.2s;
    display: block; text-decoration: none; color: inherit;
}
.create-tool-card:hover { box-shadow: 0 4px 16px rgba(0,0,0,0.1); transform: translateY(-2px); }
.create-tool-card__img { position: relative; aspect-ratio: 1; overflow: hidden; background: #f5f5f5; border-radius: 8px; }
.create-tool-card__slideshow { position: relative; width: 100%; height: 100%; }
.create-tool-card__slide { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 0.5s; }
.create-tool-card__slide--active { opacity: 1; }
.create-tool-card__info { padding: 14px 16px; }
.create-tool-card__name { display: block; font-size: 14px; font-weight: 700; color: #1a1a1a; margin-bottom: 4px; }
.create-tool-card__desc { display: block; font-size: 13px; color: #999; }

/* ===== HOW IT WORKS (Three Steps) ===== */
.three-steps-section { padding: 80px 24px; background: #f9f9f9; }
.three-steps-title {
    font-size: 28px; font-weight: 800; text-align: center;
    text-transform: uppercase; letter-spacing: -0.3px; margin-bottom: 40px;
    max-width: 1400px; margin-left: auto; margin-right: auto;
}
.three-steps-row {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;
    max-width: 1400px; margin: 0 auto;
}
.three-steps-card {
    background: #fff; border-radius: 12px; overflow: hidden;
    border: 1px solid #e5e5e5;
}
.three-steps-img-wrap { aspect-ratio: 16/10; overflow: hidden; }
.three-steps-img-wrap img { width: 100%; height: 100%; object-fit: cover; }
.three-steps-card-body { padding: 20px; }
.three-steps-badge {
    display: inline-block; font-size: 12px; font-weight: 700;
    color: #999; margin-bottom: 8px;
}
.three-steps-card-title { font-size: 18px; font-weight: 700; color: #1a1a1a; margin-bottom: 8px; }
.three-steps-card-desc { font-size: 14px; color: #666; line-height: 1.5; }

/* ===== FAQ SECTION ===== */
.faq-section { padding: 80px 24px; max-width: 900px; margin: 0 auto; }
.faq-section-title {
    font-size: 28px; font-weight: 800; text-align: center;
    text-transform: uppercase; letter-spacing: -0.3px; margin-bottom: 40px;
}
.faq-list { display: flex; flex-direction: column; }
.faq-item { border-bottom: 1px solid #e5e5e5; }
.faq-question {
    display: flex; justify-content: space-between; align-items: center;
    font-size: 16px; font-weight: 600; cursor: pointer;
    padding: 20px 0; list-style: none;
}
.faq-question::-webkit-details-marker { display: none; }
.faq-question::marker { display: none; content: ''; }
.faq-question span { flex: 1; }
.faq-toggle { font-size: 20px; font-weight: 300; color: #999; margin-left: 12px; transition: transform 0.2s; }
.faq-answer { padding: 0 0 20px; font-size: 14px; color: #666; line-height: 1.7; }
.faq-answer.hidden { display: none; }
.faq-answer-link { color: #1a1a1a; text-decoration: underline; font-weight: 500; margin-left: 4px; }
.faq-answer-link:hover { color: #333; }

/* ===== PRICING PAGE ===== */
.pricing-section { padding: 60px 24px; max-width: 1100px; margin: 0 auto; text-align: center; }
.pricing-inner { }
.pricing-grid {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;
    text-align: left;
}
.pricing-card {
    border: 1px solid #e5e5e5; border-radius: 16px;
    padding: 32px; position: relative;
}
.card-popular { border: 2px solid #1a1a1a; }
.popular-badge {
    background: #1a1a1a; color: #fff; text-align: center;
    padding: 8px; border-radius: 8px 8px 0 0;
    font-size: 12px; font-weight: 700; letter-spacing: 1px;
    margin: -32px -32px 24px;
}
.discount-badge {
    background: #e53935; color: #fff; text-align: center;
    padding: 6px; border-radius: 8px 8px 0 0;
    font-size: 11px; font-weight: 700; letter-spacing: 0.5px;
    margin: -32px -32px 16px;
}
.plan-name { font-size: 24px; font-weight: 700; margin-bottom: 16px; }
.plan-price { margin-bottom: 24px; display: flex; align-items: baseline; gap: 8px; }
.price-old { font-size: 20px; color: #999; text-decoration: line-through; }
.price-current { font-size: 40px; font-weight: 800; }
.price-period { font-size: 14px; color: #666; }
.plan-features { margin: 24px 0; }
.plan-features li {
    display: flex; align-items: center; gap: 10px;
    padding: 6px 0; font-size: 14px;
}
.check { color: #2bbbad; font-weight: 700; font-size: 16px; }
.x { color: #e53935; font-weight: 700; font-size: 16px; }
.feature-no { color: #999; }
.cancel-text { font-size: 13px; color: #999; text-align: center; margin-top: 16px; }
.guarantee-text { font-size: 13px; color: #999; margin-top: 32px; }
.billing-toggle {
    display: inline-flex; background: #f0f0f0; border-radius: 8px; padding: 4px;
    margin-bottom: 8px;
}
.toggle-option {
    padding: 10px 24px; border-radius: 6px; font-size: 14px;
    font-weight: 500; cursor: pointer; transition: all 0.2s;
}
.toggle-option.active { background: #1a1a1a; color: #fff; }
.save-text { font-size: 14px; color: #666; margin-bottom: 40px; }

/* ===== TOOL PAGE TEMPLATE ===== */
.tool-hero { padding: 60px 24px; max-width: 1200px; margin: 0 auto; }
.tool-hero-inner { display: flex; align-items: center; gap: 60px; }
.tool-hero-content { flex: 1; }
.tool-badge {
    display: inline-block;
    background: #1a1a1a; color: #fff;
    padding: 8px 16px; border-radius: 20px;
    font-size: 13px; font-weight: 500;
    margin-bottom: 24px;
}
.tool-hero-heading {
    font-size: 42px; font-weight: 400; letter-spacing: -1px;
    margin-bottom: 12px; line-height: 1.1;
    text-transform: uppercase;
}
.tool-hero-heading .furniture-from {
    display: block; color: #1a1a1a;
}
.tool-hero-brand-logos {
    display: flex; align-items: center; gap: 24px; margin-bottom: 24px; flex-wrap: wrap;
}
.tool-hero-brand-logos img { height: 28px; opacity: 1; filter: none; }
.social-proof { display: flex; align-items: center; gap: 12px; margin-top: 24px; }
.avatar-group { display: flex; }
.avatar {
    width: 32px; height: 32px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 12px; font-weight: 600; color: #fff; margin-right: -8px;
    border: 2px solid #fff;
}
.avatar:nth-child(1) { background: #4a90d9; }
.avatar:nth-child(2) { background: #e67e22; }
.avatar:nth-child(3) { background: #2ecc71; }
.avatar:nth-child(4) { background: #9b59b6; }
.avatar:nth-child(5) { background: #e74c3c; }
.social-proof-inline .avatar:nth-child(1) { background: #4a90d9; }
.social-proof-inline .avatar:nth-child(2) { background: #e67e22; }
.social-proof-inline .avatar:nth-child(3) { background: #2ecc71; }
.social-proof-inline .avatar:nth-child(4) { background: #9b59b6; }
.social-proof-text { font-size: 14px; }
.social-proof-sub { color: #666; font-size: 13px; }
.rating { display: flex; align-items: center; gap: 4px; margin-left: 16px; padding-left: 16px; border-left: 1px solid #e5e5e5; }
.rating-text { font-size: 14px; color: #666; }
.rating-score { font-weight: 700; }
.tool-hero-image { flex: 1; max-width: 500px; }
.tool-hero-image img { width: 100%; border-radius: 12px; display: block; max-height: 400px; object-fit: cover; }

.tool-interactive { padding: 60px 24px; background: #f9f9f9; }
.tool-interactive-inner { max-width: 1200px; margin: 0 auto; }
.section-heading-center {
    text-align: center; font-size: 36px; font-weight: 800;
    letter-spacing: -0.5px; text-transform: uppercase; margin-bottom: 40px;
}
.interactive-heading {
    font-size: 32px; font-weight: 700; letter-spacing: -0.5px;
    margin-bottom: 32px; color: #1a1a1a;
}
.gallery-heading {
    font-size: 36px; font-weight: 800; letter-spacing: -0.5px;
    text-align: center; margin-bottom: 12px; color: #1a1a1a;
}
.tool-interactive-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 32px; }

.upload-zone {
    border: 2px dashed #d9d9d9; border-radius: 16px;
    padding: 60px; text-align: center; cursor: pointer;
    transition: border-color 0.2s; position: relative;
    background: #fff;
}
.upload-zone:hover { border-color: #1a1a1a; }
.upload-zone-inner { }
.upload-images-preview { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; margin-bottom: 16px; }
.upload-tool-name { font-size: 16px; font-weight: 700; margin-bottom: 4px; color: #333; }
.upload-description { font-size: 13px; color: #999; }
.free-badge {
    display: inline-block; background: #e8f5e9; color: #2bbbad;
    padding: 4px 12px; border-radius: 20px;
    font-size: 12px; font-weight: 700; margin-top: 8px;
}
.upload-input, input[type="file"] { position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; }
.config-panel { background: #fff; border-radius: 12px; padding: 24px; border: 1px solid #e5e5e5; }
.config-section { margin-bottom: 20px; }
.config-label {
    display: block; font-size: 13px; font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 8px; color: #666;
}
.style-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.style-thumb {
    border-radius: 8px; overflow: hidden; cursor: pointer;
    border: 2px solid transparent; transition: border-color 0.2s;
    background: #fff;
}
.style-thumb.active { border-color: #1a1a1a; }
.style-thumb img { width: 100%; height: 64px; object-fit: cover; display: block; }
.style-thumb-label {
    display: block; font-size: 11px; font-weight: 500;
    padding: 4px 6px; text-align: center; color: #333;
}
.show-more-styles {
    display: block; font-size: 12px; color: #666;
    margin-top: 8px; cursor: pointer;
}
.style-pills {
    display: flex; gap: 0; border-radius: 8px; overflow: hidden; border: 1px solid #e5e5e5;
}
.style-pill {
    flex: 1; padding: 10px 16px; font-size: 13px; font-weight: 500;
    background: #fff; border: none; border-right: 1px solid #e5e5e5;
    cursor: pointer; text-align: center; transition: all 0.2s;
}
.style-pill:last-child { border-right: none; }
.style-pill.active { background: #1a1a1a; color: #fff; }
.style-pill:hover:not(.active) { background: #f5f5f5; }
.config-text-label {
    font-size: 12px; font-weight: 600; color: #999;
    text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 8px;
}
.animated-word {
    display: inline-block;
    transition: opacity 0.3s ease;
}
.hero-sub-line {
    display: block; font-size: inherit; font-weight: inherit;
}
.config-text-input {
    width: 100%; border: 1px solid #d9d9d9;
    border-radius: 8px; padding: 12px; font-size: 14px;
    font-family: inherit; resize: vertical;
}
.config-text-input:focus { outline: none; border-color: #1a1a1a; }
.quick-ideas-label {
    display: block; font-size: 13px; font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 8px; color: #666;
}
.quick-ideas-grid { display: flex; flex-wrap: wrap; gap: 8px; }
.quick-idea-chip {
    padding: 8px 16px; border: 1px solid #d9d9d9;
    border-radius: 20px; font-size: 13px; cursor: pointer;
    transition: all 0.2s; background: #fff;
}
.quick-idea-chip:hover { border-color: #1a1a1a; }
.quick-idea-chip.active { background: #1a1a1a; color: #fff; border-color: #1a1a1a; }
.btn-generate {
    width: 100%; padding: 16px; margin-top: 24px;
    font-size: 15px; letter-spacing: 1px;
    background: #1a1a1a; color: #fff; border-radius: 8px;
    font-weight: 700; text-transform: uppercase;
    transition: background 0.2s; border: none; cursor: pointer;
}
.btn-generate:hover { background: #333; }

.tool-gallery { margin-top: 40px; }
.tool-gallery-inner { max-width: 1200px; margin: 0 auto; padding: 0 24px; }
.gallery-main { border-radius: 12px; overflow: hidden; margin-bottom: 12px; max-height: 500px; }
.gallery-main-img { width: 100%; display: block; object-fit: cover; max-height: 500px; }
.gallery-thumbs { display: flex; gap: 8px; }
.gallery-thumb {
    width: 80px; height: 60px; border-radius: 8px;
    overflow: hidden; cursor: pointer; border: 2px solid transparent;
    transition: border-color 0.2s;
}
.gallery-thumb.active { border-color: #1a1a1a; }
.gallery-thumb img { width: 100%; height: 100%; object-fit: cover; }
.gallery-thumb-label { font-size: 10px; text-align: center; margin-top: 4px; color: #999; }
.section-subtext-center {
    text-align: center; font-size: 16px; color: #666;
    margin-bottom: 40px; max-width: 600px; margin-left: auto; margin-right: auto;
}

.tool-problem { padding: 60px 24px; max-width: 1200px; margin: 0 auto; }
.problem-content { display: flex; gap: 60px; align-items: flex-start; }
.problem-description { flex: 1; }
.problem-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; flex: 1; }
.problem-card {
    border: 1px solid #e5e5e5; border-radius: 12px; padding: 24px;
}
.problem-card-icon { font-size: 20px; color: #666; margin-bottom: 12px; display: block; }
.problem-card-title { font-size: 16px; font-weight: 700; margin-bottom: 8px; }
.problem-card-desc { font-size: 14px; color: #666; line-height: 1.6; }

.tool-solution { padding: 60px 24px; max-width: 900px; margin: 0 auto; }
.solution-icon {
    display: inline-block; font-size: 12px; font-weight: 700;
    text-transform: uppercase; letter-spacing: 1px; margin-bottom: 12px;
    color: #2bbbad;
}
.solution-text { font-size: 15px; color: #444; line-height: 1.7; }
.solution-text a { text-decoration: underline; font-weight: 500; }

.tool-stats { padding: 60px 24px; text-align: center; background: #f9f9f9; }
.stats-label {
    font-size: 11px; font-weight: 600; text-transform: uppercase;
    letter-spacing: 1.5px; color: #999; margin-bottom: 8px;
}
.stats-grid {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 40px;
    margin-top: 40px; max-width: 1000px; margin-left: auto; margin-right: auto;
}
.stat-block { display: flex; flex-direction: column; align-items: center; }
.stat-number { font-size: 64px; font-weight: 800; letter-spacing: -1px; }
.stat-label {
    font-size: 11px; font-weight: 600; text-transform: uppercase;
    letter-spacing: 1.5px; color: #999; margin-top: 8px;
}

.tool-testimonials { padding: 0 24px 80px; max-width: 1400px; margin: 0 auto; }
.testimonials-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.testimonial-card {
    border: 1px solid #e5e5e5; border-radius: 12px; padding: 24px;
}
.testimonial-header { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.testimonial-avatar {
    width: 44px; height: 44px; border-radius: 50%;
    background: #2bbbad; color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: 14px; font-weight: 700;
}
.testimonial-info { display: flex; flex-direction: column; }
.testimonial-name { font-size: 14px; font-weight: 600; }
.testimonial-country { font-size: 12px; color: #999; }
.testimonial-stars { color: #f5a623; font-size: 14px; letter-spacing: 2px; margin-bottom: 8px; }
.testimonial-text { font-size: 14px; color: #555; line-height: 1.6; margin-top: 8px; }

.tool-faq { padding: 60px 24px; max-width: 900px; margin: 0 auto; }

.tool-cta { padding: 60px 24px; text-align: center; background: #f9f9f9; }
.cta-heading {
    font-size: 36px; font-weight: 800; letter-spacing: -0.5px;
    text-transform: uppercase; margin-bottom: 12px;
}
.cta-subtext { font-size: 16px; color: #666; margin-bottom: 32px; }
.cta-buttons { display: flex; gap: 16px; justify-content: center; }

/* ===== WORKSPACE PAGE ===== */
.workspace-section { height: calc(100vh - 56px); }
.workspace-layout { display: flex; height: 100%; }
.workspace-canvas { flex: 1; display: flex; flex-direction: column; background: #fafafa; }
.workspace-topbar {
    display: flex; align-items: center; justify-content: space-between;
    padding: 12px 20px; border-bottom: 1px solid #e5e5e5; background: #fff;
}
.back-link { font-size: 13px; font-weight: 600; color: #1a1a1a; letter-spacing: 0.3px; }
.workspace-tabs { display: flex; gap: 24px; }
.tab {
    font-size: 14px; font-weight: 500; color: #666; cursor: pointer;
    padding: 8px 0; border-bottom: 2px solid transparent;
}
.tab.active { color: #1a1a1a; border-bottom-color: #1a1a1a; }
.canvas-area {
    flex: 1; display: flex; align-items: center; justify-content: center;
    position: relative; padding: 24px;
}
.analyzing-overlay { text-align: center; }
.analyzing-title { font-size: 14px; font-weight: 600; letter-spacing: 1px; color: #666; margin-bottom: 4px; }
.analyzing-pct { font-size: 14px; font-weight: 700; color: #1a1a1a; }
.analyzing-sub { font-size: 12px; color: #999; margin-top: 4px; margin-bottom: 20px; }
.analyzing-image {
    position: relative; width: 300px; border-radius: 12px; overflow: hidden;
    box-shadow: 0 4px 20px rgba(0,0,0,0.1);
}
.analyzing-image img { width: 100%; display: block; }
.image-number {
    position: absolute; top: 12px; right: 12px;
    background: rgba(0,0,0,0.5); color: #fff;
    padding: 4px 8px; border-radius: 4px; font-size: 12px; font-weight: 600;
}
.loading-spinner {
    width: 30px; height: 30px; border: 3px solid #e5e5e5;
    border-top-color: #1a1a1a; border-radius: 50%;
    margin: 16px auto 0; animation: spin 1s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.workspace-prompt-bar {
    background: #fff; border-top: 1px solid #e5e5e5;
    padding: 16px 20px;
}
.prompt-status { font-size: 14px; color: #666; margin-bottom: 8px; }
.prompt-controls { display: flex; align-items: center; gap: 12px; }
.upload-furniture-btn {
    display: flex; align-items: center; gap: 6px;
    font-size: 12px; font-weight: 600; color: #666;
    text-transform: uppercase; letter-spacing: 0.5px;
}
.generate-photo-link { font-size: 13px; color: #666; text-decoration: underline; cursor: pointer; }
.quality-badge {
    margin-left: auto; font-size: 12px; color: #999;
    background: #f0f0f0; padding: 4px 10px; border-radius: 4px;
}
.quality-selector { }
.quality-select {
    border: 1px solid #d9d9d9; border-radius: 4px; padding: 4px 8px;
    font-size: 12px;
}
.send-btn {
    width: 36px; height: 36px; border-radius: 50%;
    background: #1a1a1a; color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: 16px;
}

/* Workspace Sidebar */
.workspace-sidebar {
    width: 340px; border-left: 1px solid #e5e5e5;
    background: #fff; overflow-y: auto; padding: 20px;
}
.workspace-topbar {
    display: flex; align-items: center; gap: 12px;
    padding: 12px 24px; border-bottom: 1px solid #e5e5e5;
}
.workspace-topbar .back-link {
    font-size: 13px; font-weight: 600; color: #1a1a1a; letter-spacing: 1px;
}
.workspace-tabs-bar {
    display: flex; align-items: center; gap: 0;
    border-bottom: 1px solid #e5e5e5;
}
.tab-item {
    padding: 14px 24px; font-size: 14px; font-weight: 500;
    color: #666; cursor: pointer; border-bottom: 2px solid transparent;
}
.tab-item.tab-active {
    color: #1a1a1a; border-bottom-color: #1a1a1a; font-weight: 600;
}
.tab-item.tab-label { letter-spacing: 0.3px; }
.workspace-modify-header {
    display: flex; align-items: center; justify-content: center;
    gap: 12px; padding: 16px 24px;
}
.modify-title { font-size: 14px; font-weight: 700; letter-spacing: 2px; color: #1a1a1a; }
.modify-credits { font-size: 12px; color: #999; letter-spacing: 1px; }
.summary-btn {
    margin-left: auto; font-size: 14px; font-weight: 600; color: #1a1a1a;
    border: 1px solid #e5e5e5; border-radius: 6px; padding: 8px 16px;
}
.workspace-photo-grid {
    display: grid; grid-template-columns: repeat(3, 1fr);
    gap: 4px; padding: 0 24px 16px;
}
.photo-cell {
    border-radius: 8px; overflow: hidden; aspect-ratio: 4/3;
}
.photo-cell img { width: 100%; height: 100%; object-fit: cover; }
.canvas-actions {
    display: flex; gap: 8px; padding: 0 24px 16px;
}
.action-btn {
    padding: 6px 12px; border-radius: 6px; background: #f0f0f0;
    font-size: 13px; color: #333; cursor: pointer;
}
.prompt-input-field {
    width: 100%; border: none; font-size: 15px; color: #333;
    outline: none; font-family: inherit; padding: 8px 0;
    background: transparent;
}
.prompt-input-field::placeholder { color: #999; }
.btn-design-room {
    width: 100%; padding: 16px; background: #1a1a1a; color: #fff;
    border-radius: 8px; font-size: 14px; font-weight: 700;
    letter-spacing: 1px; text-transform: uppercase; margin-top: 20px;
    border: none; cursor: pointer; transition: background 0.2s;
}
.btn-design-room:hover { background: #333; }
.budget-row { display: flex; justify-content: flex-end; margin-bottom: 8px; }
.budget-slider-wrap { width: 100%; }
.budget-range {
    width: 100%; -webkit-appearance: none; height: 4px;
    background: #e5e5e5; border-radius: 2px; outline: none;
}
.budget-range::-webkit-slider-thumb {
    -webkit-appearance: none; width: 16px; height: 16px;
    border-radius: 50%; background: #1a1a1a; cursor: pointer;
}
.budget-labels {
    display: flex; justify-content: space-between;
    font-size: 11px; color: #999; margin-top: 4px;
}
.workspace-sidebar-left {
    width: 340px; border-right: 1px solid #e5e5e5;
    background: #fff; overflow-y: auto; padding: 20px;
}
.sidebar-top-row {
    display: flex; align-items: center; gap: 12px;
    margin-bottom: 20px; padding-bottom: 16px; border-bottom: 1px solid #e5e5e5;
}
.sidebar-top-row .back-link {
    font-size: 13px; font-weight: 600; color: #1a1a1a;
}
.sidebar-section { margin-bottom: 24px; }
.sidebar-label {
    font-size: 11px; font-weight: 600; text-transform: uppercase;
    letter-spacing: 1px; color: #666; margin-bottom: 12px; display: block;
}
.room-type-grid, .room-grid, .style-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.room-option, .style-option {
    position: relative; border-radius: 8px; overflow: hidden;
    cursor: pointer; border: 2px solid transparent;
}
.room-option.active, .style-option.active { border-color: #1a1a1a; }
.room-option img, .style-option img { width: 100%; height: 64px; object-fit: cover; display: block; }
.room-check, .style-check {
    position: absolute; top: 4px; right: 4px;
    width: 20px; height: 20px; border-radius: 50%;
    background: #1a1a1a; color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: 11px;
}
.room-name, .style-name {
    display: block; font-size: 11px; font-weight: 500;
    padding: 4px 6px; text-align: center;
}
.show-more {
    display: block; font-size: 12px; color: #666;
    margin-top: 8px; cursor: pointer;
}

/* Color Palette */
.palette-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.palette-option {
    border: 1px solid #e5e5e5; border-radius: 8px;
    padding: 8px; text-align: center; cursor: pointer;
}
.palette-option.active { border-color: #1a1a1a; }
.palette-colors { display: flex; justify-content: center; gap: 4px; margin-bottom: 4px; }
.color-dot { width: 16px; height: 16px; border-radius: 50%; }
.c1 { background: #d4c5a9; } .c2 { background: #a89279; } .c3 { background: #6b5b4a; } .c4 { background: #3a3028; }
.c5 { background: #f5e6d3; } .c6 { background: #e8c9a0; } .c7 { background: #d4a574; } .c8 { background: #c75050; }
.c9 { background: #e8f0f5; } .c10 { background: #b8d4e8; } .c11 { background: #7ba8c7; } .c12 { background: #4a7a9c; }
.c13 { background: #f5f0e8; } .c14 { background: #d4c9a8; } .c15 { background: #8a9c6b; } .c16 { background: #4a5c3a; }
.c17 { background: #f0f0f0; } .c18 { background: #b0b0b0; } .c19 { background: #606060; } .c20 { background: #2a2a2a; }
.palette-name { font-size: 11px; font-weight: 500; }
.palette-custom { display: flex; flex-direction: column; align-items: center; justify-content: center; }
.plus-icon { font-size: 20px; color: #999; }

.sidebar-section .budget-amount {
    font-size: 24px; font-weight: 800;
}
.btn-generate-full {
    width: 100%; padding: 14px; background: #1a1a1a; color: #fff;
    border-radius: 8px; font-size: 14px; font-weight: 700;
    letter-spacing: 1px; text-transform: uppercase;
    display: flex; align-items: center; justify-content: center; gap: 8px;
    border: none; cursor: pointer; transition: background 0.2s;
}
.btn-generate-full:hover { background: #333; }
.spinner-icon {
    width: 16px; height: 16px; border: 2px solid #bbb;
    border-top-color: #666; border-radius: 50%;
    animation: spin 1s linear infinite; display: inline-block;
}

/* ===== FOOTER ===== */
.site-footer {
    background: #000; color: #fff; padding: 60px 24px 0;
}
.footer-inner {
    max-width: 1400px; margin: 0 auto;
}
.footer-columns {
    display: grid; grid-template-columns: 1.2fr 1fr 1fr 0.8fr 1.5fr; gap: 32px;
}
.footer-col h4, .footer-col-title {
    font-size: 12px; font-weight: 700;
    letter-spacing: 1px; margin-bottom: 16px; color: #999;
}
.footer-col a, .footer-links a {
    display: block; font-size: 14px; color: #ccc;
    padding: 4px 0; transition: color 0.2s;
}
.footer-col a:hover, .footer-links a:hover { color: #fff; }
.footer-col-title-spaced { margin-top: 24px; }
.footer-col-right { display: flex; flex-direction: column; }
.footer-retailers-title { font-size: 12px; font-weight: 700; letter-spacing: 1px; color: #999; margin-bottom: 16px; }
.retailer-logos { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; margin-bottom: 24px; }
.retailer-logo-img { height: 24px; opacity: 0.7; filter: brightness(0) invert(1); }
.footer-social-text { display: flex; flex-direction: column; gap: 8px; margin-bottom: 24px; }
.footer-social-text a { font-size: 14px; color: #ccc; transition: color 0.2s; }
.footer-social-text a:hover { color: #fff; }
.footer-ask-ai { font-size: 12px; font-weight: 700; letter-spacing: 1px; color: #999; margin-top: 16px; }
.footer-ask-ai-buttons { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.footer-ask-ai__btn { display: flex; align-items: center; gap: 6px; padding: 8px 12px; border: 1px solid #333; border-radius: 8px; font-size: 13px; color: #ccc; transition: background 0.15s; }
.footer-ask-ai__btn:hover { background: #1a1a1a; }
.footer-ask-ai__btn svg { width: 20px; height: 20px; flex-shrink: 0; }
.footer-google-cloud { margin-left: auto; }
.google-cloud-img { height: 24px; opacity: 0.7; filter: brightness(0) invert(1); }
.footer-bottom-bar {
    display: flex; align-items: center; justify-content: space-between;
    border-top: 1px solid #333; padding: 20px 0; margin-top: 40px;
}
.footer-logo-bottom { font-size: 18px; font-weight: 800; letter-spacing: -0.5px; }
.footer-bottom-links { display: flex; gap: 24px; }
.footer-bottom-links a { font-size: 13px; color: #999; transition: color 0.2s; }
.footer-bottom-links a:hover { color: #fff; }
.footer-copy { font-size: 13px; color: #666; }

/* ===== CREATE PAGE ===== */
.create-section { padding: 40px 24px; max-width: 1400px; margin: 0 auto; }
.create-section-header { text-align: center; margin-bottom: 40px; }
.create-content { display: flex; gap: 40px; }
.create-upload-area { flex: 1.5; }
.upload-zone {
    border: 2px dashed #d9d9d9; border-radius: 16px;
    padding: 60px; text-align: center; cursor: pointer;
    transition: border-color 0.2s; position: relative;
}
.upload-zone:hover { border-color: #1a1a1a; }
.upload-icon-large { font-size: 48px; color: #ccc; margin-bottom: 16px; }
.upload-zone p { font-size: 16px; color: #666; }
.upload-subtext { font-size: 13px; color: #999; margin-top: 4px; }
.file-input {
    position: absolute; inset: 0; opacity: 0; cursor: pointer;
}
.create-sidebar { flex: 1; }
.create-sidebar h3 { font-size: 20px; font-weight: 700; margin-bottom: 20px; }
.prompt-section { margin-bottom: 24px; }
.prompt-section label, .options-section label {
    display: block; font-size: 13px; font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 8px; color: #666;
}
.prompt-textarea {
    width: 100%; height: 100px; border: 1px solid #d9d9d9;
    border-radius: 8px; padding: 12px; font-size: 14px;
    font-family: inherit; resize: vertical;
}
.prompt-textarea:focus { outline: none; border-color: #1a1a1a; }
.options-section { margin-bottom: 20px; }
.option-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
    padding: 8px 16px; border: 1px solid #d9d9d9;
    border-radius: 20px; font-size: 13px; cursor: pointer;
    transition: all 0.2s;
}
.chip:hover { border-color: #1a1a1a; }
.chip.active { background: #1a1a1a; color: #fff; border-color: #1a1a1a; }
.budget-slider { display: flex; align-items: center; gap: 16px; }
.range-input { flex: 1; }
.budget-value { font-size: 16px; font-weight: 700; white-space: nowrap; }
.btn-generate {
    width: 100%; padding: 16px; margin-top: 24px;
    font-size: 15px; letter-spacing: 1px;
}

/* ===== PROBLEM / SOLUTION SECTIONS ===== */
.problem-section {
    padding: 60px 24px;
    background: #fff;
    border-top: 1px solid #e5e5e5;
}
.problem-inner { max-width: 1200px; margin: 0 auto; }
.problem-header { margin-bottom: 40px; }
.problem-label {
    display: flex; align-items: center; gap: 12px;
    font-size: 12px; font-weight: 700; text-transform: uppercase;
    letter-spacing: 1px; color: #999; margin-bottom: 16px;
}
.dash { font-size: 18px; color: #ccc; }
.problem-title {
    font-size: 36px; font-weight: 800; letter-spacing: -0.5px;
    line-height: 1.2; max-width: 600px; margin-bottom: 12px;
}
.problem-desc {
    font-size: 16px; color: #666; max-width: 500px;
    margin-left: auto;
}
.audience-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.audience-card {
    border: 1px solid #e5e5e5; border-radius: 12px;
    padding: 24px;
}
.audience-icon { font-size: 20px; color: #666; margin-bottom: 12px; display: block; }
.audience-card h4 { font-size: 16px; font-weight: 700; margin-bottom: 8px; }
.audience-card p { font-size: 14px; color: #666; line-height: 1.6; }

.solution-section {
    padding: 40px 24px 60px;
    max-width: 1200px; margin: 0 auto;
}
.solution-inner .solution-card {
    background: #f9f9f9; border-radius: 12px; padding: 32px;
    display: flex; align-items: flex-start; justify-content: space-between;
}
.solution-content { flex: 1; }
.solution-badge {
    display: inline-block; font-size: 12px; font-weight: 700;
    text-transform: uppercase; letter-spacing: 1px; margin-bottom: 12px;
}
.solution-content p { font-size: 15px; color: #444; line-height: 1.7; }
.solution-content a { text-decoration: underline; font-weight: 500; }
.solution-expand {
    width: 36px; height: 36px; border-radius: 50%;
    border: 1px solid #d9d9d9; background: #fff;
    font-size: 18px; color: #666; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    margin-left: 16px;
}

/* ===== STATS SECTION ===== */
.stats-section {
    padding: 80px 24px;
    text-align: center;
}
.stats-inner { max-width: 1000px; margin: 0 auto; }
.stats-grid {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 40px;
    margin-top: 40px;
}
.stat-item { display: flex; flex-direction: column; align-items: center; }
.stat-number { font-size: 64px; font-weight: 800; letter-spacing: -1px; }
.stat-label {
    font-size: 11px; font-weight: 600; text-transform: uppercase;
    letter-spacing: 1.5px; color: #999; margin-top: 8px;
}

/* ===== VIDEO REVIEWS ===== */
.video-reviews-section { padding: 60px 0; overflow: hidden; }
.video-reviews-viewport { width: 100%; overflow: hidden; }
.video-reviews-track { display: flex; gap: 16px; animation: scroll-reviews 30s linear infinite; width: max-content; }
.video-reviews-track:hover { animation-play-state: paused; }
.video-review-slide { flex-shrink: 0; width: 320px; }
.video-review-slide.is-dup { }
.video-review-facade { display: block; position: relative; border-radius: 12px; overflow: hidden; cursor: pointer; border: none; background: none; padding: 0; width: 100%; text-align: left; }
.video-review-facade img { width: 100%; height: auto; display: block; }
.video-review-play {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    width: 56px; height: 56px; border-radius: 50%; background: rgba(255,255,255,0.9);
    display: flex; align-items: center; justify-content: center;
    transition: transform 0.2s;
}
.video-review-facade:hover .video-review-play { transform: translate(-50%, -50%) scale(1.1); }
.video-play-icon { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); opacity: 0.85; }
@keyframes scroll-reviews { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }

/* ===== TESTIMONIALS ===== */
.testimonials-section { padding: 0 24px 80px; max-width: 1400px; margin: 0 auto; }
.testimonial-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.testimonial-card {
    border: 1px solid #e5e5e5; border-radius: 12px; padding: 24px;
}
.testimonial-header { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.avatar-circle {
    width: 44px; height: 44px; border-radius: 50%;
    background: #2bbbad; color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: 14px; font-weight: 700;
}
.testimonial-info { display: flex; flex-direction: column; }
.testimonial-info strong { font-size: 14px; font-weight: 600; }
.country { font-size: 12px; color: #999; }
.testimonial-card p { font-size: 14px; color: #555; line-height: 1.6; margin-top: 8px; }

/* ===== EXTERIOR HERO ===== */
.exterior-hero {
    padding: 60px 24px 40px;
    max-width: 1400px; margin: 0 auto;
}
.exterior-hero-inner {
    display: flex; align-items: center; gap: 60px;
}
.exterior-hero-left { flex: 1; }
.exterior-hero-right { flex: 1; }
.exterior-hero .badge {
    display: inline-block; background: #1a1a1a; color: #fff;
    padding: 8px 16px; border-radius: 20px;
    font-size: 13px; font-weight: 500; margin-bottom: 24px;
}
.exterior-hero .hero-title {
    font-size: 52px; font-weight: 800; line-height: 1.05;
    letter-spacing: -1.5px; text-transform: uppercase;
    margin-bottom: 32px;
}
.arrow { font-size: 18px; }
.social-proof-inline {
    display: flex; align-items: center; gap: 12px;
    margin-top: 40px; font-size: 14px;
}
.social-proof-inline .proof-avatars { display: flex; }
.social-proof-inline .avatar {
    width: 32px; height: 32px; border-radius: 50%;
    background: #ddd; border: 2px solid #fff; margin-left: -8px;
    background-size: cover; background-position: center;
}
.social-proof-inline .avatar:nth-child(1) { background-color: #4a90d9; }
.social-proof-inline .avatar:nth-child(2) { background-color: #e67e22; }
.social-proof-inline .avatar:nth-child(3) { background-color: #2ecc71; }
.social-proof-inline .avatar:nth-child(4) { background-color: #9b59b6; }
.social-proof-inline .avatar:first-child { margin-left: 0; }
.social-proof-inline strong { font-weight: 600; }
.proof-sub { color: #666; font-size: 13px; }

/* Hero Trust Bar */
.hero-trust-bar {
    display: flex; align-items: center; gap: 12px;
    margin-top: 24px; padding: 12px 16px;
    background: #fff; border: 1px solid #e5e5e5;
    border-radius: 12px; font-size: 13px;
}
.hero-trust-avatars { display: flex; }
.hero-trust-avatar {
    width: 32px; height: 32px; border-radius: 50%;
    background: #ddd; border: 2px solid #fff; margin-left: -8px;
}
.hero-trust-avatar:first-child { margin-left: 0; }
.hero-trust-text { display: flex; flex-direction: column; gap: 2px; }
.hero-trust-number { font-weight: 600; font-size: 13px; color: #1a1a1a; }
.hero-trust-label { font-size: 12px; color: #666; }
.hero-trust-divider { width: 1px; height: 32px; background: #e5e5e5; flex-shrink: 0; }
.hero-trust-reviews { display: flex; align-items: center; gap: 12px; }
.hero-trust-reviews-left { font-size: 12px; color: #666; line-height: 1.3; }
.hero-trust-reviews-text strong { color: #1a1a1a; font-weight: 600; }
.hero-trust-reviews-right { display: flex; flex-direction: column; gap: 2px; }
.hero-trust-stars { display: flex; gap: 1px; }
.hero-trust-star { color: #f59e0b; font-size: 14px; }
.hero-trust-star.half { opacity: 0.5; }
.hero-trust-rating { font-size: 12px; color: #666; }
.sketch-container {
    background: #f5f5f5; border-radius: 16px;
    padding: 40px; text-align: center;
}
.sketch-container img { width: 100%; max-width: 500px; margin: 0 auto; }

/* ===== CREATE PAGE DEMO ===== */
.create-demo-section { padding: 40px 24px 60px; max-width: 1400px; margin: 0 auto; }
.create-demo-inner { display: flex; gap: 40px; align-items: flex-start; }
.create-demo-left { flex: 1.3; }
.create-demo-right { flex: 1; padding-top: 20px; }
.demo-image-container { position: relative; }
.demo-slider {
    position: relative; border-radius: 12px; overflow: hidden;
    aspect-ratio: 16/10; background: #f0f0f0; cursor: ew-resize;
}
.demo-before, .demo-after {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
}
.demo-before img, .demo-after img { width: 100%; height: 100%; object-fit: cover; }
.demo-after { clip-path: inset(0 0 0 50%); }
.demo-handle {
    position: absolute; top: 0; bottom: 0; left: 50%; width: 3px;
    background: #fff; z-index: 5; transform: translateX(-50%);
    cursor: ew-resize;
}
.handle-icon {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    width: 40px; height: 40px; border-radius: 50%;
    background: #fff; box-shadow: 0 2px 10px rgba(0,0,0,0.25);
    display: flex; align-items: center; justify-content: center;
    font-size: 11px; color: #333; font-weight: 700;
}

/* ===== PROGRESS BAR ===== */
.progress-bar {
    width: 200px; height: 4px; background: #e5e5e5;
    border-radius: 2px; margin: 8px auto; overflow: hidden;
}
.progress-fill {
    height: 100%; background: #1a1a1a; border-radius: 2px;
    transition: width 0.5s ease;
}

/* ===== AUTH PAGES (SIGN-IN / SIGN-UP) ===== */
.auth-page {
    min-height: calc(100vh - 56px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 24px;
    background: #f9f9f9;
}
.auth-container {
    display: flex;
    max-width: 1000px;
    width: 100%;
    background: #fff;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 4px 24px rgba(0,0,0,0.08);
}
.auth-left {
    flex: 1;
    padding: 48px 40px;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.auth-logo-icon {
    margin-bottom: 24px;
}
.auth-logo-icon svg {
    display: block;
}
.auth-heading {
    font-size: 28px;
    font-weight: 400;
    letter-spacing: 4px;
    margin-bottom: 8px;
    text-align: center;
}
.auth-subtext {
    font-size: 15px;
    color: #888;
    margin-bottom: 32px;
    text-align: center;
}
.auth-social-buttons {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 24px;
    width: 100%;
    max-width: 320px;
}
.auth-social-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 14px;
    border: 1px solid #e5e5e5;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    background: #fff;
    color: #333;
}
.auth-social-btn img {
    flex-shrink: 0;
}
.auth-social-btn:hover {
    background: #f5f5f5;
    border-color: #ccc;
}
.auth-divider {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 24px;
    color: #999;
    font-size: 13px;
    width: 100%;
    max-width: 320px;
}
.auth-divider::before, .auth-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: #e5e5e5;
}
.auth-email-form {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 24px;
    width: 100%;
    max-width: 320px;
}
.auth-email-label {
    font-size: 12px;
    font-weight: 600;
    color: #666;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}
.auth-email-input {
    width: 100%;
    padding: 14px;
    border: 1px solid #e5e5e5;
    border-radius: 8px;
    font-size: 14px;
    font-family: inherit;
}
.auth-email-input:focus {
    outline: none;
    border-color: #1a1a1a;
}
.auth-email-btn {
    width: 100%;
    padding: 14px;
    background: #1a1a1a;
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    cursor: pointer;
    transition: background 0.2s;
}
.auth-email-btn:hover {
    background: #333;
}
.auth-safe-notice {
    font-size: 13px;
    color: #888;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    margin-top: 8px;
}
.auth-privacy {
    font-size: 12px;
    color: #999;
    line-height: 1.6;
}
.auth-privacy a {
    text-decoration: underline;
    color: #666;
}
.auth-switch {
    font-size: 14px;
    color: #666;
    margin-top: 16px;
}
.auth-switch a {
    color: #1a1a1a;
    font-weight: 600;
}
.auth-right {
    flex: 1;
    background: #f9f9f9;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px;
}
.auth-showcase {
    width: 100%;
    max-width: 420px;
}
.auth-comparison {
    margin-bottom: 24px;
}
.auth-comparison-img {
    position: relative;
    border-radius: 12px;
    overflow: hidden;
}
.auth-comparison-img img {
    width: 100%;
    display: block;
    border-radius: 12px;
}
.auth-comparison-tag {
    position: absolute;
    bottom: 12px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1px;
    color: #fff;
    padding: 4px 10px;
    background: rgba(0,0,0,0.5);
    border-radius: 4px;
}
.tag-before { left: 12px; }
.tag-after { right: 12px; }
.auth-stats-bar {
    display: flex;
    justify-content: space-around;
    margin-bottom: 24px;
}
.auth-stat {
    text-align: center;
}
.auth-stat-number {
    display: block;
    font-size: 22px;
    font-weight: 700;
    color: #1a1a1a;
}
.auth-stat-label {
    display: block;
    font-size: 10px;
    color: #999;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-top: 2px;
}
.auth-review {
    text-align: center;
}
.auth-review-stars {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2px;
    margin-bottom: 8px;
}
.auth-review-stars .star {
    color: #f5a623;
    font-size: 14px;
}
.auth-review-stars .auth-review-count {
    font-size: 13px;
    color: #666;
    margin-left: 4px;
}
.auth-review-text {
    font-size: 14px;
    color: #555;
    font-style: italic;
    margin-bottom: 8px;
    line-height: 1.5;
}
.auth-review-author {
    font-size: 13px;
    color: #999;
}

/* ===== COMPARISON TABLE ===== */
.comparison-section {
    padding: 80px 24px; max-width: 1100px; margin: 0 auto;
}
.comparison-title {
    font-size: 28px; font-weight: 800; text-align: center;
    letter-spacing: -0.3px; margin-bottom: 40px;
}
.comparison-highlight { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }
.comparison-table-wrapper { overflow-x: auto; }
.comparison-table { width: 100%; border-collapse: collapse; }
.comparison-table th, .comparison-table td {
    padding: 14px 16px; text-align: center; font-size: 14px;
    border-bottom: 1px solid #e5e5e5;
}
.comparison-table th { font-weight: 700; font-size: 13px; text-transform: uppercase; letter-spacing: 0.5px; background: #f5f5f5; }
.comparison-feature-col { text-align: left !important; width: 25%; }
.comparison-housora-col { background: #1a1a1a !important; color: #fff; }
.comparison-feature-cell { text-align: left !important; }
.comparison-feature-name { display: block; font-weight: 600; font-size: 14px; color: #1a1a1a; }
.comparison-feature-desc { display: block; font-size: 12px; color: #999; margin-top: 2px; }
.comparison-check { color: #2bbbad; display: inline-flex; }
.comparison-check svg { stroke: #2bbbad; }
.comparison-check-other { color: #999; display: inline-flex; }
.comparison-check-other svg { stroke: #999; }
.comparison-cross { color: #ccc; display: inline-flex; }
.comparison-cross svg { stroke: #ccc; }
.comparison-mobile-note {
    font-size: 14px; color: #666; text-align: center;
    margin-top: 24px; font-style: italic;
}

/* ===== ROOM SEO SECTION ===== */
.room-seo-section { padding: 60px 24px; max-width: 1100px; margin: 0 auto; }
.room-seo-title {
    font-size: 24px; font-weight: 800; letter-spacing: -0.3px;
    margin-bottom: 16px; line-height: 1.3;
}
.room-seo-intro { font-size: 15px; color: #555; line-height: 1.7; margin-bottom: 32px; }
.room-seo-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-bottom: 32px; }
.room-seo-card {
    border: 1px solid #e5e5e5; border-radius: 12px; padding: 20px;
}
.room-seo-icon { color: #999; display: block; margin-bottom: 12px; }
.room-seo-card h3 { font-size: 15px; font-weight: 700; color: #1a1a1a; margin-bottom: 8px; }
.room-seo-card p { font-size: 13px; color: #666; line-height: 1.5; }
.room-seo-more { font-size: 14px; color: #666; line-height: 1.7; }
.room-seo-more a { color: #2bbbad; font-weight: 600; text-decoration: underline; }

/* ===== TOOL EXPLORE MORE + KEEP READING ===== */
.tool-explore { padding: 60px 24px 80px; max-width: 1200px; margin: 0 auto; }
.tool-explore-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; }
.explore-column { display: flex; flex-direction: column; }
.explore-col-title { font-size: 16px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; color: #1a1a1a; margin-bottom: 20px; }
.explore-list { display: flex; flex-direction: column; gap: 0; }
.explore-item {
    display: flex; align-items: center; gap: 14px;
    padding: 14px 0; border-bottom: 1px solid #e5e5e5;
    transition: background 0.15s; text-decoration: none;
}
.explore-item:hover { background: #f9f9f9; }
.explore-item-img { width: 64px; height: 48px; border-radius: 6px; object-fit: cover; flex-shrink: 0; }
.explore-item-text { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.explore-item-name { font-size: 14px; font-weight: 600; color: #1a1a1a; }
.explore-item-desc { font-size: 12px; color: #999; }
.explore-item i { font-size: 14px; color: #ccc; flex-shrink: 0; }

/* ===== BEFORE-AFTER SECTION ===== */
.before-after-section { padding: 60px 24px; max-width: 1100px; margin: 0 auto; }
.before-after-row {
    display: flex; gap: 40px; align-items: center;
    margin-bottom: 60px;
}
.before-after-row:last-child { margin-bottom: 0; }
.before-after-text-box { flex: 1; }
.before-after-text-box h3 {
    font-size: 28px; font-weight: 800; color: #1a1a1a;
    letter-spacing: -0.3px; margin-bottom: 12px; line-height: 1.2;
}
.before-after-text-box p { font-size: 15px; color: #666; margin-bottom: 16px; }
.before-after-text-box ul { list-style: disc; padding-left: 20px; }
.before-after-text-box li { font-size: 14px; color: #555; line-height: 1.8; }
.before-after-card { flex: 1; border-radius: 12px; overflow: hidden; }
.before-after-card img { width: 100%; height: auto; display: block; }
.single-feature-image { border-radius: 12px; }
.before-after-comparison {
    display: flex; border-radius: 12px; overflow: hidden;
    border: 1px solid #e5e5e5;
}
.before-side, .after-side { flex: 1; }
.before-side img, .after-side img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mobile-br { display: none; }

/* ===== RESPONSIVE ===== */
@media (max-width: 1024px) {
    .hero-inner { flex-direction: column; }
    .hero-right { max-width: 100%; }
    .try-content { flex-direction: column; }
    .demo-layout { flex-direction: column; }
    .demo-panel { flex: none; width: 100%; }
    .three-steps-row { grid-template-columns: 1fr; }
    .pricing-grid { grid-template-columns: 1fr; max-width: 400px; margin: 0 auto; }
    .testimonials-grid { grid-template-columns: repeat(2, 1fr); }
    .testimonial-grid { grid-template-columns: repeat(2, 1fr); }
    .stats-grid { grid-template-columns: repeat(2, 1fr); }
    .room-seo-cards { grid-template-columns: repeat(2, 1fr); }
    .workspace-sidebar { width: 280px; }
    .footer-columns { grid-template-columns: repeat(3, 1fr); }
    .tool-comparison { flex-direction: column; }
    .comp-before, .comp-after { max-width: 100%; }
    .create-demo-inner { flex-direction: column; }
    .create-tools-scroll { gap: 16px; }
    .create-tool-card { flex: 0 0 240px; }
    .tool-interactive-grid { grid-template-columns: 1fr; }
    .problem-cards { grid-template-columns: 1fr; }
    .before-after-row { flex-direction: column; }
    .comparison-hide-mobile { display: none; }
}
@media (max-width: 768px) {
    .hero-title { font-size: 36px; }
    .section-title { font-size: 28px; }
    .section-heading-center { font-size: 28px; }
    .desktop-header-nav { display: none; }
    .header-search-icon-mobile { display: flex; }
    .menu-hamburger { display: flex; }
    .create-header { padding: 0 16px; }
    .testimonials-grid { grid-template-columns: 1fr; }
    .testimonial-grid { grid-template-columns: 1fr; }
    .features-inner { grid-template-columns: 1fr; }
    .workspace-layout { flex-direction: column; }
    .workspace-sidebar { width: 100%; border-left: none; border-top: 1px solid #e5e5e5; }
    .workspace-sidebar-left { width: 100%; border-right: none; border-bottom: 1px solid #e5e5e5; }
    .create-tool-card { flex: 0 0 260px; }
    .create-demo-right { padding-top: 0; }
    .product-popup { min-width: 220px; }
    .demo-section { padding: 40px 16px; }
    .demo-section-title { font-size: 24px; }
    .demo-panel { gap: 16px; }
    .demo-style-pill { padding: 6px 12px; font-size: 12px; }
    .demo-slider-container { aspect-ratio: 4/3; }
    .demo-hotspot-card { min-width: 200px; padding: 8px; }
    .demo-hotspot-card-img { width: 44px; height: 44px; }
    .demo-hotspot-card-name { font-size: 11px; }
    .demo-hotspot-card-brand { font-size: 10px; }
    .demo-hotspot-card-cta { font-size: 10px; }
    .before-after-row { flex-direction: column; gap: 24px; }
    .mobile-br { display: block; }
    .room-seo-cards { grid-template-columns: 1fr; }
    .comparison-table { font-size: 12px; }
    .comparison-table th, .comparison-table td { padding: 10px 8px; }
    .three-steps-row { grid-template-columns: 1fr; }
    .create-tools-scroll { gap: 12px; }
    .create-tool-card { flex: 0 0 240px; }
    .footer-columns { grid-template-columns: 1fr; }
    .footer-inner { grid-template-columns: 1fr; }
    .cta-buttons { flex-direction: column; align-items: center; }
    .problem-content { flex-direction: column; }
}

/* ===== COOKIE CONSENT BANNER ===== */
.cookie-banner {
    position: fixed; bottom: 0; left: 0; right: 0;
    background: #1a1a1a; color: #fff;
    padding: 16px 24px; z-index: 9999;
    box-shadow: 0 -4px 20px rgba(0,0,0,0.3);
}
.cookie-content { display: flex; align-items: center; justify-content: space-between; gap: 20px; max-width: 1400px; margin: 0 auto; }
.cookie-content h4 { font-size: 14px; font-weight: 600; margin-bottom: 0; color: #fff; white-space: nowrap; }
.cookie-content p { font-size: 12px; color: #ccc; line-height: 1.4; margin-bottom: 0; flex: 1; }
.cookie-actions { display: flex; align-items: center; gap: 16px; flex-shrink: 0; }
.cookie-details-link { font-size: 12px; color: #999; text-decoration: underline; white-space: nowrap; }
.cookie-ok-btn {
    background: #fff; color: #1a1a1a; border: none;
    padding: 10px 32px; border-radius: 4px; font-size: 13px;
    font-weight: 600; cursor: pointer; transition: background 0.2s;
    white-space: nowrap;
}
.cookie-ok-btn:hover { background: #e5e5e5; }

/* ===== BLOG PAGE ===== */
.blog-hero { padding: 80px 24px 40px; max-width: 1200px; margin: 0 auto; }
.blog-hero-title { font-size: 48px; font-weight: 800; letter-spacing: -1px; margin-bottom: 12px; }
.blog-hero-sub { font-size: 16px; color: #666; }
.blog-grid-section { padding: 0 24px 80px; max-width: 1200px; margin: 0 auto; }
.blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
.blog-card {
    display: block; transition: transform 0.2s;
}
.blog-card:hover { transform: translateY(-2px); }
.blog-card-img { position: relative; margin-bottom: 16px; }
.blog-card-img img { width: 100%; aspect-ratio: 16/10; object-fit: cover; border-radius: 8px; }
.blog-card-body { }
.blog-card-category {
    display: inline-block; font-size: 11px; font-weight: 700; text-transform: uppercase;
    letter-spacing: 1px; color: #1a1a1a; margin-bottom: 8px;
}
.blog-card-title { font-size: 18px; font-weight: 700; margin-bottom: 8px; color: #1a1a1a; line-height: 1.3; }
.blog-card-excerpt { font-size: 14px; color: #666; line-height: 1.5; margin-bottom: 12px; }
.blog-card-meta { font-size: 13px; color: #999; }

/* ===== CREATIONS PAGE ===== */
.creations-hero { padding: 80px 24px 40px; max-width: 1200px; margin: 0 auto; text-align: center; }
.creations-hero-title {
    font-size: 42px; font-weight: 800; letter-spacing: 4px;
    text-transform: uppercase; margin-bottom: 12px;
}
.creations-hero-sub { font-size: 16px; color: #666; margin-bottom: 24px; }
.creations-grid-section { padding: 0 24px 80px; max-width: 1200px; margin: 0 auto; }
.creations-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
.creation-card { display: block; }
.creation-img { position: relative; margin-bottom: 12px; }
.creation-img img { width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: 8px; display: block; }
.creation-count {
    position: absolute; top: 12px; right: 12px;
    background: rgba(255,255,255,0.9); border-radius: 6px;
    padding: 4px 8px; display: flex; align-items: center; gap: 4px;
    font-size: 12px; font-weight: 600; color: #333;
}
.creation-count i { font-size: 14px; }
.creation-title {
    font-size: 14px; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.5px; color: #1a1a1a; margin-bottom: 4px;
}
.creation-author { font-size: 13px; color: #999; }

/* ===== EXAMPLES PAGE ===== */
.examples-hero { padding: 80px 24px 40px; max-width: 1200px; margin: 0 auto; text-align: center; }
.examples-hero-title { font-size: 42px; font-weight: 800; letter-spacing: -0.5px; margin-bottom: 12px; line-height: 1.2; }
.examples-hero-sub { font-size: 16px; color: #666; margin-bottom: 20px; max-width: 700px; margin-left: auto; margin-right: auto; }
.examples-hero .btn-primary { margin-bottom: 12px; }
.examples-quiz-link { font-size: 14px; color: #666; margin-bottom: 32px; }
.examples-quiz-link a { color: #1a1a1a; font-weight: 600; text-decoration: underline; }
.social-proof-bar-inline {
    display: flex; align-items: center; gap: 24px; justify-content: center;
    padding: 20px 0; flex-wrap: wrap;
}
.proof-avatars-inline { display: flex; }
.avatar-inline {
    width: 32px; height: 32px; border-radius: 50%;
    background: #ddd; border: 2px solid #fff; margin-left: -8px;
}
.avatar-inline:first-child { margin-left: 0; }
.proof-text-inline { display: flex; flex-direction: column; font-size: 13px; }
.proof-text-inline strong { font-weight: 600; }
.proof-text-inline span { color: #666; font-size: 12px; }
.proof-divider-inline { width: 1px; height: 32px; background: #e5e5e5; }
.proof-rating-inline { display: flex; flex-direction: column; font-size: 13px; align-items: flex-start; }
.stars-inline { color: #f5a623; font-size: 14px; letter-spacing: 2px; }

.examples-layout { padding: 0 24px 80px; max-width: 1400px; margin: 0 auto; }
.examples-inner { display: flex; gap: 48px; }
.examples-sidebar {
    width: 220px; flex-shrink: 0; position: sticky; top: 80px; align-self: flex-start;
}
.sidebar-styles-label {
    font-size: 11px; font-weight: 700; text-transform: uppercase;
    letter-spacing: 1.5px; color: #999; margin-bottom: 16px;
}
.styles-list { display: flex; flex-direction: column; }
.style-item {
    padding: 10px 0; border-left: 3px solid transparent; padding-left: 16px;
}
.style-item a { font-size: 15px; color: #666; font-weight: 500; }
.style-item.active { border-left-color: #1a1a1a; }
.style-item.active a { color: #1a1a1a; font-weight: 700; }
.style-item:hover a { color: #1a1a1a; }
.examples-content { flex: 1; }
.style-detail-section {
    padding: 40px 0; border-bottom: 1px solid #e5e5e5;
}
.style-detail-section:first-child { padding-top: 0; }
.style-detail-content { display: flex; gap: 40px; align-items: flex-start; }
.style-detail-image { flex: 1; }
.style-detail-image img { width: 100%; border-radius: 12px; display: block; }
.style-detail-text { flex: 1; }
.style-detail-title {
    font-size: 24px; font-weight: 800; text-transform: uppercase;
    letter-spacing: 1px; margin-bottom: 8px;
}
.style-detail-subtitle { font-size: 15px; color: #666; line-height: 1.6; margin-bottom: 16px; }
.style-detail-link { font-size: 14px; font-weight: 600; color: #1a1a1a; text-decoration: underline; }

/* ===== STYLE QUIZ PAGE ===== */
.quiz-hero { padding: 80px 24px 40px; max-width: 800px; margin: 0 auto; text-align: center; }
.quiz-hero-title { font-size: 48px; font-weight: 800; letter-spacing: -1px; margin-bottom: 12px; }
.quiz-hero-sub { font-size: 16px; color: #666; }
.quiz-section { padding: 0 24px 80px; max-width: 800px; margin: 0 auto; }
.quiz-progress { margin-bottom: 32px; }
.quiz-progress-bar { width: 100%; height: 4px; background: #e5e5e5; border-radius: 2px; }
.quiz-progress-fill { height: 100%; background: #1a1a1a; border-radius: 2px; width: 10%; transition: width 0.5s; }
.quiz-progress-text { display: block; text-align: center; font-size: 13px; color: #999; margin-top: 8px; }
.quiz-card { background: #fff; border: 1px solid #e5e5e5; border-radius: 16px; padding: 40px; }
.quiz-question { font-size: 24px; font-weight: 700; text-align: center; margin-bottom: 32px; }
.quiz-options { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.quiz-option {
    border: 2px solid #e5e5e5; border-radius: 12px; overflow: hidden;
    cursor: pointer; transition: border-color 0.2s; text-align: center;
}
.quiz-option:hover { border-color: #1a1a1a; }
.quiz-option.active { border-color: #1a1a1a; background: #f9f9f9; }
.quiz-option img { width: 100%; height: 160px; object-fit: cover; }
.quiz-option span { display: block; padding: 12px; font-size: 14px; font-weight: 600; }
.quiz-result { text-align: center; padding: 40px; background: #f9f9f9; border-radius: 16px; margin-top: 32px; }
.quiz-result.hidden { display: none; }
.quiz-result-title { font-size: 32px; font-weight: 800; margin-bottom: 12px; }
.quiz-result-desc { font-size: 16px; color: #666; margin-bottom: 24px; }

/* ===== FAQ PAGE ===== */
.faq-hero { padding: 80px 24px 40px; max-width: 800px; margin: 0 auto; text-align: center; }
.faq-hero-title { font-size: 48px; font-weight: 800; letter-spacing: -1px; margin-bottom: 12px; }
.faq-hero-sub { font-size: 16px; color: #666; }

/* ===== CONTACT PAGE ===== */
.contact-hero { padding: 80px 24px 40px; max-width: 1200px; margin: 0 auto; text-align: center; }
.contact-hero-title { font-size: 48px; font-weight: 800; letter-spacing: -1px; margin-bottom: 12px; }
.contact-hero-sub { font-size: 16px; color: #666; }
.contact-section { padding: 0 24px 80px; max-width: 1200px; margin: 0 auto; }
.contact-inner { display: flex; gap: 60px; }
.contact-form-wrapper { flex: 1.5; }
.contact-info-wrapper { flex: 1; }
.contact-form-title, .contact-info-title { font-size: 24px; font-weight: 700; margin-bottom: 24px; }
.contact-field { margin-bottom: 20px; }
.contact-field label { display: block; font-size: 13px; font-weight: 600; color: #333; margin-bottom: 6px; }
.contact-input {
    width: 100%; padding: 12px; border: 1px solid #d9d9d9; border-radius: 8px;
    font-size: 14px; font-family: inherit;
}
.contact-input:focus { outline: none; border-color: #1a1a1a; }
.contact-textarea {
    width: 100%; padding: 12px; border: 1px solid #d9d9d9; border-radius: 8px;
    font-size: 14px; font-family: inherit; resize: vertical;
}
.contact-textarea:focus { outline: none; border-color: #1a1a1a; }
.contact-info-item {
    display: flex; align-items: flex-start; gap: 16px;
    margin-bottom: 24px; padding: 20px; background: #f9f9f9; border-radius: 12px;
}
.contact-info-item i { font-size: 20px; color: #666; flex-shrink: 0; margin-top: 2px; }
.contact-info-item h4 { font-size: 15px; font-weight: 600; margin-bottom: 4px; }
.contact-info-item p { font-size: 14px; color: #666; }

/* ===== COMPARE PAGE ===== */
.compare-hero { padding: 80px 24px 40px; max-width: 1200px; margin: 0 auto; text-align: center; }
.compare-hero-title { font-size: 48px; font-weight: 800; letter-spacing: -1px; margin-bottom: 12px; }
.compare-hero-sub { font-size: 16px; color: #666; }
.compare-section { padding: 0 24px 80px; max-width: 1000px; margin: 0 auto; }
.compare-cta { text-align: center; margin-top: 48px; }
.compare-cta h2 { font-size: 28px; font-weight: 800; margin-bottom: 12px; }
.compare-cta p { font-size: 16px; color: #666; margin-bottom: 24px; }

/* ===== ENTERPRISE PAGE ===== */
.enterprise-hero { padding: 80px 24px 40px; max-width: 1200px; margin: 0 auto; text-align: center; }
.enterprise-current-plan { font-size: 14px; font-weight: 600; color: #333; margin-bottom: 4px; }
.enterprise-credits { font-size: 14px; color: #666; margin-bottom: 8px; }
.enterprise-hero-subtitle { font-size: 16px; color: #666; font-weight: 400; margin: 0; }
.enterprise-back-link { font-size: 14px; color: #666; display: inline-block; margin-top: 20px; }
.enterprise-back-link:hover { color: #1a1a1a; }
.enterprise-slider-container { margin: 20px 0; padding: 16px; background: #f9f9f9; border-radius: 8px; }
.enterprise-price-slider { width: 100%; accent-color: #1a1a1a; cursor: pointer; }
.slider-labels { display: flex; justify-content: space-between; font-size: 12px; color: #999; margin-top: 4px; }
.slider-credits { font-size: 14px; font-weight: 600; color: #1a1a1a; margin-top: 8px; text-align: center; }
.enterprise-features { padding: 80px 24px; background: #f9f9f9; }
.enterprise-features-inner { max-width: 1200px; margin: 0 auto; }
.enterprise-features-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; margin-top: 40px; }
.enterprise-feature { text-align: center; padding: 32px 20px; background: #fff; border-radius: 12px; border: 1px solid #e5e5e5; }
.enterprise-feature i { font-size: 32px; color: #1a1a1a; margin-bottom: 16px; }
.enterprise-feature h3 { font-size: 18px; font-weight: 700; margin-bottom: 8px; }
.enterprise-feature p { font-size: 14px; color: #666; }

/* ===== LEGAL PAGES ===== */
.legal-section { padding: 80px 24px; max-width: 800px; margin: 0 auto; }
.legal-title { font-size: 48px; font-weight: 400; letter-spacing: -1px; margin-bottom: 8px; text-align: left; }
.legal-updated { font-size: 14px; color: #999; text-align: left; margin-bottom: 40px; }
.legal-content h2 { font-size: 20px; font-weight: 700; margin: 32px 0 12px; }
.legal-content p { font-size: 15px; color: #555; line-height: 1.7; }
.cookie-table { width: 100%; border-collapse: collapse; margin: 16px 0 24px; }
.cookie-table th, .cookie-table td { padding: 10px 14px; text-align: left; font-size: 13px; border-bottom: 1px solid #e5e5e5; }
.cookie-table th { font-weight: 700; background: #f5f5f5; text-transform: uppercase; letter-spacing: 0.5px; font-size: 11px; color: #666; }
.cookie-table td { color: #555; }

/* ===== PRICING SUBTITLE ===== */
.pricing-subtitle {
    font-size: 15px; color: #666; text-align: center; margin-bottom: 24px;
}

/* ===== CONTACT PAGE (TEXT-ONLY) ===== */
.contact-page-section { padding: 80px 24px; max-width: 800px; margin: 0 auto; }
.contact-page-title { font-size: 42px; font-weight: 400; margin-bottom: 8px; text-align: left; }
.contact-page-subtitle { font-size: 16px; color: #666; margin-bottom: 40px; }
.contact-content-block { margin-bottom: 32px; }
.contact-content-block h2 { font-size: 20px; font-weight: 700; margin-bottom: 8px; }
.contact-content-block p { font-size: 15px; color: #555; line-height: 1.7; }
.contact-email-link { color: #1a1a1a; font-weight: 600; text-decoration: underline; }
.contact-social-links { list-style: none; display: flex; gap: 16px; margin-top: 8px; }
.contact-social-links a { color: #1a1a1a; font-weight: 600; text-decoration: underline; }

/* ===== FAQ PAGE (CATEGORIZED) ===== */
.faq-page-section { padding: 80px 24px; max-width: 800px; margin: 0 auto; }
.faq-page-title { font-size: 42px; font-weight: 400; margin-bottom: 8px; text-align: left; }
.faq-page-subtitle { font-size: 16px; color: #666; margin-bottom: 48px; line-height: 1.6; }
.faq-category { margin-bottom: 48px; }
.faq-category-title {
    font-size: 24px; font-weight: 400; text-transform: none;
    letter-spacing: 0; color: #1a1a1a; margin-bottom: 24px;
    text-align: center; padding-bottom: 16px; border-bottom: 1px solid #e5e5e5;
}

/* ===== COMPARE PAGE (ARTICLE-STYLE) ===== */
.compare-page-section { padding: 60px 24px 80px; max-width: 1200px; margin: 0 auto; }
.compare-page-inner { }
.compare-breadcrumb {
    font-size: 12px; font-weight: 600; text-transform: uppercase;
    letter-spacing: 1px; color: #999; margin-bottom: 24px;
}
.compare-page-layout { display: flex; gap: 60px; align-items: flex-start; }
.compare-page-left { flex: 1; position: sticky; top: 80px; align-self: flex-start; }
.compare-page-right { flex: 1.2; }
.compare-page-title { font-size: 42px; font-weight: 400; line-height: 1.2; margin-bottom: 16px; }
.compare-page-desc { font-size: 15px; color: #555; line-height: 1.7; margin-bottom: 24px; }
.compare-page-meta { font-size: 13px; color: #999; margin-top: 24px; }
.compare-why-section { margin-top: 60px; padding-top: 40px; border-top: 1px solid #e5e5e5; }
.compare-why-title { font-size: 28px; font-weight: 800; }

/* ===== QUIZ HERO SECTION ===== */
.quiz-hero-section { padding: 60px 24px; max-width: 1400px; margin: 0 auto; }
.quiz-hero-inner { display: flex; align-items: center; gap: 60px; }
.quiz-hero-left { flex: 1; }
.quiz-hero-right { flex: 1; }
.quiz-hero-title {
    font-size: 42px; font-weight: 800; letter-spacing: -0.5px;
    line-height: 1.2; margin-bottom: 16px;
}
.quiz-hero-sub { font-size: 15px; color: #666; line-height: 1.7; margin-bottom: 24px; }
.quiz-hero-images {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;
}
.quiz-hero-images img {
    width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: 8px;
}
.quiz-styles-section { padding: 60px 24px; background: #f9f9f9; }
.quiz-styles-inner { max-width: 1200px; margin: 0 auto; }
.quiz-styles-grid {
    display: grid; grid-template-columns: repeat(7, 1fr); gap: 16px; margin-top: 40px;
}
.quiz-style-card {
    text-align: center; cursor: pointer; transition: transform 0.2s;
}
.quiz-style-card:hover { transform: translateY(-2px); }
.quiz-style-card img {
    width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 8px; margin-bottom: 8px;
}
.quiz-style-name { font-size: 13px; font-weight: 600; color: #333; }
.btn-quiz-start {
    display: inline-block; padding: 14px 32px; background: #0d9488; color: #fff;
    border: none; border-radius: 8px; font-size: 16px; font-weight: 600;
    cursor: pointer; text-decoration: none; transition: background 0.2s;
}
.btn-quiz-start:hover { background: #0f766e; }

/* ===== RESPONSIVE ADDITIONS ===== */
@media (max-width: 1024px) {
    .blog-grid { grid-template-columns: repeat(2, 1fr); }
    .creations-grid { grid-template-columns: repeat(2, 1fr); }
    .examples-inner { flex-direction: column; }
    .examples-sidebar { width: 100%; position: static; }
    .styles-list { flex-direction: row; flex-wrap: wrap; gap: 8px; }
    .style-item { border-left: none; border-bottom: 3px solid transparent; padding-left: 0; padding-bottom: 8px; }
    .style-item.active { border-bottom-color: #1a1a1a; }
    .enterprise-features-grid { grid-template-columns: repeat(2, 1fr); }
    .quiz-hero-inner { flex-direction: column; }
    .quiz-styles-grid { grid-template-columns: repeat(5, 1fr); }
    .compare-page-layout { flex-direction: column; }
    .compare-page-left { position: static; }
}
@media (max-width: 768px) {
    .blog-grid { grid-template-columns: 1fr; }
    .creations-grid { grid-template-columns: 1fr; }
    .style-detail-content { flex-direction: column; }
    .enterprise-features-grid { grid-template-columns: 1fr; }
    .contact-inner { flex-direction: column; }
    .quiz-options { grid-template-columns: 1fr; }
    .footer-columns { grid-template-columns: 1fr; }
    .examples-hero-title { font-size: 28px; }
    .creations-hero-title { font-size: 28px; letter-spacing: 2px; }
    .quiz-hero-title { font-size: 28px; }
    .quiz-styles-grid { grid-template-columns: repeat(3, 1fr); }
    .compare-page-title { font-size: 28px; }
    .faq-page-title { font-size: 28px; }
    .contact-page-title { font-size: 28px; }
}

/* ===== PLACEHOLDER PAGES ===== */
.placeholder-section { padding: 120px 24px 80px; max-width: 800px; margin: 0 auto; text-align: center; }
.placeholder-title { font-size: 48px; font-weight: 800; letter-spacing: -1px; margin-bottom: 16px; }
.placeholder-desc { font-size: 16px; color: #666; margin-bottom: 12px; }
.placeholder-coming { font-size: 14px; color: #999; margin-bottom: 32px; }
.placeholder-links { display: flex; gap: 16px; justify-content: center; }

/* ===== INTERIOR DESIGN PAGE ===== */
.tool-hero { padding: 40px 24px 60px; max-width: 1400px; margin: 0 auto; }
.tool-hero-inner { display: flex; align-items: center; gap: 40px; }
.tool-hero-left { flex: 1; }
.tool-hero-right { flex: 1; max-width: 560px; }
.tool-badge {
    display: inline-flex; align-items: center; gap: 8px;
    background: #1a1a1a; color: #fff;
    padding: 8px 16px; border-radius: 20px;
    font-size: 13px; font-weight: 500; margin-bottom: 24px;
}
.tool-hero-title {
    font-size: 48px; font-weight: 400; line-height: 1.1;
    letter-spacing: -1px; margin-bottom: 16px; text-transform: uppercase;
}
.btn-start-now {
    display: inline-block; background: #1a1a1a; color: #fff;
    padding: 14px 32px; border-radius: 8px; font-size: 15px;
    font-weight: 600; margin-top: 16px; margin-bottom: 24px;
    transition: background 0.2s;
}
.btn-start-now:hover { background: #333; }

/* Design Section */
.design-section { padding: 80px 24px; max-width: 1400px; margin: 0 auto; }
.design-inner { }
.design-subtext { font-size: 16px; color: #666; margin-bottom: 40px; }
.design-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 40px; align-items: start; }
.upload-zone {
    border: 2px dashed #ccc; border-radius: 16px;
    padding: 40px; text-align: center; cursor: pointer;
    background: #fafafa; min-height: 400px;
}
.upload-zone:hover { border-color: #999; }
.upload-zone-inner { display: flex; flex-direction: column; align-items: center; gap: 16px; }
.upload-icon-area { font-size: 48px; color: #ccc; }
.upload-zone h4 { font-size: 18px; font-weight: 600; color: #333; }
.upload-zone p { font-size: 14px; color: #999; }
.file-input-hidden { display: none; }
.room-preview-grid {
    display: grid; grid-template-columns: repeat(2, 1fr);
    gap: 8px; margin-top: 20px; width: 100%; max-width: 300px;
}
.room-preview-thumb {
    width: 100%; height: 80px; object-fit: cover;
    border-radius: 8px; border: 2px solid #e5e5e5;
}
.config-panel { display: flex; flex-direction: column; gap: 24px; }
.config-section { }
.config-label {
    font-size: 11px; font-weight: 600; text-transform: uppercase;
    letter-spacing: 1px; color: #666; margin-bottom: 12px; display: block;
}
.config-options-grid {
    display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px;
}
.config-option {
    position: relative; border-radius: 8px; overflow: hidden;
    cursor: pointer; border: 2px solid #e5e5e5; text-align: center;
}
.config-option.active { border-color: #1a1a1a; }
.config-option img { width: 100%; height: 64px; object-fit: cover; display: block; }
.config-check {
    position: absolute; top: 4px; right: 4px;
    width: 20px; height: 20px; border-radius: 50%;
    background: #1a1a1a; color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: 11px;
}
.config-name {
    display: block; font-size: 11px; font-weight: 500; padding: 4px 6px;
}
.palette-dots { display: flex; justify-content: center; gap: 4px; margin-bottom: 4px; padding-top: 8px; }
.pdot { width: 14px; height: 14px; border-radius: 50%; }
.pd1 { background: #d4c5a9; } .pd2 { background: #a89279; } .pd3 { background: #6b5b4a; } .pd4 { background: #3a3028; }
.pd5 { background: #f5e6d3; } .pd6 { background: #e8c9a0; } .pd7 { background: #d4a574; } .pd8 { background: #c75050; }
.pd9 { background: #e8f0f5; } .pd10 { background: #b8d4e8; } .pd11 { background: #7ba8c7; } .pd12 { background: #4a7a9c; }

/* Staging Section */
.staging-section { padding: 80px 24px; background: #f8f8f8; }
.staging-inner { max-width: 1200px; margin: 0 auto; text-align: center; }
.staging-subtext { font-size: 16px; color: #666; margin-bottom: 48px; }
.staging-features { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
.staging-feature {
    background: #fff; border-radius: 12px; padding: 32px 24px;
    text-align: center;
}
.staging-feature i { font-size: 32px; color: #1a1a1a; margin-bottom: 16px; }
.staging-feature h4 { font-size: 16px; font-weight: 700; margin-bottom: 8px; }
.staging-feature p { font-size: 14px; color: #666; }

/* Explore Tools */
.explore-section { padding: 80px 24px; max-width: 1200px; margin: 0 auto; }
.explore-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.explore-card {
    background: #f8f8f8; border-radius: 12px; padding: 24px;
    transition: background 0.2s;
}
.explore-card:hover { background: #f0f0f0; }
.explore-card h4 { font-size: 16px; font-weight: 700; margin-bottom: 8px; }
.explore-card p { font-size: 14px; color: #666; }

/* ===== CLERK AUTH STATES ===== */
.clerk-loading-overlay {
    position: fixed; top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(255,255,255,0.6); z-index: 9990;
    display: flex; align-items: center; justify-content: center;
    pointer-events: none;
}
.clerk-loading-content {
    text-align: center;
}
.clerk-loading-content .loading-spinner {
    width: 36px; height: 36px; border: 3px solid #e5e5e5;
    border-top-color: #1a1a1a; border-radius: 50%;
    margin: 0 auto 12px; animation: spin 1s linear infinite;
}
.clerk-loading-content p {
    font-size: 14px; color: #666; font-weight: 500;
}
.clerk-error-message {
    position: fixed; top: 80px; left: 50%; transform: translateX(-50%);
    background: #fff5f5; border: 1px solid #fed7d7; border-radius: 8px;
    padding: 16px 24px; z-index: 9995;
    display: flex; align-items: center; gap: 12px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    max-width: 500px; width: 90%;
}
.clerk-error-text {
    font-size: 14px; color: #c53030; flex: 1;
}
.clerk-error-retry {
    background: #1a1a1a; color: #fff; border: none; border-radius: 6px;
    padding: 8px 16px; font-size: 13px; font-weight: 600;
    cursor: pointer; white-space: nowrap;
}
.clerk-error-retry:hover { background: #333; }
.clerk-dev-notice {
    background: #fefce8; border-bottom: 1px solid #fde68a;
    padding: 12px 24px; text-align: center; font-size: 13px; color: #92400e;
}
.clerk-dev-notice strong { font-weight: 700; }
.clerk-dev-notice code {
    background: #fef3c7; padding: 2px 6px; border-radius: 4px;
    font-family: monospace; font-size: 12px;
}
.clerk-dev-notice a { color: #1d4ed8; text-decoration: underline; }

/* ===== COOKIEBOT-STYLE CONSENT PANEL ===== */
.cookiebot-panel {
    position: fixed; bottom: 0; left: 0; right: 0;
    background: #fff; z-index: 9998;
    box-shadow: 0 -2px 12px rgba(0,0,0,0.1);
    border-top: 1px solid #e5e5e5;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    display: none;
}
.cookiebot-desktop {
    max-width: 1200px; margin: 0 auto;
    padding: 16px 24px;
    display: flex; align-items: flex-start; gap: 24px;
}
.cookiebot-content { flex: 1; }
.cookiebot-title { font-size: 15px; font-weight: 700; color: #1a1a1a; margin: 0 0 6px; }
.cookiebot-message { font-size: 13px; color: #555; line-height: 1.5; margin: 0 0 12px; }
.cookiebot-toggles {
    display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
}
.cookiebot-toggle-row {
    display: flex; align-items: center; gap: 6px;
}
.cookiebot-toggle-label {
    font-size: 13px; font-weight: 500; color: #333;
}
.cookiebot-toggle {
    position: relative; display: inline-block; width: 36px; height: 20px; cursor: pointer;
}
.cookiebot-checkbox { opacity: 0; width: 0; height: 0; position: absolute; }
.cookiebot-toggle-slider {
    position: absolute; top: 0; left: 0; right: 0; bottom: 0;
    background: #ccc; border-radius: 20px; transition: background 0.3s;
}
.cookiebot-toggle-slider::before {
    content: ''; position: absolute; width: 16px; height: 16px;
    left: 2px; bottom: 2px; background: #fff; border-radius: 50%;
    transition: transform 0.3s;
}
.cookiebot-checkbox:checked + .cookiebot-toggle-slider { background: #333; }
.cookiebot-checkbox:checked + .cookiebot-toggle-slider::before { transform: translateX(16px); }
.cookiebot-checkbox:disabled + .cookiebot-toggle-slider { background: #333; cursor: default; }
.cookiebot-details-link {
    font-size: 13px; color: #555; text-decoration: none; margin-left: 4px;
}
.cookiebot-details-link:hover { text-decoration: underline; }
.cookiebot-actions {
    flex-shrink: 0; padding-top: 2px;
}
.cookiebot-btn-ok {
    padding: 10px 32px; border-radius: 4px; font-size: 14px;
    font-weight: 600; cursor: pointer; border: none;
    background: #1a1a1a; color: #fff; white-space: nowrap;
    transition: background 0.2s;
}
.cookiebot-btn-ok:hover { background: #333; }
.cookiebot-brand {
    display: flex; align-items: center; gap: 6px;
    padding: 0 24px 12px; justify-content: flex-start;
}
.cookiebot-brand img { width: 16px; height: 16px; }
.cookiebot-brand-text { font-size: 11px; color: #999; }

/* Mobile cookiebot panel */
@media (max-width: 768px) {
    .cookiebot-desktop {
        flex-direction: column; gap: 12px; padding: 16px;
    }
    .cookiebot-toggles { gap: 10px; }
    .cookiebot-actions { width: 100%; }
    .cookiebot-btn-ok { width: 100%; text-align: center; }
}

/* ===== SIDEBAR NAVIGATION ===== */
.sidebar-overlay {
    position: fixed; top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.4); z-index: 300;
    opacity: 0; pointer-events: none; transition: opacity 0.3s;
}
.sidebar-overlay.open { opacity: 1; pointer-events: auto; }
.sidebar-nav {
    position: fixed; top: 0; left: 0; bottom: 0;
    width: 280px; max-width: 85vw;
    background: #fff; z-index: 301;
    transform: translateX(-100%); transition: transform 0.3s ease;
    overflow-y: auto; -webkit-overflow-scrolling: touch;
    box-shadow: 2px 0 12px rgba(0,0,0,0.1);
}
.sidebar-nav.open { transform: translateX(0); }
.sidebar-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 16px 20px; border-bottom: 1px solid #e5e5e5;
}
.sidebar-logo { font-size: 16px; font-weight: 400; letter-spacing: -0.5px; color: #1a1a1a; }
.sidebar-close-btn {
    display: flex; align-items: center; justify-content: center;
    width: 32px; height: 32px; border-radius: 6px;
    background: none; border: none; cursor: pointer;
}
.sidebar-close-btn:hover { background: #f5f5f5; }
.sidebar-section { padding: 12px 0; border-bottom: 1px solid #f0f0f0; }
.sidebar-section:last-child { border-bottom: none; }
.sidebar-link {
    display: block; padding: 10px 20px; font-size: 14px; color: #333;
    transition: background 0.15s; text-decoration: none;
}
.sidebar-link:hover { background: #f5f5f5; color: #000; }
.sidebar-user-info {
    display: flex; align-items: center; gap: 12px;
    padding: 12px 20px; border-bottom: 1px solid #f0f0f0;
}
.sidebar-user-avatar { flex-shrink: 0; }
.sidebar-user-details { min-width: 0; }
.sidebar-user-name {
    display: block; font-size: 14px; font-weight: 600; color: #1a1a1a;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sidebar-user-email {
    display: block; font-size: 12px; color: #666;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sidebar-signout-link { color: #c53030 !important; }
.sidebar-signout-link:hover { background: #fff5f5 !important; }
.sidebar-section-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 10px 20px; font-size: 14px; font-weight: 600; color: #1a1a1a;
    cursor: pointer; user-select: none;
}
.sidebar-section-header:hover { background: #f5f5f5; }
.sidebar-section-header .chevron {
    transition: transform 0.2s; display: flex; align-items: center;
}
.sidebar-section-header .chevron.rotated { transform: rotate(180deg); }
.sidebar-links {
    max-height: 0; overflow: hidden; transition: max-height 0.3s ease;
}
.sidebar-links.open { max-height: 500px; }

/* ===== COMPREHENSIVE MOBILE RESPONSIVENESS FIXES ===== */
/* Prevent any component from causing horizontal scroll */

/* --- Global box-sizing safety --- */
html, body { overflow-x: hidden; }

/* --- Header overflow fix --- */
.create-header { overflow: visible; }
.create-header { padding-left: max(16px, env(safe-area-inset-left)); padding-right: max(16px, env(safe-area-inset-right)); }
.header-left { min-width: 0; }
.desktop-header-nav { min-width: 0; overflow: visible; }
.create-logo { white-space: nowrap; }

/* --- Promo banner overflow fix --- */
.promo-bar {
    width: 100%;
    overflow: hidden;
    padding: 8px 40px 8px 16px;
}
.promo-bar-inner {
    width: 100%;
    min-width: 0;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px 12px;
}

/* --- Cookie banner overflow fix --- */
.cookie-banner {
    width: 100%;
    box-sizing: border-box;
}
.cookie-content {
    flex-wrap: wrap;
    gap: 12px;
}
.cookie-content h4 { flex-shrink: 0; }
.cookie-content p { min-width: 0; flex-basis: 100%; }
.cookie-actions {
    flex-wrap: wrap;
    gap: 8px;
}
.cookie-ok-btn { flex-shrink: 0; }
.cookie-details-link { flex-shrink: 0; }

/* --- Cookiebot panel overflow fix --- */
.cookiebot-panel {
    width: 100%;
    box-sizing: border-box;
}
.cookiebot-desktop {
    box-sizing: border-box;
    width: 100%;
    flex-wrap: wrap;
}
.cookiebot-brand { min-width: 0; }
.cookiebot-content { min-width: 0; overflow: hidden; }
.cookiebot-message { word-wrap: break-word; overflow-wrap: break-word; }
.cookiebot-toggle-row { min-width: 0; }

/* --- Hero section overflow fix --- */
.hero-section {
    width: 100%;
    box-sizing: border-box;
    overflow: hidden;
}
.hero-split-layout {
    gap: 24px;
}
.hero-split-left {
    min-width: 0;
    overflow: hidden;
}
.hero-split-right {
    min-width: 0;
    overflow: hidden;
}

/* --- Hero title sizing --- */
.hero-split-title {
    font-size: clamp(28px, 6vw, 52px);
    word-wrap: break-word;
    overflow-wrap: break-word;
    hyphens: auto;
}
.hero-split-title-line3 {
    word-wrap: break-word;
    overflow-wrap: break-word;
}
.hero-title {
    font-size: clamp(28px, 6vw, 52px);
    word-wrap: break-word;
    overflow-wrap: break-word;
}

/* --- Brand logos row overflow fix --- */
.hero-split-brands-logos,
.brand-logos-line,
.hero-brands-row,
.tool-hero-brand-logos {
    flex-wrap: wrap;
    gap: 12px;
    overflow: hidden;
}
.hero-brand-logo,
.brand-logo-img {
    flex-shrink: 0;
}

/* --- Hero prompt box overflow fix --- */
.create-input-wrapper {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}
.create-input-container {
    width: 100%;
    box-sizing: border-box;
}
.create-input {
    min-width: 0;
    word-wrap: break-word;
}
.create-input-actions {
    flex-wrap: nowrap;
    min-width: 0;
}

/* --- Hero image overflow fix --- */
.hero-desktop-slideshow {
    width: 100%;
    max-width: 100%;
    overflow: hidden;
}
.hero-desktop-slide {
    min-width: 0;
}
.hero-mobile-slideshow {
    width: 100%;
    overflow: hidden;
}
.hero-image-single {
    width: 100%;
    overflow: hidden;
}

/* --- Social proof bar overflow fix --- */
.social-proof-bar {
    width: 100%;
    box-sizing: border-box;
    overflow: hidden;
}
.proof-inner {
    flex-wrap: wrap;
    gap: 16px;
    justify-content: center;
}
.proof-avatars { flex-shrink: 0; }
.proof-text { min-width: 0; }
.proof-divider { flex-shrink: 0; }

/* --- Hero trust bar overflow fix --- */
.hero-trust-bar {
    flex-wrap: wrap;
    gap: 8px;
    width: 100%;
    box-sizing: border-box;
}

/* --- Before/after slider overflow fix --- */
.demo-slider-container {
    width: 100%;
    max-width: 100%;
    overflow: hidden;
    box-sizing: border-box;
}
.demo-slide-img {
    min-width: 0;
}
.hero-slider {
    width: 100%;
    max-width: 100%;
    overflow: hidden;
}

/* --- Hotspot card overflow fix --- */
.demo-hotspot-card {
    max-width: calc(100vw - 80px);
    min-width: 180px;
}

/* --- AI tools scroll overflow fix --- */
.create-tools-section {
    width: 100%;
    box-sizing: border-box;
    overflow: hidden;
}
.create-tools-scroll {
    padding-left: 0;
    padding-right: 0;
    width: 100%;
}
.create-tool-card {
    flex: 0 0 min(280px, 80vw);
}

/* --- Stats grid overflow fix --- */
.stats-row {
    gap: 16px;
    width: 100%;
}
.stats-item {
    min-width: 0;
}
.stats-divider {
    display: block;
}

/* --- Comparison table overflow fix --- */
.comparison-section {
    width: 100%;
    box-sizing: border-box;
    overflow: hidden;
}
.comparison-table-wrapper {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.comparison-table {
    min-width: 600px;
}

/* --- Footer overflow fix --- */
.site-footer {
    width: 100%;
    box-sizing: border-box;
    overflow: hidden;
}
.footer-inner {
    width: 100%;
    min-width: 0;
}
.footer-columns {
    gap: 24px;
}
.footer-bottom-bar {
    flex-wrap: wrap;
    gap: 12px;
}
.footer-bottom-links {
    flex-wrap: wrap;
    gap: 12px;
}
.footer-ask-ai-buttons {
    flex-wrap: wrap;
}

/* --- Workspace sidebar overflow fix --- */
.workspace-sidebar {
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
}
.workspace-photo-grid {
    width: 100%;
    box-sizing: border-box;
}

/* --- Demo section overflow fix --- */
.demo-section {
    width: 100%;
    box-sizing: border-box;
    overflow: hidden;
}
.demo-layout {
    min-width: 0;
}
.demo-panel {
    min-width: 0;
    overflow: hidden;
}
.demo-preview-wrapper {
    min-width: 0;
    overflow: hidden;
}

/* --- Three steps overflow fix --- */
.three-steps-section {
    width: 100%;
    box-sizing: border-box;
}
.three-steps-row {
    width: 100%;
    min-width: 0;
}

/* --- Before-after section overflow fix --- */
.before-after-section {
    width: 100%;
    box-sizing: border-box;
    overflow: hidden;
}
.before-after-row {
    min-width: 0;
}
.before-after-card {
    min-width: 0;
    overflow: hidden;
}
.before-after-comparison {
    width: 100%;
    overflow: hidden;
}

/* --- FAQ overflow fix --- */
.faq-section {
    width: 100%;
    box-sizing: border-box;
}
.faq-question {
    word-wrap: break-word;
    overflow-wrap: break-word;
}

/* --- Room SEO overflow fix --- */
.room-seo-section {
    width: 100%;
    box-sizing: border-box;
}
.room-seo-cards {
    width: 100%;
}

/* --- Tool page overflow fix --- */
.tool-hero {
    width: 100%;
    box-sizing: border-box;
    overflow: hidden;
}
.tool-hero-inner {
    min-width: 0;
    gap: 24px;
}
.tool-hero-content {
    min-width: 0;
}
.tool-hero-image {
    min-width: 0;
    overflow: hidden;
}
.tool-hero-heading {
    font-size: clamp(24px, 5vw, 42px);
    word-wrap: break-word;
    overflow-wrap: break-word;
}
.tool-interactive {
    width: 100%;
    box-sizing: border-box;
    overflow: hidden;
}
.tool-interactive-grid {
    width: 100%;
    min-width: 0;
}
.upload-zone {
    width: 100%;
    box-sizing: border-box;
    overflow: hidden;
}
.config-panel {
    min-width: 0;
}
.tool-gallery {
    width: 100%;
    overflow: hidden;
}
.gallery-thumbs {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.tool-problem {
    width: 100%;
    box-sizing: border-box;
}
.problem-cards {
    width: 100%;
}
.tool-explore {
    width: 100%;
    box-sizing: border-box;
}
.tool-explore-inner {
    width: 100%;
    min-width: 0;
}

/* --- Quiz overflow fix --- */
.quiz-hero-images {
    width: 100%;
    overflow: hidden;
}
.quiz-hero-images img {
    min-width: 0;
}
.quiz-styles-grid {
    width: 100%;
}
.quiz-card {
    width: 100%;
    box-sizing: border-box;
    overflow: hidden;
}
.quiz-question {
    word-wrap: break-word;
    overflow-wrap: break-word;
}

/* --- Blog overflow fix --- */
.blog-hero {
    width: 100%;
    box-sizing: border-box;
}
.blog-grid-section {
    width: 100%;
    box-sizing: border-box;
}

/* --- Creations overflow fix --- */
.creations-hero {
    width: 100%;
    box-sizing: border-box;
}
.creations-grid-section {
    width: 100%;
    box-sizing: border-box;
}

/* --- Examples overflow fix --- */
.examples-layout {
    width: 100%;
    box-sizing: border-box;
    overflow: hidden;
}
.examples-sidebar {
    min-width: 0;
}
.style-detail-content {
    min-width: 0;
}
.style-detail-image {
    min-width: 0;
    overflow: hidden;
}

/* --- Contact overflow fix --- */
.contact-section {
    width: 100%;
    box-sizing: border-box;
}
.contact-inner {
    min-width: 0;
}

/* --- Compare overflow fix --- */
.compare-page-section {
    width: 100%;
    box-sizing: border-box;
}
.compare-page-layout {
    min-width: 0;
}

/* --- Auth overflow fix --- */
.auth-page {
    width: 100%;
    box-sizing: border-box;
}
.auth-container {
    width: 100%;
    max-width: 100%;
    flex-wrap: wrap;
}
.auth-left {
    min-width: 0;
    width: 100%;
}
.auth-right {
    min-width: 0;
    width: 100%;
}

/* --- Pricing overflow fix --- */
.pricing-section {
    width: 100%;
    box-sizing: border-box;
}
.pricing-grid {
    width: 100%;
}

/* --- Enterprise overflow fix --- */
.enterprise-features {
    width: 100%;
    box-sizing: border-box;
}
.enterprise-features-grid {
    width: 100%;
}

/* --- Legal overflow fix --- */
.legal-section {
    width: 100%;
    box-sizing: border-box;
}
.legal-content {
    overflow-wrap: break-word;
}
.cookie-table {
    width: 100%;
    overflow-x: auto;
    display: block;
}

/* --- AI tools dropdown overflow fix --- */
.ai-tools-dropdown {
    right: 0;
    max-width: calc(100vw - 32px);
    overflow-y: auto;
}

/* ===== SMALL SCREENS: 320px - 414px ===== */
@media (max-width: 414px) {
    .hero-section { padding: 24px 16px 40px; }
    .hero-split-layout { flex-direction: column; gap: 20px; }
    .hero-split-right { max-width: 100%; }
    .hero-split-title { font-size: 32px; }
    .hero-split-brands-logos { gap: 8px; }
    .hero-brand-logo { height: 18px; }
    .hero-desktop-slideshow { aspect-ratio: 16/10; }
    .hero-trust-bar { padding: 8px 12px; font-size: 12px; gap: 8px; }
    .hero-trust-avatar { width: 24px; height: 24px; }
    .hero-trust-number { font-size: 12px; }
    .hero-trust-label { font-size: 11px; }
    .hero-trust-divider { height: 24px; }
    .hero-trust-reviews-left { font-size: 11px; }
    .hero-trust-reviews-right { font-size: 11px; }

    .promo-bar { padding: 6px 36px 6px 12px; font-size: 12px; }
    .promo-bar-time-num { font-size: 14px; }
    .promo-text { font-size: 12px; }
    .promo-code { font-size: 12px; padding: 3px 8px; }
    .promo-link { font-size: 12px; }

    .create-input-wrapper { max-width: 100%; padding: 0 4px; }
    .create-input { font-size: 14px; padding: 12px; }
    .create-input-actions { padding: 6px 8px; }
    .add-image-btn-label { font-size: 11px; }

    .demo-section { padding: 32px 16px; }
    .demo-section-title { font-size: 20px; }
    .demo-layout { gap: 20px; }
    .demo-panel { gap: 12px; }
    .demo-style-pill { padding: 6px 10px; font-size: 11px; }
    .demo-slider-container { aspect-ratio: 1/1; }
    .demo-hotspot-card { min-width: 160px; padding: 6px; gap: 6px; }
    .demo-hotspot-card-img { width: 36px; height: 36px; }
    .demo-hotspot-card-name { font-size: 10px; }
    .demo-hotspot-card-brand { font-size: 9px; }
    .demo-hotspot-card-cta { font-size: 9px; }

    .stats-section { padding: 32px 16px; }
    .stats-tagline { font-size: 16px; }
    .stats-row { gap: 12px; }
    .stats-number { font-size: 24px; }
    .stats-label { font-size: 10px; }
    .stats-divider { display: none; }

    .create-tools-section { padding: 32px 16px 48px; }
    .create-tools-title { font-size: 20px; margin-bottom: 20px; }
    .create-tool-card { flex: 0 0 min(240px, 85vw); }
    .create-tool-card__info { padding: 10px 12px; }
    .create-tool-card__name { font-size: 13px; }
    .create-tool-card__desc { font-size: 12px; }

    .three-steps-section { padding: 40px 16px; }
    .three-steps-title { font-size: 20px; margin-bottom: 24px; }
    .three-steps-card-body { padding: 16px; }
    .three-steps-card-title { font-size: 16px; }
    .three-steps-card-desc { font-size: 13px; }

    .video-reviews-section { padding: 32px 0; }
    .video-review-slide { width: 260px; }

    .before-after-section { padding: 40px 16px; }
    .before-after-text-box h3 { font-size: 22px; }
    .before-after-text-box p { font-size: 14px; }
    .before-after-comparison { flex-direction: column; }

    .comparison-section { padding: 40px 16px; }
    .comparison-title { font-size: 20px; margin-bottom: 24px; }
    .comparison-table-wrapper { margin: 0 -16px; padding: 0 16px; }

    .room-seo-section { padding: 40px 16px; }
    .room-seo-title { font-size: 20px; }
    .room-seo-cards { grid-template-columns: 1fr; }

    .faq-section { padding: 40px 16px; }
    .faq-section-title { font-size: 20px; margin-bottom: 24px; }
    .faq-question { font-size: 14px; padding: 16px 0; }

    .tool-hero { padding: 24px 16px 40px; }
    .tool-hero-inner { flex-direction: column; gap: 20px; }
    .tool-hero-image { max-width: 100%; }
    .tool-hero-heading { font-size: 28px; }
    .tool-hero-brand-logos { gap: 12px; }
    .tool-interactive { padding: 40px 16px; }
    .upload-zone { padding: 32px 16px; }
    .style-grid { grid-template-columns: repeat(2, 1fr); }
    .tool-gallery { margin-top: 24px; }
    .tool-gallery-inner { padding: 0 16px; }
    .gallery-thumbs { gap: 6px; }
    .gallery-thumb { width: 60px; height: 45px; }
    .tool-problem { padding: 40px 16px; }
    .problem-cards { grid-template-columns: 1fr; }
    .tool-stats { padding: 40px 16px; }
    .stat-number { font-size: 40px; }
    .stats-grid { grid-template-columns: repeat(2, 1fr); gap: 24px; }
    .tool-testimonials { padding: 0 16px 48px; }
    .testimonials-grid { grid-template-columns: 1fr; }
    .tool-cta { padding: 40px 16px; }
    .cta-heading { font-size: 24px; }
    .cta-buttons { flex-direction: column; align-items: stretch; }
    .tool-explore { padding: 40px 16px; }
    .tool-explore-inner { grid-template-columns: 1fr; gap: 32px; }

    .footer-columns { grid-template-columns: 1fr; gap: 24px; }
    .footer-bottom-bar { flex-direction: column; align-items: center; text-align: center; }
    .footer-bottom-links { justify-content: center; }
    .retailer-logos { gap: 12px; }

    .auth-container { flex-direction: column; }
    .auth-left { padding: 32px 20px; }
    .auth-right { padding: 32px 20px; }
    .auth-heading { font-size: 22px; }
    .auth-social-buttons { max-width: 100%; }
    .auth-email-form { max-width: 100%; }

    .pricing-section { padding: 40px 16px; }
    .pricing-card { padding: 24px; }
    .popular-badge { margin: -24px -24px 16px; }
    .discount-badge { margin: -24px -24px 12px; }
    .plan-name { font-size: 20px; }
    .price-current { font-size: 32px; }

    .enterprise-features-grid { grid-template-columns: 1fr; }

    .blog-hero { padding: 48px 16px 24px; }
    .blog-hero-title { font-size: 28px; }
    .blog-grid-section { padding: 0 16px 48px; }
    .blog-grid { grid-template-columns: 1fr; gap: 24px; }

    .creations-hero { padding: 48px 16px 24px; }
    .creations-hero-title { font-size: 24px; }
    .creations-grid-section { padding: 0 16px 48px; }
    .creations-grid { grid-template-columns: 1fr; gap: 24px; }

    .examples-layout { padding: 0 16px 48px; }
    .examples-sidebar { width: 100%; }
    .styles-list { flex-direction: row; flex-wrap: wrap; gap: 6px; }
    .style-item { padding: 6px 10px; border-left: none; border-bottom: 2px solid transparent; font-size: 13px; }
    .style-detail-content { flex-direction: column; gap: 20px; }

    .quiz-hero { padding: 48px 16px 24px; }
    .quiz-hero-title { font-size: 28px; }
    .quiz-hero-images { grid-template-columns: repeat(2, 1fr); }
    .quiz-section { padding: 0 16px 48px; }
    .quiz-card { padding: 24px 16px; }
    .quiz-question { font-size: 18px; }
    .quiz-styles-grid { grid-template-columns: repeat(3, 1fr); gap: 8px; }
    .quiz-style-card img { aspect-ratio: 1; }
    .quiz-style-name { font-size: 11px; }

    .faq-hero { padding: 48px 16px 24px; }
    .faq-hero-title { font-size: 28px; }
    .faq-page-section { padding: 40px 16px; }

    .compare-hero { padding: 48px 16px 24px; }
    .compare-hero-title { font-size: 28px; }
    .compare-section { padding: 0 16px 48px; }
    .compare-page-section { padding: 40px 16px; }
    .compare-page-title { font-size: 24px; }
    .compare-page-layout { gap: 32px; }

    .contact-hero { padding: 48px 16px 24px; }
    .contact-hero-title { font-size: 28px; }
    .contact-section { padding: 0 16px 48px; }
    .contact-inner { gap: 32px; }
    .contact-page-section { padding: 40px 16px; }

    .enterprise-hero { padding: 48px 16px 24px; }
    .enterprise-features { padding: 40px 16px; }

    .legal-section { padding: 48px 16px; }
    .legal-title { font-size: 28px; }
    .legal-content p { font-size: 14px; }

    .placeholder-section { padding: 80px 16px 48px; }
    .placeholder-title { font-size: 28px; }
    .placeholder-links { flex-direction: column; align-items: center; }

    .workspace-section { height: auto; min-height: calc(100vh - 56px); }
    .workspace-layout { flex-direction: column; }
    .workspace-sidebar { width: 100%; border-left: none; border-top: 1px solid #e5e5e5; }
    .workspace-photo-grid { grid-template-columns: repeat(2, 1fr); padding: 0 16px 12px; }
    .canvas-actions { padding: 0 16px 12px; }
    .workspace-prompt-bar { padding: 12px 16px; }

    .design-section { padding: 40px 16px; }
    .design-grid { grid-template-columns: 1fr; gap: 24px; }
    .upload-zone { padding: 32px 16px; min-height: 280px; }
    .config-options-grid { grid-template-columns: repeat(2, 1fr); }

    .staging-section { padding: 40px 16px; }
    .staging-features { grid-template-columns: 1fr; }

    .explore-section { padding: 40px 16px; }
    .explore-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ===== EXTRA SMALL: 320px ===== */
@media (max-width: 359px) {
    .hero-split-title { font-size: 26px; }
    .hero-title { font-size: 26px; }
    .hero-split-brands-logos { gap: 6px; }
    .hero-brand-logo { height: 16px; }
    .promo-bar { font-size: 11px; padding: 5px 32px 5px 8px; }
    .promo-bar-time-num { font-size: 12px; }
    .create-input { font-size: 13px; padding: 10px; }
    .create-tool-card { flex: 0 0 min(220px, 88vw); }
    .demo-slider-container { aspect-ratio: 3/4; }
    .stats-number { font-size: 20px; }
    .stat-number { font-size: 32px; }
    .blog-hero-title { font-size: 24px; }
    .quiz-hero-images { grid-template-columns: 1fr 1fr; }
    .quiz-styles-grid { grid-template-columns: repeat(2, 1fr); }
    .explore-grid { grid-template-columns: 1fr; }
}

/* ===== Reference-matched generic AI tool hero ===== */
@media (min-width: 769px) {
    .page-tool .hero-split-layout {
        margin-left: 0;
        margin-right: 0;
    }
    .create-page .hero-stat-badge,
    .page-tool .hero-stat-badge {
        align-self: flex-start;
    }

    .page-tool .create-main {
        max-width: none;
        padding: 0;
    }

    .page-tool .hero-split-layout {
        max-width: none;
        margin: 0 -20px;
        padding: 100px 80px 30px;
        gap: 40px;
        align-items: center;
    }

    .page-tool .hero-split-left {
        display: flex;
        flex-direction: column;
        gap: 12px;
        padding: 0;
    }

    .page-tool .hero-stat-badge {
        margin-top: -30px;
        margin-bottom: 16.64px;
        padding: 6.4px 15.36px;
    }

    .page-tool .hero-split-right {
        display: flex;
        flex-direction: column;
        max-width: none;
        padding: 0;
        margin-top: 20px;
    }

    .page-tool .hero-split-title {
        font-size: clamp(32px, 3vw, 48px);
        line-height: 1.25;
        margin: 0;
    }

    .page-tool .hero-start-btn {
        width: max-content;
        align-self: flex-start;
        margin-top: clamp(15px, 3vh, 40px);
        padding: 14px 32px;
    }

    .page-tool .hero-desktop-slideshow {
        aspect-ratio: 8 / 5;
        border-radius: 20px;
    }
}

/* Final measured create-page alignment against housoraai.com at 1280px. */
@media (min-width: 769px) {
    .create-page .site-footer { display: none !important; }
    .create-page .create-header,
    .create-page .create-header-actions,
    .create-page .desktop-nav-link,
    .create-page .start-free-btn { font-weight: 300 !important; }
    .create-page .promo-bar-text { font-size: 12px !important; font-weight: 300 !important; color: rgba(255,255,255,.85) !important; }
    .create-page .promo-bar-time-num { font-size: 13px !important; font-weight: 500 !important; }
    .create-page .promo-bar-time-label { font-size: 8px !important; font-weight: 300 !important; color: rgba(255,255,255,.5) !important; }
    .create-page .promo-bar-cta { font-size: 11px !important; font-weight: 300 !important; color: #111 !important; }
    .create-page .promo-bar-apply { font-size: 11px !important; font-weight: 300 !important; }
    .create-page .hero-stat-badge { transform: translateY(1.9px); }
    .create-page .hero-split-title { transform: translateY(2.6px); }
    .create-page .hero-split-brands-logos { transform: translateY(2.6px); }
    .create-page .create-input-container { transform: translateY(.8px); }
    .create-page .hero-desktop-slideshow { background: transparent !important; }
    .create-page .hero-trust-reviews-left { width: 88.1px !important; flex: 0 0 88.1px !important; }
    .create-page .hero-trust-reviews-right { align-items: center !important; }
}

/* Prevent the mobile hero wallpaper wrapper from pushing the content off-canvas. */
@media (max-width: 768px) {
    .create-page .hero-wallpaper-section { width: 100% !important; box-sizing: border-box !important; }
    .create-page .hero-content-wrapper { width: 100% !important; box-sizing: border-box !important; }
    .create-page .hero-mobile-banner { width: 100% !important; max-width: none !important; box-sizing: border-box !important; margin: 0 !important; }
    .create-page .site-footer { display: none !important; }
}

/* Final typography corrections measured from the live reference. */
@media (min-width: 769px) {
    .create-page .hero-stat-badge,
    .create-page .hero-split-brands-logos,
    .create-page .create-input-container { font-weight: 300 !important; }
    .create-page .hero-trust-reviews-text strong { font-weight: 300 !important; }
    .create-page .promo-bar-text { line-height: 15.2px !important; }
    .create-page .promo-bar-time-label { line-height: 8px !important; }
}

/* Authenticated projects page: match Housora's quiet gallery layout. */
.projects-shell .content-wrapper { width: 100%; }
.projects-shell .brand-kits-main { max-width: none; margin: 0; padding: 0; }
.projects-shell .projects-content { max-width: none; margin: 0; }
.projects-shell .promo-bar { position: fixed; top: 0; height: 40px; z-index: 1000; }
.projects-shell .create-header { position: fixed; top: 40px; height: 70px; width: 100%; z-index: 999; }
.projects-shell .content-wrapper { padding-top: 40px; }
.generated-result { display: none; width: min(572px, calc(100% - 40px)); margin: 32px 40px 48px; padding: 16px; background: #f7f7f7; }
.generated-result-label { margin: 0 0 10px; font-size: 11px; letter-spacing: 1.5px; font-weight: 600; }
.generated-result img { display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; margin-bottom: 14px; }
.generated-result a { display: inline-flex; text-decoration: none; }
@media (max-width: 768px) { .generated-result { width: calc(100% - 32px); margin: 24px 16px 36px; } }
.projects-page {
    min-height: 396px;
    background: #fff;
    padding: 0;
}
.projects-content { max-width: 1120px; margin: 0 auto; }
.projects-header {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 28px;
}
.projects-header h1 {
    margin: 0; color: #111; font-size: 30px; line-height: 1.15;
    font-weight: 400; letter-spacing: -0.7px;
}
.projects-new-btn, .user-plan-upgrade {
    display: inline-flex; align-items: center; justify-content: center;
    min-height: 38px; padding: 0 18px; color: #fff; background: #111;
    font-size: 11px; font-weight: 600; letter-spacing: .7px; text-decoration: none;
}
.projects-grid {
    display: grid; grid-template-columns: repeat(4, 280px); gap: 18px;
    min-height: 396px; box-sizing: border-box; align-content: start;
    padding: 120px 36px 40px;
}
.project-card { min-width: 0; border: 1px solid #e8e8e8; background: #fff; }
.project-preview { position: relative; height: 160px; overflow: hidden; background: #f4f4f4; }
.project-preview img { display: block; width: 100%; height: 100%; object-fit: cover; }
.project-delete-btn {
    position: absolute; top: 10px; right: 10px; width: 28px; height: 28px;
    border: 0; border-radius: 50%; background: rgba(255,255,255,.92); color: #111;
    font-size: 20px; line-height: 25px; cursor: pointer;
}
.project-info { min-height: 74px; box-sizing: border-box; padding: 13px 14px 15px; }
.project-name { margin: 0 0 5px; color: #111; font-size: 14px; line-height: 1.25; font-weight: 500; }
.project-date { margin: 0; color: #888; font-size: 11px; line-height: 1.4; }
.projects-empty { display: none; }
.user-plan-row {
    display: flex; align-items: center; justify-content: space-between;
    margin-top: 38px; padding: 18px 0; border-top: 1px solid #ededed;
}
.user-plan { display: flex; align-items: baseline; gap: 10px; }
.user-plan-label { color: #111; font-size: 14px; font-weight: 500; }
.user-plan-credits { color: #888; font-size: 11px; letter-spacing: .5px; }
.user-plan-upgrade { min-height: 32px; font-size: 10px; }

@media (max-width: 768px) {
    .projects-page { min-height: 300px; }
    .projects-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; min-height: 300px; padding: 72px 18px 28px; }
    .project-preview { height: auto; aspect-ratio: 1.74 / 1; }
}
@media (max-width: 420px) {
    .projects-grid { grid-template-columns: 1fr; }
}

/* Absolute final homepage desktop cascade. */
@media (min-width: 769px) {
    .create-page .hero-trust-bar { height: 65.6px !important; box-sizing: border-box !important; padding: 18px 0 4px 20.8px !important; }
    .create-page .hero-trust-avatars { margin-right: -4px !important; }
    .create-page .hero-trust-text { width: 168.8625px !important; flex: 0 0 168.8625px !important; gap: 1px !important; }
    .create-page .hero-trust-number { white-space: nowrap !important; font-size: 14px !important; line-height: 16.8px !important; }
    .create-page .hero-trust-label { white-space: nowrap !important; font-size: 12px !important; line-height: 15.2px !important; }
    .create-page .hero-trust-reviews-text { font-size: 12px !important; line-height: 16.8px !important; font-family: Inter, "Inter Fallback", Inter, -apple-system, BlinkMacSystemFont, sans-serif !important; letter-spacing: -0.12px !important; }
    .create-page .hero-trust-reviews-text strong { font-family: Inter, "Inter Fallback", Inter, -apple-system, BlinkMacSystemFont, sans-serif !important; letter-spacing: -0.12px !important; }
}

/* Final reference typography correction for the review label. */
.create-page .hero-trust-reviews-text,
.create-page .hero-trust-reviews-text strong {
    font-family: Inter, "Inter Fallback", Inter, -apple-system, BlinkMacSystemFont, sans-serif !important;
    letter-spacing: -0.12px !important;
}

/* Match the reference Inter tracking in the review label. */
.create-page .hero-trust-reviews-text,
.create-page .hero-trust-reviews-text strong {
    font-family: Inter, "Inter Fallback", Inter, -apple-system, BlinkMacSystemFont, sans-serif !important;
    letter-spacing: -0.12px !important;
}

/* Absolute final typography corrections. */
@media (min-width: 769px) {
    .create-page .hero-stat-badge,
    .create-page .hero-split-brands-logos,
    .create-page .create-input-container { font-weight: 300 !important; }
    .create-page .hero-trust-reviews-text strong { font-weight: 300 !important; }
    .create-page .promo-bar-text { line-height: 15.2px !important; }
    .create-page .promo-bar-time-label { line-height: 8px !important; }
}

/* Keep the two review lines on the same rows as the reference. */
@media (min-width: 769px) {
    .create-page .hero-trust-reviews-text { white-space: nowrap !important; }
    .create-page .hero-trust-reviews-text strong:first-of-type {
        display: inline-block !important;
        transform: scaleX(0.98) !important;
        transform-origin: left center !important;
        vertical-align: baseline !important;
        margin-left: -0.8px !important;
    }
}

/* Absolute final measured create-page corrections. */
@media (min-width: 769px) {
    .create-page .site-footer { display: none !important; }
    .create-page .create-header,
    .create-page .create-header-actions,
    .create-page .desktop-nav-link,
    .create-page .start-free-btn { font-weight: 300 !important; }
    .create-page .promo-bar-text { font-size: 12px !important; font-weight: 300 !important; color: rgba(255,255,255,.85) !important; }
    .create-page .promo-bar-time-num { font-size: 13px !important; font-weight: 500 !important; }
    .create-page .promo-bar-time-label { font-size: 8px !important; font-weight: 300 !important; color: rgba(255,255,255,.5) !important; }
    .create-page .promo-bar-cta { font-size: 11px !important; font-weight: 300 !important; color: #111 !important; }
    .create-page .promo-bar-apply { font-size: 11px !important; font-weight: 300 !important; }
    .create-page .hero-stat-badge { transform: translateY(1.9px); }
    .create-page .hero-split-title { transform: translateY(2.6px); }
    .create-page .hero-split-brands-logos { transform: translateY(2.6px); }
    .create-page .create-input-container { transform: translateY(.8px); }
    .create-page .hero-desktop-slideshow { background: transparent !important; }
    .create-page .hero-trust-reviews-left { width: 88.1px !important; flex: 0 0 88.1px !important; }
    .create-page .hero-trust-reviews-right { align-items: center !important; }
}

@media (max-width: 768px) {
    .create-page .hero-wallpaper-section { width: 100% !important; box-sizing: border-box !important; }
    .create-page .hero-content-wrapper { width: 100% !important; box-sizing: border-box !important; }
    .create-page .hero-mobile-banner { width: 100% !important; max-width: none !important; box-sizing: border-box !important; margin: 0 !important; }
    .create-page .site-footer { display: none !important; }
}

/* Homepage desktop precision pass: keep this last in the cascade. */
@media (min-width: 769px) {
    .create-page .create-header { padding: 16px 40px !important; background: transparent !important; }
    .create-page .create-logo { display: inline-flex !important; align-items: center !important; height: 24px !important; margin-left: -2px !important; font-size: 24px !important; line-height: 24px !important; font-weight: 300 !important; }
    .create-page .create-logo span { font-size: 20px !important; line-height: 24px !important; font-weight: 500 !important; }
    .create-page .menu-hamburger { width: 32px !important; height: 24px !important; padding: 0 !important; }
    .create-page .promo-bar { background: #111 !important; }
    .create-page .hero-split-title-line1,
    .create-page .hero-split-title-line2,
    .create-page .hero-split-title-line3 { color: #111 !important; font-weight: 300 !important; }
    .create-page .create-header-actions { gap: 16px !important; }
    .create-page .hero-trust-bar { font-size: 16px !important; font-weight: 300 !important; line-height: normal !important; padding: 18px 0 4px 20.8px !important; }
    .create-page .hero-trust-avatars { margin-right: -4px !important; }
    .create-page .hero-trust-text { width: 168.8625px !important; flex: 0 0 168.8625px !important; gap: 1px !important; }
    .create-page .hero-trust-number { font-size: 14px !important; line-height: 16.8px !important; font-weight: 300 !important; white-space: nowrap !important; }
    .create-page .hero-trust-label,
    .create-page .hero-trust-reviews-text,
    .create-page .hero-trust-rating { font-size: 12px !important; font-weight: 300 !important; line-height: normal !important; }
    .create-page .hero-trust-label { line-height: 15.2px !important; white-space: nowrap !important; }
    .create-page .hero-trust-reviews-text { line-height: 16.8px !important; }
    .create-page .hero-trust-reviews { gap: 20px !important; }
    .create-page .hero-trust-reviews-left { display: flex !important; flex-direction: column; line-height: 16.8px !important; }
    .create-page .hero-trust-stars { gap: 2px !important; }
    .create-page .hero-trust-star { font-size: 20px !important; line-height: 26.4px !important; }
}

/* Final desktop alignment with the live Housora create page. */
@media (min-width: 769px) {
    .create-page .create-header {
        padding: 16px 40px !important;
        background: transparent !important;
    }

    .create-page .create-logo {
        font-size: 24px !important;
        line-height: normal !important;
        font-weight: 300 !important;
    }

    .create-page .create-logo span {
        font-size: 20px !important;
        line-height: 24px !important;
        font-weight: 500 !important;
    }

    .create-page .menu-hamburger {
        width: 32px !important;
        height: 24px !important;
        padding: 0 !important;
    }

    .create-page .promo-bar {
        background: #111 !important;
    }

    .create-page .hero-split-title-line1,
    .create-page .hero-split-title-line2,
    .create-page .hero-split-title-line3 {
        color: #111 !important;
        font-weight: 300 !important;
    }

    .create-page .hero-trust-bar {
        font-size: 16px !important;
        font-weight: 300 !important;
        line-height: normal !important;
        padding: 18px 0 4px 21.6px !important;
    }

    .create-page .hero-trust-number {
        font-size: 14px !important;
        font-weight: 300 !important;
    }

    .create-page .hero-trust-label,
    .create-page .hero-trust-reviews-text,
    .create-page .hero-trust-rating {
        font-size: 12px !important;
        font-weight: 300 !important;
        line-height: normal !important;
    }

    .create-page .hero-trust-reviews { gap: 20px !important; }
    .create-page .hero-trust-reviews-left { display: flex !important; flex-direction: column; line-height: 16.8px !important; }
    .create-page .hero-trust-stars { gap: 2px !important; }
    .create-page .hero-trust-star { font-size: 20px !important; line-height: 26.4px !important; }
}

/* ===== Reference-matched desktop create hero =====
   Keep this override after the responsive rules so the desktop geometry
   matches Housora at the same viewport width without affecting mobile. */
@media (min-width: 769px) {
    .create-page .create-main { padding-top: 25px; }
    .create-main .hero-split-right { padding-top: 15px; }

    .create-main .hero-split-title-line3 {
        font-size: 1em;
        line-height: inherit;
        margin-top: 0;
        text-transform: uppercase;
        letter-spacing: inherit;
    }

    .create-page .promo-bar {
        position: fixed;
        inset: 0 0 auto;
        height: 40px;
        padding: 0;
        z-index: 70;
    }

    .create-page .create-header {
        position: fixed;
        top: 40px;
        left: 0;
        right: 0;
        width: 100%;
        min-height: 70px;
        z-index: 60;
    }

    .create-page .create-main {
        max-width: none;
        padding-left: 20px;
        padding-right: 20px;
    }

    .create-page .hero-section {
        max-width: none;
        padding: 0;
    }

    .create-main .hero-split-layout {
        max-width: none;
        margin: 0 -20px;
        padding: 100px 40px 30px;
        gap: 40px;
        align-items: flex-start;
    }

    .create-main .hero-split-left {
        display: flex;
        flex-direction: column;
        gap: 12px;
        padding-top: 0;
    }

    .create-main .hero-split-right {
        display: flex;
        flex-direction: column;
        max-width: none;
    }

    .create-main .hero-split-title {
        font-size: clamp(32px, 3vw, 48px);
        line-height: 1.25;
        margin: 0;
    }

    .create-main .hero-split-brands-logos {
        gap: 24px;
        margin: 0;
        flex-wrap: nowrap;
    }

    .create-main .hero-brand-logo { opacity: 1; }
    .create-main .hero-brand-ikea { height: 36px; }
    .create-main .hero-brand-amazon { height: 26px; }
    .create-main .hero-brand-wayfair { height: 28px; }
    .create-main .hero-brand-potterybarn { height: 24px; }
    .create-main .hero-brand-ashley { height: 22px; }

    .create-main .hero-desktop-slideshow {
        aspect-ratio: 8 / 5;
        border-radius: 20px;
    }

    .create-main .hero-trust-bar {
        gap: 20px;
        margin-top: 12px;
        padding: 18px 0 4px;
        background: transparent;
        border-radius: 0;
        box-shadow: none;
        flex-wrap: nowrap;
    }

    .create-main .create-input-container {
        display: flex;
        flex-direction: column;
        padding: 7px;
        border-color: #efefef;
        border-radius: 14px;
        box-shadow: 0 2px 10px rgba(0,0,0,.07);
    }

    .create-main .create-input {
        padding: 15px 19px;
        min-height: 52px;
        height: 52px;
        font-size: 16px;
        line-height: 1.4;
    }

    .create-main .create-input-container > div:first-child {
        height: 52px;
        line-height: normal;
    }

    .create-main .create-input-actions {
        height: 45px;
        padding: 0 7px 7px;
    }

    .create-main .input-action-btn {
        height: 34px;
        padding: 0 10px;
        border-radius: 7px;
        background: transparent;
    }

    .create-main .submit-arrow-btn {
        width: 38px;
        height: 38px;
        border: 1px solid #111;
    }

    .create-main .hero-bar-ai-notice { display: none; }
}

/* ============================================
   TOOL PAGE TEMPLATE - REFERENCE MATCHING
   ============================================ */

/* Hero - Mobile Banner */
.hero-mobile-banner { padding: 20px 20px 0; max-width: 1200px; margin: 0 auto; }
.hero-stat-badge { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; border-radius: 20px; font-size: 12px; font-weight: 600; margin-bottom: 16px; }
.hero-stat-badge-dark { background: #1a1a1a; color: #fff; }
.hero-stat-badge-icon { display: flex; align-items: center; }
.hero-mobile-title { font-size: clamp(28px, 5vw, 42px); font-weight: 300; line-height: 1.1; margin: 0 0 16px; text-transform: uppercase; letter-spacing: -0.5px; }
.hero-mobile-title-line1, .hero-mobile-title-line2 { display: block; }
.hero-mobile-title-line2 { font-weight: 300; }
.hero-rotating-words { position: relative; display: inline-block; }

/* Keep the rotating desktop headline on one baseline, like the reference. */
@media (min-width: 769px) {
    .hero-rotating-words-desktop,
    .hero-rotating-words-desktop .hero-rotating-word {
        white-space: nowrap !important;
    }
}
.hero-rotating-word { display: none; opacity: 0; transition: opacity 0.3s; }
.hero-rotating-word.active { display: inline; opacity: 1; }
.hero-brands-row { display: flex; align-items: center; gap: 16px; margin: 16px 0; flex-wrap: wrap; }
.hero-brand-logo { height: 20px; width: auto; opacity: 0.7; filter: grayscale(20%); }
.hero-brand-ikea { height: 24px; }
.hero-brand-amazon { height: 18px; }
.hero-brand-wayfair { height: 22px; }
.hero-brand-potterybarn { height: 20px; }
.hero-brand-ashley { height: 18px; }

/* Hero - Desktop Split Layout */
.hero-split-layout { display: flex; gap: 40px; max-width: 1200px; margin: 0 auto; padding: 30px 20px 0; align-items: flex-start; }
.hero-split-left { flex: 1; padding-top: 20px; }
.hero-split-right { flex: 1; position: relative; }
.hero-split-title { font-size: clamp(32px, 4vw, 52px); font-weight: 300; line-height: 1.05; margin: 0 0 16px; text-transform: uppercase; letter-spacing: -1px; }
.hero-split-title-line1 { display: block; }
.hero-split-title-line2 { display: block; font-weight: 300; }
.hero-split-title-line3 { display: block; font-size: 0.4em; font-weight: 400; margin-top: 8px; text-transform: none; letter-spacing: 0; }
.hero-split-brands-logos { display: flex; align-items: center; gap: 16px; margin: 20px 0; flex-wrap: wrap; }
.hero-start-btn { display: inline-flex; align-items: center; gap: 8px; background: #1a1a1a; color: #fff; border: none; padding: 14px 28px; border-radius: 8px; font-size: 16px; font-weight: 600; cursor: pointer; transition: background 0.2s; }
.hero-start-btn:hover { background: #333; }
.hero-desktop-slideshow { position: relative; width: 100%; aspect-ratio: 16/9; border-radius: 12px; overflow: hidden; background: #f5f5f5; }
.hero-desktop-slide { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 0.8s ease-in-out; }
.hero-desktop-slide.active { opacity: 1; }
.hero-trust-bar { display: flex; align-items: center; gap: 16px; margin-top: 16px; padding: 12px 16px; background: #fff; border-radius: 10px; box-shadow: 0 2px 8px rgba(0,0,0,0.06); font-size: 13px; flex-wrap: wrap; }
.hero-trust-avatars { display: flex; }
.hero-trust-avatar { width: 32px; height: 32px; border-radius: 50%; border: 2px solid #fff; margin-left: -8px; }
.hero-trust-avatar:first-child { margin-left: 0; }
.hero-trust-text { display: flex; flex-direction: column; gap: 2px; }
.hero-trust-number { font-weight: 600; font-size: 13px; }
.hero-trust-label { font-size: 12px; color: #666; }
.hero-trust-divider { width: 1px; height: 30px; background: #e5e5e5; }
.hero-trust-reviews { display: flex; align-items: center; gap: 12px; }
.hero-trust-reviews-text { font-size: 12px; color: #666; }
.hero-trust-reviews-text strong { color: #1a1a1a; }
.hero-trust-stars { display: flex; gap: 1px; }
.hero-trust-star { color: #f5a623; font-size: 14px; }
.hero-trust-rating { font-size: 12px; color: #666; }

/* Interactive Tool Section */
.id-configure-section { max-width: 1000px; margin: 60px auto; padding: 0 20px; }
.id-configure-title { font-size: clamp(22px, 3vw, 32px); font-weight: 300; text-align: center; margin: 0 0 40px; text-transform: uppercase; letter-spacing: -0.5px; }
.id-configure-inner { background: #fff; border-radius: 16px; box-shadow: 0 2px 20px rgba(0,0,0,0.06); overflow: hidden; }
.id-configure-grid { display: grid; grid-template-columns: 1fr 1fr; }
.id-configure-left { padding: 32px; border-right: 1px solid #f0f0f0; }
.id-configure-right { padding: 32px; }
.id-upload-area { border: 2px dashed #ddd; border-radius: 12px; padding: 40px 24px; text-align: center; cursor: pointer; transition: border-color 0.2s; }
.id-upload-area:hover { border-color: #999; }
.id-upload-placeholder { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.id-upload-stack { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.id-upload-stack-img { border-radius: 8px; object-fit: cover; opacity: 0.8; }
.id-upload-stack-icon { display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; background: #f5f5f5; border-radius: 50%; }
.id-upload-title { font-size: 16px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; }
.id-upload-subtitle { font-size: 13px; color: #666; }
.id-upload-formats { display: inline-block; background: #e8f5e9; color: #2e7d32; padding: 2px 8px; border-radius: 4px; font-size: 11px; font-weight: 600; }
.id-config-section { margin-bottom: 24px; }
.id-config-label { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: #666; margin-bottom: 12px; }
.id-card-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.id-card { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px 8px; border: 2px solid #eee; border-radius: 10px; background: #fff; cursor: pointer; transition: all 0.2s; font-size: 11px; text-align: center; }
.id-card:hover { border-color: #999; }
.id-card.active { border-color: #1a1a1a; background: #f8f8f8; }
.id-card img { width: 100%; aspect-ratio: 3/2; object-fit: cover; border-radius: 6px; }
.id-card-label { font-weight: 500; }
.id-show-more { background: none; border: none; color: #666; font-size: 12px; cursor: pointer; padding: 8px 0; display: flex; align-items: center; gap: 4px; }
.id-show-more:hover { color: #1a1a1a; }
.id-palette-grid { display: flex; gap: 8px; flex-wrap: wrap; }
.id-palette { padding: 8px 14px; border: 2px solid #eee; border-radius: 20px; background: #fff; cursor: pointer; font-size: 12px; transition: all 0.2s; }
.id-palette:hover { border-color: #999; }
.id-palette.active { border-color: #1a1a1a; background: #f8f8f8; font-weight: 600; }
.id-generate-wrap { margin-top: 20px; }
.id-generate-btn { width: 100%; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 14px; background: #1a1a1a; color: #fff; border: none; border-radius: 8px; font-size: 15px; font-weight: 600; cursor: pointer; transition: background 0.2s; }
.id-generate-btn:hover:not([disabled]) { background: #333; }
.id-generate-btn[disabled] { opacity: 0.45; cursor: not-allowed; }
.id-generate-tooltip { display: block; text-align: center; font-size: 11px; color: #999; margin-top: 8px; }

/* Showcase Sections */
.id-showcase-section { max-width: 1000px; margin: 60px auto; padding: 0 20px; }
.id-showcase-step { margin-top: 30px; }
.id-showcase-flow { display: flex; align-items: center; gap: 16px; }
.id-showcase-img-wrap { flex: 1; }
.id-showcase-img { width: 100%; border-radius: 12px; object-fit: cover; }
.id-showcase-arrow { flex-shrink: 0; color: #999; }

/* Challenge / Problem Section */
.id-challenge-card { max-width: 1000px; margin: 60px auto; padding: 0 20px; position: relative; }
.id-challenge-accent { position: absolute; top: 0; left: 20px; width: 4px; height: 60px; background: #1a1a1a; border-radius: 2px; }
.id-challenge-header { margin-bottom: 32px; }
.id-challenge-header-left { display: flex; flex-direction: column; gap: 8px; }
.id-challenge-eyebrow { display: flex; align-items: center; gap: 12px; }
.id-challenge-eyebrow-line { width: 32px; height: 2px; background: #1a1a1a; }
.id-challenge-eyebrow-text { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; color: #666; }
.id-challenge-heading { font-size: clamp(22px, 3vw, 32px); font-weight: 300; margin: 0; text-transform: uppercase; letter-spacing: -0.5px; }
.id-challenge-intro { font-size: 15px; color: #666; margin: 12px 0 0; line-height: 1.6; }
.id-challenge-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.id-challenge-card-item { padding: 24px; background: #fafafa; border-radius: 12px; }
.id-challenge-card-top { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.id-challenge-icon { width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; background: #f0f0f0; border-radius: 10px; color: #1a1a1a; }
.id-challenge-card-item h3 { font-size: 16px; font-weight: 600; margin: 0; }
.id-challenge-card-item p { font-size: 13px; color: #666; line-height: 1.6; margin: 0; }
.id-challenge-divider { display: flex; align-items: center; justify-content: center; gap: 16px; margin: 40px 0; }
.id-challenge-divider-line { flex: 1; height: 1px; background: #e5e5e5; }
.id-challenge-divider-icon { color: #999; }
.id-solution-box { background: #f8f8f8; border-radius: 12px; padding: 24px; display: flex; flex-direction: column; gap: 12px; }
.id-solution-sparkle { color: #f5a623; }
.id-solution-label { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: #666; }
.id-solution-dot { width: 8px; height: 8px; background: #2e7d32; border-radius: 50%; }
.id-solution-text { font-size: 15px; color: #333; line-height: 1.7; margin: 0; }
.id-solution-text a { color: #1a1a1a; text-decoration: underline; font-weight: 500; }

/* Stats Section */
.demo-section { max-width: 1000px; margin: 60px auto; padding: 0 20px; }
.stats-section { text-align: center; }
.stats-tagline { font-size: clamp(18px, 2.5vw, 26px); font-weight: 300; margin: 0 0 32px; text-transform: uppercase; letter-spacing: -0.3px; }
.stats-row { display: flex; justify-content: center; gap: 0; flex-wrap: wrap; }
.stats-item { display: flex; flex-direction: column; align-items: center; padding: 0 32px; }
.stats-number { font-size: clamp(28px, 4vw, 42px); font-weight: 300; color: #1a1a1a; }
.stats-label { font-size: 12px; color: #666; text-transform: uppercase; letter-spacing: 1px; margin-top: 4px; }
.stats-divider { width: 1px; height: 50px; background: #e5e5e5; align-self: center; }

/* Testimonials */
.demo-testimonials-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 20px; margin-top: 40px; }
.demo-testimonial-card { background: #fff; border: 1px solid #f0f0f0; border-radius: 12px; padding: 24px; }
.demo-testimonial-header { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.demo-testimonial-avatar { width: 40px; height: 40px; border-radius: 50%; background: #e8e8e8; display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 600; color: #666; }
.demo-testimonial-info { display: flex; flex-direction: column; gap: 2px; }
.demo-testimonial-name { font-size: 14px; font-weight: 600; }
.demo-testimonial-country { font-size: 12px; color: #999; }
.demo-testimonial-stars { margin-bottom: 12px; }
.demo-testimonial-stars svg { display: block; }
.demo-testimonial-text { font-size: 14px; color: #333; line-height: 1.6; margin: 0; }

/* FAQ Section */
.faq-section { max-width: 800px; margin: 60px auto; padding: 0 20px; }
.faq-section-title { font-size: clamp(22px, 3vw, 32px); font-weight: 300; text-align: center; margin: 0 0 40px; text-transform: uppercase; letter-spacing: -0.5px; }
.faq-list { display: flex; flex-direction: column; gap: 0; }
.faq-item { border-bottom: 1px solid #eee; }
.faq-item[open] .faq-question::after { content: "\u2212"; }
.faq-question { display: flex; align-items: center; justify-content: space-between; padding: 18px 0; font-size: 15px; font-weight: 500; cursor: pointer; list-style: none; gap: 16px; }
.faq-question::-webkit-details-marker { display: none; }
.faq-question::after { content: "+"; font-size: 20px; color: #999; flex-shrink: 0; }
.faq-answer { padding: 0 0 18px; font-size: 14px; color: #666; line-height: 1.7; }

/* Related / Explore Section */
.rt-related { max-width: 1000px; margin: 60px auto; padding: 0 20px; }
.rt-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; }
.rt-col-title { font-size: 14px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: #1a1a1a; margin: 0 0 20px; }
.rt-card-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.rt-card { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 8px; text-decoration: none; color: inherit; transition: background 0.15s; }
.rt-card:hover { background: #f5f5f5; }
.rt-card-thumb { width: 64px; height: 44px; border-radius: 6px; overflow: hidden; flex-shrink: 0; background: #f0f0f0; }
.rt-card-thumb-img { width: 100%; height: 100%; object-fit: cover; }
.rt-card-text { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.rt-card-name { font-size: 14px; font-weight: 500; }
.rt-card-desc { font-size: 12px; color: #666; }
.rt-card-arrow { color: #999; flex-shrink: 0; }

/* CTA Section */
.id-bottom-cta { text-align: center; padding: 60px 20px; background: #fafafa; margin-top: 60px; }
.id-bottom-cta h2 { font-size: clamp(22px, 3vw, 32px); font-weight: 300; margin: 0 0 12px; text-transform: uppercase; letter-spacing: -0.5px; }
.id-bottom-cta p { font-size: 15px; color: #666; margin: 0 0 24px; }
.id-bottom-cta-links { display: flex; justify-content: center; gap: 16px; flex-wrap: wrap; }
.id-bottom-cta-primary { display: inline-block; padding: 14px 28px; background: #1a1a1a; color: #fff; border-radius: 8px; font-size: 15px; font-weight: 600; text-decoration: none; transition: background 0.2s; }
.id-bottom-cta-primary:hover { background: #333; }
.id-bottom-cta-secondary { display: inline-block; padding: 14px 28px; background: #fff; color: #1a1a1a; border: 2px solid #1a1a1a; border-radius: 8px; font-size: 15px; font-weight: 600; text-decoration: none; transition: all 0.2s; }
.id-bottom-cta-secondary:hover { background: #f5f5f5; }

/* Responsive - Tool Page Template */
@media (max-width: 768px) {
    .desktop-only { display: none !important; }
    .hero-mobile-banner { display: block !important; }
    .hero-split-layout { display: none !important; }
    .id-configure-grid { grid-template-columns: 1fr; }
    .id-configure-left { border-right: none; border-bottom: 1px solid #f0f0f0; }
    .id-challenge-cards { grid-template-columns: 1fr; }
    .stats-row { flex-direction: column; gap: 24px; }
    .stats-divider { width: 50px; height: 1px; }
    .rt-grid { grid-template-columns: 1fr; }
    .demo-testimonials-grid { grid-template-columns: 1fr; }
    .id-showcase-flow { flex-direction: column; }
    .id-showcase-arrow { transform: rotate(90deg); }
}
@media (min-width: 769px) {
    .mobile-only { display: none !important; }
    .hero-mobile-banner { display: none !important; }
    .hero-split-layout { display: flex !important; }
}

/* ============================================
   CONSOLIDATED MOBILE REDESIGN SYSTEM
   Targets: 390px (iPhone 14) and 414px (iPhone XR/11)
   ============================================ */

/* --- Global Mobile Reset --- */
@media (max-width: 480px) {
    *, *::before, *::after { box-sizing: border-box; }
    html { overflow-x: hidden; -webkit-text-size-adjust: 100%; }
    body { overflow-x: hidden; }
    img { max-width: 100%; height: auto; }
    button, a, input, select, textarea { touch-action: manipulation; }

    /* The reference mobile create screen uses a clean 60px header and does
       not show the desktop promotion strip above it. */
    .create-page .promo-bar { display: none !important; }
    .create-page .create-header {
        height: 60px;
        min-height: 60px;
        padding: 0 12px;
        gap: 10px;
        position: relative;
        z-index: 20;
    }
    .create-page .menu-hamburger {
        width: 26px;
        height: 26px;
        min-width: 26px;
        min-height: 26px;
        padding: 0;
    }
    .create-page .menu-hamburger span { width: 16px; }
    .create-page .create-logo {
        display: inline-flex;
        align-items: center;
        width: auto;
        height: 20px;
        font-size: 20px;
        line-height: 20px;
        letter-spacing: 1px;
    }
    .create-page .create-logo span { font-size: 16px; line-height: 20px; }
    .create-page .header-search-icon-mobile {
        width: 38px;
        height: 38px;
        min-width: 38px;
        min-height: 38px;
        margin-left: auto;
    }
    .create-page .create-main {
        padding: 0 12px 16px !important;
        margin-top: -60px !important;
    }
    .create-page .hero-section {
        padding: 0 !important;
        margin: 0 !important;
    }
    .create-page .hero-wallpaper-section {
        width: auto !important;
        margin: 0 -12px 20px !important;
        padding: 60px 0 0 !important;
    }
    .create-page .hero-content-wrapper,
    .create-page .hero-mobile-banner {
        width: 100% !important;
        max-width: none !important;
        box-sizing: border-box !important;
    }
    .create-page .hero-mobile-banner { padding: 20px 0 0 !important; }
    .create-page .hero-mobile-title {
        font-size: 27.3px !important;
        line-height: 35.49px !important;
        margin-left: 23.25px;
        margin-right: 23.25px;
        margin-bottom: 34px !important;
        position: relative;
        top: 4px;
    }
    .create-page .hero-mobile-title-line2 {
        font-size: inherit !important;
        line-height: inherit !important;
        text-transform: uppercase !important;
    }
    .create-page .hero-mobile-title-line3 {
        line-height: inherit !important;
        margin-top: 0 !important;
        text-transform: uppercase !important;
    }

    /* Shared AI tool pages use the same full-width mobile hero and upload
       canvas as the reference site. */
    .page-tool .hero-mobile-banner {
        width: 100vw !important;
        max-width: none !important;
        min-height: 527.2px;
        margin-left: -12px !important;
        box-sizing: border-box !important;
        padding: 80px 17.625px 0 !important;
    }
    .page-tool .hero-mobile-title {
        margin: 0 !important;
        width: 100% !important;
    }
    .page-tool .id-configure-section {
        width: 100vw !important;
        margin: 0 0 32px -12px !important;
        padding: 32px 16px 0 !important;
        box-sizing: border-box !important;
    }
    .page-tool .id-configure-title { line-height: 1.45 !important; }
    .page-tool .id-configure-left,
    .page-tool .id-configure-right {
        padding-left: 0;
        padding-right: 0;
    }
    .page-tool .id-configure-left { padding-top: 0; padding-bottom: 0; }

    /* --- Promo Bar --- */
    .promo-bar {
        height: auto;
        min-height: 36px;
        padding: 5px 36px 5px 12px;
        font-size: 12px;
        line-height: 1.4;
        gap: 6px;
    }
    .promo-bar-inner { gap: 6px; flex-wrap: wrap; justify-content: center; }
    .promo-bar-countdown { gap: 3px; }
    .promo-bar-time-num { font-size: 13px; min-width: 18px; text-align: center; }
    .promo-bar-time-label { font-size: 9px; }
    .promo-bar-time-sep { font-size: 13px; }
    .promo-bar-text { font-size: 11px; }
    .promo-bar-cta { font-size: 11px; padding: 2px 6px; }
    .promo-bar-apply { font-size: 11px; padding: 4px 10px; min-height: 28px; }
    .promo-bar-close { top: 2px; right: 4px; width: 28px; height: 28px; min-width: 28px; min-height: 28px; }

    /* --- Header --- */
    .create-header {
        height: 52px;
        min-height: 52px;
        padding: 0 12px;
        gap: 8px;
    }
    .create-logo { font-size: 16px; letter-spacing: 2px; }
    .menu-hamburger { width: 40px; height: 40px; min-width: 40px; min-height: 40px; }
    .menu-hamburger span { width: 18px; height: 2px; }
    .desktop-header-nav { display: none !important; }
    .header-search-icon-mobile {
        display: flex !important;
        width: 40px;
        height: 40px;
        min-width: 40px;
        min-height: 40px;
    }
    .browse-catalog-btn.start-free-btn {
        font-size: 11px;
        padding: 8px 12px;
        min-height: 36px;
        white-space: nowrap;
    }

    /* --- Hero Mobile Banner --- */
    .hero-mobile-banner {
        padding: 16px 16px 0;
        overflow: hidden;
    }
    .hero-stat-badge {
        font-size: 11px;
        padding: 5px 10px;
        gap: 6px;
    }
    .hero-stat-badge-icon svg { width: 14px; height: 14px; }
    .hero-mobile-title {
        font-size: 28px;
        line-height: 1.05;
        letter-spacing: -0.5px;
        margin-bottom: 12px;
    }
    .hero-mobile-title-line1 { display: block; }
    .hero-mobile-title-line2 { display: block; font-size: 28px; }
    .hero-brands-row {
        gap: 10px;
        margin: 12px 0;
        justify-content: flex-start;
    }
    .hero-brand-logo { height: 16px; }
    .hero-brand-ikea { height: 18px; }
    .hero-brand-wayfair { height: 18px; }
    .hero-brand-potterybarn { height: 16px; }

    /* --- Hero Trust Bar (mobile) --- */
    .hero-trust-bar {
        padding: 10px 12px;
        gap: 8px;
        font-size: 11px;
        margin-top: 12px;
        border-radius: 8px;
    }
    .hero-trust-avatars { gap: 0; }
    .hero-trust-avatar { width: 24px; height: 24px; border-width: 1.5px; margin-left: -6px; }
    .hero-trust-text { gap: 1px; }
    .hero-trust-number { font-size: 11px; }
    .hero-trust-label { font-size: 10px; }
    .hero-trust-divider { height: 20px; }
    .hero-trust-reviews { gap: 8px; }
    .hero-trust-reviews-text { font-size: 10px; }
    .hero-trust-stars svg { width: 56px; height: 11px; }
    .hero-trust-rating { font-size: 10px; }

    /* --- Create Input (homepage prompt) --- */
    .create-input-wrapper {
        max-width: 100%;
        padding: 0 4px;
        margin-top: 12px;
    }
    .create-input {
        font-size: 14px;
        padding: 12px;
        min-height: 44px;
    }
    .create-input-actions {
        padding: 6px 8px;
        gap: 4px;
    }
    .input-action-btn {
        min-height: 36px;
        min-width: 36px;
        padding: 6px 8px;
        font-size: 11px;
    }
    .add-image-btn-label { font-size: 10px; }
    .submit-arrow-btn {
        width: 40px;
        height: 40px;
        min-width: 40px;
        min-height: 40px;
    }

    /* --- Tool Page Hero (mobile) --- */
    .tool-hero { padding: 20px 16px 32px; }
    .tool-hero-inner { flex-direction: column; gap: 16px; }
    .tool-hero-image { max-width: 100%; }
    .tool-hero-heading { font-size: 26px; line-height: 1.1; }
    .tool-hero-brand-logos { gap: 10px; }
    .btn-start-now {
        display: inline-flex;
        min-height: 44px;
        padding: 10px 20px;
        font-size: 14px;
        width: auto;
    }
    .social-proof-inline {
        flex-wrap: wrap;
        gap: 8px;
        font-size: 11px;
        padding: 10px 12px;
    }
    .proof-avatars { gap: 0; }
    .avatar { width: 24px; height: 24px; margin-left: -6px; }
    .proof-text { font-size: 11px; }
    .proof-divider { height: 20px; }
    .stars { font-size: 12px; }

    /* --- Interactive Tool Section --- */
    .id-configure-section {
        margin: 32px auto;
        padding: 0 16px;
    }
    .id-configure-title {
        font-size: 20px;
        margin-bottom: 24px;
    }
    .id-configure-grid {
        grid-template-columns: 1fr;
    }
    .id-configure-left {
        border-right: none;
        border-bottom: 1px solid #f0f0f0;
        padding: 20px;
    }
    .id-configure-right { padding: 20px; }
    .id-upload-area {
        padding: 24px 16px;
        min-height: 180px;
    }
    .id-upload-stack { gap: 4px; margin-bottom: 6px; }
    .id-upload-stack-img { width: 80px; height: 56px; }
    .id-upload-stack-center { width: 88px; height: 61px; }
    .id-upload-stack-icon { width: 40px; height: 40px; }
    .id-upload-stack-icon svg { width: 24px; height: 24px; }
    .id-upload-title { font-size: 14px; }
    .id-upload-subtitle { font-size: 12px; }
    .id-card-grid { grid-template-columns: repeat(3, 1fr); gap: 6px; }
    .id-card {
        padding: 8px 4px;
        min-height: 60px;
        font-size: 10px;
    }
    .id-card img { aspect-ratio: 3/2; border-radius: 4px; }
    .id-card-label { font-size: 10px; }
    .id-show-more { font-size: 11px; padding: 6px 0; min-height: 32px; }
    .id-palette { padding: 6px 10px; font-size: 11px; min-height: 32px; }
    .id-generate-btn {
        padding: 12px;
        font-size: 14px;
        min-height: 48px;
        width: 100%;
    }
    .id-generate-tooltip { font-size: 10px; }

    /* --- Showcase Sections --- */
    .id-showcase-section {
        margin: 32px auto;
        padding: 0 16px;
    }
    .id-showcase-title { font-size: 20px; }
    .id-showcase-flow { flex-direction: column; gap: 12px; }
    .id-showcase-arrow { transform: rotate(90deg); }
    .id-showcase-img { border-radius: 8px; }

    /* --- Challenge / Problem Section --- */
    .id-challenge-card {
        margin: 32px auto;
        padding: 0 16px;
    }
    .id-challenge-accent { left: 16px; height: 40px; }
    .id-challenge-heading { font-size: 20px; }
    .id-challenge-intro { font-size: 14px; }
    .id-challenge-cards { grid-template-columns: 1fr; gap: 12px; }
    .id-challenge-card-item { padding: 16px; }
    .id-challenge-card-top { gap: 10px; margin-bottom: 8px; }
    .id-challenge-icon { width: 36px; height: 36px; }
    .id-challenge-icon svg { width: 18px; height: 18px; }
    .id-challenge-card-item h3 { font-size: 14px; }
    .id-challenge-card-item p { font-size: 13px; line-height: 1.5; }
    .id-challenge-divider { margin: 24px 0; }
    .id-solution-box { padding: 16px; }
    .id-solution-text { font-size: 14px; line-height: 1.6; }

    /* --- Stats Section --- */
    .demo-section {
        margin: 32px auto;
        padding: 0 16px;
    }
    .stats-tagline { font-size: 18px; margin-bottom: 24px; }
    .stats-row {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        gap: 0;
    }
    .stats-item { padding: 0 20px; }
    .stats-number { font-size: 28px; }
    .stats-label { font-size: 10px; }
    .stats-divider { display: none; }

    /* --- Testimonials --- */
    .demo-testimonials-grid {
        grid-template-columns: 1fr;
        gap: 12px;
        margin-top: 24px;
    }
    .demo-testimonial-card { padding: 16px; }
    .demo-testimonial-header { gap: 10px; margin-bottom: 8px; }
    .demo-testimonial-avatar { width: 36px; height: 36px; font-size: 12px; }
    .demo-testimonial-name { font-size: 13px; }
    .demo-testimonial-country { font-size: 11px; }
    .demo-testimonial-stars svg { width: 56px; height: 11px; }
    .demo-testimonial-text { font-size: 13px; line-height: 1.5; }

    /* --- FAQ Section --- */
    .faq-section {
        margin: 32px auto;
        padding: 0 16px;
    }
    .faq-section-title { font-size: 20px; margin-bottom: 24px; }
    .faq-question {
        font-size: 14px;
        padding: 14px 0;
        min-height: 48px;
        gap: 12px;
    }
    .faq-question::after { font-size: 18px; }
    .faq-answer { font-size: 13px; padding: 0 0 14px; line-height: 1.6; }

    /* --- Related / Explore --- */
    .rt-related {
        margin: 32px auto;
        padding: 0 16px;
    }
    .rt-grid { grid-template-columns: 1fr; gap: 24px; }
    .rt-col-title { font-size: 13px; margin-bottom: 12px; }
    .rt-card { padding: 8px 10px; min-height: 48px; gap: 10px; }
    .rt-card-thumb { width: 56px; height: 38px; }
    .rt-card-name { font-size: 13px; }
    .rt-card-desc { font-size: 11px; }

    /* --- CTA Section --- */
    .id-bottom-cta {
        padding: 40px 16px;
        margin-top: 32px;
    }
    .id-bottom-cta h2 { font-size: 20px; margin-bottom: 8px; }
    .id-bottom-cta p { font-size: 14px; margin-bottom: 16px; }
    .id-bottom-cta-links {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }
    .id-bottom-cta-primary, .id-bottom-cta-secondary {
        padding: 12px 20px;
        font-size: 14px;
        min-height: 48px;
        text-align: center;
        width: 100%;
    }

    /* --- Homepage Sections --- */
    .hero-section { padding: 20px 16px 32px; }
    .hero-title { font-size: 28px; line-height: 1.1; }
    .hero-inner { gap: 16px; }
    .hero-right { max-width: 100%; }

    .demo-section { padding: 32px 16px; }
    .demo-section-title { font-size: 20px; }
    .demo-layout { gap: 16px; flex-direction: column; }
    .demo-panel { gap: 12px; width: 100%; flex: none; }
    .demo-style-pill { padding: 6px 10px; font-size: 11px; min-height: 32px; }
    .demo-budget-slider { width: 100%; }
    .demo-generate-btn { width: 100%; min-height: 44px; }
    .demo-slider-container { aspect-ratio: 4/3; }

    .stats-section { padding: 32px 16px; }
    .stats-tagline { font-size: 16px; }

    .create-tools-section { padding: 32px 16px 40px; }
    .create-tools-title { font-size: 18px; margin-bottom: 16px; }
    .create-tools-scroll { gap: 10px; }
    .create-tool-card { flex: 0 0 min(220px, 80vw); }
    .create-tool-card__info { padding: 8px 10px; }
    .create-tool-card__name { font-size: 12px; }
    .create-tool-card__desc { font-size: 11px; }

    .three-steps-section { padding: 32px 16px; }
    .three-steps-title { font-size: 18px; margin-bottom: 20px; }
    .three-steps-row { grid-template-columns: 1fr; gap: 16px; }
    .three-steps-card-body { padding: 14px; }
    .three-steps-card-title { font-size: 15px; }
    .three-steps-card-desc { font-size: 13px; }

    .video-reviews-section { padding: 24px 0; }
    .video-review-slide { width: 240px; }

    .before-after-section { padding: 32px 16px; }
    .before-after-text-box h3 { font-size: 20px; }
    .before-after-text-box p { font-size: 13px; }
    .before-after-text-box ul { padding-left: 16px; }
    .before-after-text-box li { font-size: 13px; }
    .before-after-comparison { flex-direction: column; gap: 12px; }
    .before-after-row { flex-direction: column; gap: 20px; }
    .mobile-br { display: block; }

    .comparison-section { padding: 32px 16px; }
    .comparison-title { font-size: 18px; margin-bottom: 16px; }
    .comparison-table-wrapper { margin: 0 -16px; padding: 0 16px; overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .comparison-table { font-size: 11px; min-width: 500px; }
    .comparison-table th, .comparison-table td { padding: 8px 6px; }

    .room-seo-section { padding: 32px 16px; }
    .room-seo-title { font-size: 18px; }
    .room-seo-intro { font-size: 13px; }
    .room-seo-cards { grid-template-columns: 1fr; gap: 12px; }
    .room-seo-card { padding: 14px; }
    .room-seo-card h3 { font-size: 14px; }
    .room-seo-card p { font-size: 13px; }

    .explore-section { padding: 32px 16px; }
    .explore-grid { grid-template-columns: 1fr; gap: 16px; }

    .staging-section { padding: 32px 16px; }
    .staging-features { grid-template-columns: 1fr; gap: 12px; }
    .staging-feature { padding: 14px; }

    .design-section { padding: 32px 16px; }
    .design-grid { grid-template-columns: 1fr; gap: 16px; }
    .upload-zone { padding: 24px 16px; min-height: 200px; }
    .config-options-grid { grid-template-columns: repeat(2, 1fr); gap: 6px; }
    .config-option { padding: 6px 4px; min-height: 56px; }
    .config-option img { width: 100%; }
    .config-name { font-size: 10px; }
    .btn-generate-full { width: 100%; min-height: 48px; font-size: 14px; }

    /* --- Footer --- */
    .footer-columns {
        grid-template-columns: 1fr;
        gap: 20px;
        padding: 32px 16px;
    }
    .footer-col { padding: 0; }
    .footer-col-title { font-size: 13px; margin-bottom: 8px; }
    .footer-links li { margin-bottom: 4px; }
    .footer-links a { font-size: 13px; min-height: 32px; display: inline-flex; align-items: center; }
    .footer-col-right { padding-top: 16px; border-top: 1px solid #eee; }
    .retailer-logos { gap: 10px; flex-wrap: wrap; }
    .retailer-logo-img { height: 16px; }
    .footer-social-text { gap: 8px; flex-wrap: wrap; }
    .footer-social-text a { font-size: 12px; min-height: 32px; min-width: 32px; display: inline-flex; align-items: center; }
    .footer-ask-ai-buttons { gap: 6px; flex-wrap: wrap; }
    .footer-ask-ai__btn { padding: 6px 10px; min-height: 36px; min-width: 36px; font-size: 11px; }
    .footer-ask-ai__btn svg { width: 20px; height: 20px; }
    .footer-bottom-bar {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 12px;
        padding: 16px;
    }
    .footer-bottom-links { justify-content: center; flex-wrap: wrap; gap: 8px; }
    .footer-bottom-links a { font-size: 11px; min-height: 28px; }
    .footer-copy { font-size: 11px; }
    .footer-google-cloud { margin-top: 8px; }
    .google-cloud-img { height: 24px; }

    /* --- Pricing --- */
    .pricing-section { padding: 32px 16px; }
    .pricing-grid { grid-template-columns: 1fr; max-width: 100%; }
    .pricing-card { padding: 20px; }
    .popular-badge { margin: -20px -20px 12px; }
    .plan-name { font-size: 18px; }
    .price-current { font-size: 28px; }

    /* --- Auth --- */
    .auth-container { flex-direction: column; }
    .auth-left, .auth-right { padding: 24px 16px; }
    .auth-heading { font-size: 20px; }

    /* --- Enterprise --- */
    .enterprise-hero { padding: 32px 16px; }
    .enterprise-features { padding: 32px 16px; }
    .enterprise-features-grid { grid-template-columns: 1fr; }

    /* --- Blog --- */
    .blog-hero { padding: 32px 16px 20px; }
    .blog-hero-title { font-size: 24px; }
    .blog-grid-section { padding: 0 16px 32px; }
    .blog-grid { grid-template-columns: 1fr; gap: 20px; }

    /* --- Creations --- */
    .creations-hero { padding: 32px 16px 20px; }
    .creations-hero-title { font-size: 22px; }
    .creations-grid { grid-template-columns: 1fr; gap: 16px; }

    /* --- Workspace --- */
    .workspace-section { min-height: auto; }
    .workspace-layout { flex-direction: column; }
    .workspace-sidebar { width: 100%; border-left: none; border-top: 1px solid #e5e5e5; }
    .workspace-photo-grid { grid-template-columns: repeat(2, 1fr); padding: 0 12px 8px; }
    .canvas-actions { padding: 0 12px 8px; }
    .workspace-prompt-bar { padding: 10px 12px; }

    /* --- Quiz --- */
    .quiz-hero { padding: 32px 16px 20px; }
    .quiz-hero-title { font-size: 24px; }
    .quiz-hero-images { grid-template-columns: 1fr 1fr; }
    .quiz-section { padding: 0 16px 32px; }
    .quiz-card { padding: 20px 14px; }
    .quiz-question { font-size: 16px; }
    .quiz-styles-grid { grid-template-columns: repeat(3, 1fr); gap: 6px; }
    .quiz-style-card img { aspect-ratio: 1; }
    .quiz-style-name { font-size: 10px; }

    /* --- Examples --- */
    .examples-layout { padding: 0 16px 32px; }
    .examples-sidebar { width: 100%; }
    .styles-list { flex-direction: row; flex-wrap: wrap; gap: 4px; }
    .style-item { padding: 5px 8px; border-left: none; border-bottom: 2px solid transparent; font-size: 12px; }

    /* --- FAQ Page --- */
    .faq-hero { padding: 32px 16px 20px; }
    .faq-hero-title { font-size: 24px; }
    .faq-page-section { padding: 32px 16px; }

    /* --- Compare --- */
    .compare-hero { padding: 32px 16px 20px; }
    .compare-hero-title { font-size: 24px; }
    .compare-section { padding: 0 16px 32px; }
    .compare-page-section { padding: 32px 16px; }
    .compare-page-title { font-size: 20px; }

    /* --- Contact --- */
    .contact-hero { padding: 32px 16px 20px; }
    .contact-hero-title { font-size: 24px; }
    .contact-section { padding: 0 16px 32px; }
    .contact-inner { gap: 24px; }

    /* --- Legal --- */
    .legal-section { padding: 32px 16px; }
    .legal-title { font-size: 24px; }
    .legal-content p { font-size: 13px; }

    /* --- Cookie Banner --- */
    .cookie-banner { padding: 12px 16px; }
    .cookie-content { flex-direction: column; gap: 12px; text-align: center; }
    .cookie-content h4 { font-size: 13px; white-space: normal; }
    .cookie-content p { font-size: 11px; }
    .cookie-actions { width: 100%; justify-content: center; }
    .cookie-ok-btn { width: 100%; min-height: 44px; padding: 10px 20px; }

    /* --- Tool Hero (old template) --- */
    .tool-hero { padding: 20px 16px 32px; }
    .tool-hero-inner { flex-direction: column; gap: 16px; }
    .tool-hero-heading { font-size: 26px; }
    .tool-hero-image { max-width: 100%; }
    .tool-interactive { padding: 32px 16px; }
    .upload-zone { padding: 24px 16px; min-height: 200px; }
    .style-grid { grid-template-columns: repeat(2, 1fr); gap: 6px; }
    .tool-gallery { margin-top: 16px; }
    .tool-gallery-inner { padding: 0 16px; }
    .gallery-thumbs { gap: 4px; }
    .gallery-thumb { width: 52px; height: 38px; }
    .tool-problem { padding: 32px 16px; }
    .problem-cards { grid-template-columns: 1fr; gap: 12px; }
    .problem-card { padding: 14px; }
    .tool-stats { padding: 32px 16px; }
    .stats-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }
    .stat-number { font-size: 32px; }
    .stat-label { font-size: 11px; }
    .tool-testimonials { padding: 0 16px 32px; }
    .tool-cta { padding: 32px 16px; }
    .cta-heading { font-size: 20px; }
    .cta-subtext { font-size: 13px; }
    .cta-buttons { flex-direction: column; align-items: stretch; }
    .btn-primary, .btn-secondary { min-height: 44px; width: 100%; text-align: center; }
    .tool-explore { padding: 32px 16px; }
    .tool-explore-inner { grid-template-columns: 1fr; gap: 24px; }
    .explore-list { gap: 6px; }
    .explore-item { padding: 8px 10px; min-height: 44px; gap: 8px; }
    .explore-item-img { width: 48px; height: 34px; }
    .explore-item-name { font-size: 13px; }
    .explore-item-desc { font-size: 11px; }

    /* --- Overflow Prevention --- */
    .comparison-table-wrapper,
    .demo-slider-container,
    .hero-desktop-slideshow,
    .hero-image-single,
    .id-upload-stack { overflow: hidden; }

    /* --- Touch Target Audit (min 44px) --- */
    button, a, input[type="submit"], .faq-question, .demo-style-pill,
    .id-card, .id-palette, .id-show-more, .rt-card, .footer-links a,
    .footer-social-text a, .footer-ask-ai__btn, .create-tool-card,
    .btn-start-now, .btn-generate, .id-generate-btn, .id-bottom-cta-primary,
    .id-bottom-cta-secondary, .promo-bar-apply, .promo-bar-close,
    .browse-catalog-btn, .header-search-icon-mobile, .menu-hamburger {
        min-height: 44px;
    }
}

/* --- Extra Small: 320px --- */
@media (max-width: 359px) {
    .hero-mobile-title { font-size: 24px; }
    .hero-mobile-title-line2 { font-size: 24px; }
    .hero-stat-badge { font-size: 10px; padding: 4px 8px; }
    .hero-brands-row { gap: 6px; }
    .hero-brand-logo { height: 14px; }
    .hero-brand-ikea { height: 16px; }
    .hero-trust-bar { padding: 8px 10px; }
    .id-card-grid { grid-template-columns: repeat(2, 1fr); }
    .id-upload-stack-img { width: 64px; height: 45px; }
    .id-upload-stack-center { width: 72px; height: 50px; }
    .stats-item { padding: 0 12px; }
    .stats-number { font-size: 24px; }
    .create-tool-card { flex: 0 0 min(200px, 85vw); }
}

/* Final cascade override: generic tool pages use the reference's wider hero
   canvas, while the homepage keeps its own create-page geometry. */
@media (min-width: 769px) {
    /* Keep the homepage's active rotating word visible even when the
       generic tool-page word rules are also loaded. */
    .create-page .hero-split-title-line1 .hero-rotating-word.active {
        display: inline !important;
        opacity: 1 !important;
    }

    .create-page .hero-stat-badge {
        padding: 6.4px 15.36px;
        font-size: 11.52px;
        line-height: 11.52px;
    }

    .page-tool .content-wrapper { padding-top: 40px; }
    .page-tool .create-main {
        max-width: none;
        padding: 0;
    }

    .page-tool .hero-split-layout {
        width: auto;
        max-width: none;
        margin: 0 -20px;
        padding: 100px 80px 30px;
        gap: 40px;
        align-items: center;
    }

    .page-tool .hero-split-left {
        display: flex;
        flex-direction: column;
        gap: 12px;
        padding: 0;
    }

    .page-tool .hero-split-right {
        display: flex;
        flex-direction: column;
        max-width: none;
        padding: 0;
        margin-top: 20px;
    }

    .page-tool .hero-start-btn {
        width: max-content;
        align-self: flex-start;
        margin-top: clamp(15px, 3vh, 40px);
        padding: 14px 32px;
    }

    .page-tool .hero-desktop-slideshow {
        aspect-ratio: 8 / 5;
        border-radius: 20px;
    }
}

/* Absolute final homepage desktop cascade. */
@media (min-width: 769px) {
    .create-page .hero-trust-bar { padding: 18px 0 4px 20.8px !important; }
    .create-page .hero-trust-avatars { margin-right: -4px !important; }
    .create-page .hero-trust-text { width: 168.8625px !important; flex: 0 0 168.8625px !important; gap: 1px !important; }
    .create-page .hero-trust-number { white-space: nowrap !important; font-size: 14px !important; line-height: 16.8px !important; }
    .create-page .hero-trust-label { white-space: nowrap !important; font-size: 12px !important; line-height: 15.2px !important; }
    .create-page .hero-trust-reviews-text { font-size: 12px !important; line-height: 16.8px !important; }
}

/* Final shared AI-tool canvas correction. The reference tool pages extend
   the hero and configuration canvas 20px beyond the content wrapper. */
@media (min-width: 769px) {
    .page-tool .hero-split-layout {
        margin-left: -20px !important;
        margin-right: -20px !important;
    }
    .page-tool .hero-trust-bar {
        min-height: 89.6px;
    }
    .page-tool .id-configure-section {
        width: auto !important;
        max-width: none !important;
        margin: 0 -20px !important;
        padding: 60px 40px 80px !important;
    }
    .page-tool .id-configure-inner {
        width: min(100%, 1250px);
        margin-left: auto;
        margin-right: auto;
    }

    /* Match the reference tool configurator: a 1250px card, equal halves,
       generous 40px gutters, and a tall centered upload drop zone. */
    .page-tool .id-configure-inner {
        border-radius: 20px;
    }
    .page-tool .id-configure-grid {
        min-height: 439px;
    }
    .page-tool .id-configure-left,
    .page-tool .id-configure-right {
        padding: 40px;
    }
    .page-tool .id-upload-area {
        min-height: 359px;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .page-tool .id-upload-stack {
        gap: 10px;
    }
    .page-tool .id-upload-stack-center {
        width: 166px;
        height: 116px;
    }
    .page-tool .id-generate-btn {
        min-height: 58px;
        border-radius: 10px;
        font-size: 18px;
    }
}

@media (max-width: 768px) {
    /* The reference keeps the upload step tall and vertically balanced on
       phones before the style/options column begins. */
    .page-tool .id-upload-area {
        min-height: 326px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
}

/* Route-specific option controls used by the reference configurators. */
.page-tool .id-card.hidden { display: none; }
.id-option-pill-grid { display: flex; flex-wrap: wrap; gap: 8px; }
.id-option-pill {
    min-height: 42px;
    padding: 9px 14px;
    border: 1px solid #e5e5e5;
    border-radius: 8px;
    background: #fff;
    color: #666;
    font-size: 13px;
    line-height: 1.2;
}
.id-option-pill.active { border-color: #222; color: #222; background: #fafafa; }
.id-option-pill:hover { border-color: #999; }
.id-palette-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.id-palette {
    min-height: 92px;
    padding: 10px 8px;
    border: 1px solid #e4e4e4;
    border-radius: 9px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 7px;
    color: #777;
    background: #fff;
}
.id-palette.active { border-color: #222; color: #222; background: #fff; }
.id-palette-swatches { display: flex; gap: 3px; }
.id-palette-dot { width: 18px; height: 18px; border-radius: 50%; border: 1px solid rgba(0,0,0,.08); }
.id-palette-dot:nth-child(1) { background: #f3eee8; }
.id-palette-dot:nth-child(2) { background: #d7c8b7; }
.id-palette-dot:nth-child(3) { background: #9c8d7e; }
.id-palette-dot:nth-child(4) { background: #51483f; }
.id-palette-name { font-size: 12px; }
.id-custom-prompt-section { margin-top: 8px; }
.id-custom-prompt {
    width: 100%;
    min-height: 44px;
    padding: 11px 12px;
    border: 1px solid #e4e4e4;
    border-radius: 8px;
    color: #333;
    font: inherit;
    font-size: 13px;
    outline: none;
}
.id-custom-prompt:focus { border-color: #222; }

@media (max-width: 768px) {
    .id-option-pill { min-height: 44px; font-size: 12px; padding: 8px 10px; }
    .id-palette-grid { gap: 8px; }
    .id-palette { min-height: 76px; }
    .id-palette-dot { width: 14px; height: 14px; }
}
/* Housora currently has no affiliate or partner relationships. Keep the
   product experience focused on the user's own space and original visuals. */
.hero-split-brands-logos,
.hero-brands-row,
.hero-trust-bar {
    display: none !important;
}

.housora-trust-note {
    text-align: center;
}

.housora-trust-note p {
    margin: 10px auto 0;
    color: #666;
    max-width: 560px;
}