/* ==========================================================================
   CSS Design System & Layouts for Outline AI (Kairn Premium Aesthetic)
   ========================================================================== */


/* --- Root Variables --- */
:root {
    --bg-cream: #FFFFFF;
    --text-primary: #121214;
    --text-secondary: #585860;
    
    /* Creative Brand Accents */
    --accent-magic: #7C3AED; /* Lavender Purple */
    --accent-magic-light: #ECEFFE;
    
    --accent-orange: #EA580C; /* Sunburst Orange */
    --accent-orange-light: #FFEDD5;
    
    --accent-mint: #10B981; /* Mint Green */
    --accent-mint-light: #ECFDF5;
    
    --accent-blue: #2563EB;
    --accent-blue-light: #EFF6FF;
    
    --accent-yellow: #D97706;
    --accent-yellow-light: #FEF3C7;

    /* Theme-specific */
    --dark-bg: #141416;
    --dark-card: #1C1C1E;
    
    /* Layout Tokens */
    --border-radius-sm: 8px;
    --border-radius-md: 16px;
    --border-radius-lg: 24px;
    --border-radius-xl: 32px;
    
    /* Luxury Floating Shadows (No Neobrutalism) */
    --border-soft: 1px solid rgba(18, 18, 20, 0.06);
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.03);
    --shadow-md: 0 10px 30px rgba(0, 0, 0, 0.04);
    --shadow-lg: 0 20px 50px rgba(0, 0, 0, 0.06);
    --shadow-premium: 0 25px 60px -15px rgba(24, 24, 27, 0.08), 0 0 0 1px rgba(24, 24, 27, 0.02);
    --shadow-premium-dark: 0 25px 60px -15px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.05);
    
    --font-heading: 'Outfit', 'Plus Jakarta Sans', sans-serif;
    --font-body: 'Inter', sans-serif;
}

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

/* The viewport (html) is the ONE scroll container. overflow-x: clip hides
   horizontal overflow WITHOUT promoting overflow-y to auto, so no second
   scroll container is created. */
html {
    scroll-behavior: smooth;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    overflow-x: clip;
    scrollbar-width: thin;
    scrollbar-color: rgba(18,18,20,0.2) transparent;
}
html::-webkit-scrollbar { width: 8px; }
html::-webkit-scrollbar-track { background: transparent; }
html::-webkit-scrollbar-thumb { background: rgba(18,18,20,0.2); border-radius: 4px; }

body {
    background-color: var(--bg-cream);
    color: var(--text-primary);
    font-family: var(--font-body);
    overflow-x: clip;
    max-width: 100%;
    line-height: 1.6;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    font-weight: 700;
    letter-spacing: 0.01em;
    color: var(--text-primary);
    line-height: 1.2;
}

a {
    color: inherit;
    text-decoration: none;
    transition: all 0.2s ease-in-out;
}

button {
    font-family: var(--font-body);
    font-weight: 600;
    border: none;
    background: none;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

img, svg {
    max-width: 100%;
    display: block;
}

/* --- Container Utility --- */
.container {
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 24px;
}

/* ==========================================================================
   NAVIGATION
   ========================================================================== */
.navbar {
    width: 100%;
    padding: 14px 0; /* Roomier navigation bar */
    position: sticky;
    top: 0;
    background-color: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(12px);
    z-index: 100;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease;
}

.navbar.scrolled {
    box-shadow: var(--shadow-sm);
}

.navbar .container {
    max-width: 100% !important; /* Edge-to-edge viewport fluid */
    padding: 0 48px; /* Fluid luxury side margin */
    display: flex;
    justify-content: space-between;
    align-items: center;
}

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

.logo {
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: 28px; /* Increased from 26px for better visual balance */
    letter-spacing: -0.04em;
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--text-primary);
}

.logo-img {
    height: 36px;
    width: auto;
    aspect-ratio: 851 / 158;
    display: block;
}

.logo-pen {
    color: var(--accent-magic);
    font-size: 20px;
    margin-left: 2px;
}

.logo-badge {
    background-color: var(--accent-magic-light);
    color: var(--accent-magic);
    border: 1px solid rgba(124, 58, 237, 0.2);
    font-size: 11px;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 20px;
    display: flex;
    align-items: center;
    gap: 4px;
}

.logo-badge svg {
    fill: var(--accent-magic);
    width: 12px;
    height: 12px;
}

.nav-links {
    display: flex;
    align-items: center;
    gap: 36px; /* Slightly wider spacing for fluid navbar */
}

.nav-link {
    font-size: 16px; /* Increased from 14px for high legibility */
    font-weight: 600; /* Bolder font weight for premium presence */
    color: var(--text-secondary);
}

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

.navbar .btn {
    font-size: 15px; /* Proportionate font size for actions */
    padding: 8px 18px; /* Slimmed padding to fit the thinner navbar height perfectly */
}

.nav-actions {
    display: flex;
    align-items: center;
    gap: 16px;
}

.btn {
    padding: 10px 20px;
    border-radius: var(--border-radius-sm);
    font-size: 14px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.btn-text {
    color: var(--text-secondary);
}

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

.btn-dark {
    background-color: var(--text-primary);
    color: #FFF;
    border: 1px solid var(--text-primary);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.btn-dark:hover {
    background-color: #2D2D30;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
}

/* Hero Generate Now button */
.hero-cta-group .btn-dark {
    background-color: rgb(255 157 8);
    border-color: rgb(255 157 8);
    color: #FFF;
    box-shadow: none;
}

.hero-cta-group .btn-dark:hover {
    background-color: rgb(230 141 6); /* darker shade on hover, no glow */
    border-color: rgb(230 141 6);
    color: #FFF;
    box-shadow: none;
}

.btn-white {
    background-color: #FFF;
    color: var(--text-primary);
    border: 1px solid rgba(0, 0, 0, 0.08);
    box-shadow: var(--shadow-sm);
}

.btn-white:hover {
    background-color: #F5F5F5;
    box-shadow: var(--shadow-md);
}

/* Sandbox button with interactive signature yellow hover */
.btn-sandbox {
    background-color: #121214;
    color: #FFF;
    border: 2px solid #121214;
    font-weight: 700;
    font-size: 13.5px;
    padding: 10px 24px;
    border-radius: var(--border-radius-sm);
    box-shadow: 3px 3px 0px rgba(18, 18, 20, 0.15);
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.btn-sandbox:hover {
    background-color: #facd5a;
    border-color: #facd5a;
    color: var(--text-primary);
    box-shadow: 0 4px 15px rgba(250, 205, 90, 0.4);
}

/* Bottom CTA button with interactive signature yellow hover */
.btn-bottom-cta {
    background-color: #121214;
    color: #FFF;
    border: 2px solid #121214;
    font-weight: 700;
    font-size: 16px;
    padding: 14px 32px;
    border-radius: var(--border-radius-sm);
    box-shadow: none;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transform: translateY(16px); /* nudge lower without affecting layout/box height */
}

.btn-bottom-cta:hover {
    background-color: #2D2D30;
    border-color: #2D2D30;
    color: #FFF;
    box-shadow: none;
}

.menu-toggle {
    display: none;
    flex-direction: column;
    gap: 5px;
    width: 24px;
    cursor: pointer;
}

.menu-toggle span {
    display: block;
    width: 100%;
    height: 2px;
    background-color: var(--text-primary);
    transition: 0.3s;
    border-radius: 2px;
}

/* ==========================================================================
   HERO SECTION
   ========================================================================== */
.hero {
    padding: 20px 0 80px;
    position: relative;
    overflow: hidden;
    background-color: var(--bg-cream);
}

/* On tall desktop screens the hero's natural height (~700px) ends mid-viewport,
   leaving a large blank band before the next section. Fill the viewport below
   the sticky navbar and center the content; min-height is a no-op on screens
   the hero already fills. */
@media (min-width: 1024px) {
    .hero {
        display: flex;
        align-items: center;
        min-height: calc(100vh - 73px); /* navbar: 14px×2 padding + ~44px content + 1px border */
    }
}

/* Elegant rectangular grid with linear gradient stroke, visible in the center, completely faded out at the ends */
.hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: url("data:image/svg+xml;utf8,<svg width='100%' height='100%' xmlns='http://www.w3.org/2000/svg'><defs><linearGradient id='grid-grad' x1='0%' y1='0%' x2='100%' y2='0%'><stop offset='0%' stop-color='%2360A5FA' stop-opacity='0.25'/><stop offset='35%' stop-color='%23818CF8' stop-opacity='0.3'/><stop offset='65%' stop-color='%23A78BFA' stop-opacity='0.3'/><stop offset='100%' stop-color='%23C084FC' stop-opacity='0.25'/></linearGradient><pattern id='grid' width='80' height='60' patternUnits='userSpaceOnUse'><path d='M 80 0 L 0 0 0 60' fill='none' stroke='url(%23grid-grad)' stroke-width='1.2'/></pattern></defs><rect width='100%' height='100%' fill='url(%23grid)'/></svg>");
    pointer-events: none;
    z-index: 1;
    mask-image: radial-gradient(circle at 50% 45%, rgba(0, 0, 0, 1) 15%, rgba(0, 0, 0, 0) 70%);
    -webkit-mask-image: radial-gradient(circle at 50% 45%, rgba(0, 0, 0, 1) 15%, rgba(0, 0, 0, 0) 70%);
}

/* Soft yellowish-orange glow bleeding in from the left */
.hero::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(ellipse 32% 44% at -4% 42%, rgba(251, 176, 64, 0.16), rgba(251, 176, 64, 0) 70%);
    pointer-events: none;
    z-index: 1;
}

.hero-grid {
    /* --hero-col controls the text box width; the sandbox keeps its own fixed
       size (see .hero-visual .app-frame). */
    --hero-col: 640px;
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 64px;
    align-items: center;
    position: relative;
    z-index: 2;
}

.hero-content {
    max-width: var(--hero-col);
}

.hero-visual {
    display: flex;
    justify-content: center; /* center the fixed-size sandbox in its column */
    width: 100%;
    margin-top: 30px; /* shift the sandbox down relative to the text column */
}

.hero h1 {
    font-size: 53px;
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: 0.02em;
    margin-bottom: 24px;
}

.hero h1 .highlight {
    background: linear-gradient(90deg, #4568DC, #9C3FC9, #E93A8E, #F55B2A, #FBA61A);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.hero-desc {
    font-size: 18px;
    font-weight: 300;
    color: var(--text-secondary);
    margin-bottom: 36px; /* Reverted to original margin spacing */
    line-height: 1.5; /* Reverted to original line height */
    max-width: 500px;
}

.hero-cta-group {
    display: flex;
    align-items: center;
    gap: 16px;
}

/* Equal-width hero CTA buttons (sized to the "Generate Now" label) */
.hero-cta-group .btn {
    flex: 0 0 auto;
    min-width: 150px;
}

/* --- Hero Trust Indicators --- */
.hero-trust-indicators {
    display: flex;
    gap: 24px;
    margin-top: 24px;
    align-items: center;
}

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

.trust-check {
    width: 18px;
    height: 18px;
    fill: #10B981; /* Premium Mint Green checkmark color */
    flex-shrink: 0;
}

/* --- Hero Social Proof (Avatar Stack + Publisher Count) --- */
.hero-social-proof {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 20px;
}

.hero-avatars {
    display: flex;
    align-items: center;
}

.hero-avatar-img {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
    border: 2.5px solid var(--bg-cream);
    margin-left: -10px;
    transition: transform 0.2s ease;
}

.hero-avatar-img:first-child {
    margin-left: 0;
}

.hero-avatars:hover .hero-avatar-img {
    margin-left: -6px;
}

.hero-social-proof-text {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.hero-stars {
    font-size: 12px;
    color: #F59E0B;
    letter-spacing: 1px;
    line-height: 1;
}

.hero-social-proof-text span {
    font-size: 13px;
    color: var(--text-secondary);
    font-weight: 500;
}

.hero-social-proof-text strong {
    color: var(--text-primary);
    font-weight: 700;
}

/* --- Premium Trust Badge Pill --- */
.hero-badge-container {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 40px auto 20px; /* Centered with top margin pushing down from Hero visual, bottom margin pushing features down */
    position: relative;
    z-index: 10;
    width: 100%;
}

.trust-badge-pill {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    background-color: #F1F5F9; /* Muted slate gray/blue background matching picture */
    padding: 10px 24px;
    border-radius: 100px;
    border: 1px solid rgba(0, 0, 0, 0.03); /* Subtle premium outline border */
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease;
}

.trust-badge-pill:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.trust-badge-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    flex-shrink: 0;
}

.trust-badge-text {
    font-size: 16px;
    font-weight: 700;
    color: #0F172A; /* Slate Navy Blue matching picture */
    letter-spacing: -0.01em;
}

/* --- HERO VISUAL / INTERACTIVE COLORING CANVASES --- */
.hero-visual {
    position: relative;
}

.app-frame {
    background-color: #FFF;
    border-radius: var(--border-radius-md);
    border: 1px solid rgba(0, 0, 0, 0.08);
    box-shadow: 0 25px 60px -15px rgba(250, 205, 90, 0.08), 0 0 0 1px rgba(250, 205, 90, 0.02);
    overflow: hidden;
    transform: perspective(1000px) rotateY(-4deg) rotateX(4deg);
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.6s ease;
}

@media (min-width: 768px) {
    .app-frame {
        width: 470px; /* Exact fixed width on desktop */
        height: 571px; /* Exact fixed height on desktop */
    }
}

.app-frame:hover {
    transform: perspective(1000px) rotateY(0deg) rotateX(0deg) scale(1.02);
    box-shadow: 0 35px 80px -15px rgba(250, 205, 90, 0.15), 0 0 0 1px rgba(250, 205, 90, 0.04);
}

.app-header {
    background-color: #FAFAFB;
    height: 42px;
    padding: 10px 16px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.app-window-dots {
    display: flex;
    gap: 6px;
}

.app-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
}

.app-dot-red { background-color: #FF5F56; }
.app-dot-yellow { background-color: #FFBD2E; }
.app-dot-green { background-color: #27C93F; }

.app-title-tag {
    font-family: var(--font-heading);
    font-size: 11px;
    font-weight: 700;
    color: var(--text-primary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.app-body {
    padding: 20px 20px 21px 20px; /* Adjusted padding to hit exactly 571px height */
    position: relative;
}

/* Color Swatches Grid */
.swatch-panel {
    display: flex;
    gap: 4px; /* Tighter gaps to fit swatches cleanly */
    margin-bottom: 20px;
    padding: 6px 10px;
    height: 36px;
    background-color: #FAF9F6;
    border-radius: var(--border-radius-sm);
    border: 1px solid rgba(0, 0, 0, 0.05);
    align-items: center;
}

.swatch-label {
    font-size: 9px;
    font-weight: 800;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    margin-right: 4px;
}

.color-swatch {
    width: 18px; /* Slightly larger swatches to fit 470px width perfectly */
    height: 18px;
    border-radius: 50%;
    border: 1px solid rgba(0,0,0,0.1);
    cursor: pointer;
    transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.color-swatch:hover {
    transform: scale(1.2);
}

.color-swatch.active {
    transform: scale(1.25);
    box-shadow: 0 0 0 2px #FFF, 0 0 0 3px var(--accent-magic);
}

/* Coloring Vector Canvas Outline */
.sandbox-canvas-wrap {
    width: 100%;
    aspect-ratio: 1/1; /* Square aspect ratio */
    border: 1px solid rgba(0, 0, 0, 0.06);
    border-radius: var(--border-radius-sm);
    background-color: #FFF;
    overflow: hidden;
    position: relative;
}

@media (min-width: 768px) {
    .sandbox-canvas-wrap {
        width: 428px; /* Exact calculated width to fill 470px App Frame */
        height: 428px; /* Perfect square matching the height exactly */
    }
}

.sandbox-canvas-wrap svg {
    width: 100%;
    height: 100%;
}

/* Fillable paths inside interactive outline */
.fill-path {
    fill: #FFFFFF;
    stroke: #18181B;
    stroke-width: 1.8;
    stroke-linejoin: round;
    stroke-linecap: round;
    transition: fill 0.3s ease;
    cursor: crosshair; /* Bucket select indicator */
}

.fill-path:hover {
    opacity: 0.9;
    stroke-width: 2.2;
}

.ink-line {
    fill: none;
    stroke: #18181B;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    pointer-events: none;
}

/* ==========================================================================
   SCROLLING TICKER MARQUEES
   ========================================================================== */
.tickers-section {
    padding: 40px 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
    overflow: hidden;
    position: relative;
    z-index: 10;
}

.ticker-wrap {
    width: 100vw;
    overflow: hidden;
    padding: 8px 0;
    position: relative;
}

.ticker-track {
    display: flex;
    width: max-content;
    gap: 20px;
    animation: marquee 25s linear infinite;
}

.ticker-track.reverse {
    animation: marquee-reverse 25s linear infinite;
}

.ticker-wrap:hover .ticker-track {
    animation-play-state: paused;
}

.ticker-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 16px;
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: 15px;
    border-radius: 30px;
    white-space: nowrap;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    box-shadow: var(--shadow-sm);
}

/* Orange Stream */
.ticker-orange {
    background-color: #FFF;
    border-bottom: 2px solid var(--accent-orange);
}

.ticker-orange .ticker-item {
    background-color: var(--accent-orange-light);
    color: var(--accent-orange);
    border: 1px solid rgba(234, 88, 12, 0.15);
}

.ticker-orange .ticker-item.highlighted {
    background-color: var(--accent-orange);
    color: #FFF;
}

/* Blue Stream */
.ticker-blue {
    background-color: #FFF;
    border-bottom: 2px solid var(--accent-blue);
}

.ticker-blue .ticker-item {
    background-color: var(--accent-blue-light);
    color: var(--accent-blue);
    border: 1px solid rgba(37, 99, 235, 0.15);
}

.ticker-blue .ticker-item.highlighted {
    background-color: var(--accent-blue);
    color: #FFF;
}

/* Yellow Stream */
.ticker-yellow {
    background-color: #FFF;
    border-bottom: 2px solid var(--accent-yellow);
}

.ticker-yellow .ticker-item {
    background-color: var(--accent-yellow-light);
    color: var(--accent-yellow);
    border: 1px solid rgba(217, 119, 6, 0.15);
}

.ticker-yellow .ticker-item.highlighted {
    background-color: var(--accent-yellow);
    color: #121214;
}

@keyframes marquee {
    0% { transform: translateX(0); }
    100% { transform: translateX(calc(-50% - 10px)); }
}

@keyframes marquee-reverse {
    0% { transform: translateX(calc(-50% - 10px)); }
    100% { transform: translateX(0); }
}

.badges-wrap {
    overflow: hidden;
    position: relative;
    width: 100%;
    -webkit-mask-image: linear-gradient(to right, transparent, #000 10%, #000 90%, transparent);
    mask-image: linear-gradient(to right, transparent, #000 10%, #000 90%, transparent);
}

.badges-track {
    display: flex;
    align-items: center;
    width: max-content;
    gap: 24px;
    animation: badges-marquee 32s linear infinite;
}

.badges-wrap:hover .badges-track {
    animation-play-state: paused;
}

@keyframes badges-marquee {
    0% { transform: translateX(0); }
    100% { transform: translateX(calc(-50% - 12px)); }
}

/* ==========================================================================
   FEATURES SECTIONS
   ========================================================================== */
.features-section {
    padding: 100px 0;
}

.section-intro {
    text-align: center;
    max-width: 600px;
    margin: 0 auto 64px;
}

.section-badge {
    font-size: 32px;
    font-weight: 800;
    margin-bottom: 12px;
    font-family: var(--font-heading);
}

.section-intro p {
    font-size: 16px;
    color: var(--text-secondary);
}

.cards-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px;
    margin-bottom: 80px;
}

#generate .cards-grid {
    align-items: center;
}

.feature-info-block {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 40px;
    text-align: left;
}

.feature-info-block .section-badge {
    color: var(--accent-magic);
    font-size: 13px;
    font-weight: 800;
    text-transform: uppercase;
    margin-bottom: 12px;
    letter-spacing: 0.05em;
    text-align: left;
    background: none;
    padding: 0;
}

.feature-info-block h3 {
    font-size: 34px;
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: 0.02em;
    margin-bottom: 18px;
    color: var(--text-primary);
}

.feature-info-block p {
    font-size: 15px;
    color: var(--text-secondary);
    line-height: 1.6;
    max-width: 420px;
    margin-bottom: 28px;
}

@media (max-width: 768px) {
    .feature-info-block {
        padding: 24px 0;
    }
}

/* Cooking Sandbox Hover Effect */
.hover-image-container {
    position: relative;
    width: 100%;
    overflow: hidden;
    cursor: pointer;
    border-radius: 0 0 var(--border-radius-md) var(--border-radius-md);
}

.hover-image-container img {
    width: 100%;
    height: auto;
    display: block;
    transition: opacity 0.4s ease;
}

.hover-image-container .image-hover {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
}

.hover-image-container:hover .image-hover {
    opacity: 1;
}

/* Pulsing Status dot for Sandbox Header */
.live-pulse {
    display: inline-block;
    width: 8px;
    height: 8px;
    background-color: #10B981;
    border-radius: 50%;
    margin-right: 8px;
    box-shadow: 0 0 8px #10B981;
    animation: pulse-glow 2s infinite ease-in-out;
}

@keyframes pulse-glow {
    0% {
        transform: scale(0.9);
        box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7);
    }
    70% {
        transform: scale(1.1);
        box-shadow: 0 0 0 6px rgba(16, 185, 129, 0);
    }
    100% {
        transform: scale(0.9);
        box-shadow: 0 0 0 0 rgba(16, 185, 129, 0);
    }
}

/* Cooking Sandbox Premium Animated Background & Glow */
.cooking-sandbox-card {
    width: 100%;
    height: auto;
    max-width: 480px;
    margin: 0 auto;
    background-color: #FFF !important;
    transition: transform 1.2s cubic-bezier(0.16, 1, 0.3, 1), opacity 1.2s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease;
}

.cooking-sandbox-card.card-theme-blue {
    border: 1px solid rgba(95, 115, 252, 0.2) !important;
    animation: card-glow-pulse 6s infinite ease-in-out !important;
}

.cooking-sandbox-card.card-theme-yellow {
    border: 1px solid rgba(255, 190, 26, 0.2) !important;
    animation: card-glow-pulse-yellow 6s infinite ease-in-out !important;
}

.cooking-sandbox-card.card-theme-orange {
    border: 1px solid rgba(238, 91, 60, 0.2) !important;
    animation: card-glow-pulse-orange 6s infinite ease-in-out !important;
}

.cooking-sandbox-card .app-body {
    padding: 0 !important;
    background-color: #FFF !important;
    overflow: hidden;
}

.cooking-sandbox-card .hover-image-container {
    border-radius: 0 0 var(--border-radius-md) var(--border-radius-md) !important;
    background-color: #FFF;
    overflow: hidden;
}

/* Step Color Cards Styling */
.step-color-card {
    border-radius: var(--border-radius-md);
    padding: 28px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s ease;
    text-align: left;
    position: relative;
    overflow: hidden;
}

.step-color-card:hover {
    transform: translateY(-4px);
}

/* Purple Card */
.step-color-card.card-purple {
    background-color: #5F73FC;
    color: #FFF;
    border: 1px solid rgba(255, 255, 255, 0.15);
    box-shadow: 0 10px 30px rgba(95, 115, 252, 0.2), 0 0 15px rgba(95, 115, 252, 0.1);
}

.step-color-card.card-purple:hover {
    box-shadow: 0 15px 40px rgba(95, 115, 252, 0.35), 0 0 20px rgba(95, 115, 252, 0.15);
}

.step-color-card.card-purple h4 {
    color: #FFF;
    font-size: 19px;
    font-weight: 800;
    margin: 0;
}

.step-color-card.card-purple p {
    color: rgba(255, 255, 255, 0.9);
    font-size: 13.5px;
    line-height: 1.5;
    margin: 0;
}

/* Yellow Card */
.step-color-card.card-yellow {
    background-color: #FFBE1A;
    color: #121214;
    border: 1px solid rgba(0, 0, 0, 0.05);
    box-shadow: 0 10px 30px rgba(255, 190, 26, 0.25), 0 0 15px rgba(255, 190, 26, 0.12);
}

.step-color-card.card-yellow:hover {
    box-shadow: 0 15px 40px rgba(255, 190, 26, 0.4), 0 0 20px rgba(255, 190, 26, 0.2);
}

.step-color-card.card-yellow h4 {
    color: #121214;
    font-size: 19px;
    font-weight: 800;
    margin: 0;
}

.step-color-card.card-yellow p {
    color: rgba(18, 18, 20, 0.9);
    font-size: 13.5px;
    line-height: 1.5;
    margin: 0;
}

/* Orange Card */
.step-color-card.card-orange {
    background-color: #EE5B3C;
    color: #FFF;
    border: 1px solid rgba(255, 255, 255, 0.15);
    box-shadow: 0 10px 30px rgba(238, 91, 60, 0.2), 0 0 15px rgba(238, 91, 60, 0.1);
}

.step-color-card.card-orange:hover {
    box-shadow: 0 15px 40px rgba(238, 91, 60, 0.35), 0 0 20px rgba(238, 91, 60, 0.15);
}

.step-color-card.card-orange h4 {
    color: #FFF;
    font-size: 19px;
    font-weight: 800;
    margin: 0;
}

.step-color-card.card-orange p {
    color: rgba(255, 255, 255, 0.9);
    font-size: 13.5px;
    line-height: 1.5;
    margin: 0;
}

/* Visual placeholder slots inside the cards */
.card-visual-slot {
    border-radius: 6px;
    background-color: rgba(255, 255, 255, 0.12);
    border: 1px dashed rgba(255, 255, 255, 0.25);
    padding: 14px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.step-color-card.card-yellow .card-visual-slot {
    background-color: rgba(0, 0, 0, 0.04);
    border: 1px dashed rgba(0, 0, 0, 0.15);
    color: rgba(0, 0, 0, 0.6);
}

@keyframes card-glow-pulse {
    0% {
        box-shadow: 0 15px 45px rgba(95, 115, 252, 0.12), 0 0 15px rgba(95, 115, 252, 0.05);
        border-color: rgba(95, 115, 252, 0.25) !important;
    }
    50% {
        box-shadow: 0 25px 65px rgba(129, 140, 248, 0.24), 0 0 30px rgba(129, 140, 248, 0.12);
        border-color: rgba(129, 140, 248, 0.5) !important;
    }
    100% {
        box-shadow: 0 15px 45px rgba(95, 115, 252, 0.12), 0 0 15px rgba(95, 115, 252, 0.05);
        border-color: rgba(95, 115, 252, 0.25) !important;
    }
}

@keyframes card-glow-pulse-yellow {
    0% {
        box-shadow: 0 15px 45px rgba(255, 190, 26, 0.12), 0 0 15px rgba(255, 190, 26, 0.05);
        border-color: rgba(255, 190, 26, 0.25) !important;
    }
    50% {
        box-shadow: 0 25px 65px rgba(253, 211, 77, 0.24), 0 0 30px rgba(253, 211, 77, 0.12);
        border-color: rgba(253, 211, 77, 0.5) !important;
    }
    100% {
        box-shadow: 0 15px 45px rgba(255, 190, 26, 0.12), 0 0 15px rgba(255, 190, 26, 0.05);
        border-color: rgba(255, 190, 26, 0.25) !important;
    }
}

@keyframes card-glow-pulse-orange {
    0% {
        box-shadow: 0 15px 45px rgba(238, 91, 60, 0.12), 0 0 15px rgba(238, 91, 60, 0.05);
        border-color: rgba(238, 91, 60, 0.25) !important;
    }
    50% {
        box-shadow: 0 25px 65px rgba(244, 114, 182, 0.24), 0 0 30px rgba(244, 114, 182, 0.12);
        border-color: rgba(244, 114, 182, 0.5) !important;
    }
    100% {
        box-shadow: 0 15px 45px rgba(238, 91, 60, 0.12), 0 0 15px rgba(238, 91, 60, 0.05);
        border-color: rgba(238, 91, 60, 0.25) !important;
    }
}

.feature-card {
    background-color: #FFF;
    border-radius: var(--border-radius-lg);
    border: 1px solid rgba(0, 0, 0, 0.08);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.feature-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-lg);
}

.card-info {
    padding: 40px 40px 24px;
}

.card-title {
    font-size: 24px;
    font-weight: 800;
    margin-bottom: 12px;
}

.card-desc {
    font-size: 14px;
    color: var(--text-secondary);
    line-height: 1.5;
}

.card-visual {
    padding: 0 40px 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 240px;
    position: relative;
}

/* --- THEMED CARDS --- */
.card-theme-purple {
    background-color: #5F73FC; /* Elegant periwinkle blue matching image */
    color: #FFF;
    border: none;
}
.card-theme-purple .card-title { color: #FFF; }
.card-theme-purple .card-desc { color: rgba(255, 255, 255, 0.85); }

.card-theme-orange {
    background-color: #EE5B3C; /* Beautiful vibrant coral/terracotta red matching image exactly */
    color: #FFF;
    border: none;
}
.card-theme-orange .card-title { color: #FFF; }
.card-theme-orange .card-desc { color: rgba(255, 255, 255, 0.85); }

.card-theme-yellow {
    background-color: #FFBE1A; /* Gorgeous warm sunflower yellow matching image */
    color: #121214;
    border: none;
}
.card-theme-yellow .card-title { color: #121214; }
.card-theme-yellow .card-desc { color: rgba(18, 18, 20, 0.85); }

/* Prompt Input Sandbox Card widget */
.prompt-box {
    background-color: #FFF;
    border-radius: var(--border-radius-md);
    width: 100%;
    max-width: 340px;
    box-shadow: var(--shadow-md);
    border: 1px solid rgba(0, 0, 0, 0.05);
    overflow: hidden;
}

.prompt-header {
    background-color: #F8F9FA;
    padding: 10px 16px;
    font-size: 11px;
    font-weight: 700;
    color: #8E8E93;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    display: flex;
    justify-content: space-between;
}

.prompt-body {
    padding: 16px;
}

.prompt-input-row {
    display: flex;
    background-color: #F3F4F6;
    border-radius: 6px;
    padding: 8px 12px;
    margin-bottom: 12px;
    align-items: center;
}

.prompt-field {
    border: none;
    background: none;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-primary);
    width: 100%;
    outline: none;
}

.prompt-tags-row {
    display: flex;
    justify-content: space-around;
    gap: 8px;
    margin-bottom: 12px;
}

.prompt-tag-btn {
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    padding: 6px 10px;
    background-color: #FFF;
    border: 1px solid rgba(0,0,0,0.06);
    border-radius: 4px;
    cursor: pointer;
    box-shadow: var(--shadow-sm);
    transition: all 0.2s ease;
}

.prompt-tag-btn:hover, .prompt-tag-btn.active {
    background-color: var(--accent-magic-light);
    color: var(--accent-magic);
    border-color: var(--accent-magic);
    transform: translateY(-1px);
}

.prompt-preview-wrap {
    border: 1px solid rgba(0, 0, 0, 0.05);
    border-radius: 6px;
    aspect-ratio: 16/10;
    background-color: #FFF;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
}

.prompt-preview-wrap svg {
    width: 80%;
    height: 80%;
}

/* Integrations Map Style */
.integration-nodes {
    width: 100%;
    max-width: 320px;
}

.integration-particle {
    animation: flowParticles 3s infinite linear;
}

.particle-delay-1 { animation-delay: 0.5s; }
.particle-delay-2 { animation-delay: 1.4s; }
.particle-delay-3 { animation-delay: 2.2s; }

@keyframes flowParticles {
    0% { stroke-dashoffset: 100; }
    100% { stroke-dashoffset: 0; }
}

/* Sliders mockup */
.sliders-mockup {
    background-color: #FFF;
    border-radius: var(--border-radius-md);
    width: 100%;
    max-width: 340px;
    box-shadow: var(--shadow-md);
    border: 1px solid rgba(0,0,0,0.05);
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.slider-row {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.slider-meta {
    display: flex;
    justify-content: space-between;
    font-size: 11px;
    font-weight: 700;
    color: var(--text-secondary);
}

.slider-track {
    width: 100%;
    height: 8px;
    background-color: #F3F4F6;
    border-radius: 4px;
    position: relative;
}

.slider-fill {
    height: 100%;
    background-color: var(--accent-orange);
    border-radius: 2px;
}

.slider-handle {
    width: 16px;
    height: 16px;
    background-color: #FFF;
    border: 1px solid rgba(0,0,0,0.15);
    border-radius: 50%;
    position: absolute;
    top: -4px;
    box-shadow: var(--shadow-sm);
    cursor: pointer;
}

/* Radial Category Selector Hub */
.radial-hub {
    width: 240px;
    height: 240px;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

.radial-center {
    width: 50px;
    height: 50px;
    background-color: var(--text-primary);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 5;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    font-size: 18px;
}

.radial-node {
    position: absolute;
    width: 40px;
    height: 40px;
    background-color: #FFF;
    border: 1px solid rgba(0,0,0,0.08);
    box-shadow: var(--shadow-sm);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    cursor: pointer;
    font-size: 18px;
}

.radial-node:hover {
    transform: scale(1.15);
    box-shadow: var(--shadow-md);
    border-color: var(--accent-purple);
}

/* Positions for radial nodes */
.radial-node:nth-child(2) { top: 10px; left: 100px; }
.radial-node:nth-child(3) { top: 60px; right: 15px; }
.radial-node:nth-child(4) { bottom: 60px; right: 15px; }
.radial-node:nth-child(5) { bottom: 10px; left: 100px; }
.radial-node:nth-child(6) { bottom: 60px; left: 15px; }
.radial-node:nth-child(7) { top: 60px; left: 15px; }

/* Supercharge vector files list */
.sync-mockup {
    background-color: #FFF;
    border-radius: var(--border-radius-md);
    width: 100%;
    max-width: 320px;
    padding: 16px;
    box-shadow: var(--shadow-md);
    border: 1px solid rgba(0,0,0,0.05);
}

.sync-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.sync-row:last-child {
    border-bottom: none;
}

.sync-left {
    display: flex;
    align-items: center;
    gap: 10px;
}

.sync-icon-stamp {
    font-size: 20px;
}

.sync-details {
    display: flex;
    flex-direction: column;
}

.sync-app-title {
    font-size: 11px;
    font-weight: 700;
    color: var(--text-primary);
}

.sync-status {
    font-size: 9px;
    color: var(--text-secondary);
}

.sync-badge {
    background-color: var(--accent-mint-light);
    color: var(--accent-mint);
    font-size: 9px;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    gap: 4px;
}

.sync-badge.pending {
    background-color: var(--accent-orange-light);
    color: var(--accent-orange);
}

/* Books compile list flow */
.team-flow {
    display: flex;
    align-items: center;
    gap: 20px;
}

.book-card-mock {
    width: 50px;
    height: 68px;
    background-color: #FFF;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 4px;
    box-shadow: var(--shadow-sm);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 6px;
    transition: all 0.3s ease;
}

.book-card-mock:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
}

.book-title-indicator {
    height: 4px;
    background-color: var(--text-secondary);
    border-radius: 2px;
    width: 70%;
}

.book-body-indicator {
    height: 38px;
    border: 1px dashed rgba(0,0,0,0.1);
    border-radius: 2px;
}

.flow-arrow {
    font-size: 20px;
    color: rgba(0, 0, 0, 0.15);
    font-weight: 300;
    animation: bounceRight 1.5s infinite ease-in-out;
}

@keyframes bounceRight {
    0%, 100% { transform: translateX(0); }
    50% { transform: translateX(6px); }
}

/* ==========================================================================
   STYLE SANDBOX SECTION
   ========================================================================== */
.style-sandbox-section {
    padding: 100px 0;
    background-color: var(--bg-cream);
}

/* Outer box: #809dff, CTA-card style decorative treatment, no shadow */
.style-sandbox-box {
    background: #809dff;
    border-radius: 24px;
    padding: 48px;
    overflow: hidden;
    position: relative;
}

/* Corner circle (top-left) — matching cta-box::before */
.style-sandbox-box::before {
    content: '';
    position: absolute;
    top: -200px;
    left: -200px;
    width: 420px;
    height: 420px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    pointer-events: none;
    z-index: 1;
}

/* Blob shape (bottom-right) — matching cta-box::after */
.style-sandbox-box::after {
    content: '';
    position: absolute;
    bottom: -160px;
    right: -160px;
    width: 340px;
    height: 340px;
    border-radius: 60% 40% 30% 70% / 50% 30% 70% 50%;
    background: rgba(255, 255, 255, 0.1);
    pointer-events: none;
    z-index: 1;
}

/* Grid dot overlays — matching cta-grid-left / cta-grid-right */
.sandbox-grid-left,
.sandbox-grid-right {
    position: absolute;
    top: 0;
    width: 18%;
    height: 100%;
    background-image: radial-gradient(rgba(255, 255, 255, 0.18) 1.5px, transparent 1.5px);
    background-size: 22px 22px;
    pointer-events: none;
    z-index: 2;
}
.sandbox-grid-left { left: 0; }
.sandbox-grid-right { right: 0; }

.style-sandbox-header {
    margin-bottom: 40px;
    position: relative;
    z-index: 3;
}

.style-sandbox-header {
    margin-bottom: 8px;
}

.style-sandbox-header h2 {
    font-size: 38px;
    font-weight: 800;
    line-height: 1.2;
    color: #fff;
}

.style-sandbox-header .highlight-underline {
    position: relative;
    display: inline-block;
    color: #fff;
}

.style-sandbox-header .highlight-underline::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -2px;
    width: 100%;
    height: 3px;
    background-color: rgba(255, 255, 255, 0.45);
    border-radius: 4px;
}

.style-sandbox-layout {
    display: grid;
    grid-template-columns: 340px 540px;
    gap: 48px;
    justify-content: center;
    align-items: start;
    position: relative;
    z-index: 3;
}

.style-sandbox-left-col {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* --- Options List (Left) --- */
.style-options-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.style-option {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 18px;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1);
    border: 1.5px solid transparent;
    color: rgba(255, 255, 255, 0.75);
    position: relative;
}

.style-option:hover {
    background-color: rgba(255, 255, 255, 0.12);
    color: #fff;
}

.style-option.active {
    background-color: #FFF;
    border-color: #FFF;
    color: var(--text-primary);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12);
}

.style-option.active .style-option-icon {
    color: #facd5a; /* Active option icon turns yellow! */
}

.style-option.active .style-option-arrow {
    color: var(--text-primary);
}

.style-option-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 24px;
    height: 24px;
}

.style-option-label {
    font-size: 18px;
    font-weight: 600;
    flex: 1;
}

.style-option-arrow {
    opacity: 0;
    transform: translateX(-4px);
    transition: opacity 0.2s ease, transform 0.2s ease;
    color: #fff;
    flex-shrink: 0;
}

.style-option.active .style-option-arrow,
.style-option:hover .style-option-arrow {
    opacity: 1;
    transform: translateX(0);
}

/* --- Preview Card (Right) — constrained width, white card --- */
.style-preview-card {
    background: #FFF;
    border-radius: 20px;
    border: 1px solid rgba(0, 0, 0, 0.08);
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.12);
    overflow: hidden;
    max-width: 540px;
    width: 100%;
    margin-top: 48px; /* Pushed down a little bit to create beautiful asymmetry */
}

.style-preview-bar {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 14px 20px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    background: #0B193C; /* Set to premium dark navy just like the image! */
}

.style-preview-bar-label {
    font-size: 13px;
    font-weight: 600;
    color: #FFF; /* Pure white text as shown in the image */
    margin-left: 8px;
}

.style-preview-canvas {
    padding: 24px;
    min-height: 240px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #FAFAFC;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    transition: opacity 0.25s ease;
}

.style-preview-canvas.fading {
    opacity: 0;
}

.style-preview-canvas svg {
    max-width: 100%;
    max-height: 210px;
}

.style-preview-info {
    padding: 24px 28px 28px;
}

.style-preview-meta {
    display: flex;
    gap: 8px;
    margin-bottom: 12px;
    flex-wrap: wrap;
}

.style-meta-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 12px;
    background: #F1F5F9;
    border-radius: 100px;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary);
    transition: all 0.2s ease;
}

.style-preview-desc {
    font-size: 14px;
    color: var(--text-secondary);
    line-height: 1.65;
    margin-bottom: 16px;
    transition: opacity 0.25s ease;
}

/* ==========================================================================
   PRICING SECTION (DARK THEME)
   ========================================================================== */
.pricing-section {
    background-color: var(--bg-cream); /* Signature luxury cream background */
    color: var(--text-primary);
    padding: 120px 0;
    position: relative;
    overflow: hidden;
}

.pricing-section h2 {
    color: var(--text-primary);
    font-size: 48px;
    text-align: center;
    margin-bottom: 12px;
}

.pricing-sub {
    color: var(--text-secondary);
    text-align: center;
    font-size: 16px;
    margin-bottom: 64px;
}

.pricing-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
    align-items: stretch;
}

@media (max-width: 1024px) {
    .pricing-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 24px;
    }
}

@media (max-width: 640px) {
    .pricing-grid {
        grid-template-columns: 1fr;
    }
}

.pricing-card {
    background-color: #FFFFFF !important; /* Clean, premium white cards */
    color: #121214 !important; /* Dark text for perfect readability */
    border-radius: 20px;
    border: 1px solid rgba(18, 18, 20, 0.06) !important; /* Ultra-soft border */
    padding: 40px 28px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05), 0 1px 3px rgba(0, 0, 0, 0.02) !important; /* Elegant floating shadow */
    width: 100%;
    height: 100%;
    text-align: left !important;
    transition: box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

/* --- 3D Card Flip wrappers --- */
.pricing-card-wrapper {
    perspective: 1500px;
    /* min-height (not fixed height) so extra feature lines grow the card
       instead of pushing the button out of it; grid stretch keeps cards equal */
    height: auto;
    min-height: 590px;
    width: 100%;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    transform: translate3d(0, 0, 0);
    will-change: transform;
}

.pricing-card-wrapper:hover {
    transform: translateY(-10px) translate3d(0, 0, 0);
}

.pricing-card-wrapper:hover .pricing-card {
    box-shadow: 0 24px 48px rgba(0, 0, 0, 0.1), 0 4px 12px rgba(0, 0, 0, 0.04) !important;
}

/* Featured / Popular Pro Card wrapper - Stands out with 1.04x scale */
.pricing-card-wrapper.pricing-creator-wrapper {
    transform: scale(1.04) translate3d(0, 0, 0);
    z-index: 10;
    will-change: transform;
}

.pricing-card-wrapper.pricing-creator-wrapper:hover {
    transform: translateY(-10px) scale(1.04) translate3d(0, 0, 0);
}

.pricing-card-wrapper.pricing-creator-wrapper:hover .pricing-card {
    box-shadow: 0 24px 48px rgba(0, 0, 0, 0.12), 0 4px 12px rgba(0, 0, 0, 0.05) !important;
}

.pricing-card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    text-align: center;
    transition: transform 0.6s;
    transform-style: preserve-3d;
    will-change: transform;
}

.pricing-card-inner.flipped {
    transform: rotateY(180deg);
}

.pricing-card-face {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    -webkit-backface-visibility: hidden !important;
    backface-visibility: hidden !important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    display: flex;
    flex-direction: column;
}

.pricing-card-front {
    /* Front Face stays flat and clean */
}

.pricing-card-back {
    transform: rotateY(180deg) !important;
}

/* Featured / Popular Pro Card styling - Stands out with clean elevated shadow */
.pricing-card.pricing-creator {
    background-color: #FFFFFF !important;
    border: 2px solid #facd5a !important; /* Gorgeous signature yellow border highlight! */
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.06), 0 10px 30px rgba(0, 0, 0, 0.03) !important;
}

.pricing-card h3 {
    color: #121214 !important;
    font-size: 22px;
    font-weight: 700;
}

.pricing-card .price-currency,
.pricing-card .price-amount {
    color: #121214 !important;
}

.pricing-card .pricing-features li {
    color: #4B5563 !important; /* Slate grey text for clean legibility against white background */
}

.pricing-card .price-period {
    color: #6B7280 !important;
}

/* Premium modern pricing button hover animations */
.pricing-btn-black {
    background-color: #121214;
    color: #FFF;
    border: 2px solid #121214;
    width: 100%;
    font-weight: 700;
    border-radius: 8px;
    padding: 12px;
    font-size: 15px;
    box-shadow: 0 4px 12px rgba(18, 18, 20, 0.1);
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.pricing-btn-black:hover {
    background-color: #facd5a;
    border-color: #facd5a;
    color: var(--text-primary);
    box-shadow: 0 6px 18px rgba(250, 205, 90, 0.35);
}

.pricing-btn-yellow {
    background-color: #facd5a;
    color: #121214;
    border: 2px solid #facd5a;
    width: 100%;
    font-weight: 800;
    border-radius: 8px;
    padding: 12px;
    font-size: 15px;
    box-shadow: 0 4px 15px rgba(250, 205, 90, 0.2);
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.pricing-btn-yellow:hover {
    background-color: #121214;
    border-color: #121214;
    color: #FFF;
    box-shadow: 0 6px 18px rgba(18, 18, 20, 0.25);
}

.pricing-badge {
    position: absolute;
    top: 20px;
    right: 20px;
    background-color: var(--accent-magic);
    color: #FFF;
    font-size: 10px;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 12px;
}

.pricing-header h3 {
    color: #FFF;
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 8px;
}

.pricing-plan-title {
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 24px;
    text-transform: uppercase;
}

.pricing-plan-title.free { color: var(--accent-mint); }
.pricing-plan-title.team { color: var(--accent-blue); }
.pricing-plan-title.enterprise { color: var(--accent-orange); }

.price-discount-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
    font-family: var(--font-heading);
}

.price-original {
    font-size: 16px;
    font-weight: 600;
    color: #9CA3AF;
    text-decoration: line-through;
    text-decoration-color: #9CA3AF;
}

.price-discount-badge {
    font-size: 12px;
    font-weight: 500;
    color: #B91C1C;
    background-color: #FEE2E2;
    padding: 3px 10px;
    border-radius: 10px;
    letter-spacing: 0.01em;
    white-space: nowrap;
}

.price-box {
    display: flex;
    align-items: flex-start; /* Superscript style dollar alignment */
    justify-content: flex-start;
    margin-bottom: 24px;
    font-family: var(--font-heading); /* Luxury Outfit Font */
    text-align: left;
}

.price-currency {
    font-size: 24px !important;
    font-weight: 700 !important;
    color: #121214 !important;
    margin-right: 2px;
    align-self: flex-start;
    margin-top: 6px; /* Offset down from top for perfect baseline visual look */
}

.price-amount {
    font-size: 56px !important; /* Premium impact size */
    font-weight: 800 !important;
    color: #121214 !important;
    line-height: 1;
    letter-spacing: -0.03em;
}

.price-period {
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #6B7280 !important;
    align-self: flex-end;
    margin-bottom: 6px;
    margin-left: 4px;
}

.pricing-features {
    list-style: none;
    margin-bottom: 40px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.pricing-features li {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 13px;
    color: #E5E7EB;
}

.pricing-features li svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.pricing-card .pricing-features li strong {
    color: #121214 !important;
    font-weight: 700;
}

.pricing-features.free-list li svg { fill: var(--accent-mint); }
.pricing-features.team-list li svg { fill: var(--accent-blue); }
.pricing-features.enterprise-list li svg { fill: var(--accent-orange); }

.pricing-card .btn {
    width: 100%;
}

/* ==========================================================================
   TESTIMONIALS SECTION
   ========================================================================== */
.testimonials-section {
    padding: 100px 0 80px;
    background-color: var(--bg-cream);
    position: relative;
    overflow: hidden;
}

/* Blue blurry gradient blob behind testimonials */
.testimonials-section::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 1400px;
    height: 900px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(95, 115, 252, 0.18) 0%, rgba(95, 115, 252, 0.10) 35%, rgba(95, 115, 252, 0.04) 60%, transparent 80%);
    filter: blur(80px);
    pointer-events: none;
    z-index: 0;
}

.testimonials-section .container {
    position: relative;
    z-index: 1;
}

.testimonials-pre-header {
    text-align: center;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #8E8E93;
    margin-bottom: 8px;
}

.testimonials-section h2 {
    font-size: 48px;
    text-align: center;
    margin-bottom: 64px;
}

.masonry-grid {
    column-count: 3;
    column-gap: 20px;
    width: 100%;
}

.testimonial-card {
    background-color: #FFFFFF;
    border-radius: var(--border-radius-md);
    border: 1px solid rgba(0, 0, 0, 0.06);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
    padding: 28px;
    margin-bottom: 20px;
    break-inside: avoid;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.testimonial-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.08);
    border-color: rgba(0, 0, 0, 0.1);
}

.testimonial-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}

.testimonial-logo {
    font-size: 18px;
    opacity: 0.8;
}

.testimonial-quote {
    font-size: 14px;
    color: var(--text-primary);
    line-height: 1.7;
    margin-bottom: 20px;
    font-weight: 500;
}

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

.testimonial-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid rgba(95, 115, 252, 0.15);
}

.testimonial-meta {
    display: flex;
    flex-direction: column;
}

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

.testimonial-handle {
    font-size: 11px;
    color: var(--text-secondary);
}

@media (max-width: 991px) {
    .masonry-grid {
        column-count: 2;
    }
}

@media (max-width: 600px) {
    .masonry-grid {
        column-count: 1;
    }
    .testimonials-section h2 {
        font-size: 32px;
    }
}

/* ==========================================================================
   BOTTOM CTA SECTION
   ========================================================================== */
.bottom-cta {
    padding: 40px 0 60px;
}

.cta-box {
    background: #facd5a; /* Custom yellow requested by user */
    border-radius: var(--border-radius-xl);
    padding: 64px;
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 48px;
    align-items: center;
    color: var(--text-primary); /* Dark charcoal text */
    overflow: hidden;
    position: relative;
    box-shadow: var(--shadow-lg);
}

.cta-box::before {
    content: '';
    position: absolute;
    top: -230px;
    left: -230px;
    width: 460px;
    height: 460px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.05); /* Enormously scaled solid flat circle */
    pointer-events: none;
    z-index: 1;
}

.cta-box::after {
    content: '';
    position: absolute;
    bottom: -180px;
    right: -180px;
    width: 360px;
    height: 360px;
    border-radius: 60% 40% 30% 70% / 50% 30% 70% 50%; /* Gorgeous uneven, organic blob shape */
    background: rgba(0, 0, 0, 0.05); /* Solid flat matching muted shade */
    pointer-events: none;
    z-index: 1;
}

.cta-content {
    max-width: 500px;
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
}

.cta-box h2 {
    color: var(--text-primary); /* Dark charcoal heading */
    font-size: 48px;
    font-weight: 800;
    line-height: 1.1;
    margin-bottom: 18px;
}

.cta-box p {
    color: rgba(18, 18, 20, 0.8); /* Charcoal secondary text */
    font-size: 16px;
    margin-bottom: 32px;
}

.cta-visual {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 300px;
}

/* Tablet screen preview mockup */
.phone-mockup {
    width: 240px;
    height: 330px;
    background-color: #121214;
    border-radius: 20px;
    border: 8px solid #2D2D30;
    position: absolute;
    bottom: -80px;
    box-shadow: var(--shadow-lg);
    overflow: hidden;
    transform: rotate(-6deg);
    transition: transform 0.5s ease;
}

.phone-mockup:hover {
    transform: rotate(0deg) translateY(-20px);
}

.phone-screen {
    width: 100%;
    height: 100%;
    background-color: #FAFAFC;
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.phone-header {
    height: 6px;
    width: 30%;
    background-color: #E5E7EB;
    border-radius: 3px;
    margin: 0 auto;
}

.phone-canvas {
    flex-grow: 1;
    border: 1px solid rgba(0,0,0,0.06);
    border-radius: 8px;
    background-color: #FFF;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    box-shadow: var(--shadow-sm);
}

.phone-canvas svg {
    width: 80%;
    height: 80%;
}

.phone-brush-bar {
    height: 14px;
    display: flex;
    gap: 6px;
    justify-content: center;
}

.phone-brush-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
}

/* Decorative grid pattern background for bottom CTA */
.cta-grid-left,
.cta-grid-right {
    position: absolute;
    top: 0;
    width: 20%;
    height: 100%;
    background-image: radial-gradient(rgba(0, 0, 0, 0.08) 1.5px, transparent 1.5px);
    background-size: 24px 24px;
    pointer-events: none;
    z-index: 2; /* Layered beautifully on top of the borderless corner shapes */
}

.cta-grid-left {
    left: 0;
}

.cta-grid-right {
    right: 0;
}

/* ==========================================================================
   FOOTER
   ========================================================================== */
.footer {
    background-color: var(--dark-bg);
    color: #8E8E93;
    padding: 80px 0 40px;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.footer-top {
    display: flex;
    justify-content: space-between;
    margin-bottom: 60px;
}

.footer-brand {
    max-width: 320px;
}

.footer-brand .logo {
    color: #FFF;
    margin-bottom: 16px;
}

.footer-brand p {
    font-size: 13px;
    line-height: 1.6;
}

.footer-links-grid {
    display: flex;
    gap: 80px;
}

.footer-col h4 {
    color: #FFF;
    font-size: 14px;
    font-weight: 500;
    margin-bottom: 20px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.footer-links {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.footer-links a {
    font-size: 13px;
    color: #8E8E93;
}

.footer-links a:hover {
    color: #FFF;
}

.footer-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 30px;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.footer-bottom p {
    font-size: 12px;
}

.footer-socials {
    display: flex;
    gap: 16px;
}

.footer-social-link {
    width: 36px;
    height: 36px;
    background-color: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all 0.2s ease;
}

.footer-social-link svg {
    width: 16px;
    height: 16px;
    fill: #8E8E93;
}

/* No color on hover — icon simply brightens from grey to white */
.footer-social-link:hover svg {
    fill: #FFF;
}

/* ==========================================================================
   RESPONSIVE DESIGN BREAKPOINTS
   ========================================================================== */
@media (max-width: 1024px) {
    .hero h1 {
        font-size: 52px;
    }
    .hero-grid {
        gap: 32px;
    }
    .pricing-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 24px;
    }
    .pricing-grid .pricing-card:last-child {
        grid-column: span 2;
    }
    .masonry-grid {
        column-count: 2;
    }
}

@media (max-width: 768px) {
    /* Global overflow clamp — prevents any wide element from causing horizontal scroll.
       clip (not hidden) so overflow-y isn't promoted to auto → no stray scroll containers. */
    section, header, footer, nav, main {
        max-width: 100%;
        overflow-x: clip;
    }
    .style-preview-canvas {
        overflow: visible;
    }
    .style-preview-canvas svg {
        width: 100%;
        height: auto;
        max-height: 200px;
        display: block;
    }
    .container {
        width: 100%;
        padding: 0 16px;
        box-sizing: border-box;
    }

    .navbar {
        padding: 12px 0; /* Roomier height on mobile */
    }
    .navbar .container {
        padding: 0 24px; /* Slightly narrower padding on smaller viewports */
    }
    .logo-container {
        margin-left: -6px; /* nudge the logo slightly left on mobile */
    }
    .nav-links, .nav-actions {
        display: none;
    }
    .menu-toggle {
        display: flex;
    }
    .hero {
        padding: 48px 0 60px;
    }
    .hero-grid {
        grid-template-columns: 1fr;
        gap: 48px;
    }
    .hero h1 {
        font-size: 36px;
        line-height: 1.1;
    }
    .hero-content {
        max-width: 100%;
        text-align: center;
        margin-top: 0;
    }
    .hero-desc {
        max-width: 100%;
        font-size: 15px;
    }
    .hero-cta-group {
        justify-content: center;
        flex-wrap: wrap;
    }
    .hero-trust-indicators {
        justify-content: center;
        flex-wrap: wrap;
        gap: 12px;
    }
    /* Two-column social proof: avatars with the stars beneath them on the
       left (under "Affordable Plans"), publisher count text on the right.
       display:contents lifts the stars + span out of their wrapper so the
       grid can place them independently. */
    .hero-social-proof {
        display: grid;
        grid-template-columns: auto auto;
        grid-template-areas:
            "avatars text"
            "stars   text";
        justify-content: center;
        align-items: center;
        column-gap: 16px;
        row-gap: 6px;
    }
    .hero-avatars { grid-area: avatars; justify-self: start; }
    .hero-social-proof-text { display: contents; }
    .hero-stars {
        grid-area: stars;
        font-size: 18px;
        text-align: left;
        justify-self: start;
    }
    .hero-social-proof-text span {
        grid-area: text;
        text-align: left;
        max-width: 210px;
    }
    .hero-visual {
        display: flex;
        justify-content: center;
        width: 100%;
    }
    .hero-visual .app-frame {
        width: 100%;
        max-width: 380px; /* keep the coloring sandbox compact on phones */
        height: auto;
    }
    .swatch-panel {
        flex-wrap: wrap;
        height: auto;
        gap: 6px;
        padding: 8px 10px;
    }
    .color-swatch {
        width: 20px;
        height: 20px;
    }
    .sandbox-canvas-wrap {
        width: 100% !important;
        height: auto !important;
        aspect-ratio: 1/1;
    }
    .cards-grid {
        grid-template-columns: 1fr;
        gap: 24px;
    }
    .pricing-grid {
        grid-template-columns: 1fr;
    }
    .pricing-grid .pricing-card:last-child {
        grid-column: span 1;
    }
    .masonry-grid {
        column-count: 1;
    }
    .cta-box {
        grid-template-columns: 1fr;
        padding: 32px 24px;
        text-align: left;
    }
    .cta-content {
        max-width: 100%;
        margin-top: 0;
        align-items: flex-start;
    }
    .cta-box h2 {
        font-size: 32px;
        text-align: left;
    }
    .cta-box p {
        text-align: left;
    }
    .cta-btn-desktop {
        display: none !important;
    }
    .cta-btn-mobile {
        display: inline-block !important;
        margin-top: 8px;
    }
    .phone-mockup {
        position: relative;
        bottom: 0;
        margin-top: 20px;
        transform: rotate(0deg);
    }
    .cta-visual {
        height: auto;
        justify-content: center;
    }
    .footer-top {
        flex-direction: column;
        gap: 40px;
    }
    .footer-links-grid {
        flex-direction: column;
        gap: 32px;
    }

    /* Art style sandbox section */
    .style-sandbox-section {
        padding: 48px 0;
    }

    .style-sandbox-box {
        padding: 28px 20px;
        border-radius: 20px;
    }

    .style-sandbox-header {
        margin-bottom: 16px;
    }

    .style-sandbox-header h2 {
        font-size: 22px;
        line-height: 1.25;
    }

    .style-sandbox-layout {
        grid-template-columns: 1fr;
        gap: 16px;
    }
    .style-preview-card {
        order: -1;
    }
    .style-sandbox-left-col {
        order: 1;
    }

    /* Pills row */
    .style-options-list {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        gap: 8px;
    }

    .style-option {
        padding: 7px 14px;
        border-radius: 50px;
        background: rgba(255,255,255,0.15);
        border: 1.5px solid rgba(255,255,255,0.25);
        gap: 6px;
        flex-shrink: 0;
    }

    .style-option.active {
        background: #fff;
        color: #7C3AED;
        border-color: #fff;
    }

    .style-option.active .style-option-icon {
        color: #7C3AED;
    }

    .style-option-icon {
        width: 16px;
        height: 16px;
    }

    .style-option-label {
        font-size: 12px;
        font-weight: 600;
    }

    .style-option-arrow {
        display: none;
    }

    .style-preview-card {
        width: 100%;
    }
}

/* Mobile drawer classes */
.navbar-mobile-menu {
    position: fixed;
    top: 70px;
    left: 0;
    width: 100%;
    background-color: var(--bg-cream);
    border-bottom: 1px solid rgba(0,0,0,0.08);
    padding: 24px;
    display: none;
    flex-direction: column;
    gap: 20px;
    box-shadow: var(--shadow-md);
    z-index: 99;
}

.navbar-mobile-menu.active {
    display: flex;
}

/* ==========================================================================
   PROMPT-TO-OUTLINE SANDBOX SECTION (OPTION 4)
   ========================================================================== */
.prompt-sandbox-section {
    padding: 100px 0;
    background-color: #FAF9F6;
    border-top: 1px solid rgba(0, 0, 0, 0.04);
    border-bottom: 1px solid rgba(0, 0, 0, 0.04);
}

.prompt-sandbox-grid {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 64px;
    align-items: center;
}

.sandbox-controls {
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.input-group-premium {
    display: flex;
    gap: 12px;
    background-color: #FFF;
    padding: 8px;
    border-radius: var(--border-radius-md);
    border: 1px solid rgba(0, 0, 0, 0.08);
    box-shadow: var(--shadow-sm);
    transition: box-shadow 0.3s ease, border-color 0.3s ease;
}

.input-group-premium:focus-within {
    border-color: var(--accent-magic);
    box-shadow: 0 10px 25px -10px rgba(139, 92, 246, 0.15);
}

.premium-input {
    flex: 1;
    border: none;
    outline: none;
    font-size: 15px;
    padding: 8px 16px;
    font-family: var(--font-body);
    color: var(--text-primary);
}

.premium-input::placeholder {
    color: #A1A1AA;
}

.btn-premium {
    background: linear-gradient(135deg, #A78BFA, #818CF8);
    color: #FFF;
    border: none;
    font-weight: 700;
    border-radius: var(--border-radius-sm);
    padding: 12px 24px;
    box-shadow: 0 4px 12px rgba(139, 92, 246, 0.2);
    cursor: pointer;
    transition: background 0.2s, box-shadow 0.2s;
}

.btn-premium:hover {
    background: linear-gradient(135deg, #B6A4FB, #93A0F9);
    box-shadow: 0 6px 18px rgba(139, 92, 246, 0.3);
}

.preset-tags-wrap {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.preset-label {
    font-size: 12px;
    font-weight: 800;
    color: var(--text-secondary);
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.preset-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.preset-tag {
    background-color: #FFF;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: var(--border-radius-sm);
    padding: 8px 16px;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--text-primary);
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: var(--shadow-sm);
}

.preset-tag:hover {
    border-color: var(--accent-magic);
    color: var(--accent-magic);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(139, 92, 246, 0.1);
}

.preset-tag.active {
    background-color: #FAF5FF;
    border-color: var(--accent-magic);
    color: var(--accent-magic);
    box-shadow: inset 0 0 0 1px rgba(139, 92, 246, 0.1);
}

.sandbox-features-list {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-top: 10px;
}

.sandbox-feature-item {
    display: flex;
    gap: 16px;
}

.feature-icon {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background-color: #FFF;
    border: 1px solid rgba(0,0,0,0.06);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    box-shadow: var(--shadow-sm);
    flex-shrink: 0;
}

.sandbox-feature-item h4 {
    font-size: 15px;
    font-weight: 700;
    margin-bottom: 4px;
    color: var(--text-primary);
}

.sandbox-feature-item p {
    font-size: 13.5px;
    color: var(--text-secondary);
    line-height: 1.4;
}

.sandbox-display-card {
    width: 100%;
    aspect-ratio: 1.1 / 1;
}

/* Loading scan layers */
.sandbox-loading-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.95);
    z-index: 10;
    display: none;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    overflow: hidden;
}

.scanner-bar {
    position: absolute;
    width: 100%;
    height: 6px;
    background: linear-gradient(90deg, transparent, var(--accent-magic), transparent);
    top: 0;
    left: 0;
    animation: scanAnimation 2s linear infinite;
    box-shadow: 0 0 15px var(--accent-magic);
}

@keyframes scanAnimation {
    0% { top: 0%; }
    50% { top: 100%; }
    100% { top: 0%; }
}

.loader-status {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}

.spinner-premium {
    width: 40px;
    height: 40px;
    border: 3px solid rgba(139, 92, 246, 0.1);
    border-top: 3px solid var(--accent-magic);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.loader-status span {
    font-size: 13.5px;
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.art-canvas-display {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.canvas-blank-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    color: var(--text-secondary);
    text-align: center;
    max-width: 250px;
}

.blank-emoji {
    font-size: 40px;
    animation: pulseSlow 3s ease-in-out infinite;
}

@keyframes pulseSlow {
    0%, 100% { transform: scale(1); opacity: 0.8; }
    50% { transform: scale(1.15); opacity: 1; }
}

.canvas-blank-state p {
    font-size: 13.5px;
    line-height: 1.4;
}

.demo-vector-svg {
    width: 85%;
    height: 85%;
    max-height: 320px;
    animation: revealDrawing 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes revealDrawing {
    from {
        opacity: 0;
        transform: scale(0.9) translateY(10px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}


/* ==========================================================================
   BOOK COMPILER SIMULATOR SECTION (OPTION 2)
   ========================================================================== */
.book-compiler-section {
    padding: 100px 0;
    background-color: #FFF;
}

.compiler-grid {
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    gap: 64px;
    align-items: center;
}

.compiler-library {
    background-color: #FAF9F6;
    border: 1px solid rgba(0,0,0,0.06);
    border-radius: var(--border-radius-md);
    padding: 32px;
    box-shadow: var(--shadow-sm);
}

.compiler-library h3 {
    font-size: 20px;
    font-weight: 800;
    margin-bottom: 8px;
    color: var(--text-primary);
}

.outline-thumbnails-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

.outline-thumb {
    background-color: #FFF;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: var(--border-radius-sm);
    padding: 12px;
    cursor: pointer;
    box-shadow: var(--shadow-sm);
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.outline-thumb:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 24px -10px rgba(0,0,0,0.1);
    border-color: rgba(139, 92, 246, 0.2);
}

.outline-thumb.added {
    border-color: var(--accent-magic);
    background-color: #FAF5FF;
}

.thumb-preview {
    aspect-ratio: 1.1 / 1;
    background-color: #FCFCFA;
    border: 1px solid rgba(0, 0, 0, 0.03);
    border-radius: var(--border-radius-sm) - 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px;
}

.thumb-preview svg {
    width: 80%;
    height: 80%;
    opacity: 0.85;
}

.thumb-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
}

.thumb-meta span {
    font-size: 11px;
    font-weight: 700;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 80px;
}

.btn-add-page {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 1px solid rgba(0,0,0,0.1);
    background-color: #FFF;
    font-size: 12px;
    font-weight: 900;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    flex-shrink: 0;
}

.outline-thumb:hover .btn-add-page {
    border-color: var(--accent-magic);
    background-color: var(--accent-magic);
    color: #FFF;
}

.outline-thumb.added .btn-add-page {
    background-color: var(--accent-magic);
    border-color: var(--accent-magic);
    color: #FFF;
    transform: rotate(45deg);
}

/* 3D Binder CSS Mockup */
.binder-visual-container {
    perspective: 800px;
    height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 12px;
}

.book-binder-3d {
    width: 170px;
    height: 190px;
    position: relative;
    transform-style: preserve-3d;
    transform: rotateY(-20deg) rotateX(15deg);
    transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.book-binder-3d:hover {
    transform: rotateY(-5deg) rotateX(8deg);
}

.binder-spine {
    position: absolute;
    width: 25px;
    height: 100%;
    left: -24px;
    top: 0;
    background: linear-gradient(90deg, #121214, #2A2A2E);
    border-radius: 3px 0 0 3px;
    transform-origin: right;
    transform: rotateY(-90deg);
}

.binder-cover {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    background: linear-gradient(135deg, #1A1A1E, #0F0F11);
    border-radius: 0 8px 8px 0;
    border: 1px solid rgba(255, 255, 255, 0.05);
    box-shadow: 12px 12px 30px rgba(0,0,0,0.3);
    z-index: 5;
    padding: 20px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    color: #FFF;
}

.binder-cover-badge {
    font-size: 24px;
    background-color: rgba(255,255,255,0.08);
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.binder-cover-title {
    font-family: var(--font-heading);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.08em;
    line-height: 1.4;
    color: #FFF;
}

.binder-cover-sub {
    font-size: 8px;
    font-weight: 600;
    opacity: 0.5;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.binder-sheets {
    position: absolute;
    width: 95%;
    height: 94%;
    left: 4px;
    top: 3%;
    background-color: #FFF;
    border-radius: 0 4px 4px 0;
    z-index: 2;
    box-shadow: 2px 2px 5px rgba(0,0,0,0.1);
}

.binder-sheet {
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: #FCFCFA;
    border-radius: 0 4px 4px 0;
    border-right: 1px solid rgba(0,0,0,0.08);
    box-shadow: 1px 1px 2px rgba(0,0,0,0.05);
    transform-origin: left;
    animation: insertSheet 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes insertSheet {
    from {
        transform: rotateY(-70deg) translateZ(50px);
        opacity: 0;
    }
    to {
        transform: rotateY(0deg) translateZ(0px);
        opacity: 1;
    }
}

/* Stats and Controls */
.binder-progress-bg {
    width: 100%;
    height: 6px;
    background-color: #E4E4E7;
    border-radius: 3px;
    overflow: hidden;
}

.binder-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #A78BFA, #818CF8);
    border-radius: 3px;
    transition: width 0.4s ease;
}

#binder-compile-btn {
    animation: pulseMagic 2s infinite;
}

@keyframes pulseMagic {
    0%, 100% {
        box-shadow: 0 4px 12px rgba(139, 92, 246, 0.2);
    }
    50% {
        box-shadow: 0 4px 20px rgba(139, 92, 246, 0.5);
        transform: scale(1.02);
    }
}


/* ==========================================================================
   RESPONSIVE DESIGN FOR DEMOS
   ========================================================================== */
@media (max-width: 991px) {
    .prompt-sandbox-grid,
    .compiler-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }
    
    .outline-thumbnails-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 480px) {
    .outline-thumbnails-grid {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================================
   PREMIUM 3D PHYSICAL BOOK MOCKUP (BOTTOM CTA - KDP COMPILER STYLE)
   ========================================================================== */
.book-3d-wrapper {
    perspective: 1200px;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 275px;
    position: relative;
    bottom: 0; /* Centered perfectly inside cta-visual */
    z-index: 5;
    transition: bottom 0.5s ease;
}

.book-3d-container {
    width: 240px;
    height: 240px;
    position: relative;
    transform-style: preserve-3d;
    transform: rotateY(-24deg) rotateX(14deg) rotateZ(-2deg); /* Tilted Y-negative matching compiler */
    transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Hover: lifts, floats, and rotates flatter */
.book-3d-wrapper:hover .book-3d-container {
    transform: rotateY(-6deg) rotateX(8deg) rotateZ(0deg) scale(1.05) translateY(-12px);
}

/* Spine: 3D volumetric thickness on the left edge */
.book-3d-spine {
    position: absolute;
    width: 34px; /* Proportional spine thickness (~14% of 240px) */
    height: 100%;
    left: -33px; /* Overlap to maintain a completely seamless join with the cover */
    top: 0;
    background: linear-gradient(90deg, #8b2b3a, #b0384a, #d2465b, #b0384a); /* Red spine matching Cozy Cuties book border */
    border-radius: 3px 0 0 3px;
    transform-origin: right;
    transform: rotateY(-90deg);
}

/* Pages Stack Wrapper */
.book-3d-pages {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    z-index: 2;
    transform-style: preserve-3d;
}

/* Staggered volumetric physical pages */
.book-3d-page {
    position: absolute;
    width: 97%; /* Leaves a beautiful realistic cover lip on the right */
    height: 98%; /* Leaves a beautiful cover lip on the top */
    background-color: #FCFCFA; /* Luxury cream page sheet */
    border-radius: 0 8px 8px 0;
    border-right: 1.5px solid rgba(0, 0, 0, 0.08); /* Crisp page edges */
    border-bottom: 2px solid rgba(0, 0, 0, 0.15); /* Stronger bottom border to represent bottom thickness */
    transition: transform 0.8s ease, box-shadow 0.8s ease;
}

.book-3d-page.page-1 {
    left: 2px;
    top: 2px; /* Staggered downward shift for bottom thickness */
    transform: translateZ(-6px);
    box-shadow: 1px 1px 2px rgba(0,0,0,0.03);
}

.book-3d-page.page-2 {
    left: 3px;
    top: 4px; /* Staggered downward shift for bottom thickness */
    transform: translateZ(-12px);
    box-shadow: 2px 2px 4px rgba(0,0,0,0.04);
}

.book-3d-page.page-3 {
    left: 4px;
    top: 6px; /* Staggered downward shift for bottom thickness */
    transform: translateZ(-18px);
    /* Deep volumetric ambient shadow matching the negative Y angle */
    box-shadow: 
        3px 3px 6px rgba(0,0,0,0.05),
        -20px 25px 45px rgba(0, 0, 0, 0.35);
}

/* Float shadow expansion on hover */
.book-3d-wrapper:hover .book-3d-page.page-3 {
    box-shadow: 
        3px 3px 6px rgba(0,0,0,0.05),
        -25px 35px 55px rgba(0, 0, 0, 0.35);
}

/* Front Cover: contains the flat square cozy cozy cuties image */
.book-3d-cover {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    z-index: 5;
    transform-style: preserve-3d;
    overflow: hidden; /* Added to clip the 1.5% right edge image expansion */
    border-radius: 0 12px 12px 0; /* Rounds the right cover corners while clipping */
}

.book-3d-cover img {
    width: 101.5%; /* Expanded slightly to crop the thin black line on the right edge */
    height: 100%;
    object-fit: cover;
    object-position: left center; /* Pins the left edge flush with the spine, cropping only on the right */
    display: block;
    border-radius: 0 12px 12px 0; /* Left spine connection is flat, right cover corners are rounded */
    box-shadow: inset -2px 0 5px rgba(0,0,0,0.1), 0 0 0 1px rgba(0,0,0,0.05);
}

@media (max-width: 991px) {
    .book-3d-wrapper {
        position: relative;
        bottom: 0;
        margin-top: 20px;
        width: 100%;
        max-width: 220px;
    }
    .book-3d-container {
        /* Desktop keeps 240px; that overflowed the 220px wrapper on phones and
           the cta-box overflow:hidden clipped the book's right edge. Size it to
           fit, with headroom for the 3D perspective projection. The transform is
           deliberately NOT overridden so the 3D pose matches desktop exactly
           (rotateY -24deg, rotateX 14deg, rotateZ -2deg). */
        width: 210px;
        height: 210px;
    }
}

/* ==========================================================================
   SCROLL-REVEAL SYSTEM (Kairn Premium Motion)
   ========================================================================== */

/* Base transition parameters */
.reveal-up,
.reveal-left,
.reveal-right,
.reveal-scale {
    opacity: 0;
    will-change: transform, opacity;
    transition: opacity 1.2s cubic-bezier(0.16, 1, 0.3, 1), transform 1.2s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Initial offsets */
.reveal-up {
    transform: translateY(50px);
}

.reveal-left {
    transform: translateX(-40px);
}

.reveal-right {
    transform: translateX(40px);
}

.reveal-scale {
    transform: scale(0.95);
}

/* Active State (triggered when intersecting viewport) */
.reveal-active {
    opacity: 1 !important;
    transform: translate(0, 0) scale(1) !important;
}

/* Staggered Delay Utilities for Premium Flow */
.delay-100 { transition-delay: 100ms; }
.delay-200 { transition-delay: 200ms; }
.delay-300 { transition-delay: 300ms; }
.delay-400 { transition-delay: 400ms; }
.delay-500 { transition-delay: 500ms; }

/* ==========================================================================
   BENTO FEATURE GRID SYSTEM (Kairn Premium Styling)
   ========================================================================== */

/* =============================================
   BASICGPT VS MAGICPAINT COMPARISON
   ============================================= */
.compare-section {
    padding: 100px 0 80px;
    background-color: #FFF;
}

.compare-section .section-intro {
    max-width: 860px;
    margin-bottom: 80px;
}

.compare-section .section-intro h2 {
    font-size: 40px;
}

.compare-section .section-intro p {
    font-size: 18px;
    margin-top: 14px;
}

.compare-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 28px;
    max-width: 860px;
    margin: 0 auto;
}

.compare-card {
    background: #FFF;
    border: 1px solid rgba(18, 18, 20, 0.16);
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 6px 24px rgba(18, 18, 20, 0.05);
}

.compare-image-wrap {
    position: relative;
    aspect-ratio: 1 / 1;
    background: #F7F6F2;
}

.compare-image-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.compare-label {
    position: absolute;
    left: 20px;
    bottom: 16px;
    background: #FFF;
    border: 1px solid rgba(18, 18, 20, 0.08);
    border-radius: 5px;
    box-shadow: 0 4px 14px rgba(18, 18, 20, 0.10);
    padding: 8px 18px;
    font-weight: 700;
    font-size: 15px;
}

.compare-list {
    list-style: none;
    margin: 0;
    padding: 34px 24px 26px;
}

.compare-list li {
    position: relative;
    padding: 7px 0 7px 34px;
    font-size: 15.5px;
    color: var(--text-primary);
}

.compare-list li::before {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
}

.compare-cons li::before {
    content: '\2715';
    color: #D2542C;
    border: 1.5px solid #D2542C;
}

.compare-pros li::before {
    content: '\2713';
    color: #1F9D61;
    border: 1.5px solid #1F9D61;
}

@media (max-width: 768px) {
    .compare-section {
        padding: 60px 0 48px;
    }
    .compare-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }
}

.bento-features-section {
    padding: 100px 0;
    background: radial-gradient(120% 120% at 50% -20%, rgba(248, 247, 252, 0.6) 0%, rgba(255, 255, 255, 1) 100%);
    position: relative;
    overflow: hidden;
    border-top: 1px solid rgba(18, 18, 20, 0.04);
}

.bento-features-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: 1400px;
    height: 1px;
    background: linear-gradient(90deg, rgba(110,99,229,0) 0%, rgba(110,99,229,0.12) 50%, rgba(110,99,229,0) 100%);
}

.features-grid-container {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    margin-top: 56px;
}

.feature-card {
    background: #F3F3F5;
    border: 2px solid #FFFFFF;
    border-radius: 24px;
    padding: 32px;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    box-sizing: border-box;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.02), inset 0 1px 1px rgba(255, 255, 255, 0.8);
}

.feature-card:hover {
    transform: translateY(-5px);
    background: #FFFFFF;
    border-color: #FFFFFF;
    box-shadow: 0 20px 40px rgba(110, 99, 229, 0.06), 0 8px 16px rgba(0, 0, 0, 0.02), inset 0 1px 1px rgba(255, 255, 255, 0.9);
}

.feature-card-wide {
    grid-column: span 2;
    flex-direction: row;
    padding: 0;
    overflow: hidden;
    background: #F3F3F5;
}

.feature-card-wide .card-content {
    padding: 32px;
    flex: 1.1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    box-sizing: border-box;
}

.feature-card-wide .card-visual {
    flex: 0.9;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px;
    box-sizing: border-box;
}

.feature-card-wide .card-visual img {
    width: auto;
    height: 100%;
    max-width: 100%;
    object-fit: contain;
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.feature-card-wide:hover .card-visual img {
    transform: scale(1.03);
}

.feature-card-small {
    grid-column: span 1;
    min-height: 280px;
}

.card-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 24px;
    width: 100%;
}

.card-icon-wrapper {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #121214;
    transition: all 0.3s ease;
}

.feature-card:hover .card-icon-wrapper {
    transform: scale(1.08);
}

.card-badge {
    font-size: 10px;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 20px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
}

.badge-purple {
    background: #8B5CF6;
    color: #FFFFFF;
    border-radius: 8px;
    font-size: 10.5px;
    font-weight: 600;
    text-transform: none;
    letter-spacing: 0;
}

.badge-gold {
    background: linear-gradient(135deg, #FBBF24 0%, #F59E0B 50%, #EF4444 100%);
    color: #FFFFFF;
    border-radius: 8px;
    font-size: 10.5px;
    font-weight: 600;
    text-transform: none;
    letter-spacing: 0;
    box-shadow: 0 2px 8px rgba(245, 158, 11, 0.2);
}

.badge-indigo {
    background: transparent;
    color: #4F46E5;
    border: 1.5px solid #E0E7FF;
    border-radius: 8px;
    font-size: 10.5px;
    font-weight: 600;
    text-transform: none;
    letter-spacing: 0;
}

.card-body {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.card-title-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
    flex-wrap: wrap;
}

.card-body h3 {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 19px;
    font-weight: 700;
    color: #121214;
    margin: 0;
    letter-spacing: -0.3px;
}

.card-body p {
    font-family: 'Inter', sans-serif;
    font-size: 13.5px;
    color: rgba(18, 18, 20, 0.55);
    line-height: 1.6;
    margin: 8px 0 24px 0;
}

.card-action-link {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 13px;
    font-weight: 700;
    color: rgba(18, 18, 20, 0.9);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: gap 0.25s ease, color 0.25s ease;
    margin-top: auto;
    width: fit-content;
}

.card-action-link svg {
    transition: transform 0.25s ease;
}

.feature-card:hover .card-action-link {
    color: var(--accent-orange); /* was purple #6e63e5 */
}

.feature-card:hover .card-action-link svg {
    transform: translateX(4px);
}

/* Responsive Breakpoints */
@media (max-width: 1200px) {
    .features-grid-container {
        grid-template-columns: repeat(2, 1fr);
    }
    .feature-card-wide {
        grid-column: span 2;
    }
}

@media (max-width: 768px) {
    .bento-features-section {
        padding: 60px 0;
    }
    .features-grid-container {
        grid-template-columns: 1fr;
        gap: 18px;
        margin-top: 36px;
    }
    .feature-card-wide {
        grid-column: span 1;
        flex-direction: column;
    }
    .feature-card-wide .card-content {
        order: 1;
        padding: 24px;
        /* Don't pin the action link to the card bottom on mobile — let it sit
           right after the text like the small cards do, and don't stretch the
           content box (flex: none) so the image below moves up. */
        justify-content: flex-start;
        flex: none;
    }
    .feature-card-wide .card-body {
        height: auto;
    }
    .feature-card-wide .card-action-link {
        margin-top: 0;
    }
    .feature-card-wide .card-visual {
        order: 2;
        height: 220px;
        border-left: none;
        border-top: 1px solid rgba(18, 18, 20, 0.04);
    }
    .feature-card-small {
        grid-column: span 1;
        min-height: auto;
        padding: 24px;
    }
}

/* ==========================================================================
   LARGE-SCREEN SCALE-UP (≥1700px)
   Restrained upscale for big desktop monitors: wider container, slightly
   larger hero type, and a bigger coloring sandbox. Screens below 1700px
   are pixel-identical to before. NOTE: breakpoint is deliberately above
   1536px — a 1920px laptop at 125% Windows scaling reports 1536px CSS
   width and must NOT get the scale-up; a true 1920px desktop at 100% does.
   ========================================================================== */
@media (min-width: 1700px) {
    .container {
        max-width: 1400px;
    }

    .hero-grid {
        --hero-col: 640px;
    }

    .hero h1 {
        font-size: 62px;
    }

    .hero-desc {
        font-size: 19px;
        max-width: 560px;
    }

    .trust-indicator {
        font-size: 14.5px;
    }

    /* Sandbox frame 470→520px; canvas = 520 - 40 body padding - 2 border = 478.
       height:auto (content-sized) replaces the fixed 571px so nothing clips.
       Scoped to .hero-visual — the cooking-sandbox cards also use .app-frame. */
    .hero-visual .app-frame {
        width: 520px;
        height: auto;
    }

    .hero-visual .sandbox-canvas-wrap {
        width: 478px;
        height: 478px;
    }
}