/* ============================================================
   AI Brand Monitor — landing (NegahNo tokens only)
   Taken from the keywordchi.com landing. Physical left/right values are
   written as logical (inline-start/end) properties so the same file
   serves the Arabic (rtl) and the English (ltr) page.
   Loaded only by Views/Home/AiBrandMonitor.cshtml.
   ============================================================ */

.geo-page {
    background: var(--bg-color);
}

/* ---------- shared section rhythm ---------- */
.geo-page section {
    padding: 80px 0;
}

.geo-page .head-section-title {
    font-size: 45px;
    font-weight: 600;
    width: 100%;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    margin-bottom: 60px;
    /* this project's style.css adds a 50px top padding the reference page does not have */
    padding-top: 0;
}

.geo-page .head-section-line {
    display: inline-block;
    width: 60px;
    height: 2px;
    background: var(--primary-color);
}

/* style.css has a global `a:hover { color: #ca1c13 !important }`; on these
   buttons the background turns red as well, so the label would vanish. */
.geo-page a.btn-primary:hover,
.geo-page a.btn-primary-o:hover {
    color: #FFF !important;
}

/* In the dark CTA the outline button hovers to white, so its label stays dark. */
.geo-page .geo-cta a.btn-primary-o:hover {
    color: #0E243A !important;
}

.geo-lead {
    font-size: 17px;
    font-weight: 300;
    line-height: 2.1;
    color: #434d5ad1;
}

.geo-dark {
    background: #0E243A;
    color: #FFF;
}

    .geo-dark .geo-lead {
        color: #DBDFE4;
    }

    .geo-dark .head-section-title {
        color: #FFF;
    }

/* red attention box */
.geo-red-box {
    background: var(--primary-color);
    color: #FFF;
    border-radius: 24px;
    padding: 55px 40px;
    text-align: center;
    box-shadow: 0px 12px 24px 0px rgba(199, 29, 19, 0.16);
}

    .geo-red-box .head-section-title {
        color: #FFF;
        margin-bottom: 20px;
    }

    .geo-red-box .colored-text {
        color: #FFF;
    }

    .geo-red-box .head-section-line {
        filter: brightness(0) invert(1);
        opacity: .5;
    }

    .geo-red-box .geo-lead {
        color: rgba(255, 255, 255, 0.92);
        max-width: 820px;
        margin: 0 auto;
    }

.geo-why-badge {
    display: inline-block;
    background: #FFF;
    color: var(--primary-color);
    border-radius: 100px;
    padding: 6px 18px;
    font-size: 14px;
    font-weight: 700;
    margin-bottom: 20px;
}

/* ---------- HERO ---------- */
.geo-hero {
    padding: 60px 0 80px;
}

    .geo-hero .main-hero-text {
        font-size: 40px;
        font-weight: 600;
        line-height: 1.8;
    }

        .geo-hero .main-hero-text .colored-text {
            display: block;
        }

.geo-hero-desc {
    margin-top: 20px;
    max-width: 560px;
}

.geo-hero-actions {
    margin-top: 30px;
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    align-items: center;
}

.geo-sample-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
}

    .geo-sample-btn i {
        font-size: 14px;
        padding: 0 !important; /* cancels the default .btn-primary-o i padding */
    }

.geo-hero-note {
    margin-top: 20px;
    font-size: 13px;
    color: #7d7979;
}

    .geo-hero-note i {
        color: var(--primary-color);
        margin-inline-end: 6px;
    }

/* video button + modal */
.geo-play {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: none;
    border: none;
    padding: 0;
    font-family: inherit;
    font-size: 16px;
    font-weight: 500;
    color: #23262F;
    cursor: pointer;
}

    .geo-play:hover {
        color: var(--primary-color);
    }

.geo-play-icon {
    width: 44px;
    height: 44px;
    border-radius: 100px;
    background: #FFF;
    color: var(--primary-color);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    box-shadow: 0px 1.5px 20.5px 0px rgba(0, 0, 0, 0.05);
}

.geo-play:hover .geo-play-icon {
    background: var(--primary-color);
    color: #FFF;
}

#GeoVideoModal .modal-content {
    border: none;
    border-radius: 20px;
    overflow: hidden;
}

#GeoVideoModal .modal-header {
    border-bottom: 1px solid #F0F4F8;
    padding: 15px 20px;
}

#GeoVideoModal .modal-title {
    font-size: 17px;
    font-weight: 500;
    color: #23262F;
}

#GeoVideoModal .modal-body {
    padding: 0;
    background: #0E243A;
}

#GeoVideoModal video {
    width: 100%;
    display: block;
}

/* signature component: an AI answer that leaves your brand out */
.geo-answer-card {
    background: #FFF;
    border-radius: 20px;
    padding: 20px;
    box-shadow: 0px 1.5px 20.5px 0px rgba(0, 0, 0, 0.05);
}

.geo-answer-head {
    display: flex;
    align-items: center;
    gap: 8px;
    padding-bottom: 15px;
    border-bottom: 1px solid #F0F4F8;
}

    /* plaintext rather than direction: ltr, which would flip the side
       margin-inline-start resolves to */
    .geo-answer-head .geo-src {
        margin-inline-start: auto;
        font-size: 13px;
        color: #716F6F;
        unicode-bidi: plaintext;
    }

    .geo-answer-head .geo-dot {
        width: 9px;
        height: 9px;
        border-radius: 100px;
        background: #DBDFE4;
        display: inline-block;
    }

.geo-answer-q {
    margin: 18px 0 0;
    font-size: 15px;
    line-height: 2;
    color: #2F2F2F;
}

    .geo-answer-q b {
        font-weight: 700;
    }

.geo-answer-label {
    margin-top: 18px;
    font-size: 13px;
    color: #7d7979;
}

.geo-rank {
    list-style: none;
    padding: 0;
    margin: 12px 0 0;
}

    .geo-rank li {
        display: flex;
        align-items: center;
        gap: 12px;
        background: #F1F3F6;
        border-radius: 10px;
        padding: 12px 15px;
        margin-bottom: 10px;
        font-size: 15px;
    }

    .geo-rank .geo-n {
        font-size: 13px;
        color: #716F6F;
        min-width: 22px;
    }

    .geo-rank .geo-nm {
        font-weight: 500;
        direction: ltr;
    }

    .geo-rank .geo-share {
        margin-inline-start: auto;
        font-size: 13px;
        color: #716F6F;
    }

    .geo-rank .geo-missing {
        background: #FFF;
        border: 1px dashed var(--primary-color);
    }

        .geo-rank .geo-missing .geo-nm,
        .geo-rank .geo-missing .geo-n,
        .geo-rank .geo-missing .geo-share {
            color: var(--primary-color);
            font-weight: 700;
            direction: inherit;
        }

/* ---------- generic card ---------- */
.geo-card {
    background: #FFF;
    border-radius: 10px;
    height: 100%;
    padding: 20px;
    margin-bottom: 24px;
    box-shadow: 0px 1.5px 20.5px 0px rgba(0, 0, 0, 0.05);
}

    .geo-card .geo-icon {
        width: 48px;
        height: 48px;
        border-radius: 10px;
        background: #F1F3F6;
        color: var(--primary-color);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 20px;
        margin-bottom: 15px;
    }

    .geo-card h3 {
        font-size: 19px;
        font-weight: 600;
        margin-bottom: 10px;
        color: #23262F;
    }

    .geo-card h4 {
        font-size: 17px;
        font-weight: 500;
        margin-bottom: 8px;
        color: #23262F;
    }

    .geo-card p {
        font-size: 15px;
        font-weight: 300;
        line-height: 2;
        color: #434d5ad1;
        margin: 0;
    }

/* ---------- SEO vs GEO ---------- */
.geo-compare {
    background: #FFF;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0px 1.5px 20.5px 0px rgba(0, 0, 0, 0.05);
}

    .geo-compare .geo-crow {
        display: flex;
        border-bottom: 1px solid #F0F4F8;
    }

        .geo-compare .geo-crow:last-child {
            border-bottom: none;
        }

        .geo-compare .geo-crow > div {
            flex: 1;
            padding: 18px 20px;
            font-size: 15px;
            font-weight: 300;
            color: #434d5ad1;
        }

    .geo-compare .geo-chead > div {
        background: #0E243A;
        color: #FFF;
        font-weight: 500;
    }

    .geo-compare .geo-chead .geo-cgeo {
        background: var(--primary-color);
    }

    .geo-compare .geo-ckey {
        background: #F1F3F6;
        font-weight: 500;
        color: #2F2F2F;
    }

    .geo-compare .geo-cgeo {
        color: #23262F;
        font-weight: 500;
    }

/* ---------- roadmap: the four step path ----------
   Two inline SVGs (horizontal for desktop, vertical for mobile) so the site
   font applies to their text and the text stays indexable. Only one of them
   shows at each breakpoint. */
.geo-roadmap-desktop,
.geo-roadmap-mobile {
    display: block;
    width: 100%;
    height: auto;
}

.geo-roadmap-mobile {
    display: none;
    max-width: 380px;
    margin: 0 auto;
}

.geo-roadmap-lock {
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    font-size: 13px;
}

/* ---------- brand request form card ---------- */
.geo-form-card {
    background: #FFF;
    border-radius: 20px;
    padding: 20px;
    box-shadow: 0px 1.5px 20.5px 0px rgba(0, 0, 0, 0.05);
}

    .geo-form-card .form-group {
        margin-bottom: 15px;
    }

    .geo-form-card .form-label {
        display: block;
        font-size: 14px;
        color: #716F6F;
        margin-bottom: 7px;
    }

    .geo-form-card .geo-optional {
        color: #888;
        font-weight: 400;
    }

    .geo-form-card .form-control {
        width: 100%;
        background: #F1F3F6;
        border: 1px solid #DBDFE4;
        border-radius: 50px;
        padding: 12px 20px;
        font-size: 14px;
        font-family: inherit;
        color: #2F2F2F;
    }

        .geo-form-card .form-control[dir="ltr"] {
            text-align: left;
        }

        .geo-form-card .form-control::placeholder {
            color: #7d7979;
        }

        .geo-form-card .form-control:focus {
            border: 1px solid var(--primary-color);
            background: #FFF;
        }

    .geo-form-card .form-text {
        font-size: 12px;
        font-weight: 300;
        color: #7d7979;
        line-height: 1.9;
    }

    .geo-form-card .geo-code {
        font-family: monospace;
        background: #f3f4f6;
        padding: 1px 5px;
        border-radius: 3px;
    }

    .geo-form-card .form-buttons {
        margin-top: 5px;
    }

    .geo-form-card .btn-primary {
        display: block;
        width: 100%;
        text-align: center;
        border-radius: 50px;
        box-shadow: 0px 12px 24px 0px rgba(199, 29, 19, 0.16);
    }

/* pay-as-you-go price */
.geo-price {
    border-top: 1px solid #F0F4F8;
    margin-top: 20px;
    padding-top: 20px;
    text-align: center;
}

    .geo-price .package-head-title {
        margin-bottom: 12px;
    }

/* discount badge + struck through list price */
.geo-price-badge {
    display: inline-block;
    background: #FCEBEB;
    color: #A32D2D;
    font-size: 13px;
    font-weight: 500;
    border-radius: 20px;
    padding: 4px 14px;
    line-height: 1.6;
    margin-bottom: 10px;
}

.geo-price-value {
    display: flex;
    align-items: baseline;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px;
    font-size: 20px;
    font-weight: 500;
    color: #23262F;
}

.geo-price-number {
    font-size: 35px;
    font-weight: 600;
    color: var(--primary-color);
}

/* style.css has a global `*, *:hover { text-decoration: none !important }`
   that removes the strike from <del>, so it is put back here. */
.geo-price-old {
    font-size: 17px;
    font-weight: 300;
    color: #A5A5A5;
    text-decoration: line-through !important;
    text-decoration-thickness: 1.5px !important;
    text-decoration-color: #C91D13 !important;
}

.geo-price-unit {
    font-size: 16px;
    font-weight: 400;
    color: #23262F;
}

.geo-price-desc {
    font-size: 14px;
    font-weight: 300;
    color: #716F6F;
    margin: 8px 0 20px;
}

.geo-price-note {
    text-align: center;
    font-size: 13px;
    color: #7d7979;
    margin-top: 12px;
}

    .geo-price-note i {
        color: var(--secondary-color);
        margin-inline-end: 5px;
    }

.geo-numlist {
    list-style: none;
    padding: 0;
    margin: 0;
}

    .geo-numlist li {
        display: flex;
        gap: 15px;
        margin-bottom: 22px;
    }

    .geo-numlist .geo-num {
        min-width: 38px;
        height: 38px;
        border-radius: 100px;
        background: #F1F3F6;
        color: var(--primary-color);
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: 700;
        font-size: 14px;
    }

    .geo-numlist h4 {
        font-size: 17px;
        font-weight: 500;
        margin-bottom: 4px;
        color: #23262F;
    }

    .geo-numlist p {
        font-size: 15px;
        font-weight: 300;
        color: #434d5ad1;
        margin: 0;
        line-height: 2;
    }

/* ---------- report ---------- */
.geo-report {
    background: #FFF;
    border-radius: 20px;
    padding: 20px;
    box-shadow: 0px 1.5px 20.5px 0px rgba(0, 0, 0, 0.05);
}

.geo-report-head {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    padding-bottom: 15px;
    border-bottom: 1px solid #F0F4F8;
    margin-bottom: 20px;
}

    .geo-report-head .geo-rt {
        font-size: 16px;
        font-weight: 500;
        color: #23262F;
    }

    .geo-report-head .geo-chips {
        margin-inline-start: auto;
        display: flex;
        gap: 8px;
        flex-wrap: wrap;
    }

.geo-chip {
    border-radius: 24px;
    background: #EFFCF6;
    color: #004440;
    padding: 6px 14px;
    font-size: 13px;
    font-weight: 700;
}

.geo-chip-red {
    background: var(--primary-color);
    color: #FFF;
}

/* report → sample link CTA */
.geo-report-cta {
    text-align: center;
    padding: 40px 20px;
}

.geo-report-cta-icon {
    width: 64px;
    height: 64px;
    border-radius: 100px;
    margin: 0 auto 20px;
    background: #F1F3F6;
    color: var(--primary-color);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
}

.geo-report-cta h3 {
    font-size: 24px;
    font-weight: 600;
    color: #23262F;
    margin-bottom: 15px;
}

.geo-report-cta .geo-lead {
    max-width: 640px;
    margin: 0 auto;
}

/* flex so wrapped rows keep their spacing; as inline spans the chips'
   vertical padding overlapped the next row on narrow screens */
.geo-chips-center {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
    margin: 25px 0 0;
}

.geo-actions-center {
    justify-content: center;
}

.geo-report-cta .btn-primary {
    border-radius: 50px;
    box-shadow: 0px 12px 24px 0px rgba(199, 29, 19, 0.16);
}

    .geo-report-cta .btn-primary i {
        margin-inline-end: 8px;
        font-size: 16px;
    }

.geo-report-cta-note {
    font-size: 13px;
    color: #7d7979;
    margin-top: 15px;
}

.geo-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 15px;
}

    .geo-table th {
        font-size: 14px;
        font-weight: 500;
        color: #716F6F;
        text-align: start;
        padding: 10px 12px;
        border-bottom: 1px solid #F0F4F8;
        white-space: nowrap;
    }

    .geo-table td {
        padding: 12px;
        border-bottom: 1px solid #F0F4F8;
        font-weight: 300;
    }

    .geo-table tr:last-child td {
        border-bottom: none;
    }

    .geo-table .geo-intent {
        font-weight: 500;
    }

    .geo-table .geo-bar-cell {
        width: 55%;
    }

.geo-bar {
    height: 8px;
    border-radius: 100px;
    background: #F1F3F6;
    overflow: hidden;
    min-width: 80px;
}

    .geo-bar span {
        display: block;
        height: 100%;
        border-radius: 100px;
        background: #0E243A;
    }

    .geo-bar.geo-bar-you span {
        background: var(--primary-color);
    }

.geo-table-note {
    font-size: 14px;
    color: #7d7979;
    margin-top: 15px;
}

/* ---------- audience chips ---------- */
.geo-audience {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
}

    .geo-audience span {
        background: #FFF;
        border: 1px solid #DBDFE4;
        border-radius: 100px;
        padding: 10px 22px;
        font-size: 15px;
        font-weight: 500;
        color: #2F2F2F;
    }

/* ---------- FAQ ---------- */
.geo-faq {
    max-width: 900px;
    margin: 0 auto;
}

    .geo-faq details {
        background: #FFF;
        border-radius: 10px;
        margin-bottom: 12px;
        box-shadow: 0px 1.5px 20.5px 0px rgba(0, 0, 0, 0.05);
    }

    .geo-faq summary {
        list-style: none;
        cursor: pointer;
        padding: 18px 20px;
        font-size: 17px;
        font-weight: 500;
        color: #23262F;
        display: flex;
        align-items: center;
    }

        .geo-faq summary::-webkit-details-marker {
            display: none;
        }

        .geo-faq summary:after {
            content: "\f067";
            font-family: "Font Awesome 5 Free";
            font-weight: 900;
            margin-inline-start: auto;
            color: var(--primary-color);
            font-size: 14px;
        }

    .geo-faq details[open] summary:after {
        content: "\f068";
    }

    .geo-faq p {
        padding: 0 20px 20px;
        font-size: 15px;
        font-weight: 300;
        line-height: 2.1;
        color: #434d5ad1;
        margin: 0;
    }

/* ---------- final CTA ----------
   A separate dark card rather than a full width background: #0E243A is the
   footer colour, so on the section itself the two blocks would merge. */
.geo-cta-box {
    border-radius: 24px;
    padding: 55px 40px;
    box-shadow: -4px 4px 25px -4px rgba(0, 0, 0, 0.10);
}

    /* brand red on navy lacks contrast (about 2.3:1), so it turns white like .geo-red-box */
    .geo-cta-box .colored-text {
        color: #FFF;
    }

    .geo-cta-box .head-section-line {
        filter: brightness(0) invert(1);
        opacity: .5;
    }

.geo-cta {
    text-align: center;
}

    .geo-cta .head-section-title {
        margin-bottom: 20px;
    }

    .geo-cta .geo-lead {
        max-width: 640px;
        margin: 0 auto;
    }

    .geo-cta .geo-hero-actions {
        justify-content: center;
        margin-top: 30px;
    }

    .geo-cta .btn-primary-o {
        background: transparent;
        color: #FFF;
        border-color: #FFF;
    }

        .geo-cta .btn-primary-o:hover {
            background: #FFF;
            color: #0E243A;
        }

/* ---------- responsive ---------- */
@media (max-width: 991px) {
    .geo-page section {
        padding: 50px 0;
    }

    .geo-hide-mobile {
        display: none;
    }

    /* Section titles drop back to inline flow so narrow screens wrap them
       like a normal paragraph instead of squeezing them between the lines. */
    .geo-page .head-section-title {
        display: block;
        text-align: center;
        font-size: 24px;
        line-height: 1.8;
        margin-bottom: 35px;
        text-wrap: balance;
    }

    .geo-page .head-section-line {
        display: inline-block;
        width: 22px;
        vertical-align: middle;
        margin: 0 6px;
    }

    /* HERO */
    .geo-hero {
        padding: 30px 0 50px;
    }

        .geo-hero .main-hero-text {
            font-size: 25px;
            line-height: 1.9;
        }

    .geo-hero-desc {
        max-width: none;
    }

    .geo-hero-actions {
        gap: 12px;
    }

        .geo-hero-actions .btn-primary,
        .geo-hero-actions .btn-primary-o {
            flex: 1 1 45%;
            text-align: center;
            font-size: 16px;
            padding: 11px 14px;
        }

    .geo-play {
        flex: 1 0 100%;
        justify-content: center;
        font-size: 15px;
    }

    .geo-play-icon {
        width: 38px;
        height: 38px;
    }

    .geo-answer-card {
        margin-top: 35px;
        padding: 16px;
    }

    .geo-rank li {
        flex-wrap: wrap;
        gap: 8px;
        font-size: 14px;
        padding: 11px 12px;
    }

        .geo-rank .geo-share {
            font-size: 12px;
        }

    .geo-red-box {
        padding: 32px 20px;
        border-radius: 20px;
    }

    .geo-lead {
        font-size: 15px;
        line-height: 2;
    }

    /* comparison table → stacked cards with column labels */
    .geo-compare .geo-chead {
        display: none;
    }

    .geo-compare .geo-crow {
        flex-direction: column;
    }

        .geo-compare .geo-crow > div {
            padding: 12px 16px;
            font-size: 14px;
        }

            .geo-compare .geo-crow > div[data-label]:before {
                content: attr(data-label);
                display: block;
                font-size: 11px;
                font-weight: 500;
                color: #7d7979;
                margin-bottom: 4px;
            }

    .geo-compare .geo-ckey {
        background: #0E243A;
        color: #FFF;
    }

    .geo-compare .geo-cgeo {
        background: #FFF5F4;
    }

        .geo-compare .geo-crow > div.geo-cgeo[data-label]:before {
            color: var(--primary-color);
        }

    .geo-card {
        padding: 18px;
        margin-bottom: 16px;
    }

        .geo-card h3 {
            font-size: 17px;
        }

        .geo-card h4 {
            font-size: 16px;
        }

        .geo-card p {
            font-size: 14px;
        }

    /* switch from the horizontal roadmap to the vertical one */
    .geo-roadmap-desktop {
        display: none;
    }

    .geo-roadmap-mobile {
        display: block;
    }

    .geo-form-card {
        margin-bottom: 35px;
    }

        .geo-form-card .form-text {
            word-break: break-word;
        }

    .geo-price-number {
        font-size: 30px;
    }

    .geo-numlist li {
        gap: 12px;
        margin-bottom: 18px;
    }

    .geo-numlist .geo-num {
        min-width: 32px;
        height: 32px;
        font-size: 13px;
    }

    .geo-numlist h4 {
        font-size: 16px;
    }

    .geo-numlist p {
        font-size: 14px;
    }

    .geo-report {
        padding: 16px;
    }

    .geo-report-head {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

        .geo-report-head .geo-chips {
            margin-inline-start: 0;
        }

    .geo-table {
        font-size: 13px;
    }

        .geo-table td {
            padding: 9px 6px;
        }

    .geo-bar {
        min-width: 45px;
    }

    .geo-report-cta {
        padding: 28px 16px;
    }

        .geo-report-cta h3 {
            font-size: 20px;
        }

    .geo-audience {
        gap: 8px;
    }

        .geo-audience span {
            padding: 8px 16px;
            font-size: 14px;
        }

    .geo-faq summary {
        font-size: 15px;
        padding: 15px 16px;
        line-height: 1.9;
    }

    .geo-faq p {
        padding: 0 16px 16px;
        font-size: 14px;
    }

    .geo-cta-box {
        padding: 32px 20px;
        border-radius: 20px;
    }

    .geo-cta .geo-hero-actions {
        margin-top: 25px;
    }
}

/* narrow phones: the title side lines go so the title gets the full width */
@media (max-width: 575px) {
    .geo-page .head-section-title {
        font-size: 21px;
        margin-bottom: 28px;
    }

    .geo-page .head-section-line {
        display: none;
    }

    .geo-hero .main-hero-text {
        font-size: 22px;
    }

    .geo-hero-actions .btn-primary,
    .geo-hero-actions .btn-primary-o {
        flex: 1 0 100%;
    }

    .geo-red-box,
    .geo-cta-box {
        padding: 26px 16px;
    }

    .geo-report-cta h3 {
        font-size: 18px;
    }
}

@media (prefers-reduced-motion: no-preference) {
    .geo-rank li {
        opacity: 0;
        transform: translateY(8px);
        animation: geoRise .5s ease forwards;
    }

        .geo-rank li:nth-child(1) {
            animation-delay: .2s;
        }

        .geo-rank li:nth-child(2) {
            animation-delay: .5s;
        }

        .geo-rank li:nth-child(3) {
            animation-delay: .8s;
        }

        .geo-rank li:nth-child(4) {
            animation-delay: 1.1s;
        }

    @keyframes geoRise {
        to {
            opacity: 1;
            transform: none;
        }
    }
}

/* ============================================================
   Sample report page (/llms/sample): a header, the report in an
   iframe, and a closing CTA. Also from the keywordchi.com page.
   ============================================================ */

/* .geo-page section gives every section a large padding; this selector
   has to match its specificity to win */
.geo-page .bms-wrap {
    padding: 24px 0 48px;
}

/* the report lives in an iframe; if something in it overflows the width,
   the whole page must not scroll sideways */
.bms-page {
    overflow-x: hidden;
}

.bms-wrap * {
    min-width: 0;
}

.bms-head {
    text-align: center;
    margin-bottom: 22px;
}

.bms-badge {
    display: inline-block;
    background: #C91D13;
    color: #fff;
    border-radius: 999px;
    padding: 5px 16px;
    font-size: 12px;
    font-weight: 700;
    margin-bottom: 14px;
}

.bms-head h1 {
    font-size: 26px;
    font-weight: 800;
    line-height: 1.8;
    margin-bottom: 10px;
}

.bms-head p {
    font-size: 14px;
    color: #6b6b6b;
    line-height: 2;
    max-width: 760px;
    margin: 0 auto;
}

.bms-meta {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 10px;
    margin-top: 16px;
}

.bms-chip {
    background: #f4f4f4;
    border: 1px solid #e7e7e7;
    border-radius: 999px;
    padding: 6px 14px;
    font-size: 12.5px;
    color: #444;
}

    .bms-chip b {
        color: #C91D13;
        font-weight: 700;
    }

.bms-frame-card {
    background: #fff;
    border: 1px solid #ececec;
    border-radius: 20px;
    padding: 10px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, .06);
    overflow: hidden;
}

    /* the height follows the report; the script on the page sets it */
    .bms-frame-card iframe {
        width: 100%;
        border: 0;
        display: block;
        min-height: 600px;
        border-radius: 14px;
        background: #fff;
    }

.bms-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 260px;
    color: #7f7f7f;
    font-size: 14px;
}

.bms-spinner {
    width: 22px;
    height: 22px;
    border: 3px solid #eee;
    border-top-color: #C91D13;
    border-radius: 50%;
    animation: bmsspin .8s linear infinite;
}

@keyframes bmsspin {
    to {
        transform: rotate(360deg);
    }
}

.bms-cta {
    margin-top: 34px;
    text-align: center;
    background: #fff;
    border: 1px solid #ececec;
    border-radius: 20px;
    padding: 30px 22px;
}

    .bms-cta h2 {
        font-size: 20px;
        font-weight: 800;
        margin-bottom: 10px;
        line-height: 1.9;
    }

    .bms-cta p {
        font-size: 14px;
        color: #6b6b6b;
        line-height: 2;
        max-width: 680px;
        margin: 0 auto 18px;
    }

.bms-cta-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
}

@media (max-width: 767.98px) {
    .geo-page .bms-wrap {
        padding: 16px 0 32px;
    }

    .bms-head h1 {
        font-size: 21px;
        line-height: 1.9;
    }

    .bms-head p {
        font-size: 13px;
    }

    .bms-chip {
        font-size: 11.5px;
        padding: 5px 11px;
    }

    .bms-meta {
        gap: 7px;
    }

    .bms-frame-card {
        padding: 6px;
        border-radius: 14px;
    }

    .bms-cta {
        margin-top: 24px;
        padding: 22px 16px;
        border-radius: 14px;
    }

        .bms-cta h2 {
            font-size: 17px;
        }

        .bms-cta p {
            font-size: 13px;
        }

    /* full width buttons on phones, for a bigger touch target */
    .bms-cta-actions {
        flex-direction: column;
        align-items: stretch;
    }

        .bms-cta-actions .btn-primary,
        .bms-cta-actions .btn-primary-o {
            width: 100%;
            text-align: center;
            font-size: 16px;
        }
}

@media (max-width: 400px) {
    .bms-head h1 {
        font-size: 18px;
    }

    .bms-badge {
        font-size: 11px;
        padding: 4px 12px;
    }

    .bms-frame-card {
        padding: 4px;
    }
}