/* =========================================================
   marketing.css — Classic, editorial marketing pages
   Serif display headlines (Fraunces) + clean sans body,
   warm ivory ground, single restrained deep-green accent —
   deliberately away from "modern SaaS gradient" territory.
   ========================================================= */

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

:root {
    --mkt-serif: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --mkt-ink: #1c1a17;
    --mkt-ink-soft: #5c574e;
    --mkt-ivory: #faf7f2;
    --mkt-ivory-deep: #f2ede3;
    --mkt-border: #e2dccd;
    --mkt-accent: #234d3a;
    --mkt-accent-soft: #2f6349;
    --mkt-accent-tint: #eaf1ec;
}

.mkt-body {
    background: #ffffff;
    color: var(--mkt-ink);
    font-family: var(--font-main, 'Inter', system-ui, sans-serif);
    font-size: 0.875rem;
    line-height: 1.6;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}

.mkt-container {
    max-width: 1080px;
    margin: 0 auto;
    padding: 0 1.5rem;
}
/* Wider variant for content that genuinely needs the room — e.g. 5
   pricing cards side by side, where the standard 1080px reading-width
   container leaves each card too narrow and wraps feature text badly. */
.mkt-container-wide {
    max-width: 1320px;
    margin: 0 auto;
    padding: 0 1.5rem;
}

/* ── Nav ─────────────────────────────────────────── */
.mkt-nav {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 300;
    background: rgba(250, 247, 242, 0.92);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--mkt-border);
    transition: box-shadow 0.2s ease, border-color 0.2s ease;
}
/* Toggled by JS on scroll — was already wired up but had no actual style
   attached, so scrolling the page did nothing visible at all. A soft
   shadow once you're past the hero reads as "the nav lifted off the page"
   instead of just sitting flush against whatever's behind it. */
.mkt-nav.scrolled {
    border-bottom-color: transparent;
    box-shadow: 0 1px 0 var(--mkt-border), 0 8px 24px -12px rgba(0,0,0,0.18);
}

.mkt-nav-inner {
    max-width: 1080px;
    margin: 0 auto;
    padding: 0 1.5rem;
    height: 58px;
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

.mkt-logo {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-family: var(--mkt-serif);
    font-weight: 600;
    font-size: 1.1rem;
    color: var(--mkt-ink);
    text-decoration: none;
    letter-spacing: -0.01em;
}
.mkt-logo span { color: var(--mkt-ink-soft); font-weight: 400; }
.mkt-logo-icon {
    width: 28px; height: 28px;
    background: var(--mkt-accent);
    border-radius: 4px;
    display: flex; align-items: center; justify-content: center;
    color: #fff;
    font-size: 0.78rem;
    font-weight: 700;
    font-family: var(--mkt-serif);
}

.mkt-nav-links {
    display: flex;
    align-items: center;
    gap: 0.1rem;
    margin-left: auto;
}
.mkt-nav-links a {
    padding: 0.35rem 0.75rem;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--mkt-ink-soft);
    text-decoration: none;
    border-radius: 4px;
    transition: background 0.15s, color 0.15s;
}
.mkt-nav-links a:hover { background: var(--mkt-accent-tint); color: var(--mkt-accent); }
.mkt-nav-links a.active { color: var(--mkt-accent); font-weight: 600; }

.mkt-nav-actions { display: flex; align-items: center; gap: 0.4rem; }

.mkt-btn-ghost-nav {
    padding: 0.35rem 0.75rem;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--mkt-ink-soft);
    text-decoration: none;
    border-radius: 8px;
    transition: background 0.15s, color 0.15s;
}
.mkt-btn-ghost-nav:hover { background: var(--mkt-accent-tint); color: var(--mkt-accent); }

.mkt-btn-nav-primary {
    padding: 0.38rem 0.9rem;
    font-size: 0.8125rem;
    font-weight: 600;
    background: var(--mkt-accent);
    color: #fff;
    text-decoration: none;
    border-radius: 8px;
    transition: background 0.15s;
}
.mkt-btn-nav-primary:hover { background: var(--mkt-accent-soft); }

/* Mobile nav */
/* 44x44 is the standard minimum comfortable touch target — the icon
   itself stays visually small, but the clickable box around it is
   sized properly instead of just hugging the three lines with 4px
   of padding (a ~28x22 tap target, easy to miss on a real phone). */
.mkt-hamburger {
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    background: none;
    border: none;
    cursor: pointer;
    width: 44px;
    height: 44px;
    padding: 0;
    margin-left: auto;
    margin-right: -10px;
    position: relative;
    z-index: 301;
}
/* Kept as a plain, classic 3-line icon on purpose — stays exactly the
   same whether the menu is open or closed, no X-morph animation. */
.mkt-hamburger span {
    display: block; width: 20px; height: 2px; background: #444; border-radius: 2px;
}

/* Invisible click-catcher, not a dimming scrim — a classic anchored
   dropdown doesn't dim the page behind it, but this still needs something
   covering the rest of the screen so tapping anywhere outside the dropdown
   closes it, and to keep the scroll lock below working the same way. */
.mkt-mobile-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: transparent;
    z-index: 290;
}
.mkt-mobile-backdrop.open {
    display: block;
}
/* Locks background scroll while the menu is open — previously you could
   freely scroll the hero/page behind an open mobile menu, which felt
   broken since the menu itself stayed pinned at the top regardless. */
body.mkt-menu-open { overflow: hidden; }

/* A compact card anchored under the hamburger on the right — not a
   full-width sheet stretching edge to edge. `right` is matched to
   .mkt-nav-inner's own side padding (1.5rem) so it lines up with the
   hamburger above it instead of floating at an arbitrary offset. */
.mkt-mobile-menu {
    display: none;
    flex-direction: column;
    background: #ffffff;
    border: 1px solid #ddd;
    border-radius: 10px;
    padding: 0.4rem 1.1rem;
    position: absolute;
    top: calc(100% + 8px);
    right: 1.5rem;
    width: 220px;
    z-index: 300;
    box-shadow: 0 12px 28px -8px rgba(0,0,0,0.22);
}
.mkt-mobile-menu.open {
    display: flex;
    animation: mktMenuSlideIn 0.18s ease;
}
@keyframes mktMenuSlideIn {
    from { opacity: 0; transform: translateY(-10px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes mktFadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
    .mkt-mobile-menu.open, .mkt-mobile-backdrop.open { animation: none; }
    .mkt-hamburger span { transition: none; }
}
.mkt-mobile-menu a {
    padding: 0.6rem 0;
    font-size: 0.875rem;
    font-weight: 500;
    color: #333;
    text-decoration: none;
    border-bottom: 1px solid #ccc;
}
/* Keep the dark CTA button's label readable inside the mobile menu */
.mkt-mobile-menu .mkt-btn-nav-primary {
    color: #fff;
    border-bottom: none;
    text-align: center;
    justify-content: center;
}
.mkt-mobile-menu hr { border: none; border-top: 1px solid #ccc; margin: 0.4rem 0; }

/* ── Shared section spacing ─────────────────────── */
.mkt-section { padding: 40px 0; }

/* ── Eyebrow label ─────────────────────────────── */
.mkt-eyebrow {
    display: inline-block;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--mkt-ink-soft);
    margin-bottom: 0.85rem;
}

/* ── Hero ─────────────────────────────────────────── */
/* Dark, full-bleed hero — own dark palette (--mkt-ink blended with the
   app's own teal accent), not a copied color, but the same dramatic
   dark-background + white-text visual weight. No photo — a gradient
   stands in for one. */
.mkt-hero {
    position: relative;
    padding: 84px 0 56px;
    background: linear-gradient(160deg, #1c1a17 0%, #16302a 55%, #234d3a 100%);
    overflow: hidden;
    text-align: center;
}
.mkt-hero-glow { display: none; }
.mkt-hero-inner { position: relative; z-index: 1; }

.mkt-badge {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 0.72rem; font-weight: 600;
    letter-spacing: 0.04em;
    color: #fff;
    background: rgba(255,255,255,0.1);
    border: 1px solid rgba(255,255,255,0.25);
    padding: 4px 14px; border-radius: 2px;
    margin-bottom: 1.1rem;
}

.mkt-hero h1 {
    font-family: var(--mkt-serif);
    font-size: clamp(2.2rem, 5vw, 3.4rem);
    font-weight: 700;
    line-height: 1.12;
    letter-spacing: -0.02em;
    color: #fff;
    margin: 0 auto 0.85rem;
    max-width: 680px;
}
.mkt-hero h1 span {
    font-style: italic;
    color: #7fd9b6;
}

.mkt-hero p {
    font-size: 0.98rem;
    color: rgba(255,255,255,0.72);
    line-height: 1.6;
    max-width: 520px;
    margin: 0 auto 1.4rem;
}
.mkt-hero .mkt-br { display: none; }

.mkt-hero-actions { display: flex; align-items: center; justify-content: center; gap: 0.7rem; flex-wrap: wrap; }

.mkt-hero .mkt-btn-outline {
    color: #fff;
    border-color: rgba(255,255,255,0.45);
}
.mkt-hero .mkt-btn-outline:hover { border-color: #fff; color: #fff; background: rgba(255,255,255,0.08); }

.mkt-btn-primary {
    display: inline-flex;
    align-items: center;
    /* Flex layout drops whitespace-only text nodes between children (the
       source has real spaces between the two label spans and the arrow),
       so without an explicit gap the arrow sits jammed against the text. */
    gap: 0.35em;
    padding: 0.75rem 1.6rem;
    font-size: 0.92rem;
    font-weight: 600;
    background: var(--mkt-accent);
    color: #fff;
    text-decoration: none;
    border-radius: 8px;
    transition: background 0.15s;
    font-family: var(--font-main, 'Inter', system-ui, sans-serif);
}
.mkt-btn-primary:hover { background: var(--mkt-accent-soft); }
.mkt-btn-text-short { display: none; }

.mkt-btn-outline {
    display: inline-flex;
    align-items: center;
    padding: 0.75rem 1.6rem;
    font-size: 0.92rem;
    font-weight: 600;
    background: transparent;
    color: var(--mkt-ink);
    text-decoration: none;
    border-radius: 8px;
    border: 1px solid var(--mkt-ink);
    transition: border-color 0.15s, color 0.15s;
    font-family: var(--font-main, 'Inter', system-ui, sans-serif);
}
.mkt-btn-outline:hover { border-color: var(--mkt-accent); color: var(--mkt-accent); }

.mkt-hero-trust {
    margin-top: 1rem;
    display: flex;
    justify-content: center;
    gap: 1.4rem;
    flex-wrap: wrap;
}
.mkt-hero-trust span {
    font-size: 0.8rem;
    color: rgba(255,255,255,0.65);
    display: inline-flex; align-items: center; gap: 6px;
}
.mkt-hero-trust span::before { content: '—'; color: #7fd9b6; font-weight: 700; }

/* ── Value strip → dark trust-badge banner, continuous with the hero
   above it (own dark palette, checkmark-style badges) ─────────────── */
.mkt-strip {
    padding: 40px 0;
    background: linear-gradient(160deg, #234d3a 0%, #16302a 60%, #1c1a17 100%);
}
.mkt-strip-grid {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px;
    max-width: 1000px; margin: 0 auto;
}
.mkt-strip-item { text-align: center; padding: 0 8px; }
.mkt-strip-item::before {
    content: '';
    display: block;
    width: 34px; height: 34px;
    margin: 0 auto 10px;
    background-color: rgba(255,255,255,0.12);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/20px no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/20px no-repeat;
    border-radius: 50%;
}
.mkt-strip-item strong { display: block; font-family: var(--mkt-serif); font-weight: 600; font-size: 1.05rem; color: #fff; margin-bottom: 3px; }
.mkt-strip-item span { font-size: 0.8rem; color: rgba(255,255,255,0.6); }

/* ── Section heading ─────────────────────────────── */
.mkt-section-head { text-align: center; margin-bottom: 1.75rem; }
.mkt-kicker {
    display: inline-flex; align-items: center; gap: 0.4rem;
    font-size: 0.72rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.12em; color: var(--mkt-accent);
    margin-bottom: 0.7rem;
}
/* Small diagonal accent mark — this site's own signature detail,
   in the app's own accent color (not copied colors/shapes from any
   reference site). */
.mkt-kicker::before {
    content: '';
    display: inline-block;
    width: 14px; height: 10px;
    background:
        linear-gradient(var(--mkt-accent), var(--mkt-accent)) content-box,
        linear-gradient(var(--mkt-accent), var(--mkt-accent)) content-box;
    background-repeat: no-repeat;
    background-size: 2px 100%;
    background-position: 2px 0, 9px 0;
    transform: skewX(-20deg);
}
.mkt-section-head h2 {
    font-family: var(--mkt-serif);
    font-size: clamp(1.85rem, 3.4vw, 2.6rem);
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--mkt-ink);
    margin-bottom: 0.6rem;
}
.mkt-section-head p { font-size: 0.95rem; color: var(--mkt-ink-soft); max-width: 480px; margin: 0 auto; line-height: 1.6; }

/* ── Feature cards ─────────────────────────────── */
.mkt-features-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1px;
    background: var(--mkt-border);
    border: 1px solid var(--mkt-border);
}
.mkt-feature-card {
    background: #fff;
    padding: 26px 24px 28px;
    transition: background 0.16s;
}
.mkt-feature-card:hover { background: var(--mkt-ivory); }
.mkt-feature-icon {
    width: 40px; height: 40px; border-radius: 4px;
    display: flex; align-items: center; justify-content: center;
    margin-bottom: 16px;
    background: var(--mkt-accent-tint);
    color: var(--mkt-accent);
}
.mkt-feature-icon svg { width: 20px; height: 20px; }
.mkt-feature-icon.f-indigo,
.mkt-feature-icon.f-emerald,
.mkt-feature-icon.f-violet,
.mkt-feature-icon.f-amber,
.mkt-feature-icon.f-rose,
.mkt-feature-icon.f-sky { background: var(--mkt-accent-tint); color: var(--mkt-accent); }
.mkt-feature-card h3 { font-family: var(--mkt-serif); font-size: 1.05rem; font-weight: 600; color: var(--mkt-ink); margin-bottom: 0.5rem; }
.mkt-feature-card p  { font-size: 0.875rem; color: var(--mkt-ink-soft); line-height: 1.6; }

/* ── Built for Kenya ─────────────────────────────── */
/* Dark section — same gradient family as the hero, for the alternating
   light/dark rhythm down the page. */
.mkt-kenya {
    position: relative;
    padding: 64px 0;
    background: linear-gradient(160deg, #1c1a17 0%, #16302a 55%, #234d3a 100%);
}
.mkt-kenya::before {
    content: '';
    position: absolute;
    left: 0; right: 0; top: -1px;
    height: 32px;
    background: #16302a;
    clip-path: polygon(0 100%, 100% 0, 100% 100%);
}
.mkt-kenya-grid { position: relative; z-index: 1; display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 48px; align-items: center; }
.mkt-kenya-text h2 {
    font-family: var(--mkt-serif); font-size: clamp(1.6rem, 3vw, 2.1rem);
    font-weight: 700; letter-spacing: -0.02em; color: #fff; margin: 0.3rem 0 0.7rem;
}
.mkt-kenya-text p { font-size: 0.95rem; color: rgba(255,255,255,0.65); line-height: 1.65; }
.mkt-kenya .mkt-kicker { color: #7fd9b6; }
.mkt-kenya .mkt-kicker::before {
    background:
        linear-gradient(#7fd9b6, #7fd9b6) content-box,
        linear-gradient(#7fd9b6, #7fd9b6) content-box;
}
.mkt-checklist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.mkt-checklist li {
    position: relative; padding-left: 34px;
    font-size: 0.9rem; color: rgba(255,255,255,0.65); line-height: 1.5;
}
.mkt-checklist li span { display: block; font-weight: 700; color: #fff; margin-bottom: 1px; }
.mkt-checklist li::before {
    content: ''; position: absolute; left: 0; top: 7px;
    width: 18px; height: 1px;
    background: #7fd9b6;
}

/* ── Testimonials ─────────────────────────────────── */
.mkt-testimonials {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
}
.mkt-testimonial {
    background: #fff;
    border: 1px solid #d4d4d4;
    border-radius: 10px;
    padding: 1.25rem;
}
.mkt-testimonial-quote {
    font-size: 0.8125rem;
    color: #444;
    line-height: 1.65;
    margin-bottom: 1rem;
}
.mkt-testimonial-quote::before { content: '\201C'; }
.mkt-testimonial-quote::after  { content: '\201D'; }
.mkt-testimonial-author { font-size: 0.75rem; font-weight: 700; color: #0a0a0a; }
.mkt-testimonial-author span { display: block; font-weight: 400; color: #888; margin-top: 1px; }

/* ── CTA band ─────────────────────────────────────── */
.mkt-cta-band {
    padding: 44px 0;
    background: var(--mkt-ink);
}
.mkt-cta-band h2 {
    font-family: var(--mkt-serif);
    font-size: clamp(1.5rem, 3vw, 2rem);
    font-weight: 600;
    color: #fff;
    margin-bottom: 0.5rem;
    letter-spacing: -0.01em;
}
.mkt-cta-band p { font-size: 0.9rem; color: rgba(255,255,255,0.55); margin-bottom: 1.75rem; }
.mkt-cta-actions { display: flex; gap: 0.6rem; flex-wrap: wrap; }

.mkt-btn-primary-xl {
    display: inline-flex; align-items: center;
    padding: 0.7rem 1.6rem;
    font-size: 0.9rem; font-weight: 600;
    background: #fff; color: var(--mkt-ink);
    text-decoration: none; border-radius: 8px;
    transition: background 0.15s;
    font-family: var(--font-main, 'Inter', system-ui, sans-serif);
}
.mkt-btn-primary-xl:hover { background: var(--mkt-ivory-deep); }

.mkt-btn-outline-xl {
    display: inline-flex; align-items: center;
    padding: 0.7rem 1.6rem;
    font-size: 0.9rem; font-weight: 600;
    color: rgba(255,255,255,0.65);
    text-decoration: none; border-radius: 8px;
    border: 1px solid rgba(255,255,255,0.25);
    transition: border-color 0.15s, color 0.15s;
    font-family: var(--font-main, 'Inter', system-ui, sans-serif);
}
.mkt-btn-outline-xl:hover { border-color: rgba(255,255,255,0.7); color: #fff; }

/* ── Pricing ─────────────────────────────────────── */
.mkt-plans-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 1rem;
    align-items: stretch;
}
.mkt-plan {
    background: #fff;
    border: 1px solid var(--mkt-border);
    border-radius: 4px;
    padding: 0 1.5rem 1.5rem;
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.mkt-plan-cta { margin-top: auto; }
.mkt-plan.featured {
    background: var(--mkt-ink);
    border-color: var(--mkt-ink);
    color: #fff;
}
.mkt-plan-badge {
    display: inline-block;
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    background: var(--mkt-accent);
    color: #fff;
    padding: 0.18rem 0.6rem;
    border-radius: 2px;
    margin: 1.1rem 0 0.85rem;
}
/* Diagonal-cut header strip — plan name sits in a full-bleed angled
   band across the top of the card, own signature detail (own color,
   own construction, not a copied asset). */
.mkt-plan-name {
    position: relative;
    margin: 0 -1.5rem 1.35rem;
    padding: 0.9rem 1.5rem 1.5rem;
    background: linear-gradient(135deg, var(--mkt-accent) 0%, var(--mkt-accent-soft) 100%);
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 72%);
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.09em;
    color: #fff;
    display: flex;
    align-items: center;
    gap: 0.45rem;
}
.mkt-plan-name::before {
    content: '';
    display: inline-block;
    width: 11px; height: 9px;
    background: linear-gradient(#fff,#fff) content-box, linear-gradient(#fff,#fff) content-box;
    background-repeat: no-repeat;
    background-size: 2px 100%;
    background-position: 1px 0, 7px 0;
    transform: skewX(-20deg);
    flex-shrink: 0;
}
.mkt-plan.featured .mkt-plan-name {
    background: linear-gradient(135deg, rgba(255,255,255,0.16) 0%, rgba(255,255,255,0.05) 100%);
    color: rgba(255,255,255,0.85);
}
.mkt-plan.featured .mkt-plan-name::before {
    background: linear-gradient(rgba(255,255,255,0.85),rgba(255,255,255,0.85)) content-box, linear-gradient(rgba(255,255,255,0.85),rgba(255,255,255,0.85)) content-box;
    background-repeat: no-repeat;
    background-size: 2px 100%;
    background-position: 1px 0, 7px 0;
}
.mkt-plan-price { display: flex; align-items: baseline; gap: 0.1rem; }
.mkt-plan-currency { font-size: 0.8rem; font-weight: 600; color: var(--mkt-ink-soft); margin-top: 4px; }
.mkt-plan.featured .mkt-plan-currency { color: rgba(255,255,255,0.5); }
.mkt-plan-amount {
    font-family: var(--mkt-serif);
    font-size: 2.1rem;
    font-weight: 600;
    color: var(--mkt-ink);
    letter-spacing: -0.02em;
    line-height: 1;
}
.mkt-plan.featured .mkt-plan-amount { color: #fff; }
.mkt-plan-period { font-size: 0.72rem; color: var(--mkt-ink-soft); margin: 0.25rem 0 0.6rem; }
.mkt-plan.featured .mkt-plan-period { color: rgba(255,255,255,0.4); }
.mkt-plan-desc { font-size: 0.8rem; color: var(--mkt-ink-soft); line-height: 1.5; margin-bottom: 1rem; }
.mkt-plan.featured .mkt-plan-desc { color: rgba(255,255,255,0.5); }
.mkt-plan-divider { border: none; border-top: 1px solid var(--mkt-border); margin: 1rem 0; }
.mkt-plan.featured .mkt-plan-divider { border-color: rgba(255,255,255,0.1); }
.mkt-plan-features {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    margin-bottom: 1.4rem;
}
.mkt-plan-features li { font-size: 0.8rem; color: var(--mkt-ink-soft); line-height: 1.45; display: flex; align-items: flex-start; gap: 0.5rem; }
.mkt-plan.featured .mkt-plan-features li { color: rgba(255,255,255,0.65); }
.mkt-plan-features .ck { color: var(--mkt-accent); font-size: 0.75rem; flex-shrink: 0; margin-top: 0.2rem; }
.mkt-plan-features .x  { color: #c9c2b3; font-size: 0.75rem; flex-shrink: 0; margin-top: 0.2rem; }
.mkt-plan.featured .mkt-plan-features .x { color: rgba(255,255,255,0.15); }
.mkt-plan-cta {
    display: block; text-align: center;
    padding: 0.6rem;
    font-size: 0.8125rem; font-weight: 600;
    border-radius: 3px; text-decoration: none;
    transition: background 0.15s, border-color 0.15s;
    font-family: var(--font-main, 'Inter', system-ui, sans-serif);
}
.mkt-plan.featured .mkt-plan-cta { background: #fff; color: var(--mkt-ink); }
.mkt-plan.featured .mkt-plan-cta:hover { background: var(--mkt-ivory-deep); }
.mkt-plan:not(.featured) .mkt-plan-cta {
    background: transparent;
    border: 1px solid var(--mkt-border);
    color: var(--mkt-ink);
}
.mkt-plan:not(.featured) .mkt-plan-cta:hover { border-color: var(--mkt-accent); color: var(--mkt-accent); }

/* ── Comparison table ─────────────────────────────── */
.mkt-compare {
    border: 1px solid var(--mkt-border);
    border-radius: 4px;
    overflow-x: auto;
    overflow-y: hidden;
    background: #fff;
}
.mkt-compare-header,
.mkt-compare-row {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr 1fr 1fr;
    min-width: 720px;
    border-bottom: 1px solid var(--mkt-border);
}
.mkt-compare-header { background: var(--mkt-ivory); }
.mkt-compare-col-head {
    padding: 0.6rem 1rem;
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--mkt-ink-soft);
}
.mkt-compare-col-head.featured { color: var(--mkt-accent); }
.mkt-compare-row > div {
    padding: 0.5rem 1rem;
    font-size: 0.8rem;
    color: var(--mkt-ink-soft);
    display: flex;
    align-items: center;
    border-right: 1px solid var(--mkt-border);
}
.mkt-compare-row > div:last-child { border-right: none; }
.mkt-compare-row > div.featured { background: var(--mkt-accent-tint); }
.mkt-compare-row .feature-name { font-weight: 500; color: var(--mkt-ink); }
.mkt-compare-section-head {
    grid-column: 1 / -1;
    padding: 0.4rem 1rem;
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.09em;
    color: var(--mkt-ink-soft);
    background: var(--mkt-ivory);
    border-right: none !important;
}
.mkt-compare-row:last-child { border-bottom: none; }
.ck { color: var(--mkt-accent); }
.x  { color: #c9c2b3; }

/* ── FAQ ─────────────────────────────────────────── */
.mkt-faq { max-width: 640px; margin: 0 auto; }
.mkt-faq-item { border-bottom: 1px solid var(--mkt-border); }
.mkt-faq-q {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.9rem 0;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--mkt-ink);
    background: none;
    border: none;
    cursor: pointer;
    text-align: left;
    gap: 1rem;
    font-family: var(--font-main, 'Inter', system-ui, sans-serif);
}
.mkt-faq-chevron { font-size: 1rem; color: var(--mkt-ink-soft); flex-shrink: 0; transition: transform 0.2s; }
.mkt-faq-item.open .mkt-faq-chevron { transform: rotate(180deg); }
.mkt-faq-a {
    display: none;
    padding: 0 0 0.9rem;
    font-size: 0.8125rem;
    color: var(--mkt-ink-soft);
    line-height: 1.65;
}
.mkt-faq-item.open .mkt-faq-a { display: block; }

/* ── Contact ─────────────────────────────────────── */
.mkt-contact-grid {
    display: grid;
    grid-template-columns: 1fr 1.5fr;
    gap: 2.5rem;
    align-items: start;
}
.mkt-contact-info-item {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    margin-bottom: 1.1rem;
}
.mkt-contact-icon-wrap {
    width: 34px; height: 34px;
    background: var(--mkt-accent-tint);
    border: 1px solid var(--mkt-border);
    border-radius: 4px;
    display: flex; align-items: center; justify-content: center;
    color: var(--mkt-accent);
    flex-shrink: 0;
}
.mkt-contact-icon-wrap svg { width: 17px; height: 17px; }
.mkt-contact-info-item strong {
    display: block;
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--mkt-ink-soft);
    margin-bottom: 0.1rem;
}
.mkt-contact-info-item a,
.mkt-contact-info-item span { font-size: 0.8125rem; color: var(--mkt-ink); text-decoration: none; }
.mkt-contact-info-item a:hover { color: var(--mkt-accent); }

/* Shared "aside card" treatment for the response-time / already-a-customer
   boxes — was a flat #c8c8c8 box with an Outfit-font number, left over
   from the pre-redesign palette and visibly inconsistent with everything
   else on the page. */
.mkt-contact-aside-card {
    background: var(--mkt-ivory);
    border: 1px solid var(--mkt-border);
    border-radius: 4px;
    padding: 1.25rem 1.5rem;
}
.mkt-contact-aside-label {
    font-size: 0.72rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.08em; color: var(--mkt-accent); margin-bottom: 0.6rem;
}
.mkt-contact-aside-card p { font-size: 0.83rem; color: var(--mkt-ink-soft); line-height: 1.65; margin-bottom: 1rem; }
.mkt-response-times { display: flex; gap: 1.75rem; flex-wrap: wrap; }
.mkt-response-time strong {
    display: block; font-family: var(--mkt-serif); font-size: 1.5rem;
    font-weight: 600; color: var(--mkt-ink); line-height: 1;
}
.mkt-response-time span { font-size: 0.72rem; color: var(--mkt-ink-soft); }

.mkt-contact-form {
    background: #fff;
    border: 1px solid var(--mkt-border);
    border-radius: 4px;
    padding: 1.75rem;
}
.mkt-contact-form h3 { font-family: var(--mkt-serif); font-size: 1.15rem; font-weight: 600; color: var(--mkt-ink); margin-bottom: 0.3rem; }
.mkt-contact-form > p { font-size: 0.8rem; color: var(--mkt-ink-soft); margin-bottom: 1.25rem; }

.mkt-form-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; }
.mkt-form-group { margin-bottom: 0.75rem; }
.mkt-form-group label {
    display: block;
    font-size: 0.6875rem;
    font-weight: 600;
    color: var(--mkt-ink-soft);
    margin-bottom: 0.25rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.mkt-form-group input,
.mkt-form-group select,
.mkt-form-group textarea {
    width: 100%;
    padding: 0.5rem 0.7rem;
    font-size: 0.8125rem;
    background: var(--mkt-ivory);
    border: 1px solid var(--mkt-border);
    border-radius: 3px;
    color: var(--mkt-ink);
    font-family: var(--font-main, 'Inter', system-ui, sans-serif);
    transition: border-color 0.15s, background 0.15s;
    outline: none;
}
.mkt-form-group input:focus,
.mkt-form-group select:focus,
.mkt-form-group textarea:focus { border-color: var(--mkt-accent); background: #fff; }
.mkt-form-group textarea { min-height: 100px; resize: vertical; }

.mkt-form-submit {
    width: 100%;
    padding: 0.65rem;
    font-size: 0.875rem;
    font-weight: 700;
    background: var(--mkt-accent);
    color: #fff;
    border: none;
    border-radius: 3px;
    cursor: pointer;
    transition: background 0.15s;
    font-family: var(--font-main, 'Inter', system-ui, sans-serif);
    margin-top: 0.25rem;
}
.mkt-form-submit:hover { background: var(--mkt-accent-soft); }

.mkt-alert {
    padding: 0.65rem 0.9rem;
    border-radius: 3px;
    font-size: 0.8rem;
    margin-bottom: 0.85rem;
}
.mkt-alert-success { background: var(--mkt-accent-tint); color: var(--mkt-accent); border: 1px solid #bcd6c5; }
.mkt-alert-error   { background: #f7ece9; color: #8a3b30; border: 1px solid #e3c4bb; }

/* ── Footer ─────────────────────────────────────── */
.mkt-footer {
    background: var(--mkt-ink);
    border-top: 3px solid var(--mkt-accent);
    padding: 56px 0 0;
    font-size: 0.8rem;
}
.mkt-footer .mkt-container { max-width: 980px; }
.mkt-footer-grid {
    display: grid;
    grid-template-columns: 1.6fr 1fr 1fr 1fr;
    gap: 2.5rem;
    padding-bottom: 2.25rem;
    border-bottom: 1px solid rgba(255,255,255,0.08);
}
.mkt-footer-brand p {
    margin-top: 0.85rem;
    line-height: 1.65;
    color: rgba(255,255,255,0.45);
    max-width: 260px;
    font-size: 0.8rem;
}
.mkt-footer h4 {
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.09em;
    color: rgba(255,255,255,0.9);
    margin-bottom: 0.9rem;
}
.mkt-footer a {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: rgba(255,255,255,0.5);
    text-decoration: none;
    margin-bottom: 0.6rem;
    font-size: 0.8rem;
    transition: color 0.15s;
    width: fit-content;
}
.mkt-footer a:hover, .mkt-footer a:focus-visible { color: #fff; }
.mkt-footer a svg { flex-shrink: 0; width: 14px; height: 14px; opacity: 0.7; }
.mkt-footer .mkt-logo { color: #fff; }
.mkt-footer .mkt-logo span { color: rgba(255,255,255,0.45); }
.mkt-footer .mkt-logo-icon { background: var(--mkt-accent); color: #fff; }
.mkt-footer-support-hours {
    font-size: 0.75rem;
    color: rgba(255,255,255,0.35);
    margin-top: 0.5rem;
}
.mkt-footer-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.1rem 0;
    font-size: 0.75rem;
    color: rgba(255,255,255,0.3);
    flex-wrap: wrap;
    gap: 0.5rem;
}

/* ── Page-level hero for inner pages ─────────────── */
/* Dark page-hero banner — same gradient family, used consistently across
   every marketing sub-page (pricing, contact, privacy, terms, disclaimer). */
.mkt-page-hero {
    position: relative;
    padding: 76px 0 40px;
    background: linear-gradient(160deg, #1c1a17 0%, #16302a 55%, #234d3a 100%);
    overflow: hidden;
}
.mkt-page-hero::after {
    content: '';
    position: absolute;
    left: 0; right: 0; bottom: -1px;
    height: 28px;
    background: #fff;
    clip-path: polygon(0 100%, 100% 100%, 100% 0);
}
.mkt-page-hero .mkt-eyebrow { color: #7fd9b6; }
.mkt-page-hero h1 {
    font-family: var(--mkt-serif);
    font-size: clamp(1.9rem, 4.2vw, 2.6rem);
    font-weight: 700;
    letter-spacing: -0.02em;
    color: #fff;
    margin-bottom: 0.5rem;
}
.mkt-page-hero p { font-size: 0.9rem; color: rgba(255,255,255,0.7); max-width: 480px; }

/* ── Shared section heading (used outside .mkt-section-head) ── */
.mkt-h2 {
    font-family: var(--mkt-serif);
    font-size: clamp(1.4rem, 3vw, 1.9rem);
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--mkt-ink);
}

/* ── CTA band button-size modifier + inner wrapper ── */
.mkt-cta-band-inner { text-align: center; }
.mkt-btn-xl { padding: 0.8rem 1.9rem; font-size: 0.95rem; }

/* ── Legal pages ─────────────────────────────────── */
.mkt-legal {
    max-width: 720px;
    margin: 0 auto;
    padding: 0 1.5rem 56px;
}
.mkt-legal h2 {
    font-family: var(--mkt-serif);
    font-size: 1.3rem;
    font-weight: 600;
    color: var(--mkt-ink);
    margin: 1.75rem 0 0.5rem;
}
.mkt-legal h3 {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--mkt-ink);
    margin: 1.1rem 0 0.3rem;
}
.mkt-legal p {
    font-size: 0.875rem;
    color: var(--mkt-ink-soft);
    line-height: 1.75;
    margin-bottom: 0.75rem;
}
.mkt-legal ul {
    margin: 0.5rem 0 0.75rem 1.25rem;
    font-size: 0.875rem;
    color: var(--mkt-ink-soft);
    line-height: 1.75;
}
.mkt-legal ul li { margin-bottom: 0.25rem; }
.mkt-legal a { color: var(--mkt-accent); text-decoration: underline; }
.mkt-legal-updated {
    font-size: 0.75rem;
    color: var(--mkt-ink-soft);
    margin-bottom: 1.5rem;
    padding-bottom: 1.25rem;
    border-bottom: 1px solid var(--mkt-border);
}

/* ── Responsive ─────────────────────────────────── */
/* Between the single-column phone/tablet layout and the point where the
   wide container comfortably fits 5 columns, 5-up gets too cramped
   (columns as narrow as ~140px, most feature bullets wrapping badly).
   Give this middle zone 2 columns instead. */
@media (min-width: 901px) and (max-width: 1240px) {
    .mkt-plans-grid { grid-template-columns: 1fr 1fr; max-width: 640px; margin: 0 auto; }
}

@media (max-width: 900px) {
    .mkt-nav-links, .mkt-nav-actions { display: none; }
    .mkt-hamburger { display: flex; }
    .mkt-features-grid { grid-template-columns: 1fr 1fr; }
    .mkt-strip-grid { grid-template-columns: 1fr 1fr; row-gap: 24px; }
    .mkt-testimonials { grid-template-columns: 1fr; }
    .mkt-plans-grid { grid-template-columns: 1fr; max-width: 400px; margin: 0 auto; }
    .mkt-contact-grid { grid-template-columns: 1fr; }
    .mkt-footer { padding-top: 44px; }
    .mkt-footer-grid { grid-template-columns: 1fr 1fr; gap: 2rem 1.5rem; }
    .mkt-footer-brand { grid-column: 1 / -1; margin-bottom: 0.5rem; }
    .mkt-footer-brand p { max-width: 420px; }
}

@media (max-width: 560px) {
    .mkt-features-grid { grid-template-columns: 1fr; border-radius: 0; }
    .mkt-strip-grid { grid-template-columns: 1fr; row-gap: 22px; }
    .mkt-form-grid-2 { grid-template-columns: 1fr; }
    .mkt-cta-actions { flex-direction: column; align-items: flex-start; }
    .mkt-hero-actions { flex-direction: column; align-items: flex-start; }
    /* align-items:flex-start already keeps these sized to their own
       content rather than stretched full-width — explicit here too so
       that stays true regardless of what else changes in this file later,
       rather than relying only on the parent's flex behaviour. */
    .mkt-hero-actions > a, .mkt-cta-actions > a { width: fit-content; }
    /* The primary hero button's full copy ("Start free — no card needed")
       is fine on desktop but is long enough at mobile's narrower width to
       visually read as a stretched full-width block even though it's
       genuinely sized to its own content — swapping to a short label
       below 560px keeps the pill shape compact and intentional-looking. */
    .mkt-btn-text-full { display: none; }
    .mkt-btn-text-short { display: inline; }
    .mkt-compare-header, .mkt-compare-row { font-size: 0.72rem; }
    .mkt-compare-row > div { padding: 0.4rem 0.5rem; }
    .mkt-footer { padding-top: 40px; }
    .mkt-footer-grid { grid-template-columns: 1fr; gap: 1.75rem; text-align: center; }
    .mkt-footer-brand { grid-column: auto; }
    .mkt-footer-brand .mkt-logo { justify-content: center; }
    .mkt-footer-brand p { margin-left: auto; margin-right: auto; }
    .mkt-footer a { justify-content: center; margin-left: auto; margin-right: auto; }
    .mkt-footer-bottom { justify-content: center; text-align: center; }
}

/* ── Sticky contact bubbles ──────────────────────── */
.mkt-float-contact {
    position: fixed;
    left: 18px;
    bottom: 18px;
    z-index: 60;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.mkt-float-btn {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    box-shadow: 0 4px 14px rgba(0,0,0,0.25);
    transition: transform 0.15s;
}
.mkt-float-btn:hover { transform: scale(1.07); }
.mkt-float-btn--whatsapp { background: #25D366; }
.mkt-float-btn--call { background: var(--mkt-accent); }