/* Marketplace Keywords Landing — front-end styles
   Theme: Meesho-inspired maroon, tech-savvy dark accents */
.mkl-landing {
    --mkl-primary: #8b1538;        /* Meesho-style maroon */
    --mkl-primary-dark: #6b0f2a;
    --mkl-primary-light: #ad2c53;
    --mkl-ink: #12131a;            /* near-black tech ink */
    --mkl-muted: #626675;
    --mkl-border: #e7e7ec;
    --mkl-bg-soft: #f7f6f8;
    --mkl-bg-dark: #14151d;
    --mkl-mono: "SFMono-Regular", ui-monospace, "JetBrains Mono", "Courier New", monospace;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    color: var(--mkl-ink);
    line-height: 1.55;
}
.mkl-landing * { box-sizing: border-box; }
.mkl-landing a { text-decoration: none; }
.mkl-landing h1, .mkl-landing h2, .mkl-landing h3, .mkl-landing h4,
.mkl-landing p, .mkl-landing ul, .mkl-landing figure { margin: 0; padding: 0; }
.mkl-landing ul { list-style: none; }
.mkl-container { max-width: 1140px; margin: 0 auto; padding: 0 24px; }

/* Defensive overrides — WordPress themes often style h1–h6 and .entry-content
   with their own text-align / margin rules that can outrank our inherited
   "text-align: center" on parent sections. Setting alignment explicitly on
   every heading/paragraph here (instead of relying on inheritance) keeps the
   layout correct no matter what the active theme's typography CSS does. */
.mkl-hero h1,
.mkl-hero .mkl-hero-sub,
.mkl-hero .mkl-badge,
.mkl-section.mkl-pain, .mkl-section.mkl-how, .mkl-section.mkl-screenshots,
.mkl-section.mkl-platforms, .mkl-section.mkl-features,
.mkl-final-cta, .mkl-final-cta h2,
.mkl-contact { text-align: center !important; }
.mkl-pain h2, .mkl-how h2, .mkl-screenshots h2, .mkl-platforms h2, .mkl-features h2,
.mkl-pain .mkl-section-desc, .mkl-how .mkl-section-desc, .mkl-screenshots .mkl-section-desc,
.mkl-platforms .mkl-section-desc, .mkl-features .mkl-section-desc,
.mkl-eyebrow { text-align: center !important; margin-left: auto !important; margin-right: auto !important; }
.mkl-testimonial-card, .mkl-step-card, .mkl-platform-card, .mkl-feature-card,
.mkl-testimonial-card *, .mkl-step-card *, .mkl-platform-card *, .mkl-feature-card * { text-align: left !important; }

/* Announcement bar */
.mkl-announcement { background: var(--mkl-bg-dark); color: #fff; text-align: center; padding: 10px 16px; font-size: 14px; }
.mkl-announcement a { color: #fff; }
.mkl-announcement span { margin-left: 4px; color: var(--mkl-primary-light); }

/* Header — 3-column grid so the nav is centered on the PAGE, not just
   squeezed between the logo and the button (which have different widths
   and would otherwise pull the nav visually off-center). */
.mkl-header { border-bottom: 1px solid var(--mkl-border); position: sticky; top: 0; background: rgba(255,255,255,.9); backdrop-filter: blur(8px); z-index: 50; }
.mkl-header-inner {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    padding: 16px 24px;
    gap: 24px;
}
.mkl-logo { font-weight: 800; font-size: 20px; letter-spacing: -0.02em; justify-self: start; }
.mkl-nav { display: flex; gap: 28px; justify-self: center; }
.mkl-nav a { color: var(--mkl-ink); font-size: 15px; font-weight: 500; white-space: nowrap; }
.mkl-nav a:hover { color: var(--mkl-primary); }
.mkl-header-inner > .mkl-btn { justify-self: end; }

/* Buttons */
.mkl-btn { display: inline-block; padding: 13px 24px; border-radius: 8px; font-weight: 600; font-size: 15px; transition: all .15s ease; border: 1px solid transparent; }
.mkl-btn-small { padding: 9px 18px; font-size: 14px; }
.mkl-btn-primary { background: var(--mkl-primary); color: #fff !important; box-shadow: 0 6px 20px -6px rgba(139,21,56,.55); }
.mkl-btn-primary:hover { background: var(--mkl-primary-dark); box-shadow: 0 8px 24px -6px rgba(139,21,56,.7); }
.mkl-btn-secondary { background: #fff; color: var(--mkl-ink) !important; border-color: var(--mkl-border); }
.mkl-btn-secondary:hover { border-color: var(--mkl-ink); }
.mkl-btn-inverted { background: transparent; color: #fff !important; border-color: rgba(255,255,255,.35); }
.mkl-btn-inverted:hover { border-color: #fff; }

/* Hero — dark, tech-savvy with subtle grid pattern */
.mkl-hero {
    padding: 96px 0 72px;
    text-align: center;
    background-color: var(--mkl-bg-dark);
    background-image:
        linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px),
        radial-gradient(circle at 50% 0%, rgba(139,21,56,.55), transparent 60%);
    background-size: 42px 42px, 42px 42px, 100% 100%;
    color: #fff;
}
.mkl-badge {
    display: inline-flex; align-items: center; gap: 6px;
    background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14);
    border-radius: 999px; padding: 6px 16px; font-size: 12.5px; font-weight: 600;
    font-family: var(--mkl-mono); letter-spacing: .02em;
    color: #f0c7d3; margin-bottom: 24px;
}
.mkl-hero h1 { font-size: 48px; line-height: 1.12; letter-spacing: -0.02em; margin: 0 auto 20px; max-width: 780px; color: #fff; }
.mkl-hero-sub { font-size: 18px; color: rgba(255,255,255,.68); max-width: 620px; margin: 0 auto 32px; }
.mkl-hero-ctas { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-bottom: 28px; }
.mkl-hero .mkl-btn-secondary { background: rgba(255,255,255,.06); color: #fff !important; border-color: rgba(255,255,255,.18); }
.mkl-hero .mkl-btn-secondary:hover { border-color: #fff; }
.mkl-trust-list { list-style: none; display: flex; gap: 24px; justify-content: center; flex-wrap: wrap; padding: 0; margin: 0; font-size: 13.5px; font-family: var(--mkl-mono); color: rgba(255,255,255,.55); }

/* Section shared */
.mkl-section { padding: 80px 0; }
.mkl-eyebrow {
    display: inline-block; color: var(--mkl-primary); font-weight: 700; font-size: 12.5px;
    font-family: var(--mkl-mono); text-transform: uppercase; letter-spacing: .08em; margin-bottom: 12px;
}
.mkl-section h2 { font-size: 34px; letter-spacing: -0.02em; margin: 0 0 14px; max-width: 640px; }
.mkl-section-desc { color: var(--mkl-muted); font-size: 16px; max-width: 620px; margin-bottom: 40px; }
.mkl-pain { background: var(--mkl-bg-soft); }

/* Testimonials */
.mkl-testimonials { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.mkl-testimonial-card { background: #fff; border: 1px solid var(--mkl-border); border-radius: 14px; padding: 24px; }
.mkl-avatar { width: 36px; height: 36px; border-radius: 50%; background: var(--mkl-primary); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 13px; margin-bottom: 14px; }
.mkl-quote { font-size: 15px; margin: 0 0 14px; }
.mkl-testimonial-name { font-size: 13px; color: var(--mkl-muted); margin: 0; }

/* Steps */
.mkl-steps { display: flex; align-items: stretch; gap: 12px; }
.mkl-step-card { flex: 1; background: #fff; border: 1px solid var(--mkl-border); border-radius: 14px; padding: 28px 24px; transition: border-color .15s ease, transform .15s ease; }
.mkl-step-card:hover { border-color: var(--mkl-primary); transform: translateY(-2px); }
.mkl-step-num { font-size: 12px; font-weight: 700; font-family: var(--mkl-mono); color: var(--mkl-primary); letter-spacing: .05em; }
.mkl-step-card h3 { font-size: 19px; margin: 10px 0 8px; }
.mkl-step-card p { color: var(--mkl-muted); font-size: 14.5px; margin: 0; }
.mkl-step-arrow { display: flex; align-items: center; color: var(--mkl-border); font-size: 22px; }

/* Screenshots — "see it in action" */
.mkl-screenshots { background: var(--mkl-bg-dark); color: #fff; }
.mkl-screenshots h2 { color: #fff !important; }
.mkl-screenshots .mkl-eyebrow { color: var(--mkl-primary-light) !important; }
.mkl-screenshots .mkl-section-desc { color: rgba(255,255,255,.62); margin-left: auto; margin-right: auto; }
.mkl-screenshot-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px; align-items: stretch; }
.mkl-screenshot-card { margin: 0; display: flex; flex-direction: column; }
.mkl-screenshot-frame {
    position: relative; border-radius: 14px; overflow: hidden;
    background: #1b1c26; border: 1px solid rgba(255,255,255,.1);
    box-shadow: 0 20px 50px -20px rgba(139,21,56,.5);
    padding: 34px 10px 10px;
}
.mkl-screenshot-dots { position: absolute; top: 13px; left: 14px; display: flex; gap: 6px; }
.mkl-screenshot-dots i { width: 9px; height: 9px; border-radius: 50%; background: rgba(255,255,255,.18); display: block; }
.mkl-screenshot-frame img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: top; display: block; border-radius: 8px; }
.mkl-screenshot-card figcaption { margin-top: 16px; text-align: left !important; }
.mkl-screenshot-card figcaption strong {
    display: inline-block; font-family: var(--mkl-mono); font-size: 12.5px; font-weight: 700;
    color: #f0c7d3; background: rgba(139,21,56,.35); border: 1px solid rgba(139,21,56,.6);
    padding: 3px 10px; border-radius: 999px; margin-bottom: 8px;
}
.mkl-screenshot-card figcaption span { display: block; font-size: 14.5px; color: rgba(255,255,255,.65); }

/* Platforms */
.mkl-platform-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.mkl-platform-card { border: 1px solid var(--mkl-border); border-radius: 14px; padding: 24px; text-align: left; transition: border-color .15s ease; }
.mkl-platform-card:hover { border-color: var(--mkl-primary); }
.mkl-platform-icon { width: 40px; height: 40px; border-radius: 10px; background: var(--mkl-bg-soft); color: var(--mkl-primary); display: flex; align-items: center; justify-content: center; font-weight: 700; margin-bottom: 14px; }
.mkl-platform-card h4 { margin: 0 0 8px; font-size: 17px; }
.mkl-status { display: inline-block; font-family: var(--mkl-mono); font-size: 11.5px; font-weight: 700; padding: 3px 10px; border-radius: 999px; margin-bottom: 12px; }
.mkl-status-live { background: #e6f6ec; color: #1a7f4c; }
.mkl-status-soon { background: var(--mkl-bg-soft); color: var(--mkl-muted); }
.mkl-platform-card p { font-size: 14px; color: var(--mkl-muted); margin: 0; }

/* Features */
.mkl-features { background: var(--mkl-bg-soft); }
.mkl-feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.mkl-feature-card { background: #fff; border: 1px solid var(--mkl-border); border-radius: 14px; padding: 26px; transition: border-color .15s ease, transform .15s ease; }
.mkl-feature-card:hover { border-color: var(--mkl-primary); transform: translateY(-2px); }
.mkl-feature-num { font-family: var(--mkl-mono); font-size: 13px; color: var(--mkl-primary); font-weight: 700; }
.mkl-feature-card h4 { font-size: 17px; margin: 10px 0 8px; }
.mkl-feature-card p { font-size: 14.5px; color: var(--mkl-muted); margin: 0; }

/* Final CTA */
.mkl-final-cta {
    background: var(--mkl-ink);
    background-image: radial-gradient(circle at 50% 0%, rgba(139,21,56,.5), transparent 60%);
    color: #fff;
}
.mkl-final-cta h2 { color: #fff !important; margin: 0 auto 28px !important; max-width: 600px; }
.mkl-final-cta .mkl-hero-ctas { justify-content: center !important; }

/* Contact */
.mkl-contact { background: var(--mkl-bg-soft); }
.mkl-contact-grid {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 20px; max-width: 760px; margin: 0 auto 36px !important;
}
.mkl-contact-item { background: #fff; border: 1px solid var(--mkl-border); border-radius: 12px; padding: 18px 20px; text-align: left !important; }
.mkl-contact-label { display: block; font-family: var(--mkl-mono); font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--mkl-primary); margin-bottom: 6px; }
.mkl-contact-item a, .mkl-contact-address { color: var(--mkl-ink); font-size: 15px; font-weight: 600; word-break: break-word; }
.mkl-contact-item a:hover { color: var(--mkl-primary); }

/* Footer */
.mkl-footer { padding: 40px 0; border-top: 1px solid var(--mkl-border); }
.mkl-footer-inner { display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; gap: 16px; }
.mkl-logo-footer { margin-bottom: 6px; }
.mkl-footer p { color: var(--mkl-muted); font-size: 14px; margin: 0; }
.mkl-copyright { font-size: 13px; font-family: var(--mkl-mono); }

/* Responsive */
@media (max-width: 900px) {
    .mkl-nav { display: none; }
    .mkl-header-inner { grid-template-columns: auto auto; }
    .mkl-hero h1 { font-size: 34px; }
    .mkl-testimonials, .mkl-platform-grid, .mkl-feature-grid, .mkl-screenshot-grid { grid-template-columns: 1fr; }
    .mkl-steps { flex-direction: column; }
    .mkl-step-arrow { display: none; }
}