/* ============================================
   MANGOAPPS BRAND SYSTEM
   Brand colors override Bootstrap's semantic classes
   so .text-primary, .btn-success, etc. are on-brand.
   ============================================ */

/* --- Brand Fonts (Montserrat + Inter) --- */
/* NOTE: Google Fonts loaded via <link> in marketing layout for non-blocking delivery */

/* --- Brand Color Tokens --- */
:root {
    /* Primary Palette */
    --ma-green: #1B8751;
    --ma-gold: #FFC502;
    --ma-orange: #F47627;
    --ma-black: #141413;

    /* Secondary Palette */
    --ma-green-dark: #066636;
    --ma-green-mid: #23B66D;
    --ma-lime: #89C340;
    --ma-blue: #00AED7;
    --ma-purple: #94355E;

    /* Gradients */
    --ma-gradient-hero: linear-gradient(135deg, #1B8751 0%, #14a058 50%, #0d7a3e 100%);
    --ma-gradient-warm: linear-gradient(135deg, #1B8751 0%, #FFC502 100%);
    --ma-gradient-sunset: linear-gradient(135deg, #FFC502 0%, #F47627 100%);

    /* Neutrals */
    --ma-gray-50: #f9fafb;
    --ma-gray-100: #f5f5f5;
    --ma-gray-200: #e5e7eb;
    --ma-gray-500: #6b7280;
    --ma-gray-700: #374151;
    --ma-gray-900: #111827;

    /* Map brand colors → Bootstrap CSS variables */
    --bs-primary-rgb: 27, 135, 81;
    --bs-success-rgb: 27, 135, 81;
    --bs-warning-rgb: 244, 118, 39;
    --bs-info-rgb: 0, 174, 215;
    --bs-danger-rgb: 148, 53, 94;
    --bs-dark-rgb: 54, 58, 58;
}

/* ============================================
   BOOTSTRAP OVERRIDES — Primary (Green #1B8751)
   ============================================ */
.text-primary {
    color: var(--ma-green) !important;
}

.bg-primary {
    background-color: var(--ma-green) !important;
}

.border-primary {
    border-color: var(--ma-green) !important;
}

/* Bootstrap nav-pills default to --bs-primary (blue hex — only the -rgb
   variable is remapped above). Point the pill variables at brand green so
   tabbed sections (e.g. /pricing suite tabs) match the rest of the page. */
.nav-pills {
    --bs-nav-pills-link-active-bg: var(--ma-green);
    --bs-nav-link-color: var(--ma-green);
    --bs-nav-link-hover-color: var(--ma-green-dark);
}

.btn-primary {
    background-color: var(--ma-green) !important;
    border-color: var(--ma-green) !important;
}

.btn-primary:hover,
.btn-primary:focus {
    background-color: var(--ma-green-dark) !important;
    border-color: var(--ma-green-dark) !important;
}

/* Secondary CTAs were getting overlooked. Outline buttons now use a soft
   "tonal" fill + heavier (1.5px) border + 600 weight so they read clearly as
   buttons (still subordinate to the solid primary CTA), then fill solid on
   hover. */
.btn-outline-primary {
    background-color: #eaf6f0 !important;
    color: var(--ma-green-dark) !important;
    border-color: var(--ma-green) !important;
    border-width: 1.5px !important;
    font-weight: 600;
}

.btn-outline-primary:hover,
.btn-outline-primary:focus {
    background-color: var(--ma-green) !important;
    border-color: var(--ma-green) !important;
    color: #fff !important;
}

/* btn-outline-secondary is the most-used outline button and previously fell
   back to faint gray-on-transparent — the main "I didn't notice it" offender.
   Give it a neutral tonal fill + defined border + darker text. */
.btn-outline-secondary {
    background-color: #f1f3f5 !important;
    color: #344054 !important;
    border-color: #ced4da !important;
    border-width: 1.5px !important;
    font-weight: 600;
}

.btn-outline-secondary:hover,
.btn-outline-secondary:focus {
    background-color: #e2e6ea !important;
    border-color: #adb5bd !important;
    color: #1a1a1a !important;
}

.bg-primary-subtle {
    background-color: #eaf6f0 !important;
}

.text-primary-emphasis {
    color: var(--ma-green-dark) !important;
}

/* ============================================
   BOOTSTRAP OVERRIDES — Success (Green Mid #23B66D)
   ============================================ */
.text-success {
    color: var(--ma-green-mid) !important;
}

.bg-success {
    background-color: var(--ma-green-mid) !important;
}

.border-success {
    border-color: var(--ma-green-mid) !important;
}

.bg-success-subtle {
    background-color: #e8f8ef !important;
}

.btn-success {
    background-color: var(--ma-green) !important;
    border-color: var(--ma-green) !important;
}

.btn-success:hover,
.btn-success:focus {
    background-color: var(--ma-green) !important;
    border-color: var(--ma-green) !important;
}

.btn-outline-success {
    background-color: #e8f8ef !important;
    color: var(--ma-green-dark) !important;
    border-color: var(--ma-green-mid) !important;
    border-width: 1.5px !important;
    font-weight: 600;
}

.btn-outline-success:hover,
.btn-outline-success:focus {
    background-color: var(--ma-green-mid) !important;
    border-color: var(--ma-green-mid) !important;
    color: #fff !important;
}

/* ============================================
   BOOTSTRAP OVERRIDES — Warning (Orange #F47627)
   ============================================ */
.text-warning {
    color: var(--ma-orange) !important;
}

.bg-warning {
    background-color: var(--ma-orange) !important;
}

.border-warning {
    border-color: var(--ma-orange) !important;
}

.bg-warning-subtle {
    background-color: #fef0e6 !important;
}

.btn-warning {
    background-color: var(--ma-orange) !important;
    border-color: var(--ma-orange) !important;
    color: #fff !important;
}

.btn-warning:hover,
.btn-warning:focus {
    background-color: #d9641b !important;
    border-color: #d9641b !important;
}

/* ============================================
   BOOTSTRAP OVERRIDES — Info (Blue #00AED7)
   ============================================ */
.text-info {
    color: var(--ma-blue) !important;
}

.bg-info {
    background-color: var(--ma-blue) !important;
}

.border-info {
    border-color: var(--ma-blue) !important;
}

.bg-info-subtle {
    background-color: #e6f7fb !important;
}

/* ============================================
   BOOTSTRAP OVERRIDES — Danger (Purple #94355E)
   ============================================ */
.text-danger {
    color: var(--ma-purple) !important;
}

.bg-danger {
    background-color: var(--ma-purple) !important;
}

.border-danger {
    border-color: var(--ma-purple) !important;
}

.bg-danger-subtle {
    background-color: #f5eaf0 !important;
}

/* ============================================
   BOOTSTRAP OVERRIDES — Dark (Brand Black #363A3A)
   ============================================ */
.text-dark {
    color: var(--ma-black) !important;
}

.bg-dark {
    background-color: var(--ma-black) !important;
    color: #fff;
}

.bg-dark h1,
.bg-dark h2,
.bg-dark h3,
.bg-dark h4,
.bg-dark h5,
.bg-dark h6,
.bg-primary h1,
.bg-primary h2,
.bg-primary h3,
.bg-primary h4,
.bg-primary h5,
.bg-primary h6 {
    color: #fff;
}

.border-dark {
    border-color: var(--ma-black) !important;
}

/* ============================================
   BOOTSTRAP OVERRIDES — Light backgrounds
   ============================================ */
.bg-light {
    background-color: var(--ma-gray-100) !important;
}

/* ============================================
   BOOTSTRAP OVERRIDES — Light (hero CTAs on green backgrounds)
   ============================================ */
.btn-light {
    background-color: #fff !important;
    border-color: #fff !important;
    color: var(--ma-green) !important;
    font-weight: 600;
}

.btn-light:hover,
.btn-light:focus {
    background-color: var(--ma-gray-100) !important;
    border-color: var(--ma-gray-100) !important;
    color: var(--ma-green-dark) !important;
}

/* On dark/hero/image backgrounds — a 60%-opacity border was easy to miss.
   Solid white border + a subtle translucent fill so it pops against busy
   imagery. */
.btn-outline-light {
    background-color: rgba(255, 255, 255, 0.14) !important;
    border-color: #fff !important;
    border-width: 1.5px !important;
    color: #fff !important;
    font-weight: 600;
}

.btn-outline-light:hover,
.btn-outline-light:focus {
    background-color: rgba(255, 255, 255, 0.24) !important;
    border-color: #fff !important;
    color: #fff !important;
}

/* ============================================
   GLOBAL BUTTON & BADGE SHAPE
   ============================================ */
.btn {
    border-radius: 8px;
    font-weight: 500;
    transition: all 0.2s ease;
}

/* Outline/secondary CTAs read bolder so they don't disappear next to body
   copy (overrides the .btn 500 default, which otherwise wins by source order). */
.btn[class*="btn-outline-"] {
    font-weight: 600 !important;
}

/* ============================================
   MOBILE AUDIT FIXES (2026-05-31)
   ============================================ */

/* Kill horizontal scroll on phones/tablets. Off-canvas panels (the AI advisor
   sidebar, inbox panel, etc.) are parked off the right edge (right: -100%) and
   were extending the document to ~780px, making every marketing page scroll
   sideways. Scoped to <=991px so desktop position:sticky is unaffected. */
@media (max-width: 991.98px) {

    html,
    body {
        overflow-x: hidden;
        max-width: 100%;
    }
}

/* Eyebrows (the small uppercase labels above section headings) add clutter on
   small screens — hide them on phones. The heading carries the message. */
@media (max-width: 767.98px) {
    .section-eyebrow {
        display: none !important;
    }
}

.btn-lg {
    border-radius: 10px;
}

.badge {
    border-radius: 6px;
}

/* ============================================
   END BRAND SYSTEM
   ============================================ */

/* Marketing Page Styles */

/* Fluid typography to match mangoapps.com (Webflow).
   At 1440px the formula equals 16px (no change); above that it
   scales proportionally so text grows on larger monitors and
   images don't appear disproportionately large. */
@media (min-width: 1440px) {
    html {
        font-size: calc(0.8127rem + 0.2081vw);
    }
}

body {
    background-color: #ffffff;
    color: var(--ma-black);
    font-family: 'Inter', sans-serif;
}

h1,
h2,
h3,
h4,
h5,
h6,
.display-1,
.display-2,
.display-3,
.display-4,
.display-5,
.display-6 {
    font-family: 'Montserrat', sans-serif;
}

.navbar {
    --bs-navbar-padding-x: 0rem !important;
}

/* Lock all containers to match the header navbar width.
   Bootstrap's stepped max-widths (720/960/1140/1320px) are replaced
   with a single cap so content never exceeds the header.
   Padding is explicit so header + hero + content + footer align. */
.container,
.navbar .container,
footer .container,
section .container {
    max-width: 1140px !important;
    margin-left: auto;
    margin-right: auto;
    padding-left: 2rem;
    padding-right: 2rem;
}

/* Font Awesome Icon Colors — default gray, but inherit inside interactive elements */
.fas,
.far,
.fab,
.fa {
    color: var(--ma-gray-500);
}

.btn .fas,
.btn .far,
.btn .fab,
.btn .fa,
.badge .fas,
.badge .far,
.badge .fab,
.badge .fa,
.hero .fas,
.hero .far,
.hero .fab,
.hero .fa,
.nav-link .fas,
.nav-link .far,
.nav-link .fab,
.nav-link .fa,
a .fas,
a .far,
a .fab,
a .fa {
    color: inherit;
}

/* Global navigation spacing for all marketing pages */
main.flex-grow-1 {
    padding-top: 75px;
}

/* In-page anchor targets (#faq, #industries, #pick …). The padding-top above
   only clears the fixed-top navbar on FIRST paint — a mid-page jump scrolls
   the section flush to the viewport top, where the navbar covers its heading.
   scroll-margin-top is what the browser honours on a fragment jump: 95px =
   the 75px navbar + breathing room, 133px below lg where the collapsed
   navbar grows to ~113px (see the .dir-list-table note further down). */
main.flex-grow-1 > section[id],
main.flex-grow-1 > div[id] {
    scroll-margin-top: 95px;
}

@media (max-width: 991.98px) {
    main.flex-grow-1 > section[id],
    main.flex-grow-1 > div[id] {
        scroll-margin-top: 133px;
    }
}

/* ─── Mega Menu ─── */
.mega-dropdown {
    position: static;
}

.mega-menu {
    width: 100%;
    left: 0;
    right: 0;
    border: none;
    border-top: 2px solid var(--ma-gray-200);
    border-radius: 0 0 8px 8px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

.mega-menu .dropdown-header {
    font-size: 0.7rem;
    letter-spacing: 0.06em;
    padding: 0 0 0.5rem 0;
    margin-bottom: 0.25rem;
    border-bottom: 1px solid var(--ma-gray-200);
}

.mega-menu .dropdown-item {
    font-size: 0.875rem;
    padding: 0.35rem 0;
    color: var(--ma-gray-700);
}

.mega-menu .dropdown-item:hover {
    background: none;
    color: var(--ma-green);
}

/* Two-line items: bold title + muted subtitle. Used in the Solutions
   mega-menu so each pack/feature carries a one-line value prop. */
.mega-menu .mega-item {
    padding: 0.5rem 0;
    line-height: 1.3;
}

.mega-menu .mega-item .mega-item-title {
    display: block;
    font-weight: 500;
}

.mega-menu .mega-item .mega-item-sub {
    display: block;
    font-size: 0.78rem;
    color: var(--ma-gray-500);
    margin-top: 0.1rem;
}

.mega-menu .mega-item:hover .mega-item-sub {
    color: var(--ma-gray-600);
}

@media (max-width: 991.98px) {
    .mega-menu {
        position: relative;
        box-shadow: none;
        border: none;
        padding: 0.5rem 1rem;
    }

    .mega-menu .row>div {
        margin-bottom: 1rem;
        padding-bottom: 0.75rem;
        border-bottom: 1px solid var(--ma-gray-200);
    }

    .mega-menu .row>div:last-child {
        border-bottom: none;
        padding-bottom: 0;
    }

    .mega-menu .dropdown-item {
        padding: 0.5rem 0;
        min-height: 2.75rem;
        display: flex;
        align-items: center;
    }

    /* Two-line items (title + subtitle) need to stack vertically on mobile,
       overriding the flex-row default above. */
    .mega-menu .mega-item {
        flex-direction: column;
        align-items: flex-start;
        min-height: auto;
    }

    .mega-menu .btn-sm {
        padding: 0.5rem 0.75rem;
        font-size: 0.875rem;
        min-height: 2.75rem;
    }
}

/* Rich text paragraphs from marketing_text helper */
main section div>p:last-child {
    margin-bottom: 0;
}

/* Feature List Items with Icons */
.list-unstyled li {
    display: flex;
    align-items: flex-start;
}

.list-unstyled li i {
    flex-shrink: 0;
    margin-top: 0.25rem;
}

/* Display Heading Styles */
.display-1 {
    letter-spacing: .01em;
    margin-top: 0;
    font-family: Montserrat, sans-serif;
    font-size: 4.5rem;
    line-height: 1.04;
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-color: white;
}

/* Shadow Utilities */
.shadow-sm {
    box-shadow: 0 1px #75757533 !important;
}

/* Mobile Optimizations */
@media (max-width: 991.98px) {
    .navbar .marketing-logo {
        height: 38px !important;
        width: auto !important;
    }
}

@media (max-width: 768px) {
    .container {
        padding-left: 1.25rem;
        padding-right: 1.25rem;
    }
}

/* ============================================
   PRICING PAGE STYLES
   ============================================ */

/* Billing Toggle */
.billing-toggle {
    border: 1px solid #dee2e6;
    width: auto;
    max-width: fit-content;
}

.billing-toggle-btn {
    background: transparent;
    border: none;
    color: #6c757d;
    transition: all 0.2s ease;
}

.billing-toggle-btn.active {
    background: var(--ma-green);
    color: white;
}

.billing-toggle-btn:hover:not(.active) {
    background: #f8f9fa;
}

/* Pricing Cards */
.pricing-card {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    border-radius: 12px;
}

.pricing-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
}

.pricing-card.border-primary {
    border-width: 2px !important;
}

/* Enterprise Card - Stand out styling */
.pricing-card.enterprise-card {
    background: linear-gradient(180deg, #fffbf5 0%, #ffffff 100%);
}

.pricing-card.enterprise-card .bg-warning {
    background-color: #f0ad4e !important;
}

/* Module Checklist */
.module-checklist .fa-check-circle {
    color: #28a745 !important;
}

.module-checklist .fa-times-circle {
    color: #dee2e6 !important;
}

/* Features Comparison Table */
.features-table-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin: 0 -15px;
    padding: 0 15px;
}

.features-table {
    min-width: 700px;
    margin-bottom: 0;
}

.features-table th,
.features-table td {
    vertical-align: middle;
    padding: 0.75rem 1rem;
}

.features-table thead th {
    border-bottom: 2px solid #dee2e6;
    font-weight: 600;
}

.features-table .table-secondary {
    background-color: #f8f9fa;
}

.features-table .table-secondary td {
    font-weight: 600;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #495057;
    padding: 1rem;
}

.feature-name-col {
    background: white;
    position: sticky;
    left: 0;
    z-index: 1;
    border-right: 1px solid #dee2e6;
}

.features-table .fa-check-circle {
    color: #28a745 !important;
}

.features-table .fa-minus {
    color: #dee2e6 !important;
}

.features-table .fa-infinity {
    color: var(--ma-green) !important;
}

/* FAQ Accordion */
#pricingFAQ .accordion-item {
    border: 1px solid #dee2e6;
    border-radius: 8px;
    margin-bottom: 0.5rem;
    overflow: hidden;
    background-color: #fff;
}

#pricingFAQ .accordion-button {
    font-weight: 500;
    padding: 1rem 1.25rem;
}

#pricingFAQ .accordion-button:not(.collapsed) {
    background-color: #f8f9fa;
    color: #212529;
    box-shadow: none;
}

#pricingFAQ .accordion-button:focus {
    box-shadow: none;
    border-color: rgba(0, 0, 0, .125);
}

#pricingFAQ .accordion-body {
    padding: 1rem 1.25rem;
    color: #6c757d;
}

.accordion-body a {
    color: var(--ma-green);
    text-decoration: underline;
    font-weight: 500;
}

.accordion-body a:hover,
.accordion-body a:focus {
    color: var(--ma-green-dark);
}

/* Enterprise Section */
#enterprise-cta {
    background-color: #fff;
}

/* Prevent all marketing images from stretching beyond intrinsic size */
main img {
    max-width: 100%;
    height: auto;
    object-fit: contain;
}

main img.img-fluid {
    width: auto;
    max-width: 100%;
}

/* Icons: never stretch in flex/grid contexts */
main i.fas,
main i.far,
main i.fab,
main i.fa,
main i.fal,
main i.fad {
    flex-shrink: 0;
    width: auto;
    height: auto;
}

/* Feature block images: constrain height and maintain proportions on resize */
.feature-block-img {
    max-height: 450px;
    width: auto;
    max-width: 100%;
    object-fit: contain;
}

@media (max-width: 991.98px) {
    .feature-block-img {
        max-height: 350px;
        margin: 0 auto;
        display: block;
    }
}

.hero {
    background: linear-gradient(135deg, #1b8751 0%, #14a058 50%, #0d7a3e 100%);
    color: white;
}

.hero-image {
    max-height: 520px;
    object-fit: contain;
    filter: drop-shadow(0 8px 24px rgba(0, 0, 0, 0.15));
}

.hero-lottie,
.feature-block-lottie {
    max-width: 600px;
    width: 100%;
    filter: drop-shadow(0 8px 24px rgba(0, 0, 0, 0.15));
}

.hero-lottie svg,
.feature-block-lottie svg {
    width: 100% !important;
    height: 100% !important;
}

/* Eager poster behind a Lottie hero: the <img> paints at FCP (the LCP element)
   and sizes the container; the lottie-web SVG is appended on top and the poster
   fades out once it renders (see lottie_animation_controller). The poster stays
   in flow (opacity, not removed) so the container keeps its height and the
   absolutely-positioned SVG stays sized. */
.hero-lottie.has-poster {
    position: relative;
}

.hero-lottie.has-poster .hero-lottie-poster {
    display: block;
    width: 100%;
    height: auto;
    transition: opacity 0.4s ease;
}

.hero-lottie.has-poster svg {
    position: absolute;
    inset: 0;
}

/* Hero image carousel — crossfade rotation (marketing/shared/_hero)
   ONE STEADY FRAME, SIZED TO THE TALLEST PICTURE (2026-09-23, the twin of the
   Sites hero fix in sites.css, "Hero image carousel"). Every slide sits in the
   SAME grid cell, so the cell is as tall as the tallest picture whichever one
   is showing, and each picture is centred in it at its own shape — never
   cropped, never stretched: img-fluid and .hero-image cap it at the column's
   width and 520px with both dimensions auto, which keeps its aspect. Only
   .active is visible, and it sits on top so a click lands on the picture the
   visitor is looking at.

   This replaced an absolute stack that left only the .active slide in flow, so
   the band re-measured itself on every rotation and everything below the hero
   jumped with it whenever the pictures differed in shape. */
.hero-carousel {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    place-items: center;
    min-height: 280px;
}

.hero-carousel-img {
    grid-area: 1 / 1;
    opacity: 0;
    transition: opacity 0.8s ease-in-out;
}

.hero-carousel-img.active {
    z-index: 1;
    opacity: 1;
}

/* Under reduced motion the partial's script never starts the rotation, so only
   the first picture is ever shown: size the frame to it rather than reserve
   room for pictures that never appear. */
@media (prefers-reduced-motion: reduce) {
    .hero-carousel-img {
        transition: none;
    }

    .hero-carousel-img:not(.active) {
        display: none;
    }
}

/* Hand-drawn yellow underline for ==highlighted== heading text */
.text-underline-highlight {
    background-image: url("/images/underline-yellow.svg");
    background-repeat: no-repeat;
    background-position: bottom center;
    background-size: 100% 0.3em;
    padding-bottom: 0.15em;
    font-size: inherit !important;
}

@media (max-width: 768px) {
    .text-underline-highlight {
        background-image: none;
        padding-bottom: 0;
    }
}

.hero h1,
.hero h2,
.hero h3,
.hero h4,
.hero h5,
.hero h6,
.hero p,
.hero .lead {
    color: white;
}

/* Directory Sidebar Navigation */
.dir-sidebar-heading {
    font-size: 0.68rem;
    letter-spacing: 0.08em;
}

.dir-sidebar-link {
    font-size: 0.85rem;
    color: #666;
    font-weight: 400;
}

.showcase-sidebar .dir-sidebar-link {
    font-size: 0.8rem;
}

.dir-sidebar-link:hover {
    color: #1b8751;
    background: #f5f5f5;
}

.dir-sidebar-link.active {
    color: #1b8751;
    font-weight: 600;
}

.dir-sidebar-icon {
    width: 16px;
    text-align: center;
}

/* Apps & Agents list — /directory/list (one striped row per app, sortable by name or category) */
.dir-list-table thead th {
    /* Sticky against the VIEWPORT — the table must not sit inside an
       overflow:auto wrapper (.table-responsive), or the header pins inside
       that box instead and floats over the first rows. Narrow screens drop
       the Category column, so the table never needs to scroll. */
    position: sticky;
    top: 76px; /* below the fixed-top marketing navbar */
    z-index: 2;
    background: #fff;
    border-bottom: 2px solid #dee2e6;
    font-size: 0.74rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #666;
    padding: 0.7rem 0.75rem;
}

/* Sortable header: a real <button> for keyboard users, styled as the header text. */
.dir-list-sort {
    background: none;
    border: 0;
    padding: 0;
    font: inherit;
    color: inherit;
    text-transform: inherit;
    letter-spacing: inherit;
    cursor: pointer;
    white-space: nowrap;
}

.dir-list-sort:hover,
.dir-list-sort:focus-visible {
    color: #1b8751;
    outline: none;
}

.dir-list-sort i {
    margin-left: 0.35rem;
    font-size: 0.7rem;
    color: #bbb;
}

th[aria-sort] .dir-list-sort,
th[aria-sort] .dir-list-sort i {
    color: #1b8751;
}

.dir-list-table tbody td {
    font-size: 0.9rem;
    padding: 0.6rem 0.75rem;
    color: #444;
    border-bottom: 0;
}

.dir-list-table.table-striped > tbody > tr:nth-of-type(odd) > td {
    background-color: #f7f9f8;
}

.dir-list-name {
    color: #222;
    font-weight: 600;
}

.dir-list-name:hover {
    color: #1b8751;
}

.dir-list-icon,
.dir-list-icon-fallback {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    flex-shrink: 0;
}

.dir-list-icon {
    object-fit: cover;
}

.dir-list-icon-fallback {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 0.8rem;
}

.dir-list-cat {
    display: inline-block;
    padding: 0.15em 0.6em;
    border-radius: 999px;
    background: #ececec;
    color: #555;
    font-size: 0.78rem;
    white-space: nowrap;
}

.dir-list-meta {
    display: none;
    color: #888;
    font-size: 0.78rem;
    margin-top: 0.1rem;
}

/* Below lg the navbar collapses to logo + hamburger and grows to ~113px. */
@media (max-width: 991.98px) {
    .dir-list-table thead th { top: 113px; }
}

@media (max-width: 767.98px) {
    .dir-list-col-meta { display: none; }
    .dir-list-meta { display: block; }
    .dir-list-table thead th:first-child { width: 42%; }
    .dir-list-app { align-items: flex-start; }
    .dir-list-app .dir-list-icon,
    .dir-list-app .dir-list-icon-fallback { margin-top: 2px; }
}

/* Pricing Page Mobile Responsive */
@media (max-width: 768px) {

    /* Hide full module list by default, show summary on mobile */
    .module-list-full {
        display: none !important;
    }

    /* Allow expansion when explicitly requested via class */
    .module-list-full.module-expanded {
        display: block !important;
    }

    .module-list-summary {
        display: block !important;
    }

    /* Smaller toggle on mobile */
    .billing-toggle-btn {
        padding: 0.375rem 0.75rem !important;
        font-size: 0.875rem;
    }

    .billing-toggle-btn .badge {
        display: none;
    }

    /* Smaller price display on mobile */
    .pricing-card .display-5 {
        font-size: 2rem;
    }

    /* Features table sticky column */
    .feature-name-col {
        min-width: 180px !important;
        font-size: 0.875rem;
    }

    .features-table th:not(.feature-name-col),
    .features-table td:not(.feature-name-col) {
        min-width: 100px !important;
        font-size: 0.875rem;
    }

    /* FAQ accordion spacing */
    #pricingFAQ .accordion-button {
        font-size: 0.9rem;
        padding: 0.875rem 1rem;
    }
}

@media (max-width: 576px) {

    /* Even smaller on very small screens */
    .pricing-card .display-5 {
        font-size: 1.75rem;
    }

    .pricing-card .card-body {
        padding: 1.25rem !important;
    }

    .feature-name-col {
        min-width: 150px !important;
    }
}

/* Table column width utilities for marketing tables */
.w-35 {
    width: 35%;
}

.w-65 {
    width: 65%;
}

/* Pricing category divider */
.pricing-category-divider {
    border-top: 3px solid var(--bs-primary);
    width: 100px;
}

/* ─── Home Hero AI Input Box ─── */
.hero-ai-box {
    width: 100%;
    max-width: 860px;
    background: white;
    border-radius: 28px;
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.12), 0 2px 8px rgba(0, 0, 0, 0.06);
    padding: 10px;
    transition: box-shadow 0.3s ease, transform 0.2s ease;
}

.hero-ai-box:hover,
.hero-ai-box:focus-within {
    box-shadow: 0 12px 48px rgba(0, 0, 0, 0.18), 0 4px 12px rgba(0, 0, 0, 0.08);
    transform: translateY(-2px);
}

.hero-ai-form {
    width: 100%;
}

.hero-ai-input-wrapper {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 8px 8px 20px;
}

.hero-ai-input {
    flex: 1;
    border: none;
    outline: none;
    font-size: 1.15rem;
    color: #1a1a1a;
    background: transparent;
    padding: 10px 0;
    line-height: 1.5;
    min-width: 0;
}

.hero-ai-input::placeholder {
    color: #9ca3af;
    font-weight: 400;
}

.hero-ai-submit {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: none;
    background: #3d8b37;
    color: white !important;
    font-size: 1.1rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.hero-ai-submit:hover {
    background: #2d6a29;
    transform: scale(1.08);
    box-shadow: 0 4px 12px rgba(61, 139, 55, 0.4);
}

.hero-ai-meta {
    padding: 4px 20px 8px;
}

.hero-ai-hint {
    font-size: 0.75rem;
    color: #6b7280;
    letter-spacing: 0.01em;
}

/* Compact variant — single-row search box */
.hero-ai-box.hero-ai-box-compact {
    max-width: 900px;
    padding: 4px;
    border-radius: 50px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.10), 0 1px 4px rgba(0, 0, 0, 0.05);
}

.hero-ai-box-compact .hero-ai-input-wrapper {
    padding: 2px 4px 2px 16px;
}

.hero-ai-box-compact .hero-ai-input {
    font-size: 0.95rem;
    padding: 6px 0;
}

.hero-ai-box-compact .hero-ai-submit {
    width: 36px;
    height: 36px;
    font-size: 0.9rem;
}

/* Suggestion Chips */
.hero-ai-chip {
    display: inline-flex;
    align-items: center;
    padding: 8px 18px;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 24px;
    color: white;
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    backdrop-filter: blur(4px);
}

.hero-ai-chip:hover {
    background: rgba(255, 255, 255, 0.22);
    border-color: rgba(255, 255, 255, 0.5);
    transform: translateY(-1px);
}

.hero-ai-chip i {
    font-size: 0.75rem;
    opacity: 0.8;
}

@media (min-width: 1200px) {
    .display-4 {
        font-size: 3.4rem;
    }
}

/* Responsive */
@media (max-width: 768px) {
    .hero h1.display-4 {
        font-size: 1.75rem;
    }

    .hero-ai-box {
        border-radius: 16px;
    }

    .hero-ai-input {
        font-size: 1rem;
    }

    .hero-ai-chip {
        font-size: 0.8rem;
        padding: 6px 14px;
    }
}

/* Customer logo marquee */
.customer-marquee-track {
    overflow: hidden;
    width: 100%;
}

.customer-marquee-inner {
    display: flex;
    animation: customer-marquee-scroll 30s linear infinite;
    width: max-content;
}

.customer-marquee-item {
    flex-shrink: 0;
    padding: 0 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.customer-marquee-item img {
    max-height: 40px;
    max-width: 120px;
    object-fit: contain;
    filter: grayscale(100%);
    opacity: 0.7;
    transition: all 0.2s ease;
}

.customer-marquee-item img:hover {
    filter: none;
    opacity: 1;
}

@keyframes customer-marquee-scroll {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-50%);
    }
}

/* Legal / long-form content pages */
.legal-content h2 {
    font-size: 1.4rem;
    font-weight: 600;
    margin-top: 2rem;
    margin-bottom: 0.75rem;
    color: #1a1a2e;
}

.legal-content h3 {
    font-size: 1.15rem;
    font-weight: 600;
    margin-top: 1.5rem;
    margin-bottom: 0.5rem;
}

.legal-content p {
    margin-bottom: 1rem;
    line-height: 1.7;
    color: #495057;
}

.legal-content ul,
.legal-content ol {
    margin-bottom: 1rem;
    padding-left: 1.5rem;
}

.legal-content li {
    margin-bottom: 0.4rem;
    line-height: 1.6;
    color: #495057;
}

.legal-content a {
    color: var(--ma-green, #00a651);
    text-decoration: underline;
}

.legal-content table {
    width: 100%;
    margin-bottom: 1.5rem;
    border-collapse: collapse;
}

.legal-content table th,
.legal-content table td {
    padding: 0.5rem 0.75rem;
    border: 1px solid #dee2e6;
    font-size: 0.9rem;
}

.legal-content table th {
    background-color: #f8f9fa;
    font-weight: 600;
}

/* Tabbed content gallery */
.gallery-preview {
    transition: opacity 0.2s ease;
}

.gallery-item {
    transition: background-color 0.15s ease;
    cursor: pointer;
}

.gallery-item:hover {
    background-color: var(--bs-light);
}

.gallery-item-active {
    background-color: var(--bs-light) !important;
}

.gallery-item-active span {
    color: var(--bs-dark) !important;
    font-weight: 600 !important;
}

.gallery-item span {
    color: var(--bs-secondary);
}

/* ============================================
   ACCESSIBILITY — WCAG AA Contrast Fixes
   ============================================ */

/* Badge text on subtle backgrounds needs ≥ 4.5:1 contrast */
.badge.bg-success-subtle.text-success {
    color: #0d6832 !important;
}

.badge.bg-primary-subtle.text-primary {
    color: #15694a !important;
}

.badge.bg-warning-subtle.text-warning {
    color: #b85a1c !important;
}

/* text-muted on white/light backgrounds — darken for small text */
main .text-muted {
    color: #495057 !important;
}

/* ============================================
   COOKIE CONSENT BAR — GDPR
   ============================================ */

/* ── Sites: Typography & Visual Modes ─────────────────────── */

/* Elevated subheading text for section descriptions */
.site-lead {
    font-size: 1.15rem;
    line-height: 1.6;
    color: #6c757d;
    font-weight: 400;
}

/* Visual mode spacing overrides — applied via CSS cascade on .site-page-content wrapper */
.site-mode-utility .site-section,
.site-mode-utility>div>section {
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
}

.site-mode-balanced .site-section,
.site-mode-balanced>div>section {
    padding-top: 3rem;
    padding-bottom: 3rem;
}

.site-mode-editorial .site-section,
.site-mode-editorial>div>section {
    padding-top: 4rem;
    padding-bottom: 4rem;
}

.site-mode-executive .site-section,
.site-mode-executive>div>section {
    padding-top: 4rem;
    padding-bottom: 4rem;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

.site-mode-campaign .site-section,
.site-mode-campaign>div>section {
    padding-top: 3rem;
    padding-bottom: 3rem;
}

.cookie-consent-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(54, 58, 58, 0.95);
    backdrop-filter: blur(8px);
    z-index: 1040;
    transform: translateY(100%);
    transition: transform 0.3s ease;
}

/* Marketing card elevation — site-wide.
   Bootstrap's `shadow-sm` is too faint to give cards a clear edge on
   white sections, so cards in white-bg grids visually disappear. We
   strengthen the default shadow on every `.card.shadow-sm` inside a
   marketing section, and add a hover lift. The shadow is layered (a
   tight ambient + a wider drop) so cards read as elevated whether the
   parent section is white or bg-light.
   Scoped to `section .card.shadow-sm` so it applies only to cards
   placed inside section-level containers (the marketing pattern), not
   nav/header/footer cards. */
section .card.shadow-sm {
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04),
        0 8px 24px rgba(15, 23, 42, 0.08) !important;
    transition: box-shadow 0.25s ease, transform 0.25s ease;
}

section .card.shadow-sm:hover {
    box-shadow: 0 4px 8px rgba(15, 23, 42, 0.06),
        0 16px 40px rgba(15, 23, 42, 0.12) !important;
    transform: translateY(-2px);
}

.cookie-consent-bar.visible {
    transform: translateY(0);
}
/* ---------------------------------------------------------------------------
   Video embeds inside sanitized blog content.

   BlogPost#sanitize_html runs content through Rails' safe-list sanitizer, whose
   CSS scrubber drops `position`, `top`, and `left` from inline style attributes.
   That breaks the usual padding-top aspect-ratio hack (the box keeps its height
   but the iframe can no longer be absolutely positioned inside it, leaving a
   tall blank gap above a squashed player). `class` survives sanitization, so the
   responsive sizing lives here instead of in the emitted markup.
   --------------------------------------------------------------------------- */
.video-embed {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    margin: 1.5rem 0;
    border-radius: 0.5rem;
    overflow: hidden;
    background: #000;
}

.video-embed iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
}