.savings-banner {
    margin: 10px 40px 0 40px !important;
}

.yachtwave-pricing * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.yachtwave-pricing .savings-banner {
    background: #13CE8B;
    color: white;
    text-align: center;
    padding: 12px 0;
    margin: 0 auto;
    font-weight: 500;
    font-size: 1rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    max-width: 1400px;
    margin-left: auto;
    margin-right: auto;
    z-index: 99;
}

.yachtwave-pricing {
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    background: white;
    padding: 0;
}

.yachtwave-pricing .container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px 20px 20px;
}

.yachtwave-pricing h1 {
    text-align: center;
    color: #333;
    font-size: 3rem;
    margin-bottom: 30px;
}

.yachtwave-pricing .pricing-toggle {
    display: flex;
    justify-content: center;
    margin: 10px 0 10px 0;
    z-index: 100;
    padding: 5px 0;
}

.yachtwave-pricing .toggle-container {
    display: flex;
    align-items: center;
    background: #f5f5f5;
    border-radius: 4px;
    padding: 4px;
    border: 1px solid #ddd;
}

.yachtwave-pricing .toggle-option {
    padding: 12px 24px;
    cursor: pointer;
    border-radius: 3px;
    transition: all 0.3s ease;
    font-weight: 500;
    color: #666;
}

.yachtwave-pricing .toggle-option.active {
    background: #0478CC;
    color: white;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.yachtwave-pricing .pricing-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 6px;
    margin-top: 10px;
    max-width: 1400px;
    margin-left: auto;
    margin-right: auto;
}

/* Adjust grid when columns are hidden */
.yachtwave-pricing.hide-plus:not(.hide-lite) .pricing-grid {
    grid-template-columns: repeat(4, 1fr);
}

.yachtwave-pricing.hide-lite:not(.hide-plus) .pricing-grid {
    grid-template-columns: repeat(4, 1fr);
}

/* 4-column layout (Personal / Pro / Ultimate / Operations): narrower cards, still
   centred — the extra room falls to the left and right margins. The class names are
   historic (they hid the retired Plus and Lite tiers); this pair is simply the live
   /pricing layout. Was 3 columns with a 28px gap until the Operations card was added
   (2026-09-06) — the gutter pays for the fourth card, the outer margins don't, so the
   row keeps lining up with the feature-matrix card below it. */
.yachtwave-pricing.hide-plus.hide-lite .pricing-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
    max-width: 1200px;
    padding: 0 50px;
}

/* Four cards across is ~250px each, which is narrower than the button label
   "START FREE TRIAL" wants at its default padding. Trim the padding rather than the
   type, so the label stays on one line without shrinking below the other cards'. */
.yachtwave-pricing.hide-plus.hide-lite .select-btn {
    padding: 15px 10px;
    font-size: 0.92rem;
}

.yachtwave-pricing .enterprise-row {
    grid-column: 1 / -1;
    margin-top: 0;
    padding: 30px 20px 20px 20px !important;
}

.yachtwave-pricing .enterprise-content {
    display: flex;
    gap: 30px;
    align-items: stretch;
    padding: 0 15px;
    min-height: 120px;
}

.yachtwave-pricing .enterprise-left,
.yachtwave-pricing .enterprise-right {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.yachtwave-pricing .enterprise-left {
    justify-content: flex-start;
}

.yachtwave-pricing .enterprise-left .features {
    margin-bottom: 0;
    padding-bottom: 0;
}

.yachtwave-pricing .enterprise-right {
    text-align: center;
    justify-content: center;
    gap: 8px;
}

.yachtwave-pricing .enterprise-description {
    font-size: 0.85rem;
    color: #333;
    line-height: 1.3;
    margin: 0;
    padding: 0;
}

.yachtwave-pricing .enterprise-btn {
    max-width: 180px;
    padding: 12px 20px;
    font-size: 0.99rem;
    margin: 0 auto;
    align-self: center;
}

.yachtwave-pricing .enterprise-features {
    text-align: left;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2px 10px;
}

.yachtwave-pricing .enterprise-features li {
    padding: 2px 0;
    margin: 0;
}

.yachtwave-pricing .enterprise-features li:first-child {
    grid-column: 1 / -1;
    font-weight: 600;
}

.yachtwave-pricing .enterprise-features li:last-child {
    grid-column: 1 / -1;
    font-size: 0.7rem;
    color: #999;
    margin-top: 10px;
}

.yachtwave-pricing .enterprise-header {
    flex-direction: row !important;
    gap: 8px;
    justify-content: center;
}

/* Feature flags for hiding columns */
.yachtwave-pricing.hide-plus .personal-plus-column,
.yachtwave-pricing.hide-lite .fleet-lite-column {
    display: none;
}

.yachtwave-pricing .pricing-card {
    background: white;
    border-radius: 3px;
    padding: 30px 20px 15px 20px;
    border: 2px solid #e0e0e0;
    transition: transform 0.3s ease, border-color 0.3s ease;
    position: relative;
    height: 100%;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.yachtwave-pricing .pricing-card:hover {
    transform: translateY(-5px);
    border-color: #0478CC;
}

.yachtwave-pricing .plan-name {
    font-size: 1.4rem;
    font-weight: 600;
    color: white;
    text-align: center;
    text-transform: uppercase;
    background: #0478CC;
    padding: 12px;
    margin: -30px -20px 20px;
    border-radius: 3px 3px 0 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

/* Personal plans use lighter blue */
.yachtwave-pricing .personal-plan .plan-name {
    background: #4AA6E8;
}

.yachtwave-pricing .plan-edition {
    font-size: 1.1rem;
    font-weight: 300;
    opacity: 0.9;
}

.yachtwave-pricing .enterprise-row .plan-edition {
    font-size: 1.4rem;
}

.yachtwave-pricing .price {
    text-align: center;
    margin-bottom: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* 2.5rem until the fourth card landed (2026-09-06). Cards are 252px wide now, not
   335px, and at the old size the Operations card's word-value amount ran nearly the full
   width of its card and read louder than the figures it sits beside. Reduced for all four
   so the row stays even. */
.yachtwave-pricing .price-amount {
    font-size: 2rem;
    font-weight: 600;
    color: #0478CC;
}

/* The Operations card's amount is a word ("CUSTOM"), not a figure. At the shared 600 it
   reads lighter than the numerals beside it — digits carry more ink per character — so it
   takes one step up to sit level in the row (owner, 2026-09-06). */
.yachtwave-pricing .price-amount.custom-amount {
    font-weight: 700;
}

.yachtwave-pricing .price-period {
    font-size: 0.9rem;
    color: #4B5563;
    margin-top: 5px;
    font-weight: 500;
}

.yachtwave-pricing .price-description {
    font-size: 0.85rem;
    color: #6B7280;
    text-align: center;
    margin: 2px 0 0 0;
    line-height: 1.4;
    min-height: 4rem;
}

.yachtwave-pricing .features {
    list-style: none;
    margin-bottom: 20px;
    flex-grow: 1;
}

.yachtwave-pricing .features li {
    padding: 4px 0;
    border-bottom: 1px solid #f0f0f0;
    display: flex;
    align-items: center;
    font-size: 0.75rem;
}

.yachtwave-pricing .features li:last-child {
    border-bottom: none;
}

.yachtwave-pricing .check {
    color: #13CE8B;
    font-weight: 600;
    margin-right: 10px;
    font-size: 1.2rem;
}

.yachtwave-pricing .trial-badge {
    background: #FA884C;
    color: white;
    text-align: center;
    padding: 10px 12px;
    font-size: 0.85rem;
    font-weight: 700;
    border-radius: 0;
    margin: -20px -20px 20px -20px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.yachtwave-pricing .select-btn {
    width: 100%;
    padding: 15px 30px;
    background: #0478CC;
    color: white;
    border: none;
    border-radius: 4px;
    font-size: 0.99rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    margin-top: auto;
    text-transform: uppercase;
}

.yachtwave-pricing .select-btn:hover {
    transform: translateY(-2px);
}

.yachtwave-pricing .select-btn:active {
    background: #4AA6E8;
    transform: translateY(0);
}

@media (max-width: 1100px) {
    .yachtwave-pricing .pricing-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }

    .yachtwave-pricing.hide-plus:not(.hide-lite) .pricing-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }

    .yachtwave-pricing.hide-lite:not(.hide-plus) .pricing-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }

    .yachtwave-pricing.hide-plus.hide-lite .pricing-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
        padding: 0;
    }

    /* Enterprise in "column mode" - when there's an odd number of visible columns */
    .yachtwave-pricing:not(.hide-plus):not(.hide-lite) .enterprise-row,
    .yachtwave-pricing.hide-plus.hide-lite .enterprise-row {
        /* Style as a regular column */
        background: white;
        border-radius: 3px;
        border: 2px solid #e0e0e0;
        margin-top: 0;
        padding: 30px 20px 15px 20px !important;
        display: flex;
        flex-direction: column;
        height: 100%;
    }

    .yachtwave-pricing:not(.hide-plus):not(.hide-lite) .enterprise-header,
    .yachtwave-pricing.hide-plus.hide-lite .enterprise-header {
        background: #0478CC;
        color: white;
        text-align: center;
        padding: 12px;
        margin: -30px -20px 20px;
        border-radius: 3px 3px 0 0;
        flex-direction: column !important;
        gap: 4px;
        font-size: 1.4rem;
        font-weight: 600;
        text-transform: uppercase;
    }

    /* Add price-like styling for enterprise */
    .yachtwave-pricing:not(.hide-plus):not(.hide-lite) .enterprise-row .enterprise-description,
    .yachtwave-pricing.hide-plus.hide-lite .enterprise-row .enterprise-description {
        font-size: 0.85rem;
        color: #6B7280;
        text-align: center;
        margin: 2px 0 15px 0;
        line-height: 1.4;
        min-height: 5.5rem;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .yachtwave-pricing:not(.hide-plus):not(.hide-lite) .enterprise-content,
    .yachtwave-pricing.hide-plus.hide-lite .enterprise-content {
        flex-direction: column;
        gap: 0;
        padding: 0;
        flex-grow: 1;
        display: flex;
    }

    .yachtwave-pricing:not(.hide-plus):not(.hide-lite) .enterprise-left,
    .yachtwave-pricing.hide-plus.hide-lite .enterprise-left {
        flex-grow: 1;
        margin-bottom: 15px;
    }

    .yachtwave-pricing:not(.hide-plus):not(.hide-lite) .enterprise-right,
    .yachtwave-pricing.hide-plus.hide-lite .enterprise-right {
        margin-top: auto;
    }

    .yachtwave-pricing:not(.hide-plus):not(.hide-lite) .enterprise-features,
    .yachtwave-pricing.hide-plus.hide-lite .enterprise-features {
        list-style: none;
        margin-bottom: 15px;
        flex-grow: 1;
        display: block;
    }

    .yachtwave-pricing:not(.hide-plus):not(.hide-lite) .enterprise-features li,
    .yachtwave-pricing.hide-plus.hide-lite .enterprise-features li {
        padding: 4px 0;
        border-bottom: 1px solid #f0f0f0;
        display: flex;
        align-items: center;
        font-size: 0.75rem;
    }

    .yachtwave-pricing:not(.hide-plus):not(.hide-lite) .enterprise-btn,
    .yachtwave-pricing.hide-plus.hide-lite .enterprise-btn {
        width: 100%;
        padding: 15px 30px;
        background: #0478CC;
        color: white;
        border: none;
        border-radius: 4px;
        font-size: 0.99rem;
        font-weight: 600;
        cursor: pointer;
        transition: all 0.3s ease;
        margin-top: auto;
        text-transform: uppercase;
    }

    /* Enterprise in "row mode" - when there's an even number of visible columns */
    .yachtwave-pricing.hide-plus:not(.hide-lite) .enterprise-row,
    .yachtwave-pricing.hide-lite:not(.hide-plus) .enterprise-row {
        /* Keep original full-width row styling */
        grid-column: 1 / -1;
        background: transparent;
        border: 2px solid #e0e0e0;
        border-radius: 3px;
    }
}

@media (max-width: 768px) {
    .yachtwave-pricing .enterprise-content {
        flex-direction: column;
        gap: 15px;
    }

    .yachtwave-pricing .enterprise-left,
    .yachtwave-pricing .enterprise-right {
        text-align: center;
    }
}

@media (max-width: 600px) {
    .yachtwave-pricing .pricing-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .yachtwave-pricing.hide-plus:not(.hide-lite) .pricing-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .yachtwave-pricing.hide-lite:not(.hide-plus) .pricing-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .yachtwave-pricing.hide-plus.hide-lite .pricing-grid {
        grid-template-columns: 1fr;
        gap: 20px;
        padding: 0;
    }

    .yachtwave-pricing .savings-banner {
        padding: 12px 20px;
    }

    .yachtwave-pricing h1 {
        font-size: 2rem;
    }
    
    .yachtwave-pricing .plan-name {
        font-size: 1.05rem;
    }
    
    /* One card per row on phones, so the figures have the room to go back up. */
    .yachtwave-pricing .price-amount {
        font-size: 2.4rem;
    }
    
    .yachtwave-pricing .container {
        padding: 20px 15px;
    }
}