@charset "utf-8";

/*
    Shared page components for mecanopro.io.

    ? Every template includes this; the per-page stylesheets under css/{page}/ carry only what is
    ? genuinely unique to one page. Tokens and buttons come from the theme, which core has already
    ? loaded by the time this arrives.
*/

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

/*  ? Sized to what it holds rather than to the viewport. Every page here has something worth
    ? reading immediately under the title, and a 100vh opener pushes all of it off the first
    ? screen. */
.site-hero {
    background: linear-gradient(180deg, #fbfcfd 0%, #ffffff 100%);
    border-bottom: 1px solid var(--mp-border);
    padding: 72px 0 64px;
    text-align: center;
}

.site-hero-eyebrow {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--mp-red);
    margin-bottom: 14px;
}

.site-hero-title {
    font-size: 46px;
    margin: 0 auto 20px;
    max-width: 18ch;
}

.site-hero-lede {
    font-size: 19px;
    color: var(--mp-muted);
    max-width: 62ch;
    margin: 0 auto 30px;
}

.site-hero-actions {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
}

/*-------------------------------------------------------------------------------------------------
    Trust strip
-------------------------------------------------------------------------------------------------*/

.trust-strip {
    background-color: var(--mp-ink);
    padding: 34px 0;
}

.trust-point {
    text-align: center;
    padding: 8px 6px;
}

.trust-point-stat {
    font-size: 30px;
    font-weight: 800;
    color: #ffffff;
    line-height: 1.1;
    margin: 0 0 2px;
}

.trust-point-label {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--mp-red);
    margin: 0 0 6px;
}

.trust-point-body {
    font-size: 14px;
    color: #a7b0b9;
    margin: 0;
}

/*-------------------------------------------------------------------------------------------------
    Generic section spacing
-------------------------------------------------------------------------------------------------*/

.leak-band,
.feature-preview,
.breadth-band,
.industry-strip,
.aeo-band,
.pricing-teaser,
.testimonial-band,
.migration-band,
.faq-section,
.industry-pains,
.industry-fits,
.industry-siblings,
.feature-detail,
.feature-siblings,
.solution-detail,
.solution-siblings,
.about-pillars,
.about-commitments,
.pricing-cards,
.pricing-matrix-section,
.addon-section,
.blog-index,
.demo-section,
.contact-section {
    padding: 68px 0;
}

.breadth-band,
.pricing-teaser,
.migration-band,
.industry-fits,
.about-commitments {
    background-color: var(--mp-wash);
}

/*-------------------------------------------------------------------------------------------------
    Where the day goes - the five leaks
-------------------------------------------------------------------------------------------------*/

/*  ? auto-fit rather than a fixed column count: five cards never divide evenly into a four or
    ? three column grid, and this lets the last row fill the width instead of leaving one card
    ? stranded beside empty space. */
.leak-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 16px;
}

.leak-card {
    display: block;
    background-color: var(--mp-surface);
    border: 1px solid var(--mp-border);
    border-radius: var(--mp-radius-lg);
    padding: 24px;
    text-decoration: none;
    color: inherit;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.leak-card:hover,
.leak-card:focus {
    border-color: #cfd6dd;
    box-shadow: var(--mp-shadow-lift);
    transform: translateY(-2px);
    text-decoration: none;
    color: inherit;
}

.leak-card-icon {
    font-size: 22px;
    color: var(--mp-red);
    margin-bottom: 14px;
    display: block;
}

.leak-card-title {
    font-size: 17px;
    margin: 0 0 12px;
    line-height: 1.35;
}

.leak-card-name {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--mp-red);
    margin: 0;
}

.leak-card-name i {
    font-size: 11px;
    margin-left: 2px;
}

.proof-stat {
    margin-top: 44px;
    text-align: center;
    border-top: 1px solid var(--mp-border);
    padding-top: 36px;
}

.proof-stat-figure {
    font-size: 52px;
    font-weight: 800;
    color: var(--mp-red);
    line-height: 1;
    margin: 0 0 8px;
}

.proof-stat-label {
    font-size: 18px;
    color: var(--mp-muted);
    margin: 0;
}

/*-------------------------------------------------------------------------------------------------
    Feature preview grid
-------------------------------------------------------------------------------------------------*/

.feature-preview-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 12px;
}

.feature-preview-card {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    background-color: var(--mp-surface);
    border: 1px solid var(--mp-border);
    border-radius: var(--mp-radius);
    padding: 16px 18px;
    text-decoration: none;
    color: var(--mp-ink);
    font-weight: 600;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}

.feature-preview-card:hover,
.feature-preview-card:focus {
    border-color: var(--mp-red);
    background-color: var(--mp-red-wash);
    text-decoration: none;
    color: var(--mp-ink);
}

.feature-preview-card i {
    color: var(--mp-red);
    font-size: 18px;
    width: 22px;
    text-align: center;
}

.feature-preview-name {
    flex: 1 1 auto;
}

/*-------------------------------------------------------------------------------------------------
    Not just cars
-------------------------------------------------------------------------------------------------*/

.breadth-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}

.breadth-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 10px;
}

.breadth-list li {
    display: flex;
    align-items: center;
    gap: 10px;
    background-color: var(--mp-surface);
    border: 1px solid var(--mp-border);
    border-radius: var(--mp-radius);
    padding: 12px 14px;
    font-size: 14.5px;
    font-weight: 600;
    color: var(--mp-ink);
}

.breadth-list li i {
    color: var(--mp-red);
    width: 20px;
    text-align: center;
}

/*-------------------------------------------------------------------------------------------------
    Industries
-------------------------------------------------------------------------------------------------*/

.industry-chip-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.industry-chip {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    background-color: var(--mp-surface);
    border: 1px solid var(--mp-border);
    border-radius: 100px;
    padding: 9px 18px;
    font-size: 14.5px;
    font-weight: 600;
    color: var(--mp-ink);
    text-decoration: none;
    transition: border-color 0.15s ease, color 0.15s ease;
}

.industry-chip:hover,
.industry-chip:focus {
    border-color: var(--mp-red);
    color: var(--mp-red-dark);
    text-decoration: none;
}

.industry-chip i {
    color: var(--mp-red);
}

/*  The generic teaser tile - one card per item on any catalog hub (Industries, Features,
    ? Solutions) and on the "siblings" grid at the foot of any of their detail pages. Named for what
    ? it is rather than which catalog it first appeared on, since it is not any one of theirs. */
.tile-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 16px;
}

.tile-card {
    display: block;
    background-color: var(--mp-surface);
    border: 1px solid var(--mp-border);
    border-radius: var(--mp-radius-lg);
    padding: 24px;
    text-decoration: none;
    color: inherit;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.tile-card:hover,
.tile-card:focus {
    border-color: #cfd6dd;
    box-shadow: var(--mp-shadow-lift);
    transform: translateY(-2px);
    text-decoration: none;
    color: inherit;
}

.tile-card-icon {
    font-size: 22px;
    color: var(--mp-red);
    display: block;
    margin-bottom: 14px;
}

.tile-card-name {
    font-size: 17px;
    margin: 0 0 8px;
}

.tile-card-line {
    font-size: 14.5px;
    color: var(--mp-muted);
    margin: 0 0 14px;
}

.tile-card-go {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--mp-red);
}

.tile-card-go i {
    font-size: 11px;
    margin-left: 2px;
}

/*-------------------------------------------------------------------------------------------------
    The AEO band
-------------------------------------------------------------------------------------------------*/

.aeo-band {
    background-color: var(--mp-steel);
    color: #cbd3db;
}

.aeo-band .section-title {
    color: #ffffff;
}

.aeo-band .section-lede {
    color: #a9b4bf;
}

.aeo-band .section-action a {
    color: #ffffff;
}

.aeo-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.aeo-list li {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    font-size: 15.5px;
    color: #e2e7ec;
}

.aeo-list li i {
    color: var(--mp-red);
    margin-top: 5px;
    font-size: 13px;
}

/*-------------------------------------------------------------------------------------------------
    Plan cards
-------------------------------------------------------------------------------------------------*/

.plan-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 16px;
    align-items: start;
}

.plan-card {
    background-color: var(--mp-surface);
    border: 1px solid var(--mp-border);
    border-radius: var(--mp-radius-lg);
    padding: 26px 22px;
    display: flex;
    flex-direction: column;
    height: 100%;
}

/*  ? Only the recommended tier is lifted. A shadow and a border on every card flattens the
    ? hierarchy back out and says nothing. */
.plan-card-popular {
    border-color: var(--mp-red);
    box-shadow: var(--mp-shadow-lift);
}

.plan-card-flag {
    display: inline-block;
    align-self: flex-start;
    background-color: var(--mp-red);
    color: #ffffff;
    border-radius: 100px;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 3px 11px;
    margin: -38px 0 14px;
}

.plan-card-name {
    font-size: 20px;
    margin: 0 0 10px;
}

.plan-card-price {
    margin: 0 0 10px;
    /*  Digits line up between cards when they are tabular */
    font-variant-numeric: tabular-nums;
}

.plan-card-amount {
    font-size: 38px;
    font-weight: 800;
    color: var(--mp-ink);
    line-height: 1;
}

.plan-card-period {
    font-size: 15px;
    color: var(--mp-muted);
    margin-left: 3px;
}

.plan-card-tagline {
    font-size: 14.5px;
    color: var(--mp-muted);
    margin: 0 0 18px;
}

.plan-card-adds-label {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--mp-muted);
    margin: 0 0 10px;
}

.plan-card-list {
    list-style: none;
    margin: 0 0 22px;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
    font-size: 14.5px;
}

.plan-card-list li {
    display: flex;
    align-items: flex-start;
    gap: 9px;
}

.plan-card-list li i {
    color: var(--mp-red);
    font-size: 12px;
    margin-top: 5px;
}

/*  The line a tier that adds nothing of its own carries instead of a list */
.plan-card-everything {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    font-size: 14.5px;
    font-weight: 600;
    color: var(--mp-ink);
    margin: 0 0 22px;
}

.plan-card-everything i {
    color: var(--mp-red);
    font-size: 12px;
    margin-top: 5px;
}

/*  ? Pushed to the bottom so the buttons line up across cards of different heights */
.plan-card-cta {
    margin-top: auto;
}

.pricing-currency-note {
    margin-top: 22px;
    font-size: 13.5px;
    color: var(--mp-muted);
    text-align: center;
}

/*-------------------------------------------------------------------------------------------------
    Testimonials
-------------------------------------------------------------------------------------------------*/

.testimonial {
    background-color: var(--mp-surface);
    border: 1px solid var(--mp-border);
    border-radius: var(--mp-radius-lg);
    padding: 26px;
    margin: 0;
    height: 100%;
}

.testimonial-quote {
    border: none;
    padding: 0;
    margin: 0 0 18px;
    font-size: 16.5px;
    line-height: 1.6;
    color: var(--mp-ink);
}

.testimonial-source {
    font-size: 14px;
}

.testimonial-name {
    display: block;
    font-weight: 700;
    color: var(--mp-ink);
}

.testimonial-shop {
    display: block;
    color: var(--mp-muted);
}

/*-------------------------------------------------------------------------------------------------
    Migration
-------------------------------------------------------------------------------------------------*/

.migration-cards {
    display: flex;
    flex-wrap: wrap;
}

.migration-card {
    background-color: var(--mp-surface);
    border: 1px solid var(--mp-border);
    border-radius: var(--mp-radius-lg);
    padding: 28px;
    height: 100%;
}

.migration-card-icon {
    font-size: 24px;
    color: var(--mp-red);
    margin-bottom: 16px;
    display: block;
}

.migration-card-title {
    font-size: 19px;
    margin: 0 0 10px;
}

.migration-card-body {
    color: var(--mp-muted);
    margin: 0;
}

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

.faq-block-heading {
    font-size: 30px;
    margin: 0 0 26px;
}

.faq-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-width: 860px;
}

.faq-item {
    border: 1px solid var(--mp-border);
    border-radius: var(--mp-radius);
    background-color: var(--mp-surface);
    padding: 4px 20px 6px;
}

.faq-question {
    margin: 0;
    font-size: 17px;
}

.faq-question-toggle {
    background: none;
    border: none;
    padding: 16px 0;
    width: 100%;
    text-align: left;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    color: var(--mp-ink);
    font-weight: 700;
    font-size: 17px;
    box-shadow: none;
}

.faq-question-icon {
    color: var(--mp-muted);
    font-size: 13px;
    flex: 0 0 auto;
}

.faq-answer {
    padding: 0 0 16px;
    color: var(--mp-body);
}

.faq-answer p:last-child {
    margin-bottom: 0;
}

/*-------------------------------------------------------------------------------------------------
    Closing call to action
-------------------------------------------------------------------------------------------------*/

/*  Brand red rather than the steel. It is the last thing before the footer and the one band on the
    page asking for an action, so it is the right place to spend the accent - and it stops the band
    and the footer under it reading as one continuous dark slab. */
.cta-band {
    background-color: var(--mp-red);
    padding: 60px 0;
}

.cta-band-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 32px;
    flex-wrap: wrap;
}

.cta-band-copy {
    flex: 1 1 420px;
}

.cta-band-title {
    color: #ffffff;
    font-size: 30px;
    margin: 0 0 10px;
}

/*  Translucent white rather than the steel band's grey-blue, which turned muddy on red */
.cta-band-body {
    color: rgba(255, 255, 255, 0.88);
    margin: 0;
    max-width: 60ch;
}

.cta-band-action {
    flex: 0 0 auto;
    text-align: right;
}

.cta-band-alt {
    display: block;
    margin-top: 12px;
    color: rgba(255, 255, 255, 0.85);
    font-size: 14px;
    text-decoration: underline;
}

.cta-band-alt:hover,
.cta-band-alt:focus {
    color: #ffffff;
}

/*-------------------------------------------------------------------------------------------------
    Responsive
-------------------------------------------------------------------------------------------------*/

@media (max-width: 991px) {

    .site-hero {
        padding: 56px 0 50px;
    }

    .site-hero-title {
        font-size: 36px;
    }

    .site-hero-lede {
        font-size: 17.5px;
    }

    .leak-band,
    .feature-preview,
    .breadth-band,
    .industry-strip,
    .aeo-band,
    .pricing-teaser,
    .testimonial-band,
    .migration-band,
    .faq-section,
    .industry-pains,
    .industry-fits,
    .industry-siblings,
    .feature-detail,
    .feature-siblings,
    .solution-detail,
    .solution-siblings,
    .about-pillars,
    .about-commitments,
    .pricing-cards,
    .pricing-matrix-section,
    .addon-section,
    .blog-index,
    .demo-section,
    .contact-section {
        padding: 52px 0;
    }

    .proof-stat-figure {
        font-size: 42px;
    }

    .cta-band-action {
        text-align: left;
    }
}

@media (max-width: 767px) {

    .site-hero {
        padding: 44px 0 40px;
    }

    .site-hero-title {
        font-size: 29px;
        max-width: none;
    }

    .site-hero-lede {
        font-size: 16.5px;
    }

    .site-hero-actions .btn {
        width: 100%;
    }

    .leak-band,
    .feature-preview,
    .breadth-band,
    .industry-strip,
    .aeo-band,
    .pricing-teaser,
    .testimonial-band,
    .migration-band,
    .faq-section,
    .industry-pains,
    .industry-fits,
    .industry-siblings,
    .feature-detail,
    .feature-siblings,
    .solution-detail,
    .solution-siblings,
    .about-pillars,
    .about-commitments,
    .pricing-cards,
    .pricing-matrix-section,
    .addon-section,
    .blog-index,
    .demo-section,
    .contact-section {
        padding: 40px 0;
    }

    .trust-point-stat {
        font-size: 24px;
    }

    .proof-stat-figure {
        font-size: 36px;
    }

    .proof-stat-label {
        font-size: 16px;
    }

    .cta-band {
        padding: 44px 0;
    }

    .cta-band-title {
        font-size: 24px;
    }

    .faq-block-heading {
        font-size: 24px;
    }

    /*  Cards in a row become a stack, and the bottom margin the grid gap gave them has to come
        from somewhere once the Bootstrap columns take over */
    .migration-cards > div,
    .testimonial-grid > div {
        margin-bottom: 16px;
    }
}