.tiered-section {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 70px 20px;
    overflow: visible;
}

.tiered-container {
    width: 100%;
    overflow: visible;
}


/* =========================================================
   TITLE
   ========================================================= */

.tiered-title {
    margin: 0;
    text-align: center;

    color: #0b2447;

    font-size: 2.2rem;
    font-weight: 700;
    line-height: 1.2;
}

.tiered-title .highlight {
    color: #d71313;
}

.tiered-subtitle {
    max-width: 700px;

    margin: 14px auto 40px;

    color: #64748b;

    text-align: center;

    font-size: 1rem;
    line-height: 1.6;
}


/* =========================================================
   SCROLL VIEWPORT

   IMPORTANT:
   Horizontal scrolling belongs HERE.

   This allows 4, 5, 6+ cards to exist without breaking
   the desktop layout.
   ========================================================= */

.tiered-scroll-wrapper {
    width: 100%;

    display: block;

    overflow-x: auto;
    overflow-y: visible;

    -webkit-overflow-scrolling: touch;

    scrollbar-width: thin;
    scrollbar-color: #cbd5e1 #f8fafc;

    padding: 10px 4px 20px;
}


/* =========================================================
   GRID / CARD TRACK

   IMPORTANT:
   width: max-content means the track grows as cards are
   added.

   min-width: 100% keeps 1-3 cards centered/filling the
   available desktop space.

   More than 3 cards simply extend horizontally and scroll.
   ========================================================= */

.tiered-grid {
    display: flex;

    flex-wrap: nowrap;

    align-items: stretch;

    justify-content: flex-start;

    gap: 20px;

    width: max-content;

    min-width: 100%;

    overflow: visible;

    padding: 5px 4px 10px;
}


/* =========================================================
   CARD

   IMPORTANT — TOOLTIP STACKING FIX:
   The card NEVER moves on hover or when a tooltip is open.
   No transform, no translateY, no scale. Movement is what
   caused the card to drift up and cover the section header.

   Instead, stacking is handled purely with z-index:
     - Cards sit at a low, equal z-index (1) by default.
     - :hover bumps a card's z-index slightly so it renders
       above its neighbors in the same row.
     - :has(.tooltip.active) bumps it further so an open
       tooltip is never clipped or covered by the next card.

   Because position never changes, layout, scroll position,
   and the section above are completely unaffected.
   ========================================================= */

.tiered-card {
    position: relative;

    display: flex;
    flex-direction: column;

    width: 350px;
    min-width: 350px;

    flex: 0 0 350px;

    background: #ffffff;

    border: 1px solid #e2e8f0;

    border-radius: 8px;

    overflow: visible;

    z-index: 1;

    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}

/* Raise on hover — stacking only, no movement */

.tiered-card:hover {
    z-index: 100;

    border-color: #cbd5e1;

    box-shadow:
        0 8px 24px rgba(15, 23, 42, 0.08);
}

/* Raise further when it contains an open tooltip, so the
   tooltip clears neighboring cards regardless of hover state */

.tiered-card:has(.tooltip.active) {
    z-index: 10000;
}


/* =========================================================
   PLAN ACCENTS
   ========================================================= */

.tier-basic {
    border-top: 3px solid #64748b;
}

.tier-standard {
    border-top: 3px solid #d71313;
}

.tier-premium {
    border-top: 3px solid #475569;
}


/* =========================================================
   MOST POPULAR
   ========================================================= */

.tier-popular {
    position: absolute;

    top: 14px;
    right: 14px;

    padding: 4px 9px;

    background: #d71313;

    color: #ffffff;

    border-radius: 4px;

    font-size: 0.65rem;
    font-weight: 600;

    line-height: 1.2;

    z-index: 20;

    pointer-events: none;
}


/* =========================================================
   HEADER
   ========================================================= */

.tier-header {
    padding: 25px 24px 18px;

    border-bottom: 1px solid #f1f5f9;
}

.tier-badge {
    display: inline-block;

    margin-bottom: 12px;

    color: #64748b;

    font-size: 0.7rem;
    font-weight: 600;

    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.tier-standard .tier-badge {
    color: #d71313;
}

.tier-premium .tier-badge {
    color: #475569;
}

.tier-header h3 {
    margin: 0 0 12px;

    color: #0b2447;

    font-size: 1.35rem;
    font-weight: 700;

    line-height: 1.3;
}

.tier-price {
    color: #d71313;

    font-size: 1.7rem;
    font-weight: 700;

    line-height: 1.2;
}

.tier-price-unit {
    margin-top: 4px;

    color: #94a3b8;

    font-size: 0.75rem;
}


/* =========================================================
   BODY
   ========================================================= */

.tier-body {
    display: flex;
    flex-direction: column;

    flex: 1;

    padding: 22px 24px 24px;
}

.tier-label {
    margin: 0 0 18px;

    color: #475569;

    font-size: 0.72rem;
    font-weight: 700;

    text-transform: uppercase;
    letter-spacing: 0.5px;
}


/* =========================================================
   FEATURES
   ========================================================= */

.tier-features {
    display: flex;
    flex-direction: column;

    gap: 11px;

    margin: 0;
    padding: 0;

    list-style: none;
}

.tier-features li {
    display: flex;

    align-items: flex-start;

    gap: 9px;

    color: #334155;

    font-size: 0.84rem;

    line-height: 1.45;
}

.tier-icon {
    flex-shrink: 0;

    color: #16a34a;

    font-weight: 700;
}


/* =========================================================
   BEST FOR
   ========================================================= */

.tier-best {
    margin-top: 28px;

    padding-top: 18px;

    border-top: 1px solid #e2e8f0;
}

.tier-best span {
    display: block;

    margin-bottom: 5px;

    color: #64748b;

    font-size: 0.68rem;
    font-weight: 700;

    text-transform: uppercase;

    letter-spacing: 0.5px;
}

.tier-best p {
    margin: 0;

    color: #64748b;

    font-size: 0.8rem;

    line-height: 1.5;
}


/* =========================================================
   BUTTONS
   ========================================================= */

.tier-btn {
    display: block;

    width: 100%;

    margin-top: 22px;

    padding: 10px 16px;

    border: 1px solid #cbd5e1;

    border-radius: 5px;

    background: #ffffff;

    color: #0b2447;

    text-align: center;

    text-decoration: none;

    font-size: 0.85rem;
    font-weight: 600;

    cursor: pointer;

    transition:
        background 0.2s ease,
        border-color 0.2s ease,
        color 0.2s ease;
}

.tier-btn:hover {
    background: #f8fafc;

    border-color: #0b2447;
}

.tier-btn.primary {
    background: #d71313;

    border-color: #d71313;

    color: #ffffff;
}

.tier-btn.primary:hover {
    background: #b50f0f;

    border-color: #b50f0f;
}

.tier-btn.premium {
    background: #475569;

    border-color: #475569;

    color: #ffffff;
}

.tier-btn.premium:hover {
    background: #334155;

    border-color: #334155;
}


/* =========================================================
   TOOLTIP
   ========================================================= */

.tooltip {
    position: relative;

    display: inline-flex;

    align-items: center;

    flex-shrink: 0;

    margin-left: 2px;

    cursor: pointer;

    z-index: 10001;
}

.tooltip-icon {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    width: 16px;
    height: 16px;

    border: 1px solid #cbd5e1;

    border-radius: 50%;

    background: #ffffff;

    color: #64748b;

    font-size: 10px;
    font-weight: 700;

    line-height: 1;

    transition:
        background 0.15s ease,
        color 0.15s ease,
        border-color 0.15s ease;
}

.tooltip:hover .tooltip-icon,
.tooltip.active .tooltip-icon {
    border-color: #d71313;

    color: #d71313;
}


/* =========================================================
   TOOLTIP BOX

   The tooltip box itself floats above the card via z-index
   only (99999 / 100000). Combined with the card-level
   :has(.tooltip.active) bump above, this guarantees the
   tooltip clears neighboring cards without any element
   changing position.
   ========================================================= */

.tooltip::after {
    content: attr(data-tooltip);

    position: absolute;

    bottom: calc(100% + 9px);

    left: 50%;

    width: 190px;

    padding: 9px 10px;

    transform: translateX(-50%);

    background: #0b2447;

    color: #ffffff;

    border-radius: 5px;

    font-size: 0.7rem;
    font-weight: 400;

    line-height: 1.45;

    text-align: center;

    opacity: 0;

    visibility: hidden;

    pointer-events: none;

    z-index: 99999;

    box-sizing: border-box;
}

.tooltip::before {
    content: "";

    position: absolute;

    bottom: calc(100% + 3px);

    left: 50%;

    transform: translateX(-50%);

    border-left: 5px solid transparent;
    border-right: 5px solid transparent;

    border-top: 6px solid #0b2447;

    opacity: 0;

    visibility: hidden;

    pointer-events: none;

    z-index: 100000;
}


/* =========================================================
   ACTIVE TOOLTIP
   ========================================================= */

.tooltip.active::after,
.tooltip.active::before {
    opacity: 1;

    visibility: visible;
}


/* =========================================================
   LEFT TOOLTIP
   ========================================================= */

.tooltip.left::after {
    left: 0;

    transform: none;
}

.tooltip.left::before {
    left: 8px;

    transform: none;
}


/* =========================================================
   RIGHT TOOLTIP
   ========================================================= */

.tooltip.right::after {
    left: auto;

    right: 0;

    transform: none;
}

.tooltip.right::before {
    left: auto;

    right: 8px;

    transform: none;
}


/* =========================================================
   ADDONS
   ========================================================= */

.tier-addons {
    width: 100%;

    margin: 35px auto 0;

    padding: 25px;

    background: #ffffff;

    border: 1px solid #e2e8f0;

    border-radius: 8px;
}

.tier-addons h3 {
    margin: 0 0 6px;

    color: #0b2447;

    font-size: 1.1rem;
    font-weight: 700;
}

.tier-addons > p {
    margin: 0 0 20px;

    color: #64748b;

    font-size: 0.85rem;

    line-height: 1.5;
}

.addons-grid {
    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 12px;
}

.addon-item {
    display: flex;

    align-items: flex-start;

    gap: 10px;

    padding: 14px;

    background: #f8fafc;

    border: 1px solid #e2e8f0;

    border-radius: 6px;
}

.addon-icon {
    flex-shrink: 0;

    color: #d71313;

    font-weight: 700;

    font-size: 1rem;
}

.addon-content {
    min-width: 0;
}

.addon-title {
    margin: 0 0 3px;

    color: #0b2447;

    font-size: 0.82rem;
    font-weight: 600;
}

.addon-description {
    margin: 0;

    color: #64748b;

    font-size: 0.72rem;

    line-height: 1.4;
}

.addon-price {
    display: block;

    margin-top: 5px;

    color: #d71313;

    font-size: 0.75rem;
    font-weight: 700;
}


/* =========================================================
   PRICING NOTE
   ========================================================= */

.managed-it-pricing-note {
    max-width: 850px;

    margin: 30px auto 0;

    padding: 18px 20px;

    background: #f8fafc;

    border: 1px solid #e2e8f0;

    border-radius: 6px;

    color: #64748b;

    text-align: center;

    font-size: 0.78rem;

    line-height: 1.6;
}

.managed-it-pricing-note p {
    margin: 4px 0;
}

.managed-it-pricing-note strong {
    color: #334155;
}


/* =========================================================
   SCROLLBAR
   ========================================================= */

.tiered-scroll-wrapper::-webkit-scrollbar {
    height: 6px;
}

.tiered-scroll-wrapper::-webkit-scrollbar-track {
    background: #f1f5f9;

    border-radius: 6px;
}

.tiered-scroll-wrapper::-webkit-scrollbar-thumb {
    background: #cbd5e1;

    border-radius: 6px;
}

.tiered-scroll-wrapper::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}


/* =========================================================
   DESKTOP
   ========================================================= */

@media (min-width: 951px) {

    /*
       With 3 cards:
       they occupy the available width.

       With 4+ cards:
       the track becomes wider than the viewport and
       horizontal scrolling becomes available.
    */

    .tiered-grid {
        justify-content: center;
    }

    /*
       Once the content exceeds the viewport, justify-content
       cannot create unwanted spacing because the track itself
       is max-content.
    */

}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 950px) {

    .tiered-section {
        padding: 55px 16px;
    }

    .tiered-scroll-wrapper {
        justify-content: flex-start;

        overflow-x: auto;

        padding-left: 4px;
        padding-right: 4px;
    }

    .tiered-grid {
        justify-content: flex-start;

        gap: 16px;

        min-width: max-content;

        padding-bottom: 12px;

        scroll-snap-type: x mandatory;
    }

    .tiered-card {
        width: 310px;

        min-width: 310px;

        flex-basis: 310px;

        scroll-snap-align: start;
    }

    .addons-grid {
        grid-template-columns: repeat(2, 1fr);
    }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 600px) {

    .tiered-section {
        padding: 45px 14px;
    }

    .tiered-title {
        font-size: 1.75rem;
    }

    .tiered-subtitle {
        margin-bottom: 30px;

        font-size: 0.9rem;
    }

    .tiered-scroll-wrapper {
        padding-left: 2px;
        padding-right: 2px;
    }

    .tiered-grid {
        gap: 14px;

        scroll-snap-type: x mandatory;
    }

    .tiered-card {
        width: 285px;

        min-width: 285px;

        flex-basis: 285px;
    }

    .tier-header {
        padding: 22px 20px 16px;
    }

    .tier-body {
        padding: 20px;
    }

    .tier-price {
        font-size: 1.5rem;
    }

    .tier-features li {
        font-size: 0.8rem;
    }

    .tier-popular {
        top: 12px;
        right: 12px;

        font-size: 0.6rem;
    }

    .tier-addons {
        padding: 18px;
    }

    .addons-grid {
        grid-template-columns: 1fr;
    }

    /*
       Give mobile tooltip enough width but don't let it
       become ridiculously large.
    */

    .tooltip::after {
        width: 175px;

        padding: 8px;

        font-size: 0.68rem;
    }

}


/* =========================================================
   VERY SMALL MOBILE
   ========================================================= */

@media (max-width: 380px) {

    .tiered-card {
        width: 275px;

        min-width: 275px;

        flex-basis: 275px;
    }

    .tier-header h3 {
        font-size: 1.2rem;
    }

    .tier-price {
        font-size: 1.4rem;
    }

    .tier-features li {
        font-size: 0.76rem;
    }

}