@charset "utf-8";

/*
    Billing and payments - /solutions/payments.

    ? The solutions are problem-first, so this page keeps their order (the problem, what it costs, what
    ? you do not have yet, the answer, the nudge) and lays it out as the thing it is about. Here that is one invoice, from the closed work order to the card payment.

    ? Same ground as the rest of the site (concrete, the brand's steel, red used the way a shop uses
    ? paint). Scoped under .payments-page so the shared components keep their look elsewhere.
*/

.payments-page {
    --pay-concrete: #e8ebee;
    --pay-paper: #f4f6f7;
    --pay-line: #cdd4da;
    --pay-ink: #151b21;
    --pay-steel: #1f272f;
    --pay-text: #36424d;
    --pay-muted: #55616c;
    --pay-red: #fb172b;
    --pay-red-dark: #d9101f;
    --pay-green: #1f9d55;

    font-family: "Archivo", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-stretch: 100%;
    color: var(--pay-text);
}

/*  The display voice, shared with the other pages: the same family pulled condensed and heavy */
.payments-page .pay-hero-title,
.payments-page .pay-section-title,
.payments-page .trade-card-title,
.payments-page .stop-label,
.payments-page .stop-title,
.payments-page .rule-name,
.payments-page .pay-nudge-title {
    font-stretch: 76%;
    font-weight: 800;
    line-height: 1;
    letter-spacing: 0;
}

.payments-page a:focus-visible {
    outline: 3px solid var(--pay-ink);
    outline-offset: 3px;
}

.payments-page .pay-hero a:focus-visible,
.payments-page .pay-nudge a:focus-visible {
    outline-color: #ffffff;
}

/*-------------------------------------------------------------------------------------------------
    Hero - dark, so the calendar is the lightest thing on the first screen
-------------------------------------------------------------------------------------------------*/

.payments-page .pay-hero {
    position: relative;
    background-color: var(--pay-ink);
    color: #c3ccd5;
    padding: clamp(48px, 7vw, 88px) 0 clamp(56px, 7vw, 88px);
}

/*  The red bay line, as on the other pages */
.payments-page .pay-hero::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 4px;
    background-image: repeating-linear-gradient(90deg, var(--pay-red) 0 28px, transparent 28px 48px);
}

.payments-page .pay-hero-inner {
    display: grid;
    grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
    gap: clamp(32px, 5vw, 72px);
    align-items: center;
}

.payments-page .pay-hero-eyebrow {
    margin: 0 0 18px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #ff6b78;
}

.payments-page .pay-hero-title {
    margin: 0 0 24px;
    font-size: clamp(38px, 4.4vw, 64px);
    line-height: 0.98;
    color: #ffffff;
    max-width: 18ch;
    text-wrap: balance;
}

.payments-page .pay-hero-lede {
    margin: 0 0 32px;
    font-size: 18px;
    line-height: 1.6;
    color: #c3ccd5;
    max-width: 52ch;
}

.payments-page .pay-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

/*  The quiet button, drawn for the dark ground */
.payments-page .btn-pay-ghost,
.payments-page .btn-pay-ghost:focus {
    background-color: transparent;
    border-color: rgba(255, 255, 255, 0.6);
    color: #ffffff;
}

.payments-page .btn-pay-ghost:hover {
    background-color: #ffffff;
    border-color: #ffffff;
    color: var(--pay-ink);
}

/*  The trade's own screen ------------------------------------------------------------------------- */

.payments-page .trade-card {
    margin: 0 0 0 auto;
    width: 100%;
    max-width: 500px;
    background-color: var(--pay-paper);
    border-radius: 14px;
    padding: 0 22px 18px;
    box-shadow: 0 40px 60px -36px rgba(0, 0, 0, 0.7);
}

.payments-page .trade-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 0 14px;
    border-bottom: 1px solid var(--pay-line);
}

.payments-page .trade-card-title {
    font-stretch: 76%;
    font-weight: 800;
    font-size: 26px;
    line-height: 1;
    color: var(--pay-ink);
}

.payments-page .trade-card-tag {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 600;
    color: var(--pay-muted);
}

.payments-page .trade-card-tag::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: var(--pay-green);
}

.payments-page .trade-rows {
    list-style: none;
    margin: 0;
    padding: 0;
}

/*  ? The one thing on the page that moves by itself: the screen fills in, a line at a time, once. */
.payments-page .trade-row,
.payments-page .trade-line {
    animation: trade-in 0.45s cubic-bezier(0.2, 0.7, 0.2, 1) both;
    animation-delay: calc(0.4s + var(--i, 0) * 0.45s);
}

.payments-page .trade-row {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    gap: 14px;
    align-items: baseline;
    margin: 0;
    padding: 12px 0;
    border-bottom: 1px solid var(--pay-line);
    font-size: 15px;
}

.payments-page .trade-row-label {
    font-weight: 600;
    color: var(--pay-muted);
}

.payments-page .trade-row-value {
    font-weight: 700;
    color: var(--pay-ink);
    font-variant-numeric: tabular-nums;
    text-align: right;
    overflow-wrap: anywhere;
}

/*  A reading that matters gets the paint: what is due, what is wrong, what is waiting */
.payments-page .trade-row-flag .trade-row-value {
    color: var(--pay-red-dark);
}

.payments-page .trade-row-warn .trade-row-value {
    color: #b45309;
}

.payments-page .trade-row-ok .trade-row-value {
    color: #167a42;
}

.payments-page .trade-line {
    margin: 14px 0 0;
    text-align: center;
}

/*  What the software did or caught, as paint on the floor */
.payments-page .trade-pill {
    display: inline-block;
    padding: 8px 14px;
    background-color: #ffffff;
    border: 1.5px dashed var(--pay-red);
    border-radius: 12px;
    font-size: 13.5px;
    font-weight: 700;
    line-height: 1.4;
    color: var(--pay-red-dark);
    text-wrap: balance;
}

/*  The calm line that follows: the thing is done, and the shop is not holding it in its head */
.payments-page .trade-pill-done {
    border: 0;
    border-radius: 100px;
    background-color: var(--pay-steel);
    color: #ffffff;
}

.payments-page .trade-card-caption {
    margin-top: 14px;
    font-size: 13px;
    line-height: 1.5;
    color: var(--pay-muted);
}

@keyframes trade-in {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {

    .payments-page .trade-row,
    .payments-page .trade-line {
        animation: none;
    }
}

/*-------------------------------------------------------------------------------------------------
    Shared section heading
-------------------------------------------------------------------------------------------------*/

.payments-page .pay-label {
    margin: 0 0 14px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--pay-red-dark);
}

.payments-page .pay-section-title {
    margin: 0 0 18px;
    font-size: clamp(36px, 4.4vw, 56px);
    color: var(--pay-ink);
    text-wrap: balance;
}

.payments-page .pay-section-lede {
    margin: 0;
    font-size: 18px;
    line-height: 1.55;
    color: var(--pay-muted);
    max-width: 46ch;
}

/*-------------------------------------------------------------------------------------------------
    What it is costing you - questions for the team
-------------------------------------------------------------------------------------------------*/

.payments-page .pay-cost {
    background-color: var(--pay-concrete);
    padding: clamp(56px, 8vw, 104px) 0;
}

.payments-page .pay-cost-inner {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: clamp(28px, 5vw, 80px);
    align-items: center;
}

.payments-page .pay-cost-text {
    margin: 0;
    font-size: 17.5px;
    line-height: 1.6;
    color: var(--pay-text);
    max-width: 46ch;
}

.payments-page .ask {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.payments-page .ask-item {
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr);
    gap: 18px;
    align-items: start;
    margin: 0;
    padding: 20px 22px;
    background-color: #ffffff;
    border-left: 6px solid var(--pay-ink);
}

.payments-page .ask-num {
    font-stretch: 76%;
    font-weight: 800;
    font-size: 44px;
    line-height: 0.9;
    color: var(--pay-red-dark);
}

.payments-page .ask-question {
    margin: 0 0 6px;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--pay-ink);
}

.payments-page .ask-answer {
    margin: 0;
    font-size: 15.5px;
    line-height: 1.5;
    color: var(--pay-muted);
}

/*-------------------------------------------------------------------------------------------------
    The vehicle's life
-------------------------------------------------------------------------------------------------*/

.payments-page .pay-trip {
    background-color: #ffffff;
    padding: clamp(56px, 8vw, 104px) 0 clamp(24px, 4vw, 48px);
}

.payments-page .pay-trip-head {
    margin-bottom: clamp(40px, 5vw, 72px);
}

.payments-page .stops {
    list-style: none;
    margin: 0;
    padding: 0;
}

.payments-page .stop {
    position: relative;
    display: grid;
    grid-template-columns: 190px 40px minmax(0, 1fr);
    margin: 0;
    padding-bottom: clamp(44px, 5.5vw, 72px);
}

/*  The marker on the line: a small square with an ink edge, where the red line passes through */
.payments-page .stop::before {
    content: "";
    grid-column: 2;
    grid-row: 1;
    justify-self: center;
    width: 14px;
    height: 14px;
    margin-top: 10px;
    background-color: #ffffff;
    border: 3px solid var(--pay-ink);
    z-index: 1;
}

/*  The line itself: dashed red, running from this marker to the next */
.payments-page .stop::after {
    content: "";
    position: absolute;
    left: 208px;
    top: 28px;
    bottom: -8px;
    width: 3px;
    background-image: repeating-linear-gradient(180deg, var(--pay-red) 0 10px, transparent 10px 18px);
}

.payments-page .stop:last-child::after {
    display: none;
}

.payments-page .stop-link {
    margin: 20px 0 0;
    font-size: 15.5px;
    font-weight: 700;
}

.payments-page .stop-link a {
    color: var(--pay-ink);
    text-decoration: underline;
    text-decoration-color: var(--pay-red);
    text-decoration-thickness: 2px;
    text-underline-offset: 4px;
}

.payments-page .stop-link a i {
    margin-left: 4px;
    font-size: 13px;
    transition: transform 0.18s ease;
}

.payments-page .stop-link a:hover i,
.payments-page .stop-link a:focus i {
    transform: translateX(4px);
}

.payments-page .stop-label {
    grid-column: 1;
    grid-row: 1;
    margin: 0;
    font-size: clamp(28px, 2.8vw, 40px);
    font-variant-numeric: tabular-nums;
    color: var(--pay-ink);
}

.payments-page .stop-body {
    grid-column: 3;
    grid-row: 1;
    min-width: 0;
}

.payments-page .stop-title {
    margin: 0 0 20px;
    font-size: clamp(28px, 3vw, 40px);
    color: var(--pay-ink);
    max-width: 24ch;
    text-wrap: balance;
}

.payments-page .stop-title .tier-badge {
    vertical-align: middle;
    font-stretch: 100%;
    letter-spacing: normal;
}

/*  What happens today, then what the schedule does. Today is the quieter of the two. */
.payments-page .stop-today,
.payments-page .stop-text {
    margin: 0;
    font-size: 17px;
    line-height: 1.6;
    max-width: 60ch;
}

.payments-page .stop-today {
    padding: 14px 18px;
    margin-bottom: 18px;
    background-color: var(--pay-paper);
    border-left: 4px solid var(--pay-line);
    color: var(--pay-muted);
}

.payments-page .stop-text {
    color: var(--pay-text);
}

.payments-page .stop-tag {
    display: block;
    margin-bottom: 4px;
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--pay-muted);
}

.payments-page .stop-tag-with {
    color: var(--pay-red-dark);
}

.payments-page .stop-points {
    list-style: none;
    margin: 22px 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-width: 62ch;
}

.payments-page .stop-points li {
    position: relative;
    margin: 0;
    padding-left: 22px;
    font-size: 15.5px;
    line-height: 1.55;
    color: var(--pay-muted);
}

/*  A painted square, not a tick: these are facts about the product, not a checklist */
.payments-page .stop-points li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.5em;
    width: 8px;
    height: 8px;
    background-color: var(--pay-red);
}

/*-------------------------------------------------------------------------------------------------
    Where it stops and you start
-------------------------------------------------------------------------------------------------*/

.payments-page .pay-rules {
    background-color: #ffffff;
    padding: clamp(56px, 8vw, 104px) 0;
}

.payments-page .pay-rules-inner {
    display: grid;
    grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
    gap: clamp(28px, 5vw, 80px);
    align-items: start;
}

/*  The heading stays in view while the rows go by */
.payments-page .pay-rules-head {
    position: sticky;
    top: 110px;
}

.payments-page .rule-rows {
    list-style: none;
    margin: 0;
    padding: 0;
    border-bottom: 1px solid var(--pay-line);
}

.payments-page .rule-rows li {
    margin: 0;
    padding: 28px 0;
    border-top: 1px solid var(--pay-line);
}

.payments-page .rule-name {
    margin: 0 0 12px;
    font-size: clamp(26px, 2.6vw, 34px);
    color: var(--pay-ink);
}

.payments-page .rule-text {
    margin: 0;
    font-size: 16.5px;
    line-height: 1.6;
    color: var(--pay-text);
    max-width: 60ch;
}

/*-------------------------------------------------------------------------------------------------
    The nudge - the dark annex
-------------------------------------------------------------------------------------------------*/

.payments-page .pay-nudge {
    position: relative;
    background-color: var(--pay-steel);
    color: #c3ccd5;
    padding: clamp(56px, 8vw, 104px) 0;
}

.payments-page .pay-nudge::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 4px;
    background-image: repeating-linear-gradient(90deg, var(--pay-red) 0 28px, transparent 28px 48px);
}

.payments-page .pay-nudge-inner {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: clamp(32px, 6vw, 88px);
    align-items: start;
}

.payments-page .pay-nudge-title {
    margin: 0 0 22px;
    font-size: clamp(34px, 4vw, 52px);
    color: #ffffff;
    max-width: 20ch;
    text-wrap: balance;
}

.payments-page .pay-nudge-text {
    margin: 0 0 28px;
    font-size: 17.5px;
    line-height: 1.6;
    color: #b6c0ca;
    max-width: 52ch;
}

.payments-page .pay-nudge-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px 24px;
}

.payments-page .pay-nudge-alt {
    font-size: 15.5px;
    font-weight: 600;
    color: #ffffff;
    text-decoration: underline;
    text-decoration-color: var(--pay-red);
    text-decoration-thickness: 2px;
    text-underline-offset: 4px;
}

/*  The other places a shop loses time: a short list of ways on, not a second set of cards */
.payments-page .pay-others-title {
    margin: 0 0 14px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #b6c0ca;
}

.payments-page .pay-others ul {
    list-style: none;
    margin: 0;
    padding: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.18);
}

.payments-page .pay-others li {
    margin: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.18);
}

.payments-page .pay-others a {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 0;
    font-size: 16.5px;
    font-weight: 600;
    color: #ffffff;
    text-decoration: none;
}

.payments-page .pay-others a > i:first-child {
    width: 22px;
    text-align: center;
    color: #ff6b78;
}

.payments-page .pay-others a span {
    flex: 1 1 auto;
}

.payments-page .pay-others-go {
    font-size: 13px;
    transition: transform 0.18s ease;
}

.payments-page .pay-others a:hover .pay-others-go,
.payments-page .pay-others a:focus .pay-others-go {
    transform: translateX(4px);
}

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

@media (max-width: 991px) {

    .payments-page .pay-hero-inner,
    .payments-page .pay-cost-inner,
    .payments-page .pay-rules-inner,
    .payments-page .pay-nudge-inner {
        grid-template-columns: minmax(0, 1fr);
    }

    .payments-page .pay-hero-title {
        max-width: 18ch;
    }

    .payments-page .trade-card {
        margin-left: 0;
    }

    .payments-page .pay-rules-head {
        position: static;
    }

    .payments-page .pay-rules-inner {
        gap: 28px;
    }

        /*  The time moves above the stop, and the line moves to the left edge */
    .payments-page .stop {
        grid-template-columns: 28px minmax(0, 1fr);
    }

    .payments-page .stop::before {
        grid-column: 1;
        justify-self: start;
        margin-top: 6px;
    }

    .payments-page .stop::after {
        left: 6px;
        top: 24px;
    }

    .payments-page .stop-label {
        grid-column: 2;
        grid-row: 1;
        margin-bottom: 12px;
    }

    .payments-page .stop-body {
        grid-column: 2;
        grid-row: 2;
    }
}

@media (max-width: 767px) {

    .payments-page .pay-hero-actions .btn {
        width: 100%;
    }

    .payments-page .trade-card {
        padding: 0 16px 16px;
    }

    .payments-page .trade-row {
        grid-template-columns: minmax(0, 1fr);
        gap: 2px;
    }

    .payments-page .trade-row-value {
        text-align: left;
    }

    .payments-page .ask-item {
        grid-template-columns: 40px minmax(0, 1fr);
        gap: 12px;
        padding: 16px;
    }

    .payments-page .ask-num {
        font-size: 36px;
    }

    .payments-page .pay-nudge-actions .btn {
        width: 100%;
    }
}