/* ═══════════════════════════════════════════════════════════════════════
   RememberEvent — shared marketing skeleton
   Third brand palette: Classic (cream / charcoal / gold). LIGHT theme.
   Derived from the gallery theming engine's `classic` preset so the
   marketing chrome and the (Slice 2) demo speak the same colour language.
   The chrome palette is FIXED — only the Slice 2 demo mini-gallery re-themes.
   Static HTML/CSS/JS, no build step. Edit directly.
   ═══════════════════════════════════════════════════════════════════════ */

:root {
    /* Lavender-purple — primary accent (RememberEvent logo #9c78a8, darkened for white-text contrast) */
    --primary: #7d5c8a;
    --primary-dark: #654a71;
    --primary-light: rgba(125, 92, 138, 0.10);
    --primary-border: rgba(125, 92, 138, 0.28);
    --on-primary: #ffffff;       /* white text on the lavender accent */
    /* Sage green — secondary accent (RememberEvent logo #84906c), darkened for legibility */
    --accent-sage: #6f7a58;                        /* step-number circles */
    --accent-sage-dark: #5c6747;                   /* legible sage text — section labels */
    --accent-sage-light: rgba(111, 122, 88, 0.16); /* feature-icon tint */
    --ink: #2c2a26;              /* charcoal — headings */
    --bg: #f5f6f1;              /* page — soft sage off-white (was warm cream) */
    --surface: #fdfefb;          /* cards */
    --surface-hover: #f1f4ec;
    --hero-bg: #e9efe1;          /* hero gradient — sage cream */
    --text-primary: #2c2a26;
    --text-secondary: #5a564e;
    --text-muted: #8a8270;
    --border-subtle: #e1e6d8;    /* sage-gray borders */
}

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

body {
    font-family: 'DM Sans', sans-serif;
    background: var(--bg);
    color: var(--text-primary);
    line-height: 1.6;
    overflow-x: hidden;
}

.container { max-width: 1100px; margin: 0 auto; padding: 0 24px; }

/* ═══════════ NAVIGATION ═══════════ */
nav {
    position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
    padding: 2px 0;
    background: rgba(245, 246, 241, 0.88);
    backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--border-subtle);
}
.nav-content {
    max-width: 1100px; margin: 0 auto; padding: 0 24px;
    display: flex; justify-content: space-between; align-items: center; gap: 20px;
}
.logo { display: inline-flex; align-items: center; text-decoration: none; line-height: 0; }
.logo-img { height: 68px; width: auto; display: block; }
.logo-accent { color: var(--primary); }
.logo-tagline { font-size: 0.6rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 2px; margin-top: 2px; }
.nav-links { display: flex; gap: 20px; align-items: center; flex-wrap: nowrap; }
.nav-links a { color: var(--text-secondary); text-decoration: none; font-size: 0.9rem; font-weight: 500; white-space: nowrap; transition: color 0.3s; }
.nav-links a:hover { color: var(--text-primary); }
.nav-links a.active-page { color: var(--primary); }
.nav-cta {
    background: var(--primary) !important; color: var(--on-primary) !important;
    padding: 8px 20px; border-radius: 8px; font-weight: 700 !important;
    transition: transform 0.2s, box-shadow 0.2s !important;
}
.nav-cta:hover { transform: translateY(-1px); box-shadow: 0 4px 20px rgba(125, 92, 138, 0.3); }
/* "See a Live Gallery" — a distinct-but-lightweight demo entry point next to the solid Create CTA:
   lavender text so it reads as a secondary action, without a heavy pill that would crowd the nav. */
.nav-demo { color: var(--primary-dark) !important; font-weight: 700 !important; }
.nav-demo:hover { color: var(--primary) !important; }
.mobile-toggle { display: none; background: none; border: none; color: var(--text-primary); font-size: 1.5rem; cursor: pointer; }

/* Nav dropdown — "Events We Serve" */
.nav-dropdown { position: relative; }
.nav-dropdown-toggle {
    background: none; border: none; cursor: pointer; padding: 0;
    font-family: 'DM Sans', sans-serif; font-size: 0.9rem; font-weight: 500;
    color: var(--text-secondary); display: inline-flex; align-items: center; gap: 5px; white-space: nowrap;
    transition: color 0.3s;
}
.nav-dropdown-toggle:hover, .nav-dropdown-toggle[aria-expanded="true"] { color: var(--text-primary); }
.nav-dropdown-caret { font-size: 0.7rem; transition: transform 0.2s; }
.nav-dropdown-toggle[aria-expanded="true"] .nav-dropdown-caret { transform: rotate(180deg); }
.nav-dropdown-menu {
    position: absolute; top: calc(100% + 10px); left: 0; min-width: 180px;
    background: var(--surface); border: 1px solid var(--border-subtle);
    border-radius: 12px; padding: 8px; box-shadow: 0 12px 30px rgba(44, 42, 38, 0.14);
    display: none; flex-direction: column; gap: 2px; z-index: 1001;
}
/* transparent bridge so the hover gap doesn't close the menu */
.nav-dropdown-menu::before { content: ''; position: absolute; top: -10px; left: 0; right: 0; height: 10px; }
.nav-dropdown:hover .nav-dropdown-menu, .nav-dropdown-menu.open { display: flex; }
.nav-dropdown-menu a { padding: 10px 14px; border-radius: 8px; font-size: 0.9rem; color: var(--text-secondary); white-space: nowrap; }
.nav-dropdown-menu a:hover, .nav-dropdown-menu a:focus-visible { background: var(--hero-bg); color: var(--ink); outline: none; }
.nav-dropdown-menu a.active-page { color: var(--primary-dark); font-weight: 600; }

/* ═══════════ BUTTONS ═══════════ */
.btn {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 14px 28px; border-radius: 10px; font-weight: 700;
    font-size: 1rem; text-decoration: none; transition: all 0.3s;
    cursor: pointer; border: none; font-family: 'DM Sans', sans-serif;
}
.btn-primary { background: var(--primary); color: var(--on-primary); }
.btn-primary:hover { background: var(--primary-dark); transform: translateY(-2px); box-shadow: 0 8px 30px rgba(125, 92, 138, 0.3); }
.btn-secondary { background: transparent; color: var(--text-primary); border: 1px solid var(--border-subtle); }
.btn-secondary:hover { border-color: var(--text-muted); background: var(--surface); }
.btn-dark { background: var(--ink); color: #fdfbf5; }
.btn-dark:hover { transform: translateY(-2px); box-shadow: 0 8px 30px rgba(44, 42, 38, 0.22); }

/* ═══════════ HERO ═══════════ */
.hero {
    min-height: 100vh; display: flex; align-items: center;
    padding-top: 120px; position: relative; overflow: hidden;
    background: linear-gradient(180deg, var(--hero-bg) 0%, var(--bg) 100%);
}
.hero::before {
    content: ''; position: absolute; top: -200px; right: -200px;
    width: 600px; height: 600px;
    background: radial-gradient(circle, rgba(125, 92, 138, 0.10) 0%, transparent 70%);
    pointer-events: none;
}
.hero-layout { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 56px; align-items: center; }
.hero-badge {
    display: inline-flex; align-items: center; gap: 8px;
    background: var(--primary-light); border: 1px solid var(--primary-border);
    padding: 6px 16px; border-radius: 50px; font-size: 0.8rem;
    color: var(--primary-dark); font-weight: 600; margin-bottom: 24px;
}
/* Per-page planner eyebrow (vertical pages) — gold audience signal above the headline.
   Sized up for prominence but kept well below the 3.4rem serif headline so it stays
   secondary. DM Sans tops out at 700, so the extra weight comes from the larger size. */
.hero-kicker {
    display: inline-block; font-size: 1.25rem; font-weight: 700;
    color: var(--primary-dark); text-transform: uppercase; letter-spacing: 1.5px;
    margin-bottom: 16px; line-height: 1.2;
}
.hero h1 {
    font-family: 'Playfair Display', serif; font-size: 3.4rem;
    font-weight: 800; line-height: 1.08; margin-bottom: 18px; letter-spacing: -1px;
    color: var(--ink);
}
.hero-subtitle {
    font-size: 1.12rem; color: var(--text-secondary);
    margin-bottom: 32px; max-width: 520px; line-height: 1.7;
}
.hero-buttons { display: flex; gap: 16px; flex-wrap: wrap; }
/* Guest entry point (home hero): someone arriving from a paused gallery's "Continue" can jump straight
   to the join page. Subtle tertiary line beneath the primary CTAs. */
.hero-guest-note { margin-top: 18px; font-size: 0.92rem; color: var(--text-secondary); }
.hero-guest-note a { color: var(--primary-dark); font-weight: 600; text-decoration: none; border-bottom: 1px solid var(--primary-border); }
.hero-guest-note a:hover { color: var(--primary); border-bottom-color: var(--primary); }

/* ═══════════ GALLERY MOCK (hero visual — placeholder for Slice 2 live demo) ═══════════ */
.gallery-mock {
    background: var(--surface); border-radius: 22px; padding: 16px;
    border: 1px solid var(--border-subtle);
    box-shadow: 0 30px 60px rgba(44, 42, 38, 0.14);
    max-width: 380px; margin: 0 auto; width: 100%;
}
.gallery-mock-header { display: flex; align-items: center; gap: 10px; padding: 4px 4px 14px; }
.gallery-mock-logo {
    width: 40px; height: 40px; border-radius: 10px; flex-shrink: 0;
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    display: flex; align-items: center; justify-content: center;
    color: #fff; font-family: 'Playfair Display', serif; font-weight: 800; font-size: 1.1rem;
}
.gallery-mock-title { font-family: 'Playfair Display', serif; font-weight: 700; font-size: 1rem; color: var(--ink); }
.gallery-mock-sub { font-size: 0.72rem; color: var(--text-muted); }
.gallery-mock-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.gallery-tile { position: relative; aspect-ratio: 1 / 1; border-radius: 10px; overflow: hidden; }
.gallery-tile.wide { grid-column: span 2; aspect-ratio: 2 / 1; }
.gallery-tile-badge {
    position: absolute; bottom: 6px; left: 6px; font-size: 0.62rem; font-weight: 600;
    color: #fff; background: rgba(0,0,0,0.35); padding: 2px 7px; border-radius: 20px;
}
.gallery-mock-foot { display: flex; align-items: center; justify-content: space-between; padding: 12px 4px 2px; }
.gallery-mock-foot span { font-size: 0.72rem; color: var(--text-muted); }

/* ═══════════ SECTIONS ═══════════ */
.section { padding: 96px 0; border-top: 1px solid var(--border-subtle); }
.section-header { text-align: center; margin-bottom: 56px; }
.section-label {
    display: inline-block; font-size: 0.8rem; font-weight: 700;
    color: var(--accent-sage-dark); text-transform: uppercase; letter-spacing: 2px; margin-bottom: 12px;
}
.section-header h2 {
    font-family: 'Playfair Display', serif; font-size: 2.4rem;
    font-weight: 700; margin-bottom: 12px; letter-spacing: -0.5px; color: var(--ink);
}
.section-header p { color: var(--text-secondary); font-size: 1.05rem; max-width: 560px; margin: 0 auto; }

/* ═══════════ HOW IT WORKS (home only) ═══════════ */
.steps-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.step-card {
    text-align: center; padding: 34px 24px; background: var(--surface);
    border-radius: 16px; border: 1px solid var(--border-subtle); transition: all 0.3s;
}
.step-number {
    width: 44px; height: 44px; border-radius: 50%;
    background: var(--accent-sage); color: var(--on-primary);
    display: flex; align-items: center; justify-content: center;
    font-weight: 800; font-size: 1.15rem; margin: 0 auto 16px;
}
.step-card h3 { font-size: 1.05rem; font-weight: 700; margin-bottom: 8px; color: var(--ink); }
.step-card p { font-size: 0.9rem; color: var(--text-secondary); line-height: 1.55; }

/* ═══════════ TAILORED BENEFIT (the one per-page differentiator) ═══════════ */
.tailored { background: var(--hero-bg); }
.tailored-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
.tailored-copy h2 {
    font-family: 'Playfair Display', serif; font-size: 2.2rem; font-weight: 700;
    color: var(--ink); margin-bottom: 16px; letter-spacing: -0.5px; line-height: 1.15;
}
.tailored-copy p { color: var(--text-secondary); font-size: 1.05rem; margin-bottom: 16px; }
.tailored-list { list-style: none; }
.tailored-list li {
    display: flex; gap: 12px; align-items: flex-start; padding: 10px 0;
    font-size: 0.95rem; color: var(--text-secondary); border-bottom: 1px solid var(--border-subtle);
}
.tailored-list li:last-child { border-bottom: none; }
.tailored-list .check { color: var(--primary-dark); font-weight: 800; flex-shrink: 0; }
.tailored-panel {
    background: var(--surface); border: 1px solid var(--border-subtle);
    border-radius: 18px; padding: 32px; box-shadow: 0 20px 50px rgba(44,42,38,0.10);
}
.tailored-panel h3 { font-family: 'Playfair Display', serif; font-size: 1.3rem; color: var(--ink); margin-bottom: 10px; }
.tailored-panel p { font-size: 0.92rem; color: var(--text-secondary); }
.tailored-stat { font-family: 'Playfair Display', serif; font-size: 2.6rem; font-weight: 800; color: var(--primary-dark); }

/* Resell pitch (home) — 4-up card row */
.resell-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; max-width: 900px; margin: 0 auto; }
.resell-card { background: var(--surface); border: 1px solid var(--border-subtle); border-radius: 16px; padding: 28px; }
.resell-card h4 { font-size: 1.05rem; color: var(--ink); margin-bottom: 8px; }
.resell-card p { font-size: 0.9rem; color: var(--text-secondary); line-height: 1.55; }

/* ═══════════ FEATURES ═══════════ */
.features-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.feature-card {
    display: flex; align-items: flex-start; gap: 16px; padding: 24px;
    background: var(--surface); border-radius: 16px;
    border: 1px solid var(--border-subtle); transition: all 0.3s;
}
.feature-card:hover { border-color: var(--primary-border); background: var(--surface-hover); }
.feature-icon-box {
    font-size: 1.6rem; flex-shrink: 0; width: 48px; height: 48px;
    display: flex; align-items: center; justify-content: center;
    background: var(--accent-sage-light); border-radius: 12px;
}
.feature-card h4 { margin-bottom: 4px; font-size: 0.98rem; color: var(--ink); }
.feature-card p { font-size: 0.87rem; color: var(--text-secondary); line-height: 1.5; }

/* ═══════════ PRICING ═══════════ */
.pricing-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; max-width: 720px; margin: 0 auto; }
.pricing-card {
    padding: 36px 32px; background: var(--surface); border-radius: 18px;
    border: 1px solid var(--border-subtle); text-align: center; position: relative;
}
.pricing-card.featured { border-color: var(--primary); box-shadow: 0 16px 40px rgba(125,92,138,0.16); }
.pricing-flag {
    position: absolute; top: -12px; left: 50%; transform: translateX(-50%);
    background: var(--primary); color: var(--on-primary); font-size: 0.7rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: 1px; padding: 5px 14px; border-radius: 20px;
}
.pricing-name { font-size: 1.1rem; font-weight: 700; margin-bottom: 8px; color: var(--ink); }
.pricing-price { font-family: 'Playfair Display', serif; font-size: 2.8rem; font-weight: 800; color: var(--ink); }
.pricing-price small { font-size: 1rem; font-weight: 600; color: var(--text-muted); }
.pricing-period { font-size: 0.85rem; color: var(--text-muted); margin-bottom: 22px; }
.pricing-features { list-style: none; text-align: left; margin-bottom: 26px; }
.pricing-features li {
    padding: 9px 0; font-size: 0.88rem; color: var(--text-secondary);
    border-bottom: 1px solid var(--border-subtle); display: flex; align-items: flex-start; gap: 8px;
}
.pricing-features li:last-child { border-bottom: none; }
.pricing-check { color: var(--primary-dark); font-weight: 700; flex-shrink: 0; }
.pricing-note { text-align: center; color: var(--text-muted); font-size: 0.85rem; margin-top: 22px; }
/* "Contact us" link under pricing — was default browser blue; restyle to the muted lavender palette. */
.pricing-note a { color: var(--primary-dark); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.pricing-note a:hover { color: var(--primary); }

/* ═══════════ SAMPLE IT (demo shell — interactivity lands in Slice 2) ═══════════ */
.sample { background: var(--hero-bg); }
.sample-shell {
    max-width: 720px; margin: 0 auto; text-align: center;
    background: var(--surface); border: 1px dashed var(--primary-border);
    border-radius: 20px; padding: 48px 32px;
}
.sample-shell .sample-kicker { font-size: 0.8rem; font-weight: 700; color: var(--primary-dark); text-transform: uppercase; letter-spacing: 2px; }
.sample-shell h3 { font-family: 'Playfair Display', serif; font-size: 1.8rem; color: var(--ink); margin: 10px 0 12px; }
.sample-shell p { color: var(--text-secondary); font-size: 1rem; max-width: 520px; margin: 0 auto 24px; }
.sample-soon { font-size: 0.8rem; color: var(--text-muted); margin-top: 16px; }

/* ═══════════ CTA / CONTACT ═══════════ */
.cta-section { padding: 84px 0; text-align: center; border-top: 1px solid var(--border-subtle); }
.cta-section h2 { font-family: 'Playfair Display', serif; font-size: 2.2rem; margin-bottom: 12px; color: var(--ink); }
.cta-section p { color: var(--text-secondary); margin-bottom: 28px; font-size: 1rem; }
.contact-box { max-width: 480px; margin: 0 auto 28px; }
.contact-form { display: flex; flex-direction: column; gap: 12px; text-align: left; }
.contact-form input, .contact-form textarea {
    padding: 14px 16px; background: var(--surface); border: 1px solid var(--border-subtle);
    border-radius: 10px; color: var(--text-primary); font-size: 1rem; width: 100%;
    box-sizing: border-box; font-family: 'DM Sans', sans-serif;
}
.contact-form textarea { min-height: 120px; resize: vertical; }
.contact-success {
    display: none; text-align: center; padding: 28px 20px; background: var(--surface);
    border: 1px solid var(--border-subtle); border-radius: 12px;
}

/* ═══════════ LEGAL PAGES (privacy / tos) ═══════════ */
.legal-content { padding: 120px 0 60px; }
.legal-content .container { max-width: 800px; }
.legal-content h1 { font-family: 'Playfair Display', serif; font-size: 2.2rem; font-weight: 700; margin-bottom: 8px; color: var(--ink); }
.legal-content .effective-date { color: var(--text-muted); font-size: 0.9rem; margin-bottom: 40px; }
.legal-content h2 { font-size: 1.3rem; font-weight: 700; color: var(--primary-dark); margin-top: 36px; margin-bottom: 12px; }
.legal-content h3 { font-size: 1.05rem; font-weight: 600; color: var(--ink); margin-top: 20px; margin-bottom: 8px; }
.legal-content p { color: var(--text-secondary); margin-bottom: 16px; line-height: 1.8; }
.legal-content ul { color: var(--text-secondary); margin-bottom: 16px; padding-left: 24px; line-height: 1.8; }
.legal-content li { margin-bottom: 6px; }
.legal-content a { color: var(--primary-dark); }
.legal-content table { width: 100%; border-collapse: collapse; margin-bottom: 20px; }
.legal-content th, .legal-content td { text-align: left; padding: 10px 14px; border-bottom: 1px solid var(--border-subtle); color: var(--text-secondary); font-size: 0.9rem; }
.legal-content th { color: var(--ink); font-weight: 600; }
@media (max-width: 768px) {
    .legal-content h1 { font-size: 1.8rem; }
    .legal-content table { font-size: 0.8rem; }
}

/* ═══════════ FOOTER ═══════════ */
footer { padding: 40px 0; border-top: 1px solid var(--border-subtle); }
.footer-content { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 16px; }
.footer-copyright { color: var(--text-muted); font-size: 0.8rem; line-height: 1.6; }
.footer-links { display: flex; gap: 24px; }
.footer-links a { color: var(--text-muted); text-decoration: none; font-size: 0.8rem; transition: color 0.3s; }
.footer-links a:hover { color: var(--text-secondary); }

/* ═══════════ FAQ ═══════════ */
.faq-list { max-width: 780px; margin: 0 auto; }
.faq-item { padding: 24px 0; border-bottom: 1px solid var(--border-subtle); }
.faq-item:first-child { padding-top: 0; }
.faq-item:last-child { border-bottom: none; }
.faq-item h3 { font-size: 1.1rem; color: var(--ink); margin-bottom: 8px; }
.faq-item p { color: var(--text-secondary); font-size: 0.95rem; line-height: 1.7; }

/* ═══════════ SCROLL-REVEAL ANIMATIONS (progressive enhancement) ═══════════ */
.js-anims .fade-up { opacity: 0; transform: translateY(24px); transition: opacity 0.7s ease, transform 0.7s ease; }
.js-anims .fade-up.visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: no-preference) {
    .hero-badge, .hero-kicker, .hero h1, .hero-subtitle, .hero-buttons {
        opacity: 0; animation: heroFadeUp 0.8s ease forwards;
    }
    .hero-badge, .hero-kicker { animation-delay: 0.05s; }
    .hero h1 { animation-delay: 0.15s; }
    .hero-subtitle { animation-delay: 0.4s; }
    .hero-buttons { animation-delay: 0.55s; }
    @keyframes heroFadeUp { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } }

    .hero .gallery-mock { animation: heroFloat 6s ease-in-out infinite; }
    @keyframes heroFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }

    .feature-card, .step-card, .resell-card, .pricing-card {
        transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease, background 0.3s ease;
    }
    .feature-card:hover, .step-card:hover, .resell-card:hover, .pricing-card:hover {
        transform: translateY(-4px); box-shadow: 0 14px 32px rgba(125, 92, 138, 0.16);
    }
}
@media (prefers-reduced-motion: reduce) {
    .js-anims .fade-up { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* ═══════════ MOBILE ═══════════ */
@media (max-width: 768px) {
    .container { padding: 0 16px; }
    .nav-links { display: none; }
    .nav-links.active {
        /* Centered column: main links center, and the Events group (label + verticals) is centered
           under its heading — no left rail — so the whole menu reads clean and intentional. */
        display: flex; flex-direction: column; align-items: center; text-align: center; position: absolute;
        top: 56px; left: 0; right: 0; background: rgba(245, 246, 241, 0.98);
        padding: 24px; gap: 18px; border-bottom: 1px solid var(--border-subtle);
    }
    .mobile-toggle { display: block; }
    .logo-img { height: 52px; }
    /* Dropdown collapses into the hamburger column as a labelled group: a muted
       "Events We Serve ▾" heading with the four verticals centered beneath it. */
    .nav-links.active .nav-dropdown { width: 100%; }
    .nav-links.active .nav-dropdown-toggle {
        width: 100%; justify-content: center; gap: 6px; pointer-events: none;
        color: var(--text-muted); font-size: 0.75rem; font-weight: 700;
        text-transform: uppercase; letter-spacing: 1.5px;
    }
    .nav-links.active .nav-dropdown-caret { display: inline; font-size: 0.6rem; }
    .nav-links.active .nav-dropdown-menu {
        position: static; display: flex; align-items: center; box-shadow: none; border: none;
        background: transparent; min-width: 0;
        /* Centered under the heading — no left rail. The parent flex gap spaces the Events group from
           the next item, so spacing stays even down the whole menu. */
        margin: 6px 0 0; padding: 2px 0; gap: 6px;
    }
    .nav-links.active .nav-dropdown-menu::before { display: none; }
    .nav-links.active .nav-dropdown-menu a { padding: 4px 0; }
    .hero { min-height: auto; padding: 120px 0 60px; }
    /* Vertical pages (weddings/mitzvahs/events/parties + vendor — all use .hero-kicker): trim the
       oversized gap between the fixed header and the heading, and give the hero real breathing room at
       the bottom on phones (the buttons/mock were sitting too tight against the next section). */
    .hero:has(.hero-kicker) { padding-top: 84px; padding-bottom: 80px; }
    .hero-layout { grid-template-columns: 1fr; gap: 40px; }
    .hero h1 { font-size: 2.4rem; }
    .hero-badge { font-size: 0.85rem; }
    .hero-buttons { justify-content: flex-start; }
    .gallery-mock { order: 2; }
    .steps-grid { grid-template-columns: 1fr; }
    .tailored-layout { grid-template-columns: 1fr; gap: 32px; }
    .resell-grid { grid-template-columns: 1fr; }
    .features-grid { grid-template-columns: 1fr; }
    .feature-card { align-items: flex-start; }
    .pricing-layout { grid-template-columns: 1fr; }
    .section { padding: 72px 0; }
    .section-header h2 { font-size: 1.8rem; }
    .footer-content { flex-direction: column; text-align: center; }
}