/* ---------------------------------------------------------------------------
   ModusBill marketing site
   Palette is taken straight off the logo: deep navy, gold rule, charcoal text.
   Bootstrap 5.3 supplies the grid and components; everything here is the brand
   layer on top of it.
   --------------------------------------------------------------------------- */

:root {
    --mb-navy: #123a5e;
    --mb-navy-deep: #0b2740;
    --mb-navy-soft: #1b5183;
    --mb-gold: #c8a75b;
    --mb-gold-light: #dcc28a;
    --mb-charcoal: #2f3033;
    --mb-body: #4b5058;
    --mb-surface: #ffffff;
    --mb-surface-alt: #f6f7f9;
    --mb-border: #e3e6ea;
    --mb-radius: 14px;
    --mb-shadow: 0 10px 30px rgba(18, 58, 94, .08);
    --mb-shadow-lg: 0 18px 48px rgba(18, 58, 94, .14);
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, Tahoma, Geneva, Verdana, sans-serif;
    color: var(--mb-body);
    background-color: var(--mb-surface);
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, .mb-display {
    color: var(--mb-charcoal);
    font-weight: 700;
    letter-spacing: -.015em;
}

/* Keyboard users get to the content without tabbing the whole navbar. */
.skip-link {
    position: absolute;
    left: -999px;
    top: 0;
    z-index: 2000;
    background: var(--mb-navy);
    color: #fff;
    padding: .6rem 1rem;
    border-radius: 0 0 var(--mb-radius) 0;
}

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

/* --- Navbar ------------------------------------------------------------- */

.mb-navbar {
    background: rgba(255, 255, 255, .92);
    backdrop-filter: saturate(180%) blur(10px);
    border-bottom: 1px solid var(--mb-border);
    padding-block: .6rem;
}

.mb-logo {
    height: 42px;
    width: auto;
    max-width: 240px;
    object-fit: contain;
}

.mb-logo-footer {
    height: 40px;
    /* The logo is drawn for a light ground; on the navy footer it is knocked back to
       white so the wordmark stays legible without shipping a second asset. */
    filter: brightness(0) invert(1);
    opacity: .95;
}

.mb-navbar .nav-link {
    color: var(--mb-charcoal);
    font-weight: 600;
    padding-inline: .9rem;
}

.mb-navbar .nav-link:hover,
.mb-navbar .nav-link:focus {
    color: var(--mb-navy);
}

/* --- Buttons ------------------------------------------------------------ */

.btn-navy,
.btn-gold,
.btn-outline-navy {
    font-weight: 600;
    border-radius: 10px;
    padding: .7rem 1.5rem;
}

.btn-sm.btn-navy,
.btn-sm.btn-gold,
.btn-sm.btn-outline-navy {
    padding: .45rem 1.1rem;
}

.btn-navy {
    background: var(--mb-navy);
    border: 1px solid var(--mb-navy);
    color: #fff;
}

.btn-navy:hover,
.btn-navy:focus {
    background: var(--mb-navy-deep);
    border-color: var(--mb-navy-deep);
    color: #fff;
}

.btn-gold {
    background: var(--mb-gold);
    border: 1px solid var(--mb-gold);
    color: #23262b;
}

.btn-gold:hover,
.btn-gold:focus {
    background: var(--mb-gold-light);
    border-color: var(--mb-gold-light);
    color: #23262b;
}

.btn-outline-navy {
    border: 1px solid var(--mb-navy);
    color: var(--mb-navy);
    background: transparent;
}

.btn-outline-navy:hover,
.btn-outline-navy:focus {
    background: var(--mb-navy);
    color: #fff;
}

.btn-outline-light-navy {
    border: 1px solid rgba(255, 255, 255, .6);
    color: #fff;
    font-weight: 600;
    border-radius: 10px;
    padding: .7rem 1.5rem;
}

.btn-outline-light-navy:hover,
.btn-outline-light-navy:focus {
    background: #fff;
    color: var(--mb-navy);
}

/* --- Sections ----------------------------------------------------------- */

.mb-section {
    padding-block: clamp(3.5rem, 7vw, 6rem);
}

.mb-section-alt {
    background: var(--mb-surface-alt);
}

.mb-eyebrow {
    color: var(--mb-navy);
    font-weight: 700;
    font-size: .82rem;
    letter-spacing: .16em;
    text-transform: uppercase;
    margin-bottom: .75rem;
}

.mb-eyebrow-gold {
    color: var(--mb-gold);
}

.mb-lead {
    font-size: 1.1rem;
    line-height: 1.7;
}

/* The gold rule under the wordmark in the logo, reused as a section accent. */
.mb-rule {
    width: 64px;
    height: 3px;
    background: var(--mb-gold);
    border-radius: 2px;
    margin-bottom: 1.5rem;
}

.mb-rule-center {
    margin-inline: auto;
}

/* --- Hero --------------------------------------------------------------- */

.mb-hero {
    background: linear-gradient(135deg, var(--mb-navy-deep) 0%, var(--mb-navy) 55%, var(--mb-navy-soft) 100%);
    color: rgba(255, 255, 255, .88);
    padding-block: clamp(4rem, 9vw, 7rem);
    position: relative;
    overflow: hidden;
}

/* Echoes the ascending arrow in the mark without competing with the copy. */
.mb-hero::after {
    content: "";
    position: absolute;
    inset: auto -10% -40% 55%;
    height: 120%;
    background: linear-gradient(120deg, transparent 45%, rgba(200, 167, 91, .16) 46%, rgba(200, 167, 91, .16) 52%, transparent 53%);
    transform: rotate(-8deg);
    pointer-events: none;
}

.mb-hero h1 {
    color: #fff;
    font-size: clamp(2.1rem, 4.6vw, 3.4rem);
    line-height: 1.12;
}

.mb-hero .mb-lead {
    color: rgba(255, 255, 255, .82);
    max-width: 34rem;
}

.mb-hero-highlight {
    color: var(--mb-gold-light);
}

.mb-hero-note {
    color: rgba(255, 255, 255, .62);
    font-size: .9rem;
}

/* The mock invoice card floating beside the hero copy. */
.mb-hero-card {
    background: #fff;
    border-radius: 18px;
    box-shadow: var(--mb-shadow-lg);
    color: var(--mb-body);
    padding: 1.5rem;
    position: relative;
    z-index: 1;
}

.mb-hero-card-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    border-bottom: 1px solid var(--mb-border);
    padding-bottom: .9rem;
    margin-bottom: .9rem;
}

.mb-hero-card .mb-row {
    display: flex;
    justify-content: space-between;
    padding-block: .45rem;
    font-size: .92rem;
}

.mb-hero-card .mb-row + .mb-row {
    border-top: 1px dashed var(--mb-border);
}

.mb-hero-card .mb-subtotal {
    border-top: 1px solid var(--mb-border);
    margin-top: .4rem;
    padding-top: .6rem;
    font-weight: 600;
    color: var(--mb-charcoal);
}

.mb-hero-card .mb-total {
    border-top: 2px solid var(--mb-charcoal);
    margin-top: .6rem;
    padding-top: .7rem;
    font-weight: 700;
    color: var(--mb-charcoal);
    font-size: 1.05rem;
}

/* --- Feature cards ------------------------------------------------------ */

.mb-card {
    background: var(--mb-surface);
    border: 1px solid var(--mb-border);
    border-radius: var(--mb-radius);
    padding: 1.75rem;
    height: 100%;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.mb-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--mb-shadow);
    border-color: #cfd6de;
}

.mb-card h3 {
    font-size: 1.12rem;
    margin-bottom: .5rem;
}

.mb-card p {
    margin-bottom: 0;
    font-size: .96rem;
    line-height: 1.65;
}

.mb-icon {
    width: 46px;
    height: 46px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.35rem;
    background: rgba(18, 58, 94, .08);
    color: var(--mb-navy);
    margin-bottom: 1.1rem;
}

.mb-icon-gold {
    background: rgba(200, 167, 91, .18);
    color: #9a7c33;
}

/* --- Numbered "how it works" steps -------------------------------------- */

.mb-step-number {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--mb-navy);
    color: #fff;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1rem;
}

/* --- Pricing ------------------------------------------------------------ */

/* Monthly/yearly switch. The radios carry the state and stay in the accessibility tree —
   they are moved out of sight, not hidden — so the control is a real pair of radio buttons
   to a screen reader and to the keyboard, and works with no JavaScript at all. */
.mb-billing-input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.mb-billing-switch {
    display: flex;
    justify-content: center;
    gap: .25rem;
    width: fit-content;
    margin: 0 auto 2.75rem;
    padding: .3rem;
    background: rgba(18, 58, 94, .07);
    border-radius: 999px;
}

.mb-billing-switch label {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .55rem 1.4rem;
    border-radius: 999px;
    font-weight: 600;
    color: var(--mb-navy);
    cursor: pointer;
    transition: background .18s ease, box-shadow .18s ease;
}

#mb-billing-monthly:checked ~ .mb-billing-switch label[for="mb-billing-monthly"],
#mb-billing-yearly:checked ~ .mb-billing-switch label[for="mb-billing-yearly"] {
    background: #fff;
    color: var(--mb-charcoal);
    box-shadow: var(--mb-shadow);
}

.mb-billing-input:focus-visible ~ .mb-billing-switch {
    outline: 2px solid var(--mb-navy);
    outline-offset: 3px;
}

/* Both prices ship in the markup; the checked radio decides which one is on screen. The pair
   of selectors covers prices that are direct siblings of the radios and ones nested in cards. */
#mb-billing-monthly:checked ~ .mb-price-yearly,
#mb-billing-monthly:checked ~ * .mb-price-yearly,
#mb-billing-yearly:checked ~ .mb-price-monthly,
#mb-billing-yearly:checked ~ * .mb-price-monthly {
    display: none;
}

.mb-save-pill {
    background: var(--mb-gold);
    color: #23262b;
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    padding: .2rem .55rem;
    border-radius: 999px;
    white-space: nowrap;
}

.mb-trial-note {
    display: inline-flex;
    align-items: center;
    background: rgba(200, 167, 91, .16);
    border: 1px solid rgba(200, 167, 91, .5);
    color: var(--mb-charcoal);
    font-weight: 600;
    font-size: .95rem;
    padding: .5rem 1.1rem;
    border-radius: 999px;
}

/* The hero is a navy gradient, where the charcoal above would be dark on dark. White carries
   the sentence and the gold is left to the icon and the border, so the pill still reads as an
   accent rather than turning into a plain white chip. */
.mb-hero .mb-trial-note {
    background: rgba(200, 167, 91, .18);
    border-color: rgba(200, 167, 91, .55);
    color: #fff;
}

.mb-hero .mb-trial-note i {
    color: var(--mb-gold-light);
}

.mb-price-card {
    background: #fff;
    border: 1px solid var(--mb-border);
    border-radius: 18px;
    padding: 2rem 1.75rem;
    height: 100%;
    display: flex;
    flex-direction: column;
    transition: box-shadow .18s ease, transform .18s ease;
}

.mb-price-card:hover {
    box-shadow: var(--mb-shadow);
    transform: translateY(-3px);
}

.mb-price-card.is-featured {
    border: 2px solid var(--mb-gold);
    box-shadow: var(--mb-shadow);
}

.mb-price-badge {
    position: absolute;
    top: -.85rem;
    left: 50%;
    transform: translateX(-50%);
    background: var(--mb-gold);
    color: #23262b;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    padding: .3rem .85rem;
    border-radius: 999px;
    white-space: nowrap;
}

.mb-price-amount {
    font-size: 3rem;
    font-weight: 800;
    color: var(--mb-charcoal);
    line-height: 1;
}

.mb-price-currency {
    font-size: 1.4rem;
    font-weight: 700;
    vertical-align: super;
    color: var(--mb-charcoal);
}

.mb-price-period {
    color: var(--mb-body);
    font-size: .92rem;
}

.mb-price-alt {
    color: var(--mb-body);
    font-size: .85rem;
    line-height: 1.45;
    margin-top: .6rem;
}

.mb-price-range {
    display: inline-block;
    background: rgba(18, 58, 94, .07);
    color: var(--mb-navy);
    font-weight: 600;
    font-size: .85rem;
    padding: .3rem .8rem;
    border-radius: 999px;
}

.mb-check-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.mb-check-list li {
    position: relative;
    padding-left: 1.75rem;
    margin-bottom: .6rem;
    font-size: .95rem;
}

.mb-check-list li::before {
    content: "\F26E"; /* bootstrap-icons check-lg */
    font-family: 'bootstrap-icons';
    position: absolute;
    left: 0;
    top: 0;
    color: var(--mb-gold);
    font-size: .95rem;
}

/* --- Seat calculator ---------------------------------------------------- */

.mb-calculator {
    background: linear-gradient(135deg, var(--mb-navy-deep), var(--mb-navy));
    border-radius: 18px;
    color: #fff;
    padding: clamp(1.75rem, 4vw, 2.75rem);
}

.mb-calculator label {
    color: rgba(255, 255, 255, .85);
    font-weight: 600;
}

/* Bootstrap paints the range thumb its own blue with an explicit background-color, which
   beats accent-color; the vendor pseudo-elements are the only way to reach it. */
.mb-calculator .form-range::-webkit-slider-thumb {
    background-color: var(--mb-gold);
}

.mb-calculator .form-range::-moz-range-thumb {
    background-color: var(--mb-gold);
}

.mb-calculator .form-range::-webkit-slider-runnable-track {
    background-color: rgba(255, 255, 255, .35);
}

.mb-calculator .form-range::-moz-range-track {
    background-color: rgba(255, 255, 255, .35);
}

.mb-calc-total {
    font-size: clamp(2.2rem, 5vw, 3rem);
    font-weight: 800;
    color: #fff;
    line-height: 1.1;
}

.mb-calc-meta {
    color: rgba(255, 255, 255, .78);
}

.mb-calc-savings {
    color: var(--mb-gold-light);
    font-weight: 600;
    font-size: .92rem;
}

.mb-calc-tier {
    display: inline-block;
    background: rgba(200, 167, 91, .2);
    border: 1px solid rgba(200, 167, 91, .5);
    color: var(--mb-gold-light);
    font-weight: 600;
    font-size: .85rem;
    padding: .25rem .8rem;
    border-radius: 999px;
}

.mb-seat-input {
    max-width: 8rem;
}

/* --- Forms -------------------------------------------------------------- */

.mb-form-card {
    background: #fff;
    border: 1px solid var(--mb-border);
    border-radius: 18px;
    box-shadow: var(--mb-shadow);
    padding: clamp(1.5rem, 4vw, 2.5rem);
}

.form-control,
.form-select {
    border-radius: 10px;
    border-color: #d8dde3;
    padding: .65rem .9rem;
}

.form-control:focus,
.form-select:focus {
    border-color: var(--mb-navy-soft);
    box-shadow: 0 0 0 .2rem rgba(18, 58, 94, .12);
}

.form-label {
    font-weight: 600;
    color: var(--mb-charcoal);
    margin-bottom: .35rem;
}

/* Honeypot: off-screen rather than display:none, because some bots skip hidden
   inputs but happily fill anything still in the layout. Hidden from assistive
   technology so a screen-reader user is never asked to fill it. */
.mb-honeypot {
    position: absolute;
    left: -5000px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* --- CTA band ----------------------------------------------------------- */

.mb-cta {
    background: linear-gradient(135deg, var(--mb-navy) 0%, var(--mb-navy-deep) 100%);
    color: #fff;
    padding-block: clamp(3rem, 6vw, 4.5rem);
}

.mb-cta h2 {
    color: #fff;
}

.mb-cta p {
    color: rgba(255, 255, 255, .8);
}

/* --- FAQ ---------------------------------------------------------------- */

.accordion-button:not(.collapsed) {
    background: rgba(18, 58, 94, .06);
    color: var(--mb-navy);
    box-shadow: none;
}

.accordion-button:focus {
    box-shadow: 0 0 0 .2rem rgba(18, 58, 94, .12);
}

.accordion-item {
    border-color: var(--mb-border);
}

/* --- Footer ------------------------------------------------------------- */

.mb-footer {
    background: var(--mb-navy-deep);
    color: rgba(255, 255, 255, .72);
    padding-block: 3rem 2rem;
    font-size: .94rem;
}

.mb-footer-heading {
    color: #fff;
    font-size: .82rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    margin-bottom: .9rem;
}

.mb-footer a {
    color: rgba(255, 255, 255, .72);
    text-decoration: none;
    line-height: 2;
}

.mb-footer a:hover,
.mb-footer a:focus {
    color: var(--mb-gold-light);
}

.mb-footer-blurb {
    max-width: 24rem;
    line-height: 1.7;
}

.mb-footer-rule {
    border-color: rgba(255, 255, 255, .15);
    margin-block: 2rem 1.25rem;
}

/* --- Motion ------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    .mb-card,
    .mb-price-card {
        transition: none;
    }

    .mb-card:hover,
    .mb-price-card:hover {
        transform: none;
    }
}

/* Guides and comparison pages ------------------------------------------------------ */

/* A card used as a link keeps the text colour of a card, not of a link. */
a.mb-card,
a.mb-card:hover {
    color: inherit;
}

a.mb-card h2 {
    font-size: 1.12rem;
    margin-bottom: .5rem;
}

.mb-comparison th,
.mb-comparison td {
    vertical-align: top;
    font-size: .95rem;
    line-height: 1.55;
}

.mb-comparison thead th {
    background: var(--mb-surface);
    border-bottom: 2px solid var(--mb-border);
}

.mb-comparison thead th:nth-child(2) {
    color: var(--mb-navy, #0a2e55);
}

/* Related-links box at the end of a guide. Not .mb-card: that class sets height: 100% for
   the feature grids, and inside a single flex column it stretches the box past the footer. */
.mb-related {
    background: var(--mb-surface);
    border: 1px solid var(--mb-border);
    border-radius: var(--mb-radius);
    padding: 1.5rem 1.75rem;
}

.mb-related h2 {
    margin-bottom: .75rem;
}

.mb-related ul {
    padding-left: 1.1rem;
}