/*
mani-seo-landing-ltr.css
Programmatic-SEO landing template (~2,826 URLs, 8 page_type variants, both languages).

Rules this file obeys:
  · Colour/radius come ONLY from mani-colors-ltr.css tokens — no raw hex, no raw rgba(), no raw-px radius.
  · ONE card standard: background var(--snow); border 2px solid var(--mist); border-radius var(--r-xl).
  · Buttons are .mni-btn — this file never restyles them, it only sizes their containers.
  · The CTA is the shared universal component whose styles live ONLY in mani-colors-ltr.css.
    This file must never redeclare them: grep for "mcta" here must return nothing.
  · Logical properties everywhere (inline-start/end, margin-inline, padding-inline) so RTL needs no patch.
  · Alpha surfaces use color-mix() over a token, always preceded by a solid-token fallback declaration.
*/

/* ── Base ─────────────────────────────────────────────────────────────────── */
.frag-seo-landing {
    --sans: 'Plus Jakarta Sans', system-ui, sans-serif;
    font-family: var(--sans);
    color: var(--ink2);
    line-height: 1.6;
}

.frag-seo-landing .sl-mx {
    max-width: 1180px;
    margin-inline: auto;
    padding-inline: 24px;
}

.frag-seo-landing .sl-sec-head {
    text-align: center;
    margin-block-end: 48px;
}

.frag-seo-landing .sl-eyebrow {
    display: inline-block;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--blue);
    margin-block-end: 10px;
}

.frag-seo-landing .sl-sec-h2 {
    font-size: 35px;
    font-weight: 700;
    color: var(--ink);
    letter-spacing: -.7px;
    margin-block-end: 12px;
}

.frag-seo-landing .sl-sec-sub {
    font-size: 16px;
    font-weight: 400;
    color: var(--slate);
    max-width: 620px;
    margin-inline: auto;
}

/* ── Hero ─────────────────────────────────────────────────────────────────── */
.frag-seo-landing .sl-hero {
    padding-block: 80px 72px;
    background: var(--white);
    border-block-end: 1px solid var(--mist);
    text-align: center;
    position: relative;
    overflow: hidden;
}

.frag-seo-landing .sl-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--blue-l);
    border: 1px solid var(--blue-xl);
    border-radius: var(--r-round);
    padding-block: 6px;
    padding-inline: 18px;
    font-size: 13px;
    font-weight: 700;
    color: var(--blue);
    margin-block-end: 28px;
    position: relative;
    z-index: 2;
}

.frag-seo-landing .sl-pill-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--blue);
    animation: mni-pulse 2s ease infinite;
}

.frag-seo-landing .sl-hero-h1 {
    font-size: 40px;
    font-weight: 800;
    color: var(--ink);
    line-height: 1.08;
    letter-spacing: -2px;
    margin-block-end: 22px;
    position: relative;
    z-index: 2;
}

.frag-seo-landing .sl-hero-h1 em {
    color: var(--blue);
    font-style: normal;
}

.frag-seo-landing .sl-hero-sub {
    font-size: 16px;
    font-weight: 400;
    color: var(--slate);
    max-width: 600px;
    margin-block: 0 36px;
    margin-inline: auto;
    line-height: 1.75;
    position: relative;
    z-index: 2;
}

.frag-seo-landing .sl-hero-unique {
    font-size: 15px;
    font-weight: 400;
    color: var(--slate);
    max-width: 680px;
    margin-block: -18px 32px;
    margin-inline: auto;
    line-height: 1.8;
    position: relative;
    z-index: 2;
}

.frag-seo-landing .sl-hero-trust {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px 32px;
    margin-block-end: 40px;
    position: relative;
    z-index: 2;
}

.frag-seo-landing .sl-trust-item {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 13px;
    font-weight: 700;
    color: var(--ink2);
}

.frag-seo-landing .sl-trust-item i {
    color: var(--green);
}

.frag-seo-landing .sl-hero-actions {
    display: flex;
    justify-content: center;
    gap: 14px;
    flex-wrap: wrap;
    width: 100%;
}

/* ── Local proof bar ──────────────────────────────────────────────────────── */
.frag-seo-landing .sl-local-proof {
    padding-block: 20px;
    background: var(--white);
    border-block-end: 1px solid var(--mist);
}

.frag-seo-landing .sl-proof-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
    justify-content: center;
    align-items: center;
}

.frag-seo-landing .sl-proof-item {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    font-weight: 400;
    color: var(--ink);
    background: var(--snow);
    border: 2px solid var(--mist);
    border-radius: var(--r-xl);
    padding-block: 10px;
    padding-inline: 20px;
    transition: border-color .2s ease, transform .2s ease;
}

.frag-seo-landing .sl-proof-item:hover {
    border-color: var(--blue);
    transform: translateY(-1px);
}

.frag-seo-landing .sl-proof-item i {
    color: var(--blue);
    font-size: 16px;
    flex-shrink: 0;
}

/* ── Type lead — shared scaffolding ───────────────────────────────────────── */
/* The first content block under the hero. Exactly one variant renders per page_type.
   Each variant carries `.sl-lead` plus a stable per-type hook class, so a page's type
   is identifiable from the DOM alone:
     vs_comparison    .sl-lead.sl-comparison   <table class="sl-cmp-table">
     tax_integration  .sl-lead.sl-flow-sec     <ol class="sl-flow">
     industry         .sl-lead.sl-pain-sec     <article class="sl-pain">
     module           .sl-lead.sl-scope-sec    <ul class="sl-scope">
     competitor       .sl-lead.sl-local-sec    <ul class="sl-local">
     regional         .sl-lead.sl-stack-sec    <ul class="sl-stack">
     erpnext_regional .sl-lead.sl-keep-sec     <ul class="sl-keep">
     partner          .sl-lead.sl-partner-sec  <ul class="sl-partner">   */
.frag-seo-landing .sl-lead {
    padding-block: var(--sec-y);
    background: var(--white);
    border-block-end: 1px solid var(--mist);
}

.frag-seo-landing .sl-lead .sl-sec-head {
    margin-block-end: 36px;
}

/* Shared list reset for every lead list (ul/ol) */
.frag-seo-landing .sl-flow,
.frag-seo-landing .sl-scope,
.frag-seo-landing .sl-local,
.frag-seo-landing .sl-stack,
.frag-seo-landing .sl-keep,
.frag-seo-landing .sl-partner {
    list-style: none;
    margin-block: 0;
    margin-inline: auto;
    padding: 0;
}

.frag-seo-landing .sl-flow-step,
.frag-seo-landing .sl-scope-item,
.frag-seo-landing .sl-local-item,
.frag-seo-landing .sl-stack-item,
.frag-seo-landing .sl-keep-item,
.frag-seo-landing .sl-partner-item {
    display: flex;
    align-items: center;
    gap: 14px;
    background: var(--snow);
    border: 2px solid var(--mist);
    border-radius: var(--r-xl);
    padding-block: 16px;
    padding-inline: 20px;
    font-size: 15px;
    font-weight: 400;
    color: var(--ink2);
    transition: border-color .2s ease;
}

.frag-seo-landing .sl-flow-step:hover,
.frag-seo-landing .sl-scope-item:hover,
.frag-seo-landing .sl-local-item:hover,
.frag-seo-landing .sl-stack-item:hover,
.frag-seo-landing .sl-keep-item:hover,
.frag-seo-landing .sl-partner-item:hover {
    border-color: var(--blue);
}

.frag-seo-landing .sl-scope-item > i,
.frag-seo-landing .sl-local-item > i,
.frag-seo-landing .sl-stack-item > i,
.frag-seo-landing .sl-partner-item > i {
    color: var(--blue);
    font-size: 18px;
    flex-shrink: 0;
    width: 22px;
    text-align: center;
}

.frag-seo-landing .sl-scope-note,
.frag-seo-landing .sl-stack-note,
.frag-seo-landing .sl-flow-note {
    text-align: center;
    margin-block-start: 20px;
    font-size: 15px;
    font-weight: 700;
    color: var(--ink2);
}

.frag-seo-landing .sl-flow-note i {
    color: var(--green);
    margin-inline-end: 8px;
}

/* tax_integration — the compliance flow (ordered, numbered) */
.frag-seo-landing .sl-flow {
    display: grid;
    gap: 14px;
    max-width: 760px;
    counter-reset: sl-flow;
}

.frag-seo-landing .sl-flow-step {
    align-items: flex-start;
    padding-block: 20px;
}

.frag-seo-landing .sl-flow-num {
    flex-shrink: 0;
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--blue-l);
    border: 1px solid var(--blue-xl);
    color: var(--blue-d);
    font-weight: 800;
    font-size: 15px;
    line-height: 1;
}

.frag-seo-landing .sl-flow-txt {
    padding-block-start: 6px;
}

/* industry — the sector pain point */
.frag-seo-landing .sl-pain {
    max-width: 820px;
    margin-inline: auto;
    background: var(--snow);
    border: 2px solid var(--mist);
    border-radius: var(--r-xl);
    padding-block: 32px;
    padding-inline: 32px;
}

.frag-seo-landing .sl-pain-p {
    margin: 0;
    font-size: 17px;
    font-weight: 400;
    line-height: 1.85;
    color: var(--ink2);
}

/* module — module scope on one dataset */
.frag-seo-landing .sl-scope {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 14px;
    max-width: 1100px;
}

/* competitor — what you get locally instead */
.frag-seo-landing .sl-local {
    display: grid;
    gap: 14px;
    max-width: 820px;
}

/* regional — the stack that replaces scattered subscriptions */
.frag-seo-landing .sl-stack {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 14px;
    max-width: 980px;
}

.frag-seo-landing .sl-stack-item {
    justify-content: center;
    font-weight: 700;
}

/* erpnext_regional — what you keep vs what you drop */
.frag-seo-landing .sl-keep {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 14px;
    max-width: 980px;
}

.frag-seo-landing .sl-keep-item > i {
    flex-shrink: 0;
    width: 22px;
    text-align: center;
    font-size: 18px;
}

.frag-seo-landing .sl-keep-item--yes > i {
    color: var(--green);
}

.frag-seo-landing .sl-keep-item--no > i {
    color: var(--silver);
}

/* partner — managed platform vs an implementation project */
.frag-seo-landing .sl-partner {
    display: grid;
    gap: 14px;
    max-width: 860px;
}

/* ── Feature cards (ours / theirs) ────────────────────────────────────────── */
.frag-seo-landing .sl-features-section {
    padding-block: var(--sec-y);
    background: var(--snow);
    border-block-end: 1px solid var(--mist);
}

.frag-seo-landing .sl-apps-section {
    background: var(--white);
}

.frag-seo-landing .sl-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 22px;
    max-width: 1100px;
    margin-inline: auto;
}

.frag-seo-landing .sl-card {
    background: var(--snow);
    border: 2px solid var(--mist);
    border-radius: var(--r-xl);
    padding-block: 32px;
    padding-inline: 24px;
    transition: border-color .25s, box-shadow .25s;
}

.frag-seo-landing .sl-card:hover {
    border-color: var(--blue);
    box-shadow: 0 8px 32px rgba(var(--blue-rgb), .1);
}

.frag-seo-landing .sl-card-ours {
    color: var(--blue);
    font-weight: 800;
    margin-block-end: 12px;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 15px;
}

.frag-seo-landing .sl-card-ours i {
    color: var(--green);
}

.frag-seo-landing .sl-card-theirs {
    color: var(--silver);
    font-size: 14px;
    border-block-start: 1px dashed var(--mist);
    padding-block-start: 12px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.frag-seo-landing .sl-card-theirs i {
    color: var(--red);
}

/* ── FAQ ──────────────────────────────────────────────────────────────────── */
.frag-seo-landing .sl-faq {
    padding-block: var(--sec-y);
    background: var(--white);
    border-block-end: 1px solid var(--mist);
}

.frag-seo-landing .sl-faq-list {
    max-width: 760px;
    margin-inline: auto;
}

.frag-seo-landing .sl-faq-item {
    background: var(--snow);
    border: 2px solid var(--mist);
    border-radius: var(--r-xl);
    margin-block-end: 10px;
    overflow: hidden;
    transition: border-color .2s, background .2s;
}

.frag-seo-landing .sl-faq-item.open {
    background: var(--white);
    border-color: var(--blue);
}

.frag-seo-landing .sl-faq-q {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-block: 18px;
    padding-inline: 22px;
    cursor: pointer;
    font-size: 15px;
    font-weight: 600;
    color: var(--ink);
    gap: 16px;
    user-select: none;
}

.frag-seo-landing .sl-faq-q i {
    color: var(--silver);
    transition: transform .25s;
}

.frag-seo-landing .sl-faq-item.open .sl-faq-q i {
    transform: rotate(180deg);
    color: var(--blue);
}

.frag-seo-landing .sl-faq-a {
    max-height: 0;
    overflow: hidden;
    transition: max-height .32s ease;
}

.frag-seo-landing .sl-faq-inner {
    padding-block: 0 20px;
    padding-inline: 22px;
    font-size: 16px;
    font-weight: 400;
    color: var(--slate);
    line-height: 1.75;
}

/* ── Internal links ───────────────────────────────────────────────────────── */
.frag-seo-landing .sl-internal-links {
    padding-block: var(--sec-y);
    background: var(--white);
    border-block-end: 1px solid var(--mist);
    text-align: center;
}

.frag-seo-landing .sl-internal-h2 {
    font-size: 24px;
    font-weight: 700;
    color: var(--ink);
    margin-block-end: 32px;
}

.frag-seo-landing .sl-links-grid {
    display: flex;
    justify-content: center;
    gap: 16px;
    flex-wrap: wrap;
}

/* ── Comparison table (vs_comparison lead) ────────────────────────────────── */
.frag-seo-landing .sl-comparison {
    background: var(--snow);
}

.frag-seo-landing .sl-cmp-wrap {
    overflow-x: auto;
    background: var(--snow);
    border: 2px solid var(--mist);
    border-radius: var(--r-xl);
}

.frag-seo-landing .sl-cmp-table {
    width: 100%;
    border-collapse: collapse;
    text-align: start;
}

.frag-seo-landing .sl-cmp-th {
    padding: 1.5rem;
    border-block-end: 2px solid var(--mist);
    font-weight: 600;
    text-align: start;
}

.frag-seo-landing .sl-cmp-th--feature {
    background: var(--snow);
    color: var(--ink2);
    width: 20%;
}

.frag-seo-landing .sl-cmp-th--managely {
    background: var(--blue-l);
    color: var(--blue-d);
    font-weight: 700;
    width: 40%;
}

.frag-seo-landing .sl-cmp-th--competitor {
    background: var(--snow);
    color: var(--slate);
    width: 40%;
}

.frag-seo-landing .sl-cmp-th-inner {
    display: flex;
    align-items: center;
    gap: 8px;
}

.frag-seo-landing .sl-cmp-td {
    padding-block: 1.25rem;
    padding-inline: 1.5rem;
    border-block-end: 1px solid var(--mist);
}

.frag-seo-landing .sl-cmp-td--label {
    font-weight: 600;
    color: var(--ink2);
}

.frag-seo-landing .sl-cmp-td--ours {
    color: var(--ink);
    background: var(--white);
    font-weight: 400;
}

.frag-seo-landing .sl-cmp-td--theirs {
    color: var(--slate);
}

.frag-seo-landing .sl-cmp-icon-check {
    color: var(--green);
    margin-inline-end: 8px;
}

.frag-seo-landing .sl-cmp-icon-minus {
    color: var(--silver);
    margin-inline-end: 8px;
}

/* ── Exit-intent popup ────────────────────────────────────────────────────── */
/* Sits inside the app shell: offset by the rail (and the drawer, when open). */
.mnx-popup-overlay {
    position: fixed;
    inset-block: 0;
    inset-inline-end: 0;
    inset-inline-start: var(--mnx-rail, 60px);
    background: var(--ink);
    background: color-mix(in srgb, var(--ink) 75%, transparent);
    backdrop-filter: blur(4px);
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity .3s ease, visibility .3s ease;
}

@media (min-width: 901px) {
    .mnx-app:not(.drawer-closed) .mnx-popup-overlay {
        inset-inline-start: calc(var(--mnx-rail, 60px) + var(--mnx-drawer, 200px));
    }
}

.mnx-popup-overlay.is-visible {
    opacity: 1;
    visibility: visible;
}

.mnx-popup-content {
    background: var(--white);
    border: 2px solid var(--mist);
    border-radius: var(--r-xl);
    padding-block: 40px;
    padding-inline: 32px;
    max-width: 480px;
    width: 90%;
    text-align: center;
    position: relative;
    box-shadow: 0 25px 50px rgba(var(--blue-rgb), .18);
    transform: translateY(20px);
    transition: transform .3s ease;
}

.mnx-popup-overlay.is-visible .mnx-popup-content {
    transform: translateY(0);
}

.mnx-popup-close {
    position: absolute;
    inset-block-start: 16px;
    inset-inline-end: 20px;
    font-size: 28px;
    line-height: 1;
    background: none;
    border: none;
    color: var(--slate);
    cursor: pointer;
}

.mnx-popup-icon {
    font-size: 48px;
    background: var(--blue-l);
    width: 80px;
    height: 80px;
    line-height: 80px;
    border-radius: 50%;
    margin-block: 0 20px;
    margin-inline: auto;
    color: var(--blue);
}

.mnx-popup-h3 {
    font-size: 24px;
    color: var(--ink);
    margin-block-end: 12px;
    font-weight: 700;
}

.mnx-popup-p {
    font-size: 15px;
    color: var(--slate);
    margin-block-end: 24px;
    line-height: 1.6;
}

.mnx-popup-actions {
    display: grid;
    gap: 10px;
    margin-block-end: 16px;
}

.mnx-popup-btn {
    width: 100%;
    justify-content: center;
}

.mnx-popup-spam {
    font-size: 13px;
    color: var(--silver);
    display: block;
}

/* ── Responsive ───────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
    .frag-seo-landing .sl-hero-h1 {
        font-size: 32px;
    }

    .frag-seo-landing .sl-sec-h2 {
        font-size: 28px;
    }

    .frag-seo-landing .sl-hero-trust {
        flex-direction: column;
        gap: 12px;
        align-items: center;
    }

    .frag-seo-landing .sl-grid,
    .frag-seo-landing .sl-scope,
    .frag-seo-landing .sl-stack,
    .frag-seo-landing .sl-keep {
        grid-template-columns: 1fr;
    }

    .frag-seo-landing .sl-links-grid {
        flex-direction: column;
        align-items: center;
    }

    .frag-seo-landing .sl-proof-grid {
        gap: 12px;
    }

    .frag-seo-landing .sl-proof-item {
        font-size: 13px;
        padding-block: 8px;
        padding-inline: 14px;
    }

    .frag-seo-landing .sl-pain {
        padding-block: 24px;
        padding-inline: 20px;
    }

    .frag-seo-landing .sl-cmp-table {
        min-width: auto;
        font-size: .9rem;
    }

    .frag-seo-landing .sl-cmp-th,
    .frag-seo-landing .sl-cmp-td {
        padding-block: 1rem;
        padding-inline: .75rem;
    }

    .frag-seo-landing .sl-cmp-th--feature,
    .frag-seo-landing .sl-cmp-td--label {
        display: none;
    }

    .frag-seo-landing .sl-cmp-th--managely,
    .frag-seo-landing .sl-cmp-th--competitor {
        width: 50%;
    }
}

@media (max-width: 480px) {
    .frag-seo-landing .sl-proof-grid {
        flex-direction: column;
        align-items: stretch;
    }

    .frag-seo-landing .sl-proof-item {
        justify-content: center;
        text-align: center;
    }
}