:root {
    --ccms-red: #f3052b;
    --ccms-black: #000000;
    --ccms-white: #ffffff;
}

/* Utility */
.tracking-wide {
    letter-spacing: 0.15em;
}


/* Buttons */
.btn-ccms-red {
    background-color: var(--ccms-red);
    border-color: var(--ccms-red);
    color: #fff;
}

.btn-ccms-red:hover,
.btn-ccms-red:focus {
    background-color: #c90423;
    border-color: #c90423;
    color: #fff;
}

.btn-outline-ccms-red {
    background-color: transparent;
    border-color: var(--ccms-red);
    color: var(--ccms-red);
}

.btn-outline-ccms-red:hover,
.btn-outline-ccms-red:focus {
    background-color: var(--ccms-red);
    border-color: var(--ccms-red);
    color: #fff;
}

/* Plan cards: equal height with bottom-aligned CTA */
.plan-card {
    display: flex;
    flex-direction: column;
}

.plan-card .plan-cta {
    margin-top: auto;
}

.plan-badge {
    background: var(--ccms-red);
    color: #fff;
    font-size: 0.7rem;
    letter-spacing: 0.08em;
}

/* Hero */
.hero-section {
    background: var(--ccms-black);
    color: var(--ccms-white);
    padding: 4rem 0 3rem;
}

.hero-kicker {
    letter-spacing: 0.16em;
    text-transform: uppercase;
    font-size: 0.75rem;
    opacity: 0.8;
}

.hero-title {
    font-size: clamp(2rem, 4vw, 2.8rem);
    margin-top: 0.75rem;
    margin-bottom: 0.75rem;
}

.hero-title span {
    color: var(--ccms-red);
}

.hero-sub {
    max-width: 34rem;
    font-size: 0.98rem;
    opacity: 0.9;
}

.hero-card {
    background: #111111;
    border-radius: 1.25rem;
    border: 1px solid #2c2c2c;
}

/* Section headings */
.section-kicker {
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ccms-red);
    font-size: 0.75rem;
    font-weight: 600;
}

.section-title {
    font-size: 1.7rem;
}

/*Vendor Carousel */

.tech-carousel {
    background: #ffffff;
}

.tech-carousel-track {
    overflow: hidden;
}

.tech-carousel-strip {
    display: flex;
    gap: 3rem;
    will-change: transform;
    animation: ccms-marquee 22s linear infinite;
}

.tech-logo img {
    height: 60px;
    width: auto;
    transition: opacity 0.2s ease, filter 0.2s ease, transform 0.2s ease;
}

.tech-logo img:hover {
    filter: grayscale(0%);
    opacity: 1;
    transform: translateY(-1px);
}

@keyframes ccms-marquee {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}


/* Feature cards */
.feature-card {
    border-radius: 1rem;
    border: 1px solid #e4e4e4;
}

/* Plans section */
.plans-section {
    background: #f7f7f7;
}

/* Cookie banner */
.cookie-banner {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.94);
    color: #f5f5f5;
    padding: 0.75rem 1rem;
    z-index: 9999;
    font-size: 0.85rem;
}

.cookie-banner-inner {
    max-width: 1140px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.cookie-text a {
    color: #eee;
    text-decoration: underline;
}

.cookie-actions {
    white-space: nowrap;
}

/* Contact form */
.contact-card {
    border-radius: 1rem;
    border: 1px solid #e4e4e4;
}

.border-ccms-red {
    border-color: var(--ccms-red) !important;
}


/* Generic sections */
.section {
    position: relative;
}

.section--light {
    background: var(--ccms-white);
}

.section--muted {
    background: #fff5f7; /* light brand-tinted background to make sections stand out */
}

.section--accent {
    background: linear-gradient(135deg, #f3052b, #ff4663);
    color: var(--ccms-white);
}

.section--dark {
    background: #111111;
    color: var(--ccms-white);
}

/* Icon badges */
.icon-badge {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--ccms-red);
    color: var(--ccms-white);
    font-size: 1.3rem;
}

.icon-badge--outline {
    background: var(--ccms-red);
    border: 2px solid var(--ccms-red);
    color: var(--ccms-white);
}

/* Simple utility */
.text-ccms-red {
    color: var(--ccms-red) !important;
}


/* ==========================================================================
   Shared page system
   Subpages reuse the home page's section rhythm (kicker -> title -> lede)
   instead of the old flat .page-hero + wall-of-text layout.
   ========================================================================== */

/* Dark subpage hero, matching the home hero rather than a photo banner. */
.subpage-hero {
    background: var(--ccms-black);
    color: var(--ccms-white);
    padding: 3.5rem 0 3rem;
}

.subpage-hero .hero-title {
    font-size: clamp(1.8rem, 3.4vw, 2.5rem);
}

.subpage-hero .hero-sub {
    max-width: 40rem;
}

/* Breadcrumbs */
.breadcrumb-bar {
    background: #f7f7f7;
    border-bottom: 1px solid #e9e9e9;
    font-size: 0.8rem;
}

.breadcrumb-bar a {
    color: #555;
    text-decoration: none;
}

.breadcrumb-bar a:hover {
    color: var(--ccms-red);
    text-decoration: underline;
}

/* Section lede paragraph under a section title */
.section-lede {
    max-width: 46rem;
    font-size: 0.98rem;
}

/* ==========================================================================
   Pricing
   ========================================================================== */

.price-amount {
    font-size: 2.1rem;
    font-weight: 700;
    line-height: 1;
}

.price-term {
    font-size: 0.85rem;
    font-weight: 400;
}

.plan-card .plan-feature-list {
    list-style: none;
    padding-left: 0;
}

.plan-card .plan-feature-list li {
    position: relative;
    padding-left: 1.4rem;
    margin-bottom: 0.4rem;
}

.plan-card .plan-feature-list li::before {
    content: "\f00c";                 /* fa-check */
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    position: absolute;
    left: 0;
    top: 0.1rem;
    color: var(--ccms-red);
    font-size: 0.75rem;
}

/* The "Everything in X, plus:" lead-in is a heading, not a feature. */
.plan-card .plan-feature-list li.plan-feature-lead {
    padding-left: 0;
    font-weight: 600;
    color: #333;
}

.plan-card .plan-feature-list li.plan-feature-lead::before {
    content: none;
}

/* Taglines vary from one to two lines; reserve both so the price and spec
   rows stay on the same baseline across the three cards. */
.plan-card .plan-tagline,
.vm-card .plan-tagline {
    min-height: 2.6em;
}

/* Spec strip inside a plan card */
.plan-specs {
    border-top: 1px solid #ececec;
    border-bottom: 1px solid #ececec;
}

.plan-specs dt {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #888;
    font-weight: 600;
}

.plan-specs dd {
    font-size: 0.88rem;
    font-weight: 600;
    margin-bottom: 0;
}

/* Billing toggle (monthly / annual) */
.billing-toggle {
    display: inline-flex;
    background: #ececec;
    border-radius: 999px;
    padding: 0.25rem;
}

.billing-toggle button {
    border: 0;
    background: transparent;
    border-radius: 999px;
    padding: 0.35rem 1rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: #555;
    cursor: pointer;
}

.billing-toggle button.is-active {
    background: var(--ccms-red);
    color: #fff;
}

/* ==========================================================================
   Comparison table
   Scrolls inside its own container so the page body never scrolls sideways.
   ========================================================================== */

.table-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    /* The table's screen-reader-only cells use Bootstrap's .visually-hidden,
       which is position:absolute. Without a positioned ancestor here they
       resolve against the page and escape the scroll box, widening the whole
       document on narrow screens. */
    position: relative;
}

.compare-table {
    min-width: 720px;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 0.88rem;
}

.compare-table th,
.compare-table td {
    padding: 0.7rem 0.9rem;
    border-bottom: 1px solid #ececec;
    text-align: center;
    vertical-align: middle;
}

.compare-table thead th {
    background: var(--ccms-black);
    color: #fff;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.compare-table tbody th {
    text-align: left;
    font-weight: 600;
    background: #fafafa;
    white-space: nowrap;
}

.compare-table .col-featured {
    background: #fff5f7;
}

/* The featured column's pink tint is for the body cells only. In the header it
   would override the black bar and leave white text on pink (unreadable), so the
   header cell keeps the same black as its neighbours -- the pink body column and
   the card's "Most popular" badge already mark the featured plan. */
.compare-table thead th.col-featured {
    background: var(--ccms-black);
    color: #fff;
}

.compare-table i.fa-check { color: #1a9e4b; }
.compare-table i.fa-xmark { color: #c9c9c9; }

/* ==========================================================================
   Add-on and VM cards
   ========================================================================== */

.addon-card {
    border-radius: 1rem;
    border: 1px solid #e4e4e4;
    background: #fff;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.addon-card .addon-cta {
    margin-top: auto;
}

.addon-price {
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1;
}

.vm-card {
    border-radius: 1rem;
    border: 1px solid #e4e4e4;
    background: #fff;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.vm-card .vm-cta {
    margin-top: auto;
}

.os-price-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    padding: 0.5rem 0.75rem;
    border: 1px solid #ececec;
    border-radius: 0.5rem;
}

/* ==========================================================================
   Trust / stat band
   ========================================================================== */

.stat-value {
    font-size: 1.9rem;
    font-weight: 700;
    line-height: 1;
    color: var(--ccms-red);
}

.section--dark .stat-value {
    color: #fff;
}

.stat-label {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.09em;
    opacity: 0.75;
}

/* FAQ accordion, brand-tinted */
.faq-accordion .accordion-button:not(.collapsed) {
    background: #fff5f7;
    color: var(--ccms-black);
    box-shadow: none;
}

.faq-accordion .accordion-button:focus {
    border-color: var(--ccms-red);
    box-shadow: 0 0 0 0.2rem rgba(243, 5, 43, 0.15);
}

/* ==========================================================================
   Accessibility
   ========================================================================== */

.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 10000;
    background: var(--ccms-red);
    color: #fff;
    padding: 0.6rem 1rem;
    border-radius: 0 0 0.5rem 0;
}

.skip-link:focus {
    left: 0;
}

a:focus-visible,
button:focus-visible,
.btn:focus-visible {
    outline: 3px solid var(--ccms-red);
    outline-offset: 2px;
}

/* The muted brand tint fails contrast for small grey text; darken it. */
.section--muted .text-muted,
.plans-section .text-muted {
    color: #5c5c5c !important;
}

/* ==========================================================================
   Responsive
   The site previously had no media queries at all: the 75px logo, the hero,
   and the marquee were sized for desktop only.
   ========================================================================== */

.navbar-brand img {
    height: 75px;
    width: auto;
}

@media (max-width: 991.98px) {
    /* Stacked mobile nav: give the CTAs room and full width. */
    .navbar-nav .nav-item.ms-lg-3,
    .navbar-nav .nav-item.ms-lg-2 {
        margin-left: 0;
    }

    .navbar-collapse .btn {
        width: 100%;
        margin-top: 0.5rem;
    }

    .navbar-brand img {
        height: 52px;
    }
}

@media (max-width: 767.98px) {
    .hero-section,
    .subpage-hero {
        padding: 2.5rem 0 2rem;
    }

    .hero-sub {
        font-size: 0.95rem;
    }

    /* Full-width CTAs read better than side-by-side buttons on a phone. */
    .hero-section .btn,
    .section--accent .btn {
        width: 100%;
    }

    .section-title {
        font-size: 1.4rem;
    }

    .price-amount {
        font-size: 1.8rem;
    }

    .tech-logo img {
        height: 42px;
    }

    .tech-carousel-strip {
        gap: 2rem;
    }

    .cookie-banner-inner {
        flex-direction: column;
        align-items: stretch;
    }

    .cookie-actions {
        display: flex;
        gap: 0.5rem;
    }

    .cookie-actions .btn {
        flex: 1;
        margin-right: 0 !important;
    }

    .stat-value {
        font-size: 1.5rem;
    }
}

@media (max-width: 575.98px) {
    .icon-badge {
        width: 44px;
        height: 44px;
        font-size: 1.1rem;
    }

    .plan-badge {
        font-size: 0.62rem;
    }
}

/* Respect reduced-motion: the marquee is decorative. */
@media (prefers-reduced-motion: reduce) {
    .tech-carousel-strip {
        animation: none;
    }

    * {
        scroll-behavior: auto !important;
    }
}